@charset "UTF-8";
/* ============================================================
   アイゼン 新台LP  スタイルシート
   ------------------------------------------------------------
   構成
     01. 設定（色・余白などの共通値）
     02. 土台
     03. 部品（バッジ・ボタン）
     04. ファーストビュー
     05. オープニングと流れる帯
     06. セクション見出し
     07. 新台ラインナップ
     07b. 月間出玉ランキング
     08. お知らせ
     09. 店舗情報CTA
     10. SNS
     11. フッター
     12. 店舗選択ページ
     13. 準備中の表示
     14. 動きの制御

   ■ 開店回ごとにこのファイルを触る必要はありません。
     内容の差し替えは _config/campaigns/ で行います。
   ============================================================ */


/* ============================================================
   01. 設定
   ------------------------------------------------------------
   色を変えたいときは、基本ここだけ直せば全体に反映されます。
   ============================================================ */
:root {
	/* 背景 */
	--bg:          #ffffff;   /* ページの地 */
	--surface:     #f5f3ef;   /* カードなどの面 */
	--surface-2:   #eceae4;   /* 少し濃い面 */
	--line:        rgba(20, 18, 24, .14);

	/* PCで見たときの、LP左右の壁紙（スマホ表示には出ません）
	   白くしたいときは outer / outer-2 を両方 #ffffff にしてください。 */
	--outer:       #f7f5f1;   /* 壁紙の上側 */
	--outer-2:     #ebe7df;   /* 壁紙の下側 */
	--outer-tint:  rgba(242, 176, 30, .16);   /* 上部にふわっと乗る金色の光 */

	/* 壁紙に画像（_config の 'bg'）を使うときの濃さ。
	   1 で画像そのまま。数字を下げるほど薄くなり、上の無地が透けます。
	   絵が強すぎてLP本体が負けるときは、.6 くらいまで下げてください。 */
	--outer-image-opacity: 1;

	/* 文字 */
	--text:        #16151a;
	--muted:       #6b6875;

	/* アクセント（台数・ボタン）
	   金色は2種類あります。使い分けを間違えると読みにくくなります。
	     --gold      … ボタンや帯など「面」を塗るときの金
	     --gold-ink  … 白地の上に「文字」として置くときの金（面用より濃い） */
	--gold:        #f2b01e;
	--gold-light:  #ffd972;
	--gold-ink:    #8c6109;

	/* 機種の種別
	   ink 付きは、白地に文字として置くための濃いほうです。 */
	--slot:        #ff3b6b;
	--pachinko:    #29c5f6;
	--slot-ink:    #c4003f;
	--pachinko-ink: #0a6d92;

	/* 横幅・余白 */
	--stage:       540px;
	--pad:         clamp(18px, 5.5vw, 28px);
	--gap:         clamp(28px, 8vw, 44px);

	/* 書体 */
	--font-ja:     "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", meiryo, sans-serif;
	--font-num:    "Barlow Condensed", "Noto Sans JP", sans-serif;

	/* 角丸 */
	--radius:      14px;
}


/* ============================================================
   02. 土台
   ============================================================ */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--font-ja);
	font-weight: 400;
	line-height: 1.75;
	letter-spacing: .02em;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
	position: relative;   /* 左右に置くアトラの位置の基準 */
}

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

a { color: inherit; text-decoration: none; }

ul { margin: 0; padding: 0; list-style: none; }

h1, h2, h3, p { margin: 0; }

svg { display: block; }

/* PC で見たときに、左右へ広がりすぎないようにする土台
   （スマホ幅を想定したデザインのため） */
.stage {
	width: 100%;
	max-width: var(--stage);
	margin-inline: auto;
	background: var(--bg);
	position: relative;
	overflow: hidden;
}

/* PC幅のときだけ、LPの左右に明るい壁紙を敷きます。
   スマホ幅では .stage が画面いっぱいなので、見た目は変わりません。
   色は 01.設定 の --outer / --outer-2 / --outer-tint で調整できます。 */
@media (min-width: 600px) {
	body {
		background-image:
			/* 上部の淡い金色の光 */
			radial-gradient(70vw 46vh at 50% 0%, var(--outer-tint) 0%, transparent 70%),
			/* うっすらした斜めストライプ */
			repeating-linear-gradient(
				-45deg,
				rgba(0, 0, 0, .022) 0 2px,
				transparent 2px 11px),
			/* ベースの明るい地 */
			linear-gradient(180deg, var(--outer) 0%, var(--outer-2) 100%);
		background-position: center top;
		background-repeat: no-repeat;
		background-attachment: fixed;
	}

	/* 開店回ごとの壁紙画像（_config の 'bg'）を、上の地の上に重ねます。
	   画像の指定が無い回では、何も出ません（上の無地のままです）。

	   画像そのものは _inc/head.php が直接ここへ書き込みます。
	   CSS変数に url() を入れると、変数を使う側のファイル
	   （＝この style.css）からの相対パスとして解釈されてしまい、
	   画像に行き着かないためです。 */
	body::before {
		content: "";
		position: fixed;
		inset: 0;
		z-index: -1;
		background-position: center top;
		background-size: cover;
		background-repeat: no-repeat;
		opacity: var(--outer-image-opacity, 1);   /* 濃さは 01.設定 で変えられます */
		pointer-events: none;
	}
	.stage {
		/* 本体も壁紙も明るいので、影で境目をはっきりさせます */
		box-shadow:
			0 2px 12px rgba(0, 0, 0, .12),
			0 26px 70px rgba(0, 0, 0, .30);
	}
}


/* ------------------------------------------------------------
   左右の余白に出るアトラ（飾り）
   ------------------------------------------------------------
   画面が広いときだけ、LPの左右にぽつぽつ現れます。
   スクロールに合わせて上下するので、下まで読むと順に出てきます。

   ■ 数を減らしたいとき
     _inc/wall.php の <img> を消してください（CSSは触らなくて大丈夫です）。
   ■ 出したくないとき
     _config/site.php の mascot.enabled を false にすると、
     ページ内のアトラごと消えます。
   ---------------------------------------------------------- */
.wall { display: none; }

/* 左右の余白は (画面幅 - 本体幅) ÷ 2。
   余白が十分に広い画面でのみ出します。 */
