/* 新型 base.css — 土台（文字・余白・地）。**ここに16進の色を書かない。**
   色はすべて themes/<会社ID>.css の変数から取る（コーデックス 9/23・9/24 の両方の批評）。
   検算：grep -n "#[0-9a-fA-F]\{3,8\}" base.css components.css → 0件であること。 */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 64px;
}

body {
  margin: 0;
  background: var(--color-page);
  color: var(--color-text);
  font-family: "Noto Sans JP", "Hiragino Sans", sans-serif;
  /* 旧型は 15.5px・行高1.95・字間あり＝間延びしていた（両方の批評で指摘） */
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0;
  -webkit-text-size-adjust: 100%;
  /* 旧型は body 全体に overflow-wrap:anywhere で社名まで不自然に切れていた */
  overflow-wrap: normal;
  line-break: strict;
  font-feature-settings: "palt";
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--color-brand); }

.wrap {
  width: min(100% - 32px, 980px);
  margin-inline: auto;
}
.wrap.narrow { width: min(100% - 32px, 760px); }

/* 読み物の行長は42em まで（日本語で1行が長すぎると読み飛ばされる） */
.prose { max-inline-size: 42em; }

section { padding-block: 56px; }

h1, h2, h3 {
  line-height: 1.5;
  letter-spacing: .02em;
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: clamp(26px, 4.6vw, 38px); }
h2 { font-size: clamp(20px, 3vw, 26px); }
h3 { font-size: 17px; }
p { margin: 0 0 1em; }
ul { margin: 0 0 1em; padding-left: 1.2em; }

/* URLと出所だけは途中で折り返してよい */
.src, a[href^="http"] { overflow-wrap: anywhere; }

.src {
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--color-text-muted);
}

/* JavaScript が動かないときに本文が消えないようにする（旧型は .reveal が opacity:0 のままだった） */
.reveal { opacity: 1; transform: none; }
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .5s, transform .5s; }
.js .reveal.on { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1; transform: none; }
}

@media (max-width: 640px) {
  section { padding-block: 40px; }
  .wrap { width: min(100% - 28px, 980px); }
}
/* 新型 components.css — 部品。**ここにも16進の色を書かない。** */

/* ── 提案用の帯（デモのときだけ出す） ───────────────────────── */
.demo-bar {
  background: var(--color-notice-bg);
  color: var(--color-notice-text);
  border-bottom: 1px solid var(--color-notice-line);
  font-size: 13px;
  line-height: 1.7;
  padding: 10px 16px;
  text-align: center;
}
/* 公開版（body に is-demo が無い）では、提案専用の要素をまるごと消す。
   ②-2のコーデックス批評「提案表示と公開表示を分離せよ」 */
body:not(.is-demo) .only-demo { display: none !important; }

/* ── ヘッダー ────────────────────────────────────────── */
.top {
  position: sticky; top: 0; z-index: 20;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
.top .wrap { display: flex; align-items: center; gap: 14px; min-height: 60px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--color-text); }
.brand .logo { height: 28px; width: auto; }
.brand .co { font-weight: 700; font-size: 15px; }
.top nav { margin-left: auto; display: flex; align-items: center; gap: 16px; font-size: 13.5px; }
.top nav a:not(.btn) { color: var(--color-text-muted); text-decoration: none; }
.top nav a:not(.btn):hover { color: var(--color-brand); }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 22px; border-radius: 3px;
  font-weight: 700; text-decoration: none; border: 1px solid transparent;
  background: var(--color-brand); color: var(--color-on-brand);
}
.btn:hover { background: var(--color-brand-strong); }
.btn.small { min-height: 40px; padding: 0 16px; font-size: 14px; }
.btn.accent { background: var(--color-accent); color: var(--color-on-accent); }
.btn.ghost { background: transparent; color: var(--color-on-dark); border-color: var(--color-on-dark); }

