@charset "UTF-8";
/* CSS Document */
/* ==================================================
　共通セクション設定（CSS変数対応）
================================================== */
section {
  position: relative;
  padding: var(--sec-padding);
  z-index: 1;
}
/* ---------- 各セクション共通の内包ブロック ---------- */
section .inner {
  width: 90%;
  max-width: 440px;
  padding-bottom: 1px;
  margin: 0 auto;
  box-sizing: border-box;
}
section .box {
  background: #fff;
  border-radius: 30px;
  box-shadow: var(--box-shadow);
}
#special .box {
  position: relative;
  background: linear-gradient(90deg, #fdf9f1 0%, #f5eedc 40%, #e9dfc3 70%, #fdf9f1 100%);
  border-radius: 0;
}
#special .box::before, #special .box::after {
  content: "";
  position: absolute;
  z-index: 2;
}
#special .box::before {
  width: 150px;
  height: 150px;
  background: url(../img/flame-gold-ribbon-top.webp) no-repeat center / contain;
  top: -10px;
  left: -16px;
}
#special .box::after {
  width: 100px;
  height: 100px;
  background: url(../img/flame-gold-ribbon-bottom.webp) no-repeat center / contain;
  bottom: -1px;
  right: -1px;
}
#special .box .goldline {
  position: relative;
}
#special .box .goldline::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 2px solid transparent;
  border-image: var(--sec06-grad-gold);
  border-image-slice: 1;
}
section .inner .content {
  width: 90%;
  max-width: 380px;
  margin: 0 auto;
  box-sizing: border-box;
}
/* ---------- 画像 ---------- */
figure {
  margin-bottom: 4rem;
}
/* ---------- テキスト ---------- */
p {
  font-size: 1.7rem;
  font-weight: 500;
}
b {
  font-weight: bold;
}
small {
  font-size: 1rem;
}
/*==================== SP ====================*/
@media (max-width:499px) {
  /* ---------- 各セクション共通の内包ブロック ---------- */
  #special .box::before {
    width: 130px;
    height: 130px;
  }
  #special .box::after {
    width: 90px;
    height: 90px;
  }
  #special .box .goldline::before {
    inset: 6px;
  }
  /* ---------- 画像 ---------- */
  figure {
    margin-bottom: 3rem;
  }
  /* ---------- テキスト ---------- */
  p {
    font-size: 1.6rem;
  }
  .note {
    font-size: 1.35rem;
  }
}
/* ==================================================
　mv
================================================== */
#mv {
  position: relative;
  padding: 0;
  z-index: 2;
}
/* ==================================================
  menu（共通矢印）
================================================== */
.chev {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: var(--chev-bottom, 10px);
  width: var(--chev-width, 20px);
  height: calc(var(--chev-thick, 3px) * 4);
}
.chev::before, .chev::after {
  content: "";
  position: absolute;
  bottom: 2px;
  width: calc(var(--chev-width, 20px) * 0.8);
  height: var(--chev-thick, 3px);
  border-radius: var(--chev-radius, 3px);
}
.chev::before {
  left: -3px;
  transform: rotate(38deg);
}
.chev::after {
  right: -3px;
  transform: rotate(-38deg);
}
/* 矢印の色 - 個別 */
.menuCard.grad01 .chev::before, .menuCard.grad01 .chev::after {
  background: var(--sec01-border-color);
}
.menuCard.grad02 .chev::before, .menuCard.grad02 .chev::after {
  background: var(--sec02-border-color);
}
.menuCard.grad03 .chev::before, .menuCard.grad03 .chev::after {
  background: var(--sec03-border-color);
}
.menuCard.grad04 .chev::before, .menuCard.grad04 .chev::after {
  background: var(--sec04-border-color);
}
.menuCard.grad05 .chev::before, .menuCard.grad05 .chev::after {
  background: var(--sec05-border-color);
}
.noticePlaque__link .chev::before, .noticePlaque__link .chev::after {
  background: var(--bg-color);
}
.chev--sm {
  --chev-width: 16px;
  --chev-thick: 3.2px;
}
.chev--md {
  --chev-width: 20px;
  --chev-thick: 3px;
}
.chev--lg {
  --chev-width: 26px;
  --chev-thick: 4px;
}
/* ==================================================
  menu
================================================== */
.menuNav {
  position: relative;
  top: -50px;
  z-index: 2;
}
/* ----------　PC：3列（上段 6:4 / 下段 3.5:3:3.5 相当）---------- */
.menuGrid {
  display: grid;
  grid-template-columns: 3.5fr 3fr 3.5fr;
  gap: 8px;
  width: min(96%, 650px);
  margin: 0 auto;
  align-items: stretch;
}
.menuGrid > li {
  list-style: none;
}
.menuGrid > li:nth-child(1) {
  grid-column: span 6;
}
.menuGrid > li:nth-child(2) {
  grid-column: span 4;
}
.menuGrid > li:nth-child(3) {
  grid-column: 1 / span 3;
}
.menuGrid > li:nth-child(4) {
  grid-column: 4 / span 4;
}
.menuGrid > li:nth-child(5) {
  grid-column: 8 / span 3;
}
/* カード本体 */
.menuCard {
  position: relative;
  display: grid;
  grid-template-rows: 16px 1fr 20px; /* 上帯 / 本文 / 矢印エリア */
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--menu-box-shadow);
  text-decoration: none;
  color: var(--text-sub-color);
  font-weight: 700;
  min-height: clamp(120px, 20vw, 140px);
  height: 100%;
  overflow: hidden;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.menuCard:hover {
  transform: translateY(-4px);
}
/* カード本体 - 個別ボーダー */
.menuCard.grad01 {
  border: var(--sec01-border-color) 4px solid;
}
.menuCard.grad02 {
  border: var(--sec02-border-color) 4px solid;
}
.menuCard.grad03 {
  border: var(--sec03-border-color) 4px solid;
}
.menuCard.grad04 {
  border: var(--sec04-border-color) 4px solid;
}
.menuCard.grad05 {
  border: var(--sec05-border-color) 4px solid;
}
/* 上端グラデ帯 */
.menuCard::before {
  content: "";
  grid-row: 1/2;
  grid-column: 1/-1;
  margin: -1px;
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .08));
  z-index: 0;
}
/* 上端グラデ帯 - 個別背景色 */
.menuCard.grad01::before {
  background: var(--sec01-grad);
}
.menuCard.grad02::before {
  background: var(--sec02-grad);
}
.menuCard.grad03::before {
  background: var(--sec03-grad);
}
.menuCard.grad04::before {
  background: var(--sec04-grad);
}
.menuCard.grad05::before {
  background: var(--sec05-grad);
}
/* テキスト */
.menuCard .txt {
  display: grid;
  place-items: center;
  text-align: center;
  padding: 12px 12px 6px;
  z-index: 1; /* 番号の上に載せる */
}
.menuCard .cap {
  font-size: 1.2rem;
  line-height: 1.2;
}
.menuCard .ttl {
  display: block;
  font-size: clamp(1.6rem, 1.2rem + 1vw, 1.8rem);
  line-height: 1.32;
  letter-spacing: .02em;
}
.menuCard.grad03 .ttl, .menuCard.grad04 .ttl, .menuCard.grad05 .ttl {
  font-size: clamp(1.5rem, 1.2rem + 1vw, 1.5rem);
}
/* 薄い番号 */
.menuCard::after {
  content: attr(data-no);
  position: absolute;
  top: 15%;
  left: 0;
  font-size: clamp(5rem, 18vw, 10rem);
  font-weight: 800;
  font-family: fot-udkakugoc80-pro, sans-serif;
  line-height: 1;
  opacity: .1;
  pointer-events: none;
  z-index: 0;
}
/* 薄い番号 - 個別カラー */
.menuCard.grad01::after {
  color: var(--sec01-border-color);
}
.menuCard.grad02::after {
  color: var(--sec02-border-color);
}
.menuCard.grad03::after {
  color: var(--sec03-border-color);
}
.menuCard.grad04::after {
  color: var(--sec04-border-color);
}
.menuCard.grad05::after {
  color: var(--sec05-border-color);
}
/*==================== SP ====================*/
@media (max-width: 499px) {
  /* ----------　SP：1番目だけ100%、2番目以降は2列　---------- */
  .menuGrid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 8px;
    width: min(96%, 560px);
  }
  .menuGrid > li {
    grid-column: auto / span 1 !important;
  }
  .menuGrid > li:first-child {
    grid-column: 1 / -1 !important;
  }
  /* カード本体 */
  .menuCard {
    min-height: clamp(110px, 28vw, 140px);
    grid-template-rows: 14px 1fr 18px;
    border-radius: 18px;
  }
  /* テキスト */
  .menuCard.grad03 .ttl, .menuCard.grad04 .ttl, .menuCard.grad05 .ttl {
    font-size: clamp(1.6rem, 1.2rem + 1vw, 1.8rem);
  }
}
/*==================== safari ====================*/
@supports (-webkit-appearance: none) {
  @media (max-width: 499px) {
    .menuCard.grad03 .ttl, .menuCard.grad04 .ttl, .menuCard.grad05 .ttl {
      font-size: clamp(1.4rem, 1.2rem + 1vw, 1.6rem);
    }
  }
}
/* ==================================================
  menu（特別告知プレート）
================================================== */
.noticePlaque {
  width: min(96%, 980px);
  margin: 1rem auto 0;
}
.noticePlaque__link {
  position: relative;
  display: block;
  color: var(--text-wht-color);
  text-decoration: none;
  text-align: center;
  padding: 2.4rem 0 3rem;
  background: var(--sec06-grad);
  box-shadow: var(--menu-box-shadow);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.noticePlaque__link:hover {
  transform: translateY(-4px);
}
/* 内側の金枠 */
.noticePlaque__link::before {
  content: "";
  position: absolute;
  inset: clamp(8px, 1.8vw, 10px);
  border: 2px solid #d6bd6b;
  pointer-events: none;
}
/* 上の金チップ */
.noticePlaque__chip {
  padding: .6rem 1.3rem;
  background: var(--sec06-grad-gold);
  color: var(--text-color);
  font-size: 1.4rem;
  font-weight: 700;
  font-family: "shuuei-yokofuto-mincho-stdn", "Yu Mincho", serif;
}
/* タイトル */
.noticePlaque__title {
  font-size: clamp(2.2rem, 1.2rem + 3.6vw, 2.4rem);
  font-weight: 700;
  font-family: "shuuei-yokofuto-mincho-stdn", "Yu Mincho", serif;
  margin: 6px 0;
}
/* 矢印（共通ユーティリティ） */
.noticePlaque__link .chev {
  --chev-color: var(--text-wht-color);
  --chev-bottom: 28px;
  --chev-radius: 3px;
}
/* 金のリベット */
.noticePlaque__rivets {
  position: absolute;
  width: 5px;
  height: 5px;
  background: #d6bd6b;
  border-radius: 50%;
}
.noticePlaque__rivets--l {
  left: 22px;
  top: 22px;
}
.noticePlaque__rivets--r {
  right: 22px;
  top: 22px;
}
.noticePlaque__rivets--l::after, .noticePlaque__rivets--r::after {
  content: "";
  position: absolute;
  left: 0;
  width: 5px;
  height: 5px;
  background: #d6bd6b;
  border-radius: 50%;
  bottom: -84px;
}
/*==================== SP ====================*/
@media (max-width:499px) {
  /* タイトル */
  .noticePlaque__title {
    line-height: 1.3;
  }
  /* 金のリベット */
  .noticePlaque__rivets--l::after, .noticePlaque__rivets--r::after {
    bottom: -124px;
  }
}
/* ==================================================
　section：introduction
================================================== */
.introductionArea {
  background: radial-gradient(circle at center, #facf78 0%, #f7b72c 40%, #f2971b 62%);
}
#introduction .inner p {
  color: var(--text-sub-color);
  font-size: 1.7rem;
  font-weight: bold;
}
#introduction .inner p b {
  color: #e62c27;
}
/*==================== SP ====================*/
@media (max-width: 499px) {
  .introductionArea {
    background: radial-gradient(circle at center, #facf78 0%, #f7b72c 40%, #f2971b 70%);
  }
  #introduction .inner p {
    font-size: 1.6rem;
  }
}
/*==================== safari ====================*/
@supports (-webkit-appearance: none) {
  #introduction .inner p {
    font-weight: normal;
  }
}
/* ==================================================
　section：テキスト
================================================== */
/* 本文 */
section .inner .content .read {
  font-size: 1.7rem;
  margin-bottom: 4rem;
}
/* 強調文 */
section .inner .content .accent {
  font-size: 2.4rem;
  font-family: "A-OTF UD Shin Go Pr6N", "A-OTF Shin Go Pro", "Yu Gothic", sans-serif;
  font-weight: bold;
  text-align: center;
  margin-bottom: 4rem;
}
#sec-03 .inner .content .accent b {
  color: #e74382;
}
#sec-04 .inner .content .accent b {
  color: var(--sec04-point-color);
}
/* 注釈 */
section .inner .content .note {
  font-size: 1.4rem;
  margin-bottom: 4rem;
}
/*==================== SP ====================*/
@media (max-width: 499px) {
  /* 本文 */
  section .inner .content .read {
    font-size: 1.6rem;
    margin-bottom: 3rem;
  }
  /* 強調文 */
  section .inner .content .accent {
    margin-bottom: 3rem;
  }
  /* 注釈 */
  section .inner .content .note {
    font-size: 1.3rem;
    margin-bottom: 3rem;
  }
}
/* ==================================================
　section：infoPill（開催日など）
================================================== */
.infoPill {
  display: grid;
  gap: 14px;
  margin-bottom: 4rem;
}
.infoPillItem {
  display: grid;
  grid-template-columns: 90px 1fr;
  align-items: stretch;
  border-radius: 10px;
  overflow: hidden;
}
#sec-01 .infoPillItem {
  border: 3px solid var(--sec01-point-color);
}
#sec-02 .infoPillItem {
  border: 3px solid var(--sec02-point-color);
}
#sec-03 .infoPillItem {
  border: 3px solid var(--sec03-point-color);
}
#sec-04 .infoPillItem {
  border: 3px solid var(--sec04-point-color);
}
#sec-05 .infoPillItem {
  border: 3px solid var(--sec05-point-color);
}
#special .infoPillItem {
  border: 3px solid var(--sec06-point-color);
}
/* 左側：ラベル */
.infoPillItem dt {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-wht-color);
  font-size: 1.2rem;
  font-weight: 800;
  white-space: nowrap;
  text-align: center;
}
#sec-01 .infoPillItem dt {
  background: var(--sec01-point-color);
}
#sec-02 .infoPillItem dt {
  background: var(--sec02-point-color);
}
#sec-03 .infoPillItem dt {
  background: var(--sec03-point-color);
}
#sec-04 .infoPillItem dt {
  background: var(--sec04-point-color);
}
#sec-05 .infoPillItem dt {
  background: var(--sec05-point-color);
}
#special .infoPillItem dt {
  background: var(--sec06-point-color);
}
/* 右側：内容詳細 */
.infoPillItem dd {
  padding: 1rem 0 .8rem;
}
.infoPillItem dd p {
  font-size: 1.5rem;
  font-weight: 800;
  text-align: center;
}
.infoPillItem dd .note {
  margin-bottom: 0 !important;
}
.infoPillItem dd .schedule {
  line-height: 1;
}
#sec-01 .infoPillItem dd .schedule {
  color: var(--sec01-point-color);
}
#sec-02 .infoPillItem dd .schedule {
  color: var(--sec02-point-color);
}
#sec-03 .infoPillItem dd .schedule {
  color: var(--sec03-point-color);
}
#sec-04 .infoPillItem dd .schedule {
  color: var(--sec04-point-color);
}
#sec-05 .infoPillItem dd .schedule {
  color: var(--sec05-point-color);
}
/* 月・日フォント大きめ、曜日は丸ベタ */
.infoPillItem .month, .infoPillItem .day {
  font-size: 2rem;
}
.infoPillItem .week {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-left: 2px;
  border-radius: 50%;
  color: var(--text-wht-color);
  font-size: 1.1rem;
  vertical-align: middle;
  position: relative;
  top: -2px;
}
#sec-01 .infoPillItem .week {
  background: var(--sec01-point-color);
}
#sec-02 .infoPillItem .week {
  background: var(--sec02-point-color);
}
#sec-03 .infoPillItem .week {
  background: var(--sec03-point-color);
}
#sec-04 .infoPillItem .week {
  background: var(--sec04-point-color);
}
#sec-05 .infoPillItem .week {
  background: var(--sec05-point-color);
}
/* 通常テキスト・補足 */
.infoPillItem .note {
  color: var(--text-color);
  font-size: 1.4rem;
}
#sec-01 .infoPillItem b {
  color: var(--sec01-point-color);
}
#sec-02 .infoPillItem b {
  color: var(--sec02-point-color);
}
#sec-03 .infoPillItem b {
  color: var(--sec03-point-color);
}
#sec-04 .infoPillItem b {
  color: var(--sec04-point-color);
}
#sec-05 .infoPillItem b {
  color: var(--sec05-point-color);
}
/*==================== SP ====================*/
@media (max-width: 499px) {
  .infoPill {
    gap: 10px;
    margin-bottom: 3rem;
  }
  .infoPillItem {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }
  /* 上：ラベル */
  .infoPillItem dt {
    height: auto;
    padding: .4rem 0;
  }
  /* 下：内容詳細 */
  .infoPillItem dd {
    padding: .9rem 12px 1rem;
  }
  .infoPillItem dd p {
    font-size: 1.4rem;
  }
  /* 月・日フォント大きめ、曜日は丸ベタ */
  .infoPillItem .month, .infoPillItem .day {
    font-size: 1.8rem;
  }
  .infoPillItem .week {
    width: 18px;
    height: 18px;
    font-size: 1rem;
    top: -1px;
  }
}
/*==================== safari ====================*/
@supports (-webkit-appearance: none) {
  .infoPillItem dt, .infoPillItem dd p {
    font-weight: 600;
  }
}
/* ==================================================
　section：contentBox
================================================== */
.contentBox {
  background: var(--bg-color);
  border-radius: 20px;
  margin-bottom: 4rem;
  isolation: isolate;
  box-sizing: border-box;
}
#sec-03 .contentBox {
  border: 6px solid var(--sec03-point-color);
  margin-top: 8rem;
}
#sec-04 .contentBox {
  border: 6px solid var(--sec04-point-color)
}
#sec-05 .contentBox {
  border: 6px solid var(--sec05-point-color)
}
#special .contentBox {
  border: 2px solid var(--sec06-point-color)
}
/* ---------- 見出し ---------- */
.contentBox h3 {
  position: relative;
  color: var(--text-wht-color);
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1.3;
  text-align: center;
  padding: 1rem 0;
  margin-bottom: 3rem;
}
#sec-03 .contentBox h3 {
  font-family: "A-OTF UD Shin Go Pr6N", "A-OTF Shin Go Pro", "Yu Gothic", sans-serif;
  background: var(--sec03-point-color);
}
#sec-04 .contentBox h3 {
  background: var(--sec04-point-color);
}
#sec-05 .contentBox h3 {
  background: var(--sec05-point-color);
}
#special .contentBox h3 {
  font-size: 2.8rem;
  font-family: "shuuei-yokofuto-mincho-stdn", "Yu Mincho", serif;
  background: var(--sec06-grad);
  border-radius: 18px 18px 0 0;
  padding: 1.4rem 0;
}
#special .contentBox h3 b {
  color: #fff462;
  font-size: 2rem;
}
/* ---------- 見出し - キラキラ ---------- */
#sec-03 .contentBox h3::before, #sec-03 .contentBox h3::after, #sec-04 .contentBox h3::before, #sec-04 .contentBox h3::after, #sec-05 .contentBox h3::before, #sec-05 .contentBox h3::after {
  content: "";
  position: absolute;
}
#sec-03 .contentBox h3::before, #sec-03 .contentBox h3::after, #sec-05 .contentBox h3::before, #sec-05 .contentBox h3::after {
  width: 30px;
  height: 40px;
}
#sec-04 .contentBox h3::before, #sec-04 .contentBox h3::after {
  width: 24px;
  height: 30px;
}
#sec-03 .contentBox h3::before, #sec-04 .contentBox h3::before, #sec-03 .contentBox h3::after, #sec-04 .contentBox h3::after {
  top: 10px;
}
#sec-05 .contentBox h3::before, #sec-05 .contentBox h3::after {
  top: 4px;
}
#sec-05 .contentBox.line h3::before, #sec-05 .contentBox.line h3::after {
  display: none;
}
#sec-03 .contentBox h3::before, #sec-04 .contentBox h3::before, #sec-05 .contentBox h3::before {
  background: url("../img/ico-kirakira-left.webp") no-repeat center / contain;
  left: 10px;
}
#sec-03 .contentBox h3::after, #sec-04 .contentBox h3::after, #sec-05 .contentBox h3::after {
  background: url("../img/ico-kirakira-right.webp") no-repeat center / contain;
  right: 10px;
}
/* ---------- 中身 ---------- */
.contentBox .contentBoxInner {
  width: 90%;
  max-width: 330px;
  margin: 0 auto;
}
/*==================== SP ====================*/
@media (max-width: 499px) {
  .contentBox {
    margin-bottom: 3rem;
  }
  #sec-03 .contentBox {
    margin-top: 6rem;
  }
  /* ---------- 見出し ---------- */
  #special .contentBox h3 {
    font-size: 2.4rem;
  }
  /* ---------- 見出し - キラキラ ---------- */
  #sec-03 .contentBox h3::before, #sec-04 .contentBox h3::before {
    left: 4px;
  }
  #sec-03 .contentBox h3::after, #sec-04 .contentBox h3::after {
    right: 4px;
  }
}
/*==================== safari ====================*/
@supports (-webkit-appearance: none) {
  /* 見出し */
  .contentBox h3 {
    font-weight: 700;
  }
}
/* ==================================================
　section：CTAボタン
================================================== */
.ctaArea {
  margin-bottom: 4rem;
}
.ctaBtn {
  display: block;
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding: 2.8rem 0;
  border-radius: 999px;
  color: var(--text-wht-color);
  font-size: clamp(1.6rem, 1.2rem + 2vw, 2rem);
  letter-spacing: .06em;
  text-decoration: none;
  text-align: center;
  font-weight: 900;
  line-height: 1;
  animation: floatBtn 3s ease-in-out infinite;
}
#sec-01 .ctaBtn {
  background: var(--sec01-grad);
  border: 4px solid var(--sec01-border-color);
  box-shadow: 0 10px 0 var(--sec01-border-color);
}
#sec-02 .ctaBtn {
  background: var(--sec02-grad);
  border: 4px solid var(--sec02-border-color);
  box-shadow: 0 10px 0 var(--sec02-border-color);
}
.ctaBtn::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 24px;
  transform: translateY(-50%);
  width: clamp(10px, 3vw, 12px);
  height: clamp(10px, 3vw, 12px);
  background: url("../img/arrow.webp") no-repeat center / contain;
}
/* ▼ふわふわアニメーション */
@keyframes floatBtn {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
  100% {
    transform: translateY(0);
  }
}
/*==================== SP ====================*/
@media (max-width: 499px) {
  .ctaBtn {
    font-size: 1.8rem;
    line-height: 1.25;
    padding: 1.8rem 0;
  }
}
/*==================== safari ====================*/
@supports (-webkit-appearance: none) {
  .ctaBtn {
    font-weight: 700;
  }
}
/* ==================================================
　section：coinArea（コインのあしらい）
================================================== */
.coinArea {
  position: relative;
}
.coinArea::before, .coinArea::after {
  content: "";
  position: absolute;
}
#sec-03 .coinArea::before, #sec-03 .coinArea::after {
  width: 76px;
  height: 85px;
  top: 0;
}
#sec-04 .coinArea::before, #sec-04 .coinArea::after {
  top: 50px;
}
#sec-03 .coinArea::before {
  background: url("../img/ico-coin-1.webp") no-repeat center / contain;
  left: -45px;
}
#sec-03 .coinArea::after {
  background: url("../img/ico-coin-2.webp") no-repeat center / contain;
  right: -45px;
}
#sec-04 .coinArea::before {
  background: url("../img/ico-coin-3.webp") no-repeat center / contain;
  width: 80px;
  height: 90px;
  left: -50px;
}
#sec-04 .coinArea::after {
  background: url("../img/ico-coin-4.webp") no-repeat center / contain;
  width: 59px;
  height: 70px;
  right: -45px;
}
/*==================== SP ====================*/
@media (max-width: 499px) {
  #sec-03 .coinArea::before, #sec-03 .coinArea::after {
    top: 130px;
  }
  #sec-04 .coinArea::before, #sec-04 .coinArea::after {
    top: 60px;
  }
  #sec-04 .coinArea::before {
    left: -60px;
  }
  #sec-04 .coinArea::after {
    right: -60px;
  }
}
/* ==================================================
　section02：太陽礼拝
================================================== */
.YogafullArea {
  margin-bottom: 4rem;
}
/* タイトル + 擬似要素でスラッシュ画像を左右に */
.yogafullTitle {
  position: relative;
  text-align: center;
  color: var(--text-sub-color);
  font-weight: 800;
  line-height: 1.35;
  font-size: clamp(2.0rem, 1.2rem + 2.4vw, 2.2rem);
  margin-bottom: 3rem;
  padding-top: 2rem;
}
.yogafullTitle::before, .yogafullTitle::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 40px;
  height: 60px;
}
.yogafullTitle::before {
  left: 0;
  background: url("../img/slash-left.webp") no-repeat center / contain;
}
.yogafullTitle::after {
  right: 0;
  background: url("../img/slash-right.webp") no-repeat center / contain;
}
/* ロゴ */
.yogafullLogo {
  width: 90%;
  max-width: 610px;
  margin: 0 auto 3rem;
}
/* 記事カード */
.yogafullCard {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 16px;
  align-items: center;
  padding: 14px;
  background: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  color: var(--text-color);
  text-decoration: none;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.yogafullCard:hover {
  transform: translateY(-4px);
}
.yogafullThumb {
  margin: 0;
  border-radius: 8px;
  overflow: hidden;
}
.yogafullThumb img {
  width: 100%;
  height: auto;
  display: block;
}
.yogafullTxt {
  font-weight: 800;
  line-height: 1.6;
  margin: 0;
}
/*==================== SP ====================*/
@media (max-width: 499px) {
  /* タイトル + 擬似要素でスラッシュ画像を左右に */
  .yogafullTitle {
    padding-top: 0;
  }
  .yogafullTitle::before, .yogafullTitle::after {
    top: 30px;
    width: 44px;
    height: 62px;
  }
  /* 記事カード */
  .yogafullCard {
    grid-template-columns: 96px 1fr;
    gap: 12px;
    padding: 12px;
  }
  .yogafullTxt {
    font-size: 1.3rem;
  }
}
/*==================== safari ====================*/
@supports (-webkit-appearance: none) {
  /* タイトル + 擬似要素でスラッシュ画像を左右に */
  .yogafullTitle {
    font-weight: 700;
  }
  /* 記事カード */
  .yogafullTxt {
    font-weight: normal;
  }
}
/* ==================================================
　section03：ありがとうポイントプレゼント！
================================================== */
/* 吹き出し（黄色：さらに！） */
.bubble {
  --tail-size: 12px;
  --tail-offset: -6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 1.2rem 2rem;
  background: #fff462;
  border-radius: 999px;
  line-height: 1;
  text-align: center;
  left: 37%;
  margin-bottom: 2rem;
}
.bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: var(--tail-offset);
  transform: translateX(-50%) rotate(45deg);
  width: var(--tail-size);
  height: var(--tail-size);
  background: #fff462;
  border-radius: 2px;
}
.bubble > span {
  font-size: 1.6rem;
  font-family: "A-OTF UD Shin Go Pr6N", "A-OTF Shin Go Pro", "Yu Gothic", sans-serif;
  font-weight: bold;
}
/* ちょい小さめ／大きめのバリエーション */
.bubble--sm {
  --bubble-pad-y: .35rem;
  --bubble-pad-x: 1.1rem;
  --tail-size: 10px;
}
.bubble--lg {
  --bubble-pad-y: .8rem;
  --bubble-pad-x: 2rem;
  --tail-size: 14px;
}
/*---------- contentBox ----------*/
#sec-03 .contentBox h3 b {
  color: #fff462;
}
#sec-03 .contentBox .ctaArea {
  margin-bottom: 3rem;
}
#sec-03 .contentBox .ctaArea a {
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
#sec-03 .contentBox .ctaArea a:hover {
  transform: translateY(-4px);
}
/* 吹き出し */
.ribbonBubbleOuter {
  position: relative;
}
.ribbonBubbleOuter span {
  position: absolute;
  display: block;
  width: 80%;
  max-width: 300px;
  top: -42px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--text-wht-color);
  font-size: clamp(1.6rem, 1.2rem + .8vw, 2.0rem);
  font-weight: 800;
  text-align: center;
  line-height: 1.1;
  border-radius: 999px;
  background: var(--sec03-point-color);
  box-shadow: 0 0 0 5px #fff;
  padding: 1rem 0;
  z-index: 2;
}
/* 下の小さな三角 */
.ribbonBubbleOuter span::before, .ribbonBubbleOuter span::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 14px;
  bottom: -16px;
  clip-path: polygon(50% 100%, 0 0, 100% 0);
}
.ribbonBubbleOuter span::before {
  background: #fff;
}
.ribbonBubbleOuter span::after {
  background: var(--sec03-point-color);
  bottom: -10px;
}
/*==================== SP ====================*/
@media (max-width: 499px) {
  /* 吹き出し */
  .ribbonBubbleOuter {
    top: 6px;
  }
  .ribbonBubbleOuter span {
    padding: .5em 1.2em;
  }
}
/* ==================================================
　section04：ヨガと旅するスタンプラリー
================================================== */
/*---------- タイトル ----------*/
#sec-04 .contentBox h3.presentTitle {
  text-align: center;
  font-size: 1.6rem;
  margin-bottom: 2rem;
}
#sec-04 .contentBox h3 .presentWrap {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: .6rem;
}
#sec-04 .contentBox h3 .presentLabel {
  display: inline-block;
  font-size: 1.1rem;
  line-height: 1.2;
  border: 2px solid #fff;
  padding: .4rem .6rem;
}
#sec-04 .contentBox h3 .presentPoint {
  color: #fff462;
  font-size: clamp(2rem, 1.6rem + 2vw, 3rem);
  letter-spacing: 0;
}
/* lessonBox */
#sec-04 .lessonBox {
  position: relative;
  margin-bottom: 4rem;
}
#sec-04 .lessonBox::after {
  content: "";
  display: block;
  width: 100%;
  height: 7px;
  background-image: radial-gradient(var(--sec04-point-color) 3px, transparent 1px);
  background-size: 20px 20px;
  background-repeat: repeat-x;
  background-position: center;
}
#sec-04 .lessonBox h4 {
  color: var(--sec04-point-color);
  text-align: center;
  margin: 1.2rem 0 2.4rem;
}
#sec-04 .lessonBox h4 .lessonTitle {
  display: block;
  font-size: 3rem;
  font-family: "A-OTF UD Shin Go Pr6N", "A-OTF Shin Go Pro", "Yu Gothic", sans-serif;
  font-weight: bold;
}
#sec-04 .lessonBox h4 .lessonLevel {
  font-size: 1.4rem;
  font-weight: bold;
  border: 2px solid var(--sec04-point-color);
  padding: .5rem 1rem;
}
#sec-04 .lessonBox p {
  margin-bottom: 3rem;
}
#sec-04 .lessonOtherBox {
  background: #ece2f7;
  border-radius: 10px;
  padding: 2.4rem;
  margin-bottom: 2rem;
}
#sec-04 .lessonOtherBox h5 {
  color: var(--sec04-point-color);
  font-size: 2rem;
  font-weight: bold;
  line-height: 1.5;
  text-align: center;
  margin-bottom: 2rem;
}
#sec-04 .contentBox dt, #sec-04 .contentBox dd {
  text-align: center;
  font-weight: bold;
}
#sec-04 .contentBox dt {
  color: var(--text-wht-color);
  font-size: 1.6rem;
  margin-bottom: 1rem;
}
#sec-04 .contentBox dt span {
  background: var(--sec04-point-color);
  padding: .8rem 1.2rem;
}
#sec-04 .contentBox dd {
  position: relative;
  margin-bottom: 3rem;
}
#sec-04 .contentBox dd:last-child {
  margin-bottom: 0;
}
#sec-04 .contentBox dd::after {
  content: "";
  display: block;
  width: 100%;
  height: 7px;
  background-image: radial-gradient(var(--sec04-point-color) 3px, transparent 1px);
  background-size: 20px 20px;
  background-repeat: repeat-x;
  background-position: center;
}
#sec-04 .contentBox dd:last-child::after {
  display: none;
}
#sec-04 .contentBox dd p {
  color: var(--sec04-point-color);
  font-size: 3rem;
  font-family: "A-OTF UD Shin Go Pr6N", "A-OTF Shin Go Pro", "Yu Gothic", sans-serif;
  font-weight: bold;
  line-height: 1.4;
  margin-bottom: 2rem;
}
/* 吹き出し */
.ribbonBubbleInner span {
  position: relative;
  display: inline-block;
  width: 80%;
  max-width: 300px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--sec04-point-color);
  font-weight: 800;
  font-size: clamp(1.6rem, 1.2rem + .8vw, 2.0rem);
  line-height: 1.1;
  text-align: center;
  background: #ece2f7;
  border-radius: 999px;
  padding: 1rem 0;
  margin-bottom: 3.5rem;
}
/* 下の三角 */
.ribbonBubbleInner span::before, .ribbonBubbleInner span::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 14px;
  bottom: -16px;
  clip-path: polygon(50% 100%, 0 0, 100% 0);
}
.ribbonBubbleInner span::after {
  background: #ece2f7;
  bottom: -10px;
}
/*==================== SP ====================*/
@media (max-width: 499px) {
  /*---------- タイトル ----------*/
  #sec-04 .contentBox h3.presentTitle {
    font-size: 1.4rem;
  }
  /* lessonBox */
  #sec-04 .lessonBox {
    margin-bottom: 3rem;
  }
  #sec-04 .lessonBox h4 {
    margin: 1.2rem 0 2rem;
  }
  #sec-04 .lessonBox h4 .lessonTitle {
    font-size: 2.6rem;
  }
  #sec-04 .lessonBox p {
    margin-bottom: 2rem;
  }
  #sec-04 .lessonOtherBox {
    padding: 2rem;
  }
  #sec-04 .lessonOtherBox h5 {
    margin-bottom: 1rem;
  }
  #sec-04 .lessonOtherBox p {
    font-size: 1.5rem;
  }
  #sec-04 .contentBox dd {
    margin-bottom: 2rem;
  }
  #sec-04 .contentBox dd p {
    margin-bottom: 1.5rem;
  }
  /* 吹き出し */
  .ribbonBubbleInner {
    top: -14px;
  }
  .ribbonBubbleInner span {
    padding: .5em 1.2em;
    font-size: 1.8rem;
    margin-bottom: 3rem;
  }
}
/* ==================================================
　section05：LINE抽選会
================================================== */
/* contentBox - 賞 */
#sec-05 .contentBox.award {
  border: none !important;
}
#sec-05 .contentBox.award h3 {
  border-radius: 20px 20px 0 0;
  margin-bottom: 0;
}
#sec-05 .contentBox.award .contentBoxInner {
  width: 100%;
  max-width: 380px;
  background: #e8f0db;
  border-radius: 0 0 20px 20px;
  padding: 2rem;
}
#sec-05 .contentBox.award .contentBoxInner p {
  font-size: 2rem;
  font-weight: bold;
  font-family: "A-OTF UD Shin Go Pr6N", "A-OTF Shin Go Pro", "Yu Gothic", sans-serif;
}
#sec-05 .contentBox.award .contentBoxInner span {
  color: var(--sec05-point-color);
}
#sec-05 .contentBox.award .contentBoxInner span b {
  font-size: 3.4rem;
}
/* contentBox - LINE連携 */
#sec-05 .contentBox.line .contentBoxInner {
  width: 100%;
  max-width: 370px;
}
#sec-05 .contentBox.line .contentBoxInner dt {
  position: relative;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1;
  margin: 2.5rem 0;
}
#sec-05 .contentBox.line .contentBoxInner dt > span {
  display: inline-block;
  background: var(--sec05-point-color);
  padding: .8rem 1.2rem;
}
/* 左右の “丸いドット” ライン（背景にラジアルグラデで丸点を並べる） */
#sec-05 .contentBox.line .contentBoxInner dt::before, #sec-05 .contentBox.line .contentBoxInner dt::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 7px;
  width: 38%;
  background: radial-gradient(var(--sec05-point-color) 3px, transparent 1px) repeat-x center;
  background-size: 20px 20px;
}
#sec-05 .contentBox.line .contentBoxInner dt::before {
  left: 0;
}
#sec-05 .contentBox.line .contentBoxInner dt::after {
  right: 0;
}
#sec-05 .contentBox.line .contentBoxInner dd p {
  font-size: 1.8rem;
  font-weight: 800;
  text-align: center;
}
#sec-05 .contentBox.line .contentBoxInner dd .note {
  font-size: 1.4rem;
  margin-bottom: 3rem;
}
#sec-05 .contentBox.line .contentBoxInner dd .lineArea {
  width: 70%;
  max-width: 150px;
  margin: .5rem auto 4rem;
}
#sec-05 .contentBox.line .contentBoxInner dd .lineArea a {
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
#sec-05 .contentBox.line .contentBoxInner dd .lineArea a:hover {
  transform: translateY(-3px);
}
/* 注意事項 */
#sec-05 .note b {
  color: var(--sec05-point-color);
}
/* アコーディオン */
.accordion {
  width: 100%;
  margin: 0 auto 3rem;
}
/* アイテム枠（最上段だけ上角を丸くしたい場合の補助クラス） */
.accordion__item {
  background: #fff;
  border: 6px solid #e8f0db;
}
/* 見出し */
.accordion__head {
  margin: 0;
  padding: 0;
}
/* トリガーボタン */
.accordion__trigger {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 1rem;
  background: #e8f0db;
  border: 0;
  color: var(--sec05-point-color);
  font-weight: 800;
  font-size: 1.6rem;
  text-align: center;
  cursor: pointer;
}
/* プラスアイコン（＋ → × へアニメ） */
.accordion__icon {
  position: relative;
  width: 20px;
  height: 20px;
}
.accordion__icon::before, .accordion__icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 20px;
  height: 2.5px;
  background: var(--sec05-point-color);
  border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: transform .22s ease;
}
.accordion__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
.accordion__trigger[aria-expanded="true"] .accordion__icon::after {
  transform: translate(-50%, -50%) rotate(0deg);
}
.accordion__trigger[aria-expanded="true"] .accordion__icon::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.accordion__trigger[aria-expanded="true"] .accordion__icon::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
/* パネル（スライド開閉：max-heightでCSSアニメ） */
.accordion__panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height .28s ease;
}
.accordion__inner {
  background: #fff;
  margin: 2rem 2.4rem;
}
section .inner .content .accordion__inner .note {
  margin-bottom: 2rem;
}
/*==================== SP ====================*/
@media (max-width: 499px) {
  /* contentBox - LINE連携 */
  #sec-05 .contentBox.line .contentBoxInner dt {
    font-size: 1.5rem;
    margin: 2.5rem 0 1.5rem;
  }
  #sec-05 .contentBox.line .contentBoxInner dd p {
    font-size: 1.5rem;
  }
  #sec-05 .contentBox.line .contentBoxInner dd .lineArea {
    margin: .5rem auto 3rem;
  }
	#sec-05 .contentBox.award .contentBoxInner p {
  font-size: 1.3rem;
}
}
/*==================== safari ====================*/
@supports (-webkit-appearance: none) {
  /* アコーディオン */
  .accordion__trigger {
    font-weight: 700;
  }
  /* contentBox - LINE連携 */
  #sec-05 .contentBox.line .contentBoxInner dt, #sec-05 .contentBox.line .contentBoxInner dd p {
    font-weight: 700;
  }
}
/* ==================================================
　section06：特別告知
================================================== */
#special {
  position: relative;
  background: var(--sec06-grad);
  overflow: hidden;
  z-index: 2;
}
#special::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url(../img/bk-confetti.webp) center top / contain no-repeat;
  animation: sparkle 2s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes sparkle {
  0% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}
