@charset "UTF-8";
/* ============================================================
   sp_home.css
   花秘書 スマートフォン版トップページ用 補正CSS

   目的 : PC版トップページ（/index.html）のHTMLをそのまま流用し、
          768px以下でPC版と同じデザインが成立するようにする。

   方針 : ・既存CSS（default_renew / layout_renew / contents_renew / home）は一切変更しない
          ・本ファイルは /sp/index.html からのみ読み込む（PC版の <head> は触らない）
          ・全ルールを @media screen and (max-width:768px) 内に閉じ込める（二重の安全策）
          ・読み込み順は既存CSSの「後」に置くこと

   前提 : 既存CSSで 768px 対応済み＝ヘッダー / フッター / #contentMain /
          #contentSide(非表示) / .btnToList / .contentWrap / FAQ / seo-box
          本ファイルで補うのは home.css 由来と rankingSec 系のみ。

   作成 : 2026-08-20
   更新 : 2026-08-20 実機確認による修正6点を反映（末尾の変更履歴参照）
   ============================================================ */

@media screen and (max-width: 768px) {

  /* ------------------------------------------------------------
     1. メインスライダー  #homeSlide
        PC: width:950px / height:460px 固定 → 横スクロール発生
     ------------------------------------------------------------ */
  #homeSlide {
    width: 100%;
    height: auto;
    background: #fff;
  }
  #homeSlide .mainSlide {
    height: auto;
  }
  #homeSlide .mainSlide img {
    width: 100%;
    height: auto;
    vertical-align: bottom;
    /* 画像読込前の高さを確保して読込時のガタつきを防ぐ。
       SP専用KV（sp-s1〜sp-s4.jpg）は 1254x1254 の正方形。 */
    aspect-ratio: 1 / 1;
    -o-object-fit: cover;
       object-fit: cover;
  }
  /* --- slick初期化前のちらつき対策 ---------------------------------
     hana_renew.js は $(window).on("load") でslickを初期化するため、
     それまで <ul> 内の6スライドが縦に全部並んで表示され、初期化と同時に
     1枚に畳まれる（PC版は #homeSlide{height:460px;overflow:hidden} が
     クリップしていたが、SPでは height:auto にするため露出する）。
     slickが付与する .slick-initialized が付くまで1枚目だけ見せる。 */
  #homeSlide .mainSlide ul:not(.slick-initialized) > li {
    display: none;
  }
  #homeSlide .mainSlide ul:not(.slick-initialized) > li:first-child {
    display: block;
  }
  /* サムネイル（PCは6枚並び・150x60のオーバーレイ画像前提）はSPでは非表示 */
  #homeSlide .thumbList {
    display: none;
  }

  /* ------------------------------------------------------------
     2. リード文  section.homeLeadSec
        PC: 左に胡蝶蘭画像(172x340)、右上にリボン(148x148)の装飾
        → SP幅では見出しに重なるため非表示
     ------------------------------------------------------------ */
  section.homeLeadSec div.leadCont {
    padding: 28px 0 22px;
  }
  section.homeLeadSec div.leadCont::before,
  section.homeLeadSec div.leadCont::after {
    display: none;
  }
  section.homeLeadSec div.leadCont h2 {
    font-size: 20px;
    line-height: 1.5;
  }
  section.homeLeadSec div.leadCont h2 + p {
    font-size: 13px;
    line-height: 1.9;
    margin-top: 16px;
    text-align: left;
  }
  /* SP幅では原稿の <br> による強制改行を無効化 */
  section.homeLeadSec div.leadCont h2 + p br {
    display: none;
  }
  /* KVとの間隔。リード文を削除して見出しが直下に来たため詰める。
     数値を変えたい場合はこの1箇所だけ書き換えること。 */
  section.homeLeadSec div.leadCont div.hlWrap {
    margin-top: 12px;
  }
  section.homeLeadSec div.leadCont div.hlWrap h2 {
    font-size: 17px;
    line-height: 1.5;
  }
  section.homeLeadSec div.leadCont div.hlWrap h2 + p {
    font-size: 14px;
    text-align: center;
    line-height: 1.6;
  }

  /* ------------------------------------------------------------
     3. シーン別カード  section.homeLeadSec div.sceneList  【デザイン刷新】
        旧: ゴールド地×白文字の4カラムブロック
        新: 白カード＋ゴールドのアイコンバッジ＋2カラム
        ・アイコンは ::before に SVG(data URI) で流し込むためHTML変更は不要
        ・既存の li:nth-child() 指定より詳細度を上げるため #container を前置
        ※ このブロックごと削除すれば旧デザインに戻ります
     ------------------------------------------------------------ */

  /* ==== 新デザイン：シーン別カード（.sceneList） ==== */
  #container section.homeLeadSec div.sceneList ul {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 10px;
  }
  #container section.homeLeadSec div.sceneList li {
    background: transparent;
    border-radius: 16px;
    overflow: visible;
    box-shadow: 0 1px 2px rgba(45, 45, 45, 0.04), 0 8px 20px rgba(145, 133, 74, 0.08);
  }
  #container section.homeLeadSec div.sceneList li a {
    background: #fff;
    color: #2d2d2d;
    border: 1px solid #ece7d8;
    border-radius: 16px;
    padding: 16px 13px 15px;
    position: relative;
  }
  #container section.homeLeadSec div.sceneList li a::before {
    content: "";
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    margin-bottom: 11px;
    border-radius: 50%;
    background-color: #f7f4e9;
    background-repeat: no-repeat;
    background-position: center;
    /* 円は42px。中の絵柄は30pxで、上下左右に6pxずつ余白が残る。
       これ以上大きくすると円のふちに接して窮屈に見える。 */
    background-size: 30px 30px;
  }
  #container section.homeLeadSec div.sceneList li a::after {
    content: "";
    position: absolute;
    top: 26px;
    right: 14px;
    width: 6px;
    height: 6px;
    border-top: 1.5px solid #c3bda4;
    border-right: 1.5px solid #c3bda4;
    transform: rotate(45deg);
  }
  #container section.homeLeadSec div.sceneList li h3 {
    font-size: 16.5px;
    font-weight: 700;
    color: #2d2d2d;
    line-height: 1.35;
    margin-bottom: 0.5em;
    letter-spacing: 0.01em;
  }
  #container section.homeLeadSec div.sceneList li h3 + p {
    font-size: 13px;
    line-height: 1.7;
    font-weight: 400;
    color: #767065;
    letter-spacing: 0;
  }
  /* --- 既定は6件のみ表示。「すべてのシーンを見る」で残りを開く ---
     JSは index.html の末尾（インライン）。ul に .open が付くと展開する。 */
  #container section.homeLeadSec div.sceneList ul > li.scMore {
    display: none;
  }
  #container section.homeLeadSec div.sceneList ul.open > li.scMore {
    display: block;
  }
  section.homeLeadSec div.sceneList p.sceneToggle {
    margin-top: 18px;
    text-align: center;
  }
  section.homeLeadSec div.sceneList p.sceneToggle button {
    font-family: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-width: 250px;
    padding: 14px 26px;
    background: #f9f9f6;
    border: 1px solid #91854a;
    border-radius: 6px;
    color: #91854a;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.02em;
  }
  section.homeLeadSec div.sceneList p.sceneToggle button::after {
    content: "";
    width: 8px;
    height: 8px;
    border-right: 1.6px solid #91854a;
    border-bottom: 1.6px solid #91854a;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform 0.3s ease;
  }
  section.homeLeadSec div.sceneList p.sceneToggle button[aria-expanded="true"]::after {
    transform: rotate(-135deg) translate(-2px, -2px);
  }
  section.homeLeadSec div.sceneList p.sceneToggle button:focus-visible {
    outline: 2px solid #91854a;
    outline-offset: 3px;
  }

  /* --- シーン別アイコン ---------------------------------------
     以前は li:nth-child(N) で割り当てていたが、並び順を変えると
     アイコンがずれるため、シーンごとのクラスに紐づける方式に変更。
     HTML側の <li class="sc-open"> などと対応する。

     2026-08-26 CSS埋め込みSVGから画像ファイルへ差し替え。
       ・設置先 /img_renew/home/ ○○.png
       ・余白を切り揃えて96px四方の中央に配置済み。
         元データは余白が0〜44pxとばらついており、そのまま使うと
         アイコンごとに大きさが不揃いに見える。
       ・表示は26px。差し替え前の23pxより少し大きくしている。
         新しい絵柄は花の装飾が入るぶん密度が高く、23pxでは潰れる。
     ------------------------------------------------------------ */
  /* 開店祝い */
  section.homeLeadSec div.sceneList li.sc-open a::before {
    background-image: url("/img_renew/home/kaiten.png");
  }
  /* 移転祝い */
  section.homeLeadSec div.sceneList li.sc-building a::before {
    background-image: url("/img_renew/home/iten.png");
  }
  /* 就任祝い */
  section.homeLeadSec div.sceneList li.sc-assumption a::before {
    background-image: url("/img_renew/home/shunin.png");
  }
  /* 周年祝い */
  section.homeLeadSec div.sceneList li.sc-anniversary a::before {
    background-image: url("/img_renew/home/shunen.png");
  }
  /* 開業祝い */
  section.homeLeadSec div.sceneList li.sc-establishment a::before {
    background-image: url("/img_renew/home/kaigyo.png");
  }
  /* 開院祝い */
  section.homeLeadSec div.sceneList li.sc-clinic a::before {
    background-image: url("/img_renew/home/kaiin.png");
  }
  /* 開設祝い */
  section.homeLeadSec div.sceneList li.sc-officeopen a::before {
    background-image: url("/img_renew/home/kaisetsu.png");
  }
  /* 落成祝い */
  section.homeLeadSec div.sceneList li.sc-completion a::before {
    background-image: url("/img_renew/home/rakjusei.png");
  }
  /* 上場祝い */
  section.homeLeadSec div.sceneList li.sc-stock a::before {
    background-image: url("/img_renew/home/zyozyo.png");
  }
  /* 選挙当選祝い */
  section.homeLeadSec div.sceneList li.sc-election a::before {
    background-image: url("/img_renew/home/tousen.png");
  }
  /* 叙勲・受賞祝い */
  section.homeLeadSec div.sceneList li.sc-winning a::before {
    background-image: url("/img_renew/home/zyusho.png");
  }
  /* 退職祝い */
  section.homeLeadSec div.sceneList li.sc-retirement a::before {
    background-image: url("/img_renew/home/taishoku.png");
  }


  /* ------------------------------------------------------------
     4. カテゴリから選ぶ  section.selCategorySec
        PC: li が 366px / 238px 固定の flex → SP: 1カラム
     ------------------------------------------------------------ */
  section.selCategorySec > ul {
    display: block;
  }
  section.selCategorySec > ul > li,
  section.selCategorySec > ul > li:nth-child(-n+2) {
    width: 100%;
    margin-bottom: 30px;   /* カテゴリ間の余白（元 26px） */
  }
  section.selCategorySec > ul > li:last-child {
    margin-bottom: 0;
  }
  /* カテゴリ画像の高さを胡蝶蘭（横長 21:10）に統一し、中央基準でトリミング。
     アレンジメント / デザイナーズ / 花束 の縦長画像は上下がカットされる。
     ※ 比率は実機スクショ採寸（幅366pt / 高さ174pt ＝ 2.103）に基づく */
  section.selCategorySec > ul > li .aWrap > div > a > p {
    line-height: 0;
  }
  section.selCategorySec > ul > li .aWrap > div > a > p img {
    width: 100%;
    height: auto;
    aspect-ratio: 21 / 10;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center;
       object-position: center;
    border-radius: 9px;   /* トリミングで失われる元画像の角丸を補う */
    vertical-align: bottom;
  }
  /* --- カテゴリ名と商品数を同じ行に並べる -----------------------
     HTMLは <div><a><p><img></p><h3>胡蝶蘭</h3></a></div> と
     <p class="num"> が別ブロックのため、そのままでは横並びにできない。
     中間の div / a に display:contents を当てて箱を消し、
     img / h4 / .num / .priceLink を .aWrap の直接のフレックス項目にする。
     ※ display:contents はセレクタのマッチには影響しないため、
        既存の子セレクタ（> div > a > p img 等）はそのまま効く。 */
  section.selCategorySec > ul > li .aWrap {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
  }
  section.selCategorySec > ul > li .aWrap > div:first-child,
  section.selCategorySec > ul > li .aWrap > div:first-child > a {
    display: contents;
  }
  section.selCategorySec > ul > li .aWrap > div > a > p {
    flex: 0 0 100%;
    width: 100%;
  }
  /* 【カテゴリ名を拡大】胡蝶蘭 / 観葉植物 など 16px → 20px */
  section.selCategorySec > ul > li h3 {
    flex: 1 1 auto;
    font-size: 20px;
    padding: 13px 0 12px;
    line-height: 1.4;
  }
  /* 商品数をカテゴリ名の右端へ。区切り罫線は .priceLink 側に移す */
  section.selCategorySec > ul > li .num {
    flex: 0 0 auto;
    margin-left: auto;
    padding: 13px 0 12px;
    font-size: 14px;
    line-height: 1.4;
    border-top: none;
    border-bottom: none;
  }
  section.selCategorySec > ul > li .num span {
    font-size: 22px;
    padding-right: 0.35em;
  }
  section.selCategorySec div.priceLink {
    flex: 0 0 100%;
    width: 100%;
    margin-top: 0;
    padding-top: 15px;
    border-top: 1px solid #e1e1e1;   /* .num から移設した区切り線 */
  }
  section.selCategorySec div.priceLink h4 {
    font-size: 14px;
  }
  section.selCategorySec div.priceLink h4 small {
    font-size: 10px;
  }
  /* 価格リンクは固定幅(7em)をやめて折り返しに任せる */
  section.selCategorySec div.priceLink ul {
    gap: 0.3em 0;
  }
  section.selCategorySec div.priceLink ul li,
  section.selCategorySec div.priceLink ul li.ov {
    width: auto;
    font-size: 14px;
  }
  /* 【価格リンクを太字に】 */
  section.selCategorySec div.priceLink ul li a {
    font-weight: 700;
  }
  section.selCategorySec div.priceLink ul li:last-child::after {
    display: none;
  }

  /* ------------------------------------------------------------
     5. 商品ランキング  section.rankingSec / ul.withRankNum
        PC: section 730px固定 + grid 4カラム → SP: 全幅 + 2カラム
     ------------------------------------------------------------ */
  section.rankingSec {
    width: 100%;
    margin-top: 35px;
  }
  section.rankingSec ~ section.rankingSec {
    margin-top: 42px;
  }
  section.rankingSec .leadNote {
    font-size: 13px;
    line-height: 1.8;
  }

  ul.withRankNum,
  ul.withRankNum.col3 {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px 10px;
  }
  ul.withRankNum li figure,
  ul.withRankNum.col3 figure {
    max-width: 100%;
  }
  ul.withRankNum li figure img,
  ul.withRankNum.col3 figure img {
    width: 100%;
    height: auto;
    vertical-align: bottom;
  }
  /* ランキングバッジ（68x58）はSPでは縮小 */
  ul.withRankNum li.rank figure::before {
    width: 52px;
    height: 44px;
  }
  /* 「送料無料 / 最短翌日 / お値下げ」の3つ並びは2カラムだと溢れるため折り返す */
  ul.withRankNum .optList {
    margin-top: 8px;
    flex-wrap: wrap;
    gap: 3px;
  }
  ul.withRankNum .optList span {
    font-size: 9px;
    height: 18px;
    padding: 0 4px;
  }
  section.rankingSec div.noteBox h3 {
    font-size: 13px;
    margin-top: 8px;
  }
  /* 価格と税込価格の行間を詰める（実測 12.7pt → 約5pt）
     元は行送り(line-height:1.3)＋margin-top で余白が開いていた */
  section.rankingSec div.noteBox .price {
    font-size: 16px;
    margin-top: 6px;
    line-height: 1.15;
  }
  /* 【税込価格を拡大】10px → 12px */
  section.rankingSec div.noteBox .withTax {
    font-size: 12px;
    margin-top: 5px;
    line-height: 1.15;
  }

  /* ------------------------------------------------------------
     6. お知らせ / レビュー  section.infoSec / section.reviewSec
        PC: reviewSec の iframe が width:757px 固定
     ------------------------------------------------------------ */
  section.infoSec {
    margin-top: 40px;
  }
  section.infoSec iframe {
    width: 100%;
    height: 300px;
  }
  section.reviewSec {
    margin-top: 40px;
  }
  section.reviewSec iframe {
    width: 100%;
    height: 320px;
  }

  /* ------------------------------------------------------------
     7. コラム(.seo-box) / よくあるご質問(.faq-section) の左右位置を統一
        原因1: for_faq.css   .faq-section { padding: 0 10px }
        原因2: HTML内インライン<style>  .seo-box { margin: 60px 10px 50px }
        → 他セクションは .inner の左右18pxのみ。この2つだけ内側に10px寄っていた。
        インライン<style>はHTML後方にあり同詳細度では勝てないため #contentMain を前置。
     ------------------------------------------------------------ */
  #contentMain .seo-box {
    margin: 45px 0 40px;
  }
  #contentMain .faq-section {
    padding-left: 0;
    padding-right: 0;
  }
  #contentMain .faq-section .faq-question,
  #contentMain .faq-section .faq-answer {
    padding-left: 0;
    padding-right: 0;
  }
  #contentMain .seo-box .seo-text .leadNote {
    font-size: 13px;
    line-height: 1.9;
  }

  /* ------------------------------------------------------------
     7-B. ピンクボタン共通の文字の太さ
        contents_renew.css の .btnToList a は font-weight:500。
        お祝いページ（sp_congra.css）と揃えて 600 にする。
     ------------------------------------------------------------ */
  .btnToList a {
    font-weight: 600;
  }

  /* ------------------------------------------------------------
     8. 「コラム一覧」「その他のよくある質問はこちら」ボタンを
        他のピンクボタン（.btnToList a）と完全に同一仕様へ統一
        ・for_faq.css : width:280px / border:1px #908449 / font-size:110% / margin-bottom:80px
        ・インライン<style> : display:inline-block / padding:6px 10px / font-size:110%
        上記2系統が .btnToList a を打ち消していたため、詳細度を上げて揃える。
        （揃える基準＝contents_renew.css の SP 指定：100% / max 480px / 40px / 14px）
     ------------------------------------------------------------ */
  #contentMain .seo-box .btnToList a,
  #contentMain .faq-section .faq-link a {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    max-width: 480px;
    height: 40px;
    padding: 0 10px;
    margin: 0 auto;
    background: #ff2456;
    color: #fff;
    border: 2px solid #ff2456;
    border-radius: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
  }
  #contentMain .faq-section .faq-link {
    margin: 26px 0 0;
  }
  /* FAQボタン〜フッター間の余白を詰める
     for_faq.css : .faq-section { margin: 100px 0 }（SPは margin-top:60px 上書き）
     contents_renew.css 由来の #container { padding: 0 0 50px } と合算で
     ボタン下に100px超の空きが出ていたため両方を縮める */
  #contentMain .faq-section {
    margin-bottom: 0;
  }
  #contentMain > section:last-child {
    margin-bottom: 0;
  }
  #container {
    padding-bottom: 35px;   /* バナー下〜フッター間の余白 */
  }
  /* contents_renew.css の div.contentWrap{display:flex} はSPで解除されておらず、
     #contentSide を表示した途端に #contentMain と横並びになってしまう。
     SPでは縦積みにする。 */
  div.contentWrap {
    display: block;
    margin-bottom: 0;
  }

  /* ------------------------------------------------------------
     9. 固定ヘッダー分の余白確保（KVがヘッダーに隠れる問題）
        layout_renew.css は SP で header{position:fixed} にする一方、
        余白は body.headerFixed #containerWrap{padding-top:102px} に依存。
        トップページの <body id="HOME"> には headerFixed が付かないため
        コンテンツが最上部から始まり、KVがヘッダーの下に潜り込む。
        ヘッダー実測 = 69px（iPhone実機スクリーンショットから採寸）
        ※ 隙間/かぶりが残る場合はこの1箇所の数値だけ調整してください
     ------------------------------------------------------------ */
  body#HOME #containerWrap {
    padding-top: 69px;
  }
  /* --- スクロール方向によるヘッダー表示制御（sp_header.js と対で使用）---
     top をアニメーションさせる。transform は使わないこと。
     header の子にある #spSlideNav が position:fixed のため、
     header に transform を当てると fixed の基準が header になり
     ハンバーガーメニューが高さ69pxの中に閉じ込められて壊れる。 */
  header {
    transition: top 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* ============================================================
     ㉓ 見出しレベルの引き上げに伴う互換指定

        SP版トップの見出しを1段ずつ繰り上げた（h3→h2 / h4→h3 / h5→h4）。
        home.css・contents_renew.css は旧タグ名でセレクタを書いており
        PC版と共有のため変更できない。ここで新タグに同じ体裁を与える。

        ※PC版のHTMLは旧タグのままなので、PC側の表示には影響しない。
     ============================================================ */

  /* 見出しの共通枠（barHl）: h3.barHl → h2.barHl */
  h2.barHl {
    color: #000;
    font-size: 17px;
    font-weight: 700;
    border-bottom: 2px solid #888888;
    margin-bottom: 20px;
    padding-bottom: 0.5em;
  }
  h3.barHl {
    font-size: 14px;
  }

  /* リード見出し: .hlWrap h3 → h2 */
  section.homeLeadSec div.leadCont div.hlWrap h2 {
    font-weight: 700;
    margin-bottom: 0.5em;
  }
  section.homeLeadSec div.leadCont div.hlWrap h2 + p {
    color: #888888;
  }

  /* シーン一覧: li h4 → h3 */
  section.homeLeadSec div.sceneList li h3 {
    font-weight: 700;
    line-height: 1;
    margin-bottom: 0.4em;
  }
  section.homeLeadSec div.sceneList li h3 + p {
    line-height: 1.5;
    font-weight: 300;
    letter-spacing: -0.03em;
  }

  /* カテゴリ名: li h4 → h3 */
  section.selCategorySec > ul > li h3 {
    font-weight: 700;
    line-height: 1;
  }

  /* 価格で選ぶ: h5 → h4 */
  section.selCategorySec div.priceLink h4 {
    font-weight: 700;
    display: flex;
    align-items: center;
  }
  section.selCategorySec div.priceLink h4 small {
    font-size: 11px;
    padding-left: 0.5em;
  }
  section.selCategorySec div.priceLink h4::before {
    content: "";
    width: 0;
    height: 0;
    border: 7px solid transparent;
    border-left-color: #91854a;
  }

  /* 商品名: noteBox h4 → h3 */
  section.rankingSec div.noteBox h3 {
    font-weight: 700;
  }

  /* ご利用用途のバッジ: usageSec h4 → h3 */
  #contentSide section.usageSec h3 {
    font-size: 10px;
    color: #fff;
    font-weight: 700;
    display: inline-block;
    height: 20px;
    line-height: 20px;
    padding: 0 8px;
    background: #e62b4f;
    border-radius: 3px;
  }

  /* ------------------------------------------------------------
     10. 保険：意図しない横スクロールの抑止
     ------------------------------------------------------------ */
  #containerWrap {
    overflow-x: hidden;
  }

}


