/* ══════════════════════════════════════════
   index.css
   TOPページ固有スタイル（共通は common.css 参照）
══════════════════════════════════════════ */


/* ══════════════════════════════════════════
   装飾アニメーション（社員紹介セクション）
══════════════════════════════════════════ */

.osaka-hero-deco { position: absolute; inset: 0; pointer-events: none; }
.osd { position: absolute; border-radius: 50%; }
.osd-ring-1 { width: 340px; height: 340px; border: 1.5px solid rgba(122,158,142,.45); top: -100px; right: -80px; animation: osd-pulse 9s ease-in-out infinite; }
.osd-ring-2 { width: 200px; height: 200px; border: 1.5px solid rgba(122,158,142,.35); bottom: 20px; left: -60px; animation: osd-pulse 7s ease-in-out infinite 2.5s; }
.osd-ring-3 { width: 90px; height: 90px; border: 1.5px solid rgba(122,158,142,.55); top: 45%; right: 22%; animation: osd-pulse 5s ease-in-out infinite 1s; }
.osd-ring-4 { width: 260px; height: 260px; border: 1.5px solid rgba(122,158,142,.3); top: 30%; left: 5%; animation: osd-pulse 11s ease-in-out infinite 3s; }
.osd-ring-5 { width: 120px; height: 120px; border: 1.5px solid rgba(122,158,142,.4); bottom: 10%; right: 8%; animation: osd-pulse 6s ease-in-out infinite 1.5s; }
.osd-dot-1 { width: 6px; height: 6px; background: rgba(122,158,142,.7); bottom: 35%; left: 18%; animation: osd-rise 8s ease-in-out infinite; }
.osd-dot-2 { width: 4px; height: 4px; background: rgba(122,158,142,.6); bottom: 25%; right: 28%; animation: osd-rise 10s ease-in-out infinite 2s; }
.osd-dot-3 { width: 5px; height: 5px; background: rgba(122,158,142,.55); bottom: 65%; left: 55%; animation: osd-rise 7s ease-in-out infinite 4s; }
.osd-dot-4 { width: 4px; height: 4px; background: rgba(122,158,142,.65); bottom: 12%; left: 38%; animation: osd-rise 9s ease-in-out infinite 1s; }
.osd-dot-5 { width: 6px; height: 6px; background: rgba(122,158,142,.5); bottom: 50%; right: 15%; animation: osd-rise 11s ease-in-out infinite 3s; }
.osd-dot-6 { width: 5px; height: 5px; background: rgba(122,158,142,.6); bottom: 80%; left: 10%; animation: osd-rise 8s ease-in-out infinite 5s; }
.osd-dot-7 { width: 3px; height: 3px; background: rgba(122,158,142,.7); bottom: 45%; right: 42%; animation: osd-rise 9s ease-in-out infinite 1.5s; }
.osd-dot-8 { width: 6px; height: 6px; background: rgba(122,158,142,.45); bottom: 70%; right: 8%; animation: osd-rise 12s ease-in-out infinite 3.5s; }
.osd-dot-9 { width: 4px; height: 4px; background: rgba(122,158,142,.6); bottom: 5%; left: 65%; animation: osd-rise 7s ease-in-out infinite 6s; }
@keyframes osd-pulse {
  0%, 100% { transform: scale(1); opacity: .6; }
  50% { transform: scale(1.1); opacity: 1; }
}
@keyframes osd-rise {
  0% { transform: translateY(0); opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: .7; }
  100% { transform: translateY(-100px); opacity: 0; }
}


/* ══════════════════════════════════════════
   CONTAINER — TOPページ独自コンテナ
══════════════════════════════════════════ */

.container { max-width: 1200px; margin: 0 auto; padding: 0 64px; }

/* ══ レスポンシブ: 1024px以下 ══ */
@media (max-width: 1024px) { .container { padding: 0 40px; } }

/* ══ レスポンシブ: 768px以下 ══ */
@media (max-width: 768px) { .container { padding: 0 24px; } }


/* ══════════════════════════════════════════
   REVEAL — TOPページ独自アニメーション遅延
══════════════════════════════════════════ */

.reveal-d1 { transition-delay: .1s; }
.reveal-d2 { transition-delay: .2s; }
.reveal-d3 { transition-delay: .35s; }
.reveal-d4 { transition-delay: .5s; }


/* ══════════════════════════════════════════
   BUTTONS — TOPページ独自ボタン（.btn-primary は common.css に移動済み）
══════════════════════════════════════════ */

.btn-outline { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 400; letter-spacing: .14em; padding: 14px 32px; border: 1px solid var(--black); color: var(--black); transition: background .25s, color .25s; }
.btn-outline:hover { background: var(--black); color: var(--white); }


/* ══════════════════════════════════════════
   FOOTER OVERRIDE — TOPページのみ異なるpadding/logo
══════════════════════════════════════════ */

footer { padding: 56px 64px 40px; }
.footer-logo { font-size: 24px; letter-spacing: .14em; }


/* ══════════════════════════════════════════
   SECTION — .section / .section-inner / .section-head 系は common.css に移動済み
══════════════════════════════════════════ */


/* ══════════════════════════════════════════
   HERO — ファーストビュー（シーンベース）
══════════════════════════════════════════ */

/* ── ヒーロー本体（navがFV上に重なるフルブリード） ── */
#hero { position: relative; width: 100%; box-sizing: border-box; overflow: hidden; max-height: 100dvh; isolation: isolate; }

/* ── シーンラッパー（アスペクト比 1728:1050 — 上50px分クロップ） ── */
#hero .scene-wrapper {
  width: 100%;
  position: relative;
  padding-top: calc(1050 / 1728 * 100%);
  overflow: hidden;
}

/* ── シーン本体 1728×1100px → JS で scale()、上50pxクロップ ── */
#hero .scene {
  position: absolute;
  top: 0; left: 0;
  width: 1728px;
  height: 1100px;
  transform-origin: top left;
  overflow: hidden;
  background-color: #f2f2f2;
  background-image:
    linear-gradient(to right,  #d4d4d4 1px, transparent 1px),
    linear-gradient(to bottom, #d4d4d4 1px, transparent 1px);
  background-size: 34.56px 27.5px;
  font-family: 'Shippori Mincho B1', serif;
}

/* ── 呼吸アニメーション（装飾円用） ── */
@keyframes ellipse-breathe {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%       { transform: scale(1.06); opacity: .85; }
}
@keyframes ellipse-breathe-alt {
  0%, 100% { transform: scale(1.04); opacity: .9; }
  50%       { transform: scale(.96);  opacity: 1; }
}
@keyframes hero-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes hero-slide-in-right {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── 装飾円: ティール グラデーション（右上） ── */
#ellipse2 {
  position: absolute;
  left: 1136px; top: -53px;
  width: 697px; height: 697px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(3,121,140,.70) 0%, rgba(3,121,140,.25) 50%, rgba(200,235,240,.08) 100%);
  filter: blur(48px);
  z-index: 1;
  animation: ellipse-breathe 9s ease-in-out infinite;
}

