@charset "UTF-8";
/* =============================================================
   style.scss
   -------------------------------------------------------------
   すべての SCSS をここで @import し、style.css に集約する。
   ※ 変数・mixin → リセット → フォント → 共通 → コンポーネント
     → 各ページ の順で読み込む。
   ============================================================= */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@700&family=Noto+Sans:wght@400;500;700&family=Noto+Sans+JP:wght@400;500;700&family=Oswald:wght@600;700&display=swap");
@media screen and (min-width: 768px) {
  html {
    font-size: 0.685vw;
  }
}
@media (min-width: 1600px) {
  html {
    font-size: 62.5%;
  }
}
@media (max-width: 767px) {
  /* SP は 375px 基準のデザイン。375px 幅でちょうど 1rem = 10px になるようにする
     （10 ÷ 375 = 0.026667 → 2.6667vw）。
     これで SCSS に書いた rem の数値が、そのままカンプの px と一致する。
     ・375px より広い端末では 10px 固定（デザインより大きくは拡大しない）
     ・375px より狭い端末では比例して縮み、はみ出しを防ぐ（下限 7.5px） */
  html {
    font-size: clamp(7.5px, 2.6667vw, 10px);
  }
}
@media (min-width: 450px) and (max-width: 767px) {
  /* 大きめのスマホ〜小型タブレット（450〜767px）。
     ここで 10px のまま固定すると、画面だけ広くて文字や余白が
     375px のときと同じ大きさのままになり、間延びして見える。
     → 450px で 10px、767px で 12.8px になるよう、なだらかに拡大する。
       （0.8833vw + 6.025px … 450px→10.000px / 767px→12.800px）
     767px 地点でデザインが 1.28 倍。文字も余白も画面幅に釣り合う。 */
  html {
    font-size: clamp(10px, 0.8833vw + 6.025px, 12.8px);
  }
}
/* 設定（変数・mixin：CSSを出力しない） */
/* =============================================================
   variables  … 全ページ共通の変数
   ============================================================= */
/* ------- color（styleguide.css 準拠） ------- */
/* 価値観セクションの極薄背景 */
/* カードのボーダー（下層ページ） */
/* ------- font-family ------- */
/* 本文（日本語） */
/* 見出し補助 */
/* 英字見出し */
/* ナビ・注釈 */
/* ------- layout ------- */
/* PC デザイン基準幅 */
/* SP デザイン基準幅 */
/* コンテンツ最大幅（中央寄せの基準） */
/* PC 左右の余白 */
/* SP 左右の余白（Anima: padding 80px 16px / 375-32=343） */
/* ------- breakpoint ------- */
/* これ以下を SP レイアウトにする */
/* ------- z-index ------- */
/* =============================================================
   mixin  … 全ページ共通の mixin
   ============================================================= */
/* ------- メディアクエリ（767px以下 = SP） -------
   PC をベースに書き、SP の上書きを @include sp {} で行う */
/* ------- 画像の初期プロパティ（指定どおり） ------- */
/* ------- 中央寄せの内側ラッパー -------
   max-width を設けて中央寄せ（レイアウト方針） */
/* フォント（@import url() を先頭に出すため ress より前に読み込む） */
/* =============================================================
   font
   -------------------------------------------------------------
   使用フォント: Oswald / Noto Sans / Inter / Noto Sans JP
   -------------------------------------------------------------
   【暫定】プレビュー表示用に Google Fonts を読み込んでいます。
   本番でフォントを自ホストする場合は、下の @import を削除し、
   assets/fonts/ にフォントファイルを配置して、その下の
   @font-face テンプレートのコメントを外してください。
   ============================================================= */
/* ------- 暫定：Google Fonts（本番でローカルに差し替え可） ------- */
/* ------- 本番：自ホスト用テンプレート -------
   assets/fonts/ にファイルを置いたら下記を有効化。

@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/Oswald-Bold.woff2") format("woff2");
}
@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/Oswald-SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/NotoSans-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/NotoSans-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/NotoSans-Bold.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/Inter-Bold.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/NotoSansJP-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/NotoSansJP-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/NotoSansJP-Bold.woff2") format("woff2");
}
*/
/* リセット */
/* resset.dev • v5.0.2 */
/* # =================================================================
   # Global selectors
   # ================================================================= */
html {
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%; /* Prevent adjustments of font size after orientation changes in iOS */
  word-break: normal;
  -moz-tab-size: 4;
  -o-tab-size: 4;
     tab-size: 4;
}

*,
::before,
::after {
  background-repeat: no-repeat; /* Set `background-repeat: no-repeat` to all elements and pseudo elements */
  box-sizing: inherit;
}

::before,
::after {
  text-decoration: inherit; /* Inherit text-decoration and vertical align to ::before and ::after pseudo elements */
  vertical-align: inherit;
}

* {
  padding: 0; /* Reset `padding` and `margin` of all elements */
  margin: 0;
}

/* # =================================================================
   # General elements
   # ================================================================= */
hr {
  overflow: visible; /* Show the overflow in Edge and IE */
  height: 0; /* Add the correct box sizing in Firefox */
  color: inherit; /* Correct border color in Firefox. */
}

details,
main {
  display: block; /* Render the `main` element consistently in IE. */
}

summary {
  display: list-item; /* Add the correct display in all browsers */
}

small {
  font-size: 80%; /* Set font-size to 80% in `small` elements */
}

[hidden] {
  display: none; /* Add the correct display in IE */
}

abbr[title] {
  border-bottom: none; /* Remove the bottom border in Chrome 57 */
  /* Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari */
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

a {
  background-color: transparent; /* Remove the gray background on active links in IE 10 */
}

a:active,
a:hover {
  outline-width: 0; /* Remove the outline when hovering in all browsers */
}

code,
kbd,
pre,
samp {
  font-family: monospace, monospace; /* Specify the font family of code elements */
}

pre {
  font-size: 1em; /* Correct the odd `em` font sizing in all browsers */
}

b,
strong {
  font-weight: bolder; /* Add the correct font weight in Chrome, Edge, and Safari */
}

/* https://gist.github.com/unruthless/413930 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

table {
  border-color: inherit; /* Correct border color in all Chrome, Edge, and Safari. */
  text-indent: 0; /* Remove text indentation in Chrome, Edge, and Safari */
}

iframe {
  border-style: none;
}

/* # =================================================================
   # Forms
   # ================================================================= */
input {
  border-radius: 0;
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto; /* Correct the cursor style of increment and decrement buttons in Chrome */
}

[type=search] {
  -webkit-appearance: textfield; /* Correct the odd appearance in Chrome and Safari */
  outline-offset: -2px; /* Correct the outline style in Safari */
}

[type=search]::-webkit-search-decoration {
  -webkit-appearance: none; /* Remove the inner padding in Chrome and Safari on macOS */
}

textarea {
  overflow: auto; /* Internet Explorer 11+ */
  resize: vertical; /* Specify textarea resizability */
}

button,
input,
optgroup,
select,
textarea {
  font: inherit; /* Specify font inheritance of form elements */
}

optgroup {
  font-weight: bold; /* Restore the font weight unset by the previous rule */
}

button {
  overflow: visible; /* Address `overflow` set to `hidden` in IE 8/9/10/11 */
}

button,
select {
  text-transform: none; /* Firefox 40+, Internet Explorer 11- */
}

/* Apply cursor pointer to button elements */
button,
[type=button],
[type=reset],
[type=submit],
[role=button] {
  cursor: pointer;
}

/* Remove inner padding and border in Firefox 4+ */
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/* Replace focus style removed in the border reset above */
button:-moz-focusring,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  outline: 1px dotted ButtonText;
}

button,
html [type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button; /* Correct the inability to style clickable types in iOS */
}

/* Remove the default button styling in all browsers */
button,
input,
select,
textarea {
  background-color: transparent;
  border-style: none;
}

a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
  outline-width: 0;
}

/* Style select like a standard input */
select {
  -moz-appearance: none; /* Firefox 36+ */
  -webkit-appearance: none; /* Chrome 41+ */
}

select::-ms-expand {
  display: none; /* Internet Explorer 11+ */
}

select::-ms-value {
  color: currentColor; /* Internet Explorer 11+ */
}

legend {
  border: 0; /* Correct `color` not being inherited in IE 8/9/10/11 */
  color: inherit; /* Correct the color inheritance from `fieldset` elements in IE */
  display: table; /* Correct the text wrapping in Edge and IE */
  max-width: 100%; /* Correct the text wrapping in Edge and IE */
  white-space: normal; /* Correct the text wrapping in Edge and IE */
  max-width: 100%; /* Correct the text wrapping in Edge 18- and IE */
}

::-webkit-file-upload-button {
  /* Correct the inability to style clickable types in iOS and Safari */
  -webkit-appearance: button;
  color: inherit;
  font: inherit; /* Change font properties to `inherit` in Chrome and Safari */
}

/* Replace pointer cursor in disabled elements */
[disabled] {
  cursor: default;
}

/* # =================================================================
   # Specify media element style
   # ================================================================= */
img {
  border-style: none; /* Remove border when inside `a` element in IE 8/9/10 */
}

/* Add the correct vertical alignment in Chrome, Firefox, and Opera */
progress {
  vertical-align: baseline;
}

/* # =================================================================
   # Accessibility
   # ================================================================= */
/* Specify the progress cursor of updating elements */
[aria-busy=true] {
  cursor: progress;
}

/* Specify the pointer cursor of trigger elements */
[aria-controls] {
  cursor: pointer;
}

/* Specify the unstyled cursor of disabled, not-editable, or otherwise inoperable elements */
[aria-disabled=true] {
  cursor: default;
}

/* 全ページ共通 */
/* =============================================================
   common  … 全ページ共通スタイル
   ============================================================= */
/* ------- base ------- */
/* rem の基準。62.5% ＝ 10px（ブラウザ既定16px時）なので、
   「デザイン値 ÷ 10」をそのまま rem で書ける。
   ※ _about.scss は px ではなく rem で記述している。
   ※ style.scss 冒頭に vw ベースの html font-size 指定もあるが、
     こちらが後に出力されるため打ち消している（下の注記参照）。 */
/* タブレット幅（768〜1199px）の扱い
   -------------------------------------------------------------
   デザインは PC(1440) / SP(375) の2種のみのため、768px 以上では
   PC レイアウトの最小幅を確保し、収まらない場合は横スクロールさせる。
   （日本の実装で一般的な処理。スマホ表示は 767px 以下で切り替わる）
   ※ タブレットを「PCレイアウトの縮小表示」にしたい場合は、この指定を外し
     viewport を width=1200 に切り替える方式に変更できます。 */
@media screen and (min-width: 768px) {
  body,
  .header,
  .breadcrumb {
    min-width: 120rem;
  }
}
/* 横スクロール防止（保険）
   -------------------------------------------------------------
   レイアウトが収まる幅（SP＝767px以下 / PC＝1200px以上）でのみ、
   横方向のはみ出しを切り落とす。

   ※【重要】html だけに指定しても効かない（hidden / clip どちらも）。
     ルート要素の overflow はビューポートへ伝播し、html 自身は visible
     として扱われるため、body 内のはみ出しはスクロール可能なまま残る。
     body にも指定して初めて止まる。実測で確認済み。

   ※ 768〜1199px を対象外にしているのは、上の min-width: 1200px による
     横スクロールが「PCレイアウトを維持したまま右側を見せる」ための
     意図した挙動だから。ここを隠すと右端が永久に見られなくなる。

   ※ これはあくまで保険。装飾背景など実際にはみ出す要素は、
     各セクション側の overflow-x: clip で切るのが本筋
     （.section_about / .section_work / .section_interview）。 */
@media screen and (max-width: 767px), screen and (min-width: 120rem) {
  html,
  body {
    overflow-x: clip;
  }
}
body {
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 2.8rem;
  color: #231815;
  background-color: #ffffff;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

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

/* ------- 画像の初期プロパティ（指定どおり） ------- */
.imgArea {
  display: block;
}
.imgArea img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  image-rendering: -webkit-optimize-contrast;
}

/* ------- 中央寄せラッパー ------- */
.inner {
  display: block;
  width: 100%;
  max-width: 120rem;
  margin-right: auto;
  margin-left: auto;
  /* SP は左右 16px の余白（Anima: 375 - 32 = 343px） */
}
@media screen and (max-width: 767px) {
  .inner {
    padding-right: 1.6rem;
    padding-left: 1.6rem;
  }
}

/* ------- PC / SP 出し分け ------- */
@media screen and (max-width: 767px) {
  .pc_only {
    display: none !important;
  }
}

/* ※ display: block !important のため、flex / grid レイアウトを持つ
   クラスと併用すると display が打ち消される。
   併用する場合は、その要素側で display を !important で指定し直すこと
   （例: .sec_title.sp_only / .interview_list.sp_only）。 */
.sp_only {
  display: none !important;
}
@media screen and (max-width: 767px) {
  .sp_only {
    display: block !important;
  }
}

/* ------- 改行の出し分け -------
   SP のときだけ改行する <br> に付ける。
   .sp_only は display: block を当てるため <br> では改行として働かない。
   そのため inline で戻す専用クラスを用意している。 */
.br_sp {
  display: none;
}
@media screen and (max-width: 767px) {
  .br_sp {
    display: inline;
  }
}

/* 逆に PC のときだけ改行する <br>。
   PC / SP で改行位置が異なる文章で .br_sp と組み合わせて使う。 */
.br_pc {
  display: inline;
}
@media screen and (max-width: 767px) {
  .br_pc {
    display: none;
  }
}

/* ------- セクション見出し -------
   PC: LINE + EN + JA 横並び（ベースライン揃え）
   SP: LINE + [EN 縦積み JA]（左寄せ）
   ABOUT / WORK / INTERVIEW / NEWS 共通 */
/* セクション見出し
   スクロールで表示領域に入ったら下からフェードインする。
   初期状態をCSSで持たせ、JS（main.js）が .is_shown を付与する方式。
   （下層ページの .sec_head_line と同じ仕組み・同じイージング）        */
.sec_title {
  display: flex;
  align-items: flex-end;
  gap: 2.4rem;
  opacity: 0;
  transform: translateY(4rem);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.sec_title.is_shown {
  opacity: 1;
  transform: translateY(0);
}
.sec_title {
  /* 視差効果を減らす設定の環境では最初から表示する */
}
@media (prefers-reduced-motion: reduce) {
  .sec_title {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
@media screen and (max-width: 767px) {
  .sec_title {
    gap: 1.6rem;
    /* .sp_only は display: block !important で表示するため、
       併用すると上の display: flex が打ち消されて
       赤いラインと見出しが横並びにならなくなる。ここで取り戻す。 */
  }
  .sec_title.sp_only {
    display: flex !important;
  }
}

.sec_title_body {
  display: flex;
  align-items: flex-end;
  gap: 2.4rem;
}
@media screen and (max-width: 767px) {
  .sec_title_body {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }
}

.sec_title_line {
  display: block;
  flex-shrink: 0;
  width: 0.8rem;
  height: 9.6rem; /* SP も同値のため、SP側の上書きは不要になった */
  background-color: #e60012;
  transform: scaleY(0);
  transform-origin: center top;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.sec_title.is_shown .sec_title_line {
  transform: scaleY(1);
}
@media (prefers-reduced-motion: reduce) {
  .sec_title_line {
    transform: none;
    transition: none;
  }
}

.sec_title_en {
  font-family: "Oswald", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 6.4rem;
  line-height: 6rem;
  letter-spacing: 0.64rem;
  color: #231815;
}
@media screen and (max-width: 767px) {
  .sec_title_en {
    font-size: 4.8rem;
    line-height: 6rem;
    letter-spacing: 0.4rem;
  }
}

.sec_title_ja {
  margin-bottom: 0.6rem;
  font-family: "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 2.4rem;
  color: #231815;
}
@media screen and (max-width: 767px) {
  .sec_title_ja {
    margin-bottom: 0;
    font-size: 2rem;
    line-height: 2.4rem;
  }
}

/* ------- READ MORE ボタン（共通） ------- */
.btn_more {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32rem;
  height: 5.6rem;
  border-radius: 3rem;
  background-color: #f3f3f8;
  font-family: "Oswald", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 2rem;
  line-height: 2.8rem;
  color: #231815;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.btn_more:hover {
  background-color: #e60012;
  color: #ffffff;
}
@media screen and (max-width: 767px) {
  .btn_more {
    width: 100%;
    max-width: 32rem;
    height: 5.2rem;
    font-size: 1.8rem;
  }
}

/* =============================================================
   下層ページ共通パーツ
   （about / work / interview など全下層で使用）
   ============================================================= */
/* ------- 下層ページの main（固定ヘッダー＋パンくず分の余白） ------- */
.lower_main {
  display: block;
  /* ヘッダー80px ＋ パンくず28px（height: auto ＝ line-height 分）＋ 余白60px
     ※ パンくずが可変高になったため、ここは実測値ベースの固定値。
       パンくずの font-size / line-height を変えた場合は再調整が必要。 */
  padding-top: 16.8rem;
  /* SP はパンくずが無い設計のためヘッダー分のみ */
}
@media screen and (max-width: 767px) {
  .lower_main {
    padding-top: 6.4rem;
  }
}

/* ------- パンくず（ヘッダー下に固定） ------- */
.breadcrumb {
  position: fixed;
  top: 8rem;
  left: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  width: 100%;
  height: auto;
  padding-right: 14rem;
  padding-left: 14rem;
  background-color: rgba(255, 255, 255, 0.8);
  /* SPカンプにパンくずが無いため非表示 */
}
@media screen and (max-width: 767px) {
  .breadcrumb {
    display: none;
  }
}

.breadcrumb_list {
  display: flex;
  align-items: center;
  gap: 2.4rem;
}
@media screen and (max-width: 767px) {
  .breadcrumb_list {
    gap: 1.2rem;
    white-space: nowrap;
  }
}

.breadcrumb_item {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 2.8rem;
  color: #231815;
  transition: color 0.3s ease;
}
@media screen and (max-width: 767px) {
  .breadcrumb_item {
    font-size: 1.2rem;
  }
}

a.breadcrumb_item:hover {
  color: #e60012;
}

/* ------- 下層ページのキービジュアル ------- */
.page_hero {
  display: block;
  width: 100%;
  height: 32rem;
}
@media screen and (max-width: 767px) {
  .page_hero {
    height: 20rem;
  }
}

/* ------- セクション見出しのフェードイン（全ページ共通） -------
   スクロールで表示領域に入ったら下からフェードインする。
   初期状態（透明 + 下へ40px）をCSSで持たせ、JS（main.js）が
   .is_shown を付与して解除する方式。
   ・トップページの .sec_title / .recruitment_title も同じ挙動だが、
     それぞれの定義側に同じ指定を持っているためここには含めない。
   ・見出しの飾り（バー / ライン）も一緒に動かしたいので、
     見出しテキストではなく見出しブロックごと対象にしている。
   ・.is_shown 側は translateY(0) ではなく none にする。
     transform が残っていると position: fixed / absolute の
     包含ブロックになってしまうため。 */
.sec_head,
.contact_head,
.access_head,
.recruit_head,
.work_dept_head,
.recruit_dept_head,
.access_area_head,
.culture_desc_head,
.culture_persona_ttl,
.career_sec_ttl,
.privacy_section_ttl {
  opacity: 0;
  transform: translateY(4rem);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.sec_head.is_shown,
.contact_head.is_shown,
.access_head.is_shown,
.recruit_head.is_shown,
.work_dept_head.is_shown,
.recruit_dept_head.is_shown,
.access_area_head.is_shown,
.culture_desc_head.is_shown,
.culture_persona_ttl.is_shown,
.career_sec_ttl.is_shown,
.privacy_section_ttl.is_shown {
  opacity: 1;
  transform: none;
}
.sec_head,
.contact_head,
.access_head,
.recruit_head,
.work_dept_head,
.recruit_dept_head,
.access_area_head,
.culture_desc_head,
.culture_persona_ttl,
.career_sec_ttl,
.privacy_section_ttl {
  /* 視差効果を減らす設定の環境では最初から表示する */
}
@media (prefers-reduced-motion: reduce) {
  .sec_head,
  .contact_head,
  .access_head,
  .recruit_head,
  .work_dept_head,
  .recruit_dept_head,
  .access_area_head,
  .culture_desc_head,
  .culture_persona_ttl,
  .career_sec_ttl,
  .privacy_section_ttl {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ------- 下層ページの見出し（EN + JA + ライン 中央寄せ） ------- */
.sec_head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.4rem;
}
@media screen and (max-width: 767px) {
  .sec_head {
    gap: 1.6rem;
  }
}

.sec_head_body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.4rem;
}
@media screen and (max-width: 767px) {
  .sec_head_body {
    gap: 0;
  }
}

.sec_head_en {
  font-family: "Oswald", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 6.4rem;
  line-height: 6.4rem;
  letter-spacing: 0.64rem;
  color: #231815;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .sec_head_en {
    font-size: 5.2rem;
    line-height: 6rem;
    letter-spacing: 0;
  }
}

.sec_head_ja {
  font-family: "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 2.4rem;
  color: #231815;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .sec_head_ja {
    font-size: 2rem;
    line-height: 2.4rem;
  }
}

/* 見出し下のライン
   （Animaメモ：中心から外へ広がるアニメーション） */
.sec_head_line {
  display: block;
  width: 16rem;
  height: 0.5rem;
  background-color: #e60012;
  transform: scaleX(0);
  transform-origin: center center;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.sec_head_line.is_shown {
  transform: scaleX(1);
}
.sec_head_line {
  /* 視差効果を減らす設定の環境では最初から表示する */
}
@media (prefers-reduced-motion: reduce) {
  .sec_head_line {
    transform: scaleX(1);
    transition: none;
  }
}

/* ------- ムービーの再生ボタン（下層共通） ------- */
.movie_btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  width: 9.7rem;
  height: 9.7rem;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.8);
  transition: background-color 0.3s ease;
  /* 赤い輪。カンプでは白い円のふちに接しておらず、少し内側に入っている
     （97pxの円に対して上下左右 4.5px ぶん内側）。%で指定しているので、
     ボタンの大きさが変わる箇所（仕事を知る／SP）でも同じ見え方になる。 */
}
.movie_btn::before {
  content: "";
  position: absolute;
  top: 4.6%;
  right: 4.6%;
  bottom: 4.6%;
  left: 4.6%;
  border: 0.1rem solid #e60012;
  border-radius: 50%;
  pointer-events: none;
}
.movie_btn:hover {
  background-color: #ffffff;
}
@media screen and (max-width: 767px) {
  .movie_btn {
    width: 7.2rem;
    height: 7.2rem;
  }
}

.movie_btn_txt {
  font-family: "Oswald", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.8rem;
  color: #231815;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .movie_btn_txt {
    font-size: 1.2rem;
    line-height: 1.4rem;
  }
}

.movie_btn_icon {
  display: block;
  width: 1.6rem;
  height: 1.6rem;
}
@media screen and (max-width: 767px) {
  .movie_btn_icon {
    width: 1.2rem;
    height: 1.2rem;
  }
}

/* ------- 動画のオーバーレイ（クリックで YouTube を再生） ------- */
.is_movie_ready {
  cursor: pointer;
}

.movie_modal {
  position: fixed;
  inset: 0;
  z-index: 1200; /* ヘッダー(1000)・SPメニュー(1100)より前面 */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.4rem;
  background-color: rgba(0, 0, 0, 0.85);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.movie_modal[hidden] {
  display: none;
}
.movie_modal.is_open {
  opacity: 1;
}
@media screen and (max-width: 767px) {
  .movie_modal {
    padding: 1.6rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .movie_modal {
    transition: none;
  }
}

.movie_modal_inner {
  position: relative;
  width: 100%;
  max-width: 112rem;
}

.movie_modal_frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  background-color: #000000;
}
.movie_modal_frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.movie_modal_close {
  position: absolute;
  right: 0;
  bottom: calc(100% + 1.2rem);
  width: 4rem;
  height: 4rem;
  padding: 0;
  border: 0;
  background-color: transparent;
  cursor: pointer;
}
.movie_modal_close::before,
.movie_modal_close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3.2rem;
  height: 0.2rem;
  background-color: #ffffff;
}
.movie_modal_close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.movie_modal_close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
@media screen and (max-width: 767px) {
  .movie_modal_close {
    width: 3.2rem;
    height: 3.2rem;
  }
  .movie_modal_close::before,
  .movie_modal_close::after {
    width: 2.4rem;
  }
}

/* ------- more ボタン（下層共通 / 円形） ------- */
.more_btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 5.6rem;
  height: 5.6rem;
  padding: 0.8rem;
  border: 0.1rem solid #e60012;
  border-radius: 50%;
  /* <a> と <button> の両方で使うため、ボタン既定の背景を打ち消す */
  background-color: transparent;
  transition: background-color 0.3s ease;
}
.more_btn:hover {
  background-color: rgba(230, 0, 18, 0.06);
}

.more_btn_txt {
  font-family: "Oswald", "Helvetica Neue", Arial, sans-serif;
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 1.6rem;
  letter-spacing: 0.16rem;
  color: #e60012;
}

.more_btn_icon {
  display: block;
  width: 1.541rem;
  height: 0.912rem;
  transition: transform 0.3s ease;
}

/* コンポーネント */
/* =============================================================
   header  … 全ページ共通ヘッダー（固定）
   ============================================================= */
.header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
  height: 8rem;
  background-color: #ffffff;
}
@media screen and (max-width: 767px) {
  .header {
    height: 6.4rem;
  }
}

.header_inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 120rem;
  height: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 0;
  padding-left: 0;
}
@media screen and (max-width: 767px) {
  .header_inner {
    padding-right: 1.6rem;
    padding-left: 1.6rem;
  }
}

/* ------- ロゴ ------- */
.header_logo {
  display: flex;
  align-items: center;
  gap: 2.4rem;
}
@media screen and (max-width: 767px) {
  .header_logo {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
  }
}

/* PC / SP でロゴ画像を出し分けるための <picture> ラッパー。
   サイズは中の .header_logo_img が持つため、ここは箱の指定だけ。 */
.header_logo_pic {
  display: block;
}

.header_logo_img {
  display: block;
  width: 32rem;
  height: 2.4rem;
}
@media screen and (max-width: 767px) {
  .header_logo_img {
    width: 19rem;
    height: auto;
  }
}

.header_logo_text {
  font-family: "Oswald", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 2.8rem;
  letter-spacing: 0.4rem;
  color: #231815;
  /* SP は logo_sp.webp 側に文字が含まれるため非表示 */
}
@media screen and (max-width: 767px) {
  .header_logo_text {
    display: none;
  }
}

/* ------- 右側（ナビ + ボタン） ------- */
.header_right {
  display: flex;
  align-items: center;
  gap: 2.4rem;
}
@media screen and (max-width: 767px) {
  .header_right {
    gap: 1.2rem;
  }
}

.header_nav {
  display: flex;
  align-items: center;
  gap: 1.6rem;
}
@media screen and (max-width: 767px) {
  .header_nav {
    display: none; /* SP はドロワー想定（SPデザイン支給後に実装） */
  }
}

