@charset "utf-8";
/* CSS Document */
.mainArea { margin-bottom:50px; }
.center { text-align: center; }
#coupon_gaiyo a{ text-decoration: underline; }
#coupon_gaiyo ul.asterisk li { list-style-type: none; text-indent: -1em; }
#coupon_gaiyo ul.asterisk li:before { display: inline; content: "※"; }
/*　終了ボタン　*/
.button03_cp { display: block; background: #C90027; text-align: center; padding: 18px 0; position: relative; transition: all .3s; pointer-events: none; }
.button03_cp span { color: #fff; font-size: 1.8rem; line-height: 24px; }
#a01 , #b02 { margin-top:-60px; padding-top:60px; }
/* -------------------------------------------------------------------- 
カウンター
-------------------------------------------------------------------- */
#countdown-text {
margin-right: 10px;
font-size: clamp(1rem, 3vw, 1.8rem);
border: 1px solid #fff;
padding: 2px 8px;
font-weight: bold;
color: #fff;
}
#countdown-timer {
font-weight: bold;
}
/* 表示のガタつきをなくすためのスタイル */
#countdown-timer span {
font-size: clamp(2rem, 5vw, 2.5rem);
display: inline-block;
font-weight: bold;
margin-right: 5px;
color: #fff;
}
/* 単位部分のスタイル修正 */
#countdown-timer .unit {
font-size: clamp(1rem, 3vw, 1.8rem);
font-weight: normal;
margin-right: 10px;
}
/*===============================================
●SP 画面の横幅が768pxまで
===============================================*/
@media only screen and (max-width: 768px) {
/*　終了ボタン　*/
.button03_cp { display: block; background: #C90027; width: 100%; text-align: center; padding: 18px 0; position: relative; transition: all .4s; -webkit-transition: all .4s; -moz-transition: all .4s; -ms transition: all .4s; }
.pc {display: none !important;}
.sp {display: block !important;}
img {max-width: 100%;}
#coupon_2604 {width: 100%;}
#coupon_2604 ul { margin: 0;padding: 2% 0 5%;}
#coupon_2604 .fv {background-color: #FCF7F3; }
#coupon_gaiyo {margin: 40px 0;}
.btn {width: 50%; margin: 50px auto;}
#coupon_gaiyo .attention {font-size: 16px; text-align: center; color: #fff; background-color: #666; padding: 5px;margin: 0 3%;}
#coupon_gaiyo section ul li:before {font-size: 13px ;margin-left: -10px;}
#coupon_gaiyo {width: 100%;margin: 20px auto;}
#coupon_gaiyo ul.asterisk {	padding: 5% 2% 0 7%;}
#coupon_gaiyo ul.asterisk li {margin-bottom: 5px;font-size: 12px;}
.cp_end{text-align:center; margin:0px; padding:2%; background-color:#000;}
.cp_end h3{font-size:18px; color:#FFF; line-height:1.3;}
#a01 {margin-bottom: 23px;}
p.kikan { padding: 4% 4% 0 4%; font-weight: bold;}
/* -------------------------------------------------------------------- 
カウンター
-------------------------------------------------------------------- */
#countdown-container {
max-width: 768px;
width: 100%;
margin: auto;
/*position: absolute;*/
/*top: 0;*/
left: 0;
right: 0;
bottom: 10%;
background-color: #ff2675;
color: #fff;
text-align: center;
padding: 4px 0;
/*z-index: 1000;*/
display: flex; /* PC表示では横並び */
justify-content: center;
align-items: center;
flex-wrap: wrap; /* 子要素の折り返しを許可 */
}
#countdown-container {
flex-direction: column; /* 縦並びに変更 */
}
#countdown-text {
margin-right: 0;
margin-bottom: 1px;
}
/* -------------------------------------------------------------------- 
割引
-------------------------------------------------------------------- */
#waribiki { background-color: #FFF5DD; width: 100%; padding: 5% 3%; }
#waribiki p { color: #ff2675; font-size: 16px; text-align: center; font-weight: bold; }
#waribiki ul { margin: 3% 0; }
#waribiki li { font-size: 12px; line-height: 1.5; }
#waribiki ul li {
padding-left: 1em; /* 左側全体に1文字分の余白を作る */
text-indent: -1em; /* 1行目（①や②）だけ1文字分左に戻す */
}
/* -------------------------------------------------------------------- 
ページリンクボタン
-------------------------------------------------------------------- */
#btn ul {
list-style: none; /* リストマーカーをリセット */
margin: 0 3%; /* デフォルトのマージンをリセット */
padding: 0; /* デフォルトのパディングをリセット */
display: flex;
flex-direction: column; /* SP時は縦並びに配置 */
gap: 12px; /* SP時の上下のボタン間余白 */
}
#btn { margin: 20px auto 0; }
#btn li {
margin: 0;
padding: 0;
font-size: 12px;
}
#btn a {
display: block; /* クリック領域を要素全体に広げる */
padding: 16px 32px; /* クリックしやすいよう十分なパディングを確保 */
background-color: #ffffff; /* 背景色: 白 */
border: 1px solid #ff2675; /* 枠の色: #ff2675、線の太さ: 1px */
border-radius: 0; /* 角丸: なし */
color: #000000; /* テキスト色: 黒 */
text-decoration: none; /* リンクの下線をリセット */
text-align: center; /* テキストを中央寄せ */
box-sizing: border-box; /* パディングを含めたサイズ計算 */
transition: filter 0.2s ease, outline 0.2s ease; /* ホバー・フォーカス時のなめらかな変化 */
cursor: pointer;
}
/* アクセシビリティを考慮したキーボードフォーカス時のスタイル */
#btn a:focus-visible {
filter: brightness(0.9); /* ホバー時と同様に明度を下げる */
outline: 2px solid #000000; /* 視認性の高いアウトラインを表示 */
outline-offset: 2px; /* ボタンとアウトラインの間に隙間を設ける */
}
}
/*===============================================
●PC 画面の横幅が768px
===============================================*/
@media only screen and (min-width: 768px) {
/*　終了ボタン　*/
.button03_cp {width: 400px;}
.pc {display: block !important;}
.sp {display: none !important;}
#coupon_2604 {width: 768px;margin: 0 auto;}
#coupon_2604_2 {width: 768px;margin: 0 auto;}
#coupon_2604 h1 {text-align: center;}
#coupon_2604 .fv { position: relative; background-color: #FCF7F3;}
#coupon_2604 .fv ul {width: 768px;margin: 0 auto;padding-bottom: 20px; overflow: hidden;}
#coupon_2604 .fv ul li {float: left;}
#coupon_2604 .btn {margin: 50px;}
#coupon_gaiyo {width: 768px;margin: 50px auto;}
#coupon_gaiyo .attention {font-size: 24px; text-align: center; color: #fff; background-color: #666; padding: 10px; margin: 0 30px;}
#coupon_gaiyo ul.asterisk { padding: 20px 60px;}
#coupon_gaiyo ul.asterisk li {font-size: 16px;margin-bottom: 10px;}
.cp_end{text-align:center; margin:0px; padding:2%; background-color:#000;}
.cp_end h3{font-size:24px; color:#FFF; line-height:1.3;}
.br-pc { display:none;}
p.kikan { font-size: 16px; line-height: 2; font-weight: bold; padding: 20px 37px 0;}
html {font-size: 78.195%;}
body {font-size: 1.2rem;line-height: 1.75em;}
/* -------------------------------------------------------------------- 
カウンター
-------------------------------------------------------------------- */
#countdown-container {
max-width: 768px;
width: 75%;
margin: auto;
/*position: absolute;*/
/*top: 0;*/
left: 0;
right: 0;
bottom: 10%;
background-color: #ff2675;
color: #fff;
text-align: center;
padding: 8px 0;
/*z-index: 1000;*/
display: flex; /* PC表示では横並び */
justify-content: center;
align-items: center;
flex-wrap: wrap; /* 子要素の折り返しを許可 */
}
/* -------------------------------------------------------------------- 
割引
-------------------------------------------------------------------- */
#waribiki { background-color: #FFF5DD; width: 768px; margin: auto; padding: 40px 140px; }
#waribiki p { color: #ff2675; font-size: 24px; text-align: center; font-weight: bold; }
#waribiki ul { margin: 20px 0px; }
#waribiki li { font-size: 16px; line-height: 1.5; }
/* -------------------------------------------------------------------- 
ページリンクボタン
-------------------------------------------------------------------- */
#btn ul {
list-style: none; /* リストマーカーをリセット */
margin: 0; /* デフォルトのマージンをリセット */
padding: 0; /* デフォルトのパディングをリセット */
display: flex;
flex-direction: column; /* SP時は縦並びに配置 */
align-items: center; /* ボタンを中央寄せ（SP時） */
gap: 12px; /* SP時の上下のボタン間余白 */
flex-direction: row; /* PC時は横並びに配置 */
justify-content: center; /* ボタンを中央寄せ（PC時） */
gap: 16px; /* PC時の左右のボタン間余白 */
}
#btn { width: 768px; margin: 50px auto 0; }
#btn li {
margin: 0;
padding: 0;
font-size: 14px;
}
#btn a {
display: block; /* クリック領域を要素全体に広げる */
padding: 16px 32px; /* クリックしやすいよう十分なパディングを確保 */
background-color: #ffffff; /* 背景色: 白 */
border: 1px solid #ff2675; /* 枠の色: #ff2675、線の太さ: 1px */
border-radius: 0; /* 角丸: なし */
color: #000000; /* テキスト色: 黒 */
text-decoration: none; /* リンクの下線をリセット */
text-align: center; /* テキストを中央寄せ */
box-sizing: border-box; /* パディングを含めたサイズ計算 */
transition: filter 0.2s ease, outline 0.2s ease; /* ホバー・フォーカス時のなめらかな変化 */
cursor: pointer;
}
/* ホバー時の効果 */
#btn a:hover {
color: #fff;
background-color: #ff2675;
}
/* アクセシビリティを考慮したキーボードフォーカス時のスタイル */
#btn a:focus-visible {
filter: brightness(0.9); /* ホバー時と同様に明度を下げる */
outline: 2px solid #000000; /* 視認性の高いアウトラインを表示 */
outline-offset: 2px; /* ボタンとアウトラインの間に隙間を設ける */
}
}

/*  ボタンデザイン変更*/
.buttons .button {
background-color: #C90027;
box-shadow: -4px 4px 6px rgba(0, 0, 0, 0.3);
border-color: #000;
border-radius: 6px;
}