@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* ===== ハンバーガーメニュー調整 ===== */
/* SP: 幅88vw→60vw、アニメーション0.45s→0.7s */
.p-spMenu__inner {
    width: 60vw !important;
    transition-duration: 0.7s !important;
}
.p-spMenu__overlay {
    transition-duration: 0.7s !important;
}
/* PC: 幅を固定 */
@media (min-width: 960px) {
    .p-spMenu__inner {
        width: 360px !important;
    }
}

/* ===== Food&Drink メニュー（Contactと間隔を空ける） ===== */
.c-gnav .menu-item-offset > a {
    margin-left: 1.5em;
}

/* ===== SP版フッター背景を暗く ===== */
@media (max-width: 959px) {
    .l-offer {
        background-color: rgba(0, 0, 0, 0.35) !important;
    }
}

/* ===== SP版ロゴを右に調整 ===== */
@media (max-width: 959px) {
    .l-header__logo {
        margin-left: 20px;
    }
}

/* ============================================================
   大画面での表示倍率調整（ブラウザ125%表示の見え方を100%で再現）
   2026-08-05 株式会社FUTSU
   ------------------------------------------------------------
   画面幅1440pxを超えたら、幅が広がるほど段階的にページ全体を拡大し、
   1800px以上で1.25倍（＝ブラウザ125%相当）に到達して打ち止めにする。
   ガーデンスケープ・工務店Naviと同じ振る舞いに揃えてある
   （あちらはrem方式で連続、こちらはSWELLのCSSが固定px指定のため
     zoomを2.5%刻みの10段階にして実質連続に見せている）。

   1440px以下は一切変化しない（＝これまでの見え方のまま）。
   注意: 今後vw/vh/svh単位を使うカスタムHTMLブロックを追加した場合は
   下の補正リストへの追加が必要（zoomはビューポート単位を補正しない）。
   ============================================================ */

@media screen and (min-width: 1440px) { :root { --z: 1.000; } }
@media screen and (min-width: 1476px) { :root { --z: 1.025; } }
@media screen and (min-width: 1512px) { :root { --z: 1.050; } }
@media screen and (min-width: 1548px) { :root { --z: 1.075; } }
@media screen and (min-width: 1584px) { :root { --z: 1.100; } }
@media screen and (min-width: 1620px) { :root { --z: 1.125; } }
@media screen and (min-width: 1656px) { :root { --z: 1.150; } }
@media screen and (min-width: 1692px) { :root { --z: 1.175; } }
@media screen and (min-width: 1728px) { :root { --z: 1.200; } }
@media screen and (min-width: 1764px) { :root { --z: 1.225; } }
@media screen and (min-width: 1800px) { :root { --z: 1.250; } }

@media screen and (min-width: 1441px) {

  :root {
    --zvw: calc(100vw / var(--z));
    --zvh: calc(100vh / var(--z));
    --zsvh: calc(100svh / var(--z));
    zoom: var(--z);
  }

  /* --- ビューポート単位(vw/vh/svh)はzoomで補正されないため個別に打ち消す ---
     .fv-fixed-container / .parallax-reveal-overlay / .inner-catch-text は
     本文中の<style>で定義されているため html 前置き + !important が必要 */

  html .fv-fixed-container {
    width: var(--zvw) !important;
    height: var(--zvh) !important;
    margin-left: calc(50% - var(--zvw) / 2) !important;
    margin-right: calc(50% - var(--zvw) / 2) !important;
  }

  html .parallax-reveal-overlay {
    width: var(--zvw) !important;
    height: calc(var(--zvh) * 0.85) !important;
    margin-left: calc(50% - var(--zvw) / 2) !important;
    margin-right: calc(50% - var(--zvw) / 2) !important;
  }

  html .inner-catch-text {
    font-size: clamp(1.8rem, calc(var(--zvw) * 0.04), 2.8rem) !important;
  }

  html #top_title_area {
    min-height: var(--zsvh) !important;
  }

  html .js-gallery-parallax {
    height: calc(var(--zvh) * 0.5) !important;
  }

  html .alignfull {
    left: calc(50% - var(--zvw) / 2) !important;
    width: var(--zvw) !important;
    max-width: var(--zvw) !important;
  }

  html .w-fixSide {
    max-height: calc(var(--zvh) - 16px - var(--swl-adminbarH, 0px) - var(--swl-fix_headerH, 0px)) !important;
  }
}