/* ── 1 ヒーロー（主役は職種と条件。会社のキャッチは下に小さく） ───────── */
.hero {
  position: relative;
  background: var(--color-dark-surface);
  color: var(--color-on-dark);
  min-height: auto;            /* 旧型は 520〜600px 固定で縦に伸びていた */
  overflow: hidden;
}
.hero .pic { position: absolute; inset: 0; margin: 0; }
.hero .pic img { width: 100%; height: 100%; object-fit: cover; }
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--color-hero-veil-top), var(--color-hero-veil-bottom));
}
.hero.nopic::after {
  background: radial-gradient(circle at 88% 12%, var(--color-hero-glow), transparent 46%),
              linear-gradient(180deg, var(--color-hero-veil-top), var(--color-hero-veil-bottom));
}
.hero .wrap { position: relative; z-index: 1; padding-block: clamp(48px, 8vw, 88px); }
.hero .eyebrow { font-size: 13px; color: var(--color-on-dark-muted); margin: 0 0 10px; }
.hero h1 { color: var(--color-on-dark); }
.hero .catch { margin: 14px 0 0; font-size: 15px; color: var(--color-on-dark-muted); max-inline-size: 36em; }
.hero .mark { margin: 0 0 20px; width: 150px; background: var(--color-surface); padding: 10px 14px; border-radius: 4px; }
.hero .mark img { width: 100%; }

/* 条件（給与・時間・休日・勤務地）をH1の直下に */
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 22px 0 0; padding: 0; list-style: none; }
.facts li { background: var(--color-dark-panel); border-left: 3px solid var(--color-accent); padding: 10px 14px; }
.facts .k { display: block; font-size: 12px; color: var(--color-on-dark-muted); }
.facts .v { font-size: 16px; font-weight: 700; }
.hero .cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }

/* ── 2 募集職種（details で1件ずつ開く。summaryに主要条件） ──────────── */
.jobs { background: var(--color-page); }
.job { border: 1px solid var(--color-border); border-top: 3px solid var(--color-brand); background: var(--color-surface); border-radius: 3px; margin-bottom: 14px; }
.job > summary { list-style: none; cursor: pointer; padding: 18px 20px; display: grid; gap: 8px; }
.job > summary::-webkit-details-marker { display: none; }
.job > summary::after { content: "＋ 詳しく見る"; font-size: 13.5px; color: var(--color-brand); font-weight: 700; }
.job[open] > summary::after { content: "− 閉じる"; }
.job h3 { color: var(--color-brand-strong); }
.job .pay { font-size: 18px; font-weight: 700; color: var(--color-text); }
.job .line { font-size: 13.5px; color: var(--color-text-muted); }
.job .tags { display: flex; flex-wrap: wrap; gap: 6px; }
.job .tags span { font-size: 12px; border: 1px solid var(--color-border); border-radius: 2px; padding: 1px 8px; color: var(--color-text-muted); }
.job .body { padding: 0 20px 20px; border-top: 1px solid var(--color-hairline); }

/* 重要条件の表（畳まない） */
table.spec { width: 100%; border-collapse: collapse; font-size: 14.5px; }
table.spec th, table.spec td { border-bottom: 1px solid var(--color-hairline); padding: 10px 12px; text-align: left; vertical-align: top; }
table.spec th { width: 30%; font-weight: 500; color: var(--color-text-muted); background: var(--color-surface-muted); }

/* 二段目（その他の条件）は畳む。ただし不利になり得る条件は畳まない */
.more { margin: 16px 0 0; border-block: 1px solid var(--color-border); }
.more > summary { cursor: pointer; min-height: 52px; display: flex; align-items: center; font-weight: 700; color: var(--color-brand); font-size: 14.5px; }

/* ── 3 応募・選考 ────────────────────────────────────── */
.flow { background: var(--color-surface); }
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.steps li { display: grid; grid-template-columns: 28px 1fr; column-gap: 12px; row-gap: 2px; align-items: start; }
/* 番号は1列目、文字はぜんぶ2列目。指定しないと2つ目以降の要素が1列目（28px幅）に落ちて、
   1文字ずつ縦に並ぶ（②が実物を見て気づいた 2026-09-24） */
.steps li::before { grid-column: 1; grid-row: 1; content: counter(step); counter-increment: step; width: 28px; height: 28px; border-radius: 50%; background: var(--color-brand); color: var(--color-on-brand); display: grid; place-items: center; font-size: 13px; font-weight: 700; }
.steps li > b, .steps li > span { grid-column: 2; }
.steps { counter-reset: step; }
.steps b { display: block; }

