@charset "UTF-8";
/* 今の本番サイト用の部分CSS（2026-10-21）：共通CSS v2.20 から商品説明の中だけに効く 16・20・21 を抜き出したもの。
   17商品（オリジナル・プリザーブド）を10/26より前に上げるとき用。ショップサーブのCSS欄の最後に足す。10/26に共通CSS v2.20 全体を貼るときは、これは消してよい（同じ内容が入っている） */

/* =============================================================
   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) {
  width: auto !important;
  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; }



/* =============================================================
   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;
  }
}

/* 今のサイト用だけ（10/21）：お線香・ロウソクのバナー（etc-○○-banner.jpg）を2000px版に差し替えても、
   幅の指定がない古いタグの商品で大きくはみ出さないようにする（10/26以降は全商品のタグに幅の指定が入るので不要） */
img[src*="/pic-labo/etc-"][src$="-banner.jpg"] {
  max-width: 100%;
  height: auto;
}