/* ========== 全体リセット ========== */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:"Yu Mincho", serif; color:#000; background:#fff; overflow-x:hidden; line-height:1.6; }

/* ========== トップ画像 ========== */
.main-visual {
  position:relative;
  height:80vh;
  background: url("https://gigaplus.makeshop.jp/Lbose2022/top/2025-osechi/newimage/3%E6%AE%B5%E9%87%8D%E8%A3%9C%E6%AD%A3%E5%BE%8C-2.jpg") no-repeat center/cover;
  display:flex; justify-content:center; align-items:center; text-align:center;
}
.main-visual .overlay { position:absolute; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.3); }
.main-text h1 { font-size:4rem; color:#fff; position:relative; z-index:1; animation:fadeInUp 2s ease forwards; }
.main-text p { font-size:1.5rem; color:#fff; margin-top:1rem; position:relative; z-index:1; animation:fadeIn 2.5s ease forwards; }
@keyframes fadeInUp { from{opacity:0; transform:translateY(40px);} to{opacity:1; transform:translateY(0);} }
@keyframes fadeIn { from{opacity:0;} to{opacity:1;} }

/* ========== 商品セクション ========== */
.product-section {
  position:relative; display:flex; align-items:center; justify-content:center; min-height:75vh; margin:80px 0; overflow:visible;
}
.product-text { flex:1; position:relative; z-index:2; color:#000; text-shadow:0 0 8px rgba(255,255,255,0.9); padding:40px; max-width:40%; }
.product-text h2 { font-size:2.8rem; margin-bottom:20px; }
.product-text p { font-size:1.3rem; }
.product-image { position:relative; width:70%; height:75vh; background-size:cover; background-position:center; opacity:0; }
.product-section.left .product-image { clip-path: polygon(0 0, 100% 0, 100% 100%, 10% 100%); order:2; }
.product-section.right .product-image { clip-path: polygon(0 0, 90% 0, 100% 100%, 0 100%); order:1; }
.product-section.left .product-text { order:1; margin-right:-15%; text-align:left; }
.product-section.right .product-text { order:2; margin-left:-15%; text-align:right; }

@keyframes slideInRight { from{opacity:0; transform:translateX(50px);} to{opacity:1; transform:translateX(0);} }
@keyframes slideInLeft  { from{opacity:0; transform:translateX(-50px);} to{opacity:1; transform:translateX(0);} }
.slide-in-right { animation: slideInRight 2s ease forwards; }
.slide-in-left  { animation: slideInLeft 2s ease forwards; }

/* ========== 商品詳細セクション ========== */
.product-detail {
  padding:3rem 8rem;
  text-align:center;
}
.product-detail h2 { font-size:2rem; margin-bottom:1.5rem; }
.button-group {
  margin-bottom:2rem;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
}
.button-group button {
  margin:0.5rem 1rem;
  padding:1rem 3rem;
  font-size:1.2rem;
  cursor:pointer;
  background:#fff;
  border:1px solid #ccc;
  border-radius:6px;
  transition: all 0.3s ease;
  font-family:"Yu Mincho", "游明朝", serif;
  color:#333;
}
.button-group button:hover { background:#f0f0f0; }
.button-group button.active { background:#b88b5a; color:#fff; border-color:#b88b5a; }

/* 商品詳細コンテナ */
.detail-container {
  display: flex;
  align-items: center;        /* 垂直方向中央揃え */
  justify-content: flex-end;  /* 横方向右寄せ */
  gap: 2rem;                  /* テキストと画像の間隔 */
  max-width: 1200px;          /* セクション幅を制限 */
  margin-left: auto;
  margin-right: 0;
}

/* 商品詳細テキスト */
.detail-text-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  opacity: 0;              
  transform: translateY(30px); 
  animation: fadeUp 1s ease forwards; 
}
@keyframes fadeUp {
  from { opacity:0; transform:translateY(30px); }
  to   { opacity:1; transform:translateY(0); }
}
.detail-text {
  display: none;           
  font-size: 1.4rem;
  max-width: 400px;
  writing-mode: vertical-rl;
  text-orientation: upright;
  text-align: start;
}
.detail-text.active {
  display: block;          
  align-self: flex-start;  
}

/* 商品詳細画像 */
.image-group {
  position:relative;
  width:700px;
  aspect-ratio:1/1;
  overflow:hidden;
}
.detail-image {
  position:absolute;
  top:0; left:0; width:100%; height:100%;
  background-size:cover; background-position:center;
  opacity:0; transform:translateX(100%);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.detail-image.active { opacity:1; transform:translateX(0); }
.detail-image.slide-in { opacity:1; transform:translateX(0); }

/* ========== お客様の声 ========== */
.voice { padding:3rem; background:#fff5f5; text-align:center; }
.voice h2 { margin-bottom:1rem; font-size:2rem; }

/* ========== 注意点 ========== */
.notice { padding:3rem; background:#eee; }
.notice h2 { margin-bottom:1rem; font-size:1.5rem; }

/* ========== レスポンシブ ========== */
@media (max-width:768px) {
  .product-section { flex-direction:column; min-height:auto; }
  .main-text h1 { font-size:2.5rem; color:#fff; position:relative; z-index:1; animation:fadeInUp 2s ease forwards; }
  .main-text p { font-size:1rem; color:#fff; margin-top:1rem; position:relative; z-index:1; animation:fadeIn 2.5s ease forwards; }
  
  /* ここでスマホ表示だけ中央揃えにする */
  .product-section.left .product-text,
  .product-section.right .product-text {
    order: 0 !important;
    margin: 0 !important;
    text-align: center !important;
    width: 100% !important;
    max-width: 600px !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .product-image { flex:none; width:100%; margin:0; padding:20px; text-align:center !important; max-width:100%; height:40vh; clip-path:none; }

  /* 商品詳細セクション */
  .detail-container { flex-direction:column; gap:1rem; }

  /* 画像→文字の順番をスマホで固定 */
  .image-group { order:1; width:100%; height:350px; margin:0 auto; }
  .detail-text-wrapper { order:2; width:100%; display:flex; flex-direction:column; align-items:center; text-align:center; padding:0 1rem; box-sizing:border-box; }
  .detail-text { writing-mode: horizontal-tb; width:100%; max-width:600px; margin:0 auto; text-align:center; }

  /* ボタンの配置調整 */
  .button-group { justify-content:center; }
  .product-detail { padding:3rem 2rem; text-align:center; }
}

.products-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
  padding: 2rem 0;
}

/* 各商品ボックス */
.products-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 60%;
  border: 2px solid #c9a063; /* 落ち着いた金色 */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  background: none;
  padding: 1.5rem;
  border-radius: 8px;
  transition: transform 0.3s ease;
}

.products-box:hover {
  transform: translateY(-5px);
}

.products-image {
  flex: 1;
  text-align: center;
}

.products-image img {
  width: 100%;
  max-width: 400px;
  height: auto;
  border-radius: 6px;
}

.products-info {
  flex: 1;
  padding-left: 2rem;
  text-align: center;
}

.products-comment {
  font-size: 1.5rem;
  margin-bottom: 0.8rem;
  color: #444;
}

.products-name {
  font-size: 2.5rem;
  margin: 0.5rem 0;
  color: #222;
}

.products-price {
  font-size: 2rem;
  color: #555;
  margin-bottom: 1.2rem;
}

/* ▼ 価格と早割ボックスを横並びにする ▼ */
.price-row {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 0.6rem 0 1.2rem;
}

/* ▼ 早割ボックス ▼ */
.early-sale {
  display: inline-block;
  background-color: #8b0000;
  color: #fff;
  padding: 0.3rem 0.8rem;
  border-radius: 4px;
  font-size: 0.95rem;
  font-weight: bold;
  margin: 0.4rem 0 0.6rem;
  animation: blink 1.4s infinite ease-in-out;
}

/* 点滅アニメーション */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.products-button {
  display: inline-block;
  text-decoration: none;
  background-color: #c9a063;
  color: #fff;
  padding: 1rem 2rem;
  border-radius: 4px;
  transition: background 0.3s;
}

.products-button:hover {
  background-color: #b38b4b;
}

/* スマホ対応 */
@media (max-width: 768px) {
  .products-box {
    flex-direction: column;
    width: 95%;
    padding: 1.2rem;
  }

  .products-info {
    padding-left: 0;
    text-align: center;
  }

  .products-image img {
    max-width: 90%;
    margin-bottom: 1rem;
  }

  .products-name {
    font-size: 1.3rem;
  }

  .products-price {
    font-size: 1.5rem;
  }
}

.early-sale {
    margin: 0.5rem auto 0.8rem;
  }
}


/* カウントダウンセクション全体 */
.countdown-section {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 3rem 0;              /* 高さを広げる */
  background: linear-gradient(90deg, #fff8e1, #ffe0b2); /* 目立つ背景 */
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}

.countdown-container {
  display: flex;           
  justify-content: center; 
  align-items: center;
  gap: 1rem;               
  max-width: 800px;        
  width: auto;             /* ここを100%からautoに */
  margin: 0 auto;          /* 中央寄せ */
  text-align: center;
}



/* 「現在早割中」ボックス */
.early-sale-box {
  padding: 1rem 2rem;
  background-color: #8b0000;
  color: #ffffff;
  font-weight: bold;
  border-radius: 4px;
  animation: blink 1.4s infinite ease-in-out;
}

/* 「早割終了まで」文字 */
.countdown-text {
  font-size: 1.2rem;
  color: #333;
}

/* 〇日部分 */
.countdown-days {
  font-size: 3rem;  /* さらに大きく */
  font-weight: bold;
  color: #c90000;
}

/* 点滅アニメーション */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* スマホ対応（横幅が狭い場合は縦並びに） */
@media (max-width: 600px) {
  .countdown-container {
    flex-direction: column;
    gap: 0.5rem;
  }
}

/* スマホ対応（横幅が狭い場合は縦並びにして中央揃え） */
@media (max-width: 600px) {
  .countdown-container {
    flex-direction: column;    /* 縦並びに */
    gap: 0.5rem;               /* ブロック間の間隔 */
    justify-content: center;   /* 縦方向中央 */
    align-items: center;       /* 横方向中央 */
    text-align: center;        /* 文字も中央 */
  }

  .early-sale-box,
  .countdown-text,
  .countdown-time {
    margin: 0;                 /* 余白リセット */
    width: auto;
  }

  .countdown-time {
    font-size: 1.8rem;         /* 少し小さめに調整可能 */
  }
}