/* Tsunagi Gothic Black — 見出し専用（SIL OFL, fonts/OFL.txt） */
@font-face {
  font-family: 'Tsunagi Gothic Black';
  src: url('../fonts/TsunagiGothic.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ==============================
   CSS Reset
   ============================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-base);
  font-weight: 500;
  color: var(--color-text);
  background-color: var(--color-bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

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

ul, ol {
  list-style: none;
}

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

/* ==============================
   Design Tokens (CSS Variables)
   ============================== */
:root {
  /* --- Colors --- */
  --color-primary:           #ffa54c;   /* Orange: CTA, accents */
  --color-secondary:         #64b9bc;   /* Teal: badges, borders */
  --color-text:              #4b4b4b;   /* Main body text */
  --color-text-sub:          #808080;   /* Sub / copyright text */
  --color-text-white:        #ffffff;
  --color-bg:                #fffdf9;   /* Page background (cream) */
  --color-bg-alt:            #fffaef;   /* Off-white */
  --color-bg-warm:           #fff3e4;   /* Warm beige section */
  --color-bg-teal:           #e7f5f6;   /* Light teal section */
  --color-bg-primary-15:     rgba(255, 165, 76, 0.15);
  --color-bg-primary-20:     rgba(255, 165, 76, 0.20);
  --color-border:            #64b9bc;
  --color-white:             #ffffff;
  --color-placeholder:       #d9d9d9;

  /* --- Fonts ---
     見出し: Tsunagi Gothic Black（自前 fonts/TsunagiGothic.ttf）→ 未到達時は M PLUS Rounded 1c
     本文など: Zen Maru Gothic / アクセント英字: Baloo Thambi 2（Google Fonts）
  */
  --font-base:    'Zen Maru Gothic', sans-serif;
  --font-display: 'Tsunagi Gothic Black', 'M PLUS Rounded 1c', sans-serif;
  --font-accent:  'Baloo Thambi 2', sans-serif;

  /* --- Font Sizes (SP base) --- */
  --text-xs:   10px;
  --text-sm:   12px;
  --text-base: 14px;
  --text-md:   16px;
  --text-18:   18px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  32px;
  --text-36:   36px;
  --text-3xl:  40px;
  --text-4xl:  44px;
  --text-48:   48px;
  --text-5xl:  56px;

  /* --- Spacing --- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  60px;
  --space-9:  64px;
  --space-10: 100px;

  /* --- Border Radius --- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-pill: 1000px;

  /* --- Shadows --- */
  --shadow-text: 4px 4px 4px rgba(0, 0, 0, 0.25);

  /* --- Container --- */
  --container-max:    1200px;
  --container-pad-sp: 16px;
  --container-pad-pc: 64px;
}

/* ==============================
   Layout Utilities
   ============================== */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad-sp);
}

@media (min-width: 768px) {
  .container {
    padding-inline: var(--container-pad-pc);
  }
}

/* ==============================
   Button
   ============================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  border-radius: var(--radius-pill);
  font-family: var(--font-base);
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.2s;
  border: none;
  text-decoration: none;
  line-height: normal;
}

.btn:hover {
  opacity: 0.8;
}

/* Primary (orange filled) */
.btn-primary {
  background: var(--color-primary);
  color: var(--color-text-white);
  font-size: var(--text-base);
  padding: 4px 16px;
}

/* Secondary (teal filled, header 2nd CTA per Figma) */
.btn-secondary {
  background: var(--color-secondary);
  color: var(--color-text-white);
  font-size: var(--text-base);
  padding: 4px 16px;
}

/* Ghost (outline, used in footer) */
.btn-ghost {
  background: var(--color-bg);
  color: var(--color-primary);
  font-size: var(--text-md);
  padding: 4px 16px;
}

.btn-ghost--with-chevron::after {
  content: '';
  width: 11px;
  height: 7px;
  background-color: currentColor;
  -webkit-mask-image: url('../img/icon-btn-chevron.svg');
  mask-image: url('../img/icon-btn-chevron.svg');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  transform: rotate(90deg);
  flex-shrink: 0;
}

.btn-ghost--with-chevron .btn__chevron {
  display: none;
}

/* Ghost (outline, used in footer) */
.btn-ghost--color-secondary  {
  color: var(--color-secondary);
}


@media (min-width: 768px) {
  .btn-primary,
  .btn-secondary,
  .btn-ghost {
    font-size: var(--text-md);
    padding: 12px 32px;
  }
}

/* ==============================
   Section Title
   ============================== */
.section-title {
  font-family: var(--font-display);
  font-weight: 900;
  text-align: center;
  line-height: 1.4;
  letter-spacing: 0.08em;
}

.section-title--orange { color: var(--color-primary); }
.section-title--teal   { color: var(--color-secondary); }
.section-title--white  { color: var(--color-text-white); }

/* ==============================
   Card
   ============================== */
.card {
  background: var(--color-white);
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* 4:3 image container */
.aspect-4-3 {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-md);
}

.aspect-4-3 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==============================
   Accessibility
   ============================== */
.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;
}

/* ==============================
   Scroll reveal (headings + cards)
   Used on HOME and inner pages. See docs/UI_GUIDE.md
   ============================== */
.js-fade-heading {
  opacity: 0;
  transition: opacity 0.6s ease;
}

.js-slide-card {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.js-fade-heading.is-visible,
.js-slide-card.is-visible {
  opacity: 1;
}

.js-slide-card.is-visible {
  transform: translateY(0);
}

/* Stagger (by order within parent) */
.js-slide-card:nth-child(2) { transition-delay: 0.08s; }
.js-slide-card:nth-child(3) { transition-delay: 0.16s; }
.js-slide-card:nth-child(4) { transition-delay: 0.24s; }
.js-slide-card:nth-child(5) { transition-delay: 0.32s; }

@media (prefers-reduced-motion: reduce) {
  .js-fade-heading,
  .js-slide-card {
    opacity: 1;
    transform: none;
    transition: none;
  }
}