@charset "utf-8";
/* CSS Document
   大須新店舗ページ (slug: osushintenpo / template: page-osu.php)

   ■ 設計方針
   Figma のデザイン幅 1200px を基準に、全サイズを em で記述している。
   .osu-page の font-size を切り替えることでページ全体が等倍スケールする。
     - 1201px 以上 : font-size 16px    → ステージ 75em = 1200px 固定・中央寄せ
     - 901〜1200px : font-size 1.3333vw → 75em が常にビューポート幅と一致（等倍縮小）
     - 900px 以下  : 絶対配置を解除してフロー（縦積み）レイアウトへ切り替え

   ■ em 換算の注意
   基本は「Figma の px 値 ÷ 16」。
   ただし font-size を自身に持つ要素の left / top / width / margin は、
   em がその要素自身のフォントサイズ基準で解決されるため
   「Figma の px 値 ÷ その要素の font-size(px)」で算出している（各行のコメント参照）。
*/

/* ===== 変数 ===== */
.osu-page {
	--osu-bg: #f8f4f0;
	--osu-orange: #f24105;
	--osu-navy: #201846;
	--osu-red: #a7291e;
	--osu-red-accent: #d71718;
	--osu-red-accent-dark: #790e0f;
	--osu-red-text: #b5381f;
	--osu-text-gray: #4d4d4d;
	--osu-black-btn: #090909;
	--osu-black-text: #070707;
	--osu-line: #e4e4e4;
	--osu-ink: #000;
	/* sticky で重なったときにセクション上部へ確保する余白。ここ1箇所で調整できる */
	--osu-stack-gap: 2.5em; /* 40px */
	/* 重なるセクションの下端に足す余白。sticky の固定位置計算にも同じ値を織り込む */
	--osu-stack-pad: 3em;
	/* 商品写真の枠から商品名までの間隔。商品名の font-size(20px) 基準の em なので
	   2em = 40px。Figma 原値は ねり伝 21px / GABU DOGS 26.6px だが、
	   実装では詰まって見えたため広げている。ここ1箇所で両セクションを調整できる。 */
	--osu-menu-text-gap: 2em; /* 40px */
	/* 追従ヘッダーの高さ。アンカーの scroll-margin-top にも使う */
	/* ヒーローを「比率維持のまま 100vh に収める」ためのスケール。
	   PC デザインは 1200×787（= 75em × 49.1875em）。幅合わせと高さ合わせの
	   小さい方を採ることで contain 相当になる。全要素が em なので一括で縮む。 */
	--osu-hero-fs: min(1.33333vw, 2.03302vh);
	/* 追従ヘッダーの高さ。ヒーローと同じスケールで動かして比率を崩さない。
	   ロゴは <h1> でブラウザ既定の font-size:2em が効くため、
	   .osu-header__logo 側の em は 32px 基準になる点に注意（width:6em = 192px）。 */
	--osu-header-h: calc(var(--osu-hero-fs) * 6); /* 96px 相当 */
	/* SP で重ね合わせを解除した際の暗色背景。Figma には無い実装都合の値 */
	--osu-dark: #3b3b3b; /* Figma 47:175 の実測 */

	font-size: 16px;
	font-family: 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif;
	line-height: 1.6;
	color: var(--osu-ink);
	background: var(--osu-bg);
}

/* ===== 共通パーツ ===== */
/* 基底リセット。:where() で詳細度を 0 にしている。
   これを付けないと `.osu-page img`(0,1,1) が `.osu-scene__side`(0,1,0) の
   display:none に勝ってしまうなど、BEM クラス側の指定が軒並み無効化される。
   メディアクエリは詳細度を上げないため、SP 用の上書きも同じ問題を踏む。 */
:where(.osu-page) img {
	display: block;
	max-width: 100%;
	height: auto;
}
:where(.osu-page) a {
	text-decoration: none;
}
:where(.osu-page) ul,
:where(.osu-page) dl,
:where(.osu-page) dd {
	margin: 0;
	padding: 0;
	list-style: none;
}
:where(.osu-page) h1,
:where(.osu-page) h2,
:where(.osu-page) h3,
:where(.osu-page) p,
:where(.osu-page) dt {
	margin: 0;
	font-weight: inherit;
}

/* 各セクションのステージ（1200px 基準の座標系） */
.osu-hero__stage,
.osu-neriden__stage,
.osu-gabudogs__stage,
.osu-combo__stage,
.osu-access__stage {
	position: relative;
	z-index: 1; /* セクション直下に敷く全幅背景より前面に置く */
	width: 75em;
	margin-left: auto;
	margin-right: auto;
}

/* Instagram バナーは書き出し済みの1枚画像。角丸・白背景・アクセントバーは
   画像のアルファに焼き込まれているため、CSS 側で背景や角丸は持たせない。
   高さも画像の縦横比で決まるので指定しない。 */
.osu-neriden__insta,
.osu-gabudogs__insta {
	position: absolute;
	left: 15.3125em; /* 245px */
	width: 44.4375em; /* 711px */
}
.osu-neriden__insta-img,
.osu-gabudogs__insta-img,
.osu-combo__sns-img {
	width: 100%;
}

/* svh 対応環境では、ヒーローの高さ計算もアドレスバー表示中の高さに合わせる。
   高さ(100svh)とスケール(svh基準)を揃えないと比率が崩れるため、必ず両方を切り替える。 */
@supports (height: 100svh) {
	.osu-page {
		--osu-hero-fs: min(1.33333vw, 2.03302svh);
	}
}

