@charset "utf-8";
html {
    font-size: 62.5%;
}

body {
    font-family: "Noto Sans JP", Arial, sans-serif;
    font-style: normal;
    color: #2f2f2f;
    background-color: #fff;
    line-height: 1.5;
    margin: 0;
    padding: 0;
}

img {
    height: auto;
}
.container {
    width: 100%;
    margin: 0 auto;
}

.sab__taitle {
    font-size: 2.0rem;
    font-weight: 700;
    line-height: 100%;
}
.service__circle{
    text-align: center;
    
}
.service__t1{
    width: 100%;
    flex-direction: column;
    justify-content: center;
    flex-shrink: 0;
    align-self: stretch;
    color: #000;
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}
.service__icon_Img {
    display: flex;
    justify-content: center;
    gap: 40px;
  }
  .service__img-box img {
    width: 100px;
    height: auto;
  }
  .service__circle1 {
    background: #FF7E04;
    margin: 0 auto;
    justify-content: center; /* 横方向の中央揃え */
    gap: 20px;               /* グループの間にスペース */
  }
  .kadai {
    display: flex;          /* 横並びにする */
    gap: 50px;              /* 文字の間にスペース */
    justify-content: center; /* 真ん中に寄せる（お好みで） */
    align-items: center;    /* 縦方向の中央揃え */
  }
  .kadai___1 {
    color: #FFF;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-align: center;  
    gap: 20px;
  }
  .service__circle1{
    align-self: stretch;
    color: #000;
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
  }
/* === サービス全体の背景と文字中央寄せ === */
.service__1 {
    background-color: #ff7f00; /* オレンジ背景 */
    padding: 40px 20px;
    text-align: center;
    color: #fff;
  }
  
  /* === タイトル文字 === */
  .title1 {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 20px;
  }
  
  /* === 説明文 === */
  .service__t2 {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 20px;
  }
  
  /* === 画像まわり === */
  .service__Img__circle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
  
  /* === 画像2枚並び（縦に表示） === */
  .service__Img1 {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .service__Img1 img {
    width: 100%;
    max-width: 300px;
    border-radius: 12px;
    object-fit: cover;
  }
  
  /* === テキストボックス（右側） === */
  .service__circle2 {
    font-size: 14px;
    color: #fff;
    width: 30rem;
  }
  
  /* === ボタン風リンク === */
  .service__btn1 a {
    display: inline-block;
    background-color: #fff;
    color: #ff7f00;
    padding: 10px 20px;
    border-radius: 10px;
    text-decoration: none;
    margin-top: 10px;
    font-weight: bold;
    font-size: 14px;
  }
  .service__btn1 a:hover {
    background-color: #ffe5cc;
  }

.service__1 {
    background-color: #ff7f00;
    color: #fff;
    padding: 40px 20px;
    text-align: center;
  }
  
  .title1 {
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 20px;
  }
  
  .service__t2 {
    font-size: 14px;
    line-height: 1.8;
    margin-bottom: 20px;
  }
  
  .service__Img__circle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
  
  .service__Img1 {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  
  .service__Img1 img {
    width: 100%;
    max-width: 300px;
    border-radius: 12px;
    object-fit: cover;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  }
  
  .service__circle2 {
    font-size: 14px;
    color: #fff;
    text-align: center;
  }
  
  .service__btn1 {
    margin-top: 20px;
  }
  
  .service__btn1 a {
    display: inline-block;
    background-color: #fff;
    color: #ff7f00;
    padding: 10px 24px;
    border-radius: 12px;
    font-weight: bold;
    font-size: 14px;
    text-decoration: none;
    transition: background-color 0.3s;
  }
  
  .service__btn1 a:hover {
    background-color: #ffe5cc;
  }
  .service__Img1 {
    display: flex;
    gap: 20px; /* 画像同士の間隔 */
    justify-content: center; /* 中央寄せ */
    flex-wrap: wrap; /* 小さい画面で折り返す */
    flex-direction: row;
  }
  
  .service__Img1 img {
    width: 150px; /* 画像の横幅 */
    height: auto; /* 縦横比を維持 */
    object-fit: cover; /* 画像の切れ方を調整 */
    border-radius: 8px; /* 角を少し丸く */
  }
  .service__2 {
    padding: 40px 20px;
    background-color: #fff;
    text-align: center;
  }
  .title2{
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px;
    line-height: 1.5;
    color: #FF7E04;
  }
  .title1 {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px;
    line-height: 1.5;
  }
  
  .subtitle {
    font-size: 16px;
    margin-bottom: 30px;
  }
  
  .service__flexBox {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
  }
  .service__t3{
    color: #000;
    font-size: 14px;
    line-height: 1.8;
    margin-bottom: 20px;
  }
  @media screen and (min-width: 768px) {
    .service__Img__circle {
      flex-direction: row;
      justify-content: center;
    }
    .service__Img1 {
        display: flex;
        gap: 20px; /* 画像同士の間隔 */
        justify-content: center; /* 中央寄せ */
        flex-wrap: wrap; /* 小さい画面で折り返す */
        flex-direction: row;
      }
      
      .service__Img1 img {
        width: 25rem; /* 画像の横幅 */
        height: auto; /* 縦横比を維持 */
        object-fit: cover; /* 画像の切れ方を調整 */
        border-radius: 8px; /* 角を少し丸く */
      }
    .service__Img__circle1{
        flex-direction: row;
      justify-content: center;
      display: flex;
      gap: 20px;
    }
        .service__flexBox {
          flex-direction: row;
          justify-content: center;
        }
      
        .service__text {
          width: 40%;
          text-align: left;
        }
      
        .service__images{
          width: 50%;
          display: flex;
          gap: 16px;
          flex-wrap: wrap;
          justify-content: center;
        }
      
        .service__images img {
          width: 48%;
          height: auto;
          border-radius: 8px;
          object-fit: cover;
        }
        .img{
          height: auto;
          width: 70%;
        }
      }