@charset "UTF-8";

/* ============================================================
   index.css
   トップページ専用スタイル
   （共通パーツは common.css / global-menu.css を参照）
============================================================ */

/* ------------------------------------------------------------
   セクション共通見出し
------------------------------------------------------------ */
.section-title {
  text-align: center;
  font-size: 2.0rem;
  font-weight: 300;
  color: var(--text-heading);
  margin-bottom: 50px;
  letter-spacing: 0.1em;
  font-family: var(--font-mincho);
  display: block;
}
@media screen and (max-width: 768px) {
  .section-title { font-size: 1.4rem; }
}

/* 装飾記号（＼／）：視覚的には残すが読み上げ対象からは除外済み（aria-hidden） */
.deco-slash {
  color: var(--color-pink-bright);
  font-weight: 300;
}

/* 「子育てしながら、のびのび働けます」：＼／で挟むフレックス見出し */
.section-title-voice {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  white-space: nowrap;
}
.section-title-voice .voice-title-text {
  text-align: center;
  background: var(--gradient-heading);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--color-blue-ink); /* 非対応ブラウザ用フォールバック */
}
.section-title-voice .deco-slash {
  flex-shrink: 0;
  line-height: 1;
}
.section-title-voice .voice-title-text b { font-weight: 700; }
/* PCのみ一段階小さく */
@media screen and (min-width: 769px) {
  .section-title-voice { font-size: 1.75rem; }
}
/* 中間サイズの画面では折り返しを許可して横はみ出しを防ぐ */
@media screen and (max-width: 1024px) {
  .section-title-voice { white-space: normal; }
}
/* SP：2行化（文字も一段大きく）。両サイドの＼／は縦に伸ばして2行全体にかける */
@media screen and (max-width: 768px) {
  .section-title-voice {
    font-size: 1.32rem;
    gap: 0.2em;
  }
  .section-title-voice .voice-title-text {
    line-height: 1.55;
    letter-spacing: 0.03em;
    font-weight: 700;
  }
  .section-title-voice .deco-slash {
    font-size: 1.9rem;
    transform: scaleY(1.9);          /* ← 斜線の長さ調整（大きいほど縦に長い）。3行時は2.7 */
    align-self: center;
  }
}
@media screen and (max-width: 360px) {
  .section-title-voice { font-size: 1.15rem; }
  .section-title-voice .deco-slash { font-size: 1.7rem; }
}

/* ============================================================
   どんなあなたも、ここで働ける（イラスト付き4パネル）
============================================================ */
.support-illust-section { background: #fff; }
.support-illust-section .section-title { margin-bottom: 30px; }

/* 「あなたが輝く場所があります」：グラデ文字＋左右キラキラで印象的に */
.si-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.si-heading-text {
  background: var(--gradient-heading);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--color-blue-ink); /* 非対応ブラウザ用フォールバック */
}
.si-spark {
  color: var(--color-pink-bright);
  font-size: 0.72em;
  animation: si-sparkle 2.2s ease-in-out infinite;
}
.si-spark-r { animation-delay: 1.1s; }
@keyframes si-sparkle {
  0%, 100% { opacity: 0.45; transform: scale(0.85); }
  50%      { opacity: 1;    transform: scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
  .si-spark { animation: none; }
}
@media screen and (max-width: 768px) {
  .si-heading { gap: 10px; }
  .si-heading-text .ak-strong { font-weight: 700; }
}

/* 「あなたが輝く場所があります」直下のスタッフ紹介動画 */
.si-video-wrap {
  max-width: 1000px;
  margin: 0 auto 44px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(34, 34, 34, 0.06);
}
.si-video {
  display: block;
  width: 100%;
  object-fit: cover;
  background: var(--color-champagne);
}
/* PC：横長（2500:650）／SP：縦長（1250:1500）に切り替え
   ⚠ display:none はダウンロードを止めないため、この形だとPC用(758KB)と
     SP用(922KB)の両方が毎回落ちます（ご指定により元の挙動に戻しています）。 */
.si-video-pc { aspect-ratio: 2500 / 650; }
.si-video-sp { aspect-ratio: 1250 / 1500; display: none; }
@media screen and (max-width: 768px) {
  .si-video-wrap { max-width: 330px; margin-bottom: 34px; border-radius: 12px; }
  .si-video-pc { display: none; }
  .si-video-sp { display: block; }
}

/* 4項目（背景色なし） */
.si-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}
/* PC：イラストを小さく・4つをぎゅっと中央へ */
@media screen and (min-width: 1025px) {
  .si-grid { max-width: 880px; margin: 0 auto; gap: 20px; }
  .si-illust-wrap { width: 86px; height: 86px; }
}

.si-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: 10px;
}

/* イラスト＋吹き出しタグ */
.si-illust-wrap {
  position: relative;
  width: 108px;
  height: 108px;
  margin-bottom: 14px;
}
.si-illust {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.si-title {
  font-family: var(--font-mincho);
  font-size: 1.18rem;
  font-weight: 500;
  color: var(--text-heading);
  margin: 0 0 10px;
}
.si-badge {
  display: inline-block;
  font-family: var(--font-gothic);
  font-size: 0.83rem; /* 0.89rem から1段階（14.94px・下限14.04pxは割らない） */
  font-weight: 700;
  padding: 5px 16px;
  margin: 0;
  border-radius: 6px;
  background: var(--color-pink-pale);
  border: 0; /* 枠なし。§3の「非リンク＝白地＋枠線」の例外（ご指定） */
  color: var(--text-light); /* --color-pink-pale 地で 4.69（基準4.5をクリア） */
}

/* PC（4カラム＝列幅205px）で「残業なし・母子父子手当」(11字)と
   「研修あり/カットなしOK」が折り返していた。左右paddingを16→12pxにして収めている。
   文字は0.87→0.81rem（14.58px）。太字＋枠線なしにしたぶんを再実測し、
   最大 187.0px（余裕18.0px）。14px下限は割らない */
@media screen and (min-width: 1025px) {
  .si-badge { font-size: 0.81rem; padding: 5px 12px; white-space: nowrap; }
}

@media screen and (max-width: 1024px) {
  .si-grid { grid-template-columns: repeat(2, 1fr); gap: 40px 24px; }
}
/* SP：明朝は細く見えるので、この4枚の見出しとセクション見出しを太くする */
@media screen and (max-width: 768px) {
  .si-title { font-weight: 700; }
  .si-heading, .si-heading .si-heading-text, .si-heading .si-spark { font-weight: 700; }
}
@media screen and (max-width: 768px) {
  /* SPは1.2倍に。2カラムに収まらない語は折り返してよい（既存の <br class="sp-br"> が
     「残業なし・／母子父子手当」「指名/歩合給・／独立支援」の区切りを担う） */
  .si-badge { font-size: 1.0rem; white-space: normal; line-height: 1.45; }
}
@media screen and (max-width: 480px) {
  .si-grid { grid-template-columns: repeat(2, 1fr); gap: 34px 14px; }
  .si-title { font-size: 1.05rem; white-space: nowrap; }
  .si-badge { font-size: 0.95rem; padding: 6px 12px; white-space: normal; line-height: 1.45; }
}

/* ============================================================
   ヒーローエリア（スライダー＋連動テキスト帯）
============================================================ */
.hero-section {
  position: relative;   /* v14：SPでドットを写真の下端に置くための基準 */
  width: 100%;
  display: flex;
  flex-direction: column;
}

/* スライダー枠（PC：横長 9:3） */
.hero-slider-wrap {
  width: 100%;
  aspect-ratio: 1800 / 560; /* PC：文字入り画像（1800:560）に合わせる。SPは下で1:0.85に上書き */
  position: relative;
  overflow: hidden;
  background: #fff;
}

/* スライド1枚ごと */
.hero-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease; /* 切り替え4.0秒に合わせて1.5s→1s */
}
.hero-slide.active {
  opacity: 1;
  z-index: 2;
}
/* <picture> は箱を作らせず、中の <img>（.hero-media）を .hero-slide の直下扱いにする */
.hero-slide picture { display: contents; }
.hero-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
/* ヒーローの見出し：基底（SP吹き出し用のデフォルト） */
.hero-bubble {
  position: absolute;
  z-index: 3;
}
.hero-line {
  margin: 0;
  font-family: var(--font-mincho);
  color: var(--text-main);
  line-height: 1.55;
}
.hero-line-accent {
  /* 吹き出しは SP のみ表示。枠線と文字を同じコーラルで揃えている。
     地色 --color-pink-pale に対して 2.60（基準4.5）。読ませる文字には --color-pink-text を使う */
  color: var(--color-pink-bright);
  font-weight: 700;
  font-size: 1.28em;
  margin-bottom: 2px;
}
.hero-line-small {
  font-size: 0.78em;
  color: var(--text-light);
}

