@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}

/* ===== 書体（サブセット） ===== */
@font-face {
  font-family: 'Zen Maru Gothic';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/font/zen-f5b29e34.woff2) format('woff2');
  unicode-range: U+2c, U+30-39, U+67, U+d7, U+3001-3002, U+301c, U+3042, U+3044, U+3046, U+3048, U+304a-306b, U+306e-307a, U+307e-307f, U+3081-3082, U+3084, U+3088-308c, U+308f, U+3092-3094, U+3099-309a, U+30a2, U+30a4, U+30ab-30ac, U+30af-30b0, U+30b7-30bc, U+30c3, U+30c6-30c9, U+30cd, U+30cf-30da, U+30df, U+30e2, U+30e9-30ec, U+30f3, U+30fb-30fc, U+4e00, U+4e26, U+4e88, U+4eba, U+4f1d, U+4f7f, U+5009, U+5024, U+5150, U+5165, U+5168, U+5186, U+5236, U+523a, U+524d, U+5343, U+5370-5371, U+539f, U+53d6, U+53f0, U+540c, U+5411, U+5473, U+54c1, U+55b6, U+5712, U+571f, U+5728, U+5730, U+5834, U+5927, U+5b66, U+5b8c, U+5b9f, U+5bb3, U+5bb6, U+5c0f, U+5c11, U+5c71, U+5e02, U+5e0c, U+5e30, U+5e74, U+5e7c, U+5f62, U+610f, U+6240, U+6255, U+6301, U+63a2, U+6458, U+652f, U+653e, U+6577, U+6599, U+65b9, U+65cf, U+65e5, U+6642, U+6708, U+6728, U+672c, U+6765, U+696d, U+6bb5, U+6bd4, U+6c17, U+6c42, U+706b, U+7121, U+72e9, U+73fe, U+751f, U+7523, U+7528, U+7551, U+76ee, U+770c, U+77e5, U+7a2e, U+7d04, U+7d44, U+7f6e, U+80b2, U+8272, U+83dc, U+8449, U+85ac, U+866b, U+884c, U+898b, U+8a2d, U+8eca, U+8fb2, U+8fd1, U+9055, U+9078, U+91ce-91cf, U+91d1, U+91dd, U+958b, U+9593, U+9632, U+9650, U+9664, U+967a, U+96fb, U+984c, U+9858, U+985e, U+98df, U+99d0, U+ff08-ff09, U+ff0f;
}

@font-face {
  font-family: 'Zen Kaku Gothic New';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/font/zen-adc6e103.woff2) format('woff2');
  unicode-range: U+2c, U+30-39, U+67, U+d7, U+3001-3002, U+301c, U+3042, U+3044, U+3046, U+3048, U+304a-306b, U+306e-307a, U+307e-307f, U+3081-3082, U+3084, U+3088-308c, U+308f, U+3092-3094, U+3099-309a, U+30a2, U+30a4, U+30ab-30ac, U+30af-30b0, U+30b7-30bc, U+30c3, U+30c6-30c9, U+30cd, U+30cf-30da, U+30df, U+30e2, U+30e9-30ec, U+30f3, U+30fb-30fc, U+4e00, U+4e26, U+4e88, U+4eba, U+4f1d, U+4f7f, U+5009, U+5024, U+5150, U+5165, U+5168, U+5186, U+5236, U+523a, U+524d, U+5343, U+5370-5371, U+539f, U+53d6, U+53f0, U+540c, U+5411, U+5473, U+54c1, U+55b6, U+5712, U+571f, U+5728, U+5730, U+5834, U+5927, U+5b66, U+5b8c, U+5b9f, U+5bb3, U+5bb6, U+5c0f, U+5c11, U+5c71, U+5e02, U+5e0c, U+5e30, U+5e74, U+5e7c, U+5f62, U+610f, U+6240, U+6255, U+6301, U+63a2, U+6458, U+652f, U+653e, U+6577, U+6599, U+65b9, U+65cf, U+65e5, U+6642, U+6708, U+6728, U+672c, U+6765, U+696d, U+6bb5, U+6bd4, U+6c17, U+6c42, U+706b, U+7121, U+72e9, U+73fe, U+751f, U+7523, U+7528, U+7551, U+76ee, U+770c, U+77e5, U+7a2e, U+7d04, U+7d44, U+7f6e, U+80b2, U+8272, U+83dc, U+8449, U+85ac, U+866b, U+884c, U+898b, U+8a2d, U+8eca, U+8fb2, U+8fd1, U+9055, U+9078, U+91ce-91cf, U+91d1, U+91dd, U+958b, U+9593, U+9632, U+9650, U+9664, U+967a, U+96fb, U+984c, U+9858, U+985e, U+98df, U+99d0, U+ff08-ff09, U+ff0f;
}
@font-face {
  font-family: 'Zen Kaku Gothic New';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/font/zen-e391951c.woff2) format('woff2');
  unicode-range: U+2c, U+30-39, U+67, U+d7, U+3001-3002, U+301c, U+3042, U+3044, U+3046, U+3048, U+304a-306b, U+306e-307a, U+307e-307f, U+3081-3082, U+3084, U+3088-308c, U+308f, U+3092-3094, U+3099-309a, U+30a2, U+30a4, U+30ab-30ac, U+30af-30b0, U+30b7-30bc, U+30c3, U+30c6-30c9, U+30cd, U+30cf-30da, U+30df, U+30e2, U+30e9-30ec, U+30f3, U+30fb-30fc, U+4e00, U+4e26, U+4e88, U+4eba, U+4f1d, U+4f7f, U+5009, U+5024, U+5150, U+5165, U+5168, U+5186, U+5236, U+523a, U+524d, U+5343, U+5370-5371, U+539f, U+53d6, U+53f0, U+540c, U+5411, U+5473, U+54c1, U+55b6, U+5712, U+571f, U+5728, U+5730, U+5834, U+5927, U+5b66, U+5b8c, U+5b9f, U+5bb3, U+5bb6, U+5c0f, U+5c11, U+5c71, U+5e02, U+5e0c, U+5e30, U+5e74, U+5e7c, U+5f62, U+610f, U+6240, U+6255, U+6301, U+63a2, U+6458, U+652f, U+653e, U+6577, U+6599, U+65b9, U+65cf, U+65e5, U+6642, U+6708, U+6728, U+672c, U+6765, U+696d, U+6bb5, U+6bd4, U+6c17, U+6c42, U+706b, U+7121, U+72e9, U+73fe, U+751f, U+7523, U+7528, U+7551, U+76ee, U+770c, U+77e5, U+7a2e, U+7d04, U+7d44, U+7f6e, U+80b2, U+8272, U+83dc, U+8449, U+85ac, U+866b, U+884c, U+898b, U+8a2d, U+8eca, U+8fb2, U+8fd1, U+9055, U+9078, U+91ce-91cf, U+91d1, U+91dd, U+958b, U+9593, U+9632, U+9650, U+9664, U+967a, U+96fb, U+984c, U+9858, U+985e, U+98df, U+99d0, U+ff08-ff09, U+ff0f;
}


/* ===== 農園トップ（モック移植 2026-08-19） ===== */

/* ── 方針 ─────────────────────────────────────────────
   1. トップは「スクロールさせない」。要点は最初の画面に置き、
      詳細はタブでその場で入れ替える（ページ遷移なし）。
   2. 写真は自動でフェード切替（参考サイトのbxSliderに相当する見せ方）。
   3. JavaScript・外部ライブラリを使わない（引き継ぎ負債にしない）。
   ───────────────────────────────────────────────── */
