/* ============================================================
   style.css — 株式会社さんとら COMPANY PROFILE
   設計方針:
   - 各 .page = A4縦(210:297)。container-type:inline-size を持ち、
     内部の文字・余白は cqw(ページ幅の%) で指定 → 画面でも印刷でも比率が完全一致。
   - 配色は白・黒・グレー＋アクセント1色(--accent)。
   - アクセントカラーは settings.js から JS で上書きされる。
   ============================================================ */

:root {
  --paper: #ffffff;
  --ink: #14110f;
  --ink-soft: #55504b;
  --line: #e4e0da;
  --line-strong: #1a1714;
  --gray-bg: #f4f2ee;
  --accent: #ff3b14;        /* settings.js で上書き */
  --accent-dark: #d62c08;

  --serif: 'Cormorant Garamond', 'Times New Roman', serif;
  --grotesk: 'Archivo', 'Helvetica Neue', Arial, 'Zen Kaku Gothic New', sans-serif;
  --sans: 'Zen Kaku Gothic New', -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN',
          'Noto Sans JP', 'Yu Gothic', Meiryo, sans-serif;

  --page-max: 840px;
}

body {
  font-family: var(--sans);
  color: var(--ink);
  background: #d9d6d0;
  font-weight: 400;
  letter-spacing: .01em;
}

/* ============================ 共通レイアウト ============================ */
.sheet {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  padding: 96px 16px 80px;
}

.page {
  position: relative;
  width: 100%;
  max-width: var(--page-max);
  aspect-ratio: 210 / 297;
  background: var(--paper);
  container-type: inline-size;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(20,17,15,.16);
  isolation: isolate;
}

/* ページ内の標準パディング枠 */
.pad {
  position: absolute;
  inset: 0;
  padding: 5.5cqw 8.5cqw 4cqw;
  display: flex;
  flex-direction: column;
}

/* ページ番号 */
.folio {
  position: absolute;
  bottom: 4.2cqw;
  left: 8.5cqw;
  right: 8.5cqw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--grotesk);
  font-size: 2.1cqw;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.folio .num { font-variant-numeric: tabular-nums; }

/* セクションのラベル（章番号＋英題） */
.eyebrow {
  display: flex;
  align-items: baseline;
  gap: 2.4cqw;
  font-family: var(--grotesk);
  letter-spacing: .22em;
  text-transform: uppercase;
}
.eyebrow .idx { color: var(--accent); font-weight: 700; font-size: 2.4cqw; }
.eyebrow .en  { font-size: 2.4cqw; font-weight: 600; color: var(--ink-soft); }
.eyebrow::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
  align-self: center; margin-left: 1cqw;
}

/* 大見出し */
.headline {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 8.2cqw;
  line-height: 1.28;
  letter-spacing: .01em;
}
.headline .accent { color: var(--accent); }
.display {
  font-family: var(--grotesk);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.01em;
  line-height: .92;
}
.lede { font-size: 3cqw; line-height: 1.95; color: var(--ink-soft); font-weight: 400; }
.body-txt { font-size: 2.7cqw; line-height: 2.05; color: var(--ink-soft); }
.body-txt + .body-txt { margin-top: 1.6cqw; }

/* ============================ P01 表紙 ============================ */
#p01 { background: var(--ink); color: #fff; overflow: hidden; }
#p01 .pad { padding: 8cqw; }
.cover-top { display: flex; justify-content: space-between; align-items: flex-start; }
.cover-brand { font-family: var(--grotesk); font-weight: 700; letter-spacing: .04em; }
.cover-brand .ja { font-family: var(--sans); font-size: 2.5cqw; letter-spacing: .12em; display:block; }
.cover-brand .en { font-size: 3.4cqw; letter-spacing: .18em; text-transform: uppercase; }
.cover-edition {
  font-family: var(--grotesk); font-size: 2.1cqw; letter-spacing: .3em;
  text-transform: uppercase; text-align: right; line-height: 1.7; color: rgba(255,255,255,.7);
}
.cover-edition b { color: var(--accent); font-weight: 700; display:block; }

.cover-mid { margin-top: auto; margin-bottom: auto; }
.cover-copy {
  font-family: var(--sans); font-weight: 700;
  font-size: 9.6cqw; line-height: 1.3; letter-spacing: .01em;
}
.cover-copy .accent { color: var(--accent); }
.cover-copy .en {
  display: block; font-family: var(--grotesk); font-weight: 800; text-transform: uppercase;
  font-size: 4.6cqw; letter-spacing: .02em; color: rgba(255,255,255,.55); margin-top: 3cqw; line-height:1;
}

