@charset "UTF-8";

/* =========================================================
   [ Products Page ] Base Layout
========================================================= */
.products-section {
  width: 100%;
  padding: 150px 0;
  display: flex;
  justify-content: center;
  background-color: #ffffff;
}

.products-inner {
  width: 90%;
  max-width: 1200px; /* ギャラリーの最大幅 */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.products-title {
  color: #1F1F1F;
  font-family: 'Marcellus', serif;
  font-size: 69px;
  font-weight: 400;
  margin: 0 0 80px 0;
}

/* --- カテゴリータブ --- */
.products-tabs {
  list-style: none;
  padding: 0;
  margin: 0 0 50px 0;
  display: flex;
  justify-content: center;
  border-bottom: 1px solid #BFBFBF; /* タブ全体を貫く薄いグレーの下線 */
}

.tab-item a {
  display: block;
  padding: 14px 40px;
  color: #737373;
  font-family: 'Marcellus', serif;
  font-size: 15px;
  font-weight: 400;
  text-decoration: none;
  position: relative; /* 擬似要素の基準点 */
  transition: color 0.3s ease;
}

/* ホバー時のテキスト色変化 */
.tab-item a:hover {
  color: #1F1F1F;
}

/* 黒いアクティブ線（擬似要素）の基本設定（最初は幅0） */
.tab-item a::after {
  content: "";
  position: absolute;
  bottom: -1px; /* ulの下線の上に重なるように配置 */
  left: 0;
  width: 0;
  height: 2px;
  background-color: #414141;
  transition: width 0.4s cubic-bezier(0.25, 1, 0.5, 1); /* ボタンと同じ伸びるアニメーション */
}

/* アクティブなタブとホバー時に黒い線を100%に伸ばす */
.tab-item.is-active a {
  color: #1F1F1F; /* アクティブ時は文字も黒 */
}
.tab-item.is-active a::after,
.tab-item a:hover::after {
  width: 100%;
}

/* =========================================================
   [ PRODUCTS ] サブカテゴリEC誘導リンク（タブ連動・複数ボタン）
========================================================= */

/* タブごとのグループ（ボタンを横並び・折り返し可） */
.subcat-link-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 20px;
  width: 100%;
  margin: 20px 0 90px 0;
}
.subcat-link-group.is-hidden {
  display: none;
}

/* 各ボタン */
.subcat-link-box {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: 160px;
  height: 36px;
  padding: 0 20px;
  box-sizing: border-box;
  background-color: #ffffff;
  border: 1px solid #D6D3D1; /* stone-300 相当 */
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.subcat-link-box:hover {
  background-color: #666666;
  border-color: #666666;
}

.subcat-text {
  color: #1C1917; /* stone-900 相当 */
  font-family: 'Marcellus', serif;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.03em;
  line-height: 1;
  text-align: center;
  transition: color 0.3s ease;
  white-space: nowrap;
  /* 英語・日本語を同じセルに重ねる（グリッド重ね）。
     ボタン幅は英語/日本語の広い方に自動で決まり、切替時にガタつかない。 */
  display: inline-grid;
}
.subcat-en,
.subcat-ja {
  grid-area: 1 / 1; /* 同一セルに重ねる */
  transition: opacity 0.3s ease;
}
/* 日本語は Zen Old Mincho（英語は親の Marcellus を継承） */
.subcat-ja {
  font-family: 'Zen Old Mincho', serif;
  opacity: 0;            /* 通常は非表示 */
  pointer-events: none;
}
.subcat-en {
  opacity: 1;            /* 通常は英語を表示 */
}
/* ホバー：英語→日本語に切り替え */
.subcat-link-box:hover .subcat-en {
  opacity: 0;
}
.subcat-link-box:hover .subcat-ja {
  opacity: 1;
}
.subcat-link-box:hover .subcat-text {
  color: #ffffff;
}

/* スマホ対応 */
@media (max-width: 768px) {
  .subcat-link-group {
    gap: 12px;
    margin-bottom: 28px;
  }
  .subcat-link-box {
    min-width: 0;
    height: 34px;
    padding: 0 16px;
  }
  .subcat-text {
    font-size: 14px;
  }
}

/* =========================================================
   [ PRODUCTS ] ギャラリー下：オンラインショップ導線ボタン
   All products（.subcat-link-box）と同じデザインを流用。中央配置。
========================================================= */
.products-shop-area {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 10px;
}
/* 日本語テキストなので幅を内容に合わせて確保、フォントは明朝で自然に */
.products-shop-link {
  min-width: 240px;
  padding: 0 32px;
}
.products-shop-link .subcat-text {
  font-family: 'Zen Old Mincho', serif;
}
/* このボタンは英日切替をしないため、ホバーで文字が消えないようにする */
.products-shop-link:hover .subcat-en {
  opacity: 1;
}

/* =========================================================
   [ Products Page ] Masonry Gallery
========================================================= */
.gallery-wrapper {
  position: relative;
  width: 100%;
  /* 初期表示時の高さを制限（MOREボタンで展開させる想定） */

  margin-bottom: 60px;
}

.masonry-gallery {
  /* CSSのマルチカラムを利用してMasonryレイアウトを作成 */
  column-count: 4; /* PC時は4カラム */
  column-gap: 30px; /* 画像と画像の横の隙間 */
  /* 初期は隠しておき、JSの並べ替え完了後にふわっと表示（チカチカ防止）。
     JSが走らない場合に備え、フォールバックで少し遅れて必ず表示する。 */
  opacity: 0;
  transition: opacity 0.5s ease;
  animation: galleryFallbackShow 0s linear 1.5s forwards; /* 1.5秒後に強制表示（保険） */
}
.masonry-gallery.is-ready {
  opacity: 1;
  animation: none; /* JSで表示できたらフォールバックは不要 */
}
@keyframes galleryFallbackShow {
  to { opacity: 1; }
}

/* ギャラリーアイテム（画像枠） */
.gallery-item {
  display: inline-block; /* block から inline-block に変更して上端を揃える */
  position: relative;
  width: 100%;
  margin-bottom: 30px; /* 画像と画像の縦の隙間 */
  border-radius: 8px;
  overflow: hidden;
  /* アイテムが途中で分断されないようにする */
  break-inside: avoid;
  vertical-align: top; /* 念のため上揃えを強制 */
}

.gallery-item img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

/* JSフィルタ・段階表示で隠すアイテム */
.gallery-item.is-hidden {
  display: none;
}

/* --- ホバー時のオーバーレイ --- */
.gallery-overlay {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  box-sizing: border-box; /* 余白を含めて100%の高さに収める */
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.18) 100%);
  border-radius: 8px;
  opacity: 0; 
  transition: opacity 0.4s ease;
  padding: 30px 25px;
  display: flex;
  flex-direction: column;
  justify-content: space-between; 
}

