/*
 * Ruskin 公式サイト（https://ruskin.blue）共通スタイル
 *
 * 運営会社 non-standard world のサイト（https://www.non-standardworld.co.jp/）のトーンに合わせている。
 *   白い地 / #333 の文字 / セリフ体（欧文は Garamond 系、和文は明朝）/ オリーブゴールドのアクセント /
 *   小文字の英語ラベル / ピル型のボタン / 余白を広くとった静かな構成
 * 画像・ロゴ・Web フォントは使わない（外部へのリクエストを発生させないため）。
 * CSP で style 属性・インライン <style> を禁止しているので、スタイルはこのファイルにだけ書く。
 * 運営会社と同じ Web フォントを使う手順は docs/OFFICIAL_SITE.md を参照。
 */

:root {
  color-scheme: light;

  /*
   * 欧文は Adobe Garamond Pro（運営会社サイトが Adobe Fonts で配信）→ 手元にある Garamond 系 → Times、
   * 和文は游明朝 → ヒラギノ明朝。Web フォントを読み込まない間は、端末にある書体で表示される
   */
  --font-serif: "adobe-garamond-pro", "EB Garamond", "Cormorant Garamond", "Garamond",
    "Hoefler Text", "Times New Roman", "游明朝", "YuMincho", "ヒラギノ明朝 ProN W3",
    "Hiragino Mincho ProN", "BIZ UDPMincho", "Noto Serif JP", "メイリオ", "Meiryo", serif;

  /* 面と文字 */
  --paper: #ffffff;
  --tint: #f6f4ec;
  --ink: #333333;
  --ink-2: #707070; /* 補助の文字・短い罫（白地で 4.95:1） */
  --rule: #e6e6e6;
  --rule-vertical: #d2d2d2;
  --bar: #343434; /* パンくずバー */

  /*
   * アクセントのオリーブゴールド。運営会社サイトの #9d8f4d を基準に、文字が読める濃さへ寄せた派生色を使う
   *   --gold       罫・印・大きな面（#9d8f4d。運営会社サイトと同じ）
   *   --gold-fill  白い文字を載せるボタンの地（白との比 4.62:1）
   *   --gold-ink   文字のリンク（白地 5.34:1、--tint 地 4.85:1）
   */
  --gold: #9d8f4d;
  --gold-fill: #81753f;
  --gold-fill-hover: #6e6436;
  --gold-ink: #766b3a;
  --gold-on-bar: #c9bb73; /* パンくずバー（#343434）の上で 6.43:1 */

  /* グラフの系列色（白地で scripts/validate_palette.js の全項目を通過した組み合わせ） */
  --series-sales: #4a82c4;
  --series-profit: #9a8523;

  --header-h: 64px;
  --gutter: 20px;
  --measure: 46rem;
}

@media (min-width: 56rem) {
  :root {
    --header-h: 80px;
    --gutter: 30px;
  }
}

/* ── ベース ───────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 24px);
}

body {
  margin: 0;
  padding-top: var(--header-h);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 0.875rem;
  line-height: 1.65;
  overflow-wrap: anywhere;
  line-break: strict;
  /* Garamond 系の旧式数字では「1」が小文字の「I」のように見えるため、高さのそろう数字にする */
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
}

/* 番号付きリストの数字はブラウザの既定で上書きされるため、ここでも指定する */
li::marker {
  font-variant-numeric: lining-nums tabular-nums;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.06em;
  /* 対応ブラウザでは文節の切れ目で折り返す */
  word-break: auto-phrase;
  text-wrap: balance;
}

p,
ul,
ol,
dl,
dd,
figure {
  margin: 0;
}

a {
  color: var(--gold-ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}

a:hover {
  color: var(--ink);
}

:focus-visible {
  outline: 2px solid var(--gold-ink);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 200;
  padding: 0.5rem 1rem;
  background: var(--paper);
  color: var(--ink);
  transform: translateY(-300%);
}

.skip-link:focus {
  transform: none;
}

/* 語の途中で折り返したくない句 */
.nowrap {
  display: inline-block;
}

/* ── ヘッダー（白い固定バー）─────────────────────── */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  background: var(--paper);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 100%;
  padding-inline: var(--gutter);
}

