/* ------------------------------------------------------------------
共通
-------------------------------------------------------------------*/

body {
	background-color: black;
}

main {
    overflow-x: hidden;
}

section {
	margin: 0;
}

.main_banner {
	position: relative;
	height: 355px;
}
@media (max-width: 767px) {
.main_banner  {
    height: auto;
    }
}

.icon_f {
    text-align: center;
}

.icon_f img{
    width: 100px;
    height: auto;
}

/* 元の価格に打ち消し線（斜め線）を適用 */
.price{
    text-decoration: line-through;
}

@media (max-width: 767px) {
br {
    display: none;
    }
}

/* フッター一部が透明で黒くなるため白に塗りつぶし */
#ftr {
    background: #ffff;
}

/* ------------------------------------------------------------------
バナー
-------------------------------------------------------------------*/

.banner_background {
    position:absolute;
    width: 100%;
    background-image:url("https://gigaplus.makeshop.jp/fmdirect01/corekara/img/special_feature/blackfriday/bg_kamifubuki.png");
    background-repeat: repeat-x;
    height: 355px;
}

@media (max-width: 767px) {
.banner_background  {
    position: static;
	background-image: none;
    height: 100%;
    }
}

.main_banner .banner_sp{
    display: none;
}
@media (max-width: 767px) {
.main_banner .banner_sp  {
    display: block;
    }
}

.main_banner img {
    position:absolute;
    width: 100%;
    height: 355px;
}
@media (max-width: 767px) {
.main_banner img  {
    max-width: 100%;
	height: auto;
    position: static;
    }
}

.main_banner .banner_title {
    width: 1200px;
    height: 355px;
    left: 50%;
    transform: translate(-50%,0);
}
@media (max-width: 767px) {
.main_banner .banner_title  {
	max-width: 100%;
    display: none;
    }
}


/* ------------------------------------------------------------------
メインコピー
-------------------------------------------------------------------*/

.m_text {
    width: 800px;
    margin: -20px auto 0;
}

@media (max-width: 767px) {
.m_text {
    width: 100%;
    margin-top: 0;
    padding: 0 2%;
    }
}

.m_text p{
   font-size: 20px;
   color: #ffff;
   text-align: center;
   line-height: 1.9;
}
@media (max-width: 767px) {
.m_text p{
    font-size: 14px;
    line-height: 1.6;
}
.m_text p.sp-hidden br {
display: inline !important;
    }
}

.m_text .m_text_1{
    font-size: 23px;
    font-weight: 500;
}
@media (max-width: 767px) {
.m_text .m_text_1{
   font-size: 15px;
    }
}

.m_text .m_text_2{
    font-size: 28px;
    font-weight: bold;
}
@media (max-width: 767px) {
.m_text .m_text_2{
   font-size: 17px;
    }
}


/* ------------------------------------------------------------------
カテゴリ
-------------------------------------------------------------------*/

section:nth-of-type(1) {
	/*background-color: antiquewhite;*/
	margin-top: 60px;
}
@media (max-width: 767px) {
section:nth-of-type(1) {
    max-width: 100%;
    margin-top: 0;
    }
}

.pickup_frame {
    width: 1200px;
    margin: 0 auto;
}

.pickup {
	position: relative;
	z-index: 1;
	width: 900px;
	display: flex;
	justify-content: space-evenly;
    margin: 0 auto;
}

@media (max-width: 767px) {
.pickup {
    max-width: 100%;
    display: block;
    position: static;
    text-align: center;
    margin-top: 4%;
    }
}


.pickup .pickup_button .btn-b {
    display: inline-block;
    width: 260px;
    line-height: 70px;
    text-align: center;
    text-decoration: none;
    color: #000;
    box-shadow: 0px 5px 0px #a27f32;
    transition: .3s;
    background: linear-gradient(135deg, rgba(195, 155, 66, 1) 10%, rgba(255, 253, 202, 1) 30%, rgba(204, 161, 62, 1) 50%, rgba(229, 191, 94, 1) 60%, rgba(154, 111, 27, 1) 90%, rgba(195, 155, 66, 1) 100%); font-weight: bold;
    border-radius: 5px;
}
@media (max-width: 767px) {
.pickup .pickup_button .btn-b{ 
    width: 70%;
    line-height: 50px;
    margin: 3% 0;
    }
}

