@charset "UTF-8";
/* =====================================================================
   _base.css — hwp363 就労移行支援事業所 ネオワークス / モジュール基盤

   ここに置くもの＝「全ページ・全モジュールが前提にする土台」だけ。
     ・デザイントークン（:root）
     ・リセットと本文タイポ
     ・汎用ヘルパ（.m-wrap / .m-skip / .m-defs / .m-blob / .m-num）
     ・登場アニメーション（[data-reveal] / [data-i]）
     ・パンくず（既存 src/components/Breadcrumb.astro 用の最小スタイル）

   🚫 セクションや部品の CSS をここに書かない。
      それらは src/components/modules/*.astro の <style is:global> が持つ。
   🚫 public/css/style.css（_global.css / _theme.css）は読み込まない。
      このサイトは _base.css ＋ モジュールCSS だけで完結させる（二重定義の禁止）。

   トーン：写真が主役。青は CTA とキーワードだけ（面積10%以下）。
           signature はロゴマーク（logo_mark_mono.svg を mask で描画）1点。
           グラデーション禁止／半円（弧）の見出し装飾禁止。
===================================================================== */

:root {
    /* ── ブランドカラー（ロゴ実測値・3段）────────────────────── */
    --c-brand-deep:  #005cab;   /* 濃：ボタン・キーワード */
    --c-brand:       #0073b4;   /* 中：線・小アクセント */
    --c-brand-light: #009dd9;   /* 明：極薄の円のみ */

    /* ── 地・文字（地は白／サブ地はニュートラルなオフホワイト）── */
    --c-bg:        #ffffff;
    --c-bg-sub:    #f2f2f0;
    --c-bg-sub-2:  #e9e9e6;
    --c-text:      #111111;
    --c-text-sub:  #4d5052;
    --c-line:      #dcdcd8;
    --c-line-soft: #e8e8e4;
    --c-line-form: #06c755;   /* LINE ブランドカラー（アイコン下の線のみ） */

    /* 状態色（hover / tint）。直書きHEXを散らさないためトークン化してある */
    --c-brand-deep-hover:      #00468a;   /* 塗りボタン hover */
    --c-brand-tint:            #eaf3fa;   /* 青ブロック上の白ボタン hover */
    --c-brand-on-photo-hover:  #cfe6f5;   /* 写真の上の白文字リンク hover */
    --c-line-tint:             #f7fdf9;   /* LINEボタン hover */

    /* 写真の上の可読性スクリム（単色・グラデ不使用） */
    --scrim:       rgba(9, 20, 30, .62);

    /* ── タイポ ─────────────────────────────────────────────── */
    --font-display: 'Zen Kaku Gothic New', 'Noto Sans JP', system-ui, sans-serif;
    --font-body:    'Noto Sans JP', 'Zen Kaku Gothic New', system-ui, sans-serif;

    --fz-body:     17px;          /* 日本語本文の床 */
    --fz-sm:       15px;
    --fz-xs:       13px;
    --fz-hero:     clamp(2.5rem, 6vw, 4.75rem);      /*  40 → 76px */
    --fz-sechead:  clamp(1.75rem, 4.4vw, 3rem);      /*  28 → 48px（本文17pxの2.8倍）。56px は大きい指摘あり（2026-09-28 修正指示 #11） */
    --fz-h3:       clamp(1.5rem, 2.6vw, 2rem);       /*  24 → 32px */
    --fz-h4:       clamp(1.125rem, 1.8vw, 1.375rem); /*  18 → 22px。本文と差が小さい指摘あり（2026-09-28 修正指示 #15） */
    --fz-num:      clamp(2.5rem, 4.6vw, 3.75rem);    /*  40 → 60px */

    /* 記事本文（microCMS リッチエディタ）の見出し2段。
       ワイヤー 06 の見本は 40 / 24 / 20px で、ラベルの数字が階層と逆だったため
       **フォントサイズ順**に h2 / h3 / h4 を割り当てる（01_wireframe/06_news-detail.md の ⚠️）。
       h4 は --fz-h4（17→20px）と同値なので新設しない。
       🚨 本文 h2 は 40px ではなく 28px。記事タイトル（--fz-h3 = 32px）より大きくすると
          「本文の見出しがタイトルより大きい」階層逆転になるため、順序だけを守って一段落とす。 */
    --fz-art-h2:   clamp(1.375rem, 2.2vw, 1.75rem);  /*  22 → 28px */
    --fz-art-h3:   clamp(1.25rem, 1.9vw, 1.5rem);    /*  20 → 24px */

    --lh-base:     1.8;    /* 和文本文 */
    --lh-loose:    1.7;    /* 長文（本文以下のサイズ） */
    --lh-sechead:  1.2;    /* 和文見出し */
    --ls-base:     0.08em;
    --ls-head:     0.02em;
    --ls-eyebrow:  0.18em;
    --measure:     32em;   /* 和文1行 25〜35字 */
    --measure-sm:  28em;

    /* ── 8pt スペーシング ───────────────────────────────────── */
    --s-8: 8px;    --s-16: 16px;  --s-24: 24px;  --s-32: 32px;
    --s-40: 40px;  --s-48: 48px;  --s-56: 56px;  --s-64: 64px;
    --s-80: 80px;  --s-96: 96px;  --s-120: 120px; --s-160: 160px;
    --section-py:  clamp(72px, 6.8vw, 104px);   /* 上下対称（B-11.5）。PCで広い指摘あり（2026-09-28 修正指示 #12）で ×0.7 */
    --gutter:      clamp(24px, 5vw, 64px);
    --wrap:        1240px;
    --header-h:    112px;

    /* ── 角丸は3段（ピル／カード16px／パネル24px）。写真はカードと同じ角丸
       （2026-09-28 修正指示 #8「画像は普通の角丸に」で形マスクを廃止）── */
    --r-pill: 999px;
    --r-card: 16px;
    --r-panel: 24px;
    --r-photo: var(--r-card);

    /* ── モーション（イージング1本・秒数は発明しない）───────── */
    --ease-out:      cubic-bezier(.23, 1, .32, 1);
    --ease-standard: cubic-bezier(.4, 0, .2, 1);
    --d-fast: .2s;  --d-base: .3s;  --d-slow: .6s;
    --stagger: .14s;

    /* ── アイコン（SVG直書きを禁止し、マスク用データURIを1箇所で持つ）── */
    --ico-tel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M6.6 2.5a1.6 1.6 0 0 1 2.2.5l1.7 2.7c.4.7.3 1.6-.3 2.1l-1.2 1c-.2.2-.3.5-.2.8.6 1.5 2.2 3.8 4.2 5 .3.2.6.1.8-.1l1-1.1c.5-.6 1.4-.7 2.1-.3l2.7 1.7c.7.4.9 1.4.5 2.2l-.9 1.5c-.5.9-1.5 1.4-2.5 1.3C12.8 19.1 5 11.3 4 5.1c-.1-1 .4-2 1.3-2.5l1.3-.1Z'/%3E%3C/svg%3E");
}

