@charset "UTF-8";
/* ============================================================
   site.css — ぎゅうぎゅうシール リニューアル版 共通CSS
   仕様書: /DESIGN.html (実装前に必ず参照すること)
   読み込み順: reset.css → cms.css → site.css
   ============================================================ */

/* ------------------------------------------------------------
   1. デザイントークン
   ※ カラーは LP デザイン(イラレ)からの仮抽出値。
      確定値は DESIGN.html の Known Gaps を参照。
   ------------------------------------------------------------ */
:root {
	/* カラー */
	--c-primary: #f0831d;        /* ブランドオレンジ */
	--c-cream: #f6f3ed;          /* ベース背景クリーム (確定値) */
	--c-ink: #221e1f;            /* テキスト基本色 (gyugyu-logo.svg のストローク色 = イラレ確定値) */
	--c-white: #ffffff;
	--c-accent-yellow: #f5a71b;  /* 装飾サークル等 */
	--c-accent-pink: #ef8e8e;    /* 装飾シェイプ等 */
	--c-ink-soft: #6b5e58;       /* 補足・注記テキスト (仮) */

	/* reset.css が body 背景に参照する変数 */
	--body-bg-color: var(--c-cream);

	/* レイアウト */
	--content-max: 560px;        /* 中央カラム幅 (PC でも SP レイアウトを維持) */
	--header-h: 56px;            /* ヘッダー高さ (safe-area を除く) */

	/* 文字サイズスケール (コード組みテキスト用。手書き風見出しは画像) */
	--fs-xl: 20px;   /* 大見出し */
	--fs-l: 16px;    /* 小見出し・ボタン */
	--fs-m: 15px;    /* 本文 (基準) */
	--fs-s: 13px;    /* 補足・注記 */
	--fs-xs: 12px;   /* 注釈・フッターリンク */
	--fs-2xs: 11px;  /* キャプション・コピーライト */

	/* 余白スケール (8px ベース) */
	--sp-xs: 4px;
	--sp-s: 8px;
	--sp-m: 16px;
	--sp-l: 32px;
	--sp-xl: 48px;
	--sp-2xl: 64px;

	/* 角丸 */
	--radius-s: 6px;
	--radius-m: 12px;
	--radius-full: 999px;

	/* 影 */
	--shadow-card: 0 2px 12px rgba(35, 24, 21, 0.08);

	/* すりガラス (ヘッダー背景・ドロワーオーバーレイ) */
	--glass-white: color-mix(in srgb, var(--c-white) 72%, transparent);
	--glass-shade: color-mix(in srgb, var(--c-ink) 30%, transparent);
	--glass-blur: blur(12px);

	/* 重なり順 (ヘッダーはドロワーより前面 — 開いている間も ロゴ/✕ を見せる) */
	--z-drawer: 200;
	--z-header: 300;
}

/* ------------------------------------------------------------
   2. ベース
   ------------------------------------------------------------ */
/* iOS バウンス時にページ端の外に見えるキャンバス色。
   上端はクリーム・下端はフッターと同じ ink にして馴染ませる
   (ページ内は body の背景クリームで覆われるため見えない) */
html {
	background: linear-gradient(to bottom, var(--c-cream) 50%, var(--c-ink) 50%);
}
body {
	color: var(--c-ink);
	font-size: var(--fs-m);
	line-height: 1.8;
}

/* ------------------------------------------------------------
   3. レイアウト
   PC でも SP レイアウトを中央 560px カラムで表示する。
   背景はクリームを全面に敷き、カラムの境界は見せない。
   ------------------------------------------------------------ */
.l-column {
	width: 100%;
	max-width: var(--content-max);
	margin-inline: auto;
}

/* 固定ヘッダーの下に潜らないようコンテンツを押し下げる */
.l-main {
	padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px));
}

/* セクション標準余白 (左右 20px は cms.css の px-20 と揃える) */
.l-section {
	padding: var(--sp-xl) 20px;
}
/* 全面画像セクション用 (パディングなし)。
   中の画像は .heading-img のみで全幅になる (--bleed 不要) */
.l-section--flush {
	padding: 0;
}
/* 詰めセクション (上 0 / 下 20px / 左右 20px)。
   さらに下に空けたい場合は .mb-* ユーティリティを併用する */
.l-section--tight {
	padding: 0 20px 20px;
}

/* ------------------------------------------------------------
   4. ヘッダー (固定 / safe-area 対応)
   ロゴ中央・ハンバーガー右。ログイン等は置かない。
   各ページの <meta name="viewport"> に viewport-fit=cover 必須。
   ------------------------------------------------------------ */
.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	margin-inline: auto;
	width: 100%;
	max-width: var(--content-max);
	height: calc(var(--header-h) + env(safe-area-inset-top, 0px));
	padding-top: env(safe-area-inset-top, 0px);
	background: var(--glass-white);
	-webkit-backdrop-filter: var(--glass-blur);
	backdrop-filter: var(--glass-blur);
	box-shadow: var(--shadow-card);
	z-index: var(--z-header);
	display: flex;
	align-items: center;
	justify-content: center;
}
.site-header__logo {
	display: block;
	line-height: 0;
}
.site-header__logo img {
	height: 30px;
	width: auto;
}

