@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&family=Noto+Sans+JP:wght@100..900&display=swap');


/* ============================================================
   Variables & Base
============================================================ */
:root {
  --bg:          #000000;
  --bg-section:  #000000;
  --text:        #ffffff;
  --text-sub:    rgba(255,255,255,0.55);
  --accent-blue: #4fb8e0;
  --accent-gold: #c9a16d;
  --border:      rgba(255,255,255,0.18);
  --max-w:       1360px;
}

body {
  background: var(--bg);
}

.sect--team {
  display: none;
}

.site-main {
  font-family: 'Lato', 'Noto Sans JP', sans-serif;
  font-weight: 300;
  letter-spacing: 0.04em;
  padding-top: 0 !important; /* MV is full-screen, override common */
  overflow: clip;
}

img {
  display: block;
  width: 100%;
}

::selection {
  background: rgb(46 98 128 / 50%);
  color: #fff;
}

/* ============================================================
   Header（このページのみ白色上書き）
============================================================ */
header,
header a,
header a:hover {
  color: #fff;
}

/* ============================================================
   js-fade-up（IntersectionObserver で .is-active 付与）
============================================================ */
.js-fade-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}
.js-fade-up.is-active {
  opacity: 1;
  transform: translateY(0);
}
.js-fade-up[data-delay="100"] {
  transition-delay: 0.1s;
}
.js-fade-up[data-delay="150"] {
  transition-delay: 0.15s;
}
.js-fade-up[data-delay="200"] {
  transition-delay: 0.2s;
}

/* Blur reveal（画像） */
.js-blur-reveal {
  opacity: 0;
  filter: blur(10px);
  transition: opacity 1.8s ease, filter 1.8s ease;
}
.js-blur-reveal.is-active {
  opacity: 1;
  filter: blur(0px);
}

/* Text mask reveal */
.js-txt-reveal {
  overflow: hidden;
  display: block;
}
.js-txt-reveal-inner {
  display: block;
  transform: translateY(110%);
  transition: transform 2s cubic-bezier(0.16, 1, 0.3, 1);
}
.js-txt-reveal.is-active .js-txt-reveal-inner {
  transform: translateY(0);
}
.js-txt-reveal[data-delay="100"] .js-txt-reveal-inner {
  transition-delay: 0.1s;
}
.js-txt-reveal[data-delay="200"] .js-txt-reveal-inner {
  transition-delay: 0.2s;
}
.js-txt-reveal[data-delay="300"] .js-txt-reveal-inner {
  transition-delay: 0.3s;
}
.js-txt-reveal[data-delay="400"] .js-txt-reveal-inner {
  transition-delay: 0.4s;
}

/* ============================================================
   Section heading
============================================================ */
.sect-hd {
  text-align: center;
  padding: 0 0 60px;
}
.sect-hd h2 {
  font-size: clamp(28px, 3.5vw, 48px);
  font-weight: 200;
  letter-spacing: 0.35em;
  color: var(--text);
}
@media (max-width: 769px) {
  .sect-hd {
    padding-bottom: 40px;
  }
}

/* セクション背景：共通（INTRO / MOVIE / LINE UP） */
.sect-intro,
.sect-movie,
.sect-lineup {
  background: var(--bg);
}

/* 共通フェードイン（MV背景・SCROLLインジケーターで使用） */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ============================================================
   MV
============================================================ */
.sect-mv {
  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100svh;
  min-height: 500px;
  overflow: hidden;
}
.sect-mv::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(to bottom, transparent, #000000);
  z-index: 1;
  pointer-events: none;
}

.mv-bg {
  position: absolute;
  inset: -8% 0;
  will-change: transform;
  animation: fadeIn 1.8s ease 1.2s both;
}
.mv-bg .mv-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.mv-inner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.mv-logo {
  width: clamp(240px, 48.6vw, 700px); /* 1440px時 ≈ 700px */
  overflow: hidden;
}
.mv-logo-inner {
  animation: mvLogoRise 2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}
@keyframes mvLogoRise {
  from { transform: translateY(110%); }
  to   { transform: translateY(0); }
}

/* SCROLL indicator */
.scroll-indicator {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  z-index: 3;
  animation: fadeIn 0.8s ease 2.0s both;
}

.scroll-text {
  font-family: 'Lato', sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.3em;
  color: #666666;
}

