@charset "UTF-8";
img{width: 100%; height: auto;}
html{scroll-behavior: smooth;}
ul.notes{margin:10px 85px;}
ul.notes li{font-size:12px; color:#000; text-indent: -1em; padding-left: 1em;}
ul.notes li::before{content:"※";}

.btn img {
  animation: anime1 0.5s ease 0s infinite alternate;
  transform-origin:center;
}
@keyframes anime1 {
  from {
    transform: scale(0.9,0.9);
  }
  to {
    transform: scale(1,1);
  }
}
.btn:hover{opacity: 0.8;}

body #maincontents{max-width: 800px; margin: 0 auto; background: url("../lib/bg.jpg"); background-size: contain; font-family: 'Noto Serif JP', serif;}
/*header .fixedbox{position: fixed; top: 0; left: 0; width: 100%; background: #fff; z-index: 10000; height: 75px; max-width: 800px; left: 50%;
transform: translate(-50%, 0);}*/

#fv ul{width: 88%; margin: 3% 6%;}

section, .counceling, .order{max-width: 900px; margin: 0 auto;}
.m20{margin-bottom: 20px;}
.m30{margin-bottom: 30px;}

.counceling{ padding: 15px; background: #fff;}

.order{padding: 40px 0 30px 0;}
.order ul{margin: 0 auto; width: 90%; left: 5%;}
.order ul li{margin-bottom: 10px;}
.order ul li img{width: 100%;}

#sec01 .box{padding: 5% 3% 0 3%;}


#sec02{background: url("../lib/sec02_bg.jpg"); background-size: cover; padding:5% 3%;}
#sec02 img{padding: 4% 0;}
@media only screen and (min-width:800px) {
}



#sec05{ padding:10% 0 3% 0; }
#sec05 h3{margin: 0 auto 40px auto; width: 80%; }

#sec06{background: url("../lib/sec06_bg.jpg"); background-size: cover; padding-bottom: 4%;}
#sec06 .image{width: 90%; padding: 4% 0; margin:0 auto;}

#sec09{padding-bottom: 5%;}
#sec09 h3{padding: 7% 5% 0 5%;}
#sec09 .box img{margin-top: 5%;}
#sec09 .box{padding: 0 5% 4% 5%;}
#sec09 .image{width: 80%; margin: 4% 10% 0 10%; border-radius: 10px;}
#sec09 .image img{border-radius: 20px;}

#sec10{background: url("../lib/sec10_bg.jpg"); background-size: cover; padding-bottom: 4%;}
#sec10 h3{ padding: 7% 5% 0 5%;}
#sec10 .box img{margin-top: 5%;}
#sec10 .box{padding: 0 5% 4% 5%;}
#sec10 .image{width: 70%; margin: 0 15% 0 15%;}
#sec10 .image img{margin-bottom:16px;}
#sec10 ul.notes{margin:20px!important; width:100%; font-size:9px!important; transform: scale(0.8);
transform-origin:0 0;}
@media only screen and (min-width:650px) {
#sec10 ul.notes{margin: 10px 85px; font-size:12px!important; transform: scale(1);
transform-origin:0 0;}
}

#sec11{background: url("../lib/sec06_bg.jpg"); background-size: contain; padding: 0 0 50px 0;}
.youtube{margin: 50px 5% 0 5%;
    padding-top: 56.25%;
    width: 90%;
    position: relative;
}
 
.youtube iframe{border-radius: 20px;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
}

#sec12{background: #c89f63; padding: 10% 5%;}
#sec12 ul li{margin: 3% 0;}
#sec12 ul li.yazirushi{margin: 3% 0 0 0;}

#sec13{padding: 10% 5% 5% 5%; color: #fff; font-family: 'Shippori Mincho', serif; font-weight: 400;}
#sec13 h3{width: 80%; margin: 0 auto; margin-bottom: 7%;}
#sec17{padding: 5% 0;}
#sec18{background: url("../lib/sec18_bg.jpg"); background-size: cover; padding: 10% 5% 5% 5%; }
#sec18 ul li{margin-bottom: 5%;}

