/* ===============================
共通設定
=============================== */
html{
-webkit-text-size-adjust:100%;
overscroll-behavior:none;
touch-action:manipulation;
}

html,body{
margin:0;
height:100%;
overflow:hidden;

background:#000;
font-family:-apple-system,BlinkMacSystemFont,sans-serif;
color:#111;
}

body{
overscroll-behavior:none;
}

*{
box-sizing:border-box;
}

/* ===============================
TOPページ
=============================== */

body.top{
padding:24px 18px 40px;
background:#f4f4f4;
}

.wrap{
max-width:480px;
margin:0 auto;
}

h1{
font-size:24px;
margin:0 0 8px;
text-align:center;
line-height:1.4;
}

.sub{
font-size:14px;
color:#666;
text-align:center;
margin-bottom:24px;
line-height:1.5;
}

/* ===============================
ボタン
=============================== */

.route-btn{
display:block;
background:#fff;
color:#111;
text-decoration:none;
padding:16px 18px;
margin-bottom:14px;
border-radius:14px;
box-shadow:0 4px 14px rgba(0,0,0,.08);
border-left:8px solid #ccc;
position:relative;
}

.route-btn:active{
transform:scale(.98);
}

.jp{
display:block;
font-size:16px;
font-weight:700;
line-height:1.4;
padding-right:20px;
}

.en{
display:block;
font-size:12px;
color:#666;
margin-top:4px;
line-height:1.4;
padding-right:20px;
}

.icon{
position:absolute;
right:16px;
top:50%;
transform:translateY(-50%);
font-size:18px;
color:#999;
}

/* 色 */
.ginza{border-left-color:#f39700;}
.namboku{border-left-color:#00ada9;}
.street{border-left-color:#666;}
.wheelchair{border-left-color:#2f6de1;}

.badge{
display:inline-block;
font-size:10px;
padding:3px 6px;
border-radius:20px;
margin-bottom:6px;
color:#fff;
}

.bg-ginza{background:#f39700;}
.bg-namboku{background:#00ada9;}
.bg-street{background:#666;}
.bg-wheel{background:#2f6de1;}

/* 2路線のみの場合に間隔を拡大 */
.ginza{
margin-bottom:48px;
}


/* ===============================
Swiper
=============================== */

.swiper{
position:relative;

height:calc(var(--vh, 1vh) * 100);

background:#000;

overflow:hidden;

touch-action:pan-y;

-webkit-overflow-scrolling:touch;

overscroll-behavior-y:contain;

transform:translateZ(0);
}

.swiper-wrapper{
height:100%;
}

.swiper-slide{
position:relative;

height:100%;
overflow:hidden;

background:#000;
}

/* ===============================
画像エリア
=============================== */

.swiper-zoom-container{
position:absolute;

top:0;
left:0;
right:0;
bottom:0;

overflow:hidden;

background:#000;
}

/* 画像 */
.swiper-zoom-container img{
width:100%;
height:100%;

display:block;

object-fit:cover;

/* 上＋左右を優先 */
object-position:center top;
}


/* ===============================
caption
=============================== */

.caption{
position:absolute;

left:0;
right:0;
bottom:0;

z-index:20;

color:#fff;

font-size:18px;
line-height:1.5;
font-weight:700;

padding:
18px
18px
calc(18px + env(safe-area-inset-bottom));

/* 黒ベタ*/
background:#000;
}

.caption small{
display:block;

margin-top:6px;

font-size:12px;
line-height:1.45;
font-weight:400;

opacity:.92;
}

/* ===============================
戻る
=============================== */

.home{
position:fixed;
top:16px;
right:16px;
z-index:9999;
pointer-events:auto;
}

.home a{
position:relative;
z-index:9999;

display:block;

background:rgba(255,255,255,.94);
backdrop-filter:blur(8px);

color:#000;
padding:8px 12px;

border-radius:8px;
text-decoration:none;
font-size:12px;

box-shadow:
0 2px 10px rgba(0,0,0,.18);
}
@media(max-width:768px){

.home{
top:calc(16px + env(safe-area-inset-top));
right:24px;
}

}

/* ===============================
guide
=============================== */

.guide{
height:100%;
min-height:100%;

display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;

padding:30px 24px;

color:#fff;
background:#000;
}

.guide h1{
font-size:19px;
line-height:1.4;
margin:0 0 10px;
font-weight:700;
}

.en-title{
font-size:13px;
line-height:1.5;
opacity:.75;
margin-bottom:28px;
}

.swipe-guide{
margin:0;
font-size:18px;
line-height:1.55;
font-weight:700;
color:#fff;
text-align:center;
}

.gesture{
display:flex;
justify-content:center;
margin-bottom:8px;
}

.arrow{
display:block;
font-size:52px;
line-height:1;
animation:swipeMove 2.6s ease-in-out infinite;
}

.en-sub{
font-size:13px;
margin-top:8px;
opacity:.9;
}

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

/* ===============================
PC最適化（スマホUI化）
=============================== */

@media(min-width:769px){

body{
background:#111;
}

/* スライダー本体 */
.swiper{
max-width:430px;

margin:20px auto;

height:min(
900px,
calc(var(--vh, 1vh) * 100 - 40px)
);

background:#000;

border-radius:24px;

overflow:hidden;

clip-path:inset(0 round 24px);

isolation:isolate;

box-shadow:
0 0 0 1px rgba(255,255,255,.06),
0 20px 60px rgba(0,0,0,.5);
}

/* キャプション */
.caption{
font-size:17px;
}

/* ガイド */
.guide{
padding:40px 30px;
}

/* 戻るボタン */
.home{
right:calc(50% - 215px + 12px);
}

}