/* =========================================================
   /css/customer.css
   Customer（お客様側）共通CSS
   - 白背景ベース
   - 多店舗対応ヘッダー（ロゴ＋下段ナビ）
   - スマホ最適化（下段ナビ4項目を1段で崩さない）
   - 共通CSSに負けない「幅・余白」基準をここで固定

   更新: 2025-12-26（header fixed / footer bottom / history table no-scroll）
========================================================= */

/* =========================
   Variables
========================= */
:root{
  --accent:#ff4f88;
  --accent2:#e23f76;

  --bg:#ffffff;
  --text:#222;
  --muted:#666;

  --line:#e5e7eb;
  --soft:#f3f4f6;
  --soft2:#f7f7f9;

  --radius:14px;
  --shadow:0 2px 10px rgba(0,0,0,.06);

  --container:1000px;       /* お客様側：1000px基準 */
  --pad-pc:20px 16px 40px;  /* 既存ページと合わせる */
  --pad-sp:16px 12px 36px;

  /* Header theme */
  --header-black:#111;
  --header-text:#fff;
  --header-muted:rgba(255,255,255,.75);

  --focus:0 0 0 3px rgba(255,79,136,.18);

  /* fixedヘッダー分の余白（header全体の高さに合わせる） */
  --header-space-pc:96px;
  --header-space-sp:90px;
}

/* =========================
   Reset / Base
========================= */
*,
*::before,
*::after{
  box-sizing:border-box;
}

html, body{
  margin:0;
  padding:0;
  width:100%;
  max-width:100%;
  height:100%;
  overflow-x:hidden; /* はみ出し最終保険 */
}

body{
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--bg);
  color:var(--text);
  -webkit-text-size-adjust:100%;
}

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

a{
  color:inherit;
}

:focus-visible{
  outline:none;
  box-shadow:var(--focus);
  border-radius:10px;
}

/* =========================
   Page Wrapper (header_mypage.php が出す .c-page-wrap)
   - フッターを最下部固定（短いページで浮かない）
========================= */
.c-page-wrap{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

/* main は伸びる */
.customer-main,
.content{
  flex:1 0 auto;
}

/* footer は下に押し付け */
.c-site-footer{
  margin-top:auto;
}

/* =========================
   Layout (Main Container)
========================= */
.customer-main{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:var(--pad-pc);
  text-align:left;
}
@media (max-width:767px){
  .customer-main{ padding:var(--pad-sp); }
}

/* 既存ページの <main class="content"> にも対応（移行中保険） */
.content{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:var(--pad-pc);
  text-align:left;
}
@media (max-width:767px){
  .content{ padding:var(--pad-sp); }
}

/* =========================
   Common Components
========================= */
.page-title{
  font-size:22px;
  font-weight:800;
  margin:8px 0 16px;
  text-align:left;
}
@media (max-width:767px){
  .page-title{ font-size:20px; }
}

.card{
  width:100%;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:12px;
  box-shadow:0 1px 4px rgba(0,0,0,.05);
  padding:18px;
}

.muted{ color:var(--muted); }

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 14px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.12);
  text-decoration:none;
  font-weight:800;
  font-size:14px;
  line-height:1;
  background:#fff;
  color:#222;
  cursor:pointer;
  user-select:none;
}
.btn:active{ opacity:.86; }

.btn-primary{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
}
.btn-black{
  background:#000;
  color:#fff;
  border-color:#000;
}

.alert{
  border-radius:10px;
  padding:12px;
  margin:0 0 14px;
  font-size:14px;
  line-height:1.6;
}
.alert-success{
  background:#e5f8e8;
  border:1px solid #99d199;
  color:#0b6a20;
}
.alert-error{
  background:#ffecec;
  border:1px solid #e3b5b5;
  color:#b00020;
}

/* =========================
   Forms (common)
========================= */
.form-row{ margin-bottom:14px; }

.form-label{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  font-weight:800;
  margin-bottom:6px;
  color:#333;
}

.badge-required{
  font-size:11px;
  font-weight:900;
  color:#fff;
  background:var(--accent);
  border-radius:4px;
  padding:2px 6px;
  line-height:1;
}
.badge-optional{
  font-size:11px;
  font-weight:900;
  color:#555;
  background:#eee;
  border-radius:4px;
  padding:2px 6px;
  line-height:1;
}

