@charset "UTF-8";
.main_image {
  position: relative;
  height: 646px;
  padding-top: 0;
  box-sizing: border-box;
  background: url(/images/implant/implant_key.webp) center top/cover no-repeat;
  overflow: hidden;
}
.main_image .inner {
  width: 1025px;
  max-width: 100%;
  padding: 0 20px;
  margin: 0 auto;
  box-sizing: border-box;
}
.main_image .text {
  position: relative;
  z-index: 5;
  padding-top: 300px;
  padding-left: 0;
  font-family: "游明朝体", "Yu Mincho", "YuMincho", "noto serif jp", serif;
  font-size: 36px;
  letter-spacing: 0.2em;
  color: #fff;
  text-shadow: 0 0 5px rgba(155, 152, 152, 0.71);
}
.main_image .text:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -105px;
  top: 50%;
  transform: translateY(-50%);
  width: 221px;
  height: 221px;
  background: url(/images/common/key_logo.webp) center/contain no-repeat;
}
@media screen and (max-width: 767px) {
  .main_image {
    position: relative;
    height: 80vw;
    padding-top: 45.3vw;
    box-sizing: border-box;
    background: url(/images/implant/implant_key.webp) center top/cover no-repeat;
    overflow: hidden;
  }
  .main_image .inner {
    padding: 0 2.7vw;
  }
  .main_image .text {
    padding-top: 0;
    padding-left: 0;
    font-size: 5.8vw;
    text-align: center;
  }
  .main_image .text:before {
    left: 0;
    top: 4.3vw;
    width: 21.3vw;
    height: 21.3vw;
    background: url(/images/common/key_logo.webp) center/contain no-repeat;
  }
}

/* sec01 */
.sec01 .first_box{
    display:flex;
    margin-bottom:100px;
}
.sec01 .textbox{

    margin-right:50px;
}



/* sec02 */
/* point01 */
.sec02 .point_title {
  letter-spacing: .1em;
}
.sec02 .point01{
    display:block;
}
.sec02 .point01 .point_header{
    justify-content: center;
    margin-bottom:125px;
}
.sec02 .point01 .image_text{
    position:relative;
    font-family: "游明朝体", "Yu Mincho", "YuMincho", "noto serif jp", serif;
    font-size:18px;
    border:solid 3px #F3EEE7;
    text-align:center;
    padding:24px 0px;
    width:580px;
    margin:0 auto
}
.sec02 .point01 .point_image_up{
    position:absolute;
    top:80px;
    left:70px;
}
.sec02 .point01 .point_image_down{
    position:absolute;
    top:200px;
    right:140px;
}
.sec02 .point01 .imagebox{
    min-width:100%;
    max-width:100%;
}
.sec02 .point01 .point_text{
    margin-top:160px;
    margin-bottom:95px;
}

/*@media screen and (max-width: 1280px) and (min-width: 768px){*/
@media screen and (max-width: 1280px) and (min-width: 815px){
    .sec02 .point01 .imagebox{
        position:relative;
        min-width:100%;
        max-width:100%;
    }
    .sec02 .point01 .image_text{
        font-size:18px;
        border:solid 3px #F3EEE7;
        text-align:center;
        padding:24px 0px;
        width:48vw;
        margin:0 auto
    }
    .sec02 .point01 .point_image_down{
        position:absolute;
        top:2vw;
        right:8.3vw;
        width:15vw;
    }
    .sec02 .point01 .point_image_up{
        position:absolute;
        top:-7vw;
        left:4vw;
        width:20vw;
    }
}
@media screen and (max-width: 814px) and (min-width: 768px){
    .sec02 .point01 .imagebox{
        position:relative;
        min-width:100%;
        max-width:100%;
    }
    .sec02 .point01 .image_text{
        font-size:18px;
        border:solid 3px #F3EEE7;
        text-align:center;
        padding:24px 0px;
        width:48vw;
        margin:0 auto
    }
    .sec02 .point01 .point_image_down{
        position:absolute;
        top:2vw;
        right:7.3vw;
        width:15vw;
    }
    .sec02 .point01 .point_image_up{
        position:absolute;
        top:-7vw;
        left:3vw;
        width:20vw;
    }
}