/* ── 装飾円: ダーク（右下） ── */
#ellipse3 {
  position: absolute;
  left: 697px; top: 680px;
  width: 697px; height: 697px;
  border-radius: 50%;
  background: radial-gradient(circle, #1e3040 0%, #0d1a25 60%, rgba(13,26,37,.80) 100%);
  z-index: 2;
  animation: ellipse-breathe-alt 11s ease-in-out infinite;
}

/* ── 装飾円: 人物背景ダーク ── */
#ellipse-dark-bg {
  position: absolute;
  left: 887px; top: 242px;
  width: 725px; height: 725px;
  border-radius: 50%;
  background: radial-gradient(circle, #2a4050 0%, #0d1f2d 60%, #080f16 100%);
  z-index: 3;
  animation: ellipse-breathe 7s ease-in-out 1s infinite;
}

/* ── 人物写真コンテナ（上半分表示・下部を円弧でクリップ） ── */
#people-wrap {
  position: absolute;
  left: 805px; top: 143px;
  width: 843px; height: 866px;
  clip-path: path('M 0 0 L 843 0 L 843 461.5 L 807 461.5 A 362.5 362.5 0 0 1 82 461.5 L 0 461.5 Z');
  z-index: 4;
  opacity: 0;
  animation: hero-fade-in 1.6s ease .1s forwards;
}
#person-man {
  position: absolute;
  left: 0; top: 0;
  width: 547px; height: 821px;
  object-fit: cover;
}
#person-woman {
  position: absolute;
  left: 281px; top: 22px;
  width: 562px; height: 844px;
  object-fit: cover;
}

#saiyou-circle { display: none; }

/* ── 右端フロストパネル ── */
#frost-panel {
  position: absolute;
  left: 1570px; top: 67px;
  width: 87px; height: 739px;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  z-index: 10;
}

/* ── 縦書きテキスト ── */
#vertical-text {
  position: absolute;
  left: 1595px; top: 165px;
  width: 36px; height: 672px;
  z-index: 11;
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size: 36px;
  line-height: 48px;
  color: #03798c;
  font-weight: 400;
  letter-spacing: 0.5em;
  white-space: nowrap;
  opacity: 0;
  animation: hero-slide-in-right 1s ease .5s forwards;
}

/* ── 見出しアニメーション ── */
@keyframes hero-heading-in {
  from { opacity: 0; transform: translateY(36px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes hero-teal-glow {
  0%, 100% { text-shadow: 0 0 0px rgba(3,121,140,0); }
  50%       { text-shadow: 0 0 28px rgba(3,121,140,.45), 0 0 8px rgba(3,121,140,.25); }
}

/* ── 見出し① ── */
#heading-1 {
  position: absolute;
  left: 96px; top: 297px;
  white-space: nowrap;
  line-height: 100px;
  font-weight: 700;
  z-index: 6;
  opacity: 0;
  animation: hero-heading-in .85s cubic-bezier(.22,.68,0,1.2) .35s forwards;
}
#heading-1 .h1-ji {
  font-size: 130px; color: #03798c;
  display: inline-block;
  animation: hero-teal-glow 4s ease-in-out 1.2s infinite;
}
#heading-1 .h1-rest { font-size: 80px; color: #222222; }

/* ── 見出し② ── */
#heading-2 {
  position: absolute;
  left: 262px; top: 414px;
  white-space: nowrap;
  line-height: 100px;
  font-weight: 700;
  z-index: 6;
  opacity: 0;
  animation: hero-heading-in .85s cubic-bezier(.22,.68,0,1.2) .65s forwards;
}
#heading-2 .h2-dark         { font-size: 80px;  color: #222222; }
#heading-2 .h2-teal-susumu  { font-size: 100px; color: #03798c; letter-spacing: -15px; display: inline-block; animation: hero-teal-glow 4s ease-in-out 1.5s infinite; }
#heading-2 .h2-teal-mo      { font-size: 100px; color: #03798c; letter-spacing: -35px; display: inline-block; animation: hero-teal-glow 4s ease-in-out 1.7s infinite; }
#heading-2 .h2-teal-u       { font-size: 100px; color: #03798c; letter-spacing: -15px; display: inline-block; animation: hero-teal-glow 4s ease-in-out 1.9s infinite; }
#heading-2 .h2-teal-period  { font-size: 80px;  color: #03798c; letter-spacing: 0;    display: inline-block; animation: hero-teal-glow 4s ease-in-out 2.1s infinite; }

/* ── ボディテキスト ── */
#body-text {
  position: absolute;
  left: 95px; top: 562px;
  width: 707px;
  font-size: 15px;
  line-height: 28px;
  color: #03798c;
  letter-spacing: .75px;
  font-weight: 700;
  z-index: 6;
  opacity: 0;
  animation: hero-heading-in .8s ease .95s forwards;
}
#body-text p + p { margin-top: 0; }

/* ── ボタン行ラッパー（デスクトップ: 座標基準を scene に合わせる透過コンテナ） ── */
.fv-btns-row {
  position: absolute;
  top: 0; left: 0;
  width: 1728px; height: 1100px;
  z-index: 20;
}

