@charset "UTF-8";

/* ======================
   全体
====================== */

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

/* ======================
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:18%;
bottom:20%;
width:40px;
}

.sns img{
width:100%;
}

@media (min-width:769px){
.spmanu{
display:none;
}
}

/* ======================
   ギャラリーヘッダー
====================== */

.gallery-header{
background:url("image/bg1.jpg") center/cover no-repeat;
min-height:100vh;
position:relative;
padding:60px 20px;
box-sizing:border-box;
overflow:hidden;
}


/* ホログラム光 */

.gallery-header::before{
content:"";
position:absolute;
top:50%;
left:50%;
width:200%;
height:200%;
transform:translate(-50%,-50%);
transform-origin:center;

background:linear-gradient(
120deg,
rgba(255,0,200,0.35),
rgba(0,200,255,0.35),
rgba(255,255,0,0.35),
rgba(0,255,150,0.35)
);

opacity:.6;
animation:holoMove 10s linear infinite;
pointer-events:none;
z-index:1;
}

@keyframes holoMove{
0%{transform:translate(-50%,-50%) rotate(0deg);}
100%{transform:translate(-50%,-50%) rotate(360deg);}
}

.gallery-header > *{
position:relative;
z-index:2;
}


/* ======================
   タイトル
====================== */

.gallery-title{
text-align:center;
font-size:28px;
letter-spacing:6px;
color:#606060;
margin-bottom:10px;
}


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

.gallery-layout{
max-width:1000px;
margin:auto;
}


/* ======================
   ヘッダー画像
====================== */

.gallerytop{
width:100%;
text-align:right;
margin-top:40px;
}

.gallerytop img{
width:420px;
max-width:60vw;
display:block;
margin-left:auto;
}


/* ======================
   メニュー
====================== */

.gallery-menu{
margin-top:20px;
display:flex;
flex-direction:column;
gap:18px;
align-items:flex-end;
}

.gallery-menu a{
text-decoration:none;
font-size:24px;
letter-spacing:3px;
color:#222;
transition:.3s;
}

.gallery-menu a:hover{
color:#ff5a2e;
transform:translateX(6px);
}


/* ======================
   ロゴ
====================== */

.stage-logo{
text-align:center;
margin-top:60px;
}

.stage-logo img{
width:320px;
display:block;
margin:0 auto;
}


/* ======================
   ギャラリー
====================== */

.gallery-section{
text-align:center;
padding:100px 20px;
background:#efefef;
position:relative;
z-index:5;
}

.slides{
display:flex;
width:100%;
transition:transform .8s cubic-bezier(.25,.8,.25,1);

touch-action:pan-y;
}

/* ======================
   Opening縦線
====================== */

.gallery-line{
width:3px;
height:120px;
margin:8px auto 80px;
position:relative;
overflow:hidden;

background:linear-gradient(
to bottom,
#ffb3d9,
#ffd6a5,
#fff4b3,
#baffc9,
#b3e5ff,
#d6b3ff
);

background-size:100% 300%;
animation:rainbowMove 4s linear infinite;
}

.gallery-line::after{
content:"";
position:absolute;
left:0;
top:-50px;
width:100%;
height:50px;

background:linear-gradient(
to bottom,
rgba(255,255,255,0),
rgba(255,255,255,0.9),
rgba(255,255,255,0)
);

animation:lineFlow 2.5s infinite;
}

@keyframes rainbowMove{
0%{background-position:0 0;}
100%{background-position:0 300%;}
}

@keyframes lineFlow{
0%{top:-50px;opacity:0;}
40%{opacity:1;}
100%{top:120%;opacity:0;}
}


/* ======================
   Cute背景
====================== */

#cute{
background:#ffe1f9;
}


/* ======================
   Cute 横線レインボー
====================== */

#cute .gallery-line{
width:160px;
height:3px;
margin:6px auto 60px;

position:relative;
overflow:hidden;

/* パステルレインボー */

background:linear-gradient(
90deg,
#ffb3d9,
#ffd6a5,
#fff4b3,
#baffc9,
#b3e5ff,
#d6b3ff
);

background-size:300% 100%;

/* 2つのアニメーション */

animation:
cuteLineGrow 1.2s ease forwards,
cuteRainbowMove 5s linear infinite;

transform-origin:center;
}

/* Opening用の光は消す */

#cute .gallery-line::after{
display:none;
}


/* ======================
   中央から伸びる
====================== */

@keyframes cuteLineGrow{

0%{
transform:scaleX(0);
}

100%{
transform:scaleX(1);
}

}


/* ======================
   レインボー流れる
====================== */

@keyframes cuteRainbowMove{

0%{
background-position:0% 50%;
}

100%{
background-position:300% 50%;
}

}

/* ======================
   Sexy 背景
====================== */

#sexy{
background:#51254e;
}


/* ======================
   Sexy 横線レインボー
====================== */

#sexy .gallery-line{

width:160px;
height:3px;
margin:6px auto 60px;

position:relative;
overflow:hidden;