/* ============================================================
   ⑰ PC右サイドのバナーをフッター直上に2列で表示（8点中6点）
   ------------------------------------------------------------
   #contentSide は contents_renew.css の
     @media (max-width:768px){ div#contentSide{ display:none } }
   でSPでは非表示。DOM上は #contentMain の直後（フッターの直前）に
   あるため、表示するだけで狙いの位置に出る。
   バナー以外のサイドバー項目（ご利用用途 / サポート / FAX注文 /
   立札例 / How to / 営業カレンダー）は個別に非表示のまま維持する。
   ============================================================ */
@media screen and (max-width: 768px) {

  div#contentSide {
    display: block;
    width: 100%;
    margin: 35px 0 0;   /* FAQボタン〜バナー間の余白 */
    padding: 0;
  }
  /* サイドバー内の section はすべて非表示（バナーだけ出す） */
  div#contentSide > section {
    display: none;
  }
  div#contentSide div.bnrList {
    display: block;
  }
  div#contentSide div.bnrList ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  /* PC用の li:margin-top:15px を打ち消し（gapで制御するため） */
  div#contentSide div.bnrList ul li {
    margin-top: 0;
  }
  /* 非表示にするバナー
       1 = 送料無料（bnr1.jpg）
       2 = 午前10時迄の配達 早朝特別便オプション（bnr2.jpg）
     残り6点（GUIDE / 胡蝶蘭 / お供え花 / BLOG / FAQ / 品質ポリシー）を
     2列×3行で表示する */
  div#contentSide div.bnrList ul li:nth-child(1),
  div#contentSide div.bnrList ul li:nth-child(2) {
    display: none;
  }
  div#contentSide div.bnrList img {
    width: 100%;
    height: auto;
    vertical-align: bottom;
  }

}


