@charset "UTF-8";

/*  全体設定 */
#index-view {
  padding-top: 0 !important;
}
/*  ハンガーメニュー表示でTOPを動かなさい */
body {
  top: auto !important;
}
#information-show-view {
  padding-top: 0 !important;
}
.l-container {
  padding-top: 0 !important;
}
/*  headerメニュー固定 */
.l-header {
  width: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;
  position: sticky !important;
}

.u-text--head {
  color: #000000 !important;
  font-size: 24px !important;
  font-family: serif !important;
}

/*  商品タイトル */
.p-page_header__inner__title,
.p-new_product__title .u-text--head {
  text-align: center !important;
  font-size: 25px !important;
  font-family: serif;
  /*  margin-bottom: 40px; */
}
/*  商品名 */
.c-product_item .u-text--subhead {
  color: #000000 !important;
  font-size: 12px !important;
  font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro",
    "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic",
    sans-serif;
  font-weight: bold;
}
/*  商品販売価格 */
.c-product_item .u-text--body {
  color: #000000 !important;
  font-size: 11px !important;
  font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro",
    "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic",
    sans-serif;
  text-align: center;
}
.c-product_item__inner__content {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
  align-content: space-around;
  flex-wrap: wrap;
}
.c-product_item__inner__title .u-text--subhead {
  padding-left: 0 !important;
}
/*  ハンガーメニュー */
.u-color__bg--base .c-gmenu__container__inner {
  width: 100%;
  padding: 0px !important;
}
.c-gmenu__container__inner__list__item__child__item {
  color: #000000 !important;
  font-size: 12px !important;
  font-family: serif;
  margin-left: 20px;
}

.c-gmenu__container__inner__list__item__child__item__inner,
.u-text--subhead {
  color: #000000 !important;
  font-size: 12px !important;
  font-family: serif;
}
.c-gmenu__container__inner__list__item__child {
  padding: 10px 0;
}
/*商品３個並び PC表示 */
.p-new_product {
  padding: 0px 0px;
  margin-top: -40px;
}

/*商品 1個並び SP表示 真ん中寄せ*/
@media screen and (max-width: 719px) {
  .p-product_slider .slick-list {
    margin: 0px 2vw !important;
  }
}

/*商品 隙間*/
.c-product_item {
  transition: 0.4s;
  position: relative;
  display: flex;
  flex-direction: column;
  margin-top: -80px;
}

