/* ===== 基本設定（リセット） ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --black: #0a0a0a;
  --white: #ffffff;
  --accent: #1f6fff;       /* タチコマの青 */
  --gray: #b9b9b9;
  /* 見出し用フォント（Canvaテンプレートに寄せる） */
  --font-heading: "Libre Franklin", "Franklin Gothic Medium", "Helvetica Neue", Arial, sans-serif;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--black);
  color: var(--white);
  /* Webフォントを使わず軽量に。日本語も英語もきれいに出る指定 */
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN",
               "Yu Gothic", "Meiryo", sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

/* ===== ヘッダー ===== */
.site-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
}

.site-header__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px 24px;
}

.brand {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: 0.04em;
  color: var(--white);
}

.brand__thin {
  font-weight: 300;
}

/* ===== ヒーロー ===== */
.hero {
  position: relative;
  width: 100%;
  height: 100svh;        /* 画面の高さいっぱい（スマホのアドレスバー対応） */
  min-height: 560px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 背景画像を全面に敷く */
.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* 文字を読みやすくするための黒い薄幕 */
.hero__overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center,
              rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.65) 100%);
  z-index: 1;
}

.hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 20px;
}

.hero__kicker {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.35em;
  color: var(--gray);
  margin-bottom: 16px;
}

.hero__title {
  font-family: var(--font-heading);
  font-weight: 800;
  line-height: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.hero__title-main {
  font-size: clamp(48px, 12vw, 120px);
  font-weight: 900;
  letter-spacing: 0.02em;
}

.hero__title-sub {
  font-size: clamp(28px, 7vw, 70px);
  font-weight: 300;
  letter-spacing: 0.08em;
}

.hero__edition {
  font-family: var(--font-heading);
  margin-top: 20px;
  font-size: clamp(12px, 2.5vw, 16px);
  font-weight: 400;
  letter-spacing: 0.25em;
  color: var(--gray);
}

.hero__copyright {
  position: absolute;
  bottom: 16px;
  right: 16px;
  z-index: 2;
  font-size: 10px;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.02em;
}

/* ===== 共通レイアウト ===== */
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

.section-kicker,
.product__no {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.25em;
  color: var(--accent);
  margin-bottom: 10px;
}

.section-title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(24px, 4vw, 40px);
  letter-spacing: 0.02em;
}

.caption {
  margin-top: 8px;
  font-size: 10px;
  color: rgba(255,255,255,0.45);
}

/* ===== ② 動画セクション ===== */
.video-section {
  padding: 90px 0;
  text-align: center;
  background: #050505;
}

.video-section .section-title {
  margin-bottom: 32px;
}

.video-wrap {
  max-width: 760px;
  margin: 0 auto;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}

.branding-video {
  display: block;
  width: 100%;
  height: auto;
  background: #000;
}

/* ===== ③⑤⑥⑦⑧ 商品セクション ===== */
.product {
  padding: 90px 0;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.product__inner {
  display: flex;
  align-items: center;
  gap: 56px;
}

/* 偶数番は左右逆にして変化をつける */
.product--reverse .product__inner {
  flex-direction: row-reverse;
}

.product__text {
  flex: 1 1 0;
}

.product__media {
  flex: 1 1 0;
}

.product__media img {
  width: 100%;
  aspect-ratio: 4 / 3;          /* 設計図に合わせ横長の枠で統一 */
  object-fit: cover;            /* 枠に合わせてトリミング */
  object-position: center;
  background: #0d0d0d;
  border-radius: 6px;
}
/* トリミングの位置調整 */
.product__media img.pos-top    { object-position: center top; }
.product__media img.pos-bottom { object-position: center bottom; }
/* 線画など、全体を見せたい画像はトリミングせず枠内に収める */
.product__media img.fit-contain { object-fit: contain; }

/* 商品セクション内の動画（PRODUCT 4 など）も画像と同じ横長枠に揃える */
.product-video {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: #000;
  border-radius: 6px;
  display: block;
}

.product__name {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(30px, 5vw, 52px);
  letter-spacing: 0.02em;
  line-height: 1.1;
  margin-bottom: 8px;
}

.product__jp {
  font-family: var(--font-heading);
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 400;
  color: var(--white);
  margin-bottom: 24px;
}

.product__desc {
  font-size: 14px;
  line-height: 2;
  color: var(--gray);
  max-width: 440px;
}

/* 近日公開の仮ボックス */
.coming-soon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  text-align: center;
}
.coming-soon__tag {
  font-family: var(--font-heading);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--accent);
}
.coming-soon__main {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: clamp(28px, 5vw, 46px);
  letter-spacing: 0.04em;
}
.coming-soon__sub {
  font-family: var(--font-heading);
  font-size: 13px;
  letter-spacing: 0.3em;
  color: var(--gray);
}