@media (min-width: 1000px) {
	.wall {
		display: block;
		position: absolute;
		inset: 0;
		pointer-events: none;   /* クリックの邪魔をしない */
		z-index: 0;
	}

	.wall__atra {
		position: absolute;
		width: 84px;
		opacity: .95;
		filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .3));
		animation: floatY 3.4s ease-in-out infinite;
	}

	/* 反転して置くもの（向きに変化を付けます） */
	.wall__atra--flip {
		animation-name: floatYFlip;
	}

	/* --- 配置。left/right の数字が本体からの距離です --- */
	.wall__atra--1 {
		top: 7%;
		left: calc(50% - var(--stage) / 2 - 148px);
		width: 88px;
	}
	.wall__atra--2 {
		top: 24%;
		right: calc(50% - var(--stage) / 2 - 122px);
		width: 68px;
		animation-duration: 4.2s;
		animation-delay: .8s;
	}
	.wall__atra--3 {
		top: 44%;
		left: calc(50% - var(--stage) / 2 - 108px);
		width: 96px;
		animation-duration: 3.8s;
		animation-delay: 1.6s;
	}
	.wall__atra--4 {
		top: 62%;
		right: calc(50% - var(--stage) / 2 - 158px);
		width: 74px;
		animation-duration: 4.6s;
		animation-delay: .4s;
	}
	.wall__atra--5 {
		top: 80%;
		left: calc(50% - var(--stage) / 2 - 132px);
		width: 70px;
		animation-duration: 4s;
		animation-delay: 2.2s;
	}
	.wall__atra--6 {
		top: 93%;
		right: calc(50% - var(--stage) / 2 - 112px);
		width: 86px;
		animation-duration: 3.6s;
		animation-delay: 1.2s;
	}
}


/* ============================================================
   03. 部品
   ============================================================ */

/* ---- 種別ラベル（スロット／パチンコ） ---- */
.type {
	display: inline-block;
	padding: .18em .9em;
	border-radius: 999px;
	font-size: .72rem;
	font-weight: 700;
	line-height: 1.7;
	letter-spacing: .12em;
	white-space: nowrap;
}

