/* ==========================================================
   ぷっくりシール帳 — 紹介ページ
   作りは たべごよみ（apps/tabegoyomi/support/style.css）と同じ。
   色・書体・飾りだけ、このアプリのアートディレクション
   （docs/設計/アートディレクション.md §2-2・§3）に差し替えた：
   点の入ったクリームの台紙、ココアの文字、押す場所はココアの塗りに厚み。
   色を持つのはシールだけ（UI に意味のない色を置かない）。
   ========================================================== */

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

:root {
  --paper:     #FFF6EE;  /* 地（点の台紙） */
  --paper-dot: #F5E0DB;  /* 台紙の点 */
  --desk:      #E9DDD4;  /* 机（ページの外） */
  --card:      #FFFDFA;  /* 札（厚紙） */
  --liner:     #FDFAFB;  /* 剥離紙 */
  --sunken:    #F5E8DE;  /* くぼみ */
  --ink:       #5B4038;  /* 文字・押す場所（ココア） */
  --on-ink:    #FFF6EE;  /* 押す場所の上の文字 */
  --ledge:     #3F2B25;  /* 押す場所の厚み */
  --sub:       #806257;  /* 補足の文字 */
  --outline:   #9A7C70;  /* 押せる枠 */
  --line:      #F0DCD0;  /* 罫 */
  --dim:       #A88F84;  /* 薄れ */

  --font-body: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", -apple-system,
               BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", sans-serif;
  --font-num:  "M PLUS 1 Code", ui-monospace, SFMono-Regular, Menlo, monospace;

  --radius: 18px;
  --header-h: 62px;
}

html { scroll-behavior: smooth; background: var(--paper); }

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.95;
  color: var(--ink);
  /* 点の入った台紙（アプリのページと同じ地） */
  background:
    radial-gradient(circle, var(--paper-dot) 1.6px, transparent 1.7px) 0 0 / 22px 22px,
    var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

html[lang="en"] body { line-height: 1.75; }

img { display: block; max-width: 100%; height: auto; }
a { color: var(--ink); text-underline-offset: 3px; }
.nb { white-space: nowrap; display: inline-block; }

.container { width: min(1080px, 100% - 40px); margin: 0 auto; }
.container-narrow { width: min(760px, 100% - 40px); }
.section { padding: 92px 0; position: relative; }

.section-label {
  font-size: 13px; font-weight: 700; letter-spacing: .18em; color: var(--sub);
  display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
}
.section-label::before { content: ""; width: 26px; height: 2px; background: var(--outline); border-radius: 2px; }

.section-title {
  font-weight: 800; letter-spacing: .03em;
  font-size: clamp(26px, 4.4vw, 40px); line-height: 1.5; margin-bottom: 44px;
  text-wrap: balance;
}

/* ========== ぷっくりシール（CSS で描く飾り） ==========
   画面写真はまだ出せないので、紹介の絵はシールそのものにする。
   .sticker に --c1 / --c2（樹脂の色）と形の種類を与える。
   ハイライトとくぼみの影で、押せそうな樹脂の厚みを出す。 */
