/* Hermes site-kit — モダンLPのデザイン基盤（画像前提・動きあり）
 *
 * 使い方: 配色は :root の変数だけを業種に合わせて変える。
 * .reveal / .stagger / パララックス等のクラスは reveal.js が動かす。
 * レイアウト・アニメーションの土台はここが持つので、モデルは「構成とコピーと配色」に集中する。
 * これが「強いプロンプトが無くても一定以上の見栄えが出る」ための足場。
 */

:root {
  /* ── 業種ごとに変えるのはここだけ ───────────────────── */
  --brand:      #2e4a3f;   /* 深緑——GARDENの落ち着いた緑 */
  --brand-2:    #1f3329;   /* 濃い緑（hover・グラデ終点） */
  --ink:        #1a1714;   /* 本文の濃色 */
  --paper:      #f7f3ee;   /* 背景の基調（生成り） */
  --paper-2:    #ece5da;   /* 一段沈めた面 */
  /* フォント: 見出しは上品なセリフ、本文は端正なゴシック。AIスロップ回避のため
     Inter/Roboto等の量産フォントは使わない。業種に合わせて差し替え可。 */
  --font-head:  "Shippori Mincho", "Noto Serif JP", "Hiragino Mincho ProN", serif;
  --font-body:  "Zen Kaku Gothic New", "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  /* ─────────────────────────────────────────────────── */

  --ink-soft:   #6b625a;
  --line:       #e3dcd0;
  --white:      #ffffff;
  --shadow:     0 18px 50px -20px rgba(40, 30, 20, .35);
  --wrap:       1180px;
  --ease:       cubic-bezier(.22, .61, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; overflow-x: clip; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.85;
  letter-spacing: .02em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

.wrap { width: min(100% - 2.6rem, var(--wrap)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 2.6rem, 760px); margin-inline: auto; }

h1, h2, h3 { font-family: var(--font-head); font-weight: 600; line-height: 1.4; letter-spacing: .04em; margin: 0; }

.eyebrow {
  font-size: .78rem; letter-spacing: .32em; text-transform: uppercase;
  color: var(--brand-2); font-weight: 600; margin: 0 0 1.1rem;
}
.section-title { font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.4rem); margin-bottom: 2.6rem; }
.section-title .accent { color: var(--brand); }
.lead { color: var(--ink-soft); font-size: 1.06rem; }

/* ── スクロール演出（reveal.js が .is-visible を付与） ── */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
.js .stagger > * { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.stagger.is-visible > * { opacity: 1; transform: none; }
.stagger.is-visible > *:nth-child(2) { transition-delay: .09s; }
.stagger.is-visible > *:nth-child(3) { transition-delay: .18s; }
.stagger.is-visible > *:nth-child(4) { transition-delay: .27s; }
.stagger.is-visible > *:nth-child(5) { transition-delay: .36s; }
.stagger.is-visible > *:nth-child(6) { transition-delay: .45s; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .stagger > * { opacity: 1 !important; transform: none !important; transition: none; }
  html { scroll-behavior: auto; }
}

/* ── ヘッダー（スクロールで背景が締まる） ── */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 40;
  display: flex; align-items: center; min-height: 74px;
  transition: background .4s var(--ease), box-shadow .4s var(--ease);
}
.site-header.scrolled { background: rgba(250, 247, 242, .9); backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--line); }
.header-inner { display: flex; align-items: center; justify-content: space-between; width: min(100% - 2.6rem, var(--wrap)); margin-inline: auto; }
.brand { font-family: var(--font-head); font-size: 1.22rem; letter-spacing: .06em; text-decoration: none; font-weight: 600; }
.nav { display: flex; align-items: center; gap: 1.8rem; }
.nav a { text-decoration: none; font-size: .92rem; letter-spacing: .08em; color: var(--ink-soft); transition: color .25s; }
.nav a:hover { color: var(--brand); }
@media (max-width: 820px) { .nav a:not(.btn) { display: none; } }

