@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: #333;
  font-size: 150%;
  font-family: 'Noto Serif JP', serif !important;
}

.campaign-date {
  font-size: 150%;
  color: #333;
  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%;
}

.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以下)
   =============================================== */
   /* ===============================================
      スマホ用レスポンシブ設定 (768px以下)
      =============================================== */
   @media screen and (max-width: 768px) {
     /* 1. 外側の灰色背景（.campaign-wrap）の左右余白を削除 */
     .campaign-wrap {
       padding: 20px 0;
     }

     /* 2. メインコンテナ（.product-banner）の枠線・影・左右余白を解除 */
     .product-banner {
       padding: 15px 5px; /* 画面端ギリギリまで広げる */
       box-shadow: none;  /* ドロップシドウ（影）を消してカード感を無くす */
     }

     /* 3. 下部ブロック（.product-lower）のグレーの囲み枠を解除 */
     .product-lower {
       flex-direction: column;
       gap: 20px;
       padding: 0;            /* 内側の余白をなくす */
       background: transparent;/* 薄グレーの背景色を解除 */
       border: none;          /* 枠線を解除 */
       border-radius: 0;
     }

     /* 4. メイン画像のサイズ制限を解除し、画面幅いっぱいに拡大 */
     .img-main {
       max-width: 100%; /* 横幅いっぱいに表示 */
       margin: 0;
     }

     /* 上部・下部ブロックの縦並び化 */
     .product-upper {
       flex-direction: column;
       gap: 20px;
     }

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

     /* キャンペーンテキスト・文字サイズの微調整 */
     .campaign-title {
       font-size: 24px;
     }
     .campaign-txt,
     .campaign-date {
       font-size: 110%;
       margin: 15px 0;
     }

     /* 効果カード（接触効果／ジャッキアップ効果）を縦並びに */
     .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;
     }
     /* ===============================================
        PC・共通：メイン画像エリア（<p class="img-main">）
        =============================================== */
     .img-main {
       width: 100%;
       margin: 0;
     }

     /* 中の画像（<img>）を親の<p>内にぴったり収める */
     .img-main img {
       width: 100%;
       max-width: 100%;
       height: auto;
       display: block;
       object-fit: cover;
     }


     /* ===============================================
        スマホ用レスポンシブ設定 (768px以下)
        =============================================== */
     @media screen and (max-width: 768px) {

       /* スマホでのメイン画像の配置調整 */
       .img-main {
         max-width: 520px; /* 中央寄せにしたい場合の幅 */
         width: 100%;
         margin: 0 auto;  /* 中央寄せ */
       }

       /* スマホでも画像が絶対にはみ出ないように固定 */
       .img-main img {
         width: 100%;
         max-width: 100%;
         height: auto;
       }

     }