/* PC：左からの透過帯＋白い大きめ文字（1行ずつ順次フェード表示） */
@media screen and (min-width: 769px) {
  /* PCは「文字入り画像」を使用するため、オーバーレイのコメントは非表示 */
  .hero-bubble,
  .hero-bubble-right { display: none; }
}
@keyframes heroLineReveal {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-slide.active .hero-line { animation: none; opacity: 1; transform: none; }
}

/* 帯（文字は撤去し、色の面とドットのみ。引き締め＋華やかさの担保） */
.hero-sync-text-wrap {
  /* 細い1色の帯。白文字とのコントラストは2.2:1（基準4.5）。
     読みやすさを優先する場合は background を var(--color-blue-ink) に、
     または .hero-band-text の色を var(--text-main) にする */
  background: var(--color-mauve-light);
  padding: 0;
  text-align: center;
  position: relative;
  height: 34px; /* 28px の約1.2倍（PC/SP共通）。バッジ約24px＋上下余白5pxずつが収まる。
                   色だけの帯に戻す場合は 22px */
  display: flex;
  justify-content: center;
  align-items: center;
}
/* ↓ 帯の文言は現在HTMLから撤去済み。復活させる場合に備えて残置 */
.hero-sync-text {
  position: absolute;
  opacity: 0;
  transition: opacity 1.5s ease;
  font-size: 1.42rem; /* 帯の厚みに合わせて 1.33rem から変更 */
  color: #fff;
  font-family: var(--font-gothic);
  font-weight: bold;
  margin: 0;
  letter-spacing: 0.05em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
}
.hero-sync-text.active {
  opacity: 1;
  z-index: 2;
}

/* 帯の一行（職種を明示。FVで唯一の実テキストになるため小さくても入れる） */
.hero-band-text {
  margin: 0;
  font-family: var(--font-gothic);
  font-size: 0.85rem; /* 約15px。帯28pxに収める */
  font-weight: 500;
  letter-spacing: 0.06em;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.30); /* 淡い地に白文字なので輪郭を補う */
}

/* スライド切り替えドット（帯の右端に配置・白抜き） */
.hero-dots {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: 8px;
  z-index: 3;
}
.hero-dot {
  position: relative;
  width: 10px;
  height: 10px;
  padding: 0;
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease;
}
/* 帯が22pxと薄いため、透明な当たり判定を上下左右に広げる（見た目は変わらない） */
.hero-dot::after {
  content: '';
  position: absolute;
  top: -12px;
  right: -8px;
  bottom: -12px;
  left: -8px;
}
.hero-dot:hover { background: rgba(255, 255, 255, 0.6); }
.hero-dot.is-active {
  background: #fff;
  transform: scale(1.25);
}
.hero-dot:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
/* 狭い画面では帯の文字と干渉しないよう少し小さく・内側に */
@media screen and (max-width: 480px) {
  .hero-dots { right: 12px; gap: 6px; }
  .hero-dot { width: 8px; height: 8px; }
}

/* SP：帯の文字とドット3つの重なりを解消する（v14で方針変更）
   ---------------------------------------------------------------
   v13は「帯の中を左寄せにして右端46pxをドット用に空ける」方式だった。
   v14ではドット自体を帯の外（写真の下端・左右センター）へ移したので、
   帯の中身はバッジ＋文言だけになり、左右センターに戻せる。
   ・ドットの基準を .hero-sync-text-wrap から .hero-section に移すため、
     この帯だけ position:static にする（.hero-dots の absolute が section を見る）
   ・文字サイズの clamp は v13のまま据え置き。右端46pxが空いたぶんの余裕は
     指示書§5の下限14pxへ戻す余地として残してある（要判断） */
@media screen and (max-width: 768px) {
  .hero-sync-text-wrap {
    position: static;
    justify-content: center;
    padding: 0 12px;
  }
  /* ドットを写真の下端・左右センターへ。白丸なので写真側が明るいと沈むため、
     影を付けて輪郭を確保する */
  .hero-dots {
    top: auto;
    right: auto;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    gap: 10px;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
  }
  .hero-dot { width: 10px; height: 10px; }
  /* 帯を厚くして文字を大きくする（34px → 46px）。
     中身は「バッジ＋本文」で1行。実測 W100（font-size:100px時の幅）は
       バッジ「週２・１日４時間〜」900px ／ 本文「美容師・カラーリスト募集」1224px
     バッジのpadding14px＋間隔7pxが固定でかかる。
       本文f =（vw − 左右padding24 − 21 − 余白6）÷（900×0.88 + 1224）×100 ≒ 4.92vw − 2.55px
     バッジはその0.88倍。上限は本文21px／バッジ18.5px（帯46pxに収まる範囲の上限）。
     ⚠ 文言を変えたら W100 を実測し直して係数を引き直すこと。 */
  .hero-band-text {
    /* 例外：320〜345px端末のみ14px未満（13.2〜13.4px）。1行に収めることを優先 */
    font-size: clamp(13px, calc(4.92vw - 2.55px), 21px);
    letter-spacing: 0.02em;
    white-space: nowrap;
  }
  /* ⚠ .hero-band-badge のSP指定はここには書けない。
       基底の .hero-band-badge が このブロックより後ろ（「FVの帯」の節）にあり、
       同じ詳細度なので後勝ちで無効になる（§10-⑤）。
       v14まで、ここに置かれていた clamp 指定は丸ごと効いていなかった。
       SP用の指定は基底ルールの直後に置いてある。 */
  .hero-sync-text-wrap { height: 46px; }
}

