@charset "utf-8";

/* キャンペーン全体のラップ部分 */
.campaign-wrap {
  padding: 40px;
  background-color: #444;
}

/* 情報部分の上マージン */
.info-wrap {
  margin-top: 10px;
}

/* タイトルのデザイン */
.campaign-title {
  color: #fff;
  font-size: 40px;
  line-height: 1.2;
  font-family: 'Noto Serif JP', serif !important;
}

/* センター寄せ共通クラス */
.center {
  text-align: center;
}

/* キャンペーンテキスト（1つ目のp） */
.campaign-txt {
  margin-top: 30px;
  color: #fff;
  font-size: 150%;
  font-family: 'Noto Serif JP', serif !important;
}

.campaign-date {
  font-size: 150%;
  color: #fff;
  margin: 20px;
  font-family: 'Noto Serif JP', serif !important;
}

/* ボタンラップ */
.campaign-btn {
  margin: 0 auto;
  margin-top: 20px;
  margin-bottom: 20px;
  width: 440px;
  max-width: 100%; /* スマホ溢れ防止 */
}

/* メインコンテナ */
.product-banner {
  max-width: 840px;
  margin: 0 auto;
  background: #fff;
  padding: 30px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  box-sizing: border-box;
}

/* 共通セクションレイアウト */
.section-product {
  margin-bottom: 30px;
}
/* 左と中央（同じ行） */
.product-upper {
  display: flex;
  gap: 30px;
  margin-bottom: 25px;
}
/* 右にあった情報を改行（下のブロック） */
.product-lower {
  display: flex;
  gap: 30px;
  background: #f9f9f9;
  padding: 25px;
  border-radius: 8px;
  border: 1px solid #eee;
}
.align-center {
  align-items: center;
}

/* 上部エリア（画像と特徴） */
.col-image {
  width: 38%;
  position: relative;
}
.col-features {
  width: 62%;
}

.img-main {
  width: 100%;
  aspect-ratio: 4/5;
  background: #e0e0e0;
  object-fit: cover;
}

.main-title {
  font-size: 1.5rem;
  margin-bottom: 15px !important;
  font-weight: bold;
}
.tech-header {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
  align-items: flex-start;
}
.tech-logo {
  width: 60px;
}
.tech-header-text h3 {
  font-size: 1.1rem;
  margin-bottom: 8px;
  line-height: 1.4;
}
.tech-header-text p { font-size: 0.9rem; }

