@charset "UTF-8";
/* Sapphire Grove（サファイアの森）— 森の畑のテーマ名
   mhrsp v1 2026-11-03 森の畑 レスポンシブ（上級者）テーマ用の共通 CSS
   置き場所：/docs/resource/css/mhrsp.css（公開 URL /resource/css/mhrsp.css）
   読み込み：HTMLのカスタマイズ（グローバルナビ・フッタ＞お店ページ）の {if $stores.isUseResponsiveTheme} の中だけ。
   いまのテーマ（P-ベージュ2）では読み込まれない。
   スマホを先に書き、769px 以上で PC に広げる。 */

:root {
  --mh-navy: #022068;
  --mh-gold: #c2a849;
  --mh-cream: #faf7f1;
  --mh-text: #1d2433;
  --mh-line: #e3e0d8;
  --mh-sub: #6b7280;
  --mh-serif: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Noto Serif JP", serif;
  --mh-en: "Cinzel", "Cormorant Garamond", "Times New Roman", serif;
  --mh-en2: "Cormorant Garamond", "Times New Roman", serif;
  --mh-w: 860px;
  --mh-w-wide: 960px;
  --mh-sec: 32px;
  --mh-hd: 60px;
}
@media (min-width: 769px) {
  :root { --mh-sec: 68px; --mh-hd: 70px; }
}

/* ---------- 土台 ---------- */
html body {
  background: #fff;
  color: var(--mh-text);
  font-family: var(--mh-serif);
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: .05em;
  padding-top: var(--mh-hd);
  -webkit-text-size-adjust: 100%;
}
html body * { border-radius: 0 !important; box-shadow: none !important; }
html body a { color: var(--mh-navy); transition: opacity .3s; }
html body a:hover { opacity: .5; text-decoration: none; }
html body img { max-width: 100%; height: auto; }
html body #wrapper { width: 100%; min-width: 0; overflow-x: clip; }
html body #contents { width: 90%; max-width: var(--mh-w-wide); margin: 0 auto; padding: var(--mh-sec) 0; float: none; }

/* いまのテーマ用の部品はこのテーマでは出さない */
html body .mhtp,
html body .mhh,
html body #gnav { display: none !important; }

