/* ============================================================
   京都北山恋豆富 サイト用スタイルシート
   - ブランドの見た目を踏襲しつつ、WordPress テーマとして運用できる構成
   - ブランドアクセント: #42BFB0（ティールグリーン）
   - 強調ボタン: #C7252B（朱赤）
   - 商品セクション背景: 黒
============================================================ */

/* 日本語本文を読みやすくするため、UD明朝体のWebフォントを共通で読み込む */
@import url("https://fonts.googleapis.com/css2?family=BIZ+UDPMincho:wght@400;700&display=swap");

/* ---- リセット & ベース ---- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: "BIZ UDPMincho", "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 ProN W3",
    "Hiragino Mincho ProN", "游明朝", "Yu Mincho", serif;
  font-size: 14px;
  line-height: 1.7;
  font-weight: 400;
  color: #333;
  background: #fff;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color .2s ease, opacity .2s ease; }
a:hover { color: #42bfb0; }
ul, ol { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, select, textarea { font-family: inherit; font-size: 14px; color: #333; }

/* メニューやフォームなど操作に関わる文字は、読み取りやすい太さにする */
.global-nav a,
.header-cta,
button,
input,
select,
textarea,
.product-name,
.product-price,
.blog-title,
.form-section-title,
.order-step-label {
  font-weight: 700;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); border: 0;
}

