/* ===================================================================
   平野製作所ブース 製品ページ本文用スタイルシート（ブース共通・1本）
   管理画面 → 製品データ修正 → 「製品ページ用スタイルシート」欄に貼る。

   ※このファイルは出展社ごとに1本しかありません。製品ごとに別の内容を
     貼ると、保存のたびに前の製品のぶんが上書きされて壊れます。
     どの製品を編集するときも、必ずこのファイルの最新版を貼ってください。

   本文を div class="hp-body" で囲んだ範囲だけに当たります。
   （このファイルには山かっこを書かないこと。div や p が続くとHTMLタグ
     とみなされ、「スタイルシートにHTMLタグは書けません」で保存できません）
   =================================================================== */

/* --- ブース側 style.css との調整 ----------------------------------- */
/* 公開ページの本文は .product-description（display:flex）の中の
   flex アイテムに入る。幅の指定が無いと中身の最小幅まで縮んでしまうので、
   残りの幅いっぱいに広がるようにする。min-width:0 は横スライドが
   親を押し広げないために必要。 */
.product-description .description-text{
  flex:1 1 auto;
  min-width:0;
}
/* style.css の figure は「写真の枠」用に width:160px・display:table・
   グレー背景が付いている。本文のギャラリーでは邪魔になるので打ち消す。 */
.hp-body figure{
  display:block;
  width:auto;
  min-width:0;
  max-width:none;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:none;
  float:none;
  text-align:left;
}
/* style.css の figcaption（12pt）も本文用に戻す */
.hp-body figcaption{
  font-size:12.5px;
  line-height:1.7;
}

.hp-body{
  --hp-accent:#49aad2;      /* 平野製作所のコーポレートカラー */
  --hp-accent-dark:#2b7fa8;
  --hp-tint:#eef7fc;
  --hp-line:#e3e7ea;
  --hp-text:#3c4043;
  --hp-sub:#6b7278;
  color:var(--hp-text);
  font-size:15px;
  line-height:1.9;
  text-align:left;
}
.hp-body img{max-width:100%;height:auto}

/* --- リード文 ---------------------------------------------------- */
.hp-body .hp-lead{
  margin:0 0 30px;
  padding:2px 0 2px 16px;
  border-left:3px solid var(--hp-accent);
  font-size:16.5px;
  line-height:1.95;
  color:#2f3337;
}

/* --- 見出し ------------------------------------------------------- */
.hp-body .hp-h{
  margin:36px 0 16px;
  padding-bottom:9px;
  border-bottom:1px solid var(--hp-line);
  font-size:16px;
  font-weight:700;
  letter-spacing:.04em;
  color:#2f3337;
}
.hp-body .hp-h::before{
  content:"";
  display:inline-block;
  width:6px;
  height:6px;
  margin-right:9px;
  border-radius:50%;
  background:var(--hp-accent);
  vertical-align:middle;
}

/* --- 特徴カード（3枚まで推奨） ------------------------------------ */
.hp-body .hp-points{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
  gap:14px;
  margin:0;
  padding:0;
  list-style:none;
}
.hp-body .hp-points li{
  margin:0;
  padding:17px 18px 18px;
  border:1px solid var(--hp-line);
  border-radius:8px;
  background:#fff;
  font-size:14px;
  line-height:1.85;
  color:var(--hp-sub);
}
.hp-body .hp-points-t{
  display:block;
  margin-bottom:7px;
  font-size:14.5px;
  font-weight:700;
  color:var(--hp-accent-dark);
}

/* --- 箇条書き（特徴の詳細など） ------------------------------------ */
.hp-body .hp-list{
  margin:0;
  padding:0;
  list-style:none;
}
.hp-body .hp-list li{
  position:relative;
  margin:0 0 10px;
  padding-left:20px;
  font-size:14.5px;
  line-height:1.85;
}
.hp-body .hp-list li::before{
  content:"";
  position:absolute;
  left:2px;
  top:.75em;
  width:7px;
  height:7px;
  border-radius:2px;
  background:var(--hp-accent);
}

/* --- スペック表 --------------------------------------------------- */
.hp-body .hp-spec{
  width:100%;
  border-collapse:collapse;
  border-top:1px solid var(--hp-line);
  font-size:14.5px;
}
.hp-body .hp-spec th,
.hp-body .hp-spec td{
  padding:13px 16px;
  border-bottom:1px solid var(--hp-line);
  text-align:left;
  vertical-align:top;
  line-height:1.85;
}
.hp-body .hp-spec th{
  width:22%;
  min-width:6em;
  background:var(--hp-tint);
  font-weight:700;
  color:#2f3337;
  white-space:nowrap;
}
.hp-body .hp-spec td{color:var(--hp-sub)}
.hp-body .hp-spec .hp-ask{color:#8a9096}          /* お問合せください等 */

/* --- 対象食材などのタグ -------------------------------------------- */
.hp-body .hp-tags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:0;
  padding:0;
  list-style:none;
}
.hp-body .hp-tags li{
  margin:0;
  padding:3px 11px;
  border:1px solid #cfe6f3;
  border-radius:999px;
  background:var(--hp-tint);
  font-size:13px;
  line-height:1.7;
  color:var(--hp-accent-dark);
}