/* ── 採用情報ボタン ── */
#btn-saiyou {
  position: absolute;
  left: 97px; top: 780px;
  width: 350px; height: 60px;
  background: #ffffff;
  z-index: 6;
  text-decoration: none;
  display: block;
  cursor: pointer;
  transition: background .25s;
  opacity: 0;
  animation: hero-fade-in .7s ease 1.2s forwards;
}
#btn-saiyou:hover { background: #03798c; }
#btn-saiyou:hover #btn-saiyou-label { color: #ffffff; }
#btn-saiyou:hover #btn-saiyou-box { background: rgba(255,255,255,.18); }
#btn-saiyou:hover #btn-saiyou-box svg line,
#btn-saiyou:hover #btn-saiyou-box svg polyline { stroke: #ffffff; }
#btn-saiyou-label {
  position: absolute;
  left: 33px; top: 14px;
  font-size: 16px;
  color: #03798c;
  font-weight: 700;
  white-space: nowrap;
  transition: color .25s;
}
#btn-saiyou-box {
  position: absolute;
  left: 297px; top: 10px;
  width: 40px; height: 40px;
  background: #eeeeee;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .25s;
}
#btn-saiyou-box svg { width: 20px; height: 12px; }

/* ── 企業サイトボタン（採用情報ボタンと同デザイン・右隣に配置） ── */
#btn-corporate {
  position: absolute;
  left: 467px; top: 780px;
  width: 350px; height: 60px;
  background: #ffffff;
  z-index: 6;
  text-decoration: none;
  display: block;
  cursor: pointer;
  transition: background .25s;
  opacity: 0;
  animation: hero-fade-in .7s ease 1.2s forwards;
}
#btn-corporate:hover { background: #03798c; }
#btn-corporate:hover #btn-corporate-label { color: #ffffff; }
#btn-corporate:hover #btn-corporate-box { background: rgba(255,255,255,.18); }
#btn-corporate:hover #btn-corporate-box svg line,
#btn-corporate:hover #btn-corporate-box svg polyline { stroke: #ffffff; }
#btn-corporate-label {
  position: absolute;
  left: 33px; top: 14px;
  font-size: 16px;
  color: #03798c;
  font-weight: 700;
  white-space: nowrap;
  transition: color .25s;
}
#btn-corporate-box {
  position: absolute;
  left: 297px; top: 10px;
  width: 40px; height: 40px;
  background: #eeeeee;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .25s;
}
#btn-corporate-box svg { width: 20px; height: 12px; }

/* ── ENTRY ボタングループ（プカプカアニメーション） ── */
@keyframes entry-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-14px); }
}

#entry-btn-group {
  position: absolute;
  left: 1430px; top: 715px;
  width: 234px; height: 300px; /* ring(234) + arrow余白 */
  z-index: 12;
  animation: entry-float 3.2s ease-in-out infinite;
}

/* ── ENTRY 外リング（グループ相対座標） ── */
#entry-ring {
  position: absolute;
  left: 0; top: 0;
  width: 234px; height: 234px;
  border-radius: 50%;
  border: 1px solid rgba(20,20,20,.25);
}

/* ── ENTRY クリック用透明オーバーレイ ── */
#entry-btn-overlay {
  position: absolute;
  left: 0; top: 0;
  width: 234px; height: 234px;
  border-radius: 50%;
  z-index: 5;
}
#entry-btn-overlay:hover { background: rgba(255,255,255,.10); }
#entry-btn-overlay:hover ~ #entry-circle { filter: brightness(1.18); }

/* ── ENTRY 塗り円 ── */
#entry-circle {
  position: absolute;
  left: 8px; top: 7px;
  width: 219px; height: 219px;
  border-radius: 50%;
  background: linear-gradient(135deg, #03798c 0%, #025968 100%);
  transition: filter .25s;
}

/* ── ENTRY ラベル ── */
#entry-label {
  position: absolute;
  left: 67px; top: 80px;
  width: 103px; height: 35px;
  font-family: 'Aboreto', sans-serif;
  font-size: 30px;
  color: #ffffff;
  letter-spacing: 1.5px;
  text-align: center;
  white-space: nowrap;
  line-height: 35px;
  pointer-events: none;
}
#entry-sub {
  position: absolute;
  left: 62px; top: 111px;
  width: 112px; height: 32px;
  font-size: 16px;
  color: #ffffff;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  line-height: 32px;
  pointer-events: none;
}
#entry-arrow {
  position: absolute;
  left: 99px; top: 148px;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
#entry-arrow svg { width: 40px; height: 10px; }


/* ══════════════════════════════════════════
   NUMBERS — 数字帯
══════════════════════════════════════════ */