/* レインボー */

background:linear-gradient(
90deg,
#ffb3d9,
#ffd6a5,
#fff4b3,
#baffc9,
#b3e5ff,
#d6b3ff
);

background-size:300% 100%;

animation:
sexyLineGrow 1.2s ease forwards,
sexyRainbowMove 5s linear infinite;

transform-origin:center;

}


/* 光は消す */

#sexy .gallery-line::after{
display:none;
}


/* 中央から伸びる */

@keyframes sexyLineGrow{

0%{
transform:scaleX(0);
}

100%{
transform:scaleX(1);
}

}


/* レインボー流れる */

@keyframes sexyRainbowMove{

0%{
background-position:0% 50%;
}

100%{
background-position:300% 50%;
}

}

/* ======================
   Pole Dance 背景
====================== */

#pole{
background:#f7f17f;
}


/* ======================
   Pole Dance 横線
====================== */

#pole .gallery-line{

width:160px;
height:3px;
margin:6px auto 60px;

position:relative;
overflow:hidden;

/* パステルレインボー */

background:linear-gradient(
90deg,
#ffb3d9,
#ffd6a5,
#fff4b3,
#baffc9,
#b3e5ff,
#d6b3ff
);

background-size:300% 100%;

animation:
poleLineGrow 1.2s ease forwards,
poleRainbowMove 5s linear infinite;

transform-origin:center;
}


/* Opening用の光を消す */

#pole .gallery-line::after{
display:none;
}


/* 中央から伸びる */

@keyframes poleLineGrow{

0%{
transform:scaleX(0);
}

100%{
transform:scaleX(1);
}

}


/* レインボー流れる */

@keyframes poleRainbowMove{

0%{
background-position:0% 50%;
}

100%{
background-position:300% 50%;
}

}

/* ======================
   スライダー
====================== */

.slider{
position:relative;
max-width:420px;
margin:auto;
overflow:hidden;
}

.slides{
display:flex;
width:100%;
transition:transform .8s cubic-bezier(.25,.8,.25,1);
}

.slides img{
width:100%;
flex:0 0 100%;
cursor:pointer;
transform:scale(.94);
transition:transform .6s ease;
}

.slides img.active{
transform:scale(1);
}


/* ======================
   矢印
====================== */

.arrow{
position:absolute;
top:50%;
transform:translateY(-50%);
background:rgba(255,255,255,0.6);
width:42px;
height:42px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
border:none;
font-size:24px;
color:#666;
cursor:pointer;
z-index:10;
}

.prev{left:10px;}
.next{right:10px;}

.arrow:hover{
background:white;
}


/* ======================
   ドット
====================== */

.dots{
margin-top:25px;
}

.dots span{
display:inline-block;
width:10px;
height:10px;
border-radius:50%;
background:#aaa;
margin:0 6px;
cursor:pointer;
transition:.3s;
}

.dots span.active{
background:#333;
transform:scale(1.2);
}


/* ======================
   ライトボックス
====================== */

.lightbox{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,.9);
display:none;
align-items:center;
justify-content:center;
z-index:999;
}

.lightbox img{
max-width:90%;
max-height:90%;
}



/* ======================
   スマホ
====================== */


.reserve-fixed{

position:fixed;
bottom:20px;
right:20px;

background:#ff5a2e;
color:white;

padding:14px 20px;
border-radius:30px;

font-size:16px;
font-weight:bold;

cursor:pointer;

box-shadow:0 8px 20px rgba(0,0,0,.3);

z-index:9999;

}


/* モーダル背景 */

.reserve-modal{

position:fixed;
top:0;
left:0;

width:100%;
height:100%;

background:rgba(0,0,0,.6);

display:none;

align-items:center;
justify-content:center;

z-index:9998;

}


/* フォーム */

.reserve-box{

background:white;

padding:30px;

border-radius:12px;

width:90%;
max-width:400px;

}


/* 閉じるボタン */

.reserve-close{

float:right;
font-size:22px;
cursor:pointer;

}


/* フォーム */

.reserve-box form{

display:flex;
flex-direction:column;
gap:10px;

}

.reserve-box input,
.reserve-box textarea{

padding:8px;
border:1px solid #ccc;
border-radius:6px;

}

.reserve-box button{

background:#ff5a2e;
color:white;
border:none;
padding:10px;
border-radius:6px;
cursor:pointer;

}

/* ======================
   スマホ
====================== */

@media (max-width:768px){

.gallery-layout{
display:block;
}

.gallerytop{
text-align:right;
margin-top:30px;
}

.gallerytop img{
width:70%;
max-width:none;
margin-left:auto;
}

.gallery-menu{
margin-top:30px;
align-items:flex-start;
}

.gallery-menu a{
font-size:16px;
}

.stage-logo{
width:100vw;
margin-left:calc(50% - 50vw);
margin-top:-60px;
}

.stage-logo img{
width:100%;
max-width:none;
}

.arrow{
width:36px;
height:36px;
font-size:20px;
}

}