/* ===========================================================
   v9 追加分（v8 の上に重ねる差分）
   =========================================================== */

/* -----------------------------------------------------------
   v9-2. ヘッダーの視認性
   どんな写真がヒーローに来ても白文字が読めるよう、最上部に暗幕を敷く。
   あわせて、スクロールを始めた時点でヘッダーを不透明にする
   （v5は「ヒーローを抜けたら」だったため、写真の上に白文字が乗り続けていた）。
   ----------------------------------------------------------- */
.hero::before{
  content:"";position:absolute;left:0;right:0;top:0;height:clamp(120px,17vh,210px);z-index:1;
  background:linear-gradient(to bottom,rgba(12,33,60,.62) 0%,rgba(12,33,60,.34) 46%,rgba(12,33,60,0) 100%);
  pointer-events:none;
}
header .logo img{filter:drop-shadow(0 1px 8px rgba(12,33,60,.5))}
header .nav-item,header .logo .tag{text-shadow:0 1px 10px rgba(12,33,60,.55)}
header.solid .nav-item,header.solid .logo .tag,
body.lower header .nav-item,body.lower header .logo .tag{text-shadow:none}
header.solid .logo img,body.lower header .logo img{filter:brightness(0);opacity:.92}

/* -----------------------------------------------------------
   v9-3. ヒーローのスライド（4枚・クロスフェード）
   ----------------------------------------------------------- */
.hero-bg img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;
  opacity:0;transition:opacity 1.4s var(--ease);animation:none;transform:scale(1.06);
}
.hero-bg img.is-on{opacity:1;animation:kb 9s var(--ease) forwards}
@media (prefers-reduced-motion:reduce){
  .hero-bg img{transition:none;transform:none}
  .hero-bg img.is-on{animation:none}
}
.hero-dots{
  position:absolute;left:var(--gutter);bottom:clamp(62px,7.6vw,100px);z-index:3;display:flex;gap:9px;
}
.hero-dots button{
  width:26px;height:3px;border:0;padding:0;border-radius:2px;cursor:pointer;
  background:rgba(255,255,255,.34);transition:background .4s var(--ease)}
.hero-dots button[aria-current="true"]{background:var(--lemon)}

/* -----------------------------------------------------------
   v9-8. 最新のお知らせ（ヒーロー右下・スクロールキューの左隣）
   ----------------------------------------------------------- */
.hero-news{
  position:absolute;right:calc(var(--gutter) + clamp(34px,4vw,58px));
  bottom:clamp(46px,7vw,90px);z-index:3;
  display:inline-flex;align-items:center;gap:14px;max-width:min(86vw,430px);
  padding:12px 18px;border-radius:100px;
  background:rgba(253,248,241,.9);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.5);
  box-shadow:0 10px 30px rgba(12,33,60,.22);
  color:var(--ink);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