.header_nav_item {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.4;
  color: #231815;
  transition: color 0.3s ease;
}
.header_nav_item:hover {
  color: #e60012;
}

.header_btns {
  display: flex;
  align-items: center;
  gap: 1.6rem;
}
@media screen and (max-width: 767px) {
  .header_btns {
    gap: 0.8rem;
  }
}

/* 募集要項 */
.header_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 12rem;
  height: 4.8rem;
  background-color: #e60012;
  font-family: "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 1.8rem;
  line-height: 2rem;
  color: #ffffff;
  transition: opacity 0.3s ease;
}
.header_btn:hover {
  opacity: 0.8;
}
.header_btn {
  /* SP: 正方形の2行ボタン */
}
@media screen and (max-width: 767px) {
  .header_btn {
    width: 4.2rem;
    height: 4.2rem;
    border-radius: 0.5rem;
    font-family: "Oswald", "Helvetica Neue", Arial, sans-serif;
    font-size: 1.2rem;
    line-height: 1.4rem;
    text-align: center;
  }
}

/* 募集要項ボタンのテキストラッパー
   .header_btn は display: flex のため、直下に置いた <br> は
   フレックスアイテムへブロック化され、改行として働かない。
   テキストを1つのアイテムにまとめることで <br class="br_sp"> を有効にする。 */
.header_btn_txt {
  display: block;
}

/* ENTRY */
.header_entry {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 12rem;
  height: 4.8rem;
  background-color: #e60012;
  font-family: "Oswald", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 2rem;
  line-height: 2rem;
  letter-spacing: 0.2rem;
  color: #ffffff;
  transition: opacity 0.3s ease;
}
.header_entry:hover {
  opacity: 0.8;
}
.header_entry {
  /* SP: 正方形 */
}
@media screen and (max-width: 767px) {
  .header_entry {
    width: 4.2rem;
    height: 4.2rem;
    border-radius: 0.5rem;
    font-size: 1.2rem;
    line-height: 1.4rem;
    letter-spacing: 0;
  }
}

/* ------- SP ハンバーガー ------- */
.header_hamburger {
  display: none;
}
@media screen and (max-width: 767px) {
  .header_hamburger {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 4.2rem;
    height: 2.8rem;
    padding: 0.3rem 0.1rem;
    background: transparent;
  }
  .header_hamburger span {
    display: block;
    width: 4rem;
    height: 0.25rem;
    background-color: #231815;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }
}

/* =============================================================
   SP ドロワーメニュー（ハンバーガーで開閉）
   ============================================================= */
.sp_menu {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1100;
  overflow-y: auto;
  padding-bottom: 2.4rem;
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(0.2rem);
}

/* 開いているとき（SPのみ） */
@media screen and (max-width: 767px) {
  .is_menu_open .sp_menu {
    display: block;
  }
}

/* ------- 上部バー（ロゴ / 募集要項 / ENTRY / CLOSE） -------
   カンプは4つの要素をまとめて space-between で置いている（ボタン同士の
   すき間も 10.33px でそろう）。ボタン3つを別の箱でくくると、その中だけ
   別のすき間になってしまうため、4つとも .sp_menu_bar の直下に並べる。 */
.sp_menu_bar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 6.4rem;
  padding: 0 1.6rem;
  background-color: #ffffff;
}

/* ロゴは logo_sp.webp の1枚だけ。この画像に「RECRUITING SITE」まで
   含まれているため、別途テキストを添えると2重に出てしまう
   （ヘッダー側で .header_logo_text を SP 非表示にしているのと同じ理由）。
   カンプのロゴ枠は 186.02 × 27px で、この画像の縦横比とほぼ一致する。 */
.sp_menu_logo {
  display: block;
}

.sp_menu_logo_img {
  display: block;
  width: 18.6rem;
  height: auto;
}

/* 募集要項 / ENTRY 正方形ボタン */
.sp_menu_ctr {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 4.2rem;
  height: 4.2rem;
  border-radius: 0.5rem;
  background-color: #e60012;
  font-family: "Oswald", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.4rem;
  text-align: center;
  color: #ffffff;
  transition: opacity 0.3s ease;
}
.sp_menu_ctr:hover {
  opacity: 0.8;
}

/* CLOSE ボタン */
.sp_menu_close {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  width: 4.2rem; /* カンプの CLOSE 枠は ×アイコンと同じ 42px */
  background: transparent;
}

.sp_menu_close_icon {
  display: block;
  width: 4.2rem;
  height: 2rem;
}

.sp_menu_close_text {
  font-family: "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.2rem;
  color: #231815;
}

/* ------- メニューリスト ------- */
.sp_menu_list {
  display: block;
  border-top: 0.1rem solid #dcdcdc;
}

.sp_menu_sec {
  display: block;
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
  border-bottom: 0.1rem solid #dcdcdc;
}

.sp_menu_head {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.8rem 1.6rem;
}

.sp_menu_en {
  font-family: "Oswald", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 2rem;
  line-height: 2.8rem;
  color: #231815;
}

.sp_menu_ja {
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 2.8rem;
  color: #e60012;
}

.sp_menu_sub {
  display: flex;
  align-items: center;
  height: 4rem;
  padding: 0 2.4rem;
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 2.8rem;
  color: #231815;
  transition: color 0.3s ease;
}
.sp_menu_sub:hover {
  color: #e60012;
}

/* ------- 下部（ENTRY / リンク / コピー） ------- */
.sp_menu_entry {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24rem;
  height: 5.6rem;
  margin: 2.4rem auto;
  background-color: #e60012;
  font-family: "Oswald", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 2.8rem;
  letter-spacing: 0.24rem;
  color: #ffffff;
  transition: opacity 0.3s ease;
}
.sp_menu_entry:hover {
  opacity: 0.8;
}

.sp_menu_links {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: 0 1.6rem;
  margin-bottom: 1.6rem;
}

.sp_menu_link {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  font-family: "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  font-weight: 500;
  font-size: 1.2rem;
  line-height: 2.8rem;
  letter-spacing: 0.06rem;
  color: #231815;
  transition: opacity 0.3s ease;
}
.sp_menu_link:hover {
  opacity: 0.6;
}

.sp_menu_link_icon {
  display: block;
  width: 1.6rem;
  height: 1.6rem;
}

.sp_menu_copy {
  padding: 0 1.6rem;
  font-family: "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  font-weight: 500;
  font-size: 1.2rem;
  line-height: 2.8rem;
  color: #231815;
  text-align: center;
}

/* メニューを開いている間は背面をスクロールさせない
   -------------------------------------------------------------
   ※【重要】body だけに overflow: hidden を指定しても効かない。
     SP幅では html 側に overflow-x: clip が効いており（_common.scss）、
     ルート要素が visible でない場合 body の overflow はビューポートへ
     伝播しないため、背面がスクロールできてしまう。実測で確認済み。
     → html にも .is_menu_open を付与して overflow: hidden にする。

   ※ さらに iOS Safari は overflow: hidden だけでは慣性スクロールを
     止めきれないため、body を position: fixed で固定する。
     開く直前のスクロール位置は main.js が top（マイナス値）へ退避し、
     閉じるときに window.scrollTo で復元する。 */
html.is_menu_open {
  overflow: hidden;
}

body.is_menu_open {
  position: fixed;
  width: 100%;
  overflow: hidden;
  /* top は main.js が「-スクロール量px」をインラインで設定する */
}

/* =============================================================
   footer  … 全ページ共通フッター
   PC: ロゴ行 / 住所+ボタン・3カラムナビ / 下部リンク+コピー
   SP: 中央寄せ縦積み（ENTRY→お問い合わせ、区切り線付きメニュー）
   ============================================================= */
.footer {
  display: block;
  width: 100%;
  padding-top: 2.4rem;
  padding-bottom: 2.4rem;
  background-color: #f3f3f8;
}

.footer_inner {
  display: block;
  width: 100%;
  max-width: 120rem;
  margin-right: auto;
  margin-left: auto;
}
@media screen and (max-width: 767px) {
  .footer_inner {
    padding-right: 1.6rem;
    padding-left: 1.6rem;
  }
}

/* ------- ロゴ行 ------- */
.footer_logo {
  display: flex;
  align-items: center;
  gap: 2.4rem;
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
}
@media screen and (max-width: 767px) {
  .footer_logo {
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
  }
}

/* PC / SP でロゴ画像を出し分けるための <picture> ラッパー */
.footer_logo_pic {
  display: block;
}

.footer_logo_img {
  display: block;
  width: 32rem;
  height: 2.4rem;
}
@media screen and (max-width: 767px) {
  .footer_logo_img {
    width: 24rem;
    height: auto;
  }
}

.footer_logo_text {
  font-family: "Oswald", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 2.8rem;
  letter-spacing: 0.4rem;
  color: #231815;
  /* SP は footer_logo_sp.webp 側に文字が含まれるため非表示
     （ヘッダーの .header_logo_text と同じ考え方） */
}
@media screen and (max-width: 767px) {
  .footer_logo_text {
    display: none;
  }
}

/* ------- 本体（住所＋ボタン / 3カラムナビ） ------- */
.footer_body {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding-top: 2.4rem;
  padding-bottom: 2.4rem;
  border-bottom: 0.1rem solid #231815;
}
@media screen and (max-width: 767px) {
  .footer_body {
    flex-direction: column;
    align-items: center;
    gap: 4rem;
    padding-top: 4rem; /* ロゴ行（.footer_logo）との余白 */
    border-bottom: none; /* SP は区切り線なし（各ナビ見出しの罫線で代替） */
  }
}

.footer_left {
  display: flex;
  flex-direction: column;
  gap: 4rem;
}
@media screen and (max-width: 767px) {
  .footer_left {
    align-items: center;
    gap: 4rem;
    width: 100%;
  }
}

.footer_address {
  font-family: "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 2.8rem;
  color: #231815;
}
@media screen and (max-width: 767px) {
  .footer_address {
    text-align: center;
  }
}

.footer_action {
  display: flex;
  gap: 2.4rem;
}
@media screen and (max-width: 767px) {
  .footer_action {
    flex-direction: column-reverse; /* ENTRY を上に */
    align-items: center;
    gap: 1.6rem;
    width: 100%;
  }
}

.footer_contact,
.footer_entry {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24rem;
  height: 5.6rem;
  background-color: #e60012;
  color: #ffffff;
  transition: opacity 0.3s ease;
}
.footer_contact:hover,
.footer_entry:hover {
  opacity: 0.8;
}

.footer_contact {
  font-family: "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 2rem;
  line-height: 2.8rem;
}

.footer_entry {
  font-family: "Oswald", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 2.8rem;
  letter-spacing: 0.24rem;
}

/* ------- 3カラムナビ ------- */
.footer_nav {
  display: flex;
  gap: 4rem;
}
@media screen and (max-width: 767px) {
  .footer_nav {
    flex-direction: column;
    gap: 2.4rem;
    width: 100%;
  }
}

.footer_nav_col {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

/* 見出し（COMPANY / RECRUITMENT / FAQ）の下に罫線。PC / SP 共通。
   下のリンクまでの間隔は「padding 0.8rem ＋ .footer_nav_col の gap 0.8rem」で、
   カンプの「見出し→8px→線→8px→リンク」と同じになる。 */
.footer_nav_head {
  display: block;
  padding-bottom: 0.8rem;
  border-bottom: 0.1rem solid #231815;
}

.footer_nav_en {
  display: block;
  font-family: "Oswald", "Helvetica Neue", Arial, sans-serif;
  font-weight: 600;
  font-size: 2rem;
  line-height: 2.8rem;
  color: #231815;
}

.footer_nav_ja {
  display: block;
  font-family: "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  font-weight: 500;
  font-size: 1.2rem;
  line-height: 1.9rem;
  color: #231815;
}

/* リンク群（SP は2カラム） */
.footer_nav_links {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
@media screen and (max-width: 767px) {
  .footer_nav_links {
    flex-flow: row wrap;
    gap: 0.8rem 2.4rem;
  }
}

.footer_nav_link {
  font-family: "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 2.8rem;
  color: #231815;
  transition: color 0.3s ease;
}
.footer_nav_link:hover {
  color: #e60012;
}
@media screen and (max-width: 767px) {
  .footer_nav_link {
    width: calc(50% - 1.2rem);
  }
}

/* ------- 下部（リンク / コピーライト） ------- */
.footer_bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  margin-top: 2.4rem; /* .footer_body（罫線）との余白 */
  gap: 1.6rem;
}
@media screen and (max-width: 767px) {
  .footer_bottom {
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    /* 上のセクション（.footer_body の中身）との実余白を 40px に揃える。
       .footer_body の padding-bottom: 24px が既にあるため、
       24px + 16px = 40px となるよう margin-top を相殺している。 */
    margin-top: 1.6rem;
  }
}

.footer_links {
  display: flex;
  align-items: center;
  gap: 2.4rem;
  /* SP も横並び。狭い端末で収まらない場合だけ折り返す */
}
@media screen and (max-width: 767px) {
  .footer_links {
    flex-flow: row wrap;
    align-items: center;
    justify-content: center;
    gap: 0.8rem; /* 375px 幅（内寸343px）に2つ並べても収まる値 */
  }
}

.footer_link {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-family: "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 2.8rem;
  letter-spacing: 0.3rem;
  color: #231815;
  transition: opacity 0.3s ease;
}
.footer_link:hover {
  opacity: 0.6;
}
.footer_link {
  /* 「5%」は文字サイズ比の指定のため em で表現（12px × 0.05 = 0.6px） */
}
@media screen and (max-width: 767px) {
  .footer_link {
    letter-spacing: 0.05em;
  }
}

.footer_link_icon {
  display: block;
  width: 1.6rem;
  height: 1.6rem;
}

.footer_copy {
  font-family: "Oswald", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 2.8rem;
  color: #231815;
  text-align: right;
}
@media screen and (max-width: 767px) {
  .footer_copy {
    text-align: center;
  }
}

/* 各ページ */
/* =============================================================
   top  … トップページ（WordPress: front-page.php 相当）
   ============================================================= */
.top_main {
  display: block;
  padding-top: 8rem; /* 固定ヘッダー分 */
}
@media screen and (max-width: 767px) {
  .top_main {
    padding-top: 6.4rem;
  }
}

/* =============================================================
   HERO
   ============================================================= */
/* 高さは「カンプの値」を基本にしつつ、画面に入りきらないときだけ縮める。
   -------------------------------------------------------------
   ・--hero_head は固定ヘッダー（.header）の高さ。これを引くことで
     メインビジュアルの下端が画面の下端とちょうど揃う。
   ・100svh は「モバイルでアドレスバーが出ている状態の画面高」。
     100dvh だとバーの出入りで高さが動いてしまうため svh を使う。
   ・min() / svh に未対応のブラウザ向けに、同じプロパティを
     3段階（固定値 → vh → svh）で重ねている。後ろの行が使える
     ブラウザではそちらが採用される。 */
.hero {
  position: relative;
  display: block;
  width: 100%;
  --hero_head: 8rem;
  height: 88rem;
  height: min(88rem, calc(100vh - var(--hero_head)));
  height: min(88rem, calc(100svh - var(--hero_head)));
  overflow: hidden; /* ズームアップ時のはみ出しを隠す */
  background-color: #231815; /* 画像読み込み前のちらつき防止 */
}
@media screen and (max-width: 767px) {
  .hero {
    --hero_head: 6.4rem;
    height: 56rem;
    height: min(56rem, calc(100vh - var(--hero_head)));
    height: min(56rem, calc(100svh - var(--hero_head)));
  }
}

/* 管理バー（ログイン中だけ出る帯）のぶんも差し引く */
.admin-bar .hero {
  --hero_head: calc(8rem + 32px);
}
@media screen and (max-width: 767px) {
  .admin-bar .hero {
    --hero_head: calc(6.4rem + 46px);
  }
}

/* ---- 背景スライド（ズームアップ＋クロスフェード） ----
   .hero_slides に z-index を持たせて内部を独立した重なり順にする。
   これにより .hero_inner（コピー・操作UI）が常に前面に来る。      */
.hero_slides {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  overflow: hidden;
}

.hero_slide {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  opacity: 0;
  transition: opacity 1200ms ease; /* フェードイン／フェードアウト */
  /* 表示中 */
}
.hero_slide.is_active {
  z-index: 1;
  opacity: 1;
}
.hero_slide {
  /* フェードイン中は最前面へ。
     旧スライドを不透明のまま下に残すことで、
     クロスフェード特有の「一瞬暗くなる」現象を防ぐ。 */
}
.hero_slide.is_entering {
  z-index: 2;
}

.hero_slide_img {
  display: block;
  width: 100%;
  height: 100%;
}
.hero_slide_img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  transform: scale(1); /* ズームはJSから transition で制御 */
  will-change: transform;
}

/* 視差効果を減らす設定の環境では、ズームもフェードも行わない */
@media (prefers-reduced-motion: reduce) {
  .hero_slide {
    transition-duration: 1ms;
  }
  .hero_slide_img img {
    transform: none !important;
    transition: none !important;
  }
}
.hero_inner {
  position: relative;
  z-index: 1; /* 背景スライドより前面 */
  width: 100%;
  max-width: 120rem;
  height: 100%;
  margin-right: auto;
  margin-left: auto;
}
@media screen and (max-width: 767px) {
  .hero_inner {
    padding-right: 1.6rem;
    padding-left: 1.6rem;
  }
}

/* grid + justify-content: center で「コピーの文字幅ぴったりの列」を作り、
   それを画面中央に置く。こうすると下の線をコピーの左端にそろえられる
   （幅を固定して中央寄せにすると、線がコピーより内側にずれてしまう）。 */
.hero_copy {
  position: absolute;
  top: 52%;
  left: 0;
  display: grid;
  justify-content: center; /* PC / SP とも画面中央に配置 */
  transform: translateY(-50%);
  width: 100%;
}
@media screen and (max-width: 767px) {
  .hero_copy {
    top: 54%;
    padding-right: 1.6rem;
    padding-left: 1.6rem;
  }
}

.hero_copy_text {
  font-family: "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 7.2rem;
  line-height: 7.7rem;
  color: #ffffff;
  text-shadow: 0 0 1.5rem rgba(0, 0, 0, 0.25); /* 写真の上でも読めるようにドロップシャドウ */
  white-space: nowrap;
}
@media screen and (max-width: 767px) {
  .hero_copy_text {
    font-size: 2.4rem;
    line-height: 3.2rem;
    text-shadow: 0 0 1rem rgba(0, 0, 0, 0.25);
  }
}

.hero_copy_accent {
  color: #e60012;
}

/* 線の左端はコピーの左端にそろえ、右端は末尾「。」の字面の終わりに合わせて
   少し短くする（カンプの実寸：PC 39.5px / SP 18px ぶん短い）。 */
.hero_copy_line {
  display: block;
  width: calc(100% - 3.95rem);
  height: 0.1rem;
  margin-top: 1.2rem;
  background-color: #ffffff;
  /* 太さは PC / SP とも 1px（カンプの実寸 0.965px）。
     SP だけ 3px にしていたため、線だけが太く見えていた。 */
}
@media screen and (max-width: 767px) {
  .hero_copy_line {
    width: calc(100% - 1.8rem);
    margin-top: 0.8rem;
  }
}

.hero_controls {
  position: absolute;
  right: 0;
  bottom: 8rem;
  display: flex;
  align-items: center;
  gap: 4rem;
}
@media screen and (max-width: 767px) {
  .hero_controls {
    right: 0;
    left: 0;
    bottom: 4rem;
    justify-content: center;
    gap: 4rem;
  }
}

.hero_arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.2rem;
  height: 3.2rem;
  transition: opacity 0.3s ease;
}
.hero_arrow:hover {
  opacity: 0.6;
}
.hero_arrow img {
  display: block;
  width: 1.15rem;
  height: 2.4rem;
}
@media screen and (max-width: 767px) {
  .hero_arrow img {
    width: 1.466rem;
    height: 2.6rem;
  }
}

.hero_dots {
  display: flex;
  align-items: center;
  gap: 4rem; /* 矢印との間隔（.hero_controls）と同値に統一 */
}

.hero_dot {
  display: block;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  transition: background-color 0.3s ease;
}
.hero_dot.is_active {
  background-color: #ffffff;
}
@media screen and (max-width: 767px) {
  .hero_dot {
    width: 1.2rem;
    height: 1.2rem;
  }
}

/* =============================================================
   共通：見出し補助（lead / desc）
   ============================================================= */
.sec_lead {
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 4rem;
  line-height: 5.6rem;
  color: #231815;
}
@media screen and (max-width: 767px) {
  .sec_lead {
    font-size: 3.2rem;
    line-height: 4.8rem;
  }
}

.sec_desc {
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 1.6rem; /* SP も同値のため、SP側の上書きは不要になった */
  line-height: 2.8rem;
  color: #231815;
}

/* =============================================================
   ABOUT
   ============================================================= */
.section_about {
  position: relative; /* ::before（装飾背景）の位置基準 */
  display: block;
  padding-top: 16rem;
  padding-bottom: 8rem;
  /* 装飾背景が画面外へ貼り出すため、横方向のはみ出しだけを切る。
     装飾はセクションの上下へもはみ出すので overflow: hidden は使えない
     （縦まで切れる）。overflow-x: clip なら縦は visible のまま残せる。 */
  overflow-x: clip;
  overflow-y: visible;
}
@media screen and (max-width: 767px) {
  .section_about {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }
}
.section_about {
  /* ---- 装飾背景（画面左端 / ABOUT と WORK の境目にまたがせる） ----
     ・原寸 2247×1896（比率 1 : 0.8438）
     ・z-index: -1 で本文・カルーセルより背面へ回す
       （.section_about は position: relative だが z-index: auto のため
         重なり順のグループを作らず、ページ全体の最背面まで下がる）  */
}
.section_about::before {
  content: "";
  position: absolute;
  bottom: -13rem;
  left: -12rem;
  z-index: -1;
  width: 75rem;
  height: 63.3rem; /* 750 × (1896 / 2247) */
  background-image: url("../img/backimg1.webp");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
  pointer-events: none;
  /* SP は位置・サイズを個別指定。
     left: 22px + width: 380px = 402px で 375px 幅からはみ出すが、
     _common.scss の横スクロール防止（html の overflow-x）で切り落とす。 */
}
@media screen and (max-width: 767px) {
  .section_about::before {
    bottom: -11rem;
    left: 2.2rem;
    width: 38rem;
    height: 32rem;
  }
}

.about_body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6.4rem;
}
@media screen and (max-width: 767px) {
  .about_body {
    flex-direction: column;
    gap: 4rem;
  }
}

.about_text {
  display: flex;
  flex-direction: column;
  gap: 5.6rem;
  /* READ MORE を右端へ寄せる（縦積みフレックス内での横方向の揃え） */
}
.about_text .btn_more {
  align-self: flex-end;
}
@media screen and (max-width: 767px) {
  .about_text {
    gap: 4rem;
    width: 100%;
    /* SP は従来どおり（横幅いっぱい・左揃え） */
  }
  .about_text .btn_more {
    align-self: stretch;
  }
}

.about_text_inner {
  display: flex;
  flex-direction: column;
  gap: 5.6rem;
}
@media screen and (max-width: 767px) {
  .about_text_inner {
    gap: 4rem;
  }
}

/* PC: 右側の画像（484×588） */
.about_img {
  flex-shrink: 0;
  width: 48.4rem;
  aspect-ratio: 484/588;
  overflow: hidden; /* 中の <img> を角丸で切り抜く */
  border-radius: 2rem;
}

/* SP: タイトルとリードの間に入るフル幅画像
   高さ 32rem（= SP 375px 時点で 320px）は SP レイアウトのときだけ効かせる。 */
.about_img_sp {
  width: 100%;
  overflow: hidden;
  border-radius: 2rem;
}
@media screen and (max-width: 767px) {
  .about_img_sp {
    height: 32rem;
  }
}

/* =============================================================
   WORK
   ============================================================= */
.section_work {
  display: block;
  padding-top: 8rem;
  padding-bottom: 8rem;
  /* .work_body::before の装飾背景が画面右外へ大きく貼り出すため、
     はみ出し分をここで切り落として横スクロールが出ないようにする。
     （.work_carousel は 100vw ちょうどなので影響なし）

     ※ overflow: hidden にすると縦方向まで切れてしまい、
       セクションの上下へはみ出した装飾背景が途中で断ち切られる。
       overflow-x: clip なら横だけを切り、縦は visible のまま残せる。 */
  overflow-x: clip;
  overflow-y: visible;
}

/* 上部：自動スクロールカルーセル（全幅ブリード） */
.work_carousel {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-bottom: 8rem;
  overflow: hidden;
}
@media screen and (max-width: 767px) {
  .work_carousel {
    margin-bottom: 4rem;
  }
}

.work_carousel_track {
  display: flex;
  align-items: center;
  gap: 3.6rem;
  width: -moz-max-content;
  width: max-content;
  animation: work_scroll 60s linear infinite;
}
@media screen and (max-width: 767px) {
  .work_carousel_track {
    gap: 1.6rem;
    animation-duration: 40s;
  }
}

.work_slide {
  flex-shrink: 0;
  width: 48rem;
  height: 32rem;
  border-radius: 2rem;
  overflow: hidden;
}
@media screen and (max-width: 767px) {
  .work_slide {
    width: 28rem;
    height: 18.7rem;
    border-radius: 1.2rem;
  }
}

@keyframes work_scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
/* 下部：写真グループ + テキスト */
.work_body {
  position: relative; /* ::before（装飾背景）の位置基準 */
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 4rem;
}
@media screen and (max-width: 767px) {
  .work_body {
    flex-direction: column;
    align-items: stretch;
    gap: 4rem;
  }
}
.work_body {
  /* ---- 装飾背景（右端） ----
     ・原寸 4272×2253（比率 1 : 0.5274）
     ・position: absolute のためフレックスアイテムにはならず、
       写真・テキストの並びには影響しない
     ・z-index: -1 で本文より背面へ回す
       （.work_body は position: relative だが z-index: auto のため
         重なり順のグループを作らず、ページ全体の最背面まで下がる）  */
}
.work_body::before {
  content: "";
  position: absolute;
  top: 34%;
  right: -78rem; /* .inner（最大1200px）の右端が基準。画面外へ大きく貼り出す */
  z-index: -1;
  width: 142rem;
  height: 74.9rem; /* 1420 × (2253 / 4272) */
  transform: translateY(-50%);
  background-image: url("../img/backimg2.webp");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: contain;
  pointer-events: none;
  /* SP は位置・サイズを個別指定 */
}
@media screen and (max-width: 767px) {
  .work_body::before {
    top: 110%;
    right: -11.5rem;
    width: 65rem;
    height: 34rem;
  }
}

.work_photos {
  position: relative;
  flex-shrink: 0;
  width: 64.4rem;
  height: 55rem;
}
@media screen and (max-width: 767px) {
  .work_photos {
    width: 100%;
    height: auto;
    aspect-ratio: 343/293;
  }
}