#original .pickup .pickup_button .btn-b .text{
    font-size: 25px;
    font-weight: 900;
}
@media (max-width: 767px) {
#original .pickup .pickup_button .btn-b .text{
    font-size: 18px;
    }
}

.pickup .pickup_button .btn-b:hover {
    box-shadow: unset;
    transform: translateY(4px);
}

.pickup .pickup_button a:hover {
    background: linear-gradient(135deg, rgba(195, 155, 66, 1) 10%, rgba(255, 253, 202, 1) 30%, rgba(204, 161, 62, 1) 50%, rgba(229, 191, 94, 1) 60%, rgba(154, 111, 27, 1) 90%, rgba(195, 155, 66, 1) 100%); font-weight: bold;
    opacity: 0.9;
    color: #e41515;
}


/* ------------------------------------------------------------------
クーポン
-------------------------------------------------------------------*/
.coupon{
    width: 1200px;
    margin: 100px auto 0;
}
@media (max-width: 767px) {
.coupon {
    max-width: 100%;
    margin-top: 10px;
    }
}


.coupon .title{
	font-size: 35px;
	font-weight: bold;
	color: #fff;
	text-align: center;
	line-height: 2;
}
@media (max-width: 767px) {
.coupon .title {
	font-size: 22px;
    margin-top: 35px;
    }
}

.coupon_code {
	width: 600px;
	margin: 0 auto;
	/*background: #e50808;*/
}
@media (max-width: 767px) {
.coupon_code  {
	width: 95%;
    }
}

/*
.coupon .coupon_code p {
	width: 600px;
	font-size: 16px;
	color: #fff;
    font-weight: 600;
    text-align: center;
    background-color: #eb1e5e;
	padding: 10px 0;
	margin: 0;
	line-height: 1.3;
}

.coupon .coupon_code span {
	font-size: 35px;
	color: #ffff00;
}
*/

.coupon_code p{
	margin-bottom: 0;
}

.coupon_code img{
	width: 100%;
	height: auto;
}

.coupon_code_frame {
    display: flex;
    align-items: stretch; 
    font-weight: 500;
	margin: 0;
}
@media (max-width: 767px) {
.coupon_code_frame{
    display: block;
    }
}

.coupon_code_title {
    width: 170px;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    color: #fff;
    background-color: #676767;
    display: flex;
    justify-content: center;
    align-items: center;
}
@media (max-width: 767px) {
.coupon_code_title{
	width: 100%;
    padding: 2% 0;
    }
}


.coupon_code_wrap {
    flex-grow: 1; /* 残りの幅をすべて使う */
    position: relative; /* ★ボタンをabsoluteで重ねるための基準点 */
    padding: 0; /* dd自身の余白は不要 */
	margin: 0;
}

.coupon_code_wrap > input[type="text"] {
    width: 100%; /* ★親要素 (dd) の幅いっぱいに広げる */
    padding: 10px 100px 10px 10px; /* ★ボタンのスペース分を右側に確保 */
    box-sizing: border-box; /* ★paddingとborderをwidthに含める */
    outline: none;
    font-size: 25px;
    font-weight: 700;
    line-height: 1.5; /* line-height は一般的な値に調整 */
    text-align: center; /* ★中央揃えだとボタンに重なりやすいので、左寄せに */
    border: 1px solid #ccc; /* 枠線を追加（必要に応じて） */
}
@media (max-width: 767px) {
.coupon_code_wrap > input[type="text"] {
    padding: 2%;
    }
}

.coupon_code_btn {
    position: absolute;
    right: 5px; /* ★右端から5pxの位置に配置 */
    top: 50%;
    transform: translateY(-50%);
    min-width: 90px; /* ボタンの最小幅を確保 */
    background-color: #bdbbbb;
    border-radius: 20px;
    padding: 10px 15px; /* パディングを調整 */
    border: none; /* 枠線は削除 */
    cursor: pointer;
}
@media (max-width: 767px) {
.coupon_code_btn {
    position: static;
    transform: none;
    border-radius: 0;
    width: 100%;
    padding: 2% 0;
    }
}

.coupon_code_btn:hover {
    opacity: 0.7;
}

#coupon-section img {
    border: solid 6px ;
    border-image-slice: 1; 
    border-image-source: linear-gradient(to right, #13b3ff, #f93e3e);
    box-sizing: border-box;
}


