/* --------------------------------------
	共通デザイントークン
-------------------------------------- */
: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.7);
  /* 11.2px ~ 15.7px */
  --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--text--1: #111827;
  --color--text--2: #fdfbf9;
  --color--text--3: #2a65ff;

  --color--bg--1: #fdfbf9;
  --color--bg--2: #1f1f1f;
  --color--bg--3: #F3F4F4;

  --color--border:  #d1d5db;
  --color--btn: #ea6b0a;
  --color--btn--border: var(--color--btn);
  --color--accent: #16a34a;

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

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

  /* ボタンの3D回転 */
  --cube-width: 300px;
  --cube-height: 4rem;

}


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

body {
  width: 100%;

  color: var(--color--text--1);
  background-color: var(--color--bg--1);
  font-size: var(--font-size--base);
  font-family: "Noto Sans JP",
      Arial,
      "Helvetica Neue",
      "Hiragino Kaku Gothic ProN",
      "Hiragino Sans",
      sans-serif;
  line-height: 1.7;
  text-autospace: normal;
  overflow-wrap: anywhere;  /* 長い英単語の突き抜け防止 */
  word-break: normal;
  line-break: strict;  /* 子音、」、。を行頭に来ないようにする */
  font-feature-settings: "palt";

  overflow-x: hidden;
  scrollbar-gutter : stable ;
}

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: 100%;
  margin-inline: auto;
}

.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;
}

/* -----------------------------------
 * 汎用コンポーネントクラス
 * --------------------------------- */
/* 画像ラッパー */
.img-frame {
  overflow: hidden;
}
:where(.img-frame) > img {
  object-fit: cover;
}