@charset "UTF-8";
/* ============================================================
   site.css — 自社サイト 共通スタイル v1（2026-08-22）
   規約：docs/コーディング規約_v1.md ／ 値の根拠：docs/デザインMD_v1.md
   並び：1 :root トークン → 2 基盤 → 3 l- → 4 c- → 5 p- → 6 u- → 7 動き → 8 reduced-motion

   ★ 色・書体・余白を変えるときは「1 :root トークン」だけ触る。
   ★ 3案の切替：html 要素の data-variant="a|b|c"。既定（属性なし）は B案 Corporate。
   ============================================================ */

/* ------------------------------------------------------------
   1. :root トークン
   ------------------------------------------------------------ */
:root {
  /* 色（B案 Corporate が既定） ------------------------------ */
  --color-bg: #ffffff;
  --color-bg-alt: #f3f5fa;
  --color-surface: #ffffff;
  --color-fg: #1b2130;
  --color-fg-muted: #5e6676;
  --color-fg-invert: #ffffff;
  --color-accent: #1f4fd8;
  --color-accent-fg: #ffffff;
  --color-line: #dde2ee;
  --color-curve: #dce5fb;
  --color-hero-bg: #ffffff;
  --color-hero-fg: #1b2130;
  --color-hero-muted: #5e6676;
  --color-hero-accent: var(--color-accent);        /* ヒーロー上のボタン色（A案は濃色地なので反転する） */
  --color-hero-accent-fg: var(--color-accent-fg);

  /* 書体 ---------------------------------------------------- */
  /* ゴシック＝Noto Sans JP を最優先（本人指定 2026-08-22）。
     CDNは使わないので、確実に出すには assets/fonts/ にセルフホストする（下の @font-face を有効化）。
     未配置の環境では次の候補（ヒラギノ／游ゴシック）に落ちる */
  --font-body: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN', 'Yu Gothic', YuGothic, sans-serif;
  --font-heading: 'Hiragino Mincho ProN', 'Yu Mincho', YuMincho, 'Noto Serif JP', serif;   /* 日本語見出し＝明朝 */
  --font-display: Georgia, 'Times New Roman', serif;                                        /* 英字の大見出し・ラベル・数値 */

  /* 余白（8px基準） ----------------------------------------- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 16px;  --space-4: 24px;
  --space-5: 40px; --space-6: 64px; --space-7: 96px;  --space-8: 160px;
  --section-y: clamp(72px, 11vw, 176px);
  --gutter: clamp(20px, 5vw, 80px);

  /* 寸法・形 ------------------------------------------------ */
  --maxw: 1120px;          /* 色面・画像の最大幅 */
  --contentw: 760px;       /* 本文ブロックの最大幅（縦1カラム） */
  --textw: 34em;           /* 本文の折り返し（日本語30〜40字） */
  --radius-card: 24px;
  --radius-btn: 999px;
  --wave-h: clamp(56px, 10vw, 160px);   /* 波形の高さ。v3で「大きく・流動的に」（凹凸は1本あたり3つ以下）*/
  --header-h: 64px;

  /* 動き ---------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 0.3s;
  --dur-base: 0.6s;
  --dur-slow: 1s;
}

/* A案 Editorial：ヒーローだけ濃色、本文は明るいグレー。色は使わず黒をアクセントに */
[data-variant='a'] {
  --color-bg: #f2f2f0;
  --color-bg-alt: #e9e9e6;
  --color-surface: #ffffff;
  --color-fg: #1c1a19;
  --color-fg-muted: #66625e;
  --color-fg-invert: #f2f2f0;
  --color-accent: #1c1a19;
  --color-accent-fg: #f2f2f0;
  --color-line: #d9d8d4;
  --color-curve: #2a2725;
  --color-hero-bg: #1c1a19;
  --color-hero-fg: #f2f2f0;
  --color-hero-muted: #b9b5b0;
  --color-hero-accent: #f2f2f0;      /* 濃色ヒーローでは白ボタン・黒文字 */
  --color-hero-accent-fg: #1c1a19;
  --radius-card: 8px;
}

/* C案 Warm：クリーム地、波形の境目、テラコッタ1色（白文字 5.3:1） */
[data-variant='c'] {
  --color-bg: #f6f2e8;
  --color-bg-alt: #e9e1cf;
  --color-surface: #ffffff;
  --color-fg: #2b2722;
  --color-fg-muted: #6b6256;
  --color-fg-invert: #f6f2e8;
  --color-accent: #b8480f;
  --color-accent-fg: #ffffff;
  --color-line: #dcd3c0;
  --color-curve: #e9e1cf;
  --color-hero-bg: #f6f2e8;
  --color-hero-fg: #2b2722;
  --color-hero-muted: #6b6256;
}

/* Noto Sans JP セルフホスト（2026-08-24 本人承認）
   元：Windows 同梱の NotoSansJP-VF.ttf → wght=400 で固定し、JIS第1水準＋かな＋記号＋ASCII にサブセット（約1.0MB）
   ライセンス：SIL OFL 1.1（assets/fonts/OFL.txt と README-license.md を同梱）
   太字はブラウザ合成。第2水準の珍しい漢字はシステムのゴシックで表示される */
@font-face {
  font-family: 'Noto Sans JP';
  src: url(../fonts/NotoSansJP-Regular-subset.woff2) format('woff2');
  font-weight: 400;
  font-display: swap;
}

/* ------------------------------------------------------------
   2. 基盤
   ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
body {
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.6vw, 1.0625rem);
  line-height: 2;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;   /* hidden だと body がスクロールコンテナになり scroll()/view() タイムラインが壊れる */
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
ul { list-style: none; }
h1, h2, h3 { font-family: var(--font-heading); font-weight: 600; line-height: 1.5; letter-spacing: 0.06em; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }

/* ------------------------------------------------------------
   3. l- レイアウト（幅・余白・配置だけ）
   ------------------------------------------------------------ */
.l-wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.l-content { max-width: var(--contentw); margin-inline: auto; }
.l-section { padding-block: var(--section-y); position: relative; }
.l-section--alt { background: var(--color-bg-alt); }
.l-stack > * + * { margin-top: var(--space-4); }

/* ヘッダー：固定。スクロール後に背景が付く */
.l-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--header-h);
  transition: background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.l-header { color: var(--color-hero-fg); }   /* ヒーロー上にいる間はヒーローの文字色（A案は白）。スクロール後は通常色に戻す */