.input,
.textarea,
.select,
.form-input,
.form-textarea{
  width:100%;
  padding:10px 12px;
  font-size:15px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,.18);
  background:#fff;
  outline:none;
}

.textarea,
.form-textarea{
  min-height:120px;
  resize:vertical;
}

.input:focus,
.textarea:focus,
.select:focus,
.form-input:focus,
.form-textarea:focus{
  border-color:var(--accent);
  box-shadow:var(--focus);
}

.help{
  margin-top:6px;
  font-size:12px;
  color:#777;
  line-height:1.6;
}

.error-msg{
  margin-top:6px;
  font-size:12px;
  color:#e74c3c;
}

/* =========================
   Header (Customer) - c-* classes
   ★要望：ヘッダー固定（スクロールしても上に残す）
========================= */
.c-header-wrap{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:1000;
}

/* 上段（白） */
.c-header-top{
  background:#fff;
  color:#222;
  border-bottom:1px solid rgba(0,0,0,.08);
}

.c-header-top-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;

  max-width:var(--container);
  margin:0 auto;
}

/* ロゴ */
.c-header-logo{ min-width:0; }
.c-header-logo-link{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:#222;
}
.c-header-logo-img{
  height:28px;
  width:auto;
  display:block;
}
.c-header-logo-text{
  font-weight:900;
  font-size:14px;
  color:#222;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:60vw;
}

/* お問い合わせ（ピンク） */
.c-header-contact-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 10px;
  border-radius:999px;
  text-decoration:none;
  font-size:12px;
  font-weight:900;
  line-height:1;
  border:1px solid var(--accent);
  background:var(--accent);
  color:#fff;
}
.c-header-contact-btn:active{ opacity:.88; }

/* 下段（黒ナビ） */
.c-nav-bar{
  background:var(--header-black);
}
.c-nav-inner{
  display:flex;
  align-items:center;
  gap:6px;
  padding:8px 10px;

  max-width:var(--container);
  margin:0 auto;
}
.c-nav-link{
  flex:1 1 0;
  min-width:0;
  text-align:center;
  text-decoration:none;
  color:var(--header-muted);
  font-weight:900;
  font-size:clamp(11px, 2.8vw, 13px);
  padding:8px 6px;
  border-radius:12px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  border:1px solid transparent;
}
.c-nav-link.is-active{
  color:#fff;
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.18);
}

/* fixedヘッダー分の余白（header_mypage.php が出す spacer） */
.c-header-space{
  height: var(--header-space-pc);
}
@media (max-width:767px){
  .c-header-top-inner{ padding:9px 10px; }
  .c-header-logo-img{ height:26px; }
  .c-header-contact-btn{
    padding:7px 9px;
    font-size:12px;
  }
  .c-nav-inner{
    padding:7px 8px;
    gap:6px;
  }
  .c-header-space{ height: var(--header-space-sp); }
}

/* =========================
   Footer (Customer)
========================= */
.c-site-footer{
  padding:18px 12px;
  border-top:1px solid rgba(0,0,0,.08);
  text-align:center;
  color:#666;
  font-size:12px;
  line-height:1.6;
}
.c-site-footer-copy{
  font-weight:800;
  color:#333;
}
.c-site-footer-powered{
  margin-top:6px;
}

/* =========================
   Push (通知設定)  ★追加：共通CSSで整える
   - ボタンを目立たせる
   - ステータス表示を目立たせる（中央揃え）
========================= */
.push-page{
  width:100%;
}

.push-card{
  width:100%;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:12px;
  box-shadow:0 1px 4px rgba(0,0,0,.05);
  padding:18px;
}

.push-title{
  font-size:18px;
  font-weight:900;
  line-height:1.4;
  margin:0 0 10px;
}

.push-desc{
  font-size:14px;
  line-height:1.8;
  color:#333;
  margin:0 0 14px;
}

/* ボタン領域：中央寄せ */
.push-actions{
  display:flex;
  justify-content:center;
  align-items:center;
  margin:12px 0 10px;
}