/* point01 box */
.sec02 .column_box{
    background-color:#F3EEE7;
}
.sec02 .column_box_title{
    border-bottom:0.75px solid #4d4d4d;
    font-size:20px;
    color:#333333;
}
.sec02 .cont01{
    display:flex;
}
.sec02 .cont01 .imagebox img{
    width:100%;
}
.sec02 .cont01 .imagebox{
    width:300px;
    min-width:34%;
    max-width:34px;
    margin-right:50px;
}
    /* point02 */
.sec02 .point02{
    margin-bottom:80px;
    flex-direction: row-reverse;
}
.sec02 .point02 .textbox{
    margin-left:50px;
}
.sec02 .point02 .imagebox .circle_text{
    position: absolute;
    top: 0px;
    left: 0px;
    border-radius: 50%;
    background-color: rgba(128, 128, 128, 0.67);
    width: 167px;
    height: 167px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "游明朝体", "Yu Mincho", "YuMincho", "noto serif jp", serif;
    font-size: 17px;
    letter-spacing: 0.01em;
    line-height: 1.8;
    text-align: center;
    color: #fff;
    }

@media screen and (max-width: 1280px) and (min-width: 768px){
    .sec02 .point02 .imagebox .circle_text{
    position: absolute;
    top: 0vw;
    left: 0vw;
    border-radius: 50%;
    background-color: rgba(128, 128, 128, 0.67);
    width: 13.5vw;
    height: 13.5vw;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "游明朝体", "Yu Mincho", "YuMincho", "noto serif jp", serif;
    font-size: 1.4vw;
    letter-spacing: 0.01em;
    line-height: 1.8;
    text-align: center;
    color: #fff;
    }
}

    /* point03 */
.sec02 .point03{
    margin-bottom:80px;
}

.sec02 .point03 .textbox{
    margin-right:50px;
}
.sec02 .point03 .imagebox .circle_text{
    position: absolute;
    top: 20px;
    right: 300px;
    border-radius: 50%;
    background-color: rgba(128, 128, 128, 0.67);
    width: 167px;
    height: 167px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "游明朝体", "Yu Mincho", "YuMincho", "noto serif jp", serif;
    font-size: 17px;
    letter-spacing: 0.01em;
    line-height: 1.8;
    text-align: center;
    color: #fff;
    }


@media screen and (max-width: 1280px) and (min-width: 768px){
    .sec02 .point03 .imagebox .circle_text{
    position: absolute;
    top: 1vw;
    left: 52vw;
    border-radius: 50%;
    background-color: rgba(128, 128, 128, 0.67);
    width: 13.5vw;
    height: 13.5vw;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "游明朝体", "Yu Mincho", "YuMincho", "noto serif jp", serif;
    font-size: 1.4vw;
    letter-spacing: 0.01em;
    line-height: 1.8;
    text-align: center;
    color: #fff;
    }
}

/* sec03 */
.sec03 .first_box{
    display:flex;
    margin-bottom:73px;
}
.sec03 .textbox{
    margin-right:50px;
}
.sec03 .cont02{
    margin-bottom:128px;
}

    /* gridbox */
.sec03 .gridbox{
    display:grid;
    justify-content:center;
    grid-template-columns: repeat(3, auto);
    column-gap:20px;
    margin-bottom:84px;
}
.sec03 .grid_title{
    color:white;
    font-size:22px;
    text-align:center;
    padding:2px 0;
    background-color:#C2AD94;
    max-width:335px;
}
.sec03 .grid_title:first-of-type{
    background-color:#948175;
}
.sec03 .grid_image{
    max-width:335px;
}
.sec03 .grid_merit{
background-color:#FAEDED;
max-width:335px;
padding-bottom:10px;
}
.sec03 .merit_title{
    color:#FAA9B5;
    font-size:20px;
    text-align:center;
    padding:22px 0;
}
.sec03 .merit_item{
    position:relative;
    font-size:16px;
    margin-left:1em;
    letter-spacing: 0.1em;
    padding:0 18px 18px;
    max-width:335px;
}
.sec03 .merit_item:before{
    content: "";
    position: absolute;
    left: -3px;;
    top: 5px;
    width: 17px;
    height: 17px;
    background: url(/images/implant/merit.webp) center / contain no-repeat;
}