.l-header .c-logo small { color: var(--color-hero-muted); }
.l-header .c-btn--primary { background: var(--color-hero-accent); color: var(--color-hero-accent-fg); border-color: var(--color-hero-accent); }
.l-header.has-scrolled { color: var(--color-fg); background: var(--color-bg); background: color-mix(in srgb, var(--color-bg) 88%, transparent); backdrop-filter: blur(8px); box-shadow: 0 1px 0 var(--color-line); }
.l-header.has-scrolled .c-logo small { color: var(--color-fg-muted); }
.l-header.has-scrolled .c-btn--primary { background: var(--color-accent); color: var(--color-accent-fg); border-color: var(--color-accent); }
.l-header__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.l-header__nav { display: flex; align-items: center; gap: var(--space-3); }
@media (max-width: 767px) { .l-header .c-btn { display: none; } }   /* スマホは下部の固定CTAに任せる */

/* ------------------------------------------------------------
   4. c- 部品
   ------------------------------------------------------------ */
/* ロゴ（屋号が決まるまでは英字のワードマーク） */
.c-logo { font-family: var(--font-display); font-size: 1.125rem; letter-spacing: 0.28em; text-decoration: none; }   /* 屋号 Hatsuni は表記指定（Hのみ大文字）のため uppercase を外した（2026-08-27） */
.c-logo small { display: block; font-family: var(--font-body); font-size: 0.625rem; letter-spacing: 0.1em; line-height: 1.2; color: var(--color-fg-muted); }

/* 言語切替 */
.c-lang { font-family: var(--font-display); font-size: 0.8125rem; letter-spacing: 0.12em; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 0.1em; }

