/* =========================================================
   tre Recruit LP  —  style.css
   PC-first / SP fallback at 768px
   ========================================================= */

/* ---------- Design tokens ---------- */
:root {
  --c-text:        #3b3538;
  --c-text-muted:  #8b8489;
  --c-line:        #e7e0e4;
  --c-bg:          #ffffff;
  --c-bg-alt:      #f7f3f5;

  --c-pink:        #e08aa1;   /* main accent */
  --c-pink-deep:   #d2748e;
  --c-pink-soft:   #f3d7e0;
  --c-purple:      #9a8fc0;
  --c-purple-deep: #7f74ab;
  --c-blue:        #7aa6cf;
  --c-dark:        #312e33;   /* footer / entry（カンプ採取の統一ダーク）*/
  --c-line-green:  #06c755;

  --maxw:      1120px;
  --maxw-narrow: 820px;
  --gutter:    32px;

  --ff-sans:  "Noto Sans JP", system-ui, sans-serif;
  --ff-serif: "Noto Serif JP", serif;
  --ff-script:"Parisienne", cursive;

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; overflow-x: clip; }
body {
  margin: 0;
  overflow-x: hidden;           /* clip 未対応ブラウザ向けフォールバック */
  overflow-x: clip;             /* 装飾の横はみ出しを見切り、左右スクロールを禁止（clipでsticky/fixedは保持）*/
  max-width: 100%;
  font-family: var(--ff-sans);
  font-weight: 400;
  color: var(--c-text);
  background: var(--c-bg);
  line-height: 1.9;
  letter-spacing: .04em;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3 { margin: 0; font-weight: 500; line-height: 1.5; }
p { margin: 0; }
button { font-family: inherit; cursor: pointer; }

/* ---------- Layout helpers ---------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--maxw-narrow); }

.section { padding: 120px 0; }
.section--alt { background: var(--c-bg-alt); }

/* ---------- Typography accents ---------- */
.script {
  font-family: var(--ff-script);
  font-weight: 400;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--c-pink);
  letter-spacing: .02em;
  margin-bottom: 18px;
}
/* セクション装飾スクリプトの SVG 差し替え。装飾のみ（alt=""/aria-hidden）。
   比率は viewBox 由来、width 指定＋height:auto で崩さない。 */
.script-img {
  display: inline-block;   /* 親の text-align に従う（中央/左寄せを継承）*/
  height: auto;
  max-width: 100%;
  vertical-align: top;
}
.script-img--message    { width: 150px; }
.script-img--hair-care  { width: 165px; }
.script-img--salon-work { width: 170px; }
.script-img--work-style { width: 175px; }
.script-img--tre-people { width: 200px; }
.script-img--qa         { width: 150px; }
.script-img--recruit    { width: 150px; transform: rotate(15deg); }   /* 右回り（時計回り）15度 */
.sec-title {
  font-family: var(--ff-serif);
  font-size: 2.1rem;
  line-height: 1.7;
  letter-spacing: .06em;
  color: #2f2a2c;
}
.sec-lead {
  margin-top: 24px;
  font-size: .95rem;
  color: var(--c-text-muted);
  line-height: 2;
}
.accent     { color: var(--c-pink-deep); }
.accent-lg  {
  font-size: 1.55em;
  color: var(--c-pink-deep);
  font-weight: 600;
}
.sec-head { margin-bottom: 64px; }
.sec-head--center { text-align: center; }
.sec-head--center .sec-lead { max-width: 640px; margin-inline: auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 38px;
  font-size: .9rem;
  font-weight: 500;
  letter-spacing: .08em;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: transform .3s var(--ease), background-color .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn--primary {
  background: linear-gradient(120deg, var(--c-pink) 0%, var(--c-pink-deep) 100%);
  color: #fff;
  box-shadow: 0 10px 24px -10px rgba(208,116,142,.7);
}
.btn--ghost {
  background: transparent;
  border-color: var(--c-pink);
  color: var(--c-pink-deep);
}
.btn--ghost:hover { background: var(--c-pink); color: #fff; }
.btn--ghost-dark { border-color: rgba(255,255,255,.55); color: #fff; }
.btn--ghost-dark:hover { background: rgba(255,255,255,.12); }
.btn--lg { padding: 18px 52px; font-size: .95rem; }
.btn--entry {
  background: var(--c-pink);
  color: #fff;
  padding: 11px 26px;
  font-size: .82rem;
}
.btn--entry:hover { background: var(--c-pink-deep); }

.btn--line {
  background: var(--c-line-green);
  color: #fff;
  padding: 16px 44px;
  margin-top: 28px;
  font-weight: 700;
}
.btn--line:hover { filter: brightness(1.05); }
.btn__line-icon {
  font-size: .7rem;
  font-weight: 700;
  background: #fff;
  color: var(--c-line-green);
  border-radius: 6px;
  padding: 2px 7px;
  letter-spacing: 0;
}

/* =========================================================
   HEADER
   ========================================================= */
/* HERO ではナビ/応募ボタンを出さない。スクロールで初めてスライドインする
   通常ヘッダーにする（HERO 上では translateY(-100%) で隠す）。 */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transform: translateY(-100%);
  transition: transform .45s var(--ease), background-color .4s var(--ease), box-shadow .4s var(--ease);
}
.header.is-scrolled {
  transform: translateY(0);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 rgba(0,0,0,.05);
}
.header__inner {
  max-width: 1280px;
  margin-inline: auto;
  padding: 18px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.header__logo { display: flex; align-items: flex-end; gap: 8px; }
.header__logo img { width: 56px; height: auto; }
.header__logo img.header__logo-sub {   /* HERO と同じ Recruit スクリプト（サイズは従来踏襲）*/
  width: auto;
  height: 28px;
}
.gnav { display: flex; align-items: center; gap: 36px; }
.gnav__list { display: flex; gap: 30px; }
.gnav__list a {
  font-size: .85rem;
  letter-spacing: .08em;
  position: relative;
  padding-bottom: 4px;
}
.gnav__list a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--c-pink);
  transition: width .3s var(--ease);
}
.gnav__list a:hover::after { width: 100%; }

/* hamburger (SP only) */
.hamburger {
  display: none;
  width: 44px; height: 44px;
  background: transparent;
  border: 0;
  position: relative;
  z-index: 120;
}
.hamburger span {
  position: absolute;
  left: 10px; right: 10px;
  height: 2px;
  background: var(--c-text);
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.hamburger span:nth-child(1) { top: 15px; }
.hamburger span:nth-child(2) { top: 21px; }
.hamburger span:nth-child(3) { top: 27px; }
.hamburger.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hamburger.is-open span:nth-child(2) { opacity: 0; }
.hamburger.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* =========================================================
   HERO  (100vh)
   ========================================================= */
.hero {
  /* グラデ文字色：カンプ近似（pixel sample）。--grad-* で一元管理 */
  --grad-blue-from: #2a99e6;   /* 未来：水色（やや濃）*/
  --grad-blue-to:   #8ccaf1;   /* 未来：薄い水色 */
  --grad-pink-from: #f6b3c4;   /* 美容：薄いピンク */
  --grad-pink-to:   #e07d9b;   /* 美容：濃いピンク */
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-start;      /* ロゴを上部・コピーを下へ（カンプの縦位置に合わせる）*/
  overflow: hidden;             /* 画像の左側がはみ出した分を自然に隠す */
  background: #faf8f6;           /* HERO背景を固定（画像の余白/マスクもこの色になじむ）*/
}
/* === HERO debug overlay（位置合わせ用・既定OFF）===
   <section class="hero hero--debug"> にすると _refs カンプを薄く重ねて確認できる。
   本番では class を付けない＝非表示。常時表示のオーバーレイは残さない。 */
.hero--debug::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  opacity: .45;
  background: url("../../_refs/design/nz_01_index.jpg") top center / 100% auto no-repeat;
}
/* 文字背面ベール：画像(z0)の前・コピー(z2)の後ろ。左〜中央は #faf8f6 を濃く、
   右へ向けて透明へ抜く“にじみ”。ベタ塗りの四角ではなく方向性のあるグラデ。 */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(92deg,
    rgba(250,248,246,0.96) 0%,
    rgba(250,248,246,0.88) 28%,
    rgba(250,248,246,0.48) 42%,
    rgba(250,248,246,0.16) 55%,
    rgba(250,248,246,0)    68%);   /* 右側(顔・髪・水彩)は早めに透明へ抜く */
}
/* 中間幅(769〜1100px)：画像が相対的に白飛びしやすいため、さらに早く透明へ */
@media (max-width: 1100px) and (min-width: 769px) {
  .hero::before {
    background: linear-gradient(92deg,
      rgba(250,248,246,0.95) 0%,
      rgba(250,248,246,0.82) 26%,
      rgba(250,248,246,0.40) 40%,
      rgba(250,248,246,0.10) 52%,
      rgba(250,248,246,0)    62%);
  }
}
.hero__watermark {
  position: absolute;
  left: 40%; top: 46%;
  transform: translate(-50%, -50%);
  font-family: var(--ff-serif);
  font-size: 30vh;
  line-height: 1;
  color: rgba(70,62,66,.045);
  font-weight: 500;
  letter-spacing: .02em;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
/* 人物イラストは下端揃え＝肩・服の下が切れない。高さ基準で大きく、右側に
   置きつつコピー側（左）へ寄せる。左端だけをフェードしてコピーとなじませる。 */
.hero__visual {
  position: absolute;
  top: 0;               /* HERO上端に接地（上余白を出さない）*/
  right: -6vw;          /* 右端固定のまま、さらに右へ逃がしコピーへの被りを軽減（縮小はしない）*/
  bottom: 0;            /* 天地いっぱいに張る */
  height: 100%;         /* HEROの天地100%（高さ基準）*/
  width: auto;          /* 幅は画像比率まかせ。vw等で縮ませない */
  z-index: 0;           /* コピー/ロゴ(z-index:2)より後面 */
  pointer-events: none;
}
.hero__img {
  display: block;
  height: 100%;         /* 高さ基準・自然比率。幅が狭くても縮小しない */
  width: auto;
  max-width: none;      /* グローバル img{max-width:100%} を打ち消す（縮小の主因）*/
  /* 頭頂部はそのまま。最下部だけ #faf8f6 へ薄くフェードし下端の見切りを和らげる */
  -webkit-mask-image: linear-gradient(to bottom, #000 88%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to bottom, #000 88%, rgba(0,0,0,0) 100%);
}
.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: none;
  min-width: 1200px;     /* カンプ基準の作業幅。狭幅でも縮めず、右側は overflow:hidden で見切る */
  margin-inline: 0;
  /* カンプ実測：tre 上≈202 / コピー左≈127（1344）→ 1440換算 上≈210・左≈137。
     vw下限を大きめにして PC 狭幅でも縮みすぎないようにする。 */
  padding: clamp(110px, 15vh, 170px) var(--gutter) 0 clamp(112px, 9.5vw, 140px);
}
.hero__copy { max-width: 1100px; position: relative; }
/* コピー背面のみ、淡い水彩ブルーム。カード/角丸/影は付けず縁を作らない */
.hero__copy::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%; left: 34%;
  transform: translate(-50%, -50%);
  width: 128%; height: 150%;
  background: radial-gradient(58% 60% at 40% 48%,
    rgba(250,248,246,0.90) 0%,
    rgba(250,248,246,0.56) 46%,
    rgba(250,248,246,0)    74%);
  pointer-events: none;
}
/* HERO ロゴ（左上）：tre + Recruit を SVG で構成。傾きは Recruit SVG が保持。
   カンプ実測（1344→1440換算）：tre 幅≈128・高≈66 / Recruit 幅≈270、tre右へ・やや上。 */
