:root {
    --cream: #F5F1EA;
    --band: #EFE9DE;
    --text: #1C1C1E;
    --muted: #6B6862;
    --accent: #C2410C;
    --accent-dark: #A2350A;
    --card: #FFFFFF;
    --maxw: 720px;
    --pad: 20px;
  }
  * { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body {
    margin: 0;
    background: var(--cream);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", "YuGothic", "Meiryo", sans-serif;
    font-size: 15px;
    line-height: 1.9;
    letter-spacing: 0.01em;
    text-wrap: pretty;
  }
  :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

  /* Reveal — 画面に入った要素に .is-in が付き、そこから 1.1 秒かけてフェードインする。
     クラスを付けるのは index.html 内の IntersectionObserver。
     JS が動かない環境では html に .js-reveal が付かないので、全要素そのまま表示される。
     :where() で伏せる側の詳細度を 0 にしてあるので .is-in が確実に勝つ。 */
  @keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  @media (prefers-reduced-motion: no-preference) {
    .js-reveal :where(.reveal, .reveal-left, .reveal-right,
      .shots figure, .shots figcaption,
      .prose > p, .prose > h2,
      .feature-shot, .feature-num, .feature-text h3, .feature-text p,
      .cards .card, .card > h3, .card li,
      .after-cards,
      .price > h2, .price > p,
      .band-dark .btn, .footer-brand, .footer-links) {
      opacity: 0;
      transition: opacity 1.1s ease-out;
    }
    /* コンテナは子のフェードだけを担う — 二重にかけない */
    .js-reveal :where(.shots.reveal, .band-tone .inner.reveal, .cards .card) {
      opacity: 1;
      transition: none;
    }
    .js-reveal .is-in { opacity: 1; }

    .hero .app-icon, .hero .app-name, .hero h1, .hero .hero-sub, .hero .btn {
      animation: fade-in 1.2s ease-out both;
    }
    .hero .app-name { animation-delay: .15s; }
    .hero h1 { animation-delay: .3s; }
    .hero .hero-sub { animation-delay: .45s; }
    .hero .btn { animation-delay: .6s; }
  }

  .band { padding: 64px 0; }
  .band-cream { background: var(--cream); }
  .band-accent { background: var(--accent); color: #FFFFFF; }
  .band-tone { background: var(--band); }
  .band-shots { padding: 44px 0; }
  .band-dark { background: var(--text); color: #FFFFFF; }
  .inner {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 var(--pad);
  }

  h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: 0.005em; }
  h1 { font-size: 25px; line-height: 1.5; }
  h2 { font-size: 19px; line-height: 1.6; }
  h3 { font-size: 16px; line-height: 1.6; }
  p { margin: 0; }

  /* Hero */
  .hero { text-align: center; padding-top: 72px; }
  .app-icon {
    width: 96px;
    height: 96px;
    margin: 0 auto;
    border-radius: 22.5%;
    background: #FFFFFF center/cover no-repeat url("images/app-icon.png");
    box-shadow: 0 1px 3px rgba(28,28,30,.08);
  }
  .app-name {
    margin-top: 22px;
    font-size: 13px;
    letter-spacing: 0.14em;
    color: var(--text);
  }
  .hero h1 { margin-top: 10px; }
  .hero-sub { margin-top: 16px; color: var(--muted); }
  .hero .btn { margin-top: 32px; }

  .btn {
    display: inline-block;
    background: var(--accent);
    color: #FFFFFF;
    text-decoration: none;
    font-size: 15px;
    letter-spacing: 0.03em;
    padding: 15px 34px;
    border-radius: 8px;
    min-height: 48px;
  }
  .btn:hover { background: var(--accent-dark); }
  .btn:active { background: #8A2C07; }
  .btn-light { background: #FFFFFF; color: var(--accent); }
  .btn-light:hover { background: #F1E9E2; color: var(--accent-dark); }

  /* Screenshots */
  .shots {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 0 var(--pad);
    max-width: 1000px;
    margin: 0 auto;
    justify-items: center;
  }
  .shots figure { margin: 0; width: 100%; max-width: 300px; }
  .shot {
    aspect-ratio: 9 / 19.5;
    border-radius: 10px;
    background: #FFFFFF center/cover no-repeat;
    overflow: hidden;
  }
  .shot-1 { background-image: url("images/screenshot-1.png"); }
  .shot-2 { background-image: url("images/screenshot-2.png"); }
  .shot-3 { background-image: url("images/screenshot-3.png"); }
  .shots figcaption {
    margin-top: 14px;
    font-size: 13px;
    line-height: 1.7;
    color: rgba(255,255,255,.92);
  }

  /* Prose */
  .prose p { margin-top: 20px; }
  .prose p:first-child { margin-top: 0; }
  .prose h2 { margin-top: 44px; }

  /* Features */
  .features { display: grid; gap: 76px; }
  .feature { display: grid; gap: 26px; justify-items: center; }
  .feature-shot {
    width: 100%;
    max-width: 250px;
    aspect-ratio: 9 / 19.5;
    border-radius: 12px;
    background-color: #FFFFFF;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    box-shadow: 0 10px 30px -14px rgba(28,28,30,.28);
    transition: rotate .5s ease, translate .5s ease;
  }
  .feature-shot.shot-1 { background-image: url("images/screenshot-1.png"); }
  .feature-shot.shot-2 { background-image: url("images/screenshot-2.png"); }
  .feature-shot.shot-3 { background-image: url("images/screenshot-3.png"); }
  .feature-shot.shot-itumono { background-image: url("images/screenshot-itumono.png"); background-position: top center; }
  .feature-text { max-width: 34em; }
  .feature-num {
    display: block;
    font-size: 12px;
    letter-spacing: 0.18em;
    color: var(--accent);
    margin-bottom: 8px;
  }
  .feature-text h3 { font-size: 17px; }
  .feature-text p { margin-top: 12px; color: var(--muted); }

  /* Lists */
  .cards {
    display: grid;
    gap: 16px;
  }
  .card {
    background: var(--card);
    border-radius: 10px;
    padding: 26px 22px;
    transition: transform .35s ease, box-shadow .35s ease;
  }
  .card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px -18px rgba(28,28,30,.3); }
  .card ul { list-style: none; margin: 18px 0 0; padding: 0; }
  .card li { position: relative; padding-left: 18px; margin-bottom: 9px; font-size: 14.5px; }
  .card li:last-child { margin-bottom: 0; }
  .card li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.88em;
    width: 8px;
    height: 1px;
    background: var(--accent);
  }
  .card-quiet li::before { background: #BDB6AA; }
  .after-cards { margin-top: 24px; color: var(--muted); font-size: 14px; }

  /* Price */
  .band-tight { padding: 48px 0; }
  .price p { margin-top: 18px; }

  /* Footer */
  .band-dark { padding: 56px 0 44px; text-align: center; }
  .footer-brand { margin-top: 32px; font-size: 13px; letter-spacing: 0.12em; color: rgba(255,255,255,.72); }
  .footer-links {
    margin-top: 14px;
    display: flex;
    justify-content: center;
    gap: 22px;
    font-size: 13px;
  }
  .footer-links a { color: rgba(255,255,255,.8); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.3); padding-bottom: 2px; }
  .footer-links a:hover { color: #FFFFFF; border-bottom-color: rgba(255,255,255,.7); }

  @media (min-width: 600px) {
    body { font-size: 16px; }
    .band { padding: 88px 0; }
    .hero { padding-top: 96px; }
    h1 { font-size: 32px; }
    h2 { font-size: 21px; }
    .shots { grid-template-columns: repeat(3, 1fr); gap: 20px; }
    .shots figure { max-width: none; }
    .features { gap: 116px; }
    .feature {
      grid-template-columns: 280px 1fr;
      gap: 56px;
      align-items: center;
      justify-items: start;
    }
    .feature-shot { max-width: 280px; rotate: -1.2deg; }
    .feature-shot:hover { rotate: 0deg; translate: 0 -4px; }
    .feature-reverse { grid-template-columns: 1fr 280px; }
    .feature-reverse .feature-shot { order: 2; rotate: 1.2deg; }
    .feature-reverse .feature-shot:hover { rotate: 0deg; translate: 0 -4px; }
    .feature-reverse .feature-text { order: 1; }
    .feature-text h3 { font-size: 19px; }
    .cards { grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
    .card { padding: 32px 28px; }
    .band-tight { padding: 64px 0; }
    .band-shots { padding: 56px 0; }
  }