/* ── 4 仕事と会社を知る（事業内容・理念・写真を1区画に統合） ──────────── */
.know { background: var(--color-page); }
.know .lead { font-size: 15.5px; }
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 20px 0 0; }
.gallery figure { margin: 0; }
.gallery img { aspect-ratio: 4 / 3; object-fit: cover; background: var(--color-surface-muted); border-radius: 2px; }
.gallery figcaption { font-size: 12.5px; color: var(--color-text-muted); margin-top: 6px; }

/* ── 5 勤務地・会社概要 ───────────────────────────────── */
.company { background: var(--color-surface); }
.map { border: 1px solid var(--color-border); border-radius: 2px; overflow: hidden; background: var(--color-surface-muted); }
.map iframe { display: block; width: 100%; height: 300px; border: 0; }

/* ── 6 契約後に追加できる内容（空欄枠は散らさず、ここに1つだけ） ───────── */
.later { background: var(--color-surface-muted); }
.later .box { border: 1px dashed var(--color-brand); border-radius: 3px; padding: 20px 22px; background: var(--color-surface); }
.later ul { margin: 10px 0 0; }

/* ── 7 応募（濃い面はここだけ。旧型は会社紹介にも濃い帯があり、
        募集要項より先に視覚のピークが来ていた＝②の批評） ─────────── */
.apply { background: var(--color-dark-surface); color: var(--color-on-dark); }
.apply h2 { color: var(--color-on-dark); }
.apply .note { background: var(--color-dark-panel); border-left: 3px solid var(--color-accent); padding: 14px 16px; margin: 0 0 20px; font-size: 14.5px; }
.apply label { display: block; font-size: 13.5px; margin: 14px 0 6px; }
.apply input, .apply select, .apply textarea {
  width: 100%; font: inherit; padding: 12px; border-radius: 3px;
  border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text);
}
.apply .fine { font-size: 12.5px; color: var(--color-on-dark-muted); margin-top: 10px; }

/* ── フッター（出所はここに1つにまとめる） ────────────────────── */
footer { background: var(--color-footer); color: var(--color-on-footer); padding: 40px 0 32px; font-size: 13.5px; }
footer a { color: var(--color-footer-link); }
footer .sources > summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; }
footer .sources .src { color: var(--color-on-footer); }

@media (max-width: 760px) {
  .gallery { grid-template-columns: 1fr 1fr; }
  .facts { grid-template-columns: 1fr; }
  .top nav a:not(.btn) { display: none; }
  /* ロゴがある社は、狭い画面で社名の文字を省く（ヘッダーが2行になるのを防ぐ） */
  .brand.has-logo .co { display: none; }
  .demo-bar { font-size: 12px; text-align: left; }
}
@media (max-width: 640px) {
  /* 募集要項の表は縦積み（旧型は th 30% で日本語がバラバラに折れていた） */
  table.spec, table.spec tbody, table.spec tr, table.spec th, table.spec td { display: block; width: 100%; }
  table.spec tr { padding-block: 12px; border-bottom: 1px solid var(--color-border); }
  table.spec th, table.spec td { border: 0; padding: 0; }
  table.spec th { margin-bottom: 4px; background: transparent; font-size: 13px; font-weight: 700; }
}

/* 複数求人の社のヒーロー（1件目の条件を代表のように見せない） */
.hero .pick { margin: 20px 0 0; padding: 14px 16px; background: var(--color-dark-panel); border-left: 3px solid var(--color-accent); font-size: 15px; max-inline-size: 34em; }

/* 会社からのメッセージ（求人票の「事業所からのメッセージ」。募集職種のすぐ後ろ） */
.message { background: var(--color-surface-muted); }
.message h3 { color: var(--color-brand-strong); margin-top: 1.2em; }

/* ── 9/25第3章の並びに合わせて足した区画（本人決定 2026-09-27） ─────────── */
.miryoku, .senpai, .ichinichi, .qa { background: var(--color-page); }
.omoi { background: var(--color-surface); }
.shashin { background: var(--color-surface); }
.fukuri { background: var(--color-surface-muted); }
.know { background: var(--color-page); }

/* 契約後に埋める欄。末尾にまとめず、本文の途中に置く形に戻した */
.blank {
  border: 1px dashed var(--color-brand);
  border-radius: 3px;
  padding: 18px 20px;
  background: var(--color-surface);
  margin: 14px 0 0;
}
.blank h3 { color: var(--color-brand-strong); margin: 0 0 6px; }
.blank p { margin: 0 0 .4em; }
.blank .fine { font-size: 12.5px; color: var(--color-text-muted); margin: 0; }

