/* ==========================================================================
   ユニバーサルプレイジャパン 採用サイト  共通デザイン
   ・PC は元サイト（Wix）の 1280px 表示を実測して合わせています
   ・スマホは元サイトと同じく 320px 幅を拡大表示する方式（各ページ head のスクリプト）
     → @media (max-width: 699px) の中がスマホ用の指定です（768〜979px は PC の見た目を画面幅に合わせて縮小）
   ========================================================================== */

:root {
  --font: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  --c-text: #000;
  --c-red: #d72d2d;      /* 見出しの赤・リンク */
  --c-red2: #e84040;     /* ボタンの赤 */
  --c-teal: #55b9c6;     /* 水色 */
  --c-teal-d: #49a2ae;   /* 濃い水色 */
  --c-gray: #edecec;     /* 薄いグレーの帯 */
  --c-line: #524e4e;     /* 横線 */
  --c-vline: #282626;    /* 縦線 */
  --c-navy: #373b4d;     /* ボタンに乗せたときの文字色 */
  --c-ink: #1f2226;      /* ボタンを乗せたときの色・フッターの地色 */
}

/* ---------- 基本 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body {
  margin: 0; min-width: 980px;
  font-family: var(--font); font-weight: 400; color: var(--c-text);
  background: #fff; overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, p, ul, ol, figure { margin: 0; padding: 0; font-weight: inherit; font-size: inherit; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: none; }
main, .hd, .ft { overflow-x: clip; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.hd-top__tel { font-weight: 300; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ==========================================================================
   アニメーション（画面に入ると動き出す。js/main.js が .is-in を付けます）
   ========================================================================== */
.anim { --d: 1200ms; --dl: 0ms; --fx: 0px; --fy: 0px; --s: 0; }
.anim.a-glide { --d: 1900ms; --dl: 600ms; }
.js .anim:not(.is-in) { opacity: 0; }
.js .anim.a-reveal-l:not(.is-in), .js .anim.a-reveal-r:not(.is-in), .js .anim.a-reveal-t:not(.is-in) { opacity: 1; }
.js .a-reveal-l:not(.is-in) { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); }
.js .a-reveal-r:not(.is-in) { clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); }
.js .a-reveal-t:not(.is-in) { clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); }

.anim.is-in.a-fade   { animation: k-fade var(--d) cubic-bezier(.445,.05,.55,.95) var(--dl) both; }
.anim.is-in.a-float  { animation: k-float var(--d) cubic-bezier(.445,.05,.55,.95) var(--dl) both; }
.anim.is-in.a-expand { animation: k-fade var(--d) linear var(--dl) both, k-expand var(--d) cubic-bezier(.645,.045,.355,1) var(--dl) both; }
.anim.is-in.a-reveal-l { animation: k-reveal-l var(--d) cubic-bezier(.645,.045,.355,1) var(--dl) both; }
.anim.is-in.a-reveal-r { animation: k-reveal-r var(--d) cubic-bezier(.645,.045,.355,1) var(--dl) both; }
.anim.is-in.a-reveal-t { animation: k-reveal-t var(--d) cubic-bezier(.645,.045,.355,1) var(--dl) both; }
.anim.is-in.a-glide  { animation: k-glide var(--d, 1900ms) cubic-bezier(.645,.045,.355,1) var(--dl, 600ms) both; }