/* ============================================================
   ヘッダー
============================================================ */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: #fff;
  border-bottom: 1px solid #f0f0f0;
}
.header-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 14px 32px;
  display: flex;
  align-items: center;
  gap: 40px;
}
.site-logo img { height: 60px; width: auto; }
.global-nav { flex: 1; }
.global-nav ul { display: flex; gap: 36px; }
.global-nav a {
  font-size: 16px;
  letter-spacing: .05em;
  color: #333;
  padding: 8px 4px;
  display: inline-block;
}
/* メインメニューは、マウスオーバー時と開いている画面の表示をブランドの朱赤に統一する。 */
.global-nav .is-current a,
.global-nav .current-menu-item > a,
.global-nav .current_page_item > a,
/* 記事詳細など下層では親の「ブログ」に `current-menu-ancestor` が付くため、同じ朱赤で揃える。 */
.global-nav .current-menu-ancestor > a,
.global-nav .current-menu-parent > a,
.global-nav a:hover,
.global-nav a:focus-visible { color: #c7252b; }

/* ヘッダー右上の「ご注文はこちら」ブロック（`.header-actions`）は表示しない。注文への案内は選択リストの「注文フォームへ」等から行う。 */
.header-actions {
  display: none !important;
}
.header-cta {
  display: inline-block;
  background: #c7252b;
  color: #fff;
  font-size: 13px;
  letter-spacing: .1em;
  padding: 10px 20px;
  border-radius: 2px;
  transition: background .2s ease;
}
.header-cta:hover { background: #a91d22; color: #fff; }
.header-social {
  margin-left: auto;
  display: flex;
  align-items: center;
}
/* ヘッダー右端の Instagram 導線は、グラデーション公式アイコンのみを置く。 */
.header-instagram-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  line-height: 0;
  border-radius: 10px;
  background: transparent;
}
.header-instagram-link:hover,
.header-instagram-link:focus-visible {
  opacity: 0.88;
  outline: none;
}
.header-instagram-link:focus-visible {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #42bfb0;
}
.header-instagram-img {
  display: block;
  width: 28px;
  height: 28px;
}

/* 選択リストはヘッダー内で控えめに表示し、未選択時は通常のナビを邪魔しないよう非表示にする。 */
.site-header .selection-cart-bar--header {
  display: block;
  max-width: none;
  margin: 0;
  padding: 8px 32px;
  background: #fcfaf3;
  border-width: 1px 0 0;
  border-color: #efe5d3;
  border-radius: 0;
}
.site-header .selection-cart-bar--header.is-empty {
  display: none;
}
.site-header .selection-cart-bar--header .selection-cart-bar-inner {
  /* ヘッダー共通バーでは、選択数・合計金額を画面中央に置き、操作ボタンは右側にまとめる。 */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  max-width: 1280px;
  margin: 0 auto;
}
.site-header .selection-cart-bar--header .selection-cart-summary {
  grid-column: 2;
  font-size: 13px;
  text-align: center;
}
.site-header .selection-cart-bar--header .selection-cart-actions {
  grid-column: 3;
  justify-self: end;
}
.site-header .selection-cart-bar--header .btn-cart-clear,
.site-header .selection-cart-bar--header .btn-cart-order,
.site-header .selection-cart-bar--header .btn-cart-to-products {
  /* 「商品一覧へ」（リンク）と「選択をクリア」（button）で縦幅・太さがずれないよう、flex と最小高さを明示する。 */
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

/* ============================================================
   メインビジュアル（左:写真スライド / 右:ブランドロゴ + CTA）
============================================================ */
.hero { position: relative; width: 100%; background: #000; overflow: hidden; }
.hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  max-width: 1400px;
  margin: 0 auto;
  min-height: 540px;
}
.hero-visual {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 480px;
}
.slideshow {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 480px;
}
.slide {
  position: absolute; inset: 0;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1.8s ease-in-out, transform 10s ease-out;
  transform: scale(1.02);
}
.slide.is-active {
  opacity: 1;
  transform: scale(1);
}
.slideshow-dots {
  position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 10px; z-index: 2;
}
.dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(255,255,255,.5);
  border: 1px solid rgba(255,255,255,.8);
  padding: 0;
  transition: background .2s ease;
}
.dot.is-active { background: #fff; }

/* 右カラム：縦型ブランドロゴ + 商品一覧ボタン */
.hero-brand {
  text-align: center;
  padding: 40px 24px;
}
.hero-brand .brand-mark {
  margin: 0 auto 36px;
  max-width: 320px;
}
.hero-brand .brand-mark img {
  margin: 0 auto;
  width: 100%;
  height: auto;
  mix-blend-mode: screen;
}
.hero-brand .section-cta {
  margin-top: 0;
}

/* ============================================================
   ページヘッダ（下層共通）
============================================================ */
.page-header {
  background: #f7f4ee;
  padding: 60px 24px 50px;
  text-align: center;
  border-bottom: 1px solid #ece6d9;
}
.page-header h1 {
  font-size: 28px;
  font-weight: normal;
  letter-spacing: .15em;
  color: #333;
  margin-bottom: 8px;
}
.page-header .lead {
  font-size: 14px;
  color: #666;
  letter-spacing: .05em;
}
.breadcrumb {
  max-width: 1100px;
  margin: 0 auto;
  padding: 14px 24px;
  font-size: 12px;
  color: #888;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.breadcrumb a { color: #888; }
.breadcrumb a:hover { color: #42bfb0; }
.breadcrumb .sep::before { content: "›"; margin: 0 4px; color: #ccc; }

/* ============================================================
   商品セクション（黒背景・トップ用）
============================================================ */
.products-section { background: #000; padding: 60px 24px 80px; text-align: center; }
.brand-mark { margin: 0 auto 30px; max-width: 320px; }
.brand-mark img { margin: 0 auto; width: 100%; height: auto; mix-blend-mode: screen; }
.section-cta { margin-bottom: 40px; }
.btn-pill {
  display: inline-block;
  background: #c7252b; color: #fff;
  font-size: 16px; letter-spacing: .15em;
  padding: 12px 48px;
  clip-path: polygon(8% 0, 92% 0, 100% 50%, 92% 100%, 8% 100%, 0 50%);
  transition: background .2s ease;
}
.btn-pill:hover { background: #a91d22; color: #fff; }

.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px 24px;
  max-width: 1100px;
  margin: 0 auto;
}
.product-card { text-align: center; color: #fff; }
.product-image { display: block; overflow: hidden; background: #1a1a1a; }
.product-image img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  transition: transform .4s ease;
}
.product-image:hover img { transform: scale(1.04); }
.product-name { margin-top: 14px; font-size: 14px; font-weight: normal; color: #fff; letter-spacing: .05em; }
.product-name a:hover { color: #42bfb0; }
.product-price { margin-top: 6px; font-size: 14px; color: #fff; }
.price-label { font-size: 11px; color: #ccc; margin-right: 6px; }
.price-value { font-family: Arial, sans-serif; font-weight: bold; font-size: 16px; }
.product-detail-btn {
  display: inline-block;
  margin-top: 12px;
  font-size: 12px;
  color: #fff;
  border: 1px solid #fff;
  padding: 8px 16px;
  background: transparent;
  letter-spacing: .05em;
  transition: background .2s, color .2s, border-color .2s;
}
.product-detail-btn:hover { background: #42bfb0; border-color: #42bfb0; color: #fff; }

/* トップ商品カード：`front-page.php` の商品セクションへ直接指定し、白枠風の見え方を抑える。 */
.products-section .product-card {
  border: 0;
  box-shadow: none;
  outline: none;
  background: transparent;
}
.products-section .product-image {
  background: transparent;
  border: 0;
  box-shadow: none;
  outline: none;
}
.products-section .product-image img {
  /* 画像素材に含まれる白い外周をトップ表示では見せないよう、確実に内側を表示する。 */
  transform: scale(1.12);
  transform-origin: center center;
}
.products-section .product-image:hover img {
  transform: scale(1.15);
}
.products-section .product-name {
  margin-top: 18px;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: .08em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.products-section .product-price {
  margin-top: 10px;
  font-size: 17px;
}
.products-section .price-label {
  font-size: 13px;
  color: #e0e0e0;
}
.products-section .price-value {
  font-size: 22px;
  letter-spacing: 0.02em;
  color: #fff;
}

/* ============================================================
   送料込みバナー
============================================================ */
.shipping-banner {
  background: #000;
  padding: 18px 24px 40px;
  text-align: center;
}
.shipping-banner img {
  display: block;
  margin: 0 auto;
  width: 48vw;
  min-width: 360px;
  max-width: 520px;
  height: auto;
}

/* ============================================================
   ブログセクション（一覧トップ）
============================================================ */
.blog-section { background: #fff; padding: 60px 24px; }
.blog-section .section-title {
  text-align: center;
  font-size: 22px;
  font-weight: normal;
  letter-spacing: .15em;
  margin-bottom: 32px;
  color: #333;
}
.blog-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.blog-card {
  background: #fff;
  border: 1px solid #e8e8e8;
  display: flex; flex-direction: column;
  transition: box-shadow .2s ease;
}
.blog-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.blog-thumb { display: block; overflow: hidden; aspect-ratio: 16 / 9; }
.blog-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.blog-thumb:hover img { transform: scale(1.05); }
.blog-body { padding: 18px 20px 22px; }
.blog-title { font-size: 16px; font-weight: normal; line-height: 1.5; color: #333; margin-bottom: 10px; }
.blog-title a:hover { color: #42bfb0; }
.blog-date { font-size: 12px; color: #888; font-family: Arial, "ＭＳ Ｐ明朝", serif; }
.blog-pagination {
  margin: 40px auto 0;
  text-align: center;
}
.blog-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.blog-pagination .page-numbers li {
  margin: 0;
}
.blog-pagination .page-numbers a,
.blog-pagination .page-numbers span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid #d2cdbf;
  color: #333;
  background: #fff;
  text-decoration: none;
}
.blog-pagination .page-numbers .current {
  border-color: #42bfb0;
  color: #fff;
  background: #42bfb0;
}
.blog-pagination .page-numbers a:hover,
.blog-pagination .page-numbers a:focus-visible {
  border-color: #42bfb0;
  color: #42bfb0;
}

/* ============================================================
   ブログ詳細（single）
============================================================ */
.post-single {
  max-width: 760px;
  margin: 0 auto;
  padding: 60px 24px 80px;
}
.post-single .post-meta { font-size: 12px; color: #888; margin-bottom: 12px; }
.post-single h1.post-title {
  font-size: 26px; font-weight: normal; line-height: 1.5;
  margin-bottom: 24px; color: #333; letter-spacing: .05em;
}
.post-single .post-eyecatch { margin: 0 0 28px; aspect-ratio: 16 / 9; overflow: hidden; }
.post-single .post-eyecatch img { width: 100%; height: 100%; object-fit: cover; }
.post-single .post-body { font-size: 15px; line-height: 1.95; color: #333; }
.post-single .post-body p { margin: 0 0 1.5em; }
.post-single .post-body h2 { font-size: 20px; margin: 2em 0 .8em; padding-left: 10px; border-left: 4px solid #42bfb0; }
.post-single .post-body h3 { font-size: 17px; margin: 1.6em 0 .6em; color: #444; }
.post-single .post-body img { margin: 1em auto; }
.post-single .post-back {
  margin-top: 40px;
  display: inline-block;
  font-size: 13px;
  color: #555;
  border-bottom: 1px solid #ccc;
  padding-bottom: 2px;
}

/* ============================================================
   商品一覧ページ（products.html）
============================================================ */
.products-page {
  background: #fff;
  /* 「商品一覧」画面：端に寄りすぎないよう、横の余白を確保する。 */
  padding: 18px 20px 72px;
  color: #000;
}
.page-products main {
  background: #fff;
}
.page-products .global-nav .is-current a {
  color: #c7252b;
}
.page-products .product-grid {
  max-width: 980px;
  grid-template-columns: repeat(4, minmax(145px, 1fr));
  gap: 42px 20px;
  align-items: start;
}
.page-products .product-card {
  text-align: center;
  color: #000;
}
.page-products .product-image {
  /* 商品一覧：画像まわりの白い枠に見える背景・線を消す。 */
  background: transparent;
  border: 0;
  box-shadow: none;
  outline: none;
  position: relative;
}
.page-products .product-image img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  /* 商品一覧：画像素材の外周が枠に見えないよう、表示範囲を少しだけ内側に寄せる。 */
  transform: scale(1.06);
}
.page-products .product-image-main,
.page-products .product-image-hover {
  transition: opacity .35s ease, transform .35s ease;
}
.page-products .product-image-main {
  position: relative;
  z-index: 1;
}
.page-products .product-image-hover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 2;
}
/* 「商品一覧」画面では、マウス操作時のみ箱画像へ切り替える。 */
@media (hover: hover) and (pointer: fine) {
  .page-products .product-image:hover .product-image-main,
  .page-products .product-image:focus-visible .product-image-main,
  .page-products .product-image.is-hovered .product-image-main,
  .page-products .product-image-main:hover {
    opacity: 0;
  }
  .page-products .product-image:hover .product-image-hover,
  .page-products .product-image:focus-visible .product-image-hover,
  .page-products .product-image.is-hovered .product-image-hover,
  .page-products .product-image-main:hover + .product-image-hover,
  .page-products .product-image-hover:hover {
    opacity: 1;
  }
  .page-products .product-image:hover img,
  .page-products .product-image:focus-visible img,
  .page-products .product-image.is-hovered img {
    transform: scale(1.09);
  }
}
.page-products .product-name {
  margin-top: 14px;
  color: #000;
  font-weight: 700;
  font-size: 19px;
  line-height: 1.35;
  letter-spacing: 0;
}
.page-products .product-name a:hover {
  color: #000;
  opacity: .75;
}
.page-products .product-price {
  margin-top: 4px;
  color: #000;
  font-size: 18px;
  line-height: 1.35;
}
.page-products .price-value {
  color: #000;
  font-family: inherit;
  font-size: 19px;
  font-weight: 700;
}
@media (max-width: 760px) {
  /* 「商品一覧」画面：スマホ幅でコンテンツまわりの余白を確保する。 */
  .products-page {
    padding-left: 22px;
    padding-right: 22px;
  }
  .page-products .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 34px 18px;
  }
  /* 「商品一覧」：トップと同様、拡大が強いと左右が欠けるため弱める。 */
  .page-products .product-image img {
    transform: scale(1.02);
  }
  .page-products .product-image:hover img,
  .page-products .product-image:focus-visible img,
  .page-products .product-image.is-hovered img {
    transform: scale(1.06);
  }
  .page-products .product-name {
    font-size: 16px;
  }
  .page-products .product-price,
  .page-products .price-value {
    font-size: 17px;
  }
}
@media (max-width: 420px) {
  .page-products .product-grid {
    grid-template-columns: 1fr;
  }
  /* 「商品一覧」1列時はカード幅が広いため、ページ端の余白をさらに確保する。 */
  .products-page {
    padding-left: 26px;
    padding-right: 26px;
  }
}

/* ============================================================
   汎用：本文ページ（法務系）
============================================================ */
.legal-page {
  max-width: 820px;
  margin: 0 auto;
  padding: 50px 24px 80px;
  font-size: 14px;
  line-height: 1.95;
}
.legal-page h2 {
  font-size: 17px;
  font-weight: normal;
  margin: 2em 0 .6em;
  padding-left: 10px;
  border-left: 4px solid #42bfb0;
  color: #333;
}
.legal-page p { margin: 0 0 1em; }

/* 法務ページのメール表記：`mailto` で本文色に揃え、ホバー時のみアクセント色にする。 */
.legal-page a.legal-contact-email,
.legal-page a.legal-contact-email:visited {
  color: #333;
  -webkit-text-fill-color: #333;
  text-decoration: none;
}
.legal-page a.legal-contact-email:hover {
  color: #42bfb0;
  -webkit-text-fill-color: #42bfb0;
  text-decoration: underline;
}

/* BIZ UDPMincho のハイフン（U+002D）が細く見えるのを、本文と同じ字重のまま左右 0.15px の text-shadow だけで軽く補正する（太字合成は使わない）。 */
.legal-page .legal-hyphen-emphasis {
  font-weight: inherit;
  font-synthesis: none;
  text-shadow: 0.15px 0 0 currentColor, -0.15px 0 0 currentColor;
}

/* プライバシーポリシー等：グローバルの `ul, ol { list-style: none }` を上書きし、条の直下の「項」「号」を 1. 2. … のように表示する（本番ページの条項番号に合わせる）。 */
.legal-page ol {
  list-style-type: decimal;
  list-style-position: outside;
  padding-left: 1.75em;
  margin: 0 0 1em;
}
.legal-page ol ol {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  padding-left: 1.75em;
}
.legal-page ol ol ol {
  margin-top: 0.35em;
  margin-bottom: 0.35em;
  padding-left: 1.75em;
}
.legal-page ol li {
  margin: 0 0 0.45em;
  padding-left: 0.35em;
}
.legal-page li > p {
  margin: 0 0 0.6em;
}

.legal-page table {
  width: 100%;
  border-collapse: collapse;
  margin: 1em 0 1.5em;
  font-size: 13px;
}
.legal-page table th,
.legal-page table td {
  border: 1px solid #e0d8c5;
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
}
.legal-page table th {
  background: #f7f4ee;
  width: 28%;
  font-weight: normal;
  color: #555;
}

/* 「特定商取引法に基づく表示」：本番ページと同様の ■ 行＋続き行のインデント。ベースは .legal-page のフォントサイズ／行間をそのまま使う。 */
.legal-page .legal-tokushoho-row {
  margin: 0 0 0.65em;
}
.legal-page .legal-tokushoho-row + .legal-tokushoho-sub {
  margin-top: -0.45em;
}
.legal-page .legal-tokushoho-row--spaced-before {
  margin-top: 1.25em;
}
.legal-page .legal-tokushoho-sub {
  margin: 0 0 0.35em;
  padding-left: 1.5em;
}
.legal-page .legal-tokushoho-sub + .legal-tokushoho-row {
  margin-top: 0.5em;
}
.legal-page .legal-tokushoho-sub--tight-top {
  margin-top: -0.35em;
}

/* ============================================================
   注文フォーム（order.html）
============================================================ */
.order-form-wrap {
  max-width: 920px;
  margin: 0 auto;
  padding: 40px 24px 80px;
}
.form-step {
  display: flex; justify-content: center; gap: 0;
  margin-bottom: 36px;
  border-bottom: 1px solid #e6e0d2;
}
.form-step .step {
  flex: 1;
  text-align: center;
  font-size: 12px;
  color: #aaa;
  padding: 14px 8px;
  letter-spacing: .1em;
  position: relative;
}
.form-step .step.is-current {
  color: #c7252b;
  border-bottom: 2px solid #c7252b;
  margin-bottom: -1px;
}
.form-step .step .step-num {
  display: inline-block;
  font-family: Arial, sans-serif;
  font-weight: bold;
  margin-right: 6px;
}

/* 5ステップ入力ウィザード用（項目名が長いため文字をやや詰める） */
.order-wizard-steps .step {
  font-size: 11px;
  padding: 12px 4px;
  letter-spacing: 0.04em;
}
@media (min-width: 720px) {
  .order-wizard-steps .step {
    font-size: 12px;
    padding: 14px 6px;
  }
}

/* 注文フォームのステップパネル（1画面に1ブロックのみ表示） */
.order-step-panel {
  display: none;
}
.order-step-panel.is-active {
  display: block;
  /* 「ご注文フォーム」画面のステップ切り替えが分かるよう、控えめなフェードを付ける。 */
  animation: koitofu-order-step-fade .42s ease-out;
}
@keyframes koitofu-order-step-fade {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.order-step-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 28px;
  padding-bottom: 8px;
}
.order-step-nav .order-step-next,
.order-step-nav .order-step-prev,
.order-step-nav .submit-btn {
  background: #fff;
  color: #333;
  border: 1px solid #ccc;
  font-size: 15px;
  letter-spacing: 0.1em;
  padding: 14px 36px;
  border-radius: 2px;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
/* 注文フォーム：次に進む主ボタンはティールで目立たせ、戻る操作と視覚的に分ける。 */
.order-step-nav .order-step-next,
.order-step-nav .submit-btn {
  background: #42bfb0;
  border-color: #42bfb0;
  color: #fff;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(66, 191, 176, 0.35);
}
.order-step-nav .order-step-next:hover,
.order-step-nav .order-step-next:focus-visible,
.order-step-nav .submit-btn:hover,
.order-step-nav .submit-btn:focus-visible {
  background: #319e91;
  border-color: #258a7e;
  color: #fff;
}
.order-step-nav .order-step-prev:hover,
.order-step-nav .order-step-prev:focus-visible {
  border-color: #42bfb0;
  color: #2a9a8d;
}
.order-step-nav .submit-btn {
  margin: 0;
}
.order-wizard-footnote {
  text-align: center;
  margin-top: 16px;
  font-size: 12px;
  color: #888;
}

.form-section {
  border: 1px solid #e6e0d2;
  background: #fff;
  margin-bottom: 28px;
}
.form-section > .form-section-head {
  background: #f7f4ee;
  padding: 14px 18px;
  border-bottom: 1px solid #e6e0d2;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.form-section-head h2 {
  font-size: 15px;
  font-weight: normal;
  letter-spacing: .1em;
  color: #333;
}
.form-section-head .ghost-btn {
  font-size: 12px;
  color: #555;
  border: 1px solid #ccc;
  padding: 6px 12px;
  background: #fff;
  border-radius: 2px;
  transition: all .2s ease;
}
.form-section-head .ghost-btn:hover {
  background: #42bfb0;
  border-color: #42bfb0;
  color: #fff;
}
.form-section > .form-section-head.form-section-head--order-step2 {
  /* ヘルプ文と横並びにすると h2 が幅不足で改行されるため、見出しを上段で全幅にして1行表示を優先する。 */
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 10px;
}
.form-section-head--order-step2 h2 {
  width: 100%;
  margin: 0;
  flex: none;
}
.form-section-head--order-step2 .field-help {
  width: 100%;
  max-width: 100%;
}

.form-section > .form-section-body { padding: 22px 22px 24px; }

.form-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 14px 20px;
  padding: 12px 0;
  border-bottom: 1px dashed #efe9da;
  align-items: start;
}
.form-row:last-child { border-bottom: 0; }
.form-row > label,
.form-row > .form-label {
  font-size: 13px;
  color: #555;
  padding-top: 9px;
  letter-spacing: .05em;
}
.form-row .req {
  display: inline-block;
  background: #c7252b;
  color: #fff;
  font-size: 10px;
  padding: 2px 6px;
  margin-left: 6px;
  border-radius: 2px;
  vertical-align: middle;
  letter-spacing: 0;
}
/* 注文フォーム：画面クラスに依存せず、ラベル横の必須記号を赤文字・白背景に統一する。 */
.order-form-wrap .form-row .req,
.order-form-wrap .shipping-card .req {
  background: #fff;
  color: #c7252b;
  font-size: 1.15em;
  font-weight: 700;
  padding: 0 3px;
  margin-left: 4px;
  border-radius: 0;
  vertical-align: baseline;
  line-height: 1;
}
.form-row .opt {
  display: inline-block;
  background: #999;
  color: #fff;
  font-size: 10px;
  padding: 2px 6px;
  margin-left: 6px;
  border-radius: 2px;
  vertical-align: middle;
  letter-spacing: 0;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="number"],
select,
textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid #d2cdbf;
  background: #fff;
  border-radius: 2px;
  transition: border-color .2s ease;
}
/* 注文フォーム：入力ミスを避けるため、注文者情報を中心にラベルと入力欄を少し大きくする。 */
.order-form-wrap .form-row > label,
.order-form-wrap .form-row > .form-label {
  font-size: 14px;
}
.order-form-wrap input,
.order-form-wrap select,
.order-form-wrap textarea {
  font-size: 15px;
}
/* 注文フォーム：画面クラスに依存せず、例示用の文字をさらに淡くして入力済みの文字と区別する。 */
.order-form-wrap input::placeholder,
.order-form-wrap textarea::placeholder {
  color: #ded9cf;
  opacity: 1;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: #42bfb0;
  box-shadow: 0 0 0 3px rgba(66,191,176,.12);
}
textarea { min-height: 100px; resize: vertical; }
.field-help {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: #888;
}

.field-inline { display: flex; gap: 10px; }
.field-inline > * { flex: 1; }

.field-postal { display: flex; gap: 8px; align-items: center; }
.field-postal input { max-width: 140px; }
.field-postal .postal-mark { color: #888; }

/* 商品行（明細） */
.items-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
  margin-top: 6px;
}
.items-table thead th {
  text-align: left;
  font-weight: normal;
  font-size: 12px;
  color: #777;
  padding: 8px 10px;
  background: #faf7ef;
  border-bottom: 1px solid #e6e0d2;
}
.items-table td {
  padding: 10px;
  border-bottom: 1px dashed #efe9da;
  vertical-align: middle;
}
.items-table .col-product { width: 50%; }
.items-table .col-qty { width: 110px; }
.items-table .col-ship { width: 130px; }
.items-table .col-action { width: 56px; text-align: center; }
/* 「ご注文商品とお届け先」テーブル：商品列が複数行でも、数量入力と「発送先を変更」ボタンを行の下端で揃える。 */
.items-table--order-items td.col-product {
  vertical-align: top;
}
.items-table--order-items td.col-qty,
.items-table--order-items td.col-ship,
.items-table--order-items td.col-action {
  vertical-align: bottom;
}
/* 数量入力の高さを「発送先を変更」ボタン（`min-height: 34px`）に合わせる。 */
.items-table--order-items .item-qty {
  box-sizing: border-box;
  min-height: 34px;
  padding: 7px 12px;
  line-height: 1.2;
}
.items-table .row-remove {
  color: #c7252b;
  border: 1px solid #e7c8c9;
  background: #fff;
  width: 28px; height: 28px;
  border-radius: 50%;
  font-size: 16px;
  line-height: 1;
  transition: background .2s, color .2s;
}
.items-table .row-remove:hover { background: #c7252b; color: #fff; }

/* 注文UI再設計：商品行の発送先パネル・画面外の発送先プール */
.item-ship-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 120px; }
.item-shipping-summary { font-size: 14px; color: #333; font-weight: 600; }
.item-shipping-panel-cell { padding: 0 !important; border-bottom: 1px solid #e6e0d2; background: #faf7ef; }
.item-shipping-modal {
  position: fixed;
  inset: 0;
  z-index: 9990;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.item-shipping-modal[hidden] { display: none !important; }
.item-shipping-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}
.item-shipping-modal-dialog {
  position: relative;
  z-index: 1;
  width: min(720px, 100%);
  max-height: min(760px, calc(100vh - 48px));
  overflow: auto;
  background: #faf7ef;
  border: 1px solid #e6e0d2;
  border-radius: 10px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.2);
}
.item-shipping-modal.is-open .item-shipping-modal-backdrop {
  animation: item-shipping-modal-backdrop-in .2s ease-out both;
}
.item-shipping-modal.is-open .item-shipping-modal-dialog {
  animation: item-shipping-modal-in .22s ease-out both;
}
@keyframes item-shipping-modal-in {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes item-shipping-modal-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.item-shipping-panel { padding: 20px 22px 22px; }
.item-shipping-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 14px;
}
.item-shipping-panel-title { font-size: 16px; font-weight: 700; margin: 0; color: #333; }
.item-shipping-panel-product { margin: 4px 0 0; font-size: 12px; color: #777; }
/* お届け先が 0 件のとき「お届け先を追加」で出る、届け先タイプ選択の説明文 */
.shipping-zero-choice-intro { margin: 0 0 4px; max-width: 520px; line-height: 1.5; }
.item-shipping-choices { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.shipping-choice-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 14px;
  row-gap: 4px;
  align-items: center;
  border: 1px solid #e6e0d2;
  border-radius: 8px;
  padding: 12px 14px;
  background: #fff;
}
.shipping-choice-card.is-selected {
  border-color: #42bfb0;
  background: rgba(66, 191, 176, 0.08);
  box-shadow: 0 0 0 1px rgba(66, 191, 176, 0.25);
}
.shipping-choice-title { grid-column: 1; font-weight: 700; color: #333; font-size: 14px; }
.shipping-choice-sub { grid-column: 1; font-size: 12px; margin-top: 4px; line-height: 1.45; }
.shipping-choice-actions {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-self: center;
  gap: 8px;
  margin-top: 0;
}
/* お届け先カード：カード内の操作は白背景の補助ボタンにし、「新しい発送先を登録」を主操作として目立たせる。 */
.item-shipping-choices .shipping-choice-pick,
.item-shipping-choices .shipping-choice-edit-customer,
.item-shipping-choices .shipping-choice-edit-extra {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 5px 10px;
  border-radius: 4px;
  border: 1px solid #42bfb0;
  background: #fff;
  color: #42bfb0;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  box-shadow: none;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.item-shipping-choices .shipping-choice-pick:hover,
.item-shipping-choices .shipping-choice-pick:focus-visible,
.item-shipping-choices .shipping-choice-edit-customer:hover,
.item-shipping-choices .shipping-choice-edit-customer:focus-visible,
.item-shipping-choices .shipping-choice-edit-extra:hover,
.item-shipping-choices .shipping-choice-edit-extra:focus-visible {
  background: rgba(66, 191, 176, 0.08);
  border-color: #319e91;
  color: #319e91;
}
.shipping-choice-selected-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(66, 191, 176, 0.16);
  color: #258a7e;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}
.item-shipping-panel-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.item-new-extra-wrap { margin-top: 14px; padding: 14px; border: 1px dashed #c9c2b5; border-radius: 8px; background: #fff; }
.item-new-extra-title { font-weight: 700; margin: 0 0 10px; font-size: 14px; }
.item-new-extra-actions { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; }
/* 注文UI再設計：商品行から次に押す操作が分かるよう、発送先変更と新規登録をボタンとして強調する。 */
/* 「それぞれ別の住所に届ける」ボタンも「発送先を変更」ボタンと同じ強調スタイルに揃える。 */
.item-change-shipping,
.split-items-by-address,
.item-add-extra-shipping,
.item-save-new-extra {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 8px 16px;
  border-radius: 4px;
  border: 1px solid #42bfb0;
  background: #42bfb0;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  box-shadow: 0 2px 8px rgba(66, 191, 176, 0.28);
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.item-change-shipping:hover,
.item-change-shipping:focus-visible,
.split-items-by-address:hover,
.split-items-by-address:focus-visible,
.item-add-extra-shipping:hover,
.item-add-extra-shipping:focus-visible,
.item-save-new-extra:hover,
.item-save-new-extra:focus-visible {
  background: #319e91;
  border-color: #258a7e;
  color: #fff;
  box-shadow: 0 3px 10px rgba(66, 191, 176, 0.36);
  transform: translateY(-1px);
}
.mini-btn.is-ghost {
  background: transparent;
  border: 1px solid #d4cfc4;
  color: #555;
}
.mini-btn.is-ghost:hover,
.mini-btn.is-ghost:focus-visible { border-color: #42bfb0; color: #319e91; }
/* 注文UI再設計：「閉じる」「キャンセル」は補助操作のテキストリンク風に揃える。 */
.item-shipping-panel-close,
.item-cancel-new-extra {
  border: 0;
  background: transparent;
  color: #666;
  padding: 8px 4px;
  box-shadow: none;
  font-size: 14px;
  font-weight: 400;
}
.item-shipping-panel-close:hover,
.item-shipping-panel-close:focus-visible,
.item-cancel-new-extra:hover,
.item-cancel-new-extra:focus-visible {
  border: 0;
  color: #319e91;
  background: transparent;
  text-decoration: underline;
}
@media (max-width: 640px) {
  .item-shipping-panel { padding: 18px 14px 20px; }
  .shipping-choice-card {
    grid-template-columns: 1fr;
  }
  .shipping-choice-actions {
    grid-column: 1;
    grid-row: auto;
    justify-content: flex-start;
    margin-top: 8px;
  }
}
.extra-shipping-pool,
.shipping-post-stub {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.order-global-delivery-row { margin-bottom: 8px; }
/* 希望納品日：ラジオ「希望なし」を上に配置し、ラジオと日付入力の並びを読みやすくする。 */
.order-global-delivery-row .order-delivery-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
.order-delivery-radios {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}
.order-delivery-radio-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 15px;
}
.order-delivery-date-block input[type="date"] {
  max-width: 220px;
}
.order-split-items-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0 12px;
}
/* 住所基準UI：お届け先ブロックと商品割当行のレイアウト（「ご注文商品とお届け先」画面）。 */
.order-address-empty {
  margin: 12px 0;
  padding: 12px 14px;
}
.order-address-blocks {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 16px;
}
.order-address-block {
  border: 1px solid #d4cfc4;
  border-radius: 8px;
  padding: 14px 16px 16px;
  background: #faf8f4;
}
.order-address-block-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e5e0d6;
}
.order-address-head-labels {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 12px;
  flex: 1 1 160px;
  min-width: 0;
}
.order-address-title {
  font-weight: 700;
  font-size: 16px;
  flex: 0 0 auto;
}
.order-address-regional-shipping-note {
  font-size: 13px;
  font-weight: normal;
  color: #7d1818;
  line-height: 1.45;
  flex: 0 1 auto;
}
.order-address-gift-fee-note {
  font-size: 13px;
  font-weight: normal;
  color: #7d1818;
  line-height: 1.45;
  flex: 0 1 100%;
}
.order-address-ship-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 8px 16px;
  border-radius: 4px;
  /* 要望：文字と背景を反転（白背景・42BFB0 の枠と文字） */
  border: 1px solid #42bfb0;
  background: #fff;
  color: #42bfb0;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.order-address-ship-btn:hover,
.order-address-ship-btn:focus-visible {
  background: rgba(66, 191, 176, 0.12);
  border-color: #42bfb0;
  color: #319e91;
}
/* 商品行削除・お届け先ブロック削除：白背景・C7252B の枠と文字（要望：前景と背景を反転）。 */
.order-delete-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 8px 14px;
  border-radius: 4px;
  border: 1px solid #c7252b;
  background: #fff;
  color: #c7252b;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  box-shadow: none;
}
.order-delete-btn:hover,
.order-delete-btn:focus-visible {
  background: rgba(199, 37, 43, 0.1);
  border-color: #c7252b;
  color: #a61f24;
}
.order-address-block-remove {
  margin-left: auto;
}
.order-address-assignments {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.order-address-assign-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 12px;
  padding: 10px;
  background: #fff;
  border: 1px solid #e5e0d6;
  border-radius: 6px;
}
.order-address-assign-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  flex: 1 1 240px;
}
.order-address-assign-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
}
.order-address-assign-caption {
  color: #666;
  font-size: 12px;
}
/* 割当行：商品名は固定表示。POST 用の商品 ID は hidden。 */
.order-address-assign-label input.order-assign-product {
  display: none;
}
.order-address-assign-label .order-assign-product-label {
  min-width: 220px;
  max-width: 100%;
  font-size: 14px;
  line-height: 1.45;
  color: #222;
  /* 数量ステッパー・ギフト `select` と同じ高さの枠にし、本文を縦中央に揃える（bug-010 第3弾 UI 調整）。 */
  display: flex;
  align-items: center;
  min-height: 38px;
  box-sizing: border-box;
}
.order-address-assign-label .order-assign-qty {
  width: 72px;
  font-size: 14px;
}
/* ギフト欄：「不要:0円」「必要:＋300円」が切れないよう幅を確保する。 */
.order-address-assign-label .order-assign-gift {
  min-width: 132px;
  width: auto;
  max-width: 100%;
  font-size: 14px;
}

/* 注文フォーム割当行（PC 幅）：ギフト `select` と数量ステッパーの外寸を揃える。 */
@media (min-width: 761px) {
  .order-address-assign-label select.order-assign-gift {
    height: 38px;
    min-height: 38px;
    /* 共通の `padding: 9px` のまま `height` 固定すると本文が詰まるため縦だけ抑える */
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 12px;
    padding-right: 12px;
    box-sizing: border-box;
  }
  .order-address-assign-label .koitofu-number-stepper-btn,
  .order-address-assign-label .koitofu-number-stepper input[type="number"] {
    min-height: 0;
    height: 38px;
    max-height: 38px;
    padding-top: 0;
    padding-bottom: 0;
    box-sizing: border-box;
    font-size: 14px;
    line-height: 1.2;
  }
  .order-address-assign-label .koitofu-number-stepper input[type="number"] {
    /* `order-form-wrap` の数値入力の縦パディングを打ち消し、プルダウンと同じ外寸にする */
    padding: 0 8px;
  }
  .order-address-assign-label .koitofu-number-stepper-btn {
    padding-left: 0;
    padding-right: 0;
    font-size: 15px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* `gap` だけだと「`+` とギフト」がやや詰まるため、ほんの少しだけ横余白を足す（PC のみ・折り返し時のインデント回避のため） */
  .order-address-assign-fields > .order-address-assign-label:has(select.order-assign-gift) {
    margin-left: 8px;
  }
}

/* 「商品行を追加」ボタン廃止に伴い `.order-address-add-assign` のスタイルは削除した。 */
.order-total-bar {
  text-align: right;
  padding: 12px 0;
  font-size: 15px;
  border-top: 1px solid #e5e0d6;
  margin-top: 8px;
}
.order-total-amount {
  font-family: Arial, sans-serif;
  color: #c7252b;
  font-size: 18px;
  margin-left: 6px;
}
/* Step2：確定金額は出さず、確認画面で内訳を表示する旨の案内 */
.order-total-bar--confirm-note {
  text-align: left;
}
.order-total-confirm-note {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #3e3128;
}
/* 送信専用の hidden を積む枠（画面上は非表示）。 */
.order-item-post-mount,
.screen-reader-text {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  border: 0 !important;
}
.order-add-address-block {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 8px 16px;
  border-radius: 4px;
  /* 要望：住所ブロック内ボタンはアウトラインのまま、この「お届け先を追加」だけ従来どおり塗りつぶしにする。 */
  border: 1px solid #42bfb0;
  background: #42bfb0;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}
.order-add-address-block:hover,
.order-add-address-block:focus-visible {
  background: #319e91;
  border-color: #258a7e;
  color: #fff;
}
.item-qty.is-unit-split {
  background: #f7f4ee;
  color: #555;
  cursor: default;
}
.order-confirm-delivery { margin: 6px 0 0; font-size: 15px; }

.items-add-row {
  margin-top: 14px;
  font-size: 13px;
  color: #333;
  border: 1px dashed #c7252b;
  background: #fff;
  padding: 10px 18px;
  border-radius: 2px;
  transition: background .2s, color .2s;
}
.items-add-row:hover { background: #c7252b; color: #fff; }

/* 発送先カード */
.shipping-list { display: flex; flex-direction: column; gap: 18px; }
.shipping-card {
  border: 1px solid #e6e0d2;
  background: #fcfaf3;
  border-radius: 2px;
}
.shipping-card .ship-head {
  background: #f0eadb;
  padding: 10px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #e6e0d2;
}
.shipping-card .ship-head h3 {
  font-size: 13px;
  letter-spacing: .1em;
  font-weight: normal;
  color: #555;
}
.shipping-card .ship-head .ship-actions { display: flex; gap: 8px; }
.shipping-card .ship-head .mini-btn {
  font-size: 11px;
  padding: 4px 10px;
  border: 1px solid #ccc;
  background: #fff;
  color: #555;
  border-radius: 2px;
  transition: all .2s ease;
}
.shipping-card .ship-head .mini-btn:hover { border-color: #42bfb0; color: #42bfb0; }
.shipping-card .ship-head .mini-btn.is-danger { color: #c7252b; border-color: #e7c8c9; }
.shipping-card .ship-head .mini-btn.is-danger:hover { background: #c7252b; color: #fff; border-color: #c7252b; }
.shipping-card .ship-body { padding: 18px 18px 20px; }

.add-shipping-btn {
  margin-top: 22px;
  padding: 18px 20px;
  width: 100%;
  border: 2px solid #319e91;
  background: #42bfb0;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  border-radius: 4px;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
  box-shadow: 0 2px 8px rgba(66, 191, 176, 0.35);
}
.add-shipping-btn:hover:not(:disabled) {
  background: #319e91;
  border-color: #258a7e;
  color: #fff;
}
.add-shipping-btn:active:not(:disabled) {
  transform: translateY(1px);
}
.add-shipping-btn.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  background: #9ebcba;
  border-color: #8badab;
  box-shadow: none;
  font-weight: 600;
}

/* 振込先案内 */
.bank-info {
  background: #f7f4ee;
  border: 1px solid #e6e0d2;
  padding: 16px 20px;
  border-radius: 2px;
  margin: 4px 0 4px;
  font-size: 13px;
  line-height: 1.8;
}
.bank-info dt { color: #555; font-weight: normal; }
.bank-info dd { color: #333; margin-bottom: 8px; }

/* 注文フォーム送信ボタン */
.form-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 20px;
}
.form-actions .submit-btn {
  background: #42bfb0;
  color: #fff;
  font-size: 16px;
  letter-spacing: .15em;
  padding: 16px 56px;
  border-radius: 2px;
  transition: background .2s ease, transform .15s ease;
  box-shadow: 0 2px 8px rgba(66, 191, 176, 0.35);
}
/* 注文フォーム：確認画面へ進む主ボタンも次操作としてティールに統一する。 */
.form-actions .submit-btn:hover,
.form-actions .submit-btn:focus-visible { background: #319e91; }
.form-actions .back-btn {
  background: #fff;
  color: #555;
  border: 1px solid #ccc;
  font-size: 14px;
  letter-spacing: .1em;
  padding: 16px 32px;
  border-radius: 2px;
  transition: all .2s ease;
}
.form-actions .back-btn:hover { border-color: #42bfb0; color: #42bfb0; }

/* 同意・プライバシー */
.agree-row {
  text-align: center;
  margin: 20px 0 6px;
  font-size: 13px;
}
.agree-row label { cursor: pointer; }
.agree-row a { color: #42bfb0; text-decoration: underline; text-underline-offset: 3px; }

/* バリデーションエラー表示 */
.field-error {
  color: #c7252b;
  font-size: 12px;
  margin-top: 4px;
  display: none;
}
.has-error input,
.has-error select,
.has-error textarea { border-color: #c7252b; background: #fff7f7; }
.has-error .field-error { display: block; }

/* ============================================================
   注文確認画面（order-confirm.html）
============================================================ */
.confirm-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 22px;
  font-size: 13px;
  /* 「ご注文の確認」画面の各表で、上端の罫線が欠けないよう共通の上線を付ける。 */
  border-top: 1px solid #efe9da;
}
.confirm-table th,
.confirm-table td {
  border-bottom: 1px solid #efe9da;
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
}
/* 「ご注文者様情報」表などの右端が欠けないよう、最終列にだけ右罫線を足す。 */
.confirm-table tr > *:last-child {
  border-right: 1px solid #efe9da;
}
.confirm-table th {
  width: 32%;
  background: #faf7ef;
  font-weight: normal;
  color: #555;
}
/* 「ご注文内容のご確認」画面：発送先ブロック先頭の「お名前」行の直上・備考テーブルの直上に罫線を表示する。 */
.shipping-card .ship-body .confirm-table {
  border-top: 1px solid #efe9da;
}
.ship-items-summary {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed #e6e0d2;
  font-size: 14px;
  line-height: 1.55;
}
.ship-items-summary-head {
  margin: 0 0 8px;
}
.ship-items-list {
  margin: 0 0 10px;
  padding-left: 1.2em;
}
/* 追加送料・ギフトボックス案内は、商品名の開始位置より 1em 右へ下げて所属関係を見やすくする。 */
.ship-fee-note {
  margin: 4px 0 0;
  padding-left: calc(1.2em + 1em);
  font-size: 13px;
  color: #7d1818;
}
/* 確認画面・管理画面共通：料金の直下に「[内訳]」がぶら下がる見え方へ寄せる。 */
.koitofu-order-foot-row {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.koitofu-order-foot-summary {
  font-weight: inherit;
  text-align: right;
}
.koitofu-order-foot-breakdown {
  display: inline-block;
  min-width: min(100%, 30em);
  margin-top: 0;
  padding: 8px 12px;
  border: 1px solid #efe9da;
  border-radius: 4px;
  background: #fffdfa;
  font-size: 12px;
  font-weight: normal;
  color: #666;
  line-height: 1.6;
  text-align: left;
  box-sizing: border-box;
}
.koitofu-order-foot-breakdown-label {
  margin: 0 0 4px;
  color: #777;
}
.koitofu-order-foot-breakdown-list {
  list-style: none;
  margin: 0;
  padding: 0 0 0 1.25em;
}
.koitofu-order-foot-breakdown-list li {
  margin: 3px 0;
  padding: 0;
}
.order-confirm-foot-detail {
  font-size: 12px;
  color: #666;
}
#order-confirm-section-note .confirm-table {
  border-top: 1px solid #efe9da;
}

/* 「ご注文の確認」画面：注文確定の POST 送信中にオーバーレイ＋スピナーを表示する（`order-confirm-page.js` とセット）。 */
.order-confirm-loading {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.order-confirm-loading[hidden] {
  display: none !important;
}
.order-confirm-loading-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(3px);
}
.order-confirm-loading-box {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 28px 36px;
  background: #fff;
  border: 1px solid #e6e0d2;
  border-radius: 8px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}
.order-confirm-loading-spinner {
  width: 42px;
  height: 42px;
  border: 3px solid #efe9da;
  border-top-color: #42bfb0;
  border-radius: 50%;
  animation: order-confirm-spin 0.75s linear infinite;
}
@keyframes order-confirm-spin {
  to { transform: rotate(360deg); }
}
.order-confirm-loading-text {
  font-size: 15px;
  color: #333;
  letter-spacing: 0.04em;
  text-align: center;
}
body.order-confirm-is-submitting {
  cursor: wait;
}

.summary-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-top: 6px;
}
.summary-table th,
.summary-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #efe9da;
}
.summary-table thead th {
  background: #faf7ef;
  text-align: left;
  font-weight: normal;
  color: #777;
  font-size: 12px;
}
.summary-table thead th:last-child {
  text-align: right;
}
.summary-table tbody td.summary-col-sub {
  text-align: right;
}
.summary-table tfoot td {
  font-weight: bold;
  font-size: 16px;
  text-align: right;
  background: #fcfaf3;
}
/* 確認画面フッターの内訳行（合計行より控えめに表示） */
.summary-table tfoot tr.order-confirm-foot-sub td {
  font-weight: normal;
  font-size: 13px;
  color: #555;
  padding-top: 6px;
  padding-bottom: 6px;
  border-bottom: 0;
  vertical-align: top;
}
.summary-table tfoot tr.order-confirm-foot-total td {
  padding-top: 12px;
  border-top: 1px solid #e6d0ae;
}

/* ── ご注文の確認画面：スマホでは商品行をカード化し、ラベル＋値の行で読めるようにする ── */
@media (max-width: 720px) {
  .summary-table {
    border-collapse: separate;
    border-spacing: 0;
    display: block;
    width: 100%;
  }
  .summary-table thead {
    display: none;
  }
  .summary-table tbody,
  .summary-table tfoot {
    display: block;
    width: 100%;
  }
  .summary-table tbody tr.summary-item-row {
    display: block;
    width: 100%;
    margin: 0 0 12px;
    padding: 14px 12px;
    border: 1px solid #e6e0d2;
    border-radius: 4px;
    background: #fff;
    box-sizing: border-box;
  }
  .summary-table tbody tr.summary-item-row:last-child {
    margin-bottom: 16px;
  }
  .summary-table tbody td.summary-col-product {
    display: block;
    width: 100%;
    padding: 0 0 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #efe9da;
    font-weight: 700;
    font-size: 15px;
    line-height: 1.55;
    color: #222;
    text-align: left;
    box-sizing: border-box;
  }
  /* `::before` はラベル、`summary-col-value` は値（長文は単語単位で折り返す） */
  .summary-table tbody td[data-label] {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 8px 0;
    margin: 0;
    border-bottom: 1px solid #efe9da;
    text-align: left;
    box-sizing: border-box;
    font-size: 14px;
  }
  .summary-table tbody td[data-label]::before {
    content: attr(data-label);
    flex: 0 1 46%;
    min-width: 0;
    padding-right: 6px;
    font-size: 12px;
    color: #777;
    font-weight: 600;
    line-height: 1.45;
  }
  .summary-table tbody td[data-label] .summary-col-value {
    flex: 1 1 50%;
    min-width: 0;
    margin: 0;
    padding: 0;
    text-align: right;
    overflow-wrap: break-word;
    word-break: break-word;
  }
  .summary-table tbody td.summary-col-sub {
    margin-top: 2px;
    border-bottom: 0;
    padding-bottom: 0;
    font-size: 15px;
    font-weight: 700;
  }
  /* カードとは別ブロックとして合計を示す（`colspan` の行でもブロック整形で視認できるようにする） */
  .summary-table tfoot tr {
    display: block;
    width: 100%;
    margin-top: 4px;
  }
  .summary-table tfoot td {
    display: block;
    width: 100%;
    padding: 14px 12px !important;
    border: 1px solid #e6d0ae;
    border-radius: 4px;
    text-align: right;
    box-sizing: border-box;
  }
  /* スマホでは説明箱が横に伸びすぎないよう、合計の直下へ自然に収める。 */
  .koitofu-order-foot-row {
    align-items: stretch;
  }
  .koitofu-order-foot-summary {
    text-align: right;
  }
  .koitofu-order-foot-breakdown {
    min-width: 0;
    width: 100%;
  }
  /* スマホでも [内訳] は左寄せのまま階層を保つ */
  .summary-table tfoot .koitofu-order-foot-breakdown {
    text-align: left;
  }
}


/* ============================================================
   注文完了画面（order-complete.html）
============================================================ */
.complete-wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 70px 24px 100px;
  text-align: center;
}
.complete-wrap .complete-icon {
  width: 76px; height: 76px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: #42bfb0;
  display: flex; align-items: center; justify-content: center;
}
.complete-wrap .complete-icon svg { width: 40px; height: 40px; color: #fff; }
.complete-wrap h1 {
  font-size: 24px;
  letter-spacing: .15em;
  font-weight: normal;
  margin-bottom: 18px;
}
.complete-wrap .complete-lead {
  font-size: 14px;
  color: #555;
  margin-bottom: 28px;
}
.complete-wrap .order-no-box {
  display: inline-block;
  background: #f7f4ee;
  border: 1px solid #e6e0d2;
  padding: 14px 28px;
  margin-bottom: 28px;
  font-size: 14px;
}
.complete-wrap .order-no-box strong {
  font-family: Arial, sans-serif;
  font-size: 18px;
  margin-left: 8px;
  color: #c7252b;
}
.complete-wrap .complete-actions { margin-top: 30px; }
/* 「ホームへ戻る」をブランド色（`#42BFB0`）にそろえる。 */
.complete-wrap .complete-actions a {
  display: inline-block;
  background: #42bfb0;
  color: #fff;
  padding: 12px 36px;
  font-size: 14px;
  letter-spacing: .1em;
  border-radius: 2px;
  transition: background .2s ease, color .2s ease;
}
.complete-wrap .complete-actions a:hover { background: #319e91; color: #fff; }

/* ============================================================
   選択リスト（カート）バー・商品詳細
============================================================ */
.selection-cart-bar {
  max-width: 920px;
  margin: 0 auto 0;
  padding: 16px 24px;
  background: #f7f4ee;
  border: 1px solid #e6e0d2;
  border-radius: 2px;
}
.selection-cart-bar--light {
  margin-bottom: 20px;
}
.selection-cart-bar--on-dark {
  background: #1a1a1a;
  border-color: #444;
  margin-bottom: 28px;
}
.selection-cart-bar--on-dark .selection-cart-summary,
.selection-cart-bar--on-dark .selection-cart-note {
  color: #eee;
}
.selection-cart-bar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.selection-cart-summary { margin: 0; font-size: 14px; color: #333; }
.selection-cart-summary strong { font-family: Arial, sans-serif; color: #c7252b; }
.selection-cart-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.selection-cart-note {
  margin: 10px 0 0;
  font-size: 12px;
  color: #666;
}
.selection-cart-bar.is-empty .selection-cart-summary strong { color: #888; }

.btn-cart-clear,
.btn-cart-order,
.btn-cart-to-products {
  /* リンクと button で見た目が揃うよう、インラインフレックスと字太さを統一する。 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  padding: 8px 16px;
  min-height: 38px;
  border-radius: 2px;
  text-decoration: none;
  border: 1px solid #ccc;
  background: #fff;
  color: #333;
  cursor: pointer;
  letter-spacing: .05em;
  transition: all .2s ease;
  box-sizing: border-box;
  vertical-align: middle;
}
.btn-cart-order {
  background: #c7252b;
  border-color: #c7252b;
  color: #fff;
}
.btn-cart-order:hover { background: #a91d22; color: #fff; border-color: #a91d22; }
.btn-cart-clear:hover { border-color: #42bfb0; color: #42bfb0; }
.btn-cart-to-products:hover { border-color: #42bfb0; color: #42bfb0; }

.product-details-heading {
  margin-top: 48px !important;
}
.product-details-lead {
  text-align: center;
  color: #aaa;
  font-size: 13px;
  margin-bottom: 28px;
}

.product-detail-card {
  background: #1a1a1a;
  border: 1px solid #333;
  margin-bottom: 20px;
  scroll-margin-top: 100px;
}
.product-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 0;
  align-items: stretch;
}
.product-detail-visual {
  background: #111;
  padding: 16px;
  text-align: center;
}
.product-detail-img-btn {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: default;
}
.product-detail-img-btn img {
  width: 100%;
  max-width: 420px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.product-detail-img-hint {
  margin: 10px 0 0;
  font-size: 11px;
  color: #888;
}
.product-detail-body {
  padding: 22px 24px;
  color: #eee;
}
.product-detail-body h4 {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: normal;
  letter-spacing: .08em;
}
.product-detail-price {
  font-size: 20px;
  font-family: Arial, sans-serif;
  color: #fff;
  margin-bottom: 12px;
}
.product-detail-price .tax-included {
  font-size: 12px;
  color: #aaa;
  margin-left: 8px;
  font-family: inherit;
}
.product-set-notice-inline {
  font-size: 13px;
  line-height: 1.8;
  color: #f0e6c8;
  border-left: 3px solid #c9a227;
  padding: 10px 14px;
  background: rgba(201, 162, 39, 0.12);
  margin-bottom: 18px;
}
.product-detail-add {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}
.product-detail-qty {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: #ccc;
}
.product-detail-qty input {
  width: 72px;
}
.btn-add-selection {
  background: #42bfb0;
  color: #fff;
  border: 0;
  padding: 10px 22px;
  font-size: 13px;
  letter-spacing: .08em;
  border-radius: 2px;
  cursor: pointer;
  transition: background .2s ease;
}
.btn-add-selection:hover { background: #36a89a; }

@keyframes koitofu-modal-in {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.96); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes koitofu-modal-out {
  from { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  to { opacity: 0; transform: translate(-50%, -50%) scale(0.96); }
}
@keyframes koitofu-modal-backdrop-in {
  from { background-color: rgba(0, 0, 0, 0); }
  to { background-color: rgba(0, 0, 0, 0.55); }
}
@keyframes koitofu-modal-backdrop-out {
  from { background-color: rgba(0, 0, 0, 0.55); }
  to { background-color: rgba(0, 0, 0, 0); }
}

.product-set-notice-dialog,
.pdp-add-cart-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  margin: 0;
  max-width: min(420px, calc(100vw - 32px));
  width: 100%;
  padding: 0;
  border: 1px solid #e6e0d2;
  border-radius: 4px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
}
.product-set-notice-dialog[open],
.pdp-add-cart-dialog[open] {
  animation: koitofu-modal-in 0.28s ease-out both;
}
.product-set-notice-dialog[open]::backdrop,
.pdp-add-cart-dialog[open]::backdrop {
  animation: koitofu-modal-backdrop-in 0.28s ease-out both;
}
.product-set-notice-dialog::backdrop,
.pdp-add-cart-dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.55);
}
.product-set-notice-dialog.is-closing,
.pdp-add-cart-dialog.is-closing {
  animation: koitofu-modal-out 0.22s ease-in both;
}
.product-set-notice-dialog.is-closing::backdrop,
.pdp-add-cart-dialog.is-closing::backdrop {
  animation: koitofu-modal-backdrop-out 0.22s ease-in both;
}
@media (prefers-reduced-motion: reduce) {
  .product-set-notice-dialog[open],
  .pdp-add-cart-dialog[open],
  .product-set-notice-dialog[open]::backdrop,
  .pdp-add-cart-dialog[open]::backdrop,
  .product-set-notice-dialog.is-closing,
  .pdp-add-cart-dialog.is-closing,
  .product-set-notice-dialog.is-closing::backdrop,
  .pdp-add-cart-dialog.is-closing::backdrop {
    animation: none;
  }
}
.product-set-notice-dialog-inner,
.pdp-add-cart-dialog-inner { padding: 22px 24px; }
.product-set-notice-dialog-text,
.pdp-add-cart-dialog-text {
  margin: 0 0 18px;
  font-size: 15px;
  line-height: 1.85;
  color: #333;
}
.pdp-add-cart-dialog-title {
  margin: 0 0 12px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.45;
  color: #333;
}
/* カート追加モーダル：左にテキストの「閉じる」、右に朱の「注文フォームへ」（ご要望どおり）。 */
.pdp-add-cart-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  margin-top: 8px;
}
.pdp-add-cart-dialog-close {
  border: 0;
  background: transparent;
  padding: 8px 4px;
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: #555;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  box-shadow: none;
}
.pdp-add-cart-dialog-close:hover,
.pdp-add-cart-dialog-close:focus-visible {
  color: #42bfb0;
}
.pdp-add-cart-dialog-order {
  flex-shrink: 0;
}
.btn-dialog-close {
  width: 100%;
  padding: 10px;
  background: #c7252b;
  color: #fff;
  border: 0;
  border-radius: 2px;
  font-size: 14px;
  cursor: pointer;
}
.btn-dialog-close:hover { background: #a91d22; }

/* ------------------------------------------------------------
   商品詳細ページ
------------------------------------------------------------- */
.page-product-detail { background: #fff; }

.pdp-breadcrumb {
  max-width: 1100px;
  margin: 0 auto;
  padding: 18px 24px 0;
}

.pdp-toolbar {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}
.pdp-selection-bar { margin-top: 8px; margin-bottom: 20px; }

.pdp-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 12px 24px 64px;
}

.pdp-grid {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(320px, 1fr);
  gap: 40px 48px;
  align-items: start;
}

.pdp-eyebrow {
  font-size: 16px;
  letter-spacing: .06em;
  color: #333;
  margin: 0 0 14px;
}

.pdp-main-figure {
  margin: 0 0 12px;
  background: #fafafa;
  border: 1px solid #eee;
}
.pdp-main-img-wrap {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: default;
}
.pdp-main-img-wrap img {
  width: 100%;
  max-height: 520px;
  object-fit: contain;
}

.pdp-thumb-caption {
  font-size: 13px;
  color: #666;
  margin: 0 0 12px;
}

.pdp-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
}
.pdp-thumb-btn {
  padding: 2px;
  border: 2px solid transparent;
  background: #fff;
  cursor: pointer;
  border-radius: 2px;
}
.pdp-thumb-btn.is-active { border-color: #333; }
.pdp-thumb-btn img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  display: block;
}

.pdp-spec-wix {
  font-size: 13px;
  line-height: 1.85;
  color: #333;
  max-width: 520px;
}
.pdp-spec-wix p { margin: 0 0 12px; }
.pdp-spec-k {
  font-weight: normal;
  color: #111;
}
.pdp-nutrition { margin-top: 8px; }

.pdp-h1 {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: .06em;
  color: #111;
  margin: 0 0 24px;
  line-height: 1.3;
}

.pdp-price-line {
  margin: 0 0 8px;
  font-size: 24px;
  color: #111;
}
.pdp-price-num {
  font-family: Arial, sans-serif;
  font-weight: bold;
  font-size: 26px;
  margin-right: 6px;
}
.pdp-price-suffix {
  font-size: 15px;
  font-family: inherit;
}
.pdp-price-note {
  font-size: 12px;
  color: #888;
  margin: 0 0 20px;
}

.pdp-set-notice {
  font-size: 13px;
  line-height: 1.8;
  color: #5c4a21;
  background: #fff9e6;
  border: 1px solid #e6d4a8;
  padding: 12px 14px;
  margin-bottom: 24px;
}
/* セット注意を画像のかわりにクリックできるようにしたため、`button` でも体裁を従来の注意文とそろえる。 */
button.pdp-set-notice {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
}

.pdp-form-block {
  border-top: 1px solid #e8e8e8;
  padding-top: 22px;
}
.pdp-field {
  margin-bottom: 18px;
}
.pdp-label {
  display: block;
  font-size: 14px;
  margin-bottom: 8px;
  color: #333;
}
.pdp-label .req {
  display: inline-block;
  background: #fff;
  color: #c7252b;
  font-size: 1.15em;
  font-weight: 700;
  padding: 0;
  margin-left: 4px;
  border-radius: 0;
  vertical-align: baseline;
  line-height: 1;
}
.pdp-select {
  max-width: 280px;
}
/* ギフトボックス：先頭の「選択」はプレースホルダ扱いで色を薄くする（`required` かつ空値のため :invalid になる）。 */
.pdp-select:invalid {
  color: #999;
}
.pdp-select:valid {
  color: #333;
}
.pdp-select option {
  color: #333;
}
/* プルダウン展開時のリスト内でも、先頭の「選択」だけ薄色にする（`value=""` の option）。 */
.pdp-select option[value=''] {
  color: #999;
}
/* 数量入力欄をコンパクトにして、フォーム内で目立ちすぎないようにする */
.pdp-qty-input {
  max-width: 88px;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
}

/* 数量ステッパー：`site.js` が `- / 数値 / +` の横並びに組み立てる（PC・スマホ共通。ブラウザ標準スピナーは非表示）。 */
.koitofu-number-stepper {
  display: inline-grid;
  grid-template-columns: 40px minmax(56px, 1fr) 40px;
  /* マイナス・数量・プラスを隙間なくつなげる（旧 `gap` 分だけ全体幅を縮めている） */
  gap: 0;
  align-items: stretch;
  width: 136px;
  max-width: 100%;
}
.koitofu-number-stepper input[type="number"] {
  width: 100%;
  min-width: 0;
  max-width: none;
  margin: 0;
  text-align: center;
  border-radius: 0;
  appearance: textfield;
  -moz-appearance: textfield;
}
.koitofu-number-stepper input[type="number"]::-webkit-outer-spin-button,
.koitofu-number-stepper input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.koitofu-number-stepper-btn {
  border: 1px solid #d2cdbf;
  background: #f7f4ee;
  color: #333;
  border-radius: 2px;
  font-size: 22px;
  line-height: 1;
  min-height: 44px;
  padding: 0;
  touch-action: manipulation;
  cursor: pointer;
}
.koitofu-number-stepper-btn:active {
  background: #ece7dc;
}
/* 隙間なしのとき縦方向の境界線が二重にならないよう、左右ボタンと中央入力でボーダーを分担する */
.koitofu-number-stepper-btn--dec {
  border-right: none;
  border-radius: 2px 0 0 2px;
}
.koitofu-number-stepper-btn--inc {
  border-left: none;
  border-radius: 0 2px 2px 0;
}
.pdp-field .koitofu-number-stepper {
  width: 144px;
}

/* 商品詳細のギフトプルダウンと数量ステッパーを同一の外寸でそろえる（PC 幅ではどちらも縦を固定し残差をなくす）。 */
@media (min-width: 761px) {
  .pdp-form-block .pdp-field select.pdp-select {
    height: 34px;
    min-height: 34px;
    /* `padding` が効いたまま `height` だけ指定すると本文が詰まるため縦パディングを抑える */
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 12px;
    padding-right: 12px;
    box-sizing: border-box;
  }
  .pdp-form-block .pdp-field .koitofu-number-stepper-btn,
  .pdp-form-block .pdp-field .koitofu-number-stepper input[type="number"] {
    min-height: 0;
    height: 34px;
    max-height: 34px;
    padding-top: 0;
    padding-bottom: 0;
    box-sizing: border-box;
    font-size: 14px;
    line-height: 1.2;
  }
  .pdp-form-block .pdp-field .koitofu-number-stepper input[type="number"] {
    /* 共通の `input[type="number"]` の縦パディングを打ち消し外寸だけそろえる */
    padding: 0 8px;
  }
  .pdp-form-block .pdp-field .koitofu-number-stepper-btn {
    padding-left: 0;
    padding-right: 0;
    font-size: 15px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

@media (max-width: 760px) {
  /* スマホでは縦固定よりタップしやすさ優先で padding のみ詰める。 */
  .pdp-form-block .pdp-field .koitofu-number-stepper-btn,
  .pdp-form-block .pdp-field .koitofu-number-stepper input[type="number"] {
    min-height: 0;
    padding-top: 6px;
    padding-bottom: 6px;
    height: auto;
    max-height: none;
    font-size: 14px;
    line-height: 1.25;
  }
  .pdp-form-block .pdp-field .koitofu-number-stepper input[type="number"] {
    padding-left: 8px;
    padding-right: 8px;
  }
  .pdp-form-block .pdp-field .koitofu-number-stepper-btn {
    padding-left: 4px;
    padding-right: 4px;
    font-size: 15px;
    line-height: 1;
  }
}

.order-address-assign-label .koitofu-number-stepper {
  width: 128px;
}
.order-address-assign-label .order-assign-qty {
  width: 100%;
}

.pdp-add-to-cart {
  display: block;
  width: 100%;
  max-width: 320px;
  padding: 14px 20px;
  margin-top: 8px;
  background: #42bfb0;
  color: #fff;
  font-size: 15px;
  letter-spacing: .12em;
  border: 0;
  border-radius: 2px;
  cursor: pointer;
  transition: background .2s ease;
}
.pdp-add-to-cart:hover { background: #319e91; }
.pdp-add-to-cart.is-added { background: #42bfb0; }

/* 旧: 「カートに追加する」直後のインライン案内（#pdp-add-feedback）は廃止しモーダルに統一した。 */

/* 旧「※ カート相当…」注釈（.pdp-form-hint）は文言廃止のためスタイルも削除 */

.pdp-back {
  margin-top: 32px;
  font-size: 14px;
}
.pdp-back a {
  color: #42bfb0;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 760px) {
  /* スマホの Safari 自動ズームを避けるため、数値入力は 16px 以上にする。 */
  .pdp-form-block input[type="number"],
  .order-form-wrap input[type="number"] {
    font-size: 16px;
  }

  /* 注文フォームのスマホ表示では、数量ステッパーとギフト欄が詰まりすぎないよう横余白を広げる。 */
  .order-address-assign-fields {
    gap: 12px 18px;
  }
  /* 注文フォームのスマホ表示では、数量の各パーツとギフト欄の高さを揃える。 */
  .order-address-assign-label .koitofu-number-stepper input[type="number"],
  .order-address-assign-label .koitofu-number-stepper-btn,
  .order-address-assign-label .order-assign-gift {
    height: 44px;
    min-height: 44px;
    box-sizing: border-box;
  }
  .order-address-assign-label .order-assign-gift {
    min-width: 132px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .order-address-assign-label .order-assign-product-label {
    min-height: 44px;
  }
}

@media (max-width: 900px) {
  .pdp-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .pdp-add-to-cart { max-width: none; }
}

.order-flow-notice {
  background: #f4fcfb;
  border: 1px solid #bfe8e2;
  padding: 16px 18px;
  margin-bottom: 24px;
  font-size: 13px;
  line-height: 1.85;
  color: #333;
}
.order-flow-notice p { margin: 0; }

.agree-panel {
  max-width: 720px;
  margin: 28px auto 10px;
  padding: 22px 24px;
  background: #fff9f0;
  border: 2px solid #c9a227;
  border-radius: 4px;
}
.agree-panel-title {
  margin: 0 0 14px;
  font-size: 16px;
  font-weight: bold;
  color: #333;
  letter-spacing: .05em;
  text-align: center;
}
.agree-panel-label {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  cursor: pointer;
  font-size: 15px;
  line-height: 1.75;
  color: #333;
}
.agree-panel-checkbox {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  margin-top: 3px;
  accent-color: #c7252b;
}
.agree-panel-text a {
  color: #42bfb0;
  font-weight: bold;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.items-empty-row td {
  text-align: center;
  padding: 24px 12px !important;
  color: #666;
  font-size: 14px;
}
.muted-price {
  display: block;
  font-size: 12px;
  color: #888;
  margin-top: 4px;
  font-family: Arial, sans-serif;
}

.shipping-placeholder a { color: #42bfb0; }

@media (max-width: 960px) {
  .product-detail-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   フッター
============================================================ */
.site-footer { background: #000; color: #fff; padding: 40px 24px 30px; text-align: center; }
.footer-links {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: 36px; margin-bottom: 26px;
}
.footer-links a {
  color: #fff; font-size: 14px;
  text-decoration: underline; text-underline-offset: 4px;
}
.footer-links a:hover { color: #42bfb0; }
.footer-info { font-size: 13px; color: #fff; line-height: 2; margin-bottom: 18px; }
.footer-info a { color: #fff; text-decoration: underline; }
.footer-info a:hover { color: #42bfb0; }
.copyright { font-size: 12px; color: #ccc; letter-spacing: .05em; font-family: Arial, sans-serif; }

/* BIZ UDPMincho適用後も細く見える主要テキストを、後勝ちで読みやすい太さにする */
.section-title,
.product-name,
.blog-title,
.post-single h1.post-title,
.form-section-title,
.form-row > label,
.form-row > .form-label,
.items-table th,
.shipping-card .ship-title,
.legal-section h2,
.complete-wrap h1 {
  font-weight: 700;
}

/* ============================================================
   レスポンシブ
============================================================ */
@media (max-width: 960px) {
  .hero-inner { grid-template-columns: 1fr; min-height: 0; }
  .hero-visual,
  .slideshow { min-height: 360px; aspect-ratio: 4 / 3; }
  .hero-brand { padding: 36px 16px 48px; }
  .hero-brand .brand-mark { max-width: 240px; margin-bottom: 28px; }
  /* トップ「商品」：2列時も左右のゆとりをきやすい値にする。 */
  .products-section {
    padding-left: 28px;
    padding-right: 28px;
  }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .form-row { grid-template-columns: 1fr; gap: 6px; }
  .form-row > label,
  .form-row > .form-label { padding-top: 0; font-weight: bold; color: #333; }
  .items-table:not(.items-table--order-items) .col-ship { display: none; }
  .items-table:not(.items-table--order-items) tbody tr.is-mobile-extra { display: none; }
}

@media (max-width: 720px) {
  .header-inner { flex-wrap: wrap; gap: 14px; padding: 12px 16px; }
  .site-logo img { height: 44px; }
  .global-nav { order: 3; flex-basis: 100%; }
  .global-nav ul { gap: 18px; justify-content: center; }
  .global-nav a { font-size: 14px; }
  /* `.header-actions` は共通で非表示のためスマホ専用の寄せ調整は行わない。 */
  /* スマホでは右端の導線のタップ領域だけ少し確保する。 */
  .header-instagram-link { padding: 6px; }
  /* スマホではヘッダー内の選択リストを中央寄せにし、折り返しても窮屈に見えない余白にする。 */
  .site-header .selection-cart-bar--header {
    padding: 10px 16px;
  }
  .site-header .selection-cart-bar--header .selection-cart-bar-inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }
  .site-header .selection-cart-bar--header .selection-cart-actions {
    justify-self: center;
    justify-content: center;
  }

  /* スマホではヒーロー画像全体を見せるため、`cover` ではなく `contain` にし、余白は黒で受ける。 */
  .slide,
  .slide.is-active {
    background-size: contain;
    background-color: #000;
    transform: none;
  }
  .hero-visual,
  /* スマホでもPC寄りの比率に戻し、左右が見切れにくい見え方を優先する。 */
  .slideshow { min-height: 280px; aspect-ratio: 4 / 3; }
  .hero-brand .brand-mark { max-width: 200px; }
  /* トップ「商品」：スマホで画像・カード周りの左右余白を広くし、見切れ感を減らす。 */
  .products-section { padding: 40px 28px 60px; }
  /* トップ：元画像の白周りを隠すための拡大が強いと左右が欠けるため、スマホでは弱める。 */
  .products-section .product-image img {
    transform: scale(1.05);
  }
  .products-section .product-image:hover img {
    transform: scale(1.09);
  }
  .brand-mark { max-width: 220px; }
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 24px 16px; }
  .blog-section { padding: 40px 16px; }
  .blog-grid { grid-template-columns: 1fr; }
  .footer-links { gap: 20px; flex-direction: column; }
  .footer-info { font-size: 12px; }

  .order-form-wrap { padding: 24px 14px 60px; }
  /* 注文フォーム：スマホでは入力時の見やすさと自動ズーム抑制のため16pxにする。 */
  .order-form-wrap input,
  .order-form-wrap select,
  .order-form-wrap textarea { font-size: 16px; }
  .form-section > .form-section-body { padding: 16px 14px 18px; }
  .form-step .step { font-size: 11px; padding: 10px 4px; letter-spacing: .05em; }
  .items-table thead { display: none; }
  .items-table, .items-table tbody, .items-table tr, .items-table td { display: block; width: 100%; }
  .items-table tr { border: 1px solid #e6e0d2; padding: 10px; margin-bottom: 10px; }
  .items-table td { border: 0; padding: 6px 0; }
  .items-table .col-action { text-align: right; }
}

@media (max-width: 480px) {
  .product-grid { grid-template-columns: 1fr; }
  /* 1列表示時はさらに横余白を確保して窮屈さを避ける。 */
  .products-section { padding-left: 32px; padding-right: 32px; }
  .form-actions { flex-direction: column-reverse; }
  .form-actions .submit-btn,
  .form-actions .back-btn { width: 100%; }
}