@charset "UTF-8";
/* ============================================================
   MAPS スマホ版 商品ページ 改修 CSS
   default.css の後ろに読み込む（＝後勝ちで上書きする）想定
   対象: /smp/item/*.html
   ============================================================ */

/* ---- デザイントークン ---- */
#page {
  --mp-ink:   #1a1a1a;   /* 本文 */
  --mp-sub:   #767676;   /* 補助テキスト */
  --mp-line:  #e6e6e6;   /* 罫線 */
  --mp-soft:  #f6f6f6;   /* 淡い背景 */
  --mp-pad:   16px;      /* 左右の基準余白 */
}

/* ============================================================
   1. 基本のタイポグラフィ
   既存は #page{font-size:13px} と body{line-height:1} で
   本文が詰まって読みにくいので、行間と字送りを入れ直す。

   ※ .mp-item は JS が商品ページでのみ #page に付ける。
     このファイルは全ページ共通の default.css に入れる想定なので、
     素の #page に当てるとトップや一覧にも波及する。
     実際、行間を広げるとハンバーガーメニューの中身が
     624px → 725px に伸び、画面の短い端末で下の項目が
     画面外に出てタップできなくなる。
   ============================================================ */
#page.mp-item {
  font-size: 15px;
  line-height: 1.7;
  color: var(--mp-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans",
               "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* 商品ページでも、ハンバーガーメニューの中だけは元の詰め具合に戻す
   （メニューはスクロールしないので、伸ばすと下が切れる） */
#page.mp-item .menu_block { font-size: 13px; line-height: 1; }

/* ============================================================
   2. 商品名（現状 13px / line-height:1 で小さすぎる）
   ============================================================ */
#pi_name.product_name { padding: 20px var(--mp-pad) 4px; }
#pi_name.product_name ul { margin: 0; padding: 0; list-style: none; }
/* 商品名本体は li.catch */
#pi_name.product_name .catch {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .01em;
  color: var(--mp-ink);
}
/* NEW バッジは span.new（既定は青リンク色でチープに見える） */
#pi_name.product_name .new {
  display: inline-block;
  margin: 0 0 8px;
  padding: 4px 9px;
  border: 1px solid var(--mp-ink);
  border-radius: 2px;
  color: var(--mp-ink);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1;
}

/* ============================================================
   3. 価格（16px 標準ウェイト → 大きく太く）
   ============================================================ */
#pi_std_price { padding: 2px var(--mp-pad) 18px; }
#pi_std_price .productprice p {
  font-size: 12px;
  color: var(--mp-sub);
  line-height: 1.4;
}
#pi_std_price .productprice .red {
  color: var(--mp-ink);
  font-size: 27px;
  font-weight: 700;
  letter-spacing: .01em;
}
/* 「(税込)」は価格本体より小さく */
#pi_std_price .productprice .red + .red {
  font-size: 12px;
  font-weight: 400;
  color: var(--mp-sub);
  margin-left: 2px;
}

/* ============================================================
   4. 商品説明・スペック表の可読性
   ============================================================ */
#pi_sub1 #item_info h2 {
  margin: 4px 0 12px;
  padding-left: 10px;
  border-left: 3px solid var(--mp-ink);
  font-size: 17px;
  line-height: 1.5;
}
#pi_sub1 #item_info p { font-size: 15px; line-height: 1.9; }

#size_info table { width: 100%; border-collapse: collapse; }
#size_info th.item_detail,
#size_info td.item_detail2 {
  font-size: 13px;
  line-height: 1.7;
  padding: 11px 10px;
  border-bottom: 1px solid var(--mp-line);
  vertical-align: top;
}
#size_info th.item_detail {
  width: 5.5em;
  background: var(--mp-soft);
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}

/* ============================================================
   5. カテゴリ（パンくず）をチップ表示に
   JS で #pi_sub1 の下へ移動させたうえで、この見た目を当てる
   ============================================================ */
/* 決済アイコン帯（CL_banner2.jpg）の直下に入る。
   上下に罫線を引いて、続くブランド紹介と混ざらないようにする */