/* ------------------------------------------------------------------
ちょっと紙吹雪落ちる
-------------------------------------------------------------------*/

@keyframes confetti-fall {
    0% {
        transform: translateY(-100vh) rotate(0deg); /* 画面外の上からスタート */
        opacity: 0;
    }
    15% {
        opacity: 1; /* すぐに表示 */
    }
    100% {
        transform: translateY(100vh) rotate(720deg); /* 画面外の下まで降下し、2回転 */
        opacity: 0.8; /* 消えきる前に少し透明度を上げる */
    }
}

.confetti {
    position: absolute;
    width: 10px;
    height: 15px;
    background-color: gold; /* 金色に設定 */
    top: -10vh; /* 初期位置を画面外上部に設定 */
    z-index: 999; /* 他の要素より手前に表示 */
    /* アニメーションの適用 */
    animation-name: confetti-fall;
    animation-timing-function: linear; /* 一定の速度で */
    animation-iteration-count: infinite; /* 繰り返す */
}


/* 各要素に異なる開始位置と速度を設定 */
.confetti:nth-child(1) {
    left: 10%;
    animation-duration: 6s; /* 降下にかかる時間 */
    animation-delay: 0s; /* アニメーション開始までの遅延時間 */
}

.confetti:nth-child(2) {
    left: 20%;
    animation-duration: 8s;
    animation-delay: 2s;
}

.confetti:nth-child(3) {
    left: 30%;
    animation-duration: 5s;
    animation-delay: 1s;
}

.confetti:nth-child(4) {
    left: 40%;
    animation-duration: 7s;
    animation-delay: 3s;
}

.confetti:nth-child(5) {
    left: 50%;
    animation-duration: 3s;
    animation-delay: 2s;
}

.confetti:nth-child(6) {
    left: 60%;
    animation-duration: 8s;
    animation-delay: 3s;
}

.confetti:nth-child(7) {
    left: 70%;
    animation-duration: 4s;
    animation-delay: 1s;
}

.confetti:nth-child(8) {
    left: 80%;
    animation-duration: 6s;
    animation-delay: 2s;
}

.confetti:nth-child(9) {
    left: 90%;
    animation-duration: 10s;
    animation-delay: 5s;
}

.confetti:nth-child(10) {
    left: 100%;
    animation-duration: 9s;
    animation-delay: 4s;
}
/* ...紙吹雪の数だけ left, duration, delay を調整します... */



/* ------------------------------------------------------------------
目玉商品
-------------------------------------------------------------------*/

#featured_products-section {
	margin-top: 120px;
	padding: 50px 0 0;
	background-image: repeating-linear-gradient(45deg, #2e2e2e, #2e2e2e 5px, #1d1d1d 5px, #1d1d1d 10px);
}
@media (max-width: 767px) {
#featured_products-section {
	margin-top: 35px;
    }
}

.featured_products {
	width: 1200px;
	margin: 0 auto;
}
@media (max-width: 767px) {
.featured_products {
	max-width: 100%;
    }
}

.featured_products .title{
	font-size: 35px;
    font-weight: bold;
    color: #fff;
    text-align: center;
    margin: 15px 0 30px;
}
@media (max-width: 767px) {
.featured_products .title {
	font-size: 25px;
    margin: 5px 0 20px;
    }
}

.featured_products .off{
	text-align: center;
    color: #fff;
    background: red;
    line-height: 1.6;
    font-size: 55px;
    font-weight: 700;
}
@media (max-width: 767px) {
.featured_products .off {
	font-size: 35px;
    margin: 10px 0;
    }
}

.featured_products .frame{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	margin: 60px 0;
}

.featured_products .frame .frame_box{
	width: 35%;
	background: #ffffff;
	margin-bottom: 80px;
	border-radius: 13px;
	border: 10px solid #ffffff;
    padding-bottom: 10px;
}
@media (max-width: 767px) {
.featured_products .frame .frame_box {
	width: 90%;
    margin-bottom: 3%;
	border: 5px solid #ffffff;
    }
}


.featured_products .frame .frame_box img{
	width: 100%;
	border-radius: 10px 10px 0 0;
}

.featured_products .frame p{
	color: #000;
	text-align: center;
	margin: 0;
}

