@charset "UTF-8";
/* ==========================================================================
   Foundation — design tokens / reset / base
   ========================================================================== */

:root {
  /* color */
  --color-primary: #ef8033;
  --color-primary-dark: #d8641c;
  --color-primary-pale: #fdeedd;
  --color-secondary: #3e9b77;
  --color-secondary-dark: #2f7d5f;
  --color-secondary-pale: #e9f4ee;
  --color-navy: #35566b;
  --color-ink: #33302c;
  --color-text: #4a443f;
  --color-muted: #8d857d;
  --color-line: #e8e0d3;
  --color-cream: #fff6e9;
  --color-beige: #f7f2e9;
  --color-white: #fff;
  --color-footer: #2f4858;

  /* typography */
  --font-family-base: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-family-en: "Inter", "Helvetica Neue", Arial, sans-serif;

  /* shape */
  --radius-s: 10px;
  --radius-m: 18px;
  --radius-l: 28px;
  --shadow-card: 0 12px 32px rgba(51, 48, 44, 0.1);
  --shadow-hover: 0 18px 40px rgba(51, 48, 44, 0.16);

  /* layout */
  --header-height: 76px;
  --container: 1120px;

  /* motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* texture — 面に紙のような質感を足す共通グレイン
     画像URLはCSSファイルごとの相対パスが変わるため各ルールに直接記述する */
  --texture-grain-size: 200px 200px;
}

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

html {
  scroll-behavior: smooth;
}

html,
body {
  overflow-x: clip;
}

body {
  margin: 0;
  padding-top: var(--header-height);
  font-family: var(--font-family-base);
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.03em;
  color: var(--color-text);
  background-color: var(--color-white);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, p, ul, ol, figure, address {
  margin: 0;
  padding: 0;
}

ul, ol {
  list-style: none;
}

address {
  font-style: normal;
}

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

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

button {
  padding: 0;
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

:focus-visible {
  outline: 3px solid rgba(239, 128, 51, 0.6);
  outline-offset: 2px;
  border-radius: 4px;
}

/* container ------------------------------------------------------------- */
.l-container {
  max-width: calc(var(--container) + 40px);
  margin-inline: auto;
  padding-inline: 20px;
}

@media (min-width: 751px) {
  .l-container {
    max-width: calc(var(--container) + 80px);
    padding-inline: 40px;
  }
}

/* utility ----------------------------------------------------------------- */
@media (max-width: 750px) {
  .u-pc-only {
    display: none;
  }
}

@media (min-width: 751px) {
  .u-sp-only {
    display: none;
  }
}

/* scroll reveal ---------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .js-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  }

  .js-reveal.is-inview {
    opacity: 1;
    transform: none;
  }
}

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

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}