/* =============================================================
   product-premium.css
   Pocket WiFi Premium Plan 商品ページ専用スタイル
   配置場所: /static/css/product-premium.css
   読み込み: head.php の $extra_css で指定 or <link> で直接指定
============================================================= */


/* ─────────────────────────────────────────────────────────────
   0. ベースリセット（このページのみ）
───────────────────────────────────────────────────────────── */
.page-content.product h1 { font-weight: 900; line-height: 1.1; font-size: 2.0rem; }
.page-content.product hr {
  background: none; opacity: inherit; border: none;
  border-bottom: 1px solid #ddd;
}


/* ─────────────────────────────────────────────────────────────
   1. レイアウト (リファレンス products.css と同じクラス名を採用)

   HTML 構造:
     <div class="layout">
       <div class="mp_thumbnail"> ... 商品画像 ... </div>
       <div class="layout_media"> ... 商品概要 / Specs / Included / レビュー ... </div>
       <aside class="layout_cart"> ... 商品名 / カート / 価格 / CTA / 注意 ... </aside>
     </div>

   PC (>=920px):
     ┌─ 1140px 幅、column-gap 40px ─────────────────────┐
     │ ┌─────────── 680px ───────────┐ ┌── 420px ──┐    │
     │ │ mp_thumbnail (画像)         │ │ layout_cart│   │
     │ ├─────────────────────────────┤ │  (sticky)  │   │
     │ │ layout_media (Specs/Included│ │            │   │
     │ │  / レビュー)                │ │            │   │
     │ └─────────────────────────────┘ └────────────┘   │
     └─────────────────────────────────────────────────┘

   SP (<=919px): 縦積み
     ① mp_thumbnail (画像)
     ② layout_cart (商品名/カート/注意)
     ③ layout_media (商品詳細)
───────────────────────────────────────────────────────────── */

/* --- PC: CSS Grid で 2 列 / 3 エリア(image / text / cart)を配置 --- */
@media screen and (min-width: 920px) {

  .layout {
    display: grid;
    grid-template-columns: 1fr 420px;
    grid-template-areas:
      "image cart"
      "text  cart";
    column-gap: 40px;
    row-gap: 0;
    align-items: start;
    max-width: 1140px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 30px 0 60px;
  }

  .layout > .mp_thumbnail {
    grid-area: image;
    margin: 0 0 30px;
    padding: 0 15px;
  }

  .layout > .layout_media {
    grid-area: text;
    padding: 0 15px;
    min-width: 0;    /* grid アイテムが内容で膨張しないよう */
  }

  .layout > .layout_cart {
    grid-area: cart;
    align-self: start;     /* grid の stretch 高さに追従させない(stickyの前提) */
    position: sticky;
    top: 70px;
    padding: 0 15px;
    background-color: #fff;
  }
}


/* --- SP: 縦積み + ご要望順 (①画像 → ②カート → ③本文) --- */
@media screen and (max-width: 919px) {

  .layout {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 30px 15px 0px;
  }

  .layout > .mp_thumbnail { order: 1; margin-bottom: 20px; }
  .layout > .layout_cart  { order: 2; padding: 20px 0 10px; position: static; }
  .layout > .layout_media { order: 3; }
}


/* ─────────────────────────────────────────────────────────────
   1.1  商品画像ギャラリー (.mp_thumbnail > .mp_nail)
   リファレンス products.css の挙動を踏襲:
     - 先頭の 1 枚を全幅で大きく表示
     - 2 枚目以降は 2 列グリッドで半幅ずつ表示
     - gap 2px のタイト配置
     - 画像タップで Fancybox によるライトボックス表示
───────────────────────────────────────────────────────────── */
.mp_thumbnail { margin: 0; overflow: hidden; }

.mp_thumbnail .mp_nail {
  list-style: none;
  padding: 0;
  margin: 0 0 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}
.mp_thumbnail .mp_nail > li {
  width: calc(50% - 1px);
  box-sizing: border-box;
}
/* 1 枚目だけ全幅で大きく表示 */
.mp_thumbnail .mp_nail > li:first-child { width: 100%; }

.mp_thumbnail .mp_nail a {
  display: block;
  cursor: zoom-in;            /* ライトボックスで拡大可能なことを示すカーソル */
}
.mp_thumbnail .mp_nail img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
  transition: opacity 0.2s ease;
}
.mp_thumbnail .mp_nail a:hover img { opacity: 0.8; }

@media screen and (max-width: 767px) {
  .mp_thumbnail .mp_nail { margin-bottom: 10px; }
}


/* ─────────────────────────────────────────────────────────────
   2. アコーディオン（Specifications / What's included）
───────────────────────────────────────────────────────────── */