/* スマホ：縦書きの吹き出しを左右どちらかに配置（写真の人物と住み分ける） */
@media screen and (max-width: 768px) {
  .hero-slider-wrap {
    aspect-ratio: 1 / 0.85; /* 縦書きの柱が収まる高さ。SP画像も同比率（1400×1190）で用意 */
    height: auto;
  }
  .img-pc { display: none; }
  .img-sp {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center; /* 画像1400×1190と枠が同比率（1:0.85）のため切り取りは発生しない */
  }

  /* 吹き出し本体（縦書き） */
  .hero-bubble {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    width: auto;
    max-width: 50%;
    height: 70%; /* 縦書きでは高さ＝1行の長さ。最長6文字分（約168px）が収まる値。小文字を削除したため82%から縮小 */
    left: auto;
    right: auto;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    padding: 18px 16px;
    min-height: 0;
    display: block;
    box-sizing: border-box;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.94); /* SP版のみ白（透過）。枠線のコーラルで見せる */
    border: 1.5px solid var(--color-pink-bright);
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.9);
  }
  /* 1枚目：左に置く（人物は右） */
  .hero-bubble-left { left: 4%; }
  /* 2・3枚目：右に置く（人物は左） */
  .hero-bubble-right { right: 4%; }

  /* 2・3枚目：写真の構図に合わせた個別調整（left/right/top は上の指定を上書き） */
  .hero-bubble-s2 {
    left: 13%; /* 鏡の空きスペースの中央寄りへ。人物との間を詰める */
  }
  .hero-bubble-s3 {
    right: 10%;  /* 画面の右端から離す */
    top: 44%;    /* お客様の頭を避けて上へ */
  }

  /* しっぽ：人物のいる側へ横向きに出す */
  .hero-bubble::before,
  .hero-bubble::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border-style: solid;
  }
  /* 左配置 → 右向きのしっぽ */
  .hero-bubble-left::before {
    right: -16px;
    border-width: 13px 0 13px 15px;
    border-color: transparent transparent transparent var(--color-pink-bright);
  }
  .hero-bubble-left::after {
    right: -14px;
    border-width: 12px 0 12px 14px;
    border-color: transparent transparent transparent rgba(255, 255, 255, 0.94);
  }
  /* 右配置 → 左向きのしっぽ */
  .hero-bubble-right::before {
    left: -16px;
    border-width: 13px 15px 13px 0;
    border-color: transparent var(--color-pink-bright) transparent transparent;
  }
  .hero-bubble-right::after {
    left: -14px;
    border-width: 12px 14px 12px 0;
    border-color: transparent rgba(255, 255, 255, 0.94) transparent transparent;
  }

  /* 枠内の各行。縦書きでは line-height が「柱の太さ」になる */
  .hero-bubble .hero-line { line-height: 1.5; text-shadow: none; margin: 0; }
  .hero-bubble .hero-line-accent {
    font-size: clamp(20px, 7.2vw, 30px); /* 画面幅に連動。狭い端末でも柱が増えないよう rem から変更 */
    margin: 0 0 0 4px; /* 縦書きの block 方向は右→左。次の柱との間隔は margin-left */
    color: var(--color-pink-bright); /* 枠線と同色。読ませる文字ではないため面色のまま */
  }
  .hero-bubble .hero-line-small { font-size: clamp(14px, 5vw, 21px); font-weight: 600; color: var(--color-pink-bright); }
  /* 縦中横：算用数字を横に組む（例「47歳」） */
  .hero-bubble .tcy {
    -webkit-text-combine: horizontal;
    text-combine-upright: all;
  }
  /* 漢字が続く行は字面が詰まって見えるため、行単位で字間を少し開ける */
  .hero-bubble .hero-line-loose { letter-spacing: 0.08em; }
}
/* PC：SP用画像を非表示 */
@media screen and (min-width: 769px) {
  .img-sp { display: none; }
}

/* ============================================================
   強みチップ（ヒーロー直下・3項目）
============================================================ */
.hero-points {
  /* 純白だとヒーロー画像（明るい店内）から白が続いてしまうため、
     上の帯のグラデーションを薄めた色面にして白の連続を断ち切る */
  background: var(--color-champagne);
  padding: 18px 0;
}
.hero-points-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 12px;
}
.hero-point {
  font-family: var(--font-gothic);
  font-size: 1.0rem;
  font-weight: 500; /* 色面の上で浮き上がらせる */
  padding: 7px 22px;
  white-space: nowrap;
  border-radius: 6px;
  background: #fff;
  border: 1px solid var(--border-color);
  color: var(--color-blue-ink);
}
/* PC：画面が広いぶんチップが小さく見えるため、ひと回り大きく */
@media screen and (min-width: 769px) {
  .hero-points { padding: 26px 0; }
  .hero-points-list { gap: 16px; }
  .hero-point { font-size: 1.05rem; padding: 10px 28px; }
}
@media screen and (max-width: 480px) {
  .hero-points { padding: 14px 0; }
  .hero-points-list { gap: 8px; }
  .hero-point { font-size: 0.9rem; padding: 6px 14px; }
}

/* ============================================================
   スタッフの声
============================================================ */
.staff-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.staff-card {
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 35px 25px;
  text-align: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
  min-width: 0; /* グリッド列がタグの長さで膨張しないようにする */
  container-type: inline-size; /* ★ 文字サイズの基準＝このカードの内側幅（100cqi） */
}

/* 「狭くなったら勝手に改行せず、文字を小さくする」ための1行ブロック。
   改行位置はHTMLの <span class="staff-line"> で固定し、行内は nowrap。
   親側の font-size を clamp(下限14px, 100cqi 比例, 上限) で決める。

   ▼ 係数の出し方（文言を変えたら必ず引き直すこと）
     1. Noto Sans CJK JP・font-size:100px で各行の実測幅（px）を取る
     2. 3枚のカードを通じた最長行の幅を W100 とする
     3. 係数 = 10000 / W100 × 0.985（安全率1.5%）
   ▼ 現在の実測値（Chromium・2026-08）
     ①キャッチ  PC：最長「私も通ってきた道、協力します」W100 = 1392.0px → 7.07cqi
     　　　　　　SP：3行に割るので最長「私の年齢でも復帰できた」W100 = 1100.0px → 8.95cqi
     ③吹き出し  最長「カットなしのカラーリストとして」 W100 = 1497.0px → 0.0665
     ⑤リンク    最長「シフト比較　以前と今 »」         W100 = 1072.6px → 0.0918
     ③⑤は左右paddingぶんを calc() で差し引いてから比例させている。

   ▼ 下限は9px（§8の下限14pxに対する例外・ご指定）
     769〜1149pxは3列のままカードが細くなるため、14pxのままだと折り返す。
     「折り返さずに縮める」を優先し、下限を9pxまで開けている。
     実測の最小値は769pxのときの ③9.29px ／ ⑤12.64px ／ ①12.58px。
     SP（768px以下）は1列に戻るので、最小でも320px端末の ③14.36px。 */
.staff-line {
  display: block;
  width: fit-content;      /* ボックスを文字幅にぴったり合わせる（実測・中央寄せのため） */
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  white-space: nowrap;
}

/* ①＋② の帯：地 --color-mauve-light・白抜き・下辺を写真に向けたV字
   ・左右のmarginで .staff-card の padding を打ち消し、カード幅いっぱいに敷く
   ・左右のpaddingはカードのpaddingと同値にする（＝文字の使える幅は100cqiのまま。
     ここを変えると §係数 の前提が崩れるので注意）
   ・角丸15px＝カードのborder-radius16px − border1px（paddingボックス側の半径）
   ・V字の深さ22px。border-radiusで背景を丸めた上から clip-path で切るので、
     上の角丸とV字は両立する。 */
.staff-head {
  background: var(--color-mauve-light); /* ご指定。白抜き2.22（§9の未達箇所と同じ扱い） */
  margin: -35px -25px 18px;
  padding: 30px 25px 36px;
  border-radius: 15px 15px 0 0;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), 50% 100%, 0 calc(100% - 22px));
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), 50% 100%, 0 calc(100% - 22px));
}

/* ① キャッチコピー（白抜き・ゴシック） */
.staff-catch {
  font-family: var(--font-gothic);
  font-weight: 500;
  color: #fff;
  margin-bottom: 12px;
  line-height: 1.5;
  font-size: 1.13rem; /* 旧ブラウザ用フォールバック（cqi非対応時は折り返す） */
  /* PCは2・3行目を1行に結合するので、最長行は「私も通ってきた道、協力します」= W100 1392px */
  font-size: clamp(9px, 7.07cqi, 20.34px);
}
/* PCのみ：2行目と3行目をつなげて1行にする（SPは3行のまま） */
@media screen and (min-width: 769px) {
  .staff-catch { white-space: nowrap; }
  .staff-line-pcjoin { display: inline; width: auto; margin: 0; }
}