/* ============================================================
   変更履歴
   ------------------------------------------------------------
   2026-08-20 実機（iPhone / Safari）確認による修正

   ① シーン別カード（.sceneList）の文字を拡大
      見出し 15px → 18px / 説明文 11px → 13.5px、行間・余白も調整
      重要導線のため可読性を優先。カードは2カラム維持。

   ② カテゴリの価格リンク（.priceLink ul li a）を太字に
      font-weight:700 を追加、13px → 14px

   ③ 商品の税込価格（.withTax）を拡大
      10px → 12px

   ④ ボタン内テキストの上寄りを修正
      .seo-box の インライン<style> が display:inline-block で
      flex中央揃えを打ち消していたため、詳細度を上げて flex を再指定

   ⑤ FAQボタン下の余白を縮小
      for_faq.css の margin-bottom:80px → 30px

   ⑥ KVが固定ヘッダーに隠れる問題を修正
      body#HOME #containerWrap に padding-top:85px を付与
      （既存の body.headerFixed 前提の余白指定がトップページで効かないため）

   ⑦ KVが全スライド展開されてから畳まれる（ちらつき）を修正
      ul:not(.slick-initialized) で初期化完了まで1枚目のみ表示。
      あわせて img に aspect-ratio:950/380 を指定し、読込前の高さを確保。
   ============================================================ */