/* 目立つボタン（大きめ＋グラデ＋影） */
.btn-push{
  appearance:none;
  border:none;
  cursor:pointer;
  user-select:none;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  width:min(420px, 100%);
  padding:14px 18px;
  border-radius:999px;

  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#fff;
  font-weight:900;
  font-size:15px;
  letter-spacing:.02em;

  box-shadow:0 10px 22px rgba(255,79,136,.22);
  border:1px solid rgba(255,79,136,.35);
}
.btn-push:active{ opacity:.88; }
.btn-push:focus-visible{ box-shadow:var(--focus), 0 10px 22px rgba(255,79,136,.22); }

/* ステータス表示：中央揃え＋目立つ */
.push-status{
  margin-top:10px;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.10);
  background:#f8fafc;
  color:#374151;
  font-size:14px;
  line-height:1.7;
  font-weight:800;

  text-align:center;          /* ★中央揃え */
}

/* 成功（有効化済） */
.push-status.ok{
  background:#e9f9ef;
  border-color:rgba(16,185,129,.35);
  color:#065f46;
}

/* 失敗 */
.push-status.ng{
  background:#ffecec;
  border-color:rgba(176,0,32,.22);
  color:#b00020;
}

/* ヘルプ */
.push-help{
  margin-top:14px;
}

.push-help-title{
  font-weight:900;
  font-size:16px;
  margin:0 0 10px;
}

.push-note{
  font-size:14px;
  line-height:1.8;
  color:#111;
  margin:0 0 10px;
}
.push-note.small{
  font-size:13px;
  color:#374151;
}

.push-details{
  border:1px solid rgba(0,0,0,.08);
  border-radius:12px;
  padding:10px 12px;
  background:#fff;
  margin:10px 0;
}

.push-summary{
  cursor:pointer;
  font-weight:900;
  color:#111;
  font-size:14px;
}

.push-ol{
  margin:10px 0 0;
  padding-left:18px;
}
.push-ol li{
  margin:6px 0;
  line-height:1.8;
}

.push-back{
  margin-top:14px;
  text-align:center;
}
.btn-back{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 16px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.14);
  text-decoration:none;
  font-weight:900;
  background:#fff;
}

/* =========================
   News list / detail
========================= */
.no-news{
  color:#777;
  font-size:14px;
  line-height:1.7;
  margin:0;
}

