@charset "UTF-8";

/* ==========================================================================
   【伊藤農園 レビュー投稿案内パーツ用 スタイルシート】
   futureshop 埋め込み前提のカプセル化設計
   NotebookLM『自社サイトのコーディング規約』完全準拠
   ========================================================================== */

/* 子要素すべてのボックスモデル設定（専用ラッパー配下のみに適用） */
.ito-review-container *,
.ito-review-container *::before,
.ito-review-container *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ==========================================================================
   メインラッパー（PC基本幅・フォント・ベースカラー）
   ========================================================================== */
.ito-review-container {
  max-width: 740px;
  margin: 0 auto;
  padding: 40px 20px;
  background-color: #FAF9F6;
  color: #4A4636;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: 0.04em;
  -webkit-font-smoothing: antialiased;
}

/* リンク要素の初期リセット */
.ito-review-container a {
  color: inherit;
  text-decoration: none;
  background-color: transparent;
  transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

.ito-review-container a:hover {
  opacity: 0.9;
}

/* 画像要素の初期リセット */
.ito-review-container img {
  border-style: none;
  max-width: 100%;
  height: auto;
  display: block;
}

/* リスト要素の初期リセット */
.ito-review-container ul,
.ito-review-container ol {
  list-style: none;
}

/* ==========================================================================
   1. ポイント特典ヘッダーセクション
   ========================================================================== */
.ito-review-container .ito-review-benefit-card {
  background-color: #FFFFFF;
  border: 2px solid #E2962D;
  border-radius: 12px;
  padding: 32px 24px;
  text-align: center;
  margin-bottom: 10px;
  box-shadow: 0 4px 16px rgba(226, 150, 45, 0.08);
  position: relative;
  overflow: hidden;
}

/* 特典バッジ */
.ito-review-container .ito-review-benefit-badge {
  display: inline-block;
  background-color: #E2962D;
  color: #FFFFFF;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 4px 18px;
  border-radius: 20px;
  margin-bottom: 16px;
}

/* 特典タイトル（和文見出し：Shippori Mincho B1） */
.ito-review-container .ito-review-benefit-title {
  font-family: 'Shippori Mincho B1', serif;
  font-size: 20px;
  font-weight: 700;
  color: #4A4636;
  line-height: 1.5;
  margin-bottom: 16px;
}

/* ポイント数字強調 */
.ito-review-container .ito-review-point-highlight {
  color: #C27E1D;
  font-size: 24px;
  font-weight: 700;
  font-family: 'Noto Sans JP', sans-serif;
  border-bottom: 2px solid #E2962D;
  padding-bottom: 2px;
}

/* 特典説明テキスト */
.ito-review-container .ito-review-benefit-desc {
  font-size: 15px;
  line-height: 1.8;
  color: #4A4636;
  margin-bottom: 12px;
}

/* 注意事項（アテンション：規約により12px許容） */
.ito-review-container .ito-review-benefit-note {
  font-size: 12px;
  color: #8C846F;
  line-height: 1.6;
  display: inline-block;
  background-color: #FAF9F6;
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid #DDD9CE;
}

/* ==========================================================================
   2. ご投稿の流れ（HOW TO POST）セクション
   ========================================================================== */
.ito-review-container .ito-review-step-section {
  margin-bottom: 40px;
}

/* セクションタイトルエリア */
.ito-review-container .ito-review-heading-wrap {
  text-align: center;
  margin-bottom: 28px;
}

/* 英語サブタイトル（規約により12px指定・大文字） */
.ito-review-container .ito-review-section-subtitle {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: #8C846F;
  text-transform: uppercase;
  margin-bottom: 4px;
}

/* セクションメイン見出し（Shippori Mincho B1 24px） */
.ito-review-container .ito-review-section-title {
  font-family: 'Shippori Mincho B1', serif;
  font-size: 24px;
  font-weight: 700;
  color: #4A4636;
  line-height: 1.5;
  margin-bottom: 8px;
}

/* セクションリード文 */
.ito-review-container .ito-review-section-lead {
  font-size: 14px;
  color: #4A4636;
  line-height: 1.6;
}

/* ステップカード一覧グリッド */
.ito-review-container .ito-review-step-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 各ステップカード（白背景・角丸12px） */
.ito-review-container .ito-review-step-card {
  background-color: #FFFFFF;
  border: 1px solid #DDD9CE;
  border-radius: 12px;
  padding: 24px 20px;
  display: flex;
  align-items: flex-start;
  gap: 20px;
  position: relative;
  box-shadow: 0 2px 8px rgba(74, 70, 54, 0.04);
}

/* ステップ番号バッジ */
.ito-review-container .ito-review-step-badge {
  flex: 0 0 76px;
  background-color: #FAF9F6;
  border: 1px solid #E2962D;
  border-radius: 8px;
  padding: 8px 4px;
  text-align: center;
}

.ito-review-container .ito-review-step-number {
  display: block;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #E2962D;
  line-height: 1.2;
  letter-spacing: 0.05em;
}

/* ステップ本文コンテンツ */
.ito-review-container .ito-review-step-content {
  flex: 1;
}

/* ステップタイトル */
.ito-review-container .ito-review-step-title {
  font-family: 'Shippori Mincho B1', serif;
  font-size: 18px;
  font-weight: 700;
  color: #4A4636;
  line-height: 1.4;
  margin-bottom: 8px;
}

/* ステップ説明テキスト */
.ito-review-container .ito-review-step-text {
  font-size: 14px;
  color: #4A4636;
  line-height: 1.7;
}

/* ==========================================================================
   3. 詳細リンクCTAセクション
   ========================================================================== */
.ito-review-container .ito-review-cta-section {
  text-align: center;
  padding-top: 10px;
}

/* 詳細案内ボタン（メインカラー・ホバー演出） */
.ito-review-container .ito-review-cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background-color: #E2962D;
  color: #FFFFFF;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  font-weight: 700;
  padding: 16px 36px;
  border-radius: 30px;
  box-shadow: 0 4px 12px rgba(226, 150, 45, 0.3);
  text-decoration: none;
  min-width: 280px;
}

.ito-review-container .ito-review-cta-button:hover {
  background-color: #C27E1D;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(194, 126, 29, 0.4);
}

/* 矢印アイコン */
.ito-review-container .ito-review-cta-arrow {
  display: inline-block;
  font-size: 14px;
  transition: transform 0.3s ease;
}

.ito-review-container .ito-review-cta-button:hover .ito-review-cta-arrow {
  transform: translateX(4px);
}

/* ==========================================================================
   レスポンシブ設定（SP・タブレット：1039px以下）
   ========================================================================== */
@media screen and (max-width: 1039px) {
  .ito-review-container {
    width: 100%;
    max-width: 100%;
    padding: 30px 16px;
  }

  .ito-review-container .ito-review-benefit-card {
    padding: 24px 16px;
    margin-bottom: 32px;
  }

  .ito-review-container .ito-review-benefit-title {
    font-size: 20px;
  }

  .ito-review-container .ito-review-point-highlight {
    font-size: 24px;
  }

  .ito-review-container .ito-review-section-title {
    font-size: 20px;
  }

  .ito-review-container .ito-review-step-card {
    padding: 20px 16px;
    gap: 14px;
  }

  .ito-review-container .ito-review-step-badge {
    flex: 0 0 64px;
    padding: 6px 2px;
  }

  .ito-review-container .ito-review-step-title {
    font-size: 16px;
  }

  .ito-review-container .ito-review-cta-button {
    width: 100%;
    max-width: 340px;
    padding: 14px 20px;
    font-size: 15px;
  }
}