@charset "UTF-8";

.main_image{
  .text{
    font-feature-settings: "palt";
  }
}
/* lead_sec */
.lead_sec {

  .sec_text {
    margin-bottom: 40px;
  }

  .about_flex_wrapper {
    width: 570px;
    column-gap: 45px;
    max-width: 100%;
    margin: 0 auto;

    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .about_btn {
    z-index: 1;
    max-width: 293px;
  }
  .about_btn::before {
    width: 55px;
    height: 36px;
      background: url(/taniyama/images/clinic/price_yajirushi.webp) center/contain no-repeat;
  }

  @media screen and (max-width: 768px) {

    .sec_text {
      margin-bottom: 13.8vw;
    }

    .about_flex_wrapper {
      flex-direction: column;
      justify-content: center;
      align-items: center;
      row-gap: 8vw;
    }
    .about_btn {
      margin-left: 0;
      max-width: initial;
    }
    .about_btn::before {
        right: 3.26vw;
        width:  14vw;
        height: 10vw;
    }
    .about_btn01::after{
      width: 24.42vw;
      height: 20vw;
      left: -3.67vw;
      bottom: 0vw;
    }
    .about_btn02::after{
      width: 27.07vw;
      height: 20vw;
      left: -2.17vw;
      bottom: 0vw;
    }
  }

}

/* sec01 */
.sec01 {
  /* overflow: hidden; */
  margin-bottom: 125px;

  .inner {
    padding: 0 clamp(65px, 50vw - 575px, 145px);
    max-width: initial;
  }

  .clinic_box {
    .flexbox {
      width: 1200px;
      max-width: 100%;
      margin: 0 auto 80px;
      column-gap: 0;
      align-items: flex-start;

      .imagebox{
        width: 100%;
      }
      .box_image{
        position: relative;
        .circle{
          background-color: rgba(255, 255, 255, 0.9);
          font-family: 'Zen Maru Gothic', sans-serif;
          width: 213px;
          height: 213px;
          display: flex;
          justify-content: center;
          align-items: center;
          text-align: center;
          border-radius: 50vh;
          flex-direction: column;
          line-height: 1;
          font-size: 20px;
          position: absolute;
          filter: drop-shadow(0px 0px 14px rgba(0, 0, 0, 0.5));
          bottom: -30px;
          right: -30px;
          span{
            padding-top: 10px;
            color: #F08B00;
            font-weight: bold;
          }
      }
      }
      .textbox {
        box-sizing: border-box;
        width: 100%;

        .sec_title {
          margin-bottom: 0;
          letter-spacing: .05em;
          font-size: 18px;
          font-weight: Bold;
        }
        .sec_subtitle {
          display: flex;
          align-items: baseline;
        }
        .left{
          font-size: 40px;
          font-family: 'Inter', sans-serif;
          font-weight: bold;
          span{
            font-weight: bold;
            color: #F08B00;
          }
        }
        .right{
          padding-left: 20px;
          font-size: 20px;
          font-weight: bold;
        }

        .head_t_box {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          margin-bottom: 20px;
        }
        .sec01_icon {
            margin-right: 15px;
            img {
              width: 100%;
              object-fit: contain;
            }
        }
        .box_title {
          letter-spacing: .1em;
          font-size: 30px;
          font-weight: Bold;
        }
        .box_text {
          text-align: justify;
        }
      }
    }
    .flexbox01 {
      width: 1440px;
      margin: 0 auto 50px;
      align-items: flex-end;
      justify-content: flex-end;

      position: relative;
      &::before {
        content: "";
        position: absolute;
        z-index: -1;
        top: 200px;
        left: 51%;
        transform: translateX(-50%);
        border-radius: 90px 0 0 0;
        background-color: #F9F7E5;
        width:  clamp(951px, 74.305vw, 1070px);
        height: 1440px;
      }
      .imagebox {
        margin-bottom: 150px;
        margin-left: 60px;
      }
      .textbox {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-end;
        .box_header {
          padding-bottom: 150px;
        }
      }
    }
    .flexbox01_text {
      box-sizing: border-box;
      width: 66%;
      max-width: 100%;
      margin-bottom: 80px;
      text-align: justify;
    }
    .flexbox01_sub{
      max-width: 1280px;
      margin: 0 auto;
    }
    .corner_box {
      width: 1200px;
      max-width: 100%;
      margin: 0 auto 100px;
      display: flex;
      align-items: flex-end;
      box-sizing: border-box;
      column-gap: 50px;

      .imagebox{
        width: 360px;
        min-width: 360px;
      }
      .textbox {

        .head_t_box {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          padding-left: 5px;
          margin-bottom: 20px;
        }
        .sec01_icon {
            margin-right: 10px;
        }
        .box_title {
          letter-spacing: .1em;
          font-size: 30px;
          font-weight: Bold;
          text-align: right;
        }
        .box_text {
          text-align: justify;
        }
      }
    }
    .flexbox02 {
      align-items: flex-start;
      column-gap: 50px;
      .imagebox {
        box-sizing: border-box;
        img {
          width:  540px;
          height: 360px;
          object-fit: contain;
        }
      }
    }
  }

  .kids_bg{
    background-color: rgba(247, 176, 139, 1);
    position: relative;
    margin-top: 180px;
    &::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 100%;
    transform: translateX(-50%);
    margin-bottom: -6.5px;

    width: max(1280px, 100%);   /* ← 上限を外す。親(.kids_bg)幅に追従 */
    aspect-ratio: 1440 / 104.5;
    background: url(/taniyama/images/clinic/kids_box_top.webp) center/cover no-repeat;
  }
  }
  .kids_inner{
    padding: 0 140px;
  }
  .kids_title{
    font-size: 30px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 100px;
    letter-spacing: 0.1em;
    span{
      color: #CD624D;
      font-weight: bold;
    }
  }
  .kids_box {
    max-width: 1440px;
    margin: 0 auto 100px;
    padding: 80px 0 100px;

    position: relative;
    

    .kids_kazari01 {
      position: absolute;
      top:  110px;
      left: clamp(-10px, 31.25vw - 410px, 40px);
      width:  161px;
      height: 120px;
    }
    .kids_kazari02 {
      position: absolute;
      top:  45px;
      right: clamp(-120px, 25vw - 440px, -80px);
      width:  250px;
      height: 125px;
    }

    .flexbox {
      margin-bottom: 100px;
      column-gap: 50px;
      align-items: flex-start;

      .imagebox{
        width: 100%;
      }
      .textbox{
        box-sizing: border-box;
        width: 100%;

        .box_title{
          font-weight: bold;
          font-size: 30px;
          margin-bottom: 30px;
        }
        .box_text {
          text-align: justify;
        }
      }
    }
    .flex01 {
      margin: 0 auto;
      max-width: 1440px;
      .imagebox{
        position: relative;
        .circle {
          position: absolute;
          bottom:  -50px;
          left: -30px;
          width:  250px;
          height: 250px;

        }
      }
    }

    .kids_kazari03 {
      position: absolute;
      bottom:  60px;
      right: clamp(-90px, 43.75vw - 650px, -20px);
      width:  104px;
      height: 128px;
    }

  }

  .cont02{
    .gridbox {
      max-width: 1080px;
      margin: 0 auto 100px;

      display: grid;
      row-gap: 0px;
      column-gap: 80px;
      grid-template-columns: repeat(2, 508px);
      .item {
        .item_image {
          object-fit: contain;
          margin: 0 auto 30px;
        }
        .item_title {
          margin-bottom: 30px;
          letter-spacing: .1em;
          font-size: 30px;
        }
        .item_text {
          text-align: justify;
        }
      }
    }
  }

  @media screen and (max-width: 768px) {
    margin-bottom: 20vw;
    padding-bottom: 0;

    .inner {
      padding: 0;
      max-width: initial;
    }

    .clinic_box {
      .flexbox {
        margin: 0 auto 14vw;
        flex-direction: column;
        column-gap: 0;
        row-gap: 4vw;

        .imagebox {
          width: 100%;
          margin-left: 0;
        }
        .textbox {
          box-sizing: border-box;
          width: 100%;
          padding: 0 6vw;

          .sec_title {
            margin-bottom: 0vw;
            font-size: 4.5vw;
          }
          .sec_subtitle {
            margin-bottom: 3vw;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;

            .left {
              font-size: 8vw;
            }
            .right {
              padding-left: 0;
              font-size: 4.5vw;
            }
          }

          .head_t_box {
            margin-bottom: 4vw;
          }
          .sec01_icon {
            display: none;
            margin-right: initial;
          }

          .box_title {
            margin-bottom: 4vw;
            font-size: 5vw;
          }
          .box_image {
            padding-left: initial;
            margin-bottom: 4vw;
          }
          .box_text {
            font-size: 4vw;
          }
        }
      }

      .flexbox01 {
        margin: 0 auto 4vw;
        align-items: center;
        row-gap: 0;
        position: relative;
        &::before {
          content: "";
          position: absolute;
          z-index: -1;
          top: 34vw;
          left: 50%;
          transform: translateX(-50%);
          border-radius: 0;
          width: 100vw;
          height: 700vw;
        }

        .imagebox {
          width: 89%;
          min-width: 50%;
          margin-bottom: 0;
          .box_image {
            margin-top: 4vw;
            text-align: center;
          }
        }
        .textbox {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: flex-start;
          padding-right: initial;
          padding-left: initial;

          .box_header {
            padding-left: 6vw;
            padding-bottom: 2vw;
          }
          /* head_t_box (PC icon+title) and box_image are .pc only -> hide the empty box on SP */
          .box {
            display: none;
          }
        }
      }

      .flexbox01_sub {
        margin-bottom: 14vw;
        .box_title {
          width: 88%;
          margin: 0 auto 4vw;
          padding-left: 0;
          font-size: 5vw;
          font-weight: bold;
        }
        .flexbox01_text {
          margin-bottom: 8vw;
          font-size: 4vw;
          padding: 0 6vw;
          width: 100%;
        }
        .box_image {
          width: 90%;
          margin: 0 auto;
          position: relative;
          img {
            width: 100%;
          }
          .circle{
            width: 40vw;
            height: 40vw;
            font-size: 4vw;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            border-radius: 50vh;
            flex-direction: column;
            line-height: 1.5;
            position: absolute;
            filter: drop-shadow(0px 0px 14px rgba(0, 0, 0, 0.5));
            bottom: -10vw;
            right: -2vw;
            background-color: rgba(255, 255, 255, 0.9);
            font-family: 'Zen Maru Gothic', sans-serif;
            span{
              color: #F08B00;
              font-weight: bold;
            }
          }
        }
      }

      .corner_box {
        margin: 0 auto 14vw;
        display: block;

        .imagebox {
          width: 100%;
          margin: 0 auto 4vw;
          min-width: initial;
        }
        .textbox {
          padding: 0 6vw;

          .head_t_box {
            display: block;
            padding-left: initial;
            margin-bottom: 4vw;
          }
          .sec01_icon {
            display: none;
          }
          .box_title {
            margin: 0;
            font-size: 5vw;
            text-align: left;
          }
          .box_text {
            font-size: 4vw;
          }
        }
      }

      .flexbox02 {
        .imagebox {
          img {
            width: 100%;
            height: auto;
            margin: 0 auto;
          }
        }
        .textbox {
          .box_title {
            margin-bottom: 0;
          }
        }
      }
    }

    .kids_bg {
      margin-top: 18vw;
      &::before {
        display: none;
      }
    }
    .kids_inner {
      padding: 0;
    }
    .kids_title {
      margin-bottom: 10vw;
      font-size: 5vw;
    }
    .kids_box {
      max-width: 100%;
      margin-bottom: 14vw;
      padding: 12vw 0 20vw;

      position: relative;
      &::before {
        content: "";
        position: absolute;
        top: -11vw;
        left: 50%;
        transform: translateX(-50%);
        background: url(/taniyama/images/clinic/kids_box_top_sp.webp) center/cover no-repeat;
        width: 100vw;
        height: 11vw;
      }
      .kids_kazari01 {
        z-index: 3;
        top: 4vw;
        left: 2vw;
        width: 17vw;
        height: 10vw;
      }
      .kids_kazari02 {
        z-index: 3;
        top: initial;
        bottom: 10vw;
        left: 65vw;
        width: 30vw;
        height: 15vw;
      }

      .flexbox {
        margin-bottom: 14vw;
        column-gap: 0;
        align-items: center;

        .imagebox {
          width: 87vw;
          height: 47vw;
          margin-right: 0;
          img {
            border-radius: 0 5vw 5vw 0;
          }
        }
        .textbox {
          box-sizing: border-box;
          width: 100%;
          padding: 0 6vw;

          .box_title {
            margin-bottom: 4vw;
            font-size: 5vw;
          }
          .box_text {
            font-size: 4vw;
          }
        }
      }
      .flex01 {
        margin-bottom: 8vw;
        flex-direction: column-reverse;
        .imagebox {
          position: relative;
          margin-bottom: 16vw;
          .circle {
            position: absolute;
            top: 15vw;
            left: 40vw;
            width: 47vw;
            height: 44vw;
          }
        }
      }

      .kids_kazari03 {
        top: initial;
        left: initial;
        right: 4vw;
        bottom: 5vw;
        width: 22vw;
        height: 27vw;
      }
    }

    .cont02 {
      .gridbox {
        width: initial;
        box-sizing: border-box;
        margin: 0 auto 10vw;
        padding: 0 6vw;

        row-gap: 14vw;
        column-gap: initial;
        grid-template-columns: repeat(1, 1fr);
        .item {
          .item_image {
            width: 100%;
            height: auto;
            margin: 0 auto 4vw;
            img {
              border-radius: 5vw;
            }
          }
          .item_title {
            margin-bottom: 4vw;
            font-size: 5vw;
          }
          .item_text {
            font-size: 4vw;
          }
        }
      }
    }
  }
}