#numbers { background: var(--black); padding: 72px 64px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; border-top: 1px solid #333; position: relative; overflow: hidden; }
#numbers::before { content: 'PRESTIGE'; font-family: 'Bebas Neue', sans-serif; font-size: clamp(60px, 10vw, 120px); font-weight: 400; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.04); position: absolute; right: 40px; bottom: -20px; letter-spacing: .1em; pointer-events: none; white-space: nowrap; }
.num-item { padding: 32px; border-right: 1px solid #333; display: flex; flex-direction: column; gap: 6px; }
.num-item:last-child { border-right: none; }
.num-val { font-family: 'Bebas Neue', sans-serif; font-size: 52px; font-weight: 400; color: var(--white); line-height: 1; letter-spacing: .02em; }
.num-val span { font-size: 22px; }
.num-unit { font-size: 10px; letter-spacing: .16em; color: var(--accent); margin-top: 2px; }
.num-label { font-size: 12px; font-weight: 300; color: var(--mg); letter-spacing: .06em; }


/* ══════════════════════════════════════════
   MESSAGE — 代表メッセージ
══════════════════════════════════════════ */

/* ── レイアウト ── */
#message { max-width: 1200px; margin: 0 auto; padding: 0 80px; display: grid; grid-template-columns: 1fr; min-height: 580px; border-top: 1px solid var(--lg); border-bottom: 1px solid var(--lg); }

/* ── 写真カラム（現在は非表示。写真を入れ込む際は display を戻して #message の grid-template-columns を元の 38% 62% に戻す） ── */
.msg-photo { display: none; position: relative; overflow: hidden; background: #c8cdd8; }
.msg-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.msg-photo-ph { width: 100%; height: 100%; display: flex; align-items: flex-end; justify-content: center; background: linear-gradient(175deg, #d4d8e2 0%, #b0b5c0 100%); }
.msg-photo-ph svg { opacity: .15; }
.msg-label-tag { position: absolute; top: 24px; left: 24px; display: flex; align-items: center; gap: 6px; }
.msg-label-tag-en { font-size: 10px; font-weight: 700; letter-spacing: .22em; color: var(--accent); text-transform: uppercase; }
.msg-label-tag-jp { font-size: 10px; font-weight: 300; letter-spacing: .12em; color: var(--dg); }

/* ── テキストカラム ── */
.msg-body-wrap { display: flex; flex-direction: column; justify-content: center; padding: 64px 72px 64px 60px; background: var(--white); position: relative; }
.msg-body-wrap::before { content: ''; position: absolute; bottom: -60px; right: -60px; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, rgba(122,158,142,.06) 0%, transparent 70%); pointer-events: none; }
.msg-body-wrap::after { content: 'MESSAGE'; font-family: 'Bebas Neue', sans-serif; font-size: clamp(40px, 5vw, 72px); font-weight: 400; color: transparent; -webkit-text-stroke: 1px rgba(0,0,0,.05); position: absolute; bottom: 24px; right: 32px; letter-spacing: .1em; line-height: 1; pointer-events: none; }
.msg-eyebrow-row { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.msg-eyebrow-line { width: 28px; height: 1px; background: var(--mg); }
.msg-eyebrow-label { font-size: 10px; letter-spacing: .22em; color: var(--mg); text-transform: uppercase; }
.msg-title-en { font-family: 'Bebas Neue', sans-serif; font-size: clamp(48px, 6vw, 80px); font-weight: 400; letter-spacing: .04em; color: var(--lg); line-height: 1; margin-bottom: -4px; }
.msg-catch { font-family: 'Noto Sans JP', sans-serif; font-size: clamp(22px, 2.4vw, 32px); font-weight: 400; line-height: 1.55; letter-spacing: .04em; margin-bottom: 32px; color: var(--black); }
.msg-catch em { font-style: normal; color: var(--accent); }
.msg-text { font-size: 13px; font-weight: 300; color: var(--dg); line-height: 2.3; margin-bottom: 36px; }
.msg-text p + p { margin-top: 16px; }

/* ── 署名 ── */
.msg-sig { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; padding-top: 28px; border-top: 1px solid var(--lg); }
.msg-sig-row { display: flex; align-items: baseline; gap: 12px; }
.msg-sig-img { display: block; max-width: 240px; height: auto; }
.msg-sig-company { font-size: 11px; color: var(--mg); letter-spacing: .08em; }
.msg-sig-role { font-size: 11px; letter-spacing: .1em; color: var(--dg); }
.msg-sig-name { font-family: 'Noto Sans JP', sans-serif; font-size: 20px; font-weight: 500; letter-spacing: .08em; color: var(--black); }


/* ══════════════════════════════════════════
   JOB CATEGORIES — 職種カテゴリ
══════════════════════════════════════════ */

/* ── 職種グリッド ── */
#ourjob .jobs-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--lg); border: 1px solid var(--lg); }
.job-card { background: var(--white); padding: 48px 36px; display: flex; flex-direction: column; gap: 16px; transition: background .25s; cursor: pointer; position: relative; overflow: hidden; }
.job-card::after { content: ''; position: absolute; bottom: 0; left: 0; right: 100%; height: 2px; background: var(--accent); transition: right .35s; }
.job-card:hover { background: var(--off); }
.job-card:hover::after { right: 0; }
.job-card-num { font-family: 'Bebas Neue', sans-serif; font-size: 40px; font-weight: 400; color: var(--lg); line-height: 1; margin-bottom: 4px; }
.job-card-title { font-size: 15px; font-weight: 500; letter-spacing: .06em; }
.job-card-desc { font-size: 13px; font-weight: 300; color: var(--dg); line-height: 2; }
.job-card-more { margin-top: auto; font-size: 11px; letter-spacing: .12em; color: var(--accent); display: flex; align-items: center; gap: 6px; }

/* ── 仕事内容 3カラムカード ── */
.ourjob-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--lg); border: 1px solid var(--lg); }
.ourjob-card { background: var(--white); display: flex; flex-direction: column; text-decoration: none; color: inherit; position: relative; overflow: hidden; transition: background .25s; }
.ourjob-card-img { width: 100%; aspect-ratio: 16/9; overflow: hidden; position: relative; background: var(--lg); flex-shrink: 0; }
.ourjob-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.ourjob-card:hover .ourjob-card-img img { transform: scale(1.05); }
.ourjob-card-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0) 50%, rgba(0,0,0,.18) 100%); pointer-events: none; }
.ourjob-card:nth-child(1) .ourjob-card-img { background: linear-gradient(135deg, #2a3a4a 0%, #3d5a6e 100%); }
.ourjob-card:nth-child(2) .ourjob-card-img { background: linear-gradient(135deg, #2a3f38 0%, #3d6358 100%); }
.ourjob-card:nth-child(3) .ourjob-card-img { background: linear-gradient(135deg, #3a3020 0%, #6e5a3a 100%); }
.ourjob-card-body { padding: 32px 36px 36px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.ourjob-card::after { content: ''; position: absolute; bottom: 0; left: 0; right: 100%; height: 2px; background: var(--accent); transition: right .35s; }
.ourjob-card:hover { background: var(--off); }
.ourjob-card:hover::after { right: 0; }
.ourjob-card-num { font-size: 36px; font-weight: 300; color: var(--lg); line-height: 1; }
.ourjob-card-icon { width: 48px; height: 48px; border: 1px solid var(--lg); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--accent); }
.ourjob-card-title { font-size: 16px; font-weight: 500; letter-spacing: .04em; }
.ourjob-card-desc { font-size: 13px; font-weight: 300; color: var(--dg); line-height: 2.1; flex: 1; }
.ourjob-card-more { font-size: 11px; letter-spacing: .1em; color: var(--accent); display: flex; align-items: center; gap: 6px; margin-top: auto; }


/* ══════════════════════════════════════════
   MEMBER VOICES — 社員の声
══════════════════════════════════════════ */

#member .members-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 360px)); gap: 28px; justify-content: center; }
.member-card { display: flex; flex-direction: column; gap: 14px; cursor: pointer; color: inherit; text-decoration: none; }
.member-img { aspect-ratio: 4/3; max-height: 220px; background: var(--lg); overflow: hidden; position: relative; display: flex; align-items: center; justify-content: center; }
.member-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.member-img:hover img { transform: scale(1.04); }
.member-img svg { opacity: .3; }
.member-tag { position: absolute; bottom: 16px; left: 16px; background: rgba(255,255,255,.9); font-size: 10px; letter-spacing: .1em; padding: 4px 12px; color: var(--dg); }
.member-dept { font-size: 10px; letter-spacing: .12em; color: var(--accent); }
.member-name { font-size: 15px; font-weight: 500; letter-spacing: .06em; }
.member-year { font-size: 11px; color: var(--mg); letter-spacing: .06em; }
.member-excerpt { font-size: 13px; font-weight: 300; color: var(--dg); line-height: 2; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }


/* ══════════════════════════════════════════
   COMPANY OVERVIEW — 会社概要
══════════════════════════════════════════ */

.company-body { display: flex; flex-direction: column; gap: 28px; }
.company-lead { font-family: 'Noto Sans JP', sans-serif; font-size: 18px; font-weight: 300; line-height: 1.9; letter-spacing: .04em; }
.company-text { font-size: 14px; font-weight: 300; color: var(--dg); line-height: 2.4; }
.company-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--lg); border: 1px solid var(--lg); }
.stat-item { background: var(--white); padding: 28px 24px; display: flex; flex-direction: column; gap: 4px; }
.stat-num { font-family: 'Bebas Neue', sans-serif; font-size: 38px; font-weight: 400; color: var(--black); line-height: 1; }
.stat-num span { font-size: 16px; }
.stat-label { font-size: 11px; color: var(--dg); letter-spacing: .08em; }
.company-img { aspect-ratio: 1; background: var(--lg); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.company-img svg { opacity: .3; }


/* ══════════════════════════════════════════
   FEATURE BAND — 特徴セクション
══════════════════════════════════════════ */

#feature { background: var(--black); padding: 100px 0; position: relative; overflow: hidden; }
#feature::after { content: ''; position: absolute; top: -200px; right: -200px; width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(circle, rgba(122,158,142,.06) 0%, transparent 65%); pointer-events: none; }
#feature .section-inner { max-width: 1200px; margin: 0 auto; padding: 0 80px; }
#feature .section-title { color: var(--white); }
#feature .section-title-en { color: #2a2a28; }
#feature .section-label { color: #555; }
#feature .section-label::before { background: #555; }
.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: #2a2a28; border: 1px solid #2a2a28; margin-top: 56px; }
.feature-item { background: var(--black); padding: 48px 32px; display: flex; flex-direction: column; gap: 16px; transition: background .25s; }
.feature-item:hover { background: #1f1f1d; }
.feature-icon { width: 40px; height: 40px; border: 1px solid #333; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.feature-num { font-family: 'Bebas Neue', sans-serif; font-size: 13px; font-weight: 400; color: var(--accent); letter-spacing: .16em; }
.feature-title { font-size: 14px; font-weight: 500; color: var(--white); letter-spacing: .06em; }
.feature-desc { font-size: 13px; font-weight: 300; color: #888; line-height: 2; }


/* ══════════════════════════════════════════
   CAREER PATH — キャリアパス
══════════════════════════════════════════ */

#career .career-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.career-card { border: 1px solid var(--lg); padding: 40px 32px; display: flex; flex-direction: column; gap: 14px; transition: border-color .25s; color: inherit; text-decoration: none; }
.career-card:hover { border-color: var(--accent); }
.career-phase { font-size: 10px; letter-spacing: .2em; color: var(--accent); text-transform: uppercase; display: flex; align-items: center; gap: 8px; }
.career-phase::before { content: ''; display: block; width: 16px; height: 1px; background: var(--accent); }
.career-year { font-family: 'Bebas Neue', sans-serif; font-size: 32px; font-weight: 400; color: var(--lg); line-height: 1; }
.career-title { font-size: 15px; font-weight: 500; letter-spacing: .04em; }
.career-desc { font-size: 13px; font-weight: 300; color: var(--dg); line-height: 2; }


/* ══════════════════════════════════════════
   RECRUIT POSITIONS — common.css に移動済み
══════════════════════════════════════════ */


/* ══════════════════════════════════════════
   OSAKA BANNER — 大阪出店バナー
══════════════════════════════════════════ */

#osaka-banner { background: var(--black); display: grid; grid-template-columns: 1fr 1fr; min-height: 560px; border-top: 2px solid rgba(196,160,80,.65); border-bottom: 2px solid rgba(196,160,80,.65); box-shadow: 0 0 60px rgba(196,160,80,.1) inset; }
.osaka-img { background: #2a2a28; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; }
.osaka-img svg { opacity: .2; }
.osaka-img::after { content: '2026'; font-family: 'Bebas Neue', sans-serif; font-size: 120px; font-weight: 400; color: rgba(255,255,255,.04); position: absolute; bottom: 10px; right: 10px; letter-spacing: .04em; line-height: 1; }
.osaka-img-label { position: absolute; bottom: 20px; left: 20px; font-size: 10px; letter-spacing: .14em; color: rgba(255,255,255,.85); text-shadow: 0 1px 4px rgba(0,0,0,.5); }
.osaka-body { padding: 72px 80px; display: flex; flex-direction: column; justify-content: center; gap: 28px; background: linear-gradient(135deg, rgba(196,160,80,.1) 0%, rgba(196,160,80,.03) 50%, transparent 100%); position: relative; }
.osaka-body::before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: linear-gradient(180deg, transparent 0%, var(--gold) 30%, var(--gold) 70%, transparent 100%); }
.osaka-eyebrow { font-size: 12px; letter-spacing: .3em; color: var(--gold); display: flex; align-items: center; gap: 14px; text-shadow: 0 0 20px rgba(196,160,80,.4); }
.osaka-eyebrow::before { content: ''; width: 40px; height: 1px; background: var(--gold); box-shadow: 0 0 8px rgba(196,160,80,.6); }
.osaka-title { font-family: 'Noto Sans JP', sans-serif; font-size: clamp(34px, 3.6vw, 54px); font-weight: 300; color: var(--white); line-height: 1.55; letter-spacing: .06em; text-shadow: 0 2px 30px rgba(196,160,80,.15); }
.osaka-desc { font-size: 14px; color: #ccc; line-height: 2.1; font-weight: 300; }
.btn-gold { display: inline-flex; align-items: center; gap: 14px; font-size: 12px; letter-spacing: .18em; padding: 18px 40px; border: 1px solid var(--gold); color: var(--gold); align-self: flex-start; transition: background .3s, color .3s, box-shadow .3s; box-shadow: 0 0 20px rgba(196,160,80,.2); }
.btn-gold:hover { background: var(--gold); color: var(--white); box-shadow: 0 0 30px rgba(196,160,80,.5); }


/* ══════════════════════════════════════════
   CTA — エントリー誘導
══════════════════════════════════════════ */

#cta { text-align: center; padding: 120px 64px; background: linear-gradient(to bottom, rgba(245,244,240,.75) 0%, rgba(234,230,224,.82) 100%), url('../images/bg01.jpeg') center center / cover no-repeat !important; position: relative; overflow: hidden; }
#cta::before { content: ''; position: absolute; top: -120px; left: 50%; transform: translateX(-50%); width: 900px; height: 900px; border-radius: 50%; background: radial-gradient(circle, rgba(122,158,142,.12) 0%, rgba(184,149,90,.06) 40%, transparent 70%); pointer-events: none; }
.cta-en { font-family: 'Bebas Neue', sans-serif; font-size: clamp(60px, 7vw, 100px); font-weight: 400; letter-spacing: .08em; color: rgba(22,22,20,.20); -webkit-text-stroke: 1px rgba(22,22,20,.25); line-height: 1; margin-bottom: -12px; }
.cta-title { font-family: 'Noto Sans JP', sans-serif; font-size: clamp(22px, 2.4vw, 32px); font-weight: 300; margin-bottom: 16px; letter-spacing: .06em; }
.cta-desc { font-size: 14px; color: var(--dg); line-height: 2; max-width: 520px; margin: 0 auto 40px; }
.cta-actions { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }


/* ══════════════════════════════════════════
   OSAKA TOP BAND — 大阪告知バー
══════════════════════════════════════════ */

#osaka-top-band { background: linear-gradient(90deg, #b8962a 0%, var(--gold) 40%, #e8c84a 60%, var(--gold) 100%); display: flex; align-items: stretch; justify-content: space-between; height: 120px; gap: 20px; box-shadow: 0 4px 24px rgba(196,160,80,.5); overflow: hidden; position: relative; z-index: 10; }
.osaka-band-main { padding: 0 64px; display: flex; align-items: center; justify-content: space-between; flex: 1; gap: 20px; }
.osaka-band-image { width: 280px; flex-shrink: 0; overflow: hidden; position: relative; }
.osaka-band-image img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .85; }
.osaka-band-credit { position: absolute; bottom: 6px; right: 8px; font-size: 9px; color: rgba(255,255,255,.7); letter-spacing: .03em; margin: 0; pointer-events: none; text-shadow: 0 1px 3px rgba(0,0,0,.4); }
.osaka-band-left { display: flex; align-items: center; gap: 20px; }
.osaka-band-badge { font-size: 11px; font-weight: 700; letter-spacing: .22em; padding: 6px 16px; border: 1.5px solid rgba(255,255,255,.9); color: var(--white); background: rgba(255,255,255,.15); }
.osaka-band-text { font-size: 15px; font-weight: 500; letter-spacing: .08em; color: var(--white); text-shadow: 0 1px 4px rgba(0,0,0,.2); }
.osaka-band-text span { opacity: .85; font-size: 12px; margin-left: 14px; font-weight: 400; }
.osaka-band-btn { font-size: 12px; font-weight: 500; letter-spacing: .16em; padding: 12px 28px; border: 1.5px solid var(--white); color: var(--white); background: rgba(255,255,255,.15); display: flex; align-items: center; gap: 10px; transition: background .25s, color .25s; flex-shrink: 0; }
.osaka-band-btn:hover { background: var(--white); color: var(--gold); }


/* ══════════════════════════════════════════
   HERO RESPONSIVE — タブレット・スマホ
══════════════════════════════════════════ */

/* ── タブレット (769px〜1024px): スケール継続、高さ補正のみ ── */
@media (min-width: 769px) and (max-width: 1024px) {
  #hero .scene-wrapper { min-height: 500px; }
}

/* ── スマホ (〜768px): Figma 402×723 準拠 ── */
@media (max-width: 768px) {

  /* nav 分だけ下げて写真とnavが被らないようにする */
  #hero { padding-top: 68px; }

  /* wrapper: nav を除いた残り高さで 402:723 のアスペクト比を維持 */
  #hero .scene-wrapper { padding-top: calc(590 / 402 * 100%); }

  /* scene: wrapper を 100% 埋める。JS の scale() を無効化 */
  #hero .scene {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    transform: none !important;
    display: block;
    padding: 0;
    overflow: hidden;
  }

  /* ──────────────────────────────────────
     ティール装飾円 (Figma: x=133, y=-43, 340×340)
     left=133/402=33.08%  top=-43/723=-5.95%  width=340/402=84.58%
  ────────────────────────────────────── */
  #ellipse2 {
    position: absolute;
    left: 33.08%; top: -5.95%;
    width: 84.58%; height: auto;
    aspect-ratio: 1;
    filter: none;
    background: radial-gradient(circle at 42% 38%,
      #54ccd9 0%, #1d96a6 35%, #0e7080 65%, #095965 100%);
    animation: ellipse-breathe 9s ease-in-out infinite;
  }

  /* ダーク装飾円・人物背景円: 非表示 */
  #ellipse3       { display: none; }
  #ellipse-dark-bg { display: none; }

  /* ──────────────────────────────────────
     写真エリア (Figma: top=0, height=385/723=53.25%)
     下部グラデーションフェードは ::after で再現
  ────────────────────────────────────── */
  #people-wrap {
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: 53.25%;
    clip-path: none;
    opacity: 1;
    z-index: 2;
    overflow: hidden;
    animation: hero-fade-in 1.4s ease .1s forwards;
  }
  /* 写真エリア下部フェード */
  #people-wrap::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 30%;
    background: linear-gradient(to bottom, transparent 0%, #f2f2f2 100%);
    z-index: 10;
    pointer-events: none;
  }

  /* 女性: right 寄り・奥 (left=37%, top=2%, w=68%, h=102%) */
  #person-woman {
    display: block;
    position: absolute;
    left: 37%; top: 2%;
    width: 68%; height: 102%;
    border-radius: 0;
    object-fit: cover;
    object-position: top center;
    z-index: 3;
  }

  /* 男性: left 寄り・手前 (left=9%, top=0, w=56%, h=100%) */
  #person-man {
    position: absolute;
    left: 9%; top: 0;
    width: 56%; height: 100%;
    border-radius: 0;
    object-fit: cover;
    object-position: top center;
    z-index: 4;
  }

  /* ──────────────────────────────────────
     縦書きテキスト (Figma: x=19, y=0, 45×385)
     left=19/402=4.73%  width=45/402=11.19%  height=53.25%
  ────────────────────────────────────── */
  #frost-panel { display: none; }
  #vertical-text {
    display: block;
    position: absolute;
    left: 4.73%; top: 8%;
    width: 11.19%; height: 53.25%;
    font-size: clamp(13px, 3.8vw, 17px);
    font-weight: 400;
    letter-spacing: 0.55em;
    line-height: 1.3;
    color: #03798c;
    background: rgba(242, 242, 242, 0.72);
    padding: 6px 4px;
    border-radius: 4px;
    writing-mode: vertical-rl;
    text-orientation: upright;
    white-space: nowrap;
    overflow: hidden;
    z-index: 20;
    opacity: 0;
    animation: hero-slide-in-right 1s ease .5s forwards;
  }

  /* ──────────────────────────────────────
     見出し① (Figma: x=27, y=412, 359×113)
     left=27/402=6.72%  top=412/723=56.98%
  ────────────────────────────────────── */
  #heading-1 {
    position: absolute;
    left: 0; top: 49%;
    width: 100%;
    text-align: center;
    white-space: nowrap;
    line-height: 1.15;
    font-weight: 700;
    z-index: 6;
    opacity: 0;
    animation: hero-heading-in .85s cubic-bezier(.22,.68,0,1.2) .35s forwards;
  }
  #heading-1 .h1-ji   { font-size: clamp(44px, 13.5vw, 56px); display: inline; }
  #heading-1 .h1-rest { font-size: clamp(27px, 8.2vw, 34px);  display: inline; }

  /* ──────────────────────────────────────
     見出し② (見出し①直下)
  ────────────────────────────────────── */
  #heading-2 {
    position: absolute;
    left: 0; top: 57%;
    width: 100%;
    text-align: center;
    white-space: nowrap;
    line-height: 1.15;
    font-weight: 700;
    z-index: 6;
    opacity: 0;
    animation: hero-heading-in .85s cubic-bezier(.22,.68,0,1.2) .6s forwards;
  }
  #heading-2 .h2-dark        { font-size: clamp(25px, 7.5vw, 32px); }
  #heading-2 .h2-teal-susumu { font-size: clamp(31px, 9.7vw, 40px); letter-spacing: -2px; display: inline-block; animation: hero-teal-glow 4s ease-in-out 1.5s infinite; }
  #heading-2 .h2-teal-mo     { font-size: clamp(31px, 9.7vw, 40px); letter-spacing: -8px;  display: inline-block; animation: hero-teal-glow 4s ease-in-out 1.7s infinite; }
  #heading-2 .h2-teal-u      { font-size: clamp(31px, 9.7vw, 40px); letter-spacing: -2px; display: inline-block; animation: hero-teal-glow 4s ease-in-out 1.9s infinite; }
  #heading-2 .h2-teal-period { font-size: clamp(25px, 7.5vw, 32px); letter-spacing: 0;    display: inline-block; animation: hero-teal-glow 4s ease-in-out 2.1s infinite; }

  /* ボディテキスト: 非表示 */
  #body-text { display: none; }

  /* ──────────────────────────────────────
     ボタン行ラッパー: scene を覆う透過層
  ────────────────────────────────────── */
  .fv-btns-row {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
  }

  /* ──────────────────────────────────────
     採用情報ボタン (Figma: x=24, y=585, 173×60)
     left=5.97%  top=585/723=80.91%  w=43.03%  h=60/723=8.3%
  ────────────────────────────────────── */
  #saiyou-circle {
    display: block;
    position: absolute;
    width: 76vw;
    height: 76vw;
    border-radius: 50%;
    background-color: #111;
    background-image: radial-gradient(circle, rgba(255,255,255,.13) 1px, transparent 1px);
    background-size: 10px 10px;
    left: -10vw;
    top: 68%;
    z-index: 5;
  }
  #btn-saiyou {
    position: absolute;
    left: 5.97%; top: 76%;
    width: 43.03%; height: 8.3%;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4%;
    margin-top: 0;
    pointer-events: auto;
    opacity: 0;
    animation: hero-fade-in .7s ease 1.05s forwards;
  }
  #btn-saiyou-label {
    position: static;
    transform: none;
    font-size: clamp(11px, 3vw, 14px);
    color: #03798c;
    font-weight: 700;
    letter-spacing: .04em;
    white-space: nowrap;
  }
  #btn-saiyou-box {
    position: static;
    transform: none;
    width: clamp(24px, 6.5vw, 32px);
    height: clamp(24px, 6.5vw, 32px);
    flex-shrink: 0;
    background: #eeeeee;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #btn-saiyou-box svg { width: 60%; height: auto; }

  /* ──────────────────────────────────────
     企業サイトボタン（採用情報の下にスタック）
  ────────────────────────────────────── */
  #btn-corporate {
    position: absolute;
    left: 5.97%; top: 86%;
    width: 43.03%; height: 8.3%;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4%;
    margin-top: 0;
    pointer-events: auto;
    opacity: 0;
    animation: hero-fade-in .7s ease 1.05s forwards;
  }
  #btn-corporate-label {
    position: static;
    transform: none;
    font-size: clamp(11px, 3vw, 14px);
    color: #03798c;
    font-weight: 700;
    letter-spacing: .04em;
    white-space: nowrap;
  }
  #btn-corporate-box {
    position: static;
    transform: none;
    width: clamp(24px, 6.5vw, 32px);
    height: clamp(24px, 6.5vw, 32px);
    flex-shrink: 0;
    background: #eeeeee;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #btn-corporate-box svg { width: 60%; height: auto; }

  /* ──────────────────────────────────────
     ENTRY ボタン (Figma: x=227, y=538, 152×152)
     left=56.47%  top=74.41%  width=37.81%
  ────────────────────────────────────── */
  #entry-btn-group {
    position: absolute;
    left: 56.47%; top: 69%;
    width: 37.81%; height: auto;
    aspect-ratio: 1;
    margin-top: 0;
    pointer-events: auto;
    animation: entry-float 3.2s ease-in-out infinite;
  }
  #entry-ring {
    position: absolute; left: 0; top: 0;
    width: 100%; height: 100%;
  }
  #entry-btn-overlay {
    position: absolute; left: 0; top: 0;
    width: 100%; height: 100%;
    z-index: 5;
  }
  #entry-circle {
    position: absolute;
    left: 3.3%; top: 3.3%;
    width: 93.4%; height: 93.4%;
  }
  #entry-label {
    position: absolute;
    left: 50%; top: 26%;
    transform: translateX(-50%);
    width: max-content; height: auto;
    font-size: clamp(14px, 4.2vw, 19px);
    line-height: 1.2;
    white-space: nowrap;
  }
  #entry-sub {
    position: absolute;
    left: 50%; top: 52%;
    transform: translateX(-50%);
    width: max-content; height: auto;
    font-size: clamp(7.5px, 2.1vw, 10px);
    line-height: 1.5;
    white-space: nowrap;
  }
  #entry-arrow {
    position: absolute;
    left: 50%; top: 70%;
    transform: translateX(-50%);
    width: auto;
  }
  #entry-arrow svg { width: clamp(22px, 6vw, 28px); height: auto; }
}