.type--slot {
	background: color-mix(in srgb, var(--slot) 14%, #fff);
	border: 1px solid color-mix(in srgb, var(--slot) 45%, #fff);
	color: var(--slot-ink);
	text-shadow: none;
}

.type--pachinko {
	background: color-mix(in srgb, var(--pachinko) 14%, #fff);
	border: 1px solid color-mix(in srgb, var(--pachinko) 45%, #fff);
	color: var(--pachinko-ink);
	text-shadow: none;
}

/* ---- 台数 ---- */
.count {
	display: flex;
	align-items: baseline;
	gap: .1em;
	font-family: var(--font-num);
	line-height: .9;
	color: var(--gold-ink);
}

.count__num {
	font-size: clamp(3.4rem, 17vw, 5.4rem);
	font-weight: 800;
	letter-spacing: -.01em;
	background: linear-gradient(170deg, #c1870c 8%, #a06c07 55%, #714a04 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	/* 背景を文字で切り抜いているため、影は出しません */
	text-shadow: none;
}

.count__unit {
	font-size: clamp(1.4rem, 6vw, 2rem);
	font-weight: 700;
	font-family: var(--font-ja);
	color: var(--gold-ink);
}

.count__caption {
	align-self: flex-end;
	margin-left: .5em;
	padding-bottom: .35em;
	font-family: var(--font-ja);
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .18em;
	color: var(--muted);
}

.count--sm .count__num { font-size: clamp(2.2rem, 10vw, 3rem); }
.count--sm .count__unit { font-size: 1.1rem; }

/* ---- ボタン ---- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .6em;
	width: 100%;
	min-height: 60px;
	padding: .9em 1.4em;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--gold-light), var(--gold));
	color: #201400;
	font-weight: 900;
	font-size: 1.02rem;
	letter-spacing: .04em;
	box-shadow: 0 10px 26px -10px rgba(242, 176, 30, .75);
	transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.btn:hover,
.btn:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 16px 32px -12px rgba(242, 176, 30, .85);
	filter: brightness(1.05);
}

.btn:active { transform: translateY(0); }

.btn__icon {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}


/* ============================================================
   04. ファーストビュー
   ------------------------------------------------------------
   画像は1枚だけ。キャッチ・機種名・台数は文字で重ねます。
   （旧サイトのように背景／キャラ／文字を別画像に分ける必要はありません）
   ============================================================ */
.hero {
	position: relative;
	min-height: 92svh;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	overflow: hidden;
	isolation: isolate;
}

.hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	animation: heroZoom 12s ease-out forwards;
}

/* ------------------------------------------------------------
   重ねで作るメインビジュアル
   ------------------------------------------------------------
   背景・キャラ・キャッチ・機種ロゴを別々の画像で用意した場合の表示です。
   4枚とも同じキャンバスサイズで書き出してあれば、そのまま重なります。
   開店回ごとに座標を調整する必要はありません。

   ■ 1枚絵で作る場合は、この指定は使われません。
   ---------------------------------------------------------- */
/* 重ねのときは、絵を切らずに全部見せます。
   ファーストビューの高さは、絵の縦横比から決まります。
   （1枚絵のときのように画面いっぱいには敷きません。
     ポスターのように作り込まれた絵を、端まで見せるためです） */
.hero--layers { min-height: 0; }

.hero__media--layers {
	position: relative;
	width: 100%;
	overflow: hidden;
	/* aspect-ratio は画像の実寸から _inc/lp.php が入れます */
}

/* 重ねのときは、背景を寄せません。
   4枚は位置を合わせて作られているので、背景だけ動かすとズレて見えます。 */
.hero--layers .hero__layer--bg { animation: none; }

.hero__layer {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	/* 器の縦横比が絵と同じなので、切れも余白も出ません */
	object-fit: contain;
}

/* 絵の下端を、ページの白へ溶かします。
   これが無いと、絵の切れ目が横一直線に見えてしまいます。 */
.hero--layers .hero__scrim {
	top: auto;
	height: 30%;
	background: linear-gradient(to bottom,
		transparent 0%,
		rgba(255, 255, 255, .30) 38%,
		rgba(255, 255, 255, .72) 62%,
		rgba(255, 255, 255, .95) 82%,
		var(--bg) 94%);
}

/* 文字は絵の下に置くので、下敷き（すりガラス）は要りません */
.hero--layers .hero__body {
	padding-top: clamp(14px, 4vw, 22px);
	padding-bottom: clamp(30px, 9vw, 48px);
}

.hero--layers .hero__body::before { display: none; }

/* 絵の中にキャッチも機種名も入っているので、行間を詰めます */
.hero--layers .hero__date { margin-bottom: .8em; }

/* 背景だけ、ゆっくり寄っていきます */
.hero__layer--bg { animation: heroZoom 12s ease-out forwards; }

/* キャラ・キャッチ・ロゴは、順に浮かび上がらせます */
.hero__layer--chara,
.hero__layer--catch,
.hero__layer--logo {
	opacity: 0;
	animation: layerIn 1s cubic-bezier(.2, .7, .3, 1) forwards;
}

.hero__layer--chara { animation-delay: calc(var(--intro) + .15s); }
.hero__layer--logo  { animation-delay: calc(var(--intro) + .40s); }
.hero__layer--catch { animation-delay: calc(var(--intro) + .62s); }

/* ------------------------------------------------------------
   キャラの入れ替え
   ------------------------------------------------------------
   _config/campaigns/〇〇.php の layers に、画像を並べて書いたときの動きです。

       'chara' => ['hero_tohori_chara.webp', 'hero_tohori_chara2.webp'],

   書いた順に、数秒ごとに、ふわっと入れ替わります。
   1枚だけ書いたときは、これまで通り出しっぱなしです。

   ■ 映っている時間を変えたい
     すぐ下の --chara-hold の秒数だけ変えてください。
     1周の長さは「この秒数 × 枚数」で自動的に決まります。

   ■ 枚数
     2〜4枚に対応しています。切り替え方を枚数ごとに用意する必要があるため
     （「14. 演出」の charaCycle2〜4）、5枚以上には対応していません。
   ---------------------------------------------------------- */
:root { --chara-hold: 4.5s; }   /* 1枚が映っている時間 */

.hero__cycle { --n: 2; }        /* 枚数。実際の値は _inc/lp.php が入れます */

.hero__cycle-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;

	/* 出番が来た1枚だけ、下のアニメーションで見えます */
	opacity: 0;
	animation-duration: calc(var(--chara-hold) * var(--n));
	animation-timing-function: ease;
	animation-iteration-count: infinite;

	/* 2枚目・3枚目…は、その順番のぶんだけ遅れて出ます */
	animation-delay: calc(var(--intro) + var(--chara-hold) * var(--i));
}

.hero__cycle--2 .hero__cycle-img { animation-name: charaCycle2; }
.hero__cycle--3 .hero__cycle-img { animation-name: charaCycle3; }
.hero__cycle--4 .hero__cycle-img { animation-name: charaCycle4; }

/* 画面には出さないけれど、読み上げや検索エンジンには残す文字 */
.is-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* 画像の上に文字を載せるための幕。
   下へ行くほど白くなり、ページの地（白）へ自然につながります。
   これがないと、絵柄の濃い画像のときに黒文字が読めなくなります。 */
.hero__scrim {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to bottom,
			rgba(255, 255, 255, .22) 0%,
			rgba(255, 255, 255, .04) 26%,
			rgba(255, 255, 255, .62) 58%,
			rgba(255, 255, 255, .93) 80%,
			var(--bg) 97%);
}

.hero__body {
	position: relative;
	padding: 0 var(--pad) clamp(60px, 16vw, 90px);
	/* 絵柄の上に黒文字が乗るので、白いふちどりで浮かせます */
	text-shadow: 0 1px 10px rgba(255, 255, 255, .9);
}

/* 文字の裏だけ、うっすら白いすりガラスを敷きます。
   メインビジュアルに文字（機種ロゴ・煽り文句など）が入っていると、
   サイト側の文字と重なって読めなくなるため、その下敷きです。

   上へ向かって少しずつ消えるので、境目は出ません。
   ・絵柄をもっと見せたい → .82 の数字を小さく（例 .6）
   ・もっとはっきり読ませたい → 数字を大きく（例 .92） */
.hero__body::before {
	content: "";
	position: absolute;
	inset: -18px -6px -6px -6px;
	z-index: -1;
	border-radius: 20px;
	background: rgba(255, 255, 255, .82);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	/* 上端をふわっと消して、絵となじませます */
	-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 14%);
	mask-image: linear-gradient(to bottom, transparent 0%, #000 14%);
}

/* ---- 開店日 ---- */
.hero__date {
	display: flex;
	align-items: center;
	gap: .8em;
	margin-bottom: 1.1em;
}

.hero__date-label {
	font-family: var(--font-num);
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .28em;
	color: var(--gold-ink);
}

.hero__date-value {
	position: relative;
	padding-left: .9em;
	font-size: .84rem;
	font-weight: 700;
	letter-spacing: .06em;
	color: var(--text);
}

.hero__date-value::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 1px;
	height: 1em;
	transform: translateY(-50%);
	background: var(--line);
}

/* ---- 開店日（重ねのときの主役） ----
   機種名と台数は絵とラインナップに出るので、
   ファーストビューでは「いつ・どこで」を大きく出します。 */
.hero__eyebrow {
	margin-bottom: .5em;
	font-family: var(--font-num);
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .28em;
	color: var(--gold-ink);
}

.hero__open {
	display: flex;
	align-items: baseline;
	gap: .06em;
	margin-bottom: .7em;
	font-family: var(--font-num);
	line-height: .9;
}

.hero__open-md {
	font-size: clamp(3.2rem, 16vw, 5rem);
	font-weight: 800;
	letter-spacing: -.02em;
	background: linear-gradient(170deg, #c1870c 8%, #a06c07 55%, #714a04 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	text-shadow: none;
}

.hero__open-week {
	font-size: clamp(1.2rem, 5.4vw, 1.7rem);
	font-weight: 700;
	color: var(--gold-ink);
}

.hero__open-suffix {
	align-self: flex-end;
	margin-left: .5em;
	padding-bottom: .4em;
	font-family: var(--font-ja);
	font-size: .84rem;
	font-weight: 700;
	letter-spacing: .18em;
	color: var(--muted);
}

/* ---- 全体の規模（ラインナップへの導入） ---- */
.hero__summary {
	margin-top: 1em;
	font-size: .86rem;
	font-weight: 700;
	letter-spacing: .06em;
	color: var(--muted);
}

.hero__summary b {
	margin-inline: .18em;
	font-family: var(--font-num);
	font-size: 1.5em;
	font-weight: 800;
	color: var(--gold-ink);
}

/* ---- キャッチコピー ---- */
.hero__catch {
	margin-bottom: .7em;
	font-size: clamp(1.55rem, 6.4vw, 2.15rem);
	font-weight: 900;
	line-height: 1.45;
	letter-spacing: .01em;
	text-shadow:
		0 1px 3px rgba(255, 255, 255, 1),
		0 2px 22px rgba(255, 255, 255, .95);
}

/* ---- 機種名 ---- */
.hero__machine { margin-bottom: .5em; }

.hero__machine-type { margin-bottom: .6em; }

.hero__machine-name {
	font-size: clamp(1.15rem, 4.8vw, 1.5rem);
	font-weight: 700;
	line-height: 1.45;
	text-shadow:
		0 1px 3px rgba(255, 255, 255, 1),
		0 2px 16px rgba(255, 255, 255, .95);
}

/* ---- 台数 ---- */
.hero__count { margin-bottom: 1em; }

/* ---- 店舗名 ---- */
.hero__shop {
	display: inline-block;
	padding: .4em 1.1em;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: rgba(255, 255, 255, .78);
	backdrop-filter: blur(6px);
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .08em;
}

/* ---- キャラクター（アトラ） ---- */
.hero__mascot {
	position: absolute;
	right: clamp(6px, 3vw, 18px);
	bottom: clamp(52px, 14vw, 80px);
	width: clamp(88px, 26vw, 130px);
	z-index: 2;
	animation: floatY 3.4s ease-in-out infinite;
	filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .28));
	pointer-events: none;
}

