/* =========================================================
   SOMES RECRUIT 2026 - draft stylesheet
   ※ 叩き台。写真はすべてプレースホルダー。
   ========================================================= */
:root {
  --green: #1f3b2c;
  --green-soft: #3a5c47;
  --cream: #f4f1ea;
  --cream-deep: #ece7dc;
  --bg: #ffffff;
  --ink: #2b2b2b;
  --muted: #7a7568;
  --line: #d8d2c6;
  --maxw: 1100px;
  /* サイト全体を Noto Sans JP（ゴシック）に統一。見出しも同フォント（ウェイトで差をつける） */
  --sans: "Noto Sans JP", "游ゴシック Medium", "Yu Gothic Medium", sans-serif;
  --serif: var(--sans); /* 旧・見出し用。ゴシックに統一（変数名は互換のため残置） */
}

/* テーマと同じ基準（1rem = 10px）。テーマは既に html{font-size:62.5%} のため本番でも整合。 */
html { scroll-behavior: smooth; font-size: 62.5%; }

/* box-sizing と基本体裁はこのページのスコープ内だけに限定（共通ヘッダー/フッターに影響させない） */
.somes-recruit, .somes-recruit *, .somes-recruit *::before, .somes-recruit *::after,
.page-nav, .page-nav *, .page-nav *::before, .page-nav *::after { box-sizing: border-box; }

.somes-recruit {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1.7rem;            /* = 16px（テーマ body と同じ） */
  color: var(--ink);
  line-height: 1.9;
  letter-spacing: .04em;
  -webkit-font-smoothing: antialiased;
}
.somes-recruit img { max-width: 100%; display: block; }
.somes-recruit a { color: inherit; text-decoration: none; }

.wrap { width: 90%; max-width: var(--maxw); margin-inline: auto; }
.narrow { max-width: 820px; }