.featured_products .frame .product_name{
	font-weight: bold;
	font-size: 22px;
	padding: 10px 0;
    line-height: 1.5;
}
@media (max-width: 767px) {
.featured_products .frame .product_name {
    font-size: 20px;
    }
}

.featured_products .frame .price{
	font-weight: bold;
	font-size: 25px;
	margin-bottom: 5px;
}
@media (max-width: 767px) {
.featured_products .frame .price {
    font-size: 20px;
    margin-bottom: 1%;
    }
}

.featured_products .frame span{
	font-size: 20px;
	color: #f93e3e;
}

.featured_products .frame .price_tax{
	font-size: 13px;
}


.featured_products .frame .discount_price{
	text-align: center;
	margin: 0;
}

.featured_products .frame .discount_price span{
	font-size: 35px;
	font-weight: 700;
	color: #f93e3e;
}
@media (max-width: 767px) {
.featured_products .frame .discount_price span{
    font-size: 30px;
    }
}

.featured_products .frame .discount_price .discount_tax{
	font-size: 18px;
}

.featured_products .frame .frame_box .triangle-down {
    width: 0;
    height: 0;
    margin: 15px auto;
    border-top: 15px solid red;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: none; 
}
@media (max-width: 767px) {
.featured_products .frame .frame_box .triangle-down {
	margin: 5px auto;
    border-top: 10px solid red;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    }
}

.featured_products .frame .frame_box img:hover {
	opacity: 0.7;
	transition: 0.3s;
}



/* ------------------------------------------------------------------
ピックアップ
-------------------------------------------------------------------*/

.recommendation_products {
	width: 1200px;
	margin: 0 auto;
}
@media (max-width: 767px) {
.recommendation_products {
	max-width: 100%;
    }
}

.recommendation_products .title{
	font-size: 35px;
	font-weight: bold;
	color: #fff;
	text-align: center;
	margin-top: 5px;
	margin-bottom: 0;
    line-height: 1.7;
}
@media (max-width: 767px) {
.recommendation_products .title{
	font-size: 25px;
    margin: 5px 0 20px;
    padding-bottom: 5px;
    }
}

.recommendation_products .frame{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	margin: 30px 0;
	
}

.recommendation_products .frame .frame_box{
	width: 28.3333%;
	background: #ffffff;
	padding-bottom: 10px;
	border-radius: 13px;
	border: 10px solid #ffffff;
	margin-bottom: 40px;
}
@media (max-width: 767px) {
.recommendation_products .frame .frame_box{
    width: 45%;
    margin-bottom: 10px;
    padding-bottom: 0;
    border: 5px solid #ffffff;
    }
}

.recommendation_products .frame .frame_box_empty{
	width: 28.3333%;
    padding-bottom: 10px;
    border-radius: 13px;
    margin-bottom: 40px;
}

@media (max-width: 767px) {
.recommendation_products .frame .frame_box_empty{
        width: 45%;
        margin-bottom: 10px;
        padding-bottom: 0;
    }
}


.recommendation_products .frame .frame_box img{
	width: 100%;
	border-radius: 10px 10px 0 0;
}

.recommendation_products .frame p{
	color: #000;
	text-align: center;
	margin: 0;
}

@media (max-width: 767px) {
.recommendation_products .frame p{
    padding: 2%;
    }
}


.recommendation_products .frame .product_name{
	font-weight: bold;
	font-size: 18px;
	padding: 10px 0;
}

@media (max-width: 767px) {
.recommendation_products .frame .product_name{
	font-size: 14px;
    padding: 5% 0;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    height: 45px;
    }
}

.recommendation_products .frame .price{
	font-weight: bold;
	font-size: 22px;
	margin-bottom: 5px;
}
@media (max-width: 767px) {
.recommendation_products .frame .price{
	font-size: 15px;
    }
}

.recommendation_products .frame span{
	font-size: 16px;
	color: #f93e3e;
}

.recommendation_products .frame .price_tax{
	font-size: 13px;
}
@media (max-width: 767px) {
.recommendation_products .frame .price_tax{
	font-size: 12px;
    }
}

.recommendation_products .frame .discount_price{
	text-align: center;
	margin: 0;
}

.recommendation_products .frame .discount_price span{
	font-size: 33px;
	font-weight: bold;
	color: #f93e3e;
}