/* =====================================================================
   ベース（_global.css は読み込まないのでここで完結させる）
===================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 16px);
    overflow-x: clip;
}

body {
    margin: 0;
    background: var(--c-bg);
    color: var(--c-text);
    font-family: var(--font-body);
    font-size: var(--fz-body);
    font-weight: 400;
    line-height: var(--lh-base);
    letter-spacing: var(--ls-base);
    overflow-x: clip;
    /* 和文組版（kiso.css / デジタル庁DADS 由来。未対応ブラウザは素通り） */
    text-spacing-trim: space-first;
    text-autospace: normal;
    line-break: strict;
    hanging-punctuation: allow-end;
    overflow-wrap: anywhere;
    -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; }
img { height: auto; border-style: none; }
figure { margin: 0; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 900;
    line-height: var(--lh-sechead);
    letter-spacing: var(--ls-head);
    font-feature-settings: "palt";
}

a { color: inherit; text-decoration: none; }

:lang(ja) em, :lang(ja) i, :lang(ja) cite, :lang(ja) address { font-style: normal; }

:focus-visible {
    outline: 3px solid var(--c-brand-deep);
    outline-offset: 3px;
    border-radius: 2px;
}
/* 青い面・写真＋スクリムの上では濃青の枠が見えないので白にする */
.m-btn--onblue:focus-visible,
.m-cta :focus-visible,
.m-phero :focus-visible { outline-color: #fff; }

/* 数値・電話・日付は必ず角ゴ＋等幅数字（design_rules 数値可読性ルール） */
.m-num, .m-tel__no, .m-news__date, .m-step__no, .m-footer__dl dd {
    font-family: var(--font-body);
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}

.m-skip {
    position: absolute;
    inset-inline-start: 16px;
    inset-block-start: -100px;
    z-index: 200;
    padding: 12px 20px;
    background: var(--c-brand-deep);
    color: #fff;
    border-radius: var(--r-pill);
    font-size: var(--fz-sm);
    transition: inset-block-start var(--d-fast) var(--ease-out);
}
.m-skip:focus-visible { inset-block-start: 16px; }

/* 形マスクの定義用SVG（display:none にすると clipPath が効かない） */
.m-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* =====================================================================
   共通パーツ
===================================================================== */
.m-wrap {
    width: min(var(--wrap), calc(100% - var(--gutter) * 2));
    margin-inline: auto;
}

/* ── セクションの器（.c-section）──
   🚨 Section.astro が出す .c-section / data-bg は**ここでしか定義していない**。
      2026-09-24 に data-bg へ移行したとき、この定義を入れ忘れて
      「全セクションの padding が 0・data-bg="sub" が白のまま」になっていた。
      背景は必ず data-bg で当て、モジュール側に background を直書きしない。 */
.c-section { padding-block: var(--section-py); }
.c-section[data-bg="white"] { background-color: var(--c-bg); }
.c-section[data-bg="sub"]   { background-color: var(--c-bg-sub); }

/* 同じ地色が隣接したら、境目の余白を半分ずつにして「合わせて1セクション分」にする
   （design_rules「セクション余白のシンメトリールール」と同じ思想） */
.c-section[data-bg="white"]:has(+ .c-section[data-bg="white"]),
.c-section[data-bg="sub"]:has(+ .c-section[data-bg="sub"]) {
    padding-block-end: calc(var(--section-py) / 2);
}
.c-section[data-bg="white"] + .c-section[data-bg="white"],
.c-section[data-bg="sub"] + .c-section[data-bg="sub"] {
    padding-block-start: calc(var(--section-py) / 2);
}

/* セクション末尾の「もっと見る」導線の上余白（章内の余白より広く、章間より狭く） */
/* 本文→「一覧へ」ボタン。広すぎる指摘あり（2026-09-28 修正指示 #10） */
.m-more { margin-block-start: clamp(32px, 3.6vw, 48px); }

/* 極薄の青の円（背景の工夫。ページ内で2箇所だけ・平面塗り） */
.m-blob {
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    background: rgba(0, 157, 217, .04);
    pointer-events: none;
}
/* =====================================================================
   登場アニメーション（transform / opacity のみ・--ease-out 1本・--stagger 刻み）
===================================================================== */
/* 遅延段数は data-i="0"〜"5" で宣言する（インライン style を使わないため） */
[data-i="0"] { --i: 0; }
[data-i="1"] { --i: 1; }
[data-i="2"] { --i: 2; }
[data-i="3"] { --i: 3; }
[data-i="4"] { --i: 4; }
[data-i="5"] { --i: 5; }

[data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity var(--d-slow) var(--ease-out), transform var(--d-slow) var(--ease-out);
    transition-delay: calc(var(--i, 0) * var(--stagger));
}
[data-reveal].is-inview { opacity: 1; transform: none; }

/* ヘッダー高さはトークンで持つ（ハンバーガーの正方形サイズもこれに追従する） */
@media screen and (max-width: 960px) {
    :root { --header-h: 88px; }
}

/* SP下部の追従バーの分だけ本文の下を空ける（バーは FloatingBar が出す） */
@media screen and (max-width: 767px) {
    body { padding-block-end: 64px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    [data-reveal] { opacity: 1; transform: none; transition: none; }
    .m-drawer__panel, .m-drawer__veil { transition: none; }
}

/* =====================================================================
   パンくず（src/components/Breadcrumb.astro 用）
   _global.css を読み込まないので、ここで最小限のスタイルを持つ。
===================================================================== */
.l-container {
    width: min(var(--wrap), calc(100% - var(--gutter) * 2));
    margin-inline: auto;
}
.c-breadcrumb { padding-block: var(--s-24) var(--s-32); }
.c-breadcrumb__list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    font-size: var(--fz-xs);
    line-height: 1.8;
    color: var(--c-text-sub);
}
.c-breadcrumb__item { display: flex; align-items: center; }
.c-breadcrumb__arrow {
    inline-size: 8px;
    block-size: 8px;
    margin-inline: 10px;
    flex: none;
    border-block-start: 1px solid var(--c-line);
    border-inline-end: 1px solid var(--c-line);
    transform: rotate(45deg);
}
.c-breadcrumb__link {
    color: var(--c-brand-deep);
    transition: color var(--d-base) var(--ease-standard);
}
.c-breadcrumb__link:hover { color: var(--c-text); text-decoration: underline; }
.c-breadcrumb__link:active { opacity: .7; }
.c-breadcrumb__current { color: var(--c-text-sub); }