@charset "UTF-8";

/* ======================
基本設定
====================== */

html,body{
margin:0;
overflow-x:hidden;
font-family:sans-serif;
}

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

/* ======================
中央スマホレイアウト
====================== */

.wrapper{
max-width:100%;
background:#fff;
}

/* ======================
SP MENU（元レイアウト）
====================== */

.spmanu input{display:none;}

#overlay-button{
position:fixed;
top:30px;
right:20px;
padding:26px 11px;
cursor:pointer;
z-index:10001;
}

#overlay-button span{
display:block;
width:35px;
height:4px;
background:#17458F;
border-radius:2px;
position:relative;
transition:.3s;
}

#overlay-button span:before,
#overlay-button span:after{
content:"";
position:absolute;
width:35px;
height:4px;
background:#17458F;
border-radius:2px;
transition:.3s;
}

#overlay-button span:before{top:-10px;}
#overlay-button span:after{top:10px;}

.spmanu input:checked + #overlay-button span{
background:transparent;
}

.spmanu input:checked + #overlay-button span:before{
transform:rotate(45deg) translate(7px,7px);
}

.spmanu input:checked + #overlay-button span:after{
transform:rotate(-45deg) translate(7px,-7px);
}

#overlay{
position:fixed;
top:0;
left:0;
width:100vw;
height:100vh;
background:url("image/menubg.jpg") center/cover no-repeat;
visibility:hidden;
opacity:0;
transition:.35s;
z-index:10000;
}

.spmanu input:checked ~ #overlay{
visibility:visible;
opacity:1;
}

#overlay ul{
list-style:none;
padding-top:30%;
padding-left:18%;
height:100vh;
}

#overlay ul li{
margin:18px 0;
}

#overlay ul li a{
color:#333;
text-decoration:none;
font-size:22px;
}

.mini{
font-size:16px;
margin-left:20px;
padding-left:10px;
border-left:1px solid #333;
}

.sns{
position:absolute;
left:50%;
bottom:20%;
transform:translateX(-50%);
width:40px;
text-align:center;
}

.sns img{
margin:0 auto;
}

/* ======================
NEW TOP
====================== */

.new-hero{
position:relative;
height:100vh;
overflow:hidden;
}

/* 背景 */
.new-hero .hero-bg{
position:absolute;
width:100%;
height:100%;
object-fit:cover;
z-index:1;
}

/* スライド共通 */
.slide{
position:absolute;
width:100%;
overflow:hidden;
z-index:2;
}

/* 位置 */
.slide-top{ top:10%; }
.slide-bottom{ bottom:10%; }

/* 横並び */
.slide-track{
display:flex;
gap:40px;
width:max-content;
}

/* 画像サイズ（スマホ基準固定） */
.slide img{
width:150px;
flex-shrink:0;
}

/* 上：左へ */
.slide-top .slide-track{
animation:slideLeft 20s linear infinite;
}

/* 下：右へ */
.slide-bottom .slide-track{
animation:slideRight 20s linear infinite;
}

@keyframes slideLeft{
0%{transform:translateX(0);}
100%{transform:translateX(-50%);}
}

@keyframes slideRight{
0%{transform:translateX(-50%);}
100%{transform:translateX(0);}
}

/* ======================
ブラインド演出
====================== */

.hero-blind{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;

/* 表示する画像 */
background:url("image/topbg.jpg") center/cover no-repeat;

z-index:5;

/* 上に消える */
animation:blindUp 1.8s ease-in-out forwards;
}

/* 上にスライド */
@keyframes blindUp{
0%{
transform:translateY(0);
}
100%{
transform:translateY(-100%);
}
}

/* ======================
ロゴ遅延
====================== */

.delay-logo{
animation-delay:0.9s !important; /* ブラインド終了後 */
}

/* ======================
ロゴポップ
====================== */

/* ロゴ */
.hero-logo-pop{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%) scale(0);
width:320px;
z-index:3;

/* ゆっくり長く */
animation:logoBoyonSoft 1.6s ease-out forwards;
}