/* ---------- placeholder photo ---------- */
.ph {
  position: relative;
  background:
    repeating-linear-gradient(45deg, #ded8cc 0 12px, #d5cec1 12px 24px);
  color: #9a9384;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--sans);
  font-size: 1.152rem; letter-spacing: .2em;
  overflow: hidden;
}
.ph::after { content: "PHOTO"; }
.ph[data-label]::after { content: attr(data-label); }
.ph.r43  { aspect-ratio: 4/3; }
.ph.r11  { aspect-ratio: 1/1; }
.ph.r169 { aspect-ratio: 16/9; }
.ph.r32  { aspect-ratio: 3/2; }
.ph.r34  { aspect-ratio: 3/4; }   /* 地図（縦長） */

/* コンテキスト別の実測比率（PDFレンダリングから採寸） */
.photo-grid .ph { aspect-ratio: 5/3; }   /* ものづくり写真グリッド */
.role .ph       { aspect-ratio: 1.95; }  /* 職種カード写真 */
.interview .ph  { aspect-ratio: 8/5; }   /* インタビュー写真 */
/* 「人を知る」の下：ソメスのひとのこと（ブログのカテゴリ）の記事一覧へ */
.people-more { margin: 4.8rem 0 0; text-align: right; }

/* 「人を知る」をブログ記事から表示した時：アイキャッチ画像を枠いっぱいに */
.ph.has-img::after { content: none; }
.ph.has-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
a.ph { display: flex; color: inherit; }

/* ---------- headings ---------- */
.jp-head {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .06em;
  color: var(--green);
}
.sec-label {
  font-family: var(--serif);
  color: var(--green);
  font-size: 1.28rem;
  letter-spacing: .35em;
  display: inline-flex; align-items: center; gap: 1em;
  margin-bottom: 4rem;
}
.sec-label::before, .sec-label::after {
  content: ""; width: 40px; height: 1px; background: var(--green);
}

/* =========================================================
   WordPress 共通ヘッダー/フッター 読込エリア（叩き台の仮表示のみ）
   ※ 本番では get_header() / get_footer() が入るため、この .wp-slot は出力されない
   ========================================================= */
.wp-slot {
  background: #fafafa; border: 1px dashed #c9c3b6; color: #a59e8d;
  text-align: center; font-size: 1.152rem; letter-spacing: .2em;
  padding: 1.92rem; font-family: var(--sans);
}
.wp-slot.header { position: sticky; top: 0; z-index: 90; }

/* =========================================================
   ページ専用ナビ（画面右側に固定・緑ボタンでアコーディオン）
   ========================================================= */
.page-nav {
  position: fixed; right: 0; top: 96px; z-index: 80;
  width: 200px; text-align: left;
}
.page-nav__btn {
  width: 100%; background: var(--green); color: #fff; border: none;
  font-family: var(--serif); letter-spacing: .3em; font-size: 1.248rem;
  padding: 1.44rem 1.92rem; cursor: pointer; text-align: left;
  display: flex; justify-content: space-between; align-items: center;
}
.page-nav__btn .mark { font-weight: 300; transition: transform .25s; }
.page-nav.open .page-nav__btn .mark { transform: rotate(45deg); }
.page-nav__list {
  list-style: none; margin: 0; padding: 0;
  background: rgba(255,255,255,.96); border: 1px solid var(--line); border-top: none;
  max-height: 0; overflow: hidden; transition: max-height .3s ease;
}
.page-nav.open .page-nav__list { max-height: 420px; }
.page-nav__list li { border-bottom: 1px solid var(--line); }
.page-nav__list li:last-child { border-bottom: none; }
.page-nav__list a {
  display: block; padding: 1.12rem 1.92rem; font-size: 1.248rem; letter-spacing: .12em;
  color: var(--ink);
}
.page-nav__list a::before { content: "・"; color: var(--green); }
.page-nav__list a:hover { background: var(--cream); color: var(--green); }

/* =========================================================
   Hero
   ========================================================= */
.hero {
  min-height: 82vh; display: flex; flex-direction: column;
  justify-content: center; align-items: center; text-align: center;
  padding: 9.6rem 2.4rem 6.4rem;
  background: linear-gradient(180deg, #eef0ea 0%, #e5e3d8 100%);
  position: relative;
}
.hero h1 {
  font-family: var(--serif); font-weight: 500; color: var(--green);
  font-size: clamp(3.4rem, 5.5vw, 5.6rem);
  line-height: 1.8; letter-spacing: .1em; margin: 0;
}
.hero .lead {
  margin-top: 4rem; font-size: 1.75rem; color: var(--ink);
  line-height: 2.4;
}
.hero .lead .wb { display: inline-block; }   /* 意味のまとまりの途中で折り返さない */
.scroll-cue { position: absolute; bottom: 3.2rem; font-size: 1.04rem; letter-spacing: .3em; color: var(--muted); }

/* メイン画像あり：全幅の横長写真、見出しはその下（2026-10-29。ぼかし・重なりは「ダサい」ためやめた） */
.hero--visual {
  min-height: 0; justify-content: flex-start;
  padding: 0 2.4rem 8rem; background: #fff;
}
.hero__visual {
  position: relative; width: calc(100% + 4.8rem); margin: 0 -2.4rem;
  aspect-ratio: 2.15; max-height: 78vh; overflow: hidden; background: var(--cream-deep);
}
.hero__visual img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 72%; display: block; }
.hero--visual h1 { margin-top: clamp(4.8rem, 6vw, 7.2rem); }
@media (max-width: 767px) {
  .hero__visual { aspect-ratio: 4/3; max-height: none; }
  .hero__visual img { object-position: 58% 75%; }
  .hero--visual h1 { margin-top: 4rem; }
  .hero h1 { font-size: clamp(2.4rem, 7vw, 3.4rem); letter-spacing: .06em; }  /* 「人の暮らしに寄り添う、」を1行に */
  .hero--visual { padding-bottom: 6.4rem; }
}

/* =========================================================
   Section: about / story
   ========================================================= */
.section { padding: clamp(5.6rem, 7vw, 9rem) 0; }
.section.cream { background: var(--cream); }
.section.green { background: var(--green); color: #fff; }

.story-head { text-align: left; margin-bottom: 3.2rem; }
.story-head h2 { font-size: clamp(2.9rem, 4vw, 4.2rem); margin: 0; line-height: 1.65; }
/* 本文は段落（p）で管理。1行の長さを読みやすい幅に制限し、段落間を一定余白に */
.story-body { text-align: left; color: var(--ink); font-size: 1.8rem; line-height: 2.05; max-width: 62rem; }
.story-body p { margin: 0 0 1.5em; }
.story-body p:last-child { margin-bottom: 0; }

.photo-grid {
  margin-top: 4.8rem;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}

/* =========================================================
   Section: roles
   ========================================================= */
.role {
  display: grid; grid-template-columns: 1fr 340px; gap: 4.8rem;
  align-items: center; padding: 4.16rem 0; border-top: 1px solid var(--line);
}
.role:last-child { border-bottom: 1px solid var(--line); }
.role h3 { font-family: var(--serif); color: var(--green); font-size: 2.8rem; font-weight: 500; margin: 0 0 1.6rem; }
.role p { font-size: 1.7rem; color: var(--ink); margin: 0 0 2.56rem; }
.view-more { font-family: var(--serif); font-size: 1.152rem; letter-spacing: .25em; color: var(--green); display: inline-flex; align-items: center; gap: 1.28rem; }
.view-more::after { content: ""; width: 44px; height: 1px; background: var(--green); }

/* =========================================================
   Section: people (interviews)
   ========================================================= */
/* 写真と文章を左右交互に。写真は横幅の半分、文章は常に左寄せで写真の上下中央（2026-10-20 見やすさ改善） */
.people-grid { display: grid; gap: 7.2rem; margin-top: 1.6rem; }
.interview {
  display: grid; grid-template-columns: 1fr 1fr; gap: 5.6rem; align-items: center;
}
.interview:nth-child(even) .txt { order: -1; }
.interview .txt { text-align: left; }
.interview h4 { font-family: var(--serif); color: var(--green); font-weight: 500; font-size: 2.4rem; margin: 0 0 .8rem; line-height: 1.7; }
.interview .sub { font-family: var(--serif); color: var(--ink); font-size: 1.65rem; letter-spacing: .12em; margin: 0 0 2rem; }
.interview p { font-size: 1.7rem; margin: 0 0 2.4rem; color: var(--ink); line-height: 2; }
.interview .view-more { justify-content: flex-start; }

/* =========================================================
   Section: field / map
   ========================================================= */
.field-head { text-align: left; margin-bottom: 3.2rem; }
.field-head h2 { font-size: clamp(2.9rem, 4vw, 4.2rem); margin: 0 0 2rem; line-height: 1.65; }
.field-head p { font-size: 1.8rem; color: var(--ink); line-height: 2.05; margin: 0 0 1.5em; max-width: 62rem; }
.field-head p:last-child { margin-bottom: 0; }
.field-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 4.8rem; align-items: start; }

/* 店舗リスト＝アコーディオン（各行に + / 開くと − ） */
.store-list { border-top: 1px solid var(--line); }
.store-list details { border-bottom: 1px solid var(--line); }
.store-list summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.6rem 0.48rem; font-size: 1.8rem; letter-spacing: .08em; color: var(--ink);
}
.store-list summary::-webkit-details-marker { display: none; }
.store-list summary .sign { font-size: 1.8rem; font-weight: 300; color: var(--green); transition: transform .2s; }
.store-list details[open] summary .sign { transform: rotate(45deg); }
.store-list .body { padding: 0 0.48rem 1.6rem; font-size: 1.5rem; color: var(--muted); line-height: 2; }

