/* =====================================================
LODU 公式サイト 共通スタイル（2026-10 リデザイン）
試作 trial-brand（v4）を正式化したもの。旧 styles.css は使わない。
デザインの約束
- 英字は Outfit、和文は Zen Kaku Gothic New（2026-10-24 変更）。英字の大見出しは 400 で大きく
- 差し色はロゴのチャコール。色は営業資料表紙のパステルストロークだけで出す
（ストロークは「1画面1か所・面積2〜3割まで」）
- 左4：見出し／右8：中身 の編集レイアウト。余白は広く、線は髪の毛ほどの細さ
- 写真は曲線で切り抜いた枠に入れる。比率: 事例4:3／顔3:4／記事サムネ16:10
===================================================== */
:root {
--bg: #FDFDF9;
--bg-rgb: 253, 253, 249;
--soft: #F5F4EF;
--ink: #2B2A2A;
--sub: #545151; /* 補足の文字（2026-10-24 クライアント指示で #6E6B6B から濃く。白地 7.7:1） */
--char: #403E3E;
--char-dark: #2E2D2D;
--hair: rgba(43, 42, 42, 0.12);
--hair-strong: rgba(43, 42, 42, 0.28);
--on-char: #fff; /* チャコールの面の上に載せる文字色 */
--err: #B3261E; /* 入力エラーの線・文字（白地で4.5:1以上） */
--pastel-a: #F9D8B2; --pastel-b: #BDE3F2; /* 表紙のストロークの2色（光る縁など） */
--ripple: radial-gradient(circle, rgba(249, 216, 178, .85) 0%, rgba(189, 227, 242, .6) 45%, transparent 70%); /* 押したときの波紋 */
--lift-shadow: rgba(43, 42, 42, .45); /* 浮き上がったときの影 */
--scrim: rgba(43, 42, 42, .42); /* ポップアップの後ろの幕 */
--on-dark: #fff; --on-dark-sub: rgba(255, 255, 255, .7); --on-dark-line: rgba(255, 255, 255, .32); /* 濃い帯の上の文字・線（ライト・ダーク共通） */
--icon-ink: #2B2A2A; /* パステルの丸の上のアイコン線（ライト・ダーク共通。丸の色が変わらないため） */
--g-flow: linear-gradient(90deg, #BDE3F2, #F9D8B2, #F5BAC3, #BBAED9, #BDE3F2); /* ボタンの縁を流れるパステル */
--ink-2: #4A4848; /* 長めの本文（詩・メッセージ） */
--ink-3: #3A3939; /* 記事本文 */
--faint: #77726C; /* 要記入など（白地で4.5:1を確保） */
--placeholder: #85817B; /* 入力欄の例文（10/26 クライアント指示で少し薄く。白地で3.8:1） */
--soft-2: #EDECE5;
--dark-bg: #403E3E; /* 濃い帯（開発の流れ）の地 */
--ph-1: #ECECE6; --ph-2: #E1E1DA; --ph-3: #D6D6CE;
--chip-bg: rgba(255, 255, 255, 0.92);
--hl-a: rgba(249, 216, 178, .9); --hl-b: rgba(189, 227, 242, .95);
--logo-frame: #2B2A2A; /* 白地のロゴ（クロス）の枠の線。画像の上に引くのでライト・ダーク共通 */
color-scheme: light dark;
--font: 'Zen Kaku Gothic New', sans-serif;
--font-en: 'Outfit', 'Zen Kaku Gothic New', sans-serif; /* 英字の見出し・ラベル・大きな数字。和文の文中の記号（—・…・×）まで Outfit にならないよう本文とは分ける */
--ease: cubic-bezier(.2, .7, .1, 1);
--intro: 0s; /* 開幕の覆いが消えるまでの時間（覆いのあるトップだけ下で1.05秒にする） */
/* 表紙PDFのグラデーション */
--g-a: linear-gradient(90deg, #BDE3F2, #F9D8B2);
--g-b: linear-gradient(90deg, #D9B4A8, #BBAED9);
--g-c: linear-gradient(90deg, #BDE3F2, #F5BAC3);
--g-d: linear-gradient(90deg, #F6BBDA, #BDE3F2);
--g-e: linear-gradient(90deg, #BECAE4, #DDEBBB);
--g-f: linear-gradient(90deg, #FAF5BC, #F5BAC3);
--g-h: linear-gradient(90deg, #F9D8B2, #C0DFBA);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
margin: 0; background: var(--bg); color: var(--ink);
font-family: var(--font); font-weight: 400; font-size: 15px; line-height: 2;
letter-spacing: 0.06em; -webkit-font-smoothing: antialiased; line-break: strict;
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
h1, h2, h3, h4 { font-weight: 700; }
img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--char); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3, .lead-title, .lead, .body-text, .lines p, .band-ja { word-break: auto-phrase; overflow-wrap: anywhere; }
/* 見出しは行の長さをそろえて折り返す（最後の1語だけが落ちるのを防ぐ） */
h1, h2, .lead-title, .band-en, .band-ja, .hero-en, .page-head .en-title, .sec-head .en, .statement { text-wrap: balance; }
.en, [lang="en"], .stat .v, .news-strip time, .news-item .date { font-family: var(--font-en); }
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 64px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* ---------- 開幕の覆い（トップのみ。2回目以降の表示では出さない） ---------- */
.cover { position: fixed; inset: 0; z-index: 200; background: var(--bg); display: grid; place-items: center; pointer-events: none; animation: cover-out .8s var(--ease) 2s forwards; }
.cover img { height: 56px; opacity: 0; transform: scale(.85); animation: logo-in .7s 1.35s cubic-bezier(.34, 1.56, .64, 1) forwards; }
.cover .die { position: absolute; animation: die-roll 1s cubic-bezier(.3, .7, .4, 1) both, die-out .35s 1.15s ease forwards; } /* 10/25 開幕：サイコロが転がって止まり、ロゴに変わる */
html:has(.cover) { --intro: 2.05s; }
.no-cover .cover { display: none; }
html.no-cover { --intro: 0s; }
@keyframes cover-out { to { opacity: 0; visibility: hidden; } }
@keyframes fade-in { to { opacity: 1; } }
/* ---------- ヘッダー ---------- */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 60; background: transparent; border-bottom: 1px solid transparent; transition: background .5s, border-color .5s, backdrop-filter .5s; }
.is-scrolled .site-header { background: rgba(var(--bg-rgb), 0.92); border-bottom-color: var(--hair); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
/* スマホメニューを開いている間は、すりガラス（backdrop-filter）を外す。
付いたままだと全画面メニューがヘッダーの高さに閉じ込められ、項目がページの文字と重なる */
.menu-open .site-header, .site-header:has(.nav-links.open) { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--bg); transition: none; }
.nav { max-width: 1280px; margin: 0 auto; padding: 20px 64px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; text-decoration: none; position: relative; z-index: 2; }
.brand img { height: 42px; width: auto; } /* 10/26 クライアント指示で 34px → 42px */
.nav-links { display: flex; align-items: center; gap: 34px; }
.nav-links a { position: relative; display: flex; flex-direction: column; line-height: 1.5; font-size: 13px; letter-spacing: 0.08em; color: var(--ink); text-decoration: none; white-space: nowrap; padding: 4px 0; transition: color .25s; }
.nav-links a .en { font-size: 12px; letter-spacing: 0.08em; color: var(--sub); }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 3px; border-radius: 2px; background: var(--g-a); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.nav-links a:hover::after, .nav-links a.active::after { transform: none; }
.nav-links a.nav-contact { flex-direction: row; align-items: center; border: 1px solid var(--char); color: var(--char); border-radius: 999px; padding: 9px 24px; font-weight: 500; transition: background .3s, color .3s; }
.nav-links a.nav-contact::after { display: none; }
.nav-links a.nav-contact:hover, .nav-links a.nav-contact.active { background: var(--char); color: var(--on-char); }
.nav-toggle { display: none; position: relative; z-index: 2; width: 44px; height: 44px; background: none; border: none; cursor: pointer; padding: 0; }
.nav-toggle span { position: absolute; left: 11px; width: 22px; height: 1.5px; background: var(--ink); transition: transform .4s var(--ease), opacity .3s; }
.nav-toggle span:nth-child(1) { top: 15px; } .nav-toggle span:nth-child(2) { top: 21px; } .nav-toggle span:nth-child(3) { top: 27px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
/* ---------- ボタン・リンク ---------- */
.btn { display: inline-flex; align-items: center; gap: 16px; padding: 15px 32px; border-radius: 999px; font-size: 14px; font-weight: 500; letter-spacing: 0.12em; text-decoration: none; background: var(--char); color: var(--on-char); border: none; cursor: pointer; font-family: inherit; transition: background .3s; }
.btn::after { content: ""; width: 16px; height: 1px; background: currentColor; transition: width .35s var(--ease); }
.btn:hover { background: var(--char-dark); }
.btn:hover::after { width: 26px; }
.btn-ghost { background: transparent; color: var(--char); border: 1px solid var(--char); }
.btn-ghost:hover { background: var(--char); color: var(--on-char); }
.textlink { position: relative; display: inline-flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 500; letter-spacing: 0.12em; color: var(--char); text-decoration: none; padding-bottom: 6px; }
.textlink::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; opacity: .5; transform-origin: right; transition: transform .45s var(--ease); }
.textlink:hover::before { transform: scaleX(0); }
.textlink::after { content: "→"; transition: transform .3s var(--ease); }
.textlink:hover::after { transform: translateX(5px); }
.textlink.ext::after { content: "↗"; }
.textlink.back::after { display: none; }
.textlink.back::before { opacity: .5; }
.actions { display: flex; align-items: center; gap: 36px; flex-wrap: wrap; }
/* ---------- スクロールで現れる（JSが html に js を付けたときだけ隠す） ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 1.1s var(--ease), transform 1.2s var(--ease); transition-delay: var(--d, 0s); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js [data-lines] > * { opacity: 0; transform: translateY(14px); filter: blur(4px); transition: opacity 1s var(--ease), transform 1s var(--ease), filter 1s var(--ease); transition-delay: calc(var(--i, 0) * 0.14s); }
.js [data-lines].is-in > * { opacity: 1; transform: none; filter: none; }
.lodu-editing [data-reveal], .lodu-editing [data-lines] > * { opacity: 1 !important; transform: none !important; filter: none !important; }
/* ---------- セクションの骨格 ---------- */
.sec { position: relative; padding: clamp(110px, 12vw, 190px) 0; }
.sec + .sec:not(.band):not(.dark) { padding-top: 0; }
.sec.soft { background: var(--soft); }
.grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: clamp(40px, 6vw, 96px); align-items: start; }
.side { position: sticky; top: 130px; }
.sec-head .num { display: inline-flex; align-items: center; gap: 12px; font-size: 12px; letter-spacing: 0.18em; color: var(--sub); }
.sec-head .num::after { content: ""; width: 44px; height: 6px; border-radius: 3px; background: var(--g, var(--g-a)); }
.sec-head .en { display: block; margin: 18px 0 0; font-weight: 400; font-size: clamp(34px, 3.8vw, 54px); line-height: 1.1; letter-spacing: -0.01em; color: var(--ink); }
.sec-head .eyebrow { margin: 14px 0 0; font-size: 12px; font-weight: 500; letter-spacing: 0.22em; color: var(--char); }
.side .textlink { margin-top: 40px; }
.lead-title { font-size: clamp(20px, 2vw, 26px); font-weight: 700; line-height: 1.8; letter-spacing: 0.1em; color: var(--ink); margin-bottom: 64px; }
.lead-title.sm { font-size: clamp(18px, 1.7vw, 21px); margin-bottom: 40px; }
.body-text { font-size: 14.5px; line-height: 2.25; letter-spacing: 0.08em; color: var(--sub); max-width: 640px; }
.body-text + .body-text { margin-top: 1.4em; }
.body-text strong { color: var(--ink); font-weight: 500; }
.lead-title + .body-text { margin-top: -32px; }
.block + .block { margin-top: clamp(80px, 8vw, 120px); }
.sub-title { display: flex; align-items: baseline; gap: 16px; font-size: 17px; font-weight: 700; letter-spacing: 0.12em; margin-bottom: 32px; }
.sub-title .en { font-size: 12px; letter-spacing: 0.16em; color: var(--sub); font-weight: 400; }
.note { font-size: 12.5px; line-height: 2.2; letter-spacing: 0.06em; color: var(--sub); }
/* ---------- 下層ページの見出し ---------- */
.page-head { position: relative; overflow: hidden; padding: clamp(170px, 18vw, 240px) 0 clamp(80px, 8vw, 120px); border-bottom: 1px solid var(--hair); }
.page-head .wrap { position: relative; z-index: 1; }
.page-head .eyebrow { display: inline-flex; align-items: center; gap: 14px; font-size: 12.5px; font-weight: 500; letter-spacing: 0.22em; color: var(--char); }
.page-head .eyebrow::before { content: ""; width: 44px; height: 6px; border-radius: 3px; background: var(--g, var(--g-a)); }
.page-head .en-title { display: block; margin: 22px 0 0; font-weight: 400; font-size: clamp(52px, 8vw, 112px); line-height: 1; letter-spacing: -0.02em; }
.page-head h1 { margin-top: 44px; font-size: clamp(22px, 2.4vw, 30px); font-weight: 700; line-height: 1.75; letter-spacing: 0.1em; max-width: 760px; }
.page-head .lead { margin-top: 28px; max-width: 640px; font-size: 14.5px; line-height: 2.3; letter-spacing: 0.08em; color: var(--sub); }
.page-head .strokes { opacity: .9; }
.js .page-head .en-title, .js .page-head h1, .js .page-head .lead, .js .page-head .eyebrow, .js .page-head .page-actions { opacity: 0; transform: translateY(24px); animation: rise 1.2s var(--ease) forwards; }
.js .page-head .eyebrow { animation-delay: .05s; } .js .page-head .en-title { animation-delay: .15s; } .js .page-head h1 { animation-delay: .3s; } .js .page-head .lead { animation-delay: .42s; } .js .page-head .page-actions { animation-delay: .52s; }
.page-actions { margin-top: 40px; }
@keyframes rise { to { opacity: 1; transform: none; } }
/* ---------- ストローク（js/lodu.js がSVGを描く） ---------- */
.strokes { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.strokes svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.st-layer { will-change: transform; }
.st-c { transform-box: fill-box; transform-origin: center; }
@keyframes st-in { from { opacity: 0; transform: translate(-110px, -110px); } to { opacity: 1; transform: none; } }
@keyframes st-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
.js .strokes .st-s, .js .strokes .st-c { opacity: 0; }
.strokes.is-in .st-s { animation: st-in 1.6s var(--ease) forwards; animation-delay: calc(var(--base, 0s) + var(--d, 0s)); }
.strokes.is-in .st-c { animation: st-pop 1.3s var(--ease) forwards; animation-delay: calc(var(--base, 0s) + .15s + var(--d, 0s)); }
.strokes.fade-left { -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 34%, rgba(0,0,0,.35) 48%, #000 62%); mask-image: linear-gradient(90deg, transparent 0%, transparent 34%, rgba(0,0,0,.35) 48%, #000 62%); }
/* ---------- 写真の仮置き（無彩色の面＋左下にキャプション） ---------- */
.ph { position: relative; overflow: hidden; background: linear-gradient(158deg, var(--ph-1) 0%, var(--ph-2) 55%, var(--ph-3) 100%); }
.ph::before { content: ""; position: absolute; top: 50%; left: 50%; width: 32px; height: 26px; transform: translate(-50%, -58%); border: 1.5px solid rgba(43, 42, 42, 0.16); border-radius: 4px; background-image: radial-gradient(circle at 28% 34%, rgba(43, 42, 42, 0.16) 0 3px, transparent 3.5px), linear-gradient(to top right, rgba(43, 42, 42, 0.13) 0 42%, transparent 42.5%); transition: transform 1s var(--ease); }
.ph > span { position: absolute; left: 12px; bottom: 12px; z-index: 1; max-width: calc(100% - 24px); padding: 4px 10px; border-radius: 999px; background: var(--chip-bg); font-size: 11px; font-weight: 500; line-height: 1.6; letter-spacing: 0.04em; color: var(--ink); }
.ph > img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
/* 曲線の切り抜き（角の位置は shape-* で選ぶ） */
.shape-tr { border-radius: 0 110px 0 0; } .shape-tl { border-radius: 110px 0 0 0; } .shape-br { border-radius: 0 0 110px 0; } .shape-bl { border-radius: 0 0 0 110px; }
.shape-leaf { border-radius: 0 56px 0 56px; } .shape-leaf-r { border-radius: 56px 0 56px 0; }
.hover-shape { transition: border-radius .8s var(--ease); }
a:hover .hover-shape { border-radius: 0; }
a:hover .ph::before { transform: translate(-50%, -58%) scale(1.12); }
a:hover .ph > img { transform: scale(1.06); }
/* ---------- トップ: ヒーロー ---------- */
.hero { position: relative; overflow: hidden; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; }
.hero .strokes { --base: var(--intro); }
.hero-inner { position: relative; z-index: 1; width: 100%; max-width: 1280px; margin: 0 auto; padding: 140px 64px 120px; }
.hero-main { max-width: 820px; }
.hero-copy { font-size: 15px; font-weight: 700; letter-spacing: 0.3em; line-height: 2; color: var(--char); margin-bottom: 28px; }
.hero-en { font-weight: 400; font-size: clamp(36px, 4.9vw, 72px); line-height: 1.12; letter-spacing: -0.015em; }
.hero-en span { display: block; }
.hero-lead { margin-top: 36px; max-width: 560px; font-size: 13.5px; line-height: 2.3; letter-spacing: 0.1em; color: var(--sub); }
.hero .actions { margin-top: 44px; }
.rise, .hero-en span { opacity: 0; transform: translateY(24px); animation: rise 1.2s var(--ease) forwards; animation-delay: calc(var(--intro) + .15s + var(--d, 0s)); }
.hero-en span:nth-child(2) { --d: .14s; }
.scroll-cue { position: absolute; left: 50%; bottom: 0; z-index: 1; height: 96px; display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--sub); text-decoration: none; font-size: 12px; letter-spacing: 0.2em; transform: translateX(-50%); }
.scroll-cue::after { content: ""; flex: 1; width: 1px; background: linear-gradient(var(--sub) 50%, rgba(0,0,0,.08) 50%); background-size: 1px 200%; animation: drip 2s linear infinite; }
@keyframes drip { from { background-position: 0 100%; } to { background-position: 0 -100%; } }
/* ---------- お知らせ（一行ずつ） ---------- */
.news-strip { list-style: none; padding: 0; }
.news-strip li { border-top: 1px solid var(--hair); }
.news-strip li:last-child { border-bottom: 1px solid var(--hair); }
.news-strip a { display: flex; gap: 40px; align-items: baseline; padding: 26px 4px; text-decoration: none; transition: padding .4s var(--ease); }
.news-strip a:hover { padding-left: 14px; }
.news-strip time { flex: none; font-size: 12.5px; letter-spacing: 0.08em; color: var(--sub); white-space: nowrap; }
.news-strip .t { font-size: 14px; line-height: 1.9; letter-spacing: 0.06em; }
/* ---------- 記事カード（build-articles.mjs が書き出すマークアップ） ---------- */
.article-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 64px 32px; }
.article-card { display: flex; flex-direction: column; text-decoration: none; color: var(--ink); }
.article-card .thumb { aspect-ratio: 16 / 10; border-radius: 0 72px 0 0; overflow: hidden; transition: border-radius .8s var(--ease); }
.article-card:nth-child(3n+2) .thumb { border-radius: 72px 0 0 0; }
.article-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.article-card:hover .thumb { border-radius: 0; }
.article-card:hover .thumb img { transform: scale(1.06); }
.article-card .body { padding-top: 22px; display: flex; flex-direction: column; gap: 10px; }
.article-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.article-cat, .notice-cat { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; letter-spacing: 0.12em; color: var(--char); }
.article-cat::before, .notice-cat::before { content: ""; width: 18px; height: 4px; border-radius: 2px; background: var(--g-a); }
.article-cat.c-game::before { background: var(--g-d); } .article-cat.c-sus::before { background: var(--g-h); } .article-cat.c-ai::before { background: var(--g-e); } .article-cat.c-hr::before { background: var(--g-b); }
.article-date { font-size: 12px; letter-spacing: 0.08em; color: var(--sub); }
.article-card h3 { font-size: 15.5px; font-weight: 700; line-height: 1.8; letter-spacing: 0.06em; }
.article-card .excerpt { font-size: 12.5px; line-height: 2; letter-spacing: 0.04em; color: var(--sub); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* ---------- 淡い帯（中央寄せの詩） ---------- */
.band { position: relative; overflow: hidden; background: var(--soft); text-align: center; }
.band.wave-top::before, .band.wave-bottom::after, .dark.wave-top::before, .dark.wave-bottom::after { content: ""; position: absolute; left: 0; right: 0; height: clamp(44px, 7vw, 110px); z-index: 2; background-size: 100% 100%; background-repeat: no-repeat; pointer-events: none; }
.wave-top::before { top: -1px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 130' preserveAspectRatio='none'%3E%3Cpath fill='%23FDFDF9' d='M0 0H1440V22C1180 128 860 118 560 60C340 18 150 40 0 112Z'/%3E%3C/svg%3E"); }
.wave-bottom::after { bottom: -1px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 130' preserveAspectRatio='none'%3E%3Cpath fill='%23FDFDF9' d='M0 130H1440V30C1250 96 1000 118 720 84C430 48 200 64 0 110Z'/%3E%3C/svg%3E"); }
.band-inner { position: relative; z-index: 1; max-width: 860px; margin: 0 auto; padding: clamp(170px, 18vw, 250px) 32px; }
.band-num { margin-bottom: 34px; font-size: 12px; letter-spacing: 0.22em; color: var(--sub); }
.band-en { font-weight: 400; font-size: clamp(32px, 4.2vw, 58px); line-height: 1.2; letter-spacing: -0.01em; }
.band-ja { margin-top: 40px; font-size: clamp(15px, 1.5vw, 18px); font-weight: 700; letter-spacing: 0.2em; line-height: 1.9; color: var(--char); }
.lines { margin-top: 48px; }
.lines p { font-size: 13.5px; line-height: 2.7; letter-spacing: 0.14em; color: var(--ink-2); }
.lines p.gap { margin-top: 1.8em; }
.band .actions { margin-top: 56px; justify-content: center; }
/* ---------- 濃い帯（チャコール） ---------- */
.dark { position: relative; overflow: hidden; background: var(--dark-bg); color: #fff; padding: clamp(170px, 16vw, 240px) 0; }
.dark > .wrap { position: relative; z-index: 1; }
.dark .strokes { opacity: .42; }
.dark.wave-top::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath fill='%23FDFDF9' d='M0 0H1440V96C1100 20 760 10 420 46C250 64 110 60 0 30Z'/%3E%3C/svg%3E"); }
.dark.wave-bottom::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath fill='%23FDFDF9' d='M0 120H1440V40C1220 100 940 110 640 70C380 36 170 50 0 96Z'/%3E%3C/svg%3E"); }
.dark .sec-head .num { color: rgba(255, 255, 255, 0.6); }
.dark .sec-head .en, .dark .lead-title { color: #fff; }
.dark .sec-head .eyebrow { color: rgba(255, 255, 255, 0.75); }
.dark .body-text, .dark .note { color: rgba(255, 255, 255, 0.72); }
.dark .textlink { color: #fff; }
/* ---------- 数字 ---------- */
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 64px 40px; }
.stat { display: flex; flex-direction: column; gap: 18px; border-top: 1px solid var(--hair); padding-top: 22px; }
.stat .k { font-size: 12px; letter-spacing: 0.12em; color: var(--sub); }
.stat .v { font-weight: 400; font-size: clamp(44px, 4.6vw, 64px); letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.stat .v small { font-size: 13px; font-weight: 500; letter-spacing: 0.1em; margin-left: 6px; }
/* ---------- パネル（淡い面・ホバーでチャコール） ---------- */
.panels { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.panel { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; min-height: 400px; padding: 44px 40px 38px; background: var(--soft); color: var(--ink); text-decoration: none; border-radius: 0 96px 0 0; transition: color .5s var(--ease); }
.panel:nth-child(2n) { border-radius: 96px 0 0 0; }
.panel::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--char); transform: translateY(101%); transition: transform .6s var(--ease); }
a.panel:hover, a.panel:hover .panel-kicker .en, a.panel:hover p { color: var(--on-char); }
a.panel:hover::before { transform: none; }
.panel-kicker { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; font-size: 12px; font-weight: 500; letter-spacing: 0.16em; }
.panel-kicker .mark { font-size: 13px; font-weight: 400; }
.panel-kicker .en { font-size: 12px; font-weight: 400; letter-spacing: 0.1em; color: var(--sub); transition: color .5s; }
.panel h3 { margin-top: 56px; font-size: clamp(18px, 1.7vw, 21px); font-weight: 700; line-height: 1.8; letter-spacing: 0.1em; }
.panel p { margin-top: 20px; font-size: 13.5px; line-height: 2.2; letter-spacing: 0.08em; color: var(--sub); transition: color .5s; }
.panel-more { margin-top: auto; padding-top: 32px; display: inline-flex; align-items: center; gap: 12px; font-size: 12.5px; font-weight: 500; letter-spacing: 0.14em; }
.panel-more::after { content: ""; width: 28px; height: 1px; background: currentColor; transition: width .4s var(--ease); }
a.panel:hover .panel-more::after { width: 52px; }
/* ---------- 一覧行（タイトル／説明／矢印） ---------- */
.rows { list-style: none; padding: 0; border-top: 1px solid var(--hair); }
.rows li { border-bottom: 1px solid var(--hair); }
.rows a, .rows .row { display: grid; grid-template-columns: 220px 1fr 40px; gap: 32px; align-items: center; padding: 34px 4px; text-decoration: none; color: var(--ink); transition: padding .45s var(--ease); }
.rows .row { grid-template-columns: 220px 1fr; }
.rows a:hover { padding-left: 16px; }
.rows .t { display: flex; flex-direction: column; gap: 6px; font-size: 16px; font-weight: 700; letter-spacing: 0.1em; line-height: 1.7; }
.rows .t .en { font-size: 12px; font-weight: 400; letter-spacing: 0.14em; color: var(--sub); }
.rows .d { font-size: 13px; line-height: 2.1; letter-spacing: 0.06em; color: var(--sub); }
.arw { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--hair); position: relative; transition: background .35s, border-color .35s; }
.arw::after { content: "→"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 13px; color: var(--char); transition: color .35s; }
a:hover > .arw { background: var(--char); border-color: var(--char); }
a:hover > .arw::after { color: var(--on-char); }
/* ---------- 事例カード（2列・互い違い） ---------- */
.cases { display: grid; grid-template-columns: 1fr 1fr; gap: 96px 48px; }
.cases > :nth-child(2n) { margin-top: 120px; }
.case { display: block; text-decoration: none; color: var(--ink); }
.case .ph { aspect-ratio: 4 / 3; }
.case .m { margin-top: 26px; font-size: 12px; letter-spacing: 0.14em; color: var(--sub); }
.case h3 { margin-top: 12px; font-size: 15.5px; font-weight: 700; line-height: 1.85; letter-spacing: 0.08em; }
.case .r { margin-top: 8px; font-size: 12.5px; letter-spacing: 0.06em; color: var(--sub); }
/* ---------- 流れ（縦の行） ---------- */
.steps { list-style: none; padding: 0; }
.steps li { position: relative; display: grid; grid-template-columns: 64px 160px 1fr; gap: 24px; align-items: baseline; padding: 30px 0; }
.steps li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line, var(--hair)); transform-origin: left; transform: scaleX(var(--p, 1)); transition: transform 1.2s var(--ease); transition-delay: calc(var(--i, 0) * .12s); }
.steps li:last-child { border-bottom: 1px solid var(--line, var(--hair)); }
.js .steps li::before { --p: 0; }
.js .steps.is-in li::before { --p: 1; }
.js .steps li > * { opacity: 0; transform: translateY(12px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: calc(.25s + var(--i, 0) * .12s); }
.js .steps.is-in li > * { opacity: 1; transform: none; }
.steps .n { font-size: 13px; letter-spacing: 0.14em; color: var(--sub); }
.steps h3 { font-size: 16px; font-weight: 700; letter-spacing: 0.14em; }
.steps p { font-size: 13px; line-height: 2.1; letter-spacing: 0.06em; color: var(--sub); }
.dark .steps { --line: rgba(255, 255, 255, 0.22); }
.dark .steps .n { color: rgba(255, 255, 255, 0.6); }
.dark .steps p { color: rgba(255, 255, 255, 0.72); }
.meta-row { margin-top: 64px; display: flex; gap: 72px; flex-wrap: wrap; }
.meta-row div { display: flex; flex-direction: column; gap: 10px; }
.meta-row .k { font-size: 12px; letter-spacing: 0.16em; color: var(--sub); }
.meta-row .v { font-size: 18px; font-weight: 500; letter-spacing: 0.1em; }
.dark .meta-row .k { color: rgba(255, 255, 255, 0.6); }
/* ---------- メンバー ---------- */
.team { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px 32px; }
.team > :nth-child(3n+2) { margin-top: 56px; }
.member .ph { aspect-ratio: 3 / 4; }
.member .n { margin-top: 18px; font-size: 13.5px; font-weight: 700; letter-spacing: 0.16em; }
.member .e { margin-top: 4px; font-size: 12px; letter-spacing: 0.12em; color: var(--sub); }
.member .role { margin-top: 6px; font-size: 12px; line-height: 1.8; letter-spacing: 0.06em; color: var(--sub); }
/* ---------- 定義リスト（会社概要など） ---------- */
.dl { border-top: 1px solid var(--hair); }
.dl > div { display: grid; grid-template-columns: 180px 1fr; gap: 32px; padding: 26px 4px; border-bottom: 1px solid var(--hair); }
.dl dt { font-size: 12.5px; letter-spacing: 0.14em; color: var(--sub); }
.dl dd { font-size: 14px; line-height: 2; letter-spacing: 0.06em; }
/* ---------- トップ固有の間合い ---------- */
.article-grid.compact { gap: 48px 24px; }
.article-grid.compact .thumb { border-radius: 0 56px 0 0; }
.article-grid.compact .article-card:nth-child(3n+2) .thumb { border-radius: 56px 0 0 0; }
.article-grid.compact h3 { font-size: 14.5px; }
.rows-gap { margin-top: 88px; }
.facts-note { margin-top: 72px; max-width: 600px; }
.team-gap { margin: 72px 0; }
.after-meta { margin-top: 48px; }
.band-num .eyebrow { margin: 0; font-size: inherit; letter-spacing: inherit; color: inherit; font-weight: 400; }
/* ---------- 大きな言葉（ミッションなど） ---------- */
.statements { border-top: 1px solid var(--hair); }
.statement-row { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: clamp(40px, 6vw, 96px); align-items: baseline; padding: clamp(48px, 5vw, 72px) 0; border-bottom: 1px solid var(--hair); }
.statement-row .label { display: flex; flex-direction: column; gap: 8px; }
.statement-row .label .en { font-weight: 400; font-size: clamp(28px, 2.8vw, 38px); line-height: 1.1; letter-spacing: -0.01em; }
.statement-row .label .eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.22em; color: var(--char); }
.statement { font-size: clamp(22px, 2.6vw, 34px); font-weight: 500; line-height: 1.75; letter-spacing: 0.1em; }
/* ---------- 由来の式（LOve × eDUcate） ---------- */
.formula { display: flex; align-items: center; gap: clamp(20px, 3vw, 48px); flex-wrap: wrap; margin-bottom: 64px; padding: 48px 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.formula .word { display: flex; flex-direction: column; gap: 14px; }
.formula .w { font-weight: 400; font-size: clamp(48px, 6vw, 88px); line-height: 1; letter-spacing: -0.02em; }
.formula .w b { font-weight: 700; background: linear-gradient(transparent 82%, var(--hl-a) 82%); }
.formula .word:last-child .w b { background: linear-gradient(transparent 82%, var(--hl-b) 82%); }
.formula .jp { font-size: 12.5px; letter-spacing: 0.12em; color: var(--sub); }
.formula .op { font-weight: 400; font-size: clamp(32px, 3vw, 48px); color: var(--sub); padding-bottom: 30px; }
/* ---------- 代表メッセージ ---------- */
.message { display: grid; grid-template-columns: minmax(180px, 260px) 1fr; gap: clamp(36px, 4vw, 64px); align-items: start; }
.message { scroll-margin-top: 110px; }
.message-photo { position: static; } /* 以前はスクロールに追従させていたが、長文の横で画面が止まって見えるため固定しない（10/13） */
/* 続きを読む: 3段落目以降はたたんでおき、押すとなめらかに開く（JSが無いときは最初から全文を見せる） */
.js .message-more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .7s var(--ease); }
.js .message-more.is-open { grid-template-rows: 1fr; }
.message-more-inner { overflow: hidden; min-height: 0; padding-top: 1.5em; }
.message-more-inner > p + p { margin-top: 1.5em; }
.lodu-editing .message-more { grid-template-rows: 1fr !important; }
.read-more { display: inline-flex; align-items: center; gap: 12px; margin-top: 28px; padding: 12px 26px; border: 1px solid var(--char); border-radius: 999px; background: transparent; color: var(--char); font-family: inherit; font-size: 13px; font-weight: 500; letter-spacing: 0.12em; cursor: pointer; transition: background .3s, color .3s; }
.read-more::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .4s var(--ease); }
.read-more[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
.read-more:hover { background: var(--char); color: var(--on-char); }
@media (prefers-reduced-motion: reduce) { .js .message-more { transition: none; } }
.message-photo .ph { aspect-ratio: 3 / 4; }
.sign { margin-top: 20px; }
.sign .name { font-size: 15px; font-weight: 500; letter-spacing: 0.18em; }
.sign .name-en { margin-top: 4px; font-size: 12px; letter-spacing: 0.16em; color: var(--sub); }
.sign .title { margin-top: 10px; font-size: 12px; letter-spacing: 0.08em; color: var(--sub); }
.message-body p { font-size: 14.5px; line-height: 2.3; letter-spacing: 0.08em; color: var(--ink-2); }
.message-body p + p { margin-top: 1.5em; }
.message-body .more { margin-top: 40px; }
.band-ja-lg { font-size: clamp(18px, 2vw, 24px); color: var(--ink); }
.facts-gap { margin-top: 72px; }
/* ---------- ページ内メニュー（サービスの4本柱など） ---------- */
.index-nav { border-bottom: 1px solid var(--hair); }
.index-nav .wrap { display: grid; grid-template-columns: repeat(5, auto); }
.index-nav a { position: relative; display: flex; align-items: baseline; gap: 14px; padding: 28px 20px 28px 0; font-size: 13.5px; font-weight: 500; letter-spacing: 0.1em; text-decoration: none; color: var(--ink); transition: color .3s; }
.index-nav a + a { padding-left: 24px; border-left: 1px solid var(--hair); }
.index-nav .n { font-size: 12px; font-weight: 400; letter-spacing: 0.16em; color: var(--sub); }
.index-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 4px; border-radius: 2px; background: var(--g); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.index-nav a + a::after { left: 24px; }
.index-nav a:hover::after { transform: none; }
/* ---------- 3つ並び（線と余白だけで） ---------- */
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.trio-item { position: relative; padding-top: 28px; border-top: 1px solid var(--hair); }
.trio-item::before { content: ""; position: absolute; top: -3px; left: 0; width: 44px; height: 6px; border-radius: 3px; background: var(--g, var(--g-a)); }
.trio-item h3 { font-size: 16px; font-weight: 700; line-height: 1.7; letter-spacing: 0.1em; }
.trio-item p { margin-top: 14px; font-size: 13px; line-height: 2.1; letter-spacing: 0.06em; color: var(--sub); }
.trio-item .label { margin: 0 0 8px; font-size: 12px; letter-spacing: 0.16em; color: var(--sub); }
.trio-item .ic { margin-bottom: 20px; color: var(--char); }
.trio-item .ic svg { display: block; }
.trio-gap { margin-top: 88px; }
/* ---------- 章扉（サービスの大きな区切り） ---------- */
.chapter { position: relative; overflow: hidden; background: var(--soft); padding: clamp(90px, 9vw, 140px) 0; scroll-margin-top: 70px; }
.chapter .wrap { position: relative; z-index: 1; display: flex; align-items: center; gap: clamp(28px, 4vw, 64px); }
.chapter-num { font-weight: 400; font-size: clamp(80px, 11vw, 160px); line-height: .9; letter-spacing: -0.03em; color: var(--ink); }
.chapter-en { display: inline-flex; align-items: center; gap: 14px; font-size: 12px; letter-spacing: 0.22em; color: var(--sub); }
.chapter-en::before { content: ""; width: 44px; height: 6px; border-radius: 3px; background: var(--g); }
.chapter h2 { margin-top: 14px; font-size: clamp(24px, 3vw, 38px); font-weight: 700; letter-spacing: 0.1em; line-height: 1.5; }
.chapter .strokes { opacity: .85; }
.chapter + .sec { padding-top: clamp(110px, 12vw, 190px) !important; }
/* ---------- 補助 ---------- */
.kicker { font-size: 12px; font-weight: 500; letter-spacing: 0.16em; color: var(--sub); margin-bottom: 18px; }
.actions-gap { margin-top: 44px; }
.steps-gap { margin-top: 56px; }
.notes-gap { margin-top: 40px; }
.body-gap { margin-bottom: 56px; }
.lead-strong { color: var(--ink) !important; font-weight: 500; }
.grid > .span { grid-column: 1 / -1; margin-top: 72px; }
/* 下に横いっぱいの中身（.span）がある節では、左の見出しを追従させない（追従すると料金表や注記の上に重なる。10/26ご指摘） */
.grid:has(> .span) > .side { position: static; }
.steps.schedule li { grid-template-columns: 64px 220px 1fr; }
/* ---------- プラン・料金表 ---------- */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; padding: 44px 36px 36px; background: var(--soft); border-radius: 0 72px 0 0; }
.plan:nth-child(2) { border-radius: 72px 0 0 0; }
.plan::before { content: ""; position: absolute; top: 0; left: 36px; width: 44px; height: 6px; border-radius: 0 0 3px 3px; background: var(--g); }
.plan-en { font-size: 12px; letter-spacing: 0.22em; color: var(--sub); }
.plan-name { margin-top: 10px; font-size: 22px; font-weight: 700; letter-spacing: 0.14em; line-height: 1.5; }
.plan-name.sm { margin-top: 0; font-size: 15.5px; line-height: 1.8; letter-spacing: 0.08em; }
.plan-scope { margin-top: 6px; font-size: 12.5px; letter-spacing: 0.08em; color: var(--sub); }
.plan-price { margin-top: 30px; font-weight: 400; font-size: clamp(30px, 2.6vw, 40px); letter-spacing: 0; line-height: 1.2; }
.plan-price small { font-size: 12px; font-weight: 400; letter-spacing: 0.06em; color: var(--sub); margin-left: 4px; }
.plan-price.ask { font-size: 22px; font-weight: 500; letter-spacing: 0.14em; }
.plan-ask { margin-top: 14px; }
.plan-ask .textlink { font-size: 12px; }
.plan-desc { margin-top: 22px; font-size: 13px; line-height: 2.1; letter-spacing: 0.06em; color: var(--sub); }
.plan-specs { margin-top: 24px; border-top: 1px solid var(--hair); }
.plan-specs > div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--hair); font-size: 12.5px; letter-spacing: 0.06em; }
.plan-specs dt { color: var(--sub); }
.plan-specs dd { font-weight: 500; text-align: right; }
.plan-list { list-style: none; padding: 0; margin-top: 22px; display: flex; flex-direction: column; gap: 8px; }
.plan-list li { position: relative; padding-left: 20px; font-size: 13px; line-height: 1.8; letter-spacing: 0.06em; }
.plan-list li::before { content: ""; position: absolute; left: 2px; top: .8em; width: 8px; height: 1px; background: var(--ink); }
.plan-list li.plus::before { content: "+"; top: 0; width: auto; height: auto; background: none; font-size: 13px; color: var(--char); font-weight: 500; }
.plan-deliv { margin-top: auto; padding-top: 24px; font-size: 12px; line-height: 1.9; letter-spacing: 0.04em; color: var(--sub); }
.prices .plan { padding-top: 40px; }
/* ---------- 研修プログラム（時間割） ---------- */
.program { border-top: 1px solid var(--hair); }
.program-row { display: grid; grid-template-columns: 72px 180px 1fr; gap: 24px; align-items: baseline; padding: 22px 4px; border-bottom: 1px solid var(--hair); }
.program-row .time { font-weight: 400; font-size: 18px; letter-spacing: 0.04em; }
.program-row .what { font-size: 14.5px; font-weight: 700; letter-spacing: 0.1em; }
.program-row .how { font-size: 13px; line-height: 2; letter-spacing: 0.06em; color: var(--sub); }
/* ---------- テーマ切り替え（共同開発） ---------- */
.theme-tabs { display: flex; gap: 10px; flex-wrap: wrap; margin: 56px 0 40px; }
.theme-tab { position: relative; padding: 10px 22px; border-radius: 999px; border: 1px solid var(--hair-strong); background: transparent; font-family: inherit; font-size: 13px; letter-spacing: 0.1em; color: var(--ink); cursor: pointer; transition: background .3s, color .3s, border-color .3s; }
.theme-tab:hover { border-color: var(--char); }
.theme-tab.active { background: var(--char); border-color: var(--char); color: var(--on-char); }
.theme-panel { display: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 44px; align-items: start; }
.theme-panel.active { display: grid; animation: fade-up .6s var(--ease); }
@keyframes fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.theme-panel .ph { aspect-ratio: 4 / 3; }
.tp-kicker { font-size: 12px; letter-spacing: 0.14em; color: var(--sub); }
.tp-body h3 { margin-top: 10px; font-size: 19px; font-weight: 700; letter-spacing: 0.1em; line-height: 1.6; }
.tp-body > p { margin-top: 16px; font-size: 13.5px; line-height: 2.1; letter-spacing: 0.06em; color: var(--sub); }
.tp-partners { font-size: 12.5px !important; color: var(--ink) !important; }
.tp-label { display: inline-block; margin-right: 12px; font-size: 12px; letter-spacing: 0.14em; color: var(--sub); }
.tp-body .textlink { margin-top: 22px; }
@media (max-width: 1100px) {
.plans { grid-template-columns: 1fr; max-width: 640px; }
.plan:nth-child(2) { border-radius: 0 72px 0 0; }
.trio { grid-template-columns: 1fr; gap: 36px; }
.theme-panel { grid-template-columns: 1fr; gap: 28px; }
.index-nav .wrap { grid-template-columns: 1fr 1fr; }
.index-nav a:nth-child(2n+1) { padding-left: 0; border-left: none; }
.index-nav a:nth-child(2n+1)::after { left: 0; }
.index-nav a:nth-child(n+3) { border-top: 1px solid var(--hair); }
}
@media (max-width: 900px) {
.steps.schedule li { grid-template-columns: 48px 1fr; }
.program-row { grid-template-columns: 56px 1fr; gap: 4px 16px; }
.program-row .how { grid-column: 2; }
.grid > .span { margin-top: 0; }
}
@media (max-width: 600px) {
.index-nav .wrap { grid-template-columns: 1fr; }
.index-nav a + a { padding-left: 0; border-left: none; border-top: 1px solid var(--hair); }
.index-nav a + a::after { left: 0; }
.index-nav a { padding: 20px 0; }
.chapter .wrap { flex-direction: column; align-items: flex-start; gap: 16px; }
.plan { padding: 40px 26px 30px; }
.plan::before { left: 26px; }
}
/* ---------- ゲーム一覧（コンテンツ） ---------- */
.games { display: grid; grid-template-columns: repeat(3, 1fr); gap: 96px 48px; }
.games > :nth-child(3n+2) { margin-top: 96px; }
.game { display: flex; flex-direction: column; }
.game .ph { aspect-ratio: 4 / 3; }
/* ロゴ → ホバーで合成画像（コンテンツのゲーム一覧と、サービス紹介の共同開発の枠） */
:is(.game, .theme-panel) .ph img.alt { position: absolute; inset: 0; opacity: 0; transition: opacity .6s var(--ease); }
.game:hover .ph img.alt, .theme-panel .ph:hover img.alt { opacity: 1; }
/* 白地のロゴ（クロス）だけ、ページの地と分けるために黒い枠の線を引く。合成画像に切り替わったら消す（10/26 クライアント指示） */
.ph.logo-frame::after { content: ""; position: absolute; inset: 0; z-index: 1; border: 3px solid var(--logo-frame); border-radius: inherit; pointer-events: none; transition: opacity .6s var(--ease); }
.game.is-flipped .ph.logo-frame::after { opacity: 0; }
@media (hover: hover) { .game:hover .ph.logo-frame::after { opacity: 0; } }
.game:hover .hover-shape { border-radius: 0; }
.game:hover .ph::before { transform: translate(-50%, -58%) scale(1.12); }
.game h3 { margin-top: 26px; font-size: 16px; font-weight: 700; line-height: 1.75; letter-spacing: 0.08em; }
.kw { list-style: none; padding: 0; margin-top: 14px; display: flex; flex-wrap: wrap; gap: 6px; }
.kw li { padding: 3px 12px; border: 1px solid var(--hair-strong); border-radius: 999px; font-size: 12px; letter-spacing: 0.08em; color: var(--sub); line-height: 1.8; }
.game .desc { margin-top: 14px; font-size: 13px; line-height: 2.05; letter-spacing: 0.06em; color: var(--sub); }
.credit { margin-top: auto; padding-top: 16px; font-size: 12px; letter-spacing: 0.06em; color: var(--sub); }
.credit .k { display: inline-block; margin-right: 12px; padding-right: 12px; border-right: 1px solid var(--hair-strong); color: var(--ink); }
.games-note { margin-top: 88px; }
.games-note a { color: var(--ink); }
/* ---------- 大きな案内パネル（淡い面＋ストローク） ---------- */
.feature { position: relative; overflow: hidden; background: var(--soft); border-radius: 0 140px 0 0; padding: clamp(56px, 7vw, 100px) clamp(32px, 6vw, 96px); }
.feature-body { position: relative; z-index: 1; max-width: 620px; }
.feature .lead-title { margin-bottom: 40px; }
.feature .strokes { opacity: .9; }
@media (max-width: 1100px) {
.games { grid-template-columns: repeat(2, 1fr); gap: 80px 36px; }
.games > :nth-child(3n+2) { margin-top: 0; }
.games > :nth-child(2n) { margin-top: 80px; }
}
@media (max-width: 900px) {
.feature .strokes { opacity: .45; }
}
@media (max-width: 600px) {
.games { grid-template-columns: 1fr; gap: 64px; }
.games > :nth-child(2n) { margin-top: 0; }
.feature { border-radius: 0 80px 0 0; }
.feature .strokes { opacity: .3; }
}
/* ---------- 絞り込みボタン（導入事例・記事一覧で共用） ---------- */
.filter-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: clamp(64px, 7vw, 100px); }
.filter-btn { padding: 10px 22px; border-radius: 999px; border: 1px solid var(--hair-strong); background: transparent; font-family: inherit; font-size: 13px; letter-spacing: 0.1em; color: var(--ink); cursor: pointer; transition: background .3s, color .3s, border-color .3s; }
.filter-btn:hover { border-color: var(--char); }
.filter-btn.active { background: var(--char); border-color: var(--char); color: var(--on-char); }
/* ---------- 導入事例（写真と本文の横並び・左右交互） ---------- */
.case-list { display: flex; flex-direction: column; gap: clamp(96px, 10vw, 150px); }
.case-card { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.case-card.rev .ph { order: 2; }
.case-card .ph { aspect-ratio: 4 / 3; }
.case-meta { display: flex; align-items: center; gap: 16px; font-size: 12px; letter-spacing: 0.14em; color: var(--sub); }
.case-no { display: inline-flex; align-items: center; gap: 12px; font-weight: 400; font-size: 34px; letter-spacing: 0; color: var(--ink); }
.case-no::after { content: ""; width: 44px; height: 6px; border-radius: 3px; background: var(--g); }
.case-card .client { margin-top: 18px; font-size: clamp(18px, 1.8vw, 22px); font-weight: 700; line-height: 1.7; letter-spacing: 0.08em; }
.case-fields { margin-top: 32px; border-top: 1px solid var(--hair); }
.case-fields > div { display: grid; grid-template-columns: 120px 1fr; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--hair); }
.case-fields dt { font-size: 12px; letter-spacing: 0.12em; color: var(--sub); line-height: 2; }
.case-fields dd { font-size: 13.5px; line-height: 2; letter-spacing: 0.06em; }
/* ---------- その他の実績 ---------- */
.more-list { list-style: none; padding: 0; border-top: 1px solid var(--hair); }
.more-list li { padding: 20px 4px; border-bottom: 1px solid var(--hair); font-size: 14px; line-height: 1.9; letter-spacing: 0.06em; }
@media (max-width: 900px) {
.case-card { grid-template-columns: 1fr; gap: 32px; }
.case-card.rev .ph { order: 0; }
}
@media (max-width: 600px) {
.case-fields > div { grid-template-columns: 1fr; gap: 4px; }
}
/* ---------- 沿革 ---------- */
.timeline { border-top: 1px solid var(--hair); }
.tl-year { display: grid; grid-template-columns: 140px 1fr; gap: 24px; padding: 34px 0; border-bottom: 1px solid var(--hair); }
.tl-y { font-weight: 400; font-size: 40px; line-height: 1; letter-spacing: 0; }
.tl-items { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.tl-items li { display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: baseline; }
.tl-m { font-size: 12.5px; letter-spacing: 0.08em; color: var(--sub); }
.timeline strong { white-space: nowrap; } /* 「30個」が「30／個」と行をまたいで割れないように（10/26） */
.tl-items p { font-size: 14px; line-height: 1.95; letter-spacing: 0.06em; }
.tl-items strong { font-weight: 500; }
/* ---------- アクセス ---------- */
.map-embed { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: var(--soft); }
.map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* 10/25 クライアント指示でカラーに（以前は grayscale(.85)） */
.map-actions { margin-top: 20px; }
.access-lead { margin: 56px 0 28px; }
.routes { border-top: 1px solid var(--hair); }
.route { display: grid; grid-template-columns: 120px 1fr; gap: 24px; padding: 22px 4px; border-bottom: 1px solid var(--hair); }
.route .mode { font-size: 13px; font-weight: 500; letter-spacing: 0.14em; }
.route .detail { display: flex; flex-direction: column; gap: 6px; }
.route .time { font-size: 14.5px; letter-spacing: 0.06em; }
.route .sub { font-size: 12.5px; line-height: 2; letter-spacing: 0.04em; color: var(--sub); }
/* ---------- メンバー（1人1行） ---------- */
.member-list { border-top: 1px solid var(--hair); }
.member-row { display: grid; grid-template-columns: 150px 1fr; gap: clamp(24px, 3vw, 44px); align-items: start; padding: 36px 0; border-bottom: 1px solid var(--hair); }
.member-row .ph { aspect-ratio: 3 / 4; }
.member-row .ph > span { font-size: 11px; left: 8px; bottom: 8px; padding: 3px 8px; }
.member-body .n { font-size: 17px; font-weight: 700; letter-spacing: 0.18em; }
.member-body .e { margin-top: 4px; font-size: 12px; letter-spacing: 0.14em; color: var(--sub); }
.member-body .role { margin-top: 12px; font-size: 13px; letter-spacing: 0.1em; }
.member-body .fields { margin-top: 20px; display: grid; grid-template-columns: 120px 1fr; gap: 8px 16px; font-size: 12.5px; line-height: 1.9; letter-spacing: 0.06em; }
.member-body .fields dt { color: var(--sub); }
.todo { color: var(--faint) !important; }
@media (max-width: 600px) {
.tl-year { grid-template-columns: 1fr; gap: 16px; }
.tl-y { font-size: 32px; }
.route { grid-template-columns: 1fr; gap: 6px; }
.member-row { grid-template-columns: 100px 1fr; gap: 20px; }
.member-body .fields { grid-template-columns: 1fr; gap: 0; }
.member-body .fields dd { margin-bottom: 8px; }
}
/* ---------- お知らせ・記事の切り替えタブ ---------- */
.content-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--hair); margin-bottom: 56px; }
.content-tab { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 0 40px 22px 0; background: none; border: none; font-family: inherit; font-size: 15px; font-weight: 500; letter-spacing: 0.12em; color: var(--sub); cursor: pointer; transition: color .3s; }
.content-tab .en { font-weight: 400; font-size: clamp(26px, 2.6vw, 36px); letter-spacing: -0.01em; line-height: 1.2; }
.content-tab::after { content: ""; position: absolute; left: 0; right: 40px; bottom: -1px; height: 4px; border-radius: 2px; background: var(--g-a); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.content-tab:hover { color: var(--ink); }
.content-tab.active { color: var(--ink); }
.content-tab.active::after { transform: none; }
.content-tab + .content-tab::after { background: var(--g-d); }
.content-panel { display: none; }
.content-panel.active { display: block; animation: fade-up .6s var(--ease); }
.panel-lead { font-size: 14px; line-height: 2.2; letter-spacing: 0.08em; color: var(--sub); max-width: 720px; margin-bottom: 48px; }
/* ---------- お知らせ一覧（build-articles.mjs が書き出す） ---------- */
.news-list { border-top: 1px solid var(--hair); }
.news-item { display: grid; grid-template-columns: 120px 140px 1fr; gap: 24px; align-items: baseline; padding: 26px 4px; border-bottom: 1px solid var(--hair); text-decoration: none; color: var(--ink); transition: padding .4s var(--ease); }
a.news-item:hover { padding-left: 16px; }
.news-item .date { font-size: 12.5px; letter-spacing: 0.08em; color: var(--sub); }
.news-item .cat { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: 0.12em; color: var(--char); }
.news-item .cat::before { content: ""; width: 18px; height: 4px; border-radius: 2px; background: var(--g-a); }
.news-item .t { font-size: 14px; line-height: 1.95; letter-spacing: 0.06em; }
.news-item .ext { margin-left: 6px; color: var(--sub); }
.news-empty, .articles-empty-state, .article-empty { font-size: 14px; letter-spacing: 0.08em; color: var(--sub); padding: 40px 0; }
/* 検索欄・年と種類の絞り込み・もっと読む（10/27） */
.news-item[hidden], .news-more-wrap[hidden] { display: none; }
.news-tools { display: grid; gap: 14px; margin-bottom: 40px; }
.news-search { position: relative; display: block; max-width: 420px; margin-bottom: 10px; }
.news-search input { width: 100%; padding: 10px 2px 12px 30px; border: none; border-bottom: 1px solid var(--hair-strong); border-radius: 0; background: transparent; font-family: inherit; font-size: 15px; letter-spacing: 0.06em; color: var(--ink); -webkit-appearance: none; appearance: none; transition: border-color .3s; }
.news-search .ic { position: absolute; left: 2px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); fill: none; stroke: var(--sub); stroke-width: 1.8; stroke-linecap: round; pointer-events: none; }
.news-search input::placeholder { color: var(--placeholder); }
.news-search input:focus { outline: none; border-bottom-color: var(--char); }
.news-search input:focus-visible { box-shadow: 0 2px 0 0 var(--char); }
.filter-row.news-filter { align-items: center; gap: 8px; margin-bottom: 0; }
.news-filter .lbl { min-width: 3.5em; font-size: 12px; letter-spacing: 0.14em; color: var(--sub); }
.news-filter .filter-btn { padding: 8px 18px; }
.news-more-wrap { margin-top: 40px; text-align: center; }
/* お知らせの見出しの（…）はひとかたまりで折り返す（build-articles.mjs の titleHtml） */
.tp { display: inline-block; max-width: 100%; }
.nw { white-space: nowrap; }
/* 見出しの先頭の「（ を詰める・詰めないが行によって変わり、頭がそろわなくなるので、詰めない設定にそろえる（10/27） */
.news-item .t, .news-strip .t, .article-head h1, .article-pager .t { text-spacing-trim: space-all; }
/* スマホではお知らせ・記事の見出しを少し小さく（長いカタカナ語が1行に収まるように・10/27） */
@media (max-width: 500px) { .article-head h1 { font-size: 21px; letter-spacing: 0.04em; } }
@media (max-width: 600px) { .news-filter .lbl { flex-basis: 100%; } }
@media (max-width: 900px) {
.news-item { grid-template-columns: auto 1fr; gap: 4px 20px; }
.news-item .t { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
.content-tab { padding-right: 24px; }
.content-tab::after { right: 24px; }
}
/* ---------- 記事・お知らせの詳細（build-articles.mjs が書き出す） ---------- */
.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; letter-spacing: 0.1em; color: var(--char); text-decoration: none; border-bottom: 1px solid var(--hair-strong); padding-bottom: 4px; transition: border-color .3s; }
.link-arrow:hover { border-bottom-color: var(--char); }
main > article { max-width: 820px; margin: 0 auto; padding: clamp(150px, 15vw, 200px) 32px clamp(110px, 11vw, 160px); }
.article-head { padding-bottom: 48px; border-bottom: 1px solid var(--hair); }
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 12px; letter-spacing: 0.08em; color: var(--sub); }
.breadcrumb a { color: var(--sub); text-decoration: none; }
.breadcrumb a:hover { color: var(--ink); }
.article-head .article-meta { margin-top: 36px; }
.article-head h1 { margin-top: 18px; font-size: clamp(24px, 3vw, 34px); font-weight: 700; line-height: 1.65; letter-spacing: 0.08em; }
.article-head .excerpt { margin-top: 22px; font-size: 14.5px; line-height: 2.2; letter-spacing: 0.06em; color: var(--sub); }
.article-hero { margin-top: 48px; }
.article-hero .frame { overflow: hidden; border-radius: 0 110px 0 0; aspect-ratio: 16 / 9; background: var(--soft); }
.article-hero img { width: 100%; height: 100%; object-fit: cover; }
.prose { margin-top: 56px; font-size: 15px; line-height: 2.25; letter-spacing: 0.06em; color: var(--ink-3); overflow-wrap: break-word; } /* 長いURLが狭い画面ではみ出さないように（10/26） */
.prose a { overflow-wrap: anywhere; }
.prose img { height: auto; } /* microCMS が width・height を付けるので、縮めたときに縦横比が崩れないように（10/26） */
.prose > * + * { margin-top: 1.6em; }
.prose h2 { margin-top: 2.6em; padding-top: 28px; border-top: 1px solid var(--hair); font-size: 21px; font-weight: 700; line-height: 1.7; letter-spacing: 0.08em; color: var(--ink); position: relative; }
.prose h2::before { content: ""; position: absolute; top: -3px; left: 0; width: 44px; height: 6px; border-radius: 3px; background: var(--g-a); }
.prose h3 { margin-top: 2.2em; font-size: 17px; font-weight: 700; letter-spacing: 0.08em; color: var(--ink); }
.prose a { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--hair-strong); }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li + li { margin-top: .5em; }
.prose blockquote { margin-left: 0; padding: 4px 0 4px 24px; border-left: 3px solid; border-image: var(--g-d) 1; color: var(--sub); }
.prose img { border-radius: 0 56px 0 0; margin: 2em 0; }
/* 写真は高さ480px（画面の高さの64%）まで。縦長やチラシが画面いっぱいにならないように、縦横比はそのまま縮める（10/27） */
.prose img { display: block; width: auto; max-width: 100%; max-height: min(64vh, 480px); }
.prose figure { margin-left: 0; margin-right: 0; }
.prose figure figcaption { margin-top: 10px; font-size: 12px; color: var(--sub); }
.prose table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.prose th, .prose td { padding: 12px 10px; border-bottom: 1px solid var(--hair); text-align: left; vertical-align: top; }
.prose th { font-weight: 500; color: var(--sub); }
.prose strong { font-weight: 500; color: var(--ink); }
.article-foot { margin-top: 72px; padding-top: 40px; border-top: 1px solid var(--hair); }
.signature { font-size: 13px; letter-spacing: 0.1em; color: var(--sub); }
.notice-link { margin-bottom: 32px; }
.article-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 40px 0; }
.article-pager a { display: flex; flex-direction: column; gap: 8px; padding: 24px; background: var(--soft); text-decoration: none; color: var(--ink); transition: background .3s; }
.article-pager a:hover { background: var(--soft-2); }
.article-pager .prev { border-radius: 0 0 0 48px; }
.article-pager .next { border-radius: 0 48px 0 0; text-align: right; }
.article-pager .dir { font-size: 12px; letter-spacing: 0.2em; color: var(--sub); }
.article-pager .t { font-size: 13.5px; line-height: 1.8; letter-spacing: 0.06em; }
.article-back { margin-top: 32px; }
.related { margin-top: 110px; }
.related .head { font-size: 13px; font-weight: 500; letter-spacing: 0.2em; margin-bottom: 40px; display: flex; align-items: center; gap: 14px; }
.related .head::before { content: ""; width: 44px; height: 6px; border-radius: 3px; background: var(--g-h); }
.related .article-grid { grid-template-columns: repeat(3, 1fr); gap: 40px 24px; }
@media (max-width: 900px) {
.related .article-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
main > article { padding-left: 20px; padding-right: 20px; }
.article-pager { grid-template-columns: 1fr; }
.related .article-grid { grid-template-columns: 1fr; }
}
/* ---------- お問い合わせ（左：直接の連絡先／右：フォーム） ---------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: clamp(40px, 6vw, 96px); align-items: start; }
.contact-grid .form-card { grid-column: 2; grid-row: 1; }
.contact-grid .direct-card { grid-column: 1; grid-row: 1; position: sticky; top: 130px; }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.field { display: flex; flex-direction: column; gap: 10px; margin-bottom: 40px; font-size: 12.5px; font-weight: 500; letter-spacing: 0.14em; color: var(--ink); }
.field input, .field select, .field textarea { width: 100%; padding: 12px 2px 14px; border: none; border-bottom: 1px solid var(--hair-strong); border-radius: 0; background: transparent; font-family: inherit; font-size: 15px; font-weight: 400; letter-spacing: 0.06em; color: var(--ink); transition: border-color .3s; -webkit-appearance: none; appearance: none; }
.field textarea { resize: vertical; line-height: 1.9; min-height: 140px; }
.field select { padding-right: 28px; background-image: linear-gradient(45deg, transparent 50%, var(--sub) 50%), linear-gradient(135deg, var(--sub) 50%, transparent 50%); background-position: calc(100% - 12px) 55%, calc(100% - 7px) 55%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; cursor: pointer; }
.field input::placeholder, .field textarea::placeholder { color: var(--placeholder); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom-color: var(--char); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { box-shadow: 0 2px 0 0 var(--char); }
.consent { display: flex; align-items: flex-start; gap: 12px; margin: 8px 0 40px; font-size: 13px; line-height: 1.9; letter-spacing: 0.06em; }
.consent input { flex: none; width: 18px; height: 18px; margin: 4px 0 0; accent-color: var(--char); cursor: pointer; }
.consent a { color: var(--ink); text-underline-offset: 4px; }
.form-submit { padding: 17px 56px; font-size: 15px; }
.form-submit:disabled { opacity: .6; cursor: progress; }
.form-note { margin-top: 24px; font-size: 12.5px; line-height: 2.1; letter-spacing: 0.06em; color: var(--sub); }
.thanks { padding: 24px 0; scroll-margin-top: 110px; }
.thanks:focus { outline: none; }
.check-circle { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--g-h); font-size: 26px; color: var(--ink); }
.thanks h2 { margin-top: 28px; font-size: clamp(20px, 2vw, 24px); font-weight: 700; letter-spacing: 0.1em; line-height: 1.7; }
.thanks > p { margin-top: 18px; font-size: 14px; line-height: 2.2; letter-spacing: 0.06em; color: var(--sub); }
.thanks-back { margin-top: 32px !important; }
.direct-head { margin-bottom: 36px; }
.direct-grid { border-top: 1px solid var(--hair); }
.direct-item { display: grid; grid-template-columns: 28px 1fr; gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--hair); }
.direct-item .ic { width: 22px; height: 22px; color: var(--char); margin-top: 2px; }
.direct-item .ic svg { width: 100%; height: 100%; }
.direct-item .k { font-size: 12px; letter-spacing: 0.16em; color: var(--sub); }
.direct-item .v { margin-top: 4px; font-size: 15px; letter-spacing: 0.06em; }
.sns-tiles { list-style: none; padding: 0; margin-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.sns-tiles a { display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; letter-spacing: 0.06em; text-decoration: none; transition: color .25s; }
.sns-tiles a:hover { color: var(--sub); }
.sns-tiles svg { width: 18px; height: 18px; }
@media (max-width: 900px) {
.contact-grid { grid-template-columns: 1fr; row-gap: 88px; }
.contact-grid .form-card, .contact-grid .direct-card { grid-column: 1; grid-row: auto; position: static; }
}
@media (max-width: 600px) {
.form-grid-2 { grid-template-columns: 1fr; }
.form-submit { width: 100%; justify-content: center; }
}
/* ---------- 規約・方針（プライバシーポリシー） ---------- */
.toc ol { list-style: none; padding: 0; border-top: 1px solid var(--hair); counter-reset: none; }
.toc li { border-bottom: 1px solid var(--hair); }
.toc a { display: block; padding: 12px 2px; font-size: 12.5px; line-height: 1.7; letter-spacing: 0.06em; color: var(--sub); text-decoration: none; transition: color .25s, padding .35s var(--ease); }
.toc a:hover { color: var(--ink); padding-left: 8px; }
.prose.policy { margin-top: 0; font-size: 14.5px; }
.prose.policy h2 { scroll-margin-top: 110px; }
.prose.policy h2:first-child { margin-top: 0; }
@media (max-width: 900px) {
.toc { margin-bottom: 72px; }
}
/* ---------- 英語版（メニューは「日本語サイトへ」だけ） ---------- */
.hero-en-page .hero-copy { font-size: 12.5px; letter-spacing: 0.12em; }
.hero-en-page .hero-en { margin-top: 4px; }
.en-lines p { font-size: 14px; line-height: 2.1; letter-spacing: 0.02em; }
.site-footer:not(:has(.footer-grid)) { padding-top: 56px; }
.site-footer:not(:has(.footer-grid)) .footer-bottom .inner { margin-top: 0; }
@media (max-width: 1080px) {
.nav-links.nav-simple { position: static; opacity: 1; visibility: visible; flex-direction: row; padding: 0; background: none; }
.nav-links.nav-simple a { border-bottom: none; font-size: 13px; padding: 4px 0; }
}
/* ---------- 404 ---------- */
.notfound { position: relative; overflow: hidden; min-height: 100vh; min-height: 100svh; display: grid; place-items: center; text-align: center; }
.notfound-inner { position: relative; z-index: 1; max-width: 640px; padding: 140px 24px 100px; }
.nf-code .eyebrow { font-size: 12px; letter-spacing: 0.24em; color: var(--sub); }
.nf-num { margin-top: 8px; font-weight: 400; font-size: clamp(96px, 16vw, 200px); line-height: 1; letter-spacing: -0.03em; }
.notfound h1 { margin-top: 24px; font-size: clamp(20px, 2.4vw, 28px); font-weight: 700; line-height: 1.7; letter-spacing: 0.1em; }
.notfound .lead { margin: 22px auto 0; max-width: 520px; font-size: 14px; line-height: 2.2; letter-spacing: 0.06em; color: var(--sub); }
.notfound .actions { margin-top: 44px; justify-content: center; }
@media (max-width: 900px) { .notfound .strokes { opacity: .45; } }
/* ---------- ライト／ダークの切替スイッチ（js/lodu.js がヘッダーに差し込む） ---------- */
.brand { flex: none; order: 0; }
.nav-links { margin-left: auto; order: 1; }
.theme-toggle { order: 2; }
.nav-toggle { order: 3; }
.theme-toggle { position: relative; z-index: 2; flex: none; display: inline-flex; align-items: center; gap: 0; width: 68px; height: 36px; padding: 2px; border: 1px solid var(--hair-strong); border-radius: 999px; background: var(--bg); color: var(--sub); cursor: pointer; transition: border-color .3s; }
.theme-toggle:hover { border-color: var(--char); }
.theme-toggle::before { content: ""; position: absolute; top: 2px; left: 2px; width: 30px; height: 30px; border-radius: 50%; background: var(--char); transition: transform .45s var(--ease); }
.theme-toggle.is-dark::before { transform: translateX(32px); }
.tt-icon { position: relative; z-index: 1; display: grid; place-items: center; width: 30px; height: 30px; margin-right: 2px; transition: color .3s; }
.tt-icon svg { width: 17px; height: 17px; }
.theme-toggle:not(.is-dark) .tt-sun, .theme-toggle.is-dark .tt-moon { color: var(--on-char); }
/* お問い合わせボタンの地を塗る（後ろのストロークが透けて濁らないように） */
.nav-links a.nav-contact { background: var(--bg); }
@media (max-width: 1080px) {
.theme-toggle { margin-left: auto; margin-right: 6px; }
.nav-links a.nav-contact { background: transparent; }
}
@media (prefers-reduced-motion: reduce) { .theme-toggle::before { transition: none; } }
/* =====================================================
写真のレイアウト（2026-10-12 写真枠の配置案）
- .cap … 表紙のストロークと同じ「45°のカプセル形」の写真窓。ストロークに混ぜて使う
- .band.photo-bg … 帯の背景を全面写真に（暗い幕＋白文字）
- .gallery … 写真がゆっくり横に流れる帯（日々の風景）
写真が届いたら .ph の中に 
を入れる。キャプションの span は消す
===================================================== */
/* ---------- カプセル形の写真窓 ---------- */
.cap { position: absolute; z-index: 1; width: var(--w, 360px); aspect-ratio: 3 / 1; border-radius: 999px; overflow: hidden; transform: rotate(45deg); pointer-events: none; }
.cap > .ph { position: absolute; left: -5%; top: 50%; width: 110%; aspect-ratio: 1; transform: translateY(-50%) rotate(-45deg); }
.cap > .ph > span { left: 50%; bottom: auto; top: 60%; transform: translateX(-50%); white-space: nowrap; max-width: none; }
.cap-layer { position: absolute; inset: 0; pointer-events: none; will-change: transform; }
/* 写真を入れず、表紙のパステルのグラデーションで塗った飾りとして使う（2026-10-12 クライアント指示: 細長い形には写真が収まらない） */
.cap.cap-fill { background: var(--g, var(--g-a)); }
.js .cap { opacity: 0; }
.cap.is-in { animation: cap-in 1.6s var(--ease) forwards; animation-delay: calc(var(--base, 0s) + var(--d, 0s)); }
@keyframes cap-in { from { opacity: 0; translate: -90px -90px; } to { opacity: 1; translate: 0 0; } }
/* ヒーローの写真の群れ（右側。ストロークと交互に重なる） */
.hero-photos { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-photos .cap { --base: var(--intro); }
.hero-photos .c1 { --w: clamp(240px, 28vw, 460px); top: 16%; right: 4%; }
.hero-photos .c2 { --w: clamp(180px, 20vw, 320px); top: 54%; right: 3%; }
.hero-photos .c3 { --w: clamp(150px, 14vw, 230px); top: 70%; right: 27%; }
/* 文字は左6割に収め、写真は右側に置く（重ならないように） */
@media (min-width: 901px) { .hero-main { max-width: min(820px, 60%); } }
/* 下層ページの見出しの写真（右側に1枚） */
.page-head .cap { --w: clamp(240px, 26vw, 400px); top: calc(50% - var(--w) * .2); right: 3%; }
@media (min-width: 901px) { .page-head .cap-layer ~ .wrap > * { max-width: 60%; } }
/* 章扉・案内パネルの写真 */
.chapter .cap { --w: clamp(260px, 26vw, 400px); top: 10%; right: 8%; }
.feature .cap { --w: clamp(240px, 28vw, 420px); top: 18%; right: 3%; }
.feature-body { max-width: 560px; }
/* ---------- 背景を全面写真にした帯 ---------- */
.band.photo-bg { background: #2B2A28; color: #fff; }
.band-photo { position: absolute; inset: 0; z-index: 0; }
.band-photo.ph > span { top: clamp(110px, 10vw, 150px); bottom: auto; left: 24px; }
.band-photo > img { filter: saturate(.85); }
.band-veil { position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(29, 28, 27, .64) 0%, rgba(29, 28, 27, .7) 100%); } /* 写真の一番明るい部分でも白文字が4.5:1以上になる濃さ */
.band.photo-bg .strokes { z-index: 0; opacity: .55; }
.band.photo-bg .band-num, .band.photo-bg .band-num .eyebrow { color: rgba(255, 255, 255, .92); }
.band.photo-bg .band-en, .band.photo-bg .band-ja { color: #fff; }
.band.photo-bg .lines p { color: rgba(255, 255, 255, .94); }
.band.photo-bg .btn { background: #fff; color: #2B2A28; }
.band.photo-bg .btn:hover { background: #EDEBE6; }
.band.photo-bg .textlink { color: #fff; }
/* ---------- 流れるギャラリー ---------- */
.gallery { position: relative; overflow: hidden; padding: clamp(40px, 5vw, 72px) 0; }
.gallery-track { display: flex; gap: 28px; width: max-content; animation: gallery 70s linear infinite; }
.gallery-set { display: flex; gap: 28px; align-items: center; }
.gallery .ph { flex: none; }
.gallery .g-a { width: 360px; aspect-ratio: 4 / 3; border-radius: 0 96px 0 0; }
.gallery .g-b { width: 240px; aspect-ratio: 3 / 4; border-radius: 0 64px 0 64px; }
.gallery .g-c { width: 420px; aspect-ratio: 3 / 1.15; border-radius: 999px; }
.gallery .g-d { width: 300px; aspect-ratio: 1; border-radius: 96px 0 0 0; }
@keyframes gallery { to { transform: translateX(calc(-50% - 14px)); } }
/* JSが動きを受け持つときはCSSのアニメーションを止める（カーソルを乗せても止まらない） */
.gallery.is-js .gallery-track { animation: none; will-change: transform; }
/* 写真を選ぶ丸ボタン＋一時停止ボタン（押しやすいよう当たり判定は28px以上） */
.gallery-ctrl { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 28px; padding: 0 20px; flex-wrap: wrap; }
.gallery-dots { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; justify-content: center; }
.gallery-dot { position: relative; width: 28px; height: 28px; padding: 0; border: none; background: none; cursor: pointer; }
.gallery-dot::before { content: ""; position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; border-radius: 999px; background: var(--sub); transform: translate(-50%, -50%); transition: width .45s var(--ease), background .3s; } /* 地に対して3:1以上（ボタンの見分けやすさの基準） */
.gallery-dot:hover::before { background: var(--ink); }
.gallery-dot.is-active::before { width: 24px; background: var(--char); }
.gallery-pause { position: relative; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--sub); background: var(--bg); color: var(--ink); cursor: pointer; transition: border-color .3s; }
.gallery-pause:hover { border-color: var(--char); }
/* 一時停止の印（2本線）／再生の印（三角） */
.gallery-pause::before, .gallery-pause::after { content: ""; position: absolute; top: 50%; width: 3px; height: 11px; background: currentColor; border-radius: 1px; transform: translateY(-50%); }
.gallery-pause::before { left: 12px; } .gallery-pause::after { left: 17px; }
.gallery-pause.is-paused::after { display: none; }
.gallery-pause.is-paused::before { left: 13px; width: 0; height: 0; background: none; border-radius: 0; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent currentColor; }
/* ---------- アクセス: 建物の写真＋地図 ---------- */
.access-media { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 24px; align-items: stretch; }
.access-media .ph { aspect-ratio: 4 / 5; }
.access-media .map-embed { aspect-ratio: auto; min-height: 100%; }
@media (max-width: 1280px) {
.hero-photos .c3 { display: none; }
}
@media (max-width: 900px) {
/* スマホ・タブレットでは文字に重ねず、見出しの上に写真の群れを置く */
.hero { flex-direction: column; align-items: stretch; justify-content: flex-start; }
.hero-photos { position: relative; inset: auto; height: clamp(240px, 62vw, 380px); margin-top: 72px; order: -1; }
.hero-photos .c1 { --w: 64vw; top: 22%; right: -6%; }
.hero-photos .c2 { --w: 44vw; top: 46%; right: 46%; }
.hero .hero-inner { padding-top: 24px; }
.page-head .cap, .chapter .cap { display: none; }
.feature .cap-layer { position: relative; inset: auto; }
/* スマホ幅の案内パネルでは傾けず、横長のカプセルにする（傾けると上下の文字にはみ出すため） */
.feature .cap { position: relative; display: block; margin: 0 0 40px; top: auto; right: auto; width: 100%; aspect-ratio: 16 / 7; transform: none; }
.feature .cap > .ph { left: 0; top: 0; width: 100%; height: 100%; aspect-ratio: auto; transform: none; }
.feature { display: flex; flex-direction: column-reverse; }
.access-media { grid-template-columns: 1fr; }
.access-media .ph { aspect-ratio: 16 / 9; }
.access-media .map-embed { aspect-ratio: 16 / 9; min-height: 0; }
}
@media (max-width: 600px) {
.gallery .g-a { width: 260px; } .gallery .g-b { width: 180px; } .gallery .g-c { width: 300px; } .gallery .g-d { width: 220px; }
.gallery-track, .gallery-set { gap: 18px; }
}
@media (prefers-reduced-motion: reduce) {
.gallery-track { animation: none; }
.gallery:not(.is-js) { overflow-x: auto; }
.js .cap { opacity: 1; }
.cap.is-in { animation: none; }
}
/* ---------- 写真が入った枠（仮置きのアイコンを消し、枠いっぱいに収める） ---------- */
.ph:has(> img) { background: var(--soft); }
.ph:has(> img)::before { content: none; }
.ph > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* 画面幅で縦長・横長の写真を出し分けるとき（picture要素） */
.ph:has(> picture)::before { content: none; }
.ph > picture { position: absolute; inset: 0; }
.ph > picture > img { width: 100%; height: 100%; object-fit: cover; }
.member .ph > img, .member-row .ph > img, .message-photo .ph > img { object-position: 50% 20%; }
/* ---------- フッター ---------- */
.site-footer { position: relative; overflow: hidden; background: var(--soft); padding: clamp(100px, 10vw, 150px) 0 40px; }
.footer-grid { position: relative; z-index: 1; max-width: 1280px; margin: 0 auto; padding: 0 64px; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; }
.footer-brand .logo img { height: 40px; width: auto; }
.footer-brand .tagline { margin-top: 28px; font-size: 14px; font-weight: 500; letter-spacing: 0.2em; }
.footer-brand .desc { margin-top: 14px; font-size: 12.5px; line-height: 2.1; letter-spacing: 0.06em; color: var(--sub); max-width: 320px; }
.footer-brand .desc + .desc { margin-top: 4px; }
.footer-col .head { font-size: 12px; font-weight: 500; letter-spacing: 0.2em; color: var(--sub); margin-bottom: 22px; }
.footer-col ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-col a { font-size: 13px; letter-spacing: 0.06em; text-decoration: none; transition: color .25s; }
.footer-col a:hover { color: var(--sub); }
.footer-social { display: grid !important; grid-template-columns: 1fr 1fr; gap: 12px 16px !important; }
.footer-social a { display: inline-flex; align-items: center; gap: 8px; }
.footer-social svg { width: 18px; height: 18px; flex: none; }
.footer-lang { margin-top: 26px; }
.footer-lang a { font-size: 13px; letter-spacing: 0.08em; text-decoration: none; border-bottom: 1px solid var(--hair-strong); padding-bottom: 3px; }
.footer-bottom { position: relative; z-index: 1; max-width: 1280px; margin: 0 auto; padding: 0 64px; }
.footer-bottom .inner { margin-top: 88px; padding-top: 24px; border-top: 1px solid var(--hair); display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.footer-bottom .legal a, .footer-bottom .copy { font-size: 12px; letter-spacing: 0.08em; color: var(--sub); text-decoration: none; }
.footer-bottom .legal a:hover { color: var(--ink); }
.site-footer .strokes { opacity: .7; }
/* 編集モードのボタンは左下へ（右下はページの要素と重なるため） */
body #lodu-edit-btn, body #lodu-edit-bar { right: auto; left: 20px; }
/* =====================================================
レスポンシブ
===================================================== */
@media (max-width: 1280px) and (min-width: 901px) {
.strokes.fade-left-md { -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 38%, rgba(0,0,0,.35) 52%, #000 66%); mask-image: linear-gradient(90deg, transparent 0%, transparent 38%, rgba(0,0,0,.35) 52%, #000 66%); }
}
@media (max-width: 1180px) {
.nav-links { gap: 24px; }
.nav-links a { font-size: 12.5px; }
}
@media (max-width: 1100px) {
.wrap, .nav, .hero-inner, .footer-grid, .footer-bottom { padding-left: 40px; padding-right: 40px; }
.panels { grid-template-columns: 1fr; }
.panel { min-height: 0; }
.rows a { grid-template-columns: 1fr 40px; gap: 10px 20px; }
.rows .row { grid-template-columns: 1fr; gap: 10px; }
.rows .t, .rows .d { grid-column: 1; }
.rows .arw { grid-column: 2; grid-row: 1 / span 2; }
.facts { grid-template-columns: repeat(2, 1fr); }
.footer-grid { grid-template-columns: 1fr 1fr; }
.article-grid { grid-template-columns: repeat(2, 1fr); }
.article-card:nth-child(3n+2) .thumb { border-radius: 0 72px 0 0; }
.article-card:nth-child(2n) .thumb { border-radius: 72px 0 0 0; }
}
/* メニューは1080px以下でハンバーガーに（ライト／ダークのスイッチを足した分、1000px前後で横に収まらないため） */
@media (max-width: 1080px) {
.nav { padding-top: 14px; padding-bottom: 14px; }
.nav-toggle { display: block; }
.nav-links { position: fixed; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 0; padding: 90px 28px 40px; background: var(--bg); opacity: 0; visibility: hidden; transition: opacity .4s var(--ease), visibility .4s; }
.nav-links.open { opacity: 1; visibility: visible; }
.nav-links a { flex-direction: row; align-items: baseline; justify-content: space-between; font-size: 17px; padding: 18px 2px; border-bottom: 1px solid var(--hair); }
.nav-links a .en { order: 2; font-size: 12px; }
.nav-links a::after { display: none; }
.nav-links a.nav-contact { margin-top: 32px; justify-content: center; padding: 16px; border-bottom: 1px solid var(--char); }
/* 項目が画面の高さより長いとき（拡大表示・小項目を開いたとき）は、上にはみ出さずにスクロールできるようにする。
上下の余白が足りるときは今までどおり真ん中にそろう。ロゴの帯の下にもぐった項目は隠す（10/26 ご指摘） */
.nav-links { justify-content: flex-start; overflow-y: auto; overscroll-behavior: contain; border-top: 78px solid var(--bg); padding-top: 12px; }
/* 上の78pxは「枠線」にしてある：スクロールしても項目は枠線の下にもぐらない（ロゴと閉じるボタンの帯） */
.nav-links.nav-simple { border-top: 0; overflow: visible; } /* 英語版の横並びメニューには当てない */
.nav-links.nav-simple > :first-child, .nav-links.nav-simple > :last-child { margin: 0; }
.nav-links > :first-child { margin-top: auto; }
.nav-links > :last-child { margin-bottom: auto; }
}
@media (max-width: 900px) {
.wrap, .nav, .hero-inner, .footer-grid, .footer-bottom { padding-left: 28px; padding-right: 28px; }
.grid { grid-template-columns: 1fr; }
.side { position: static; margin-bottom: 56px; }
.side .textlink { margin-top: 24px; }
.hero-inner { padding-top: 130px; padding-bottom: 130px; }
.hero .strokes { opacity: .55; }
.band .strokes { opacity: .6; }
.page-head .strokes { opacity: .5; }
.lead-title { margin-bottom: 48px; }
.cases { gap: 72px 28px; }
.cases > :nth-child(2n) { margin-top: 80px; }
.steps li { grid-template-columns: 48px 1fr; gap: 6px 16px; }
.steps li p { grid-column: 2; }
.dl > div { grid-template-columns: 1fr; gap: 6px; }
.statement-row { grid-template-columns: 1fr; gap: 20px; }
.message { grid-template-columns: 1fr; }
.message-photo { position: static; display: flex; gap: 24px; align-items: flex-end; }
.message-photo .ph { width: 160px; flex: none; }
.news-strip a { gap: 24px; }
}
@media (max-width: 600px) {
body { font-size: 14px; }
.wrap, .nav, .hero-inner, .footer-grid, .footer-bottom { padding-left: 20px; padding-right: 20px; }
.hero-inner { padding-top: 110px; }
.hero-lead br { display: none; }
.hero .strokes { opacity: .34; }
.band .strokes { opacity: .45; }
.page-head .strokes { opacity: .35; }
.panel { padding: 36px 26px 30px; border-radius: 0 64px 0 0; }
.panel:nth-child(2n) { border-radius: 64px 0 0 0; }
.panel h3 { margin-top: 36px; }
.cases { grid-template-columns: 1fr; gap: 64px; }
.cases > :nth-child(2n) { margin-top: 0; }
.shape-tr, .shape-tl, .shape-br, .shape-bl { border-radius: 0 80px 0 0; }
.team { grid-template-columns: 1fr 1fr; gap: 40px 20px; }
.team > :nth-child(3n+2) { margin-top: 0; }
.team > :nth-child(2n) { margin-top: 40px; }
.facts { gap: 44px 24px; }
.lines p { font-size: 12.5px; letter-spacing: 0.06em; line-height: 2.4; }
.band-inner { padding-left: 20px; padding-right: 20px; }
.news-strip a { flex-direction: column; gap: 6px; }
.article-grid, .article-grid.compact { grid-template-columns: 1fr; gap: 56px; }
.article-card:nth-child(n) .thumb { border-radius: 0 64px 0 0; }
.footer-grid { grid-template-columns: 1fr; gap: 44px; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.cover { display: none; }
.rise, .hero-en span, .scroll-cue::after, .js .page-head * { animation: none !important; opacity: 1 !important; transform: none !important; }
.js [data-reveal], .js [data-lines] > *, .js .steps li > * { opacity: 1; transform: none; filter: none; transition: none; }
.js .steps li::before { --p: 1; }
.js .strokes .st-s, .js .strokes .st-c { opacity: 1; animation: none !important; }
}
/* =====================================================
ダークモード
- 何も選んでいない人: 端末の設定（prefers-color-scheme）に自動で合わせる
- ヘッダーの太陽／月のスイッチで選んだ人: html[data-theme="light|dark"] が優先（localStorageに保存）
地は深いチャコール、文字は生成り。パステルのストロークは同じ色のまま。
コントラスト: 本文 #EAE8E3 / 補足 #C4C0BA（地 #1D1C1B に対し 15.6:1 / 9.4:1）
※ 下の2つのブロックは同じ内容。片方を直したらもう片方も直すこと
===================================================== */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--bg: #1D1C1B;
--bg-rgb: 29, 28, 27;
--soft: #262524;
--soft-2: #2F2E2C;
--ink: #EAE8E3;
--ink-2: #D6D3CD;
--ink-3: #DDDAD4;
--sub: #C4C0BA;
--faint: #8E8A84;
--placeholder: #7A7671; /* ダーク地で3.8:1 */
--char: #E9E6E0; /* ボタンなどの面は明るく反転 */
--char-dark: #FFFFFF;
--on-char: #1D1C1B;
--err: #F2B8B5;
--lift-shadow: rgba(0, 0, 0, .7);
--scrim: rgba(0, 0, 0, .6);
--dark-bg: #2B2A28; /* 濃い帯は地より一段明るい面に */
--hair: rgba(234, 232, 227, 0.14);
--hair-strong: rgba(234, 232, 227, 0.32);
--ph-1: #2E2D2B; --ph-2: #292827; --ph-3: #242322;
--chip-bg: rgba(29, 28, 27, 0.88);
--hl-a: rgba(249, 216, 178, .32); --hl-b: rgba(189, 227, 242, .32);
}
/* ロゴ（黒い文字の画像）は白く反転 */
:root:not([data-theme="light"]) .brand img, :root:not([data-theme="light"]) .footer-brand .logo img, :root:not([data-theme="light"]) .cover img { filter: invert(1) hue-rotate(180deg) brightness(1.05); }
/* 写真の仮置きアイコン */
:root:not([data-theme="light"]) .ph::before { border-color: rgba(234, 232, 227, 0.2); background-image: radial-gradient(circle at 28% 34%, rgba(234, 232, 227, 0.2) 0 3px, transparent 3.5px), linear-gradient(to top right, rgba(234, 232, 227, 0.16) 0 42%, transparent 42.5%); }
/* 波形の境界（SVGの塗りを地の色に） */
:root:not([data-theme="light"]) .wave-top::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 130' preserveAspectRatio='none'%3E%3Cpath fill='%231D1C1B' d='M0 0H1440V22C1180 128 860 118 560 60C340 18 150 40 0 112Z'/%3E%3C/svg%3E"); }
:root:not([data-theme="light"]) .wave-bottom::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 130' preserveAspectRatio='none'%3E%3Cpath fill='%231D1C1B' d='M0 130H1440V30C1250 96 1000 118 720 84C430 48 200 64 0 110Z'/%3E%3C/svg%3E"); }
:root:not([data-theme="light"]) .dark.wave-top::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath fill='%231D1C1B' d='M0 0H1440V96C1100 20 760 10 420 46C250 64 110 60 0 30Z'/%3E%3C/svg%3E"); }
:root:not([data-theme="light"]) .dark.wave-bottom::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath fill='%231D1C1B' d='M0 120H1440V40C1220 100 940 110 640 70C380 36 170 50 0 96Z'/%3E%3C/svg%3E"); }
/* 地図は暗く反転 */
:root:not([data-theme="light"]) .map-embed iframe { filter: brightness(.88); }
/* ストロークは暗い地では少し控えめに */
:root:not([data-theme="light"]) .strokes svg { opacity: .82; }
:root:not([data-theme="light"]) .check-circle { color: #1D1C1B; }
}
:root[data-theme="dark"] {
--bg: #1D1C1B;
--bg-rgb: 29, 28, 27;
--soft: #262524;
--soft-2: #2F2E2C;
--ink: #EAE8E3;
--ink-2: #D6D3CD;
--ink-3: #DDDAD4;
--sub: #C4C0BA;
--faint: #8E8A84;
--placeholder: #7A7671; /* ダーク地で3.8:1 */
--char: #E9E6E0; /* ボタンなどの面は明るく反転 */
--char-dark: #FFFFFF;
--on-char: #1D1C1B;
--err: #F2B8B5;
--lift-shadow: rgba(0, 0, 0, .7);
--scrim: rgba(0, 0, 0, .6);
--dark-bg: #2B2A28; /* 濃い帯は地より一段明るい面に */
--hair: rgba(234, 232, 227, 0.14);
--hair-strong: rgba(234, 232, 227, 0.32);
--ph-1: #2E2D2B; --ph-2: #292827; --ph-3: #242322;
--chip-bg: rgba(29, 28, 27, 0.88);
--hl-a: rgba(249, 216, 178, .32); --hl-b: rgba(189, 227, 242, .32);
}
/* ロゴ（黒い文字の画像）は白く反転 */
:root[data-theme="dark"] .brand img, :root[data-theme="dark"] .footer-brand .logo img, :root[data-theme="dark"] .cover img { filter: invert(1) hue-rotate(180deg) brightness(1.05); }
/* 写真の仮置きアイコン */
:root[data-theme="dark"] .ph::before { border-color: rgba(234, 232, 227, 0.2); background-image: radial-gradient(circle at 28% 34%, rgba(234, 232, 227, 0.2) 0 3px, transparent 3.5px), linear-gradient(to top right, rgba(234, 232, 227, 0.16) 0 42%, transparent 42.5%); }
/* 波形の境界（SVGの塗りを地の色に） */
:root[data-theme="dark"] .wave-top::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 130' preserveAspectRatio='none'%3E%3Cpath fill='%231D1C1B' d='M0 0H1440V22C1180 128 860 118 560 60C340 18 150 40 0 112Z'/%3E%3C/svg%3E"); }
:root[data-theme="dark"] .wave-bottom::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 130' preserveAspectRatio='none'%3E%3Cpath fill='%231D1C1B' d='M0 130H1440V30C1250 96 1000 118 720 84C430 48 200 64 0 110Z'/%3E%3C/svg%3E"); }
:root[data-theme="dark"] .dark.wave-top::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath fill='%231D1C1B' d='M0 0H1440V96C1100 20 760 10 420 46C250 64 110 60 0 30Z'/%3E%3C/svg%3E"); }
:root[data-theme="dark"] .dark.wave-bottom::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath fill='%231D1C1B' d='M0 120H1440V40C1220 100 940 110 640 70C380 36 170 50 0 96Z'/%3E%3C/svg%3E"); }
/* 地図は暗く反転 */
:root[data-theme="dark"] .map-embed iframe { filter: brightness(.88); }
/* ストロークは暗い地では少し控えめに */
:root[data-theme="dark"] .strokes svg { opacity: .82; }
:root[data-theme="dark"] .check-circle { color: #1D1C1B; }
/* ダークモードでは写真を少しだけ落として、まぶしさを抑える（端末設定・スイッチの両方） */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ph > img { filter: brightness(.9); } }
:root[data-theme="dark"] .ph > img { filter: brightness(.9); }
/* =====================================================
触りたくなる動き（2026-10-24 追加）
参考: 「思わず触りたくなるUIアニメ48選」から、サイトのトーンに合うものを
チャコール＋表紙のパステルで描き直して採用。番号はその動画の番号。
動きを減らす設定の人には、末尾でまとめて止める。
===================================================== */
/* 01 波紋: 押した位置からパステルの波紋が広がる（lodu.js が .ripple を差し込む） */
.btn, .nav-links a.nav-contact, .nav-links a.nav-request, .read-more, .filter-btn, .theme-tab, .copy-btn { position: relative; overflow: hidden; isolation: isolate; }
.ripple { position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; background: var(--ripple); transform: scale(0); opacity: 1; animation: ripple .75s var(--ease) forwards; }
@keyframes ripple { to { transform: scale(1); opacity: 0; } }
/* 09 グラデボタン: カーソルを乗せると、縁にパステルが流れる */
.btn::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; background: var(--g-flow); background-size: 300% 100%; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); opacity: 0; transition: opacity .4s var(--ease); pointer-events: none; }
.btn:hover::before, .btn:focus-visible::before { opacity: 1; animation: flow 3s linear infinite; }
@keyframes flow { to { background-position: 150% 0; } }
/* 04 マグネット: ボタンがカーソルに少し引き寄せられる（PCのみ。値は lodu.js が --mx/--my に入れる） */
.magnet { translate: var(--mx, 0px) var(--my, 0px); transition: translate .5s cubic-bezier(.34, 1.56, .64, 1), background .3s, color .3s; }
.magnet.is-pulling { transition: translate .12s linear, background .3s, color .3s; }
/* 08 スライドハイライト: 絞り込み・タブの「選択中」の面が、押した項目へ滑って移動する */
.has-pill { position: relative; }
.has-pill > .pill { position: absolute; left: 0; top: 0; z-index: 0; border-radius: 999px; background: var(--char); pointer-events: none; transition: transform .55s cubic-bezier(.34, 1.3, .64, 1), width .55s var(--ease), height .55s var(--ease); }
.has-pill > .filter-btn, .has-pill > .theme-tab { z-index: 1; }
.has-pill > .filter-btn.active, .has-pill > .theme-tab.active { background: transparent; border-color: transparent; }
/* 17 エレベート＋18 グローエッジ: 案内パネルが浮き上がり、縁にカーソルを追う光が走る */
a.panel { transition: color .5s var(--ease), transform .6s var(--ease), box-shadow .6s var(--ease); }
a.panel::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; padding: 2px; background: radial-gradient(260px circle at var(--gx, 50%) var(--gy, 50%), var(--pastel-a), var(--pastel-b) 45%, transparent 75%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); opacity: 0; transition: opacity .4s; pointer-events: none; }
@media (hover: hover) {
a.panel:hover { transform: translateY(-6px); box-shadow: 0 24px 48px -28px var(--lift-shadow); }
a.panel:hover::after { opacity: 1; }
}
/* 05 3Dフローティング: ゲームの写真がカーソルの方へ少し傾く（PCのみ。角度は lodu.js） */
.game .ph { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(calc(var(--ry, 0deg) + var(--flip, 0deg))); transition: border-radius .8s var(--ease), transform .6s var(--ease); }
.theme-panel .ph { transform: perspective(900px) rotateY(var(--flip, 0deg)); }
.game.is-tilting .ph { transition: border-radius .8s var(--ease), transform .12s linear; }
/* カードを裏返す（2026-10-26）: カーソルの無い端末だけ、枠の右下の丸ボタンでロゴ⇄合成画像を反転（ボタンは lodu.js が足す） */
.flip-btn { display: none; }
@media (hover: none) {
.game:hover .ph img.alt, .theme-panel .ph:hover img.alt { opacity: 0; }
:is(.game, .theme-panel) .ph img.alt { transition: none; }
:is(.game, .theme-panel).is-flipped .ph img.alt { opacity: 1; }
:is(.game, .theme-panel).is-flipping .ph { transition: transform .3s ease-in-out; }
:is(.game, .theme-panel).no-anim .ph { transition: none; }
.flip-btn { display: grid; place-items: center; align-self: flex-end; position: relative; z-index: 2; width: 44px; height: 44px; margin: -54px 10px 10px 0; padding: 0; border: 0; border-radius: 50%; background: var(--chip-bg); color: var(--ink); box-shadow: 0 4px 14px var(--hair-strong); cursor: pointer; }
.flip-btn svg { width: 22px; height: 22px; transition: transform .5s var(--ease); }
.flip-btn[aria-pressed="true"] svg { transform: rotate(180deg); }
.flip-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* 右下が曲線の枠は、曲線にかからないよう内側へ */
.ph.shape-br + .flip-btn { margin: -86px 42px 42px 0; }
/* 共同開発の枠は横に本文が並ぶので、ボタンは枠の中の右下に置く */
.ph > .flip-btn { position: absolute; right: 10px; bottom: 10px; margin: 0; }
}
@media (hover: none) and (max-width: 600px) {
.ph.shape-br + .flip-btn { margin: -54px 10px 10px 0; } /* 600px以下は枠がすべて右上の曲線になる */
}
@media (hover: none) and (prefers-reduced-motion: reduce) { .flip-btn svg { transition: none; } }
/* カードがめくれて登場する（2026-10-26 見本の案B・クライアント選択）: コンテンツのゲーム一覧は、裏向き（LODUの裏面）で並び、
画面に入ると順番にくるっと表になる。裏面は lodu.js が足し、めくり終えたら取り除く（動きを減らす設定では足さない） */
.js .games .game.has-back[data-reveal] { opacity: 1; transform: none; transition: none; }
.js .games .game.has-back > :not(.ph):not(.flip-btn) { opacity: 0; transition: opacity .5s var(--ease); transition-delay: calc(var(--d, 0s) + .35s); }
.js .games .game.has-back.is-in > :not(.ph):not(.flip-btn) { opacity: 1; }
.card-back { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; border-radius: inherit; pointer-events: none;
background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .06) 0 10px, transparent 10px 20px), var(--char); }
.card-back span { font-family: var(--font-en); font-size: clamp(20px, 2vw, 28px); letter-spacing: .2em; padding: 8px 6px 8px 16px; color: var(--on-char); border: 2px solid currentColor; border-radius: 10px; opacity: .85; }
.js .games .game.has-back.is-in .ph { animation: card-turn .7s both; animation-delay: var(--d, 0s); animation-fill-mode: backwards; }
.js .games .game.has-back.is-in .card-back { animation: card-back-off .7s linear both; animation-delay: var(--d, 0s); }
/* 横向き（90°）になった瞬間に裏面を消し、反対側から戻す */
@keyframes card-turn {
0% { transform: perspective(900px) rotateY(0deg); animation-timing-function: ease-in; }
50% { transform: perspective(900px) rotateY(90deg); }
50.01% { transform: perspective(900px) rotateY(-90deg); animation-timing-function: ease-out; }
100% { transform: perspective(900px) rotateY(0deg); }
}
@keyframes card-back-off { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
.lodu-editing .card-back { display: none; }
.lodu-editing .games .game.has-back > * { opacity: 1 !important; }
/* 13 スプリングトグル: 太陽／月のつまみが、ばねのように弾んで止まる */
.theme-toggle::before { transition: transform .6s cubic-bezier(.34, 1.56, .64, 1); }
/* 42 メニュー展開: スマホメニューの項目が上から順に滑り込む */
@media (max-width: 1080px) {
.nav-links.open > a, .nav-links.open > .nav-item { animation: menu-in .6s var(--ease) both; animation-delay: calc(.08s + var(--i, 0) * .05s); }
}
@keyframes menu-in { from { opacity: 0; transform: translateY(16px); } }
/* 46 スクロールインジケーター: 画面の一番上に、読んだ量をパステルの線で示す */
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; z-index: 70; height: 3px; background: var(--g-a); transform: scaleX(var(--p, 0)); transform-origin: left; pointer-events: none; }
/* 38 スケルトン: 写真が届くまで、枠の中を光がゆっくり流れる → 届いたらふわっと出る */
.ph > img, .ph > picture > img { transition: transform 1s var(--ease), opacity .7s var(--ease); }
.ph.is-loading > img, .ph.is-loading > picture > img { opacity: 0; }
.ph.is-loading { background: linear-gradient(100deg, var(--ph-1) 30%, var(--ph-2) 50%, var(--ph-1) 70%) 0 0 / 300% 100%; animation: shimmer 1.6s linear infinite; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -50% 0; } }
/* 25 フォーカス入力欄: 入力中の欄だけ、下線がパステルで左から伸びる */
.field input, .field textarea { background-image: var(--g-a); background-repeat: no-repeat; background-position: left bottom; background-size: 0% 2px; transition: border-color .3s, background-size .6s var(--ease); }
.field input:focus, .field textarea:focus { background-size: 100% 2px; }
/* 37 エラーシェイク: 未入力のまま送信すると、その欄が小さく揺れて線が赤くなる */
.field.is-error input, .field.is-error select, .field.is-error textarea { border-bottom-color: var(--err); animation: shake .45s cubic-bezier(.36, .07, .19, .97); }
.consent.is-error input { border-color: var(--err); animation: shake .45s cubic-bezier(.36, .07, .19, .97); }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
/* 07 スライムチェック: 同意のチェックが、ぷるんと弾んで入る */
.consent input { appearance: none; -webkit-appearance: none; display: grid; place-content: center; width: 20px; height: 20px; margin-top: 4px; border: 1.5px solid var(--char); border-radius: 6px; background: transparent; transition: background .25s, border-color .25s; }
.consent input::before { content: ""; width: 10px; height: 5px; margin-top: -3px; border-left: 2px solid var(--on-char); border-bottom: 2px solid var(--on-char); transform: rotate(-45deg) scale(0); transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.consent input:checked { background: var(--char); animation: squish .5s cubic-bezier(.34, 1.56, .64, 1); }
.consent input:checked::before { transform: rotate(-45deg) scale(1); }
@keyframes squish { 0% { transform: scale(1); } 30% { transform: scale(1.25, .8); } 55% { transform: scale(.9, 1.12); } 100% { transform: scale(1); } }
/* 11 ローディング: 送信中はボタンの矢印が、弾む3つの点に変わる */
.btn.is-loading { cursor: progress; }
.btn.is-loading::after { width: 26px; height: 8px; background: radial-gradient(circle, currentColor 2.6px, transparent 3px) 0 50% / 8px 8px no-repeat, radial-gradient(circle, currentColor 2.6px, transparent 3px) 9px 50% / 8px 8px no-repeat, radial-gradient(circle, currentColor 2.6px, transparent 3px) 18px 50% / 8px 8px no-repeat; animation: dots 1s ease-in-out infinite; }
@keyframes dots {
0%, 100% { background-position: 0 50%, 9px 50%, 18px 50%; }
20% { background-position: 0 0, 9px 50%, 18px 50%; }
40% { background-position: 0 50%, 9px 0, 18px 50%; }
60% { background-position: 0 50%, 9px 50%, 18px 0; }
}
/* 36 成功チェック: 送信完了の丸が弾んで現れ、輪が広がる */
.check-circle { position: relative; animation: pop .8s cubic-bezier(.34, 1.56, .64, 1) both; }
.check-circle::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--char); opacity: 0; animation: ring 1.2s .25s var(--ease); }
@keyframes pop { from { transform: scale(.3); opacity: 0; } }
@keyframes ring { from { transform: scale(1); opacity: .5; } to { transform: scale(1.8); opacity: 0; } }
/* 44 トースト通知: コピーしたことを、画面の下から知らせる */
.toast { position: fixed; left: 50%; bottom: 32px; z-index: 300; padding: 12px 24px; border-radius: 999px; background: var(--char); color: var(--on-char); font-size: 13px; letter-spacing: 0.08em; line-height: 1.6; box-shadow: 0 16px 32px -16px var(--lift-shadow); transform: translate(-50%, 24px); opacity: 0; visibility: hidden; transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), opacity .3s, visibility .3s; }
.toast.is-show { transform: translate(-50%, 0); opacity: 1; visibility: visible; }
/* 直接の連絡先: メールはそのまま送れる・コピーできる、電話はスマホでそのままかけられる */
.direct-item .v a { color: inherit; text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-position: left bottom; background-size: 0% 1px; transition: background-size .5s var(--ease); }
.direct-item .v a:hover { background-size: 100% 1px; }
.direct-item .v { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; }
.copy-btn { display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px; border: 1px solid var(--hair-strong); border-radius: 999px; background: transparent; color: var(--sub); font-family: inherit; font-size: 12px; letter-spacing: 0.08em; line-height: 1.6; cursor: pointer; transition: border-color .3s, color .3s; }
.copy-btn:hover { border-color: var(--char); color: var(--ink); }
.copy-btn svg { width: 13px; height: 13px; }
/* 45 ページ遷移: ページを移るとき、ふわっと切り替える（対応ブラウザのみ） */
@media (prefers-reduced-motion: no-preference) {
@view-transition { navigation: auto; }
html:active-view-transition { overflow-x: clip; } /* 切り替え中の一瞬だけ、画面の幅より広い「写し」で横スクロールが出るのを防ぐ */
::view-transition-old(root) { animation: vt-out .25s ease both; }
::view-transition-new(root) { animation: vt-in .45s var(--ease) both; }
}
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(12px); } }
/* 動きを減らす設定の人には、ここで足した動きを止める（状態の変化そのものは残す） */
@media (prefers-reduced-motion: reduce) {
.ripple { display: none; }
.btn:hover::before, .btn:focus-visible::before { animation: none; }
.magnet, .has-pill > .pill, a.panel, .game .ph, .theme-toggle::before, .toast, .field input, .field textarea { transition: none; }
a.panel:hover { transform: none; }
.nav-links.open > a, .nav-links.open > .nav-item, .field.is-error input, .field.is-error select, .field.is-error textarea, .consent.is-error input, .consent input:checked, .check-circle, .check-circle::after, .btn.is-loading::after { animation: none; }
.ph.is-loading { animation: none; }
}
/* 指で押す端末では、フッター・SNSのリンクの押せる範囲を広げる（見た目の行間は変えずに、間隔を内側の余白に置き換える） */
@media (pointer: coarse) {
.footer-col ul:not(.footer-social), .sns-tiles { gap: 0; }
.footer-col ul:not(.footer-social) a, .sns-tiles a { display: inline-flex; padding: 5px 0; }
.footer-social { row-gap: 2px !important; }
.footer-social a { padding: 5px 0; }
}
/* ---------- よくあるお悩み（トップ・2026-10-24 追加） ---------- */
.worries { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 8px; }
.worry { padding: 40px 40px 36px; background: var(--soft); border-radius: 0 72px 0 0; }
.worry:nth-child(2n) { border-radius: 72px 0 0 0; }
.worry h3 { font-size: clamp(15px, 1.4vw, 17px); font-weight: 700; line-height: 1.7; letter-spacing: 0.08em; padding-bottom: 18px; border-bottom: 1px solid var(--hair-strong); }
.worry ul { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-direction: column; gap: 14px; }
.worry li { position: relative; padding-left: 34px; font-size: 14px; line-height: 1.9; letter-spacing: 0.06em; }
.worry li::before { content: ""; position: absolute; left: 0; top: 4px; width: 20px; height: 20px; border-radius: 6px; background: var(--char); }
.worry li::after { content: ""; position: absolute; left: 6px; top: 10px; width: 9px; height: 5px; border-left: 2px solid var(--on-char); border-bottom: 2px solid var(--on-char); transform: rotate(-45deg); }
.worries-answer { margin-top: 48px; font-size: clamp(19px, 2vw, 25px); font-weight: 700; line-height: 1.7; letter-spacing: 0.08em; }
.worries-answer::before { content: ""; display: block; width: 56px; height: 6px; margin-bottom: 20px; border-radius: 3px; background: var(--g-c); }
@media (max-width: 768px) {
.worries { grid-template-columns: 1fr; gap: 20px; }
.worry { padding: 32px 26px 28px; border-radius: 0 56px 0 0; }
.worry:nth-child(2n) { border-radius: 56px 0 0 0; }
}
/* ---------- 見出しの下の小見出し・4つ並び・研修の概要（2026-10-24 追加） ---------- */
.lead-sub { display: block; margin-top: 10px; font-size: 14px; font-weight: 500; letter-spacing: 0.12em; color: var(--sub); }
.trio.quad { grid-template-columns: repeat(2, 1fr); gap: 48px 40px; }
.spec { margin: 0; border-top: 1px solid var(--hair); }
.spec > div { display: grid; grid-template-columns: 160px 1fr; gap: 24px; padding: 22px 4px; border-bottom: 1px solid var(--hair); }
.spec dt { font-size: 13px; font-weight: 700; letter-spacing: 0.12em; }
.spec dd { margin: 0; font-size: 14px; line-height: 1.9; letter-spacing: 0.06em; }
@media (max-width: 1100px) { .trio.quad { grid-template-columns: 1fr; gap: 36px; } }
@media (max-width: 600px) { .spec > div { grid-template-columns: 1fr; gap: 4px; } }
.worry h3, .worry li, .worries-answer, .spec dd, .trio.quad p { word-break: auto-phrase; overflow-wrap: anywhere; }
/* 英語ページのサービス4つ：文が長いので 4列にせず 2列×2段（10/27） */
.trio.quad.pair { grid-template-columns: repeat(2, 1fr); gap: 48px 40px; }
@media (max-width: 1100px) { .trio.quad.pair { grid-template-columns: 1fr; gap: 36px; } }
/* =====================================================
導入事例の公開前（Coming Soon）— 2026-10-25
掲載許可が取れたら、この節と各ページの .nav-soon / .foot-soon を元のリンクに戻す
（手順は 保管/導入事例_公開前/README.md）
===================================================== */
.nav-links .nav-soon { position: relative; display: flex; flex-direction: column; line-height: 1.5; font-size: 13px; letter-spacing: 0.08em; color: var(--sub); white-space: nowrap; padding: 4px 0; cursor: not-allowed; }
.nav-links .nav-soon .en { font-size: 12px; letter-spacing: 0.08em; color: var(--sub); }
.nav-links .nav-soon small { font-size: 12px; letter-spacing: 0.04em; }
.foot-soon { font-size: 13px; letter-spacing: 0.06em; color: var(--sub); cursor: not-allowed; }
.nav-links .nav-soon .ja { display: block; }
@media (max-width: 1080px) {
.nav-links .nav-soon { flex-direction: row; align-items: baseline; justify-content: space-between; font-size: 17px; padding: 18px 2px; border-bottom: 1px solid var(--hair); }
.nav-links .nav-soon .en { order: 2; font-size: 12px; }
.nav-links .nav-soon small { font-size: 13px; }
.nav-links.open > .nav-soon { animation: menu-in .6s var(--ease) both; animation-delay: calc(.08s + var(--i, 0) * .05s); }
}
@media (pointer: coarse) { .footer-col ul:not(.footer-social) .foot-soon { display: inline-flex; padding: 5px 0; } }
/* トップの導入事例：枠の形だけを灰色で見せる（押せない） */
.cases-soon .case { pointer-events: none; filter: grayscale(1); }
.cases-soon .case .ph { background: linear-gradient(158deg, var(--ph-1) 0%, var(--ph-2) 55%, var(--ph-3) 100%); }
.cases-soon .case .ph::before { content: none; }
.cases-soon .case .m { font-size: 13px; letter-spacing: 0.16em; }
.cases-soon .sec-head .eyebrow, .cases-soon .lead-title { color: var(--sub); }
.soon-note { margin-top: 56px; font-size: 14px; line-height: 2; letter-spacing: 0.06em; color: var(--sub); }
.cases-soon .case:nth-child(n+3) { display: none; }
/* サービス紹介の共同開発：DE&I のタブ（押せない） */
.theme-tab.is-soon, .theme-tab.is-soon:hover { color: var(--sub); border-color: var(--hair); border-style: dashed; cursor: not-allowed; }
/* 導入事例ページ（Coming Soon） */
.soon-actions { margin-top: 44px; }
/* =====================================================
PCで各ブロックを1画面にまとめる（2026-10-25）
余白を画面の高さ（vh）に合わせて伸び縮みさせ、長いものは横に並べる。
スマホ・タブレット（1080px以下）は従来どおり
===================================================== */
@media (min-width: 1081px) {
/* 共通の余白 */
.sec { padding: clamp(64px, 11vh, 140px) 0; }
.chapter + .sec { padding-top: clamp(64px, 11vh, 140px) !important; }
.page-head { padding: clamp(118px, 17vh, 180px) 0 clamp(44px, 7vh, 88px); }
.page-head .en-title { margin-top: clamp(10px, 1.8vh, 20px); font-size: clamp(52px, min(7vw, 11vh), 104px); }
.page-head h1 { margin-top: clamp(18px, 3.4vh, 40px); }
.page-head .lead { margin-top: clamp(12px, 2.4vh, 26px); line-height: 2.1; }
.band-inner { padding: clamp(84px, 14vh, 180px) 32px; }
.band-num { margin-bottom: clamp(18px, 3vh, 34px); }
.band-ja { margin-top: clamp(20px, 3.4vh, 40px); }
.lines { margin-top: clamp(24px, 4vh, 48px); }
.band .actions { margin-top: clamp(28px, 4.5vh, 56px); }
.dark { padding: clamp(84px, 13vh, 170px) 0; }
.chapter { padding: clamp(56px, 8vh, 110px) 0; }
.lead-title { margin-bottom: clamp(28px, 5vh, 56px); }
.lead-title + .body-text { margin-top: calc(clamp(28px, 5vh, 56px) * -0.5); }
.rows-gap, .trio-gap { margin-top: clamp(36px, 6vh, 72px); }
.facts { gap: clamp(28px, 4.5vh, 56px) 40px; }
.facts-note, .facts-gap { margin-top: clamp(28px, 5vh, 60px); }
.grid > .span { margin-top: clamp(32px, 5.5vh, 64px); }
.side .textlink { margin-top: clamp(24px, 4vh, 40px); }
.actions-gap { margin-top: clamp(24px, 4vh, 44px); }
.steps-gap { margin-top: clamp(28px, 4.5vh, 56px); }
.notes-gap { margin-top: clamp(20px, 3.4vh, 40px); }
.team-gap { margin: clamp(36px, 6vh, 64px) 0; }
.after-meta, .after-team { margin-top: clamp(24px, 4vh, 48px); }
.meta-row { margin-top: clamp(32px, 5vh, 64px); }
.worries-answer { margin-top: clamp(28px, 4.5vh, 48px); }
.soon-note { margin-top: clamp(28px, 4.5vh, 56px); }
.cases { gap: clamp(48px, 8vh, 96px) 48px; }
/* ヒーロー */
.hero-inner { padding: clamp(104px, 15vh, 140px) 64px clamp(72px, 11vh, 120px); }
/* トップ：できること */
.panel { min-height: clamp(260px, 36vh, 380px); padding: clamp(28px, 4.4vh, 44px) 40px clamp(24px, 3.8vh, 38px); }
.panel h3 { margin-top: clamp(20px, 4vh, 48px); }
.rows a, .rows .row { padding: clamp(16px, 2.6vh, 30px) 4px; }
/* 手順（トップの開発の流れ・サービスのスケジュール）：2列に並べる（左の列から下へ読む） */
.steps { display: grid; grid-auto-flow: column; column-gap: 56px; grid-template-columns: 1fr 1fr; }
.steps:not(.schedule) { grid-template-rows: repeat(3, auto); }
.steps.schedule { grid-template-rows: repeat(4, auto); }
.steps li { padding: clamp(14px, 2.4vh, 26px) 0; }
.steps:not(.schedule) li { grid-template-columns: 44px 1fr; gap: 6px 16px; }
.steps:not(.schedule) li p { grid-column: 2; }
/* 見出しと右の説明が1行に入るよう字間と間隔を詰める。入らない幅（1100px付近）では説明を見出しの下へ（10/26） */
.steps.schedule li { grid-template-columns: 44px 1fr auto; gap: 12px; container-type: inline-size; }
.steps.schedule h3 { letter-spacing: 0.08em; }
.steps:not(.schedule) li:nth-child(3), .steps.schedule li:nth-child(4) { border-bottom: 1px solid var(--line, var(--hair)); }
/* LODUについて：5人を1列に（少しずらして並べる） */
.team { grid-template-columns: repeat(5, 1fr); gap: 24px; }
.team > :nth-child(3n+2) { margin-top: 0; }
.team > :nth-child(2n) { margin-top: 40px; }
/* 私たちについて */
.formula { margin-bottom: clamp(32px, 5vh, 64px); padding: clamp(24px, 4vh, 48px) 0; }
.statement-row { padding: clamp(28px, 4.5vh, 64px) 0; }
/* 会社概要：会社情報・沿革（2列）・アクセス・メンバー（2列） */
.dl > div { padding: clamp(12px, 2vh, 22px) 4px; }
.timeline { columns: 2; column-gap: 56px; }
.tl-year { break-inside: avoid; grid-template-columns: 84px 1fr; gap: 16px; padding: clamp(18px, 3vh, 30px) 0; }
.tl-y { font-size: 32px; }
.access-lead { margin: clamp(28px, 4.5vh, 56px) 0 clamp(16px, 2.6vh, 28px); }
.route { padding: clamp(12px, 2vh, 20px) 4px; }
.member-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; border-top: 0; }
.member-row { grid-template-columns: 112px 1fr; gap: 24px; padding: clamp(18px, 3vh, 30px) 0; }
.member-row:nth-child(-n+2) { border-top: 1px solid var(--hair); }
.member-body .fields { grid-template-columns: 56px 1fr; gap: 4px 12px; margin-top: 12px; }
.member-body .fields dd { word-break: auto-phrase; }
/* サービス紹介 */
.trio.quad { grid-template-columns: repeat(4, 1fr); gap: 32px; }
.plan { padding: clamp(28px, 4.4vh, 44px) 32px clamp(24px, 3.6vh, 36px); }
.plan-price { margin-top: clamp(16px, 3vh, 30px); }
.plan-desc, .plan-list { margin-top: clamp(12px, 2.2vh, 22px); }
.plan-specs { margin-top: clamp(14px, 2.4vh, 24px); }
.plan-specs > div { padding: 8px 0; }
.plan-list { gap: 4px; }
.theme-tabs { margin: clamp(28px, 4.5vh, 56px) 0 clamp(20px, 3.5vh, 40px); }
.program-row, .spec > div { padding: clamp(12px, 2vh, 20px) 4px; }
/* お知らせ・お問い合わせ */
.content-tabs { margin-bottom: clamp(28px, 4.5vh, 56px); }
.news-item { padding: clamp(16px, 2.6vh, 26px) 4px; }
.field { margin-bottom: clamp(20px, 3.4vh, 36px); }
.field textarea { min-height: 120px; }
.consent { margin-bottom: clamp(24px, 4vh, 40px); }
}
/* コンテンツ：ゲームを4列に（1101px以上） */
@media (min-width: 1101px) {
.games { grid-template-columns: repeat(4, 1fr); gap: clamp(48px, 8vh, 80px) 32px; }
.games > :nth-child(3n+2) { margin-top: 0; }
.games > :nth-child(2n) { margin-top: 48px; }
.games-note { margin-top: clamp(40px, 7vh, 88px); }
}
@media (min-width: 1081px) {
/* トップ「できること」：研修・コンサルティング・リサーチを横に3つ並べる */
.panel { min-height: clamp(240px, 32vh, 360px); }
.panels + .rows { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 32px; border-top: 0; }
.panels + .rows li { border-top: 1px solid var(--hair); }
.panels + .rows a { grid-template-columns: 1fr 40px; gap: 12px; align-items: start; padding: clamp(16px, 2.6vh, 26px) 2px; }
.panels + .rows a:hover { padding-left: 2px; }
.panels + .rows .d { grid-column: 1 / -1; grid-row: 2; }
.panels + .rows .arw { grid-column: 2; grid-row: 1; }
.dark { padding: clamp(72px, 11vh, 170px) 0; }
/* 私たちについて「LODUとは」：5つの数字を1列に */
.facts.facts-gap { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
.facts.facts-gap .stat .v { font-size: clamp(34px, 2.9vw, 46px); }
.facts.facts-gap .stat .v small { display: block; margin: 8px 0 0; }
/* 会社概要「沿革」：見出しを上に置き、全幅を2列で使う */
.grid:has(#history), .grid:has(> div > .member-list) { grid-template-columns: minmax(0, 1fr); }
.grid:has(#history) > .side, .grid:has(> div > .member-list) > .side { position: static; margin-bottom: clamp(28px, 4.5vh, 48px); }
.tl-year { grid-template-columns: 100px 1fr; }
}
@media (min-width: 1081px) {
/* トップ「できること」も、見出しを上に置いて全幅で並べる（文章の折り返しを減らす） */
.grid:has(> div > .panels) { grid-template-columns: minmax(0, 1fr); }
.grid:has(> div > .panels) > .side { position: static; margin-bottom: clamp(24px, 4vh, 44px); }
}
@media (min-width: 1081px) {
/* 全幅にしたブロックの見出しは、番号・英字・和文を横一列に */
.grid:has(> div > .panels) > .side, .grid:has(#history) > .side, .grid:has(> div > .member-list) > .side { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 24px; }
.grid:has(> div > .panels) > .side .en, .grid:has(#history) > .side .en, .grid:has(> div > .member-list) > .side .en { margin: 0; }
.grid:has(> div > .panels) > .side .eyebrow, .grid:has(#history) > .side .eyebrow, .grid:has(> div > .member-list) > .side .eyebrow { margin: 0; }
.panel h3 { margin-top: clamp(14px, 2.4vh, 32px); }
.panel p { line-height: 2; }
.panel-more { padding-top: clamp(16px, 2.6vh, 32px); }
.panels + .rows .d { line-height: 1.95; }
}
/* 導入事例（公開前）のポップアップ — 2026-10-25 */
.soon-dialog { width: min(420px, calc(100vw - 48px)); padding: 44px 36px 36px; border: 0; border-radius: 0 56px 0 0; background: var(--bg); color: var(--ink); text-align: center; box-shadow: 0 30px 60px -30px var(--lift-shadow); }
.soon-dialog::backdrop { background: var(--scrim); }
.soon-dialog[open] { animation: pop .5s cubic-bezier(.34, 1.56, .64, 1); }
.soon-dialog-en { font-family: var(--font-en); font-size: 13px; letter-spacing: 0.16em; color: var(--sub); }
.soon-dialog-en::before { content: ""; display: block; width: 44px; height: 6px; margin: 0 auto 16px; border-radius: 3px; background: var(--g-b); }
.soon-dialog-msg { margin-top: 12px; font-size: 16px; font-weight: 700; line-height: 1.8; letter-spacing: 0.08em; }
.soon-dialog-close { margin-top: 28px; }
@media (prefers-reduced-motion: reduce) { .soon-dialog[open] { animation: none; } }
/* =====================================================
アイコン（2026-10-25）— assets/icons.svg の線画を、表紙のパステルの丸に載せる
===================================================== */
.ico { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--ig, var(--g, var(--g-a))); color: var(--icon-ink); }
.ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ico.sm { width: 32px; height: 32px; }
.ico.sm svg { width: 17px; height: 17px; }
.ico.xs { width: 26px; height: 26px; }
.ico.xs svg { width: 15px; height: 15px; }
/* 既存の線画アイコン（サービス紹介「使える場面」）も同じ丸に */
.trio-item .ic { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 18px; border-radius: 50%; background: var(--g, var(--g-a)); color: var(--icon-ink); }
.trio-item .ic svg { width: 22px; height: 22px; }
/* 置き場所ごとの並べ方 */
.trio-item > .ico { margin-bottom: 18px; }
.worry h3 { display: flex; align-items: center; gap: 12px; }
.panel > .ico { position: absolute; top: clamp(24px, 4vh, 40px); right: 36px; }
.rows .t .ico { align-self: flex-start; margin-bottom: 4px; }
.stat .k, .spec dt, .route .mode { display: flex; align-items: center; gap: 10px; }
.steps h3 { display: flex; align-items: center; gap: 10px; }
.steps.schedule h3 { white-space: nowrap; } /* 「納品・ローンチ」が右の説明に押されて折れていた（10/26） */
@container (max-width: 316px) { .steps.schedule li > h3, .steps.schedule li > p { grid-column: 2 / -1; } }
.steps li { align-items: center; }
/* ---------- 2026-10-25 調整 ---------- */
/* トップ最後の背景写真：中央の人物の顔が切れないよう、写真の上寄りを見せる */
.band-photo > img[src*="bg-02"], .band-photo > img[src*="bg-01"] { object-position: 50% 0%; } /* 10/26 頭が切れないよう写真の上端をそろえる */
/* ミッションの「サステナブル」などが語の途中で改行されないように */
.statement { word-break: auto-phrase; overflow-wrap: anywhere; }
/* 私たちについて：ミッションとコンセプトを横並び（PC） */
@media (min-width: 1081px) {
.statements { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); column-gap: clamp(40px, 5vw, 80px); border-bottom: 1px solid var(--hair); }
.statements .statement-row { grid-template-columns: 1fr; row-gap: clamp(14px, 2.4vh, 24px); border-bottom: 0; align-content: start; }
.statements .statement-row + .statement-row { padding-left: clamp(40px, 5vw, 80px); border-left: 1px solid var(--hair); }
.statements .statement { font-size: clamp(22px, 2vw, 30px); }
}
/* =====================================================
ゲームらしい演出（2026-10-25・見本 _motion-demo の E・A・B・C を採用）
===================================================== */
/* サイコロ（開幕で使用） */
.die { --s: 64px; position: relative; width: var(--s); height: var(--s); border-radius: 22%; background: var(--bg); border: 2px solid var(--char); box-shadow: 0 10px 22px -12px var(--lift-shadow); display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); padding: calc(var(--s) * .14); }
.die i { width: 62%; height: 62%; margin: auto; border-radius: 50%; background: var(--char); visibility: hidden; }
.die[data-n="5"] i:nth-child(1), .die[data-n="5"] i:nth-child(3), .die[data-n="5"] i:nth-child(5), .die[data-n="5"] i:nth-child(7), .die[data-n="5"] i:nth-child(9) { visibility: visible; }
@keyframes die-roll {
0% { transform: translate(-140px, -60px) rotate(-200deg); }
35% { transform: translate(-50px, 0) rotate(-60deg); }
55% { transform: translate(-10px, -26px) rotate(-10deg); }
75% { transform: translate(0, 0) rotate(8deg); }
100% { transform: none; }
}
@keyframes die-out { to { opacity: 0; transform: scale(.4) rotate(90deg); } }
@keyframes logo-in { to { opacity: 1; transform: none; } }
/* A すごろく（トップ「開発の流れ」）：コマが1マスずつ進み、通ったマスがパステルに */
.grid:has(> div > .board-wrap) { grid-template-columns: minmax(0, 1fr); }
.grid:has(> div > .board-wrap) > .side { position: static; display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 24px; margin-bottom: clamp(24px, 4vh, 44px); }
.grid:has(> div > .board-wrap) > .side .en, .grid:has(> div > .board-wrap) > .side .eyebrow { margin: 0; }
.board-wrap { position: relative; padding-top: 70px; }
.board { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 20px; }
.board::before { content: ""; position: absolute; left: calc(100% / 12); right: calc(100% / 12); top: 39px; height: 6px; border-radius: 3px; background: var(--g-a); opacity: .45; }
.sq { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; cursor: pointer; }
.sq .tile { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 26px; background: var(--dark-bg); border: 1.5px solid var(--on-dark-line); color: var(--on-dark); transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), background .4s, border-color .4s, color .4s; }
.sq .tile svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sq.on .tile { background: var(--g); border-color: transparent; color: var(--icon-ink); }
.sq.here .tile { transform: translateY(-6px); }
.sq h3 { margin-top: 18px; display: flex; align-items: baseline; justify-content: center; gap: 10px; font-size: 16px; font-weight: 700; letter-spacing: .14em; color: var(--on-dark); }
.sq h3 .n { font-family: var(--font-en); font-size: 12.5px; font-weight: 400; letter-spacing: .1em; color: var(--on-dark-sub); }
.sq p { margin-top: 8px; font-size: 12.5px; line-height: 1.95; letter-spacing: .04em; color: var(--on-dark-sub); word-break: auto-phrase; }
.pawn { position: absolute; z-index: 2; top: 0; left: 0; width: 42px; height: 58px; transition: transform .55s cubic-bezier(.34, 1.4, .64, 1); pointer-events: none; }
.pawn svg { width: 100%; height: 100%; overflow: visible; }
.pawn.hop svg { animation: hop .55s ease; }
@keyframes hop { 40% { transform: translateY(-24px); } }
.pawn .body { fill: var(--pastel-a); }
.pawn .shine { fill: var(--on-dark); opacity: .55; }
.pawn .shadow { fill: var(--lift-shadow); opacity: .6; }
.board-wrap + .meta-row { margin-top: clamp(36px, 6vh, 64px); }
@media (max-width: 1080px) {
.board-wrap { padding-top: 0; padding-left: 56px; }
.board { grid-template-columns: minmax(0, 1fr); row-gap: 26px; }
.board::before { left: 29px; right: auto; top: 30px; bottom: 30px; width: 6px; height: auto; }
.sq { display: grid; grid-template-columns: 64px 1fr; column-gap: 18px; align-items: start; text-align: left; }
.sq .tile { width: 64px; height: 64px; border-radius: 20px; grid-row: 1 / span 2; }
.sq .tile svg { width: 26px; height: 26px; }
.sq h3 { margin-top: 6px; justify-content: flex-start; }
.sq p { margin-top: 4px; }
.sq.here .tile { transform: translateX(4px); }
}
/* B 数字が転がって止まる（各桁がスロットのように回る） */
.reel-num { display: inline-flex; height: 1em; overflow: hidden; line-height: 1; vertical-align: bottom; }
.reel-col { display: flex; flex-direction: column; transition: transform 1.6s cubic-bezier(.2, .9, .25, 1.06); }
.reel-col > span { height: 1em; }
.reel-num.go .reel-col { transform: translateY(-30em); }
/* C カードを配る（画面に入ると、テーブルに配るように1枚ずつ置かれる） */
.js .deal-card[data-reveal] { opacity: 0; transform: translate(var(--fx, -12vw), -40px) rotate(var(--fr, -18deg)); transition: none; }
.js .deal-card[data-reveal].is-in { animation: deal .9s cubic-bezier(.2, .8, .25, 1.08) both; animation-delay: var(--d, 0s); }
.deal-card:nth-child(3n+1) { --fx: -14vw; --fr: -20deg; --tilt: -2.5deg; }
.deal-card:nth-child(3n+2) { --fx: -6vw; --fr: -9deg; --tilt: 2deg; }
.deal-card:nth-child(3n) { --fx: 6vw; --fr: 12deg; --tilt: -1.5deg; }
@keyframes deal {
0% { opacity: 0; transform: translate(var(--fx, -12vw), -40px) rotate(var(--fr, -18deg)); }
70% { opacity: 1; transform: rotate(var(--tilt, 2deg)); }
100% { opacity: 1; transform: none; }
}
.sec:has(.deal-card) { overflow-x: clip; }
.lodu-editing .deal-card[data-reveal] { opacity: 1 !important; transform: none !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) {
.cover .die, .cover img { animation: none; }
.pawn, .sq .tile, .reel-col { transition: none; }
.pawn.hop svg { animation: none; }
.js .deal-card[data-reveal] { opacity: 1; transform: none; animation: none !important; }
}
/* =====================================================
見逃しにくいリンク（2026-10-25）
文字＋下線のリンク（.textlink）を枠線のボタンに。ヘッダーのお問い合わせは塗りのボタンに
===================================================== */
.textlink { position: relative; overflow: hidden; isolation: isolate; gap: 10px; padding: 11px 22px; border: 1px solid currentColor; border-radius: 999px; line-height: 1.5; transition: background .3s, color .3s, border-color .3s; }
.textlink::before { display: none; }
.textlink:hover { background: var(--char); border-color: var(--char); color: var(--on-char); }
.dark .textlink, .band.photo-bg .textlink { color: var(--on-dark); }
.dark .textlink:hover, .band.photo-bg .textlink:hover { background: var(--on-dark); border-color: var(--on-dark); color: var(--icon-ink); }
.plan-ask .textlink { padding: 8px 16px; }
.nav-links a.nav-contact, .nav-links a.nav-contact.active { background: var(--char); border-color: var(--char); color: var(--on-char); }
.nav-links a.nav-contact:hover { background: var(--char-dark); border-color: var(--char-dark); color: var(--on-char); }
@media (max-width: 1080px) { .nav-links a.nav-contact, .nav-links a.nav-contact.active { background: var(--char); color: var(--on-char); } }
/* =====================================================
2026-10-26 段ぞろえ・改行の調整
===================================================== */
/* 並んだカードの各段（見出し・本文など）の高さをそろえる：subgrid */
@media (min-width: 769px) {
.worries { grid-template-rows: auto auto; row-gap: 0; }
.worry { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; }
}
@media (min-width: 1101px) {
.trio:not(.quad) { grid-template-rows: auto auto auto; row-gap: 0; }
.trio:not(.quad) > .trio-item { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
.trio:not(.quad) > .trio-item > .ico { justify-self: start; }
.plans:not(.prices) { grid-template-rows: repeat(8, auto); row-gap: 0; }
.plans:not(.prices) > .plan { display: grid; grid-row: span 8; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
.plans.prices { grid-template-rows: repeat(4, auto); row-gap: 0; }
.plans.prices > .plan { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
.plans > .plan > * { align-self: start; }
.plans > .plan > .plan-specs { align-self: stretch; }
}
.plan-ask:empty { margin: 0; }
/* すごろくのマスの説明：語のまとまりで不自然に改行しない（ふつうの折り返し） */
.sq p { word-break: normal; }
/* LODUについてのメンバー名：入る幅なら1行、入らなければ全員2行にそろえる */
.member { container-type: inline-size; }
.member .e span { display: block; }
@container (min-width: 120px) {
.member .e { white-space: nowrap; letter-spacing: .08em; }
.member .e span { display: inline; }
}
/* サービス紹介のページ内メニュー：チャコールの帯で目立たせる */
.index-nav { background: var(--dark-bg); border-bottom: 0; }
.index-nav a { color: var(--on-dark); }
.index-nav .n { color: var(--on-dark-sub); }
.index-nav a + a, .index-nav a:nth-child(2n+1), .index-nav a:nth-child(n+3) { border-color: var(--on-dark-line); }
.index-nav a::after { bottom: 0; }
/* =====================================================
2026-10-26 ご指摘（添付5・8・9・10・11・12・16）
===================================================== */
/* 添付5 数字の段ぞろえ：項目名が2行になっても、数字の高さをそろえる */
.facts { grid-auto-rows: auto; }
.facts .stat { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 18px; align-content: start; }
/* 添付8・9 料金プランの項目の印：線の太さがずれないよう文字の「−」にそろえ、「＋」も「−」に */
.plan-list li::before, .plan-list li.plus::before { content: "−"; top: 0; left: 0; width: auto; height: auto; background: none; font-size: 13px; font-weight: 400; line-height: 1.8; color: var(--sub); }
/* 添付10・11 ロゴ／合成画像のどちらを見ているかを示す丸2つ（lodu.js が枠の下に足す）。
丸は押せるボタンで、押すとその画像に切り替わる（10/26 クライアント指示）。押せる範囲は24px角、見た目の丸は7px */
.face-dots { display: flex; justify-content: center; gap: 0; margin-top: 8px; }
.face-dot { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%; }
.face-dot i { width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--hair-strong); background: transparent; transition: background-color .4s var(--ease), border-color .4s var(--ease), transform .3s var(--ease); }
.face-dot:hover i { transform: scale(1.3); }
.face-dot:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.face-dot:first-child i, .is-flipped .face-dot:last-child i { background: var(--ink); border-color: var(--ink); }
.is-flipped .face-dot:first-child i { background: transparent; border-color: var(--hair-strong); }
@media (hover: hover) {
.game:hover .face-dot:first-child i, .ph-wrap:has(.ph:hover) .face-dot:first-child i { background: transparent; border-color: var(--hair-strong); }
.game:hover .face-dot:last-child i, .ph-wrap:has(.ph:hover) .face-dot:last-child i { background: var(--ink); border-color: var(--ink); }
}
/* 丸を押して選んだ画像は、カーソルを乗せていても優先する（カードからカーソルが離れると元の動きに戻る） */
.game[data-face="logo"] .ph img.alt, .theme-panel[data-face="logo"] .ph img.alt { opacity: 0; }
.game[data-face="mock"] .ph img.alt, .theme-panel[data-face="mock"] .ph img.alt { opacity: 1; }
.game[data-face="logo"] .ph.logo-frame::after { opacity: 1; }
.game[data-face="mock"] .ph.logo-frame::after { opacity: 0; }
:is(.game, .theme-panel)[data-face="logo"] .face-dots .face-dot:first-child i, :is(.game, .theme-panel)[data-face="mock"] .face-dots .face-dot:last-child i { background: var(--ink); border-color: var(--ink); }
:is(.game, .theme-panel)[data-face="logo"] .face-dots .face-dot:last-child i, :is(.game, .theme-panel)[data-face="mock"] .face-dots .face-dot:first-child i { background: transparent; border-color: var(--hair-strong); }
.game .face-dots + h3, .game .face-dots ~ h3 { margin-top: 18px; }
/* 添付12 開発したゲームのテーマ（And more…） */
.more-themes { margin-top: 88px; }
.more-title { font-family: var(--font-en); font-size: clamp(22px, 2.2vw, 30px); font-weight: 400; color: var(--ink); }
.more-kw { margin-top: 18px; gap: 8px; }
.more-kw li { font-size: 13px; padding: 4px 14px; }
.more-themes + .games-note { margin-top: 40px; }
@media (min-width: 1081px) { .more-themes { margin-top: clamp(40px, 7vh, 88px); } }
/* 添付16 お問い合わせの入力欄：薄い色の枠で囲み、どこに書けばよいか分かるように（地の色は変えない＝例文の文字のコントラストを保つ） */
.field input, .field select, .field textarea { padding: 12px 14px 13px; border: 1px solid var(--hair-strong); border-radius: 8px; }
.field select { padding-right: 34px; background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--char); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { box-shadow: 0 0 0 1px var(--char); }
.field.is-error input, .field.is-error select, .field.is-error textarea { border-color: var(--err); }
/* ヘッダーの小項目（2026-10-26）: 組み立ては lodu.js。PCはカーソルを乗せる・キーボードで移ると開く */
.nav-item { position: relative; }
.nav-sub { display: none; }
@media (min-width: 1081px) {
.nav-sub { display: flex; flex-direction: column; position: absolute; top: calc(100% + 14px); left: -18px; z-index: 5; min-width: 220px; padding: 8px 0; background: var(--bg); border: 1px solid var(--hair); border-radius: 12px; box-shadow: 0 18px 40px -22px var(--lift-shadow);
opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .25s var(--ease), transform .3s var(--ease), visibility .25s; }
.nav-sub::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; } /* 大項目から小項目へカーソルを動かす間に閉じないための橋 */
.nav-item:hover .nav-sub, .nav-item:focus-within .nav-sub { opacity: 1; visibility: visible; transform: none; }
.nav-item.is-closed .nav-sub { opacity: 0; visibility: hidden; }
.nav-links .nav-sub a { display: block; padding: 11px 18px; font-size: 13px; letter-spacing: 0.08em; white-space: nowrap; color: var(--ink); }
.nav-links .nav-sub a::after { display: none; }
.nav-links .nav-sub a + a { border-top: 1px solid var(--hair); }
.nav-links .nav-sub a:hover, .nav-links .nav-sub a:focus-visible { background: var(--soft); }
}
@media (max-width: 1080px) {
.nav-item > a::before { content: ""; order: 3; flex: none; width: 8px; height: 8px; margin-left: 12px; border-right: 1.5px solid var(--sub); border-bottom: 1.5px solid var(--sub); transform: translateY(-3px) rotate(45deg); transition: transform .3s var(--ease); align-self: center; }
.nav-item.is-open > a::before { transform: translateY(2px) rotate(-135deg); }
.nav-item > a .en { margin-left: auto; } /* 矢印を足しても英字を右に寄せたままにする */
.nav-item.is-open .nav-sub { display: flex; flex-direction: column; padding: 4px 0 10px 14px; border-bottom: 1px solid var(--hair); }
.nav-links .nav-sub a { font-size: 15px; padding: 12px 2px; border-bottom: 0; color: var(--ink); }
.nav-links .nav-sub a + a { border-top: 1px dashed var(--hair); }
}
/* =====================================================
ゲームの仕様（コンテンツの一覧・詳細ページ共通）と、ゲーム詳細ページ（game-*.html・2026-10-26）
ページは tools/games/build-games.mjs が作る
===================================================== */
.game-spec { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
/* 「プレイ時間」などの見出しは途中で折らない。アイコンは枠の幅で出し分ける（画面幅で決めると、幅によって見出しが1字ずつ折れていた・10/26） */
.game-spec > div { container-type: inline-size; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 0; align-items: center; padding: 10px 10px 10px 8px; border: 1px solid var(--hair); border-radius: 12px; }
.game-spec .ico { grid-row: span 2; margin-right: 8px; }
.game-spec dt, .game-spec dd { grid-column: 2; }
.game-spec dt { font-size: 12px; letter-spacing: 0.04em; color: var(--sub); line-height: 1.5; white-space: nowrap; }
.game-spec dd { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; line-height: 1.5; color: var(--ink); white-space: nowrap; }
@container (max-width: 104px) { .game-spec .ico { display: none; } }
/* コンテンツの一覧：説明の下に仕様、その下に詳細ボタン（行ごとに高さをそろえるため、仕様から下を下端に寄せる） */
.games .game-spec { margin-top: auto; padding-top: 22px; }
.games .game .credit { margin-top: 0; }
.game-more { margin-top: 18px; align-self: flex-start; }
/* 詳細ページ：見出し */
.gd-head { padding-top: clamp(120px, 12vw, 170px); }
.gd-head .breadcrumb { margin-bottom: clamp(28px, 4vw, 48px); }
.gd-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.gd-visual { order: 2; position: relative; z-index: 1; } /* 画像を右に置き、見出しの飾りのストロークは画像の後ろへ */
.gd-intro h1 { margin-top: 22px; font-size: clamp(22px, 2.4vw, 30px); }
.gd-intro .kw { margin-top: 18px; }
.gd-intro .lead { margin-top: 20px; }
.gd-spec { margin-top: 28px; max-width: 520px; }
.gd-intro .credit { margin-top: 0; padding-top: 22px; }
.gd-actions { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.js .gd-head .gd-intro > *, .js .gd-head .gd-visual { opacity: 0; transform: translateY(24px); animation: rise 1.2s var(--ease) forwards; }
.js .gd-head .gd-visual { animation-delay: .1s; }
.js .gd-head .gd-intro > :nth-child(2) { animation-delay: .25s; } .js .gd-head .gd-intro > :nth-child(3) { animation-delay: .32s; }
.js .gd-head .gd-intro > :nth-child(4) { animation-delay: .4s; } .js .gd-head .gd-intro > :nth-child(n+5) { animation-delay: .48s; }
/* 詳細ページ：本文 */
.gd-text { font-size: 14.5px; line-height: 2.2; letter-spacing: 0.06em; }
.gd-text + .gd-text { margin-top: 18px; }
.gd-note { margin-top: 22px; padding: 18px 22px; border-radius: 14px; background: var(--soft); font-size: 13.5px; line-height: 2; letter-spacing: 0.05em; color: var(--ink-2); }
.gd-howto + .gd-howto { margin-top: 48px; }
.gd-mode { display: inline-flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 700; letter-spacing: 0.1em; }
.gd-mode::before { content: ""; width: 28px; height: 6px; border-radius: 3px; background: var(--g-c); }
.gd-goal { margin-top: 14px; font-size: 13.5px; line-height: 2; letter-spacing: 0.05em; color: var(--sub); }
.gd-goal .k { display: inline-block; margin-right: 12px; padding: 1px 10px; border: 1px solid var(--hair-strong); border-radius: 999px; font-size: 12px; color: var(--ink); }
.gd-steps { list-style: none; counter-reset: step; padding: 0; margin: 20px 0 0; border-top: 1px solid var(--hair); }
.gd-steps li { counter-increment: step; position: relative; padding: 18px 4px 18px 56px; border-bottom: 1px solid var(--hair); font-size: 14px; line-height: 2; letter-spacing: 0.05em; }
.gd-steps li::before { content: counter(step); position: absolute; left: 4px; top: 18px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-en); font-size: 14px; color: var(--icon-ink); background: var(--g-a); }
.gd-steps li:nth-child(3n+2)::before { background: var(--g-d); } .gd-steps li:nth-child(3n)::before { background: var(--g-e); }
.gd-parts { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.gd-parts li { padding: 8px 16px; border: 1px solid var(--hair-strong); border-radius: 999px; font-size: 13px; letter-spacing: 0.05em; line-height: 1.7; }
.gd-files { list-style: none; padding: 0; margin: 22px 0 0; border-top: 1px solid var(--hair); }
.gd-files li { display: flex; align-items: center; gap: 12px; padding: 14px 4px; border-bottom: 1px solid var(--hair); font-size: 14px; letter-spacing: 0.05em; }
.gd-files .ext { margin-left: auto; font-size: 12px; letter-spacing: 0.1em; color: var(--sub); }
.gd-sponsors { margin-top: 28px; }
.gd-sponsors h3 { font-size: 14px; font-weight: 700; letter-spacing: 0.1em; }
.gd-sponsors p { margin-top: 10px; font-size: 13px; line-height: 2.1; letter-spacing: 0.05em; color: var(--ink-2); }
.gd-more { margin-top: 28px; }
.gd-pager-sec { padding-top: 0; }
.gd-pager { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; border-top: 1px solid var(--hair); padding-top: 32px; }
.gd-pager a { color: var(--ink); text-decoration: none; font-size: 14px; letter-spacing: 0.06em; }
.gd-pager .en { display: block; font-size: 12px; color: var(--sub); letter-spacing: 0.12em; }
.gd-pager .gd-next { text-align: right; }
.gd-pager .gd-all { padding: 10px 22px; border: 1px solid currentColor; border-radius: 999px; font-size: 13px; }
@media (max-width: 900px) {
.gd-hero { grid-template-columns: 1fr; }
.gd-visual { order: 0; }
.gd-pager { grid-template-columns: 1fr 1fr; }
.gd-pager .gd-all { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
}
@media (max-width: 500px) {
.game-spec { grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.game-spec > div { padding: 10px 8px; }
.gd-steps li { padding-left: 50px; }
}
@media (prefers-reduced-motion: reduce) { .js .gd-head .gd-intro > *, .js .gd-head .gd-visual { animation: none; opacity: 1; transform: none; } }
/* ---------- 教材ダウンロード申請（download.html・2026-10-26） ---------- */
.dl-wrap { max-width: 920px; }
.dl-step { border: 0; padding: 0; margin: 0 0 72px; min-width: 0; }
.dl-step legend { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 28px; padding: 0; font-size: 18px; font-weight: 700; letter-spacing: 0.1em; }
.dl-step legend .n { font-family: var(--font-en); font-weight: 400; font-size: 13px; letter-spacing: 0.16em; color: var(--sub); }
.dl-step legend small { font-size: 12px; font-weight: 500; letter-spacing: 0.08em; color: var(--sub); }
.dl-picks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.dl-pick { position: relative; display: grid; grid-template-columns: 96px 1fr auto; align-items: center; gap: 16px; padding: 12px 16px 12px 12px; border: 1px solid var(--hair-strong); border-radius: 16px; cursor: pointer; transition: border-color .3s, background-color .3s, transform .3s var(--ease); }
.dl-pick:hover { border-color: var(--char); }
.dl-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.dl-thumb { aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: var(--soft); }
.dl-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dl-name { font-size: 13.5px; font-weight: 700; line-height: 1.7; letter-spacing: 0.06em; }
.dl-name small { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; color: var(--sub); letter-spacing: 0.06em; }
.dl-check { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--hair-strong); display: grid; place-items: center; transition: background-color .3s, border-color .3s; }
.dl-check::after { content: ""; width: 9px; height: 5px; border-left: 2px solid var(--on-char); border-bottom: 2px solid var(--on-char); transform: translateY(-1px) rotate(-45deg); opacity: 0; }
.dl-pick:has(input:checked) { border-color: var(--char); background: var(--soft); }
.dl-pick:has(input:checked) .dl-check { background: var(--char); border-color: var(--char); }
.dl-pick:has(input:checked) .dl-check::after { opacity: 1; }
.dl-pick:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.dl-err { margin-top: 14px; font-size: 13px; color: var(--err); letter-spacing: 0.06em; }
.dl-sub { margin-top: 18px; font-size: 12.5px; line-height: 2; letter-spacing: 0.06em; color: var(--sub); }
.dl-sub a { color: var(--ink); text-underline-offset: 4px; }
.dl-orgs > span { display: block; }
.dl-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.dl-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.dl-chip span { display: inline-block; padding: 8px 16px; border: 1px solid var(--hair-strong); border-radius: 999px; font-size: 13px; font-weight: 400; letter-spacing: 0.06em; cursor: pointer; transition: background-color .3s, color .3s, border-color .3s; }
.dl-chip span:hover { border-color: var(--char); }
.dl-chip input:checked + span { background: var(--char); border-color: var(--char); color: var(--on-char); }
.dl-chip input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.dl-terms { max-height: 280px; overflow-y: auto; padding: 22px 24px; border: 1px solid var(--hair-strong); border-radius: 12px; font-size: 12.5px; line-height: 2; letter-spacing: 0.04em; color: var(--ink-2); }
.dl-terms h3 { font-size: 14px; font-weight: 700; letter-spacing: 0.08em; color: var(--ink); }
.dl-terms h4 { margin-top: 18px; font-size: 13px; font-weight: 700; color: var(--ink); }
.dl-terms p { margin-top: 6px; }
.dl-terms ol { margin: 6px 0 0; padding-left: 2.2em; list-style: decimal; }
.dl-terms-end { margin-top: 18px; text-align: right; }
.dl-terms + .consent { margin-top: 22px; }
.dl-thanks .dl-links { margin-top: 28px; display: grid; gap: 28px; }
.dl-group h3 { font-size: 14px; font-weight: 700; letter-spacing: 0.08em; margin-bottom: 10px; }
.dl-file { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; margin-top: 8px; border: 1px solid var(--hair-strong); border-radius: 12px; color: var(--ink); text-decoration: none; font-size: 14px; letter-spacing: 0.06em; transition: background-color .3s, border-color .3s; }
.dl-file:hover { border-color: var(--char); background: var(--soft); }
.dl-file .ext { font-family: var(--font-en); font-size: 12px; letter-spacing: 0.12em; color: var(--sub); }
.dl-file .ext::after { content: " ↓"; }
@media (max-width: 700px) {
.dl-picks { grid-template-columns: 1fr; }
.dl-pick { grid-template-columns: 84px 1fr auto; }
}
@media (prefers-reduced-motion: reduce) { .dl-pick, .dl-check, .dl-chip span, .dl-file { transition: none; } }
/* コンテンツの一覧：横に並んだカードの「画像・丸・名前・キーワード・説明・仕様・ボタン・クレジット」を段ごとにそろえる（subgrid）。
これで説明と仕様の間の余計な空きをなくし、PCでは1段が1画面に収まるよう余白を詰める（10/26 ご指摘）。
互い違いの段差は、そろえた段を崩さないよう margin ではなく位置（top）でずらす */
.games > .game { display: grid; grid-template-rows: subgrid; grid-row: span 8; row-gap: 0; align-content: start; margin-top: 0; position: relative; }
.games > .game > .ph, .games > .game > .flip-btn { grid-row: 1; }
.games > .game > .flip-btn { align-self: end; justify-self: end; margin: 0 10px 10px 0; }
.games > .game > .ph.shape-br + .flip-btn { margin: 0 42px 42px 0; }
.games > .game > .face-dots { grid-row: 2; }
.games > .game > h3 { grid-row: 3; align-self: start; }
.games > .game > .kw { grid-row: 4; align-self: start; align-content: flex-start; }
.games > .game > .desc { grid-row: 5; align-self: start; }
.games > .game > .game-spec { grid-row: 6; align-self: start; margin-top: 0; padding-top: 16px; }
.games > .game > .game-more { grid-row: 7; align-self: start; justify-self: start; margin-top: 14px; }
.games > .game > .credit { grid-row: 8; align-self: start; margin-top: 0; padding-top: 12px; }
.games > .game > h3 { margin-top: 14px; }
.games > .game > .desc { margin-top: 10px; line-height: 1.95; }
.games > .game > .kw { margin-top: 10px; }
.games > :nth-child(n) { margin-top: 0; }
@media (min-width: 1101px) {
.games { row-gap: clamp(40px, 6vh, 64px); }
.games > :nth-child(2n) { top: 40px; }
.games > .game > .face-dots { margin-top: 4px; }
.games .game-spec > div { padding: 8px 8px; }
.games .kw li { padding: 3px 10px; letter-spacing: 0.04em; } /* キーワードが2段に折れて、ほかのカードに空きができないように */
}
@media (max-width: 1100px) and (min-width: 601px) { .games > :nth-child(2n) { top: 80px; } }
@media (max-width: 600px) { .games > :nth-child(2n) { top: 0; } }
@media (hover: none) and (max-width: 600px) { .games > .game > .ph.shape-br + .flip-btn { margin: 0 10px 10px 0; } }
/* =====================================================
ヘッダーの「資料請求」（10/26・案A）
塗りの「お問い合わせ」の隣に、枠線のボタン。スマホのメニューでは「お問い合わせ」の上に並ぶ
===================================================== */
.nav-links a.nav-request { flex-direction: row; align-items: center; border: 1px solid var(--char); border-radius: 999px; padding: 9px 20px; background: var(--bg); color: var(--char); font-weight: 500; transition: background .3s, color .3s; }
.nav-links a.nav-request::after { display: none; }
.nav-links a.nav-request:hover, .nav-links a.nav-request.active { background: var(--char); color: var(--on-char); }
.nav-links a.nav-request + a.nav-contact { margin-left: -24px; } /* 2つのボタンの間を10pxに（項目の間隔34px − 24px） */
@media (max-width: 1320px) and (min-width: 1181px) {
/* ボタンが1つ増えた分、項目の間隔とボタンの余白を詰める（右端の昼夜スイッチの外側に、本来の余白を残すため） */
.nav-links { gap: 18px; }
.nav-links a.nav-request { padding: 9px 16px; }
.nav-links a.nav-contact { padding-left: 18px; padding-right: 18px; }
.nav-links a.nav-request + a.nav-contact { margin-left: -8px; }
}
@media (max-width: 1180px) and (min-width: 1081px) {
.nav-links { gap: 12px; }
.nav-links a.nav-request { padding: 9px 12px; }
.nav-links a.nav-contact { padding-left: 14px; padding-right: 14px; }
.nav-links a.nav-request + a.nav-contact { margin-left: -2px; }
}
@media (max-width: 1080px) {
.nav-links a.nav-request { margin-top: 32px; justify-content: center; padding: 16px; background: transparent; }
.nav-links a.nav-request + a.nav-contact { margin-left: 0; margin-top: 12px; }
}
/* =====================================================
資料請求ページ（request.html・10/26・案A）
PCは左に資料（スクロールしても付いてくる）、右にフォーム。980px以下は縦に並ぶ
===================================================== */
.req-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.req-docs { position: sticky; top: 110px; }
.req-docs .side-t { margin-bottom: 18px; font-size: 15px; font-weight: 700; letter-spacing: 0.1em; }
.req-docs .docs { display: grid; gap: 18px; }
.doc { position: relative; display: grid; grid-template-columns: 156px 1fr; gap: 20px; align-items: start; padding: 16px 52px 16px 16px; border: 1px solid var(--hair-strong); border-radius: 16px; cursor: pointer; transition: border-color .3s, box-shadow .3s; }
.doc:hover { border-color: var(--char); }
.doc input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.doc-cover { display: grid; align-content: end; aspect-ratio: 16 / 9; padding: 10px 12px; border-radius: 10px; background: var(--g, var(--g-a)); color: var(--icon-ink); overflow: hidden; }
.doc-cover b { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; line-height: 1.5; white-space: nowrap; }
.doc-cover span { font-family: var(--font-en); font-size: 12px; letter-spacing: 0.12em; white-space: nowrap; }
.doc h3 { font-size: 15px; font-weight: 700; letter-spacing: 0.08em; line-height: 1.7; }
.doc .meta { margin-top: 4px; font-size: 12px; letter-spacing: 0.06em; color: var(--sub); }
.doc .for { margin-top: 10px; font-size: 13px; line-height: 1.9; }
.doc .for em { margin-right: 6px; font-style: normal; font-weight: 700; }
.doc ul { margin: 8px 0 0; padding-left: 1.2em; list-style: disc; font-size: 12.5px; line-height: 1.9; color: var(--ink-2); }
/* 表紙の画像（10/26：本物の表紙。縦横比はそれぞれの形のまま） */
.doc h3 .nobr { white-space: nowrap; } /* 「（PDF 16:9比）」の途中で折らない */
.doc-cover.is-img { display: block; width: 100%; height: auto; aspect-ratio: auto; padding: 0; border: 1px solid var(--hair); background: none; }
.doc .tick { position: absolute; top: 16px; right: 16px; display: grid; place-content: center; width: 22px; height: 22px; border: 1.5px solid var(--char); border-radius: 6px; }
.doc .tick::before { content: ""; width: 10px; height: 5px; margin-top: -3px; border-left: 2px solid var(--on-char); border-bottom: 2px solid var(--on-char); transform: rotate(-45deg) scale(0); transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.doc:has(input:checked) { border-color: var(--char); box-shadow: inset 0 0 0 1px var(--char); }
.doc:has(input:checked) .tick { background: var(--char); }
.doc:has(input:checked) .tick::before { transform: rotate(-45deg) scale(1); }
.doc:has(input:focus-visible) { outline: 2px solid var(--char); outline-offset: 3px; }
.label-tmp { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--g-f); color: var(--icon-ink); font-size: 12px; font-weight: 500; letter-spacing: 0.06em; vertical-align: middle; } /* 資料ができたら消す（公開前） */
.req-form .opt { margin-left: 8px; font-size: 12px; font-weight: 500; letter-spacing: 0.06em; color: var(--sub); }
.chips-field { display: flex; flex-direction: column; gap: 12px; margin-bottom: 40px; font-size: 12.5px; font-weight: 500; letter-spacing: 0.14em; color: var(--ink); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips label { position: relative; cursor: pointer; }
.chips input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chips span { display: inline-block; padding: 8px 16px; border: 1px solid var(--hair-strong); border-radius: 999px; font-size: 13px; font-weight: 400; letter-spacing: 0.06em; color: var(--ink); transition: background .25s, color .25s, border-color .25s; }
.chips input:checked + span { background: var(--char); border-color: var(--char); color: var(--on-char); }
.chips input:focus-visible + span { outline: 2px solid var(--char); outline-offset: 2px; }
.req-form .contact-note { margin: -16px 0 28px; font-size: 12.5px; line-height: 2; color: var(--sub); }
.req-form .dl-err { margin: 0 0 16px; }
.req-docs .dl-err { margin-top: 12px; }
.req-next { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--hair); }
.req-next p { font-size: 13.5px; line-height: 2; color: var(--sub); }
.req-next .actions { margin-top: 16px; }
@media (max-width: 980px) { .req-wrap { grid-template-columns: minmax(0, 1fr); } .req-docs { position: static; } }
@media (max-width: 600px) {
.doc { grid-template-columns: minmax(0, 1fr); }
.doc-cover { max-width: 240px; }
.doc ul { display: none; } /* スマホではカードを短くして、フォームまでのスクロールを減らす */
}
/* お問い合わせページ：資料請求への案内 */
.req-banner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px 28px; max-width: 760px; margin-top: 40px; padding: 22px 26px; border: 1px solid var(--hair-strong); border-radius: 16px; background: var(--bg); }
.req-banner p { font-size: 14px; line-height: 1.9; letter-spacing: 0.06em; }
.req-banner p small { display: block; font-size: 12.5px; color: var(--sub); }
/* フォームのいたずら対策（10/27）: ロボットだけが埋める欄。人には見えず、読み上げにも出さない */
.hp-field { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
/* メールアドレスの打ち間違いの知らせ（11/2） */
.email-suggest { display: block; margin-top: 2px; font-size: 13px; font-weight: 400; line-height: 1.8; letter-spacing: 0.04em; color: var(--sub); word-break: keep-all; overflow-wrap: anywhere; }
.email-suggest[hidden] { display: none; }