/* 管理バー表示中（ログイン中）は拡大しない。
   --z も 1 に戻すこと（--zvw/--zvh が拡大値のまま残ると逆に縮む） */
@media screen and (min-width: 1441px) {
  :root:has(body.admin-bar) { --z: 1; zoom: 1; }
}

/* ============================================================
   2026-09-01 定例指示の反映（株式会社FUTSU）
   出典: meetings/2026-09-01_定例_横山さん.md ／ 横山さん提供スクショ IMG_1139〜1147
   ここから下は「CSSだけで完結し、解釈の余地がない」4件のみ。
   本文の改行・見出しリンク等（DBの記事本文を触る項目）は含めない。
   ============================================================ */

/* --- 指示1: SPヘッダーのロゴとハンバーガーの左右余白を統一 ---
   実測(393px): ロゴ文字の左端=27.86px / ハンバーガーアイコンの右端=12px（16px不一致）
   → 余白の広い左(27.86px)に右を合わせる。PCは既に左右120pxで対称なのでSPのみ。 */
@media (max-width: 959px) {
  /* ボタン自身ではなくラッパー(.l-header__menuBtn)に付ける。
     .l-header__inner は justify-content:space-between のため、
     ラッパーを動かさないと位置が変わらない。 */
  .l-header .l-header__menuBtn,
  .l-fixHeader .l-header__menuBtn {
    margin-right: 16px;
  }
}

/* --- 指示5: SNSアイコンを Instagram → Facebook の順に ---
   当初 CSS の `order` で見た目だけ入れ替えていたが、**DOM順（＝読み上げ順・
   キーボードのフォーカス順）が変わらない**ため、functions.php 側で
   実際に要素を入れ替える方式に変更した（コードレビュー指摘・WCAG 1.3.2/2.4.3）。
   ハンバーガーメニュー内も同じ並びに揃えてある（2026-09-01 市岡さん承認）。
   ここにCSSは不要。 */

/* --- 指示8(9/1)→2026-09-02フィードバックで方針転換: マップは店舗情報セクションに密着 ---
   9/2 横山さん:「マップが上の住所などの情報から遠い。店舗情報のセクションと分かるようにしたい。
   マップとフッターはあんまり余白開けない方が良い」
   → 上側: 店舗情報テキスト(u-mb-50=PC80px/SP78px)の下余白を
     「Store information見出し→テキスト」の余白と同じ値（実測 PC 48px / SP 38px）に詰める。
     u-mb-50 は !important 付きのため打ち消しも !important。
   → 下側: 9/1に足した 44.8/37.7px を 0 に戻す（公開時の元の状態） */
.page-id-13 .post_content p.u-mb-50:has(+ .swell-block-fullWide iframe[src*="google.com/maps"]),
.page-id-13 .post_content p.u-mb-50:has(+ .swell-block-fullWide iframe[data-src*="google.com/maps"]) {
  margin-bottom: 48px !important;
}
@media (max-width: 959px) {
  .page-id-13 .post_content p.u-mb-50:has(+ .swell-block-fullWide iframe[src*="google.com/maps"]),
  .page-id-13 .post_content p.u-mb-50:has(+ .swell-block-fullWide iframe[data-src*="google.com/maps"]) {
    margin-bottom: 38px !important;
  }
}
.page-id-13 .l-article .swell-block-fullWide:has(iframe[src*="google.com/maps"]),
.page-id-13 .l-article .swell-block-fullWide:has(iframe[data-src*="google.com/maps"]) {
  margin-bottom: 0 !important;
}

/* --- 指示10: グローバルナビの下線 ---
   (1) 現在表示中のページの下線を消す（ホバーしたときだけ出す）
       SWELL既定: .c-gnav > li:hover > a::after, .c-gnav > .-current > a::after { transform: scaleX(1) }
   (2) 文字と線の間隔を半分に: 実測 文字下端43px→線上端70px＝27px ⇒ 13.5px
       （既定は top:70px / bottom:0 のため top を解除して bottom で指定する） */
.c-gnav > li.-current > a::after {
  transform: scaleX(0) !important;
}
.c-gnav > li.-current:hover > a::after,
.c-gnav > li.-current > a:hover::after {
  transform: scaleX(1) !important;
}
.c-gnav > li > a::after {
  top: auto !important;
  bottom: 13.5px !important;
}