.cover-photostrip {
  position: absolute; inset-inline: 0; bottom: 0; height: 40cqw;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .8cqw;
  opacity: .32; z-index: 0;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 55%, #000 100%);
          mask-image: linear-gradient(180deg, transparent, #000 55%, #000 100%);
}
.cover-photostrip img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.1) brightness(.55); }

.cover-bottom { display: flex; justify-content: space-between; align-items: flex-end; }
.cover-bottom .tags {
  font-family: var(--grotesk); font-size: 1.9cqw; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.6); line-height: 1.9;
}
.cover-bottom .tags span::after { content: "／"; color: var(--accent); margin: 0 .5em; }
.cover-bottom .tags span:last-child::after { content: ""; }
.cover-rule { position:absolute; left:8cqw; right:8cqw; bottom:16cqw; height:2px; background: linear-gradient(90deg,var(--accent),transparent); }

/* ============================ P02 私たちについて ============================ */
.big-statement {
  font-family: var(--sans); font-weight: 700;
  font-size: 7.4cqw; line-height: 1.42; letter-spacing: .005em; margin-top: 5cqw;
}
.big-statement .accent { color: var(--accent); }
.about-cols { margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 5cqw; }
.about-cols .body-txt { font-size: 2.55cqw; }
.about-mark {
  position: absolute; right: 7cqw; top: 30cqw; font-family: var(--serif);
  font-style: italic; font-size: 4cqw; color: var(--line); pointer-events:none;
}

