/* ベビレンタ採用サイト C案
・デザイン ＝ careers.goodpatch.com の実測値に基づく（游ゴシック／ピル型ボタン999px／
フルブリード写真のFV／純白ではない明るい地／アニメーションON-OFFトグル）
・構成 ＝ 構成案v3（2026-08-11・先方提供の11セクション）
※当初の下敷きだった Perplexity Careers 構成は v3 で置き換わっている
・配色 ＝ ベビレンタのブランドコーラル（Goodpatchのブルーは不採用）
・価値観の中身 ＝ グループ会社ベルタの Value 6つ */
:root {
/* ▼ アクセント。2026-08-27、先方デザイナーのご指定で **すべて #F76441 ベース**に統一。
- accent = 指定色そのまま
- accent-hover = 指定色から明度を8%下げた同色相
- accent-on-dark = 指定色をダークにした版（ご指定）
- accent-fill(-hover) = accent / accent-hover と同じ値
⚠️ #F76441 は明るいので、**小さい文字と細い線ではコントラストが足りない**
（明地で2.57:1・白文字を載せても3.06:1／WCAG AAは本文4.5:1）。
以前は文字用に沈めた色を分けていたが、今回のご指定で色味を優先している。
影響範囲は docs/素材マップ.md の「テーマカラーを#F76441に統一」を参照。 */
--accent: #F76441;
--accent-hover: #F5441A;
--accent-on-dark: #DC3209; /* 指定色をダークにした版。暗地(#3B3230)とは2.67:1 */
--accent-fill: #F76441; /* accent と同じ（ご指定） */
--accent-fill-hover: #F5441A; /* accent-hover と同じ（ご指定） */
--accent-tint: rgba(247, 100, 65, .15); /* アイコン下地などの極薄面 */
/* ▼ 地の色。Goodpatchの「純白ではない明るい地」という構造は保ちつつ、
A案（background #fff8f6 / surface-container #fee9e5）に倣って
わずかにコーラル側へ振る。無彩色の地だとアクセントだけが浮いて「赤」に見えるため */
--bg: #FAF7F6;
--surface: #FFFCFB;
/* カードの面。地を #F3E9E6 まで濃くしたので、面はその上に「浮く」明るさが要る。
#FDF1EE のままだと色付きセクション(#F3E9E6)の上で差10しかなく、
しかも面の方が暗く見える瞬間があった。#FCF6F4 で地より明るい側に固定する */
--surface-tint: #FCF6F4;
/* 色付きセクションの地（社長指示）。以前は --surface(#FFFCFB) を流用していて
通常の地(#FAF7F6)との差が5しかなく、しかも「明るい側」に振れていたので
切り替わりが感じられなかった。一段濃い側へ振り、差を16にする */
--bg-tint: #F3E9E6;
--surface-2: #F2E8E5;
--ink: #3B3230; /* 純黒ではない、わずかに暖かいチャコール */
--ink-mute: #6E625F;
--line: #E7DCD9;
--dark: #3B3230; /* 反転セクションの背景（社長指示で #3A2E2B から変更。--ink と同値） */
}
* { box-sizing: border-box; }
body {
margin: 0;
background: var(--bg);
color: var(--ink);
/* Goodpatchは游ゴシック体。明朝ではない */
font-family: "Yu Gothic Medium", "游ゴシック体", YuGothic, "Hiragino Kaku Gothic ProN",
"Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
font-size: 16px;
/* 本家は 1.5 だが、あちらは写真主体で本文量が少ない。
募集要項も価値観も文章量があるこのサイトでは詰まりすぎるため 1.8 に置く */
line-height: 1.8;
-webkit-font-smoothing: antialiased;
}
/* 欧文見出し：Galano Grotesque に近い幾何学的グロテスク */
.latin { font-family: "Jost", "Century Gothic", sans-serif; letter-spacing: .04em; }
/* 本家 careers.goodpatch.com は max-width:1120px を13箇所で宣言している。
一度1280pxまで広げてみたが、実測で二度とも「広げる意味がない」と出た。
① 長さが変わらない … 1120/1200/1280 でページ全高 13,705 / 13,654 / 13,704px。
縦長の実因は幅ではなく画像だった（インタビュー写真の上限幅で 2,070→1,740px）。
② 揃わなくなる … 本文は行長34字＝576pxで止まるのに、罫線とカードは
パネル幅いっぱいまで伸びる。パネルは 1120pxで644px・1280pxで804pxなので、
線が本文より右に出る量が 68px → 228px（パネル幅の10%→28%）に開く。
「左右の余白が合っていない・左に寄って見える」の正体がこれ。
ページの左右余白は 1120px でも左右とも対称（1440pxで200px/200px）。 */
/* ⚠️ 本家の1120pxは「中身の幅」。うちは box-sizing:border-box の max-width に
左右40pxのパディングを含めていたので、中身が1040pxしかなかった。
実測（1440px・本家 Pick Up のカード帯と、うちの同じ位置を比較）:
本家 160–1280 → 帯1120px / 左右160px
うち 200–1240 → 帯1040px / 左右200px ＝ 左右40pxずつ取りすぎ
max-width をパディング込みの値にして、中身をちょうど1120pxにする。
1440pxで左右160px、1920pxで左右400px。どちらも本家と一致する */
.wrap { width: 100%; max-width: 1168px; margin: 0 auto; padding: 0 24px; }
@media (min-width: 768px) { .wrap { max-width: 1200px; padding: 0 40px; } }
/* ── ピルボタン（Goodpatchの特徴） ── */
.pill {
display: inline-flex; align-items: center; gap: 10px;
border-radius: 999px; padding: 14px 28px;
font-size: 15px; font-weight: 700; line-height: 1;
white-space: nowrap;
text-decoration: none; border: 1px solid transparent;
transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
/* 主要CTAだけ沈めた側を使う。白文字15pxはWCAG AAで4.5:1が必要で、
指定色 #F76441 をそのまま面にすると 3.06:1 しか出ない。
⚠️ 2026-08-27 のご指定で --accent は #F76441 になり、白文字は 3.06:1（AA不足）。
装飾の面（下線・図形・アイコン）は指定色 #F76441 のまま */
.pill--primary { background: var(--accent); color: #fff; }
.pill--primary:hover { background: var(--accent-hover); }
.pill--ghost { background: var(--surface); color: var(--ink); border-color: var(--line); }
.pill--ghost:hover { border-color: var(--accent); color: var(--accent); }
.pill--on-photo { background: var(--surface); color: var(--ink); }
.pill--sm { padding: 10px 20px; font-size: 13px; }
/* ── セクション ── */
.sec { padding: 60px 0; }
@media (min-width: 768px) { .sec { padding: 100px 0; } }
/* .wrap と .sec を同じ要素に付けると、.sec の `padding: 88px 0` が
.wrap の左右余白を打ち消して内容が画面端に張り付く（エントリー系ページで発生）。
両方付いている場合だけ左右を戻す */
.sec.wrap { padding-left: 24px; padding-right: 24px; }
@media (min-width: 768px) { .sec.wrap { padding-left: 40px; padding-right: 40px; } }
.sec--tint { background: var(--bg-tint); }
.sec--dark { background: var(--dark); color: #fff; }
/* 最終CTAの地模様。巨大な JOIN US を薄く敷く（社長指示）。
写真は背面(z-index:0)に敷き、はみ出しは section の overflow:hidden で切る */
#final { position: relative; overflow: hidden; }
#final .wrap { position: relative; z-index: 1; } /* 写真と暗幕(z-index:0)より前 */
.final-bg {
position: absolute; inset: 0; z-index: 0;
width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;
/* ⚠️ 素材は専用の `final-bg.webp`（hero-01 の y600〜935・**顔より下だけ**）。
帯は1440x404、文字は帯内 y100〜304 を占める。顔は150pxあるので
上の隙間(100px)にも下の隙間(100px)にも収まらず、途中の位置では必ず重なる。
object-position で逃がす手もあるが、幅が狭いと帯に入る見える範囲が広がって
顔が戻ってきた（768pxで再発）。**素材の側で顔を持たない**のが幅によらず確実。
暗幕が.82かかっているので写真は「空気」だけ担えばよい。
白文字7.07:1・リード4.83:1は変わらない */
}
/* 暗幕。--dark(#3B3230) を .82 で重ねると、写真の一番明るい窓の部分でも
白文字が 7:1 を保つ。写真は「空気」だけ残ればいいので強めにかける */
#final::after {
content: ""; position: absolute; inset: 0; z-index: 0;
background: rgba(59, 50, 48, .82);
pointer-events: none;
}
/* 反転セクションでは --accent を明コーラルに差し替える。
これ1つで配下の44箇所（文字・線・SVG・ドット）が背景に合った明度になる */
.sec--dark { --accent: var(--accent-on-dark); --accent-hover: var(--accent-fill-hover); }
/* ⚠️ 主要CTAだけは反転セクションでも**他セクションと同じ濃コーラル**にする（社長指摘）。
反転すると明コーラル＋濃い文字になり、FVやOPEN ROLESのボタンと色が違って見えていた。
2026-08-27 指定色 #F76441 に変更。暗い地からの分離は 2.31:1 と 3:1 に届かないため、
**白60%の輪郭**で在りかを示す（輪郭と地は 3.75:1 で WCAG 1.4.11 の3:1を満たす）。
⚠️ 塗りに白文字を載せると 3.06:1（本文サイズは4.5:1が必要）。 */
.sec--dark .pill--primary {
background: var(--accent-fill); color: #fff;
border-color: rgba(255, 255, 255, .6);
}
.sec--dark .pill--primary:hover { background: var(--accent-fill-hover); border-color: rgba(255,255,255,.75); }
.sec--dark .eyebrow { color: rgba(255,255,255,.55); }
.sec--dark .lead { color: rgba(255,255,255,.75); }
/* セクションラベル。全部大文字は語形が失われるぶん読みにくいので、
字間は「大文字を離しすぎない」範囲（.06em）に留め、ウェイトも600へ落とす。
本家は .16em のような強いトラッキングを使っていない（letter-spacing: normal）*/
.eyebrow {
font-size: 13px; font-weight: 600; letter-spacing: .06em;
color: var(--accent); margin: 0 0 14px; line-height: 1.6;
}
/* ▼ セクション見出しの欧文。DESIGN.md §2「サイズより書体切替で階層を作る」に従い、
本家と同じく欧文を見出し本体（32px級）に昇格させ、和文はそれより控えめにする。
本家実測: Galano Grotesque 32px / weight 600〜700 / letter-spacing normal。
小さいラベルとして使う .eyebrow（WHAT YOU GET・募集要項ページ等）はそのまま */
.eyebrow--lead {
font-size: 26px; font-weight: 600; letter-spacing: .02em;
line-height: 1.25; margin: 0 0 16px;
/* 黒＋短いコーラルの下線にしていたが、9セクションともコーラルに統一（社長指示）。
見出しの列が1本の色で通り、セクションの始まりが遠くからでも拾える */
color: var(--accent); padding-bottom: 14px; position: relative;
}
.eyebrow--lead::after {
content: ""; position: absolute; left: 0; bottom: 0;
width: 44px; height: 3px; background: var(--accent-fill);
}
/* 濃い地でも欧文見出しはコーラル。⚠️ 2026-08-27 で --accent-on-dark が暗くなり 2.67:1 */
.sec--dark .eyebrow--lead { color: var(--accent); }
@media (min-width: 768px) { .eyebrow--lead { font-size: 32px; } }
/* 和文見出しは欧文より一段下げる（本家: 欧文32px ＞ 和文24px） */
/* 和文見出しを一回り小さく（社長判断・A案）。27px w700 → 24px w500。
⚠️ w600 を指定しても変わらない。この書体（Yu Gothic / 游ゴシック体）は
600と700のインク量が完全に一致する（実測で差0.00%）。
細くなるのは500で、700比9.6%細い。Noto Sans JP も 400/500/700 しか
読み込んでいないので、600は使わないこと。
欧文見出し(.eyebrow--lead 32px)は本家Goodpatchと同値なので据え置き。
32:24＝4:3 の比になり、欧文で階層をつくる本家の組み方に近づく */
.h2 { font-size: 20px; font-weight: 500; line-height: 1.75; margin: 0 0 24px; letter-spacing: .01em; }
@media (min-width: 768px) { .h2 { font-size: 24px; } }
.h3 { font-size: 19px; font-weight: 700; line-height: 1.8; margin: 0 0 8px; }
.lead { font-size: 16px; color: var(--ink-mute); margin: 0; }
@media (min-width: 768px) { .lead { font-size: 17px; } }
/* ── FV：フルブリード写真＋オーバーレイ（Goodpatch型） ── */
/* FVは「1画面を占める」（DESIGN.md §3: 100dvh）。
ただしこのサイトは追従ヘッダー（69px）＋モバイルのサブナビ（49px）がFVの上にあるため、
素の100dvhだとその分だけ下にはみ出し、CTAが画面外へ落ちる。
採用サイトの原則「FVで募集要項への導線が即わかる」を優先し、ヘッダー高を引く */
.hero {
position: relative; min-height: calc(100dvh - 118px);
display: flex; align-items: flex-end; overflow: hidden;
}
@media (min-width: 1024px) { .hero { min-height: calc(100dvh - 69px); } }
.hero-photo { position: absolute; inset: 0; }
/* 写真の明るい壁の上に白文字が乗るため、スクリムは2枚重ねる。
①下からの基本スクリム ②コピーのある左下を追加で沈める横方向スクリム */
.hero-photo::after {
content: ""; position: absolute; inset: 0;
background:
linear-gradient(to right, rgba(28,22,20,.55) 0%, rgba(28,22,20,.34) 42%, rgba(28,22,20,0) 72%),
linear-gradient(to top, rgba(28,22,20,.72) 0%, rgba(28,22,20,.34) 50%, rgba(28,22,20,.10) 100%);
}
/* コピーの塊は下端から浮かせる（社長指示）。56→120pxで写真の下1/3が空き、
コピーが画面の中ほどに寄る。欧文ラベルを外したぶん塊自体も1行ぶん短い */
.hero-inner { position: relative; z-index: 1; width: 100%; padding-bottom: 120px; padding-top: 120px; }
.hero-title { font-size: 30px; font-weight: 700; line-height: 1.55; color: #fff; margin: 0 0 14px; letter-spacing: .01em; }
@media (min-width: 768px) { .hero-title { font-size: 46px; } }
/* SPだけ「子育てを、／もっと軽やかに。」で折る。放っておくと
「子育てを、もっと軽やか／に。」と句の途中で折れて読みにくい（社長指摘） */
.br-sp { display: none; }
@media (max-width: 767px) {
.br-sp { display: inline; }
/* 4行になるので行間1.55は空きすぎる。1.38に詰める（社長指摘） */
.hero-title { line-height: 1.38; margin-bottom: 18px; }
}
/* ⚠️ SPだけ純白にする。.88のままだと最悪の写真(hero-04)で 4.13:1 まで落ちて
AA(4.5)を割る。SPは補足文が画面の上半分に来るので、下端の縦スクリムが効かない
（スクリムを.86まで濃くしても4.33で届かず、写真も濁る）。純白なら4.79で通る。
768px以上は同じ文でも 5.25:1 と余裕があるので、意図した.88の弱めを残す */
.hero-sub { color: #fff; margin: 0 0 32px; font-size: 15px; }
@media (min-width: 768px) { .hero-sub { font-size: 17px; color: rgba(255,255,255,.88); } }
/* ── 写真 ── */
/* FVは全面。人物が右寄りなので、狭い幅では右側を残してトリミングする */
/* FVの4枚は同じ場所に重ねる。スクリム(::after)より下に置く */
/* ⚠️ 縦位置は下端寄せ（100%）。「顔と文字を重ねない」ための要。
文字はヒーローの**下端から402px**の位置に固定される（.hero-inner の padding-bottom 由来）
のに対し、顔の高さは画面幅に比例して動くので、下端を揃えないと幅ごとにズレる。
素材を横1150pxに詰めてあるぶん縦にはみ出しが出るので、その余りを上側に逃がしている。
実測: あご先と文字上端の余白は 1200px:+5 / 1280px:+32 / 1440px:+86 / 1600px:+141
⚠️ 素材の横幅を変えるとこの関係が崩れる。変えたら全幅で測り直すこと */
.hero-photo img {
position: absolute; inset: 0;
/* SPは専用素材(hero-sp.webp・500x535)。横に274pxはみ出すのでXで人物を選ぶ。
40%で左の女性と中央の男性が両方入る（縦は既に切り出し側で決めてあるのでYは効かない） */
width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%;
display: block;
}
@media (min-width: 768px) { .hero-photo img { object-position: 50% 100%; } }
/* 2026-08-15、先方指定でFVは実写1枚の固定に変更（切り替え不要とのこと）。
以前は hero-01〜04 の4枚を12秒周期でクロスフェードさせていたが、
写真が1枚になったので heroFade / heroFadeFirst のキーフレームごと削除した。
⚠️ 複数枚に戻すときは opacity の初期値も一緒に戻すこと。
1枚のいまは opacity を触らない（触ると読み込み直後に白く見える） */
/* ── 勤務地（社長添付モック準拠 ／ 本家 careers.goodpatch.com の About と同じ型）
左に写真、右に「欧文見出し → 和文見出し → 本文」を左揃えで積む。
他8セクションは見出しを全幅で中央に置いているが、ここだけ列の中に入る。
本家のAboutが同じ組み方なので、揃えないことを選んだ ── */
.loc-lay { display: grid; gap: 32px; }
@media (min-width: 900px) {
/* 写真は右カラムの高さに追従させる（MISSION・インタビューと同じ手）。
比を固定すると本文との差がそのまま縦の空きになる */
.loc-lay { grid-template-columns: 1fr 1fr; gap: 56px; align-items: stretch; }
.loc-media { height: 100%; }
}
.loc-media { margin: 0; }
.loc-photo {
width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: 10px;
object-fit: cover; object-position: 60% 50%; display: block;
}
@media (min-width: 900px) {
/* 本家の同じ位置（Aboutの写真）は 530x630＝比0.84。
こちらは本文の高さに追従して 532x499＝比1.07 の横長になり、131px低かった。
min-height を620にして本家と同じ縦長の見え方に揃える */
.loc-photo { aspect-ratio: auto; height: 100%; min-height: 620px; }
/* 写真が本文より高くなるぶんの余りは、上下に振り分けて中央で受ける。
stretchのままだと本文の下だけに120px空いて「片側が空いた」状態になる（基準15） */
.loc-body { align-self: center; }
}
.loc-body { min-width: 0; }
/* 欧文見出し。中央寄せの .eyebrow--lead は使わず、左揃えで下線を引く */
.loc-eyebrow {
position: relative; padding-bottom: 12px; margin: 0 0 24px;
/* 他8セクションと同じくコーラルに揃える（社長指示）。濃い地では
⚠️ 2026-08-27 で --accent-on-dark が #DC3209 になり 2.67:1（AA不足） */
color: var(--accent); font-weight: 700;
}
.loc-eyebrow::after {
content: ""; position: absolute; left: 0; bottom: 0;
width: 40px; height: 2px; background: var(--accent);
}
.loc-h { text-align: left; margin: 0 0 32px; max-width: 18em; }
.loc-p { max-width: 34em; }
.loc-p + .loc-p { margin-top: 20px; }
/* このセクションの芯。大きくして各行に下線を引く（モックの見せ方）。
下線は text-decoration なので、折り返した2行目にも自動で付く */
.loc-pull { margin: 32px 0; }
.loc-pull-h {
font-size: 19px; font-weight: 700; line-height: 1.6; margin: 0 0 12px;
max-width: 22em;
text-decoration: underline;
text-decoration-color: var(--accent);
text-decoration-thickness: 2px;
text-underline-offset: 8px;
text-decoration-skip-ink: none;
}
@media (min-width: 768px) { .loc-pull-h { font-size: 21px; } }
.loc-pull .loc-p { margin-top: 0; }
/* ── 写真プレースホルダ（実写真の入手が前提） ── */
.photo {
background-color: var(--surface-2);
background-image: repeating-linear-gradient(45deg, transparent, transparent 12px,
rgba(57,61,64,.05) 12px, rgba(57,61,64,.05) 24px);
display: flex; align-items: center; justify-content: center;
text-align: center; padding: 24px;
color: var(--ink-mute); font-size: 13px; line-height: 1.9;
}
/* FVのプレースホルダ文字は上端に寄せ、下half のコピーと重ならないようにする。
実写真が入れば消える表示なので、狭い幅では補足の括弧書きを畳む */
.hero .photo { height: 100%; align-items: flex-start; padding-top: 96px; }
@media (max-width: 767px) {
.hero .photo { padding-top: 88px; font-size: 12px; }
.hero .photo span { display: none; }
}
/* ── カード ── */
.card {
background: var(--surface); border: 1px solid var(--line);
border-radius: 6px; padding: 28px;
}
/* ── グリッド ── */
.grid { display: grid; gap: 20px; }
@media (min-width: 700px) { .g2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .g3 { grid-template-columns: repeat(3, 1fr); } }
/* ── ジョブボード（Perplexity型） ── */
.job {
display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px;
padding: 24px 0; border-top: 1px solid var(--line);
text-decoration: none; color: inherit;
}
.job:last-child { border-bottom: 1px solid var(--line); }
.job-dept { font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--accent); width: 100%; }
@media (min-width: 900px) { .job-dept { width: 150px; } }
.job-title { font-size: 19px; font-weight: 700; flex: 1; line-height: 1.6; }
.job:hover .job-title { color: var(--accent); }
.job-loc { font-size: 13px; color: var(--ink-mute); }
/* ── 部門別カウント ── */
.dept {
display: flex; justify-content: space-between; align-items: center;
padding: 18px 0; border-bottom: 1px solid var(--line);
text-decoration: none; color: inherit; font-size: 15px;
}
.dept:hover { color: var(--accent); }
.dept span:last-child { color: var(--ink-mute); font-size: 13px; }
/* ── 行間の方針（本家 careers.goodpatch.com を 2026-08-13 に実測して決めた）──
本家は一律に詰めていない。使い分けている:
読ませる長文 18px/15px/14px … lh 1.80
見出し直下の添え書き 15px 1〜2行 … lh 1.50（しかも
で折る位置を作者が決めている）
小さい補足 12px … lh 1.70
見出し 28px … lh 1.40 ／ 13px … 1.20
つまり「1〜2行で終わるラベル・添え書きは詰める、3行以上読ませる文は1.8のまま」。
本家に無い 1.9〜2.1 をこのファイルから無くし、1行で終わるラベルを1.4〜1.6にした。
⚠️ 12px系（val2-p / bn-card-p / gain-text / stat-cap / feature-p / bn-cat-lead）は
本家がその大きさで1.70を選んでいるので詰めない。1.75のまま据え置く */
/* ── 箇条書き ── */
.list { list-style: none; margin: 0; padding: 0; }
.list li { position: relative; padding-left: 20px; font-size: 15px; color: var(--ink-mute); margin-bottom: 10px; line-height: 1.8; }
.list li::before {
content: ""; position: absolute; left: 0; top: 12px; /* 行間1.8に追従（1.9のとき13px）*/
width: 8px; height: 8px; border-radius: 50%; background: var(--accent-fill); opacity: .75;
}
/* ── 数字 ── */
/* 数字はこのページの見せ場。44/56pxだと本文(17px)の3倍強しかなく、
隣の循環図に負けていた。56→84pxで「図の脇の数値」から「見出し級」へ上げる */
.stat-num {
display: inline-block; min-width: 2ch; min-height: 1em;
white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums;
font-size: 52px; font-weight: 700; line-height: 1; color: var(--accent); letter-spacing: -.02em;
}
/* カウントアップ中も最終桁数ぶんの幅を先に確保し、単位・罫線・説明文を動かさない。 */
.stat-num[data-count="120"] { min-width: 3ch; }
/* 縦積みにして232pxの枠を取れたので、いちばん幅の要る「6〜7」(76pxで168px)＋
単位14px＝182px が余裕で収まる。56px→76pxで+36% */
@media (min-width: 768px) { .stat-num { font-size: 76px; } }
/* hero（15万人）はさらに大きく。左45%の列を1つの数字で受けるので、
隣の120/6〜7と同じ級数では列の広さに負けて余白が目立つ */
.stat-num--hero { font-size: 96px; }
@media (min-width: 768px) { .stat-num--hero { font-size: 140px; } }
.stat-unit { font-size: 14px; font-weight: 700; color: var(--ink-mute); white-space: nowrap; }
/* hero（15万人）だけ大きく。76pxの数字の脇に14pxの単位では釣り合わない。
28→36pxへ（社長指示）。140pxの数字に対して約1/4の比になる */
.stat-unit--hero { font-size: 28px; color: var(--ink); }
@media (min-width: 768px) { .stat-unit--hero { font-size: 36px; } }
/* ── アコーディオン（追加情報） ── */
.acc { border-bottom: 1px solid var(--line); }
.acc summary {
list-style: none; cursor: pointer; padding: 22px 0;
display: flex; justify-content: space-between; align-items: center; gap: 16px;
font-weight: 700; font-size: 16px;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: "＋"; color: var(--accent); font-weight: 400; flex-shrink: 0; }
.acc[open] summary::after { content: "−"; }
.acc-body { padding: 0 0 22px; color: var(--ink-mute); font-size: 15px; }
/* ── 仮入稿バッジ・注記 ── */
.prov { position: relative; }
.prov::after {
content: "仮"; position: absolute; top: -10px; right: -8px;
background: #B8860B; color: #fff; font-size: 10px; letter-spacing: .08em;
padding: 2px 7px; border-radius: 2px;
}
.prov-note {
font-size: 12px; line-height: 1.9; color: var(--ink-mute);
border-left: 2px solid #B8860B; padding-left: 10px; margin-top: 24px;
}
.prov-note b { color: #8B6508; font-weight: 700; }
/* ── ナビ ── */
.nav {
position: sticky; top: 0; z-index: 50;
background: rgba(250,247,246,.94); backdrop-filter: blur(8px);
border-bottom: 1px solid var(--line);
transition: transform .28s var(--e-out);
}
/* 下方向スクロール中は隠す（本家と同じオートハイド）。
スクロール位置の追従はJS側。アニメOFFでも状態変化は必要なので html.anim では絞らない */
.nav.is-hidden { transform: translateY(-100%); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 68px; }
.nav-links { display: none; gap: 26px; }
@media (min-width: 1024px) { .nav-links { display: flex; } }
.nav-links a { font-size: 13px; font-weight: 700; color: var(--ink-mute); text-decoration: none; }
.nav-links a:hover { color: var(--accent); }
/* ブランドロゴ（assets/logo.svg ＝ 横組みの正規ロゴ）。
「RECRUIT」は採用サイトであることを示すサフィックスなので、
ロゴ本体とは縦罫で区切り、ロゴの一部に見えないようにする */
.logo { text-decoration: none; display: flex; align-items: center; gap: 12px; }
.logo-img { height: 26px; width: auto; display: block; }
@media (min-width: 768px) { .logo-img { height: 30px; } }
.logo small {
font-size: 11px; letter-spacing: .14em; color: var(--ink-mute);
padding-left: 12px; border-left: 1px solid var(--line); line-height: 1.4;
}
/* 320px級ではロゴを一段小さく */
@media (max-width: 359px) { .logo-img { height: 22px; } .logo small { display: none; } }
/* モバイル用の横スクロールアンカー */
.subnav { display: block; overflow-x: auto; border-bottom: 1px solid var(--line); background: var(--surface); }
@media (min-width: 1024px) { .subnav { display: none; } }
/* ⚠️ 縦の余白は親ではなくリンク側に持たせる。親に12pxを置くと指で押せる範囲が
文字の高さ22pxしかなく、WCAG2.2 AAの最小24pxを下回っていた（SPで実測）。
親1px+リンク上下11pxに振り替えると、バーの総高さ47pxは変えずにタップ領域が44pxになる */
.subnav-inner { display: flex; gap: 20px; padding: 1px 24px; width: max-content; }
.subnav a { font-size: 12px; font-weight: 700; color: var(--ink-mute); text-decoration: none; white-space: nowrap; padding: 11px 0; }
/* ══════ 以下、募集要項ページ／エントリーページ用 ══════ */
/* ── パンくず ── */
.crumb { display: flex; flex-wrap: wrap; gap: 8px; font-size: 12px; color: var(--ink-mute); padding: 24px 0 0; }
.crumb a { color: var(--ink-mute); text-decoration: none; }
.crumb a:hover { color: var(--accent); }
.crumb span[aria-current] { color: var(--ink); font-weight: 700; }
/* ── 職種ページのヘッダー ── */
.job-head { padding: 32px 0 40px; }
.job-cat { font-size: 12px; font-weight: 700; letter-spacing: .16em; color: var(--accent); margin: 0 0 14px; }
.job-h1 { font-size: 30px; font-weight: 700; line-height: 1.5; margin: 0 0 14px; letter-spacing: .01em; }
@media (min-width: 768px) { .job-h1 { font-size: 46px; } }
.job-tagline { font-size: 16px; color: var(--ink-mute); margin: 0; }
@media (min-width: 768px) { .job-tagline { font-size: 18px; } }
/* ── 追従サマリーバー ── */
.summary {
position: sticky; top: 68px; z-index: 40;
background: rgba(247,247,247,.94); backdrop-filter: blur(8px);
border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
/* .wrap と併用しているので、左右の余白は打ち消さず上下だけ指定する
（padding: 14px 0 と書くと .wrap の左右余白が消えて内容が画面端に張り付く） */
.summary-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; padding-top: 14px; padding-bottom: 14px; }
.summary-item { display: none; }
@media (min-width: 768px) { .summary-item { display: block; } }
.summary-label { font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--ink-mute); margin: 0 0 2px; }
.summary-val { font-size: 14px; font-weight: 700; margin: 0; }
.summary .pill { margin-left: auto; }
/* ── 目次 ── */
.layout { display: block; padding: 56px 0 80px; }
@media (min-width: 900px) { .layout { display: grid; grid-template-columns: 200px 1fr; gap: 56px; } }
.toc { display: none; }
@media (min-width: 900px) { .toc { display: block; position: sticky; top: 150px; align-self: start; } }
.toc p { font-size: 11px; font-weight: 700; letter-spacing: .14em; color: var(--ink-mute); margin: 0 0 16px; }
.toc a { display: block; font-size: 13px; color: var(--ink-mute); text-decoration: none; padding: 6px 0; line-height: 1.6; }
.toc a:hover { color: var(--accent); }
/* ── 本文ブロック ── */
.block { margin-bottom: 72px; }
.block:last-child { margin-bottom: 0; }
.block-h { font-size: 22px; font-weight: 700; line-height: 1.7; margin: 0 0 20px; }
@media (min-width: 768px) { .block-h { font-size: 28px; } }
.block p { color: var(--ink-mute); margin: 0 0 18px; }
.block p:last-child { margin-bottom: 0; }
.block p strong { color: var(--ink); }
/* ── 番号付き仕事内容 ── */
.duty { display: flex; gap: 20px; padding: 28px 0; border-top: 1px solid var(--line); }
.duty:last-child { border-bottom: 1px solid var(--line); }
.duty-no { font-size: 28px; font-weight: 700; color: var(--line); line-height: 1; flex-shrink: 0; letter-spacing: -.02em; }
@media (min-width: 768px) { .duty-no { font-size: 34px; } }
/* ── 1日の流れ ── */
.day { display: flex; gap: 20px; padding: 20px 0; border-top: 1px solid var(--line); }
.day:last-child { border-bottom: 1px solid var(--line); }
.day-time { font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--accent); flex-shrink: 0; width: 52px; padding-top: 5px; }
.day-time--mute { color: var(--ink-mute); }
/* ── 条件テーブル ── */
.terms { margin: 0; }
.terms > div { padding: 18px 0; border-top: 1px solid var(--line); }
.terms > div:last-child { border-bottom: 1px solid var(--line); }
@media (min-width: 700px) { .terms > div { display: grid; grid-template-columns: 150px 1fr; gap: 20px; } }
.terms dt { font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--ink-mute); padding-top: 4px; margin-bottom: 6px; }
@media (min-width: 700px) { .terms dt { margin-bottom: 0; } }
.terms dd { margin: 0; font-size: 15px; }
/* ── 正直ゾーン：装飾を減らす ── */
.plain { background: transparent; }
.plain .list li::before { background: var(--ink-mute); opacity: .4; }
/* ── 関連職種 ── */
.rel { display: flex; justify-content: space-between; align-items: center; gap: 16px;
padding: 22px 0; border-top: 1px solid var(--line); text-decoration: none; color: inherit; }
.rel:last-of-type { border-bottom: 1px solid var(--line); }
.rel:hover .rel-t { color: var(--accent); }
.rel-t { font-size: 17px; font-weight: 700; margin: 0 0 4px; line-height: 1.6; }
.rel-d { font-size: 13px; color: var(--ink-mute); margin: 0; }
.rel::after { content: "→"; color: var(--accent); flex-shrink: 0; }
/* ══════ フォーム ══════ */
.form-wrap { max-width: 720px; margin: 0 auto; }
.steps { display: flex; align-items: center; gap: 10px; margin-bottom: 56px; }
.step-dot {
width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
font-size: 12px; font-weight: 700;
background: var(--surface-2); color: var(--ink-mute);
}
.step-dot--on { background: var(--accent); color: #fff; }
.step-label { font-size: 13px; color: var(--ink-mute); }
.step-label--on { color: var(--ink); font-weight: 700; }
.step-line { flex: 1; height: 1px; background: var(--line); }
.step-line--on { background: var(--accent-fill); }
fieldset { border: 0; margin: 0 0 44px; padding: 0; }
legend { font-weight: 700; font-size: 16px; margin-bottom: 18px; padding: 0; }
.field-row { margin-bottom: 36px; }
.field-label { display: block; font-weight: 700; font-size: 15px; margin-bottom: 4px; }
.field-help { font-size: 13px; color: var(--ink-mute); margin: 0 0 12px; }
.field {
width: 100%; padding: 13px 14px; background: var(--surface);
border: 1px solid var(--line); border-radius: 8px;
font-size: 16px; color: var(--ink); font-family: inherit; line-height: 1.6;
}
.field::placeholder { color: #B4B8BB; }
.field:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(240,120,95,.28); }
select.field { appearance: none; -webkit-appearance: none; cursor: pointer;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; }
textarea.field { min-height: 130px; resize: vertical; }
.req, .opt {
display: inline-block; font-size: 10px; letter-spacing: .08em;
padding: 2px 7px; border-radius: 3px; margin-left: 8px; vertical-align: middle; font-weight: 700;
}
.req { background: var(--ink); color: #fff; }
.opt { background: var(--surface-2); color: var(--ink-mute); }
/* ラジオ：カード型 */
.opt-card {
display: flex; align-items: flex-start; gap: 12px;
padding: 18px; border: 1px solid var(--line); border-radius: 10px;
background: var(--surface); cursor: pointer; transition: border-color .2s;
}
.opt-card:hover { border-color: var(--accent); }
.opt-card input { margin: 3px 0 0; accent-color: var(--accent); width: 18px; height: 18px; flex-shrink: 0; }
.opt-card-t { font-weight: 700; font-size: 15px; display: block; line-height: 1.6; }
.opt-card-d { font-size: 13px; color: var(--ink-mute); display: block; line-height: 1.7; }
/* ファイル */
.drop {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
padding: 36px 20px; border: 1px dashed var(--line); border-radius: 10px;
background: var(--surface); cursor: pointer; text-align: center; transition: border-color .2s;
}
.drop:hover { border-color: var(--accent); }
.drop-t { font-size: 14px; }
.drop-s { font-size: 12px; color: var(--ink-mute); }
.agree { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 14px; }
.agree input { margin: 4px 0 0; accent-color: var(--accent); width: 18px; height: 18px; flex-shrink: 0; }
/* 2026-08-26 赤系統一（先方FB）。#C0392B は唯一残っていた別系統の赤だった */
.err { color: var(--accent); font-size: 14px; }
.hidden { display: none; }
/* ══════════════════════════════════════════════════════════════
演出レイヤー「成長のめもり」 — 設計: docs/motion-design-c.md
原則: 静止(html:not(.anim))時はすべて完成状態。html.anim のときだけ動く。
色は var(--accent)/currentColor のみ（--accent 切替に追従）。
══════════════════════════════════════════════════════════════ */
/* ── 共通イージング変数 ── */
/* 出現系イージングは main.bundle.js 実測値（DESIGN.md §5） */
:root { --e-out: cubic-bezier(.15,.93,.67,.99); --e-tick: cubic-bezier(.34,1.56,.64,1); }
/* ── G3: リビール（各セクション最大1グループ）── */
.rv { transition: opacity 1s var(--e-out), transform 1s var(--e-out); }
html.anim .rv { opacity: 0; transform: translateY(16px); }
html.anim .rv.is-in { opacity: 1; transform: none; }
html.anim .rv[style*="--i"] { transition-delay: calc(var(--i) * 200ms); }
/* ── Hero 立ち上げ ── */
html.anim .hero-photo { transform: scale(1.04); }
html.anim .hero.is-loaded .hero-photo { transform: scale(1); transition: transform 2.5s var(--e-out); }
.hero-rise { transition: opacity .6s var(--e-out), transform .6s var(--e-out); transition-delay: calc(var(--i,0) * 80ms); }
html.anim .hero-rise { opacity: 0; transform: translateY(18px); }
html.anim .hero.is-loaded .hero-rise { opacity: 1; transform: none; }
/* ── めもり下線（数字・見出し）＝ステップで「トントン」と刻む ── */
.stat { position: relative; }
.stat::after {
content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 64px;
background: var(--accent-fill); transform: scaleX(1); transform-origin: left;
opacity: 0;
}
html.anim .stat::after { transform: scaleX(0); }
html.anim .stat.is-in::after { transform: scaleX(1); transition: transform .5s steps(5, end) .15s; }
/* 下線は主役の数字だけに付ける（社長添付モック）。3つとも同じ強さで
下線を引くと主従が付かないので、MISSIONのhero数字だけ有効化する */
.stat-num--hero { padding-bottom: 12px; }
.ms-hero .stat::after { opacity: 1; }
/* 福利厚生カテゴリ見出しの下線を accent で引き直す（既存1px線がトラック）── */
.bh { position: relative; display: flex; align-items: center; gap: 10px; }
.bh::after {
content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%;
background: var(--accent-fill); transform: scaleX(1); transform-origin: left;
}
html.anim .bh::after { transform: scaleX(0); }
html.anim .bh.is-in::after { transform: scaleX(1); transition: transform .55s steps(5, end); }
.bh .bi { flex-shrink: 0; width: 22px; height: 22px; color: var(--accent-fill); }
/* ── 価値観：各項目に「トン」と刻みtick ── */
.val::before {
content: ""; display: block; width: 26px; height: 3px; border-radius: 2px;
background: var(--accent-fill); margin-bottom: 14px; transform-origin: left center;
}
html.anim .val::before { transform: scaleX(0); }
html.anim .val.is-in::before {
transform: scaleX(1); transition: transform .18s var(--e-tick);
transition-delay: calc(var(--i,0) * 80ms + .05s);
}
/* ── 採用プロセス
以前は STEP 番号の左に短い縦めもりを引いていたが、
モック反映で「点＋次のステップへ落ちる線」を入れたため二重になる。
線は .step-rail::after が持つ（下部の採用プロセス節を参照） ── */
.step { position: relative; }
/* ── SVG 線描画（循環図・地図） ── */
[data-draw] { stroke-dasharray: var(--len); stroke-dashoffset: 0; }
html.anim [data-draw] { stroke-dashoffset: var(--len); transition: stroke-dashoffset 1.3s ease; }
html.anim [data-draw].is-in { stroke-dashoffset: 0; }
/* ── 見せ場1: めぐる循環図 ── */
.cycle { margin: 8px 0 56px; }
.cycle svg { width: 100%; height: auto; display: block; color: var(--ink); overflow: visible; }
.cycle .c-node { fill: var(--bg); stroke: currentColor; stroke-width: 1.75; }
.cycle .c-line { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.cycle .c-loop { fill: none; stroke: var(--accent-fill); stroke-width: 2; stroke-linecap: round; }
/* SVG内の文字は描画幅に比例して縮む。全幅760pxで描いていた頃は 13px/11px が
そのまま出ていたが、右カラム約540pxでは 0.87倍＝11px/9px になってしまう。
実寸が元と同じ 13px/11px で出るよう、viewBox上の値を割り戻した */
.cycle .c-label { font-size: 14px; font-weight: 700; fill: var(--ink); }
/* ノードの中の線アイコン。--accent を継ぐので .sec--dark でも自動で追従する */
.cycle .c-ico { color: var(--accent); }
.cycle .c-cap { font-size: 12px; letter-spacing: .1em; fill: var(--ink-mute); }
/* ⚠️ 未解決：積んだ幅（390px）では図が342pxまで縮み、ラベルが実寸8px相当になる。
メディアクエリで font-size を割り戻す手は試したが、viewBoxの幾何は変わらないため
「点検・クリーニング」と「再レンタル」が楕円の線に重なる。実測：
楕円は中心(310,150)/rx240 なので、右ノード(550,150)は楕円の右頂点にあたり、
その真上は必ず弧が通る。文字を大きくすると必ずぶつかる＝文字サイズでは解けない。
直すなら、狭い画面用に縦長の配置（別ジオメトリ）を用意する必要がある。 */
.cycle .c-arrow { fill: var(--accent-fill); }
.cycle .c-stroller { color: var(--accent-fill); }
/* ── 見せ場2: 徒歩3分の地図（location = dark。currentColor=白）── */
}
/* ── 募集職種：ホバーで accent バーが伸び、行が少し右へ ── */
.job { position: relative; transition: transform .2s ease; }
.job::before {
content: ""; position: absolute; left: -2px; top: 0; height: 100%; width: 4px;
background: var(--accent-fill); transform: scaleY(0); transform-origin: top; transition: transform .2s ease;
}
.job:hover { transform: translateX(4px); }
.job:hover::before { transform: scaleY(1); }
/* ── 追加情報：アコーディオンを滑らかに（＋が45°回転） ── */
.acc summary::after { content: "＋" !important; transition: transform .25s var(--e-out); }
.acc[open] summary::after { transform: rotate(45deg); }
.acc[open] .acc-body { animation: accIn .28s var(--e-out); }
@keyframes accIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
/* ── G1: めもりレール（デスクトップ ≥1080px）── */
.rail { display: none; }
@media (min-width: 1080px) {
.rail {
display: block; position: fixed; left: 22px; top: 96px; bottom: 40px; width: 40px; z-index: 45;
}
.rail-track { position: relative; height: 100%; width: 1px; margin-left: 6px; background: var(--line); }
.rail-fill { position: absolute; left: 0; top: 0; width: 1px; height: 0; background: var(--accent); transition: height .25s var(--e-out); }
.rail-tick {
position: absolute; left: 0; transform: translate(-6px, -50%);
display: flex; align-items: center; gap: 8px;
background: none; border: 0; padding: 0; cursor: pointer;
}
.rail-dot { width: 6px; height: 1px; background: var(--ink-mute); transition: all .25s var(--e-out); display: block; }
.rail-label { font-size: 10px; color: var(--ink-mute); opacity: 0; transform: translateX(-4px); transition: all .25s var(--e-out); }
/* 現在地だけ強くする（社長指示）。数字は他が opacity:0 なので
見えているのは1つだけ。大きさと目盛りの長さで差をつける */
.rail-tick.is-active .rail-dot { width: 18px; height: 2px; background: var(--accent); }
.rail-tick.is-active .rail-label {
opacity: 1; transform: none; color: var(--ink); font-weight: 700;
font-size: 13px; letter-spacing: .02em;
}
.rail-tick:hover .rail-label { opacity: 1; transform: none; }
/* レールは position:fixed でセクションの外にいるため、.sec--dark の
色の上書きが届かない。濃い地（#3A2E2B）の上に来ると
線(--line #E7DCD9)も点(--ink-mute #6E625F)も同化して消えていた。
レールの中心が濃いセクションに重なっている間だけ色を差し替える
（切り替えは goodpatch-motion.js が .rail--on-dark を付け外しする） */
.rail--on-dark .rail-track { background: rgba(255,255,255,.28); }
.rail--on-dark .rail-fill { background: var(--accent-on-dark); }
.rail--on-dark .rail-dot { background: rgba(255,255,255,.55); }
.rail--on-dark .rail-label { color: rgba(255,255,255,.7); }
.rail--on-dark .rail-tick.is-active .rail-dot { background: var(--accent-on-dark); }
.rail--on-dark .rail-tick.is-active .rail-label { color: #fff; }
.rail-pulse .rail-dot { animation: railPulse .6s var(--e-out); }
@keyframes railPulse { 0% { box-shadow: 0 0 0 0 var(--accent); } 100% { box-shadow: 0 0 0 8px transparent; } }
}
/* ── モバイル進行バー（<1080px）── */
.mprogress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; background: transparent; }
.mprogress-fill { height: 100%; width: 0; background: var(--accent-fill); transition: width .25s var(--e-out); }
@media (min-width: 1080px) { .mprogress { display: none; } }
/* ── G2: アニメーション ON/OFF トグル ── */
.mtoggle {
position: fixed; right: 16px; bottom: 16px; z-index: 60;
display: inline-flex; align-items: center; gap: 8px;
padding: 9px 16px; border-radius: 999px; cursor: pointer;
background: var(--surface); color: var(--ink); border: 1px solid var(--line);
font-family: inherit; font-size: 12px; font-weight: 700; line-height: 1;
box-shadow: 0 2px 10px rgba(57,61,64,.1);
}
.mtoggle:hover { border-color: var(--accent); }
.mtoggle-state {
min-width: 30px; text-align: center; padding: 3px 7px; border-radius: 999px;
background: var(--accent); color: #fff; letter-spacing: .06em;
}
.mtoggle[aria-pressed="false"] .mtoggle-state { background: var(--surface-2); color: var(--ink-mute); }
/* ══════════════════════════════════════════════════════════════
構成案 v3（2026-08-11）で追加したパーツ
職種前倒し／面白さと難しさ／価値観アイコン／社員インタビュー／
FAQ／SP下部固定バー
══════════════════════════════════════════════════════════════ */
/* アンカーで飛んだとき、見出しが追従ヘッダー（68px）に隠れないようにする */
section[id], header[id] { scroll-margin-top: 84px; }
/* ── ヘッダーのCTA（構成案v3：募集中の職種＋カジュアル面談の2つ）── */
/* モバイルでは非表示。同じCTAをSP下部固定バーが担っており、
FV内にもボタンがあるため、ヘッダーに置くとロゴを圧迫するだけになる */
.nav-cta { display: none; align-items: center; gap: 8px; flex-shrink: 0; }
@media (min-width: 768px) { .nav-cta { display: flex; } }
/* 2つ並べるとロゴが潰れる幅では主CTA1つに絞る */
.nav-cta-sub { display: none; }
@media (min-width: 900px) { .nav-cta-sub { display: inline-flex; } }
/* ── FV：2行目は1行目より一段落として、視線の順番を作る ── */
.hero-title-sub { font-size: .78em; opacity: .92; }
/* ── 受賞バッジ ── */
/* 受賞：先方の公式バッジ素材（3つが1枚に入っている）を中央に置く。
原寸340x82。先方サイトは228px幅で使っているので、それ以上には拡大しない */
/* 受賞バッジは「15万人」の直下に置く（社長スケッチ）。
セクション末尾の中央帯だったものを、数字の裏付けとして左揃えの小さい塊にした。
⚠️ 340pxの素材を240pxで使う。列が373pxなので原寸だと数字より目立つ */
.awards {
display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
margin-top: 20px;
margin-bottom: 28px;
}
.award-official { width: 200px; max-width: 200px; height: auto; display: block; flex-shrink: 0; }
.award-note {
font-size: 10px; line-height: 1.6; color: var(--ink-mute);
margin: 0; text-align: left; flex: 1; min-width: 140px;
}
/* 公式バッジ画像を持たない受賞は、テキストのバッジを縦に積んで実物の隣に置く */
.award-texts { display: flex; flex-direction: column; gap: 10px; }
.award {
display: inline-flex; align-items: center; gap: 9px;
padding: 11px 18px 11px 14px; border-radius: 999px;
background: var(--surface); border: 1px solid var(--line);
font-size: 13px; line-height: 1.6; color: var(--ink-mute);
}
.award b { color: var(--ink); font-weight: 700; }
.award-ico { width: 22px; height: 22px; flex-shrink: 0; color: var(--ink-mute); }
.award-ico .ln { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.award-ico .fill { fill: var(--accent-fill); }
/* ── 職種タブ（CSSのみ。JS不要）────────────────────────────── */
.jobtabs > input { position: absolute; opacity: 0; pointer-events: none; }
/* モック04：横タブは3職種が右に続くことが伝わりにくかったため縦に。
PCは左サイドバー、スマホは従来どおり横スクロール */
.jt-labels {
display: flex; gap: 4px; overflow-x: auto; margin-bottom: 44px;
border-bottom: 1px solid var(--line); scrollbar-width: none;
}
.jt-labels::-webkit-scrollbar { display: none; }
.jt-label {
flex-shrink: 0; cursor: pointer; padding: 0 20px 18px; margin-bottom: -1px;
border-bottom: 2px solid transparent; color: var(--ink-mute);
transition: color .2s ease, border-color .2s ease;
}
.jt-label:first-child { padding-left: 0; }
@media (min-width: 900px) {
/* stretch にして、タブ列の縦の仕切りをパネルの高さいっぱいまで伸ばす。
start のままだと線が最後のタブで切れ、左カラムだけ宙に浮いて見えた。
280pxでは「マーケティング責任者（幹部候補）」の実テキスト287pxが収まらず、
nowrap と相まって列の右端を30px越えていた（実測）。左右padding込みで340pxに */
/* 枠は .jt-panel ではなく .jobtabs が持つ（社長指示）。
パネル側に枠を持たせると、左のタブ列と右の詳細が別々の面になって
「白いところが左右で分かれている」見え方になっていた。
⚠️ overflow:hidden は使えない。タブ列の sticky が効かなくなる */
.jobtabs {
display: grid; grid-template-columns: 420px 1fr; gap: 0; position: relative;
background: var(--surface-tint); border: 1px solid var(--line); border-radius: 12px;
}
/* 縦の仕切り。.jt-labels の border-right だと、sticky に必要な
align-self:start で列の高さが中身ぶんになり、線が最後のタブで切れる。
親に持たせれば、タブが追従しても線は枠の高さいっぱいのまま */
.jobtabs::before {
content: ""; position: absolute; left: 420px; top: 0; bottom: 0;
width: 1px; background: var(--line);
}
.jt-labels {
flex-direction: column; gap: 0; margin-bottom: 0; overflow: visible;
border: 0;
/* 職種の詳細が長いので、読んでいる間ずっと「どれを見ているか」が見えるように
セクションが続く限り追従させる（社長指示）。
89px = ヘッダー69px + 20px。ヘッダーは下スクロール中は隠れるので重ならない */
align-self: start; position: sticky; top: 89px;
}
.jt-label {
padding: 32px 24px 32px 20px; margin-bottom: 0;
border-bottom: 1px solid var(--line);
/* 4px（社長指示）。非選択にも透明で持たせるので、選ばれても文字がずれない */
border-left: 4px solid transparent;
transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}
.jt-label:first-child { padding-left: 20px; }
.jt-panels { min-width: 0; }
}
.jt-label:hover { color: var(--ink); }
.jt-label .jt-dept { display: block; font-size: 11px; font-weight: 700; letter-spacing: .12em; margin-bottom: 4px; }
.jt-label .jt-name { display: block; font-size: 16px; font-weight: 700; line-height: 1.5; white-space: nowrap; }
@media (min-width: 768px) { .jt-label .jt-name { font-size: 18px; } }
/* 非選択は一段淡く（社長指示）。ただし色を2度戻している:
#7D716E は4.42:1でAA割れ → #786C69（当時の地 #FAF7F6 で4.72:1）
→ 色付きの地を #F3E9E6 に濃くしたら 4.25:1 に落ちたので #71655F
（#F3E9E6上4.72 / #FCF6F4上5.26）。選択中(--accent)との差は保っている。
英字ラベル(11px)と年収(12px)は小さいので下げない。下げると4.5:1を割る */
.jt-label .jt-name { color: #71655F; }
/* 想定年収はタブを開かなくても見えるようにする。
求職者が最も見る条件なので、閉じた状態で比較できることに価値がある */
.jt-label .jt-salary {
display: block; margin-top: 5px; white-space: nowrap;
font-size: 12px; font-weight: 500; color: var(--ink-mute); line-height: 1.5;
}
#jt1:checked ~ .jt-labels [for="jt1"] .jt-salary,
#jt2:checked ~ .jt-labels [for="jt2"] .jt-salary,
#jt3:checked ~ .jt-labels [for="jt3"] .jt-salary { color: var(--ink); }
/* モックはパネル全体が1枚のカード。地(--bg-tint)より明るい面に載せて
「いま開いている職種のひとまとまり」が枠で分かるようにする。
⚠️ スマホでも効かせること。カードが無いとコーラルの文字が
色付きの地(#F3E9E6)に直接載ってコントラストが落ちる */
.jt-panel { display: none; background: var(--surface-tint);
border: 1px solid var(--line); border-radius: 12px; padding: 24px 20px 28px; }
/* ⚠️ この上書きは上の基本ルールより「後ろ」に置くこと。同じ詳細度なので
メディアクエリでも前に書くと負ける（このファイルで3度目） */
@media (min-width: 900px) {
/* 枠は親(.jobtabs)が持つ。ここに枠を残すと二重の面になり、
左のタブ列と右の詳細が別々のカードに見える */
.jt-panel { background: none; border: 0; border-radius: 0; padding: 36px 40px 40px; }
}
#jt1:checked ~ .jt-labels [for="jt1"],
#jt2:checked ~ .jt-labels [for="jt2"],
#jt3:checked ~ .jt-labels [for="jt3"] { color: var(--ink); border-bottom-color: var(--accent); }
@media (min-width: 900px) {
/* 選択中を強くする（社長指示）。面は地(--bg-tint #F3E9E6)より
明るい側に置くこと。同色系で暗くすると「凹み」に見えて選択に読めない */
#jt1:checked ~ .jt-labels [for="jt1"],
#jt2:checked ~ .jt-labels [for="jt2"],
#jt3:checked ~ .jt-labels [for="jt3"] {
border-bottom-color: var(--line); border-left-color: var(--accent);
/* 枠が --surface-tint になったので、選択の面は同色では見えない。
淡いピンク（枠との差17）。⚠️ --accent が #F76441 になり 2.63:1（AA不足） */
background: #FCEAE3;
}
/* 左端のコーラル線は角を丸めない（社長指摘）。border-radius を当てると
4pxの線の先まで丸く切れて「先が丸いバー」に見える。
角の始末は .jt-labels 側で受ける（下） */
.jt-label:last-child { border-bottom: 0; }
/* タブ列は角を丸めない。丸めると選択中の左のコーラル線まで一緒に切られて
「先が丸いバー」になる（社長指摘）。
引き換えに、スクロール最上部では選択中の面の角がカードの丸みから
わずかに出るが、12pxの角に対して線は4px幅なので実害は1〜2px */
.jt-labels { border-radius: 0; overflow: visible; }
/* 職種名は選択時だけ2px大きく */
#jt1:checked ~ .jt-labels [for="jt1"] .jt-name,
#jt2:checked ~ .jt-labels [for="jt2"] .jt-name,
#jt3:checked ~ .jt-labels [for="jt3"] .jt-name {
color: var(--accent); font-size: 20px;
}
}
#jt1:checked ~ .jt-labels [for="jt1"] .jt-dept,
#jt2:checked ~ .jt-labels [for="jt2"] .jt-dept,
#jt3:checked ~ .jt-labels [for="jt3"] .jt-dept { color: var(--accent); }
#jt1:checked ~ .jt-panels .jt-panel:nth-of-type(1),
#jt2:checked ~ .jt-panels .jt-panel:nth-of-type(2),
#jt3:checked ~ .jt-panels .jt-panel:nth-of-type(3) { display: block; }
.jobtabs > input:focus-visible ~ .jt-labels label[for] { outline: none; }
#jt1:focus-visible ~ .jt-labels [for="jt1"],
#jt2:focus-visible ~ .jt-labels [for="jt2"],
#jt3:focus-visible ~ .jt-labels [for="jt3"] { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
/* 職種パネルの中身 */
/* max-width:20em（=560px）が効いていて、704pxのカラムに収まる見出しまで
折り返していた。HTMLの
と二重に効いて不自然な改行になっていたので両方外す */
/* 職種ごとのイラスト。透過せず、絵の地の色をそのままカードに塗って縁を消す（社長指示）。
3枚の地は #FCF7F4 / #FDF8F5 / #FDF9F6 で最大差2。#FDF8F5 に寄せて1つに揃えた。
セクションの地(--bg-tint #F3E9E6)の上に置くので、この帯は「カード」として読める。
⚠️ 素材は 1000x333（比3.00）。width/height 属性と合わせること */
.jt-ill {
display: block; width: 100%; height: auto; aspect-ratio: 3 / 1;
background: #FDF8F5; border-radius: 12px; margin: 0 0 28px;
object-fit: cover;
}
/* パネルの頭に、どの職種を見ているかをもう一度置く（モック準拠）。
スマホではタブが横1列に潰れて選択が読みにくいので、ここが効く */
.jt-dept-h {
font-size: 12px; font-weight: 700; letter-spacing: .12em; line-height: 1.4;
color: var(--accent); margin: 0 0 6px;
}
.jt-title {
font-size: 21px; font-weight: 700; line-height: 1.4; margin: 0 0 14px;
letter-spacing: .01em;
}
@media (min-width: 768px) { .jt-title { font-size: 26px; } }
.jt-mission {
font-size: 18px; font-weight: 700; line-height: 1.4; margin: 0 0 24px;
letter-spacing: .01em;
/* 2行になる見出しを均等に割る。マーケ職の見出しは放っておくと
26字＋「る。」2字の孤立行になるが、balanceで14字/14字＝読点の位置で割れる。
1行に収まる見出しには何も起きないので、
を書き足す必要がなくなる */
text-wrap: balance;
}
@media (min-width: 768px) { .jt-mission { font-size: 20px; } }
/* 条件はアイコン付きの3つ組（社長添付モック）。丸ピルの横並びだと
3つが1行に入らず折り返して「1つ目だけ長い」不揃いになっていた */
.jt-cond { display: grid; gap: 10px; margin: 0 0 32px; }
@media (min-width: 560px) { .jt-cond { grid-template-columns: repeat(3, 1fr); } }
.jt-cond-item {
padding: 14px 16px; border: 1px solid var(--line); border-radius: 8px;
background: var(--surface-tint);
}
/* アイコンは値の横ではなく「見出しの行」に置く。横に並べると値が使える幅が
135pxしかなく、「正社員（業務委託も可）」(143px)が2行に折れて
3枚の高さが揃わなかった。見出し行に上げると値は167px使える */
.jt-cond-l {
display: flex; align-items: center; gap: 8px;
font-size: 11px; font-weight: 700; color: var(--ink-mute); margin-bottom: 5px;
}
.jt-cond-ico { width: 18px; height: 18px; flex-shrink: 0; color: var(--accent-fill); }
.jt-cond-v { display: block; font-size: 13px; font-weight: 700; line-height: 1.5; color: var(--ink); }
/* 月給の内訳はチップの中に入れると、3枚のうち1枚だけ1行増えて高さが揃わない。
事実として落とせないので、チップの下の注記に出す（モックもチップは年収だけ） */
.jt-cond-note {
font-size: 11px; line-height: 1.7; color: var(--ink-mute);
margin: -22px 0 32px;
}
/* 便益4分類：縦のリストからカードへ。
列数を画面幅のメディアクエリで決めていたが、このカードが入るのは
タブの右パネル（1440pxでも704px）なので画面幅とは一致しない。
1440pxで4列＝1枚166px＝1行11字まで潰れていた。
auto-fit で「入る分だけ」並べる：704pxなら2列(346px)、全幅なら4列 */
/* 下限240pxだと804pxのパネルで3列260px＝1行16字まで潰れる。
280pxにすると2列396px＝1行28字で落ち着く */
/* パネルをカード化して左右に40pxのパディングが入り、中身が536pxになった。
下限280pxだと2列で572px必要になり1列に落ちていた。240pxにして2列を確保する
（2×240+12=492 ≦ 536）。モックは2×2 */
.gain-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.gain-card { border: 1px solid var(--line); border-radius: 8px; padding: 20px; }
/* 罫線で仕切っていたが、モックはアイコン＋見出しが1行に並ぶ形。
線を1本減らすとカードが軽くなり、絵の側に目が行く */
.gain-label {
display: flex; align-items: center; gap: 8px;
font-size: 14px; font-weight: 700; line-height: 1.4; color: var(--accent);
margin: 0 0 8px;
}
.gain-ico { width: 26px; height: 26px; flex-shrink: 0; color: var(--accent-fill); }
.gain-text { margin: 0; font-size: 12px; line-height: 1.75; font-weight: 500; color: var(--ink-mute); }
.gain-text strong { color: var(--ink); font-weight: 700; }
/* ── パネルの中身を「見出し＋罫線」で塊に割る（社長添付モック準拠）──
直前まで 本文→必須条件→カード4枚 が切れ目なく続いていて、
どこまでが1つの話か分からないのが「読みにくい」の正体だった */
.jt-block { border-top: 1px solid var(--line); padding-top: 32px; margin-top: 32px; }
.jt-block:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
/* 見出しの頭にコーラルの縦棒（モック準拠）。上の罫線と合わせて
「ここから新しい話」が2重に効く */
.jt-block-h {
position: relative; padding-left: 12px;
font-size: 15px; font-weight: 700; line-height: 1.7;
margin: 0 0 16px; letter-spacing: .04em; color: var(--ink);
}
.jt-block-h::before {
content: ""; position: absolute; left: 0; top: .28em; bottom: .28em;
width: 3px; border-radius: 2px; background: var(--accent);
}
/* 本文の1行の長さ。本家 careers.goodpatch.com は18pxの本文を600px幅で組んでいて
1行33字。うちは704px幅に17pxで41字あり、これが読みにくさの主因だった。
（左右の余白は本家と同値の1120pxなので、余白ではなく行長の問題）
36em(34字)だと罫線が本文より68px右に出て「左右が合っていない」と見えたため、
38em(36字)に。線の出っ張りは36px＝パネル644pxの5.6%まで縮む。
40em(38字)なら4pxまで揃うが、本家の33字から離れすぎるので採らない */
.jt-prose { max-width: 38em; }
.jt-prose > p + p { margin-top: 16px; }
.jt-prose > .list { margin-top: 0; }
/* 必須条件は淡い面に載せて「条件の箱」として塊にする（モック準拠） */
.list--boxed {
background: var(--surface-tint); border: 1px solid var(--line);
border-radius: 8px; padding: 18px 20px 18px 36px;
}
.list--boxed li:last-child { margin-bottom: 0; }
.jt-note { font-size: 13px; color: var(--ink-mute); margin: 12px 0 0; }
/* CTAは全部読んだ先に置く。モックどおり中央・塗り */
.jt-cta { display: flex; margin-top: 48px; }
/* モックは全幅の塗りボタン。パネルの終わりが一目で分かる */
.jt-cta .pill--wide { width: 100%; justify-content: center; gap: 12px; padding: 18px 24px; }
.pill-arrow { font-size: 16px; line-height: 1; }
/* ── 面白さと難しさ（モック05準拠：面白さは横3枚、下段で難しさ／向いていない方を左右に）
装飾の逆勾配は維持する＝ネガティブ側ほど枠を持たせない ── */
/* 小見出し（面白さ3／難しさ2／向いていない方） */
.sub-h {
font-size: 15px; font-weight: 700; line-height: 1.4; color: var(--accent);
margin: 0 0 16px; padding-bottom: 8px; display: inline-block;
border-bottom: 2px solid var(--accent-fill);
}
/* モックは「見出しの右に細い罫線が最後まで伸びる」形。下線を引くより
帯の始まりが分かりやすく、3つの節（面白さ／難しさ／向いていない方）が
同じ重さで並ぶ */
.sub-h--rule {
display: flex; align-items: center; gap: 16px;
border-bottom: 0; padding-bottom: 0; margin-bottom: 20px;
}
.sub-h--rule::after {
content: ""; flex: 1; height: 1px; background: var(--line);
}
.sub-h .latin { margin-left: 6px; font-size: 13px; }
/* 面白さ：枠のあるカードで3つの並列を見せる */
/* ── 面白さ：1つ目を大きく、2・3を横並びのカードに（社長添付モック）──
3枚を等しく並べると「どれから読むか」が決まらず、いちばん強い
「その日に動く」が埋もれていた。大1枚＋小2枚で読む順を作る */
.rw-bento { display: grid; gap: 16px; margin-bottom: 64px; }
@media (min-width: 900px) {
/* 左に大きいカード、右に小さいカードを2枚積んだ列を並べる。
以前は rw-card--lead に grid-row:1/span2 を指定して直接2行を張っていたが、
それだと行トラックが大カードの高さで確定し、小カードの文の下に
90pxの空きができていた（社長指摘）。右2枚を rw-stack で1つの列にまとめて
align-items:start にすれば、右列は中身の高さぶんしか使わない */
.rw-bento { grid-template-columns: 1fr 1fr; align-items: start; }
.rw-stack { display: flex; flex-direction: column; gap: 16px; }
}
/* ⚠️ カード側に padding を持たせない。写真を縁まで届かせるために
負のマージンで打ち消す作りにしたら、height:100% が「余白を除いた行の高さ」で
解決されて下が41px 足りなかった。余白は本文(.rw-body)に持たせるのが正解 */
.rw-card {
background: var(--surface-tint); border: 1px solid var(--line);
border-radius: 12px; padding: 0; overflow: hidden;
}
/* 大きい方は写真が上、文が下。小さい方は写真が左、文が右 */
.rw-card--lead { display: flex; flex-direction: column; }
.rw-card--row { display: grid; }
@media (min-width: 560px) {
.rw-card--row { grid-template-columns: 168px minmax(0, 1fr); }
}
.rw-body { padding: 16px; }
/* 写真の枠。絵ではなく写真にする（上のOPEN ROLESと下のVALUESがどちらも
イラストなので、ここも絵にすると3セクション続けて絵になる）。
⚠️ 写真は縁まで届かせる。カードの内側に浮かせると「貼った絵」に見えて、
絵と写真の違いが出ない。カードの padding を負のマージンで打ち消す */
.rw-ill {
/* ⚠️ height: auto を先に入れておく。いまは div なので効かないが、
写真の ![]()
に差し替えた瞬間に height 属性が aspect-ratio に勝って崩れる
（循環の写真で実際にやった） */
width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover;
font-size: 12px; line-height: 1.7;
}
/* 素材は 1000x667（3:2）。16:10のままだと縦が6%切れるので比を合わせる
（循環の写真と同じ食い違い。プロンプトの表と出力サイズを一致させること） */
.rw-card--lead .rw-ill { aspect-ratio: 2 / 1; }
/* 小：縦素材を 3:4 に切り、画像がカード全体を必要以上に押し広げないようにする。 */
@media (min-width: 560px) {
.rw-card--row .rw-ill { aspect-ratio: 3 / 4; height: auto; }
}
@media (min-width: 560px) {
.rw-stack .rw-card--row:first-child .rw-ill {
aspect-ratio: 1 / 1;
}
}
/* 積んだ幅（<560px）では縦位置の写真が幅いっぱい＝490px相当まで伸びて高さを食う。
4:3に切って抑えるが、16:10まで詰めると縦素材から横帯しか残らず人物の頭が切れる。
object-position を上寄りにして、主役（人物・手元）を残す */
@media (max-width: 559px) {
.rw-card--row .rw-ill { aspect-ratio: 4 / 3; object-position: 50% 38%; }
}
.rw-body { min-width: 0; }
.rw-h { font-size: 17px; font-weight: 700; line-height: 1.6; margin: 0 0 10px; }
@media (min-width: 900px) { .rw-card--lead .rw-h { font-size: 22px; } }
.rw-p { font-size: 13px; line-height: 1.9; color: var(--ink-mute); margin: 0; }
@media (min-width: 900px) { .rw-card--lead .rw-p { font-size: 15px; } }
.good-row { margin-bottom: 64px; }
.good-item {
border: 1px solid var(--accent-fill); border-radius: 6px; padding: 24px;
}
.good-h {
font-size: 16px; font-weight: 700; line-height: 1.7; margin: 0 0 12px;
color: var(--accent); display: flex; gap: 8px; align-items: baseline;
}
.good-no, .hard-no { flex-shrink: 0; }
/* 難しさ：枠を持たせず罫線だけ（正直な話ほど飾らない） */
.hard-item { padding: 20px 0; border-top: 1px solid var(--line); }
.hard-item:last-of-type { border-bottom: 1px solid var(--line); }
.hard-h {
font-size: 16px; font-weight: 700; line-height: 1.7; margin: 0 0 8px;
color: var(--accent); display: flex; gap: 8px; align-items: baseline;
}
/* 向いていない方：番号つきの行 */
.nofit ul { list-style: none; margin: 0; padding: 0; }
.nofit li {
display: flex; gap: 12px; align-items: center;
font-size: 15px; color: var(--ink-mute); line-height: 1.8;
padding: 14px 16px; margin-bottom: 8px;
border: 1px solid var(--line); border-radius: 6px;
}
.nofit li::before { content: none; }
.nofit-no {
flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
background: var(--accent-fill); color: #fff;
font-size: 11px; font-weight: 700;
display: flex; align-items: center; justify-content: center;
}
/* ── イラストは2系統 ────────────────────────────────────────
① .val2-ill 価値観の6つ。人物の入った場面イラストを大きく見せる（下地なし）
② .mini-ico 他セクションの小アイコン。同じテイストで小さく添える
先方のご要望は「価値観のセクションで各コンテンツにイラストアイコンを」。
参考いただいた4点はいずれも「面で塗った多色イラスト」だったため、
細い線画ではなく塗りで作る。 */
/* ② 小アイコン：特徴3点・福利厚生カテゴリ */
.mini-ico { width: 40px; height: 40px; flex-shrink: 0; display: block; color: var(--ink); }
/* 差別化3点のアイコン。40pxの塗りイラストだと見出しに埋もれていた（福利厚生で
162pxまで上げたのと不揃いでもあった）。線アイコンにして横に伸ばす。
1つ目は3商品を並べるので幅が3倍になる（viewBoxが96x32） */
.feature-ico {
height: 44px; width: auto; flex-shrink: 0; display: block;
color: var(--accent-fill); margin-bottom: 2px;
}
@media (min-width: 900px) { .feature-ico { height: 52px; } }
.mini-ico img { width: 100%; height: 100%; display: block; object-fit: contain; }
.mini-ico .fill { fill: var(--accent-fill); }
.mini-ico .ln { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* 福利厚生の見出しアイコンも同じ寸法に揃える（従来22px） */
.bh .bi { width: 28px; height: 28px; }
/* ── 価値観（社長添付モックを座標で写した）──────────────────
モック（横1267px、中身は x40〜1230 の1190px）を実測して、
1120pxに 0.941倍で写した値。基準16「数値でなく座標で合わせる」。
⚠️ 前回 object-fit:cover と全幅の食い込みを入れたが、
モックのイラストは1枚も切れていないし枠からも出ていない。
切らない・出さない・大きさだけ1枚ずつ変える、が正解だった。
カードの幅（モック実測 → 割合）
01 750px→63% 02 430px→37%
03 560px→47% 04 615px→53%
05 520px→44% 06 670px→56%
カード内でイラストが占める割合（モック実測）
01 62% 02 79% 03 52% 04 60% 05 59% 06 90%
見出し（VALUES／価値観）は他8セクションと同じ規則のまま ── */
.vals { display: grid; gap: 20px; }
@media (min-width: 900px) {
/* 行ごとに幅が違うので grid ではなく flex で折り返す。
2枚＋gap20px で 100% になるよう calc で10pxずつ引く */
.vals { display: flex; flex-wrap: wrap; gap: 20px; align-items: stretch; }
.val2:nth-child(1) { flex: 0 0 calc(63% - 10px); }
.val2:nth-child(2) { flex: 0 0 calc(37% - 10px); }
.val2:nth-child(3) { flex: 0 0 calc(47% - 10px); }
.val2:nth-child(4) { flex: 0 0 calc(53% - 10px); }
/* 3行目は 44:56 だと05の文欄が127pxしか残らず、31字が4行に割れる。
50:50 に寄せる。06の絵が行の高さを決めるので、05は絵を大きく取って
空きを減らす（うちの素材はモックのものより横長で、同じ幅でも背が低い） */
/* 05のカードを細く（社長指示）。44:56 */
.val2:nth-child(5) { flex: 0 0 calc(44% - 10px); }
.val2:nth-child(6) { flex: 0 0 calc(56% - 10px); }
}
.val2 {
position: relative; display: grid; gap: 16px;
background: var(--surface-tint); border-radius: 14px; padding: 28px;
min-width: 0;
}
@media (min-width: 700px) {
/* 既定は 左に絵・右に文。HTMLは 本文→画像 の順なので配置を明示する */
.val2 { grid-template-columns: 64% 1fr; gap: 10px; align-items: center; }
.val2-ill { grid-column: 1; grid-row: 1; }
.val2-body { grid-column: 2; grid-row: 1; }
/* 1枚ずつ絵の取り分を変える（モック実測） */
.val2:nth-child(1) { grid-template-columns: 68% 1fr; }
.val2:nth-child(3) { grid-template-columns: 59% 1fr; }
.val2:nth-child(4) { grid-template-columns: 66% 1fr; }
/* 細くしたぶん絵は50%に。58%のままだと本文が10字まで潰れる */
.val2:nth-child(5) { grid-template-columns: 56% 1fr; column-gap: 8px; }
/* ランナーを左へ寄せる（社長指示）。カードのpadding28pxのぶん食い込ませる */
.val2:nth-child(5) .val2-ill { margin-left: -22px; }
/* 2枚だけ 絵が上・文が下（モックの創造性・コラボ）。
全幅には回さない。左に寄せて右に少し余白を残すのがモックの形 */
.val2:nth-child(2), .val2:nth-child(6) {
grid-template-columns: 1fr; gap: 18px; align-content: start;
}
.val2:nth-child(2) .val2-ill, .val2:nth-child(6) .val2-ill {
grid-column: 1; grid-row: 1;
}
.val2:nth-child(2) .val2-body, .val2:nth-child(6) .val2-body {
grid-column: 1; grid-row: 2;
}
/* 02の素材は6枚で一番縦長（1000x806＝比1.24）。88%だと247pxの背になり
1行目の高さを決めてしまう。62%に落として左右中央に置く（社長指示） */
.val2:nth-child(2) .val2-ill { width: 62%; margin: 0 auto; }
/* 06は横長（比1.75）。90%まで出すと317pxになるので上限を480pxで止める */
/* 06の絵は左寄せで右に102px空いていた。左右中央へ（社長指示）。
カードが横に広がる幅では上限420pxだと小さく見えるので94%まで許す */
.val2:nth-child(6) .val2-ill { width: 94%; max-width: 460px; margin: 0 auto; }
/* 積んだ2枚は絵と文の間を詰める（18→12px） */
.val2:nth-child(2), .val2:nth-child(6) { gap: 8px; }
}
.val2-body { min-width: 0; }
/* モックの見出しはカードに対してもっと小さい。17pxだと
「とにかく早く動く」(8字=136px)が127pxの文欄に入らず2行に折れていた */
.val2-h {
font-size: 15px; font-weight: 700; line-height: 1.6;
margin: 0 0 10px; padding-bottom: 8px; position: relative;
}
.val2-h::after {
content: ""; position: absolute; left: 0; bottom: 0;
width: 24px; height: 2px; background: var(--accent-fill);
}
/* モックの本文は小さく詰まっている（1行15字前後）。
絵に場所を渡すぶん、文字を13pxに落とす */
.val2-p { font-size: 12px; line-height: 1.75; font-weight: 500; color: var(--ink-mute); margin: 0; }
/* 素材の縦横比をそのまま。切らない・枠から出さない */
.val2-ill { width: 100%; height: auto; display: block; }
@media (max-width: 699px) {
.val2-ill { max-width: 280px; margin: 0 auto; }
}
/* 登場：本文が出たあとイラストが遅れて上がる */
html.anim .val2-ill { opacity: 0; transform: translateY(12px); }
html.anim .val2.is-in .val2-ill {
opacity: 1; transform: none;
transition: opacity 1s var(--e-out), transform 1s var(--e-out);
transition-delay: calc(var(--i, 0) * 120ms + 200ms);
}
/* ── 福利厚生（社長添付モック準拠）────────────────────────────
名前のついた3制度を面のカードで見せ、残りはカテゴリごとのタグにする。
9〜10項目の箇条書きが3列に並んでいて、どれが目玉か分からなかった。
見出し（BENEFITS／福利厚生）は他8セクションと同じ規則のまま ── */
.bn-cards { display: grid; gap: 20px; margin-bottom: 56px; }
@media (min-width: 800px) { .bn-cards { grid-template-columns: repeat(3, 1fr); } }
.bn-card {
/* 上下40px→22px。アイコンを1.5倍にしても背が伸びないよう、
カード内の余白から先に取り返す（社長指示：上下で40〜60px削る） */
background: var(--surface-tint); border: 1px solid var(--line);
border-radius: 12px; padding: 22px 28px 26px; text-align: center;
}
/* 制度カードのイラスト枠。素材が届いたら
を
.bn-card-h の前に入れるだけで収まる（プロンプトは
docs/セクションモックのプロンプト.md に置いた） */
/* 素材の比が 0.55(妊婦) / 0.95(子ども) / 1.10(コウノトリ) とバラバラなので、
1つの円に contain で収めて3枚の占める面積を揃える。
⚠️ この規則は一度 VALUES の書き直しで巻き込んで消してしまい、
画像が素材の実寸(512px)で出てセクションが6,539pxまで膨らんだ */
.bn-card-ill {
/* 制度カードの主役はここ（社長指示）。円 108→162→180px、
中の絵は 72→110→132px。180/24 が「3枚とも円の内側に収まる」上限で、
これ以上大きくするとキッズケアの手が円から出る（実測で1枚ずつ検証済み） */
width: 180px; height: 180px; display: block; margin: 0 auto 14px;
/* ⚠️ 円は border-radius ではなく背景のグラデーションで描く。
border-radius:50% は img そのものを切り抜くので、絵が円をはみ出した瞬間に
線が切られる。背景で描けば、はみ出しても切れずに円の外に出るだけで済む */
/* ⚠️ closest-side が要る。既定は farthest-corner なので、50%と書くと
対角線(127px)の半分＝63pxの小さい円になった。closest-side なら
半径が枠の半分(90px)＝border-radius:50% と同じ大きさになる */
background: radial-gradient(circle closest-side at 50% 50%,
rgba(255,255,255,.40) 0 100%, transparent 100%);
padding: 24px; object-fit: contain;
}
.bn-card-h {
font-size: 22px; font-weight: 700; line-height: 1.5; margin: 0 0 12px;
color: var(--accent); position: relative; padding-bottom: 12px;
}
/* 制度名の下の短い線（モック） */
.bn-card-h::after {
content: ""; position: absolute; left: 50%; transform: translateX(-50%);
bottom: 0; width: 28px; height: 2px; background: var(--accent-fill);
}
.bn-card-p { font-size: 12px; line-height: 1.75; font-weight: 500; color: var(--ink-mute); margin: 0; }
/* カテゴリ：3列に縦割りしていたが、項目数が 4／5／9 と偏っていて
1列目と2列目の下に200px以上の空きが出ていた（基準15④）。
カテゴリごとに横1本（左=見出し、右=タグが流れる）に変え、
タグ自体も一段小さくする。ここは読ませる場所ではなく、
「一通り揃っている」ことが分かればいい */
.bn-cats { display: grid; gap: 20px; padding-top: 32px; border-top: 1px solid var(--line); }
.bn-cat { display: grid; gap: 12px; }
@media (min-width: 800px) {
/* 子は 見出し・説明・タグ列 の3つ。2列に流すと
見出し→1列目、説明→2列目、タグ→次の行 と入ってしまうので配置を明示する */
.bn-cat {
/* 左列は「ライフステージの変化に、制度で応えます。」が1行で収まる幅。
12px×20字＝239px なので 220px では19px 足りず2行に折れていた */
grid-template-columns: 252px 1fr;
/* 行を auto auto にすると、右のタグ列(1〜3行)が伸びたぶんが
行の高さに配られ、見出し→説明の隙間が 8/17/36px とバラついた。
2行目を 1fr にして、余ったぶんは説明の「下」に落とす */
grid-template-rows: auto 1fr;
gap: 4px 32px; align-items: start;
}
.bn-cat-h { grid-column: 1; grid-row: 1; }
.bn-cat-lead { grid-column: 1; grid-row: 2; }
.bn-tags { grid-column: 2; grid-row: 1 / span 2; }
.bn-cat + .bn-cat { border-top: 1px solid var(--line); padding-top: 20px; }
}
.bn-cat-h {
display: flex; align-items: center; gap: 10px;
font-size: 15px; font-weight: 700; line-height: 1.6; margin: 0 0 4px;
}
/* カテゴリのアイコンは線アイコン（社長指示）。
塗りのイラスト(mini-*.png)は面積が大きく、見出しより目立っていた。
ここは分類の目印なので、細線・小さめ・コーラルで気配だけ残す */
.bn-ico {
width: 22px; height: 22px; flex-shrink: 0;
color: var(--accent-fill); opacity: .85;
}
.bn-cat-lead { font-size: 12px; font-weight: 500; color: var(--ink-mute); margin: 0; line-height: 1.75; }
.bn-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.bn-tags li {
border: 1px solid var(--line); border-radius: 999px;
padding: 5px 12px; font-size: 12px; line-height: 1.7;
color: var(--ink-mute); background: var(--surface);
}
/* SPでは項目数が多く、この粒で並べると縦を取りすぎる（社長指摘）。
丸みと枠は残したまま、字と余白だけ詰めて縦を縮める */
@media (max-width: 767px) {
.bn-tags { gap: 5px; }
.bn-tags li { padding: 3px 9px; font-size: 11px; line-height: 1.55; }
}
/* ── 社員インタビュー ── */
.iv { display: grid; gap: 32px; align-items: start; }
/* 2人目との間に横罫。80pxのアキだけだと、どこまでが1人目か分からなかった */
/* 2026-08-26 先方FB「縦幅を縮めてよい」で 64/64 → 40/40。罫は残す */
.iv + .iv { margin-top: 40px; padding-top: 40px; border-top: 1px solid var(--line); }
@media (min-width: 900px) {
/* 左右を等分にする。5fr 7fr だと、写真を order で右へ送った02だけが
広い列に入って01より大きくなってしまう（左右で寸法が揃わない）。
等分なら反転しても寸法が変わらず、写真も本家の水準（約40%幅×73vh）に届く */
.iv { grid-template-columns: 1fr 1fr; gap: 56px; align-items: stretch; }
/* ⚠️ 2026-08-27 `iv--flip` を1段目に付け替えた（社長判断・確定）。
1段目＝江田さんは**正面を向いていて目線が左**なので、写真を右に置くと
視線がテキスト側へ向かう。2段目はリズムを作るため逆（写真左）。
2段目＝松尾さんも目線は左だが**PCを見下ろす向きで視線の主張が弱い**ため、
正面を向いた江田さんの目線を優先する、という判断（両方とも検討したうえで確定）。
⚠️ 写真を差し替えて人物の向きが変わったら、この付け替えも見直すこと */
.iv--flip .iv-media { order: 2; }
}
/* 2026-08-27 社長指摘「写真と本文の間の余白が広い」。
高さ500は保ったまま幅を 400→440 に広げ、間の空きを 132→92px に。
素材も 0.88（880×1000）で切り出し直したので切り取りゼロ。
⚠️ 枠の比を変えるときは素材も同じ比で作り直すこと（アップで誤魔化さない） */
.iv-photo {
width: 100%; height: auto; aspect-ratio: 22 / 25; border-radius: 6px;
/* 上部＝江田さん（横素材・顔が上寄り）。02の松尾さんは下で上書き */
object-fit: cover; object-position: 50% 30%; display: block;
}
/* ⚠️ 2026-08-27 上下の人物が入れ替わった（上＝江田さん／下＝松尾さん）。
切り取り位置は人物に紐づくので、写真を入れ替えたらこの指定も入れ替えること */
.iv-photo--02 { object-position: 50% 22%; }
/* 写真は 4:5 固定で列幅いっぱい（572px）に伸びていたため高さ715pxになり、
本文（495px・465px）より220〜250px高かった＝基準15②に抵触。
MISSIONと同じ「高さを本文に追従させる」手も試したが、縦2:3の人物素材が
比1.16の横位置に切れてしまい、インタビューの顔写真としては後退だった。
→ 縦位置(4:5)は保ったまま幅に上限をかけて背を詰める。
440x550になり、本文との差は55px・85pxで基準15②の100px以内に収まる。
写真は外側（01は左端、02は右端）に寄せて、間の空きを本文側に寄せない。
⚠️ この上書きは .iv-photo の基本ルールより後ろに置くこと。
同じ詳細度なので、メディアクエリの中でも前に書くと負ける（一度やった） */
@media (min-width: 900px) {
.iv-media { display: flex; justify-content: flex-start; }
.iv--flip .iv-media { justify-content: flex-end; }
/* 2026-08-26 先方FB「縦幅を縮めてよい」で高さを500に。
2026-08-27 幅だけ 400→440 に広げた（高さは500のまま）。上の比の注記を参照 */
.iv-photo { max-width: 440px; }
}
.iv-cap { font-size: 12px; color: var(--ink-mute); margin: 12px 0 0; line-height: 1.7; }
.iv-role { font-size: 12px; font-weight: 700; line-height: 1.4; letter-spacing: .12em; color: var(--accent); margin: 0 0 12px; }
.iv-h { font-size: 21px; font-weight: 700; line-height: 1.75; margin: 0 0 28px; letter-spacing: .01em; }
@media (min-width: 768px) { .iv-h { font-size: 26px; } }
/* Q/A の目印を左の独立した列に置く（モック準拠）。
本文と同じ行に混ぜていたときは、答えの始まりが目で追えなかった。
列に出すとQとAの本文の頭が揃い、質問と答えの境目が見える */
.iv-q, .iv-a { display: grid; grid-template-columns: 30px 1fr; gap: 0 14px; }
/* 記号を大きく（社長指示）。長い答えでも「どこから答えか」を目で拾える */
.iv-q::before, .iv-a::before {
font-family: "Jost", "Century Gothic", sans-serif;
color: var(--accent); font-weight: 600; font-size: 20px;
line-height: inherit; text-align: left;
}
.iv-q { font-size: 15px; font-weight: 700; line-height: 1.5; margin: 0 0 12px; color: var(--ink); }
.iv-q::before { content: "Q"; }
.iv-a::before { content: "A"; }
/* ラップ1280pxで列が572pxになり1行38字。JOBS・MISSIONと同じ34字に揃える
（emは自分のfont-size基準なので 34em = 34字ちょうど） */
/* grid化したので max-width が「目印の列＋本文」の合計になる。
本文を34字に保つため、列24px＋間12pxを足し戻す */
.iv-a { font-size: 15px; color: var(--ink-mute); margin: 0 0 32px; line-height: 1.8;
max-width: calc(34em + 36px); }
.iv-a:last-child { margin-bottom: 0; }
/* モック準拠で中央揃えに。見出し左180px＋本文右の2カラムだったが、
2人のインタビューを締める位置なので、列に載せず中央で受ける */
.team-note {
/* 2026-08-26 先方FB「縦幅を縮めてよい」で 64/48 → 48/36 */
margin-top: 48px; padding-top: 36px; border-top: 1px solid var(--line);
text-align: center;
}
.team-note h3 { font-size: 15px; font-weight: 700; margin: 0 0 16px; letter-spacing: .04em; }
/* 43字。36em(540px)だと2行に割れるので上限を外す。
1120pxの帯では約645pxで収まり、狭い画面では自然に折り返す */
.team-note .lead { max-width: none; }
/* ── SP下部固定バー（FV通過後に出現／最終CTAで退避）── */
.spbar {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
display: flex; gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
background: rgba(247, 247, 247, .95); backdrop-filter: blur(8px);
border-top: 1px solid var(--line);
transform: translateY(110%); transition: transform .28s var(--e-out);
}
.spbar.is-on { transform: none; }
.spbar .pill { flex: 1; justify-content: center; padding: 14px 12px; font-size: 14px; }
@media (min-width: 768px) { .spbar { display: none; } }
/* 固定バーが出ている間だけ、アニメトグルを上へ逃がす */
@media (max-width: 767px) {
body.has-spbar .mtoggle { bottom: 82px; transition: bottom .28s var(--e-out); }
}
/* ── 採用プロセス（Goodpatch /process/process/ の型）──────────────
横3カラムをやめ、ステップを縦に積む。1ステップ＝見出し＋説明＋定型項目＋注記。
毎回同じ項目が並ぶことで「何が分からないままか」を候補者に残さない */
/* ── 採用プロセス（社長添付モック準拠）────────────────────────
番号を大きく左に振り、点と線で次のステップへつなぐ。
罫線で区切っただけの一覧だと「3つある」ことは分かっても
「順番に進む」ことが伝わらなかった。 */
.steps-list { list-style: none; margin: 0 0 80px; padding: 0; }
/* フェーズ間のアキ。中を詰めて外を空けると、1フェーズが塊として見える */
.step { display: grid; gap: 16px; padding: 0 0 40px; }
@media (min-width: 768px) {
/* 48→80px（社長指示）。フェーズ間が空くと1ステップが塊として読める。
⚠️ 下に伸びる線とその先の矢印は bottom:-30px で次のステップへ届かせているので、
padding を変えたらこちらも同じだけ動かすこと（下の -62px） */
.step { grid-template-columns: 200px 1fr; gap: 0 40px; padding-bottom: 80px; }
.step:last-child { padding-bottom: 0; }
}
/* 番号と、次へ向かう線 */
.step-rail { position: relative; }
.step-no {
font-size: 56px; font-weight: 600; line-height: .95; letter-spacing: -.01em;
color: var(--accent); margin: 0;
}
@media (min-width: 768px) { .step-no { font-size: 84px; } }
/* 点は番号の右に固定位置で置く。flexで並べると番号の字幅（01=94px /
02=105px / 03=103px）に引きずられて点のX座標が揃わず、
下に落ちる線とも重ならなかった */
/* 点は「次へ落ちる線」の起点。線を引かない幅（<768px）では
番号の上に乗るだけになるので出さない */
.step-dot2 { display: none; }
@media (min-width: 768px) {
.step-dot2 {
display: block; position: absolute; width: 9px; height: 9px; border-radius: 50%;
background: var(--accent); left: 130px; top: 34px;
}
}
/* 点から次のステップへ落ちる線と、その先の矢印。点の中心（left+4.5px）に合わせる。
最後のステップには引かない（行き先が無い） */
@media (min-width: 768px) {
.step:not(:last-child) .step-rail::after {
content: ""; position: absolute; left: 134px; top: 47px; bottom: -62px;
width: 1px; background: var(--accent); opacity: .45;
}
.step:not(:last-child) .step-rail::before {
content: ""; position: absolute; left: 131px; bottom: -62px;
width: 7px; height: 7px;
border-right: 1px solid var(--accent); border-bottom: 1px solid var(--accent);
transform: rotate(45deg); opacity: .45;
}
/* 線が上から下へ伸び、伸びきってから矢印が出る（社長指示）。
.step は既存のIOで is-in が付くので、そこに乗せるだけで足りる。
静止時（html:not(.anim)）は最初から伸びきった状態＝上の指定のまま */
html.anim .step:not(:last-child) .step-rail::after {
transform: scaleY(0); transform-origin: top;
transition: transform .8s var(--e-out);
}
html.anim .step.is-in .step-rail::after { transform: scaleY(1); }
/* 矢印は rotate(45deg) を持っているので、opacity だけ動かす。
transform を触ると回転が戻って四角に見える */
html.anim .step:not(:last-child) .step-rail::before {
opacity: 0; transition: opacity .3s ease .65s;
}
html.anim .step.is-in .step-rail::before { opacity: .45; }
}
/* 番号は線と同じ向き（上から下）に入れる。線が伸びる前に数字が出ていないと
「どこから伸びるのか」が分からないので、数字→線→矢印の順にする */
html.anim .step .step-no { opacity: 0; transform: translateY(-12px); }
html.anim .step.is-in .step-no {
opacity: 1; transform: none;
transition: opacity .5s var(--e-out), transform .5s var(--e-out);
}
html.anim .step .step-dot2 { opacity: 0; transition: opacity .3s ease .4s; }
html.anim .step.is-in .step-dot2 { opacity: 1; }
.step-body { min-width: 0; }
/* 見出しと説明を横に並べる。縦に積むと1ステップが縦に伸びる */
/* baseline だと見出し22pxと説明15pxで1行目の「上端」がズレて見える。
start にすると 見出し6.6px / 説明7.5px でほぼ揃う（行高の余りの差だけ） */
.step-head { display: grid; gap: 8px; margin-bottom: 24px; }
@media (min-width: 900px) {
.step-head { grid-template-columns: 200px 1fr; gap: 32px; align-items: start; }
}
.step-h { font-size: 22px; font-weight: 700; line-height: 1.6; margin: 0; }
.step-sub { font-size: 15px; font-weight: 700; margin-left: 2px; }
/* オファーの説明（41字）が1行に収まる幅。34emだと544pxで2行に割れていた */
.step-lead { font-size: 15px; line-height: 1.6; color: var(--ink-mute); margin: 0; max-width: 43em; }
/* 項目は2列の表。罫線は上下だけで、縦罫は引かない */
.step-meta { display: grid; margin: 0; }
/* 左は必ず「担当者」など短い値、右に長い値を置く。
等分(420px/420px)だと右の値が1行に収まらず
「履歴書・職務経歴書（フォーマット／自由）」のように割れていた */
@media (min-width: 700px) { .step-meta { grid-template-columns: 1fr 1.25fr; column-gap: 40px; } }
.step-meta > div {
/* ラベル欄を固定10.5em(136px)にしていたので、「担当者」(39px)のあと
113pxも空いていた。max-content でラベルに沿わせ、隙間は48px（余白の階段）に統一。
引き換えに右側の値の開始位置が3ステップで揃わなくなるが、
ステップ同士は200px以上離れていて縦の整列は効いていない */
display: grid; grid-template-columns: max-content 1fr; column-gap: 48px; row-gap: 4px;
padding: 14px 0; border-bottom: 1px solid var(--line);
}
/* 積んだ幅ではラベル欄168px・値158pxまで痩せて値が1行11字になる。
横並びをやめてラベルを値の上に置く */
@media (max-width: 699px) {
.step-meta > div { grid-template-columns: 1fr; gap: 4px; }
}
.step-meta > div:first-child { border-top: 1px solid var(--line); }
@media (min-width: 700px) { .step-meta > div:nth-child(2) { border-top: 1px solid var(--line); } }
.step-meta dt { font-size: 13px; font-weight: 700; color: var(--accent); margin: 0; line-height: 1.5; }
.step-meta dd { margin: 0; font-size: 14px; line-height: 1.5; }
/* ※の注記は本文ではなく脚注。受賞の注記(.award-note)と同じ11pxに揃える（社長指示）。
#6E625F on #FAF7F6 で 5.51:1 なので、小さくしてもAAは割れない */
.step-note { font-size: 11px; color: var(--ink-mute); margin: 16px 0 0; line-height: 1.7; }
/* ── FAQ（Goodpatch /process/faq/ の型）── */
/* ── よくある質問（社長添付モック準拠）────────────────────────
3カテゴリ×2問が縦に6つ並んでいたのを、カテゴリで絞って見せる。
左に縦のピル、右に2列のカード。JSは使わない（職種タブと同じ radio + label） */
.faq-eyebrow { margin-top: 96px; }
@media (min-width: 768px) { .faq-eyebrow { margin-top: 120px; } }
.faq-h { margin-top: 0; }
.faq > input { position: absolute; opacity: 0; pointer-events: none; }
.faq { display: grid; gap: 32px; }
@media (min-width: 900px) {
.faq { grid-template-columns: 240px 1fr; gap: 48px; align-items: start; }
/* モックの縦の仕切り。タブ列と中身を切り分ける */
.faq-tabs { border-right: 1px solid var(--line); padding-right: 48px; }
}
.faq-tabs { display: flex; flex-wrap: wrap; gap: 12px; }
@media (min-width: 900px) { .faq-tabs { flex-direction: column; flex-wrap: nowrap; } }
.faq-tab {
display: inline-flex; align-items: center; justify-content: center;
padding: 12px 24px; border: 1px solid var(--accent); border-radius: 999px;
font-size: 15px; font-weight: 700; color: var(--accent); cursor: pointer;
transition: background-color .2s ease, color .2s ease;
text-align: center;
}
/* SPは3つを1行に収める（社長指摘。折り返して2段になっていた）。
幅を3等分して均等割りにし、字と左右余白を詰める。
⚠️ 左右パディングは0にする。1行に収める主導権を幅側に渡さないと、
「会社・入社後」の6文字で押し出されて折り返しが戻る */
@media (max-width: 767px) {
.faq-tabs { flex-wrap: nowrap; gap: 8px; }
.faq-tab {
flex: 1 1 0; min-width: 0;
padding: 11px 0; font-size: 13px; letter-spacing: -.01em;
white-space: nowrap;
}
}
.faq-tab:hover { background: rgba(194,69,47,.06); }
#fq1:checked ~ .faq-tabs [for="fq1"],
#fq2:checked ~ .faq-tabs [for="fq2"],
#fq3:checked ~ .faq-tabs [for="fq3"] { background: var(--accent); color: #fff; }
.faq > input:focus-visible ~ .faq-tabs label { outline: none; }
#fq1:focus-visible ~ .faq-tabs [for="fq1"],
#fq2:focus-visible ~ .faq-tabs [for="fq2"],
#fq3:focus-visible ~ .faq-tabs [for="fq3"] { outline: 2px solid var(--accent); outline-offset: 3px; }
.faq-panel { display: none; }
#fq1:checked ~ .faq-panels .faq-panel:nth-of-type(1),
#fq2:checked ~ .faq-panels .faq-panel:nth-of-type(2),
#fq3:checked ~ .faq-panels .faq-panel:nth-of-type(3) { display: grid; }
.faq-panel { gap: 16px; }
@media (min-width: 700px) { .faq-panel { grid-template-columns: repeat(2, 1fr); } }
.faq-panels { min-width: 0; }
/* カードにする。質問の頭に Q. を出し、＋は右端に置く */
.faq-panel .acc {
border: 1px solid var(--line); border-radius: 8px;
padding: 0 20px; background: var(--surface);
align-self: start;
}
.faq-panel .acc summary { padding: 18px 0; gap: 16px; align-items: flex-start; }
.faq-panel .acc summary::before {
content: "Q."; color: var(--accent); font-weight: 700; flex-shrink: 0;
font-family: "Jost", "Century Gothic", sans-serif;
}
.faq-panel .acc-body { padding: 0 0 18px; }
.faq-note { margin: 40px 0 0; text-align: center; font-size: 14px; line-height: 1.6; color: var(--ink-mute); }
.faq-note a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
html { scroll-behavior: auto; }
}
/* ── 03 MISSION（モック03準拠）────────────────────────────────
循環図と数字を横並びにし、特徴3点はカードをやめて罫線区切りの横一列に。
縦に5ブロック続いていたのを2ブロックに畳む */
/* 写真が左に入って右カラムが約620pxになったため、循環図と数字の横並びは成立しない
（循環図のviewBoxが760x320と横長で、半分の幅だとラベルが読めなくなる）。
縦に積み、循環図はコンテンツ幅いっぱいに使う */
/* 積んだときは1カラムが944pxまで広がるので、640pxで止めた図を左に置くと
右に300px以上の空きができる（基準15④）。積んだときだけ中央に戻す */
.mission-cycle { margin: 0 auto; width: 100%; max-width: 560px; }
/* viewBoxを描画範囲ぴったりに詰めたので、2カラム時は 図の左右端＝カラムの左右端。
本文・数字と左揃えが揃う */
@media (min-width: 1100px) { .mission-cycle { margin: 0; } }
/* 非対称の数字レイアウト（社長添付モック）。左に「15万人」を1つだけ大きく、
右に「120%超」「6〜7名」を2段で。3つ均等よりいちばん大きい実績が主役になる */
/* リード文（mission-intro）と数字の間。48→64pxへ（社長指示）。
基準15の階段（8/16/24/32/48/64）の1段上を取っている */
.ms { display: grid; gap: 32px; margin-top: 64px; }
@media (min-width: 860px) {
/* 0.85fr(515px)だと空きすぎ、0.5fr(373px)まで詰めたら今度は数字の右に
テキストを横並びできる余地が無くなった（社長指示で数字の右に補足文を
置くことになったため）。0.72fr(左469px・内側437px)なら
数字240＋gap24＋補足文170px以上が収まる */
.ms { grid-template-columns: 0.85fr 1fr; gap: 0; align-items: stretch; }
.ms-hero { border-right: 1px solid var(--line); padding-right: 32px; }
/* 数字＋バッジ列（左）と補足文（右）を横並びに（社長指示） */
.ms-hero-row { display: flex; gap: 24px; align-items: baseline; flex-wrap: nowrap; margin-bottom: 12px; }
.ms-hero-row .stat-cap { flex: 1; min-width: 170px; margin: 0; align-self: center; }
/* 数字の直後にある --stat の下線用 padding-bottom は残しつつ、gapで確保するので
margin-bottom は使わない（重複すると隙間が広がる） */
.ms-hero-row .stat { margin-bottom: 0 !important; }
.ms-side { padding-left: 40px; display: grid; grid-template-rows: 1fr 1fr; }
/* 数字の列は「6〜7名」(190px)が収まる最小幅に固定する。1fr:1fr だと列が337pxあり、
数字の右に147〜170pxの空きが出て、説明文までの距離が202pxになっていた（社長指摘）。
222px（数字190＋padding-right 24＋余裕8）にすると距離は約56pxに縮む。
⚠️ auto にすると2段で列幅が変わり、縦の仕切り線が段ごとにずれる */
.ms-row {
display: grid; grid-template-columns: 222px 1fr; gap: 24px;
align-items: center;
}
.ms-row:first-child {
border-bottom: 1px solid var(--line);
padding-bottom: 24px; margin-bottom: 24px;
}
/* 数字の列とキャプション列の間にも縦の仕切り。
row単位のborder-rightだが、2段とも同じ列幅なので継ぎ目なく1本に見える */
.ms-row-main {
height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: flex-end;
border-right: 1px solid var(--line); padding-right: 24px;
}
/* 数字の列を222pxに固定したぶんキャプション列が461pxまで広がり、1行に戻っていた。
行長を24em（12px×24字=288px）で止めて2行を保つ。読みやすさの上限としても妥当 */
.ms-row .stat-cap { max-width: 24em; }
}
/* ── カードの補足文は12px（本家 careers.goodpatch.com のLibraryカードを実測）
12px / line-height 1.7 / weight 500。本家は色を薄くせず濃いインクのまま使っている。
「小さくするなら薄くしない」が要点なので、こちらもウェイトを500に上げて
ink-mute のまま据え置いた。読ませる本文（仕事内容17px・インタビュー15px・
FAQ15px）は対象外 ── */
.stat-cap { font-size: 12px; font-weight: 500; color: var(--ink-mute); margin: 0; line-height: 1.75; }
.feature-row { display: grid; gap: 0; margin-bottom: 48px; }
@media (min-width: 900px) { .feature-row { grid-template-columns: repeat(3, 1fr); } }
.feature {
display: flex; gap: 16px; align-items: flex-start;
padding: 24px 0; border-top: 1px solid var(--line);
}
.feature:last-child { border-bottom: 1px solid var(--line); }
@media (min-width: 900px) {
.feature { padding: 24px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.feature + .feature { border-left: 1px solid var(--line); }
.feature:last-child { border-bottom: 1px solid var(--line); }
}
.feature-h { font-size: 15px; font-weight: 700; line-height: 1.7; margin: 0 0 6px; }
.feature-p { font-size: 12px; font-weight: 500; color: var(--ink-mute); margin: 0; line-height: 1.75; }
/* ── MISSION：左に写真、右に［循環図 → 導入文 → 数字］（Goodpatch Aboutの構成）──
縦の釣り合いは「測って直す」のではなく、構造で合わせる。
grid の既定 stretch で figure が行の高さいっぱいになり、
img{height:100%; object-fit:cover} が右カラムの高さをそのまま受ける。
→ 右の中身が増えても減っても、左右の高さ差は常に 0 */
/* ── 循環：写真4枚を1行に並べ、最後から最初へ線を戻す（社長指示）──
楕円の図をやめた。左の写真も削除。写真4枚のほうが「実際にこの手順が
回っている」ことが伝わるうえ、上下が絵のセクションに挟まれていないので
ここは写真で成立する */
/* 積んだ幅でも2列。1列にすると4枚で980pxを写真が占めてしまう（実測） */
.cyc {
list-style: none; margin: 0; padding: 0;
display: grid; gap: 20px; grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 900px) { .cyc { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cyc-step { min-width: 0; }
/* 枠は1:1。2026-08-15に写真から線画イラストへ変更（先方指定）。
素材も1:1（600x600の透過WebP）なので切り取りは起きない。
・object-fit は cover ではなく contain。イラストは端が欠けると意味が壊れる
・border-radius は外した。透過素材なので角を丸める面がなく、効かない
・地は塗らない。円の地(#FCF9F7)がセクションの地(#FAF7F6)とほぼ同じなので、
透過のままセクションに直に置くと線画だけが浮いて見える
⚠️ height: auto が要る。HTMLの height 属性が aspect-ratio に勝って
縦長に崩れたことが3度あった。img に aspect-ratio を使うときは
必ず height: auto をセットで書くこと */
/* ⚠️ 素材は「円の実体ぴったり」に切り出してある（支給PNGは円のまわりの透明余白が
62〜112pxとバラバラで、そのまま入れると4つの円の大きさが揃わなかった）。
余白を切って700角に揃えたので、同じ枠でも円が11〜22%大きく見える。
⚠️ 差し替えるときも必ず透明部分を切ってから入れること。 */
.cyc-photo {
/* 枠いっぱいだと詰まって見えるので8%だけ内側に入れる（社長指示で「ほんの少し小さく」） */
width: 92%; height: auto; aspect-ratio: 1 / 1; object-fit: contain;
margin: 0 auto 12px; display: block;
/* ふんわりしたコーラルの影。
⚠️ **filter: drop-shadow は使わない。** 遅延読み込みの画像に filter を掛けると、
レイヤーの再描画が走るまで影が四角くバッサリ切れて出ることがある（社長が遭遇）。
素材は**円が枠いっぱい**に切り出してあるので、`border-radius: 50%` を当てれば
枠＝円になり、素の box-shadow でまったく同じ見え方が作れる。
box-shadow は通常の背景描画なのでこの不具合が起きない。
⚠️ 素材を差し替えるときは、透明部分を切って円を枠いっぱいにすること。
余白が残ると border-radius が円からずれて影が合わなくなる。
濃さは .22 → .14（社長指示で弱めた）。地(#FAF7F6)の上で (250,226,221) になり気配だけ残る */
border-radius: 50%;
box-shadow: 0 6px 16px rgba(247, 100, 65, .14);
}
/* 見出しは絵と中央で揃える（社長指示） */
.cyc-label {
display: flex; align-items: baseline; justify-content: center; gap: 8px; flex-wrap: wrap;
font-size: 14px; font-weight: 700; line-height: 1.5; margin: 0; color: var(--ink);
text-align: center;
}
.cyc-no { flex-shrink: 0; font-size: 12px; font-weight: 700; color: var(--accent); letter-spacing: .06em; }
/* 04 → 01 へ戻る線。下に伸びて左へ走り、01の下で上を向いて終わる。
⚠️ 左右のマージンは「1枚目・4枚目の中心」に合わせる。4列＋gap 20px なので
カード幅 =(100% - 60px)/4、その半分だけ内側に入れる */
/* 戻りの線の登場（2026-08-15 追加）。
4枚は `.rv` + `--i:0〜3` で左から200msずつ遅れて現れる（他セクションと同じ作法）。
線は `--i:4`＝800ms で、04が現れたところから**右から左へ引かれる**。
⚠️ `.rv` の初期値は translateY(16px) だが、線にそれを掛けると
「浮き上がってくる棒」になって“戻っていく”意味が消える。transform は殺して
clip-path で描画の進みだけを出す。
⚠️ inset の右と左に -8px の遊びを持たせている。0にすると、
枠の外(left:-4px)に置いた矢じりが最後まで切れたままになる */
/* ⚠️ 線の起点は**リスト側**にある。線は4枚より下にあるので、線自身を監視すると
4枚が出そろったあと、さらにスクロールしないと発火しなかった。
`` を監視役にして、そこに付く `.is-in` で線を引く。
ol 自身は動かさない（4枚が各自 `--i` で動くため） */
html.anim .cyc.rv { opacity: 1; transform: none; transition: none; }
@media (min-width: 900px) {
html.anim .cyc-loop {
opacity: 0;
clip-path: inset(-2px -8px -2px 100%);
/* 04（--i:3＝600ms）が現れたところから引きはじめる */
transition: opacity .35s var(--e-out) .7s, clip-path .9s var(--e-out) .7s;
}
html.anim .cyc.rv.is-in + .cyc-loop {
opacity: .5; /* 静止時の値。1にすると線だけ濃くなる */
clip-path: inset(-2px -8px -2px -8px);
}
}
.cyc-loop { display: none; }
@media (min-width: 900px) {
.cyc-loop {
display: block; height: 40px; margin: 14px calc((100% - 60px) / 8) 0;
border: 1px solid var(--accent); border-top: 0;
border-radius: 0 0 14px 14px; opacity: .5;
position: relative;
}
/* 左端の矢じり（上向き＝01へ入る） */
.cyc-loop::after {
content: ""; position: absolute; left: -4px; top: -1px;
width: 8px; height: 8px;
border-left: 1px solid var(--accent); border-top: 1px solid var(--accent);
transform: rotate(45deg);
}
}
.mission-lay { display: grid; gap: 32px; margin-bottom: 64px; }
.mission-photo { margin: 0; position: relative; }
.mission-photo img {
/* 積んだときは素材そのままの 3:2。クロップが起きないので人物が欠けない */
width: 100%; height: auto; aspect-ratio: 3 / 2;
object-fit: cover; object-position: 50% 50%;
border-radius: 6px; display: block;
}
/* 2カラムは 1100px から。900pxで組むと右カラムが324pxまで痩せて、
循環図のラベルが8px相当・数字が3列108pxになり成立しなかった */
@media (min-width: 1100px) {
/* ラップ1120pxでは右カラムが 1040-440-56=544px。本文・循環図(560px)が
ほぼ埋める幅。520pxにすると右が464pxまで痩せて図が入らなくなる */
.mission-lay { grid-template-columns: 520px 1fr; gap: 56px; align-items: stretch; }
/* 幅を詰めて高さは右カラムに追従（社長判断：写真は縦長でよい）。
左440pxが最も収まりがよく、比 0.62＝5:8 に落ちる。
340pxまで詰めると 1:2 の帯になり、横位置の素材から人物が1人ぶんしか残らなかった */
.mission-photo { height: 100%; }
.mission-photo img {
aspect-ratio: auto; height: 100%; min-height: 520px;
/* 縦長に切ると横位置素材の41%しか映らない。44%だと右端で女性の顔が
半分だけ切れて写り込むので、右端が58%に収まる38%へ寄せた。
男性とベビーカー（alt「状態を確かめている様子」）は残る */
object-position: 38% 50%;
}
/* モックの、写真の左下からはみ出すコーラルの帯 */
.mission-photo::after {
content: ""; position: absolute; left: -12px; bottom: -12px;
width: 120px; height: 12px; background: var(--accent-fill); border-radius: 2px;
}
}
/* 右カラムの3ブロックは階段の 48px で等間隔（基準15①：同じ役割の縦アキを揃える） */
.mission-body { min-width: 0; display: flex; flex-direction: column; gap: 48px; }
/* ── セクション見出しを中央揃えに（本家 careers.goodpatch.com 準拠）
実測: What we believe. / People / We're Hiring はいずれも text-align:center。
中央に置くのは「欧文見出し・和文見出し・リード」の3つまで。
その下の本文・カード・リストは左揃えのまま（読む文章は左端が揃っていないと追えない） */
.eyebrow--lead { text-align: center; }
.eyebrow--lead::after { left: 50%; transform: translateX(-50%); }
.eyebrow--lead + .h2 { text-align: center; margin-left: auto; margin-right: auto; }
.eyebrow--lead + .h2 + .lead { text-align: center; margin-left: auto; margin-right: auto; }
/* モックの「— FAQ —」。見出しの左右に線を伸ばす。
.eyebrow--lead は下に短い線を1本引く形なので、それを打ち消して
::before と ::after を左右の線として並べ直す */
.eyebrow--rules {
display: flex; align-items: center; justify-content: center; gap: 20px;
padding-bottom: 0;
}
.eyebrow--rules::before,
.eyebrow--rules::after {
content: ""; display: block; position: static; transform: none;
width: 64px; height: 1px; background: var(--accent-fill); flex-shrink: 0;
}
/* ── 並ぶCTAの幅を揃える
実測で「募集中の職種 3」168px と「カジュアル面談する」192px が並んでいて不揃いだった。
高さ45px・padding・文字サイズは元から揃っているので、幅だけ下限を合わせる */
.hero .pill, .sec--dark .pill { min-width: 200px; justify-content: center; }
@media (max-width: 480px) { .hero .pill, .sec--dark .pill { min-width: 0; width: 100%; } }
/* ラップを1280pxにしたら右カラムが704pxになり、本文が41字まで伸びた。
JOBSと同じ34字に揃える（本家 careers.goodpatch.com は33字） */
/* 幅（36em）はそのままに、塊ごと中央へ。
文字組みは左揃えのまま（中央揃えにすると行頭が揃わず、長文が読みにくい） */
.mission-intro { max-width: 36em; margin: 56px auto 0; }
.mission-intro > p:last-child { margin-bottom: 0; }