@charset "utf-8";
/* ============================================================
   campaign_all.html 専用の追加スタイル
   （共有 style.css には手を入れず、このファイルで上書き／追加）
   ------------------------------------------------------------
   sec01 : 画像だった見出し・チェックリスト・タグラインをHTMLテキスト化
   背景画像 : images/202410/sec01_bg_all.png
   ============================================================ */

.sec01 { position: relative; }
.sec01 .sec01_inner { position: relative; container-type: inline-size; }
.sec01 .sec01_bg { display: block; width: 100%; height: auto; }
.sec01 .sec01_head,
.sec01 .sec01_check,
.sec01 .sec01_tag { margin: 0; }

/* 見出し */
.sec01 .sec01_head {
  position: absolute; top: 2.4%; left: 0; right: 0; text-align: center;
  font-family: "Noto Serif JP", serif; color: #3b3b3b; line-height: 1.28;
}
.sec01 .sec01_head p { margin: 0; }
.sec01 .sec01_head .lead { font-size: 3.4cqi; font-weight: 500; letter-spacing: .08em; }
.sec01 .sec01_head .h { font-size: 6.4cqi; font-weight: 600; letter-spacing: .13em; white-space: nowrap; }
.sec01 .sec01_head .num { font-size: 10cqi; color: #e07d74; font-weight: 600; letter-spacing: .02em; }
.sec01 .sec01_head .pct { font-size: 6.8cqi; color: #e07d74; font-weight: 600; }
.sec01 .sec01_head .u { display: inline-block; position: relative; }
.sec01 .sec01_head .u::after {
  content: ""; position: absolute; left: -2%; right: -2%; bottom: -6%; height: .5cqi;
  background: #e79c95; border-radius: 50%;
}

/* チェックリスト（吹き出し内） */
.sec01 .sec01_check {
  position: absolute; left: 12.5%; right: 6%; top: 52.5%; bottom: 23%;
  list-style: none; padding: 0;
  display: flex; flex-direction: column; justify-content: space-between;
  font-family: "Noto Sans JP", sans-serif; color: #3b3b3b; font-weight: 500;
}
.sec01 .sec01_check li {
  font-size: 3.72cqi; line-height: 1.2; letter-spacing: .005em; white-space: nowrap;
  padding-left: 7cqi; position: relative; display: flex; align-items: center;
}
.sec01 .sec01_check li::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-55%);
  width: 5cqi; height: 5cqi;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'><rect x='2' y='4' width='20' height='20' rx='3' fill='none' stroke='%23e79a9a' stroke-width='2'/><path d='M6 13 l5 6 L24 2' fill='none' stroke='%23e79a9a' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center/contain;
}
.sec01 .sec01_check mark {
  background: linear-gradient(transparent 42%, #fdef5e 42%, #fdef5e 92%, transparent 92%);
  color: inherit;
}

/* タグライン */
.sec01 .sec01_tag {
  position: absolute; left: 0; right: 0; top: 83.2%; text-align: center;
  font-family: "Noto Sans JP", sans-serif; color: #4a4a4a; font-weight: 700;
  font-size: 4.3cqi; line-height: 1.75; letter-spacing: .02em;
}

/* ============================================================
   catch : mv直下のキャッチ帯（画像→HTMLテキスト化）
   ローズピンク地・黄色数字・両脇斜線飾り・下向き三角のしっぽ
   ============================================================ */
.catch {
  position: relative; background: #d98d97; text-align: center;
  padding: 42px 16px 40px; color: #fff; line-height: 1.5;
  container-type: inline-size;         /* 帯自身の幅を基準にする（cqi用） */
}
.catch .catch__lead {
  margin: 0; font-family: "Noto Sans JP", sans-serif;
  font-weight: 700; letter-spacing: .04em;
  white-space: nowrap;                 /* 常に1行に収める */
  font-size: clamp(12px, 4cqi, 34px);  /* 帯幅に応じて縮小、最大34px */
}
.catch .catch__lead .num { color: #f4df7e; font-size: 1.35em; margin: 0 2px; }
.catch .catch__brand {
  margin: 14px 0 0; font-family: "Noto Sans JP", sans-serif;
  font-size: 36px; font-weight: 700; letter-spacing: .06em;
}
/* 両脇の斜線飾り ＼　／ */
.catch .catch__brand::before,
.catch .catch__brand::after {
  content: ""; display: inline-block; width: 3px; height: 34px;
  background: #fff; border-radius: 2px; vertical-align: -4px; margin: 0 22px;
}
.catch .catch__brand::before { transform: rotate(-20deg); }
.catch .catch__brand::after  { transform: rotate(20deg); }
/* 下部中央の下向き三角（吹き出しのしっぽ） */
.catch::after {
  content: ""; position: absolute; left: 50%; bottom: -22px;
  transform: translateX(-50%);
  border-left: 24px solid transparent; border-right: 24px solid transparent;
  border-top: 22px solid #d98d97;
}
@media (max-width: 767px) {
  .catch { padding: 30px 12px 28px; }
  /* .catch__lead は clamp() で自動縮小するため sp 個別指定なし */
  .catch .catch__brand { font-size: 24px; }
  .catch .catch__brand::before,
  .catch .catch__brand::after { height: 24px; margin: 0 14px; }
  .catch::after {
    bottom: -16px;
    border-left-width: 18px; border-right-width: 18px; border-top-width: 16px;
  }
}

/* ============================================================
   sec03 movieArea : 動画上の見出し（sec03_img02.png）をテキスト化
   元画像 634x87px 相当。旧 .img01 と同じく表示幅95%でセンター配置し、
   自身を container にして cqi でフォントを可変させる
   ============================================================ */
.main .sec03 .bg .movieArea .movieTtl {
  width: 95%;
  margin: 0 auto 19px;
  container-type: inline-size;
  text-align: center;
  font-family: "Noto Sans JP", sans-serif;
  color: #544a47;
}
.main .sec03 .bg .movieArea .movieTtl p { margin: 0; }
.main .sec03 .bg .movieArea .movieTtl .lead {
  font-size: 4.38cqi;   /* 元画像 27.8px 相当 */
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
  margin-top: -.2em;    /* 行ボックス分の上余白を相殺 */
}
.main .sec03 .bg .movieArea .movieTtl .h {
  font-size: 5.99cqi;   /* 元画像 38px 相当 */
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .015em;
  margin-top: .22em;
  white-space: nowrap;
}
.main .sec03 .bg .movieArea .movieTtl .pink { color: #e97b84; }
.main .sec03 .bg .movieArea .movieTtl .num {
  font-size: 1.26em;
  letter-spacing: 0;
}