/* ========================================
   Base Settings
   サイト全体の基本設定
======================================== */

:root {

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

  --color-bg: #ffffff;

  /* メインカラー：濃紺 */
  --color-main: #0d2a4d;

  /* サブカラー：やや薄いネイビー */
  --color-main-light: #23476f;

  /* アクセント：落ち着いたグレー・ベージュ */
  --color-accent: #8f877c;

  /* 本文 */
  --color-text: #222222;

  /* 補足テキスト */
  --color-text-sub: #6c6c6c;

  /* 見出し */
  --color-heading: #18253a;

  /* 薄い背景 */
  --color-bg-sub: #f7f7f5;

  /* 境界線 */
  --color-border: #d9dde2;

  /* 白文字 */
  --color-white: #ffffff;


  /* ==============================
     Typography
  ============================== */

  /* 本文 */
  --font-base: "Noto Sans JP", sans-serif;

  /* 見出し */
  --font-heading: "Noto Serif JP", serif;

  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-lg: 20px;
  --font-size-xl: 32px;
  --font-size-2xl: 48px;
  --font-size-3xl: 56px;

  --line-height-base: 1.9;
  --line-height-heading: 1.5;

  --letter-spacing-base: 0.05em;
  --letter-spacing-heading: 0.08em;


  /* ==============================
     Layout
  ============================== */

  /* メインコンテンツ幅 */
  --container-width: 1200px;

  /* 左右余白 */
  --container-padding: 32px;

  /* セクション間余白 */
  --section-space: 120px;

  /* 小さめのセクション余白 */
  --section-space-sm: 80px;


  /* ==============================
     UI
  ============================== */

  /* 今回は角丸をかなり控えめに */
  --radius-sm: 2px;
  --radius-md: 4px;

  /* 影もほぼ使わない */
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.04);

  --transition-base: 0.3s ease;

}


/* ========================================
   Body
======================================== */

body {
  background-color: var(--color-bg);
  color: var(--color-text);

  font-family: var(--font-base);
  font-size: var(--font-size-base);

  line-height: var(--line-height-base);
  letter-spacing: var(--letter-spacing-base);

  font-feature-settings: "palt";

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* ========================================
   Heading
======================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--color-heading);

  font-family: var(--font-heading);
  font-weight: 400;

  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-heading);
}


/* ========================================
   Text
======================================== */

p {
  line-height: var(--line-height-base);
}

small {
  font-size: var(--font-size-sm);
  color: var(--color-text-sub);
}


/* ========================================
   Link
======================================== */

a {
  color: inherit;

  transition:
    color var(--transition-base),
    opacity var(--transition-base);
}

a:visited {
  color: inherit;
}

a:hover {
  opacity: 0.65;
}


/* ========================================
   Image
======================================== */

img {
  width: 100%;
  height: auto;
}


/* ========================================
   Layout
======================================== */

.container {
  width: min(
    var(--container-width),
    calc(100% - var(--container-padding) * 2)
  );

  margin-inline: auto;
}

.section {
  padding-block: var(--section-space);
}

.section--small {
  padding-block: var(--section-space-sm);
}


/* ========================================
   Common Utility
======================================== */

/* 薄い背景のセクション */
.bg-sub {
  background-color: var(--color-bg-sub);
}

/* メインカラー背景 */
.bg-main {
  background-color: var(--color-main);
  color: var(--color-white);
}

/* 補足文字 */
.text-sub {
  color: var(--color-text-sub);
}


/* ========================================
   Accessibility
======================================== */

:focus-visible {
  outline: 2px solid var(--color-main);
  outline-offset: 3px;
}


/* ========================================
   Tablet
======================================== */

@media screen and (max-width: 1024px) {

  :root {
    --container-padding: 24px;

    --section-space: 96px;
    --section-space-sm: 64px;

    --font-size-2xl: 42px;
    --font-size-3xl: 48px;
  }

}


/* ========================================
   Smartphone
======================================== */

@media screen and (max-width: 768px) {

  :root {
    --container-padding: 20px;

    --section-space: 72px;
    --section-space-sm: 48px;

    --font-size-base: 15px;
    --font-size-lg: 18px;
    --font-size-xl: 26px;
    --font-size-2xl: 34px;
    --font-size-3xl: 40px;
  }

}

/* ========================================
   feCAPTCHA
======================================== */

  .grecaptcha-badge {
    visibility: hidden;
  }