/* ハンバーガーボタン (44px タップ領域) */
.site-header__menu-btn {
	position: absolute;
	right: 6px;
	bottom: calc((var(--header-h) - 44px) / 2);
	width: 44px;
	height: 44px;
	border: none;
	background: transparent;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	padding: 0;
}
.site-header__menu-btn span {
	display: block;
	width: 22px;
	height: 2px;
	border-radius: 1px;
	background: var(--c-ink);
	transition: transform 0.25s ease, opacity 0.25s ease;
}
/* 開いている間は ✕ に変形 */
.site-header__menu-btn[aria-expanded="true"] span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}
.site-header__menu-btn[aria-expanded="true"] span:nth-child(2) {
	/* opacity だけだと iOS で線の両端がうっすら残ることがあるため幅も潰す */
	opacity: 0;
	transform: scaleX(0);
}
.site-header__menu-btn[aria-expanded="true"] span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* ------------------------------------------------------------
   5. ドロワーメニュー (ハンバーガーから開く)
   ------------------------------------------------------------ */
.site-drawer {
	position: fixed;
	inset: 0;
	z-index: var(--z-drawer);
	visibility: hidden;
	pointer-events: none;
}
.site-drawer.is-open {
	visibility: visible;
	pointer-events: auto;
}
.site-drawer__overlay {
	position: absolute;
	inset: 0;
	background: var(--glass-shade);
	-webkit-backdrop-filter: var(--glass-blur);
	backdrop-filter: var(--glass-blur);
	opacity: 0;
	transition: opacity 0.25s ease;
}
.site-drawer.is-open .site-drawer__overlay {
	opacity: 1;
}
.site-drawer__panel {
	position: absolute;
	top: 0;
	right: 0;
	width: 78%;
	max-width: 320px;
	height: 100%;
	background: var(--c-white);
	padding: calc(var(--header-h) + env(safe-area-inset-top, 0px) + var(--sp-m)) var(--sp-l) calc(var(--sp-l) + env(safe-area-inset-bottom, 0px));
	transform: translateX(100%);
	transition: transform 0.25s ease;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}
.site-drawer.is-open .site-drawer__panel {
	transform: translateX(0);
}
.site-drawer__nav li {
	border-bottom: 1px solid var(--c-cream);
}
.site-drawer__nav a {
	display: block;
	padding: var(--sp-m) var(--sp-xs);
	font-size: var(--fs-m);
	font-weight: 700;
	color: var(--c-ink);
}

/* ------------------------------------------------------------
   6. フッター (safe-area 対応)
   ------------------------------------------------------------ */
.site-footer {
	background: var(--c-ink);
	color: var(--c-white);
	padding: var(--sp-xl) 20px calc(var(--sp-l) + env(safe-area-inset-bottom, 0px));
	text-align: center;
}
.site-footer__logo {
	display: inline-block;
	margin-bottom: var(--sp-l);
}
.site-footer__logo img {
	height: 28px;
	width: auto;
	/* 黒ロゴを白く反転 (専用白ロゴ書き出しまでの暫定) */
	filter: brightness(0) invert(1);
}
.site-footer__nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sp-s) var(--sp-m);
	margin-bottom: var(--sp-l);
}
.site-footer__nav a {
	font-size: var(--fs-xs);
	color: var(--c-white);
	opacity: 0.85;
}
.site-footer__copy {
	font-size: var(--fs-2xs);
	opacity: 0.6;
}

/* ------------------------------------------------------------
   7. 汎用部品
   ------------------------------------------------------------ */
/* 画像書き出しの見出し・装飾 (手書き風文字はすべて画像) */
.heading-img {
	display: block;
	margin: 0;
	line-height: 0;
}
.heading-img img {
	width: 100%;
	height: auto;
}
/* 左右余白なし (全幅) バージョン。
   親の左右パディング 20px (.l-section / cms.css の px-20) を打ち消す前提。
   それ以外のパディング幅の場所では使わない */
.heading-img--bleed {
	margin-inline: -20px;
}

/* ------------------------------------------------------------
   8. キーホルダー紹介 (ゆらゆら)
   左右にキーホルダー画像、中央にテキスト。
   画像はリング上端を支点に揺れる。
   ------------------------------------------------------------ */
.keyholder-row {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: min(215px, 38.4vw);
}
/* キーホルダーは左右端に absolute 配置 (テキストとの多少の重なりは許容) */
.keyholder-row__item {
	position: absolute;
	top: 0;
	transform-origin: 50% 0;  /* リング上端を支点に */
	animation: keyholder-swing 2.8s ease-in-out infinite;
}
.keyholder-row__item:first-child {
	left: 0;
}
/* 右側は周期と位相をずらして自然に */
.keyholder-row__item:last-child {
	right: 0;
	animation-duration: 3.4s;
	animation-delay: -1.1s;
}
.keyholder-row__item img {
	display: block;
	/* デザイン指定 215px (560px カラム基準)。狭い画面では比率を保って縮小 */
	height: min(215px, 38.4vw);
	width: auto;
}
.keyholder-row__text {
	text-align: center;
	font-size: var(--fs-m);
	font-weight: 500;
	line-height: 2.4;
}
@keyframes keyholder-swing {
	0%, 100% { transform: rotate(5deg); }
	50% { transform: rotate(-5deg); }
}
@media (prefers-reduced-motion: reduce) {
	.keyholder-row__item { animation: none; }
}