/* --- 2列の行リスト（サイズと価格・替刃とオプション等） --------------- */
.hp-body .hp-size,
.hp-body .hp-rows{
  margin:0;
  padding:0;
  list-style:none;
  border-top:1px dashed var(--hp-line);
}
.hp-body .hp-size li,
.hp-body .hp-rows li{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:6px 14px;
  margin:0;
  padding:13px 2px;
  border-bottom:1px dashed var(--hp-line);
}
.hp-body .hp-size-d,
.hp-body .hp-rows-d{font-size:14.5px}
.hp-body .hp-rows-d small{
  display:block;
  font-size:12.5px;
  color:var(--hp-sub);
}
.hp-body .hp-size-p,
.hp-body .hp-rows-p{
  font-size:15px;
  font-weight:700;
  color:var(--hp-accent-dark);
  white-space:nowrap;
}

/* --- 囲み（特注のご案内など） -------------------------------------- */
.hp-body .hp-callout{
  margin:26px 0 0;
  padding:16px 18px;
  border:1px solid #cfe6f3;
  border-radius:8px;
  background:var(--hp-tint);
  font-size:14.5px;
  line-height:1.85;
  color:#2f3337;
}
.hp-body .hp-callout b{color:var(--hp-accent-dark)}

/* --- 図版 --------------------------------------------------------- */
.hp-body .hp-figs{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:16px;
  margin:26px 0 0;
}
.hp-body .hp-figs.one{
  grid-template-columns:minmax(0, 560px);
  justify-content:center;
}
.hp-body .hp-figs figure{margin:0}
.hp-body .hp-figs img{
  display:block;
  width:100%;
  border:1px solid var(--hp-line);
  border-radius:8px;
}
.hp-body .hp-figs figcaption{
  margin-top:8px;
  font-size:12.5px;
  line-height:1.7;
  color:var(--hp-sub);
}

/* --- 画像の横スライド ---------------------------------------------- */
/* JavaScript は使いません。横スクロール＋スクロールスナップだけで作ります。
   スマホ・タブレットはスワイプ、パソコンは横スクロールバーと
   Shift＋ホイールで送れます。次の1枚が少し覗くので動くことが分かります。 */
.hp-body .hp-slider{
  display:flex;
  gap:14px;
  margin:26px 0 0;
  padding:0 2px 12px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:#b9c4cb #eef1f3;
}
.hp-body .hp-slider figure{
  flex:0 0 80%;
  max-width:420px;
  margin:0;
  scroll-snap-align:center;
}
.hp-body .hp-slider img{
  display:block;
  width:100%;
  height:230px;
  object-fit:contain;
  padding:6px;
  border:1px solid var(--hp-line);
  border-radius:8px;
  background:#fff;
  box-sizing:border-box;
}
.hp-body .hp-slider figcaption{
  margin-top:8px;
  font-size:12.5px;
  line-height:1.7;
  color:var(--hp-sub);
}
.hp-body .hp-slider::-webkit-scrollbar{height:8px}
.hp-body .hp-slider::-webkit-scrollbar-track{
  background:#eef1f3;
  border-radius:99px;
}
.hp-body .hp-slider::-webkit-scrollbar-thumb{
  background:#b9c4cb;
  border-radius:99px;
}
.hp-body .hp-slider::-webkit-scrollbar-thumb:hover{background:#9aa7b0}
.hp-body .hp-slider:focus{
  outline:2px solid var(--hp-accent);
  outline-offset:3px;
}
.hp-body .hp-slider-hint{
  margin:6px 2px 0;
  font-size:12.5px;
  line-height:1.7;
  color:var(--hp-sub);
  text-align:right;
}
@media screen and (min-width:768px){
  .hp-body .hp-slider figure{flex-basis:48%}
  .hp-body .hp-slider img{height:260px}
}

/* --- 補足・注記 --------------------------------------------------- */
.hp-body .hp-mini{
  margin:12px 0 0;
  font-size:13px;
  line-height:1.8;
  color:var(--hp-sub);
}
.hp-body .hp-note{
  margin:32px 0 0;
  padding:13px 16px;
  border-left:3px solid #d9dee2;
  border-radius:0 6px 6px 0;
  background:#f6f8f9;
  font-size:12.5px;
  line-height:1.8;
  color:#7a8086;
}

/* --- スマートフォン ------------------------------------------------ */
@media screen and (max-width:600px){
  .hp-body{font-size:14.5px}
  .hp-body .hp-lead{font-size:15.5px}
  .hp-body .hp-spec th,
  .hp-body .hp-spec td{
    display:block;
    width:auto;
    padding:11px 14px;
  }
  .hp-body .hp-spec th{
    border-bottom:none;
    white-space:normal;
  }
  .hp-body .hp-size li,
  .hp-body .hp-rows li{justify-content:flex-start}
}