/* =========================================================
   仕上げ（polish）：文字サイズ・改行・余白・高さの統一
   - 最後に読み込む上書き専用ファイル。外せば元の見た目に戻る
   - 基準：スマホ 16px ／ タブレット 17px ／ PC 18px（従来どおり）
   ========================================================= */

/* ---------- 1. 文字の基本 ---------- */
body{
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  /* 日本語の禁則を厳しめに（「、」「）」「ー」などを行頭に置かない） */
  line-break:strict;
  overflow-wrap:anywhere;
}
/* 見出し・ナビ・ボタンは字間を詰めて（プロポーショナル）引き締める */
h1, h2, h3,
.section-heading-large, .section-heading-medium, .section-heading-small, .section-title-center,
.nav a, .btn-order, .cform-submit, .card-name, .logo-jp{
  font-feature-settings:"palt";
}
/* 短い文は「文節」で折り返し、行の長さをそろえる（1文字だけ次の行に落ちるのを防ぐ） */
/* ※ 行の長さをそろえる(balance)は、文節で折り返せるブラウザ(Chrome/Edge)だけで有効にする。
   Safari は文節折り返し非対応のため、balance だけ効くと「通／販」のように単語の途中で切れる */
@supports (word-break:auto-phrase){
  h1, h2, h3, .shelf-lead, .farm-lead, .news-text, .faq-q span,
  .contact-form-lead, .breadcrumb, .hero-title, .hero-sub, .nutri-card p{
    word-break:auto-phrase;
    text-wrap:balance;
  }
  /* 注意書き・説明文・フッターは文節で折るだけ（行の長さはそろえない） */
  .stock-note, .order-notice, .variety-desc, .footer-addr, .footer-tel-col p{ word-break:auto-phrase; }
}
/* どのブラウザでも途中で切りたくない語句のまとまり（HTML側で <span class="nobr"> を付ける） */
.nobr{ display:inline-block; }
/* 長い本文は最後の行に1〜2文字だけ残らないように */
p{ text-wrap:pretty; }

/* ---------- 2. 見出しの縦線は見出しの高さに合わせる ---------- */
.stock-top-left{ align-items:flex-start; }
.stock-top-left .stock-vline{ height:1.9rem; margin-top:.45rem; }
.stock-title{ margin:0; line-height:1.35; }
.shelf-lead{ margin-top:.35rem; line-height:1.6; white-space:nowrap; } /* 説明は短くして1行に収める */
.stock-note{ white-space:nowrap; }