/* ② 店名＋名前：明朝→ゴシック、1.01rem→0.93rem（16.74px）・白抜き */
.staff-name {
  font-family: var(--font-gothic);
  font-size: 0.93rem;
  color: #fff;
  margin-bottom: 0;
}

/* 動画サムネイル（YouTube埋め込み：初期は画像＋再生ボタン） */
.staff-video-thumb {
  position: relative;
  border-radius: 4px;   /* 店長メッセージ（.manager-video-thumb）と同じ角度に揃える */
  overflow: hidden;
  margin-bottom: 25px;
  aspect-ratio: 16 / 9;
}
.staff-video-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.staff-video-thumb iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* ③ コメント吹き出し：地 --color-pink-pale・黒文字・しっぽは下向き */
.staff-bubble {
  position: relative;
  border: 1px solid var(--border-coral);
  padding: 16px 18px;
  border-radius: 12px;
  text-align: center;
  margin: 0;
  background: var(--color-pink-pale);
}
/* ④ しっぽ：下向き（下辺の中央） */
.staff-bubble::before {
  content: '';
  position: absolute;
  top: auto;
  right: auto;
  left: 50%;
  bottom: -8px;
  margin-top: 0;
  margin-left: -7px;
  width: 14px;
  height: 14px;
  background: var(--color-pink-pale);
  border-top: 0;
  border-right: 1px solid var(--border-coral);
  border-bottom: 1px solid var(--border-coral);
  transform: rotate(45deg);
}
.staff-bubble p {
  font-size: 0.93rem; /* 1.0rem から一回り小さく／フォールバック */
  font-size: clamp(9px, calc((100cqi - 38px) * 0.0665), 16.74px); /* 38px＝左右padding18×2＋border1×2 */
  line-height: 1.8;
  color: var(--text-main);
  margin: 0;
}

/* ⑤ 働き方実例へのリンク：--gradient-blue の楕円・白抜き（§3のリンク規約） */
.staff-link {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 18px auto 0;
  padding: 10px 20px;
  border: 0;
  border-radius: 999px;
  background: var(--gradient-blue);
  color: #fff;
  font-family: var(--font-gothic);
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
  font-size: 0.93rem; /* フォールバック */
  font-size: clamp(9px, calc((100cqi - 40px) * 0.0918), 16.74px); /* 40px＝左右padding20×2 */
  transition: opacity 0.2s;
}
.staff-link:hover { opacity: 0.88; }

/* PC限定の微調整（スタッフの声） */
@media screen and (min-width: 769px) {
  .staff-bubble p { font-weight: 300; }
}

/* スマホ：1列・カード内を横組みに再構成（切替点は他セクションと同じ768/769px） */
@media screen and (max-width: 768px) {
  .staff-grid {
    grid-template-columns: 1fr;
    overflow-x: visible;
    padding-bottom: 0;
    gap: 40px;        /* SPはカード同士の間を広げる（20px → 40px） */
  }
  .staff-card {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 25px 20px;
    border-width: 2px;        /* SPは枠線を2倍に */
  }
  /* 角丸はカードの16px − border2px ＝ 14px（PCは1pxなので15px） */
  .staff-head { width: 100%; order: 1; margin: -25px -20px 18px; padding: 26px 20px 34px; border-radius: 14px 14px 0 0; }
  .staff-catch { text-align: center; margin-bottom: 10px; font-weight: 700; font-size: 1.36rem; font-size: clamp(9px, 8.95cqi, 29.4px);   /* SPは上限を1.2倍（24.48→29.4px） */ }
  .staff-name { margin-bottom: 0; margin-left: 0; font-size: 0.98rem; font-weight: 400; }
  .staff-video-thumb { width: 100%; order: 4; margin: 20px 0; }
  .staff-bubble { width: 100%; order: 5; margin-bottom: 0; background: var(--color-pink-pale); }
  /* SP：改行位置はそのままに、収まる範囲でできるだけ大きく＋一段階太く。
     上限16.74 → 22px。実際の値はカード幅から自動で決まる（390pxで17.8px） */
  .staff-bubble p {
    font-weight: 500;
    font-size: clamp(9px, calc((100cqi - 38px) * 0.0665), 22px);
  }
  .staff-bubble::before { left: 50%; right: auto; bottom: -8px; top: auto; margin-left: -7px; margin-top: 0; background: var(--color-pink-pale); }
  /* SPは指で押す前提。文字と当たり判定をPCの約1.35倍に */
  .staff-link {
    order: 6;
    width: fit-content;
    margin: 20px auto 0;
    padding: 13px 26px;
    text-align: center;
    font-size: clamp(9px, calc((100cqi - 52px) * 0.0918), 22.6px);   /* 52px＝左右padding26×2 */
  }
}

/* 480px以下：吹き出し・楕円の左右paddingを詰めて、下限14pxのまま1行に収める
   （320px端末：カード内側238px − padding22 = 216px、必要215.0px） */
@media screen and (max-width: 480px) {
  .staff-bubble { padding: 14px 10px; }
  .staff-bubble p { font-size: clamp(9px, calc((100cqi - 22px) * 0.0665), 22px); }
  .staff-link { padding: 13px 20px; font-size: clamp(9px, calc((100cqi - 40px) * 0.0918), 22.6px); }
}

/* ============================================================
   ライフステージに合わせた働き方
============================================================ */
.workstyle-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.ws-item {
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 16px;
  position: relative;
  overflow: hidden;
  margin-top: 0;
  display: grid;
  grid-template-columns: 115px 1fr;
  grid-template-rows: auto auto auto;
  align-items: center;
  text-align: left;
}
/* 左側：半円状のカラーエリア（右端が丸く膨らんだ形） */
.ws-item::before {
  content: '';
  grid-column: 1;
  grid-row: 1 / span 3;
  position: absolute;
  top: 0;
  left: 0;
  width: 115px;
  height: 100%;
  background: var(--color-pink-pale);
  border-radius: 0 100% 100% 0 / 0 55% 55% 0;
  z-index: 0;
}
/* アイコン（薄めの色で大きく配置） */
.ws-icon {
  grid-column: 1;
  grid-row: 1 / span 3;
  position: relative;
  z-index: 1;
  justify-self: center;
  width: 74px;
  height: 74px;
  object-fit: contain;
  padding: 0;
  box-sizing: border-box;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  opacity: 0.5;
}
.ws-title {
  grid-column: 2;
  grid-row: 1;
  padding: 26px 24px 0;
}
.ws-main {
  grid-column: 2;
  grid-row: 2;
  padding: 0 24px;
}
.ws-sub {
  grid-column: 2;
  grid-row: 3;
  padding: 0 24px 26px;
}
.ws-title {
  font-family: var(--font-mincho); font-size: 0.97rem; color: var(--text-light); margin-bottom: 15px; }
.ws-main {
  font-size: 1.4rem;
  color: var(--text-heading); /* 白地 15.91 */
  margin-bottom: 5px;
  font-family: var(--font-gothic);
  font-weight: 500;
}
.ws-sub { font-size: 0.95rem; color: var(--text-light); margin: 0; }

@media screen and (max-width: 768px) {
  .workstyle-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  /* SP：アイコンを左・テキストを右（左右中央そろえ） */
  .ws-item {
    display: grid;
    grid-template-columns: 78px 1fr;
    grid-template-rows: auto auto auto;
    column-gap: 14px;
    row-gap: 2px;
    align-items: center;
    text-align: center;
    padding: 18px 18px;
    margin-top: 0;
  }
  .ws-item::before { display: none; }
  .ws-icon {
    position: static;
    grid-column: 1;
    grid-row: 1 / span 3;
    justify-self: center;
    width: 78px;
    height: 78px;
    object-fit: contain;
    padding: 0;
    box-shadow: none;
    opacity: 0.5;
    margin: 0;
  }
  /* SPは全体を1段階小さく（1.0→0.93 / 2.1→1.85 / 0.96→0.89rem）。最小でも16.0pxを確保 */
  .ws-title { grid-column: 2; grid-row: 1; margin: 0; padding: 0; font-size: 0.93rem; color: var(--text-heading); }
  .ws-main { grid-column: 2; grid-row: 2; margin: 2px 0; padding: 0; font-size: 1.85rem; }
  .ws-sub { grid-column: 2; grid-row: 3; margin: 0; padding: 0; font-size: 0.89rem; color: var(--text-main); }
}