/* セクションは常にビューポート全幅。デザインで幅100%の背景画像は、ステージ(1200px)ではなく
   このセクションを基準に敷くことで 1200px より広い画面でも端まで届く。
   overflow:hidden で、デザイン上フレーム外へはみ出す写真を画面端で切る。 */
.osu-hero,
.osu-scene,
.osu-neriden,
.osu-gabudogs,
.osu-combo,
.osu-access {
	position: relative;
	overflow: hidden;
	scroll-margin-top: var(--osu-header-h);
}

/* 重なって出てくる側のセクションは、上に少し余白を置いてから中身を始める。
   ヒーローは上に重なる相手がいないため付けない（ページ先頭がずれてしまうため）。 */
/* .osu-scene は高さを明示しており、border-box では padding が高さの内側に入って
   セクションが高くならない。scene だけは padding ではなく height に直接足す。 */
.osu-neriden,
.osu-gabudogs,
.osu-access {
	padding-top: var(--osu-stack-gap);
}

/* 次のセクションが重なりながらスクロールする（sticky スタック）。
   top = 100vh − セクション高 とすることで「セクションが最後まで表示されてから固定」となり、
   次のセクションがその上に乗り上げてくる。min(0px, …) は、ビューポートがセクションより
   高いときに top が正の値になってセクションが下へずれて固定されるのを防ぐガード。
   z-index を各セクションに明示して独立した重ね合わせコンテキストを作る
   （後ろのセクションが必ず前面になり、ステージ内の z-index が外へ漏れるのも防ぐ）。
   最後の ACCESS は重なる相手がいないので sticky にしない。 */
.osu-hero {
	position: sticky;
	top: 0; /* ちょうど 100vh なので 0 固定で次セクションが乗り上げる */
	z-index: 1;
	/* モバイルのバー対策。高さとスケールで単位を使い分ける。
	   ・高さ = dvh（今この瞬間の可視領域）… 常にぴったり埋まり下に余白が出ない。
	     svh だと iOS Safari の初期表示（下部バーのみ表示）より小さくなり下が余る。
	   ・スケール = svh（上下バーが出た最小状態）… どの状態でも中身があふれない。
	   中身のサイズは svh 基準で固定なので、バー開閉で高さが変わっても
	   中身がリサイズされず、flex 中央寄せで位置がわずかに調整されるだけになる。 */
	height: 100vh;
	height: 100dvh;
	display: flex;
	align-items: center;
	justify-content: center;
}
/* 大須の街セクション。ヒーローから分離した独立セクション */
.osu-scene {
	position: sticky;
	/* 実際の固定位置は JS が実測した高さで上書きする。ここは JS 無効時の目安 */
	top: min(0px, calc(100vh - 55.625em - var(--osu-header-h) - 17em));
	z-index: 2;
	background: var(--osu-dark);
}
.osu-neriden {
	position: sticky;
	top: min(0px, calc(100vh - 74.0625em - var(--osu-stack-gap) - var(--osu-stack-pad))); /* 1185px */
	z-index: 3;
	padding-bottom: var(--osu-stack-pad);
}
.osu-gabudogs {
	position: sticky;
	top: min(0px, calc(100vh - 76.5625em - var(--osu-stack-gap) - var(--osu-stack-pad))); /* 1225px */
	z-index: 4;
	padding-bottom: var(--osu-stack-pad);
}
.osu-combo {
	position: sticky;
	top: min(0px, calc(100vh - 41.4375em)); /* 663px。PC は上余白なし */
	z-index: 5;
	background: var(--osu-dark);
}
.osu-access {
	z-index: 6;
}

/* ===== 追従ヘッダー =====
   セクションの外に出し、sticky セクション（z-index 1〜5）より前面に固定する。
   セクション内に置くと overflow:hidden と重ね順に阻まれて後続セクションに隠れる。
   PC ではロゴ・ナビを Figma の 1200px 座標系のまま inner の中に絶対配置する。 */
.osu-header {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 10;
	width: 100%;
	background: var(--osu-bg);
}
.osu-header__inner {
	position: relative;
	font-size: var(--osu-hero-fs); /* ヒーローと同率で縮む */
	width: 75em; /* 1200px */
	height: 6em; /* 96px */
	margin-left: auto;
	margin-right: auto;
}
.osu-header__logo {
	position: absolute;
	left: 2em;
	top: 0.3em;
	width: 6em;
}
.osu-header__logo-img {
	width: 100%;
}
.osu-header__nav {
	position: absolute;
	left: 39.5em; /* 632px */
	top: 1.9375em; /* 31px */
	width: 30.8125em; /* 493px */
}
.osu-header__nav-list {
	display: flex;
	justify-content: flex-start;
	align-items: center;
}
.osu-header__nav-item {
	font-size: 1.125em; /* 18px */
	font-weight: 700;
	line-height: 1.4444;
	white-space: nowrap;
}
.osu-header__nav-item + .osu-header__nav-item::before {
	/* Figma 原文 "TOP　｜　ねり伝はなれ 大須横丁 ｜GABU DOGS ｜アクセス" の区切りを
	   そのまま再現する。既定は半角スペース＋｜、2項目目のみ全角スペースで挟む。 */
	content: ' ｜';
	display: inline-block;
	white-space: pre;
}
/* 基底が隣接セレクタ（詳細度 0,2,1）のため、上書き側も同じ形にして詳細度を揃える */
.osu-header__nav-item + .osu-header__nav-item--wide::before {
	content: '　｜　';
}
.osu-header__nav-link {
	display: inline-block;
}

/* SP デザイン（47:78）だけに入る細かい改行。PC では続けて表示する */
.osu-scene__story-sp {
	display: inline;
}