@media (max-width: 767px) {
.recommendation_products .frame .discount_price span{
    font-size: 21px;
    }
}

.recommendation_products .frame .discount_price .discount_tax{
	font-size: 18px;
}

@media (max-width: 767px) {
.recommendation_products .frame .discount_price .discount_tax{
	font-size: 14px;
    }
}

.recommendation_products .frame .frame_box .triangle-down {
    width: 0;
    height: 0;
    margin: 10px auto;
    border-top: 10px solid red;
    border-left: 15px solid transparent; 
    border-right: 15px solid transparent; 
    border-bottom: none; 
}
@media (max-width: 767px) {
.recommendation_products .frame .frame_box .triangle-down{
    margin: 0 auto;
	border-top: 10px solid red;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    }
}


#recommendation-section .button_frame {
    text-align: center;
}

#recommendation-section .button_frame .button-b .btn-b{
    display: inline-block;
    width: 500px;
    line-height: 70px;
    text-decoration: none;
    box-shadow: 0px 5px 0px #a27f32;
    transition: .3s;
    background: linear-gradient(135deg, rgba(195, 155, 66, 1) 10%, rgba(255, 253, 202, 1) 30%, rgba(204, 161, 62, 1) 50%, rgba(229, 191, 94, 1) 60%, rgba(154, 111, 27, 1) 90%, rgba(195, 155, 66, 1) 100%); font-weight: bold;
    border-radius: 5px;
}
@media (max-width: 767px) {
#recommendation-section .button_frame .button-b .btn-b{
        width: 70%;
        line-height: 50px;
        margin: 3% 0;
    }
}

#recommendation-section .button_frame .button-b a{
	color: #000;
	text-decoration: none;
}

#recommendation-section .button_frame .button-b p{
	position: relative;
	z-index: 1;
	text-align: center;
	font-size: 20px;
}
@media (max-width: 767px) {
#recommendation-section .button_frame .button-b p{
	font-size: 18px;
    }
}

#recommendation-section .button_frame .button-b .btn-b:hover {
    box-shadow: unset;
    transform: translateY(4px);
}

#recommendation-section .button_frame .button-b a:hover {
    background: linear-gradient(135deg, rgba(195, 155, 66, 1) 10%, rgba(255, 253, 202, 1) 30%, rgba(204, 161, 62, 1) 50%, rgba(229, 191, 94, 1) 60%, rgba(154, 111, 27, 1) 90%, rgba(195, 155, 66, 1) 100%); font-weight: bold;
    opacity: 0.9;
    color: #e41515;
}

.recommendation_products .frame .frame_box  img:hover {
	opacity: 0.7;
	transition: 0.3s;
}


/* ------------------------------------------------------------------
豆知識
-------------------------------------------------------------------*/
.trivia{
    margin: 0 auto;
    padding: 100px 0;
}
@media (max-width: 767px) {
.trivia{
    padding: 20% 5%;
    }
}

.trivia .icon_f {
	text-align: center;
}

.trivia .icon_f img{
    width: 90px;
    height: auto;
}

.trivia_frame{
    background: white;
    width: 1000px;
    padding: 0 50px 50px;
    margin: 0 auto;
	border-radius: 13px;
}
@media (max-width: 767px) {
.trivia_frame {
	max-width: 100%;
    padding: 5%;
    }
}

.trivia h2{
    width: 500px;
    margin: 10px auto 25px;
    text-align: center;
    font-size: 30px;
    font-weight: bold;
    color: white;
}
@media (max-width: 767px) {
.trivia h2 {
    max-width: 100%;
    font-size: 18px;
    margin: 5px 0 20px;
    padding-bottom: 5px;
    }
}

.trivia h2 span{
    color: #083579;
}

.trivia_frame .icon{
    text-align: center;
    line-height: 1.5;
}

.trivia_frame .icon img{
    width: 30px;
}

.trivia_frame  h3{
    font-size: 24px;
	text-align: center;
    font-weight: bold;
	margin-top: 10px;
}
@media (max-width: 767px) {
.trivia_frame  h3{
    font-size: 20px;
    }
}

.trivia_frame .sentence2{
    text-align: left;
    line-height: 2;
    margin-top: 20px;
}

