/* Reset & defaults — Studio エディタは margin/padding 0 を前提に組まれているため */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
}
/* ページ間でスクロールバー幅ぶんの横ズレが出ないよう、スクロールバー領域を常時確保する。
   .n-header-1 は position:fixed; right:0 の右寄せナビのため、縦スクロールの有無が
   ページごとに変わる classic スクロールバー環境（マウス接続 / 「常に表示」設定）では
   viewport 幅が変動してヘッダーが左右に動く。overlay スクロールバー環境では no-op。*/
html {
  scrollbar-gutter: stable;
}
/* production の body computed font-family は 'sans-serif'（generic）。テキスト要素は
   typography class や richText 個別ルールで Inter+Noto Sans JP に上書きされる。
   body 自体は sans-serif に揃えることで、typography class が当たらない素朴な要素も production と一致。 */
body {
  font-family: sans-serif;
  color: #333;
  line-height: 16px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}
/* <p> は ctype=text の標準タグとして全テキストで使われるため、デフォルト margin はゼロ。
   richText 内では .prose p で段落間 margin を復活させる。
   production も全体テキストに margin: 0 適用、段落のみ margin あり。 */
p {
  margin: 0;
}
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
figure {
  margin: 0;
}
li {
  margin: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
/* Studio production の img は flex column + center align（line-height:16px）。 */
/* width:auto は width 属性（CLS 用 aspect-ratio の供給源）が flex+max-width 下で
   実描画幅を 0.016px スナップさせる副作用を打ち消す（CSS が presentational 属性に
   優先）。aspect-ratio は属性由来のまま残り CLS 予約は維持される（W4-b #77）。 */
img {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-content: center;
  line-height: 16px;
  max-width: 100%;
  width: auto;
  height: auto;
}
iframe {
  border: 0;
}
/* Material Icons: 親の font-size を継承して icon size を統一 */
.material-icons,
.material-symbols-outlined,
.material-symbols-rounded {
  font-size: inherit;
  line-height: 1;
  vertical-align: middle;
}
/* richText コンテンツ内では production の runtime と同等のタイポグラフィを適用する。
   richText コンテナ自体は Studio source で font-family=Lato / size=24px が設定されることがあるが、
   production runtime は <p>/<h2>/etc に Inter+Noto Sans JP / size 16px / line-height 32px を上書きする。 */
.prose {
  line-height: 1.6;
}
.prose p {
  font-family: Inter, "Noto Sans JP";
  font-size: 16px;
  line-height: 32px;
  min-height: 16px;
  margin: 24px 0;
  align-self: stretch;
}
.prose h2 {
  font-family: Inter, "Noto Sans JP";
  font-size: 24px;
  line-height: 1.5;
  font-weight: 700;
  margin: 48px 0 24px 0;
  color: rgb(194, 27, 12);
}
.prose h3 {
  font-family: Inter, "Noto Sans JP";
  font-size: 16px;
  line-height: 1.4;
  font-weight: 700;
  margin: 10px 0;
}
.prose h5 {
  font-family: Inter, "Noto Sans JP";
  font-size: 16px;
  line-height: 1;
  font-weight: 600;
  color: rgb(51, 51, 51);
  margin: 10px 0;
}
.prose ul {
  list-style: disc;
  padding-left: 0;
  margin: 0 0 0 20px;
}
.prose ol {
  list-style: decimal;
  padding-left: 0;
  margin: 0 0 0 20px;
}
.prose li {
  margin: 10px 0;
}
.prose li p {
  margin: 0;
  line-height: inherit;
  font-size: inherit;
}
.prose a {
  color: rgb(0, 103, 214);
  text-decoration: underline;
} /* #0067d6: WCAG AA 本文 4.5:1 確保（旧 rgb(0,124,255)=#007cff は 3.94:1・#37/T26-848） */
/* richText の黄色マーカーハイライト（意味的に <mark>。#93 で <u> から移行） */
.prose mark {
  text-decoration: none;
  background-color: rgb(255, 252, 107);
  color: rgb(35, 24, 21);
  font-weight: 700;
}
.prose a mark {
  background-color: transparent;
  color: inherit;
  text-decoration: underline;
  font-weight: inherit;
}
.prose strong {
  font-weight: bold;
}
.prose em {
  font-style: normal;
}
.prose figcaption {
  color: rgb(51, 51, 51);
}
.embed {
  width: 100%;
  align-self: stretch;
}

/* デザイントークン。値は本番の computed style と一致させたまま（変更しない）。 */
:root {
  --color-red: #c21b0cff; /* ブランド赤（見出し・アクセント） */
  --color-red-bright: #d61e20;
  --color-white: #ffffffff;
  --color-black: #000000ff;
  --color-gray-light: #ebebebff;
  --color-gray: #ddddddff;
  --color-gray-dark: #666666ff;
  --font-sans: Inter, "Noto Sans JP"; /* 主要スタック */
  --font-lato: Lato;
  --font-noto-sans-jp: "Noto Sans JP";
  --font-roboto: Roboto;
}

/* Title-XL */
.title-xl {
  position: relative;
  font-family: var(--font-sans);
  font-size: 48px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.1;
}
/* Title-L */
.title-lg {
  position: relative;
  font-family: var(--font-sans);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
}
/* Title-M */
.title-md {
  position: relative;
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.4;
}
/* Paragraph-L */
.paragraph-lg {
  position: relative;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.5;
}
/* Paragraph-M */
.paragraph-md {
  position: relative;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.4;
}
/* New 本文 */
.text-body {
  position: relative;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 2;
}
@media (max-width: 540px) {
  .text-body {
    font-size: 14px;
  }
}
/* New セクション見出し英語 */
.title-en {
  position: relative;
  font-family: var(--font-roboto);
  font-size: 48px;
  font-weight: 500;
  line-height: 1;
}
@media (max-width: 540px) {
  .title-en {
    font-size: 28px;
  }
}
/* New 本文太字 */
.text-body-bold {
  position: relative;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 2;
}
@media (max-width: 540px) {
  .text-body-bold {
    font-size: 14px;
  }
}
/* New 注釈 */
.text-note {
  position: relative;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: normal;
  line-height: 1.5;
}
/* New 細字 */
.text-small {
  position: relative;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 2;
}
@media (max-width: 540px) {
  .text-small {
    font-size: 14px;
  }
}
/* New 中見出し */
.heading-md {
  position: relative;
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.4;
}
@media (max-width: 1140px) {
  .heading-md {
    font-weight: 600;
  }
}
@media (max-width: 540px) {
  .heading-md {
    font-size: 22px;
  }
}