/* ============================================================
   theme/ampl-noir.css — Editorial Photo / Glassmorphism テイスト
   フルブリード実写を主役にし、磨りガラスのカードで情報を整理する。
   極太ゴシック大見出し + 英字キャップス・ラベル。ほぼ無彩色。
   Reference: NOT A HOTEL SOFTWARE DECK（speakerdeck.com/notahotel）
   写真主役・1スライド1メッセージ・余白多め・高級エディトリアル枠。
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Noto+Sans+JP:wght@400;500;700;900&display=swap');

:root {
  --color-chrome: #000000;
  --color-bg:     #0b0c0e;
  --color-fg:     #ffffff;
  --color-muted:  rgba(255,255,255,.72);
  --color-faint:  rgba(255,255,255,.46);
  --color-accent: #ffffff;
  --color-line:   rgba(255,255,255,.20);
  --color-num:    rgba(255,255,255,.45);
  --color-card-bg: rgba(255,255,255,.06);
  --color-blue:    #0B7DA3;   /* 唯一の差し色（プロセス矢印など最小限のみ） */

  /* グラスモーフィズム */
  --glass-bg:    rgba(255,255,255,.12);
  --glass-bd:    rgba(255,255,255,.24);
  --glass-dark:  rgba(16,17,20,.40);
  --glass-blur:  blur(22px) saturate(1.3);

  --font-sans:    "Noto Sans JP", "Inter", system-ui, sans-serif;
  --font-display: "Noto Sans JP", "Inter", system-ui, sans-serif;
  --font-mono:    "Inter", "SF Mono", ui-monospace, monospace;

  --text-xs: .72rem; --text-sm: .85rem; --text-base: 1rem;
  --text-lg: 1.2rem; --text-xl: 1.6rem; --text-2xl: 2.4rem;
  --text-3xl: 3.4rem; --text-4xl: 4.4rem;

  --weight-normal: 400; --weight-medium: 500; --weight-bold: 700; --weight-black: 900;

  --sp-xs: .5rem; --sp-sm: 1rem; --sp-md: 1.6rem;
  --sp-lg: 2.6rem; --sp-xl: 64px;

  --radius: 18px;
  --border: 1px solid var(--color-line);
}

body { font-family: var(--font-sans); font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

.slide { background: var(--color-bg); color: var(--color-fg); }

/* ============================================================
   フルブリード写真背景
   使い方: <section class="slide slide-content photo"
                    style="background-image:url(assets/hero.jpg)">
   暗いグラデを ::before で重ね、白文字の可読性を確保する。
   .dim … 左から濃いめ（テキスト多めのスライド向け）
   .center … 中央を暗く（中央寄せタイトル向け）
   ============================================================ */
.photo { background-size: cover; background-position: center; background-repeat: no-repeat; }
.photo::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.58) 0%, rgba(0,0,0,.22) 38%, rgba(0,0,0,.58) 100%);
}
/* .dim … 左から濃いめ（左寄せテキスト多めのスライド向け） */
.photo.dim::before {
  background: linear-gradient(90deg, rgba(0,0,0,.84) 0%, rgba(0,0,0,.50) 52%, rgba(0,0,0,.20) 100%);
}
/* .dim-b … 下から濃いめ（下端にテキスト／セクション大文字向け） */
.photo.dim-b::before {
  background: linear-gradient(0deg, rgba(0,0,0,.86) 0%, rgba(0,0,0,.30) 48%, rgba(0,0,0,.55) 100%);
}
/* .center … 中央を暗く（中央寄せタイトル向け） */
.photo.center::before {
  background: radial-gradient(ellipse at 50% 52%, rgba(0,0,0,.48) 0%, rgba(0,0,0,.80) 100%);
}
.photo > * { position: relative; z-index: 1; }
/* 写真上の見出し・ラベル・数字は微シャドウで明るい写真でも可読に保つ */
.photo h1, .photo h2, .photo h3, .photo .label,
.photo .sub, .photo .wordmark, .photo .stat .number {
  text-shadow: 0 1px 30px rgba(0,0,0,.48), 0 1px 4px rgba(0,0,0,.30);
}

/* ============================================================
   ブランドマーク（左上固定）／フッター（左下）
   ============================================================ */
.brand-mark {
  position: absolute; top: 34px; left: var(--sp-xl); z-index: 6;
  font-family: var(--font-mono); font-weight: 800; font-size: .95rem;
  letter-spacing: .42em; color: #fff; text-transform: uppercase;
}
.foot {
  position: absolute; bottom: 22px; left: var(--sp-xl); z-index: 6;
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .1em;
  color: var(--color-faint);
}
/* エンジン側ナビ counter は NOT A HOTEL では使わない（©左下＋番号右下に統一） */
.slide-counter { display: none; }
.slide-page-num { color: var(--color-num); }

/* ============================================================
   タイポgrafィ
   ============================================================ */