/* ---▼ カルーセルコンテナ ▼--- */
.carousel-container {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* --- スライド設定 --- */
.carousel-slides {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.carousel-slide {
  min-width: 100%;
  box-sizing: border-box;
  aspect-ratio: 1.8 / 1;
}

.carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- 左右のクリック（タップ）エリア --- */
.nav-overlay-left,
.nav-overlay-right {
  position: absolute;
  top: 0;
  height: 100%;
  width: 50%;
  z-index: 5;
}

/* ★★★ 修正箇所 ★★★ */
/* 左右の領域を正しく配置する */
.nav-overlay-left {
  left: 0;
}
.nav-overlay-right {
  right: 0;
}

/* PC表示のときだけカスタムカーソルを適用 */
@media (min-width: 769px) {
  .nav-overlay-left {
    /* 左側には「左向き」の矢印カーソルを指定 */
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='36' viewBox='0 0 44 44'><path fill='%23bfbfbf' d='M10.366 22.502l.412.392L33.268 44l.732-.742-22.488-21.106L34 .742 33.268 0 10 22.152z'/></svg>")
        15 18,
      auto;
  }
  .nav-overlay-right {
    /* 右側には「右向き」の矢印カーソルを指定 */
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='36' viewBox='0 0 44 44'><path fill='%23bfbfbf' d='M33.634 22.502l-.412.392L10.732 44 10 43.258l22.488-21.106L10 .742 10.732 0 34 22.152z'/></svg>")
        15 18,
      auto;
  }
}

/* スマートフォン表示のときは通常のポインターにする */
@media (max-width: 768px) {
  .nav-overlay-left,
  .nav-overlay-right {
    cursor: pointer;
  }
}

/* --- 右下のナビゲーションドット --- */
.carousel-dots {
  position: absolute;
  bottom: 35px;
  right: 20px;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 15px 20px;
  border-radius: 25px;
  z-index: 10;
  display: flex;
  gap: 8px;
}

.dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background-color: #fff;
  opacity: 0.5;
  transition: opacity 0.3s ease;
}

.dot.active {
  opacity: 1;
}
/* ---▲ カルーセルコンテナ ▲--- */
/* ---▼ テキストコンテナ ▼--- */
/* --- アニメーションを適用するセクションのコンテナ --- */
.animated-section {
  text-align: center;
  padding: 20px 0px;
  line-height: 1.8;
  /* ▼▼▼ 追加 ▼▼▼ */
  font-weight: 300; /* セクション内のテキストを細字の基本に設定 */
}

/* --- アニメーションさせる各テキスト要素のスタイル --- */
.fade-in-item {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* --- アニメーション発火用のクラス --- */
.fade-in-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- 各要素のアニメーション開始を遅らせる設定 --- */
/* ※この設定は各セクション内で共通で適用されます */
.fade-in-item:nth-child(2) {
  transition-delay: 0.2s;
}
.fade-in-item:nth-child(3) {
  transition-delay: 0.4s;
}
.fade-in-item:nth-child(4) {
  transition-delay: 0.6s;
}
.fade-in-item:nth-child(5) {
  transition-delay: 0.8s;
}

/* --- テキスト要素のスタイル調整 --- */
.animated-text {
  margin: 0;
  font-size: inherit;
}
.animated-main-title {
  font-size: 25px;
  margin: 8px 0 24px;
  font-family: serif;
}
.animated-sub-title {
  font-size: 18px;
  margin: 8px 0 24px;
  font-family: serif;
}

/* 親クラスを追加して優先順位を明確化 */
.animated-section .animated-description {
  font-size: 12px !important;
  font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro",
    "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic",
    sans-serif;
}

/* ---▼ How to use動画コンテナ ▼--- */
.video-section-wrapper {
  margin: 0;
  padding: 0;
  background-color: #bfbfbf; /* 背景を黒に設定 */
  display: flex;
  justify-content: center; /* 水平方向中央揃え */
  align-items: center; /* 垂直方向中央揃え */
  min-height: 95vh; /* 画面全体の高さを確保 */
  box-sizing: border-box;
}

/* 動画コンテナ */
.video-container {
  width: 100%;
  max-width: 550px; /* 最大幅を550pxに設定 */
  box-sizing: border-box;
}

/* 動画要素 */
video {
  width: 100%;
  display: block; /* 動画下の余分なスペースを削除 */
}

/* 画面幅が550px以下の場合のスタイル */
@media (max-width: 550px) {
  .video-container {
    padding: 0 10px; /* 左右に10pxの余白を設定 */
  }
}
/* ---▲ How to use動画コンテナ ▲--- */
/* ---▼ Product動画コンテナ ▼--- */
/* --- 全体を囲むコンテナ --- */
.page-wrapper {
  background-color: #bfbfbf;
  font-family: sans-serif;
  padding: 20px 0;
}

/* --- 動画コンテナ --- */
.product-video-container {
  display: flex;
  justify-content: center;
  align-items: center;
  /* --- gap: 20px; --- */
  padding: 0 20px;
}

/* --- 各動画のラッパー --- */
.product-video-wrapper {
  border: 1px solid #00000033;
  padding: 15px;
  background-color: #bfbfbf;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}

/* --- 動画 --- */
.product-video-wrapper video {
  max-width: 100%;
  height: auto;
  display: block;
}

/* --- ボタン --- */
.product-video-button {
  background-color: #b5b5b5;
  color: #000;
  border: none;
  padding: 10px 20px;
  margin-top: 15px;
  cursor: pointer;
  width: 80%;
  max-width: 300px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 10px;
}

/* --- 横幅768px以下で適用されるスタイル --- */
@media (max-width: 768px) {
  .product-video-container {
    flex-direction: column;
  }
  .product-video-button {
    background-color: #b5b5b5;
    color: #000;
    border: none;
    padding: 10px 20px;
    margin-top: 15px;
    cursor: pointer;
    width: 100%;
    max-width: 300px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 10px;
  }
}
/* ---▲ Product動画コンテナ ▲--- */
/* ---▼ フッター① ▼--- */
/* --- フッター①全体設定 --- */
.footer-body {
  background-color: #000;
  color: #fff;
  font-family: sans-serif;
  margin: 0;
  padding: 20px;
}

/* --- メインコンテナ --- */
.footer-menu-container {
  max-width: 1200px;
  margin: 40px auto;
}

/* --- 区切り線 --- */
.footer-menu-divider {
  border: none;
  height: 1px;
  background-color: #474747;
  margin: 20px 0;
}

/* --- メニューリスト --- */
.footer-menu-list {
  list-style: none;
  padding: 0;
  margin: 25px 0;
}

.footer-menu-list li {
  margin-bottom: 11px;
}

.footer-menu-list a {
  color: #fff;
  text-decoration: none;
  font-size: 12px;
}

/* --- SNSアイコン --- */
.footer-social-icon-wrapper {
  text-align: center;
  margin-top: 30px;
}

.footer-social-icon-wrapper svg {
  width: 28px;
  height: 28px;
  stroke: #fff;
}

/* --- デスクトップ表示 (769px以上) --- */
@media (min-width: 769px) {
  .footer-menu-header {
    display: none;
  }
  .footer-divider-top-mobile {
    /* デスクトップでは非表示 */
    display: none;
  }
}

/* --- モバイル表示 (768px以下) --- */
@media (max-width: 768px) {
  .footer-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
  }

  .footer-arrow-icon {
    border: solid white;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 4px;
    transform: rotate(-45deg);
    transition: transform 0.3s ease;
  }

  .footer-menu-list {
    display: none;
    margin-top: 25px;
  }

  /* --- 開いた状態のスタイル --- */
  .footer-menu-wrapper.footer-is-open .footer-menu-list {
    display: block;
  }

  .footer-menu-wrapper.footer-is-open .footer-arrow-icon {
    transform: rotate(45deg);
  }

  .footer-divider-top-mobile {
    /* モバイルでは表示 */
    display: block;
  }
}
/* ---▲ フッター① ▲--- */

/* ---▼ Gift画像 ▼--- */
.gift-section-wrapper {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  text-align: center;
  padding: 40px 20px;
  background-color: #fff;
}
.gift-section-wrapper .gift-image-grid {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  /* ★修正：PC・スマホ共通で折り返さない設定に */
  flex-wrap: nowrap;
  max-width: 820px;
  margin: 0 auto;
}
.gift-section-wrapper .gift-image-item {
  display: block;
  cursor: pointer;
  max-width: 400px;
  /* ★修正：よりシンプルな幅指定に変更 */
  width: 50%;
  box-sizing: border-box;
}
.gift-section-wrapper .gift-image-item img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.4s ease-in-out;
}
.gift-section-wrapper .gift-image-item:hover img {
  transform: scale(1.05);
}
.gift-section-wrapper .gift-bottom-image {
  max-width: 400px;
  width: 100%; /* ← PC表示では100%幅 */
  margin: 20px auto 0;
}
.gift-section-wrapper .gift-bottom-image img {
  width: 100%;
  height: auto;
}

/* ★★★ スマホ表示（768px以下）★★★ */
@media (max-width: 768px) {
  .gift-section-wrapper .gift-image-grid {
    gap: 15px;
    /* ★重要：PCと同じ nowrap を維持するため、ここでの flex-wrap 指定は不要 */
  }
  .gift-section-wrapper .gift-image-item {
    /* ★重要：PCと同じ width: 50%; を維持するため、ここでの width 指定は不要 */
  }
  .gift-section-wrapper .animated-main-title {
    font-size: 2rem;
  }

  /* ★★★ 追加箇所 ★★★ */
  /* 下の画像1点の幅を、上の画像と同じ50%に変更 */
  .gift-section-wrapper .gift-bottom-image {
    width: 50%;
  }
}

/* --- ライトボックス関連のスタイル（変更なし） --- */
.gift-section-wrapper .gift-lightbox {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  z-index: 9999999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s;
}
.gift-section-wrapper .gift-lightbox.is-visible {
  opacity: 1;
  visibility: visible;
}
.gift-section-wrapper .gift-lightbox img {
  max-width: 90%;
}
.gift-section-wrapper .gift-lightbox-close {
  position: absolute;
  top: 20px;
  right: 30px;
  cursor: pointer;
  width: 30px;
  height: 30px;
  z-index: 10000000;
}
.gift-section-wrapper .gift-lightbox-close::before {
  content: "\e906";
  font-family: "icon", sans-serif !important;
  color: white;
  font-size: 24px;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* ---▲ Gift画像 ▲--- */

/* ---▼ Item下の使用上の注意 ▼--- */
.info-body {
  font-family: sans-serif; /* 文字のフォントを指定 */
  text-align: center; /* 全ての要素を中央揃えに */
  margin-bottom: 60px; /* ページ下部からの余白 */
}

/* 上部のテキストのスタイル */
.info-text {
  margin-bottom: 40px; /* 下のボタンとの間隔を設定 */
  font-size: 11px;
}

/* ボタンのスタイル */
.notice-link {
  display: inline-block; /* aタグでも幅や余白が指定できるようにする */
  background-color: #b5b5b5; /* ボタンの背景を少し薄い灰色に */
  padding: 20px 40px; /* ボタンの内側の余白（上下に20px, 左右に40px） */
  text-decoration: none; /* リンクの下線を消す */
  font-size: 12px;
}
/* ---▲ Item下の使用上の注意 ▲--- */

/* ---▼ フッター ▼--- */
.c-footer_menu__title {
  padding-left: 20px;
}
.l-footer {
  border-top-width: 1px;
  border-top-style: solid;
  padding-top: 40px;
}
/* ---▼ ロゴ非表示 ▼--- */
.l-footer__logo {
  /* max-width: 180px; */
  margin-bottom: 50px;
  display: none !important;
}
/* ---▼ SNS非表示 ▼--- */
.l-footer__info__store__sns {
  margin-bottom: 20px;
  display: none;
}
/* ---▼ フッター上部の線 ▼--- */
.l-footer .u-color__border--border {
  border-color: #1e1e1e !important;
}
/* --- フッター下部のサイト名非表示--- */
.footer_body {
  display: none;
}