/*
 * イチココ UI コンポーネント定義  components.css v2
 * ─────────────────────────────────────────────────────────
 * 読み込み順: style.css → components.css → ページ固有 <style>
 *
 * 目次
 *  1.  レイアウト補助
 *  2.  パンくずナビ
 *  3.  お知らせバナー（アナウンス・アラート）
 *  4.  記事ヒーロー
 *  5.  セクション見出し（記事内）
 *  6.  ボタン
 *  7.  タイルグリッド（アイコン＋ラベルナビ）
 *  8.  カテゴリ記事セクション
 *  9.  記事カード（縦積み横型）
 * 10.  人気記事セクション（ダーク背景）
 * 11.  ステップフロー（カード型）
 * 12.  支払い・操作フロー（シンプル型）
 * 13.  お知らせ・注意ボックス
 * 14.  注目バナー（オレンジ枠）
 * 15.  完了バナー（グリーン帯）
 * 16.  特典ボックス（ダークグリーン）
 * 17.  テーブル
 * 18.  FAQ
 *  -   レスポンシブ
 * ─────────────────────────────────────────────────────────
 */


/* ══════════════════════════════════════════════════
   1. レイアウト補助
   ══════════════════════════════════════════════════ */

.content-container { max-width: 740px; }
.page-main         { padding: 48px 0 80px; }


/* ══════════════════════════════════════════════════
   2. パンくずナビ
   ══════════════════════════════════════════════════ */

