:root{
  --bg:#000; --fg:#fff; --fg-soft:#cfcfcf;
  --overlay: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.55) 40%, rgba(0,0,0,.7));
  --header-h: 64px;
}

/* Base */
*{ box-sizing:border-box; }
html,body{ height:100%; }
html{ color-scheme: dark; }
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family: system-ui, -apple-system, Segoe UI, Roboto,
    "Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic", Meiryo, sans-serif;
}

/* Header */
.site-header{
  position:fixed; inset:0 0 auto 0; height:var(--header-h);
  display:flex; align-items:center; justify-content:space-between; padding:0 16px;
  background: rgba(0,0,0,.35); backdrop-filter: blur(6px); z-index:50;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.brand{ font-weight:800; letter-spacing:.08em; font-size:18px; }
.hamburger{ width:44px; height:44px; border:0; background:transparent; cursor:pointer; position:relative; }
.hamburger span{ position:absolute; left:10px; right:10px; height:2px; background:#fff; transition:transform .25s ease, opacity .25s ease; }
.hamburger span:nth-child(1){ top:14px; } .hamburger span:nth-child(2){ top:21px; } .hamburger span:nth-child(3){ top:28px; }
.hamburger[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* Menu panel */
.menu-panel{
  position:absolute; top:var(--header-h); right:12px; width:min(280px,90vw);
  background: rgba(10,10,10,.92); border:1px solid rgba(255,255,255,.08);
  border-radius:12px; overflow:hidden; z-index:60; box-shadow:0 24px 60px rgba(0,0,0,.6);
}
.menu-panel ul{ list-style:none; padding:8px; margin:0; }
.menu-panel li a{ display:block; padding:14px 16px; color:#fff; text-decoration:none; border-radius:8px; }
.menu-panel li a:hover{ background: rgba(255,255,255,.06); }

/* Slider */
.hero{ position:relative; height:100svh; overflow:hidden; }
.slides{
  position:absolute; inset:0; display:flex; height:100%;
  will-change: transform; transition: transform .8s cubic-bezier(.2,.6,.2,1);
}
.slide{
  position:relative; min-width:100%; height:100%;
  background:#000; background-position:center; background-repeat:no-repeat; background-size:cover;
  isolation:isolate; transform: translateZ(0); /* mobile合成安定化 */
}
.overlay{ position:absolute; inset:0; background:var(--overlay); z-index:0; }

/* Caption */
.caption{ position:absolute; inset:auto 6vw 14vh 6vw; z-index:1; max-width:800px; }
.caption h2{ font-size: clamp(26px, 5vw, 56px); line-height:1.1; margin:0 0 10px; font-weight:800; }
.caption p{ font-size: clamp(14px, 2.4vw, 18px); color:var(--fg-soft); margin:0 0 20px; }
.caption .cta{
  display:inline-block; padding:10px 18px; background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.25); border-radius:999px; color:#fff; text-decoration:none; font-weight:700; letter-spacing:.04em;
  backdrop-filter: blur(4px); transition: background .2s ease, transform .2s ease, border-color .2s ease;
}
.caption .cta:hover{ background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.4); transform: translateY(-1px); }

/* Text slide-in（CSS transition方式） */
.caption .line{
  opacity:0;
  transform: translateY(10px);
  transition: transform .9s ease, opacity .9s ease;
  will-change: transform, opacity;
}
.caption .line[data-ani="left"]  { transform: translateX(-24px); }
.caption .line[data-ani="right"] { transform: translateX(24px); }
.caption .line[data-ani="up"]    { transform: translateY(20px); }

/* 発火状態：移動完了後に is-primed を付与するだけ */
.slide.is-primed .caption .line{ opacity:1; transform:none; }

/* スタッガー（必要数だけ増やせます） */
.slide.is-primed .caption .line:nth-child(1){ transition-delay: 0ms; }
.slide.is-primed .caption .line:nth-child(2){ transition-delay: 80ms; }
.slide.is-primed .caption .line:nth-child(3){ transition-delay:160ms; }
.slide.is-primed .caption .line:nth-child(4){ transition-delay:240ms; }

/* Controls */
.nav{
  position:absolute; top:calc(50% - 28px);
  width:44px; height:56px; border:0; cursor:pointer; z-index:40;
  background: rgba(0,0,0,.35); color:#fff; font-size:28px; line-height:56px; border-radius:12px;
}
.nav:hover{ background: rgba(0,0,0,.5); }
.prev{ left:12px; } .next{ right:12px; }

.dots{
  position:absolute; left:50%; bottom:18px; transform:translateX(-50%);
  display:flex; gap:8px; z-index:45;
}
.dots button{
  width:8px; height:8px; border-radius:50%;
  border:1px solid rgba(255,255,255,.5); background:rgba(255,255,255,.15);
  padding:0; transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.dots button[aria-selected="true"]{ transform: scale(1.25); background:#fff; border-color:#fff; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .slides{ transition:none; }
  .caption .line{ transition:none; opacity:1; transform:none; }
  .nav{ display:none; }
}

/* Responsive tweaks */
@media (max-width: 980px){
  /* 2段目(.about-block--altB)に効いている2カラム指定を確実に潰す */
  .about-block__inner,
  .about-block--altA .about-block__inner,
  .about-block--altB .about-block__inner{
    grid-template-columns: 1fr !important;

  }

  .about-block__media img{
    width:100%;
    height:min(65vh, 520px);
    object-fit:cover;
  }
  .about-block--altB .about-block__media{ order: 1 !important; }
  .about-block--altB .about-block__text{  order: 2 !important; }
}
@media (max-width: 560px){ .caption{ inset:auto 5vw 12vh 5vw; } .nav{ display:none; } }
/* ===== Lang Switch (ヘッダー右上 常設) ===== */
.lang-switch{
  display:flex; gap:10px; align-items:center; margin-right:8px;
}
.lang-switch a{
  display:inline-flex; align-items:center; justify-content:center;
  height:28px; min-width:42px; padding:0 10px;
  border:1px solid rgba(255,255,255,.25);
  border-radius:999px;
  color:#fff; text-decoration:none; font-size:12px; letter-spacing:.04em;
  background:rgba(255,255,255,.06);
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.lang-switch a:hover{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.4); }
.lang-switch a.is-active{ background:#fff; color:#000; border-color:#fff; }

/* ===== About: Hero Video ===== */
.about-hero{
  margin-top: var(--header-h);
  position: relative;
  height: 500px;          /* PCの見え方（1920x500に合わせる） */
  background: #000;
  overflow:hidden;
}
.hero-video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit: cover;
  display:block;
}
.hero-video--pc{ display:block; }
.hero-video--sp{ display:none; }

@media (max-width: 768px){
  .about-hero{ height: 200px; }   /* SPの見え方（768x200に合わせる） */
  .hero-video--pc{ display:none; }
  .hero-video--sp{ display:block; }
}

/* ===== About: Blocks (Portfolio-like) ===== */
/* 背景：1段目=グレー, 2段目=黒, 3段目=グレー… */
.about-block--altA{ background:#151515; color:#f5f5f5; }
.about-block--altB{ background:#000;    color:#ffffff; }

.about-block{
  padding: clamp(28px, 6vw, 64px) 6vw;
}
.about-block__inner{
  display:grid;
  grid-template-columns: 300px 1fr;
  gap: clamp(16px, 4vw, 40px);
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}
.about-block__media img{
  display:block; width:300px; height:500px; object-fit: cover; /* 角丸にしない */
}
.about-block__text h2{
  margin:0 0 12px; font-size: clamp(20px, 4vw, 32px); line-height:1.25; font-weight:800;
}
.about-block__text p{
  margin:0 0 12px; font-size: clamp(14px, 2.4vw, 16px); color: rgba(255,255,255,.85);
}

/* 2段目（右写真・左テキスト）だけ左右を反転 */
.about-block--altB .about-block__inner{
  grid-template-columns: 1fr 300px;
}
.about-block--altB .about-block__media{ order:2; }
.about-block--altB .about-block__text{ order:1; }

/* SP/タブレット対応 */
@media (max-width: 980px){
  .about-block__inner{
    grid-template-columns: 1fr; /* 縦積み */
  }
  .about-block__media img{
    width:100%; height: min(65vh, 520px); /* 画面に合わせて伸縮 */
  }
  .about-block--altB .about-block__media,
  .about-block--altB .about-block__text{
    order: initial; /* SPでは通常順に戻す（読みやすさ優先） */
  }
}

/* テキストの色微調整（背景に合わせてコントラスト最適化） */
.about-block--altA .about-block__text p{ color: rgba(255,255,255,.9); }
.about-block--altB .about-block__text p{ color: rgba(255,255,255,.88); }
/* ===== Contact: Hero Video ===== */
.contact-hero{
  margin-top: var(--header-h);
  position: relative;
  height: 500px;           /* PC: 1920x500 の見え方 */
  background: #000;
  overflow:hidden;
}
.hero-video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit: cover;
  display:block;
}
.hero-video--pc{ display:block; }
.hero-video--sp{ display:none; }
@media (max-width: 768px){
  .contact-hero{ height: 200px; } /* SP: 768x200 */
  .hero-video--pc{ display:none; }
  .hero-video--sp{ display:block; }
}

/* ===== Contact: Form ===== */
.contact-section{
  background:#141414;      /* 指定：バックはグレー（黒に近いダークグレー） */
  color:#fff;
  padding: clamp(28px, 6vw, 64px) 6vw;
}
.contact-inner{
  max-width: 960px;
  margin: 0 auto;
}
.contact-inner h1{
  margin:0 0 8px; font-size: clamp(22px, 5vw, 36px); font-weight: 800;
}
.contact-lead{
  margin:0 0 24px; color: rgba(255,255,255,.8);
}
.grid{
  display:grid; grid-template-columns: 1fr 1fr; gap: 18px 24px;
}
@media (max-width: 860px){ .grid{ grid-template-columns: 1fr; } }

.field{ display:flex; flex-direction: column; gap: 8px; }
.field label{ font-weight:700; }
.field.required label span{ color:#f55; margin-left: .25em; }
.field input, .field textarea{
  width:100%; color:#fff; background:#0e0e0e;
  border:1px solid rgba(255,255,255,.18); border-radius: 10px;
  padding: 12px 14px; outline:none;
  transition: border-color .2s ease, background .2s ease;
}
.field input::placeholder, .field textarea::placeholder{ color: rgba(255,255,255,.45); }
.field input:focus, .field textarea:focus{ border-color: rgba(255,255,255,.36); background:#111; }
.field .err{ color:#ff6b6b; min-height: 1.2em; font-size: 13px; margin: -4px 0 0 0; }
.count{ text-align:right; color: rgba(255,255,255,.6); font-size: 12px; margin-top: 4px; }

.submit-row{ margin-top: 18px; }
.btn-primary{
  display:inline-block; padding:12px 20px; border-radius: 999px;
  background:#fff; color:#000; font-weight:800; letter-spacing:.04em; border:0; cursor:pointer;
  transition: transform .12s ease, opacity .2s ease;
}
.btn-primary:hover{ transform: translateY(-1px); opacity: .9; }

/* honeypot */
.hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.brand{
  display:flex; align-items:center; gap:8px;
  font-weight:800; letter-spacing:.08em; font-size:18px;
  color:#fff; text-decoration:none;
}
.brand img{ display:block; }
/* ===== Brand List: Hero Video ===== */
.brandlist-hero{
  margin-top: var(--header-h);
  position: relative;
  height: 500px;           /* PC 1920x500 の見え方 */
  background: #000;
  overflow:hidden;
}
.hero-video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit: cover;
  display:block;
}
.hero-video--pc{ display:block; }
.hero-video--sp{ display:none; }
@media (max-width: 768px){
  .brandlist-hero{ height: 200px; } /* SP 768x200 の見え方 */
  .hero-video--pc{ display:none; }
  .hero-video--sp{ display:block; }
}

/* ===== Brand List: Grid ===== */
.brandlist-section{
  background:#141414; /* バックはグレー（黒に近い） */
  color:#fff;
  padding: clamp(28px, 6vw, 64px) 6vw;
}

.brandlist-inner{
  /* 横にできるだけ並べ、画面が狭くなると自動で折り返す */
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(16px, 3vw, 28px);
  max-width: 1400px;
  margin: 0 auto;
}

/* 各ブロック（仕切り線なし、薄いグレーのカード） */
.brand-card{
  background:#1b1b1b; /* ブロック内は薄めのグレー */
  border-radius: 12px;
  overflow: hidden;
  display:flex;
  flex-direction: column;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}

/* 写真：比率 300x500 を保ちつつ、広いカードでも美しく収まる */
.brand-card__media{
  position:relative; width:100%; height: 0; padding-top: calc(333 / 200 * 100%); /* 500:300 の比率 */
  background:#000;
}
.brand-card__media img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit: cover; display:block; /* 角丸にしない */
}

/* 本文：ロゴ(左) + 説明（右） */
.brand-card__body{
  display:grid;
  grid-template-columns: auto 1fr;
  gap: 12px 14px;
  align-items: start;
  padding: 14px 16px 18px;
}
.brand-card__logo{
  width:50px; height:50px; object-fit: contain; display:block;
}
.brand-card__text{
  margin:0; line-height:1.7;
  color: rgba(255,255,255,.88);
  font-size: clamp(14px, 2.8vw, 15px);
}

/* ちょいホバー演出（任意） */
.brand-card:hover{
  transform: translateY(-2px);
  transition: transform .18s ease;
}
/* オーバーレイはクリックを通す */
.overlay{ pointer-events: none; }

/* キャプション内はクリック可能を明示 */
.caption{ position:absolute; z-index:1; pointer-events: auto; }
.caption .cta{ position: relative; z-index: 2; }
/* === ここからはご提示の style.css そのまま（長文のため省略せず貼付） === */
/* -- 以下、ユーザーご提示の /compatibility/style.css をそのまま貼る -- */

/* ========== ここから追記 ========== */

/* フォームの並び・余白微調整 */
.dob-row { display:flex; gap:8px; }
.sex-row { display:flex; gap:16px; margin-top:6px; }
.result-card{
  margin-top: 22px;
  background:#1b1b1b;
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  padding: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
.result-card h2{ margin:4px 0 12px; }
.result-grid{
  display:grid; gap:14px;
  grid-template-columns: 1fr 1fr;
}
.result-grid .score{
  display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start;
}
.big-score{
  font-size: clamp(28px, 7vw, 56px);
  font-weight: 900; letter-spacing:.04em;
  padding: 8px 14px; border-radius:12px;
  background:#0e0e0e; border:1px solid rgba(255,255,255,.18);
  margin-top: 6px;
}
.note{ color:rgba(255,255,255,.66); font-size:13px; margin-top:8px; }

@media (max-width: 860px){
  .result-grid{ grid-template-columns: 1fr; }
}

/* 解析中（ピンク点滅） */
.blink-pink{
  margin-top: 12px;
  font-weight: 900;
  color: #ff6bce;
  animation: blink 1.0s linear infinite;
}
@keyframes blink {
  50% { opacity: .25; }
}

/* ハンバーガー制御 */
.hamburger{ position: absolute; right: 8px; top: 10px; }
.menu-panel[hidden]{ display:none; }

/* セレクト幅 */
.dob-row select{
  background:#0e0e0e; color:#fff; border:1px solid rgba(255,255,255,.18);
  border-radius:10px; padding:10px 12px; min-width:110px;
}
/* hamburger を右上固定のまま使う場合の応急処置 */
.site-header{ padding-right: 64px; } /* ハンバーガー分の退避スペースを確保 */