body {
  margin: 0;
  padding: 0;
  overflow: hidden; /* ページ全体のスクロールを防ぐ */
}
.splide {
  height: 100vh; /* スライダーの高さを画面いっぱいにする */
}

.bg {
  display: block;
  width: 100%; /* 幅を自動調整 */
  height: 100%; /* 画像の高さをスライダーに合わせる */
  position: relative;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: bottom;
}

/* スライドリストのアニメーションの滑らかさ */
.splide__list {
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1); /* 滑らかな動き */
}
/* 横型スライダーのスライド */
.splide__slide {
  position: relative;
  width: 100%;        /* 幅を100%に設定 */
  height: 100%;       /* 高さを100%に設定 */
  background-size: cover; /* 背景画像をカバー */
  background-position: center; /* 背景画像を中央に配置 */
}

/*======= FV =====================*/
/* 横型スライダーのスタイル */
.splide.horizontal-slider {
  position: relative;
  width: 100%;
  height: 100%;
}
.horizontal-slider .fade-slider .splide__slide {
  height: 100vh !important;
}

.splide__slide img {
  height: auto;
}

/* フェードアニメーションのスタイル */
.splide__fade .splide__slide {
  opacity: 0;
  transition: opacity 2.5s cubic-bezier(0.4, 0.0, 0.2, 1); /* ふわっと感を追加 */
}

.splide__fade .splide__slide.is-active {
  opacity: 1;
}

.fv-1 {
  background-image: url(../img/fv1.jpg);
}
.fv-2 {
  background-image: url(../img/fv2.jpg);
}
.fv-3 {
  background-image: url(../img/fv3.jpg);
}
.logo-fv {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  opacity: 0;
  transition: opacity 3s ease;
}
.logo-fv.fade-in {
  opacity: 1;
}
.scroll-mark {
  position: absolute;
  bottom: 10%;
  right: 0;
  left: 0;
  text-align: center;
  opacity: 1;
  animation: scroll 2.2s cubic-bezier(.15,.41,.69,.94) infinite;
}
/* スクロールアニメーション（等速でフェードイン・フェードアウト） */
@keyframes scroll {
  0% { opacity: 0; }
  30% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(35px); opacity: 0;}
}
.scroll-mark img {
  width: 40px;
}

/*======= page-1 =====================*/
.page-1 {
  background-color: #FBF6F2;
  text-align: center;
}
.cp-logo img {
  width: 70px;
}
.cp-logo {
  padding-top: 60px;
}
.cp-h2 img {
  width: 470px;
}
.cp-h2 {
  padding-top: 35px;
}
.s-t-page-1 {
  font-size: 10px;
  letter-spacing: 0.1em;
  margin-top: 40px;
  color: #A40001;
  display: inline-block;
  position: relative;
}
.s-t-page-1::before{
  content: "";
  width: 80px;
  height: 1px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: -90px;
  display: block;
  background-color: #A40001;
}
.s-t-page-1::after {
  content: "";
  width: 80px;
  height: 1px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: -90px;
  display: block;
  background-color: #A40001;
}
.text-box-page1 {
  font-family: serif;
  color: #A40001;
  margin-top: 30px;
}
.text-box-page1 p {
  font-size: 12px;
}
.part-1 {
  position: absolute;
  bottom: 2rem;
  right: 0;
  left: 0;
  margin: 0 auto;
  text-align: center;
}
.part-1 img {
  width: 550px;
}


/*======= page-2 =====================*/
.page-2 {
  background-image: url(../img/page-2.jpg);
}
.img-box__p2 {
  width: 70%;
  margin: 0 auto;
}

/*======= page-3 =====================*/
.page-3 {
  background-image: url(../img/page-3.jpg);
}
.fl-box-daihuku {
  display: flex;
  width: 70%;
  margin: 0 auto;
  padding-top: 70px;
}
.img-box-title {
  width: 340px;
  margin-bottom: 28px;
}
.img-box-h2 {
  width: 250px;
  margin-bottom: 56px;
}
.t1__p3 {
  color: #fff;
  font-size: 13px;
  font-family: serif;
  margin-bottom: 38px;
}
.cta-btn {
  margin-bottom: 38px;
}
.cta-btn a {
  background-color: #fff;
  color: #A40001;
  padding: 12px;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 600;
}
.kome-t {
  font-size: 10px;
  color: #fff;
}
.left-box {
  width: 40%;
  padding-top: 40px;
}
.right-box {
  width: 60%;
}
/*======= page-4 =====================*/
.page-4 {
  background-image: url(../img/page-4.jpg);
}
.page-4 .fl-box-daihuku {
  flex-direction: row-reverse;
}


/*======= page-5 =====================*/
.page-5 {
  background-image: url(../img/page-5.jpg);
}


