/* /line-stamps 静的ページ専用。 配色・背景・フッターは /about/about.css を先に読み込んで共有し、
   ここには差分だけを書く。
   見出しは about の M PLUS Rounded 1c subset (about の h2 の字だけ収録) を使うと字ごとに
   fallback が混ざるので、 最初からシステムの丸ゴシックに寄せる。 */

/* LINE の緑。 暗い背景の上では文字・線として使い (コントラスト十分)、 塗りは白文字のボタンだけにする
   (緑地に小さい白文字はコントラスト比が低く読みにくいため)。 */
.line-stamps {
  --line-green: #06c755;
  --line-green-soft: rgba(6, 199, 85, 0.14);
}

.line-green {
  color: var(--line-green);
}

/* 日本語を文節で折り返す (「使いま/す」のような単語の途中での改行を避ける)。 未対応ブラウザは通常の折り返し */
.line-stamps {
  word-break: auto-phrase;
}

.line-stamps h1,
.line-stamps h2 {
  font-family: 'Hiragino Maru Gothic ProN', 'Hiragino Sans', 'Noto Sans JP', sans-serif;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.4;
}

/* ===== Hero ===== */

.stamps-hero {
  text-align: center;
  padding: 16px 0 48px;
}

.stamps-logo {
  width: 120px;
  height: auto;
  margin: 0 auto 20px;
}

.stamps-hero h1 {
  font-size: 1.75rem;
  margin-bottom: 16px;
}

.stamps-lead {
  margin: 0 auto;
  color: var(--text-soft);
  font-size: 1rem;
  line-height: 1.9;
}

/* 1 文ずつのまとまりで折り返す (幅が足りれば 1 文 1 行、 狭ければ文の中の空白で折れる) */
.stamps-lead span {
  display: inline-block;
}

.stamps-official {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 6px 16px 6px 8px;
  border: 1.5px solid var(--line-green);
  border-radius: 999px;
  background: var(--line-green-soft);
  color: #c9f7da;
  font-size: 0.8125rem;
  font-weight: 700;
}

.stamps-official .check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--line-green);
  color: #fff;
  font-size: 0.75rem;
}

/* 5 匹の顔ナビ: 押すとそのセットへ飛ぶ */
.set-nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px 16px;
  margin: 28px auto 0;
}

.set-nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 76px;
  color: var(--text);
  font-size: 0.8125rem;
  font-weight: 700;
  text-decoration: none;
}

.set-nav img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  padding: 6px;
  border: 3px solid var(--line-green);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.set-nav a:hover img {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(6, 199, 85, 0.45);
}

.stamps-price {
  display: inline-block;
  margin-top: 20px;
  padding: 4px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--brand-yellow);
  font-size: 0.9375rem;
  font-weight: 700;
}

/* ===== QR (PC / タブレット) =====
   LINE はスマホのアプリなので、 PC で開いた人にはスマホへの受け渡しを出す。
   QR は白地でないと読めないので、 QR の周りだけ白いカードにする。 */

.qr-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin: 36px auto 0;
  max-width: 640px;
  padding: 24px;
  border: 2px solid var(--line-green);
  border-radius: 16px;
  background: var(--line-green-soft);
  text-align: left;
}

/* 枠の上辺にかかるラベル (「スマホで読み取る」) */
.qr-label {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 2px 14px;
  border-radius: 999px;
  background: var(--line-green);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 700;
  white-space: nowrap;
}

.qr-box p {
  color: var(--text);
  font-size: 0.9375rem;
  line-height: 1.8;
}

.qr-box .qr-hint {
  display: inline-block;
  margin-top: 6px;
  color: var(--text-soft);
  font-size: 0.8125rem;
  opacity: 0.8;
}

.qr-box img {
  flex: none;
  width: 140px;
  height: 140px;
  padding: 8px;
  border-radius: 10px;
  background: #fff;
}

/* ===== LINE STORE へのボタン =====
   外部 (LINE) へ出るボタンなので、 ブランド CTA の青ではなく LINE の緑にして行き先を示す。 */

