/* ウィルクハーン日本サイト 基本値（2026-09-29 書き起こし）
 *
 * 仕様は docs/spec/01_tokens.md。値は本国サイトの見た目にそろえ、日本版で変えた値は日本版を正とする。
 * 本国 wilkhahn-site.css の同じ役割のルールは、tools/build_legacy_css.py が
 * 読み込むファイル（wilkhahn-site-legacy-1.css / -2.css）から取り除いている（REPLACED）。
 *
 * 読み込み順：base.css → wilkhahn-site-legacy-1.css（本国の残り：Bootstrap）→ utilities.css
 *            → wilkhahn-site-legacy-2.css（本国の残り：部品）→ wilkhahn-overrides.css
 * 部品の CSS はこの後ろに置くので、ここは部品に上書きされる前提で書く。
 * 余白の段階（.mb-* / .mt-*）は Bootstrap と部品の間に置く必要があるので、utilities.css に分けている。
 *
 * 画面幅の区切り（CSS 変数は @media に使えないので、ここに書いておく）
 *   576px  Bootstrap sm
 *   768px  スマートフォン／PC の切り替え。文字サイズもここで変わる（主に使う区切り）
 *   992px  Bootstrap lg
 *   1024px PC のグローバルメニュー（マウスオーバーで開く）
 *   1200px Bootstrap xl
 */

/* ── 書体 ──────────────────────────────────────────────── */

@font-face {
  font-family: "Akkurat Pro";
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/AkkuratLightPro-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "Akkurat Pro";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/AkkuratPro-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "Akkurat Pro";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/AkkuratPro-Bold.woff2") format("woff2");
}

/* ── 基本値 ────────────────────────────────────────────── */

:root {
  /* 色 */
  --wh-green: #6ea100;          /* ブランドの緑 */
  --wh-green-dark: #6b960e;     /* フォーカスの枠 */
  --wh-green-medium: #bed296;
  --wh-green-light: #f2f6e9;
  --wh-black: #232323;          /* 本文の文字 */
  --wh-white: #fff;
  --wh-gray-light: #eaebeb;
  --wh-gray-medium: #c8cbcc;
  --wh-gray: #7d7d7d;
  --wh-gray-dark: #454545;
  --wh-surface: #f3f3f3;        /* 灰色の面（絞り込みの箱、画像の読み込み前など） */
  --wh-surface-alt: #f5f5f5;    /* 背景つきの段 */
  --wh-link: #000;

  /* 文字 */
  --wh-font: "Akkurat Pro", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --wh-weight-light: 300;       /* 本文・見出し */
  --wh-weight-regular: 400;     /* 小見出し・強調 */

  /* 文字サイズ（スマートフォン。PC は下の @media で上書き） */
  --wh-size-h-xxl: 38px;
  --wh-size-h-xl: 30px;
  --wh-size-h-lg: 25px;
  --wh-size-h-md: 22px;
  --wh-size-h-sm: 18px;
  --wh-size-h-xs: 16px;
  --wh-size-h-overline: 16px;
  --wh-size-h-program: 14px;
  --wh-size-copy-xl: 25px;
  --wh-size-copy-lg: 22px;
  --wh-size-copy-md: 18px;
  --wh-size-copy-sm: 16px;
  --wh-size-copy-base: 16px;
  --wh-size-copy-xs: 14px;
  --wh-size-copy-xxs: 12px;

  /* 余白の段階（.mb-* / .mt-*） */
  --wh-space-none: 0;
  --wh-space-extra-small: 1rem;
  --wh-space-small: 1.5rem;
  --wh-space-medium: 2rem;
  --wh-space-large: 3rem;
  --wh-space-extra-large: 4rem;
  --wh-space-2xl: 5rem;
  --wh-space-3xl: 6rem;
}

@media (min-width: 768px) {
  :root {
    --wh-size-h-xxl: 60px;
    --wh-size-h-xl: 52px;
    --wh-size-h-lg: 40px;
    --wh-size-h-md: 32px;
    --wh-size-h-sm: 24px;
    --wh-size-h-xs: 18px;
    --wh-size-h-overline: 24px;
    --wh-size-h-program: 16px;
    /* リード文は日本版で本国より 2px 小さくしている（2026-09-28。本国は 32 / 28 / 22px） */
    --wh-size-copy-xl: 30px;
    --wh-size-copy-lg: 26px;
    --wh-size-copy-md: 20px;
    --wh-size-copy-sm: 18px;
  }
}