#sec19{background: url("../lib/sec19_bg.jpg"); background-size: cover; padding:10%; }
#sec19 .image{margin: 7% 0 4%;}
#sec19 .box{margin:0 2%;}

#sec20{background: url("../lib/sec20_bg.jpg"); background-size: cover; }
#sec20 h3{position:relative;  z-index:9;}
#sec20 .image{position:relative; margin: -7% 0 4%; z-index:1;}
#sec20 .box{margin:0 7%; padding-bottom:6%;}

#sec21{position:relative; background:#c89f63;}
#sec21 .btn{position:absolute; bottom:13%; left:0; right:0; margin:0 auto; width:90%;}
#sec21 .btn a:hover img{opacity:.7;}


#hikaku{background: url("../lib/hikaku_bg.jpg"); background-size: cover; padding: 10% 0 50px 0;}
#hikaku h3{width: 80%; margin: 0 auto; margin-bottom: 7%;}
#hikaku .image{margin: 0 20px; overflow-x: scroll;}
#hikaku .image img{min-width:140%;}

#score {padding: 1% 10% 10% 10%;}

/* inputのチェックボックスを非表示 */
.accordion-hidden {
  display: none;
}

/* 見出しプラスマイナス部分 */

.accordion-open::before,
.accordion-open::after {
  content: '';
  width: 20px;
  height: 1.5px;
  background: #c9a063;
  position: absolute;
  top: 50%;
  right: 5%;
  transform: translateY(-50%);
}

.accordion-open::after {
  transform: translateY(-50%) rotate(90deg);
  transition: .5s;
}

/* アコーディオンが開いたらーに */
.accordion-hidden:checked+.accordion-open:after {
  transform: translateY(-50%) rotate(0);
}



/* アコーディオン中身部分 */
.accordion-inner {
  display: block;
  height: 0;
  overflow: hidden;
  padding: 0;
  opacity: 0;
  transition: 0.5s;
  /* 表示速度の設定 */
  cursor: pointer;
}

/* チェックボックスにチェックが入ったら中身部分を表示する */
.accordion-hidden:checked+.accordion-open+.accordion-inner {
  height: auto;
  opacity: 1;
  padding: 10px;
}


/* 中にいろいろ入れたいとき */
.accordion-box {background: #c9a063; border-radius: 10px;
  display: block;
  height: 0; color: #fff;
  overflow: hidden;
  padding: 0;
  opacity: 0;
  transition: 1s;
}
.accordion-hidden:checked+.accordion-open+.accordion-box {
  height: auto;
  opacity: 1;
}