/* ---- スクロール誘導 ---- */
.hero__scroll {
	position: absolute;
	left: 50%;
	bottom: 14px;
	transform: translateX(-50%);
	font-family: var(--font-num);
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .3em;
	color: var(--muted);
}

.hero__scroll span { display: block; animation: floatY 2s ease-in-out infinite; }


/* ============================================================
   05. オープニングと流れる帯
   ------------------------------------------------------------
   ■ オープニング
     ページを開いた瞬間、「アイゼンに行きますか。」が画面いっぱいに出て、
     約2秒で消え、メインビジュアル（リコリス）が現れます。
     画像は _assets/img/common/catch_ikimasuka.webp です。
     置けば出て、消せば出ません。差し替えても座標の調整は要りません。

     流れ（数字を変えれば長さが変わります）
       0.00s  幕が出た状態から、文字がぼけ→くっきり浮かび上がる（.opening__img）
       0.75s  文字の上を光がすっと横切る（.opening__inner::after）
       1.45s  幕が上へ抜けながら消えはじめる（.opening）
       2.05s  幕が消えきる。以後クリックも表示も一切じゃましません

     ★ メインビジュアルの動き出しは --intro で後ろへずらしています。
       幕が開くのと同時にリコリスが動きはじめ、いちばん最後に主役が残ります。
       長さを変えたときは --intro も合わせてください（幕が消える少し前が目安）。

   ■ 流れる帯
     旧サイトでは横長画像を2枚並べて流していた部分です。
     文字だけなので画像は不要になりました。
   ============================================================ */

/* 幕が出るページだけ、メインビジュアルの動き出しを後ろへずらします。
   幕が無いページ（画像を置いていない場合）は 0s のままなので、
   これまで通りすぐに動きはじめます。 */
:root         { --intro: 0s; }
.has-opening  { --intro: 1.5s; }

.opening {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: grid;
	place-items: center;
	padding: var(--pad);
	overflow: hidden;
	background: var(--bg);
	/* 幕は見せるだけ。最初からクリックは下の内容に通します */
	pointer-events: none;
	animation: openingOut .6s ease 1.45s forwards;
}

/* 文字の後ろに、ふわっと広がる金色の光
   （文字だけの画像のときに効きます。背景入りのときは下で絵に差し替えます） */
.opening::before {
	content: "";
	position: absolute;
	inset: -20% -10%;
	background: radial-gradient(46% 40% at 50% 50%,
		rgba(242, 176, 30, .45), rgba(242, 176, 30, .12) 58%, transparent 74%);
	animation: openingGlow 2.4s ease-in-out infinite;
}

.opening__inner {
	position: relative;
	display: block;
	width: min(82%, 460px);
	animation: openingIn .8s cubic-bezier(.16, .84, .3, 1.12) both;
}

/* ---- 背景入りの1枚を使うとき（opening.webp） ----------------
   絵は切らずに全部映します。文字が絵の端まで使われているので、
   画面いっぱいに引き伸ばして切ると、文字の左右が欠けてしまうためです。

   そのぶん画面比によっては上下（または左右）が余るので、
   同じ絵を大きくぼかしたもので余りを埋めます。
   これで、どんな画面の形でも隙間や白帯が出ません。
   -------------------------------------------------------------- */
.opening--full {
	padding: 0;
	background: #12080a;   /* ぼかしが乗る前の下地。絵の暗い部分に合わせています */
}

.opening--full::before {
	/* 画像は _inc/head.php が入れます */
	inset: 0;
	background-size: cover;
	background-position: center;
	/* 大きめに拡大してからぼかすと、ふちが透けません */
	transform: scale(1.15);
	filter: blur(26px) saturate(1.15) brightness(.92);
	animation: none;
}

/* 画面ぴったりに広げます。
   grid の中央寄せのままだと高さが「中身なり」になり、
   絵の高さが画面より大きいときに下がはみ出してしまうため、
   ここだけ絶対配置にして高さを画面に固定します。 */
.opening--full .opening__inner {
	position: absolute;
	inset: 0;
	width: auto;
}

.opening--full .opening__img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* 絵の中にすでに光や煌めきが入っているので、光を横切らせる演出は重ねません */
.opening--full .opening__inner::after { content: none; }