.sticker-wrap { filter: drop-shadow(0 10px 14px rgba(91, 64, 56, .22)); line-height: 0; }
.sticker {
  --c1: #9BD8F0; --c2: #4FA8D8;
  width: 100%; aspect-ratio: 1 / 1; border-radius: 50%;
  background:
    radial-gradient(ellipse 26% 18% at 32% 24%, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 70%),
    radial-gradient(ellipse 40% 30% at 70% 80%, rgba(255, 255, 255, .34), rgba(255, 255, 255, 0) 70%),
    radial-gradient(circle at 70% 76%, rgba(63, 43, 37, .22), rgba(63, 43, 37, 0) 58%),
    linear-gradient(155deg, var(--c1) 0%, var(--c2) 100%);
}
/* 形は SVG の覆い（mask）で抜く。大きさに合わせて伸びるので、どの幅でも崩れない */
.st-heart {
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M50 92C8 62 2 34 18 18 32 4 46 10 50 22 54 10 68 4 82 18 98 34 92 62 50 92Z" fill="black"/></svg>');
          mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M50 92C8 62 2 34 18 18 32 4 46 10 50 22 54 10 68 4 82 18 98 34 92 62 50 92Z" fill="black"/></svg>');
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.st-star   { clip-path: polygon(50% 2%, 62% 36%, 98% 36%, 69% 58%, 80% 94%, 50% 72%, 20% 94%, 31% 58%, 2% 36%, 38% 36%); }
.st-square { border-radius: 30%; }
.st-drop   { border-radius: 50% 50% 50% 14%; }

/* 剥離紙のシート（シールが並んだ台紙） */
.sheet {
  background:
    linear-gradient(118deg, rgba(255, 255, 255, .85) 0 30%, rgba(236, 240, 255, .55) 44%, rgba(255, 240, 246, .55) 58%, rgba(255, 255, 255, .85) 72%),
    var(--liner);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px; display: grid; gap: 16px;
  box-shadow: 0 10px 26px rgba(91, 64, 56, .10);
}
.sheet-3 { grid-template-columns: repeat(3, 1fr); }
.sheet-2 { grid-template-columns: repeat(2, 1fr); }

/* ========== ヘッダー ========== */
.site-header {
  position: sticky; top: 0; z-index: 50; height: var(--header-h);
  background: rgba(255, 246, 238, .93);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header.is-scrolled { box-shadow: 0 2px 16px rgba(91, 64, 56, .09); }
.header-inner {
  width: min(1080px, 100% - 32px); margin: 0 auto; height: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); min-width: 0; }
.brand img { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--line); }
.brand-name { font-weight: 800; font-size: 19px; letter-spacing: .06em; }

.lang-toggle { display: flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: var(--card); }
.lang-btn {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: .08em;
  color: var(--sub); padding: 7px 13px; line-height: 1;
}
.lang-btn[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); }

/* ========== ヒーロー ========== */
.hero { position: relative; padding: 68px 0 84px; overflow: hidden; }
.hero-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(560px 420px at 78% 24%, rgba(255, 255, 255, .85), transparent 70%),
    radial-gradient(420px 380px at 6% 92%, rgba(233, 221, 212, .55), transparent 70%);
  mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
}
.hero-inner {
  position: relative; z-index: 1;
  width: min(1080px, 100% - 40px); margin: 0 auto;
  display: grid; grid-template-columns: 1.08fr .92fr; gap: 48px; align-items: center;
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; letter-spacing: .12em; color: var(--sub);
  border: 1px solid var(--line); background: var(--card); border-radius: 999px;
  padding: 6px 14px; margin-bottom: 20px;
}
.hero-title { font-weight: 800; letter-spacing: .03em; font-size: clamp(30px, 5.6vw, 50px); line-height: 1.4; margin-bottom: 20px; }
.hero-sub { color: var(--sub); font-size: 15.5px; margin-bottom: 26px; }
.hero-note { margin-top: 14px; font-size: 13px; color: var(--dim); line-height: 1.8; }

/* ヒーローの絵：剥離紙のシートに並んだシール */
.hero-art { position: relative; }
.hero-art .sheet { grid-template-columns: repeat(3, 1fr); padding: 26px; }
.hero-art .sticker-wrap:nth-child(2) { transform: translateY(-10px) rotate(-6deg); }
.hero-art .sticker-wrap:nth-child(4) { transform: translateY(8px) rotate(5deg); }
.hero-art .sticker-wrap:nth-child(6) { transform: translateY(-6px) rotate(8deg); }

