/* sakura.css の冒頭をこちらに差し替え */

.taya-lp {
  /* 1. 地紋のスタート位置をブラウザの最上部(0)に固定 */
  margin-top: 0 !important;
  padding-top: 0 !important;
  background-origin: border-box !important;
  background-position: top center !important;
}

/* 2. メインビジュアル（写真）をヘッダーの高さ分下げる */
.taya-lp .main-visual {
  margin-top: 97px !important;
}

@media screen and (max-width: 768px) {
  .taya-lp .main-visual {
    margin-top: 0 !important; /* スマホはヘッダーに合わせて調整 */
  }
}
/* =========================================
   SAKURA-THEME OVERRIDE
   ========================================= */
:root {
  /* 桜の伝統色：少し落ち着いた大人のピンクに変更 */
  --taya-gold: #d1b2b2; 
  --sakura-light: #fdf8f8;
  --sakura-accent: #e5989b;
  --taya-black: #333333;
}

/* =========================================
   SAKURA PATTERN BACKGROUND (CSS ONLY)
   ========================================= */
.sakura-theme {
  background-color: var(--sakura-light);
  /* 5枚の花びらを表現するために複数のグラデーションを配置 */
  background-image:
    radial-gradient(circle at 50% 50%, var(--sakura-light) 5%, transparent 30%),
    radial-gradient(circle at 50% 20%, #fff 15%, transparent 20%),
    radial-gradient(circle at 80% 40%, #fff 15%, transparent 20%),
    radial-gradient(circle at 70% 80%, #fff 15%, transparent 20%),
    radial-gradient(circle at 30% 80%, #fff 15%, transparent 20%),
    radial-gradient(circle at 20% 40%, #fff 15%, transparent 20%);
  
  /* 紋様のサイズと密度 */
  background-size: 60px 60px;
  background-position: 
    0 0, 
    0 0, 0 0, 0 0, 0 0, 0 0;
  
  /* ほんの少し透過させて和紙に馴染ませる */
  background-blend-mode: soft-light;
}

/* 桜特集専用の見出し装飾 */
.sakura-theme h2::after {
  content: " ";
  display: block;
  width: 40px;
  height: 1px;
  background: var(--sakura-accent);
  margin: 15px auto 0;
}

/* ボタン：桜のつぼみをイメージしたホバー */
.sakura-theme .taya-btn {
  background: var(--sakura-accent);
  border-radius: 2px;
}

.sakura-theme .taya-btn:hover {
  background: #b5838d;
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(181, 131, 141, 0.3);
}

/* 装飾用の桜吹雪クラス（任意箇所に配置） */
.sakura-accent-text {
  color: var(--sakura-accent);
  font-family: serif;
  font-style: italic;
}

/* =========================================
   SAKURA PETAL ANIMATION
   ========================================= */

/* 花びらの形を定義 */
.petal {
  position: absolute;
  background-color: #ffdae0; /* 桜色 */
  border-radius: 150% 0 150% 0; /* 花びらの形 */
  opacity: 0.8;
  z-index: 1;
  pointer-events: none;
  animation: sakura-fall linear infinite;
}

/* 舞い落ちるアニメーション */
@keyframes sakura-fall {
  0% {
    top: -10%;
    transform: translateX(0) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 0.8;
  }
  90% {
    opacity: 0.8;
  }
  100% {
    top: 110%;
    transform: translateX(100px) rotate(720deg);
    opacity: 0;
  }
}

/* 桜のレイヤー（メインビジュアル内に配置） */
.sakura-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 98%;
  overflow: hidden;
  pointer-events: none;
}

/* 花びらごとの個別設定（秒数や位置をバラす） */
/* 1枚目：左側からゆったり */
.taya-lp .petal:nth-child(1) { left: 5%;  width: 15px; height: 10px; animation-duration: 9s;  animation-delay: 0s; }
/* 2枚目：やや中央寄り、小さめで速め */
.taya-lp .petal:nth-child(2) { left: 25%; width: 10px; height: 7px;  animation-duration: 6s;  animation-delay: 3s; }
/* 3枚目：中央、大きめで存在感を */
.taya-lp .petal:nth-child(3) { left: 45%; width: 18px; height: 12px; animation-duration: 8s;  animation-delay: 1s; }
/* 4枚目：やや右、中くらいの速度 */
.taya-lp .petal:nth-child(4) { left: 60%; width: 14px; height: 9px;  animation-duration: 7s;  animation-delay: 5s; }
/* 5枚目：右端、ゆっくり長く舞う */
.taya-lp .petal:nth-child(5) { left: 85%; width: 16px; height: 11px; animation-duration: 10s; animation-delay: 2s; }
/* 6枚目：中央左、ひらひらと小刻みに（追加分） */
.taya-lp .petal:nth-child(6) { left: 35%; width: 12px; height: 8px;  animation-duration: 5s;  animation-delay: 4s; }
/* 7枚目：右側、一番最後に降りてくる（追加分） */
.taya-lp .petal:nth-child(7) { left: 75%; width: 13px; height: 9px;  animation-duration: 11s; animation-delay: 0.5s; }


/* 説明文（p）のサイズを小さくして、行間をゆったりさせる */
.sakura-theme .block-text p {
  font-size: 14px;         /* 標準より一回り小さく */
  line-height: 1.9;        /* 行間を広げて読みやすく */
  color: #555;             /* 少しだけ色を薄くすると、より上品になります */
  margin-bottom: 1.5em;    /* 下の商品リストとの間隔 */
}

/* スマホ表示の時は、視認性を守るため少しだけ戻す調整 */
@media screen and (max-width: 768px) {
  .sakura-theme .block-text p {
    font-size: 13.5px;     /* スマホでも「小さめ」を維持 */
    line-height: 1.8;
  }
}

/* スマホで「写真・文章・商品」の順に強制する設定 */
@media screen and (max-width: 768px) {
  /* PCで文章が先にきているブロックにこのクラスを付与 */
  .taya-lp .block-2col.reverse-sp {
    display: flex !important;
    flex-direction: column-reverse !important; /* 下にある写真を一番上に持ってくる */
  }

  /* 写真と文章の間の余白を調整 */
  .taya-lp .block-2col.reverse-sp .block-text {
    margin-top: 24px;
    padding-top: 0;
  }
  
  /* 商品リスト(item-list)が文章の下に来るように配置を確認 */
  .taya-lp .block-2col.reverse-sp .item-list {
    order: 2; /* 明示的に最後に配置 */
  }
}

/* sakura.css に追記 */

.taya-lp {
  /* 下側のマージンを完全に消してフッターに密着させる */
  margin-bottom: 0 !important;
  /* 背景を要素の底（コンテンツの終わり）でピタッと止める */
  background-repeat: repeat;
  background-position: top center;
}

/* 特集内の最後のセクション（ギフト案内など）の下余白を調整 */
.taya-lp section:last-of-type {
  margin-bottom: 0 !important;
  padding-bottom: 80px; /* ここでフッター手前の「ゆとり」をコントロール */
}

/* 補助クラス block-wide-bottom などが効きすぎている場合の上書き */
.taya-lp .block-wide-bottom {
  margin-bottom: 0 !important;
}