.work_photo {
  position: absolute;
  border-radius: 0.8rem;
  overflow: hidden;
}

.work_photo_01 {
  top: 0;
  left: 0;
  width: 51.4rem;
  aspect-ratio: 514/385;
}
@media screen and (max-width: 767px) {
  .work_photo_01 {
    width: 79.9%;
  }
}

.work_photo_02 {
  top: 6.5rem;
  left: 32.3rem;
  width: 32.1rem;
  aspect-ratio: 321/385;
}
@media screen and (max-width: 767px) {
  .work_photo_02 {
    top: 12%;
    left: 50.1%;
    width: 49.9%;
  }
}

.work_photo_03 {
  top: 31.9rem;
  left: 12rem;
  width: 30.8rem;
  aspect-ratio: 308/231;
}
@media screen and (max-width: 767px) {
  .work_photo_03 {
    top: 58%;
    left: 18.7%;
    width: 47.8%;
  }
}

.work_text {
  display: flex;
  flex-direction: column;
  width: 52.3rem;
  gap: 5.6rem;
  /* READ MORE を右端へ寄せる（縦積みフレックス内での横方向の揃え） */
}
.work_text .btn_more {
  align-self: flex-end;
}
@media screen and (max-width: 767px) {
  .work_text {
    width: 100%;
    gap: 4rem;
    /* SP は従来どおり（横幅いっぱい・左揃え） */
  }
  .work_text .btn_more {
    align-self: stretch;
  }
}

.work_text_inner {
  display: flex;
  flex-direction: column;
  gap: 5.6rem;
}
@media screen and (max-width: 767px) {
  /* SP は他の縦積み（.about_text_inner / .work_text など）と同じ 40px に揃える */
  .work_text_inner {
    gap: 4rem;
  }
}

/* =============================================================
   INTERVIEW
   ============================================================= */
.section_interview {
  position: relative; /* ::before（装飾背景）の位置基準 */
  display: block;
  padding-top: 8rem;
  padding-bottom: 8rem;
  /* 装飾背景が画面外へ貼り出すため、横方向のはみ出しだけを切る。
     装飾はセクションの上下へもはみ出すので overflow: hidden は使えない
     （縦まで切れる）。overflow-x: clip なら縦は visible のまま残せる。 */
  overflow-x: clip;
  overflow-y: visible;
}
@media screen and (max-width: 767px) {
  .section_interview {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }
}
.section_interview {
  /* ---- 装飾背景（右端） ----
     ・原寸 4083×2304（比率 1 : 0.5643）。表示サイズは 1360×767。
     ・画面右へ 310px 分はみ出した見た目にしたいが、要素自体をはみ出させると
       横スクロールが発生する（親で隠す方法は overflow-x: clip 頼みになり
       Safari 16 未満で効かない）。そこで
         要素幅 = 1360 - 310 = 1050px（画面内に収まる幅）
         背景画像 = 1360px で描いて左端に寄せる
       とし、はみ出す 310px を「背景のはみ出し」として要素の箱で切る。
       見た目は同じまま、要素は一切画面外に出ない。
     ・z-index: -1 で本文より背面へ回す
       （position: relative だが z-index: auto のため重なり順のグループを
         作らず、ページ全体の最背面まで下がる）  */
}
.section_interview::before {
  content: "";
  position: absolute;
  top: 13%;
  right: 0;
  z-index: -1;
  width: 105rem; /* 1360 - 310（画面外へ出したい分） */
  height: 76.7rem; /* 1360 × (2304 / 4083) */
  transform: translateY(-50%);
  background-image: url("../img/backimg3.webp");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 136rem 76.7rem; /* 実際に見せたい大きさ */
  pointer-events: none;
  /* SP は位置・サイズを個別指定。
     箱は背景と同じ 970×541 にする（背景は箱の外へは描かれないため、
     箱を小さくすると right のマイナス指定で画面外に出て見えなくなる）。
     画面右へ大きくはみ出すが、_common.scss の横スクロール防止
     （html の overflow-x）で切り落とされる。 */
}
@media screen and (max-width: 767px) {
  .section_interview::before {
    top: 12%;
    right: -125%;
    width: 97rem;
    height: 54.1rem;
    background-size: 97rem 54.1rem;
  }
}

.interview_head {
  display: flex;
  flex-direction: column;
  gap: 3.2rem;
  margin-bottom: 6.4rem;
}
@media screen and (max-width: 767px) {
  .interview_head {
    gap: 2.4rem;
    margin-bottom: 4rem;
  }
}

/* ------- PC: 写真カルーセル ------- */
/* 親（.section_interview）が既に全幅なので 100vw の全幅ブリードは不要。
   100vw は縦スクロールバーの幅を含むため、指定すると body より数px広くなり
   横スクロールの原因になる。100% なら常に body 幅と一致する。 */
.interview_carousel {
  position: relative;
  width: 100%;
  margin-bottom: 6.4rem;
  overflow: hidden; /* 画面外のスライドを隠す */
}

/* 中央カットの高さ。トラックの高さもこの値で固定する。
   固定しないと、スライド中に「縮む側」と「大きくなる側」が中間で
   どちらも 366px になり、トラックの高さが一瞬凹んで
   下の READ MORE が上にずれてしまうため。 */
/* トラックは全カットを横一列に並べ、JS が translateX で中央の1枚を
   画面中央に合わせる。左右の余りはループ用クローンで埋まる。 */
.interview_track {
  display: flex;
  align-items: center;
  width: -moz-max-content;
  width: max-content;
  height: 41.3rem; /* スライド中に高さが変動しないよう固定 */
  gap: 3.6rem;
  padding-right: 2.4rem;
  padding-left: 2.4rem;
  will-change: transform;
  /* ▼スライドの速さはここで調整する。
     main.js は この transition-duration を読み取って動くため、
     JS 側の修正は不要（下の .interview_item と同じ値に揃えること）。 */
  transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1);
  /* ループ位置を戻すときだけアニメーションを切る（JSが一時付与） */
}
.interview_track.is_no_anim {
  transition: none;
}

/* 「人を知る」の該当インタビューへのリンク（<a>）。
   中の <picture> を枠いっぱいに広げて、これまでと同じ見え方にする。 */
.interview_item {
  display: block;
  flex-shrink: 0;
  width: 48rem;
  height: 32rem;
  border-radius: 2rem;
  overflow: hidden;
  /* 中央に来た1枚が大きくなる動きを、トラックの移動と同じ長さ・
     同じイージングで補間して一体に見せる（上の .interview_track と同値） */
  transition: width 1s cubic-bezier(0.22, 1, 0.36, 1), height 1s cubic-bezier(0.22, 1, 0.36, 1);
}
.interview_item picture {
  display: block;
  width: 100%;
  height: 100%;
}
.interview_item.is_center {
  width: 62rem;
  height: 41.3rem;
}

/* 視差効果を減らす設定の環境では、動きを付けずに切り替える */
@media (prefers-reduced-motion: reduce) {
  .interview_track,
  .interview_item {
    transition: none;
  }
}
.interview_arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  transition: opacity 0.3s ease;
}
.interview_arrow:hover {
  opacity: 0.7;
}
.interview_arrow img {
  display: block;
  width: 4rem;
  height: 4rem;
}

.interview_arrow_prev {
  left: 12rem;
}

.interview_arrow_next {
  right: 12rem;
  /* ボタン画像（slider-btn.webp）は左向きの1枚だけなので、
     「次へ」は左右反転して使う。
     ※ボタン自体には translateY(-50%) が掛かっているため、
       反転は <img> 側に当てて打ち消し合わないようにしている。 */
}
.interview_arrow_next img {
  transform: scaleX(-1);
}

/* ------- SP: 縦積みカード ------- */
.interview_list {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  margin-bottom: 4rem;
  /* .sp_only（display: block !important）に打ち消されて
     gap が効かなくなるため取り戻す（.sec_title と同じ理由） */
}
@media screen and (max-width: 767px) {
  .interview_list.sp_only {
    display: flex !important;
  }
}

.interview_card {
  display: flex;
  align-items: stretch;
  gap: 1.6rem;
  height: 16rem;
  border-radius: 2rem;
  background-color: #ffffff;
  box-shadow: 0 0.4rem 0.4rem rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

.interview_card_photo {
  flex-shrink: 0;
  width: 20rem;
  height: 16rem;
  border-radius: 2rem 0 0 2rem;
  overflow: hidden;
}

/* SP専用（.interview_list.sp_only 内でのみ描画されるためSP指定は不要） */
.interview_card_body {
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* カード下端に寄せる */
  /* 仕切り線をカードの右端まで引くため、写真の右の余りを埋める */
  flex: 1;
  min-width: 0;
  gap: 0;
  padding-right: 0.8rem;
  padding-bottom: 0.8rem; /* カード下端からの余白 */
}

.interview_card_name {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
}

.interview_card_name_main {
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 4rem;
  color: #231815;
}

.interview_card_name_sub {
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 2.8rem;
  color: #231815;
}

.interview_card_meta {
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 2.8rem;
  color: #231815;
}

/* 部門のうしろに縦線を置いて職種と仕切る。
   職種は別のブロックなので、縦線のあとで改行される。
   （部門名・職種名が長くても折り返さない形にするため、縦積みにしている） */
.interview_card_dept {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.interview_card_dept::after {
  content: "";
  display: block;
  flex-shrink: 0;
  align-self: center;
  /* 和文は行ボックスの中心より字面が少し下にあるため、
     幾何学的な中央から 0.06em 下げて字面の中心に合わせる（実測で補正） */
  position: relative;
  top: 0.06em;
  width: 0.1rem;
  height: 1em; /* 文字の大きさに追従させる（1.6rem 相当） */
  background-color: #000;
}

.interview_more {
  display: flex;
  justify-content: center;
}

/* =============================================================
   RECRUITMENT
   ============================================================= */
.section_recruitment {
  display: block;
  padding-top: 8rem;
  padding-bottom: 8rem;
  background-color: #f3f3f8;
  border-radius: 8rem 8rem 0 0;
}
@media screen and (max-width: 767px) {
  .section_recruitment {
    padding-top: 8rem;
    padding-bottom: 8rem;
    border-radius: 4rem 4rem 0 0;
  }
}

/* RECRUITMENT の見出しだけ .sec_title を使っていないため、
   同じ「下からフェードイン」を個別に付与している（挙動は .sec_title と同一） */
.recruitment_title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.4rem;
  margin-bottom: 6.4rem;
  opacity: 0;
  transform: translateY(4rem);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.recruitment_title.is_shown {
  opacity: 1;
  transform: translateY(0);
}
.recruitment_title {
  /* 視差効果を減らす設定の環境では最初から表示する */
}
@media (prefers-reduced-motion: reduce) {
  .recruitment_title {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
@media screen and (max-width: 767px) {
  .recruitment_title {
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 1.6rem;
    margin-bottom: 4rem;
  }
}

/* SP用の縦ライン */
.recruitment_line {
  display: none;
}
@media screen and (max-width: 767px) {
  .recruitment_line {
    display: block;
    flex-shrink: 0;
    width: 0.8rem;
    height: 9.6rem; /* 他セクションの .sec_title_line と同じ長さ */
    background-color: #e60012;
    transform: scaleY(0);
    transform-origin: center top;
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  }
}
.recruitment_title.is_shown .recruitment_line {
  transform: scaleY(1);
}
@media (prefers-reduced-motion: reduce) {
  .recruitment_line {
    transform: none;
    transition: none;
  }
}

.recruitment_title_body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.4rem; /* RECRUITMENT（英字）と 採用について（和文）の間隔 */
}
@media screen and (max-width: 767px) {
  .recruitment_title_body {
    align-items: flex-start;
    gap: 0.4rem; /* SP は据え置き */
  }
}

.recruitment_en {
  font-family: "Oswald", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 6.4rem;
  line-height: 6rem;
  letter-spacing: 0.64rem;
  color: #231815;
}
@media screen and (max-width: 767px) {
  .recruitment_en {
    font-size: 4rem;
    line-height: 4.4rem;
    letter-spacing: 0.4rem;
  }
}

.recruitment_ja {
  font-family: "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 2.4rem;
  color: #231815;
}
@media screen and (max-width: 767px) {
  .recruitment_ja {
    font-size: 2rem;
  }
}

/* PC用の横バー */
.recruitment_bar {
  display: block;
  width: 35rem;
  height: 0.8rem;
  background-color: #e60012;
}
@media screen and (max-width: 767px) {
  .recruitment_bar {
    display: none;
  }
}

.recruitment_grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.4rem;
}
@media screen and (max-width: 767px) {
  .recruitment_grid {
    grid-template-columns: 1fr;
    gap: 1.6rem;
  }
}

/* PC: アクセスを2段目右、知人紹介/カムバック/FAQを3段目に明示配置 */
.recruitment_btn:nth-child(6) {
  grid-column: 1;
  grid-row: 3;
}

.recruitment_btn:nth-child(7) {
  grid-column: 2;
  grid-row: 3;
}

.recruitment_btn:nth-child(8) {
  grid-column: 3;
  grid-row: 2;
}

.recruitment_btn:nth-child(9) {
  grid-column: 3;
  grid-row: 3;
}

.recruitment_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 15rem;
  padding: 1.6rem;
  background-color: #ffffff;
  border: 0.2rem solid #f3f3f8;
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 3.6rem;
  color: #231815;
  text-align: center;
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
  /* ホバーで白地 → 赤地、文字は白に反転 */
}
.recruitment_btn:hover {
  background-color: #e60012;
  border-color: #e60012;
  color: #ffffff;
}
@media screen and (max-width: 767px) {
  .recruitment_btn {
    grid-column: 1/-1 !important;
    grid-row: auto !important;
    height: 8rem;
    font-weight: 700;
    font-size: 2rem;
    line-height: 2.8rem;
  }
}

/* =============================================================
   NEWS
   ============================================================= */
.section_news {
  display: block;
  padding-top: 8rem;
  padding-bottom: 16rem;
  background-color: #ffffff;
}
@media screen and (max-width: 767px) {
  .section_news {
    padding-bottom: 8rem;
  }
}

.news_head {
  margin-bottom: 6.4rem;
}
@media screen and (max-width: 767px) {
  .news_head {
    margin-bottom: 4rem;
  }
}

.news_list {
  display: block;
  padding-right: 8rem;
  padding-left: 8rem;
  margin-bottom: 6.4rem;
}
@media screen and (max-width: 767px) {
  .news_list {
    padding-right: 0;
    padding-left: 0;
    margin-bottom: 4rem;
  }
}

/* 罫線はお知らせ一覧ページ（_news.scss）と同じ $c_bluegrey。
   カンプの Line も #ABB8C3 で、$c_grey では薄すぎて見えない。 */
.news_item {
  display: block;
  border-bottom: 0.1rem solid #abb8c3;
}
.news_item:first-child {
  border-top: 0.1rem solid #abb8c3;
}

.news_link {
  display: flex;
  align-items: center;
  gap: 3.2rem;
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
  transition: opacity 0.3s ease;
}
.news_link:hover {
  opacity: 0.6;
}
@media screen and (max-width: 767px) {
  .news_link {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.8rem;
    padding: 1.6rem;
  }
}

.news_meta {
  display: flex;
  align-items: center;
  gap: 3.2rem;
}
@media screen and (max-width: 767px) {
  .news_meta {
    gap: 1.6rem;
  }
}

.news_date {
  flex-shrink: 0;
  width: 16rem;
  font-family: "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 2rem;
  line-height: 8rem;
  color: #231815;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .news_date {
    width: auto;
    line-height: 2.4rem;
    text-align: left;
  }
}

.news_cat {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 12rem;
  padding: 0 1.6rem;
  border-radius: 2rem;
  background-color: #f3f3f8;
  font-family: "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 2.8rem;
  color: #e60012;
}

.news_ttl {
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 2.8rem;
  color: #231815;
}
@media screen and (max-width: 767px) {
  .news_ttl {
    width: 100%;
  }
}

.news_more {
  display: flex;
  justify-content: center;
}

/* =============================================================
   PAGE TOP（右下固定）
   ============================================================= */
.page_top {
  position: fixed;
  right: 1.5rem;
  bottom: 3.2rem;
  z-index: 900;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  width: 4.7rem;
  height: 4.7rem;
  padding: 0.8rem 0.8rem 0.4rem;
  border: 0.1rem solid #e60012;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.8);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.page_top.is_visible {
  opacity: 1;
  visibility: visible;
}
.page_top:hover {
  background-color: #ffffff;
}

.page_top_arrow {
  display: block;
  width: 1.435rem;
  height: 0.8rem;
}

.page_top_text {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: "Oswald", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  color: #e60012;
  line-height: 1;
}

.page_top_text_s {
  font-size: 1rem;
}

.page_top_text_l {
  font-size: 1.2rem;
}

/* =============================================================
   about  … 会社を知る（WordPress: page-about.php 相当 / slug: about）
   ============================================================= */
/* =============================================================
   リード（理念コピー）
   ============================================================= */
.about_lead {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6.4rem;
  padding-top: 16rem;
  padding-bottom: 8rem;
}
@media screen and (max-width: 767px) {
  .about_lead {
    gap: 4rem;
    padding-top: 8rem;
    /* 次の .about_sec が padding-top: 80px を持つため、ここは 0。
       合計で「上のセクションとの余白 80px」になるよう相殺している。 */
    padding-bottom: 0;
    padding-right: 1.6rem;
    padding-left: 1.6rem;
  }
}

.about_lead_ttl {
  font-family: "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 6.4rem;
  line-height: 7.2rem;
  color: #e60012;
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 0.8rem;
}
@media screen and (max-width: 767px) {
  .about_lead_ttl {
    font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
    font-size: 3.2rem;
    line-height: 4.8rem;
    text-underline-offset: 0.6rem;
  }
}

.about_lead_txt {
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 4rem;
  color: #231815;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .about_lead_txt {
    font-size: 1.6rem;
    line-height: 2.8rem;
  }
}

/* =============================================================
   セクション枠
   ============================================================= */
.about_sec {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6.4rem;
  padding-top: 8rem;
  padding-bottom: 8rem;
}
@media screen and (max-width: 767px) {
  .about_sec {
    gap: 4rem;
    padding-right: 1.6rem;
    padding-left: 1.6rem;
  }
}

/* グレー背景のセクション（AWARDS / MEDIA） */
.about_sec_grey {
  background-color: #f3f3f8;
}

/* =============================================================
   ABOUT US（数字で見る）
   -------------------------------------------------------------
   PC / SP で並び順が異なるため、1つのグリッドに配置指定で対応。
   DOM順: 1創業 2世界販売台数 3沿革 4拠点 5累計出荷 6〜17その他
   PC → r1:創業/世界販売台数  r2:拠点/累計出荷  r3:沿革  r4〜:その他
   SP → r1:創業  r2:世界販売台数  r3:沿革  r4:拠点/累計出荷  r5〜:その他
   ============================================================= */
.about_num_grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3.2rem;
  width: 100%;
  max-width: 103.2rem;
}
@media screen and (max-width: 767px) {
  .about_num_grid {
    gap: 1.6rem;
  }
}
.about_num_grid > .about_history {
  grid-column: 1/-1;
}
@media screen and (max-width: 767px) {
  .about_num_grid > .about_num_card {
    order: 3;
  }
  .about_num_grid > .about_history {
    order: 2;
  }
  .about_num_grid > .about_num_card_full {
    order: 1;
    grid-column: 1/-1;
  }
}

.about_num_card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.6rem;
  height: 28rem;
  padding: 2.4rem;
  border: 0.1rem solid #abb8c3;
  border-radius: 2rem;
  background-color: #ffffff;
}
@media screen and (max-width: 767px) {
  .about_num_card {
    gap: 0.8rem;
    height: 12.8rem;
    padding: 1.6rem;
  }
}

/* SP で全幅になるカード（創業 / 世界販売台数） */
@media screen and (max-width: 767px) {
  .about_num_card_full {
    height: 24rem;
  }
}

/* ラベル（小 / 大：PCのみ差がある。SPは22pxで統一） */
.about_num_label {
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 2.8rem;
  color: #231815;
  text-align: center;
}

.about_num_label_lg {
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 3.2rem;
  line-height: 4.8rem;
  color: #231815;
  text-align: center;
}

/* SP は両方 22px に統一（Animaカンプ準拠） */
@media screen and (max-width: 767px) {
  .about_num_label,
  .about_num_label_lg {
    font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
    font-weight: 700;
    font-size: 2.2rem;
    line-height: 3.2rem;
  }
}

/* 数値の行 */
.about_num_value {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.8rem;
}
@media screen and (max-width: 767px) {
  .about_num_value {
    gap: 0.4rem;
  }
}

/* 単位など */
.about_num_unit {
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 3.2rem;
  line-height: 4.8rem;
  color: #231815;
}
@media screen and (max-width: 767px) {
  .about_num_unit {
    font-size: 1.6rem;
    line-height: 2.8rem;
  }
}

/* カウントアップする数字 */
.about_num_count {
  /* --num_lh は line-height と、数字リールの1コマの高さの共通値。
     JS はこの変数を使って帯を動かすため、必ず line-height と同値にする。 */
  --num_lh: 8rem;
  display: inline-block;
  font-family: "Oswald", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 8.14rem;
  line-height: var(--num_lh);
  color: #e60012;
  font-variant-numeric: tabular-nums;
}
@media screen and (max-width: 767px) {
  .about_num_count {
    --num_lh: 4.5rem;
    font-size: 4.07rem;
  }
}

/* 全幅カードの数字は SP で大きい */
@media screen and (max-width: 767px) {
  .about_num_card_full .about_num_count {
    --num_lh: 6.8rem;
    font-size: 6.1rem;
  }
}

/* ------- カウントアップ用の1桁ぶんの窓と帯 -------
   JS が .about_num_count の中に組み立てる。
   窓（.about_num_digit）で1コマだけ見せ、帯（.about_num_reel）を
   上へ動かして数字を進める。高さはすべて --num_lh でそろえるため、
   アニメーション前後で数字の位置がずれない。 */
.about_num_digit {
  position: relative;
  display: inline-block;
  vertical-align: top;
  height: var(--num_lh);
  /* 縦は常に切り抜く。沈み込み・スクロール・行き過ぎのいずれでも、
     1コマぶんの範囲からはみ出した部分は見えない。
     横は切らない。Oswald は数字ごとに幅が違い、回っている最中に
     幅の広い数字（0 など）が窓からはみ出すため、横を切ると欠ける。 */
  overflow-x: visible;
  overflow-y: clip;
}

/* マイナス記号など、回さずに置くだけの文字 */
.about_num_digit_static {
  line-height: var(--num_lh);
}

/* 窓の幅を決めるためだけの、見えない数字（最終的に表示する数字と同じ）。
   これにより、止まったときの文字幅がアニメーション前とまったく同じになる。 */
.about_num_digit_size {
  display: block;
  height: var(--num_lh);
  line-height: var(--num_lh);
  visibility: hidden;
}

/* 0〜9 を縦に並べた帯。窓の中央に置き、上へ動かして数字を進める */
.about_num_reel {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  will-change: transform;
}

.about_num_reel_item {
  display: block;
  height: var(--num_lh);
  line-height: var(--num_lh);
  text-align: center;
}

/* 区切り記号（： / .） */
.about_num_mark {
  font-family: "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 4rem;
  line-height: 5.6rem;
  color: #231815;
}
@media screen and (max-width: 767px) {
  .about_num_mark {
    font-size: 1.6rem;
    line-height: 2.8rem;
  }
}

.about_num_dot {
  font-family: "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 4rem;
  line-height: 5rem;
  color: #e60012;
}
@media screen and (max-width: 767px) {
  .about_num_dot {
    font-size: 1.6rem;
    line-height: 2.8rem;
  }
}

/* 説明文（SPでは小カードは非表示＝HTML側で .pc_only） */
.about_num_desc {
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 2.8rem;
  color: #231815;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .about_num_desc {
    font-size: 1.4rem;
    line-height: 2.4rem;
  }
}

/* =============================================================
   沿革（自動スクロール年表）
   ============================================================= */
.about_history {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 2.4rem;
  height: 32rem;
  padding-top: 1.6rem;
  padding-bottom: 1.6rem;
  border: 0.1rem solid #abb8c3;
  border-radius: 2rem;
  overflow: hidden;
}
@media screen and (max-width: 767px) {
  .about_history {
    gap: 0.8rem;
    height: 24rem;
  }
}

.about_history_ttl {
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 3.2rem;
  line-height: 4.8rem;
  color: #231815;
}
@media screen and (max-width: 767px) {
  .about_history_ttl {
    font-size: 2.2rem;
    line-height: 3.2rem;
  }
}

.about_history_body {
  display: block;
  width: 100%;
  overflow: hidden;
  /* ※ 高さは中身（.about_history_track）に任せる。
       固定するとトラックの border-bottom が切り落とされるため。 */
  /* JSが動きを引き継いだら、掴んで左右に動かせるようにする */
}
.about_history_body.is_js {
  cursor: grab;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  /* 縦のスクロールはページに通し、横方向だけこちらで受け取る */
  -ms-touch-action: pan-y;
      touch-action: pan-y;
}
.about_history_body.is_dragging {
  cursor: grabbing;
}

.about_history_track {
  display: flex;
  align-items: center;
  gap: 3.5rem;
  width: -moz-max-content;
  width: max-content;
  padding-right: 2.4rem;
  padding-left: 2.4rem;
  /* 罫線は項目ではなくトラック側に引く。
     項目に引くと gap: 35px の分だけ線が途切れてしまうため。 */
  border-bottom: 0.1rem solid #000;
  animation: about_history_scroll 180s linear infinite;
  /* JSが動きを引き継いだあとは、CSSアニメーションを止めて
     transform を JS 側に渡す（手動ドラッグと両立させるため）。 */
}
.about_history_track.is_js {
  animation: none;
  will-change: transform;
}
@media screen and (max-width: 767px) {
  .about_history_track {
    animation-duration: 140s;
  }
}

/* ホバー / タッチで停止（Animaメモ：触ると止められるように） */
.about_history_body:hover .about_history_track,
.about_history_track.is_paused {
  animation-play-state: paused;
}

@keyframes about_history_scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
.about_history_item {
  display: flex;
  align-items: center;
  gap: 1.7rem;
  height: 18.5rem;
}
@media screen and (max-width: 767px) {
  .about_history_item {
    height: 16rem;
  }
}

.about_history_line {
  position: relative; /* 上端の黒丸（::before）の基準 */
  display: block;
  flex-shrink: 0;
  width: 0.1rem;
  /* 親（.about_history_item）の内寸に追従させる。
     固定値だと border-bottom の 1px 分だけ下にはみ出すため。 */
  height: 100%;
  background-color: #000;
  /* 線の一番上の黒丸
     線の上端から下方向に描画する（上へはみ出すと
     .about_history_body の overflow: hidden で切れるため）。 */
}
.about_history_line::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  background-color: #000;
}

.about_history_body_txt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.8rem;
}

.about_history_year {
  display: flex;
  align-items: flex-end;
}