.sec03 .grid_demerit{
    background-color:#EDEDED;
    max-width:335px;
    padding-bottom:10px;
}
.sec03 .demerit_title{
    color:#808080;
    font-size:20px;
    text-align:center;
    padding:22px 0;
}
.sec03 .demerit_item{
    position:relative;
    font-size:16px;
    margin-left:1em;
    letter-spacing: 0.1em;
    padding:0 18px 18px;
    max-width:335px;
}
.sec03 .demerit_item:before{
    content: "";
    position: absolute;
    left: -3px;;
    top: 5px;
    width: 17px;
    height: 17px;
    background: url(/images/implant/demerit.webp) center / contain no-repeat;
}
.sec03 .linkbox{
    display:flex;
    justify-content: center;
}
.sec03 .linkbox .flexbox:first-of-type{
    margin-right:30px;
}
    .sec03 .grid_image, .sec03 .grid_merit{
        margin-bottom:3px;
    }


/* sec04 */
.sec04{
    padding-bottom:130px;
  }

  .sec04 .list{
    width:100%;
    max-width:100%;
    box-sizing: border-box;
    margin: 0 auto;
  }
  .sec04 .item{
    display:flex;
    box-sizing: border-box;
    flex-direction: row-reverse;
  }
  .sec04 .item:not(:last-of-type){
    margin-bottom:90px;
  }
  .sec04 .item_pic{
    width:400px;
    min-width:34%;
    max-width: 34%;
    margin-left:50px;
    position:relative;
  }
  .sec04 .item_pic img{
    width:100%;
    object-fit: contain;
  }
  .sec04 .item_title{
    font-family: "Yu Mincho", "YuMincho", "noto serif jp", serif;
    font-size: 20px;
    letter-spacing: 0.1em;
    line-height: 1.6;
    align-items: center;
    margin-left:2em;
    box-sizing: border-box;
  }
  .sec04 .item_text{
    font-family: "Yu Mincho", "YuMincho", "noto serif jp", serif;
  }
  .sec04 .title_item{
    display:flex;
    margin-bottom:33px;
  }
  .sec04 .item:last-of-type{
    margin-bottom:83px;
  }
  .sec04 .item_textbox{
    position:relative;
  }
  .sec04 .title_text{
    padding-top:8px;
  }

/* sec05 */
  .sec05{
    margin-bottom:100px;
  }
