@charset "utf-8";

:root {
  --bg: #fffaf5;
  --bg-accent: #fde8d0;
  --text: #1f1f1f;
  --muted: #666;
  --primary: #F56E0F;
  --card: #ffffff;
  --line: #f0f0f0;
  --radius: 16px;
  --maxw: 420px;
}

* {
  box-sizing: border-box;
}

html,
body {
  padding: 0;
  margin: 0;
}

h1,
h2,
h3,
p {
  margin: 0;
}

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

body {
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN",
    "Hiragino Sans", Meiryo, sans-serif;
  color: var(--text);
  background: radial-gradient(1200px 500px at 50% -10%, var(--bg-accent), var(--bg)) fixed;
}

.back-nav {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 24px 0 0 0;
}

.back-nav a {
  color: var(--muted);
  font-size: 13px;
  text-decoration: none;
}

.back-nav a:hover {
  color: var(--primary);
}

.page {
  width: 100%;
  max-width: var(--maxw);
  min-height: 100vh;
  margin: 0 auto;
  background: #fff;
  box-shadow: 0 0 0 1px var(--line), 0 20px 60px rgba(0, 0, 0, 0.06);
  position: relative;

  @media (min-width: 720px) {
    border-radius: 24px;
    margin: 24px auto;
    overflow: hidden;
  }


  /* common */

  .section {
    padding: 48px 24px;

    .section-title {
      font-size: 22px;
      text-align: center;
    }
  }

  .section-divider {
    height: 48px;
    background: linear-gradient(180deg, #ffffff, #fffaf5);
  }

  /* cta */

  .hero-cta,
  .section-cta {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    flex-direction: column;
    margin-top: 32px;

    .store-badge {
      display: block;
    }
  }

  .hero-cta {
    background: var(--bg);
    padding: 24px;
    border-radius: var(--radius);
    margin-top: 24px;

    h2 {
      font-size: 16px;
      color: var(--primary);
    }
  }


  /* each section */

  .hero {
    padding-top: 24px;
    padding-bottom: 0;
    text-align: center;

    .pill {
      display: inline-block;
      padding: 8px 16px;
      border-radius: 999px;
      background: #fde8d0;
      color: var(--primary);
      font-weight: 700;
      font-size: 12px;
      letter-spacing: 0.4px;
    }

    .hero-title {
      margin-top: 24px;
    }

    .hero-logo {
      display: block;
      margin-inline: auto;
    }

    .hero-shot {
      width: 100%;
      max-width: 320px;
      height: auto;
      display: block;
      margin-top: 24px;
      margin-inline: auto;
    }
  }


  .features {
    .cards {
      display: grid;
      gap: 16px;
      margin-top: 16px;

      .card {
        background: var(--card);
        border: 1px solid var(--line);
        border-radius: var(--radius);
        padding: 16px;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.04);
      }

      .card-media {
        display: block;
        border-radius: 16px;
      }

      .card-title {
        margin-top: 16px;
        font-size: 16px;
      }

      .card-text {
        margin-top: 8px;
        color: var(--muted);
        font-size: 13px;
      }
    }
  }


  .functions {
    background: #fff3e8;

    .function-list {
      display: grid;
      gap: 16px;
      margin-top: 16px;
      background: #fff;
      border: 1px solid var(--line);
      padding: 16px;
      border-radius: 16px;

      .function {
        font-size: 14px;
        display: flex;
        gap: 8px;
        align-items: center;

        .bi {
          color: var(--primary);
          font-size: 16px;
        }
      }
    }
  }


  .closing {
    padding-bottom: 24px;

    .closing-box {
      background: linear-gradient(180deg, #fde8d0, #fff);
      border: 1px solid #f5c89a;
      border-radius: var(--radius);
      padding: 24px;
    }
  }


  .footer {
    padding: 24px 24px 40px;
    text-align: center;

    .footer-text {
      small {
        color: var(--muted);
        font-size: 12px;
      }

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

    .lang-switcher {
      display: flex;
      justify-content: center;
      gap: 8px;
      margin-bottom: 16px;

      button {
        background: #fff;
        border: 1px solid #ccc;
        border-radius: 4px;
        width: 80px;
        height: 36px;
        cursor: pointer;
        font-size: 14px;
        color: #333;
        transition: background-color 0.2s, border-color 0.2s;
      }

      button:hover {
        border-color: var(--primary);
        color: var(--primary);
      }

      button.active {
        background-color: var(--primary);
        border-color: var(--primary);
        color: #fff;
      }
    }
  }
}