/* 作成: Tech僧侶（江音寺 荻原龍光） */
/* 高級感リデザイン 2026-07-03: 明朝見出し・低明度配色・余白・控えめモーション（唐招提寺/貴船神社型リサーチ反映） */
:root {
  --ink: #1a2233;
  --muted: #5a6472;
  --line: #e2ddd2;
  --paper: #f7f5ef;
  --white: #ffffff;
  --navy: #0e1828;
  --navy-2: #16233c;
  --pine: #1d5c4a;
  --pine-deep: #144536;
  --gold: #b08d45;
  --gold-soft: #d9c08a;
  --wood: #4a3527;
  --wood-deep: #382519;
  --washi: #f5f0e5;
  --mist: #eef2ec;
  --shadow: 0 22px 70px rgba(23, 32, 51, 0.14);
  --shadow-hover: 0 30px 80px rgba(23, 32, 51, 0.22);
  --serif: "Shippori Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --sans: "Zen Kaku Gothic New", "Yu Gothic UI", "Meiryo", sans-serif;
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--sans); color: var(--ink); background: var(--paper); line-height: 1.85; font-feature-settings: "palt"; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
:focus-visible { outline: 2px solid #8a6d33; outline-offset: 3px; }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 60; padding: 10px 16px; background: var(--ink); color: var(--white); font-weight: 800; border-radius: 0 0 4px 0; }
.skip-link:focus-visible { left: 0; }

/* ---- ヘッダー ---- */
.site-header { position: sticky; top: 0; z-index: 30; display: grid; grid-template-columns: minmax(190px, 1fr) auto auto; gap: 18px; align-items: center; padding: 12px clamp(18px, 4vw, 56px); background: rgba(247, 245, 239, 0.92); border-bottom: 1px solid var(--line); backdrop-filter: blur(18px); }
.brand { display: inline-flex; align-items: center; gap: 12px; min-width: 0; }
.brand-mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 6px; color: var(--white); background: var(--ink); font-family: var(--serif); font-weight: 700; flex: 0 0 auto; }
.brand-mark svg { width: 29px; height: 29px; fill: none; stroke: currentColor; stroke-width: 5; stroke-linecap: round; }
.brand strong, .brand small { display: block; line-height: 1.2; }
.brand strong { font-family: var(--serif); letter-spacing: 0.06em; }
.brand small { color: var(--muted); font-size: 12px; margin-top: 2px; letter-spacing: 0.08em; }
.nav { display: flex; gap: 6px; padding: 4px; border: 1px solid var(--line); background: var(--white); border-radius: 6px; overflow-x: auto; }
.nav-button { border: 0; background: transparent; color: var(--muted); padding: 9px 14px; border-radius: 4px; font-size: 14px; font-weight: 700; letter-spacing: 0.04em; white-space: nowrap; cursor: pointer; transition: color 0.3s var(--ease-out), background 0.3s var(--ease-out); }
.nav-button:hover { color: var(--ink); }
.nav-button.active { background: var(--ink); color: var(--white); }

/* ---- ボタン ---- */
.header-cta, .button { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 22px; border-radius: 4px; font-weight: 800; letter-spacing: 0.05em; transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), background 0.35s var(--ease-out), border-color 0.35s var(--ease-out); }
.header-cta, .button.primary { background: linear-gradient(135deg, var(--pine) 0%, var(--pine-deep) 100%); color: var(--white); box-shadow: 0 10px 26px rgba(20, 69, 54, 0.24); }
.header-cta:hover, .button.primary:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(20, 69, 54, 0.32); }
.button.secondary { border: 1px solid rgba(26, 34, 51, 0.2); background: var(--white); color: var(--ink); }
.button.secondary:hover { transform: translateY(-2px); border-color: var(--gold); box-shadow: 0 12px 28px rgba(23, 32, 51, 0.1); }

/* ---- 基本タイポグラフィ ---- */
.view { display: none; }
.active-view { display: block; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-family: var(--serif); font-weight: 600; }
h1 { margin-bottom: 22px; font-size: clamp(40px, 5.6vw, 72px); line-height: 1.12; letter-spacing: 0.02em; }
h2 { margin-bottom: 14px; font-size: clamp(28px, 3.8vw, 46px); line-height: 1.22; letter-spacing: 0.02em; }
h3 { margin-bottom: 10px; font-size: 21px; line-height: 1.32; letter-spacing: 0.02em; font-weight: 800; }
.lead { max-width: 720px; margin-bottom: 28px; color: #39465a; font-size: clamp(16px, 1.9vw, 20px); }
.section-note { margin: 0 0 14px; color: var(--pine); font-size: 13px; font-weight: 900; letter-spacing: 0.22em; text-transform: uppercase; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 30px; }
.text-link { display: inline-flex; margin-top: 14px; color: var(--pine); border-bottom: 1px solid currentColor; font-weight: 800; transition: color 0.3s var(--ease-out); }
.text-link:hover { color: var(--gold); }

/* ---- スクロール連動リビール ---- */
.will-reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); }
.reveal-delay-1 { transition-delay: 70ms; }
.reveal-delay-2 { transition-delay: 140ms; }
.reveal-delay-3 { transition-delay: 210ms; }
.reveal-delay-4 { transition-delay: 280ms; }
.reveal-delay-5 { transition-delay: 350ms; }
.will-reveal.is-visible { opacity: 1; transform: none; }