/* SP：お祝い金バナーは金額だけ太く（見出し .bonus-title と注記 .bonus-desc は据え置き）
   ※ .bonus-price は基底が後ろで font-weight:700 を持つため、ここに書いても後勝ちで無効。
     実効しているのは .yen だけなので v16 でセレクタを絞った */
@media screen and (max-width: 768px) {
  .yen { font-weight: 700; }
}

/* ============================================================
   福利厚生（アースグループ・チケット風バナー）
============================================================ */
/* 福利厚生セクションの見出し（共通グラデ＋太字。直下にロゴ＋説明が続くため下余白は詰める） */
.welfare-title { margin-bottom: 24px; }
.welfare-title .welfare-title-text {
  font-weight: 700;
  background: var(--gradient-heading);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--color-blue-ink); /* 非対応ブラウザ用フォールバック */
}
@media screen and (max-width: 768px) {
  .welfare-title { margin-bottom: 18px; }
}
/* 「利用できます」もPC・SPとも太字に統一（ご指定）。
   以前はPCのみ font-weight:300 にして .store-main-title の「などで選べます」と
   揃えていたが、3行とも700で通す。改行はHTMLの <br class="pc-br"> で行う。
   ⚠ display:block は使わないこと。親の background-clip:text がインライン分割で
     塗られなくなり、文字が透明のまま消える */
@media screen and (min-width: 769px) {
  .welfare-title .welfare-title-small { font-weight: 700; }
}

.welfare-title-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-bottom: 10px;
}
@media screen and (max-width: 768px) {
  .welfare-title-wrap {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
  }
  .welfare-title-wrap > a { margin-bottom: 0; }
  .welfare-logo-inline { margin-bottom: 0; }
  /* ⚠ text-align はここに書けない。基底の .welfare-text-wrap（text-align:left）が
     このブロックより後ろにあり、同じ詳細度なので後勝ちで無効になる。
     ただし子の .welfare-sub / .welfare-lead が個別に center を持つので実害はなく、
     指定そのものを削除してある（v16） */
  .welfare-text-wrap { flex: 1; min-width: 0; width: 100%; }
  /* ⚠ .welfare-sub / .welfare-lead の font-size もここには書けない。基底が後ろにあり
     後勝ちで無効になる（§9-①）。下の基底ルールの直後に置いてある */
  .welfare-sub { line-height: 1.5; text-align: center; }
  .welfare-lead { text-align: center; }
}
.welfare-logo-inline { width: 50px; height: auto; flex-shrink: 0; }
.welfare-title-wrap > a { flex-shrink: 0; display: block; line-height: 0; }
.welfare-text-wrap {
  display: flex;
  flex-direction: column;
  text-align: left;
}
.welfare-sub {
  font-size: 0.84rem;
  color: var(--text-main);
  font-family: var(--font-mincho);
  margin-bottom: 5px;
}

/* SP：アースグループの説明文を一段階大きく（0.84rem → 1.24rem＝22.32px）。
   ⚠ このブロックは必ず上の .welfare-sub より後ろに置くこと。
      768px以下のブロックに書くと後勝ちで効かない（実際v14まで
      「1.14rem」の指定が丸ごと死んでいて、SPでも0.84remのままだった）。 */
@media screen and (max-width: 768px) {
  /* 3つの <br class="sp-br"> 区切りを、それぞれ1行に収めて計3行にする。
     最長段「私たち株式会社ベネフィット・アップは、」は font-size:100px 時に1885px。
       f =（vw − container40 − 余白6）÷ 18.85 ≒ 5.3vw − 2.44px（上限22.32px）
     ⚠ 文言を変えたら実測し直すこと。 */
  .welfare-sub { font-size: clamp(14px, calc(5.3vw - 2.44px), 22.32px); }
}
.welfare-lead {
  font-size: 0.9rem;
  color: var(--text-heading);
  font-weight: bold;
  font-family: var(--font-gothic);
  margin: 0;
  letter-spacing: 0.05em;
}
/* SP：一段大きく（0.9rem＝16.2px → 0.95rem＝17.1px）。
   ⚠ このブロックは必ず上の基底 .welfare-lead より後ろに置くこと。
      768px以下のブロックに書くと後勝ちで効かない（v15まで丸ごと死んでいた／§9-①）。 */
@media screen and (max-width: 768px) {
  .welfare-lead { font-size: 0.95rem; }
}

/* チケット型カード */
.ticket-grid {
  display: flex;
  flex-direction: column;
  gap: 15px;
  max-width: 800px;
  margin: 0 auto;
  text-align: left;
}
.ticket-card {
  position: relative;
  display: flex;
  border: 1px solid rgba(1, 160, 233, 0.35);
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(34, 34, 34, 0.06);
}
.ticket-left {
  position: relative;
  background: var(--color-pink-pale);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  width: 140px;
  border-right: 1px dashed rgba(1, 160, 233, 0.45);
}
/* チケットの切り取り穴（半券風の演出・上下に半円） */
.ticket-left::before,
.ticket-left::after {
  content: '';
  position: absolute;
  right: -8px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--bg-base);
  border: 1px solid rgba(1, 160, 233, 0.35);
  z-index: 1;
}
.ticket-left::before { top: -8px; }
.ticket-left::after { bottom: -8px; }
.ticket-red {
  color: var(--color-pink-text);
  font-size: 1.6rem;
  font-weight: 400;   /* 700 → 500 → 400 の2段階。読み込み済みは 300/400/500/700 */
  font-family: var(--font-gothic);
  line-height: 1.3;
  text-align: center;
  letter-spacing: 0.05em;
}
.ticket-right {
  padding: 20px 30px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
}
.ticket-strong {
  font-family: var(--font-gothic);
  font-size: 1.01rem;
  color: var(--text-main);
  font-weight: normal;
  display: block;
  margin-bottom: 8px;
  line-height: 1.4;
}
.ticket-bottom {
  font-size: 0.97rem;
  color: var(--text-light);
  margin: 0;
  line-height: 1.6;
}
/* 「※同行のご家族〜」は本文より一段小さく（17.46px → 15.66px） */
.ticket-note { font-size: 0.87rem; }

@media screen and (max-width: 768px) {
  .ticket-card { flex-direction: column; text-align: center; }
  .ticket-left {
    width: 100%;
    border-right: none;
    border-bottom: 1px dashed rgba(1, 160, 233, 0.45);
    padding: 15px;
  }
  /* SP：切り取り穴を下辺の左右へ移動 */
  .ticket-left::before {
    top: auto;
    bottom: -8px;
    left: -8px;
    right: auto;
  }
  .ticket-left::after {
    bottom: -8px;
    right: -8px;
  }
  .ticket-red { font-size: 1.4rem; }
  .ticket-red br { display: none; }
  .ticket-right { padding: 20px 15px; align-items: flex-start; text-align: left; }
  .ticket-strong { text-align: left; }
  .ticket-bottom { text-align: left; }
}

/* ------------------------------------------------------------
   その他の福利厚生リスト（2カラム）
------------------------------------------------------------ */
.other-welfare-wrap {
  background: #fff;
  border: 1px solid var(--border-color);
  padding: 30px;
  border-radius: 8px;
  margin-top: 50px;
  margin-bottom: 50px;
}
.other-title {
  font-family: var(--font-mincho);
  font-size: 1.23rem;
  color: var(--color-blue-ink);
  margin-bottom: 10px;
  text-align: center;
}