/*---------- タイトル ----------*/
#special h2 {
  font-size: 2.8rem;
  font-weight: 700;
  font-family: "shuuei-yokofuto-mincho-stdn", "Yu Mincho", serif;
  text-align: center;
  border-bottom: 2px solid transparent;
  border-image: var(--sec06-grad-gold);
  border-image-slice: 1;
  padding: 4rem 0 3rem;
  margin-bottom: 4rem;
}
#special h2 .sub {
  font-size: 2rem;
}
#special h2 .english {
  display: block;
  width: 100%;
  margin: 1.2rem 0;
}
/* ゴールドプレート */
#special h2 .goldPlate, #special .contentBox .goldPlate {
  display: inline-block;
  background: var(--sec06-grad-gold);
}
#special h2 .goldPlate {
  font-size: 2rem;
  padding: 0 1.6rem;
  margin-bottom: 2rem;
}
#special .contentBox .goldPlate {
  color: #061f59;
  font-size: 1.8rem;
  padding: .6rem 2rem;
  margin-bottom: 1rem;
}
/*---------- contentBox ----------*/
#special .contentBox {
  position: relative;
}
#special .contentBox::before, #special .contentBox::after {
  content: "";
  position: absolute;
  width: 320px;
  height: 150px;
  background: url(../img/ico-gold-ribbon.webp) no-repeat center / contain;
  z-index: 2;
}
#special .contentBox::before {
  top: -60px;
  right: -235px;
}
#special .contentBox::after {
  bottom: -40px;
  left: -192px;
}
#special .contentBox .contentBoxInner .note {
  margin: 1rem 0 0;
}
#special .contentBox .contentBoxInner .contentBoxInnerText {
  border-top: 2px solid transparent;
  border-image: var(--sec06-grad-gold);
  border-image-slice: 1;
  padding-top: 2.5rem;
  margin: 3rem 0;
}
/*==================== SP ====================*/
@media (max-width: 499px) {
  /*---------- タイトル ----------*/
  #special h2 {
    font-size: 2.2rem;
    padding: 4rem 0 2.5rem;
    margin-bottom: 3rem;
  }
  /* ゴールドプレート */
  #special h2 .goldPlate {
    font-size: 1.8rem;
  }
  /*---------- contentBox ----------*/
  #special .contentBox::before, #special .contentBox::after {
    width: 280px;
    height: 130px;
  }
  #special .contentBox::before {
    top: -42px;
    right: -160px;
  }
  #special .contentBox::before {
    top: -56px;
    right: -198px;
  }
  #special .contentBox .contentBoxInner .contentBoxInnerText {
    margin: 2rem 0;
  }
}
/* ==================================================
　animation＊強調マーカー
================================================== */
.important {
  position: relative;
  display: inline-block;
  font-weight: 700;
  z-index: 1;
}
.important::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0%;
  height: 35%; /* ← 高さを全体の1/3程度に */
  background: #fff100;
  z-index: -1;
  transition: width 0.8s ease-out;
}
.important.is-active::before {
  width: 100%;
}
@keyframes markerSlide {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}
/* ==================================================
　animation＊フェードイン
================================================== */
.fadeIn {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.fadeIn.is-active {
  opacity: 1;
  transform: translateY(0);
}
/* ==================================================
　animation＊mainContent：花火
================================================== */
.mainContent {
  position: relative;
  z-index: 0;
}
/* 花火レイヤー共通（背面に固定） */
.hanabiSide {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-repeat: repeat-y;
}
/* ========== 左列：A/Bを交互で縦リピート ========== */
.hanabiLeft {
  background-image: url("../img/hanabi-left-A-1000.webp");
  background-position: -25px top;
  background-size: auto 400px;
  background-repeat: repeat-y;
  animation: twinkleA 3.2s ease-in-out infinite alternate;
}
.hanabiLeft::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: url("../img/hanabi-left-B-1000.webp");
  background-position: left 1000px;
  background-size: auto 400px;
  background-repeat: repeat-y;
  animation: twinkleB 3.8s ease-in-out infinite alternate 0.6s;
}
/* ========== 右列：A/Bを交互で縦リピート ========== */
.hanabiRight {
  background-image: url("../img/hanabi-right-A-1000.webp");
  background-position: 345px top;
  background-size: auto 400px;
  background-repeat: repeat-y;
  animation: twinkleA 3s ease-in-out infinite alternate 0.2s;
}
.hanabiRight::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: url("../img/hanabi-right-B-1000.webp");
  background-position: right 800px;
  background-size: auto 400px;
  background-repeat: repeat-y;
  animation: twinkleB 3.6s ease-in-out infinite alternate 0.9s;
}
@media (max-width: 499px) {
  .hanabiLeft {
    background-size: auto 350px;
  }
  .hanabiLeft::after {
    background-size: auto 350px;
    background-position: left 500px;
  }
  .hanabiRight {
    background-size: auto 350px;
    background-position: 295px top;
  }
  .hanabiRight::after {
    background-size: auto 350px;
    background-position: right 600px;
  }
}
/* 明滅（強ければ%を下げてOK） */
@keyframes twinkleA {
  0% {
    opacity: .20;
    filter: brightness(85%);
  }
  50% {
    opacity: .95;
    filter: brightness(135%);
  }
  100% {
    opacity: .30;
    filter: brightness(95%);
  }
}
@keyframes twinkleB {
  0% {
    opacity: .18;
    filter: brightness(80%);
  }
  50% {
    opacity: 1;
    filter: brightness(140%);
  }
  100% {
    opacity: .28;
    filter: brightness(90%);
  }
}
/* （任意）ゆっくり上下に漂わせると自然さUP */
@media (prefers-reduced-motion: no-preference) {
  .hanabiLeft {
    animation: twinkleA 3.2s ease-in-out infinite alternate, floatY 18s ease-in-out infinite;
  }
  .hanabiLeft::after {
    animation: twinkleB 3.8s ease-in-out infinite alternate .6s, floatY2 22s ease-in-out infinite;
  }
  .hanabiRight {
    animation: twinkleA 3.0s ease-in-out infinite alternate .2s, floatY 20s ease-in-out infinite;
  }
  .hanabiRight::after {
    animation: twinkleB 3.6s ease-in-out infinite alternate .9s, floatY2 24s ease-in-out infinite;
  }
}
@keyframes floatY {
  0% {
    background-position-y: 0
  }
  50% {
    background-position-y: -18px
  }
  100% {
    background-position-y: 0
  }
}
@keyframes floatY2 {
  0% {
    background-position-y: 0
  }
  50% {
    background-position-y: -24px
  }
  100% {
    background-position-y: 0
  }
}