/* 縦横比はそのまま。幅だけ画面に合わせて収めます
   （どんなサイズの画像に差し替えても崩れません）。 */
.opening__img {
	width: 100%;
	height: auto;
}

/* 文字の上を、光がすっと横切ります。
   光の形は、キャッチ画像そのものを型（マスク）にして切り抜いています。
   そのため文字からはみ出さず、画像を差し替えれば光り方も自動で付いてきます。
   型の指定だけは _inc/head.php 側にあります（パスの解決の都合。理由はそちらに書いています）。

   マスクに対応していないブラウザでは、光そのものを出しません
   （四角い白帯が流れてしまうため）。 */
@supports ((mask-image: url("")) or (-webkit-mask-image: url(""))) {
	.opening__inner::after {
		content: "";
		position: absolute;
		inset: 0;
		-webkit-mask-size: 100% 100%;
		mask-size: 100% 100%;
		background: linear-gradient(100deg,
			transparent 45%,
			rgba(255, 255, 255, .28) 48%,
			rgba(255, 255, 255, .95) 50%,
			rgba(255, 255, 255, .28) 52%,
			transparent 55%);
		background-repeat: no-repeat;
		background-size: 260% 100%;
		animation: openingShine .9s ease-in-out .75s both;
	}
}

@keyframes openingIn {
	from { opacity: 0; transform: scale(.84) translateY(18px); filter: blur(8px); }
	to   { opacity: 1; transform: none;                        filter: none; }
}

@keyframes openingShine {
	from { background-position: 150% 0; }
	to   { background-position: -50% 0; }
}

@keyframes openingGlow {
	0%, 100% { opacity: .65; transform: scale(1); }
	50%      { opacity: 1;   transform: scale(1.06); }
}

/* 幕が抜けるところ。少し上へ動かしながら消すと、
   「めくれた」感じが出て、下のリコリスへ視線がつながります。
   visibility: hidden まで入れているので、消えたあとは
   読み上げソフトからも完全に外れます。 */
@keyframes openingOut {
	from { opacity: 1; transform: translateY(0);     visibility: visible; }
	to   { opacity: 0; transform: translateY(-4vh);  visibility: hidden; }
}

.band {
	overflow: hidden;
	padding: .7em 0;
	background: linear-gradient(90deg, var(--gold), var(--gold-light), var(--gold));
	border-block: 1px solid rgba(0, 0, 0, .2);
}

.band__track {
	display: flex;
	width: max-content;
	animation: marquee 22s linear infinite;
}

.band__item {
	padding: 0 1.2em;
	font-size: .92rem;
	font-weight: 900;
	letter-spacing: .1em;
	white-space: nowrap;
	color: #201400;
}

.band__item::after {
	content: "★";
	margin-left: 1.2em;
	opacity: .5;
}


/* ============================================================
   06. セクション見出し
   ============================================================ */
.main { position: relative; }

.section {
	padding: var(--gap) var(--pad);
}

.section__title {
	display: flex;
	flex-direction: column;
	gap: .25em;
	margin-bottom: 1.6em;
	text-align: center;
}

.section__title-en {
	font-family: var(--font-num);
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .34em;
	color: var(--gold-ink);
}

.section__title-ja {
	font-size: clamp(1.35rem, 5.6vw, 1.75rem);
	font-weight: 900;
	letter-spacing: .04em;
}

/* 見出しの下に出る期間（今週のオススメの「7日〜13日」）。
   _config/osusume.php に書いたときだけ出ます。 */
.section__title-period {
	align-self: center;
	margin-top: .5em;
	padding: .22em 1.1em;
	border: 1px solid rgba(242, 176, 30, .55);
	border-radius: 999px;
	background: rgba(242, 176, 30, .12);
	font-family: var(--font-num);
	font-size: .88rem;
	font-weight: 800;
	letter-spacing: .08em;
	line-height: 1.7;
	color: var(--gold-ink);
}


/* ============================================================
   07. 新台ラインナップ
   ============================================================ */
.lineup__list {
	display: flex;
	flex-direction: column;
	gap: clamp(18px, 5vw, 26px);
}

.card {
	position: relative;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: linear-gradient(165deg, var(--surface-2), var(--surface));
	overflow: hidden;
}

/* 絵の縦横比は img の width / height（画像から読み取った値）に従います。
   960×396 のような横長でも、切らずに全部映ります。 */
.card__media {
	position: relative;
	background: var(--surface-2);
}

.card__media img {
	width: 100%;
	height: auto;
}

/* 先納品バッジ */
.card__sakinou {
	position: absolute;
	top: 10px;
	left: 10px;
	padding: .35em 1em;
	border-radius: 999px;
	background: var(--slot);
	color: #fff;
	font-size: .74rem;
	font-weight: 900;
	letter-spacing: .08em;
	box-shadow: 0 6px 16px -6px rgba(255, 59, 107, .9);
}

/* 種別・機種名・台数を1行にまとめた、薄い帯です。
   機種名が長いときは、機種名だけが2行に折り返します。 */
.card__body {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: .7em;
	padding: 10px clamp(12px, 3.6vw, 16px);
}

.card__body .type { font-size: .66rem; padding: .1em .8em; }

.card__name {
	font-size: clamp(.9rem, 3.8vw, 1.02rem);
	font-weight: 700;
	line-height: 1.4;
}

.card__count { justify-self: end; }
.card__count .count__num { font-size: clamp(1.7rem, 7.6vw, 2.1rem); }
.card__count .count__unit { font-size: .95rem; }


/* ============================================================
   07b. 月間出玉ランキング
   ------------------------------------------------------------
   お店で作ったランキング表の画像を、そのまま1枚ずつ並べます。
   差し替えは _assets/img/common/ranking/ の画像を置き換えるだけです。
   ============================================================ */
.ranking__list {
	display: flex;
	flex-direction: column;
	gap: clamp(18px, 5vw, 26px);
}

.ranking__item {
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface-2);
	overflow: hidden;
}

/* 絵の中の文字を拡大して読めるように、画像そのものへのリンクにしています */
.ranking__link {
	display: block;
	position: relative;
	transition: filter .2s ease;
}

.ranking__link:hover,
.ranking__link:focus-visible { filter: brightness(1.04); }