.author-btn,
.store-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #06c755;
  color: #fff;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.04em;
  box-shadow: 0 6px 18px rgba(6, 199, 85, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.author-btn:hover,
.store-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(6, 199, 85, 0.5);
}

.author-btn {
  display: none;
  margin-top: 28px;
  padding: 14px 32px;
  font-size: 1rem;
}

.store-btn {
  padding: 12px 28px;
  font-size: 0.9375rem;
}

/* ===== 使用例 (トーク画面ふう) =====
   LINE のトーク画面を思わせる配色 (水色の背景 / 緑の自分の吹き出し) の汎用チャット。
   LINE のロゴや UI 部品そのものは使わない。 */

.stamps-usage {
  padding: 48px 0;
  border-top: 1px solid var(--border);
  text-align: center;
}

.stamps-usage h2 {
  font-size: 1.5rem;
  margin-bottom: 20px;
}

.chat {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 360px;
  margin: 0 auto;
  padding: 20px 16px;
  border-radius: 20px;
  background: #8cabd9;
  text-align: left;
}

.msg {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.msg.me {
  justify-content: flex-end;
}

.msg .avatar-space {
  flex: none;
  width: 36px;
}

.msg .avatar {
  flex: none;
  width: 36px;
  height: 36px;
  object-fit: contain;
  padding: 3px;
  border-radius: 50%;
  background: #fff;
}

.msg .bubble {
  max-width: 70%;
  padding: 8px 12px;
  border-radius: 16px;
  background: #fff;
  color: #1a1a1a;
  font-size: 0.875rem;
  line-height: 1.5;
}

.msg.me .bubble {
  background: #8de055;
}

.msg .sticker {
  width: 130px;
  height: auto;
}

.chat-note {
  margin-top: 8px;
  color: var(--text-soft);
  font-size: 0.75rem;
}

/* ===== セット (動物ごと) ===== */

.stamp-set {
  padding: 48px 0;
  border-top: 1px solid var(--border);
  text-align: center;
  scroll-margin-top: 16px;
}

.stamp-set h2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 1.5rem;
  margin-bottom: 20px;
}

.stamp-set h2 img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  padding: 3px;
  border: 2.5px solid var(--line-green);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
}

.stamp-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.stamp-grid li {
  aspect-ratio: 370 / 320;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  padding: 4px;
}

.stamp-grid img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ボタン + そのセット直行の QR。 PC で「決めたセットをそのままスマホで開く」ため */
.set-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-top: 24px;
}

.set-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: 0;
}

.set-qr img {
  width: 96px;
  height: 96px;
  padding: 6px;
  border: 3px solid var(--line-green);
  border-radius: 10px;
  background: #fff;
}

.set-qr figcaption {
  color: var(--line-green);
  font-size: 0.75rem;
  font-weight: 700;
}

/* ===== 注記 ===== */

.stamps-notes {
  padding: 32px 0 40px;
  border-top: 1px solid var(--border);
  text-align: center;
  color: var(--text-soft);
  font-size: 0.875rem;
  line-height: 2;
}

/* ===== スマホ: QR は出さず、 作者ページ / 各セットへ直接 ===== */

@media (max-width: 600px) {
  .qr-box,
  .set-qr {
    display: none;
  }
  .author-btn {
    display: inline-flex;
  }
  .set-nav {
    gap: 10px 8px;
  }
  .set-nav a {
    width: 60px;
    font-size: 0.75rem;
  }
  .set-nav img {
    width: 52px;
    height: 52px;
  }
}

/* ===== タブレット以上 ===== */

@media (min-width: 720px) {
  .stamps-hero h1 {
    font-size: 2.25rem;
  }
  .stamp-grid {
    grid-template-columns: repeat(8, 1fr);
  }
  .stamp-set,
  .stamps-usage {
    padding: 64px 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .author-btn,
  .store-btn,
  .set-nav img {
    transition: none;
  }
  .author-btn:hover,
  .store-btn:hover,
  .set-nav a:hover img {
    transform: none;
  }
}