/* ===== ④ ギャラリー ===== */
.gallery {
  padding: 60px 0;
}
.gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.gallery__item {
  background: #111;
  border-radius: 6px;
  overflow: hidden;
}
.gallery__item img {
  width: 100%;
  height: 260px;
  object-fit: cover;
}
.gallery__item figcaption {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.1em;
  padding: 14px;
}

/* ===== ⑨ Option（LIGHTING） ===== */
.option {
  padding: 90px 0;
  background: #050505;
}
.option__inner {
  display: flex;
  align-items: center;
  gap: 56px;
}
.option__text { flex: 1 1 0; }
.option__media { flex: 1 1 0; }
.option__media img {
  width: 100%;
  height: auto;
  border-radius: 6px;
}

/* ===== ⑩ LICENSE HOLDER ===== */
.license {
  padding: 80px 0;
  background: #161616;
}
.license__inner {
  display: flex;
  align-items: center;
  gap: 48px;
}
.license__text { flex: 1 1 0; }
.license__media { flex: 1 1 0; }
.license__media img {
  width: 100%;
  height: auto;
  border-radius: 6px;
}
.license__head {
  margin-bottom: 36px;
}
.license__title {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: clamp(28px, 5vw, 48px);
  letter-spacing: 0.04em;
}
.license__jp {
  font-family: var(--font-heading);
  font-size: clamp(18px, 3vw, 26px);
}
.license__label {
  font-family: var(--font-heading);
  font-size: 12px;
  letter-spacing: 0.25em;
  color: var(--accent);
  margin-bottom: 12px;
}
.license__desc {
  font-size: 14px;
  line-height: 2;
  color: var(--gray);
  max-width: 560px;
}

/* ===== ⑪ フッター ===== */
.site-footer {
  padding: 50px 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  background: #0a0a0a;
}
.site-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.site-footer__x {
  display: flex;
  align-items: center;
  gap: 16px;
  text-align: right;
}
.site-footer__x p {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.4;
}
.x-link {
  color: var(--white);
  display: inline-flex;
  transition: opacity 0.2s;
}
.x-link:hover { opacity: 0.6; }

/* =========================================================
   タチコマの会（Pocket size ライン）= 青→ピンクのポップなトンマナ
   ========================================================= */
.pocket {
  background: linear-gradient(135deg, #3a5cff 0%, #8b5cf6 50%, #ff5ca8 100%);
  color: #fff;
}

/* 区切りの導入ブロック（Pocket size 見出し） */
.pocket-intro {
  text-align: center;
  padding: 110px 0 80px;
}
.pocket-intro__kicker {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3em;
  opacity: 0.9;
  margin-bottom: 18px;
}
.pocket-intro__title {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: clamp(40px, 9vw, 84px);
  line-height: 1.05;
  letter-spacing: 0.01em;
}
.pocket-intro__sub {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: clamp(20px, 4vw, 34px);
  letter-spacing: 0.1em;
  margin-top: 4px;
}
.pocket-intro__brand {
  margin-top: 24px;
  font-size: 14px;
  letter-spacing: 0.15em;
}
.pocket-intro__brand b { font-weight: 800; }

/* Pocket商品ラインナップ */
.pocket-lineup {
  padding: 20px 0 90px;
}
.pocket-lineup__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.pocket-card {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 10px;
  overflow: hidden;
  backdrop-filter: blur(2px);
}
.pocket-card img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  background: rgba(0,0,0,0.15);
}
.pocket-card__body {
  padding: 16px;
}
.pocket-card__name {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}
.pocket-card__desc {
  font-size: 12px;
  line-height: 1.8;
  opacity: 0.9;
}

/* =========================================================
   イベント情報（両ライン共通の締めセクション）
   ========================================================= */
.event {
  background: #0a0a0a;
  padding: 90px 0;
  text-align: center;
}
.event__festival {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(20px, 4vw, 32px);
  letter-spacing: 0.1em;
  color: var(--accent);
  margin-bottom: 28px;
}
.event__info {
  font-size: clamp(15px, 3vw, 19px);
  line-height: 2.1;
  color: var(--white);
}
.event__note {
  margin-top: 18px;
  font-size: 13px;
  color: var(--gray);
}