.overlay-text {
  display: flex;
  flex-direction: column;
  gap: 5px;
  transform: translateY(-10px); /* 初期位置を少し上に */
  transition: transform 0.4s ease;
}

.overlay-en {
  color: #ffffff;
  font-family: 'Marcellus', serif;
  font-size: 23px;
  font-weight: 400;
  margin: 0;
}

.overlay-ja {
  color: #ffffff;
  font-family: 'Zen Old Mincho', serif;
  font-size: 14px;
  margin: 0;
}

/* 詳細度を上げて !important を回避 */
.gallery-overlay .overlay-arrow {
  align-self: flex-end; 
  width: 80px; 
  height: auto;
  transform: translateX(-10px);
  transition: transform 0.4s ease;
}

/* ホバー時の挙動 */
.gallery-item:hover .gallery-overlay {
  opacity: 1; /* グラデーション表示 */
}
.gallery-item:hover .overlay-text {
  transform: translateY(0); /* ふんわり下りてくる */
}
.gallery-item:hover .overlay-arrow {
  transform: translateX(0); /* ふんわり右へ */
}

/* --- 下部のグラデーションフェード --- */
.gallery-fade {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 300px; /* 最後の1行くらいにかかる程度に調整 */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
  pointer-events: none; /* クリックを阻害しない */
  z-index: 5; /* 画像の上に確実にかぶせる */
}

/* --- MOREボタンエリア --- */
.gallery-more-area {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 20px;
}

/* --- MOREボタンで展開した時のスタイル --- */
.gallery-wrapper.is-expanded {
  max-height: none; /* 高さ制限を解除して全件表示 */
}

.gallery-fade.is-hidden {
  display: none; /* グラデーションを消す */
}

.gallery-more-area.is-hidden {
  display: none; /* MOREボタン自体を消す */
}