/* ============================ P03 代表メッセージ ============================ */
.msg-grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: 4.5cqw; margin-top: 4cqw; flex: 1; align-items: start; }
.msg-portrait {
  align-self: start; width: 100%; aspect-ratio: 4/5; background: var(--gray-bg);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  border: 1px solid var(--line);
}
.msg-portrait img { width: 100%; height: 100%; object-fit: cover; }
.msg-portrait .ph { font-family: var(--grotesk); font-size: 1.9cqw; letter-spacing:.18em; color:#b7b1a8; text-transform:uppercase; text-align:center; line-height:1.6; }
.msg-lead { font-family: var(--sans); font-weight: 700; font-size: 3.9cqw; line-height: 1.42; margin-bottom: 2.2cqw; }
.msg-lead .accent { color: var(--accent); }
.msg-grid .body-txt { font-size: 2.22cqw; line-height: 1.76; }
.msg-grid .body-txt + .body-txt { margin-top: 1cqw; }
.msg-sign { margin-top: 2.4cqw; display:flex; align-items:baseline; gap:2cqw; }
.msg-sign .role { font-size: 2.3cqw; color: var(--ink-soft); letter-spacing:.1em; }
.msg-sign .name { font-size: 3.6cqw; font-weight: 700; letter-spacing:.06em; }
.msg-sign .en { font-family: var(--serif); font-style: italic; font-size: 3cqw; color: var(--ink-soft); margin-left:auto; }

/* ============================ P04 事業ネットワーク図 ============================ */
.net-wrap { flex:1; display:flex; align-items:center; justify-content:center; margin-top: 2cqw; }
.net {
  position: relative; width: 66cqw; height: 66cqw; margin: 0 auto;
}
.net-core {
  position: absolute; inset: 26%; border-radius: 50%;
  background: var(--ink); color: #fff; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; z-index: 3;
}
.net-core .en { font-family: var(--grotesk); font-weight: 800; text-transform:uppercase; font-size: 3cqw; letter-spacing:.02em; line-height:1.1; }
.net-core .ja { font-size: 1.9cqw; color: rgba(255,255,255,.65); margin-top:.6cqw; letter-spacing:.14em; }
.net-core .accent { color: var(--accent); }
.net-node {
  position: absolute; width: 19cqw; height: 19cqw; border-radius: 50%;
  background: var(--paper); border: 1.5px solid var(--line-strong);
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  transform: translate(-50%,-50%); z-index: 2;
}
.net-node .en { font-family: var(--grotesk); font-weight: 700; font-size: 2cqw; text-transform:uppercase; letter-spacing:.02em; }
.net-node .ja { font-size: 1.7cqw; color: var(--ink-soft); margin-top:.3cqw; }
.net-node.on { background: var(--accent); border-color: var(--accent); color:#fff; }
.net-node.on .ja { color: rgba(255,255,255,.85); }
.net-svg { position:absolute; inset:0; width:100%; height:100%; z-index:1; overflow:visible; }
.net-svg line { stroke: var(--line); stroke-width: 1.2; }
.net-note { position:absolute; bottom:0; left:0; right:0; text-align:center; font-size:2.2cqw; color:var(--ink-soft); }

/* ============================ P05–P08 事業ページ ============================ */
.biz-hero {
  margin: 4cqw 0; width: 100%; aspect-ratio: 16/7; overflow:hidden; background: var(--gray-bg);
}
.biz-hero img { width:100%; height:100%; object-fit: cover; }
.biz-hero.duo img { filter: grayscale(.15) contrast(1.03); }
.biz-lead { font-family: var(--sans); font-weight:700; font-size: 5.4cqw; line-height:1.4; margin-top:1cqw; }
.biz-lead .accent { color: var(--accent); }
.biz-body { margin-top: 2.4cqw; }
.chips { display: flex; flex-wrap: wrap; gap: 1.4cqw; margin-top: auto; }
.chip {
  font-family: var(--sans); font-size: 2.15cqw; font-weight: 500;
  padding: 1.1cqw 2.4cqw; border: 1px solid var(--line-strong); border-radius: 100px;
}
.chip.solid { background: var(--ink); color:#fff; border-color: var(--ink); }

/* システム表(P07) */
.sys-list { margin-top: 3cqw; display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1.5px solid var(--line-strong); }
.sys-item { padding: 2.2cqw 0; border-bottom: 1px solid var(--line); display:flex; gap: 1.6cqw; align-items:baseline; }
.sys-item:nth-child(odd) { padding-right: 3cqw; }
.sys-item:nth-child(even){ padding-left: 3cqw; border-left: 1px solid var(--line); }
.sys-item .dot { width: 1.4cqw; height:1.4cqw; border-radius:50%; background:var(--accent); flex:none; transform: translateY(.3cqw); }
.sys-item .n { font-weight:700; font-size:2.55cqw; }
.sys-item .d { font-size: 2.05cqw; color: var(--ink-soft); margin-top:.3cqw; line-height:1.6; }

/* 飲食 店舗(P08) */
.shops { display:grid; grid-template-columns: repeat(3,1fr); gap: 3cqw; margin-top: auto; }
.shop { }
.shop-photo { width:100%; aspect-ratio: 4/5; background: var(--gray-bg); border:1px solid var(--line); overflow:hidden; display:flex; align-items:center; justify-content:center; }
.shop-photo img { width:100%; height:100%; object-fit:cover; }
.shop-photo .ph { font-family:var(--grotesk); font-size:1.8cqw; letter-spacing:.18em; color:#b7b1a8; }
.shop .name { font-weight:700; font-size:3cqw; margin-top:1.6cqw; letter-spacing:.04em; }
.shop .area { font-size:2cqw; color:var(--ink-soft); margin-top:.4cqw; }

/* ============================ P09 強み ============================ */
.strengths { display:grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 4cqw; flex:1; }
.strength { padding: 3.2cqw 3.2cqw; border-top: 1.5px solid var(--line-strong); position:relative; }
.strength:nth-child(even){ border-left: 1px solid var(--line); }
.strength .no { font-family: var(--grotesk); font-weight: 800; font-size: 5.2cqw; color: var(--accent); line-height:1; }
.strength .t { font-weight:700; font-size: 3.1cqw; margin: 1.6cqw 0 1.2cqw; letter-spacing:.02em; }
.strength .d { font-size: 2.15cqw; line-height: 1.78; color: var(--ink-soft); }

/* ============================ P10 進め方 ============================ */
.flow { margin-top: 5cqw; flex:1; display:flex; flex-direction:column; justify-content:center; gap: 0; }
.flow-step { display:grid; grid-template-columns: 8cqw 1fr; gap: 3cqw; align-items:center; padding: 2.4cqw 0; border-bottom:1px solid var(--line); }
.flow-step:first-child { border-top:1.5px solid var(--line-strong); }
.flow-step .no { font-family:var(--grotesk); font-weight:800; font-size: 5cqw; color: var(--line-strong); line-height:1; }
.flow-step .en { font-family: var(--grotesk); font-weight:700; font-size: 3.6cqw; text-transform:uppercase; letter-spacing:.03em; }
.flow-step .ja { font-size: 2.3cqw; color: var(--ink-soft); margin-top:.3cqw; }
.flow-step .en .accent { color: var(--accent); }
.flow-loop { margin-top: 3cqw; display:flex; align-items:center; gap:1.6cqw; font-size:2.3cqw; color:var(--ink-soft); }
.flow-loop svg { width: 4cqw; height:4cqw; flex:none; }
.flow-loop b { color: var(--ink); font-weight:700; }

/* ============================ P11–P13 実績 ============================ */
.works-head { display:flex; justify-content:space-between; align-items:flex-end; }
.works-cat-title { font-family: var(--grotesk); font-weight:800; text-transform:uppercase; font-size: 5.6cqw; letter-spacing:-.01em; margin-top:2cqw; }
.works-cat-title .accent { color: var(--accent); }
.works-grid { margin-top: 3.4cqw; display:grid; grid-template-columns: 1fr 1fr; gap: 3cqw 3cqw; }
.wcard { }
.wcard-thumb { width:100%; aspect-ratio: 16/10; overflow:hidden; background: var(--gray-bg); position:relative; border:1px solid var(--line); }
.wcard-thumb img { width:100%; height:100%; object-fit: cover; transition: transform .6s ease; }
.wcard.is-link:hover .wcard-thumb img { transform: scale(1.05); }
.wcard-thumb .ph { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; padding:2cqw; font-family:var(--grotesk); font-weight:700; font-size:2.4cqw; color:#fff; letter-spacing:.02em; }
.wcard .cats { display:flex; gap:1cqw; flex-wrap:wrap; margin-top:1.6cqw; }
.wcard .cats span { font-family:var(--grotesk); font-size:1.65cqw; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); font-weight:700; }
.wcard .wt { font-weight:700; font-size:2.7cqw; margin-top:.8cqw; letter-spacing:.01em; }
.wcard .wd { font-size:1.95cqw; line-height:1.7; color:var(--ink-soft); margin-top:.6cqw; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.wcard.is-link { cursor:pointer; }
.works-more {
  margin-top: auto; display:flex; align-items:center; justify-content:space-between;
  gap:3cqw; padding-top: 3cqw; border-top:1px solid var(--line);
}
.works-more .txt { font-size:2.3cqw; color:var(--ink-soft); flex:1; }
.works-more .txt b { color:var(--ink); font-weight:700; }
.works-more .qr { display:flex; align-items:center; gap:2cqw; flex:none; }
.works-more .qr svg, .works-more .qr img { width: 11cqw; height:11cqw; flex:none; background:#fff; }
.works-more .qr .lbl { font-family:var(--grotesk); font-size:1.7cqw; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); text-align:right; line-height:1.5; }

/* ============================ P14 数字 ============================ */
.nums { margin-top: 5cqw; display:grid; grid-template-columns: 1fr 1fr; gap:0; flex:1; }
.num-cell { padding: 4cqw 3cqw; border-top:1px solid var(--line); display:flex; flex-direction:column; justify-content:center; }
.num-cell:nth-child(odd){ border-right:1px solid var(--line); }
.num-cell:nth-child(-n+2){ border-top:1.5px solid var(--line-strong); }
.num-cell .v { font-family: var(--grotesk); font-weight:800; font-size: 9cqw; line-height:.95; letter-spacing:-.02em; }
.num-cell .v .u { font-size: 3.4cqw; margin-left:.6cqw; color:var(--accent); }
.num-cell .l { font-weight:700; font-size:2.6cqw; margin-top:1.4cqw; }
.num-cell .n { font-size:1.95cqw; color:var(--ink-soft); margin-top:.5cqw; line-height:1.6; }
.nums-note { margin-top: 3cqw; font-size:1.9cqw; color:var(--ink-soft); }

/* ============================ P15 これから ============================ */
#p15 { background: var(--ink); color:#fff; }
#p15 .eyebrow .en { color: rgba(255,255,255,.55); }
#p15 .eyebrow::after { background: rgba(255,255,255,.18); }
#p15 .folio { color: rgba(255,255,255,.55); }
.future-copy { font-family: var(--sans); font-weight:700; font-size: 8cqw; line-height:1.34; margin: 5cqw 0; white-space: pre-line; }
.future-copy .accent { color: var(--accent); }
.future-list { margin-top:auto; display:grid; grid-template-columns:1fr 1fr; gap:0; }
.future-item { padding: 2.8cqw 3cqw; border-top:1px solid rgba(255,255,255,.16); }
.future-item:nth-child(even){ border-left:1px solid rgba(255,255,255,.16); }
.future-item .en { font-family:var(--grotesk); font-weight:800; text-transform:uppercase; font-size:2.6cqw; color:var(--accent); letter-spacing:.04em; }
.future-item .ja { font-weight:700; font-size:2.7cqw; margin-top:1cqw; }
.future-item .n { font-size:1.95cqw; color:rgba(255,255,255,.6); margin-top:.6cqw; line-height:1.6; }

/* ============================ P16 会社概要・裏表紙 ============================ */
.profile-dl { margin-top: 4cqw; border-top: 1.5px solid var(--line-strong); }
.profile-row { display:grid; grid-template-columns: 20cqw 1fr; gap:3cqw; padding:2.2cqw 0; border-bottom:1px solid var(--line); }
.profile-row dt { font-family:var(--grotesk); font-weight:700; font-size:2.15cqw; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); }
.profile-row dd { font-size:2.4cqw; line-height:1.7; }
.profile-row dd .sub { display:block; font-size:1.9cqw; color:var(--ink-soft); }
.back-foot {
  margin-top:auto; padding-top: 4cqw; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:flex-end;
}
.back-brand .en { font-family:var(--grotesk); font-weight:800; text-transform:uppercase; font-size:4cqw; letter-spacing:.06em; }
.back-brand .ja { font-size:2.3cqw; letter-spacing:.14em; margin-top:.4cqw; }
.back-contact { font-size:2.1cqw; color:var(--ink-soft); line-height:1.9; }
.back-contact a { color:var(--ink); }
.back-qr { text-align:center; }
.back-qr svg, .back-qr img { width:16cqw; height:16cqw; margin:0 auto; }
.back-qr .lbl { font-family:var(--grotesk); font-size:1.6cqw; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); margin-top:1cqw; }
.copyright { margin-top:3cqw; padding-top:2.4cqw; border-top:1px solid var(--line); text-align:center; font-family:var(--grotesk); font-size:1.7cqw; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); }

/* ============================ 章扉共通の巨大ゴースト番号 ============================ */
.ghost {
  position:absolute; right: -1cqw; top: -3cqw; font-family: var(--serif);
  font-weight:600; font-size: 34cqw; line-height:1; color: var(--gray-bg); z-index:0; pointer-events:none; user-select:none;
}
.pad > * { position: relative; z-index: 1; }

/* ============================ ナビ / UI（画面のみ） ============================ */
.topbar {
  position: fixed; top:0; left:0; right:0; height: 60px; z-index: 50;
  display:flex; align-items:center; justify-content:space-between;
  padding: 0 22px; background: rgba(255,255,255,.86); backdrop-filter: blur(12px);
  border-bottom:1px solid var(--line);
}
.topbar .brand { font-family:var(--grotesk); font-weight:800; letter-spacing:.06em; font-size:15px; }
.topbar .brand span { color: var(--accent); }
.topnav { display:flex; gap:2px; }
.topnav a {
  font-family:var(--grotesk); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  padding:8px 10px; color:var(--ink-soft); border-radius:6px; white-space:nowrap;
}
.topnav a.active { color:var(--ink); background: var(--gray-bg); }
.topnav a:hover { color: var(--accent); }
.btn-print {
  display:inline-flex; align-items:center; gap:8px; background:var(--ink); color:#fff;
  font-family:var(--grotesk); font-weight:700; font-size:12px; letter-spacing:.06em;
  padding:9px 16px; border-radius:100px;
}
.btn-print:hover { background: var(--accent); }
.btn-print svg { width:15px; height:15px; }

/* サイド・ページインジケーター */
.dots { position: fixed; right: 16px; top:50%; transform: translateY(-50%); z-index:40; display:flex; flex-direction:column; gap:9px; }
.dots button { width:8px; height:8px; border-radius:50%; background: #bdb8b0; transition: all .25s; }
.dots button.active { background: var(--accent); transform: scale(1.5); }
.dots button:hover { background: var(--ink); }

/* スクロール進捗 */
.progress { position:fixed; top:0; left:0; height:3px; background:var(--accent); z-index:60; width:0; }

/* Reveal アニメーション（reduce-motion で無効） */
.reveal { opacity:0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity:1; transform:none; }

/* ============================ 実績モーダル（画面のみ） ============================ */
.modal { position: fixed; inset:0; z-index: 100; display:none; }
.modal.open { display:block; }
.modal-bg { position:absolute; inset:0; background: rgba(20,17,15,.7); backdrop-filter: blur(4px); }
.modal-card {
  position:absolute; left:50%; top:50%; transform: translate(-50%,-50%);
  width: min(92vw, 640px); max-height: 88vh; overflow:auto; background:var(--paper);
  border-radius: 4px; box-shadow: 0 30px 80px rgba(0,0,0,.4);
}
.modal-card .m-thumb { width:100%; aspect-ratio:16/10; object-fit:cover; background:var(--gray-bg); }
.modal-card .m-body { padding: 26px 30px 30px; }
.modal-card .m-cats { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.modal-card .m-cats span { font-family:var(--grotesk); font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); }
.modal-card h3 { font-size: 24px; font-weight:700; }
.modal-card .m-desc { margin-top:12px; color:var(--ink-soft); line-height:1.9; font-size:15px; }
.modal-card .m-link { display:inline-flex; align-items:center; gap:8px; margin-top:20px; background:var(--ink); color:#fff; font-family:var(--grotesk); font-weight:700; font-size:13px; letter-spacing:.05em; padding:11px 20px; border-radius:100px; }
.modal-card .m-link:hover { background:var(--accent); }
.modal-close { position:absolute; top:12px; right:14px; width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.9); font-size:22px; line-height:1; color:var(--ink); display:flex; align-items:center; justify-content:center; }
.modal-close:hover { background:var(--accent); color:#fff; }

/* 実績フィルター（画面のみ・P11上部に表示） */
.works-filter { display:flex; gap:8px; flex-wrap:wrap; margin-bottom: 4px; }
.works-filter button {
  font-family:var(--grotesk); font-size: 1.9cqw; letter-spacing:.06em; text-transform:uppercase;
  padding: 1cqw 2.6cqw; border:1px solid var(--line-strong); border-radius:100px; color:var(--ink);
}
.works-filter button.active { background:var(--ink); color:#fff; border-color:var(--ink); }

.print-hint { text-align:center; color:#6b665f; font-size:13px; padding: 4px 0 40px; font-family:var(--grotesk); letter-spacing:.04em; }

/* フィルター展開時：実績ページを可変高さにして全件表示（画面のみ） */
.sheet.works-filtered #p11 { aspect-ratio: auto; height: auto; min-height: 0; overflow: visible; }
.sheet.works-filtered #p11 .pad { position: relative; inset: auto; }
.sheet.works-filtered #p11 .folio { position: static; margin-top: 4cqw; }
.brand-mini { font-family: var(--grotesk); letter-spacing:.24em; }

/* ============================================================
   MAGAZINE LAYER — 雑誌エディトリアルの化粧
   （既存ルールより後に定義して上書き）
   ============================================================ */

/* 各ページ上部のマストヘッド（走り出しの見出し行） */
.runhead {
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--grotesk); font-size:1.7cqw; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink-soft); padding-bottom:2.2cqw; margin-bottom:5cqw;
  border-bottom:1px solid var(--line);
}
.runhead .mid { letter-spacing:.32em; }
.runhead b { color:var(--accent); font-weight:700; }

/* 背表紙のように外側に立つ縦組みラベル */
.vlabel {
  position:absolute; right:2.6cqw; bottom:5cqw; z-index:2;
  writing-mode:vertical-rl; text-orientation:mixed;
  font-family:var(--grotesk); font-size:1.6cqw; letter-spacing:.42em; text-transform:uppercase;
  color:#c8c3ba;
}
.vlabel.on-dark { color:rgba(255,255,255,.4); }

/* セクション見出し（№ + 罫 + 英題）— eyebrow を雑誌風に一新 */
.eyebrow {
  display:flex; align-items:center; gap:2.6cqw;
  font-family:var(--grotesk); letter-spacing:.24em; text-transform:uppercase;
}
.eyebrow::after { display:none; }
.eyebrow .idx {
  font-family:var(--serif); font-style:italic; font-weight:600; text-transform:none;
  font-size:5cqw; color:var(--accent); letter-spacing:0; line-height:.8;
}
.eyebrow .en { font-size:2.3cqw; font-weight:600; color:var(--ink); position:relative; padding-left:2.6cqw; }
.eyebrow .en::before { content:""; position:absolute; left:0; top:50%; width:1.6cqw; height:1px; background:var(--line-strong); }

/* 大見出しは重量900で、より雑誌的な塊に */
.headline { font-weight:900; letter-spacing:-.005em; }
.big-statement { font-weight:900; }

/* 英語の飾りサブ見出し（明朝イタリック） */
.serif-sub {
  font-family:var(--serif); font-style:italic; font-weight:500;
  font-size:3.4cqw; color:var(--ink-soft); letter-spacing:.01em; margin-top:1.4cqw;
}

/* プルクオート（引用の大文字組み） */
.pullquote {
  font-family:var(--serif); font-style:italic; font-weight:500;
  font-size:5.6cqw; line-height:1.34; letter-spacing:.005em; color:var(--ink);
  position:relative; padding-left:5cqw;
}
.pullquote::before {
  content:"\201C"; position:absolute; left:-.4cqw; top:-1.6cqw;
  font-size:11cqw; color:var(--accent); line-height:1; font-family:var(--serif);
}
.pullquote b, .pullquote .accent { color:var(--accent); font-style:normal; font-weight:700; }

/* ドロップキャップ */
.dropcap::first-letter {
  font-family:var(--serif); font-weight:600; float:left;
  font-size:9cqw; line-height:.74; padding:1cqw 1.4cqw 0 0; color:var(--accent);
}

/* 図版キャプション（Fig. 00 — …） */
.figtag {
  display:flex; align-items:center; gap:1.4cqw; margin-top:1.4cqw;
  font-family:var(--grotesk); font-size:1.7cqw; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft);
}
.figtag::before { content:""; width:3cqw; height:2px; background:var(--accent); flex:none; }
.figtag em { font-style:normal; color:var(--ink); }

/* 罫で仕切ったフォリオ（雑誌のノンブル） */
.folio { border-top:1px solid var(--line); padding-top:2.4cqw; bottom:3.4cqw; }

/* ---------- 特集の扉（P05 / P06）フルブリード写真 ---------- */
.page.feature { display:block; }
.feature .feat-hero {
  position:relative; width:100%; height:64cqw; overflow:hidden; background:var(--ink);
}
.feature .feat-hero img { width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.08) brightness(.92); }
.feature .feat-hero::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,17,15,.15) 0%, rgba(20,17,15,0) 30%, rgba(20,17,15,.7) 100%);
}
.feat-cap { position:absolute; inset:0; z-index:2; padding:6cqw 8.5cqw; display:flex; flex-direction:column; color:#fff; }
.feat-cap .top { display:flex; justify-content:space-between; font-family:var(--grotesk); font-size:1.7cqw; letter-spacing:.26em; text-transform:uppercase; color:rgba(255,255,255,.85); }
.feat-cap .top b { color:var(--accent); font-weight:700; }
.feat-cap .title { margin-top:auto; }
.feat-cap .title .no { font-family:var(--serif); font-style:italic; font-size:4.6cqw; color:var(--accent); line-height:1; }
.feat-cap .title h2 { font-family:var(--sans); font-weight:900; font-size:9cqw; line-height:1.05; margin-top:1cqw; letter-spacing:.005em; text-shadow:0 2px 30px rgba(0,0,0,.35); }
.feat-cap .title .en { font-family:var(--serif); font-style:italic; font-weight:500; font-size:3.2cqw; color:rgba(255,255,255,.8); margin-top:1cqw; }
.feature .feat-body { padding:6.5cqw 8.5cqw 0; }
.feat-body .lead-serif {
  font-family:var(--serif); font-style:italic; font-weight:500; font-size:4.6cqw; line-height:1.4; color:var(--ink);
  margin-bottom:3cqw;
}
.feat-body .lead-serif .accent { color:var(--accent); font-style:normal; font-weight:700; }
.feat-cols { column-count:2; column-gap:5cqw; column-rule:1px solid var(--line); }
.feat-cols .body-txt { font-size:2.35cqw; line-height:1.85; margin:0; }
.feature .chips { margin-top:4cqw; }

/* ---------- P14 数字：明朝の巨大ノンブル ---------- */
.num-cell .v { font-family:var(--serif); font-weight:600; font-size:13cqw; letter-spacing:-.01em; }
.num-cell .v .u { font-family:var(--grotesk); font-weight:700; font-size:3cqw; }

/* ---------- P09 強み：番号を明朝の飾り数字に ---------- */
.strength .no { font-family:var(--serif); font-weight:600; font-size:8cqw; font-style:italic; }

/* ---------- P10 進め方：ステップ番号を明朝に ---------- */
.flow-step .no { font-family:var(--serif); font-weight:600; font-style:italic; font-size:6cqw; color:var(--accent); }

/* ---------- 実績カード：図版番号キャプション ---------- */
.wcard .fig { font-family:var(--grotesk); font-size:1.55cqw; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); font-weight:700; margin-top:1.4cqw; }
.wcard .cats { margin-top:.4cqw; }
.wcard .cats span { color:var(--ink-soft); }