/* ── ボタン ── */
.btn {
  --pad: .95rem 2.2rem;
  display: inline-flex; align-items: center; gap: .5rem; padding: var(--pad);
  background: var(--brand); color: var(--white); text-decoration: none;
  font-size: .95rem; letter-spacing: .1em; border: none; cursor: pointer;
  border-radius: 2px; position: relative; overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.btn::after { content: ""; position: absolute; inset: 0; background: var(--brand-2); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); z-index: 0; }
.btn:hover::after { transform: scaleX(1); }
.btn > * , .btn { position: relative; z-index: 1; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -12px var(--brand-2); }
.btn-sm { --pad: .6rem 1.3rem; font-size: .84rem; }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.hero .btn-ghost { color: var(--white); border-color: rgba(255,255,255,.5); }
.hero .btn-ghost::after { background: var(--white); }
.hero .btn-ghost:hover { color: var(--ink); }
.btn-ghost::after { background: var(--ink); }
.btn-ghost:hover { color: var(--white); }

/* ── ヒーロー（フルブリード画像＋ケンバーンズ＋オーバーレイ） ── */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; color: var(--white); overflow: hidden; }
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; animation: kenburns 18s var(--ease) infinite alternate; }
@keyframes kenburns { from { transform: scale(1.06) translate(0,0); } to { transform: scale(1.16) translate(-2%, -2%); } }
.hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(105deg, rgba(20,15,12,.66) 0%, rgba(20,15,12,.28) 55%, rgba(20,15,12,.12) 100%); }
.hero-inner { position: relative; z-index: 2; padding: 8rem 0 6rem; max-width: 720px; }
.hero h1 { font-size: clamp(2.1rem, 1.3rem + 3.6vw, 3.8rem); letter-spacing: .06em; text-shadow: 0 2px 24px rgba(0,0,0,.3); }
.hero .lead { color: rgba(255,255,255,.9); font-size: 1.12rem; margin-top: 1.4rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.4rem; }
.scroll-cue { position: absolute; left: 50%; bottom: 2rem; z-index: 2; transform: translateX(-50%); width: 1px; height: 46px; background: rgba(255,255,255,.6); animation: cue 2s var(--ease) infinite; }
@keyframes cue { 0%,100% { opacity: .3; transform: translateX(-50%) scaleY(.4); } 50% { opacity: 1; transform: translateX(-50%) scaleY(1); } }

/* ── セクション ── */
.section { padding: clamp(4rem, 9vw, 7rem) 0; }
.section-paper { background: var(--paper-2); }
.section-dark { background: var(--ink); color: var(--paper); }
.section-dark .lead { color: rgba(250,247,242,.75); }

/* ── 強み3点 ── */
.points { list-style: none; margin: 0; padding: 0; display: grid; gap: 2.4rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.points li { text-align: center; }
.points .num { font-family: var(--font-head); font-size: 2.4rem; color: var(--brand); opacity: .5; display: block; margin-bottom: .6rem; }
.points h3 { font-size: 1.2rem; margin-bottom: .6rem; }
.points p { margin: 0; color: var(--ink-soft); font-size: .96rem; }

/* ── 画像＋テキストの交互組み ── */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.split.reverse .split-media { order: 2; }
@media (max-width: 800px) { .split { grid-template-columns: 1fr; } .split.reverse .split-media { order: 0; } }
.split-media { position: relative; overflow: hidden; border-radius: 3px; box-shadow: var(--shadow); }
.split-media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform 1.2s var(--ease); }
.split-media:hover img { transform: scale(1.05); }

