@charset "UTF-8";

/* =============================================================
   ハナリロ 共通CSS  v2.37（2026-10-27：28-2. 「ページが見つかりませんでした」の画面を、真ん中に余白をとって表示。前の版は _old/hanariro-common-v2.36-20261027.css）
   v2.36（2026-10-27：28. 新しいサイドバーが入らないページ（ページが見つからないとき・古いランキング一覧など）では、元のサイドバーを隠して本文を広げる。前の版は _old/hanariro-common-v2.35-20261027.css）
   v2.35（2026-10-27：27. スクロールで上に付いてくるヘッダーが、ロゴごと透けて下の文字と重なっていたのを、背景だけ少し透ける「すりガラス」に。前の版は _old/hanariro-common-v2.34-20261026.css）
   v2.34（2026-10-26 夜：26. ≡メニューの右の矢印が「›」と文字で出ていたのを直す。前の版は _old/hanariro-common-v2.33-20261026.css）
   v2.33（2026-10-26 夜：25. 新しいフリーページでは、ショップサーブが自動で出す見出し（カテゴリ名「花RiRoについて」とページ名）を見えなくする。ページの中の大きなタイトルと二重になるため。前の版は _old/hanariro-common-v2.32-20261026.css）
   v2.32（2026-10-26 夜：24. 商品・カテゴリページで元のサイドバーが一瞬見えてから新しいサイドバーに替わるのを、最初から隠すように。フッターの営業日カレンダーの上に出ていたオレンジの「営業日カレンダー」見出しを隠す。前の版は _old/hanariro-common-v2.31-20261026.css）
   v2.31（2026-10-26：22-2. 商品ページの説明欄の最後（電話番号の帯・12時バナーなど）と、その下の2つ目のカートの間が0だったのを PC48／スマホ32px に。上のカートと説明欄の間（Eストアの40px）も同じに。前の版は _old/hanariro-common-v2.30-20261026.css）
   v2.30（2026-10-26 本番反映後：商品ページで、サービス案内の画像（service-inf）とハガキの背景写真が最大800pxに縮み、8つの特典・12時バナー（880px）と左右がずれていたのを、説明欄の幅いっぱいにそろえた（16-2.・17-7.）。前の版は _old/hanariro-common-v2.29-20261023.css）
   v2.29（2026-10-23：13. サイドバーを消す条件を「.hr-page がある本文」から「フリーページ（#Journal）」に変えた。カテゴリページ（クマさんと一輪の薔薇・その他のアニマルモチーフなど）はサイドバーが残り、旧デザインのフリーページでも消える。カテゴリのヘッダーで消したいもの（贈る相手で選ぶ・贈る気持ちで選ぶ）は .hr-page--noside を付ける（高見さん 10/23 OK）。前の版は _old/hanariro-common-v2.28-20261023.css）
   v2.28（2026-10-23：23. ページ名（1ページに1つ）を 56px／スマホ36px にそろえた（メルマガの写真の上の見出しは対象外）（10/19 の文字サイズ統一の基準、高見さん 10/23 OK）。前の版は _old/hanariro-common-v2.27-20261023.css）
   v2.27（2026-10-23：8.・11.・12. 目次ボタン（.hr-nav）の指定がハンバーガーメニューの中身（.hr-drawer__body.hr-nav）にも当たり、スマホでメニューが2列に崩れていたのを、メニューには当たらないようにした。前の版は _old/hanariro-common-v2.26-20261022.css）
   v2.26（2026-10-22：22-5. 紹介文・写真の枠の上下の内側の余白も0に。前の版は _old/hanariro-common-v2.25-20261022.css）
   v2.25（2026-10-22：22-4. ハガキ・商品説明の表の中の余白も0にして、部品の間隔を実物でもそろえる。前の版は _old/hanariro-common-v2.24-20261022.css）
   v2.24（2026-10-22：22. 商品ページの部品と部品の間隔を PC48px・スマホ32px にそろえる（部品の中は24/16px）。前の版は _old/hanariro-common-v2.23-20261022.css）
   v2.23（2026-10-22：17-2. 8つの特典で隣の特典が長いとき見出しと説明文の間が空くのを直す（align-content）。前の版は _old/hanariro-common-v2.22-20261022.css）
   v2.22（2026-10-22：スマホでは「12時までのご注文」バナー・クリアケースの案内を文字の大きいスマホ用画像に、12時バナー（上）の下に余白（17-10.））
   v2.21（2026-10-21：16-2. 分割画像のすき間を !important で消す。v2.20：オリジナルオーダー商品ページに作品集へのボタン（21.））
   v2.19（2026-10-20：FBA商品ではサービス案内の「01 開花作業」を隠す（20.））
   v2.18（2026-10-20：FBA商品だけサービス案内の一部の項目を隠す仕組み（20.）。隠す番号は未定）
   v2.17（2026-10-20：スマホでは「プリザーブドフラワーについて」を文字の大きいスマホ用画像に（17-9.））
   v2.16（2026-10-20：商品説明まわりの余白を詰める（17-8.））
   v2.15（2026-10-20：商品説明の写真はPCで最大800px、情報画像・A＋は幅いっぱい（17-7.））
   v2.14（2026-10-20：商品説明の中身（今の商品の画像の枠・360°写真のカード・写真ギャラリー）を説明欄の幅いっぱいに（15-2.・17-6.・17-7.））
   v2.13（2026-10-20：360°写真の下の「←360°→」を元の画像の形（背景を抜いたもの）に戻す（17-6.））
   v2.12（2026-10-20：360°写真の枠をそろえて大きく・下の「←360°→」をCSSの絵に（17-6.）、倍率は共通ヘッダー v1.8「6.」）
   v2.11（2026-10-20：ハートの大きさを v2.9 に戻して確定（12px・9px）（19.））
   v2.10（2026-10-20：カートに落ちてくるハートを大きく（19.））
   v2.9（2026-10-20：右下のカートを少し透かす・PAGE TOP を半透明グレーの丸＋TOP に（19.））
   v2.8（2026-10-20：スマホでも右下にカートを出す・PAGE TOP を短く（19-2.））
   v2.7（2026-10-19：右下の浮動ボタン（カート・ページ上部へ）を新デザインに（19.））
   v2.6（2026-10-19：商品説明の中の文章が12pxに戻っていたのを14pxに（18-10.））
   v2.5（2026-10-19：文字サイズをスウィートマミー基準に統一。本文14px・最小12px（各所の値を変更＋18.を追加））
   v2.4（2026-10-19：商品説明の360°写真を枠つきのカードに・小さめに（17-6.））
   v2.3（2026-10-19：商品説明の文章を大きく・即日発送バナーの下に余白（17-4.）、ハガキを8つの特典と同じ幅に）
   v2.2（2026-10-19：商品ページの銀行振込の注意書き・8つの特典・お客様のハガキを整える 17. を追加）
   v2.1（2026-10-18：案内ボタン「メッセージ文例集」の文字をほかと同じ大きさに、「8つの特典」の8を全角に）
   v2.0（2026-10-17：商品ページの案内ボタン「ご利用ガイド」→「メッセージ文例集」、配達・お支払いはご利用ガイドの該当箇所へ）
   v1.9（2026-10-14：PC・スマホで出し分ける部品 16. を追加。サービス案内画像に使用）
   v1.8（2026-10-12：商品ページの案内「初めてのお客様へ」を「ご利用ガイド」に変更）
   v1.7（2026-10-12：商品ページの案内・商品説明の表・説明欄の幅を追加）
   -------------------------------------------------------------
   【役割】
     新デザインの全ページで使う「土台」と「共通部品」。
     ショップサーブ管理画面のCSS欄の最後に、この内容をすべて貼る。

   【影響範囲】
     .hr-page の中だけに効く。ショップサーブのヘッダー・サイドバー・
     旧デザインのページには影響しない。

   【ページの個性の出し方】
     <div class="hr-page hr-theme-sage"> … </div>
     のようにテーマクラスを1つ付けると、差し色が切り替わる。
     テーマ指定なし＝標準（くすみローズ）。

   【メインカラーが決まったら】
     「1. 基本の値」の差し色3色（--hr-accent〜）を差し替える。

   【目次】
      1. 基本の値（デザイントークン）
      2. テーマ（差し色）
      3. リセット
      4. アイコン
      5. 見出し
      6. レイアウト
      7. ボタン
      8. 目次ボタン
      9. 説明カード・タイル・ステップ・商品の特長・商品説明画像・商品画像ギャラリー
     10. リスト・囲み・Q&A・表・お問い合わせ・読み物
     11. 画面幅ごとの調整
     12. 動きを減らす設定への配慮
     13. ショップサーブ（Eストア）の枠への対応
     14. 商品ページ：ご案内リンク・お支払いの注意・商品説明の表
     15. 商品ページ：商品説明欄の幅
     16. PC・スマホで出し分け（サービス案内画像など）
     17. 商品ページ：銀行振込の注意書き・8つの特典・お客様から頂戴したハガキ

   ルールの詳細は design-rules.md を参照。
   ============================================================= */


/* =============================================================
   1. 基本の値（デザイントークン）
   ページ全体で使う色・フォント・形・余白をここで一括管理する。
   ============================================================= */

.hr-page {
  /* --- 文字・線・背景（全ページ共通。テーマでは変えない） --- */
  --hr-text: #2b2b2b;           /* 本文 */
  --hr-sub: #6b6b6b;            /* 補足・注記 */
  --hr-line: #ece6e2;           /* 区切り線 */
  --hr-bg: #ffffff;             /* 白 */
  --hr-bg-soft: #faf6f3;        /* 説明カード・帯の背景（ベージュ） */

  /* --- 差し色（テーマで切り替える3色）＝標準：くすみローズ（仮） --- */
  --hr-accent: #c97782;         /* 差し色 */
  --hr-accent-dark: #a95a66;    /* ボタンのホバー */
  --hr-accent-soft: #fbeef0;    /* 選択中・強調の薄い背景 */

  /* --- フォント --- */
  --hr-font: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "游ゴシック体",
    "Noto Sans JP", Meiryo, sans-serif;
  --hr-font-en: "Helvetica Neue", Arial, sans-serif;   /* 英字ラベル・数字 */
  --hr-font-display: var(--hr-font);                  /* 見出し用。ページの個性で明朝などに変えてよい */

  /* --- 形・余白 --- */
  --hr-r-btn: 4px;              /* 角丸：ボタン・目次 */
  --hr-r-card: 8px;             /* 角丸：説明カード・写真 */
  --hr-gap-sec: 64px;           /* セクションの間（スマホは48px） */
  --hr-width: 1200px;           /* 本文の最大幅（サイト幅。2026-10-09 880px→1200px に変更） */
  --hr-ease: 0.35s ease;        /* ホバーなどの動きの速さ */

  /* --- ページの外枠 --- */
  max-width: var(--hr-width);
  margin: 0 auto;
  padding: 0 16px 72px;
  color: var(--hr-text);
  font-family: var(--hr-font);
  font-size: 14px;
  line-height: 1.9;
  letter-spacing: 0.03em;
  box-sizing: border-box;
  overflow-wrap: anywhere;      /* 長いURLなどで横にはみ出さないように */
}


/* =============================================================
   2. テーマ（差し色）
   .hr-page と同じ要素に1つだけ付ける。新しいテーマはここに追加する。
   ============================================================= */

/* 標準：トップ・会員・FAQ・カテゴリ検索・商品紹介 */
.hr-theme-rose {
  --hr-accent: #c97782;
  --hr-accent-dark: #a95a66;
  --hr-accent-soft: #fbeef0;
}

/* ハナリロについて */
.hr-theme-sage {
  --hr-accent: #7f9182;
  --hr-accent-dark: #5f6f60;
  --hr-accent-soft: #eef2ee;
}

/* お花の贈り物講座（読み物） */
.hr-theme-mocha {
  --hr-accent: #8c7b66;
  --hr-accent-dark: #6f604e;
  --hr-accent-soft: #f2ede6;
}

/* ご利用ガイド・お買い物総合案内所 */
.hr-theme-ink {
  --hr-accent: #3a3a3a;
  --hr-accent-dark: #161616;
  --hr-accent-soft: #f3f3f3;
}

/* 立札 */
.hr-theme-shu {
  --hr-accent: #b8402c;
  --hr-accent-dark: #8f2f20;
  --hr-accent-soft: #f8ebe8;
}

/* お悔やみ・お供え */
.hr-theme-calm {
  --hr-accent: #7a8590;
  --hr-accent-dark: #59636c;
  --hr-accent-soft: #eef1f3;
}

/* --- 本文の幅のバリエーション --- */
.hr-page--narrow {
  --hr-width: 720px;            /* 読み物 */
}

.hr-page--wide {
  --hr-width: 1200px;           /* 写真・商品を多く並べるページ（今は標準と同じ。広げたいときはここを変える） */
}


/* =============================================================
   3. リセット
   ショップサーブのテーマが付けている見出しの飾りや文字色を、
   .hr-page の中だけ打ち消す。
   ============================================================= */

.hr-page *,
.hr-page *::before,
.hr-page *::after {
  box-sizing: border-box;
}

.hr-page img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 0;
}

/* 段落・リストは弱い指定にする（:where で優先度0）。
   下の部品の指定が必ず優先されるようにするため。 */
.hr-page :where(p) {
  margin: 0 0 1.2em;
}

.hr-page :where(ul, ol) {
  margin: 0;
  padding: 0;
}

/* ショップサーブ側の p・li などの文字色指定を打ち消す */
.hr-page :where(p, li, dt, dd, th, td, span, small, summary) {
  color: inherit;
}

/* 見出しの背景・線・アイコンなどの飾りを打ち消す */
.hr-page h1,
.hr-page h2,
.hr-page h3,
.hr-page h4,
.hr-page h5 {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--hr-text);
  font-family: var(--hr-font-display);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-shadow: none;
}

.hr-page h2::before,
.hr-page h2::after,
.hr-page h3::before,
.hr-page h3::after,
.hr-page h4::before,
.hr-page h4::after {
  content: none;
}

/* リンク */
.hr-page a {
  color: var(--hr-accent);
  text-underline-offset: 3px;
}

.hr-page a:hover {
  color: var(--hr-accent-dark);
}

.hr-page strong {
  font-weight: 600;
}

/* 画面には出さず、読み上げソフトにだけ伝える文字 */
.hr-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}


/* =============================================================
   4. アイコン
   定義はヘッダーHTML欄（header-snippet.html）で全ページ共通に読み込み済み。
   使い方：<svg class="hr-ico"><use href="#hr-i-gift"/></svg>
   ============================================================= */

.hr-ico {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  fill: currentColor;           /* 文字色と同じ色になる */
  vertical-align: middle;
}


/* =============================================================
   5. 見出し
   どの見出しも、上に英字ラベルを付けるのが基本。
   ============================================================= */

/* --- 英字ラベル（例：MEMBERSHIP、FEATURE） --- */
.hr-en,
.hr-heading__en {
  display: block;
  margin: 0 0 8px;
  color: var(--hr-accent);
  font-family: var(--hr-font-en);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

/* --- ページタイトル（1ページに1つ） --- */
.hr-page .hr-title {
  margin: 0 0 16px;
  font-size: 28px;
  line-height: 1.6;
  letter-spacing: 0.08em;
}

/* --- セクション見出し：中央型（英字＋日本語） ---
   <h3 class="hr-heading">
     <span class="hr-heading__en">FEATURE</span>
     <span class="hr-heading__ja">日本語の見出し</span>
   </h3> */
.hr-page .hr-heading {
  margin: 0 0 40px;
  text-align: center;
}

.hr-heading__ja {
  display: block;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.08em;
}

/* --- セクション見出し：左寄せ型（アイコン＋下線） --- */
.hr-page .hr-h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hr-line);
  font-size: 19px;
}

.hr-h3 .hr-ico {
  width: 28px;
  height: 28px;
  color: var(--hr-accent);
}

/* --- 小見出し --- */
.hr-page .hr-h4 {
  margin: 40px 0 16px;
  font-size: 16px;
}

/* --- リード文（見出しのすぐ下の説明） --- */
.hr-lead {
  margin: 0 0 32px;
  color: var(--hr-sub);
  font-size: 15px;              /* 2026-10-19 v2.5：リード文だけ15px（本文は14px） */
}

.hr-lead strong {
  color: var(--hr-accent);
}

/* 中央型見出しの直後のリード文は、自動で中央揃え。
   .hr-center を付けると、ほかの場所でも中央揃えにできる。 */
.hr-heading + .hr-lead,
.hr-center {
  max-width: none;              /* 本文の幅（1200px）いっぱいに広げる（2026-10-09 640px→なし） */
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}


/* =============================================================
   6. レイアウト
   ============================================================= */

/* --- 見出し画像 --- */
.hr-hero {
  margin: 24px 0 40px;
}

/* 画像は引き伸ばさない（元の幅より大きく表示すると荒くなるため：2026-10-09）。
   1200px以上の画像なら幅いっぱい、小さい画像は元の大きさで中央に置く */
.hr-hero img {
  width: auto;
  max-width: 100%;
  margin: 0 auto;
  border-radius: var(--hr-r-card);
}

.hr-hero__img img {
  width: 100%;
  border-radius: var(--hr-r-card);
}

/* --- 仮のバナー（見出し画像が1200px未満のあいだだけ、自動で出る）
   ・画像に data-hr-header="英字" を付けると、共通ヘッダー（v1.4〜）が画像の幅を調べ、
     1200px未満ならこのバナーに置き換える
   ・data-hr-header-ja="日本語の見出し"、data-hr-header-text="ひとこと" も付けられる
   ・1200px以上の画像に差し替えれば、何もしなくても画像が表示される（2026-10-09） --- */