#pi_header_breadcrumbs.mp-cat-moved {
  margin: 14px 0 18px;
  padding: 20px var(--mp-pad) 20px;
  border-top: 1px solid var(--mp-line);
  border-bottom: 1px solid var(--mp-line);
  background: #fff;
}
#pi_header_breadcrumbs.mp-cat-moved .mp-cat-title {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--mp-sub);
}
/* JS で「1チップ = 1 li」に組み直してあるので、ol 側で折り返す */
#pi_header_breadcrumbs.mp-cat-moved nav ol {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
#pi_header_breadcrumbs.mp-cat-moved nav li { margin: 0; padding: 0; }
/* 区切りの「>」は不要 */
#pi_header_breadcrumbs.mp-cat-moved nav li > span { display: none; }
#pi_header_breadcrumbs.mp-cat-moved nav a {
  display: inline-block;
  padding: 7px 13px;
  border: 1px solid var(--mp-line);
  border-radius: 999px;
  background: #fff;
  color: var(--mp-ink);
  font-size: 12.5px;
  line-height: 1.3;
  text-decoration: none;
}
#pi_header_breadcrumbs.mp-cat-moved nav a:active { background: var(--mp-soft); }
#pi_header_breadcrumbs.mp-cat-moved nav a.homeCategory {
  border-color: var(--mp-ink);
  font-weight: 600;
}

/* ============================================================
   6. 画像ギャラリー：タップで拡大できることを伝える
   ============================================================ */
#gallery .galleria-stage { cursor: zoom-in; }

/* 送り矢印の当たり判定を、見えている矢印に合わせる。
   スプライト(classic-map.png)は 1016x31 しかないため矢印の見た目は 31px 角なのに、
   要素は 62x124 あり、当たり判定の中心が矢印より 42px も下にずれていた。
   その結果「矢印の下の、ただの画像に見える帯」をタップしても画像が送られてしまう。
   高さを 44px（タップ目標の下限）に詰めて、矢印の位置と一致させる。 */
#gallery .galleria-image-nav-left,
#gallery .galleria-image-nav-right { height: 44px; }
/* 右上に置く。.galleria-stage の下辺はサムネイル帯まで含むため、
   bottom 基準にするとサムネイルに重なる */
#gallery .mp-zoom-hint {
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 11px;
  border-radius: 999px;
  background: rgba(0,0,0,.55);
  color: #fff;
  font-size: 11px;
  line-height: 1;
  letter-spacing: .02em;
  pointer-events: none;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
#gallery .mp-zoom-hint svg { width: 13px; height: 13px; display: block; }
/* 拡大中はヒントを隠す */
body.mp-zooming #gallery .mp-zoom-hint { opacity: 0; }

/* Fancybox の見た目
   商品写真は白背景のものが多いので、背景は必ず暗くする。
   （白背景にすると商品の輪郭が飛んで「消えたように」見える） */
/* 追従ヘッダー #header_main が z-index:999999 で固定されているため、
   これより上に出さないと閉じるボタンがヘッダーに隠れる */
.fancybox__container { z-index: 1000000; }
.fancybox__backdrop { background: #111; }
.fancybox__toolbar { text-shadow: none; }
.fancybox__thumbs { background: #111; }
.fancybox__container { --f-spinner-color-1: rgba(255,255,255,.15); --f-spinner-color-2:#fff; }

/* ============================================================
   7. 余白の整理（セクション間のリズムを揃える）
   ============================================================ */
#pi_sub1 .freearea > #all_info > div { padding-left: var(--mp-pad); padding-right: var(--mp-pad); }
#pi_sub1 #size_info { padding-left: var(--mp-pad); padding-right: var(--mp-pad); }
#pi_sub1 .shopguide { padding: 18px var(--mp-pad); }
#pi_sub1 .shopguide a {
  display: block;
  padding: 15px 12px;
  border: 1px solid var(--mp-ink);
  color: var(--mp-ink);
  font-size: 14px;
  text-align: center;
  text-decoration: none;
}