/* Premium Water — 下層ページ共通スタイル
   背景：ユーザー指定の淡いブルーグレー
   タイポ：brand.ai 実測トークン（html 62.5% 基準 = 1rem 10px）
   アクセント：Instrument Serif italic（index.html の Water と同一） */

:root {
  --bg: #E3EDEF;
  --fg: #1b1b1b;
  --fg-soft: rgba(27, 27, 27, 0.58);
  --rule: rgba(27, 27, 27, 0.14);

  --size-body: 18px;
  --size-body2: 22px;
  --size-medium: 28px;
  --size-large: 44px;
  --size-xlarge: 54px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: 'Space Grotesk', Helvetica, Arial, sans-serif;
  font-size: var(--size-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* 4 隅ナビ — index.html と同一座標 */
.corner {
  position: fixed;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--fg);
  text-transform: uppercase;
  font-weight: 500;
  z-index: 10;
}
.corner.tl { top: 24px; left: 32px; }
.corner.tr { top: 24px; right: 32px; display: flex; gap: 28px; }
.corner.bl { bottom: 24px; left: 32px; }
.corner.br { bottom: 24px; right: 32px; display: flex; gap: 28px; }
.corner a { color: inherit; text-decoration: none; transition: opacity 0.2s; }
.corner a:hover { opacity: 0.5; }
.corner a.current { opacity: 0.4; }

/* 上下バー（都市 + 日本時間） — concreteclub 実測: TRJN DaVinci 12/14 大文字 → Instrument Serif で代替 */
.timebar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Instrument Serif', ui-serif, Georgia, serif;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: 0;
  color: var(--fg);
  white-space: nowrap;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 10px;
}
.timebar.top { top: 24px; }
.timebar.bottom { bottom: 24px; }
.timebar .sep { opacity: 0.4; }
.timebar time { font-variant-numeric: tabular-nums; }

/* 右揃え・縦積み（都市 1 行目 / 時刻 2 行目） */
.timebar.stacked {
  left: auto;
  right: 32px;
  transform: none;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.timebar.stacked.top { top: 52px; }
.timebar.stacked.bottom { bottom: 52px; }

@media (max-width: 900px) {
  .timebar.top { top: 16px; }
  .timebar.bottom { bottom: 16px; }
  .timebar.stacked { right: 20px; }
  .timebar.stacked.top { top: 44px; }
  .timebar.stacked.bottom { bottom: 44px; }
}

/* レイアウト */
.wrap {
  max-width: 1064px;
  margin: 0 auto;
  padding: 160px 32px 140px;
}

/* ページタイトル — About Us に合わせたサイズ感（34px / mb 26px） */
.page-title {
  font-size: 34px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 26px;
}
.page-title em {
  font-family: 'Instrument Serif', ui-serif, Georgia, serif;
  font-style: italic;
  font-size: calc(100% + 4px);
  letter-spacing: 0.02em;
}

/* リード — About Us に合わせたサイズ感（16px / lh1.8） */
.lead {
  font-size: 16px;
  line-height: 1.8;
  max-width: 720px;
  margin-bottom: 96px;
}

/* セクション */
.section { margin-bottom: 96px; }
.section-head {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-soft);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 40px;
}
.section h2 {
  font-size: var(--size-medium);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}
.section p { max-width: 720px; }
.section p + p { margin-top: 16px; }

/* 2 カラム */
.cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 56px 48px;
}
.cols p { max-width: none; }

/* グリッド（項目列挙） */
.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 48px;
  list-style: none;
}
.grid li {
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
}