.hr-temp-banner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 4 / 1;
  min-height: 190px;
  padding: 28px 24px;
  overflow: hidden;
  border-radius: 8px;
  /* 背景：明るいグレーの三角形のモザイク（10/9 高見さん B案）。中央を少し明るく */
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 60%),
    url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjAwIDMwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQgc2xpY2UiPjxwb2x5Z29uIHBvaW50cz0iMCwwIDg0LDAgODAsNTkiIGZpbGw9IiNkOGQ4ZDgiIHN0cm9rZT0iI2Q4ZDhkOCIgc3Ryb2tlLXdpZHRoPSIuNiIvPjxwb2x5Z29uIHBvaW50cz0iMCwwIDgwLDU5IDAsNjYiIGZpbGw9IiNkMmQyZDIiIHN0cm9rZT0iI2QyZDJkMiIgc3Ryb2tlLXdpZHRoPSIuNiIvPjxwb2x5Z29uIHBvaW50cz0iODQsMCAxNzYsMCAxODMsOTIiIGZpbGw9IiNkN2Q3ZDciIHN0cm9rZT0iI2Q3ZDdkNyIgc3Ryb2tlLXdpZHRoPSIuNiIvPjxwb2x5Z29uIHBvaW50cz0iODQsMCAxODMsOTIgODAsNTkiIGZpbGw9IiNkOGQ4ZDgiIHN0cm9rZT0iI2Q4ZDhkOCIgc3Ryb2tlLXdpZHRoPSIuNiIvPjxwb2x5Z29uIHBvaW50cz0iMTc2LDAgMjk0LDAgMzIwLDg3IiBmaWxsPSIjZTZlNmU2IiBzdHJva2U9IiNlNmU2ZTYiIHN0cm9rZS13aWR0aD0iLjYiLz48cG9seWdvbiBwb2ludHM9IjE3NiwwIDMyMCw4NyAxODMsOTIiIGZpbGw9IiNkZWRlZGUiIHN0cm9rZT0iI2RlZGVkZSIgc3Ryb2tlLXdpZHRoPSIuNiIvPjxwb2x5Z29uIHBvaW50cz0iMjk0LDAgMzc5LDAgNDE4LDYzIiBmaWxsPSIjZTFlMWUxIiBzdHJva2U9IiNlMWUxZTEiIHN0cm9rZS13aWR0aD0iLjYiLz48cG9seWdvbiBwb2ludHM9IjI5NCwwIDQxOCw2MyAzMjAsODciIGZpbGw9IiNkZGRkZGQiIHN0cm9rZT0iI2RkZGRkZCIgc3Ryb2tlLXdpZHRoPSIuNiIvPjxwb2x5Z29uIHBvaW50cz0iMzc5LDAgNDc0LDAgNDg5LDgwIiBmaWxsPSIjZWZlZmVmIiBzdHJva2U9IiNlZmVmZWYiIHN0cm9rZS13aWR0aD0iLjYiLz48cG9seWdvbiBwb2ludHM9IjM3OSwwIDQ4OSw4MCA0MTgsNjMiIGZpbGw9IiNlNWU1ZTUiIHN0cm9rZT0iI2U1ZTVlNSIgc3Ryb2tlLXdpZHRoPSIuNiIvPjxwb2x5Z29uIHBvaW50cz0iNDc0LDAgNTk0LDAgNjE0LDg5IiBmaWxsPSIjZTZlNmU2IiBzdHJva2U9IiNlNmU2ZTYiIHN0cm9rZS13aWR0aD0iLjYiLz48cG9seWdvbiBwb2ludHM9IjQ3NCwwIDYxNCw4OSA0ODksODAiIGZpbGw9IiNlMmUyZTIiIHN0cm9rZT0iI2UyZTJlMiIgc3Ryb2tlLXdpZHRoPSIuNiIvPjxwb2x5Z29uIHBvaW50cz0iNTk0LDAgNzI1LDAgNzIzLDU4IiBmaWxsPSIjZTJlMmUyIiBzdHJva2U9IiNlMmUyZTIiIHN0cm9rZS13aWR0aD0iLjYiLz48cG9seWdvbiBwb2ludHM9IjU5NCwwIDcyMyw1OCA2MTQsODkiIGZpbGw9IiNlNWU1ZTUiIHN0cm9rZT0iI2U1ZTVlNSIgc3Ryb2tlLXdpZHRoPSIuNiIvPjxwb2x5Z29uIHBvaW50cz0iNzI1LDAgODE4LDAgODA2LDgyIiBmaWxsPSIjZTllOWU5IiBzdHJva2U9IiNlOWU5ZTkiIHN0cm9rZS13aWR0aD0iLjYiLz48cG9seWdvbiBwb2ludHM9IjcyNSwwIDgwNiw4MiA3MjMsNTgiIGZpbGw9IiNlMWUxZTEiIHN0cm9rZT0iI2UxZTFlMSIgc3Ryb2tlLXdpZHRoPSIuNiIvPjxwb2x5Z29uIHBvaW50cz0iODE4LDAgOTE2LDAgOTAwLDYyIiBmaWxsPSIjZGNkY2RjIiBzdHJva2U9IiNkY2RjZGMiIHN0cm9rZS13aWR0aD0iLjYiLz48cG9seWdvbiBwb2ludHM9IjgxOCwwIDkwMCw2MiA4MDYsODIiIGZpbGw9IiNlNGU0ZTQiIHN0cm9rZT0iI2U0ZTRlNCIgc3Ryb2tlLXdpZHRoPSIuNiIvPjxwb2x5Z29uIHBvaW50cz0iOTE2LDAgOTgzLDAgOTk4LDU5IiBmaWxsPSIjZGRkZGRkIiBzdHJva2U9IiNkZGRkZGQiIHN0cm9rZS13aWR0aD0iLjYiLz48cG9seWdvbiBwb2ludHM9IjkxNiwwIDk5OCw1OSA5MDAsNjIiIGZpbGw9IiNlOWU5ZTkiIHN0cm9rZT0iI2U5ZTllOSIgc3Ryb2tlLXdpZHRoPSIuNiIvPjxwb2x5Z29uIHBvaW50cz0iOTgzLDAgMTEwMiwwIDExMjYsOTAiIGZpbGw9IiNkN2Q3ZDciIHN0cm9rZT0iI2Q3ZDdkNyIgc3Ryb2tlLXdpZHRoPSIuNiIvPjxwb2x5Z29uIHBvaW50cz0iOTgzLDAgMTEyNiw5MCA5OTgsNTkiIGZpbGw9IiNkZmRmZGYiIHN0cm9rZT0iI2RmZGZkZiIgc3Ryb2tlLXdpZHRoPSIuNiIvPjxwb2x5Z29uIHBvaW50cz0iMTEwMiwwIDEyMDAsMCAxMjAwLDc3IiBmaWxsPSIjZGZkZmRmIiBzdHJva2U9IiNkZmRmZGYiIHN0cm9rZS13aWR0aD0iLjYiLz48cG9seWdvbiBwb2ludHM9IjExMDIsMCAxMjAwLDc3IDExMjYsOTAiIGZpbGw9IiNkYWRhZGEiIHN0cm9rZT0iI2RhZGFkYSIgc3Ryb2tlLXdpZHRoPSIuNiIvPjxwb2x5Z29uIHBvaW50cz0iMCw2NiA4MCw1OSAxMjUsMTUzIiBmaWxsPSIjZTNlM2UzIiBzdHJva2U9IiNlM2UzZTMiIHN0cm9rZS13aWR0aD0iLjYiLz48cG9seWdvbiBwb2ludHM9IjAsNjYgMTI1LDE1MyAwLDE0MiIgZmlsbD0iI2RhZGFkYSIgc3Ryb2tlPSIjZGFkYWRhIiBzdHJva2Utd2lkdGg9Ii42Ii8+PHBvbHlnb24gcG9pbnRzPSI4MCw1OSAxODMsOTIgMjIzLDE2NCIgZmlsbD0iI2RhZGFkYSIgc3Ryb2tlPSIjZGFkYWRhIiBzdHJva2Utd2lkdGg9Ii42Ii8+PHBvbHlnb24gcG9pbnRzPSI4MCw1OSAyMjMsMTY0IDEyNSwxNTMiIGZpbGw9IiNkY2RjZGMiIHN0cm9rZT0iI2RjZGNkYyIgc3Ryb2tlLXdpZHRoPSIuNiIvPjxwb2x5Z29uIHBvaW50cz0iMTgzLDkyIDMyMCw4NyAzMDEsMTQ3IiBmaWxsPSIjZGFkYWRhIiBzdHJva2U9IiNkYWRhZGEiIHN0cm9rZS13aWR0aD0iLjYiLz48cG9seWdvbiBwb2ludHM9IjE4Myw5MiAzMDEsMTQ3IDIyMywxNjQiIGZpbGw9IiNkZmRmZGYiIHN0cm9rZT0iI2RmZGZkZiIgc3Ryb2tlLXdpZHRoPSIuNiIvPjxwb2x5Z29uIHBvaW50cz0iMzIwLDg3IDQxOCw2MyA0MDYsMTQ3IiBmaWxsPSIjZTFlMWUxIiBzdHJva2U9IiNlMWUxZTEiIHN0cm9rZS13aWR0aD0iLjYiLz48cG9seWdvbiBwb2ludHM9IjMyMCw4NyA0MDYsMTQ3IDMwMSwxNDciIGZpbGw9IiNlYWVhZWEiIHN0cm9rZT0iI2VhZWFlYSIgc3Ryb2tlLXdpZHRoPSIuNiIvPjxwb2x5Z29uIHBvaW50cz0iNDE4LDYzIDQ4OSw4MCA0ODAsMTQyIiBmaWxsPSIjZWRlZGVkIiBzdHJva2U9IiNlZGVkZWQiIHN0cm9rZS13aWR0aD0iLjYiLz48cG9seWdvbiBwb2ludHM9IjQxOCw2MyA0ODAsMTQyIDQwNiwxNDciIGZpbGw9IiNlN2U3ZTciIHN0cm9rZT0iI2U3ZTdlNyIgc3Ryb2tlLXdpZHRoPSIuNiIvPjxwb2x5Z29uIHBvaW50cz0iNDg5LDgwIDYxNCw4OSA2MTksMTMyIiBmaWxsPSIjZTNlM2UzIiBzdHJva2U9IiNlM2UzZTMiIHN0cm9rZS13aWR0aD0iLjYiLz48cG9seWdvbiBwb2ludHM9IjQ4OSw4MCA2MTksMTMyIDQ4MCwxNDIiIGZpbGw9IiNlNWU1ZTUiIHN0cm9rZT0iI2U1ZTVlNSIgc3Ryb2tlLXdpZHRoPSIuNiIvPjxwb2x5Z29uIHBvaW50cz0iNjE0LDg5IDcyMyw1OCA2NzMsMTU1IiBmaWxsPSIjZTVlNWU1IiBzdHJva2U9IiNlNWU1ZTUiIHN0cm9rZS13aWR0aD0iLjYiLz48cG9seWdvbiBwb2ludHM9IjYxNCw4OSA2NzMsMTU1IDYxOSwxMzIiIGZpbGw9IiNlNmU2ZTYiIHN0cm9rZT0iI2U2ZTZlNiIgc3Ryb2tlLXdpZHRoPSIuNiIvPjxwb2x5Z29uIHBvaW50cz0iNzIzLDU4IDgwNiw4MiA3ODcsMTUxIiBmaWxsPSIjZTJlMmUyIiBzdHJva2U9IiNlMmUyZTIiIHN0cm9rZS13aWR0aD0iLjYiLz48cG9seWdvbiBwb2ludHM9IjcyMyw1OCA3ODcsMTUxIDY3MywxNTUiIGZpbGw9IiNlZWVlZWUiIHN0cm9rZT0iI2VlZWVlZSIgc3Ryb2tlLXdpZHRoPSIuNiIvPjxwb2x5Z29uIHBvaW50cz0iODA2LDgyIDkwMCw2MiA4OTgsMTQ0IiBmaWxsPSIjZGVkZWRlIiBzdHJva2U9IiNkZWRlZGUiIHN0cm9rZS13aWR0aD0iLjYiLz48cG9seWdvbiBwb2ludHM9IjgwNiw4MiA4OTgsMTQ0IDc4NywxNTEiIGZpbGw9IiNkZGRkZGQiIHN0cm9rZT0iI2RkZGRkZCIgc3Ryb2tlLXdpZHRoPSIuNiIvPjxwb2x5Z29uIHBvaW50cz0iOTAwLDYyIDk5OCw1OSAxMDMwLDEzOCIgZmlsbD0iI2U3ZTdlNyIgc3Ryb2tlPSIjZTdlN2U3IiBzdHJva2Utd2lkdGg9Ii42Ii8+PHBvbHlnb24gcG9pbnRzPSI5MDAsNjIgMTAzMCwxMzggODk4LDE0NCIgZmlsbD0iI2UyZTJlMiIgc3Ryb2tlPSIjZTJlMmUyIiBzdHJva2Utd2lkdGg9Ii42Ii8+PHBvbHlnb24gcG9pbnRzPSI5OTgsNTkgMTEyNiw5MCAxMDk1LDEzOCIgZmlsbD0iI2U1ZTVlNSIgc3Ryb2tlPSIjZTVlNWU1IiBzdHJva2Utd2lkdGg9Ii42Ii8+PHBvbHlnb24gcG9pbnRzPSI5OTgsNTkgMTA5NSwxMzggMTAzMCwxMzgiIGZpbGw9IiNkZGRkZGQiIHN0cm9rZT0iI2RkZGRkZCIgc3Ryb2tlLXdpZHRoPSIuNiIvPjxwb2x5Z29uIHBvaW50cz0iMTEyNiw5MCAxMjAwLDc3IDEyMDAsMTU1IiBmaWxsPSIjZTFlMWUxIiBzdHJva2U9IiNlMWUxZTEiIHN0cm9rZS13aWR0aD0iLjYiLz48cG9seWdvbiBwb2ludHM9IjExMjYsOTAgMTIwMCwxNTUgMTA5NSwxMzgiIGZpbGw9IiNkZWRlZGUiIHN0cm9rZT0iI2RlZGVkZSIgc3Ryb2tlLXdpZHRoPSIuNiIvPjxwb2x5Z29uIHBvaW50cz0iMCwxNDIgMTI1LDE1MyA5MSwyMzUiIGZpbGw9IiNlMGUwZTAiIHN0cm9rZT0iI2UwZTBlMCIgc3Ryb2tlLXdpZHRoPSIuNiIvPjxwb2x5Z29uIHBvaW50cz0iMCwxNDIgOTEsMjM1IDAsMjE2IiBmaWxsPSIjZGVkZWRlIiBzdHJva2U9IiNkZWRlZGUiIHN0cm9rZS13aWR0aD0iLjYiLz48cG9seWdvbiBwb2ludHM9IjEyNSwxNTMgMjIzLDE2NCAxODksMjI3IiBmaWxsPSIjZGZkZmRmIiBzdHJva2U9IiNkZmRmZGYiIHN0cm9rZS13aWR0aD0iLjYiLz48cG9seWdvbiBwb2ludHM9IjEyNSwxNTMgMTg5LDIyNyA5MSwyMzUiIGZpbGw9IiNkN2Q3ZDciIHN0cm9rZT0iI2Q3ZDdkNyIgc3Ryb2tlLXdpZHRoPSIuNiIvPjxwb2x5Z29uIHBvaW50cz0iMjIzLDE2NCAzMDEsMTQ3IDMyNCwyMDkiIGZpbGw9IiNkZGRkZGQiIHN0cm9rZT0iI2RkZGRkZCIgc3Ryb2tlLXdpZHRoPSIuNiIvPjxwb2x5Z29uIHBvaW50cz0iMjIzLDE2NCAzMjQsMjA5IDE4OSwyMjciIGZpbGw9IiNlN2U3ZTciIHN0cm9rZT0iI2U3ZTdlNyIgc3Ryb2tlLXdpZHRoPSIuNiIvPjxwb2x5Z29uIHBvaW50cz0iMzAxLDE0NyA0MDYsMTQ3IDM3NCwyMTQiIGZpbGw9IiNlYmViZWIiIHN0cm9rZT0iI2ViZWJlYiIgc3Ryb2tlLXdpZHRoPSIuNiIvPjxwb2x5Z29uIHBvaW50cz0iMzAxLDE0NyAzNzQsMjE0IDMyNCwyMDkiIGZpbGw9IiNlYWVhZWEiIHN0cm9rZT0iI2VhZWFlYSIgc3Ryb2tlLXdpZHRoPSIuNiIvPjxwb2x5Z29uIHBvaW50cz0iNDA2LDE0NyA0ODAsMTQyIDUxNiwyMzAiIGZpbGw9IiNlNWU1ZTUiIHN0cm9rZT0iI2U1ZTVlNSIgc3Ryb2tlLXdpZHRoPSIuNiIvPjxwb2x5Z29uIHBvaW50cz0iNDA2LDE0NyA1MTYsMjMwIDM3NCwyMTQiIGZpbGw9IiNlOWU5ZTkiIHN0cm9rZT0iI2U5ZTllOSIgc3Ryb2tlLXdpZHRoPSIuNiIvPjxwb2x5Z29uIHBvaW50cz0iNDgwLDE0MiA2MTksMTMyIDU4NCwyMTgiIGZpbGw9IiNlZmVmZWYiIHN0cm9rZT0iI2VmZWZlZiIgc3Ryb2tlLXdpZHRoPSIuNiIvPjxwb2x5Z29uIHBvaW50cz0iNDgwLDE0MiA1ODQsMjE4IDUxNiwyMzAiIGZpbGw9IiNlY2VjZWMiIHN0cm9rZT0iI2VjZWNlYyIgc3Ryb2tlLXdpZHRoPSIuNiIvPjxwb2x5Z29uIHBvaW50cz0iNjE5LDEzMiA2NzMsMTU1IDY4MSwyMjMiIGZpbGw9IiNlZmVmZWYiIHN0cm9rZT0iI2VmZWZlZiIgc3Ryb2tlLXdpZHRoPSIuNiIvPjxwb2x5Z29uIHBvaW50cz0iNjE5LDEzMiA2ODEsMjIzIDU4NCwyMTgiIGZpbGw9IiNlYmViZWIiIHN0cm9rZT0iI2ViZWJlYiIgc3Ryb2tlLXdpZHRoPSIuNiIvPjxwb2x5Z29uIHBvaW50cz0iNjczLDE1NSA3ODcsMTUxIDc3MywyMzMiIGZpbGw9IiNlYWVhZWEiIHN0cm9rZT0iI2VhZWFlYSIgc3Ryb2tlLXdpZHRoPSIuNiIvPjxwb2x5Z29uIHBvaW50cz0iNjczLDE1NSA3NzMsMjMzIDY4MSwyMjMiIGZpbGw9IiNlYmViZWIiIHN0cm9rZT0iI2ViZWJlYiIgc3Ryb2tlLXdpZHRoPSIuNiIvPjxwb2x5Z29uIHBvaW50cz0iNzg3LDE1MSA4OTgsMTQ0IDkyNCwyNDMiIGZpbGw9IiNlMGUwZTAiIHN0cm9rZT0iI2UwZTBlMCIgc3Ryb2tlLXdpZHRoPSIuNiIvPjxwb2x5Z29uIHBvaW50cz0iNzg3LDE1MSA5MjQsMjQzIDc3MywyMzMiIGZpbGw9IiNlYmViZWIiIHN0cm9rZT0iI2ViZWJlYiIgc3Ryb2tlLXdpZHRoPSIuNiIvPjxwb2x5Z29uIHBvaW50cz0iODk4LDE0NCAxMDMwLDEzOCAxMDE0LDI0MyIgZmlsbD0iI2U3ZTdlNyIgc3Ryb2tlPSIjZTdlN2U3IiBzdHJva2Utd2lkdGg9Ii42Ii8+PHBvbHlnb24gcG9pbnRzPSI4OTgsMTQ0IDEwMTQsMjQzIDkyNCwyNDMiIGZpbGw9IiNkYWRhZGEiIHN0cm9rZT0iI2RhZGFkYSIgc3Ryb2tlLXdpZHRoPSIuNiIvPjxwb2x5Z29uIHBvaW50cz0iMTAzMCwxMzggMTA5NSwxMzggMTA3MSwyMTciIGZpbGw9IiNlNWU1ZTUiIHN0cm9rZT0iI2U1ZTVlNSIgc3Ryb2tlLXdpZHRoPSIuNiIvPjxwb2x5Z29uIHBvaW50cz0iMTAzMCwxMzggMTA3MSwyMTcgMTAxNCwyNDMiIGZpbGw9IiNlNmU2ZTYiIHN0cm9rZT0iI2U2ZTZlNiIgc3Ryb2tlLXdpZHRoPSIuNiIvPjxwb2x5Z29uIHBvaW50cz0iMTA5NSwxMzggMTIwMCwxNTUgMTIwMCwyNDQiIGZpbGw9IiNkZGRkZGQiIHN0cm9rZT0iI2RkZGRkZCIgc3Ryb2tlLXdpZHRoPSIuNiIvPjxwb2x5Z29uIHBvaW50cz0iMTA5NSwxMzggMTIwMCwyNDQgMTA3MSwyMTciIGZpbGw9IiNkNWQ1ZDUiIHN0cm9rZT0iI2Q1ZDVkNSIgc3Ryb2tlLXdpZHRoPSIuNiIvPjxwb2x5Z29uIHBvaW50cz0iMCwyMTYgOTEsMjM1IDExNywzMDAiIGZpbGw9IiNlMmUyZTIiIHN0cm9rZT0iI2UyZTJlMiIgc3Ryb2tlLXdpZHRoPSIuNiIvPjxwb2x5Z29uIHBvaW50cz0iMCwyMTYgMTE3LDMwMCAwLDMwMCIgZmlsbD0iI2Q1ZDVkNSIgc3Ryb2tlPSIjZDVkNWQ1IiBzdHJva2Utd2lkdGg9Ii42Ii8+PHBvbHlnb24gcG9pbnRzPSI5MSwyMzUgMTg5LDIyNyAxOTUsMzAwIiBmaWxsPSIjZTZlNmU2IiBzdHJva2U9IiNlNmU2ZTYiIHN0cm9rZS13aWR0aD0iLjYiLz48cG9seWdvbiBwb2ludHM9IjkxLDIzNSAxOTUsMzAwIDExNywzMDAiIGZpbGw9IiNlMGUwZTAiIHN0cm9rZT0iI2UwZTBlMCIgc3Ryb2tlLXdpZHRoPSIuNiIvPjxwb2x5Z29uIHBvaW50cz0iMTg5LDIyNyAzMjQsMjA5IDMyNywzMDAiIGZpbGw9IiNkYmRiZGIiIHN0cm9rZT0iI2RiZGJkYiIgc3Ryb2tlLXdpZHRoPSIuNiIvPjxwb2x5Z29uIHBvaW50cz0iMTg5LDIyNyAzMjcsMzAwIDE5NSwzMDAiIGZpbGw9IiNkYmRiZGIiIHN0cm9rZT0iI2RiZGJkYiIgc3Ryb2tlLXdpZHRoPSIuNiIvPjxwb2x5Z29uIHBvaW50cz0iMzI0LDIwOSAzNzQsMjE0IDQwNywzMDAiIGZpbGw9IiNlN2U3ZTciIHN0cm9rZT0iI2U3ZTdlNyIgc3Ryb2tlLXdpZHRoPSIuNiIvPjxwb2x5Z29uIHBvaW50cz0iMzI0LDIwOSA0MDcsMzAwIDMyNywzMDAiIGZpbGw9IiNlNWU1ZTUiIHN0cm9rZT0iI2U1ZTVlNSIgc3Ryb2tlLXdpZHRoPSIuNiIvPjxwb2x5Z29uIHBvaW50cz0iMzc0LDIxNCA1MTYsMjMwIDUxOSwzMDAiIGZpbGw9IiNlY2VjZWMiIHN0cm9rZT0iI2VjZWNlYyIgc3Ryb2tlLXdpZHRoPSIuNiIvPjxwb2x5Z29uIHBvaW50cz0iMzc0LDIxNCA1MTksMzAwIDQwNywzMDAiIGZpbGw9IiNlZGVkZWQiIHN0cm9rZT0iI2VkZWRlZCIgc3Ryb2tlLXdpZHRoPSIuNiIvPjxwb2x5Z29uIHBvaW50cz0iNTE2LDIzMCA1ODQsMjE4IDU4OCwzMDAiIGZpbGw9IiNlNmU2ZTYiIHN0cm9rZT0iI2U2ZTZlNiIgc3Ryb2tlLXdpZHRoPSIuNiIvPjxwb2x5Z29uIHBvaW50cz0iNTE2LDIzMCA1ODgsMzAwIDUxOSwzMDAiIGZpbGw9IiNlMmUyZTIiIHN0cm9rZT0iI2UyZTJlMiIgc3Ryb2tlLXdpZHRoPSIuNiIvPjxwb2x5Z29uIHBvaW50cz0iNTg0LDIxOCA2ODEsMjIzIDY4MSwzMDAiIGZpbGw9IiNmMWYxZjEiIHN0cm9rZT0iI2YxZjFmMSIgc3Ryb2tlLXdpZHRoPSIuNiIvPjxwb2x5Z29uIHBvaW50cz0iNTg0LDIxOCA2ODEsMzAwIDU4OCwzMDAiIGZpbGw9IiNlM2UzZTMiIHN0cm9rZT0iI2UzZTNlMyIgc3Ryb2tlLXdpZHRoPSIuNiIvPjxwb2x5Z29uIHBvaW50cz0iNjgxLDIyMyA3NzMsMjMzIDc5NywzMDAiIGZpbGw9IiNlZGVkZWQiIHN0cm9rZT0iI2VkZWRlZCIgc3Ryb2tlLXdpZHRoPSIuNiIvPjxwb2x5Z29uIHBvaW50cz0iNjgxLDIyMyA3OTcsMzAwIDY4MSwzMDAiIGZpbGw9IiNlMmUyZTIiIHN0cm9rZT0iI2UyZTJlMiIgc3Ryb2tlLXdpZHRoPSIuNiIvPjxwb2x5Z29uIHBvaW50cz0iNzczLDIzMyA5MjQsMjQzIDg3OCwzMDAiIGZpbGw9IiNlOWU5ZTkiIHN0cm9rZT0iI2U5ZTllOSIgc3Ryb2tlLXdpZHRoPSIuNiIvPjxwb2x5Z29uIHBvaW50cz0iNzczLDIzMyA4NzgsMzAwIDc5NywzMDAiIGZpbGw9IiNlYWVhZWEiIHN0cm9rZT0iI2VhZWFlYSIgc3Ryb2tlLXdpZHRoPSIuNiIvPjxwb2x5Z29uIHBvaW50cz0iOTI0LDI0MyAxMDE0LDI0MyA5OTMsMzAwIiBmaWxsPSIjZTZlNmU2IiBzdHJva2U9IiNlNmU2ZTYiIHN0cm9rZS13aWR0aD0iLjYiLz48cG9seWdvbiBwb2ludHM9IjkyNCwyNDMgOTkzLDMwMCA4NzgsMzAwIiBmaWxsPSIjZTJlMmUyIiBzdHJva2U9IiNlMmUyZTIiIHN0cm9rZS13aWR0aD0iLjYiLz48cG9seWdvbiBwb2ludHM9IjEwMTQsMjQzIDEwNzEsMjE3IDExMjgsMzAwIiBmaWxsPSIjZTNlM2UzIiBzdHJva2U9IiNlM2UzZTMiIHN0cm9rZS13aWR0aD0iLjYiLz48cG9seWdvbiBwb2ludHM9IjEwMTQsMjQzIDExMjgsMzAwIDk5MywzMDAiIGZpbGw9IiNkOWQ5ZDkiIHN0cm9rZT0iI2Q5ZDlkOSIgc3Ryb2tlLXdpZHRoPSIuNiIvPjxwb2x5Z29uIHBvaW50cz0iMTA3MSwyMTcgMTIwMCwyNDQgMTIwMCwzMDAiIGZpbGw9IiNkZWRlZGUiIHN0cm9rZT0iI2RlZGVkZSIgc3Ryb2tlLXdpZHRoPSIuNiIvPjxwb2x5Z29uIHBvaW50cz0iMTA3MSwyMTcgMTIwMCwzMDAgMTEyOCwzMDAiIGZpbGw9IiNkOWQ5ZDkiIHN0cm9rZT0iI2Q5ZDlkOSIgc3Ryb2tlLXdpZHRoPSIuNiIvPjwvc3ZnPg==") center / cover no-repeat,
    #e9e9e9;
  color: #2b2b2b;
  text-align: center;
  box-sizing: border-box;
}

/* 内側の細い枠線 */
.hr-temp-banner::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(43, 43, 43, 0.18);
  border-radius: 4px;
  pointer-events: none;
}

/* 上の小さなロゴ文字 */
.hr-temp-banner__brand {
  margin: 0 0 10px;
  color: #6b6b6b;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
}

/* 英字の見出し（細めのセリフ体） */
.hr-temp-banner__en {
  margin: 0;
  font-family: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  font-size: clamp(32px, 5.2vw, 64px);
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.05;
}

/* 日本語の見出し：両側に短い線 */
.hr-temp-banner__ja {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 12px 0 0;
  font-size: clamp(14px, 1.5vw, 18px);
  font-weight: 700;
  letter-spacing: 0.2em;
}

.hr-temp-banner__ja::before,
.hr-temp-banner__ja::after {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}

/* ひとこと */
.hr-temp-banner__text {
  margin: 8px 0 0;
  color: #6b6b6b;
  font-size: clamp(12px, 1.2vw, 14px);
  letter-spacing: 0.08em;
  text-wrap: balance;           /* 2行になるとき、1文字だけ下に残らないように */
}

/* スマホ：高さを確保して、文字を少し小さく */
@media (max-width: 639px) {
  .hr-temp-banner {
    aspect-ratio: auto;
    min-height: 0;
    padding: 34px 22px;
  }

  .hr-temp-banner::before {
    inset: 8px;
  }

  .hr-temp-banner__brand {
    margin-bottom: 6px;
    font-size: 12px;
    letter-spacing: 0.3em;
  }

  .hr-temp-banner__en {
    font-size: 30px;
  }

  .hr-temp-banner__ja {
    gap: 10px;
    margin-top: 8px;
    font-size: 14px;
    letter-spacing: 0.12em;
  }

  .hr-temp-banner__ja::before,
  .hr-temp-banner__ja::after {
    width: 18px;
  }

  .hr-temp-banner__text {
    font-size: 12px;
    letter-spacing: 0.04em;
  }
}

/* --- セクション（ページ内リンクの飛び先にもなる） --- */
.hr-sec {
  margin: var(--hr-gap-sec) 0 0;
  scroll-margin-top: 80px;      /* 固定ヘッダーに見出しが隠れないように */
}

/* --- 色の帯（背景色は画面の端から端まで広げる：2026-10-09 高見さんのルール）
   ・色を変えるときは --hr-band-bg を指定する（例：style="--hr-band-bg: #f5f5f5"）
   ・幅を100vwにするとスクロールバーの分だけ横にはみ出すので、
     影（box-shadow）で左右に色を伸ばし、上下だけ clip-path で切っている --- */
.hr-band {
  margin: var(--hr-gap-sec) -16px 0;
  padding: var(--hr-gap-sec) 16px;
  background: var(--hr-band-bg, var(--hr-bg-soft));
  box-shadow: 0 0 0 100vmax var(--hr-band-bg, var(--hr-bg-soft));
  clip-path: inset(0 -100vmax);
}

/* --- 汎用の並べ枠 --- */
.hr-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  list-style: none;
}


/* =============================================================
   7. ボタン
   角丸4px。ホバーで色が左から右へスライドし、矢印が右へ動く。
   <a class="hr-btn" href="…">
     <svg class="hr-ico"><use href="#hr-i-user"/></svg>文言
     <svg class="hr-ico hr-arrow"><use href="#hr-i-right"/></svg>
   </a>
   ============================================================= */

/* --- メインボタン（差し色の塗り） --- */
.hr-btn {
  position: relative;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  max-width: 380px;
  margin: 32px auto 0;
  padding: 16px 48px;
  overflow: hidden;
  border: 1.5px solid var(--hr-accent);
  border-radius: var(--hr-r-btn);
  background: var(--hr-accent);
  color: #fff !important;               /* ショップサーブのリンク色に負けないように */
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.1em;
  text-decoration: none !important;
  cursor: pointer;
  transition:
    color var(--hr-ease),
    border-color var(--hr-ease),
    box-shadow var(--hr-ease);
}

/* スライドする色の層（ふだんは幅0、ホバーで全体に広がる） */
.hr-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--hr-accent-dark);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--hr-ease);
}

.hr-btn:hover::before {
  transform: scaleX(1);
  transform-origin: left;
}

.hr-btn:hover {
  border-color: var(--hr-accent-dark);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.hr-btn .hr-ico {
  width: 22px;
  height: 22px;
}

/* 右端の矢印（ホバーで右へ動く） */
.hr-btn .hr-arrow {
  position: absolute;
  right: 18px;
  width: 16px;
  height: 16px;
  transition: transform var(--hr-ease);
}

.hr-btn:hover .hr-arrow {
  transform: translateX(5px);
}

/* --- サブボタン（白地＋枠線）。.is-sub は旧書き方の互換用 --- */
.hr-btn--sub,
.hr-btn.is-sub {
  background: #fff;
  color: var(--hr-accent) !important;
}

.hr-btn--sub::before,
.hr-btn.is-sub::before {
  background: var(--hr-accent);
}

.hr-btn--sub:hover,
.hr-btn.is-sub:hover {
  border-color: var(--hr-accent);
  color: #fff !important;
}

/* --- ボタンを並べる枠（スマホは縦、PCは横） --- */
.hr-btns {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 32px;
}

.hr-btns .hr-btn {
  width: 100%;
  margin: 0 auto;
}


/* =============================================================
   8. 目次ボタン
   押せるもの＝白地＋差し色の枠線。ホバーで下から色が満ちる。
   ============================================================= */

/* 目次の上の小さなラベル（例：知りたい項目へ移動） */
.hr-nav-label {
  display: block;
  margin: 0 0 8px;
  color: var(--hr-sub);
  font-size: 13px;
  letter-spacing: 0.1em;
}

.hr-nav:not(.hr-drawer__body) {
  display: grid;
  grid-template-columns: repeat(2, 1fr);   /* スマホ2列（PCは4列：11で指定） */
  gap: 8px;
  list-style: none;
}

.hr-nav:not(.hr-drawer__body) a {
  position: relative;
  z-index: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  overflow: hidden;
  border: 1.5px solid var(--hr-accent);
  border-radius: var(--hr-r-btn);
  background: #fff;
  color: var(--hr-accent) !important;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  text-decoration: none;
  transition: color 0.3s;
}

/* 下から満ちる色の層 */
.hr-nav:not(.hr-drawer__body) a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--hr-accent);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.3s ease;
}

.hr-nav:not(.hr-drawer__body) a:hover {
  color: #fff !important;
}

.hr-nav:not(.hr-drawer__body) a:hover::before {
  transform: scaleY(1);
}

/* 右端の下向き矢印（ホバーで弾む） */
.hr-nav:not(.hr-drawer__body) .hr-ico.is-arrow {
  width: 14px;
  height: 14px;
  margin-left: auto;
}

.hr-nav:not(.hr-drawer__body) a:hover .is-arrow {
  animation: hr-bounce 0.6s ease infinite;
}

@keyframes hr-bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(4px);
  }
}


/* =============================================================
   9. 説明カード・タイル・ステップ・商品の特長・商品説明画像・商品画像ギャラリー
   押せないもの＝ベージュ地・枠なし・角丸8px。
   ============================================================= */

/* --- 説明カード --- */
.hr-card {
  padding: 24px 20px;
  border-radius: var(--hr-r-card);
  background: var(--hr-bg-soft);
  font-size: 14px;
  line-height: 1.7;
}

/* 白地カード（写真付きの紹介など） */
.hr-card--line {
  border: 1px solid var(--hr-line);
  background: #fff;
}

/* カード上部の写真（カードの余白を打ち消して端まで広げる） */
.hr-card__img {
  margin: -24px -20px 20px;
  overflow: hidden;
  border-radius: var(--hr-r-card) var(--hr-r-card) 0 0;
}

.hr-card__img img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* 番号（01、02…） */
.hr-card__num {
  margin-bottom: 4px;
  color: var(--hr-accent);
  font-family: var(--hr-font-en);
  font-size: 28px;
  font-weight: 300;
  line-height: 1;
}

.hr-card__title {
  display: block;
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 600;
}

.hr-card p {
  margin: 0;
  color: var(--hr-sub);
}

/* カードを並べる枠（スマホ1列、PC3列。.hr-cards--2 でPC2列） */
.hr-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  list-style: none;
}

/* --- アイコンの丸（説明カードの中で使う） --- */
.hr-icircle {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin-bottom: 10px;
  border-radius: 50%;
  background: #fff;
  color: var(--hr-accent);
}

.hr-icircle .hr-ico {
  width: 36px;
  height: 36px;
}

/* --- 特典タイル（アイコン＋短い説明。スマホ2列、PC3列） --- */
.hr-benefits {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  list-style: none;
}

.hr-benefits li {
  padding: 24px 12px;
  border-radius: var(--hr-r-card);
  background: var(--hr-bg-soft);
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
}

.hr-benefits strong {
  display: block;
  margin-bottom: 2px;
  font-size: 15px;
}

/* --- 数字を大きく見せるタイル（スマホ2列、PC4列） --- */
.hr-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 0 0 20px;
}

.hr-stats > * {
  padding: 20px 10px;
  border-radius: var(--hr-r-card);
  background: var(--hr-bg-soft);
  text-align: center;
}

.hr-stats .hr-ico {
  width: 40px;
  height: 40px;
  margin-bottom: 8px;
  color: var(--hr-accent);
}

.hr-stats strong {
  display: block;
  font-size: 24px;
  line-height: 1.3;
}

.hr-stats span {
  display: block;
  margin-top: 4px;
  color: var(--hr-sub);
  font-size: 14px;
  line-height: 1.6;
}

/* --- ステップ（スマホは横長の行、PCは3列のカード） --- */
.hr-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  list-style: none;
}

.hr-steps li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-radius: var(--hr-r-card);
  background: var(--hr-bg-soft);
}

.hr-steps .hr-icircle {
  width: 64px;
  height: 64px;
  margin: 0;
}

.hr-steps .hr-icircle .hr-ico {
  width: 32px;
  height: 32px;
}

.hr-steps p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
}

/* 「STEP 1」などの番号ラベル */
.hr-num {
  display: block;
  color: var(--hr-accent);
  font-family: var(--hr-font-en);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.15em;
}

/* --- 商品の特長（番号付きの縦リスト） ---
   商品ページの「メイン紹介文_フリーHTML」で使う。番号は手で書く（01、02…）。
   <ol class="hr-features">
     <li class="hr-features__item">
       <span class="hr-features__num">01</span>
       <div class="hr-features__body">
         <h4 class="hr-features__title">特長の見出し</h4>
         <p>本文</p>
       </div>
     </li>
   </ol> */
.hr-features {
  margin: 0;
  border-bottom: 1px solid var(--hr-line);   /* 最後の項目の下にも線を引く */
  list-style: none;
}

.hr-features__item {
  display: flex;
  gap: 20px;
  padding: 24px 0;
  border-top: 1px solid var(--hr-line);
}

/* 番号（説明カードの番号 .hr-card__num と同じ見た目にそろえる） */
.hr-features__num {
  flex: 0 0 40px;
  padding-top: 2px;
  color: var(--hr-accent);
  font-family: var(--hr-font-en);
  font-size: 28px;
  font-weight: 300;
  line-height: 1;
}

.hr-features__body {
  flex: 1;
  min-width: 0;                 /* 長い文でも横にはみ出さないように */
}

.hr-page .hr-features__title {
  margin: 0 0 6px;
  font-size: 16px;
}

.hr-features__body p {
  margin: 0;
  color: var(--hr-sub);
  font-size: 14px;
}

/* 本文の途中にある【箱サイズ】などの小見出し */
.hr-features__body strong {
  color: var(--hr-text);
}

/* --- 商品説明画像（A+画像。PC用とスマホ用を切り替える） ---
   PC用とスマホ用で枚数が違うため、両方をHTMLに書き、画面幅で片方だけ表示する。
   切り替えは「11. 画面幅ごとの調整」の640px以上で行う。
   <div class="hr-aplus">
     <div class="hr-aplus__pc">
       <img src="…-ap-pc-1.jpg" alt="…" width="1464" height="2400" loading="lazy">
     </div>
     <div class="hr-aplus__sp">
       <img src="…-ap-sp-1.jpg" alt="…" width="600" height="450" loading="lazy">
     </div>
   </div> */
.hr-aplus__pc {
  display: none;                /* スマホ基準：PC用はふだん隠す（640px以上で表示） */
}

.hr-aplus img {
  width: 100%;
  margin: 0 auto;               /* 画像どうしを隙間なく縦につなげる（1枚の長い画像に見せるため） */
}

.hr-aplus__sp img {
  max-width: 600px;             /* スマホ用画像の元の幅（600px）より引き伸ばして粗くならないように */
}

/* --- 商品画像ギャラリー（A+画像がない商品のサブ画像を並べる） ---
   1枚ずつ独立した写真なので、hr-aplus と違って画像の間をあける。
   <section class="hr-sec hr-gallery" data-sku="prz-xxx">
     <ul class="hr-gallery__list">
       <li class="hr-gallery__item hr-gallery__item--1">
         <img class="hr-gallery__img" src="…-1.jpg" alt="…" width="1000" height="1000" loading="lazy">
       </li>
     </ul>
   </section>

   【あとで装飾を変えるとき】
     ・全商品まとめて変える → 下の .hr-gallery の値（--hr-gallery-〜）を書き換える
     ・一部の商品だけ変える → section に追加クラスを付ける
         hr-gallery--grid2 … PCで2列に並べる
         hr-gallery--frame … 写真に薄い枠と余白を付ける
     ・1商品だけ変える     → .hr-gallery[data-sku="prz-xxx"] { … } で指定する
     ・n枚目だけ変える     → .hr-gallery__item--n で指定する */
.hr-gallery {
  --hr-gallery-gap: 24px;                   /* 画像どうしの間隔（PCは32px） */
  --hr-gallery-max: 800px;                  /* 1列のときの最大幅 */
  --hr-gallery-cols: 1;                     /* 列の数 */
  --hr-gallery-radius: var(--hr-r-card);    /* 写真の角丸 */
  --hr-gallery-bg: transparent;             /* 写真の背景 */
  --hr-gallery-border: 0;                   /* 写真の枠線 */
  --hr-gallery-pad: 0;                      /* 枠の内側の余白 */
}

.hr-page .hr-gallery__list {
  display: grid;
  grid-template-columns: repeat(var(--hr-gallery-cols), minmax(0, 1fr));
  gap: var(--hr-gallery-gap);
  max-width: var(--hr-gallery-max);
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.hr-gallery__item {
  margin: 0;
  padding: var(--hr-gallery-pad);
  border: var(--hr-gallery-border);
  border-radius: var(--hr-gallery-radius);
  background: var(--hr-gallery-bg);
}

.hr-page .hr-gallery__img {
  width: 100%;
  border-radius: var(--hr-gallery-radius);
}

/* 追加クラス：写真に薄い枠と余白を付ける */
.hr-gallery--frame {
  --hr-gallery-border: 1px solid var(--hr-line);
  --hr-gallery-pad: 12px;
  --hr-gallery-bg: var(--hr-bg);
}


/* =============================================================
   10. リスト・囲み・Q&A・表・お問い合わせ・読み物
   ============================================================= */

/* --- アイコン付きリスト（PCは2列） --- */
.hr-ilist {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 24px;
  list-style: none;
}

.hr-ilist li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--hr-line);
}

.hr-ilist .hr-ico {
  width: 28px;
  height: 28px;
  color: var(--hr-accent);
}

/* --- チェックリスト（先頭にチェックマーク） --- */
.hr-check {
  list-style: none;
}

.hr-check li {
  position: relative;
  padding: 8px 0 8px 28px;
  border-bottom: 1px dashed var(--hr-line);
}

/* チェックマーク（L字の線を回転させて描く） */
.hr-check li::before {
  content: "";
  position: absolute;
  top: 15px;
  left: 4px;
  width: 12px;
  height: 7px;
  border-bottom: 2px solid var(--hr-accent);
  border-left: 2px solid var(--hr-accent);
  transform: rotate(-45deg);
}

/* --- 注記（※〜の小さなグレー文字） --- */
.hr-note {
  margin: 16px 0 0;
  color: var(--hr-sub);
  font-size: 13px;
  line-height: 1.8;
  list-style: none;
}

/* --- 囲み（お知らせ・補足） ---
   <div class="hr-box">
     <svg class="hr-ico">…</svg>
     <div><p><strong>見出し</strong></p><p>本文</p></div>
   </div> */
.hr-box {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 24px 0;
  padding: 16px 20px;
  border-radius: var(--hr-r-card);
  background: var(--hr-bg-soft);
  font-size: 14px;
}

.hr-box > .hr-ico {
  width: 26px;
  height: 26px;
  margin-top: 1px;
  color: var(--hr-accent);
}

.hr-box p {
  margin: 0;
}

.hr-box p + p {
  margin-top: 6px;
  color: var(--hr-sub);
}

/* 点線の囲み（計算例など） */
.hr-box--dash {
  border: 1px dashed var(--hr-accent);
  background: #fff;
}

/* --- Q&A（開閉。スクリプト不要） ---
   <details class="hr-qa">
     <summary>質問</summary>
     <div>回答</div>
   </details> */
.hr-qa {
  border-bottom: 1px solid var(--hr-line);
}

.hr-qa > summary {
  position: relative;
  display: flex;
  gap: 12px;
  padding: 18px 36px 18px 0;
  font-weight: 600;
  list-style: none;             /* ブラウザ標準の三角を消す */
  cursor: pointer;
}

.hr-qa > summary::-webkit-details-marker {
  display: none;                /* Safari用：標準の三角を消す */
}

/* 先頭の「Q」 */
.hr-qa > summary::before {
  content: "Q";
  flex-shrink: 0;
  color: var(--hr-accent);
  font-family: var(--hr-font-en);
}

/* 右端の開閉矢印（開くと上向きに回転） */
.hr-qa > summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 8px;
  width: 9px;
  height: 9px;
  margin-top: -7px;
  border-right: 1.5px solid var(--hr-sub);
  border-bottom: 1.5px solid var(--hr-sub);
  transform: rotate(45deg);
  transition: transform 0.3s;
}

.hr-qa[open] > summary::after {
  margin-top: -2px;
  transform: rotate(-135deg);
}

/* 回答
   開くときは、ふわっと現れる（下のアニメーション）。
   なめらかに開閉する高さの動きは、共通ヘッダーのスクリプトで付けている */
.hr-qa > div {
  padding: 0 0 20px 28px;
  color: var(--hr-sub);
  font-size: 14px;
}

.hr-qa[open] > div {
  animation: hr-qa-open 0.4s ease;
}

@keyframes hr-qa-open {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* --- 表（スマホで横にはみ出す場合は横スクロール） --- */
.hr-table-wrap {
  margin: 24px 0;
  overflow-x: auto;
}

.hr-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.7;
}

.hr-table th,
.hr-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--hr-line);
  text-align: left;
  vertical-align: top;
}

.hr-table th {
  background: var(--hr-bg-soft);
  font-weight: 600;
  white-space: nowrap;
}

/* --- お問い合わせ（電話番号の囲み） --- */
.hr-contact {
  max-width: none;              /* 本文の幅いっぱい（2026-10-09 640px→なし） */
  margin: 32px auto 0;
  padding: 24px;
  border: 1px solid var(--hr-line);
  border-radius: var(--hr-r-card);
  font-size: 14px;
  text-align: center;
}

.hr-contact__tel {
  display: block;
  margin: 4px 0;
  color: var(--hr-text);
  font-family: var(--hr-font-en);
  font-size: 24px;
  letter-spacing: 0.08em;
}

/* --- 読み物（物語・引用・署名） --- */
.hr-story {
  max-width: 640px;
  margin: 0 auto;
}

.hr-quote {
  margin: 1.2em 0;
  padding: 0 0 0 20px;
  border-left: 2px solid var(--hr-accent-soft);
  color: var(--hr-sub);
}

.hr-sign {
  margin-top: 32px;
  color: var(--hr-sub);
  font-size: 14px;
  text-align: right;
}


/* =============================================================
   11. 画面幅ごとの調整
   スマホを基準に書き、640px以上（タブレット・PC）で列を増やす。
   ============================================================= */

/* --- 640px以上：タブレット・PC --- */
@media (min-width: 640px) {
  /* 目次ボタン・数字のタイル：数が少なくても本文の幅いっぱいに広がるように、
     1行に入るだけ並べて、余った分は各ボタンで均等に分ける（2026-10-09） */
  .hr-nav:not(.hr-drawer__body),
  .hr-stats {
    display: flex;
    flex-wrap: wrap;
  }

  .hr-nav:not(.hr-drawer__body) > *,
  .hr-stats > * {
    flex: 1 1 200px;
  }

  .hr-benefits {
    grid-template-columns: repeat(3, 1fr);
  }

  .hr-steps {
    grid-template-columns: repeat(3, 1fr);
  }

  .hr-steps li {
    flex-direction: column;
    text-align: center;
  }

  .hr-ilist {
    grid-template-columns: 1fr 1fr;
  }

  .hr-cards {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }

  .hr-cards--2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .hr-btns {
    flex-direction: row;
    justify-content: center;
  }

  .hr-btns .hr-btn {
    width: auto;
    min-width: 240px;
    margin: 0;
  }

  /* 商品説明画像：PC用を表示して、スマホ用を隠す */
  .hr-aplus__pc {
    display: block;
  }

  .hr-aplus__sp {
    display: none;
  }

  /* 商品画像ギャラリー：画像の間を少し広げる。2列の追加クラスはPCだけ効かせる */
  .hr-gallery {
    --hr-gallery-gap: 32px;
  }

  .hr-gallery--grid2 {
    --hr-gallery-cols: 2;
    --hr-gallery-max: 100%;
  }
}

/* --- 639px以下：スマホ（文字と余白を少し小さく） --- */
@media (max-width: 639px) {
  .hr-page {
    --hr-gap-sec: 48px;
    font-size: 14px;
  }

  .hr-page .hr-title {
    font-size: 24px;
  }

  .hr-page .hr-heading {
    margin-bottom: 28px;
  }

  .hr-heading__ja {
    font-size: 19px;
  }

  .hr-btn {
    padding: 15px 44px;
  }

  /* 商品の特長：番号の列を細くして、本文の幅を広くとる */
  .hr-features__item {
    gap: 14px;
    padding: 20px 0;
  }

  .hr-features__num {
    flex-basis: 32px;
    font-size: 24px;
  }
}


/* =============================================================
   12. 動きを減らす設定への配慮
   端末で「視差効果を減らす」などをオンにしている方には、動きを止める。
   ============================================================= */

@media (prefers-reduced-motion: reduce) {
  .hr-btn::before,
  .hr-nav:not(.hr-drawer__body) a::before,
  .hr-btn .hr-arrow,
  .hr-qa > summary::after {
    transition: none;
  }

  .hr-nav:not(.hr-drawer__body) a:hover .is-arrow,
  .hr-qa[open] > div {
    animation: none;
  }
}


/* =============================================================
   13. ショップサーブ（Eストア）の枠への対応（2026-10-09／商品ページ 2026-10-12／v2.29 2026-10-23）
   ・フリーページ（本文に #Journal がある）はサイドバーを出さない（2026-10-07 決定）。
     旧デザインのままのフリーページも含めて、全部のフリーページで消す（v2.29。前は .hr-page がある本文だけ）
   ・カテゴリページ・商品ページはサイドバーを残す（10/23 高見さん）。
     ただしカテゴリのヘッダーで .hr-page--noside を付けたもの（贈る相手で選ぶ・贈る気持ちで選ぶ。10/15 高見さん）は消す
   ・商品ページ（article#Detail）は下の「13-2.」で別に扱う
   ・サイドバーを消すページは、本文の欄の左の余白（約39px）と幅の制限をなくし、中身を1200pxにする
   ・枠の overflow: hidden で、画面幅いっぱいの背景（hr-band）が切れないようにする
   ※ :has() は2023年以降のブラウザで使える。古いブラウザでは今まで通りの表示になる
   ============================================================= */

#contents:is(:has(#Journal), :has(.hr-page--noside)) #sub-column {
  display: none !important;
}

#wrapper:has(#Journal),
#wrapper:has(.hr-page--noside),
#contents:is(:has(#Journal), :has(.hr-page--noside)),
#contents:is(:has(#Journal), :has(.hr-page--noside)) article,
#contents:is(:has(#Journal), :has(.hr-page--noside)) #main-column {
  overflow: visible !important;
}

/* overflow をやめると回り込み（float）が枠からはみ出すので、ここで止める */
#contents:is(:has(#Journal), :has(.hr-page--noside))::after {
  content: "";
  display: table;
  clear: both;
}

#contents:is(:has(#Journal), :has(.hr-page--noside)) article,
#contents:is(:has(#Journal), :has(.hr-page--noside)) #main-column {
  float: none !important;
  width: 100% !important;
  max-width: none !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
}

/* 枠（#contents）に左右15pxの余白があるので、.hr-page の左右の余白は付けない。
   これで中身（文・カード・表など）が1200pxいっぱいに並ぶ */
#main-column .hr-page,
#main-column .hr-band {
  padding-right: 0;
  padding-left: 0;
}

#main-column .hr-band {
  margin-right: 0;
  margin-left: 0;
}


/* --- 13-2. 商品ページ（2026-10-12）
   ・左のサイドバーを残すので、ベージュの帯（hr-band）は画面幅ではなく本文の欄の幅で止める
     （本文の欄は overflow: hidden のままなので、影で伸ばした色は欄の端で切れる）
   ・帯の左右に余白を付け、角を丸めて、説明カードと同じ見え方にする --- */
/* カテゴリページ（サイドバーあり）のヘッダーも同じ扱い（v2.29） */
#Detail .hr-band,
#contents:has(#itemList_wrap):not(:has(.hr-page--noside)) #main-column .hr-band {
  padding-right: clamp(16px, 4vw, 40px);
  padding-left: clamp(16px, 4vw, 40px);
  border-radius: var(--hr-r-card);
  box-shadow: none;
  clip-path: none;
}


/* =============================================================
   14. 商品ページ：ご案内リンク・お支払いの注意・商品説明の表（2026-10-12）
   Eストアの商品ページの下にある #iteminfomain の部分を、タグはそのままで整える。
   ・ご案内の6つと支払い方法の画像は、共通ヘッダー v1.5 の「5.」でカートの近く（#hr-cartinfo）に移す
   ・ご案内の6つ（文字入りのGIF画像）は画像を隠し、元の画像と同じ色の角丸の正方形にする。
     文言と色は下の「--- ボタンの文言と色 ---」で変えられる（リンク先のURLで見分けている）
   ・「花RiRoの５つの特典」は今は8つなので、ボタンの文言は「8つの特典」にしている
   ・entries/32 は「初めてのお客様へ」をやめてご利用ガイドを貼るページなので、文言は「ご利用ガイド」（10/12 高見さん）
   ・Eストアのテーマの指定に負けないように、#itemDetail-wrap #iteminfomain から書き始め、
     崩れやすい幅・高さ・背景・点には !important を付けている
   ============================================================= */

#itemDetail-wrap #iteminfomain {
  --hr-ii-accent: #c97782;      /* 差し色（共通CSSのくすみローズと同じ） */
  --hr-ii-text: #2b2b2b;
  --hr-ii-sub: #6b6b6b;
  --hr-ii-line: #ece6e2;
  --hr-ii-soft: #faf6f3;        /* ベージュ */
  display: block !important;    /* 本文の欄いっぱいに広げる（テーマの回り込み・幅の指定に負けないように） */
  float: none !important;
  width: auto !important;
  max-width: 1200px;
  margin: 48px auto 0;
  color: var(--hr-ii-text);
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "游ゴシック体",
    "Noto Sans JP", Meiryo, sans-serif;
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: 0.03em;
}

/* テーマの回り込み（float）や固定の幅をなくして、本文の幅いっぱいに使う */
#itemDetail-wrap #iteminfomain #iteminfo,
#itemDetail-wrap #iteminfomain .iteminfo_right {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}


/* --- 14-1. ご案内の6つ（元の画像と同じ色の角丸の正方形。2026-10-12 高見さん）
   ・PCは6列、スマホ（画面幅639px以下）は3列×2段（中途半端な段ができないように列の数を決めている）
   ・色は下の「--- ボタンの文言と色 ---」の --hr-ii-c で1つずつ変えられる --- */
#itemDetail-wrap :is(#iteminfomain, #hr-cartinfo) #item_info {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  height: auto !important;
  margin: 0 0 32px !important;
  padding: 0 !important;
  list-style: none;
}

/* スマホは3列×2段。
   ※ container-type（欄の幅で切り替える指定）は、Eストアの枠の中だと欄の幅が0になり
     全体が細く崩れたので使わない（10/12） */
@media (max-width: 639px) {
  #itemDetail-wrap :is(#iteminfomain, #hr-cartinfo) #item_info {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

#itemDetail-wrap :is(#iteminfomain, #hr-cartinfo) #item_info li {
  display: block !important;
  float: none !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;   /* テーマが画像の幅に合わせて付けている最大幅を消す */
  height: auto !important;      /* Eストアのテーマが画像用に付けている高さを消す */
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  line-height: 1.5 !important;
  list-style: none !important;
}

#itemDetail-wrap :is(#iteminfomain, #hr-cartinfo) #item_info li::before {
  content: none;                /* テーマの行頭の飾りを消す */
}

/* 角丸の正方形。内側の白い線は元の画像に合わせたもの（影を2重にして描いている） */
#itemDetail-wrap :is(#iteminfomain, #hr-cartinfo) #item_info a {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  aspect-ratio: 1 / 1;
  padding: 10px 8px !important;
  border-radius: 12px;
  background: var(--hr-ii-c, #c97782) !important;
  box-shadow:
    inset 0 0 0 5px var(--hr-ii-c, #c97782),
    inset 0 0 0 7px rgba(255, 255, 255, 0.9);
  color: #fff !important;       /* テーマのリンク色に負けないように */
  font-size: 16px;              /* 10/12 高見さん：14px→16px */
  font-weight: 700;
  line-height: 1.45 !important;
  letter-spacing: 0.04em;
  text-align: center;
  text-decoration: none !important;
  white-space: pre-line;        /* 文言の「\A」の位置で改行する（元の画像と同じ2行） */
  transition: transform 0.3s, opacity 0.3s;
}

#itemDetail-wrap :is(#iteminfomain, #hr-cartinfo) #item_info a:hover {
  opacity: 0.88;
  transform: translateY(-3px);
}

/* 文字入りの画像は隠す（文言は下の ::after で出す） */
#itemDetail-wrap :is(#iteminfomain, #hr-cartinfo) #item_info img {
  display: none !important;
}

/* 英字の小さなラベル */
#itemDetail-wrap :is(#iteminfomain, #hr-cartinfo) #item_info a::before {
  display: block;
  margin: 0 0 4px;
  color: rgba(255, 255, 255, 0.85);
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.16em;
}

/* --- ボタンの文言と色（リンク先で見分ける。URLが変わったらここも直す。色は元の画像から取った値） --- */
#itemDetail-wrap :is(#iteminfomain, #hr-cartinfo) #item_info a[href$="/entries/2.html"] {
  --hr-ii-c: #ff9933;
}

#itemDetail-wrap :is(#iteminfomain, #hr-cartinfo) #item_info a[href$="/entries/2.html"]::before {
  content: "DELIVERY";
}

#itemDetail-wrap :is(#iteminfomain, #hr-cartinfo) #item_info a[href$="/entries/2.html"]::after {
  content: "配達に\Aついて";
}

#itemDetail-wrap :is(#iteminfomain, #hr-cartinfo) #item_info a[href$="/entries/1.html"] {
  --hr-ii-c: #ff9999;
}

#itemDetail-wrap :is(#iteminfomain, #hr-cartinfo) #item_info a[href$="/entries/1.html"]::before {
  content: "PAYMENT";
}

#itemDetail-wrap :is(#iteminfomain, #hr-cartinfo) #item_info a[href$="/entries/1.html"]::after {
  content: "お支払い\Aについて";
}

#itemDetail-wrap :is(#iteminfomain, #hr-cartinfo) #item_info a[href$="/entries/149.html"] {
  --hr-ii-c: #66cc66;
}

#itemDetail-wrap :is(#iteminfomain, #hr-cartinfo) #item_info a[href$="/entries/149.html"]::before {
  content: "FAQ";
}

#itemDetail-wrap :is(#iteminfomain, #hr-cartinfo) #item_info a[href$="/entries/149.html"]::after {
  content: "よくある\Aご質問";
}

#itemDetail-wrap :is(#iteminfomain, #hr-cartinfo) #item_info a[href$="/entries/32.html"] {
  --hr-ii-c: #66ccff;
}

#itemDetail-wrap :is(#iteminfomain, #hr-cartinfo) #item_info a[href$="/entries/32.html"]::before {
  content: "GUIDE";
}

#itemDetail-wrap :is(#iteminfomain, #hr-cartinfo) #item_info a[href$="/entries/32.html"]::after {
  content: "ご利用\Aガイド";
}

/* 2026-10-17 から：共通ヘッダー v1.6「5.」でリンク先を付け替えたあとの見分け方
   ・配達について → ご利用ガイドの「発送について」(#shipping)
   ・お支払いについて → ご利用ガイドの「お支払い方法」(#payment)
   ・ご利用ガイドの枠 → メッセージ文例集(entries/130)
   ※ 上の entries/2・1・32 は、スクリプトが動かなかったときの予備として残している */
#itemDetail-wrap :is(#iteminfomain, #hr-cartinfo) #item_info a[href$="/entries/32.html#shipping"] {
  --hr-ii-c: #ff9933;
}

#itemDetail-wrap :is(#iteminfomain, #hr-cartinfo) #item_info a[href$="/entries/32.html#shipping"]::before {
  content: "DELIVERY";
}

#itemDetail-wrap :is(#iteminfomain, #hr-cartinfo) #item_info a[href$="/entries/32.html#shipping"]::after {
  content: "配達に\Aついて";
}

#itemDetail-wrap :is(#iteminfomain, #hr-cartinfo) #item_info a[href$="/entries/32.html#payment"] {
  --hr-ii-c: #ff9999;
}

#itemDetail-wrap :is(#iteminfomain, #hr-cartinfo) #item_info a[href$="/entries/32.html#payment"]::before {
  content: "PAYMENT";
}

#itemDetail-wrap :is(#iteminfomain, #hr-cartinfo) #item_info a[href$="/entries/32.html#payment"]::after {
  content: "お支払い\Aについて";
}

#itemDetail-wrap :is(#iteminfomain, #hr-cartinfo) #item_info a[href$="/entries/130.html"] {
  --hr-ii-c: #66ccff;
}

#itemDetail-wrap :is(#iteminfomain, #hr-cartinfo) #item_info a[href$="/entries/130.html"]::before {
  content: "MESSAGE";
}

#itemDetail-wrap :is(#iteminfomain, #hr-cartinfo) #item_info a[href$="/entries/130.html"]::after {
  content: "メッセージ\A文例集";
}

/* カート近くの小さい枠では「メッセージ」の5文字がぎりぎりなので、この1つだけ字の間を少し詰める
   （文字の大きさはほかの5つと同じ。10/18 高見さん） */
#itemDetail-wrap #hr-cartinfo #item_info a[href$="/entries/130.html"] {
  letter-spacing: -0.06em;
}

#itemDetail-wrap :is(#iteminfomain, #hr-cartinfo) #item_info a[href$="/entries/51.html"] {
  --hr-ii-c: #b892ff;
}

#itemDetail-wrap :is(#iteminfomain, #hr-cartinfo) #item_info a[href$="/entries/51.html"]::before {
  content: "NAME CARD";
}

#itemDetail-wrap :is(#iteminfomain, #hr-cartinfo) #item_info a[href$="/entries/51.html"]::after {
  content: "立札に\Aついて";
}

#itemDetail-wrap :is(#iteminfomain, #hr-cartinfo) #item_info a[href$="/entries/62.html"] {
  --hr-ii-c: #f6b37f;
}

#itemDetail-wrap :is(#iteminfomain, #hr-cartinfo) #item_info a[href$="/entries/62.html"]::before {
  content: "BENEFITS";
}

#itemDetail-wrap :is(#iteminfomain, #hr-cartinfo) #item_info a[href$="/entries/62.html"]::after {
  content: "８つの\A特典";
}


/* --- 14-1b. カートの近くに移したとき（共通ヘッダー v1.5 の「5.」で #hr-cartinfo に移す）
   ・6つを横1列に並べる（10/12 高見さん）。カートの欄は狭い（PCで約380px）ので、
     1つ約58pxの小さな正方形にし、英字のラベルは隠して文字も小さくしている --- */
#itemDetail-wrap #hr-cartinfo {
  clear: both;
  margin: 16px 0 20px;
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "游ゴシック体",
    "Noto Sans JP", Meiryo, sans-serif;
}

#itemDetail-wrap #hr-cartinfo #item_info {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 5px !important;
  margin: 0 0 14px !important;
}

#itemDetail-wrap #hr-cartinfo #item_info a {
  padding: 4px 2px !important;
  border-radius: 8px;
  box-shadow:
    inset 0 0 0 3px var(--hr-ii-c, #c97782),
    inset 0 0 0 4px rgba(255, 255, 255, 0.9);
  font-size: 12px;
  letter-spacing: 0;
  line-height: 1.35 !important;
}

#itemDetail-wrap #hr-cartinfo #item_info a::before {
  display: none;                /* 英字のラベルは小さすぎて読めないので隠す */
}

#itemDetail-wrap #hr-cartinfo .shiharai-img {
  margin: 0;
  text-align: left;
}

#itemDetail-wrap #hr-cartinfo .shiharai-img img {
  display: block;
  width: auto !important;
  max-width: 100%;
  height: auto !important;
}


/* --- 14-2. お支払い方法の画像と注意書き --- */
#itemDetail-wrap #iteminfomain .shiharai-img {
  margin: 0 0 8px;
  text-align: left;
}

#itemDetail-wrap #iteminfomain .shiharai-img img {
  max-width: 100%;
  height: auto;
}

#itemDetail-wrap #iteminfomain .iteminfo_right > p.style2 {
  margin: 0 0 40px;
  color: var(--hr-ii-sub);
  font-size: 13px;
  line-height: 1.8;
}


/* --- 14-3. 商品説明の表（スマホは項目名と中身を縦に重ねる） --- */
#itemDetail-wrap #iteminfomain table.item_spec {
  width: 100% !important;
  margin: 0;
  border: 0 !important;
  border-collapse: collapse;
  border-spacing: 0;        /* cellspacing="2" のすき間をなくす */
  background: none !important;
}

/* Eストアのテーマが付けている行・セルの背景色を消す */
#itemDetail-wrap #iteminfomain table.item_spec tr,
#itemDetail-wrap #iteminfomain table.item_spec tbody {
  background: none !important;
}

#itemDetail-wrap #iteminfomain table.item_spec th,
#itemDetail-wrap #iteminfomain table.item_spec td {
  display: block;
  box-sizing: border-box;
  width: auto !important;
  padding: 12px 16px;
  border: 0 !important;
  background: none !important;
  color: var(--hr-ii-text) !important;
  font-size: 14px;
  line-height: 1.8 !important;
  text-align: left;
  vertical-align: top;
}

#itemDetail-wrap #iteminfomain table.item_spec tr {
  border-bottom: 1px solid var(--hr-ii-line);
}

/* 項目名（背景色なし・小さめのグレー文字） */
#itemDetail-wrap #iteminfomain table.item_spec th {
  padding-bottom: 0;
  color: var(--hr-ii-sub) !important;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

/* 1行目の「商品説明」は表の見出しにする（英字ラベル付き・中央・下線なし） */
#itemDetail-wrap #iteminfomain table.item_spec tr:first-child {
  border-bottom: 0;
}

#itemDetail-wrap #iteminfomain table.item_spec th[colspan] {
  padding: 0 0 20px;
  background: none !important;
  color: var(--hr-ii-text) !important;
  font-size: clamp(19px, 2.4vw, 22px) !important;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: center;
  white-space: normal;
}

#itemDetail-wrap #iteminfomain table.item_spec th[colspan]::before {
  content: "DETAILS";
  display: block;
  margin: 0 0 4px;
  color: var(--hr-ii-accent);
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.25em;
}

#itemDetail-wrap #iteminfomain table.item_spec th[colspan] strong {
  font-size: inherit !important;
  font-weight: inherit;
}

/* 表の上の線は見出しの下から始める */
#itemDetail-wrap #iteminfomain table.item_spec tr:nth-child(2) {
  border-top: 1px solid var(--hr-ii-line);
}

/* 備考の箇条書き（小さな点＋点線の区切り） */
#itemDetail-wrap #iteminfomain #spec_list {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}

#itemDetail-wrap #iteminfomain #spec_list li {
  position: relative;
  margin: 0 !important;
  padding: 6px 0 6px 16px !important;
  border: 0 !important;
  border-bottom: 1px dashed var(--hr-ii-line) !important;
  background: none !important;  /* テーマの点（背景画像）を消す */
  list-style: none !important;  /* テーマの点（行頭記号）を消す */
  font-size: 14px !important;
  line-height: 1.8 !important;
}

#itemDetail-wrap #iteminfomain #spec_list li:last-child {
  border-bottom: 0 !important;
}

#itemDetail-wrap #iteminfomain #spec_list li::before {
  content: "" !important;
  position: absolute;
  top: calc(6px + 0.9em - 2px);  /* 1行目の文字の真ん中に合わせる */
  left: 2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--hr-ii-accent);
}

#itemDetail-wrap #iteminfomain #spec_list .style2 {
  padding: 0 !important;
  background: none !important;
  color: inherit !important;
  font-size: inherit !important;
}

#itemDetail-wrap #iteminfomain #spec_list li::after,
#itemDetail-wrap #iteminfomain #spec_list .style2::before {
  content: none !important;     /* テーマの飾りの点を消す */
}

@media (min-width: 640px) {
  #itemDetail-wrap :is(#iteminfomain, #hr-cartinfo) #item_info {
    gap: 14px;
  }

  /* PCは項目名を左、中身を右に並べる */
  #itemDetail-wrap #iteminfomain table.item_spec th,
  #itemDetail-wrap #iteminfomain table.item_spec td {
    display: table-cell;
    padding: 16px 20px;
  }

  #itemDetail-wrap #iteminfomain table.item_spec th {
    width: 9em !important;
  }

  #itemDetail-wrap #iteminfomain table.item_spec th[colspan] {
    width: auto !important;
    padding: 0 0 24px;
  }
}


/* =============================================================
   15. 商品ページ：商品説明欄の幅（#itemDetail-wrap .description）（2026-10-12）
   目的：枠の内側の余白と「中身の最大幅640px」をなくし、説明欄いっぱいに表示する
   ・灰色の枠線（10px）はEストアに外してもらう依頼済み。それまでの間もここで消している
   ・Eストアの default.css より後に読み込まれる位置（CSS欄の最後）に貼る
   ・旧商品の360度回転の見出し画像（.round-title・.round-arrow）は別のCSSで幅が決まっている。
     旧デザインの部品のため、商品説明を作り直すときに一緒に見直す
   ============================================================= */

/* --- 15-1. 説明欄の枠 --- */
#itemDetail-wrap .description {
  padding: 0 !important;        /* default.css の padding（!important 付き）を打ち消すため */
  border: none !important;      /* 灰色の枠線10px（Eストアが外すまでの間） */
}

/* --- 15-2. 中身の幅（default.css の「max-width: 640px !important」を打ち消す） --- */
#itemDetail-wrap .description > * {
  max-width: 100% !important;
}

/* 説明欄は Eストアの書式で縦並びの flex になっていて、左右 auto の余白が付いた枠（.s_l675 など）が中身の幅（640px）に縮んでいた。
   画像以外の部品は説明欄の幅いっぱいに広げる（10/20 v2.14） */
#itemDetail-wrap .description > *:not(img) {
  box-sizing: border-box;
  width: 100%;
}

/* --- 15-3. 画像
   ・説明欄より小さい画像：元の大きさのまま中央に表示（引き伸ばすとぼやけるため）
   ・説明欄より大きい画像：説明欄の幅まで縮める（スマホでもはみ出さない） --- */
#itemDetail-wrap .description img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  margin-right: auto;
  margin-left: auto;
}


/* =============================================================
   16. PC・スマホで出し分け（2026-10-14）
   ・リニューアル後はスマホ専用の欄（スマフォ用サブ紹介文など）が使われなくなるため、
     PC用の欄に両方を書き、画面幅で片方だけを表示する（Eストア確認済み 10/14）
   ・境目は 11. と同じ 640px（639px以下＝スマホ）
   ・.hr-pc-only / .hr-sp-only は .hr-page の外（商品ページの紹介文の欄など）でも効く
   ・img に loading="lazy" を付けておくと、隠れている方の画像は読み込まれない
   ============================================================= */

/* --- 16-1. 出し分け --- */
@media (max-width: 639px) {
  .hr-pc-only { display: none !important; }
}
@media (min-width: 640px) {
  .hr-sp-only { display: none !important; }
}

/* --- 16-2. 分割した縦長画像を、すき間なくつなげて欄の幅いっぱいに表示する
   使用例：サービス案内（service-inf-pc-2000-01〜09 ／ service-inf-smp-2000-01〜10） --- */
.hr-img-stack {
  max-width: 100%;
  margin: 0 auto;
  line-height: 0;               /* 画像の下にできる文字1行分のすき間をなくす */
}
/* 旧デザインの枠（.s_l675）に入れたとき、枠の幅が固定でもスマホで横にはみ出さないようにする */
.s_l675:has(.hr-img-stack) {
  box-sizing: border-box;
  width: 100% !important;       /* 10/26 v2.30：auto だと中身の幅に縮み、左に寄っていた */
  max-width: 100% !important;
}
.hr-img-stack img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0 !important;         /* 10/21 v2.21：サイト側の画像の余白（下のすき間）を打ち消す */
  padding: 0 !important;
  border: 0 !important;
}
.hr-img-stack br { display: none; }


/* =============================================================
   17. 商品ページ：銀行振込の注意書き・8つの特典・お客様から頂戴したハガキ（2026-10-19）
   ・銀行振込の注意書きは、共通ヘッダー v1.7 の「5.」でカートの近く（#hr-cartinfo）に入れる
   ・「8つの特典」（.toku-banner）と「ハガキ」（.hagaki）は今のデザイン（tokuten-style.css・
     hagaki-style.css）をそのまま使い、ここで上書きして整える（高見さん：基本そのままで）
   ・サイドバーや≡メニューの「8つの特典」は変えないよう、商品ページの中（#itemDetail-wrap）だけに効かせる
   ============================================================= */

/* --- 17-1. 銀行振込の注意書き（支払い方法の画像の下・赤系） --- */
#itemDetail-wrap #hr-cartinfo .hr-bank-note {
  margin: 8px 0 0;
  padding: 0;
  color: #c12748;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.02em;
}


/* --- 17-2. 8つの特典
   ・枠（灰色の太い線）・見出し・小見出し・黒い丸の番号・「詳細はコチラ」は今のまま
   ・特典の並びは左右の余白が大きかったので、PCは2列にして欄の幅いっぱいに使う（スマホは1列）
   ・番号と文字を大きくし、各特典の下に説明文（.toku-desc）を入れる
     （説明文のない古いHTMLのままでも崩れない） --- */
#itemDetail-wrap .toku-banner {
  box-sizing: border-box;
  width: 100%;
  max-width: 880px;
  margin: 40px auto 24px;
  padding: 32px 24px 24px;
}

#itemDetail-wrap .toku-banner-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 28px;
  width: 100%;
  margin: 24px 0 16px;
  padding: 0;
  text-align: left;
}

#itemDetail-wrap .toku-banner-list1 {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  column-gap: 14px;
  align-items: start;
  align-content: start;         /* 10/22 隣の特典が長いとき、見出しと説明文の間が空かないように */
  float: none;
  width: auto;
  margin: 0;
  padding: 16px 0;
  border: 0;
  border-bottom: 1px dashed #e2e2e2;
  color: #333;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
}

/* 黒い丸の番号（今の色のまま大きく） */
#itemDetail-wrap .toku-banner-list .number {
  display: flex;
  grid-row: 1 / span 2;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  background-color: #282828;
  color: #fff;
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
}

#itemDetail-wrap .toku-banner-list1 .toku-name {
  display: block;
  font-weight: 700;
}

#itemDetail-wrap .toku-banner-list1 .toku-desc {
  display: block;
  margin-top: 4px;
  color: #777;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.7;
}

#itemDetail-wrap .toku-banner-btn {
  width: min(360px, 100%);
}

@media (max-width: 639px) {
  #itemDetail-wrap .toku-banner {
    margin: 32px auto 20px;
    padding: 24px 14px 14px;
  }

  #itemDetail-wrap .toku-banner-list {
    grid-template-columns: 1fr;
    margin: 16px 0 12px;
  }

  #itemDetail-wrap .toku-banner-list1 {
    grid-template-columns: 34px minmax(0, 1fr);
    column-gap: 12px;
    padding: 12px 0;
    font-size: 15px;
  }

  #itemDetail-wrap .toku-banner-list .number {
    width: 34px;
    height: 34px;
    font-size: 14px;
  }

  #itemDetail-wrap .toku-banner-list1 .toku-desc {
    font-size: 14px;
  }

  #itemDetail-wrap .toku-banner-btn {
    width: 100%;
  }
}


/* --- 17-3. お客様から頂戴したハガキ
   ・背景の写真と文字の重ね方は今のまま。明朝体だった見出し・本文・ボタンの文字を新デザインの書体に
   ・ボタンは灰色のグラデーション＋赤い三角をやめ、新デザインのボタン（白地にくすみローズの線、
     マウスを乗せると左から色が付く）に合わせる --- */
#itemDetail-wrap .hagaki_banner {
  max-width: 880px;             /* 今は640px。8つの特典と同じ幅にして、説明文を広く見せる（高見さん 10/19） */
  margin-right: auto;
  margin-left: auto;
}

/* 背景の写真も枠の幅いっぱいに（10/26 v2.30：写真だけ800pxで、文字・ボタンとずれていた） */
#itemDetail-wrap .hagaki_banner > img {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
}

#itemDetail-wrap .hagaki_banner .hagaki_title,
#itemDetail-wrap .hagaki_banner .hagaki_txt,
#itemDetail-wrap .hagaki_btnb {
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "游ゴシック体",
    "Noto Sans JP", Meiryo, sans-serif;
}

#itemDetail-wrap .hagaki_banner .hagaki_title {
  color: #2b2b2b;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

#itemDetail-wrap .hagaki_banner .hagaki_txt {
  width: 90%;
  color: #2b2b2b;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.8;
}

#itemDetail-wrap .hagaki_button {
  z-index: 1;                   /* ::after の色を、ボタンの後ろ・背景より前に置くため */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  box-sizing: border-box;
  height: auto;
  padding: 16px 20px;
  overflow: hidden;
  border: 1.5px solid #c97782;
  border-radius: 4px;
  background: #fff;
  background-image: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  color: #c97782;
  line-height: 1.4;
  transition: color 0.35s ease, box-shadow 0.35s ease;
}

#itemDetail-wrap .hagaki_button::before {
  content: none;                /* 右下の赤い三角はやめる */
}

#itemDetail-wrap .hagaki_button::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  width: auto;
  height: auto;
  background: #c97782;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s ease;
}

#itemDetail-wrap .hagaki:hover .hagaki_button {
  border-color: #c97782;
  background-image: none;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
  color: #fff;
}

#itemDetail-wrap .hagaki:hover .hagaki_button::after {
  transform: scaleX(1);
  transform-origin: left;
}

#itemDetail-wrap .hagaki_btnb,
#itemDetail-wrap .hagaki_btn1,
#itemDetail-wrap .hagaki_style {
  color: inherit;
}

#itemDetail-wrap .hagaki_btnb {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

#itemDetail-wrap .hagaki_style {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

/* PCでも欄が狭いとき（タブレットの横向きなど）は、文字がボタンに重ならないよう少し小さく */
@media (min-width: 769px) and (max-width: 1100px) {
  #itemDetail-wrap .hagaki_banner .hagaki_title {
    font-size: 24px;
  }

  #itemDetail-wrap .hagaki_banner .hagaki_txt {
    font-size: 14px;
  }
}

@media (max-width: 768px) {
  #itemDetail-wrap .hagaki_banner .hagaki_title {
    font-size: 20px;
  }

  #itemDetail-wrap .hagaki_banner .hagaki_txt {
    font-size: 13px;
    line-height: 1.7;
  }

  #itemDetail-wrap .hagaki_button {
    padding: 10px 12px;
  }

  #itemDetail-wrap .hagaki_btnb {
    font-size: 15px;
  }

  #itemDetail-wrap .hagaki_style {
    font-size: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #itemDetail-wrap .hagaki_button,
  #itemDetail-wrap .hagaki_button::after {
    transition: none;
  }
}


/* --- 17-4. 商品説明の文章・即日発送バナー（高見さん 10/19）
   ・大きな写真に挟まれて文章の文字が小さく見えづらかったので、文字を大きく・行間を広く
   ・上下の写真との間にも余白をとる
   ・即日発送バナー（sokuhai-banner）と下の写真がくっついていたので、間に余白 --- */
#itemDetail-wrap .description .item_main_info {
  box-sizing: border-box;
  max-width: 760px;
  margin: 36px auto 40px;
  padding: 0 8px;
  color: #333;
  font-size: 14px;
  line-height: 2;
  letter-spacing: 0.03em;
}

#itemDetail-wrap .description img[src*="sokuhai-banner"] {
  margin-bottom: 28px;
}

@media (max-width: 639px) {
  #itemDetail-wrap .description .item_main_info {
    margin: 24px auto 28px;
    padding: 0 4px;
    font-size: 14px;
    line-height: 1.95;
  }

  #itemDetail-wrap .description img[src*="sokuhai-banner"] {
    margin-bottom: 18px;
  }
}


/* --- 17-6. 360°写真（.round-title・.round360・.round-arrow・.round-inf）（高見さん 10/19、10/20 v2.12 で作り直し）
   ・4つの部品（見出し画像・360°写真・矢印・説明文）を上から順につなげて、1枚のカード（説明欄の幅いっぱい。v2.13までは最大640px）に見せる
   ・Eストアの書式（360°写真だけ最大480px、部品の間に20pxのすき間）が勝っていたので、.description まで付けて上書き
   ・360°写真の中身は464px固定＋まわりに8pxの白い余白の作り（計480px）。iframe は480pxのまま、共通ヘッダー「6.」が入れる倍率 --hr-360-s で
     枠いっぱいに拡大縮小する（倍率が入らないときは等倍）
   ・下の「←360°→」の画像（白い背景つき）は隠して、元の画像から白い背景を抜いた絵（色はカードの枠に合わせたグレージュ）をCSSに埋め込んで出す
   （HTMLは今のまま。360round.html も触らない） --- */
#itemDetail-wrap .description .round-title,
#itemDetail-wrap .description .round360,
#itemDetail-wrap .description .round-arrow,
#itemDetail-wrap .description .round-inf {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;   /* 説明欄の幅いっぱい（10/20 v2.14 640px→なし。PCで800pxにそろえる案は 17-5.） */
  margin: 0 auto !important;
  padding: 0 20px;
  border-right: 1px solid #ecdcd9;
  border-left: 1px solid #ecdcd9;
  background: #fbf7f5;
}

#itemDetail-wrap .description .round-title {
  margin-top: 48px !important;
  padding-top: 24px;
  padding-bottom: 16px;
  border-top: 1px solid #ecdcd9;
  border-radius: 14px 14px 0 0;
}

#itemDetail-wrap .description .round-title img {
  display: block;
  width: 300px !important;
  max-width: 100% !important;
  height: auto;
  margin: 0 auto;
}

#itemDetail-wrap .description .round360 {
  position: relative !important;
  height: calc(480px * var(--hr-360-s, 1)) !important;
  padding-bottom: 0 !important;
  overflow: hidden !important;
}

#itemDetail-wrap .description .round360 iframe {
  position: absolute !important;
  top: 0 !important;
  left: 50% !important;
  display: block;
  width: 480px !important;
  height: 480px !important;
  border: 0;
  border-radius: 8px;
  background: #fff;
  transform: translateX(-50%) scale(var(--hr-360-s, 1));
  transform-origin: top center;
}

#itemDetail-wrap .description .round-arrow {
  padding-top: 14px;
  padding-bottom: 2px;
}

#itemDetail-wrap .description .round-arrow img {
  display: none !important;
}

#itemDetail-wrap .description .round-arrow::before {
  content: "";
  display: block;
  width: 340px;
  max-width: 100%;
  aspect-ratio: 640 / 100;
  margin: 0 auto;
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAoAAAABkBAMAAADkqZytAAAAMFBMVEXPwb7Pwb7Pwb7Pwb7Pwb7Pwb7Pwb7Pwb4AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADY6yg3AAAAEHRSTlMAzCaNs0xt7gAAAAAAAAAABI++ewAAC1hJREFUeNrtXe9vE+cd/zzPE7t2Ic4djGrTWmLsJNUaIMam69ryU5uqqS+ABtDUvWlKGdO0/4hpNNJeN0JrpUrbwphgmtTU4UrLipo6GAIkgsU+BCqJE9/txfnH2X7O99z57uxIfiRs89z3zt/7PN/fz9cXNjaooj9cj7PsRzvCfQRdj7EBVth8Tesj6HKcXlihydLNp+f6ULgZ9PxISWdPfp8N3d4b6guhc/V95dU/4zwJ/3EaQObJ43wfEidjNLYIAISEtxkT6cTsYh8WUeUdiQ0qMAAMba/OssTErNaXQ5sRzycODt7NVv97gEBugDYOpNWYgqErfawaRngfkCA5QM6aZ38ygJRimtAWgUUA4aE+ZI1DryDTOEopCr7/jfUhaxwbY9xpleFojjNfVvqQNevwGhdAii9487/rA9Y8lqY4kyxPMDDI0/gtE1gTCcVAvqgerpid7iqFzkE2HN9C+DXGEf4ZwRQPQFDQ6db50pYRQKn24n8EyPMVoFxatlXiaQK9WAQJ5LuucuZSoChzRPPDrSOAKqAGI4L3OHMFUHCqgeE/bZ34tvIviASYq9YUaJXA0rEto8GN7/56EY4RVED5ut0jQ7bVTbX20o3B8hgAWOuBH3olQhETLRYIP8k8z4BQ4E4r7dzUVpA+UzARhAmMcc0i5RvHT7seScsAoBfRM2OSE9ptAJS/fgOJXsCvaG/cAgukw7P8hI0CGkfaSjdOdRu/lID46U3vPo7xKX5ywgCcvMUrPjzvpv+IACsivjVK1gASwZrfHI0sKxzbq6pgAAq8r9ffutNV/ytWY1mPRNYg+x/HhLh+ij00PMgS95wb3fPEkrBW6iCyHIAGpy1zEwKgurPZfHi15wXQGW0HCsyHghQMEDf5Z2k7uiiAwrmwGgB+YQtR2l+RQi1lwVwQSkxkWZbllgRXF6MF9KLv+NFxiwPxaolhzIJg5yn/4TPEzQyLZJXeVmmlgDXiZN7iwNVqGlmwiAJuLe3y17+ROhbRGg9RAJy4hMgA0wGARNeCxC/5hmKRgofVir5w95UAIDzub4OCDBSrMFb3sYgE7qaWkZtYHvbPAG6zjG0eVVWYWpGUbqR8z9eqcJD2LqSCn0FMgtNiSwNYcb4UADatYbo/6aMCN2Zkki2tXnshgeH3Qd5SNHfXAGzT41v+V2B1GQMUwio+RJZlmfI8ixpU/QAAJi9bHirF69rbRlEH/Cuu1ispqokBY5OLyAAwJDULK6wmfHIgs9bHmIKqF8Yz68pBWdv30Cfuoqj6W6ICQGQNgIwVAGsV80jW6tUF6Gtt3bQfDqRdqZYs1yWwbd3gUDr4ZERu+iB1lK64LiEcb2seW14txvSdVPAIFqsJhoSuDbr3i3aHx03QbbSH6L4/OV2qXZWlIRkhbVx4NxxwLZGryV57V1v+zJec7ionZ6vgotaCGxNQatO7z/iduyzAfhXAa+1py9f8CGbqBYOk5ZHujclPbADOmwG0qz5rT/1AUK2WonJcyVJrRlBC6+avz8bxzKzY8lPBJfcFQUelqHKg8nf6ml2Es78BQM3W0Q74IoNmadL5a0y6ob+nr5dsKEpSA4D2ClHS/EQwON8ght+Vki3N5UYAv7a/qpb0C0HSK46jhp+Ak256vydw3Xm/ZFBCqpcE8IxIEVRvAnBT5Mo+abEMKOiZLhj60awI2e4mALWxLiFY2SXqHfzOzQglUGoTgHgEANSufDrgz6/be6cLi04M2lHsBExt+DUA7wGA/rGNhJUGdvhRmyG1XTld2EH7YjNDE8em21Owk39twI02GMXd2jO7aOYvR/2pbgW+WcmNjvfmp+1s36VNAHitBUAtBSCOnF07Qmn6zjteGsJitXBl3igi3LxY8juJS76dtxXReaMdMN4CICSAKdByv7T9nrkfPHYlRRNqavuyg5/1htMFxU5CQy8aLLKrrQB+WikwzNgjuPH0lPdJCGuRrGCTOHrePvzbfCsPYKlWimkAkFaCQW3GXr606946Yx1A2SIhUXlyyTz3IaGJT2xp2MnLlYXdi1YAS3GcMND5Kj5lWxoZ+rnnESFrri40q2pFIknKh9LM2KFjAsHzJePm62F0A9dv5itdtfrgQ9v1VQrjE7e94389AujGTtv6L1aY8dEIbYztN9NOHFHBdN3TXTn60c0Hii3VnvnKmn5wuw6QCcDN9z+vfCpse3XF9nKr+Z8texcIRoDKviaeQDe2M6Mm5V2P1I7LgO6tBocOzNlXXzBSe1zH/B8+56gw7ta1JffA/nol7d47nqtxDTKpqUZTb+jwvnSTPJQTwO/gXB20j8EDsGzyQt/tStlfsjz3rKPOGSLLljELqXRKqw2hjgzvu7Po+YK99mLq9QUThye4lluPmNhaZQJaDD2/r4OnD8r1rkBDhStGbi0KIBpt8r7rEQDRaMTbNI6O7vunANnUNwumGFtXVa7ra2CrKIQgChvv3+jE7vEANBBsqdH8eL3Gv4e1ly9F7hKhhbxFHt4mWE3G8kJMjD7KuxXAGhiNPZZWimpQeVe5oWceKyJ0U9fnrMWgXWC2XwwZevKSNwAGXNQKTeTECEfmxKLXFgsXe0lIWUK33najVdv1utaaQ76gxuldbygd42eTb45tE9ROtsf5AxzNEigjaAkciwmKX3v82vdl4btvBCO98vcdlaqJXwUWS7t98LEgfuzMnADrbQCeXFUEmUoPzThDTapXsoI1gYnjwpxmYjPiGTzXDt5OD/1aDMLl/JGyE1NoCmNkAKnlgEwgnfz2W1HadO4/QsrT9vv2yIenRQsqif85eBCrbEowAhNA0dAFAFj6b45qSBYy+OTRuui96YWNvS8IA7EWhanqEgh+9GxofkWQNqwP31c9ABC6tvJbYZnXT8yJP5R6PYJo1MjZoK8Fobwv3hT/DW967IrAjRBBuV9wEKWIK3J9IykA+aPvPck6IB8RC8xE9x1Gj152UgUW9siB+V/64aLihPyo6A2IR567nawf0sNXe+jB3qNHnIVYIz+9DK8BROJoXnG05pM98mx0mhzKOaFnE8Piyb2TrUM6ElsqOeIk8fJ8vvvCd9eR6oQ3k07KS06e26Wvrvzm+SkHUqg/O7yx64VuNg7Rs5EHhz9zcsZUceJ7J4tOHK+nI1sMgE0k/t4lMRyNEWcqA7z+8hVnzBK/DQoAsOF08BiOHrlb/q9D+OikYz5dtE/Q5FAu7JAzZIrDAZpDmnRo+Axr9p6LZSbu+NsuKc5PS6QDccs06djMAEBmjystIW6ZHJK+Ljk/L53w90+W0PjBXMwFemzi6Zeaq28k7tc5RnJuTvTv774k2JGvlkpuWOrARrt+/KheWI68Wyq6OfHQv8d3vRt/rnopeXt+9SZ7afHwP5x3HU3R6MSVedfMdNaDR0cOuzE3wIWLyBTZcNYLUaTJ41kyqLg8O51Ynenk20nnRmcx5+7UcAksVcwUO0AxwQzsLlx0id7TjlMlL7pARw+4xdCwIilddQZjPI8EO15W5GwnbLNEcaNzBfCmjZbGDy5KSoddj2wYGV0tz1MDyni+CTMACSBDpCw6Qw4Ag1dpund9yAl25C6Q9eBKaRAUoc+bpkL7QSRvrs4wjMwjxas4YMAzABexgNEDSV1G1q1JqoxvSiwFqcnByygrFzoGMKOr9BVlMevZXXvfCU/jmRgUksPUtEuLWGQYzmrIt0j4gRyIlA27ifRw4WJGV1N0Fl7nQv78lCCBjKQpRHK00mxCRUZfVdrcI40jI5cVgpzTNUkVs/AlfPfxtxgJwLjdIU1pHwQPqSylz2pU9BYTQGqnpkBubxRZXCoiIc0C8C8HD+DHLDQOgKWAhiSVlVNUBbKARt2KBt1NAZZCc05ZvbKfwFXH/wGZg3W1dckYXgAAAABJRU5ErkJggg==") center / contain no-repeat;
}

#itemDetail-wrap .description .round-inf {
  margin-bottom: 48px !important;
  padding-top: 8px;
  padding-bottom: 20px;
  border-bottom: 1px solid #ecdcd9;
  border-radius: 0 0 14px 14px;
  color: #777;
  font-size: 13px;
  line-height: 1.7;
  text-align: center;
}

#itemDetail-wrap .description .round-inf p {
  margin: 4px 0 !important;
}

@media (max-width: 639px) {
  #itemDetail-wrap .description .round-title,
  #itemDetail-wrap .description .round360,
  #itemDetail-wrap .description .round-arrow,
  #itemDetail-wrap .description .round-inf {
    padding-right: 12px;
    padding-left: 12px;
  }

  #itemDetail-wrap .description .round-title {
    margin-top: 32px !important;
    padding-top: 16px;
    padding-bottom: 12px;
  }

  #itemDetail-wrap .description .round-title img {
    width: 220px !important;
  }

  #itemDetail-wrap .description .round-arrow::before {
    width: 240px;
  }

  #itemDetail-wrap .description .round-inf {
    margin-bottom: 32px !important;
  }
}


/* --- 17-7. 商品説明の写真は最大800px、それ以外（情報画像・A＋）は説明欄の幅いっぱい（10/20 高見さん）
   ・正方形の商品写真は説明欄いっぱい（PCで880px）だと大きすぎるので、PC（900px以上）では最大800pxで中央に
     ＝ 写真ギャラリー（.hr-gallery。--hr-gallery-max の800pxのまま）、今の商品の説明画像、360°写真のカード
   ・どの商品でも同じ大きさで出したい情報画像は幅いっぱい
     ＝ 12時までのバナー（sokuhai/yokuyoku/3kago-banner2・3）、プリザーブドフラワーについて（preserved-inf）、
       クリアケースの案内（clear-case-info）、サービス案内（service-inf）、ハガキの背景写真（hagaki_background）（10/26 v2.30 で追加）
   ・A＋（.hr-aplus。横長の作り）も幅いっぱい
   ・情報画像を増やしたら、下の :not(…) に画像の名前を足す --- */
@media (min-width: 900px) {
  #itemDetail-wrap .description img:not([src*="-banner2."]):not([src*="-banner3."]):not([src*="preserved-inf"]):not([src*="clear-case-info"]):not([src*="service-inf"]):not([src*="hagaki_background"]):not(.hr-aplus img):not(.round-title img) {
    max-width: min(800px, 100%) !important;
  }

  #itemDetail-wrap .description .round-title,
  #itemDetail-wrap .description .round360,
  #itemDetail-wrap .description .round-arrow,
  #itemDetail-wrap .description .round-inf {
    max-width: 800px !important;
  }
}

/* 情報画像は、width の指定が無い・小さい元画像でも説明欄の幅にそろえる */
#itemDetail-wrap .description img[src*="-banner2."],
#itemDetail-wrap .description img[src*="-banner3."],
#itemDetail-wrap .description img[src*="preserved-inf"],
#itemDetail-wrap .description img[src*="clear-case-info"] {
  width: 100% !important;
  max-width: 100% !important;
}


/* --- 17-8. 商品説明まわりの余白を詰める（10/20 高見さん：プリザーブドフラワーの案内と「商品説明」の表の間が空きすぎ）
   ・「プリザーブドフラワーについて」の画像とボタンの間の <br><br>（全商品同じ書き方）を消して、決まった余白に
   ・サブ紹介文の欄の上の余白（Eストアの40px）をなくし、表の上は 14. の48pxだけにする --- */
#itemDetail-wrap .description img[src*="preserved-inf2-1"] ~ br {
  display: none;
}

#itemDetail-wrap .description img[src*="preserved-inf2-2"] {
  margin-top: 16px !important;
}

#itemDetail-wrap ~ #itemDetail-wrap .description {
  margin-top: 0 !important;
}

/* サブ紹介文の欄のすぐ下に並んだ <br>（説明欄が縦並びの flex のため1つずつ20pxの空きになる）は出さない */
#itemDetail-wrap ~ #itemDetail-wrap .description > br {
  display: none;
}


/* --- 17-9. スマホでは「プリザーブドフラワーについて」をスマホ用の文字の大きい画像に差し替える（10/20 高見さん）
   ・PC用（横2000px）をスマホ幅に縮めると文字が7px程度になるため。スマホ用は横1000px・文字は表示で約14px
   ・HTMLは全商品そのまま（img の src は PC用のまま）。CSSの content で表示する画像だけを替える
   ・content が効かない古いブラウザでは PC用がそのまま出る
   ・画像：pic-labo の preserved-inf2-1-sp.jpg・preserved-inf2-2_off-sp.jpg・preserved-inf2-2_on-sp.jpg --- */
@media (max-width: 639px) {
  #itemDetail-wrap .description img[src*="preserved-inf2-1.jpg"] {
    content: url("https://www.hanariro.com/pic-labo/preserved-inf2-1-sp.jpg");
  }

  #itemDetail-wrap .description img[src*="preserved-inf2-2_off.jpg"] {
    content: url("https://www.hanariro.com/pic-labo/preserved-inf2-2_off-sp.jpg");
  }

  #itemDetail-wrap .description img[src*="preserved-inf2-2_on.jpg"] {
    content: url("https://www.hanariro.com/pic-labo/preserved-inf2-2_on-sp.jpg");
  }
}

/* --- 17-10. スマホでは「12時までのご注文」バナー・クリアケースの案内も文字の大きいスマホ用画像に差し替える（10/22 高見さん）
   ・17-9. と同じ仕組み。HTMLはそのまま、CSSの content で表示する画像だけを替える
   ・画像：pic-labo の ○○-banner2-sp.gif・○○-banner3-sp.gif（即日・翌々日・3日後）、clear-case-info-sp.jpg・clear-case-info2〜5-sp.jpg --- */
@media (max-width: 639px) {
  /* 12時バナー（上）の下に余白。すぐ下の商品画像とくっつかないように（10/22 高見さん） */
  img[src*="/pic-labo/sokuhai-banner2.gif"],
  img[src*="/pic-labo/yokuyoku-banner2.gif"],
  img[src*="/pic-labo/3kago-banner2.gif"] {
    margin-bottom: 24px !important;
  }
  img[src*="/pic-labo/sokuhai-banner2.gif"] {
    content: url("https://www.hanariro.com/pic-labo/sokuhai-banner2-sp.gif");
  }
  img[src*="/pic-labo/sokuhai-banner3.gif"] {
    content: url("https://www.hanariro.com/pic-labo/sokuhai-banner3-sp.gif");
  }
  img[src*="/pic-labo/yokuyoku-banner2.gif"] {
    content: url("https://www.hanariro.com/pic-labo/yokuyoku-banner2-sp.gif");
  }
  img[src*="/pic-labo/yokuyoku-banner3.gif"] {
    content: url("https://www.hanariro.com/pic-labo/yokuyoku-banner3-sp.gif");
  }
  img[src*="/pic-labo/3kago-banner2.gif"] {
    content: url("https://www.hanariro.com/pic-labo/3kago-banner2-sp.gif");
  }
  img[src*="/pic-labo/3kago-banner3.gif"] {
    content: url("https://www.hanariro.com/pic-labo/3kago-banner3-sp.gif");
  }
  img[src*="/pic-labo/clear-case-info.jpg"] {
    content: url("https://www.hanariro.com/pic-labo/clear-case-info-sp.jpg");
  }
  img[src*="/pic-labo/clear-case-info2.jpg"] {
    content: url("https://www.hanariro.com/pic-labo/clear-case-info2-sp.jpg");
  }
  img[src*="/pic-labo/clear-case-info3.jpg"] {
    content: url("https://www.hanariro.com/pic-labo/clear-case-info3-sp.jpg");
  }
  img[src*="/pic-labo/clear-case-info4.jpg"] {
    content: url("https://www.hanariro.com/pic-labo/clear-case-info4-sp.jpg");
  }
  img[src*="/pic-labo/clear-case-info5.jpg"] {
    content: url("https://www.hanariro.com/pic-labo/clear-case-info5-sp.jpg");
  }
}


/* =============================================================
   18. 全体の文字サイズ（2026-10-19 v2.5：スウィートマミー基準に統一）
   -------------------------------------------------------------
   基準：本文 14px／リード文 15px／注記・パンくず 13px／一番小さい文字 12px
         ページ一番上のタイトル 56px（スマホ36px）／章の見出し 28px（スマホ24px）
   Eストアのヘッダー・サイドバー・フッター、共通ヘッダーの部品（ドロワー・
   検索メニュー・新サイドバー・フッターのカレンダー）もここでまとめて指定する。
   部品側の指定より強くするため !important を付けている。
   元に戻すとき：この 18. を丸ごと消す（＋v2.4 の値に戻すなら _old/hanariro-common-v2.4-20261019.css）。
   ============================================================= */

/* 18-1. 上の帯（平日12時まで…送料無料） */
#header-info, #header-info a, #header-info span, #header-info strong { font-size: 14px !important; }

/* 18-2. ヘッダー：≡の下の MENU、検索メニュー（虫めがね）、商品を選ぶのメガメニュー */
.hr-drawer-btn__label { font-size: 11px !important; }
.hr-smenu__ja { font-size: 15px !important; }
.hr-smenu__en { font-size: 12px !important; }
.hr-smenu__keywords a { font-size: 14px !important; }
.hr-smenu__more, .hr-smenu__more span, .hr-smenu__more i { font-size: 13px !important; }
#header-box .mega-menu nav label { font-size: 13px !important; }

/* 18-3. ドロワー（≡のメニュー） */
#hr-drawer .hr-nav__list a { font-size: 15px !important; }
#hr-drawer .hr-nav__sub a,
#hr-drawer .hr-nav__acc summary,
#hr-drawer .hr-nav__group p,
#hr-drawer .hr-nav__member a,
#hr-drawer .hr-nav__pick-txt b,
#hr-drawer .hr-nav__tel a,
#hr-drawer .hr-nav__sns a { font-size: 14px !important; }
#hr-drawer .hr-nav__member-note b,
#hr-drawer .hr-nav__tel div { font-size: 13px !important; }
#hr-drawer .hr-nav__en,
#hr-drawer p.hr-nav__member-note, #hr-drawer .hr-nav__member-note p,
#hr-drawer .hr-nav__pick-txt small,
#hr-drawer .hr-nav__btn,
#hr-drawer .hr-nav__tel small,
#hr-drawer .hr-nav__blog small,
#hr-drawer .hr-drawer__title span { font-size: 12px !important; }

/* 18-4. サイドバー（カテゴリ・商品ページの左側） */
.hr-side .hr-side__ja { font-size: 16px !important; }
.hr-side .hr-side__list a,
.hr-side .hr-side__list summary,
.hr-side a.hr-side__member { font-size: 14px !important; }
.hr-side .hr-side__sub a,
.hr-side .hr-side__group p, .hr-side .hr-side__group > p { font-size: 13px !important; }
.hr-side .hr-side__en,
.hr-side a.hr-side__member small { font-size: 12px !important; }

/* 18-5. パンくず */
#bread-crumb li, #bread-crumb a { font-size: 13px !important; }

/* 18-6. フッター（カレンダー・お届けの案内・住所・コピーライト） */
.hr-fcal .hr-fcal__ja { font-size: 15px !important; }
.hr-fcal .hr-fcal__en { font-size: 12px !important; }
.hr-fcal .hr-fcal__list b,
.hr-fcal .hr-fcal__more a,
.hr-fcal .hr-fcal__more i { font-size: 13px !important; }
.hr-fcal .hr-fcal__list small { font-size: 12px !important; }
#footer-box address p { font-size: 13px !important; }
#footer-box small { font-size: 12px !important; }

/* 18-7. スマホ下部メニューの中の小さい文字 */
.hr-tab .hr-tab__guide-lead span { font-size: 13px !important; }
.hr-tab .hr-tab__en, .hr-tab .hr-tab__guide-lead i { font-size: 12px !important; }

/* 18-7b. フッターのリンク（ご利用案内など）・商品を選ぶのメガメニュー */
#footer-box #submenu a, #submenu .list2 a, #footer-box .footer-navi a { font-size: 14px !important; }
#header-box .mega-menu .select-box-inner .title,
#header-box .mega-menu .select-box-inner li a { font-size: 13px !important; }

/* 18-8. 商品ページのカート周り */
#pi_cart table.price th, #pi_cart table.price th span,
#spsVarpriceBox table.spec th, #pi_cart table.spec th, #pi_cart table.spec td { font-size: 14px !important; }
#itemDetail-wrap #pi_cart table.price th span.selling_price_str { font-size: 14px !important; }
#pi_cart .taxin, #pi_cart .publish_point,
#itemDetail-wrap #pi_cart table.price td span.taxin,
#itemDetail-wrap #pi_cart table.price td span.publish_point { font-size: 13px !important; }

/* 18-9. 商品ページの大きな見出し（8つの特典）。章の見出し 28px／スマホ 20px にそろえる */
#itemDetail-wrap .toku-banner-title h2 { font-size: 28px !important; }
#itemDetail-wrap .toku-banner-title .sub-title,
#itemDetail-wrap .toku-banner-btn { font-size: 14px !important; }
#itemDetail-wrap .toku-banner-list1 .toku-name { font-size: 15px !important; }
#itemDetail-wrap #iteminfomain #spec_list li span,
#itemDetail-wrap .hr-check li { font-size: 14px !important; }
/* 18-10. 商品説明の中の新デザインの文章（10/19 v2.6）。Eストアの「body * { 12px }」と
   「#itemDetail-wrap .description p { 100% !important }」が重なって、説明文・リード文が12pxに戻っていたのを直す */
#itemDetail-wrap .description .hr-page p { font-size: 14px !important; }
#itemDetail-wrap .description .hr-page p.hr-lead { font-size: 15px !important; }
#itemDetail-wrap .description .hr-page p.hr-card__title { font-size: 16px !important; }
#itemDetail-wrap .description .hr-page p.hr-note,
#itemDetail-wrap .description .hr-page .hr-note p { font-size: 13px !important; }

@media (max-width: 639px) {
  #itemDetail-wrap .toku-banner-title h2 { font-size: 20px !important; }
  #header-info, #header-info a, #header-info span, #header-info strong { font-size: 13px !important; }
}

/* =============================================================
   19. 右下の浮動ボタン（カート・ページ上部へ）（10/19 v2.7）
   Eストアのテーマの #floating-menu（#to-cart・#page-top）の見た目だけを差し替える。
   デザイン：R2改-1（ピンクの細い枠の丸＋丸みのあるカート。ハートが2つ上から入り、
   入るたびにカートのアイコンだけがゼリーのようにプルルンと揺れる。周りの円は動かない）
   カートの丸は少し透かす（10/20 v2.9）。上へ戻るは半透明のグレーの丸に矢印と TOP（v2.9 P3）。
   スマホでもカートを出す（19-2.）。
   ============================================================= */
#floating-menu #to-cart,
#floating-menu #page-top {
  position: relative;
  display: block;
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
  text-indent: 0 !important;
  overflow: visible !important;
  cursor: pointer;
}
/* 中の画像・アイコン・文字は見えなくして、押せる範囲としてだけ残す */
#floating-menu #to-cart *,
#floating-menu #page-top * {
  position: absolute !important;
  top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
  width: 100% !important; height: 100% !important;
  margin: 0 !important; padding: 0 !important;
  border: 0 !important; background: none !important; box-shadow: none !important;
  opacity: 0 !important;
  z-index: 2;
}

/* カート：ピンクの細い枠の丸（円は動かない）。アイコンは背景で描いて、大きさだけ動かす */
#floating-menu #to-cart {
  width: 50px !important;
  height: 50px !important;
  border: 1px solid #c97782 !important;
  border-radius: 50% !important;
  background-color: rgba(255, 255, 255, 0.55) !important;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c97782' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 4.5h2.4l2.3 10.2h10.7l2.3-7.6H6'/%3E%3Ccircle cx='9' cy='19' r='1.3'/%3E%3Ccircle cx='16.5' cy='19' r='1.3'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: 50% 55% !important;
  background-size: 22px 22px; /* !important を付けると動きが止まるので付けない */
  animation: hr-fm-jelly 2.25s ease-in-out 1.89s infinite;
  transition: background-color 0.35s ease;
}
#floating-menu #to-cart:hover {
  background-color: #c97782 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 4.5h2.4l2.3 10.2h10.7l2.3-7.6H6'/%3E%3Ccircle cx='9' cy='19' r='1.3'/%3E%3Ccircle cx='16.5' cy='19' r='1.3'/%3E%3C/svg%3E") !important;
}
/* 上から入ってくるハート2つ（4.5秒で1つ、2.25秒ずらし） */
#floating-menu #to-cart::before,
#floating-menu #to-cart::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 6px !important;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  right: auto !important;
  bottom: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23c97782' d='M12 21s-7.5-4.6-9.6-9.2C1 8.6 3 5 6.5 5c2.2 0 3.6 1.2 5.5 3.3C13.9 6.2 15.3 5 17.5 5 21 5 23 8.6 21.6 11.8 19.5 16.4 12 21 12 21z'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  animation: hr-fm-heart 4.5s ease-in infinite reverse;
}
#floating-menu #to-cart::after {
  width: 9px;
  height: 9px;
  margin-left: 2px;
  animation-delay: 2.25s;
}
@keyframes hr-fm-heart {
  0%   { opacity: 0; transform: translateY(0) scale(0.5); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-34px) scale(1.1) rotate(-12deg); }
}
/* ハートが入った瞬間に、アイコンが膨らんでプルルンと揺れて戻る */
@keyframes hr-fm-jelly {
  0%       { background-size: 22px 22px; }
  14%      { background-size: 26.4px 26.4px; }
  24%      { background-size: 18.9px 25.5px; }
  33%      { background-size: 25.1px 19.4px; }
  42%      { background-size: 20.7px 23.5px; }
  50%      { background-size: 23.1px 21.1px; }
  58%      { background-size: 21.8px 22.4px; }
  66%, 100% { background-size: 22px 22px; }
}

/* ページ上部へ：半透明のグレーの丸に、上向きの矢印と TOP（10/20 v2.9 P3） */
#floating-menu #page-top {
  width: 42px !important;
  height: 42px !important;
  margin-top: 12px !important;
  border-radius: 50% !important;
  background: rgba(43, 43, 43, 0.45) !important;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transition: background-color 0.35s ease;
}
#floating-menu #page-top:hover { background: #c97782 !important; }
#floating-menu #page-top::before {
  content: "" !important;
  position: absolute !important;
  top: 6px !important;
  left: 50% !important;
  width: 16px !important;
  height: 16px !important;
  margin-left: -8px;
  right: auto !important;
  bottom: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 14.5 12 8.5l6 6'/%3E%3C/svg%3E") no-repeat center / contain;
  pointer-events: none;
}
#floating-menu #page-top::after {
  content: "TOP" !important;
  position: absolute !important;
  top: 23px !important;
  left: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: none !important;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 9px;
  line-height: 1;
  letter-spacing: 0.15em;
  text-indent: 0.15em;
  text-align: center;
  color: #fff;
  pointer-events: none;
}

/* 動きを減らす設定の端末では止める */
@media (prefers-reduced-motion: reduce) {
  #floating-menu #to-cart,
  #floating-menu #to-cart::before,
  #floating-menu #to-cart::after { animation: none !important; }
}

/* 19-2. スマホ（768px以下）でも右下にカートを出す（10/20 v2.8 高見さん）
   mobile-tabbar.html の「#floating-menu #to-cart { display: none !important; }」より強い指定で上書き。 */
@media (max-width: 768px) {
  html body #floating-menu #to-cart {
    display: block !important;
    width: 46px !important;
    height: 46px !important;
  }
}

/* =============================================================
   20. FBA商品だけ、サービス案内（service-inf）の一部の項目を隠す（10/20 v2.18）
   ・サービス案内は全商品共通のHTML（項目ごとに13枚、画像に class「hr-si-01」〜「hr-si-13」）
   ・FBA商品のメイン紹介文には見えない目印 <span class="hr-fba" hidden></span> が入っている
   ・目印があるページでは、下に書いた番号の画像を隠す（PC用・スマホ用どちらも）
   ・隠す番号を変えるときは、下の .hr-si-○○ を足したり消したりする
   ・:has が使えない古いブラウザ（Chrome 105・Safari 15.4・Firefox 121 より前）では全項目が出る
   番号：01 開花作業／02 専門花屋さん／03 安心システム01 手作業／04 02 出荷前チェック／
         05 03 デザイン100種類以上／06 04 梱包は専任スタッフ／07 梱包も専門店だから安心／
         08 ギフトボックスでお届け／09 手提げ袋／10 01 無料ラッピング／
         11 02 メッセージカード・03 取扱説明書・04 お届け日指定／12 05 請求書・領収書／
         13 06 金額の分かるものは同梱しない
   ============================================================= */
/* 10/20 高見さん決定：FBA商品では 01 開花作業 を隠す（増やすときは「body:has(.hr-fba) .hr-si-○○,」の行を上に足す） */
body:has(.hr-fba) .hr-si-01 {
  display: none !important;
}