/* ------------------------------------------------------------
   9. デザインマーキー (テンプレート作例の無限ループ)
   同じリストを 2 回並べ、トラックを -50% まで動かして
   右から左へ無限スクロール。
   個々の画像は中央支点 ±20deg のコミカルな首振り
   (隣同士は逆位相)。
   親は左右 20px パディング前提 (全幅に打ち消して広げる)。
   ------------------------------------------------------------ */
.design-marquee {
	overflow: hidden;
	margin-inline: -20px;
	padding-block: var(--sp-l);  /* 回転ではみ出す分の上下逃げ */
	/* WebKit が transform 中の子をスクロール領域に算入する不具合への保険 */
	position: relative;
	contain: paint;
}
.design-marquee__track {
	display: flex;
	width: max-content;
	/* duration はフォールバック。実際は js/site.js が
	   px/秒 基準 (PC 45 / SP 90) で再計算して上書きする */
	animation: marquee-scroll 30s linear infinite;
}
.design-marquee__item {
	flex-shrink: 0;
	margin-right: var(--sp-l);  /* gap だと -50% がズレるので margin で */
	animation: marquee-wobble 1.8s ease-in-out infinite alternate;
}
/* 偶数番目は丸 1 周期分ずらして逆位相に (交互に 20deg / -20deg) */
.design-marquee__item:nth-child(even) {
	animation-delay: -1.8s;
}
.design-marquee__item img {
	display: block;
	height: 140px;  /* デザイン指定の表示高さ */
	width: auto;
}
@keyframes marquee-scroll {
	to { transform: translateX(-50%); }
}
@keyframes marquee-wobble {
	from { transform: rotate(-20deg); }
	to { transform: rotate(20deg); }
}
@media (prefers-reduced-motion: reduce) {
	.design-marquee__track,
	.design-marquee__item { animation: none; }
}

/* ------------------------------------------------------------
   10. ヒーロータイトル (スタンプポン)
   ヒーロー画像の上にタイトル文字画像 (ヒーローと同幅の帯書き出し) を
   重ね、ページ表示時に時間差でハンコ風に登場させる。
   ------------------------------------------------------------ */
.hero-stamp {
	position: relative;
}
.hero-stamp__titles {
	position: absolute;
	top: 2%;
	left: 0;
	width: 100%;
	pointer-events: none;
}
.hero-stamp__titles img {
	display: block;
	width: 100%;
	height: auto;
	opacity: 0;
	animation: stamp-pop 0.4s ease-out forwards;
}
.hero-stamp__titles img:nth-child(1) {
	animation-delay: 0.3s;
}
.hero-stamp__titles img:nth-child(2) {
	animation-delay: 0.55s;  /* ほんの少しの時間差 */
	margin-top: -16%;
}
@keyframes stamp-pop {
	0%   { opacity: 0; transform: scale(1.4) rotate(-3deg); }
	60%  { opacity: 1; transform: scale(0.95) rotate(1deg); }
	80%  { transform: scale(1.02); }
	100% { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
	.hero-stamp__titles img {
		animation: none;
		opacity: 1;
	}
}

/* ------------------------------------------------------------
   11. 2カラムグリッド (画像 + キャプション)
   NG/OK 比較などに使う。左右は親セクションの 20px、
   カラム間は 36px (デザイン指定)。
   ------------------------------------------------------------ */
.col2-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 36px;
	row-gap: var(--sp-xl);
}
.col2-grid__item {
	margin: 0;
}
.col2-grid__item img {
	display: block;
	width: 100%;
	height: auto;
	margin-bottom: var(--sp-m);
}
.col2-grid__item figcaption {
	text-align: center;
	font-size: var(--fs-m);
	line-height: 1.8;
}

/* ------------------------------------------------------------
   12. ユーティリティ
   ※ 必ずファイル末尾に置く — 部品側の margin 等を
      同詳細度の後勝ちで上書きできるようにするため
   ------------------------------------------------------------ */

/* テキストセンタリング */
.t-center {
	text-align: center;
}

/* margin-bottom ユーティリティ (余白スケール準拠) */
.mb-0   { margin-bottom: 0; }
.mb-xs  { margin-bottom: var(--sp-xs); }   /* 4px */
.mb-s   { margin-bottom: var(--sp-s); }    /* 8px */
.mb-m   { margin-bottom: var(--sp-m); }    /* 16px */
.mb-l   { margin-bottom: var(--sp-l); }    /* 32px */
.mb-xl  { margin-bottom: var(--sp-xl); }   /* 48px */
.mb-2xl { margin-bottom: var(--sp-2xl); }  /* 64px */