/* ── サービスカード ── */
.cards { display: grid; gap: 1.6rem; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); }
.card { background: var(--white); border: 1px solid var(--line); padding: 2.2rem 1.8rem; transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.card h3 { font-size: 1.22rem; margin-bottom: .7rem; }
.card p { margin: 0 0 .6rem; color: var(--ink-soft); font-size: .95rem; }
.card .price { font-family: var(--font-head); color: var(--brand); font-size: 1.05rem; }

/* ── ギャラリー（実写真を主役に。hoverズーム＋ライトボックス） ── */
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .5rem; }
.gallery figure { margin: 0; overflow: hidden; position: relative; cursor: zoom-in; aspect-ratio: 1; }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.gallery figure:hover img { transform: scale(1.08); }
.gallery figure::after { content: ""; position: absolute; inset: 0; background: rgba(20,15,12,.0); transition: background .4s; }
.gallery figure:hover::after { background: rgba(20,15,12,.15); }
.gallery .tall { grid-row: span 2; aspect-ratio: 1/2; }
.gallery .wide { grid-column: span 2; aspect-ratio: 2/1; }
@media (max-width: 640px) { .gallery .wide, .gallery .tall { grid-column: auto; grid-row: auto; aspect-ratio: 1; } }

/* ── アクセス・営業時間 ── */
.info { margin: 0; display: grid; grid-template-columns: 6.5em 1fr; gap: .9rem 1.2rem; }
.info dt { color: var(--brand-2); font-family: var(--font-head); }
.info dd { margin: 0; }
.map { overflow: hidden; border-radius: 3px; box-shadow: var(--shadow); }
.map iframe { width: 100%; height: 360px; border: 0; display: block; filter: grayscale(.2) contrast(1.05); }

/* ── フォーム ── */
.form { display: grid; gap: 1.2rem; margin-top: 1.8rem; }
.field { display: grid; gap: .45rem; }
.field label { font-size: .9rem; letter-spacing: .06em; color: var(--ink-soft); }
.field .req { color: #c0392b; margin-left: .3rem; font-size: .78rem; }
.field input, .field select, .field textarea {
  font: inherit; color: inherit; padding: .9rem 1rem; background: var(--white);
  border: 1px solid var(--line); border-radius: 2px; width: 100%; transition: border-color .25s, box-shadow .25s;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(176,141,87,.15); }
.field textarea { min-height: 140px; resize: vertical; }
.form-note { font-size: .85rem; color: var(--ink-soft); margin: 0; }
.form-ok { display: none; padding: 1rem 1.2rem; background: var(--paper-2); border-left: 3px solid var(--brand); font-size: .95rem; }
.form-ok.show { display: block; }

/* ── フッター ── */
.site-footer { background: var(--ink); color: rgba(250,247,242,.72); padding: 3.5rem 0 2.5rem; }
.site-footer .brand { color: var(--white); font-size: 1.3rem; display: inline-block; margin-bottom: .8rem; }
.site-footer p { margin: .3rem 0; font-size: .9rem; }
.site-footer .fine { margin-top: 1.6rem; font-size: .78rem; color: rgba(250,247,242,.4); }

/* ── ライトボックス（reveal.jsが制御） ── */
.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(15,11,8,.92); display: none; align-items: center; justify-content: center; padding: 4vw; cursor: zoom-out; opacity: 0; transition: opacity .3s; }
.lightbox.open { display: flex; opacity: 1; }
.lightbox img { max-width: 92vw; max-height: 88vh; width: auto; height: auto; box-shadow: 0 30px 80px rgba(0,0,0,.6); }

/* ── ダークセクション上のフォーム（section-dark #contact 用） ── */
.section-dark .field label { color: rgba(250,247,242,.75); }
.section-dark .field input, .section-dark .field select, .section-dark .field textarea {
  background: rgba(255,255,255,.06); border-color: rgba(250,247,242,.2); color: var(--paper);
}
.section-dark .field input:focus, .section-dark .field select:focus, .section-dark .field textarea:focus {
  border-color: var(--brand); box-shadow: 0 0 0 3px rgba(176,141,87,.25);
}
.section-dark .form-note { color: rgba(250,247,242,.55); }
.section-dark .form-note a { color: var(--brand); }
.section-dark .form-ok { background: rgba(255,255,255,.08); color: var(--paper); }