/* App Store の札（配信の前は押せない札のまま） */
.store-badges { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.store-badges-center { justify-content: center; }
.store-badge {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
  background: var(--ink); color: var(--on-ink); border-radius: 14px; padding: 11px 20px;
  box-shadow: 0 3px 0 var(--ledge);
  transition: transform .14s ease, box-shadow .14s ease;
}
a.store-badge:active { transform: translateY(3px); box-shadow: 0 0 0 var(--ledge); }
.badge-text { display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
.badge-text small { font-size: 10px; opacity: .8; letter-spacing: .04em; }
.badge-text strong { font-size: 17px; font-weight: 700; letter-spacing: .02em; }
/* 配信の前：押せない見た目にする（App Store の ID が決まったら
   index.html の <span class="store-badge is-soon"> を <a> に替える） */
.store-badge.is-soon { background: var(--sunken); color: var(--sub); box-shadow: none; border: 1px dashed var(--outline); }

/* ========== できること ========== */
.features { background: var(--desk); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.feature-row {
  display: grid; grid-template-columns: 300px 1fr; gap: 42px; align-items: center;
  padding: 34px 0; border-bottom: 1px dashed var(--outline);
}
.feature-row:last-of-type { border-bottom: 0; }
.feature-row:nth-child(odd) { grid-template-columns: 1fr 300px; }  /* 1行おきに絵を右へ（文章の幅は変えない） */
.feature-row:nth-child(odd) .feature-media { order: 2; }
.feature-row:nth-child(odd) .feature-copy { order: 1; }
/* シートは大きくしすぎない（文章と釣り合う大きさに留める） */
.feature-media { max-width: 300px; margin: 0 auto; width: 100%; }
.feature-tag {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .12em;
  padding: 4px 12px; margin-bottom: 12px; border: 1px solid var(--outline);
  border-radius: 999px; color: var(--sub); background: var(--card);
}
.feature-copy h3 { font-size: clamp(19px, 2.7vw, 24px); font-weight: 800; letter-spacing: .02em; margin-bottom: 10px; line-height: 1.55; }
.feature-copy p { color: var(--sub); font-size: 15px; }

.feature-extra { margin-top: 40px; }
.feature-extra h3 { font-size: 17px; letter-spacing: .08em; margin-bottom: 14px; color: var(--sub); }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.chips li {
  font-size: 13.5px; font-weight: 500; color: var(--ink);
  background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 7px 15px;
}

/* ========== はじめかた ========== */
.steps { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.step {
  display: grid; grid-template-columns: 46px 1fr; gap: 18px; align-items: start;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px;
}
.step-num {
  display: flex; align-items: center; justify-content: center; margin-top: 2px;
  width: 42px; height: 42px; border-radius: 50%;
  border: 2px solid var(--outline); color: var(--sub);
  font-family: var(--font-num); font-weight: 700; font-size: 18px; line-height: 1;
}
.step-body h3 { font-size: 18px; font-weight: 700; letter-spacing: .02em; margin-bottom: 6px; }
.step-body p { color: var(--sub); font-size: 14.5px; }

/* ========== 約束（お金・交換・年齢） ========== */
.promise { background: var(--desk); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.promise-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.promise-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 22px 24px; position: relative;
}
/* 上辺のミシン目（台紙の切り離し） */
.promise-card::before {
  content: ""; position: absolute; left: 14px; right: 14px; top: 10px; height: 1px;
  background-image: linear-gradient(90deg, var(--line) 50%, transparent 0);
  background-size: 7px 1px; background-repeat: repeat-x;
}
.promise-card h3 { font-size: 17.5px; font-weight: 700; margin-bottom: 8px; letter-spacing: .02em; }
.promise-card p { font-size: 14.5px; color: var(--sub); line-height: 1.85; }

/* ========== FAQ ========== */
.faq-list { display: flex; flex-direction: column; gap: 10px; }
.faq-item { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px;
  appearance: none; border: 0; background: transparent; cursor: pointer; text-align: left;
  font-family: var(--font-body); font-size: 15.5px; font-weight: 700; color: var(--ink);
  padding: 18px 20px; line-height: 1.7;
}
.faq-arrow { flex: none; width: 10px; height: 10px; border-right: 2px solid var(--outline); border-bottom: 2px solid var(--outline); transform: rotate(45deg); transition: transform .2s ease; margin-top: -4px; }
.faq-q[aria-expanded="true"] .faq-arrow { transform: rotate(-135deg); margin-top: 4px; }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .28s ease; }
.faq-a p { padding: 0 20px 18px; color: var(--sub); font-size: 14.5px; }

.contact { margin-top: 30px; background: var(--sunken); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 26px; }
.contact h3 { font-size: 17.5px; font-weight: 700; letter-spacing: .02em; margin-bottom: 8px; }
.contact p { font-size: 14.5px; color: var(--sub); }
.contact a { font-weight: 700; }

/* ========== 最後のひとこと ========== */
.cta { text-align: center; position: relative; overflow: hidden; background: var(--ink); color: var(--on-ink); }
.cta-bg {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 246, 238, .10) 1.6px, transparent 1.7px) 0 0 / 22px 22px;
}
.cta .container { position: relative; z-index: 1; }
.cta-title { font-size: clamp(24px, 4.2vw, 36px); font-weight: 800; letter-spacing: .04em; line-height: 1.5; margin-bottom: 12px; }
.cta-sub { color: rgba(255, 246, 238, .76); font-size: 15px; margin-bottom: 28px; }
.cta .store-badge.is-soon { background: rgba(255, 246, 238, .10); color: rgba(255, 246, 238, .82); border-color: rgba(255, 246, 238, .42); }

/* ========== フッター ========== */
.site-footer { padding: 40px 0 54px; border-top: 1px solid var(--line); }
.footer-links { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 14px; }
.footer-links a { font-size: 14px; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--outline); }
.footer-links a:hover { color: var(--sub); }
.footer-disclaimer { font-size: 12.5px; color: var(--dim); line-height: 1.85; margin-bottom: 10px; }
.footer-copy { font-size: 12.5px; color: var(--dim); }

