/* =========================================================================
   Marvelous Makers — Design Tokens
   Colors, Typography, Spacing, Radii, Shadows, Motion
   ========================================================================= */

/* ---------- FONTS ---------- */
/* Primary Latin/Display: LINE Seed Sans (brand-provided). Rounded geometric sans
   that matches the logo's friendly-but-confident tone.
   Primary JP: Noto Sans JP. */
@font-face {
  font-family: 'LINE Seed Sans';
  src: url('fonts/LINESeedSans_W_Th.woff') format('woff'),
       url('fonts/LINESeedSans_Th.ttf') format('truetype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'LINE Seed Sans';
  src: url('fonts/LINESeedSans_W_Rg.woff') format('woff'),
       url('fonts/LINESeedSans_Rg.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'LINE Seed Sans';
  src: url('fonts/LINESeedSans_W_Bd.woff') format('woff'),
       url('fonts/LINESeedSans_Bd.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'LINE Seed Sans';
  src: url('fonts/LINESeedSans_W_XBd.woff') format('woff'),
       url('fonts/LINESeedSans_XBd.ttf') format('truetype');
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'LINE Seed Sans';
  src: url('fonts/LINESeedSans_W_He.woff') format('woff'),
       url('fonts/LINESeedSans_He.ttf') format('truetype');
  font-weight: 900; font-style: normal; font-display: swap;
}
/* LINE Seed JP — brand-provided Japanese companion face */
@font-face {
  font-family: 'LINE Seed JP';
  src: url('fonts/LINESeedJP_OTF_Th.otf') format('opentype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'LINE Seed JP';
  src: url('fonts/LINESeedJP_OTF_Rg.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'LINE Seed JP';
  src: url('fonts/LINESeedJP_OTF_Bd.otf') format('opentype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'LINE Seed JP';
  src: url('fonts/LINESeedJP_OTF_Eb.otf') format('opentype');
  font-weight: 800; font-style: normal; font-display: swap;
}
/* Material Symbols (outlined) — brand uses Material Icons */
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,300..600,0..1,-25..0&display=block');

/* Primary JP display: Noto Sans JP (matches marvmakers.co.jp live site). */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;600;700;800;900&display=swap');

:root {
  /* ===== COLOR — Neutrals (dominant) ===== */
  --mm-white:        #FFFFFF;
  --mm-offwhite:     #F7F7F5;  /* page alt bg */
  --mm-surface-2:    #EFEFEC;  /* subtle card / hover */
  --mm-border:       #E5E5E5;  /* hairline */
  --mm-border-strong:#D4D4D0;

  --mm-ink:          #111111;  /* primary text, primary btn */
  --mm-ink-2:        #2A2A2A;
  --mm-text-muted:   #6B6B6B;  /* secondary text */
  --mm-text-subtle:  #9A9A9A;  /* captions, meta */

  /* ===== COLOR — Brand gradient (accent system) =====
     Logo gradient goes magenta → red-orange → orange → yellow.
     Use sparingly — mostly behind monogram, on CTA hover halos, or on hero panels. */
  /* --- MM Brand palette --------------------------------------------------
     v2（2026-04 更新）: ブランドレッド `#D7263D` 一本化に伴い、グラデは
     同一色相の濃淡構成に変更。マゼンタ/コーラル/オレンジ/アンバー/イエローは
     過去資産の互換保持のため残すが、新規使用は非推奨。
     使用時は、ロゴのモノグラム裏・CTAホバー・ヒーローアクセントに限定。 */
  --mm-brand-magenta: #C2185B;   /* DEPRECATED — legacy only */
  --mm-brand-pink:    #E6447A;   /* DEPRECATED — legacy only */
  --mm-brand-red:     #D7263D;   /* ★ ブランドレッド（正） */
  --mm-brand-red-deep:#8B1626;   /* 影側（深赤） */
  --mm-brand-red-hot: #E84C5E;   /* 光側（明るめ赤） */
  --mm-brand-coral:   #F05A44;   /* DEPRECATED */
  --mm-brand-orange:  #F58232;   /* DEPRECATED */
  --mm-brand-amber:   #F9A825;   /* DEPRECATED */
  --mm-brand-yellow:  #F9C623;   /* DEPRECATED */

  --mm-gradient-brand:
    linear-gradient(105deg,
      #8B1626 0%,
      #B01E33 35%,
      #D7263D 65%,
      #E84C5E 100%);

  --mm-gradient-brand-soft:
    linear-gradient(105deg,
      #FBE4E7 0%, #F6C8CD 50%, #EFA8B0 100%);

  /* ===== COLOR — Ink accent (B2B trust anchor) ===== */
  --mm-ink-navy:     #1B2A4E;   /* reserved for deep-trust CTAs, data viz */

  /* ===== COLOR — Semantic ===== */
  --mm-success:      #1F9D55;
  --mm-warning:      #E6A700;
  --mm-danger:       #D14343;
  --mm-info:         #2563A8;

  /* ===== SEMANTIC ALIASES ===== */
  --fg-1:            var(--mm-ink);
  --fg-2:            var(--mm-text-muted);
  --fg-3:            var(--mm-text-subtle);
  --fg-on-dark:      var(--mm-white);

  --bg-1:            var(--mm-white);
  --bg-2:            var(--mm-offwhite);
  --bg-3:            var(--mm-surface-2);
  --bg-dark:         var(--mm-ink);

  --border-1:        var(--mm-border);
  --border-2:        var(--mm-border-strong);

  /* ===== TYPOGRAPHY =====
     Match the live marvmakers.co.jp stack:
     - JP body/display: Noto Sans JP
     - Latin display: Helvetica Neue / Arial fallback */
  --font-sans:       'Helvetica Neue', 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Meiryo', Helvetica, Arial, system-ui, sans-serif;
  --font-jp:         'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Meiryo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-display:    'Helvetica Neue', 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', Helvetica, Arial, sans-serif;
  --font-stack:      var(--font-jp);

  /* Type scale — heading system is "English mini-label + JP display"
     ------------------------------------------------------------
     スケールは 2 系統：
     - `--fs-*`        ：紙・ウェブ向け（従来）。A4 印刷でも読めるサイズ。
     - `--fs-screen-*` ：画面で見るプレゼン / 提案書（1920×1080）向け。最小 20px、
                        本文は 24px 基準、見出しは 44-104px を使い切る。
     原則：独自の `font-size: Npx` を書かない。必ず下記トークンか、
     `.mm-fs-*` ユーティリティクラス経由で指定する。 */
  --fs-eyebrow:      12px;  /* ABOUT US */
  --fs-caption:      13px;
  --fs-body-sm:      14px;
  --fs-body:         16px;
  --fs-body-lg:      18px;
  --fs-h5:           20px;
  --fs-h4:           24px;
  --fs-h3:           32px;
  --fs-h2:           44px;   /* section JP headings */
  --fs-h1:           64px;   /* hero */
  --fs-display:      104px;  /* "Make Marvelous!" hero */

  /* Screen-deck scale — 1920×1080 プレゼン／提案書で使う。
     紙用スケールとは別建て。`section.slide { font-size: var(--fs-screen-body); }`
     のようにコンテキストで切替える。 */
  --fs-screen-eyebrow: 14px;   /* スライドの小ラベル */
  --fs-screen-caption: 16px;
  --fs-screen-body:    20px;   /* スライド本文の下限 */
  --fs-screen-lede:    24px;   /* 強調本文・リード */
  --fs-screen-h5:      28px;
  --fs-screen-h4:      36px;
  --fs-screen-h3:      48px;
  --fs-screen-h2:      64px;
  --fs-screen-h1:      88px;
  --fs-screen-display: 128px;

  --lh-tight:        1.15;
  --lh-snug:         1.35;
  --lh-base:         1.8;    /* body — spec'd wide line-height */
  --lh-loose:        2.0;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;  /* body is slightly loose per spec */
  --tracking-label:  0.16em;  /* ABOUT US, SERVICE etc. */

  --fw-regular:      400;
  --fw-medium:       500;
  --fw-semi:         600;
  --fw-bold:         700;
  --fw-black:        800;

  /* ===== SPACING (4-px base) ===== */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;
  --sp-11: 160px;   /* section vertical rhythm */

  /* ===== RADII — low and restrained ===== */
  --r-xs:   2px;
  --r-sm:   4px;
  --r-md:   6px;
  --r-lg:   10px;
  --r-pill: 9999px;

  /* ===== SHADOWS — used sparingly; base aesthetic is flat ===== */
  --shadow-1: 0 1px 2px rgba(17,17,17,0.04);
  --shadow-2: 0 6px 24px rgba(17,17,17,0.06);
  --shadow-3: 0 12px 40px rgba(17,17,17,0.08);
  --shadow-brand: 0 12px 40px rgba(239,78,78,0.20);

  /* ===== MOTION ===== */
  --ease-standard: cubic-bezier(.2,.7,.2,1);
  --ease-in:       cubic-bezier(.6,0,.8,.2);
  --ease-out:      cubic-bezier(.2,.8,.2,1);
  --dur-fast:      140ms;
  --dur-med:       240ms;
  --dur-slow:      480ms;

  /* ===== LAYOUT ===== */
  --page-max:      1280px;
  --page-gutter:   clamp(24px, 5vw, 80px);
}

/* =========================================================================
   SEMANTIC ELEMENT DEFAULTS
   ========================================================================= */

html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0;
  font-family: var(--font-stack);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  letter-spacing: 0.02em;
  color: var(--fg-1);
  background: var(--bg-1);
  font-feature-settings: "palt" 1;   /* proportional JP metrics */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5 {
  margin: 0;
  color: var(--fg-1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--fw-bold);
  font-family: var(--font-jp), var(--font-sans);
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
h5 { font-size: var(--fs-h5); }

p  { margin: 0 0 1em; }

small, .mm-caption {
  font-size: var(--fs-caption);
  color: var(--fg-2);
}

/* Eyebrow — the English mini-label above JP section titles */
.mm-eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fg-2);
}

/* JP display heading paired with eyebrow */
.mm-section-title {
  font-family: var(--font-jp);
  font-size: var(--fs-h2);
  line-height: 1.4;
  letter-spacing: 0.02em;
  font-weight: var(--fw-bold);
  color: var(--fg-1);
  margin: 8px 0 0;
}

/* Hero display — used for Make Marvelous! */
.mm-display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: 0.98;
  letter-spacing: -0.03em;
  font-weight: var(--fw-black);
  font-style: italic;
}

.mm-gradient-text {
  background: var(--mm-gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Links */
a { color: inherit; text-decoration: none; transition: opacity var(--dur-fast) var(--ease-standard); }
a:hover { opacity: 0.7; }

/* Focus ring */
:focus-visible {
  outline: 2px solid var(--mm-ink);
  outline-offset: 3px;
}

/* Material Symbols helper */
.mm-icon {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 20px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  direction: ltr;
  font-feature-settings: 'liga';
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
  vertical-align: middle;
}

/* =========================================================================
   TYPE-SCALE UTILITIES — 独自 font-size を書かずに済ませるための受け皿
   ========================================================================= */

/* 紙・ウェブ用（従来スケール） */
.mm-fs-eyebrow  { font-size: var(--fs-eyebrow); }
.mm-fs-caption  { font-size: var(--fs-caption); }
.mm-fs-body-sm  { font-size: var(--fs-body-sm); }
.mm-fs-body     { font-size: var(--fs-body); }
.mm-fs-body-lg  { font-size: var(--fs-body-lg); }
.mm-fs-h5       { font-size: var(--fs-h5); }
.mm-fs-h4       { font-size: var(--fs-h4); }
.mm-fs-h3       { font-size: var(--fs-h3); }
.mm-fs-h2       { font-size: var(--fs-h2); }
.mm-fs-h1       { font-size: var(--fs-h1); }
.mm-fs-display  { font-size: var(--fs-display); }

/* 画面（1920×1080 プレゼン／提案書）用。最小 20px、見出しは大きく。
   スライド専用のルートに `.mm-deck` を付け、本文のデフォルトを
   スクリーンスケールにする。内部要素では `.mm-fs-screen-*` を使う。 */
.mm-deck                 { font-size: var(--fs-screen-body); line-height: 1.75; }
.mm-fs-screen-eyebrow    { font-size: var(--fs-screen-eyebrow); }
.mm-fs-screen-caption    { font-size: var(--fs-screen-caption); }
.mm-fs-screen-body       { font-size: var(--fs-screen-body); }
.mm-fs-screen-lede       { font-size: var(--fs-screen-lede); }
.mm-fs-screen-h5         { font-size: var(--fs-screen-h5); }
.mm-fs-screen-h4         { font-size: var(--fs-screen-h4); }
.mm-fs-screen-h3         { font-size: var(--fs-screen-h3); }
.mm-fs-screen-h2         { font-size: var(--fs-screen-h2); }
.mm-fs-screen-h1         { font-size: var(--fs-screen-h1); }
.mm-fs-screen-display    { font-size: var(--fs-screen-display); }

/* =========================================================================
   MOBILE NAV — hamburger menu for ≤768px
   ========================================================================= */

/* Hamburger button — hidden on desktop */
.mm-hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  z-index: 110;
  position: relative;
}
.mm-hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--mm-ink);
  transition: transform 0.3s var(--ease-standard), opacity 0.3s var(--ease-standard);
}
.mm-hamburger span + span { margin-top: 7px; }

/* X state */
.mm-hamburger.is-open span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.mm-hamburger.is-open span:nth-child(2) { opacity: 0; }
.mm-hamburger.is-open span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* Drawer overlay */
.mm-drawer {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s var(--ease-standard);
}
.mm-drawer.is-open {
  opacity: 1;
  pointer-events: auto;
}
.mm-drawer-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 0;
  cursor: pointer;
  text-decoration: none;
  color: var(--mm-ink);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s var(--ease-standard), transform 0.4s var(--ease-standard), color 0.3s var(--ease-standard);
}
.mm-drawer.is-open .mm-drawer-link {
  opacity: 1;
  transform: translateY(0);
}
.mm-drawer-link-en {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.14em;
}
.mm-drawer-link-jp {
  font-family: var(--font-jp);
  font-size: 10px;
  font-weight: 400;
  color: var(--mm-text-muted);
  margin-top: 2px;
}
.mm-drawer-link.is-active .mm-drawer-link-en {
  color: var(--mm-brand-red);
}
.mm-drawer-cta {
  margin-top: 24px;
  background: var(--mm-ink);
  color: #fff;
  border: none;
  padding: 12px 40px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  cursor: pointer;
  border-radius: 999px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s var(--ease-standard), transform 0.4s var(--ease-standard), background 0.3s var(--ease-standard);
}
.mm-drawer.is-open .mm-drawer-cta {
  opacity: 1;
  transform: translateY(0);
}
.mm-drawer-cta:hover {
  background: var(--mm-brand-red);
}

@media (max-width: 768px) {
  :root { --sp-section: 60px; }
  .mm-nav-desktop { display: none !important; }
  .mm-hamburger { display: flex; flex-direction: column; gap: 0; }
  .mm-header-inner { height: 64px !important; }
  .mm-header-logo img { height: 40px !important; }

  /* ページタイトル・セクション見出し統一 */
  .mm-rev h2 { font-size: 48px !important; }
  .mm-career-title { font-size: 48px !important; }
  .mm-cta-card { padding: 28px 20px 24px !important; }
  .mm-cta-card .mm-cta-mark svg { width: 80px !important; height: 80px !important; }
  .mm-cta-card h3 { font-size: 22px !important; }
}