/* --------------------------------------
	共通デザイントークン
-------------------------------------- */
:root {
  /*  フォントサイズ（流体タイポグラフィ）  */
  --font-size--base: clamp(1rem, 0.92rem + 0.4vw, 1.4rem);
  /* 400px ~ 1200px で 1rem(16px) ~ 1.4rem(22.4px) */
  --font-size--xs: calc(var(--font-size--base) * 0.8);
  /* 12.8px ~ 17.9px */
  --font-size--sm: calc(var(--font-size--base) * 0.9);
  /* 14.4px ~ 20.16px */
  --font-size--md: calc(var(--font-size--base) * 1.1);
  /* 17.6px ~ 24.64px */
  --font-size--lg: calc(var(--font-size--base) * 1.25);
  /* 20px ~ 28px */
  --font-size--xl: calc(var(--font-size--base) * 1.5);
  /* 24px ~ 33.6px */
  --font-size--2xl: calc(var(--font-size--base) * 2);
  /* 32px ~ 44.8px */
  --font-size--3xl: calc(var(--font-size--base) * 2.5);
  /* 40px ~ 56px */

  /*  余白  */
  --space: calc(var(--font-size--base) * 0.25);
  /* = 0.25rem ~ ≒ 4px ~ */

  --space--1: var(--space);
  /* 4px ~ */
  --space--2: calc(var(--space) * 2);
  /* 8px ~ */
  --space--4: calc(var(--space) * 4);
  /* 16px ~ */
  --space--6: calc(var(--space) * 6);
  /* 24px ~ */
  --space--8: calc(var(--space) * 8);
  /* 32px ~ */
  --space--12: calc(var(--space) * 12);
  /* 48px ~ */
  --space--16: calc(var(--space) * 16);
  /* 64px ~ */


  /*  カラートークン  */
  --color--brand:     #130E0D;
  --color--primary:   #EC4899;
  --color--secondary: #F9A8D4;
  --color--accent:    #8B5CF6;
  --color--bg--1:     #FDF2F8;
  --color--text--1:   #831843;
  --color--text--2:   #64748B;
  --color--text--3:   #FDF2F8;
  --color--splash:    rgb(0 0 0 / 0.15);
  --color--border:    #d4d8e0;
  --color--btn:       var(--color--primary);
  --color--focus:     #8B5CF6;

/* 半透明 + ブラー */
  --background-blur: rgba(131, 24, 67, 0.08);


  /*  ボーダー半径  */
  --radius--sm: 4px;
  --radius--md: 8px;
  --radius--lg: 16px;
  --radius--full: 9999px;

  /*  シャドウ  */
  --shadow-color: rgb(0 0 0 / 0.15);
  --shadow--sm: rgb(0 0 0 / 0.25);
  --shadow--md: rgb(0 0 0 / 0.35);
  --shadow--lg: rgb(0 0 0 / 0.45);
  --shadow--xl: rgb(0 0 0 / 0.55);

/* カードサイズ */
  --column-size: 300px;
  --card-column: repeat(auto-fill, minmax(min(100%, var(--column-size)), 1fr));
  /* ビューポートの幅が300px未満の場合、minmax()関数の最小値は親の幅の100%になる */
  /* ビューポートの幅が300px以上の場合、minmax()関数の最小値は300px */

  /* トランジション */
  --duration: 0.4s;

  /*  フォントファミリー
      フォールバック: site_design.performance.font_loading
  ---------------------------------------- */

  /* display: Playfair Display → Georgia（ブランドトーンとの乖離を最小化） */
  --font--display: "Playfair Display", Georgia, serif;

  /* heading: Playfair Display → Georgia */
  --font--heading: "Playfair Display", Georgia, serif;

  /* body: Inter → システムUIフォントスタック */
  --font--body: "Noto Sans JP", Arial, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /*  レイアウト
      出典: site_design.layout_policy.grid_system
  ---------------------------------------- */
  --container-max:    1200px;  /* コンテンツ最大幅 */
  --padding--desktop: 64px;    /* デスクトップ左右余白 */
  --padding--mobile:  24px;    /* モバイル左右余白 */
}


/* --------------------------------------
  HTML ベーススタイルをセット
-------------------------------------- */

body {
  width: 100%;

  color: var(--color--text--1);
  background-color: var(--color--bg--1);
  font-size: var(--font-size--base);
  /* background: url("../img/background.webp"); */
  font-family: var(--font--body);
  line-height: 1.5;
  text-autospace: normal;
  overflow-wrap: anywhere;  /* 長い英単語の突き抜け防止 */
  word-break: normal;
  line-break: strict;  /* 子音、」、。を行頭に来ないようにする */
  font-feature-settings: "palt";
  overflow-x: hidden;
}
/* ローディング中はスクロール禁止 */
body.is-loading {
  overflow-y: hidden;
}

h1 { font-size: var(--font-size--2xl); }
h2 { font-size: var(--font-size--xl); }
h3 { font-size: var(--font-size--lg); }
h4 { font-size: var(--font-size--md); }


li {
  list-style: none;
}


._common_ {
  max-inline-size: var(--container-max);
  margin-inline: auto;
}

._common_ hr {
  border-color: var(--color--border);
}

._spacer_ {
  block-size: var(--space--8);
}

._common_cluster_ {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5em;
}

._common_grid_ {
  display: grid;
  grid-template-columns: var(--card-column);
  gap: 1em;
}