/* ボタン：ピル */
.c-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  min-height: 44px; padding: 0.9em 2.2em;
  font-family: var(--font-body); font-size: 0.9375rem; letter-spacing: 0.04em; line-height: 1.3; text-decoration: none;
  color: var(--color-fg); background: transparent; border: 1px solid currentColor; border-radius: var(--radius-btn);
  transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.c-btn--primary { color: var(--color-accent-fg); background: var(--color-accent); border-color: var(--color-accent); }
.c-btn--sm { min-height: 40px; padding: 0.6em 1.4em; font-size: 0.8125rem; }
.c-btn::after { content: '→'; font-family: var(--font-display); }
@media (hover: hover) { .c-btn:hover { transform: translateY(-2px); } }

/* テキストリンク */
.c-textlink { font-size: 0.9375rem; letter-spacing: 0.04em; text-decoration: underline; text-underline-offset: 0.25em; }
.c-textlink::after { content: ' →'; font-family: var(--font-display); }

/* セクション見出し：英字ラベル（小）＋日本語（明朝・10〜15字） */
.c-heading { text-align: center; margin-bottom: var(--space-6); }
.c-heading__en { display: block; font-family: var(--font-display); font-size: 0.8125rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--color-fg-muted); font-weight: 400; }
.c-heading__ja { display: block; font-family: var(--font-heading); font-weight: 600; font-size: clamp(1.5rem, 4vw, 2.25rem); line-height: 1.5; letter-spacing: 0.08em; margin-top: var(--space-2); word-break: auto-phrase; }
.c-heading--left { text-align: left; }

/* カード */
.c-card { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-card); padding: var(--space-5) var(--space-4); }
.c-card + .c-card { margin-top: var(--space-4); }
.c-card__label { font-family: var(--font-display); font-size: 0.75rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--color-accent); }
.c-card__title { font-size: clamp(1.25rem, 3.2vw, 1.625rem); margin-top: var(--space-2); word-break: auto-phrase; }
.c-card__text { font-size: 0.9375rem; line-height: 2; color: var(--color-fg-muted); margin-top: var(--space-3); text-align: left; }
.c-card__list { margin-top: var(--space-3); font-size: 0.9375rem; line-height: 1.9; }
.c-card__list li { padding-left: 1.4em; position: relative; }
.c-card__list li::before { content: ''; position: absolute; left: 0; top: 0.75em; width: 0.5em; height: 0.5em; border-radius: 50%; background: var(--color-accent); }
.c-card__list li + li { margin-top: 0.4em; }
.c-card__act { margin-top: var(--space-4); }
@media (min-width: 768px) { .c-card { padding: var(--space-6) var(--space-6); } }

/* 曲線①：波形（セクションの境目）。色は currentColor → color: で変える */
.c-wave { display: block; width: 100%; height: var(--wave-h); color: var(--color-bg-alt); }
.c-wave--top { transform: scaleY(-1); }
.c-wave--curve { color: var(--color-curve); }
.c-wave--bg { color: var(--color-bg); }

