/* リセット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,main { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;}
main{box-shadow:0 0 0;}
*{box-sizing:border-box;}
a{text-decoration:none;color:#000000;}
li{list-style:none;}
body{background:#fff;width:100%;height:auto;font-family:sans-serif;}
.rel{position:relative;}
.ab{position:absolute;}
.max{max-width:1300px;margin:0 auto;}
.bold{font-weight:bold;}

p,summary,a{font-size:16px;letter-spacing:.1rem;font-weight:normal;line-height:1.8rem;}
h1{font-size:27px;letter-spacing:.1rem;font-weight:normal;}
h2{font-size:25px;letter-spacing:.1rem;font-weight:normal;}
h3{font-size:20px;letter-spacing:.1rem;font-weight:normal;}
h4,h5,h6{font-size:15px;letter-spacing:.1rem;font-weight:normal;}

@media screen and (min-width:1400px){
  p,summary,a{font-size:17px;}
}
@media screen and (max-width:1150px){
  p,summary,a{font-size:14px;line-height:1.5rem;}
}
@media screen and (max-width:1050px){
  p,summary,a{font-size:13px;}
  h1{font-size:20px;}
  h2{font-size:19px;}
  h3{font-size:18px;}
  h4,h5,h6{font-size:17px;}
}
@media screen and (max-width:1050px){
  p,summary,a{line-height:1.3rem;}
}
@media screen and (max-width:900px){
  p,summary,a{font-size:15px;line-height:1.4rem;}
  h1{font-size:19px;}
  h2{font-size:18px;}
  h3{font-size:17px;}
  h4,h5,h6{font-size:16px;}
}
@media screen and (max-width:650px){
  p,summary,a{font-size:13px;line-height:1.5rem;}
  h1{font-size:17px;}
  h2{font-size:16px;}
  h3{font-size:15px;}
  h4,h5,h6{font-size:14px;}
}
@media screen and (max-width:500px){
  p,summary,a{font-size:13px;line-height:1.4rem;}
  h1{font-size:16px;}
  h2{font-size:15px;}
  h3{font-size:14px;}
  h4,h5,h6{font-size:13px;}
}
@media screen and (max-width:400px){
  p,summary,a{font-size:13px;}
}
@media screen and (max-width:350px){
  p,summary,a{font-size:12px;}
}
/* aホバー下線 */
.a-hov,.a-hov-b,.a-hov-bb{position:relative;}
.a-hov::after{position:absolute;left:0;content:'';width:100%;height:3px;background:#fff;bottom:-1px;transform:scale(0, 1);transform-origin:left top;transition:transform 0.5s;}
.a-hov-b::after{position:absolute;left:0;content:'';width:80%;height:3px;background:#18C5B7;left:10%;bottom:-1px;transform:scale(0, 1);transform-origin:left top;transition:transform 0.5s;}
.a-hov-bb::after{position:absolute;left:0;content:'';width:100%;height:2px;background:#5A5A5A;bottom:-1px;transform:scale(0, 1);transform-origin:left top;transition:transform 0.5s;}
/* .a-hov-blu::after{position:absolute;left:0;content:'';width:100%;height:2px;background:#18C5B7;bottom:-1px;transform:scale(0, 1);transform-origin:left top;transition:transform 0.5s;} */
.a-hov:hover::after,.a-hov-b:hover::after,.a-hov-bb:hover::after{transform:scale(1, 1);}


/* ハンバーガー */
.hum{position:relative;z-index:9999;display:none;}
@media screen and (max-width:700px){
  .hum{display:block;}
}
/* main{position:relative;z-index:1;overflow:hidden;box-shadow:0 0 50px #000;transition:transform .5s;} */
/* Hamburger menu */
.nav-trigger{position:fixed;z-index:4;top:1.2rem;right:2%;width:44px;height:44px;overflow:hidden;color:transparent;white-space:nowrap;text-indent:100%;}
/* .hum:hover ~ .header{transition:all .4s;background:#000;color:#fff;}
.hum:hover ~ .header a{color:#fff;}
.nav-trigger:hover span,.nav-trigger:hover span::before,.nav-trigger:hover span::after{transition:all .4s;background:#fff;} */
.nav-trigger span,
.nav-trigger span::before,
.nav-trigger span::after{position:absolute;width:36px;height:4px;background:#000000;}
.nav-trigger span{top:calc(50% - 2px);left:calc(50% - 18px);transition:background .3s;}
.nav-trigger span::before,
.nav-trigger span::after{content:'';top:0;left:0;transition:background .3s, transform .3s;}
.nav-trigger span::before{transform:translateY(-12px);}
.nav-trigger span::after{transform:translateY(12px);}
.nav-open .nav-trigger span::before,
.nav-open .nav-trigger span::after{background-color:rgb(255, 255, 255)}
.nav-open .nav-trigger span{background:transparent;}
.nav-open .nav-trigger span::before{transform:rotate(-45deg);}
.nav-open .nav-trigger span::after{transform:rotate(45deg);}
/* ナビ内 */
/* ナビ表示幅 */
.nav-container{position:fixed;z-index:3;width:40%;height:100vh;top:0;right:0;overflow:hidden;transform:translateZ(0);transform:translateX(100%);}
.nav-open .nav-container{transform:translateX(0);}
.nav{padding:0;color:#fff;overflow:auto;height:100%;padding-top:17%;background:linear-gradient(to right, rgb(90 196 249), rgb(48 158 212));}
.nav li{position:relative;}
.nav a{display:block;padding:3rem 0 0 6%;font-weight:bold;text-decoration:none;color:#f6f8f8;transform:translateZ(0);border-bottom:1px solid #fff;width:100%;}
.nav h4{font-size:30px;font-weight:bold;opacity:.6;}
.nav h1{font-size:25px;}
.hum-nav-pp{position:absolute;bottom:0%;right:5%;color:#f6f8f8;}
.nav-open .nav{animation:slide-links .5s .2s backwards;}
@keyframes slide-links{
  0%{opacity:0;transform:translateX(100%);}
  100%{opacity:1;transform:translateX(0);}
}

@media screen and (min-width:1500px){
  .nav-container{width:35%;}
}
@media screen and (max-width:1250px){
  .nav-trigger::before{font-size:20px;}
}
@media screen and (max-width:1050px){
  .nav-trigger::before{font-size:20px;top:2rem;left:-1rem;}
  .nav-open .nav-trigger::before{left:-1.2rem;}
}
@media screen and (max-width:950px){
  .nav-container{width:60%;}
}
@media screen and (max-width:700px){
  .nav-trigger{width:4.5rem;}
  .nav-trigger::before{font-size:17px;}
  .nav-container{width:70%;}
}
@media screen and (max-width:500px){
  .nav-open .nav-trigger::before{top:1.3rem;}
  .nav-container{width:80%;}
  .nav-trigger{width:3.5rem;top:.7rem;}
  .nav-trigger::before{font-size:15px;top:2.5rem;left:-.5rem;}
  .nav-open .nav-trigger::before{top:1.9rem;left:-.8rem;}
  .nav h4{font-size:25px;}
  .nav h1{font-size:20px;}
}
@media screen and (max-width:430px){
  .nav-container{width:85%;}
}


/*-------------------- ヘッダー ----------------------*/
.header{width:100%;height:auto;z-index:9999;overflow:hidden;position:fixed;top:0;left:0;}
.menu{display:flex;justify-content:flex-end;align-items:center;margin-top:1%;}
.header li a{display:block;color:#565656;margin:1vw;letter-spacing:.3vw;font-weight:bold;}
.hea-me-contact,.hea-me-login{border-radius:5vw;padding:.5vw 2vw;}
.hea-me-contact{background:#fff;}
.hea-me-login{background:#F5CA1F;}
@media screen and (max-width:700px){
  .header{display:none;}
}

/*-------------------- トップ ----------------------*/
.top{width:100%;margin:0 auto;}
.top h6{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(45deg,#2FD2FF,#91F8F8);clip-path:polygon(0% 0%, 200% 0, 0% 100%, 0% 100%);z-index:-1;}

.top-all{width:100%;margin:0 auto;}

.top-up{transform:rotateZ(-13deg);color:#fff;margin-left:5%;}
.top-up img{width:13%;margin-top:1%;}

.top-lr{display:flex;justify-content:center;margin:5% auto 0;}

.top-left{width:40%;text-align:center;margin:0 0 0 8%;}
.top-left img{width:90%;margin:0 auto;object-fit:cover;}
.t-l-a{display:flex;justify-content:center;}
.t-l-t-1,.t-l-t-2{width:40%;text-align:center;margin:0 auto;border-radius:5vw;font-weight:bold;padding:.5vw 0;}
.t-l-t-1{background:#FFFF1B;color:#707070;}
.t-l-t-2{background:#0CD466;color:#fff;}

.top-right{width:50%;margin:2% auto 0;display:flex;justify-content:center;}
.top-right img{width:30%;margin:0 5%;object-fit:cover;}
.top-right .top-ri-img1{margin-top:8%;}
.top-right .top-ri-img2{margin-bottom:8%;}

@media screen and (max-width:1200px){
  .top-all{padding-top:5%;}
  .top-left{width:36%;margin:5% 0 0 11%;}
  .top-lr{margin:0% auto 0;}
}
@media screen and (max-width:950px){
  .top-all{padding-top:10%;}
}
@media screen and (max-width:900px){
  .t-l-a,.t-l-t-1,.t-l-t-2{display:block;}
  .t-l-t-1,.t-l-t-2{width:70%;margin:3% auto;}
}
@media screen and (max-width:700px){
  .top{display:none;}
}

/*-------------------- 携帯版トップ ----------------------*/
.top-res{display:none;overflow:hidden;}
.top-res h6{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(45deg,#2FD2FF,#91F8F8);clip-path:polygon(0% 0%, 390% 0, 0% 100%, 0% 100%);z-index:-1;}
.top-res-all{width:100%;margin:0 auto;}

.top-res-up{transform:rotateZ(-11deg);color:#fff;margin-left:10%;padding-top:10%;}
.top-res-up p{font-size:18px;}

.top-res-left{width:100%;text-align:center;margin:0 auto}
.top-res-left img{width:55%;margin:5% auto 0;object-fit:cover;}

.top-res-right{width:90%;margin:2% auto 0;display:flex;justify-content:center;}
.t-res-l-a{width:50%;margin:10% auto 0;}
.t-res-l-t-1,.t-res-l-t-2{width:90%;font-size:21px;text-align:center;margin:14% auto;border-radius:5vw;font-weight:bold;padding:1.5rem 0;box-shadow:0 3px 2px rgba(0, 0, 0, 0.227); display:block;}
.t-res-l-t-1{background:#FFFF1B;color:#707070;}
.t-res-l-t-2{background:#0CD466;color:#fff;}
.t-res-r-img{width:50%;margin:0 auto;text-align:center;}
.top-res-right img{width:65%;margin:0 5%;object-fit:cover;}

@media screen and (max-width:700px){
  .top-res{display:block;}
}
@media screen and (max-width:600px){
  .top-res-up{margin-left:4%;padding-top:15%;}
  .top-res-up p{font-size:17px;}
  .top-res-left img{width:65%;}
  .t-res-l-t-1,.t-res-l-t-2{width:90%;font-size:18px;padding:1rem 0;}
}
@media screen and (max-width:500px){
  .top-res-up{margin-left:3%;padding-top:18%;}
  .top-res-up p{font-size:14px;}
  .top-res-left img{width:70%;}
  .t-res-l-t-1,.t-res-l-t-2{width:90%;font-size:16px;padding:.8rem 0;}
}
@media screen and (max-width:430px){
  .top-res-up p{font-size:13px;}
  .t-res-l-t-1,.t-res-l-t-2{width:100%;font-size:14px;padding:.5rem 0;}
}


/*-------------------- 温泉アプリと湯と湯とは？ ----------------------*/
.top-what{width:100%;margin:0 auto;display:flex;justify-content:center;align-items:center;}
.t-w-left{width:40%;text-align:center;}
.t-w-left img{width:60%;}
.t-w-right{width:60%;}
.t-w-right h4,.t-w-right p,.t-w-right p a{font-weight:bold;color:#4D4D4D;}
.t-w-right h4{font-size:22px;margin-bottom:5%;}
.t-w-right h4 span{color:#18C5B7;}
.t-w-right p{line-height:2rem;}
.t-w-right p a{color:#0CD466;}

@media screen and (max-width:1100px){
  .top-what{margin:5% auto 0;}
  .t-w-left img{width:50%;}
}
@media screen and (max-width:950px){
  .t-w-left{width:30%;}
  .t-w-left img{width:80%;}
  .t-w-right{width:70%;}
}
@media screen and (max-width:900px){
  .top-what{display:block;text-align:center;}
  .t-w-left{display:flex;justify-content:center;width:100%;}
  .t-w-left img{width:30%;}
  .t-w-right{width:100%;}
  .t-w-right p{display:inline-block;text-align:left;}
}
@media screen and (max-width:700px){
  .top-what{display:none;}
}
/*-------------------- 携帯版、温泉アプリと湯と湯とは？ ----------------------*/
.top-res-what{width:100%;margin:0 auto;overflow:hidden;display:none;}
.t-res-w-up{width:100%;margin:0 auto;text-align:center;}
.t-res-w-up img{width:30%;}
.t-res-w-center{width:100%;margin:0 auto;text-align:center;}
.t-res-w-center h4{font-size:25px;color:#4D4D4D;}
.t-res-w-center span{color:#18C5B7;}
.t-res-w-center p{display:inline-block;text-align:left;color:#4D4D4D;line-height:3rem;margin:3% auto;font-size:17px;}
.t-res-w-down{width:100%;margin:8% auto 0;text-align:center;}
.t-res-w-down h4{font-size:25px;color:#4D4D4D;}
.t-res-w-down span{color:#F38E00;font-size:40px;}
.t-res-w-down p{display:inline-block;text-align:left;color:#4D4D4D;margin:3% auto;font-size:17px;}
.t-res-w-down p a{color:#0CD466;}

@media screen and (max-width:700px){
  .top-res-what{display:block;}
}
@media screen and (max-width:600px){
  .t-res-w-up img{width:40%;}
}
@media screen and (max-width:500px){
  .t-res-w-center h4{font-size:21px;}
  .t-res-w-center p{font-size:15px;}
  .t-res-w-down h4{font-size:21px;color:#4D4D4D;}
  .t-res-w-down span{font-size:30px;}
  .t-res-w-down p{font-size:15px;}
}
@media screen and (max-width:430px){
  .t-res-w-center{width:95%;}
  .t-res-w-center h4{font-size:20px;}
  .t-res-w-center p{font-size:13px;line-height:2.5rem;}
  .t-res-w-down{width:95%;}
  .t-res-w-down h4{font-size:20px;color:#4D4D4D;}
  .t-res-w-down span{font-size:28px;}
  .t-res-w-down p{font-size:13px;}
}



/* 新規会員登録・こんなお悩みありませんか？ */
.top-ch-wo{width:100%;margin:0 auto;overflow:hidden;}
.t-ch-w-img1,.t-ch-w-img2{position:absolute;width:55%;object-fit:cover;z-index:-1;}
.t-ch-w-img1{top:9%;left:-22%;}
.t-ch-w-img2{top:60%;right:-18%;}

@media screen and (max-width:700px){
  .t-ch-w-img1,.t-ch-w-img2{display:none;}
}

/*-------------------- 新規会員登録 ----------------------*/
.top-check{width:100%;margin:3% auto 8%;}
.top-check h6{position:absolute;top:20%;left:0;width:80%;height:300px;background:linear-gradient(to right,#68E0F5,#fff);z-index:-1;}
.t-c-flex{display:flex;justify-content:center;margin:0 auto;}
.t-c-main1,.t-c-main2,.t-c-main3,.t-c-main4{width:20%;height:320px;text-align:center;padding:5% 2%;margin:0 .5%;border-radius:2vw;}
.t-c-main1 p,.t-c-main1 a,.t-c-main2 p,.t-c-main3 p,.t-c-main4 p{color:#4C4C4C;font-weight:bold;}
.t-c-main1 img,.t-c-main2 img,.t-c-main3 img,.t-c-main4 img{width:50%;margin:0 auto;object-fit:cover;position:absolute;top:35%;left:50%;transform:translate(-50%,-50%);}
.t-c-main1,.t-c-main2,.t-c-main3,.t-c-main4{filter:drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.25));}
.t-c-main1::before,.t-c-main2::before,.t-c-main3::before{content:"";position:absolute;top:5.5%;right:-11.5%;width:12%;height:89%;clip-path:polygon(0 0, 0 100%, 100% 50%);}
.t-c-main1{background:#BCFFA4;z-index:5;}
.t-c-main1::before{background:#BCFFA4;}
.t-c-main1 a{background:#FFF71B;padding:.3rem 2rem;margin-top:5%;display:inline-block;border-radius:3vw;color:#707070;}
.t-c-main2{background:#4EFFD6;z-index:4;}
.t-c-main2::before{background:#4EFFD6;}
.t-c-main3{background:#00EBF3;z-index:3;}
.t-c-main3::before{background:#00EBF3;}
.t-c-main4{background:#009ED8;z-index:2;}
.t-c-cont{position:absolute;left:50%;transform:translate(-50%,-50%);width:100%;}
.t-c-main1 .t-c-cont{bottom:0%;}
.t-c-main2 .t-c-cont{bottom:5%;}
.t-c-main3 .t-c-cont{bottom:5%;}
.t-c-main4 .t-c-cont{bottom:15%;}

@media screen and (max-width:1200px){
  .t-c-main1,.t-c-main2,.t-c-main3,.t-c-main4{height:300px;}
}
@media screen and (max-width:1100px){
  .top-check h6{height:270px;}
  .t-c-main1,.t-c-main2,.t-c-main3,.t-c-main4{height:270px;}
}
@media screen and (max-width:1000px){
  .top-check h6{height:230px;}
  .t-c-main1,.t-c-main2,.t-c-main3,.t-c-main4{height:240px;}
}
@media screen and (max-width:900px){
  .t-c-main1,.t-c-main2,.t-c-main3,.t-c-main4{width:23%;height:230px;}
}
@media screen and (max-width:700px){
  .t-c-flex{display:block;padding-top:4%;}
  .top-check h6{top:0;width:100%;height:80%;background:linear-gradient(to bottom,#68E0F5,#fff);}
  .t-c-main1,.t-c-main2,.t-c-main3,.t-c-main4{width:80%;height:200px;margin:4% auto 0;display:flex;justify-content:center;align-items:center;border-radius:5vw;padding:0 1rem;}
  .t-c-main1 img,.t-c-main2 img,.t-c-main3 img,.t-c-main4 img,.t-c-cont{position:static;transform:none;}
  .t-c-main1 p,.t-c-main1 a,.t-c-main2 p,.t-c-main3 p,.t-c-main4 p{font-size:22px;}
  .t-c-img,.t-c-cont{width:50%;}
  .t-c-img1 img{width:60%;}
  .t-c-main1,.t-c-main2,.t-c-main3,.t-c-main4{filter:drop-shadow(0px 5px 4px rgba(0, 0, 0, 0.5));}
  .t-c-main1::before,.t-c-main2::before,.t-c-main3::before{right:3%;width:94%;height:100%;clip-path:polygon(0 0, 50% 20%, 100% 0%);top:98.7%;}
}
@media screen and (max-width:600px){
  .t-c-main1,.t-c-main2,.t-c-main3,.t-c-main4{height:180px;}
  .t-c-main1 p,.t-c-main1 a,.t-c-main2 p,.t-c-main3 p,.t-c-main4 p{font-size:18px;}
}
@media screen and (max-width:500px){
  .t-c-main1,.t-c-main2,.t-c-main3,.t-c-main4{height:150px;}
  .t-c-main1 p,.t-c-main1 a,.t-c-main2 p,.t-c-main3 p,.t-c-main4 p{font-size:15px;}
}
@media screen and (max-width:430px){
  .t-c-main1,.t-c-main2,.t-c-main3,.t-c-main4{width:90%;}
  .t-c-main1 img,.t-c-main2 img,.t-c-main3 img,.t-c-main4 img{width:50%;}
  .t-c-img1 img{width:60%;}
  .t-c-img{width:40%;}
  .t-c-cont{width:60%;}
}



/*-------------------- こんなお悩みありませんか？ ----------------------*/
.top-worries{width:100%;margin:0 auto;text-align:center;}
.top-worries h3{color:#3D3D3D;font-size:25px;}
.top-worries h3 span{color:#FF8031;}
.t-w-center-img{width:330px;object-fit:cover;margin:5% auto 2%;}
.t-w-com1,.t-w-com2,.t-w-com3,.t-w-com4{position:absolute;display:flex;justify-content:center;align-items:center;color:#4D4D4D;background:#EAEAEA;border-radius:1.5vw;padding:.8rem .3rem;}
.t-w-com1,.t-w-com2,.t-w-com3{width:25%;}
.t-w-com4{width:28%;}
.t-w-com1 img,.t-w-com2 img,.t-w-com3 img,.t-w-com4 img{width:10%;object-fit:cover;}
.t-w-com1{top:25%;left:15%;}
.t-w-com2{top:57%;left:10%;}
.t-w-com3{top:40%;right:15%;}
.t-w-com4{top:70%;right:10%;}

@media screen and (max-width:1100px){
  .t-w-center-img{width:300px;}
}
@media screen and (max-width:900px){
  .top-worries h3{font-size:22px;}
  .t-w-center-img{width:230px;}
  .t-w-com1,.t-w-com2,.t-w-com3{width:30%;}
  .t-w-com4{width:35%;}
  .t-w-com1{left:8%;}
  .t-w-com2{left:8%;}
  .t-w-com3{right:8%;}
  .t-w-com4{right:4%;}
}
@media screen and (max-width:850px){
  .top-worries p{font-size:12px;}
  .t-w-center-img{width:210px;}
  .t-w-com4{width:35%;}
  .t-w-com1{left:8%;}
  .t-w-com2{left:8%;}
  .t-w-com3{right:8%;}
  .t-w-com4{right:4%;}
}
@media screen and (max-width:700px){
  .top-worries{margin:0 auto 6%;}
  .top-worries h3{font-size:25px;}
  .t-w-center-img{position:absolute;bottom:-10%;right:0;width:150px;}
  .t-w-com1,.t-w-com2,.t-w-com3,.t-w-com4{position:static;width:50%;margin:3% auto;border-radius:5vw;}
  .top-worries p{font-size:15px;}
}
@media screen and (max-width:600px){
  .t-w-com1,.t-w-com2,.t-w-com3,.t-w-com4{width:60%;}
}
@media screen and (max-width:500px){
  .top-worries h3{font-size:22px;}
  .top-worries p{font-size:13px;}
  .t-w-center-img{bottom:-16%;right:-2%;width:120px;}
  .t-w-com1,.t-w-com2,.t-w-com3,.t-w-com4{width:70%;padding:.5rem .3rem;}
}
@media screen and (max-width:430px){
  .top-worries h3{font-size:20px;}
  .t-w-center-img{right:-3%;width:110px;}
  .t-w-com1,.t-w-com2,.t-w-com3,.t-w-com4{margin:5% auto;}
}

/*-------------------- と湯と湯だったら ----------------------*/
.top-toyutoyu{width:100%;margin:0 auto;overflow:hidden;text-align:center;background:#27ACAC;z-index:-1;}
.top-toyutoyu:before{content:"";position:absolute;top:-1.5%;left:50%;width:15%;height:100px;background:#fff; clip-path:polygon(0 0, 50% 100%, 100% 0%);transform:translate(-50%,0); z-index:2;}
.top-toyutoyu:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-image:radial-gradient(#a0a0a0 10%, transparent 15%), radial-gradient(#a0a0a0 10%, transparent 15%);background-position:0 0, 15px 15px;background-size:15px 15px;z-index:1;}
.t-tyty-main{margin:8% auto 5%;z-index:10;}
.t-tyty-img{width:500px;margin:0 auto;object-fit:cover;}
.t-tyty-contents{width:70%;display:flex;align-items:center;background:#fff;margin:2% auto;padding:2rem 1rem;border-radius:1vw 1vw 0 1vw;box-shadow:4px 4px 10px rgba(0, 0, 0, 0.104);}
.ty-cont1::before,.ty-cont2::before,.ty-cont3::before,.ty-cont4::before,.ty-cont5::before,.ty-cont6::before{position:absolute;font-size:70px;top:0%;left:-4%;color:#FFEB55;font-weight:bold;}
.ty-cont1::before{content:"01";}
.ty-cont2::before{content:"02";}
.ty-cont3::before{content:"03";}
.ty-cont4::before{content:"04";}
.ty-cont5::before{content:"05";}
.ty-cont6::before{content:"06";}
.ty-cont-left{width:65%;text-align:left;color:#4D4D4D;margin-left:10%;}
.ty-cont-left h3{font-size:25px;}
.ty-cont-left p{margin-left:2%;}
.ty-p{margin:5% auto;}
.ty-ps{font-size:13px;}
.ty-cont-right{width:35%;}
.ty-cont-right img{width:75%;object-fit:cover;}

@media screen and (max-width:1200px){
  .t-tyty-img{width:450px;}
  .t-tyty-contents{width:75%;}
}
@media screen and (max-width:1100px){
  .t-tyty-contents{width:81%;}
}
@media screen and (max-width:900px){
  .top-toyutoyu:before{width:20%;height:70px;}
  .t-tyty-img{width:400px;}
  .t-tyty-contents{width:90%;}
  .ty-cont1::before,.ty-cont2::before,.ty-cont3::before,.ty-cont4::before,.ty-cont5::before,.ty-cont6::before{top:-7%;left:-5%;font-size:60px;}
  .ty-cont-left{width:75%;margin-left:8%;}
  .ty-cont-left h3{font-size:22px;}
  .ty-cont-left p{margin-left:0%;}
  .ty-cont-right{width:25%;}
  .ty-cont-right img{width:70%;}
}
@media screen and (max-width:700px){
  .top-toyutoyu:after{background-position:0 0, 30px 30px;background-size:30px 30px;}
  .t-tyty-main{margin:15% auto 5%;}
  .t-tyty-img{width:450px;}
  .t-tyty-contents{margin:7% auto;width:80%;border-radius:2vw 2vw 0 2vw;}
  .ty-cont-left{width:90%;margin:0 auto;text-align:center;}
  .ty-cont-left h3{font-size:25px;}
  .ty-p{margin:5% auto;display:inline-block;text-align:left;}
  .ty-ps{font-size:13px;text-align:left;width:66%;}
  .ty-cont-right{width:25%;position:absolute;right:-3%;bottom:-13%;}
}
@media screen and (max-width:600px){
  .ty-cont-right{bottom:-10%;}
  .ty-cont-right img{width:90%;}
}
@media screen and (max-width:500px){
  .top-toyutoyu:before{width:30%;height:80px;}
  .t-tyty-img{width:350px;}
  .t-tyty-contents{width:85%;}
  .ty-cont-left h3{font-size:21px;}
  .ty-cont1::before,.ty-cont2::before,.ty-cont3::before,.ty-cont4::before,.ty-cont5::before,.ty-cont6::before{top:-12%;left:-8%;font-size:50px;}
}
@media screen and (max-width:430px){
  .top-toyutoyu:before{width:30%;height:80px;}
  .t-tyty-main{margin:25% auto 5%;}
  .t-tyty-img{width:300px;}
  .t-tyty-contents{width:90%;}
  .ty-cont-left{width:95%;}
  .ty-cont-left h3{font-size:19px;}
  .ty-cont1::before,.ty-cont2::before,.ty-cont3::before,.ty-cont4::before,.ty-cont5::before,.ty-cont6::before{left:-4%;font-size:45px;}
  .ty-ps{width:90%;}
}
@media screen and (max-width:360px){
  .top-toyutoyu:before{width:40%;}
  .ty-cont-left h3{font-size:17px;}
  .ty-cont1::before,.ty-cont2::before,.ty-cont3::before,.ty-cont4::before,.ty-cont5::before,.ty-cont6::before{left:-4%;font-size:45px;}
}

/*-------------------- プラン説明 ----------------------*/
.top-plan{width:100%;margin:0 auto;overflow:hidden;color:#6B6B6B;padding:5% 0 0;}
.top-plan:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-image:radial-gradient(#eeeeee 10%, transparent 15%), radial-gradient(#eeeeee 10%, transparent 15%);background-position:0 0, 15px 15px;background-size:15px 15px;z-index:-1;}
.top-plan .t-p-title,.top-plan h2{margin-left:8%;}
.top-plan h2{background:#F3BA00;display:inline-block;color:#fff;padding:.8rem 2rem;border-radius:3vw;margin-top:2%;}
.t-p-all{width:90%;margin:3% auto;display:flex;justify-content:center;flex-wrap:wrap;}
.t-p-cont{width:45%;margin:2% auto;color:#767676;}
.t-p-cont h1{margin-bottom:1%;}
.t-p-cont p{padding:1.8rem 2rem;border-radius:2vw 2vw 0 2vw;}
.t-p-cont p::before{position:absolute;border:3px solid #fff;content:"";top:8px;bottom:8px;left:8px;right:8px;border-radius:2vw 2vw 0 2vw;}
.t-p-cont1 p{background:#BCFFA4;}
.t-p-cont2 p{background:#00EBF3;}
.t-p-cont3 p{background:#4EFFD6;}
.t-p-cont4 p{background:#009ED8;color:#fff;}

@media screen and (max-width:1300px){
  .t-p-cont{width:48%;}
}
@media screen and (max-width:1000px){
  .t-p-all{width:95%;}
}
@media screen and (max-width:950px){
  .t-p-cont p{padding:1.8rem 1.5rem;}
}
@media screen and (max-width:900px){
  .t-p-all{display:block;}
  .t-p-cont{width:80%;margin:3% auto;}
  .t-p-cont p{padding:3rem 2rem;}
}
@media screen and (max-width:700px){
  .top-plan{text-align:center;}
  .top-plan .t-p-title,.top-plan h2{margin-left:0;}
  .top-plan .t-p-title{font-size:25px;}
  .top-plan h2{border-radius:5vw;}
  .t-p-all{text-align:left;}
}
@media screen and (max-width:500px){
  .top-plan .t-p-title{font-size:22px;}
  .top-plan h2{margin:5% auto;}
  .t-p-cont{width:90%;margin:4% auto;}
}
@media screen and (max-width:430px){
  .top-plan .t-p-title{font-size:20px;}
  .top-plan h2{font-size:14px;padding:.5rem 1.5rem;}
}

/*-------------------- 料金----------------------*/
.top-price{width:100%;margin:3% auto;overflow:hidden;}
.t-p-price-all{width:80%;margin:0 auto;background:#152453;text-align:center;padding:3% 0;}
.t-p-price-all h1{display:inline-block;color:#fff;margin:0 auto 3%;}
.t-p-price-all h1::before{content:"";position:absolute;bottom:-3px;left:10%;width:80%;height:3px;background:#FFE031;}
/* ここから白枠内 */
.t-p-plan-all{width:95%;margin:0 auto;background:#fff;padding:3% 0 6%;}
.t-p-plan-all .t-p-back1{position:absolute;top:0;right:0;width:30%;object-fit:cover;}
.t-p-plan-all .t-p-back2{position:absolute;bottom:0;left:0;width:30%;object-fit:cover;}
/* ここからプランタイトル */
.t-p-plan{width:95%;margin:5% auto 0;}
.t-p-plan h1{color:#525252;}
.t-p-sub-title1{display:flex;align-items:baseline;padding:0 0 1% 3%;}
.t-p-sub-title1 h2{color:#525252;}
.t-p-sub-title1 p{margin-left:3%;color:#999999;}
.t-p-sub-title1 span{font-size:20px;}
/* ここからプラン内容 */
.t-p-main1{display:flex;justify-content:center;}
.t-p-ma{width:23%;margin:0 .5%;}
.t-p-ma-1,.t-p-ma-2,.t-p-ma-3,.t-p-ma-4{box-shadow:4px 4px 8px #B5B5B5;}
/* 角面取り */
.t-p-ma-1{border-radius:1vw 0 0 1vw;}
.t-p-ma-1 h3{border-radius:1vw 0 0 0;}
.t-p-ma-1 .t-p-m-pp{border-radius:0 0 0 1vw;}
.t-p-ma-4{border-radius:0 1vw 1vw 0;}
.t-p-ma-4 h3{border-radius:0 1vw 0 0;}
.t-p-ma-4 .t-p-m-pp{border-radius:0 0 1vw 0;}
/* ----- */
.t-p-ma-1 h3,.t-p-ma-2 h3,.t-p-ma-3 h3,.t-p-ma-4 h3{color:#525252;padding:.5rem 0;}
.t-p-ma-1 h3{background:#FFD78C;}
.t-p-ma-2 h3{background:#FFFB8C;}
.t-p-ma-3 h3{background:#8CFFAE;}
.t-p-ma-4 h3{background:#8CEEFF;}
.t-p-ma-1 p,.t-p-ma-2 p,.t-p-ma-3 p,.t-p-ma-4 p{color:#525252;}
.t-p-ma-1 span,.t-p-ma-2 span,.t-p-ma-3 span,.t-p-ma-4 span{font-size:21px;color:#DB4B4B;}
.t-p-m-pp{background:#FBF6E4;padding:1rem;}
.t-p-main1 .left{text-align:left;color:#999999;font-size:13px;margin-top:2%;}
.t-p-main1 .right{text-align:right;}

@media screen and (max-width:1200px){
  .t-p-price-all{width:85%;}
}
@media screen and (max-width:1100px){
  .t-p-price-all{width:90%;}
  .t-p-ma-1 span,.t-p-ma-2 span,.t-p-ma-3 span,.t-p-ma-4 span{font-size:20px;}
}
@media screen and (max-width:900px){
  .t-p-price-all{width:100%;}
  .t-p-plan{width:98%;}
}
@media screen and (max-width:650px){
  .t-p-plan2,.t-p-plan3{display:none;}
  .t-p-sub-title1{display:none;}
  .t-p-plan-all .t-p-back1{width:40%;}
  .t-p-plan-all .t-p-back2{width:40%;}
  .t-p-plan-all{width:80%;}
  .t-p-main1{display:block;}
  .t-p-ma{width:70%;margin:3% auto;}
}
@media screen and (max-width:500px){
  .t-p-plan-all{width:90%;}
  .t-p-ma{width:80%;margin:3% auto;}
  .t-p-ma-1 span, .t-p-ma-2 span, .t-p-ma-3 span, .t-p-ma-4 span{font-size:18px;}
}


/*-------------------- よくある質問 ----------------------*/
.top-question{width:100%;margin:0 auto;padding:3% 0;overflow:hidden;background:#F4F4F4;z-index:-1;}
.top-question:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-image:radial-gradient(#d1d1d1 10%, transparent 15%), radial-gradient(#d1d1d1 10%, transparent 15%);background-position:0 0, 15px 15px;background-size:15px 15px;z-index:1;}
.t-ques-all{z-index:10;}
.top-question h1{color:#767676;text-align:center;margin:0 auto 3%;}
.t-ques-cont{width:70%;margin:1% auto;color:#fff;}
.t-q-q{background:#31BBD3;padding:1rem 2rem 1rem 3rem;word-break: break-all;}
.t-q-q::before{content:"Q.";position:absolute;top:1rem;left:1.5rem;}
.t-q-q::after{position:absolute;border:1px solid #fff;content:"";top:8px;bottom:8px;left:8px;right:8px;}
.t-q-a{background:#7EE3F5;padding:1rem 2rem 1rem 3rem;word-break: break-all;}
.t-q-a::before{content:"A.";position:absolute;top:1rem;left:1.5rem;}
.t-q-a::after{position:absolute;border:1px solid #fff;content:"";top:8px;bottom:8px;left:8px;right:8px;}

@media screen and (max-width:1100px){
  .t-ques-cont{width:80%;}
}
@media screen and (max-width:500px){
  .t-ques-cont{width:90%;}
}

/*-------------------- フッター ----------------------*/
footer{width:100%;margin:0 auto;overflow:hidden;text-align:center;background:#E9E9E9;}
footer img{width:15%;margin:0 auto;}
.foo-main{display:flex;justify-content:center;width:100%;flex-wrap:wrap;}
.foo-main li{margin:0 1% 3%;}
.foo-main a{color:#4C4C4C;display:block;}

@media screen and (max-width:900px){
  footer img{width:20%;}
  .foo-main li{margin:0 4% 3%;}
}
@media screen and (max-width:700px){
  footer img{width:25%;}
  .foo-main li{margin:0 3% 3%;}
}
@media screen and (max-width:500px){
  footer img{width:30%;}
  .foo-main li{margin:0 2% 3%;}
}

.copy-right{text-align:center;background:#696969;color:#fff;padding:.5rem 0;}




/*-------------------- about（下層ページ） ----------------------*/
/*-------------------- ヘッダー ----------------------*/
.kaso-header{width:100%;height:auto;z-index:9999;overflow:hidden;position:fixed;top:0;left:0;background:linear-gradient(to right,rgba(47, 210, 255, 1),rgba(145, 248, 248, 1));}
.kaso-menu{display:flex;justify-content:center;align-items:center;padding:.5% 0;}
.kaso-menu img{width:8%;margin-right:5%;}
.kaso-header li a{display:block;color:#565656;margin:1vw .7vw;letter-spacing:.3vw;font-weight:bold;font-size:15px;}
.k-hea-me-new,.k-hea-me-line,.k-hea-me-contact,.k-hea-me-login{border-radius:5vw;padding:.5vw 1vw;}
.k-hea-me-new{background:rgba(255, 255, 27, 1);}
.k-hea-me-line{background:rgba(12, 212, 102, 1);}
.kaso-header li .k-hea-me-line{color:#fff;}
.k-hea-me-contact{background:#fff;}
.k-hea-me-login{background:#F5CA1F;}
@media screen and (max-width:1200px){
  .kaso-menu img{margin-right:2%;}
  .kaso-header li a{font-size:13px;}
}
@media screen and (max-width:1000px){
  .kaso-header li a{font-size:12px;}
}
@media screen and (max-width:950px){
  .kaso-header{display:none;}
}

/*-------------------- と湯と湯 利用規約 ----------------------*/
.terms{width:80%;margin:10% auto;color:rgba(86, 86, 86, 1);}
.terms h4{font-size:25px;}
.terms-all{margin:3% auto;}
.terms-1 p,.terma-ul{width:90%;margin:1% auto;}
.terms-ul{counter-reset:listnum;}
.terms-2 .terms-ul li::before,.terms-6 .terms-ul li::before,.terms-7 .terms-ul li::before,.terms-8 .terms-ul li::before{counter-increment:listnum;content:counter(listnum) "."; /* 半角スペースを入れて""の中にピリオドを追加 */}
.terms-ul-in-ul li::before{content:"・";}
.terms-ul{width:90%;margin:1% auto;}

.terms{width:80%;margin:10% auto;color:rgba(86, 86, 86, 1);}
.terms h4{font-size:25px;}

@media screen and (max-width:900px){
  .terms{width:90%;}
}
@media screen and (max-width:700px){
  .terms{margin:15% auto 10%;}
  .terms h4{font-size:22px;}
}
@media screen and (max-width:500px){
  .terms h4{font-size:20px;}
}

/*-------------------- 特定商取引法に基づく表記 ----------------------*/
.notation{width:80%;margin:10% auto;color:rgba(86, 86, 86, 1);}
.notation h4{font-size:25px;}
.notation table{width:100%;text-align:left;margin:3% auto;}
.notation th{width:30%;font-weight:normal;padding:.5% 0;}
.notation td{width:70%;}

@media screen and (max-width:900px){
  .notation{width:90%;}
}
@media screen and (max-width:700px){
  .notation h4{font-size:22px;}
  .notation th,.notation td{display:block;width:100%;}
  .no-no{display:none;}
  .notation th{border-bottom:1px solid rgba(86, 86, 86, 1);}
  .notation td{margin-bottom:5%;}
}
@media screen and (max-width:500px){
  .notation h4{font-size:20px;}
}


/*-------------------- プライバシーポリシー ----------------------*/
.policy{width:80%;margin:10% auto;color:rgba(86, 86, 86, 1);}
.policy h4{font-size:25px;}
.pol-pp{margin:3% auto;}
.policy-ul{counter-reset:listnum;}
.policy-ul li{margin:3% auto;}
.policy-ul li::before{counter-increment:listnum;content:counter(listnum) "."; /* 半角スペースを入れて""の中にピリオドを追加 */}
.policy-ul-in-ul li::before{content:"・";}

@media screen and (max-width:900px){
  .policy{width:90%;}
}
@media screen and (max-width:700px){
  .policy h4{font-size:22px;}
}
@media screen and (max-width:500px){
  .policy h4{font-size:20px;}
}

/*-------------------- 資金決済法に基づく表示 ----------------------*/
.display{width:80%;margin:10% auto;color:rgba(86, 86, 86, 1);}
.display h4{font-size:25px;}
.display table{width:100%;text-align:left;margin:3% auto;}
.dis-center{text-align:center;padding-right:35%;}
.display th{width:30%;font-weight:normal;padding:.5% 0;}
.display td{width:70%;}

@media screen and (max-width:900px){
  .display{width:90%;}
}
@media screen and (max-width:700px){
  .display h4{font-size:22px;}
  .dis-no{display:none;}
  .display th,.display td{display:block;width:100%;}
  .display th{border-bottom:1px solid rgba(86, 86, 86, 1);}
  .display td{margin-bottom:5%;}
}
@media screen and (max-width:500px){
  .display h4{font-size:20px;}
}


/*-------------------- 会社概要 ----------------------*/
.company{width:80%;margin:10% auto;color:rgba(86, 86, 86, 1);}
.company h4{font-size:25px;}
.company table{width:100%;text-align:left;margin:3% auto;}
.company th{width:30%;font-weight:normal;padding:.5% 0;}
.company td{width:70%;}

@media screen and (max-width:900px){
  .company{width:90%;}
}
@media screen and (max-width:700px){
  .company h4{font-size:22px;}
  .company th,.company td{display:block;width:100%;}
  .company th{border-bottom:1px solid rgba(86, 86, 86, 1);}
  .company td{margin-bottom:5%;}
}
@media screen and (max-width:500px){
  .company h4{font-size:20px;}
}