@charset "utf-8";
/*
font-family: 'Noto Serif JP';
font-weight:300;
sans:300=Light,400=Regular,500=Medium
serif:400=Regular,500=Medium,700=Bold

font-family: 'Lato';
font-weight:400;
*/

/* main cont */
#keyview{
  position: relative;
  background: url(../../menu/images/img_menu_implant.jpg) no-repeat;
  background-size: cover;
  width: 100%;
  height: 100vh;
}
#keyview::after{
  display: block;
  position: absolute;
  top:0;
  left:0;
  content: "";
  background: repeating-linear-gradient(135deg, #ccc, #ccc 2px, #fff 6px, #fff 6px);
  width: 100%;
  height: 100vh;
  z-index: 10;
  opacity: 0.3;
}
#keyview h1{
  position: absolute;
  top:30px;
  left:30px;
  width: 350px;
  z-index: 20;
}
#keyview h1 img{
  width: 100%;
}
#keyview h2{
  position: absolute;
  top:50%;
  left:50%;
  transform: translateX(-50%) translateY(-50%);
  -webkit- transform: translateX(-50%) translateY(-50%);
  color:#0c7a3f;
  font-family: 'Noto Serif JP';
  font-size:36px;
  line-height: 36px;
  font-weight: 700;
  text-shadow:1px 1px 0 #FFF, -1px -1px 0 #FFF,
              -1px 1px 0 #FFF, 1px -1px 0 #FFF,
              0px 1px 0 #FFF,  0-1px 0 #FFF,
              -1px 0 0 #FFF, 1px 0 0 #FFF;
}