/* 曲線②：リボン（ヒーロー背景）。B案 */
.c-ribbon { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.c-ribbon svg { position: absolute; left: 50%; top: 0; width: 180vw; height: 100%; translate: -50% 0; min-width: 1200px; }

/* 曲線③：ブロブ（写真・色面の丸み） */
.c-blob { border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%; overflow: hidden; }
.c-blob--alt { border-radius: 45% 55% 40% 60% / 60% 45% 55% 40%; }

/* 画像プレースホルダー（本番では img に置き換える） */
.c-ph { position: relative; background: var(--color-bg-alt); border: 1px solid var(--color-line); overflow: hidden; }
.c-ph::after { content: attr(data-label); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: var(--space-3); font-size: 0.75rem; line-height: 1.7; color: var(--color-fg-muted); letter-spacing: 0.04em; white-space: pre-line; }
.c-ph--16x9 { aspect-ratio: 16 / 9; }
.c-ph--4x5 { aspect-ratio: 4 / 5; }
.c-ph--1x1 { aspect-ratio: 1 / 1; }

/* 固定CTA：PC右下ピル／スマホ下部バー。ヒーローを抜けたら出す */
.c-fixcta {
  position: fixed; right: var(--gutter); bottom: var(--space-5); z-index: 50;
  opacity: 0; pointer-events: none; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.c-fixcta.is-on { opacity: 1; pointer-events: auto; }
@media (max-width: 767px) {
  .c-fixcta { left: var(--space-3); right: var(--space-3); bottom: calc(var(--space-3) + env(safe-area-inset-bottom)); opacity: 1; pointer-events: auto; transform: translateY(140%); }
  .c-fixcta.is-on { transform: translateY(0); }
}

/* 日付付きリスト（トピック） */
.c-list { border-top: 1px solid var(--color-line); }
.c-list__item { border-bottom: 1px solid var(--color-line); }
.c-list__link { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4) 0; text-decoration: none; transition: transform var(--dur-fast) var(--ease-out); }
.c-list__date { font-family: var(--font-display); font-size: 0.8125rem; letter-spacing: 0.12em; color: var(--color-fg-muted); }
.c-list__title { font-size: 1rem; line-height: 1.8; word-break: auto-phrase; }
.c-list__title::after { content: ' →'; font-family: var(--font-display); color: var(--color-accent); }
@media (hover: hover) { .c-list__link:hover { transform: translateX(4px); } }
@media (min-width: 768px) { .c-list__link { flex-direction: row; align-items: baseline; gap: var(--space-5); } .c-list__date { flex: 0 0 7em; } }

/* ------------------------------------------------------------
   5. p- ページ・セクション固有
   ------------------------------------------------------------ */
/* ヒーロー */
.p-hero { position: relative; min-height: 100svh; display: flex; align-items: center; padding: calc(var(--header-h) + var(--space-6)) 0 var(--space-7); background: var(--color-hero-bg); color: var(--color-hero-fg); overflow: hidden; }
.p-hero__inner { position: relative; z-index: 1; width: 100%; }
.p-hero__en { font-family: var(--font-display); font-size: clamp(2.5rem, 9vw, 6.5rem); line-height: 1.05; letter-spacing: -0.01em; font-weight: 400; }
.p-hero__en span { display: block; }
.p-hero__title { font-size: clamp(1.5rem, 4.5vw, 2.5rem); line-height: 1.5; letter-spacing: 0.08em; margin-top: var(--space-4); word-break: auto-phrase; }
.p-hero__lead { max-width: var(--textw); margin-top: var(--space-4); font-size: clamp(0.9rem, 1.5vw, 1rem); line-height: 2.1; color: var(--color-hero-muted); word-break: auto-phrase; }
.p-hero__act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); margin-top: var(--space-5); }
.p-hero .c-btn--primary { background: var(--color-hero-accent); color: var(--color-hero-accent-fg); border-color: var(--color-hero-accent); }
.p-hero__note { font-size: 0.8125rem; color: var(--color-hero-muted); letter-spacing: 0.04em; }
.p-hero__wave { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 1; }
/* 段階表示 */
.p-hero__en, .p-hero__title, .p-hero__lead, .p-hero__act { opacity: 0; animation: fade-up var(--dur-base) var(--ease-out) forwards; }
.p-hero__title { animation-delay: 0.15s; }
.p-hero__lead { animation-delay: 0.3s; }
.p-hero__act { animation-delay: 0.45s; }

/* A案：背景に巨大英字（装飾）。スクロールで横に流れる（対応ブラウザのみ） */
.p-hero__ghost { position: absolute; left: 0; top: 50%; z-index: 0; translate: 0 -50%; white-space: nowrap; font-family: var(--font-display); font-size: clamp(6rem, 24vw, 20rem); line-height: 1; letter-spacing: 0.02em; color: var(--color-hero-fg); opacity: 0.07; pointer-events: none; user-select: none; }
/* A案：ヒーローの下端の円弧（次のセクションの地色で描く） */
.p-hero__arc { position: absolute; left: 50%; bottom: -1px; z-index: 1; width: 160vw; height: clamp(48px, 10vw, 140px); translate: -50% 0; background: var(--color-bg-alt); border-radius: 50% 50% 0 0 / 100% 100% 0 0; }   /* 直後のトピック（bg-alt）と同じ色で描く */