/* 左サイド縦メニュー（下層ページ共通・Acne 風） */
.sidebar {
  position: fixed; top: 0; left: 0;
  width: 220px; height: 100vh;
  padding: 28px 28px;
  display: flex; flex-direction: column; gap: 26px;
  z-index: 10;
}
.sidebar .mark {
  font-family: 'Space Grotesk', Helvetica, Arial, sans-serif;
  font-weight: 500; font-size: 13px; letter-spacing: 0.02em;
  color: var(--fg); text-decoration: none;
}
.sidebar nav { display: flex; flex-direction: column; gap: 11px; }
.sidebar nav a {
  font-family: 'Space Grotesk', Helvetica, Arial, sans-serif;
  font-weight: 400; font-size: 13px; letter-spacing: 0.01em;
  color: var(--fg-soft); text-decoration: none; transition: color 0.2s;
}
.sidebar nav a:hover,
.sidebar nav a.current { color: var(--fg); }

/* 本文は右に寄せる（サイドバー分） */
.main { margin-left: 220px; }
.main .wrap { margin-left: 0; margin-right: auto; }
/* サイドバーの直後に来る .wrap を右に寄せる（ラッパー不要） */
.sidebar ~ .wrap { margin-left: 240px; margin-right: auto; padding-top: 96px; }

@media (max-width: 900px) {
  .sidebar {
    position: static; width: auto; height: auto;
    flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 18px;
    padding: 20px 20px;
  }
  .sidebar nav { flex-direction: row; flex-wrap: wrap; gap: 14px; }
  .main { margin-left: 0; }
  .main .wrap { padding-top: 64px; }
  body .wrap.wide { padding-top: 64px; }
  .sidebar ~ .wrap { margin-left: auto; padding-top: 64px; }
  /* 筆記体のページタイトルを一段小さく */
  body .page-title { font-size: 27px; margin-bottom: 48px; }
  /* What's AI Artist だけ本文が離れすぎているので詰める */
  body .article { margin-top: 108px; }
}

@media (max-width: 900px) {
  :root {
    --size-xlarge: 38px;
    --size-medium: 24px;
    --size-body2: 20px;
    --size-body: 14px;
  }
  .lead { font-size: 15px; }
  .wrap { padding: 120px 20px 64px; }
  /* 最後の章・最後の節の下は詰める（内容の終わり＝ページの終わり）*/
  body .chapter:last-child { padding-bottom: 0; }
  body .section:last-child { margin-bottom: 0; }
  .cols, .grid { grid-template-columns: 1fr; gap: 40px; }
  .grid { gap: 0; }
  .corner { font-size: 10px; }
  .corner.tr { gap: 18px; }
  .corner.tl { top: 16px; left: 20px; }
  .corner.tr { top: 16px; right: 20px; }
  .corner.bl { bottom: 16px; left: 20px; }
  .corner.br { bottom: 16px; right: 20px; }
}

/* メニューを開いている間は背面をスクロールさせない（モバイルのみ）*/
@media (max-width: 900px) {
  html.nav-open, html.nav-open body { overflow: hidden; }
  /* タップした瞬間に端末標準の暗い矩形が出るのを消す */
  a, button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
}

/* === ハンバーガー（モバイルのみ・PC は非表示）=== */
.nav-hamburger { display: none; }
.mark-mobile { display: none; }

@media (max-width: 900px) {
  .sidebar { position: relative; }
  .nav-hamburger {
    display: flex; align-items: center; justify-content: center;
    position: absolute; top: 50%; right: 11px; transform: translateY(-50%);
    width: 40px; height: 40px; padding: 0;
    background: none; border: 0; cursor: pointer; color: var(--fg);
    -webkit-tap-highlight-color: transparent;
  }
  .nav-hamburger svg { width: 22px; height: 22px; }

  .sidebar { border-bottom: 1px solid var(--rule); min-height: 85px; box-sizing: border-box;
             padding: 0 20px; align-items: center; }
  .sidebar .mark { display: none; }
  /* home と同じ「TOP」をヘッダー左に置く（モバイルのみ）*/
  .sidebar .mark-mobile {
    display: block; position: relative; z-index: 201;
    font-family: 'Space Grotesk', Helvetica, Arial, sans-serif;
    font-weight: 500; font-size: 12px; letter-spacing: 0.02em;
    color: var(--fg); text-decoration: none;
  }
  .sidebar nav {
    display: none;
    background: var(--bg);
    flex-direction: column; flex-wrap: nowrap; gap: 0;
  }
  /* 開いたら全画面。背後のページを見せない */
  .sidebar nav.open {
    display: flex;
    position: fixed; inset: 0;
    padding: 85px 20px 24px;
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 200;
  }
  .sidebar nav.open a:first-child { border-top: 1px solid var(--rule); }
  .sidebar .mark { position: relative; z-index: 201; }
  .nav-hamburger { z-index: 201; }
  .sidebar nav a {
    display: flex; align-items: center;
    box-sizing: content-box;
    height: 74px; padding: 0; font-size: 15px; font-weight: 500;
    border-bottom: 1px solid var(--rule); color: var(--fg);
  }
}

