:root{
  --bg:#0b0f14; --ink:#f4f6f9; --muted:#9aa3af; --container:1080px;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px;
  --logo-h:44px; /* SP */
  /* HERO の目安高さ（デスクトップ基準）。INTRO を 1/3 で連動させるために使用 */
  --hero-h: clamp(560px, 68vh, 820px);
  /* INTRO 調整用: デスクトップの張り出し量やスケールを外から制御 */
  --intro-band-min: clamp(260px, 30vh, 360px);
  --intro-text-width: 48ch;
  --intro-collage-x: -10vw;   /* 左に張り出し(マイナス) */
  --intro-collage-scale: 1.22; /* 左コラージュ全体のスケール */
  --intro-person-x: 0vw;      /* 右へ張り出し(プラス) */
  --intro-person-pos: 98%;    /* 右人物の見せ位置(0-100%) 右端寄せ */
}
@media(min-width:768px){ :root{ --logo-h:50px; } }   
@media(min-width:1024px){ :root{ --logo-h:58px; } }  

*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Noto Sans JP","Alata",system-ui,Arial,sans-serif;
  line-height:1.6;
}
img{max-width:100%;display:block;height:auto}

.container{max-width:var(--container);margin:0 auto;padding:0 var(--space-5)}

.site-header{
  position:sticky;top:0;
  backdrop-filter:saturate(180%) blur(8px);
  background:linear-gradient(180deg, rgba(5,7,10,.92), rgba(11,15,20,.68));
  z-index:10;border-bottom:1px solid rgba(255,255,255,.06)
}
.header__inner{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:calc(var(--logo-h) + 28px)}
.logo--white img{filter:brightness(0) invert(1)}
.logo img{height:var(--logo-h);width:auto}

.site-nav a{color:var(--ink);text-decoration:none;margin-left:16px;opacity:.85}
.site-nav a:hover{opacity:1}

.hero{padding:var(--space-8) 0 var(--space-7);background:linear-gradient(180deg,rgba(255,255,255,.04),transparent)}
.hero__title{font-size:clamp(28px,4vw,44px);line-height:1.15;margin:0 0 var(--space-3)}
.hero__lead{color:#cbd5e1;max-width:60ch;font-size:1.05rem}

.grid-3{display:grid;grid-template-columns:1fr;gap:var(--space-5)}
@media(min-width:768px){.grid-3{grid-template-columns:repeat(3,1fr)}}

.point-card{position:relative;padding:var(--space-6);border:1px solid rgba(255,255,255,.08);border-radius:16px;background:rgba(255,255,255,.02);overflow:hidden}
.point__ttl{margin:0 0 var(--space-2);font-weight:700}
.point__txt{margin:0;color:var(--muted)}


.point--glow::before,.point--glow::after{
  content:"";position:absolute;inset:-20%;
  background:radial-gradient(circle at var(--x,50%) var(--y,120%), rgba(158,210,255,.18), transparent 55%);
  filter:blur(12px);pointer-events:none;
  animation:glowPulse 4s ease-in-out infinite
}
.point--glow::after{
  inset:-10%;
  background:radial-gradient(circle at var(--x2,20%) var(--y2,-10%), rgba(142,197,255,.22), transparent 60%);
  mix-blend-mode:screen;animation-duration:6s
}
@keyframes glowPulse{0%,100%{opacity:.55}50%{opacity:.9}}
@media (prefers-reduced-motion: reduce){.point--glow::before,.point--glow::after{animation:none;opacity:.35}}

.section__ttl{font-size:clamp(22px,3vw,28px);margin:var(--space-7) 0 var(--space-4)}

.feature__grid{display:grid;gap:var(--space-5)}
@media(min-width:768px){.feature__grid{grid-template-columns:repeat(2,1fr)}}
.feature__ph{background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.02));border-radius:12px;position:relative;overflow:hidden;display:block}
/* 16:9 比率: 擬似要素方式→ aspect-ratio へ変更（画像二段表示防止） */
.ph-16x9{aspect-ratio:16/9;}

.retailers__grid{list-style:none;display:grid;gap:20px;padding:0;margin:var(--space-6) 0}

.retailers__grid{grid-template-columns:repeat(2, minmax(0,1fr));}
@media(min-width:768px){.retailers__grid{grid-template-columns:repeat(3,1fr);}}
@media(min-width:1024px){.retailers__grid{grid-template-columns:repeat(5,1fr);}}

.retailers__grid li{display:flex;align-items:center;justify-content:center;min-height:64px;padding:8px;border:1px solid rgba(255,255,255,.06);border-radius:10px;background:rgba(255,255,255,.02)}
.retailers__logo{height:28px;width:auto;opacity:.9}
@media(min-width:768px){.retailers__grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1024px){.retailers__grid{grid-template-columns:repeat(5,1fr)}}

.site-footer{padding:40px 0;border-top:1px solid rgba(255,255,255,.06);margin-top:var(--space-8)}

