@charset "UTF-8";

/* html, body, main などの overflow 制限を解除（sticky動かす用） */
html,
body,
.main {
  overflow: visible !important;
}

/* コンテナ全体の背景と余白 */
.product-detail {
  max-width: 1440px;
  margin: 0 auto;
  background-color: #F7F9FA;
  /* デザイン画像のライトグレー背景 */
  padding-top: 30px;
  padding-bottom: 60px;
  color: #1C2321;
  overflow: visible;
  /* sticky動かす用 */
}

/*==================================================
スタート時は要素自体を透過0にするためのopacity:0;を指定する
===================================*/

/* ビールグラス画像 */
.product-img {
  opacity: 0;
  /* 円（380px）に収まる適切なサイズを指定 */
  width: 350px;
  /* 好みの幅に変更可能 */
  height: 350px;
  /* 幅と同じ値を指定して正方形の枠を作る */

  /* ★ここが重要：画像の比率を保ったまま、
     210x210の枠内に全体が収まるように自動調整する */
  object-fit: contain;

  /* 円の中心に配置するための微調整（必要であれば） */
  /* display: block; margin: auto; */

  /* 円の前面に表示 */
  z-index: 2;
}

/* JSによって fadeUp クラスがついた時のアニメーション設定 */
.product-img.fadeUp {
  animation-name: fadeUpAnime;
  animation-duration: 0.8s;
  /* 少しゆったりふわっと出したい場合は秒数を調整 */
  animation-fill-mode: forwards;
}

@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(40px);
    /* 上に上がってくる幅（大きすぎたら調整してください） */
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===================================================
   1. 上部ビジュアルエリア（Flexboxで均等配置）
   =================================================== */
.product-visual {
  display: flex;
  /* 3つの円を横並びにして等間隔に配置 */
  justify-content: center;
  align-items: center;
  gap: 100px;
  width: 100%;
  height: 380px;
  overflow: hidden;
  /* 端からはみ出る部分をカット */
}

/* 左右の円を少しだけ半透明にして中央を引き立てる */
/* .circle-center {
  opacity: 0.5;
} */

/* 3つの円の共通スタイル */
.visual-circle {
  width: 380px;
  height: 380px;
  border-radius: 50%;
  flex-shrink: 0;
  /* 画面が狭くなっても円が潰れないように設定 */
}

/* ラガー用の色（既存の色設定） */
.visual-circle.is-lager {
  background-color: #4A5973;
}

/* オレンジ用の色（新規追加） */
.visual-circle.is-orange {
  background-color: #D9534F;
  /* オレンジの色 */
}

/* 中央の円（グラス画像を真ん中に置く設定） */
.circle-center {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  background-color: #ffffff;
  opacity: 1;
}

/* クラスを重ねて優先度を上げ、背景色を白にする */
.visual-circle.circle-center {
  background-color: #ffffff;
}

/* ===================================================
   2. 商品詳細情報エリア
   =================================================== */

.product-detail {
  max-width: 1440px;
  margin: 0 auto;
  background-color: #F7F9FA;
  padding-top: 30px;
  padding-bottom: 60px;
  color: #1C2321;
  overflow: visible;
  /* stickyを動かすために明示 */
}

.product-info {
  padding: 130px 60px 130px;
  /* 上下の余白を微調整 */
  overflow: visible;
  /* sticky動かす用 */
}

/* 商品タイトル */
.product-title {
  font-size: 2.1rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  margin-bottom: 30px;
}

/* 説明文 */
.product-description {
  line-height: 1.7;
  margin-bottom: 30px;
}

/* 価格 */
.product-price {
  width: 140px;
  font-size: 1.6rem;
  font-weight: 700;
  border-bottom: #1C2321 1px solid;
  padding-bottom: 10px;
  margin-bottom: 50px;
}

.product-price span {
  font-weight: normal;
  margin-left: 4px;
}

/* スペックリスト（定義リスト dl, dt, dd） */
.product-specs {
  line-height: 2;
  margin-bottom: 30px;
}

.spec-row {
  display: flex;
}

.spec-row dt {
  width: 150px;
}


/* 区切り線 */
.divider {
  border: none;
  border-top: 1px solid #DDDDDD;
  margin: 50px 0;
}

/* 配送・返品セクション */
.info-block h2,
.return-policy h2 {
  font-weight: 700;
  margin-bottom: 12px;
}

.info-block p,
.return-policy p {
  line-height: 1.7;
}

.info-block .note {
  margin-top: 12px;
}

/* 返品・交換とボタンの横並び配置 */
.info-block-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
}

.return-policy {
  flex: 1;
}

/* ---------------------------------------------------
   追従ボタンのレイアウト設定
   --------------------------------------------------- */

/* 追従範囲（親コンテナ）を Flexbox で左右に分ける */
.product-content-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  position: relative;
}

/* 左側のテキストエリア */
.product-main-text {
  flex: 1;
}

/* 右側のボタンエリア（スクロール追従する本体） */
.sticky-button-container {
  position: -webkit-sticky;
  position: sticky;
  top: 150px;
  /* 画面上部から100pxの位置でピタッと止まって追従 */
  align-self: flex-start;
  flex-shrink: 0;
  padding-top: 10px;
  /* 「ORIGINAL LAGER」のタイトルと高さを揃える */
  z-index: 10;
  /* 他の要素の下に潜り込まないように指定 */
  height: fit-content;
  /* ▼ ボタンエリアの高さを自動計算にして追従しやすくする */
}

/* ボタンの共通スタイル（基本のサイズや文字設定などはそのまま） */
.btn-create-label {
  display: inline-block;
  padding: 15px 30px;
  color: #ffffff;
  /* 文字色 */
  text-decoration: none;
  border-radius: 30px;
  transition: background-color 0.3s ease;
}

/* ラガー用のボタン色 */
.btn-create-label.is-lager {
  background-color: #4A5973;
  /* ラガーの色 */
}

.btn-create-label.is-lager:hover {
  background-color: #3b4659;
  /* ホバー時の色 */
}

/* オレンジ用のボタン色 */
.btn-create-label.is-orange {
  background-color: #D9534F;
  /* オレンジの色 */
}

.btn-create-label.is-orange:hover {
  background-color: #B92C28;
  /* ホバー時の少し濃い色 */
}

/* ===================================================
   3. レスポンシブ対応（画面幅 600px 以下のスマホ表示）
   =================================================== */
@media screen and (max-width: 600px) {

  /* ビジュアルエリアの高さをスマホ用に縮小＆はみ出た左右をカット */
  .product-visual {
    height: 220px;
    gap: 30px;
    /* スマホ用に円同士の間隔を狭く調整 */
    overflow: hidden;
  }

  /* 3つの円のサイズを小さく調整 */
  .visual-circle {
    width: 220px;
    height: 220px;
  }

  /* グラス画像をスマホサイズに小さく */
  .product-img {
    width: 130px;
  }

  /* テキストエリアの余白調整 */
  .product-info {
    padding: 80px 20px;
  }

  .product-title {
    font-size: 1.5rem;
    margin-bottom: 20px;
  }

  .product-price {
    font-size: 1.3rem;
    margin-bottom: 30px;
  }

  /* スペック表を縦並びにして読みやすく */
  .spec-row {
    flex-direction: column;
    margin-bottom: 12px;
  }

  .spec-row dt {
    width: 100%;
    font-weight: bold;
  }

  .product-content-wrapper {
    flex-direction: column;
  }

  .sticky-button-container {
    position: static;
    width: 100%;
    margin-top: 24px;
  }

  .btn-create-label {
    display: block;
    width: 100%;
    text-align: center;
  }
}