.wordmark {
  color: var(--ink);
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: 0.08em;
  text-decoration: none;
}

.wordmark:hover {
  color: var(--ink);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.site-nav ul {
  display: none;
  gap: 1.5625rem;
  padding: 0;
  list-style: none;
}

.site-nav li a {
  color: var(--ink);
  font-size: 1.125rem;
  letter-spacing: 0.01em;
  text-decoration: none;
}

.site-nav li a:hover {
  color: var(--gold-ink);
}

@media (min-width: 56rem) {
  .wordmark {
    font-size: 1.75rem;
  }

  .site-nav ul {
    display: flex;
    align-items: center;
  }
}

/* 外部サイトへのリンク（小さな重なった四角） */
.ext::after {
  content: "";
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-left: 0.4375rem;
  border: 1px solid currentColor;
  box-shadow: 0.1875rem -0.1875rem 0 -1px var(--paper), 0.1875rem -0.1875rem 0 0 currentColor;
  vertical-align: 0.1em;
}

/* ── ピル型のボタン ───────────────────────────────── */

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.25rem;
  padding: 0 1.375rem 0.125rem;
  border-radius: 500px;
  background: var(--gold-fill);
  color: #ffffff;
  font-size: 1rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
}

.pill:hover {
  background: var(--gold-fill-hover);
  color: #ffffff;
}

.pill--large {
  height: 3.75rem;
  padding: 0 2.75rem 0.25rem;
  font-size: 1.125rem;
  letter-spacing: 0.06em;
}

@media (min-width: 56rem) {
  .pill {
    height: 2.5rem;
    padding: 0 1.9375rem 0.1875rem;
    font-size: 1.125rem;
  }

  .pill--large {
    height: 4.5rem;
    padding: 0 5.5rem 0.25rem;
    font-size: 1.25rem;
  }
}

/* 「詳細を見る ●」の形のリンク */
.more {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--ink);
  text-decoration: none;
}

.more::after {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #aaaaaa;
}

.more:hover {
  color: var(--gold-ink);
}

.more:hover::after {
  background: var(--gold);
}

/* ── トップページ：ヒーロー ───────────────────────── */

.hero {
  padding: 4.5rem var(--gutter) 2rem;
  text-align: center;
}

.hero h1 {
  font-size: clamp(1.75rem, 1.1rem + 2.6vw, 2.75rem);
  line-height: 1.6;
  letter-spacing: 0.08em;
}

.hero__lead {
  max-width: 34em;
  margin: 2rem auto 0;
  font-size: 0.9375rem;
  line-height: 2.1;
  letter-spacing: 0.04em;
}

.hero__actions {
  margin-top: 2.75rem;
}

.hero__note {
  max-width: 28em;
  margin: 1.25rem auto 0;
  color: var(--ink-2);
  font-size: 0.8125rem;
  line-height: 1.9;
}

.hero .trend {
  max-width: 38rem;
  margin: 5.5rem auto 0;
}

@media (min-width: 56rem) {
  .hero {
    padding: 8rem var(--gutter) 3rem;
  }

  .hero__lead {
    font-size: 1rem;
  }
}

/* ── グラフ（売上と粗利ベースの売上の推移）───────── */

.trend__legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem 1.75rem;
  padding: 0;
  font-size: 0.8125rem;
  list-style: none;
}

.trend__legend li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.trend__swatch {
  display: inline-block;
  width: 1.5rem;
  height: 0;
  border-top: 2px solid;
}

.trend__swatch--sales {
  border-color: var(--series-sales);
}

.trend__swatch--profit {
  border-color: var(--series-profit);
  border-top-width: 3px;
}

.trend svg {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 1.25rem;
  overflow: visible;
}

