/* 注意書 */
.caution_list {
  list-style: none;
  padding: 8% 2% 3%;
  margin: clamp(5px, calc(8 / 1024 * 100vw), 8px) auto 0;
  text-align: left;
  display: block;

  font-weight: 700;
  font-family: "Noto Sans JP", sans-serif;
  font-style: normal;
  line-height: 1.7;
  font-size: clamp(12px, calc(12 / 750 * 100vw), 18px);

  width: 100%;
  max-width: 700px;
  word-break: break-all;
}

.caution_list li {
  margin-bottom: 0.6em; 
  display: flex;
  align-items: flex-start;
}

.caution_list li::before {
  content: "※";
  flex-shrink: 0;
  margin-right: 0.3em; 
}

.caution_list.--black { color: #000000; }
.caution_list.--white { color: #ffffff; }

/* 背景 */
.bg_wh { background-color: #ffffff; }
.bg_bl { 
  background-color: #000000; 
  padding: 20px 0; 
}


/* ↓カード領域↓ */

/* 1. 内側700px （カード全体） */
.banner_card {
  max-width: 700px;
  width: 93.333%;            
  background-color: #f7f4aa;
  border-radius: 28px;
  margin: 0 auto;
  padding-bottom: 24px;      
  box-sizing: border-box;

  position: relative;
  display: flex;
  flex-direction: column;
}

/* 2. card1 （ヘッダー） */
.banner_card_header {
  width: 100%;
  margin: 0 0 35px;
  border-top-left-radius: 28px;
  border-top-right-radius: 28px;
  overflow: hidden;
  
  position: relative;
  z-index: 1;
}

/* 3. 内側660px （白ボックス） */
.banner_white_box {
  max-width: 660px;
  width: 94.285%;
  margin: 30px auto 0;
  background-color: #ffffff;
  border-radius: 20px;
  padding: 0 12px 16px;
  box-sizing: border-box;
  
  position: relative;
  z-index: 5;
}

/* 4. card2 （透過PNGを入れるラッパー） */
.card2_wrapper {
  width: 100%;
  margin-top: -50px;
  margin-bottom: 12px;
  
  position: relative;
  z-index: 10;
}

/* カード内テキスト */
.banner_card_note {
  margin: 0;
  padding: 0 2%;
  font-size: clamp(12px, calc(18 / 750 * 100vw), 18px);
  font-weight: bold;
  color: #111111;
  text-align: center;
  line-height: 1.4;
  letter-spacing: -0.02em;
}

/* ↑カード領域↑ */

/* ===================================
   期間テキスト（白背景帯付き）
   =================================== */

.period_text_wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-family: "Impact", "Arial Black", "Noto Sans JP", sans-serif;
  color: #000000;
  line-height: 1;
  letter-spacing: -0.04em;
  padding: 24px 0 20px; /* 白帯の中の上下パディング */
}

/* 数字 */
.p_num {
  font-size: clamp(38px, calc(58 / 750 * 100vw), 58px);
  font-weight: 900;
  transform: scaleY(1.15);
  display: inline-block;
}

/* スラッシュ（/） */
.p_slash {
  font-size: clamp(34px, calc(52 / 750 * 100vw), 52px);
  font-weight: 900;
  margin: 0 -1px;
  transform: scaleY(1.15);
  display: inline-block;
}

/* 丸型の曜日アイコン（黒背景＋白抜き文字） */
.p_day {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(26px, calc(40 / 750 * 100vw), 40px);
  height: clamp(26px, calc(40 / 750 * 100vw), 40px);
  background-color: #000000;
  color: #ffffff;
  border-radius: 50%;
  font-size: clamp(16px, calc(25 / 750 * 100vw), 25px);
  font-weight: 900;
  font-family: "Noto Sans JP", sans-serif;
  margin: 0 2px 0 3px;
  letter-spacing: 0;
  flex-shrink: 0;
}

/* 祝日アイコン（白背景＋黒枠線） */
.p_day.--holiday {
  background-color: #ffffff;
  color: #000000;
  border: 2px solid #000000;
  margin-left: 1px;
  box-sizing: border-box;
}

/* 中央の矢印（▶） */
.p_arrow {
  font-size: clamp(14px, calc(20 / 750 * 100vw), 20px);
  margin: 0 8px;
  transform: scaleY(1.3);
  display: inline-block;
}