/* 一日の流れ */
.timeline { list-style: none; padding: 0; margin: 0 0 4px; display: grid; gap: 10px; }
.timeline li { display: grid; grid-template-columns: 120px 1fr; column-gap: 12px; align-items: start; }
.timeline .t { font-weight: 700; color: var(--color-brand-strong); font-size: 14.5px; }
@media (max-width: 640px) { .timeline li { grid-template-columns: 1fr; row-gap: 2px; } }

/* 応募区画の中に入れた選考の流れ（濃い面の上） */
.apply .steps li::before { background: var(--color-accent); color: var(--color-on-accent); }
.apply .steps b, .apply .steps span { color: var(--color-on-dark); }
.apply .steps { margin-bottom: 20px; }

/* 架空と明記する札（見本のときだけ出る）。本人決定 2026-09-27 04:2x。
   ヒーローの見出しの直前に置く＝いちばん最初に目に入る位置。
   色は themes/ の変数から取る（ここに16進の色は書かない）。 */
.hero .fiction {
  display: inline-block;
  margin: 0 0 10px;
  padding: 5px 12px;
  border: 1px solid var(--color-notice-line);
  border-radius: 3px;
  background: var(--color-notice-bg);
  color: var(--color-notice-text);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .02em;
}

/* 入力できない見本のフォーム＝「押せない」ことが見て分かる形にする〈⓪ 08:37〉 */
form :disabled {
  opacity: .55;
  cursor: not-allowed;
}
/* themes/ydigital.css — 山口デジタルエージェント（自社題材の見本）。**このファイルだけが色を持つ。**
   出どころ：corporate-site/common.css の実測値（自社サイト担当が2026-09-27に渡したもの）
     --ink #1a1a1a ／ --green #22c55e ／ --cream #fafaf7 ／ --beige #f5f5f2
     --mid-gray #737373 ／ --sub-gray #a3a3a3 ／ --gray-200 #e5e5e5

   ⚠ #22c55e をそのまま文字に使えないので、用途で分けた（②が計算して確認）
       #22c55e の地#fafaf7 上の文字 … 2.18  ← 文字には使えない
       白文字を #22c55e に載せる    … 2.28  ← ボタンの文字にも使えない
       墨文字 #1a1a1a を #22c55e に … 7.64  ← **ボタンの面としては使える**
     → 文字用は同じ色相を暗くした #11602c（白地 7.68／地 7.35）。
       #22c55e は**差し色（ボタンの面・線）**に回し、その上の文字は墨にする。
       自社サイトが「CTAと強調だけに緑、地はcream、文字はink」としているのと同じ使い分け。 */
:root{
  --color-page:#fafaf7;
  --color-surface:#ffffff;
  --color-surface-muted:#f5f5f2;
  --color-hairline:#eeeeec;
  --color-border:#e5e5e5;

  --color-text:#1a1a1a;
  --color-text-muted:#5f5f5f;      /* 実測の #737373 は地の上で 4.53 と際どいので少し締めた */

  --color-brand:#11602c;           /* 文字用の緑（#22c55e と同じ色相） */
  --color-brand-strong:#0d4a22;
  --color-accent:#22c55e;          /* 自社サイトの緑そのまま。面にだけ使う */

  --color-on-brand:#ffffff;
  --color-on-accent:#1a1a1a;       /* 緑の面の上は墨（7.64） */

  --color-dark-surface:#1a1a1a;
  --color-dark-panel:rgba(255,255,255,.10);
  --color-on-dark:#fafaf7;
  --color-on-dark-muted:#c9c9c4;
  --color-hero-veil-top:rgba(20,20,20,0.78);
  --color-hero-veil-bottom:rgba(12,12,12,.88);
  --color-hero-glow:rgba(34,197,94,.18);

  --color-footer:#141414;
  --color-on-footer:#c9c9c4;
  --color-footer-link:#4ade80;     /* 濃い面の上のリンク（#1a1a1a 上で 9.99） */

  --color-notice-bg:#fff8e6;
  --color-notice-text:#5a4400;
  --color-notice-line:#eadcb4;
}