/* ---------- 3. 商品カード：文字量に関係なく同じ高さに ---------- */
/* （高さがそろうので、カルーセルの矢印・ドットが上下に動かない） */
.card-name{
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  padding:0 .8rem; line-height:1.4;
}
.card-info > div{ min-width:0; padding:0 .6rem; }
.card-info dd{ min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ---------- 4. PCヘッダー：ロゴが2行に折れないように ---------- */
.logo-jp, .logo-en{ white-space:nowrap; }
@media (min-width:1201px) and (max-width:1440px){
  .logo-jp{ font-size:1.15rem; letter-spacing:.1em; }
  .logo-en{ letter-spacing:.18em; }
  /* この幅はナビが伸びきってロゴとくっついて見える。項目間を詰めて、
     空いた分を .header-inner の gap（ロゴとナビの間）に回す */
  .nav{ gap:.85rem; font-size:.86rem; }
}

/* ---------- 5. タブレット（〜1024px） ---------- */
@media (max-width:1024px){
  html{ font-size:106.25%; } /* 17px */
}

/* ---------- 6. スマホ（〜768px）：基準16px＋サイズ階層を整理 ---------- */
@media (max-width:768px){
  html{ font-size:100%; } /* 16px */

  /* 見出し */
  .section-heading-large{ font-size:1.5rem; letter-spacing:.04em; }   /* 24px */
  .section-heading-medium{ font-size:1.35rem; letter-spacing:.04em; } /* 21.6px */
  .section-heading-small{ font-size:1.2rem; }
  .section-title-center{ font-size:1.25rem; margin-bottom:1.2rem; }
  .section-title-center .line{ width:32px; }
  .stock-top-left .stock-vline,
  .farm-title .vertical-line,
  .section-head .stock-vline,
  .charm-h2 .stock-vline{ height:1.6rem; }
  .stock-top-left .stock-vline{ margin-top:.3rem; }

  /* 本文（読み物）は 15px・行間1.9 にそろえる */
  .farm-text p, .farm-feature p,
  .charm-about-text p, .charm-sweet-text p, .charm-nutri-lead,
  .faq-a, .contact-form-lead, .modal-news-detail p{
    font-size:.94rem; line-height:1.9; letter-spacing:.02em;
  }
  .farm-lead{ font-size:1rem; line-height:1.8; }
  /* PC用に入れてある改行（<br>）はスマホでは中途半端な位置で折れるので無効に */
  .charm-about-text br, .charm-sweet-text br, .charm-nutri-lead br{ display:none; }

  /* 余白：外側 12px・内側 20px にそろえる */
  .stock, .farm, .charm-section, .lp-section{ padding:.75rem .75rem; }
  .stock-inner, .section-card{ padding:1.5rem 1.25rem; }
  .farm-text-wrap{ padding:1.5rem 1.25rem; }
  .charm-about, .charm-sweet{ padding-left:1.25rem; padding-right:1.25rem; }
  .charm-nutri{ padding:2rem 1.25rem; }
  .news-section-inner{ padding:0 1.25rem; }
  .stock-cards{ padding:.5rem 0; gap:.75rem; }

  /* 直売所／通販の棚 */
  .stock-top{ margin-bottom:.25rem; gap:.75rem; }
  .shelf-lead{ font-size:.82rem; }
  .stock-note{ font-size:.72rem; margin:0; }
  .stock-top-right{ width:100%; }
  .stock--online .btn-order{ display:block; width:100%; text-align:center; padding:.85rem 1rem; }

  /* 商品カード */
  .card-name{ font-size:1rem; margin:.6rem 0 .35rem; }
  .card-info{ font-size:.8rem; }

  /* 農園紹介の特徴ボックス */
  .farm-feature{ padding:1.1rem 1.1rem; }
  .farm-feature-title{ font-size:1.02rem; margin-bottom:.5rem; }
  .farm-feature-grid{ gap:.9rem; }

  /* お知らせ：日付とタグを1行に、タイトルはその下に全幅 */
  .news-item{ display:block; padding:.85rem 0; }
  .news-meta{ flex-direction:row; align-items:center; gap:.5rem; margin-bottom:.3rem; }
  .news-date{ font-size:.8rem; }
  .news-text{ display:block; font-size:.95rem; line-height:1.6; }

  /* よくある質問 */
  .faq-q span:nth-child(2){ font-size:.95rem; }

  /* お問い合わせ */
  .contact-tel-label{ font-size:.85rem; letter-spacing:.15em; }
  .contact-tel-number{ font-size:1.5rem; }

  /* フッター */
  .footer-addr, .footer-tel-col{ font-size:.85rem; line-height:1.9; }
  .footer-tel-col{ padding-top:1rem; }

  /* 注文ページの見出し */
  .order-page-head{ padding:1.5rem .75rem .25rem; }
  .order-page-head-inner{ padding:0 .5rem; }
  .order-page-head h1{ font-size:1.6rem; margin:.1rem 0 .3rem; }

  /* 品種紹介：他のセクションと外側・内側の余白をそろえる */
  .variety{ padding:.75rem .75rem; }
  .variety-inner{ padding:1.5rem 1.25rem; }

  /* 写真のコラージュ下の空きを詰める */
  .farm-img-stack{ min-height:330px; }
  .charm-sweet{ padding-bottom:1rem; }
  .charm-nutri{ padding-top:1.5rem; }

  /* フッター：住所と電話の間の空きを詰める */
  .footer-inner{ gap:.75rem; }
  .footer-tel-col{ padding-top:0; }
}

/* 注文ページの注意書き（※を行頭にそろえ、2行目以降は字下げ） */
.order-notice-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.35rem; }
.order-notice-list li{ position:relative; padding-left:1.2em; line-height:1.7; }
.order-notice-list li::before{ content:"※"; position:absolute; left:0; }

/* 通販の規格は長い（例「フルーツキャップあり・13玉以上〜」）。
   PC は1行、スマホは「・」の区切りごとに改行して2行で見せる（言葉の途中で折らない）。
   カードの高さをそろえるため、スマホでは常に2行分の高さを確保する */
.unit-seg{ white-space:nowrap; }
.stock--online .card-info > div:first-child dd{ white-space:normal; text-align:center; }
@media (max-width:768px){
  .stock--online .card-info > div:first-child dd{
    min-height:3em; line-height:1.5; display:flex; flex-direction:column; justify-content:center;
  }
  .stock--online .card-info{ padding:0 .25rem; }
  .stock--online .card-info > div{ padding:0 .25rem; }
  .stock--online .card-info .unit-seg{ display:block; font-size:.95em; }
  .stock--online .card-info .unit-sep{ display:none; }
  .order-pick-meta .unit-seg{ display:block; }
  .order-pick-meta .unit-sep{ display:none; }
}
.order-pick-meta{ white-space:normal; }
/* 幅の狭いスマホ：注文の一覧は小さい画像を外して規格の文字幅を確保。
   さらに狭い端末（〜340px）はカードの規格の文字を少し小さく */
@media (max-width:400px){
  .order-pick-img{ display:none; }
  .order-pick{ padding-left:.9rem; }
}
@media (max-width:340px){
  .stock--online .card-info .unit-seg{ font-size:.8em; letter-spacing:-.02em; }
  .stock--online .card-info > div{ padding:0 .1rem; }
}