/* WFロゴ（クリックで公式サイトへ） */
.event__logo-link {
  display: inline-block;
  margin-bottom: 28px;
  transition: opacity 0.2s;
}
.event__logo-link:hover { opacity: 0.75; }
.event__logo {
  width: 220px;
  max-width: 70%;
  height: auto;
}

/* 卓番号・ディーラー名カード */
.event__booth {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin: 40px 0;
}
.booth-card {
  background: #161616;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 10px;
  padding: 22px 36px;
  min-width: 240px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.booth-card--accent {
  border-color: var(--accent);
  background: rgba(31,111,255,0.1);
}
.booth-card__label {
  font-family: var(--font-heading);
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--gray);
}
.booth-card__value {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(22px, 4vw, 30px);
  color: var(--white);
}
.booth-card__value--big {
  font-size: clamp(34px, 7vw, 52px);
  letter-spacing: 0.04em;
  color: var(--accent);
}
.dealer-logo-box { background:#fff; border-radius:8px; padding:14px 16px; margin-top:2px; text-align:center; }
.booth-card__logo-link { display:inline-block; transition:opacity 0.2s; }
.booth-card__logo-link:hover { opacity:0.8; }
.booth-card__logo { height:92px; width:auto; display:block; margin:0 auto; }
.booth-card__note { display:block; font-size:11px; color:#111; font-weight:700; margin-top:8px; }

/* 会場マップ（ダミー） */
.event__map {
  max-width: 640px;
  margin: 0 auto;
}
.map-placeholder {
  aspect-ratio: 16 / 9;
  border: 2px dashed rgba(255,255,255,0.25);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray);
  font-size: 14px;
  letter-spacing: 0.1em;
  margin-bottom: 18px;
}
.map-link {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.08em;
  color: var(--white);
  background: var(--accent);
  padding: 14px 32px;
  border-radius: 999px;
  text-decoration: none;
  transition: opacity 0.2s;
}
.map-link:hover { opacity: 0.85; }

/* 控えめな補助リンク（公式PDF用） */
.map-link--ghost {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.4);
  color: var(--white);
  margin-top: 20px;
}

/* フロアガイド埋め込み＋ブースマーカー */
.floor-map {
  position: relative;
  display: inline-block;
  max-width: 100%;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.12);
}
.floor-map img {
  width: 100%;
  height: auto;
  display: block;
}
.floor-map__pin {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.floor-map__ring {
  display: block;
  width: 30px;
  height: 30px;
  border: 3px solid var(--accent);
  border-radius: 50%;
  background: rgba(31,111,255,0.15);
  animation: pinpulse 1.7s ease-out infinite;
}
.floor-map__label {
  position: absolute;
  left: 50%;
  top: calc(100% + 8px);
  transform: translateX(-50%);
  white-space: nowrap;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 12px;
  line-height: 1.25;
  text-align: center;
  padding: 6px 10px;
  border-radius: 6px;
}
@keyframes pinpulse {
  0%   { box-shadow: 0 0 0 0 rgba(31,111,255,0.55); }
  70%  { box-shadow: 0 0 0 14px rgba(31,111,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(31,111,255,0); }
}

/* ===== スマホ調整 ===== */
@media (max-width: 600px) {
  .hero__copyright {
    right: 50%;
    transform: translateX(50%);
    bottom: 12px;
    text-align: center;
    width: 92%;
  }

  .pocket-lineup__grid {
    grid-template-columns: 1fr;
  }
  .pocket-intro {
    padding: 70px 0 50px;
  }

  .product,
  .video-section,
  .option {
    padding: 56px 0;
  }

  /* スマホでは縦並びに（画像を上、文章を下） */
  .product__inner,
  .product--reverse .product__inner,
  .option__inner,
  .license__inner {
    flex-direction: column;
    gap: 28px;
  }

  .product__desc,
  .license__desc {
    max-width: 100%;
  }

  .gallery__grid {
    grid-template-columns: 1fr;
  }
  .gallery__item img {
    height: 220px;
  }

  .site-footer__inner {
    flex-direction: column;
    align-items: flex-start;
  }
  .site-footer__x {
    text-align: left;
  }
}