/* ========== 出現アニメ ========== */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ========== 画面幅ごとの調整 ========== */
@media (max-width: 900px) {
  .section { padding: 72px 0; }
  .hero-inner { grid-template-columns: 1fr; gap: 34px; }
  /* width を入れないと、左右の auto の余白が効いて中身の大きさ（0）まで縮む */
  .hero-art { width: 100%; max-width: 420px; margin: 0 auto; }
  .promise-grid { grid-template-columns: 1fr; }
  .feature-row, .feature-row:nth-child(odd) { grid-template-columns: 1fr; gap: 22px; padding: 28px 0; }
  .feature-row:nth-child(odd) .feature-media, .feature-row:nth-child(odd) .feature-copy { order: initial; }
  .feature-media { max-width: 300px; }
}

@media (max-width: 640px) {
  body { font-size: 15.5px; }
  .section { padding: 56px 0; }
  .container, .container-narrow { width: min(100% - 32px, 560px); }
  .section-title { margin-bottom: 30px; }
  .step { grid-template-columns: 38px 1fr; gap: 14px; padding: 18px 18px; }
  .step-num { width: 36px; height: 36px; font-size: 16px; }
  .faq-q { font-size: 15px; padding: 16px 16px; }
  .cta-sub { margin-bottom: 22px; }
  .hero-art .sheet { padding: 18px; gap: 12px; }
}

/* 狭い画面では、まとまりで折り返しを止めるのをやめる。
   止めたままだと「押すと、ぷくっと凹む。」の1行が画面より長くなり、右へはみ出す */
@media (max-width: 420px) {
  /* 「押すと、ぷくっと凹む。」の1行が画面に収まる大きさにし、収まらないときは折り返させる */
  .hero-title { font-size: clamp(25px, 7vw, 50px); }
  .hero-title .nb { white-space: normal; }
}

@media (max-width: 400px) {
  .container, .container-narrow { width: calc(100% - 24px); }
  .brand-name { font-size: 17px; }
  .hero { padding: 48px 0 64px; }
}

/* ========== 夜の配色（アートディレクション §2-2 のダークの列） ========== */
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #221A17; --paper-dot: #342925; --desk: #120D0B; --card: #2E2420;
    --liner: #2B2427; --sunken: #1A1411;
    --ink: #F7ECE4; --on-ink: #3A2A24; --ledge: #BFA898;
    --sub: #C4AEA2; --outline: #8A766C; --line: #433530; --dim: #7A655B;
  }
  .site-header { background: rgba(34, 26, 23, .93); }
  .lang-btn[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); }
  .hero-bg {
    background:
      radial-gradient(560px 420px at 78% 24%, rgba(247, 236, 228, .07), transparent 70%),
      radial-gradient(420px 380px at 6% 92%, rgba(247, 236, 228, .04), transparent 70%);
  }
  .sheet {
    background:
      linear-gradient(118deg, rgba(255, 255, 255, .10) 0 30%, rgba(190, 210, 255, .10) 44%, rgba(255, 200, 220, .10) 58%, rgba(255, 255, 255, .10) 72%),
      var(--liner);
  }
  .store-badge { background: var(--ink); color: var(--on-ink); }
  .cta { background: #120D0B; color: #F7ECE4; }
  .cta-sub { color: rgba(247, 236, 228, .76); }
}