.ranking__link img {
	width: 100%;
	height: auto;
}

/* 「タップで拡大」。絵の上に小さく重ねます。 */
.ranking__zoom {
	position: absolute;
	right: 10px;
	bottom: 10px;
	display: inline-flex;
	align-items: center;
	gap: .45em;
	padding: .4em .9em;
	border-radius: 999px;
	background: rgba(20, 18, 24, .68);
	color: #fff;
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .06em;
	line-height: 1.6;
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}

.ranking__zoom svg {
	width: 13px;
	height: 13px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}


/* ============================================================
   07c. 店内配置図
   ------------------------------------------------------------
   お店で作った配置図の画像を、そのまま1枚出します。
   差し替えは _assets/img/common/floormap_◯◯.webp を置き換えるだけです。

   横長の絵なので、スマホでは小さく出ます。ランキングと同じく、
   押すと画像だけが開いて拡大して見られるようにしています。
   ============================================================ */
.floormap__card {
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface-2);
	overflow: hidden;
}

.floormap__link {
	display: block;
	position: relative;
	transition: filter .2s ease;
}

.floormap__link:hover,
.floormap__link:focus-visible { filter: brightness(1.04); }

.floormap__link img {
	display: block;
	width: 100%;
	height: auto;
}

/* 「タップで拡大」。ランキングと同じ見た目にそろえています。 */
.floormap__zoom {
	position: absolute;
	right: 10px;
	bottom: 10px;
	display: inline-flex;
	align-items: center;
	gap: .45em;
	padding: .4em .9em;
	border-radius: 999px;
	background: rgba(20, 18, 24, .68);
	color: #fff;
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .06em;
	line-height: 1.6;
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}

.floormap__zoom svg {
	width: 13px;
	height: 13px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}


/* ============================================================
   08. お知らせ
   ------------------------------------------------------------
   ファン感謝祭・おすすめ機種など、その都度のお知らせです。
   中身は _config/news.php で差し替えます。ここは触りません。

   新台ラインナップと見分けが付くよう、左端に金の帯を入れ、
   面をほんのり金色に振ってあります。
   ============================================================ */
.news__list {
	display: flex;
	flex-direction: column;
	gap: clamp(14px, 4vw, 20px);
}

.news-card {
	display: block;
	position: relative;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background:
		radial-gradient(130% 100% at 0% 0%, rgba(242, 176, 30, .16), transparent 62%),
		var(--surface);
	overflow: hidden;
}

/* 左端の金の帯 */
.news-card::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 4px;
	background: linear-gradient(180deg, var(--gold-light), var(--gold));
}

/* リンクが付いているときだけ、押せる見た目にします */
.news-card--link {
	transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.news-card--link:hover,
.news-card--link:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 12px 26px -14px rgba(0, 0, 0, .55);
}

/* 画像は縦横比そのまま。横長でも縦長でも収まります */
.news-card__media { background: var(--surface-2); }
.news-card__media img { width: 100%; }

.news-card__body {
	padding: clamp(15px, 4.6vw, 21px);
	padding-left: calc(clamp(15px, 4.6vw, 21px) + 4px);   /* 左の金の帯のぶん */
}

.news-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5em .8em;
	margin-bottom: .5em;
}

.news-card__label {
	display: inline-block;
	padding: .18em .95em;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--gold-light), var(--gold));
	color: #2a1c00;
	font-size: .72rem;
	font-weight: 900;
	line-height: 1.7;
	letter-spacing: .1em;
	white-space: nowrap;
}

.news-card__date {
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .06em;
	color: var(--muted);
}

.news-card__title {
	font-size: clamp(1.05rem, 4.4vw, 1.25rem);
	font-weight: 900;
	line-height: 1.55;
}

.news-card__text {
	margin-top: .6em;
	font-size: .94rem;
	line-height: 1.85;
}

/* 「詳しくはこちら」。リンクが書いてあるときだけ出ます */
.news-card__more {
	display: inline-flex;
	align-items: center;
	gap: .4em;
	margin-top: .9em;
	font-size: .88rem;
	font-weight: 900;
	letter-spacing: .04em;
	color: var(--gold-ink);
}

.news-card__arrow {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform .2s ease;
}

.news-card--link:hover .news-card__arrow,
.news-card--link:focus-visible .news-card__arrow {
	transform: translateX(3px);
}


/* ============================================================
   08b. 今週のオススメ
   ------------------------------------------------------------
   今週のオススメ機種などのバナーを1枚そのまま出します。
   中身は _assets/img/common/osusume_◯◯.webp を置き換えるだけです。

   画像だけの欄なので、枠は最小限にして絵を主役にしています。
   縦横比はそのまま。横長でも縦長でも収まります。
   ============================================================ */
.osusume__card {
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface-2);
	overflow: hidden;
}

.osusume__card img {
	display: block;
	width: 100%;
}


/* ============================================================
   09. 店舗情報CTA
   ============================================================ */
.shopcta {
	padding: clamp(22px, 7vw, 32px) clamp(18px, 5.5vw, 26px);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background:
		radial-gradient(120% 90% at 50% 0%, rgba(242, 176, 30, .13), transparent 60%),
		var(--surface);
	text-align: center;
}

.shopcta__label {
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .2em;
	color: var(--muted);
}

.shopcta__name {
	margin: .3em 0 1.1em;
	font-size: clamp(1.2rem, 5vw, 1.5rem);
	font-weight: 900;
}


/* ============================================================
   10. SNS
   ============================================================ */
.sns__list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
}

/* ---- バナー画像を置いたとき ----
   バナーが1枚でもあれば、2列 → 1列に切り替わります。
   まだバナーが無いSNSは、下のアイコンボタンのまま横いっぱいで並びます。 */
.sns__list--banner { grid-template-columns: 1fr; }

.sns__banner {
	display: block;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--surface);
	transition: transform .2s ease, box-shadow .2s ease;
}

.sns__banner:hover,
.sns__banner:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 12px 26px -14px rgba(0, 0, 0, .55);
}

/* 縦横比はそのまま。どんな比率のバナーでも収まります */
.sns__banner img { width: 100%; }

.sns__btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .35em;
	min-height: 108px;
	padding: 1em .6em;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
	transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

