@font-face {
  font-family: "kodukaPr6NM";
  src: url("font/kodukaPr6NM.otf") format("opentype");
}
@font-face {
  font-family: "kodukaPr6NL";
  src: url("font/kodukaPr6NL.otf") format("opentype");
}
:root{
  --accent:#2aa6a6; /* メインティール */
  --accent-dark:#1f8b8b;
  --muted:#f5f5f5;
  --card-border:#e6e6e6;
  --text:rgb(64, 64, 64);
  --pill-radius:999px;
  --max-width:1080px;
}
*{box-sizing:border-box}
body{
  font-family: "kodukaPr6NM";
  font-weight: 500;
  color:var(--text);
  margin:0;
  background:white;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height:1.6;
}

html,body{overflow-x: hidden;}

img {
  height: auto;
  max-width: 100%;
}

a{
  transition: .3s;
}
a:hover{
  opacity: .7;
}
.wrap{
  margin:40px auto 130px;
  padding:20px;
}
.mv{
  line-height: 0;
}
.mv img{
  width: 100%;
}
.mv .sp{
  display: none;
}
.mv_txt img{
  width: 100%;
}


.header {
  background-color: rgb(62, 182, 175);
  height: 100px;
  display: flex;
  align-items: center;
}
.header .inner {
  max-width: 1080px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: auto;
}
h1{
  margin: 0;
}
h1 img{
  height: 72px;
}
.header .tel img{
  height: 60px;
}
.header .logo,.header .tel{
  line-height: 0;
}
.mv_txt .sp{
  display: none;
}

/* 上部キャッチ */
.catch{
  text-align:center;
  margin: 0 auto 80px;
}

/* セクション見出し */
.section-head{
  display:flex;
  align-items:start;
  gap:14px;
  justify-content:center;
  margin:36px 0 18px;
}
h2.under{
  margin:0;
  font-size:48px;
  font-weight: 500;
  color: rgb(64, 64, 64);
  line-height: 1.2;
  letter-spacing:0.02em;
  position:relative;
  padding-bottom:10px;
}
h2.under:after{
  content: '';
  display: block;
  background: center / contain no-repeat url(img/h2boarder.png);
  width: 100%;
  height: 40px;
  margin-top: 16px;
}
.section-head .icon{
  width:96px;
  height:96px;
  background: center / contain no-repeat url(img/teeth01.png);
  position: relative;
  top: -26px;
}


.cards{
  max-width: 1800px;
  width: 100%;
  margin: auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin-top:18px;
}
.card{
  display:flex;
  flex-direction:column;
  justify-content: end;
  max-width: 600px;
  width: 100%;
  height:600px;
  position: relative;
  padding: 16px 13px;
}
.card .media{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #eeeeee;
}
.card .media img{
  width:100%;
  display:block;
}
.card .media .icon{
  position: absolute;
  top:-20px;
  left:-10px;
  width: 200px;
}
.card .content{
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  background: white;
  height: 260px;
}
.pill-title{
  display:block;
  background:rgb(0 163 184);
  color:#fff;
  padding:3px 18px;
  font-family: "kodukaPr6NM";
  border-radius:var(--pill-radius);
  font-size:24px;
  font-weight: 500;
  text-align:center;
  width: 100%;
}
.card p{
  margin:0;
  font-size:18px;
  color: rgb(64, 64, 64);
}
.card .text-box{
  font-size:14px;
}

/*  @media (max-width:980px){
:root{ --max-width:940px; }
.cards{ grid-template-columns:repeat(2,1fr); }
.card{ min-height:420px; }
}
@media (max-width:640px){
.wrap{ padding:12px; margin:20px auto; }
.top-badge .catch{ font-size:20px; }
.cards{ grid-template-columns:1fr; gap:18px; }
.card{ min-height:360px; }
.card .media{ height:200px; }
.pill-title{ transform:translateY(-10px); font-size:14px; padding:8px 14px; }
}*/


