@charset "UTF-8";
/* ============================================================
   JOBZAP 2nd HP — style.css
   骨格の出典: revive.gift 実測 (_reference/tokens/tokens.json)
   大義: 個が輝く社会 / 敵: 「こうあるべき」という固定観念 (docs/copy-system.md v2)

   最優先ルール: 参考サイトの骨格と JOBZAP ブランド指定が衝突したら
   参考サイトを優先する。背景の反転は禁止（1本目の敗因）。
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root {
  /* 背景は3値のみ。増やさない */
  --surface-base:   #000000;  /* 断定して聞かせる場所 */
  --surface-muted:  #1f1f1f;  /* 一覧もの */
  --surface-raised: #f2f2f2;  /* 明転＝読んで理解させる場所 */

  --text-primary:   #ffffff;
  --text-on-raised: #000000;
  --text-dim:       #8b8b8b;
  --hero-overlay:   rgba(0, 0, 0, .6);

  /* 唯一の有彩色。参考サイトの緑階調のスロットを JOBZAP ブルーに置換 */
  --accent-1: #94d5ff;
  --accent-2: #007fc6;
  --accent-3: #005a91;
  --accent-4: #013a63;

  /* 余白。中間値を作らない */
  --sp-xs:  20px;
  --sp-sm:  30px;
  --sp-md:  50px;
  --sp-lg:  56px;
  --sp-xl: 160px;

  --container: 1130px;
  --gutter: clamp(20px, 5vw, 60px);

  --ff-jp:    "Zen Kaku Gothic Antique", system-ui, sans-serif;
  --ff-label: "Archivo", "Helvetica Neue", Arial, sans-serif; /* extended系の代替 */
  /* 参考サイトのヒーローは手書き画像。ブランドボードにも手書きフォント案があるため
     大義（層①）だけ手書き系にする。将来 手書き画像に差し替え可能 */
  --ff-hand:  "Yuji Boku", var(--ff-jp);

  /* 行間 2.2 倍がこのサイトの肝。詰めない */
  --lh-body: 2.2;
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--surface-base);
  color: var(--text-primary);
  font-family: var(--ff-jp);
  font-size: 16px;
  font-weight: 500;
  line-height: var(--lh-body);
  letter-spacing: -.016px;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* フォーカスはキーボード操作のときだけ出す。
   有彩色はブルー階調のみ。黒ゾーンは明るい側、明転ゾーンは濃い側を使う */
:focus-visible { outline: 3px solid var(--accent-1); outline-offset: 3px; }
.section--raised :focus-visible,
.footer :focus-visible { outline-color: var(--accent-3); }

/* 本文へスキップ。フォーカスされるまで画面外に置く */
.skiplink {
  position: fixed; top: 0; left: 0; z-index: 60;
  transform: translateY(-100%);
  padding: var(--sp-xs) var(--sp-sm);
  background: var(--surface-raised); color: var(--text-on-raised);
  font-size: 13px; line-height: 1.6;
}
.skiplink:focus-visible { transform: none; outline-offset: -3px; }
#main:focus { outline: none; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* 英字ラベル。意味を運ばない標識として置く */
.label {
  font-family: var(--ff-label);
  font-weight: 600;
  font-stretch: 125%;
  font-size: 48px;
  line-height: 1.29;
  letter-spacing: .01em;
  margin: 0 0 var(--sp-md);
}
@media (max-width: 767px) { .label { font-size: 32px; } }

/* ---------- 3. Header ---------- */
.header {
  position: fixed; inset: 0 0 auto; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-xs) var(--gutter);
  mix-blend-mode: difference;
}
.header__logo {
  font-family: var(--ff-label);
  font-weight: 700; font-stretch: 125%;
  font-size: 20px; letter-spacing: .06em;
}
.header__nav { display: flex; gap: var(--sp-sm); font-size: 13px; }
@media (max-width: 767px) { .header__nav { display: none; } }

/* ハンバーガー。768px 未満でナビが消えるだけの状態を塞ぐ。
   header の mix-blend-mode: difference をそのまま受けるので線は白のまま出る */
.header__burger { display: none; }
.navpanel { display: none; }

@media (max-width: 767px) {
  .header__burger {
    display: block;
    width: var(--sp-md); height: var(--sp-md);   /* 50px = タップ領域 */
    margin-right: calc(var(--sp-xs) * -1);
    padding: 0; border: 0; background: none; cursor: pointer;
  }
  .header__burger-line {
    display: block;
    width: var(--sp-sm); height: 2px;            /* 30px */
    margin-inline: auto;
    background: var(--text-primary);
    transition: transform .2s ease;
  }
  .header__burger-line + .header__burger-line { margin-top: 8px; }
  .header__burger[aria-expanded="true"] .header__burger-line:first-child {
    transform: translateY(5px) rotate(45deg);
  }
  .header__burger[aria-expanded="true"] .header__burger-line:last-child {
    transform: translateY(-5px) rotate(-45deg);
  }

  /* パネルは黒（断定して聞かせる側）。背景3値から外れる色を足さない */
  .navpanel {
    display: block;
    position: fixed; inset: 0; z-index: 40;
    background: var(--surface-base);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--sp-md) var(--gutter) var(--sp-md);
  }
  .navpanel[hidden] { display: none; }
  .navpanel__inner { display: flex; flex-direction: column; }
  .navpanel__item {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--sp-xs);
    padding-block: calc(var(--sp-sm) - var(--sp-xs));   /* 10px */
    border-bottom: 1px solid var(--surface-muted);
  }
  .navpanel__en {
    font-family: var(--ff-label);
    font-weight: 600; font-stretch: 125%;
    font-size: 20px; line-height: 1.6; letter-spacing: .02em;
  }
  .navpanel__jp { font-size: 13px; line-height: 1.6; color: var(--text-dim); }
  .navpanel__sub {
    display: flex; flex-wrap: wrap; gap: var(--sp-xs);
    margin-top: var(--sp-sm);
    font-family: var(--ff-label);
    font-size: 13px; letter-spacing: .02em;
    color: var(--text-dim);
  }
}

