/* ==========================================================================
   NUKUmomi 共通ベーススタイル
   モバイルファースト設計
   ========================================================================== */

/* ---------- Variables ---------- */
:root {
  /* 白 */
  --color-white: #FFFFFF;

  /* 背景色 */
  --color-bg-main: #EDE5F5;
  --color-bg-pink-light: #FFF8FA;
  --color-bg-pink: #FFEAFA;
  --color-bg-label: #FCA7C1;
  --color-bg-gray: #F4F4F4;

  /* 画像上テキスト */
  --color-img-text-blue: #52597F;
  --color-img-text-purple: #6B2CAA;
  --color-img-text-pink: #EA9AD5;

  /* ボーダー */
  --color-border-dark: #222222;
  --color-border-light: #D3D3D3;
  --color-detail-bg: #F1F1F1;
  --color-btn-yellow: #FFFFB6;
  --color-purple-light: #BDA3D8;

  /* 文字色 */
  --color-text: #3C3C3C;
  --color-primary: #8968AB;
  --color-secondary: #F36690;

  /* 装飾色 */
  --color-purple-pale: #EDE5F5;
  --color-pink-pale: #FFEAFA;
  --color-purple-bright: #C8A7E9;
  --color-pink-bright: #E1A4D1;

  /* フォント */
  --font-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  --font-mincho: "Zen Old Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif;

  /* レイアウト */
  --container-width: 1100px;
  --container-width-l: 1440px;
  --container-padding: 20px;
}

/* ---------- Base ---------- */
html {
  overflow-x: hidden;
}

body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-white);
  overflow-x: hidden;
}

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

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

/* ---------- Container ---------- */
.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

/* ---------- Utilities ---------- */
.sp-only { display: inline; }
.pc-only { display: none; }

@media (min-width: 769px) {
  .sp-only { display: none; }
  .pc-only { display: inline; }
}

.section-title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(24px, calc(17.65px + 1.87vw), 32px);
  text-align: center;
  color: var(--color-primary);
  margin-bottom: clamp(24px, calc(17.65px + 1.87vw), 32px);
}

@media (min-width: 769px) {
  .section-title {
    font-size: clamp(28px, calc(14.64px + 1.74vw), 48px);
    margin-bottom: clamp(32px, calc(26.65px + 0.70vw), 40px);
  }
}

.body-text {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(14px, calc(12.41px + 0.47vw), 16px);
  line-height: 1.6;
  color: var(--color-text);
}

.note-text {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(11px, calc(8.62px + 0.70vw), 14px);
  color: var(--color-text);
}

/* ---------- Fade-in Animation ---------- */
.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease, background-position 0.5s ease, color 0.3s ease, border-color 0.3s ease;
}

.fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}