/* ぼよーーーん */
@keyframes logoBoyonSoft{

0%{
transform:translate(-50%,-50%) scale(0);
opacity:0;
}

/* ゆっくり大きく */
35%{
transform:translate(-50%,-50%) scale(1.5);
opacity:1;
}

/* 深く沈む */
55%{
transform:translate(-50%,-50%) scale(0.75);
}

/* 大きく戻る */
70%{
transform:translate(-50%,-50%) scale(1.2);
}

/* まだ揺れる */
85%{
transform:translate(-50%,-50%) scale(0.95);
}

/* 最後の余韻 */
100%{
transform:translate(-50%,-50%) scale(1);
}

}

/* ======================
PRICE
====================== */

.price{
padding:80px 0;
text-align:center;
background:#fff;
position:relative;
}

.price-img{
width:100%;
max-width:420px;
}

/* スポットライト */

.spot-price{
position:absolute;
width:120px;
height:120px;
border-radius:50%;
pointer-events:none;
opacity:0.7;
}

.spotp1{
background:rgba(255,100,160,.6);
top:80%;
left:10%;
animation:spotMove1 7s linear infinite;
}

.spotp2{
background:rgba(170,90,255,.6);
top:75%;
left:70%;
animation:spotMove2 8s linear infinite;
}

@keyframes spotMove1{
0%{transform:translate(0,0);}
50%{transform:translate(20vw,10vh);}
100%{transform:translate(0,0);}
}

@keyframes spotMove2{
0%{transform:translate(0,0);}
50%{transform:translate(-20vw,10vh);}
100%{transform:translate(0,0);}
}

/* ======================
予約ボタン
====================== */

.yoyaku-btn{
position:fixed;
bottom:10vh;
right:20px;
z-index:9999;
}

.yoyaku-btn img{
width:90px;
animation:btnMove 1s infinite;
}

@keyframes btnMove{
0%,100%{transform:translate(0,0);}
50%{transform:translate(2px,-2px);}
}

/* ======================
ABOUT
====================== */

.about{
position:relative;
}

.about-miyu{
position:absolute;
top:45%;
right:0;
transform:translateY(-50%);
}

.about-miyu img{
width:160px;
animation:miyuFloat 4s ease-in-out infinite;
}

.about-insta{
position:absolute;
top:70%;
right:8%;
}

.about-insta img{
width:120px;
}

.about-teppei{
position:absolute;
top:85%;
right:2%;
width:120px;
animation:teppeiBounce 3s ease-in-out infinite;
}

@keyframes miyuFloat{
0%{transform:translateY(0);}
50%{transform:translateY(-10px);}
100%{transform:translateY(0);}
}

@keyframes teppeiBounce{
0%{transform:translateY(0);}
50%{transform:translateY(-15px);}
100%{transform:translateY(0);}
}

/* ======================
INFO
====================== */

.info{
background:url("image/bg1.jpg") center/cover no-repeat;
padding:80px 20px;
text-align:center;
}

.info-map iframe{
width:100%;
height:260px;
border:0;
}

.info-sns{
display:flex;
justify-content:center;
gap:20px;
}

.info-sns img{
width:40px;
}

/* ======================
FOOTER
====================== */

.footer{
text-align:center;
padding:30px;
font-size:12px;
}

/* ======================
PCレイアウト
====================== */

@media (min-width:768px){

body{
background:url("image/bg1.jpg") center / cover no-repeat fixed;
}

.wrapper{
max-width:420px;
margin:40px auto;
border-radius:20px;
overflow:hidden;
box-shadow:0 10px 40px rgba(0,0,0,0.3);
}

.yoyaku-btn{
right:calc((100vw - 420px)/2 + 20px);
}

#overlay-button{
right:calc((100vw - 420px)/2 + 20px);
}

#overlay{
width:420px;
left:50%;
transform:translateX(-50%);
border-radius:20px;
}

#overlay ul{
padding-top:120px;
padding-left:18%; /* ← 元の位置に戻す */
text-align:left;   /* ← 中央やめる */
}

.mini{
margin-left:20px;
border-left:1px solid #333;
}


}