/*======= footer =====================*/
.footer {
  background-color: #FBF6F2;
  color: #A40001;
  padding-top: 70px;
}
.logo-box {
  width: 100px;
  margin: 0 auto;
  margin-bottom: 50px;
}
.fl-footer {
  display: flex;
  justify-content: center;
  gap: 120px;
  margin-bottom: 20px;
}
.fl-footer a {
  color: #fff;
  background-color: #a40001;
  padding: 0 54px 0 10px;
  border-radius: 2px;
}
#rewind-btn {
  margin: 0 auto;
  background-color: #fff;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  appearance: none;
  padding: 20px;
  border-radius: 50%;
  color: #a40001;
  border: 1px solid #a40001;
  margin-bottom: 32px;
  position: relative;
  transition: 0.3s ease;
}
#rewind-btn::before{
  content: "";
  display: block;
  width: 440px;
  height: 1px;
  background-color: #a40001;
  position: absolute;
  top: 39px;
  right: 90px;
}
#rewind-btn::after{
  content: "";
  display: block;
  width: 440px;
  height: 1px;
  background-color: #a40001;
  position: absolute;
  top: 39px;
  left: 90px;
}
#rewind-btn:hover {
  background-color: #a40001;
  color: #fff;
}


.fl-footer p {
  font-size: 16px;
  margin-top: 0;
  margin-bottom: 10px;
}
.fl2-footer {
  display: flex;
  justify-content: center;
  gap: 42px;
  font-size: 16px;
  color: #a40001;
  margin-bottom: 32px;
}
.fl2-footer a {
  color: #a40001;
}
.copy {
  text-align: center;
  font-size: 14px;
}
.left-box__footer h4,
.right-box__footer h4 {
  margin-top: 0;
}
.left-box__footer {
  position: relative;
}
.left-box__footer::after{
  content:"";
  display:inline-block;
  width:1px;
  height:150px;
  background-color:#a40001;
  position:absolute;
  top:10px;
  right:-65px;
}


/*ふわっと出現アニメーション*/
.s-fade {
  opacity: 0; /* 初期状態は透明 */
  transform: translateY(20px); /* 少し下にずらす */
  transition: opacity 2s ease, transform 1.5s ease; /* なめらかなアニメーション */
  height: 100vh; /*スライダー内でpositionを使っているから*/
}

.s-fade.is-visible {
  opacity: 1; /* 表示状態 */
  transform: translateY(0); /* 元の位置に移動 */
}

.img-box__p2 img {
  opacity: 0;
  transform: translateY(50px); /* 初期位置を下に設定 */
  transition: opacity 1s ease-out, transform 1s ease-out; /* スムーズにアニメーション */
}

.img-box__p2.visible img {
  opacity: 1;
  transform: translateY(0); /* 元の位置に戻す */
}
/* 初期状態：透明かつ下にオフセット */
.animate-fade-up {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

/* 表示された状態 */
.animate-fade-up.active {
  opacity: 1;
  transform: translateY(0);
}

/*=========== ハンバーガーボタン =============*/
.hamburger {
  width: 60px;
  height: 60px;
  border-radius: 100%;
  position: relative;
  appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  background-color: #fff;
  cursor: pointer;
}
.hamburger span,
.hamburger span::after,
.hamburger span::before {
  position: absolute;
  display: block;
  content: "";
  width: 24px;
  height: 3px;
  background-color: #A40001;
  transition: all 0.5s;
  right: 0;
  left: 0;
  margin: 0 auto;
}
.hamburger span::before {
  top: -8px;
}
.hamburger span::after {
  bottom: -8px;
}
.hamburger.open span {
  background-color: transparent;
}
.hamburger.open span::before {
  top: 0;
  transform: rotate(45deg);
}
.hamburger.open span::after {
  bottom: 0;
  transform: rotate(-45deg);
}
.hm-area {
  position: fixed;
  top: 20px;
  left: 30px;
  z-index: 1000;
  transition: .2s;
}
.hm-t {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  bottom: 10px;
  position: absolute;
  right: 0;
  left: 0;
  margin: 0 auto;
}
.hamburger span {
  top: 21px;
}
.hm-area:hover {
  opacity: .9;
}
/* ===============================================
メニューのスタイリング
=============================================== */
.nav {
  position: fixed;
  width: 50%;
  height: 100vh;
  top: 0;
  left: -100%;
  background-color: #fff;
  padding: 50px 0;
  transition: all 0.5s ease-out;
  z-index: 100;
}
.nav__item a {
  display: block;
  font-size: 18px;
  text-decoration: none;
  text-transform: uppercase;
  color: #a40001;
  display: inline-block;
}
.nav__item a:hover {
  color: #0f5474;
  background-color: #fff;
}
.nav.open {
  left: 0;
}
.nav__item p {
  margin: 0;
}
.nav__list {
  position: absolute;
  top: 25%;
  left: 160px;
}
.s-t__hm {
  font-size: 14px;
}
.nav-h {
  margin-bottom: 40px;
}
.nav-p {
  margin-bottom: 10px;
}
.overlay {
    width: 100%;
    height: 100vh;
    background-color: #fff;
    opacity: 0.7;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
    display: none;
    cursor: pointer;
}
.overlay.open2 {
  display: block;
}

/*===== カートボタン =====*/
.cart-btn {
  position: fixed;
  top: 20px;
  right: 30px;
  z-index: 1000;
  width: 66px;
}
.cart-btn:hover {
  opacity: .9;
}