/* implant */
#implant{
  margin: 80 0px;
  padding:0 0 60px;
  width: 100%;
}
#implant_keyview{
  position: relative;
  margin: 0;
  background: url(../../menu/images/img_menu9_1.jpg) no-repeat;
  background-size: cover;
  width: 100%;
  height: 500px;
}
#implant_keyview h3{
  position: absolute;
  top:50%;
  left:50%;
  transform: translateX(-50%) translateY(-50%);
  -webkit- transform: translateX(-50%) translateY(-50%);
  font-size:30px;
  line-height: 30px;
  font-weight: 500;
  color:#FFF;
  text-shadow:1px 1px 0 #009be0, -1px -1px 0 #009be0,
              -1px 1px 0 #009be0, 1px -1px 0 #009be0,
              0px 1px 0 #009be0,  0-1px 0 #009be0,
              -1px 0 0 #009be0, 1px 0 0 #009be0;
}
#implant h4{
  margin: 30px 15px 0;
  color:#4599a8;
  font-size:42px;
  line-height: 48px;
  font-weight: 400;
}
#implant .implant_txt{
  margin: 30px 15px 0;
}
#implant .implant_txt p{
  margin: 1em 0 0;
  font-size:20px;
  line-height: 30px;
  font-weight: 400;
}
#implant .implant_txt ul{
  margin: 15px 0 0;
}
#implant .implant_txt ul li{
  list-style-type: disc;
  margin: 0 0 0 15px;
  font-size:16px;
  line-height: 24px;
  font-weight: 400;
}
#implant_point,
#implant_guide{
  margin: 90px 0 0;
}
#implant_point h4,
#implant_guide h4{
  position: relative;
  margin: 0;
  color:#4599a8;
  font-size:42px;
  line-height:48px;
  font-weight: 400;
  text-align: center;
}
#implant_point h4::after,
#implant_guide h4::after{
  content: "";
  display: block;
  position: absolute;
  top:58px;
  left:50%;
  background-color: #4599a8;
  width: 60px;
  height: 3px;
  transform: translateX(-50%);
  -webkit- transform: translateX(-50%);
}
.box_implant{
  margin: 45px 15px 0;
  width: calc(100% - 30px);
}
.box_implant img{
  width: 100%;
}
.box_implant h5{
  margin: 13px 0 0;
  color:#1e78c2;
  font-size:24px;
  line-height: 28px;
  font-weight: 500;
  text-align: center;
}
.box_implant p{
  margin: 18px 0 0;
  color:#2b2b2b;
  font-size:20px;
  line-height: 30px;
  font-weight: 400;
}
.box_implant p.note{
  margin: 9px 0 0;
  padding-left:1rem;
  text-indent: -1rem;
}
.box_implant p.note::before{
  content: "※";
  color:#2b2b2b;
  font-size:16px;
  line-height: 24px;
  font-weight: 400;
}
.box_implant table{
  margin: 30px 0 0;
  border-collapse:separate;
  border-spacing: 1px;
  width: 100%;
}
.box_implant table#total{
  margin: 10px 0 0;
}
.box_implant table tr th{
  padding:0 15px;
  background-color: #faebb9;
  border: 1px solid #faebb9;
  width: 50%;
  height: 50px;
  color:#2b2b2b;
  font-size:18px;
  line-height: 22px;
  font-weight: 400;
  text-align: left;
  vertical-align: middle;
}
.box_implant table#total tr th{
  font-size:18px;
}
.box_implant table tr td{
  background-color: #FFF;
  border: 1px solid #faebb9;
  color:#7FAFC7;
  font-size:24px;
  line-height: 24px;
  font-weight: 400;
  text-align: center;
  vertical-align: middle;
}
.box_implant table#total tr td{
  color:#949132;
}
td span{
  padding-left: 0.2em;
  font-size:16px;
}
.btn_menu9{
  margin: 30px 15px 0;
  background-color: #65cadb;
  width: calc(100% - 30px);
  height: 80px;
  color:#FFF;
  font-size:16px;
  line-height:80px;
  font-weight: 400;
  text-align: center;
}
.btn_menu9:hover{
opacity: 0.8;
}
.btn_menu9 a{
  display: block;
  color:#FFF;
  font-size:16px;
  line-height:80px;
  font-weight: 400;
  text-align: center;
  text-decoration: none;
}
#implant_flow{
  margin: 90px 0 0;
}
#implant_flow h4{
  position: relative;
  margin: 0;
  color:#4599a8;
  font-size:42px;
  line-height:48px;
  font-weight: 400;
  text-align: center;
}
#implant_flow h4::after{
  content: "";
  display: block;
  position: absolute;
  top:58px;
  left:50%;
  background-color: #4599a8;
  width: 60px;
  height: 3px;
  transform: translateX(-50%);
  -webkit- transform: translateX(-50%);
}
#flow_list{
  margin: 60px 15px 0;
}
#flow_list ol{
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
#flow_list ol li{
  margin:0 9px 20px 0;
  background-color: #f0f8ff;
  width: 345px;
  height: 285px;
}
#flow_list ol li h5{
  position: relative;
  margin:15px 15px 0;
  padding-left:55px;
  border-radius: 5px;
  background-color: #4599a8;
  color:#FFF;
  width: calc(100% - 85px);
  height: 50px;
  font-size:16px;
  line-height: 50px;
}
#flow_list ol li:nth-of-type(6) h5,
#flow_list ol li:nth-of-type(7) h5{
  line-height: 24px;
}
#flow_list ol li:nth-of-type(1) h5::before{
  content: "01";
  position: absolute;
  top:50%;
  left:15px;
  transform: translateY(-50%);
  -webkit- transform: translateY(-50%);
  color:#FFF;
  font-size:30px;
  line-height: 30px;
}
#flow_list ol li:nth-of-type(2) h5::before{
  content: "02";
  position: absolute;
  top:50%;
  left:15px;
  transform: translateY(-50%);
  -webkit- transform: translateY(-50%);
  color:#FFF;
  font-size:30px;
  line-height: 30px;
}
#flow_list ol li:nth-of-type(3) h5::before{
  content: "03";
  position: absolute;
  top:50%;
  left:15px;
  transform: translateY(-50%);
  -webkit- transform: translateY(-50%);
  color:#FFF;
  font-size:30px;
  line-height: 30px;
}
#flow_list ol li:nth-of-type(4) h5::before{
  content: "04";
  position: absolute;
  top:50%;
  left:15px;
  transform: translateY(-50%);
  -webkit- transform: translateY(-50%);
  color:#FFF;
  font-size:30px;
  line-height: 30px;
}
#flow_list ol li:nth-of-type(5) h5::before{
  content: "05";
  position: absolute;
  top:50%;
  left:15px;
  transform: translateY(-50%);
  -webkit- transform: translateY(-50%);
  color:#FFF;
  font-size:30px;
  line-height: 30px;
}
#flow_list ol li:nth-of-type(6) h5::before{
  content: "06";
  position: absolute;
  top:50%;
  left:15px;
  transform: translateY(-50%);
  -webkit- transform: translateY(-50%);
  color:#FFF;
  font-size:30px;
  line-height: 30px;
}
#flow_list ol li:nth-of-type(7) h5::before{
  content: "07";
  position: absolute;
  top:50%;
  left:15px;
  transform: translateY(-50%);
  -webkit- transform: translateY(-50%);
  color:#FFF;
  font-size:30px;
  line-height: 30px;
}
#flow_list ol li:nth-of-type(8) h5::before{
  content: "08";
  position: absolute;
  top:50%;
  left:15px;
  transform: translateY(-50%);
  -webkit- transform: translateY(-50%);
  color:#FFF;
  font-size:30px;
  line-height: 30px;
}
#flow_list .list_data{
  display: flex;
  margin:15px 15px 0;
  padding:0 0 15px;
  width: calc(100% - 30px);
}
#flow_list .list_data .list_img{
  width: 128px;
  height: auto;
}
#flow_list .list_data .list_img img{
  width: 100%;
}
#flow_list .list_data p{
  flex:1;
  margin:0 0 0 15px;
  font-size:14px;
  line-height:22px;
}

@media (orientation:landscape){

}