@charset "UTF-8";

/* ==================================================
   全体共通設定
================================================== */
.container {
  max-width: 900px;
  margin: 0 auto;
  color: #333333;
  line-height: 1.8;
  font-family: sans-serif;
}

/* ==================================================
   共通コンポーネント・ブロック
================================================== */

/* セクション外白余白 */
.sec-margin {
  margin: 0 0 45px;
}

/* 背景ありセクション */
.bg-section {
  margin: 0 0 45px;
  padding: 35px 20px;
  background-color: #f7f5ef;
}

.bg-section--compact {
  padding: 30px 20px;
}

/* サブタイトル / 英文キャッチ */
.sub-title {
  font-size: 13px;
  letter-spacing: 2px;
  color: #888888;
}

.sub-title--dark {
  color: #777777;
}

/* セクション見出し（黒帯） */
.section-heading-dark {
  padding: 13px 15px;
  background-color: #555555;
  color: #ffffff;
  text-align: center;
  font-size: 21px;
  font-weight: bold;
}

/* 枠線付きボックス */
.bordered-box {
  padding: 30px 20px;
  text-align: center;
  border: 1px solid #dddddd;
}

.bordered-box__highlight {
  margin: 25px auto 0;
  max-width: 560px;
  padding: 15px 10px;
  background-color: #f5f5f5;
  font-weight: bold;
}

/* テキストセンター寄せ汎用 */
.text-center {
  text-align: center;
}

/* ==================================================
   メインタイトル（ファーストビュー）
================================================== */
.main-hero {
  margin: 0 0 40px;
  padding: 35px 20px;
  text-align: center;
  background-color: #f7f5ef;
}

.main-hero__title {
  margin: 8px 0 18px;
  font-size: 30px;
  line-height: 1.5;
}

.main-hero__lead {
  margin: 0;
  font-size: 21px;
  font-weight: bold;
  line-height: 1.6;
  text-align: center; /* 【修正】中央揃えを追加 */
}

.main-hero__sublead {
  margin: 15px 0 0;
  font-size: 15px;
  text-align: center; /* 【修正】中央揃えを追加 */
}

/* ==================================================
   キャッチフレーズ
================================================== */
.intro-catch {
  margin: 0 0 45px;
  text-align: center;
}

.intro-catch__title {
  margin: 0 0 15px;
  font-size: 25px;
  line-height: 1.5;
}

.intro-catch__text {
  margin: 0 auto;
  max-width: 720px;
  font-size: 16px;
}

/* ==================================================
   4つの特徴（ポイントグリッド）
================================================== */
.point-grid {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -5px;
}

.point-grid__item {
  box-sizing: border-box;
  width: 50%;
  padding: 5px;
}

.point-card {
  height: 100%;
  box-sizing: border-box;
  padding: 25px 18px;
  background-color: #f5f4ef;
  text-align: center;
}

.point-card__label {
  font-size: 13px;
  letter-spacing: 1px;
  color: #888888;
}

.point-card__title {
  margin: 6px 0 10px;
  font-size: 20px;
}

.point-card__text {
  margin: 0;
  font-size: 14px;
}

/* ==================================================
   用途紹介（食材カテゴリ）
================================================== */
.usage-intro {
  padding: 30px 15px;
  text-align: center;
  background-color: #faf9f5;
}

.usage-intro__title {
  margin: 0 0 15px;
  font-size: 25px;
  line-height: 1.5;
}

.usage-intro__text {
  margin: 0 auto;
  max-width: 720px;
  font-size: 15px;
  text-align: center; /* 【修正】中央揃えを追加 */
}

/* 食材カテゴリカード */
.category-card {
  margin-top: 10px;
  padding: 22px 20px;
  border: 1px solid #e2e0d8;
}

.category-card__title {
  margin: 0 0 10px;
  padding-left: 12px;
  font-size: 20px;
}

.category-card__title--vegetable { border-left: 5px solid #8a9a5b; }
.category-card__title--fruit     { border-left: 5px solid #b98272; }
.category-card__title--seafood   { border-left: 5px solid #7895a5; }
.category-card__title--wagashi   { border-left: 5px solid #b69a67; }
.category-card__title--yogashi   { border-left: 5px solid #b68a8a; }
.category-card__title--tea       { border-left: 5px solid #87966b; }
.category-card__title--other     { border-left: 5px solid #888888; }

.category-card__text {
  margin: 0;
  font-size: 14px;
}

/* ==================================================
   使いやすさリスト
================================================== */
.usability-item {
  padding: 25px 15px;
  border-bottom: 1px solid #dddddd;
}

.usability-item:last-child {
  border-bottom: none;
}

.usability-item__title {
  margin: 0 0 10px;
  font-size: 20px;
}

.usability-item__text {
  margin: 0;
  font-size: 14px;
}

/* ==================================================
   サイズスペック（3列グリッド）
================================================== */
.size-grid {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -5px;
}

.size-grid__item {
  box-sizing: border-box;
  width: 33.333%;
  padding: 5px;
}

.size-card {
  padding: 18px 5px;
  background-color: #ffffff;
}

.size-card__label {
  font-size: 12px;
  color: #888888;
}

.size-card__value {
  font-size: 23px;
  font-weight: bold;
}

/* ==================================================
   製品仕様（テーブル）
================================================== */
.spec-wrapper {
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 10px 0;
  margin: 0;
}

.spec-table {
  width: 100% !important;
  max-width: 100% !important;
  display: table !important;
  border-collapse: collapse !important;
  font-size: 14px;
  table-layout: fixed !important; /* セル幅を均等固定 */
  box-sizing: border-box !important;
}

.spec-table th {
  width: 30% !important; /* 左側（見出し）の幅 */
  padding: 13px 15px !important;
  background-color: #f3f3f0;
  border: 1px solid #dddddd;
  text-align: left;
  box-sizing: border-box !important;
  vertical-align: middle;
}

.spec-table td {
  width: 70% !important; /* 右側（内容）の幅 */
  padding: 13px 15px !important;
  border: 1px solid #dddddd;
  box-sizing: border-box !important;
  vertical-align: middle;
}

.spec-note {
  margin: 10px 5px 0;
  font-size: 12px;
  color: #777777;
}

/* ==================================================
   最終訴求
================================================== */
.final-appeal {
  margin: 0 0 20px;
  padding: 40px 20px;
  text-align: center;
  border-top: 1px solid #dddddd;
  border-bottom: 1px solid #dddddd;
}

.final-appeal__title {
  margin: 8px 0 18px;
  font-size: 27px;
  line-height: 1.5;
}

.final-appeal__text {
  margin: 0 auto;
  max-width: 700px;
  font-size: 15px;
  text-align: center; /* 【修正】中央揃えを追加 */
}

.final-appeal__catch {
  margin: 20px 0 0;
  font-size: 17px;
  font-weight: bold;
  text-align: center; /* 【修正】中央揃えを追加 */
}

.final-appeal__product {
  margin: 8px 0 0;
  font-size: 16px;
  text-align: center; /* 【修正】中央揃えを追加 */
}

/* ==================================================
   注意事項・備考（item_desc）
================================================== */
.item_desc dt {
  font-weight: bold;
  margin-top: 15px;
}

.item_desc dd {
  margin-left: 0;
}