/* ---- 副業LP: シネマティックヒーロー ---- */
.sidejob-hero { position: relative; overflow: hidden; min-height: calc(100vh - 72px); display: grid; grid-template-columns: minmax(0, 0.88fr) minmax(420px, 1fr); gap: clamp(34px, 5vw, 78px); align-items: center; padding: clamp(46px, 7vw, 92px) clamp(18px, 5vw, 72px) 54px; color: var(--white); background: linear-gradient(135deg, #0c1524 0%, #142238 52%, #1e3320 100%); }
.sidejob-hero::before { content: ""; position: absolute; top: -30%; right: -12%; width: 60vw; height: 60vw; max-width: 860px; max-height: 860px; border-radius: 50%; background: radial-gradient(circle, rgba(176, 141, 69, 0.22) 0%, rgba(176, 141, 69, 0) 62%); animation: glow-drift 16s ease-in-out infinite alternate; pointer-events: none; }
.sidejob-hero > * { position: relative; z-index: 1; }
@keyframes glow-drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-6%, 8%, 0) scale(1.12); } }
.sidejob-hero .section-note { color: var(--gold-soft); }
.sidejob-hero .lead { color: #d9e3ef; }
.sidejob-hero .button.secondary { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.3); color: var(--white); }
.sidejob-hero .button.secondary:hover { border-color: var(--gold-soft); }
.trust-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0; }
.trust-list div { padding: 14px 0; border-top: 1px solid rgba(255, 255, 255, 0.22); }
.trust-list dt { color: #b9c5d5; font-size: 13px; font-weight: 800; letter-spacing: 0.08em; }
.trust-list dd { margin: 4px 0 0; font-size: 14px; font-weight: 800; }
.sidejob-media { display: grid; gap: 14px; }
.hero-card-image { width: 100%; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 6px; box-shadow: 0 26px 80px rgba(0, 0, 0, 0.36); }
.profile-card { position: relative; display: block; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.24); border-radius: 8px; box-shadow: 0 26px 80px rgba(0, 0, 0, 0.36); }
.profile-card picture { display: block; }
.profile-card .hero-card-image { aspect-ratio: 4 / 3; border: 0; border-radius: 0; object-fit: cover; object-position: 50% 33%; box-shadow: none; transition: transform 0.7s var(--ease-out), filter 0.7s var(--ease-out); }
.profile-card:hover .hero-card-image { transform: scale(1.025); filter: brightness(1.04); }
.profile-card-label { position: absolute; left: 18px; bottom: 18px; display: inline-flex; padding: 8px 12px; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 999px; color: var(--white); background: rgba(8, 17, 29, 0.82); font-size: 13px; font-weight: 900; letter-spacing: 0.08em; backdrop-filter: blur(10px); }
.media-caption { display: grid; gap: 4px; padding: 16px 18px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 6px; background: rgba(255, 255, 255, 0.07); }
.media-caption span { color: #dce5ef; }

/* ---- 副業LP: 入口ストリップ ---- */
.offer-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.offer-strip article { padding: 30px clamp(18px, 4vw, 40px); background: var(--white); transition: background 0.4s var(--ease-out); }
.offer-strip article:hover { background: #fbf9f4; }
.offer-strip span { font-family: var(--serif); color: var(--gold); font-size: 26px; font-weight: 600; }
.offer-strip h2 { margin: 8px 0; font-size: clamp(21px, 2.6vw, 30px); }
.offer-strip p { margin-bottom: 0; color: var(--muted); }

/* ---- 見積り相談の準備 ---- */
.consultation-prep { padding: 78px clamp(18px, 5vw, 72px); background: linear-gradient(135deg, #f8f6ef 0%, #eef4f0 100%); border-bottom: 1px solid var(--line); }
.consultation-prep .section-heading { margin-bottom: 30px; }
.prep-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.prep-grid li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; padding: 22px; border: 1px solid #cfdad3; border-radius: 6px; background: rgba(255, 255, 255, 0.88); box-shadow: 0 12px 34px rgba(23, 50, 42, 0.06); }
.prep-grid li > span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: var(--white); background: var(--pine); font-family: var(--serif); font-weight: 700; }
.prep-grid strong { display: block; margin-bottom: 6px; color: var(--navy); font-size: 18px; }
.prep-grid p { margin-bottom: 0; color: var(--muted); }
.prep-action { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 20px; padding: 20px 22px; border-left: 4px solid var(--gold); background: var(--white); }
.prep-action p { max-width: 820px; margin-bottom: 0; color: var(--muted); }
.prep-action strong { color: var(--navy); }
.prep-action .button { flex: 0 0 auto; }

/* ---- 目玉商品: 領収書即時発行アプリ ---- */
.flagship-section { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(320px, 0.88fr); gap: clamp(34px, 6vw, 88px); align-items: center; padding: clamp(72px, 9vw, 124px) clamp(18px, 6vw, 88px); color: var(--white); background: radial-gradient(circle at 84% 18%, rgba(176, 141, 69, 0.19), transparent 28%), linear-gradient(135deg, #0d1727 0%, #162640 64%, #102f2b 100%); border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.flagship-section .section-note { color: var(--gold-soft); }
.flagship-kicker { display: inline-flex; margin-bottom: 16px; padding: 7px 12px; border: 1px solid rgba(217, 192, 138, 0.56); border-radius: 999px; color: #f4dfae; background: rgba(176, 141, 69, 0.12); font-size: 13px; font-weight: 900; letter-spacing: 0.12em; }
.flagship-copy h2 { max-width: 760px; margin-bottom: 18px; color: var(--white); font-size: clamp(34px, 5.2vw, 64px); }
.flagship-lead { max-width: 780px; margin-bottom: 28px; color: #d9e3ef; font-size: clamp(17px, 2vw, 21px); }
.flagship-proof { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 26px; }
.flagship-proof div { padding: 16px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 6px; background: rgba(255, 255, 255, 0.06); }
.flagship-proof strong, .flagship-proof span { display: block; }
.flagship-proof strong { margin-bottom: 4px; color: #f7e7bf; font-size: 17px; }
.flagship-proof span { color: #cdd8e5; font-size: 13px; line-height: 1.55; }
.flagship-safety { display: grid; gap: 9px; margin: 0 0 28px; padding: 0; list-style: none; }
.flagship-safety li { position: relative; padding-left: 24px; color: #dce5ef; }
.flagship-safety li::before { content: "✓"; position: absolute; left: 0; color: var(--gold-soft); font-weight: 900; }
.flagship-section .button.secondary { color: var(--white); background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.3); }
.flagship-note { max-width: 760px; margin: -10px 0 0; color: #aebdcc; font-size: 13px; }
.flagship-media { max-width: 460px; justify-self: center; }
.flagship-video-shell { padding: 12px; border: 1px solid rgba(217, 192, 138, 0.48); border-radius: 18px; background: rgba(7, 14, 25, 0.76); box-shadow: 0 34px 90px rgba(0, 0, 0, 0.42); }
.flagship-video-shell video { display: block; width: 100%; max-height: 690px; aspect-ratio: 9 / 16; object-fit: contain; border-radius: 10px; background: #070c13; }
.flagship-media-meta { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: center; margin-top: 14px; color: #dce5ef; }
.flagship-media-meta span { grid-row: span 2; display: inline-flex; align-items: center; justify-content: center; min-width: 60px; min-height: 42px; border-radius: 999px; color: var(--navy); background: var(--gold-soft); font-weight: 900; }
.flagship-media-meta strong, .flagship-media-meta small { display: block; }
.flagship-media-meta small { color: #aebdcc; }

/* ---- 商品カード ---- */
.band { padding: 84px clamp(18px, 5vw, 72px); background: var(--white); border-top: 1px solid var(--line); }
.section-heading { max-width: 810px; margin-bottom: 38px; }
.section-heading p { color: var(--muted); font-size: 17px; }
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.product-card { min-width: 0; padding: 18px; border: 1px solid var(--line); border-radius: 6px; background: #fcfcfb; transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out), border-color 0.45s var(--ease-out); }
.product-card:hover { transform: translateY(-6px); border-color: var(--gold-soft); box-shadow: var(--shadow-hover); }
.product-card.featured { grid-column: span 2; background: #f3f7f3; border-color: #bed7ca; }
.product-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 4px; margin-bottom: 18px; background: var(--mist); transition: transform 0.7s var(--ease-out); }
.product-card img.portrait-safe { object-position: 50% 15%; }
.legacy-product-card { background: #fff8ed !important; border-color: #e2c187 !important; }
.legacy-product-card img { object-position: 50% 12%; }
.product-card:hover img { transform: scale(1.025); }
.product-type { display: block; margin-bottom: 9px; color: var(--pine); font-size: 12px; font-weight: 900; letter-spacing: 0.16em; text-transform: uppercase; }
.product-card p { margin-bottom: 0; color: #495466; }

/* ---- 実演動画 ---- */
.demo-showcase { padding: 86px clamp(18px, 5vw, 72px); background: linear-gradient(145deg, #111d2f 0%, #172a35 100%); color: var(--white); }
.demo-showcase .section-heading { max-width: 760px; }
.demo-showcase .section-heading h2 { color: var(--white); }
.demo-showcase .section-heading p { color: #d5dee8; }
.demo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.demo-card { overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 8px; background: rgba(255, 255, 255, 0.06); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22); transition: transform 0.45s var(--ease-out), border-color 0.45s var(--ease-out); }
.demo-card:hover { transform: translateY(-5px); border-color: rgba(200, 164, 93, 0.7); }
.demo-card-existing { border-color: rgba(215, 174, 91, 0.72); background: linear-gradient(145deg, rgba(215, 174, 91, 0.14), rgba(255, 255, 255, 0.06)); }
.demo-card-keisho { grid-column: span 2; display: grid; grid-template-columns: minmax(270px, 0.78fr) 1.22fr; align-items: stretch; border-color: rgba(225, 129, 0, 0.82); background: linear-gradient(145deg, rgba(225, 129, 0, 0.18), rgba(255, 255, 255, 0.06)); }
.demo-card-keisho video { height: 100%; max-height: 620px; }
.demo-card-keisho .demo-copy { display: flex; flex-direction: column; justify-content: center; }
.demo-card video { display: block; width: 100%; aspect-ratio: 9 / 16; max-height: 560px; object-fit: cover; background: #0b1520; }
.demo-copy { padding: 22px; }
.demo-copy span { display: inline-flex; margin-bottom: 9px; color: var(--gold-soft); font-size: 12px; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; }
.demo-copy h3 { margin-bottom: 9px; color: var(--white); }
.demo-copy p { margin-bottom: 0; color: #d5dee8; }
.demo-note { max-width: 860px; margin: 22px 0 0; color: #bac8d5; font-size: 13px; }
.demo-more { margin-top: 18px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 7px; background: rgba(255, 255, 255, 0.04); }
.demo-more summary { position: relative; padding: 17px 52px 17px 20px; color: var(--white); cursor: pointer; font-weight: 900; list-style: none; }
.demo-more summary::-webkit-details-marker { display: none; }
.demo-more summary::after { content: "＋"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); color: var(--gold-soft); font-family: var(--serif); font-size: 21px; }
.demo-more[open] summary::after { content: "−"; }
.demo-grid-secondary { padding: 0 18px 18px; }
.demo-specialty { border-color: rgba(217, 192, 138, 0.34); }
.demo-specialty-note { margin: 0; padding: 0 20px 16px; color: #c8d2dc; font-size: 14px; }
.demo-card-research { border-color: rgba(217, 192, 138, 0.46); background: rgba(176, 141, 69, 0.08); }

/* ---- 進め方 ---- */
.split-section { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(360px, 1fr); gap: clamp(32px, 5vw, 64px); align-items: center; padding: 86px clamp(18px, 5vw, 72px); }
.proof-section { background: #f4f2ea; }
.split-section p { color: var(--muted); font-size: 17px; }
.split-section img { width: 100%; border-radius: 6px; box-shadow: var(--shadow); }
.steps { display: grid; gap: 10px; margin-top: 28px; }
.steps div { display: grid; grid-template-columns: 46px 1fr; gap: 14px; align-items: center; padding: 13px 0; border-top: 1px solid var(--line); }
.steps strong { font-family: var(--serif); color: var(--gold); font-size: 19px; font-weight: 600; }
.steps span { font-weight: 800; }

/* ---- 商品棚 ---- */
.catalog-hero { min-height: calc(100vh - 72px); display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(420px, 1fr); gap: clamp(34px, 5vw, 76px); align-items: center; padding: clamp(46px, 7vw, 92px) clamp(18px, 5vw, 72px); background: #f0f2ec; }
.catalog-media { display: grid; gap: 14px; }
.catalog-media img { width: 100%; max-height: 360px; object-fit: cover; border-radius: 6px; box-shadow: var(--shadow); }
.catalog-layout { display: grid; grid-template-columns: 260px 1fr; gap: 28px; padding: 80px clamp(18px, 5vw, 72px); background: var(--white); }
.filter-panel { position: sticky; top: 92px; align-self: start; }
.filter-panel h2 { font-size: 25px; }
.filter { display: block; width: 100%; margin-bottom: 8px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 4px; background: var(--white); text-align: left; font-weight: 800; transition: border-color 0.3s var(--ease-out), transform 0.3s var(--ease-out); }
.filter:hover { border-color: var(--gold); transform: translateX(3px); }
.filter.active { color: var(--white); background: var(--navy-2); border-color: var(--navy-2); }
.filter-panel span.filter { cursor: default; }
.filter-panel span.filter:hover { border-color: var(--line); transform: none; }
.filter-panel span.filter.active:hover { border-color: var(--navy-2); }
.filter-panel > .text-link { display: inline-flex; margin-top: 12px; }
.category-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.category-list li { padding: 11px 13px; border-left: 3px solid #c8cfd5; color: var(--muted); background: #f7f8f7; font-weight: 800; }
/* 未定義変数を参照すると背景が透明化して色分けが消えるため、既存トークンで指定する */
.category-list .category-core { border-left-color: var(--pine); color: var(--navy); background: var(--mist); }
.category-list .category-secondary { border-left-color: var(--gold); color: var(--wood-deep); background: var(--washi); }
.catalog-list { display: grid; gap: 18px; }
.catalog-item { display: grid; grid-template-columns: 220px 1fr; gap: 22px; align-items: center; padding: 18px; border: 1px solid var(--line); border-radius: 6px; background: #fcfcfb; transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out), border-color 0.45s var(--ease-out); }
.catalog-item:hover { transform: translateY(-4px); border-color: var(--gold-soft); box-shadow: var(--shadow-hover); }
.catalog-item img { width: 220px; height: 154px; object-fit: cover; border-radius: 4px; }
.catalog-item img.portrait-safe { object-position: 50% 15%; }
.catalog-item img.catalog-poster { object-position: 50% 16%; }
.catalog-item.catalog-feature { border-color: #b9d5c8; background: linear-gradient(135deg, #f3f8f5 0%, #fffdf7 100%); box-shadow: 0 18px 42px rgba(20, 69, 54, 0.11); }
.catalog-item.legacy-catalog-item { border-color: #dfc087; background: linear-gradient(135deg, #fff8ed 0%, #fffdf8 100%); box-shadow: 0 18px 42px rgba(104, 66, 9, 0.1); }
.catalog-item.catalog-secondary { border-color: #d8d2c4; background: #f7f5f0; box-shadow: none; }
.catalog-item.catalog-secondary .product-type { color: #7c6534; }
.catalog-item p { margin-bottom: 0; color: var(--muted); }
.catalog-notice { margin: 2px 0 0; padding: 16px 18px; border-left: 4px solid var(--gold); background: #f6f1e7; color: #4b5160; font-size: 14px; line-height: 1.75; }

/* ---- クロージングCTA ---- */
.closing-cta { display: flex; justify-content: space-between; gap: 28px; align-items: center; flex-wrap: wrap; padding: 66px clamp(18px, 5vw, 72px); border-top: 1px solid var(--line); background: var(--mist); }
.closing-cta h2 { margin-bottom: 8px; }
.closing-cta p { max-width: 760px; margin-bottom: 0; color: var(--muted); font-size: 17px; }
.sidejob-close { background: var(--navy); color: var(--white); }
.sidejob-close p { color: #d7e0ed; }
.sidejob-close .section-note { color: var(--gold-soft); }

/* ---- お寺HP: 静寂の高級感 ---- */
.temple-header .brand-mark { background: var(--wood); }
.temple-header .header-cta { background: linear-gradient(135deg, var(--wood) 0%, var(--wood-deep) 100%); box-shadow: 0 10px 26px rgba(56, 37, 25, 0.24); }
.temple-note { color: var(--wood); }
.temple-hero { position: relative; min-height: calc(100vh - 72px); display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(400px, 1fr); gap: clamp(34px, 5vw, 70px); align-items: center; padding: clamp(46px, 7vw, 92px) clamp(18px, 5vw, 72px) 54px; background: linear-gradient(160deg, #f6f1e6 0%, #f2ecdd 58%, #ece4d0 100%); }
.temple-copy { max-width: 680px; }
.temple-copy h1 { color: var(--wood-deep); font-size: clamp(62px, 9.4vw, 118px); letter-spacing: 0.1em; }
.temple-lead { margin-bottom: 18px; color: #2b3648; font-family: var(--serif); font-size: clamp(22px, 2.8vw, 33px); font-weight: 600; letter-spacing: 0.06em; }
.temple-copy p:not(.temple-lead):not(.section-note) { color: #4c5568; font-size: 17px; }
.temple-hero-photo { overflow: hidden; border-radius: 6px; box-shadow: var(--shadow); }
.temple-hero-photo img { width: 100%; max-height: 720px; aspect-ratio: 4 / 5; object-fit: cover; object-position: center; animation: kenburns 22s ease-in-out infinite alternate; }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.07); } }
.vertical-motto { position: absolute; top: clamp(60px, 10vh, 120px); right: clamp(10px, 1.6vw, 28px); margin: 0; writing-mode: vertical-rl; font-family: var(--serif); font-size: clamp(14px, 1.3vw, 18px); letter-spacing: 0.42em; color: rgba(74, 53, 39, 0.62); }
.vertical-motto::before { content: ""; display: block; width: 1px; height: 46px; margin: 0 auto 18px; background: linear-gradient(to bottom, transparent, var(--gold)); }
.temple-quick-info { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0; }
.temple-quick-info div { padding: 14px; border: 1px solid #ddceb4; border-radius: 4px; background: rgba(255, 255, 255, 0.72); }
.temple-quick-info dt { color: var(--wood); font-size: 12px; font-weight: 900; letter-spacing: 0.14em; }
.temple-quick-info dd { margin: 2px 0 0; font-family: var(--serif); font-weight: 700; }
.temple-about, .temple-gallery, .temple-access, .temple-contact, .temple-guide, .temple-news, .temple-events, .temple-journal, .temple-goshuin, .temple-jushoku, .temple-faq { padding: 84px clamp(18px, 5vw, 72px); }
.temple-about, .temple-access { background: var(--white); }
.temple-guide, .temple-news, .temple-events, .temple-journal, .temple-jushoku, .temple-faq { background: #fbf9f3; }
.temple-about h2::after, .temple-guide h2::after, .temple-gallery h2::after, .temple-access h2::after, .temple-news h2::after, .temple-events h2::after, .temple-journal h2::after, .temple-goshuin h2::after, .temple-jushoku h2::after, .temple-faq h2::after { content: ""; display: block; width: 52px; height: 1px; margin-top: 16px; background: linear-gradient(to right, var(--gold), transparent); }
.about-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 0; }
.about-facts div { padding: 20px; border: 1px solid var(--line); border-top: 2px solid var(--gold-soft); border-radius: 4px; background: #fbfaf6; transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out); }
.about-facts div:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(57, 45, 32, 0.12); }
.about-facts dt { margin-bottom: 5px; color: var(--wood); font-family: var(--serif); font-weight: 700; letter-spacing: 0.08em; }
.about-facts dd { margin: 0; color: #485160; font-weight: 700; }
.guide-feature { display: grid; grid-template-columns: minmax(280px, 0.82fr) minmax(0, 1.18fr); gap: 0; overflow: hidden; margin-bottom: 16px; border: 1px solid #e2d7c4; border-radius: 6px; background: var(--white); box-shadow: 0 16px 40px rgba(57, 45, 32, 0.08); }
.guide-feature picture { min-height: 100%; }
.guide-feature img { width: 100%; height: 100%; min-height: 330px; object-fit: cover; }
.guide-feature div { padding: clamp(26px, 4vw, 46px); align-self: center; }
.guide-feature span { display: inline-flex; margin-bottom: 10px; color: var(--wood); font-size: 12px; font-weight: 900; letter-spacing: 0.16em; }
.guide-feature h3 { font-size: clamp(24px, 2.8vw, 32px); }
.guide-feature p { margin-bottom: 0; color: var(--muted); }
.guide-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.guide-grid article { padding: 24px; border: 1px solid #e2d7c4; border-radius: 4px; background: var(--white); transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out), border-color 0.45s var(--ease-out); }
.guide-grid article:hover { transform: translateY(-5px); border-color: var(--gold-soft); box-shadow: 0 18px 40px rgba(57, 45, 32, 0.12); }
.guide-grid span { display: inline-flex; margin-bottom: 10px; color: var(--wood); font-size: 12px; font-weight: 900; letter-spacing: 0.16em; }
.guide-grid p { margin-bottom: 0; color: var(--muted); }

/* ---- ギャラリー ---- */
.temple-gallery { background: linear-gradient(160deg, #f5f0e4 0%, #f0e9d8 100%); }
.temple-gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.temple-gallery-grid figure { margin: 0; overflow: hidden; border: 1px solid #ded2be; border-radius: 6px; background: var(--white); box-shadow: 0 12px 28px rgba(57, 45, 32, 0.08); transition: box-shadow 0.5s var(--ease-out); }
.temple-gallery-grid figure:hover { box-shadow: 0 22px 52px rgba(57, 45, 32, 0.18); }
.temple-gallery-grid .gallery-feature { grid-column: span 2; grid-row: span 2; }
.temple-gallery-grid .gallery-panorama { grid-column: span 2; }
.temple-gallery-grid img { width: 100%; height: 260px; object-fit: cover; transition: transform 0.85s var(--ease-out); }
.temple-gallery-grid figure:hover img { transform: scale(1.05); }
.temple-gallery-grid .gallery-feature img { height: 556px; }
.temple-gallery-grid figcaption { padding: 13px 15px; color: var(--ink); font-family: var(--serif); font-weight: 700; letter-spacing: 0.08em; }
.temple-gallery-grid figcaption::before { content: "―"; margin-right: 8px; color: var(--gold); }

/* ---- アクセス・連絡 ---- */
.access-layout { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(380px, 1fr); gap: clamp(26px, 4vw, 52px); align-items: start; }
.access-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.access-item { padding: 20px; border: 1px solid var(--line); border-radius: 4px; background: #fbfaf6; transition: border-color 0.35s var(--ease-out); }
.access-item:hover { border-color: var(--gold-soft); }
.access-item dt { margin-bottom: 6px; color: var(--wood); font-family: var(--serif); font-weight: 700; letter-spacing: 0.08em; }
.access-item dd { margin: 0; color: #485160; font-weight: 700; }
.map-card { margin: 0; overflow: hidden; border: 1px solid #d9cdb6; border-radius: 6px; background: var(--white); box-shadow: var(--shadow); }
.map-card img { width: 100%; object-fit: contain; background: #f7f4ec; }
.map-card figcaption { padding: 12px 14px; color: var(--muted); font-size: 13px; font-weight: 800; }
.temple-contact { display: flex; justify-content: space-between; gap: 28px; align-items: center; flex-wrap: wrap; background: linear-gradient(135deg, var(--wood) 0%, var(--wood-deep) 100%); color: var(--white); }
.temple-contact h2 { color: #f6efe2; }
.temple-contact p { max-width: 760px; margin-bottom: 0; color: #f1e9dd; font-size: 17px; }
.temple-contact .section-note { color: var(--gold-soft); }
.temple-phone { background: #fdf8ec !important; color: var(--wood-deep) !important; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22); }

/* ---- お寺HP: お知らせ ---- */
.news-list { list-style: none; margin: 0; padding: 0; }
.news-list li { display: grid; grid-template-columns: 210px 84px 1fr; gap: 18px; align-items: baseline; padding: 18px 0; border-top: 1px solid var(--line); }
.news-list li:last-child { border-bottom: 1px solid var(--line); }
.news-list time, .news-date { font-family: var(--serif); color: var(--wood); font-weight: 700; letter-spacing: 0.04em; }
.news-tag { justify-self: start; padding: 2px 12px; border: 1px solid var(--gold-soft); border-radius: 999px; color: var(--wood); font-size: 12px; font-weight: 900; letter-spacing: 0.12em; white-space: nowrap; }
.news-list p { margin: 0; color: #485160; font-weight: 700; }
.content-updated { margin-top: 16px; padding-left: 14px; border-left: 2px solid var(--gold-soft); color: #5a5147 !important; font-size: 14px; font-weight: 700; }
.news-archived { opacity: 0.68; }

/* ---- お寺HP: 年中行事 ---- */
.event-feature { display: grid; grid-template-columns: minmax(300px, 0.8fr) 1.2fr; gap: clamp(24px, 4vw, 48px); align-items: center; margin-bottom: 26px; padding: clamp(20px, 3vw, 34px); border: 1px solid #e2d7c4; border-radius: 6px; background: var(--white); box-shadow: 0 16px 40px rgba(57, 45, 32, 0.08); }
.event-feature-photo { overflow: hidden; border-radius: 6px; }
.event-feature-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 0.85s var(--ease-out); }
.event-feature:hover .event-feature-photo img { transform: scale(1.04); }
.event-feature-copy h3 { font-family: var(--serif); font-size: clamp(24px, 2.8vw, 32px); font-weight: 600; }
.event-feature-copy p { color: #485160; }
.event-month { display: inline-flex; margin-bottom: 10px; color: var(--gold); font-family: var(--serif); font-size: 19px; font-weight: 700; letter-spacing: 0.12em; }
.event-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.event-list article { padding: 24px; border: 1px solid #e2d7c4; border-top: 2px solid var(--gold-soft); border-radius: 4px; background: var(--white); transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out); }
.event-list article:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(57, 45, 32, 0.12); }
.event-list p { margin-bottom: 0; color: var(--muted); }
.event-date { margin: 10px 0 0 !important; color: var(--wood) !important; font-size: 14px; font-weight: 800; }
.event-status { white-space: nowrap; }
.event-history { margin-top: clamp(42px, 6vw, 72px); padding-top: clamp(34px, 5vw, 54px); border-top: 1px solid #e2d7c4; }
.event-history-heading { display: grid; grid-template-columns: minmax(180px, 0.42fr) minmax(0, 1.58fr); gap: 8px clamp(24px, 4vw, 52px); align-items: end; margin-bottom: 22px; }
.event-history-heading span { grid-row: span 2; align-self: start; color: var(--gold); font-family: var(--serif); font-weight: 700; letter-spacing: 0.14em; }
.event-history-heading h3 { margin: 0; font-family: var(--serif); font-size: clamp(25px, 3vw, 34px); }
.event-history-heading p { margin: 0; color: #485160; }
.event-history-grid { display: grid; grid-template-columns: 1.2fr 1fr 0.78fr; gap: 14px; }
.event-history-grid figure { overflow: hidden; margin: 0; border: 1px solid #ded2be; border-radius: 6px; background: var(--white); box-shadow: 0 12px 28px rgba(57, 45, 32, 0.08); }
.event-history-grid picture { display: block; overflow: hidden; }
.event-history-grid img { width: 100%; height: 300px; object-fit: cover; transition: transform 0.85s var(--ease-out); }
.event-history-grid figure:hover img { transform: scale(1.04); }
.event-history-grid figcaption { padding: 13px 15px; color: var(--ink); font-family: var(--serif); font-weight: 700; letter-spacing: 0.04em; }
.event-history-grid figcaption::before { content: "―"; margin-right: 8px; color: var(--gold); }
.event-history-fireworks img { object-position: 50% 27%; }
.event-history-note { margin: 14px 0 0; color: var(--muted); font-size: 13px; font-weight: 700; }

/* ---- 日記・活動報告 ---- */
.sidejob-journal { padding: 84px clamp(18px, 5vw, 72px); background: #f1f4f7; }
.journal-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.journal-card { overflow: hidden; padding: 24px; border: 1px solid var(--line); border-top: 2px solid var(--gold-soft); border-radius: 6px; background: var(--white); box-shadow: 0 14px 34px rgba(20, 30, 44, 0.07); transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out); }
.journal-card:hover { transform: translateY(-5px); box-shadow: 0 20px 44px rgba(20, 30, 44, 0.12); }
.journal-card h3 { margin-top: 12px; font-family: var(--serif); font-size: clamp(21px, 2vw, 26px); line-height: 1.45; }
.journal-card > p { color: #485160; }
.journal-image { width: calc(100% + 48px); max-width: none; height: auto; aspect-ratio: 16 / 10; margin: -24px -24px 20px; object-fit: cover; }
.journal-meta { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; color: var(--wood); font-size: 13px; font-weight: 800; }
.journal-meta span { padding: 3px 10px; border: 1px solid var(--gold-soft); border-radius: 999px; font-size: 11px; letter-spacing: 0.08em; }
.journal-details { margin-top: 16px; border-top: 1px solid var(--line); }
.journal-details summary { padding: 14px 0 0; cursor: pointer; color: var(--wood-deep); font-weight: 800; }
.journal-body { padding-top: 4px; color: #485160; }
.journal-body p { margin: 10px 0 0; }
.journal-empty { grid-column: 1 / -1; margin: 0; padding: 24px; border: 1px dashed var(--line); border-radius: 6px; color: var(--muted); background: rgba(255, 255, 255, 0.72); }

/* ---- お寺HP: 御朱印 ---- */
.temple-goshuin { background: linear-gradient(160deg, #f6f1e6 0%, #efe8d6 100%); }
.goshuin-layout { display: grid; grid-template-columns: 1.35fr minmax(300px, 0.75fr); gap: clamp(24px, 4vw, 52px); align-items: start; }
.goshuin-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.goshuin-list li { padding: 22px; border: 1px solid #ddceb4; border-radius: 4px; background: rgba(255, 255, 255, 0.85); transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out); }
.goshuin-list li:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(57, 45, 32, 0.12); }
.goshuin-list h3 { font-family: var(--serif); font-weight: 600; }
.goshuin-list p { margin-bottom: 0; color: var(--muted); }
.goshuin-list .goshuin-limited { grid-column: span 2; border-top: 2px solid var(--gold); background: #fdf8ec; }
.goshuin-kind { display: inline-flex; margin-bottom: 10px; color: var(--wood); font-size: 12px; font-weight: 900; letter-spacing: 0.16em; }
.goshuin-fee { margin: 10px 0 0 !important; font-family: var(--serif); color: var(--wood-deep) !important; font-weight: 700; }
.goshuin-info { padding: 26px; border: 1px solid #ddceb4; border-radius: 6px; background: var(--white); box-shadow: 0 16px 40px rgba(57, 45, 32, 0.08); }
.goshuin-info h3 { font-family: var(--serif); font-weight: 600; }
.goshuin-info dl { margin: 0; }
.goshuin-info dl div { padding: 12px 0; border-top: 1px solid var(--line); }
.goshuin-info dt { color: var(--wood); font-family: var(--serif); font-weight: 700; letter-spacing: 0.06em; }
.goshuin-info dd { margin: 4px 0 0; color: #485160; font-weight: 700; }
.goshuin-info a { border-bottom: 1px solid var(--gold-soft); }

/* ---- お寺HP: 住職挨拶 ---- */
.jushoku-layout { display: grid; grid-template-columns: minmax(280px, 0.6fr) 1fr; gap: clamp(26px, 4vw, 56px); align-items: start; }
.jushoku-photo { margin: 0; overflow: hidden; border: 1px solid #ded2be; border-radius: 6px; background: var(--white); box-shadow: var(--shadow); }
.jushoku-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.jushoku-photo figcaption { padding: 13px 15px; font-family: var(--serif); font-weight: 700; letter-spacing: 0.06em; }
.jushoku-photo figcaption::before { content: "―"; margin-right: 8px; color: var(--gold); }
.jushoku-copy p { color: #485160; font-size: 17px; }
.jushoku-facts { display: grid; margin: 26px 0 0; }
.jushoku-facts div { display: grid; grid-template-columns: 130px 1fr; gap: 10px; padding: 13px 0; border-top: 1px solid var(--line); }
.jushoku-facts dt { color: var(--wood); font-family: var(--serif); font-weight: 700; letter-spacing: 0.06em; }
.jushoku-facts dd { margin: 0; color: #485160; font-weight: 700; }

/* ---- お寺HP: 行事階層・申込フォーム ---- */
.event-subheading { margin: 0 0 18px; color: var(--wood-deep); font-family: var(--serif); font-size: clamp(22px, 2.6vw, 30px); font-weight: 600; }
.event-annual-title { margin-top: 42px; }
.temple-forms { padding: 84px clamp(18px, 5vw, 72px); background: linear-gradient(160deg, #f6f1e6 0%, #efe8d6 100%); }
.temple-forms h2::after { content: ""; display: block; width: 52px; height: 1px; margin-top: 16px; background: linear-gradient(to right, var(--gold), transparent); }
.form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: start; }
.form-card { padding: clamp(20px, 3vw, 30px); border: 1px solid #ddceb4; border-radius: 6px; background: rgba(255, 255, 255, 0.92); box-shadow: 0 16px 40px rgba(57, 45, 32, 0.08); }
.form-card h3 { font-family: var(--serif); font-size: 24px; font-weight: 600; }
.form-card > p { color: var(--muted); }
.form-kind { display: inline-flex; margin-bottom: 9px; color: var(--wood); font-size: 12px; font-weight: 900; letter-spacing: 0.14em; }
.mailto-form { display: grid; gap: 14px; margin-top: 22px; }
.mailto-form label, .mailto-form legend { color: var(--wood-deep); font-size: 14px; font-weight: 800; }
.mailto-form input:not([type="radio"]), .mailto-form select, .mailto-form textarea { width: 100%; margin-top: 6px; padding: 11px 12px; border: 1px solid #cfc2ad; border-radius: 4px; color: var(--ink); background: #fff; font: inherit; }
.mailto-form textarea { resize: vertical; }
.mailto-form input:focus, .mailto-form select:focus, .mailto-form textarea:focus { outline: 3px solid rgba(177, 139, 68, 0.2); border-color: var(--gold); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mailto-form fieldset { margin: 0; padding: 12px; border: 1px solid #d8ccb8; border-radius: 4px; }
.mailto-form .choice { display: inline-flex; gap: 6px; align-items: center; margin: 8px 14px 0 0; color: var(--ink); font-weight: 700; }
.mailto-form .button { width: 100%; min-height: 46px; cursor: pointer; }
.form-privacy { margin: 20px 0 0; color: var(--muted); font-size: 14px; font-weight: 700; }
@media (max-width: 1100px) { .form-grid { grid-template-columns: 1fr; } }
@media (max-width: 680px) { .form-row { grid-template-columns: 1fr; } .form-card { padding: 20px; } }
/* ---- お寺HP: よくある質問 ---- */
.faq-list { display: grid; gap: 10px; max-width: 920px; }
.faq-list details { border: 1px solid #e2d7c4; border-radius: 4px; background: var(--white); transition: box-shadow 0.4s var(--ease-out); }
.faq-list details[open] { box-shadow: 0 14px 32px rgba(57, 45, 32, 0.1); }
.faq-list summary { position: relative; padding: 18px 48px 18px 20px; cursor: pointer; font-weight: 800; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "＋"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); color: var(--gold); font-family: var(--serif); font-size: 19px; }
.faq-list details[open] summary::after { content: "−"; }
.faq-list details p { margin: 0; padding: 0 20px 18px; color: #485160; }
.faq-list details a { color: var(--wood-deep); border-bottom: 1px solid var(--gold-soft); font-weight: 800; }
.sidejob-faq { padding: 82px clamp(18px, 5vw, 72px); background: #f4f6f5; border-top: 1px solid var(--line); }
.sidejob-faq .faq-list { max-width: 980px; }
.sidejob-faq .faq-list details { border-color: #ced9d3; }
.sidejob-faq .faq-list summary::after { color: var(--pine); }
.sidejob-faq .faq-list details[open] { box-shadow: 0 14px 32px rgba(23, 60, 49, 0.09); }

/* ---- 共通フッター・モバイル ---- */
.mobile-sticky { display: none; }
footer { display: flex; justify-content: space-between; gap: 20px; padding: 26px clamp(18px, 5vw, 72px); color: #c2cad7; background: #0d1522; letter-spacing: 0.04em; }

@media (prefers-reduced-motion: reduce) {
  .temple-hero-photo img { animation: none; }
  .sidejob-hero::before { animation: none; }
  .will-reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}
@media (max-width: 1100px) { .product-grid { grid-template-columns: repeat(2, 1fr); } .guide-grid { grid-template-columns: repeat(2, 1fr); } .about-facts { grid-template-columns: repeat(2, 1fr); } .temple-gallery-grid { grid-template-columns: repeat(2, 1fr); } .vertical-motto { display: none; } .event-list { grid-template-columns: repeat(3, 1fr); } .journal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 980px) { .site-header { grid-template-columns: 1fr; position: static; } .header-cta { justify-self: start; } .sidejob-hero, .catalog-hero, .temple-hero, .flagship-section, .split-section, .catalog-layout, .access-layout, .event-feature, .goshuin-layout, .jushoku-layout, .guide-feature { grid-template-columns: 1fr; } .flagship-media { width: min(100%, 430px); } .filter-panel { position: static; } .offer-strip { grid-template-columns: 1fr; } .demo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .temple-hero-photo img { max-height: none; aspect-ratio: 16 / 11; } .event-feature-photo img { aspect-ratio: 16 / 11; } .event-list { grid-template-columns: 1fr; } .event-history-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .event-history-fireworks { grid-column: span 2; } .event-history-fireworks img { height: 260px; object-position: 50% 24%; } .guide-feature img { min-height: 260px; aspect-ratio: 16 / 10; } }
@media (max-width: 680px) { body { padding-bottom: 64px; } h1 { font-size: clamp(38px, 12vw, 56px); } h2 { font-size: clamp(27px, 8.6vw, 36px); } .sidejob-hero, .catalog-hero, .temple-hero { min-height: auto; padding-top: 34px; } .flagship-section { padding-top: 62px; padding-bottom: 68px; } .flagship-copy h2 { font-size: clamp(32px, 10.8vw, 46px); } .flagship-proof, .trust-list, .product-grid, .demo-grid, .about-facts, .guide-grid, .access-grid, .temple-quick-info, .goshuin-list, .journal-grid, .event-history-grid { grid-template-columns: 1fr; } .flagship-video-shell video { max-height: none; } .demo-card-keisho { grid-column: auto; display: block; } .demo-card video, .demo-card-keisho video { height: auto; max-height: none; } .goshuin-list .goshuin-limited { grid-column: auto; } .news-list li { grid-template-columns: 1fr; gap: 5px; } .jushoku-facts div { grid-template-columns: 1fr; gap: 2px; } .catalog-item { grid-template-columns: 1fr; } .catalog-item img { width: 100%; height: auto; aspect-ratio: 16 / 10; } .catalog-item img.catalog-poster { object-position: 50% 16%; } .temple-gallery-grid { grid-template-columns: 1fr; } .temple-gallery-grid .gallery-feature, .temple-gallery-grid .gallery-panorama { grid-column: auto; grid-row: auto; } .temple-gallery-grid img, .temple-gallery-grid .gallery-feature img { height: 240px; } .event-history-heading { grid-template-columns: 1fr; } .event-history-heading span { grid-row: auto; } .event-history-fireworks { grid-column: auto; } .event-history-grid img, .event-history-fireworks img { height: 240px; } .closing-cta, .temple-contact, footer { flex-direction: column; align-items: flex-start; } .mobile-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: block; padding: 10px 14px; background: rgba(13, 21, 34, 0.94); border-top: 1px solid rgba(255, 255, 255, 0.12); backdrop-filter: blur(12px); } .mobile-sticky a { display: flex; align-items: center; justify-content: center; min-height: 44px; border-radius: 4px; color: var(--white); background: var(--pine); font-weight: 900; } .temple-sticky a { background: var(--wood); } }

@media (max-width: 980px) {
  .prep-grid { grid-template-columns: 1fr; }
  .prep-action { align-items: flex-start; flex-direction: column; }
  .prep-action .button { width: 100%; }
}

@media (max-width: 680px) {
  .site-header { gap: 8px; padding: 10px 18px; }
  .site-header .header-cta { display: none; }
  .nav { width: 100%; }
  .nav-button { flex: 1 1 0; padding: 8px 10px; }
  .sidejob-hero h1 { font-size: clamp(37px, 11.5vw, 52px); }
  .profile-card-label { left: 12px; bottom: 12px; font-size: 12px; }
  .product-card.featured { grid-column: auto; }
  .consultation-prep, .sidejob-faq { padding-top: 62px; padding-bottom: 62px; }
  .prep-grid li { grid-template-columns: 38px 1fr; padding: 18px; }
  .prep-grid li > span { width: 36px; height: 36px; }
}