/* ── 極小スマホ (〜360px): clamp の min 値を下回る場合のみ補正 ── */
@media (max-width: 360px) {
  #heading-1 .h1-ji   { font-size: 10.8vw; }
  #heading-1 .h1-rest { font-size: 6.5vw; }
  #heading-2 .h2-dark        { font-size: 6.5vw; }
  #heading-2 .h2-teal-susumu,
  #heading-2 .h2-teal-mo,
  #heading-2 .h2-teal-u      { font-size: 8.4vw; }
  #heading-2 .h2-teal-period { font-size: 6.5vw; }
  #vertical-text              { font-size: 2.2vw; }
}


/* ══ レスポンシブ: 1024px以下 ══ */
@media (max-width: 1024px) {
  #numbers { grid-template-columns: repeat(3, 1fr); padding: 56px 48px; }
  #message { padding: 0 48px; }
  .msg-body-wrap { padding: 56px 48px; }
  #ourjob .jobs-grid { grid-template-columns: 1fr 1fr; }
  .ourjob-cards { grid-template-columns: 1fr 1fr; }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  #member .members-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
  #career .career-grid { grid-template-columns: 1fr 1fr; }
  #osaka-banner { grid-template-columns: 1fr; }
  .osaka-img { height: 240px; }
  .osaka-body { padding: 48px 48px; }
}