/* PC のリードは1行（Figma 16:1589）。SP のみ2行に割る（Figma 47:76） */
.osu-hero__lead-line {
	display: inline;
}

/* SP 専用のヒーロー素材。PC では出さない（SP のメディアクエリで入れ替える） */
.osu-hero__grandopen--sp {
	display: none;
}

/* ===== 1. ヒーロー ===== */
.osu-hero {
	background: var(--osu-bg);
}
/* 1200×787 のコンポジションを丸ごと縮小して 100vh に収める。
   高さは 100%（= ヒーローの 100dvh）。スケールが幅で決まる縦長画面では
   デザイン高(787px)より縦に余るので、その余りを写真に吸収させる。 */
.osu-hero__stage {
	font-size: var(--osu-hero-fs);
	width: 75em; /* 1200px */
	height: 100%;
	flex: none;
}
/* 無加工写真(ex-photo.jpg / 4260x2840)を CSS でトリミングする。
   角丸は Figma のマスク 16:1583 = 32px。
   トリミング位置は Figma の配置（画像1110x740 を y=31 に置き、y=97 から 511px を見せる）
   から換算: 縦は (97-31)/(740-511*1110/1090) ≒ 30%。横は左右いっぱいなので中央。 */
.osu-hero__main-photo {
	position: absolute;
	left: 3.375em; /* 54px */
	top: 6.0625em; /* 97px */
	width: 68.125em; /* 1090px */
	/* 縦に余ったぶんだけ伸ばす。17.25em = 上 97px + 下 179px（デザインの余白）。
	   デザイン比のときは 511px のまま、縦長画面では伸び、画面の 70% で頭打ちにする。 */
	height: min(calc(100% - 17.25em), 70%);
	border-radius: 2em; /* 32px */
	overflow: hidden;
}
.osu-hero__main-photo-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 30%;
}
.osu-hero__copy-box {
	position: absolute;
	left: 46.6875em; /* 747px */
	top: auto;
	bottom: 9.125em; /* (787-641)px。下端基準にして写真の伸びに影響されないようにする */
	width: 28.3125em; /* 453px */
	height: 12.875em; /* 206px */
	padding: 1.6875em 0 0 2.125em; /* 27px / 34px */
	border-radius: 30px;
	background: var(--osu-bg);
}
.osu-hero__copy {
	font-size: 2em; /* 32px */
	font-weight: 700;
	line-height: 1.34375; /* 43px */
	color: var(--osu-text-gray);
}
.osu-hero__lead {
	font-size: 0.9375em; /* 15px */
	font-weight: 500;
	line-height: 1.4667;
	margin-top: 0.8em; /* 12px ÷ 15 */
}
/* 「08.08 sat GRAND OPEN」は sat の装飾ごと1枚画像で書き出し済み
   （open-text.png / 2219×158 = @2x）。配置は Figma のテキスト 16:1590 の
   absoluteRenderBounds（x=48.4 y=659.3 w=1108.9）に合わせる。 */
.osu-hero__grandopen {
	position: absolute;
	left: 3.025em; /* 48.4px */
	top: auto;
	bottom: 3.04375em; /* (787-738.3)px */
	width: 69.90625em; /* 1118.5px（差し替え後の open-text.png 実寸 2237÷2） */
}
/* 大須写真はデザイン上フレーム幅100%。デザイン高(890px)の上下に余白を足した分を
   セクション高とし、写真はその全面を cover で覆う。
   ・上 = 追従ヘッダーに冒頭（串・縦組み）が隠れないよう頭を下げる
   ・下 = 次セクションが乗り上げるまでのスクロール量を稼ぐ
   調整はこの2つの変数だけで効く。 */
.osu-scene {
	--osu-scene-pad-top: calc(var(--osu-header-h) + 3em);
	--osu-scene-pad-bottom: 14em;
	height: calc(55.625em + var(--osu-scene-pad-top) + var(--osu-scene-pad-bottom));
}
/* 絶対配置にして padding 込みのセクション全面を覆う。
   静的配置のままだと height:100% がコンテンツボックス基準になり、
   padding-bottom のぶん下端に地色が出てしまう。 */