/* パネルを開いている間は背後を動かさない */
body.is-navopen { overflow: hidden; }

/* ---------- 4. Hero ---------- */
.hero { position: relative; height: 100vh; min-height: 560px; overflow: hidden; background: #000; }
.hero__media { position: absolute; inset: 0; }
.hero__media img,
.hero__media video {
  width: 100%; height: 100%; object-fit: cover;
  /* 動画素材がゼロのため、静止画をゆっくり寄せて動画に近い体験を作る */
  transform-origin: 58% 46%;
  animation: hero-zoom 24s ease-out forwards;
}
@keyframes hero-zoom { from { transform: scale(1); } to { transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) {
  .hero__media img, .hero__media video { animation: none; transform: scale(1.04); }
}
.hero__overlay { position: absolute; inset: 0; background: var(--hero-overlay); }
.hero__inner {
  position: relative; height: 100%;
  display: flex; flex-direction: column; justify-content: center;
}
/* 層① 大義。事業の話・数字・サービス名を書かない（厳守）
   手書き系フォントで revive のヒーロー（手書き画像）の性格に寄せる */
.hero__copy {
  margin: 0;
  font-family: var(--ff-hand);
  font-size: clamp(32px, 5.4vw, 72px);
  font-weight: 400;
  line-height: 1.62;
  letter-spacing: .04em;
}
.hero__scroll {
  position: absolute; left: var(--gutter); bottom: var(--sp-sm);
  font-family: var(--ff-label); font-size: 11px; letter-spacing: .2em;
  color: var(--text-dim);
}

/* 見出しは行を均して割る。末尾の2文字だけが落ちる見た目を避ける */
.creed__head, .feature__head, .card__lead, .step__head, .plain__head, .qa__q, .product__name { text-wrap: balance; }

/* ---------- 5. Sections ---------- */
.section { padding-block: var(--sp-xl); }
.section--muted  { background: var(--surface-muted); }
.section--raised { background: var(--surface-raised); color: var(--text-on-raised); }
@media (max-width: 767px) { .section { padding-block: calc(var(--sp-xl) - var(--sp-lg)); } } /* 160-56 */

/* Topics 一覧 */
.topics__list { list-style: none; margin: 0; padding: 0; }
.topics__item { border-top: 1px solid rgba(255,255,255,.14); }
.topics__item:last-child { border-bottom: 1px solid rgba(255,255,255,.14); }
.topics__link {
  display: grid; grid-template-columns: 120px 1fr; gap: var(--sp-xs);
  padding-block: var(--sp-xs);
  line-height: 1.63; /* 一覧は 16px/26px。本文の2.2倍とは別 */
  transition: opacity .4s;
}
.topics__link:hover { opacity: .55; }
.topics__date { font-family: var(--ff-label); font-size: 13px; color: var(--text-dim); }
@media (max-width: 767px) {
  .topics__link { grid-template-columns: 1fr; gap: 6px; }
}

/* 理念。断定して聞かせる場所なので黒地 */
.creed__head {
  margin: 0 0 var(--sp-md);
  font-size: clamp(26px, 3.4vw, 44px);
  font-weight: 500;
  line-height: 1.41;
}
.creed__body { margin: 0; max-width: 40em; }
@media (min-width: 768px) { .creed__body { font-size: 18px; } }
.creed__body + .creed__body { margin-top: var(--sp-sm); }
.creed__accent { color: var(--accent-1); }
/* 層④ 伴走の約束。既存ブランドタグラインをここに置く */
.creed__sign {
  margin: var(--sp-md) 0 0;
  font-family: var(--ff-hand);
  font-size: clamp(24px, 2.8vw, 38px);
  line-height: 1.7;
  letter-spacing: .05em;
}

/* ---------- 6. 主力サービス ----------
   参考サイトは商品名のみ Noto Sans JP 900。書体の役割分担を守る */
.product__name {
  margin: 0 0 var(--sp-md);
  font-family: "Noto Sans JP", var(--ff-jp);
  font-weight: 900;
  font-size: clamp(28px, 3.3vw, 42px);
  line-height: 1.45;
  letter-spacing: .01em;
}
.product__copy p { margin: 0; max-width: 46em; }
.product__copy p + p { margin-top: var(--sp-sm); }
/* 具体例 → 問い → 反復 → 結論 の「問い」だけ間を空ける */
.product__q { color: var(--text-dim); }

.btn {
  display: inline-block; margin-top: var(--sp-md);
  padding: 16px 40px;
  border: 1px solid rgba(255,255,255,.4);
  font-family: var(--ff-label); font-size: 13px;
  font-stretch: 125%; letter-spacing: .08em;
  transition: background .4s, color .4s, border-color .4s;
}
.btn:hover { background: #fff; color: #000; border-color: #fff; }
.section--raised .btn { border-color: rgba(0,0,0,.35); }
.section--raised .btn:hover { background: #000; color: #fff; border-color: #000; }
/* 2つ並ぶときの従。枠線を透過させて主従を作る（色も余白も足さない） */
.btn--quiet,
.section--raised .btn--quiet { border-color: transparent; padding-inline: 0; }

/* ---------- 7. 明転バンド（参考サイトの Media スロット pt,pb=56） ---------- */
.section--band { padding-block: var(--sp-lg); }
.numbers {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-sm);
}
.numbers__item { display: flex; flex-direction: column; gap: 6px; }
.numbers__val {
  font-family: var(--ff-label); font-weight: 600; font-stretch: 110%;
  font-size: clamp(24px, 2.6vw, 34px); line-height: 1.2;
}
.numbers__val small { font-family: var(--ff-jp); font-size: 14px; margin-left: 4px; }
.numbers__key { font-size: 12px; line-height: 1.7; color: #5a5a5a; }
/* 自社の数字だけ立てる。.ptable .is-own と同じ考え方で、色は増やさない */
.numbers__item--own .numbers__val { color: var(--accent-3); }
.numbers__note { margin: var(--sp-sm) 0 0; font-size: 11px; line-height: 1.8; color: #5a5a5a; }
.numbers--4 { grid-template-columns: repeat(4, 1fr); }
/* 明転セクションの先頭に置く数字。続く見出しとの間を空ける */
.numbers--lead { margin-bottom: var(--sp-xl); }
@media (max-width: 767px) { .numbers--lead { margin-bottom: var(--sp-lg); } }
@media (max-width: 767px) { .numbers, .numbers--4 { grid-template-columns: repeat(2, 1fr); } }

/* ---------- 8. Service カード ---------- */
.cards {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-md);
}
.card { border-top: 1px solid rgba(255,255,255,.18); padding-top: var(--sp-sm); }
.card__no {
  font-family: var(--ff-label); font-size: 12px; letter-spacing: .2em;
  /* 唯一の有彩色。参考サイトの緑階調のスロットを JOBZAP ブルーに置換 */
  color: var(--accent-1);
}
.card__name {
  margin: 14px 0 4px;
  font-family: "Noto Sans JP", var(--ff-jp); font-weight: 900;
  font-size: clamp(22px, 2.2vw, 28px); line-height: 1.4;
}
.card__en {
  margin: 0 0 var(--sp-xs);
  font-family: var(--ff-label); font-size: 11px; font-stretch: 115%;
  letter-spacing: .1em; color: var(--text-dim);
}
.card__lead { margin: 0 0 14px; font-size: 18px; line-height: 1.8; }
.card__body { margin: 0; font-size: 14px; line-height: 2; color: #c9c9c9; }
.card__link {
  display: inline-block; margin-top: var(--sp-xs);
  font-family: var(--ff-label); font-size: 12px; letter-spacing: .08em;
  border-bottom: 1px solid rgba(255,255,255,.35); padding-bottom: 4px;
  transition: opacity .4s;
}
.card__link:hover { opacity: .55; }
@media (max-width: 900px) { .cards { grid-template-columns: 1fr; gap: var(--sp-lg); } }

/* ---------- 9. Company 導線 ---------- */
.navcards {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: rgba(255,255,255,.14);
}
.navcard {
  display: flex; flex-direction: column; gap: 10px; justify-content: center;
  min-height: 180px; padding: var(--sp-sm);
  background: var(--surface-muted);
  transition: background .4s;
}
.navcard:hover { background: color-mix(in srgb, var(--surface-muted), #fff 7%); }
.navcard__en {
  font-family: var(--ff-label); font-weight: 600; font-stretch: 125%;
  font-size: clamp(24px, 2.6vw, 34px); line-height: 1.2;
}
.navcard__jp { font-size: 13px; color: var(--text-dim); }
@media (max-width: 767px) { .navcards { grid-template-columns: 1fr; } }

/* ---------- 10. Recruit ---------- */
.section--tight { padding-block: calc(var(--sp-xl) - var(--sp-md)); } /* 160-50 */
.recruit__copy {
  margin: 0;
  font-size: clamp(22px, 2.8vw, 36px);
  line-height: 2.2; /* 参考サイトの採用見出しも 2.2 倍 */
  letter-spacing: .01em;
}

/* ---------- 11. 事業説明（層⑥ ここだけ実務説明） ---------- */
.plain { max-width: 58em; }
.plain__head {
  margin: 0 0 var(--sp-sm);
  font-size: clamp(20px, 2.1vw, 28px); font-weight: 500; line-height: 1.7;
}
.plain p { margin: 0; font-size: 14px; line-height: 2.1; }
.plain p + p { margin-top: var(--sp-xs); }

/* ---------- 12. Contact CTA 2枚 ---------- */
.cta { display: grid; grid-template-columns: 1fr 1fr; }
.cta__item {
  display: flex; flex-direction: column; gap: 12px;
  align-items: center; justify-content: center;
  min-height: 300px; padding: var(--sp-md) var(--gutter);
  background: var(--surface-base);
  border-top: 1px solid rgba(255,255,255,.14);
  transition: background .5s;
}
.cta__item + .cta__item { border-left: 1px solid rgba(255,255,255,.14); }
.cta__item:hover { background: color-mix(in srgb, var(--surface-base), #fff 8%); }
.cta__en {
  font-family: var(--ff-label); font-weight: 600; font-stretch: 125%;
  font-size: clamp(28px, 3.4vw, 44px); line-height: 1.2;
}
.cta__jp { font-size: 13px; color: var(--text-dim); }
.cta__item .cta__en { color: var(--accent-1); }
.cta__item--alt .cta__en { color: var(--text-primary); }
.cta--single { grid-template-columns: 1fr; }
@media (max-width: 767px) {
  .cta { grid-template-columns: 1fr; }
  .cta__item { min-height: calc(var(--sp-xl) + var(--sp-md)); } /* 210px。2枚で600pxの空き帯を作らない */
  .cta__item + .cta__item { border-left: 0; border-top: 1px solid rgba(255,255,255,.14); }
}

/* ---------- 13. Footer（明転） ---------- */
.footer { background: var(--surface-raised); color: var(--text-on-raised); padding-block: var(--sp-lg); border-top: 1px solid rgba(0,0,0,.08); }
.footer__inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-md); }
.footer__logo {
  margin: 0 0 10px;
  font-family: var(--ff-label); font-weight: 700; font-stretch: 125%;
  font-size: 18px; letter-spacing: .06em;
}
.footer__corp { margin: 0 0 10px; font-size: 13px; }
.footer__addr { margin: 0; font-size: 12px; line-height: 2; color: #5a5a5a; }
.footer__nav {
  display: grid; grid-template-columns: repeat(2, max-content); gap: 10px var(--sp-md);
  align-content: start; font-size: 13px;
}
.footer__nav a { transition: opacity .4s; }
.footer__nav a:hover { opacity: .5; }
.footer__copy {
  margin: var(--sp-md) 0 0; text-align: center;
  font-family: var(--ff-label); font-size: 11px; letter-spacing: .08em; color: #8a8a8a;
}
@media (max-width: 767px) { .footer__inner { grid-template-columns: 1fr; } }

/* ============================================================
   下層ページ用
   参考サイト実測: ページ見出しは英字80px/600 が主役、和文は20px未満。
   黒＝断定して聞かせる／明転＝読んで理解させる（_reference/skeleton/subpages.md）
   ============================================================ */

/* ---------- 14. ページ見出し ---------- */
.pagehead {
  background: var(--surface-muted);
  padding-block: calc(var(--sp-xl) - var(--sp-md)); /* 160-50 */
}
.pagehead__en {
  margin: 0;
  font-family: var(--ff-label);
  font-weight: 600; font-stretch: 125%;
  font-size: clamp(40px, 7.2vw, 80px);
  line-height: 1.16;
  letter-spacing: .01em;
}
.pagehead__jp {
  margin: var(--sp-xs) 0 0;
  font-size: 18px; /* 和文は20px未満に抑える */
  color: var(--text-dim);
}

/* ---------- 15. Feature（黒＝強みの宣言。短い断定） ---------- */
.features {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--sp-md);
}
.feature { border-top: 1px solid rgba(255,255,255,.18); padding-top: var(--sp-sm); }
.feature__head {
  margin: 0 0 14px;
  font-size: clamp(20px, 1.8vw, 24px); /* 参考サイト実測 26px/500。3列で2行に収まる上限 */
  font-weight: 500; line-height: 1.6;
}
.feature__body { margin: 0; font-size: 14px; line-height: 2; color: #c9c9c9; }
.section--raised .feature { border-top-color: rgba(0,0,0,.18); }
.section--raised .feature__body { color: #4a4a4a; }
.features--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 767px) { .features--2 { grid-template-columns: 1fr; } }

.note { margin: var(--sp-sm) 0 0; font-size: 11px; line-height: 1.9; color: var(--text-dim); }
.section--raised .note { color: #5a5a5a; }

/* ---------- 16. Steps（明転＝実務の手順）----------
   参考サイトは支援領域4カテゴリを緑の濃淡で工程順に表す。
   そのスロットを JOBZAP ブルーの階調に置換し、色はすべてトークンから導出する */
.steps { list-style: none; margin: 0 0 var(--sp-md); padding: 0; display: grid; gap: var(--sp-sm); }
.step {
  border-left: 4px solid var(--step-c, var(--accent-2));
  padding: 4px 0 4px var(--sp-sm);
}
.step--1 { --step-c: var(--accent-2); }
.step--2 { --step-c: color-mix(in srgb, var(--accent-2), var(--accent-3) 50%); }
.step--3 { --step-c: var(--accent-3); }
.step--4 { --step-c: var(--accent-4); }
.step__no {
  font-family: var(--ff-label); font-size: 11px;
  letter-spacing: .18em; color: var(--step-c);
}
.step__head { margin: 10px 0 8px; font-size: 20px; font-weight: 500; line-height: 1.6; }
.step__body { margin: 0; font-size: 14px; line-height: 2.1; max-width: 52em; }
/* 4工程は2列に割る。3工程は縦一列のまま読ませる */
.steps--4 { grid-template-columns: repeat(2, 1fr); gap: var(--sp-md); }
/* 6工程は階調も6段に導出する。4段のまま使うと同じ色が2回出て「同じ段階」に読める */
.steps--6 .step--2 { --step-c: color-mix(in srgb, var(--accent-2), var(--accent-3) 33%); }
.steps--6 .step--3 { --step-c: color-mix(in srgb, var(--accent-2), var(--accent-3) 66%); }
.steps--6 .step--4 { --step-c: var(--accent-3); }
.steps--6 .step--5 { --step-c: color-mix(in srgb, var(--accent-3), var(--accent-4) 50%); }
.steps--6 .step--6 { --step-c: var(--accent-4); }
@media (max-width: 767px) { .steps--4 { grid-template-columns: 1fr; } }

/* 明転ゾーンの中で見出しと本文の間隔を保つ */
.section--raised .plain__head { margin-bottom: var(--sp-sm); }
.section--raised .steps + .plain { margin-top: var(--sp-md); }
.section--raised .note + .plain { margin-top: var(--sp-md); }
.section--raised .plain + .steps { margin-top: var(--sp-md); }

/* ---------- 17. 比較表（明転＝事実の提示） ---------- */
.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* 横にはみ出す表だけ、スマホで合図を出す */
@media (max-width: 767px) {
  .tablewrap:has(.ptable:not(.ptable--profile))::before {
    content: "表は横にスクロールできます"; display: block;
    margin-bottom: 10px; font-size: 11px; color: #5a5a5a;
  }
}
.ptable { border-collapse: collapse; width: 100%; min-width: 720px; text-align: left; }
.ptable th, .ptable td {
  padding: var(--sp-xs);
  border-bottom: 1px solid rgba(0,0,0,.12);
  vertical-align: top;
  font-size: 14px; line-height: 1.9; font-weight: 500;
}
.ptable thead th { font-size: 13px; color: #5a5a5a; border-bottom-width: 2px; }
.ptable tbody th { width: 200px; font-size: 13px; color: #5a5a5a; }
/* 自社列だけ、黒の中の有彩色と同じ役割で立てる */
.ptable .is-own { background: rgba(0,127,198,.07); }
.ptable thead .is-own { color: var(--accent-3); font-weight: 700; }
.ptable__big { display: block; font-size: 20px; line-height: 1.5; }
.ptable td small { display: block; font-size: 11px; color: #5a5a5a; line-height: 1.8; }

/* ---------- 18. Q&A（明転＝読んで理解させる） ---------- */
.qa { margin: 0; }
.qa__item { border-top: 1px solid rgba(0,0,0,.14); padding-block: var(--sp-sm); }
.qa__item:last-child { border-bottom: 1px solid rgba(0,0,0,.14); }
.qa__q {
  margin: 0 0 14px;
  font-size: 18px; font-weight: 700; line-height: 1.8;
  padding-left: 30px; position: relative;
}
.qa__q::before {
  content: "Q"; position: absolute; left: 0; top: 0;
  font-family: var(--ff-label); font-size: 14px; color: var(--accent-3);
}
.qa__a { margin: 0; padding-left: 30px; font-size: 14px; line-height: 2.1; }

/* ---------- 19. 会社概要テーブル ---------- */
@media (max-width: 767px) {
  /* 見出し列を詰めて、次の列の頭が画面に入るようにする。切れていることが横スクロールの合図になる */
  .ptable { min-width: 620px; }
  .ptable tbody th { width: 120px; font-size: 12px; }
  .ptable th, .ptable td { padding: calc(var(--sp-sm) - var(--sp-xs)); }
}

/* 明転に置いた一覧（news の Report） */
.section--raised .topics__item { border-top-color: rgba(0,0,0,.14); }
.section--raised .topics__item:last-child { border-bottom-color: rgba(0,0,0,.14); }
.section--raised .topics__date { color: #5a5a5a; }

.ptable--profile { min-width: 0; }
.ptable--profile tbody th { width: 160px; }
@media (max-width: 599px) {
  .ptable--profile, .ptable--profile tbody, .ptable--profile tr, .ptable--profile th, .ptable--profile td { display: block; width: auto; }
  .ptable--profile th { border-bottom: 0; padding-bottom: 0; }
}

/* ---------- 20. フォーム（明転） ---------- */
.form { max-width: 42em; }
.form__row { margin-bottom: var(--sp-sm); }
.form__label { display: block; margin-bottom: 10px; font-size: 13px; font-weight: 700; }
.form__req {
  margin-left: 10px; padding: 2px 8px;
  font-size: 10px; font-weight: 500; letter-spacing: .04em;
  background: var(--accent-3); color: #fff;
}
.form__input {
  width: 100%; padding: 14px var(--sp-xs);
  border: 1px solid rgba(0,0,0,.25); border-radius: 0;
  background: #fff; color: var(--text-on-raised);
  font-family: var(--ff-jp); font-size: 15px; font-weight: 500; line-height: 1.8;
  transition: border-color .3s;
}
.form__input:focus { border-color: var(--accent-2); }
/* マウスで触ったときだけ枠線を消す。キーボードには上の :focus-visible を残す */
.form__input:focus:not(:focus-visible) { outline: none; }
.form__input--area { resize: vertical; }
.btn--submit { border-width: 1px; cursor: pointer; font-family: var(--ff-label); }

.tel {
  font-family: var(--ff-label); font-size: clamp(24px, 3vw, 34px);
  font-stretch: 110%; letter-spacing: .04em;
  border-bottom: 1px solid rgba(255,255,255,.35); padding-bottom: 4px;
}

/* ---------- 21. 記事本文（明転＝読んで理解させる） ---------- */
.article { max-width: 46em; }
.article h2 {
  margin: var(--sp-md) 0 var(--sp-xs);
  font-size: clamp(20px, 2.1vw, 26px); font-weight: 700; line-height: 1.7;
}
.article h2:first-child { margin-top: 0; }
.article h3 {
  margin: var(--sp-sm) 0 14px;
  font-size: 17px; font-weight: 700; line-height: 1.8;
  padding-left: 14px; border-left: 3px solid var(--accent-2);
}
.article p { margin: 0 0 var(--sp-xs); font-size: 15px; line-height: 2.1; }
.article p:last-child { margin-bottom: 0; }
.article strong { font-weight: 700; }
.article + .tablewrap, .tablewrap + .article { margin-top: var(--sp-md); }

/* ボタンが複数並ぶ場合の間隔 */
.btn + .btn { margin-left: var(--sp-xs); }
@media (max-width: 599px) { .btn + .btn { margin-left: 0; } }

/* アンカー着地（#placement など）が固定ヘッダーの下に潜らないための余白 */
[id] { scroll-margin-top: calc(var(--sp-lg) + var(--sp-xs)); } /* 固定ヘッダー約64px より大きく */

/* ============================================================
   22. 華やかさと動き（参考サイト 2026-09 再実測に合わせた追加）
   写真・水彩のしぶき・筆記体の英字・スクロールで現れる動き。
   背景は3値＋紙色（#ffffff）。参考サイトの理念ブロックが明転＋水彩のため、紙色を1つ足した。
   ============================================================ */
:root { --surface-paper: #ffffff; --ff-script: "Caveat", "Segoe Script", cursive; }
.section--paper { background: var(--surface-paper); color: var(--text-on-raised); }

/* ---- ヘッダー：下に進むと隠れる ---- */
.header { transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.header.is-hidden { transform: translateY(-110%); }

/* ---- ヒーロー：1行ずつ下から ---- */
.hero__overlay { background: rgba(0,0,0,.45); }
.hero__line { display: block; overflow: hidden; }
.hero__line > span { display: block; }
.fx-on .hero__line > span { transform: translateY(110%); transition: transform 1s cubic-bezier(.2,.7,.1,1); }
.fx-on.is-loaded .hero__line:nth-child(1) > span { transform: none; transition-delay: .15s; }
.fx-on.is-loaded .hero__line:nth-child(2) > span { transform: none; transition-delay: .32s; }
.fx-on.is-loaded .hero__line:nth-child(3) > span { transform: none; transition-delay: .49s; }
.hero__scroll { display: flex; align-items: center; gap: 14px; }
.hero__scroll-line { display: block; width: 48px; height: 1px; background: rgba(255,255,255,.6); transform-origin: left; }
.fx-on .hero__scroll-line { animation: scroll-line 2.2s cubic-bezier(.6,0,.2,1) infinite; }
@keyframes scroll-line { 0% { transform: scaleX(0); transform-origin: left; } 50% { transform: scaleX(1); transform-origin: left; } 51% { transform-origin: right; } 100% { transform: scaleX(0); transform-origin: right; } }

/* ---- スクロールで現れる ---- */
.fx-on [data-fx] { transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1), filter 1.2s ease; }
.fx-on [data-fx="up"]   { opacity: 0; transform: translateY(28px); }
.fx-on [data-fx="fade"] { opacity: 0; }
.fx-on [data-fx="wipe"] { position: relative; }
.fx-on [data-fx="wipe"]::after { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--wipe-bg, #000);
  transform: scaleX(1); transform-origin: right center; transition: transform 1.1s cubic-bezier(.7,0,.2,1); }
.fx-on [data-fx="wipe"].is-in::after { transform: scaleX(0); }
.fx-on [data-fx="splash"] { opacity: 0; transform: scale(.55) rotate(-10deg); filter: blur(16px); }
.fx-on [data-fx="rule"] { transform: scaleX(0); transform-origin: left; transition-duration: 1.4s; }
.fx-on [data-fx="stagger"] > * { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.fx-on [data-fx="stagger"] > :nth-child(2) { transition-delay: .12s; }
.fx-on [data-fx="stagger"] > :nth-child(3) { transition-delay: .24s; }
.fx-on [data-fx="stagger"] > :nth-child(4) { transition-delay: .36s; }
.fx-on [data-fx="stagger"] > :nth-child(5) { transition-delay: .48s; }
.fx-on [data-fx="stagger"] > :nth-child(6) { transition-delay: .60s; }
.fx-on [data-fx].is-in { opacity: 1; transform: none; filter: none; }
.fx-on [data-fx="stagger"].is-in > * { opacity: 1; transform: none; }
.fx-on [data-parallax] { will-change: transform; }

/* ---- サムネイル一覧（Topics / Report） ---- */
.thumbs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-sm); }
.thumb__link { display: block; }
.thumb__img { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #000; }
.thumb__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.2,.7,.2,1); }
.thumb__link:hover .thumb__img img { transform: scale(1.06); }
.thumb__title { display: block; margin-top: 14px; font-size: 15px; line-height: 1.75; font-weight: 700; }
.thumb__date { display: block; margin-top: 8px; font-family: var(--ff-label); font-size: 12px; letter-spacing: .04em; color: var(--text-dim); }
.rule { display: block; height: 2px; margin-top: var(--sp-md);
  background: linear-gradient(90deg, var(--accent-1), var(--accent-2) 55%, rgba(255,255,255,.25) 55%); }
@media (max-width: 900px) {
  .thumbs { display: flex; gap: var(--sp-xs); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); -webkit-overflow-scrolling: touch;
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter) var(--gutter); scrollbar-width: none; }
  .thumbs::-webkit-scrollbar { display: none; }
  .thumb { flex: 0 0 78%; scroll-snap-align: start; }
}

/* ---- 筆記体の英字（参考サイトの Rockville Solid のスロット） ---- */
.script { font-family: var(--ff-script); font-weight: 700; line-height: 1; letter-spacing: 0;
  font-size: clamp(40px, 5vw, 72px); transform: rotate(-4deg); color: #fff; }
.script--creed { margin: var(--sp-md) 0 0; text-align: right; color: var(--text-on-raised); font-size: clamp(30px, 3.4vw, 50px); }

/* ---- 理念：紙色＋水彩 ---- */
.creed { position: relative; overflow: hidden; }
.creed .container { position: relative; }
.creed__splash { position: absolute; right: -6%; top: -8%; width: min(640px, 60vw); height: auto; pointer-events: none; z-index: 0; }
.creed__cols { position: relative; }
.section--paper .creed__accent { color: var(--accent-3); }
.section--paper .creed__sign { color: var(--text-on-raised); }
.section--paper .creed__body { max-width: 34em; }
@media (max-width: 767px) { .creed__splash { right: -20%; top: -4%; width: 78vw; opacity: .9; } }

/* ---- 主力サービス：黒の中に明転カード、写真を右に ---- */
.tag { display: inline-block; margin-bottom: var(--sp-xs); padding: 4px 12px;
  background: var(--accent-2); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .06em; line-height: 1.8; }
.product { display: grid; grid-template-columns: 1.05fr 1fr; background: var(--surface-raised); color: var(--text-on-raised); overflow: hidden; }
.product__text { padding: var(--sp-lg) var(--sp-md); }
.product__media { position: relative; min-height: 420px; overflow: hidden; --wipe-bg: var(--surface-raised); }
.product__media img { position: absolute; inset: -8% 0; width: 100%; height: 116%; object-fit: cover; }
.product .product__q { color: #5a5a5a; }
.product .creed__accent { color: var(--accent-3); }
.product .btn { border-color: rgba(0,0,0,.35); }
.product .btn:hover { background: #000; color: #fff; border-color: #000; }
@media (max-width: 900px) { .product { grid-template-columns: 1fr; } .product__media { min-height: 260px; order: -1; } .product__media img { inset: 0; height: 100%; } .product__text { padding: var(--sp-sm) var(--sp-xs) var(--sp-md); } }

/* ---- Service：写真と文章を交互に、筆記体を重ねる ---- */
.svc__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-md); align-items: center; }
.svc__row + .svc__row { margin-top: calc(var(--sp-xl) - var(--sp-md)); } /* 110px */
.svc__row--rev .svc__text { order: 2; }
.svc__text { padding-right: var(--sp-sm); }
.svc__media { position: relative; margin: 0; aspect-ratio: 3 / 2; --wipe-bg: var(--surface-muted); }
.svc__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.svc__media .script { position: absolute; z-index: 2; right: -4%; bottom: -14%; margin: 0; text-shadow: 0 2px 20px rgba(0,0,0,.5); }
.svc__row--rev .svc__media .script { right: auto; left: -4%; }
@media (max-width: 900px) {
  .svc__row { grid-template-columns: 1fr; gap: var(--sp-sm); }
  .svc__row--rev .svc__text { order: 0; }
  .svc__media { order: -1; margin-bottom: var(--sp-sm); }
  .svc__media { overflow: hidden; }
  .svc__media .script { right: 12px; bottom: 8px; font-size: 40px; }
  .svc__row--rev .svc__media .script { left: 12px; }
}

/* ---- Company 導線：縦長の写真カード ---- */
.navcards--photo { gap: var(--sp-sm); background: none; }
.navcards--photo .navcard { position: relative; aspect-ratio: 3 / 4; min-height: 0; padding: var(--sp-sm); justify-content: flex-end; overflow: hidden; background: #000; }
.navcard__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.navcards--photo .navcard::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,0) 62%); }
.navcards--photo .navcard__en, .navcards--photo .navcard__jp { position: relative; }
.navcards--photo .navcard__jp { color: rgba(255,255,255,.8); }
.navcards--photo .navcard:hover { background: #000; }
.navcards--photo .navcard:hover .navcard__img { transform: scale(1.06); }
@media (max-width: 767px) { .navcards--photo .navcard { aspect-ratio: 16 / 10; } }

/* ---- 筆文字の流れ ---- */
.marquee { overflow: hidden; padding: var(--sp-sm) 0; border-top: 1px solid rgba(255,255,255,.1); border-bottom: 1px solid rgba(255,255,255,.1); }
.marquee__track { display: flex; gap: 80px; width: max-content; padding-left: 80px; }
.marquee__track span { white-space: nowrap; font-family: var(--ff-hand); font-size: clamp(30px, 4vw, 56px); color: rgba(255,255,255,.9); }
.fx-on .marquee__track { animation: marquee 46s linear infinite; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---- Recruit：写真を全幅に敷く ---- */
.recruit { position: relative; min-height: 520px; display: flex; align-items: center; overflow: hidden; background: #000; }
.recruit__bg { position: absolute; inset: -12% 0; }
.recruit__bg img { width: 100%; height: 100%; object-fit: cover; }
.recruit::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.52); }
.recruit__inner { position: relative; z-index: 1; padding-block: var(--sp-lg); }
.label--sm { font-size: 20px; margin-bottom: var(--sp-xs); display: block; }
.recruit .recruit__copy { line-height: 1.6; }
.recruit .btn { margin-top: var(--sp-sm); }
@media (max-width: 767px) { .recruit { min-height: 420px; } }

/* ---- CTA：白地に水彩のしぶき ---- */
.cta { background: var(--surface-paper); }
.cta__item { position: relative; overflow: hidden; background: var(--surface-paper); color: var(--text-on-raised);
  border-top: 1px solid rgba(0,0,0,.08); transition: background .5s; }
.cta__item + .cta__item { border-left: 1px solid rgba(0,0,0,.08); }
.cta__item::before { content: ""; position: absolute; inset: 0; background-repeat: no-repeat; background-size: 560px auto;
  opacity: 0; transform: scale(.7); transform-origin: center; transition: opacity 1.2s ease, transform 1.4s cubic-bezier(.2,.7,.2,1); }
.cta__item--contact::before { background-image: url("../img/splash-1.webp"); background-position: -120px center; transform-origin: left center; }
.cta__item--alt::before { background-image: url("../img/splash-2.webp"); background-position: calc(100% + 120px) center; transform-origin: right center; }
.fx-on .cta__item.is-in::before, .fx-off .cta__item::before { opacity: 1; transform: none; }
.cta__item .cta__en, .cta__item--alt .cta__en { position: relative; color: var(--text-on-raised); }
.cta__item .cta__jp { position: relative; color: #5a5a5a; }
.cta__item:hover { background: var(--surface-raised); }
@media (max-width: 767px) {
  .cta__item + .cta__item { border-left: 0; border-top: 1px solid rgba(0,0,0,.08); }
  .cta__item::before { background-size: 380px auto; }
}

/* ---- 下層のページ見出しに写真 ---- */
.pagehead--img { position: relative; overflow: hidden; padding-block: calc(var(--sp-xl) - var(--sp-xs)) calc(var(--sp-xl) - var(--sp-md)); }
.pagehead__bg { position: absolute; inset: -15% 0; opacity: .8; }
.pagehead__bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pagehead--img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgba(0,0,0,.66), rgba(0,0,0,.22)); }
.pagehead--img .container { position: relative; z-index: 1; }
.pagehead--img .pagehead__jp { color: rgba(255,255,255,.85); }

/* ---- 動きを止める設定のとき ---- */
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
  .hero__scroll-line { animation: none; }
}


/* ============================================================
   23. ブランド融合（ブランドボード＋Re;Talent 設計書）
   - 明転は白＋青い水彩（ブランドボードの世界観）
   - Re;Talent の「;」だけ赤 #E63946。赤はこれ以外に使わない
   ============================================================ */
:root { --rt-navy: #0F1B30; --rt-red: #E63946; --ff-wordmark: "Inter", "Archivo", sans-serif; }
.semi { color: var(--rt-red); }
.wordmark { font-family: var(--ff-wordmark); font-weight: 600; letter-spacing: -0.025em; font-stretch: 100%; }
.card__name .semi, .cta__en .semi, .navpanel__en .semi { font-family: var(--ff-wordmark); font-weight: 600; }

/* 明転の水彩：ブランドボードの水彩バナーを右上に薄く敷く（事業説明・料金の明転） */
.section--wc { position: relative; overflow: hidden; }
.section--wc::before { content: ""; position: absolute; right: -8%; top: -6%; width: min(760px, 70vw); aspect-ratio: 1672 / 941;
  background: url("../img/wc-banner.jpg") center / cover no-repeat; opacity: .55; pointer-events: none;
  -webkit-mask-image: radial-gradient(closest-side, #000 40%, transparent 100%); mask-image: radial-gradient(closest-side, #000 40%, transparent 100%); }
.section--wc > .container { position: relative; }

/* Re;Talent のページ見出し：ネイビーを重ねる */
.pagehead--rt::after { background: linear-gradient(to right, rgba(15,27,48,.85), rgba(15,27,48,.35)); }
.pagehead--rt .pagehead__en { font-size: clamp(44px, 7.6vw, 88px); }

/* 「;」を主役にするブロック */
.rt-semi .rt-semi__mark { margin: 0 0 var(--sp-xs); font-family: var(--ff-wordmark); font-weight: 600; font-size: clamp(72px, 9vw, 128px); line-height: .8; color: var(--rt-red); }
.rt-semi .creed__head { color: var(--rt-navy); }
.rt-semi .creed__body { max-width: 34em; }
.creed__splash--rt { right: -10%; top: 6%; opacity: .95; }

/* ---- ヘッダーの下だけ暗くして、明るい写真の上でもナビが読めるようにする ---- */
.hero::before, .pagehead--img .pagehead__scrim { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 160px; z-index: 2; pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,0)); }
.pagehead--img::after { background: linear-gradient(to right, rgba(0,0,0,.66), rgba(0,0,0,.22)), linear-gradient(to bottom, rgba(0,0,0,.5), rgba(0,0,0,0) 160px); }

/* ============================================================
   24. 和文の組版（改行の規律）
   - 文中の <br> は「PC で1行に収まる」前提で入れている。収まらない幅では <br> を消して自然に流す
   - 見出しは末尾の1〜3文字だけが落ちないよう text-wrap: balance（既存）
   - 商品名・ブランド名は途中で折らない
   ============================================================ */
html { line-break: strict; }                       /* 行頭の「。」「、」を出さない */
.creed__body { max-width: 46em; }                  /* 18px で 828px。1130 のコンテナに収まる長い一文まで折らない */
.section--paper .creed__body { max-width: 40em; }  /* 水彩が右に乗るので少し狭く */
.article h2, .article h3 { text-wrap: balance; }   /* 記事見出しも末尾1〜3文字だけ落とさない */
.creed__head, .feature__head, .card__lead, .step__head, .plain__head, .qa__q, .product__name, .article h2, .article h3,
.pagehead__jp, .thumb__title, .numbers__key { word-break: auto-phrase; } /* 文節で折る（Chrome 119+）。「感じて／も、」のような折れを防ぐ。非対応は従来どおり */
.card__name, .wordmark, .product__name .semi { white-space: nowrap; }
.card__body br, .thumb__title br { display: none; } /* 3列のカードは狭い。文は流す */
@media (max-width: 767px) {
  /* スマホでは本文・見出しの強制改行を消し、幅なりに折り返す（二重改行を防ぐ） */
  .creed__body br, .product__copy p br, .plain p br,
  .feature__body br, .step__body br, .article p br, .card__lead br, .recruit__copy br,
  .qa__a br, .creed__sign br { display: none; }
  /* 見出し（creed__head / product__name）の <br> は残す。作者の切り位置が意味を持つため */
  .creed__body, .product__copy p { max-width: none; }
}