/* =========================================================
   梨の品種紹介
   ========================================================= */

.variety{ background:var(--cream); padding:1.8rem 1.2rem; }
.variety-inner{ max-width:1280px; margin:0 auto; background:#fff; border-radius:10px; box-shadow:0 4px 18px rgba(0,0,0,.06); padding:2rem 2.4rem 2.4rem; }
.variety-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.4rem; }
.variety-card{
  background:#fff; border:1px solid #ece9dd; border-radius:10px;
  padding:0; transition:.25s; display:flex; flex-direction:column; overflow:hidden;
}
.variety-card:hover{ box-shadow:0 8px 22px rgba(0,0,0,.09); transform:translateY(-3px); }
.variety-top{ display:flex; flex-direction:row; }
.variety-img{ position:relative; width:180px; aspect-ratio:1/1; align-self:flex-start; flex-shrink:0; border-radius:0; overflow:hidden; margin-bottom:0; }
.variety-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.variety-headspec{ padding:1rem 1.2rem; display:flex; flex-direction:column; flex:1; justify-content:center; }
.variety-name{ font-family:"Noto Serif JP",serif; font-size:1.2rem; color:var(--text); font-weight:600; text-align:left; margin-bottom:.5rem; }
.var-yomi{ font-size:.82rem; color:var(--muted); font-weight:400; }
.variety-desc{ font-size:.94rem; color:#4a4a40; line-height:1.8; padding:0 1.2rem 1rem; }
.variety-divider{ border-top:1px dashed #d8d4c5; margin:.2rem 1.2rem .8rem; }
.variety-spec{ display:flex; flex-direction:column; gap:.5rem; }
.spec-row{ display:flex; align-items:center; gap:.5rem; font-size:.82rem; }
.spec-icon{ flex-shrink:0; display:inline-flex; }
.spec-row dt{ color:var(--green-dark); font-weight:600; min-width:2.6em; }
.spec-row dd{ color:var(--muted); }

/* ===== レスポンシブ =====
   注: 2カラム表示は画像180px+本文が窮屈にならない幅（約900px）が必要。
   600pxまでしか1カラム化しないと、600〜1024px幅（タブレットや分割ウィンドウ）で
   2カラムのまま窮屈に崩れて見えるため、900pxまで1カラム（コンパクト表示）にする。 */
@media (max-width:900px){
  .variety{ padding:1.2rem .8rem; }
  .variety-grid{ grid-template-columns:1fr; }
  .variety-img{ width:100px; aspect-ratio:1/1; align-self:flex-start; flex-shrink:0; }
  .variety-img img{ height:100%; }
  .variety-headspec{ padding:.7rem .85rem; }
  .variety-name{ font-size:1.05rem; margin-bottom:.3rem; }
  .variety-desc{ font-size:.8rem; line-height:1.6; padding:0 .85rem .6rem; }
  .variety-divider{ margin:.2rem .85rem .6rem; }
  .spec-row{ font-size:.78rem; flex-wrap:wrap; row-gap:.15rem; }
  .spec-row dt{ min-width:0; }
  .spec-row dd{ flex-basis:100%; }
}