@charset "UTF-8";
body {
  background: #f6f1eb;
}
/*//////////PCサイズ///////////*/
/*//////////PCサイズ///////////*/
@media screen and (min-width: 768px) {
  /** ==============================
 * ファーストビュー start
 * ============================== **/
  .MainVisualSection {
    position: relative;
    width: 100vw;
    /*height: calc(var(--vh, 1vh) * 100);
  height: 100vh;
   min-height: 600px; ← 任意で残してもOK */
    aspect-ratio: 16 / 12;
    overflow: hidden;
    background-color: #333;
  }
  /* ===== 動画背景 ===== */
  .MainVisualSection__video-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  .MainVisualSection__video-bg video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  /* ★ 黒オーバーレイ */
  .MainVisualSection__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.3); /* 黒＋透明30% */
    z-index: 2;
    pointer-events: none; /* 下の動画ボタンなどの操作を邪魔しない */
  }
  /* ===== ブランドMOVIEリンク・コピー配置 ===== */
  .MainVisualSection__content {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    pointer-events: none;
  }
  .MainVisualSection__brand-movie {
    align-self: flex-start;
    margin: 0 0 40px 40px;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 2;
    pointer-events: auto;
  }
  /* ブランドムービーボタン */
  .MainVisualSection__brand-link img {
    width: 10vw;
    height: auto;
  }
  /* ライトボックスのスタイル */
  .VideoLightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 9999; /* 必ずヘッダーより前に */
    align-items: center;
    justify-content: center;
  }
  .VideoLightbox.is-active {
    display: flex;
  }
  .VideoLightbox__inner {
    position: relative;
    max-width: 90%;
    max-height: 80%;
  }
  .VideoLightbox__inner video {
    width: 100%;
    max-width: 1280px;
    height: auto;
    display: block;
  }
  .VideoLightbox__close {
    position: absolute;
    top: -2.5rem;
    right: -2.5rem;
    font-size: 2rem;
    color: #fff;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 10000; /* 念のためボタンも強く */
  }
  .MainVisualSection__brand-link:hover {
    opacity: 0.8;
  }
  .MainVisualSection__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    position: absolute;
    left: 10vw;
    top: 41%;
    margin: 0 0 0 0;
    z-index: 2;
    pointer-events: auto;
  }
  .MainVisualSection__en.serif {
    font-family: 'Noto Serif JP', serif;
    font-size: 2.7rem;
    font-weight: 100;
    color: #fff;
    letter-spacing: 0.2rem;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.18);
    line-height: 190%
  }
  /** ==============================
 * ファーストビュー end
 * ============================== **/
  /* ==============================
 * recruit hero（img98＋白帯2行） 中央寄せ・band-2右寄せ版
 * ============================== */
  .recruit-hero {
    position: relative;
  }
  .recruit-hero__visual {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    background: center / cover no-repeat url("../images/img98.webp");
    min-height: 100vh;
  }
  /* ★ここを1ブロックに統一（上下中央＆左基準、横は伸長させない） */
  .recruit-hero__bands {
    position: absolute;
    top: 55%;
    left: 8vw; /* 左基準位置 */
    transform: translateY(-50%);
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* ← 子の横幅を“内容幅”で止める */
    gap: 1.2rem;
    z-index: 555;
  }
  /* ==============================
 * recruit hero end
 * ============================== */
  /* ==============================
 * recruit story（img99→白場→blur→文章） start
 * ============================== */
  .recruit-story {
    position: relative;
  }
  /* ピン区間は1画面固定 */
  .story-scene {
    position: relative;
    height: 100vh;
    overflow: clip;
  }
  /* 背景画像（カバー） */
  .story-bg {
    position: absolute;
    inset: 0;
  }
  .story-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    will-change: transform, filter;
    filter: blur(var(--story-blur, 0rem)); /* blurはCSS変数でGSAP制御 */
  }
  /* 白場オーバーレイ（透明→半透明へ） */
  .story-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0);
    will-change: background-color;
  }
  /* 文章ブロック（左側に寄せて配置） */
  .story-words {
    position: absolute;
    top: 8vw;
    left: 8vw;
    width: 42vw; /* 見本のレイアウト感に合わせた幅 */
    color: var(--ink);
    will-change: transform, opacity;
  }
  /* ==============================
 * recruit story end
 * ============================== */
  /* ==============================
 * Recruit Story center patch start
 * ============================== */
  /* ピン区間と同じ高さで、sec-inの中身を完全中央揃え */
  .recruit-story .sec-in {
    height: 100%;
    display: grid;
    place-items: center; /* 上下左右中央 */
  }
  /* テキストブロックは中央に据え、幅は見本寄せ */
  .story-words {
    position: static; /* 既存absoluteを無効化 */
    margin: 0 auto;
    width: auto; /* セクション中央に置く本文幅 */
    text-align: left; /* 文字は左揃えのまま */
  }
  /* 見出し（serif）サイズ感 */
  .story-catch {
    margin: 0 0 2rem 0;
    font-weight: 600;
    line-height: 1.9;
    letter-spacing: .08rem;
    font-size: 1.5rem;
    font-feature-settings: "palt"1, "pkna"1, "pwid"1;
    font-variant-east-asian: proportional-width; /* = "pwid" */
    font-kerning: normal;
  }
  /* 本文（leadベース） */
  .story-body {
    font-size: 1.12rem;
    line-height: 2;
    letter-spacing: .08rem;
    text-align: justify;
  }
  /* ==============================
 * Recruit Story center patch end
 * ============================== */
  /* ==============================
 * Recruit Message style start
 * ============================== */
  .message-sec {
    position: relative;
    padding: 10vw 0 8rem; /* 上部に余白、下は人物の足元分 */
    min-height: 0;
    background-position: 0%;
    background-image: -webkit-linear-gradient(338deg, rgba(213, 219, 228, 1.00) 0%, rgba(208, 216, 226, 1.00) 34.38%, rgba(165, 182, 197, 1.00) 69.69%, rgba(101, 124, 151, 1.00) 100%);
    background-image: -moz-linear-gradient(338deg, rgba(213, 219, 228, 1.00) 0%, rgba(208, 216, 226, 1.00) 34.38%, rgba(165, 182, 197, 1.00) 69.69%, rgba(101, 124, 151, 1.00) 100%);
    background-image: -o-linear-gradient(338deg, rgba(213, 219, 228, 1.00) 0%, rgba(208, 216, 226, 1.00) 34.38%, rgba(165, 182, 197, 1.00) 69.69%, rgba(101, 124, 151, 1.00) 100%);
    background-image: linear-gradient(112deg, rgba(213, 219, 228, 1.00) 0%, rgba(208, 216, 226, 1.00) 34.38%, rgba(165, 182, 197, 1.00) 69.69%, rgba(101, 124, 151, 1.00) 100%);
  }
  .message-sec .sec-in {
    width: 70vw;
    margin: auto;
  }
  /* ラベル行 */
  .message-head {
    margin: 0 0 2rem 0;
  }
  .message-label {
    display: inline-block;
    background: #fff;
    padding: 1rem 5vw 0.8rem 10vw;
    font-weight: 100; /* 指定：Jost 100 */
    letter-spacing: .18rem;
    line-height: 100%;
    font-size: 2rem;
  }
  /* 本文ブロック（左寄せ・幅固定） */
  .message-words {
    width: auto; /* 見本の字面幅に寄せる */
    padding: 3vw 0 0 0
  }
  .message-words .lead {
    line-height: 2;
    font-size: 1.05rem;
    letter-spacing: .08rem;
    text-align: justify;
    margin: 0 0 2.4rem 0;
  }
  /* 署名 */
  .message-sign {
    line-height: 1.6;
    letter-spacing: .08rem;
    margin: 4rem 0 0 -2px;
    font-size: 1.5rem;
  }
  /* 右下の人物写真（img100） */
  .message-portrait {
    position: absolute;
    right: 10vw;
    bottom: 0;
    width: 35vw; /* 必要に応じて微調整 */
    pointer-events: none;
  }
  .message-portrait img {
    width: 100%;
    height: auto;
    display: block;
  }
  /* ==============================
 * Recruit Message style end
 * ============================== */
  /* ==============================
 * Job Intro style start
 * ============================== */
  .jobintro-sec {
    padding: 0rem 0 8rem;
    background: linear-gradient(135deg, #f6f1eb 0%, /* 下地をほんのり温かく（見本の地色） */ #f6f1eb 100%);
    /* 見本は地色に近い淡色。背景帯は別要素で表現 */
    position: relative;
  }
  /* 左上の白い帯（リボン） */
  .job-head {
    position: relative;
    margin: 8vw 0 4rem 0;
  }
  .job-ribbon {
    display: inline-flex;
    align-items: center;
    background: #fff;
    padding: 1rem 5vw 1rem 10vw;
    font-weight: 100; /* 指定：Jost 100 */
    letter-spacing: .18rem;
    line-height: 100%;
    font-size: 2rem;
  }
  .job-label {
    display: inline-flex;
    align-items: center;
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: .08rem;
  }
  .job-label span {
    font-size: 80%;
    margin-right: 1rem;
  }
  /* 中央キャッチ */
  .job-catch {
    text-align: center;
    margin: 7rem auto 3rem auto;
    font-weight: 600;
    letter-spacing: .08rem;
    line-height: 2.5;
    font-size: 1.8rem
  }
  /* 本文（中央寄せ・幅制御） */
  .job-body {
    text-align: center;
    width: auto;
    margin: 0 auto;
    letter-spacing: .08rem;
    line-height: 2;
  }
  /* ==============================
 * Job Intro style end
 * ============================== */
  /* ==============================
 * Roles（3カラム） start
 * ============================== */
  .roles-sec {
    padding: 0 0;
  }
  .roles-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0; /* var(--g)でも可 */
  }
  .role-card {
    position: relative;
    aspect-ratio: 9 / 16; /* 縦長比率 */
    overflow: hidden;
  }
  /* 背面画像 */
  .role-bg {
    position: absolute;
    inset: 0;
  }
  .role-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  /* 下から上へ：各カードごとに色味を変える（--ov で指定） */
  .role-grad {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 50%; /* 画像の半分くらいまで */
    /* --cut まではベタ（不透明）、そこから100%で透明に */
    background: linear-gradient(to top, var(--ov, rgba(0, 0, 0, .62)) 0%, var(--ov, rgba(0, 0, 0, .62)) var(--cut, 68%), rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
  }
  /* ラベル（白帯・中央揃え） */
  .role-label {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 55%;
    background: #fff;
    padding: .8rem 1.4rem;
    width: 60%;
    text-align: center;
    font-size: 1.6rem;
    letter-spacing: .1rem;
    line-height: 1.6;
    white-space: nowrap;
  }
  /* 本文（下部・白文字） */
  .role-text {
    position: absolute;
    left: 0;
    right: 0;
    top: 68%;
    color: #ffffff;
    padding: 0 0 3rem 0;
    width: 80%;
    margin: auto;
  }
  .role-text .lead {
    font-size: 1rem;
    line-height: 2;
    letter-spacing: .08rem;
    text-align: justify;
    margin: 0;
  }
  /* カード別のグラデ色（必要に応じて調整してください） */
  .col--1 {
    --ov: rgba(32, 72, 108, .66);
    --cut: 70%;
  }
  .col--2 {
    --ov: rgba(152, 108, 72, .66);
    --cut: 64%;
  }
  .col--3 {
    --ov: rgba(18, 110, 86, .66);
    --cut: 72%;
  }
  /* ==============================
 * Roles end
 * ============================== */
  /* ==============================
 * Career path style start
 * ============================== */
  .career-sec {
    /* 見本の淡い下地に合わせたトーン（必要なければ削除可） */
    background: #f6f1eb;
    padding: 8rem 0 6rem;
    --career-ink: #7a726c; /* タイポの色（見本のグレージュ） */
  }
  .career-ttl {
    color: var(--career-ink);
    font-weight: 200; /* 細め */
    text-align: center;
    line-height: 1;
    letter-spacing: .06rem;
    font-size: 12vw; /* 画面幅に合わせて大きく */
  }
  .career-sub {
    color: var(--career-ink);
    text-align: center;
    margin: 2rem auto 0;
    font-size: 2rem;
    line-height: 1.7;
    letter-spacing: .08rem;
  }
  /* ==============================
 * Career path style end
 * ============================== */
  /* ==============================
 * Split Cases (final) start
 * ============================== */
  .cases-sec {
    padding: 6rem 0;
    background: #f6f1eb;
  }
  /* 1ペア＝左右2カラム */
  .case-pair {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
    margin: 0 0 2rem 0;
  }
  /* 左：固定対象（必ず幅50% + 高さ100vhを確保） */
  .pair-left {
    position: relative;
    flex: 0 0 calc(50% - 1rem);
    width: calc(50% - 1rem);
    height: auto; /* pinの土台（必須） */
    z-index: 0;
  }
  /* 画像枠：画像の欠けを防ぐため一旦 visible（はみ出し不要なら hidden に） */
  .pair-figure {
    position: relative;
    height: 100%;
    pading-top: 10vw;
    overflow: visible;
  }
  /* 縦見出し：縦組みを強制 */
  .pair-title {
    position: absolute;
    left: 3vw;
    top: 0;
    display: inline-block;
    writing-mode: vertical-rl !important;
    -ms-writing-mode: tb-rl;
    text-orientation: upright;
    white-space: nowrap;
    color: #947847;
    font-size: 6vw;
    line-height: 1;
    letter-spacing: 1rem;
    z-index: 1;
    opacity: .7;
    font-weight: 500;
  }
  /* “メンテナンス”など字数が多い場合のサイズ微調整用（必要時のみ付与） */
  .after {
    font-size: 5vw;
    letter-spacing: 0rem;
  }
  /* 左画像のデフォルト位置（ケース毎に個別上書き可） */
  .pair-figure img {
    position: absolute;
    width: 70%;
    height: auto;
    left: 5vw;
    top: 5vw;
    object-fit: contain;
    display: block;
  }
  /* 必要なら各ペアの微調整
.pair-01 .pair-figure img{ width: 64%; left: 2vw; top: 5vw; }
.pair-02 .pair-figure img{ width: 72%; left: 4vw; top: 7vw; }
.pair-03 .pair-figure img{ width: 66%; left: 3vw; top: 6vw; }
.pair-04 .pair-figure img{ width: 68%; left: 3vw; top: 6vw; }
*/
  /* 右：本文（不要な固定幅や余白を持たせない） */
  .case {
    position: relative;
    flex: 0 0 calc(50% - 1rem);
    width: calc(50% - 1rem);
    min-width: 0; /* 折返しに必須。これが無いと右がはみ出す */
    padding: 0; /* 旧実装の余白を打ち消し */
    z-index: 1;
  }
  .case-head {
    margin: 0 0 1.4rem 0;
  }
  .case-no {
    font-size: 1.3rem;
    letter-spacing: .1rem;
    margin: 0 0 1.8rem 0;
    font-weight: 300;
  }
  .case-no span {
    font-size: 1.1rem;
    padding-left: 1rem;
  }
  .case-ttl {
    font-size: 1.6rem;
    margin: 0 0 1rem 0;
  }
  .case-ttl span {
    font-size: 80%;
    padding-left: 1rem;
  }
  .case-meta {
    font-size: 1rem;
    margin: 0;
  }
  .case-sec-ttl {
    font-size: 1.3rem;
    margin: 2rem 0 .8rem;
    font-weight: bold;
  }
  /* ←旧：width:40vw を撤廃。内容幅に自動フィット */
  .case .lead {
    width: 40vw; /* ← ご希望の固定幅に */
    max-width: 100%; /* 念のためカラム内でのはみ出し保険（残して問題なし） */
    font-size: 1rem;
    line-height: 2;
    letter-spacing: .08rem;
    margin: 0;
    text-align: justify;
  }
  .case-schedule {
    margin: .4rem 0 1.6rem;
  }
  .case-schedule div {
    display: grid;
    grid-template-columns: 5rem 1fr;
    gap: 0.5rem;
    padding-bottom: .5rem;
	align-items: center; /* ← これを追加 */
  }
  .case-schedule dt,
.case-schedule dd {
  display: flex;            /* 子要素をflex化 */
  align-items: center;      /* flexの縦中央 */
  margin: 0;
}
  .case-schedule dt {
    font-weight: 300;
    font-family: 'Jost', sans-serif;
    font-size: 1.5rem;
  }
  .case-schedule dd {
    margin: 0;
  }
  /* 罫線（ケース間、幅80vw） */
  .case-divider {
    width: 80vw;
    height: .1rem;
    background: #cfcfcf;
    margin: 4rem auto;
  }
  /* === ScrollTrigger の pin-spacer を左右レイアウトに合わせる === */
  /* 左（.pair-left）を pin すると、親に .pin-spacer が挿入されます。
   それが 100% 幅を取らないよう、左右と同じ幅に固定します。*/
  .case-pair > .pin-spacer {
    flex: 0 0 calc(50% - 1rem) !important;
    width: calc(50% - 1rem) !important;
    max-width: calc(50% - 1rem) !important;
  }
  /* 中の .pair-left は spacer 内で100%にしておくと安定 */
  .case-pair > .pin-spacer > .pair-left {
    width: 100% !important;
  }
  /* ==============================
 * Split Cases (final) end
 * ============================== */
  /* ==============================
   Interview style
   （var/clamp未使用、枠線/角丸/影なし）
============================== */
  .interview-sec {
    background: #f6f1eb;
    padding: 6rem 0 10vw 0;
  }
  .interview-sec .sec-in {
    width: 90vw;
    margin: auto;
  }
  /* 見出し */
  .interview-ttl {
    color: #7a726c;
    font-weight: 200;
    text-align: center;
    line-height: 1;
    letter-spacing: .06rem;
    font-size: 12rem; /* 共通ベースremに追従。必要に応じて調整 */
    margin: 0 0 3rem 0;
  }
  /* 4カラムのグリッド */
  .interview-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3rem 2.5rem;
  }
  /* カード全体がリンク */
  .interview-card {
    display: block;
    color: inherit;
    text-decoration: none;
  }
  /* 画像＋名前帯（左下） */
  .interview-fig {
    position: relative;
    margin: 0 0 2vw 0;
  }
  .interview-fig img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1.2691; /* 見本比率に合わせて整形 */
    object-fit: cover;
  }
  /* 右上コーナー：三角＋↗（リンク示唆） */
  .interview-card .interview-fig::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-top: 3vw solid #ba513a; /* 三角の色／大きさ */
    border-left: 3vw solid transparent;
    z-index: 2;
    pointer-events: none; /* クリックを妨げない */
  }
  /*
.interview-card .interview-fig::after{
  content:"↗️";
  position:absolute;
  top:.35rem; right:.35rem;           
  font-family: 'Jost', sans-serif;    
  font-weight:500;
  font-size:1.2rem;
  line-height:1;
  color:#fff;
  z-index:3;
  pointer-events:none;
}
*/
  .name-band {
    position: absolute;
    left: -0.5vw;
    bottom: -1vw;
    background: #ffffff; /* 装飾は最小限：白帯のみ */
    color: #333333;
    font-size: 1.3rem;
    line-height: 1.6;
    padding: .4rem .8rem;
  }
  .name-band span {
    font-size: 85%;
  }
  /* 部署・役職／紹介文 */
  .interview-meta {
    font-weight: bold;
    line-height: 1.5;
    color: #5a5652;
    margin: 1rem 0 1rem 0;
  }
  .interview-lead {
    font-size: 1.2rem;
    line-height: 1.7;
    color: #3a3836;
    font-weight: 300;
    margin: 0;
    text-align: justify;
    letter-spacing: 0.1rem;
  }
  /* ==============================
   Interview style end
   ============================== */
  /* ==============================
 * Work Environment / Benefits（culture-sec）
 * style FINAL（layout + items） start
 * ============================== */
  /* セクション全体 */
  .culture-sec {
    position: relative;
    isolation: isolate; /* 背景pinと前景の積層を安定化 */
    overflow: hidden; /* 背景画像のはみ出しを隠す */
  }
  /* このセクションに限りフルブリード */
  .culture-sec > .sec-in {
    width: 100%;
    max-width: none;
    padding: 0;
    overflow: visible;
  }
  /* 背景：常に全画面 */
  .culture-bg {
    position: relative; /* ScrollTrigger の pin 対象 */
    width: 100vw;
    height: 100vh;
    margin-left: calc(50% - 50vw);
    overflow: hidden;
    z-index: 0;
  }
  .culture-bg img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform-origin: center center;
    will-change: transform, filter;
  }
  /* 中身（帯＋01〜05） */
  .culture-sticky {
    position: relative;
    z-index: 1;
    min-height: 100vh; /* 表示枠は常に1画面 */
    padding: 0;
    display: grid;
    place-items: center;
    overflow: visible;
  }
  /* 帯（40vw固定、不透明で登場） */
  .culture-panel {
    width: 40vw;
    background: #ffffff;
    color: #333333;
    padding: 2rem 0;
  }
  /* タイトル（帯の冒頭見出し） */
  .culture-ttl {
    font-weight: 300;
    line-height: 1.1;
    letter-spacing: .06rem;
    font-size: 3.6rem; /* rem固定 */
    margin: 0 0 2rem 0;
  }
  /* =========================================
   帯内の装飾（ここからが差し替え部分）
   ========================================= */
  /* 句読点詰め（必要に応じて） */
  .yaku-tight {
    font-feature-settings: "palt";
  }
  /* 01〜05 のリスト */
  .culture-items {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .culture-item + .culture-item {
    margin-top: 6rem; /* 01→02…の間隔 */
  }
  /* 01 の大きな数字 */
  .culture-num {
    text-align: center;
    font-weight: 300;
    font-size: 5rem; /* 見本のサイズ感 */
    line-height: 1;
    color: #947847;
    margin: 0 0 1.2rem 0;
  }
  /* タイトル：HTMLの .culture-title と、既存の .culture-ttl を統一 */
  .culture-title {
    padding: 5vw 0 0 0;
  }
  .culture-title, .culture-ttl {
    text-align: center;
    font-weight: 300;
    line-height: 1.2;
    letter-spacing: .06rem;
    font-size: 2.4rem; /* 帯見出しの存在感（rem固定） */
    margin: 0 0 1rem 0;
    color: #7a726c; /* スクショのグレージュ寄りのトーン */
  }
  /* リード文（serif） */
  .culture-lead {
    text-align: center;
    margin: 0;
    padding: 0 0 10vw 0;
    font-size: 1.4rem;
    line-height: 2;
    letter-spacing: .1rem;
    color: #7a726c;
    opacity: .95; /* 軽く柔らかく（必要なければ削除） */
  }
  /* 見出し（しっかり休める など） */
  .culture-item-ttl {
    text-align: center;
    font-size: 2.7rem;
    line-height: 1.6;
    color: #947847;
    margin: 0 0 2.4rem 0;
  }
  /* 本文ブロック（ゴシック＋約物詰め） */
  .culture-item-body {
    color: #5f5751;
  }
  /* 箇条書き（上・各行に罫線） */
  .culture-list {
    list-style: none;
    margin: 0 0 2rem 0;
    padding: 0;
    border-top: .1rem solid #e2d9cf;
  }
  .culture-list li {
    padding: 1.5rem 2.5rem;
    border-bottom: .1rem solid #e2d9cf;
    font-size: 1.1rem;
    letter-spacing: .08rem;
    line-height: 2;
    text-align: justify;
  }
  .culture-list li span {
    font-size: 0.8rem;
  }
  .culture-item {
    padding: 0 0 5vw 0;
  }
  /* リード文 */
  .culture-item .lead {
    font-size: 1.1rem;
    line-height: 2;
    letter-spacing: .08rem;
    margin: 1.2rem 2.5rem;
    text-align: justify;
  }
  /* ==============================
 * Work Environment / Benefits（culture-sec）
 * style FINAL（layout + items） end
 * ============================== */
  /* ==============================
 * FAQ Section head（タイトル＋リード） start
 * ============================== */
  /* セクション背景：HTML側に .bg-soft（#f6f6f6想定）を付与済み */
  .faq-sec {
    padding: 8vw 0;
    position: relative;
  }
  .faq-sec .sec-in {
    padding: 0 0 0 0;
  }
  /* タイトル */
  .faq-sec .ttl {
    text-align: center;
    margin: 0 0 1.6rem 0;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: .06rem;
    color: #947847; /* ブランドの金茶系 */
  }
  /* リード：共通 .lead を継承し、配置と色のみ上書き */
  .faq-sec .lead {
    text-align: center; /* .lead の justify を上書き */
    color: #7a726c; /* グレージュ系で柔らかく */
    margin: 0; /* 余白はタイトル側で管理 */
  }
  /* ==============================
 * FAQ Section head end
 * ============================== */
  /* ==============================
 * FAQ list（リボン＋QA一覧） start
 * ============================== */
  /* 既存リボンに三角アイコンを追加（色はブランド金茶系） */
  .job-bullet {
    display: inline-block;
    vertical-align: middle;
    margin-right: 1.2rem;
    width: 0;
    height: 0;
    border-top: 1rem solid transparent;
    border-bottom: 1rem solid transparent;
    border-left: 1.5rem solid #947847;
  }
  /* レイアウト：90vw 親 / 85vw インナー */
  .qa-wrap {
    width: 85vw;
    margin: 4rem auto 0 auto;
    border-bottom: .1rem solid #3a332d;
  }
  .qa-in {}
  /* QA 1セット（下線あり） */
  .qa-item {
    width: 80vw;
    margin: auto;
    padding: 3rem 0 5vw 0;
  }
  /* 行レイアウト：アイコン（Q/A）＋本文 */
  .qa-row {
    display: grid;
    grid-template-columns: min-content 1fr;
    column-gap: 2.2rem;
    align-items: baseline;
  }
  /* Q/A 丸アイコン（Jost 200） */
  .qa-mark {
    display: inline-grid;
    place-items: center;
    font-size: 1.6rem;
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    line-height: 1;
    letter-spacing: .06rem;
    color: #3a332d;
  }
  /* テキスト（質問＝太字 / 回答＝300） */
  .qa-text {
    font-size: 1.25rem;
    margin: 0;
    color: #3a332d;
    letter-spacing: .04rem;
    line-height: 2;
  }
  .qa-row--q .qa-text {
    font-weight: 700;
  } /* 質問はbold */
  .qa-row--a .qa-text {
    font-weight: 300;
  } /* 回答は300 */
  /* 行間（Q→A） */
  .qa-row + .qa-row {
    margin-top: 1.8rem;
  }
  /* ==============================
 * FAQ list end
 * ============================== */
  /* ==============================
 * recruit-req（募集要項） start
 * ============================== */
  /* セクション余白（faqヘッドと同等のトーン） */
  .recruit-req {
    padding: 8vw 0;
    background: #716d6a; /* 濃いグレイッシュトーン */
  }
  /* 中央パネル */
  .req-wrap {
    width: 100vw;
    margin: 4rem auto 0 auto;
  }
  .recruit-req .ttl, .recruit-req .lead {
    color: #fff;
    text-align: center;
  }
  .req-panel {
    width: 70vw; /* 見本のやや細め幅 */
    margin: 0 auto;
    color: #efecea; /* パネル内の基本文字色 */
    padding: 4rem 5vw;
  }
  /* 2カラム行：左=項目 / 右=内容（下線区切り） */
  .req-row {
    display: grid;
    grid-template-columns: 10vw 1fr; /* 左ラベルはrem固定で安定 */
    column-gap: 0;
    align-items: start;
    padding: 1.8rem 0;
    border-bottom: .1rem solid rgba(255, 255, 255, 0.35);
  }
  .req-row:first-child {
    padding-top: .2rem;
  }
  .req-row:last-child {
    border-bottom: 0;
  }
  .req-key {
    font-weight: 600;
    letter-spacing: .06rem;
    color: #ffffff; /* ラベルはやや明るく */
    line-height: 1.8;
    margin-left: 0.5rem;
    font-size: 1.1rem
  }
  .req-val {
    font-weight: 300; /* 本文は300で軽め */
    letter-spacing: .04rem;
    line-height: 2;
    color: #ffffff;
    margin-right: 0.5rem;
    font-size: 1.1rem
  }
  .req-val span {
    font-size: 90%;
  }
  /* CTAボタン（中央・大きめピル型） */
  .req-cta {
    text-align: center;
    margin-top: 3.6rem;
  }
  .btn-entry {
    display: inline-block;
    text-decoration: none;
    background: #b6874a; /* ブランド金茶系 */
    color: #fff;
    font-family: 'Noto Serif JP', serif;
    font-size: 1.8rem;
    font-weight: 300;
    letter-spacing: .08rem;
    padding: 1.2rem 3.2rem;
    border-radius: 10rem; /* ピル */
  }
  .btn-entry:hover {
    opacity: 0.8;
  }
  /* ==============================
 * recruit-req end
 * ============================== */
  /* ==============================
 * staff-hero (100vw内／画像70vw右端) start
 * ============================== */
  /* セクション自体は全幅。余白や背景は必要に応じて追加 */
  .staff-hero {
    width: 100vw;
    background: #ffffff;
    padding: 0; /* 成り行き高さに任せる */
    position: relative;
  }
  /* 画像は70vwで右端に寄せる（高さは比率に従って可変） */
  .staff-hero__img {
    width: 70vw;
    margin: 0 0 0 auto; /* ← 右端へ */
  }
  .staff-hero__img img {
    display: block;
    width: 100%;
    height: auto; /* 成り行き（縦は画像比率どおり） */
  }
  /* 右寄せテキストボックス（使うときだけ中身を投入） */
  .staff-hero .sec-in {
    width: 85vw; /* 既定のコンテナ幅 */
    margin: 0 auto;
  }
  .staff-hero__txt {
    width: 32vw; /* 右側にコンパクトなボックス */
    margin-left: auto; /* 右寄せ */
    padding: 0 0 0 0; /* 必要に応じて微調整 */
    text-align: left;
  }
  /* ==============================
 * staff-hero end
 * ============================== */
  /* ==============================
 * interview-hero（左30vw白／右70vw #fbf9f6） start
 * ============================== */
  /* セクション：100vw、背景だけでツートンを表現 */
  .interview-hero {
    position: relative;
    width: 100vw;
    padding: 2rem 0 0 0; /* 高さは成り行き。必要に応じて調整 */
    background: linear-gradient(90deg, #ffffff 0 30vw, /* 左 0→30vw を白 */ #fbf9f6 30vw 100vw /* 右 30vw→100vw を #fbf9f6 */
      );
  }
  /* 中のコンテナ（既定どおり85vw） */
  .interview-hero .sec-in {
    width: 90vw;
    margin: 0 auto;
  }
  /* 大見出し Interview（重ね不要。通常フローでOK） */
  .iv-ttl {
    color: #7a726c;
    font-weight: 200;
    text-align: left;
    line-height: 1;
    letter-spacing: .06rem;
    font-size: 12rem; /* 共通ベースremに追従。必要に応じて調整 */
    margin: 0 0 0 0;
  }
  /* 氏名・肩書き */
  .iv-meta {
    margin: 2rem 0 0rem 1rem;
  }
  .iv-name {
    margin: 0 0 1rem 0;
    font-size: 1.8rem;
    font-weight: 400;
    letter-spacing: .06rem;
    color: #3a3735;
  }
  .iv-name span {
    font-size: 80%;
  }
  .iv-role {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 300;
    letter-spacing: .06rem;
    color: #3a3735;
  }
  /* ==============================
 * interview-hero end
 * ============================== */
  /* ==============================
 * interview-qa（左30vw／右70vw） start
 * ============================== */
  /* セクション全体：背景をツートン（左：白／右：#fbf9f6） */
  .interview-qa {
    width: 100vw;
    padding: 0 0 5vw 0;
    background: linear-gradient(90deg, #ffffff 0 30vw, #fbf9f6 30vw 100vw);
  }
  /* 2カラム：左30vw／右70vw。左画像は“下付き”に */
  .ivqa-grid {
    display: grid;
    grid-template-columns: 30vw 70vw;
    align-items: end; /* ← 左の画像を下端合わせ */
    width: 100vw;
    column-gap: 0;
  }
  /* 左：画像（幅は任意で調整） */
  .ivqa-left {
    margin: 0;
    padding: 0 0 2rem 0; /* 画像の下余白（見本に合わせて微調整） */
    display: flex;
    justify-content: center;
    align-items: flex-end;
  }
  .ivqa-left img {
    display: block;
    width: 24vw; /* 画像の見え幅。必要に応じて 22–26vw で調整 */
    height: auto;
  }
  /* 右：本文ラッパー（背景はセクションのグラデで既に#fbf9f6） */
  .ivqa-right {
    padding: 0 6vw 2rem 6vw;
  }
  /* Qセット */
  .q-item {
    padding: 2.8rem 0;
  }
  .q-item:first-child {
    border-top: none;
  }
  .q-item .ttl, .ivsplit-box .ttl {
    margin: 0 0 1.2rem 0;
    line-height: 1.8;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: .1rem;
    color: #3a3735;
    border-bottom: .1rem solid #dcd5cd; /* 罫線 */
    padding-bottom: 1.2rem;
    font-family: 'Noto Sans JP', sans-serif;
  }
  .q-mark {
    margin: 0 .6rem;
    font-weight: 700;
  }
  .q-txt {
    margin: 0 .6rem;
    font-size: 1.2rem;
    line-height: 2;
    font-weight: 400;
    letter-spacing: .04rem;
    text-align: justify;
    color: #3a3735;
  }
  /* 強調色（文章内の一部をspanで色替え） */
  .c-accent {
    color: #ba513a;
  } /* お好みで金茶系(#b6874a)にも変更可 */
  /* ==============================
 * interview-qa end
 * ============================== */
  /* ==============================
 * interview-split (50/50) start
 * ============================== */
  .interview-split {
    width: 100vw;
    padding: 5vw 0; /* 高さは成り行き＋余白 */
    background: #fff;
  }
  .ivsplit-grid {
    display: grid;
    grid-template-columns: 50vw 50vw;
    align-items: center; /* 行の中央揃え */
    justify-items: center; /* 列の中央揃え */
    width: 100vw;
    column-gap: 0;
  }
  /* 左：上下左右中央にテキスト塊を配置 */
  .ivsplit-left {
    display: grid;
    place-items: center; /* ← セル内センター */
  }
  .ivsplit-box {
    width: 35vw; /* 読み幅（調整可：32–40vw） */
    margin: 0;
  }
  /* 右：画像は列幅に合わせて表示（上下左右中央） */
  .ivsplit-right {
    margin: 0;
    display: grid;
    place-items: center;
  }
  .ivsplit-right img {
    display: block;
    width: 50vw; /* 50vw列の中で余白を持たせる */
    height: auto;
  }
  /* 既存のタイポを流用（参考：不足していれば有効化）
.q-mark{ margin-right: .6rem; font-weight: 700; }
.q-txt{ margin: 0; font-size: 1.6rem; line-height: 2; font-weight: 300; letter-spacing: .04rem; color: #3a3735; }
.c-accent{ color: #e66b4a; }
*/
  /* ==============================
 * interview-split end
 * ============================== */
  /* ==============================
 * other-person（最終セクション） start
 * ============================== */
  .other-person {
    width: 100vw;
    padding: 6rem 0 8rem 0;
    background: #716d6a; /* 見本の濃グレイッシュ */
    color: #efecea; /* デフォは淡い白 */
  }
  /* 右上見出し（Jost） */
  .jost {
    font-family: 'Jost', sans-serif;
  }
  .other-head {
    width: 90vw;
    margin: 0 auto 3rem auto;
    text-align: right;
  }
  .other-ttl {
    margin: 0;
    font-weight: 200;
    letter-spacing: .06rem;
    line-height: 1;
    font-size: 4vw; /* 右肩に大きく */
    color: #ffffff;
  }
  /* 一覧ラッパー（既存グリッドをこの中で使用） */
  .other-body {
    width: 75vw;
    margin: 0rem auto 0 auto;
  }
  .other-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem 2.5rem;
  }
  /* 既存のカードCSSに、背景が暗い時の読みやすさだけ上書き */
  .other-person .interview-meta {
    color: #efecea;
  } /* 明るめに */
  .other-person .interview-lead {
    color: #ffffff;
  } /* さらに白寄りに */
  /* 画像下の名前帯はそのまま白でOK（既存CSSを使用） */
  /* ==============================
 * other-person end
 * ============================== */
}
/*//////////SPサイズ///////////*/
/*//////////SPサイズ///////////*/
@media screen and (max-width:767px) {
  /* ==============================
   * Main Visual（SP）
   * ============================== */
  .MainVisualSection {
    position: relative;
    width: 100vw;
    aspect-ratio: 16 / 12;
    overflow: hidden;
    background-color: #333;
  }
  .MainVisualSection__video-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  .MainVisualSection__video-bg video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .MainVisualSection__overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: rgba(0, 0, 0, .3);
    pointer-events: none;
  }
  .MainVisualSection__content {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: block;
    pointer-events: none;
  }
  .MainVisualSection__brand-movie {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 4;
    margin: 0 0 2.5rem 2.5rem;
    pointer-events: auto;
  }
  .MainVisualSection__brand-link img {
    width: 36vw;
    height: auto;
  }
  .MainVisualSection__brand-link:hover {
    opacity: .8;
  }
  .MainVisualSection__copy {
    position: absolute;
    z-index: 4;
    left: 6.5vw;
    top: 42%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    pointer-events: auto;
    margin: 0;
  }
  .MainVisualSection__en.serif {
    font-family: 'Noto Serif JP', serif;
    font-size: 1.8rem;
    font-weight: 100;
    color: #fff;
    letter-spacing: .2rem;
    line-height: 1.9;
    text-shadow: none;
  }
  .VideoLightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .8);
    z-index: 9999;
    align-items: center;
    justify-content: center;
  }
  .VideoLightbox.is-active {
    display: flex;
  }
  .VideoLightbox__inner {
    position: relative;
    max-width: 90vw;
    max-height: 80vh;
  }
  .VideoLightbox__inner video {
    width: 100%;
    height: auto;
    display: block;
  }
  .VideoLightbox__close {
    position: absolute;
    top: -2.5rem;
    right: -2.5rem;
    font-size: 2rem;
    color: #fff;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 10000;
  }
  /* ==============================
   * recruit-hero（SP）
   * ============================== */
     /* --- ヒーロー（トップイメージ）をフローに戻す：これが最重要 --- */
  .topimage{
    position: relative !important;   /* fixed/absoluteを無効化（SPのみ） */
    height: 100svh;                   /* 1画面ぶんの実寸高さを確保 */
    min-height: 100svh;
    width: 100vw;
    margin-left: calc(50% - 50vw);    /* 全幅のはみ出し対策 */
    overflow: hidden;
    display: block;
  }
  .topimage > .image{                 /* 内部レイヤーは従来通り絶対配置でOK */
    position: absolute;
    inset: 0;
  }
  .recruit-hero {
    position: relative;
  }
  .recruit-hero__visual {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    aspect-ratio: 16 / 11; /* 100vh依存を避ける */
  }
  .recruit-hero__bands {
    position: absolute;
    z-index: 555;
    top: 70%;
    left: 6.5vw;
    transform: translateY(-50%);
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  /* ==============================
   * recruit-story（SP）
   * 「背面に回る」「一挙に発火」を回避する静的版
   * ============================== */
  /* ==== SP: recruit-story（PC挙動をSP再現・ブラーはCSS変数） ==== */
  .recruit-story {
    position: relative;
    z-index: 0; /* 基準 */
    isolation: isolate; /* 前後セクションの影響を抑える */
    background: transparent;
  }
  .story-scene {
    position: relative;
    height: 100vh; /* ← pin前提なので100vh */
    overflow: clip;
  }
  .story-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
  }
  .story-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    will-change: transform, filter;
    /* ブラーはJSから --story-blur を操作 */
    filter: blur(var(--story-blur, 0rem));
  }
  .story-overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    /* 初期は透明（スクロールで0.5に） */
    background: rgba(255, 255, 255, 0);
  }
  .recruit-story .sec-in {
    width: 87vw;
    margin: 0 auto;
    height: 100%;
    display: grid;
    place-items: center; /* PC同様に中央配置 */
  }
  .story-words {
    position: static;
    z-index: 1;
    width: auto;
    margin: 0;
    text-align: left;
  }
  .story-catch {
    margin: 0 0 1.6rem 0;
    font-weight: 600;
    line-height: 1.8;
    letter-spacing: 0rem;
    font-size: 1rem;
    font-feature-settings: "palt"1, "pkna"1, "pwid"1;
  }
  .story-body {
    font-size: 0.9rem;
    line-height: 1.8;
    letter-spacing: .08rem;
    text-align: justify;
  }
  /* ==============================
   * Recruit Message（SP）
   * ============================== */
  .message-sec {
    position: relative;
    padding: 12vw 0 0 0;
    min-height: 0;
    background-position: 0%;
    background-image: linear-gradient(112deg, rgba(213, 219, 228, 1) 0%, rgba(208, 216, 226, 1) 34.38%, rgba(165, 182, 197, 1) 69.69%, rgba(101, 124, 151, 1) 100%);
  }
  .message-sec .sec-in {
    width: 87vw;
    margin: 0 auto;
  }
  .message-head {
    margin: 0 0 1.6rem 0;
  }
  .message-label {
    display: inline-block;
    background: #fff;
    padding: .8rem 6vw .6rem 10vw;
    font-weight: 100;
    letter-spacing: .18rem;
    line-height: 1;
    font-size: 1.4rem;
  }
  .message-words {
    width: auto;
    padding: 6vw 0 0 0;
  }
  .message-words .lead {
    line-height: 1.8;
    font-size: .9rem;
    letter-spacing: .08rem;
    text-align: justify;
    margin: 0 0 2rem 0;
  }
  .message-sign {
    line-height: 1.6;
    letter-spacing: .08rem;
    margin: 2.4rem 0 0 0;
    font-size: 1.2rem;
  }
  .message-portrait {
    position: static;
    width: 87vw;
    margin: 2rem auto 0;
    pointer-events: none;
  }
  .message-portrait img {
    width: 80%;
    height: auto;
    display: block;
    margin: auto;
  }
  /* ==============================
   * Job Intro（SP）
   * ============================== */
  .jobintro-sec {
    padding: 0 0 4rem;
    background: linear-gradient(135deg, #f6f1eb 0%, #f6f1eb 100%);
    position: relative;
  }
  .job-head {
    position: relative;
    margin: 8vw 0 2rem 0;
  }
  .job-ribbon {
    width: 100%;
    display: inline-flex;
    align-items: center;
    background: #fff;
    padding: 1rem 0 1rem 6vw;
    font-weight: 100;
    letter-spacing: .18rem;
    line-height: 1;
    font-size: 1.4rem;
  }
  .job-label {
    display: inline-flex;
    align-items: center;
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: .08rem;
  }
  .job-label span {
    font-size: 80%;
    margin-right: 1rem;
  }
  .job-catch {
    text-align: center;
    margin: 3rem auto 1.5rem auto;
    font-weight: 600;
    letter-spacing: .08rem;
    line-height: 1.8;
    font-size: 1.4rem;
  }
  .job-body {
    text-align: justify;
    width: 87vw;
    margin: 0 auto;
    letter-spacing: .08rem;
    line-height: 1.8;
    font-size: .9rem;
  }
  /* ==============================
   * Roles（SP：1カラム）
   * ============================== */
  .roles-sec {
    padding: 0;
  }
  .roles-grid {
    width: 87vw;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .role-card {
    position: relative;
    aspect-ratio: 9 / 16;
    overflow: hidden;
  }
  .role-bg {
    position: absolute;
    inset: 0;
  }
  .role-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    margin: auto;
  }
  .role-grad {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 56%;
    background: linear-gradient(to top, var(--ov, rgba(0, 0, 0, .62)) 0%, var(--ov, rgba(0, 0, 0, .62)) var(--cut, 68%), rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
  }
  .role-label {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 52%;
    background: #fff;
    padding: .25rem 1.4rem;
    width: 90%;
    text-align: center;
    font-size: 1.3rem;
    letter-spacing: .1rem;
    line-height: 1.6;
    white-space: nowrap;
  }
  .role-text {
    position: absolute;
    left: 0;
    right: 0;
    top: 61%;
    color: #fff;
    padding: 0 0 2.4rem 0;
    width: 87vw;
    max-width: 90%;
    margin: auto;
  }
  .role-text .lead {
    font-size: .9rem;
    line-height: 1.8;
    letter-spacing: .08rem;
    text-align: justify;
    margin: 0;
  }
  .col--1 {
    --ov: rgba(32, 72, 108, .66);
    --cut: 70%;
  }
  .col--2 {
    --ov: rgba(152, 108, 72, .66);
    --cut: 64%;
  }
  .col--3 {
    --ov: rgba(18, 110, 86, .66);
    --cut: 72%;
  }
  /* ==============================
   * Career path（SP）
   * ============================== */
  .career-sec {
    background: #f6f1eb;
    padding: 4rem 0 0 0;
  }
  .career-ttl {
    color: #7a726c;
    font-weight: 200;
    text-align: center;
    line-height: 1;
    letter-spacing: .06rem;
    font-size: 14vw;
  }
  .career-sub {
    color: #7a726c;
    text-align: center;
    margin: 1.2rem auto 0;
    font-size: 1.2rem;
    line-height: 1.7;
    letter-spacing: .08rem;
  }
  /* ==============================
   * Split Cases（SP：GSAP無しの縦積み）
   * ============================== */
  .cases-sec {
    padding: 4rem 0 .5rem 0;
    background: #f6f1eb;
  }
  .case-pair {
    display: block;
    margin: 0 0 3rem 0;
  }
  .pair-left {
    position: relative;
    width: 100%;
    height: auto;
    z-index: 0;
  }
  .pair-figure {
    position: relative;
    width: 87vw;
    margin: 0 auto 1.5rem;
    overflow: visible;
  } /* 画像直後に本文が“すぐ続く” */
  .pair-title {
    position: absolute;
    left: 3vw;
    top: -1rem; /* ← SPは負のtopを撤廃 */
    display: inline-block;
    writing-mode: vertical-rl !important;
    -ms-writing-mode: tb-rl;
    text-orientation: upright;
    white-space: nowrap;
    color: #947847;
    font-size: 9vw;
    line-height: 1;
    letter-spacing: 1rem;
    z-index: 1;
    opacity: .7;
    font-weight: 500;
  }
  .after {
    font-size: 7.5vw;
    letter-spacing: 0;
  }
  .pair-figure img {
    position: static;
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
  }
  .case {
    position: relative;
    width: 87vw;
    min-width: 0;
    padding: 0;
    margin: 0 auto;
    z-index: 1;
  }
  .case-head {
    margin: 0 0 1.2rem 0;
  }
  .case-no {
    font-size: 1.1rem;
    letter-spacing: .1rem;
    margin: 0 0 1.2rem 0;
    font-weight: 300;
  }
  .case-no span {
    font-size: .95rem;
    padding-left: 1rem;
  }
  .case-ttl {
    font-size: 1.4rem;
    margin: 0 0 .8rem 0;
  }
  .case-ttl span {
    font-size: 80%;
    padding-left: 1rem;
  }
  .case-meta {
    font-size: 1rem;
    margin: 0;
  }
  .case-sec-ttl {
    font-size: 1.2rem;
    margin: 1.6rem 0 .6rem;
    font-weight: bold;
  }
  .case .lead {
    width: auto;
    max-width: 100%;
    font-size: 1rem;
    line-height: 1.8;
    letter-spacing: .08rem;
    margin: 0;
    text-align: justify;
  }
  .case-schedule {
    margin: .4rem 0 1.6rem;
  }
  .case-schedule div {
    display: grid;
    grid-template-columns: 4rem 1fr;
    gap: .8rem;
    padding-bottom: .4rem;
  }
  .case-schedule dt {
    font-weight: 300;
    font-family: 'Jost', sans-serif;
    font-size: 1.3rem;
  }
  .case-schedule dd {
    margin: 0;
  }
  .case-divider {
    width: 87vw;
    height: .1rem;
    background: #cfcfcf;
    margin: 3rem auto;
  }
  /* ==============================
   * Interview list（SP）
   * ============================== */
  .interview-sec {
    background: #f6f1eb;
    padding: 4rem 0 10vw 0;
  }
  .interview-sec .sec-in {
    width: 90vw;
    margin: auto;
  }
  .interview-ttl {
    color: #7a726c;
    font-weight: 200;
    text-align: center;
    line-height: 1;
    letter-spacing: .06rem;
    font-size: 14vw;
    margin: 0 0 2rem 0;
  }
  .interview-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  } /* ご提出CSSの意図を尊重し2カラム */
  .interview-card {
    display: block;
    color: inherit;
    text-decoration: none;
  }
  .interview-fig {
    position: relative;
    margin: 0 0 2vw 0;
  }
  .interview-fig img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1/1.2691;
    object-fit: cover;
  }
  .interview-card .interview-fig::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-top: 6vw solid #ba513a;
    border-left: 6vw solid transparent;
    z-index: 2;
    pointer-events: none;
  }
  .name-band {
    position: absolute;
    left: -.5vw;
    bottom: -1vw;
    background: #fff;
    color: #333;
    font-size: 1rem;
    line-height: 1.6;
    padding: .4rem .8rem;
  }
  .name-band span {
    display: block;
    font-size: 50%;
  }
  .interview-meta {
    font-weight: bold;
    line-height: 1.5;
    color: #5a5652;
    margin: 1rem 0 .5rem 0;
    font-size: .9rem;
  }
  .interview-lead {
    font-size: .9rem;
    line-height: 1.75;
    color: #3a3836;
    font-weight: 300;
    margin: 0;
    text-align: justify;
    letter-spacing: 0;
  }
  /* ==============================
   * Work Environment / Benefits（culture-sec, SP）
   * ============================== */
  .culture-sec {
    position: relative;
    isolation: isolate;
    overflow: hidden;
  }
  .culture-sec > .sec-in {
    width: 100%;
    max-width: none;
    padding: 0;
    overflow: visible;
  }
  .culture-bg {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    height: 100vh; /* ← ご要望：常に全画面 */
    overflow: hidden;
    z-index: 0;
  }
  .culture-bg img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform-origin: center center;
    will-change: transform, filter;
  }
  .culture-sticky {
    position: relative;
    z-index: 1;
    min-height: auto;
    padding: 0;
    display: block;
    overflow: visible;
  }
  .culture-panel {
    width: 87vw;
    margin: -10vw auto 0 auto;
    background: #fff;
    color: #333;
    padding: 2rem 0;
  }
  .culture-ttl {
    font-weight: 300;
    line-height: 1.2;
    letter-spacing: .06rem;
    font-size: 2rem;
    margin: 0 0 1.6rem 0;
    color: #7a726c;
  }
  .yaku-tight {
    font-feature-settings: "palt";
  }
  .culture-items {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .culture-item + .culture-item {
    margin-top: 4rem;
  }
  .culture-num {
    text-align: center;
    font-weight: 300;
    font-size: 3.6rem;
    line-height: 1;
    color: #947847;
    margin: 0 0 1rem 0;
  }
  .culture-title {
    padding: 5vw 0 0 0;
  }
  .culture-title, .culture-ttl {
    text-align: center;
    font-weight: 300;
    line-height: 1.4;
    letter-spacing: .06rem;
    font-size: 1.6rem;
    margin: 0 0 1rem 0;
    color: #7a726c;
  }
  .culture-lead {
    text-align: center;
    margin: 0;
    padding: 0 0 8vw 0;
    font-size: 1.1rem;
    line-height: 1.8;
    letter-spacing: .1rem;
    color: #7a726c;
    opacity: .95;
  }
  .culture-item-ttl {
    text-align: center;
    font-size: 1.8rem;
    line-height: 1.6;
    color: #947847;
    margin: 0 0 1.6rem 0;
  }
  .culture-item-body {
    color: #5f5751;
  }
  .culture-list {
    list-style: none;
    margin: 0 0 1.6rem 0;
    padding: 0;
    border-top: .1rem solid #e2d9cf;
  }
  .culture-list li {
    padding: 1.2rem 1.6rem;
    border-bottom: .1rem solid #e2d9cf;
    font-size: 1rem;
    letter-spacing: .08rem;
    line-height: 1.8;
    text-align: justify;
  }
  .culture-list li span {
    font-size: .9rem;
  }
  .culture-item {
    padding: 0 0 5vw 0;
  }
  .culture-item .lead {
    font-size: 1rem;
    line-height: 1.8;
    letter-spacing: .08rem;
    margin: 1rem 1.6rem;
    text-align: justify;
  }
  /* ==============================
   * FAQ（SP）
   * ============================== */
  .faq-sec {
    padding: 8vw 0;
    position: relative;
  }
  .faq-sec .sec-in {
    padding: 0;
  }
  .faq-sec .ttl {
    text-align: center;
    margin: 0 0 1.6rem 0;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: .06rem;
    color: #947847;
  }
  .faq-sec .lead {
    text-align: center;
    color: #7a726c;
    margin: 0;
  }
  .job-bullet {
    display: inline-block;
    vertical-align: middle;
    margin-right: 1.2rem;
    width: 0;
    height: 0;
    border-top: 1rem solid transparent;
    border-bottom: 1rem solid transparent;
    border-left: 1.5rem solid #947847;
  }
  .qa-wrap {
    width: 87vw;
    margin: 2rem auto 2rem auto;
    border-bottom: .1rem solid #3a332d;
  }
  .qa-item {
    width: auto;
    margin: 0 auto;
    padding: 0 0 5vw 0;
  }
  .qa-row {
    display: grid;
    grid-template-columns: min-content 1fr;
    column-gap: 1rem;
    align-items: baseline;
  }
  .qa-mark {
    display: inline-grid;
    place-items: center;
    font-size: 1.4rem;
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    line-height: 1;
    letter-spacing: .06rem;
    color: #3a332d;
  }
  .qa-text {
    font-size: 1rem;
    margin: 0;
    color: #3a332d;
    letter-spacing: .04rem;
    line-height: 1.8;
	text-align: justify;
  }
  .qa-row--q .qa-text {
    font-weight: 700;
  }
  .qa-row--a .qa-text {
    font-weight: 300;
  }
  .qa-row + .qa-row {
    margin-top: 1.6rem;
  }
  /* ==============================
   * recruit-req（SP）
   * ============================== */
  .recruit-req {
    padding: 6rem 0;
    background: #716d6a;
  }
  .req-wrap {
    width: 100vw;
    margin: 3rem auto 0 auto;
  }
  .recruit-req .ttl, .recruit-req .lead {
    color: #fff;
    text-align: center;
  }
  .req-panel {
    width: 87vw;
    margin: 0 auto;
    color: #efecea;
    padding: 2.4rem 5vw;
  }
  .req-row {
    display: block;
    padding: 1.4rem 0;
    border-bottom: .1rem solid rgba(255, 255, 255, .35);
  }
  .req-row:first-child {
    padding-top: .2rem;
  }
  .req-row:last-child {
    border-bottom: 0;
  }
  .req-key {
    font-weight: 600;
    letter-spacing: .06rem;
    color: #fff;
    line-height: 1.8;
    margin: 0 0 .4rem .2rem;
    font-size: 1.05rem;
  }
  .req-val {
    font-weight: 300;
    letter-spacing: .04rem;
    line-height: 1.8;
    color: #fff;
    margin: 0 .3rem 0 .3rem;
    font-size: 1.05rem;
	text-align: justify;
  }
  .req-val span {
    font-size: 90%;
  }
  .req-cta {
    text-align: center;
    margin-top: 3rem;
  }
  .btn-entry {
    display: inline-block;
    text-decoration: none;
    background: #b6874a;
    color: #fff;
    font-family: 'Noto Serif JP', serif;
    font-size: 1.6rem;
    font-weight: 300;
    letter-spacing: .08rem;
    padding: 1rem 2.8rem;
    border-radius: 10rem;
  }
  .btn-entry:hover {
    opacity: .8;
  }
  /* ==============================
   * staff-hero（SP）
   * ============================== */
  .staff-hero {
    width: 100vw;
    background: #fff;
    padding: 70px 0 0 0;
    position: relative;
  }
  .staff-hero__img {
    width: 100vw;
    margin: 0;
  }
  .staff-hero__img img {
    display: block;
    width: 100%;
    height: auto;
  }
  .staff-hero .sec-in {
    width: 87vw;
    margin: 0 auto;
  }
  .staff-hero__txt {
    width: 87vw;
    margin: 1.6rem 0 0 auto;
    padding: 0;
    text-align: left;
  }
  /* ==============================
   * interview-hero（SP）
   * ============================== */
  .interview-hero {
    position: relative;
    width: 100vw;
    padding: 2rem 0 0 0;

  }
  .interview-hero .sec-in {
    width: 90vw;
    margin: 0 auto;
  }
  .iv-ttl {
    color: #7a726c;
    font-weight: 200;
    text-align: left;
    line-height: 1;
    letter-spacing: .06rem;
    font-size: 14vw;
    margin: 0;
  }
  .iv-meta {
    margin: 1.6rem 0 0 1rem;
  }
  .iv-name {
    margin: 0 0 .8rem 0;
    font-size: 1.6rem;
    font-weight: 400;
    letter-spacing: .06rem;
    color: #3a3735;
  }
  .iv-name span {
    font-size: 80%;
  }
  .iv-role {
    padding: 0 0 1rem 0;
    font-size: 1rem;
    font-weight: 300;
    letter-spacing: .06rem;
    color: #3a3735;
  }
  /* ==============================
   * interview-qa（SP）
   * ============================== */
  .interview-qa {
    width: 100vw;
    padding: 0 0 5vw 0;

  }
  .ivqa-grid {
    display: block;
    width: 100vw;
  }
  .ivqa-left {
    margin: 0;
    padding: 0 0 2rem 0;
    display: flex;
    justify-content: center;
    align-items: flex-end;
  }
  .ivqa-left img {
    display: block;
    width: 80vw;
    height: auto;
  }
  .ivqa-right {
    padding: 0 6.5vw 2rem 6.5vw;
  }
  .q-item {
    padding: 2rem 0;
  }
  .q-item:first-child {
    border-top: none;
  }
  .q-item .ttl, .ivsplit-box .ttl {
    margin: 0 0 1rem 0;
    line-height: 1.8;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: .1rem;
    color: #3a3735;
    border-bottom: .1rem solid #dcd5cd;
    padding-bottom: 1rem;
    font-family: 'Noto Sans JP', sans-serif;
  }
  .q-mark {
    margin: 0 .6rem;
    font-weight: 700;
  }
  .q-txt {
    margin: 0 .6rem;
    font-size: 1rem;
    line-height: 1.8;
    font-weight: 400;
    letter-spacing: .04rem;
    text-align: justify;
    color: #3a3735;
  }
  .c-accent {
    color: #ba513a;
  }
  /* ==============================
   * interview-split（SP）
   * ============================== */
  .interview-split {
    width: 100vw;
    padding: 5vw 0;

  }
  .ivsplit-grid {
    display: block;
    width: 100vw;
  }
  .ivsplit-left {
    display: grid;
    place-items: center;
  }
  .ivsplit-box {
    width: 87vw;
    margin: 0;
  }
  .ivsplit-right {
    margin: 2rem 0 0 0;
    display: grid;
    place-items: center;
  }
  .ivsplit-right img {
    display: block;
    width: 100vw;
    height: auto;
  }
  /* ==============================
   * other-person（SP）
   * ============================== */
  .other-person {
    width: 100vw;
    padding: 4rem 0 6rem 0;
    background: #716d6a;
    color: #efecea;
  }
  .other-head {
    width: 90vw;
    margin: 0 auto 2rem auto;
    text-align: left;
  }
  .other-ttl {
    margin: 0;
    font-weight: 200;
    letter-spacing: .06rem;
    line-height: 1;
    font-size: 8vw;
    color: #fff;
  }
  .other-body {
    width: 87vw;
    margin: 0 auto;
  }
  .other-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem; /* ← ご指定どおり3分割 */
  }
  .other-person .interview-meta {
    color: #efecea;
  }
  .other-person .interview-lead {
    color: #ffffff;
  }
}