.layout_media h4 { font-size: 1.1rem; font-weight: 700; }

/* ─────────────────────────────────────────────────────────────
   3. Precautions ボックス（サイドバー内）
───────────────────────────────────────────────────────────── */
.confirmation { margin: 0 0 25px; padding: 0; }
.confirmation .header {
  padding: 10px 13px;
  background: #eee;
  text-align: center;
  border-radius: 14px 14px 0 0;
  color: red;
  font-weight: 500;
  font-size: 15px;
}
.confirmation .body {
  padding: 20px;
  border-radius: 0 0 14px 14px;
  background: #f7f7f7;
}
.confirmation ul { padding-left: 1rem; list-style-position: inherit; }
.confirmation ul:last-of-type { margin-bottom: 0; }
.confirmation ul li { font-size: 14px; line-height: 1.6; }


/* ─────────────────────────────────────────────────────────────
   4. ボタン・フォーム共通
───────────────────────────────────────────────────────────── */
.page-content.product .btn {
  padding: 13px 20px;
  border-radius: 100px;
  font-size: 15px;
  font-weight: 500;
  min-height: 50px;
  white-space: nowrap;
  text-decoration: none !important;
}
.form-select,
.button-datepicker {
  border: 2px solid #0d6efd;
  font-weight: 900;
  border-radius: .375rem;
}


