@charset "utf-8";

/*-------------------------------------------------------------- */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;font-family:inherit;font-size:100%;font-style:inherit;font-weight:inherit;margin:0;outline:0;padding:0;vertical-align:baseline;scroll-behavior: smooth;}
:focus{outline:0;}
html{scroll-behavior: smooth;}
ol,ul{list-style:none;}
table{border-collapse:separate;border-spacing:0;}
caption,th,td{font-weight:normal;text-align:left;}
blockquote:before,blockquote:after,q:before,q:after{content:"";}
blockquote,q{quotes:"";}
img{max-width:100%;height:auto;vertical-align:bottom;-webkit-backface-visibility: hidden;}
a img{max-width:100%;height:auto;border:0;}
a:hover img{opacity: 0.8; filter: alpha(opacity=80); -moz-opacity: 0.8; -webkit-transition: 0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; -o-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out; /*animation:fadeIn 1s ease 0s 1 normal;*/}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
body{font:30px/1.75 "kozuka-gothic-pr6n","游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic","ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "verdana", sans-serif; font-weight: 500; color:#000;animation:fadeIn 2s ease 0s 1 normal;}
/*"ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","游明朝",YuMincho,"HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",serif;*/
/*::after{ display: block; clear: both; content: '';}*/


/* 汎用クラス
*****************************************************/
.pcDisp{display:block;}
.spDisp{display:none;}


/* ヘッダー
------------------------------------------------------------*/
header{ position: relative; overflow: hidden;}
header .kvbg{ width: 100%;}
header .tit1{position: absolute; top: 35px; left: 30px;}
header .tit2{position: absolute; top: 170px; left: 30px;}
header .tit3{position: absolute; top: 280px; left: 30px;}
header h1{position: absolute; top: 367px; left: 60px;}
header ul{position: absolute; bottom: 30px; left: 30px; display: flex; width: 65%;}
header ul li{ width: 100%; margin-right: 30px;}

@media only screen and (max-width:644px){
header .kvbg{ width: 100%; height: auto; display: block;}
header .tit1 { top: 15px; left: 10px; width: 75%;}
header .tit2 {top: 75px; left: 10px; width: 75%;}
header .tit3 {top: 126px; left: 10px; width: 75%;}
header h1 { top: 174px; left:20px; width: 80%;}
header ul { bottom: 100px; left: 20px; display: block; width: 25%;}
}

.online header h1{position: absolute; top: 20px; left: 30px;}
.online header .tit1{position: absolute; top: 250px; left: 30px;}
.online header .tit2{position: absolute; top: 500px; left: 30px;}

@media only screen and (max-width:644px){
.online header h1{ left: 20px; top: 70px;}
.online header .tit1{ top: 440px; left: 20px;}
.online header .tit2{ width: 90%; left: 20px; top: 575px;}
}

/* コンテンツ
*****************************************************/
#asb{ background: url(images/asb.jpg) no-repeat center top; background-size: 100% auto; padding: 100px 0; text-align: center;}
#asb h2{ font-size: 100px; font-weight: 700; margin-bottom: 50px; color: #fff; opacity: 1;}
#asb p{ font-size: 25px; font-weight: 700; margin-bottom: 30px; color: #fff;}

.online #asb{ background: url(images/online/bg.jpg) no-repeat center top; background-size: 100% auto; padding: 100px 0;}
.online #asb .box{ max-width: 1400px; width: 96%; margin: 0 auto; position: relative;}
.online #asb .box::after{ display: block; clear: both; content: '';}
.online #asb .box .img1{ width: 40%; float: left; border: 4px solid #fff;box-shadow: 3px 3px 18px 1px #000000;transform:rotate(-2deg); margin-top: 50px;}
.online #asb .box .rgt{ width: 58%; float: right; text-align: left;}
.online #asb .box .rgt .waku{ border: #335ec0 5px solid; border-radius: 10px; width: 100%; padding: 30px; box-sizing: border-box; background: #fff;}
.online #asb .box .rgt .waku .txt1{ font-size: 58px; color: #bd1010;font-weight: 700; line-height: 1;}
.online #asb .box .rgt .waku .txt1 span{ font-size: 38px;}
.online #asb .box .rgt .waku .txt1 span span{ font-size: 30px; color: #335ec0;}
.online #asb .box .rgt .waku .txt2{ font-size: 42px; color: #335ec0; font-weight: 700; border-bottom:#335ec0 3px solid; margin-bottom: 30px; }
.online #asb .box .rgt .waku .txt2 span{ font-size: 30px;}
.online #asb .box .rgt .waku ul li{ list-style-type: disc; margin-left: 30px;}
.online #asb .box .img2{ position: absolute; bottom: -30px; right: 0; border: 4px solid #fff;box-shadow: 3px 3px 18px 1px #000000;transform:rotate(5deg);}

@media only screen and (max-width:644px){
#asb{ background: url(images/sp_asb.jpg) no-repeat center top; background-size: 100% auto; padding: 50px 20px; box-sizing: border-box;}
#asb h2 { font-size: 50px;margin-bottom: 20px;}
#asb h2.i span:nth-child(7),#asb h2.i span:nth-child(14){display: block !important;width: 100% !important;height: 0 !important;line-height: 0 !important;font-size: 0 !important;margin: 0 !important;opacity: 1 !important;animation: none !important;transform: none !important;}
#asb p { font-size: 16px; margin-bottom: 15px;}

.online #asb{ background: url(images/online/sp_asb.jpg) no-repeat center top;}
.online #asb h2.o span:nth-child(6),.online #asb h2.o span:nth-child(13){display: block !important;width: 100% !important;height: 0 !important;line-height: 0 !important;font-size: 0 !important;margin: 0 !important;opacity: 1 !important;animation: none !important;transform: none !important;}
.online #asb .box .img1{ width: 70%; margin: 0 auto 20px; float: none;}
.online #asb .box .rgt{ width: 96%; float: none; margin: 0 auto;}
.online #asb .box .rgt .waku{ padding: 20px;}
.online #asb .box .rgt .waku .txt1{ font-size: 40px; margin-bottom: 15px;}
.online #asb .box .rgt .waku .txt1 span{ font-size: 20px;}
.online #asb .box .rgt .waku .txt2{ font-size: 30px;}
.online #asb .box .rgt .waku ul li { font-size: 16px;}
.online #asb .box .img2 {position: static; transform: rotate(-6deg); width: 62%;}
}

#point h2{ position: relative;}
#point h2:after{content: url(images/illust1.png); display: inline-block;  width: 118px; height: 103px; margin-left: 10px;}
#point ul{ max-width: 1200px; width: 96%; margin: -50px auto 0; display: flex;}
#point ul li{ width: 100%; margin-right: 30px; color: #fff; padding: 70px 0; text-align: center;}
#point ul li:first-child{ background: url(images/point1.jpg) no-repeat; background-size: 100%;}
#point ul li:nth-child(2){background: url(images/point2.jpg) no-repeat; background-size: 100%;}
#point ul li:last-child{ background: url(images/point3.jpg) no-repeat; background-size: 100%;margin-right: 0;}
#point ul li .no{ font-size: 32px;font-weight: 900; margin-bottom: 30px; }
#point ul li .no span{ font-size: 50px;}
#point ul li .no:after{ content:""; width: 50px; height: 3px; background: #fff; display: block; margin: 0 auto;}
#point ul li h3{ font-size: 56px;font-weight: 900; margin-bottom: 30px; line-height: 1.2;}
#point ul li h3 span{ font-size: 40px;}
#point ul li p{ font-size: 20px; padding: 0 50px;}

.online #point h2:after{content: url(images/online/illust1.png);}
.online #point ul li { padding: 80px 0;}
.online #point ul li h3{ font-size: 52px;}


@media only screen and (max-width:644px){
#point h2:after{display: none;}
#point h2{ background:url(images/illust1.png) no-repeat right top; background-size: 15%; }
#point ul{ display: block;margin: 30px auto 0;}
#point ul li{ padding: 55px 0;margin-right: 0; margin-bottom: 10px;}
#point ul li h3 { font-size: 36px;}
#point ul li h3 span { font-size: 25px;}
#point ul li:first-child{ background: url(images/point1.jpg) no-repeat center center; background-size: auto 100%;}
#point ul li:nth-child(2){background: url(images/point2.jpg) no-repeat center center; background-size: auto 100%;}
#point ul li:last-child{ background: url(images/point3.jpg) no-repeat center center; background-size: auto 100%;}
#point ul li .no{ margin-bottom: 20px;}

.online #point h2{ background:url(images/online/illust1.png) no-repeat right top; background-size: 15%; padding-bottom: 30px; }
.online #point ul li h3{ font-size: 30px;}
}

.online #choice{border-bottom: 2px solid #818181;}
.online #choice h2{ width: 100%; background: #0aa7d0; text-align: center; color: #fff; font-size: 70px; padding: 30px 0;font-weight: 700; opacity: 1; margin-bottom: 80px;}
.online #choice .box{ max-width: 1400px; width: 96%; margin: 0 auto; position: relative;}
.online #choice .box::after{ display: block; clear: both; content: '';}
.online #choice .box .img{ width: 40%; float: left; border: 4px solid #fff;box-shadow: 3px 3px 18px 1px #000000;transform:rotate(-2deg);}
.online #choice .box .rgt{ width: 55%; float: right; text-align: left;}
.online #choice .box .rgt ul li{ list-style-type: disc; font-size: 40px; margin-bottom: 30px;font-weight: 500;}

@media only screen and (max-width:644px){
.online #choice h2{font-size: 30px;}
.online #choice h2 span:nth-child(7){display: block !important;width: 100% !important;height: 0 !important;line-height: 0 !important;font-size: 0 !important;margin: 0 !important;opacity: 1 !important;animation: none !important;transform: none !important;}
.online #choice .box .img{ width: 70%; margin: 0 auto 20px; float: none;}
.online #choice .box .rgt{ width: 96%; float: none; margin: 0 auto;}
.online #choice .box .rgt ul li { font-size: 16px; margin-left: 30px;  margin-bottom: 10px;}
}

#greeting h2{ text-align: right;}
#greeting .bg{ margin-top: -50px; background: url(images/greetingbg.jpg) no-repeat; background-size: 100% auto; position: relative; z-index: 20;}
#greeting .nakazawa{ position: absolute; left: 0; top: 10%;}
#greeting .txt{ margin-left: 450px; padding: 100px 0 70px;}
#greeting .txt p{ margin-bottom: 30px; font-size: 20px;}
#greeting .txt p span{ background: url(images/nami.png) repeat-x bottom; font-size: 30px; padding-bottom: 15px;}
#greeting .txt .name{ text-align: right; margin-right: 100px;}

@media only screen and (max-width:644px){
#greeting h2 span:nth-child(6){display: block !important;width: 100% !important;height: 0 !important;line-height: 0 !important;font-size: 0 !important;margin: 0 !important;opacity: 1 !important;animation: none !important;transform: none !important;}
#greeting .bg{ background: url(images/sp_greetingbg.jpg) no-repeat; background-size: 100% auto;}
#greeting .txt { margin-left: 0; padding: 70px 10px 70px; box-sizing: border-box; }
#greeting .txt p{font-size: 16px; margin-bottom: 10px;}
#greeting .txt p span{ font-size: 20px;}
#greeting .nakazawa { top: -100px; width: 30%;}
#greeting .txt .name { margin-right: 10px; font-size: 16px;}
}


#online{ position: relative; width: 100%; margin-bottom: 100px;}
#online .img{ margin-top: -50px; width: 85%;}
#online .img img{width: 100%;}
#online .copy1,#online .copy2{ color: #0aa7d0;font-weight: 900; background: #fff; position: absolute;}
#online .copy1{ font-size: 40px; padding: 10px; top: 190px; right: 100px;}
#online .copy2{ font-size: 100px;writing-mode: vertical-rl; line-height: 1; top: 280px; right: 100px;white-space: nowrap; }
#online .txt{ background: #fff; font-size: 32px; padding: 10px; position: absolute; bottom: 0; left: 20px;}
#online .txt span{font-weight: 900;color: #0aa7d0;}
#online .btn{position: absolute; bottom: 0; right: 200px;}
#online .btn a{color: #0aa7d0;font-weight: 900; text-align: center; border: 2px solid #0aa7d0; background: #fff; padding: 20px 70px 20px 50px; text-decoration: none; box-sizing: border-box; position: relative; transition: 0.5s;}
#online .btn a:after { width: 0; height: 0; border-style: solid; border-top: 12px solid transparent; border-bottom: 12px solid transparent; border-left: 20px solid #0aa7d0; border-right: 0; position: absolute; bottom: 0; top: 0; right: 15px; margin: auto;content: "";}
#online .btn a:hover{ opacity: 0.5;}

@media only screen and (max-width:644px){
#online { margin-bottom: 20px;}
#online .img{ margin-top: -30px;}
#online .copy1,#online .copy2,#online .txt,#online .btn{ position: static;}
#online .copy1{ font-size: 25px;}
#online .copy2{writing-mode: horizontal-tb; font-size: 50px;}
#online .txt{ font-size: 16px; margin-bottom: 30px;}
#online .btn{ margin-left: 10px;}
}

#flow{ background: url("images/guidancebg.jpg") no-repeat; background-size: 100% auto; padding: 70px 0;}
#flow h2{ text-align: right; }
#flow ul{ max-width: 1200px; width: 96%; margin: 50px auto; display: flex;}
#flow ul li{ width: 100%; margin-right: 30px; text-align: center; font-size: 34px;font-weight: 900; line-height: 1.2;}
#flow ul li:last-child{ margin-right: 0;}
#flow ul li img{ margin-bottom: 15px;}
#flow .bbox{ text-align: center; color: #fff; font-size: 50px; font-weight: 900; line-height: 1; margin-bottom: 20px;}
#flow .bbox span{ padding: 10px 30px; background: #0aa7d0;}
#flow .copy{ text-align: center; font-weight: 900; font-size: 20px;}

@media only screen and (max-width:644px){
#flow{ background: url("images/sp_guidancebg.jpg") no-repeat #e6f6fa;background-size: 100% auto;}
#flow h2{ line-height: 40px; margin-top: 0;}
#flow ul{display: block;}
#flow ul li{ margin-bottom: 20px; margin-right: 0; font-size: 20px; margin-bottom: 20px;}
#flow .bbox { font-size: 30px; line-height: 1.25; background: #0aa7d0; width: 96%; margin: 0 auto 20px; padding: 15px 10px; box-sizing: border-box;}
#flow .bbox span{ padding: 0; background: none;}
}

#price h2{ text-align: right;}
#price .copy{ max-width: 1000px; width: 96%; margin: 50px auto; border-bottom: #0aa7d0 double 5px; color: #0aa7d0; font-weight: 900; font-size: 35px;}
#price ul{ max-width: 1000px; width: 96%; margin: 0 auto;}
#price ul li{ padding: 15px 0; border-bottom: dashed 2px #1c1c1c;}

@media only screen and (max-width:644px){
#price h2{ line-height: 40px; margin-top: 0;}
#price .copy { margin: 20px auto; font-size: 25px;}
#price ul li{ font-size: 16px;}
}

#access{ border-bottom: 2px solid #818181;}
#access h2{ text-align: right;  z-index: 70;}
#access .mapbox{ position: relative; margin-top: -150px; padding-right: 30px; padding-bottom: 30px; width: 100%; box-sizing: border-box;}
#access .mapbox:after{ position: absolute; top: 5%; left: 0; background: #0aa7d0; width: 100%; height: 95%; content: ''; z-index: 10;}
#access .mapbox iframe{ width: 100%; height: 500px; z-index: 50; position: relative;}
#access .txt{ max-width: 1000px; width: 96%; margin: 50px auto;}

@media only screen and (max-width:644px){
#access .mapbox { margin-top: -100px; padding-right: 20px; padding-bottom: 20px;}
#access h2{ line-height: 40px; margin-top: 0;}
#access .txt{ font-size: 16px;margin: 20px auto 0;}
}

#blog h2{ text-align: right;}
#blog ul{ max-width: 1200px; width: 96%; margin: 50px auto;}
#blog ul li{ padding: 15px 0; border-bottom: dashed 2px #1c1c1c;}
#blog ul li span{ padding-right: 50px;}
#blog ul li a{color: #000; text-decoration: none; transition: 0.5s;}
#blog ul li a:hover{ opacity: 0.5;}

@media only screen and (max-width:644px){
#blog h2{ line-height: 40px; margin-top: 0;}
#blog ul li{ font-size: 16px;}
}

/* 共通エリア
*****************************************************/
main section{ padding: 50px 0;}
main section::after{ display: block; clear: both; content: '';}

h2{ font-size: 135px; font-weight: 900; color: #818181; opacity: 0.7; line-height: 1;z-index: 50; position: relative;}
h2.sfont{ font-size: 50px;}
h2 span.spc{ width: 100px; display: inline-block;}

.cta{ background: #0aa7d0; width: 100%; padding: 50px 0; text-align: center; color: #fff;}
.cta ul{ max-width: 830px; width: 90%; display: flex; margin: 30px auto;}
.cta ul li{ width: 100%; margin-right: 5px;}
.cta ul li:last-child{ margin-right: 0;}
.cta ul li a{display: flex; align-items: center; justify-content: center; gap: 10px; line-height: 34px; padding: 30px 0; width: 100%; text-decoration: none; font-size: 30px; color: #0aa7d0; background: rgba(255,255,255,.9); border: #0aa7d0 2px solid; position: relative; transition: .5s;}
.cta ul li a:after { width: 0; height: 0; border-style: solid; border-right: 10px solid transparent; border-left: 10px solid transparent; border-bottom: 10px solid #0aa7d0; border-top: 0; transform: rotate(135deg); position: absolute; bottom: 0; right: -5px; content: "";}
.cta ul li a:hover{ opacity: 0.5;}
.cta ul li:first-child a:before{content: ""; width: 34px; height: 34px; background: url(images/line.png) no-repeat center / contain; flex: 0 0 34px; display: block;}

@media only screen and (max-width:644px){
h2{ font-size:50px;}
h2.sfont{ font-size: 30px;}
h2 span.spc{ width: 20px;}
.cta{padding: 50px 20px; box-sizing: border-box; background: url(images/sp_cta.jpg) no-repeat bottom #0aa7d0; background-size: 100%;}
.cta p{ font-size: 20px;}
.cta ul{ display: block; margin-bottom: 0;}
.cta ul li{ margin-right: 0;}
.cta ul li a{ font-size: 20px;}
}

/* フッター
*****************************************************/
footer{padding:50px 0;box-sizing:border-box; background: #0aa7d0; color: #fff; position: relative;}
footer .logo{ position: absolute; top: 50px; left: 50px;}
footer .sns{ position: absolute; top: 50px; right: 100px; display: flex;}
footer .sns li{ width: 100%; margin-left: 15px;}
footer .copy{ text-align: center; font-size: 18px; margin-bottom: 50px;}
footer .btn{ max-width: 830px; width: 80%; display: flex; margin: 30px auto;}
footer .btn li{ width: 100%; margin-right: 5px;}
footer .btn li:last-child{ margin-right: 0;}
footer .btn li a{display: flex; align-items: center; justify-content: center; gap: 10px; line-height: 34px; padding: 30px 0; width: 100%; text-decoration: none; font-size: 30px; color: #0aa7d0; background: rgba(255,255,255,.9); border: #0aa7d0 2px solid; position: relative; transition: .5s;}
footer .btn li a:after { width: 0; height: 0; border-style: solid; border-right: 10px solid transparent; border-left: 10px solid transparent; border-bottom: 10px solid #0aa7d0; border-top: 0; transform: rotate(135deg); position: absolute; bottom: 0; right: -5px; content: "";}
footer .btn li a:hover{ opacity: 0.5;}
footer .btn li:first-child a:before{content: ""; width: 34px; height: 34px; background: url(images/line.png) no-repeat center / contain; flex: 0 0 34px; display: block;}
footer address{text-align:center;word-break:break-all;box-sizing:border-box; font-size: 16px;}

@media only screen and (max-width:644px){
footer .logo,footer .sns{ position: static;}
footer .logo{ text-align: center; margin-bottom: 20px;}
footer .sns{ width: 50%; margin: 0 auto 20px;}
footer .copy{ margin-bottom: 20px;}
footer .btn{ display: block; margin-bottom: 30px;}
footer .btn li{ margin-right: 0;}
footer .btn li a{ font-size: 20px;}
footer address{ margin-bottom: 50px;}
}

/* グローバルナビゲーション
*****************************************************/
nav#mainNav ul{width:95%;margin:0 auto; flex-wrap:nowrap;justify-content:space-around;align-items:center;}
nav#mainNav li{padding:50px 30px 50px 20px; float: left;text-align:center;box-sizing:border-box; position: relative;}
nav#mainNav li:first-child{ padding: 10px 30px;}
nav#mainNav li a{text-decoration: none; color: #000; font-size: 22px; font-weight: 700; line-height: 1; padding-right: 10px; transition: 0.5s;}
nav#mainNav li a:after{ content: "｜"; position: absolute; right: 0; top: 42%;}
nav#mainNav li:nth-child(2) a:before{ content: "｜"; position: absolute; left: -20px; top: 42%;}
nav#mainNav li:first-child a:after{ content: ""; }
nav#mainNav li a:hover{animation:fadeIn 1s ease 0s 1 normal;}
nav#mainNav li a:hover{color:#0aa7d0;}
nav#mainNav li a:hover:after{ color: #000;}
nav#mainNav::after{ display: block; clear: both; content: '';}
div.drawer{display:none;}

.fixedMenu{ position: fixed; top: 30%; right: 0; z-index: 100; opacity: 0; transition: 0.5s;}
.fixedMenu.isActive{ opacity: 1;}
.fixedMenu ul li:first-child{ margin-bottom: 20px;}
.fixedMenu ul li a{writing-mode: vertical-rl; line-height: 1; padding: 30px 20px; text-decoration: none; font-size: 20px; color: #0aa7d0;font-weight: 700; background: rgba(255,255,255,0.9); border-radius: 5px 0 0 5px; border:#0aa7d0 2px solid; border-right:none; position: relative; transition: 0.5s;}
.fixedMenu ul li a:after { width: 0; height: 0; border-style: solid; border-right: 10px solid transparent; border-left: 10px solid transparent; border-bottom: 10px solid #0aa7d0; border-top: 0; transform: rotate(135deg); position: absolute; bottom: 0; right: -5px; content: "";}
.fixedMenu ul li a:hover{ opacity: 0.5;}

@media only screen and (max-width:644px){
.fixedMenu{ position: fixed; top: auto; bottom: 0; right: 0;width: 100%;}
.fixedMenu ul{ display: flex;}
.fixedMenu ul li{ width: 100%;}
.fixedMenu ul li:first-child{ margin-bottom: 0;}
.fixedMenu ul li a{writing-mode: horizontal-tb; line-height: 1; padding: 15px 0; background: rgba(255,255,255,1); border-radius: 0; border:#0aa7d0 1px solid; border-right:#0aa7d0 1px solid; box-sizing: border-box; font-size: 16px; display: block; text-align: center;}
}


/* スマホサイズ
------------------------------------------------------------*/
@media only screen and (max-width:644px){
.pcDisp{display:none;}
.spDisp{display:block;}
div.drawer{display:block;}
nav#mainNav{display:none;}
}


/* アニメーション
------------------------------------------------------------*/

/* ===== ヘッダ ===== */
@keyframes slideInLeft {
from { opacity: 0; transform: translateX(-150px); }
to   { opacity: 1; transform: translateX(0); }
}
header .kvbg { animation: none !important; }
header .tit1,header .tit2,header .tit3,header h1,header ul li { opacity: 0; animation-name: slideInLeft; animation-duration: .7s; animation-timing-function: cubic-bezier(.2,.8,.25,1); animation-fill-mode: forwards;  will-change: transform, opacity;}
header .tit1 { animation-delay: .10s; }
header .tit2 { animation-delay: .25s; }
header .tit3 { animation-delay: .40s; }
header h1    { animation-delay: .55s; }
header ul li:nth-child(1) { animation-delay: .70s; }
header ul li:nth-child(2) { animation-delay: .85s; }
header ul li:nth-child(3) { animation-delay: 1.00s; }
header img { display: block; max-width: 100%; height: auto; }
@media (max-width: 644px){
header .tit1 { animation-duration: .6s; animation-delay: .05s; }
header .tit2 { animation-duration: .6s; animation-delay: .18s; }
header .tit3 { animation-duration: .6s; animation-delay: .31s; }
header h1    { animation-duration: .6s; animation-delay: .44s; }
header ul li:nth-child(1) { animation-duration: .6s; animation-delay: .57s; }
header ul li:nth-child(2) { animation-duration: .6s; animation-delay: .70s; }
header ul li:nth-child(3) { animation-duration: .6s; animation-delay: .83s; }
}
/* アニメ苦手な人の環境配慮 */
@media (prefers-reduced-motion: reduce) {
  header .tit1, header .tit2, header .tit3, header h1, header ul li { animation: none; opacity: 1; transform: none;}
}

/* ===== h2 ===== */
@keyframes letterFade {
from { opacity: 0; transform: translateY(-20px); }
to   { opacity: 1; transform: translateY(0); }
}
h2 span { opacity: 0; display: inline-block;}
h2.show span { animation: letterFade 0.4s forwards;}
h2.show span:nth-child(1) { animation-delay: 0.1s; }
h2.show span:nth-child(2) { animation-delay: 0.2s; }
h2.show span:nth-child(3) { animation-delay: 0.3s; }
h2.show span:nth-child(4) { animation-delay: 0.4s; }
h2.show span:nth-child(5) { animation-delay: 0.5s; }
h2.show span:nth-child(6) { animation-delay: 0.6s; }
h2.show span:nth-child(7) { animation-delay: 0.7s; }
h2.show span:nth-child(8) { animation-delay: 0.8s; }
h2.show span:nth-child(9) { animation-delay: 0.9s; }
h2.show span:nth-child(10){ animation-delay: 1.0s; }
h2.show span:nth-child(11){ animation-delay: 1.1s; }
h2.show span:nth-child(12){ animation-delay: 1.2s; }
h2.show span:nth-child(13){ animation-delay: 1.3s; }
h2.show span:nth-child(14){ animation-delay: 1.4s; }
h2.show span:nth-child(15){ animation-delay: 1.5s; }
h2.show span:nth-child(16){ animation-delay: 1.6s; }
h2.show span:nth-child(17){ animation-delay: 1.7s; }
h2.show span:nth-child(18){ animation-delay: 1.8s; }
h2.show span:nth-child(19){ animation-delay: 1.9s; }
h2.show span:nth-child(20){ animation-delay: 2.0s; }
h2.show span:nth-child(21){ animation-delay: 2.1s; }

/* ===== li ===== */
@keyframes letterFade {
from { opacity: 0; transform: translateY(-20px); }
to   { opacity: 1; transform: translateY(0); }
}
.reveal-scope h2 span { opacity: 0; display: inline-block;}
.reveal-scope h2.show span { animation: letterFade .4s forwards;}
@keyframes popBubble {
0%   { opacity: 0; transform: translateY(10px) scale(0.85); filter: blur(6px); }
60%  { opacity: 1; transform: translateY(0) scale(1.08);   filter: blur(0);    }
100% { opacity: 1; transform: translateY(0) scale(1);       filter: blur(0);    }
}
.reveal-scope li { opacity: 0; transform: translateY(10px) scale(0.95); filter: blur(4px); will-change: transform, opacity, filter;}
.reveal-scope.show li { animation: popBubble .7s cubic-bezier(.2,.9,.25,1) forwards;}
@media (prefers-reduced-motion: reduce) {
.reveal-scope h2 span { opacity: 1; transform: none; }
.reveal-scope h2.show span { animation: none !important; }
.reveal-scope li,.reveal-scope.show li { animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important;}
}

/* スワイプ用
------------------------------------------------------------*/

html, body { height: 100%; margin: 0; }

.snap{
  height: 100vh;                     /* 1画面ぶんの高さでコンテナを作る */
  overflow-y: auto;                  /* このコンテナがスクロール親 */
  scroll-snap-type: y mandatory;     /* ピタッと止める */
  overscroll-behavior-y: contain;    /* ビヨーン（バウンス）抑制 */
  -webkit-overflow-scrolling: touch; /* iOS慣性スクロール */
}

/* 1面＝スライド */
.snap > header,
.snap > main > section,
.snap > footer{
  min-height: 100vh;                 /* 1面の高さ */
  scroll-snap-align: start;          /* 面の先頭で止まる */
  scroll-snap-stop: always;          /* 強めに止める（非対応ブラウザは無視されてもOK） */
}


@media (min-width: 1024px) {
  .snap > header,
  .snap > main > section,
  .snap > footer {
    min-height: auto !important; /* 100vhの強制を解除 */
  }
  .snap-dots{ display:none !important; }
}

/* ===== MOANA POINT：1スワイプ=1li（SP/タブ） ===== */
@media (max-width: 1023px){
  #point ul{
    display:block; width:100%; margin:0;
  }

  #point ul li{
    /* 1画面＝1ポイント（スナップ用） */
    scroll-snap-align: start;
    scroll-snap-stop: always;

    /* 中央寄せなどはお好みで */
    display: grid;
    place-content: center;
    padding: 55px 0;
	margin-bottom: 50px;

    /* ▼ 背景は“幅基準”で等比拡大：はみ出し防止 */
    --bgW: min(92vw, 540px);   /* 画像の最大幅（好みで微調整） */
    --bgTop: 100px;            /* 上からのオフセット（好みで微調整） */
    background-repeat: no-repeat;
    background-position: 50% var(--bgTop);
    background-size: var(--bgW) auto;   /* ← 高さ依存は使わない！ */
  }
}