.about_history_year_num {
  font-family: "Oswald", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 8rem;
  line-height: 8rem;
  color: #e60012;
}
@media screen and (max-width: 767px) {
  .about_history_year_num {
    font-size: 6.1rem;
    line-height: 6.1rem;
  }
}

.about_history_year_unit {
  font-family: "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 2.8rem;
  color: #231815;
}
@media screen and (max-width: 767px) {
  .about_history_year_unit {
    font-size: 2rem;
    line-height: 2.4rem;
  }
}

.about_history_txt {
  font-family: "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 2.8rem;
  color: #231815;
  white-space: nowrap;
}

/* =============================================================
   AWARDS / MEDIA FEATURES（リスト）
   ============================================================= */
.about_list {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 90.4rem;
}

/* 罫線の太さはカンプどおり PC 2px / SP 1px。
   （pc_about の line ノードは 2px、sp_about の line ノードは 1px。
     SP だけ 2px にしていたため、SP で線が太く見えていた）

   下罫線は項目ではなく「年」と「本文」の各要素が持つ。
   こうすることで gap: 24px の分だけ罫線が途切れ、
   年の下の線と本文の下の線が離れて見える。
   align-items: stretch にして両者の下端（＝罫線の高さ）を揃えている。 */
.about_list_item {
  display: flex;
  align-items: stretch;
  gap: 2.4rem;
  /* 罫線込みで96px。テキストが折り返した場合は伸びるよう min-height にする */
  min-height: 9.6rem;
}
@media screen and (max-width: 767px) {
  .about_list_item {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.8rem;
    padding: 1.6rem 0.8rem;
    /* SP は縦積みのため、罫線を分割せず項目側に1本引く */
    border-bottom: 0.1rem solid #000;
  }
}
.about_list_item:first-child {
  /* PC のみ：分割した罫線の上側。
     SP へ漏らさないよう min-width で閉じている
     （子セレクタの方が詳細度が高く、SP側の打ち消しが効かないため）。 */
}
@media screen and (min-width: 768px) {
  .about_list_item:first-child .about_list_year,
  .about_list_item:first-child .about_list_txt {
    border-top: 0.2rem solid #000;
  }
}
@media screen and (max-width: 767px) {
  .about_list_item:first-child {
    border-top: 0.1rem solid #000;
  }
}

.about_list_year {
  /* stretch で高さいっぱいに伸びるため、中身は flex で中央寄せする */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 16rem;
  border-bottom: 0.2rem solid #000;
  font-family: "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 2rem;
  line-height: 2.8rem;
  color: #231815;
}
@media screen and (max-width: 767px) {
  .about_list_year {
    justify-content: flex-start;
    width: 6.4rem;
    border-bottom: none;
    font-size: 1.6rem;
    line-height: 3.2rem;
  }
}

.about_list_txt {
  flex: 1;
  /* 上下の余白は .about_list_item の min-height: 96px と
     中央寄せが受け持つ。ここで足すと3行の項目だけ
     96pxを超えてしまうため 0 にしている。 */
  display: flex;
  align-items: center;
  padding-top: 0;
  padding-bottom: 0;
  border-bottom: 0.2rem solid #000;
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 2.8rem;
  color: #231815;
}
@media screen and (max-width: 767px) {
  .about_list_txt {
    display: block;
    border-bottom: none;
  }
}

/* 箇条書きの行（PHP側の tb_bullet_html が <br> ごとに分けて出力する）。
   .about_list_txt は PC で display: flex なので、この箱で1つにまとめて
   横並びになるのを防いでいる。 */
.about_list_lines {
  display: block;
  width: 100%;
}

.about_list_line {
  display: block;
}

/* 行頭が「・」や全角スペースの行は、折り返した2行目以降を
   その1文字ぶん右（＝文章の頭）にそろえる。
   「・」も全角スペースも字送りがちょうど1文字ぶんなので、
   rem ではなく em を使うのが正確（文字サイズが変わっても崩れない）。 */
.about_list_line.is_hang {
  padding-left: 1em;
  text-indent: -1em;
}

/* =============================================================
   COMPANY PROFILE（会社概要）
   ============================================================= */
.about_profile {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 78.4rem;
}

.about_profile_row {
  display: flex;
  align-items: stretch;
  gap: 2.4rem;
  margin-bottom: 0;
}
@media screen and (max-width: 767px) {
  .about_profile_row {
    gap: 0.8rem;
    /* 本文が3行になる行は内容が80pxを超えるため min-height にする */
    min-height: 8rem;
    margin-bottom: 0;
  }
}

.about_profile_head {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 16rem;
  min-height: 8rem;
  padding: 0.8rem;
  /* 行間の margin を 0 にしたため、見出しの区切りは白い罫線で表現する */
  border-bottom: 0.1rem solid #fff;
  background-color: #f3f3f8;
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 2.8rem;
  color: #231815;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .about_profile_head {
    width: 10.4rem;
    min-height: 0;
    font-family: "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  }
}

.about_profile_txt {
  display: flex;
  align-items: center;
  flex: 1;
  padding: 2.4rem 1.6rem;
  /* 罫線は上だけ。行間の margin が 0 のため、下罫線も付けると
     上の行の下罫線と下の行の上罫線が隣接して2pxに見えてしまう。
     表の下端は :last-child 側で締める（PC / SP 共通）。 */
  border-top: 0.1rem solid #abb8c3;
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 2.8rem;
  color: #231815;
}
@media screen and (max-width: 767px) {
  .about_profile_txt {
    padding: 0.8rem 0;
  }
}

.about_profile_row:last-child .about_profile_txt {
  border-bottom: 0.1rem solid #abb8c3;
}

/* =============================================================
   FUTURE（描く未来）
   ============================================================= */
.about_future {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6.4rem;
  padding-bottom: 8rem;
  background-color: #f3f3f8;
}

/* 上部の▼装飾 */
.about_future_deco {
  display: block;
  width: 100%;
  height: 12rem;
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.about_future_deco.is_shown {
  transform: scaleY(1);
}
@media (prefers-reduced-motion: reduce) {
  .about_future_deco {
    transform: scaleY(1);
    transition: none;
  }
}
@media screen and (max-width: 767px) {
  .about_future_deco {
    height: auto;
    aspect-ratio: 2.86;
  }
}

.about_future_inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6.4rem;
  width: 100%;
  padding-right: 12rem;
  padding-left: 12rem;
}
@media screen and (max-width: 767px) {
  .about_future_inner {
    gap: 4rem;
    padding-right: 1.6rem;
    padding-left: 1.6rem;
  }
}

.about_future_txt {
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 4rem;
  color: #231815;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .about_future_txt {
    font-size: 1.6rem;
    line-height: 2.8rem;
  }
}

/* ムービー */
.about_movie {
  position: relative;
  display: block;
  width: 100%;
  max-width: 88rem;
  aspect-ratio: 880/538;
  box-shadow: 1rem 1rem 5rem rgba(0, 0, 0, 0.1);
  overflow: hidden;
}
@media screen and (max-width: 767px) {
  .about_movie {
    /* SP は画面幅いっぱい。親（.about_future_inner）の左右パディング
       $side_sp を負のマージンで打ち消す。
       100vw を使わないのは、スクロールバー幅の分だけはみ出して
       横スクロールが発生するのを避けるため。 */
    width: calc(100% + 3.2rem);
    margin-right: -1.6rem;
    margin-left: -1.6rem;
    aspect-ratio: 1.64;
    box-shadow: none;
  }
}

/* =============================================================
   work  … 仕事を知る（WordPress: page-work.php 相当 / slug: work）
   ============================================================= */
/* =============================================================
   ページ上部（見出し / リード / 事業サイクル図 / ムービー）
   ============================================================= */
.work_intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8rem;
  /* 上部の余白は .lower_main の padding-top 160px で確保済み */
}
@media screen and (max-width: 767px) {
  .work_intro {
    gap: 3.2rem;
    padding-top: 8rem;
    padding-bottom: 8rem;
  }
}

.work_intro_lead {
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 4rem;
  color: #231815;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .work_intro_lead {
    font-size: 2.2rem;
    line-height: 3.2rem;
  }
}

.work_intro_body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8rem;
  width: 100%;
}
@media screen and (max-width: 767px) {
  .work_intro_body {
    gap: 3.2rem;
  }
}

/* 事業サイクル図 */
.work_circle {
  display: block;
  width: 55rem;
  height: 55rem;
}
@media screen and (max-width: 767px) {
  .work_circle {
    width: 100%;
    max-width: none;
    height: auto;
    aspect-ratio: 1;
  }
}

/* コーポレートムービー
   デザイン実測（1440px基準・枠 880x538・枠の中心は 720,1395）:
   ・CORPORATE MOVIE … 枠上端から 127px / 水平中央 / Oswald Bold 48px・行間60px・字間2.4px・下線
   ・再生ボタン       … 直径 87px の円 / 枠のちょうど中央
   縦に積んで両方とも水平中央なので、flex で横並びにせず枠基準の絶対配置にする。 */
.work_movie {
  position: relative;
  width: 88rem;
  height: 53.8rem;
  box-shadow: 1rem 1rem 5rem rgba(0, 0, 0, 0.1);
  overflow: hidden;
}
@media screen and (max-width: 767px) {
  .work_movie {
    width: 100%;
    height: auto;
    aspect-ratio: 1.64;
    box-shadow: none;
  }
}

/* 背景画像 */
.work_movie_bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.work_movie_ttl {
  position: absolute;
  top: 12.7rem;
  left: 50%;
  z-index: 1;
  transform: translateX(-50%);
  font-family: "Oswald", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 4.8rem;
  line-height: 6rem;
  letter-spacing: 0.24rem;
  color: #ffffff;
  text-align: center;
  white-space: nowrap;
  -webkit-text-decoration: underline;
  text-decoration: underline;
  text-decoration-thickness: 0.2rem;
  text-underline-offset: 0.6rem;
}
@media screen and (max-width: 767px) {
  .work_movie_ttl {
    top: 1.9rem;
    font-size: 2.4rem;
    line-height: 3.2rem;
    letter-spacing: 0.12rem;
    /* 下線の見え方はSPデザインのまま据え置く（PC用の値を継承させない） */
    text-decoration-thickness: auto;
    text-underline-offset: 0.4rem;
  }
}

/* ムービー内の再生ボタンは共通 .movie_btn（枠の中央に絶対配置）をそのまま使い、
   大きさだけデザインに合わせる。SPは上寄せなので top と大きさを上書きする。 */
.work_movie .movie_btn {
  z-index: 1;
  width: 8.7rem;
  height: 8.7rem;
}
@media screen and (max-width: 767px) {
  .work_movie .movie_btn {
    top: 6.6rem;
    width: 9.7rem;
    height: 9.7rem;
    transform: translateX(-50%);
  }
}

/* =============================================================
   部門ブロック
   ============================================================= */
.work_dept {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8rem;
  padding-top: 16rem;
  padding-bottom: 16rem;
}
@media screen and (max-width: 767px) {
  .work_dept {
    gap: 3.2rem;
    padding: 4rem 1.6rem 16rem;
  }
}

/* SP：部門が続く場合の間隔
   前の部門の padding-bottom 160px ＋ 次の部門の padding-top 40px で 200px 空いてしまうので、
   合計 80px（= 職種どうしの間隔と同じ）になるように前の部門の下余白を詰める。
   最後の部門の下だけはフッターまでの余白なので 160px を保つ。 */
@media screen and (max-width: 767px) {
  .work_dept:not(:last-of-type) {
    padding-bottom: 4rem;
  }
}

/* 部門見出し（赤バー + 部門名 + 罫線）
   左右の余白は下の職種ブロック（.work_job）と同じ値にする。
   以前は max-width で中央寄せしていたため、赤バーの左端が
   職種写真の左端とそろわなかった（画面幅によってずれ方も変わった）。 */
.work_dept_head {
  display: flex;
  align-items: center;
  gap: 4rem;
  width: 100%;
  padding-right: 12rem;
  padding-left: 15rem;
}
@media screen and (max-width: 767px) {
  .work_dept_head {
    gap: 0.8rem;
    padding-right: 0;
    padding-left: 0;
  }
}

/* 見出しの縦バー。見出しが表示領域に入るのと同時に上から下へ伸びる。
   きっかけは .work_dept_head に付く .is_shown をそのまま使う（JS の追加は不要）。 */
.work_dept_bar {
  display: block;
  flex-shrink: 0;
  width: 0.8rem;
  height: 7.2rem;
  background-color: #e60012;
  transform: scaleY(0);
  transform-origin: center top;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
@media screen and (max-width: 767px) {
  .work_dept_bar {
    height: 4.8rem;
  }
}
.work_dept_head.is_shown .work_dept_bar {
  transform: scaleY(1);
}
.work_dept_bar {
  /* 視差効果を減らす設定の環境では最初から表示する */
}
@media (prefers-reduced-motion: reduce) {
  .work_dept_bar {
    transform: none;
    transition: none;
  }
}

.work_dept_name {
  flex-shrink: 0;
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 4rem;
  line-height: 5.6rem;
  color: #231815;
}
@media screen and (max-width: 767px) {
  .work_dept_name {
    font-size: 2.2rem;
    line-height: 3.2rem;
  }
}

.work_dept_line {
  display: block;
  flex: 1;
  height: 0.1rem;
  background-color: #abb8c3;
}

/* =============================================================
   職種ブロック
   ============================================================= */
.work_job {
  display: flex;
  align-items: center;
  gap: 8rem;
  width: 100%;
  padding-right: 12rem;
  padding-left: 15rem;
}
@media screen and (max-width: 767px) {
  .work_job {
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 3.2rem; /* Anima: 写真 → テキスト */
    padding-right: 0;
    padding-left: 0;
  }
}

/* 1440px 未満の PC / タブレットでは左右の余白と間隔を詰めて収める
   （英字見出しは nowrap のため、狭い幅でも溢れないようにする） */
@media screen and (min-width: 768px) and (max-width: 1439px) {
  .work_job {
    gap: 4rem;
    padding-right: 4rem;
    padding-left: 4rem;
  }
  /* 見出しの左右も職種ブロックと同じ値に合わせる（左端をそろえるため） */
  .work_dept_head {
    padding-right: 4rem;
    padding-left: 4rem;
  }
}
/* 職種が続く場合の間隔 */
.work_job + .work_job {
  margin-top: 6.4rem;
  /* SPは親の gap 32px と合わせて 80px にする */
}
@media screen and (max-width: 767px) {
  .work_job + .work_job {
    margin-top: 4.8rem;
  }
}

/* 職種写真の台形シェイプ（PC）
   ・デザインでは 480×640 の枠に対して、右下だけ 74px 内側に寄った台形
     （左辺・上辺はまっすぐ、右辺だけが下に向かって細くなる）
   ・比率で持つので、管理画面からどんな画像をアップロードしても
     object-fit: cover ＋ clip-path で同じ形に切り抜かれる
   ・406 / 480 = 84.5833% */
.work_job_img {
  flex-shrink: 0;
  width: 48rem;
  height: 64rem;
  /* box-shadow は要素の矩形に沿ってしまい clip-path の台形に追従しないため、
     親（picture）に drop-shadow をかけて切り抜き後の輪郭に影を落とす。
     clip-path は filter より後に適用されるので、同じ要素に併用すると影が消える。 */
  filter: drop-shadow(1rem 1rem 5rem rgba(0, 0, 0, 0.1));
}
.work_job_img img {
  clip-path: polygon(0 0, 100% 0, 84.5833% 100%, 0 100%);
}
@media screen and (max-width: 767px) {
  .work_job_img {
    width: 100%;
    height: auto;
    min-height: 0; /* flexアイテムの min-height:auto を無効化して比率を効かせる */
    aspect-ratio: 1.5;
    overflow: hidden;
    filter: none;
    /* SPデザインは切り抜きなしの横長矩形 */
  }
  .work_job_img img {
    clip-path: none;
  }
}

.work_job_body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4rem;
  flex: 1;
  min-width: 0; /* 見出しの nowrap でレイアウトが押し広げられないように */
}
@media screen and (max-width: 767px) {
  .work_job_body {
    align-items: stretch;
    gap: 1.6rem;
    width: 100%;
  }
}

.work_job_ttl {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.6rem;
}
@media screen and (max-width: 767px) {
  .work_job_ttl {
    gap: 0;
  }
}

.work_job_en {
  font-family: "Oswald", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 5.6rem;
  line-height: 5.6rem;
  color: #231815;
  white-space: nowrap;
}
@media screen and (max-width: 767px) {
  .work_job_en {
    font-size: 3.2rem;
    line-height: 5.6rem;
    white-space: normal;
  }
}

.work_job_ja {
  font-family: "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 3.2rem;
  line-height: 3.4rem;
  color: #231815;
  white-space: nowrap;
}
@media screen and (max-width: 767px) {
  .work_job_ja {
    font-size: 2rem;
    line-height: 2.8rem;
    white-space: normal;
  }
}

/* キャッチコピー + ペルソナバッジ */
.work_job_catch_area {
  display: flex;
  align-items: center;
  gap: 4rem;
}
@media screen and (max-width: 767px) {
  .work_job_catch_area {
    gap: 1.6rem;
  }
}

.work_job_catch {
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 4rem;
  color: #231815;
}
@media screen and (max-width: 767px) {
  .work_job_catch {
    font-weight: 700;
    font-size: 1.8rem;
    line-height: 2.8rem;
  }
}

/* 「こんな人に向いています！」バッジ
   グレーの円＋アーチ状の文字は背景の persona_badge.svg が担当し、
   中央の電球イラストだけを <img>（img1.webp）で重ねている。 */
.work_job_badge {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 16rem;
  height: 16rem;
  position: relative;
  background-image: url("../img/persona_badge.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  /* ホバー時はデザイン（persona2 の「クリック」バリアント）どおり色が反転する。
     円 グレー→赤 ／ 円周の文字 黒→白 ／ 電球 黒→白。回転はしない。
     background-image は補間できないので、赤版を重ねて不透明度で入れ替える。 */
}
.work_job_badge::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../img/persona_badge_hover.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.work_job_badge:hover::before, .work_job_badge:focus-visible::before {
  opacity: 1;
}
.work_job_badge {
  /* 電球イラスト。円の内側に収まる高さで、比率は保つ。
     透明背景の黒い線画なので brightness(0) invert(1) で白に転ぶ。 */
}
.work_job_badge img {
  position: relative;
  z-index: 1;
  width: auto;
  height: 52%;
  transition: filter 0.3s ease;
}
.work_job_badge:hover img, .work_job_badge:focus-visible img {
  filter: brightness(0) invert(1);
}
@media screen and (max-width: 767px) {
  .work_job_badge {
    width: 9.6rem;
    height: 9.6rem;
  }
}

.work_job_txt {
  align-self: stretch;
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 2.8rem;
  color: #231815;
  /* SPデザインの「仕事説明文」も 16/28。PCと同じなので上書きしない
     （これまでSPでは非表示だったため 14/26 が入っていた） */
}

/* =============================================================
   サイドタブ（部門への固定ナビ）
   ============================================================= */
.work_tab {
  position: fixed;
  top: 14rem;
  left: 0;
  z-index: 998;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.8rem;
  padding: 1.6rem 1.2rem;
  border-radius: 0 2rem 2rem 0;
  background-color: #f3f3f8;
}
@media screen and (max-width: 767px) {
  .work_tab {
    display: none; /* SPデザイン未支給のため非表示 */
  }
}

/* カンプは左揃え。中央揃えにすると、いちばん長い「・サービス」だけが
   左へはみ出して見え、行頭の「・」がそろわない。 */
.work_tab_item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  font-family: "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 2.8rem;
  color: #231815;
  white-space: nowrap;
  transition: color 0.3s ease;
}
.work_tab_item:hover {
  color: #e60012;
}

/* =============================================================
   more ボタン（SP のみ / 全職種）
   ============================================================= */
.work_more_row {
  display: none;
}
@media screen and (max-width: 767px) {
  .work_more_row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.8rem;
    width: 100%;
    margin-top: -0.8rem; /* body の gap 1.6rem と相殺して Anima の 0.8rem にする */
    padding: 0.8rem 0.8rem 0;
  }
}

/* SP：「こんな人に向いてます！」ボタン
   デザイン（persona2SP）はグレーのピルに文字＋電球アイコン。
   PC は丸いバッジ（.work_job_badge）を使うのでこちらは出さない。
   高さ・文字サイズは隣に並ぶ「社員インタビュー」(.btn_more) と揃えている。 */
.work_job_badge_sp {
  display: none;
}
@media screen and (max-width: 767px) {
  .work_job_badge_sp {
    gap: 1rem;
  }
}
.work_job_badge_sp img {
  display: block;
  width: auto;
  height: 4rem;
}

/* =============================================================
   SP：more を押すと仕事の詳細が開く（アコーディオン）
   -------------------------------------------------------------
   デザイン（sp_work の Frame_work）は「通常」→「クリック」で
   ・仕事説明文
   ・こんな人に向いてます！
   ・社員インタビュー
   の3つが増え、more ボタンは消える。間隔はいずれも 32px。
   親（.work_job_body）の gap が 16px なので、開く要素に 16px 足して 32px にする。
   ============================================================= */
@media screen and (max-width: 767px) {
  .work_job_txt,
  .work_job_badge_sp,
  .work_job_interview {
    display: none;
  }
  .work_job.is_open .work_job_txt,
  .work_job.is_open .work_job_badge_sp,
  .work_job.is_open .work_job_interview {
    margin-top: 1.6rem;
  }
  .work_job.is_open .work_job_txt {
    display: block;
  }
  .work_job.is_open .work_job_badge_sp,
  .work_job.is_open .work_job_interview {
    display: flex;
    align-self: center;
  }
  .work_job.is_open {
    /* 開いたら more は消える（デザインの「クリック」バリアントに合わせる） */
  }
  .work_job.is_open .work_more_row {
    display: none;
  }
}
/* =============================================================
   people  … 人を知る（WordPress: page-people.php 相当 / slug: people）
   -------------------------------------------------------------
   デザイン: pc_people / sp_people
   ・パソコン … 左に縦書きの「部門｜職種」と正面写真（400×560）、
                右は高さ640pxの枠の中だけがスクロールする本文
   ・スマホ   … 写真・部門｜職種・氏名・赤い見出しまでを出し、
                more（赤い円）を押すと続きが開く
   ============================================================= */
/* =============================================================
   ページ上部（見出し / リード / 社員サムネイル）
   ============================================================= */
.people_intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8rem;
  /* 上部の余白は .lower_main の padding-top 160px で確保済み */
}
@media screen and (max-width: 767px) {
  .people_intro {
    gap: 3.2rem;
    padding: 8rem 1.6rem;
  }
}

.people_intro_lead {
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 4rem;
  color: #231815;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .people_intro_lead {
    font-size: 2.2rem;
    line-height: 3.2rem;
  }
}

/* ------- 社員サムネイル（5名横並び / SPは非表示） -------
   デザイン: 写真200×308 → 氏名 → 部門｜職種（2行）。カード全体420px */
.people_list {
  display: flex;
  /* 部門・職種の文字数が違ってもサムネイルの上端が揃うよう、上寄せにする */
  align-items: flex-start;
  gap: 2.4rem;
  /* SPデザインでは上部の一覧が無く、各インタビューが一覧を兼ねる */
}
@media screen and (max-width: 767px) {
  .people_list {
    display: none;
  }
}

.people_card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.8rem;
  width: 20rem;
}

.people_card_img {
  display: block;
  flex-shrink: 0; /* カードの縦フレックス内で押し潰されないようにする */
  width: 100%;
  height: 30.8rem;
  /* 中の <img> は object-fit: cover のため、角丸を効かせるには
     ラッパー側で overflow: hidden が必要 */
  border-radius: 2rem;
  overflow: hidden;
}

/* 氏名と「さん」は文字サイズが違うが、デザインでは上下中央でそろっている */
.people_card_name {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.people_card_name_main {
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 4rem;
  color: #231815;
}

.people_card_name_sub {
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 2.8rem;
  color: #231815;
}

/* 「開発部門｜」／「商品開発」の2行 */
.people_card_meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 2.8rem;
  color: #231815;
}

/* =============================================================
   インタビュー本体
   ============================================================= */
.people_item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7.2rem;
  padding-top: 8rem;
  /* 最後のブロックのみ下にも余白 */
}
.people_item:last-of-type {
  padding-bottom: 8rem;
}
.people_item {
  /* SP：カンプ（sp_people）では区切り線の上下がどちらも 48px。
     以前は「上に80px・下に8px」と偏っていて、線と写真がくっついて見えていた。
     ・padding-top 48px … 前の項目の写真下 → 線
     ・gap 48px        … 線 → 次の項目の写真上
     下の余白は次の項目の padding-top が担うので 0 にする。 */
}
@media screen and (max-width: 767px) {
  .people_item {
    gap: 4.8rem;
    padding: 4.8rem 1.6rem 0;
    /* 最後の項目だけフッターまでの余白を持つ（カンプの space ブロック 96px） */
  }
  .people_item:last-of-type {
    padding-bottom: 9.6rem;
  }
}

/* SP：1つ目は上の区切り線なし（デザインは項目「間」のみ線） */
@media screen and (max-width: 767px) {
  .people_intro + .people_item {
    padding-top: 0.8rem;
  }
  .people_intro + .people_item .people_line {
    display: none;
  }
}

/* 上部の区切り線（デザイン: 1200px） */
.people_line {
  display: block;
  width: 100%;
  max-width: 120rem;
  height: 0.1rem;
  background-color: #abb8c3;
}

.people_body {
  display: flex;
  align-items: flex-start;
  gap: 7.2rem;
}
@media screen and (max-width: 767px) {
  .people_body {
    flex-direction: column;
    gap: 0.8rem;
    width: 100%;
  }
}

/* ------- 左：縦書きの「部門｜職種」＋ 正面写真 ------- */
.people_left {
  display: flex;
  align-items: flex-start;
  gap: 3.2rem;
}
@media screen and (max-width: 767px) {
  .people_left {
    gap: 0;
    width: 100%;
  }
}

/* 縦書きの見出しブロック（デザイン: 66×192）。
   中の2つは重ならないよう絶対配置で置く。文字数が多いと下に伸びるが、
   文字送りを --dept-step（inc/people.php が計算）で詰めて写真の高さに収める。 */
.people_side {
  position: relative;
  flex-shrink: 0;
  width: 6.6rem;
  height: 19.2rem;
}

/* 縦書きでは line-height が「列の幅」、文字の送りは letter-spacing で決まる。
   デザインは 32px の文字を 48px 間隔で並べているので、その差を字間で作る。
   ・列の幅は文字と同じ 3.2rem にして、左端をデザインどおり 0 にそろえる
   ・折り返さないよう white-space: nowrap（親の高さで折り返してしまうため）
   ・文字送り（--dept-step）は文字数から inc/people.php が計算し、
     長い部門名でも写真の高さ（56rem）に収まるようにしている */