/* モーダル */
.section-modal {
  background-color: rgb(240, 252, 255);
  border-top:10px solid rgb(0 163 184);
  position: relative;
  padding: 3rem 0 6rem;
}
.section-modal:before {
  content: '';
  width:96px;
  height:96px;
  background: center / contain no-repeat url(img/teeth01.png);
  position: absolute;
  top:-75px;
  left: 0;
  right: 0;
  margin: auto;
}
.check-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  max-width: 1080px;
  width: 100%;
  margin: 0 auto;
}
.check-list button {
  background-color: rgb(0 163 184);
  color: #fff;
  width: 349px;
  font-size: 36px;
  font-weight: 500;
  font-family: "kodukaPr6NM";
  letter-spacing: .1rem;
  padding: 25px 14px;
  border: none;
  cursor: pointer;
  transition: 0.3s;
}

.check-list button:hover {
  background-color: #00b4c3;
}
.modal-bg {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  justify-content: center;
  align-items: center;
  z-index: 1000;
}
.modal {
  background: #fff;
  width: 90%;
  max-width: 700px;
  border-radius: 6px;
  padding: 20px 30px;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
}
.modal .img{
  width: 45%;
}
.modal img {
  width: 100%;
  border-radius: 4px;
  object-fit: cover;
}
.modal-content {
  width: 50%;
}
.modal h2 {
  font-size: 22px;
  color: #009ca6;
  margin-top: 0;
}
.modal h3 {
  font-size: 17px;
  margin-top: 0;
  border-bottom: 1px solid #009ca6;
}
.modal ul {
  padding-left: 20px;
  margin: 10px 0;
}
.modal ul li {
  margin-bottom: 6px;
  list-style: none;
  position: relative;
}
.modal ul li::before {
  content: "✔";
  color: #009ca6;
  margin-right: 6px;
}
.modal a {
  color: #009ca6;
  font-size: 14px;
  text-decoration: none;
  display: inline-block;
  margin-top: 10px;
  float: right;
}
.modal a:hover {
  text-decoration: underline;
}
/* 閉じるボタン */
.close-btn {
  position: absolute;
  top: 10px;
  right: 14px;
  background: #009ca6;
  color: #fff;
  font-size: 20px;
  border: none;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  cursor: pointer;
  line-height: 1;
}

@media (max-width: 640px) {
  .modal {
    flex-direction: column;
    align-items: center;
  }
  .modal .img {
    width: 100%;
  }
  .modal img {
    width: 100%;
  }
  .modal-content {
    width: 100%;
  }
}


