@charset "UTF-8";


/* sec01 */
.sec01{
  margin-bottom: 100px;
  .cont01, .cont02, .cont03, .cont04{
    margin-bottom: 80px;
    .box_header{
      display: flex;
      column-gap: 45px;
      align-items: center;
      margin-bottom: 30px;
      justify-content: center;
      .box_title{
        font-size: 28px;
        font-weight: 500;
        line-height: 1.3;
      }
      .num{
        font-size: 30px;
        font-weight: bold;
        font-family: 'Zen Maru Gothic', sans-serif;
        letter-spacing: 0.5em;
      }
    }
    .imagebox{
      text-align: center;
      margin-bottom: 24px;
      position: relative;
    }
    .textbox{
      max-width: 1200px;
      margin: 0 auto;
    }
    .circle{
      display: flex;
      column-gap: 15px;
      position: absolute;
      top: 17px;
      left: 150px;
      .circle_text{
        background-color: rgba(255,255,255,0.9);
        font-family: 'Zen Maru Gothic', sans-serif;
        width: 230px;
        height: 230px;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        border-radius: 50vh;
        flex-direction: column;
        line-height: 1;
        position: relative;
        filter:drop-shadow(0px 0px 14px rgba(0, 0, 0, 0.5));
        span{
          font-size: 21px;
          line-height: 1.5;
          font-weight: 500;
        }
      }
    }
  }

.cont02 {
  
  .imagebox {
    position: relative;
  }
  .textbox{
    margin-bottom: 40px;
  }

  .circle {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;

    .circle_text {
      position: absolute;
      pointer-events: auto;
      
    }

    .circle_loupe {
      width: 163px;
      height: 163px;
      top: 30px;
      left: 215px;
      font-size: 24px;
      font-weight: 500;
      font-family: 'Zen Maru Gothic', sans-serif;
      &::before{
        content: "";
        position: absolute;
        left: -40px;
        bottom: -10px;
        width: 143px;
        height: 64px;
        background: url(/taniyama/images/caries/kazari01.webp) center / contain no-repeat;
      }

      span {
        font-size: 18px;
        font-weight: 500;
        margin-bottom: 4px;
        font-family: 'Zen Maru Gothic', sans-serif;
      }
      
    }

    .circle_diagnodent {
      top: 25px;
      right: 95px;
      width: 180px;
      height: 210px;
      line-height: 1.5;
      padding-bottom: 20px;
      padding-right: 50px;
      &::before{
        content: "";
        position: absolute;
        right: -10px;
        bottom: -20px;
        width:162px;
        height: 199px;
        background: url(/taniyama/images/caries/kazari03.webp) center / contain no-repeat;
      }

      span {
        font-size: 18px;
        font-weight: 500;
        margin-bottom: 4px;
      }
      font-size: 24px;
      font-weight: 500;
    }

    .circle_stain {
      bottom: 10px;
      right: 350px;
      transform: translateX(-50%);
      z-index: 2;
      width: 163px;
      height: 163px;
      &::before{
        content: "";
        position: absolute;
        left: -85px;
        bottom: 0;
        width: 112px;
        height: 130px;
        background: url(/taniyama/images/caries/kazari02.webp) center / contain no-repeat;
      }


      span {
        font-size: 18px;
        font-weight: 500;
        margin-bottom: 4px;
      }
      font-size: 24px;
      font-weight: 500;
    }
  }
}

  .cont03{
    .textbox{
      margin-bottom: 40px;
    }
  }
  .cont04{
    margin-bottom: 0;
    .about_wrapper{
      display: flex;
      justify-content: center;
      margin-top: 30px;
    }
  }
  @media screen and (max-width: 768px) {
    margin-bottom: 13.8vw;
    .cont01, .cont02, .cont03, .cont04 {
      margin-bottom: 10vw;

      .box_header {
        column-gap: 3vw;
        margin-bottom: 3vw;
        justify-content: flex-start;
        flex-direction: row;
        align-items: center;

        .box_title { font-size: 5vw; }
        .num { font-size: 4.8vw; }
      }

      .imagebox {
        margin-bottom: 3vw;
      }

      .textbox {
        font-size: 4vw;
        max-width: 100%;
      }

      .circle {
        column-gap: 1vw;
        top: 14vw;
        left: 3vw;

        .circle_text {
          width: 42.5vw;
          height: 42.5vw;
          font-size: 4vw;

          span {
            font-size: 4vw;
            margin-bottom: 0;
          }
        }

        .circle_loupe {
          width: 28.3vw;
          height: 28.3vw;
          top: -10vw;
          left: 4vw;
          font-size: 4.8vw;
          z-index: 2;
          &::before{
            content: "";
            position: absolute;
            left: -11vw;
            bottom: -4vw;
            width: 30vw;
            height: 15vw;
            background: url(/taniyama/images/caries/kazari01.webp) center / contain no-repeat;
          }

          span {
            font-size: 3.8vw;
            margin-bottom: 1vw;
          }
          
        }

        .circle_diagnodent {
          top: 2vw;
          right: 6vw;
          width: 34vw;
          height: 34vw;
          line-height: 1.5;
          padding-bottom: 3vw;
          padding-right: 3vw;
          &::before{
            content: "";
            position: absolute;
            right: -1vw;
            bottom: -5vw;
            width:24vw;
            height: 31vw;
            background: url(/taniyama/images/caries/kazari03.webp) center / contain no-repeat;
          }

          span {
            font-size: 3.8vw;
            margin-bottom: 1vw;
          }
          font-size: 4.8vw;
        }

        .circle_stain {
          bottom: 15vw;
          right: 41vw;
          transform: translateX(-50%);
          z-index: 2;
          width: 33.6vw;
          height: 33.6vw;
          z-index: 1;
          &::before{
            content: "";
            position: absolute;
            left: 28vw;
            bottom: -3vw;
            width: 20.8vw;
            height: 23.8vw;
            background: url(/taniyama/images/caries/kazari02.webp) center / contain no-repeat;
          }


          span {
            font-size: 3.8vw;
            margin-bottom: 1vw;
          }
          font-size: 4.8vw;
        }
      }
      
    }
    .cont02 {
      .textbox{
        margin-bottom: 8vw;
      }
      .circle {
        right: 1vw;

        .circle_left::before {
          width: 14vw;
          height: 14vw;
          left: -8vw;
          top: -1vw;
        }

        .circle_right::before {
          width: 20vw;
          height: 12vw;
          right: 1vw;
          bottom: initial;
          top: -1vw;
        }
      }
    }

    .cont03 {
      .imagebox{
        margin-bottom: 7vw;
      }
      .textbox{
        margin-bottom: 8vw;
      }
      .circle {
        left: -3vw;
        bottom: -5vw;

        .circle_left::before {
          width: 20vw;
          height: 8vw;
          bottom: initial;
          top: 0;
        }

        .circle_right::before {
          width: 23vw;
          height: 12vw;
          top: -3vw;
          background: url(/taniyama/images/caries/kazari_sp.webp) center / contain no-repeat;
        }
      }
    }
    .cont04 {
      .flexbox {
        flex-direction: column;
        column-gap: 0;
        margin-bottom: 10vw;

        .imagebox {
          order: 2;
          width: 100%;
        }

        .textbox {
          display: contents;
        }

        .box_header {
          order: 1;
          column-gap: 3vw;
          margin-bottom: 3vw;
          flex-direction: row;
          justify-content: flex-start;
          align-items: center;

          .box_title { font-size: 5vw; }
          .num { font-size: 4.8vw; }
        }

        .box_text {
          order: 3;
          font-size: 4vw;
        }
      }
    }
  }
}