/* C案：ヒーロー右下の色面ブロブ */
.p-hero__blob { position: absolute; right: -12vw; bottom: -10vw; z-index: 0; width: clamp(220px, 46vw, 560px); aspect-ratio: 1; background: var(--color-curve); pointer-events: none; }

/* トピック */
.p-topics__note { margin-top: var(--space-4); font-size: 0.8125rem; color: var(--color-fg-muted); text-align: right; }

/* こんな方に */
.p-fit__list { font-size: 1rem; line-height: 1.9; }
.p-fit__list li { position: relative; padding-left: 1.8em; }
.p-fit__list li + li { margin-top: var(--space-3); }
.p-fit__list li::before { content: '✓'; position: absolute; left: 0; top: 0; font-family: var(--font-display); color: var(--color-accent); }

/* 作例 */
.p-works__item + .p-works__item { margin-top: var(--space-6); }
.p-works__thumb { display: block; border-radius: var(--radius-card); overflow: hidden; }
.p-works__thumb--blob { border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%; }        /* C案：ブロブで切り抜く */
.p-works__thumb--blob-alt { border-radius: 45% 55% 40% 60% / 60% 45% 55% 40%; }
.p-works__meta { margin-top: var(--space-3); }
.p-works__title { font-size: 1.125rem; word-break: auto-phrase; }
.p-works__text { font-size: 0.9375rem; color: var(--color-fg-muted); line-height: 1.9; margin-top: var(--space-1); }
.p-works__badge { display: inline-block; margin-top: var(--space-2); padding: 0.2em 0.8em; border: 1px solid var(--color-line); border-radius: var(--radius-btn); font-size: 0.75rem; letter-spacing: 0.06em; color: var(--color-fg-muted); }

/* ⑥数字で見る */
.p-stats__item + .p-stats__item { margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--color-line); }
.p-stats__num { font-family: var(--font-display); font-size: clamp(2.5rem, 8vw, 4.5rem); line-height: 1; color: var(--color-accent); }
.p-stats__num small { font-size: 0.4em; margin-left: 0.1em; color: var(--color-fg); }
.p-stats__label { font-size: 1rem; margin-top: var(--space-2); word-break: auto-phrase; }
.p-stats__src { font-size: 0.75rem; color: var(--color-fg-muted); margin-top: var(--space-1); line-height: 1.8; word-break: break-all; }
.p-stats__src a { text-underline-offset: 0.2em; }

/* ⑦進め方：縦のタイムライン */
.p-steps { position: relative; padding-left: 2.6em; }
.p-steps::before { content: ''; position: absolute; left: 0.9em; top: 0.6em; bottom: 0.6em; width: 2px; background: var(--color-line); }
.p-steps__item { position: relative; }
.p-steps__item + .p-steps__item { margin-top: var(--space-5); }
.p-steps__no { position: absolute; left: -2.6em; top: 0; width: 1.9em; height: 1.9em; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--color-accent); color: var(--color-accent-fg); font-family: var(--font-display); font-size: 0.9375rem; }
.p-steps__title { font-size: 1.125rem; word-break: auto-phrase; }
.p-steps__text { font-size: 0.9375rem; color: var(--color-fg-muted); line-height: 1.9; margin-top: var(--space-1); }
.p-steps__item--last .p-steps__no { background: var(--color-fg); }

/* ⑧選び方ガイド */
.p-guide__list li { position: relative; padding-left: 1.8em; font-size: 1rem; line-height: 1.9; }
.p-guide__list li + li { margin-top: var(--space-3); }
.p-guide__list li::before { content: '□'; position: absolute; left: 0; top: 0; font-family: var(--font-display); color: var(--color-accent); }
.p-guide__note { font-size: 0.8125rem; color: var(--color-fg-muted); margin-top: var(--space-4); }

/* ⑩運営者 */
.p-about__photo { width: min(260px, 60vw); aspect-ratio: 4 / 5; margin-inline: auto; }
.p-about__name { text-align: center; margin-top: var(--space-4); font-size: 1.25rem; }
.p-about__role { text-align: center; font-size: 0.8125rem; color: var(--color-fg-muted); letter-spacing: 0.06em; }
.p-about__text { max-width: var(--textw); margin: var(--space-4) auto 0; font-size: 0.9375rem; line-height: 2.05; text-align: left; }