.section-trouble{
  position: relative;
  background: #baf8f6;
  padding: 3rem 0 5rem;
}
.section-trouble-under{
  text-align: center;
  line-height: 0;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
}
.trouble-bg{
  position: absolute;
  top:0;
  width: 100%;
}
.trouble-bg img{
  width: 100%;
}
.trouble-bg>img.sp{
  display: none;
}
.section-trouble>h2{
  color: white;
  font-size: 48px;
  font-family: "kodukaPr6NM";
  font-weight: 500;
  color: rgb(255, 255, 255);
  text-align: center;
  position: relative;
  margin: 0 0 1rem;
}
.section-trouble>h3{
  color: white;
  font-size: 36px;
  font-family: "kodukaPr6NM";
  font-weight: 500;
  line-height: 1.333;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin: 0;
}
.section-trouble>h3:before{
  content: '';
  background: url(img/ck.png)no-repeat;
  background-size: contain;
  display: block;
  width: 86px;
  height: 86px;
  position: relative;
  margin-right: 14px;
}
.section-trouble .trouble-img{
  text-align: center;
  position: relative;
  line-height: 0;
  top: 48px;
  right: 33px;
}
.troubles{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  position: relative;
}
.lp-busy-section {
  width: 32%;
  max-height: 391px;
  display: flex;
  align-items: stretch;
}
.lp-busy-inner {
  background-color: white;
  padding: 0;
}
.lp-busy-title {
  background-color: rgb(255, 253, 223);
  font-size: 30px;
  font-weight: 600;
  padding: 19px 5px;
  line-height: 1.2;
  margin: 0 0 20px;
  height: 106px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.lp-busy-img {
  width: 200px;
  height: auto;
  margin: 0 auto 20px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lp-busy-img img {
  width: 100%;
  height: auto;
  object-fit: cover;
}
.lp-busy-text {
  font-size: 18px;
  line-height: 1.333;
  margin: 0;
  padding: 0 17px 17px;
}


@media (max-width: 600px) {
  .lp-busy-title {
    font-size: 1.3rem;
  }
  .lp-busy-img {
    width: 260px;
    height: 153px;
  }
}




.vein-wrap{
  background: #fffddf;
  padding: 15rem 0 0;
}
.vein-inner{
  width: 1080px;
  margin: auto;
}
.vein-inner .img1{
  line-height: 0;
  position: relative;
  left: 102px;
}
.section-vein,.vein_01,.vein_02{
  background: white;
  border: 5px solid rgb(235, 186, 12);
  border-radius: 10px;
  margin-bottom: 3rem;
}
.vein_01,.vein_02{
  text-align: center;
}
.section-vein h2,.vein_01 h2,.vein_02 h2{
  font-size: 50px;
  color: rgb(255, 99, 99);
  line-height: 1.2;
  letter-spacing: .1rem;
  text-align: center;
}
.vein_02 h2 span{
  font-size: 24px;
  display: block;
}
.section-vein .inner,.vein_01 .inner,.vein_02 .inner{
  max-width: 650px;
  width: 100%;
  margin: auto;
}
.section-vein .inner h3 {
  font-size: 40px;
  background-color: rgb(0 163 184);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: white;
  line-height: 1.2;
  height: 119px;
  border-radius: 5rem;
}
.section-vein .inner h3 span {
  font-size: 24px;
  display: block;
}
.section-vein .inner dl{
  display: flex;
  align-items: center;
  margin-left: 20%;
}
.section-vein .inner dl dt{
  border-radius: 50%;
  background-color: rgb(0 163 184);
  color: white;
  min-width: 50px;
  width: 50px;
  height: 51px;
  font-size: 30px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.section-vein .inner dl dd {
  font-size: 24px;
  color: #404040;
  line-height: 1.25;
  font-weight: 600;
  margin-left: 1rem;
}
span.red {
  color: rgb(255, 99, 99);
}
span.small {
  font-size: 16px;
  font-weight:500;
}
.vein_01 .img3,.vein_02 .img4,.vein-inner .img5{
  line-height: 0;
}
.section-vein .inner p.txt {
  font-size: 24px;
  font-weight: 600;
  color: rgb(0 163 184);
  line-height: 1.25;
  text-align: center;
  background-color: rgb(255, 253, 223);
  padding: 25px 36px;
  margin: 30px 0;
}
.vein_01 p,.vein_02 p{
  font-weight: 500;
  font-size: 18px;
  line-height: 1.333;
  margin: 30px 0;
}
.vein-inner .img5{

}



.section-contact{
  text-align: center;
  margin: 5rem auto;
}
.contact-wrap{
  display: flex;
  justify-content: center;
  gap: 20px;
}
.section-contact .inner>p{
  margin: 30px 0 50px;
}



.section-scenery {
  background-color: rgb(240, 252, 255);
  padding: 2rem 0 5rem;
}
.section-scenery .inner{
  background: white;
  border:4px solid rgb(0 163 184);
  border-radius: 10px;
  width: 1080px;
  margin: auto;
}
.section-scenery h2{
  position: relative;
}
.section-scenery h2:before{
  content: '';
  background: url(img/toothpaste.png)no-repeat;
  background-size: contain;
  width: 145px;
  height: 79px;
  position: absolute;
  top: -26px;
  right: -174px;
}
.col2-wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  max-width: 1080px;
  margin: 0 auto;
  padding: 50px 40px;
}
.col2-item{
  text-align: center;
  line-height: 0;
}
.col2-item img{
  width: 100%;
}


@media (min-width: 992px) {
  .col2-wrap {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
}



.section-risk{
  background-color: rgb(0 163 184);
  padding: 3rem 0 5rem;
}
.section-risk h2{
  color: white;
  position: relative;
}
.section-risk h2:after{
  background: center / contain no-repeat url(img/h2boarder-white.png);
}
.section-risk h2:before{
  content: '';
  background: url(img/toth.png)no-repeat;
  background-size: contain;
  width: 60px;
  height: 63px;
  position: absolute;
  top: -11px;
  right: -73px;
}
.section-risk .list {
  background: white;
  border-radius: 6px;
  max-width: 1080px;
  width: 100%;
  margin: auto;
  padding: 2rem 4rem;
}
.section-risk .list ul{
  list-style: none;
  padding: 0;
}
.section-risk .list ul li{
  margin-bottom: 1rem;
  font-size: 24px;
  line-height: 2.5;
}  
.section-risk .list ul li span.gr{
  color: rgb(0 163 184);
}



.section-short {
  background-color: rgb(240, 252, 255);
  padding: 3rem 0;
}
.section-short .inner{
  max-width: 1080px;
  width: 100%;
  margin: 2rem auto 0;
  border:4px solid rgb(0 163 184);
  border-radius: 10px;
  background: white;
  padding: 3rem 0 0;
}
.section-short .inner>div{
  max-width: 650px;
  width: 100%;
  margin: auto;
  position: relative;
}
.section-short .step span{
  color: white;
  background-color: rgb(0 163 184);
  font-size: 30px;
  padding: 2rem 1rem;
}
.section-short .step{
  display: flex;
  align-items: center;
}
.section-short .inner h3{
  font-size: 48px;
  font-family: "kodukaPr6NM";
  font-weight: 500;
  color: rgb(0 163 184);
  line-height: 1.146;
  margin: 0 0 0 1rem;
}
.section-short .inner h3 small{
  font-size: 24px;
  display: block;
}
.section-short .step + p{
  margin-bottom: 1rem;
  font-size: 16px;
}
.section-short .inner dl{
  margin-bottom: 1rem;
}
.section-short .inner dl.last{
  margin-bottom: 3rem;
}
.section-short .inner dl dt{
  font-size: 24px;
  color: rgb(0 163 184);
}
.section-short .inner dl dd{
  margin-left: 1.6rem;
}
.section-short .inner h4 {
  font-size: 30px;
  color: rgb(62, 161, 182);
  line-height: 1.833;
  font-weight: 500;
  margin: 0;
}
.section-short .inner .line{
  width: calc(100% + 430px);
  height: 4px;
  background: rgb(0 163 184);
  position: relative;
  left: -215px;
}
.section-short .inner .img{
  width: 881px;
  line-height: 0;
  position: relative;
  right: 101px;
}


.section-warning{
  margin: 3rem 0 7rem;
}
.section-warning .inner{
  width: 650px;
  margin: auto;
}
.section-warning .inner dl dt{
  font-size: 30px;
  line-height: 1.2;
}
.section-warning .img{
  text-align: right;
  position: relative;
  top: -42px;
}
.fee-title {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 25px;
}
.fee-item {
  margin-bottom: 30px;
}
.fee-item h3 {
  font-size: 24px;
  font-weight: 500;
  border-bottom: 1px solid #333;
  padding-bottom: 5px;
  padding-left: 1.5rem;
  margin-bottom: 0;
}
.fee-price {
  font-size: 24px;
  color: rgb(62, 161, 182);
  font-weight: 500;
  margin: 0;
  padding-left: 2.5rem;
}
.fee-note {
  font-size: 16px;
}
.fee-footnote {
  font-size: 18px;
  line-height: 1.333;
  margin: 0 0 3rem;
}
.section-warning .inner dl.fed{
  margin-bottom: 2rem;
}
.section-warning .inner dl.fed dt{
  margin-bottom: 1rem;
}
.section-warning .content{
  max-width: 1080px;
  width: 100%;
  margin: auto;
}


.reservations{
  position: fixed;
  bottom: 0;
  width: 100%;
  background: #f0fcff;
  padding: 1rem 0;
  display: flex;
  justify-content: center;
  gap:20px;
}
.reservations>div{
  line-height: 0;
}
.reservations .sp{
  display: none;
  border-radius: 20px;
}

.sm_none{
  display: none;
}

@media(max-width: 1300px){
  h2.under {
    font-size: 35px;
  }
  .wrap {
    margin: 0 auto 90px;
  }
  .card .content {
    height: auto;
    min-height: 300px;
  }
}

@media(max-width: 1200px){
  .vein-inner {
    width: 100%;
    padding: 0 20px;
  }
}

@media(max-width: 992px){
  .cards {
    grid-template-columns: auto;
    gap: 30px;
  }
  .card {
    max-width: 100%;
  }
  .card .content {
    min-height: 200px;
  }
  .card .media img {
    height: 100%;
    object-fit: cover;
  }
  .section-trouble>h2 {
    font-size: 35px;
  }
  .section-trouble>h3 {
    font-size: 24px;
  }
  .section-trouble>h3:before{
    width: 66px;
    height: 66px;
  }
  .section-trouble .trouble-img {
    top: 0;
    right: 0;
    margin: auto;
    padding: 0 20px;
  }
  .troubles{
    padding: 0 20px;
  }
  .lp-busy-section {
    width: 100%;
    max-height: 100%;
  }
  .vein-inner .img1{
    left: 0;
    padding: 0 20px;
  }
  .section-vein h2, .vein_01 h2, .vein_02 h2 {
    font-size: 35px;
  }
  .section-vein .inner h3 {
    font-size: 31px;
  }
  .section-contact{
    padding: 0 20px;
  }
  .contact-wrap{
    gap: 10px;
  }
  .section-scenery{
    padding: 2rem 20px 5rem;
  }
  .section-scenery .inner{
    width: 100%;
  }
  .col2-wrap{
    max-width: 100%;
  }
  .section-risk{
    padding: 3rem 20px 5rem;
  }
  .section-risk .list {
    padding: 1rem 1.5rem;
  }
  .section-short {
    padding: 3rem 20px;
  }
  .section-short .inner .img {
    width: 100%;
    right: 0;
  }
  .section-short .inner>div{
    max-width: 100%;
  }
  .section-short .inner>div *{
    padding-left: 30px;
    padding-right: 30px;
  }
  .section-short .inner h3,.section-short .inner h3 small{
    padding: 0!important;
  }
  .section-short .inner .line {
    width: 100%;
    left: 0;
  }
  .section-warning .inner{
    width: 100%;
    padding: 0 30px;
  }
  .section-warning .img{
    top:0;
    right:20px;
  }
}

@media(max-width: 768px){
  h1 img,.header .tel img {
    height: auto;
  }
  .check-list button {
    width: calc(50% - 20px);
    font-size: 18px;
    padding: 15px 9px;
  }
  .section-trouble {
    padding: 1rem 0 2rem;
  }
  .section-trouble>h2 {
    font-size: 5vw;
  }
  .section-trouble>h3 {
    font-size: 14px;
  }
  .section-trouble>h3:before {
    width: 36px;
    height: 36px;
  }
  .section-vein .inner, .vein_01 .inner, .vein_02 .inner{
    padding: 0 10px;
  }
  .section-vein .inner dl {
    margin-left: 0;
  }
  .section-contact .inner>p{
    text-align: left;
  }
  .reservations{
    gap:10px;
    padding: 1rem 20px;
  }
  .section-short .step span {
    font-size: 20px;
  }
}

@media(max-width: 640px){
  .header{
    padding: 0 20px;
    height: 70px;
  }
  .header .inner{
    gap:40px;
  }
  .mv .pc,.mv_txt .pc{
    display: none;
  }
  .mv .sp,.mv_txt .sp{
    display: block;
  }
  .catch {
    margin: 0 auto 40px;
  }
  .card{
    height: 430px;
  }
  .pill-title{
    font-size: 20px;
  }
  .card p,.lp-busy-text {
    font-size: 16px;
  }
  .section-modal {
    padding: 1rem 0 2rem;
  }
  .check-list{
    gap:8px;
  }
  .check-list button{
    font-size: 16px;
  }
  h2.under {
    font-size: 26px;
  }
  .section-head .icon {
    width: 53px;
    height: 57px;
    top: -12px;
  }
  .vein-wrap {
    padding: 6rem 0 0;
  }
  .section-vein .inner h3 {
    font-size: 18px;
    height: auto;
    padding: 11px 3px;
  }
  .section-vein .inner dl dt {
    min-width: 34px;
    width: 34px;
    height: 34px;
    font-size: 17px;
  }
  .section-vein .inner dl dd {
    font-size: 15px;
  }
  .section-vein .inner p.txt {
    font-size: 15px;
    padding: 17px 7px;
  }
  .vein_01 p, .vein_02 p {
    font-size: 16px;
    margin: 17px 0;
  }
  .vein_02 h2 span {
    font-size: 15px;
  }
  .section-vein h2,.vein_01 h2,.vein_02 h2{
    font-size: 18px;
  }
  .section-contact {
    margin: 3rem auto;
  }
  .contact-wrap{
    flex-direction: column;
    max-width: 250px;
    margin: auto;
  }
  .col2-wrap {
    padding: 30px 20px;
    gap: 20px;
  }
  .trouble-bg>img.pc{
    display: none;
  }
  .trouble-bg>img.sp{
    display: block;
  }
  .lp-busy-title{
    height: auto;
  }
  .section-scenery h2:before {
    width: 72px;
    height: 44px;
    top: -47px;
    right: 10px;
  }
  .section-risk h2:before {
    width: 36px;
    height: 38px;
    top: -48px;
    right: 0;
  }
  .section-short .inner>div{
    padding: 0 20px;
  }
  .section-short .inner>div *{
    padding-left: 0;
    padding-right: 0;
  }
  .section-short .step span{
    padding: 1.5rem 1rem;
  }
  .section-short .inner h3 {
    font-size: 26px;
  }
  .section-risk .list ul li{
    font-size: 18px;
    line-height: 1.5;
    text-indent: -1rem;
    padding-left: 1rem;
  }
  .section-short .inner h4,
  .section-warning .inner dl dt {
    font-size: 20px;
  }
  .section-short .inner dl dt,.section-short .inner h3 small{
    font-size: 18px;
  }
  .section-short .inner dl dd {
    margin-left: 0;
  }
  .section-short .inner h4{
    line-height: 1.5;
  }
  .section-short{
    padding: 1rem 20px 3rem;
  }
  .fee-item h3,.fee-price {
    font-size: 19px;
    padding-left: 0;
  }
  .fee-footnote{
    font-size: 17px;
  }
  .section-warning .inner dd{
    margin: 0;
  }
  .section-warning .img img{
    max-width: 101px;
  }
  .reservations .pc{
    display: none;
  }
  .reservations .sp{
    display: block;
  }
  .sm_none{
    display: block;
  }
}

@media(max-width: 768px){
      .header .inner {
        gap: 24px;
    }
  .header .logo, .header .tel{
    flex: 2;
  }
}