.news-list{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.news-item{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:12px;
  overflow:hidden;
}

.news-link{
  display:block;
  padding:14px 14px;
  text-decoration:none;
  color:#222;
}

.news-date{
  font-size:12px;
  color:#666;
  font-weight:800;
  margin-bottom:6px;
}

.news-title{
  font-size:16px;
  font-weight:900;
  line-height:1.5;
  word-break:break-word;
}

.news-pin{
  display:inline-block;
  font-size:11px;
  font-weight:900;
  padding:2px 8px;
  border-radius:999px;
  background:var(--accent);
  color:#fff;
  margin-right:8px;
  vertical-align:middle;
}

.news-excerpt{
  margin-top:8px;
  font-size:13px;
  color:#666;
  line-height:1.7;
  overflow-wrap:anywhere;
  word-break:break-word;
}

.news-detail{
  width:100%;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:12px;
  padding:18px;
}

.news-detail-date{
  font-size:12px;
  color:#666;
  font-weight:800;
  margin-bottom:8px;
}

.news-detail-title{
  font-size:20px;
  font-weight:900;
  line-height:1.5;
  margin:0 0 14px;
  word-break:break-word;
}

.news-detail-body{
  font-size:15px;
  line-height:1.9;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.news-detail-body img{ max-width:100%; height:auto; }
.news-detail-body table{
  display:block;
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.news-detail-body pre{
  max-width:100%;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  padding:12px;
  border-radius:12px;
  background:var(--soft2);
  border:1px solid rgba(0,0,0,.08);
}
.news-detail-body code{
  word-break:break-word;
}

.news-detail-back{
  margin-top:16px;
  text-align:right;
}
.news-detail-back a{
  text-decoration:none;
  color:var(--accent);
  font-weight:900;
}

/* =========================
   Shop info / contact など
========================= */
.shop-title{
  font-size:20px;
  font-weight:900;
  margin:10px 0 16px;
}
.info-text{
  font-size:14px;
  color:#555;
  margin:0 0 18px;
  line-height:1.7;
}

.contact-card{
  background:#fff;
  border-radius:12px;
  padding:18px 16px 22px;
  box-shadow:var(--shadow);
  border:1px solid rgba(0,0,0,.06);
}

.error-messages{
  border-radius:10px;
  padding:12px;
  margin:0 0 16px;
  background:#ffe5e5;
  color:#a40000;
  font-size:14px;
}
.error-messages ul {
  margin: 6px 0 0;
  padding-left: 18px;
}

.success-message{
  border-radius:10px;
  padding:12px;
  margin:0 0 16px;
  background:#e5f8e8;
  color:#0b6a20;
  font-size:14px;
}

.btn-submit{
  width:100%;
  padding:12px;
  border-radius:999px;
  border:none;
  font-size:15px;
  font-weight:900;
  cursor:pointer;
  background:var(--accent);
  color:#fff;
}
.btn-submit:hover{ opacity:.92; }
.btn-submit:disabled{ opacity:.6; cursor:default; }

.shop-mini-info{
  margin-top:12px;
  font-size:12px;
  color:#666;
  line-height:1.6;
  overflow-wrap:anywhere;
}

/* =========================
   Purchase History (購入履歴)
   ★横スクロールを出さず「詳細」ボタンを必ず表示
   - table-layout: fixed + 列幅固定 + 省略表示
========================= */
.history-filter{
  margin:0 0 12px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  font-size:.85rem;
}
.history-filter label{
  display:flex;
  align-items:center;
  gap:6px;
}
.history-filter select{
  padding:6px 10px;
  border-radius:10px;
  border:1px solid #d1d5db;
  background:#fff;
  max-width: 180px;
}
.history-filter button{
  padding:10px 16px;
  border-radius:999px;
  border:none;
  background:var(--accent);
  color:#fff;
  font-size:.9rem;
  font-weight:900;
  cursor:pointer;
}
.history-filter button:active{ opacity:.85; }

/* テーブル本体：固定レイアウトで“押し出し”を防止 */
.table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
  font-size:.92rem;
}
.table th,
.table td{
  padding:12px 8px;
  border-bottom:1px solid #eee;
  vertical-align:middle;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* 列幅（4列想定：購入日/合計/獲得/詳細） */
.table th:nth-child(1),
.table td:nth-child(1){ width:36%; text-align:center; white-space:nowrap; }
.table th:nth-child(2),
.table td:nth-child(2){ width:28%; text-align:right;  white-space:nowrap; }
.table th:nth-child(3),
.table td:nth-child(3){ width:18%; text-align:right;  white-space:nowrap; }
.table th:nth-child(4),
.table td:nth-child(4){ width:18%; text-align:right;  white-space:nowrap; }

.table th{
  color:#555;
  font-weight:900;
}

/* 詳細ボタン（小さめでも押しやすく） */
.btn-detail{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,79,136,.35);
  background:#fff0f6;
  color:var(--accent);
  text-decoration:none;
  font-weight:900;
  font-size:.86rem;
  max-width:100%;
}
.btn-detail:active{ opacity:.85; }

@media (max-width: 767px){
  .card{ padding:16px; }

  .table{ font-size:.9rem; }
  .table th,
  .table td{ padding:10px 6px; }

  /* スマホは「詳細」列を少し広げる（確実に見せる） */
  .table th:nth-child(1),
  .table td:nth-child(1){ width:38%; }
  .table th:nth-child(2),
  .table td:nth-child(2){ width:27%; }
  .table th:nth-child(3),
  .table td:nth-child(3){ width:15%; }
  .table th:nth-child(4),
  .table td:nth-child(4){ width:20%; }

  .btn-detail{
    padding:8px 10px;
    font-size:.85rem;
  }

  /* push（スマホ時の見出しちょい縮小） */
  .push-title{ font-size:17px; }
  .btn-push{ font-size:15px; }
}

@media (max-width: 380px){
  .table{ font-size:.86rem; }
  .btn-detail{ padding:7px 9px; }
}

/* =========================
   Utilities
========================= */
.hr{
  border:none;
  border-top:1px solid rgba(0,0,0,.08);
  margin:16px 0;
}

.center{ text-align:center; }
.right{ text-align:right; }
.left{ text-align:left; }

.hide{ display:none; }