/* ═══════════════════════════════════════════════════════════════
   MOTION SYSTEM — 「感動レベル」の動きの部品群（依存ゼロ・reveal.jsが駆動）
   全て .js スコープ or reduced-motion 対応で、JS無効/低モーション時は静的に成立する。
   モデルは業種に合わせて強度を選ぶ（落ち着いた店は控えめ、攻めた店は大胆に）。
   ═══════════════════════════════════════════════════════════════ */

/* ① スクロール進捗バー（最上部・高級感） */
.scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 60;
  background: linear-gradient(90deg, var(--brand), var(--brand-2)); transition: width .1s linear; }

/* ② パララックス（data-parallax の要素をJSがtranslateY。reduced-motionで無効） */
[data-parallax] { will-change: transform; }

/* ③ クリップパス画像リベール（fadeより上質な“ワイプ”出現） */
.js .reveal-img { clip-path: inset(0 0 100% 0); transform: scale(1.08); transition: clip-path 1.1s var(--ease), transform 1.4s var(--ease); }
.js .reveal-img.is-visible { clip-path: inset(0 0 0 0); transform: scale(1); }
@media (prefers-reduced-motion: reduce) { .js .reveal-img { clip-path: none !important; transform: none !important; } }

/* ④ ヒーロー入場（見出しの単語が下から順に立ち上がる＋ロード時の幕） */
.js .hero .word { display: inline-block; opacity: 0; transform: translateY(120%) rotate(4deg); transition: opacity .9s var(--ease), transform 1s var(--ease); }
.js .hero.entered .word { opacity: 1; transform: none; }
.js .hero .word:nth-child(2){transition-delay:.08s}.js .hero .word:nth-child(3){transition-delay:.16s}
.js .hero .word:nth-child(4){transition-delay:.24s}.js .hero .word:nth-child(5){transition-delay:.32s}
.js .hero .word:nth-child(6){transition-delay:.40s}.js .hero .word:nth-child(7){transition-delay:.48s}
.js .hero-inner .lead, .js .hero-inner .eyebrow, .js .hero-actions { opacity: 0; transform: translateY(20px); transition: opacity 1s var(--ease) .5s, transform 1s var(--ease) .5s; }
.js .hero.entered .lead, .js .hero.entered .eyebrow, .js .hero.entered .hero-actions { opacity: 1; transform: none; }
.page-curtain { position: fixed; inset: 0; z-index: 90; background: var(--ink); transform-origin: top; transition: transform 1s var(--ease); pointer-events: none; }
.page-curtain.lift { transform: scaleY(0); transform-origin: bottom; }
@media (prefers-reduced-motion: reduce) {
  .js .hero .word, .js .hero-inner .lead, .js .hero-inner .eyebrow, .js .hero-actions { opacity: 1 !important; transform: none !important; }
  .page-curtain { display: none; }
}

/* ⑤ カウントアップの数字（data-count） */
.stat { font-family: var(--font-head); font-size: clamp(2.2rem, 1.5rem + 2.4vw, 3.6rem); color: var(--brand); line-height: 1; }
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: 2rem; text-align: center; }
.stat-row .label { display: block; margin-top: .6rem; font-size: .85rem; letter-spacing: .12em; color: var(--ink-soft); }

/* ⑥ マーキー（ゆっくり流れる文字帯・エディトリアルで映える） */
.marquee { overflow: hidden; white-space: nowrap; border-block: 1px solid var(--line); padding: 1.2rem 0; }
.marquee-track { display: inline-block; animation: marquee 26s linear infinite; }
.marquee-track span { font-family: var(--font-head); font-size: clamp(1.4rem, 1rem + 1.4vw, 2.2rem); padding: 0 1.6rem; color: var(--ink-soft); letter-spacing: .08em; }
.marquee-track span::after { content: "✦"; color: var(--brand); padding-left: 3.2rem; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* ⑦ ボタンの光沢スイープ（既存 .btn に重畳） */
.btn::before { content: ""; position: absolute; top: 0; left: -75%; width: 50%; height: 100%; z-index: 2;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-20deg); transition: left .7s var(--ease); }
.btn:hover::before { left: 130%; }