.hero-news:hover{transform:translateY(-3px);box-shadow:0 16px 38px rgba(12,33,60,.28)}
.hn-label{
  flex:none;font-family:"Outfit";font-size:10px;letter-spacing:.18em;color:#fff;
  background:var(--brand);border-radius:100px;padding:4px 10px;
}
.hn-body{display:flex;flex-direction:column;min-width:0}
.hn-body time{font-family:"Outfit";font-size:11px;letter-spacing:.06em;color:var(--ink-60)}
.hn-ttl{font-size:14.5px;font-weight:700;line-height:1.5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hn-arw{flex:none;color:var(--brand);font-size:14px}
@media(max-width:900px){
  .hero-news{right:auto;left:var(--gutter);bottom:clamp(14px,3vw,22px);max-width:calc(100vw - var(--gutter)*2)}
  .hero-dots{bottom:auto;top:calc(100svh - 118px)}
}

/* -----------------------------------------------------------
   v9-4. ブランドロゴは公式の縦横比のまま
   height 固定＋max-width:100% の組み合わせで横に潰れていたため、
   高さは max-height で頭打ちにし、幅は常に auto にする。
   ----------------------------------------------------------- */
.biz-brand img,.lockup img,.brand-logo img{
  height:auto!important;width:auto!important;max-width:100%;object-fit:contain;
}
.biz-brand img{max-height:30px}
.lockup img{max-height:150px}

/* -----------------------------------------------------------
   v9-6. ショップ一覧（実店舗14件）
   現行サイトの写真は権利上使えないため、カードは情報主体で組む。
   ----------------------------------------------------------- */
.shop-grid{margin-top:22px}
.shop-card{background:#fff;border:1px solid rgba(16,43,78,.12);border-radius:3px;overflow:hidden}
.shop-card .b{padding:clamp(20px,2.2vw,28px)}
.shop-card h3{font-size:var(--fs-h3);line-height:1.5;margin-bottom:16px}
.shop-card h3 .brand{
  display:block;font-size:12px;letter-spacing:.14em;font-weight:700;color:var(--brand);margin-bottom:6px;
}
.shop-card dl{display:grid;grid-template-columns:5.2em 1fr;gap:8px 12px;font-size:var(--fs-sm);line-height:1.8}
.shop-card dt{color:var(--ink-60);font-weight:700}
.shop-card dd{color:var(--ink)}
.shop-card .tel{color:var(--brand);font-weight:700;font-family:"Outfit";letter-spacing:.02em}
.shop-card .free{margin-left:.5em;font-size:12.5px;color:var(--ink-60)}
.shop-act{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
.shop-act .mini{
  display:inline-flex;align-items:center;padding:9px 18px;border-radius:100px;
  border:1px solid rgba(16,43,78,.25);font-size:14px;font-weight:700;color:var(--ink);
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
}
.shop-act .mini:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.shop-act .mini.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.shop-act .mini.primary:hover{background:#C24500;border-color:#C24500}
.area-head{display:flex;align-items:baseline;gap:16px;margin-top:clamp(34px,4vw,56px)}
.area-head h3{font-size:clamp(1.3rem,1.1rem + .8vw,1.8rem)}
.area-head .en{font-family:"Outfit";font-size:12px;letter-spacing:.16em;color:var(--ink-60)}

/* 来店予約 */
.reserve-sub{font-size:var(--fs-h3);margin-bottom:16px}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:10px}
.chips li{
  padding:10px 18px;border-radius:100px;background:#fff;
  border:1px solid rgba(16,43,78,.14);font-size:var(--fs-sm);
}
.sec p.reserve-note{margin-top:20px;font-size:var(--fs-sm)}
.cap-note{margin-top:12px;font-size:var(--fs-sm);color:var(--ink-60)}

/* -----------------------------------------------------------
   v9-7. 具体例（WHY NOW のあと）
   ----------------------------------------------------------- */
.cases .card{display:flex;flex-direction:column}
.cases h3{font-size:var(--fs-h3);margin:10px 0 12px;line-height:1.5}
.sec p.sec-close{
  margin-top:clamp(28px,3.4vw,44px);max-width:none;text-align:center;
  font-size:clamp(1.02rem,.98rem + .35vw,1.25rem);font-weight:700;color:var(--ink);line-height:2;
}
@media(max-width:960px){.cases{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.cases{grid-template-columns:1fr}}

/* -----------------------------------------------------------
   v9-9. 来店予約への導線（画面右の縦タブ）
   競合（田中電子）はブランド別に3本置いているが、当社は auショップ のみの
   運営なので1本にまとめ、「何ができるか」は shop.html#reserve で説明する。
   採用ページは下部固定CTAがあるため出さない。
   ----------------------------------------------------------- */
.visit-fab{
  position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:88;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:20px 12px;border-radius:6px 0 0 6px;
  background:linear-gradient(160deg,#F2670F 0%,#D94A00 100%);color:#fff;
  box-shadow:0 10px 30px rgba(138,41,0,.3);
  transition:padding-right .4s var(--ease),box-shadow .4s var(--ease);
}
.visit-fab:hover{padding-right:20px;box-shadow:0 14px 38px rgba(138,41,0,.42)}
.vf-en{font-family:"Outfit";font-size:9.5px;letter-spacing:.2em;opacity:.85}
.vf-ja{writing-mode:vertical-rl;font-size:15px;font-weight:700;letter-spacing:.22em}
.vf-sub{writing-mode:vertical-rl;font-size:11px;letter-spacing:.14em;opacity:.86}
body.has-fixed-cta .visit-fab{display:none}
@media(max-width:820px){
  .visit-fab{top:auto;bottom:78px;padding:12px 10px;gap:4px}
  .vf-sub{display:none}
}
.sh-btns{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.sh-btns .btn{margin-top:clamp(30px,3.4vw,46px)}

/* -----------------------------------------------------------
   モバイルの重なり整理
   下から順に：お知らせ(16) → 来店予約(76・右) → ドット(132)
   ----------------------------------------------------------- */
@media(max-width:820px){
  .hero-news{left:16px;right:16px;bottom:16px;max-width:none}
  .hero-dots{top:auto;bottom:132px;left:16px}
  .visit-fab{
    top:auto;bottom:76px;right:16px;border-radius:100px;
    flex-direction:row;align-items:center;gap:8px;padding:11px 18px;
  }
  .visit-fab .vf-en{display:none}
  .vf-ja{writing-mode:horizontal-tb;font-size:14px;letter-spacing:.1em}
}

/* 店舗カードの外観写真（現行サイトから転載。取り下げ指示が出たら差し替える） */
.shop-card .ph{aspect-ratio:3/2;overflow:hidden;background:var(--cream-2)}
.shop-card .ph img{width:100%;height:100%;object-fit:cover}