/* ─────────────────────────────────────────────────────────────
   5. 全幅 3列バナー（Shipping / Pick up / Return）
───────────────────────────────────────────────────────────── */
.product-info-band {
  background: #f0f4f8;
  padding: 56px 24px;
  margin: 0;
}
.product-info-band-inner {
  max-width: 1140px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
}
/* 列間の区切り線 */
.product-info-band-inner .info-col:not(:last-child) {
  border-right: 1px solid #d4dbe4;
}
.info-col {
  padding: 0 48px;
  display: flex;
  flex-direction: column;
/*
  align-items: center;
  text-align: center;
*/
}
.info-col:first-child { padding-left: 0; }
.info-col:last-child  { padding-right: 0; }
.info-col .info-icon {
  width: auto;
  height: 120px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.info-col .info-icon img { max-width: 100%; max-height: 100%; }
.info-col h3 {
  font-size: 24px;
  font-weight: 700;
  color: #132e51;
  margin: 0 0 12px;
}
.info-col a { text-decoration: none; }
.info-col a:hover { text-decoration: underline; }
.info-col i { font-size: small; }

/* スマホ: 縦積み */
@media screen and (max-width: 767px) {
  .product-info-band { padding: 40px 20px; }
  .product-info-band-inner {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .product-info-band-inner .info-col:not(:last-child) {
    border-right: none;
    border-bottom: 1px solid #d4dbe4;
    padding-bottom: 36px;
  }
  .info-col { padding: 0; }
}


/* ─────────────────────────────────────────────────────────────
   6. FAQ セクション（全幅・アコーディオン式）
───────────────────────────────────────────────────────────── */
.product-faq-section {
  padding: 64px 24px 72px;
  background: #fff;
  max-width: 860px;
  margin: 0 auto;
}
.product-faq-section h2 {
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  color: #132e51;
  margin: 0 0 40px;
}

/* スマホ */
@media screen and (max-width: 767px) {
  .product-faq-section { padding: 48px 20px 56px; }
  .product-faq-section h2 { font-size: 22px; }
}

.faq-item .q { position: relative; margin: 0 0 10px; padding: 0 40px 10px 34px; border: none; border-bottom: 1px solid #e8e8e8; font-weight: 900; }
.faq-item .q::before { position: absolute; top: 2px; left: 0; content: ''; background: url("/static/images/ic_q_200x200.png") no-repeat left top;
    background-size: 24px; width: 24px; height: 24px; display: inline-block; vertical-align: middle; }
.faq-item .a { position: relative; margin: 0 0 10px; padding: 0 40px 30px 34px; border: none; border-bottom: 1px solid #e8e8e8;}
.faq-item .a::before { position: absolute; top: 2px; left: 0; content: ''; background: url("/static/images/ic_a_200x200.png") no-repeat left top;
    background-size: 24px; width: 24px; height: 24px; display: inline-block; vertical-align: middle; }



/* アコーディオン */
.accd {
  margin: 0;
  padding: 10px 0;
  font-size: 18px;
  font-weight: 400;
  text-align: left;
  border-top: 1px solid #ddd;
  position: relative;
}

.accd::after {
  position: absolute;
  right: 10px;
  font-family: FontAwesome;
  content: '\f107';
  text-align: center;
  width: 24px;
  height: 24px;
  display: inline-block;
  -webkit-transition: -webkit-transform .3s ease;
  transition: -webkit-transform .3s ease;
  transition: transform .3s ease;
  transition: transform .3s ease, -webkit-transform .3s ease;
  font-size: 0.8rem;
  line-height: 24px;
}
.accd.active::after {
    -webkit-transform: rotate(180deg) scale(1.0);
    -ms-transform: rotate(180deg) scale(1.0);
    transform: rotate(180deg) scale(1.0);
}

.accd+div { display: none; padding: 15px 0; }
.accd.active { font-weight: 900; }







/* レビュー */

.review_total { margin-bottom: 50px; }
.review_total .rating { display: flex; align-items: center; margin: 0 0 5px; }
.review_total .rating .icon { display: flex; }
.review_total .rating .icon svg { width: 15px; height: 15px; }
.review_total .rating .score { padding-left: 3px; }


.review_list { padding-bottom: 40px; }

.reviews h3 { font-size: 18px; font-weight: 900; }

.review { border-bottom: 1px solid #ddd; padding: 0 0 30px; }
.review:first-of-type { border-top: 1px solid #ddd; }
.review .head { display: flex; justify-content: space-between; align-items: flex-end; margin: 20px 0 10px; }
.review .head h4 { margin: 0; line-height: 1; font-size: 18px; font-weight: 400; }
.review .head .author { display: flex; font-size: 13px; }
.review .head .author .name { line-height: 1; }
.review .head .author .post { line-height: 1; }

.review .body {}
.review .body .rating { display: flex; align-items: center; margin: 0 0 5px; }
.review .body .rating .icon { display: flex; column-gap: 2px;   font-size: 12px; color: #f7d631; }
.review .body .rating .score { padding-left: 4px; }
.review .body p { line-height: 1.5; }


/* =============================================================
   layout_cart 内部スタイル
   （各 detail.html のインライン style を廃止してここで定義）
============================================================= */

/* ── 商品カテゴリ表示 ── */
.cat {
  font-size: 13px;
  color: #888;
  margin-bottom: 4px;
}

/* ── 商品タイトル ── */
.product-title {
  font-size: 26px;
  font-weight: 900;
  line-height: 1.2;
  color: #132e51;
}

/* ── フォームラベル ── */
.cart-label {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 6px;
  display: block;
}

/* ── 期間トリガーボタン（ピックアップ・返却） ── */
.period-trigger {
  cursor: pointer;
  border: 2px solid #0d6efd !important;
}
.period-trigger__hint {
  font-size: 11px;
  color: #888;
  margin-bottom: 2px;
}
.period-trigger__value {
  font-weight: 700;
  font-size: 15px;
}
.period-trigger__value--empty { color: #888; }
.period-trigger__value--set   { color: #132e51; }
.period-trigger__icon         { color: #888; }

/* ── 期間サマリー（選択後の "Jun 1 → Jun 5 (5 days)" テキスト） ── */
.period-summary {
  font-size: 12px;
  text-align: center;
  margin-top: 4px;
}

/* ── 料金 ＋ 台数 横並びレイアウト ── */
.cart-price-qty-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}
.cart-price-qty-row .product-price { flex: 1; min-width: 0; }
.cart-price-qty-row .cart-qty      { flex-shrink: 0; text-align: right; }

/* ── 価格ブロック ── */
.product-price { margin-bottom: 10px; }

.price-label {
  font-size: 14px;
  font-weight: 600;
  color: #000;
  margin-bottom: 2px;
}

.price-amount {
  font-size: 26px;
  font-weight: 900;
  color: #132e51;
  line-height: 1.2;
  font-family: "din-2014", sans-serif;
}
#price-total { font-family: "din-2014", sans-serif; font-size: 2.2rem; }

.price-tax {
  font-size: 13px;
  font-weight: 400;
  color: #888;
}

.price-breakdown {
  font-size: 12px;
  color: #888;
  margin-top: 2px;
}

/* ── 台数ブロック ── */
.cart-qty {}

.qty-label {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 6px;
  display: block;
  text-align: left;
}

/* ── eSIM: インスタント配信バッジ ── */
.instant-delivery-badge {
  border: 2px solid #e0e0e0 !important;
  background: #f8f9fa;
  cursor: default;
}
.instant-delivery-badge__text {
  font-weight: 500;
  font-size: 15px;
  color: #132e51;
}
.instant-delivery-badge__icon { color: #0d6efd; }

/* ── SIM: ピックアップ日トリガー ── */
.pickup-trigger {
  cursor: pointer;
  border: 2px solid #0d6efd !important;
}
.pickup-trigger__hint  { font-size: 11px; color: #888; margin-bottom: 2px; }
.pickup-trigger__value { font-weight: 700; color: #000; font-size: 15px; }
.pickup-trigger__value--empty { color: #888; }