.sns__btn:hover,
.sns__btn:focus-visible {
	transform: translateY(-3px);
	border-color: rgba(20, 18, 24, .3);
	background: var(--surface-2);
}

.sns__icon {
	width: 26px;
	height: 26px;
	fill: currentColor;
}

.sns__name {
	font-family: var(--font-num);
	font-size: .92rem;
	font-weight: 700;
	letter-spacing: .1em;
}

.sns__shop {
	font-size: .7rem;
	color: var(--muted);
	letter-spacing: .06em;
}

/* 各SNSのブランドカラー。
   白地では明るすぎて読めない色があるため、白地用に少し濃くしています。 */
.sns__btn--x       { color: #14131a; }
.sns__btn--youtube { color: #d8241b; }
.sns__btn--line    { color: #067f34; }
.sns__btn--tiktok  { color: #0d7671; }


/* ============================================================
   11. フッター
   ============================================================ */
.footer {
	margin-top: var(--gap);
	padding: var(--gap) var(--pad) calc(var(--gap) + env(safe-area-inset-bottom));
	border-top: 1px solid var(--line);
	background: var(--surface-2);
}

.footer__logo {
	display: flex;
	flex-direction: column;
	gap: .2em;
	margin-bottom: 1.6em;
	text-align: center;
}

.footer__logo-en {
	font-family: var(--font-num);
	font-size: 1.9rem;
	font-weight: 800;
	letter-spacing: .3em;
	text-indent: .3em;
	color: var(--gold-ink);
}

.footer__logo-ja {
	font-size: .74rem;
	letter-spacing: .16em;
	color: var(--muted);
}

/* ロゴ画像を置いたときの表示。
   縦長・横長どちらのロゴでも、はみ出さずに収まります。
   大きさを変えたいときは max-width と max-height の数字だけ直してください。 */
.footer__logo-img {
	width: auto;
	height: auto;
	max-width: min(280px, 100%);
	max-height: 170px;
	margin-inline: auto;
}

/* 店舗選択ページのフッター。2店舗のロゴを横に並べます。
   横幅をそろえる形にしています。ロゴは横長の度合いがそれぞれ違うので、
   高さで揃えるより、こちらのほうが文字の大きさが近く見えます。
   ロゴが増えたときや画面が狭いときは、自動で折り返して2段になります。
   大きさを変えたいときは width の3つの数字だけ直してください。
     104px … これ以上は小さくしない下限
     33%   … ふだんの大きさ（フッターの横幅に対する割合）
     162px … これ以上は大きくしない上限 */
.footer__logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 1.1em 1.7em;
	margin-bottom: 1.6em;
}

.footer__logos .footer__logo-img {
	width: clamp(104px, 33%, 162px);
	max-width: none;
	max-height: none;
	margin-inline: 0;
}

.footer__notices {
	margin-bottom: 1.6em;
	font-size: .72rem;
	line-height: 1.9;
	color: var(--muted);
}

.footer__notices li { padding-left: 1em; text-indent: -1em; }
.footer__notices li::before { content: "●"; margin-right: .3em; font-size: .7em; }

.footer__biz {
	margin-bottom: 1.6em;
	font-size: .72rem;
	line-height: 1.9;
	color: var(--muted);
}

.footer__biz-name { font-weight: 700; color: var(--text); }
.footer__biz a { text-decoration: underline; }

.footer__copy {
	font-family: var(--font-num);
	font-size: .68rem;
	letter-spacing: .06em;
	color: #6b6875;
	text-align: center;
}


/* ============================================================
   12. 店舗選択ページ
   ============================================================ */
.branch {
	position: relative;
	padding: clamp(48px, 14vw, 76px) var(--pad) 0;
}

.branch__head {
	margin-bottom: clamp(28px, 8vw, 40px);
	text-align: center;
}

.branch__label {
	font-family: var(--font-num);
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .34em;
	color: var(--gold-ink);
}

.branch__date {
	margin-top: .5em;
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .06em;
	color: var(--muted);
}

.branch__title {
	margin: .5em 0 .6em;
	font-size: clamp(1.5rem, 6.4vw, 2rem);
	font-weight: 900;
	line-height: 1.5;
}

.branch__lead {
	font-size: .84rem;
	color: var(--muted);
	letter-spacing: .04em;
}

.branch__list {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* ---- 店舗カード ---- */
.shopcard {
	position: relative;
	display: block;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--surface);
	isolation: isolate;
	transition: transform .25s ease, border-color .25s ease;
}

.shopcard:hover,
.shopcard:focus-visible {
	transform: translateY(-3px);
	border-color: rgba(150, 105, 10, .5);
}

/* カードの上半分に出る横長ビジュアル。
   文字はこの下に置くので、絵に文字が重なることはありません。 */
.shopcard__media {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--surface-2);
	border-bottom: 1px solid var(--line);
}

.shopcard__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 横長の専用カット（_config の 'card'）。そのまま全部映ります。
   絵の縦横比は画像まかせなので、16:9 でない絵を入れても切れません。 */
.shopcard__media--full { aspect-ratio: auto; }
.shopcard__media--full img { height: auto; object-fit: contain; }

/* 専用カットが無く、縦長のメインビジュアルで代用しているとき。
   下半分は文字が乗る前提で描かれているので、上寄りで切ります。 */
.shopcard__media--crop img { object-position: 50% 25%; }

.shopcard__body {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .3em;
	padding: clamp(18px, 5.5vw, 26px);
}

.shopcard__label {
	padding: .2em .9em;
	border: 1px solid var(--line);
	border-radius: 999px;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .12em;
	color: var(--muted);
}

.shopcard__name {
	font-size: clamp(1.25rem, 5.4vw, 1.6rem);
	font-weight: 900;
	line-height: 1.35;
}

.shopcard__machine {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: .5em;
	font-size: .82rem;
	color: var(--muted);
}

.shopcard__count {
	font-family: var(--font-num);
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--gold-ink);
}

.shopcard__go {
	display: inline-flex;
	align-items: center;
	gap: .35em;
	margin-top: .8em;
	font-size: .88rem;
	font-weight: 700;
	color: var(--gold-ink);
}

.shopcard__go svg {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform .2s ease;
}

.shopcard:hover .shopcard__go svg { transform: translateX(3px); }

.branch__mascot {
	width: clamp(100px, 30vw, 150px);
	margin: clamp(24px, 7vw, 36px) auto 0;
	animation: floatY 3.4s ease-in-out infinite;
}


/* ============================================================
   13. 準備中の表示
   ============================================================ */
.empty {
	padding: clamp(70px, 20vw, 110px) var(--pad) var(--gap);
	text-align: center;
}

.empty__label {
	font-family: var(--font-num);
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .34em;
	color: var(--gold-ink);
}

.empty__text {
	margin: .8em 0 1.8em;
	font-size: clamp(1.2rem, 5.2vw, 1.5rem);
	font-weight: 900;
	line-height: 1.7;
}


/* ============================================================
   14. 動きの制御
   ============================================================ */

/* スクロールで現れる要素。
   JavaScript が .is-visible を付けると表示されます。

   隠す指定は .js が付いているときだけ効かせます。
   こうしておくと、JS が無効な環境では最初から全部見えるので、
   内容が読めなくなる事故が起きません。 */
.js .reveal {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .3, 1);
}

