/* --------------------------------------
	共通デザイントークン
-------------------------------------- */
: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--splash: rgb(0 0 0 / 0.15);
  --color--text--1: #fffefc;
  --color--text--2: #1a1a1a;

  --color--bg--1: #fdfbf9;
  --color--bg--2: #1f1f1f;
  --color--border: #d4d8e0;
  --color--btn: #2a65ff;
  --color--focus: #2563eb;
  --color-accent: #f97316;

  /*  グラデーションカラートークン  */
  --gradation-color--text: linear-gradient(90deg, #0599b2, #27415D);
  --gradation--text-marker--1: linear-gradient(90deg, #ffe10080 0%, #fff6b580 100%);
  --gradation--text-marker--2: linear-gradient(90deg, #b3c9e280 0%, #cddaeb80 100%);
  --gradation-color--bg: linear-gradient(90deg, #cfcfcf, #7e7e7e);

  /*  ボーダー半径  */
  --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;

}


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

body {
  width: 100%;

  color: var(--color--text);
  background-color: var(--color--bg--1);
  font-size: var(--font-size--base);
  /* background: url("../img/background.webp"); */
  font-family: "Noto Sans JP",
      Arial,
      "Helvetica Neue",
      "Hiragino Kaku Gothic ProN",
      "Hiragino Sans",
      sans-serif;
  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);
}

/* フォーカスリングの可視化 */
/* :focus-visible {
  outline: 2px solid var(--color--focus);
  outline-offset: 2px;
} */

li {
  list-style: none;
}



/* ._flow_> * + * {
  margin-block-start: 1.5em;
} */

._common_ {
  max-inline-size: 100%;
  margin-inline: auto;
  /* padding: var(--space--8); */
  /* margin: 0 var(--space--8); */
}

._common_ hr {
  border-style: dashed;
  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_ {
  --column-size: 300px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--column-size)), 1fr));
  gap: 1em;
}