.people_side_dept {
  position: absolute;
  top: 0;
  left: 0;
  width: 3.2rem;
  writing-mode: vertical-rl;
  font-feature-settings: "vrt2" 1; /* 全角の「｜」などを縦組みの字形にする */
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 3.2rem;
  line-height: 3.2rem;
  letter-spacing: calc(var(--dept-step, 4.8rem) - 3.2rem);
  color: #231815;
  white-space: nowrap;
}

.people_side_name {
  /* 90度回転した縦組み（レイアウト幅は行の高さ分だけ確保される） */
  position: absolute;
  top: 1.1rem;
  left: 3.8rem;
  writing-mode: vertical-rl;
  text-orientation: sideways;
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 2.8rem;
  color: #231815;
  white-space: nowrap;
}

.people_main {
  display: block;
  flex-shrink: 0;
  width: 40rem;
  height: 56rem;
  border-radius: 2rem;
  overflow: hidden;
}
@media screen and (max-width: 767px) {
  .people_main {
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 1.5;
    /* 縦長の写真を横長に切るので、中央だと頭が切れる。上寄せで顔を残す */
  }
  .people_main img {
    -o-object-position: center top;
    object-position: center top;
  }
}

/* ------- 右：インタビュー本文 -------
   デザイン: 幅552px（本文480 ＋ 間隔32 ＋ スクロールバー40）・高さ640px。
   本文が長いのでこの枠の中だけがスクロールする。 */
.people_right {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3.2rem;
  width: 55.2rem;
  height: 64rem;
  /* 右端の 0.8rem はスクロールバーが占める。本文の幅をカンプどおり
     48rem に保つため、余白はその 0.8rem を引いた値にしている。 */
  padding-right: 6.4rem;
  overflow-y: auto;
  /* 中でスクロールし切ったときにページ側が動かないようにする */
  overscroll-behavior: contain;
}
.people_right::-webkit-scrollbar {
  width: 0.8rem;
}
.people_right::-webkit-scrollbar-track {
  border-radius: 0.4rem;
  background-color: #f3f3f8;
}
.people_right::-webkit-scrollbar-thumb {
  border-radius: 0.4rem;
  background-color: #e60012;
}
.people_right {
  /* SP は枠の中でスクロールさせず、そのまま縦に伸ばす */
}
@media screen and (max-width: 767px) {
  .people_right {
    gap: 0.8rem;
    width: 100%;
    height: auto;
    padding-right: 0;
    overflow: visible;
  }
}

/* Firefox は ::-webkit-scrollbar に対応していないので、標準プロパティで指定する。
   ※ Chrome / Safari では scrollbar-width・scrollbar-color を書くと
     上の ::-webkit-scrollbar の指定が丸ごと無効になり、macOS の
     「スクロール中だけ出てくる」細いバーに戻ってしまう。
     そのため ::-webkit-scrollbar が使えないブラウザにだけ当てる。 */
@supports not selector(::-webkit-scrollbar) {
  .people_right {
    scrollbar-width: thin;
    scrollbar-color: #e60012 #f3f3f8;
  }
}

/* 赤い大きな見出し（本文の先頭と、本文の途中の区切り） */
.people_head {
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 3.2rem;
  line-height: 4.8rem;
  color: #e60012;
}
@media screen and (max-width: 767px) {
  .people_head {
    font-size: 2rem;
    line-height: 3.2rem;
  }
}

/* リード文（——ではじまる導入） */
.people_lead {
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 2.8rem;
  color: #231815;
  text-align: justify;
}

/* ご紹介（上下が赤い線で挟まれた囲み） */
.people_profile {
  width: 100%;
  padding: 0.8rem 0;
  border-top: 0.1rem solid #e60012;
  border-bottom: 0.1rem solid #e60012;
}

.people_profile_txt {
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 2.8rem;
  color: #231815;
  text-align: justify;
}

/* 本文（リード〜質問と回答）。SPは more で開閉する部分。
   開いたときの max-height の実値は main.js が中身の高さから設定する
   （auto ではトランジションが効かないため）。 */
.people_detail {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3.2rem;
  width: 100%;
}
@media screen and (max-width: 767px) {
  .people_detail {
    /* カンプ（sp_people）は本文まわりの間隔がどれも 24px。
       リード文とご紹介の赤線のあいだが 16px だと詰まって見える。 */
    gap: 2.4rem;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.4s ease, opacity 0.3s ease;
    /* 赤い見出し → リード文 も 24px。.people_body の gap が 8px なので、
       差の 16px を先頭の子に持たせる。
       ※ padding-top では駄目。max-height: 0 でも padding は潰れないため、
         閉じているときに 16px ぶん余分に空いてしまう。
         子の margin なら overflow: hidden で一緒に隠れる。 */
  }
  .people_detail > :first-child {
    margin-top: 1.6rem;
  }
}

@media screen and (max-width: 767px) {
  .people_item.is_open .people_detail {
    opacity: 1;
  }
}

/* more ボタンの矢印は開くと上向きになる */
.people_item.is_open .people_more_btn .more_btn_icon {
  transform: rotate(180deg);
}

/* 質問と回答のひとかたまり */
.people_block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.6rem;
  width: 100%;
}

/* 質問（赤い縦棒つき） */
.people_q {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  width: 100%;
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 2rem;
  line-height: 2.8rem;
  color: #231815;
}
.people_q::before {
  content: "";
  flex-shrink: 0;
  width: 0.8rem;
  height: 3.2rem;
  background-color: #e60012;
}
@media screen and (max-width: 767px) {
  .people_q {
    font-size: 1.8rem;
  }
}

.people_a {
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 2.8rem;
  color: #231815;
  text-align: justify;
}

/* 本文の途中に入る横長写真（デザイン: 480×320）
   縦並びのフレックスの中では、aspect-ratio だけだと高さが 0 になってしまう
   （flex-basis が中身から計算されるため）。flex: none で自前の高さを使わせる。 */
.people_photo {
  display: block;
  flex: none;
  width: 100%;
  height: 32rem;
  border-radius: 2rem;
  overflow: hidden;
}
@media screen and (max-width: 767px) {
  .people_photo {
    height: auto;
    min-height: 0;
    aspect-ratio: 1.5;
  }
}

/* =============================================================
   SP：写真の下の行（部門｜職種 / 氏名 / more ボタン）
   デザイン: 343×76（文字ブロック263 ＋ more 56×56）
   ============================================================= */
.people_sp_info {
  display: none;
}
@media screen and (max-width: 767px) {
  .people_sp_info {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    width: 100%;
  }
}

.people_sp_text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.8rem;
  flex: 1;
  min-width: 0;
}

.people_sp_dept {
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 4rem;
  color: #231815;
}

.people_sp_name {
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 2.8rem;
  color: #231815;
}

.people_more_btn {
  flex-shrink: 0;
}

/* =============================================================
   career  … 働く環境を知る（WP: page-career.php 相当 / slug: career）
   ============================================================= */
/* =============================================================
   共通：セクション
   ============================================================= */
.career_intro_head {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* 下の余白は各セクション（.career_sec）の padding-top 80px が担う */
}
@media screen and (max-width: 767px) {
  .career_intro_head {
    /* カンプ（sp_career）はヘッダーの下に 80px の空きがある。
       他の下層ページ（work / people / culture）も最初のセクションが
       同じ 80px を持っており、このページだけ抜けていた。 */
    padding-top: 8rem;
    /* 見出しから「入社後の流れ」までは 120px。下の .career_sec が 80px を
       持っているので、足りない 40px をここで足す。
       2つ目以降のセクションは区切り線からの 80px のままにしたいので、
       .career_sec 側の値は変えない。 */
    padding-bottom: 4rem;
    padding-right: 1.6rem;
    padding-left: 1.6rem;
  }
}

.career_sec {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6.4rem;
  padding-top: 8rem;
  padding-bottom: 8rem;
}
@media screen and (max-width: 767px) {
  .career_sec {
    gap: 3.2rem;
    /* 上のセクションとの余白（相殺せず、この値がそのまま効く） */
    padding-top: 8rem;
    padding-bottom: 12rem;
    padding-right: 1.6rem;
    padding-left: 1.6rem;
  }
}
.career_sec {
  /* 最後のセクションはフッター手前に余白を足す（Anima: content padding-bottom 80） */
}
.career_sec:last-of-type {
  padding-bottom: 16rem;
}
@media screen and (max-width: 767px) {
  .career_sec:last-of-type {
    padding-bottom: 11.2rem;
  }
}
.career_sec {
  /* 区切り線（.career_line）を挟まずセクションが連続する場合
     （キャリアアップ → 福利厚生）の SP の余白を 80px に揃える。
     そのままだと上の padding-bottom 120px + 下の padding-top 80px = 200px に
     なるため、両側を相殺して合計 80px にする。PC は従来どおり。 */
}
@media screen and (max-width: 767px) {
  .career_sec:has(+ .career_sec) {
    padding-bottom: 8rem;
  }
}
@media screen and (max-width: 767px) {
  .career_sec + .career_sec {
    padding-top: 0;
  }
}
.career_sec {
  /* 区切り線（.career_line）を挟む場合（入社後の流れ → キャリアアップ）。
     そのままだと 120px + 線1px + 80px = 201px になるため、
     線の上下を 40px ずつに相殺して余白の合計を 80px にする。PC は従来どおり。 */
}
@media screen and (max-width: 767px) {
  .career_sec:has(+ .career_line) {
    padding-bottom: 4rem;
  }
}
@media screen and (max-width: 767px) {
  .career_line + .career_sec {
    padding-top: 4rem;
  }
}

.career_sec_ttl {
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 4rem;
  line-height: 5.6rem;
  color: #231815;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .career_sec_ttl {
    font-size: 3.2rem;
    line-height: 4.4rem;
  }
}

/* セクション間の区切り線 */
.career_line {
  display: block;
  width: 100%;
  max-width: 120rem;
  height: 0.1rem;
  margin-right: auto;
  margin-left: auto;
  background-color: #abb8c3;
}

/* =============================================================
   入社後の流れ
   ============================================================= */
.career_steps {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4rem;
  width: 100%;
  max-width: 108.2rem;
}
@media screen and (max-width: 767px) {
  .career_steps {
    align-items: center;
    gap: 4rem;
  }
}

.career_step {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4rem;
  width: 100%;
  /* SP は円を上・カードを下にした縦積み */
}
@media screen and (max-width: 767px) {
  .career_step {
    flex-direction: column;
    align-items: center;
    gap: 2.4rem;
    width: 34.3rem;
    max-width: 100%;
  }
}
.career_step {
  /* 円と円をつなぐ縦線（次の円に隠れる長さ） */
}
.career_step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: calc(50% + 10rem);
  left: 10rem;
  z-index: 0;
  width: 0.2rem;
  margin-left: -0.1rem;
  height: 20rem;
  background-color: #abb8c3;
  /* SP は縦積みのため、円の下端から次の円の上端までを中央で1本につなぐ。
     間にあるカード（.career_step_body）は z-index で前面に出して線を隠す。
     160px = SPの円の高さ / 40px = .career_steps の gap
     → height = (ステップ全体の高さ - 160px) + 40px */
}
@media screen and (max-width: 767px) {
  .career_step:not(:last-child)::after {
    top: 16rem;
    left: 50%;
    height: calc(100% - 12rem);
  }
}

/* 番号の円 */
.career_step_num {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20rem;
  height: 20rem;
  border: 0.1rem solid #abb8c3;
  border-radius: 50%;
  background-color: #ffffff;
}
@media screen and (max-width: 767px) {
  .career_step_num {
    width: 16rem;
    height: 16rem;
  }
}

.career_step_no {
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 4rem;
  line-height: 5.6rem;
  color: #231815;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .career_step_no {
    font-size: 4rem;
    line-height: 5.6rem;
  }
}

.career_step_target {
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 4rem;
  color: #231815;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .career_step_target {
    font-size: 2.4rem;
    line-height: 4rem;
  }
}

/* 内容カード */
.career_step_body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  flex: 1;
  min-width: 0;
  padding: 2.4rem;
  border-radius: 2rem;
  background-color: #f3f3f8;
}
@media screen and (max-width: 767px) {
  .career_step_body {
    /* 円と円をつなぐ縦線（.career_step::after）はカードの裏を通るため、
       カードを前面に置いて線が上を横切らないようにする */
    position: relative;
    z-index: 1;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: 2.4rem;
    text-align: center;
  }
}

.career_step_ttl {
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 3.2rem;
  line-height: 4.8rem;
  color: #231815;
}
@media screen and (max-width: 767px) {
  .career_step_ttl {
    /* カード（.career_step_body）が align-items: center のため、
       stretch させないと左寄せが見た目に効かない */
    align-self: stretch;
    font-size: 2.4rem;
    line-height: 4rem;
    text-align: left;
  }
}

.career_step_sub {
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 4rem;
  color: #231815;
}
@media screen and (max-width: 767px) {
  .career_step_sub {
    /* カード（.career_step_body）が align-items: center のため、
       stretch させないと左寄せが見た目に効かない */
    align-self: stretch;
    font-size: 1.8rem;
    line-height: 2.8rem;
    /* 「-5%」は文字サイズ比の指定のため em で表現（18px × -0.05 = -0.9px） */
    letter-spacing: -0.05em;
    text-align: left;
  }
}

.career_step_txt {
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 2.8rem;
  color: #231815;
}
@media screen and (max-width: 767px) {
  .career_step_txt {
    /* カード（.career_step_body）が align-items: center のため、
       stretch させないと左寄せが見た目に効かない */
    align-self: stretch;
    font-size: 1.6rem;
    line-height: 2.8rem;
    /* 「-5%」は文字サイズ比の指定のため em で表現（16px × -0.05 = -0.8px） */
    letter-spacing: -0.05em;
    text-align: left;
  }
}

/* =============================================================
   キャリアアップ
   ============================================================= */
.career_map {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3.2rem;
}
@media screen and (max-width: 767px) {
  .career_map {
    align-items: center;
    /* 区切り線（.career_map_row_intro の border-bottom）の下側の余白も兼ねる */
    gap: 6.4rem;
    width: 100%;
  }
}

.career_map_row {
  display: flex;
  align-items: flex-start;
  gap: 1.6rem;
}
@media screen and (max-width: 767px) {
  .career_map_row {
    flex-direction: column;
    align-items: center;
    /* 区切り線の下側の余白（線は .career_group 側が持つ） */
    gap: 6.4rem;
    width: 100%;
  }
}

/* 1行目（リード文 + 1グループ） */
.career_map_row_intro {
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
@media screen and (max-width: 767px) {
  .career_map_row_intro {
    gap: 4rem;
  }
}

.career_map_lead {
  flex-shrink: 1;
  padding-right: 5.6rem;
  padding-left: 5.6rem;
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 4rem;
  color: #231815;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .career_map_lead {
    padding-right: 0;
    padding-left: 0;
    font-size: 2rem;
    line-height: 2.8rem;
  }
}

/* 1グループ（イラスト + 矢印 + キャリアの階段） */
.career_group {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  gap: 3.2rem;
  height: 20rem;
  /* SP は縦積み：イラスト＋ラベル → 矢印(縦) → ピル(横並び) */
}
@media screen and (max-width: 767px) {
  .career_group {
    position: relative; /* 区切り線（::after）の基準 */
    flex-direction: column;
    gap: 0;
    height: auto;
    width: 100%;
    /* 線の上側の余白。下側は行 / .career_map の gap: 64px が受け持つ */
    padding-bottom: 6.4rem;
    /* キャリアパスごとの区切り線。
       border-bottom だと要素の幅と同じになってしまうため、
       幅を独立して指定できる疑似要素で描く。 */
  }
  .career_group::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 26rem;
    max-width: 100%;
    height: 0.1rem;
    background-color: #abb8c3;
  }
}

.career_persona {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex-shrink: 0;
  width: 20rem;
  height: 20rem;
  padding-bottom: 3.2rem;
}

.career_persona_img {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.career_persona_label {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 12rem;
  height: 4rem;
  padding: 0.8rem;
  border: 0.1rem solid #abb8c3;
  border-radius: 1rem;
  background-color: #ffffff;
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 2.8rem;
  color: #231815;
  white-space: nowrap;
}

/* 階段（矢印 + ピル） */
.career_flow {
  position: relative;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  /* SP は矢印を縦にしてピルの上に重ねる（縦フロー） */
}
@media screen and (max-width: 767px) {
  .career_flow {
    padding-top: 8rem;
  }
}

/* フロー図の画像に矢印が含まれている場合。
   装飾の矢印を置かないため、SP の矢印用スペースも不要になる。 */
@media screen and (max-width: 767px) {
  .career_flow_noarrow {
    padding-top: 0;
  }
}

.career_arrow {
  position: absolute;
  top: 50%;
  left: 3.2rem;
  z-index: 0;
  width: 24.1rem;
  height: 8.7rem;
  transform: translateY(-50%);
  /* SP：横向き矢印はPC用。SP専用の下向き矢印に差し替える */
}

/* SP用の下向き矢印 */
@media screen and (max-width: 767px) {
  .career_arrow_sp {
    position: absolute;
    top: 0;
    left: 50%;
    width: 6.5rem;
    height: 8rem;
    transform: translateX(-50%);
  }
}

/* キャリアフローの画像エリア
   -------------------------------------------------------------
   以前は縦書きのピル（.career_pill）をテキストで並べていたが、
   画像1枚を差し込む方式に変更した。
   幅は旧レイアウトと同じ 308px / SP 236px を確保し、
   高さは画像の縦横比に従う。 */
.career_pills {
  position: relative;
  z-index: 1;
  display: block;
  width: 30.8rem;
}
@media screen and (max-width: 767px) {
  .career_pills {
    width: 23.6rem;
  }
}

.career_pills_img {
  display: block;
  width: 100%;
  height: auto;
}

/* =============================================================
   福利厚生
   ============================================================= */
.career_welfare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 48rem));
  gap: 2.4rem;
}
@media screen and (max-width: 767px) {
  .career_welfare {
    grid-template-columns: 1fr;
    gap: 1.6rem;
    width: 100%;
  }
}

.career_welfare_item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  padding: 3.2rem 1.6rem;
  border: 0.1rem solid #abb8c3;
  border-radius: 2rem;
}
@media screen and (max-width: 767px) {
  .career_welfare_item {
    padding: 1.6rem 0;
  }
}

.career_welfare_ttl {
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 4rem;
  color: #231815;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .career_welfare_ttl {
    font-size: 2rem;
    line-height: 3.2rem;
  }
}

/* 見出しに添える補足（（時間単位）など） */
.career_welfare_ttl_sub {
  display: block;
  font-size: 1.6rem;
  line-height: 2.8rem;
}

.career_welfare_txt {
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 2.8rem;
  color: #231815;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .career_welfare_txt {
    font-size: 1.4rem;
    line-height: 2.4rem;
  }
}

/* =============================================================
   requirements  … 採用について／募集要項
   （WordPress: page-requirements.php 相当 / slug: requirements）
   ============================================================= */
/* =============================================================
   上部（写真カルーセル + 見出し + 部門アコーディオン）
   ============================================================= */
.recruit_top {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8rem;
  padding-bottom: 8rem;
}
@media screen and (max-width: 767px) {
  .recruit_top {
    gap: 8rem;
    padding-bottom: 8rem;
  }
}

/* ------- 写真カルーセル（自動スクロール） ------- */
.recruit_carousel {
  position: relative;
  width: 100%;
  height: 56rem;
  overflow: hidden;
}
@media screen and (max-width: 767px) {
  .recruit_carousel {
    height: 33.6rem;
  }
}

.recruit_carousel_track {
  display: flex;
  align-items: flex-start;
  gap: 3.6rem;
  width: -moz-max-content;
  width: max-content;
  padding-left: 3.6rem;
  animation: recruit_carousel_scroll 40s linear infinite;
  /* Animaメモ：自動スクロールもっとゆっくりにしたい */
}
.recruit_carousel_track:hover {
  animation-play-state: paused;
}
@media screen and (max-width: 767px) {
  .recruit_carousel_track {
    gap: 2.16rem;
    padding-left: 2.16rem;
  }
}

@keyframes recruit_carousel_scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
/* 1枚おきに上に80pxずらす（Animaの img-wrapper padding-top:80） */
.recruit_slide {
  flex-shrink: 0;
  width: 32rem;
  height: 48rem;
  border-radius: 2rem;
  overflow: hidden;
}
@media screen and (max-width: 767px) {
  .recruit_slide {
    width: 19.2rem;
    height: 28.8rem;
    border-radius: 1.2rem;
  }
}

.recruit_slide_offset {
  margin-top: 8rem;
}
@media screen and (max-width: 767px) {
  .recruit_slide_offset {
    margin-top: 4.8rem;
  }
}

/* ------- 見出し ------- */
.recruit_head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.4rem;
}
@media screen and (max-width: 767px) {
  .recruit_head {
    gap: 1.6rem;
  }
}

.recruit_head_body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
}

.recruit_head_en {
  font-family: "Oswald", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 6.4rem;
  line-height: 6.4rem;
  letter-spacing: 0.64rem;
  color: #231815;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .recruit_head_en {
    font-size: 4rem;
    line-height: 4.4rem;
    letter-spacing: 0.1rem;
  }
}

.recruit_head_ja {
  font-family: "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 3.2rem;
  color: #231815;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .recruit_head_ja {
    font-size: 2rem;
    line-height: 2.8rem;
  }
}

/* ------- 部門アコーディオン ------- */
.recruit_depts {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8rem;
  width: 100%;
  max-width: 123.2rem;
}
@media screen and (max-width: 767px) {
  .recruit_depts {
    gap: 4rem;
    padding-right: 1.6rem;
    padding-left: 1.6rem;
  }
}

.recruit_dept {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3.2rem;
  width: 100%;
}
@media screen and (max-width: 767px) {
  .recruit_dept {
    gap: 1.6rem;
  }
}

/* 部門見出し（赤バー + 名前） */
.recruit_dept_head {
  display: flex;
  align-items: center;
  gap: 4rem;
  width: 100%;
  padding-left: 4rem;
}
@media screen and (max-width: 767px) {
  .recruit_dept_head {
    gap: 1.6rem;
    padding-left: 0;
  }
}

.recruit_dept_bar {
  display: block;
  flex-shrink: 0;
  width: 0.8rem;
  height: 7.2rem;
  background-color: #e60012;
  transform: scaleY(0);
  transform-origin: center top;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
@media screen and (max-width: 767px) {
  .recruit_dept_bar {
    height: 4.8rem;
  }
}
.recruit_dept_head.is_shown .recruit_dept_bar {
  transform: scaleY(1);
}
@media (prefers-reduced-motion: reduce) {
  .recruit_dept_bar {
    transform: none;
    transition: none;
  }
}

.recruit_dept_name {
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 3.2rem;
  line-height: 4.8rem;
  color: #231815;
}
@media screen and (max-width: 767px) {
  .recruit_dept_name {
    font-size: 2.2rem;
    line-height: 3.2rem;
  }
}

/* 職種リスト */
.recruit_jobs {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3.2rem;
  width: 100%;
  max-width: 100rem;
}
@media screen and (max-width: 767px) {
  .recruit_jobs {
    gap: 1.6rem;
  }
}

/* アコーディオン（1職種） */
.recruit_job {
  width: 100%;
  border: 0.1rem solid #abb8c3;
  border-radius: 0.5rem;
  background-color: #ffffff;
  overflow: hidden;
}

.recruit_job_head {
  display: flex;
  align-items: center;
  gap: 3rem;
  width: 100%;
  min-height: 8rem;
  padding: 2rem 3.2rem;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}
@media screen and (max-width: 767px) {
  .recruit_job_head {
    gap: 1.6rem;
    min-height: 8rem;
    padding: 2rem 2.4rem;
  }
}

.recruit_job_name {
  flex: 1;
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 4rem;
  color: #231815;
}
@media screen and (max-width: 767px) {
  .recruit_job_name {
    font-size: 2rem;
    line-height: 2.8rem;
  }
}

.recruit_job_icon {
  flex-shrink: 0;
  width: 2.4rem;
  height: 1.15rem;
  transition: transform 0.3s ease;
}
.recruit_job.is_open .recruit_job_icon {
  transform: rotate(180deg);
}

/* 開閉する中身（初期は閉じる） */
.recruit_job_body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}
.recruit_job.is_open .recruit_job_body {
  grid-template-rows: 1fr;
}

.recruit_job_body_inner {
  overflow: hidden;
}

.recruit_job_body_content {
  padding: 0 3.2rem 2.4rem;
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 2.8rem;
  color: #231815;
}
@media screen and (max-width: 767px) {
  .recruit_job_body_content {
    padding: 0 2.4rem 2.4rem;
  }
}

/* 開いた中身：項目 / 内容の一覧
   -------------------------------------------------------------
   項目名（dt）と内容（dd）を1行ずつ罫線で区切る。
   <dl> 直下を <div> で1行にまとめる書き方は HTML5 で認められている。
   罫線は行の border-bottom ＋ 一覧の border-top で引く
   （行ごとに上下両方に引くと境目が 2px になるため）。 */
.recruit_spec {
  display: flex;
  flex-direction: column;
  width: 100%;
  border-top: 0.1rem solid #abb8c3;
}

.recruit_spec_row {
  display: flex;
  align-items: flex-start;
  gap: 3.2rem;
  padding: 1.6rem 0;
  border-bottom: 0.1rem solid #abb8c3;
  /* SP は項目名を上・内容を下にした縦積み（間隔はカンプどおり16px） */
}
@media screen and (max-width: 767px) {
  .recruit_spec_row {
    flex-direction: column;
    gap: 1.6rem;
    padding: 1.6rem 0;
  }
}

/* 「募集なし」の職種は1行だけ。カンプでは下の罫線が無く、
   行の下余白もカード側の 24px だけになる */
.recruit_spec_closed .recruit_spec_row {
  padding-bottom: 0;
  border-bottom: 0;
}

.recruit_spec_ttl {
  flex-shrink: 0;
  width: 16rem;
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 2.8rem;
  color: #231815;
}
@media screen and (max-width: 767px) {
  .recruit_spec_ttl {
    width: auto;
  }
}

.recruit_spec_txt {
  /* min-width: 0 が無いと長い内容で flex アイテムが縮まず、
     カードからはみ出す */
  flex: 1;
  min-width: 0;
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 2.8rem;
  color: #231815;
}
/* 「こんな方を歓迎します」の確認リンク。
   カンプでは下線つきの文字ではなく、グレーの小さなボタン（100×28）。 */
.recruit_spec_link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 10rem;
  height: 2.8rem;
  border-radius: 0.5rem;
  background-color: #f3f3f8;
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 2.8rem;
  color: #231815;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.recruit_spec_link:hover {
  background-color: #e60012;
  color: #ffffff;
}

/* 一覧の最後に置く「応募する」ボタン */
.recruit_spec_action {
  display: flex;
  justify-content: center;
  padding-top: 2.4rem;
}