/* === モバイルのみ：本文サイズを一段小さく（各ページの個別指定より強くする）=== */
@media (max-width: 900px) {
  body .lead { font-size: 12px; }
  body .section p,
  body .cols p,
  body .grid li { font-size: 12px; }
  body .manifesto p,
  body .manifesto .em,
  body .manifesto li,
  body .manifesto .close { font-size: 12px; }
  body .chapter p { font-size: 12px; }
  body .acc-body p { font-size: 12px; }
  body .cp-head,
  body .policy p,
  body .policy-title { font-size: 12px; }
  body .policy-link a { font-size: 12px; }
}

/* === ブラウザ翻訳で日本語になったときの補正（モバイルのみ）===
   和文は同じ px でも字面が約 1.23 倍あるため、0.82 倍に揃える */
@media (max-width: 900px) {
  html[lang="ja"] body,
  html.translated-ltr body,
  html.translated-rtl body { font-size: 11.5px; }

  html[lang="ja"] body .page-title,
  html.translated-ltr body .page-title { font-size: 22px; letter-spacing: 0; }

  /* 和文に斜体は存在せず、ブラウザが機械的に傾けた偽の斜体になる。
     明朝に切り替えて、字間も和文向けに詰める */
  html[lang="ja"] .page-title em,
  html.translated-ltr .page-title em,
  html.translated-rtl .page-title em {
    font-family: 'Hiragino Mincho ProN', 'Yu Mincho', YuMincho, 'Noto Serif JP', serif;
    font-style: normal;
    font-weight: 400;
    font-size: 100%;
    letter-spacing: 0.01em;
  }

  html[lang="ja"] body .lead,
  html[lang="ja"] body .section p,
  html[lang="ja"] body .cols p,
  html[lang="ja"] body .grid li,
  html[lang="ja"] body .manifesto p,
  html[lang="ja"] body .manifesto .em,
  html[lang="ja"] body .manifesto li,
  html[lang="ja"] body .manifesto .close,
  html[lang="ja"] body .chapter p,
  html[lang="ja"] body .acc-body p,
  html[lang="ja"] body .cp-head,
  html[lang="ja"] body .policy p,
  html[lang="ja"] body .policy-title,
  html.translated-ltr body .lead,
  html.translated-ltr body .section p,
  html.translated-ltr body .cols p,
  html.translated-ltr body .grid li,
  html.translated-ltr body .manifesto p,
  html.translated-ltr body .manifesto .em,
  html.translated-ltr body .manifesto li,
  html.translated-ltr body .manifesto .close,
  html.translated-ltr body .chapter p,
  html.translated-ltr body .acc-body p,
  html.translated-ltr body .cp-head,
  html.translated-ltr body .policy p,
  html.translated-ltr body .policy-title { font-size: 10px; line-height: 1.85; }

  html[lang="ja"] .sidebar nav a,
  html.translated-ltr .sidebar nav a { font-size: 12.5px; }

  html[lang="ja"] .section h2,
  html.translated-ltr .section h2 { font-size: 20px; }

  html[lang="ja"] .section-head,
  html.translated-ltr .section-head { font-size: 9px; letter-spacing: 0.14em; }
}