/* --- 指示14: TOPのセクションが横からスライドインしてスクロールに追いつかない ---
   対象＝「Kobayashi Plants Store」「Garden Design」の2ブロック（blocks-animation の
   `animated fadeInLeft slow`）。ページ内の他のブロックはすべて `fadeIn` を使っているので、
   横移動をやめて**同じ fadeIn に揃える**（横山さん「上と同じアニメーションこれぐらいでいい」）。
   キーフレーム fadeIn はプラグイン側に既にあるため名前の差し替えだけで済む。 */
/* ※サイト全体に効くと将来追加するブロックの動きまで勝手に変わる
     （コードレビュー指摘）。指摘の対象はTOPの2ブロックなので page-id-8 に限定する。 */
.page-id-8 .animated.fadeInLeft {
  animation-name: fadeIn !important;
}
/* この2ブロックだけ `slow`(2s) が付いており、ページ内の他の fadeIn は 1s。
   「上と同じ」に揃えるため尺も 1s にする（＝スクロール時にすぐ出そろう）。 */
.page-id-8 .animated.fadeInLeft.slow {
  animation-duration: 1s !important;
}

/* --- 指示①の続き（PC・市岡さん承認2026-09-01）: PCヘッダーも左右余白を揃える ---
   実測(1440px): ロゴ文字の左端120px / ハンバーガーアイコンの右端132px＝12pxのズレ。
   SPと同じく「広い方に合わせる」＝ロゴを12px右へ寄せて左右とも132pxにする。
   （ボタンの箱基準では元から左右120pxで対称。ズレるのはアイコンの実体基準） */
@media (min-width: 960px) {
  .l-header .l-header__logo,
  .l-fixHeader .l-header__logo {
    margin-left: 12px;
  }
}

/* --- 指示⑬: 「上に戻る」を廃止し、ヘッダーを画面上部に固定（SP） ---
   TOPは SWELL の -transparent により既に fixed ＋ スクロールで白背景。
   下層は position:absolute でスクロールすると消えるので、TOPと同じ挙動に揃える。
   .is-scrolled の付与は functions.php のスクリプト（FVの下端が基準）。
   色は TOP のスクロール後の実測値に合わせている（背景 #fdfdfd / 文字 #333）。 */
@media (max-width: 959px) {
  /* 右下の「上に戻る」ボタンを廃止（PCは従来どおり残す） */
  #pagetop {
    display: none !important;
  }

  /* 下層ヘッダーを固定。TOP(.-transparent)は SWELL 標準のままにする。
     【重要】SWELLの「追加CSS」(DB・<style id="swell_custom_css">)に
       .page-id-13 #header { position:absolute !important; background-color:transparent !important; }
     という個別指定が入っており(1,1,0)!important で勝ってくる。
     こちらは #header を含めた (1,2,1)!important で上書きする。
     ※本来は追加CSS側の absolute を fixed に直すのが筋。管理画面に入れる回に整理する。 */
  #header.l-header:not(.-transparent) {
    position: fixed !important;
    /* ログイン中は管理バーの高さぶん下げる（SWELL標準と同じ変数を使う）。
       未ログイン時は 0px。コードレビュー指摘。 */
    top: var(--swl-adminbarH, 0px);
    left: 0;
    width: 100%;
    /* z-index はSWELLが全ページで 100 を付けているため指定しない（実測確認済み） */
  }

  /* FVを抜けたら白背景＋濃い文字色に切り替える */
  #header.l-header:not(.-transparent).is-scrolled {
    background-color: #fdfdfd !important;
    transition: background-color 0.3s ease;
  }
  .l-header:not(.-transparent).is-scrolled .l-header__logo,
  .l-header:not(.-transparent).is-scrolled .l-header__logo a,
  .l-header:not(.-transparent).is-scrolled .c-iconBtn {
    color: #333;
  }
}

/* --- 指示⑥のうち「空の黒帯」だけは画面幅に関係なく消す ---
   div.c-widget__title.-spmenu が本文空（空白文字のみ）のまま
   背景#333・高さ約16pxの帯として描画されていた＝明確なバグ。
   **PC(960px以上)でも同じハンバーガーメニューを開けるため**（ヘッダー右端に
   メニューボタンがある）、メディアクエリの外に置いてSP/PC共通で消す。
   :empty は空白文字があるとマッチしないのでCSSで一律に隠し、
   将来ウィジェット見出しに文字が入ったら functions.php 側のJSが表示に戻す。
   （JSが動かなくても黒帯は出ない側に倒してある） */
.p-spMenu .c-widget__title.-spmenu {
  display: none;
}