/* ⑧ 生きたグラデ背景（画像が無いヒーロー・ダークセクション用） */
.mesh-bg { position: relative; overflow: hidden; }
.mesh-bg::before { content: ""; position: absolute; inset: -30%; z-index: 0;
  background:
    radial-gradient(closest-side at 25% 30%, var(--brand) 0%, transparent 55%),
    radial-gradient(closest-side at 75% 40%, var(--brand-2) 0%, transparent 50%),
    radial-gradient(closest-side at 50% 80%, var(--ink) 0%, transparent 60%);
  filter: blur(20px) saturate(1.1); opacity: .9; animation: mesh 20s ease-in-out infinite alternate; }
@keyframes mesh { 0% { transform: translate(0,0) scale(1); } 50% { transform: translate(4%, -3%) scale(1.1); } 100% { transform: translate(-3%, 4%) scale(1.05); } }
.mesh-bg > * { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .mesh-bg::before { animation: none; } }

/* 画像なしヒーロー（タイポ主役・暗ベース＋色の発光。写真ゼロでも高級に、白文字が確実に読める） */
.hero-mesh { color: var(--white); background: var(--ink); }
.hero-mesh::before { display: none; }              /* 写真オーバーレイは不要 */
.hero-mesh.mesh-bg::before { opacity: .8; filter: blur(40px) saturate(1.3); mix-blend-mode: screen; }
.hero-mesh::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(20,15,12,.2), rgba(20,15,12,.55)); }
.hero-mesh .hero-inner { position: relative; z-index: 2; }

/* ⑨ カードの3D傾き（hoverで奥行き） */
.tilt { transition: transform .3s var(--ease), box-shadow .3s var(--ease); transform-style: preserve-3d; }
.tilt:hover { box-shadow: var(--shadow); }

/* ⑩ 大見出しに画像を透かす（背景クリップ・強い印象） */
.text-clip { background-size: cover; background-position: center; -webkit-background-clip: text; background-clip: text; color: transparent; }

.site-header.hidden { transform: translateY(-100%); }

/* ── ヒーロー上のヘッダーは白文字（暗い写真/暗ベースでも読める）。scrolledで通常色に戻る ── */
.site-header:not(.scrolled) .brand,
.site-header:not(.scrolled) .nav a:not(.btn) { color: rgba(255,255,255,.92); }
.site-header:not(.scrolled) .nav a:not(.btn):hover { color: var(--white); }
.site-header:not(.scrolled) .btn-sm { background: rgba(255,255,255,.14); backdrop-filter: blur(6px); }

/* ═══════════════════════════════════════════════════════════════
   CREATIVE LAYOUT SYSTEM — 「型にはまらない」ための非対称・重なりプリミティブ
   四角の横並びを脱するための道具。重なりは .stack（CSSグリッド）で“安全に”作る
   ＝absoluteと違い responsive を保つ。absoluteは装飾アクセントに限定使用。
   全て768px以下で素直な1カラムに畳む（＝崩れない）。
   ═══════════════════════════════════════════════════════════════ */

/* ── .stack: 子要素を同じ場所に重ねる（安全なオーバーラップの主力） ── */
.stack { display: grid; }
.stack > * { grid-area: 1 / 1; }          /* 全ての子が同じセルに重なる */
.stack.items-end { align-items: end; }
.stack.items-center { align-items: center; }
.stack.justify-end { justify-items: end; }
/* 重ねた上のカード（画像の縁に乗るテキストパネル等） */
.panel { background: var(--paper); padding: clamp(1.6rem, 3vw, 3rem); box-shadow: var(--shadow);
  align-self: end; justify-self: start; max-width: 78%; position: relative; z-index: 2; }
.panel.right { justify-self: end; }
.panel.dark { background: var(--ink); color: var(--paper); }
.panel.brand { background: var(--brand); color: var(--white); }