/* 横から出てくるもの（新台ラインナップのカード）。
   上から順に、左・右・左…と交互になるよう
   _inc/lp.php 側で --left / --right を付け分けています。 */
.js .reveal--left  { transform: translateX(-52px); }
.js .reveal--right { transform: translateX(52px); }

.js .reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* ファーストビューの文字を、上から順に少しずつ表示 */
.hero__date,
.hero__eyebrow,
.hero__open,
.hero__catch,
.hero__machine,
.hero__count,
.hero__shop,
.hero__summary {
	opacity: 0;
	animation: riseIn .9s cubic-bezier(.2, .7, .3, 1) forwards;
}

.hero__date    { animation-delay: calc(var(--intro) + .15s); }
.hero__eyebrow { animation-delay: calc(var(--intro) + .15s); }
.hero__open    { animation-delay: calc(var(--intro) + .28s); }
.hero__catch   { animation-delay: calc(var(--intro) + .30s); }
.hero__machine { animation-delay: calc(var(--intro) + .45s); }
.hero__count   { animation-delay: calc(var(--intro) + .60s); }
.hero__shop    { animation-delay: calc(var(--intro) + .78s); }
.hero__summary { animation-delay: calc(var(--intro) + .92s); }

/* 重ねのときは、絵が出てから文字が続くように少し遅らせます */
.hero--layers .hero__eyebrow { animation-delay: calc(var(--intro) + .55s); }
.hero--layers .hero__open    { animation-delay: calc(var(--intro) + .68s); }
.hero--layers .hero__shop    { animation-delay: calc(var(--intro) + .86s); }
.hero--layers .hero__summary { animation-delay: calc(var(--intro) + 1s); }

.hero__mascot {
	opacity: 0;
	animation: fadeIn .6s ease forwards, floatY 3.4s ease-in-out infinite;
	animation-delay: calc(var(--intro) + .9s), calc(var(--intro) + .9s);
}

@keyframes riseIn {
	from { opacity: 0; transform: translateY(22px); }
	to   { opacity: 1; transform: none; }
}

@keyframes fadeIn {
	to { opacity: 1; }
}

/* 重ねの各層が浮かび上がる動き */
@keyframes layerIn {
	from { opacity: 0; transform: translateY(14px) scale(1.02); }
	to   { opacity: 1; transform: none; }
}

/* キャラの入れ替え。枚数ごとに、映っている区間だけが違います。

   数字は「1周のうち何％の時点か」です（1周 ＝ --chara-hold × 枚数）。
     0%     … まだ出ていない
     少し先 … ふわっと出きる
     半分   … ここまで映して、
     その先 … 次の1枚と入れ替わりながら消える
   消えかけと次の出かけが重なるので、切り替わりが途切れません。 */
@keyframes charaCycle2 {
	0%     { opacity: 0; }
	9%     { opacity: 1; }
	50%    { opacity: 1; }
	59%    { opacity: 0; }
	100%   { opacity: 0; }
}

@keyframes charaCycle3 {
	0%     { opacity: 0; }
	6%     { opacity: 1; }
	33.3%  { opacity: 1; }
	39.3%  { opacity: 0; }
	100%   { opacity: 0; }
}

@keyframes charaCycle4 {
	0%     { opacity: 0; }
	4.5%   { opacity: 1; }
	25%    { opacity: 1; }
	29.5%  { opacity: 0; }
	100%   { opacity: 0; }
}

@keyframes heroZoom {
	from { transform: scale(1.1); }
	to   { transform: scale(1); }
}

@keyframes floatY {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-8px); }
}

/* 左右反転したまま揺れるもの（左右の飾り用） */
@keyframes floatYFlip {
	0%, 100% { transform: translateY(0) scaleX(-1); }
	50%      { transform: translateY(-8px) scaleX(-1); }
}

@keyframes marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* 端末側で「視差効果を減らす」設定にしている方には、動きを止めます */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}

	.js .reveal,
	.js .reveal--left,
	.js .reveal--right,
	.hero__layer--chara,
	.hero__layer--catch,
	.hero__layer--logo,
	.hero__date,
	.hero__eyebrow,
	.hero__open,
	.hero__catch,
	.hero__machine,
	.hero__count,
	.hero__shop,
	.hero__summary,
	.hero__mascot {
		opacity: 1;
		transform: none;
		filter: none;
	}

	/* キャラの入れ替えは止めて、1枚目だけを出しっぱなしにします。
	   （止めるだけだと、どの1枚も出ていない状態で固まってしまうためです） */
	.hero__cycle-img { animation: none; opacity: 0; }
	.hero__cycle-img:first-child { opacity: 1; }

	/* オープニングの幕は、出さずに飛ばします。
	   （animation: none で止めてしまうと幕が開かなくなるため、
	     display: none で最初から無かったことにします） */
	.opening { display: none; }

	/* 幕を出さないぶん、メインビジュアルも待たせません */
	.has-opening { --intro: 0s; }

	/* 揺れを止めても、向きだけは保ちます */
	.wall__atra--flip { transform: scaleX(-1); }
}

/* キーボード操作時の見やすさ */
:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 3px;
}