/* ⑪お問い合わせ：アクセント色の色面 */
.p-contact { background: var(--color-accent); color: var(--color-accent-fg); }
.p-contact .c-heading__en, .p-contact .c-heading__ja { color: inherit; }
.p-contact__lead { max-width: var(--textw); margin-inline: auto; text-align: center; font-size: 0.9375rem; line-height: 2; }
.p-contact__tel { text-align: center; margin-top: var(--space-4); font-family: var(--font-display); font-size: 1.25rem; letter-spacing: 0.06em; }
.p-contact__tel a { text-decoration: none; }
.p-contact__tel small { display: block; font-family: var(--font-body); font-size: 0.75rem; letter-spacing: 0.04em; opacity: 0.85; }
.p-contact .c-btn--primary { background: var(--color-accent-fg); color: var(--color-accent); border-color: var(--color-accent-fg); }
.c-form { max-width: 34em; margin: var(--space-6) auto 0; }
.c-form__row + .c-form__row { margin-top: var(--space-3); }
.c-form__label { display: block; font-size: 0.8125rem; letter-spacing: 0.06em; margin-bottom: var(--space-1); }
.c-form__input { width: 100%; min-height: 44px; padding: 0.6em 0.9em; font: inherit; font-size: 1rem; color: var(--color-fg); background: var(--color-surface); border: 1px solid transparent; border-radius: 12px; }
.c-form__input:focus-visible { outline: 2px solid var(--color-accent-fg); outline-offset: 2px; }
textarea.c-form__input { min-height: 8em; resize: vertical; }
.c-form__act { margin-top: var(--space-4); text-align: center; }
.c-form__note { font-size: 0.75rem; opacity: 0.85; margin-top: var(--space-2); text-align: center; }

/* 下層ページ共通 */
.l-page { padding: calc(var(--header-h) + var(--space-6)) 0 var(--space-8); }
.l-header--solid { color: var(--color-fg); background: var(--color-bg); box-shadow: 0 1px 0 var(--color-line); }
.l-header--solid .c-logo small { color: var(--color-fg-muted); }
.l-header--solid .c-btn--primary { background: var(--color-accent); color: var(--color-accent-fg); border-color: var(--color-accent); }
.p-article { text-align: left; }
.p-article > * + * { margin-top: var(--space-3); }
.p-article h2 { font-size: 1.375rem; margin-top: var(--space-6); word-break: auto-phrase; }
.p-article h3 { font-size: 1.125rem; margin-top: var(--space-5); word-break: auto-phrase; }
.p-article ul { padding-left: 1.4em; list-style: disc; }
.p-article ol { padding-left: 1.4em; }
.p-article li + li { margin-top: var(--space-1); }
.p-article a { text-decoration: underline; text-underline-offset: 0.2em; }
.p-article table { width: 100%; border-collapse: collapse; font-size: 0.875rem; line-height: 1.8; }
.p-article th, .p-article td { border-bottom: 1px solid var(--color-line); padding: 0.6em 0.8em; text-align: left; vertical-align: top; }
.p-article th { color: var(--color-fg-muted); font-weight: 600; white-space: nowrap; }
.p-article .u-scroll { overflow-x: auto; }
.p-article__meta { font-size: 0.8125rem; color: var(--color-fg-muted); letter-spacing: 0.06em; }
.p-article__note { font-size: 0.8125rem; color: var(--color-fg-muted); line-height: 1.9; border-left: 2px solid var(--color-line); padding-left: var(--space-3); }

/* 2026-08-25 本人フィードバック反映 --------------------------- */
/* 背景の英字：スクロール連動をやめ、常にゆっくり左へ流れ続ける（本人指定）。
   2連の同一スパンを -50% 動かすことで継ぎ目なくループする。
   ⚠️ 規約 §6「無限ループの動きは置かない」の例外として本人決定で採用。
   prefers-reduced-motion では全アニメーション停止の全体ルールが効くので静止する */
