:root {
  /* 基本単位 */
  --base-unit: 8px;
  --half-unit: 4px;

  /* 余白 ----------------------------------------------------------------- */
  /* 倍数 */
  --spacing-1: calc(var(--base-unit) * 1);
  /* 8px */
  --spacing-2: calc(var(--base-unit) * 2);
  /* 16px */
  --spacing-3: calc(var(--base-unit) * 3);
  /* 24px */
  --spacing-4: calc(var(--base-unit) * 4);
  /* 32px */
  --spacing-5: calc(var(--base-unit) * 5);
  /* 40px */
  --spacing-6: calc(var(--base-unit) * 6);
  /* 48px */
  --spacing-7: calc(var(--base-unit) * 7);
  /* 56px */
  --spacing-8: calc(var(--base-unit) * 8);
  /* 64px */
  --spacing-9: calc(var(--base-unit) * 9);
  /* 72px */
  --spacing-10: calc(var(--base-unit) * 10);
  /* 80px */
  --spacing-11: calc(var(--base-unit) * 11);
  /* 88px */
  --spacing-12: calc(var(--base-unit) * 12);
  /* 96px */
  --spacing-15: calc(var(--base-unit) * 15);
  /* 120px */
  --spacing-16: calc(var(--base-unit) * 16);
  /* 128px */
  --spacing-17: calc(var(--base-unit) * 17);
  /* 136px */
  --spacing-18: calc(var(--base-unit) * 18);
  /* 144px */
  --spacing-19: calc(var(--base-unit) * 19);
  /* 152px */
  --spacing-25: calc(var(--base-unit) * 25);
  /* 200px */

  /* 特殊ケース */
  --spacing-min: 1px;
  --spacing-min-2: 2px;
  --spacing-half: var(--half-unit);
  --spacing-1_5: calc(var(--half-unit) * 3);
  --spacing-2_5: calc(var(--half-unit) * 5);
  --spacing-37_5: calc(var(--base-unit) * 37.5);

  /* 文字 ----------------------------------------------------------------- */
  /* 基本フォント定義 */
  --font-google-symbols: "Material Symbols Outlined";
  --font-serif-ja: "Shippori Mincho", serif;
  --font-serif-en: "Josefin Slab", serif;
  --font-gothic-ja: "Noto Sans JP", sans-serif;
  --font-gothic-en: "Oswald", sans-serif;
  --font-logo: "Kaisei Opti", serif;
  --font-color: "Delius", "Inter", "Noto Sans JP", cursive, sans-serif;
  --font-glitch: "Orbitron", "Noto Sans JP", sans-serif;
  --font-cursive: "Allura", "Satisfy", "Noto Sans JP", sans-serif;

  /* Font Weight */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  /* 1rem = 10px 基準 */
  font-size: 62.5%;

  /* Font Size (px) */
  --font-size-10: 1rem;
  --font-size-12: 1.2rem;
  --font-size-14: 1.4rem;
  --font-size-16: 1.6rem;
  --font-size-18: 1.8rem;
  --font-size-20: 2rem;
  --font-size-24: 2.4rem;
  --font-size-28: 2.8rem;
  --font-size-32: 3.2rem;
  --font-size-36: 3.6rem;
  --font-size-48: 4.8rem;
  --font-size-64: 6.4rem;
  --font-size-72: 7.2rem;

  /* Line Height (%) */
  --line-height-100: 1;
  /* 100% */
  --line-height-120: 1.2;
  /* 120% (Default) */
  --line-height-140: 1.4;
  /* 140% */
  --line-height-150: 1.5;
  /* 150% */
  --line-height-180: 1.8;
  /* 180% */
  --line-height-200: 2;
  /* 200% */

  /* Default styles */
  --font-size-default: var(--font-size-16);
  --line-height-default: var(--line-height-150);

  /* ボーダー ----------------------------------------------------------------- */
  /* Border Widths */
  --border-w-min: 1px;
  --border-w-default: 2px;

  /* Border Radius with Scale */
  --radius-1: 1px;
  --radius-2: 2px;
  --radius-4: 4px;
  --radius-8: 8px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-32: 32px;
  --radius-40: 40px;
  --radius-64: 64px;
  --radius-full: 9999px;

  --border-primary: var(--theme-color-fg);
  --border-secondary: var(--gray-50);
  --border-tertiary: var(--gray-20);

  /* 影 ----------------------------------------------------------------- */
  /* Shadow control variables */
  --shadow-enabled: 1;
  --shadow-elevation: 2;
  --shadow-opacity: calc(0.06 + (var(--shadow-elevation) * 0.04));

  /* Shadow variables */
  --shadow-subtle: 0px calc(1px * var(--shadow-enabled))
    calc(3px * var(--shadow-enabled)) 0px
    rgba(0, 0, 0, calc(var(--shadow-opacity) * 0.5));
  --shadow-normal: 0px calc(2px * var(--shadow-enabled))
    calc(8px * var(--shadow-enabled)) 0px
    rgba(0, 0, 0, calc(var(--shadow-opacity) * 0.66));
  --shadow-medium: 0px calc(4px * var(--shadow-enabled))
    calc(16px * var(--shadow-enabled)) 0px rgba(0, 0, 0, var(--shadow-opacity));
  --shadow-large: 0px calc(8px * var(--shadow-enabled))
    calc(32px * var(--shadow-enabled)) 0px
    rgba(0, 0, 0, calc(var(--shadow-opacity) * 1.33));
  --shadow-wide-weak: 0px calc(1px * var(--shadow-enabled))
    calc(12px * var(--shadow-enabled)) 0px
    rgba(0, 0, 0, calc(var(--shadow-opacity) * 0.5));
  --shadow-for-dark-text: 0px 1px 4px 0px #ffffff;

  /* 色 ----------------------------------------------------------------- */

  /* === HEX Colors === */

  /* Base Colors (HEX) */
  --non-colored-white: #ffffff;
  --non-colored-black: #000000;

  /* Grayscale (HEX) */
  --gray-10: #fafafa;
  --gray-20: #f5f5f5;
  --gray-30: #eeeeee;
  --gray-40: #e0e0e0;
  --gray-50: #bdbdbd;
  --gray-60: #9e9e9e;
  --gray-70: #757575;
  --gray-80: #616161;
  --gray-90: #424242;

  /* Theme Colors (HEX) */
  --theme-color-font-navy: #172c6d;


  --theme-color-red-primary: #ff1a1a;
  --theme-color-red-accent: #33ff99;
  --theme-color-blue-primary: #1738ff;
  --theme-color-blue-accent: #39ff14;
  --theme-color-yellow-highlight: #ffe924;
  --theme-color-violet-primary: #e46cff;
  --theme-color-violet-accent: #3dffe6;
  --theme-color-aqua-primary: #5ff2ea;
  --theme-color-aqua-accent: #d4ff1f;
  --theme-color-orange-primary: #ff6733;
  --theme-color-orange-accent: #ffd633;
  --theme-color-yellow-primary: #ffe924;
  --theme-color-yellow-accent: #ff3a1f;

  /* === RGB Colors === */

  /* Base RGB Values */
  --colored-black-rgb: 14, 14, 14;
  --colored-white-rgb: 245, 245, 245;
  --red-primary-rgb: 255, 26, 26;
  --blue-primary-rgb: 23, 56, 255;
  --violet-primary-rgb: 228, 108, 255;
  --aqua-primary-rgb: 95, 242, 234;
  --orange-primary-rgb: 255, 103, 51;

  /* Solid RGB Colors */
  --colored-black: rgb(var(--colored-black-rgb));
  --colored-white: rgb(var(--colored-white-rgb));

  /* Transparent Colors - Black */
  --black-transparent-60: rgba(var(--colored-black-rgb), 0.6);
  --black-transparent-40: rgba(var(--colored-black-rgb), 0.4);
  --black-transparent-20: rgba(var(--colored-black-rgb), 0.2);
  --black-transparent-10: rgba(var(--colored-black-rgb), 0.1);

  /* Transparent Colors - White */
  --white-transparent-95: rgba(var(--colored-white-rgb), 0.95);
  --white-transparent-90: rgba(var(--colored-white-rgb), 0.9);
  --white-transparent-70: rgba(var(--colored-white-rgb), 0.7);
  --white-transparent-50: rgba(var(--colored-white-rgb), 0.5);
  --white-transparent-30: rgba(var(--colored-white-rgb), 0.3);
  --white-transparent-10: rgba(var(--colored-white-rgb), 0.1);

  /* Transparent Colors - Theme */
  --red-transparent-20: rgba(var(--red-primary-rgb), 0.2);
  --blue-transparent-20: rgba(var(--blue-primary-rgb), 0.2);
  --violet-transparent-20: rgba(var(--violet-primary-rgb), 0.2);
  --violet-transparent-50: rgba(var(--violet-primary-rgb), 0.5);
  --aqua-transparent-20: rgba(var(--aqua-primary-rgb), 0.2);
  --aqua-transparent-50: rgba(var(--aqua-primary-rgb), 0.5);
  --orange-transparent-20: rgba(var(--orange-primary-rgb), 0.2);
  --orange-transparent-50: rgba(var(--orange-primary-rgb), 0.5);

  /* === Shadow Effects === */

  /* Theme Color Shadows */
  --theme-color-red-shadow: 0 0 20px var(--theme-color-red-primary),
    inset 0 0 20px var(--red-transparent-20);
  --theme-color-blue-shadow: 0 0 20px var(--theme-color-blue-primary),
    inset 0 0 20px var(--blue-transparent-20);

  /* === Semantic Colors === */

  /* Theme Semantic Colors */
  --theme-color-fg: var(--colored-black);
  --theme-color-surface: var(--colored-white);
  --theme-color-muted: var(--gray-70);
  --theme-color-fg-inverse: var(--colored-white);
  --theme-color-surface-inverse: var(--colored-black);
  --theme-color-muted-inverse: var(--gray-30);

  /* Status Colors */
  --success-color: var(--theme-color-blue-primary);
  --error-color: var(--theme-color-red-primary);
  --caution-color: var(--theme-color-red-primary);
  --warning-color: var(--theme-color-yellow-highlight);

  /* ルール ----------------------------------------------------------------- */
  /* 今回はなし */

  /* インデックス */
  --layer-a: 10;
  --layer-b: 20;
  --layer-c: 30;
  --layer-d: 40;
  --layer-max: 1000;

  /* トランジション */
  --transition-fast: 0.2s ease;
  --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --transition-color: color 0.8s ease, background-color 0.8s ease,
    border-color 0.8s ease, box-shadow 0.8s ease;

  /* レイアウト */
  --header-height: 100px;/* ５６px以下はNG */
  --site-max-width: 1400px;
  --page-container-width: 800px;
  --content-max-width: 1200px;
  --section-inner-size-l: 1000px;
  --section-inner-size-m: 800px;
  --section-inner-size-s: 600px;
  --main-min-width: 304px;
  --main-max-width: 344px;

  /* UI Components */
  --icon-btn-size: 32px;
}