.recruit_spec_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32rem;
  height: 5.6rem;
  border-radius: 3rem;
  /* 通常はグレー、ホバーで赤（.btn_more と同じ考え方） */
  background-color: #f3f3f8;
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 2rem;
  line-height: 2.8rem;
  color: #231815;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.recruit_spec_btn:hover {
  background-color: #e60012;
  color: #ffffff;
}
@media screen and (max-width: 767px) {
  .recruit_spec_btn {
    width: 100%;
    max-width: 32rem;
  }
}

/* =============================================================
   SPECIAL RECRUITMENT（特別採用）
   ============================================================= */
.recruit_special {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6.4rem;
  padding: 8rem 12rem;
  background-color: #f3f3f8;
}
@media screen and (max-width: 767px) {
  .recruit_special {
    gap: 3.2rem;
    padding: 8rem 1.6rem;
  }
}

.recruit_special_list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4rem;
  width: 100%;
  max-width: 100rem;
}
@media screen and (max-width: 767px) {
  .recruit_special_list {
    gap: 1.6rem;
  }
}

.recruit_special_btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  width: 100%;
  height: 16rem;
  padding: 1.6rem;
  border: 0.1rem solid #abb8c3;
  border-radius: 2rem;
  background-color: #ffffff;
  /* カンプのホバー：背景が赤・文字が白になる（枠線はそのまま） */
  transition: background-color 0.3s ease;
}
.recruit_special_btn:hover {
  background-color: #e60012;
}
.recruit_special_btn:hover .recruit_special_ttl,
.recruit_special_btn:hover .recruit_special_txt {
  color: #ffffff;
}
.recruit_special_ttl {
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 4rem;
  color: #231815;
  text-align: center;
  transition: color 0.3s ease;
}
/* カンプでは PC / SP とも 16px・700。SP だけ改行位置が入る */
.recruit_special_txt {
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 2.8rem;
  color: #231815;
  text-align: center;
  transition: color 0.3s ease;
}

/* =============================================================
   FAQ
   ============================================================= */
.recruit_faq {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6.4rem;
  padding: 8rem 12rem 16rem;
}
@media screen and (max-width: 767px) {
  .recruit_faq {
    gap: 4rem;
    padding: 8rem 1.6rem;
  }
}

.recruit_faq_main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5.6rem;
  width: 100%;
  max-width: 100rem;
}
@media screen and (max-width: 767px) {
  .recruit_faq_main {
    gap: 3.2rem;
    max-width: 34.3rem;
  }
}

/* タブ群 */
.recruit_faq_tabs {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
  width: 100%;
}

.recruit_faq_tabrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6.4rem;
}
@media screen and (max-width: 767px) {
  .recruit_faq_tabrow {
    gap: 0.8rem;
    width: 100%;
  }
}

/* カテゴリタブ（応募・選考 など） */
.recruit_faq_tab {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3.2rem;
  padding: 0 1.6rem;
  border-radius: 5rem;
  background-color: #f3f3f8;
  font-family: "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 2.8rem;
  color: #231815;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.recruit_faq_tab.is_active {
  background-color: #e60012;
  color: #ffffff;
}
.recruit_faq_tab {
  /* SP はタブが2行テキストになり高さ64px、行内で均等配置 */
}
@media screen and (max-width: 767px) {
  .recruit_faq_tab {
    flex: 1;
    height: 6.4rem;
    padding: 0.8rem 1rem;
    border-radius: 1rem;
    line-height: 2.2rem;
    text-align: center;
  }
}

/* 職種タブの見出し行（線に挟まれた「職種別のよくある質問」） */
.recruit_faq_subhead {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  width: 100%;
  max-width: 67.2rem;
}
@media screen and (max-width: 767px) {
  .recruit_faq_subhead {
    max-width: none;
  }
}

.recruit_faq_subhead_txt {
  flex-shrink: 0;
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 2.8rem;
  color: #231815;
}

.recruit_faq_subhead_line {
  flex: 1;
  height: 0.1rem;
  background-color: #abb8c3;
}

/* 回答リスト
   カテゴリーごとに1つずつ置き、タブで選ばれたものだけを表示する。
   （切り替えは main.js が .is_active を付け替えて行う） */
.recruit_faq_list {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 2.4rem;
  width: 100%;
}
.recruit_faq_list.is_active {
  display: flex;
}

.recruit_faq_cat_ttl {
  width: 100%;
  padding: 0 3.2rem;
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 4rem;
  color: #e60012;
}
@media screen and (max-width: 767px) {
  .recruit_faq_cat_ttl {
    padding: 0;
    font-size: 2rem;
    line-height: 3.2rem;
  }
}

.recruit_faq_items {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.recruit_faq_item {
  width: 100%;
  border-bottom: 0.1rem solid #abb8c3;
}
.recruit_faq_item:first-child {
  border-top: 0.1rem solid #abb8c3;
}

/* 4問目以降。カンプは3問＋「もっと見る」なので、最初は隠しておく */
.recruit_faq_item_rest {
  display: none;
}
.recruit_faq_items.is_expanded .recruit_faq_item_rest {
  display: block;
}

.recruit_faq_q {
  display: flex;
  align-items: center;
  gap: 3.2rem;
  width: 100%;
  padding: 2.6rem 3.2rem;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}
@media screen and (max-width: 767px) {
  .recruit_faq_q {
    gap: 1.6rem;
    padding: 2rem 0.8rem;
  }
}

.recruit_faq_q_txt {
  flex: 1;
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 2.8rem;
  color: #231815;
}

.recruit_faq_q_icon {
  flex-shrink: 0;
  width: 2.559rem;
  height: 2.4rem;
  transition: transform 0.3s ease;
}
.recruit_faq_item.is_open .recruit_faq_q_icon {
  transform: rotate(45deg);
}

.recruit_faq_a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}
.recruit_faq_item.is_open .recruit_faq_a {
  grid-template-rows: 1fr;
}

.recruit_faq_a_inner {
  overflow: hidden;
}

.recruit_faq_a_content {
  padding: 0 3.2rem 2.6rem;
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 2.8rem;
  color: #333333;
}
@media screen and (max-width: 767px) {
  .recruit_faq_a_content {
    padding: 0 0.8rem 2rem;
  }
}

/* 質問が1件も無いカテゴリー。原稿が入れば自動で消える */
.recruit_faq_empty {
  width: 100%;
  padding: 0 3.2rem;
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 2.8rem;
  color: #231815;
}
@media screen and (max-width: 767px) {
  .recruit_faq_empty {
    padding: 0;
  }
}

/* もっと見るボタン */
.recruit_faq_more {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32rem;
  height: 5.6rem;
  padding: 0.8rem 6rem;
  border-radius: 3rem;
  background-color: #f3f3f8;
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 2rem;
  line-height: 2.8rem;
  color: #231815;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.recruit_faq_more:hover {
  background-color: rgb(230.1157894737, 230.1157894737, 240.4842105263);
}
/* 全部開いたら用済み。display: flex があるので hidden 属性だけでは消えない */
.recruit_faq_more[hidden] {
  display: none;
}

/* SPECIAL RECRUITMENT の英字見出しは長いため SP では2行で表示
   （カンプ準拠：SPECIAL / RECRUITMENT） */
@media screen and (max-width: 767px) {
  .recruit_special .sec_head_en {
    font-size: 4rem;
    line-height: 4.8rem;
    letter-spacing: 0.1rem;
    white-space: normal;
  }
}
@media screen and (max-width: 767px) {
  .recruit_special .sec_head_en .sp_only {
    display: block;
  }
}

/* =============================================================
   news  … お知らせ 一覧 / 詳細
   （WordPress: archive-news.php / taxonomy-news_cat.php / single-news.php）
   -------------------------------------------------------------
   一覧の1行（日付 / カテゴリ / タイトル）は、カンプ上でトップページと
   同じ Item/news 部品のため、_top.scss の
   .news_item / .news_link / .news_meta / .news_date / .news_cat / .news_ttl
   をそのまま流用している。ここでは一覧ページ固有の枠だけを書く。
   ============================================================= */
/* ------- 一覧ページ全体 ------- */
.news_page {
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media screen and (max-width: 767px) {
  .news_page {
    /* カンプ: ヘッダー64 の下に 80 空けて見出し。
       .lower_main と同じ padding-top を指定しているため、
       ヘッダー分（6.4rem）も足した値を書く。 */
    gap: 3.2rem;
    padding-top: 14.4rem;
  }
}

/* ------- 見出しから下（タブ＋一覧） ------- */
.news_sec {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6.4rem;
  width: 100%;
  padding: 8rem 12rem;
}
@media screen and (max-width: 767px) {
  .news_sec {
    align-items: flex-start;
    padding: 8rem 1.6rem;
  }
}

/* ------- カテゴリ切り替えタブ -------
   カンプでは SP のとき「すべて」だけが1行目、
   残りのカテゴリが2行目に並ぶ。 */
.news_tabs {
  display: flex;
  align-items: flex-start;
  gap: 2.4rem;
}
@media screen and (max-width: 767px) {
  .news_tabs {
    flex-direction: column;
    gap: 0.8rem;
  }
}

.news_tabs_row {
  display: flex;
  align-items: flex-start;
  gap: 2.4rem;
}
@media screen and (max-width: 767px) {
  .news_tabs_row {
    gap: 0.8rem;
  }
}

.news_tab {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16rem;
  padding: 0 1.6rem;
  border-radius: 5rem;
  background-color: #f3f3f8;
  font-family: "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 2.8rem;
  color: #231815;
  text-align: center;
  transition: opacity 0.3s ease;
}
.news_tab:hover {
  opacity: 0.7;
}
.news_tab {
  /* 選択中 */
}
.news_tab.is_current {
  background-color: #e60012;
  color: #ffffff;
}
@media screen and (max-width: 767px) {
  .news_tab {
    /* SP は文字数ぶんの幅 */
    width: auto;
  }
}

/* ------- 一覧本体 ------- */
.news_arc_list {
  width: 100%;
  /* カンプの区切り線は BlueGrey。
     トップページの一覧（_top.scss）とは色が異なるため、
     ここだけ上書きする。 */
}
.news_arc_list .news_item {
  border-color: #abb8c3;
}
.news_arc_list {
  /* SP の日付はカンプでは幅固定。
     （トップページ側は幅なりのため、ここだけ上書きする） */
}
@media screen and (max-width: 767px) {
  .news_arc_list .news_date {
    width: 12rem;
  }
}

/* お知らせが1件も無いとき */
.news_empty {
  padding: 3.2rem 0;
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 2.8rem;
  color: #231815;
}

/* =============================================================
   詳細ページ
   ============================================================= */
.news_single {
  display: flex;
  flex-direction: column;
  gap: 3.2rem;
  padding: 8rem 12rem 16rem;
}
@media screen and (max-width: 767px) {
  .news_single {
    padding: 8rem 1.6rem;
  }
}

/* ------- 日付 / カテゴリ ------- */
.news_single_head {
  display: flex;
  flex-direction: column;
  gap: 3.2rem;
}

.news_single_meta {
  display: flex;
  align-items: center;
  gap: 4rem;
}

.news_single_date {
  font-family: "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 2rem;
  line-height: 2.4rem;
  color: #231815;
}
@media screen and (max-width: 767px) {
  .news_single_date {
    font-size: 1.6rem;
  }
}

/* ------- タイトル ------- */
.news_single_ttl {
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 4rem;
  line-height: 5.6rem;
  color: #231815;
}
@media screen and (max-width: 767px) {
  .news_single_ttl {
    font-size: 2.4rem;
    line-height: 4rem;
  }
}

/* ------- タイトル下の線から下 ------- */
.news_single_body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8rem;
  padding-top: 8rem;
  border-top: 0.1rem solid #abb8c3;
}
@media screen and (max-width: 767px) {
  .news_single_body {
    gap: 4rem;
    padding-top: 4rem;
  }
}

/* ------- 本文（管理画面のエディタで入力した内容） ------- */
.news_single_txt {
  width: 100%;
  padding: 0.8rem 0;
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 2.8rem;
  color: #231815;
}
.news_single_txt p {
  margin-bottom: 2.8rem;
}
.news_single_txt p:last-child {
  margin-bottom: 0;
}
.news_single_txt h2,
.news_single_txt h3,
.news_single_txt h4 {
  margin-bottom: 1.6rem;
  font-weight: 700;
  font-size: 2rem;
  line-height: 2.8rem;
}
.news_single_txt ul,
.news_single_txt ol {
  margin-bottom: 2.8rem;
  padding-left: 2.4rem;
}
.news_single_txt li {
  list-style: inherit;
}
.news_single_txt ul {
  list-style: disc;
}
.news_single_txt ol {
  list-style: decimal;
}
.news_single_txt a {
  color: #e60012;
  text-decoration: underline;
}
.news_single_txt img {
  max-width: 100%;
  height: auto;
}

/* ------- 前後のお知らせ ------- */
.news_nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
@media screen and (max-width: 767px) {
  .news_nav {
    flex-direction: column;
    align-items: stretch;
    gap: 1.6rem;
    padding: 1.6rem 0;
    border-top: 0.1rem solid #abb8c3;
    border-bottom: 0.1rem solid #abb8c3;
  }
}

.news_nav_prev,
.news_nav_next {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  transition: opacity 0.3s ease;
}
.news_nav_prev:hover,
.news_nav_next:hover {
  opacity: 0.6;
}
@media screen and (max-width: 767px) {
  .news_nav_prev,
  .news_nav_next {
    /* SP はタイトルが折り返すため、カンプどおり矢印を1行目に合わせる */
    align-items: flex-start;
  }
}

.news_nav_next {
  justify-content: flex-end;
}

/* 反対側に記事が無いときの空枠。
   PC は左右の位置を保つために場所だけ取り、SP は消す。 */
.news_nav_empty {
  display: block;
}
@media screen and (max-width: 767px) {
  .news_nav_empty {
    display: none;
  }
}

.news_nav_ttl {
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 2.8rem;
  color: #231815;
}

.news_nav_icon {
  flex-shrink: 0;
  width: 3.2rem;
  height: 2.6rem;
}

@media screen and (max-width: 767px) {
  /* SP は上下・間に区切り線が入る（カンプ準拠）。
     間の線は前後どちらの記事もあるときだけ引く。 */
  .news_nav_prev:not(.news_nav_empty) + .news_nav_next:not(.news_nav_empty) {
    padding-top: 1.6rem;
    border-top: 0.1rem solid #abb8c3;
  }
}
/* ------- 「お知らせ一覧へ」ボタン -------
   共通の .btn_more（320×56）を流用。日本語なので書体だけ差し替える。 */
.btn_more_ja {
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
}
@media screen and (max-width: 767px) {
  .btn_more_ja {
    /* トップの READ MORE は SP で小さくなるが、
       お知らせのカンプは SP でも 320×56 / 20px のまま。 */
    height: 5.6rem;
    font-size: 2rem;
  }
}

/* =============================================================
   culture  … こんな方を歓迎します／働く価値観
   （WordPress: page-culture.php 相当 / slug: culture）
   ============================================================= */
/* =============================================================
   見出しセクション（下の余白は Anima の content gap 80 相当）
   ============================================================= */
.culture_head_sec {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-bottom: 8rem;
}
@media screen and (max-width: 767px) {
  .culture_head_sec {
    padding-top: 8rem;
    /* 下の .culture_values が padding-top: 80px を持つため、
       こちらは 0 にして相殺し、見出しとリード文の余白を 80px に揃える */
    padding-bottom: 0;
    padding-right: 1.6rem;
    padding-left: 1.6rem;
    /* SP は下の価値観セクションと地続きの帯に見せる */
    background-color: #f3f3f8;
  }
}

/* =============================================================
   価値観セクション（極薄グレー背景）
   ============================================================= */
.culture_values {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8rem;
  padding: 8rem 0;
  background-color: #f3f3f8;
}
@media screen and (max-width: 767px) {
  .culture_values {
    gap: 8rem;
    padding: 8rem 1.6rem;
  }
}

.culture_values_lead {
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 4rem;
  color: #231815;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .culture_values_lead {
    padding-right: 0;
    padding-left: 0;
    font-size: 1.6rem;
    line-height: 2.8rem;
  }
}

/* ------- 3つの価値観アイコン（円240px） ------- */
.culture_icons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  /* SP は各アイコン＋説明を縦に積む .culture_items を使う */
}
@media screen and (max-width: 767px) {
  .culture_icons {
    display: none;
  }
}

/* SP専用：アイコン＋ラベル（円内）＋説明1行 */
.culture_items {
  display: none;
}
@media screen and (max-width: 767px) {
  .culture_items {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4rem;
    width: 100%;
  }
}

.culture_item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.4rem;
  width: 100%;
}

.culture_item_txt {
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 2.8rem;
  color: #231815;
  text-align: center;
}

.culture_icon {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  width: 24rem;
  height: 24rem;
  border: 0.5rem solid #abb8c3;
  border-radius: 50%;
  background-color: #ffffff;
}

/* SP：円の中にアイコン（上）＋ラベル（下）を収める */
.culture_item .culture_icon {
  gap: 1.6rem;
}

.culture_icon_img {
  display: block;
  width: 9.6rem;
  height: 9.6rem;
}
@media screen and (max-width: 767px) {
  .culture_icon_img {
    width: 11.9rem;
    height: 11.9rem;
  }
}

.culture_icon_txt {
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 4rem;
  color: #231815;
  text-align: center;
}

/* ------- 価値観の説明（3項目） ------- */
.culture_desc {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  width: 100%;
  max-width: 100rem;
  /* SP は各アイコン直下の短い説明（.culture_item_txt）を使うため非表示 */
}
@media screen and (max-width: 767px) {
  .culture_desc {
    display: none;
  }
}

.culture_desc_item {
  display: flex;
  align-items: center;
  gap: 4rem;
  width: 100%;
  /* 上の項目の「下の罫線」と、この項目の「上の罫線」が隣り合って
     2px に見えてしまうため、1px だけ重ねて 1本に見せる。
     （罫線を display: none で消すと .culture_desc_head の gap 48px も
       一緒に減って見出しの位置がずれるため、この方法をとっている） */
}
.culture_desc_item:not(:first-child) {
  margin-top: -0.1rem;
}
@media screen and (max-width: 767px) {
  .culture_desc_item {
    flex-direction: column;
    align-items: stretch;
    gap: 1.6rem;
  }
}

/* 見出し（左右に罫線を伴う縦組みラベル） */
.culture_desc_head {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  gap: 4.8rem;
  width: 24rem;
}
@media screen and (max-width: 767px) {
  .culture_desc_head {
    flex-direction: row;
    gap: 1.6rem;
    width: 100%;
  }
}

.culture_desc_line {
  display: block;
  width: 24rem;
  height: 0.1rem;
  /* 背景（$c_grey）の上に置く白い罫線 */
  background-color: #ffffff;
}
@media screen and (max-width: 767px) {
  .culture_desc_line {
    flex: 1;
    width: auto;
  }
}

.culture_desc_ttl {
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 4rem;
  color: #231815;
  white-space: nowrap;
}

.culture_desc_txt {
  flex: 1;
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 2.8rem;
  color: #231815;
}
@media screen and (max-width: 767px) {
  .culture_desc_txt {
    font-size: 1.4rem;
    line-height: 2.6rem;
  }
}

/* ▼装飾（グレー背景がV字に切れる） */
/* グレー背景が V 字に切れる装飾
   -------------------------------------------------------------
   以前は culture_wave.svg を <img> で置いていたが、
   スクロールで伸びるアニメーションを付けるため CSS の三角形に変更した。
   ・clip-path で「上辺いっぱい・下の頂点が中央」の三角形を作る
   ・色は上の .culture_values と同じ $c_grey（帯が V 字に続いて見える）
   ・伸びる動きは scaleY。高さは transform では変わらないため、
     アニメーション中も下のセクションがずれない
   ・JS（main.js）が表示領域に入った時点で .is_shown を付ける */
.culture_wave {
  display: block;
  width: 100%;
  height: 12rem;
  background-color: #f3f3f8;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.culture_wave.is_shown {
  transform: scaleY(1);
}
.culture_wave {
  /* 視差効果を減らす設定の環境では最初から表示する */
}
@media (prefers-reduced-motion: reduce) {
  .culture_wave {
    transform: scaleY(1);
    transition: none;
  }
}
.culture_wave {
  /* SP も PC と同じ高さ（幅に応じて縮めない）。
     三角形の傾きは急になるが、V字の見え方を保つため */
}
@media screen and (max-width: 767px) {
  .culture_wave {
    height: 12rem;
  }
}

/* =============================================================
   ペルソナ（あなたはどのタイプ？）
   ============================================================= */
.culture_persona {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 8rem;
  padding-bottom: 16rem;
}
@media screen and (max-width: 767px) {
  .culture_persona {
    /* SP は従来どおり（上は余白なし・下は 80px） */
    padding-top: 0;
    padding-bottom: 8rem;
  }
}

.culture_persona_ttl {
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 4rem;
  line-height: 5.6rem;
  color: #231815;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .culture_persona_ttl {
    font-size: 2.4rem;
    line-height: 3.6rem;
  }
}

/* 一覧（1行 = 5人）。詳細パネルも同じ入れ物に入っている。
   パソコンでは order でパネルを 5 人のうしろに回し、幅 100rem で
   折り返させることで「5人の下にパネルが開く」形にしている。 */
.culture_persona_list {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  column-gap: 0.8rem;
  row-gap: 0; /* 行の間隔はパネル側の margin-top で作る */
  width: 100%;
  /* 見出しとの間隔。パネルを開いたときの間隔（2.4rem）と分けたいので
     親の gap ではなく margin で持つ。 */
  margin-top: 8rem;
}
@media screen and (max-width: 767px) {
  .culture_persona_list {
    flex-direction: column;
    align-items: center;
    row-gap: 0.8rem;
    column-gap: 0;
    margin-top: 2.4rem;
    /* 詳細パネルを画面幅いっぱいに置きたいので、ここでは左右の余白を
       取らない（一覧の項目は幅 29.4rem で中央寄せなので余白は不要、
       パネルの左右 1.6rem は .culture_persona_panel_inner が持つ）。 */
    padding-right: 0;
    padding-left: 0;
  }
}

/* 6人目以降は次の行になる。デザインの項目間（8px）でつなぐ。
   1行ぶんの一覧のすぐ下にその行の詳細パネルが入るので、
   三角（しっぽ）が必ず本人を指す。 */
.culture_persona_list_next {
  margin-top: 0.8rem;
}

.culture_persona_item {
  /* デザイン: 200x200 のイラストに、部署名のボックスを重ねる */
  position: relative;
  order: 0; /* パネル（order: 1）より前に並べる */
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 20rem;
  height: 20rem;
  /* SP：イラストを重ねた横長ボタン */
}
@media screen and (max-width: 767px) {
  .culture_persona_item {
    align-items: flex-end;
    /* ラベル（高さ64px）を項目（高さ80px）の上下中央に置き、
       左に重ねたイラスト（高さ80px）と中心をそろえる */
    justify-content: center;
    width: 29.4rem;
    max-width: 100%;
    height: 8rem;
  }
}

.culture_persona_img {
  position: absolute;
  inset: 0;
  display: block;
  /* SP：ボタンの左端に重ねる（下端そろえ） */
}
@media screen and (max-width: 767px) {
  .culture_persona_img {
    top: auto;
    right: auto;
    bottom: 0;
    left: 0;
    z-index: 1;
    width: 8rem;
    height: 8rem;
  }
}

.culture_persona_label {
  /* デザイン: イラストの下端から 32px の位置に重なる白いボックス（120x40）。
     選択中は赤地・白文字になる。 */
  position: absolute;
  bottom: 3.2rem;
  left: 50%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 12rem;
  height: 4rem;
  padding: 0.8rem;
  border: 0.1rem solid #abb8c3;
  border-radius: 1rem;
  background-color: #ffffff;
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 2.8rem;
  color: #231815;
  white-space: nowrap;
  transform: translateX(-50%);
  transition: background-color 0.3s ease, color 0.3s ease;
  /* SP：横長ボタン（幅240・高64）。イラストと下端そろえ */
}
@media screen and (max-width: 767px) {
  .culture_persona_label {
    position: static;
    z-index: auto;
    width: 24rem;
    height: 6.4rem;
    border-radius: 1.6rem;
    font-size: 2rem;
    line-height: 2.8rem;
    transform: none;
  }
}

/* 選択中（開いている）とホバーは赤地・白文字。
   デザインの「商品開発」バリアントの見た目にそろえている。 */
.culture_persona_item.is_open .culture_persona_label,
.culture_persona_item:hover .culture_persona_label,
.culture_persona_item:focus-visible .culture_persona_label {
  background-color: #e60012;
  color: #ffffff;
}

/* =============================================================
   ペルソナの詳細パネル（押すと下に開く）
   -------------------------------------------------------------
   デザイン: 幅1000px・白地・青灰の1px枠・角丸20px。
   一覧の 24px 下に開き、選択中のペルソナを指す三角が付く。
   スマホは別レイアウト（このファイル末尾の @include sp を参照）。
   ============================================================= */
.culture_persona_panel {
  position: relative;
  order: 1; /* 一覧の5人（order: 0）のうしろへ回して、行の下に開かせる */
  width: 100rem;
  max-width: 100%;
  margin-top: 2.4rem;
  border: 0.1rem solid #abb8c3;
  border-radius: 2rem;
  background-color: #ffffff;
}
.culture_persona_panel[hidden] {
  display: none;
}

/* 選択中のペルソナを指す三角。
   位置は inc/culture.php が --persona-tail（rem）で渡す。
   一覧の1行は中央揃えなので、その行の人数と列番号から求めている。
   三角の下端1pxはパネルの枠線に重ねて、枠線を白で隠している。 */
.culture_persona_tail {
  position: absolute;
  top: -2.15rem;
  left: var(--persona-tail, 5.8rem);
  width: 5.2rem;
  height: 2.25rem;
  background-image: url("../img/culture_persona_tail.svg");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: contain;
}

.culture_persona_panel_inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.4rem;
  padding: 2.4rem 3.2rem;
}

/* 閉じるボタン。× は擬似要素で描く（線の太さと角度を揃えたいため） */
.culture_persona_close {
  position: absolute;
  top: 2.4rem;
  right: 2.9rem;
  z-index: 1;
  width: 4rem;
  height: 4rem;
  border: 0.1rem solid #abb8c3;
  border-radius: 50%;
  background-color: #ffffff;
  transition: background-color 0.3s ease;
}
.culture_persona_close::before, .culture_persona_close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.6rem;
  height: 0.2rem;
  border-radius: 0.1rem;
  background-color: #231815;
}
.culture_persona_close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.culture_persona_close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.culture_persona_close:hover {
  background-color: #f3f3f8;
}

/* 見出し〜イラストまでは 8px 間隔のひとまとまり（デザインの入れ子どおり） */
.culture_persona_panel_head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  width: 100%;
}

.culture_persona_panel_ttl {
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 3.2rem;
  line-height: 4.8rem;
  color: #231815;
  text-align: center;
}

.culture_persona_panel_line {
  width: 80rem;
  max-width: 100%;
  height: 0.1rem;
  background-color: #abb8c3;
}

.culture_persona_panel_catch {
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 4rem;
  color: #231815;
  text-align: center;
}

