/**
 * 春のおススメコース バナー CSS
 * RYUBO FOOD HALL — Brand Kit準拠
 * 視認性強化 + 下寄せレイアウト + 全BP検証済み
 */

/* ===== コンテナ ===== */
.spring-bnr {
  position: relative;
  display: flex;
  align-items: center;
  /* コンテンツを下寄りに配置 */
  justify-content: flex-end;
  flex-direction: column;
  width: 100%;
  aspect-ratio: 636 / 681;
  /* 上を広め・下を詰めて下方配置 */
  padding: 20% 10% 10%;
  overflow: hidden;
  border-radius: 0;
  text-decoration: none !important;
  cursor: pointer;
  background:
    radial-gradient(ellipse at 30% 25%, rgba(234,191,200,.08) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 75%, rgba(234,191,200,.05) 0%, transparent 55%),
    linear-gradient(175deg, #FAF7F4 0%, #F8F3EE 40%, #F6F0EA 70%, #F4EDE6 100%);
  border: 1px solid #E4DBD1;
  transition: box-shadow .5s ease;
}
.spring-bnr:hover {
  box-shadow: 0 4px 20px rgba(38,75,93,.10);
}
/* 内枠 */
.spring-bnr::before {
  content: '';
  position: absolute;
  top: 5%; left: 5%; right: 5%; bottom: 5%;
  border: 1px solid rgba(228,219,209,.7);
  pointer-events: none;
}
.spring-bnr::after { display: none; }
.corner-deco { display: none; }

/* ===== 桜モチーフ透かし ===== */
.deco-bloom { position: absolute; pointer-events: none; z-index: 1; }
.deco-bloom--tl { top: 7%; left: 7%; width: 24%; height: 24%; max-width: 48px; max-height: 48px; opacity: .05; }
.deco-bloom--br { bottom: 6%; right: 7%; width: 20%; height: 20%; max-width: 40px; max-height: 40px; opacity: .04; }
.deco-bloom span {
  position: absolute; width: 40%; height: 60%;
  background: #EABFC8;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  left: 30%; top: 2%; transform-origin: 50% 100%;
}
.deco-bloom span:nth-child(2){transform:rotate(72deg)}
.deco-bloom span:nth-child(3){transform:rotate(144deg)}
.deco-bloom span:nth-child(4){transform:rotate(216deg)}
.deco-bloom span:nth-child(5){transform:rotate(288deg)}

/* ===== 花びらレイヤー ===== */
.sakura-layer {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none; z-index: 2; overflow: hidden;
}

/* ===== テキストブロック ===== */
.bnr-body {
  position: relative; z-index: 3;
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
  width: 100%;
}

/* SPRING COURSE — 大きく読みやすく */
.bnr-en {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: clamp(12px, 3.2vw, 16px);
  font-weight: 400;
  letter-spacing: .22em;
  color: #4FA9B8;
  text-transform: uppercase;
  margin-bottom: 4%;
}

/* 上区切り線 */
.bnr-line-top {
  width: 30%; margin-bottom: 3.5%;
}
.bnr-line-top::before {
  content: ''; display: block; height: 1px;
  background: #E4DBD1;
}
.bnr-line-top::after { display: none; }
.bnr-line-dot { display: none; }

/* メインタイトル */
.bnr-title {
  font-family: 'Shippori Mincho', serif;
  font-size: clamp(22px, 6.5vw, 42px);
  font-weight: 600;
  letter-spacing: .10em;
  color: #264B5D;
  line-height: 1.7;
  margin: 0 0 4% 0;
}

/* 4名様以上〜 — しっかり目立つ */
.bnr-sub {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: clamp(12px, 3.4vw, 17px);
  font-weight: 400;
  letter-spacing: .10em;
  color: #6E736B;
  line-height: 1.5;
}

/* 下区切り線 */
.bnr-line-bottom {
  width: 30%; margin-top: 3.5%;
}
.bnr-line-bottom::before {
  content: ''; display: block; height: 1px;
  background: #E4DBD1;
}
.bnr-line-bottom::after { display: none; }
.bnr-sakura-icon { display: none; }
.bnr-cta { display: none; }
.bnr-cta-arrow { display: none; }

/* ===== 花びらアニメーション ===== */
.s-pt {
  position: absolute; top: -22px; pointer-events: none;
  will-change: transform, opacity;
  animation: ptFall linear forwards, ptFade linear forwards;
}
.s-pt .s-in {
  animation: ptSway ease-in-out infinite, ptFlip ease-in-out infinite;
  transform-style: preserve-3d;
}
.s-pt .s-in img { display: block; }

@keyframes ptFall {
  0%   { transform: translateY(0)    translateX(0)    rotate(0deg) }
  8%   { transform: translateY(8%)   translateX(8px)  rotate(18deg) }
  18%  { transform: translateY(18%)  translateX(-6px) rotate(48deg) }
  28%  { transform: translateY(28%)  translateX(12px) rotate(88deg) }
  40%  { transform: translateY(40%)  translateX(-4px) rotate(135deg) }
  52%  { transform: translateY(52%)  translateX(10px) rotate(185deg) }
  64%  { transform: translateY(64%)  translateX(-8px) rotate(240deg) }
  76%  { transform: translateY(76%)  translateX(6px)  rotate(295deg) }
  88%  { transform: translateY(88%)  translateX(-3px) rotate(345deg) }
  100% { transform: translateY(115%) translateX(2px)  rotate(390deg) }
}
@keyframes ptFade { 0%{opacity:0} 4%{opacity:1} 78%{opacity:1} 100%{opacity:0} }
@keyframes ptSway { 0%,100%{transform:translateX(0)} 20%{transform:translateX(5px)} 50%{transform:translateX(-4px)} 80%{transform:translateX(3px)} }
@keyframes ptFlip { 0%{transform:rotateX(0) rotateY(0) rotateZ(0)} 20%{transform:rotateX(15deg) rotateY(55deg) rotateZ(4deg)} 40%{transform:rotateX(-8deg) rotateY(130deg) rotateZ(-3deg)} 60%{transform:rotateX(12deg) rotateY(210deg) rotateZ(3deg)} 80%{transform:rotateX(-5deg) rotateY(290deg) rotateZ(-2deg)} 100%{transform:rotateX(0) rotateY(360deg) rotateZ(0)} }

/* ===== サイドバー 150px ===== */
.left-bnr  a.spring-bnr {
  padding: 10% 5% 6%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.left-bnr .spring-bnr::before { top: 4%; left: 4%; right: 4%; bottom: 4%; }
.left-bnr .spring-bnr .bnr-en {
  font-size: 9px;
  letter-spacing: .08em;
  margin-bottom: 3%;
}
.left-bnr .spring-bnr .bnr-line-top { margin-bottom: 2%; width: 36%; }
.left-bnr .spring-bnr .bnr-title {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .03em;
  line-height: 1.65;
  margin-bottom: 3%;
}
.left-bnr .spring-bnr .bnr-sub {
  font-size: 12px;
  letter-spacing: .03em;
}
.left-bnr .spring-bnr .bnr-line-bottom { margin-top: 2%; width: 36%; }
.left-bnr .spring-bnr .deco-bloom--tl { width: 20px; height: 20px; }
.left-bnr .spring-bnr .deco-bloom--br { width: 16px; height: 16px; }

/* ===== SP モバイル ===== */
@media (max-width: 767px) {
  .left-bnr .spring-bnr {
    padding: 18% 6% 8%;
  }
  .left-bnr .spring-bnr .bnr-en {
    font-size: 7px;
    letter-spacing: .08em;
    margin-bottom: 3%;
  }
  .left-bnr .spring-bnr .bnr-line-top { margin-bottom: 2.5%; }
  .left-bnr .spring-bnr .bnr-title {
    font-size: 11px;
    letter-spacing: .04em;
    margin-bottom: 3%;
  }
  .left-bnr .spring-bnr .bnr-sub {
    font-size: 7px;
    letter-spacing: .06em;
  }
  .left-bnr .spring-bnr .bnr-line-top,
  .left-bnr .spring-bnr .bnr-line-bottom { width: 32%; }
  .left-bnr .spring-bnr .bnr-line-bottom { margin-top: 2.5%; }
}


/* ===== 右サイドバナー 460x580 ===== */
.right-bnr {
  position: fixed;
  bottom: 40px;
  right: 40px;
  width: 460px;
  z-index: 5;
  display: grid;
  gap: 12px;
}

.right-bnr .course_box_right {
  position: relative;
}

.right-bnr .btn_close_right {
  position: absolute;
  top: -12px;
  right: -12px;
  width: 24px;
  height: 24px;
  cursor: pointer;
  z-index: 3;
}

.right-bnr .btn_close_right img {
  width: 100%;
  height: 100%;
}

.right-bnr a.spring-bnr {
  width: 460px;
  height: 580px;
  aspect-ratio: auto;
  padding: 48px 40px 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.right-bnr .spring-bnr::before {
  top: 4%;
  left: 4%;
  right: 4%;
  bottom: 4%;
}

.right-bnr .spring-bnr .bnr-en {
  font-size: 16px;
  letter-spacing: .22em;
  margin-bottom: 14px;
}

.right-bnr .spring-bnr .bnr-line-top {
  margin-bottom: 14px;
  width: 30%;
}

.right-bnr .spring-bnr .bnr-title {
  font-size: 42px;
  font-weight: 600;
  letter-spacing: .10em;
  line-height: 1.7;
  margin-bottom: 10px;
}

.right-bnr .spring-bnr .bnr-sub {
  font-size: 17px;
  letter-spacing: .10em;
}

.right-bnr .spring-bnr .bnr-line-bottom {
  margin-top: 14px;
  width: 30%;
}

.right-bnr .spring-bnr .bnr-desc {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: .06em;
  color: #6E736B;
  line-height: 1.9;
  text-align: center;
  margin-top: 18px;
}

.right-bnr .spring-bnr .bnr-line-bottom2 {
  width: 30%;
  margin-top: 18px;
}

.right-bnr .spring-bnr .bnr-line-bottom2::before {
  content: '';
  display: block;
  height: 1px;
  background: #E4DBD1;
}

.right-bnr .spring-bnr .bnr-price {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: .08em;
  color: #264B5D;
  text-align: center;
  margin-top: 16px;
}

.right-bnr .spring-bnr .bnr-period {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .06em;
  color: #9B9B9B;
  text-align: center;
  margin-top: 8px;
}

.right-bnr .spring-bnr .bnr-cta-btn {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .12em;
  color: #fff;
  background: #4FA9B8;
  border-radius: 30px;
  padding: 10px 32px;
  text-align: center;
  margin-top: 20px;
  transition: background .3s ease;
}

.right-bnr .spring-bnr:hover .bnr-cta-btn {
  background: #3d8e9c;
}

.right-bnr .spring-bnr .deco-bloom--tl {
  width: 48px;
  height: 48px;
}

.right-bnr .spring-bnr .deco-bloom--br {
  width: 40px;
  height: 40px;
}

/* ===== SP モバイル 右バナー非表示 ===== */
@media (max-width: 767px) {
  .right-bnr {
    display: none;
  }
}