.slide h1 { font-family: var(--font-display); font-weight: 900; font-size: var(--text-4xl); line-height: 1.04; letter-spacing: -.01em; }
.slide h2 { font-family: var(--font-display); font-weight: 900; font-size: var(--text-3xl); line-height: 1.14; letter-spacing: -.01em; }
.slide h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl); line-height: 1.32; }
.slide p  { font-size: var(--text-base); line-height: 1.95; color: var(--color-muted); font-weight: 400; }

.label {
  font-family: var(--font-mono); font-weight: 700; font-size: var(--text-sm);
  letter-spacing: .26em; text-transform: uppercase; color: #fff;
}

/* ============================================================
   タイトルスライド（中央寄せ・写真フルブリード）
   ============================================================ */
.slide-title { align-items: center; justify-content: center; text-align: center; gap: var(--sp-sm); }
.slide-title .wordmark {
  font-family: var(--font-mono); font-weight: 900; font-size: 1.05rem;
  letter-spacing: .5em; text-transform: uppercase; color: #fff; margin-left: .5em;
}
.slide-title h1 {
  font-size: var(--text-2xl); font-weight: 900; letter-spacing: .16em;
  text-transform: uppercase; margin-top: var(--sp-xs);
}
.slide-title .sub { font-size: var(--text-lg); color: var(--color-muted); font-weight: 500; letter-spacing: .04em; }
.slide-title .date { font-family: var(--font-mono); font-size: .78rem; letter-spacing: .14em; color: var(--color-faint); margin-top: var(--sp-sm); }

/* ============================================================
   コンテンツスライド（左寄せ・縦中央・1メッセージ）
   ============================================================ */
/* コンテンツは天地センター（上寄せ禁止）。brand-mark/foot は absolute で固定。
   余白は上下左右で均等にフレームする。はみ出す時は詰めずにスライドを分割。 */
.slide-content { gap: var(--sp-lg); justify-content: center; }
.slide-content .body { display: flex; flex-direction: column; gap: var(--sp-md); max-width: 920px; }
.slide-content .body .label + h2 { margin-top: var(--sp-xs); }
.slide-content .body p { max-width: 760px; }

/* ============================================================
   ランディング / セクション / エンド
   ============================================================ */
.slide-landing { justify-content: center; align-items: flex-start; }
.slide-landing h2 { font-size: var(--text-3xl); font-weight: 900; max-width: 1000px; line-height: 1.22; }

.slide-section { justify-content: flex-end; align-items: flex-start; gap: var(--sp-sm); }
.slide-section .label { color: #fff; opacity: .85; }
.slide-section h2 { font-size: var(--text-4xl); font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.slide-section .sub { font-size: var(--text-lg); font-weight: 500; color: var(--color-muted); }

.slide-end { justify-content: center; align-items: center; text-align: center; gap: var(--sp-md); }
.slide-end h2 { font-size: var(--text-2xl); font-weight: 900; }
.slide-end .mark { width: 64px; height: 2px; background: #fff; margin: 0 auto; }

/* ============================================================
   ユーティリティ
   ============================================================ */
.accent { color: var(--color-accent); }
.muted  { color: var(--color-muted); }
.faint  { color: var(--color-faint); }
.mono   { font-family: var(--font-mono); }
.bold   { font-weight: var(--weight-black); }
.divider { width: 100%; height: 1px; background: var(--color-line); }

.cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-md); }
.cols-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-md); }
.cols-2--auto { margin-block: auto; }

.list { display: flex; flex-direction: column; gap: var(--sp-sm); list-style: none; }
.list li { display: flex; align-items: baseline; gap: var(--sp-sm); font-size: var(--text-base); color: var(--color-fg); line-height: 1.7; }
.list li::before { content: ''; display: inline-block; flex-shrink: 0; width: 14px; height: 1px; background: #fff; margin-top: .85em; }

/* ── グラスカード（NOT A HOTEL の磨りガラス） ── */
.glass {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-bd); border-radius: var(--radius);
  padding: var(--sp-md) var(--sp-lg);
  display: flex; flex-direction: column; gap: var(--sp-xs);
  box-shadow: 0 8px 40px rgba(0,0,0,.18);
}
.glass-dark {
  background: var(--glass-dark);
  backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px);
  border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius);
  padding: var(--sp-md) var(--sp-lg);
  display: flex; flex-direction: column; gap: var(--sp-xs);
}
.glass h3, .glass-dark h3 { font-family: var(--font-display); font-weight: 900; font-size: var(--text-lg); color: #fff; }
.glass .en, .glass-dark .en { font-family: var(--font-mono); font-weight: 700; font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--color-faint); }
.glass p, .glass-dark p { font-size: var(--text-sm); color: var(--color-muted); line-height: 1.7; }