a:focus-visible,button:focus-visible{outline:2px solid #9ed2ff;outline-offset:2px}
[id]{scroll-margin-top:80px}

.site-header .logo img{filter:drop-shadow(0 0 1px rgba(0,0,0,.5))}

:root{
  --logo-h: 48px;        
  --logo-scale: 2.2;       
}
@media (min-width:768px){  :root{ --logo-h: 54px; --logo-scale: 2.4; } }
@media (min-width:1024px){ :root{ --logo-h: 60px; --logo-scale: 2.6; } }

.site-header .logo{ display:flex; align-items:center; height:var(--logo-h); overflow:visible; }
.site-header .logo img{
  height: 100% !important; width: auto !important; display:block;
  transform: scale(var(--logo-scale));
  transform-origin: left center; 
}
.header__inner{ min-height: calc(var(--logo-h) + 28px); }


.variant-b .logo--white img { filter: none !important; }
.variant-b .site-header .logo img { filter: none !important; }


.variant-b .retailers__logo {
  height: 36px;               
  width: auto;
  object-fit: contain;
}
@media (min-width:768px){
  .variant-b .retailers__logo { height: 40px; }
}
@media (min-width:1024px){
  .variant-b .retailers__logo { height: 44px; }
}

.variant-b .retailers__logo.is-boost {
  transform: scale(1.4);      
  transform-origin: center;
}


body.variant-b .retailers__logo{
  height: 38px;           
  width: auto;
  object-fit: contain;
}
@media (min-width: 768px){
  body.variant-b .retailers__logo{ height: 42px; }
}
@media (min-width: 1024px){
  body.variant-b .retailers__logo{ height: 46px; }
}

/* （仮画像パッチ除去済み）16:9 比率は .ph-16x9::before が担当 */
/* 画像フィットの安定化 */
.feature__ph img{width:100%;height:100%;object-fit:cover;}

/* variant-b 特有のコンテナ指定はベースと同一のため撤去（差分最小化） */

/* 画像ボックス: A/B 共通化（個別上書き不要） */

/* （B専用のレイアウト上書きは削除し、Aと同じブレークポイント挙動に統一） */

/* ========== A 版: セクション固有スタイル ========== */

/* HERO */
.hero{position:relative; padding:0 0 var(--space-8);} /* 下の余白だけ */
.hero__kv{border-radius:14px; overflow:hidden; background:linear-gradient(135deg, rgba(158,210,255,.08), rgba(255,255,255,.02)); position:relative; min-height:var(--hero-h)}
.hero .container{position:static}
.hero__kv{border-radius:0}
.hero{background:transparent}
.hero__kv{margin:0; max-width:none}
/* フルブリード（ビューポート幅を使う） */
.hero__kv{width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw)}
.hero__overlay{position:absolute; inset:0; display:grid; grid-template-columns:1.1fr 1fr; align-items:center; z-index:2}
.hero__left{padding:clamp(16px,3vw,28px); align-self:center}
@media(min-width:1024px){ .hero__left{ transform: translate(300px, -8px); } }
.hero__chip{display:inline-block; background:#eef3f9; color:#0b0f14; padding:6px 10px; border-radius:4px; font-weight:700; letter-spacing:.04em; width:max-content}
.hero__name{margin:.6rem 0 1rem; line-height:1.05}
.hero__name-main{font-size:clamp(28px,5.2vw,56px); font-weight:800}
.hero__name-suffix{font-size:clamp(16px,2vw,20px); font-weight:800; margin-left:.25em}
.hero__name-ks{display:inline-block; font-size:clamp(22px,3.6vw,32px); font-weight:800}
.hero__retailers-ttl{font-size:12px; color:#cbd5e1; margin-bottom:6px}
.hero__retailers-cards{display:flex; gap:10px}
.hero__retailer-card{background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); border-radius:6px; padding:8px 12px; display:flex; align-items:center}
.hero__retailer-card img{height:22px}
.hero__retailer-card--text{color:#0b0f14; background:#eef3f9; border-color:#eef3f9; font-weight:700}
.hero__retailer-combo{display:flex; align-items:center; gap:14px; padding:10px 14px; border-radius:8px; background:rgba(17,24,39,.5); border:1px solid rgba(255,255,255,.1); backdrop-filter:saturate(140%) blur(2px)}
.hero__retailer-logo{display:flex; align-items:center; justify-content:center; padding:6px 10px; border-radius:6px; background:#f4f6f9}
.hero__retailer-logo img{height:20px; width:auto; display:block; filter:none}
.hero__retailer-sep{width:1px; height:18px; background:rgba(255,255,255,.35)}
.hero__retailer-text{color:#f4f6f9; font-weight:700; letter-spacing:.02em}
.hero__right{padding:clamp(16px,3vw,28px); justify-self:end}
.hero__edition-top{font-family:"Alata", system-ui, sans-serif; color:#b2c8dd; letter-spacing:.06em; margin-bottom:6px}
.hero__edition-bottom{font-family:"Alata", system-ui, sans-serif; font-size:clamp(22px,4vw,40px); letter-spacing:.02em}
@media(min-width:1024px){ .hero__right{transform:translate(-275px,-8px)} } /* 左右とも中央へさらに100px寄せる */

/* HERO 背景は黒帯に閉じず、セクションいっぱいに見せる調整 */
.hero{background:linear-gradient(180deg, rgba(255,255,255,.04), transparent)}
/* フルブリードは上の 100vw 指定を優先（ここでは width を上書きしない） */
.hero__kv::after{content:""; position:absolute; inset:0; background:radial-gradient(120% 120% at 20% 10%, rgba(0,0,0,.08), transparent 55%), linear-gradient(180deg, rgba(0,0,0,.04), transparent 40%); pointer-events:none}
.hero__overlay{position:absolute; inset:0; display:grid; grid-template-columns:1fr 1fr; align-items:center; z-index:2}
/* HERO 背景画像の拡大（時計を大きく見せる） */
.hero__kv .img-slot img{transform:none; transform-origin:center center}
@media(min-width:1024px){ .hero__kv .img-slot img{transform:none} }
@media(min-width:1024px){ .hero__overlay{grid-template-columns:1.1fr 1fr; grid-template-areas:"left right"} }
.hero__left{grid-area:left; align-self:center; padding:clamp(12px,2vw,24px); display:grid; gap:12px; max-width:520px}
.hero__chip{display:inline-block; background:#f4f6f9; color:#0b0f14; padding:4px 8px; border-radius:4px; font-weight:700; letter-spacing:.03em; width:max-content}
.hero__name{margin:0; font-size:clamp(24px,4.2vw,44px); line-height:1.1; font-weight:700}
.hero__name-sub{display:inline-block; margin-left:.3em; font-size:clamp(14px,1.6vw,18px); font-weight:700}
.hero__retailers{margin-top:8px}
.hero__retailers-ttl{font-size:12px; color:#cbd5e1; margin-bottom:6px}
.hero__retailers-cards{display:flex; gap:10px}
.hero__retailer-card{background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); border-radius:6px; padding:6px 10px; display:flex; align-items:center}
.hero__retailer-card img{height:22px; width:auto; display:block; filter:none}
.hero__right{grid-area:right; align-self:center; justify-self:end; padding:clamp(12px,2vw,24px); text-align:left}
.hero__edition-top{font-family:"Alata", system-ui, sans-serif; font-style:normal; color:#b2c8dd; letter-spacing:.06em; margin-bottom:6px}
.hero__edition-bottom{font-family:"Alata", system-ui, sans-serif; font-size:clamp(18px,3.6vw,36px); letter-spacing:.02em}
.hero__labels{display:none}
.hero__retailer-panel{display:inline-block; border-radius:10px; overflow:hidden; box-shadow:0 8px 24px rgba(0,0,0,.25)}
.hero__retailer-panel__header{background:#5c6a78; color:#ebf2f7; font-size:12px; letter-spacing:.08em; text-align:center; padding:6px 12px}
.hero__retailer-panel__body{display:flex; align-items:center; gap:16px; background:#ffffff; color:#0b0f14; padding:14px 18px}
.hero__retailer-logo{display:flex; align-items:center; justify-content:center; padding:0 16px 0 12px; border:none; background:transparent}
.hero__retailer-logo img{height:48px; width:auto; object-fit:contain}
.hero__retailer-sep{width:1px; align-self:stretch; background:#9aa3af; opacity:.7}
.hero__retailer-text{font-weight:700; letter-spacing:.02em; color:#0b0f14; display:flex; flex-direction:column; line-height:1.3; font-size:14px}
.hero__retailer-text .rw-line1{white-space:nowrap}
.hero__retailer-text .rw-line2{white-space:nowrap}

/* ISHIDAロゴ（best_logo.svg）だけ拡大表示 */
.hero__retailer-logo img[src$="best_logo.svg"]{height:80px}
@media(min-width:768px){ .hero__retailer-logo img[src$="best_logo.svg"]{height:92px} }
@media(min-width:1024px){ .hero__retailer-logo img[src$="best_logo.svg"]{height:108px} }

/* --- ロゴだけ大きく（レイアウト高さは据え置き） --- */
.hero__retailer-logo{height:44px; overflow:hidden}
@media(min-width:768px){ .hero__retailer-logo{height:48px} }
@media(min-width:1024px){ .hero__retailer-logo{height:52px} }

.hero__retailer-logo img[src$="best_logo.svg"]{height:100% !important; transform:scale(2.0); transform-origin:center;}
@media(min-width:768px){ .hero__retailer-logo img[src$="best_logo.svg"]{transform:scale(2.2)} }
@media(min-width:1024px){ .hero__retailer-logo img[src$="best_logo.svg"]{transform:scale(2.4)} }
.label{display:inline-block; font-size:.9rem; color:#e6f2ff; background:linear-gradient(135deg, rgba(158,210,255,.18), rgba(33,45,64,.2)); border:1px solid rgba(158,210,255,.25); padding:6px 10px; border-radius:999px; width:max-content}
@media(min-width:1024px){
  .hero{padding-bottom:calc(var(--space-8) + 12px)}
  .hero__labels{position:absolute; inset:auto 0 18px 0; display:flex; flex-wrap:wrap; gap:10px}
}

/* INTRO（白帯・反転配色） */
.intro{position:relative; background:#f5f7fb; color:#0b0f14; padding:var(--space-8) 0; overflow:hidden}
.intro .feature__ph{background:#e8edf6}
.intro__inner{display:grid; gap:var(--space-6); align-items:center}
@media(min-width:1024px){
  /* 上下いっぱいに見せるため INTRO の余白をなくし、内側はストレッチ */
  .intro{ padding:0; }
  .intro__inner{
    /* 左コラージュ / 中央テキスト / 右人物 の比率（見本寄せ） */
    grid-template-columns:.78fr .9fr 1.32fr;
    grid-template-areas:"collage text person";
    align-items:stretch;
    /* 白帯を薄めに（見本の厚み目安） */
    min-height:var(--intro-band-min);
  }
  .intro__collage{grid-area:collage}
  .intro__person{grid-area:person}
  .intro__text{grid-area:text; align-self:center; justify-self:center; max-width:var(--intro-text-width)}
  /* セクション側の下限は撤回し、内側の min-height を基準にする */
  .intro{min-height:unset}
  .intro__inner{min-height:100%}

  /* 画像の中央寄りを解消：左右コンテンツを少しだけ外側へ */
  .intro__collage{ transform: translateX(var(--intro-collage-x)); height:auto; aspect-ratio:16/9; }
  .intro__collage .collage{ transform: scale(var(--intro-collage-scale)); transform-origin:left center; }

  .intro__person{ 
    transform: translateX(var(--intro-person-x)); 
    overflow:hidden; align-self:stretch; height:100%; 
    /* コンテナの右端からビューポート右端までフルブリード */
    justify-self:end;
    width: calc(100% + (50vw - 50%));
    margin-right: calc(50% - 50vw);
  }
  .intro__person .img-slot, .intro__person .img-slot img{ width:100%; height:100%; }
  .intro__person .img-slot img{ object-fit:cover; object-position:var(--intro-person-pos) center; transform:none; }
}
.intro__collage{border-radius:0; background:transparent; box-shadow:none}
.intro__person{position:relative; overflow:hidden; border-radius:0; background:transparent; box-shadow:none}
.intro__text{font-size:1.05rem; line-height:1.9; color:#0b0f14}
.intro__text{text-align:center}
.intro__text p{margin:0}

/* INTRO: 人物画像のレスポンシブ調整（巨大化防止＋クロップ位置の指定） */
.intro__person{
  /* body に与えた CSS 変数で幅を制御。未指定時は無難な既定値 */
  width: clamp(var(--intro-person-min, 240px), var(--intro-person-vw, 40vw), var(--intro-person-max, 560px));
  max-width: 100%;
  aspect-ratio: 16/9;
  justify-self: end; /* 右寄せ配置用（Grid 内） */
}
.intro__person .img-slot{display:block; width:100%; height:100%;}
.intro__person .img-slot img{
  width:100%;
  height:100%;
  object-fit:cover;
  /* 被写体の見せたい位置を CSS 変数で調整 */
  object-position: var(--intro-person-pos-x, 50%) var(--intro-person-pos-y, 50%);
}

/* 右人物のフェード（白→透明）と微グレースケール */
.intro__person::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.86) 14%, rgba(255,255,255,0) 42%)}
.intro__person img{filter:grayscale(18%);}

/* === INTRO コラージュ（5枚重ね）=== */
.intro__collage{position:relative; overflow:visible; aspect-ratio:16/9}
.intro__collage .collage{position:absolute; inset:0}
.intro__collage .collage-item{position:absolute; box-shadow:0 6px 18px rgba(0,0,0,.22); border-radius:8px; overflow:hidden}
.intro__collage .collage-item img{display:block; width:100%; height:auto}

/* 左 5枚：ベース配置（SP/TB） */
/* 左 5枚：ベース配置（SP/TB） */
.intro__collage .i3{left:18%; top:14%; width:32%; transform:rotate(0deg); z-index:5}
.intro__collage .i1{left:-10%; top:-8%; width:44%; transform:rotate(-15deg); z-index:1}
.intro__collage .i2{left:6%; top:36%; width:36%; transform:rotate(-9deg); z-index:2}
.intro__collage .i4{left:44%; top:6%; width:26%; transform:rotate(8deg); z-index:3}
.intro__collage .i5{left:-2%; top:64%; width:34%; transform:rotate(-8deg); z-index:2}

@media(min-width:1024px){
  /* PC：左5枚の配置（見本寄せ版） */
  .intro__collage .i3{left:18%; top:-10%; width:34%; transform:rotate(0deg);  z-index:5}  /* 円グラフ */
  .intro__collage .i1{left:-12%; top:-4%;  width:44%; transform:rotate(-15deg); z-index:2}
  .intro__collage .i2{left:4%;  top:30%;  width:40%; transform:rotate(-8deg);  z-index:3}
  .intro__collage .i4{left:44%; top:12%;  width:25%; transform:rotate(9deg);   z-index:1}
  .intro__collage .i5{left:-2%; top:58%;  width:34%; transform:rotate(-6deg);  z-index:4}
}

/* PRODUCT（黒基調 左テキスト / 右時計） */
/* PRODUCT リード: 見本寄せ (黒背景 / 左テキスト・右大時計) */
.product{position:relative; --product-ratio-h:56.25vw; /* 16:9 高さ計算 */
  /* 画像縦横比をほぼ保つ高さレンジ */
  min-height:clamp(480px, var(--product-ratio-h), 860px);
  padding:0; /* 背景画像を“ぴったり”にするため外側余白を内部で管理 */
  display:flex; align-items:center; /* 中央垂直揃え */
  background:
    linear-gradient(90deg, rgba(0,0,0,.75) 0%, rgba(0,0,0,.55) 24%, rgba(0,0,0,.30) 46%, rgba(0,0,0,.12) 66%, rgba(0,0,0,.02) 82%),
    url('../img/RW_MILLESIME_2145-STC-RIH01_CLUPCASE_RVB_HR.jpg') center right / cover no-repeat #06090d;
  overflow:hidden;
}
/* 画像の完全表示を優先したい場合（トリミング最小化）: cover -> contain に変更し左右に余白発生可 */
body.variant-a .product.is-contain{background:
    linear-gradient(90deg, rgba(0,0,0,.8) 0%, rgba(0,0,0,.55) 28%, rgba(0,0,0,.28) 54%, rgba(0,0,0,.08) 78%, rgba(0,0,0,0) 90%),
    url('../img/RW_MILLESIME_2145-STC-RIH01_CLUPCASE_RVB_HR.jpg') center right / contain no-repeat #06090d;}
.product::before{display:none}
.product__grid{display:grid; gap:clamp(32px,4vw,60px); align-items:center; width:100%; padding:clamp(48px,6.4vw,120px) var(--space-5);}
@media(min-width:1024px){ .product__grid{grid-template-columns:minmax(0,560px) 1fr;} }
.product__copy{max-width:560px; position:relative; z-index:2;}
.product__date-chip{display:inline-block; font-size:.78rem; letter-spacing:.14em; font-weight:600; background:#2f4a60; color:#eef5fb; padding:6px 18px 6px; border-radius:2px; margin:0 0 28px;}
.product__title{margin:0 0 40px; font-size:clamp(26px,3.8vw,44px); line-height:1.18; letter-spacing:.14em; font-weight:700;}
.product__title-line1{white-space:nowrap;}
.product__spec-lines{font-size:.76rem; line-height:1.8; letter-spacing:.08em; margin:0 0 40px;}
.product__spec-lines p{margin:0;}
/* 最初の2行（型番 / 本数）強調＋その下に1行分の空き */
.product__spec-lines p:nth-child(-n+2){
  font-size:clamp(.9rem,1.05rem,1.08rem);
  font-weight:600;
  letter-spacing:.12em;
}
.product__spec-lines p:nth-child(2){
  margin-bottom:1.8em; /* line-height と同じ値で実質1行分の余白 */
}
/* 3行目以降を “少しだけ” 拡大 */
.product__spec-lines p:nth-child(n+3){
  font-size:clamp(.8rem,.85rem,.9rem);
}
.product__cta-row{margin:0 0 46px;}
.product__btn{display:inline-flex; align-items:center; justify-content:center; font-size:.82rem; letter-spacing:.08em; padding:14px 34px 12px; text-decoration:none; color:#e3f1ff; border:1px solid rgba(158,210,255,.5); border-radius:3px; background:linear-gradient(180deg,rgba(158,210,255,.18),rgba(16,22,30,.6)); box-shadow:0 6px 18px rgba(0,0,0,.4); transition:.3s background,.3s color,.3s border-color;}
.product__btn:hover{background:linear-gradient(180deg,rgba(158,210,255,.26),rgba(16,22,30,.7)); color:#fff;}
.product__retailers-line{font-size:.82rem; line-height:1.8; letter-spacing:.14em; margin:0; opacity:.92;}
.product__retailers-line{font-size:clamp(.9rem,1.35vw,1.28rem); line-height:1.55; font-weight:500;}
.product__retailers-primary{display:inline-block; font-weight:600; letter-spacing:.12em;}
.product__retailers-secondary{display:inline-block; margin-top:.42em; letter-spacing:.08em; opacity:.95;}
/* 背景に統合したため figure を非表示（保守用マークアップ保持） */
.product__watch{display:none !important;}
/* PRODUCT セクションと CAST の分離感を強める余白（CAST 側が吸収する場合の保険） */
body.variant-a .cast{margin-top:0; position:relative;}
@media(min-width:1024px){ body.variant-a .cast{margin-top:clamp(-20px,-4vh,-40px);} }
/* SPで改行制御 */
.br--sp{display:none;}
@media(max-width:767.98px){.br--sp{display:inline;}}

/* CAST（見本レイアウト） */
.cast{padding:clamp(70px,10vh,150px) 0; background:#ffffff; color:#0b0f14; position:relative;}
.cast::before{display:none;}
.cast__layout{display:grid; gap:clamp(40px,5vw,80px); align-items:start;}
@media(min-width:1280px){ .cast__layout{gap:clamp(60px,6vw,110px);} }
@media(min-width:1024px){ .cast__layout{grid-template-columns:1fr auto 1fr;} }
/* 左余白が空く問題対策：デスクトップで内容幅ぶんだけ詰めて左寄せ */
@media(min-width:1024px){
  .cast__layout.cast__layout, /* specificity boost */
  body.variant-a .cast__layout{grid-template-columns:auto auto auto; justify-content:start; justify-items:start;}
}
/* === CAST: さらに全体を左に寄せ（コンテナ中央揃え解除） === */
@media(min-width:1024px){
  body.variant-a #cast .container{margin-left:0; margin-right:auto; max-width:none; width:100%; padding-left:clamp(16px,3vw,46px); padding-right:clamp(48px,7vw,160px);} /* 左は最小 / 右は余裕確保 */
  body.variant-a .cast__layout{margin-left:0;} /* 念のため */
}
/* 再センタリング：左寄せオーバーライドを上書きして中央に戻す */
@media(min-width:1024px){
  body.variant-a #cast .container{margin:0 auto; max-width:1320px; width:100%; padding-left:clamp(32px,4vw,72px); padding-right:clamp(32px,4vw,72px);} 
  body.variant-a .cast__layout{justify-content:center;}
}
/* 中央縦見出し */
.cast__headline{margin:0; font-size:clamp(34px,4.2vw,60px); writing-mode:vertical-rl; text-orientation:upright; letter-spacing:.18em; font-weight:700; line-height:1.05; align-self:center;}
@media(max-width:1023.98px){ .cast__headline{writing-mode:horizontal-tb; text-orientation:mixed; font-size:clamp(26px,7vw,44px); text-align:center; order:-1; grid-column:1/-1; margin-bottom:10px;} }
/* カラム共通 */
.cast__col{display:flex; flex-direction:column; gap:28px;}
/* デスクトップ：内部 2カラム + コメントは全幅（2列）で中央に重ねる */
@media(min-width:1024px){
  .cast__col--left{display:grid; grid-template-columns:clamp(170px,18vw,230px) clamp(300px,32vw,380px); grid-template-areas:
    "labels visual"
    "bio    visual"; align-items:start; column-gap:clamp(28px,3vw,44px);}
  .cast__col--right{display:grid; grid-template-columns:clamp(300px,32vw,380px) clamp(170px,18vw,230px); grid-template-areas:
    "visual labels"
    "visual bio"; align-items:start; column-gap:clamp(28px,3vw,44px);}
}
/* コメントは画像にかぶせない（オーバーラップ解除） */
@media(min-width:1024px){
  .cast__col--left .cast__bio,
  .cast__col--right .cast__bio{margin-bottom:0;}
}
@media(min-width:1024px){
  .cast__col--left .cast__labels{grid-area:labels;}
  .cast__col--left .cast__labels{grid-area:labels;}
  .cast__col--left .cast__visual-block{grid-area:visual;}
  .cast__col--left .cast__bio{grid-area:bio;}
  .cast__col--right .cast__labels{grid-area:labels; align-items:flex-start; text-align:left;}
  .cast__col--right .cast__visual-block{grid-area:visual;}
  .cast__col--right .cast__bio{grid-area:bio;}
}
/* 画像+コメント縦スタック */
.cast__visual-block{display:flex; flex-direction:column; gap:28px; align-items:center;}
.cast__visual-block .cast__comment{margin-top:0; width:100%;}
/* ポートレート 共通 */
.cast__portrait{margin:0; position:relative; width:100%; aspect-ratio:3/4; background:#0d1218; overflow:hidden; border:1px solid #d0d7df; box-shadow:0 10px 28px rgba(0,0,0,.25); z-index:1;} 
.cast__portrait .img-slot, .cast__portrait .img-slot img{width:100%; height:100%;}
.cast__portrait .img-slot img{object-fit:cover; object-position:center top;}
@media(min-width:1024px){
  .cast__portrait{max-width:380px;}
  .cast__col--left .cast__portrait{justify-self:start;}
  .cast__col--right .cast__portrait{justify-self:end;}
}
/* ラベル群 */
.cast__labels{display:flex; flex-direction:column; gap:10px;}
.cast__labels.align-right{align-items:flex-end;}
.cast__role-chip{font-size:.7rem; letter-spacing:.18em; font-weight:600; background:#2f4a60; color:#eef5fb; padding:10px 18px 8px; width:max-content;}
.cast__name-chip{background:#2f4a60; color:#ffffff; padding:14px 24px 12px; font-weight:800; font-size:clamp(22px,2.2vw,30px); letter-spacing:.16em; display:inline-flex; align-items:center; gap:.25em;}
/* オーバーレイ内に入った場合は上でtransparentへ */
.cast__name-main{white-space:nowrap;}
.cast__name-suffix{opacity:.9;}

/* 名前チップのみ画像へ水平オーバーラップ */
#cast .cast__name-chip{position:relative; z-index:3; box-shadow:0 4px 12px rgba(0,0,0,.18);} 
@media(min-width:1024px){
  #cast{--cast-name-overlap:56px;}
  .cast__col--left .cast__name-chip{transform:translateX(var(--cast-name-overlap));}
  .cast__col--right .cast__name-chip{transform:translateX(calc(var(--cast-name-overlap)*-1));}
  /* 役職チップも氏名チップ基準で揃える */
  .cast__col--left .cast__role-chip{transform:translateX(var(--cast-name-overlap));}
  .cast__col--right .cast__role-chip{transform:translateX(calc(var(--cast-name-overlap)*-1));}
}
.cast__bio{font-size:.72rem; line-height:1.85; letter-spacing:.05em; display:grid; gap:1.2em; max-width:420px;}
/* コメントボックス：内側にピル状ラベル */
.cast__comment{position:relative; border:1px solid #c7d0d9; background:#ffffff; padding:54px 32px 38px; border-radius:2px; max-width:340px;}
.cast__comment-label{position:absolute; top:18px; left:50%; transform:translateX(-50%); background:#2f4a60; color:#eef5fb; font-size:.66rem; letter-spacing:.18em; font-weight:600; padding:8px 20px 6px; border-radius:999px; line-height:1; white-space:nowrap;}
.cast__comment-body{font-size:.7rem; line-height:1.9; letter-spacing:.05em;}
@media(min-width:1280px){ .cast__comment{max-width:360px;} }

/* 以前の個別幅調整は上でまとめて中央寄せ済み */

/* 中央縦見出しの上下位置調整：ポートレート群中央に寄せる */
@media(min-width:1024px){
  .cast__headline{align-self:center;}
}
@media(min-width:1280px){
  .cast__bio, .cast__comment-body{font-size:.74rem;}
  .cast__comment{padding:38px 32px 34px;}
  .cast__comment-label{left:34px;}
}

/* CEO 帯 リファレンスレイアウト */
.ceo{position:relative; padding: clamp(60px,9vw,120px) 0 clamp(70px,10vw,140px); color:#0b1014; background:#d9dbdc url("assets/img/pattern-gears.svg") center/1200px repeat;}
@media(min-width:1400px){ .ceo{background-size:1500px;} }
.ceo::before{content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(255,255,255,.7), rgba(255,255,255,.65));}
.ceo__layout{position:relative; display:grid; row-gap:40px; column-gap:clamp(48px,6vw,120px); align-items:stretch;}
@media(min-width:1080px){ .ceo__layout{grid-template-columns:minmax(420px,540px) minmax(600px,1fr);} }

/* 写真 */
.ceo__photo{margin:0; position:relative; width:100%; aspect-ratio: 1 / 1; background:#101418; overflow:hidden; border-radius:0; box-shadow:0 14px 40px -4px rgba(0,0,0,.3);} 
.ceo__photo .img-slot, .ceo__photo .img-slot img{width:100%; height:100%;}
.ceo__photo .img-slot img{object-fit:cover; object-position:center top;}

/* テキスト / 見出し */
.ceo__content{display:flex; flex-direction:column; gap:40px; height:100%;}
.ceo__heading{display:flex; flex-direction:column; gap:14px;}
.ceo__role{margin:0; font-size:.7rem; letter-spacing:.22em; font-weight:600; color:#2c3135;}
.ceo__name{margin:0; font-size:clamp(24px,3vw,36px); letter-spacing:.12em; font-weight:700; white-space:nowrap;}

/* コメントカード */
.ceo__comment{position:relative; background:#fff; padding:46px clamp(34px,3.2vw,48px) 40px; border:1px solid #cfd4d8; box-shadow:0 6px 24px rgba(0,0,0,.12); margin-top:auto;}
.ceo__comment::after{content:""; position:absolute; inset:0; border:1px dashed #bbc2c8; pointer-events:none; mix-blend-mode:multiply;}
.ceo__comment-label{position:absolute; top:0; left:50%; transform:translate(-50%, -50%); background:#2f4a60; color:#eef5fb; font-size:.68rem; letter-spacing:.18em; font-weight:600; padding:9px 22px 7px; border-radius:999px; line-height:1; box-shadow:0 4px 10px rgba(0,0,0,.18);}
  .ceo__comment-body{font-size:.78rem; line-height:1.9; letter-spacing:.05em; color:#0b1014; display:grid; gap:1.4em;}
@media(min-width:1400px){ .ceo__comment-body{columns:2; column-gap:46px;} }
@media(min-width:1400px){ .ceo__comment-body{font-size:.78rem;} }

@media(max-width:1079.98px){
  .ceo__layout{grid-template-columns:1fr;}
  .ceo__content{order:2;}
  .ceo__photo{order:1; aspect-ratio: 3 / 2;}
  .ceo__comment{padding:48px 28px 38px; margin-top:32px;}
  .ceo__name{white-space:normal;}
}

/* FEATURES 新デザイン */
.features{position:relative; background:#2e4658; color:#fff; padding:90px 0 100px; overflow:hidden;}
.features__ttl{margin:0 auto 56px; text-align:center; font-size:clamp(32px,3.8vw,42px); letter-spacing:.24em; font-weight:600;}

.feature-block{position:relative;}
.feature-block + .feature-block{margin-top:96px;}
.feature-block__inner{position:relative; width:100%; max-width:1480px; margin:0 auto; display:grid; align-items:start;}

/* POINTラベル */
.point-circle{position:relative; width:94px; height:94px; border:2px solid #fff; border-radius:50%; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:6px; font-weight:600; letter-spacing:.12em; font-size:.6rem;}
.point-circle__num{font-size:30px; line-height:1; font-weight:700; letter-spacing:0;}

/* 共通テキスト */
.feature-block__text{max-width:520px; display:flex; flex-direction:column; gap:26px; font-size:.72rem; line-height:1.9; letter-spacing:.04em;}
.feature-block__text--right{justify-self:end;}
.feature-block__heading{margin:0; font-size:clamp(20px,2.6vw,30px); line-height:1.45; font-weight:700; letter-spacing:.12em;}
.feature-block__lead{margin:0; color:#e2ebf2;}

/* コメント（吹き出しカード） */
.feature-comment{display:grid; grid-template-columns:54px 1fr; gap:14px; align-items:start; background:#fff; color:#1d2b35; padding:18px 24px 20px; border-radius:6px; font-size:.66rem; line-height:1.85; letter-spacing:.04em; box-shadow:0 8px 28px -6px rgba(0,0,0,.35);} 
.feature-comment__avatar{width:54px; aspect-ratio:1/1; border-radius:4px; overflow:hidden; background:#0d1218;}
.feature-comment__avatar img{width:100%; height:100%; object-fit:cover; object-position:center top; display:block;}
.feature-comment__body{font-weight:500;}
.feature-comment--alt{background:#ffffff;}
.feature-comment--stack + .feature-comment--stack{margin-top:14px;}

/* 画像配置 */
.feature-block__image{margin:0; position:relative; width:100%; max-width:520px; aspect-ratio:4/3; overflow:hidden; border-radius:4px; box-shadow:0 12px 40px -2px rgba(0,0,0,.5);} 
.feature-block__image .img-slot, .feature-block__image .img-slot img{width:100%; height:100%;}
.feature-block__image .img-slot img{object-fit:cover; object-position:center center;}

.feature-block__hero-watch{margin:0; position:relative; width:100%; max-width:760px; aspect-ratio:1/1; justify-self:start; overflow:hidden;}
.feature-block__hero-watch .img-slot, .feature-block__hero-watch .img-slot img{width:100%; height:100%;}
.feature-block__hero-watch .img-slot img{object-fit:cover; object-position:center center;}

/* ブロック別レイアウト */
/* BLOCK 1: 左にPOINT & テキスト, 右に小画像 */
.feature-block--1 .feature-block__inner{grid-template-columns:minmax(400px,600px) minmax(340px,480px); column-gap:60px;}
.feature-block--1 .feature-block__point{position:absolute; left:0; top:-40px;}
.feature-block--1 .feature-block__text{padding-top:24px; padding-left:118px; position:relative;}
.feature-block--1 .feature-block__point{z-index:3;}
.feature-block--1 .feature-block__image{justify-self:end; max-width:560px; transform:translateX(60px);}
@media(min-width:1400px){ .feature-block--1 .feature-block__image{max-width:620px; transform:translateX(90px);} }
@media(max-width:1079.98px){
  .feature-block--1 .feature-block__text{padding-left:0;}
  .feature-block--1 .feature-block__image{transform:none; max-width:520px;}
}

/* BLOCK 2: 大きな時計画像 + 右テキスト */
.feature-block--2{background:#fff; color:#203440; padding:110px 0 115px; clip-path:polygon(0 5%, 100% 0, 100% 95%, 0 100%);} 
.feature-block--2 .feature-block__inner{grid-template-columns:minmax(520px,700px) minmax(380px,500px); column-gap:70px; align-items:center;}
.feature-block--2 .feature-block__point{position:absolute; left:50%; top:12px; transform:translate(-50%,-100%);} 
.feature-block--2 .feature-block__point--inline{position:static; transform:none; margin:-20px 0 18px;}
.feature-block--2 .feature-block__point--inline .point-circle{margin:0;}
.feature-block--2 .feature-block__heading{color:#0c2431;}
.feature-block--2 .feature-block__lead{color:#425966;}
.feature-block--2 .point-circle{border-color:#203440;}
.feature-block--2 .feature-comment{box-shadow:0 8px 26px -4px rgba(0,0,0,.25);} 

/* BLOCK 3: 背景トーンを少し落として再びダーク */
.feature-block--3{margin-top:120px;}
.feature-block--3 .feature-block__inner{grid-template-columns:minmax(400px,500px) minmax(400px,540px); column-gap:70px;}
.feature-block--3 .feature-block__point{position:absolute; left:0; top:-44px; z-index:3;}
.feature-block--3 .feature-block__image{order:2; justify-self:end; transform:translateX(40px);} /* shift slightly right */
@media(max-width:1279.98px){ .feature-block--3 .feature-block__image{transform:translateX(20px);} }
@media(max-width:1079.98px){ .feature-block--3 .feature-block__image{transform:none;} }
.feature-block--3 .feature-block__text{padding-top:20px; padding-left:118px; position:relative;}
@media(max-width:1079.98px){ .feature-block--3 .feature-block__text{padding-left:0;} }

/* レスポンシブ（タブレット以下） */
@media(max-width:1079.98px){
  .features{padding:70px 0 80px;}
  .feature-block + .feature-block{margin-top:80px;}
  .feature-block__inner{grid-template-columns:1fr !important; row-gap:42px;}
  .feature-block__point{position:relative !important; left:auto !important; top:auto !important; transform:none !important; margin-bottom:6px;}
  .feature-block__text, .feature-block__text--right{padding-top:0 !important; max-width:100%;}
  .feature-block__image, .feature-block__hero-watch{justify-self:center !important;}
  .feature-block--2{clip-path:none; padding:110px 0 120px;}
  .feature-block--3{margin-top:120px;}
  .feature-comment{grid-template-columns:44px 1fr; font-size:.64rem;}
  .point-circle{width:80px; height:80px;}
  .point-circle__num{font-size:26px;}
}

/* DETAILS 新レイアウト */
.details{padding:120px 0 140px; background:#fff; color:#111;}
.details__ttl{margin:0 0 70px; text-align:center; font-size:clamp(34px,4vw,46px); letter-spacing:.28em; font-weight:600;}
.details__inner{max-width:1320px;}
.details__viewer{display:flex; align-items:center; gap:36px; position:relative; margin-bottom:110px;}
.details__arrow{flex:0 0 54px; width:54px; height:54px; display:flex; align-items:center; justify-content:center; border:1px solid #d4dae0; background:rgba(255,255,255,.85); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); border-radius:50%; cursor:default; pointer-events:none; box-shadow:0 4px 18px -4px rgba(0,0,0,.28);}
.details__arrow--prev{order:0;}
.details__arrow--next{order:2;}
.details__grid{order:1; flex:1 1 auto; margin:0;}
.details__arrow-icon{font-size:40px; line-height:1; letter-spacing:0; font-weight:300; color:#0d1a23; position:relative; top:-2px;}
@media(max-width:1199.98px){
  .details__viewer{gap:24px;}
}
@media(max-width:1023.98px){
  .details__viewer{gap:18px; margin-bottom:80px;}
  .details__arrow{width:46px; height:46px; flex-basis:46px;}
  .details__arrow-icon{font-size:34px; top:-1px;}
}
.details__grid{display:grid; gap:46px clamp(34px,4vw,60px); grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); align-items:start;}
.detail-card{display:flex; flex-direction:column; gap:18px; text-align:center;}
.detail-card__image{margin:0 auto; width:100%; max-width:360px; aspect-ratio:1/1; background:#e6e8ea; overflow:hidden; position:relative;}
.detail-card__image .img-slot, .detail-card__image .img-slot img{width:100%; height:100%;}
.detail-card__image .img-slot img{object-fit:cover; object-position:center center;}
.detail-card__image .img-slot img.img-rotate-90{object-fit:contain; transform:rotate(90deg); width:100%; height:100%;}
.detail-card__title{margin:0; font-size:.85rem; letter-spacing:.14em; font-weight:700;}
.detail-card__desc{margin:0; font-size:.62rem; line-height:1.75; letter-spacing:.04em; text-align:left; max-width:360px; margin-inline:auto;}

/* Movie placeholder */
.details__movie-placeholder{position:relative; width:100%; max-width:740px; margin:0 auto; aspect-ratio:16/9; background:#0b0f14; display:flex; align-items:center; justify-content:center; border:1px solid #1e2730; box-shadow:0 8px 28px -4px rgba(0,0,0,.45);}
.details__movie-label{color:#fff; font-size:.9rem; letter-spacing:.28em; font-weight:600;}

/* PRODUCT GALLERY (Section 8) */
.gallery{background:#2f4856; color:#fff; padding:120px 0 140px; position:relative;}
.gallery__inner{max-width:1320px;}
.gallery__layout{display:grid; grid-template-columns:minmax(480px,560px) minmax(380px,480px); column-gap:90px; align-items:start;}
.gallery__visual{display:flex; flex-direction:column; gap:26px;}
.gallery__main{margin:0; background:#fff; aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; box-shadow:0 18px 50px -10px rgba(0,0,0,.55);} 
.gallery__main .img-slot, .gallery__main img{width:100%; height:100%;}
.gallery__main img{object-fit:contain; object-position:center;}
.gallery__thumbs{margin:0; padding:0; list-style:none; display:grid; grid-template-columns:repeat(auto-fit,minmax(60px,1fr)); gap:10px;}
.gallery__thumb button.gallery__thumb{all:unset; cursor:pointer; display:block; width:100%; aspect-ratio:1/1; background:#fff; position:relative; overflow:hidden; box-shadow:0 6px 18px -6px rgba(0,0,0,.5); border:2px solid transparent;}
.gallery__thumb img{width:100%; height:100%; object-fit:cover; object-position:center; display:block;}
.gallery__thumb.is-active button.gallery__thumb{border-color:#fff; box-shadow:0 0 0 2px rgba(255,255,255,.5), 0 10px 30px -8px rgba(0,0,0,.55);} 
.gallery__thumbs{grid-auto-rows:96px;}
.gallery__thumbs li{height:96px;}
.gallery__thumb button.gallery__thumb{height:100%;}
.gallery__thumb--portrait button.gallery__thumb img{object-fit:cover; object-position:center top;}
.gallery__thumb--wide button.gallery__thumb img{object-fit:cover; object-position:center center;}
@media(min-width:1200px){
  .gallery__thumbs{grid-template-columns:repeat(4, minmax(90px,1fr)); grid-auto-rows:110px;}
  .gallery__thumbs li{height:110px;}
}
.gallery__info{display:flex; flex-direction:column; gap:22px;}
.gallery__title{margin:0; font-size:clamp(30px,3.2vw,42px); line-height:1.25; letter-spacing:.18em; font-weight:600;}
.gallery__ref{margin:0; font-size:.7rem; line-height:1.7; letter-spacing:.14em; font-weight:500;}
.gallery__specs{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:6px; font-size:.58rem; line-height:1.75; letter-spacing:.05em;}
.gallery__specs li{position:relative; padding-left:0;}
.gallery__cta{display:inline-block; margin-top:12px; background:#fff; color:#203440; padding:10px 38px 11px; font-size:.62rem; letter-spacing:.22em; font-weight:600; text-decoration:none; border:1px solid #fff; transition:.25s background,.25s color;}
.gallery__cta:hover{background:transparent; color:#fff;}

/* Overrides: Gallery typography adjustments */
.gallery__title{font-size:clamp(24px,2.4vw,34px); line-height:1.28;}
.gallery__ref{font-size:.76rem; line-height:1.65; letter-spacing:.16em;}
.gallery__specs{gap:7px; font-size:.62rem; line-height:1.78; letter-spacing:.06em;}
.gallery__cta{margin-top:14px; padding:12px 40px 13px; font-size:.66rem;}
@media(max-width:1023.98px){
  .gallery__title{font-size:clamp(26px,5.6vw,32px);}
  .gallery__ref{font-size:.72rem;}
  .gallery__specs{font-size:.6rem;}
  .gallery__cta{font-size:.64rem; padding:11px 36px 12px;}
}

@media(max-width:1199.98px){
  .gallery__layout{grid-template-columns:1fr 1fr; column-gap:60px;}
}
@media(max-width:1023.98px){
  .gallery{padding:90px 0 110px;}
  .gallery__layout{grid-template-columns:1fr; row-gap:54px;}
  .gallery__visual{order:1;}
  .gallery__info{order:2;}
  .gallery__main{aspect-ratio:3/2;}
  .gallery__thumbs{grid-template-columns:repeat(auto-fit,minmax(66px,1fr));}
}

@media(max-width:1023.98px){
  .details{padding:90px 0 110px;}
  .details__grid{gap:40px 28px; margin-bottom:80px;}
  .detail-card__title{font-size:.8rem;}
  .detail-card__desc{font-size:.64rem; line-height:1.7;}
}

/* RETAILERS Cards */
.retailers{padding:120px 0 140px; background:#fff; color:#0c1114;}
.retailers__ttl{margin:0 0 70px; text-align:center; font-size:clamp(40px,4.2vw,54px); letter-spacing:.18em; font-weight:600;}

/* ISHIDA block */
.retailers-block--ishida{border:1px solid #181d20; padding:70px 70px 64px; max-width:1080px; margin:0 auto 90px; background:#fff;}
.retailers-block__head{text-align:center; margin:0 0 46px;}
.retailers-block__logo-placeholder{display:flex; align-items:center; justify-content:center; min-height:110px; border:1px dashed #9aa4aa; border-radius:2px; background:repeating-linear-gradient(45deg,#fafbfc 0 10px,#f1f4f6 10px 20px); position:relative;}
.retailers-block__logo-hint{font-size:.6rem; letter-spacing:.28em; font-weight:600; color:#5a666e; opacity:.75;}
.retailers-list{margin:0; padding:0; list-style:none; display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:44px 70px; justify-items:center;}
.retailer-store{max-width:300px; text-align:center;}
.retailer-store__figure{margin:0 0 24px; width:100%; aspect-ratio:4/3; background:#e4e8ec; overflow:hidden; position:relative;}
.retailer-store__figure .img-slot, .retailer-store__figure img{width:100%; height:100%;}
.retailer-store__figure img{object-fit:cover; object-position:center center;}
.retailer-store__name{margin:0 0 12px; font-size:.9rem; letter-spacing:.08em; font-weight:600;}
.retailer-store__info{margin:0; font-size:.53rem; line-height:1.7; letter-spacing:.04em;}

/* Online block */
.retailers-block--online{border:1px solid #181d20; background:#fff; padding:44px 70px 50px; max-width:1080px; margin:0 auto;}
.retailers-online{display:flex; flex-direction:row; align-items:center; justify-content:space-between; gap:60px;}
.retailers-online__logo{flex:0 0 auto;}
.retailers-online__text{flex:1 1 auto; text-align:center;}
.retailers-online__logo img{display:block; height:auto; width:230px;}
.retailers-online__text{text-align:center;}
.retailers-online__label{margin:0 0 10px; font-size:.58rem; letter-spacing:.16em; font-weight:500;}
.retailers-online__url{margin:0; font-size:.64rem; letter-spacing:.12em; font-weight:600;}
.retailers-online__url a{color:#0c1114; text-decoration:none; border-bottom:1px solid #0c1114; padding-bottom:2px;}
.retailers-online__url a:hover{opacity:.65;}

@media(max-width:1023.98px){
  .retailers{padding:90px 0 110px;}
  .retailers-block--ishida{padding:56px 40px 60px; margin-bottom:70px;}
  .retailers-list{gap:40px 44px;}
  .retailers-block--online{padding:40px 44px 48px;}
  .retailers-online{flex-direction:column; gap:30px;}
  .retailers-online__text{text-align:center;}
  .retailer-store__figure{margin-bottom:20px;}
}

/* ABOUT 最終セクション */
.about{position:relative; padding:140px 0 160px; background:#d5d5d5; color:#121415; overflow:hidden;}
.about::before{content:""; position:absolute; inset:0; background:
  radial-gradient(circle at 18% 40%, rgba(255,255,255,.9) 0%, rgba(255,255,255,0) 60%),
  radial-gradient(circle at 82% 60%, rgba(255,255,255,.9) 0%, rgba(255,255,255,0) 60%);
  mix-blend-mode:overlay; pointer-events:none;}
.about::after{content:""; position:absolute; inset:0; opacity:.8; background-image:
  repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,.18) 0 2px, transparent 2px 60px),
  repeating-radial-gradient(circle at 10% 30%, rgba(255,255,255,.14) 0 1.5px, transparent 1.5px 44px),
  repeating-radial-gradient(circle at 90% 70%, rgba(255,255,255,.16) 0 2px, transparent 2px 52px);
  filter:blur(.3px); pointer-events:none;}
.about__inner{max-width:1180px; margin:0 auto; padding:0 40px; position:relative;}
.about__content{max-width:840px; margin:0 auto; text-align:center;}
.about__label{margin:0 0 20px; font-size:.9rem; letter-spacing:.5em; font-weight:600; text-transform:uppercase;}
.about__title{margin:0 0 56px; font-size:clamp(50px,5.4vw,68px); letter-spacing:.22em; font-weight:600;}
.about__body{display:flex; flex-direction:column; gap:26px; font-size:.66rem; line-height:2.0; letter-spacing:.05em;}
.about__body p{margin:0;}
@media(max-width:1023.98px){
  .about{padding:110px 0 130px;}
  .about__title{font-size:clamp(44px,9vw,58px); margin-bottom:44px;}
  .about__label{font-size:.8rem; letter-spacing:.48em;}
  .about__body{font-size:.64rem; line-height:1.9;}
}

/* 細部の調整 */
.feature__ph{position:relative}
.feature__ph > img{position:absolute; inset:0}
.feature__ph[data-img-slot]{display:flex; align-items:center; justify-content:center}
.feature__ph .img-slot{color:#c8d6e5; opacity:.8; font-size:14px; letter-spacing:.08em; background:rgba(0,0,0,.25); border:1px dashed rgba(255,255,255,.25); padding:6px 10px; border-radius:8px}

/* 余白の微調整 */
.section__ttl{letter-spacing:.02em}
.site-footer{margin-top:calc(var(--space-8) + 8px)}

/* Utility */
.nowrap{white-space:nowrap;}

/* ================= Revert INTRO to base layout (A版へ巻き戻し) ================= */
/* 右人物のフルブリード張り出しや強い変形を解除し、素直な3カラムに戻す */
.intro{padding:var(--space-8) 0; background:#f5f7fb; color:#0b0f14}
.intro__inner{display:grid; gap:var(--space-6); align-items:center}
@media(min-width:1024px){
  .intro__inner{grid-template-columns:.9fr 1fr 1.2fr; grid-template-areas:"collage text person"}
  .intro__collage{grid-area:collage; transform:none !important; height:auto; aspect-ratio:auto}
  .intro__collage .collage{transform:none !important}
  .intro__text{grid-area:text; align-self:center; justify-self:center}
  .intro__person{grid-area:person; justify-self:end; width:100%; max-width:520px; margin-right:0; transform:none !important; overflow:hidden; height:auto}
  .intro__person .img-slot, .intro__person .img-slot img{width:100%; height:auto}
  .intro__person .img-slot img{object-fit:contain; object-position:center !important; filter:none !important}
}
/* 付与していた白→透明グラデとグレースケールを無効化（A版は除外） */
body:not(.variant-a) .intro__person::after{background:none !important}
body:not(.variant-a) .intro__person img{filter:none !important}

/* A版はSP/TBでもフェード/グレースケールを有効化（幅に依存しない） */
body.variant-a .intro__person{position:relative}
body.variant-a .intro__person::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  /* 左からのごく薄い白フェード（強さ/幅は変数で調整可能） */
  background:linear-gradient(
    90deg,
    rgba(255,255,255, var(--intro-fade-alpha, .86)) 0%,
    rgba(255,255,255, 0) var(--intro-fade-end, 34%)
  ) !important;
  z-index:1; /* 背面（画像より背） */
}
body.variant-a .intro__person img{ filter:grayscale(12%) !important; }

/* ===== A版 INTRO: 右人物を右端フラッシュ＆最大化（他セクションに被らない） ===== */
@media(min-width:1024px){
  body.variant-a{ 
    /* HERO: 一旦高さを約100px圧縮（560→460 / 820→720） */
    --hero-h: clamp(460px, 60vh, 720px);
    /* INTRO 調整用デフォルト（必要に応じてHTML側のbodyにインラインで上書き可能） */
  --intro-vpad: 0px;        /* 余白ゼロ化で高ささらに縮小 */
    --intro-person-min: 260px; /* さらに縮小 */
    --intro-person-vw: 24vw;   /* 幅縮小で高さを追加圧縮 */
  --intro-person-max: 460px;  /* 上限も低く */
  --intro-person-pos-x: 100%; /* さらに左へ寄せ（表示範囲を左へ） */
    --intro-person-pos-y: 44%;  /* 縦の見せ位置 */
  /* 見本寄せ：本文の最大幅（rootの48chから少し絞る） */
  --intro-text-width: 42ch;
  --intro-person-scale: 1;     /* ズーム解除（デバッグ用） */
  --intro-person-shift-x: 0%;  /* 水平シフト解除 */
    --intro-person-shift-y: -8%; /* 上方向へ追加シフト */
  --intro-fade-alpha: .90;      /* 左フェード強さ */
  --intro-fade-end: 40%;        /* フェード幅やや拡張 */
    --intro-edge-nudge: 0px;    /* 右端合わせ微調整（+でさらに右、-で左に戻す） */
    /* 左コラージュの微張り出し＆スケール（見本寄せ） */
  /* コラージュを参照デザイン並みに大きく左へ張り出し */
  --intro-collage-x: -11vw;            /* もう少し左へ張り出し */
  --intro-collage-scale: 1.34;         /* コラージュ全体を更に拡大 */
    /* 見本寄せ：本文の最大幅（やや広めにして高さを詰める） */
    /* 日本語向け：ch ではなく CJK 幅基準 ic を使用（安定した改行） */
  --intro-text-width: 54ic; /* 長文2行を強制改行させないため拡張 */
  --intro-letter-spacing: .06em; /* 文字間隔（調整用） */
  --intro-line-height: 2.05; /* 行間を広めに */
  --intro-font-size: clamp(15px, 1.25vw, 18px); /* フォントサイズ拡大 */
  --intro-person-box-scale: 1.18; /* 枠ごとズーム倍率（視覚的拡大） */
  --intro-person-box-layer: 3;    /* 重なり順（テキストより上=3 / 下=1など） */
    /* 右人物：幅をわずかに拡大（vw 中央値）で存在感を近づける */
  --intro-person-vw: 26vw; /* 重複定義側も縮小 */
  }
  body.variant-a .intro{padding:var(--intro-vpad) 0; background:#ffffff;}
  body.variant-a .intro__inner{
    grid-template-columns: .9fr 1fr 1.45fr;
    grid-template-areas: "collage text person";
    align-items:stretch; /* 行高に子要素をストレッチ */
    min-height: unset;   /* 固定はしない */
  }
  body.variant-a .intro__collage{grid-area:collage; transform:none !important; position:relative; height:100%; overflow:visible}
  body.variant-a .intro__text{grid-area:text; align-self:center; justify-self:center}
  /* 見本寄せ：テキストの表示・並び調整（中央寄せ、行間、改行反映） */
  body.variant-a .intro__text{
    max-width: var(--intro-text-width);
    text-align: center;
  line-height: var(--intro-line-height, 2.05); /* 広めの行間 */
    letter-spacing: var(--intro-letter-spacing, .06em); /* 文字間隔を広げる */
  font-size: var(--intro-font-size); /* 拡大後サイズ */
    text-wrap: balance;         /* 対応ブラウザでバランス */
    -webkit-hyphens: none; hyphens: none;
    word-break: keep-all;       /* 句読点前後の過度な折返し抑制（対応ブラウザ） */
  }
  body.variant-a .intro__text p{
    margin: 0;
    white-space: normal;    /* 自然な折り返し */
    /* Safari 等 balance 未対応で極端に縦長になる場合に備え調整用 */
    display: block;
  }
  body.variant-a .intro__person{
    grid-area:person;
  justify-self:end;
  align-self:stretch; /* セクション全高にフィット */
    /* フルブリードをやめ、可変幅（min-vw-max）で縮むように */
    width: clamp(var(--intro-person-min, 240px), var(--intro-person-vw, 38vw), var(--intro-person-max, 560px));
    max-width: 100%;
  /* 全体表示モード: 余白を保持し高さ拡張を解除 */
  aspect-ratio:auto;
  max-height:400px; /* さらに約150px圧縮 */
  height:auto;
  margin-top:0;
  margin-bottom:0;
    margin-left: 0;         /* figure 既定の余白を除去 */
  /* ビューポート張り出し解除 */
  margin-right:0;
  overflow:visible;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    position:relative; z-index:3; /* 最前面 */
    /* 枠ごとズーム: レイアウトスペースは変えず視覚的に拡大（左方向へ） */
    transform: scale(var(--intro-person-box-scale,1)) translateZ(0);
    transform-origin: right center;
    will-change: transform;
    z-index: var(--intro-person-box-layer,3);
  }
  body.variant-a .intro__person .img-slot{display:block}
  body.variant-a .intro__person .img-slot,
  body.variant-a .intro__person .img-slot img{width:100%; height:100%;}
  body.variant-a .intro__person .img-slot img{
    object-fit:contain !important; 
    object-position:center center !important;
    transform:none !important;
    transform-origin:center center !important;
  }
  /* 右人物：白→透明のフェードと軽いグレースケール（A版） */
  body.variant-a .intro__person::after{
    content:""; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(
      90deg,
      rgba(255,255,255, var(--intro-fade-alpha, .86)) 0%,
      rgba(255,255,255, 0) var(--intro-fade-end, 34%)
    ) !important;
  }
  body.variant-a .intro__person img{ filter:grayscale(12%) !important; }
}

/* variant-a: HERO 下の黒帯（下パディング領域の透明化で見えていた）を解消 */
body.variant-a .hero{ padding-bottom: 0 !important; }
/* variant-a: コラージュ変形（transform:none !important を打ち消して適用） */
@media(min-width:1024px){
  body.variant-a .intro__collage{ transform: translateX(var(--intro-collage-x)) !important; }
  body.variant-a .intro__collage .collage{ position:absolute; inset:0; transform: scale(var(--intro-collage-scale)) !important; transform-origin:left center !important; }
  body.variant-a .intro__collage{ z-index:0; }
  body.variant-a .intro__text{ position:relative; z-index:2; }
  body.variant-a .intro__person .img-slot{ position:relative; z-index:2; }
}

/* ===== TEMP FIX: show full person image (remove horizontal crop) ===== */
@media (min-width:1024px){
  body.variant-a .intro__person{ overflow:visible !important; }
  body.variant-a .intro__person .img-slot img{
    transform:none !important;
    object-position:center center !important;
  }
}

/* ===== variant-a HERO height override (ensure reduced height applies) ===== */
@media (min-width:1024px){
  body.variant-a .hero__kv{ min-height: var(--hero-h) !important; }
}