.trivia_frame .trivia_frame_box{
width: 895px;
margin: 0 auto;
padding-top: 50px;
opacity: 0; /* 透明 */
transform: translateY(30px); /* 下に30px移動 */
transition: opacity 1s ease-out, transform 1s ease-out; /* 変化に1秒かける */
}
@media (max-width: 767px) {
.trivia_frame .trivia_frame_box {
	width: 95%;
    padding: 5% 0;
    }
}

/* is-animatedクラスが付与された時のスタイル */
.trivia_frame_box.is-animated {
opacity: 2; /* 不透明 */
transform: translateY(0); /* 元の位置に戻る */
}

/* ボックスごとに遅延を持たせるためのスタイル */
/* jQuery側でdata属性などで制御することも可能ですが、CSSで指定することもできます */
.trivia_frame_box:nth-child(1).is-animated {
transition-delay: 0.2s; /* 最初のボックスは0.2秒遅れて開始 */
}

.trivia_frame_box:nth-child(2).is-animated {
transition-delay: 0.4s; /* 2番目のボックスは0.4秒遅れて開始 */
}



/* ------------------------------------------------------------------
クーポンご利用詳細
-------------------------------------------------------------------*/

/* --- 1. 基本設定 --- */
.campaign-rules {
  width: 100%; /* 親要素の幅いっぱいに広げる */
  max-width: 1000px; /* 必要に応じて最大幅を設定 */
  margin: 0 auto; /* 中央寄せ */
  font-family: sans-serif; /* 見やすいフォントに */
}
@media (max-width: 767px) {
.campaign-rules {
	width: 95%;
    margin: 0 auto 10px;
    }
}

@media (max-width: 767px) {
.campaign-rules br{
display: block;
    }
}

/* --- 2. タイトル --- */
.campaign-rules h2 {
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
    padding-bottom: 5px;
    color: #fff;
}
@media (max-width: 767px) {
.campaign-rules h2 {
    font-size: 20px;
    }
}

/* --- 3. テーブル全体 --- */
.campaign-rules table {
    width: 100%;
    border-collapse: collapse; /* セルの境界線を重ねて一重にする */
    border: 1px solid #ccc; /* テーブル全体の枠線 */
}

/* --- 4. 行 (<tr>) --- */
.campaign-rules tr {
    border-bottom: 1px solid #eee; /* 行の下線 */
}
.campaign-rules tr:last-child {
    border-bottom: none; /* 最後の行の下線は消す */
}

/* --- 5. 見出しセル (<th>) - 左側 --- */
.campaign-rules th {
    width: 25%; /* 左側の幅を固定（約1/4） */
    background-color: #e1e1e1; /* 薄いグレーの背景 */
    text-align: left;
    padding: 12px 15px;
    font-size: 14px;
    font-weight: bold;
    vertical-align: top; /* 内容が複数行になっても上端に揃える */
    border-right: 1px solid #ccc; /* thとtdの間の縦線 */
}

/* --- 6. データセル (<td>) - 右側 --- */
.campaign-rules td {
    width: 75%;
    padding: 12px 10px;
    font-size: 14px;
    text-align: left;
    vertical-align: top;
    background: #fff;
}

/* --- 7. 特殊な文字装飾 --- */
.campaign-rules .emphasis {
    font-weight: bold;
  /* color: red; */
}

.campaign-rules_link{
    font-weight: bold;
}

.campaign-rules a:visited{
    color: #f93e3e;
}

@media screen and (max-width: 768px) {
  /* 1. テーブル全体の枠線は解除し、行の線だけにする */
.campaign-rules table {
    border: none;
    }

  /* 2. テーブルの行（tr）をブロック要素として扱う */
.campaign-rules tr {
    display: block;
    margin-bottom: 0; /* 行間にスペースを作る */
    border: 1px solid #ccc; /* 行全体を囲む枠線 */
    }

/* 3. 見出しセル (th) と データセル (td) をブロック要素として扱う */
.campaign-rules th,
.campaign-rules td {
    display: block;
    width: 100%; /* 幅を100%にする */
    border-right: none; /* thとtdの間の縦線を解除 */
    }

/* 4. 見出しセル (th) のスタイルを調整 */
.campaign-rules th {
    background-color: #f0f0f0; /* 背景色を少し濃くして見出しを強調 */
    font-size: 15px;
    padding: 10px;
    }

/* 5. データセル (td) の調整 */
.campaign-rules td {
    padding: 10px;
    }
}