/* sec02 */
.sec02{
  margin-bottom: 100px;
  .flexbox{
    column-gap: 50px;
    align-items: flex-start;
    .imagebox{
      width: 88%;
      position: relative;
    }
    .textbox{
      width: 100%;
      .box_title{
        font-size: 24px;
        font-weight: 500;
        margin-bottom: 30px;
        line-height: 1.5;
      }
    }
  }
  @media screen and (max-width: 768px) {
    margin-bottom: 13.8vw;

    .flexbox {
      flex-direction: column-reverse;
      column-gap: 0;

      .imagebox {
        width: 100%;

        & img {
          width: 100%;
          height: auto;
        }
      }

      .textbox {
        width: 100%;

        .box_title {
          font-size: 5vw;
          margin-bottom: 3vw;
        }

        .box_text {
          font-size: 4vw;
        }
      }
    }
  }
}

/* sec03 */
.sec03{
  margin-bottom: 100px;
  .cont01{
    margin-bottom: 70px;
    .flexbox{
      align-items: flex-start;
      column-gap: 120px;
    }
    .imagebox{
      width: 57.7%;
    }
    .textbox{
      width: 100%;
    }
    .box_title{
      font-size: 24px;
      margin-bottom: 30px;
    }
  }
  .cont02{
    .gridbox{
      grid-template-columns: repeat(3, minmax(0, 1fr));
      margin: 0 auto;
      column-gap: 55px;
    }
    .box{
      border-radius: 30px;
      padding: 0px 25px 33px;
      background-color: #FCFBF2;
    }
    .box_img{
      text-align: center;
      height: 100px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .box_title{
      font-size: 24px;
      font-weight: bold;
      text-align: center;
      margin-bottom: 15px;
    }
    .eng{
      font-size: 28px;
      text-align: center;
      color: #6EC8AF;
      line-height: 1;
      position: relative;
      top: -15px;
    }
    .orange{
      .eng{
        color: #FFAE00;
      }
    }
    .red{
      .eng{
        color: #EE9581;
      }
    }
  }
  @media screen and (max-width: 768px) {
    margin-bottom: 13.8vw;

    .cont01 {
      margin-bottom: 10vw;

      .box_title{
        font-size: 5vw;
        margin-bottom: 3vw;
        line-height: 1.5;
      }

      .flexbox {
        flex-direction: column-reverse;
        column-gap: 0;
        row-gap: 0;
      }

      .imagebox {
        width: 80%;
        margin: 0 auto 5vw;

        & img {
          width: 100%;
          height: auto;
        }
      }

      .textbox {
        width: 100%;
        font-size: 4vw;
      }
    }

    .cont02 {
      .eng{
        font-size: 6vw;
        top: -6vw;
      }
      .gridbox {
        grid-template-columns: repeat(1, minmax(0, 1fr));
        column-gap: 0;
        row-gap: 10vw;
      }

      .box {
        border-radius: 4vw;
        padding: 3vw 5vw 6vw;
      }

      .box_img {
        height: initial;
        width: 20vw;
        margin: 0 auto 2vw;
        img{
          min-width: initial;
        }
      }
      .orange{
        .box_img{
          width: 17vw;
        }
      }

      .box_title {
        font-size: 5vw;
        margin-bottom: 2vw;
      }

      .box_text {
        font-size: 4vw;
      }
    }
  }
}

/* sec04 */
.sec04{
  margin-bottom: 100px;
  .cont01{
    margin-bottom: 80px;
    .flexbox{
      column-gap: 50px;
    }
    .box_title{
      font-size: 24px;
      margin-bottom: 30px;
      font-weight: 500;
    }
    .imagebox{
      width: 88%;
    }
    .textbox{
      width: 100%;
    }
  }
  .cont02{
    max-width: 1036px;
    margin: 0 auto;
    .flexbox{
      column-gap: 60px;
      margin-bottom: 100px;
      position: relative;
      &::before{
        content: "";
        position: absolute;
        bottom: -60px;
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 12px 13px 0 13px;
        border-color: #EE9581 transparent transparent transparent;
      }
    }
    .flexbox:last-of-type{
      margin-bottom: 0;
      &::before{
        display: none;
      }
    }
    .imagebox{
      width: 21.3%;
    }
    .star{
      line-height: 1;
    }
    .textbox{
      width: 100%;
      .box_header{
        display: flex;
        border-bottom: 2px solid#EE9581;
        column-gap: 30px;
        align-items: center;
        margin-bottom: 10px;
        padding-bottom: 10px;
      }
      .num{
        width: 75px;
        height: 75px;
        border-radius: 50vh;
        color: #fff;
        background-color: #F991A2;
        font-family: serif;
        font-size: 25px;
        font-weight: bold;
        display: flex;
        justify-content: center;
        align-items: center;

      }
      .box_title{
        font-weight: 500;
        font-size: 24px;
      }
    }
  }
  @media screen and (max-width: 768px) {
    margin-bottom: 13.8vw;

    .cont01{
      margin-bottom: 10vw;
      .flexbox{
        flex-direction: column-reverse;
        column-gap: 0;
      }
      .box_title{
        font-size: 5vw;
        margin-bottom: 3vw;
        font-weight: 500;
        line-height: 1.5;
      }
      .imagebox{
        width: 100%;
      }
    }

    .cont02 {
      .flexbox {
        flex-direction: column;
        column-gap: 0;
        row-gap: 4vw;
        margin-bottom: 15vw;

        &::before {
          bottom: -8vw;
          border-width: 2.6vw 2.73vw 0 2.73vw;
        }
      }

      .imagebox {
        width: 35vw;
        margin: 0 auto;

        & img {
          width: 100%;
          height: auto;
        }
      }

      .star{
        width: 6vw;
      }
      .textbox {
        width: 100%;

        .box_header {
          column-gap: 3vw;
          margin-bottom: 3vw;
          padding-bottom: 3vw;
        }

        .num {
          width: 15vw;
          height: 15vw;
          font-size: 5vw;
        }

        .box_title {
          font-size: 5vw;
        }

        .box_text {
          font-size: 4vw;
        }
      }
    }
  }

}

/* sec06 */
.sec05{
  margin-bottom: 163px;
  .flexbox{
    column-gap: 53px;
    align-items: flex-start;
    .imagebox{
      width: 81.3%;
    }
    .textbox{
      width: 100%;
      .box_title{
        font-size: 25px;
        font-family: serif;
        margin-bottom: 20px;
        font-weight: bold;
      }
      .box_text{
        margin-bottom: 50px;
      }
    }
    .about_wrapper{
      display: flex;
      justify-content: flex-start;
    }
    .about_btn{
      z-index: 1;
    }
    .about_btn::after{
      width: 113px;
      height: 105px;
      left: 0px;
      z-index: -1;
      background: url(/taniyama/images/common/welcome_img.webp) center/contain no-repeat;
    }
  }
  @media screen and (max-width: 768px) {
    margin-bottom: 13.8vw;

    .flexbox {
      flex-direction: column;
      column-gap: 0;
      row-gap: 0vw;

      .imagebox {
        width: 100%;

        & img {
          width: 100%;
          height: auto;
        }
      }

      .textbox {
        width: 100%;

        .box_title {
          font-size: 5vw;
          margin-bottom: 3vw;
        }

        .box_text {
          font-size: 4vw;
          margin-bottom: 10vw;
        }
      }

      .about_wrapper {
        justify-content: center;
      }

      .about_btn::after {
        width: 21vw;
        height: 20vw;
        left: -3.67vw;
      }
    }
  }
}