/* ------------------------------------------------------------
   2026-08-20 追加分

   ⑧ ヘッダーとKVの間の余白を解消
      padding-top 85px → 69px（実機スクショ採寸で16pxの余白過多を確認）

   ⑨ シーン別カードのデザイン刷新
      白カード＋ゴールドのアイコンバッジ構成に変更。
      アイコンは12種のSVGをdata URIで ::before に指定（HTML変更なし）。
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ⑩ カテゴリ画像の高さを統一（2026-08-20）
      アレンジメント / デザイナーズアレンジ / 花束 の画像が縦長で
      胡蝶蘭・観葉植物より高さが約1.5倍あったため、
      aspect-ratio:21/10 ＋ object-fit:cover で中央トリミング。
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ⑪ カテゴリ名の文字サイズ拡大（2026-08-20）
      section.selCategorySec の h4（胡蝶蘭・観葉植物・アレンジメント・
      デザイナーズアレンジ・花束）を 16px → 20px に。
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ⑫ 価格と税込価格の余白調整（2026-08-20）
      .price / .withTax の line-height を 1.15 に、margin-top を
      6px / 2px に変更。文字間の空きを実測12.7pt→約5ptに縮小。
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ⑬ コラム / よくあるご質問 の横位置とボタンを統一（2026-08-20）
      ・.faq-section の padding:0 10px と .seo-box の margin:0 10px を解除し、
        他セクションと同じ左右18px（.inner のみ）に揃えた
      ・両セクションのボタンを .btnToList a の SP 仕様
        （幅100% / max480px / 高さ40px / 14px / #ff2456・2px border）に統一
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ⑭ ヘッダーのスクロール連動表示（2026-08-20）
      下スクロールで隠し、上スクロールで再表示。
      制御は /js_renew/sp_header.js（SP版からのみ読み込み）。
      ここでは top のトランジションのみ定義。
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ⑮ カテゴリ一覧のレイアウト調整（2026-08-20）
      ・カテゴリ間の余白 26px → 30px
      ・商品数（160 商品）をカテゴリ名の右端へ移動
        中間要素に display:contents を当てて .aWrap の
        フレックス項目に昇格させ、罫線は .priceLink の border-top に移設。
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ⑯ 余白の微調整（2026-08-20）
      ・カテゴリ間の余白 40px → 30px
      ・「その他のよくある質問はこちら」ボタン〜フッター間を圧縮
        （.faq-section の margin-bottom:100px と
          #container の padding-bottom:50px が重なっていた）
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ⑱ 2026-08-20
      ・FAQボタン〜フッター間の余白を 50px に
      ・PC右サイドのバナー8点をフッター直上に2列で表示（⑰参照）
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ⑲ 2026-08-20 レイアウト崩れ修正
      div.contentWrap の display:flex がSPで解除されていなかったため、
      #contentSide を表示した際に本文と横並びになっていた。
      SPでは display:block に上書きして縦積みに。
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ⑲ 2026-08-20
      ・フッターバナーから「送料無料」「早朝特別便オプション」を非表示
        （残り6点＝2列×3行）
      ・バナーの上下余白をいずれも 35px に統一
        上 = div#contentSide の margin-top
        下 = #container の padding-bottom
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ⑳ 2026-08-20
      ピンクボタン（.btnToList a / コラム一覧 / その他のよくある質問）の
      font-weight を 500 → 600 に。
      お祝いページの sp_congra.css と同一仕様に揃えるため。
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ㉑ 2026-08-20
      税抜価格と税込価格の行間を 2px → 5px に（お祝いページと統一）
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ㉒ 2026-08-21
      KVをSP専用画像（正方形1254x1254）に差し替えたため
      aspect-ratio を 950/380 → 1/1 に変更。
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ㉓ 2026-08-21
      見出しレベルを1段ずつ繰り上げ（h3→h2 / h4→h3 / h5→h4）。
      上位CSSは旧タグでセレクタを書いているため、
      新タグ向けの互換指定を追加した。
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ㉔ 2026-08-21
      KVとリード見出しの間隔を 28px → 12px に。
      「花秘書ではシーンに応じたお花を…」を 12px → 14px・中央揃えに。
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ㉕ 2026-08-21
      シーン一覧を並び替え＋既定6件表示に。
      アイコンの割り当てを li:nth-child(N) から
      シーン別クラス（.sc-open など）に変更したため、
      今後並び順を変えてもアイコンはずれない。
   ------------------------------------------------------------ */