/* --------------------------------------
	共通デザイントークン
-------------------------------------- */
:root {
  /*  フォントサイズ（流体タイポグラフィ）  */
  --font-size--base: clamp(1rem, 0.92rem + 0.4vw, 1.4rem);
  /* 400px ~ 1200px で 1rem(16px) ~ 1.4rem(22.4px) */
 --font-size--xxs: calc(var(--font-size--base) * 0.5);
  /* 8px ~ 11.2px */

  --font-size--xs: calc(var(--font-size--base) * 0.7);
  /* 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 */
  --font-size--4xl: calc(var(--font-size--base) * 3);
    /* 48px ~ 67.2px */


  /*  余白  */
  --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--text: #27415D;
  --color--text-accent: #14748b;
  --color--text-dot: #fffc3f;
  --color--bg--1: #fff;
  --color--bg--2: #F6F6F6;
  --color--bg--3: #EFF4FE;
  --color--bg--4: #E8F5FF;

  --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--text-marker--3: linear-gradient(90deg, #9ed0df80 100%, #9ed0df66 100%);

  --gradation-color--bg: linear-gradient(90deg, #57b4cb, #8cc2d4);

/* オーバーレイカラー */
  --color--overlay: rgba(255, 255, 255, .);

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

  /*  シャドウ  */
  --shadow-color: rgb(0 0 0 / 0.15);
  --shadow--sm: 1px 3px 6px var(--shadow-color);
  --shadow--md: 2px 8px 16px var(--shadow-color);
  --shadow--lg: 3px 13px 26px var(--shadow-color);
  --shadow--xl: 5px 21px 42px var(--shadow-color);

  /* 画像サイズ */
  --img-size--base: clamp(18.75rem, 16.25rem + 12.5vw, 31.25rem);

/* カードサイズ */
  --card-size--base: clamp(18.75rem, 16.25rem + 12.5vw, 31.25rem);
  /* 300　~　500px */
  --card-size--xs: calc(var(--card-size--base) * 0.5);
    /* 150　~　250px */
  --card-size--1: var(--card-size--base);
  /* 300　~　500px */
  --card-size--2: calc(var(--card-size--base) * 1.2);
  /* 360px　~　*/
  --card-size--3: calc(var(--card-size--base) * 1.4);
  /* 420px　~　*/
  --card-size--4: calc(var(--card-size--base) * 1.6);
  /* 480px　~　*/
  --card-size--5: calc(var(--card-size--base) * 1.8);
  /* 540px　~　*/


  /* ボタン */
  /*  ボタンカラーをベースに、color-mixで暗いシャドウカラーを作る  */
  --shadow-btn-color: color-mix(in srgb, var(--color-accent), #000 40%);

  /*  立体的に見せるためのハイライトシャドウ（上部の光沢）  */
  --highlight--btn-shadow: inset 0px 1px 4px 0px rgb(255 255 255 / 40%);

}

/* --------------------------------------
  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: "Helvetica Neue",
      Arial,
      "Hiragino Kaku Gothic ProN",
      "Hiragino Sans",
      "Noto Sans JP",
      sans-serif;
  line-height: 1.5;
  text-autospace: normal;
  overflow-wrap: anywhere;  /* 長い英単語の突き抜け防止 */
  word-break: normal;
  line-break: strict;  /* 子音、」、。を行頭に来ないようにする */
  font-feature-settings: "palt";
  text-wrap: pretty;

}
body.menu-open {
  position: fixed;
  overflow: hidden;
}


section:nth-child(n + 2) {
  margin-top: var(--space--12);
}
@media (width <= 620px) {
  section:nth-child(n + 2) {
    margin-top: var(--space--8);
  }
}

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;
} */


/* --------------------------------------
	デモ用のユーティリティクラス (本文でも使用）
-------------------------------------- */
._box_ {
  /* padding: var(--space--4); */
  /* border: solid 1px; */
  border-radius: 4px;
}

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

/* --------------------------------------
	デモ用のユーティリティクラス
-------------------------------------- */
._common_ {
  max-inline-size: 100%;
  margin-inline: auto;
  /* padding: 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;
}