/* =====================================
 PC / SP 出し分け
===================================== */

.pc-only{display:block!important;}
.sp-only{display:none!important;}

@media (max-width:767px){
.pc-only{display:none!important;}
.sp-only{display:block!important;}
}


/* =====================================
 AIキャンペーン画像
===================================== */

.ai-special-images{
  width:100%;
  margin:0;
  padding:0;
  background-image:url("https://gigaplus.makeshop.jp/oppo/img/review_campaign/top_back.jpg");
  background-size:cover;
  background-position:center top;
  background-repeat:no-repeat;
}

.ai-special-images img{
  width:100%;
  height:auto;
  display:block;
}


/* =====================================
 レイアウト制限解除（MakeShop対策）
===================================== */

.container-mainarea,
.container-detailsarea,
.container-detailsarea0706,
.container-detailsarea0706-flex{
  max-width:none;
  width:100%;
}

.mainarea,
.mainarea-inner{
  width:100%;
}


/* =====================================
 横スクロール防止
===================================== */

html,
body{
  overflow-x:hidden;
}


/* =====================================
 商品一覧エリア
===================================== */

.ai-special-products{
  background:#fff;
  padding:64px 0 14px;
  width:100%;
}

.ai-special-products h1,
.ai-special-products h2,
.ai-special-products h3,
.ai-special-products p,
.ai-special-products span,
.ai-special-products a{
  color:#000;
}


/* =====================================
 商品グリッド
===================================== */

.ai-special-products .grid-block-flex{
  display:grid;
  gap:36px 28px;
}

@media screen and (min-width:768px){

.ai-special-products .grid-block-flex{
  grid-template-columns:repeat(3,1fr);
  max-width:1200px;
  margin:0 auto;
}

}

@media screen and (max-width:767px){

.ai-special-products{
  padding:40px 16px 14px;
}

.ai-special-products .grid-block-flex{
  grid-template-columns:repeat(2,1fr);
  gap:28px 16px;
}

}


/* =====================================
 商品カード
===================================== */

.ai-special-products .contant-item-pro{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  width:100%;
}


/* =====================================
 商品画像
===================================== */

.ai-special-products .product-image{
  width:100%;
}

.ai-special-products .product-image img{
  width:100%;
  height:auto;
  display:block;
  border-radius:6px;
  transition:transform .25s ease;
}

@media (hover:hover){
.ai-special-products .product-image:hover img{
  transform:scale(1.03);
}
}


/* =====================================
 商品名
===================================== */

.ai-special-products .product-name{

  width:72%;
  font-size:18px;
  font-weight:700;
  text-align:center;
  line-height:1.4;

  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;

  margin-bottom:14px;

}

@media screen and (max-width:767px){

.ai-special-products .product-name{
  width:90%;
  font-size:16px;
}

}


/* =====================================
 注釈エリア
===================================== */

.container-textarea.-campaign0706{
  width:100%;
  margin:14px 0 50px;
}

.list-block.-campaign0706{

  max-width:1200px;
  margin:0 auto;
  padding:0;

  list-style:none;

  font-size:12px;
  line-height:1.6;
  color:#666;

}

/* SP対応：商品2列幅に揃える */
@media (max-width:767px) {
  /* 親コンテナを grid と同じ幅に揃える */
  .container-textarea.-campaign0706 {
    padding:0 16px; /* grid の gap と同じだけ左右余白 */
    box-sizing:border-box;
  }

  /* 注釈のブロックも中央寄せに */
  .list-block.-campaign0706 {
    max-width:calc(50% * 2 + 16px); /* 2列分の幅 + gap 1つ分 */
    margin:0 auto;
  }
}

/* SP 注釈文字サイズ調整 */
@media (max-width:767px){

.container-textarea.-campaign0706 li{
    font-size:13px !important;
    line-height:1.7;
}

}