.p-hero__ghost { display: inline-flex; animation: ghost-marquee 60s linear infinite; }
.p-hero__ghostitem { white-space: nowrap; }
@keyframes ghost-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* サービスのA/Bラベルを大きく */
.c-card__label--lg { font-size: 1.2rem; letter-spacing: 0.12em; }

/* こんな方に：箱ごと中央寄せ（文章は左揃えのまま）＋文字を1.2remに */
.p-fit__list { width: fit-content; max-width: 100%; margin-inline: auto; font-size: 1.2rem; }
.p-fit__list li { font-size: 1.2rem; }

/* 進め方：ol の標準番号を消す（丸数字と二重になっていたバグ）＋丸の中の数字を上下中央に */
.p-steps { list-style: none; }
.p-steps__no { line-height: 1; }

/* ヒーロー背景：淡い港の写真（ChatGPT生成 2026-08-27 hero-bg.jpg）。文字が主役なので画像はごく淡い。
   その上に元の背景色を半透明で重ねて、文字コントラストを確保する */
.p-hero { background-image: linear-gradient(color-mix(in srgb, var(--color-hero-bg) 55%, transparent), color-mix(in srgb, var(--color-hero-bg) 55%, transparent)), url(../img/hero-bg.jpg); background-size: cover; background-position: center; }

/* ヒーローのボタンまわり：縦並び・ページ中央揃え（本人指定 2026-08-25）
   並び順は「15分のオンライン相談」→ ボタン →「サンプルを見る」。上下の文字は 0.75rem */
.p-hero__act { flex-direction: column; align-items: center; gap: var(--space-4); }
.p-hero__note { font-size: 0.75rem; }
.p-hero__act .c-textlink { font-size: 0.75rem; }

/* トピック：リンクでない予定項目（span.c-list__link）はカーソルと下線を出さない */
span.c-list__link { cursor: default; }
span.c-list__link .c-list__title::after { content: none; }
span.c-list__link:hover { transform: none; }