/* イラストと吹き出しの配置。デザインの座標（550.78x415）をそのまま使う */
.culture_persona_figure {
  position: relative;
  width: 55.08rem;
  max-width: 100%;
  height: 41.5rem;
}

/* イラストは枠の中央に置く。
   デザインでは10タイプそれぞれで枠内の位置が少しずつ違うが、
   これは吹き出しの張り出し方でグループの外形が変わっているためで、
   イラスト自身はどのタイプもパネルの中央付近に置かれている。
   （55.08 − 41.5）÷ 2 = 6.79 */
.culture_persona_figure_img {
  position: absolute;
  top: 0;
  left: 6.79rem;
  display: block;
  width: 41.5rem;
  height: 41.5rem;
}

/* 吹き出し（円）
   ・デザインでは円の大きさが吹き出しごとに違う（78px〜178px）。
     管理画面から文字を書き換えても円からはみ出さないよう、
     直径は文字数から計算した値を inc/culture.php が --bubble-d で渡す。
   ・そのため位置は「左上」ではなく「円の中心」でそろえる
     （大きさが変わっても同じ場所を指したまま前後に広がる）。 */
.culture_persona_bubble {
  position: absolute;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--bubble-d, 12.2rem);
  height: var(--bubble-d, 12.2rem);
  border: 0.1rem solid #abb8c3;
  border-radius: 50%;
  background-color: #ffffff;
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 2.8rem;
  color: #231815;
  text-align: center;
  transform: translate(-50%, -50%);
}

/* 円の中心座標。
   デザインの10タイプぶんの座標を「イラストの左上からの相対値」に直して
   中央値をとったもの（商品開発だけ左右に60pxほど外れているため、
   1タイプの値をそのまま使うと全体が右にずれて文字と重なる）。
   イラストの左端が 6.79rem なので、そこに相対値を足している。 */
.culture_persona_bubble1 {
  top: 12.1rem;
  left: 12.49rem;
}

.culture_persona_bubble2 {
  top: 31.6rem;
  left: 11.19rem;
}

.culture_persona_bubble3 {
  top: 10.6rem;
  left: 44.19rem;
}

.culture_persona_bubble4 {
  top: 33.6rem;
  left: 44.19rem;
}

.culture_persona_bubble5 {
  top: 35.5rem;
  left: 25.79rem;
}

.culture_persona_panel_txt {
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 2.8rem;
  color: #231815;
  text-align: center;
}

.culture_persona_panel_btns {
  display: flex;
  justify-content: center;
  gap: 5.6rem;
}

/* =============================================================
   SP：ペルソナの詳細パネル（デザイン persona1_SP）
   -------------------------------------------------------------
   パソコンとは別のレイアウト。
   ・吹き出しは円ではなく「角丸の帯」。右寄せで縦に積む
   ・イラストは 250×250 で左下。帯がその上に重なる
   ・枠線・角丸・三角・閉じるボタンは無し（デザインどおり）
   ・ボタンは縦積み（280×52）
   数値はデザイン（375px 幅・パネルの内側 343px）から採録。
   ここは .culture_persona_bubble1〜5 より後ろに置く必要がある
   （同じ詳しさの指定なので、後に書いたほうが勝つ）。
   ============================================================= */
@media screen and (max-width: 767px) {
  .culture_persona_panel {
    order: 0; /* 押した本人のすぐ下に開く（DOMの順番どおり） */
    width: 100%;
    /* 一覧の row-gap 0.8rem と合わせて 2.4rem */
    margin-top: 1.6rem;
    border: 0;
    border-radius: 0;
  }
  /* 三角と閉じるボタンはSPデザインに無い */
  .culture_persona_tail,
  .culture_persona_close {
    display: none;
  }
  .culture_persona_panel_inner {
    align-items: stretch;
    gap: 2.4rem;
    padding: 2.4rem 1.6rem 3.2rem;
  }
  .culture_persona_panel_head {
    gap: 1.6rem;
  }
  .culture_persona_panel_ttl {
    font-size: 2.4rem;
    line-height: 4rem;
  }
  .culture_persona_panel_line {
    width: 100%;
  }
  .culture_persona_panel_catch {
    font-size: 1.6rem;
    line-height: 2.8rem;
  }
  /* イラストと帯。
     帯は通常の流れで縦に積み、イラストは左下に絶対配置する。
     下の余白 15rem ＝ イラスト 25rem − 重ねる 10rem なので、
     イラストの上端は必ず「帯の一番下から 10rem 上」に来る
     （デザインの商品開発と同じ重なり方）。 */
  .culture_persona_figure {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.6rem;
    width: 100%;
    height: auto;
    min-height: 25rem;
    padding-bottom: var(--figure-pad, 15rem);
  }
  .culture_persona_figure_img {
    top: auto;
    right: auto;
    bottom: 0;
    left: 0;
    width: 25rem;
    height: 25rem;
  }
  /* 円 → 角丸の帯。並び順は inc/culture.php が幅の広い順に決めている */
  .culture_persona_bubble {
    position: relative;
    top: auto;
    left: auto;
    order: var(--bubble-order, 0);
    width: auto;
    max-width: 100%;
    height: auto;
    padding: 0.8rem 1.6rem;
    border-radius: 1.6rem;
    transform: none;
  }
  /* 本文はデザインでは左右 32px（パネルの 16px ＋ 16px） */
  .culture_persona_panel_txt {
    padding: 0 1.6rem;
  }
  .culture_persona_panel_btns {
    flex-direction: column;
    align-items: center;
    gap: 1.6rem;
  }
  .culture_persona_panel_btns .btn_more {
    max-width: 28rem;
  }
}
/* =============================================================
   access  … 営業所／オフィス（WP: page-access.php 相当 / slug: access）
   ============================================================= */
.access_main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8rem;
  padding-bottom: 16rem;
  /* SP：エリアは境界線で仕切るため gap を詰める */
}
@media screen and (max-width: 767px) {
  .access_main {
    gap: 0;
  }
}

/* SP：見出し・地図と最初のエリアの間の余白 */
@media screen and (max-width: 767px) {
  .access_head,
  .access_mapwrap {
    margin-bottom: 6.4rem;
  }
}

@media screen and (max-width: 767px) {
  .access_mapwrap {
    margin-bottom: 3.2rem;
    padding-right: 0;
    padding-left: 0;
  }
}

/* ------- 見出し ------- */
.access_head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.4rem;
}
@media screen and (max-width: 767px) {
  .access_head {
    gap: 1.6rem;
    margin-top: 3.2rem; /* カンプの見出し位置に合わせる */
  }
}

.access_head_body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
}

.access_head_en {
  font-family: "Oswald", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 6.4rem;
  line-height: 6.4rem;
  letter-spacing: 0.64rem;
  color: #231815;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .access_head_en {
    font-size: 4rem;
    line-height: 4.4rem;
    letter-spacing: 0.2rem;
  }
}

.access_head_ja {
  font-family: "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 2.4rem;
  color: #231815;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .access_head_ja {
    font-size: 1.8rem;
  }
}

/* ------- 地図＋拠点数 ------- */
.access_mapwrap {
  position: relative;
  width: 100%;
  max-width: 113.6rem;
}
@media screen and (max-width: 767px) {
  .access_mapwrap {
    padding-right: 1.6rem;
    padding-left: 1.6rem;
  }
}

.access_map {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1136/623;
  /* SPカンプには全国地図画像が無いため非表示（タイトルのみ表示） */
}
@media screen and (max-width: 767px) {
  .access_map {
    display: none;
  }
}

/* 「全国34拠点／全国に広がるネットワーク」 */
.access_map_ttl {
  position: absolute;
  top: 4rem;
  left: 4rem;
}
@media screen and (max-width: 767px) {
  .access_map_ttl {
    position: static;
    margin-bottom: 2.4rem;
    text-align: center;
  }
}

.access_map_ttl_num {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 3.2rem;
  line-height: 4rem;
  color: #231815;
}
@media screen and (max-width: 767px) {
  .access_map_ttl_num {
    justify-content: center;
  }
}

.access_map_ttl_num strong {
  font-family: "Oswald", "Helvetica Neue", Arial, sans-serif;
  font-size: 4.8rem;
  line-height: 4.8rem;
  color: #e60012;
}

@media screen and (max-width: 767px) {
  .access_map_ttl_num {
    font-size: 2.4rem;
    line-height: 3.2rem;
  }
}

/* ※ 以前は基本値と SP 用が別ブロックに分かれており、SP 用が先に
      書かれていたため後勝ちで 32px のままになっていた。1つにまとめて修正。 */
.access_map_ttl_txt {
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 3.2rem;
  line-height: 4.8rem;
  color: #231815;
}
@media screen and (max-width: 767px) {
  .access_map_ttl_txt {
    font-size: 2.4rem;
    line-height: 3.6rem;
  }
}

/* =============================================================
   エリアごとの拠点リスト
   ============================================================= */
.access_area {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6.4rem;
  width: 100%;
  max-width: 120rem;
  padding-top: 8rem;
}
@media screen and (max-width: 767px) {
  .access_area {
    gap: 0;
    padding-top: 0;
    padding-right: 1.6rem;
    padding-left: 1.6rem;
    border-bottom: 0.1rem solid #abb8c3;
  }
}

/* エリア見出し（赤バー＋名前＋罫線＋マーカー凡例） */
.access_area_head {
  display: flex;
  align-items: center;
  gap: 2.4rem;
  width: 100%;
}
@media screen and (max-width: 767px) {
  .access_area_head {
    gap: 0.8rem;
    padding: 3.2rem 0;
    cursor: pointer;
  }
}

.access_area_bar {
  display: block;
  flex-shrink: 0;
  width: 0.8rem;
  height: 7.2rem;
  background-color: #e60012;
  transform: scaleY(0);
  transform-origin: center top;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
@media screen and (max-width: 767px) {
  .access_area_bar {
    height: 4.8rem;
  }
}
.access_area_head.is_shown .access_area_bar {
  transform: scaleY(1);
}
@media (prefers-reduced-motion: reduce) {
  .access_area_bar {
    transform: none;
    transition: none;
  }
}

.access_area_name {
  flex-shrink: 0;
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 3.2rem;
  line-height: 4.8rem;
  color: #231815;
  white-space: nowrap;
}
@media screen and (max-width: 767px) {
  .access_area_name {
    font-size: 2.2rem;
    line-height: 3.2rem;
  }
}

.access_area_line {
  flex: 1;
  height: 0.1rem;
  background-color: #abb8c3;
}
@media screen and (max-width: 767px) {
  .access_area_line {
    display: none;
  }
}

/* マーカー凡例。以前は見出し（.access_area_head）の中にあったが、
   罫線（.access_area_line）を横幅いっぱいに伸ばすため見出しの外へ出し、
   見出しのすぐ下に右寄せで置いている。
   ・margin-left: auto … 縦積みの .access_area の中で右端へ寄せる
   ・margin-top のマイナス … 罫線（見出しの高さ72pxの中央＝上端から36.5px）の
     下端から18pxの位置に置くための相殺値。
     .access_area の gap 64px + 見出し下端から罫線までの 35.5px - 18px = 81.5px */
.access_area_legend {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-shrink: 0;
  margin-top: -8.15rem;
  margin-left: auto;
  font-family: "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1.6rem;
  color: #231815;
  white-space: nowrap;
  /* SPは開いているエリアだけ凡例を表示 */
}
@media screen and (max-width: 767px) {
  .access_area_legend {
    display: none;
    /* SP は .access_area の gap が 0 のため相殺は不要 */
    margin-top: 0;
    margin-bottom: 1.6rem;
    font-size: 1.2rem;
  }
}

@media screen and (max-width: 767px) {
  .access_area.is_open .access_area_legend {
    display: flex;
  }
}

.access_area_legend img {
  display: block;
  width: 1.6rem;
  height: 2rem;
  /* アイコン画像（本社=img16.webp 108x146 / 他=img18.webp 84x117）は
     枠（16x20）と比率が違うため、引き伸ばさずに収める */
  -o-object-fit: contain;
     object-fit: contain;
}

/* エリア見出しの開閉矢印（SPのみ） */
.access_area_arrow {
  display: none;
}
@media screen and (max-width: 767px) {
  .access_area_arrow {
    display: block;
    flex-shrink: 0;
    width: 2.6rem;
    height: 1.5rem;
    /* 見出しの右端へ寄せて、拠点名（左）と両端に配置する */
    margin-left: auto;
    /* img19.webp（79x44）は枠（26x15）と比率が違うため、
       引き伸ばさずに収める */
    -o-object-fit: contain;
       object-fit: contain;
    transition: transform 0.3s ease;
  }
}

@media screen and (max-width: 767px) {
  .access_area.is_open .access_area_arrow {
    transform: rotate(180deg);
  }
}

/* 拠点カードの2カラムグリッド */
.access_grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6.4rem 4rem;
  width: 100%;
  padding-left: 1.6rem;
  /* SP：1カラム＋アコーディオン開閉 */
}
@media screen and (max-width: 767px) {
  .access_grid {
    display: block;
    padding-left: 0;
    padding-bottom: 0;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.4s ease, padding-bottom 0.4s ease;
  }
}

/* 開いているエリアのグリッドを展開（SP） */
@media screen and (max-width: 767px) {
  .access_area.is_open .access_grid {
    max-height: 800rem;
    padding-bottom: 4rem;
  }
}

/* .access_grid_inner はSPのアコーディオン開閉用ラッパー。
   PCではグリッドを壊さないよう display:contents で透過させる。 */
.access_grid_inner {
  display: contents;
}
@media screen and (max-width: 767px) {
  .access_grid_inner {
    display: flex;
    flex-direction: column;
    gap: 4rem;
  }
}

.access_card {
  display: flex;
  align-items: center;
  gap: 2.4rem;
}
@media screen and (max-width: 767px) {
  .access_card {
    flex-direction: column;
    align-items: stretch;
    gap: 1.6rem;
  }
}

.access_card_body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.8rem;
  flex: 1;
  min-width: 0;
}

.access_card_name {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 2rem;
  line-height: 3.2rem;
  color: #231815;
}
@media screen and (max-width: 767px) {
  .access_card_name {
    font-size: 2.2rem;
    line-height: 3.2rem;
  }
}

/* 主要拠点（赤字＋ピン） */
.access_card_name_main {
  color: #e60012;
}

.access_card_name_pin {
  display: block;
  width: 2.8rem;
  height: 4rem;
  flex-shrink: 0;
  /* img16.webp（108x146）は枠（28x40）と比率が違うため、
     引き伸ばさずに収める */
  -o-object-fit: contain;
     object-fit: contain;
}

.access_card_note {
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 2rem;
  color: #333333;
}

.access_card_addr {
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 2.8rem;
  color: #231815;
}
@media screen and (max-width: 767px) {
  .access_card_addr {
    font-size: 1.4rem;
    line-height: 2.4rem;
  }
}

/* 本社の右に置く画像エリア
   -------------------------------------------------------------
   .access_grid の2列目に入るグリッドアイテム。
   中に <img class="access_photo_img"> を入れると枠いっぱいに表示される。
   画像未挿入のあいだも枠が見えるようにグレーの背景を敷いている。 */
.access_photo {
  display: block;
  width: 56rem;
  max-width: 100%;
  height: 26rem;
  border-radius: 2rem;
  overflow: hidden;
  background-color: #f3f3f8;
  /* SP は幅いっぱい。高さは PC と同じ比率を保つ */
}
@media screen and (max-width: 767px) {
  .access_photo {
    width: 100%;
    height: auto;
    aspect-ratio: 560/260;
  }
}

.access_photo_img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

/* 拠点の地図サムネイル */
/* 各拠点の地図
   -------------------------------------------------------------
   以前はダミー画像（map_thumb.png）だったが、住所で検索した
   Google マップの埋め込み（iframe）に変更した。
   ・API キー不要の `?q=住所&output=embed` 形式
   ・37拠点ぶんあるため loading="lazy" で画面外は読み込まない
   ・角丸は親側の overflow: hidden で効かせる（iframe 自体は角丸にできない） */
.access_card_map {
  display: block;
  flex-shrink: 0;
  width: 24rem;
  height: 16rem;
  border-radius: 0.8rem;
  overflow: hidden;
}
.access_card_map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
@media screen and (max-width: 767px) {
  .access_card_map {
    width: 100%;
    height: auto;
    aspect-ratio: 1.5;
  }
}

/* =============================================================
   左端の固定目次（縦書き）
   ※ Animaコードには無いがカンプに存在するため実装。
   ============================================================= */
/* 仕事を知る（work.html）の左メニュー（.work_tab）と同じデザイン。
   画面左端に固定した、右上・右下だけ角丸のグレーのパネル。
   以前は縦書き（writing-mode: vertical-rl）だったが横書きに変更した。 */
.access_nav {
  position: fixed;
  top: 14rem;
  left: 0;
  z-index: 998;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.8rem;
  padding: 1.6rem 1.2rem;
  border-radius: 0 2rem 2rem 0;
  background-color: #f3f3f8;
}
@media screen and (max-width: 767px) {
  .access_nav {
    display: none; /* SPカンプに無いため非表示 */
  }
}

.access_nav_item {
  /* 「・北海道 / 東北支店」のように2行になる項目があるため、
     行頭の「・」だけを左にぶら下げて、2行目の文字が1行目の文字
     （「・」の右）と同じ位置から始まるようにする。
     text-indent のマイナス分を padding-left で戻す定番の書き方。
     ※ display: flex だと text-indent が効かないので block にしている */
  display: block;
  width: 100%;
  padding-left: 1em;
  text-indent: -1em;
  text-align: left;
  font-family: "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 2.8rem;
  color: #231815;
  white-space: nowrap;
  transition: color 0.3s ease;
}
.access_nav_item:hover {
  color: #e60012;
}

/* =============================================================
   contact  … エントリー（応募フォーム）
   （WordPress: page-contact.php 相当 / slug: contact）
   ※ 実送信は MW WP Form / Contact Form 7 等での実装を想定。
     ここではマークアップと見た目のみ用意。
   ============================================================= */
.contact_main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6.4rem;
  padding-right: 12rem;
  padding-left: 12rem;
}
@media screen and (max-width: 767px) {
  .contact_main {
    gap: 4rem;
    padding-right: 1.6rem;
    padding-left: 1.6rem;
  }
}

/* 見出し */
.contact_head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.4rem;
}
@media screen and (max-width: 767px) {
  .contact_head {
    gap: 1.6rem;
    margin-top: 3.2rem; /* カンプの見出し位置に合わせる */
  }
}

.contact_head_body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
}

.contact_head_en {
  font-family: "Oswald", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 6.4rem;
  line-height: 6.4rem;
  letter-spacing: 0.64rem;
  color: #231815;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .contact_head_en {
    font-size: 4rem;
    line-height: 4.4rem;
    letter-spacing: 0.2rem;
  }
}

.contact_head_ja {
  font-family: "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 2.4rem;
  color: #231815;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .contact_head_ja {
    font-size: 1.8rem;
  }
}

/* =============================================================
   フォーム本体
   ============================================================= */
.contact_form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3.2rem;
  width: 100%;
  max-width: 88rem;
  /* フッター手前の余白。確認画面（.confirm_main）・完了画面（.thanks_main）と
     同じ値にして、フォーム系ページの下余白をそろえている */
  padding-bottom: 16rem;
}

/* リード文（受信設定の案内など） */
/* カンプは PC / SP とも Noto Sans JP Regular 16px / 行間 28px */
.contact_lead {
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 2.8rem;
  color: #231815;
}

.contact_lead a {
  color: #e60012;
  text-decoration: underline;
}

/* 1項目 */
.contact_row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.8rem;
  width: 100%;
}

/* ラベル行（ラベル＋必須バッジ） */
.contact_label {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.contact_label_txt {
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 2.8rem;
  color: #231815;
}

.contact_required {
  display: block;
  width: 3.4rem;
  height: 1.6rem;
}

/* テキスト入力 / セレクト共通の枠 */
.contact_input,
.contact_select {
  display: flex;
  align-items: center;
  width: 100%;
  height: 6.4rem;
  padding: 0 1.6rem;
  border: 0.1rem solid #abb8c3;
  border-radius: 0.4rem;
  background-color: #ffffff;
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 2rem;
  line-height: 2.8rem;
  color: #231815;
}
@media screen and (max-width: 767px) {
  .contact_input,
  .contact_select {
    font-size: 1.6rem;
  }
}
.contact_input::-moz-placeholder, .contact_select::-moz-placeholder {
  color: #abb8c3;
}
.contact_input::placeholder,
.contact_select::placeholder {
  color: #abb8c3;
}
.contact_input:focus,
.contact_select:focus {
  outline: none;
  border-color: #e60012;
}

/* セレクト（プルダウン） */
.contact_select_wrap {
  position: relative;
  width: 100%;
}

.contact_select {
  width: 100%;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
  font-weight: 400;
  color: #abb8c3; /* プレースホルダ状態 */
}
.contact_select:required:valid {
  font-weight: 700;
  color: #231815;
}

.contact_select_wrap::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1.6rem;
  width: 3.2rem;
  height: 2.4rem;
  background: url(../img/icon_select_arrow.svg) no-repeat center/contain;
  transform: translateY(-50%);
  pointer-events: none;
}

/* テキストエリア */
.contact_textarea {
  width: 100%;
  height: 24rem;
  padding: 1.6rem;
  border: 0.1rem solid #abb8c3;
  border-radius: 0.4rem;
  background-color: #ffffff;
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 2rem;
  line-height: 2.8rem;
  color: #231815;
  resize: vertical;
}
@media screen and (max-width: 767px) {
  .contact_textarea {
    font-size: 1.6rem;
  }
}
.contact_textarea::-moz-placeholder {
  color: #abb8c3;
}
.contact_textarea::placeholder {
  color: #abb8c3;
}
.contact_textarea:focus {
  outline: none;
  border-color: #e60012;
}

/* ラジオ・チェックの選択肢グループ */
.contact_options {
  display: flex;
  align-items: flex-start;
  gap: 2.4rem;
}
@media screen and (max-width: 767px) {
  .contact_options {
    flex-wrap: wrap;
    gap: 1.6rem 2.4rem;
  }
}

.contact_options_col {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

/* ラジオ・チェック共通のラベル */
.contact_choice {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  cursor: pointer;
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 2rem;
  line-height: 2.8rem;
  color: #231815;
}

/* 実際の input は隠してカスタム表示 */
.contact_choice input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.contact_radio_mark {
  display: block;
  flex-shrink: 0;
  width: 2.4rem;
  height: 2.4rem;
  border: 0.1rem solid #abb8c3;
  border-radius: 50%;
  transition: border-color 0.2s ease;
}

.contact_choice input:checked + .contact_radio_mark {
  border: 0.7rem solid #e60012;
}

.contact_check_mark {
  position: relative;
  display: block;
  flex-shrink: 0;
  width: 2.4rem;
  height: 2.4rem;
  border: 0.1rem solid #abb8c3;
  border-radius: 0.5rem;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.contact_choice input:checked + .contact_check_mark {
  border-color: #e60012;
  background-color: #e60012;
}

.contact_choice input:checked + .contact_check_mark::after {
  content: "";
  position: absolute;
  top: 0.4rem;
  left: 0.8rem;
  width: 0.6rem;
  height: 1.2rem;
  border: solid #ffffff;
  border-width: 0 0.2rem 0.2rem 0;
  transform: rotate(45deg);
}

/* 職務経歴などの入れ子（● 経験職種 等） */
.contact_subgroup {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  width: 100%;
}

/* プライバシーポリシー同意 */
.contact_privacy {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.contact_privacy_link {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: #231815;
}

.contact_privacy_link img {
  width: 1.6rem;
  height: 1.6rem;
}

/* 送信ボタン（もっと見る等と同じ丸型） */
.contact_submit {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: 32rem;
  height: 5.6rem;
  margin-top: 3.2rem;
  padding: 0.8rem 6rem;
  border: none;
  border-radius: 3rem;
  background-color: #f3f3f8;
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 2.8rem;
  color: #231815;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.contact_submit:hover {
  background-color: rgb(226.8947368421, 226.8947368421, 238.6052631579);
}

/* =============================================================
   confirm  … 入力内容の確認画面（正式デザイン反映）
   - contact（通常エントリー）確認：      /contact/confirm/
   - referral（知人紹介採用）確認：       /referral/confirm/
   - comeback（カムバック採用）確認：     /comeback/confirm/
   見出し「CONFIRMATION／確認画面」＋ラベル＋グレー値ボックス（縦積み）。
   フォームの見た目は _contact.scss（.contact_label / .contact_required 等）を流用。
   ============================================================= */
.confirm_main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6.4rem;
  /* フッター手前の余白。入力画面（.contact_form）・完了画面（.thanks_main）と同値 */
  padding-bottom: 16rem;
  padding-right: 12rem;
  padding-left: 12rem;
}
@media screen and (max-width: 767px) {
  .confirm_main {
    gap: 4rem;
    padding-top: 3.2rem; /* カンプの見出し位置に合わせる */
    padding-right: 1.6rem;
    padding-left: 1.6rem;
  }
}

/* 確認画面の見出し「CONFIRMATION」は長いため、SPでは縮小して1行に収める */
@media screen and (max-width: 767px) {
  .confirm_main .sec_head_en {
    font-size: 3.2rem;
    line-height: 4rem;
    letter-spacing: 0.1rem;
  }
}

/* 見出し（CONFIRMATION／確認画面）は共通の .sec_head を流用。
   ただし confirm 独自に2段ENが必要なケース用に別名も用意 */
.confirm_head_en_sub {
  display: block;
  font-family: "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 3.2rem;
  letter-spacing: 0;
}
@media screen and (max-width: 767px) {
  .confirm_head_en_sub {
    font-size: 1.6rem;
    line-height: 2.4rem;
  }
}

/* 「以下の内容で送信してよろしいですか？」 */
.confirm_lead {
  width: 100%;
  max-width: 120rem;
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 4rem;
  color: #231815;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .confirm_lead {
    font-size: 1.8rem;
    line-height: 2.8rem;
  }
}

/* =============================================================
   確認内容（ラベル＋グレー値ボックスの縦積み）
   ============================================================= */
.confirm_list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3.2rem;
  width: 100%;
  max-width: 88rem;
}

.confirm_item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.8rem;
  width: 100%;
}

/* ラベル行（.contact_label / .contact_required を流用） */
/* 職務経歴などの入れ子ラベル（● 経験職種 等）用の見出し */
.confirm_group_ttl {
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 2.8rem;
  color: #231815;
}

/* 値ボックス（グレー背景） */
.confirm_value {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 6.4rem;
  padding: 1.6rem;
  border-radius: 0.4rem;
  background-color: #f3f3f8;
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 2.8rem;
  color: #231815;
  word-break: break-word;
}
@media screen and (max-width: 767px) {
  .confirm_value {
    padding: 1.2rem 1.6rem;
    font-size: 1.5rem;
    line-height: 2.4rem;
  }
}

/* 未入力（任意項目が空） */
.confirm_value.is_empty {
  color: #abb8c3;
}