/* =========================================================
   [ スマホ対応 ] レスポンシブ調整（Products）
========================================================= */
@media (max-width: 768px) {
  .products-section {
    padding: 100px 0;
    overflow: hidden; /* 意図せぬ画面全体の横揺れを防止 */
  }
  
  .products-inner {
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box; /* パディングを含めて100%幅に収める（必須） */
  }

  .products-title {
    font-size: 40px;
    margin-bottom: 40px;
  }

/* --- タブのスマホ調整（スワイプUI） --- */
  .products-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    width: 100vw; 
    margin-left: calc(50% - 50vw); 
    padding-left: 20px; 
    padding-right: 20px; 
    box-sizing: border-box;
    justify-content: flex-start;
    -webkit-overflow-scrolling: touch; 
    margin-bottom: 30px;
    touch-action: pan-x; /* ★これを追加（横スワイプ時の縦揺れ防止） */
  }
  .products-tabs::-webkit-scrollbar {
    display: none; /* スクロールバーを隠す */
  }
  .tab-item a {
    padding: 10px 20px;
    font-size: 14px;
    white-space: nowrap;
  }

  /* --- ギャラリー（スマホは3カラム） --- */
  .gallery-wrapper {
    width: 100%;

    box-sizing: border-box;
  }
  .masonry-gallery {
    column-count: 2;
    column-gap: 10px; /* スマホ時は隙間を少し狭くして見栄えを調整 */
  }
  .gallery-item {
    margin-bottom: 10px; /* gapに合わせて下余白も調整 */
    border-radius: 6px;
  }
  .gallery-overlay {
    padding: 15px 10px;
    border-radius: 6px;
  }
  .overlay-en {
    font-size: 14px;
  }
  .overlay-ja {
    font-size: 10px;
  }
  .gallery-overlay .overlay-arrow {
    width: 45px; /* スマホ時は少し小さくする */
  }
}



/* =========================================================
   [ PRODUCTS ] MOREボタンの矢印を下向きに（もっと読み込む＝下展開）
   #js-gallery-more 限定。共通 .view-more には影響しない
========================================================= */

/* is-center の固定幅を解除して矢印を中央に置けるように */
#js-gallery-more.view-more {
  width: auto;
}

/* 矢印の器：縦向きにするため高さを持たせる */
#js-gallery-more .view-more-lines {
  position: relative;
  width: 8px;
  height: 56px;   /* 矢印（軸）の長さ。下向きなので縦方向 */
  margin: 0 auto;
}

/* 軸（縦線）：矢じりの手前まで */
#js-gallery-more .line-d {
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 100%;
  background-color: #090909;
  transform: translateX(-50%);
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
#js-gallery-more .line-w {
  position: absolute;
  top: auto;        /* ← 追加：共通CSSの top:50% を打ち消す */
  right: auto;      /* ← 追加：共通CSSの right:0 を打ち消す */
  bottom: 1px;
  left: 50%;
  width: 8px;
  height: 8px;
  border-right: 1px solid #090909;
  border-bottom: 1px solid #090909;
  border-top: none;
  border-left: none;
  background-color: transparent;
  transform: translate(-50%, 0) rotate(45deg);
  transform-origin: center;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* ホバー：常時アニメを止めるだけ（下への移動はしない） */
#js-gallery-more:hover .line-d::before,
#js-gallery-more:hover .line-w {
  animation-play-state: paused;
}
#js-gallery-more:hover .line-d::before {
  transform: scaleY(1);
  transform-origin: top center;
}

/* =========================================================
   [ PRODUCTS ] 下向きMOREの常時アニメを「縦方向」に差し替え
   共通(common.css)の横向き常時アニメ(viewMoreDraw=scaleX / viewMoreHead=translateX)
   はこの縦向き矢印に合わないため、#js-gallery-more 限定で上書きする。
========================================================= */
/* 共通の横アニメ・薄ベースを無効化して縦向き用に作り直す */
#js-gallery-more .line-d {
  background-color: #090909; /* 縦の軸はそのまま濃く（薄ベースにはしない） */
  opacity: 1;
}
/* 共通で付く横方向の満ち引き(::before)をこのボタンでは縦方向に */
#js-gallery-more .line-d::before {
  background-color: #090909;
  transform: scaleY(0);
  transform-origin: top center;
  animation: galleryMoreDraw 2s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}
@keyframes galleryMoreDraw {
  0%   { transform: scaleY(0); transform-origin: top center; }
  40%  { transform: scaleY(1); transform-origin: top center; }
  50%  { transform: scaleY(1); transform-origin: bottom center; }
  90%  { transform: scaleY(0); transform-origin: bottom center; }
  100% { transform: scaleY(0); transform-origin: bottom center; }
}

/* 下向き矢じりのパルス（下方向へ押し出す）。既存 transform を保持しつつ Y を足す */
#js-gallery-more .line-w {
  animation: galleryMoreHead 2s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}
@keyframes galleryMoreHead {
  0%, 30%   { transform: translate(-50%, 0) rotate(45deg); }
  40%       { transform: translate(-50%, 4px) rotate(45deg); }
  50%, 100% { transform: translate(-50%, 0) rotate(45deg); }
}

@media (prefers-reduced-motion: reduce) {
  #js-gallery-more .line-d::before,
  #js-gallery-more .line-w {
    animation: none !important;
  }
  #js-gallery-more .line-d::before {
    transform: scaleY(1);
    transform-origin: top center;
  }
}