/***********************************************************************************/
/* HTMLタグ                                                                        */
/***********************************************************************************/

html {
  scroll-behavior: smooth;
}

body {
  max-width: 100%;
  font-family: var(--font-gothic-ja);
  font-size: var(--font-size-default);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-default);
  font-optical-sizing: auto;
  font-style: normal;
  text-align: justify;
  letter-spacing: 0;
  color: var(--theme-color-fg);
  background-color: var(--colored-white);
  accent-color: var(--theme-color-red-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--theme-color-fg);
}

/* a {
  color: var(--non-colored-black);
  text-decoration: none;
  transition: all var(--transition-fast);

  &:hover {
    color: var(--theme-color-red-primary);
  }

  &:active {
    color: var(--theme-color-red-primary);
  }
} */

img {
  width: 100%;
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

input,
select,
textarea {
  padding: var(--spacing-half) var(--spacing-1);
  border: var(--border-w-default) solid var(--border-secondary);
  border-radius: var(--radius-4);
  color: var(--theme-color-fg);
  background-color: var(--gray-30);
  transition: all var(--transition-smooth);

  &:focus {
    border-color: var(--theme-color-red-primary);
    box-shadow: var(--shadow-subtle);
  }
}

button {
  border: none;
  background: transparent;
}

/* スクロールバーのスタイリング */
::-webkit-scrollbar {
  width: var(--spacing-1);
  border-radius: var(--radius-8);
}

::-webkit-scrollbar-track {
  background-color: var(--gray-20);
}

::-webkit-scrollbar-thumb {
  background-color: var(--gray-50);
  border-radius: var(--radius-8);

  &:hover {
    background-color: var(--gray-60);
  }
}

/***********************************************************************************/
/* 汎用                                                                            */
/***********************************************************************************/
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

/* スクリーンリーダー専用 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

span,
strong {
  /* 改行 */
  &.br {
    display: block;
  }

  /* SEO対策文字付与 */
  &.add-char {
    &.before {
      &::before {
        content: attr(data-char);
      }
    }

    &.after {
      &::after {
        content: attr(data-char);
      }
    }
  }
}
/* span.add-char.before::before {
  content: attr(data-char);
} */