/* ダーク面のマガジン装飾 */
#p15 .runhead { color:rgba(255,255,255,.6); border-color:rgba(255,255,255,.16); }
#p15 .eyebrow .en { color:#fff; }
#p15 .eyebrow .en::before { background:rgba(255,255,255,.4); }

/* 章扉のゴースト数字は雑誌では控えめに（明朝の薄い数字） */
.ghost { font-style:italic; color:#f0ede8; right:2cqw; top:-1cqw; font-size:30cqw; }

/* ---------- マガジン装飾追加後の高さ微調整（A4に収める） ---------- */
/* P09 強み */
.strengths { margin-top: 3cqw; }
.strength { padding: 2.6cqw 3.2cqw; }
.strength .no { font-size: 6.6cqw; }
.strength .t { margin: 1.3cqw 0 1cqw; font-size: 3cqw; }
.strength .d { font-size: 2.08cqw; line-height: 1.7; }
/* P11-13 実績 */
.works-grid { margin-top: 2.8cqw; gap: 2.6cqw 3cqw; }
/* P15 これから */
.future-copy { font-size: 7cqw; margin: 3.5cqw 0; }
.future-item { padding: 2.4cqw 3cqw; }
/* P16 会社概要 */
.profile-dl { margin-top: 3cqw; }
.profile-row { padding: 1.8cqw 0; }
.copyright { margin-top: 2.2cqw; padding-top: 2cqw; }

/* 実績ページ: moreフッターとノンブルの重なり回避（下余白を確保） */
#p11 > .pad, #p12 > .pad, #p13 > .pad { padding-bottom: 10cqw; }
.works-more { padding-bottom: 1cqw; }

/* 実績ページのノンブルは本文フロー内に置く（絶対配置の重なり回避） */
#p11 > .pad, #p12 > .pad, #p13 > .pad { padding-bottom: 5.5cqw; }
.folio.in-flow { position: static; inset: auto; margin-top: 2.4cqw; }
.works-more { margin-top: auto; }

/* ---------- runhead 追加後の総合フィット調整（全ページA4内に収める） ---------- */
.runhead { margin-bottom: 3.5cqw; padding-bottom: 1.8cqw; }
/* P03 代表メッセージ */
.msg-grid { margin-top: 3cqw; }
.msg-lead { font-size: 3.7cqw; }
.msg-grid .body-txt { font-size: 2.15cqw; line-height: 1.72; }
/* P10 進め方 */
.flow-step { padding: 2cqw 0; }
.flow-step .en { font-size: 3.3cqw; }
.flow-loop { margin-top: 2.2cqw; }
/* P15 これから */
.future-copy { font-size: 6.6cqw; margin: 3cqw 0; }
/* P09 強み */
.strength { padding: 2.4cqw 3.2cqw; }
/* 実績ページ P11-13 */
#p11 .runhead, #p12 .runhead, #p13 .runhead { margin-bottom: 2.6cqw; }
.works-cat-title { font-size: 5cqw; margin-top: 1.2cqw; }
.works-grid { margin-top: 2.4cqw; gap: 2.2cqw 3cqw; }
.wcard-thumb { aspect-ratio: 16 / 9.5; }
.works-more { padding-bottom: 0; }
.works-more .txt { font-size: 2.12cqw; }
.folio.in-flow { margin-top: 1.6cqw; }

/* 一般ページ: フロー内ノンブルは自動マージンで最下部へ（本文とは常に分離） */
.folio.in-flow.auto { margin-top: auto; padding-top: 2.4cqw; }