/* ── ページの土台 ──────────────────────────────────────── */

html {
  min-height: 100%;
}

/* 中身の幅の枠（Bootstrap の .container と同じ働き）。左右に 1rem ずつの余白 */
.container,
.container-fluid,
.container-xl {
  --wh-gutter-x: 2rem;
  --wh-gutter-y: 0;
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: calc(var(--wh-gutter-x) * .5);
  padding-left: calc(var(--wh-gutter-x) * .5);
}

/* フッターを画面の下端にそろえるため、縦に並べる */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  font-family: var(--wh-font);
  font-size: 1rem;
  font-weight: var(--wh-weight-light);
  line-height: 1.5;
  color: var(--wh-black);
  background-color: var(--wh-white);
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body .page-content {
  flex-shrink: 0;
}

::-moz-selection {
  color: var(--wh-white);
  background: var(--wh-black);
}

::selection {
  color: var(--wh-white);
  background: var(--wh-black);
}

/* 箇条書きの字下げ（番号つきの ol は下の「本文の部品」） */
ul {
  padding-left: 1.2em;
}

a {
  color: var(--wh-link);
  text-decoration: none;
}

a:hover {
  color: var(--wh-link);
}

/* キーボードで移動したときのフォーカス。Bootstrap の影ではなく、緑の枠で示す */
:focus-visible {
  box-shadow: none;
}

a:not(.btn):focus-visible {
  outline: 2px solid var(--wh-green-dark);
  outline-offset: 4px;
}

/* 本文（.ce-bodytext）の中のリンク：下線を引き、マウスを乗せると緑の下線と薄い緑の背景 */
.ce-bodytext a:not(.btn),
.ce-bodytext-16 a:not(.btn) {
  color: inherit;
  text-decoration: underline;
}

.ce-bodytext a:not(.btn) {
  font-weight: var(--wh-weight-regular);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  transition: all .2s ease-in-out;
}

.ce-bodytext a:not(.btn):hover {
  color: inherit;
  text-decoration-color: var(--wh-green);
  text-decoration-thickness: 2px;
  background-color: var(--wh-green-light);
}

.ce-bodytext a:not(.btn):focus-visible {
  outline-offset: 2px;
}

/* ── 見出しと文字サイズの段階 ──────────────────────────────
 * h1〜h4 は、クラスがなくても同じ段階の大きさになる（h1 = h-xxl、h2 = h-md、h3 = h-sm、h4〜h6 = h-xs）。 */

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: .5rem;
  font-weight: var(--wh-weight-light);
  color: inherit;
}

h1, .h-xxl {
  margin-bottom: 1.5rem;
  font-size: var(--wh-size-h-xxl);
  font-weight: var(--wh-weight-light);
  line-height: 1.15;
}

.h-xl {
  margin-bottom: 1rem;
  font-size: var(--wh-size-h-xl);
  font-weight: var(--wh-weight-light);
  line-height: 1.15;
}

.h-lg {
  margin-bottom: 1.5rem;
  font-size: var(--wh-size-h-lg);
  font-weight: var(--wh-weight-light);
  line-height: 1.15;
}

h2, .h-md {
  margin-bottom: 1.5rem;
  font-size: var(--wh-size-h-md);
  font-weight: var(--wh-weight-light);
  line-height: 1.15;
}

h3, .h-sm {
  font-size: var(--wh-size-h-sm);
  font-weight: var(--wh-weight-light);
  line-height: 1.3;
}

h4, h5, h6, .h-xs {
  font-size: var(--wh-size-h-xs);
  font-weight: var(--wh-weight-regular);
  line-height: 1.5;
}