/* 線：クリップラッパーの中をスライドダウン */
.scroll-line {
  display: block;
  width: 1px;
  height: 50px;
  overflow: hidden;
  position: relative;
}
.scroll-line::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(to bottom, #2e6280, transparent);
  animation: scrollLineDrop 3.2s ease-in-out infinite;
}
@keyframes scrollLineDrop {
  0%   { transform: translateY(-100%); }
  50%  { transform: translateY(0%); }
  100% { transform: translateY(100%); }
}

@media (max-width: 769px) {
  .mv-logo {
    width: min(420px, 92vw);
  }
  .scroll-indicator {
    bottom: 30px;
  }
  .scroll-line {
    height: 36px;
  }
}

/* ============================================================
   INTRO
============================================================ */
.sect-intro {
  padding-top: 15rem;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}

.intro-text-wrap {
  width: min(790px, 60%);
  margin: 0 auto;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.intro-catch {
  font-size: min(22px, 2.2vw);
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.1em;
  color: #fff;
  margin-bottom: 1.3rem;
}

.intro-body p {
  font-size: min(16px, 1.6vw);
  font-weight: 300;
  line-height: 3;
  letter-spacing: 0.1em;
  color: #fff;
  margin: 0;
}

/* クラブ画像：右下に絶対配置 */
.intro-img {
  position: absolute;
  bottom: 6rem;
  right: 0;
  width: 80%;
  z-index: 0;
  will-change: transform;
}

@media (max-width: 1200px) and (min-width: 770px) {
  .sect-intro {
    padding-top: clamp(80px, 8vw, 150px);
    min-height: unset;
    padding-bottom: 20rem;
  }
  .intro-img {
    bottom: 0;
  }
}

@media (max-width: 769px) {
  .sect-intro {
    padding-top: 60px;
    padding-bottom: 12rem;
    min-height: unset;
  }
  .intro-text-wrap {
    width: 86%;
  }
  .intro-catch {
    font-size: min(20px, 5.3vw);
    line-height: 1.9;
    margin-bottom: 15px;
  }
  .intro-body p {
    font-size: min(14px, 3.8vw);
    line-height: 2.6;
  }
  .intro-img {
    bottom: 1rem;
    right: -40%;
    width: 150%;
    margin: 0;
  }
}

/* ============================================================
   MOVIE
============================================================ */
.sect-movie {
  padding: 0 5%;
  margin-bottom: -10%;
}

.sect-movie .sect-hd {
  text-align: left;
  padding-bottom: 40px;
}
.sect-movie .sect-hd h2 {
  font-size: 36px;
  font-weight: 400;
  letter-spacing: 0.075em;
}

.movie-inner {
  margin: 0 auto;
}

/* 左（飾り画像）: 広め、右（動画リスト）: 狭め */
.movie-layout {
  display: grid;
  grid-template-columns: 58fr 40fr;
  gap: 40px;
  align-items: start;
}

/* 左：飾り画像 */
.movie-deco {
  overflow: hidden;
  will-change: transform;
}

/* 右：動画リスト（縦積み） */
.movie-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.movie-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.movie-thumb {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border-radius: 5px;
  border: 1px solid rgba(226, 232, 240, 0.5);
}
.movie-thumb img {
  display: block;
  aspect-ratio: 16/9;
  object-fit: cover;
  transition: transform 0.7s ease;
}
.movie-thumb:hover img {
  transform: scale(1.04);
}

.play-btn {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 1.5rem;
  pointer-events: none;
}

/* リングとアイコンを重ねるラッパー */
.play-icon-wrap {
  position: relative;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* リング（#2e6280 → 広がって消える） */
.ripple {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid #2e6280;
  animation: rippleOut 2.6s ease-out infinite;
  opacity: 0;
}

@keyframes rippleOut {
  0%   { transform: scale(1);   opacity: 1; }
  100% { transform: scale(1.9); opacity: 0; }
}

/* 中央の静止ボタン（三角・線は #e2e8f0） */
.play-icon {
  position: relative;
  z-index: 1;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 1.5px solid #e2e8f0;
  background: rgba(226, 232, 240, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s, transform 0.3s;
}
.movie-thumb:hover .play-icon {
  background: rgba(226, 232, 240, 0.2);
  transform: scale(1.1);
}
.play-icon svg {
  width: 16px;
  height: 16px;
  margin-left: 3px;
}

/* PLAY FILM テキスト */
.play-film-txt {
  font-family: 'Lato', sans-serif;
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 0.075em;
  color: #fff;
}

/* 動画タイトル */
.movie-title {
  font-size: min(16px, 1.6vw);
  font-weight: 300;
  letter-spacing: 0.075em;
  color: #fff;
  text-align: left;
}

/* モーダル */
.modal-video {
  background-color: rgb(0 0 0 / 90%) !important;
}
.modal-video-body .modal-video-close-btn {
  width: 55px;
  height: 55px;
}
@media (orientation: landscape) {
    .modal-video-body .modal-video-close-btn {
        top:0;
        right: -55px;
    }
}

@media (max-width: 1200px) and (min-width: 770px) {
  .sect-movie {
    padding: 6rem 5% 3rem;
  }
}

@media (max-width: 769px) {
  .sect-movie {
    padding: 6rem 5% 3rem;
  }
  .sect-movie .sect-hd {
    padding-bottom: 28px;
  }
  .sect-movie .sect-hd h2 {
    font-size: 26px;
    position: relative;
    z-index: 1;
  }
  .movie-deco {
    margin-top: -4rem;
    margin-bottom: -12rem;
    width: 120%;
  }
  .movie-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .movie-title {
    font-size: min(16px, 4vw);
  }
}

/* ============================================================
   LINE UP – base
============================================================ */
.sect-lineup {
  padding: 0 5% 12%;
}
.sect-lineup .sect-hd {
  padding: 0;
}
.sect-lineup .sect-hd h2 {
  font-size: 36px;
  font-weight: 400;
  letter-spacing: 0.075em;
}

/* ============================================================
   LINE UP – 共通レイアウト（4アイテム共通）
   ※ T//WORLD / Prism / BERES / Bugatti Putter はすべて
     .lineup-item の子要素として同じ見た目になるため、
     アイテム別セレクタではなく .lineup-item にまとめて指定
============================================================ */

/* ガラス効果ボックス */
.lineup-item .item-info-inner {
  width: 100%;
  max-width: none;
  padding: 2.9rem 2rem;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(226, 232, 240, 0.5);
  border-radius: 5px;
}

/* 製品名 */
.lineup-item .item-name {
  font-size: min(22px, 2vw);
  font-weight: 700;
  letter-spacing: 0.075em;
  color: #fff;
  margin-bottom: 16px;
  line-height: 1.5;
}

/* コンセプト */
.lineup-item .item-desc {
  font-size: min(18px, 1.6vw);
  font-weight: 300;
  letter-spacing: 0.1em;
  line-height: 1.75;
  color: #fff;
  margin-bottom: 24px;
}

/* リスト */
.lineup-item .item-features {
  margin-bottom: 28px;
}
.lineup-item .item-features li {
  font-size: min(14px, 1.2vw);
  font-weight: 300;
  letter-spacing: 0.1em;
  line-height: 1.6;
  margin-bottom: 10px;
  color: #fff;
  padding-left: 1.2em;
  position: relative;
}
.lineup-item .item-features li::before {
  content: '-';
  position: absolute;
  left: 0;
  color: #fff;
}

/* 製品画像（T//WORLD・Prismのみ。BERES・Bugatti Putterはgrade-img構造を使用） */
.lineup-item .item-img {
  width: 100%;
  height: auto;
  display: block;
}

/* Infoカラムの位置：画像左タイプ（T//WORLD・BERES）/ 画像右タイプ（Prism・Bugatti Putter） */
.item-tw .item-info-col,
.item-beres .item-info-col {
  position: absolute;
  right: 1px;
  top: 0;
  bottom: 0;
  z-index: 1;
}
.item-prism .item-info-col,
.item-bugatti-putter .item-info-col {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 1;
}

/* リスト内（）部分：14px × 75% */
.feat-note {
  font-size: 0.75em;
}

.grade-lbl {
  color: #fff;
  font-weight: 300;
  letter-spacing: 0.1em;
  font-size: 16px;
}

/* 価格：右揃え、数字と単位で文字サイズ分離 */
.item-tw .item-price,
.item-prism .item-price {
  text-align: right;
  margin-bottom: 28px;
}
.price-num {
  font-size: min(16px, 1.2vw);
  font-weight: 300;
  letter-spacing: 0.075em;
  color: #fff;
}
.price-unit {
  font-size: min(12px, 0.9vw);
  font-weight: 300;
  letter-spacing: 0.1em;
  margin-left: 3px;
  color: #fff;
}

/* ============================================================
   LINE UP – T//WORLD（画像左）
============================================================ */
.lineup-item.item-tw {
  position: relative;
  overflow: hidden;
  display: block;
}
.item-tw .item-img-col {
  width: 65%;
  z-index: 0;
  will-change: transform;
}

/* ============================================================
   LINE UP – Prism Bugatti Putter（画像右）
============================================================ */
.lineup-item.item-prism {
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: flex-end;
}
.item-prism .item-img-col {
  width: 55%;
  flex-shrink: 0;
  z-index: 0;
  will-change: transform;
}

/* ============================================================
   LINE UP – BERES（画像左、グレードスクロール）
============================================================ */
.lineup-item.item-beres {
  position: relative;
  overflow: visible;
  display: block;
}
.item-beres .item-img-col {
  width: 65%;
  z-index: 0;
}

/* ============================================================
   LINE UP – Super Premium Bugatti Putter（画像右、グレードスクロール）
============================================================ */
.lineup-item.item-bugatti-putter {
  position: relative;
  overflow: visible;
  display: flex;
  justify-content: flex-end;
}
.item-bugatti-putter .item-img-col {
  width: 55%;
  flex-shrink: 0;
  z-index: 0;
}

/* ============================================================
   LINE UP – 共通ボタン（全アイテム共通）
============================================================ */
.lineup-btn-wrap {
  display: block;
  text-align: center;
  text-decoration: none;
  margin-top: 2.5rem;
}
.lineup-btn {
  display: inline-block;
  background: #000;
  border: 1px solid #fff;
  color: #fff;
  font-family: 'Lato', 'Noto Sans JP', sans-serif;
  font-size: min(16px, 1vw);
  font-weight: 400;
  letter-spacing: 0.075em;
  padding: 9px 10px 11px;
  border-radius: 100px;
  width: min(289px, 80%);
  text-align: center;
  transition: opacity 0.3s;
  box-sizing: border-box;
}
.lineup-btn:hover {
  opacity: 0.7;
}

/* ============================================================
   LINE UP – その他アイテム（Prism / グレードスクロール）
============================================================ */
.lineup-item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  position: relative;
}
.lineup-item.reverse {
  direction: rtl;
}
.lineup-item.reverse > * {
  direction: ltr;
}

/* Image column */
.item-img-col {
  position: relative;
  overflow: hidden;
  will-change: transform;
}
.item-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Info column */
.item-info-col {
  display: flex;
  align-items: center;
  width: 42%;
  will-change: transform;
}

.item-info-inner {
  max-width: 480px;
}

.item-name {
  font-size: clamp(16px, 1.8vw, 22px);
  font-weight: 300;
  letter-spacing: 0.1em;
  margin-bottom: 20px;
  line-height: 1.4;
}

.item-desc {
  font-size: clamp(12px, 1.1vw, 14px);
  color: var(--text-sub);
  line-height: 1.9;
  margin-bottom: 24px;
  letter-spacing: 0.06em;
}

.item-features {
  margin-bottom: 28px;
}
.item-features li {
  font-size: clamp(11px, 1vw, 13px);
  color: var(--text-sub);
  line-height: 1.8;
  padding-left: 1em;
  position: relative;
}
.item-features li::before {
  content: '–';
  position: absolute;
  left: 0;
  color: var(--accent-gold);
}

.item-price {
  font-size: clamp(11px, 1vw, 13px);
  color: var(--text-sub);
  letter-spacing: 0.08em;
  margin-bottom: 32px;
  text-align: right;
}

/* グレード製品の価格行：行間を詰める */
.item-beres .item-price,
.item-bugatti-putter .item-price {
  margin: 0;
  margin-bottom: 0.5rem;
  color: #fff;
}
/* グレード価格：表示中の画像に対応する行だけ不透明度を上げる */
.js-grade-price {
  opacity: 0.3;
  transition: opacity 0.5s ease;
}
.js-grade-price.is-current {
  opacity: 1;
}

.item-beres .item-info-inner p:last-of-type,
.item-bugatti-putter .item-info-inner p:last-of-type {
  margin-bottom: 28px;
}

/* Grade price list */
.item-grades {
  margin-bottom: 32px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.item-grades li {
  display: flex;
  align-items: baseline;
  gap: 16px;
  font-size: clamp(11px, 1vw, 13px);
}
.grade-price {
  color: var(--text-sub);
}

/* Shop button */
.item-btn-wrap {
  display: inline-block;
  text-decoration: none;
  max-width: 240px;
  width: 100%;
}
.item-btn-wrap:hover {
  opacity: 1;
}

.item-btn {
  font-size: 12px;
  letter-spacing: 0.2em;
  padding: 14px 20px;
  border-color: rgba(255,255,255,0.35);
  background: transparent;
  color: var(--text) !important;
}
.item-btn.ef-bgleft::before {
  background: rgba(255,255,255,0.12);
}
.ef-hover:hover .item-btn {
  color: var(--text) !important;
}

/* ============================================================
   Grade scroll section（BERES / Bugatti Putter）
============================================================ */
.js-grade-outer {
  position: relative;
  margin-bottom: 4rem;
}

.grade-sticky {
  overflow: hidden;
}

.grade-img-col {
  position: relative;
}

.grade-img-wrap {
  position: relative;
  overflow: hidden;
}

.grade-img {
  display: none;
  position: relative;
}
.grade-img.is-active {
  display: block;
}
.grade-img img {
  width: 100%;
  height: auto;
  display: block;
}
.grade-img .img-grade {
  color: #000;
}

@media (max-width: 1200px) and (min-width: 770px) {
  .item-info-col {
    width: 50%;
  }
}

/* ============================================================
   SP: lineup
============================================================ */
@media (max-width: 769px) {
  .sect-lineup {
    padding: 10rem 0 0;
  }
  .sect-lineup .sect-hd {
    padding-bottom: 5rem;
  }
  .sect-lineup .sect-hd h2 {
    font-size: 26px;
  }

  .lineup-item.item-tw,
  .lineup-item.item-prism,
  .lineup-item.item-beres,
  .lineup-item.item-bugatti-putter {
    display: grid;
    grid-template-columns: 1fr;
    min-height: unset;
    max-height: unset;
    direction: ltr !important;
    margin-top: -3rem;
  }
  .lineup-item.reverse > * {
    direction: ltr;
  }

  /* On SP, image always on top */
  .lineup-item .item-img-col {
    width: 100%;
    order: -1;
    /*aspect-ratio: 4/3;*/
  }
  .lineup-item .item-info-col {
    position: relative;
    width: 100%;
    padding: 36px 6%;
    order: 0;
    right: 0;
    left: 0;
    top: -5rem;
  }
  .item-info-inner {
    max-width: 100%;
  }
  .lineup-item .item-info-inner {
    padding: 2rem 1rem 2.2rem;
  }
  .lineup-item .item-name {
    font-size: min(20px, 5.3vw);
  }
  .lineup-item .item-desc {
    font-size: min(16px, 4.3vw);
  }
  .lineup-item .item-features li {
    line-height: 1.6;
    font-size: min(12px, 3.5vw);
    margin-bottom: 8px;
  }
  .price-num {
    font-size: min(14px, 3.8vw);
  }
  .price-unit {
    font-size: min(12px, 3.3vw);
  }
  .lineup-btn {
    font-size: min(13px, 3.5vw);
  }

  /* Grade scroll: simpler on SP – still functional but not full-screen sticky */
  .js-grade-outer {
    height: auto;
    margin-bottom: 2rem;
  }
  .grade-sticky {
    position: relative;
    top: auto;
    height: auto;
    min-height: unset;
  }
  .grade-img-col {
    aspect-ratio: 4 / 4;
  }
  .grade-img-wrap {
    position: relative;
    height: 100%;
  }
  .grade-img {
    position: absolute;
    inset: 0;
  }
  .grade-img:first-child {
    opacity: 1; /* always show first on SP */
  }
  .grade-img .img-grade {
    color: #ffffff;
    position: absolute;
    bottom: 3.5rem;
    right: 2rem;
    font-size: min(17px, 4vw);
    font-weight: 300;
    letter-spacing: 0.07rem;
  }
}