/* その他のリード文（注意書き） */

@media screen and (max-width: 768px) {
  }

/* その他：チップ（角丸タグ）表示で視認性アップ */
.other-chips {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.other-chips li {
  font-family: var(--font-gothic);
  font-size: 0.95rem;
  line-height: 1.5;
  padding: 8px 16px;
  border-radius: 6px;
  background: #fff;
  border: 1px solid var(--border-coral);
  color: var(--text-main);
}
.other-note {
  text-align: center;
  font-size: 0.93rem;
  color: var(--text-light);
  font-family: var(--font-gothic);
  margin: 0;
  line-height: 1.7;
}
.other-note a {
  color: var(--color-blue-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}
@media screen and (max-width: 768px) {
  .other-chips { gap: 8px; }
  .other-chips li { font-size: 0.89rem; padding: 7px 13px; }
}

/* ============================================================
   店長からのメッセージ
============================================================ */
/* 店長からのメッセージ見出し（"あなたが輝く場所があります"と同じグラデ＋太字） */
.message-title .message-title-text {
  font-weight: 700;
  background: var(--gradient-heading);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--color-blue-ink); /* 非対応ブラウザ用フォールバック */
}

.manager-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}
.manager-card {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid var(--color-mauve-light);
  border-radius: 14px;
  padding: 34px 30px 30px;
  position: relative;
  box-shadow: 0 10px 28px rgba(1, 160, 233, 0.07);
}
/* 上部の温かなアクセントライン */
.manager-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  border-radius: 14px 14px 0 0;
  /* 5px の細い帯なので 120deg では色の変化が一瞬で終わる。横方向(90deg)で振る */
  background: var(--gradient-blue);
}

/* 2. 店長名（スタッフの声のスタッフ名と表記・デザインを統一） */
.manager-name {
  font-family: var(--font-mincho);
  order: 2;
  font-weight: normal;
  font-size: 1.01rem;
  color: var(--text-main);
  text-align: center;
  margin-bottom: 15px;
}

/* 3. 動画（中央・高さ固定で両カード揃える） */
.manager-video-thumb {
  order: 3;
  position: relative;
  width: 90%;
  max-width: 320px;
  height: 190px;
  border-radius: 4px;
  overflow: hidden;
  margin: 0 auto 20px;
}
.manager-video-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* YouTube埋め込み枠 */
.manager-video-thumb iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* 4. メッセージ本文 */
.manager-msg {
  order: 4;
  font-size: 1.0rem;
  line-height: 1.8;
  color: var(--text-light);
  margin-bottom: 20px;
  flex-grow: 1;
}

/* 4'. 店長キャッチ（見出し引用・本文の代わり／やわらかい吹き出し風） */
/* 店長コメント（最上部・枠なし・黒文字） */
.manager-catch {
  order: 1;
  /* 明朝の太字は圧が強いためゴシックの通常ウェイトへ。色は白地 5.61 の青 */
  font-family: var(--font-gothic);
  font-size: 1.26rem;
  font-weight: 400;
  line-height: 1.7;
  text-align: center;
  margin: 0 0 20px;
  color: var(--color-blue-ink);
}
@media screen and (max-width: 768px) {
  .manager-catch { font-size: 1.18rem; line-height: 1.8; font-weight: 400; }
}

/* 5. もっとみるリンク（中央・ブルーグラデを敷いたピル型・枠線なし）
   ⚠ 白文字のコントラストは 2.92〜2.20（基準4.5）。読みやすさを優先する場合は
   背景を linear-gradient(120deg,#0065B0,#01A0E9)（6.02〜2.91）か
   単色 var(--color-blue-ink)（6.02）に
   ※v16で未使用トークン --gradient-deep を削除したため、値を直書きしてある */
.more-link {
  order: 5;
  align-self: center;
  display: inline-flex;
  align-items: center;
  font-weight: 500;
  font-size: 1.0rem;
  text-decoration: none;
  padding: 9px 19px;
  transition: background 0.2s ease, color 0.2s ease;
  border-radius: 999px;
  background: var(--gradient-blue);
  color: #fff;
  border: 0;
}
.more-link:hover {
  background: var(--color-blue-ink);
  color: #fff;
}

@media screen and (max-width: 768px) {
  .manager-grid { grid-template-columns: 1fr; gap: 20px; }
  .manager-card { padding: 25px 20px; }
  /* SP：指で押す前提。文字とボタンを約1.25倍に。
     「店長の人柄とお店を見る »」は font-size:100px 時の幅が実測1209pxで、
     1.25rem(22.5px)固定だと390px以下で3行に折り返す。
       使える幅 = vw − container40 − カードpadding40 − border2 = vw − 82
       f =（vw − 82 − 左右padding36 − 余白6）÷ 12.09 ≒ 8.27vw − 10.26px（上限22.5px）
     ⚠ 文言を変えたら実測し直すこと。 */
  .more-link {
    font-size: clamp(16px, calc(8.27vw - 10.26px), 22.5px);
    padding: 12px 18px;
    white-space: nowrap;
  }
  }

/* ============================================================
   お祝い金バナー
============================================================ */
.bonus-section { text-align: center; padding-top: 32px; padding-bottom: 32px; background: #fff; }
.bonus-banner {
  padding: 40px 20px;
  /* 白地＋ --color-pink-bright の文字・枠線（ご指定）。
     ⚠ 白地でのコントラストは 5.52（--color-pink-text）→ 2.86 に下がっている。
     §9の未達箇所と同じ扱いで残している。 */
  background: #ffffff;
  border: 2px solid var(--color-pink-bright);
  border-radius: 8px;
}
.bonus-title {
  font-size: 1.23rem;
  color: var(--color-pink-bright);   /* 白地 2.86（§9扱い） */
  font-weight: 500;   /* 700 → 500。金額 .bonus-price は 700 のまま */
  margin-bottom: 10px;
  font-family: var(--font-gothic);
}
.bonus-price {
  font-family: var(--font-mincho); font-size: 2.0rem; margin-left: 10px; font-weight: 700; color: var(--color-pink-bright); }
.yen { font-size: 1.23rem; }
.bonus-desc {
  font-size: 1.0rem;
  color: var(--text-light);  /* 白地 5.50 */
  font-weight: 400;
  margin: 0;
}

@media screen and (max-width: 768px) {
  /* SPは3行（公式サイトからの応募で／お祝い金／30,000円）。1.2倍に拡大 */
  .bonus-title { line-height: 1.5; }
  .bonus-price { display: inline-block; margin-left: 0; }
}
@media screen and (max-width: 480px) {
  .bonus-title {
    /* 1.02rem → 1.22rem（21.96px）＝約1.2倍。ただし最長行「公式サイトからの応募で」は
       font-size:100px 時に 1097px あり、320px端末（使える幅236px）では 21.96px だと
       5px はみ出す。そこだけ縮むように clamp にしている。
         f =（vw − container40 − バナーpadding40 − border4 − 余白4）÷ 10.974 ≒ 9.11vw − 8.02px */
    font-size: clamp(19px, calc(9.11vw - 8.02px), 21.96px);
    white-space: nowrap;
  }
  .bonus-price { font-size: 1.92rem; margin-left: 0; }   /* 1.6rem の1.2倍（34.56px） */
  .bonus-desc {
    font-size: 1.06rem;   /* 0.88rem の約1.2倍（19.08px）。支給条件は一番読ませたい注記 */
    line-height: 1.7;
  }
}

/* ============================================================
   店舗一覧
============================================================ */
.store-main-title {
  font-family: var(--font-mincho);
  text-align: center;
  font-size: 2.0rem;
  letter-spacing: 0.1em;
  line-height: 1.45;
  margin-bottom: 30px;
  font-weight: 300;
  background: var(--gradient-heading);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--color-blue-ink); /* 非対応ブラウザ用フォールバック */
}
@media screen and (max-width: 768px) {
  .store-main-title { font-size: 1.4rem; }
}
.store-main-title .stm-strong { font-weight: 700; }
/* v16：スワイプ案内（.store-swipe-hint / .store-swipe-icon）を撤去。
   768px以下では下の .store-grid ブロックがカルーセルをやめて縦積みにするため、
   案内を出す条件（768px以下かつ横スクロール）がどの幅にも存在せず、
   768px以下ブロック内で display:flex → display:none と二重指定になっていた。
   769〜1149px は横スクロールのままなので、案内を出すなら
   @media (min-width:769px) and (max-width:1149px) で作り直すこと。 */

