@charset "UTF-8";

/* ==========  Design Token  ========== */

:root {
  /* Color */
  --color-bg: #f5efe9;
  --color-primary: #31b751;
  --color-primary-dark: #35bb58;
  /* フォームパネルのグリーン。ノイズを重ねた状態でデザインの見た目になる。 */
  --color-primary-deep: #3ea155;
  --color-mint: #c6e7d6;
  --color-text: #1f2f5a;
  --color-navy: #1f2f5a;
  --color-navy-shadow: #ba906b;
  /* 「壁」セクションのボックス色 */
  --color-slate: #646979;
  --color-accent: #ff6a54;
  --color-white: #fff;

  /* Font */
  --font-jp: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  /* Adobe Fonts（kit: cil4hhc）Zen Maru Gothic */
  --font-display: "zen-maru-gothic", var(--font-jp);
  --font-en: "Inter", sans-serif;
  /* Adobe Fonts（kit: cil4hhc）丸々ゴシック ALR StdN */
  --font-fv: "maru-maru-gothic-alr-stdn", var(--font-display);
  /* Adobe Fonts 丸々ゴシック ASr StdN */
  --font-maru-asr: "maru-maru-gothic-asr-stdn", var(--font-fv);
  /* Adobe Fonts 百千鳥 */
  --font-catch: "momochidori", var(--font-fv);

  /* Layout */
  --inner-width: 1080px;
  --inner-padding: 16px;

  /*
   * SP のフォントサイズ補正。
   * 430px 以上は 0（現状サイズ） / 375px で -2px。PC では常に 0。
   */
  --sp-fs-adjust: 0px;

  /*
	 * ノイズタイル（白寄り）。
	 * feTurbulence の結果を feColorMatrix で「白 × 低アルファ」に変換し、
	 * 下地色を濁さず粒だけ重ねる。
	 */
  --bg-noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch' result='noise'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.28 0' in='noise'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");

  /* Z-index */
  --z-visual: 1;
  --z-cta: 2;
  --z-header: 100;
  --z-fixed-cta: 90;
  --z-modal: 200;
  --z-loader: 10000;
}

@media (max-width: 1023px) {
  :root {
    --sp-fs-adjust: clamp(-2px, calc(-2px + (100vw - 375px) * 2 / 55), 0px);
  }
}

/* ==========  Reset  ========== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 40px;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-jp);
  font-size: calc(16px + var(--sp-fs-adjust));
  font-weight: 500;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

ul,
ol {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: none;
  cursor: pointer;
}

h1,
h2,
h3,
h4 {
  font-size: inherit;
  font-weight: inherit;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}