.osu-scene__photo {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
/* 写真に重なる要素は 1200px のデザイン座標系のまま中央に保持する */
.osu-scene__inner {
	position: absolute;
	left: 50%;
	top: 0;
	width: 75em; /* 1200px */
	margin-left: -37.5em;
	top: var(--osu-scene-pad-top); /* ヘッダーを避けた位置から始める */
	height: 55.625em; /* 890px。足した上下の余白には重ねない */
}
.osu-scene__side {
	position: absolute;
	/* Figma 16:1595 の実測 x=54 / y=823（プロンプトの x=207 は転記ミス） */
	left: 3.375em; /* 54px */
	top: 2.25em; /* 36px */
	width: 14.975em; /* 239.6px */
}
.osu-scene__illust {
	position: absolute;
	left: 32.875em; /* 526px */
	top: 4.875em; /* 78px */
	width: 9.25em; /* 148px */
}
.osu-scene__hotdog {
	position: absolute;
	/* Figma 16:2958 の実測 x=871 / y=1366（プロンプトの y=1422 は転記ミス） */
	left: 54.4375em; /* 871px */
	top: 36.1875em; /* 579px */
	width: 19.425em; /* 310.8px */
}
.osu-scene__story {
	position: absolute;
	left: 20.125em; /* 322px */
	top: 29.0625em; /* 465px */
	width: 34.8125em; /* 557px */
	text-align: center;
	color: #fff;
}
.osu-scene__story-block {
	font-family: 'Noto Serif JP', serif;
	font-size: 1.125em; /* 18px */
	font-weight: 500;
	line-height: 3; /* 54px */
}
.osu-scene__story-block + .osu-scene__story-block {
	margin-top: 3em; /* 54px ÷ 18 = 空行1行分 */
}

/* Figma の改行位置。<br> だと text-wrap: balance が行ごとに効かないため
   ブロック要素にして、各行が独立して均等割りされるようにしている。 */
.osu-scene__story-line {
	display: block;
}

/* ===== 2. ねり伝はなれ 大須横丁 ===== */
.osu-neriden {
	background: var(--osu-navy);
}
.osu-neriden__stage {
	height: 74.0625em; /* 1185px */
	color: #fff;
}
.osu-neriden__photo {
	position: absolute;
	left: 38.4375em; /* 615px */
	top: 4.6875em; /* 75px */
	width: 40.3125em; /* 645px */
	border-radius: 26px;
}
.osu-neriden__illust {
	position: absolute;
	left: 6.8125em; /* 109px */
	top: 6.75em; /* 108px */
	width: 23.0875em; /* 369.4px */
}
.osu-neriden__title {
	position: absolute;
	font-family: 'Noto Serif JP', serif;
	font-size: 2.1875em; /* 35px */
	font-weight: 400;
	line-height: 1.4286;
	white-space: nowrap;
	left: 3.37143em; /* 118px ÷ 35（Figma 16:2959 の実測 x=118） */
	top: 8.49714em; /* 297.4px ÷ 35 */
}
.osu-neriden__lead {
	position: absolute;
	font-family: 'Noto Serif JP', serif;
	font-size: 0.9375em; /* 15px */
	font-weight: 400;
	line-height: 1.8; /* 27px */
	white-space: nowrap;
	left: 8.06667em; /* 121px ÷ 15 */
	top: 24.2em; /* 363px ÷ 15 */
}
.osu-neriden__menu {
	position: absolute;
	left: 3.90625em; /* 62.5px */
	top: 33.35em; /* 533.6px */
	width: 68.09375em; /* 1089.5px */
	display: flex;
	justify-content: space-between;
}
.osu-neriden__menu-item {
	width: 15.65em; /* 250.4px */
}
.osu-neriden__menu-frame {
	position: relative;
	width: 15.65em;
	height: 15.65em;
	margin-bottom: 1em;
}
.osu-neriden__menu-deco {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
}
.osu-neriden__menu-photo {
	position: absolute;
	transition: transform 0.3s ease-out;
}
/* 「一番人気」ワッペン。装飾枠(250.4px)に対する割合で置くので PC・SP 共通。
   Figma 52:2 は枠の左上へ x=-10.5 / y=-25.6 はみ出す配置。 */
.osu-neriden__menu-badge {
	position: absolute;
	left: -4.1933%;
	top: -10.2236%;
	width: 45.5272%; /* 114 ÷ 250.4 */
	z-index: 1;
}
.osu-neriden__menu-photo--tako {
	left: 32.1486%; /* 80.5px */
	top: 9.7444%; /* 24.4px */
	width: 42.7716%; /* 107.1px */
}
.osu-neriden__menu-photo--ika {
	left: 22.7236%; /* 56.9px */
	top: 7.7476%; /* 19.4px */
	width: 54.2332%; /* 135.8px */
}
.osu-neriden__menu-photo--jaga {
	left: 28.3147%; /* 70.9px */
	top: 6.5495%; /* 16.4px */
	width: 43.6502%; /* 109.3px */
}
.osu-neriden__menu-photo--ebi {
	left: 22.1246%; /* 55.4px */
	top: 7.0687%; /* 17.7px */
	width: 63.3786%; /* 158.7px */
}
.osu-neriden__menu-item:hover .osu-neriden__menu-photo {
	transform: scale(1.08);
}
.osu-neriden__menu-name {
	font-family: 'Noto Serif JP', serif;
	font-size: 1.25em; /* 20px */
	font-weight: 400;
	line-height: 1.45;
	text-align: center;
	margin-top: var(--osu-menu-text-gap);
}
.osu-neriden__menu-desc {
	font-family: 'Noto Serif JP', serif;
	font-size: 0.75em; /* 12px */
	font-weight: 400;
	line-height: 2.25; /* 27px */
	text-align: center;
	margin-top: 0.58333em; /* 7px ÷ 12 */
}

/* Instagram バナー（ねり伝はなれ）— insta-bnr01.png / 711×145 */
.osu-neriden__insta {
	top: 61.25em; /* 980px */
}

/* ===== 3. GABU DOGS ===== */
.osu-gabudogs {
	background: var(--osu-red);
}
.osu-gabudogs__stage {
	height: 76.5625em; /* 1225px */
	color: #fff;
}
.osu-gabudogs__photo {
	position: absolute;
	/* ロゴ台紙(562px〜)と店舗写真(〜592px)は約30px重なる。写真を手前に置く。 */
	z-index: 1;
	left: -1.3125em; /* -21px */
	top: 5.1875em; /* 83px */
	width: 38.3125em; /* 613px */
}
.osu-gabudogs__logo-plate {
	position: absolute;
	left: 35.125em; /* 562px */
	top: 7.375em; /* 118px */
	width: 41.75em; /* 668px */
	height: 9.0625em; /* 145px */
	background: #fff;
}
.osu-gabudogs__logo {
	position: absolute;
	left: 38.0625em; /* 609px */
	top: 9.0625em; /* 132.2px */
	width: 35.25em; /* 564px */
}
.osu-gabudogs__title {
	position: absolute;
	font-size: 2.1875em; /* 35px */
	font-weight: 700;
	line-height: 1.4571;
	white-space: nowrap;
	left: 21.17143em; /* 741px ÷ 35 */
	top: 8.22857em; /* 288px ÷ 35 */
}
.osu-gabudogs__lead {
	position: absolute;
	font-size: 0.9375em; /* 15px */
	font-weight: 700;
	line-height: 1.8; /* 27px */
	white-space: nowrap;
	left: 49.33333em; /* 740px ÷ 15 */
	top: 24.53333em; /* 368px ÷ 15 */
}
.osu-gabudogs__menu {
	position: absolute;
	left: 3.90625em; /* 62.5px */
	top: 34.125em; /* 546px */
	width: 68.15em; /* 1090.4px */
	display: flex;
	justify-content: space-between;
}
.osu-gabudogs__menu-item {
	width: 15.65em; /* 250.4px */
}
.osu-gabudogs__menu-frame {
	position: relative;
	width: 15.65em;
	height: 15.65em;
	margin-bottom: 1em;
}
.osu-gabudogs__menu-deco {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
}
.osu-gabudogs__menu-plate {
	position: absolute;
	/* プレート(16:2393 x=67,y=3415) と装飾フレーム(16:2213 x=62.5,y=3408) の差分 */
	left: 1.7971%; /* 4.5px */
	top: 2.7955%; /* 7px */
	width: 95.8466%; /* 240px */
}
.osu-gabudogs__menu-photo {
	position: absolute;
	transition: transform 0.3s ease-out;
}
.osu-gabudogs__menu-photo--gabu {
	left: 7.3882%; /* 18.5px */
	top: 23.9617%; /* 60px */
	width: 75.8786%; /* 190px */
}
.osu-gabudogs__menu-photo--chili {
	left: 5.5511%; /* 13.9px */
	top: 20.3674%; /* 51px */
	width: 83.8658%; /* 210px */
}
.osu-gabudogs__menu-photo--cheese {
	left: 11.5815%; /* 29px */
	top: 14.7764%; /* 37px */
	width: 81.8690%; /* 205px */
}
.osu-gabudogs__menu-photo--chilicheese {
	left: 16.1741%; /* 40.5px */
	top: 14.7764%; /* 37px */
	width: 64.6965%; /* 162px */
}
.osu-gabudogs__menu-item:hover .osu-gabudogs__menu-photo {
	transform: scale(1.08);
}
.osu-gabudogs__menu-name {
	font-size: 1.25em; /* 20px */
	font-weight: 700;
	line-height: 1.45;
	text-align: center;
	margin-top: var(--osu-menu-text-gap);
}
.osu-gabudogs__menu-desc {
	width: 110%;
	margin-left: -5%;
	margin-right: -5%;
	font-size: 0.75em; /* 12px */
	font-weight: 700;
	line-height: 2.25; /* 27px */
	text-align: center;
	margin-top: 0.58333em; /* 7px ÷ 12 */
}

/* Instagram バナー（GABU DOGS）— insta-bnr02.png / 711×164。
   マスコットのはみ出しを含む画像なので、白カード上端(988px)ではなく
   グループ上端(969px)に合わせる。 */
.osu-gabudogs__insta {
	top: 60.5625em; /* 969px */
}

/* ===== 4. 気分で選べる、一緒に楽しめる ===== */
.osu-combo__stage {
	/* 663px = 次セクション(ACCESS地図 16:3701)の y=4750 − 本セクション開始 y=4087。
	   プロンプト §6-5 の「約568px」は誤記（背景写真 16:3720 の実寸は h=665）。 */
	height: 41.4375em; /* 663px */
	color: #fff;
}
/* 背景写真はデザイン上フレーム幅100%。セクション基準で画面全幅へ広げ、
   PC では上余白を持たせないのでセクション全面を覆う。 */
.osu-combo__bg {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
.osu-combo__bg-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.osu-combo__sub-photo {
	position: absolute;
}
.osu-combo__sub-photo--left {
	left: 7.4125em; /* 118.6px */
	top: 5.9375em; /* 95px */
	width: 10.725em; /* 171.6px */
}
.osu-combo__sub-photo--right {
	left: 54.175em; /* 866.8px */
	top: 9.125em; /* 146px */
	width: 16.08125em; /* 257.3px */
}
.osu-combo__title {
	position: absolute;
	font-size: 3.125em; /* 50px */
	font-weight: 700;
	line-height: 1.34; /* 67px */
	text-align: center;
	left: 8.18em; /* 409px ÷ 50 */
	top: 1.08em; /* 54px ÷ 50 */
	width: 8em; /* 400px ÷ 50 */
}
.osu-combo__copy {
	position: absolute;
	left: 24.5625em; /* 393px */
	top: 13.5625em; /* 217px */
	width: 26.25em; /* 420px */
	text-align: center;
}
.osu-combo__copy-line {
	font-size: 1.25em; /* 20px */
	font-weight: 700;
	line-height: 3.35; /* 67px */
}
.osu-combo__sns {
	position: absolute;
	left: 15.4375em; /* 247px */
	top: 29.75em; /* 476px */
	width: 44.625em; /* 714px */
	display: flex;
	justify-content: space-between;
}
.osu-combo__sns-item {
	width: 21.45625em; /* 343.3px */
}
/* こちらも書き出し済みの1枚画像（insta-bnr03/04.png / 343×91）。
   角丸・白背景は画像に焼き込み済み。 */
.osu-combo__sns-link {
	display: block;
	width: 100%;
}

/* ===== 5. ACCESS ===== */
.osu-access {
	background: var(--osu-bg);
}
.osu-access__stage {
	height: 33.375em; /* 534px */
}
/* Google マップの埋め込み。デザインの 626×369 と同じ比率で敷く。 */
.osu-access__map {
	position: absolute;
	left: 0;
	top: 0;
	width: 39.125em; /* 626px */
	aspect-ratio: 626 / 369;
}
.osu-access__map-embed {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}
.osu-access__info {
	position: absolute;
	left: 46.1875em; /* 739px */
	top: 7.3125em; /* 117px */
	width: 21.25em; /* 340px */
}
.osu-access__title {
	font-size: 1.41544em; /* 22.65px */
	font-weight: 700;
	line-height: 1.457;
	color: var(--osu-black-text);
	margin-bottom: 0.35325em; /* 8px ÷ 22.65 */
}
.osu-access__row {
	display: flex;
	border-bottom: 1px solid var(--osu-line);
}
.osu-access__row--last {
	border-bottom: 0;
}
.osu-access__term {
	font-size: 0.9375em; /* 15px */
	font-weight: 500;
	line-height: 3.0667; /* 46px */
	width: 6.2em; /* 93px ÷ 15 */
	flex: none;
}
.osu-access__desc {
	font-size: 0.9375em; /* 15px */
	font-weight: 500;
	line-height: 3.0667; /* 46px */
	width: 16.46667em; /* 247px ÷ 15 */
}
.osu-access__cta {
	position: absolute;
	left: 25.75em; /* 412px */
	top: 25.6875em; /* 411px */
	width: 25.625em; /* 410px */
	height: 4.5625em; /* 73px */
}
.osu-access__cta-mark {
	position: absolute;
	left: 0;
	top: 0;
	width: 12.375em; /* 198px */
}
.osu-access__cta-btn {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.9375em; /* 15px */
	font-weight: 500;
	line-height: 1;
	left: 14.86667em; /* 223px ÷ 15 */
	top: 2.06667em; /* 31px ÷ 15 */
	width: 12.46667em; /* 187px ÷ 15 */
	height: 2.8em; /* 42px ÷ 15 */
	border-radius: 999px;
	background: var(--osu-black-btn);
	color: #fff;
	transition: transform 0.3s ease;
}
.osu-access__cta-btn:hover {
	transform: translateY(-2px);
}

/* ===== 901〜1200px : ステージを等倍縮小 ===== */
@media only screen and (max-width: 1200px) {
	.osu-page {
		font-size: 1.3333vw;
	}
	/* px 固定だった角丸だけ vw に置き換えて縮小に追従させる */
	.osu-hero__copy-box {
		border-radius: 2.5vw;
	}
	.osu-neriden__photo {
		border-radius: 2.2vw;
	}
}

/* ===== 900px 以下 : フロー（縦積み）レイアウト ===== */
@media only screen and (max-width: 900px) {
	.osu-page {
		font-size: 14px;
		/* SP デザインは 440×956（= 27.5em × 59.75em）。同じく contain で1画面に収める */
		--osu-hero-fs: min(3.63636vw, 1.67364vh);
		--osu-header-h: calc(var(--osu-hero-fs) * 4.9375); /* 79px 相当 */
	}


	.osu-neriden__stage,
	.osu-gabudogs__stage,
	.osu-combo__stage,
	.osu-access__stage {
		width: 100%;
		height: auto;
		overflow: visible;
		padding: 8% 5%;
	}

	/* 絶対配置を解除してフローに戻す */
	.osu-header__inner,
	.osu-header__logo,
	.osu-header__nav,

	.osu-neriden__photo,
	.osu-neriden__illust,
	.osu-neriden__title,
	.osu-neriden__lead,
	.osu-neriden__menu,
	.osu-neriden__insta,
	.osu-gabudogs__photo,
	.osu-gabudogs__logo,
	.osu-gabudogs__title,
	.osu-gabudogs__lead,
	.osu-gabudogs__menu,
	.osu-gabudogs__insta,
	.osu-combo__bg,
	.osu-combo__title,
	.osu-combo__copy,
	.osu-combo__sns,
	.osu-access__map,
	.osu-access__info,
	.osu-access__cta {
		position: static;
		left: auto;
		top: auto;
		width: 100%;
		height: auto;
	}

	/* 各セクションの最下部の要素が画面の 2/3 あたりまで上がってから
	   次セクションが被り始めるようにする。sticky で固定されると
	   「中身の下端 = 画面下端 − 下余白」の位置に来るので、
	   下余白を 100vh の 1/3 取ると中身の下端が画面の 2/3 の位置に止まる。
	   固定位置は JS が実測した高さで再計算するので追従する。 */
	.osu-neriden,
	.osu-gabudogs,
	.osu-combo {
		padding-bottom: 33.333vh;
	}

	/* SP では省く装飾 */
	.osu-gabudogs__logo-plate {
		display: none;
	}

	/* ヘッダー: デザインと同じ「左ロゴ・右ナビ」を1行で組む。
	   ナビの文字サイズは vw 基準にして、どの画面幅でも1行に収まる比率を保つ。
	   固定表示なので margin ではなく高さを持たせ、その分ヒーローを下げる。 */
	.osu-header__inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 2%;
		height: var(--osu-header-h);
		padding: 0 5%;
	}
	.osu-header__logo {
		flex: none;
		width: 18%;
		margin: 0;
	}
	.osu-header__nav {
		flex: 1;
		width: auto;
	}
	.osu-header__nav-list {
		flex-wrap: wrap;
		justify-content: flex-end;
	}
	.osu-header__nav-item {
		font-size: 2.4vw;
	}
	/* ---- ヒーロー: Figma 47:4（440×956）のコンポジションを 100vh に収める ----
	   PC と同じく絶対配置のまま、スケールだけを SP デザイン基準に差し替える。 */
	.osu-hero__stage {
		width: 27.5em; /* 440px */
		/* 高さは 100%（= 100dvh）。スケールが幅で決まる縦長デバイスでは
		   デザイン高(956px)より縦に余るので、その余りを写真に吸収させる。
		   横長・低い画面ではスケールが高さで決まるため 100% ≒ デザイン高になる。 */
		height: 100%;
		padding: 0;
	}
	/* 写真は上端固定・下端をコピーの上に合わせ、余った高さを吸収して縦に伸びる。
	   角丸は Figma のマスク 47:7 = 21px。 */
	.osu-hero__main-photo {
		position: absolute;
		left: 0.4375em; /* 7px */
		top: 5.0625em; /* 81px */
		width: 26.6875em; /* 427px */
		bottom: 32.3375em; /* 956 - 438.6 = 517.4px */
		height: auto;
		min-height: 10em; /* 低い画面で潰れすぎないように */
		border-radius: 1.3125em; /* 21px */
		margin: 0;
	}
	.osu-hero__main-photo-img {
		object-position: 50% 50%; /* 縦に伸びるので中央基準が安定 */
	}
	.osu-hero__copy-box {
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0; /* 子を下端基準に置けるようステージ全体に広げる */
		width: 100%;
		height: auto;
		padding: 0;
		background: none;
		border-radius: 0;
	}
	.osu-hero__copy {
		position: absolute;
		font-size: 2.25em; /* 36px */
		font-weight: 700;
		line-height: 1.1944; /* 43px */
		left: 0.80556em; /* 29px ÷ 36 */
		top: auto;
		bottom: 10.30556em; /* (956-585)px ÷ 36 */
		width: 9em; /* 324px ÷ 36 */
	}
	.osu-hero__lead {
		position: absolute;
		font-size: 1.25em; /* 20px */
		font-weight: 500;
		line-height: 1.45; /* 29px */
		margin: 0;
		left: 1.65em; /* 33px ÷ 20 */
		top: auto;
		bottom: 14.55em; /* (956-665)px ÷ 20 */
		width: 14em; /* 280px ÷ 20 */
	}
	/* Figma 47:76 は「揚げたての練りものと、／本格アメリカンホットドック。」の2行。
	   自動折り返しに任せると「本／格」と語中で割れるため改行位置を明示する。 */
	.osu-hero__lead-line {
		display: block;
	}
	/* PC の「08.08 sat GRAND OPEN」ではなく「2026年8月 / GRAND OPEN」の2段組 */
	.osu-hero__grandopen {
		display: none;
	}
	.osu-hero__grandopen--sp {
		display: block;
		position: absolute;
		left: 2.13125em; /* 34.1px */
		top: auto;
		bottom: 1.61875em; /* (956-930.1)px ÷ 16 */
		width: 23.65em; /* 378.4px */
	}
	/* ---- 大須の街: Figma 47:78（440×1221）のコンポジション ----
	   ヒーローと違い1画面に収める必要はないので、幅だけを基準にスケールする
	   （font-size = 440px 相当。em の値はすべて SP デザインの実寸÷16）。 */
	.osu-scene {
		/* position は指定しない。PC 側の sticky をそのまま活かす
		   （relative を書くと SP だけ重なり演出が効かなくなる） */
		font-size: 3.63636vw; /* 440px を画面幅に合わせる */
		/* 下の余白は SP を厚めに。border-box では padding が高さの内側に入り
		   セクションが高くならないので、height に直接足す。
		   9em はこのセクションの font-size 基準（デザイン換算 144px）。 */
		--osu-scene-pad-top: 0px;
		--osu-scene-pad-bottom: 33.333vh; /* 上記と同じ狙い。scene は高さに直接足す */
		height: calc(76.3125em + var(--osu-scene-pad-bottom)); /* 1221px + 下余白 */
		padding-bottom: 0;
		background: var(--osu-dark);
	}
	/* 写真は 0〜956px。下は #3B3B3B のベタが受ける（Figma 47:175） */
	.osu-scene__photo {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 59.75em; /* 956px */
		object-fit: cover;
		object-position: center;
	}
	.osu-scene__inner {
		position: static;
		width: 100%;
		height: auto;
		margin-left: 0;
		padding: 0;
	}
	.osu-scene__side {
		left: 1.25em; /* 20px */
		top: 2.625em; /* 42px */
		width: 7.125em; /* 114px */
	}
	.osu-scene__illust {
		left: 7.3125em; /* 117px */
		top: 5.5625em; /* 89px */
		width: 11.625em; /* 186px */
	}
	.osu-scene__hotdog {
		left: 18.4375em; /* 295px */
		top: 29.75em; /* 476px */
		right: auto;
		bottom: auto;
		width: 8.9125em; /* 142.6px */
	}
	.osu-scene__story {
		position: absolute;
		left: 1.6875em; /* 27px */
		top: 36.125em; /* 578px */
		width: 24.9375em; /* 399px */
		margin-top: 0;
		padding: 0;
	}
	.osu-scene__story-block {
		font-size: 1.25em; /* 20px */
		font-weight: 500;
		line-height: 2.45; /* 49px */
	}
	.osu-scene__story-block + .osu-scene__story-block {
		margin-top: 2.45em; /* 空行1行分 = 49px */
	}
	/* Figma 47:78 は PC より細かく改行される */
	.osu-scene__story-sp {
		display: block;
	}

	/* 最終行が数文字だけ残る「1文字落ち」を抑える。
	   pretty は CJK ではほとんど効かなかったため、行数を均等割りする balance を使う
	   （いずれも数行の短いブロック向けの挙動。未対応ブラウザは通常折り返しにフォールバック）。 */
	.osu-hero__copy,
	.osu-hero__lead,
	.osu-neriden__lead,
	.osu-gabudogs__lead,
	.osu-neriden__menu-desc,
	.osu-gabudogs__menu-desc,
	.osu-combo__copy-line {
		text-wrap: balance;
	}

	/* ねり伝はなれ / GABU DOGS 共通 */
	.osu-neriden__photo,
	.osu-gabudogs__photo {
		margin-bottom: 7%;
		border-radius: 12px;
	}
	.osu-neriden__illust {
		width: 60%;
		margin: 0 auto 5%;
	}
	/* デザインどおりロゴの背後に白ベタを敷く。
	   PC は専用の台紙要素だが、SP はロゴ画像自体の背景で画面端まで通す。 */
	.osu-gabudogs__logo {
		width: 111.2%; /* ステージ左右の 5% パディングを打ち消して全幅に */
		max-width: none; /* 基底の max-width:100% に阻まれて右端が伸びないため解除 */
		margin: 0 -5.6% 7%;
		padding: 4% 6%;
		background: #fff;
	}
	.osu-neriden__title,
	.osu-gabudogs__title {
		margin-bottom: 4%;
		font-size: 1.7em;
		text-align: center;
		white-space: normal;
	}
	.osu-neriden__lead,
	.osu-gabudogs__lead {
		margin-bottom: 9%;
		font-size: 1em;
		text-align: center;
		white-space: normal;
	}
	.osu-neriden__menu,
	.osu-gabudogs__menu {
		display: grid;
		grid-template-columns: 1fr;
		gap: 3em 0; /* row-gap に % を使うと高さ計算から漏れてはみ出すため em で固定 */
		margin-bottom: 9%;
	}
	.osu-neriden__menu-item,
	.osu-gabudogs__menu-item {
		width: 100%;
	}
	.osu-neriden__menu-frame,
	.osu-gabudogs__menu-frame {
		width: 62%;
		height: 0;
		padding-top: 62%;
		margin: 0 auto;
	}
	/* 商品写真・プレートはフレーム基準の % で配置しているため、SP 用の上書きは不要。
	   PC と完全に同じ比率でそのまま縮小される。 */

	/* 気分で選べる */
	.osu-combo {
		padding-top: 0;
	}
	/* サブ写真の位置基準をステージではなくセクションにする
	   （ステージはフローで背景写真の下に来るため、上に重ねられない） */
	.osu-combo__stage {
		position: static;
		padding: 0 0 8%;
	}
	.osu-combo__bg {
		margin-bottom: 7%;
	}
	/* 背景写真は全幅・比 1200:665 で敷かれるので、デザインの px は
	   そのまま vw に換算できる（1200px = 100vw）。その上に重ねる。 */
	.osu-combo__sub-photo {
		position: absolute;
	}
	.osu-combo__sub-photo--left {
		left: 9.883%; /* 118.6 ÷ 1200 */
		top: calc(var(--osu-stack-gap) + 7.9167vw); /* 95px 相当 */
		width: 14.3%; /* 171.6 ÷ 1200 */
	}
	.osu-combo__sub-photo--right {
		left: 72.233%; /* 866.8 ÷ 1200 */
		top: calc(var(--osu-stack-gap) + 12.1667vw); /* 146px 相当 */
		width: 21.442%; /* 257.3 ÷ 1200 */
	}
	.osu-combo__bg-img {
		height: auto;
	}
	.osu-combo__title {
		margin-bottom: 5%;
		padding: 0 5%;
		font-size: 1.9em;
	}
	.osu-combo__copy {
		margin-bottom: 8%;
		padding: 0 5%;
	}
	.osu-combo__copy-line {
		font-size: 1em;
		line-height: 2.2;
	}
	.osu-combo__sns {
		display: grid;
		grid-template-columns: 1fr;
		gap: 1.2em 0; /* 同上 */
		padding: 0 5%;
	}
	.osu-combo__sns-item {
		width: 100%;
	}

	/* ACCESS */
	.osu-access__map {
		width: auto;
		margin: 0 -5.6% 8%;
	}
	.osu-access__info {
		margin-bottom: 8%;
	}
	.osu-access__title {
		margin-bottom: 0.6em;
		font-size: 1.3em;
	}
	.osu-access__term {
		width: 6em;
		line-height: 2.4;
	}
	.osu-access__desc {
		width: auto;
		flex: 1;
		line-height: 2.4;
	}
	.osu-access__cta {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.osu-access__cta-mark {
		position: static;
		width: 9em;
		margin-bottom: 1em;
	}
	.osu-access__cta-btn {
		position: static;
		width: 12em;
		height: 2.8em;
	}
}

/* SP も svh 対応環境ではアドレスバー表示中の高さに合わせる。
   メディアクエリの外に置くと PC 用の値を上書きしてしまうため、900px 以下に限定する。 */
@supports (height: 100svh) {
	@media only screen and (max-width: 900px) {
		.osu-page {
			--osu-hero-fs: min(3.63636vw, 1.67364svh);
		}
	}
}

/* ===== モーション低減の設定を尊重 ===== */
@media (prefers-reduced-motion: reduce) {
	.osu-page .fade__Up,
	.osu-page .fade__in,
	.osu-page .fade__left,
	.osu-page .fade__right {
		opacity: 1;
		transform: none;
		transition: none;
	}
	.osu-neriden__menu-photo,
	.osu-gabudogs__menu-photo,
	.osu-access__cta-btn {
		transition: none;
	}
}