/* 見出しの上に置く小さな英字（すべて大文字、字間を空ける） */
.h-overline {
  margin-bottom: 1.5em;
  font-size: var(--wh-size-h-overline);
  font-weight: var(--wh-weight-regular);
  line-height: 1.15;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.h-program {
  margin-bottom: 1.5em;
  font-size: var(--wh-size-h-program);
  font-weight: var(--wh-weight-regular);
  line-height: 1.375;
  letter-spacing: 0;
  text-transform: none;
}

/* リード文。1つの要素に copy-* が2つ付いていることがある（copy-lg copy-sm など）。
   そのときは後に書いた段階が効く（本国と同じ）ので、並び順を変えないこと */
.copy-xl {
  margin-bottom: 1em;
  font-size: var(--wh-size-copy-xl);
}

.copy-lg {
  font-size: var(--wh-size-copy-lg);
  line-height: 1.35;
}

.copy-md {
  font-size: var(--wh-size-copy-md);
  line-height: 1.45;
}

.copy-sm {
  font-size: var(--wh-size-copy-sm);
  line-height: 1.45;
}

.copy-base {
  font-size: var(--wh-size-copy-base);
  line-height: 1.45;
}

.copy-xs {
  font-size: var(--wh-size-copy-xs);
  line-height: 1.45;
}

.copy-xxs {
  font-size: var(--wh-size-copy-xxs);
}

/* copy-xl の行の高さは PC だけ詰める。ほかの copy-* と重なったときもこちらが効く（本国と同じ） */
@media (min-width: 768px) {
  .copy-xl {
    line-height: 1.3;
  }
}

/* ── 本文の部品 ───────────────────────────────────────────
 * .ce-bodytext は CMS の本文欄。クラスのない段落と箇条書きは 18px（PC は 22px。日本版は overrides で 20px）。 */

.ce-bodytext p strong,
.ce-bodytext-16 p strong {
  font-weight: var(--wh-weight-regular);
}

.ce-bodytext:not(.ce-bodytext-16) p:not([class]),
.ce-bodytext:not(.ce-bodytext-16) ol:not([class]),
.ce-bodytext:not(.ce-bodytext-16) .list-arrow,
.ce-bodytext:not(.ce-bodytext-16) .p-arrow,
.ce-bodytext:not(.ce-bodytext-16) .list-anchors {
  font-size: 18px;
}

@media (min-width: 768px) {
  .ce-bodytext {
    overflow: hidden;
  }

  .ce-bodytext > :last-child {
    margin-bottom: 0;
  }

  .ce-bodytext:not(.ce-bodytext-16) p:not([class]),
  .ce-bodytext:not(.ce-bodytext-16) ol:not([class]),
  .ce-bodytext:not(.ce-bodytext-16) .list-arrow,
  .ce-bodytext:not(.ce-bodytext-16) .p-arrow,
  .ce-bodytext:not(.ce-bodytext-16) .list-anchors {
    font-size: 22px;
  }
}

/* 写真のクレジット */
.copyright {
  display: block;
  font-size: 13px;
  color: var(--wh-gray);
}

/* 矢印の箇条書き：行ごとに灰色の罫線、行頭に緑の矢印（Font Awesome の arrow-right-long） */
ul.list-arrow {
  margin-bottom: 2rem;
  padding-left: 0;
  list-style: none;
}

ul.list-arrow li {
  position: relative;
  padding: .73em .5rem .73em 2em;
  border-bottom: 1px solid #ccc;
}

ul.list-arrow li::before {
  position: absolute;
  left: 0;
  display: inline-block;
  font: var(--fa-font-light);
  line-height: inherit;
  color: var(--wh-green);
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\f178";
}

ul.list-arrow li:first-of-type {
  border-top: 1px solid #ccc;
}

p + .list-arrow {
  margin-top: 3rem;
}

/* 番号つきの箇条書き：番号を緑にする */
ol {
  margin-top: 2rem;
  margin-bottom: 1.5rem;
  padding-left: 1.125em;
}

ol li {
  position: relative;
  margin-bottom: .5rem;
  padding-left: .25em;
}

ol li::marker {
  font-weight: var(--wh-weight-regular);
  color: var(--wh-green);
}

cite {
  font-style: normal;
}

blockquote {
  font-style: normal;
}

/* 写真の説明（Bootstrap の .figure-caption を、本文に近い大きさにする） */
.figure-caption {
  width: 89%;
  margin-top: .75rem;
  font-size: 1rem;
  font-style: normal;
  line-height: 1.35em;
  color: var(--wh-gray-dark);
}

/* 写真を枠いっぱいに切り抜いて表示する */
.img-cover {
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

.figure-img,
.figure-video {
  margin-bottom: .75rem;
  line-height: 1;
}