/* =============================================================
   操作ボタン（修正する / 送信する）
   ============================================================= */
.confirm_actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6.4rem;
  margin-top: 1.6rem;
}
@media screen and (max-width: 767px) {
  .confirm_actions {
    flex-direction: column-reverse;
    gap: 1.6rem;
    width: 100%;
  }
}

/* 修正する（グレー） */
.confirm_btn_back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32rem;
  height: 5.6rem;
  padding: 0.8rem 6rem;
  border: none;
  border-radius: 3rem;
  background-color: #f3f3f8;
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 2.8rem;
  color: #231815;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.confirm_btn_back:hover {
  background-color: rgb(226.8947368421, 226.8947368421, 238.6052631579);
}
@media screen and (max-width: 767px) {
  .confirm_btn_back {
    width: 100%;
  }
}

/* 送信する（赤） */
.confirm_btn_submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32rem;
  height: 5.6rem;
  padding: 0.8rem 6rem;
  border: none;
  border-radius: 3rem;
  background-color: #e60012;
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 2.8rem;
  color: #ffffff;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.confirm_btn_submit:hover {
  opacity: 0.85;
}
@media screen and (max-width: 767px) {
  .confirm_btn_submit {
    width: 100%;
  }
}

/* 末尾のメール受信案内 */
.confirm_note {
  width: 100%;
  max-width: 88rem;
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 2.8rem;
  color: #231815;
}
@media screen and (max-width: 767px) {
  .confirm_note {
    font-size: 1.4rem;
    line-height: 2.4rem;
  }
}

.confirm_note a {
  color: #e60012;
  text-decoration: underline;
}

/* =============================================================
   thanks  … 送信完了（THANK YOU）共通ページ / slug: thanks
   各フォーム（contact / referral）送信後の共通完了画面。
   ============================================================= */
.thanks_main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8rem;
  /* フッター手前の余白。入力画面（.contact_form）・確認画面（.confirm_main）と同値 */
  padding-bottom: 16rem;
}
@media screen and (max-width: 767px) {
  .thanks_main {
    gap: 4rem;
    padding-top: 3.2rem; /* カンプの見出し位置に合わせる */
    padding-right: 1.6rem;
    padding-left: 1.6rem;
  }
}

/* 見出し（THANK YOU / 送信完了 / 赤ライン）は共通の .sec_head を流用 */
/* メインメッセージ「ご応募ありがとうございました」 */
.thanks_message {
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 4rem;
  line-height: 5.6rem;
  color: #231815;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .thanks_message {
    font-size: 2.8rem;
    line-height: 4.4rem;
  }
}

/* サブメッセージ「送信が完了いたしました」 */
.thanks_subtitle {
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 4rem;
  color: #231815;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .thanks_subtitle {
    font-size: 2.2rem;
    line-height: 3.2rem;
  }
}

/* 案内文 */
.thanks_text {
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 2.8rem;
  color: #231815;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .thanks_text {
    font-size: 1.4rem;
    line-height: 2.4rem;
  }
}

.thanks_text a {
  color: #e60012;
  text-decoration: underline;
}

/* テキストブロックのまとまり（サブ見出し＋各案内） */
.thanks_body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4rem;
  width: 100%;
  max-width: 100rem;
}
@media screen and (max-width: 767px) {
  .thanks_body {
    gap: 3.2rem;
  }
}

/* =============================================================
   referral  … 知人紹介採用エントリー
   （WordPress: page-referral.php 相当 / slug: referral）
   フォームの見た目は _contact.scss を全面的に流用し、
   固有パーツ（2段見出し・ファイルアップロード・注記付きラベル）だけ定義。
   ============================================================= */
/* 見出しの英字を2段にする（REFERRAL RECRUITING / ENTRY） */
.referral_head_en {
  font-family: "Oswald", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 6.4rem;
  line-height: 7.2rem;
  letter-spacing: 0.64rem;
  color: #231815;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .referral_head_en {
    font-size: 4rem;
    line-height: 4.8rem;
    letter-spacing: 0.2rem;
  }
}

/* カンプは下の ENTRY と同じ Oswald Bold。字間は文字サイズの 1/10。
   （PC 24px → 2.4px ／ SP 18px → 1.8px） */
.referral_head_en_sub {
  display: block;
  font-family: "Oswald", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 3.2rem;
  letter-spacing: 0.24rem;
}
@media screen and (max-width: 767px) {
  .referral_head_en_sub {
    font-size: 1.8rem;
    line-height: 3.2rem;
    letter-spacing: 0.18rem;
  }
}

/* ラベルに付く注記（※拠点一覧はこちら 等） */
.contact_label_note {
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 2.8rem;
  color: #231815;
}
@media screen and (max-width: 767px) {
  .contact_label_note {
    font-size: 1.2rem;
    line-height: 2rem;
  }
}

.contact_label_note a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: #e60012;
  text-decoration: underline;
}

.contact_label_note a img {
  width: 1.4rem;
  height: 1.4rem;
}

/* =============================================================
   ファイルアップロード
   ============================================================= */
.contact_file {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  width: 100%;
  height: 6.4rem;
  padding-left: 1.6rem;
  border: 0.1rem solid #abb8c3;
  border-radius: 0.4rem;
  background-color: #ffffff;
  overflow: hidden;
}

/* ファイル未選択時の表示テキスト */
.contact_file_name {
  flex: 1;
  min-width: 0;
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 2.8rem;
  color: #abb8c3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.contact_file_name.is_selected {
  color: #231815;
}

/* 「ファイルを選択」ボタン */
.contact_file_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 16.4rem;
  height: 6.4rem;
  background-color: #f3f3f8;
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 2.8rem;
  color: #231815;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.contact_file_btn:hover {
  background-color: rgb(226.8947368421, 226.8947368421, 238.6052631579);
}
@media screen and (max-width: 767px) {
  .contact_file_btn {
    width: 12rem;
  }
}

/* 実際の input[type=file] は隠す */
.contact_file input[type=file] {
  position: absolute;
  width: 0.1rem;
  height: 0.1rem;
  opacity: 0;
  overflow: hidden;
}

/* =============================================================
   form  … Snow Monkey Forms の見た目をカンプに合わせる
   -------------------------------------------------------------
   対象ページ: エントリー / 知人紹介採用 / カムバック採用
   （page-contact.php / page-referral.php / page-comeback.php）

   ・入力欄はプラグインが出力するので、_contact.scss と同じ見た目に
     なるよう .smf-* クラスへスタイルを当て直している。
   ・プラグイン側の CSS は「.smf-form .xxx」で書かれているため、
     ここでは「.contact_form .smf-form .xxx」まで含めて上書きする。
   ・確認画面・完了画面は同じURLのまま切り替わる。
     <form> の data-screen 属性が input / confirm / complete などに変わるので、
     それを見て見出しやリード文の出し分けをしている。
   ============================================================= */
/* =============================================================
   画面（入力／確認／完了）の出し分け
   -------------------------------------------------------------
   確認・完了用の見出しは初期状態で隠しておき、
   その画面のときだけ表示する。
   :has() が使えないブラウザでは入力画面の見た目のまま変わらない
   （フォームの動作自体には影響しない）。
   ============================================================= */
.contact_head[data-smf-screen=confirm],
.contact_head[data-smf-screen=complete] {
  display: none;
}

.contact_main:has(.snow-monkey-form[data-screen=confirm]) .contact_head[data-smf-screen=confirm] {
  display: flex;
}

.contact_main:has(.snow-monkey-form[data-screen=complete]) .contact_head[data-smf-screen=complete] {
  display: flex;
}

/* 入力画面用の見出し・リード文は、確認／完了／エラー画面では隠す */
.contact_main:has(.snow-monkey-form[data-screen=confirm]) [data-smf-screen=input],
.contact_main:has(.snow-monkey-form[data-screen=complete]) [data-smf-screen=input],
.contact_main:has(.snow-monkey-form[data-screen=systemerror]) [data-smf-screen=input] {
  display: none !important;
}

/* 確認画面だけに出るリード文（フォームの中に入っている） */
.tb_confirm_lead {
  display: none;
}

.snow-monkey-form[data-screen=confirm] .tb_confirm_lead {
  display: block;
  width: 100%;
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 4rem;
  color: #231815;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .snow-monkey-form[data-screen=confirm] .tb_confirm_lead {
    font-size: 1.8rem;
    line-height: 2.8rem;
  }
}

/* プライバシーポリシー同意は確認画面では出さない（値が無いため） */
.snow-monkey-form[data-screen=confirm] .tb_privacy_item {
  display: none;
}

/* =============================================================
   フォーム全体のレイアウト
   ============================================================= */
.contact_form .snow-monkey-form {
  width: 100%;
}

/* 入力項目の縦積み（_contact.scss の .contact_form と同じ間隔） */
.contact_form .smf-form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3.2rem;
  width: 100%;
}

/* 1項目（旧 .contact_row） */
.contact_form .smf-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.8rem;
  width: 100%;
  margin: 0;
}

.contact_form .smf-item__col {
  width: 100%;
}

/* ラベル列は中身ぶんの幅（必須バッジ・注記を横に並べる） */
.contact_form .smf-item__col--label {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.8rem;
  width: auto;
  max-width: 100%;
}

/* ラベル本体も flex にする。インラインのままだと行ボックスの余白ぶん
   ラベル行が数px高くなり、カンプとずれる。 */
.contact_form .smf-item__label {
  display: flex;
  align-items: center;
}

.contact_form .smf-item__label label {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  cursor: pointer;
}

/* ラベル文字（旧 .contact_label_txt） */
.contact_form .smf-item__label__text {
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 2.8rem;
  color: #231815;
}

/* 必須バッジ。項目に「is_required」クラスが付いていると出る。 */
.contact_form .smf-item.is_required .smf-item__label__text::after {
  content: "";
  display: inline-block;
  width: 3.4rem;
  height: 1.6rem;
  margin-left: 0.8rem;
  vertical-align: middle;
  background: url(../img/icon_required.svg) no-repeat center/contain;
}

/* ラベル横の注記（旧 .contact_label_note） */
.contact_form .smf-item__description {
  margin: 0;
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 2.8rem;
  color: #231815;
}
@media screen and (max-width: 767px) {
  .contact_form .smf-item__description {
    font-size: 1.2rem;
    line-height: 2rem;
  }
}
.contact_form .smf-item__description a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: #e60012;
  text-decoration: underline;
}
.contact_form .smf-item__description img {
  width: 1.4rem;
  height: 1.4rem;
}

/* 「職務経歴」「現在の職業」のような見出しだけの行 */
.contact_form .smf-item.is_group .smf-item__col--controls {
  display: none;
}

/* 見出しにぶら下がる子項目（● 経験職種 など）は間隔を詰める。
   .smf-form の gap 3.2rem を打ち消して 0.8rem にしている。 */
.contact_form .smf-item.is_sub {
  margin-top: -2.4rem;
}

/* =============================================================
   テキスト入力 / メール / 電話（旧 .contact_input）
   ============================================================= */
.contact_form .smf-form .smf-text-control {
  width: 100%;
  line-height: 1;
}

.contact_form .smf-form .smf-text-control__control {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 100%;
  height: 6.4rem;
  padding: 0 1.6rem;
  border: 0.1rem solid #abb8c3;
  border-radius: 0.4rem;
  background-color: #ffffff;
  box-shadow: none;
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 2.8rem;
  color: #231815;
}
.contact_form .smf-form .smf-text-control__control::placeholder {
  color: #abb8c3;
}
.contact_form .smf-form .smf-text-control__control:focus, .contact_form .smf-form .smf-text-control__control:hover {
  outline: none;
  border-color: #e60012;
}

/* =============================================================
   セレクト（旧 .contact_select）
   ============================================================= */
.contact_form .smf-form .smf-select-control {
  display: block;
  position: relative;
  width: 100%;
}

.contact_form .smf-form .smf-select-control__control {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 100%;
  height: 6.4rem;
  padding: 0 5.6rem 0 1.6rem;
  border: 0.1rem solid #abb8c3;
  border-radius: 0.4rem;
  background-color: #ffffff;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 2.8rem;
  color: #231815;
}
.contact_form .smf-form .smf-select-control__control:focus, .contact_form .smf-form .smf-select-control__control:hover {
  outline: none;
  border-color: #e60012;
}

/* 未選択のときは薄いグレー（旧デザインのプレースホルダ表現） */
.contact_form .smf-form .smf-select-control__control:has(option[value=""]:checked) {
  font-weight: 400;
  color: #abb8c3;
}

/* プラグインの三角矢印を、カンプの矢印アイコンに差し替える */
.contact_form .smf-form .smf-select-control__toggle::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 1.6rem;
  left: auto;
  width: 3.2rem;
  height: 2.4rem;
  border: none;
  background: url(../img/icon_select_arrow.svg) no-repeat center/contain;
  transform: translateY(-50%);
}

/* =============================================================
   テキストエリア（旧 .contact_textarea）
   ============================================================= */
.contact_form .smf-form .smf-textarea-control {
  width: 100%;
}

.contact_form .smf-form .smf-textarea-control__control {
  width: 100%;
  max-width: 100%;
  height: 24rem;
  padding: 1.6rem;
  border: 0.1rem solid #abb8c3;
  border-radius: 0.4rem;
  background-color: #ffffff;
  box-shadow: none;
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 2.8rem;
  color: #231815;
  resize: vertical;
}
.contact_form .smf-form .smf-textarea-control__control::placeholder {
  color: #abb8c3;
}
.contact_form .smf-form .smf-textarea-control__control:focus, .contact_form .smf-form .smf-textarea-control__control:hover {
  outline: none;
  border-color: #e60012;
}

/* =============================================================
   ラジオ・チェックボックス（旧 .contact_choice）
   ============================================================= */
/* プラグインは fieldset の2つ目以降の子に margin-top を付ける。
   ここでは凡例（legend）を読み上げ用に隠しているだけなので、その余白は消す。 */
.contact_form .smf-form .smf-control-fieldset > * + * {
  margin-top: 0;
}

.contact_form .smf-form .smf-radio-buttons-control__control,
.contact_form .smf-form .smf-checkboxes-control__control {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 1.6rem 2.4rem;
}

/* 縦並び指定（連絡のとりやすい時間帯） */
.contact_form .smf-form .smf-checkboxes-control--vertical .smf-checkboxes-control__control,
.contact_form .smf-form .smf-radio-buttons-control--vertical .smf-radio-buttons-control__control {
  flex-direction: column;
  gap: 0.8rem;
}

.contact_form .smf-form .smf-checkboxes-control--vertical .smf-checkboxes-control__control > .smf-label,
.contact_form .smf-form .smf-radio-buttons-control--vertical .smf-radio-buttons-control__control > .smf-label {
  margin: 0;
}

/* label は flex（インラインのままだと行ボックスの余白ぶん行が高くなる） */
.contact_form .smf-form .smf-label {
  display: flex;
  margin: 0;
}

.contact_form .smf-form .smf-label label {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.contact_form .smf-form .smf-radio-button-control,
.contact_form .smf-form .smf-checkbox-control {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.contact_form .smf-form .smf-radio-button-control__label,
.contact_form .smf-form .smf-checkbox-control__label {
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 2.8rem;
  color: #231815;
}

/* ラジオ（旧 .contact_radio_mark） */
.contact_form .smf-form .smf-radio-button-control__control {
  flex: 0 0 auto;
  width: 2.4rem;
  height: 2.4rem;
  margin: 0;
  border: 0.1rem solid #abb8c3;
  border-radius: 50%;
  background-color: #ffffff;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: border-color 0.2s ease;
}
.contact_form .smf-form .smf-radio-button-control__control::before {
  display: none;
}
.contact_form .smf-form .smf-radio-button-control__control:checked {
  border: 0.7rem solid #e60012;
  background-color: #ffffff;
}

/* チェックボックス（旧 .contact_check_mark） */
.contact_form .smf-form .smf-checkbox-control__control {
  position: relative;
  flex: 0 0 auto;
  width: 2.4rem;
  height: 2.4rem;
  margin: 0;
  border: 0.1rem solid #abb8c3;
  border-radius: 0.5rem;
  background-color: #ffffff;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.contact_form .smf-form .smf-checkbox-control__control:checked {
  border-color: #e60012;
  background-color: #e60012;
}
.contact_form .smf-form .smf-checkbox-control__control:checked::before {
  content: "";
  position: absolute;
  top: 0.4rem;
  left: 0.8rem;
  width: 0.6rem;
  height: 1.2rem;
  border: solid #ffffff;
  border-width: 0 0.2rem 0.2rem 0;
  background: none;
  transform: rotate(45deg);
  visibility: visible;
}

/* =============================================================
   ファイルアップロード（旧 .contact_file）
   ============================================================= */
.contact_form .smf-form .smf-file-control {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0;
  width: 100%;
  height: 6.4rem;
  border: 0.1rem solid #abb8c3;
  border-radius: 0.4rem;
  background-color: #ffffff;
  overflow: hidden;
}

.contact_form .smf-form .smf-file-control > label {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0;
  width: 100%;
  height: 100%;
}

/* ファイル名（左） */
.contact_form .smf-form .smf-file-control__filename {
  order: 1;
  flex: 1;
  min-width: 0;
  padding-left: 1.6rem;
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 2.8rem;
  color: #abb8c3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.contact_form .smf-form .smf-file-control--set .smf-file-control__filename--has-file {
  display: block;
  color: #231815;
}

/* 「ファイルを選択」ボタン（右） */
.contact_form .smf-form .smf-file-control__label {
  order: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 16.4rem;
  height: 6.4rem;
  padding: 0;
  border: none;
  border-radius: 0;
  background-color: #f3f3f8;
  background-image: none;
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 2.8rem;
  color: #231815;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.contact_form .smf-form .smf-file-control__label:hover {
  background-color: rgb(88.9783281734%, 88.9783281734%, 93.5706914345%);
}
@media screen and (max-width: 767px) {
  .contact_form .smf-form .smf-file-control__label {
    width: 12rem;
  }
}

/* 「クリア」は使わない（選び直せば差し替わるため） */
.contact_form .smf-form .smf-file-control__clear {
  display: none !important;
}

/* =============================================================
   確認画面の値（旧 .confirm_value）
   -------------------------------------------------------------
   確認画面では入力欄が値のテキストに置き換わる。
   グレーの値ボックスは .smf-placeholder に当てる。
   ============================================================= */
.snow-monkey-form[data-screen=confirm] .smf-item__controls .smf-placeholder {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 6.4rem;
  padding: 1.6rem;
  border-radius: 0.4rem;
  background-color: #f3f3f8;
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 2.8rem;
  color: #231815;
  word-break: break-word;
}
@media screen and (max-width: 767px) {
  .snow-monkey-form[data-screen=confirm] .smf-item__controls .smf-placeholder {
    padding: 1.2rem 1.6rem;
    font-size: 1.5rem;
    line-height: 2.4rem;
  }
}

/* 値の入れ子（ラジオ・チェック・セレクトは div で包まれて返ってくる） */
.snow-monkey-form[data-screen=confirm] .smf-item__controls .smf-placeholder > div {
  width: 100%;
}

/* =============================================================
   エラー表示
   ============================================================= */
.contact_form .smf-error-messages {
  margin-top: 0.8rem;
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 2.4rem;
  color: #e60012;
}

.contact_form .smf-form [data-invalid="1"] {
  border-color: #e60012;
}

.contact_form .smf-system-error-content {
  margin-top: 1.6rem;
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 2.8rem;
  color: #e60012;
  text-align: center;
}

/* =============================================================
   ボタン（旧 .contact_submit / .confirm_btn_back / .confirm_btn_submit）
   ============================================================= */
.contact_form .smf-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6.4rem;
  width: 100%;
  margin-top: 3.2rem;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .contact_form .smf-action {
    flex-direction: column-reverse;
    gap: 1.6rem;
  }
}

.contact_form .smf-action .smf-button-control {
  display: block;
}
@media screen and (max-width: 767px) {
  .contact_form .smf-action .smf-button-control {
    width: 100%;
  }
}

.contact_form .smf-action .smf-button-control + .smf-button-control {
  margin-left: 0;
}

.contact_form .smf-action .smf-button-control__control {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32rem;
  height: 5.6rem;
  padding: 0.8rem 6rem;
  border: none;
  border-radius: 3rem;
  background-color: #f3f3f8;
  background-image: none;
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 2rem;
  line-height: 2.8rem;
  color: #231815;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.contact_form .smf-action .smf-button-control__control:hover {
  background-color: rgb(88.9783281734%, 88.9783281734%, 93.5706914345%);
}
@media screen and (max-width: 767px) {
  .contact_form .smf-action .smf-button-control__control {
    width: 100%;
  }
}

/* 「送信する」だけ赤 */
.contact_form .smf-action .smf-button-control__control[data-action=complete] {
  background-color: #e60012;
  font-weight: 700;
  color: #ffffff;
  transition: opacity 0.2s ease;
}
.contact_form .smf-action .smf-button-control__control[data-action=complete]:hover {
  background-color: #e60012;
  opacity: 0.85;
}

/* 「入力内容を確認する」はホバーで赤背景＋白文字にする。
   サイト共通のボタン（.btn_more）と同じ動き。 */
.contact_form .smf-action .smf-button-control__control[data-action=confirm] {
  transition: background-color 0.3s ease, color 0.3s ease;
}
.contact_form .smf-action .smf-button-control__control[data-action=confirm]:hover {
  background-color: #e60012;
  color: #ffffff;
}

.contact_form .smf-action .smf-button-control__control[disabled] {
  opacity: 0.6;
  cursor: default;
}

/* =============================================================
   フォーム内に置いたテキスト
   ============================================================= */
/* プライバシーポリシーへのリンク（チェックボックスの右に並べる） */
.contact_form .tb_privacy_item .smf-item__controls {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.contact_form .tb_privacy_item .smf-checkbox-control__label {
  display: none;
}

.contact_form .tb_privacy_link {
  margin: 0;
}

.contact_form .tb_privacy_link a {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 2.8rem;
  color: #231815;
}

.contact_form .tb_privacy_link img {
  width: 1.6rem;
  height: 1.6rem;
}

/* 送信ボタン手前の案内文（referral / comeback は細字） */
.contact_form .tb_form_notice {
  font-weight: 400;
}

/* =============================================================
   完了画面（旧 .thanks_main）
   -------------------------------------------------------------
   送信が終わると .smf-form の中身が完了画面の内容に差し替わる。
   thanks ページのデザインに合わせている。
   ============================================================= */
.contact_form .smf-complete-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4rem;
  width: 100%;
}
@media screen and (max-width: 767px) {
  .contact_form .smf-complete-content {
    gap: 3.2rem;
  }
}

/* 「ご応募ありがとうございました」 */
.contact_form .tb_complete_ttl {
  margin-bottom: 4rem; /* gap 4rem と合わせて 8rem（カンプの間隔） */
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 4rem;
  line-height: 5.6rem;
  color: #231815;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .contact_form .tb_complete_ttl {
    margin-bottom: 0.8rem;
    font-size: 2.8rem;
    line-height: 4.4rem;
  }
}

/* 「送信が完了いたしました」 */
.contact_form .tb_complete_sub {
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 4rem;
  color: #231815;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .contact_form .tb_complete_sub {
    font-size: 2.2rem;
    line-height: 3.2rem;
  }
}

/* 案内文 */
.contact_form .tb_complete_txt {
  max-width: 100rem;
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 2.8rem;
  color: #231815;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .contact_form .tb_complete_txt {
    font-size: 1.4rem;
    line-height: 2.4rem;
  }
}

.contact_form .tb_complete_txt a {
  color: #e60012;
  text-decoration: underline;
}

/* 完了画面ではボタンが空になるので余白を作らない */
.snow-monkey-form[data-screen=complete] .smf-action {
  margin-top: 0;
}

/* フォームが未作成のときの管理者向けメッセージ */
.tb_form_missing {
  width: 100%;
  padding: 1.6rem;
  border: 0.1rem solid #e60012;
  border-radius: 0.4rem;
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-size: 1.6rem;
  line-height: 2.8rem;
  color: #e60012;
}

/* =============================================================
   privacy  … プライバシーポリシー（個人情報保護方針）
   （WordPress: page-privacy.php 相当 / slug: privacy）
   ============================================================= */
.privacy_main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8rem;
  padding-bottom: 8rem;
}
@media screen and (max-width: 767px) {
  .privacy_main {
    gap: 4rem;
    padding-top: 3.2rem; /* カンプの見出し位置に合わせる */
    padding-bottom: 5.6rem;
    padding-right: 1.6rem;
    padding-left: 1.6rem;
  }
}

/* 見出し（PRIVACY POLICY / 個人情報保護方針）は共通の .sec_head を流用 */
/* 本文ラッパー */
.privacy_body {
  display: flex;
  flex-direction: column;
  gap: 4.8rem;
  width: 100%;
  max-width: 120rem;
}
@media screen and (max-width: 767px) {
  .privacy_body {
    gap: 3.2rem;
  }
}

/* リード文 */
.privacy_lead {
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 2.8rem;
  color: #231815;
}
@media screen and (max-width: 767px) {
  .privacy_lead {
    font-size: 1.5rem;
    line-height: 2.8rem;
  }
}

/* セクション */
.privacy_section {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}
@media screen and (max-width: 767px) {
  .privacy_section {
    gap: 1.6rem;
  }
}

.privacy_section_ttl {
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 2rem;
  line-height: 2.8rem;
  color: #231815;
}
@media screen and (max-width: 767px) {
  .privacy_section_ttl {
    font-size: 1.8rem;
    line-height: 2.6rem;
  }
}

.privacy_section_txt {
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 2.8rem;
  color: #231815;
}
@media screen and (max-width: 767px) {
  .privacy_section_txt {
    font-size: 1.5rem;
    line-height: 2.8rem;
  }
}

/* 小見出し（本文中の「個人情報の安全対策」等） */
.privacy_subttl {
  display: block;
  margin-top: 0.8rem;
  font-weight: 700;
}/*# sourceMappingURL=style.css.map */

/* =============================================================
   protect  … 画像の保存・持ち出しをしにくくする
   -------------------------------------------------------------
   ※ ブラウザに表示している以上、画像ファイルそのものは必ず
     閲覧者の端末に届いている。開発者ツールや画像URLの直接入力
     までは防げないため、ここでの目的は
     「通常の操作では保存できない」状態にすること。

   ・右クリック／長押しのメニューを出さない … main.js
   ・ドラッグでの持ち出し・選択を止める     … このファイル

   文字のコピーは妨げたくないので、対象は画像だけに絞っている。
   ※ 他のスタイルを上書きしないよう、読み込みは最後にしている。
   ============================================================= */
img,
picture,
video {
  /* デスクトップへドラッグして保存できないようにする
     （Firefox は dragstart を main.js 側で止めている） */
  -webkit-user-drag: none;
  /* iOS の長押しメニュー（「画像を保存」「コピー」）を出さない */
  -webkit-touch-callout: none;
  /* 範囲選択からのコピーを防ぐ */
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}