/* seisaku 2022.8.   alank  kinoshita tsubasa */

/* リセットcss */html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,b, i,dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;}
body,a,input,label,img{ line-height:1;}   /**/
@media screen and (max-width:700px){body,a,input,label,img{ cursor: url(./img/cursor-mo.png), auto;}}
* { -webkit-box-sizing: border-box; box-sizing: border-box;}
a,a:visited,a:hover,a:active { text-decoration: none; color: inherit;	background-color:transparent;}
body{font-family:"ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;}

/*----------------------------------------- トップ -----------------------------------------*/
.top{width:100%;height:63vw;overflow:hidden;position:relative;margin:0;}
.top img,.top h1,.tel-ad{position: relative;color:#40c72c;}
.top img{width:100%;border-radius:800px 400px 0 0;top:-115px;left:0;height:auto;}
.top-title{font-size:3vw;top:40;left:5%;}
.tel-ad{font-size:1.4vw;top:65;left:5%;}
.tel-ad a:hover{color:rgb(225, 151, 231);}
.top-add{margin-top:10px;}
.top-left p{width:30vw;height:50vw;background-color:#55B646;position:absolute;top:0;right:0;margin:0;display:inline-block;}

/*----------------------------------------- トップレスポンシブ -----------------------------------------*/
@media screen and (min-width:1200px){
  .top img{border-radius:1200px 500px 0 0;top:-10vw;left:0;height:auto;}
  .top-title{font-size:3vw;top:60;left:4%;}
  .tel-ad{font-size:1.4vw;top:85;left:4%;}
  .top-add{margin-top:10px;}
}
@media screen and (max-width:850px){
  .top{width:100%;height:63vw;}
}
@media screen and (max-width:830px){
  .top img{border-radius:1200px 500px 0 0;top:-90px;left:0;height:auto;}
  .top-title{font-size:3vw;top:30;left:3%;}
  .tel-ad{font-size:1.4vw;top:55;left:3%;}
  .top-add{margin-top:10px;}
}
@media screen and (max-width:650px){
  .top{width:100vw;}
  .top img{width:100vw;border-radius:0;top:0;opacity:.5;margin: 0;z-index:0;}
  .top-left{height: 0;background-color:#fff;}
  .top img,.top h1,.tel-ad{position: relative;color:#fff;text-shadow: rgb(44, 44, 44) .1vw .1vw .5vw;}
  .top-title{font-size:5vw;top:50vw;left:5vw;z-index: 100;display: inline-block;}
  .tel-ad{font-size:2.5vw;top:43.5vw;left:45vw;z-index: 100;}
  .top-add{margin-top:0;}
  .top-left p{display:none;}
}

/*----------------------------------------- ハンバーガー -----------------------------------------*/
label .menu{position:fixed;right:-100;top:-100;z-index:9995;width:180px;height:180px;background:#55B646;border-radius:50% 50% 50% 50%;transition:.5s ease-in-out;box-shadow:0 0 0 0 #55B646,0 0 0 0 #55B646;cursor:pointer;}
label .hamburger{position:absolute;top:130;left:35;width:30px;height:2px;background:rgb(255, 255, 255);display:block;transform-origin:center;transition:.5s ease-in-out;z-index:9999;}
label .hamburger:after,label .hamburger:before{transition:.4s ease-in-out;content:"";position:absolute;display:block;width:100%;height:100%;background:rgb(253, 253, 253); z-index:9999;}
label .hamburger:before{top:-10;}
label .hamburger:after{bottom:-10;}
label input {display:none;}
label input:checked+.menu{box-shadow:0 0 0 100vw #55B646,0 0 0 100vh #55B646;border-radius:0;z-index:9998;}
label input:checked+.menu .hamburger{transform: rotate(45deg);}
label input:checked+.menu .hamburger:after{transform: rotate(90deg); bottom:0;}
label input:checked+.menu .hamburger:before{-webkit-transform:rotate(90deg);transform:rotate(90deg);top:0;}
label input:checked+.menu+.nav ul li{opacity: 1;visibility:visible;}
.nav ul li {display:block;position:fixed;top:50%;left:50%;transform:translate(-50%, -50%);opacity:0;transition:.8s 0s ease-in-out;z-index:9999;visibility:hidden;}
.nav ul li:nth-child(1){top:20%;}
.nav ul li:nth-child(2){top:40%;}
.nav ul li:nth-child(3){top:60%;}
.nav ul li:nth-child(4){top:80%;}
.mav a {font-size:4.5vw;display:block;color:rgb(255, 255, 255);text-decoration:none;}
.line a{font-size:5vw;text-align:center;color:rgb(255, 255, 255);overflow:hidden;padding:10px 20px;display:block;position:relative;z-index:1;text-decoration:none;}
.line a .top{position:absolute;top:0;left:0;z-index:-1;transition:transform 600ms;width:100%;background:rgb(255, 255, 255);transform:scale(0, 0);height:4px;transform-origin:left top;transition-delay:0ms;}
.line a .right{position:absolute; top:0;right:0;z-index:-1;transition:transform 600ms;content: "";width:4px;background:rgb(255, 255, 255);transform:scale(0, 0);height:100%;transform-origin:right top;transition-delay:0ms; display:block;}
.line a .bottom{position:absolute;bottom:0;right:0;z-index:-1;transition:transform 600ms;content:"";width:100%;background:rgb(255, 255, 255);transform:scale(0, 0);height:4px;transform-origin:right bottom;transition-delay:0ms; display:block;}
.line a .left{position:absolute;top:0;left:0;z-index:-1;transition:transform 600ms;content:"";width:4px;background:rgb(255, 255, 255);transform:scale(0, 0);height:100%;transform-origin:left bottom;transition-delay:0ms; display:block;}
.line a::after{position:absolute;top:0;right:0;bottom:0;left:0;z-index:-2;content:"";}
/* hover */
.line a:hover{background-color:rgb(255, 255, 255);color:#55B646;transition:all 1s;}
.line a:hover .top{transform-origin:left top;transform:scale(1, 1);content:"";}
.line a:hover .right{transform-origin:left top;transform:scale(1, 1);}
.line a:hover .bottom{transform-origin:right bottom;transform:scale(1, 1);}
.line a:hover .left{transform-origin:left bottom;transform:scale(1, 1); }
@media screen and (max-width:800px) {
 .line a{font-size:10vw;}
}
@media screen and (max-width:650px) {
  label input:checked+.menu{box-shadow:0 0 0 100vw #55B646,0 0 0 100vh #55B646;}
  .line a:hover{color:#55B646;}
  .line a{font-size:8vw; padding:10px 1px;}
}

/*----------------------------------------- 院長挨拶 -----------------------------------------*/
.intyo-aisatsu{position:relative;width:100%;height:55vw;}
.intyo-name,.intyo-aisatsu p,.intyo-aisatsu img,.intyo-main{position:absolute;}
.intyo-aisatsu p{top:0;left:0;width:100%;height:42vw;background-color:#d9fdd4;z-index:-1;border-radius:0 0 800px 600px;}
.intyo-aisatsu img{width:40%;left:5%;top:14vw;z-index:0;}
.intyo-main{margin:7% 0;font-size:2vw;letter-spacing:1vw;line-height:3.5vw;right:10%;width:50%;z-index:1;}
.intyo-name{top:35vw;right:5vw;z-index:1;font-size:2vw;}
@media screen and (max-width:700px) {
  .intyo-main{margin:7% 7%;font-size:12px;letter-spacing:10px;line-height:22px;width:86%;left:0;}
  .intyo-aisatsu p{height:55vw;border-radius:0;background:linear-gradient(#c2ffb8, #fff);}
  .intyo-name{top:47vw;left:10vw;z-index:1;font-size:12px;}
  .intyo-aisatsu img{left:5%;top:25vw;z-index: 0;margin:0 0 0 50%;}
}

/*----------------------------------------- 施術説明患者向け -----------------------------------------*/
.kanja { width: 100%; height: auto; overflow: hidden; margin-bottom:10vw; }
.kanja h1 { text-align: center;  font-size: 3vw; margin: 3vw 0; }
.kanja p { width: 100%; font-size: 2vw; line-height:3.5vw;letter-spacing:.5vw; margin-left: 15vw; }
.kanja-kuwashiku{text-align:center;padding:1vw 3vw;border-radius:1vw;background-color:#ffffff;display:inline-block;width:30vw;z-index:1500;position:relative;box-shadow:0 .1vw .4vw .3vw rgb(99, 194, 96);font-size:2vw;letter-spacing:1vw;margin: 5vw 0 3vw 60vw;}
.kanja-kuwashiku:hover{background-color:rgb(5, 90, 12);color:#fff;transition:.4s;box-shadow:none;}

@media screen and (max-width: 700px) {
  .kanja { margin-top: 8vw; }
  .kanja h1 { font-size: 20px; }
  .kanja p { font-size: 2.5vw; line-height:4vw;letter-spacing:.7vw; margin-left: 6vw; }
}
@media screen and (max-width: 400px) {
  .kanja p { font-size: 12px; width: 80%; margin: 0 0 0 10%; } 
  .kanja-kuwashiku { width: 35vw; margin: 5vw 0 3vw 55vw;}
}
@media screen and (max-width: 363px) {
  .kanja p { width: 85%; margin: 0 0 0 8%; } 
}

/*----------------------------------------- アクセス -----------------------------------------*/
.access{width:100%;overflow:hidden;}
.access iframe{width:40vw;margin:5vw;height:35vw;display:inline-block;}
.other h1,.access h1,.choice-title,.choice-title-ph,.care-title{font-size:10vw;letter-spacing:7vw;color:#858585;opacity:.1;}
.other h1,.access h1{margin-left:5%;}
.other h2,.access h2,.choice-title-ja,.choice-title-ja-ph,.care-title-ja{font-size:3vw;letter-spacing:3vw;color:#000000;}
.other h2,.access h2{margin-left:40%;margin-top:-8%;}
.flex{display:flex;margin-top:5%;}
.ac-zyouho{margin-top:4.5vw;margin-left:5vw;width:45vw;font-size:2vw;}
.ac-zyouho p{line-height:3.5vw;letter-spacing:.5vw;}
.sinsatuhyou{background-color:#51A544;color:#fff;border:1px solid #fff;text-align:center;margin-top:10%;}
.sinsatuhyou th,.sinsatuhyou tr,.sinsatuhyou td{padding:1vw .5vw;border:1px solid #fff;}
.sinsatuhyou th{font-weight:100;}
@media screen and (max-width:700px){
  .access iframe{width:80vw;margin:5vw 10vw 7vw;height:50vw;display:block;}
  .flex{display:block;}
  .ac-zyouho{margin:auto;padding:2% 0;width:100%;font-size:3.5vw;background:linear-gradient(#fff,#c2ffb8);display:block;}
  .ac-zyouho p{line-height:5vw;letter-spacing:.8vw;margin-left:12vw;}
  .sinsatuhyou{margin:2vw 7vw 2vw auto;width:86vw;}
  .flex{display: block !important;}
  .other h2,.access h2,.choice-title-ja,.choice-title-ja-ph,.care-title-ja{font-size:20px;}
}

/*----------------------------------------- 休診日 -----------------------------------------*/
.kyusin{width:100%;height:35vw;background-attachment:fixed;background-size:cover;background-position:center;background-image:url(./img/HAIKEI1.JPEG);position: relative;}
.kyusin::after{content:'';background-color:rgba(57, 77, 63, 0.534);position:absolute;left:0;right:0;top:0;bottom:0;}
.kyusin h1,.kyusin h2{position:absolute;color:#fff;z-index:150;}
.kyusin h1{top:6vw;left:5vw;font-size:3.2vw;}
.kyusin h2{top:15vw;left:9vw;font-size:2vw;letter-spacing:1vw;line-height:4vw;width:60vw;margin:0 auto;}
.slideee,.botan{z-index:100;position:absolute;}
.slideee,.slideee img{top:-5vw;left:55vw;width:35vw;}

.botan{z-index:100;position:absolute;top:29.5vw;left:15vw;}
.botan-oks{width:1.5vw;height:1.5vw;margin-right:2vw;border-radius:50%;}

@media screen and (max-width:700px){
  .kyusin{height:80vw;}
  .kyusin h1,.kyusin h2{left:50vw;transform:translate(-50%,-50%);}
  .kyusin h1{font-size:4vw;top:7vw;}
  .kyusin h2{font-size:3.5vw;line-height:6vw;top:72vw;text-align:center;}
  .slideee,.slideee img{top:0;left:20vw;width:60vw;}
  .botan{top:51vw;left:13.7vw;}
  .botan-oks{width:10vw;height:1vw;margin-left:4vw;}
}

@media screen and (min-width:1200px){
  .botan{top:30vw;left:15vw;}

}


/*----------------------------------------- 選ばれる理由 -----------------------------------------*/
.choice-title,.choice-title-ph{margin:2vw 0 3vw 30vw;}
.choice-title-ja,.choice-title-ja-ph{margin:-10vw 0 0 12vw;}
.choice-flex-box{width:100%;height:40vw;text-align: center;background:linear-gradient(#fff 10%,#fff9be 20%,#fff);margin-top:3vw;}
.choice-box{width:30vw;height:35vw;display:inline-block;margin:2vw 1vw;}
.choice-box h1{border-radius:50%;background:#fff388;width:5vw;height:5vw;display:inline-block;padding:1vw 1vw;font-size: 2vw;}
.choice-box h3{width:20vw;height:.5vw;background-color: #f3e190;margin:1.5vw auto;}
.choice-box p{margin:2vw auto 0;font-size:2vw;}
.choice-box img{width:25vw;margin:0 auto;}
.choice-box h2{width:25vw;margin:0 1.9vw 0 3.1vw;overflow-wrap:break-word;font-size:1.8vw;letter-spacing:.5vw;text-align:left;}
.choice-title-ja-ph{margin-bottom:8vw;}
.choice-ph{display:none;}
.choice-box-ph{width:100vw;padding:1vw 0;position:relative;background:linear-gradient(#fff,#f7ed98,#fff);}
.choice-box-ph img{width:32vw;margin:0 7vw 0 5vw;display:inline-block;}
.choice-box-ph h2{overflow-wrap:break-word;width:50vw;display:inline-block;vertical-align:top;margin-top:5vw;font-size:2vw;line-height:3.5vw;letter-spacing:1.4vw;}
.choice-box-ph p{text-align:center;border-bottom:1px solid #858585;margin:5vw auto;}

@media screen and (max-width:500px){
  .choice-box-ph h2 { font-size:3vw; line-height:4vw; }
  .choice-box-ph p { font-size:4vw; }
}


/*----------------------------------------- 治療内容 -----------------------------------------*/
.care{margin-top:25vw;overflow:hidden;width:100%;position:relative;height:auto;text-align:center;}
.care-title{letter-spacing:4vw;display:inline-block;width:100%;margin-left:2.5vw;}
.care-title,.care-title-ja{text-align:center;}
.care-title-ja{margin:-7vw auto 10vw;z-index:100;position:relative;}
.care::before,.care::after{position:absolute;left:-35%;width:180%;height:300%;content:"";background-color:#b3ffb9;animation:wave linear 10s infinite;z-index:1;}
.care::before {bottom:-230%;border-radius:50% 50% / 50% 70%;}
.care::after {bottom:-235%;border-radius:40% 70% / 50% 40%;opacity:0.2;animation-delay:1s;}
@keyframes wave {from {transform:rotate(0deg);}to{transform:rotate(360deg);}}
.care-flex-box{display:flex;z-index:100;position:relative;margin:4vw auto;}
.care-box{width:25vw;text-align:center;}
.care-box h1{font-size:2vw;}
.care-box img,.care-box p{margin:2vw auto;}
.care-box img{width:10vw;display:inline-block;}
.care-box p{overflow-wrap:break-word;font-size:2vw;width:20vw;}
.care-kuwasiku{text-align:center;padding:1vw 3vw;border-radius:1vw;background-color:#ffffff;display:inline-block;width:30vw;z-index:1500;position:relative;box-shadow:0 .1vw .4vw .3vw rgb(99, 194, 96);font-size:2vw;margin-bottom:5vw;letter-spacing:1vw;}
.care-kuwasiku:hover{background-color:rgb(5, 90, 12);color:#fff;transition:.4s;box-shadow:none;}

@media screen and (max-width:700px){
  .choice{display:none;}
  .choice-ph{display:block;}
  .care{margin-top:8vw;}
  .care::before,.care::after{left:-80%;animation:none;height:300%;}
  .care-box{width:40vw;display:inline-block;}
  .care-flex-box{display:inline-block !important;}
  .care::before{bottom:-230%;border-radius:200%;}
  .care::after{bottom:-235%;border-radius:0;}
  .care-box p{overflow-wrap:break-word;font-size:2vw;width:30vw;margin-bottom:6vw;}
  .care-kuwasiku{width:40vw;}
}
@media screen and (max-width:500px){
  .care-box img { width:15vw; }
  .care-box h1 { font-size:3vw; }
  .care-box p { font-size:3vw; }
  .care-kuwasiku { box-shadow:0 0.7vw 1.4vw 0.3vw rgb(99 194 96); font-size:2.7vw; }
}


/*----------------------------------------- その他サービス -----------------------------------------*/
.other{margin-bottom: 5vw;}
.swiper-container{width:80vw;height:50vw;}
.swiper-wrapper{width:80vw;margin:7vw auto;}
.swiper-wrapper h3,p{color:#000000;}
.swiper-wrapper h3{font-size:3vw;text-align:left;padding:8vw 0 0 10vw;letter-spacing:1.8vw;}
.swiper-wrapper p{font-size:2.5vw;margin:5vw 10% 0;letter-spacing:1vw;width:80%;}
.swiper-slide{color:#ffffff;width:100vw;text-align:center;background:center;background-repeat:no-repeat;background-size:100%;}
.swiper-slide a:hover{text-decoration: underline .2vw solid #55B646;}
.swiper-slide:nth-child(4n+1){background-image:url(./img/7.png);}
.swiper-slide:nth-child(4n+2){background-image:url(./img/8.png);}
.swiper-slide:nth-child(4n+3){background-image:url(./img/9.png);}
.bg-mask{background: rgba(255, 255, 255, 0.6);height: 100%;}

/*----------------------------------------- フッター -----------------------------------------*/
.footer{width:100%;background-color:#40c72c;color:#fff;position:relative;}
.footer-title{font-size: 4vw;padding: 4vw 0 6vw 8vw;letter-spacing:2vw;}
.big-balls,.small-balls{border-radius:50%;background-color:#fff;position:absolute;}
.big-balls{top:7vw;left:65vw;width:3vw;height:3vw;box-shadow:-59vw 32vw #fff;}
.small-balls{top:5vw;left:69vw;width:1.5vw;height:1.5vw;box-shadow:-66vw 30vw #fff;}
.footer ul li{justify-content: space-around;display:inline-block;margin:5vw 2vw 7vw 2vw;font-size:3vw;letter-spacing:1vw;}
.footer ul{width:90vw;text-align:center;margin:auto;}
.footer h3{font-size:2.2vw;text-align:right;margin:1.5vw 3vw 0 0;}
.footer-tel{padding-bottom:2.2vw;margin:0;}
.footer li:hover{text-decoration:underline .2vw solid black;}
.copyright{text-align:right;margin-right:1vw;color:#fff;font-size:1.5vw;}

@media screen and (max-width:700px){
  .footer ul{width:96vw;}
  .footer ul li{display:block;margin:8vw 3vw 10vw 3vw;font-size:3vw;}
  .footer ul{width:80vw;text-align:center;margin: auto;}
  .big-balls{box-shadow:-47vw 50vw #fff;}
  .small-balls{box-shadow:-54vw 48vw #fff;}
}

@media screen and (max-width:500px){
  .footer-title { font-size:5vw; }
  .footer ul li { font-size:4vw; }
  .footer h3 { font-size:3vw; }
}


/*------------------- js用 -------------------*/
.fadeLeft{animation-name:fadeLeftAnime;animation-duration:1.8s;animation-fill-mode:forwards;opacity:0;}
@keyframes fadeLeftAnime{
  from {transform: translateX(-100px);}
  to {opacity: 1;transform: translateX(0);}}
/* アニメーション設定 */
.scr-target {opacity: 0;transform: translate3d(0, 30px, 0);}
.scr-target.is-active {opacity: 1;transform: translate3d(0, 0, 0);transition: 1.7s;}
/* 時間差ふわっと */
.load-fade {opacity: 0;visibility: hidden;transition: all 4s;}
.load-fade.is-show {opacity: 1;visibility: visible;}