/* ⑫フッター */
.l-footer { padding: var(--space-6) 0 calc(var(--space-7) + 56px); background: var(--color-bg-alt); font-size: 0.8125rem; line-height: 2; color: var(--color-fg-muted); }
@media (min-width: 768px) { .l-footer { padding-bottom: var(--space-7); } }
.l-footer__logo { color: var(--color-fg); }
.l-footer__nav { margin-top: var(--space-4); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.l-footer__nav a { text-decoration: underline; text-underline-offset: 0.2em; }
.l-footer__legal { margin-top: var(--space-4); }
.l-footer__copy { margin-top: var(--space-3); font-family: var(--font-display); letter-spacing: 0.06em; }

/* 続きの案内（制作中だけ） */
.p-more { text-align: center; padding: var(--space-6) 0 calc(var(--space-8) * 0.8); font-size: 0.8125rem; letter-spacing: 0.06em; color: var(--color-fg-muted); }

/* ------------------------------------------------------------
   6. u- ユーティリティ
   ------------------------------------------------------------ */
.u-skip { position: absolute; left: var(--space-3); top: -100px; z-index: 100; padding: 0.6em 1em; background: var(--color-fg); color: var(--color-fg-invert); border-radius: var(--radius-btn); }
.u-skip:focus { top: var(--space-3); }
.u-nw { white-space: nowrap !important; }
.u-br-sp { display: inline; }
@media (min-width: 768px) { .u-br-sp { display: none !important; } }
.u-hidden { display: none !important; }
.u-center { text-align: center !important; }

/* ------------------------------------------------------------
   7. 動き
   ------------------------------------------------------------ */
@keyframes fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* スクロールイン（1回だけ）。フックは data-reveal（js- クラスにCSSを当てない規約のため）。JSが .is-in を付ける */
[data-reveal] { opacity: 0; transform: translateY(8px); transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
[data-reveal].is-in { opacity: 1; transform: none; }
.no-js [data-reveal] { opacity: 1; transform: none; }   /* JSが動かない環境は最初から見せる */

/* スクロール連動（CSSだけ。対応ブラウザのみ、非対応は静止） */
@supports (animation-timeline: scroll()) {
  .c-drift { animation: drift-x linear both; animation-timeline: scroll(root); animation-range: 0 120vh; }
  @keyframes drift-x { from { transform: translateX(0); } to { transform: translateX(-6%); } }
  .c-drift--slow { animation-name: drift-x-slow; }
  @keyframes drift-x-slow { from { transform: translateX(0); } to { transform: translateX(-24px); } }
}

/* ------------------------------------------------------------
   ヘッダーのグローバルメニュー（2026-08-25 本人指示）
   960px以上＝横並び／959px以下＝ハンバーガー
   ------------------------------------------------------------ */
.l-header__menu { display: flex; align-items: center; gap: var(--space-4); }
.l-header__menu a { font-size: 0.8125rem; letter-spacing: 0.06em; text-decoration: none; white-space: nowrap; }
@media (hover: hover) { .l-header__menu a:hover { text-decoration: underline; text-underline-offset: 0.35em; } }
.c-menubtn { display: none; }
.u-vh { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 959px) {
  .l-header__menu {
    position: absolute; top: var(--header-h); right: var(--space-3); left: auto;
    min-width: 240px;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--color-bg); color: var(--color-fg);
    border: 1px solid var(--color-line); border-radius: 12px; overflow: hidden;
    box-shadow: 0 16px 32px rgba(40, 30, 20, 0.14);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), visibility 0s linear var(--dur-fast);
  }
  .l-header__menu.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
  .l-header__menu a { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-line); font-size: 0.9375rem; }
  .l-header__menu a:last-child { border-bottom: 0; }
  .c-menubtn { display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 44px; height: 44px; background: none; border: 0; padding: 0; color: inherit; cursor: pointer; }
  .c-menubtn__bar { display: block; width: 22px; height: 2px; background: currentColor; transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out); }
  .c-menubtn.is-open .c-menubtn__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .c-menubtn.is-open .c-menubtn__bar:nth-child(2) { opacity: 0; }
  .c-menubtn.is-open .c-menubtn__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* 波をスクロールに合わせて横にゆっくり流す（2026-08-25 本人指示。対応ブラウザのみ、非対応は静止のまま）
   svg本体を112%幅にして左右に6%はみ出させ、画面通過に連動して±2.5%動かす（端の隙間が出ない） */
html { overflow-x: clip; }   /* 波の左右のはみ出しでスクロールバーを出さない */
@supports (animation-timeline: view()) {
  .c-wave { max-width: none; width: 130%; margin-left: -15%; animation: wave-drift linear both; animation-timeline: view(); }
  .c-wave--top { animation-name: wave-drift-flip; }
  @keyframes wave-drift { from { transform: translateX(-7%); } to { transform: translateX(7%); } }
  @keyframes wave-drift-flip { from { transform: translateX(-7%) scaleY(-1); } to { transform: translateX(7%) scaleY(-1); } }
}

/* フッターのSNSリンク（X。2026-08-27 本人指示。アカウント: x.com/Hatsuni_jp） */
.l-footer__sns { margin-top: var(--space-5); }
.l-footer__sns a { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border: 1px solid var(--color-line); border-radius: 50%; color: var(--color-fg); transition: transform var(--dur-fast) var(--ease-out); }
@media (hover: hover) { .l-footer__sns a:hover { transform: translateY(-2px); } }
.l-footer__sns svg { width: 18px; height: 18px; fill: currentColor; }

/* ------------------------------------------------------------
   8. 動きを減らす設定（必ず最後）。消すのではなく弱める
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  [data-reveal], .p-hero__en, .p-hero__title, .p-hero__lead, .p-hero__act { opacity: 1 !important; transform: none !important; }
  .c-drift, .c-drift--slow { animation: none !important; transform: none !important; }
  /* 背景の英字マーキーは止めず、大きく減速する（本人決定 2026-08-25。規約「消すのではなく弱める」） */
  .p-hero__ghost { animation-duration: 240s !important; animation-iteration-count: infinite !important; }
  /* 波のスクロール連動はユーザー操作起点なので止めない（durationを潰すとタイムラインが壊れるため auto に戻す） */
  .c-wave { animation-duration: auto !important; }
}