/* ============================================================
   指示⑥: SPハンバーガーメニューのデザイン刷新
   出典: meetings/2026-09-01_定例_横山さん.md（「寂しい／デザインされてない感じ」
         ＝対象は市岡さん確認でハンバーガーメニューに確定）
   方向性: projects/2026-05_小林植物店_マニュアル兼公開準備/assets/research/board.md
     Fujiya1935「罫線を全廃して余白でリズム」
     ⊕ CASA stella「右ドロワー・パネルを広く・下部に店舗情報」
     ⊕ BLUE FARM「CTA→SNSの順で下部を締める」
   市岡さん決定(2026-09-01): 右ドロワー案 ／ 完全モノトーン(#333) ／ 和文ラベルは入れない
   ============================================================ */
/* 2026-09-01 市岡さん指示で **PCにも同じデザインを適用**する。
   PCでもヘッダー右端のボタンから同じハンバーガーメニューが開くため
   （実測: 1440px で x=1272 にメニューボタンあり）。
   画面幅で変えるのはパネル幅だけ。PCは子テーマ既存の 360px 指定を活かす。 */
@media (max-width: 959px) {
  .p-spMenu__inner {
    width: 82vw !important;
  }
}

.p-spMenu__inner {
  background-color: #fdfdfd;
}

.p-spMenu__body {
    padding: 8px 28px 40px !important;
  }

  /* --- ナビ: 罫線とchevronを全廃し、縦の余白だけでリズムを作る --- */
  .p-spMenu__nav {
    margin: 0 !important;
    padding: 0 !important;
  }
  .p-spMenu .c-spnav {
    display: flex;
    flex-direction: column;
  }
  .p-spMenu .c-spnav > li > a {
    border: none !important;
    padding: 18px 0 !important;
    font-size: 16px;
    letter-spacing: 0.08em;
    color: #333;
    line-height: 1.5;
  }
  /* chevron（::before）を消す */
  .p-spMenu .c-spnav > li > a::before {
    content: none !important;
  }

  /* --- Online Shop を最後に回し、唯一の塗りボタンにする（下部の締め） --- */
  .p-spMenu .c-spnav > li.menu-item-48 {
    order: 1;
    margin-top: 28px;
  }
  .p-spMenu .c-spnav > li.menu-item-48 > a {
    background-color: #333;
    color: #fdfdfd !important;
    text-align: center;
    padding: 16px 0 !important;
    letter-spacing: 0.12em;
  }

  /* --- SNS: 塗りボタンとの間隔を取る（アイコンは既存の墨色のまま＝モノトーン） --- */
  .p-spMenu .p-spMenu__sns {
    padding: 28px 0 0 !important;
  }

  /* --- 下部の店舗情報（functions.php がJSで追加） --- */
  .p-spMenu .p-spMenu__store {
    margin-top: 32px;
    font-size: 11px;
    line-height: 2;
    letter-spacing: 0.04em;
    color: #8a8a8a;
    text-align: center;
  }
  .p-spMenu .p-spMenu__store b {
    display: block;
    font-weight: 400;
    font-size: 13px;
    color: #333;
    margin-bottom: 2px;
  }

  /* --- モーション: 開いたときに項目が60msずつ遅れてフェード（控えめ） --- */
  .p-spMenu.is-opened .c-spnav > li,
  .p-spMenu.is-opened .p-spMenu__sns,
  .p-spMenu.is-opened .p-spMenu__store {
    animation: kbMenuFade 0.5s ease both;
  }
  .p-spMenu.is-opened .c-spnav > li:nth-child(1) { animation-delay: 0.20s; }
  .p-spMenu.is-opened .c-spnav > li:nth-child(2) { animation-delay: 0.26s; }
  .p-spMenu.is-opened .c-spnav > li:nth-child(4) { animation-delay: 0.32s; }
  .p-spMenu.is-opened .c-spnav > li:nth-child(5) { animation-delay: 0.38s; }
  .p-spMenu.is-opened .c-spnav > li.menu-item-48 { animation-delay: 0.44s; }
  .p-spMenu.is-opened .p-spMenu__sns   { animation-delay: 0.50s; }
  .p-spMenu.is-opened .p-spMenu__store { animation-delay: 0.56s; }

  @keyframes kbMenuFade {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
  }
@media (prefers-reduced-motion: reduce) {
  .p-spMenu.is-opened .c-spnav > li,
  .p-spMenu.is-opened .p-spMenu__sns,
  .p-spMenu.is-opened .p-spMenu__store {
    animation: none;
  }
}