.trend__baseline {
  stroke: var(--rule-vertical);
  stroke-width: 1;
}

.trend__hatch-line {
  stroke: var(--series-profit);
  stroke-opacity: 0.5;
  stroke-width: 1.25;
}

.trend__line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.trend__line--sales {
  stroke: var(--series-sales);
  stroke-width: 2;
}

.trend__line--profit {
  stroke: var(--series-profit);
  stroke-width: 3;
}

.trend__end {
  stroke: var(--paper);
  stroke-width: 2;
}

.trend__end--sales {
  fill: var(--series-sales);
}

.trend__end--profit {
  fill: var(--series-profit);
}

/* SVG の文字サイズは viewBox の座標系なので、画面に出る大きさは図の幅に比例する */
.trend__label {
  fill: var(--ink);
  font-family: var(--font-serif);
  font-size: 12px;
}

.trend__area-label {
  fill: var(--ink);
  font-family: var(--font-serif);
  font-size: 15px;
  letter-spacing: 0.12em;
  /* 斜線の上でも読めるよう、背景色の縁取りを付ける */
  paint-order: stroke;
  stroke: var(--paper);
  stroke-width: 6px;
  stroke-linejoin: round;
}

.trend__axis-label {
  fill: var(--ink-2);
  font-family: var(--font-serif);
  font-size: 11px;
}

/* 図が縮む狭い画面では、画面上で 11〜14px になるよう座標系の文字サイズを上げる */
@media (max-width: 40rem) {
  .trend__label {
    font-size: 16px;
  }

  .trend__area-label {
    font-size: 20px;
  }

  .trend__axis-label {
    font-size: 15px;
  }
}

.trend figcaption {
  margin-top: 1.25rem;
  color: var(--ink-2);
  font-size: 0.8125rem;
  line-height: 1.9;
  text-align: center;
}

/* ── トップページ：縦書きの英語ラベルと本文の 2 カラム ── */

.section {
  padding-block: 5rem;
}

.section__grid {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  column-gap: 1.125rem;
  max-width: 68rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section__label {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--ink-2);
  font-size: 1.25rem;
  letter-spacing: 0.06em;
}

.section__label span {
  display: block;
  writing-mode: vertical-rl;
  line-height: 1;
}

/* ラベルの下から節の終わりまで伸びる細い線 */
.section__label::after {
  content: "";
  flex: 1;
  width: 1px;
  margin-top: 1.125rem;
  background: var(--rule-vertical);
}

.section__title {
  font-size: 1.5rem;
  line-height: 1.7;
}

.section__intro {
  max-width: var(--measure);
  margin-top: 1.5rem;
  font-size: 0.9375rem;
  line-height: 2.05;
  letter-spacing: 0.03em;
}

@media (min-width: 60rem) {
  .section {
    padding-block: 8rem;
  }

  .section__grid {
    grid-template-columns: 7.5rem minmax(0, 46.5rem);
    column-gap: 8rem;
    justify-content: center;
  }

  .section__label {
    font-size: 1.5rem;
  }
}

/* わかること（問いと答えの一覧） */

.questions {
  margin-top: 3rem;
  padding: 0;
  list-style: none;
}

.question {
  padding-block: 2.25rem;
  border-top: 1px solid var(--rule);
}

.question:last-child {
  border-bottom: 1px solid var(--rule);
}

.question h3 {
  font-size: 1.25rem;
  line-height: 1.75;
  letter-spacing: 0.05em;
}

.question p {
  margin-top: 0.875rem;
  font-size: 0.9375rem;
  line-height: 2.05;
  letter-spacing: 0.03em;
}

.question .formula {
  margin-top: 0.875rem;
  font-size: 1.125rem;
  letter-spacing: 0.06em;
}

.question .question__screen {
  margin-top: 0.625rem;
  color: var(--ink-2);
  font-size: 0.8125rem;
}

/* はじめかた（手順） */