/* sec02 */
.sec02 {
  margin-bottom: 125px;
  padding-bottom: 100px;

  .inner {
    padding: 0 clamp(65px, 50vw - 575px, 145px);

    position: relative;
    &::before {
      content: "";
      position: absolute;
      z-index: -1;
      top:  290px;
      left: 50%;
      transform: translateX(-50%);
      border-radius: 90px 0 0 0;
      background-color: rgba(110, 200, 175, 0.1);
      width: clamp(1200px, 42.5vw + 656px, 1268px);
      height: 3300px;
    }
  }

  .equipment_box {
    .flexbox {
      width: 1200px;
      max-width: 100%;
      margin: 0 auto 80px;
      column-gap: 0;
      align-items: flex-start;

      .imagebox {
        width: 100%;
      }
      .textbox {
        box-sizing: border-box;
        width: 100%;

        .sec_subtitle {
          display: flex;
          margin-bottom: 80px;
          align-items: center;
          column-gap: 15px;
          .left{
            font-size: 40px;
            font-weight: bold;
            font-family: 'Inter', sans-serif;
            span{
              font-weight: bold;
              color: #6EC8AF;
              letter-spacing: 0.1em;
            }
          }
          .sec_title{
            font-size: 20px;
            font-weight: bold;
            letter-spacing: 0.1em;
          }
        }
        .bottom_title{
          font-size: 30px;
          font-weight: bold;
          margin-bottom: 50px;
          font-feature-settings: "palt";
        }

        .box_subtitle {
          margin-bottom: 15px;
          column-gap: 15px;
          display: flex;
          align-items: center;
        }
        .box_title {
          letter-spacing: .1em;
          font-size: 25px;
          font-weight: Bold;
          margin-bottom: 30px;
        }
        .box_text {
          text-align: justify;
        }
      }
    }
    .flexbox01 {
      width: 1440px;
      margin: 0 auto 100px;
      align-items: flex-end;
      justify-content: flex-end;
      position: relative;
      column-gap: 50px;
      .textbox {
        display: flex;
        flex-direction: column;
        .box_header {
          padding-bottom: 60px;
        }
      }
    }
    .flexbox02, .flexbox04 {
      margin: 0 auto 100px;
      .textbox{
        margin-right: 60px;
        .box_title {
          padding-top: 35px;
        }
      }
      .imagebox{
        position: relative;
      }
      .circle{
        background-color: rgba(255, 255, 255, 0.9);
        font-family: 'Zen Maru Gothic', sans-serif;
        width: 213px;
        height: 213px;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        border-radius: 50vh;
        flex-direction: column;
        line-height: 1.5;
        font-size: 20px;
        position: absolute;
        filter: drop-shadow(0px 0px 14px rgba(0, 0, 0, 0.5));
        bottom: 0;
        right: 0;
      }
    }
    .flexbox03 {
      .imagebox{
        position: relative;
      }
      .circle{
        background-color: rgba(255, 255, 255, 0.9);
        font-family: 'Zen Maru Gothic', sans-serif;
        width: 213px;
        height: 213px;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        border-radius: 50vh;
        flex-direction: column;
        line-height: 1.5;
        font-size: 20px;
        position: absolute;
        filter: drop-shadow(0px 0px 14px rgba(0, 0, 0, 0.5));
        bottom: 0;
        right: 0;
      }
      .textbox {
        margin-left: 60px;
      }
    }

    .green_box {
      box-sizing: border-box;
      width: 1200px;
      max-width: 100%;
      border-radius: 12px;
      border: 2px solid #6EC8AF;
      background-color: #fff;
      margin: 0 auto 100px;
      padding: 83px 73px;

      .green_title {
        letter-spacing: .1em;
        font-size: 26px;
        font-weight: bold;
        text-align: center;
        margin-bottom: 70px;
      }

      .grid01 {
        display: grid;
        row-gap: 0px;
        column-gap: 55px;
        grid-template-columns: repeat(3, 1fr);

        .item {
          .item_subtitle {
            font-size: 16px;
            text-align: center;
          }
          .item_title {
            margin-bottom: 20px;
            font-size: 24px;
            font-weight: bold;
            text-align: center;
          }
          .item_image {
            width:  300px;
            height: 205px;
            object-fit: contain;
            margin: 0 auto 30px;
          }
          .item_text {
            text-align: justify;
          }
        }
      }
    }

    .grid02 {
      width: 830px;
      max-width: 100%;
      margin: 0 auto 0;

      display: grid;
      row-gap: 0px;
      column-gap: 110px;
      grid-template-columns: repeat(2, 1fr);

      .item {
        .item_subtitle {
          font-size: 16px;
          text-align: center;
        }
        .item_title {
          margin-bottom: 20px;
          font-size: 24px;
          font-weight: bold;
          text-align: center;
        }
        .item_image {
          width:  360px;
          height: 240px;
          object-fit: contain;
          margin: 0 auto 30px;
        }
        .item_text {
          text-align: justify;
        }
      }
    }
  }

  @media screen and (max-width: 768px) {
    margin-bottom: 13.8vw;
    padding: 0;

    .inner {
      padding: 0 0 13.8vw;

      position: relative;
      &::before {
        content: "";
        position: absolute;
        z-index: -1;
        top:  27.6vw;
        left: 0;
        transform: initial;
        border-radius: 0;
        width:  100vw;
        height: 1360vw;
      }

    }

    .equipment_box {
      .flexbox {
        margin: 0;
        margin: 0 auto 13.8vw;
        flex-direction: column;
        column-gap: 0;
        row-gap: 4.2vw;

        .imagebox{
          width: 100%;
        }
        .textbox{
          padding: 0 5.5vw;

          .sec_subtitle {
            padding-left: 0;
            display: flex;
            flex-direction: column-reverse;
            justify-content: center;
            align-items: flex-start;
            margin-bottom: 10vw;

            .left{
              font-size: 8vw;
            }
            .sec_title{
              font-size: 4.5vw;
            }
          }
          .bottom_title{
            font-size: 5.5vw;
            margin-bottom: 5vw;
          }

          .box_subtitle {
            margin-bottom: 4vw;
            font-size: 4.2vw;
          }
          .box_title {
            margin-bottom: 4.2vw;
            font-size: 5vw;
            text-align: center;
          }
          .box_text {
            font-size: 4vw;
          }
        }
      }
      .flexbox01 {
        margin: 0 auto 8vw;
        .textbox {
          display: block;
          margin-left: initial;
          margin-right: initial;
          .box_header {
            padding-top: 0;
            padding-bottom: 3vw;
          }
        }
      }
      .flexbox02, .flexbox04 {
        margin: 0 auto 13.8vw;
        .textbox{
          margin-right: initial;
          .box_title {
            padding-top: 0;
          }
        }
        .circle{
          width: 40vw;
          height: 40vw;
          font-size: 4vw;
        }
      }
      .flexbox03 {
        margin: 0 auto 13.8vw;
        .textbox {
          margin-left: initial;
        }
        .circle{
          width: 40vw;
          height: 40vw;
          font-size: 4vw;
        }
      }

      .green_box {
        width: 89vw;
        box-sizing: border-box;
        border-radius: 3.2vw;
        border: 0.53vw solid rgba(81, 167, 221, 1);
        margin: 0 5.5vw 10vw;
        padding: 8vw 5.5vw;

        .green_title {
          font-size: 5vw;
          margin-bottom: 6vw;
        }

        .grid01 {
          row-gap: 13.8vw;
          column-gap: initial;
          grid-template-columns: repeat(1, 1fr);

          .item {
            .item_subtitle {
              font-size: 4vw;
            }
            .item_title {
              margin-bottom: 4.2vw;
              font-size: 5vw;
            }
            .item_image {
              width:  78vw;
              height: auto;
              margin: 0 auto 4.2vw;
            }
            .item_text {
              font-size: 4vw;
            }
          }
        }

      }

      .grid02 {
        width: 89vw;
        margin: 0 auto 0;
        padding: 0 5.5vw 13.8vw;
        row-gap: 13.8vw;
        column-gap: initial;
        grid-template-columns: repeat(1, 1fr);

        .item {
          .item_subtitle {
            font-size: 4vw;
          }
          .item_title {
            margin-bottom: 5.2vw;
            font-size: 4.8vw;
          }
          .item_image {
            width:  100%;
            height: auto;
            margin: 0 auto 4.2vw;
          }
          .item_text {
            text-align: justify;
          }
        }
      }
    }

  }
}