/* ── フルブリード / 片側ブリード（画面端まで画像を流す） ── */
.bleed { width: 100vw; margin-left: calc(50% - 50vw); }
.bleed-r { margin-right: calc(-1 * (50vw - 50%)); max-width: none; }   /* 右端まで（html:clipで内包） */
.bleed-l { margin-left: calc(-1 * (50vw - 50%)); max-width: none; }

/* ── オフセット/引き上げ（隣接ブロックを重ねる） ── */
.pull-up { margin-top: clamp(-6rem, -6vw, -3rem); }
.pull-down { margin-bottom: clamp(-6rem, -6vw, -3rem); }
.offset-y { transform: translateY(clamp(-3rem, -4vw, -1.5rem)); }

/* ── 非対称スプリット（60/40・オフセット・片側ブリード） ── */
.split-asym { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.split-asym.reverse { grid-template-columns: 1fr 1.4fr; }
.split-7-5 { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(2rem, 4vw, 4rem); align-items: start; }

/* ── 巨大ディスプレイ文字（縁からはみ出す・アウトライン・背後の数字） ── */
.display-xl { font-family: var(--font-head); font-size: clamp(2.6rem, 8vw, 7rem); line-height: .98; letter-spacing: .02em; }
.outline-text { -webkit-text-stroke: 1.4px var(--brand); text-stroke: 1.4px var(--brand); color: transparent; }
.ghost-num { position: absolute; z-index: 0; font-family: var(--font-head); font-size: clamp(7rem, 26vw, 22rem);
  line-height: .8; color: var(--brand); opacity: .08; pointer-events: none; user-select: none; }
.ghost-word { position: absolute; z-index: 0; font-family: var(--font-head); font-size: clamp(4rem, 14vw, 12rem);
  color: var(--ink); opacity: .05; pointer-events: none; white-space: nowrap; }
.has-ghost { position: relative; overflow: hidden; }
.has-ghost > * { position: relative; z-index: 1; }

/* ── 縦書きラベル（和の高級感） ── */
.vertical { writing-mode: vertical-rl; text-orientation: upright; letter-spacing: .3em; }

/* ── stickyスクロール（画像が留まり、隣のテキストが流れる） ── */
.sticky-col { position: sticky; top: 14vh; }

/* ── 斜めの区切り / 回転アクセント ── */
.diagonal-top { clip-path: polygon(0 4vw, 100% 0, 100% 100%, 0 100%); }
.diagonal-bottom { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 4vw), 0 100%); }
.rotate-l { transform: rotate(-3deg); }
.rotate-r { transform: rotate(3deg); }

/* ── マゾンリー風ギャラリー（不揃いで動きが出る） ── */
.gallery-masonry { columns: 3 240px; column-gap: .6rem; }
.gallery-masonry figure { margin: 0 0 .6rem; break-inside: avoid; overflow: hidden; cursor: zoom-in; }
.gallery-masonry img { width: 100%; display: block; transition: transform .8s var(--ease); }
.gallery-masonry figure:hover img { transform: scale(1.06); }

/* ── レイヤー深度（画像＋パネル＋アクセントが重なる） ── */
.depth-accent { width: clamp(120px, 18vw, 240px); aspect-ratio: 1; background: var(--brand); opacity: .9; z-index: 0; align-self: start; justify-self: end; }

/* ── 768px以下は非対称を素直に畳む（＝スマホで崩れない） ── */
@media (max-width: 768px) {
  .split-asym, .split-asym.reverse, .split-7-5 { grid-template-columns: 1fr; }
  .panel { max-width: 100%; }
  .bleed-r, .bleed-l { margin-inline: 0 !important; max-width: 100% !important; }
  .pull-up, .pull-down, .offset-y { margin-top: 0 !important; margin-bottom: 0 !important; transform: none !important; }
  .ghost-num { font-size: clamp(6rem, 40vw, 12rem); }
  .gallery-masonry { columns: 2 140px; }
  .vertical { writing-mode: horizontal-tb; letter-spacing: .1em; }
  .sticky-col { position: static; }
  .rotate-l, .rotate-r { transform: none; }
}