/* ---------- 見出し（英字＋和文の 2 段） ---------- */
.mhr-h { text-align: center; margin: 0 0 32px; font-weight: normal; }
.mhr-h .en { display: block; font-family: var(--mh-en); font-size: 25px; font-weight: 700; letter-spacing: .12em; line-height: 1.3; color: var(--mh-navy); }
.mhr-h .ja { display: block; margin-top: 6px; font-size: 15px; font-weight: 800; letter-spacing: .15em; color: var(--mh-text); }
.mhr-dark .mhr-h .en { color: var(--mh-gold); }
.mhr-dark .mhr-h .ja { color: #fff; }
@media (min-width: 769px) {
  .mhr-h { margin-bottom: 64px; }
  .mhr-h .en { font-size: 41px; }
  .mhr-h .ja { font-size: 24px; }
}

/* ---------- ボタン 3 種 ---------- */
.mhr-btn, .mhr-btn2, .mhr-btn3 {
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; text-decoration: none !important; cursor: pointer;
  font-family: var(--mh-en2), var(--mh-serif); letter-spacing: .1em;
  transition: opacity .3s;
}
.mhr-btn:hover, .mhr-btn2:hover, .mhr-btn3:hover { opacity: .5; }
/* 1 一覧へ（紺） */
.mhr-btn { min-width: 228px; height: 27px; padding: 0 20px; background: var(--mh-navy); color: #fff !important; font-size: 13px; }
/* 2 お試し・強調（金） */
.mhr-btn2 { min-width: 228px; height: 27px; padding: 0 20px; background: var(--mh-gold); color: var(--mh-navy) !important; font-size: 13px; font-weight: 600; }
/* 3 文字だけ（下線） */
.mhr-btn3 { padding: 0 0 2px; background: none; color: var(--mh-navy) !important; font-size: 14px; border-bottom: 1px solid currentColor; }
@media (min-width: 769px) {
  .mhr-btn, .mhr-btn2 { min-width: 258px; height: 41px; font-size: 15px; }
}
.mhr-more { text-align: center; margin-top: 24px; }
@media (min-width: 769px) { .mhr-more { margin-top: 48px; } }

/* ---------- ヘッダー（紺・常に上に固定） ---------- */
.mhr-hd { position: fixed; top: 0; left: 0; right: 0; z-index: 300; height: var(--mh-hd); background: var(--mh-navy); color: #fff; }
.mhr-hd__in { display: flex; align-items: center; height: 100%; max-width: 1200px; margin: 0 auto; padding: 0 0 0 5%; box-sizing: border-box; }
.mhr-hd__logo { margin: 0; flex: none; line-height: 1.1; }
.mhr-hd__logo a { display: flex; align-items: center; gap: 8px; color: #fff !important; text-decoration: none !important; }
.mhr-hd__logo .mark { display: block; width: auto; height: 36px; flex: none; }
.mhr-hd__logo .txt { display: block; }
@media (max-width: 359px) { .mhr-hd__logo .mark { height: 32px; } .mhr-hd__logo .en { display: none; } }
.mhr-hd__logo .en { display: block; font-family: var(--mh-en); font-size: 10px; letter-spacing: .18em; color: var(--mh-gold); }
.mhr-hd__logo .ja { display: block; font-family: var(--mh-serif); font-size: 17px; font-weight: 600; letter-spacing: .12em; }
.mhr-hd__nav { display: none; }
.mhr-hd__icons { display: flex; margin: 0 0 0 auto; padding: 0; list-style: none; height: 100%; }
.mhr-hd__icons li { height: 100%; }
.mhr-hd__icons a { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 60px; height: 100%; color: #fff !important; font-size: 10px; letter-spacing: .05em; text-decoration: none !important; }
.mhr-hd__icons svg { width: 22px; height: 22px; margin-bottom: 2px; fill: none; stroke: #fff; stroke-width: 1.4; }
.mhr-hd__drawer { margin: 0; padding: 0; list-style: none; height: 100%; flex: none; }
html body .mhr-hd #header-nav-drawer {
  position: relative; display: block; width: 60px; height: 60px; margin: 0; padding: 0;
  background: var(--mh-gold); border: 0; cursor: pointer;
}
html body .mhr-hd #header-nav-drawer span,
html body .mhr-hd #header-nav-drawer span::before,
html body .mhr-hd #header-nav-drawer span::after { background: var(--mh-navy); width: 24px; height: 2px; }
html body .mhr-hd #header-nav-drawer.spsDrawerOpen span { background: transparent; }
@media (min-width: 769px) {
  .mhr-hd__in { padding: 0 2%; }
  .mhr-hd__logo a { gap: 12px; }
  .mhr-hd__logo .mark { height: 44px; }
  .mhr-hd__logo .en { font-size: 11px; }
  .mhr-hd__logo .ja { font-size: 20px; }
  .mhr-hd__nav { display: block; margin-left: 40px; }
  .mhr-hd__nav ul { display: flex; gap: 28px; margin: 0; padding: 0; list-style: none; }
  .mhr-hd__nav a { color: #fff !important; font-size: 14px; letter-spacing: .1em; text-decoration: none !important; white-space: nowrap; }
  .mhr-hd__icons a { width: 70px; font-size: 11px; }
  .mhr-hd__drawer { display: none; }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .mhr-hd__nav { margin-left: 24px; }
  .mhr-hd__nav ul { gap: 16px; }
  .mhr-hd__nav a { font-size: 13px; letter-spacing: .04em; }
  .mhr-hd__nav li.pc-wide { display: none; }
}

/* ---------- スマホのメニュー（横の列を全画面で出す） ---------- */
.mhr-drawer-nav { display: none; }
@media (max-width: 768px) {
  html body #sub-column {
    position: fixed; top: var(--mh-hd); right: -100%; left: auto; width: 100%; height: calc(100% - var(--mh-hd));
    padding: 0 5% 40px; box-sizing: border-box; background: var(--mh-cream); overflow-y: auto; float: none; margin: 0;
  }
  html body #sub-column.spsDrawerOpen { transform: translateX(-100%); z-index: 250; }
  html body #wrapper.spsDrawerOpen::before { z-index: 240; background: rgba(2, 32, 104, .4); }
  .mhr-drawer-nav { display: block; margin: 0 -5.6% 24px; background: var(--mh-navy); }
  .mhr-drawer-nav ul { margin: 0; padding: 8px 0; list-style: none; }
  .mhr-drawer-nav a { display: block; padding: 14px 6%; color: #fff !important; font-size: 15px; letter-spacing: .1em; border-bottom: 1px solid rgba(255, 255, 255, .15); text-decoration: none !important; }
}

/* ---------- 横の列（PC） ---------- */
html body #sub-column h2 { background: none; border: 0; border-bottom: 1px solid var(--mh-gold); color: var(--mh-navy); font-size: 15px; letter-spacing: .12em; padding: 8px 0; }

/* ---------- 本文の見出し・商品ページ ---------- */
html body #main-column h1 { font-size: 19px; font-weight: 800; line-height: 1.5; letter-spacing: .05em; color: var(--mh-text); border: 0; background: none; padding: 0; }
@media (min-width: 769px) { html body #main-column h1 { font-size: 24px; } }
html body #main-column h2:not(.mhr-h) { font-weight: 700; color: var(--mh-navy); border: 0; border-bottom: 1px solid var(--mh-gold); background: none; padding: 0 0 8px; letter-spacing: .1em; }
html body #main-column .price, html body #main-column .selling_price { color: var(--mh-text); }
/* カートに入れる（ショップサーブの部品の名前は画面で確かめて足す） */
html body #main-column input[type="submit"],
html body #main-column button[type="submit"],
html body #main-column .cartBtn input,
html body #main-column .btn_cart input {
  min-width: 144px; min-height: 31px; padding: 6px 20px; background: var(--mh-navy); color: #fff; border: 0;
  font-family: var(--mh-serif); letter-spacing: .1em; cursor: pointer; transition: opacity .3s;
}
html body #main-column input[type="submit"]:hover,
html body #main-column button[type="submit"]:hover { opacity: .5; }

/* ---------- トップの部品 ---------- */
.mhr-top { display: none; }
html body.mhr-is-top .mhr-top { display: block; }
html body.mhr-is-top #main-column { display: none; }
html body.mhr-is-top #contents { padding: 0; margin-top: 0; }
/* 旧テーマの左の列（#sub-column：サイドのフリーエリア・カート・お気に入りなど）は PC ではどのページでも出さない。768px 以下はスマホのメニューの中身として使う */
@media (min-width: 769px) { html body #sub-column { display: none !important; } }
.mhr-sec { padding: var(--mh-sec) 0; }
.mhr-in { width: 90%; max-width: var(--mh-w); margin: 0 auto; }
.mhr-in--wide { max-width: var(--mh-w-wide); }
.mhr-cream { background: var(--mh-cream); }

/* 大きな写真 */
/* キービジュアルは画面の高さいっぱい（固定ヘッダーの分を引く）。svh 未対応の端末は vh */
.mhr-hero { position: relative; height: calc(100vh - var(--mh-hd)); height: calc(100svh - var(--mh-hd)); min-height: 480px; overflow: hidden; background: var(--mh-navy); }
.mhr-kv__s { position: absolute; inset: 0; display: block; opacity: 0; transition: opacity 2s ease; }
.mhr-kv__s img { position: absolute; inset: 0; width: 100%; height: 100% !important; max-width: none !important; object-fit: cover; }
/* 写真ごとの見せ場（畑・実・冷凍の実・箱のロゴ）が切れないように位置を決める */
.mhr-kv__s:nth-of-type(1) img { object-position: 55% 40%; }
.mhr-kv__s:nth-of-type(2) img { object-position: 45% 50%; }
.mhr-kv__s:nth-of-type(3) img { object-position: 58% 45%; }
.mhr-kv__s:nth-of-type(4) img { object-position: 40% 35%; }
.mhr-kv__s:nth-of-type(5) img { object-position: 50% 30%; }
.mhr-kv__s.is-active { opacity: 1; z-index: 2; }
.mhr-kv__s.is-prev { z-index: 1; }
.mhr-kv__s.is-active img, .mhr-kv__s.is-prev img { animation: mhrZoom 10s ease-out forwards; }
.mhr-kv__dots { position: absolute; left: 0; right: 0; bottom: 18px; z-index: 3; display: flex; justify-content: center; gap: 10px; }
.mhr-kv__dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .5); transition: background .6s; }
.mhr-kv__dots i.is-on { background: #fff; }
.mhr-kv:not(.is-run) .mhr-kv__dots { display: none; }
@keyframes mhrZoom { from { transform: scale(1.1); } to { transform: scale(1); } }
.mhr-hero__txt { position: absolute; z-index: 3; left: 5%; right: 5%; bottom: calc(48px + 4%); color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .55), 0 0 18px rgba(0, 0, 0, .45); }
.mhr-hero__txt .en { display: block; font-family: var(--mh-en); font-size: 14px; letter-spacing: .25em; color: var(--mh-gold); }
.mhr-hero__txt .ttl { margin: 6px 0 14px; font-size: 20px; font-weight: 600; line-height: 1.5; letter-spacing: .1em; color: #fff; }
.mhr-hero__txt .lead { margin: 0 0 20px; font-size: 13px; }
.mhr-hero__txt .btns { display: flex; flex-wrap: wrap; gap: 10px; }
@media (min-width: 769px) {
  .mhr-hero { min-height: 560px; }
  .mhr-kv__s:nth-of-type(1) img { object-position: 60% 50%; }
  .mhr-kv__s:nth-of-type(2) img { object-position: 50% 60%; }
  .mhr-kv__s:nth-of-type(3) img { object-position: 50% 62%; }
  .mhr-kv__s:nth-of-type(4) img { object-position: 50% 45%; }
  .mhr-kv__s:nth-of-type(5) img { object-position: 50% 60%; }
  .mhr-hero__txt { left: 6%; right: 40%; bottom: 12%; }
  .mhr-kv__dots { bottom: 24px; }
  .mhr-hero__txt .en { font-size: 15px; }
  .mhr-hero__txt .ttl { font-size: 28px; }
  .mhr-hero__txt .lead { font-size: 16px; }
}
/* 1 枚目（箱と袋）：幅が狭い PC・タブレットでは見出しが箱にかからないよう、写真を右に寄せる */
@media (min-width: 769px) and (max-width: 1100px) { .mhr-kv__s:nth-of-type(1) img { object-position: 25% 50%; } }
/* 下へ続くことを示す細い線（PC だけ） */
.mhr-hero__scroll { display: none; position: absolute; z-index: 3; right: 4%; bottom: 0; padding-bottom: 64px; font-family: var(--mh-en); font-size: 10px; letter-spacing: .25em; color: #fff; writing-mode: vertical-rl; text-shadow: 0 1px 3px rgba(0, 0, 0, .5); }
.mhr-hero__scroll::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 1px; height: 56px; background: rgba(255, 255, 255, .7); transform-origin: top; animation: mhrScroll 2.4s ease-in-out infinite; }
@media (min-width: 769px) { .mhr-hero__scroll { display: block; } }
@keyframes mhrScroll { 0% { transform: scaleY(0); opacity: 1; } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
/* 大きな写真のフェードと寄りは「動きを減らす」設定でも動かす（ゆっくり・小さい動きだけ）。SCROLL の線の動きは止める */
@media (prefers-reduced-motion: reduce) { .mhr-hero__scroll::after { animation: none; } }

/* 送料無料の金の帯 */
.mhr-band { background: var(--mh-gold); color: var(--mh-navy); text-align: center; padding: 10px 5%; font-size: 13px; font-weight: 700; letter-spacing: .08em; line-height: 1.6; }
.mhr-band small { display: block; font-weight: normal; font-size: 11px; }
@media (min-width: 769px) { .mhr-band { font-size: 16px; padding: 14px 5%; } .mhr-band small { display: inline; margin-left: 12px; font-size: 13px; } }

/* 商品一覧（ショップサーブの .pickup を 3 列・正方形に） */
.mhr-grid .pickup > h2 { display: none; }
.mhr-grid .pickup .column-set { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 16px; margin: 0; }
@media (min-width: 769px) { .mhr-grid .pickup .column-set { grid-template-columns: repeat(3, 1fr); gap: 56px 40px; } }
html body .mhr-grid .pickup section.column5 { width: auto !important; float: none !important; margin: 0 !important; padding: 0 !important; text-align: left; }
.mhr-grid .pickup .badge { display: none; }
.mhr-grid .pickup .itemThumb { margin: 0 0 12px; }
.mhr-grid .pickup .itemThumb img { display: block; width: 100% !important; height: auto !important; aspect-ratio: 1 / 1; object-fit: cover; }
.mhr-grid .pickup h3 { margin: 0 0 4px; font-size: 14px; font-weight: 600; line-height: 1.6; letter-spacing: .05em; border: 0; background: none; padding: 0; }
.mhr-grid .pickup h3 a { color: var(--mh-text) !important; text-decoration: none; }
.mhr-grid .pickup .price { margin: 0; font-size: 14px; }
.mhr-grid .pickup .taxin { font-size: 11px; color: var(--mh-sub); }
.mhr-grid .pickup p:not(.itemThumb):not(.price) { display: none; }
@media (min-width: 769px) { .mhr-grid .pickup h3, .mhr-grid .pickup .price { font-size: 15px; } }

/* 森の畑について（写真の背景） */
.mhr-about { position: relative; color: #fff; background: var(--mh-navy) center / cover no-repeat; }
.mhr-about::before { content: ""; position: absolute; inset: 0; background: rgba(2, 32, 104, .62); }
.mhr-about .mhr-in { position: relative; text-align: center; }
.mhr-about p { margin: 0 0 14px; }
.mhr-about ul { margin: 0 auto 24px; padding: 0; list-style: none; display: inline-block; text-align: left; }
.mhr-about li { padding-left: 1.2em; text-indent: -1.2em; margin-bottom: 6px; }
.mhr-about li::before { content: "\25C6"; color: var(--mh-gold); margin-right: .4em; font-size: .8em; }
.mhr-about .rate { font-family: var(--mh-en2); font-size: 18px; color: var(--mh-gold); }
.mhr-about .mhr-btn3 { color: #fff !important; margin: 0 10px; }

/* お知らせ */
.mhr-news ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--mh-line); }
.mhr-news li { border-bottom: 1px solid var(--mh-line); }
.mhr-news a { display: flex; flex-direction: column; gap: 2px; padding: 14px 4px; color: var(--mh-text) !important; text-decoration: none !important; }
.mhr-news .tag { font-family: var(--mh-en2); font-size: 12px; letter-spacing: .15em; color: var(--mh-gold); }
@media (min-width: 769px) { .mhr-news a { flex-direction: row; gap: 32px; padding: 18px 8px; } .mhr-news .tag { width: 110px; flex: none; } }

/* 読みもの（生成り帯） */
.mhr-read__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px 16px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 769px) { .mhr-read__list { grid-template-columns: repeat(4, 1fr); gap: 32px; } }
.mhr-read__list a { display: block; color: var(--mh-text) !important; text-decoration: none !important; }
.mhr-read__list img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: 10px; }
.mhr-read__list .t { display: block; font-size: 14px; font-weight: 600; line-height: 1.6; }

/* おいしい食べ方 */
.mhr-how__list { display: grid; gap: 24px; margin: 0; padding: 0; list-style: none; counter-reset: how; }
@media (min-width: 769px) { .mhr-how__list { grid-template-columns: repeat(3, 1fr); gap: 40px; } }
.mhr-how__list li { counter-increment: how; border-top: 1px solid var(--mh-gold); padding-top: 14px; }
.mhr-how__list li::before { content: counter(how, decimal-leading-zero); display: block; font-family: var(--mh-en); font-size: 22px; color: var(--mh-gold); line-height: 1.2; margin-bottom: 6px; }
.mhr-how__list b { display: block; color: var(--mh-navy); margin-bottom: 4px; }
.mhr-how__list p { margin: 0; font-size: 14px; }

/* ご利用ガイド（生成り帯） */
.mhr-guide__list { display: grid; gap: 0; margin: 0; padding: 0; border-top: 1px solid var(--mh-line); }
.mhr-guide__list > div { padding: 16px 0; border-bottom: 1px solid var(--mh-line); }
.mhr-guide__list dt { font-weight: 700; color: var(--mh-navy); margin-bottom: 4px; }
.mhr-guide__list dd { margin: 0; font-size: 14px; }
@media (min-width: 769px) { .mhr-guide__list > div { display: flex; gap: 32px; padding: 20px 0; } .mhr-guide__list dt { width: 160px; flex: none; margin: 0; } .mhr-guide__list dd { font-size: 15px; } }
.mhr-guide .note { font-size: 13px; color: var(--mh-sub); margin: 16px 0 0; }

/* スクロールで下から出す（JS が .mhr-fade を付けたときだけ） */
.mhr-fade { opacity: 0; transform: translateY(50px); transition: opacity 1s, transform 1s; }
.mhr-fade.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .mhr-fade { opacity: 1; transform: none; transition: none; } }

/* ---------- フッター ---------- */
html body footer:has(> .mhr-ft), html body footer.mhr-ft { height: auto; min-height: 0; }
.mhr-ft { background: var(--mh-navy); color: #dfe3f2; font-size: 14px; line-height: 1.8; }
.mhr-ft a { color: #fff !important; text-decoration: none !important; }
.mhr-ft__in { width: 90%; max-width: var(--mh-w-wide); margin: 0 auto; padding: 40px 0 24px; }
.mhr-ft__brand .en { display: block; font-family: var(--mh-en); font-size: 12px; letter-spacing: .2em; color: var(--mh-gold); }
.mhr-ft__brand .ja { display: block; font-size: 20px; font-weight: 600; color: #fff; letter-spacing: .12em; }
.mhr-ft__brand p { margin: 8px 0 0; font-size: 13px; }
.mhr-ft__ct { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 24px 0; padding: 0; list-style: none; }
.mhr-ft__ct a { display: block; padding: 10px 12px; border: 1px solid rgba(255, 255, 255, .3); font-size: 13px; line-height: 1.4; }
.mhr-ft__ct small { display: block; font-size: 11px; color: #b8c0dc; }
.mhr-ft__links { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.mhr-ft__links h5 { margin: 0 0 6px; font-family: var(--mh-en2); font-size: 13px; font-weight: 600; letter-spacing: .15em; color: var(--mh-gold); }
.mhr-ft__links ul { margin: 0; padding: 0; list-style: none; }
.mhr-ft__links li a { display: block; padding: 4px 0; font-size: 13px; }
/* 送料・お届け：文字と金の罫線で組む（お支払い方法の欄は 2026-11-04 に外した） */
.mhr-ft__info { margin-top: 32px; }
.mhr-ft__pay { display: none; } /* 部品を公開するまでの間、古い HTML に残るお支払いの欄を隠す */
.mhr-ft__lbl { display: flex; align-items: baseline; gap: 14px; margin: 0; padding: 0 0 10px; border-bottom: 1px solid var(--mh-gold); font-weight: 400; line-height: 1.4; }
.mhr-ft__lbl .en { font-family: var(--mh-en); font-size: 12px; letter-spacing: .32em; color: var(--mh-gold); }
.mhr-ft__lbl .ja { font-size: 12px; letter-spacing: .12em; color: #b8c0dc; }
.mhr-ft__ship p { margin: 12px 0 8px; font-size: 13px; line-height: 1.8; }
.mhr-ft__ship strong { font-weight: 600; color: #fff; }
.mhr-ft__ship a { display: inline-block; padding-bottom: 2px; border-bottom: 1px solid var(--mh-gold); font-size: 12px; letter-spacing: .04em; }
.mhr-ft__bar { border-top: 1px solid rgba(255, 255, 255, .15); text-align: center; padding: 14px 5%; font-size: 11px; color: #b8c0dc; }
@media (min-width: 769px) {
  .mhr-ft__in { padding: 64px 0 40px; display: grid; grid-template-columns: 1fr 1.3fr; gap: 40px 64px; }
  .mhr-ft__ct { grid-template-columns: repeat(4, 1fr); grid-column: 1 / -1; margin: 0; }
  .mhr-ft__info { margin-top: 0; }
  .mhr-ft__links { grid-template-columns: repeat(4, 1fr); grid-column: 1 / -1; gap: 32px; }
}

/* テーマの古いフッター・浮かぶボタン */
html body #floating-menu p a { border-radius: 0 !important; }

/* カート画面：ヘッダ＞カート（include_header_cart）に残る元の白いロゴ・案内（#header-inner）を隠す。上の紺のヘッダ（.mhr-hd）だけにする */
html body #cart-header #header-inner { display: none !important; }

/* カート画面のボタン：元は文字の入った画像（alt なし）。画像を隠して、文字の紺・金・角丸0 のボタンにする */
html body #cartBtnContinueShopping img,
html body #cartBtnCheckout img,
html body #newMemberBtn img,
html body #cartBtnLogin img { display: none !important; }
html body #cartBtnContinueShopping,
html body #cartBtnCheckout,
html body #newMemberBtn,
html body #cartBtnLogin {
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  width: 250px; max-width: 100%; height: 50px; padding: 0 16px; border: 1px solid var(--mh-navy); border-radius: 0;
  background: var(--mh-navy); color: #fff !important; text-decoration: none !important;
  font-family: var(--mh-serif); font-size: 15px; font-weight: 600; letter-spacing: .1em; line-height: 1.3; cursor: pointer; transition: opacity .3s;
}
html body #cartBtnContinueShopping { width: 180px; height: 40px; font-size: 13px; background: #fff; color: var(--mh-navy) !important; }
html body #newMemberBtn { background: var(--mh-gold); border-color: var(--mh-gold); color: var(--mh-navy) !important; }
html body #cartBtnCheckout::after, html body #cartBtnLogin::after { content: ""; width: 6px; height: 6px; margin-left: 12px; border-top: 1px solid var(--mh-gold); border-right: 1px solid var(--mh-gold); transform: rotate(45deg); }
html body #cartBtnContinueShopping::before { content: "買い物を続ける"; }
html body #cartBtnCheckout::before { content: "購入手続きへ進む"; }
html body #newMemberBtn::before { content: "会員登録して購入"; }
html body #cartBtnLogin::before { content: "ログイン"; }
html body #cartBtnContinueShopping:hover, html body #cartBtnCheckout:hover, html body #newMemberBtn:hover, html body #cartBtnLogin:hover { opacity: .6; }

/* 商品ページ：狭い PC 幅で元の幅（#main-column 900px・説明 960px）が枠からはみ出すのを直す（1100px 以上は元のまま）。見出し・画像・表も枠に収める */
html body #main-column { max-width: 100%; box-sizing: border-box; }
@media (max-width: 1099px) { html body section#itemDetail-wrap .description { max-width: 100%; box-sizing: border-box; } }
html body section#itemDetail-wrap .description h2,
html body section#itemDetail-wrap .description h3 { max-width: 100%; box-sizing: border-box; overflow-wrap: anywhere; }
html body section#itemDetail-wrap .description img { max-width: 100%; height: auto; }
html body section#itemDetail-wrap .description table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }