@charset "UTF-8";
/* お供え用オリジナルオーダー（ok）の見た目 20261027a */
/* ===== 0. ページ幅（サイドバーなし・1200px） ===== */
#main-column #Journal .hr-page.hr-oo {
  max-width: 1200px;
  margin-inline: auto;
}

#main-column #Journal .hr-page.hr-oo img {
  max-width: 100%;
  height: auto;
}


/* ===== 1. 一番上（写真＋タイトル）。スマホは縦、900px以上は横並び ===== */
#main-column #Journal .hr-oo-top {
  display: grid;
  gap: 24px;
  align-items: center;
}

/* 写真は元が横670pxなので、それより大きく引き伸ばさない */
#main-column #Journal .hr-oo-top__img {
  width: 100%;
  max-width: 670px;
  margin: 0 auto;
  border-radius: var(--hr-r-card);
}

#main-column #Journal .hr-oo-catch {
  margin: 0 0 16px;
  color: var(--hr-accent-dark);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.9;
}

/* タイトルの改行はスマホだけ（PCは1行） */
#main-column #Journal .hr-oo-br {
  display: none;
}


/* ===== 2. ご注文（サンプル写真＋選ぶ欄） ===== */
#main-column #Journal .hr-oo-order {
  display: grid;
  gap: 32px;
}

/* --- サンプル写真（大きい写真＋小さい写真6枚） --- */
#main-column #Journal .hr-oo-main {
  display: block;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  border-radius: var(--hr-r-card);
  background: #fff;
}

#main-column #Journal .hr-oo-thumbs {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  max-width: 560px;
  margin: 10px auto 0;
  padding: 0;
  list-style: none;
}

#main-column #Journal .hr-oo-thumbs button {
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: var(--hr-r-btn);
  background: none;
  cursor: pointer;
  transition: border-color var(--hr-ease);
}

#main-column #Journal .hr-oo-thumbs button.is-on {
  border-color: var(--hr-accent);
}

#main-column #Journal .hr-oo-thumbs img {
  display: block;
  width: 100%;
}

/* 選んでいる写真の色と番号（お祝い用） */
#main-column #Journal .hr-page .hr-oo-cap {
  margin: 8px 0 0;
  font-size: 13px;
  text-align: center;
}

/* --- 選ぶ欄 --- */
#main-column #Journal .hr-oo-form {
  padding: 28px 20px;
  border-radius: var(--hr-r-card);
  background: #fff;
}

#main-column #Journal .hr-oo-field {
  display: grid;
  gap: 6px;
  margin: 0 0 16px;
}

#main-column #Journal .hr-oo-field label {
  font-size: 14px;
  font-weight: 600;
}

/* ショップサーブの古い select の見た目を打ち消して、大きく押しやすくする */
#main-column #Journal .hr-oo-field select, #main-column #Journal .hr-oo-field input {
  width: 100%;
  height: 48px;
  padding: 0 12px;
  border: 1px solid #cfc8c3;
  border-radius: var(--hr-r-btn);
  background: #fff;
  color: var(--hr-text);
  font-size: 16px;               /* 16px未満だとiPhoneで入力時に画面が拡大されるため */
  box-sizing: border-box;
}

#main-column #Journal .hr-oo-field--cnt input {
  width: 96px;
  text-align: center;
}

#main-column #Journal .hr-oo-field--cnt span {
  margin-left: 8px;
}

/* カートに入れるボタン（共通の .hr-btn を button に使う） */
#main-column #Journal .hr-page .hr-oo-form .hr-btn {
  width: 100%;
  max-width: none;
  margin: 24px 0 0;
  font-family: inherit!important;
}

#main-column #Journal .hr-oo-desc {
  margin: 24px 0 0;
  font-size: 14px;
}

#main-column #Journal .hr-oo-desc p {
  margin: 0 0 12px;
}

/* 即日発送できない注意（元のページは赤字だったので、赤の囲みで目立たせる） */
#main-column #Journal .hr-oo-alert {
  margin: 16px 0 0;
  padding: 12px 16px;
  border-left: 3px solid #c0392b;
  background: #fdf1ef;
  color: #a5281b;
  font-size: 14px;
  font-weight: 600;
}


/* ===== 3. オリジナルオーダーの特長（写真＋短い文の4枚） ===== */
#main-column #Journal .hr-oo-points {
  display: grid;
  gap: 16px;
  padding: 0;
  list-style: none;
}

/* スマホは写真を左、文を右に並べた横長のカード */
#main-column #Journal .hr-oo-point {
  display: grid;
  grid-template-columns: 40% 1fr;
  gap: 16px;
  align-items: center;
  padding: 12px;
  border-radius: var(--hr-r-card);
  background: var(--hr-bg-soft);
}

#main-column #Journal .hr-oo-point img {
  display: block;
  width: 100%;
  border-radius: var(--hr-r-card);
}

/* お供え用は元のページと同じく、写真を丸く切り抜く */
#main-column #Journal .hr-oo--round .hr-oo-point img {
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  object-fit: cover;
}

#main-column #Journal .hr-oo-point p {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.9;
}


/* ===== 4. プリザーブドフラワーのこと・お手入れ ===== */
#main-column #Journal .hr-page.hr-oo .hr-card .hr-h4 {
  margin: 0 0 12px;
  color: var(--hr-accent-dark);
}

/* 色の帯の中では、説明カードを白地にする（ベージュの帯に溶けないように） */
#main-column #Journal .hr-page.hr-oo .hr-band .hr-card {
  background: #fff;
}

#main-column #Journal .hr-oo-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

#main-column #Journal .hr-oo-list li {
  position: relative;
  margin: 0 0 8px;
  padding-left: 16px;
}

#main-column #Journal .hr-oo-list li::before {
  content: "";
  position: absolute;
  top: 0.75em;
  left: 2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--hr-accent);
}

#main-column #Journal .hr-oo-trouble dt {
  margin: 16px 0 4px;
  color: var(--hr-accent-dark);
  font-weight: 600;
}

#main-column #Journal .hr-oo-trouble dt:first-child {
  margin-top: 0;
}

#main-column #Journal .hr-oo-trouble dd {
  margin: 0;
}


/* ===== 5. 過去の作品集（スマホ3列、640px以上4列、900px以上5列） ===== */
#main-column #Journal .hr-page .hr-oo-works-h {
  margin: 48px 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--hr-line);
  font-size: 17px;
  scroll-margin-top: 80px;       /* 固定ヘッダーに見出しが隠れないように */
}

#main-column #Journal .hr-oo-works {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px 10px;
  padding: 0;
  list-style: none;
}

#main-column #Journal .hr-oo-works button {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--hr-text);
  font-family: var(--hr-font-en)!important;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-align: center;
  cursor: zoom-in;
}

/* 番号はカートの備考欄に書いてもらうので、写真の上に出す（元のページと同じ） */
#main-column #Journal .hr-oo-works span {
  display: block;
  margin-bottom: 4px;
}

#main-column #Journal .hr-oo-works img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--hr-r-btn);
  object-fit: cover;
  transition: opacity var(--hr-ease);
}

#main-column #Journal .hr-oo-works button:hover img {
  opacity: 0.8;
}

/* --- 拡大表示（写真を押すと、画面の真ん中に大きく出る） --- */
#main-column #Journal .hr-oo-zoom {
  width: min(92vw, 640px);
  max-width: none;
  max-height: 92vh;
  padding: 16px;
  margin: auto; /* 10/27夜 Eストアの default.css「* { margin:0 }」で中央寄せが消えて左上に出たため */
  border: 0;
  border-radius: var(--hr-r-card);
  background: #fff;
  text-align: center;
}

#main-column #Journal .hr-oo-zoom::backdrop {
  background: rgba(0, 0, 0, 0.7);
}

/* 開くとき：押した写真の位置からふわっと大きくなる（位置はスクリプトで transform-origin に入れる）
   閉じるとき：.is-closing を付けて小さく消えてから閉じる */
#main-column #Journal .hr-oo-zoom[open] {
  animation: hr-oo-zoom-in 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

#main-column #Journal .hr-oo-zoom[open]::backdrop {
  animation: hr-oo-fade-in 0.5s ease;
}

#main-column #Journal .hr-oo-zoom.is-closing {
  animation: hr-oo-zoom-out 0.3s ease forwards;
}

#main-column #Journal .hr-oo-zoom.is-closing::backdrop {
  animation: hr-oo-fade-out 0.3s ease forwards;
}

/* サンプル写真を切り替えたときのフェード */
#main-column #Journal .hr-oo-main.is-fade {
  animation: hr-oo-fade-in 0.45s ease;
}

@keyframes hr-oo-zoom-in {
  from {
    opacity: 0;
    transform: scale(0.3);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes hr-oo-zoom-out {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.85);
  }
}

@keyframes hr-oo-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes hr-oo-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* 動きを減らす設定の端末では、アニメーションをしない */
@media (prefers-reduced-motion: reduce) {
  #main-column #Journal .hr-oo-zoom, #main-column #Journal .hr-oo-zoom::backdrop, #main-column #Journal .hr-oo-main.is-fade {
    animation: none !important;
  }
}

#main-column #Journal .hr-oo-zoom img {
  display: block;
  width: 100%;
  max-height: 75vh;
  object-fit: contain;
}

#main-column #Journal .hr-oo-zoom p {
  margin: 10px 0 0;
  font-family: var(--hr-font-en)!important;
  letter-spacing: 0.06em;
}

#main-column #Journal .hr-oo-zoom button {
  margin-top: 8px;
  padding: 8px 24px;
  border: 1px solid var(--hr-line);
  border-radius: var(--hr-r-btn);
  background: #fff;
  font-family: inherit!important;
  cursor: pointer;
}


/* ===== 6. 画面幅による切り替え ===== */
@media (min-width: 640px) {
  #main-column #Journal .hr-oo-points {
    grid-template-columns: repeat(2, 1fr);
  }

  #main-column #Journal .hr-oo-works {
    grid-template-columns: repeat(4, 1fr);
    gap: 24px 16px;
  }
}

@media (min-width: 900px) {
  #main-column #Journal .hr-oo-top {
    grid-template-columns: 1fr 1fr;
    gap: 48px;
  }

  #main-column #Journal .hr-oo-order {
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start;
  }

  #main-column #Journal .hr-oo-form {
    padding: 36px 40px;
  }

  /* PCは写真が上、文が下の縦長カードを4枚横に並べる */
  #main-column #Journal .hr-oo-points {
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }

  #main-column #Journal .hr-oo-point {
    grid-template-columns: 1fr;
    align-content: start;
    padding: 16px;
    text-align: center;
  }

  #main-column #Journal .hr-oo-works {
    grid-template-columns: repeat(5, 1fr);
  }
}

@media (max-width: 639px) {
  #main-column #Journal .hr-oo-br {
    display: inline;
  }

  #main-column #Journal .hr-oo-catch {
    font-size: 15px;
  }
}

/* ===== 作品集の「金額から選ぶ」（10/16 高見さん：ラベルを大きく中央に。ボタンは元の大きさ） ===== */
#main-column #Journal .hr-oo .hr-nav-label {
  margin: 36px 0 14px;
  color: var(--hr-accent);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-align: center;
}


/* ===== 7. お祝い用：ゴールド・ワインレッド・黒の豪華な配色と明朝体（10/16 高見さん。元のページの雰囲気に合わせた） ===== */
#main-column #Journal .hr-page.hr-oo--gold {
  --hr-accent: #7d838b;          /* シルバー */
  --hr-accent-dark: #4a1219;     /* ボタンのホバーはワインレッド */
  --hr-accent-soft: #eff0f2;
  --hr-bg-soft: #f3f4f6;         /* アイボリー */
  --hr-line: #d3d6da;
  --hr-text: #2b2220;
  --hr-font: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Noto Serif JP",
    "Noto Serif CJK JP", "BIZ UDPMincho", "MS PMincho", serif;
  --hr-font-en: "Cormorant Garamond", "Times New Roman", serif;
  --hr-font-display: "Shippori Mincho", var(--hr-font);
  --hr-oo-gold: linear-gradient(135deg, #6e737a 0%, #a9adb3 28%, #eceef1 50%, #a9adb3 72%, #6e737a 100%);
  /* ボタン用：光は左上に寄せて、文字のある真ん中は濃いめに（10/16 高見さん：文字が見づらい） */
  --hr-oo-goldbtn: linear-gradient(135deg, #6e737a 0%, #eceef1 12%, #a9adb3 32%, #7d838b 62%, #6e737a 100%);
  --hr-oo-goldline: linear-gradient(90deg, transparent, #a9adb3 30%, #eceef1 50%, #a9adb3 70%, transparent);
  --hr-oo-wine: #3e0f16;
  --hr-oo-black: #161112;
  --hr-oo-cream: #eceef1;        /* 濃い背景の上の文字 */
  font-family: var(--hr-font)!important;
  font-variant-numeric: lining-nums;   /* Cormorant の数字が小文字のように下がらないように（作品の番号を読みやすく） */
}

/* --- 見出し：英字は筆記体風のイタリック、日本語は明朝、下にゴールドの線 --- */
#main-column #Journal .hr-oo--gold .hr-en, #main-column #Journal .hr-oo--gold .hr-heading__en {
  color: var(--hr-accent);
  font-family: var(--hr-font-en)!important;
  font-size: 26px;
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none;
}

#main-column #Journal .hr-page.hr-oo--gold .hr-title, #main-column #Journal .hr-oo--gold .hr-heading__ja, #main-column #Journal .hr-page.hr-oo--gold .hr-oo-works-h, #main-column #Journal .hr-page.hr-oo--gold .hr-card .hr-h4 {
  font-family: var(--hr-font-display)!important;
  font-weight: 600;
}

#main-column #Journal .hr-oo--gold .hr-heading__ja::after {
  content: "";
  display: block;
  width: 120px;
  height: 1px;
  margin: 16px auto 0;
  background: var(--hr-oo-goldline);
}

#main-column #Journal .hr-page.hr-oo--gold .hr-title::after {
  content: "";
  display: block;
  width: 160px;
  height: 1px;
  margin-top: 14px;
  background: linear-gradient(90deg, #a9adb3, #eceef1 40%, transparent);
}

#main-column #Journal .hr-oo--gold .hr-oo-catch {
  color: var(--hr-oo-wine);
  font-family: var(--hr-font-display)!important;
}

/* --- ボタン：ゴールドのグラデーション。ホバーでワインレッドが左から広がる --- */
#main-column #Journal .hr-oo--gold .hr-btn {
  border-color: #8a8f96;
  background: var(--hr-oo-goldbtn);
  font-family: var(--hr-font-display)!important;
  text-shadow: 0 1px 2px rgba(30, 32, 36, 0.6);
}

#main-column #Journal .hr-oo--gold .hr-btn--sub {
  background: #fdfdfe;
  color: #6e737a !important;
  text-shadow: none;
}

#main-column #Journal .hr-oo--gold .hr-btn--sub::before {
  background: var(--hr-oo-wine);
}

#main-column #Journal .hr-oo--gold .hr-btn--sub:hover {
  border-color: var(--hr-oo-wine);
}

/* --- ご注文：ワインレッドの帯＋アイボリーの選ぶ欄（ゴールドの二重線） --- */
#main-column #Journal .hr-oo--gold #hr-oo-order {
  --hr-band-bg: var(--hr-oo-wine);
  color: var(--hr-oo-cream);
}

#main-column #Journal .hr-oo--gold #hr-oo-order .hr-heading__ja {
  color: var(--hr-oo-cream);
}

#main-column #Journal .hr-oo--gold #hr-oo-order .hr-heading__en, #main-column #Journal .hr-oo--gold .hr-oo-dark .hr-heading__en {
  color: #c4c8cd;
}

#main-column #Journal .hr-oo--gold .hr-oo-main {
  box-shadow: 0 0 0 1px rgba(196, 200, 205, 0.6), 0 12px 30px rgba(0, 0, 0, 0.35);
}

#main-column #Journal .hr-oo--gold .hr-oo-thumbs button.is-on {
  border-color: #c4c8cd;
}

#main-column #Journal .hr-page.hr-oo--gold .hr-oo-cap {
  color: var(--hr-oo-cream);
  font-family: var(--hr-font-display)!important;
}

#main-column #Journal .hr-oo--gold #hr-oo-order .hr-note {
  color: #cdd0d4;
}

#main-column #Journal .hr-oo--gold .hr-oo-form, #main-column #Journal .hr-oo--gold .hr-oo-zoom {
  border: 1px solid #a9adb3;
  background: #fdfdfe;
  box-shadow: inset 0 0 0 5px #fdfdfe, inset 0 0 0 6px rgba(169, 173, 179, 0.5);
  color: var(--hr-text);
}

#main-column #Journal .hr-oo--gold .hr-oo-field select, #main-column #Journal .hr-oo--gold .hr-oo-field input {
  border-color: #cbced3;
  font-family: inherit!important;
}

#main-column #Journal .hr-oo--gold .hr-oo-field label {
  color: var(--hr-oo-wine);
}

/* 色の帯が続くところは、あいだの白い余白をなくしてつなげる（10/16 高見さん）
   境目が小数点の位置になると白っぽい線が出るので、1px 重ねる */
#main-column #Journal .hr-oo--gold .hr-band + .hr-band {
  margin-top: -1px;
}

/* 背景の模様：渦巻きと葉（10/16 高見さんが見本7の AJ に決定）
   ・画像は金色1色の透過PNG（pattern-img/oo-pattern-swirl-silver.png → /pic-labo/）。横240pxで敷き詰める
   ・ページ全体の白い地と、色の帯ごとに ::before で敷き、濃さ（opacity）は帯の色ごとに変える
   ・::before は画面幅いっぱい（帯と同じ）。はみ出しで横スクロールが出ないよう body は overflow-x: clip */
#main-column #Journal .hr-oo--gold, #main-column #Journal .hr-oo--gold .hr-band {
  position: relative;
  isolation: isolate;
}

#main-column #Journal .hr-oo--gold::before, #main-column #Journal .hr-oo--gold .hr-band::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  z-index: -1;
  pointer-events: none;
  background: url("https://www.hanariro.com/pic-labo/oo-pattern-swirl-silver.png") 0 0 / 240px auto repeat;
  opacity: .17;
}

#main-column #Journal .hr-oo--gold #hr-oo-order::before, #main-column #Journal .hr-oo--gold .hr-oo-dark::before {
  opacity: .13;
}

#main-column #Journal .hr-oo--gold .hr-band:not(#hr-oo-order):not(.hr-oo-dark):not(#hr-oo-works)::before {
  opacity: .21;
}

#main-column #Journal body:has(.hr-oo--gold) {
  overflow-x: clip;
}

/* --- 特長：黒の帯＋ゴールドの額縁（元のページの金の枠のイメージ） --- */
#main-column #Journal .hr-oo--gold .hr-oo-dark {
  --hr-band-bg: var(--hr-oo-black);
  color: var(--hr-oo-cream);
}

#main-column #Journal .hr-oo--gold .hr-oo-dark .hr-heading__ja {
  color: var(--hr-oo-cream);
}

#main-column #Journal .hr-oo--gold .hr-oo-dark .hr-lead {
  color: #bfc3c8;
}

#main-column #Journal .hr-oo--gold .hr-oo-point {
  padding: 14px;
  border: 1px solid #a9adb3;
  border-radius: 2px;
  background: #1f1819;
  box-shadow: inset 0 0 0 5px #1f1819, inset 0 0 0 6px rgba(169, 173, 179, 0.55);
}

#main-column #Journal .hr-oo--gold .hr-oo-point img {
  border-radius: 2px;
}

#main-column #Journal .hr-oo--gold .hr-oo-point p {
  color: var(--hr-oo-cream);
  font-family: var(--hr-font-display)!important;
  font-weight: 500;
}

/* --- 説明カード：白地に上だけゴールドの線 --- */
#main-column #Journal .hr-page.hr-oo--gold .hr-card {
  border: 1px solid var(--hr-line);
  border-top: 2px solid #a9adb3;
  border-radius: 2px;
  background: #fff;
}

#main-column #Journal .hr-page.hr-oo--gold .hr-sec:not(.hr-band) .hr-card {
  background: var(--hr-bg-soft);
}

#main-column #Journal .hr-page.hr-oo--gold .hr-card .hr-h4, #main-column #Journal .hr-oo--gold .hr-oo-trouble dt {
  color: var(--hr-oo-wine);
}

/* 箇条書きの点はゴールドのひし形 */
#main-column #Journal .hr-oo--gold .hr-oo-list li::before {
  border-radius: 0;
  background: #a9adb3;
  transform: rotate(45deg);
}

/* --- 作品集：見出しにゴールドの線、写真はホバーで少し浮く --- */
#main-column #Journal .hr-page.hr-oo--gold .hr-oo-works-h {
  border-bottom: 0;
  color: var(--hr-oo-wine);
  font-size: 19px;
}

#main-column #Journal .hr-page.hr-oo--gold .hr-oo-works-h::after {
  content: "";
  display: block;
  height: 1px;
  margin-top: 10px;
  background: linear-gradient(90deg, #a9adb3, #eceef1 30%, transparent);
}

#main-column #Journal .hr-oo--gold .hr-nav a {
  font-family: var(--hr-font-display)!important;
}

#main-column #Journal .hr-oo--gold .hr-nav a::before {
  background: var(--hr-oo-gold);
}

/* 作品の番号はお客様が備考欄に書き写すので大きめに（10/16 15px→19px） */
#main-column #Journal .hr-oo--gold .hr-oo-works button {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.06em;
}

#main-column #Journal .hr-oo--gold .hr-oo-works img {
  transition: transform var(--hr-ease), box-shadow var(--hr-ease);
}

#main-column #Journal .hr-oo--gold .hr-oo-works button:hover img {
  opacity: 1;
  box-shadow: 0 0 0 2px #a9adb3, 0 8px 18px rgba(62, 15, 22, 0.25);
  transform: translateY(-3px);
}

#main-column #Journal .hr-oo--gold .hr-oo-zoom p {
  color: var(--hr-oo-wine);
  font-size: 26px;
  font-weight: 600;
}

#main-column #Journal .hr-oo--gold .hr-oo-zoom button {
  border-color: #a9adb3;
  background: #fdfdfe;
  color: #6e737a;
}

@media (max-width: 639px) {
  #main-column #Journal .hr-oo--gold .hr-en, #main-column #Journal .hr-oo--gold .hr-heading__en {
    font-size: 22px;
  }

  /* スマホは3列なので少しだけ小さく */
  #main-column #Journal .hr-oo--gold .hr-oo-works button {
    font-size: 16px;
  }
}


/* ===== 8. 背景の模様をヘッダーの下からフッターの上まで（10/27夜 高見さん：この2ページだけ外枠ぎりぎりまで）
   ・このCSSはこのページのheadタグ欄でだけ読むので、外枠の要素を直接指定しても他のページには出ない
   ・本文の外側（パンくず・カテゴリ名の行）は #contents に、下の「最近チェックした商品」は section.recentlyViewed に模様を敷く
   ・本文の .hr-oo--gold::before は重なって濃くなるので消す（色の帯 .hr-band::before はそのまま）
   ・フッター上の80pxのすき間は、最近チェックした商品の下の余白に移して模様でつなぐ ===== */
#contents, section.recentlyViewed {
  position: relative;
  isolation: isolate;
}

#contents::before, section.recentlyViewed::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url("https://www.hanariro.com/pic-labo/oo-pattern-swirl-silver.png") 0 0 / 240px auto repeat;
  opacity: .17;
}

#main-column #Journal .hr-oo--gold::before {
  display: none;
}

section.recentlyViewed {
  margin-top: 0 !important;
  padding-bottom: 80px !important;
}

body > footer {
  margin-top: 0 !important;
}

/* #contents は左右に約17pxの余白があるので、模様だけ画面の端まで伸ばす（10/27夜 本番190で確認） */
#contents::before {
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
}

/* スマホ（767px以下）は外枠のJS（フッター部品の pullUpOnMobile）がフッターに margin-top:40px !important を直接付けていてCSSで消せない
   → 下の余白はなくし、模様を下に40px伸ばしてすき間を埋める */
@media (max-width: 767px) {
  section.recentlyViewed {
    padding-bottom: 0 !important;
  }

  section.recentlyViewed::before {
    bottom: -40px;
  }
}

/* 上下の余白（10/27夜 高見さん：Memorial Flower の上が模様の端に近い、下もカテゴリ名の罫線に近い） */
#main-column #Journal .hr-page.hr-oo {
  padding-top: 48px;
  padding-bottom: 112px; /* 共通の72px＋40px */
}

@media (max-width: 767px) {
  #main-column #Journal .hr-page.hr-oo {
    padding-top: 32px;
    padding-bottom: 96px; /* 共通の72px＋24px */
  }
}