.effect-cards {
  display: flex;
  gap: 15px;
  margin-bottom: 15px;
}
.effect-card { width: 50%; }
.effect-title {
  background: #eee;
  text-align: center;
  font-size: 0.85rem;
  padding: 6px;
  margin-bottom: 8px;
  font-weight: bold;
}
.effect-img { width: 100%; aspect-ratio: 4/3; margin-bottom: 8px; background: #e0e0e0; }
.effect-card p { font-size: 0.8rem; line-height: 1.5; }
.note { font-size: 0.75rem; color: #666; }

/* 下部エリア（スペックと価格） */
.lower-left {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.lower-right {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* スペック表 */
.spec-title { font-size: 1.1rem; margin-bottom: 10px; font-weight: bold; }
.spec-table { display: flex; gap: 8px; margin-bottom: 12px; }
.spec-col {
  border: 1px solid #778b8f;
  border-radius: 3px;
  overflow: hidden;
}
.col-capacity { flex: 2; }
.col-course { flex: 1; }
.spec-th {
  background: #778b8f;
  color: #fff;
  text-align: center;
  font-size: 0.8rem;
  padding: 4px 0;
}
.spec-th .sup { font-size: 0.65rem; vertical-align: super; }
.spec-td {
  display: flex;
  justify-content: center;
  align-items: baseline;
  background: #fff;
  padding: 8px 0;
}
.td-half { flex: 1; text-align: center; font-size: 0.9rem; }
.td-line { width: 1px; background: #ddd; align-self: stretch; margin: 0 5px; }
.spec-td .num { font-size: 1.4rem; font-weight: bold; margin: 0 3px; }

/* 保証バッジ */
.warranty-badge {
  border: 1.5px solid #d11c1c;
  color: #d11c1c;
  display: inline-block;
  padding: 4px 15px;
  border-radius: 4px;
  font-weight: bold;
  font-size: 0.9rem;
  margin-bottom: 15px;
  background: #fff;
}
.warranty-badge .num { font-size: 1.2rem; margin: 0 4px; }

/* おかってカゴ */
.feature-box {
  background: #fff;
  border: 1px solid #ddd;
  padding: 12px;
  border-radius: 4px;
}
.feature-box h4 { font-size: 0.95rem; margin-bottom: 5px; }
.feature-box p { font-size: 0.8rem; }

/* 価格エリア */
.price-box .price-tech { font-size: 0.9rem; font-weight: bold; margin-bottom: 5px;}
.price-box .price-category {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 12px;
}
.price-box .has-border {
  border-bottom: 2px solid #333;
  padding-bottom: 8px;
}
.price-box .price-model { font-size: 0.95rem; margin-bottom: 5px; }
.price-box .price-label {
  font-size: 0.95rem;
  font-weight: bold;
  color: #d11c1c;
  margin-top: 15px;
}
.price-box .tax-note { color: #333; font-size: 0.8rem; font-weight: normal; }
.price-box .price-amount { color: #d11c1c; margin-top: 5px;}
.amount-num { font-size: 2.8rem; font-weight: bold; letter-spacing: -1px; line-height: 1;}
.amount-yen { font-size: 1.2rem; font-weight: bold; margin-left: 2px;}
.amount-tax { font-size: 0.85rem; color: #333; margin-left: 5px; font-weight: normal; }

/* 区切り線 */
.section-divider {
  border: none;
  border-top: 2px dotted #ccc;
  margin: 30px 0;
}

/* 下段（RDW-406ASM）特有のレイアウト */
.col-image-btm {
  width: 55%;
  display: flex;
  gap: 15px;
}
.img-btm-main { width: 45%; aspect-ratio: 3/4; background: #e0e0e0; object-fit: cover; }
.btm-left-desc { width: 55%; display: flex; flex-direction: column; justify-content: center;}
.pointer-text { font-size: 0.85rem; font-weight: bold; margin-bottom: 10px; line-height: 1.4; }
.color-box { background: #f0f0f0; padding: 10px; font-size: 0.8rem; margin-bottom: 12px; border-radius: 4px;}
.img-btm-sub { width: 100%; background: #d0d0d0; object-fit: cover; }

.col-features-btm {
  width: 45%;
}

.img-icons { width: 80%; background: #e0e0e0; object-fit: contain; margin: 0 auto;}

/* フッター帯 */
.footer-banner {
  background: #a38a60;
  color: #fff;
  text-align: center;
  padding: 16px;
  font-weight: bold;
  font-size: 1.1rem;
  margin-top: 10px;
  border-radius: 4px;
}


/* ===============================================
   スマホ用レスポンシブ設定 (768px以下)
   =============================================== */
@media screen and (max-width: 768px) {
  /* キャンペーン全体の微調整 */
  .campaign-wrap {
    padding: 20px 15px;
  }
  .campaign-title {
    font-size: 24px;
  }
  .campaign-txt,
  .campaign-date {
    font-size: 110%;
    margin: 15px 0;
  }

  /* メインコンテナの余白調整 */
  .product-banner {
    padding: 15px;
  }

  /* 上部・下部ブロックを縦並びに */
  .product-upper,
  .product-lower {
    flex-direction: column;
    gap: 20px;
    padding: 15px;
  }

  /* 各カラムの幅を100%に拡張 */
  .col-image,
  .col-features,
  .lower-left,
  .lower-right,
  .col-features-btm {
    width: 100%;
  }

  /* メイン画像を少し小さく中央寄せ */
  .img-main {
    max-width: 280px;
    margin: 0 auto;
  }

  /* 効果カード（接触効果／ジャッキアップ効果）を縦並びにして読みやすく */
  .effect-cards {
    flex-direction: column;
    gap: 15px;
  }
  .effect-card {
    width: 100%;
  }

  /* 下段機種の画像エリア調整 */
  .col-image-btm {
    width: 100%;
    flex-direction: row;
    gap: 10px;
  }
  .img-btm-main {
    width: 45%;
  }
  .btm-left-desc {
    width: 55%;
  }

  /* 価格テキストのサイズ微調整（はみ出し防止） */
  .amount-num {
    font-size: 2.2rem;
  }
  .price-box .price-category {
    font-size: 1.1rem;
  }

  /* アイコン画像のサイズ */
  .img-icons {
    width: 100%;
    max-width: 250px;
  }

  /* フッター帯の文字調整 */
  .footer-banner {
    font-size: 0.95rem;
    padding: 12px;
  }
}