/* =========================================================
   Section: benefits
   ========================================================= */
/* 本文＝左／見出し＝右（PDF配置） */
.benefits { display: grid; grid-template-columns: 1fr 1fr; gap: 4.8rem; align-items: center; }
.benefits .txt { order: 1; }
.benefits .txt p { font-size: 1.8rem; line-height: 2.05; margin: 0 0 1.5em; }
.benefits .txt p:last-child { margin-bottom: 0; }
.benefits h2 { order: 2; font-weight: 500; color: var(--green); font-size: clamp(2.9rem, 4vw, 4.2rem); line-height: 1.7; margin: 0; }

/* =========================================================
   Section: 募集要項 (accordion)
   ========================================================= */
/* 募集要項の見出し（左右に罫線を伴う中央配置） */
.req-head { text-align: center; margin-bottom: 1.6rem; }
.req-head h2 {
  display: inline-flex; align-items: center; gap: 3.2rem;
  font-family: var(--serif); font-weight: 500; color: var(--ink);
  font-size: 2.3rem; letter-spacing: .2em; margin: 0;
}
.req-head h2::before, .req-head h2::after {
  content: ""; width: 200px; max-width: 20vw; height: 1px; background: #999;
}
.recruit-intro { text-align: center; margin-bottom: 4.8rem; font-size: 1.55rem; color: var(--muted); }
.acc { border-top: 1px solid var(--line); }
.acc details { border-bottom: 1px solid var(--line); }
.acc summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  padding: 2.56rem 0.64rem; font-family: var(--serif); font-size: 2.2rem; color: var(--green);
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary .sign { font-size: 2.24rem; font-weight: 300; transition: transform .2s; }
.acc details[open] summary .sign { transform: rotate(45deg); }
.acc .body { padding: 0 0.64rem 4rem; }
.def { margin: 0 0 2.24rem; }
.def dt {
  display: inline-block; background: var(--cream-deep); color: var(--ink);
  font-size: 1.32rem; letter-spacing: .15em; padding: 0.56rem 1.92rem; margin-bottom: 1.12rem;
}
.def dd { margin: 0; font-size: 1.6rem; line-height: 2; }
.def dd ul { margin: 0; padding-left: 1.1em; }
.apply-btn {
  display: block; width: max-content; margin: 3.2rem auto 0;
  border: 1px solid var(--green); color: var(--green);
  font-family: var(--serif); letter-spacing: .2em; font-size: 1.312rem;
  padding: 1.6rem 4.16rem; background: transparent; cursor: pointer;
  transition: background .2s, color .2s;
}
.apply-btn:hover { background: var(--green); color: #fff; }

/* =========================================================
   ENTRY / お問い合わせフォーム（CF7 配置エリア）
   ========================================================= */
.entry-head { text-align: center; margin-bottom: 4.8rem; }
.entry-head h2 { font-size: clamp(2.6rem, 3.8vw, 3.8rem); margin: 0 0 1.6rem; }
.entry-head p { font-size: 1.6rem; color: var(--ink); }
.cf7-slot { max-width: 720px; margin: 0 auto; }
/* 応募フォームの準備ができるまでの電話の案内（2026-11-02） */
.entry-tel { max-width: 560px; margin: 0 auto; text-align: center; }
.entry-tel__note { font-size: 1.5rem; color: var(--muted); margin: 0 0 2.4rem; }
.entry-tel dl { margin: 0; display: grid; gap: 1.6rem; }
.entry-tel dl > div { border: 1px solid var(--line); padding: 2rem 2.4rem; background: #fff; }
.entry-tel dt { font-size: 1.5rem; color: var(--ink); margin: 0 0 .6rem; }
.entry-tel dd { margin: 0; font-family: var(--serif); font-size: 2rem; color: var(--green); letter-spacing: .06em; }
.entry-tel dd a { color: inherit; text-decoration: none; font-size: 2.4rem; margin-left: .4em; }

/* CF7 の標準マークアップに合わせた最低限のスタイル */
.cf7-slot p { margin: 0 0 2.08rem; }
.cf7-slot label { display: block; font-size: 1.312rem; letter-spacing: .1em; margin-bottom: 0.8rem; color: var(--ink); }
.cf7-slot input[type=text],
.cf7-slot input[type=email],
.cf7-slot input[type=tel],
.cf7-slot select,
.cf7-slot textarea {
  width: 100%; padding: 1.28rem 1.6rem; border: 1px solid var(--line);
  background: #fff; font-family: var(--sans); font-size: 1.44rem; color: var(--ink);
  border-radius: 0;
}
.cf7-slot textarea { min-height: 160px; resize: vertical; }
.cf7-slot .wpcf7-submit,
.cf7-slot button[type=submit] {
  display: block; margin: 2.4rem auto 0; cursor: pointer;
  border: 1px solid var(--green); color: #fff; background: var(--green);
  font-family: var(--serif); letter-spacing: .2em; font-size: 1.44rem;
  padding: 1.6rem 5.12rem; transition: opacity .2s;
}
.cf7-slot .wpcf7-submit:hover,
.cf7-slot button[type=submit]:hover { opacity: .85; }

/* リクルート応募フォーム（CF7）2026-11-02 */
.cf7-slot .form-note { font-size: 1.4rem; color: var(--muted); margin-bottom: 3.2rem; }
.cf7-slot .field label:first-child { font-family: var(--sans); font-size: 1.5rem; font-weight: 500; letter-spacing: .06em; }
.cf7-slot .field-note { font-size: 1.3rem; color: var(--muted); line-height: 1.9; margin: .8rem 0 0; }
.cf7-slot .wpcf7-form-control-wrap { display: block; }
.cf7-slot .wpcf7-radio, .cf7-slot .wpcf7-checkbox { display: flex; flex-wrap: wrap; gap: .8rem 2.4rem; }
.cf7-slot .wpcf7-list-item { margin: 0; }
.cf7-slot .wpcf7-list-item label { display: inline-flex; align-items: center; gap: .6rem; font-size: 1.5rem; letter-spacing: .04em; margin: 0; cursor: pointer; }
.cf7-slot input[type=number] { width: 12rem; padding: 1.28rem 1.6rem; border: 1px solid var(--line); background: #fff; font-size: 1.44rem; }
.cf7-slot input[type=radio], .cf7-slot input[type=checkbox] { width: 1.8rem; height: 1.8rem; accent-color: var(--green); margin: 0; }
.cf7-slot .privacy { background: var(--cream); padding: 2rem 2.4rem; }
.cf7-slot .privacy .wpcf7-list-item label { font-weight: 500; }
.cf7-slot .form-foot { text-align: center; margin-top: 3.2rem; }
.cf7-slot .wpcf7-not-valid-tip { font-size: 1.3rem; margin-top: .4rem; }
/* CF7 の自動整形（label の後ろの改行・段落）で間が空きすぎないように */
.cf7-slot .field { margin-bottom: 3.2rem; }
.cf7-slot .field > p { margin: 0; }
.cf7-slot .field > p:not(.field-note) > br { display: none; }
.cf7-slot .field label:first-child { margin-bottom: 1.2rem; }

/* 叩き台のダミーフォーム用 */
.cf7-slot .field { margin-bottom: 2.08rem; }
.cf7-slot .req { color: #b5462f; font-size: 1.152rem; margin-left: .4em; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 900px) {
  .page-nav { width: 150px; top: 72px; }
  .page-nav__btn { font-size: 1.088rem; letter-spacing: .2em; padding: 1.12rem 1.44rem; }
  .page-nav__list a { padding: 0.96rem 1.44rem; font-size: 1.152rem; }
  .photo-grid { grid-template-columns: repeat(2, 1fr); }
  .photo-grid .ph:nth-child(1),
  .photo-grid .ph:nth-child(6) { grid-column: span 2; grid-row: auto; }
  .role,
  .interview { grid-template-columns: 1fr; gap: 2.24rem; }
  .people-grid { gap: 4.8rem; }
  .interview:nth-child(even) .txt { order: 0; }
  .field-inner,
  .benefits { grid-template-columns: 1fr; }
  .benefits p { order: 2; }
  .benefits h2 { order: 1; }
  .req-head h2 { gap: 1.6rem; font-size: 1.8rem; }
}

/* =========================================================
   職種詳細ページ（page-recruit-job.php：職人／販売スタッフ／営業）
   2026-10-13 追加。トップと同じ色・文字組みで、セクションは白とクリームを交互に
   ========================================================= */
.job-hero {
  padding: clamp(6.4rem, 8vw, 10rem) 0 0;
  background: linear-gradient(180deg, #eef0ea 0%, #e5e3d8 100%);
}
.job-crumb { margin: 0 0 4rem; font-size: 1.3rem; letter-spacing: .12em; color: var(--muted); }
.job-crumb a { color: var(--green); text-decoration: underline; text-underline-offset: .3em; }
.job-crumb span { margin: 0 .6em; }
.job-label { margin: 0; font-size: 1.3rem; letter-spacing: .35em; color: var(--green-soft); }
.job-name {
  margin: .8rem 0 0;
  font-family: var(--serif); font-weight: 500; color: var(--green);
  font-size: clamp(3.4rem, 5vw, 5.2rem); letter-spacing: .12em; line-height: 1.4;
}
.job-catch {
  margin: 3.2rem 0 0;
  font-weight: 500; color: var(--green);
  font-size: clamp(2.2rem, 2.8vw, 3rem); line-height: 1.75; letter-spacing: .08em;
}
.job-lead { margin-top: 2.8rem; max-width: 62rem; font-size: 1.8rem; line-height: 2.05; }
.job-lead p { margin: 0 0 1em; }
.job-hero__ph { aspect-ratio: 21/9; margin-top: clamp(4.8rem, 6vw, 7.2rem); transform: translateY(clamp(3.2rem, 4vw, 5.6rem)); }
.job-hero + .section { padding-top: calc(clamp(5.6rem, 7vw, 9rem) + clamp(3.2rem, 4vw, 5.6rem)); }

/* 見出し（英字の小ラベル＋日本語） */
.job-head { margin-bottom: 3.2rem; }
.job-sec-en { margin: 0 0 .8rem; font-size: 1.2rem; letter-spacing: .35em; color: var(--green-soft); }
.job-head .jp-head { margin: 0; font-size: clamp(2.6rem, 3.4vw, 3.6rem); }

/* 仕事内容 */
.work-list { display: grid; gap: 4.8rem 4rem; margin-top: 4.8rem; }
.work-list--3col { grid-template-columns: repeat(3, 1fr); }
.work-list--2col { grid-template-columns: repeat(2, 1fr); gap: 5.6rem 5.6rem; }   /* 4項目は 2×2 */
.work-item .ph { aspect-ratio: 3/2; }
.work-no { margin: 2rem 0 0; font-size: 1.3rem; letter-spacing: .2em; color: var(--green-soft); }
.work-item h3 { margin: .4rem 0 1.2rem; font-size: 2.2rem; font-weight: 500; color: var(--green); letter-spacing: .06em; }
.work-item p { margin: 0; font-size: 1.7rem; line-height: 2; }

/* 1日の流れ */
.timeline { list-style: none; margin: 1.6rem 0 0; padding: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 7.2rem; top: 1.2rem; bottom: 1.2rem; width: 1px; background: var(--line); }
.timeline li { display: grid; grid-template-columns: 7.2rem 1fr; gap: 0 4rem; padding: 1.6rem 0; position: relative; }
.timeline li::before {
  content: ""; position: absolute; left: calc(7.2rem - 5px); top: 2.7rem;
  width: 11px; height: 11px; border-radius: 50%; background: var(--green);
}
.timeline__time { font-size: 1.8rem; font-weight: 500; color: var(--green); letter-spacing: .06em; line-height: 1.9; }
.timeline__body h3 { margin: 0; font-size: 1.9rem; font-weight: 500; letter-spacing: .06em; line-height: 1.9; }
.timeline__body p { margin: .4rem 0 0; font-size: 1.6rem; line-height: 1.9; color: var(--ink); }
.timeline__note { margin: 2.4rem 0 0; font-size: 1.4rem; color: var(--muted); }
.day-intro { margin-bottom: 3.2rem; }

/* この仕事の魅力 */
.appeal-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4rem; margin-top: 1.6rem; }
.appeal-list--2col { grid-template-columns: repeat(2, 1fr); gap: 4.8rem 5.6rem; }   /* 4項目は 2×2 */
.appeal { border-top: 1px solid var(--green); padding-top: 2.4rem; }
.appeal__no { margin: 0; font-size: 3.6rem; font-weight: 300; color: var(--green); letter-spacing: .06em; line-height: 1; }
.appeal h3 { margin: 2rem 0 1.2rem; font-size: 2.1rem; font-weight: 500; line-height: 1.6; letter-spacing: .06em; color: var(--green); }
.appeal p { margin: 0; font-size: 1.7rem; line-height: 2; }

/* 先輩の声 */
.voice { display: grid; grid-template-columns: 36rem 1fr; gap: 5.6rem; align-items: center; }
.voice__ph { aspect-ratio: 1/1; }
.voice__body { margin: 0; }
.voice__body p { margin: 0; font-size: 1.9rem; line-height: 2.2; position: relative; padding-top: 4rem; }
.voice__body p::before { content: "“"; position: absolute; top: -1rem; left: 0; font-size: 7rem; line-height: 1; color: var(--green-soft); opacity: .5; }
.voice__body footer { margin-top: 2.4rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1.6rem; }
.voice__name { font-size: 1.8rem; font-weight: 500; letter-spacing: .1em; }
.voice__role { font-size: 1.4rem; color: var(--muted); letter-spacing: .08em; }

/* 求める人物像・募集要項 */
.persona { list-style: none; margin: 0 0 4.8rem; padding: 0; display: grid; gap: 1.2rem; }
.persona li { position: relative; padding-left: 3.2rem; font-size: 1.8rem; line-height: 1.9; }
.persona li::before {
  content: ""; position: absolute; left: .2rem; top: .75em;
  width: 1.4rem; height: .7rem; border-left: 2px solid var(--green); border-bottom: 2px solid var(--green);
  transform: rotate(-45deg) translateY(-50%);
}
.job-req { border-top: 1px solid var(--line); }
.job-req .def {           /* PC：左に項目名・右に内容 */
  display: grid; grid-template-columns: 14rem 1fr; gap: 0 3.2rem; align-items: start;
  margin: 0; padding: 2.4rem 0; border-bottom: 1px solid var(--line);
}
.job-req .def dt { margin: .3rem 0 0; text-align: center; }
.job-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.6rem 2.4rem; margin-top: 4rem; }
.job-cta .apply-btn { margin: 0; }
.apply-btn.is-fill { background: var(--green); color: #fff; }
.apply-btn.is-fill:hover { background: var(--green-soft); border-color: var(--green-soft); }

/* ほかの仕事を知る */
.other-jobs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4rem; }
.other-job { display: block; color: inherit; }
.other-job .ph { aspect-ratio: 1.95; transition: opacity .3s; }
.other-job:hover .ph { opacity: .8; }
.other-job__label { margin: 2rem 0 0; font-size: 1.2rem; letter-spacing: .35em; color: var(--green-soft); }
.other-job h3 { margin: .4rem 0 1.2rem; font-size: 2.4rem; font-weight: 500; color: var(--green); letter-spacing: .08em; }

@media (max-width: 900px) {
  .job-crumb { margin-bottom: 2.8rem; }
  .job-hero__ph { aspect-ratio: 4/3; }
  .work-list--3col, .work-list--2col { grid-template-columns: 1fr; gap: 4rem; }
  .job-req .def { grid-template-columns: 1fr; gap: 1rem; padding: 2rem 0; }
  .job-req .def dt { justify-self: start; }
  .appeal-list, .appeal-list--2col { grid-template-columns: 1fr; gap: 3.2rem; }
  .voice { grid-template-columns: 1fr; gap: 3.2rem; }
  .voice__ph { width: 70%; }
  .timeline::before { left: 5.6rem; }
  .timeline li { grid-template-columns: 5.6rem 1fr; gap: 0 2.4rem; }
  .timeline li::before { left: calc(5.6rem - 5px); }
  .timeline__time { font-size: 1.6rem; }
  .other-jobs { grid-template-columns: 1fr; gap: 3.2rem; }
  .job-cta { flex-direction: column; align-items: center; }
}

/* =========================================================
   社長からのメッセージ（page-message.php：/recruit/message/）
   本文は固定ページの本文（h2 / p / .msg-sign / .msg-profile）をそのまま整形する
   ========================================================= */
.msg-title { font-size: clamp(2.8rem, 4.4vw, 4.4rem); letter-spacing: .1em; }
.msg-body { font-size: 1.8rem; line-height: 2.1; color: var(--ink); }
.msg-body h2 {
  margin: 6.4rem 0 2.4rem; padding-top: 3.2rem; border-top: 1px solid var(--line);
  font-size: clamp(2.2rem, 2.6vw, 2.6rem); font-weight: 500; line-height: 1.7; letter-spacing: .08em; color: var(--green);
}
.msg-body h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.msg-body p { margin: 0 0 1.6em; }
.msg-body img { max-width: 100%; height: auto; }
.msg-sign { margin: 5.6rem 0 0 !important; text-align: right; font-size: 1.6rem; line-height: 2; letter-spacing: .08em; }
.msg-sign span { display: block; margin-top: .4rem; font-size: 2.2rem; font-weight: 500; letter-spacing: .2em; color: var(--green); }
.msg-profile { margin-top: 5.6rem; padding: 3.2rem 3.6rem; background: var(--cream); }
.msg-profile h3 { margin: 0 0 1.2rem; font-size: 1.3rem; font-weight: 500; letter-spacing: .35em; color: var(--green-soft); }
.msg-profile p { margin: 0; font-size: 1.6rem; line-height: 2; }
.msg .job-cta { margin-top: 7.2rem; }
@media (max-width: 900px) {
  .msg-body { font-size: 1.6rem; }
  .msg-body h2 { margin-top: 4.8rem; }
  .msg-profile { padding: 2.4rem 2rem; }
}

/* =========================================================
   働く場所：店舗情報（2026-10-13 追加）
   ========================================================= */
.store-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem 1.2rem; }
.store-name small { font-size: 1.25rem; letter-spacing: .08em; color: var(--muted); }
.store-info { display: grid; grid-template-columns: 7.2rem 1fr; gap: .6rem 1.6rem; margin: 0 0 1.2rem; }
.store-info dt { margin: 0; color: var(--green); font-size: 1.3rem; letter-spacing: .1em; line-height: 2.2; }
.store-info dd { margin: 0; color: var(--ink); font-size: 1.5rem; line-height: 2; }
.store-link { display: inline-block; font-size: 1.3rem; letter-spacing: .1em; color: var(--green); text-decoration: underline; text-underline-offset: .3em; }
.store-note { margin: 1.6rem 0 0; font-size: 1.25rem; color: var(--muted); line-height: 1.8; }
@media (max-width: 900px) {
  .store-info { grid-template-columns: 6rem 1fr; gap: .4rem 1.2rem; }
  .store-info dd { font-size: 1.4rem; }
}
.voice__more { margin: 2.4rem 0 0; }