/* 須藤牧場 子テーマ：/mozzarella-cheese/ だけのスマホ（767px 以下）の配置。第25回 2026-09-20（設計係）。
   このファイルは page-mozzarella-cheese.php だけが読む（他のページは1行も読まない）。
   767px 以下だけに効く（PC 768px 以上は §B の2行＝折りたたみの見出しを隠す・:first-of-type の埋め合わせ だけ）。
   物差し：段と段の間は 48／72／96px の3段階だけ（井埜さん 2026-09-20）。1rem＝幅/375×100（390px で 104px）は器の幅にだけ使う。
   色は親にある物だけ：赤 #A71527・緑 #5DA829・茶 #604C38・文字 #1B1411・生成り #FAF6EC・白 #fff。important は使わない（親の .pc-only/.sp-only だけが持つ）。
   選択子は sf-stage3.css と同じ「body #lp-…」で親（#lp-… 0,1,1）に勝つ。.l-note・.l-wrapper・.l-image・.l-text・.l-name（LINE UP のカードの中）は第23回の担当＝ここでは1つも触らない。 */

/* ── A. スマホ（767px 以下） ─────────────────────────────── */
@media screen and (max-width:767px){
  /* A-1 目次（FV の下・#lp-detail の先頭）。押す物は 48px 以上。列の見出し「目次」を左に置く */
  .sf-mz-jump{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 48px;position:relative;z-index:3;}
  .sf-mz-jump__label{font-size:13px;line-height:20px;font-weight:700;color:#604C38;margin-right:4px;}
  .sf-mz-jump a{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 14px;border:1px solid #5DA829;border-radius:24px;color:#5DA829;background:#fff;font-size:14px;line-height:20px;font-weight:700;text-decoration:none;}
  #lp-line-up,#lp-about,#lp-restaurant,#contact-content01{scroll-margin-top:96px;}

  /* A-2 牛の環境の段：絵が無い（親 img/lp/deco4.webp・deco5.webp・char7.svg・char8.svg は本番・stg とも 404）余白 288px・287px を 48px に */
  body #lp-detail .l-heading{margin-bottom:24px;}
  body #lp-detail .l-deco-unity{margin-bottom:48px;}
  body #lp-detail .l-content{margin-bottom:48px;text-align:left;}
  body #lp-detail .l-content h3{text-align:center;}
  body #lp-detail .l-content p br{display:none;}
  body #lp-detail .l-awards{text-align:left;align-items:stretch;gap:16px;}
  body #lp-detail .l-awards div{gap:16px;}
  body #lp-detail .l-awards figure{align-self:center;}
  body #lp-detail .l-awards div h3{text-align:center;white-space:normal;}
  body #lp-detail .l-awards div p br{display:none;}
  body #lp-detail{padding-bottom:24px;}

  /* A-3 LINE UP：段の余白だけ（カードの中身・幅 3rem・注記は触らない＝第23回） */
  body #lp-line-up{padding-top:72px;padding-bottom:96px;}

  /* A-4 カルシウム：本文は左ぞろえ（親のまま）・折りたたみ。写真は 338×222 のまま。#lp-bg-white の下余白 5rem→4.5rem（フッターの波に −4rem 重なる作り＝見える白は 1rem→0.5rem） */
  body #lp-bg-white{padding-bottom:4.5rem;}
  body #lp-about{margin-top:0;padding-top:0;padding-bottom:72px;}
  body #lp-about .l-2column{margin-bottom:72px;}
  body #lp-about .l-2column--text{gap:24px;}
  body #lp-about .l-2column--text img{width:100%;height:auto;aspect-ratio:338/222;object-fit:cover;}

  /* A-5 おすすめアレンジ：3枚を横スライド（js/sf-mozz-sp.js が 767px 以下でだけ .sf-slider の形にし、js/sf-slider.js が動かす。JS が無い時は縦のまま） */
  body #lp-about .l-container{margin-top:24px;margin-bottom:48px;gap:24px;}
  body #lp-about .l-container.sf-slider{display:block;margin-top:24px;margin-bottom:24px;} /* スライドの時だけ下を 48→24px（操作行 52px のぶん。写真の下端→「ブログでも更新中!」が 100px→76px）。JS が無い縦並びの時は 48px のまま。第28回 2026-09-21 */
  body #lp-about .l-container.sf-slider .l-wrapper{width:100%;}
  body #lp-about .l-container.sf-slider .l-wrapper .l-material,body #lp-about .l-container.sf-slider .l-wrapper .l-dish{width:100%;}
  body #lp-about .l-container.sf-slider .l-wrapper .l-dish{aspect-ratio:4/3;height:auto;}
  body #lp-about .l-container.sf-slider .l-wrapper .l-dish img{border-radius:0;background:transparent;}
  body #lp-about .l-container.sf-slider .l-wrapper .l-desc br{display:none;}

  /* A-6 お店：写真＋店名＋住所＋ひとことを1枚のカード（生成り・角丸）。間は 24px・群の間は 48px。仮の絵（default.webp）は出さない（10軒中8軒が同じ絵＝本番） */
  body #lp-restaurant .l-heading{margin:0 auto 48px;}
  body #lp-restaurant{padding-bottom:2.4rem;}
  body #lp-restaurant .p-store{gap:48px;}
  body #lp-restaurant .p-store__list{gap:24px;margin-top:24px;}
  body #lp-restaurant .p-store__item{gap:0;background:#FAF6EC;border-radius:0.2rem;overflow:hidden;}
  body #lp-restaurant .p-store__image{aspect-ratio:338/205;}
  body #lp-restaurant .p-store__image img{width:100%;height:100%;object-fit:cover;border-radius:0;}
  body #lp-restaurant .p-store__image--default{display:none;}
  body #lp-restaurant .p-store__info{padding:16px 16px 20px;}
  body #lp-restaurant .p-store__name{padding-bottom:8px;}
  body #lp-restaurant .p-store__name span{word-break:keep-all;overflow-wrap:anywhere;} /* 2026-09-23：読み仮名の折り返しを空白の所にする（「…ほんて｜ん】」の1字残りを防ぐ）。字は1字も変えない・大きさも据え置き */
  body #lp-restaurant .p-store__address{margin-top:8px;margin-bottom:8px;}
  body #lp-restaurant .p-store__desc{margin-top:0;}

  /* A-7 旧 /cheese/ の区画：写真7枚のスライド・帯・こだわり3段（重複する本文）は1つの折りたたみ・2つ目の「ご予約はこちら」は出さない（折りたたみの見出しと 80px しか離れず同じ物が2つ並ぶ）・写真は 338×211（16:10・端を切る）・本文の固定改行は PHP 側で pc-only に */
  body #sf-cheese-legacy{padding-top:48px;padding-bottom:0;}
  body #sf-cheese-legacy .sf-s3__sec{margin-top:48px;}
  body #sf-cheese-legacy .sf-s3__sec:first-of-type{margin-top:0;}
  body #sf-cheese-legacy .sf-s3__band{margin-top:48px;}
  body #sf-cheese-legacy .sf-mz-fold>.sf-slider{margin-top:24px;}
  body #sf-cheese-legacy .sf-mz-fold--legacy + .sf-s3__btns{display:none;}
  body #sf-cheese-legacy .sf-s3__form .wpcf7 .attentionbox{margin-top:0;}
  body #sf-cheese-legacy .sf-mz-fold>.sf-s3__row{margin-top:48px;}
  body #sf-cheese-legacy .sf-mz-fold>.sf-s3__row:first-of-type{margin-top:48px;}
  body #sf-cheese-legacy .sf-s3__rowmedia img{aspect-ratio:16/10;object-fit:cover;}
  body #sf-cheese-legacy .sf-s3__btns{margin-top:24px;}
  body #sf-cheese-legacy .sf-s3__card{margin-top:24px;}
  body #sf-cheese-legacy .sf-s3__card .sf-s3__text{line-height:calc(26*var(--sf-t));}
  body #sf-cheese-legacy .sf-s3__card .sf-s3__text p{margin-top:0.12rem;}
  body #sf-cheese-legacy .sf-s3__access{margin-top:48px;}

  /* A-8 折りたたみ（details）。見出しは押す物 48px 以上・緑の枠。ご予約フォームだけ赤の塗り */
  .sf-mz-fold{display:block;}
  .sf-mz-fold__sum{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:10px 16px;border:1px solid #5DA829;border-radius:12px;background:#fff;color:#5DA829;font-size:15px;line-height:22px;font-weight:700;cursor:pointer;list-style:none;}
  .sf-mz-fold__sum::-webkit-details-marker{display:none;}
  .sf-mz-fold__sum::after{content:"";flex:none;width:12px;height:12px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-top:-6px;}
  .sf-mz-fold[open]>.sf-mz-fold__sum::after{transform:rotate(-135deg);margin-top:6px;}
  .sf-mz-fold--form>.sf-mz-fold__sum{background:#A71527;border-color:#A71527;color:#fff;justify-content:center;}
  .sf-mz-fold--form>.sf-mz-fold__sum::after{margin-left:4px;}
  .sf-mz-fold--nutrition{margin-top:0;}
  .sf-mz-fold--nutrition>p{margin-top:16px;}
  .sf-mz-fold--legacy{margin-top:48px;}
  .sf-mz-fold--form{margin-top:24px;}
  .sf-mz-fold--form>.sf-s3__form{margin-top:16px;}
  .sf-mz-fold--local{display:block;margin-top:48px;padding:0 0.25rem;}
  .sf-mz-fold--local>#lp-local{margin-top:16px;margin-bottom:0;}
  body #lp-local{margin-bottom:0;}
  .sf-mz-fold--local{margin-bottom:48px;}

  /* A-9 チーズ ご予約フォームの帯（#lp-form）：高さ 4.5rem→3.6rem */
  body #lp-form{height:3rem;}
}

/* ── B. PC（768px 以上）：見た目を変えないための2行だけ ────────── */
@media screen and (min-width:768px){
  /* 折りたたみの見出しは出さない（details は HTML の open のまま＝中身は今までどおり） */
  .sf-mz-fold__sum{display:none;}
  /* details で包んだ3段の1段目が .sf-s3__sec:first-of-type（sf-stage3.css 19〜20行）に当たって 0.5rem になるのを、包む前と同じ 0.8rem（70行 .sf-s3__row）に戻す */
  .sf-mz-fold>.sf-s3__row:first-of-type{margin-top:0.8rem;}
  /* ↑ 第25回の包み方（写真スライドが details の1番目）ではこの規則は当たらない（1段目の行は :first-of-type でない）。将来 details の中身を変えた時の保険として残す */
  /* 包んだ写真スライドの段は元から .sf-slider{margin-top:0.5rem}（sf-slider.css）＝:first-of-type の 0.5rem と同じ値なので埋め合わせ不要（設計係の実測 2026-09-20：1440px で足すと +69px ずれた） */
}