@keyframes k-fade   { from { opacity: 0; } to { opacity: 1; } }
@keyframes k-float  { from { opacity: 0; transform: translate(var(--fx), var(--fy)); } to { opacity: 1; transform: none; } }
@keyframes k-expand { from { transform: scale(var(--s)); } to { transform: none; } }
@keyframes k-reveal-l { from { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); } to { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } }
@keyframes k-reveal-r { from { clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); } to { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } }
@keyframes k-reveal-t { from { clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); } to { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } }
@keyframes k-glide  { from { transform: translateX(var(--gx, 100vw)); } to { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .anim.is-in { animation: none !important; }
}

/* ==========================================================================
   ヘッダー
   ========================================================================== */
.hd { position: sticky; top: 0; z-index: 50; background: var(--c-gray); transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s; } /* PC はヘッダーを画面上部に固定 */
.hd-hidden .hd { transform: translateY(-100%); } /* 下へスクロール中は隠す（js/main.js） */
.hd-hidden .gnav__sub { visibility: hidden; opacity: 0; }

/* 黒い帯 */
.hd-top { position: relative; height: 47px; background: #000; color: #fff; }
.hd-top__title { position: absolute; left: 36px; top: 13px; font-size: 14px; line-height: 19.6px; white-space: nowrap; }
.hd-top__right { position: absolute; right: 31px; top: 15px; display: flex; align-items: center; font-size: 14px; line-height: 16.8px; }
.hd-top__company { text-decoration: underline; margin-right: 12px; }
.hd-top__company:hover { opacity: .7; }
.hd-top__tel { width: 159px; text-align: center; }

/* ロゴの段 */
.hd-main { position: relative; height: 78px; background: var(--c-gray); }
.hd-logo { position: absolute; left: 29px; top: 13px; width: 63px; height: 62px; }
.hd-logo img { width: 100%; height: 100%; object-fit: cover; }
.hd-name { position: absolute; left: 98px; top: 13px; white-space: nowrap; }
.hd-name a { display: block; }
.hd-name__sub { display: block; font-size: 11px; line-height: 29px; letter-spacing: 4.35px; }
.hd-name__main { display: block; font-size: 29px; line-height: 23.2px; }

/* 募集要項・ENTRY ボタン */
.btn.btn-entry { position: absolute; right: 31px; top: 30px; --bh: 54px; min-width: 250px; font-size: 15px; font-weight: 700; }

.hamburger { display: none; }

/* グローバルメニュー（PC） */
.hd-nav { position: relative; height: 43px; }
.gnav { position: absolute; left: 24px; top: 1px; }
.gnav__list { display: flex; }
.gnav__item { position: relative; }
.gnav__item > a {
  display: block; padding: 0 15px; line-height: 40px; font-size: 13px; font-weight: 500; white-space: nowrap;
  transition: color .4s ease;
}
.gnav__item:hover > a, .gnav__item.is-current > a { color: var(--c-red); }
/* マウスを乗せると開く一覧：白いカード（角丸・影）。ふわっと下から現れ、項目は乗せると赤い線が伸びる */
.gnav__sub {
  position: absolute; left: -8px; top: calc(100% + 14px); z-index: 60; min-width: 280px; padding: 22px 10px 14px;
  border-radius: 14px; background: #fff; box-shadow: 0 24px 50px -18px rgba(20,22,26,.35), 0 0 0 1px rgba(0,0,0,.04);
  visibility: hidden; opacity: 0; transform: translateY(10px);
  transition: opacity .3s, transform .35s cubic-bezier(.2,.8,.2,1), visibility 0s linear .35s;
}
.gnav__sub::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; } /* マウスが離れないためのすき間 */
.gnav__sub::after { content: ""; position: absolute; left: 34px; top: -6px; width: 12px; height: 12px; background: #fff; transform: rotate(45deg); border-radius: 2px; } /* 上の小さな三角 */
.gnav__item:hover .gnav__sub, .gnav__item:focus-within .gnav__sub { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.gnav__head { margin: 0 14px 10px; padding-bottom: 12px; border-bottom: 1px solid #ececec; font-size: 11px; letter-spacing: .12em; color: #8a8a8a; white-space: nowrap; }
.gnav__head span { margin-right: 10px; font-size: 15px; font-weight: 500; letter-spacing: .06em; color: var(--c-red2); }
.gnav__sub ul { display: grid; }
.gnav__sub ul:has(> li:nth-child(7)) { grid-template-columns: 1fr 1fr; column-gap: 4px; min-width: 400px; } /* 項目が多いときは2列 */
.gnav__sub li a {
  position: relative; display: block; padding: 9px 14px 9px 30px; border-radius: 8px; font-size: 13px; line-height: 1.4; font-weight: 500; white-space: nowrap;
  transition: background-color .25s, color .25s;
}
.gnav__sub li a::before { content: ""; position: absolute; left: 14px; top: 50%; width: 6px; height: 1px; background: #bbb; transition: width .3s cubic-bezier(.2,.8,.2,1), background-color .25s; }
.gnav__sub li a:hover, .gnav__sub li a.is-current { background: #f6f4f4; color: var(--c-red2); }
.gnav__sub li a:hover::before, .gnav__sub li a.is-current::before { width: 10px; background: var(--c-red2); }
.gnav__sub li a span { display: inline-block; transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.gnav__sub li a:hover span { transform: translateX(4px); }
.gnav__all { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin: 10px 14px 4px; padding-top: 12px; border-top: 1px solid #ececec; font-size: 12px; letter-spacing: .06em; color: var(--c-red2); white-space: nowrap; }
.gnav__all svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.gnav__all:hover svg { transform: translateX(4px); }

/* スマホメニュー（PC では使わない） */
.spmenu { display: none; }

/* ==========================================================================
   ボタン類
   ========================================================================== */
/* ボタン（矢羽根）：右端がとがった板の先に、同じ角度の矢羽根を2本。
   マウスを乗せると濃い色が左から塗り替わり、続けて矢羽根が順に色を変えながら右へ流れる
   色は --bg（板の色）／--fg（文字）／--h-bg（乗せたときの色）／--h-fg で決める */
.btn {
  --bg: var(--c-red2); --fg: #fff; --h-bg: var(--c-ink); --h-fg: #fff; --bh: 58px; --off: 0px;
  position: relative; z-index: 0; isolation: isolate;
  display: inline-flex; align-items: center; min-width: 280px; height: var(--bh); padding: 0 74px 0 34px;
  color: var(--fg); font-size: 15px; line-height: 1; font-weight: 500; letter-spacing: .14em; white-space: nowrap;
  transition: color .4s;
}
.btn::before { /* 板（右端がとがる） */
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 36px; z-index: -1; border-radius: 999px 0 0 999px; /* 左側は丸く */
  background: linear-gradient(var(--h-bg), var(--h-bg)) 0 0 / 0 100% no-repeat, var(--bg);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%);
  transition: background-size .5s cubic-bezier(.7,0,.2,1);
}
.btn__label { position: relative; }
.btn__arrow { position: absolute; top: 0; bottom: 0; right: 0; width: 44px; }
.btn__arrow svg { display: none; }
.btn__arrow::before, .btn__arrow::after { /* 矢羽根2本 */
  content: ""; position: absolute; top: 0; bottom: 0; width: 26px; background: var(--bg);
  clip-path: polygon(0 0, 46% 0, 100% 50%, 46% 100%, 0 100%, 54% 50%);
  transition: background-color .3s, transform .45s cubic-bezier(.2,.8,.2,1);
}
.btn__arrow::before { left: 0; } .btn__arrow::after { left: 18px; }
.btn:hover, .btn:focus-visible { color: var(--h-fg); }
.btn:hover::before, .btn:focus-visible::before { background-size: 100% 100%, auto; }
.btn:hover .btn__arrow::before, .btn:focus-visible .btn__arrow::before { background: var(--h-bg); transform: translateX(4px); transition-delay: .3s, .25s; }
.btn:hover .btn__arrow::after, .btn:focus-visible .btn__arrow::after { background: var(--h-bg); transform: translateX(8px); transition-delay: .4s, .32s; }

.btn--red   { }  /* 赤（基本） */
.btn--teal  { --bg: var(--c-teal); }
.btn--white { --bg: #fff; --fg: var(--c-teal-d); }  /* 水色の帯の上：白い板・水色の文字 */
/* 暗い背景の上（フッターの見学カード・スマホメニュー）では、乗せると白地に黒い文字 */
.ft-cta .btn, .spmenu .btn { --h-bg: #fff; --h-fg: var(--c-ink); }
.btn--sm { --bh: 50px; min-width: 0; padding: 0 64px 0 20px; font-size: 13px; letter-spacing: .08em; }

/* 文字のリンク（インタビューを見る／募集要項）：下線が左から伸び、矢印が右へ動く */
.link-btn {
  position: relative; display: inline-flex; align-items: center; gap: 8px; height: 40px;
  font-size: 15px; font-weight: 500; letter-spacing: .12em; color: var(--c-red); white-space: nowrap;
}
.link-btn::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right center; transition: transform .45s cubic-bezier(.7,0,.2,1);
}
.link-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.link-btn:hover::after { transform: scaleX(1); transform-origin: left center; }
.link-btn:hover svg { transform: translateX(4px); }

/* ==========================================================================
   見出し（Interviews / Culture など）
   ========================================================================== */
.sec-head { position: relative; height: 257px; overflow: hidden; }
.sec-head__title { position: absolute; left: 50%; top: 95px; width: 530px; margin-left: -265px; text-align: center; }
.sec-head__en { display: block; font-size: 50px; line-height: 40px; font-weight: 500; color: var(--c-red); }
.sec-head__en--culture { color: var(--c-red2); }
.sec-head__ja { display: block; margin-top: 20px; font-size: 16px; line-height: 26px; font-weight: 400; }
.sec-head__line { position: absolute; top: 118px; width: 623px; height: 7px; border-top: 1px solid var(--c-line); }
.sec-head__line--l { left: calc(50% - 798px); }
.sec-head__line--r { left: calc(50% + 175px); }

/* 縦の細線 */
.vline { position: absolute; left: calc(50% - 1px); width: 2px; border-left: 1px solid var(--c-vline); }

/* ==========================================================================
   フッター
   ・上：見学のおさそい（写真のカード。下半分がフッターの地色に重なる）
   ・下：ロゴ・メニュー・コピーライト（濃い地色に、鳥のマークを大きく薄く敷く）
   ========================================================================== */
.ft { position: relative; margin-top: 40px; }
.sp-only { display: none; }

/* 見学のおさそい */
.ft-cta { position: relative; z-index: 1; padding: 0 40px; background: linear-gradient(to bottom, transparent 50%, var(--c-ink) 50%); }
.ft-cta__card {
  position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center;
  max-width: 1200px; min-height: 440px; margin: 0 auto; border-radius: 28px; background: #2a2d33; color: #fff;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.45);
}
.ft-cta__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.ft-cta__card::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(18,20,24,.93) 0%, rgba(18,20,24,.8) 45%, rgba(18,20,24,.2) 78%, rgba(18,20,24,0) 100%);
}
.ft-cta__body { width: 100%; max-width: 760px; padding: 64px 72px; }
.ft-cta__en { display: flex; align-items: center; gap: 14px; font-size: 13px; letter-spacing: .3em; text-transform: uppercase; color: var(--c-teal); }
.ft-cta__en::before { content: ""; width: 36px; height: 1px; background: currentColor; }
.ft-cta__title { margin-top: 18px; font-size: 32px; line-height: 1.5; font-weight: 500; letter-spacing: .06em; }
.ft-cta__lead { max-width: 40em; margin-top: 18px; font-size: 15px; line-height: 2; color: rgba(255,255,255,.82); }
.ft-cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 40px; margin-top: 36px; }
.ft-cta__tel { display: flex; flex-direction: column; gap: 6px; }
.ft-cta__tel-label { font-size: 12px; letter-spacing: .12em; color: rgba(255,255,255,.65); }
.ft-cta__tel-num { font-size: 28px; line-height: 1.1; font-weight: 500; letter-spacing: .06em; transition: color .3s; }
.ft-cta__tel:hover .ft-cta__tel-num { color: var(--c-teal); }

/* ロゴ・メニュー */
.ft-main { position: relative; overflow: hidden; margin-top: -2px; padding: 98px 40px 0; background: var(--c-ink); color: rgba(255,255,255,.86); } /* 2px 上に重ねて、見学カードの帯との境目に細い線が出ないように */
.ft-main__mark {
  position: absolute; right: -120px; bottom: -170px; width: 640px; height: 640px; object-fit: contain;
  filter: brightness(0) invert(1); opacity: .05; pointer-events: none;
}
.ft-main__inner {
  position: relative; display: grid; grid-template-columns: minmax(330px, 1fr) minmax(0, 1.55fr); gap: clamp(40px, 5vw, 64px);
  max-width: 1200px; margin: 0 auto; padding-bottom: 88px;
}
.ft-brand__link { display: inline-flex; align-items: center; gap: 18px; }
.ft-brand__logo { width: 78px; height: 78px; object-fit: contain; filter: brightness(0) invert(1); }
.ft-brand__text { display: flex; flex-direction: column; }
.ft-brand__sub { font-size: 11px; letter-spacing: .3em; color: rgba(255,255,255,.6); }
.ft-brand__name { margin-top: 6px; font-size: 26px; line-height: 1.2; letter-spacing: .02em; color: #fff; white-space: nowrap; }
.ft-brand__ja { margin-top: 6px; font-size: 13px; letter-spacing: .2em; color: rgba(255,255,255,.7); }
.ft-brand__copy {
  margin-top: 40px; padding-left: 18px; border-left: 2px solid var(--c-teal);
  font-size: 19px; line-height: 1.8; font-weight: 500; letter-spacing: .08em; color: #fff;
}
.ft-sns { display: flex; gap: 12px; margin-top: 34px; }
.ft-sns a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s; }
.ft-sns img { width: 26px; height: 26px; }
.ft-sns a:hover { transform: translateY(-3px); box-shadow: 0 8px 18px -6px rgba(0,0,0,.6); }

.ft-nav { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: clamp(32px, 4vw, 56px); }
.ft-nav__title { padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,.15); font-size: 13px; letter-spacing: .12em; color: rgba(255,255,255,.6); }
.ft-nav__en { display: block; margin-bottom: 4px; font-size: 22px; font-weight: 500; letter-spacing: .08em; color: #fff; }
.ft-nav__list { margin-top: 20px; }
.ft-nav__list li + li { margin-top: 14px; }
.ft-nav__list a {
  display: inline; font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.86);
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: color .3s, background-size .45s cubic-bezier(.7,0,.2,1);
}
.ft-nav__list a:hover { color: #fff; background-size: 100% 1px; }
.ft-nav__list small { display: block; font-size: 11px; line-height: 1.6; letter-spacing: .04em; color: rgba(255,255,255,.5); }
.ft-ext { display: inline-block; width: 10px; height: 10px; margin-left: 6px; vertical-align: 1px; fill: none; stroke: currentColor; stroke-width: 1.5; opacity: .6; }

/* コピーライト・ページの先頭へ */
.ft-bottom {
  position: relative; display: flex; align-items: center; gap: 32px;
  max-width: 1200px; margin: 0 auto; padding: 26px 0 30px; border-top: 1px solid rgba(255,255,255,.15);
  font-size: 12px; color: rgba(255,255,255,.55);
}
.ft-bottom__links { display: flex; gap: 28px; }
.ft-bottom__links a { transition: color .3s; }
.ft-bottom__links a:hover { color: #fff; }
.ft-bottom__copy { margin-left: auto; letter-spacing: .05em; }
.ft-totop { display: inline-flex; align-items: center; gap: 12px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: #fff; }
.ft-totop__icon {
  display: grid; place-items: center; overflow: hidden; width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.4); transition: background-color .3s, border-color .3s;
}
.ft-totop svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ft-totop:hover .ft-totop__icon { background: var(--c-red2); border-color: var(--c-red2); }
.ft-totop:hover svg { animation: k-arrow-up .6s cubic-bezier(.7,0,.2,1); }
@keyframes k-arrow-up { 0% { transform: none; } 45% { transform: translateY(-160%); } 46% { transform: translateY(160%); } 100% { transform: none; } }

/* ==========================================================================
   スマホ（320px 幅で表示）
   ========================================================================== */
@media (max-width: 699px) {
  body { min-width: 0; }
  .hd { position: relative; } /* スマホはヘッダーも一緒にスクロール */
  .anim { --s: .8; }
  .anim.a-expand { --d: 800ms; }
  .anim.is-in.a-sp-float { animation: k-float 1200ms cubic-bezier(.445,.05,.55,.95) both; --fx: 60px; }
  .anim.is-in.a-sp-float-l { animation: k-float 1200ms cubic-bezier(.445,.05,.55,.95) both; --fx: -60px; }
  .anim.is-in.a-sp-expand { animation: k-fade 800ms linear both, k-expand 800ms cubic-bezier(.645,.045,.355,1) both; --s: .8; }

  /* ヘッダー */
  .hd-top { height: 40.4px; }
  .hd-top__title { left: 20px; right: 20px; top: 12px; font-size: 11px; line-height: 15.4px; text-align: center; }
  .hd-top__right { display: none; }
  .hd-main { height: 123px; margin-top: -2px; }
  .hd-logo { left: 9px; top: 8px; width: 50px; height: 50px; }
  .hd-name { left: 63px; top: 8px; }
  .hd-name__sub { font-size: 9px; line-height: 24px; letter-spacing: 3px; }
  .hd-name__main { font-size: 20px; line-height: 16px; }
  .btn.btn-entry { left: 17px; right: auto; top: 66px; width: 286px; --bh: 44px; font-size: 13px; }
  .hd-nav { display: none; }

  .hamburger {
    display: block; position: absolute; left: 266px; top: 10.6px; width: 41px; height: 42px;
    background: #fff; border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,.25);
  }
  .hamburger span { position: absolute; left: 10px; width: 22px; height: 3px; background: var(--c-line); transition: transform .3s, opacity .3s; }
  .hamburger span:nth-child(1) { top: 12px; }
  .hamburger span:nth-child(2) { top: 20px; }
  .hamburger span:nth-child(3) { top: 28px; }

  /* スマホメニュー：濃い地色の全画面パネル。開くと上からすっと現れ、項目が順に浮かび上がる */
  .spmenu { display: block; position: fixed; inset: 0; z-index: 200; visibility: hidden; transition: visibility 0s linear .5s; }
  .spmenu__overlay { position: absolute; inset: 0; background: rgba(0,0,0,.4); opacity: 0; transition: opacity .4s; }
  .spmenu__panel {
    position: absolute; inset: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
    padding: 0 22px 40px; background: var(--c-ink); color: #fff;
    clip-path: inset(0 0 100% 0); transition: clip-path .55s cubic-bezier(.7,0,.2,1);
  }
  .menu-open { overflow: hidden; }
  .menu-open .spmenu { visibility: visible; transition-delay: 0s; }
  .menu-open .spmenu__overlay { opacity: 1; }
  .menu-open .spmenu__panel { clip-path: inset(0 0 0 0); }
  .spmenu__mark { position: absolute; right: -90px; bottom: -40px; width: 300px; height: 300px; object-fit: contain; filter: brightness(0) invert(1); opacity: .05; pointer-events: none; }

  .spmenu__top { position: relative; display: flex; align-items: center; justify-content: space-between; height: 72px; border-bottom: 1px solid rgba(255,255,255,.14); }
  .spmenu__brand { display: flex; align-items: center; gap: 10px; }
  .spmenu__brand img { width: 38px; height: 38px; object-fit: contain; filter: brightness(0) invert(1); }
  .spmenu__brand span { display: flex; flex-direction: column; font-size: 15px; line-height: 1.2; letter-spacing: .02em; }
  .spmenu__brand small { margin-bottom: 3px; font-size: 7.5px; letter-spacing: .25em; color: rgba(255,255,255,.6); }
  .spmenu__close { position: relative; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); transition: background-color .3s, border-color .3s; }
  .spmenu__close span { position: absolute; left: 12px; top: 20px; width: 17px; height: 1.5px; background: #fff; transform: rotate(45deg); }
  .spmenu__close span + span { transform: rotate(-45deg); }
  .spmenu__close:active { background: var(--c-red2); border-color: var(--c-red2); }

  .spmenu__list { position: relative; margin-top: 10px; }
  .spmenu__list > li { border-bottom: 1px solid rgba(255,255,255,.1); }
  .spmenu__list > li, .spmenu__foot { opacity: 0; transform: translateY(14px); transition: opacity .5s, transform .5s cubic-bezier(.2,.8,.2,1); }
  .menu-open .spmenu__list > li, .menu-open .spmenu__foot { opacity: 1; transform: none; transition-delay: calc(.25s + var(--i) * .05s); }
  .spmenu__row { display: flex; align-items: center; }
  .spmenu__link { flex: 1; display: flex; align-items: baseline; gap: 12px; padding: 17px 0 15px; text-align: left; color: #fff; }
  .spmenu__en { font-size: 19px; font-weight: 500; letter-spacing: .06em; }
  .spmenu__ja { font-size: 10.5px; letter-spacing: .1em; color: rgba(255,255,255,.55); }
  .spmenu__link.is-current .spmenu__en::after { content: ""; display: inline-block; width: 5px; height: 5px; margin-left: 8px; vertical-align: 4px; border-radius: 50%; background: var(--c-red2); }
  .spmenu__toggle { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); color: #fff; }
  .spmenu__toggle svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; transition: transform .35s; }
  .spmenu__toggle[aria-expanded="true"] { background: #fff; color: var(--c-ink); }
  .spmenu__toggle[aria-expanded="true"] svg { transform: rotate(135deg); }
  .spmenu__sub { max-height: 0; overflow: hidden; transition: max-height .45s cubic-bezier(.2,.8,.2,1); }
  .spmenu__sub.is-open { max-height: 560px; }
  .spmenu__sub li:first-child { padding-top: 2px; }
  .spmenu__sub li:last-child { padding-bottom: 14px; }
  .spmenu__sub a { position: relative; display: block; padding: 7px 0 7px 18px; font-size: 12px; letter-spacing: .04em; color: rgba(255,255,255,.8); }
  .spmenu__sub a::before { content: ""; position: absolute; left: 2px; top: 50%; width: 8px; height: 1px; background: rgba(255,255,255,.4); }
  .spmenu__sub a.is-current { color: #fff; }
  .spmenu__sub a.is-current::before { background: var(--c-red2); }

  .spmenu__foot { position: relative; margin-top: 28px; text-align: center; }
  .spmenu__btn { width: calc(100% - var(--off)); }
  /* 電話番号の右に LINE・Instagram */
  .spmenu__contact { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 22px; }
  .spmenu__tel { display: flex; flex-direction: column; gap: 4px; font-size: 19px; letter-spacing: .05em; text-align: left; }
  .spmenu__tel span { font-size: 10px; letter-spacing: .1em; color: rgba(255,255,255,.6); }
  .spmenu__sns { display: flex; gap: 8px; }
  .spmenu__sns a { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #fff; }
  .spmenu__sns img { width: 22px; height: 22px; }

  /* ボタン */
  .btn { --bh: 46px; min-width: 220px; padding: 0 64px 0 20px; font-size: 12.5px; letter-spacing: .1em; }
  .link-btn { height: 40px; gap: 6px; font-size: 12px; letter-spacing: .08em; }
  .link-btn svg { width: 12px; height: 12px; }

  /* 見出し */
  .sec-head { height: 83.1px; }
  .sec-head__title { top: 34px; width: 185px; margin-left: -92.5px; }
  .sec-head__en { font-size: 26px; line-height: 20.8px; }
  .sec-head__ja { margin-top: 10px; font-size: 12px; line-height: 16.3px; }
  .sec-head__line { top: 46px; width: 95px; height: 3px; }
  .sec-head__line--l { left: -15px; }
  .sec-head__line--r { left: 238px; }

  /* フッター */
  .ft { margin-top: 24px; }
  .sp-only { display: inline; }
  .ft-cta { padding: 0 12px; }
  .ft-cta__card { display: block; min-height: 0; border-radius: 18px; }
  .ft-cta__img { object-position: 60% 0; }
  .ft-cta__card::before { background: linear-gradient(180deg, rgba(18,20,24,.5) 0%, rgba(18,20,24,.9) 45%, rgba(18,20,24,.94) 100%); }
  .ft-cta__body { padding: 34px 20px 30px; text-align: center; }
  .ft-cta__en { justify-content: center; font-size: 10px; }
  .ft-cta__en::before { display: none; }
  .ft-cta__title { margin-top: 10px; font-size: 20px; letter-spacing: .04em; }
  .ft-cta__lead { margin-top: 14px; font-size: 12px; line-height: 1.9; text-align: left; }
  .ft-cta__actions { flex-direction: column; gap: 22px; margin-top: 24px; }
  .ft-cta__actions .btn { width: calc(100% - var(--off)); }
  .ft-cta__tel { align-items: center; }
  .ft-cta__tel-label { font-size: 11px; }
  .ft-cta__tel-num { font-size: 22px; }

  .ft-main { padding: 62px 20px 0; }
  .ft-main__mark { right: -110px; top: 150px; bottom: auto; width: 320px; height: 320px; }
  .ft-main__inner { display: block; padding-bottom: 44px; }
  .ft-brand__link { gap: 12px; }
  .ft-brand__logo { width: 56px; height: 56px; }
  .ft-brand__sub { font-size: 9px; letter-spacing: .24em; }
  .ft-brand__name { margin-top: 4px; font-size: 20px; }
  .ft-brand__ja { margin-top: 4px; font-size: 11px; }
  .ft-brand__copy { margin-top: 26px; padding-left: 14px; font-size: 15px; }
  .ft-sns { margin-top: 24px; gap: 10px; }
  .ft-sns a { width: 40px; height: 40px; }
  .ft-sns img { width: 24px; height: 24px; }
  .ft-nav { display: block; margin-top: 44px; }
  .ft-nav__col + .ft-nav__col { margin-top: 38px; }
  .ft-nav__title { padding-bottom: 12px; font-size: 11px; }
  .ft-nav__en { font-size: 18px; }
  .ft-nav__list { margin-top: 16px; }
  .ft-nav__list li + li { margin-top: 12px; }
  .ft-nav__list a { font-size: 13px; }
  .ft-nav__list small { font-size: 10px; }
  .ft-bottom { flex-wrap: wrap; gap: 14px 18px; padding: 20px 0 24px; font-size: 11px; }
  .ft-bottom__links { gap: 18px; }
  .ft-totop { order: 2; margin-left: auto; }
  .ft-totop > span:first-child { display: none; }
  .ft-totop__icon { width: 36px; height: 36px; }
  .ft-bottom__copy { order: 3; width: 100%; margin-left: 0; font-size: 10px; }
}

/* ---------- スマホの文字サイズ（全ページ共通の基準）----------
   本文 11.5px ／ 補足 10〜11px ／ 小見出し・質問 13px ／ 見出し 16.5〜17px ／ ページの題 18px */
@media (max-width: 699px) {
  .sec-head__ja { font-size: 11px; }
  .btn { font-size: 12.5px; }
  .link-btn { font-size: 11.5px; }
  .ft-cta__title { font-size: 18px; }
  .ft-cta__lead { font-size: 11.5px; }
  .ft-brand__copy { font-size: 14px; }
  .ft-nav__list a { font-size: 12.5px; }
}

/* 見出しの最後の1文字だけが次の行に落ちないよう、行の長さをそろえて折り返す */
.iv-others__title, .job-sec__title, .top-method__title, .ft-cta__title { text-wrap: balance; word-break: auto-phrase; }
/* インタビューの見出し・質問：文節（HTML の <wbr>）の切れ目だけで改行する */
.iv-box__t, .iv-box__q { word-break: keep-all; overflow-wrap: anywhere; }
.iv-box__t { text-wrap: balance; }

/* 699px 以下の広めのウインドウ：スマホのデザイン（320px）を中央に置き、
   色の帯（ヘッダー・グレーの帯・水色の帯・フッター）だけ左右いっぱいに伸ばす（head のスクリプトが is-narrow を付ける） */
html.is-narrow body { width: 320px; margin: 0 auto; overflow-x: visible; }
html.is-narrow main, html.is-narrow .hd, html.is-narrow .ft { overflow-x: visible; }
html.is-narrow { overflow-x: clip; }
.is-narrow .hd-top, .is-narrow .hd-main, .is-narrow .top-perks, .is-narrow .top-method__band,
.is-narrow .ft-main, .is-narrow .we-edu__band, .is-narrow .iv-band {
  border-image: linear-gradient(var(--bleed), var(--bleed)) fill 0 / 0 / 0 100vmax;
}
.is-narrow .hd-top { --bleed: #000; }
.is-narrow .hd-main, .is-narrow .top-perks, .is-narrow .we-edu__band { --bleed: var(--c-gray); }
.is-narrow .top-method__band, .is-narrow .iv-band { --bleed: var(--c-teal-d); }
.is-narrow .ft-main { --bleed: var(--c-ink); }
.is-narrow .ft-cta { background: none; border-image: linear-gradient(to bottom, transparent 50%, var(--c-ink) 50%) fill 0 / 0 / 0 100vmax; }

/* ---------- 募集要項のページ：スマホで画面の下にいつも出す「面接のお申し込みはこちら」 ---------- */
.apply-bar { display: none; }
@media (max-width: 699px) {
  .has-apply-bar { padding-bottom: 72px; }
  .has-apply-bar .btn.btn-entry { display: none; }  /* ヘッダーの応募ボタンは出さない（下のボタンに集約） */
  .has-apply-bar .hd-main { height: 68px; }
  .apply-bar {
    display: flex; justify-content: center; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255,255,255,.94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    box-shadow: 0 -8px 20px -12px rgba(0,0,0,.35);
  }
  .apply-bar .btn { width: 100%; max-width: 300px; }
  .menu-open .apply-bar { display: none; }
}