.steps {
  display: grid;
  gap: 2.5rem;
  margin-top: 3rem;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.step {
  counter-increment: step;
}

.step::before {
  content: counter(step);
  display: block;
  margin-bottom: 0.875rem;
  color: var(--gold);
  font-size: 2.5rem;
  line-height: 1;
}

.step h3 {
  font-size: 1.125rem;
  line-height: 1.7;
  letter-spacing: 0.05em;
}

.step p {
  margin-top: 0.625rem;
  font-size: 0.875rem;
  line-height: 2;
  letter-spacing: 0.03em;
}

@media (min-width: 48rem) {
  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
  }
}

/* データの扱い */

.data-points {
  display: grid;
  gap: 2rem;
  margin-top: 3rem;
}

.data-points dt {
  font-size: 1.125rem;
  line-height: 1.7;
  letter-spacing: 0.05em;
}

.data-points dd {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  line-height: 2;
  letter-spacing: 0.03em;
}

.data-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  margin-top: 3rem;
  padding: 0;
  list-style: none;
}

/* ── フッター ─────────────────────────────────────── */

.cta {
  padding: 5rem var(--gutter);
  background: var(--tint);
  text-align: center;
}

.cta p {
  margin-bottom: 1.75rem;
  font-size: 0.875rem;
  letter-spacing: 0.06em;
}

.site-footer {
  padding: 4rem var(--gutter) 3.5rem;
  text-align: center;
}

.site-footer ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 1.75rem;
  padding: 0;
  list-style: none;
}

.site-footer li a {
  color: var(--ink);
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  text-decoration: none;
}

.site-footer li a:hover,
.site-footer li a[aria-current="page"] {
  color: var(--gold-ink);
}

.site-footer .wordmark {
  display: inline-block;
  margin-top: 2.75rem;
  font-size: 1.5rem;
}

.site-footer__company {
  margin-top: 1.25rem;
  font-size: 0.8125rem;
}

.site-footer__company a {
  color: var(--ink);
}

.site-footer__company a:hover {
  color: var(--gold-ink);
}

.site-footer small {
  display: block;
  margin-top: 0.5rem;
  color: var(--ink-2);
  font-size: 0.75rem;
}

/* ── 下層ページ：パンくずバーとタイトル ───────────── */

.breadcrumb {
  background: var(--bar);
  padding-inline: var(--gutter);
}

.breadcrumb ol {
  display: flex;
  align-items: center;
  min-height: 3.4375rem;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
}

.breadcrumb li + li::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 0.75rem;
  margin: 0 0.875rem;
  background: #777777;
  vertical-align: -0.05em;
}

.breadcrumb a {
  color: #bbbbbb;
  text-decoration: none;
}

.breadcrumb a:hover {
  color: #ffffff;
}

.breadcrumb [aria-current="page"] {
  color: var(--gold-on-bar);
}

.breadcrumb :focus-visible {
  outline-color: #ffffff;
}

.page-title {
  padding: 4.5rem var(--gutter) 1rem;
  text-align: center;
}

.page-title h1 {
  font-size: clamp(1.625rem, 1.3rem + 1.4vw, 2.25rem);
  letter-spacing: 0.08em;
}

/* 見出しの下の短い罫（運営会社サイトの見出しと同じ 30px の線） */
.page-title h1::after,
.doc h2::after {
  content: "";
  display: block;
  width: 30px;
  height: 1px;
  background: var(--ink-2);
}

.page-title h1::after {
  margin: 1.75rem auto 0;
}

.page-title__meta {
  margin-top: 1.5rem;
  color: var(--ink-2);
  font-size: 0.875rem;
}

/* 制定日・改定日が続くときは詰める */
.page-title__meta + .page-title__meta {
  margin-top: 0.25rem;
}

@media (min-width: 56rem) {
  .page-title {
    padding-top: 6rem;
  }
}

/* ── 規約・ポリシー（文書ページ）─────────────────── */