.store-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.store-card {
  background: #ffffff;
  border: 1px solid var(--border-color);
  position: relative;
  padding-bottom: 20px;
  border-radius: 8px;
  overflow: hidden;
  /* 募集職種の行数が店舗ごとに違うので、縦積みにして
     「このお店の求人を見る」を .store-cta の margin-top:auto で最下部に固定する。
     グリッド項目は既定で stretch なので、3枚の高さもこれで揃う。 */
  display: flex;
  flex-direction: column;
}

/* 店舗写真（スライドショー切り替え） */
.store-photo-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  margin-bottom: 15px;
  overflow: hidden;
}
.store-photo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 2s ease-in-out;
}
.store-photo.active { opacity: 1; }

/* 店舗ロゴ（写真左上に重ねる） */
.store-logo {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 60px;
  height: auto;
  z-index: 3;
  pointer-events: none;
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.5));
}

.store-name {
  font-size: 1.04rem;
  text-align: center;
  margin-bottom: 15px;
  color: var(--text-main);
  font-family: var(--font-mincho);
  font-weight: 700;
  line-height: 1.4;
  padding: 0 10px;
}
.store-address {
  font-size: 0.8rem;
  font-weight: normal;
  color: var(--text-light);
  display: block;
  margin-top: 5px;
  font-family: var(--font-gothic);
  line-height: 1.4;
}

/* 募集条件（ラベル＋値の2行）
   ・旧「業態タグの楕円＋職種の丸ピル＋雇用形態の素の文字」は、
     ページ内に楕円が多すぎて職種と雇用形態の区別がつかなかった。
   ・角丸をやめた四角いラベルを左に固定し、罫線で行を分けて
     「何の項目か」を先に読ませる。中央寄せもやめて左揃えに。 */
.store-spec {
  margin: 0 15px 4px;
  padding: 0;
  border-top: 1px solid var(--border-color);
  font-family: var(--font-gothic);
}
.store-spec-row {
  display: grid;
  grid-template-columns: 5.6em 1fr;
  gap: 12px;
  align-items: start;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-color);
}
.store-spec-row:last-child { border-bottom: none; }
.store-spec-label {
  background: var(--color-champagne);
  color: var(--color-blue-ink);   /* #EDF8FE 地で 5.10 */
  font-size: 0.8rem;              /* 14.4px */
  font-weight: 500;
  text-align: center;
  padding: 4px 0;
  border-radius: 0;               /* 楕円を増やさない */
  line-height: 1.5;
  letter-spacing: 0.02em;
}
.store-spec-value {
  margin: 0;
  font-size: 0.87rem;             /* 15.66px。0.93rem から1段階小さく */
  font-weight: 400;               /* 500 から1段階細く */
  color: var(--text-main);
  line-height: 1.65;
  white-space: nowrap;            /* 「スタイリスト・アシスタント」等を折り返さない */
}
/* 1100px以下では値の欄が狭くなり、最長の「スタイリスト・アシスタント」
   （実測203.6px）が横2列のままでは入らない。ラベルを上段に逃がして
   値に全幅を渡す（769px時点でも値の欄は207.7px確保できる） */
@media screen and (max-width: 1100px) {
  .store-spec-row { grid-template-columns: 1fr; gap: 4px; }
  .store-spec-label { justify-self: start; padding: 3px 10px; }
}

/* 「このお店の求人を見る」ボタン（§3のリンク規約＝楕円・塗り・白抜き）
   カード全面のオーバーレイ(z-index:2)より上に出すため z-index:3 が必要。
   リンク先はオーバーレイと同じなので、読み上げの重複を避けて
   オーバーレイ側を aria-hidden + tabindex="-1" の装飾扱いにし、
   アクセシブルな名前はこのボタンが持つ。 */
.store-cta {
  position: relative;
  z-index: 3;
  display: block;
  width: fit-content;
  max-width: calc(100% - 30px);
  margin: auto auto 0;      /* 上をautoにしてカードの最下部へ落とす */
  padding: 10px 22px;
  border: 0;
  border-radius: 999px;
  background: var(--gradient-blue);
  color: #fff;
  font-family: var(--font-gothic);
  font-weight: 500;
  font-size: 0.87rem;   /* 15.66px */
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.2s;
}
.store-cta:hover { opacity: 0.88; }

/* SP：指で押す前提。文字とボタンを約1.25倍に */
@media screen and (max-width: 768px) {
  .store-cta { font-size: 1.08rem; padding: 13px 26px; margin-bottom: 4px; }
}

/* カード全体をリンク化するオーバーレイ */
.store-link-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

/* スマホ：カルーセルをやめて1店舗ずつ縦に並べる */
@media screen and (max-width: 768px) {
  .store-grid {
    grid-template-columns: 1fr;
    overflow-x: visible;
    padding-bottom: 0;
    gap: 20px;
    scroll-snap-type: none;
  }
  .store-card {
    scroll-snap-align: none;
    min-width: 0;
  }
}

/* ------------------------------------------------------------
   店舗カルーセルの位置インジケーター（ドット）
   ・SPのみ表示。3店舗あることと現在位置を視覚的に伝える
------------------------------------------------------------ */
.store-dots { display: none; }
@media screen and (max-width: 768px) {
  .store-dots { display: none; }
}

/* ============================================================
   NEWS（お知らせ・店舗キャンペーン）
============================================================ */
/* セクション全体を画面端まで白く */
.news-section { background-color: #ffffff; }

.news-section-wrap {
  max-width: 900px;
  margin: 0 auto;
  padding: 50px 40px;
  background-color: #ffffff;
  border-radius: 0;
}
.news-list-wrap {
  max-width: 800px;
  margin: 0 auto;
  padding: 0;
  background-color: transparent;
}
.news-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.news-list li { border-bottom: 1px solid var(--border-color); }
.news-list a {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px 0;
  transition: opacity 0.3s;
}
.news-list a:hover { opacity: 0.7; }
.news-thumb {
  width: 140px;
  aspect-ratio: 16 / 9;
  flex-shrink: 0;
  border-radius: 4px;
  overflow: hidden;
}
.news-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.news-body { flex-grow: 1; min-width: 0; font-family: var(--font-gothic); }
.news-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-bottom: 5px;
}
.news-date { color: var(--text-light); font-size: 0.95rem; }
.news-cat {
  border: 1px solid var(--text-light);
  border-radius: 20px;
  padding: 2px 12px;
  font-size: 0.87rem;
  color: var(--text-main);
  white-space: nowrap;
}
.news-title {
  font-family: var(--font-mincho);
  font-size: 0.95rem;
  color: var(--text-heading);
  margin: 0;
  line-height: 1.4;
  font-weight: normal;
}