/* ── 縦3段ファネル（役割スライド等） ── */
.funnel { display: flex; flex-direction: column; gap: .9rem; }
.funnel-step { display: flex; align-items: center; gap: var(--sp-md); }
.funnel-step .k { font-family: var(--font-display); font-weight: 900; font-size: var(--text-lg); color: #fff; min-width: 200px; }
.funnel-step .v { font-size: var(--text-sm); color: var(--color-muted); }
.funnel-arrow { align-self: center; color: var(--color-faint); font-size: 1rem; line-height: 1; }

/* ── 数字ハイライト ── */
.stat { display: flex; flex-direction: column; gap: var(--sp-xs); }
.stat .number { font-family: var(--font-display); font-weight: 900; font-size: var(--text-4xl); color: #fff; line-height: 1; letter-spacing: -.02em; }
.stat .label { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-faint); letter-spacing: .18em; text-transform: uppercase; }

.tag { display: inline-block; font-family: var(--font-mono); font-size: var(--text-xs); color: #fff; border: 1px solid var(--color-line); border-radius: 100px; padding: .2rem .8rem; letter-spacing: .12em; text-transform: uppercase; }

/* ── ラベル行（左=極太ラベル＋EN／右=本文）。VALUES型 ── */
.vrows { display: flex; flex-direction: column; gap: .9rem; }
.vrow { display: grid; grid-template-columns: 300px 1fr; gap: var(--sp-lg); align-items: center; }
.vrow.glass-dark { padding: var(--sp-md) var(--sp-lg); }
.vrow .k { display: flex; flex-direction: column; gap: .2rem; }
.vrow .k .jp { font-family: var(--font-display); font-weight: 900; font-size: var(--text-lg); color: #fff; }
.vrow .k .en { font-family: var(--font-mono); font-weight: 700; font-size: .7rem; letter-spacing: .12em; color: var(--color-faint); text-transform: uppercase; }
.vrow .v { font-size: var(--text-sm); color: var(--color-muted); line-height: 1.75; }

/* ── 3カラムテキスト（容器なし・縦罫だけ） ── */
.txtcols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: var(--sp-md); }
.txtcols .tc { padding: 0 var(--sp-lg); }
.txtcols .tc:first-child { padding-left: 0; }
.txtcols .tc + .tc { border-left: 1px solid var(--color-line); }
.txtcols .tc h3 { font-family: var(--font-display); font-weight: 900; font-size: var(--text-lg); color: #fff; margin-bottom: var(--sp-sm); }
.txtcols .tc p { font-size: var(--text-sm); color: var(--color-muted); line-height: 1.8; }

/* ── 組織図（グラス枠＋人型アイコン格子） ── */
.orgcols { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-md); margin-top: var(--sp-md); }
.orgcol { display: flex; flex-direction: column; gap: var(--sp-sm); }
.orgcol > .cap { text-align: center; }
.orgcol > .cap .en { display: block; font-family: var(--font-mono); font-size: .58rem; letter-spacing: .12em; color: var(--color-faint); text-transform: uppercase; }
.orgcol > .cap .jp { font-family: var(--font-display); font-weight: 900; font-size: var(--text-base); color: #fff; }
.org { display: grid; grid-template-columns: repeat(2, 1fr); gap: .9rem .4rem; padding: var(--sp-md) var(--sp-sm); }
.org.c3 { grid-template-columns: repeat(3, 1fr); }
.org .u { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.org .u .fig { font-size: 1.3rem; color: rgba(255,255,255,.85); line-height: 1; }
.org .u .en { font-family: var(--font-mono); font-size: .5rem; letter-spacing: .06em; color: var(--color-faint); text-transform: uppercase; }
.org .u .jp { font-size: .58rem; color: rgba(255,255,255,.8); }

/* ── プロセスフロー（大矢印＋唯一の青アクセント） ── */
.pflow { display: flex; align-items: center; justify-content: center; gap: 0; margin-top: var(--sp-lg); }
.pflow .step { font-family: var(--font-mono); font-weight: 800; color: #fff; font-size: 1.05rem; letter-spacing: .05em; padding: 0 1.1rem; white-space: nowrap; }
.pflow .arr { width: 96px; height: 36px; background: #fff; flex-shrink: 0;
  clip-path: polygon(0 32%, 68% 32%, 68% 0, 100% 50%, 68% 100%, 68% 68%, 0 68%); }
.pflow .arr.blue { background: var(--color-blue); }
.pflow .loop { width: 64px; height: 64px; border-radius: 50%; border: 9px solid var(--color-blue); border-right-color: transparent; transform: rotate(45deg); flex-shrink: 0; }

/* ── ロゴ／技術スタックの壁（暗いタイル格子） ── */
.logowall { display: grid; grid-template-columns: repeat(11, 1fr); gap: .5rem; margin-top: var(--sp-md); }
.logowall.c8 { grid-template-columns: repeat(8, 1fr); }
.logowall .t { aspect-ratio: 1/1; border-radius: 11px; background: rgba(255,255,255,.08); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.12); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-weight: 700; font-size: .72rem; color: rgba(255,255,255,.85); }

/* ── グラスカード内のプロダクトSS ── */
.glass .shot, .glass-dark .shot { width: 100%; border-radius: 10px; overflow: hidden; margin-top: var(--sp-sm); background: rgba(0,0,0,.3); }
.glass .shot img, .glass-dark .shot img { width: 100%; display: block; }

/* ── 画像 ── */
.img-box { border-radius: var(--radius); overflow: hidden; }
.img-box img { width: 100%; height: 100%; object-fit: cover; display: block; }
.text-img { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-lg); flex: 1; align-items: center; }