側は両端の傾き（rotate）で
transform を使っているので、そこへ重ねると傾きが消えてしまう。
下げる量は自分の高さの112％。スマホ（.fv__phone-img が z-index:1）が
手前にあるので、その裏に完全に隠れる。
はみ出す一瞬のために、出はじめだけ opacity で伏せている */
@keyframes hiro-panda-pop{
0% {transform:translateY(112%); opacity:0;}
20% {opacity:1;}
62% {transform:translateY(-9%);} /* 行き過ぎてから */
79% {transform:translateY(3%);} /* 少し戻して */
91% {transform:translateY(-1.5%);}
100%{transform:translateY(0); opacity:1;}
}
.fvpanda__item img{
animation:hiro-panda-pop .78s ease-out both;
}
.fvpanda__item:nth-child(1) img{animation-delay:.20s;}
.fvpanda__item:nth-child(2) img{animation-delay:.38s;}
.fvpanda__item:nth-child(3) img{animation-delay:.56s;}
.fvpanda__item:nth-child(4) img{animation-delay:.74s;}
/* 動きを減らす設定の環境では、最初から出ている状態にする */
@media (prefers-reduced-motion:reduce){
.fvpanda__item img{animation:none;}
}
/* ============================================================
FVの下辺にまたがる検索窓（トップのみ）
============================================================ */
/* 支給ラフ（2026-09-09）どおり、FVの下の境界線が窓の「高さの中心」に来る置き方。
⚠️ .fv は雲とパンダを下端で切るために overflow:hidden なので、この窓を
.fv の中に入れると下半分が消える。包みの .fvwrap を基準にして外に出している。
bottom:0（＝FVの下辺）に合わせてから translateY(50%) で半分ぶん下げる。
窓の高さが変わっても中心は境界のままなので、行数が増えても直す必要はない */
.fvwrap{
position:relative;
/* SPでのスマホの絵（.fv__phone）の幅。絵は窓の子なので位置だけでは場所を空けられず、
FV側（.fv__inner）の下余白をこの値から逆算する。両方で使うので変数にしている。
％だと基準の要素が違って値がずれるため vw で持つ */
--fvphone-w:min(280px,74vw);
/* 次の .abouthiro は position:relative ＝配置済み要素なので、何もしないと
窓の下半分がその地色に隠れる。z-index で前に出しておく */
z-index:2;
}
.fvsearch{
position:absolute; z-index:3;
left:0; right:0; bottom:0;
transform:translateY(50%);
/* FVの中身（--wrap＝1100px）より広い。ラフでも画面幅の9割強を使っている */
width:min(1280px, calc(100% - 40px));
margin-inline:auto;
/* スマホの絵（.fv__phone）の右端が、窓の右端からどれだけ内側か。式の意味は .fv__phone の説明を参照。
⚠️ 右肩のパンダ（.fvsearch__panda）もこの値で置いているので、スマホを動かすときはここを直すこと
（1180px以下で上書きしている。900px以下はスマホが中央寄せになるので使わない） */
--fvphone-r:max(4px, calc((100% - 1060px) / 2 + 4px));
}
/* 中身は1行の格子。左から 手書きのひとこと → 選択3つ → 検索ボタン、
2行目のキーワードは選択の左端に頭を揃えたいので 2列目から最後までを占める */
.fvsearch__body{
position:relative;
display:grid;
grid-template-columns:auto repeat(3, minmax(0, 1fr)) auto;
align-items:center;
column-gap:16px; row-gap:14px;
padding:24px 28px 20px;
border-radius:24px;
background:#FCF8EE;
/* 空や川の上に乗るので、白の縁で地から浮かせる */
border:2px solid rgba(255,255,255,.92);
box-shadow:0 12px 30px rgba(31,27,22,.12);
/* ⚠️ 右肩のパンダ（.fvsearch__panda）を窓の背面に回すために前へ出している。
DOM順ではパンダのほうが後ろ（＝手前に描かれる）なので、この指定を外すと
パンダが窓に乗ってしまう */
z-index:1;
}
/* --- 左の手書きのひとこと --- */
/* ⚠️ ラフは手書き文字。書体を持っていないので、サイト内の丸ゴシックを
少し傾けて寄せている。オレンジの払いは下線として ::after で足したもの。
assets/img/fvsearch-catch.png が置かれれば、そちらが優先される（front-page.php 側） */
.fvsearch__catch{
position:relative;
margin:0 8px 0 4px;
font-family:"Zen Maru Gothic","Zen Kaku Gothic New",sans-serif;
font-weight:900; font-size:16px; line-height:1.7; letter-spacing:.02em;
color:var(--ink); white-space:nowrap;
transform:rotate(-4deg);
}
.fvsearch__catch img{display:block; width:auto; max-width:170px; height:auto;}
/* 手書き文字のときは、絵の中に払いが入っているので下線は出さない */
.fvsearch__catch:has(img){transform:none;}
.fvsearch__catch:has(img)::after{content:none;}
.fvsearch__catch::after{
content:"";
position:absolute; left:-6px; right:-10px; bottom:-9px; height:14px;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 14' preserveAspectRatio='none'%3E%3Cpath d='M3 11C34 4 96 2 157 6' fill='none' stroke='%23F18000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}
/* --- プルダウン3つ --- */
/* 見た目の枠は入れ物側が持ち、select は透明にして中に敷く。
矢印とアイコンは絵なので、クリックが select に通るよう pointer-events を切る */
.fvsel{
position:relative;
display:flex; align-items:center;
background:var(--white);
border:1px solid var(--line); border-radius:10px;
}
.fvsel__ico{
position:absolute; left:13px; z-index:1;
width:20px; height:20px; color:var(--ink); pointer-events:none;
}
.fvsel__chev{
position:absolute; right:12px; z-index:1;
width:18px; height:18px; color:var(--ink3); pointer-events:none;
}
.fvsel__input{
appearance:none; -webkit-appearance:none;
width:100%; height:54px; padding:0 38px 0 42px;
border:0; border-radius:10px; background:transparent;
font-family:inherit; font-size:16px; letter-spacing:.02em; color:var(--ink);
cursor:pointer;
}
/* 未選択のあいだは、置いてある文字が入力済みに見えないよう少し薄くする */
.fvsel__input:invalid,
.fvsel__input:has(option[value=""]:checked){color:var(--ink3);}
.fvsel:focus-within{
border-color:var(--orange);
box-shadow:0 0 0 3px rgba(241,128,0,.18);
}
.fvsel__input:focus{outline:none;}
/* --- 検索ボタン --- */
/* ⚠️ サイトの決めごとでは「求人サイトへ送る探すボタンはブルー（.btn--find）」だが、
ここは支給ラフがオレンジなのでラフに合わせている */
.fvsearch__btn{
display:inline-flex; align-items:center; justify-content:center; gap:9px;
min-width:270px; height:54px; padding:0 26px;
border:0; border-radius:10px;
background:linear-gradient(105deg,#FFA524 0%,#FF7A18 45%,#F5551B 100%);
color:#fff; font-family:inherit; font-size:17px; font-weight:700; letter-spacing:.06em;
white-space:nowrap; cursor:pointer;
box-shadow:0 3px 0 #C9481A;
transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.fvsearch__btn:hover{
transform:translateY(-2px);
background:linear-gradient(105deg,#FFB13A 0%,#FF8828 45%,#FF6524 100%);
box-shadow:0 5px 0 #C9481A;
}
.fvsearch__btn .btn__ico{width:19px; height:19px;}
/* --- 人気のキーワード --- */
.fvsearch__keys{
grid-column:2 / -1;
display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px;
}
.fvsearch__keys-ttl{margin:0; font-size:13.5px; color:var(--ink3); white-space:nowrap;}
.fvkeys{display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none;}
.fvkeys__item{
display:inline-block; padding:6px 16px;
background:var(--white); border:1px solid var(--line); border-radius:var(--r-full);
font-size:13.5px; line-height:1.5; color:var(--ink2); text-decoration:none;
transition:border-color .15s ease, color .15s ease;
}
.fvkeys__item:hover,
.fvkeys__item:focus-visible{border-color:var(--orange); color:var(--orange);}
/* --- 右肩のパンダと吹き出し --- */
/* 窓の上辺をまたいで顔を出す。読み上げには出さない飾りなので pointer-events も切る。
⚠️ 窓（.fvsearch__body）の背面に回している。z-index はあちらに持たせているので、
ここには付けないこと（付けると前に戻ってしまう）*/
/* 10-01、パンダの中心がスマホの絵（.fv__phone）の右端に来るように置き、吹き出しは左へ回した。
並びは左から 吹き出し → パンダ なので、この枠の右端＝パンダの右端。
スマホの右端（--fvphone-r）からパンダの幅の半分だけ外へ出せば、中心が右端に重なる。
⚠️ パンダの幅（--fvsp-w）を変えるときは、img の width ではなくこの変数を直すこと */
.fvsearch__panda{
--fvsp-w:92px;
position:absolute; right:calc(var(--fvphone-r) - var(--fvsp-w) / 2); bottom:calc(100% - 20px);
display:flex; align-items:flex-end; gap:4px;
pointer-events:none;
}
.fvsearch__panda img{display:block; width:var(--fvsp-w); height:auto;}
/* 吹き出しは他のパンダ（.cpanda__bubble／.dxpanda__bubble）と同じ作り。
白地＋2pxの色枠、尾は三角を2枚重ねて奥が枠の色・手前が白。
枠の色だけ節の地に合わせる決まりで、ここはFVの空に乗るので水色（DXパンダと同じ）*/
.fvsearch__bubble{
position:relative;
/* 窓の上辺より上に完全に出す量。パンダは窓に食い込ませたままにしたいので、
食い込み（.fvsearch__panda の bottom）より大きく取ること */
margin:0 0 30px; padding:12px 20px;
background:var(--white);
border:2px solid #D9E7F5; border-radius:22px;
font-size:14px; font-weight:700; line-height:1.65; letter-spacing:.02em;
color:var(--ink); white-space:nowrap;
}
/* 尾はパンダが吹き出しの右にいるので右向き */
.fvsearch__bubble::before,
.fvsearch__bubble::after{
content:""; position:absolute; top:50%; margin-top:-10px;
width:0; height:0; border:10px solid transparent;
}
.fvsearch__bubble::before{right:-20px; border-left-color:#D9E7F5;}
.fvsearch__bubble::after{right:-17px; border-left-color:var(--white);}
/* 901〜1150px。10-02、PCと同じ「ひとこと → 選択2つ → ボタン」の1行のまま、寸法だけ詰める形に直した。
それまでは ひとこと／選択／ボタン／キーワード の4段に折っていたが、選択が2つになってからは
3列目が空いて右が欠け、窓の背が高くなってFVの吹き出しやパンダを隠していた。
⚠️ 900px以下（下の @media）は1列に積む。そちらで列の指定・ひとことの形を上書きしている */
@media (max-width:1150px){
.fvsearch__body{
grid-template-columns:auto repeat(3, minmax(0, 1fr));
column-gap:12px; row-gap:12px;
padding:22px 24px 18px;
}
.fvsearch__catch{margin:0 6px 0 2px; font-size:15px;}
/* ボタンは選択と同じ幅の列に収める（PCの最小幅270pxのままだと列からはみ出す） */
.fvsearch__btn{min-width:0; width:100%; padding:0 10px; font-size:16px; letter-spacing:.04em;}
/* キーワードは窓の幅いっぱいに使う。見出しが横に入りきらない幅では、見出しが上・キーワードが下の2行になる。
8つが1行に収まるよう、札の左右の余白と間隔を少し詰めている */
.fvsearch__keys{grid-column:1 / -1; gap:6px 10px;}
.fvkeys{gap:6px;}
.fvkeys__item{padding:6px 12px; font-size:13px;}
}
@media (max-width:900px){
/* 幅が足りず、またがせると本文にかぶるので、SPではFVの下に置いて少しだけ重ねる */
.fvsearch{
position:relative; bottom:auto; transform:none;
width:calc(100% - 32px); margin:-34px auto 0;
}
.fvsearch__body{
grid-template-columns:minmax(0, 1fr);
padding:20px 18px 18px; border-radius:18px; row-gap:10px;
}
/* 09-22、SPでは傾けず、検索窓のタイトルとして読ませる。
文字を少し大きく、改行も外して1行に。下線（::after）はまっすぐのまま文字の下に残す */
/* ⚠️ justify-self:center を外さないこと。枠を文字幅まで縮めておかないと、
下線（::after）が段いっぱいに伸びてパネルからはみ出す */
.fvsearch__catch{
justify-self:center; text-align:center;
transform:none;
font-size:17px; line-height:1.5; letter-spacing:.04em;
margin:2px 0 8px;
}
.fvsearch__catch br{display:none;}
/* 下線は細く、文字の少し下へ（09-22 指定） */
.fvsearch__catch::after{left:-6px; right:-10px; bottom:-10px; height:9px;}
.fvsel__input{height:50px; font-size:15.5px;}
/* 左右の余白・字間・キーワードの間隔は、1150px以下で詰めたぶんをPCの値に戻している */
.fvsearch__btn{min-width:0; height:52px; padding:0 26px; font-size:16px; letter-spacing:.06em;}
.fvkeys{gap:8px;}
.fvsearch__keys{gap:6px 10px;}
.fvsearch__keys-ttl{font-size:12.5px;}
/* 09-24、指で押しやすいよう高さを確保（見た目の文字サイズは変えない） */
.fvkeys__item{padding:9px 13px; font-size:12.5px; min-height:40px; display:inline-flex; align-items:center;}
/* ⚠️ SPは1段目が中央揃えのひとことなので、パネルに深く食い込ませない。
深く重ねると「ぴったりの」がパンダの裏に隠れる */
/* スマホの絵は中央寄せ（幅 --fvphone-w）なので、右端は「中央＋幅の半分」。そこにパンダの中心を合わせる */
.fvsearch__panda{--fvsp-w:62px; right:calc(50% - var(--fvphone-w) / 2 - var(--fvsp-w) / 2); bottom:calc(100% - 6px);}
/* 枠と尾の作りはPCと同じまま、寸法だけ落とす */
.fvsearch__bubble{font-size:12px; padding:8px 14px; border-radius:18px; margin-bottom:16px;}
.fvsearch__bubble::before,
.fvsearch__bubble::after{margin-top:-8px; border-width:8px;}
.fvsearch__bubble::before{right:-16px;}
.fvsearch__bubble::after{right:-13px;}
}
/* ============================================================
ヒロスタッフとは（トップ／FV直下）
============================================================ */
/* 白地に、オレンジの見出し＋短い罫、中央揃えのリード、紹介動画の枠。
左右のパンダは文字組みに関わらせたくないので絶対配置で添える */
/* ⚠️ 09-10、この節の「画面に留めて次の節をかぶせながら送る」貼り付けを取りやめた。
画面の高さによって止まる位置が変わり、意図どおりに動かなかったため。
いまはふつうに流れる節で、次の節（.entryhero）が上の角丸のぶんだけ乗ってくるだけ。
一緒に外したもの：
・.abouthiro__inner / .abouthiro__bg > span の position:sticky
・貼り付いたまま送る距離（.abouthiro__dwell の高さ）
・はみ出し量を実測して --about-over に入れていた assets/js/site.js のブロック
戻すときは、この差分にある3点をまとめて復活させること */
.abouthiro{
position:relative;
/* ⚠️ .secwrap は z-index:1 を持っている。閉じておかないと後ろのセクションの上に漏れて、
次の節（.entryhero）の角丸がこの節の下に隠れてしまう */
isolation:isolate;
padding:0 24px;
/* 絵が来る前・読み込み中の一瞬のために白を敷く */
background:var(--white);
}
/* 地は白の無地。⚠️ 09-22、支給のイラスト（assets/img/about-bg.jpg）を敷くのをやめた。
戻すときは span の background に url("assets/img/about-bg.jpg") no-repeat center center / cover を足す */
.abouthiro__bg{position:absolute; inset:0; z-index:0;}
.abouthiro__bg > span{
position:absolute; inset:0;
display:block;
background:var(--white);
}
/* 「ヒロスタッフとは」に乗る側。それぞれ自前の地色を持っているので下は透けない。
⚠️ 実際に重なるのは次の .entryhero だけだが、以降の節も配置済みにしておかないと
DOM順の重なりが崩れて .abouthiro の地の絵が上に出てくる */
.entryhero,
.lanewrap,
.stepflow,
.homefaq,
.pagenav,
.footer{position:relative;}
/* ⚠️ セレクタを .abouthiro で1つ深くしていること。この要素は .secwrap も持っていて、
.secwrap{position:relative} のほうがこのファイルの後ろにあるため、
クラス1つでは負ける */
/* 下の余白は、次の節（.entryhero）が角丸のぶんだけ乗ってくるので、
その深さ（--about-overlap）を足しておく。足さないと本文の最後の行に弧がかかる */
.abouthiro .abouthiro__inner{
position:relative;
padding:var(--s7) 0 calc(var(--s6) + var(--about-overlap));
}
/* 貼り付けをやめたので、送るための空箱は出さない（markup は残してある）*/
.abouthiro__dwell{display:none;}
/* 見出しの手書き文字。⚠️ 白を抜いた透過PNGなので、地の絵の上にそのまま置ける */
.abouthiro__ttl{
margin:0 auto var(--s4); line-height:0;
max-width:min(560px, 72%);
}
.abouthiro__ttl img{display:block; width:100%; height:auto;}
/* メッセージの上に置く英字ラベルは、本文とのあいだをふつうより大きく空ける */
.abouthiro .sec__en{margin-bottom:var(--s4);}
/* 読み物ではなく「想いを伝える文」の組み方。
・太字をやめて 500（Noto Sans JP に実在するウェイト。700 は擬似ボールドになる）
・字を少し大きく、字間・行間をたっぷり取る
・段落と段落のあいだは1行ぶん以上空けて、息継ぎを作る */
.abouthiro__lead{
max-width:820px; margin:0 auto;
text-align:center;
font-size:clamp(17px, 1.35vw, 20px); font-weight:500;
line-height:2.4; letter-spacing:.08em;
color:var(--ink2);
}
.abouthiro__lead p{margin:0;}
.abouthiro__lead p + p{margin-top:1.9em;}
/* --- 左右のパンダ --- */
.abouthiro__panda{
position:absolute; z-index:1;
width:clamp(84px,10vw,120px);
}
.abouthiro__panda img{display:block; width:100%; height:auto;}
/* 09-22、2ひきとも300px下げた（もとは top:-30px ／ top:38%） */
.abouthiro__panda--a{right:0; top:270px;}
/* 右上は応援のパンダ（501×440）。ポンポンのぶん横に広いので、
左の虫めがね（440×440）と背丈がそろうよう幅を 501/440 倍にしている。
⚠️ 09-22 までは同じ仮の絵を左右に置いて左だけ反転していたが、別の絵になったので反転はやめた */
.abouthiro__panda--a{width:clamp(96px,11.4vw,137px);}
.abouthiro__panda--b{left:0; top:calc(38% + 300px);}
/* ぴょこぴょこ跳ねる（09-22）。かがむ → 跳ぶ → 着地でつぶれる → 戻る、を繰り返す。
軸は足元に置き、つぶれたときに地面から浮かないようにしている。
動かすのは img（位置指定は枠の .abouthiro__panda が持っているので、そちらの transform とぶつからない）。
2ひきが同じ拍だと機械的に見えるので、左のパンダは半拍ずらす。
⚠️ 09-24、控えめに直した。読ませたい文章の左右にいるので、動きが目に入り続けると
本文から気が散る。一周を長く（1.8s → 3.4s）して止まっている時間を増やし、
跳ぶ高さ（-14% → -6%）とつぶれ具合も半分ほどに抑えている。
ここを強めるときは、本文を読んでいる最中の視界の端で確かめること */
.abouthiro__panda img{
transform-origin:50% 100%;
animation:about-hop 3.4s ease-in-out infinite;
}
.abouthiro__panda--b img{animation-delay:-1.7s;}
@keyframes about-hop{
0%, 70%, 100%{transform:translateY(0) scale(1, 1);}
76% {transform:translateY(0) scale(1.03, .96);}
84% {transform:translateY(-6%) scale(.985, 1.02);}
91% {transform:translateY(0) scale(1.025, .97);}
96% {transform:translateY(-1.5%) scale(1, 1);}
}
@media (prefers-reduced-motion:reduce){
.abouthiro__panda img{animation:none;}
}
/* 画像が届くまでの仮枠 */
.abouthiro__panda-empty{
display:flex; align-items:center; justify-content:center;
aspect-ratio:3 / 3.4;
border:2px dashed var(--line-strong); border-radius:var(--r-m);
color:var(--ink3); font-size:12px; font-weight:700; line-height:1.5; text-align:center;
}
/* ============================================================
入口カード2枚（トップ／求職者・企業様）
============================================================ */
/* 上辺は .jobcat と同じ、大きく丸めたアーチ。丸めたぶん上の余白も .jobcat に合わせる */
/* 上辺は「お仕事開始までの4ステップ」の下辺（.stepflow__band::after）と同じ、
ゆるやかな楕円の弧。まっすぐ切らず、この節の地が中央で少しせり上がる形で
前の「ヒロスタッフとは」に乗る。弧の深さは --about-overlap */
.entryhero{
position:relative;
padding:var(--s7) 24px var(--s6); background:var(--bg2);
/* ⚠️ 下の ::before（上に乗る弧）を左右へ2%はみ出させているぶん、
何もしないと画面の右へはみ出して横スクロールが出る。ここで横だけ切る。
縦（visible）は残すこと。弧はこの要素の【上】に出ているので、
overflow:hidden や overflow:clip にすると弧ごと消える。
x:clip と y:visible は同時に指定できる唯一の組み合わせ */
overflow-x:clip;
}
.entryhero::before{
content:"";
/* ⚠️ 左右を少しはみ出させること。楕円の端は接線が縦になるので、
画面の縁でちょうど終わらせると角が立って見える。
⚠️ 色は .entryhero の地と同じにすること。違う色にすると弧の下に線が出る。
1px 重ねているのは、拡大時に境目へ髪の毛のような透けが出るのを防ぐため */
position:absolute; left:-2%; right:-2%; bottom:calc(100% - 1px);
height:var(--about-overlap);
background:var(--bg2);
border-radius:50% 50% 0 0 / 100% 100% 0 0;
}
/* --- 見出し（TROUBLE／こんなお悩みありませんか？） --- */
.entryhero__head{text-align:center;}
/* 見出しの下のオレンジの短い線。
⚠️ 支給ラフでは英字ラベル（TROUBLE）の下に引かれていたが、
すぐ下の .mission（FEATURES）が「見出しの下」に引く作りなので、
2つ並んだときにズレて見えないようこちらに合わせた。線の寸法も同じ64×4px */
.entryhero__ttl{font-weight:700;}
.entryhero__ttl::after{
content:""; display:block; width:64px; height:4px; border-radius:4px;
margin:20px auto 0; background:var(--orange);
}
.entryhero__lead{
max-width:760px; margin:var(--s3) auto 0;
font-size:16px; font-weight:500; line-height:2; color:var(--ink2);
}
.entryhero__list{
display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s4);
margin:0; padding:0; list-style:none;
}
/* 見出しとカードのあいだ。
⚠️ .entryhero__list 単独に margin-top を書いても効かない。この ul は .secwrap も
持っていて、.secwrap{margin:0 auto} のほうがCSSの後ろにあるため打ち消される。
隣接セレクタでクラス2つぶんの詳細度にして勝たせている */
.entryhero__head + .entryhero__list{margin-top:var(--s5);}
/* 高さを2枚でそろえたいので、li もカードも縦に伸ばす */
.entryhero__item{display:flex;}
/* カードごと1つのリンク。上に「丸アイコン＋見出し」の段、下に「チェック項目＋矢印」の段。
下の段は margin-top:auto で card の下端に寄せ、2枚で高さがそろっても間延びさせない */
.ecard{
position:relative; flex:1;
display:flex; flex-direction:column; align-items:stretch;
padding:34px 36px;
background:var(--white); border-radius:var(--r-l);
box-shadow:var(--sh-m);
transition:transform .15s ease, box-shadow .15s ease;
}
.ecard:hover{transform:translateY(-3px); box-shadow:var(--sh-l);}
/* 地の模様（09-22 支給の見本2枚を、画像ではなくCSSで描き直したもの）。
右上＝角からはみ出す大きな扇形＋点々（4×4）、左下＝淡い丸2つの重なり。
⚠️ 見本は縁に灰色のにじみが入った1枚絵で、縦横比もカードと違う（敷くと丸がゆがむ）ため、画像は使っていない。
色は --ec-deco（面）と --ec-dot（点）。求職者＝オレンジ、企業様＝ブルー */
.ecard{
--ec-deco:rgba(251,186,96,.2);
--ec-dot:#FDCB85;
overflow:hidden;
background:
radial-gradient(circle 170px at calc(100% + 34px) -64px, var(--ec-deco) 99%, transparent 100%),
radial-gradient(circle 110px at 36px calc(100% + 56px), var(--ec-deco) 99%, transparent 100%),
radial-gradient(circle 140px at 170px calc(100% + 100px), var(--ec-deco) 99%, transparent 100%),
var(--white);
}
.ecard--biz{
--ec-deco:rgba(120,168,235,.18);
--ec-dot:#94BDF2;
}
.ecard::before{
content:""; position:absolute; top:22px; right:24px;
width:52px; height:52px;
background:radial-gradient(circle, var(--ec-dot) 2.8px, transparent 3.4px) 0 0 / 13px 13px;
pointer-events:none;
}
/* 点々より中身を前に出す（狭い画面では見出しの右端と点々が重なるため） */
.ecard > *{position:relative; z-index:1;}
/* --- 上段：丸アイコン＋見出し --- */
.ecard__head{display:flex; align-items:center; gap:20px;}
/* アイコンはフッターのパネル（.pgcard）と同じ支給素材。色つきのイラストなので、
丸はベタ塗りではなく淡い地にして、絵をその上に置く（.pgcard__ico と同じ扱い）*/
.ecard__ico{
flex:none;
display:flex; align-items:center; justify-content:center;
width:76px; height:76px; border-radius:50%;
}
.ecard__ico img{display:block; width:74%; height:auto;}
/* 企業様側の絵（ecard-biz.png）は丸い青地まで描き込まれた1枚なので、
地色の丸は敷かず、絵を丸いっぱいに出す */
.ecard--biz .ecard__ico img{width:100%;}
.ecard--job .ecard__ico{background:#E8F4E4;}
.ecard__ttl{margin:0; font-size:23px; font-weight:700; letter-spacing:.01em; line-height:1.4;}
/* --- 下段：チェック項目と矢印を左右に --- */
.ecard__body{
display:flex; align-items:center; gap:var(--s3);
margin-top:26px;
}
.ecard__list{flex:1; margin:0; padding:0; list-style:none;}
.ecard__list li{
display:flex; align-items:center; gap:12px;
font-size:15.5px; font-weight:500; line-height:1.5; color:var(--ink2);
}
.ecard__list li + li{margin-top:15px;}
/* チェックの角丸四角。地色はカードの色、チェック自体は白ヌキ */
.ecard__check{
flex:none;
display:flex; align-items:center; justify-content:center;
width:25px; height:25px; border-radius:6px;
color:#fff;
}
.ecard__check svg{width:15px; height:15px;}
.ecard--job .ecard__check{background:var(--orange);}
.ecard--biz .ecard__check{background:var(--blue-deep);}
/* 右の丸い矢印。下段の flex で、チェック項目の高さの中央に来る */
.ecard__arrow{
flex:none;
display:flex; align-items:center; justify-content:center;
width:52px; height:52px; border-radius:50%;
color:#fff;
transition:transform .15s ease;
}
.ecard--job .ecard__arrow{background:var(--orange);}
.ecard--biz .ecard__arrow{background:var(--blue-deep);}
.ecard__arrow svg{width:22px; height:22px;}
.ecard:hover .ecard__arrow{transform:translateX(4px);}
@media (prefers-reduced-motion:reduce){
.ecard,.ecard__arrow{transition:none;}
.ecard:hover{transform:none;}
.ecard:hover .ecard__arrow{transform:none;}
}
/* ============================================================
会社の想い＋3つの特長（トップ／入口カードの下）
============================================================ */
/* 地は入口カード（.entryhero）から続くクリーム。
上は .entryhero の下パディングに足す形で、見出しまでの間を取る */
.mission{padding:60px 24px var(--s7); background:var(--bg2);}
.mission__inner{text-align:center;}
/* 見出しの中でオレンジに落とす部分（09-09 支給ラフ）。
⚠️ --orange（#F18000）ではなく --orange-dark。白地に乗せると #F18000 は
コントラスト比2.6で、大きい文字の基準（3.0）にも届かない */
.mission__em{color:var(--orange-dark);}
/* ⚠️ ここだけ見出しの下線を出さない（09-09）。英字ラベルの左右に線を足したので、
その下にもう1本引くと線が二重になる。
他の節（.entryhero__ttl／.stepflow__ttl／.cttl など）は従来どおり線あり */
.mission__ttl{font-weight:700;}
/* 本文は1行1段落。中央寄せのまま、行間を広めに取る */
.mission__lead{max-width:850px; margin:var(--s4) auto 0;}
.mission__lead p{margin:0 0 .5em; font-size:17px; font-weight:700; line-height:2;}
.mission__lead p:last-child{margin-bottom:0;}
/* 特長カード3枚。左右の端は以降のセクション（特長パネル・地図・カード列）とそろえる */
.mission__pts{
display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s2);
margin:var(--s5) 0 0; padding:0; list-style:none;
}
/* 高さを3枚でそろえたいので、li もカードも縦に伸ばす（.entryhero__item と同じ作り）*/
.mission__pt{display:flex;}
/* 淡いグラデーションのパネル。中は上から
「丸アイコン＋ラベル＋見出し」→「説明2行」、右下に丸い矢印（09-09 支給ラフ）。
カードごと、対応する POINT パネルへのページ内リンク */
.mpt{
position:relative; flex:1;
display:flex; flex-direction:column;
padding:26px 26px 64px;
/* 地は支給のパネル画像（淡いグラデーション＋下辺に薄い街並み）。
⚠️ 画像の縦横比（437:303）よりカードのほうが縦長なので cover は左右を切る。
絵に焼き込まれた角丸もそこで落ちるが、角はこの border-radius が丸め直す。
画像が出るまでのあいだ・読み込みに失敗したときのために、地色も敷いておく */
background:var(--mpt-bg) var(--mpt-img) no-repeat center bottom / cover;
border-radius:14px;
/* 親（.mission__inner）が中央そろえなので、カードの中だけ左そろえに戻す */
color:var(--ink); text-decoration:none; text-align:left;
transition:transform .15s ease, box-shadow .15s ease;
}
.mpt:hover,
.mpt:focus-visible{transform:translateY(-3px); box-shadow:var(--sh-m);}
@media (prefers-reduced-motion:reduce){
.mpt{transition:none;}
.mpt:hover{transform:none;}
}
/* 特長1＝オレンジレッド／特長2＝オレンジ／特長3＝ブルー。
--mpt-c はラベル・アイコン・矢印に共通で使う、そのカードの色。
値は支給ラフから直接拾ったもの（09-09、忠実再現の指定）。
⚠️ コントラストは満たしていない。「POINT 01」は13px・700 なので通常サイズ扱いで
4.5:1 が要るが、淡い地の上では 2.9:1 前後しか出ない。
白い丸の上に乗るアイコンと矢印は 2.9〜4.1:1（図の基準は3:1）。
読みやすさを優先するなら #AE3B47／#8F5008／#1F6A8C（いずれも地に対して4.8:1以上）*/
.mpt--a{--mpt-c:#D4523C; --mpt-bg:#FBDCDC; --mpt-img:url("assets/img/mpt-bg-01.png");}
.mpt--b{--mpt-c:#E37B2F; --mpt-bg:#FDE7CB; --mpt-img:url("assets/img/mpt-bg-02.png");}
.mpt--c{--mpt-c:#4391D9; --mpt-bg:#D5E9F7; --mpt-img:url("assets/img/mpt-bg-03.png");}
/* --- 上段：丸アイコン＋ラベル＋見出し --- */
.mpt__head{display:flex; align-items:center; gap:14px;}
.mpt__ico{
flex:none;
display:flex; align-items:center; justify-content:center;
width:56px; height:56px; border-radius:50%;
background:var(--white); color:var(--mpt-c);
}
/* アイコンは塗りではなく線画。太さと端の処理はここで一括して持つ */
.mpt__ico svg{
width:30px; height:30px;
fill:none; stroke:currentColor; stroke-width:1.7;
stroke-linecap:round; stroke-linejoin:round;
}
.mpt__heading{display:block;}
/* 「POINT 01」の英字ラベル。字間は .ptlead__no と同じ */
.mpt__cap{
display:block; margin-bottom:2px;
font-size:13px; font-weight:700; letter-spacing:.14em; line-height:1.5;
color:var(--mpt-c);
}
/* 見出しの改行位置は支給デザインどおり固定したいので、行ごとに span を出して block にする。
⚠️ 級数を上げると、いちばん長い行（「合わせて自由に働ける」）が
アイコンの右の幅に収まらず3行に折れる */
.mpt__ttl{display:block; font-size:16.5px; font-weight:700; line-height:1.55;}
.mpt__ttl span{display:block;}
/* --- 下段：説明2行 --- */
.mpt__txt{
display:block; margin-top:18px;
font-size:14px; line-height:1.8; color:var(--ink2);
}
.mpt__txt span{display:block;}
/* 右下の丸い矢印。カードの高さが3枚でそろうので、位置は下端からの絶対配置で決める。
丸は白、矢印はカードの色。淡い地の上に白い丸を置くので、輪郭は影で出す */
.mpt__arw{
position:absolute; right:24px; bottom:22px;
display:flex; align-items:center; justify-content:center;
width:38px; height:38px; border-radius:50%;
background:var(--white); color:var(--mpt-c);
box-shadow:0 2px 6px rgba(70,60,50,.14);
transition:transform .15s ease;
}
.mpt__arw svg{width:17px; height:17px;}
.mpt:hover .mpt__arw{transform:translateX(3px);}
@media (prefers-reduced-motion:reduce){
.mpt__arw{transition:none;}
.mpt:hover .mpt__arw{transform:none;}
}
@media (max-width:900px){
.mission{padding-bottom:var(--s6);}
.mission__lead p{font-size:16px; line-height:1.9; text-align:left;}
.mission__pts{grid-template-columns:1fr; gap:var(--s2); max-width:480px; margin-inline:auto;}
.mpt{padding:22px 20px 60px;}
.mpt__head{gap:14px;}
.mpt__ico{width:52px; height:52px;}
.mpt__ico svg{width:26px; height:26px;}
.mpt__ttl{font-size:17px;}
/* ⚠️ 縦積みでも改行位置は支給デザインのまま（span は block のまま）。
inline に戻すと1行が長くなり、狭い画面でカードから溢れる */
}
/* ============================================================
下層ページ ヘッダー
============================================================ */
/* 下層は本文の流れの中にあるので sticky。fixed にすると先頭が隠れる */
.header--solid{
position:sticky; top:0; background:var(--white);
}
.gnav a.is-current{color:var(--orange);}
/* 現在地の下線は最初から出しておく。伸びる向きはホバーと同じ左起点で揃える */
.gnav a.is-current::after{transform:scaleX(1); transform-origin:left center;}
.phead{
position:relative;
/* 地はトップのFV（.fv）とまったく同じ1枚（fv-bg-hiroshima.jpg）。全下層ページで共通。
以前は「空のグラデーション（fv-bg-sky.png）＋街並みの帯（fv-town.png）」の
2枚重ねだったが、空と街並みと川が1枚に入っているので廃止した。
⚠️ ファイルは .fv と共有している。差し替えるとトップのFVも変わる。
⚠️ 寄せは center bottom。中央寄せにしないこと。
このヒーローは高さ約300pxに対して幅が1400px超と極端に横長なので、cover は
縦を大きく切る。下端を基準にしておけば、削られるのは絵の上半分（無地の空）だけで、
街並みと川の帯が残る。中央寄せだと街並みの足元と川が切れてしまう。
画像が届く前・cover で埋まらない一瞬のために、空の中間色を地に敷く */
background:
#B7DEF4 url("assets/img/fv-bg-hiroshima.jpg") no-repeat center bottom / cover;
/* 見出しをヒーローの高さのちょうど中心に置く。
上下のパディングを同じ値にし、流れの中に残るのは見出しだけにすることで中心が出る
（パンくずは .crumb--in-hero 側で絶対配置にして上端へ逃がしている）。
6.37vw は元の街並みの帯（幅の 87/1366）の高さ。地が1枚絵になったいまは
「見出しが街並みに乗らない高さ」を出すためだけの値として残している */
padding:calc(6.37vw + 36px) 25px;
/* 見出しは中央そろえ（子ページの .cttl と揃えている）。英字サブは全ページで使わない。
パンくずは左上に置くので、.crumb--in-hero 側で左そろえのままにしている */
text-align:center;
}
/* 雲（.fvclouds）を敷くので、はみ出しはここで切る。
⚠️ overflow:hidden にしないこと。右下の写真（.phead__fig）が
ヒーローの下端をまたぐ作りなので、縦は切らずに横だけ clip にしている */
.phead{overflow-x:clip;}
/* 下端と次のセクション（白い地）の境目。
⚠️ 09-24 追加。これが無いと、川の水色が白い地にぶつかって横一直線の切り口が出る
（企業様向け .phead--biz と採用系 .phead--recruit には前からあり、
共通の地＝広島の街並みのページにだけ無かった）。
⚠️ 色は次のセクションの地（--bg）と同じにすること。違う色だと帯の終わりに線が出る。
⚠️ 高さは --biz と同じ控えめな値。--recruit の130pxだと街並みごと白に飲まれる */
.phead::after{
content:""; position:absolute; left:0; right:0; bottom:0;
height:clamp(40px,5vw,72px);
background:linear-gradient(to bottom, rgba(252,252,252,0) 0%, rgba(252,252,252,.72) 55%, var(--bg) 100%);
/* 右下の写真（.phead__fig）より下に敷く。同じ z-index だと後から描かれて写真が白くかすむ */
z-index:0; pointer-events:none;
}
.phead__inner{position:relative; z-index:1; max-width:var(--wrap); margin:0 auto;}
/* ときどき右から左へ横切るパンダ。大きさは雲と同じくらい。
45秒の周期のうち、横切るのは最初の4割（約18秒）で、残りは画面の外で待たせている
（つねに飛んでいると気が散るので「たまに、ゆっくり通る」くらいに留める）。
速さを変えるなら 45s と 40% の両方を見ること。
はみ出しは .phead の overflow-x:clip が切る */
.pheadfly{
position:absolute; right:0; top:22%; z-index:0;
display:block; width:44px;
animation:phead-fly 45s linear infinite;
}
/* 上下のゆれはFVの飛ぶパンダと同じ動きを流用する */
.pheadfly img{display:block; width:100%; height:auto; animation:hiro-fly 5.4s ease-in-out infinite;}
@keyframes phead-fly{
0% {transform:translateX(100%);}
40% {transform:translateX(calc(-100vw));}
100%{transform:translateX(calc(-100vw));}
}
/* 動きを減らす設定では止める。開始位置は画面の外なので、そのまま出てこない */
@media (prefers-reduced-motion:reduce){
.pheadfly,.pheadfly img{animation-play-state:paused;}
}
/* 支給ラフの組み方（字間を大きく開いた見出し＋下に小さな英字）に合わせた2段の組み（09-09）。
⚠️ 色だけはラフの白ヌキにできない。ラフの地は青空の濃い写真だが、こちらの地は
淡いイラストなので、白を乗せると 1.7:1 で読めなくなる（濃い帯を敷けば白も
成立するが、絵が沈むので採らない）。--ink なら地に対して10:1前後で確実に読める */
.phead__ttl{
margin:0;
/* 09-23、既定はオレンジ部分と同じ大きさ（色分けのないページはこの1本）*/
font-size:clamp(30px,4.4vw,39px); font-weight:600;
/* 書体は本文と同じ Noto Sans JP。受け継ぎ任せにせず、ここで明示しておく */
font-family:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
/* 09-23、字間は0（もとは .18em）。字間ぶんの右ずれを直す text-indent も不要になる */
letter-spacing:0; line-height:1.45;
color:var(--ink);
/* 街並みの地に埋もれないよう白のふちを付ける。
paint-order でふちを文字の後ろに回し、線の内側で字が痩せないようにしている */
-webkit-text-stroke:2px var(--white);
paint-order:stroke fill;
}
/* 色分けのあるページだけ、地の文字（黒い後半）を一回り小さくする */
.phead__ttl--split{font-size:clamp(23px,3.4vw,30px);}
/* スマホ用の短い見出し（template-parts/phead.php の ttl_sp）。既定はPC用だけ出す。
文言の一部をスマホで省くための共通クラスも同じ考え方（.u-pc／.u-sp） */
.phead__ttl-sp{display:none;}
.u-sp{display:none;}
/* 見出しの前半（phead.php に 'em' を渡したページだけ）。オレンジで一回り大きく */
.phead__ttl-em{
font-size:1.3em; color:var(--orange);
}
/* 09-24、企業様向け（tone=biz）は、地が夕暮れでオレンジが空に溶けるので黒で出す。
大きさ（1.3em）はそのまま、色だけ見出しの本体と同じにしている */
.phead--biz .phead__ttl-em{color:var(--ink);}
/* paint-order が効かないブラウザでは、ふちを重ねた影で代用する（線は文字の外側にだけ出る） */
@supports not (paint-order: stroke){
.phead__ttl{
-webkit-text-stroke:0;
text-shadow:
-1px -1px 0 var(--white), 1px -1px 0 var(--white),
-1px 1px 0 var(--white), 1px 1px 0 var(--white),
0 -2px 0 var(--white), 0 2px 0 var(--white),
-2px 0 0 var(--white), 2px 0 0 var(--white);
}
}
/* 見出し下の英字サブ。ページ名の英字を phead.php に 'en' で渡したときだけ出る。
⚠️ 13pxなので通常サイズの基準4.5:1が要る。--orange は淡い地に約2:1しかないので使わない */
.phead__en{
margin:10px 0 0;
font-size:13px; font-weight:600; letter-spacing:.32em; text-indent:.32em;
color:var(--ink2);
}
/* 企業様向けのページ（tone=biz）のヒーローだけ、地を港と倉庫の街並みに差し替える（09-23 支給）。
.phead と同じく下端そろえ。かかるのは /client/ と /service/、企業様向けフォームの3ページ */
.phead--biz{
/* 09-24、夕暮れの港の絵に差し替え（前の絵は phead-bg-client-prev.jpg に残してある）。
地の色は絵の上端（空）と同じにして、画像が届く前のちらつきを抑える */
background:
#45A1FC url("assets/img/phead-bg-client.jpg") no-repeat center bottom / cover;
}
/* 下端と次のセクションの境目が直線で出るので、地の色へ溶ける帯を重ねてなじませる
（採用系の .phead--recruit::after と同じ作り）。
⚠️ 色は次のセクションの地（--bg）と同じにすること。違う色だと帯の終わりに線が出る */
.phead--biz::after{
content:""; position:absolute; z-index:1; left:0; right:0; bottom:0;
/* 採用系より薄く取る。ここは下端近くに街並みが来るので、
採用系と同じ130pxだと街並みごと白に飲まれてしまう */
height:clamp(40px,5vw,72px);
background:linear-gradient(to bottom, rgba(252,252,252,0) 0%, rgba(252,252,252,.72) 55%, var(--bg) 100%);
pointer-events:none;
}
/* 採用系のページ（tone=recruit）のヒーローの地。夕暮れの街並み（09-23 支給）。
かかるのは 採用情報／社員インタビュー／募集要項（一覧・詳細）／カジュアル面談 */
.phead--recruit{
background:
#B7DEF4 url("assets/img/phead-bg-recruit.jpg") no-repeat center bottom / cover;
}
/* 下端と次のセクション（白い地）の境目が直線で出るので、白へ溶ける帯を重ねてなじませる。
⚠️ 色は次のセクションの地（--bg）と同じにすること。違う色だと帯の終わりに線が出る */
.phead--recruit::after{
content:""; position:absolute; z-index:1; left:0; right:0; bottom:0;
height:clamp(70px,10vw,130px);
background:linear-gradient(to bottom, rgba(252,252,252,0) 0%, rgba(252,252,252,.72) 55%, var(--bg) 100%);
pointer-events:none;
}
/* 写真入りのヒーロー（全ページ共通・template-parts/phead.php）。
右側に正方形の写真を置き、ヒーローの下端をまたいでパンくず側へはみ出させる。
.phead に overflow は掛けないこと（掛けると下端で切れる）。
見出しと重ならないよう、写真のぶんだけ .phead__inner に右余白を確保している */
.phead--fig{--phead-fig-w:clamp(120px,16vw,200px);}
.phead--fig .phead__inner{padding-right:calc(var(--phead-fig-w) + 24px);}
.phead__fig{
/* 位置の基準は .phead（position:relative）。右端は .phead__inner の右端に揃える */
position:absolute; right:max(25px,calc(50% - var(--wrap) / 2));
bottom:calc(var(--phead-fig-w) * -0.28);
/* 直後のセクションにも position:relative のもの（.sec--entry など）があり、
重なり順が同じだと後ろのDOMが勝って写真の下端が隠れる。ここで一段持ち上げる。
ヘッダー（z-index:50）より下に収める */
z-index:1;
width:var(--phead-fig-w); aspect-ratio:1/1; margin:0;
overflow:hidden; border-radius:var(--r-s);
background:var(--white); box-shadow:var(--sh-m);
}
.phead__fig img{width:100%; height:100%; object-fit:cover;}
/* イラスト入りのヒーロー（お問い合わせ）。
絵は右下に置き、足元はヒーローの下端で切る */
.phead--ill{overflow:hidden;}
.phead__ill{
/* 右端は .phead__inner（max-width:var(--wrap)＋左右25px）の右端に揃える */
position:absolute; right:max(25px,calc(50% - var(--wrap) / 2)); bottom:0;
width:clamp(100px,10vw,150px); height:auto;
pointer-events:none; user-select:none;
}
.crumb{background:var(--bg); padding:18px 24px 0;}
.crumb__list{
max-width:var(--wrap); margin:0 auto; padding:0;
list-style:none; display:flex; flex-wrap:wrap; align-items:center;
font-size:12.5px; color:var(--ink3);
}
.crumb__list li+li::before{
content:">"; margin:0 10px; color:var(--ink3);
}
.crumb__list a{color:var(--orange);}
.crumb__list a:hover{text-decoration:underline;}
/* ============================================================
見出しの下線
============================================================ */
/* 幅いっぱいの罫線を薄いオレンジで引き、その左端だけ濃いオレンジの
グラデーションで塗り重ねる。罫線は border、重ねるバーは ::after。
下地の罫線も右へ向かって淡く消えるグラデーションにして、のっぺりさせない。
グラデーションの border は border-image でしか描けないので、
border 自体は transparent にして border-image で色を流し込んでいる。
.ttl-bar を付けた見出しと、下線を持つ既存の見出しの両方に効かせている */
.ttl-bar,
.cttl,
.post__ttl,
.entry-body h2{
position:relative;
border-bottom:4px solid transparent;
border-image:linear-gradient(90deg,#F6E2C6 0%,#F9EAD6 55%,rgba(246,226,198,.35) 100%) 1;
}
.ttl-bar::after,
.cttl::after,
.post__ttl::after,
.entry-body h2::after{
content:"";
position:absolute; left:0; bottom:-4px;
width:72px; height:4px;
border-radius:2px;
/* 濃いオレンジ→オレンジ→黄色。右端をわずかに透かして罫線へ馴染ませる */
background:linear-gradient(90deg,#D96F00 0%,#F18000 48%,#F5C842 100%);
}
/* ============================================================
セクション共通
============================================================ */
.sec{padding:var(--s5) 24px;}
.sec__inner{max-width:var(--wrap); margin:0 auto;}
/* 見出しまわり（中央揃え。1画面1メッセージ／§8原則②）
英字を大きく薄く敷き、その上に日本語ラベル、下に大見出しを置く型で全セクション統一 */
/* 大見出しの上に置く小さな英字 */
.sec__en{
margin:0 0 12px; text-align:center;
font-size:13px; font-weight:600; letter-spacing:.22em;
color:var(--orange);
}
/* 英字ラベルの左右に短い線を添える版（09-09 支給ラフ）。
線は文字の色をそのまま使うので、色替えは .sec__en 側だけで足りる */
.sec__en--rule{
display:flex; align-items:center; justify-content:center; gap:16px;
/* 字送りのぶん右にずれるので、右の線との間だけ詰め戻す */
text-indent:.22em;
}
.sec__en--rule::before,
.sec__en--rule::after{
content:""; width:34px; height:2px; border-radius:2px;
background:currentColor; opacity:.85;
}
.sec__label{
margin:0 0 var(--s5);
font-size:20px; font-weight:600; letter-spacing:.12em;
color:var(--ink); text-align:center;
}
.sec__ttl{
margin:0 0 var(--s3);
font-size:30px; font-weight:600; line-height:1;
letter-spacing:.02em; text-align:center;
/* 「ずっ／と。」のような不自然な折り返しを避ける */
word-break:auto-phrase;
}
/* ＼ 見出し ／ の斜め線。縦棒を左右に傾けて作る */
/* 直下のspanだけを対象にする（中のマーカー用spanにも付いてしまうため） */
.sec__ttl--slash > span{display:inline-flex; align-items:center; gap:22px;}
.sec__ttl--slash > span::before,
.sec__ttl--slash > span::after{
content:""; width:3px; height:1.05em; border-radius:3px;
background:var(--ink); flex:none;
}
.sec__ttl--slash > span::before{transform:rotate(-20deg);}
.sec__ttl--slash > span::after{transform:rotate(20deg);}
/* 蛍光ペンで引いたような下線。文字の下3割ほどに重ねる */
/* 見出しの中で添え字的に落とす部分 */
.sec__ttl small{font-size:.68em; font-weight:600;}
.sec__ttl .mark,
.homevoice__ttl .mark,
.gnavttl .mark,
.charmend__catch .mark{
padding:0 .12em;
background-image:linear-gradient(180deg,
transparent 0 62%, #FFEB6B 62% 98%, transparent 98%);
-webkit-box-decoration-break:clone;
box-decoration-break:clone;
}
.sec__read{
margin:0 auto var(--s6); max-width:720px;
/* 09-24、他ページのリード文と同じ大きさ・行間に揃えた（もとは 14〜16px／行間1.8） */
font-size:var(--lead-size); line-height:var(--lead-lh); color:var(--ink2); text-align:center;
/* 日本語を文節単位で折り返す。対応していないブラウザでは無視されるだけ。
pretty は最終行が1〜2文字だけ残る（泣き別れ）のを避ける */
word-break:auto-phrase;
text-wrap:pretty;
}
.sec__btns{margin-top:var(--s5); text-align:center;}
/* ============================================================
02 2つの入口
============================================================ */
/* 上はFV下端のクリームを地続きに受け、下は次セクションの白へ。
その切り替わりをパネルの中間の高さに合わせる */
.sec--entry{background:var(--bg); padding-top:var(--s6); position:relative; overflow:clip;}
.entry{position:relative; display:grid; grid-template-columns:1fr 1fr; gap:var(--s3);}
/* 地は白。パネルの高さ半分までをクリームで覆う（上端はoverflow:clipで切る）。
カードは position:relative なので、この帯より前面に出る */
.entry::before{
content:""; position:absolute;
top:-100vh; bottom:50%; left:calc(50% - 50vw); width:100vw;
background:var(--bg2);
/* 下辺を画面幅いっぱいの楕円にして、中央が一番低い緩いカーブにする */
border-radius:0 0 50% 50% / 0 0 30px 30px;
}
.entry__card{
position:relative; display:block;
padding:44px 36px 52px; border-radius:var(--r-l);
background:var(--white); border:2px solid var(--line-soft); box-shadow:var(--sh-s);
transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.entry__card:hover{transform:translateY(-4px); box-shadow:var(--sh-l);}
.entry__tag{
display:inline-block; margin-bottom:var(--s3);
padding:6px 16px; border-radius:var(--r-full);
font-size:13px; font-weight:600; color:#fff;
}
/* 画像の仮枠。素材が入ったら ![]()
に差し替える。
パネルの前面に重ねる扱いなので、テキストの折り返し幅には影響させない */
.entry__ph{
position:absolute; right:26px; top:-14px; z-index:2;
display:flex; align-items:center; justify-content:center;
width:132px; height:132px; border-radius:var(--r-m);
background:#F5F1EA; border:1px dashed var(--line-strong); box-shadow:var(--sh-m);
font-size:12px; color:#A2947E; letter-spacing:.08em;
}
.entry__ttl{display:block; font-size:clamp(20px,2.2vw,26px); font-weight:600; margin-bottom:var(--s1);}
.entry__txt{display:block; font-size:15px; color:var(--ink2); line-height:1.9;}
.entry__arw{
position:absolute; right:28px; bottom:24px;
width:40px; height:40px; border-radius:50%;
display:flex; align-items:center; justify-content:center;
font-size:16px; color:#fff;
}
/* 求職者＝オレンジ */
.entry__card--job:hover{border-color:var(--orange);}
.entry__card--job .entry__tag,
.entry__card--job .entry__arw{background:var(--orange);}
/* 企業＝ブルー。トップ本文における企業への唯一の導線なので同じ面積で並べる */
.entry__card--biz:hover{border-color:var(--blue);}
.entry__card--biz .entry__tag,
.entry__card--biz .entry__arw{background:var(--blue);}
/* ============================================================
03 ヒロスタッフの特長
============================================================ */
.sec--feature{background:var(--bg2);}
.feat{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3);}
.feat__card{
background:var(--white); text-align:center;
border-radius:var(--r-l); padding:48px 30px 44px;
box-shadow:0 6px 24px rgba(90,70,40,.07);
transition:transform .18s ease, box-shadow .18s ease;
}
.feat__card:hover{transform:translateY(-4px); box-shadow:0 12px 32px rgba(90,70,40,.11);}
/* 台座は敷かず、線画のアイコンだけを大きく置く */
.feat__icon{
display:flex; align-items:center; justify-content:center;
height:78px; margin:0 auto var(--s3);
}
.feat__icon svg{width:66px; height:66px;}
/* 元アイコンは太めの線なので、参考デザインに合わせて細く引き直す */
.feat__icon svg [stroke]{stroke-width:2.8;}
.feat__icon--o{color:var(--orange);}
.feat__icon--y{color:#E0A800;}
.feat__icon--g{color:#6F9440;}
.feat__ttl{
margin:0 0 12px;
font-size:19px; font-weight:600; line-height:1.6;
}
/* 見出しもアイコンと同系色に。ただし白背景で読める濃さに落としている */
.feat__card:has(.feat__icon--o) .feat__ttl{color:var(--orange-dark);}
.feat__card:has(.feat__icon--y) .feat__ttl{color:#A97C00;}
.feat__card:has(.feat__icon--g) .feat__ttl{color:#5B7F35;}
.feat__txt{margin:0; font-size:14px; color:var(--ink2); line-height:1.95;}
/* ============================================================
04 こんなお仕事があります
============================================================ */
/* 3行目を白へ溶かしているぶん、下は広めに取る */
.sec--jobs{background:var(--bg); padding-bottom:var(--s7);}
/* 急募ピックアップのカード（求人システムのUIから移植）。
色・タグ札・バッジは start-landing.html の rush セクションに合わせている */
/* カードの上に置く箇条書き。丸チェック＋1行で横に並べ、狭くなったら折り返す */
.jobpoints{
display:flex; flex-wrap:wrap; justify-content:center;
gap:10px 30px; list-style:none;
/* 中身の幅にそろえて薄いベージュの枠で囲う */
width:fit-content; max-width:100%;
margin:0 auto var(--s4); padding:18px 28px;
border:2px solid #EFE4D2; border-radius:var(--r-m);
}
.jobpoint{
display:flex; align-items:center; gap:8px;
font-size:15px; font-weight:600; line-height:1.6;
}
.jobpoint__ico{width:20px; height:20px; color:var(--orange); flex:none;}
/* PCは5列×3行。幅が狭くなるにつれて4→3→2列に落とす */
.jobgrid{
position:relative;
display:grid; grid-template-columns:repeat(5,1fr);
gap:var(--s3) 12px;
}
/* 白へ溶けた3行目に少し重ねて、ボタンを引き上げる */
.sec--jobs .sec__btns{position:relative; z-index:1; margin-top:-80px;}
/* 3行目を下に向かって白へ溶かし、「まだ続きがある」ことを示す。
絶対配置なのでグリッドの升目は取らない */
.jobgrid::after{
content:""; position:absolute; left:0; right:0; bottom:0; height:250px;
background:linear-gradient(180deg,
rgba(255,255,255,0) 0%,
rgba(255,255,255,.72) 34%,
var(--white) 62%);
pointer-events:none;
}
@media (max-width:1024px){ .jobgrid{grid-template-columns:repeat(4,1fr);} }
@media (max-width:767px){ .jobgrid{grid-template-columns:repeat(3,1fr);} }
@media (max-width:499px){ .jobgrid{grid-template-columns:repeat(2,1fr); gap:var(--s2) 10px;} }
.hcard{color:var(--ink);}
.hcard__media{position:relative; display:block;}
.hcard__media img:not(.hcard__badge){
width:100%; aspect-ratio:16/11; object-fit:cover; display:block; border-radius:10px;
}
.hcard__title{
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
margin-top:6px; font-size:13px; font-weight:400; line-height:1.35;
}
.hcard__pay{
display:block; margin-top:2px;
font-size:15px; font-weight:700; font-variant-numeric:tabular-nums;
}
.tilde{font-size:.7em; margin-left:1px; letter-spacing:0;}
.hcard:hover .hcard__title{color:var(--orange);}
/* 雇用形態＝オレンジ塗り／期間＝白地にオレンジ枠 */
.jtags{
display:inline-flex; align-items:center; gap:4px;
margin-top:6px; line-height:1.4; vertical-align:top;
}
.jtags + .hcard__title{margin-top:1px;}
.jtag{
display:inline-block; padding:0 4px; border-radius:3px;
font-size:10px; font-weight:700; line-height:1.4; letter-spacing:.04em;
border:1px solid #E8731C;
}
.jtag--haken,.jtag--shokugyo,.jtag--baito{background:#E8731C; color:#fff;}
.jtag--tanpatsu,.jtag--tanki,.jtag--choki{background:#fff; color:#E8731C;}
/* 急募バッジと残り時間 */
/* z-indexは持たせない。付けるとグリッド全体の重なり順に持ち上がって、
3行目にかけている白フェードより手前に出てしまう（写真より前には自然に出る） */
.hcard__badge{
position:absolute; right:4px; bottom:4px; width:15%; height:auto;
pointer-events:none;
filter:drop-shadow(0 1px 2px rgba(0,0,0,.2));
}
.hcard__count{
position:absolute; top:8px; left:8px;
display:inline-flex; align-items:center; gap:3px;
padding:3px 7px 3px 5px; border-radius:var(--r-full);
background:rgba(255,90,60,.94); color:#fff;
font-size:11px; font-weight:700; line-height:1; font-variant-numeric:tabular-nums;
}
.hcard__fav{
position:absolute; top:6px; right:6px;
display:grid; place-items:center; width:32px; height:32px;
color:#fff; pointer-events:none;
filter:drop-shadow(0 1px 4px rgba(0,0,0,.35));
}
.hcard__ico{width:13px; height:13px;}
.hcard__fav .hcard__ico{width:18px; height:18px;}
/* 職種アイコンのタイル。トップからは外したが、下層の「はじめての方へ」で使っている */
.jobs{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s2);}
.job{
display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
gap:var(--s2); padding:32px 12px 26px;
border-radius:var(--r-l); text-align:center;
transition:transform .18s ease;
}
.job:hover{transform:translateY(-3px);}
.job__icon{
display:flex; align-items:center; justify-content:center;
width:72px; height:72px; border-radius:50%; background:rgba(255,255,255,.72);
}
.job__icon svg{width:38px; height:38px;}
.job__ttl{font-size:15px; font-weight:600; line-height:1.5;}
/* 8分類の色。オレンジ主役＋アクセントをドット的に散らす（§8／⑧トンボの色味） */
.job--c1{background:var(--orange-pale);} .job--c1 .job__icon{color:var(--orange);}
.job--c2{background:#FDF3D2;} .job--c2 .job__icon{color:#E0A800;}
.job--c3{background:var(--green2);} .job--c3 .job__icon{color:#6F9440;}
.job--c4{background:var(--blue-pale);} .job--c4 .job__icon{color:var(--blue);}
.job--c5{background:#FBE7DF;} .job--c5 .job__icon{color:#D9714E;}
.job--c6{background:var(--orange-pale);} .job--c6 .job__icon{color:var(--orange);}
.job--c7{background:#F3EADB;} .job--c7 .job__icon{color:#A98A55;}
.job--c8{background:#FDF3D2;} .job--c8 .job__icon{color:#E0A800;}
/* ============================================================
05 ご利用の流れ
============================================================ */
.sec--flow{background:var(--bg2);}
.flow{
list-style:none; margin:0; padding:0;
display:grid; gap:44px;
}
/* 横長パネル。右上だけ大きく角を落とす */
.flow__step{
position:relative;
display:grid; grid-template-columns:280px 1fr; align-items:center; gap:var(--s4);
background:var(--white); border-radius:0 44px 0 0;
padding:32px 44px 32px 32px;
}
/* ステップ間の山形。手順であることを形で示す */
.flow__step:not(:last-child)::after{
content:""; position:absolute; left:50%; bottom:-28px;
width:24px; height:13px; transform:translateX(-50%);
clip-path:polygon(0 0, 100% 0, 50% 100%);
background:#DCCFB4;
}
/* イラストの仮枠。素材が入ったら ![]()
に差し替える */
.flow__ph{
display:flex; align-items:center; justify-content:center;
aspect-ratio:4/3; border-radius:var(--r-m);
background:#F5F1EA; border:1px dashed var(--line-strong);
font-size:12px; color:#A2947E; letter-spacing:.08em;
}
.flow__num{
display:block;
font-size:14px; font-weight:500; letter-spacing:.08em; color:var(--ink3);
}
.flow__num b{font-size:28px; font-weight:600; margin-left:8px; color:var(--ink2);}
/* 見出しの上に破線。左端だけオレンジの実線を重ねる */
.flow__ttl{
position:relative; margin:14px 0 0; padding-top:18px;
border-top:1px dashed #D9CDB6;
font-size:21px; font-weight:600;
}
.flow__ttl::before{
content:""; position:absolute; top:-1px; left:0;
width:26px; height:2px; background:var(--orange);
}
.flow__txt{margin:10px 0 0; font-size:14.5px; color:var(--ink2); line-height:1.9;}
.flow__after{
display:flex; align-items:center; gap:var(--s3);
margin-top:var(--s3); padding:30px 36px;
background:var(--orange-pale); border-radius:var(--r-l);
}
.flow__after-icon{
flex:0 0 auto; display:flex; align-items:center; justify-content:center;
width:64px; height:64px; border-radius:50%; background:#fff; color:var(--orange);
}
.flow__after-icon svg{width:32px; height:32px;}
.flow__after-ttl{margin:0 0 4px; font-size:19px; font-weight:600;}
.flow__after-txt{margin:0; font-size:14.5px; color:var(--ink2); line-height:1.9;}
/* ============================================================
06 求人システムの紹介 ＋ 主CTA
============================================================ */
.sec--system{background:var(--bg);}
.system{
position:relative; overflow:hidden;
padding:72px 40px 64px; border-radius:var(--r-l); text-align:center;
background:linear-gradient(160deg, #FFA23A 0%, var(--orange) 55%, var(--orange-dark) 100%);
color:#fff;
}
/* 背景のパンダ。主役はコピーなので薄く敷くだけ */
.system__panda{
position:absolute; right:-40px; bottom:-50px; width:280px;
opacity:.14; filter:brightness(0) invert(1); pointer-events:none;
}
.sec__label--on{color:#fff;}
.sec--system .sec__en{color:#FFD9A8;}
.sec__ttl--on{color:#fff;}
.sys3{
position:relative; z-index:2;
display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3);
max-width:820px; margin:var(--s5) auto 0;
}
.sys3__icon{
display:flex; align-items:center; justify-content:center;
width:76px; height:76px; margin:0 auto var(--s2);
border-radius:50%; background:rgba(255,255,255,.18); color:#fff;
}
.sys3__icon svg{width:38px; height:38px;}
.sys3__txt{margin:0; font-size:15px; font-weight:600; line-height:1.8;}
.system__btns{
position:relative; z-index:2;
margin-top:var(--s5); display:flex; flex-wrap:wrap;
gap:var(--s2); justify-content:center;
}
/* 白抜きボタンの枠は白では出ないのでオレンジ。文字色と揃える */
.btn--white{
background:#fff; color:var(--orange); font-size:18px; padding:18px 40px;
border:3px solid var(--orange);
box-shadow:0 6px 0 rgba(0,0,0,.12), var(--sh-m);
}
.btn--white:hover{transform:translateY(-3px); box-shadow:0 9px 0 rgba(0,0,0,.12), var(--sh-l);}
.btn--ghost{
background:transparent; color:#fff; font-size:15px; padding:16px 26px;
border:2px solid rgba(255,255,255,.7);
}
.btn--ghost:hover{background:rgba(255,255,255,.14);}
/* ============================================================
07 口コミ
============================================================ */
.sec--voice{background:var(--bg2); overflow-x:clip;}
/* 横スライダー。コンテナを突き抜けて画面端まで流し、右で見切らせる */
.voice{
display:flex; gap:var(--s3); overflow-x:auto;
margin-inline:calc(50% - 50vw);
padding:4px 0 10px; padding-inline:max(24px, calc(50vw - var(--wrap) / 2));
/* スナップ位置も左余白ぶんずらす。指定しないと1枚目が画面端まで引き寄せられる */
scroll-padding-inline:max(24px, calc(50vw - var(--wrap) / 2));
scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
scrollbar-width:none;
}
.voice::-webkit-scrollbar{display:none;}
/* 丸い顔写真と肩書きを1行目に置く（09-09 支給ラフ）。
⚠️ 以前は写真をカードの上辺にかぶせていた。戻すなら .voice__ph を絶対配置に戻し、
.voice__card の上マージンとパディングも合わせること */
.voice__card{
position:relative;
flex:none; width:clamp(270px, 24vw, 340px); scroll-snap-align:start;
margin:0; padding:26px 26px 30px;
background:var(--white);
border:2px solid var(--coral-pale); border-radius:var(--r-l);
}
.voice__ph{
flex:none;
display:grid; place-items:center;
width:74px; height:74px; border-radius:50%; overflow:hidden;
background:var(--orange-pale);
}
.voice__ph img{width:100%; height:100%; object-fit:cover;}
/* 画像未設置のあいだの仮枠 */
.voice__ph--empty{
border:2px dashed var(--orange);
font-size:12px; font-weight:700; letter-spacing:.08em; color:var(--orange-dark);
}
/* 丸い顔写真＋肩書きの行 */
.voice__head{display:flex; align-items:center; gap:16px; margin:0 0 18px;}
.voice__ava{
flex:none; display:grid; place-items:center;
width:72px; height:72px; border-radius:50%;
}
.voice__ava svg{width:42px; height:42px;}
.voice__ava--c1{background:#FDF3D2; color:#D4A72C;}
.voice__ava--c2{background:var(--orange-pale); color:#E09A45;}
.voice__ava--c3{background:var(--green2); color:#7A9E51;}
/* 本文を一言にまとめた見出し */
.voice__ttl{
margin:0 0 12px;
font-size:17px; font-weight:700; line-height:1.6;
letter-spacing:.01em; color:var(--orange-dark); word-break:auto-phrase;
}
/* 属性は写真の下に小さく、控えめなグレーで */
.voice__meta{
margin:0;
font-size:13px; font-weight:600; letter-spacing:.02em; color:var(--ink3);
}
.voice__meta span{display:inline-block;}
.voice__txt{margin:0; font-size:14.5px; line-height:2; color:var(--ink);}
/* ============================================================
08 よくある質問
============================================================ */
.sec--faq{background:var(--bg);}
.faq{max-width:860px; margin:0 auto;}
.faq__item{
border:2px solid var(--line-soft); border-radius:var(--r-m);
margin-bottom:var(--s2); background:var(--white); overflow:hidden;
}
/* 開いたときの色は問い（summary）だけに乗せる。
答えまで塗ると、開いた項目だけ面が大きく変わって一覧の見通しが悪くなる */
.faq__item[open]{border-color:var(--orange-pale);}
.faq__item[open] .faq__q{background:#FFFCF6;}
.faq__q{
list-style:none; cursor:pointer; position:relative;
padding:22px 60px;
font-size:16px; font-weight:600; line-height:1.7;
}
.faq__q::-webkit-details-marker{display:none;}
/* 支給素材のオレンジの吹き出しアイコン。
位置は1行目の中心にそろえる。尾が左下に出るぶん画像の重心が上に寄るので、
吹き出し本体（画像の上から 7〜93px / 全高113px）の中心が来るよう 2px 下げている */
.faq__q::before{
content:""; position:absolute; left:14px;
top:calc(22px + .85em); transform:translateY(-50%) translateY(2px);
width:39px; height:36px;
background:url("assets/img/ico-faq-q.png") no-repeat center / contain;
}
/* ＋／− でクリックできることを示す */
.faq__q::after{
content:""; position:absolute; right:26px; top:50%;
width:14px; height:2px; background:var(--orange);
box-shadow:0 0 0 0 transparent; transition:transform .2s ease;
}
.faq__item:not([open]) .faq__q::after{
box-shadow:none;
background:
linear-gradient(var(--orange),var(--orange)) center/14px 2px no-repeat,
linear-gradient(var(--orange),var(--orange)) center/2px 14px no-repeat;
height:14px; margin-top:-7px;
}
.faq__item[open] .faq__q::after{margin-top:-1px;}
.faq__a{position:relative; padding:0 56px 24px; font-size:14.5px; color:var(--ink2); line-height:1.95;}
/* 支給素材の赤い「A」。文字は画像の中央にあるので、1行目の中心にそのまま合わせる。
左位置は Q の吹き出しと中心がそろう値 */
.faq__a::before{
content:""; position:absolute; left:16px;
top:.975em; transform:translateY(-50%);
width:36px; height:36px;
background:url("assets/img/ico-faq-a.png") no-repeat center / contain;
}
.faq__a p{margin:0;}
/* 回答の下の注意書き（※）。本文より一段小さく、薄く */
.faq__a .faq__note{margin-top:8px; font-size:12.5px; line-height:1.8; color:var(--ink3);}
/* ============================================================
企業様向けトップ（/client/）
============================================================ */
/* --- ページ内の目次 --- */
/* 折り返しの制御は .gcard 側（最低幅＋grid）に持たせているので、ここでは上書きしない */
.cnav{padding:var(--s4) 24px 0;}
.cnav__inner{max-width:var(--wrap); margin:0 auto;}
/* セクションの中に置く版。自前の余白は持たず、置いた先の版面いっぱいに広げる
（リード文は 900px に絞っているが、カードは項目が少なくても幅を埋める） */
.cnav--inline{max-width:none; margin:var(--s4) auto 0; padding:0;}
/* 企業様向けページだけ、アイコンと矢印をサブカラーに寄せる */
.cnav--biz .gcard__link{--gcard-c:var(--blue-deep); --gcard-c-on:#26658F;}
/* 目次の帯ボタン。会社概要・採用情報・企業様向けの3ページで共通
（markup は template-parts/pagenav.php） */
.gcard{
/* 2行以上に折り返しても幅が揃うよう、等分の grid で組む。
最低幅（10文字ぶん＋左右のパディングを目安）を確保しつつ、
入る数だけ列を作り、余った幅は均等に分ける */
display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:14px;
margin:0; padding:0; list-style:none;
}
/* 白いカードにアイコン＋文字を中央、矢印だけ右端（中央の見え方を崩さないよう絶対配置）。
ホバー・フォーカスでカードごと塗りに反転する。
⚠️ 色は2つの変数で持つ。--gcard-c は白地に置く見出し・アイコン・矢印の色、
--gcard-c-on は反転したときの地の色で、白ヌキ文字が乗る濃さが要る。
・#237388 … 白地に対して 5.42:1。15px・700 の文字に必要な 4.5:1 を満たす
・#2A8093 … 白ヌキ文字に対して 4.56:1。白文字を乗せたまま淡くできる限界がこのあたりで、
これ以上明るくすると 4.5:1 を割る（そのときは反転時の文字を濃色に変えること）
薄いほうへ振るときは基準に注意。#58b9ca は 2.28:1、#3C97AB は 3.39:1 で、
どちらも文字の基準（4.5:1）には届かない */
.gcard__link{
--gcard-c:#237388;
--gcard-c-on:#2A8093;
position:relative;
/* 見出しはボタンの中心に置きたいので、アイコンと矢印は流れから外して両端へ絶対配置する
（flex で並べると、アイコンのぶんだけ見出しが右にずれる） */
display:flex; align-items:center; justify-content:center;
height:100%; padding:15px 44px;
background:var(--white); border:1px solid var(--line); border-radius:10px;
box-shadow:var(--sh-s);
font-size:15px; font-weight:700; line-height:1.5; color:var(--gcard-c); text-align:center;
/* 入りきらずに折り返すときは、1文字だけ落ちないよう行の長さを揃える */
text-wrap:balance;
transition:background .15s ease, color .15s ease, box-shadow .15s ease;
}
.gcard__ico{
position:absolute; left:16px; top:50%; transform:translateY(-50%);
display:flex; width:20px; height:20px; color:var(--gcard-c);
}
.gcard__ico svg{width:100%; height:100%;}
.gcard__arw{
position:absolute; right:16px; top:50%; transform:translateY(-50%);
width:18px; height:18px; flex:none; color:var(--gcard-c);
}
.gcard__link:hover,
.gcard__link:focus-visible{
background:var(--gcard-c-on); border-color:var(--gcard-c-on);
color:#fff; box-shadow:var(--sh-m);
}
/* 反転したら、アイコンも矢印も地から白ヌキに切り替える */
.gcard__link:hover .gcard__ico,
.gcard__link:hover .gcard__arw,
.gcard__link:focus-visible .gcard__ico,
.gcard__link:focus-visible .gcard__arw{color:#fff;}
@media (prefers-reduced-motion:reduce){
.gcard__link{transition:none;}
}
@media (max-width:900px){
.cnav{padding:var(--s3) 20px 0;}
.cnav--inline{margin-top:var(--s3); padding:0;}
.gcard{gap:8px;}
.gcard > li{min-width:100%;}
/* 1列になるぶん見出しは左そろえ。左のパディングはアイコンの居場所ぶん空ける */
.gcard__link{justify-content:flex-start; padding:14px 44px; font-size:14.5px; text-align:left;}
}
/* ⚠️ 09-10、支給ラフに合わせて全面的に組み替えた。
1項目＝白いカード。中は「番号バッジ＋見出し＋本文」と「写真」の2列で、偶数番は左右を入れ替える。
写真は支給素材の中に英字ラベルとコピーが入っているので、枠・斜線ハッチ・平行四辺形はすべて外した。
節の地は淡いブルーのグラデーション（白いカードを浮かせるため。地色の指定は他ページと違うので注意）
上下は白へぼかして、前後の節との境目に線が出ないようにする。
⚠️ 端は --bg（#FCFCFC）ではなく --white。前後の節の地は実測で #FFFFFF なので、--bg だと境目に段差が出る。
下のぼかしは最後のカードの下の余白だけだと短くて線に見えるので、カードの裏まで長めに取っている */
.cfeat{
padding:var(--sec-gap) 24px var(--s6);
background:linear-gradient(180deg,
var(--white) 0,
#F1F7FC 160px,
#F4F9FD calc(100% - 320px),
var(--white) 100%);
}
.cfeat__inner{max-width:var(--wrap); margin:0 auto;}
.cfeat__lead{
margin:0 0 var(--s4);
font-size:var(--lead-size); line-height:var(--lead-lh); color:var(--ink2); text-align:center;
}
/* カード。白地＋角丸＋淡い影で、地のブルーから浮かせる */
.cfeat__item{
padding:clamp(24px,3vw,40px);
background:var(--white); border-radius:var(--r-l);
box-shadow:0 3px 16px rgba(31,27,22,.06);
}
.cfeat__item+.cfeat__item{margin-top:clamp(20px,2.4vw,32px);}
/* 本文列（左）と写真列（右）。写真は本文の高さに合わせて伸ばす */
.cfeat__row{
display:grid; grid-template-columns:minmax(0,1fr) minmax(0,44%);
gap:clamp(20px,3vw,40px); align-items:center;
}
/* 中見出し。丸いバッジ＋縦罫＋見出し。見出しの下には短い罫を引く */
.cfeat__head{
display:flex; align-items:center; gap:clamp(14px,1.6vw,20px);
margin:0 0 var(--s3);
}
/* 番号バッジ。⚠️ 09-10 支給の見本に合わせて、ベタ塗りから左上→右下のグラデーションにした。
数字はベタ塗りのときより1段細く（700→600）。丸の下に淡い影を落とす */
.cfeat__badge{
flex:none;
display:grid; justify-items:center; align-content:center; gap:3px;
width:72px; height:72px; margin:0;
background:linear-gradient(135deg, #4D96CF 0%, #3D7EC4 52%, #3666B7 100%);
border-radius:50%;
box-shadow:0 4px 10px rgba(45,95,175,.22);
color:#fff; line-height:1;
}
.cfeat__badgeen{font-size:9.5px; font-weight:700; letter-spacing:.16em;}
.cfeat__badgeno{font-size:25px; font-weight:600; letter-spacing:.04em;}
.cfeat__ttl{
margin:0; padding-left:clamp(14px,1.6vw,20px);
border-left:2px solid var(--blue-pale);
font-size:clamp(18px,1.9vw,23px); font-weight:700;
letter-spacing:.04em; line-height:1.55; color:var(--ink);
}
/* 見出しの下の短い罫。ページの他の見出し（.sec__ttl::after）と同じ考え方 */
.cfeat__ttl::after{
content:""; display:block; width:44px; height:3px; border-radius:3px;
margin-top:14px; background:var(--blue);
}
/* 写真。支給素材（7:4）をそのまま角丸で置く */
.cfeat__fig{margin:0;}
/* 09-22、POINTの図版をイラストに差し替えたのに合わせ、白地のイラストがカードの白に溶けないよう
薄いグレーの枠を付けた（社員インタビューのサムネ .vcard__ph と同じ色） */
.cfeat__fig .phbox{border-radius:var(--r-m); overflow:hidden; background:var(--white); border:1px solid #DADADA;}
.cfeat__fig .phbox img{display:block; width:100%; height:auto;}
/* 偶数番目は写真を左に置く。同じ並びが5つ続くと単調になるため。
:nth-of-type なら、前にある h2 と p の数に影響されない */
.cfeat__item:nth-of-type(even) .cfeat__row{
grid-template-columns:minmax(0,44%) minmax(0,1fr);
}
.cfeat__item:nth-of-type(even) .cfeat__fig{grid-column:1; grid-row:1;}
.cfeat__item:nth-of-type(even) .cfeat__body{grid-column:2; grid-row:1;}
/* ⚠️ 直下の p だけに効かせること。番号バッジ（.cfeat__badge）も p なので、
子孫セレクタ（.cfeat__body p）にすると、こちらのほうが強くて
バッジの白文字・行間・余白の指定を上書きしてしまう */
.cfeat__body > p{margin:0 0 1.2em; font-size:15.5px; line-height:2.05; color:var(--ink2);}
.cfeat__body > p:last-child{margin-bottom:0;}
/* 写真・図解が未設置のあいだ出る仮枠。既定はオレンジなので、企業様向けはブルーに寄せる */
.cfeat .phbox--empty,
.csvc .phbox--empty,
.cflow .phbox--empty{background:var(--blue-pale); border-color:var(--blue);}
.cfeat .phbox__note,
.csvc .phbox__note,
.cflow .phbox__note{color:var(--blue-deep);}
.cfeat .phbox__file,
.csvc .phbox__file,
.cflow .phbox__file{color:#7B93A3;}
@media (max-width:900px){
.cfeat{padding:var(--s4) 20px var(--s5);}
.cfeat__lead{font-size:15px; line-height:2;}
/* 決め打ちの改行はSPだと収まらないので自然折り返しに任せる */
.cfeat__lead br{display:none;}
.cfeat__item{padding:20px 18px 22px;}
.cfeat__item+.cfeat__item{margin-top:var(--s3);}
/* 見出しが2〜3行に折り返すので、バッジは少し詰めて上端に合わせる */
.cfeat__head{align-items:flex-start; gap:14px;}
.cfeat__badge{width:58px; height:58px;}
.cfeat__badgeno{font-size:21px;}
.cfeat__ttl{font-size:17.5px; line-height:1.65;}
.cfeat__ttl::after{margin-top:10px;}
/* 横並びだと写真も本文も狭くなるので、1カラムに積む。
並びは「見出し → 本文 → 写真」。見出しが本文列の中にあるので、
写真を先に出すと見出しより上に来てしまう */
.cfeat__row{grid-template-columns:1fr; gap:18px;}
/* 縦に積むので左右の入れ替えは無効にする */
.cfeat__item:nth-of-type(even) .cfeat__row{grid-template-columns:1fr;}
.cfeat__item:nth-of-type(even) .cfeat__fig,
.cfeat__item:nth-of-type(even) .cfeat__body{grid-column:1; grid-row:auto;}
.cfeat__body > p{font-size:15px; line-height:2;}
}
/* --- サービスの種類 --- */
/* 見出しは他ページと同じ型。セクションは .cttl、各サービス名は .gsub。
.gsub の大きな上マージンはここでは効かせない（項目間は .csvc__item で取る） */
.csvc{padding:0 24px 0;}
/* 単独ページ（/client/service/）で使うとき。企業様向けトップでは .cfeat のあとに
続くので上の余白は要らないが、1ページ目のセクションになるときだけ足す */
.csvc--page{padding-top:var(--sec-gap);}
/* ページの最後の節になるとき（いまは /guide/haken/ の「はたらき方の種類」だけ）。
.csvc の下は0にしてあり、節の間隔は次の節の上余白が受け持つ作りなので、
受け手がいないここだけ自分で下の余白を持つ。
/client/service/ は後ろに .ccta が続くので付けない。
※SPは .csvc 側が下に --s5 を持っているので、この指定は効かない（それで足りている） */
.csvc--last{padding-bottom:var(--sec-gap);}
/* ページ冒頭のリード。見出しは .phead が持っているので .cttl の隣接では拾えず、
ここで直接中央そろえにしている（他の子ページのリードと扱いを揃えるため） */
.csvc__intro{
max-width:var(--wrap); margin:0 auto var(--s5);
font-size:var(--lead-size); line-height:var(--lead-lh); color:var(--ink2);
text-align:center; text-wrap:pretty;
}
.csvc__inner{max-width:var(--wrap); margin:0 auto;}
.csvc__item .gsub{margin-top:0;}
.csvc__item+.csvc__item .gsub{margin-top:0;}
.csvc__item+.csvc__item{margin-top:var(--s5);}
/* 中見出しの下に置くキャッチ。太字で、指定の位置で折り返して読ませる */
.csvc__catch{
margin:0 0 var(--s3);
font-size:clamp(16px,1.7vw,19px); font-weight:700; line-height:1.9;
letter-spacing:.03em; color:var(--ink);
}
/* しくみの図。コンテナ幅いっぱいの大きな枠を確保する。
写真と違い塗り足しではなく余白ごと見せたいので、地は白・contain で収める */
.csvc__fig{margin:0 0 var(--s3);}
/* ⚠️ 09-23、囲みの枠（白地＋線＋内側の余白）はやめた。図版そのものを見せる。
高さは「派遣のしくみ」の図（.dptph）とそろえて 540px。幅は図版の比率なりに決まる */
.csvc__fig .phbox{
background:none; border:0; border-radius:0; padding:0;
height:540px;
}
.csvc__fig .phbox img{width:auto; max-width:100%; height:100%; margin-inline:auto; object-fit:contain; display:block;}
/* 「〜とは」にあたる説明。読ませる分量があるので行間は広めに取る */
/* 幅は絞らず、図版やメリット欄と同じセクション幅いっぱいで揃える */
.csvc__lead{
margin:0 0 1.2em;
font-size:16px; line-height:2.05; color:var(--ink2);
}
.csvc__lead:last-of-type{margin-bottom:var(--s3);}
/* 本文・メリットの下に添える注記（※）。一段小さく薄く。
本文の直後に置くときは、本文の下余白（.csvc__lead:last-of-type）を詰めて寄せる */
.csvc__note{margin:calc(var(--s3) * -1 + 8px) 0 var(--s3); font-size:13px; line-height:1.8; color:var(--ink3);}
.csvc__note--in{margin:12px 0 0;}
/* メリットと注意点。横に並べず、上から順に読ませる */
.csvc__grps{display:grid; grid-template-columns:1fr; gap:16px;}
.csvc__grp{padding:22px 24px; border-radius:var(--r-m);}
/* メリットは企業様向けのブルー、注意点は色を持たせず地をグレーに落とす */
.csvc__grp--pro{background:var(--blue-pale);}
.csvc__grp--con{background:#F3F1ED;}
.csvc__grpttl{
margin:0 0 12px;
font-size:15px; font-weight:700; letter-spacing:.04em;
}
.csvc__grp--pro .csvc__grpttl{color:var(--blue-deep);}
.csvc__grp--con .csvc__grpttl{color:var(--ink);}
.csvc__list{display:grid; gap:10px; margin:0; padding:0; list-style:none;}
.csvc__li{
position:relative; padding-left:20px;
font-size:15px; line-height:1.95; color:var(--ink2);
}
/* 行頭の点。文字の1行目の中心に合わせる */
.csvc__li::before{
content:""; position:absolute; left:4px; top:calc(.98em - 3px);
width:6px; height:6px; border-radius:50%;
}
.csvc__grp--pro .csvc__li::before{background:var(--blue);}
.csvc__grp--con .csvc__li::before{background:var(--ink3);}
/* 箇条書きの下の注記（※〜）。本文より一段小さく、行頭は点の後ろの字にそろえる */
.csvc__note{margin:10px 0 0; padding-left:20px; font-size:13px; line-height:1.8; color:var(--ink3);}
@media (max-width:900px){
.csvc{padding:0 20px var(--s5);}
.csvc__item+.csvc__item{margin-top:var(--s4);}
.csvc__lead{font-size:15px; line-height:2;}
/* ⚠️ 09-24、SPは枠の高さを決めず、図を画面幅いっぱいに置く（読めないぶんはタップで拡大）*/
.csvc__fig .phbox{aspect-ratio:auto; height:auto;}
.csvc__fig .phbox img{width:100%; height:auto;}
.csvc__grps{gap:12px;}
.csvc__grp{padding:18px;}
.csvc__li{font-size:14.5px;}
}
/* --- 対応業務 --- */
/* 一覧はあくまで例示。先に「限定していない」と言い切ってから並べる */
/* 上の余白は、直前のバナー（.gbnrsec）が下を0にしているぶんをここで持つ */
.cjob{padding:var(--sec-gap) 24px 0;}
.cjob__inner{max-width:var(--wrap); margin:0 auto;}
.cjob__lead{
margin:0 0 var(--s4); max-width:78ch;
font-size:16px; line-height:2.05; color:var(--ink2);
}
/* 8分類＋注記の枠。1件あたりの文字量に幅があるので、行の高さは揃えず自然に流す */
.cjob__list{
display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
gap:16px; margin:0;
}
/* 分類の枠は dl、最後の注記だけ div。どちらもこの型で並ぶので margin は殺しておく */
.cjob__card{
margin:0; padding:20px 22px;
background:var(--white); border:1px solid #E7E3DC; border-radius:var(--r-m);
}
/* 注記の枠。分類と同じ大きさで並べつつ、地色を落として「例示ではない」ことを見せる。
法令の話なので目立たせすぎず、かといって見落とされない程度の濃さに留めている */
.cjob__card--note{
background:#F7F4EF; border-color:#DFD8CC;
}
.cjob__notettl{
margin:0 0 8px; padding-bottom:8px;
border-bottom:1px solid #E4DDD0;
font-size:15px; font-weight:700; letter-spacing:.04em; color:var(--ink);
}
/* ※ をぶら下げインデントにして、2行目以降が本文の頭に揃うようにする */
.cjob__note{
margin:0 0 8px; padding-left:1em; text-indent:-1em;
font-size:13px; line-height:1.85; color:var(--ink2);
}
.cjob__note:last-child{margin-bottom:0;}
/* 左にアイコン、右に分類名。アイコンの大きさは --cjob-ico ひとつで揃える */
.cjob__dt{
--cjob-ico:34px;
display:flex; align-items:center; gap:12px;
margin:0 0 8px; padding-bottom:8px;
border-bottom:1px solid var(--blue-pale);
font-size:16px; font-weight:700; letter-spacing:.04em; color:var(--blue-deep);
}
.cjob__ico{
flex:none; display:block;
width:var(--cjob-ico); height:var(--cjob-ico);
object-fit:contain;
}
/* 画像が未設置のあいだの空き枠。文字は出さず、位置と大きさだけ確保しておく */
.cjob__ico--empty{
border:1px dashed var(--blue-pale); border-radius:var(--r-s);
background:#F4F9FD;
}
.cjob__dtttl{min-width:0;}
.cjob__dd{margin:0; font-size:14.5px; line-height:1.9; color:var(--ink2);}
@media (max-width:900px){
.cjob{padding:var(--s4) 20px var(--s5);}
.cjob__lead{font-size:15px; line-height:2;}
/* 決め打ちの改行はSPだと収まらないので自然折り返しに任せる */
.cjob__lead br{display:none;}
.cjob__list{grid-template-columns:1fr; gap:12px;}
.cjob__card{padding:18px;}
.cjob__dt{font-size:15px; --cjob-ico:30px; gap:10px;}
.cjob__dd{font-size:14px;}
.cjob__notettl{font-size:14px;}
.cjob__note{font-size:12.5px;}
}
/* --- お申込みの流れ --- */
/* 1ステップ＝1カード。左にイラスト、右に「n. 見出し／主文／補足」を積む */
.cflow{padding:var(--sec-gap) 24px 0;}
.cflow__inner{max-width:var(--wrap); margin:0 auto;}
/* カード間は矢印のぶんだけ広くとる（gap＝三角の高さ＋上下の余白） */
.cflow__list{display:grid; gap:28px; margin:0; padding:0; list-style:none;}
.cflow__item{
position:relative;
display:grid; grid-template-columns:150px minmax(0,1fr);
gap:clamp(20px,3vw,36px); align-items:center;
padding:24px 32px;
background:var(--white); border:1px solid var(--line); border-radius:var(--r-l);
}
/* カードとカードのあいだに下向きの三角。border だけで描くので画像はいらない。
識別色は企業様向け＝ブルー。採用ページはオレンジに差し替える（.rflow 側） */
.cflow__item+.cflow__item::before{
content:"";
position:absolute; left:50%; top:-21px; /* 28pxの隙間に高さ14pxの三角を中央置き */
width:0; height:0;
transform:translateX(-50%);
border-left:11px solid transparent;
border-right:11px solid transparent;
border-top:14px solid var(--blue);
border-bottom:0;
}
/* イラストは正方形で置く。仮枠の既定は4/3なのでここで上書きする */
.cflow__ill .phbox{border-radius:var(--r-m);}
.cflow__ill .phbox--empty{aspect-ratio:1/1; gap:4px;}
.cflow__ill .phbox__note{font-size:12px;}
.cflow__ill .phbox__file{font-size:10.5px;}
/* 番号は大きく、頭の「0」だけ淡くして数字を主役にする。
番号と見出しのあいだの縦罫は、見出し側の border で引いている */
.cflow__step{
display:flex; align-items:center; gap:14px;
margin:0 0 12px;
}
.cflow__no{
flex:none;
font-size:clamp(28px,3vw,34px); font-weight:700;
line-height:1; letter-spacing:.01em; color:var(--blue-deep);
}
.cflow__nozero{color:var(--blue); opacity:.4;}
.cflow__ttl{
padding-left:14px;
border-left:1px solid var(--blue-pale);
font-size:16px; font-weight:700; letter-spacing:.04em; line-height:1.5; color:var(--ink);
}
/* 主文は太字。読み手に何が起きるかをここだけで分かるようにする */
.cflow__main{margin:0 0 6px; font-size:16px; font-weight:700; line-height:1.85; color:var(--ink);}
.cflow__sub{margin:0; font-size:15px; line-height:1.9; color:var(--ink2);}
@media (max-width:900px){
.cflow{padding:0 20px var(--s5);}
/* 横並びだとイラストも本文も狭くなるので、イラストを上に置く */
.cflow__item{grid-template-columns:1fr; gap:16px; padding:20px;}
/* 09-24、イラストは中心に置く（左寄せだと本文とのつながりが弱い） */
.cflow__ill{max-width:120px; margin-inline:auto;}
.cflow__step{gap:12px; margin-bottom:10px;}
.cflow__no{font-size:27px;}
.cflow__ttl{padding-left:12px; font-size:15px;}
.cflow__main{font-size:15px;}
.cflow__sub{font-size:14.5px;}
}
/* --- CTA --- */
/* 大きなピル型のボタンを横に2つ。上辺にまたがる小さなタグで一言添える。
タグは上に半分はみ出すので、囲みには overflow:hidden を掛けないこと */
/* 09-24、下の余白を0から100pxへ。使っているのは /client/service/ だけで、
このすぐ下がフッターになるため、受け手がいない下余白をここで持つ（SPは下の指定が優先） */
.ccta{padding:var(--sec-gap) 24px 100px;}
.ccta__inner{max-width:var(--wrap); margin:0 auto;}
/* ボタンの上の一言。両脇の ＼／ は擬似要素で引いた斜線
（文字で置くと読み上げに乗るうえ、フォントによって角度も太さも揃わない） */
.ccta__catch{
display:flex; align-items:center; justify-content:center; gap:clamp(14px,2vw,26px);
margin:0 0 var(--s3);
font-size:clamp(17px,1.9vw,21px); font-weight:700;
letter-spacing:.04em; line-height:1.6;
color:var(--blue-deep); text-align:center;
}
.ccta__catch::before,
.ccta__catch::after{
content:""; flex:none;
width:2px; height:1.7em; border-radius:2px;
background:var(--blue-deep);
}
.ccta__catch::before{transform:rotate(-20deg);}
.ccta__catch::after{transform:rotate(20deg);}
/* 幅は文字数なりに任せ、行の中央に寄せる。
1fr で引き伸ばすとラベルの短さに対してボタンが間延びする */
.ccta__btns{
display:flex; flex-wrap:wrap; justify-content:center; align-items:stretch;
gap:clamp(20px,3vw,40px);
/* タグがはみ出すぶんの逃げ */
padding-top:16px;
}
/* 見た目はトップの「お近くのお仕事を探す」（.btn--main .jobcat__cta）と同じ。
白フチ＋下に濃いブルーの段差を付けたピル型 */
.ccta__btn{
position:relative;
display:inline-flex; align-items:center; justify-content:center; gap:10px;
padding:20px 48px;
background:var(--blue-deep); color:#fff;
border:3px solid #fff; border-radius:var(--r-full);
font-size:19px; font-weight:600; letter-spacing:.02em;
line-height:1.5; text-align:center;
box-shadow:0 3px 0 #24628B, var(--sh-m);
transition:transform .15s ease, box-shadow .15s ease;
}
.ccta__btn:hover{transform:translateY(-3px); box-shadow:0 6px 0 #24628B, var(--sh-l);}
/* ラベルが短くても貧相にならない下限だけ決めて、上は文字数なりに伸ばす */
.ccta__btn{min-width:min(320px,100%);}
/* 資料ダウンロードは青と白を入れ替えた版。段差の色は深さを保つためそのまま */
.ccta__btn--sub{
background:var(--white); color:var(--blue-deep);
border-color:var(--blue-deep);
}
/* 上辺の中央にまたがるタグ。地は白で抜き、塗りボタンの上でも読めるようにする */
.ccta__tag{
position:absolute; left:50%; top:0; transform:translate(-50%,-50%);
padding:7px 18px; border-radius:var(--r-full);
background:var(--white); border:2px solid #2683E9;
color:var(--blue-deep);
font-size:12.5px; font-weight:700; letter-spacing:.06em; line-height:1;
white-space:nowrap;
}
/* 「すべて無料」の但し書き。ここだけは正確さを優先して小さく添える */
.ccta__note{
margin:var(--s2) 0 0;
font-size:12.5px; line-height:1.9; color:var(--ink3); text-align:center;
}
@media (max-width:900px){
.ccta{padding:0 20px var(--s5);}
.ccta__catch{font-size:17px; gap:12px;}
/* 縦に積む。幅は揃えたいので2つとも同じ上限で伸ばす */
.ccta__btns{flex-direction:column; align-items:center; gap:26px;}
.ccta__btn{width:min(340px,100%); min-width:0; padding:18px 24px; font-size:17px;}
.ccta__tag{font-size:12px; padding:6px 15px;}
}
/* --- よくあるご質問 --- */
/* アコーディオン本体はトップ・FAQページと同じ .faq。
ここでは求職者向けのオレンジを企業様向けのブルーに差し替えるだけ */
.cfaq{padding:var(--sec-gap) 24px var(--s6);}
.cfaq__inner{max-width:var(--wrap); margin:0 auto;}
/* .faq は既定で 860px に絞るが、ここは他セクションと版面を揃える */
.cfaq .faq{max-width:none;}
/* 企業様向けはブルーの吹き出しに差し替える。位置とサイズは共通のまま。
素材の作りも同じ（本体が上から 7〜93px／全高113px）なので、
下げ幅の補正もそのままで合う */
.faq--biz .faq__q::before{background-image:url("assets/img/ico-faq-q-biz.png");}
.faq--biz .faq__q::after{background:var(--blue);}
.faq--biz .faq__item:not([open]) .faq__q::after{
background:
linear-gradient(var(--blue),var(--blue)) center/14px 2px no-repeat,
linear-gradient(var(--blue),var(--blue)) center/2px 14px no-repeat;
}
.faq--biz .faq__a b{font-weight:700; color:var(--ink);}
@media (max-width:900px){
.cfaq{padding:0 20px var(--s5);}
}
/* ============================================================
フッター（サイトマップ型）
============================================================ */
/* ============================================================
フッター上の共通CTA（footer.php・全ページ）
============================================================ */
/* クリーム地の帯に「見出し＋リード」「ボタン」「電話」を横に並べる（09-09 支給ラフ）。
⚠️ ラフの右端にある葉のイラストは素材未支給のため入れていない */
.ftcta{padding:0 24px var(--s6); background:var(--bg);}
/* ⚠️ はじめての方へ（/guide/）だけ地を敷かない。
このページは直前の「お仕事開始までの流れ」も同じ地色なので、
帯を敷いても効かないうえ、節の切れ目だけが二重に見える。
body の is-guide は functions.php の hiro_body_class() が付けている */
.is-guide .ftcta{background:none;}
/* よくあるご質問（/faq/）も地を敷かない（09-22 指定） */
.is-faq .ftcta{background:none;}
/* お知らせ（一覧と記事の詳細）も地を敷かない（09-23 指定） */
.is-news .ftcta{background:none;}
/* 派遣のしくみとはたらき方（/guide/haken/）も同じ。上のセクションが白なので、
地（--bg＝#FCFCFC）を敷くと境目にうっすら帯が出る */
.is-haken .ftcta{background:none;}
/* 企業様向けページ（/client/・/client/service/）も地を敷かない（09-22 指定）。
body の is-biz は functions.php の hiro_body_class() が付けている */
.is-biz .ftcta{background:none;}
/* 上のセクションの中に入れ子で置く版（トップのFAQセクション）。
左右のパディングと下の余白は親のセクションが持つので、上の間隔だけを持たせる */
.ftcta--inflow{padding:0; margin-top:var(--s5);}
.ftcta__inner{
/* 右下の葉（.ftcta__leaf）の位置の基準。⚠️ 葉は角から外へ出るので overflow は掛けない */
position:relative;
display:grid; grid-template-columns:minmax(0,1fr) auto auto;
align-items:center; gap:clamp(20px,2.4vw,36px);
max-width:var(--wrap); margin:0 auto;
/* ⚠️ 3列を版面1100pxに収めるため、余白とボタン・電話の級数は控えめにしている。
ここを広げると左の見出しが折り返す */
padding:clamp(24px,3vw,40px) clamp(24px,3vw,44px);
background:var(--bg2); border-radius:20px;
}
.ftcta__ttl{
margin:0 0 12px;
font-size:clamp(21px,2vw,27px); font-weight:700;
letter-spacing:.02em; line-height:1.4;
/* 09-24、狭い画面で「ご相談くださ／い」と1文字だけ落ちるので文節で折る */
word-break:auto-phrase; line-break:strict;
}
.ftcta__txt{margin:0; font-size:14.5px; line-height:1.9; color:var(--ink2);}
.ftcta__btn{margin:0;}
/* 版面に3列を収めるため、ここだけボタンを一段小さくする */
.ftcta__btn .btn--main{font-size:16px; padding:15px 28px;}
/* 電話は左に縦罫で仕切る */
.ftcta__tel{padding-left:clamp(24px,3vw,44px); border-left:1px solid var(--line);}
.ftcta__num{
display:flex; align-items:center; gap:10px;
font-size:clamp(24px,2.2vw,30px); font-weight:700; letter-spacing:.02em;
color:var(--ink); text-decoration:none; white-space:nowrap;
}
.ftcta__num:hover{color:var(--orange-dark);}
/* 受話器は数字と同じ高さに見せる。絵が viewBox の6割強しか埋めていないので、箱は1.4emにしている */
.ftcta__ico{flex:none; width:1.4em; height:1.4em; color:var(--orange);}
.ftcta__note{margin:4px 0 0; font-size:13px; color:var(--ink3); white-space:nowrap;}
/* パネルの右下からのぞく葉（支給素材）。電話番号にかからない位置で、
角の外へはみ出させる */
.ftcta__leaf{
position:absolute; right:-34px; bottom:-86px;
width:clamp(120px,11vw,178px);
pointer-events:none;
}
.ftcta__leaf img{display:block; width:100%; height:auto;}
@media (max-width:1100px){
/* 3列だとボタンと電話が窮屈になるので、上に文、下にボタンと電話を並べる */
.ftcta__inner{grid-template-columns:auto auto; justify-content:center; gap:24px 40px; text-align:center;}
.ftcta__lead{grid-column:1 / -1;}
.ftcta__txt br{display:none;}
}
@media (max-width:700px){
.ftcta{padding-bottom:var(--s5);}
.ftcta__inner{grid-template-columns:minmax(0,1fr); padding:26px 20px 28px;}
.ftcta__btn .btn{width:100%; justify-content:center;}
/* 縦積みでは縦罫ではなく上の区切り線にする */
.ftcta__tel{padding:18px 0 0; border-left:0; border-top:1px solid var(--line);}
.ftcta__num{justify-content:center;}
/* 縦積みだと本文に重なるので小さくして角へ寄せる */
.ftcta__leaf{right:-14px; bottom:-44px; width:96px;}
}
.footer{
background:var(--bg); color:var(--ink); padding:var(--s4) 24px var(--s1);
/* 直前のセクションが白なので、上辺で切り替わりを示す */
border-top:0.5px solid #eaeaea;
}
.footer__inner{max-width:var(--wrap); margin:0 auto;}
/* 上段：左にロゴ／右にリンク4列、その下の右端にCTAカード */
/* 09-26、ロゴの列は 220px 固定だったのを、ロゴの幅だけに（余ったぶんをリンクの列の間隔に回す） */
.ftop{
display:grid; grid-template-columns:max-content minmax(0,1fr); gap:var(--s5);
padding-bottom:var(--s5);
}
/* 明るい面なのでロゴは白抜きにせず、ブランドカラーのまま出す */
.fbrand__logo{height:75px; width:auto;}
/* 4列。09-26、列を同じ幅で割ると、項目の短い列（会社について）の後ろだけ大きく空き、
長い項目は途中で折り返して、間隔がばらついて見えた。
各列を中身の幅にし、残りを列の間へ均等に配る（space-between）。
幅が足りないときは各列が同じだけ縮んで折り返す（minmax(0, max-content)）。
「トップ」は見出しだけなので、1列目（会社について）の上に積む（.fnav__stack。footer.php） */
.fnav{
display:grid; grid-template-columns:repeat(4, minmax(0, max-content));
justify-content:space-between; gap:var(--s3);
}
.fnav__col{border:0;}
/* 見出しだけの列。 なので、余白は と同じに揃えておく。
下に「会社について」の見出しが続くので、列の中の項目の間隔より一段広く空ける */
.fnav__col--solo .fnav__ttl{margin:0 0 var(--s3);}
/* 列の下に積んだ見出し（お役立ち情報）は、上のリンク一覧と少し離す */
.fnav__col + .fnav__col--solo{margin-top:var(--s2);}
.fnav__ttl{
list-style:none; font-size:15px; font-weight:600; color:var(--ink);
margin-bottom:var(--s2);
}
.fnav__ttl::-webkit-details-marker{display:none;}
/* 見出し自体もその列の代表ページへのリンク。色は見出しのまま、ホバーだけ効かせる */
.fnav__ttl-link{
color:inherit; text-decoration:none;
transition:color .25s ease;
}
.fnav__ttl-link:hover{color:var(--orange);}
.fnav__list{list-style:none; margin:0; padding:0;}
.fnav__list li{margin-bottom:12px;}
.fnav__list a{
position:relative; display:inline-block; padding-left:22px;
font-size:14px; color:var(--ink);
transition:color .25s ease;
}
/* 行頭のダッシュ。2行に折り返しても1行目の高さに合わせる */
.fnav__list a::before{
content:""; position:absolute; left:0; top:.9em;
width:9px; height:1.5px; background:var(--ink3);
transform-origin:left center; /* ホバーで右へ伸びる */
transition:transform .25s ease, background-color .25s ease;
}
.fnav__list a:hover{color:var(--orange);}
.fnav__list a:hover::before{background:var(--orange); transform:scaleX(1.8);}
.fnav__strong{font-weight:600;}
/* 下段：規約・法定表示 */
/* フッターの左右パディングを打ち消して全幅の帯にする */
/* --- 公式SNS --- */
/* フッター最下段（.fbottom）のすぐ上に、見出しとアイコンを1行で並べる。
高さは抑えめにして、上下の細い線で挟む（左右パディングは打ち消して全幅の線に）。
アイコンは各社のブランドカラー。並びは footer.php の $hiro_sns の順 */
.fsns{
margin:var(--s3) -24px 0; padding:10px 24px 12px;
border-top:1px solid #E7E4DE;
border-bottom:1px solid #E7E4DE;
}
.fsns__inner{
display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
gap:clamp(14px,2vw,28px);
max-width:var(--wrap); margin:0 auto;
}
.fsns__ttl{margin:0; font-size:14px; font-weight:700; letter-spacing:.04em; color:var(--ink);}
.fsns__list{
display:flex; align-items:center; gap:clamp(14px,1.8vw,22px);
margin:0; padding:0; list-style:none;
}
.fsns__link{
display:grid; place-items:center;
width:30px; height:30px;
transition:transform .15s ease, opacity .15s ease;
}
.fsns__link:hover{transform:translateY(-2px); opacity:.75;}
.fsns__link svg{width:100%; height:100%;}
/* Instagram だけ SVG 内のグラデーションで塗るので color は効かせない */
.fsns__link--facebook{color:#1877F2;}
.fsns__link--x{color:#000;}
.fsns__link--youtube{color:#FF0000;}
@media (max-width:900px){
.fsns{margin-top:var(--s2); padding:9px 20px 10px;}
.fsns__inner{gap:12px;}
.fsns__ttl{font-size:12.5px;}
.fsns__link{width:27px; height:27px;}
}
/* SNSの帯があるときは、その下辺の線に最下段をそのまま接する */
.fbottom{
margin:var(--s4) -24px 0; padding:var(--s3) 24px;
background:#F1F1F1; text-align:center;
}
.fsns+.fbottom{margin-top:0;}
.fbottom__inner{max-width:var(--wrap); margin:0 auto;}
/* 法定表示。畳まない・埋もれさせない */
.finfo__lic{margin:0 0 var(--s2); font-size:13px; font-weight:600; color:var(--ink);}
/* 区切り線つきで1行に並べる */
.fpolicy{
list-style:none; display:flex; flex-wrap:wrap; justify-content:center;
margin:0; padding:0; font-size:13px; line-height:1.6;
}
.fpolicy li{padding:2px 16px; border-left:1px solid #DCDCDC;}
.fpolicy li:first-child{border-left:0;}
.fpolicy a{color:var(--ink2);}
.fpolicy a:hover{color:var(--orange);}
/* コピーライト帯。フッターの左右パディングを打ち消して全幅にする */
.fcopy{
margin:0 -24px calc(var(--s1) * -1);
padding:14px 24px;
background:var(--orange); color:#fff;
font-size:13px; text-align:center;
}
/* ============================================================
SP固定CTA
============================================================ */
.spcta{
display:none;
position:fixed; left:0; right:0; bottom:0; z-index:60;
gap:10px; padding:10px 12px calc(10px + env(safe-area-inset-bottom));
background:rgba(255,255,255,.94); backdrop-filter:blur(6px);
box-shadow:0 -4px 14px rgba(90,70,40,.10);
}
.spcta a{
flex:1 1 0; display:flex; align-items:center; justify-content:center;
height:50px; border-radius:var(--r-full);
font-size:14px; font-weight:600; text-align:center; line-height:1.3;
}
.spcta__main{flex-grow:2 !important; background:var(--orange); color:#fff;}
.spcta__sub{background:#fff; color:var(--ink); border:2px solid var(--line);}
/* 09-24、求職者向けの並び（footer.php の 'balanced'）。
主ボタンが「ご登録・ご相談はこちら」と長いので、既定の2倍幅では2行に折れてしまう。
隣より少し広い程度（1.25倍）に留め、狭い画面では文字も縮めて、どちらも1行に収める */
.spcta--balanced .spcta__main{flex-grow:1.25 !important;}
.spcta--balanced a{font-size:clamp(12px,3.6vw,14px);}
/* エリアセクションを通り過ぎるまでは隠しておく（JSが .is-hidden を付け外しする）。
display は SP判定に使っているので、隠すのは transform/opacity 側で行う */
.spcta{transition:transform .25s ease, opacity .25s ease;}
.spcta.is-hidden{transform:translateY(120%); opacity:0; pointer-events:none;}
/* ============================================================
英字の大見出し（丸ゴシックを1文字ずつ4色で回す）
============================================================ */
.ttl-en{
/* 1文字ずつ回す4色。参考デザインの黄・桃は白地だと沈むので少し濃くしている */
--c1:var(--orange); --c2:var(--blue); --c3:#D99100; --c4:#E27A96;
display:flex; flex-wrap:wrap; align-items:baseline; justify-content:center;
margin:0;
font-family:"Zen Maru Gothic","Zen Kaku Gothic New",sans-serif;
font-weight:900; line-height:1; letter-spacing:.01em;
font-size:30px;
}
.ttl-en span:nth-child(4n+1){color:var(--c1);}
.ttl-en span:nth-child(4n+2){color:var(--c2);}
.ttl-en span:nth-child(4n+3){color:var(--c3);}
.ttl-en span:nth-child(4n+4){color:var(--c4);}
/* ============================================================
ヒロ・スタッフとは？／3つの特長（対応エリアの下）
============================================================ */
/* --- 導入：見出しを中央に置き、その下に写真＋リード --- */
.aboutus{padding:var(--s6) 24px var(--s5); background:var(--bg);}
.aboutus__inner{display:block;}
/* 見出しブロックはセクション幅いっぱいを使う。英字主役なので左寄せ */
.aboutus__head{margin:0 0 var(--s4);}
.aboutus__cols{
display:grid; grid-template-columns:minmax(0,38%) minmax(0,1fr);
gap:clamp(24px,5vw,72px); align-items:center;
}
.aboutus__ph{margin:0;}
.aboutus__ph img{display:block; width:100%; height:auto;}
.aboutus__ph-empty{
display:flex; align-items:center; justify-content:center;
height:300px;
background:var(--orange-pale); border:2px dashed var(--orange);
border-radius:var(--r-l);
font-size:14px; font-weight:700; letter-spacing:.1em; color:var(--orange-dark);
}
/* 英字を大きく置き、日本語はその下に小さく添える。装飾（マーカー・罫線）は持たせない */
.aboutus__ttl{display:block; margin:0;}
.aboutus__ttl-en{
display:block;
font-size:clamp(30px,4vw,46px); font-weight:600;
letter-spacing:.03em; line-height:1.25;
color:var(--ink);
}
.aboutus__ttl-ja{
display:block; margin-top:14px;
font-size:clamp(13.5px,1.15vw,15px); font-weight:500;
letter-spacing:.06em; line-height:1.9;
color:var(--ink2);
}
.aboutus__lead{
margin:0; text-align:left;
font-size:16px; font-weight:400; line-height:2; color:var(--ink2);
}
/* --- 特長：上端を斜めに切って色面に入る --- */
.feature{
/* 斜めの境をつくるため、帯は clip-path で切って重ねる。
はみ出した分を隠すのと、下のセクションに食い込ませないため overflow:hidden */
--top-slant:80px;
overflow:hidden;
padding:calc(var(--s3) + var(--top-slant)) 0 0; background:#F7E8B7; color:var(--ink);
clip-path:polygon(0 var(--top-slant), 100% 0, 100% 100%, 0 100%);
}
.feature__ttl{
margin:0; padding:0 24px; text-align:center;
font-size:clamp(26px,3vw,38px); font-weight:700; line-height:1.4; letter-spacing:.03em;
}
/* 見出しの中の数字だけオレンジで大きく抜く */
.feature__ttlno{
margin:0 .06em; font-size:1.5em; font-weight:900; line-height:1;
color:var(--orange); vertical-align:-.06em;
}
/* 帯。偶数番は色を一段明るくし、上下の境を斜めに切って交互に見せる */
.feature__band{padding:var(--s5) 24px;}
.feature__band.is-rev{
--slant:56px;
margin:calc(var(--slant) * -1) 0;
padding:calc(var(--s5) + var(--slant)) 24px;
background:#FDF8E8;
/* 上端＝右下がり、下端＝左下がり。境界の向きが交互になる */
clip-path:polygon(0 0, 100% var(--slant), 100% calc(100% - var(--slant)), 0 100%);
}
.feature__item{
display:grid; grid-template-columns:minmax(0,1fr) minmax(0,42%);
gap:clamp(24px,4vw,56px); align-items:center;
}
/* 偶数番は写真を左、テキストを右に入れ替える。
order だけ入れ替えると本文が42%の列に入って細くなるので、列幅も左右で入れ替える */
.feature__band.is-rev .feature__item{grid-template-columns:minmax(0,42%) minmax(0,1fr);}
.feature__band.is-rev .feature__body{order:2;}
/* 番号と見出しを横並びにせず、番号を上に小さく置いて見出しを主役にする。
62px・900 の数字が見出しより目立っていたので、番号は級数を落として
下に短い罫を敷き、ラベルとして扱う */
.feature__head{
display:flex; flex-direction:column; align-items:flex-start; gap:14px;
margin:0 0 var(--s3);
}
/* 「特長｜01 ────」で1セット。番号は %02d で桁を揃えて出している。
太い下線をやめ、番号の右へ細い罫を最後まで引き切る組み方にした。
淡いゼロは使わない（01/02/03 と読めることを優先） */
.feature__no{
display:flex; align-items:center; gap:.55em;
font-size:clamp(26px,2.8vw,34px); font-weight:700; line-height:1;
letter-spacing:.06em; color:var(--orange-dark);
}
/* 番号の右に伸びる罫。行の終わりまで引くことで、番号が行として座る */
.feature__no::after{
content:""; flex:1; height:1px;
background:var(--orange); opacity:.32;
}
/* 「魅力」は細い縦罫で番号と分ける */
.feature__nolabel{
flex:none;
padding-right:.55em;
border-right:1px solid rgba(217,111,0,.35);
font-size:.42em; font-weight:700; letter-spacing:.18em;
color:var(--ink3);
}
.feature__label{
font-size:clamp(21px,2.4vw,29px); font-weight:700; line-height:1.55;
letter-spacing:.04em; word-break:auto-phrase;
}
.feature__txt{margin:0; font-size:15px; line-height:2; color:var(--ink2);}
.feature__ph{
margin:0; overflow:hidden;
border-radius:var(--r-l); box-shadow:var(--sh-m);
}
.feature__ph img{display:block; width:100%; height:100%; object-fit:cover;}
/* 画像未設置のあいだの仮枠。写真を置けば消える */
.feature__ph-empty{
display:flex; align-items:center; justify-content:center;
height:300px;
background:rgba(255,255,255,.55); border:2px dashed var(--orange);
border-radius:var(--r-l);
font-size:14px; font-weight:700; letter-spacing:.1em; color:var(--orange-dark);
}
@media (max-width:900px){
.aboutus{padding:var(--s5) 24px var(--s4);}
.aboutus__head{margin-bottom:var(--s3);}
.aboutus__ttl-ja{margin-top:10px;}
/* 写真と本文も上下に積む。写真は大きくなりすぎないよう上限をつける */
.aboutus__cols{grid-template-columns:1fr; gap:var(--s3);}
.aboutus__ph{max-width:320px; margin:0 auto;}
.aboutus__lead br{display:none;}
.feature{--top-slant:44px; padding-top:calc(var(--s5) + var(--top-slant));}
.feature__band{padding:var(--s4) 24px;}
.feature__band.is-rev{--slant:32px;}
.feature__item,
.feature__band.is-rev .feature__item{grid-template-columns:1fr; gap:var(--s3);}
/* 1カラムでは順序を戻し、写真は常に上 */
.feature__body,
.feature__band.is-rev .feature__body{order:2;}
}
@media (max-width:600px){
.feature__ttl{margin-bottom:var(--s4);}
.feature__head{gap:11px; margin-bottom:var(--s2);}
.feature__no{font-size:23px; gap:.5em;}
.feature__txt{font-size:14.5px; line-height:1.9;}
}
/* ============================================================
職種一覧（FV直下）
============================================================ */
/* 上の境界は両端を大きく丸めて、前のセクションから浮き上がって見せる */
.jobcat{
padding:var(--s7) 24px var(--s6); background:var(--bg2);
border-radius:130px 130px 0 0;
}
.jobcat__head{
display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.35em;
margin:0 0 var(--s2);
font-size:30px; font-weight:700; letter-spacing:.02em;
}
/* 吹き出し型のタグ。下辺中央の小さな三角は clip-path で三角に切っている */
.jobcat__tag{
position:relative;
padding:5px 15px; border-radius:.5em;
background:var(--coral); color:#fff;
font-size:.8em; font-weight:700;
}
.jobcat__tag::after{
content:""; position:absolute; left:50%; bottom:-7px;
width:14px; height:8px; background:var(--coral);
transform:translateX(-50%);
clip-path:polygon(0 0, 100% 0, 50% 100%);
}
.jobcat__conj{font-size:25px; font-weight:700;}
.jobcat__sub{
margin:0 0 var(--s4); text-align:center;
font-size:25px; font-weight:700; letter-spacing:.02em;
}
/* 前半は添え書き扱いで一段落とし、後半のマーカー部分を主役にする */
.jobcat__sublead{font-size:26px; font-weight:600;}
/* 蛍光ペンの下線は .sec__ttl .mark と同じ引き方 */
.jobcat__sub .mark{
font-size:1.16em;
padding:0 .12em;
background-image:linear-gradient(180deg,
transparent 0 62%, #FFEB6B 62% 98%, transparent 98%);
-webkit-box-decoration-break:clone;
box-decoration-break:clone;
}
/* 下端をぼかして「まだ続きがある」感を出し、その上にCTAを重ねる */
.jobcat__wrap{position:relative; padding-bottom:26px;}
.jobcat__wrap::after{
content:""; position:absolute; left:0; right:0; bottom:0; height:210px;
background:linear-gradient(180deg, rgba(253,248,232,0) 0%, var(--bg2) 82%);
pointer-events:none;
}
.jobcat__list{
display:grid; grid-template-columns:repeat(4,1fr); gap:24px;
margin:0; padding:0; list-style:none;
}
.jobcard{display:flex;}
/* 1枚のパネル。キャッチ → 写真（左上に職種ラベル）→ 勤務時間 → 金額 の縦並び */
.jobcard>a{
display:flex; flex-direction:column; width:100%;
padding:22px 18px 24px;
background:var(--white); border:1px solid var(--line); border-radius:20px;
box-shadow:var(--sh-s);
text-align:center;
transition:transform .15s ease, box-shadow .15s ease;
}
.jobcard>a:hover{transform:translateY(-4px); box-shadow:var(--sh-m);}
.jobcard__catch{
margin:0 0 14px;
font-size:15px; font-weight:700; letter-spacing:.06em; line-height:1.5;
color:var(--coral);
}
.jobcard__ph{position:relative; margin:0 0 16px; aspect-ratio:4/3; overflow:hidden;}
.jobcard__ph img{width:100%; height:100%; object-fit:cover;}
/* 職種ラベルは角丸なしの帯。写真の左上に少しだけ内側へ入れて置く */
.jobcard__label{
position:absolute; top:14px; left:14px;
padding:6px 14px;
background:var(--coral); color:#fff;
font-size:13px; font-weight:700; letter-spacing:.04em; white-space:nowrap;
}
/* 金額をパネルの下辺に貼り付け、写真の高さが違っても下が揃うようにする */
.jobcard__shift{margin:auto 0 6px; font-size:14px; font-weight:500; color:var(--ink2);}
.jobcard__pay{
margin:0;
font-size:30px; font-weight:700; letter-spacing:.01em; line-height:1.2;
color:var(--coral);
}
.jobcard__pay span{font-size:17px; margin-left:2px;}
/* ぼかしの上へ引き上げる */
.jobcat__foot{position:relative; z-index:1; margin-top:-104px; text-align:center;}
/* 白枠は .btn--main から継承。ここは寸法と青の地色だけ上書きする */
.jobcat__cta{
font-size:19px; padding:20px 48px;
background:#2683E9;
box-shadow:0 3px 0 #24628B, var(--sh-m);
}
.jobcat__cta:hover{box-shadow:0 6px 0 #24628B, var(--sh-l);}
/* ============================================================
選ばれる3つの理由
============================================================ */
/* この節だけ地色を持たせて、前後の白い面から切り離す。
見出し（--ink）とのコントラストは 10.55:1、白いパネルとの明度差も確保している */
.reason{padding:100px 24px 60px; background:#FBF6EC;}
.reason__eyebrow{margin:0 0 10px; text-align:center; font-size:26px; font-weight:700;}
/* 蛍光ペンの下線は .sec__ttl .mark と同じ引き方。
中央寄せの p に直接敷くと行幅いっぱいに伸びるので、文字は span で囲っている */
.reason__eyebrow .mark{
padding:0 .12em;
background-image:linear-gradient(180deg,
transparent 0 62%, #FFEB6B 62% 98%, transparent 98%);
-webkit-box-decoration-break:clone;
box-decoration-break:clone;
}
.reason__ttl{margin:0 0 60px; text-align:center; font-size:30px; font-weight:700; letter-spacing:.05em;}
/* 蛍光ペンは上のリード（.reason__eyebrow）と同じ引き方 */
.reason__ttl .mark{
padding:0 .12em;
background-image:linear-gradient(180deg,
transparent 0 62%, #FFEB6B 62% 98%, transparent 98%);
-webkit-box-decoration-break:clone;
box-decoration-break:clone;
}
/* 丸アイコンのタブ。選択中だけ地色を濃くして、下のパネルと結びつける */
.rtab{
display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(20px,4vw,56px);
margin:0 0 var(--s5); padding:0; list-style:none;
}
.rtab__item{width:clamp(150px,19vw,240px);}
.rtab__btn{
display:flex; flex-direction:column; align-items:center; gap:14px;
width:100%; padding:0; background:none; border:0; cursor:pointer;
font-family:inherit; color:var(--ink); text-align:center;
}
.rtab__ico{
display:grid; place-items:center; overflow:hidden;
width:clamp(150px,19vw,240px); aspect-ratio:1; border-radius:50%;
/* 図版は背景が抜けているので、丸の地色がそのまま見える。
黄色のロゴ色に寄せた淡いクリームで、下の白いパネルから浮かせている */
/* 押せるボタンだと分かるよう、上から光が当たったグラデと足元の影で立体に見せる。
0 6px 0 が「厚み」、その下のぼかしが落ち影、inset の白が上辺のハイライト */
background:linear-gradient(180deg,#FEF9EC 0%,#FDF2D8 55%,#F6E2B6 100%);
box-shadow:
0 6px 0 #E7D2A3,
0 12px 18px rgba(122,90,20,.18),
inset 0 2px 0 rgba(255,255,255,.95);
transition:background .15s ease, box-shadow .15s ease, transform .15s ease;
}
/* 図版は横長。円で切ると端の文字やモチーフが落ちるので全体を収めつつ、
人物が浮かないよう下辺を円の底に寄せる。左右はほぼいっぱいまで使う */
.rtab__ico img{
width:100%; height:100%;
object-fit:contain; object-position:bottom;
padding:6% 3% 0;
/* 下辺を軸に1.2倍。円からはみ出た左右は切り落とされる */
transform:scale(1.2); transform-origin:bottom center;
}
/* 2枚目だけ人物が小さく見えるので、さらに1.2倍（計1.44倍）寄せる */
.rtab__item:nth-child(2) .rtab__ico img{transform:scale(1.44);}
/* 仮枠は親の円いっぱいに広がる。大きさを変えるときは .rtab__ico 側の width を触ること */
.rtab__ico-empty{
display:grid; place-items:center; width:100%; height:100%;
border:2px dashed var(--orange); border-radius:50%;
font-size:14px; font-weight:700; letter-spacing:.08em; color:var(--orange-dark);
}
.rtab__label{font-size:15px; font-weight:700; line-height:1.6;}
/* ホバーで少し持ち上げ、押した瞬間は沈む。厚みの変化で押せることを伝える */
.rtab__btn:hover .rtab__ico{
background:linear-gradient(180deg,#FFFCF3 0%,#FBE9C4 55%,#F3D9A4 100%);
box-shadow:
0 9px 0 #E7D2A3,
0 16px 24px rgba(122,90,20,.22),
inset 0 2px 0 rgba(255,255,255,.95);
transform:translateY(-3px);
}
.rtab__btn:active .rtab__ico{
box-shadow:
0 2px 0 #E7D2A3,
0 4px 8px rgba(122,90,20,.16),
inset 0 3px 6px rgba(122,90,20,.14);
transform:translateY(4px);
}
/* 選択中は丸の地色を落とし、押し込んだ状態で止めて現在地を示す */
.rtab__btn.is-active .rtab__ico{
background:linear-gradient(180deg,#F9D89A 0%,#F5C97A 55%,#E9B45C 100%);
box-shadow:
0 2px 0 #D9A548,
0 5px 10px rgba(122,90,20,.2),
inset 0 3px 6px rgba(122,90,20,.16);
transform:translateY(4px);
}
/* キーボード操作でも押せる場所だと分かるようにする */
.rtab__btn:focus-visible{outline:none;}
.rtab__btn:focus-visible .rtab__ico{
outline:3px solid var(--orange); outline-offset:4px;
}
.rtab__btn:hover .rtab__label{color:var(--orange-dark);}
/* 端末の設定で動きを控える場合は、浮き沈みだけ止める */
@media (prefers-reduced-motion: reduce){
.rtab__ico{transition:background .15s ease, box-shadow .15s ease;}
.rtab__btn:hover .rtab__ico{transform:none;}
}
/* 選択中の理由の詳細。白い角丸パネルに、左が文章・右が図版 */
.rpanel{
display:grid; grid-template-columns:minmax(0,1fr) minmax(0,32%);
gap:clamp(24px,4vw,56px); align-items:center;
padding:clamp(28px,4vw,52px) clamp(24px,4vw,56px);
background:var(--white); border-radius:14px;
}
.rpanel[hidden]{display:none;}
/* 見出しの左に短い罫を引く */
.rpanel__ttl{
position:relative; margin:0 0 var(--s3); padding-left:38px;
font-size:clamp(20px,2.3vw,26px); font-weight:700; line-height:1.5;
}
.rpanel__ttl::before{
content:""; position:absolute; left:0; top:.62em;
width:22px; height:3px; border-radius:2px; background:var(--coral);
}
/* 見出しの左にイラストを置く版。既定の短い罫は出さず、イラストに役目を渡す */
.rpanel__ttl--ico{
display:flex; align-items:center; gap:clamp(10px,1.2vw,16px);
padding-left:0;
}
.rpanel__ttl--ico::before{content:none;}
.rpanel__ttlico{flex:none; width:clamp(30px,3.2vw,42px); height:auto;}
.rpanel__txt{margin:0; font-size:15px; line-height:2.1; color:var(--ink2);}
.rpanel__note{margin:var(--s3) 0 0; font-size:13px; line-height:1.9; color:var(--ink3);}
.rpanel__ill{margin:0; display:grid; place-items:center;}
.rpanel__ill img{width:100%; height:auto;}
.rpanel__ill-empty{
display:grid; place-items:center; width:100%; aspect-ratio:1;
border:2px dashed var(--orange); border-radius:14px;
font-size:12px; font-weight:700; letter-spacing:.08em; color:var(--orange-dark);
}
/* ============================================================
スタッフの声（トップ）
※ カードの .voice / .voice__card は「はじめての方へ」と共通のもの
============================================================ */
/* 地は上の「5つの体制」から続くクリーム（09-04 支給デザイン）*/
/* 左右の24pxはセクション側に持たせる。.secwrap の内側に入れると版面が 1100 から
その分だけ狭まり、前後のセクションと左右の端がそろわなくなるため */
/* 下だけ余白を倍に。このセクションだけ末尾に送りナビ（.vnav）が入るので、
次のセクションとの間が詰まって見えるため */
.homevoice{padding:90px 24px 168px; background:var(--bg2); overflow-x:clip;}
/* 左に見出し＋リード、右に円グラフ（09-09 支給ラフ）*/
.homevoice__head{
display:grid; grid-template-columns:minmax(0,40%) minmax(0,1fr);
gap:clamp(24px,3.5vw,52px); align-items:center;
margin:0 auto var(--s5);
}
.homevoice__graph{max-width:none; margin:0;}
.homevoice__graph img{display:block; width:100%; height:auto;}
.homevoice__eyebrow{margin:0 0 10px; font-size:17px; font-weight:700; letter-spacing:.06em; color:var(--ink2);}
.homevoice__ttl{margin:0 0 20px; font-size:31px; font-weight:700; letter-spacing:.04em; line-height:1.5;}
.homevoice__read{margin:0; font-size:15px; line-height:2.05; color:var(--ink2);}
/* リードの下に置くいろんな世代のイラスト（支給素材） */
.homevoice__people{display:block; margin-top:var(--s3); max-width:470px;}
.homevoice__people img{display:block; width:100%; height:auto;}
/* --- 利用者の声の見出し --- */
/* ⚠️ 支給ラフの「Voice」は手書き文字。書体を持っていないので斜体で寄せているだけ */
.homevoice__en{
margin:0; flex:none;
font-family:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif;
font-size:26px; font-style:italic; font-weight:600; letter-spacing:.06em;
color:#E38A7E;
}
/* 見出し・カード・送りのナビを収める白いパネル（09-09 支給ラフ）。
⚠️ 送りの丸ボタンはこのパネルの左右の縁に絶対配置するので、
position:relative を外さないこと。はみ出しを切る overflow も掛けないこと */
.voicepanel{
position:relative;
padding:34px 40px 46px;
background:var(--white); border-radius:24px;
box-shadow:var(--sh-m);
}
/* パネルの中に入ったので、カード列は画面端まで流さず枠内で送る。
⚠️ セレクタに .homevoice を足して詳細度を上げてある。1280px以上では
レーン用の .homevoice .voice が画面端まで流す指定を持っていて、
そちらのほうがCSSの後ろにあるため、同じ詳細度だと打ち消せない */
.homevoice .voicepanel .voice{
margin-inline:0; padding-inline:0;
scroll-padding-inline:0;
}
/* パネルの中にちょうど3枚収まる幅にする（すき間は var(--s3)＝24px が2つ）。
狭い画面ではカードが細くなりすぎるので、901px以上だけに効かせる */
@media (min-width:901px){
.homevoice .voicepanel .voice__card{width:calc((100% - 48px) / 3);}
}
.voicehead{
display:flex; align-items:baseline; flex-wrap:wrap; gap:8px 20px;
margin:0 auto var(--s3);
}
.voicehead__ttl{margin:0; font-size:27px; font-weight:700; letter-spacing:.04em;}
.voicehead__read{margin:0; font-size:14px; color:var(--ink2);}
/* --- スタッフの声：送りのナビ --- */
/* 左右の丸ボタンを両端に、ドットを中央に置く1行。
ドットの数は JS が「止まれる位置の数」から作る */
.vnav{
display:flex; align-items:center; justify-content:center; gap:20px;
max-width:var(--wrap); margin:var(--s3) auto 0;
}
/* 丸ボタンはパネルの左右の縁に置く。ドットだけが .vnav の流れに残る */
.voicepanel .vnav__btn{
position:absolute; top:50%; transform:translateY(-50%);
}
.voicepanel .vnav__btn--prev{left:-21px;}
.voicepanel .vnav__btn--next{right:-21px;}
.vnav__btn{
flex:none; display:grid; place-items:center;
width:42px; height:42px; border-radius:50%;
background:var(--white); border:1px solid var(--line); color:var(--orange-dark);
box-shadow:0 2px 8px rgba(90,70,40,.10);
cursor:pointer;
transition:background .15s ease, border-color .15s ease, opacity .15s ease;
}
.vnav__btn svg{width:14px; height:14px;}
.vnav__btn:hover{background:var(--orange-pale); border-color:var(--orange);}
/* 端まで送ったら押せないことを見せる */
.vnav__btn.is-off{opacity:.3; pointer-events:none;}
.vnav__dots{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:9px;}
.vnav__dot{
width:9px; height:9px; padding:0;
background:#E0D8CC; border:0; border-radius:50%;
cursor:pointer; transition:background .15s ease, transform .15s ease;
}
.vnav__dot:hover{background:#C9BCAC;}
.vnav__dot.is-on{background:var(--orange); transform:scale(1.15);}
/* 1枚目の左端は .voice の指定（版面 --wrap に合わせる）と同じなので、ここでの上書きは不要 */
@media (max-width:900px){
.homevoice{padding:64px 20px 60px;}
.homevoice__head{grid-template-columns:minmax(0,1fr); gap:var(--s3); margin-bottom:var(--s4);}
.homevoice__ttl{font-size:26px; margin-bottom:14px;}
.homevoice__read{font-size:14.5px; line-height:1.95;}
.homevoice__read br{display:none;}
.homevoice__people{margin-top:var(--s2); max-width:370px;}
.homevoice__graph{max-width:100%;}
/* 09-22、SPでは見出しのすぐ下にグラフを置く（見出し → グラフ → リード → 人物イラスト）。
⚠️ .homevoice__lead を display:contents にして、中の3つを .homevoice__head の
グリッド項目として並べ替えている。順番は order で指定する */
.homevoice__lead{display:contents;}
.homevoice__ttl{order:1;}
.homevoice__graph{order:2;}
.homevoice__read{order:3;}
.homevoice__people{order:4;}
.homevoice__en{font-size:22px;}
.voicehead{gap:6px 16px; margin-bottom:var(--s3);}
.voicehead__ttl{font-size:23px;}
.voicepanel{padding:24px 20px 34px; border-radius:18px;}
/* パネルの外にボタンを置く幅が残らないので、内側の縁に寄せる */
.voicepanel .vnav__btn--prev{left:-14px;}
.voicepanel .vnav__btn--next{right:-14px;}
.vnav{margin-top:var(--s3); gap:14px;}
.vnav__btn{width:34px; height:34px;}
.vnav__btn svg{width:12px; height:12px;}
.vnav__dots{gap:7px;}
.vnav__dot{width:8px; height:8px;}
}
@media (max-width:600px){
.homevoice__ttl{font-size:28px;}
}
/* ============================================================
ご利用の流れ（横スクロールのSTEPカード）
※ 「はじめての方へ」の .flow とは別物。混ざらないよう .stepflow で分けている
============================================================ */
/* スライダーは画面幅いっぱいに流したいので、左右の余白は見出し側だけに持たせる */
/* 地は --orange-pale をさらに薄めたもの。前後の白い面（--bg）とは
わずかに差が残る程度に留めている（明度 0.946 に対して --bg は 0.973） */
/* ============================================================
特長3：自社システム（DX）
============================================================ */
/* 地は上の口コミから続くクリーム。下の「はたらくまでの流れ」で白に戻る */
/* ⚠️ 下の余白は詰めてある。この下は「はたらくまでの4ステップ」の帯（.stepflow__band）で、
絵の上半分が透過＝見た目は余白なので、ここで空けると空きが二重になる */
.dxsys{padding:0 24px var(--s3); background:var(--bg2);}
/* POINT 03 はこのセクションの最後。パネルの下マージンはセクションの余白と重なるので持たせない */
.ptlead--3{margin-bottom:0;}
/* 左＝スマホ画面、右＝できることの一覧。画面は原寸を保ちたいので固定幅寄りにする */
/* 09-09、POINT 03 のパネル（.ptlead--3）の中に入れた。上のリード文との間だけ空ける */
.dxsys__inner{
display:grid; grid-template-columns:minmax(0,300px) minmax(0,1fr);
gap:clamp(24px,4vw,56px); align-items:start;
margin-top:var(--s4);
}
/* スマホに添えるパンダ＋吹き出し。
ここは900px以下の姿＝スマホの下に、吹き出しを上（尾は下向き）にして縦に積む。
PCの姿はこのブロックの下の min-width:901px で上書きしている。
尾は .ptlead__bubble と同じ「三角2枚重ね」で、向きだけ変えたもの */
.dxpanda{
display:flex; flex-direction:column; align-items:center;
margin-top:var(--s3);
}
.dxpanda__bubble{
position:relative;
margin:0 0 12px; padding:14px 22px;
background:var(--white);
border:2px solid #D9E7F5; border-radius:24px;
font-size:15px; font-weight:700; line-height:1.7; letter-spacing:.02em;
text-align:center;
}
.dxpanda__bubble::before,
.dxpanda__bubble::after{
content:""; position:absolute; left:50%; margin-left:-11px;
width:0; height:0; border:11px solid transparent;
}
.dxpanda__bubble::before{bottom:-22px; border-top-color:#D9E7F5;}
.dxpanda__bubble::after{bottom:-18px; border-top-color:var(--white);}
/* ⚠️ 09-09 に絵を差し替えた。前の素材より横長（578×460）なので、
同じ150pxのままだと顔が小さく見える。幅で合わせている */
/* ⚠️ 09-22、スマホを持った全身の立ち姿（dx-panda-2.png／431×521）に差し替え。
縦長になったので、900px以下（全身を見せる置き方）は 196px → 150px に縮めた */
.dxpanda__fig{display:block; width:150px;}
.dxpanda__fig img{display:block; width:100%; height:auto;}
/* できることの一覧（.dxsys__list）の右角に置くタップの手。
素材は指先が左上を向いているので、そのままの向きで角に添えると
パネルの内側を指す形になる。押せることを伝える動きとして、
指す向き（左上）へ小さく往復させる */
.dxtap{
position:absolute; top:20px; right:-4px;
display:block; width:58px;
animation:dxtap 1.6s ease-in-out infinite;
}
.dxtap img{display:block; width:100%; height:auto;}
@keyframes dxtap{
0%, 100%{transform:translate(0, 0);}
50% {transform:translate(-6px, -6px);}
}
@media (prefers-reduced-motion:reduce){
.dxtap{animation:none;}
}
/* PCではスマホの上辺から上半身だけ出す（トップの .ptlead__panda と同じ作り）。
スマホの上に空いているのは96pxしかないので、吹き出しは上ではなく左に並べ、
高さがパンダの見せるぶんに収まるようにしている */
@media (min-width:901px){
.dxsys__ph{
/* パンダの絵の高さ（幅120px × 460/578 ≒ 96px）。
⚠️ 09-09 に絵を差し替えて縦横比が変わっている。
.dxpanda__fig の width を変えたら、この値も計算し直すこと */
/* ⚠️ 09-22、全身の絵（431×521）に差し替え。120 × 521/431 ≒ 145px */
--dx-fig-h:145px;
/* スマホにパンダを重ねる量。いまの絵は全身なので、下 52px をスマホの裏へ沈めて
上半身（約93px）だけをのぞかせる。前の絵は下で切られていたので 0 だった */
--dx-overlap:52px;
position:relative; z-index:0;
margin-top:calc(var(--dx-fig-h) - var(--dx-overlap));
}
/* パンダを左に、吹き出しをその右に並べる。吹き出しは列の右へはみ出すが、右の白いパネルとの隙間（gap 56px）に収まる。
z-index:-1 でスマホの裏へ回し、下半身をスマホに隠させる */
.dxpanda{
position:absolute; bottom:calc(100% - var(--dx-overlap)); left:56px; z-index:-1;
/* 列（300px）に押し込めると吹き出しが折り返してしまうので、
内容ぶんの幅を保ったまま右の隙間へはみ出させる */
width:max-content;
flex-direction:row; align-items:flex-start; gap:8px;
margin:0;
}
.dxpanda__fig{order:-1; width:120px;}
.dxpanda__bubble{
margin:0; padding:11px 16px;
font-size:13px; line-height:1.6;
}
/* 尾を左向きに差し替える */
.dxpanda__bubble::before,
.dxpanda__bubble::after{
left:auto; margin-left:0;
top:50%; bottom:auto; margin-top:-11px;
border-top-color:transparent;
}
.dxpanda__bubble::before{left:-22px; border-right-color:#D9E7F5;}
.dxpanda__bubble::after{left:-18px; border-right-color:var(--white);}
}
/* ⚠️ 09-24、900px以下もPCと同じ「スマホの上辺から上半身だけ出す」形にした
（それまではスマホの下に、吹き出し→パンダの順で縦に積んでいた）。
絵は一回り小さく（150px→112px）、吹き出しはパンダの左に並べる */
@media (max-width:900px){
.dxsys__ph{
/* 絵の高さ＝112px × 521/431 ≒ 135px。そのうち下 55px をスマホの裏へ沈める */
--dx-fig-h:135px;
--dx-overlap:55px;
position:relative; z-index:0;
/* 上の本文とパンダの頭が触れないよう、はみ出すぶん＋24pxの空きを取る */
margin-top:calc(var(--dx-fig-h) - var(--dx-overlap) + 24px);
}
.dxpanda{
position:absolute; bottom:calc(100% - var(--dx-overlap)); right:0; z-index:-1;
/* 09-24、吹き出しはパンダの顔の高さに合わせて上へ（もとは中央そろえ） */
flex-direction:row; align-items:flex-start; justify-content:flex-end; gap:8px;
width:100%; margin:0;
}
.dxpanda__fig{order:1; width:112px;}
.dxpanda__bubble{
order:0; margin:0; padding:10px 14px;
font-size:12.5px; line-height:1.6; border-radius:16px;
/* パンダの頭より少し上に出す */
position:relative; top:-18px;
}
/* 尾はパンダ（右）を指して右向きに差し替える */
.dxpanda__bubble::before,
.dxpanda__bubble::after{
left:auto; margin-left:0;
top:50%; bottom:auto; margin-top:-10px;
border-width:10px; border-top-color:transparent;
}
/* 尾は吹き出しの下寄りから、右下のパンダの顔を指す */
.dxpanda__bubble::before{right:-20px; top:auto; bottom:10px; border-left-color:#D9E7F5;}
.dxpanda__bubble::after{right:-16px; top:auto; bottom:12px; border-left-color:var(--white);}
}
/* 6枚の画面を切り替える枠。表示していないものは hidden 属性で消す（JS側で付け外し） */
.dxsys__ph img{display:block; width:100%; height:auto;}
.dxsys__pane[hidden]{display:none;}
/* 画像が届くまでの仮枠。支給素材のスマホの枠線（419×768）を敷き、
その画面の中にファイル名を出す */
.dxsys__ph-empty{
display:flex; align-items:center; justify-content:center;
width:100%; aspect-ratio:419 / 768;
/* 枠のPNGは画面の中が透過。裏に回したパンダが透けないよう地の色を敷いて塞ぐ。
⚠️ 09-09にこの枠がパネル（.ptlead--3）の中へ入ったので、地はクリームではなく白 */
background:url("assets/img/system-frame.png") no-repeat center / contain, var(--white);
color:var(--ink3); font-size:12px; font-weight:700;
}
/* 白いパネルの中に2列 */
.dxsys__list{
display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
/* ⚠️ すき間は0。区切り線をマスの境界にぴったり引くため、間隔は
.dxitem のパディングで作っている（gap を戻すと線が境界からずれる）*/
gap:0;
position:relative;
margin:0; padding:22px 20px; list-style:none;
/* ⚠️ 親（.ptlead--3）が白なので、白いままだと箱に見えない。
ごく淡い地と細い枠で区切っている */
background:var(--bg);
border:1px solid var(--line-soft); border-radius:var(--r-l);
}
/* 項目はまるごとボタン（タブ）。押すと左のスマホ画面が入れ替わる。
ボタンの見た目は消して、中身の並びだけ元のまま残す */
/* マスの境界の区切り線。2列×3行なので、
左の列（奇数番目）に右線、1〜2行目（1〜4番目）に下線を引く。
⚠️ 一覧の最後にはタップの手（.dxtap）も で入っている。
.dxitem を条件に足してあるので、そちらには線が付かない */
.dxitem{padding:22px 20px;}
.dxitem:nth-child(odd){border-right:1px solid var(--line-soft);}
.dxitem:nth-child(-n+4){border-bottom:1px solid var(--line-soft);}
.dxitem__btn{
display:block; width:100%;
margin:0; padding:0;
background:none; border:0; border-radius:var(--r-m);
font:inherit; color:inherit; text-align:left; cursor:pointer;
}
.dxitem__btn:focus-visible{outline:3px solid var(--orange); outline-offset:4px;}
/* 選択中は行頭のチェックをオレンジにして、どれを見ているか分かるようにする */
.dxitem__btn[aria-selected="true"] .dxitem__check{color:var(--orange);}
/* アイコンは列の幅に対して中央ぞろえ。見出しと本文は左そろえのまま */
.dxitem__ico{display:flex; justify-content:center; margin:0 0 18px;}
.dxitem__ico img{display:block; width:72px; height:auto;}
/* 仮枠は列の幅いっぱいの正方形。イラストが入る面積をそのまま見せる */
.dxitem__ico-empty{
display:flex; align-items:center; justify-content:center;
width:100%; aspect-ratio:1;
background:#F4F0EA; border:2px dashed var(--line-strong); border-radius:var(--r-m);
color:var(--ink3); font-size:11px; font-weight:700;
}
/* 見出しの行頭に丸矢印。2行目以降は矢印の下に潜り込ませず、字下げしてそろえる */
.dxitem__ttl{
display:flex; align-items:flex-start; gap:10px;
margin:0 0 10px; font-size:17px; font-weight:700; line-height:1.6;
}
.dxitem__check{flex:none; width:20px; height:20px; margin-top:.3em; color:var(--pink-deep); transition:color .15s ease;}
.dxitem__txt{display:block; font-size:14px; line-height:1.9; color:var(--ink2);}
/* 09-24、スマホでは1列になり幅に余裕があるので一段上げる */
@media (max-width:900px){
.dxitem__txt{font-size:14.5px;}
}
@media (prefers-reduced-motion:reduce){
.dxitem__check{transition:none;}
}
@media (max-width:900px){
.dxsys{padding-bottom:var(--s5);}
.dxsys__inner{grid-template-columns:1fr; gap:var(--s4);}
/* ⚠️ margin:0 auto にしないこと。上のパンダぶんの margin-top（.dxsys__ph）が消える */
/* ⚠️ width:100% を外さないこと。左右の margin が auto だと、この枠は中身の幅まで縮む。
まだ読み込んでいない画面（2枚目以降は押されるまで読み込まない）は幅を持たないので、
切り替えた瞬間に枠が幅0・高さ0につぶれ、下の一覧が跳ね上がってから戻っていた（10-02） */
.dxsys__ph{width:100%; max-width:260px; margin-inline:auto;}
.dxsys__list{gap:var(--s4) var(--s3); padding:32px 24px;}
}
@media (max-width:900px){
/* ⚠️ 09-24、SPは縦積みをやめて横スライドにし、スマホの絵の下辺に少し重ねる。
6項目を縦に並べると、どれが押せるのか分からないまま画面が長くなっていたため */
.dxsys__list{
display:flex; grid-template-columns:none; gap:0;
overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
scrollbar-width:none;
position:relative; z-index:2;
/* スマホの絵に重ねるぶん、上へ引き上げる（節の既定の間隔40px＋重ねる70px） */
margin-top:-110px;
/* 左右は画面の端まで流す。中身の始まりは版面の左に合わせる */
margin-inline:calc(50% - 50vw);
border-radius:0; border-left:0; border-right:0;
padding:14px 20px;
scroll-padding-left:20px; scroll-padding-right:20px;
}
.dxsys__list::-webkit-scrollbar{display:none;}
.dxitem{
flex:none; width:min(210px, 62vw);
scroll-snap-align:start;
padding:10px 14px;
}
/* 区切りは縦線1本（横並びになるので、上下の線は要らない） */
.dxitem:nth-child(odd),
.dxitem:nth-child(-n+4){border-right:0; border-bottom:0;}
.dxitem + .dxitem{border-left:1px solid var(--line-soft);}
/* 右上のタップの手は、横スライドでは置き場がないので出さない */
.dxtap{display:none;}
/* 送りボタン。一覧の下、右寄せで2つ並べる */
.dxsys__nav{display:flex; justify-content:flex-end; gap:10px; margin-top:12px;}
.dxsys__navbtn{
display:grid; place-items:center;
width:40px; height:40px; padding:0; border-radius:50%; cursor:pointer;
background:var(--white); color:var(--blue-deep); border:1.5px solid var(--blue-deep);
box-shadow:var(--sh-s);
transition:background-color .15s ease, color .15s ease, opacity .15s ease;
}
.dxsys__navbtn svg{width:18px; height:18px;}
.dxsys__navbtn.is-off{opacity:.3; pointer-events:none; box-shadow:none;}
}
/* 帯からはみ出すイラストは上下には出したいので、横だけ clip で押さえる
（overflow:hidden だと縦も切れてしまう） */
.stepflow{position:relative; padding:0 0 90px; background:var(--bg); overflow-x:clip;}
/* 帯の透過部分の地。⚠️ 帯そのものに background を敷くと道まで隠れてしまうので、
道より後ろのレイヤーに別で敷いている。重なりは下から
この地（0）→ 道と車（.lane の 1）→ 帯の絵（.stepflow__band の 2）。
⚠️ .stepflow に z-index は付けないこと。付けると重なりの土俵が分かれて、
道（.lanewrap の中）がこの地の下へ回り込んでしまう。
高さは帯の絵と同じ（--flow-head-h ＝ 絵の縦横比から出した vw 値）*/
.stepflow::before{
content:""; position:absolute; z-index:0;
left:0; right:0; top:0; height:var(--flow-head-h);
background:var(--bg2);
}
/* --- 見出しの帯 --- */
/* 上はクリーム（上のセクションから続く）、下半分だけベージュの帯。
帯の上にビル・パンダのイラストが乗り、帯の下辺が地面になる */
/* ⚠️ 09-09、見出しの帯（.stepflow__head）と、その上に乗せていた飾り（.stepflow__deco）は
支給の1枚絵に置き換えた。ビル・足あと・パンダの位置指定もこのとき外している。
戻すときは、この差分にある .stepflow__head / __headin / __ttl / __deco 一式を復活させること */
/* 帯の1枚絵。画面幅いっぱいに伸縮する（可変）。
⚠️ 高さは幅なりに決まるので、道の伸ばし量（--flow-head-h）も vw で持たせてある。
絵を差し替えて縦横比が変わったら、:root の --flow-head-h も計算し直すこと */
/* ⚠️ 道（.lane）は z-index:1 でこの帯の上まで伸びてくる。
帯を最前面（z-index:2）にして、道と車が木立の後ろへ入っていくように見せる。
⚠️ 絵の上半分は透過。地は敷いていないので、後ろの道と、
上のセクションのクリーム／このセクションの白がそのまま透ける */
/* ⚠️ 09-10、絵の上にキャッチと人物を重ねる置き場を padding-top であけている。
この高さ（--flow-scene-h）は :root の --flow-head-h にも足し込んであるので、
片方だけ触ると道と地の下辺が風景の地面線からズレる。必ず両方あわせて直すこと */
.stepflow__band{
position:relative; z-index:2;
display:block; width:100%;
padding-top:var(--flow-scene-h);
}
/* 次のセクションとの境目をゆるやかな弧にする（09-09 支給ラフ）。
絵の下辺をまっすぐ切らず、次のセクションの地（--bg）が中央で少し高くせり上がる形。
⚠️ 色は .stepflow の背景と同じにすること。違う色にすると帯の下に線が出る。
弧の深さは height。border-radius の「50% ... / 100% ...」で、
上辺が幅いっぱいの半楕円になる（height を上げるほど弧が深くなる）*/
.stepflow__band::after{
content:"";
/* ⚠️ 左右を少しはみ出させること。楕円の端は接線が縦になるので、
画面の縁でちょうど終わらせると角が立って見える */
position:absolute; left:-2%; right:-2%; bottom:-1px;
height:clamp(26px,3vw,52px);
background:var(--bg);
border-radius:50% 50% 0 0 / 100% 100% 0 0;
}
.stepflow__band img{display:block; width:100%; height:auto;}
/* 光っている版の風景。同じ寸法の絵を真上に重ね、.is-lit でふわっと出す。
⚠️ z-index は付けないこと（上の「風景の img に z-index を与えて前に出すのは不可」と同じ理由）。
position だけなら、背面の人物（z-index:-1）より前・下辺の弧（::after）より後ろに収まる */
.stepflow__band-lit{
position:absolute; left:0; bottom:0;
opacity:0; transition:opacity .6s ease;
pointer-events:none;
}
.stepflow__band.is-lit .stepflow__band-lit{opacity:1;}
@media (prefers-reduced-motion:reduce){
.stepflow__band-lit{transition:none;}
}
/* --- 帯に載せるキャッチと人物（09-10 支給素材） --- */
/* どちらも中央そろえ。幅は vw で伸縮させつつ、広い画面で大きくなりすぎないよう上限を切る */
/* キャッチは町の絵の上の空（透過部分）に置く。
⚠️ 09-22、町の絵の差し替えで、人物の頭の上から測る置き方をやめた（人物は右下へ移動）。
空は「置き場（--flow-scene-h）＋絵の上から約34%（＝19vw）」。その中ほどに来るよう top で置く */
.stepflow__catch{
position:absolute; z-index:2;
top:calc(var(--flow-scene-h) * 0.6 + 3vw);
left:50%; transform:translateX(-50%);
width:clamp(165px,24vw,440px); margin:0;
}
/* 人物は風景（.stepflow__band-bg）の背面に回し、下半身を草に埋める。
⚠️ 背面へ回すのは z-index:-1。帯そのもの（.stepflow__band）が z-index:2 で
重なりの土俵をつくっているので、マイナスでもこの帯の中だけで下がり、
後ろの道やセクションの地より下へは抜けない。
⚠️ 風景の img に z-index を与えて前に出すのは不可。下辺の弧（::after）が
img より下に回り込んで、次のセクションとの境目の弧が消える。
絵の下辺より --flow-people-sink の半分ぶん下へ沈めて、腰から下を草に隠す。
⚠️ 沈めたぶんは帯からはみ出して次のセクションの地に出てしまうので、clip-path で
切り落としている（帯に overflow:hidden は掛けないこと。下辺の弧＝::after が
左右に2%はみ出す作りなので、角が立ってしまう）。
切る量は沈めた量より多いが、余分に切れるのは草に隠れている範囲なので見た目は変わらない */
/* ⚠️ 上の説明は 09-10〜09-22 の .stepflow__people（flow-people.png）のもの。
09-22 に右下の町の人たち（.stepflow__crowd）へ差し替えたので、いまは使っていない */
/* ビルを見上げる町の人たち。風景の手前・右下に置き、足元は帯の下辺で切る。
⚠️ z-index は付けない（位置指定だけ）。風景の光る版と同じく、
風景より前・下辺の弧（::after）より後ろに収まるので、足元が弧で自然に隠れる。
絵の人物の下端は画像の高さの 92.5%（670/724）でまっすぐ切れているので、
img を下へずらして帯の下辺（＝枠の下辺）より下に沈め、はみ出しは枠で切る。
7.5% で切り口がちょうど下辺。09-22「もう少し下げて」で 18% にして、腰のあたりまで沈めている */
.stepflow__crowd{
position:absolute; right:0; bottom:0;
width:clamp(380px, 60vw, 1130px);
overflow:hidden;
pointer-events:none; user-select:none;
}
.stepflow__crowd img{transform:translateY(18%);}
.stepflow__crowd-on{
position:absolute; left:0; top:0;
opacity:0; transition:opacity .6s ease;
}
/* 光る前の絵は、光ったら消す。残しておくと笑顔の絵の透過部分から心配顔が透けて見える。
⚠️ display:none ではなく opacity で消すこと。-off は枠の高さを決めている（-on は重ねているだけ）ので、
流れから外すと枠がつぶれて人物ごと見えなくなる */
.stepflow__crowd-off{transition:opacity .6s ease;}
.stepflow__band.is-lit .stepflow__crowd-on{opacity:1;}
.stepflow__band.is-lit .stepflow__crowd-off{opacity:0;}
@media (prefers-reduced-motion:reduce){
.stepflow__crowd-on,
.stepflow__crowd-off{transition:none;}
}
/* SPは置き場を広げ、キャッチと人物を画面幅なりに大きくする */
@media (max-width:600px){
:root{--flow-scene-h:26vw;}
/* 09-24、スマホでは手書きのキャッチが小さすぎたので広げる（43vw→68vw／375pxで約255px）。
風景の上辺と人物のあいだに収まる位置に上げている */
.stepflow__catch{width:min(68vw, 320px); top:calc(var(--flow-scene-h) * 0.42 + 2vw);}
.stepflow__crowd{width:78vw;}
/* SPは下辺の弧（::after）が相対的に深く、PCと同じだけ沈めると頭しか残らない */
.stepflow__crowd img{transform:translateY(9%);}
}
/* --- 見出し --- */
/* 帯の絵（z-index:2）と後ろの道（z-index:1）より前に出す。
⚠️ 下の余白はここでは持たない。横並びの一覧（.stepflow__list--row）が
自前で上の余白（--s6）を持っているので、二重に空く */
.stepflow__ttlwrap{
position:relative; z-index:3;
padding-top:clamp(28px, 4vw, 56px);
}
/* 見出しの下のオレンジの短い線。他の節（.entryhero__ttl など）と同じ 64×4px */
.stepflow__ttlwrap .sec__ttl::after{
content:""; display:block; width:64px; height:4px; border-radius:4px;
margin:20px auto 0; background:var(--orange);
}
/* --- ステップの一覧（2026-09-10 の確定稿で4→5ステップ） --- */
/* 既定は縦積み（左に画像／右に番号＋見出し＋本文）。
/guide/ の「就業までの流れ」（.gflow）もこの型をそのまま使っている */
.stepflow__list{margin:0; padding:0 24px; list-style:none;}
.stepflow__item{
position:relative;
display:grid; grid-template-columns:minmax(0,40%) minmax(0,1fr);
gap:clamp(24px,4vw,56px); align-items:center;
}
.stepflow__item:not(:last-child){padding-bottom:40px;}
/* 送りの三角。本文（右カラム）の真下に落とす。
色は主張させずグレーで。ステップの主役は番号と見出しなので、
送りの矢印はオレンジで拾わない */
.stepflow__item:not(:last-child)::after{
content:""; position:absolute; bottom:10px; left:70%;
width:51px; height:22px; transform:translateX(-50%);
background:#D4D4D4;
clip-path:polygon(0 0, 100% 0, 50% 100%);
}
/* 画像は四角のまま。奇数と偶数で下地の色を替える。
平行四辺形に切り抜くなら clip-path:polygon(11% 0, 100% 0, 89% 100%, 0 100%) を足す */
/* ⚠️ 09-09、支給の絵（背景を抜いたイラスト）に差し替えたので、枠をやめた。
色地・角丸・切り取りは持たせず、絵をそのまま置く。
高さだけ揃えて、絵は中に収める（object-fit:contain）*/
.stepflow__ill{
/* ⚠️ block にしておくこと。grid ＋ place-items:center だと中の img が
自動高さの扱いになり、height:100% が枠の高さで止まらず溢れる */
display:block;
margin:0; height:230px;
color:var(--ink3); font-size:13px; font-weight:700; letter-spacing:.1em; text-align:center;
}
/* --- 横並び（トップのみ／09-04 支給デザイン） --- */
/* 画像を上・文字を下に積んだカードを横に並べ、.voice と同じく画面端まで流して
右で見切らせる。送りの三角は横並びでは意味が変わるので出さない */
.stepflow__list--row{
display:flex; gap:var(--s4); overflow-x:auto;
padding:var(--s6) 0 50px;
padding-inline:max(24px, calc(50vw - var(--wrap) / 2));
scroll-padding-inline:max(24px, calc(50vw - var(--wrap) / 2));
scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
scrollbar-width:none;
}
/* 見出しが上に付いたときは、--s6（96px）だと空きすぎるので詰める */
.stepflow__ttlwrap + .stepflow__list--row{padding-top:var(--s4);}
.stepflow__list--row::-webkit-scrollbar{display:none;}
.stepflow__list--row .stepflow__item{
display:block; flex:none; width:clamp(250px, 26vw, 310px);
padding-bottom:0; scroll-snap-align:start;
}
.stepflow__list--row .stepflow__item::after{content:none;}
/* 代わりに、カードとカードのあいだへ右向きの三角を置く（縦積みの下向きと同じ役割）。
色は縦積みと同じグレー。送りの印なので、オレンジでは拾わない。
位置はカードの隙間の中央、高さはイラスト（190px）の中央にそろえる。
⚠️ left はカードの隙間（.stepflow__list--row の gap）の半分。
gap を変えたらここも同じ変数に直すこと（三角が隙間の中央からずれる） */
.stepflow__list--row .stepflow__item+.stepflow__item::before{
content:""; position:absolute; left:calc(var(--s4) / -2); top:95px;
width:0; height:0; transform:translate(-50%,-50%);
border-top:16px solid transparent;
border-bottom:16px solid transparent;
border-left:14px solid #D4D4D4;
border-right:0;
}
.stepflow__list--row .stepflow__ill{margin-bottom:20px; height:190px;}
/* カード幅に収めるため、番号・見出しは縦積みのときより一回り小さくする */
.stepflow__list--row .stepflow__no{font-size:34px;}
.stepflow__list--row .stepflow__step-ttl{font-size:17px; padding-left:12px;}
.stepflow__list--row .stepflow__txt{font-size:14px; line-height:1.9;}
/* --- 就業後のフォロー --- */
/* ステップの番号の外に置く別立ての節（09-10 支給ラフ）。
淡いベージュの帯の中に、見出し＋白いカードを置き、カードの右にパンダを立たせる。
⚠️ いまトップでは出していない（front-page.php から after => false）。/guide/ 専用ではないので、
トップで出すことになったときも同じ見え方になるよう、ここに一式まとめてある */
.stepflow__after{
max-width:var(--wrap); margin:var(--s5) auto 0;
padding:clamp(24px,3vw,32px) clamp(20px,2.5vw,32px) clamp(28px,3vw,36px);
background:#FDF8F1; border-radius:var(--r-l);
}
.stepflow__after .gsub{margin-top:0; margin-bottom:var(--s2);}
/* 白いカード。右のパンダのぶんだけ内側に余白を取る（900px以下ではパンダを下に回すので戻す）*/
.stepflow__after-card{
position:relative;
display:flex; flex-direction:column; justify-content:center;
/* パンダ（120px幅＝約142px高）＋吹き出し（約64px）＋あいだの14px が
カードの中に収まる高さを確保する */
min-height:236px;
padding:clamp(24px,3vw,34px) clamp(22px,2.5vw,36px);
padding-right:210px;
background:var(--white); border-radius:var(--r-l);
box-shadow:0 2px 10px rgba(31,27,22,.05);
}
/* 1行目。ここだけオレンジで一回り大きく出して、枠の頭を立てる */
.stepflow__after-lead{
margin:0 0 14px;
font-size:clamp(17px,1.9vw,20px); font-weight:700; line-height:1.6; letter-spacing:.02em;
color:var(--orange-dark);
}
.stepflow__after-txt{margin:0 0 10px; font-size:15px; line-height:1.95; color:var(--ink2);}
.stepflow__after-txt:last-of-type{margin-bottom:0;}
/* カードの下に置く文字リンク。トップの「5つの体制」へ送る。
ボタンにはせず、下線＋矢印の文字リンクにしている（この節の主役はCTAではなく説明のため）*/
.stepflow__after-link{margin:16px 0 0;}
.stepflow__after-link a{
display:inline-flex; align-items:center; gap:6px;
font-size:15px; font-weight:700; letter-spacing:.02em;
color:var(--orange-dark); text-decoration:underline; text-underline-offset:4px;
}
.stepflow__after-link a:hover{text-decoration:none;}
.stepflow__after-link svg{width:13px; height:13px; flex:none;}
/* パンダはカードの右端に立たせる。下辺はカードの底にそろえる */
.stepflow__after-panda{
position:absolute; right:28px; bottom:0;
display:block; width:120px;
}
.stepflow__after-panda img{display:block; width:100%; height:auto;}
/* 吹き出しはパンダの上。作りは他のパンダ（.cpanda__bubble）と同じ、白地＋2pxの枠＋三角2枚の尾 */
.stepflow__after-bubble{
position:absolute; left:50%; bottom:calc(100% + 14px); transform:translateX(-50%);
padding:10px 16px;
background:var(--white); border:2px solid #F3DDBE; border-radius:20px;
font-size:13px; font-weight:700; line-height:1.5; letter-spacing:.02em;
color:var(--ink); text-align:center; white-space:nowrap;
}
.stepflow__after-bubble::before,
.stepflow__after-bubble::after{
content:""; position:absolute; left:50%; margin-left:-9px;
width:0; height:0; border:9px solid transparent;
}
.stepflow__after-bubble::before{bottom:-18px; border-top-color:#F3DDBE;}
.stepflow__after-bubble::after{bottom:-15px; border-top-color:var(--white);}
@media (max-width:900px){
/* パンダは本文の横に置けないので、下に回して中央に置く。
下の余白は「パンダ（110px幅＝約130px高）＋あいだ14px＋吹き出し約52px」ぶん取る */
.stepflow__after-card{
min-height:0;
padding-right:clamp(22px,2.5vw,36px); padding-bottom:210px;
}
.stepflow__after-panda{right:50%; transform:translateX(50%); width:110px;}
.stepflow__after-bubble{font-size:12px; padding:8px 14px;}
}
.stepflow__cta{margin-top:var(--s5); text-align:center;}
/* 枠の高さいっぱいに広げる。比率差は左右で切り抜いて吸収する */
/* ⚠️ 枠で切らなくなったので、幅・高さは枠いっぱいに取ったうえで
contain で中に収める。max- だけだと枠から溢れて下の見出しに重なる */
.stepflow__ill img{display:block; width:100%; height:100%; object-fit:contain;}
/* 絵が未支給のときの仮枠。体裁は他のページの仮枠（.phbox--empty）に合わせて、
オレンジの破線＋淡い地に「イラスト」とファイル名を出す。
⚠️ 高さは .stepflow__ill のまま（縦積み230px／横並び190px）なので、絵が入っても位置がずれない */
.stepflow__ill--empty{
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
background:var(--orange-pale); border:2px dashed var(--orange); border-radius:var(--r-l);
}
/* 仮枠のときに出すファイル名 */
.stepflow__ill small{display:block; margin-top:6px; font-size:11px; font-weight:600; letter-spacing:.02em;}
/* 番号まわりは企業様向けの .cflow__step と同じ組み方。
番号は大きく、頭の「0」だけ淡くし、見出しとのあいだに細い縦罫を引く。
色だけは求職者向けのオレンジ系に置き換えている（ブルーはこの面に合わないため） */
.stepflow__stephead{display:flex; align-items:center; gap:14px; margin:0 0 12px;}
.stepflow__no{
flex:none;
font-size:48px; font-weight:700;
line-height:1; letter-spacing:.01em; color:var(--orange-dark);
}
.stepflow__nozero{color:var(--orange); opacity:.4;}
.stepflow__step-ttl{
padding-left:14px;
border-left:1px solid var(--orange-pale);
font-size:24px; font-weight:700; line-height:1.5;
letter-spacing:.04em; color:var(--ink); word-break:auto-phrase;
}
.stepflow__txt{margin:0; font-size:15px; line-height:2; color:var(--ink2);}
@media (max-width:900px){
.stepflow{padding:0 0 72px;}
.stepflow__list{padding:0 20px;}
.stepflow__item{grid-template-columns:1fr; gap:var(--s2);}
.stepflow__item:not(:last-child){padding-bottom:32px;}
.stepflow__item:not(:last-child)::after{left:50%; bottom:6px; width:45px; height:19px;}
.stepflow__ill{height:190px;}
/* 指定は 48px / 24px。狭い画面ではそのままだと重いので少しだけ落とす */
.stepflow__no{font-size:40px;}
.stepflow__step-ttl{font-size:20px; padding-left:12px;}
/* 帯のイラストは幅が足りず見出しに重なるので、狭い画面では引っ込める */
/* 直前の .stepflow__list の一括指定に上書きされるので、ここでも書き直す */
.stepflow__list--row{
padding:var(--s5) 0 4px;
padding-inline:max(20px, calc(50vw - var(--wrap) / 2));
}
.stepflow__list--row .stepflow__item{width:clamp(230px, 62vw, 280px);}
}
@media (max-width:600px){
.stepflow__txt{font-size:14.5px; line-height:1.9;}
}
/* ============================================================
よくあるご質問（トップ）
※ 中身の .faq / .faq__item は「はじめての方へ」と共通のもの
============================================================ */
.homefaq{padding:90px 24px; background:var(--bg);}
.homefaq__eyebrow{margin:0 0 10px; text-align:center; font-size:17px; font-weight:700; letter-spacing:.06em; color:var(--ink2);}
.homefaq__ttl{margin:0 0 54px; text-align:center; font-size:30px; font-weight:700; letter-spacing:.05em;}
.homefaq__foot{margin-top:38px; text-align:center;}
/* トップと企業様向けページのFAQは、質問ごとの枠をやめて点線の区切りだけにする。
下層の「よくあるご質問」ページは一覧性を優先して従来どおり枠つき。
初期状態で開いておく指定（open 属性）は front-page.php / page-client.php 側 */
.homefaq .faq__item,
.homefaq .faq__item[open],
.faq--biz .faq__item,
.faq--biz .faq__item[open]{
margin-bottom:0;
background:transparent;
border:0;
border-bottom:2px dotted var(--line-strong);
border-radius:0;
}
.homefaq .faq__item:last-child,
.faq--biz .faq__item:last-child{border-bottom:0;}
/* 開いた項目の問いに敷いていた面も、枠がないと浮いて見えるので外す */
.homefaq .faq__item[open] .faq__q,
.faq--biz .faq__item[open] .faq__q{background:transparent;}
@media (max-width:900px){
/* 10-02 指定で下の余白を 72px → 0 に。すぐ下のフッター前CTAとの間が空きすぎていたため */
.homefaq{padding:64px 20px 0;}
.homefaq__ttl{font-size:30px;}
.homefaq__ttl{margin-bottom:36px;}
}
@media (max-width:600px){
.homefaq__ttl{font-size:28px;}
}
/* ============================================================
働き方の例（3つの理由から続けて、地色を濃いコーラルへ落とす）
============================================================ */
.usecase{
position:relative;
padding:0 24px 90px;
background:var(--bg);
}
/* 上のカード群から続いていることを示す下向きの三角 */
.usecase__arw{
display:block; width:0; height:0; margin:0 auto;
border-left:56px solid transparent;
border-right:56px solid transparent;
border-top:44px solid var(--coral);
}
.usecase__grid{
display:grid; grid-template-columns:1fr 1fr;
gap:40px; align-items:center;
padding-top:34px;
}
.usecase__phone{justify-self:end; width:300px; line-height:0;}
.usecase__phone img{width:100%; height:auto;}
.usecase__bubbles{margin:0 0 38px; padding:0; list-style:none;}
/* 白ヌキの吹き出し。枠は細く、影でわずかに浮かせる。
左下のしっぽは正方形を回して2辺だけ枠線を残し、先端だけ丸めて描いた線に近づけている */
.usecase__bubbles li{
position:relative; display:block; width:max-content; max-width:100%;
margin-bottom:16px; padding:15px 34px;
background:var(--white);
border:1px solid rgba(240,120,92,.42); border-radius:999px;
font-size:22px; font-weight:500; line-height:1.45; letter-spacing:.05em;
}
.usecase__bubbles li::after{
content:""; position:absolute; left:32px; bottom:-7px;
width:12px; height:12px; background:var(--white);
border-right:1px solid rgba(240,120,92,.42);
border-bottom:1px solid rgba(240,120,92,.42);
border-bottom-right-radius:3px;
transform:rotate(53deg) skew(9deg,9deg);
}
/* 少しずつ右へ送って、視線が上から下へ流れるようにする */
.usecase__bubbles li:nth-child(2){margin-left:26px;}
.usecase__bubbles li:nth-child(3){margin-left:52px;}
/* 強調は色と太さだけ。敷きや下線を足すと吹き出しの中がうるさくなる */
.usecase__bubbles b{font-weight:700; color:var(--coral);}
.usecase__lead{
margin:0;
font-size:30px; font-weight:700; line-height:1.5; letter-spacing:.02em;
color:var(--ink);
}
/* ============================================================
ABOUT／SERVICE／INFORMATION 共通の幅コンテナ
============================================================ */
.secwrap{position:relative; z-index:1; max-width:var(--wrap); margin:0 auto;}
/* --- ABOUT --- */
.about{
position:relative; overflow:hidden;
padding:var(--s7) 24px var(--s6);
background:var(--bg); color:var(--ink);
text-align:center;
}
.about__ttl{margin-bottom:var(--s4);}
.about__lead{
margin:0;
font-size:19px; font-weight:600;
line-height:2.4; letter-spacing:.04em;
}
/* 写真3枚を大きさ・形・傾きを変えて重ねる */
.collage{
position:relative;
margin-top:var(--s6);
display:flex; align-items:center; justify-content:center;
}
.collage__ph{margin:0; flex:none; overflow:hidden; background:#fff;}
.collage__ph img{width:100%; height:100%; object-fit:cover;}
.collage__ph--l{
width:min(360px,27vw); aspect-ratio:4/3;
border:7px solid var(--yellow); border-radius:28px;
transform:rotate(-4deg); margin-right:-3%;
}
.collage__ph--c{
position:relative; z-index:2;
width:min(330px,24vw); aspect-ratio:1;
border:8px solid var(--orange); border-radius:50%;
transform:translateY(-34px);
}
.collage__ph--r{
width:min(360px,27vw); aspect-ratio:4/3;
border:7px solid var(--pink); border-radius:50%;
transform:translateY(28px); margin-left:-3%;
}
/* 落書き。写真の隙間に散らす */
.collage__doodle{position:absolute; width:54px; height:54px;}
.collage__doodle--1{top:-6px; left:12%; color:var(--yellow); transform:rotate(-12deg);}
.collage__doodle--2{top:34%; right:4%; color:var(--orange); transform:rotate(9deg);}
.collage__doodle--3{bottom:2%; left:30%; color:var(--green); transform:rotate(6deg);}
.collage__dot{position:absolute; width:14px; height:14px; border-radius:50%; background:var(--yellow); opacity:.8;}
.collage__dot--1{top:16%; left:2%;}
.collage__dot--2{bottom:20%; right:16%;}
.collage__dot--3{top:6%; right:26%;}
/* --- SERVICE --- */
.service{position:relative; overflow:hidden; padding:var(--s6) 24px var(--s7); background:var(--bg); color:var(--ink);}
.service__grid{
display:grid; grid-template-columns:1.02fr .98fr;
gap:80px; align-items:center;
}
/* 高さは比率で決める。中の2枚は絶対配置でずらして重ねる */
.service__figs{position:relative; aspect-ratio:5/4;}
.service__ph{position:absolute; margin:0; overflow:hidden; border-radius:26px;}
.service__ph img{width:100%; height:100%; object-fit:cover;}
.service__ph--back{
width:76%; height:76%; left:0; top:0;
transform:rotate(-3deg); box-shadow:var(--sh-l);
}
.service__ph--front{
width:74%; height:74%; right:0; bottom:0;
transform:rotate(2.5deg); box-shadow:var(--sh-l);
}
.service__body .ttl-en{justify-content:flex-start;}
.service__txt{
margin:var(--s3) 0 var(--s4);
font-size:16px; font-weight:500;
line-height:2.3; letter-spacing:.03em;
color:var(--ink2);
}
.pillbtn{
display:inline-flex; align-items:center; justify-content:space-between; gap:24px;
min-width:290px; padding:19px 32px;
background:var(--orange); color:#fff; border-radius:var(--r-full);
font-size:16px; font-weight:700; letter-spacing:.04em;
box-shadow:0 3px 0 var(--orange-dark), var(--sh-m);
transition:transform .15s ease, box-shadow .15s ease;
}
.pillbtn svg{width:17px; height:17px; flex:none; opacity:.85;}
.pillbtn:hover{transform:translateY(-3px); box-shadow:0 6px 0 var(--orange-dark), var(--sh-l);}
/* ============================================================
INFORMATION（白地）
============================================================ */
.info{padding:var(--s7) 24px;}
.info__grid{
display:grid; grid-template-columns:1fr 1fr;
gap:70px; align-items:center;
}
.info__label{
display:inline-block; margin:0 0 var(--s6);
padding:7px 16px; border-radius:5px;
background:var(--yellow); color:var(--ink);
font-size:14px; font-weight:700; letter-spacing:.16em;
}
.info__link{display:block; width:max-content; max-width:100%;}
.info__link+.info__link{margin-top:var(--s5);}
.info__link .ttl-en{
justify-content:flex-start;
font-size:30px;
transition:transform .15s ease;
}
.info__link:hover .ttl-en{transform:translateX(6px);}
.info__arw{
align-self:flex-start; flex:none;
width:.3em; height:.3em; margin-left:.14em;
color:#EE8FA4;
}
.info__ja{
display:block; margin-top:12px;
font-size:15px; font-weight:700; letter-spacing:.08em; color:#C4547A;
}
/* 2枚を角丸＋太い黄色フチで重ねる（参考デザインの型） */
.info__figs{position:relative; aspect-ratio:5/4;}
.info__ph{position:absolute; margin:0; overflow:hidden; border-radius:30px; border:8px solid var(--yellow);}
.info__ph img{width:100%; height:100%; object-fit:cover;}
.info__ph--back{width:80%; height:72%; left:0; top:0;}
.info__ph--front{width:72%; height:72%; right:0; bottom:0;}
/* ============================================================
レスポンシブ
============================================================ */
@media (max-width:1180px){
/* ナビ以外が消えるのは900px以下。その手前でロゴ・ナビ・ボタン2つが押し合うので、
この帯だけ余白と文字を詰めて1行に収める */
:root{--header-h:74px;}
.header{--header-py:14px; padding:var(--header-py) 16px; gap:14px;}
.gnav{gap:14px; font-size:13px;}
.gnav--front{gap:16px; font-size:13px;}
.gnav--front::before{margin-right:2px;}
.header__actions{gap:8px;}
.header__biz{font-size:13px; padding:9px 14px;}
.header__cta{font-size:13px; padding:11px 16px;}
/* 1180pxの枠より画面が狭くなったら、スマホは画面の右端に合わせる（見切れさせない）。
下の余白は街並みの帯（幅の 87/1366）に連れて縮める */
.fv__inner{min-height:max(52vw,580px); padding:calc(var(--header-h) + 3.4vw) 20px 9vw;}
/* コンテンツ幅の外側の余りが無くなるので、左右にはみ出しているものを内側へ寄せる。
吹き出しは枠の内側、パンダははみ出しを詰め、スマホは少し左へ */
.fvsearch{--fvphone-r:34px;}
/* 画面右の余りが無くなるので、かたまりの中心をスマホの中心より少し左へ寄せる */
.fvpanda{left:-16%; right:-8%;}
.fvbub__item--1{left:8%;}
.fvbub__item--2{left:25%;}
.fvbub__item--3{left:75%;}
.fvbub__item--4{left:92%;}
.jobcat__list{grid-template-columns:repeat(3,1fr);}
.usecase__phone{width:250px;}
.usecase__bubbles li{font-size:19px; padding:12px 26px;}
.usecase__bubbles li:nth-child(2){margin-left:18px;}
.usecase__bubbles li:nth-child(3){margin-left:36px;}
.usecase__lead{font-size:30px;}
.reason__eyebrow{font-size:21px;}
.reason__ttl{font-size:30px;}
.rtab{gap:clamp(16px,3vw,32px);}
.about{padding-top:var(--s6);}
.jobcat__head{font-size:27px;}
.jobcat__conj{font-size:20px;}
.jobcat__sub{font-size:21px;}
.about__lead{font-size:16px;}
.service__grid{gap:56px;}
.info__grid{gap:56px;}
.info__link .ttl-en{font-size:30px;}
}
@media (max-width:1000px){
/* ボタン2つが残る最後の帯。ナビの矢印を外して、5項目とボタンを1行に収める */
.gnav--front .gnav__chev{display:none;}
}
@media (max-width:900px){
/* 09-23、画面が狭いときは「ヘッダー右側（電話番号・ボタン2つ）はそのまま残し、
ナビだけを消す」方針。ナビの項目はハンバーガーメニュー（.hmenu）に入れてある。
ナビが消えて場所が空くので、1400px以下で隠していた電話番号もここでは出す */
.gnav--front{display:none;}
.header__tel{display:flex;}
/* 09-24、押せる範囲を44×44pxに広げる（線の見た目は変えない） */
.hmenu__btn{display:flex; width:44px; height:44px; padding:0; margin-right:-6px;}
.header__cta{font-size:13px; padding:10px 16px;}
/* SPのリード文。PCの16px/2.1に対して、画面幅なりに少し詰める（09-24 に全ページ共通化） */
:root{--header-h:68px; --lead-size:15px; --lead-lh:2;}
.gnav--front{gap:20px; font-size:13px;}
.gnav--front .gnav__chev{display:none;}
/* PCと同じく上下同値で見出しを中心に置く。街並みの帯のぶんの逃げも同じ考え方 */
.phead{padding:calc(6.37vw + 28px) 20px;}
.phead .crumb--in-hero{top:18px; padding:0 20px;}
/* 09-24 指定。下端の最小値を30px→24pxに下げ、パンくず・英字サブとのすきまを空ける。
clamp の 4.4vw が 24px を上回るのは545px幅からなので、実際に効くのはそれより狭い画面。
⚠️ 色分けのあるページ（.phead__ttl--split）は一回り小さい別の指定を持っているので、
大きさはそのまま。ここで上書きすると色分けページだけ字が大きくなってしまう */
.phead__ttl{margin:15px 0;}
.phead__ttl:not(.phead__ttl--split){font-size:clamp(24px,4.4vw,39px);}
/* SPは写真を小さくして、はみ出す量も控えめにする */
.phead--fig{--phead-fig-w:clamp(96px,26vw,140px);}
.phead__fig{right:20px; bottom:calc(var(--phead-fig-w) * -0.22);}
.phead--fig .phead__inner{padding-right:calc(var(--phead-fig-w) + 16px);}
/* SPは絵を小さくし、見出し側に右の逃げをつくって重ならないようにする */
/* SPはヒーローの左右パディングが20pxなので、そちらに揃える */
.phead__ill{width:clamp(70px,15vw,90px); right:20px;}
.phead--ill .phead__inner{padding-right:clamp(70px,15vw,90px);}
/* FVは縦積み。見出し→パンダ→吹き出し→スマホ の順。
スマホの足元はそのまま街並みの帯に乗せる */
.fv__inner{
/* 順番を入れ替えるので flex column にする */
display:flex; flex-direction:column; align-items:center;
min-height:0;
/* ⚠️ 下の余白はスマホの絵の場所。絵は検索窓の子（＝並びの外）に移したので、
ここで高さを空けておかないと吹き出しの上に乗ってしまう。
1.53 は絵の縦横比（751 ÷ 491）、86px は吹き出しとのすきま。
⚠️ 2026-09-11 にスマホの絵をもとの版へ戻したので 1.13 → 1.53。絵を替えたらここも直す */
padding:calc(var(--header-h) + 22px) 20px calc(var(--fvphone-w) * 1.53 + 86px);
}
/* 見出し・パンダ・吹き出し・CTA を .fv__inner の直下の並びに参加させて、
順番を決める */
.fv__copy{display:contents;}
/* 縦積みで中身が画面を越えるので、スクロールの誘導は要らない */
.fvscroll{display:none;}
.fv__ttl{order:1; width:100%;}
.fv__ttl img{width:min(430px,100%);}
.fv__fly{order:2; width:min(150px,40%); margin-top:26px;}
.fvbub{order:3;}
.fv__cta{order:4; margin-top:26px;}
.btn--hero{width:min(340px,100%); padding:17px 16px; font-size:16px; border-width:3px;}
/* 吹き出しは散らし置きをやめて、2列×2段のかたまりにする。
⚠️ 09-23、4つとも同じ大きさの円にした（PCは文字数に合わせて直径が違う）。
そのため幅は em ではなく「半分ずつ」で決め、文字は円の中で折り返させる */
/* 2つぶんの場所に4つを重ねて置き、2つずつ交互に見せる（切り替えは site.js）*/
.fvbub{
display:grid; grid-template-columns:repeat(2,1fr); gap:10px;
width:100%; max-width:330px; margin:26px auto 0;
}
.fvbub__item,
.fvbub__item--1,
.fvbub__item--2,
.fvbub__item--3,
.fvbub__item--4{
position:static; transform:none;
width:calc(50% - 5px);
font-size:12px;
/* 円の中で折り返す。PCは1行で置いているので nowrap のまま */
white-space:normal;
/* ⚠️ 09-24、内側の余白を詰めた（12px→7px）。
「収入を増やしたい！」の語尾だけが次の行に落ちていたため */
padding:0 7px;
}
/* 09-23、スマホは2つぶんの場所に4つを重ね、求職者向け（1・2）と
企業様向け（3・4）を交互に見せる。切り替えは site.js が .is-alt を付け外しして行う */
.fvbub__item--1,
.fvbub__item--3{grid-area:1 / 1;}
.fvbub__item--2,
.fvbub__item--4{grid-area:1 / 2;}
.fvbub__item{width:100%;}
/* 10-02、入れ替わりをフェードから「下からにょきっと生える」動きに変えた。
消えるほうは尾の先へすっと縮み、出るほうは尾の先から少し行きすぎるくらいまで膨らんで落ち着く。
・支点（transform-origin）は尾の先＝円の下（尾は top:88%＋高さ20% なので 108%）。
・見えているときの大きさは8割（09-23 指定。幅を変えると円の位置がずれるので transform で縮めている）。
支点が下にあると、縮めたぶん円が下へ寄るので、translateY で元の高さへ戻している
（(108% − 50%) × 0.2 ＝ 11.6%）。⚠️ 大きさか支点を変えたら、この値も計算し直すこと。
・transition は「その状態へ入るとき」の動きを、それぞれの状態の側に書いている。
出るほうには遅れ（.3s）を付けて、前の吹き出しが縮みきってから生えるようにしてある。 */
.fvbub__item{transform-origin:50% 108%;}
/* 見えているほう（生える動き。左右2つは同時に出す。時間差は付けない＝10-02 指定） */
.fvbub__item--1,
.fvbub__item--2,
.fvbub.is-alt .fvbub__item--3,
.fvbub.is-alt .fvbub__item--4{
opacity:1; transform:translateY(-11.6%) scale(.8);
transition:transform .6s cubic-bezier(.34,1.56,.64,1) .3s, opacity .1s linear .3s;
}
/* 隠れているほう（尾の先へ縮む動き） */
.fvbub__item--3,
.fvbub__item--4,
.fvbub.is-alt .fvbub__item--1,
.fvbub.is-alt .fvbub__item--2{
opacity:0; transform:translateY(-11.6%) scale(0);
transition:transform .28s cubic-bezier(.5,0,.9,.4), opacity .14s linear .14s;
}
/* 09-24、文字を一段小さくして、9文字の行（収入を増やしたい！）が1行に収まるようにする */
.fvbub__item span{font-size:15px; line-height:1.55;}
/* 隠れているほうは押せない・読み上げない（読み上げは aria-hidden を site.js が付ける）*/
.fvbub__item[aria-hidden="true"]{pointer-events:none;}
/* 動きを減らす設定では、その場でぱっと入れ替える。
⚠️ 上の「見えているほう／隠れているほう」に負けないよう、セレクタを同じ深さにしてある */
@media (prefers-reduced-motion:reduce){
.fvbub .fvbub__item,
.fvbub.is-alt .fvbub__item{transition:none;}
}
/* 縦積みではスマホがコピーの右ではなく画面の中央に来る。
SPの検索窓はFVをまたがず下に少し重ねて置く形なので、その上辺に付ける。
場所は .fv__inner の下余白で空けてある（上の padding-bottom とセット） */
.fv__phone{
left:50%; right:auto; bottom:100%;
transform:translateX(-50%);
width:var(--fvphone-w);
}
/* 画面が狭いので、パンダの左右のはみ出しは控えめにする */
.fvpanda{left:-12%; right:-12%;}
/* --- ヒロスタッフとは --- */
/* 09-23、スマホでは見出し（手書き文字の画像）を一回り大きく（72% → 88%）*/
.abouthiro__ttl{max-width:min(560px, 88%);}
/* SPは貼り付け（＝読んでいるあいだ止める見せ方）をしない。
縦が短いので、止めるとかえって読みにくいため。
地の絵も貼り付けをやめて、セクションの高さいっぱいに敷く */
.abouthiro{padding:0 20px;}
.abouthiro .abouthiro__inner{
padding:var(--s5) 0 calc(var(--s5) + var(--about-overlap));
}
/* 決め打ちの改行はSPだと収まらないので自然折り返しに任せる。
中央揃えのまま長文を折り返すと行頭が揃わず読みにくいので左揃えにする */
.abouthiro__lead{font-size:16px; line-height:2.3; letter-spacing:.05em; text-align:left;}
.abouthiro__lead br{display:none;}
.abouthiro__lead p + p{margin-top:1.8em;}
/* 幅が足りず見出しに寄ってしまうので、右のパンダは見出しの上（section の余白の中）へ。
左のパンダは本文に重なる位置しか残らないので、SPでは出さない */
.abouthiro__panda{width:64px;}
.abouthiro__panda--a{top:-72px; right:0;}
.abouthiro__panda--b{display:none;}
/* --- 入口カード2枚 --- */
/* 横2列だとカードが細くなりすぎるので縦積み。
カードの上にはみ出す要素がなくなったので、カード同士の間は詰めてよい */
.entryhero{padding:var(--s6) 20px var(--s5);}
.entryhero__lead{font-size:15px; line-height:1.95;}
.entryhero__list{grid-template-columns:minmax(0,1fr); gap:24px;}
.entryhero__head + .entryhero__list{margin-top:var(--s4);}
.ecard{padding:30px 24px 28px;}
/* 地の模様の点々は3×3に減らして角へ寄せる */
.ecard::before{top:12px; right:12px; width:36px; height:36px; background-size:12px 12px;}
/* 幅が足りないので、丸アイコンは少し詰めて見出しと同じ行に残す */
.ecard__head{gap:16px;}
.ecard__ico{width:62px; height:62px;}
.ecard__ttl{font-size:20px;}
.ecard__body{gap:16px; margin-top:22px;}
.ecard__list li{font-size:14.5px; gap:10px;}
.ecard__list li + li{margin-top:12px;}
.ecard__arrow{width:46px; height:46px;}
/* --- 帯（ABOUT／SERVICE）と INFORMATION --- */
.about{padding:var(--s6) 20px var(--s5);}
.about__ttl{margin-bottom:var(--s3);}
/* 決め打ちの改行はSPだと収まらないので自然折り返しに任せる */
.about__lead{font-size:15px;}
.about__lead br{display:none;}
.about__lead{line-height:2.1; text-align:left;}
.collage{margin-top:var(--s4);}
.collage__ph--l{width:33vw; border-width:5px; border-radius:18px; margin-right:-3%;}
.collage__ph--c{width:30vw; border-width:5px; transform:translateY(-18px);}
.collage__ph--r{width:33vw; border-width:5px; transform:translateY(14px); margin-left:-3%;}
.collage__doodle{width:34px; height:34px;}
.collage__dot{width:9px; height:9px;}
.service{padding:var(--s4) 20px var(--s6);}
.service__grid{grid-template-columns:1fr; gap:var(--s4);}
.service__figs{aspect-ratio:16/11;}
.service__body .ttl-en{justify-content:center;}
.service__txt{font-size:14px; line-height:2.1;}
.pillbtn{min-width:0; width:100%; max-width:340px;}
.service__body{text-align:center;}
.service__txt{text-align:left;}
.info{padding:var(--s6) 20px;}
.info__grid{grid-template-columns:1fr; gap:var(--s4);}
.info__label{margin-bottom:var(--s4);}
.info__link .ttl-en{font-size:28px;}
.info__link+.info__link{margin-top:var(--s4);}
.info__figs{aspect-ratio:16/11;}
.info__ph{border-width:6px; border-radius:22px;}
.reason{padding:72px 20px 44px;}
.usecase{padding:0 20px 64px;}
.usecase__arw{border-left-width:40px; border-right-width:40px; border-top-width:32px;}
.usecase__grid{grid-template-columns:1fr; gap:26px; padding-top:26px; justify-items:center;}
.usecase__phone{justify-self:center; width:210px;}
.usecase__bubbles{margin-bottom:24px;}
.usecase__bubbles li{font-size:16px; padding:10px 20px; margin-bottom:14px;}
.usecase__bubbles li:nth-child(2),
.usecase__bubbles li:nth-child(3){margin-left:0;}
.usecase__lead{font-size:24px; text-align:center;}
.reason__eyebrow{font-size:16px;}
.reason__ttl{font-size:28px;}
.reason__ttl{margin-bottom:44px;}
/* タブは2列。パネルは縦積みで、図版を文章の下に置く */
.rtab{gap:20px 14px;}
.rtab__item{width:calc(50% - 7px);}
.rtab__ico{width:124px;}
.rtab__label{font-size:14px;}
.rpanel{grid-template-columns:1fr; gap:20px; padding:24px 20px; border-radius:12px;}
.rpanel__ttl{padding-left:30px; font-size:19px;}
.rpanel__ttl::before{width:18px;}
.rpanel__txt{font-size:14.5px; line-height:2;}
.rpanel__ill{max-width:280px; margin:0 auto;}
/* 画面が狭いと130pxでは丸みが強すぎるので落とす */
.jobcat{padding:var(--s6) 20px var(--s5); border-radius:56px 56px 0 0;}
.jobcat__list{grid-template-columns:repeat(2,1fr); gap:14px;}
.jobcat__head{font-size:21px;}
.jobcat__conj{font-size:16px;}
.jobcat__sub{font-size:16px; margin-bottom:var(--s4);}
.jobcard>a{padding:16px 12px 18px; border-radius:16px;}
.jobcard__catch{font-size:12.5px; margin-bottom:10px; letter-spacing:.03em;}
.jobcard__ph{margin-bottom:12px;}
.jobcard__label{top:9px; left:9px; padding:4px 9px; font-size:11px;}
.jobcard__shift{font-size:12px;}
.jobcard__pay{font-size:24px;}
.jobcat__wrap::after{height:140px;}
.jobcat__foot{margin-top:-70px;}
.jobcat__cta{font-size:16px; padding:17px 32px;}
.sec{padding:var(--s6) 20px;}
.entry{grid-template-columns:1fr;}
.feat{grid-template-columns:1fr; gap:var(--s4);}
/* 職種タイル（下層）：SPは横スクロール。8枠を縦に積むと長くなりすぎるため */
.jobs{
display:flex; gap:12px; overflow-x:auto;
margin:0 -20px; padding:0 20px 12px;
scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
}
.job{flex:0 0 132px; scroll-snap-align:start;}
/* 05：SPはイラストを上に積む */
.flow{gap:36px;}
.flow__step{grid-template-columns:1fr; gap:var(--s3); padding:24px 24px 28px;}
.flow__ph{max-width:220px; margin:0 auto;}
.flow__step:not(:last-child)::after{bottom:-24px;}
.flow__ttl{font-size:19px;}
.flow__after{flex-direction:column; text-align:center; padding:28px 24px;}
.sys3{grid-template-columns:1fr; gap:var(--s3);}
.system{padding:52px 24px 48px;}
.system__btns{flex-direction:column; align-items:stretch;}
.system__btns .btn{justify-content:center;}
/* セクション余白が20pxになるので、レールの左端もそれに合わせる */
.voice{padding-inline:20px; scroll-padding-inline:20px;}
.voice__card{padding:28px 24px 30px;}
/* フッター：SPは縦に積み、リンクはアコーディオン（開閉はページ下部のスクリプトが制御） */
.ftop{grid-template-columns:1fr; gap:var(--s4); padding-bottom:var(--s4);}
.fnav{grid-template-columns:1fr; gap:0;}
/* PCで「トップ」を「会社について」の上に積むための箱。SPでは箱を外して、今までどおり1行ずつ並べる */
.fnav__stack{display:contents;}
.fnav__col{border-bottom:1px solid var(--line);}
.fnav__ttl{
position:relative; cursor:pointer;
padding:16px 30px 16px 0; margin:0; border-bottom:0;
}
/* ⚠️ 09-24、＋／− は文字（＋・−）で出していたが、端末のフォントによっては
豆腐（□）になるため、線2本で描く方式に変えた（ハンバーガーの .hmenu__ttl と同じ作り）。
開いたときは縦線だけ回して消し、横線＝− にする */
.fnav__ttl::after,
.fnav__ttl::before{
content:""; position:absolute; right:4px; top:50%;
background:var(--orange); border-radius:2px;
}
.fnav__ttl::after{width:14px; height:2px; margin-top:-1px;}
.fnav__ttl::before{
width:2px; height:14px; margin-top:-7px; right:10px;
transition:transform .25s ease, opacity .25s ease;
}
.fnav__col[open] .fnav__ttl::before{transform:rotate(90deg); opacity:0;}
@media (prefers-reduced-motion:reduce){
.fnav__ttl::before{transition:none;}
}
/* SPは見出し＝アコーディオンの開閉ボタン。タップで遷移してしまわないようリンクは無効にする
（代表ページは各列のリンク一覧にも入っているので、行き先は失われない） */
.fnav__ttl-link{pointer-events:none;}
/* 見出しだけの列（トップ）は開閉しないので、＋／−も出さず、リンクはそのまま押せるようにする */
/* SPは他の見出しと同じ行の高さに揃える（PC用の下余白は持ち越さない） */
.fnav__col--solo .fnav__ttl{cursor:auto; margin:0;}
.fnav__col + .fnav__col--solo{margin-top:0;}
.fnav__col--solo .fnav__ttl::before,
.fnav__col--solo .fnav__ttl::after{content:none;}
.fnav__col--solo .fnav__ttl-link{pointer-events:auto; display:block;}
.fnav__list{padding:0 0 var(--s2);}
/* SP固定CTAの分だけフッター下に余白を足す */
.spcta{display:flex;}
/* ⚠️ 09-24、下の余白を詰めた（もとは --s4 + 76px ＝ 116px で、バーの高さ70pxより46px多かった）。
バーの高さ（70px）＋16px。ノッチのある端末では env(safe-area-inset-bottom) ぶん自動で増える */
.footer{padding-bottom:calc(86px + env(safe-area-inset-bottom));}
/* 追従CTAを出さないページ（フォーム）は、そのぶんの余白も要らない */
.is-form .footer{padding-bottom:var(--s4);}
}
@media (max-width:600px){
/* 09-23、ナビの行が無くなったぶんヘッダーは低い（ロゴ＋CTA＋メニューの1行） */
:root{--header-h:62px;}
.header{--header-py:10px; padding:var(--header-py) 16px;}
.gnav__sub{display:none;}
.gnav__item{display:contents;}
/* メニューを開いているあいだは背面を動かさない */
.is-hmenu{overflow:hidden;}
/* ⚠️ 09-24 先方指定。スマホの右上はボタンではなく電話番号にする。
ボタンの行き先（ご相談・ご登録）は、画面下の追従CTAとメニューの中から辿れるので
ヘッダーからは下ろし、スマホからすぐ掛けられる電話番号に置き換えている */
.header__cta{display:none;}
.header__tel{
display:flex;
/* 仕切り線と左の余白は外す */
margin-right:2px; padding-left:0; border-left:0; gap:1px;
}
/* 10-02、スマホでも番号の下に受付時間を出す（それまでは番号だけの1行だった）。
番号の幅に収まるよう、文字を小さく・字間を詰めている。
2段にしても高さはハンバーガー（44px）より低いので、ヘッダーの高さ（--header-h）は変わらない */
.header__tel-note{font-size:clamp(9.5px,2.7vw,10.5px); line-height:1.3; letter-spacing:.02em;}
/* ロゴとハンバーガーのあいだに収まる大きさ。375pxでもぶつからない */
.header__tel-num{font-size:clamp(14px,4.3vw,18px); gap:6px;}
}
/* CTAが切れそうな幅になったら、ボタンを減らしてハンバーガーだけにする（09-23 指定）。
減らした行き先は、どれもメニューの中（.hmenu__foot）から辿れる */
@media (max-width:480px){
/* まず左の枠線ボタン（企業担当者向け）を下げる */
.header__biz{display:none;}
}
@media (max-width:380px){
/* さらに狭いときはCTAも下げて、ロゴとハンバーガーだけにする */
.header__cta{display:none;}
.gnav--front::before{display:none;}
/* 文字は画面幅なりに縮める。375pxで12px＝5項目がちょうど1行に収まる大きさ */
.gnav--front{
justify-content:space-between; gap:6px; font-size:clamp(11px, 3.2vw, 13px); letter-spacing:0;
overflow-x:auto; scrollbar-width:none;
}
/* ⚠️ 横スクロール（overflow-x:auto）にすると縦にはみ出したものも切られるので、
下線はヘッダーの下端まで出さず、ナビの内側（文字の下）に引く */
.gnav--front a{padding:2px 0 8px;}
.gnav--front a::after,
.gnav--front a:hover::after,
.gnav--front a:focus-visible::after{bottom:0;}
.header{padding-bottom:6px;}
.gnav--front::-webkit-scrollbar{display:none;}
.header__logo img{height:30px;}
.header__cta{font-size:12.5px; padding:10px 16px;}
/* 吹き出しは円が2つ並ぶ幅まで詰める。円の直径は em なので文字と一緒に縮む */
.fvbub{max-width:min(330px,88vw); gap:9px;}
.fvbub__item{font-size:11px;}
.fv__phone{width:min(250px,72%); margin-top:110px;}
/* スマホの絵が細くなるぶん、検索窓のパンダも右端に合わせ直す（幅は上の .fv__phone と同じ式） */
.fvsearch__panda{right:calc(50% - min(250px,72%) / 2 - var(--fvsp-w) / 2);}
.btn--main{font-size:16px; padding:16px 30px;}
.btn--sub{font-size:14px;}
/* ⚠️ 09-24、ボタンが縦に並ぶ場面（募集要項・各セクションの下）で幅が不ぞろいだったので、
主ボタンと同じ幅にそろえる。横並びのときは伸びすぎないよう上限を付ける */
.sec__btns .btn,
.rdetail__cta .btn,
.rsec__btns .btn{width:min(320px, 100%); justify-content:center;}
/* ⚠️ 09-24、幅をそろえたら縦に並んだボタンがくっついたので、並べ方を flex にして間隔を持たせる */
.sec__btns,
.rsec__btns{display:flex; flex-direction:column; align-items:center; gap:12px;}
.sec__read{margin-bottom:var(--s5);}
/* 入口カードのリード文。中央そろえだと3行に折れて行末がばらつくので、左そろえにする */
.entryhero__lead{text-align:left;}
/* 入口カード：チェック項目と矢印を横に並べたままだと、いちばん長い項目
（「どんな仕事が自分に合うかわからない」）で幅が足りず、カードがはみ出す。
矢印は項目の下に落として右そろえにする */
.ecard__body{display:block; margin-top:20px;}
.ecard__arrow{margin:18px 0 0 auto;}
.entry__card{padding:32px 24px 56px;}
.entry__ph{width:96px; height:96px; right:-10px; top:-10px;}
.feat__card{padding:46px 22px 30px;}
.flow__step{padding:24px 18px 22px;}
.voice__card{padding:40px 22px 24px;}
.faq__q{padding:18px 48px 18px 46px; font-size:15px;}
/* 左の余白（46px）に収まるサイズまで落とす */
.faq__q::before{left:10px; top:calc(18px + .85em); width:32px; height:30px;}
.faq__a{padding:0 46px 20px 46px;}
.faq__a::before{left:12px; width:30px; height:30px;}
}
/* ============================================================
はじめての方へ
============================================================ */
.sub__ttl{
margin:var(--s6) 0 var(--s4);
font-size:clamp(20px,2.4vw,26px); font-weight:600; text-align:center;
word-break:auto-phrase;
}
.scheme{
display:grid; grid-template-columns:1fr auto 1fr auto 1fr;
align-items:center; gap:var(--s2);
}
.scheme__box{
display:flex; flex-direction:column; align-items:center; justify-content:center;
min-height:132px; padding:20px 16px; border-radius:var(--r-l);
background:var(--white); border:2px solid var(--line-soft); text-align:center;
}
.scheme__box--hiro{background:var(--orange); border-color:var(--orange); color:#fff;}
.scheme__box--client{background:var(--blue-pale); border-color:#CFE3F1;}
.scheme__cap{font-size:clamp(15px,1.6vw,19px); font-weight:600; line-height:1.5;}
.scheme__sub{margin-top:4px; font-size:12px; opacity:.72;}
.scheme__link{display:flex; flex-direction:column; align-items:center; gap:6px; width:104px;}
.scheme__arrow{
position:relative; display:block; width:100%; height:2px; background:var(--line-strong);
}
.scheme__arrow::before,.scheme__arrow::after{
content:""; position:absolute; top:50%; width:8px; height:8px;
border-top:2px solid var(--line-strong); border-right:2px solid var(--line-strong);
}
.scheme__arrow::before{left:0; transform:translateY(-50%) rotate(-135deg);}
.scheme__arrow::after{right:0; transform:translateY(-50%) rotate(45deg);}
.scheme__label{font-size:12px; color:var(--ink3); text-align:center; line-height:1.5;}
.scheme__note{
max-width:760px; margin:var(--s3) auto 0;
font-size:14px; color:var(--ink2); line-height:1.95; text-align:center;
}
.types{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s2);}
.types__card{
background:var(--white); border-radius:var(--r-l);
padding:28px 24px 26px; box-shadow:var(--sh-s);
}
.types__tag{
display:inline-block; margin-bottom:var(--s2);
padding:5px 14px; border-radius:var(--r-full);
background:var(--orange-pale); color:var(--orange-dark);
font-size:12px; font-weight:600;
}
.types__ttl{margin:0 0 var(--s1); font-size:17px; font-weight:600; line-height:1.6;}
.types__txt{margin:0; font-size:14px; color:var(--ink2); line-height:1.95;}
.notebox{
margin-top:var(--s3); padding:26px 30px;
background:var(--bg2); border-radius:var(--r-l);
}
.notebox__ttl{margin:0 0 var(--s1); font-size:15px; font-weight:600;}
.notebox__txt{margin:0; font-size:14px; color:var(--ink2); line-height:1.95;}
@media (max-width:900px){
.scheme{grid-template-columns:1fr; gap:var(--s1);}
.scheme__box{min-height:0; padding:16px;}
.scheme__link{width:100%; flex-direction:row; justify-content:center; gap:10px; padding:6px 0;}
.scheme__arrow{width:2px; height:26px; background:var(--line-strong);}
.scheme__arrow::before,.scheme__arrow::after{display:none;}
.scheme__note{text-align:left;}
.types{grid-template-columns:1fr 1fr;}
.notebox{padding:22px 20px;}
.sub__ttl{margin:var(--s5) 0 var(--s3);}
}
@media (max-width:600px){
.types{grid-template-columns:1fr;}
}
.notebox--plain{background:var(--bg2); margin-top:var(--s4);}
.jobs--detail .job{padding:28px 18px 24px;}
.jobs--detail .job__txt{
display:block; margin-top:2px;
font-size:12.5px; line-height:1.75; color:var(--ink2);
}
.free{
max-width:820px; margin:0 auto; padding:52px 40px 46px;
background:var(--orange-pale); border-radius:var(--r-l); text-align:center;
}
.free__lead{margin:0; font-size:clamp(16px,1.8vw,20px); font-weight:600;}
.free__num{
margin:var(--s1) 0 var(--s3);
font-size:clamp(24px,4vw,30px); font-weight:600; line-height:1.1;
color:var(--orange); letter-spacing:.02em;
}
.free__num span{font-size:.32em; margin-left:8px; color:var(--ink);}
.free__txt{
max-width:620px; margin:0 auto;
font-size:14.5px; color:var(--ink2); line-height:2;
}
@media (max-width:900px){
.free{padding:38px 24px 34px;}
.free__txt{text-align:left;}
.jobs--detail{display:grid; grid-template-columns:1fr 1fr; margin:0; padding:0; overflow:visible;}
.jobs--detail .job{flex:none; width:auto;}
}
/* ============================================================
会社概要（page-company.php）
============================================================ */
/* パンくずはヒーローの内容と左端を揃えたいので、この階層だけ枠を広げる */
.crumb--wide .crumb__list{max-width:var(--wrap);}
/* 見出し・キャッチの上に小さく置く英字。受ける側の上マージンは0なので、
こちらの下マージンだけで間隔をつくる。--center は中央寄せの文（キャッチ）用 */
.ttl-sub{
margin:0 0 8px;
font-size:13px; font-weight:600; letter-spacing:.18em;
color:var(--orange);
}
.ttl-sub--center{text-align:center;}
/* .cttl の上に置く小さな英字ラベル。トップの .sec__en と同じ体裁で、
.cttl が左そろえなのに合わせて左そろえにしている。
英字は表記ルールどおりすべて大文字 */
.cttl-en{
margin:0;
font-size:13px; font-weight:600; letter-spacing:.22em;
color:var(--orange); text-align:center;
}
/* 子ページ共通の見出し。中央そろえで、全幅の罫は落とし、
中央に短い線だけを残す（.ttl-bar 等と共有している罫の指定を打ち消している） */
.cttl{
margin:0 0 var(--s4); padding-bottom:18px;
font-size:clamp(26px,4.2vw,30px); font-weight:600;
letter-spacing:.14em; text-indent:.14em; text-align:center;
border-bottom:0; border-image:none;
}
/* 線の寸法はトップの見出し（.mission__ttl）と同じ 64×4px・角丸4px */
.cttl::after{
left:50%; bottom:0; transform:translateX(-50%);
width:64px; height:3px;
border-radius:4px;
background:var(--orange);
}
/* 企業様向けのページ（body.is-biz）は、見出しまわりのオレンジをブルーに寄せる。
サイト全体の「オレンジ系＝求職者・自社採用／ブルー＝企業様向け」の色分けに合わせる */
.is-biz .cttl-en{color:var(--blue-deep);}
.is-biz .cttl::after{background:var(--blue-deep);}
.is-biz .gsub{border-left-color:var(--blue-deep);}
/* 09-24、企業様向けは地がブルーなので、見出し左の小札も罫と同じ青にそろえる
（求職者向けの /guide/haken/ はオレンジのまま） */
.is-biz .gsub__no{background:var(--blue-deep);}
/* --- 代表挨拶 --- */
.cmsg{background:var(--bg); padding:var(--sec-gap) 24px 0;}
.cmsg__inner{max-width:var(--wrap); margin:0 auto;}
/* 写真＋氏名を左に固定幅で置き、本文を右に流す。
上のパディングは、写真枠の上辺から顔を出すパンダ（.cpanda--msg）の居場所 */
.cmsg__grid{
display:grid; grid-template-columns:340px 1fr; gap:var(--s5);
align-items:start; padding-top:32px;
}
/* 図版の枠。会社概要の代表挨拶と、採用情報の「はじめに」で共通に使う。
⚠️ 09-09、支給の図版が2枚とも「背景を抜いたイラスト」に差し替わったため、
オレンジの囲み・淡い地色・背面の斜線ハッチを外した（絵そのものが形を
持っているので、囲むと枠が二重に見える）。--fig-skew などで枠を傾ける
仕組みも、囲みが無いので効き所が無くなっている。
写真に戻して枠を復活させるなら、コミット 07715dc の指定が使える。
仮枠（.cmsg__ph-empty）のほうは、枠の見た目を自前で持たせて残してある */
.cmsg__fig{
position:relative;
margin:0;
}
.cmsg__ph{
position:relative;
margin:0;
}
/* 図版は縦横比そのままで、枠の幅いっぱいに置く（切り取らない） */
.cmsg__ph img{
width:100%; height:auto;
object-fit:contain; display:block;
}
.cmsg__name{margin:var(--s3) 0 0; display:flex; flex-direction:column; gap:6px;}
/* 代表挨拶の氏名は左そろえのまま、3行の間隔を詰めて1つの塊に見せる（09-09）。
⚠️ 行間は body の 1.8 が効いていて、氏名（25px）だと1行45pxぶんの箱になる。
gap を削るだけでは詰まらないので、3行とも line-height を落とすこと。
⚠️ .cmsg__name は採用ページの「はじめに」（.rintro__msg）と共有しているので、
あちらを元の間隔のまま残すためにセクションの .cmsg で囲っている */
.cmsg .cmsg__name{gap:3px; margin:10px 0 0 30px;}
.cmsg .cmsg__jp,
.cmsg .cmsg__en,
.cmsg .cmsg__role{line-height:1.35;}
/* 氏名は明朝体。Webフォントは読み込んでいないので、OS標準の明朝を順に指定している。
Noto Serif JP を足せばOS差はなくなるが、氏名1行のために読み込むのは重いので見送り。
明朝は太らせると潰れるので、ゴシックの700ではなく600で置いている */
.cmsg__jp{
font-family:"Hiragino Mincho ProN","Hiragino Mincho Pro","Yu Mincho","YuMincho",
"Noto Serif JP","MS PMincho",serif;
font-size:25px; font-weight:600; letter-spacing:.1em;
}
.cmsg__en{font-size:12px; font-weight:600; letter-spacing:.14em; color:var(--orange);}
.cmsg__role{font-size:14px; color:var(--ink3);}
/* 代表挨拶の氏名は画像（検索に拾われにくくするため。page-company.php 参照）。
行の高さ（1.35em）ぴったりで書き出しているので、高さを 1.35em にすれば文字のときと同じ大きさになる。
width:auto は必須（img の width 属性で横に伸びるのを防ぐ） */
.cmsg .cmsg__jp img,
.cmsg .cmsg__en img{display:block; height:1.35em; width:auto;}
/* 管理画面で入れた氏名は、画像の代わりに data-name を文字で出す（代表挨拶・会社概要の表の代表者欄。inc/company.php）。
本文のテキストにしないのは画像にしているのと同じ理由 */
.hiro-nm::before{content:attr(data-name);}
.cmsg__lead{
margin:0 0 var(--s3);
font-family:"Zen Kaku Gothic New","Noto Sans JP",sans-serif;
font-size:clamp(21px,2.4vw,28px); font-weight:700; line-height:1.6;
letter-spacing:.04em;
}
/* 代表挨拶の見出しは「お客様第一主義」の部分だけオレンジ（09-09）。
見出し全体は地の文字色のままなので、色はこの span だけが持つ。
⚠️ --orange（#F18000）ではなく --orange-dark。白地に乗せると #F18000 は
コントラスト比2.6で、大きい文字の基準（3.0）にも届かない。
--blue / --blue-deep と同じ「地に置く色と文字に置く色は分ける」扱い */
.cmsg__em{color:var(--orange-dark);}
.cmsg__txt p{margin:0 0 1.6em; font-size:15px; line-height:2.1; color:var(--ink2);}
.cmsg__txt p:last-child{margin-bottom:0;}
/* --- 会社理念 --- */
/* パンくずの直後（ページの先頭）に来るセクション。上の余白はここが持つ */
/* 下の余白はセクションのパディングで持つ。子（.cphil__body）のmargin-bottomに持たせると
セクションに下パディングが無いぶん margin が外へ抜けてしまい、
その高さだけ地色（--bg）ではなくbodyの白が帯になって見えてしまう */
/* 背景は支給素材（09-10）を節いっぱいに敷く。左右の端に絵が寄った横長の構図なので、
cover で中央そろえにすると縦は切れるが、中央のほぼ無地な部分に理念のカードが載る。
画面が狭いほど左右が画角の外へ出ていき、SPではやわらかい地色だけが残る（そのままで良い）。
読み込めなかったときの受けとして地色（--bg）は残しておく */
.cphil{
position:relative; overflow:hidden;
background:var(--bg);
padding:var(--sec-gap) 24px var(--s6);
}
/* 絵は擬似要素に持たせ、上下の端をマスクでぼかして地色（--bg）へ溶かす。
前のパンくず／目次と次の代表挨拶（.cmsg）はどちらも --bg なので、
境目に絵の切り口が出ず、節がつながって見える。
上（見出し「会社理念」がかかる側）は絵が透けると見出しが読みにくいので、
完全に地色のままの帯を12%まで取り、38%でようやく絵が全開になるようにしている。
⚠️ 左右はぼかさない。端の緑と街並みが絵の見せ場なので、消すと何も残らない */
.cphil::before{
content:""; position:absolute; inset:0; z-index:0;
background:url("assets/img/cphil-bg.jpg") no-repeat center center / cover;
-webkit-mask-image:linear-gradient(to bottom,
transparent 0, transparent 12%, #000 38%, #000 74%, transparent 100%);
mask-image:linear-gradient(to bottom,
transparent 0, transparent 12%, #000 38%, #000 74%, transparent 100%);
pointer-events:none;
}
/* 上端を白でぼかし、上の目次（.cnav／地色なし＝白）となじませる（09-22 指定）。
絵（::before）と地色（--bg）の上に白のグラデーションを重ねる。本文（.cphil__inner）はさらに上 */
.cphil::after{
content:""; position:absolute; left:0; right:0; top:0; height:45%; z-index:0;
background:linear-gradient(to bottom, #fff 0, #fff 18%, rgba(255,255,255,0) 100%);
pointer-events:none;
}
.cphil__inner{position:relative; z-index:1; max-width:var(--wrap); margin:0 auto;}
/* --- 理念のカード --- */
/* 左右の装飾に重なるので、白い地とぼかした影で文字を浮かせる */
.cphil__card{
position:relative;
max-width:900px; margin:0 auto;
padding:clamp(36px,5vw,64px) clamp(24px,4vw,56px) clamp(30px,4vw,48px);
background:rgba(255,255,255,.92); border-radius:10px;
box-shadow:0 18px 50px rgba(60,110,140,.13);
}
/* 理念のことば。飾りは付けず、書体と余白だけで見せる。
書体は明朝。ゴシックの太字だと「見出し」に見えてしまい、掲げた言葉にならない */
.cphil__catch{
margin:0 auto var(--s4); padding:0;
font-family:"Hiragino Mincho ProN","Hiragino Mincho Pro","Yu Mincho","YuMincho",
"Noto Serif JP","MS PMincho",serif;
font-size:clamp(26px,4.2vw,32px); font-weight:600;
line-height:2; letter-spacing:.14em;
color:var(--ink); text-align:center;
}
/* 理念を受ける補足。主役はあくまで上の一文なので、級数は抑えたまま行間だけ広く取る */
.cphil__body{
margin:0 auto; max-width:720px;
/* 09-24、他ページのリード文と同じ大きさ・行間に揃えた（もとは 15〜17px／行間2.3） */
font-size:var(--lead-size); line-height:var(--lead-lh);
letter-spacing:.06em; color:var(--ink2); text-align:center;
}
/* 三開眼（09-22 に鬼三訓から差し替え。クラス名は鬼三訓のときのまま）。代表挨拶の下に置く独立した節。地色と幅は前後（.cmsg／.cmedia）に揃え、
上の余白は持たせない（節の間隔は前の節の下余白が受け持っている）。
見出しは他の節と同じ .cttl-en ＋ .cttl を使うので、専用の指定は持たない */
.coni{background:var(--bg); padding:var(--sec-gap) 24px 0;}
.coni__inner{max-width:var(--wrap); margin:0 auto; text-align:center;}
/* 見出しだけ中央そろえで、三訓のパネルの中身は左そろえに戻す */
.coni .oni{text-align:left;}
/* 見出しの中のひとかたまり。折り返しはかたまりとかたまりのあいだでだけ起きる */
.coni__nowrap{display:inline-block;}
/* 見出しの下のひとこと（「未来を、顧客を、自らを見つめる。」）。見出しとパネルのあいだに置く */
.coni__lead{
margin:calc(var(--s2) * -1) 0 var(--s4);
font-size:clamp(16px,1.4vw,19px); font-weight:500; letter-spacing:.12em; line-height:1.8;
color:var(--ink2);
}
/* 三訓は3枚のパネルを横に並べる。パネルの中は上から
「第○訓＋ラベル」→「訓の本文」→「解説の各行」と一列に置く。
⚠️ 1枚あたりの幅は 1100px を3つ割りで約350px。解説が長い訓もあるので、
級数と余白は縦積みだった頃より一段落としてある（訓の本文は clamp の上限を切って19px固定）*/
.oni{
list-style:none; margin:0; padding:0;
display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s3);
}
/* 訓ごとに色を変える（09-09 支給ラフ）。バッジ・訓の本文・解説の点の3か所が
この --oni-c を見る。カード自体は白地で、色はこの3か所だけに絞る。
⚠️ 色は「白ヌキ文字が乗るバッジ」が通る濃さで選んでいる。バッジの文字は
12.5px＝WCAGの「大きな文字」ではないので、4.5:1 が要る。
・一訓 --blue-deep #2F7AAC … 4.66:1
・二訓 #2F7D42（ラフの緑 #3F9A55 は3.55:1で届かないため落とした）… 5.08:1
・三訓 #A8502C（ラフに3枚目が無いので、--terracotta を同じ考えで濃くした）… 5.45:1
明るくするなら、バッジの文字色を白から濃色へ変えること */
.oni__item{
--oni-c:var(--blue-deep);
position:relative; overflow:hidden;
padding:32px 28px 34px; border-radius:var(--r-l);
background:var(--white);
border:1px solid var(--line-soft);
box-shadow:var(--sh-s);
}
.oni__item:nth-child(2){--oni-c:#2F7D42;}
.oni__item:nth-child(3){--oni-c:#A8502C;}
/* 「第○訓」のバッジとラベルを横一列に。幅が足りなければラベルを次の行へ落とす */
.oni__head{display:flex; align-items:center; flex-wrap:wrap; gap:10px 12px; margin:0 0 14px;}
.oni__no{
flex:none;
padding:7px 14px; border-radius:5px;
background:var(--oni-c);
color:#fff; font-size:12.5px; font-weight:700; letter-spacing:.14em; line-height:1;
}
.oni__label{
font-size:20px; font-weight:700; letter-spacing:.08em;
line-height:1.4; color:var(--ink);
}
/* 訓そのものが主役。級数を上げ、色でも本文と段差をつける。
下の罫は色を持たせず、カードの区切り線と同じ淡いグレーにする */
.oni__ttl{
margin:0 0 18px; padding-bottom:16px;
border-bottom:1px solid var(--line-soft);
font-family:"Zen Kaku Gothic New","Noto Sans JP",sans-serif;
font-size:19px; font-weight:700; line-height:1.6;
letter-spacing:.02em; color:var(--oni-c);
}
/* 本文は段落。09-22 に三開眼へ差し替えたとき、鬼三訓の「1行ずつ点を付けた箇条」から段落に変えた */
.oni__body p{margin:0; font-size:14px; line-height:1.95; color:var(--ink2);}
.oni__body p + p{margin-top:1em;}
/* --- 関連メディア --- */
/* グループ各社・SNSへの外部リンク。上にバナー、下に名前と説明を左揃えで積む。
カードは白地に浅い影。枠線は持たせない */
.cmedia{background:var(--bg); padding:var(--sec-gap) 24px 0;}
.cmedia__inner{max-width:var(--wrap); margin:0 auto;}
.cmedia__list{
display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
gap:24px; margin:0; padding:0; list-style:none;
}
.cmedia__link{
display:flex; flex-direction:column; gap:18px;
height:100%; padding:22px 22px 26px;
background:var(--white); border-radius:var(--r-l);
box-shadow:var(--sh-s);
transition:box-shadow .15s ease, transform .15s ease;
}
.cmedia__link:hover{box-shadow:var(--sh-m); transform:translateY(-3px);}
/* バナーの枠。実寸は 250×82。支給前は名前だけ入った破線の仮枠を出す */
.cmedia__banner{
display:grid; place-items:center;
width:100%; aspect-ratio:250/82;
overflow:hidden; border-radius:var(--r-s);
}
.cmedia__banner img{width:100%; height:100%; object-fit:cover; display:block;}
.cmedia__ph{
display:grid; place-items:center; width:100%; height:100%;
background:var(--orange-pale); border:1px dashed var(--orange);
border-radius:var(--r-s);
font-size:11px; letter-spacing:.02em; color:#B08A57; text-align:center;
padding:0 8px; word-break:break-all;
}
.cmedia__body{display:flex; flex-direction:column; gap:8px; min-width:0;}
.cmedia__ttl{
font-size:17px; font-weight:700; letter-spacing:.02em;
line-height:1.5; color:var(--ink);
}
/* 押せることを示す一行。リンク色ではなく淡いグレーで、控えめに置く */
.cmedia__cta{font-size:14px; letter-spacing:.02em; color:var(--ink3);}
.cmedia__note{font-size:14.5px; line-height:1.85; color:var(--ink2);}
/* 読み上げ専用。外部リンクであることを見た目に出さないぶんの補い */
.cmedia__sr{
position:absolute; width:1px; height:1px;
margin:-1px; padding:0; border:0;
clip-path:inset(50%); overflow:hidden; white-space:nowrap;
}
@media (max-width:900px){
.cmedia{padding:0 20px var(--s5);}
.cmedia__list{grid-template-columns:1fr; gap:16px;}
.cmedia__link{gap:14px; padding:18px 18px 22px;}
.cmedia__ttl{font-size:16px;}
.cmedia__note{font-size:14px;}
}
/* --- 会社概要テーブル --- */
.cprof{background:var(--bg); padding:var(--sec-gap) 24px 0;}
.cprof__inner{max-width:var(--wrap); margin:0 auto;}
/* 表は白いパネルに載せる。地のセクションも白なので、
輪郭は細い枠線と浅い影でつけている */
/* 上マージンは、パネルの上辺から顔を出すパンダ（.cpanda--prof）の居場所。
position:relative もそのパンダの基準 */
.cprof__panel{
position:relative;
margin-top:36px;
background:var(--white);
border:1px solid var(--line-soft);
border-radius:var(--r-m);
box-shadow:var(--sh-s);
padding:10px 36px;
}
/* 地は白のまま、細い横罫だけで行を分ける。
項目名は字間を広げ、値との差は塗りではなく文字色の濃さでつける */
.cprof__table{
width:100%; border-collapse:collapse;
font-size:15px; line-height:1.95;
}
.cprof__table th,
.cprof__table td{
padding:22px 0; text-align:left; vertical-align:top;
border-bottom:1px solid var(--line-soft);
}
.cprof__table th{
position:relative;
width:250px; padding-left:20px; padding-right:24px;
font-size:14.5px; font-weight:600; letter-spacing:.08em;
color:var(--ink); white-space:nowrap;
}
/* 項目名の頭につく短いオレンジのしるし。1行目の文字の高さに合わせて置いている */
.cprof__table th::before{
content:"";
position:absolute; left:0; top:calc(22px + .95em);
width:10px; height:2px; border-radius:1px;
background:linear-gradient(90deg,var(--orange-dark),var(--orange));
}
.cprof__table td{color:var(--ink2);}
/* 代表者欄の氏名は、09-26 から管理画面で入れた文字を .hiro-nm で出している（inc/company.php）。.cprof__name は以前の画像用。
以前の画像は行の高さ（1.95em＝15px×1.95）ぴったりで書き出してあるので、
高さを 1.95em にすれば文字のときと同じ大きさ・位置になる。役職との間は全角スペース1つぶん */
.cprof__role{margin-right:1em;}
/* 区切りごとのかたまり（取引銀行・加盟団体・対応エリア）。名前の途中では折り返さない */
.cprof__chunk{display:inline-block;}
.cprof__name{display:inline-block; height:1.95em; width:auto; vertical-align:top;}
/* 最終行の罫線はパネルの枠と重なって二重に見えるので落とす */
.cprof__table tr:last-child th,
.cprof__table tr:last-child td{border-bottom:0;}
/* --- アクセス --- */
/* 地は会社概要と同じ白のまま。区切りは背景色ではなく見出しと余白でつける */
.cacs{background:var(--bg); padding:var(--sec-gap) 24px 0;}
.cacs__inner{max-width:var(--wrap); margin:0 auto;}
/* 左に所在地と経路（.cacs__list）、右に地図を並べる。
高さは中身の多いほうに引きずられないよう align-items:start で上そろえ。
SP（820px以下）では縦積みに戻す */
.cacs__grid{
display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:var(--s4); align-items:start;
}
.cacs__map{
border-radius:var(--r-m); overflow:hidden;
box-shadow:var(--sh-s); background:var(--white);
}
/* 半分の幅に収まるので、横長（16:7）だと低くなりすぎる。4:3 で高さを確保する */
.cacs__map iframe{display:block; width:100%; aspect-ratio:4/3; border:0;}
/* 所在地と交通アクセスは縦に積む。区切りは行の間の細い罫 */
.cacs__list{margin:0; display:grid; grid-template-columns:1fr; gap:var(--s3);}
.cacs__row+.cacs__row{padding-top:var(--s3); border-top:1px solid #EBE0D0;}
.cacs__dt{
margin:0 0 8px;
font-size:14px; font-weight:600; letter-spacing:.1em; color:var(--ink3);
}
.cacs__dd{margin:0; font-size:15px; line-height:1.95; color:var(--ink2);}
/* 交通手段のアイコン。1行目の文字の高さに合わせて少し下げている */
.cacs__ico{
flex:none; width:22px; height:22px; margin-top:3px;
color:var(--orange);
}
.cacs__ico svg{display:block; width:100%; height:100%;}
/* 経路は路線名＋徒歩分数の短い行が並ぶだけなので、点ではなく余白で区切る */
.cacs__routes{margin:0; padding:0; list-style:none;}
.cacs__routes li{display:flex; align-items:flex-start; gap:10px;}
.cacs__routes li+li{margin-top:8px;}
/* 事業所が2件以上のとき（page-company.php）。名称は .gsub の見出しで、事業所の間は大きめに空ける */
.cacs__office+.cacs__office{margin-top:var(--s6);}
.cacs__name{margin-top:0;}
/* --- パンダと吹き出し --- */
/* 置き方は2通り。
・--msg／--prof … 枠・パネルの上辺から顔だけ出す。絵より低い枠に overflow:hidden で切ると
下半身が上辺に隠れて「ひょこっと」になる（トップの .ptlead__panda と同じ作り）
・--acs … 切らずに全身で立たせる。左の列（.cacs__body）は右の地図より背が低く、
下に余白が空くのでそこに置いている
どれも添え物なので pointer-events は殺す（下の表やリンクの邪魔をしない） */
.cpanda{display:flex; align-items:flex-end; gap:12px; pointer-events:none;}
/* 上辺から顔を出す2つは、親（.cmsg__fig／.cprof__panel）の上辺に張り付ける */
.cpanda--msg,
.cpanda--prof{position:absolute; bottom:100%;}
.cpanda--msg{right:6px;}
.cpanda--prof{right:28px;}
.cpanda__fig{display:block; flex:none; overflow:hidden;}
.cpanda__fig img{display:block; width:100%; height:auto;}
/* 見せる高さは絵の上から7割ほど。残りは親の上辺に隠れる。
fv-panda-suit は 242×314、fv-panda-office は 234×312 でほぼ同じ比率 */
.cpanda--msg .cpanda__fig{width:92px; height:72px;}
.cpanda--prof .cpanda__fig{width:96px; height:74px;}
/* 白地に淡いオレンジの枠。尾は三角を2枚重ねて、奥が枠の色・手前が白で内側だけ塗りつぶす */
.cpanda__bubble{
position:relative; margin-bottom:8px;
padding:12px 20px;
background:var(--white);
border:2px solid #F3DDBE; border-radius:22px;
font-size:14px; font-weight:700; line-height:1.65; letter-spacing:.02em;
color:var(--ink); white-space:nowrap;
}
.cpanda__bubble::before,
.cpanda__bubble::after{
content:""; position:absolute; top:50%; margin-top:-10px;
width:0; height:0; border:10px solid transparent;
}
/* 既定はパンダが吹き出しの右にいるので、尾も右向き */
.cpanda__bubble::before{right:-20px; border-left-color:#F3DDBE;}
.cpanda__bubble::after{right:-17px; border-left-color:var(--white);}
/* --- お知らせ --- */
/* 一覧は /news/ が持つので、ここは直近4件だけ。リストは一覧ページと共通の .newslist */
.cnews{background:var(--bg); padding:var(--sec-gap) 24px 0;}
.cnews__inner{max-width:var(--wrap); margin:0 auto;}
.cnews__btns{margin-top:var(--s4); display:flex; justify-content:center;}
@media (max-width:900px){
.cnews{padding:0 20px var(--s5);}
.cnews__btns{margin-top:var(--s3);}
}
/* --- 沿革・採用情報への導線 --- */
/* 地はアクセスから続けて白のまま。カードは会社概要のパネルと同じ枠線・影で揃えている */
.cnext{background:var(--bg); padding:var(--sec-gap) 24px var(--s7);}
.cnext__inner{max-width:var(--wrap); margin:0 auto;}
.cnext__list{
/* カードの数なりに横に並べる（09-22 に沿革を外して1枚になった。1枚なら横幅いっぱい） */
display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr)); gap:var(--s3);
margin:0; padding:0; list-style:none;
}
/* カード全体をリンクにする。中身は縦積みで、「くわしく見る」だけ下端に寄せる */
.cnext__link{
display:flex; flex-direction:column; height:100%;
padding:32px 34px;
border:1px solid var(--line-soft); border-radius:var(--r-m); box-shadow:var(--sh-s);
color:var(--ink); text-decoration:none;
transition:transform .2s ease, box-shadow .2s ease;
}
.cnext__link:hover{transform:translateY(-3px); box-shadow:var(--sh-m);}
.cnext__en{font-size:12px; font-weight:700; letter-spacing:.16em; color:var(--orange);}
.cnext__ttl{
margin-top:6px;
font-family:"Zen Kaku Gothic New",sans-serif;
font-size:24px; font-weight:600; letter-spacing:.06em;
}
.cnext__txt{margin-top:14px; font-size:14.5px; line-height:1.95; color:var(--ink2);}
/* margin-top:auto でカードの高さが違っても下端が揃う */
.cnext__go{
margin-top:auto; padding-top:22px;
display:inline-flex; align-items:center; gap:6px;
font-size:14px; font-weight:600; color:var(--orange-dark);
}
.cnext__go .btn__chev{width:.85em; height:.85em; transition:transform .2s ease;}
.cnext__link:hover .btn__chev{transform:translateX(3px);}
@media (max-width:820px){
.cttl{margin-bottom:var(--s3);}
.cttl{margin-bottom:var(--s3);}
.cmsg{padding:0 20px var(--s5);}
/* 写真は本文の上へ。幅いっぱいだと顔が大きくなりすぎるので上限をつける */
.cmsg__grid{grid-template-columns:1fr; gap:var(--s3); padding-top:40px;}
.cmsg__side{display:flex; align-items:center; gap:20px;}
.cmsg__fig{flex:0 0 45%; max-width:220px; margin:0;}
/* 絵が小さくなるので、吹き出しは絵の上の空き（.cmsg__grid の padding-top）に出す。
⚠️ 09-22、岡森氏の絵に差し替えたら、絵に重ねた位置のままでは顔が隠れたため。
⚠️ PC用の位置（.cmsg .cmsg__bubble）がこのファイルの後ろにあるので、.cmsg__fig を足して詳細度で勝たせている */
.cmsg .cmsg__fig .cmsg__bubble{top:auto; bottom:calc(100% + 6px); left:0; padding:6px 10px; font-size:11px; border-radius:14px;}
.cmsg .cmsg__fig .cmsg__bubble::before,
.cmsg .cmsg__fig .cmsg__bubble::after{right:auto; left:22px;}
.cmsg__name{margin:0;}
/* 横並びになるぶん、代表挨拶の氏名の左インデント（PCの30px）は要らない */
.cmsg .cmsg__name{margin:0;}
.cmsg__jp{font-size:21px;}
.cphil{padding:var(--s5) 20px;}
.cphil__card{padding:32px 22px 28px;}
/* 余白は詰める。理念の改行は意味のある位置なので残す */
.cphil__catch{
margin-bottom:var(--s3);
line-height:1.9; letter-spacing:.1em;
}
/* ⚠️ 09-22、本文が3行の短い文になったので、スマホでも改行を残して中央に置く。
1行に収まらない行は文節の区切りで折り返す（以前は改行を消して左そろえの段落にしていた） */
.cphil__body{word-break:auto-phrase; line-break:strict;}
/* 三訓は見出しと本文を上下に積む */
/* 3列だと1行が短くなりすぎるので、1訓ずつ横長のパネルで積む。
幅が戻るぶん、級数は横並びのときより少し上げる */
.oni{grid-template-columns:minmax(0,1fr); gap:var(--s2);}
.oni__item{padding:26px 22px;}
.oni__head{margin-bottom:14px;}
.oni__ttl{font-size:20px; margin-bottom:16px; padding-bottom:14px;}
.oni__body p{font-size:14.5px;}
/* 社名（14字）が1行に収まる大きさまで落とす。収まらないと「ヒロ・／スタッフ…」と割れる */
.coni .cttl{font-size:clamp(16px,5vw,26px);}
.cprof{padding:var(--s5) 20px var(--s6);}
/* SPは見出しが中央そろえで吹き出しの真上に来る。パンダ＋吹き出しの高さ（約74px）ぶん
空けないと見出しに重なるので、PCより大きく取る */
.cprof__panel{padding:6px 20px; border-radius:var(--r-s); margin-top:76px;}
/* 2カラムのままだと項目名で幅を取られるので、SPは上下に積む。
罫線はセルではなく行につけ替えて、項目名と値のあいだに線が入らないようにする */
.cprof__table,
.cprof__table tbody,
.cprof__table tr,
.cprof__table th,
.cprof__table td{display:block; width:auto;}
.cprof__table tr{padding:16px 0; border-bottom:1px solid var(--line-soft);}
.cprof__table tr:last-child{border-bottom:0;}
.cprof__table th,
.cprof__table td{padding:0 0 0 18px; border:0;}
.cprof__table th{
margin-bottom:2px; white-space:normal;
font-size:14px; color:var(--ink3);
}
.cprof__table th::before{top:.95em;}
.cacs{padding:var(--s4) 20px var(--s4);}
/* 横に並べる幅がないので、所在地・経路を読ませてから地図を敷く縦積みに戻す */
.cacs__grid{display:block;}
.cacs__body{margin-bottom:var(--s3);}
/* SPは行間を少し詰める（縦積みと横罫はPCと共通） */
.cacs__list{gap:20px;}
.cacs__row+.cacs__row{padding-top:20px;}
/* パンダと吹き出しはひと回り小さく。文字も1段落とす */
.cpanda{gap:10px;}
.cpanda__bubble{padding:10px 16px; border-radius:18px; font-size:12.5px;}
.cpanda__bubble::before,
.cpanda__bubble::after{margin-top:-8px; border-width:8px;}
.cpanda__bubble::before{right:-16px;}
.cpanda__bubble::after{right:-13px;}
/* 代表挨拶は写真枠が画面の左端に寄るので、吹き出しを左に出すと画面外へ逃げる。
並びを入れ替えてパンダを左・吹き出しを右にする（尾も左向きに） */
.cpanda--msg{right:auto; left:0; flex-direction:row-reverse; justify-content:flex-end;}
.cpanda--msg .cpanda__fig{width:64px; height:50px;}
.cpanda--msg .cpanda__bubble::before{right:auto; left:-16px; border-left-color:transparent; border-right-color:#F3DDBE;}
.cpanda--msg .cpanda__bubble::after{right:auto; left:-13px; border-left-color:transparent; border-right-color:var(--white);}
.cpanda--prof{right:14px;}
.cpanda--prof .cpanda__fig{width:68px; height:52px;}
/* SPは地図が下に回るので、パンダは所在地と地図のあいだに立つ */
.cnext{padding:0 20px var(--s6);}
.cnext__list{grid-template-columns:1fr; gap:16px;}
.cnext__link{padding:24px 22px;}
.cnext__ttl{font-size:21px;}
}
/* ============================================================
沿革（page-history.php）
============================================================ */
/* 「西暦｜点線＋マーカー｜本文」の3カラム。
点線は各行の ::before で引き、行が縦に積まれることで1本につながって見える。
先頭行は最初のマーカーから、最終行は自分のマーカーまでで切る。
マーカーの色と形は6行周期で入れ替える（トンボ プレイカラードットの色味／§8） */
.chist{background:var(--bg); padding:var(--s6) 24px var(--s7);}
.chist__inner{max-width:var(--wrap); margin:0 auto;}
.hist{
/* 点線の位置とマーカーの中心は、この3つの値から計算している */
--hist-year:130px; /* 西暦カラムの幅 */
--hist-col:24px; /* マーカーカラムの幅＝カラム間の余白 */
--hist-top:15px; /* 行の上端からマーカー中心までの距離。本文1行目の中心に合わせる */
list-style:none; margin:0; padding:0;
}
.hist__item{
position:relative;
display:grid;
grid-template-columns:var(--hist-year) var(--hist-col) 1fr;
column-gap:var(--hist-col);
align-items:start;
padding-bottom:52px;
}
.hist__item:last-child{padding-bottom:0;}
/* 縦の点線。マーカーカラムの中心に置く */
.hist__item::before{
content:"";
position:absolute; top:0; bottom:0;
left:calc(var(--hist-year) + var(--hist-col) + var(--hist-col) / 2 - 1px);
width:0; border-left:2px dotted #C6BCA8;
}
.hist__item:first-child::before{top:var(--hist-top);}
.hist__item:last-child::before{bottom:auto; height:var(--hist-top);}
/* 西暦。height:0 にして、西暦のある行だけ背が高くなるのを防いでいる
（行の高さは本文だけで決まり、行間が最後まで一定になる） */
.hist__year{margin:0; height:0; text-align:right; line-height:1.1;}
.hist__y{
display:block;
font-family:"Zen Kaku Gothic New","Noto Sans JP",sans-serif;
font-size:clamp(23px,2.4vw,28px); font-weight:700;
letter-spacing:.04em; color:var(--ink);
}
.hist__era{display:block; margin-top:7px; font-size:12px; color:var(--ink3);}
/* 読み上げ用。目には見せないが、年を飛ばした行にも年を持たせておく */
.hist__ysr{
position:absolute; width:1px; height:1px; overflow:hidden;
clip-path:inset(50%); white-space:nowrap;
}
/* マーカー。中心を --hist-top に合わせるため、上に半径ぶんの余白を取る */
.hist__mark{margin:0; display:flex; justify-content:center;}
.hist__dot{
display:block; width:12px; height:12px; border-radius:50%;
margin-top:calc(var(--hist-top) - 6px);
background:var(--orange);
}
/* 色と形を6行周期で入れ替える。丸→三角→ドーム→丸→逆三角→丸 */
.hist__item:nth-child(6n+2) .hist__dot{
background:var(--yellow);
border-radius:0; clip-path:polygon(50% 0, 100% 100%, 0 100%);
}
.hist__item:nth-child(6n+3) .hist__dot{
background:var(--green); border-radius:999px 999px 0 0;
}
.hist__item:nth-child(6n+4) .hist__dot{background:var(--blue);}
.hist__item:nth-child(6n+5) .hist__dot{
background:var(--coral);
border-radius:0; clip-path:polygon(0 0, 100% 0, 50% 100%);
}
.hist__item:nth-child(6n) .hist__dot{background:var(--orange-dark);}
.hist__txt{
margin:0; padding-top:1px;
font-size:15px; line-height:1.9; color:var(--ink2);
}
/* 強調したい語句を で囲むと、黄色いマーカーを引いたように見せる */
.hist__txt mark{
background:linear-gradient(transparent 58%, var(--yellow2) 58%);
color:var(--ink); font-weight:600;
}
@media (max-width:820px){
.chist{padding:var(--s5) 20px var(--s6);}
/* 西暦カラムを詰める。3カラムのままでも読めるので、積み替えはしない */
.hist{--hist-year:62px; --hist-col:18px; --hist-top:13px;}
.hist__item{padding-bottom:38px;}
.hist__y{font-size:20px;}
.hist__era{margin-top:4px; font-size:10.5px; letter-spacing:-.02em;}
.hist__dot{width:10px; height:10px; margin-top:calc(var(--hist-top) - 5px);}
.hist__txt{font-size:14.5px; line-height:1.85;}
}
/* ============================================================
お知らせ（一覧 /news/ ・詳細 single）
============================================================ */
.sec--news{padding-top:var(--s5); padding-bottom:var(--s7);}
/* --- 一覧 --- */
/* 1行＝日付＋カテゴリ／件名／矢印。区切りは罫線ではなく余白と薄い線で軽く見せる */
.newslist{list-style:none; margin:0; padding:0; border-top:1px solid var(--line-soft);}
.newslist__item{border-bottom:1px solid var(--line-soft);}
.newslist__link{
display:grid; grid-template-columns:210px 1fr 20px; align-items:center;
gap:var(--s3); padding:22px 8px;
transition:background-color .15s ease;
}
.newslist__link:hover{background:var(--bg2);}
.newslist__meta{display:flex; align-items:center; gap:12px;}
.newslist__date{
font-size:14px; font-weight:600; letter-spacing:.04em; color:var(--ink3);
}
/* カテゴリは面ではなく枠で。件名より前に出ないようにしている */
.newslist__cat{
padding:3px 12px; border:1px solid var(--orange); border-radius:var(--r-full);
font-size:11.5px; font-weight:600; line-height:1.6; white-space:nowrap;
color:var(--orange);
}
.newslist__ttl{
margin:0;
font-size:16px; font-weight:600; line-height:1.7; color:var(--ink);
}
.newslist__link:hover .newslist__ttl{color:var(--orange);}
.newslist__chev{width:14px; height:14px; justify-self:end; color:var(--orange);}
.newslist__empty{text-align:center; color:var(--ink2);}
/* --- ページ送り --- */
.pager{
display:flex; justify-content:center; flex-wrap:wrap; gap:8px;
margin-top:var(--s5);
}
.pager .page-numbers{
display:grid; place-items:center;
min-width:44px; height:44px; padding:0 14px;
border:1px solid var(--line); border-radius:var(--r-s);
background:var(--white);
font-size:14px; font-weight:600; color:var(--ink2);
transition:background-color .15s ease, color .15s ease;
}
.pager a.page-numbers:hover{background:var(--orange-pale); color:var(--orange);}
.pager .page-numbers.current{
background:var(--orange); border-color:var(--orange); color:var(--white);
}
.pager .page-numbers.dots{border-color:transparent; background:none;}
/* --- 詳細 --- */
.post__ttl{
margin:10px 0 var(--s4); padding-bottom:18px;
font-size:clamp(20px,2.6vw,26px); font-weight:600;
line-height:1.6; letter-spacing:.04em;
}
.post__ph{margin:0 0 var(--s4);}
.post__ph img{width:100%; height:auto; border-radius:var(--r-m);}
.post__foot{margin-top:var(--s5); text-align:center;}
/* 本文（the_content の出力）。お知らせ詳細と固定ページで共用 */
.entry-body{font-size:16px; line-height:2;}
.entry-body > *:first-child{margin-top:0;}
.entry-body > *:last-child{margin-bottom:0;}
.entry-body p{margin:0 0 1.6em;}
.entry-body h2{
margin:2.4em 0 .9em; padding-bottom:12px;
font-size:20px; font-weight:600; line-height:1.6;
}
.entry-body h3{margin:2em 0 .8em; font-size:18px; font-weight:600; line-height:1.6;}
.entry-body ul,
.entry-body ol{margin:0 0 1.6em; padding-left:1.4em;}
.entry-body li{margin-bottom:.5em;}
.entry-body a{color:var(--orange); text-decoration:underline;}
.entry-body img{border-radius:var(--r-m);}
.entry-body blockquote{
margin:0 0 1.6em; padding:18px 22px; border-radius:var(--r-m);
background:var(--bg2); color:var(--ink2);
}
.entry-body table{width:100%; border-collapse:collapse; margin:0 0 1.6em; font-size:15px;}
.entry-body th,
.entry-body td{padding:12px 16px; border:1px solid var(--line-soft); text-align:left;}
.entry-body th{background:var(--bg2); font-weight:600;}
@media (max-width:768px){
.sec--news{padding-bottom:var(--s6);}
/* 日付とカテゴリを件名の上に積む。矢印はスペースを食うので消す */
.newslist__link{grid-template-columns:1fr; gap:8px; padding:18px 4px;}
.newslist__chev{display:none;}
.newslist__ttl{font-size:15px;}
.pager .page-numbers{min-width:40px; height:40px; padding:0 10px; font-size:13px;}
.post__ttl{margin-bottom:var(--s3);}
.entry-body{font-size:15px; line-height:1.95;}
.entry-body h2{font-size:18px;}
.entry-body h3{font-size:16px;}
}
/* ============================================================
社員インタビュー（一覧 /recruit/voice/ ・詳細 single-voice）
============================================================ */
.sec--vlist{padding-bottom:var(--s7);}
.vlead{
margin:0 auto var(--s5); max-width:800px;
text-align:center; font-size:var(--lead-size); line-height:var(--lead-lh);
color:var(--ink2);
}
/* --- 職種の絞り込み（一覧の上のタグナビ） ---
カードの部署チップ（.vcard__rolechip、黒地）と同じ職種名なので、選択中も黒地にして対応を見せる */
.vfilter{
display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px 20px;
margin:0 0 var(--s5);
}
.vfilter__list{display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:0; padding:0; list-style:none;}
.vfilter__tag{
display:inline-flex; align-items:center;
padding:9px 20px;
background:var(--white); border:1px solid var(--line-strong); border-radius:var(--r-full);
font-size:14px; font-weight:600; letter-spacing:.04em; line-height:1.3; color:var(--ink);
transition:border-color .15s ease, color .15s ease;
}
.vfilter__tag:hover{border-color:var(--orange); color:var(--orange-dark);}
.vfilter__tag.is-current{background:var(--ink); border-color:var(--ink); color:#fff;}
/* --- 一覧のカード --- */
.vcards{
list-style:none; margin:0; padding:0;
display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4) var(--s3);
}
.vcard{display:flex;}
/* 職種の絞り込みで外れたカード。display:flex が hidden 属性に勝ってしまうので明示する */
.vcard[hidden]{display:none;}
/* 絞り込みの切り替え中（site.js）。一覧まるごとを一瞬だけ薄くして、入れ替わりを見せる */
.vcards{transition:opacity .16s ease;}
.vcards.is-switching{opacity:0;}
/* カード全体がリンク。パネルで囲わず、写真＋テキストをそのまま地の上に置く */
.vcard__link{
display:flex; flex-direction:column; width:100%;
transition:opacity .15s ease;
}
.vcard__link:hover{opacity:.82;}
/* 写真。角は落とさず、部署チップだけを左上に重ねる */
.vcard__fig{position:relative; margin:0 0 14px 0;}
.vcard__ph{
margin:0; position:relative; overflow:hidden;
aspect-ratio:450/340; background:#EFECE7;
}
.vcard__ph img{width:100%; height:100%; object-fit:cover;}
/* 背景の白いイラストが地に溶けないよう、薄いグレーの枠を内側に重ねる（サイズは変えない） */
.vcard__ph::after{
content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
border:1px solid #DADADA;
}
/* 部署・職種は写真の左上に重ねる */
.vcard__rolechip{
position:absolute; z-index:2; top:12px; left:12px;
padding:7px 14px;
background:var(--ink); color:#fff;
font-size:12px; font-weight:700; letter-spacing:.06em; line-height:1.3;
}
/* インタビューの要約・キーワード。写真の下に並べる */
.vcard__tags{
display:flex; flex-wrap:wrap; gap:6px;
margin:0 0 14px; padding:0; list-style:none;
}
.vcard__tags li{
padding:7px 12px;
border:1px solid #E1DCD3; border-radius:3px;
font-size:12px; line-height:1.4; color:var(--ink2);
}
/* 写真未設定のときの仮枠。画像が入る場所と大きさが分かるようにしておく */
.vcard__noph{
position:absolute; inset:0; display:grid; place-items:center;
background:var(--orange-pale); border:2px dashed var(--orange);
font-size:13px; font-weight:700; letter-spacing:.1em; color:var(--orange-dark);
}
.vcard__body{
display:flex; flex-direction:column; flex:1 1 auto;
}
.vcard__catch{
margin:0 0 14px;
font-family:"Zen Kaku Gothic New","Noto Sans JP",sans-serif;
font-size:19px; font-weight:600; line-height:1.6; letter-spacing:.02em;
color:var(--ink);
}
/* 氏名と入社年。左のオレンジの縦罫でひとかたまりに見せる */
.vcard__namebox{
margin:0 0 14px; padding-left:12px;
border-left:3px solid var(--orange);
}
.vcard__name{
margin:0;
font-size:18px; font-weight:700; letter-spacing:.08em; color:var(--ink);
}
.vcard__year{margin:3px 0 0; font-size:12.5px; letter-spacing:.04em; color:var(--ink3);}
.vcard__excerpt{margin:0; font-size:14px; line-height:1.95; color:var(--ink2);}
/* 「読む」の行は常にカードの最下部へ。カードの高さが揃う */
.vcard__more2{
display:inline-flex; align-items:center; gap:6px;
margin-top:auto; padding-top:16px;
font-size:13px; font-weight:600; color:var(--orange);
}
.vcard__more2 svg{width:11px; height:11px; flex:none;}
.vcard__link:hover .vcard__more2{text-decoration:underline;}
.vcards__foot{margin-top:var(--s6); text-align:center;}
/* 3列のままだとSPで1枚が細くなりすぎ、見出しも部署チップも数文字で折り返す。
タブレットで2列、スマホで1列に落とす */
@media (max-width:900px){
.vcards{grid-template-columns:repeat(2,1fr); gap:var(--s3) var(--s2);}
}
@media (max-width:600px){
.vcards{grid-template-columns:1fr;}
/* SPはタグを左寄せで折り返す */
.vfilter{justify-content:flex-start;}
.vfilter__list{justify-content:flex-start; gap:8px;}
.vfilter__tag{padding:8px 14px; font-size:13.5px;}
}
/* ============================================================
募集要項（archive-job.php / single-job.php）
============================================================ */
.rjobs{background:var(--bg); padding:var(--s5) 24px var(--s7);}
.rjobs__inner{max-width:var(--wrap); margin:0 auto;}
.rjobs__grid{
margin-top:var(--s3);
display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s3);
}
/* パネル全体がリンク。ホバーで少し浮かせる */
.rjob{
display:flex; flex-direction:column;
padding:44px 40px 36px; border-radius:var(--r-l);
background:var(--white); border:1px solid var(--line-soft); box-shadow:var(--sh-s);
transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.rjob:hover{transform:translateY(-4px); box-shadow:var(--sh-m); border-color:var(--orange);}
.rjob__ttl{
margin:0 0 var(--s2);
font-size:clamp(20px,2.2vw,25px); font-weight:700; line-height:1.5;
letter-spacing:.04em; color:var(--ink);
}
.rjob__txt{margin:0 0 var(--s3); font-size:15px; line-height:2; color:var(--ink2);}
/* 「詳しく見る →」はカード下端に寄せる */
.rjob__more{
margin-top:auto; display:flex; align-items:center; justify-content:flex-end; gap:14px;
font-size:15px; font-weight:600; color:var(--orange);
}
.rjob__arw{
width:44px; height:44px; flex:none;
display:grid; place-items:center; border-radius:50%;
background:var(--orange); color:var(--white);
transition:transform .18s ease;
}
.rjob__arw svg{width:20px; height:20px;}
.rjob:hover .rjob__arw{transform:translateX(4px);}
.rjobs__none{margin:var(--s3) 0 0; color:var(--ink2);}
/* --- 詳細 --- */
.rlead{background:var(--bg); padding:var(--sec-gap) 24px 0;}
/* ここは長文のリードなので、版面（--wrap）ではなく読みやすい幅で止めている */
.rlead__inner{max-width:900px; margin:0 auto;}
.rlead__body p{margin:0 0 1.6em; font-size:16px; line-height:2.1; color:var(--ink2);}
.rlead__body p:last-child{margin-bottom:0;}
.rdetail{padding:var(--sec-gap) 24px var(--s7);}
.rdetail__inner{max-width:var(--wrap); margin:0 auto;}
/* 表は塗り分けず、白いカードの中に罫線だけで組む。
行の区切りは項目名の幅までをオレンジの実線、残りをグレーの点線にして目線を渡す */
/* 白いカードは幅いっぱい、中の表は読みやすい幅で中央に置く。
セルには左右のパディングを入れないので、罫線は表の幅いっぱいに通る */
/* ⚠️ 09-24、いちばん下の行にも罫を引いたので、下の余白を上と同じだけ取る（20→28px） */
.rtable__card{
margin-top:var(--s3); padding:20px 56px 28px;
background:var(--white); border-radius:var(--r-l); box-shadow:var(--sh-s);
}
.rtable{
width:100%; max-width:950px; margin:0 auto;
border-collapse:separate; border-spacing:0;
font-size:15px; line-height:1.9;
}
.rtable th,
.rtable td{padding:28px 0; text-align:left; vertical-align:top;}
.rtable th{
position:relative; width:260px;
font-weight:600; color:var(--ink); white-space:nowrap;
border-bottom:1px dashed var(--line-strong);
}
/* 罫線は点線を行の幅いっぱいに通し、頭にオレンジの実線を重ねる（実線は表幅の約17%） */
.rtable th::after{
content:""; position:absolute; left:0; bottom:-1px;
width:62%; height:2px; background:var(--orange);
}
.rtable td{color:var(--ink2); border-bottom:1px dashed var(--line-strong);}
/* ⚠️ 09-24、いちばん下の行にも下辺を引く（以前は最後だけ罫を消していた） */
/* 表の中の本文はエディタで組まれるので、基本タグだけ整える */
.rtable td p{margin:0 0 1em;}
.rtable td p:last-child{margin-bottom:0;}
.rtable td ul,
.rtable td ol{margin:0 0 1em; padding-left:1.4em;}
.rtable td li{margin-bottom:.4em;}
.rdetail__cta{margin-top:var(--s5); display:flex; flex-wrap:wrap; gap:var(--s2); justify-content:center;}
@media (max-width:820px){
.rjobs{padding:var(--s4) 20px var(--s6);}
.rjobs__grid{grid-template-columns:1fr; gap:var(--s2);}
.rjob{padding:30px 24px 24px;}
.rjob__arw{width:38px; height:38px;}
.rlead{padding:var(--s4) 20px 0;}
.rdetail{padding:var(--s4) 20px var(--s6);}
/* 表は上下に積む */
.rtable,
.rtable tbody,
.rtable tr,
.rtable th,
.rtable td{display:block; width:auto;}
/* 09-24、いちばん下の罫のぶん、下だけ余白を足す */
.rtable__card{padding:6px 22px 20px;}
/* 縦積みなので罫線は行に持たせる。点線を幅いっぱいに通し、頭だけ実線を重ねる */
.rtable tr{position:relative; padding:22px 0; border-bottom:1px dashed var(--line-strong);}
.rtable tr::after{
content:""; position:absolute; left:0; bottom:-1px;
width:22%; height:2px; background:var(--orange);
}
/* ⚠️ 09-24、項目名の下のオレンジ線（.rtable th::after）は出さない。
行の下辺にも同じ色の線があり、2本に見えるため */
.rtable th::after{content:none;}
.rtable th{white-space:normal; padding:0 0 10px; border-bottom:0;}
.rtable td{padding:0; border-bottom:0;}
}
/* ============================================================
お問い合わせフォーム（求職者向け /contact/）
============================================================ */
/* 電話での問い合わせ案内。見出しは会社概要と同じ .cttl、その下に斜めに切った黄色いパネル */
.cf-tel{margin-top:var(--sec-gap);}
.cf-tel .cttl{margin-bottom:0;}
/* パネルごと傾け、中身は逆向きに傾け返して文字は水平に保つ */
/* 地はサイトの淡いオレンジ（--orange-pale）。濃い地に黄色の数字という強い配色から、
まわりのパステルな面に合わせた組み合わせに寄せている。
文字は地に対して十分な濃さのものを選ぶ（番号は --ink で12:1） */
.cf-tel__panel{
margin-top:var(--s3); padding:25px 40px;
background:var(--orange-pale);
transform:skewX(-8deg);
}
.cf-tel__inner{transform:skewX(8deg); text-align:center;}
.cf-tel__lead{margin:0 0 12px; font-size:24px; font-weight:600; color:var(--orange-dark);}
.cf-tel__num{margin:0; font-family:"Zen Kaku Gothic New",sans-serif; font-size:34px; line-height:1.3;}
.cf-tel__num a{
display:inline-flex; align-items:center; gap:10px;
color:var(--ink); text-decoration:none; letter-spacing:.02em;
}
/* 手描き調の受話器PNG（326×366の縦長）。高さで数字に合わせ、幅は成り行きに任せる */
.cf-tel__ico{width:auto; height:34px; flex:none;}
.cf-tel__note{margin:14px 0 0; font-size:12.5px; color:var(--ink2);}
/* PCは1行に、スマホでは受付時間と休業日を2行に分ける */
.cf-tel__note b{font-size:15px; font-weight:600;}
.cf-tel__note span{margin-left:14px;}
/* ------------------------------------------------------------
フォーム本体。
項目をグループの枠で囲わず、ラベル→入力欄を縦に積むだけの構成。
面いっぱいに広げず、1カラムで読み進められる幅に絞っている。
------------------------------------------------------------ */
/* 入力欄が白なので、囲いはほんのり色のある地にして手前に浮かせる */
.cf{
margin:var(--s4) 0 0;
background:var(--white); border:1px solid var(--line); border-radius:var(--r-l);
box-shadow:var(--sh-s); overflow:hidden;
}
.cf-body{padding:40px 44px 44px;}
.cf-hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}
/* Cloudflare Turnstile（自動送信の判定）の置き場所。キー未設定のときは何も出ない */
.cf-ts{display:flex; justify-content:center; margin:var(--s3) 0 0;}
.cf-confirm__form .cf-ts{margin:20px 0 0;}
/* エラーのまとめ表示。フォームと同じ幅にそろえる */
.cf-alert{
margin:var(--s4) 0 0; padding:18px 22px;
background:#FCEFEC; border:1px solid #E8A395; border-radius:8px;
}
.cf-alert__ttl{margin:0 0 6px; font-size:14.5px; font-weight:600; color:#C4321F;}
.cf-alert__list{margin:0; padding-left:1.2em; font-size:14px; line-height:1.9; color:var(--ink2);}
.cf-note{margin:0 0 var(--s3); font-size:13px; color:var(--ink3);}
.cf-note .cf-req{margin:0 2px 0 0;}
.cf-block__note{
margin:0 0 26px; padding:16px 18px;
font-size:13px; line-height:1.9; color:var(--ink2);
background:var(--bg2); border-radius:8px;
}
.cf-block__note b{color:var(--orange-dark);}
/* 1項目＝ラベル＋入力欄。行同士は余白だけで分ける */
/* 1項目＝左にラベル、右に入力欄。行の下に細い区切り線を引く */
.cf-row{
display:grid; grid-template-columns:240px minmax(0,1fr); gap:28px;
padding:22px 0; border-bottom:1px solid #F0ECE5;
}
.cf-row:last-child{border-bottom:0;}
/* 指定は 1.6rem。このテーマは html の基準サイズを変えていないので 16px で当てている */
.cf-label{
display:block; margin-bottom:8px;
font-size:16px; font-weight:600; color:#1A1A1A;
}
/* 左右に並べる行では、入力欄の高さに合わせて少し下げる */
.cf-row .cf-label{margin-bottom:0; padding-top:14px;}
.cf-req{margin-left:4px; font-size:15px; color:var(--error);}
.cf-any{margin-left:6px; font-size:12px; font-weight:400; color:var(--ink3); white-space:nowrap;} /* 「任／意」と割れないように */
/* 入力欄。白地に細い罫線、角丸は控えめ。フォーカスでオレンジに */
.cf-input,.cf-select{
width:100%; padding:14px 14px;
font-family:inherit; font-size:16px; line-height:1.5; color:var(--ink);
background:var(--white); border:1px solid var(--line-strong); border-radius:var(--r-s);
transition:border-color .15s ease, box-shadow .15s ease;
}
.cf-input::placeholder{color:#C2BAAE;}
.cf-input:focus,.cf-select:focus{
outline:none; border-color:var(--orange); box-shadow:0 0 0 3px rgba(241,128,0,.14);
}
.cf-input.is-error,.cf-select.is-error{border-color:var(--error); background:#FDF7F6;}
.cf-textarea{line-height:1.9; resize:vertical;}
.cf-select{
appearance:none; padding-right:38px; cursor:pointer; color:var(--ink2);
background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A7F72' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='m5 9 7 7 7-7'/%3E%3C/svg%3E");
background-repeat:no-repeat; background-position:right 13px center; background-size:14px;
}
.cf-help{margin:7px 0 0; font-size:12.5px; line-height:1.8; color:var(--ink3);}
/* 外部の予約ページへ送るボタン（管理画面でURLを入れたときだけ、カレンダーのかわりに出る）。
入力欄と同じ列に置くので、ボタンは中身なりの幅で左に寄せる */
.cf-extbtn{margin:0;}
.cf-extbtn .btn{display:inline-flex;}
.cf-msg{margin:7px 0 0; font-size:13px; font-weight:600; color:#C4321F;}
/* 登録会の予約枠カレンダー（描画は site.js の [data-mcal]、空きは inc/meeting.php）
○＝空きあり（押せる）／満＝満席／無印＝受付なし。選んだ日・時刻はオレンジで塗る */
.mcal{
padding:18px 18px 16px; background:var(--white);
border:1px solid var(--line-strong); border-radius:var(--r-s);
}
.mcal.is-error{border-color:var(--error); background:#FDF7F6;}
.mcal__msg{margin:0; font-size:14px; line-height:1.9; color:var(--ink2);}
.mcal__notice{
margin:0 0 14px; padding:10px 14px; font-size:13px; font-weight:600; line-height:1.8;
color:#C4321F; background:#FDF1EF; border-radius:6px;
}
.mcal__head{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px;}
.mcal__ttl{margin:0; font-size:17px; font-weight:600; color:var(--ink);}
.mcal__nav{
display:grid; place-items:center; width:38px; height:38px; padding:0; cursor:pointer;
color:var(--orange-dark); background:var(--orange-pale); border:0; border-radius:50%;
}
.mcal__nav svg{width:18px; height:18px;}
.mcal__nav:disabled{color:#C2BAAE; background:var(--bg2); cursor:default;}
.mcal__grid{display:grid; grid-template-columns:repeat(7,1fr); gap:4px;}
.mcal__wd{padding:4px 0; font-size:12px; text-align:center; color:var(--ink3);}
.mcal__wd.is-sun{color:#C4321F;}
.mcal__wd.is-sat{color:var(--blue-deep);}
.mcal__day{
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
min-height:52px; padding:4px 0; font-family:inherit; color:var(--ink3);
background:transparent; border:1px solid transparent; border-radius:6px;
}
.mcal__day.is-blank{visibility:hidden;}
.mcal__num{font-size:15px; line-height:1.2;}
.mcal__mark{min-height:1.2em; font-size:11px; line-height:1.2;}
.mcal__day:disabled{cursor:default; opacity:.7;}
.mcal__day.is-open{
cursor:pointer; color:var(--ink); background:var(--orange-pale); border-color:var(--orange-soft);
transition:background .15s ease, border-color .15s ease;
}
.mcal__day.is-open .mcal__mark{font-weight:700; color:var(--orange-dark);}
.mcal__day.is-open:hover{border-color:var(--orange);}
.mcal__day.is-picked,
.mcal__day.is-picked:hover{color:var(--white); background:var(--orange); border-color:var(--orange);}
.mcal__day.is-picked .mcal__mark{color:var(--white);}
.mcal__legend{
display:flex; flex-wrap:wrap; gap:4px 16px; margin:12px 0 0;
font-size:12px; color:var(--ink3);
}
.mcal__legend span{display:inline-flex; align-items:center;}
/* 行の高さを1にしないと、本文の line-height の分だけ字が枠の中で下にずれる。
さらに Noto Sans JP は字面が下寄りに出るので、下に1.5px足して見た目の中心に合わせる（実測で約0.75px下がっていた） */
.mcal__legend b{
display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box; width:18px; height:18px; margin-right:5px; padding-bottom:1.5px;
font-size:11px; font-weight:700; line-height:1; border:1px solid var(--line-strong); border-radius:4px;
}
.mcal__legend b.is-open{color:var(--orange-dark); background:var(--orange-pale); border-color:var(--orange-soft);}
.mcal__times{margin-top:18px; padding-top:16px; border-top:1px dashed var(--line);}
.mcal__times-ttl{margin:0 0 10px; font-size:14px; font-weight:600; color:var(--ink);}
.mcal__time-list{display:flex; flex-wrap:wrap; gap:8px;}
.mcal__time{
min-width:92px; padding:10px 14px; cursor:pointer;
font-family:inherit; font-size:15px; color:var(--ink);
background:var(--white); border:1px solid var(--line-strong); border-radius:var(--r-full);
transition:border-color .15s ease, background .15s ease;
}
.mcal__time:hover{border-color:var(--orange);}
.mcal__time small{margin-left:6px; font-size:11px;}
.mcal__time:disabled{cursor:default; color:#B3AA9E; background:var(--bg2); border-color:var(--line);}
.mcal__time.is-picked{color:var(--white); background:var(--orange); border-color:var(--orange);}
.mcal__picked{
display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; margin:16px 0 0; padding:12px 14px;
font-size:15px; color:var(--ink); background:var(--orange-pale); border-radius:6px; outline:none;
}
.mcal__picked-lbl{
padding:2px 10px; font-size:12px; font-weight:600; color:var(--white);
background:var(--orange); border-radius:var(--r-full);
}
.mcal button:focus-visible{outline:2px solid var(--orange); outline-offset:2px;}
@media (max-width:600px){
.mcal{padding:14px 10px 12px;}
.mcal__grid{gap:3px;}
.mcal__day{min-height:46px;}
.mcal__time{flex:1 1 calc(50% - 4px); min-width:0;}
}
/* 面談希望日：日付＋時間帯を1行に */
.cf-when{display:flex; gap:10px;}
.cf-input--date{flex:1 1 55%; min-width:0;}
.cf-select--time{flex:1 1 45%; min-width:0;}
/* 選択肢。ラジオの丸は出さず、枠そのものを押して選ぶ形にしている */
.cf-radios{display:grid; gap:10px;}
/* ⚠️ 基本形は必ず modifier（--pill / --note）より前に置くこと。
後ろにあると display:flex が --note の display:grid を打ち消し、
説明文がタイトルの下ではなく右に並んでしまう */
.cf-radio{
position:relative; display:flex; align-items:flex-start; padding:15px 16px; cursor:pointer;
background:var(--white); border:1px solid var(--line-strong); border-radius:var(--r-s);
transition:border-color .15s ease, background-color .15s ease, color .15s ease;
}
.cf-radio:hover{border-color:var(--orange);}
/* 選択中は枠を太らせる。ずれないよう内側の影で太さを足す */
.cf-radio:has(input:checked){
border-color:var(--orange); background:#FFF8EF; color:var(--ink);
box-shadow:inset 0 0 0 1px var(--orange);
}
/* 丸は隠すが、キーボード操作で位置が分かるようフォーカス枠は残す */
.cf-radio input{position:absolute; opacity:0; width:1px; height:1px; margin:0;}
.cf-radio:has(input:focus-visible){outline:2px solid var(--orange); outline-offset:2px;}
/* ご用件のように選択肢が短いものは、横に並べて幅も中身なりに */
.cf-radios--inline{display:flex; flex-wrap:wrap; gap:10px;}
.cf-radio--pill{
justify-content:center; align-items:center; gap:9px; min-width:120px;
padding:13px 22px; border-radius:var(--r-full);
font-size:14.5px; font-weight:600; color:var(--ink2);
}
/* ラジオと分かるように丸を描く。選択中は中心にオレンジの点が残る
（補足つきの .cf-radio--note では、下の定義が位置と大きさを上書きする） */
.cf-radio--pill::before{
content:""; flex:none; width:16px; height:16px;
background:var(--white); border:1px solid #C9C1B4; border-radius:50%;
transition:border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.cf-radio--pill:has(input:checked)::before{
background:var(--orange); border-color:var(--orange);
box-shadow:inset 0 0 0 3px var(--white);
}
/* 補足説明つきの選択肢。丸＋（見出し／説明）の2列組みで、幅いっぱいに1列で並べる */
.cf-radio--note{
flex:1 1 100%;
display:grid; grid-template-columns:auto 1fr; column-gap:12px; row-gap:2px;
justify-content:start; align-items:start;
padding:11px 16px; border-radius:8px; text-align:left;
}
/* ラジオと分かるように丸を描く。選択中は中心にオレンジの点が残る */
.cf-radio--note::before{
content:""; grid-column:1; grid-row:1 / span 2; align-self:start;
width:18px; height:18px; margin-top:2px; flex:none;
background:var(--white); border:1px solid #C9C1B4; border-radius:50%;
transition:border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.cf-radio--note:has(input:checked)::before{
background:var(--orange); border-color:var(--orange);
box-shadow:inset 0 0 0 3px var(--white);
}
/* 選択肢のタイトルの下に添える説明。行を細く見せたいので、
本文より一段小さく・行間も詰める */
.cf-radio__note{font-size:11.5px; font-weight:400; line-height:1.6; color:var(--ink3);}
.cf-radio:has(input:checked) .cf-radio__note{color:var(--ink2);}
/* 複数選択のチェックボックス群（興味のある職種など）。ピル型のまま横に並べて折り返す */
.cf-checks{display:flex; flex-wrap:wrap; gap:10px;}
.cf-check{
display:inline-flex; align-items:center; gap:8px; padding:11px 16px; cursor:pointer;
background:var(--white); border:1px solid var(--line-strong); border-radius:var(--r-full);
font-size:14px; color:var(--ink2);
transition:border-color .15s ease, background-color .15s ease;
}
.cf-check:hover{border-color:var(--orange);}
.cf-check:has(input:checked){border-color:var(--orange); background:#FFF8EF; color:var(--ink);}
.cf-check input{width:18px; height:18px; accent-color:var(--orange); flex:none;}
/* 同意 */
/* ⚠️ 09-24、外枠（ベージュの箱）をやめた。中のチェックにも枠があり二重に見えていたため。
エラー時に赤くなるのは中の枠（.cf-agree.is-error .cf-check--agree）なので役割は残る。
戻すときは padding:22px; background:#F7F4EF; border-radius:var(--r-s); を足す */
.cf-agree{margin-top:var(--s4); text-align:center;}
.cf-agree.is-error .cf-check--agree{border-color:var(--error);}
.cf-check--agree a{color:var(--orange-dark);}
.cf-check--agree .cf-req{margin-left:2px;}
.cf-submit{margin-top:var(--s3); text-align:center;}
.cf-btn{width:100%; max-width:420px; justify-content:center; font-size:16px; padding:19px 32px;}
.cf-submit__note{margin:14px 0 0; font-size:12.5px; line-height:1.9; color:var(--ink3);}
/* 送信完了 */
.cf-done{max-width:720px; margin:0 auto; padding:var(--s5) var(--s3); text-align:center;}
.cf-done__ico{display:block; width:64px; height:64px; margin:0 auto var(--s2); color:var(--orange);}
.cf-done__ico svg{width:100%; height:100%;}
.cf-done__ttl{margin:0 0 var(--s2); font-family:"Zen Kaku Gothic New",sans-serif; font-size:26px; color:var(--ink);}
.cf-done__txt{margin:0; font-size:15px; line-height:2; color:var(--ink2);}
.cf-done__txt a{color:var(--orange-dark);}
/* 送信前の確認画面。フォームと同じ幅の白いカードに、項目を2列で並べる */
.cf-confirm{
max-width:860px; margin:var(--s4) auto 0; padding:var(--s4) var(--s3);
background:var(--white); border:1px solid var(--line); border-radius:var(--r-m);
}
.cf-confirm__ttl{margin:0 0 10px; font-size:22px; font-weight:700; letter-spacing:.04em; text-align:center;}
.cf-confirm__lead{margin:0 0 var(--s3); font-size:14.5px; line-height:1.9; color:var(--ink2); text-align:center;}
.cf-confirm__list{margin:0; border-top:1px solid var(--line-soft);}
.cf-confirm__row{
display:grid; grid-template-columns:minmax(160px,30%) 1fr; gap:16px;
padding:14px 4px; border-bottom:1px solid var(--line-soft);
}
.cf-confirm__row dt{margin:0; font-size:14px; font-weight:700; color:var(--ink);}
.cf-confirm__row dd{margin:0; font-size:15px; line-height:1.9; color:var(--ink2); word-break:break-word;}
.cf-confirm__empty{color:#A79E90;}
.cf-confirm__btns{
display:flex; flex-wrap:wrap; gap:14px; justify-content:center;
margin-top:var(--s4);
}
@media (max-width:700px){
.cf-confirm{padding:var(--s3) 18px;}
.cf-confirm__row{grid-template-columns:1fr; gap:4px; padding:12px 2px;}
.cf-confirm__btns{flex-direction:column; align-items:stretch;}
}
@media (max-width:820px){
.cf-tel__panel{padding:18px 15px; margin:20px 15px;}
/* ⚠️ 17px固定だと375px以下で「＼…／」の末尾の「／」だけが次の行に落ち、
1行目の頭の「＼」と対にならず、意味不明な斜線が1本だけ浮いて見えていた（09-24）。
画面幅に合わせて縮め、対の記号が必ず同じ行に収まるようにする */
.cf-tel__lead{font-size:clamp(12px,3.9vw,17px); white-space:nowrap;}
.cf-tel__num{font-size:25px;}
.cf-tel__ico{height:26px;}
.cf-tel__note b,
.cf-tel__note span{display:block;}
.cf-tel__note span{margin:4px 0 0;}
.cf-when{flex-wrap:wrap;}
.cf-input--date,.cf-select--time{flex:1 1 100%;}
.cf-btn{max-width:none;}
.cf-done__ttl{font-size:22px;}
}
/* --- 項目のまとまり --- */
.cf-step+.cf-step{margin-top:var(--s4); padding-top:var(--s4); border-top:1px solid var(--line);}
/* 同意欄だけのステップ。余白と背景は .cf-agree が持っているので、区切りは重ねない */
.cf-step+.cf-step--agree{margin-top:0; padding-top:0; border-top:0;}
/* 面談ステップの注記 */
.cf-block__note{
margin:0 0 26px; padding:16px 18px;
font-size:13px; line-height:1.9; color:var(--ink2);
background:var(--bg2); border-radius:8px;
}
.cf-block__note b{color:var(--orange-dark);}
/* --- ご用件による出し分け ---
:has() が使えないブラウザでは、面談欄は常に表示・必須マークも両方出したまま。
実際の必須判定はサーバー側（inc/contact.php）が持っているので、送信結果は変わらない */
@supports selector(:has(*)){
/* 面談の方法・希望日は「無料面談」を選んだときだけ開く */
.cf-step--meeting{display:none;}
.cf:has(#cf-purpose-meeting:checked) .cf-step--meeting{display:block;}
/* ご相談・ご質問は「ご相談」を選んだ方には必須 */
.cf-req--consult{display:none;}
.cf:has(#cf-purpose-consult:checked) .cf-req--consult{display:inline;}
.cf:has(#cf-purpose-consult:checked) .cf-any--consult{display:none;}
/* 企業様向け：依頼内容の欄は「お仕事依頼」を選んだときだけ開く */
.cf-step--order{display:none;}
.cf:has(#cf-purpose-order:checked) .cf-step--order{display:block;}
/* 企業様向け：ご説明の希望日程は「説明依頼」を選んだときだけ開く */
.cf-step--explain{display:none;}
.cf:has(#cf-purpose-explain:checked) .cf-step--explain{display:block;}
/* 企業様向け：ご相談・ご質問は「その他」を選んだ方には必須 */
.cf-req--other{display:none;}
.cf:has(#cf-purpose-other:checked) .cf-req--other{display:inline;}
.cf:has(#cf-purpose-other:checked) .cf-any--other{display:none;}
}
/* --- 履歴書のファイル欄。実体の input は隠し、枠（label）をクリック領域にする --- */
.cf-file{position:relative;}
.cf-file__input{
position:absolute; width:1px; height:1px; margin:-1px; padding:0;
overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.cf-file__drop{
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
min-height:132px; padding:24px 18px;
text-align:center; cursor:pointer;
background:var(--bg2);
border:2px dashed #D9D2C6; border-radius:var(--r-s);
transition:border-color .18s ease, background-color .18s ease;
}
.cf-file__lead{font-size:14.5px; font-weight:700; color:var(--ink2);}
.cf-file__sub{font-size:12.5px; color:var(--ink3);}
/* キーボード操作でも枠が光るように、隠した input のフォーカスを枠へ渡す */
.cf-file__drop:hover,
.cf-file__input:focus-visible+.cf-file__drop,
.cf-file.is-drag .cf-file__drop{border-color:var(--orange); background:#FDF6EC;}
.cf-file.is-error .cf-file__drop{border-color:var(--error);}
/* 選んだあとのファイル名。JSが付け外しする */
.cf-file__picked{
display:flex; align-items:center; gap:10px;
margin:10px 0 0; padding:10px 14px;
font-size:14px; line-height:1.7; color:var(--ink2); word-break:break-all;
background:#FFF; border:1px solid var(--line); border-radius:8px;
}
/* display:flex が [hidden] に勝ってしまうので、明示的に消す */
.cf-file__picked[hidden]{display:none;}
.cf-file__clear{
flex:0 0 auto; margin-left:auto; padding:4px 10px;
font-size:12.5px; color:var(--ink3); cursor:pointer;
background:var(--bg2); border:1px solid var(--line); border-radius:999px;
}
.cf-file__clear:hover{color:var(--orange-dark); border-color:var(--orange);}
/* --- 選考フロー。フォームの上に置く案内 --- */
/* 見出し（.cttl）が中央そろえなので、その下に続く案内文も中央でそろえる。
中央そろえにするのは見出しに付く案内文だけ。入力欄のラベル・補足（.cf-help など）は
読みながら記入していく文なので左そろえのままにしておくこと */
.cf-flow{margin-top:var(--sec-gap); text-align:center;}
.cf-flow .cttl{margin-bottom:20px;}
.cf-flow__steps{margin:0; font-size:15px; line-height:2; color:var(--ink); text-wrap:pretty;}
.cf-flow__note{margin:6px 0 0; font-size:13px; line-height:1.9; color:var(--ink3);}
/* --- フォームの見出し。会社概要ページと同じ .cttl をそのまま使う --- */
.cf-head{margin-top:var(--sec-gap);}
.cf-head .cttl{margin-bottom:14px;}
.cf-head__lead{
margin:0; font-size:14px; line-height:1.9; color:var(--ink2);
text-align:center; text-wrap:pretty;
}
@media (max-width:820px){
.cf-head{margin-top:var(--s5);}
.cf-head__lead{font-size:14px;}
.cf{border-radius:12px;}
.cf-body{padding:26px 20px 30px;}
/* 縦積みではラベルを入力欄の上に戻す */
.cf-row{grid-template-columns:1fr; gap:8px; padding:18px 0;}
.cf-row .cf-label{padding-top:0;}
/* ⚠️ 09-24、同意のチェックが中央ぞろえで「…同意し／ます」と割れていたので左ぞろえにする。
チェックは1行目の高さに合わせ、文字はその右に回り込ませる */
.cf-agree{text-align:left;}
/* 09-24、チェックと文字は上下の中心をそろえる（文字が2行に折り返しても中央） */
.cf-check--agree{
display:flex; align-items:center; gap:10px;
width:100%; padding:12px 14px; border-radius:14px;
text-align:left; line-height:1.6;
}
}
/* ============================================================
対応エリア（FV直下）
============================================================ */
/* 左＝関西の地図、右＝対応エリア一覧。
地図は支給イラストの県境を追ってパス化し、輪郭を間引いた簡易シルエット */
/* 地は .entryhero〜.mission から続くクリーム（09-04 支給デザイン）*/
.area{padding:var(--s5) 24px var(--s6); background:var(--bg2);}
.area__inner{
/* 右のエリア一覧に幅を回すため、地図の列を絞っている（09-09）。
版面（--wrap＝1100px）は他のセクションと揃えたいので、ここは広げない */
display:grid; grid-template-columns:minmax(0,33%) minmax(0,1fr);
gap:clamp(18px,2.6vw,42px); align-items:center;
}
/* --- 特長の導入パネル --- */
/* .mission の特長カードを受ける見出し＋リード。特長1〜3で同じ型を使う。
白いカードに、右下へグレーのずらし影 */
.ptlead{
position:relative;
margin:0 0 var(--s6);
padding:40px 48px 44px;
background:var(--white);
border-radius:var(--r-l);
box-shadow:6px 6px 0 #cbc8c233;
}
/* パネルの右肩に置く手書きの一言（支給素材・POINT 03 のみ）。
⚠️ 絵の地が白なので、白いパネルの上に置くことが前提。
本文と重ならないよう、置いた幅ぶんは .ptlead--3 の右パディングで空けている */
.ptlead__catch{
position:absolute; right:80px; top:120px;
width:clamp(160px,12vw,220px);
pointer-events:none;
}
.ptlead__catch img{display:block; width:100%; height:auto;}
/* ⚠️ 逃げはパネルではなく見出し・本文だけに持たせる。
パネルに持たせると、中に入れたスマホと項目一覧まで右に寄ってしまう */
/* 逃げは「右からの位置80px ＋ 絵の幅」からパネルの右パディング48pxを引いた値 */
.ptlead--3 .ptlead__ttl,
.ptlead--3 .ptlead__txt{padding-right:calc(clamp(160px,12vw,220px) + 32px);}
/* 本文の語に付ける※と、その注意書き（POINT 02 の派遣法の注意）。本文より一段小さく、薄く */
.ptlead__mark{font-size:.8em; vertical-align:.3em; margin-left:.1em;}
.ptlead__note{
margin:14px 0 0;
font-size:12.5px; line-height:1.85; color:var(--ink3);
}
.ptlead__note a{color:var(--orange-dark); text-decoration:underline; text-underline-offset:3px; white-space:nowrap;}
@media (max-width:900px){
/* 幅が足りず見出しに重なるので、狭い画面では出さない */
.ptlead__catch{display:none;}
.ptlead--3 .ptlead__ttl,
.ptlead--3 .ptlead__txt{padding-right:0;}
}
/* 「POINT 01」の小さいラベル。英字は表記ルールどおり大文字。
色は上の特長カード（.mpt--a/--b/--c）と1対1で対応させる */
/* ⚠️ Noto Sans JP は 400/500/600 しか読み込んでいないので、font-weight を
800・900 に上げても見た目は 700 と変わらない（どれも 600 への擬似ボールド）。
ここだけ太らせたいので、同色の輪郭を足して太く見せている */
.ptlead__no{
margin:0 0 6px;
font-size:14px; font-weight:700; letter-spacing:.14em; line-height:1;
color:var(--ptlead-c);
-webkit-text-stroke:.6px currentColor;
}
.ptlead--1{--ptlead-c:#ff7a7d;}
.ptlead--2{--ptlead-c:#ffa547;}
.ptlead--3{--ptlead-c:#38a9cd;}
.ptlead__ttl{
margin:0 0 18px;
font-size:clamp(26px,2.6vw,34px); font-weight:700;
line-height:1.4; letter-spacing:.01em;
color:var(--ink);
}
/* パネルの上から顔を出すパンダ（支給素材 457×541）。
枠の高さを絵より小さくして overflow:hidden で切ると、体の下半分が
パネルの上辺にきれいに隠れる（z-index を使わないので重なり順の事故がない）。
横位置は版面（--wrap）の右端寄り。パネルは画面右へ突き抜けているので、
パネル自身を基準にすると読める範囲の外へ出てしまう */
/* 横位置の基準。パネルが画面右へ突き抜けている幅（PC）と、突き抜けていない幅（SP）の
どちらでも「読める範囲の右端」を指すよう min() で取る */
.ptlead__panda,
.ptlead__bubble{--ptlead-right:min(var(--wrap), 100%);}
.ptlead__panda{
position:absolute; bottom:100%;
left:calc(var(--ptlead-right) - 80px); transform:translateX(-50%);
/* 絵の高さは 110×541/454 ≒ 131px。そのうち上の 96px ぶんだけ見せる */
display:block; width:110px; height:96px;
overflow:hidden; pointer-events:none;
}
.ptlead__panda img{display:block; width:100%; height:auto;}
/* パンダの左に置く吹き出し。白地に淡いブルーの枠、尾は右向き */
.ptlead__bubble{
position:absolute; bottom:calc(100% + 16px);
left:calc(var(--ptlead-right) - 150px); transform:translateX(-100%);
padding:18px 28px;
background:var(--white);
border:2px solid #D9E7F5; border-radius:28px;
font-size:17px; font-weight:700; line-height:1.7; letter-spacing:.02em;
white-space:nowrap; pointer-events:none;
}
/* 尾は三角を2枚重ねて作る。奥が枠の色、手前が白で、枠線の内側だけを白で塗りつぶす */
.ptlead__bubble::before,
.ptlead__bubble::after{
content:""; position:absolute; top:50%; margin-top:-12px;
width:0; height:0; border:12px solid transparent;
}
/* POINT 01 だけは右寄せではなくパネルの中央に置く（--c）。
吹き出しはその左に並ぶので、パンダの中心から半分＋隙間ぶん左へずらす */
.ptlead__panda--c{left:50%;}
.ptlead__bubble--c{left:calc(50% - 75px);}
.ptlead__bubble::before{right:-24px; border-left-color:#D9E7F5;}
.ptlead__bubble::after{right:-20px; border-left-color:var(--white);}
/* 本文は濃いグレー。赤はラベル（.ptlead__no）だけに絞る */
.ptlead__txt{
margin:0; font-size:17px; font-weight:700; line-height:1.9;
color:#3b3b3b;
}
/* PCでは右だけ画面の端まで突き抜けさせる。
中身の右端は版面にそろえたいので、はみ出したぶんをパディングで戻している。
右の角は画面外なので丸めない。
⚠️ レーンを敷く 1280px 以上では版面が中央にないため、
ファイル末尾の「左のイラストレーン」ブロックで --edge を使って上書きしている */
@media (min-width:901px){
.ptlead{
margin-right:calc(50% - 50vw);
padding-right:calc(50vw - 50% + 48px);
border-radius:var(--r-l) 0 0 var(--r-l);
}
}
/* --- 左：地図 --- */
.area__map{position:relative;}
.kmap{
width:100%; height:auto; display:block;
/* 支給イラストと同じく、面全体にやわらかい影を落とす */
filter:drop-shadow(0 10px 18px rgba(90,70,40,.13));
}
/* 管理画面（トップページ > 募集中のエリア）で差し替えた地図の画像。
SVGの地図と同じ幅・同じ影で、入れ替えても見た目の重さが変わらないようにしている。
⚠️ 縦横比は画像なりなので、SVG（728×780）に近い比率のものを選んでもらう前提 */
.area__mapimg{
width:100%; height:auto; display:block;
filter:drop-shadow(0 10px 18px rgba(90,70,40,.13));
}
/* 府県どうしの隙間はパス側で取ってあるので、線は引かない */
.kmap__pref{
/* 対応外の府県。地図としての形は残しつつ、色では主張させない */
fill:#E2DBCE;
}
.kmap__pref.is-active{fill:var(--orange);}
/* 一部エリアのみ対応（滋賀）。ベタのオレンジと差をつける */
.kmap__pref.is-part{fill:#FBC77E;}
/* 座標は各府県の塗りの上下中央。CJKは central のほうが上下の中心に乗る */
.kmap__name{
font-family:"Zen Kaku Gothic New","Noto Sans JP","Hiragino Sans",sans-serif;
font-size:27px; font-weight:700; letter-spacing:.06em;
text-anchor:middle; dominant-baseline:central;
fill:var(--ink3); pointer-events:none;
}
.kmap__name.is-active{fill:#fff;}
.kmap__name.is-part{fill:var(--orange-dark);}
/* --- 凡例 --- */
.arealegend{
display:flex; justify-content:center; gap:22px;
margin:18px 0 0; padding:0; list-style:none;
font-size:13px; font-weight:600; color:var(--ink2);
}
.arealegend li{display:flex; align-items:center; gap:7px;}
.arealegend i{
width:14px; height:14px; border-radius:4px; background:var(--orange);
box-shadow:0 0 0 1.5px #fff;
}
.arealegend .is-part i{background:#FBC77E;}
/* --- 右：エリア一覧 --- */
/* 見出しの下に添える英字。見出しの文字の頭にそろえたいので、
虫めがねと並ぶ列（.area__ttlbody）の中に入れている */
.area__en{
display:block; margin:2px 0 0;
font-size:13px; font-weight:600; letter-spacing:.22em; color:var(--orange);
}
/* 見出しの左に虫めがねのイラストを置く。文字は折り返しても
イラストの右で揃うよう、flex で2カラムにしている */
.area__ttl{
display:flex; align-items:center; gap:clamp(12px,1.4vw,18px);
margin:0 0 var(--s4);
font-size:clamp(24px,2.4vw,30px); font-weight:600; line-height:1.5;
letter-spacing:.02em; word-break:auto-phrase;
}
.area__ttlico{
flex:none; width:clamp(30px,3vw,40px); height:auto;
/* 下端を軸にすると、潰れ・伸びが接地したまま起きて跳ねて見える */
transform-origin:50% 100%;
animation:hiro-search 4.2s ease-in-out infinite;
}
/* ひと跳ねだけ。沈む→跳ぶ→着地→小さくもう一度、で収める。
動くのは後半だけで、大半は止まっている（ずっと動くと本文の邪魔になるため） */
@keyframes hiro-search{
0%, 62%, 100%{transform:translateY(0) scale(1,1);}
68%{transform:translateY(0) scale(1.08,.92);}
76%{transform:translateY(-9px) scale(.95,1.06);}
86%{transform:translateY(0) scale(1.06,.94);}
93%{transform:translateY(-3px) scale(.99,1.01);}
}
/* 動きを減らす設定の環境では止める */
@media (prefers-reduced-motion:reduce){
.area__ttlico{animation:none;}
}
/* 蛍光ペンの下線は .sec__ttl .mark と同じ引き方 */
.area__ttl .mark{
padding:0 .12em;
background-image:linear-gradient(180deg,
transparent 0 62%, #FFEB6B 62% 98%, transparent 98%);
-webkit-box-decoration-break:clone;
box-decoration-break:clone;
}
.area__read{margin:0 0 var(--s4); font-size:15px; line-height:1.9; color:var(--ink2);}
/* 県ごとに白い帯。左にバッジ、右に市区町村を1行で並べる（09-09 支給ラフ） */
.arealist{margin:0; padding:0; list-style:none; display:grid; gap:12px;}
.arealist__item{
display:flex; align-items:center; gap:20px;
padding:14px 20px;
background:var(--white); border-radius:14px;
box-shadow:var(--sh-s);
}
.arealist__pref{
flex:none; margin:0;
display:flex; align-items:center; justify-content:center;
min-width:104px; padding:7px 16px;
font-size:14px; font-weight:700; letter-spacing:.08em;
/* 地図の塗りと同じ --orange（#F18000）。
⚠️ ラフから拾った #EE8C42 は青が66入っていて彩度72%。明度はほぼ同じだが、
隣の地図（彩度100%）と並ぶとくすんで見えたので、サイトの純オレンジに揃えた。
⚠️ 白ヌキ文字とのコントラストは 2.6:1 で、14px・700 に必要な 4.5:1 には届かない。
読みやすさを優先するなら --orange-dark（#D96F00・3.4:1）以上に落とすこと */
color:#fff; background:var(--orange); border-radius:10px;
}
/* 市区町村は「›」を頭につけて折り返し並べる */
.arealist__city{
flex:1; margin:0; padding:0; list-style:none;
display:flex; flex-wrap:wrap; gap:4px 18px;
font-size:14px; line-height:1.8; color:var(--ink2);
}
.arealist__city li{position:relative; padding-left:13px;}
.arealist__city li::before{
content:"›"; position:absolute; left:0;
font-weight:700; color:var(--orange);
}
.area__note{margin:16px 0 0; font-size:12.5px; color:var(--ink3);}
.area__cta{margin-top:var(--s4);}
@media (max-width:900px){
.area{padding:var(--s5) 24px;}
.area__inner{grid-template-columns:1fr; gap:var(--s4);}
.area__map{max-width:380px; margin:0 auto;}
.area__ttl,.area__en,.area__read{text-align:center;}
.area__cta{text-align:center;}
.ptlead{margin-bottom:var(--s5); padding:26px 24px 28px;}
.ptlead__no{font-size:12.5px;}
.ptlead__ttl{font-size:21px; margin-bottom:14px;}
.ptlead__txt{font-size:16px;}
/* ⚠️ 09-24、狭い画面でも吹き出しを出す（以前は display:none で消していた）。
パンダの左に並べる幅は無いので、パンダの真上に載せる。尾も下向きに付け替える */
.ptlead__panda{left:calc(var(--ptlead-right) - 64px); width:88px; height:78px;}
.ptlead__bubble{
left:auto; right:12px; transform:none;
bottom:calc(100% + 86px);
max-width:min(240px, calc(100% - 24px));
padding:10px 14px; border-radius:18px;
font-size:13px; line-height:1.6; white-space:normal; text-align:center;
}
/* 尾はパンダを指して下向き。左右向きの三角は消す */
.ptlead__bubble::before,
.ptlead__bubble::after{
top:auto; margin-top:0; border-width:10px;
border-left-color:transparent; border-right-color:transparent;
}
.ptlead__bubble::before{right:34px; bottom:-20px; border-top-color:#D9E7F5;}
.ptlead__bubble::after{right:34px; bottom:-16px; border-top-color:var(--white);}
/* ⚠️ 狭い画面ではパンダも右端に寄る（上の .ptlead__panda）ので、
PCで中央に置くための --c の指定は打ち消して、吹き出しも右に寄せる */
.ptlead__bubble--c{left:auto; right:12px; transform:none;}
/* 尾の位置はパンダの中心（右から約64px）に合わせる */
.ptlead__bubble::before,
.ptlead__bubble::after{right:52px;}
}
@media (max-width:600px){
.area__read{font-size:14px; text-align:left;}
.area__read br{display:none;}
/* 幅が足りないので、バッジを市区町村の上に積む */
.arealist__item{flex-direction:column; align-items:flex-start; gap:10px; padding:14px 16px;}
.arealist__city{gap:2px 14px; font-size:14px;}
.area__note{text-align:left;}
}
/* ============================================================
安心してはたらくための5つの体制
============================================================ */
/* 上半分だけピンクの帯を敷き、カードにその下辺をまたがせる。
カードの高さ（--care-h）を基準に帯の高さを出しているので、
カードの寸法を変えるときは --care-h だけ直せばよい */
.care{
--care-h:466px;
/* 見出しとカード列の字下げ。2か所が同じ値を見るように変数で持つ */
--care-indent:48px;
/* ピンクの帯（.care__band）の左角の丸み */
--care-r:32px;
position:relative; padding:0 24px var(--s6);
background:var(--bg2); overflow-x:clip;
}
.care__band{
position:absolute; left:0; right:0; top:0;
/* 見出しぶん＋カードの上から46%（支給デザインの見え方に合わせた） */
/* 見出しブロックぶん＋カードの上から46%。帯の下辺がアイコンの丸の中ほどに来る値 */
height:calc(var(--s5) + 160px + var(--care-h) * .46);
/* 色は支給ラフから拾った値（09-09）。以前の #f4a3a5 よりかなり淡い。
この地なら見出しは白ヌキではなく濃色になる（ラフもそうなっている）*/
background:#F9DDDB;
/* 左側だけ角を丸める。右は画面端まで流したいので角は立てたまま */
border-radius:var(--care-r) 0 0 var(--care-r);
}
/* ⚠️ ここに padding-left を入れないこと。中のカード列は「版面の左端ぶん」を
負のマージンで引き戻して画面端まで流しているので、パディングを足すと
その分だけ左端に届かず、画面の手前で切れてしまう。
見出しの字下げは .care__ttl 側で取る */
.care__inner{position:relative; z-index:1; padding-top:var(--s5);}
/* 見出しブロック。左に「英字＋2行の見出し」、縦罫をはさんで右にリード（09-09 支給ラフ） */
.care__head{
/* 見出しとリードは1行目の頭をそろえる。英字（Support）は流れから外してあるので、
この2つだけがここに並ぶ */
display:flex; align-items:flex-start; gap:36px;
margin:0 0 var(--s4) var(--care-indent);
/* パンダと吹き出しの居場所を空けておく */
padding-right:clamp(180px,21vw,300px);
}
.care__headmain{flex:none;}
/* リードは改行位置を決め打ちしているので、幅は中身なりに取らせる
（伸縮させると「も。」だけ落ちるような折り返しになる） */
.care__lead{flex:none;}
/* 帯の上辺をまたいで、少し傾けて置く（09-09）。
⚠️ 流れから外している（position:absolute）。見出しの上に置いたままだと
その高さぶん見出しが下がって、右のリードと行がそろわない。
⚠️ 上へはみ出すので .care に overflow:hidden を掛けないこと
（いまは overflow-x:clip なので横だけ切られていて、縦は出られる）。
⚠️ 支給ラフは手書き文字。書体を持っていないので斜体で寄せているだけ */
.care__en{
position:absolute; left:var(--care-indent); top:-16px;
margin:0;
transform:rotate(-7deg); transform-origin:left bottom;
font-family:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif;
font-size:42px; font-style:italic; font-weight:600; letter-spacing:.06em;
/* ラフの値。淡いピンクなので、飾りとして添えるだけの扱い（読ませる文字ではない）*/
color:#D8AAA5;
}
.care__ttl{
margin:0;
font-size:30px; font-weight:700; line-height:1.45; letter-spacing:.02em;
/* 地が淡いピンク（#F9DDDB）になったので濃色。14:1 以上あり、
以前の白ヌキ（2.6:1）で基準に届いていなかった問題も解消している */
color:var(--ink);
}
/* 「5」だけ大きく、色もラフの値に落とす */
.care__num{font-size:1.5em; line-height:1; vertical-align:-.08em; color:#CE545E;}
/* 見出しとのあいだは縦罫で仕切る */
.care__lead{
/* 見出し（30px・行送り1.45）とリード（14.5px・行送り2）で行の高さが違うので、
1行目のベースラインが合うぶんだけ下げる */
margin:6px 0 0; padding-left:36px;
border-left:1px solid rgba(31,27,22,.18);
font-size:14.5px; font-weight:500; line-height:2; letter-spacing:.02em;
color:var(--ink2);
}
/* ピンクの帯の上辺から、上半身だけのぞかせるパンダと吹き出し。
絵は切らず、下半身は帯（不透明なピンク）に隠させている。
そのため .care__band より前に置き、下ぞろえ＋負のマージンで
見せたいぶん（--care-peek）だけ帯の上に出している */
.care__cheer{
/* パンダを帯の上に見せる高さ */
--care-peek:112px;
/* 枠の下辺を帯の上辺にぴったり合わせる。translateY(-100%) にしておくと、
吹き出しが何行になっても、帯の上に出るパンダの高さは --care-peek のまま変わらない */
position:absolute; right:56px; top:0;
transform:translateY(-100%);
display:flex; flex-direction:column; align-items:center; gap:12px;
pointer-events:none;
}
/* パンダのセリフなので吹き出しに入れる。作りは POINTパネルの .ptlead__bubble と同じで、
白地・淡いブルーの枠・右向きの尾（三角を2枚重ね、奥が枠色・手前が白） */
.care__cheer-txt{
position:relative;
margin:0; padding:16px 24px;
background:var(--white);
border:2px solid #D9E7F5; border-radius:26px;
font-size:17px; font-weight:700; line-height:1.6; letter-spacing:.02em;
color:var(--ink);
}
.care__cheer-txt::before,
.care__cheer-txt::after{
content:""; position:absolute; left:50%; margin-left:-11px;
width:0; height:0; border:11px solid transparent;
}
.care__cheer-txt::before{bottom:-22px; border-top-color:#D9E7F5;}
.care__cheer-txt::after{bottom:-18px; border-top-color:var(--white);}
/* 絵の高さは 130×512/390 ≒ 171px。そのうち上の --care-peek ぶんだけ帯の上に出し、
残りは帯の裏へ回す（切らないので、切れ端が見えることはない） */
/* 絵の高さは 130×512/390 ≒ 171px。負のマージンで下 48px ほどを枠の外へ押し出し、
そのぶんを帯の裏へ回す（切らないので、切れ端が見えることはない） */
/* ⚠️ 09-22、受話器のパンダ（care-panda-tel.png／480×399）に差し替え。
上の2つのメモの数値は前の絵のもの。いまは幅160px・高さ 160×399/480 ≒ 133px */
.care__panda{
display:block; flex:none; width:160px;
margin-bottom:calc(var(--care-peek) - 133px);
}
.care__panda img{display:block; width:100%; height:auto;}
/* 横スライダー。.voice と同じく画面端まで流して右で見切らせる */
.care__list{
display:flex; gap:var(--s3); overflow-x:auto;
margin:0; padding:0; list-style:none;
/* 左右とも画面の端まで使う。切れるのは画面の縁だけで、
版面の手前で切れることはない。
1枚目は版面の左辺から始まり、送ったカードは画面の左端まで見えたまま流れる */
margin-inline:calc(50% - 50vw);
/* 左だけ字下げぶんを足して、1枚目の左端を見出しにそろえる */
padding-left:calc(max(24px, 50vw - var(--wrap) / 2) + var(--care-indent));
padding-right:max(24px, calc(50vw - var(--wrap) / 2));
scroll-padding-left:calc(max(24px, 50vw - var(--wrap) / 2) + var(--care-indent));
scroll-padding-right:max(24px, calc(50vw - var(--wrap) / 2));
/* 指を離した位置に関わらず、必ずカードの先頭で止める。
proximity だと止まらないことがあり、左端のカードが途中で切れて残る */
scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
scrollbar-width:none;
}
.care__list::-webkit-scrollbar{display:none;}
/* マウスでつかんで送れる（site.js）。つかんでいるあいだは .is-dragging */
@media (hover:hover) and (pointer:fine){
.care__list{cursor:grab;}
.care__list.is-dragging{cursor:grabbing; user-select:none;}
}
/* ドラッグ中はスナップを外す（付けたままだと指の位置に追従せず引き戻される） */
.care__list.is-dragging{scroll-snap-type:none;}
.care__list img{-webkit-user-drag:none;}
/* 送りボタン。カード列の下、版面の右端に2つ並べる。色は番号（.carecard__no）と同じ */
.care__nav{display:flex; justify-content:flex-end; gap:12px; margin-top:var(--s3);}
.care__navbtn{
display:grid; place-items:center;
width:48px; height:48px; padding:0; border-radius:50%; cursor:pointer;
background:var(--white); color:#CE545E; border:2px solid #CE545E;
box-shadow:var(--sh-s);
transition:background-color .15s ease, color .15s ease, opacity .15s ease, transform .15s ease;
}
.care__navbtn svg{width:20px; height:20px;}
.care__navbtn:hover{background:#CE545E; color:#fff; transform:translateY(-2px);}
.care__navbtn:focus-visible{outline:3px solid #CE545E; outline-offset:3px;}
/* 端まで来た側。押しても動かないので薄くする（押せないことは aria-disabled でも伝える） */
.care__navbtn.is-off{opacity:.35; pointer-events:none; box-shadow:none;}
.carecard{
position:relative;
/* 5枚が版面に収まる幅。狭くなれば下限で止まり、横スクロールに切り替わる */
/* ⚠️ この幅だと5枚は画面に収まらず、右で見切れて横スクロールになる（従来どおりの作り）。
5枚とも見せたい場合はカードを約198pxまで詰める必要があり、
そのぶん見出しと本文の級数も落とすことになる */
/* ⚠️ 高さは中身なり。横並びの flex なので、5枚ともいちばん背の高いカードに揃う。
--care-h はピンクの帯（.care__band）の高さを出すのに残してある目安値で、
カードの実寸ではない。絵や文章を増やしたら帯の高さも見直すこと */
flex:none; width:clamp(260px, 28vw, 400px);
scroll-snap-align:start;
display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
gap:12px; padding:20px 20px 24px;
background:var(--white);
border:2px solid var(--beige); border-radius:var(--r-l);
/* ピンクの帯から浮かせる。ずらし影ではなく、同じ面に並ぶカードなので
やわらかい落ち影（サイト共通の --sh-m）を使う */
box-shadow:var(--sh-m);
}
/* 通し番号。四角で囲って、見出しの左に並べる（09-09）。
⚠️ 見出しと同じ行に乗せるので inline-flex。文字の中心にそろえたいので
vertical-align は middle にしている */
/* 通し番号。囲みは外して、大きく左端に置く。
⚠️ 流れから外している（position:absolute）。見出しと同じ行に並べると、
番号の幅ぶん見出しがずれてパネルの中心からはみ出す。
⚠️ line-height は見出しの1行ぶん（19px × 1.6 ≒ 30px）。
これで大きな数字でも見出しの1行目と高さが合う */
.carecard__no{
position:absolute; left:0; top:0;
font-family:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif;
font-size:36px; font-style:italic; font-weight:600;
letter-spacing:.02em; line-height:30px; color:#CE545E;
}
/* 支給のイラスト（4:3）。カードの内側いっぱいに置く。
絵の地が白に近いので、枠線が無いとカードの白と溶けて輪郭が出ない */
.carecard__ph{
display:block; flex:none; width:100%;
/* ⚠️ 絵は4:3。枠をそれより平たくして、上下を少し切って見せている。
絵の中身は中央に寄っているので、center のまま切って問題ない。
ここを変えたら --care-h（カードの高さ）も一緒に見直すこと */
aspect-ratio:3 / 2;
border:1px solid var(--line); border-radius:var(--r-m); overflow:hidden;
}
.carecard__ph img{display:block; width:100%; height:100%; object-fit:cover;}
/* 見出しは2行。改行位置を支給デザインどおり固定したいので行ごとに block にする */
/* 見出しはパネルの中心そろえのまま。番号は絶対配置なので中心はずれない */
/* ⚠️ 09-22、見出しが長くなって（はたらきやすい職場づくり）狭い画面で番号に重なったので、
左右に番号の幅ぶんの余白を取る。左だけだと中心がずれるので左右同じにしている。
下の一言（.carecard__sub）は番号と並ばないので、負のマージンで幅を戻している */
.carecard__ttl{
position:relative;
margin:0; flex:none; width:100%;
padding-inline:44px;
font-size:19px; font-weight:700; line-height:1.6; text-align:center;
}
/* ⚠️ 番号（.carecard__no）と見出し（.carecard__name）は同じ行に並べるので、
まとめて block にはしない。下の一言（.carecard__sub）だけを行に落とす */
.carecard__name{display:inline; vertical-align:middle; word-break:auto-phrase; line-break:strict;}
/* カードが狭い画面（1000px以下）では、左右44pxの余白を取ると見出しが語の途中で割れる。
番号を流れに戻して見出しの行の頭に並べ、余白は外す（中心は番号のぶんずれるが、割れるよりよい） */
@media (max-width:1000px){
.carecard__ttl{padding-inline:0;}
.carecard__sub{margin-inline:0;}
.carecard__no{position:static; display:inline; margin-right:8px; vertical-align:middle;}
}
.carecard__sub{display:block;}
/* 2行目は制度名を受けるひとこと。見出しより一段小さく、軽く */
.carecard__sub{
margin-top:.5em; margin-inline:-44px;
/* ラフの値。オレンジというよりサーモン寄り。
⚠️ 白地に対して 4.0:1 で、14px・700 に必要な 4.5:1 にはわずかに届かない */
font-size:14px; font-weight:700; line-height:1.6; color:#D67252;
}
/* 中の span はひとかたまりで折り返さない。改行が入るのは span と span のあいだだけ
（「…わかる／！」のように語尾だけ次の行に落ちるのを防ぐ） */
.carecard__sub span,
.carecard__name span{display:inline-block;}
/* 制度の中身を説明する本文。読ませる文なので左そろえ・行間広め */
.carecard__txt{
margin:0; flex:none; width:100%;
font-size:13.5px; font-weight:400; line-height:1.85;
color:var(--ink2); text-align:left;
}
@media (max-width:900px){
.care{--care-h:424px; padding-bottom:var(--s5);}
.care__inner{padding-top:var(--s4);}
/* 幅が足りないので見出しとリードは上下に積む。縦罫はやめて上の余白で仕切る */
/* 09-24、見出し・リードの幅を広げる。左右は画面から15pxだけ残す
（字下げ --care-indent 48px を外し、節の左右パディング24pxぶんを負のマージンで戻す） */
/* 09-24、中身は中心そろえ（英字ラベル・見出し・リードとも） */
.care__head{
flex-direction:column; align-items:center; gap:14px; padding-right:0;
margin-left:-9px; margin-right:-9px;
text-align:center;
}
.care__headmain{width:100%;}
/* 狭い画面では帯の上辺に置く余地がないので、傾きだけ残して見出しの上に戻す */
.care__en{position:static; transform:rotate(-5deg); margin:0 0 6px; font-size:19px;}
.care__ttl{font-size:23px;}
/* 09-24、リードは本文と同じ15pxに（もとは14px） */
.care__lead{padding-left:0; border-left:0; font-size:15px; line-height:1.95;}
/* 09-24、カードの本文も読みやすさを優先して上げる（もとは13.5px） */
.carecard__txt{font-size:14.5px; line-height:1.9;}
.carecard{padding:16px 16px 20px;}
/* カードが細くなるので、見出しにかからないよう番号も少し小さくする */
.carecard__no{font-size:30px;}
/* 09-24、スマホでは左に10pxだけ余白をあける（右は画面端まで流したまま） */
.care__band{height:calc(var(--s4) + 48px + var(--care-h) * .46); left:10px;}
/* 見出しの右に並べる幅が残らないので、狭い画面では出さない */
.care__cheer{display:none;}
/* この幅からカードは下限の260pxで張り付くので、内側の余白を詰めて
イラストと本文に使える幅・高さを稼ぐ */
.carecard{padding:15px;}
.carecard__ttl{font-size:17px;}
/* ⚠️ 09-24、カードを広げる。見出しの字下げ（--care-indent 48px）ぶん左が空いていたので、
列の左右を節の余白（20px）に合わせ、カード幅も画面なりに広げる。
右に次のカードが少しのぞく幅（約50px）は残す */
.care__list{
padding-left:20px; padding-right:20px;
scroll-padding-left:20px; scroll-padding-right:20px;
}
.carecard{width:min(320px, calc(100vw - 72px));}
}
/* ============================================================
各種窓口のご案内（page-window.php）
============================================================ */
.wnd{background:var(--white); padding:var(--s5) 24px var(--s7);}
.wnd__inner{max-width:var(--wrap); margin:0 auto;}
/* --- 総合案内（ページの先頭） --- */
/* 電話・求職者向けフォーム・企業様向けページの3枚（09-10 支給ラフ）。
1枚目だけは電話番号を押させたい（＝リンクは番号だけ）ので div、
2・3枚目はカードごと1つのリンク。
⚠️ そのため2・3枚目のボタンは ではなく （入れ子のリンクは作れない）。
色は3枚で振り分ける。カードごとに --wg-key（主役の色）・--wg-key-deep（文字用の濃さ）・
--wg-pale（地の淡い色）を差し替えるだけで、中身の指定は共通のまま切り替わる。
⚠️ 表記ルールどおり 求職者向け＝オレンジ／企業様向け＝ブルー。
フォームだけコーラルにしているのは、同じオレンジ2枚だと役割が読み取れないため */
/* ⚠️ この3枚だけ版面（--wrap＝1100px）より広く取る。1100pxを3等分すると1枚が353pxで、
絵を右に置いたぶん文字が5〜6文字で折り返し、カードが縦長になってしまうため。
はみ出す量は「広げたい幅 − 親の幅」の半分を左右のマイナスマージンで返す。
親が広げたい幅より狭い画面（＝1330px以下）では max(0px,…) が効いて 0 になり、
ふつうに版面いっぱいで収まる */
.wguide{
--wg-out:max(0px, (min(1280px, 100vw - 48px) - 100%) / 2);
margin:0 calc(-1 * var(--wg-out)) var(--s5);
display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:20px;
}
.wguide__item{
--wg-key:var(--orange); --wg-key-deep:var(--orange-dark); --wg-pale:var(--orange-pale);
position:relative; isolation:isolate; overflow:hidden;
display:flex; flex-direction:column;
padding:22px 22px 20px;
border-radius:26px;
box-shadow:var(--sh-s);
/* ⚠️ 支給待ちの仮の地。斜めの淡いグラデーションで面を作っている。
assets/img/wguide-bg-*.png が置かれると php 側が --wg-bg を渡してきて、
下の ::before がその絵を上から敷く（この地はその下に残る）*/
background:linear-gradient(140deg, var(--wg-pale) 0%, var(--white) 62%);
}
/* ⚠️ フォームも求職者向けなので主役の色はオレンジ（表記ルールどおり）。
地の絵だけ支給のピンクで、電話のカードと見分けがつくようにしている */
.wguide__item--form{--wg-pale:#FBE4DE;}
.wguide__item--biz{--wg-key:var(--blue); --wg-key-deep:var(--blue-deep); --wg-pale:var(--blue-pale);}
/* 支給の地の絵（09-10）。--wg-bg が無いあいだは content:none で出ない。
⚠️ cover ではなく 100% 100%（＝引き伸ばし）。この絵はパネル1枚のために描かれていて、
左右の端に飾り（水玉・斜線の丸・波）が入っている。cover だと絵の横幅の4割ほどが
画面外へ切れて、その飾りが消えてしまう。抽象的な面なので伸びても崩れない。
⚠️ 絵にも角丸が焼き込まれているが、カード側の overflow:hidden ＋ border-radius で
切るので、そちらの丸みが出る。絵の角の透けは下の地（グラデーション）が受ける */
.wguide__item::before{
content:""; position:absolute; inset:0; z-index:-1;
background:var(--wg-bg, none) no-repeat center center / 100% 100%;
}
.wguide__item:not([style*="--wg-bg"])::before{content:none;}
/* リンクのカードだけ持ち上げる。電話のカードは動かさない */
a.wguide__item{
color:var(--ink); text-decoration:none;
transition:transform .2s, box-shadow .2s;
}
a.wguide__item:hover,
a.wguide__item:focus-visible{transform:translateY(-3px); box-shadow:var(--sh-m);}
/* --- カードの上半分（文字＋イラスト） --- */
/* 文字を左、絵を右。どちらも下そろえ。
⚠️ 下の余白は持たせない。絵の下辺を白い箱（.wguide__foot）の上辺に
ぴったり付けたいので、すき間は文字側（.wguide__body）だけが持つ */
.wguide__head{
display:grid; grid-template-columns:minmax(0,1fr) 44%;
gap:4px; align-items:end;
margin-bottom:0;
}
.wguide__body{min-width:0; padding-bottom:16px;}
/* 英字ラベル。右に短い罫を伸ばして見出しの肩に置く */
.wguide__en{
display:flex; align-items:center; gap:10px;
margin:0 0 8px;
font-size:12px; font-weight:700; letter-spacing:.18em; color:var(--wg-key-deep);
}
.wguide__en::after{
content:""; flex:1; max-width:46px; height:2px; border-radius:2px;
background:var(--wg-key);
}
/* 見出し。頭の語だけカードの色にして、残りは本文色のまま */
/* ⚠️ 09-10、見出しの色分け（頭の語だけカードの色）はやめた。
色を持つのは英字ラベルとボタンだけにして、見出しは3枚とも本文色でそろえる */
.wguide__ttl{
margin:0 0 12px;
font-size:clamp(17px,1.65vw,23px); font-weight:700;
line-height:1.4; letter-spacing:.02em; color:var(--ink);
}
.wguide__txt{margin:0; font-size:13.5px; line-height:1.8; color:var(--ink2);}
/* --- イラスト（支給待ち／いまは仮枠） --- */
/* 枠は他ページと同じ .phbox。カードの色に寄せて、地の中で浮かないようにする。
支給ラフでは絵がパネルの右端まで出ているので、カードの右パディングぶん外へ逃がす */
.wguide__fig{align-self:end; margin-right:-22px;}
/* ⚠️ 角丸は付けない。絵の下辺を白い箱の上辺に直接のせて、
人物が箱に隠れて立っているように見せるため（09-10 支給ラフ）*/
.wguide__fig .phbox{background:transparent; border-radius:0;}
.wguide__fig .phbox img{display:block;}
.wguide__fig .phbox--empty{
aspect-ratio:1/1; gap:4px;
background:color-mix(in srgb, var(--wg-pale) 70%, var(--white));
border-color:var(--wg-key);
}
.wguide__fig .phbox__note{font-size:11.5px; letter-spacing:.04em; color:var(--wg-key-deep);}
.wguide__fig .phbox__file{font-size:10px; color:var(--ink3);}
/* --- カードの下辺（ボタン＋補足） --- */
/* 白い箱で受けて、3枚とも下辺の高さをそろえる */
.wguide__foot{
margin-top:auto;
padding:11px 11px 12px;
background:var(--white); border-radius:20px;
}
/* ボタン。電話のカードだけ 、他は見た目だけの */
.wguide__cta{
display:flex; align-items:center; justify-content:center; gap:10px;
min-height:54px; padding:9px 16px;
background:var(--wg-key); border-radius:var(--r-full);
font-size:clamp(15px,1.3vw,17px); font-weight:700; letter-spacing:.02em;
color:var(--white); text-decoration:none;
}
a.wguide__cta:hover{background:var(--wg-key-deep);}
.wguide__cta-ico{width:26px; height:26px; flex:none;}
/* 電話番号だけは数字を大きく見せる。書体は他の番号表示と同じ */
.wguide__cta-num{
font-family:"Zen Kaku Gothic New",sans-serif;
font-size:clamp(22px,2vw,28px); letter-spacing:.02em;
}
.wguide__cta .btn__chev{width:20px; height:20px; flex:none; margin-left:2px;}
/* ⚠️ 電話のカードだけ、ボタンの形にしない（09-10 支給ラフ）。
押させたいのは番号そのもので、地を塗ると番号が読みにくくなるため、
白い箱の上にオレンジの受話器＋番号を置くだけにしている */
.wguide__item--tel .wguide__cta{
min-height:0; padding:4px 8px 2px;
background:none; color:var(--wg-key);
}
.wguide__item--tel .wguide__cta:hover{background:none; color:var(--wg-key-deep);}
/* ⚠️ 受話器の大きさは番号（.wguide__cta-num）に合わせる。em で書くとボタンの
文字サイズ（17px）が基準になり、28pxの数字の横で小さく見えてしまう。
数字の clamp と同じ刻みにして、数字の高さとそろえている */
.wguide__item--tel .wguide__cta{gap:14px;}
.wguide__item--tel .wguide__cta-ico{width:clamp(22px,1.95vw,27px); height:auto; aspect-ratio:1;}
/* ボタンの下の補足。電話は受付時間、他は一言 */
.wguide__note{
margin:8px 4px 0;
font-size:12px; line-height:1.65; color:var(--ink2); text-align:center;
}
.wguide__note b{font-size:13.5px; font-weight:600;}
.wguide__note span{display:block;}
/* 電話のカードは受付時間を主、休業日の注記を従にする。
⚠️ 番号の下に2行あるぶん、放っておくと白い箱が他の2枚より30pxほど高くなる。
番号の大きさは変えずに、行送りと受付時間・注記の級数でその差を吸収している。
ここの3つの値を上げるときは、3枚の箱の高さが揃っているか必ず見直すこと */
.wguide__item--tel .wguide__cta-num{line-height:1.15;}
.wguide__item--tel .wguide__note{margin-top:2px; color:var(--ink);}
.wguide__item--tel .wguide__note b{
display:block;
font-size:clamp(13px,1.15vw,14.5px); font-weight:500;
line-height:1.5; letter-spacing:.02em;
}
.wguide__item--tel .wguide__note span{
margin-top:4px;
font-size:clamp(10.5px,.9vw,11.5px); line-height:1.5; color:var(--ink2);
}
.wnd__lead{
margin:0 0 var(--s4);
font-size:clamp(15px,1.2vw,16px); line-height:2.1; color:var(--ink2);
}
/* --- 目次 --- */
/* 4つとも同じページ内にあるので、下向きシェブロンで「飛ぶ先は下」と示す */
.wnd__toc{
margin:0 0 var(--s5); padding:22px 24px;
background:var(--orange-pale); border-radius:var(--r-l);
}
.wnd__toclist{margin:0; padding:0; list-style:none; display:grid; gap:8px;}
.wnd__toclist a{
display:flex; align-items:center; gap:14px;
padding:12px 16px; border-radius:var(--r-m);
background:var(--white); color:var(--ink);
font-size:15px; font-weight:600; line-height:1.6;
box-shadow:var(--sh-s); transition:transform .2s, box-shadow .2s;
}
.wnd__toclist a:hover{transform:translateY(-2px); box-shadow:var(--sh-m);}
.wnd__tocnum{
flex:0 0 auto;
font-size:13px; font-weight:700; letter-spacing:.08em; color:var(--orange);
}
.wnd__toctxt{flex:1 1 auto;}
.wnd__tocchev{flex:0 0 auto; width:18px; height:18px; color:var(--orange);}
/* --- 窓口カード --- */
.wcard{
margin-bottom:var(--s4); padding:var(--s4) var(--s4) 34px;
background:var(--bg); border-radius:var(--r-l); box-shadow:var(--sh-s);
/* 目次から飛んだときに見出しがヘッダーの裏に隠れないように余白をとる */
scroll-margin-top:100px;
}
.wcard__head{
display:flex; align-items:baseline; gap:16px;
margin-bottom:18px; padding-bottom:14px;
border-bottom:2px solid var(--orange-pale);
}
.wcard__num{
margin:0; flex:0 0 auto;
font-size:26px; font-weight:700; letter-spacing:.04em; color:var(--orange);
}
.wcard__ttl{
margin:0;
font-size:clamp(19px,2vw,23px); font-weight:600; letter-spacing:.04em; line-height:1.5;
}
.wcard__lead{
margin:0 0 var(--s3);
font-size:15px; line-height:2; color:var(--ink2);
}
/* 連絡先テーブル。会社概要（.cprof__table）と同じ考え方で、罫線ではなく地の色で行を分ける */
.wcard__table{width:100%; border-collapse:collapse; font-size:15px; line-height:1.9;}
.wcard__table th,
.wcard__table td{
padding:14px 20px; text-align:left; vertical-align:top;
border-bottom:3px solid var(--bg);
}
.wcard__table th{
width:150px; white-space:nowrap;
background:var(--orange-pale); font-weight:600; color:var(--ink);
}
.wcard__table td{background:var(--white); color:var(--ink2);}
.wcard__tel{
display:inline-flex; align-items:center; gap:8px;
font-size:19px; font-weight:700; letter-spacing:.02em; color:var(--orange-dark);
}
.wcard__tel svg{width:18px; height:18px;}
.wcard__tel:hover{text-decoration:underline;}
/* 未確定の項目。公開前に埋める前提なので、あえて目立たせている */
.wcard__tbd{
display:inline-block; padding:2px 12px; border-radius:var(--r-full);
background:var(--yellow2); font-size:13px; font-weight:600; color:var(--ink2);
}
.wcard__notes{margin:18px 0 0; padding:0; list-style:none; display:grid; gap:8px;}
.wcard__notes li{
position:relative; padding-left:1.3em;
font-size:14px; line-height:1.9; color:var(--ink3);
}
.wcard__notes li::before{content:"※"; position:absolute; left:0;}
.wcard__notes a{color:var(--orange); text-decoration:underline;}
/* --- その他のお問い合わせ --- */
.wnd__other{
margin-top:var(--s5); padding:var(--s4) 24px;
background:var(--blue-pale); border-radius:var(--r-l); text-align:center;
}
.wnd__otherttl{
margin:0 0 12px;
font-size:clamp(18px,2vw,21px); font-weight:600; letter-spacing:.04em;
}
.wnd__othertxt{margin:0; font-size:14.5px; line-height:1.9; color:var(--ink2);}
/* この枠の中では上の余白を詰める（.sec__btns の既定は広すぎる） */
.wnd__other .sec__btns{margin-top:var(--s3);}
@media (max-width:960px){
/* 3枚並びだと本文が2〜3文字で折り返すので、電話を全幅にして下に2枚を並べる */
.wguide{grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px;}
.wguide__item--tel{grid-column:1 / -1;}
/* 全幅になる電話のカードだけ、絵の幅（42%）を実寸で止める。
割合のままだとカードの倍の幅に合わせて絵だけ大きくなり、文字と釣り合わない */
.wguide__item--tel .wguide__head{grid-template-columns:minmax(0,1fr) minmax(0,230px);}
/* 全幅だと文字が3行ほどしかなく、絵の高さぶん上が空く。文字は上下中央に置く */
.wguide__item--tel .wguide__body{align-self:center;}
}
@media (max-width:820px){
.wnd{padding:var(--s4) 20px var(--s6);}
.wnd__lead{font-size:14.5px; line-height:2;}
.wnd__lead br{display:none;}
.wguide{grid-template-columns:minmax(0, 1fr); margin-bottom:var(--s4);}
.wguide__item{padding:22px 18px 18px; border-radius:22px;}
.wguide__txt{font-size:13.5px;}
.wguide__fig{margin-right:-18px;}
/* ⚠️ 09-24、電話のカードだけ絵の幅を230pxで止める指定（2列だった頃のもの）が残っていて、
1列になるこの幅では文字の列が1行4文字ほどに潰れていた。ほかのカードと同じ割合に戻す */
.wguide__item--tel .wguide__head{grid-template-columns:minmax(0,1fr) 42%;}
.wguide__item--tel .wguide__body{align-self:end;}
.wguide__foot{padding:10px 10px 12px; border-radius:18px;}
.wguide__cta{min-height:54px;}
.wnd__toc{padding:16px; margin-bottom:var(--s4);}
.wnd__toclist a{font-size:14px; padding:12px 14px; gap:10px;}
.wcard{padding:26px 20px 28px;}
/* 長い窓口名（個人情報に関するお問い合わせ窓口）が番号の横だと語の途中で折れるので、
スマホでは番号の下に全幅で置いて1行に収める */
.wcard__head{gap:12px; flex-wrap:wrap; row-gap:4px;}
.wcard__num{font-size:21px;}
.wcard__ttl{flex:1 1 100%; font-size:17px;}
.wcard__lead{font-size:14.5px;}
/* 2カラムのままだと項目名で幅を取られるので、SPは上下に積む（会社概要と同じ） */
.wcard__table,
.wcard__table tbody,
.wcard__table tr,
.wcard__table th,
.wcard__table td{display:block; width:auto;}
.wcard__table tr{margin-bottom:10px;}
.wcard__table th{white-space:normal; padding:10px 16px; border-bottom:0;}
.wcard__table td{padding:12px 16px; border-bottom:0;}
.wcard__tel{font-size:18px;}
.wnd__other{padding:28px 20px;}
.wnd__othertxt{text-align:left;}
}
/* ============================================================
よくあるご質問ページ（/faq/）
アコーディオン本体はトップと同じ .faq を使い、
ここではカテゴリ見出し・目次・末尾CTAだけを足している
============================================================ */
.faqpage{padding:var(--sec-gap) 24px var(--s7);}
.faqpage__inner{max-width:var(--wrap); margin:0 auto;}
/* .faq はトップのFAQ用に860pxで止めてある。このページは版面いっぱいに使う */
.faqpage .faq{max-width:none;}
.faqpage__lead{margin:0 0 var(--s4); font-size:var(--lead-size); line-height:var(--lead-lh); color:var(--ink2); text-align:center;}
/* カテゴリへの目次。カードは1枚ずつ独立させて並べる */
.faqcat{
display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
margin:0 0 var(--s5); padding:0; list-style:none;
}
.faqcat__link{
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
height:100%; min-height:150px; padding:24px 12px;
background:var(--white); border:1px solid var(--line); border-radius:var(--r-l);
font-size:15px; font-weight:700; color:var(--ink); text-align:center;
}
.faqcat__link:hover{border-color:var(--orange); background:#FFFAF3;}
.faqcat__ico{width:34px; height:34px; color:var(--orange);}
.faqcat__txt{line-height:1.4;}
/* 見出しの直下にアコーディオンが来るので、カテゴリ間だけ大きく空ける。
目次から飛んだときに見出しが追従ヘッダーへ潜らないよう scroll-margin を持たせる */
.faqgrp{margin-bottom:var(--s6); scroll-margin-top:calc(var(--header-h) + 20px);}
.faqgrp:last-of-type{margin-bottom:0;}
.faqgrp .cttl{margin-bottom:var(--s3);}
.faqpage__cta{margin-top:var(--s6); text-align:center;}
.faqpage__ctatxt{margin:0 0 var(--s3); font-size:16px; line-height:2; color:var(--ink2);}
.faqpage__btns{display:flex; flex-wrap:wrap; gap:var(--s2); justify-content:center;}
@media (max-width:900px){
.faqpage{padding:var(--s4) 20px var(--s6);}
/* 大きさ・行間は :root の --lead-size / --lead-lh が持つ。ここはそろえ方だけ */
.faqpage__lead{text-align:left;}
.faqpage__lead br{display:none;}
.faqcat{grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:var(--s4);}
.faqcat__link{min-height:112px; gap:9px; padding:16px 8px; font-size:14px;}
.faqcat__ico{width:28px; height:28px;}
.faqgrp{margin-bottom:var(--s5);}
.faqpage__btns .btn{width:min(340px,100%);}
}
/* ============================================================
はじめての方へ（/guide/）
見出しは他ページと同じ .sec__en ＋ .sec__ttl--slash の型を使う。
ここではセクション固有の中身だけを定義する
============================================================ */
/* --- 画像の枠。未設置のあいだは何が入るか分かる枠を出す --- */
.phbox{
margin:0; border-radius:var(--r-l); overflow:hidden; background:var(--white);
}
.phbox img{display:block; width:100%; height:100%; object-fit:cover;}
.phbox--empty{
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
aspect-ratio:4/3;
background:var(--orange-pale); border:2px dashed var(--orange);
text-align:center;
}
.phbox__note{font-size:14px; font-weight:700; letter-spacing:.06em; color:var(--orange-dark);}
.phbox__file{font-size:11.5px; letter-spacing:.04em; color:#B08A57;}
/* --- 魅力ページの締め --- */
/* 3つの特長のあとに置く、会社の姿勢を述べるブロック。
特長と並列に見えないよう、番号も写真も持たせず文字だけで組む */
.charmend{background:var(--bg2); padding:var(--s6) 24px;}
/* 幅は絞るが、版面の左に寄せず中央に置く */
.charmend__inner{max-width:900px; margin-inline:auto; text-align:center;}
.charmend__lead{
margin:0 0 var(--s4);
font-size:clamp(15px,1.2vw,17px); line-height:2.2;
letter-spacing:.04em; color:var(--ink2);
}
/* いちばん言いたい一文。書体は本文と同じゴシック、級数は中見出し相当に留めて、
強調は蛍光ペンのマーカーで付ける */
.charmend__catch{
margin:0 0 var(--s3);
font-size:clamp(19px,2vw,22px); font-weight:700;
line-height:2; letter-spacing:.06em; color:var(--ink);
}
.charmend__note{
margin:0;
font-size:14.5px; line-height:2.1; letter-spacing:.02em; color:var(--ink3);
}
.charmend__btns{margin-top:var(--s4); display:flex; justify-content:center;}
@media (max-width:900px){
.charmend{padding:var(--s5) 20px;}
.charmend__lead{text-align:left; line-height:2.1;}
.charmend__lead br{display:none;}
.charmend__catch{font-size:18px; line-height:1.95; letter-spacing:.04em;}
.charmend__note{text-align:left; font-size:14px;}
.charmend__btns{margin-top:var(--s3);}
.charmend__btns .btn{width:min(340px,100%); justify-content:center;}
}
/* --- ごあいさつ（会社について） --- */
.gabout{padding:var(--sec-gap) 24px var(--s4);}
/* 写真を右に置き、本文を左に流す */
.gabout__inner{
display:grid; grid-template-columns:minmax(0,1fr) minmax(0,34%);
gap:clamp(24px,4vw,48px); align-items:start;
max-width:var(--wrap); margin:0 auto;
}
.gabout__inner .phbox{grid-column:2; grid-row:1;}
.gabout__body{grid-column:1; grid-row:1;}
.gabout__body p{margin:0 0 1.5em; font-size:16px; line-height:2.1; color:var(--ink2);}
.gabout__body p:last-child{margin-bottom:0;}
/* 対応エリアの一覧。府県名（太字）の右に市町を並べるだけの素朴な組み（1府県＝1行）。
⚠️ 09-22、枠・札・点線で飾った版は「もう少しシンプルで」とのことで外した */
.gabout__areas{margin:-.4em 0 2em;}
/* 府県ごとに細い区切り線を引いて、行の切れ目を見やすくする（09-22）。
上下の端にも線を引いて、一覧がひとかたまりに見えるようにしている */
.gabout__areas{border-top:1px solid var(--line);}
.gabout__area{
display:flex; align-items:baseline; gap:1em;
padding:10px 4px; border-bottom:1px solid var(--line);
}
.gabout__area dt{flex:none; font-size:15px; font-weight:700; color:var(--ink);}
.gabout__area dd{margin:0; font-size:15px; line-height:1.9; color:var(--ink2);}
.gabout__area dd span{display:inline-block;}
.gabout__last b{
padding:0 .12em; font-weight:700; color:var(--ink);
background-image:linear-gradient(180deg,transparent 0 62%, #FFEB6B 62% 98%, transparent 98%);
-webkit-box-decoration-break:clone;
box-decoration-break:clone;
}
/* --- 別ページ（/guide/haken/）へ送るバナー --- */
/* カード全体が1つのリンク。左に文字、右に図版を置き、ホバーで浮かせる */
.gbnrsec{padding:var(--s5) 24px 0;}
.gbnr{
display:grid; grid-template-columns:minmax(0,1fr) minmax(0,34%);
gap:clamp(20px,3vw,40px); align-items:center;
max-width:var(--wrap); margin:0 auto; padding:clamp(24px,3vw,36px) clamp(24px,3vw,40px);
background:var(--orange-pale); border-radius:var(--r-m);
color:var(--ink); text-decoration:none;
transition:transform .2s, box-shadow .2s;
}
.gbnr:hover{transform:translateY(-3px); box-shadow:var(--sh-m);}
/* 図版が無いときは文字だけで1カラムにする */
.gbnr--nofig{grid-template-columns:minmax(0,1fr);}
.gbnr__body{display:block;}
.gbnr__label{
display:block; margin-bottom:10px;
font-size:13px; font-weight:700; letter-spacing:.08em; color:var(--orange-dark);
}
.gbnr__ttl{
display:block; margin-bottom:12px;
font-size:clamp(22px,2.6vw,28px); font-weight:700; letter-spacing:.04em; line-height:1.5;
}
.gbnr__txt{display:block; font-size:15px; line-height:2; color:var(--ink2);}
/* 「くわしく見る」は擬似ボタン。リンクは親の なので入れ子にはしない */
.gbnr__more{
display:inline-flex; align-items:center; gap:8px; margin-top:20px;
padding:11px 22px; border-radius:999px;
background:var(--orange); color:#fff;
font-size:14.5px; font-weight:700; letter-spacing:.04em;
}
.gbnr:hover .gbnr__more{background:var(--orange-dark);}
.gbnr__more svg{width:15px; height:15px; flex:none;}
/* 企業様向けのバナー。地と「くわしく見る」をブルーに寄せる（ページ全体の色分けに合わせる） */
/* ⚠️ 09-10、地を支給の背景画像に差し替えた。絵柄は左が無地・右がビル群なので、
文字は左（.gbnr__body）、イラストは右（.gbnr__fig）という今の並びが前提。
画像が出ないときは --blue-pale の無地になるよう、色は残したまま重ねている */
.gbnr--biz{
background:var(--blue-pale) url("assets/img/client-bnr-bg.jpg") no-repeat center center / cover;
/* イラストを枠の外まで伸ばすので、はみ出しは角丸で切る */
overflow:hidden;
}
/* ⚠️ 09-10、イラストを枠いっぱいに広げた。図版側の列を広げ、右の余白を
15px まで詰めている（打ち消しなので、パネルの padding から15pxを引いた値を負のマージンに）。
縦はパネルの中心に合わせる（.gbnr の align-items:center のまま） */
.gbnr--biz{grid-template-columns:minmax(0,1fr) minmax(0,48%);}
.gbnr--biz .gbnr__fig{
max-width:none; align-self:center;
margin:0 calc(15px - clamp(24px,3vw,40px)) 0 0;
}
.gbnr--biz .gbnr__label{color:var(--blue-deep);}
.gbnr--biz .gbnr__more{background:var(--blue-deep);}
.gbnr--biz:hover .gbnr__more{background:#26658F;}
/* はじめての方へのバナー。企業様向け（--biz）と同じ組み方で、色だけオレンジ系のまま。
⚠️ 09-10、地を支給の背景画像に差し替えた。絵柄は左が無地・右上と右下に丸模様なので、
文字は左（.gbnr__body）、イラストは右（.gbnr__fig）という今の並びが前提。
画像が出ないときは --orange-pale の無地になるよう、色は残したまま重ねている */
.gbnr--guide{
background:var(--orange-pale) url("assets/img/guide-bnr-bg.jpg") no-repeat center center / cover;
/* イラストを枠の外まで伸ばすので、はみ出しは角丸で切る */
overflow:hidden;
/* 図版側の列を広げ、右の余白を15pxまで詰める
（打ち消しなので、パネルの padding から15pxを引いた値を負のマージンに） */
grid-template-columns:minmax(0,1fr) minmax(0,46%);
}
.gbnr--guide .gbnr__fig{
max-width:none; align-self:center;
margin:0 calc(15px - clamp(24px,3vw,40px)) 0 0;
}
/* 図版の既定。幅を抑えて帯が高くなりすぎないようにする（--biz／--guide は上で打ち消している） */
.gbnr__fig{display:block; max-width:280px; margin-left:auto;}
.gbnr__fig img{display:block; width:100%; height:auto;}
/* セクション見出しの下に置く呼びかけの一文。中見出し（.gsub）と同じ級数・太さで揃える */
.gcatch{
margin:0 0 16px;
font-size:clamp(19px,2vw,22px); font-weight:600; line-height:1.7;
letter-spacing:.04em; color:var(--ink);
}
/* SPでだけ効かせる改行（PCでは1行に流す） */
.sp-br{display:none;}
/* 逆に、PCでだけ効かせる改行。文の区切りで折り返し位置を決めたい本文に使う。
狭い画面では邪魔になるので消す（消し込みは .sp-br と同じ900px） */
.pc-br{display:inline;}
/* スマホ幅（440px以下）でだけ効かせる改行。
タブレットでは1行に収まるのに .sp-br（820px以下）だと早く折れてしまう見出しに使う */
.xs-br{display:none;}
@media (max-width:440px){
.xs-br{display:inline;}
}
/* --- 派遣のしくみ --- */
.dispatch{padding:var(--sec-gap) 24px 0;}
/* ページ最後の節（/guide/haken/ の「派遣で働けないお仕事・ケース」）だけ下にも余白を持つ。
SPは下の @media で .dispatch 自体に下余白があるので、この指定は PC 向け */
.dispatch--last{padding-bottom:var(--sec-gap);}
/* 見出しの下に置く説明文。このページ以外（採用情報など）では .pglead の名前で使う */
.pglead,
.dispatch__lead{
margin:0 0 var(--s4);
font-size:16px; line-height:2.1; color:var(--ink2);
}
.pglead b,
.dispatch__lead b{color:var(--ink); font-weight:700;}
/* 派遣のしくみページのリードは、置かれる場所に関わらずすべて中央そろえ */
.dispatch__lead{
text-align:center;
/* 最終行に1〜2文字だけ残る（泣き別れ）のを避ける。中央そろえだと目立つ */
text-wrap:pretty;
}
/* 子ページ共通の見出し（.cttl）は中央そろえなので、そのすぐ下に続く
呼びかけ（.gcatch）とリードも中央でそろえる。
隣接セレクタで拾っているのは、同じクラスでも置かれる場所で扱いが変わるため。
- .gsub（左に罫を立てた h3）の下のリードは左そろえのまま。見出しの軸が左にあるので、
本文だけ中央に寄せると読み出しの位置がずれる
- 見出しを持たない段落（/guide/haken/ 末尾の締めなど）もそのまま */
.cttl + .gcatch,
.cttl + .pglead,
.cttl + .cfeat__lead,
.cttl + .cjob__lead,
.gcatch + .pglead{
text-align:center;
/* 最終行に1〜2文字だけ残る（泣き別れ）のを避ける。中央そろえだと目立つので入れておく */
text-wrap:pretty;
}
/* 幅を絞っている段落は、中央そろえに合わせて枠ごと中央へ寄せる */
.cttl + .cjob__lead{margin-inline:auto;}
/* 節の見出し（h3）。.cttl より一段小さく、左に太い罫を立てる型 */
.gsub{
margin:var(--s6) 0 var(--s3); padding-left:16px;
border-left:5px solid var(--orange); border-radius:2px;
font-size:clamp(19px,2vw,22px); font-weight:600; letter-spacing:.04em; line-height:1.5;
}
/* 見出しの左に置く通し番号（はたらき方の種類）。文字より少し小さいオレンジの小札 */
.gsub--num{display:flex; align-items:center; gap:12px;}
.gsub__no{
flex:none;
padding:5px 12px; border-radius:var(--r-full);
background:var(--orange); color:#fff;
font-size:.72em; font-weight:700; letter-spacing:.04em; line-height:1.4;
}
/* 三者の関係は図版1枚で説明する。横幅いっぱいの大きな枠を確保しておく */
/* ⚠️ 09-23、下の「はたらき方の種類」の図と幅・高さをそろえたので、900px の制限は外した */
.dptph{max-width:1100px; margin:0 auto;}
/* 枠の高さは図版の縦横比に引きずられないよう固定する（仮枠と同じ高さを保つ） */
/* ⚠️ 09-23、こちらも枠をやめ、上の図（.csvc__fig）と高さをそろえている */
.dptph .phbox{aspect-ratio:auto; height:540px; background:none; border:0; padding:0;}
/* 枠の幅は変えず、図版の高さを枠にそろえて中央に置く */
.dptph .phbox img{width:auto; max-width:100%; height:100%; margin-inline:auto; object-fit:contain;}
/* 8コマ漫画（09-23 支給）。図版の下に横スライドで並べ、左→右の順に読ませる。
ドラッグと矢印は site.js の「横スライダー共通」が受け持つ */
/* ⚠️ 09-23、画面の右端まで流す形にした（利用者の声 .voice と同じ作り）。
左右いっぱいに広げたうえで、左だけ版面ぶんの余白を内側に取り、右は端まで見切らせる。
.dptph（最大900px）の中ではなく、この節の版面を基準にしている */
.dmanga{
display:flex; gap:16px; overflow-x:auto;
margin:var(--s3) 0 0; margin-inline:calc(50% - 50vw);
padding:0 0 6px;
padding-left:max(24px, calc(50vw - var(--wrap) / 2));
scroll-padding-left:max(24px, calc(50vw - var(--wrap) / 2));
/* 最後のコマが画面の右端に貼り付いて終わらないよう、右にコマ1つぶんの余白を足す。
そのぶん最後までスライドでき、8コマ目も左寄りの読みやすい位置に来る */
padding-right:calc(min(440px, 78vw) + 16px);
list-style:none;
counter-reset:dmanga;
scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
scrollbar-width:none;
}
.dmanga::-webkit-scrollbar{display:none;}
.dmanga__item{
position:relative;
/* 画面幅に対する割合ではなく、版面の半分くらいの幅で置く（右端で次のコマが見切れる） */
flex:0 0 min(440px, 78vw); scroll-snap-align:start;
border:1px solid var(--line); border-radius:var(--r-m); overflow:hidden;
background:var(--white);
}
/* 読む順が分かるよう、左上にコマ番号を小さく置く */
.dmanga__item::before{
counter-increment:dmanga; content:counter(dmanga);
/* 09-23、番号は左下（もとは左上。絵のセリフとぶつかりにくい位置）*/
position:absolute; z-index:1; bottom:8px; left:8px;
display:grid; place-items:center;
/* 09-23、番号を大きくした（12px → 24px）。
オレンジの丸だと絵の吹き出しとぶつかって見えたので、
角を少し丸めた四角＋半透明の濃いグレーにして、絵の上でも読めるようにしている */
width:44px; height:44px; border-radius:10%;
background:#3f3f3fa6; color:#fff;
font-size:24px; font-weight:700; line-height:1;
}
.dmanga__item img{display:block; width:100%; height:auto;}
.dispatch__note{
max-width:820px; margin:var(--s4) auto 0; padding:20px 24px;
background:var(--white); border:2px solid var(--orange-pale); border-radius:var(--r-l);
font-size:15px; line-height:2; color:var(--ink2);
}
.dispatch__note b{color:var(--orange-dark);}
/* 働けないケース。読みたい人だけ開くのでアコーディオン（details）にしている。
＋／− の出し方はトップやFAQのアコーディオンと同じ考え方 */
.dcase{max-width:860px; margin:0 auto;}
.dcase__item{
margin-bottom:var(--s2); overflow:hidden;
background:var(--white); border:2px solid var(--line-soft); border-radius:var(--r-m);
}
.dcase__item:last-child{margin-bottom:0;}
/* 開いたときの色は見出し（summary）だけに乗せる。FAQのアコーディオン（.faq__item）と同じ */
.dcase__item[open]{border-color:var(--orange-pale);}
.dcase__item[open] .dcase__ttl{background:#FFFCF6;}
.dcase__ttl{
list-style:none; cursor:pointer; position:relative;
margin:0; padding:20px 58px 20px 58px;
font-size:16px; font-weight:700; line-height:1.7;
}
/* タイトル左の丸チェック。行が折り返しても1行目の高さに合わせる */
.dcase__ttl::before{
content:""; position:absolute; left:22px; top:19px;
width:24px; height:24px; border-radius:50%;
background:var(--turquoise) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5.5 12.5 4.5 4.5 8.5-10' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 15px 15px no-repeat;
}
.dcase__ttl::-webkit-details-marker{display:none;}
.dcase__ttl::after{
content:""; position:absolute; right:24px; top:50%;
width:14px; height:2px; margin-top:-1px; background:var(--orange);
}
.dcase__item:not([open]) .dcase__ttl::after{
height:14px; margin-top:-7px; background:
linear-gradient(var(--orange),var(--orange)) center/14px 2px no-repeat,
linear-gradient(var(--orange),var(--orange)) center/2px 14px no-repeat;
}
.dcase__body{padding:0 24px 22px;}
.dcase__txt{margin:0 0 12px; font-size:14.5px; line-height:1.95; color:var(--ink2);}
.dcase__txt:last-child{margin-bottom:0;}
.dcase__list{margin:0; padding:0; list-style:none;}
.dcase__list li{
position:relative; padding-left:20px; margin-bottom:8px;
font-size:14.5px; line-height:1.8; color:var(--ink2);
}
.dcase__list li::before{
content:""; position:absolute; left:2px; top:.72em;
width:8px; height:8px; border-radius:50%; background:var(--orange);
}
.dcase__list li:last-child{margin-bottom:0;}
/* --- 就業までの流れ --- */
/* 見た目はトップの「ご利用の流れ」（.stepflow）と共通。
ここではセクションの余白と、末尾のボタンだけを持たせる */
/* 地色は敷かず、前後のセクションと同じ白の上に置く */
.gflow{padding:var(--sec-gap) 24px var(--s7);}
.gflow .stepflow__list{max-width:var(--wrap); margin:0 auto; padding:0;}
/* ⚠️ 09-10、このページだけイラストに枠を付けた。地の白に絵が直接置かれていて
1枚ずつの区切りが分かりにくいため。
枠は同日に、灰色の細い罫（1px／--line）から【2px の淡いオレンジ】に変更。
求職者向けの面なので、区切りを付けつつ色でも寄せている。
トップは支給デザインどおり枠なしなので、.gflow の中だけに効かせること */
.gflow .stepflow__ill{
padding:12px;
background:var(--white); border:2px solid var(--orange-soft); border-radius:var(--r-l);
}
/* ⚠️ 2026-09-10 現在、このページは縦積み（--row なし）の6ステップに戻したので、
下の --row 一式は使っていない。ここを横並びに戻すときのために残してある。
トップの横並びは画面端まで流して右で見切らせる作りだが、ここは本文と同じ
--wrap の中に収める節なので、流さずに4列の格子にして4枚とも見せる。
スクロール（overflow-x:auto）と端の余白（padding-inline）は打ち消すこと */
.gflow .stepflow__list--row{
display:grid; grid-template-columns:repeat(4, minmax(0, 1fr));
gap:var(--s3); overflow:visible;
padding:var(--s4) 0 0; padding-inline:0;
}
.gflow .stepflow__list--row .stepflow__item{width:auto;}
/* ⚠️ 2026-09-10 現在、.gflow__cta のマークアップは page-guide.php から外してある。
（フッター前のCTAと同じ導線が続けて2つ出るため）。戻すとき用にCSSだけ残している。
SPの指定は 6751行目あたりと 7111行目あたりにもある */
.gflow__cta{margin-top:var(--s5); display:flex; flex-wrap:wrap; gap:var(--s2); justify-content:center;}
@media (max-width:900px){
/* SPは写真を本文の上に置く */
.gabout{padding:var(--s4) 20px var(--s3);}
.gabout__inner{grid-template-columns:1fr; gap:18px;}
/* 図版は656px幅の1枚もの。1カラムでは枠が最大860pxまで広がるので、
そのまま伸ばすと拡大されて粗くなる。頭打ちにして中央へ置く */
/* 09-24、図版は本文の下に置く（もとは本文の上） */
.gabout__body{grid-column:1; grid-row:1;}
.gabout__inner .phbox{grid-column:1; grid-row:2; max-width:420px; margin-inline:auto;}
.gabout__body p{font-size:15px; line-height:2;}
/* 府県名を上、市町を下に積む（横に並べると市町の欄が細くなりすぎる） */
.gabout__area{flex-direction:column; gap:0;}
.gabout__area{padding:12px 2px;}
.gabout__area dd{font-size:14px;}
/* SPは図版を文字の上に置き、1カラムに積む */
.gbnrsec{padding:var(--s4) 20px 0;}
.gbnr{grid-template-columns:1fr; gap:18px; padding:24px 20px 26px;}
.gbnr__body{grid-row:2;}
.gbnr__fig{grid-row:1; max-width:260px; margin:0 auto;}
/* 企業様向け・はじめての方へは、横並びのときだけ枠いっぱいに広げている。
1カラムになるSPでは、はみ出しと下寄せを打ち消して他のバナーと同じ置き方に戻す */
.gbnr--biz .gbnr__fig,
.gbnr--guide .gbnr__fig{max-width:320px; margin:0 auto; align-self:auto;}
.gbnr__txt{font-size:14.5px; line-height:1.95;}
.gbnr__txt br{display:none;}
.gbnr__more{display:flex; justify-content:center; margin-top:18px;}
.dispatch{padding:var(--s4) 20px;}
.pglead,
.dispatch__lead{font-size:15px;}
.pglead br,
.dispatch__lead br{display:none;}
.gcatch{font-size:18px;}
/* 呼びかけの一文だけは、SPでも意図した位置で折り返す */
.gcatch br{display:inline;}
.sp-br{display:inline;}
.pc-br{display:none;}
.gsub{margin-top:var(--s5);}
/* 09-24、小札が長いもの（/client/service/ の「ご提供しているサービス01」）は
SPだと横に並べきれないので、札を1行目・見出しを2行目に送る */
.gsub--num{flex-wrap:wrap; gap:8px;}
/* 図版はSPでは縦長になりすぎないよう、少し正方形寄りにする */
/* ⚠️ 09-24、こちらも画面幅いっぱい（タップで拡大できる） */
.dptph .phbox{aspect-ratio:auto; height:auto;}
.dptph .phbox img{width:100%; height:auto;}
/* SPは1コマずつ＋次のコマが少しのぞく幅 */
.dmanga{
gap:12px;
padding-left:20px; scroll-padding-left:20px;
padding-right:calc(86vw + 12px);
}
.dmanga__item{flex-basis:86vw;}
.dispatch__note{padding:16px 18px; font-size:14.5px;}
.dcase__ttl{padding:16px 44px 16px 48px; font-size:15px;}
.dcase__ttl::before{left:16px; top:15px; width:22px; height:22px; background-size:14px 14px;}
.dcase__body{padding:0 18px 18px;}
.gflow{padding:var(--s4) 20px var(--s6);}
/* 4列だと1枚が細くなりすぎるので2列に。SPは1列（下の 560px 以下） */
.gflow .stepflow__list--row{grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--s3) 16px;}
.gflow__cta .btn{width:min(340px,100%);}
}
@media (max-width:560px){
.gflow .stepflow__list--row{grid-template-columns:minmax(0, 1fr);}
}
/* ============================================================
採用情報トップ（page-recruit.php）
見出し（.cttl / .gsub）・呼びかけ（.gcatch）・リード（.pglead）・
目次（template-parts/pagenav.php）・ステップ（.stepflow）は他ページと共通のものを使う。
ここでは採用ページ固有の中身だけを定義する
============================================================ */
/* --- イントロ（写真 ＋ リード ＋ 目次） --- */
/* 09-23、上の目次（.cnav）は地を持たず真っ白なので、地色（--bg＝#FCFCFC）との
わずかな差が境目の線に見えていた。上から140pxかけて白からなじませる */
.rintro{
background-color:var(--bg);
background-image:linear-gradient(to bottom, var(--white) 0, rgba(252,252,252,0) 140px);
background-repeat:no-repeat;
padding:var(--sec-gap) 24px var(--s4);
}
/* --- イントロの「はじめに」 --- */
/* 組みは会社概要の代表挨拶（.cmsg__grid 以下）をそのまま借りている。
間隔は見出し（.cttl）の下マージンに任せる */
/* 図版が未設置のあいだの仮枠。採用の「はじめに」と会社概要の代表挨拶で共通。
⚠️ 09-09に .cmsg__ph 側の囲み・比率を外したので、仮枠の見た目はここで自前に持つ。
ここを消すと、ファイルが無いときに高さゼロの見えない箱になる */
.cmsg__ph-empty{
display:grid; place-items:center; align-content:center; gap:4px;
width:100%; aspect-ratio:4/4.6;
background:var(--orange-pale);
border:2px dashed var(--orange); border-radius:var(--r-m);
font-size:12px; font-weight:700; letter-spacing:.08em; color:var(--orange-dark);
}
.cmsg__ph-empty small{
font-size:10.5px; font-weight:600; letter-spacing:.02em; color:#B08A57;
}
/* 絵の中の、肩に乗ったパンダから出す吹き出し。
採用の「はじめに」（recruit-message.png）と会社概要の代表挨拶（ceo.png）で共有する。
作りは他のパンダの吹き出し（.cpanda__bubble）と同じ、白地＋2pxの枠＋三角2枚の尾。
⚠️ 位置は絵のパンダの頭に合わせた％指定で、ページごとに下で持たせている。
図版を差し替えるときは、その位置も見直すこと */
.cmsg__bubble{
position:absolute; z-index:1;
padding:9px 14px;
background:var(--white); border:2px solid #F3DDBE; border-radius:18px;
font-size:13px; font-weight:700; line-height:1.5; letter-spacing:.02em;
color:var(--ink); text-align:center; white-space:nowrap;
}
/* 尾は下向き（吹き出しの下にいるパンダを指す）*/
.cmsg__bubble::before,
.cmsg__bubble::after{
content:""; position:absolute; right:20px;
width:0; height:0; border:9px solid transparent;
}
.cmsg__bubble::before{bottom:-18px; border-top-color:#F3DDBE;}
.cmsg__bubble::after{bottom:-15px; border-top-color:var(--white);}
/* 位置は絵ごと。採用（はじめに）と会社概要（代表挨拶）でパンダの居場所が違う。
⚠️ 採用ページの枠にも .cmsg__grid が付いているので、会社概要側は
セクションの .cmsg で囲って分ける（.cmsg__name と同じ分け方）*/
.rintro__msg .cmsg__bubble{left:-2%; top:0;}
.cmsg .cmsg__bubble{left:-4%; top:2%;}
/* --- セクション共通の枠。地色は他の下層ページと同じくフラットに保つ --- */
/* ⚠️ 中の仕事紹介スライダー（.rwork__slider）が画面端まで広がるので、はみ出しをここで切る。
clip にしておくと、位置指定の子要素（送りボタン）は切られない */
.rsec{background:var(--bg); padding:var(--sec-gap) 24px 0; overflow-x:clip;}
/* 節の間隔は「次の節の上余白」が持つので、.rsec の下は0にしてある。
最後の節（いまは「募集中の職種」）だけは受け手がいないので、ここで下の余白を持つ */
.rsec--last{padding-bottom:var(--sec-gap);}
.rsec__btns{margin-top:var(--s4); text-align:center;}
/* --- 私たちの仕事について --- */
/* 本文だけの段落。版面まで広げると1行が長くなるので、ここは読みやすい幅で止める。
文字は左そろえのまま、枠だけ版面の中央に置く（見出しの中心と軸を合わせるため） */
.rmsg{max-width:900px; margin-inline:auto; text-align:center;}
.rmsg p{margin:0 0 1.5em; font-size:16px; line-height:2.1; color:var(--ink2);}
.rmsg p:last-child{margin-bottom:0;}
/* --- 数字で見るヒロ・スタッフ --- */
/* --- どんな人と働きたいか --- */
/* 白いカードを3枚よこに並べる（09-09 支給ラフ）。カードの中は上から
「番号の丸 → 小見出し → 人物像 → オレンジの短い線 → 説明」の縦積み。
⚠️ 以前は左に画像（.rpsn__ph）を置く横組みだった。用意していた3枚は
仕事紹介（.rwork__ph の01〜03）へ移している。
画像つきに戻すなら、枠の指定はコミット 07715dc の .rpsn__ph 一式が使える */
.rpsn{
max-width:var(--wrap); margin:0 auto; padding:0; list-style:none;
display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s3);
}
/* 3枚で高さをそろえたいので、li もカードも縦に伸ばす（.entryhero__item と同じ作り）*/
.rpsn__item{display:flex;}
.rpsn__body{
flex:1;
padding:32px 30px 34px;
background:var(--white); border-radius:var(--r-l);
box-shadow:var(--sh-m);
}
/* 番号の丸は自分だけで1行を取る。中身は下に流す */
.rpsn__head{position:relative; display:block; margin:0 0 22px;}
/* 丸の右うしろから、同じ大きさの淡い丸をのぞかせる。
⚠️ z-index は使わないこと。負の値だとカードの地より後ろへ回ってしまう。
::before は .rpsn__no より先に描かれるので、重ねる順はこのままで正しい */
.rpsn__head::before{
content:"";
position:absolute; left:34px; top:0;
width:62px; height:62px; border-radius:50%;
background:var(--orange-pale);
}
/* 番号は塗りの丸。文字より先に目が行く位置なので、色はオレンジのまま濃度で締める */
.rpsn__no{
position:relative;
display:flex; align-items:center; justify-content:center;
width:62px; height:62px; border-radius:50%;
background:var(--orange); color:#fff;
font-size:21px; font-weight:700; letter-spacing:.04em; line-height:1;
}
.rpsn__eyebrow{
margin:0 0 6px;
font-size:12.5px; font-weight:700; letter-spacing:.08em; color:var(--orange-dark);
}
/* 見出しの下のオレンジの短い線。トップの見出し（.mission__ttl）と同じ引き方で、
カードの中なので左そろえ・少し短く */
.rpsn__ttl{
margin:0 0 20px;
font-size:clamp(19px,1.7vw,21px); font-weight:700; line-height:1.55; letter-spacing:.03em;
}
.rpsn__ttl::after{
content:""; display:block; width:44px; height:3px; border-radius:3px;
margin:18px 0 0; background:var(--orange);
}
.rpsn__txt{margin:0; font-size:14.5px; line-height:2; color:var(--ink2);}
.rpsn__txt + .rpsn__txt{margin-top:.8em;}
/* --- 仕事紹介。5職種のパネルを横スライドで1枚ずつ見せる --- */
/* ⚠️ 09-10、縦積み（grid）から横スライドに変えた。パネルの中身と見た目は変えていない。
送りはCSS（scroll-snap）任せで、JSは左右ボタン・点・端での折り返しだけを見る（site.js）*/
/* 画面の端まで使って、前後のパネルを両側にのぞかせる。
真ん中のパネルだけ版面（--wrap）の幅で、両隣は少し小さく見せる（.is-on で切り替え）*/
.rwork__slider{
--panel-w:min(var(--wrap), calc(100vw - 96px));
position:relative;
max-width:none; margin-inline:calc(50% - 50vw);
}
.rwork{
margin:0; list-style:none;
display:flex; gap:var(--s3); overflow-x:auto;
/* 1枚目・最後の1枚も中央に来られるよう、左右に画面の余りぶんの余白を取る */
padding:10px calc((100vw - var(--panel-w)) / 2) 16px;
scroll-padding-inline:calc((100vw - var(--panel-w)) / 2);
scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
scrollbar-width:none;
}
.rwork::-webkit-scrollbar{display:none;}
.rwork__item{
/* 1画面に1枚。幅は版面と同じなので、中の2段組みは縦積みのときと同じ形で入る */
flex:none; width:var(--panel-w); scroll-snap-align:center;
position:relative;
padding:30px 30px 28px;
background:var(--white); border:1px solid var(--line-soft); border-radius:var(--r-l);
box-shadow:var(--sh-s);
/* 両隣は一回り小さく。真ん中に来たパネルだけ原寸に戻す（.is-on は site.js が付ける）*/
transform:scale(.93); transform-origin:center;
transition:transform .35s ease;
}
.rwork__item.is-on{transform:scale(1);}
/* 送りボタン。真ん中のパネルの左右の隙間に置く */
.rwork__nav{
position:absolute; top:50%; transform:translateY(-50%); z-index:2;
display:grid; place-items:center;
width:44px; height:44px; padding:0; border:0; border-radius:50%; cursor:pointer;
background:var(--orange); color:#fff; box-shadow:var(--sh-m);
transition:transform .15s ease, background .15s ease;
}
.rwork__nav:hover{transform:translateY(-50%) scale(1.06); background:var(--orange-dark);}
.rwork__nav svg{width:20px; height:20px;}
.rwork__nav--prev{left:calc(50% - var(--panel-w) / 2 - 26px);}
.rwork__nav--next{right:calc(50% - var(--panel-w) / 2 - 26px);}
/* 何枚目かを示す点。中身は site.js が作る（1枚＝1点）*/
.rwork__dots{display:flex; justify-content:center; gap:9px; margin-top:var(--s3);}
.rwork__dots:empty{display:none;}
.rwork__dot{
width:9px; height:9px; padding:0; border:0; border-radius:50%; cursor:pointer;
background:#E2DED6;
transition:background .15s ease, transform .15s ease;
}
.rwork__dot:hover{transform:scale(1.15);}
.rwork__dot.is-on{background:var(--orange);}
/* 画像枠は社員インタビューと同じ見せ方。実線の四角の後ろに斜線ハッチを右下へずらして重ねる */
.rwork__ph{
position:relative; margin:0 10px 20px 0;
aspect-ratio:450/340;
}
.rwork__ph::before{
content:""; position:absolute; inset:0;
transform:translate(10px,10px);
border-radius:var(--r-m);
background:repeating-linear-gradient(
45deg,
var(--orange) 0 1.5px,
transparent 1.5px 7px
);
}
.rwork__ph img{
position:relative;
display:block; width:100%; height:100%; object-fit:cover;
border:2px solid var(--orange); border-radius:var(--r-m); background:var(--bg2);
}
/* 職種の通し番号。「ヒロ・スタッフエージェンシーのお仕事 01」の形で出す */
.rwork__no{
display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 10px;
margin:0 0 6px;
}
.rwork__no-label{
font-size:12.5px; font-weight:700; letter-spacing:.06em; color:var(--ink3);
}
.rwork__no-num{
font-size:22px; font-weight:700; line-height:1; letter-spacing:.08em;
color:var(--coral-pale);
}
.rwork__ttl{
margin:0 0 12px; padding-left:14px;
border-left:5px solid var(--orange); border-radius:2px;
font-size:22px; font-weight:700; line-height:1.4; letter-spacing:.03em;
}
/* キャッチは淡いタグで見せる */
.rwork__catch{
display:inline-block; margin:0 0 14px; padding:5px 14px;
background:var(--orange-pale); border-radius:var(--r-full);
font-size:14px; font-weight:700; letter-spacing:.04em; color:var(--orange-dark);
}
.rwork__txt{margin:0; font-size:15px; line-height:2.05; color:var(--ink2);}
/* 見出しと本文はパネルの全幅。その下を「画像＋担当業務・魅力」の2段目にする */
.rwork__head{margin:0 0 20px;}
/* 担当する業務の例。丸チェックはサイト共通のターコイズで揃える */
.rwork__list{margin:0; padding:0; list-style:none;}
.rwork__list li{
position:relative; margin-bottom:8px; padding-left:28px;
font-size:14px; line-height:1.8; color:var(--ink2);
}
.rwork__list li:last-child{margin-bottom:0;}
.rwork__list li::before{
content:""; position:absolute; left:0; top:.3em;
width:19px; height:19px; border-radius:50%;
background:var(--turquoise) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5.5 12.5 4.5 4.5 8.5-10' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
}
/* どんな方に向く仕事か（クライアント提供の「◯◯な方へ」）。
業務内容とは性格が違う文なので、色地の箱に入れてパネルの締めに置く */
.rwork__appeal{
margin:20px 0 0; padding:16px 20px 18px;
background:var(--orange-pale); border-radius:var(--r-s);
}
/* 担当業務の例がない職種では、魅力が2段目の先頭に来る */
.rwork__detail > :first-child{margin-top:0;}
.rwork__appeal-ttl{
position:relative; margin:0 0 8px; padding-left:24px;
font-size:15px; font-weight:700; line-height:1.7; color:var(--orange-dark);
}
/* 頭の印。ターコイズのチェックは業務例で使っているので、こちらは矢羽根で差をつける */
.rwork__appeal-ttl::before{
content:""; position:absolute; left:0; top:.35em;
width:16px; height:16px;
background:var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 5.5 15.5 12 9 18.5' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px 11px no-repeat;
border-radius:50%;
}
.rwork__appeal-txt{margin:0; font-size:14.5px; line-height:2; color:var(--ink2);}
/* PCはパネルの中を2段に分ける。
1段目＝見出しと本文（全幅）、2段目＝画像（左）＋担当業務・魅力（右） */
@media (min-width:901px){
.rwork__item{
display:grid; grid-template-columns:minmax(0,290px) minmax(0,1fr);
column-gap:clamp(30px,4vw,46px); align-items:start;
padding:34px 40px;
}
.rwork__head{grid-column:1 / -1;}
.rwork__ph{grid-column:1; margin:0 10px 10px 0;}
.rwork__detail{grid-column:2;}
/* 画像を持たない職種は、左に空の列を作らず全幅で組む */
.rwork__item--nofig{grid-template-columns:minmax(0,1fr);}
.rwork__item--nofig .rwork__detail{grid-column:1;}
}
/* --- はたらく環境。5項目を白いカードで並べる --- */
/* 1列だと版面いっぱい（1120px）に1〜2行の文章が伸びて行が長くなり、
カードの右半分が空くうえ5枚が同じ見えで単調になっていた。2列に組んで
行長を半分にし、中身の多い⑤（--wide）だけ下段に全幅で置く */
.renv{
max-width:var(--wrap); margin:0 auto; padding:0; list-style:none;
display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s3);
}
.renv__item{
padding:28px 28px 26px;
background:var(--white); border:1px solid var(--line-soft); border-radius:var(--r-l);
box-shadow:var(--sh-s);
}
/* 番号は見出しの左に並べる */
.renv__head{display:flex; align-items:center; gap:14px; margin:0 0 14px;}
/* 番号は求める人物像（.rpsn__no）と同じ塗りの丸。ひと回り小さくしている。
以前は --coral-pale の数字だけで、地の白に沈んで拾えなかった */
.renv__no{
flex:none; margin:0;
display:grid; place-items:center;
width:42px; height:42px; border-radius:50%;
background:var(--orange); color:#fff;
font-size:16px; font-weight:700; line-height:1; letter-spacing:.04em;
}
/* 番号の丸が視線の起点になるので、見出し側の縦棒は外す（飾りが二重になるため） */
.renv__ttl{
margin:0;
font-size:17px; font-weight:700; line-height:1.6; letter-spacing:.03em;
}
.renv__txt{margin:0; font-size:14.5px; line-height:2; color:var(--ink2);}
/* 小項目を持つカード（⑤フラットな関係）は、中身が多いので全幅で置く */
.renv__item--wide{grid-column:1 / -1;}
.renv__subs{
display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:14px;
margin:16px 0 0; padding:16px 0 0; border-top:1px dashed var(--line); list-style:none;
}
.renv__sub-ttl{
position:relative; margin:0 0 5px; padding-left:22px;
font-size:14.5px; font-weight:700; line-height:1.6; color:var(--orange-dark);
}
/* 頭の印は仕事紹介の魅力（.rwork__appeal-ttl）と同じ矢羽根で揃える */
.renv__sub-ttl::before{
content:""; position:absolute; left:0; top:.3em;
width:15px; height:15px; border-radius:50%;
background:var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 5.5 15.5 12 9 18.5' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 10px 10px no-repeat;
}
.renv__sub-txt{margin:0; font-size:14px; line-height:1.95; color:var(--ink2);}
/* --- 募集中の職種。カードは一覧ページと同じ .rjobs__grid / .rjob を使う --- */
/* 09-26、採用情報ページだけ横スライダーに（--slide）。PCは3枚、SPは1枚＋次が少し覗く幅。
上下に余白を取っているのは、ホバーで浮くカードの影が overflow で切れないようにするため
（そのぶん margin を負にして、見た目の位置は元のまま） */
.rjobs__grid--slide{
display:flex; gap:var(--s3); overflow-x:auto;
margin-block:calc(var(--s3) - 12px) -24px; padding:12px 2px 24px;
/* 左の 2px（影の逃げ）ぶんを吸着位置にも入れる。ないと先頭で scrollLeft が 2 になり「前へ」が薄くならない */
scroll-padding-left:2px;
scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
scrollbar-width:none;
}
.rjobs__grid--slide::-webkit-scrollbar{display:none;}
/* min-width:0 がないと、長い職種名（業務人材コーディネーター等）がカードを押し広げて幅がそろわない */
.rjobs__grid--slide .rjob{flex:0 0 calc((100% - var(--s3) * 2) / 3); min-width:0; scroll-snap-align:start;}
.rjobs__grid--slide + .sldnav{margin-top:var(--s2);}
/* 3枚並びだと幅が狭くなるので、左右の余白を詰めて職種名（12字まで）を1行に収める */
.rjobs__grid--slide .rjob{padding:40px 30px 32px;}
.rjobs__grid--slide .rjob__ttl{font-size:clamp(19px,1.6vw,22px);}
@media (max-width:900px){
.rjobs__grid--slide .rjob{flex-basis:calc((100% - var(--s3)) / 2);}
}
@media (max-width:600px){
/* 版面の左右いっぱいまで流し、次のカードを右端で見切らせる */
.rjobs__grid--slide{gap:12px; margin-inline:-20px; padding-inline:20px; scroll-padding-left:20px;}
.rjobs__grid--slide .rjob{flex-basis:84%; padding:30px 24px 24px;}
}
/* --- 応募から入社までの流れ --- */
/* カードは企業様向けの「お申込みの流れ」（.cflow）と同じ組みをそのまま使う。
.cflow は企業様＝ブルーの識別色なので、採用ページではオレンジに戻す。
仮枠（.phbox）の既定色はオレンジなので、ここでは触らなくてよい */
.rflow{background:var(--bg); padding:var(--sec-gap) 24px var(--s7);}
.rflow .cflow__no{color:var(--orange-dark);}
.rflow .cflow__nozero{color:var(--orange); opacity:.45;}
.rflow .cflow__ttl{border-left-color:var(--orange-pale);}
.rflow .cflow__item+.cflow__item::before{border-top-color:var(--orange);}
@media (max-width:900px){
/* 写真は上、文章は下。写真は横長に切り替えて縦の間延びを防ぐ */
/* 3列だと1行が短くなりすぎるので1列に落とす */
.rpsn{grid-template-columns:minmax(0,1fr); gap:var(--s2);}
.rpsn__body{padding:26px 24px 28px;}
.rpsn__head{margin-bottom:18px;}
/* 丸を縮めるときは、後ろの淡い丸（.rpsn__head::before）も同じ寸法にすること */
.rpsn__head::before{left:29px; width:52px; height:52px;}
.rpsn__no{width:52px; height:52px; font-size:18px;}
.rpsn__ttl{margin-bottom:16px;}
.rpsn__ttl::after{margin-top:14px;}
.rwork{gap:var(--s2);}
.rwork__item{padding:24px 20px 22px;}
/* 画面が狭いと左右の余りが少ないので、ボタンは小さくしてパネルの上に少し重ねる */
.rwork__slider{--panel-w:min(var(--wrap), calc(100vw - 56px));}
.rwork__nav{width:36px; height:36px;}
.rwork__nav svg{width:17px; height:17px;}
.rwork__nav--prev{left:calc(50% - var(--panel-w) / 2 - 14px);}
.rwork__nav--next{right:calc(50% - var(--panel-w) / 2 - 14px);}
/* 小さくしすぎると読みにくいので、SPは縮小を控えめに */
.rwork__item{transform:scale(.96);}
.rwork__catch{font-size:12.5px; padding:4px 12px;}
.rwork__head{margin-bottom:16px;}
.rwork__ph{margin-bottom:16px;}
.rwork__ttl{font-size:18px;}
.rwork__appeal{padding:14px 16px 16px;}
.rwork__appeal-ttl{font-size:14.5px;}
.rwork__appeal-txt{font-size:14px;}
/* 2列に割る幅がないので1列に戻す。番号の丸と余白もひと回り詰める */
.renv{grid-template-columns:1fr; gap:var(--s2);}
.renv__item{padding:24px 20px 22px;}
.renv__head{gap:12px; margin-bottom:12px;}
.renv__no{width:38px; height:38px; font-size:15px;}
.renv__ttl{font-size:16.5px;}
.renv__subs{gap:16px; margin-top:14px; padding-top:14px;}
}
@media (max-width:820px){
.rintro{padding:var(--s4) 20px var(--s3);}
.rsec{padding:var(--s4) 20px;}
.rmsg p{font-size:15px; line-height:2;}
.rflow{padding:var(--s4) 20px var(--s6);}
.gflow__cta .btn,
.rsec__btns .btn{width:min(340px,100%); justify-content:center;}
}
/* ============================================================
社員インタビュー 詳細（single-voice.php）
写真を全面に敷いたヒーロー ＋ Q&A形式の本文
============================================================ */
.ivw{background:var(--bg);}
/* --- ヒーロー --- */
/* 画面いっぱいではなく本文（.ivw__inner）と同じ版面幅に収め、横3：縦2の比率で置く */
.ivw__hero{
position:relative; overflow:hidden;
width:min(var(--wrap), calc(100% - 48px)); aspect-ratio:3/2;
margin:0 auto;
}
.ivw__herobg{position:absolute; inset:0; z-index:0;}
.ivw__herobg img{width:100%; height:100%; object-fit:cover; display:block;}
.ivw__herobg-empty{
display:grid; place-items:center; width:100%; height:100%;
background:var(--orange-pale); border:2px dashed var(--orange);
font-size:15px; font-weight:700; letter-spacing:.14em; color:var(--orange-dark);
}
.ivw__heroin{
position:relative; z-index:2;
display:flex; flex-direction:column; justify-content:space-between; gap:24px;
/* ヒーロー自体が版面幅なので、中身は枠の内側に余白を取って置く */
height:100%;
padding:32px 36px;
}
/* ヒーロー内のパンくず。地色を持たず、写真の上にそのまま置く */
/* ヒーローの中、見出しの上に置くパンくず。
地はヒーローが持っているので背景・余白は落とし、幅の制限も外す
（インタビュー詳細では .ivw__heroin が版面に収めている） */
.crumb--in-hero{background:none; padding:0; margin:0 0 14px;}
/* 中央そろえの見出しとは別に、パンくずは左端に置く。
.crumb__list は flex なので、既定の flex-start が左そろえになる
（.phead の text-align:center は flex の並びには効かない） */
.crumb--in-hero .crumb__list{max-width:none; margin:0; font-size:13px;}
/* 下層共通のヒーロー（.phead）だけは、見出しをヒーローの高さの中心に置くために
パンくずを流れから外して上端へ固定する。流れの中に見出しだけを残すのが目的。
絶対配置にすると .phead__inner の版面から外れるので、左右の余白と最大幅は
ここで .phead と同じ値（25px ／ --wrap）を持ち直している */
.phead .crumb--in-hero{
position:absolute; top:22px; left:0; right:0; z-index:2;
margin:0; padding:0 25px;
}
.phead .crumb--in-hero .crumb__list{max-width:var(--wrap); margin:0 auto;}
/* パンくず＋人物ブロック。地は敷かず、画像の上にそのまま置く */
.ivw__herohead{align-self:flex-start;}
/* 人物ブロック。左のオレンジの罫でひとかたまりに見せる */
.ivw__person{padding-left:16px; border-left:3px solid var(--orange);}
.ivw__role{margin:0 0 4px; font-size:16px; font-weight:600; color:var(--ink2);}
.ivw__name{margin:0 0 4px; font-size:26px; font-weight:700; letter-spacing:.06em; color:var(--ink);}
.ivw__join{margin:0; font-size:14px; color:var(--ink3);}
/* キャッチは1行ずつ黒帯にする */
.ivw__catch{
display:inline-flex; flex-direction:column; align-items:flex-start; gap:2px;
margin:0 0 18px;
}
.ivw__catch span{
padding:6px 16px;
background:var(--ink); color:#fff;
font-size:clamp(19px,2.3vw,30px); font-weight:700; line-height:1.5;
}
.ivw__tags{display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none;}
.ivw__tags li,
.ivw__tagssp li{
padding:6px 13px;
background:var(--white); border:1px solid #E7E2D9;
font-size:13px; font-weight:600; line-height:1.4; color:var(--ink2);
}
/* SP用のキーワード（PCでは出さない） */
.ivw__tagssp{display:none;}
.ivw__tagssp ul{display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:0; list-style:none;}
/* --- 本文（Q&A） --- */
/* 左右のパディングぶんを足して、中身の幅を版面（--wrap）に揃える */
.ivw__inner{max-width:calc(var(--wrap) + 48px); margin:0 auto; padding:0 24px;}
.ivw__qa{padding:var(--s6) 0 var(--s4);}
.ivw__item{margin-bottom:var(--s6);}
.ivw__item:last-child{margin-bottom:0;}
/* 「Question 01 ——」の行。数字のあとに細い罫を伸ばす */
.ivw__num{
display:flex; align-items:center; gap:14px; margin:0 0 20px;
font-size:15px; font-weight:600; letter-spacing:.08em; color:var(--orange);
}
.ivw__line{flex:0 0 48px; height:1px; background:var(--orange);}
.ivw__q{
margin:0 0 20px;
font-size:clamp(19px,2vw,23px); font-weight:700; line-height:1.6; color:var(--ink);
}
.ivw__a{font-size:16px; line-height:2; color:var(--ink2);}
.ivw__a p{margin:0 0 1.4em;}
.ivw__a p:last-child{margin-bottom:0;}
/* --- メッセージ（ここがいい！） --- */
.ivw__msg{padding:0 0 var(--s5);}
.ivw__msg .ivw__inner{padding-top:var(--s5); border-top:1px solid var(--line);}
.ivw__msgttl{
margin:0 0 20px;
font-size:clamp(19px,2vw,23px); font-weight:700; line-height:1.6; color:var(--ink);
}
/* ひと言（任意）。囲みの中で本文の前に置く */
.ivw__msglead{
margin:0 0 1.2em;
font-size:17px; font-weight:700; line-height:1.9; color:var(--ink);
}
.ivw__msgbody{
padding:32px 36px;
background:var(--white); border:1px solid var(--line); border-radius:var(--r-m);
font-size:16px; line-height:2; color:var(--ink2);
}
.ivw__msgbody p{margin:0 0 1.4em;}
.ivw__msgbody p:last-child{margin-bottom:0;}
.ivw__foot{
display:flex; flex-wrap:wrap; gap:var(--s2); justify-content:center;
padding:0 24px var(--s7);
}
@media (max-width:900px){
/* SPは画面が縦長で、白地の人物ブロックが顔にかぶる。
人物ブロックを画像の上に出し、画像は下に全体が見える比率で置く。
キャッチだけは従来どおり画像の左下に重ねる */
.ivw__hero{display:grid; width:calc(100% - 40px); aspect-ratio:auto; margin-top:0; overflow:visible;}
.ivw__heroin{display:contents;}
.ivw__herohead{
grid-row:1; grid-column:1; align-self:stretch;
padding:20px 0 18px; background:none; border-radius:0;
}
.ivw__herobg{position:relative; inset:auto; grid-row:2; grid-column:1; aspect-ratio:3/2; overflow:hidden;}
.ivw__herotop{grid-row:2; grid-column:1; align-self:end; z-index:2; padding:0 20px 18px;}
/* SPは写真の下にキーワードを出す */
.ivw__tags{display:none;}
.ivw__tagssp{display:block; padding:16px 20px 0;}
.ivw__catch{margin-bottom:0;}
.ivw__catch span{font-size:18px; padding:5px 12px;}
.ivw__name{font-size:22px;}
.ivw__inner{padding:0 20px;}
.ivw__qa{padding:var(--s5) 0 var(--s3);}
.ivw__item{margin-bottom:var(--s5);}
.ivw__a{font-size:15px; line-height:1.95;}
.ivw__msgbody{padding:22px 20px; font-size:15px; line-height:1.95;}
.ivw__foot{padding-bottom:var(--s6);}
.ivw__foot .btn{width:min(340px,100%);}
}
/* ============================================================
数字のブロック（トップの対応エリア／企業様向けの選ばれる理由）
============================================================ */
/* 出典はクライアント提供の「地域密着・人材の密度」。
⚠️ 約30,000名は【累計】の登録スタッフ数なので、注記（.numlist__note）と必ずセットで出すこと。
地色の上に白いカードを3枚並べるだけの型。企業様向けは --biz でブルーに寄せる */
.numlist{
margin:var(--s4) 0 0; padding:0; list-style:none;
display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s2);
}
.numlist__item{
padding:22px 18px; text-align:center;
background:var(--white); border-radius:var(--r-l);
border:1px solid var(--line-soft); box-shadow:var(--sh-s);
}
.numlist__cap{margin:0 0 8px; font-size:13px; font-weight:600; color:var(--ink3);}
/* 数字は折り返させない。トップの対応エリアはカード幅が狭いので、上限は控えめに取る */
.numlist__val{
margin:0; white-space:nowrap;
font-size:clamp(19px,1.7vw,26px); font-weight:700; line-height:1.2;
letter-spacing:.02em; color:var(--orange-dark);
}
.numlist__unit{margin-left:4px; font-size:.55em; font-weight:600; color:var(--ink2);}
.numlist__note{
margin:14px 0 0;
font-size:12.5px; line-height:1.85; color:var(--ink3);
}
/* 企業様向け。識別色に合わせて数字と枠をブルーへ */
.numlist--biz .numlist__item{border-color:#DCE8F1;}
.numlist--biz .numlist__val{color:var(--blue-deep);}
/* 選ばれる理由では、リードと POINT 01 のあいだに挟まるので下にも余白をとる */
.cfeat .numlist__note{margin-bottom:var(--s5);}
@media (max-width:900px){
.numlist{grid-template-columns:1fr; gap:10px; margin-top:var(--s3);}
/* 1列になると縦に間延びするので、ラベルと数字を横に並べる */
.numlist__item{
display:flex; align-items:baseline; justify-content:space-between; gap:12px;
padding:14px 18px; text-align:left;
}
.numlist__cap{margin:0;}
}
/* ============================================================
トップ：左のイラストレーン（PCのみ）
============================================================ */
/* 「この町でもっと自由に働けるように」から「特長3」までの5セクションを
.lanewrap で囲み、画面の左側に道とパンダを流すレーンをつくる。
⚠️ このブロックは各セクションの padding 指定より後ろに置くこと。
前に置くと .dxsys などの padding 一括指定に上書きされる。 */
.lanewrap{position:relative;}
/* レーンはPC専用。狭い画面では道も歩く人も出さない */
.lane{display:none;}
@media (min-width:1280px){
/* レーンの寸法は :root に置く。中のセクションとレーンだけでなく、
.lanewrap の外（はたらくまでの4ステップのビル）からも参照するため */
:root{
/* 左にあける幅。レーンの広さを変えたいときはここだけ触ればよい */
--lane:180px;
/* この区間だけ版面を 1100 から縮める */
--lane-wrap:950px;
/* 版面の左端（画面の左からの距離）。道の位置とスライダーにも使う */
--edge:calc((100vw + var(--lane) - var(--lane-wrap)) / 2);
/* レーンの幅と、その中を通る道の中心（どちらも画面の左からの距離）。
道の直線部分はレーンの右端から 30〜150px なので、中心は右端 −90px */
--lane-w:min(300px, calc(var(--edge) - 40px));
--road-x:calc(var(--lane-w) - 90px);
}
.lanewrap{--wrap:var(--lane-wrap);}
/* クリームの地は各セクションではなくラッパーに敷く。
セクションに敷いたままだと、全幅の背景が道の上に乗って道が見えなくなる。
（道は position:absolute なので、通常フローの背景より後に描かれるが、
セクション側に z-index:1 を与えるとその上に来てしまう）
5セクションとも同じ --bg2 なので、まとめて1枚にできる */
.lanewrap{background:var(--bg2);}
/* 左右のパディングで版面の位置そのものを決める。
中の .secwrap は max-width:var(--wrap) ＋ margin:auto なので、
この内側にぴったり収まる */
.lanewrap > section{
background:transparent;
padding-left:var(--edge);
padding-right:calc(100vw - var(--edge) - var(--wrap));
/* 道より本文を手前に出す */
position:relative; z-index:1;
}
/* ピンクの帯も左のレーンにはかからせない。左は版面の左端、右は画面端まで */
.care__band{left:var(--edge); right:0;}
/* 特長パネルの右の突き抜け。版面が中央にないので、中央基準ではなく
「画面幅 − 版面の左端 − 版面の幅」で右の余りを出して戻す */
.ptlead{
--gap-r:calc(100vw - var(--edge) - var(--wrap));
margin-right:calc(-1 * var(--gap-r));
padding-right:calc(var(--gap-r) + 48px);
}
/* 画面端まで流す横スライダーは、中央基準の calc(50% - 50vw) では
左右にずれてしまう（版面がもう中央にないため）。
左は版面の左端に戻し、右はそのまま画面端まで流す */
.care__list,
/* ⚠️ .voicepanel の中に入ったカード列には効かせない（上の .voicepanel .voice が打ち消す）*/
.homevoice .voice{
margin-left:calc(-1 * var(--edge));
margin-right:calc(var(--edge) + var(--wrap) - 100vw);
padding-left:var(--edge);
padding-right:24px;
scroll-padding-left:var(--edge);
scroll-padding-right:24px;
}
/* 5つの体制だけ、見出しと同じ字下げぶんを足す */
.care__list{
padding-left:calc(var(--edge) + var(--care-indent));
scroll-padding-left:calc(var(--edge) + var(--care-indent));
}
/* --- レーンの中身（道と、歩くパンダ＋スタッフ） --- */
/* 5セクションぶんの高さを覆う1枚。飾りなので操作の邪魔をさせない。
幅は「画面の左端寄り」を保ちつつ、版面には近づけすぎない値。
広い画面では300pxで左に寄り、1280px前後では版面の手前で止まる */
/* 下は .lanewrap の外へ、次の「4ステップ」の帯の下辺（＝地面）まで伸ばす。
z-index は 1。0 のままだと、後ろにある .stepflow__head（position:relative）の
地に隠れてしまう。同じ 1 の本文セクションはDOM順で後なので本文が手前のまま */
.lane{
display:block;
position:absolute; left:0; top:0;
bottom:calc(-1 * var(--flow-head-h));
width:var(--lane-w);
z-index:1; pointer-events:none;
}
/* 道は「上の曲がり（SVG）」＋「下へ続く直線（span）」の2つでできている。
曲線を縦に引き伸ばすと道幅が歪むので、SVGは原寸のまま上に置き、
残りの高さは直線に伸ばさせている。
どちらもレーンの右端そろえ。SVG内の直線部分（x=150〜270／全幅300）に
合わせて、右に30pxのはみ出しぶんを見込んだ位置に直線を置く */
.lane__road{
position:absolute; inset:0;
display:flex; flex-direction:column; align-items:flex-end;
}
/* viewBox が -200〜300 の 500 幅なので、要素も 500px。レーンの右端そろえで
置くと左の 200px が画面の外へ出て、道の出だしが切れずに流れていく */
.lane__curve{display:block; flex:none; width:500px; height:520px;}
/* 同じ線を3本重ねて道にする。外から順に、縁（淡い帯）→ 路面 → 中央の破線。
曲線は SVG の下端（y=520）で接線が垂直になるので、直線とまっすぐつながる */
/* 09-09、道幅を2段階で細くした（路面120→80→54px）。
中央線も同じ比率で細く・短くしている */
.lane__edge{stroke:#F1EFEA; stroke-width:66;}
.lane__asphalt{stroke:#E3E1DC; stroke-width:54;}
.lane__dash{stroke:#FBFAF7; stroke-width:3; stroke-dasharray:16 16; stroke-linecap:round;}
/* 直線部分。曲線と同じ「縁・路面・中央線」を背景の3層で組み立てる。
⚠️ 縁を box-shadow で出すと、上辺にも影が回って曲線との継ぎ目に
横線が出る。だから縁は「幅134pxの地」として敷き、路面120pxを
その上に中央ぞろえで重ねている。
継ぎ目のアンチエイリアスも出ないよう、1pxだけ曲線に食い込ませる */
/* 直線部分。09-09、まっすぐな帯からゆるやかな波形に変えた。
⚠️ 縦に繰り返す1枚のSVGで描いている。タイル（144×360px）の上端と下端は
どちらも中心 x=72 で接線が垂直なので、繰り返しても継ぎ目に折れ目が出ない。
道幅を変えるときは、このデータURI内の stroke-width（縁92／路面80／中央線4）と
要素の width、margin-right の3つを一緒に直すこと
（波の振れ幅±22 ＋ 縁の半分33 で、ちょうど110pxに収まる寸法にしてある）。
うねりの細かさはタイルの高さ（1440px）で決まる。小さくすると波が細かくなる */
.lane__straight{
flex:1; width:110px; margin-right:35px; margin-top:-1px;
background:url("data:image/svg+xml,") repeat-y 0 0 / 110px 1440px;
}
/* --- 道を走る車と、その上を飛ぶパンダ --- */
/* 道の出だし（左上のカーブ）からいちばん下まで、道なりの1本の経路をたどらせる。
経路は offset-path。曲がりは offset-rotate:auto がパスの接線から自動で出すので、
角度をこちらで持つ必要はない。
⚠️ 箱（.lane__cars）は「レーンの右端そろえ・幅500px」。道のSVG（.lane__curve）も
.lane__straight も同じ右端そろえなので、レーンの幅が変わっても経路と道はズレない。
逆に、この箱の幅・右そろえ・経路の座標のどれかだけを変えるとズレる。
⚠️ 経路の座標の意味：道の中心は x=410。カーブは y=70〜520。
そこから下は1440pxごとのうねりを4回（y=520〜6280）。
うねりの左右は 388／432（中心±22）で、.lane__straight のSVGと同じ値。
⚠️ ページが長くなって道が 6280px を超えると、経路の終わりで車が消える。
そのときはうねりの繰り返しを足すこと（1回＝1440px）*/
.lane__cars{
position:absolute; right:0; top:0; bottom:0;
width:500px; margin:0; padding:0; list-style:none;
/* 経路の終わりが道の終わりより下に出るぶんを切る */
overflow:hidden;
}
.lane__car,
.lane__flyer{
position:absolute; left:0; top:0;
offset-path:path("M10 70C290 70 410 250 410 520C410 700 388 700 388 880C388 1060 432 1060 432 1240C432 1420 388 1420 388 1600C388 1780 410 1780 410 1960C410 2140 388 2140 388 2320C388 2500 432 2500 432 2680C432 2860 388 2860 388 3040C388 3220 410 3220 410 3400C410 3580 388 3580 388 3760C388 3940 432 3940 432 4120C432 4300 388 4300 388 4480C388 4660 410 4660 410 4840C410 5020 388 5020 388 5200C388 5380 432 5380 432 5560C432 5740 388 5740 388 5920C388 6100 410 6100 410 6280");
animation:lane-drive 46s linear infinite;
}
.lane__car img,
.lane__flyer img{display:block; width:100%; height:auto;}
.lane__car{width:22px;}
/* 絵は上向き（鼻先が -Y）。進む向きへ合わせるのに90度足す。
車線への寄せは offset-anchor で。回転後の箱の横方向＝道に対して直角になるので、
ここを動かすと道の左右へずれる */
/* ⚠️ 左側通行。下りの車は進行方向の左＝画面の右車線に来る。
offset-anchor を + にすると進行方向の左へ寄る（下りなら画面の右、上りなら画面の左） */
.lane__car--d{offset-rotate:auto 90deg; offset-anchor:calc(50% + 13px) 50%;}
/* 上りは進む向きが逆。絵をそのまま使いたいので、回転を180度ずらす。
⚠️ 回転だけだと「鼻先は上・進むのは下」でバックに見える。経路も逆にたどらせること
⚠️ 10-03、ここを −13px にしていたため、上りも画面の右車線を走って下りと正面衝突していた。
箱が下りと180度逆を向いているので、同じ +13px で画面の左へ寄る（＝上りの左車線） */
.lane__car--u{offset-rotate:auto 270deg; offset-anchor:calc(50% + 13px) 50%; animation-direction:reverse;}
/* パンダは道の中心の上を飛ぶ。絵は下向き（鼻先が +Y）なので回転は −90度 */
.lane__flyer{
/* 車と同じ幅にそろえる（.lane__car と同値） */
width:22px;
offset-rotate:auto -90deg; offset-anchor:50% 50%;
animation-duration:38s; animation-delay:-9s;
}
@keyframes lane-drive{
from{offset-distance:0%;}
to {offset-distance:100%;}
}
/* ⚠️ パンダのスクロール追従は CSS ではなく site.js が持っている。
以前は CSS の view-timeline（@supports で囲ったもの）でやっていたが、
ブラウザごとに解釈が割れて、対応していると判定されたのに動かず
パンダが経路の先頭（画面の外）で止まる、という状態になった。
いまは全ブラウザで JS の1本道。ここに書いてある時間ベースの動きは、
JS が動かないとき（無効・失敗時）の保険として残している */
/* 動きを減らす設定では止める。止まる位置は台ごとに違うので、並びは自然なまま */
@media (prefers-reduced-motion:reduce){
.lane__car,
.lane__flyer{animation:none;}
}
/* 道ぞいの小さな木。レーンの高さに対する％で置いているので、
セクションが増減しても散らばり方は変わらない。
⚠️ すべて道の左の帯に収める。道の中心は --road-x（レーンの右端 −90px）で、
路面の半分33px ＋ うねり±22px ＝ 中心から55pxまでが道。
いまのレーン（1440pxで295px幅）だと道の左端は150px なので、
left ＋ width が145pxを超えないこと */
.lane__trees{position:absolute; inset:0; margin:0; padding:0; list-style:none;}
.lane__tree{position:absolute; width:44px;}
.lane__tree img{display:block; width:100%; height:auto;}
.lane__tree--1 {left:60px; top:3.5%; width:50px;}
.lane__tree--2 {left:14px; top:6.5%; width:36px;}
.lane__tree--3 {left:78px; top:14%; width:42px;}
.lane__tree--4 {left:26px; top:21%; width:56px;}
.lane__tree--5 {left:66px; top:30%; width:38px;}
.lane__tree--6 {left:10px; top:39%; width:46px;}
.lane__tree--7 {left:72px; top:50%; width:52px;}
.lane__tree--8 {left:22px; top:60%; width:36px;}
.lane__tree--9 {left:62px; top:72%; width:44px;}
.lane__tree--10{left:12px; top:84%; width:50px;}
/* 道ぎわの列。右端が140px前後＝道の左端（150px）のすぐ手前に来るようにしている。
これ以上右へ寄せると、うねりの谷で路肩に乗る */
.lane__tree--13{left:104px; top:8%; width:34px;}
.lane__tree--14{left:108px; top:17%; width:32px;}
.lane__tree--15{left:100px; top:26%; width:40px;}
.lane__tree--16{left:110px; top:35%; width:30px;}
.lane__tree--17{left:98px; top:45%; width:44px;}
.lane__tree--18{left:106px; top:56%; width:36px;}
.lane__tree--19{left:100px; top:66%; width:38px;}
.lane__tree--20{left:108px; top:78%; width:34px;}
.lane__tree--21{left:96px; top:90%; width:46px;}
/* 道の右にも少しだけ。右の余りは35pxしかないので、小さいものだけを置く
（right 基準にして、レーンの右端からの距離で決める） */
/* ⚠️ 上半分にかたよらせないこと。レーンは5セクションぶんの高さがあるので、
70%より下にも置かないと、ページの後半で道の右側だけ木が途切れて見える */
.lane__tree--11{left:auto; right:2px; top:11%; width:30px;}
.lane__tree--22{left:auto; right:4px; top:28%; width:28px;}
.lane__tree--12{left:auto; right:6px; top:45%; width:26px;}
.lane__tree--24{left:auto; right:1px; top:58%; width:32px;}
.lane__tree--23{left:auto; right:5px; top:70%; width:28px;}
.lane__tree--25{left:auto; right:2px; top:80%; width:30px;}
.lane__tree--26{left:auto; right:7px; top:88%; width:26px;}
.lane__tree--27{left:auto; right:1px; top:95%; width:32px;}
/* 左の列も最下部まで続ける */
.lane__tree--28{left:34px; top:96%; width:40px;}
/* 歩く人。position:sticky なので、レーンを通り過ぎるあいだ画面に留まり、
道が後ろを流れていく＝道を歩いているように見える。
JSを使わないので、スクロールしても引っかからない */
.lane__walker{
display:block; position:sticky; top:38vh;
width:150px; margin:560px 55px 0 auto;
animation:lane-walk 3.4s ease-in-out infinite;
}
.lane__walker img{display:block; width:100%; height:auto;}
/* 歩幅のかわりに、上下へゆっくり弾ませる */
@keyframes lane-walk{
0%,100%{transform:translateY(0) rotate(0);}
50% {transform:translateY(-6px) rotate(-1.2deg);}
}
}
@media (prefers-reduced-motion:reduce){
.lane__walker{animation:none;}
}
/* ============================================================
主要ページのご案内（トップ／フッターの直前）
09-06 支給デザイン。見出しを置かず、水色の地にクリーム色の
カードを2×2で並べるだけの構成
============================================================ */
/* ⚠️ 09-09、カードに触れると下から顔を出すパンダ2体を一旦外した。
あわせて、パンダの居場所のために持っていた指定も落としてある。
・--pagenav-pb（下だけ余白を広げる）／--pagenav-out-r（並びの外への張り出し量）
・overflow:hidden（はみ出しの保険）
・max-width:1100px のブロック（左右に120pxの逃げを作って版面を詰めるもの）
戻すときはコミット 07715dc から。front-page.php と site.js も同時に戻すこと */
.pagenav{
/* このセクションだけで使う2色。支給デザインから採った値で、
:root のブランドカラーとは別物なのでここに閉じて持つ */
--pagenav-bg: #9CC8D6;
--pagenav-card: #FEF6D0;
display:block;
padding:63px 24px;
/* 地は支給のイラスト1枚（1366×512）。09-09、ベタの水色から差し替えた。
⚠️ 寄せは center bottom。この帯は幅に対してかなり平たいので cover が縦を大きく切る。
下端を基準にしておけば、削られるのは絵の上半分（ほぼ空）だけで、
木・丘・街並みは残る。
画像が届く前・cover で埋まらない一瞬のために、空の中間色を地に敷く */
background:var(--pagenav-bg) url("assets/img/pagenav-bg.jpg") no-repeat center bottom / cover;
}
/* 幅は支給デザインの比率（版面1368 : カード665×236 : 間隔38）をそのまま縮めた値 */
.pagenav__inner{position:relative; max-width:860px; margin:0 auto;}
.pagenav__list{
display:grid; grid-template-columns:repeat(2, 1fr); gap:24px;
margin:0; padding:0; list-style:none;
}
/* 高さを4枚でそろえるため、li もカードも伸ばす（.entryhero__item と同じ作り）*/
.pagenav__item{display:flex;}
/* カードごと1つのリンク。白いカードに「アイコン＋英字＋ページ名＋説明」を横に並べ、
右端に丸い矢印を置く（09-09 支給ラフ）*/
.pgcard{
position:relative; flex:1;
display:flex; align-items:center; gap:clamp(14px,1.6vw,24px);
padding:24px clamp(56px,5vw,68px) 24px clamp(18px,2vw,26px);
background:var(--white); border-radius:16px;
box-shadow:0 6px 18px rgba(20,60,80,.13);
color:var(--ink); text-decoration:none; text-align:left;
transition:transform .15s ease, box-shadow .15s ease;
}
.pgcard:hover,
.pgcard:focus-visible{transform:translateY(-3px); box-shadow:0 12px 26px rgba(20,60,80,.18);}
/* アイコン。下に淡い丸をぼかして敷き、絵をその上に置く */
.pgcard__ico{
position:relative; flex:none;
display:flex; align-items:center; justify-content:center;
width:clamp(78px,7.4vw,100px); aspect-ratio:1;
}
.pgcard__ico::before{
content:""; position:absolute; inset:6%;
border-radius:48% 52% 44% 56% / 52% 44% 56% 48%;
background:var(--pgcard-blob);
}
.pgcard__ico img{position:relative; display:block; width:82%; height:auto;}
/* 絵の色みに合わせて、下に敷く丸の色をカードごとに変える */
.pgcard--company{--pgcard-blob:#E4F1FA;}
/* 企業様の絵（ecard-biz.png）は丸い青地まで描き込まれているので、下の丸は敷かずに絵を大きく出す */
.pgcard--corporate .pgcard__ico::before{display:none;}
.pgcard--corporate .pgcard__ico img{width:88%;} /* ほかのカードの丸（inset:6%）と同じ大きさ */
.pgcard--guide{--pgcard-blob:#E8F4E4;}
.pgcard--info{--pgcard-blob:#E4F1FA;}
.pgcard__body{display:block; min-width:0;}
.pgcard__en{
display:block;
font-size:13px; font-weight:600; line-height:1.4; letter-spacing:.16em;
color:var(--blue-deep);
}
.pgcard__ttl{
display:block; margin-top:2px;
font-family:"Zen Kaku Gothic New","Noto Sans JP","Hiragino Sans",sans-serif;
font-size:clamp(20px,1.9vw,25px); font-weight:700; line-height:1.3; letter-spacing:.04em;
}
/* 説明。改行位置は支給デザインどおり固定したいので、行ごとに block にする */
.pgcard__txt{display:block; margin-top:8px; font-size:13.5px; line-height:1.75; color:var(--ink2);}
.pgcard__txt span{display:block;}
/* 右端の丸い矢印 */
.pgcard__arw{
position:absolute; right:clamp(16px,1.6vw,22px); top:50%; transform:translateY(-50%);
display:flex; align-items:center; justify-content:center;
width:34px; height:34px; border-radius:50%;
background:#E4F1FA; color:var(--blue-deep);
transition:transform .15s ease;
}
.pgcard__arw svg{width:15px; height:15px;}
.pgcard:hover .pgcard__arw{transform:translateY(-50%) translateX(3px);}
@media (prefers-reduced-motion:reduce){
.pgcard,.pgcard__arw{transition:none;}
.pgcard:hover,
.pgcard:focus-visible{transform:none;}
.pgcard:hover .pgcard__arw{transform:translateY(-50%);}
}
@media (max-width:900px){
.pagenav{padding:48px 24px;}
.pagenav__list{gap:16px;}
.pgcard{padding:18px 50px 18px 16px; gap:14px;}
.pgcard__ico{width:70px;}
.pgcard__en{font-size:12px;}
.pgcard__ttl{font-size:19px;}
/* 09-24、小さすぎたので本文の下限（13.5px）に合わせる（もとは12.5px） */
.pgcard__txt{font-size:13.5px;}
}
@media (max-width:700px){
/* 1列に落とす。横長のままだと間延びするので、高さは中身に任せる */
.pagenav{padding:40px 20px;}
.pagenav__list{grid-template-columns:1fr; gap:14px;}
.pgcard{padding:16px 46px 16px 14px;}
.pgcard__ico{width:62px;}
.pgcard__ttl{font-size:18px;}
}
/* ============================================================
日本語の見出しの字間（09-23 指定）
⚠️ 英字のサブ表記（.cttl-en / .phead__en / .ttl-en など）と番号は対象外。
ここはファイル末尾に置いて、各セクションの指定より後に効かせている
============================================================ */
.about__ttl,
.abouthiro__ttl,
.aboutus__ttl-ja,
.area__ttl,
.care__ttl,
.carecard__ttl,
.cf-alert__ttl,
.cf-confirm__ttl,
.cf-done__ttl,
.cfeat__ttl,
.cflow__ttl,
.cmedia__ttl,
.cnext__ttl,
.cttl,
.dcase__ttl,
.dxitem__ttl,
.ecard__ttl,
.entry__ttl,
.entryhero__ttl,
.feat__ttl,
.feature__ttl,
.flow__ttl,
.fnav__ttl,
.fsns__ttl,
.ftcta__ttl,
.gbnr__ttl,
.gcard__ttl,
.hmenu__ttl,
.homefaq__ttl,
.homevoice__ttl,
.ivw__msgttl,
.ivw__q,
.job__ttl,
.jobcat__head,
.mcal__ttl,
.mission__ttl,
.mpt__ttl,
.newslist__ttl,
.notebox__ttl,
.oni__ttl,
.pgcard__ttl,
.phead__ttl,
.post__ttl,
.ptlead__ttl,
.reason__ttl,
.renv__ttl,
.rjob__ttl,
.rpanel__ttl,
.rpsn__ttl,
.rwork__ttl,
.sec__ttl,
.sub__ttl,
.types__ttl,
.voice__ttl,
.voicehead__ttl,
.wcard__ttl,
.wguide__ttl{letter-spacing:.02em;}
/* 字間ぶんの右ずれを直していた指定も、字間が小さくなったので外す */
.cttl,
.phead__ttl{text-indent:0;}
/* 小さい端末では吹き出しの文字を大きく（09-23 指定）。
⚠️ 円は .fvbub__item の transform:scale(.8) で縮めているので、見た目はこの8割 */
@media (max-width:380px){
.fvbub__item{font-size:18px;}
}
/* ============================================================
スマホでのセクション見出しの行間（09-24 指定）
⚠️ ファイル末尾に置いて、各セクションの指定より後に効かせている
============================================================ */
/* 節の大見出し（.sec__ttl）は1行で収まる前提で行間1に詰めてあるが、
狭い画面では2行以上に折り返すため、行が詰まって読みにくい。
スマホのときだけ行間を開ける。1行で収まる見出しの見え方は変わらない */
@media (max-width:900px){
.sec__ttl{line-height:1.4;}
}
/* ============================================================
スマホの共通調整（09-24）
============================================================ */
@media (max-width:600px){
/* 左右の余白を20pxにそろえる。24pxのままだった4つの節を詰める
（ヒロスタッフとは・入口カード・利用者の声・よくあるご質問・ページ案内は元から20px） */
.mission,
.area,
.care,
.dxsys{padding-left:20px; padding-right:20px;}
/* 節の余白が24→20pxになったぶん、見出しの負のマージンも詰める（左右15pxの余白を保つ） */
.care__head{margin-left:-5px; margin-right:-5px;}
/* エリアの見出しは、虫めがねのぶん幅が足りず「エリア」だけ次の行に落ちていた。
アイコンを少し小さくし、間隔を詰めて1行に収める */
.area__ttl{gap:10px; font-size:22px;}
.area__ttlico{width:26px;}
/* 本文中の小さなリンク（「くわしくはこちら」など）は、押せる高さを確保する */
.ptlead__note a{display:inline-block; padding:8px 0;}
/* フッターのリンクも、行と行の間隔だけ広げて押し分けやすくする */
.fnav__list a{display:inline-block; padding:7px 0;}
}
/* ============================================================
スマホだけ、FEATURESの節を横切って飛ぶパンダ（09-22 指定）
============================================================ */
/* PCの道（.lane）は1280px以上でしか出ないので、スマホではこのパンダで動きを補う。
左上から右下へ、スクロールに合わせて進む。位置（--mp-x／--mp-y）は site.js が入れる。
⚠️ 絵は左を向いているので、進む向き（右）に合わせて scaleX(-1) で反転している */
.mpanda{display:none;}
@media (max-width:900px){
/* ⚠️ overflow は x だけ切る。y を切ると、節の上の余白（カードとの間）を飛ぶパンダが消える */
.mission{position:relative; overflow-x:clip;}
.mpanda{
display:block; position:absolute; left:0; top:0; z-index:0;
width:clamp(70px,20vw,110px);
transform:translate3d(var(--mp-x,0), var(--mp-y,0), 0) rotate(var(--mp-r,0deg)) scaleX(-1);
will-change:transform; pointer-events:none;
}
.mpanda img{display:block; width:100%; height:auto;}
/* 本文より後ろに置く（文字にかぶっても読めるように） */
.mission__inner{position:relative; z-index:1;}
}
/* 動きを減らす設定のときは出さない */
@media (prefers-reduced-motion:reduce){
.mpanda{display:none;}
}
/* ============================================================
スマホのセクション見出し（09-22 指定）
============================================================ */
/* 主要な見出しは24pxにそろえる（PCは .sec__ttl 30px／.cttl 26〜30px／.homefaq__ttl 30px）。
⚠️ ファイルの末尾に置いている。前のメディアクエリより後ろに書かないと、
600px以下の個別指定（例：.homefaq__ttl 28px）に負ける。
会社概要の三開眼（.coni .cttl）は社名が長く1行に収まらないので、この指定から外している */
@media (max-width:600px){
.sec__ttl,
.cttl:not(.coni .cttl),
.homefaq__ttl{font-size:24px;}
}
/* ============================================================
スマホだけ短い見出し・短い文言に差し替える（09-24）
============================================================ */
/* 出し分けは template-parts/phead.php の ttl_sp と、本文中の .u-pc／.u-sp */
@media (max-width:900px){
.phead__ttl-pc,
.u-pc{display:none;}
.phead__ttl-sp,
.u-sp{display:inline;}
/* 10-05、短い見出しは文字で置かず data-sp から出す（template-parts/phead.php） */
.phead__ttl[data-sp]::after{content:attr(data-sp);}
}
/* 送りボタンはPCでは出さない（一覧は2列のグリッドのまま）。
⚠️ ファイルの後ろにあるので、900px以下の指定に勝たないよう min-width で囲っている */
@media (min-width:901px){
.dxsys__nav{display:none;}
}
/* ============================================================
図解のタップ拡大（09-24・スマホのみ）
============================================================ */
/* 対象は「しくみの図」（.csvc__fig／.dptph）。画面幅では字が小さいので、
タップで全画面に開き、もう一度タップで2倍に拡大して指で動かせるようにする。
開閉と組み立ては assets/js/site.js */
.is-zoomable{cursor:zoom-in;}
.zoomview{
position:fixed; inset:0; z-index:100;
display:flex; flex-direction:column;
background:rgba(31,27,22,.92);
opacity:0; visibility:hidden; transition:opacity .2s ease, visibility .2s;
}
.zoomview.is-open{opacity:1; visibility:visible;}
.zoomview__bar{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 14px;}
.zoomview__hint{margin:0; color:#fff; font-size:12.5px; opacity:.85;}
.zoomview__close{
flex:none; display:grid; place-items:center;
width:44px; height:44px; padding:0; border:0; border-radius:50%;
background:rgba(255,255,255,.16); color:#fff; font-size:20px; line-height:1; cursor:pointer;
}
/* 図の置き場。拡大したときだけスクロールできる */
.zoomview__box{
flex:1; display:flex; align-items:center; justify-content:center;
overflow:auto; padding:0 10px 16px;
-webkit-overflow-scrolling:touch;
}
.zoomview__box img{display:block; width:100%; height:auto; max-height:100%; object-fit:contain; cursor:zoom-in;}
/* 2倍表示。はみ出したぶんは指で動かす */
.zoomview.is-zoom .zoomview__box{align-items:flex-start; justify-content:flex-start;}
.zoomview.is-zoom .zoomview__box img{width:220%; max-width:none; max-height:none; cursor:zoom-out;}
@media (prefers-reduced-motion:reduce){
.zoomview{transition:none;}
}
/* ============================================================
スマホの押しやすさ・文字サイズの調整（09-24・全ページ）
============================================================ */
@media (max-width:900px){
/* --- 指で押す部分は高さを確保する（文字の見た目は変えない） --- */
/* フッター最下段の規約リンク（個人情報の取扱い／保護方針／各種窓口／マージン率） */
.fpolicy a{display:inline-block; padding:8px 0;}
.fpolicy li{padding-block:0;}
/* パンくずの「TOP」など */
.crumb__list a{display:inline-block; padding:6px 0;}
/* 本文の中に出てくるリンク（個人情報の取り扱い、規約ページの参照 など） */
.stepflow__after-link a,
.wcard__notes a,
.cf-check a,
.lgl a,
.sec__inner p a,
td a{display:inline-block; padding:6px 0;}
/* 電話番号のリンクは押し間違えると困るので、まとめて44px以上に */
.wguide__cta,
.cf-tel__num a,
.ftcta__num{min-height:44px; display:inline-flex; align-items:center;}
/* ⚠️ 電話の行（.wguide__item--tel）は別の指定で高さを持っているので、こちらも上げる */
.wguide__item--tel .wguide__cta{min-height:44px;}
/* ⚠️ お問い合わせの電話番号は .sec__inner p a の中にあり、そちらの display:inline-block
（詳細度 0,1,2）が上の inline-flex（0,1,1）に勝ってしまう。その結果、受話器の絵と
番号が上下2行に割れていた。詳細度を合わせて1行に戻す（09-24）。
番号そのものも途中で折り返さないよう nowrap にしておく */
.sec__inner p.cf-tel__num a{display:inline-flex; padding:0; white-space:nowrap;}
/* --- 小さすぎた文字を上げる --- */
/* 企業様向けの「POINT」バッジ */
.cfeat__badgeen{font-size:11px;}
/* お知らせ一覧のカテゴリ札 */
.newslist__cat{font-size:12.5px;}
/* 選択肢の下の補足（お問い合わせフォーム） */
.cf-radio__note{font-size:12.5px;}
/* 空き状況カレンダーの○／満 */
.mcal__mark{font-size:12.5px;}
/* 各種窓口の「※土・日は休業日…」などの注記（span で一段小さくしている） */
.wguide__note,
.wguide__note span,
/* 電話の行はこちらの指定（.wguide__item--tel …）が勝つので、同じ詳細度で上書きする */
.wguide__item--tel .wguide__note span{font-size:12.5px;}
/* 空き状況カレンダーの凡例（○ 受付可／満 受付終了） */
.mcal__legend b,
.mcal__legend span{font-size:12.5px;}
}
/* ============================================================
採用情報ページ・スマホの飾りの調整（09-24）
============================================================ */
@media (max-width:900px){
/* 吹き出し「面接官はぼくじゃないよ！」が絵に重なっていたので、絵の上へ出す。
尾も下向きに付け替える（会社概要の代表挨拶と同じ直し方） */
.rintro__msg .cmsg__fig .cmsg__bubble{
top:auto; bottom:calc(100% + 6px); left:0; transform:none;
padding:6px 10px; font-size:11px; border-radius:14px;
}
.rintro__msg .cmsg__fig .cmsg__bubble::before,
.rintro__msg .cmsg__fig .cmsg__bubble::after{right:auto; left:22px;}
/* 仕事紹介スライダーの送りボタンが写真に食い込んでいたので、下の点の左右へ移す */
.rwork__slider{padding-bottom:6px;}
.rwork__nav{top:auto; bottom:0; transform:none;}
.rwork__nav:hover{transform:scale(1.06);}
.rwork__nav--prev{left:calc(50% - 86px); right:auto;}
.rwork__nav--next{right:calc(50% - 86px); left:auto;}
/* 点の行はボタンと同じ高さに置く */
.rwork__dots{min-height:36px; align-items:center;}
}
/* ============================================================
仕事紹介：スマホはカードの高さをそろえる（09-24）
============================================================ */
/* 横スライドはPC・スマホとも同じ。スマホだけ、1枚が縦に長くなりすぎないよう
一定の高さで切り、下端をぼかして「もっと見る」で開く（.is-open は site.js） */
.rwork__toggle{display:none;}
@media (max-width:900px){
.rwork__item{
max-height:var(--rwork-h, 540px);
overflow:hidden;
padding-bottom:70px; /* ボタンの居場所 */
}
.rwork__item.is-open{max-height:none;}
/* 切れているとわかるよう、パネルの下辺から白くぼかす（開いているあいだは出さない）。
⚠️ 09-24、ボタンの上で切るのをやめ、下辺まで通してぼかす。
::after はカードの最後に描かれるので、ボタンは z-index で前に出すこと */
.rwork__item::after{
content:""; position:absolute; left:0; right:0; bottom:0; height:170px;
background:linear-gradient(to bottom, rgba(255,255,255,0), var(--white) 62%);
pointer-events:none;
}
.rwork__item.is-open::after{content:none;}
/* 開閉ボタンはカードの下端に固定して、5枚とも同じ位置に見せる */
.rwork__toggle{
display:flex; align-items:center; justify-content:center; gap:6px;
position:absolute; left:20px; right:20px; bottom:16px; z-index:1;
min-height:40px; padding:0 12px;
background:var(--white); border:1px solid var(--orange); border-radius:var(--r-full);
color:var(--orange-dark); font-size:13.5px; font-weight:700; cursor:pointer;
}
.rwork__toggle-ico{width:17px; height:17px; transition:transform .25s ease;}
.rwork__item.is-open .rwork__toggle-ico{transform:rotate(180deg);}
@media (prefers-reduced-motion:reduce){
.rwork__toggle-ico{transition:none;}
}
}
/* ============================================================
採用トップの社員インタビュー：スマホは横スライド（09-24）
============================================================ */
/* 一覧ページ（archive-voice.php）は縦積みのまま。採用トップの .vcards--slide だけ横に流す。
作りは「4つの体制」（.care__list）と同じ：画面端まで広げ、1枚ずつ止める */
@media (max-width:900px){
.vcards--slide{
display:flex; gap:var(--s2); grid-template-columns:none;
overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
scrollbar-width:none;
margin-inline:calc(50% - 50vw);
padding:0 20px 4px;
scroll-padding-left:20px; scroll-padding-right:20px;
}
.vcards--slide::-webkit-scrollbar{display:none;}
.vcards--slide .vcard{
flex:none; width:min(300px, calc(100vw - 72px));
scroll-snap-align:start;
}
}
/* ============================================================
4ステップのキャッチ：450px以下（09-24 指定）
============================================================ */
@media (max-width:450px){
.stepflow__catch{
width:min(98vw, 340px);
top:calc(var(--flow-scene-h) * -0.58 + 2vw);
}
}
/* ============================================================
4ステップの帯を横切るパンダ（09-24・スマホのみ）
============================================================ */
/* FEATURESの節（.mpanda）と対に、こちらは右上→左下へ飛ぶ。
絵は左を向いているので、進む向き（左）と同じ。反転は要らない。
位置（--bp-x／--bp-y）は site.js が入れる */
.bandpanda{display:none;}
@media (max-width:900px){
.bandpanda{
display:block; position:absolute; left:0; top:0; z-index:3;
width:clamp(64px,18vw,100px);
transform:translate3d(var(--bp-x,0), var(--bp-y,0), 0) rotate(var(--bp-r,0deg));
will-change:transform; pointer-events:none;
}
.bandpanda img{display:block; width:100%; height:auto;}
}
@media (prefers-reduced-motion:reduce){
.bandpanda{display:none;}
}
/* ============================================================
出現のフェード（2026-09-24）
============================================================ */
/* セクションを単位に、画面へ入ったところでその場で淡く出す。
中の見出し・カード・ボタンを1つずつ出し分けはしない（読んでいる最中に
ものが動くとかえって落ち着かないため、区切りごとにひと呼吸だけ置く）。
相手を選ぶのは site.js（テンプレートには何も書かない）。
JSが data-rv を付け、画面に入ったら .is-rv を足す。
⚠️ 動かすのは濃さだけ。transform は使わないこと。
セクションに掛けると、中の position:sticky／fixed の基準がずれる。
⚠️ 読み込んだ時点でもう見えているセクションには付かない（頭のちらつきを避ける）。
いちばん上のヒーローだけは、下のCSSで読み込み直後に出している。 */
[data-rv]{opacity:0; transition:opacity .8s ease;}
[data-rv].is-rv{opacity:1;}
/* ヒーロー（読み込み直後・JSは使わない）。
⚠️ トップは .fv ではなく包みの .fvwrap に掛ける。検索の窓（.fvsearch）は
FVの外に出しているので、.fv だけだと窓が置いていかれる */
@keyframes hiro-enter-fade{
from{opacity:0;}
to {opacity:1;}
}
.fvwrap,
.phead{animation:hiro-enter-fade .9s ease both;}
/* 動きを減らす設定では、出したままにする */
@media (prefers-reduced-motion:reduce){
[data-rv]{opacity:1; transition:none;}
.fvwrap,.phead{animation:none;}
}
/* 印刷でも消えないように */
@media print{
[data-rv]{opacity:1;}
}
/* ============================================================
本文の蛍光ペン（2026-09-24）
============================================================ */
/* 長い段落の「ここだけ読めば伝わる」一節に引く。囲みや見出しは足さず、
線を1本引くだけに留めている（読む順番を変えずに、目だけ留めてもらう作り）。
使い方：本文の中で強調したい一節を で囲む。
⚠️ 文言は esc_html() でエスケープしているところが多い。タグを通すには
hiro_mk()（functions.php）を通すこと。素の echo には戻さない。
色はページの立場で変わる（--mk）。求職者向けは黄色、企業様向け（body.is-biz）は
ブルー。地色になじませるためで、意味の違いではない。
⚠️ 引くのは文字の下3分の1だけ。ベタ塗りにすると本文の地が二色になって、
かえって読みづらくなる。線の濃さも、下の文字が透けて見える濃さに留めること */
:root{--mk:#FFEB6B;}
/* 企業様向け（/client/・/service/）。地のブルーになじむ水色 */
.is-biz{--mk:#B5E2FA;}
mark{
/* ブラウザ既定の黄色いベタ塗りを消してから引き直す */
background:none;
background-image:linear-gradient(180deg,
transparent 0 64%, var(--mk) 64% 96%, transparent 96%);
/* 地の色が変わるだけで、文字の色は本文のまま */
color:inherit;
padding:0 .1em;
font-weight:600;
/* 折り返した2行目以降にも同じ線を引く */
-webkit-box-decoration-break:clone;
box-decoration-break:clone;
}
/* 印刷では色が飛ぶので、下線に置き換える */
@media print{
mark{
background-image:none;
border-bottom:1.5px solid #888;
}
}
/* ============================================================
ページが見つからないとき（404.php）（2026-10-01）
============================================================ */
/* 「404」の 0 を、虫めがねで探しているパンダに置き換えた絵を真ん中に置き、
その下に案内文と戻り先のボタンを中央そろえで積む。
下に続くフッター前CTA（.ftcta）と主要ページの案内（.pagenav）は共通の部品 */
.nf{padding:var(--s5) 24px var(--s6); background:var(--bg);}
.nf__inner{max-width:760px; margin:0 auto; text-align:center;}
/* 数字とパンダ。大きさは font-size 1つで持ち、パンダの幅も em で追従させる
（数字とパンダの比率を、画面の幅が変わっても崩さないため） */
.nf__num{
position:relative;
display:flex; align-items:flex-end; justify-content:center;
margin:0 auto var(--s4);
font-family:"Zen Maru Gothic","Zen Kaku Gothic New",sans-serif;
font-weight:900; line-height:1;
font-size:clamp(118px,25vw,220px);
}
/* うしろに敷く淡い丸。形はページ案内カードのアイコン（.pgcard__ico::before）と同じ崩し方 */
.nf__num::before{
content:""; position:absolute; left:50%; bottom:-.04em; transform:translateX(-50%);
width:2.5em; height:1.05em;
border-radius:48% 52% 44% 56% / 52% 44% 56% 48%;
background:var(--orange-pale);
}
.nf__d,
.nf__panda{position:relative;}
/* 色は英字見出し（.ttl-en）の1・2色目。外へ少し傾けて、パンダを挟む形にする */
.nf__d{display:block; padding-bottom:.06em;}
.nf__d--l{color:var(--orange); transform:rotate(-7deg);}
.nf__d--r{color:var(--blue); transform:rotate(7deg);}
/* パンダは数字より頭ひとつ高くする（絵は 390×512） */
.nf__panda{
flex:none; width:.86em; margin:0 -.06em;
transform-origin:50% 100%;
animation:nf-sway 3.6s ease-in-out infinite alternate;
}
.nf__panda img{display:block; width:100%; height:auto;}
/* あたりを見回すように、足もとを支点に小さく揺らす */
@keyframes nf-sway{
from{transform:rotate(-3deg);}
to {transform:rotate(3deg);}
}
.nf__ttl{
margin:0 0 var(--s3);
font-size:clamp(22px,3.6vw,28px); font-weight:600; line-height:1.5; letter-spacing:.08em;
}
/* 折り返すのは文節の切れ目でだけ */
.nf__ttl span{display:inline-block;}
.nf__txt{
margin:0;
font-size:var(--lead-size); line-height:var(--lead-lh); color:var(--ink2);
}
.nf__btns{
display:flex; flex-wrap:wrap; gap:var(--s2) var(--s3); justify-content:center;
margin-top:var(--s4);
}
@media (max-width:640px){
.nf{padding:var(--s4) 20px var(--s5);}
.nf__num{margin-bottom:var(--s3);}
/* 1行に収まらない幅では、文中の改行を外して流し込む */
.nf__txt{font-size:15px; line-height:2; text-align:left;}
.nf__txt br{display:none;}
/* ボタンは縦に積んで、幅をそろえる */
.nf__btns{flex-direction:column; align-items:center;}
.nf__btns .btn{justify-content:center; width:min(100%,320px);}
}
@media (prefers-reduced-motion:reduce){
.nf__panda{animation:none;}
}