:root{
  /* ブラウザ側の「強制ダークモード」で配色が反転するのを止める。
     写真とクリーム色の地を前提にした配色なので、勝手に反転されると別物になる。 */
  color-scheme:only light;
  --ink:#1b1620; --sub:#5c5566; --line:#d8d2e0;
  --plum:#4a2f6b; --plum-d:#3a2456; --gold:#e8d98f; --cream:#faf8fc; --leaf:#4f6b46;
  --wrap:1180px;
}

html{-webkit-text-size-adjust:100%}
.farm-front{font-family:"BIZ UDPGothic","Yu Gothic UI","Hiragino Sans","Meiryo",sans-serif;
     color:var(--ink);background:#fff;line-height:1.7;font-size:16px}
.farm-front img{max-width:100%;height:auto;display:block}
.farm-front .wrap{width:min(100% - 40px,var(--wrap));margin-inline:auto}

/* ── ヘッダー ── */
.farm-front header{border-bottom:1px solid var(--line);background:#fff;position:sticky;top:0;z-index:20}
.hrow{display:flex;align-items:center;gap:16px;padding:10px 0;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand img{width:40px;height:40px;border-radius:50%;object-fit:cover}
.brand b{font-size:15px;letter-spacing:.01em;line-height:1.35}
.hcontact{display:flex;align-items:center;gap:14px;font-size:14px;color:var(--sub);white-space:nowrap}
.hcontact .tel{font-weight:bold;color:var(--ink);font-size:17px}
.hbtn{background:var(--plum);color:#fff;text-decoration:none;padding:9px 18px;border-radius:6px;
      font-size:14px;font-weight:bold}

/* ── ヒーロー（フェード切替） ── */
/* 1枚目を背景に固定して敷く。アニメーションはopacity:0から始まるため、
   これが無いと読み込み直後の約0.6秒だけ写真が出ず暗転する。
   【2026-08-27】背景画像のURLは page-farm-front.php 側からインラインで出す。
     CSSに書くとファイル名が変わらないかぎりブラウザが古い画像を持ち続け、
     差し替えても反映されない（アイコンで実際に起きた）。PHPから出せば
     farm_img() が更新時刻を付ける。 */
.hero{position:relative;height:min(62vh,520px);overflow:hidden;
      background:var(--plum-d) center/cover no-repeat}
.hero .sl{position:absolute;inset:0;background-size:cover;background-position:center;
          opacity:0;animation:fade 21s infinite}
.hero .s1{}
.hero .s2{animation-delay:7s}
.hero .s3{animation-delay:14s}
/* 各スライドは7秒（=33.3%）ずらし。前の1枚は、次の1枚が不透明になりきる
   3%＋33.3%＝36.3%まで保持してから消す。旧値（30%で消し始める）は谷間ができ、
   2枚目→3枚目の切替時に背景の1枚目が約0.5秒露出していた（2026-08-31）。 */
@keyframes fade{0%{opacity:0}3%{opacity:1}36.5%{opacity:1}40%{opacity:0}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.hero .sl{animation:none}.hero .s1{opacity:1}}
.hero::after{content:"";position:absolute;inset:0;
             background:linear-gradient(90deg,rgba(35,24,48,.74) 0%,rgba(35,24,48,.42) 58%,rgba(35,24,48,.10) 100%)}
.hero-in{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:center;color:#fff}
.hero h1{font-size:clamp(1.5rem,2.6vw,2.05rem);line-height:1.5;letter-spacing:.01em;max-width:26em}
/* 折り返しは文節の境だけに（375pxで「ぶ。」だけが2行目に落ちていた） */
.hero h1 .nb{display:inline-block}
.hero p{margin-top:10px;font-size:15px;color:#e7dff0;max-width:34em}
.facts{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.facts span{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.34);
            border-radius:999px;padding:7px 15px;font-size:14px}
.facts b{color:var(--gold)}

/* ── タブ（ページ遷移なしで切り替え。JSなし） ──
   【2026-09-01】お知らせをタブから出して4枚に（料金・畑のこと・野菜市・アクセス）。
   4枚ならモバイル375pxに全部収まり、横スクロールが無くなる。
   お知らせはタブ直後の .news-solo（鮮度連動枠・テンプレ側で30日判定）へ。 */
.tabs{background:var(--cream);border-bottom:1px solid var(--line)}
.news-solo .panel{display:block;padding:30px 0 36px}
.tabs input{position:absolute;opacity:0;pointer-events:none}
.tablist{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.tablist::-webkit-scrollbar{display:none}
.tablist label{flex:1 0 auto;text-align:center;padding:15px 20px;font-size:15px;font-weight:bold;
               color:var(--sub);cursor:pointer;border-bottom:3px solid transparent;white-space:nowrap}
.tablist label:hover{color:var(--plum)}
.panel{display:none;padding:28px 0 34px}
.panel-in{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(20px,3vw,44px);align-items:center}
.panel h2{font-size:clamp(1.25rem,1.9vw,1.55rem);margin-bottom:10px;line-height:1.5}
.panel .note{color:var(--sub);font-size:14px;margin-top:12px}
.panel img{border-radius:10px;width:100%}
#t1:checked~.wrap [for=t1],#t3:checked~.wrap [for=t3],
#t4:checked~.wrap [for=t4], #t5:checked~.wrap [for=t5]{color:var(--plum);border-bottom-color:var(--plum)}
#t1:checked~.panels #p1,#t3:checked~.panels #p3,
#t4:checked~.panels #p4, #t5:checked~.panels #p5{display:block}
/* 2026-10-02 ラジオは見えないので、キーボードの居場所はタブの文字側に出す（写真の切り替えと同じ考え方） */
#t1:focus-visible~.wrap [for=t1],#t3:focus-visible~.wrap [for=t3],
#t4:focus-visible~.wrap [for=t4],#t5:focus-visible~.wrap [for=t5]{outline:3px solid var(--plum);outline-offset:-3px}

.rows{border-top:1px solid var(--line)}
.row{display:flex;justify-content:space-between;gap:14px;padding:11px 2px;border-bottom:1px solid var(--line)}
.row span{color:var(--plum);font-weight:bold;white-space:nowrap}
.gift{background:#f1f5ee;border-left:4px solid var(--leaf);padding:11px 14px;margin-top:14px;font-size:14px}
.farm-front ul.checks{list-style:none;margin-top:6px}
.farm-front ul.checks li{padding:9px 2px 9px 22px;border-bottom:1px solid var(--line);position:relative;font-size:15px}
.farm-front ul.checks li::before{content:"";position:absolute;left:4px;top:17px;width:8px;height:8px;
                     border-radius:50%;background:var(--leaf)}

.farm-front footer{background:var(--plum-d);color:#e7dff0;padding:26px 0;font-size:14px}
.frow{display:flex;flex-wrap:wrap;gap:10px 28px;align-items:center;justify-content:space-between}
.line-btn{display:inline-block;background:#06C755;color:#fff;text-decoration:none;
          padding:9px 18px;border-radius:6px;font-weight:bold}

@media(max-width:760px){
.hcontact .tel, .hcontact .hours{display:none}
.hero{height:auto;min-height:430px}
.hero-in{padding:30px 0}
.panel-in{grid-template-columns:1fr}
/* 4枚を全幅に均等配置（5枚時代の flex:0 0 auto ＋横スクロールをやめた・2026-09-01） */
.tablist label{flex:1 0 auto;padding:13px 4px;font-size:13.5px}
}


/* ── 書体（2026-08-18）─────────────────────────────
   根拠：クライアントが参考に挙げた ex-farm.net が
   Zen Kaku Gothic New / Zen Maru Gothic を実採用している（公開HTMLで確認）。
   BIZ UDPGothicは自治体・配布文書向けのUD書体で、母に渡す紙には最適だが
   サイトでは「配布資料」の顔になる。ここで切り替える。
   ※このモックは233字にサブセット化して埋め込み（138KB）。
     本番は投稿本文に任意の文字が来るため、Google Fontsの通常配信を使う。
   ───────────────────────────────────────────── */






.farm-front{font-family:"Zen Kaku Gothic New","Noto Sans JP","Yu Gothic UI",sans-serif;}
.farm-front h1, .farm-front h2, .brand b, .facts, .tablist label, .row span, .hbtn, .line-btn{
  font-family:"Zen Maru Gothic","Zen Kaku Gothic New","Noto Sans JP",sans-serif;}
.farm-front h1{font-weight:700;letter-spacing:.02em}
.farm-front h2{font-weight:700}
.tablist label{font-weight:700}


.sns{border-top:1px solid var(--line);margin-top:22px;padding-top:20px}
.sns h3{font-size:1.05rem;margin-bottom:4px}
.sns .lead{color:var(--sub);font-size:14px;margin-bottom:14px}
.sns-row{display:flex;flex-wrap:wrap;gap:12px;align-items:stretch}

/* 各SNSは「アイコン＋名前＋ひとこと」を1枚のカードに。
   アイコンだけだと何のリンクか分からない人が必ずいる。 */
.sns-card{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink);
          border:1px solid var(--line);border-radius:10px;padding:11px 15px;background:#fff;
          min-width:210px;flex:1 1 210px}
.sns-card:hover{border-color:var(--plum);background:var(--cream)}
.sns-card .sns-mark{width:26px;height:26px;flex:none;border:0;border-radius:0;box-shadow:none}
.sns-card b{display:block;font-size:15px;line-height:1.35}
.sns-card small{display:block;color:var(--sub);font-size:12.5px;line-height:1.4}

/* LINEの出し分け。既定＝PC（QRを見せる）／760px以下＝スマホ（ボタン） */
.line-pc{display:flex;align-items:center;gap:15px;border:1px solid var(--line);
         border-radius:10px;padding:13px 15px;background:#fff;flex:1 1 300px;min-width:300px}
.line-pc img{width:96px;height:96px;flex:none;border-radius:6px}
.line-pc .txt b{display:block;font-size:15px}
.line-pc .txt small{display:block;color:var(--sub);font-size:12.5px;margin-top:3px;line-height:1.5}
.line-pc .txt a{font-size:13px;color:var(--plum);word-break:break-all}
.line-sp{display:none}
.line-sp a{display:flex;align-items:center;justify-content:center;gap:9px;
           background:#06C755;color:#fff;text-decoration:none;font-weight:bold;
           border-radius:10px;padding:14px 18px;font-size:16px;width:100%}
.line-sp svg{width:24px;height:24px}

@media(max-width:760px){
.line-pc{display:none}
.line-sp{display:block;flex:1 1 100%}
.sns-card{min-width:0;flex:1 1 100%}
}

/* ===== Cocoonの器から外に出す（このテンプレートのページだけ） 2026-08-19 ===== */
.page-template-page-farm-front #content,
.page-template-page-farm-front #main,
.page-template-page-farm-front .content-in,
.page-template-page-farm-front .main,
.page-template-page-farm-front article.article,
.page-template-page-farm-front .entry-content{
  max-width:none !important; width:auto !important; margin:0 !important; padding:0 !important;
  border:0 !important; background:transparent !important; box-shadow:none !important;
}
.page-template-page-farm-front #sidebar,
.page-template-page-farm-front .sidebar,
.page-template-page-farm-front .breadcrumb,
.page-template-page-farm-front .entry-title,
.page-template-page-farm-front .date-tags,
.page-template-page-farm-front .sns-share,
.page-template-page-farm-front .sns-follow,
.page-template-page-farm-front .footer-bottom-logo,
.page-template-page-farm-front #carousel{ display:none !important; }
.page-template-page-farm-front .content{ margin-top:0 !important; }

/* ===== ヘッダーをモックに寄せる 2026-08-19 =====
   電話番号と予約ボタンは「ヘッダーメニューの項目」として作る。
   管理画面の外観→メニューで編集でき、コードを増やさずに差し替えられる。 */
.navi-in > .menu-header .menu-tel > a{
  font-weight:bold; font-size:17px; color:#1b1620; pointer-events:auto;
}
.navi-in > .menu-header .menu-reserve > a{
  background:#4a2f6b; color:#fff; border-radius:6px; padding:8px 18px;
  margin-left:10px; font-weight:bold; line-height:1.2;
}
.navi-in > .menu-header .menu-reserve > a:hover{ background:#3a2456; color:#fff; }
.logo-image img, .logo-header img{ border-radius:50%; }
/* フッターの重複表記を整理 */
.page-template-page-farm-front .footer-bottom{ padding:14px 0; font-size:13px; }

/* ヘッダーの詰め方 2026-08-19
   ※ flex-wrap:nowrap を入れたらロゴ＋メニューが1280pxを超えても折り返さず、
     PCで横スクロールが発生した（scrollWidth 1410）。nowrapは使わない。 */
.hlt-top-menu .navi-in > .menu-header{ align-items:center; }
.hlt-top-menu .navi-in > .menu-header > li > a{ padding:0 11px; }
.hlt-top-menu .logo-header .site-name-text{ font-size:15px; }
@media(max-width:1180px){ .navi-in > .menu-header .menu-tel{ display:none; } }

/* ===== 画面高への追従 2026-08-19 → 2026-08-20 に緩和 =====
   経緯：フルHDで+229pxはみ出していたのを、ヒーローを520→333pxまで潰して
   1画面ぴったりに収めた。結果としてモックの余白が消え、別物になった（2026-08-20 指摘）。
   「長いスクロールを要さない」が要件であって「1画面に収める」ではない。
   デスクトップではモックの寸法どおりに出し、画面が低いときだけ縮める。 */
.farm-front .hero{ height:clamp(300px, 58vh, 520px) !important; }
.farm-front .panel{ padding:clamp(16px, 3.0vh, 30px) 0 clamp(18px, 3.2vh, 34px); }
.farm-front .panel img{ max-height:clamp(200px, 42vh, 390px); object-fit:cover; }
/* 縦paddingだけ画面高に追従させる。横はPC=基本ルール20px／モバイル=媒体クエリ4pxに任せる。
   （旧：横20pxまで固定していたため、詳細度0,2,1が媒体クエリの0,1,1に勝ち、
     モバイルでタブ4枚が390pxに収まらず「アクセス」が見切れた・2026-09-01実測） */
.farm-front .tablist label{ padding-block:clamp(11px, 1.8vh, 17px); }

/* ===== 下層ページ 2026-08-19 ===== */
.farm-sub{ font-family:"Zen Kaku Gothic New","Noto Sans JP",sans-serif; color:var(--ink); }
.farm-sub .wrap{ width:min(100% - 40px, 880px); margin-inline:auto; }
.farm-sub .sub-hero{ background-size:cover; background-position:center; position:relative;
  min-height:clamp(150px,22vh,240px); display:flex; align-items:flex-end; }
.farm-sub .sub-hero::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(35,24,48,.15),rgba(35,24,48,.78)); }
.farm-sub .sub-hero .wrap{ position:relative; z-index:2; padding:22px 0; }
.farm-sub .sub-hero h1{ color:#fff; }
.farm-sub .sub-head{ background:var(--cream); border-bottom:1px solid var(--line); padding:24px 0; }
.farm-sub h1{ font-family:"Zen Maru Gothic",sans-serif; font-weight:700;
  font-size:clamp(1.4rem,2.4vw,1.95rem); line-height:1.45; }
.farm-sub .sub-body{ padding:clamp(24px,4vh,44px) 0; line-height:1.85; }
.farm-sub .sub-body h2{ font-family:"Zen Maru Gothic",sans-serif; font-weight:700;
  font-size:clamp(1.2rem,1.8vw,1.45rem); margin:2.2em 0 .7em; padding-left:12px;
  border-left:5px solid var(--plum); line-height:1.5; }
.farm-sub .sub-body h2:first-child{ margin-top:0; }
.farm-sub .sub-body h3{ font-weight:700; font-size:1.08rem; margin:1.6em 0 .5em; }
.farm-sub .sub-body p{ margin:0 0 1.1em; }
.farm-sub .sub-body ul{ margin:0 0 1.2em; padding-left:1.3em; }
.farm-sub .sub-body li{ margin-bottom:.45em; }
.farm-sub .sub-body img{ border-radius:10px; }
.farm-sub .sub-body figure{ margin:0 0 1.4em; }
/* 型紙で入る表 */
.farm-sub .wp-block-table table{ width:100%; border-collapse:collapse; }
.farm-sub .wp-block-table td{ border-bottom:1px solid var(--line); padding:11px 4px; }
/* 2026-10-02 1列目は functions.php で行見出し（th）にしている。見た目は td のまま */
.farm-sub .wp-block-table th{ border-bottom:1px solid var(--line); padding:11px 4px;
  background-color:transparent; font-weight:inherit; text-align:left; }
.farm-sub .wp-block-table tr td:last-child{ text-align:right; color:var(--plum); font-weight:700; white-space:nowrap; }
.farm-sub .farm-note{ background:#f1f5ee; border-left:4px solid var(--leaf);
  padding:12px 15px; font-size:14.5px; }
/* 下部の共通導線 */
.farm-sub .sub-cta{ padding-bottom:clamp(28px,5vh,52px); }
.farm-sub .cta-box{ background:var(--cream); border:1px solid var(--line);
  border-radius:12px; padding:22px 24px; text-align:center; }
.farm-sub .cta-lead{ font-family:"Zen Maru Gothic",sans-serif; font-weight:700; font-size:1.15rem; margin:0 0 4px; color:var(--ink); }
.farm-sub .cta-note{ color:var(--sub); font-size:14px; margin:0 0 14px; }
.farm-sub .cta-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin:0; }
.farm-sub .cta-tel{ font-family:"Zen Maru Gothic",sans-serif; font-weight:700; font-size:1.35rem;
  color:var(--ink); text-decoration:none; align-self:center; }
/* 2026-10-02 LINEの緑 #06C755 は白文字で2.26:1。濃くして4.81:1（WCAG AA 4.5:1） */
.farm-sub .cta-line{ background:#00843A; color:#fff; text-decoration:none; font-weight:700;
  border-radius:8px; padding:12px 22px; }
.page-template-page-farm-sub #sidebar,
.page-template-page-farm-sub .breadcrumb,
.page-template-page-farm-sub .entry-title,
.page-template-page-farm-sub .date-tags,
.page-template-page-farm-sub .sns-share,
.page-template-page-farm-sub .sns-follow{ display:none !important; }
.page-template-page-farm-sub #content, .page-template-page-farm-sub #main,
.page-template-page-farm-sub .content-in, .page-template-page-farm-sub .main,
.page-template-page-farm-sub article.article, .page-template-page-farm-sub .entry-content{
  max-width:none !important; width:auto !important; margin:0 !important; padding:0 !important;
  border:0 !important; background:transparent !important; box-shadow:none !important; }

/* ヘッダーを1行に収める 2026-08-19（nowrapは使わない。文字を詰めて収める） */
.hlt-top-menu .logo-header .site-name-text{ font-size:14px; letter-spacing:0; }
.hlt-top-menu .navi-in > .menu-header > li > a{ font-size:13.5px; padding:0 9px; }
.navi-in > .menu-header .menu-tel > a{ font-size:15.5px; }
.navi-in > .menu-header .menu-reserve > a{ padding:7px 14px; font-size:13.5px; }
@media(max-width:1240px){ .navi-in > .menu-header .menu-tel{ display:none; } }

/* Cocoonのヘッダーメニューは項目幅が176px固定。5項目で880pxになりロゴと合わせて折り返していた。 */
.hlt-top-menu .navi-in > .menu-header > li{ width:auto !important; }
.hlt-top-menu .navi-in > .menu-header > li > a{ width:auto !important; padding:0 12px !important; }
.hlt-top-menu .logo-header{ max-width:340px; }
.hlt-top-menu .logo-header .site-name-text{ font-size:14px !important; line-height:1.35; }

/* ===== コンテナから抜けて全幅にする 2026-08-19 =====
   Cocoonの外側 .wrap が最大幅を持つため、1920pxでは約1110pxで止まり右が空いていた。
   個別に打ち消すと壊れやすいので、負のマージンでビューポート全幅に抜ける。 */

/* #main はサイドバーと並ぶflexアイテムなので width:auto では伸びない。flexで埋める。 */
.page-template-page-farm-front #main,
.page-template-page-farm-sub  #main{ width:100% !important; flex:1 1 100% !important; }
.page-template-page-farm-front .content-in,
.page-template-page-farm-sub  .content-in{ display:block !important; }

/* ══════════════════════════════════════════════════════════════
   モックからの移植 2026-08-20
   ヘッダーのロゴ／フッターの紫帯／SNS導線。
   いずれもモックにはあったがWordPress側へ入れ忘れていた分。
   ══════════════════════════════════════════════════════════════ */

/* ── ヘッダーのロゴ ──
   Cocoonが出す文字ロゴ（.logo）は隠し、フックで差した .farm-brand を使う。
   丸いWelcomeサイン＋2行の農園名。 */
/* Cocoonが出す文字ロゴを消す。要素は <div class="logo logo-header logo-text">
   ——1つの要素に両方のクラスが付くので、子孫セレクタでは当たらない。
   農園名は <title>・フッター帯・ヒーローの見出しに残るので、消して問題ない。 */
.logo.logo-header{ display:none !important; }
.farm-brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); }
.farm-brand img{ width:46px; height:46px; border-radius:50%; object-fit:cover; flex:none; }
.farm-brand b{ font-family:"Zen Maru Gothic","Noto Sans JP",sans-serif; font-weight:700;
               font-size:14.5px; line-height:1.32; letter-spacing:.01em; }
@media(max-width:834px){
  .farm-brand b{ font-size:13px; }
  .farm-brand img{ width:38px; height:38px; }
}

/* ── フッターの紫帯 ──
   全ページ共通。この下にCocoonのフッターメニュー（9ページ）が続く。 */
.farm-foot{ background:var(--plum-d); color:#fff;
            font-family:"Zen Kaku Gothic New","Noto Sans JP",sans-serif; }
.farm-foot-in{ width:min(100% - 40px, 1180px); margin-inline:auto; padding:20px 0;
               display:flex; flex-wrap:wrap; gap:14px 24px;
               align-items:center; justify-content:space-between; }
.farm-foot-txt{ font-size:14px; line-height:1.7; }
.farm-foot-txt b{ font-family:"Zen Maru Gothic","Noto Sans JP",sans-serif;
                  font-weight:700; margin-right:14px; }
.farm-foot-txt span{ margin-right:14px; color:#ddd0ec; }
.farm-foot-in{ justify-content:flex-start; }
.farm-foot-txt a{ color:#fff; text-decoration:none; font-weight:bold; font-size:16px; }
.farm-foot-line{ display:inline-flex; align-items:center; justify-content:center; gap:8px;
                 background:#06C755; color:#fff; text-decoration:none; font-weight:bold;
                 border-radius:8px; padding:11px 24px; font-size:15px; flex:none; }
.farm-foot-line:hover{ background:#05b34c; color:#fff; }
@media(max-width:760px){
  .farm-foot-in{ flex-direction:column; align-items:stretch; }
  .farm-foot-line{ width:100%; }
}
/* 紫帯の下に来るCocoonのフッターは、主張を下げて並べる */
.footer{ background:#fff; }
.footer-bottom{ font-size:12.5px; }

/* ── SNS導線（フッター・全ページ共通）2026-08-26 ──
   もとはトップの「アクセス」タブの中にあり、下層8ページから辿れなかった。
   フッターへ移したので名前空間も .farm-front から .farm-sns-foot へ移す。 */
.farm-sns-foot{ background:var(--cream); border-top:1px solid var(--line); padding:30px 0 34px; }
.farm-sns-in{ width:min(100% - 40px, 1180px); margin-inline:auto;
              font-family:"Zen Kaku Gothic New","Noto Sans JP",sans-serif; color:var(--ink); }
.farm-sns-in h2{ font-family:"Zen Maru Gothic","Noto Sans JP",sans-serif;
                 font-size:1.1rem; margin:0 0 4px; border:0; padding:0; background:none; }
.farm-sns-in .lead{ color:var(--sub); font-size:14px; margin:0 0 14px; }
.farm-sns-foot .sns-row{ display:flex; flex-wrap:wrap; gap:12px; align-items:stretch; }
.farm-sns-foot .sns-card{ display:flex; align-items:center; gap:11px; text-decoration:none;
                          color:var(--ink); border:1px solid var(--line); border-radius:10px;
                          padding:11px 15px; background:#fff; min-width:210px; flex:1 1 210px; }
.farm-sns-foot .sns-card:hover{ border-color:var(--plum); background:#fff; }
.farm-sns-foot .sns-card .sns-mark{ width:26px; height:26px; flex:none;
                                    border:0; border-radius:0; box-shadow:none; }
.farm-sns-foot .sns-card b{ display:block; font-size:15px; line-height:1.35; }
.farm-sns-foot .sns-card small{ display:block; color:var(--sub); font-size:12.5px; line-height:1.4; }
/* LINEの出し分け。既定＝PC（QRを見せる）／760px以下＝スマホ（直接タップ） */
.farm-sns-foot .line-pc{ display:flex; align-items:center; gap:15px; border:1px solid var(--line);
                         border-radius:10px; padding:13px 15px; background:#fff;
                         flex:1 1 300px; min-width:300px; }
.farm-sns-foot .line-pc img{ width:96px; height:96px; flex:none; border-radius:6px; }
.farm-sns-foot .line-pc .txt b{ display:block; font-size:15px; }
.farm-sns-foot .line-pc .txt small{ display:block; color:var(--sub); font-size:12.5px;
                                    margin-top:3px; line-height:1.5; }
.farm-sns-foot .line-pc .txt a{ font-size:13px; color:var(--plum); word-break:break-all; }
.farm-sns-foot .line-sp{ display:none; }
.farm-sns-foot .line-sp a{ display:flex; align-items:center; justify-content:center; gap:9px;
                           background:#06C755; color:#fff; text-decoration:none; font-weight:bold;
                           border-radius:10px; padding:14px 18px; font-size:16px; width:100%; }
.farm-sns-foot .line-sp svg{ width:24px; height:24px; }
@media(max-width:760px){
  .farm-sns-foot{ padding:24px 0 26px; }
  .farm-sns-foot .line-pc{ display:none; }
  .farm-sns-foot .line-sp{ display:block; flex:1 1 100%; }
  .farm-sns-foot .sns-card{ min-width:0; flex:1 1 100%; }
  /* 下層ページのCTAにも緑の塗りボタンがあり、スマホでは縦に2つ並ぶ。
     遷移先も同じなので、フッター側は白地＋緑枠にして主従を付ける。 */
  .farm-sns-foot .line-sp a{ background:#fff; color:#06C755; border:2px solid #06C755; }
  .farm-sns-foot .line-sp svg path{ fill:#06C755; }
  /* 紫帯：農園名・住所・営業が続けて流れて「千／葉県」で割れる。行ごとに分ける */
  .farm-foot-txt b, .farm-foot-txt span, .farm-foot-txt a{
    display:block; margin:0 0 2px; }
  .farm-foot-txt span{ margin-right:0; }
}

/* ── 地図（アクセスページのみ）2026-08-25 ──
   iframeは比率を保って伸縮させる。高さを固定するとスマホで潰れる。 */
.farm-sub .sub-map{ margin:26px 0 34px; }
.farm-sub .map-frame{ position:relative; width:100%; aspect-ratio:16/9;
                      border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.farm-sub .map-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
@media(max-width:760px){ .farm-sub .map-frame{ aspect-ratio:4/3; } }

/* ══════════════════════════════════════════════════════════════
   お知らせの単体ページ 2026-08-25
   クライアントが投稿すると客はここへ着地する。Cocoon既定のままだと
   書体も余白も農園ページと別物になるので、下層ページ（.farm-sub）に揃える。
   ※ シェアボタン／Feedly・RSS／サイドバー／コメント／関連記事は
     Cocoon設定（theme_mod）側で落としてある。CSSで隠していない。
   ══════════════════════════════════════════════════════════════ */
.single .article{
  font-family:"Zen Kaku Gothic New","Noto Sans JP",sans-serif;
  color:var(--ink); line-height:1.9;
  width:min(100% - 40px, 720px); margin-inline:auto; padding:8px 0 40px;
}
.single .article .entry-title{
  font-family:"Zen Maru Gothic","Noto Sans JP",sans-serif; font-weight:700;
  font-size:clamp(1.35rem, 2.2vw, 1.75rem); line-height:1.5;
  border:0; padding:0; margin:0 0 6px;
}
.single .article .post-date{ color:var(--sub); font-size:13.5px; }
.single .article .entry-content{ margin-top:26px; font-size:16px; }
.single .article .entry-content > * + *{ margin-top:1.1em; }
.single .article .entry-content h2{
  font-family:"Zen Maru Gothic","Noto Sans JP",sans-serif; font-size:1.2rem;
  margin-top:2em; padding:0 0 8px; border:0; border-bottom:2px solid var(--plum); background:none;
}
.single .article .entry-content h3{
  font-family:"Zen Maru Gothic","Noto Sans JP",sans-serif; font-size:1.05rem;
  margin-top:1.8em; padding:0 0 0 12px; border:0; border-left:4px solid var(--plum); background:none;
}
.single .article .entry-content img{ max-width:100%; height:auto; border-radius:8px; }
.single .breadcrumb{ width:min(100% - 40px, 720px); margin-inline:auto; font-size:12.5px; }
/* 投稿一覧・カテゴリー一覧も同じ幅に寄せる */
.archive .content, .category .content{ font-family:"Zen Kaku Gothic New","Noto Sans JP",sans-serif; }
/* #main はサイドバーとのflex兄弟。サイドバーを消しても幅が残るため、
   農園テンプレートと同じ対処を単体ページ・一覧ページにも当てる。
   （幅とscrollWidthだけ見ていて左端のズレを見落とした件の再発防止・2026-08-19） */
.single #main, .archive #main, .category #main, .search #main, .error404 #main{
  width:100% !important; flex:1 1 100% !important;
}
.single .content-in, .archive .content-in, .category .content-in{ display:block !important; }
/* お知らせカードをリンクにしたぶんの見た目 2026-08-25 */
/* お知らせカードの並び 2026-08-26
   .news-grid のレイアウトCSSが元から無く、投稿が0〜1件のあいだ気づかなかった。
   4件並ぶと1列に細く積まれるため、2列のグリッドにする。 */
.farm-front .news-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:14px; }
.farm-front a.news-card{ display:flex; gap:13px; align-items:flex-start; text-decoration:none;
  color:var(--ink); border:1px solid var(--line); border-radius:10px; padding:14px 16px; background:#fff; }
.farm-front a.news-card:hover{ border-color:var(--plum); background:var(--cream); }
.farm-front a.news-card:hover .news-body h3{ color:var(--plum); }
.farm-front a.news-card img{ width:92px; height:70px; object-fit:cover; border-radius:6px; flex:none; }
.farm-front .news-body h3{ font-size:15.5px; line-height:1.45; margin:0 0 4px; }
.farm-front .news-body p{ font-size:13.5px; color:var(--sub); line-height:1.6; margin:0; }
.farm-front .news-date{ color:var(--sub); font-size:12.5px; }
@media(max-width:760px){ .farm-front .news-grid{ grid-template-columns:1fr; } }
/* お知らせカードの種別ラベル 2026-08-26 */
.farm-front .news-meta{ display:flex; align-items:center; gap:8px; margin:0 0 3px; }
.farm-front .news-kind{ font-size:11.5px; line-height:1; padding:4px 8px; border-radius:99px; color:#fff; }
.farm-front .news-kind.is-news{ background:var(--plum); }
.farm-front .news-kind.is-diary{ background:var(--leaf); }
.farm-front .news-date{ margin:0; }
/* 料金のお土産・内容量の強調 2026-08-26 */
.farm-front .gift em{ font-style:normal; font-weight:700; color:var(--plum); }
.farm-sub .farm-note strong{ font-weight:700; color:var(--plum); }
/* フッターを1つにまとめる 2026-08-26
   もとは SNS導線／紫帯／Cocoonのフッター（メニュー＋著作表示）の3ブロックに割れ、
   農園名が2回出ていた。メニューと著作表示を紫帯へ取り込み、Cocoon側は丸ごと消す。 */
.footer{ display:none !important; }

.farm-foot-in{ display:block; padding:22px 0 20px; }
.farm-foot-txt{ margin:0 0 12px; }
.farm-foot-nav{ margin:0 0 10px; }
.farm-foot-menu{ list-style:none; margin:0; padding:0;
                 display:flex; flex-wrap:wrap; gap:6px 0; }
.farm-foot-menu li{ margin:0; }
.farm-foot-menu li + li::before{ content:"｜"; color:#7a6392; margin:0 2px; }
.farm-foot-menu a{ color:#e6dcf2; text-decoration:none; font-size:13.5px; }
.farm-foot-menu a:hover{ color:#fff; text-decoration:underline; }
.farm-foot-copy{ margin:0; color:#b8a6ce; font-size:12px; }
@media(max-width:760px){
  .farm-foot-menu{ display:block; }
  .farm-foot-menu li + li::before{ content:none; }
  .farm-foot-menu a{ display:block; padding:5px 0; }
}

/* ══════════════════════════════════════════════════════════════
   よくある質問を吹き出しに 2026-08-27
   本文は素のブロック（見出し＋段落）のまま。クライアントが管理画面で
   文字を足しても崩れないよう、CSSだけで見た目を作る。
   FAQページは h3＝質問／p＝回答 の並びしか無いので、その形に当てる。
   ══════════════════════════════════════════════════════════════ */
.page-slug-faq .sub-body{ }
.page-slug-faq .sub-body h2, .page-slug-faq .sub-body h3{
  position:relative; display:flex; align-items:flex-start; gap:10px;
  /* 会話文なので本文と同じ書体に揃える。見出し用のZen Maru Gothicは使わない
     （QとAで書体が違って見える・2026-08-27 指摘） */
  font-family:"Zen Kaku Gothic New","Noto Sans JP",sans-serif; font-weight:700;
  font-size:1.02rem; line-height:1.55; margin:26px 0 10px; padding:0; border:0; background:none;
}
.page-slug-faq .sub-body h2::before, .page-slug-faq .sub-body h3::before{
  content:"Q"; flex:none; width:28px; height:28px; border-radius:50%;
  background:var(--plum); color:#fff; font-size:14px; line-height:28px;
  text-align:center; font-family:"Zen Maru Gothic",sans-serif;
}
.page-slug-faq .sub-body p{
  position:relative; margin:0 0 8px 38px; padding:13px 16px;
  background:var(--cream); border:1px solid var(--line); border-radius:10px;
  font-size:15px; line-height:1.85;
}
/* Aの印は付けない。吹き出しの形だけで回答と分かるため（2026-08-27 指摘） */
.page-slug-faq .sub-body p + p{ margin-top:-4px; }
/* 2026-10-02 質問は h2（見出し階層 h1→h2）。下層共通の h2:first-child{margin-top:0} を打ち消す */
.page-slug-faq .sub-body h2:first-child{ margin-top:26px; }
@media(max-width:760px){
  .page-slug-faq .sub-body h2, .page-slug-faq .sub-body h3{ font-size:.97rem; gap:8px; }
  .page-slug-faq .sub-body h2::before, .page-slug-faq .sub-body h3::before{ width:25px; height:25px; line-height:25px; font-size:13px; }
  .page-slug-faq .sub-body p{ margin-left:33px; font-size:14.5px; padding:12px 14px; }
}
/* LINE公式ボタン 2026-08-27
   ガイドラインが改変を禁じているため、色を変えず比率も変えない。
   全幅の緑バーはやめ、原寸のまま中央に置く。 */
.farm-sns-foot .line-sp a{
  background:none; border:0; padding:6px 0; width:100%;
  display:flex; justify-content:center; align-items:center;
}
.farm-sns-foot .line-sp img{ width:116px; height:36px; display:block; }

/* ══════════════════════════════════════════════════════════════
   タップで切り替える写真 2026-08-27
   JavaScriptを使わない。ラジオボタン＋labelだけ——タブと同じ方式。
   PHP側で枚数を変えてもCSSを触らなくていいよう、n番目どうしの対応を
   1〜4まで総当たりで書いてある（:has() に頼らない＝古い端末でも動く）。
   ══════════════════════════════════════════════════════════════ */
.farm-scr{ position:absolute; width:1px; height:1px; margin:-1px; padding:0;
           overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

.farm-gal{ position:relative; }
.farm-gal > input{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.farm-gal .gal-stage{ border-radius:10px; overflow:hidden; line-height:0; }
.farm-gal .gal-stage img{ display:none; width:100%; }
.farm-gal .gal-thumbs{ display:flex; gap:7px; margin-top:7px; }
.farm-gal .gal-thumbs label{
  flex:1 1 0; min-width:0; cursor:pointer; line-height:0; border-radius:7px;
  border:2px solid transparent; overflow:hidden; opacity:.55;
  transition:opacity .15s ease, border-color .15s ease;
}
.farm-gal .gal-thumbs label:hover{ opacity:.85; }
.farm-gal .gal-thumbs label img{ width:100%; height:46px; object-fit:cover; display:block; }

/* n番目のラジオが選ばれたら、n番目の写真とn番目のサムネイルが立つ */
.farm-gal input:nth-of-type(1):checked ~ .gal-stage img:nth-of-type(1),
.farm-gal input:nth-of-type(2):checked ~ .gal-stage img:nth-of-type(2),
.farm-gal input:nth-of-type(3):checked ~ .gal-stage img:nth-of-type(3),
.farm-gal input:nth-of-type(4):checked ~ .gal-stage img:nth-of-type(4){ display:block; }
.farm-gal input:nth-of-type(1):checked ~ .gal-thumbs label:nth-of-type(1),
.farm-gal input:nth-of-type(2):checked ~ .gal-thumbs label:nth-of-type(2),
.farm-gal input:nth-of-type(3):checked ~ .gal-thumbs label:nth-of-type(3),
.farm-gal input:nth-of-type(4):checked ~ .gal-thumbs label:nth-of-type(4){
  opacity:1; border-color:var(--plum);
}
/* ラジオは見えないので、キーボード操作の居場所はサムネイル側に出す */
.farm-gal input:nth-of-type(1):focus-visible ~ .gal-thumbs label:nth-of-type(1),
.farm-gal input:nth-of-type(2):focus-visible ~ .gal-thumbs label:nth-of-type(2),
.farm-gal input:nth-of-type(3):focus-visible ~ .gal-thumbs label:nth-of-type(3),
.farm-gal input:nth-of-type(4):focus-visible ~ .gal-thumbs label:nth-of-type(4){
  outline:3px solid var(--plum); outline-offset:2px; opacity:1;
}
.farm-front .panel .farm-gal .gal-stage img{ max-height:clamp(190px, 38vh, 350px); object-fit:cover; }

/* トップの「アクセス」タブに出す地図。下層の .farm-sub と同じ見た目に揃える */
.farm-front .panel .map-frame{
  position:relative; width:100%; aspect-ratio:4/3;
  border:1px solid var(--line); border-radius:10px; overflow:hidden;
}
.farm-front .panel .map-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* ══════════════════════════════════════════════════════════════
   電車の経路図 2026-08-27
   もとは表。県外の人が知りたいのは駅名の羅列ではなく所要時間なので、
   駅の案内看板と同じ形にした。PCは横一本、スマホは縦のレールへ組み替える。
   ══════════════════════════════════════════════════════════════ */
.farm-sub .farm-route{
  margin:18px 0 26px; padding:20px 18px 16px;
  border:1px solid var(--line); border-radius:12px; background:var(--cream);
}
.farm-sub .route-rail{ display:flex; align-items:flex-start; }
.farm-sub .rt-stn,
.farm-sub .rt-leg{ position:relative; padding-top:50px; text-align:center; }
.farm-sub .rt-stn{ flex:0 0 74px; }
.farm-sub .rt-leg{ flex:1 1 0; min-width:0; }
/* レール（区間の線）と駅（点）。点を線より上に重ねる */
.farm-sub .rt-leg::before{
  content:""; position:absolute; top:30px; left:-8px; right:-8px;
  height:5px; background:var(--plum); border-radius:3px;
}
.farm-sub .rt-leg.is-walk::before{
  background:repeating-linear-gradient(90deg, var(--leaf) 0 7px, transparent 7px 13px);
}
.farm-sub .rt-stn::before{
  content:""; position:absolute; top:22px; left:50%; transform:translateX(-50%);
  width:13px; height:13px; border-radius:50%; z-index:2;
  background:#fff; border:4px solid var(--plum);
}
.farm-sub .rt-stn.is-goal::before{ border-color:var(--plum); background:var(--plum); }
.farm-sub .rt-stn.is-farm::before{ border-color:var(--leaf); background:var(--leaf); }
.farm-sub .rt-stn b{ display:block; font-size:14.5px; line-height:1.35; letter-spacing:-.01em; }
.farm-sub .rt-stn small{ display:block; font-size:10.5px; color:var(--sub); line-height:1.4; }
.farm-sub .rt-leg .rt-line{
  position:absolute; top:6px; left:0; right:0;
  font-size:11px; color:var(--sub); line-height:1.3; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
.farm-sub .rt-leg .rt-min{ display:block; font-size:12.5px; font-weight:700; color:var(--plum); }
.farm-sub .rt-leg.is-walk .rt-min{ color:var(--leaf); }

.farm-sub .route-sum{ margin:18px 0 0; padding-top:14px; border-top:1px dashed var(--line); }
.farm-sub .route-sum p{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; margin:0 0 5px; font-size:14px; }
.farm-sub .route-sum b{ flex:0 0 6.2em; font-size:13.5px; color:var(--sub); }
.farm-sub .route-sum em{ font-style:normal; font-weight:700; font-size:16px; color:var(--plum); }

.farm-sub .route-cta{ margin:14px 0 0; }
.farm-sub .route-cta a{
  display:inline-flex; align-items:center; gap:7px;
  padding:10px 18px; border-radius:999px; text-decoration:none;
  background:var(--plum); color:#fff; font-size:14px; font-weight:700;
}
.farm-sub .route-cta a::after{ content:"↗"; font-size:12px; }
.farm-sub .route-cta a:hover{ background:var(--plum-d); color:#fff; }
.farm-sub .farm-route .farm-note{ margin:10px 0 0; }

@media(max-width:760px){
  /* 縦のレールへ組み替える。横一本のままだと駅名が潰れる */
  .farm-sub .route-rail{ display:block; padding-left:4px; }
  .farm-sub .rt-stn,
  .farm-sub .rt-leg{ display:flex; align-items:center; gap:12px; padding:0 0 0 32px; text-align:left; }
  .farm-sub .rt-stn{ min-height:38px; }
  .farm-sub .rt-leg{ min-height:46px; }
  .farm-sub .rt-stn::before{ top:50%; left:11px; transform:translate(-50%,-50%); }
  .farm-sub .rt-leg::before{
    top:0; bottom:0; left:11px; right:auto; width:5px; height:auto;
    transform:translateX(-50%); border-radius:3px;
  }
  .farm-sub .rt-leg.is-walk::before{
    background:repeating-linear-gradient(180deg, var(--leaf) 0 7px, transparent 7px 13px);
  }
  .farm-sub .rt-stn b{ font-size:16px; }
  .farm-sub .rt-stn small{ display:inline; font-size:11.5px; }
  .farm-sub .rt-leg .rt-line{ position:static; font-size:12.5px; white-space:normal; }
  .farm-sub .rt-leg .rt-min{ font-size:13.5px; }
  .farm-sub .route-cta a{ width:100%; justify-content:center; padding:13px 18px; }
  .farm-sub .route-sum p{ display:block; margin-bottom:10px; }
  .farm-sub .route-sum b{ display:block; margin-bottom:1px; }
}

/* 本文の写真 2026-08-27
   縦長の写真がそのまま入ると画面を占領する（ピンクレモネードの木＝1:1で880px）。
   切り抜かずに高さで抑える——木のラベルや実の付き方が写真の要点なので、
   object-fit:cover で端を落とすと意味が消える。 */
.farm-sub .sub-body .wp-block-image{ margin:16px 0 22px; text-align:center; }
.farm-sub .sub-body .wp-block-image img{
  max-height:460px; width:auto; max-width:100%; height:auto;
  border-radius:10px; display:inline-block;
}

/* 本文の2カラム「文章 ｜ 写真」 2026-08-27
   トップの「畑のこと」タブと同じ横並びを下層ページでも出す。
   素のカラムブロックなので、縦積みへの切り替えはWordPress側（781px以下）に任せる。 */
.farm-sub .sub-body .farm-cols{ margin:26px 0 34px; gap:clamp(18px,3vw,40px); align-items:center; }
.farm-sub .sub-body .farm-cols:first-child{ margin-top:0; }
.farm-sub .sub-body .farm-cols h2{ margin-top:0; }
.farm-sub .sub-body .farm-cols p:last-child{ margin-bottom:0; }
.farm-sub .sub-body .farm-cols .wp-block-image{ margin:0; }
/* カラムの中では高さを揃える。トップの「畑のこと」タブと同じ扱い——
   縦横比の違う写真をそのまま並べると、片方だけ縦に伸びて左に大きな余白ができる。 */
.farm-sub .sub-body .farm-cols .wp-block-image img{
  width:100%; height:clamp(210px, 23vw, 290px); max-height:none;
  object-fit:cover; object-position:center; border-radius:10px;
}
@media(max-width:781px){
  .farm-sub .sub-body .farm-cols{ gap:14px; margin:20px 0 28px; }
  /* 縦積みになったら写真が縦に伸びすぎるので、1段組みと同じ上限に戻す */
  .farm-sub .sub-body .farm-cols .wp-block-image{ text-align:center; }
  .farm-sub .sub-body .farm-cols .wp-block-image img{ width:auto; max-width:100%; height:auto; max-height:380px; object-fit:contain; }
}

/* ── モバイル下部バーの「ご予約」ボタン（2026-08-28・Codex R8対応） ──
   下部バーはWPメニュー「モバイル下部バー」（表示位置 navi-footer-mobile）から出る。
   #menu / #home / #top は Cocoon の定型ボタン、通常URLの項目は walker が
   .navi-menu-button を付ける——ただし #menu の定型ボタン（ドロワー）も同じ
   navi-menu-button クラスを持つ（Cocoonの使い回し・実DOM確認）。ドロワーは
   label で開閉し、カスタムリンクだけが直下に a.menu-button-in を持つので、
   子セレクタで絞る。バーの器は ul.mobile-menu-buttons が直に body 下に
   出る（nav.navi-footer はPC用フッターナビで別物・実DOMで確認）。メニュー項目に付けた独自クラスは walker が li に
   出力しない（実装確認済み）ので、.navi-menu-button で当てる。
   このバーにカスタムリンクを増やすと全部に効く——増やすときはこの前提を思い出す。 */
.mobile-menu-buttons .navi-menu-button > a.menu-button-in .menu-icon,
.mobile-menu-buttons .navi-menu-button > a.menu-button-in .menu-caption{
  color:var(--plum);
  font-weight:700;
}

/* ── タブから詳細ページへの導線（2026-08-28） ──
   タブは要約で、くわしい話は各下層ページにある。タブだけ読んで下層に
   気づかない見漏らしを防ぐ（本人指摘）。お知らせタブはカード自体が
   単体ページへのリンクなので付けない。 */
.farm-front .panel-more{ margin-top:16px; }
.farm-front .panel-more a{
  color:var(--plum); font-weight:700; text-decoration:none;
  border-bottom:1px solid currentColor; padding-bottom:2px;
}
.farm-front .panel-more a::after{ content:" →"; }

/* ── ヘッダー9項目化に伴う詰め直し（2026-08-28） ──
   野菜市・農園についてを足して7→9項目になり、1024〜1365pxで2段に折れた。
   既存の詰め（padding 12px・13.5px）の上に、幅に応じた縮めを2段重ねる。
   「10:00〜15:00」は既存ルールどおり1240px以下で消える（7項目時代からの設計）。 */
@media(max-width:1380px){
  .hlt-top-menu .navi-in > .menu-header > li > a{ padding:0 8px !important; font-size:13px; }
  .navi-in > .menu-header .menu-reserve > a{ padding:7px 11px; }
}
@media(max-width:1150px){
  .hlt-top-menu .navi-in > .menu-header > li > a{ padding:0 6px !important; font-size:12.5px; }
  .hlt-top-menu .logo-header{ max-width:300px; }
  .hlt-top-menu .logo-header .site-name-text{ font-size:13px !important; }
}

/* ── タブ切り替え時のカクつき対策（2026-08-28・本人指摘） ──
   原因はピクセル比ではなく高さのジャンプ。お知らせパネルだけ投稿0件で
   約128pxしかなく（他タブは440〜470px）、切り替えのたびにページ全体が
   約310px伸縮して下のSNS欄・フッターが跳ねていた（実測。他タブ同士のCLSは0）。
   パネルの実高は「画像の clamp(200px,42vh,390px) ＋ 余白約90px」で決まるので、
   同じ式の最低高を器に与えて揃える。PCのみ——スマホは縦積みで高さが揃わず、
   最低高を与えると空白のほうが目立つ。 */
@media(min-width:1024px){
  .farm-front .panels{ min-height: clamp(280px, calc(42vh + 90px), 480px); }
}

/* ══════════════════════════════════════════════════════════════
   ヘッダーメニューのホバー 2026-08-27
   Cocoonの `#navi .navi-in a:hover{background:rgba(255,255,255,.2)}` は
   **暗いヘッダーに白を20%重ねる**前提のルール。当サイトのヘッダーは白なので
   ①9項目すべてで手応えが消え ②紫の予約ボタンは背景ごと置き換わって白く飛んでいた
   （2026-08-27 指摘）。向こうがIDセレクタで詳細度が上なので、こちらも #navi を付ける。
   ══════════════════════════════════════════════════════════════ */
#navi .navi-in > .menu-header > li > a:hover{
  background-color:#f2edf7;      /* 白地でも分かる薄い紫。--cream(#faf8fc)では見えない */
  color:var(--plum);
}
#navi .navi-in > .menu-header .menu-reserve > a:hover{
  background-color:var(--plum-d); color:#fff;
}
/* 営業時間は行き先ではないので、リンクでないときは手応えを出さない。
   電話番号が入ると href が付き、上の通常ルールでホバーする（functions.php の walker） */
#navi .navi-in > .menu-header .menu-tel > a:not([href]){ cursor:default; }
#navi .navi-in > .menu-header .menu-tel > a:not([href]):hover{
  background-color:transparent; color:#1b1620;
}