/* --- 指示⑥ 補正1: 下部の並びを「ナビ → SNS → 店舗情報」に固定 ---
   SNSは functions.php が DOMContentLoaded で、店舗情報は即時実行で追加するため
   DOM順が入れ替わる。JSの実行順に依存せずCSSで並びを確定させる。 */
.p-spMenu__body {
  display: flex;
  flex-direction: column;
}
.p-spMenu__nav   { order: 1; }
.p-spMenu__sns   { order: 2; }
.p-spMenu__store { order: 3; }

/* --- 指示⑥ 補正2: メニューを開いている間は「Online shop」追従タブを隠す ---
   実体は a.c-side-cta-global（position:fixed / z-index:999999）。
   ※上の表示倍率ブロックにある .w-fixSide は別物なので混同しない。
   z-index が非常に高くメニューの Online Shop ボタンに重なるため、開いている間だけ隠す。 */
body:has(.p-spMenu.is-opened) .c-side-cta-global {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

/* --- SP専用改行ユーティリティ（指示②③④⑦⑪⑫の本文修正で使う） ---
   本文はDBのブロックに入っており、PC向けの <br> が既に置かれている。
   PCの見え方を1pxも変えずにSPだけ改行を足すため、<br class="u-sp-br"> を使い
   PC(960px以上)では非表示にする。 */
@media (min-width: 960px) {
  .u-sp-br { display: none; }
}

/* --- 指示⑥ 補正3: 横向き（画面が低いとき）の収まり ---
   実測: iPhone SE横(568×320) / iPhone 12横(750×340) では中身の下端が約535pxとなり
   画面からはみ出す。スクロール容器は **.p-spMenu__body**（SWELL標準で
   `height:100%; overflow-y:scroll`）なので**到達自体はできる**が、
   スクロール量が大きいので画面が低いときは余白を詰めて収まりを良くする。
   （※ .p-spMenu__inner に overflow を付ける必要はない。inner は
     scrollHeight==clientHeight で常にスクロールしない） */
@media (max-height: 560px) {
  .p-spMenu__body {
    padding: 4px 24px 24px !important;
  }
  .p-spMenu .c-spnav > li > a {
    padding: 10px 0 !important;
  }
  .p-spMenu .c-spnav > li.menu-item-48 {
    margin-top: 16px;
  }
  .p-spMenu .c-spnav > li.menu-item-48 > a {
    padding: 12px 0 !important;
  }
  .p-spMenu .p-spMenu__sns {
    padding: 16px 0 0 !important;
  }
  .p-spMenu .p-spMenu__store {
    margin-top: 16px;
  }
}

/* ============================================================
   2026-09-02 横山さんフィードバックの反映（株式会社FUTSU）
   ============================================================ */

/* --- パンくずは現在ページ名のみ表示 ---
   「パンくずのアイコンとホームは必要がなく、ページ名のみのパンくずの方が良い」
   （例示は Kobayashi Plants Store ページ・全下層に適用）。
   区切り記号は ::before が実測で content:none だったため、先頭項目の非表示だけでよい */
.p-breadcrumb__item:not(:last-child) {
  display: none;
}

/* --- TOPのFVキャッチを「見えている画面」の中央に ---
   「FVのテキストが画面の中央より下な気がする。もう少し上げて真ん中に」。
   原因: FV容器(.fv-fixed-container・DB本文内<style>定義)が height:100vh 固定のため、
   スマホはアドレスバー等のUI分だけ実際に見える領域(svh)が狭く、
   100vh基準の中央＝見た目では中央より下に落ちる。SPのみ svh 基準で中央化する
   （svh非対応の古い環境は1行目の100vhにフォールバック）。
   ※1441px以上の表示倍率ブロックとは干渉しない（あちらはPCのみ・こちらはSPのみ） */
@media (max-width: 959px) {
  html .fv-fixed-container {
    height: 100vh;
    height: 100svh;
  }

  /* もう1つの原因: テキスト群の手前に空のカラムブロック（スペーサー・実測51.8px＋
     下余白31.2px）が入っており、フレックス中央揃えの計算にこの空白が含まれるため
     可視テキストの中心が画面中央より約26px下がる。SPのみ空白を畳んで厳密に中央へ。
     （先頭の空ブロックは旧クラス wp-block-columns、本文ブロックは swell-block-columns で
       クラス体系が異なるため取り違えない。PCは pc_only 側が表示されるので影響なし） */
  .fv-fixed-container .p-blogParts > .wp-block-columns.sp_only {
    display: none;
  }
  .fv-fixed-container .p-blogParts > .swell-block-columns.sp_only {
    margin-bottom: 0;
  }
}

/* --- フッターの店名と住所の間隔を詰める ---
   「フッターの小林植物店と、下の住所の幅があり過ぎてて、バランス悪い」。
   実測: 店名<p>の margin-bottom が PC 32px / SP 28px（+行送りで見た目35px）。
   住所ブロックに寄り添う値まで詰める（フッターパーツ=ブログパーツ119・全ページ共通） */
.l-offer .swell-block-fullWide__inner > p:first-of-type {
  margin-bottom: 16px;
}
@media (max-width: 959px) {
  .l-offer .swell-block-fullWide__inner > p:first-of-type {
    margin-bottom: 12px;
  }
}

/* --- TOPの左寄せ/右寄せリード文の「外側の幅」を揃える ---
   「左に寄せたテキストと右に寄せたテキストの外側の幅が合ってない。幅を合わせて」。
   実測(4倍解像度のインク走査): 段落ボックスは左右とも15.59pxで対称だが、
   右寄せ行は行末が「、」「。」（字面が左寄りで右側0.67em空く）＋行末letter-spacing 1px のため
   見た目の右余白が26.25px＝左（唯の字面17.25px）より8.75px広い。
   負のmargin-rightはwidth明示でover-constrained破棄され効かない（実証済み）ため、
   幅を約物ぶん広げて行末インクをコンテナ右端に載せる。
   検証済み: 320〜599pxで残差1px未満・横スクロールなし。検証で600〜959px帯にも
   同種の非対称（768pxで差10px）が残っていたため 959px まで拡大（768で再実測済み）。
   960px以上のPC組版は余白が大きく目立たないため触らない。
   TOPの右寄せ段落はこの1つだけ（実測確認済み） */
@media (max-width: 959px) {
  .page-id-8 .post_content > p.has-text-align-right {
    width: calc(100% + 0.57em);
  }
}

/* --- Contactフォームのラベル「お問い合わせ内容を／ご記入ください。」のSP改行を解除 ---
   CF7フォームテンプレート(ID390)内のPC向け<br />が原因（post_contentではないためu-sp-br方式が使えない）。
   実測: SPのth幅358.8pxに対し1行幅242.3px＝<br>なしで余裕で1行に収まる。
   PCはth幅260.4px＜1行幅276.1pxで<br>が必要なので、SPだけ無効化する */
@media (max-width: 959px) {
  .custom-contact-form th br {
    display: none;
  }
}

/* --- 店舗情報の住所行が375px幅端末で「3-／67」と番地の途中で折れる対策 ---
   実測: 29字＋インラインletter-spacing:1.4px（字送り約40px加算）でコンテナに約3px足りない。
   380px以下のみ字間をわずかに詰めて1行に収める（390px以上は現状のまま変化なし） */
@media (max-width: 380px) {
  .page-id-13 .post_content p.u-mb-50:has(+ .swell-block-fullWide iframe[src*="google.com/maps"]),
  .page-id-13 .post_content p.u-mb-50:has(+ .swell-block-fullWide iframe[data-src*="google.com/maps"]) {
    letter-spacing: 0.5px !important;
  }
}

/* --- 指示③の補正: 見出しをリンクにしたら青くなった問題 ---
   TOPの「Kobayashi Plants Store」「Garden Design」を <a> で包んだ結果、
   SWELLのリンク色 rgb(17,118,212) が <a> と中の <span> に乗ってしまった
   （親の <p> は白 rgb(255,255,255) のまま）。
   見た目はリンクにする前と完全に同じに戻す。 */
.common-lancelot.kasen > a,
.common-lancelot.kasen > a > span {
  color: inherit;
  text-decoration: none;
}

/* --- TOP「Kobayashi Plants Store」見出しがSPで2行になるのを1行に ---
   対象は TOP(page-id-8) の当該見出しのみ。Garden Design は短いので触らない。
   PC(960px以上)は元から1行のため変更しない。 */
@media (max-width: 959px) {
  .page-id-8 p.common-lancelot.kasen:has(> a[href*="kobayashiplantsstore"]) {
    white-space: nowrap;
    max-width: none;
  }
  .page-id-8 p.common-lancelot.kasen:has(> a[href*="kobayashiplantsstore"]) > a,
  .page-id-8 p.common-lancelot.kasen:has(> a[href*="kobayashiplantsstore"]) > a > span {
    white-space: nowrap;
  }
}