.breadcrumb-bar {
  background: var(--gray-light);
  padding: 10px 0;
  border-bottom: 1px solid #E5E7EB;
}
.breadcrumb {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.78rem; color: var(--gray); flex-wrap: wrap;
}
.breadcrumb a          { color: var(--gray); text-decoration: none; }
.breadcrumb a:hover    { color: var(--green); }
.breadcrumb .sep       { color: #D1D5DB; }


/* ══════════════════════════════════════════════════
   3. お知らせバナー
   ══════════════════════════════════════════════════ */

/* ── ① アナウンスバー（ピンク・ページ最上部固定） ── */
.announce-bar {
  position: sticky; top: 64px; z-index: 90;
  background: linear-gradient(90deg, #DB2777, #E11D48);
  padding: 11px 16px; text-align: center;
}
.announce-bar-inner { max-width: 860px; margin: 0 auto; }
.announce-bar a {
  color: #fff; font-size: 0.88rem; font-weight: 700;
  text-decoration: none; line-height: 1.5; display: inline;
}
.announce-bar a:hover { text-decoration: underline; }

/* ── ② カテゴリナビバー（ヘッダー直下の横スクロールタブ） ── */
.cat-nav {
  background: #fff;
  border-bottom: 1px solid #E5E7EB;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.cat-nav::-webkit-scrollbar { display: none; }
.cat-nav-inner {
  display: flex;
  gap: 0;
  white-space: nowrap;
  max-width: 860px;
  margin: 0 auto;
  padding: 0 16px;
}
.cat-nav-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 12px 16px;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--gray);
  text-decoration: none;
  border-bottom: 2.5px solid transparent;
  transition: color 0.15s, border-color 0.15s;
  flex-shrink: 0;
}
.cat-nav-item:hover { color: var(--green); }
.cat-nav-item.active { color: var(--green); border-bottom-color: var(--green); }

/* ── ③ アラートバナー（オレンジ・セクション内告知） ── */
.alert-banner { background: linear-gradient(90deg, #F4A261, #E76F51); padding: 14px 0; }
.alert-banner-inner {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; flex-wrap: wrap;
}
.alert-banner-text { color: #fff; font-weight: 700; font-size: 0.92rem; }
.alert-banner-link {
  background: rgba(255,255,255,0.25); border: 1px solid rgba(255,255,255,0.5);
  color: #fff; padding: 5px 14px; border-radius: 100px;
  font-size: 0.8rem; font-weight: 700; text-decoration: none;
  transition: background 0.2s;
}
.alert-banner-link:hover { background: rgba(255,255,255,0.4); }


/* ══════════════════════════════════════════════════
   4. 記事ヒーロー
   ══════════════════════════════════════════════════ */

.article-hero {
  background: linear-gradient(135deg, #F0FDF4 0%, #D1FAE5 60%, #FEF3C7 100%);
  padding: 52px 0 44px;
}
.article-hero-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--green); color: #fff;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.8px;
  padding: 5px 14px; border-radius: 100px; margin-bottom: 18px;
}
.article-hero h1 {
  font-size: clamp(1.45rem, 4vw, 1.9rem);
  font-weight: 900; line-height: 1.55; letter-spacing: -0.5px;
  color: var(--dark); margin-bottom: 16px;
}
.article-meta-row {
  display: flex; align-items: center; gap: 16px;
  font-size: 0.78rem; color: var(--gray); flex-wrap: wrap;
}
.article-meta-row span { display: flex; align-items: center; gap: 4px; }
.article-lead { font-size: 0.95rem; line-height: 2; color: #374151; margin-bottom: 28px; }


/* ══════════════════════════════════════════════════
   5. セクション見出し（記事内）
   ══════════════════════════════════════════════════ */

/* H2: 左下ボーダー強調 */
.section-h2 {
  font-size: 1.35rem; font-weight: 900; color: var(--dark);
  padding-bottom: 12px; border-bottom: 3px solid var(--green);
  margin-bottom: 28px; letter-spacing: -0.3px;
}
/* H3: シンプル強調 */
.section-h3 { font-size: 1rem; font-weight: 900; color: var(--dark); margin: 28px 0 12px; }
/* セクション間余白 */
.content-section { margin-bottom: 60px; }


/* ══════════════════════════════════════════════════
   6. ボタン
   ══════════════════════════════════════════════════ */

/* もっと見るボタン（アウトライン・セクション下部） */
.btn-more-sm {
      flex-shrink:0; white-space:nowrap; margin-top:2px;
      display:inline-flex; align-items:center; gap:4px;
      color:var(--green); font-size:0.82rem; font-weight:700;
      text-decoration:none; border:1.5px solid var(--green);
      border-radius:100px; padding:6px 14px;
      transition:background 0.18s, color 0.18s;
}
.btn-more-sm:hover { background: var(--green); color: #fff; }

.btn-cat-more {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: 2px solid var(--dark); color: var(--dark);
  padding: 11px 28px; border-radius: 100px; font-size: 0.88rem; font-weight: 700;
  text-decoration: none; transition: background 0.18s, color 0.18s;
}
.btn-cat-more:hover { background: var(--dark); color: var(--white); }

/* ボタン配置行 */
.article-more-row { text-align: center; margin-top: 14px; }

/* アプリストアバッジ */
.store-badge {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1.5px solid var(--dark); border-radius: 8px;
  padding: 8px 18px; font-size: 0.82rem; font-weight: 700;
  text-decoration: none; color: var(--dark); transition: background 0.18s, color 0.18s;
}
.store-badge:hover          { background: var(--dark); color: #fff; }
.store-badge.green          { border-color: var(--green); color: var(--green); }
.store-badge.green:hover    { background: var(--green); color: #fff; }
.store-badge-row            { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }


/* ══════════════════════════════════════════════════
   7. タイルグリッド（アイコン＋ラベルナビ）
   ── 用途: ichico加盟店検索ナビなど
   ══════════════════════════════════════════════════ */

.tile-group       { margin-bottom: 12px; }
.tile-group-label {
  font-size: 0.78rem; font-weight: 700; color: var(--gray);
  letter-spacing: 0.5px; margin-bottom: 10px; text-transform: uppercase;
}
.tile-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; min-height: 70px;
  border: 1.5px solid #E5E7EB; border-radius: 14px;
  background: var(--gray-light); font-size: 0.84rem; font-weight: 700; color: var(--dark);
  text-decoration: none; padding: 12px 8px; text-align: center; line-height: 1.4;
  transition: background 0.18s, border-color 0.18s, transform 0.15s; cursor: pointer;
}
.tile:hover {
  background: var(--green-pale); border-color: var(--green); transform: translateY(-2px);
}
.tile-icon { font-size: 1.55rem; line-height: 1; }

/* タイルグリッドを格納する検索ナビエリア */
.search-nav {
  background: var(--white); padding: 24px 0 28px; border-bottom: 1px solid #E5E7EB;
}
.search-nav-title {
  font-size: clamp(1.1rem, 3vw, 1.35rem); font-weight: 900; color: var(--dark);
  text-align: center; margin-bottom: 18px;
}


/* ══════════════════════════════════════════════════
   8. カテゴリ記事セクション
   ── 用途: トップページのおでかけ・暮らし・つながるセクション
   ══════════════════════════════════════════════════ */

.cat-section         { padding: 36px 0 36px; background: var(--white); }
.cat-section.bg-gray { background: var(--gray-light); }
.cat-section-head    { margin-bottom: 18px; }

/* カラーラベルバッジ（カテゴリ識別） */
.cat-section-label {
  display: inline-block; font-size: 0.7rem; font-weight: 800;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--white); padding: 3px 12px; border-radius: 100px; margin-bottom: 10px;
}
.label-outing  { background: #C2550E; }
.label-life    { background: #1A7B6F; }
.label-connect { background: #6040A8; }
.label-ichico  { background: var(--green); }

.cat-section-title {
  font-size: clamp(1.2rem, 3.5vw, 1.5rem); font-weight: 900; color: var(--dark); margin-bottom: 6px;
}
.cat-section-desc { font-size: 0.88rem; color: var(--gray); line-height: 1.75; }


/* ══════════════════════════════════════════════════
   9. 記事カード（縦積み横型・1行1セル）
   ══════════════════════════════════════════════════ */

.article-row {
  display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px;
}
.article-card {
  background: var(--white); border: 1px solid #E5E7EB; border-radius: var(--radius);
  overflow: hidden; text-decoration: none; color: inherit;
  display: flex; flex-direction: row; align-items: stretch;
  transition: box-shadow 0.18s, transform 0.15s;
}
.article-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.08); transform: translateY(-2px); }

.article-thumb {
  width: 88px; min-height: 88px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 2.6rem;
}
.article-body {
  padding: 12px 14px; display: flex; flex-direction: column; flex: 1; min-width: 0;
}
.article-tag {
  display: inline-block; font-size: 0.66rem; font-weight: 700;
  padding: 2px 8px; border-radius: 4px; margin-bottom: 7px; width: fit-content;
}
.article-title {
  font-size: 0.88rem; font-weight: 700; line-height: 1.55; color: var(--dark);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin: 0;
}
.article-summary {
  font-size: 0.78rem; color: var(--gray); line-height: 1.5; margin: 5px 0 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.article-meta { font-size: 0.74rem; color: var(--gray); margin: 8px 0 0; }

/* タグカラー一覧 */
.tag-outing   { background: #FEF3C7; color: #92400E; }   /* おでかけ・グルメ */
.tag-life     { background: #DBEAFE; color: #1E40AF; }   /* 暮らし・ニュース */
.tag-connect  { background: #EDE9FE; color: #5B21B6; }   /* つながる */
.tag-popular  { background: #FEE2E2; color: #991B1B; }   /* 人気 */
.tag-active   { background: #D1FAE5; color: #065F46; }   /* 開催中 */
.tag-upcoming { background: #FEF3C7; color: #92400E; }   /* 近日開始 */
.tag-ended    { background: #F3F4F6; color: #6B7280; }   /* 終了 */
.tag-guide    { background: var(--green-pale); color: var(--green); } /* ガイド */
.tag-news     { background: #EDE9FE; color: #5B21B6; }   /* ニュース */


/* ══════════════════════════════════════════════════
   10. 人気記事セクション（ダーク背景）
   ══════════════════════════════════════════════════ */

.popular-section { padding: 52px 0 48px; background: var(--dark); }
.popular-section .cat-section-title { color: var(--white); }
.popular-section .cat-section-desc  { color: rgba(255,255,255,0.6); }
.popular-section .btn-cat-more {
  border-color: rgba(255,255,255,0.5); color: var(--white);
}
.popular-section .btn-cat-more:hover {
  background: var(--white); color: var(--dark); border-color: var(--white);
}


/* ══════════════════════════════════════════════════
   11. ステップフロー（カード型）
   ── 用途: 登録・設定など多段手順
   ══════════════════════════════════════════════════ */

.step-card {
  display: flex; gap: 20px; align-items: flex-start;
  background: var(--white); border: 1px solid #E5E7EB;
  border-radius: var(--radius); padding: 24px; margin-bottom: 16px; position: relative;
}
.step-card:not(:last-child)::after {
  content: ''; position: absolute; left: 36px; bottom: -16px;
  width: 2px; height: 16px; background: #D1FAE5;
}
.step-num-circle {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--green); color: #fff; font-size: 1.1rem; font-weight: 900;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.step-body   { flex: 1; min-width: 0; }
.step-label  { font-size: 0.68rem; font-weight: 700; color: var(--green); letter-spacing: 1px; margin-bottom: 5px; }
.step-title  { font-size: 1.05rem; font-weight: 900; color: var(--dark); margin-bottom: 8px; }
.step-desc   { font-size: 0.9rem; color: #374151; line-height: 1.85; }
.step-sub {
  margin-top: 12px; padding: 12px 16px;
  background: var(--gray-light); border-radius: 10px;
  font-size: 0.82rem; color: var(--gray); line-height: 1.8;
}


/* ══════════════════════════════════════════════════
   12. 支払い・操作フロー（シンプル型）
   ── 用途: お店での支払い・ATM操作など短い手順
   ══════════════════════════════════════════════════ */

.pay-flow { display: flex; flex-direction: column; gap: 0; }
.pay-step { display: flex; gap: 16px; align-items: flex-start; padding: 20px 0; }
.pay-step:not(:last-child) { border-bottom: 1px dashed #E5E7EB; }
.pay-step-num {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--green); color: #fff; font-size: 1rem; font-weight: 900;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px;
}
.pay-step-body  { flex: 1; }
.pay-step-title { font-size: 1rem; font-weight: 900; color: var(--dark); margin-bottom: 6px; }
.pay-step-desc  { font-size: 0.88rem; color: #374151; line-height: 1.85; }
.pay-step-tip {
  display: inline-flex; align-items: center; gap: 6px;
  background: #FEF3C7; border-radius: 8px; padding: 8px 14px;
  font-size: 0.82rem; font-weight: 700; color: #92400E; margin-top: 10px;
}


/* ══════════════════════════════════════════════════
   13. お知らせ・注意ボックス
   ══════════════════════════════════════════════════ */

.info-box {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 16px 18px; border-radius: 12px; font-size: 0.84rem; line-height: 1.85;
  margin-top: 16px;
}
.info-box.note    { background: #EFF6FF; color: #1E40AF; border: 1px solid #BFDBFE; } /* 青: ヒント */
.info-box.warn    { background: #FEF3C7; color: #92400E; border: 1px solid #FCD34D; } /* 黄: 注意 */
.info-box.error   { background: #FEF2F2; color: #991B1B; border: 1px solid #FECACA; } /* 赤: 重要 */
.info-box.success { background: #F0FDF4; color: #065F46; border: 1px solid #A7F3D0; } /* 緑: 完了 */


/* ══════════════════════════════════════════════════
   14. 注目バナー（オレンジ枠）
   ── 用途: キャンペーン告知・重要なお知らせ
   ══════════════════════════════════════════════════ */

.attention-box {
  background: #FFFBEB; border: 2px solid var(--accent); border-radius: var(--radius);
  padding: 18px 20px; font-size: 0.88rem; color: #374151; line-height: 1.85;
}
.attention-head { font-size: 0.94rem; font-weight: 900; color: #92400E; margin-bottom: 10px; }


/* ══════════════════════════════════════════════════
   15. 完了バナー（グリーン帯）
   ── 用途: ステップ完了時の達成感演出
   ══════════════════════════════════════════════════ */

.complete-banner {
  background: linear-gradient(90deg, var(--green), var(--green-light));
  border-radius: var(--radius); padding: 24px 28px;
  display: flex; align-items: center; gap: 16px; margin-bottom: 52px;
}
.complete-banner-icon { font-size: 2.4rem; flex-shrink: 0; }
.complete-banner-text { flex: 1; }
.complete-banner-text strong { color: #fff; font-size: 1.1rem; }
.complete-banner-text p { color: rgba(255,255,255,0.85); font-size: 0.92rem; line-height: 1.8; margin-top: 4px; }


/* ══════════════════════════════════════════════════
   16. 特典ボックス（ダークグリーン）
   ── 用途: 金額・特典の視覚的サマリー
   ══════════════════════════════════════════════════ */

.benefit-box {
  background: linear-gradient(135deg, #0A3D24, #2D6A4F);
  border-radius: var(--radius); padding: 28px 32px; margin-bottom: 52px; color: #fff;
}
.benefit-row {
  display: flex; align-items: center; justify-content: space-between; padding: 10px 0;
}
.benefit-row:not(:last-child)  { border-bottom: 1px solid rgba(255,255,255,0.15); }
.benefit-label                 { font-size: 0.9rem; font-weight: 700; opacity: 0.85; }
.benefit-yen                   { font-size: 1.5rem; font-weight: 900; letter-spacing: -0.5px; }
.benefit-yen.accent            { color: var(--accent); }
.benefit-divider               { text-align: center; font-size: 1.4rem; padding: 6px 0; opacity: 0.5; }
.benefit-total {
  display: flex; align-items: center; justify-content: space-between; padding: 16px 0 0; margin-top: 8px;
}
.benefit-total-label  { font-size: 0.88rem; opacity: 0.7; }
.benefit-total-yen    { font-size: 2.2rem; font-weight: 900; color: var(--accent); letter-spacing: -1px; }
.benefit-total-suffix { font-size: 0.88rem; opacity: 0.7; }


/* ══════════════════════════════════════════════════
   17. テーブル
   ══════════════════════════════════════════════════ */

.table-wrap {
  overflow-x: auto; border-radius: var(--radius); border: 1px solid #E5E7EB; margin: 20px 0;
}
.ui-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.ui-table thead tr     { background: var(--green); color: #fff; }
.ui-table th           { padding: 12px 16px; font-weight: 700; text-align: left; white-space: nowrap; }
.ui-table td           { padding: 12px 16px; border-top: 1px solid #E5E7EB; vertical-align: top; color: #374151; line-height: 1.7; }
.ui-table tbody tr:nth-child(even) { background: var(--gray-light); }


/* ══════════════════════════════════════════════════
   18. ichico日カウントダウン（hero-banner内）
   ══════════════════════════════════════════════════ */

.hero.is-today { background: linear-gradient(135deg, #059669 0%, #10B981 50%, #34D399 100%); }
.hero.is-today .hero-sub { color: #fff; }
.hero.is-today .hero-title { color: #fff; }
.hero.is-today .hero-badge { background: rgba(255,255,255,0.25); color: #fff; }
.hero.is-today .accent { color: #fff; }
.ichicoday-link-btn {
  display: inline-block;
  background: var(--green); color: #fff;
  font-size: 0.95rem; font-weight: 700;
  padding: 12px 32px; border-radius: 100px;
  text-decoration: none; margin-top: 8px;
  box-shadow: 0 4px 14px rgba(5,150,105,0.3);
  transition: transform 0.15s, box-shadow 0.15s;
}
.ichicoday-link-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(5,150,105,0.4); }
.hero.is-today .ichicoday-link-btn { background: #fff; color: var(--green); }


/* ══════════════════════════════════════════════════
   19. FAQ
   ══════════════════════════════════════════════════ */

.faq-item {
  background: var(--white); border: 1px solid #E5E7EB;
  border-radius: var(--radius); padding: 18px 20px; margin-bottom: 12px;
}
.faq-q { font-size: 0.9rem; font-weight: 900; color: var(--green); margin-bottom: 8px; }
.faq-a { font-size: 0.88rem; color: #374151; line-height: 1.85; }


/* ══════════════════════════════════════════════════
   レスポンシブ
   ══════════════════════════════════════════════════ */

@media (max-width: 640px) {
  .article-card         { flex-direction: column; align-items: stretch; box-sizing: border-box; }
  .article-thumb        { width: 100%; height: 96px; min-height: unset; font-size: 2.2rem; text-align: center; }
  .benefit-box          { padding: 22px 20px; }
  .benefit-total-yen    { font-size: 1.8rem; }
  .step-card            { padding: 18px 16px; gap: 14px; }
  .complete-banner      { flex-direction: column; text-align: center; gap: 10px; }
  .article-hero         { padding: 36px 0 32px; }
  .ui-table             { font-size: 0.78rem; }
}
@media (max-width: 560px) {
  .tile-grid  { gap: 8px; }
  .tile       { min-height: 60px; font-size: 0.78rem; }
  .tile-icon  { font-size: 1.3rem; }
}