/* スマホ表示 */
@media screen and (max-width: 767px){
/* sec01 */

  .sec01 .first_box{
    display:block;
  }
  .sec01 .textbox{
    margin-right:initial;
  }
/* sec02 */
  .sec02 .point_title {
    letter-spacing: .01em;
  }
    /* point01 */
  .sec02 .point01 .image_text {
    position: relative;
    font-size: 4.5vw;
    padding: 4vw 0vw;
    width: 87vw;
  }
  .sec02 .point01 .point_header{
    margin-bottom:16vw;
  }
  .sec02 .point01 .point_image_up {
    position: absolute;
    top: 21vw;
    left: -2vw;
    width:25vw;
  }
  .sec02 .point01 .point_image_down {
    position: absolute;
    top: 46vw;
    right: -5vw;
    width:20vw;
  }
  .sec02 .point01 .point_text{
    margin-top:20vw;
    margin-bottom:15vw;
  }
  .sec02 .column_box_title{
    font-size:5.3vw;
  }
  .sec02 .cont01{
    display:block;
  }
  .sec02 .cont01 .imagebox{
    width:initial;
    min-width:100%;
    max-width:1000%;
    margin-right:initial;
  }

  /* point02 */
  .sec02 .point02{
    margin-bottom:15vw;
  }
  .sec02 .point02 .textbox{
    margin-left:initial;
  }
  .sec02 .point02 .imagebox .circle_text{
    position: absolute;
    top: 40vw;
    left: 0vw;
    border-radius: 50%;
    background-color: rgba(128, 128, 128, 0.67);
    width: 32.5vw;
    height: 32.5vw;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "游明朝体", "Yu Mincho", "YuMincho", "noto serif jp", serif;
    font-size: 4vw;
    letter-spacing: 0.01em;
    line-height: 1.8;
    text-align: center;
    color: #fff;
    }
  /* point03 */
  .sec02 .point03{
    margin-bottom: 15vw;
  }
  .sec02 .point03 .textbox{
    margin-right:initial;
  }
  .sec02 .point03 .imagebox .circle_text{
    position: absolute;
    top: 35vw;
    left: 2vw;
    border-radius: 50%;
    background-color: rgba(128, 128, 128, 0.67);
    width: 32.5vw;
    height: 32.5vw;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "游明朝体", "Yu Mincho", "YuMincho", "noto serif jp", serif;
    font-size: 4vw;
    letter-spacing: 0.01em;
    line-height: 1.8;
    text-align: center;
    color: #fff;
    }



/* sec03 */
  .sec03 .first_box{
    display:block;
  }
  .sec03 .textbox{
    margin-right:initial;
  }
  .sec03 .cont02{
    margin-bottom:20vw;
  }
  .sec03 .linkbox{
    display:block;
  }
  .sec03 .linkbox .flexbox:first-of-type{
    margin-right:initial;
  }
  .sec03 .about_btn{
    width:82.5vw;
  }
  .sec03 .about_btn:first-of-type{
    margin-bottom:7vw;
    text-align:center;
  }

  /* gridbox */
  .sec03 .gridbox{
    grid-template-columns: repeat(1, auto);
    margin-bottom:15vw;
    justify-content:initial;
  }
  .sec03 .grid_title, .sec03 .grid_image, .sec03 .grid_merit, .sec03 .grid_demerit, .sec03 .merit_item, .sec03 .demerit_item{
    max-width:100%;
  }
  .sec03 .merit_item, .sec03 .demerit_item{
    font-size:4vw;
    margin-left:1.5em;
    padding:2vw 5vw;
  }
  .sec03 .grid_title{
    font-size:6vw;
    padding:2vw 0;
  }
  .sec03 .grid_image img{
    min-width:100%;
    max-width:100%;
  }
  .sec03 .grid_merit, .sec03 .grid_image{
    margin-bottom:0.5vw;
  }
  .sec03 .grid_merit, .sec03 .grid_demerit{
    padding:4vw 0;
  }
  .sec03 .merit_title, .sec03 .demerit_title{
    font-size:5vw;
    padding:4vw 0;
  }
  .sec03 .merit_item:before, .sec03 .demerit_item:before{
    position:absolute;
    left:-8vw;
    top:2.7vw;
    width:17vw;
    height:4vw;
  }
  /* order */
  .sec03 .order01{
    order:1;
  }
  .sec03  .order02{
    order:2;
  }
  .sec03 .order03{
    order:3;
  }
  .sec03 .order04{
    order:4;
    margin-bottom:5vw;
  }
  .sec03 .order05{
    order:5;
  }
  .sec03 .order06{
    order:6;
  }
  .sec03 .order07{
    order:7;
  }
  .sec03 .order08{
    order:8;
    margin-bottom:5vw;
  }
  .sec03 .order09{
    order:9;
  }
  .sec03 .order10{
    order:10;
  }
  .sec03 .order11{
    order:11;
  }
  .sec03 .order12{
    order:12;
  }
  .sec03 .flexbox {
    display: flex;
  }

/* sec04 */
.sec04{
    padding-bottom:15vw;
}
.sec04 .item{
    display:block;
}
.sec04 .item_pic{
    min-width:100%;
    max-width:100%;
    margin-left:initial;
}
.sec04 .item:not(:last-of-type){
    margin-bottom:10vw;
}
.sec04 .item:last-of-type{
    margin-bottom:10vw;
}
.sec04 .item_title{
    font-size:5.3vw;
    margin-left:1em;
}
.sec04 .title_image img{
    width:13vw;
}
.sec04 .item_text{
    margin-top:5vw;
}
.sec04 .title_item{
    margin-bottom:5vw;
}
.sec05{
  margin-bottom:13.5vw;
}

.sec05 .flexbox {
  display: flex;
}
}