/* =============================================================
   21. オリジナルオーダー商品ページ：フリーページの作品集へのボタン（10/21 v2.20）
   ・prz-original4〜9 はゴールド（hr-oo-link--gold）、prz-mem-original4〜9 はシルバー（hr-oo-link--silver）
   ・HTMLはファイルメーカーの「サブ紹介文1_フリーHTML」に直接入れる
     （notes/商品説明画像/HTML部品DB/貼り付け用_オリジナル12商品/）
   ・動き：表示されたときにふわっと出る（AOS fade-up）、ボタンに光が流れる、
     ホバーで少し浮いて矢印が右へ。動きを減らす設定の端末では光と浮き上がりを止める
   ============================================================= */
.hr-oo-link {
  --oo-c1: #8c6a2a;   /* 濃い金 */
  --oo-c2: #c9a24a;   /* 金 */
  --oo-c3: #f0dc9a;   /* 明るい金 */
  --oo-ink: #4a1219;  /* ワインレッド */
  --oo-bg: #fffdf8;
  --oo-bg2: #f7f0e1;
  --oo-shadow: rgba(60, 40, 10, .14);
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 640px;
  margin: 32px auto 36px;
  padding: 34px 24px 30px;
  text-align: center;
  text-decoration: none !important;
  color: var(--oo-ink) !important;
  font-family: "Shippori Mincho", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Noto Serif JP", "MS PMincho", serif;
  background: radial-gradient(ellipse at 50% 0%, var(--oo-bg) 0%, var(--oo-bg2) 100%);
  border: 1px solid var(--oo-c2);
  outline: 1px solid var(--oo-c2);
  outline-offset: -7px;
  box-shadow: 0 6px 18px var(--oo-shadow);
  transition: transform .35s ease, box-shadow .35s ease;
}
.hr-oo-link--silver {
  --oo-c1: #6e737a;
  --oo-c2: #a9adb3;
  --oo-c3: #eceef1;
  --oo-ink: #34383e;
  --oo-bg: #fdfdfe;
  --oo-bg2: #eff0f2;
  --oo-shadow: rgba(30, 32, 36, .12);
}
/* 四隅の飾り（L字の細い線） */
.hr-oo-link::before,
.hr-oo-link::after {
  content: "";
  position: absolute;
  width: 26px;
  height: 26px;
  border: 2px solid var(--oo-c2);
  pointer-events: none;
}
.hr-oo-link::before {
  top: 12px;
  left: 12px;
  border-right: 0;
  border-bottom: 0;
}
.hr-oo-link::after {
  right: 12px;
  bottom: 12px;
  border-left: 0;
  border-top: 0;
}
.hr-oo-link__en {
  display: block;
  font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-size: 13px;
  letter-spacing: .32em;
  color: var(--oo-c1);
}
/* 見出しの左右の線と菱形 */
.hr-oo-link__ttl {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 8px 0 10px;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: .08em;
  line-height: 1.5;
}
.hr-oo-link__ttl::before,
.hr-oo-link__ttl::after {
  content: "";
  flex: 0 0 60px;
  height: 10px;
  background: var(--oo-c2);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='10'%3E%3Cpath d='M0 5H46' stroke='%23000' stroke-width='1'/%3E%3Cpath d='M53 1L57 5L53 9L49 5Z' fill='%23000'/%3E%3C/svg%3E") right center / 60px 10px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='10'%3E%3Cpath d='M0 5H46' stroke='%23000' stroke-width='1'/%3E%3Cpath d='M53 1L57 5L53 9L49 5Z' fill='%23000'/%3E%3C/svg%3E") right center / 60px 10px no-repeat;
}
.hr-oo-link__ttl::after {
  transform: scaleX(-1);
}
.hr-oo-link__txt {
  display: block;
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 1.9;
  color: var(--oo-ink);
  opacity: .85;
}
/* ボタン（金・銀のグラデーションに光が流れる） */
.hr-oo-link__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  overflow: hidden;
  padding: 13px 40px;
  border-radius: 0;   /* 10/21 高見さん：四角に */
  outline: 1px solid var(--oo-c2);
  outline-offset: 3px;
  background: linear-gradient(135deg, var(--oo-c1) 0%, var(--oo-c2) 45%, var(--oo-c1) 100%);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .14em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
  box-shadow: 0 3px 10px var(--oo-shadow), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.hr-oo-link__btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, .55) 50%, transparent 100%);
  transform: skewX(-20deg);
  animation: hr-oo-shine 3.6s ease-in-out infinite;
}
@keyframes hr-oo-shine {
  0%, 55% { left: -60%; }
  100% { left: 130%; }
}
.hr-oo-link__arw {
  display: inline-block;
  width: 20px;
  height: 10px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='10'%3E%3Cpath d='M0 5H18M13 1L18 5L13 9' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3C/svg%3E") center / 20px 10px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='10'%3E%3Cpath d='M0 5H18M13 1L18 5L13 9' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3C/svg%3E") center / 20px 10px no-repeat;
  transition: transform .35s ease;
}
@media (hover: hover) {
  .hr-oo-link:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 26px var(--oo-shadow);
  }
  .hr-oo-link:hover .hr-oo-link__arw {
    transform: translateX(6px);
  }
}
@media (max-width: 639px) {
  .hr-oo-link {
    padding: 28px 16px 24px;
  }
  .hr-oo-link__ttl {
    font-size: 18px;
    gap: 10px;
  }
  .hr-oo-link__ttl::before,
  .hr-oo-link__ttl::after {
    flex-basis: 36px;
  }
  .hr-oo-link__txt {
    font-size: 13px;
  }
  .hr-oo-link__btn {
    padding: 12px 28px;
    font-size: 14px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hr-oo-link,
  .hr-oo-link__arw {
    transition: none;
  }
  .hr-oo-link__btn::before {
    animation: none;
    display: none;
  }
}

/* =============================================================
   22. 商品ページ：部品と部品の間隔をそろえる（10/22 高見さん）
   ・間隔は2種類だけ：部品と部品の間 --hr-gap（PC 48px／スマホ 32px）、同じ部品の中 --hr-gap-s（PC 24px／スマホ 16px）
   ・部品＝12時バナー（上）、見出し画像＋紹介文、商品写真、プリザーブドフラワーについて、360°写真、
     クリアケース、商品説明の表、8つの特典、ハガキ、サービス案内、12時バナー（下）
   ・HTML（商品DB）はそのまま。部品の間に入っている <br>・空の <p>・1pxの透明画像（spacer.gif）を消し、
     各部品の上下の余白をいったん0にしてから、決まった間隔だけを付ける
   ============================================================= */
#itemDetail-wrap .description {
  --hr-gap: 48px;
  --hr-gap-s: 24px;
}
@media (max-width: 639px) {
  #itemDetail-wrap .description {
    --hr-gap: 32px;
    --hr-gap-s: 16px;
  }
}

/* 22-1. 部品の間の改行・空の段落・透明画像は出さない */
#itemDetail-wrap .description > br,
#itemDetail-wrap .description > p:empty,
#itemDetail-wrap .description img[src*="spacer.gif"],
#itemDetail-wrap .description .item_main_photo > br,
#itemDetail-wrap .description img[src*="preserved-inf2-1"] ~ br {
  display: none !important;
}

/* 22-2. 部品の上下の余白をいったん0にして、部品と部品の間だけ --hr-gap を空ける
   （360°写真の4つ（タイトル・写真・矢印・説明）はひとつの部品なので間を空けない） */
#itemDetail-wrap .description > *:not(#hr-x),
#itemDetail-wrap .description > p > img,
#itemDetail-wrap .description .s_l675,
#itemDetail-wrap .description .item_main_photo,
#itemDetail-wrap .description .item_main_info {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
#itemDetail-wrap .description > * + *:not(.round360):not(.round-arrow):not(.round-inf):not(#hr-x) {
  margin-top: var(--hr-gap) !important;
}

/* （上の行で :not(#hr-x) を付けているのは、ほかの指定より優先させるため） */
/* 説明欄の頭に空の段落・改行があっても、最初の部品の上は空けない */
#itemDetail-wrap .description > :is(br, p:empty):first-child + *:not(#hr-x):not(#hr-y),
#itemDetail-wrap .description > :is(br, p:empty):first-child + :is(br, p:empty) + *:not(#hr-x):not(#hr-y) {
  margin-top: 0 !important;
}

/* 上のカート（商品写真・価格）と説明欄の間も同じ間隔に（10/26 v2.31：Eストアの40pxのままだった） */
#itemDetail-wrap .description {
  margin-top: var(--hr-gap) !important;
}

/* 2つ目の説明欄（クリアケースから下）と1つ目の間も同じ間隔に */
#itemDetail-wrap ~ #itemDetail-wrap .description {
  margin-top: var(--hr-gap) !important;
  padding-top: 0 !important;
  /* 10/26 v2.31：本番の外枠では、説明欄のすぐ下に2つ目のカート（商品写真・価格）が来て、間が0だった */
  margin-bottom: var(--hr-gap) !important;
  padding-bottom: 0 !important;
}

/* 22-3. 部品の中の間隔 */
/* 見出し画像 → 紹介文 */
#itemDetail-wrap .description .item_main_info {
  margin-top: var(--hr-gap-s) !important;
}
/* 商品写真 → 「プリザーブドフラワーについて」は部品の間なので --hr-gap */
#itemDetail-wrap .description .item_main_photo > a[href*="entries/29"] {
  display: block;
  margin-top: var(--hr-gap) !important;
}
/* 「プリザーブドフラワーについて」の画像 → ボタン */
#itemDetail-wrap .description img[src*="preserved-inf2-2"] {
  margin-top: 16px !important;
}

/* 22-4. 部品の中に入っている余白も0に（10/22 実物の確認で追加）
   ・ハガキ：中の .hagaki_banner に上30px・下20pxの余白があり、ハガキの上下だけ広く見えていた
   ・商品説明の表：表の上の10px */
#itemDetail-wrap .description > a.hagaki {
  display: block !important;
}
#itemDetail-wrap .description .hagaki_banner,
#itemDetail-wrap .description #iteminfomain table.item_spec,
#itemDetail-wrap .description #iteminfomain #iteminfo,
#itemDetail-wrap .description #iteminfomain .iteminfo_right {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* 22-5. 紹介文の枠（.item_main_info）や写真の枠に付いている上下の内側の余白も0に（10/22 青い鳥ミニの実物で紹介文の上下だけ広かったため。左右はそのまま） */
#itemDetail-wrap .description .s_l675,
#itemDetail-wrap .description .item_main_photo,
#itemDetail-wrap .description .item_main_info {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}


/* =============================================================
   23. ページ名の大きさをそろえる（2026-10-23 高見さん OK）
   ・10/19 の基準「ページの一番上のタイトル（1ページに1つ）は 56px／スマホ36px」を全ページに当てる
     （ご利用ガイド・FAQ は 10/19 に対応済み。ページごとに 28〜44px とばらばらだった）
   ・対象：hr-title（FAX・電話・お客様の声・ケース・プリザとは・文例集・メディア・海外・まとめ買い・オリジナルオーダー・案内だけ・花言葉・カテゴリの見出し）、
     贈る用途・相手・気持ち・法人様の大きな文字、お花の贈り物講座の見出し
   ・はじめまして(121) の見出し（キャッチコピー）は作り直し予定なので対象外
   ・メルマガ(151) の見出しは写真の上の枠の中にあり、56px だと枠が写真からはみ出して下の文に重なるので対象外（10/23）
   ・元に戻すときはこの段落を消す
   ============================================================= */
.hr-page .hr-title,
.hr-page .hr-hj-ttl--main .hr-hj-nb,
.hk-hero .hk-hero__title {
  font-size: 56px !important;
  line-height: 1.35 !important;
  word-break: auto-phrase;  /* 改行を言葉の切れ目で（Chrome・Edge） */
  text-wrap: balance;       /* 2行になるときは行の長さをそろえる（「について」だけが残るのを防ぐ） */
}
@media (max-width: 639px) {
  .hr-page .hr-title,
  .hr-page .hr-hj-ttl--main .hr-hj-nb,
  .hk-hero .hk-hero__title {
    font-size: min(36px, 9.2vw) !important;  /* 36px。390pxより狭いスマホだけ少し小さく（はみ出し防止） */
    letter-spacing: 0 !important;  /* 長いカタカナ（オリジナルオーダー など）が1行に収まるように */
  }
}
/* 長い言葉の途中で改行させないための目印（例：<span class="hr-nobr">プリザーブド</span><span class="hr-nobr">フラワーとは</span>） */
.hr-page .hr-title .hr-nobr {
  display: inline-block;
  white-space: nowrap;
}


/* =============================================================
   24. サイドバーのちらつき・カレンダーの見出し（2026-10-26 夜 本番反映後）
   ・商品ページ（#Detail）・カテゴリページ（#itemList）では、新しいサイドバー（≡メニューの部品が作る .hr-side）が
     入るまでの一瞬、元のサイドバーが見えていた → 最初から隠しておく（場所は空けたまま）。
     ≡メニューの部品が動かなかったときのために、3秒たったら元の中身を出す
   ・フッターの営業日カレンダー（footer-calendar が左ナビから移したもの）の注記欄に、Eストア版で
     「<h3>営業日カレンダー</h3>」が入っていて、オレンジの帯になって出ていた → 隠す（見出しはフッター側にある）
   ・元に戻すときはこの段落を消す
   ============================================================= */
#contents:has(#Detail, #itemList) #sub-column:not(.has-hr-side) > * {
  visibility: hidden;
  animation: hr-side-wait 0s 3s forwards;
}
@keyframes hr-side-wait {
  to { visibility: visible; }
}
#subc_calendar .cap h3,  /* p の中に h3 は入れられないので、ブラウザでは .cap の直下になる */
#subc_calendar .cap h3 + br {
  display: none !important;
}


/* =============================================================
   25. 新しいフリーページでは、ショップサーブが自動で出す見出しを見えなくする（2026-10-26 夜）
   ・フリーページ（#Journal）の一番上に、カテゴリ名の h1（例：花RiRoについて）と、ページ名の h2（例：初めてのお客様へ）が
     太線つきで自動で出る。新しいページは中に大きなタイトルがあるので二重になる → 見えなくする
   ・display:none ではなく「画面には出さないが文字は残す」形にして、検索エンジン・読み上げには今までどおり伝わるようにする
   ・対象は新しいページの外枠（.hr-page など）が本文にあるときだけ。古いフリーページはそのまま
   ・新しい外枠を作ったら、下の一覧に足す。元に戻すときはこの段落を消す
   ============================================================= */
#Journal:has(.journal-cont :is(.hr-page, .hr-guide32, .hr-faq149, .hr-search180, .hr-guide, .tokuten, .huda, .hk, .sougou)) > h1,
#Journal:has(.journal-cont :is(.hr-page, .hr-guide32, .hr-faq149, .hr-search180, .hr-guide, .tokuten, .huda, .hk, .sougou)) > article > h2 {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}


/* =============================================================
   26. ≡メニューの右の矢印（2026-10-26 夜）
   ・≡メニュー（hr-drawer v19、フッタ：お店ページ）の矢印「›」を、ショップサーブが保存のときに「&#8250;」という
     文字に置き換えてしまい、CSSの中なのでそのまま「&#8250;」と表示されていた → ここで正しい矢印に上書きする
   ・元ファイルも直した（次にフッタまとめを貼り直したら、この段落は消してよい）
   ============================================================= */
html body .hr-nav__list > li > a::after {
  content: "\203A";
}

/* =============================================================
   27. スクロールで上に付いてくるヘッダーを透けないように（2026-10-27 v2.35）
   ・Eストアの default.css は、付いてくるときの動き（slideDown）の最後が opacity:.95 で、
     下の本文の文字がうっすら透けて見えていた（スマホで目立つ）
   ・動きは同じまま、最後だけ opacity:1 にした別の動きに差し替え、背景だけ白85%＋ぼかしにする（10/27 高見さん「少し透けるでいい」）
   ============================================================= */
html body.header-fix #header-box {
  animation-name: hr-header-slide;
  /* 少しだけ透ける「すりガラス」：背景だけ白85%＋ぼかし。ロゴ・MENUの文字は透けない */
  background: rgba(255, 255, 255, .85) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
@keyframes hr-header-slide {
  0%   { transform: translateY(-100px); opacity: .3; }
  100% { transform: translateY(-36px);  opacity: 1; }
}

/* =============================================================
   28. 新しいサイドバーが入らないページでは、元のサイドバーを隠す（2026-10-27 v2.36）
   ・新しいサイドバー（.hr-side）が入るのは商品ページ（#Detail）とカテゴリページ（#itemList）だけ。
     それ以外のページ（ページが見つからないとき、古い月別ランキング一覧など）では、
     元のサイドバー（FREE SHIPPING・お買物総合案内所など）がそのまま見えていた（10/27 高見さん）
   ・管理画面の中身は消さない（フッターの営業日カレンダーは、このサイドバーのカレンダーを下へ移して出しているため。
     商品・カテゴリページで新しいサイドバーが動かなかったときの控えにもなる）
   ・フリーページ（#Journal）は「13.」で隠し済み。ここではそれ以外を隠して、本文を枠いっぱいに広げる
   ・元に戻すときはこの段落を消す
   ============================================================= */
#contents:not(:has(#Detail, #itemList, #itemList_wrap)) #sub-column {
  display: none !important;
}
#contents:not(:has(#Detail, #itemList, #itemList_wrap)) article,
#contents:not(:has(#Detail, #itemList, #itemList_wrap)) #main-column {
  float: none !important;
  width: 100% !important;
  max-width: none !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
}

/* --- 28-2. 「ページが見つかりませんでした」の画面（2026-10-27 v2.37）
   ・ヘッダーのすぐ下に左寄せで文字だけ出ていたので、真ん中に寄せて上下に余白をとる
   ・上に英字の小さな見出し（PAGE NOT FOUND）を付ける。文の中身はショップサーブのまま --- */
#contents #main-column:has(input.btn-confirmBack):not(:has(#Journal, #Detail, #itemList)) {
  box-sizing: border-box;
  padding: 80px 15px 120px !important;
  text-align: center;
}
#contents #main-column:has(input.btn-confirmBack):not(:has(#Journal, #Detail, #itemList))::before {
  content: "PAGE NOT FOUND";
  display: block;
  margin-bottom: 16px;
  font-family: var(--hr-font-en) !important;
  font-size: 12px;
  letter-spacing: .2em;
  color: var(--hr-accent);
}
#contents #main-column:has(input.btn-confirmBack):not(:has(#Journal, #Detail, #itemList)) > p:first-child {
  font-size: 16px !important;
  line-height: 1.8;
}
#contents #main-column:has(input.btn-confirmBack):not(:has(#Journal, #Detail, #itemList)) > br {
  display: none;
}
#contents #main-column:has(input.btn-confirmBack):not(:has(#Journal, #Detail, #itemList)) input.btn-confirmBack {
  margin-top: 28px;
  min-width: 200px;
  cursor: pointer;
}
@media (max-width: 640px) {
  #contents #main-column:has(input.btn-confirmBack):not(:has(#Journal, #Detail, #itemList)) {
    padding: 48px 15px 80px !important;
  }
}