/* ══ レスポンシブ: 768px以下 ══ */
@media (max-width: 768px) {
  #message { padding: 0 20px; }
  .msg-photo { min-height: 56vw; }
  .msg-body-wrap { padding: 40px 20px 48px; }
  .msg-catch { font-size: clamp(22px, 5.5vw, 30px); margin-bottom: 20px; }
  .msg-text { font-size: 13px; line-height: 2.1; margin-bottom: 24px; }
  .msg-sig { justify-content: flex-start; }
  .msg-sig-name { font-size: 17px; }
  #numbers { padding: 32px 16px; gap: 0; grid-template-columns: repeat(3,1fr); }
  .num-item { padding: 18px 10px; border-right: 1px solid #333; }
  .num-item:nth-child(2) { border-right: 1px solid #333; }
  .num-item:nth-child(3) { border-top: none; grid-column: auto; }
  .num-val { font-size: 34px; white-space: nowrap; }
  .num-val span { font-size: 16px; }
  .num-label { font-size: 11px; }
  #ourjob .jobs-grid { grid-template-columns: 1fr; }
  .job-card { padding: 32px 20px; }
  .job-card-num { font-size: 32px; }
  .ourjob-cards { grid-template-columns: 1fr; }
  .ourjob-card-body { padding: 24px 20px 28px; }
  #member .members-grid { grid-template-columns: 1fr; }
  .member-img { max-height: none; }
  .member-excerpt { -webkit-line-clamp: 2; }
  .company-lead { font-size: 16px; }
  .company-text { font-size: 13px; }
  #career .career-grid { grid-template-columns: 1fr; gap: 10px; }
  .career-card { padding: 24px 20px; gap: 8px; }
  .career-year { font-size: 26px; }
  .feature-grid { grid-template-columns: 1fr 1fr; }
  .feature-item { padding: 32px 20px; }
  #osaka-banner { grid-template-columns: 1fr; }
  .osaka-img { height: 240px; }
  .osaka-body { padding: 40px 24px; gap: 20px; }
  .osaka-title { font-size: clamp(26px, 6.5vw, 34px); }
  .osaka-desc { font-size: 13px; }
  #cta { padding: 64px 20px; }
  .cta-en { font-size: clamp(44px, 11vw, 64px); }
  .cta-title { font-size: clamp(19px, 4.5vw, 24px); }
  .cta-desc { font-size: 13px; margin-bottom: 28px; }
  .cta-actions { flex-direction: column; align-items: center; gap: 10px; }
  .cta-actions a { width: 100%; max-width: 300px; justify-content: center; }
  #osaka-top-band { height: auto; }
  .osaka-band-main { padding: 12px 20px; flex-direction: column; align-items: flex-start; gap: 12px; }
  .osaka-band-image { display: none; }
  .osaka-band-left { flex-direction: column; align-items: flex-start; gap: 4px; }
  .osaka-band-text { font-size: 12px; line-height: 1.5; }
  .osaka-band-text span { display: none; }
  footer { padding: 40px 20px 28px; }
}

/* ══ レスポンシブ: 480px以下 ══ */
@media (max-width: 480px) {
  .hero-right { height: 52vh; min-height: 240px; }
  .hero-left { padding: 24px 16px 36px; }
  .hero-catch { font-size: clamp(24px, 7vw, 32px); }
  .hero-eyebrow { margin-bottom: 14px; }
  #numbers { padding: 24px 12px; }
  .num-item { padding: 16px 8px; }
  .num-val { font-size: 26px; }
  .num-val span { font-size: 14px; }
  .num-unit { font-size: 9px; }
  #message { padding: 0 16px; }
  .msg-body-wrap { padding: 32px 16px 40px; }
  .msg-catch { font-size: clamp(20px, 5.5vw, 26px); }
  .job-card { padding: 28px 16px; }
  .ourjob-card-body { padding: 20px 16px 24px; }
  .feature-grid { grid-template-columns: 1fr; }
  .feature-item { padding: 28px 16px; }
  .career-card { padding: 24px 16px; }
  #cta { padding: 52px 16px; }
  .cta-actions a { max-width: 100%; }
  .btn-outline { font-size: 11px; padding: 12px 20px; }
  #osaka-top-band { padding: 8px 16px; }
}