/* 「これまでのお知らせ」→ /news/ への控えめな文字リンク */
.news-more {
  text-align: center;
  margin: 26px 0 0;
}
.news-more a {
  font-family: var(--font-gothic);
  font-size: 0.9rem;
  color: var(--text-light);
  letter-spacing: 0.04em;
  transition: color 0.2s ease;
}
.news-more a::after { content: ' ›'; color: var(--color-mauve); }
.news-more a:hover { color: var(--color-blue-ink); }

@media screen and (max-width: 768px) {
  .news-section-wrap { padding: 40px 20px; }
  .news-list a { padding: 15px 0; gap: 12px; }
  .news-thumb { width: 90px; }
  .news-meta { margin-bottom: 3px; gap: 6px 8px; }
  .news-date { font-size: 0.9rem; }
  .news-cat { font-size: 0.84rem; padding: 1px 8px; white-space: normal; }
  .news-title { font-size: 0.97rem; }
}

/* ============================================================
   再生ボタン（スタッフの声・店長メッセージ共通）
============================================================ */
/* 動画サムネの再生ボタン（案A：下部ラベルバー・一目で動画とわかる） */
.play-btn {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: auto;
  transform: none;
  width: auto;
  height: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  background: rgba(34, 34, 34, 0.6);
  border: none;
  border-radius: 0;
  cursor: pointer;
  z-index: 10;
  transition: background 0.25s ease;
}
.play-btn:hover { background: rgba(34, 34, 34, 0.8); opacity: 1; }

/* 白丸＋モーヴ三角の再生アイコン */
.play-btn-ico {
  position: relative;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
}
.play-btn-ico::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-width: 5px 0 5px 9px;
  border-style: solid;
  border-color: transparent transparent transparent var(--color-pink-bright);
}
.play-btn-txt {
  color: #fff;
  font-family: var(--font-gothic);
  font-size: 0.87rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
}
.play-btn-time {
  margin-left: 8px;
  font-weight: 400;
  opacity: 0.88;
}

/* 旧・顔避け左寄せ修飾はバーでは不要（無効化） */
.play-btn-left {
  left: 0;
  right: 0;
}

/* ============================================================
   SP：セクション間の余白調整（v7 静的微調整）
   ・「その他」→「お祝い金」の間隔を詰める
   ・「3店舗」→「店長からのメッセージ」の間隔を詰める
============================================================ */
@media screen and (max-width: 768px) {
  .salary-welfare-section.section-padding { padding-bottom: 30px; }
  .store-section.section-padding { padding-bottom: 40px; }
  .message-section.section-padding { padding-top: 40px; }
}

/* ============================================================
   動画（案2）：再生が実際に始まるまでポスター画像を最前面に重ね、
   YouTube側のタイトル/ロゴ/ローディングのちらつきを隠す。
   .yt-player = JSが差し込むプレーヤー枠（背面）／img.is-cover = 上に被せるポスター。
============================================================ */
.staff-video-thumb .yt-player,
.manager-video-thumb .yt-player {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.staff-video-thumb .yt-player iframe,
.manager-video-thumb .yt-player iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.staff-video-thumb img.is-cover,
.manager-video-thumb img.is-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 5;
  transition: opacity 0.45s ease;
}
.staff-video-thumb img.is-hidden,
.manager-video-thumb img.is-hidden {
  opacity: 0;
  pointer-events: none;
}


/* ライフステージに合わせた働き方（この見出しだけ span が無いので個別指定） */
/* SP：2行に折れると細く見えるので太くする */
@media screen and (max-width: 768px) {
  .workstyle-section .section-title { font-weight: 700; }
}
.workstyle-section .section-title {
  background: var(--gradient-heading);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--color-blue-ink);
}

/* FVの帯：先頭にコーラルのバッジ、右に白文字 */
.hero-band-badge {
  flex-shrink: 0;
  background: var(--color-pink-bright);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.30);
  font-family: var(--font-gothic);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  padding: 5px 10px;
  border-radius: 0;
  margin-right: 12px;
  white-space: nowrap;
}

/* SP：帯を46pxに厚くしたぶん、バッジも本文に合わせて大きくする。
   本文の 0.88 倍。バッジのpadding14px＋間隔7pxは固定でかかるので、
   本文f =（vw − 左右padding24 − 21 − 余白6）÷ 21.69 ≒ 4.61vw − 2.35px で算出。
   ⚠ このブロックは必ず上の .hero-band-badge より後ろに置くこと。 */
@media screen and (max-width: 768px) {
  .hero-band-badge {
    font-size: clamp(11.5px, calc(4.33vw - 2.25px), 18.5px);
    letter-spacing: 0;
    padding: 4px 7px;
    margin-right: 7px;
  }
}

/* ============================================================
   募集条件サマリー（ヒーロー直下・1行のチップ帯）
   高さを取らせないため、見出しを持たず1行で横に流す。
   入りきらないぶんは横スワイプで見る（自動で動かすと読みにくいので動かさない）。
   数値は jobdescription.html と job-*.html の JobPosting に必ず揃えること。
============================================================ */
.jobsummary-bar {
  background: var(--color-champagne);
  border-bottom: 1px solid var(--border-color);
  position: relative;
}
.jsb-chips {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;                    /* PC：横スクロールさせず2行に折り返す */
  gap: 6px;
  margin: 0 auto;
  padding: 9px 24px;
  max-width: 1400px;                  /* 帯なので .container(1120) より広く使う */
  box-sizing: border-box;
  list-style: none;
  scrollbar-width: none;              /* Firefox */
  -webkit-overflow-scrolling: touch;
}
.jsb-chips::-webkit-scrollbar { display: none; }
.jsb-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;                     /* 縮めずに横スクロールさせる */
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  padding: 6px 12px;
  line-height: 1.35;                  /* 本文の1.8を引き継ぐと帯が高くなるので詰める */
  white-space: nowrap;
  font-family: var(--font-gothic);
}
.jsb-key {
  font-size: 0.78rem;                 /* 14.04px＝下限ちょうど */
  font-weight: 500;                   /* 700 から一段細く */
  color: var(--color-blue-ink);       /* 白地 6.02 */
  letter-spacing: 0.04em;
}
.jsb-val {
  font-size: 0.86rem;                 /* 15.48px */
  font-weight: 400;                   /* 500 から一段細く。「求人の詳細」だけは500のまま */
  color: var(--text-main);            /* 白地 12.63 */
}
.jsb-chip-more {
  background: var(--gradient-blue);
  border: 0;
  padding: 0;
}
.jsb-chip-more a {
  display: block;
  padding: 7px 16px;
  font-size: 0.86rem;
  font-weight: 500;
  line-height: 1.35;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}
.jsb-chip-more:hover { opacity: 0.88; }

/* PC（2行に折り返す側）だけ、値の文字を一段階小さく。
   キー（.jsb-key）は 0.78rem＝14.04px の下限ちょうどなので下げない。 */
@media screen and (min-width: 1280px) {
  .jsb-val { font-size: 0.83rem; }    /* 15.48px → 14.94px */
}

/* 1279px以下：折り返すと3行（138px）になってしまうので、
   1行のまま横スワイプで見せる。右端に「まだ続く」ぼかしを出す。
   ※チップ10個の合計幅は実測2119px。1行あたり1060px以上（＝1280px幅以上）でないと
     2行に収まらないため、切替点を1280pxにしている。項目を増やしたら再計算すること。 */
@media screen and (max-width: 1279px) {
  .jsb-chips {
    flex-wrap: nowrap;
    justify-content: flex-start;
    padding: 10px 14px;
    gap: 7px;
    overflow-x: auto;
  }
  .jsb-chip { padding: 6px 12px; }
  .jsb-chip-more { padding: 0; }      /* 上のpaddingを打ち消す（二重になって高くなる） */
  .jobsummary-bar::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 28px;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(to right, rgba(237, 248, 254, 0), var(--color-champagne));
  }
}