.pricelist p{text-align:left; max-width:680px; margin:0 auto; font-family: 'Noto Sans JP', sans-serif;}
.pricelist p em{display:block; font-weight:500; font-style:normal; text-align:center;}
.pricelist table.price{margin:20px 0; width:95%; max-width:680px; border-collapse: collapse; border:1px solid #00153b; font-family: 'Noto Sans JP', sans-serif;}
.pricelist table.price thead{background:#5182a5; color:#fff;}
.pricelist table.price th,.pricelist table.price td{border:1px solid #00153b;}
.pricelist table.price thead th,.pricelist table.price thead td{font-weight:500; padding:4px 0; font-size:15px; font-family: 'Noto Sans JP', sans-serif; text-align:center;}
.pricelist table.price tbody th{background:#78909f; font-weight:500; padding:4px 0; font-size:15px; color:#fff;}
.pricelist table.price tbody td{background:#f0f0f0; text-align:right; color:#00153b; padding:4px;}
.pricelist table.price tbody td.red{color:#cc0000;}
.pricelist table.price td.none{background-image: linear-gradient(to left top, transparent calc(50% - 0.5px), #00153b 50%, #00153b calc(50% + 0.5px), transparent calc(50% + 1px))}
.pricelist table.price th.icon{position:relative; padding:55px 0 0;}
.pricelist table.price th.icon .price-icon{position:absolute; top:5px; left:0; right:0; margin:0 auto; width:50px; hegith:auto;}

.pricelist .payment{padding:0 20px; text-align:left;}
.pricelist .payment li{margin-bottom:20px;}
.pricelist .payment li .icon-list{font-size:17px; font-size:1.7rem;}
.pricelist .payment li p{margin:0; margin-bottom:12px; padding-left:15px;}
.pricelist .payment .card{margin-top:8px; width:300px; padding-left:15px;}
.pricelist .payment .code{margin-top:8px; width:200px; padding-left:15px;}

@media only screen and (min-width:740px) {
.pricelist table.price th.icon{position:relative; padding:5px 0;}
.pricelist table.price th.icon .price-icon{position:absolute; top:-5px; left:15px; width:50px; hegith:auto; margin:0;}
.pricelist .payment{max-width:800px; margin:0 auto;}
.pricelist .payment li.hf{display:inline-block; width:60%; margin-right:1%; vertical-align:top;}
.pricelist .payment li.hfcode{display:inline-block; width:38%; margin-right:1%; vertical-align:top;}
.pricelist .payment .card{margin-top:8px; width:400px; padding-left:15px;}
.pricelist .payment .code{margin-top:8px; width:250px; padding-left:15px;}
}

.pricelist table.price th.hyotitle{width: 100px;}
.pricelist table.price{max-width:800px; border-collapse: collapse; border:1px solid #00153b;}
.pricelist table.price02{margin:0; width:95%; max-width:800px; border-collapse: collapse; border:1px solid #00153b; }
.pricelist table.price02 th,.pricelist table.price02 td{border:1px solid #00153b; font-family: 'Noto Sans JP', sans-serif;}
.pricelist table.price02 tbody th{background:#5182a5; font-weight:500; width: 180px; padding:4px 0; font-size:15px; color:#fff;}
.pricelist table.price02 tbody td{font-size: 16px; background:#f0f0f0; text-align:center; color:#00153b; padding:4px;}
.pricelist table.price02 td.none{background-image: linear-gradient(to left top, transparent calc(50% - 0.5px), #00153b 50%, #00153b calc(50% + 0.5px), transparent calc(50% + 1px))}

@media only screen and (min-width:740px) {
.pricelist table.price th.hyotitle{width: 200px;}
.pricelist table.price02 th.hyotitle{width: 200px;}
}



/*--------------------------------------------------------------
faq
--------------------------------------------------------------*/
#sec15{padding:10% 5% 10% 5%; font-family: 'Noto serif JP', sans-serif; }
#sec15 h3{width: 30%; margin: 0 auto; margin-bottom: 30px;}
#sec15 label{color: #4d4d4d; font-weight: 600; font-size: 15px;  background: #fff; border-radius: 10px; text-align: left;
position: relative;}
#sec15 .accordion-open {
  display: block; 
  padding: 5% 30px 5% 50px;
  cursor: pointer;
  margin: 5px 0;
  position: relative;
  border-bottom: none;
}
#sec15 .question{position: absolute; width: 30px; top: 15px; bottom: 0; margin: auto 0; left: 10px;}
#sec15 .answer{display: inline-block; width: 30px; vertical-align: top; margin-left: 10px; margin-top: 20px;}
#sec15 .answerbox{display: inline-block; width: calc(100% - 50px);}
#sec15 .accordion-box p{padding: 20px 5px; font-size: 14px;}

@media only screen and (min-width:400px) {
#sec15 .accordion-open { padding: 20px 50px 20px 60px;}
#sec15 label{font-size: 18px;}
#sec15 .question{width: 35px; top: 18px; left: 15px;}
#sec15 .answer{ width: 35px; margin-left: 15px; margin-top: 20px;}
#sec15 .answerbox{display: inline-block; width: calc(100% - 60px);}
#sec15 .accordion-box p{padding: 20px 5px; font-size: 16px;}
}

@media only screen and (min-width:600px) {
#sec15 .accordion-open { padding: 25px 50px 25px 70px;}
#sec15 label{font-size: 22px;}
#sec15 .question{width: 40px; top: 25px; left: 15px;}
#sec15 .answer{ width: 40px; margin-left: 15px; margin-top: 25px;}
#sec15 .answerbox{display: inline-block; width: calc(100% - 60px);}
#sec15 .accordion-box p{padding: 20px 10px; font-size: 19px;}
}

#sec16{ padding:10% 5% 10% 5%; font-family: 'Shippori Mincho', serif; font-weight: 400;  line-height: 1.5; color: #fff; font-size: 16px;}
#sec16 h3{width: 80%; margin: 0 auto; margin-bottom: 7%; }
#sec16 .clinicbox{margin:0 0 60px 0; text-align:left;}
#sec16 .clinicinfo .address{flex:1;}
#sec16 .clinicinfo .access{width:100%;}
#sec16 .clinicnamebox{display:flex; align-items:center; border-bottom: 1px solid #fff; padding-bottom: 10px; margin-bottom: 20px;}
#sec16 h4{font-size: 15px; font-weight: 400; font-size: 1.4rem; }
#sec16 .clinicnamebox .date{margin:4px 0 0 12px;  background:#fff; padding:2px; font-size:15px; color:rgba(0, 18, 47, 0.8); font-weight:600;}
#sec16 p{margin-bottom:16px;}
#sec16 ul{margin-top:-16px;}
#sec16 ul li{list-style:disc; margin-left:20px;}
#sec16 .map{position: relative; width: 100%; height: 0; padding-top: 75%;}
#sec16 .map iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

@media only screen and (min-width:740px) {
#sec16{max-width:800px; margin:0 auto; font-size: 17px;}
#sec16 h4{font-size:20px; font-size:2rem;}
#sec16 h4 span{font-size:15px; font-size:1.5rem;}
#sec16 .clinicinfo{display:flex; justify-content:space-between;}
#sec16 .clinicinfo .access{width:48%;}
#sec16 .map{position: relative; width: 100%; height: 0; padding-top:30%;}
#sec16 .map iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
}



.pagetop {
    height: 40px;
    width: 40px;
    position: fixed;
    right: 10px;
    bottom: 30%;
    background: #666;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

.pagetop__arrow {
    height: 10px;
    width: 10px;
    border-top: 3px solid #fff;
    border-right: 3px solid #fff;
    transform: translateY(20%) rotate(-45deg);
}



/*footer*/

footer{color: #fff; padding:2% 2% 32% 2%; margin: 0 auto; max-width: 900px; text-align: center ; font-family: 'Noto Sans JP', sans-serif;}
footer p{margin-bottom:16px;}
footer .copyright{font-size: 12px; margin-top: 10px; }
@media only screen and (min-width:600px) {
footer .copyright{font-size: 14px;}
}


.fadeInTrigger,.fadeIn2Trigger,.fadeIn3Trigger{opacity: 0;}
.fadeIn{animation-name:fadeInAnime; animation-duration:1s; animation-fill-mode:forwards; opacity:0;}
.fadeIn2{animation-name:fadeInAnime2; animation-duration:2s; animation-fill-mode:forwards; opacity:0;}
.fadeIn3{animation-name:fadeInAnime3; animation-duration:2.5s; animation-fill-mode:forwards; opacity:0;}
@keyframes fadeInAnime{
from {opacity: 0; transform: translateY(0);}
to {opacity: 1; transform: translateY(0);}
}
@keyframes fadeInAnime2{
from {opacity: 0; transform: translateY(30px);}
to {opacity: 1; transform: translateY(0);}
}
@keyframes fadeInAnime3{
from {opacity: 0; transform: translateY(30px);}
to {opacity: 1; transform: translateY(0);}
}

.fadeLeft{
animation-name:fadeLeftAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeLeftAnime{
  from {
    opacity: 0;
	transform: translateX(-100px);
  }

  to {
    opacity: 1;
	transform: translateX(0);
  }
}

.fadeRight{
animation-name:fadeRightAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeRightAnime{
  from {
    opacity: 0;
	transform: translateX(100px);
  }

  to {
    opacity: 1;
	transform: translateX(0);
  }
}


.slidein01Trigger, .slidein02Trigger, .slidein03Trigger, .slidein04Trigger{perspective: 1000; backface-visibility: hidden; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); overflow: hidden; transform-style: preserve-3d;}
.slidein01 {perspective: 1000; display: inherit;
  animation: slideIn01 2s linear 0s 1 normal;
}

.slidein02 {perspective: 1000; display: inherit;
  animation: slideIn02 1s linear 0s 1 normal;
}

.slidein03 {perspective: 1000; display: inherit;
  animation: slideIn03 1s linear 0s 1 normal;
}

.slidein04 {perspective: 1000; display: inherit;
  animation: slideIn04 1s linear 0s 1 normal;
}

@keyframes slideIn01 {
  0% {
    opacity: 0;
    transform: translateX(-1000px);
  }
  60% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideIn02 {
  0% {
    opacity: 0;
  }  
  10% {
    opacity: 0;
    transform: translateX(1000px);
  }
  70% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideIn03 {
  0% {
    opacity: 0;
  }  
  20% {
    opacity: 0;
    transform: translateY(500px);
  }
  80% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideIn04 {
  0% {
    opacity: 0;
  }  
  30% {
    opacity: 0;
    transform: translateY(-500px);
  }
  90% {
    opacity: 1;
    transform: translateY(0);
  }
}
.modal-wrapper {
  z-index: 999;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 0 10px;
  text-align: center;
}

.modal-button {
    font-weight: bold;
    text-align: center;
    cursor :pointer;
    transition: all 0.3s;
    display: block;
    text-decoration: none;
}

.modal-button:active {
  /*ボタンを押したとき*/
  -webkit-transform: translateY(2px);
  transform: translateY(2px);/*下に動く*/

}


.modal-wrapper:not(:target) {
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s, visibility .3s;
}

.modal-wrapper:target {
  opacity: 1;
  visibility: visible;
  transition: opacity .4s, visibility .4s;
}

.modal-wrapper::after {
  display: inline-block;
  height: 100%;
  margin-left: -.05em; margin-top: 30px;
  vertical-align: top;
  content: ""
}

.modal-wrapper .modal-window {
  box-sizing: border-box;
  display: inline-block;
  z-index: 20;
  position: relative;
  width: 94%;
  max-width: 400px;
  padding: 10px 15px 25px;
  background: none;
  vertical-align: middle
}

.modal-wrapper .modal-window .modal-content {
  max-height: 80vh;
  overflow-y: auto;
  text-align: left
}

.modal_title {
  font-size: 1.3px;  font-size: 1.3rem;
	position: relative;
	overflow: hidden;
  padding: 0;
}


.modal-content p {font-size: 10px; font-size: 1rem; color: #fff; font-family: 'Noto Sans JP', sans-serif;  margin: 10px 0 0 0;}
.modal-content .imgbox{margin: 0 auto; background: #fff;}
.modal-content .red{text-align: center; font-weight: 600; color: #fff; background: #bb0200; font-size: 13px; font-size: 1.3rem;}
.modal-content .modal-accessbox{margin-top:30px;}
.addressbox h4{font-size: 12px; font-size: 1.2rem; color: #fff; margin-top: 5px;font-family: 'Noto Sans JP', sans-serif;}
.addressbox h4 span{display:inline-block; margin-bottom:4px; margin-left:8px;  padding:0 4px; vertical-align:middle; font-size:11px; background:#fff; color:#000;}
.modal-content .imgbox img{width: 100%;}
.modal-overlay {
  z-index: 10;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, .75)
}

.modal-wrapper a.modal-close {font-family: 'Noto Sans JP', sans-serif; background: #fff;
  z-index: 20; display: block;
  margin-top: 15px;
  width: 100%;
  color: #000 !important;
  font-size: 18px;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  text-indent: 0
}