.hero__logo {
  position: relative;          /* Recruit を絶対配置する基準 */
  display: block;
  width: 112px;                /* tre 箱幅。少しだけ小さく（126→112）*/
  /* ロゴ〜コピー間。ロゴは上へ・コピーは下げて間を広げる。vh連動で100svhに収める */
  margin: 0 0 clamp(90px, 15vh, 190px);
}
.hero__logo-tre { width: 112px; height: auto; display: block; }
/* カンプ実測比：Recruit幅 ≈ tre幅×2.1、tre右端の少し先から tre と同じ中心線で連結。
   傾きは SVG 内蔵のため CSS rotate は使わない。 */
.hero__logo-recruit {
  position: absolute;
  left: 134px;                 /* もうちょい右へ */
  top: -40px;                  /* 少しだけ上へ */
  width: 252px;                /* もうちょい小さく（280→252）*/
  height: auto;
  max-width: none;             /* ★グローバル img{max-width:100%} の112px制限を解除（拡大が効かなかった原因）*/
}
.hero__title {
  font-family: var(--ff-serif);
  font-size: clamp(92px, 8vw, 116px); /* 少し小さく（128→116）。下限も微調整 */
  font-weight: 500;                   /* ウェイトを軽く（600→500）*/
  line-height: 1.18;                    /* カンプ行送り≈148/字高≈123 ≒1.2 を詰め気味に */
  letter-spacing: .02em;
  color: #2f2a2c;
}
/* 各行をブロック化＋nowrapで、「で、」「へ。」だけの単独改行を完全に防ぐ */
.hero__title-line { display: block; white-space: nowrap; }
/* 強調文字：サイズは本文と同一。色のみグラデーション（カンプ近似・CSS変数管理）*/
.hero__title .accent {
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.hero__title .accent--blue { background-image: linear-gradient(160deg, var(--grad-blue-from) 0%, var(--grad-blue-to) 100%); }  /* 未来：水色→薄水色 */
.hero__title .accent--pink { background-image: linear-gradient(160deg, var(--grad-pink-from) 0%, var(--grad-pink-to) 100%); }  /* 美容：薄ピンク→濃ピンク */
.hero__lead {
  margin-top: 40px;
  font-size: 17px;            /* カンプ基準で少し上げ・控えめだが読める */
  line-height: 2.0;
  letter-spacing: .04em;
  color: #908d8f;             /* カンプの淡い暖グレー（薄すぎない程度に）*/
}
.hero__scroll {
  position: absolute;
  left: clamp(24px, 3vw, 48px);   /* カンプ：中央ではなく左下 */
  bottom: 48px;
  transform: none;
  z-index: 3;
  font-size: .72rem;
  letter-spacing: .24em;
  color: var(--c-text-muted);
  writing-mode: vertical-rl;
}
.hero__scroll::after {
  content: "";
  display: block;
  width: 1px; height: 46px;
  margin: 10px auto 0;
  background: linear-gradient(var(--c-pink), transparent);
  animation: scrollline 1.8s var(--ease) infinite;
}
@keyframes scrollline {
  0%   { transform: scaleY(0); transform-origin: top; }
  45%  { transform: scaleY(1); transform-origin: top; }
  55%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* =========================================================
   MESSAGE
   ========================================================= */
/* 1カラム左寄せ＋背景に巨大 tre 透かし（デザイン section-message.jpg 準拠）*/
.message {
  position: relative;
  overflow: hidden;
  padding: 150px 0;          /* 上下にゆったり */
  background: #fff;
}
.message__watermark {
  position: absolute;
  bottom: 0;                 /* コンテンツエリア下部に接地（上部は overflow:hidden で見切る）*/
  top: auto;
  left: 7%;
  transform: none;
  width: clamp(1050px, 125%, 1800px);   /* かなり大きく、右へはみ出す */
  max-width: none;
  height: auto;
  opacity: .075;             /* 薄いグレー（本文の可読性を保つ）*/
  z-index: 0;
  pointer-events: none;
  user-select: none;
}
.message__inner { position: relative; z-index: 1; }   /* 本文は透かしより前面 */
.message__script-wrap { margin: 0; line-height: 1; }
/* Message スクリプト：SVG を mask に、CSS グラデで銀グレーを再現（黒単色にしない）*/
.message__script {
  display: inline-block;
  width: clamp(220px, 20vw, 280px);
  aspect-ratio: 230.8 / 89.2;            /* SVG viewBox 由来。height は自動 */
  background: linear-gradient(105deg, #cfcfcf 0%, #9a9a9a 52%, #6e6e6e 100%);
  -webkit-mask: url(../images/section-messgae.svg) no-repeat left center / contain;
          mask: url(../images/section-messgae.svg) no-repeat left center / contain;
}
.message__title {
  font-family: var(--ff-serif);
  font-size: clamp(34px, 4.2vw, 60px);   /* 参照のゆったり明朝。1440で≈60px */
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .06em;
  color: #20201f;
  margin: 48px 0 0;
}
.message__title-br--sp { display: none; }  /* SP専用改行。PC/中間幅では無効（2行のまま）*/
.message__body { max-width: 760px; margin-top: 44px; }  /* 読みやすい幅に制限 */
.message__body p { font-size: 16px; line-height: 2.0; color: #3a3a3a; }
.message__body p + p { margin-top: 2.0em; }

/* =========================================================
   WORK
   ========================================================= */
/* Work section subtle photo background */
/* Hair Care top : full-bleed hero band（写真＋青グラデ＋見出し）*/
.haircare__hero {
  position: relative;
  min-height: 620px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #6f9bbd;
}
.haircare__photo {
  position: absolute;
  top: -6%; left: 0;
  width: 100%; height: 112%;        /* ×.9 で天地ピッタリ100%になるよう先に拡張 */
  max-width: none;
  object-fit: cover;
  object-position: 20% center;     /* 女性を左に見せる */
  transform: scale(.9);            /* 背景写真を90%に縮小（上下に余白を出さない）*/
  transform-origin: left center;
}
.haircare__hero::before {          /* 左は写真、右は青へ抜けるグラデ overlay */
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg,
    rgba(70,104,134,0.05) 0%,
    rgba(78,116,148,0.40) 34%,
    rgba(92,138,174,0.86) 60%,
    rgba(104,148,184,0.96) 100%);
}
.haircare__intro {
  position: relative;
  z-index: 2;
  width: min(54%, 660px);
  margin-left: auto;               /* 右側に寄せる */
  padding-right: clamp(40px, 7vw, 110px);
  color: #fff;
  transform: translateY(56px);     /* コピー全体を下へ */
}
/* 装飾 Hair Care：単色SVGをmaskで切り抜き、白→薄水色のグラデを流す。
   デザイン位置に合わせ、上部・中央やや左へ絶対配置。 */
.haircare__script {
  position: absolute;
  z-index: 2;
  top: clamp(40px, 8.5%, 100px);      /* もう少し下げる */
  left: 48%;                          /* もうちょっと右へ */
  width: clamp(176px, 23.2vw, 336px);   /* 現在の80%に縮小 */
  aspect-ratio: 249.5 / 120.8;
  background: linear-gradient(95deg, #ffffff 0%, #f2fbff 28%, #c7e8fc 72%, #a7dcfc 100%);
  -webkit-mask: url("../images/section-hair-care.svg") no-repeat center / contain;
  mask: url("../images/section-hair-care.svg") no-repeat center / contain;
}
.haircare__title {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 26px;
}
.haircare__kami {
  font-family: var(--ff-serif);
  font-size: clamp(92px, 10.5vw, 150px);
  line-height: .9;
  font-weight: 500;
  color: #89d0f8;                      /* 指定色 */
  text-shadow: 3px 4px 0 #6a9dc0;      /* ぼかし無し・くっきり。影色 指定 */
  position: relative;
  top: -0.08em;                        /* 「髪」が下寄りに見えるのでちょい上へ（em基準でSPもスケール）*/
}
.haircare__title-lines { margin-top: -0.35em; }  /* 大字「髪」の頭と文章行の頭を揃える（共通レシピ）*/
.haircare__title-line {
  display: block;
  font-family: var(--ff-serif);
  font-size: clamp(28px, 3.4vw, 46px);
  line-height: 1.4;
  letter-spacing: .04em;
  color: #fff;
}
.haircare__note {
  font-size: clamp(13px, 1vw, 15px);
  color: rgba(255,255,255,.92);
  margin: 0 0 22px;
}
.haircare__body {
  font-size: clamp(12.5px, .95vw, 14px);
  line-height: 2.0;
  color: rgba(255,255,255,.86);
}

/* Hair Care : 3 full-bleed photo cards */
.haircare__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);     /* round() 非対応ブラウザ用フォールバック */
  /* 内側2本の境界を「整数ピクセル位置」に揃え、どの表示幅・DPRでも左右の仕切りを
     同一の1pxで描く。1・2列目を整数px、端数は3列目へ吸収（差は数px＝不可視）。*/
  grid-template-columns:
    round(down, calc((100% - 2px) / 3), 1px)
    round(down, calc((100% - 2px) / 3), 1px)
    1fr;
  gap: 1px;                        /* 整数座標で覗く 1px の仕切り */
  background: #dbe4ea;             /* gap に覗く仕切り色 */
}
.hc-card {
  position: relative;
  min-height: 512px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  color: #fff;
  background-size: cover;
  background-position: center;
}
.hc-card::before {                 /* 画像“全体”に均一なブルーオーバーレイ（上から効かせ、下へ少しだけ濃く）*/
  content: "";
  position: absolute; inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(72,102,134,.50) 0%, rgba(64,94,126,.53) 50%, rgba(56,86,116,.58) 100%);
}
.hc-card::after {                  /* 下部のみ：写真をぼかすフロスト（色付けは控えめ。段差を出さずなめらかに）*/
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 56%;
  z-index: 1;
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
  background: linear-gradient(180deg,
    rgba(50,78,108,0) 0%,
    rgba(48,76,104,.09) 55%,
    rgba(44,72,100,.15) 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 50%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 50%);  /* 上端は効果ゼロ→下へなめらかに */
}
.hc-card--1 { background-image: url("../images/bg-haircare-01.webp"); }
/* 3枚とも同一のオーバーレイ処理に統一（::before + ::after）。
   カード1は写真自体が明るいため、同じベールでも自然に少しだけ明るく見える
   ＝デザインのトーン差はこれで再現される（個別に色を変えない）。*/
.hc-card--2 { background-image: url("../images/bg-haircare-02.webp"); }
.hc-card--3 {
  background-image: url("../images/bg-haircare-03.webp");
  background-position: 70% center;   /* 笑顔の顔が入るよう右寄せ（デザインのフレーミング）*/
}
/* 左上の青い直角三角形＋中に番号（白・斜体）*/
.hc-card__no {
  position: absolute; top: 0; left: 0; z-index: 2;
  width: 64px; height: 70px;
  background: #3e769d;
  clip-path: polygon(0 0, 100% 0, 0 100%);
  color: #fff;
  font-style: italic;
  font-weight: 500;
  font-size: .85rem;
  letter-spacing: .06em;
  line-height: 1;
  padding: 9px 0 0 10px;
  box-sizing: border-box;
}
.hc-card__body { position: relative; z-index: 2; padding: 0 34px 42px; }
.hc-card__en {
  font-family: var(--ff-serif);        /* 筆記体→標準的な明朝体（Noto Serif JP）*/
  text-align: center;
  font-size: 1.05rem;
  letter-spacing: .06em;
  color: rgba(255,255,255,.82);
  margin-bottom: 8px;
}
.hc-card__title {
  font-family: var(--ff-serif);
  text-align: center;
  font-size: 1.5rem;
  letter-spacing: .04em;
  margin-bottom: 22px;
  color: #fff;
}
.hc-card__text {
  font-size: .82rem;
  line-height: 2.0;
  color: rgba(255,255,255,.84);
}

/* ---------- full-bleed photo bands ---------- */
.band {
  position: relative;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.band__inner { position: relative; z-index: 1; }

/* light-on-photo variants of accents */
.script--light    { color: #fff; }
.sec-title--light { color: #fff; }
.accent-lg--light { color: var(--c-pink-soft); }

/* Salon Work band */
/* Salon Work : 明るいクリーム基調＋右に写真（デザイン準拠）*/
.band--salonwork {
  margin-top: 0;
  padding: 0;
  background: linear-gradient(118deg, #ddd3c7 0%, #e2d9cf 45%, #e9e3d9 100%);
}
.band--salonwork::before { content: none; }
.salonwork__photo {
  position: absolute;
  top: 0; right: 0;
  width: 100%;                     /* 背景画像を100%（フルブリード）に */
  max-width: none; height: auto;
  z-index: 0;
  -webkit-mask-image: radial-gradient(128% 138% at 100% 6%, #000 44%, rgba(0,0,0,0) 78%);
  mask-image: radial-gradient(128% 138% at 100% 6%, #000 44%, rgba(0,0,0,0) 78%);
  pointer-events: none;
}
.salonwork__inner {
  position: relative;
  z-index: 1;
  padding-top: clamp(56px, 7vw, 100px);
  padding-bottom: clamp(56px, 7vw, 100px);
}
.salonwork__intro { max-width: 560px; }
.salonwork__script {                 /* Salon Work：単色SVGをmask、左濃茶→右タンのグラデ */
  display: block;
  width: clamp(190px, 22vw, 280px);
  aspect-ratio: 254.2 / 118.9;
  background: linear-gradient(96deg, #2f2b20 0%, #4b4233 40%, #a07c4a 100%);
  -webkit-mask: url("../images/section-salon-work.svg") no-repeat left center / contain;
  mask: url("../images/section-salon-work.svg") no-repeat left center / contain;
  margin-bottom: clamp(18px, 2.4vw, 32px);
}
.salonwork__title {
  font-family: var(--ff-serif);
  color: #2a281c;
  font-weight: 500;
  margin: 0 0 clamp(24px, 3vw, 38px);
}
.salonwork__line {
  display: block;
  font-size: clamp(28px, 3.4vw, 46px);
  line-height: 1.4;
  letter-spacing: .05em;
  margin-bottom: 0.35em;               /* 「技術を深めながら、」と「人 との関係も」の間隔を開ける（PC/SP共通）*/
}
.salonwork__titlerow { display: flex; align-items: flex-start; gap: 10px; }
.salonwork__hito {                   /* Hair Care の「髪」と同じ文字組み（単色＋ドロップシャドウ）色だけオレンジ */
  font-family: var(--ff-serif);
  font-size: clamp(92px, 10.5vw, 150px);
  line-height: .9;
  font-weight: 500;
  color: #d8741a;                    /* 単色オレンジ */
  text-shadow: 3px 4px 0 #d8bfa0;    /* ぼかし無し・デザインの淡い暖色タンの影 */
}
.salonwork__lines { margin-top: -0.35em; }  /* 大字「人」の頭と文章行の頭を揃える（共通レシピ）*/
.salonwork__line2 {
  display: block;
  font-size: clamp(28px, 3.4vw, 46px);
  line-height: 1.4;
  letter-spacing: .05em;
}
.salonwork__body { max-width: 480px; }
.salonwork__body p {
  font-size: clamp(13px, 1vw, 14.5px);
  line-height: 2.0;
  color: #4f483b;
}
.salonwork__body p + p { margin-top: 1.5em; }

/* 3 rows (Communication / Team / Specialty) */
.salonwork__rows {
  position: relative;
  z-index: 1;
  margin-top: clamp(40px, 5vw, 70px);
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.6vw, 22px);
}
.sw-row {
  display: grid;
  grid-template-columns: 49% 1fr;
  gap: 0;
  align-items: stretch;                 /* 仕切り線を行いっぱいに */
  padding: clamp(30px, 3.4vw, 48px) clamp(34px, 4vw, 56px);  /* 天地を広く（ショルダー上・タイトル下）*/
  background: rgba(252,250,245,.5);
  border-radius: 6px;
}
.sw-row__head { align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
.sw-row__en {
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: clamp(14px, 1.15vw, 17px);
  letter-spacing: .04em;
  color: #d6721a;
  margin: 0 0 5px;         /* ショルダー↔タイトルは詰める */
}
.sw-row__title {
  font-family: var(--ff-serif);
  font-size: clamp(22px, 2.2vw, 31px);   /* 見本実測（幅基準 ≈27px/字）に合わせる */
  font-weight: 500;
  letter-spacing: .03em;
  line-height: 1.3;
  color: #2e2e26;
  margin: 0;               /* h4既定の上下マージン（約40px）をリセット＝肥大の原因 */
}
.sw-row__text {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;                        /* 罫線は行いっぱい・本文は縦中央 */
  border-left: 1px solid rgba(110,104,88,.30);   /* 縦の仕切り線 */
  padding-left: clamp(40px, 5vw, 66px);
  margin: 0;
  font-size: clamp(13px, 1vw, 14px);
  line-height: 1.95;
  color: #46423a;
}
.band__text { max-width: 540px; }
.band__text .sec-title { font-size: 1.9rem; margin-bottom: 28px; }

/* shared checklist */
.checklist li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 18px;
  font-size: .95rem;
  color: #534b4f;
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 0; top: .55em;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--c-pink-soft);
  box-shadow: inset 0 0 0 4px var(--c-pink);
}
.checklist--light li { color: rgba(255,255,255,.92); }
.checklist--light li::before {
  background: rgba(255,255,255,.25);
  box-shadow: inset 0 0 0 4px var(--c-pink);
}

/* =========================================================
   CULTURE
   ========================================================= */
/* Work Style : purple photo band with frosted cards */
/* Work Style : 紫の band（写真左＋大字「技」＋コピー）— Hair Care/Salon Work と同作法 */
.band--workstyle {
  position: relative;
  padding: 0;
  background: linear-gradient(162deg, #5e547f 0%, #6a6088 38%, #8a83a3 100%);
  overflow: hidden;
}
.band--workstyle::before { content: none; }
.workstyle__photo {
  position: absolute;
  top: 0; left: 0;
  width: min(72%, 1040px);          /* 大きく */
  max-width: none; height: auto;
  z-index: 0;
  /* 右へフェード(radial) と 下へフェード(linear) を合成＝下部を紫へぼかし消す */
  -webkit-mask-image: radial-gradient(125% 140% at 0% 2%, #000 46%, rgba(0,0,0,0) 80%),
                      linear-gradient(to bottom, #000 48%, rgba(0,0,0,0) 90%);
  -webkit-mask-composite: source-in;
  mask-image: radial-gradient(125% 140% at 0% 2%, #000 46%, rgba(0,0,0,0) 80%),
              linear-gradient(to bottom, #000 48%, rgba(0,0,0,0) 90%);
  mask-composite: intersect;
  pointer-events: none;
}
.workstyle__inner {
  position: relative;
  z-index: 1;
  padding-top: clamp(54px, 6.5vw, 100px);
  padding-bottom: clamp(56px, 6.5vw, 100px);
}
.workstyle__intro {
  width: min(54%, 660px);
  margin-left: auto;
  padding-right: clamp(20px, 3vw, 56px);
  color: #fff;
  margin-bottom: clamp(48px, 6vw, 88px);
}
.workstyle__script {              /* Work Style：単色SVGをmask、白→ラベンダーのグラデ */
  display: block;
  width: clamp(200px, 24vw, 320px);
  aspect-ratio: 264.8 / 108.7;
  background: linear-gradient(95deg, #ffffff 0%, #ece0fb 50%, #d6b8f6 100%);
  -webkit-mask: url("../images/section-work-style.svg") no-repeat left center / contain;
  mask: url("../images/section-work-style.svg") no-repeat left center / contain;
  margin: 0 0 clamp(16px, 2.2vw, 30px);
}
.workstyle__title {
  font-family: var(--ff-serif);
  color: #fff;
  font-weight: 500;
  margin: 0 0 clamp(24px, 3vw, 38px);
}
.workstyle__line {
  display: block;
  font-size: clamp(28px, 3.4vw, 46px);
  line-height: 1.4;
  letter-spacing: .05em;
  margin-bottom: 0.35em;               /* 「続けるほどに、」と「技 …」の間隔を開ける（PC/SP共通・salonworkと同修正）*/
}
.workstyle__titlerow { display: flex; align-items: flex-start; gap: 8px; }
.workstyle__waza {                /* 大字「技」：単色＋ドロップシャドウ（髪/人と同作法）*/
  font-family: var(--ff-serif);
  font-size: clamp(92px, 10.5vw, 150px);
  line-height: .9;
  font-weight: 500;
  color: #d6adff;                 /* 単色ラベンダー（デザイン核色）*/
  text-shadow: 3px 4px 0 #8a6cc0; /* ぼかし無し・紫の影 */
  position: relative;
  top: -0.06em;                   /* 「技」が少し下寄りに見えるので、ちょい上へ（髪と同手法・em基準）*/
}
.workstyle__lines { margin-top: -0.35em; }  /* 大字「技」の頭と文章行の頭を揃える（共通レシピ）*/
.workstyle__line2 {
  display: block;
  font-size: clamp(28px, 3.4vw, 46px);
  line-height: 1.4;
  letter-spacing: .05em;
}
.workstyle__body p {
  font-size: clamp(13px, 1vw, 14.5px);
  line-height: 2.0;
  color: rgba(255,255,255,.88);
  max-width: 480px;
}

/* 2×2 frosted cards */
.cards4 {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 420px));   /* カードを狭める（1枚あたり最大420px）*/
  justify-content: center;                              /* バンド内で中央寄せ */
  gap: clamp(16px, 2vw, 26px);
}
.card4 {
  position: relative;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 4px;
  padding: clamp(34px, 4vw, 56px) clamp(28px, 3.4vw, 48px);
  color: #fff;
  text-align: center;
  backdrop-filter: blur(3px);
}
.card4 .card4__en,
.card4 p.card4__en {                 /* 英字ラベル：カード上部中央へ absolute 配置（.card4 p の左寄せに勝つ）*/
  position: absolute;
  top: clamp(34px, 4vw, 56px);
  left: 50%;
  transform: translateX(-50%);
  display: block;
  width: max-content;
  max-width: calc(100% - 48px);
  margin: 0;
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: clamp(15px, 1.2vw, 18px);
  letter-spacing: .06em;
  color: #d9c9f5;
  text-align: center;
  white-space: nowrap;
}
.card4__title {
  font-family: var(--ff-serif);
  font-size: clamp(20px, 2vw, 27px);
  line-height: 1.45;
  font-weight: 500;
  margin: 44px 0 20px;              /* absolute配置の英字ラベルと重ならないよう上余白を確保 */
  color: #fff;
}
.card4 p {
  font-size: clamp(12.5px, .95vw, 14px);
  line-height: 1.95;
  color: rgba(255,255,255,.84);
  text-align: left;
}

/* Person : photo band, text on the left */
.band--person {
  margin-top: 0;
  padding: 88px 0;
  background-color: #f0dbe6;                /* 左側コンテンツ背景＝ピンク */
}
.band--person::before {                     /* 左側のピンク重ね（写真の上／左ほど濃く右で透ける）*/
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(95deg, rgba(240,219,230,.98) 0%, rgba(240,219,230,.9) 32%, rgba(240,219,230,.4) 58%, rgba(240,219,230,0) 82%);
}
.band--person .container { position: relative; z-index: 2; }
.person__photo {                            /* 横幅100%・自然比率で上端固定（ズームせず全体表示）。下部はマスクでフェード */
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: auto;
  max-width: none;
  z-index: 0;
  /* 右上を中心にくっきり残し、右辺〜下へ向かって広く緩やかに消す（top-right起点の radial 1枚）*/
  -webkit-mask-image: radial-gradient(115% 100% at 100% 0%, #000 42%, rgba(0,0,0,0) 100%);
  mask-image: radial-gradient(115% 100% at 100% 0%, #000 42%, rgba(0,0,0,0) 100%);
  pointer-events: none;
}
.person__intro { max-width: 620px; }
.person__script {                    /* Person：単色SVGをmask、深ローズ→淡ピンクのグラデ（他セクションと同方式・同サイズ感）*/
  display: block;
  width: clamp(140px, 18.5vw, 234px);
  aspect-ratio: 161.9 / 89.7;
  background: linear-gradient(98deg, #56303c 0%, #9a4a63 46%, #f5548f 100%);
  -webkit-mask: url("../images/section-person.svg") no-repeat left center / contain;
  mask: url("../images/section-person.svg") no-repeat left center / contain;
  margin: 0 0 clamp(16px, 2.2vw, 30px);
}
.person__title {
  font-family: var(--ff-serif);
  font-weight: 500;
  color: #3f3a3d;
  margin: 14px 0 clamp(24px, 3vw, 34px);
  margin-left: clamp(20px, 4.5vw, 60px);   /* 漢字（タイトル）もコピー・カードと揃えて内側へ */
}
.person__titlerow { display: flex; align-items: flex-start; gap: 6px; }
.person__muki {                      /* 大字「向」：単色ピンク＋くっきりドロップシャドウ（技/髪/人と同作法）*/
  font-family: var(--ff-serif);
  font-size: clamp(92px, 10.5vw, 150px);
  line-height: .9;                   /* 他セクションの大字と揃える（共通レシピ）*/
  font-weight: 500;
  color: #ee7399;                    /* 鮮やかなローズピンク（デザイン採取）*/
  text-shadow: 3px 4px 0 #f0aec2;    /* 薄ピンクの影（やや濃いめ）*/
  position: relative;
  top: -0.06em;                      /* 「向」が少し下寄りに見えるので、ちょい上へ（髪/技と同手法・em基準）*/
}
.person__lines { margin-top: -0.35em; }  /* 大字「向」の頭と文章行の頭を揃える（共通レシピ）*/
.person__line {
  display: block;
  font-size: clamp(28px, 3.4vw, 46px);
  line-height: 1.4;
  letter-spacing: .05em;
}
.person__body { max-width: 560px; margin-left: clamp(20px, 4.5vw, 60px); }  /* コピーを少し内側へ */
.person__body p {
  font-size: clamp(13px, 1vw, 14.5px);
  line-height: 2.0;
  color: #534b4f;
}

/* Person : 3 type cards（左：縦組みピンクバー＋斜体英字＋和文見出し）*/
.ptypes {
  max-width: 720px;
  margin-top: clamp(40px, 5vw, 60px);
  margin-left: clamp(20px, 4.5vw, 60px);   /* カードを少し内側へ（コピーと揃える）*/
  display: grid;
  gap: clamp(16px, 2vw, 24px);
}
.ptype {
  display: flex;
  background: rgba(255,255,255,.94);
  box-shadow: 0 8px 26px rgba(120,80,95,.08);
}
.ptype__no {
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  background: linear-gradient(165deg, #ec9bb3 0%, var(--c-pink-deep) 100%);
}
.ptype__no-in {
  transform: rotate(-90deg);
  white-space: nowrap;
  font-size: 10px;
  letter-spacing: .2em;
  color: #fff;
}
.ptype__main { padding: clamp(20px, 2.4vw, 30px) clamp(24px, 2.8vw, 38px); }
.ptype__en {
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: 14px;
  letter-spacing: .04em;
  color: var(--c-pink);
  margin: 0 0 8px;
}
.ptype__title {
  font-family: var(--ff-serif);
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 500;
  letter-spacing: .04em;
  color: #3f3a3d;
  margin: 0;
}

/* =========================================================
   PEOPLE / INTERVIEW
   ========================================================= */
/* tre People : full-bleed people gallery（全身イラスト4カラム）*/
.people {
  padding: clamp(88px, 9vw, 130px) 0 clamp(70px, 7vw, 110px);
  background:
    radial-gradient(120% 58% at 0% 0%, rgba(238,196,212,.50), transparent 55%),
    radial-gradient(120% 58% at 100% 0%, rgba(186,208,234,.50), transparent 55%),
    #ffffff;
}

/* --- セクション上部の見出し --- */
.people__head { text-align: center; margin-bottom: clamp(40px, 5vw, 66px); }
.people__script {                    /* tre People：単色SVGをmask、青→ピンクのグラデ */
  display: inline-block;
  width: clamp(230px, 27vw, 340px);
  aspect-ratio: 293.1 / 79;
  background: linear-gradient(96deg, #6ba4d6 0%, #9090c9 52%, #e487a6 100%);
  -webkit-mask: url("../images/section-tre-people.svg") no-repeat center / contain;
  mask: url("../images/section-tre-people.svg") no-repeat center / contain;
}
.people__sub {
  margin: clamp(12px, 1.6vw, 18px) 0 0;
  font-size: clamp(14px, 1.15vw, 16.5px);
  letter-spacing: .14em;
  color: #6b6469;
}
.people__copy {
  margin: clamp(18px, 2.4vw, 30px) 0 0;
  font-family: var(--ff-serif);
  font-weight: 500;
  font-size: clamp(28px, 4.4vw, 56px);
  letter-spacing: .045em;
  line-height: 1.3;
  color: #2f2b2d;
}

/* --- 4カラムグリッド（上部に連続グラデライン）--- */
.people__grid {                      /* 横幅いっぱい（全幅）4カラム */
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: 100%;
}

/* --- 人物カード --- */
.pcard {
  --ac: var(--c-blue);
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 2.6vw, 42px) clamp(14px, 1.4vw, 22px) clamp(30px, 3vw, 46px);
  text-align: center;
}
.pcard--blue { --ac: #4f93d6; }
.pcard--pink { --ac: #e86d97; }
.pcard:nth-child(odd)  { background: #f6f3f4; }   /* 01/03：薄グレー */
.pcard:nth-child(even) { background: #ffffff; }   /* 02/04：白 */
.pcard::before {                     /* 各カード上部のグラデライン（左:ピンク → 右:青／中間のぼかしは狭く）*/
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 2;
  background: linear-gradient(90deg, #e87aa0 0%, #e87aa0 40%, #6aa0d6 60%, #6aa0d6 100%);
}

.pcard__no {                         /* 縦書き PEOPLE 01（下→上に読む）*/
  position: absolute;
  top: clamp(18px, 2vw, 30px);
  left: clamp(6px, 0.8vw, 14px);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--ff-serif);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(11px, 0.9vw, 13px);
  letter-spacing: .2em;
  color: var(--ac);
}

/* --- 人物画像（全身・足元まで・見切れさせない）--- */
.pcard__photo {
  position: relative;
  z-index: 3;                        /* イラストを上部グラデラインの手前に */
  height: clamp(430px, 46vw, 605px); /* 全カード共通＝下辺（足元）を揃える */
  margin: 0 0 clamp(14px, 1.6vw, 22px);
}
.pcard__photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
  transform-origin: bottom center;   /* 拡大しても足元（下辺）は固定 */
}
/* PEOPLE 01 / 03（青カード）：下辺（足元）は02/04と揃えたまま、足元基点で拡大して頭を上部ラインの上へ出す */
.pcard--blue .pcard__photo img {
  transform: scale(1.09);
  transform-origin: bottom center;
}
.people__grid .pcard:nth-child(1) .pcard__photo img { transform: scale(1.13); }  /* 01 */
.people__grid .pcard:nth-child(2) .pcard__photo img { transform: scale(1.035); }  /* 02 */
.people__grid .pcard:nth-child(3) .pcard__photo img { transform: scale(1.09); }  /* 03 */

.pcard__script {                     /* 役職スクリプト：画像下部に重ねる筆記体グラデ */
  position: absolute;
  left: 50%;
  bottom: clamp(64px, 9vw, 120px);
  transform: translateX(-50%) rotate(-7deg);
  font-family: "Pinyon Script", var(--ff-script), cursive;
  font-size: clamp(30px, 3.4vw, 52px);
  line-height: 1;
  white-space: nowrap;
  background: linear-gradient(92deg, #5fa0da 0%, #9b8fce 52%, #e783a8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  pointer-events: none;
}

/* --- 人物情報 --- */
.pcard__info { margin-top: auto; }
.pcard__role {
  margin: 0;
  font-size: clamp(12px, 0.95vw, 13.5px);
  letter-spacing: .04em;
  color: #7a7378;
}
.pcard__name {
  margin: clamp(6px, 0.8vw, 10px) 0;
  font-family: var(--ff-serif);
  font-weight: 500;
  font-size: clamp(22px, 2.2vw, 30px);
  letter-spacing: .1em;
  color: #2f2b2d;
}
.pcard__career {
  margin: 0 0 clamp(15px, 1.7vw, 22px);
  font-size: clamp(11.5px, 0.9vw, 13px);
  color: #8b8489;
}

/* --- インタビューボタン（丸い矢印＋テキスト）--- */
.pcard__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: clamp(12.5px, 1vw, 14px);
  color: #4a4448;
  transition: opacity .3s var(--ease);
}
.pcard__btn:hover { opacity: .65; }
.pcard__btn-ic {
  position: relative;
  flex: 0 0 auto;
  width: clamp(22px, 2vw, 26px);
  height: clamp(22px, 2vw, 26px);
  border-radius: 50%;
  background: var(--ac);
}
.pcard__btn-ic::after {              /* 白い右向き矢印（chevron）*/
  content: "";
  position: absolute;
  top: 50%;
  left: 45%;
  width: 6px;
  height: 6px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: translate(-50%, -50%) rotate(45deg);
}

/* =========================================================
   OWNER VOICE
   ========================================================= */
.ownervoice { padding: clamp(6px, 0.8vw, 12px) 0 clamp(36px, 4vw, 64px); background: #fff; }
.ownervoice__inner {
  display: flex;
  justify-content: center;        /* グループ全体をページ中央へ */
}
.ownervoice__group {
  width: max-content;             /* 英字＋本文の幅に収める＝署名を本文右端に揃える基準 */
  max-width: 100%;
}
.ownervoice__main {
  display: flex;
  align-items: center;            /* 斜め英字を本文(5行)の縦中央に合わせる（署名は含めない）*/
  gap: clamp(24px, 4vw, 64px);
}
.ownervoice__script { margin: 0; text-align: center; flex: 0 0 auto; }
.ownervoice__script-img {
  display: inline-block;
  width: clamp(150px, 16vw, 215px);
  height: auto;
}
.ownervoice__text {
  margin: 0;
  font-family: var(--ff-serif);
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 2.25;
  letter-spacing: .04em;
  color: #3b3538;
}
.ownervoice__sign {
  margin: clamp(28px, 4vw, 52px) 0 0;
  text-align: right;              /* グループ右端＝本文右端に揃う */
  font-family: var(--ff-serif);
  font-size: clamp(16px, 1.3vw, 20px);
  letter-spacing: .1em;
  color: #2f2b2d;
}

/* =========================================================
   Q&A  (accordion)
   ========================================================= */
.qa { background: #b1aaa4; }                 /* 温かみのあるトープ背景（デザイン採取）*/
.qa__head { text-align: center; margin-bottom: clamp(34px, 4vw, 56px); }
.qa__script { margin: 0; }
.qa__script-img {
  display: inline-block;
  width: clamp(150px, 15vw, 201px);          /* デザイン採取：約201px幅 */
  height: auto;
  filter: brightness(0) invert(1);           /* 単色SVGを白に */
  transform: translateX(5%);                 /* 筆記体の重心が左寄りなため光学的に中央へ寄せる */
}
.qa__sub {
  margin: clamp(10px, 1.4vw, 16px) 0 0;
  color: #fff;
  font-size: clamp(15px, 1.25vw, 17.5px);
  letter-spacing: .14em;
}

.accordion {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.4vw, 18px);
}
.acc {
  border-radius: 8px;
  overflow: hidden;
  background: #a09690;                         /* 閉：背景より少し暗いトープパネル（デザイン採取）*/
  transition: background .3s var(--ease);
}
.acc:not(.is-open):hover { background: #a89e98; }
.acc.is-open { background: #fff; }            /* 開：白カード */

.acc__q {
  width: 100%;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.4vw, 18px);
  padding: clamp(17px, 1.9vw, 25px) clamp(20px, 2.4vw, 34px);
  color: #fff;
  transition: color .3s var(--ease);
}
.acc.is-open .acc__q { color: #3b3538; }

.acc__mark {
  flex: 0 0 auto;
  width: clamp(24px, 2.2vw, 30px);
  font-family: var(--ff-serif);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(18px, 1.6vw, 23px);
  line-height: 1;
  color: rgba(255,255,255,.92);
}
.acc.is-open .acc__mark { color: #988a82; }

.acc__no {
  flex: 0 0 auto;
  width: clamp(22px, 2vw, 28px);
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: clamp(13px, 1.05vw, 15px);
  letter-spacing: .06em;
  color: rgba(255,255,255,.72);
}
.acc.is-open .acc__no { color: #b3a59f; }

.acc__qt {
  flex: 1 1 auto;
  font-size: clamp(14.5px, 1.08vw, 16px);
  font-weight: 500;
  letter-spacing: .02em;
}

.acc__icon {
  flex: 0 0 17px;
  width: 17px; height: 17px;       /* 奇数グリッドで＋を完全中央化（四方の腕が均等）*/
}
.acc__icon svg { display: block; width: 17px; height: 17px; }
.acc__icon rect {
  fill: currentColor;              /* 1px の矩形＝細い線 */
  shape-rendering: crispEdges;     /* エッジを整数ピクセルにスナップ→消えず・均等 */
  transition: opacity .3s var(--ease);
}
.acc.is-open .acc__icon-v { opacity: 0; }   /* 開：縦線を消して「−」に */

.acc__a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s var(--ease);
}
.acc__a-inner {
  display: flex;
  align-items: flex-start;
  gap: clamp(10px, 1.4vw, 18px);
  margin: 0 clamp(20px, 2.4vw, 34px);
  padding: clamp(15px, 1.8vw, 22px) 0 clamp(20px, 2.2vw, 28px);
  border-top: 1px solid transparent;          /* 罫線はアニメ中は隠す */
  transition: border-color .15s linear;        /* 閉：遅延なし＝罫線が一番最初に消え始める */
}
.acc.is-open .acc__a-inner {
  border-top-color: #ece7e4;
  transition-delay: .22s;                      /* 開：展開の途中（早め）で罫線を表示 */
}
.acc__a-inner .acc__mark { color: #988a82; }
.acc__at { flex: 1 1 auto; }
.acc__lead {
  margin: 0 0 6px;
  font-weight: 700;
  font-size: clamp(14.5px, 1.08vw, 16px);
  color: #9c8071;                              /* ブラウン（デザイン採取）*/
}
.acc__at p {
  margin: 0;
  font-size: clamp(13.5px, 1vw, 15px);
  line-height: 1.95;
  color: #ad9486;                              /* 本文ブラウン（デザイン採取）*/
}

/* =========================================================
   REQUIREMENTS  (definition table)
   ========================================================= */
.requirements { background: #fff; }

.req-head { text-align: center; margin-bottom: clamp(40px, 5vw, 66px); }
.req-script { margin: 0; }    /* 英字は hero-recruit.svg のワードマークを使用 */
.req-sub {
  margin: clamp(12px, 1.5vw, 18px) 0 0;
  color: #58565a;
  font-size: clamp(15px, 1.25vw, 17.5px);
  letter-spacing: .14em;
}
.req-title {
  margin: clamp(24px, 3.2vw, 44px) 0 0;
  font-family: var(--ff-serif);
  font-weight: 500;
  font-size: clamp(30px, 4.6vw, 58px);
  letter-spacing: .045em;
  line-height: 1.3;
  color: #45403c;
  /* 行末の句読点（、。）は全角ボックスの右半分が空くため、中央寄せだと左に寄って見える。
     タイトルだけ右へ約0.25emずらして光学的に中央へ補正（em基準でPC/SP両対応）。 */
  transform: translateX(0.25em);
}
.req-title-br--sp { display: none; }   /* SP専用改行。PC/中間幅では1行のまま */

.req-table {
  max-width: 940px;
  margin: 0 auto;
  border-top: 1px solid #e8e3e0;
}
.req-row {
  display: grid;
  grid-template-columns: clamp(100px, 10vw, 122px) 1fr;
  align-items: baseline;
  padding: clamp(20px, 2.2vw, 28px) 4px;
  border-bottom: 1px solid #e8e3e0;
}
.req-row dt {
  width: 4.6em;
  margin: 0;
  text-align: justify;
  text-align-last: justify;                  /* 2〜4文字ラベルを均等割り付け */
  font-size: clamp(13px, 1vw, 14.5px);
  letter-spacing: .02em;
  color: #a7a2a0;
}
.req-row dd {
  margin: 0;
  font-size: clamp(14px, 1.08vw, 16px);
  font-weight: 500;
  line-height: 1.9;
  color: #3b3538;
}

/* =========================================================
   ENTRY  (dark CTA)
   ========================================================= */
.entry {
  position: relative;
  background: var(--c-dark);   /* カンプはグラデなしの均一ダーク（footer と同色で継ぎ目なし）*/
  color: #fff;
  padding: 130px 0 80px;       /* 下は詰める（カンプのボタン→フッター間隔に合わせる）*/
  text-align: center;
  overflow: hidden;
}
.entry__inner { position: relative; z-index: 2; }
.entry__title {
  font-family: var(--ff-serif);
  font-size: clamp(28px, 3.9vw, 52px);   /* カンプ採取：デスクトップ約52px */
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .04em;
}
.entry__script { margin: clamp(36px, 5.5vw, 60px) 0 clamp(24px, 3vw, 36px); }  /* コピーと英字の間を広げる */
.entry__script-mark {                    /* 英字：単色SVGをmask、青→ピンクのグラデ（カンプ採取色）*/
  display: inline-block;
  width: clamp(300px, 42vw, 560px);   /* カンプ採取：デスクトップ約560px */
  max-width: 100%;
  aspect-ratio: 433.4 / 76.6;
  background: linear-gradient(96deg, #389de3 0%, #9a8fc4 50%, #ff8da5 100%);
  -webkit-mask: url("../images/section-entry.svg") no-repeat center / contain;
  mask: url("../images/section-entry.svg") no-repeat center / contain;
}
.entry__lead {
  margin-top: clamp(40px, 6vw, 64px);    /* グラデ英字と本文の間隔をもっとあける */
  color: rgba(255,255,255,.78);
  font-size: .95rem;
  line-height: 2;
}
.entry__catch {
  margin: clamp(34px, 4.5vw, 60px) 0 0;
  font-size: clamp(18px, 1.9vw, 26px);   /* カンプ採取：デスクトップ約26px */
  font-weight: 500;
  letter-spacing: .05em;
  color: #fff;
}
.entry__catch-br--sp { display: none; }  /* SP専用改行（PCは1行）*/
.entry__lead-br--sp { display: none; }   /* SP専用改行（本文1行目）*/
.entry__cta {
  margin-top: 44px;
  display: flex;
  gap: 18px;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
}
/* ---- 応募フォーム（初期は hidden。「応募する」で白カード展開）---- */
.entry__form-wrap {
  margin-top: clamp(24px, 4vw, 40px);      /* 展開時、カード上部に黒背景の余白を確保 */
  margin-bottom: clamp(56px, 7vw, 72px);   /* カードと下のCTAボタンの間隔を広げる */
  /* スクロール位置は main.js が手動計算（カード上端を画面上から約170px下へ）*/
}
.entry__form-wrap[hidden] { display: none; }   /* 初期は完全非表示（保険）*/

.entry-form {
  width: min(560px, 100%);                        /* コンパクト化：620→560 */
  margin: 0 auto;
  text-align: left;
  background: #fff;
  border-radius: 16px;
  padding: clamp(18px, 2.8vw, 28px);              /* カード内余白を少し詰める */
  box-shadow: 0 24px 60px -30px rgba(0,0,0,.6);   /* 薄い影 */
  animation: entryFormIn .4s var(--ease) both;    /* 展開時のふわっと表示 */
}
@keyframes entryFormIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.entry-form__heading {
  font-family: var(--ff-serif);
  font-size: 1.06rem;
  font-weight: 600;
  color: var(--c-text);
  letter-spacing: .04em;
  margin-bottom: clamp(13px, 1.8vw, 18px);
  text-align: center;
}
.entry-form__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);   /* PCは2カラム */
  gap: 13px 16px;                          /* 項目間の余白を少し詰める */
}
.entry-form__field {
  display: flex;
  flex-direction: column;
  gap: 6px;                                /* ラベルと入力欄の距離を少し詰める */
}
.entry-form__field--full { grid-column: 1 / -1; }   /* 働き方・メッセージは1行占有 */
.entry-form__label {
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--c-text);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.entry-form__badge {
  font-size: .64rem;
  font-weight: 500;
  letter-spacing: .04em;
  padding: 2px 8px;
  border-radius: 999px;
  color: var(--c-text-muted);
  background: var(--c-bg-alt);
}
.entry-form__badge--req {
  color: #fff;
  background: var(--c-pink);
}
.entry-form__input {
  width: 100%;
  background: #fff;
  color: var(--c-text);
  border: 1px solid var(--c-line);
  border-radius: 10px;
  padding: 11px 14px;                      /* 高さ約45pxに（44〜48px目安）*/
  font-family: inherit;
  font-size: .9rem;
  line-height: 1.45;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.entry-form__input::placeholder { color: var(--c-text-muted); }
.entry-form__input:focus {
  outline: none;
  border-color: var(--c-pink);
  box-shadow: 0 0 0 3px rgba(224,138,161,.28);
}
.entry-form__select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238b8489' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}
.entry-form__textarea { resize: vertical; min-height: 80px; }   /* 110→80（約27%減）*/
.entry-form__submit {
  margin-top: clamp(16px, 2.2vw, 22px);
  padding: 14px 40px;      /* btn--lg(18px)より少し低く。押しやすさは維持 */
  width: 100%;
}
/* honeypot：人間には非表示のまま送信される（bot 検出用）*/
.entry-form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---- STEP2: 確認画面 ---- */
.entry-confirm__list {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 12px 16px;
  margin: 4px 0 0;
  font-size: .9rem;
}
.entry-confirm__key { color: var(--c-text-muted); font-weight: 600; }
.entry-confirm__val {
  margin: 0;
  color: var(--c-text);
  white-space: pre-wrap;   /* メッセージの改行を保持 */
  word-break: break-word;
}
.entry-confirm__actions {
  display: flex;
  gap: 14px;
  margin-top: clamp(20px, 3vw, 28px);
}
.entry-confirm__actions .btn { flex: 1; padding: 14px 20px; }
.entry-confirm__back {
  background: #fff;
  color: var(--c-text);
  border: 1px solid var(--c-line);
}
.entry-confirm__back:hover { background: var(--c-bg-alt); }
.entry-form__error {
  margin: 14px 0 0;
  color: #c0392b;
  font-size: .85rem;
  text-align: center;
}

/* ---- STEP3: サンクス画面 ---- */
.entry-thanks { text-align: center; }
.entry-thanks__body {
  margin-top: 14px;
  color: var(--c-text);
  font-size: .92rem;
  line-height: 1.9;
}

/* CTA 行：応募する（ピンク）＋ LINE（白ベース）。LINE の単体上マージンは打ち消す */
.entry__cta .entry__cta-line { margin-top: 0; }
/* LINE ボタンを白ベース＋緑アクセントにしてフッターダークに馴染ませる */
.entry__cta-line {
  background: #fff;
  color: var(--c-text);
  border: 1px solid transparent;
  font-weight: 600;
}
.entry__cta-line:hover { background: var(--c-bg-alt); filter: none; }
.entry__cta-line .btn__line-icon {
  background: var(--c-line-green);   /* 小さな緑チップだけをアクセントに */
  color: #fff;
}

/* =========================================================
   FOOTER
   ========================================================= */
.footer { background: var(--c-dark); color: rgba(255,255,255,.8); padding: clamp(48px, 6vw, 72px) 0 clamp(28px, 3vw, 40px); }
.footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.footer__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px clamp(14px, 1.6vw, 22px);
}
.footer__nav a {
  position: relative;
  font-size: clamp(13px, 1vw, 14px);
  letter-spacing: .04em;
  color: rgba(255,255,255,.85);
  transition: color .3s var(--ease);
}
.footer__nav a:not(:last-child)::after {     /* リンク間の区切り「|」 */
  content: "";
  position: absolute;
  right: calc(clamp(14px, 1.6vw, 22px) / -2);
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 12px;
  background: rgba(255,255,255,.28);
}
.footer__nav a:hover { color: var(--c-pink); }

.footer__logo {
  width: clamp(56px, 6vw, 72px);
  filter: brightness(0) invert(1);
  margin-top: clamp(48px, 6vw, 72px);
}
.footer__addr {
  margin: clamp(18px, 2vw, 26px) 0 0;
  font-style: normal;
  font-size: clamp(13px, 1vw, 14.5px);
  letter-spacing: .04em;
  color: rgba(255,255,255,.82);
}
.footer__contact {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px clamp(20px, 2.4vw, 34px);
  margin: clamp(12px, 1.4vw, 18px) 0 0;
  font-size: clamp(12px, .95vw, 14px);
  letter-spacing: .03em;
  color: rgba(255,255,255,.82);
}
.footer__label { color: rgba(255,255,255,.5); }

.footer__sns {
  display: flex;
  justify-content: center;
  gap: clamp(18px, 2vw, 26px);
  margin: clamp(28px, 3.4vw, 44px) 0 0;
  padding: 0;
  list-style: none;
}
.footer__sns a {
  display: inline-flex;
  color: rgba(255,255,255,.85);
  transition: color .3s var(--ease), opacity .3s var(--ease);
}
.footer__sns a:hover { color: var(--c-pink); opacity: 1; }

.footer__copy {
  margin: clamp(26px, 3vw, 40px) 0 0;
  font-size: clamp(11px, .85vw, 12.5px);
  letter-spacing: .12em;
  color: rgba(255,255,255,.5);
}

/* =========================================================
   Scroll reveal
   ========================================================= */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  will-change: opacity, transform;
}
/* 表示完了後は will-change を解除：コンポジット層を残さず、
   Firefox で層端の1px線（QAの＋アイコン等）が消える不具合を防ぐ */
[data-reveal].is-visible { opacity: 1; transform: none; will-change: auto; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  .hero__scroll::after { animation: none; }
}

/* =========================================================
   RESPONSIVE  ( <= 768px )
   ========================================================= */
/* ナビ7項目＋ボタン＋ロゴは中間幅で溢れるため、1100px 以下はハンバーガー（ドロワー）に切替 */
@media (max-width: 1100px) {
  .hamburger { display: block; }
  .gnav {
    position: fixed;
    /* .header に transform があり、その中の fixed はヘッダー箱基準になる。
       高さはビューポート基準(100vh)で固定し、上端に合わせる */
    top: 0; right: 0; left: auto;
    height: 100vh;
    overflow-y: auto;            /* 背の低い画面では中身をスクロール（見切れ防止）*/
    width: min(78vw, 320px);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 28px;
    padding: 40px;
    background: rgba(255,255,255,.98);
    backdrop-filter: blur(10px);
    transform: translateX(100%);
    transition: transform .4s var(--ease);
    box-shadow: -20px 0 60px -30px rgba(0,0,0,.3);
  }
  .gnav.is-open { transform: translateX(0); }
  .gnav__list { flex-direction: column; gap: 22px; }
  .gnav__list a { font-size: 1rem; }
  body.nav-open { overflow: hidden; }
}

@media (max-width: 1024px) {
  /* HEROは縮めない（カンプスケール維持）。.hero__title はここで上書きしない。
     狭幅では base clamp の下限が効き、はみ出し分は .hero{overflow:hidden} で見切る。 */
  .cards4 { grid-template-columns: repeat(2, 1fr); }
  .people__grid { grid-template-columns: repeat(2, 1fr); }
  .pcard__photo { height: clamp(420px, 56vw, 540px); }
}

@media (max-width: 1100px) {   /* ハンバーガー切替(1100px)と本文レイアウトを揃える（中間幅の崩れ防止）*/
  :root { --gutter: 20px; }
  .section { padding: 80px 0; }
  .people { padding-bottom: 48px; }    /* People と Owner Voice の間隔を少し縮める */
  .ownervoice__main { flex-direction: column; gap: 24px; text-align: center; }  /* 斜め英字と本文の間隔を広げる */
  .ownervoice__text { text-align: left; }
  .ownervoice__br { display: none; }   /* SPは強制改行を無効化し、極力改行なしで自然に折り返す */
  .sec-title { font-size: 1.55rem; }
  .sec-head { margin-bottom: 44px; }
  .script { font-size: 2rem; }
  /* SPは装飾スクリプトを高さ基準で一律縮小（比率は維持）*/
  .script-img { width: auto; height: 30px; }
  /* 募集要項の英字は QA と同じ幅に合わせる（30px高だと小さすぎるため）*/
  .script-img--recruit { width: clamp(150px, 15vw, 201px); height: auto; }
  .req-title-br--sp { display: inline; }   /* SPは「働き方も、／一緒に整える。」で改行 */

  /* hero (SP) : PCと同様、画像は絶対配置で右端固定・高さ基準で大きく。
     コピー/ロゴは画像の上に重ね、可読性は #faf8f6 ベールで確保する。 */
  .hero {
    flex-direction: row;               /* 縦積みを撤回（PCと同じ重なり構成）*/
    align-items: stretch;              /* inner/copy を天地いっぱいに伸ばす（ロゴ上・本文下の振り分け用）*/
    justify-content: flex-start;
    padding: 0;
  }
  .hero__visual {
    position: absolute;                /* relative/center を撤回し absolute に戻す */
    top: 0; right: -34vw; bottom: 0; left: auto;
    height: 100%;                      /* 高さ基準で大きく（縮小しない）*/
    width: auto;
    display: block;                    /* flex-center を解除 */
    margin: 0;
    z-index: 0;
    pointer-events: none;
  }
  .hero__img {
    height: 100%;                      /* 天地100%・高さ基準 */
    width: auto;
    max-width: none;
    margin-inline: 0;
    /* SP：上（顔）はくっきり。下端だけごく薄くフェードして見切りを和らげる程度に。 */
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 84%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 84%, rgba(0,0,0,0) 100%);
  }
  /* SP：可読性は画像の下フェード（.hero__img のマスク）で確保するため、
     文字背面の白ベールは使わない。 */
  .hero::before { display: none; }
  /* inner/copy を天地いっぱいに伸ばし、ロゴを上端・コピー＋本文を右下へ振り分ける */
  .hero__inner {
    min-width: 0;
    width: 100%;
    padding: 0 var(--gutter);
    align-self: stretch;
    display: flex;
  }
  .hero__copy {
    max-width: none;
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;          /* コピー＋本文は左寄せ */
    text-align: left;
    padding: clamp(60px, 13vh, 104px) 0 clamp(40px, 7vh, 60px);  /* 上：ロゴ位置 / 下：本文を左下まで下げる */
  }
  /* ロゴ＋英字は上端・左。margin-bottom:auto で以降（コピー＋本文）を下端へ送る */
  .hero__logo {
    width: 84px;
    margin: 200px 0 auto;            /* ロゴ＋英字を 200px 下げる */
    align-self: flex-start;          /* ロゴは左上 */
    text-align: left;
    transform: scale(.8);            /* ロゴ＋斜め英字を一括80%（比率・位置はそのまま）*/
    transform-origin: top left;      /* 左上基点で縮小 */
  }
  /* ロゴ＋斜め英字の周りだけ、少し明るめのぼかし背景で可読性を上げる。
     四角を作らないよう mask で羽化。Recruit が右下へ伸びるので右へ広めに取る。 */
  .hero__logo::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: -14%; right: -120%;        /* 右へ伸びる Recruit 英字までカバー */
    top: -40%; bottom: -120%;
    background: radial-gradient(60% 60% at 28% 36%,
      rgba(255,255,255,0.72) 0%,
      rgba(255,255,255,0.40) 46%,
      rgba(255,255,255,0)    74%);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    -webkit-mask-image: radial-gradient(60% 60% at 28% 36%, #000 48%, rgba(0,0,0,0) 80%);
    mask-image: radial-gradient(60% 60% at 28% 36%, #000 48%, rgba(0,0,0,0) 80%);
    pointer-events: none;
  }
  .hero__logo-tre { width: 84px; }
  .hero__logo-recruit { left: 100px; top: -18px; width: 168px; }  /* SPは控えめサイズ */
  /* コピー＋本文は左下へ */
  .hero__title { margin: 0; font-size: clamp(34px, 10vw, 52px); line-height: 1.3; letter-spacing: .02em; }
  .hero__lead {
    margin-top: 18px;
    max-width: min(72vw, 340px);
    font-size: 14px;                 /* 本文の級数を下げる（17px→14px）*/
    line-height: 1.85;
  }
  .hero__lead-br { display: none; }  /* SPは強制改行を無効化（自然に折り返す）*/
  /* スクロール誘導は右下へ */
  .hero__scroll {
    left: auto;
    right: clamp(16px, 4vw, 28px);
    bottom: 40px;
    z-index: 3;                       /* 画像より前面に表示 */
  }
  .hero__watermark { font-size: 16vh; left: 40%; top: 42%; }

  /* grids collapse */
  /* Message（SP）：縦積みで自然に読ませる */
  .message { padding: 84px 0; }
  .message__script { width: clamp(170px, 46vw, 220px); }
  /* SP：字間を詰めて「その場だけではなく、」を1行に収める（サイズは据え置き）。
     後半は .message__title-br--sp で「これからの髪まで／見つめる。」に分ける。 */
  .message__title { letter-spacing: -0.03em; margin-top: 40px; }
  .message__title-br--sp { display: inline; }
  .message__body { margin-top: 36px; }
  .message__watermark { left: 6%; width: 150%; opacity: .06; }
  /* Hair Care（SP）：全幅(100vw)の背景写真の上に斜め英字を重ね、その下にコピー＋本文。 */
  .haircare__hero {
    display: block;
    min-height: 0;
    background: #5f8db0;
  }
  .haircare__hero::before { display: none; }
  .haircare__photo {
    position: relative; top: 0;
    display: block;
    width: 100vw; height: 480px;          /* 横100vwの全幅・写真をさらに大きく */
    margin-left: calc(50% - 50vw);        /* コンテナ幅に依らず必ず画面左端から */
    margin-top: -40px;                    /* 背景画像を少し上へ */
    object-position: -64px 22%;           /* 右端揃えから左へ64px（32px×2）*/
    transform: none;
    /* 下部分をグラデでフェードアウトし、青背景（テキストエリア）へ溶かす */
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 55%, rgba(0,0,0,0) 100%);
  }
  .haircare__script {                     /* 写真の上に重ねる・右寄せ */
    position: absolute;
    z-index: 2;
    top: 150px;                           /* 写真(高さ420px)の上寄りに重ねる（さらに上へ）*/
    right: var(--gutter);
    left: auto;
    width: 200px;
  }
  .haircare__intro {                      /* 写真の下にコピー＋本文 */
    width: 100%;
    margin: -100px 0 0;                   /* 背景画像に少し被せるよう、もう少し引き上げる */
    padding: 24px var(--gutter) 52px;
    /* 上端を透明→青にフェードインさせ、写真の下ぼかしを切らずに透けさせる */
    background: linear-gradient(180deg,
      rgba(95,141,176,0) 0%,
      #5f8db0 56px,
      #56809f 100%);
    transform: none;                      /* PCの translateY(56px) を解除 */
  }
  .haircare__kami { font-size: 74px; }
  .haircare__cards { grid-template-columns: 1fr; gap: 0; }
  .hc-card { min-height: 360px; }
  /* Work Style（SP）：Hair Care と同様、全幅写真の上部をくっきり見せ、斜め英字を画像右に重ねる。
     コピー以下は写真の下（紫地）へ縦積み。 */
  .workstyle__photo {
    width: 100vw; height: 360px;
    left: 0; top: 0;
    object-fit: cover;
    object-position: center 28%;
    opacity: 1;                          /* 上部をくっきり（薄消しを解除）*/
    /* 上はくっきり、下だけ紫地へフェード */
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 54%, rgba(0,0,0,0) 96%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 54%, rgba(0,0,0,0) 96%);
  }
  .workstyle__script {                   /* 画像の右側に重ねる（Hair Care と同じ感じ）*/
    position: absolute;
    z-index: 2;
    top: 8px;
    right: 24px;
    left: auto;
    width: 200px;
  }
  .workstyle__inner { padding-top: 250px; }   /* コピー以降：ぼかし始まりに軽く被る程度へ（上げすぎを戻す）*/
  .workstyle__intro { width: 100%; margin-left: 0; padding-right: 0; }
  .workstyle__line, .workstyle__line2 { font-size: 1.7rem; }
  .workstyle__waza { font-size: 4.4rem; }
  .cards4 { grid-template-columns: 1fr; gap: 16px; }
  .people__grid { grid-template-columns: repeat(2, 1fr); }
  .pcard__photo { height: clamp(380px, 64vw, 480px); }
  /* カード内の日本語（役職・経歴）を少しだけ小さくして1行に収める */
  .pcard__role { font-size: 10.5px; letter-spacing: .01em; white-space: nowrap; }
  .pcard__career { font-size: 10.5px; letter-spacing: .01em; white-space: nowrap; }

  /* photo bands */
  .band--workstyle,
  .band--person { padding: 64px 0; }
  .band__text .sec-title { font-size: 1.55rem; }

  /* Salon Work（SP）：写真を上に薄く、テキスト・行は縦積み */
  .band--salonwork { padding: 0; }
  .salonwork__photo {
    width: 140%; right: 0; top: 0;          /* もう少し大きく */
    opacity: 1;                             /* 右側をくっきり表示（全体の薄消しを解除）*/
    /* 右・上はくっきり残し、左と下をフェード（テキスト側をタン地に溶かす）*/
    -webkit-mask-image: radial-gradient(108% 120% at 100% 2%, #000 42%, rgba(0,0,0,0) 76%);
    mask-image: radial-gradient(108% 120% at 100% 2%, #000 42%, rgba(0,0,0,0) 76%);
  }
  .salonwork__inner { padding-top: 64px; padding-bottom: 64px; }
  .salonwork__intro { max-width: none; }
  .salonwork__script { margin-top: 8px; }   /* 斜め英字を少し上へ */
  .salonwork__title { margin-top: 104px; }  /* コピー以下をさらに約64px下げる（40→104）*/
  .salonwork__line, .salonwork__line2 { font-size: 1.7rem; }
  .salonwork__hito { font-size: 4.4rem; }
  .sw-row { grid-template-columns: 1fr; gap: 14px; }
  .sw-row__text { border-left: none; padding-left: 0; padding-top: 14px; border-top: 1px solid rgba(110,104,88,.24); }
  .person__photo {
    width: 132%; right: 0; left: auto; top: 0;   /* くっきり・さらに大きく（右寄せで人物を大きく見せる）*/
    opacity: 1;                                   /* 薄消しを解除 */
    /* 右・上はくっきり残し、左と下をフェード（テキスト側はピンク地に） */
    -webkit-mask-image: radial-gradient(112% 122% at 100% 2%, #000 46%, rgba(0,0,0,0) 80%);
    mask-image: radial-gradient(112% 122% at 100% 2%, #000 46%, rgba(0,0,0,0) 80%);
  }
  .band--person::before {                         /* 縦ベールをやめ、左ピンク→右透明に（右の写真を見せる）*/
    background: linear-gradient(95deg,
      rgba(240,219,230,0.96) 0%,
      rgba(240,219,230,0.86) 30%,
      rgba(240,219,230,0.42) 56%,
      rgba(240,219,230,0) 76%);
  }
  .person__muki { font-size: 4.4rem; }
  .person__line { font-size: 1.7rem; }
  .person__intro, .person__body { max-width: none; }
  .person__title, .person__body, .ptypes { margin-left: 0; }
  .person__script { margin-top: 30px; }   /* 斜め英字を少し下げる */
  .person__title { margin-top: 88px; }    /* コピー以降をもうちょい下へ（写真のフェード始まり付近）*/
  .ptypes { max-width: none; }
  .ptype__no { flex-basis: 30px; }
  .ptype__no-in { font-size: 10px; letter-spacing: .18em; }

  /* requirements stack */
  .req-row { grid-template-columns: 1fr; gap: 6px; }
  .req-row dt { width: auto; justify-self: start; text-align: left; text-align-last: auto; }  /* 均等割り付けをやめ、内容幅に収めて文字間の空白を詰める */
  .req-row dd { padding: 0 0 22px; }   /* 本文（値）の左インデントを削除 */

  .entry { padding: 90px 0; }
  .entry__catch-br--sp { display: inline; }   /* SPは「treでの働き方を、／一緒に見つけていきましょう。」で改行 */
  .entry__lead-br--sp { display: inline; }    /* SPは「見学だけでも、すぐに応募したい方も／大丈夫です。」で改行 */
  .entry__cta { flex-direction: column; align-items: center; gap: 28px; }  /* ボタン間マージンを LINE(margin-top:28px) と揃える */
  .entry__cta .btn { width: 100%; max-width: 320px; }
  .btn--line { width: 100%; max-width: 320px; }   /* LINEも他2つと同じ幅に揃える（中央寄せは.entryのtext-align:center）*/
  .entry-form__grid { grid-template-columns: 1fr; }   /* SPは1カラム */
  .entry-confirm__actions { flex-direction: column; }  /* SPは確認ボタンを縦積み */
  /* iOS Safari は入力欄が16px未満だとフォーカス時に自動ズームし、
     ページが横スクロール可能になってしまう。SPでは16pxを死守する。*/
  .entry-form__input { font-size: 16px; padding: 10px 14px; }
}

@media (max-width: 420px) {
  .people__grid { grid-template-columns: 1fr; }
}