.doc {
  max-width: var(--measure);
  margin-inline: auto;
  padding: 2rem var(--gutter) 7rem;
  font-size: 0.9375rem;
  line-height: 2.05;
  letter-spacing: 0.03em;
}

.doc h2 {
  margin-top: 4.5rem;
  font-size: 1.25rem;
  line-height: 1.7;
  letter-spacing: 0.06em;
}

.doc h2::after {
  margin-top: 1.125rem;
}

.doc h3 {
  margin-top: 2rem;
  font-size: 1.0625rem;
  letter-spacing: 0.05em;
}

.doc section > p,
.doc section > ol,
.doc section > ul,
.doc section > dl,
.doc section > .table-scroll {
  margin-top: 1.125rem;
}

.doc ul,
.doc ol {
  padding-left: 1.5em;
}

.doc li + li {
  margin-top: 0.4rem;
}

.doc__lead {
  margin-top: 1rem;
}

/* 「（1）」形式の項番 */
.doc ol.clauses {
  padding-left: 0;
  list-style: none;
  counter-reset: clause;
}

.doc ol.clauses > li {
  position: relative;
  padding-left: 2.75em;
  counter-increment: clause;
}

.doc ol.clauses > li::before {
  content: "（" counter(clause) "）";
  position: absolute;
  left: 0;
}

/* 目次 */
.doc__toc {
  margin-top: 3rem;
  padding: 1.75rem 2rem;
  background: var(--tint);
}

.doc .doc__toc h2 {
  margin-top: 0;
  font-size: 0.9375rem;
  letter-spacing: 0.12em;
}

.doc .doc__toc h2::after {
  display: none;
}

.doc__toc ol {
  margin-top: 0.75rem;
  font-size: 0.875rem;
  line-height: 2;
}

/* 運営会社サイトの「outline」と同じ、罫のない項目と内容の並び */
.doc dl.facts {
  display: grid;
  gap: 0.25rem 1rem;
  font-size: 0.875rem;
  line-height: 1.8;
}

.doc dl.facts dt {
  margin-top: 0.75rem;
}

.doc dl.facts dt:first-child {
  margin-top: 0;
}

@media (min-width: 40rem) {
  .doc dl.facts {
    grid-template-columns: 7.5rem 1fr;
    gap: 0.75rem 1rem;
  }

  .doc dl.facts dt {
    margin-top: 0;
  }
}

.table-scroll {
  overflow-x: auto;
}

.doc table {
  width: 100%;
  min-width: 32rem;
  border-collapse: collapse;
  /* anywhere だと列幅の計算で語が細切れになるため、表では break-word にする */
  overflow-wrap: break-word;
  font-size: 0.875rem;
  line-height: 1.85;
}

.doc th,
.doc td {
  padding: 0.875rem 0.875rem 0.875rem 0;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
  font-weight: 400;
}

/* 和文はどの文字間でも折り返せるため、短い見出しが 1 文字幅に潰れないようにする */
.doc thead th {
  border-bottom: 1px solid var(--ink-2);
  color: var(--ink-2);
  white-space: nowrap;
}

.doc tbody th {
  width: 9em;
  word-break: auto-phrase;
}

.doc .note {
  margin-top: 1.25rem;
  padding: 1.125rem 1.5rem;
  border-left: 2px solid var(--gold);
  background: var(--tint);
  font-size: 0.875rem;
  line-height: 2;
}

.doc .procedure > li::marker {
  color: var(--gold-ink);
}

.doc__contact {
  margin-top: 5rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--rule);
}

.doc .doc__contact h2 {
  margin-top: 0;
  font-size: 1.0625rem;
}

.doc .doc__contact h2::after {
  display: none;
}

.doc .doc__contact dl.facts {
  margin-top: 1.25rem;
}

/* ── 404 ─────────────────────────────────────────── */

.not-found {
  max-width: var(--measure);
  margin-inline: auto;
  padding: 1.5rem var(--gutter) 8rem;
  font-size: 0.9375rem;
  line-height: 2.05;
  text-align: center;
}