/* ============================================================
   いわぽけ LP — 統合スタイル
   [1] トークン + ヘッダー + ヒーロー（hero.html 由来）
   [2] 共通セクションパーツ + セクションA（section-strengths.html 由来）
   ============================================================ */

/* ============================================================
   いわぽけ LP — デザイントークン（header.html と共通・結合時は一方に統合）
   ============================================================ */
:root{
  --iw-primary:      #CA95FF;
  --iw-action:       #9D5CF0;
  --iw-action-hover: #8B48E6;
  --iw-ink:          #2B2140;
  --iw-ink-soft:     #4A3F63;
  --iw-ink-muted:    #7A6C99;
  --iw-ink-faint:    #9C86C0;
  --iw-bg:           #FAF7FF;
  --iw-glass-bg:     rgba(255,255,255,0.42);
  --iw-glass-bg-scrolled: rgba(255,255,255,0.58);
  --iw-glass-border: rgba(255,255,255,0.75);
  --iw-glass-shadow: 0 8px 28px rgba(148,95,220,0.16), inset 0 1px 0 rgba(255,255,255,0.9);
  --iw-font: "Noto Sans JP", "Inter", sans-serif;
  --iw-font-latin: "Inter", "Noto Sans JP", sans-serif;
  --iw-header-max: 1080px;
  --iw-max:          1320px;   /* コンテンツ最大幅（全セクション共通） */
  --iw-text-max:      40em;    /* 本文の行長上限。日本語は1行40字前後が読みやすい */
  --iw-pad-x: clamp(24px, 12.5vw, 160px);   /* セクション左右 padding（LP/feature 共通）。860px 以下で 20px に */
  /* /business（暗色テーマ・パターン4 ミント）。theme="dark" のヘッダー/フッターと business.css で使用 */
  --bz-bg:#1A0B3D; --bz-bg-2:#150931; --bz-surface:#22104C; --bz-surface-2:#2E1A5E; --bz-border:#3A2470;
  --bz-text:#F3EEFF; --bz-text-2:#B9A6E0; --bz-text-3:#9F8AD1; --bz-accent:#5EEAD4; --bz-on-accent:#053B33; --bz-outline:#7A5FB8;
  --iw-deep:         #7C3AED;
  --iw-eyebrow:      #B49BE0;
  --iw-ink-note:     #A99BC4;
  --iw-neutral:      #8E85A3;
  --iw-neutral-fill: #B7ADC6;
  --iw-line-lav:     #F1EAFB;
  --iw-border-lav:   #EDE3FB;
  --iw-track:        #F3EEFA;
  /* カテゴリ配色（アプリ本体と同一） */
  --cat-gourmet:        #E85D5D; --cat-gourmet-c:   #FCE5E5;
  --cat-beauty:         #CA95FF; --cat-beauty-c:    #EDD9FF;
  --cat-shopping:       #3B82F6; --cat-shopping-c:  #DBE7FB;
  --cat-life:           #2BAE76; --cat-life-c:      #D4F2E2;
  --cat-outing:         #E89B30; --cat-outing-c:    #FCE8C9;
  --status-open-bg:     #DFF5E8; --status-open-fg:  #1F7A4D;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{max-width:100%;overflow-x:hidden}
@media (max-width:860px){:root{--iw-pad-x:20px}}
body{font-family:var(--iw-font);color:var(--iw-ink);background:var(--iw-bg)}

/* ============================================================
   ヘッダー（header.html と同一。結合時は header.html を正とする）
   ============================================================ */
/* ============================================================
   ヘッダー
   ============================================================ */
.iw-header{position:fixed;top:16px;left:16px;right:16px;z-index:100;display:flex;justify-content:center;pointer-events:none}
.iw-header__capsule{
  pointer-events:auto;width:100%;max-width:1980px;   /* それ以下は画面幅に追従 */
  display:flex;align-items:center;gap:14px;
  padding:12px 14px 12px 22px;border-radius:999px;
  background:var(--iw-glass-bg);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);
  border:1px solid var(--iw-glass-border);
  box-shadow:var(--iw-glass-shadow);
  transition:padding .35s ease,background .35s ease;
}
.iw-header.is-scrolled .iw-header__capsule{padding:8px 12px 8px 18px;background:var(--iw-glass-bg-scrolled)}
.iw-header__brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0}
.iw-header__icon{width:38px;height:38px;border-radius:11px;display:block}
.iw-header__name{font-size:20px;font-weight:500;letter-spacing:0.06em;color:var(--iw-ink);white-space:nowrap}
.iw-header__latin{font-family:var(--iw-font-latin);font-size:10px;font-weight:500;letter-spacing:0.22em;color:var(--iw-ink-muted);transform:translateY(1px);white-space:nowrap}

.iw-header__nav{display:flex;align-items:center;gap:8px;margin-left:auto}
.iw-header__link{
  font-size:13.5px;color:var(--iw-ink-soft);text-decoration:none;
  padding:9px 14px;border-radius:999px;transition:background .2s,color .2s;white-space:nowrap;
}
.iw-header__link:hover{background:rgba(202,149,255,0.18);color:var(--iw-ink)}
.iw-header__link.is-current{background:rgba(202,149,255,0.22);color:var(--iw-ink);font-weight:500}

/* ページ内リンクと別ページ導線を分ける縦線 */
.iw-header__sep{
  width:1px;height:18px;background:var(--iw-line-lav);
  flex-shrink:0;margin:0 6px;
}

/* 店舗オーナー様：白いピル（内側に影を落として一段奥まらせる） */
.iw-header__owner{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 18px;border-radius:999px;text-decoration:none;white-space:nowrap;
  font-size:13px;font-weight:500;color:#5B21B6;
  background:rgba(255,255,255,0.9);
  border:1px solid rgba(237,227,251,0.9);
  box-shadow:inset 0 1px 3px rgba(148,95,220,0.1);
  transition:background .2s,box-shadow .2s;
}
.iw-header__owner:hover{background:#FFFFFF;box-shadow:inset 0 1px 3px rgba(148,95,220,0.06)}
.iw-header__owner:focus-visible{outline:2px solid var(--iw-action);outline-offset:2px}
.iw-header__owner-ico{width:15px;height:15px;flex-shrink:0}

/* アプリを入手：グラデーション */
.iw-header__cta{
  margin-left:4px;font-size:13.5px;font-weight:500;color:#FFFFFF;text-decoration:none;
  background:linear-gradient(120deg,#7C3AED,#9D5CF0 50%,#CA95FF);
  padding:11px 24px;border-radius:999px;white-space:nowrap;
  box-shadow:0 8px 20px rgba(148,95,220,0.32);
  transition:transform .2s,box-shadow .2s;
}
.iw-header__cta:hover{transform:translateY(-1px);box-shadow:0 12px 26px rgba(148,95,220,0.4)}
.iw-header__cta:focus-visible{outline:2px solid var(--iw-action);outline-offset:3px}

/* メニューボタン（モバイルのみ表示） */
.iw-header__menu{
  display:none;width:38px;height:38px;border-radius:50%;flex-shrink:0;margin-left:auto;
  background:rgba(255,255,255,0.7);border:1px solid rgba(255,255,255,0.95);
  align-items:center;justify-content:center;cursor:pointer;padding:0;
  box-shadow:0 4px 12px rgba(148,95,220,0.14);
}
.iw-header__menu span{display:block;width:16px;height:1.6px;background:var(--iw-ink);border-radius:2px;position:relative;transition:background .2s}
.iw-header__menu span::before,.iw-header__menu span::after{
  content:'';position:absolute;left:0;width:16px;height:1.6px;background:var(--iw-ink);border-radius:2px;
  transition:transform .28s cubic-bezier(.3,0,.2,1),top .28s cubic-bezier(.3,0,.2,1);
}
.iw-header__menu span::before{top:-5px}
.iw-header__menu span::after{top:5px}
.iw-header__menu[aria-expanded="true"] span{background:transparent}
.iw-header__menu[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.iw-header__menu[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}
.iw-header__menu:focus-visible{outline:2px solid var(--iw-action);outline-offset:2px}

/* 開くシート（モバイル） */
.iw-sheet{
  display:none;pointer-events:none;visibility:hidden;
  position:absolute;top:calc(100% + 8px);left:0;right:0;
  border-radius:22px;padding:10px;
  background:rgba(255,255,255,0.74);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);
  border:1px solid rgba(255,255,255,0.95);
  box-shadow:0 14px 34px rgba(148,95,220,0.16);
  flex-direction:column;gap:2px;
  opacity:0;transform:translateY(-6px);
  transition:opacity .25s ease,transform .25s ease,visibility 0s linear .25s;
}
.iw-sheet.is-open{opacity:1;transform:translateY(0);visibility:visible;pointer-events:auto;transition:opacity .25s ease,transform .25s ease,visibility 0s}
.iw-sheet a{
  padding:13px 15px;border-radius:14px;text-decoration:none;
  font-size:13.5px;color:#5C4A85;transition:background .2s;
}
.iw-sheet a:hover{background:rgba(202,149,255,0.14)}

/* 下部固定バー（モバイル） */
.iw-dock{
  display:none;position:fixed;left:12px;right:12px;bottom:12px;z-index:99;
  align-items:center;gap:8px;
  padding:8px 8px 8px 8px;border-radius:999px;
  background:rgba(255,255,255,0.8);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);
  border:1px solid rgba(255,255,255,0.95);
  box-shadow:0 -2px 26px rgba(148,95,220,0.18);
  transform:translateY(120%);
  transition:transform .4s cubic-bezier(.3,0,.2,1);
}
.iw-dock.is-in{transform:translateY(0)}
.iw-dock .iw-header__owner{padding:9px 14px;font-size:12px;flex-shrink:0}
.iw-dock .iw-header__cta{flex:1;text-align:center;padding:12px 14px;margin:0}
/* メニュー（シート）展開中は dock を退避（初期値と同じ 120%・transition は既存流用）。
   シート最下部のボタンに dock（z=99 > scrim98）が被って押せなくなるため。閉じれば .is-in の状態が戻る */
@media (max-width:860px){body.is-menu-open .iw-dock{transform:translateY(120%)}}

@supports not (backdrop-filter: blur(1px)){
  .iw-sheet{background:rgba(255,255,255,0.95)}
  .iw-dock{background:rgba(255,255,255,0.96)}
}

/* ---------- モバイル ---------- */
@media (max-width:860px){
  /* 下部バーに隠れないよう最後に余白を足す */
  body{padding-bottom:76px}
  .iw-header{top:10px;left:10px;right:10px}
  .iw-header__latin{display:none}
  .iw-header__capsule{padding:8px 8px 8px 14px;position:relative}
  .iw-header__icon{width:29px;height:29px}
  .iw-header__name{font-size:16px}
  /* ナビはシートに移すので隠す */
  .iw-header__nav{display:none}
  .iw-header__menu{display:inline-flex}
  .iw-sheet{display:flex}
  .iw-dock{display:flex}
}
@media (prefers-reduced-motion: reduce){
  .iw-header__capsule,.iw-sheet,.iw-dock,.iw-header__menu span::before,.iw-header__menu span::after{transition:none}
}

/* ============================================================
   ヒーロー
   ============================================================ */
.iw-hero{
  position:relative;
  min-height:600px;
  height:88vh;
  max-height:820px;
  overflow:hidden;
  background:
    radial-gradient(560px 560px at -6% -12%, rgba(202,149,255,0.26), transparent 62%),
    radial-gradient(480px 480px at 34% 108%, rgba(240,168,200,0.16), transparent 60%),
    var(--iw-bg);
}
.iw-hero__map{position:absolute;inset:0;width:100%;height:100%}
/* 左側：コピーの可読性を守る白のフェード */
.iw-hero__veil{
  position:absolute;inset:0;
  background:linear-gradient(90deg, rgba(250,247,255,0.92) 0%, rgba(250,247,255,0.55) 30%, rgba(250,247,255,0) 52%);
  pointer-events:none;
}
.iw-hero__inner{
  position:relative;
  width:min(var(--iw-max), 100% - var(--iw-pad-x) * 2);
  margin:0 auto;
  height:100%;
}
.iw-hero__copy{
  position:relative;
  z-index:4;
  max-width:520px;
  padding-top:clamp(120px, 22vh, 200px);
}
.iw-nowrap-block{display:inline-block}
.iw-hero__title{
  font-size:clamp(30px, 4.6vw, 48px);
  font-weight:600;
  line-height:1.36;
  letter-spacing:0.015em;
  color:var(--iw-ink);
}
.iw-hero__sub{
  margin-top:18px;
  font-size:clamp(13px, 1.4vw, 15px);
  color:var(--iw-ink-muted);
  letter-spacing:0.02em;
}
.iw-hero__badges{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap}
.iw-badge{
  display:inline-block;line-height:0;border-radius:11px;
  transition:transform .2s ease, filter .2s ease;
}
/* 両社の公式バッジは黒い角丸が画像いっぱいのため、同じ高さで揃う */
.iw-badge{--badge-h:clamp(46px, 5.2vw, 54px)}
.iw-badge img{display:block;width:auto;height:var(--badge-h)}
.iw-badge:hover{transform:translateY(-2px);filter:brightness(1.12)}
.iw-badge:focus-visible{outline:2px solid var(--iw-action);outline-offset:3px}
/* 増加中バッジ（LIVE） */
.iw-live{
  position:absolute;top:-11px;right:18px;
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 14px;border-radius:999px;
  background:rgba(240,253,244,0.9);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgba(34,197,94,0.4);
  box-shadow:0 4px 16px rgba(34,197,94,0.22);
  overflow:hidden;white-space:nowrap;
}
.iw-live__shine{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.9) 45%,transparent 70%);
  background-size:200% 100%;
  animation:iwShine 3.4s ease-in-out infinite;
}
.iw-live__dot{
  position:relative;width:7px;height:7px;border-radius:50%;
  background:#22C55E;animation:iwLivePulse 2.2s ease-out infinite;
}
.iw-live__tag{
  position:relative;font-family:var(--iw-font-latin);
  font-size:10px;font-weight:600;letter-spacing:.14em;color:#15803D;
}
.iw-live__text{position:relative;font-size:11.5px;font-weight:500;color:#166534}
.iw-live__arrow{position:relative;animation:iwArrowUp 1.8s ease-in-out infinite}
@keyframes iwLivePulse{
  0%{box-shadow:0 0 0 0 rgba(34,197,94,.5)}
  70%{box-shadow:0 0 0 7px rgba(34,197,94,0)}
  100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}
}
@keyframes iwArrowUp{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-2.5px)}
}
@keyframes iwShine{
  0%{background-position:-120% 0}
  60%,100%{background-position:220% 0}
}
@media (prefers-reduced-motion: reduce){
  .iw-live__dot,.iw-live__arrow,.iw-live__shine{animation:none}
  .iw-live__shine{display:none}
}
@media (max-width:520px){
  .iw-live{right:12px;padding:5px 11px;gap:5px}
  .iw-live__tag{font-size:9px}
  .iw-live__text{font-size:10.5px}
}

/* 実況テロップ（案D：枠ごと横スライド＋光の走査。store=緑 / user=紫。中身は lp.js が描く） */
.iw-feed{position:relative;height:40px;margin-top:16px}
.iw-feed.is-hidden{display:none}
.iw-feed__box{
  position:absolute;inset:0;display:flex;justify-content:space-between;align-items:center;
  gap:8px;padding:0 14px;border-radius:12px;overflow:hidden;
  background:rgba(34,197,94,0.07);border:1px solid rgba(34,197,94,0.2);
  will-change:transform,opacity;
}
.iw-feed__text{
  font-size:clamp(11px,1.2vw,12px);color:#15803D;font-weight:500;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.iw-feed__when{font-size:clamp(10px,1.1vw,10.5px);color:#7FAE96;flex-shrink:0}
/* 利用者カードは紫系 */
.iw-feed--user .iw-feed__box{background:rgba(157,92,240,0.07);border-color:rgba(157,92,240,0.22)}
.iw-feed--user .iw-feed__text{color:#6E3BB8}
.iw-feed--user .iw-feed__when{color:#9C86C0}
/* 入替アニメ（案A：縦スライド）。旧枠 is-out（上へ抜け）→ 新枠 is-in（下から入る） */
.iw-feed__box.is-in{animation:iwFeedIn .5s cubic-bezier(.2,.8,.3,1) both}
.iw-feed__box.is-out{animation:iwFeedOut .45s cubic-bezier(.4,0,.8,.4) both;pointer-events:none}
@keyframes iwFeedIn{from{transform:translateY(22px);opacity:0}to{transform:none;opacity:1}}
@keyframes iwFeedOut{to{transform:translateY(-22px);opacity:0}}
@media (prefers-reduced-motion: reduce){
  .iw-feed__box.is-in,.iw-feed__box.is-out{animation:none}
  .iw-feed__box.is-out{display:none}
}

.iw-hero__stat{
  position:relative;
  display:inline-block;margin-top:30px;
  padding:clamp(22px,2.6vw,30px) clamp(30px,3.4vw,42px) clamp(20px,2.4vw,28px);
  border-radius:26px;
  background:rgba(255,255,255,0.22);
  -webkit-backdrop-filter:blur(12px) saturate(1.5);
  backdrop-filter:blur(12px) saturate(1.5);
  border:1px solid rgba(255,255,255,0.62);
  box-shadow:0 16px 44px rgba(148,95,220,0.15), inset 0 1px 0 rgba(255,255,255,0.7);
}
@supports not (backdrop-filter: blur(1px)){
  .iw-hero__stat{background:rgba(255,255,255,0.78)}
}
.iw-hero__stat-line{display:flex;align-items:baseline;gap:5px}
.iw-hero__stat-num{
  font-size:clamp(40px, 5vw, 62px);font-weight:500;
  letter-spacing:-0.02em;line-height:1.05;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum";
  background:linear-gradient(120deg, #7C3AED 0%, #A66BF5 42%, #CA95FF 72%, #E0A8F0 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.iw-hero__stat-unit{
  font-size:clamp(17px,1.9vw,23px);font-weight:500;
  background:linear-gradient(120deg,#9D5CF0,#CA95FF);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.iw-hero__stat-cap{font-size:clamp(13.5px,1.45vw,16px);color:var(--iw-ink-muted);margin-left:6px}
.iw-hero__stat-sub{margin-top:12px;font-size:clamp(12.5px,1.3vw,14px);color:var(--iw-ink-muted);letter-spacing:0.03em}
/* 出現アニメ */
.iw-fadeup{opacity:0;transform:translateY(14px);animation:iwFadeUp .8s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes iwFadeUp{to{opacity:1;transform:translateY(0)}}

/* カードスタック */
.iw-stack{
  position:absolute;z-index:4;
  right:max(28px, calc((100% - var(--iw-max)) / 2 + 28px));
  bottom:48px;
  width:300px;
  height:352px;
  pointer-events:none;
}
.iw-card{
  position:absolute;left:0;right:0;top:0;
  background:rgba(255,255,255,0.92);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,0.95);
  border-radius:16px;
  padding:14px 16px;
  box-shadow:0 10px 28px rgba(148,95,220,0.16);
  transition:transform .55s cubic-bezier(.3,0,.2,1), opacity .55s ease;
}
.iw-card__row{display:flex;gap:12px;align-items:center}
.iw-card__thumb{width:46px;height:46px;border-radius:11px;flex-shrink:0;overflow:hidden}
.iw-card__thumb svg{display:block;width:100%;height:100%}
.iw-card__name{font-size:14.5px;font-weight:500;color:var(--iw-ink)}
.iw-card__rating{font-size:12px;color:var(--iw-ink-muted);margin-top:2px}
.iw-card__rating span{color:var(--iw-ink-faint)}
.iw-card__tags{display:flex;gap:6px;margin-top:10px;align-items:center;flex-wrap:wrap}
.iw-tag{font-size:11px;font-weight:500;padding:4px 10px;border-radius:999px}
.iw-tag--status{background:var(--status-open-bg);color:var(--status-open-fg)}
.iw-tag--status-closed{background:#FFF0D6;color:#9A5B00}
.iw-tag--status-holiday{background:#FDE2E4;color:#B23A48}
.iw-card__walk{font-size:11px;color:var(--iw-ink-muted)}

@keyframes iwPinDrop{0%{opacity:0;transform:translateY(-28px) scale(.6)}70%{opacity:1;transform:translateY(3px) scale(1.03)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes iwRingPulse{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.28);opacity:.45}}

/* モバイル */
@media (max-width:820px){
  .iw-hero{height:auto;max-height:none;min-height:0;padding-bottom:420px}
  .iw-hero__veil{background:linear-gradient(180deg, rgba(250,247,255,0.94) 0%, rgba(250,247,255,0.8) 34%, rgba(250,247,255,0) 58%)}
  .iw-hero__copy{max-width:none;padding-top:104px;text-align:left}
  .iw-stack{right:14px;bottom:26px;width:min(260px, 74vw);height:322px}
  .iw-card{padding:12px 14px}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .iw-fadeup{animation:none;opacity:1;transform:none}
  .iw-card{transition:none}
}

/* ============================================================
   [2] セクション共通パーツ / セクションA
   ============================================================ */

/* ============================================================
   いわぽけ LP — デザイントークン（header.html / hero.html と共通）
   結合時は :root を1箇所に統合する
   ============================================================ */

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--iw-font);color:var(--iw-ink);background:#E9E3F9;-webkit-font-smoothing:antialiased;transition:background-color .8s ease}
/* compare が画面中央に来ている間だけ地色をピンク寄りに（JS が body に付与） */
body.is-tone-pink{background-color:#EBD9F0}

/* ============================================================
   共通パーツ
   ============================================================ */
.iw-sec{padding:clamp(56px, 8vw, 96px) var(--iw-pad-x)}
.iw-sec__inner{max-width:var(--iw-max);margin:0 auto}

/* ===== 中盤の連続背景（strengths〜faq を 1 枚の下地で繋ぐ）===== */
.iw-mid{position:relative;isolation:isolate}
.iw-mid__glow{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;z-index:-1}
.iw-mid__glow--a{width:min(560px,60vw);height:min(560px,60vw);right:-12%;top:4%;background:#CA95FF;opacity:.36}
.iw-mid__glow--b{width:min(480px,52vw);height:min(480px,52vw);left:-14%;top:30%;background:#A8B4F5;opacity:.32}
.iw-mid__glow--c{width:min(520px,56vw);height:min(520px,56vw);right:-10%;top:56%;background:#D4BBFF;opacity:.6;transition:opacity .8s ease,background-color .8s ease}
.iw-mid__glow--d{width:min(460px,50vw);height:min(460px,50vw);left:-10%;top:82%;background:#B9A3F5;opacity:.3}
/* compare 中央時：ブロブ c をピンク寄りに濃く */
body.is-tone-pink .iw-mid__glow--c{background:#E9B3E0;opacity:.75}
@media (prefers-reduced-motion: reduce){
  body,.iw-mid__glow--c{transition:none}
}
/* ===== /中盤の連続背景 ===== */
.iw-eyebrow{
  font-family:var(--iw-font-latin);
  font-size:11px;font-weight:500;letter-spacing:0.24em;
  color:var(--iw-eyebrow);
}
.iw-h2{
  font-size:clamp(23px, 3.2vw, 36px);
  font-weight:600;line-height:1.52;letter-spacing:0.01em;
  color:var(--iw-ink);margin-top:16px;max-width:24em;
}
.iw-h2 em, .iw-hero__title em, .iw-em-g{
  font-style:normal;
  background:linear-gradient(120deg,#7C3AED 0%,#A66BF5 45%,#CA95FF 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.iw-lead{
  font-size:clamp(14px, 1.5vw, 17px);
  color:var(--iw-ink-muted);line-height:2.05;margin-top:20px;max-width:var(--iw-text-max);
}
.iw-note{
  font-size:12px;color:var(--iw-ink-note);line-height:1.95;
  margin-top:20px;padding-top:14px;border-top:1px solid var(--iw-line-lav);
  max-width:62em;
}

/* 出現アニメ（IntersectionObserver で .is-in を付与） */
.iw-rise{opacity:0;transform:translateY(14px);transition:opacity .75s cubic-bezier(.2,.7,.3,1), transform .75s cubic-bezier(.2,.7,.3,1)}
.iw-rise.is-in{opacity:1;transform:translateY(0)}

/* ============================================================
   A: 掲載量の対比
   ============================================================ */
.iw-gap__bar-head{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:16px;margin-bottom:11px;flex-wrap:wrap;
}
.iw-gap__label{font-size:12px;color:var(--iw-neutral)}
.iw-gap__label--own{color:var(--iw-deep)}
.iw-gap__track{
  height:16px;border-radius:999px;background:var(--iw-track);
  overflow:hidden;display:flex;
}
.iw-gap__fill{width:0;transition:width 1.2s cubic-bezier(.3,0,.2,1)}
.iw-gap__fill--other{background:linear-gradient(90deg,#C6BED2 0%,#B7ADC6 100%)}
.iw-gap__fill--own{
  background:linear-gradient(90deg,#8B48E6 0%,#9D5CF0 40%,#CA95FF 100%);
  transition-delay:.3s;transition-duration:1.5s;
}
.iw-gap__total{font-size:11.5px;color:var(--iw-ink-note);margin-top:9px;display:block}
.iw-gap__close{
  font-size:clamp(13px, 1.5vw, 15px);color:var(--iw-ink);
  line-height:1.9;margin-top:32px;max-width:600px;
}

/* ============================================================
   C: 岩手特化の数字
   ============================================================ */
.iw-nums{display:flex;gap:clamp(32px, 6vw, 64px);margin-top:38px;flex-wrap:wrap}
.iw-num__value{
  display:flex;align-items:baseline;gap:5px;
  font-size:clamp(30px, 4.2vw, 40px);font-weight:500;
  color:var(--iw-deep);letter-spacing:-0.02em;line-height:1.1;
}
.iw-num__unit{font-size:14px;font-weight:500}
.iw-num__label{font-size:12.5px;color:var(--iw-ink-muted);margin-top:8px}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .iw-rise{opacity:1;transform:none;transition:none}
  .iw-gap__fill{transition:none}
}

/* ============================================================
   セクション: 機能紹介（展開タブ + 端末ビジュアル）
   ============================================================ */
.iw-features{
  background:transparent;
  position:relative;
}
/* ガラス越しに透ける光。これがないと透過しても白のままで質感が出ない */
.iw-features__glow-a,.iw-features__glow-b{
  position:absolute;border-radius:50%;pointer-events:none;filter:blur(90px);
}
.iw-features__glow-a{width:min(420px,44vw);aspect-ratio:1;background:#CA95FF;opacity:.26;top:8%;left:-6%}
.iw-features__glow-b{width:min(340px,36vw);aspect-ratio:1;background:#A8C5F0;opacity:.2;bottom:2%;left:22%}
.iw-features__grid{
  display:grid;
  grid-template-columns:minmax(0, 420px) minmax(0, 340px);
  gap:clamp(32px, 9vw, 150px);
  align-items:center;
  justify-content:center;
  margin-top:clamp(24px, 3vw, 34px);
}

/* 未選択時のタイトルコール */
.iw-call{
  overflow:hidden;
  transition:opacity .35s ease, max-height .45s cubic-bezier(.3,0,.2,1), margin-bottom .45s ease;
  max-height:200px;margin-bottom:20px;
}
.iw-call.is-hidden{opacity:0;max-height:0;margin-bottom:0}
.iw-call__lead{
  font-size:clamp(20px, 2.5vw, 26px);font-weight:500;
  color:var(--iw-ink);line-height:1.6;margin-top:10px;
}

/* タブ列 */
.iw-tabs{display:flex;flex-direction:column;gap:9px;align-items:flex-start}

/* 未選択タブ（ピル） */
.iw-tab{
  display:flex;align-items:center;gap:11px;
  padding:13px 24px 13px 15px;border-radius:999px;
  border:1px solid rgba(255,255,255,0.9);
  background:rgba(255,255,255,0.5);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  backdrop-filter:blur(14px) saturate(1.4);
  box-shadow:0 8px 22px rgba(148,95,220,0.1), inset 0 1px 0 rgba(255,255,255,0.9);
  cursor:pointer;font-family:inherit;
  transition:background .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;
  /* 開いたパネルと入れ替わるときのアニメーション用 */
  animation:iwTabIn .42s cubic-bezier(.2,.8,.3,1) both;
}
@supports not (backdrop-filter: blur(1px)){
  .iw-tab{background:rgba(255,255,255,0.88)}
}
.iw-tab:hover{
  background:rgba(255,255,255,0.72);
  border-color:rgba(202,149,255,0.7);
  transform:translateX(3px);
  box-shadow:0 10px 26px rgba(148,95,220,0.16), inset 0 1px 0 rgba(255,255,255,0.95);
}
@keyframes iwTabIn{
  from{opacity:0;transform:translateY(10px) scale(.97)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.iw-tab:focus-visible{outline:2px solid var(--iw-action);outline-offset:2px}
.iw-tab__mark{
  width:23px;height:23px;border-radius:50%;
  border:1.5px solid rgba(157,92,240,0.5);display:flex;align-items:center;justify-content:center;
  font-size:14px;color:var(--iw-action);flex-shrink:0;line-height:1;
  background:rgba(255,255,255,0.5);
}
.iw-tab__label{font-size:15px;font-weight:500;color:var(--iw-ink);white-space:nowrap}

/* 選択中タブ（展開パネル） */
.iw-panel{
  position:relative;
  border-radius:22px;
  background:rgba(255,255,255,0.5);
  -webkit-backdrop-filter:blur(20px) saturate(1.5);
  backdrop-filter:blur(20px) saturate(1.5);
  border:1.5px solid transparent;
  background-clip:padding-box;
  box-shadow:0 16px 40px rgba(148,95,220,0.16), inset 0 1px 0 rgba(255,255,255,0.9);
  padding:22px 24px;max-width:520px;cursor:pointer;
  animation:iwPanelIn .5s cubic-bezier(.2,.8,.3,1) both;
}
.iw-panel::before{
  content:"";
  position:absolute; inset:-1.5px;
  border-radius:23.5px;
  padding:1.5px;
  background:linear-gradient(135deg,rgba(255,255,255,1),rgba(200,185,255,0.45) 40%,rgba(255,255,255,0.25) 70%,rgba(255,200,230,0.75));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  pointer-events:none;
}
@supports not (backdrop-filter: blur(1px)){
  .iw-panel{background:#F1E9FC}
}
@keyframes iwPanelIn{
  from{opacity:0;transform:translateY(14px) scale(.97)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@media (prefers-reduced-motion: reduce){
  .iw-tab,.iw-panel{animation:none}
}
.iw-panel__text{font-size:15px;color:var(--iw-ink);line-height:2.1}
.iw-panel__text b{font-weight:500}
.iw-panel__subs{display:flex;gap:7px;margin-top:13px;flex-wrap:wrap}
.iw-sub{
  padding:7px 17px;border-radius:999px;
  border:1px solid rgba(255,255,255,0.75);
  background:rgba(255,255,255,0.34);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  color:#7A66A8;
  font-size:12.5px;font-weight:500;cursor:pointer;font-family:inherit;
  transition:border-color .2s ease, background .2s ease, color .2s ease;
}
.iw-sub:hover{background:rgba(255,255,255,0.58)}
.iw-sub.is-on{
  border-color:rgba(255,255,255,0.95);
  background:rgba(255,255,255,0.85);
  color:#6E3BB8;
  box-shadow:0 4px 12px rgba(148,95,220,0.14);
}
.iw-sub:focus-visible{outline:2px solid var(--iw-action);outline-offset:2px}

/* スイッチ型トグル */
.iw-switch{
  display:inline-flex;align-items:center;margin-top:13px;
  background:#E3D6F7;border-radius:999px;padding:3px;position:relative;
}
.iw-switch__thumb{
  position:absolute;top:3px;left:3px;
  width:calc(50% - 3px);height:calc(100% - 6px);
  background:#FFFFFF;border-radius:999px;
  box-shadow:0 2px 6px rgba(110,59,184,.18);
  transition:left .28s cubic-bezier(.3,0,.2,1);
}
.iw-switch.is-right .iw-switch__thumb{left:50%}
.iw-switch__btn{
  position:relative;z-index:1;padding:7px 22px;
  border:none;background:transparent;color:#8B76B5;
  font-size:12px;font-weight:500;cursor:pointer;font-family:inherit;
  transition:color .25s ease;
}
.iw-switch__btn.is-on{color:#6E3BB8}
.iw-switch__btn:focus-visible{outline:2px solid var(--iw-action);outline-offset:2px}

/* ビジュアル領域 */
.iw-viz{
  display:flex;justify-content:center;align-items:center;
  min-height:clamp(420px, 52vw, 620px);
}
/* 切り替え時のフェード＆スライド */
.iw-viz__item{
  animation:iwVizIn .5s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes iwVizIn{
  from{opacity:0;transform:translateY(16px) scale(.965)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.iw-viz__item.is-out{
  animation:iwVizOut .26s cubic-bezier(.4,0,1,1) forwards;
}
@keyframes iwVizOut{
  from{opacity:1;transform:translateY(0) scale(1)}
  to{opacity:0;transform:translateY(-14px) scale(.965)}
}
/* 端末（簡易フレーム。中身は動画/画像に差し替え） */
.iw-dev{
  width:clamp(220px, 21vw, 300px);
  aspect-ratio:9 / 19;
  border-radius:44px;
  background:#E7DCF8;border:4px solid #CDB8EE;
  box-shadow:0 34px 80px rgba(148,95,220,.26);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:16px;overflow:hidden;
}
.iw-dev--tilt{animation:iwDevTilt 4s cubic-bezier(.3,0,.2,1) infinite alternate}
.iw-dev--front{transform:perspective(1200px) rotateY(0deg)}
@keyframes iwDevTilt{
  0%{transform:perspective(1200px) rotateY(-20deg) rotateX(3deg)}
  100%{transform:perspective(1200px) rotateY(-7deg) rotateX(0deg)}
}
.iw-dev__label{font-size:13px;font-weight:500;color:#5C4A85;line-height:1.8}
.iw-dev__note{font-size:11px;color:#9482BE;margin-top:8px}
/* 端末内に動画/画像を敷く場合 */
.iw-dev__media{width:100%;height:100%;object-fit:cover;display:block;border-radius:40px}
/* 枠なしモード（bare）: 透過動画をフレームなしで見せる。動画は正方形のため contain（cover 不可） */
.iw-dev--bare{width:clamp(560px,52vw,760px);max-width:100%;aspect-ratio:1/1;background:none;border:none;border-radius:0;display:flex;align-items:center;justify-content:center}
.iw-dev__media--bare{width:100%;height:100%;object-fit:contain;border-radius:0}

/* 画像タイプ（端末フレームなし。スマホ2台の1枚画像など） */
.iw-shot{width:100%;max-width:520px;display:block;border-radius:20px}
.iw-shot--ph{
  aspect-ratio:4 / 3;
  background:linear-gradient(150deg,#F3ECFD,#E3D3F8);
  border:1px dashed #CDB8EE;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
}
.iw-shot__dummy{width:74px;aspect-ratio:9/19;border-radius:14px;background:#FFFFFF;border:2px solid #CDB8EE}

@media (max-width:880px){
  .iw-features__grid{grid-template-columns:1fr}
  .iw-features__grid .iw-viz{order:-1;margin-bottom:8px}
  .iw-panel{max-width:none}
}
@media (prefers-reduced-motion: reduce){
  .iw-dev--tilt{animation:none;transform:perspective(1200px) rotateY(-12deg)}
  .iw-call,.iw-switch__thumb{transition:none}
  .iw-viz__item{animation:none}
}

/* ============================================================
   数字（登録店舗数 / 利用ユーザー数）
   ============================================================ */
.iw-stats{
  background:transparent;
  position:relative;
}
.iw-stats__glow{
  position:absolute;width:min(360px,44vw);aspect-ratio:1;border-radius:50%;
  background:var(--iw-primary);opacity:.14;filter:blur(72px);
  bottom:-130px;left:-70px;pointer-events:none;
}
.iw-stats__grid{
  position:relative;
  padding-top:12px;   /* バッジのはみ出し分 */
  display:grid;grid-template-columns:repeat(2, minmax(0,1fr));
  gap:clamp(14px, 2vw, 22px);
  margin-top:clamp(26px, 3.2vw, 40px);
}
.iw-stat{
  border-radius:26px;
  background:rgba(255,255,255,0.58);
  -webkit-backdrop-filter:blur(18px) saturate(1.35);
  backdrop-filter:blur(18px) saturate(1.35);
  border:1px solid rgba(255,255,255,0.92);
  box-shadow:0 18px 48px rgba(148,95,220,0.14);
  padding:clamp(28px, 3.6vw, 48px) clamp(26px, 3.4vw, 44px);
  display:flex;flex-direction:column;justify-content:space-between;gap:14px;
}
@supports not (backdrop-filter: blur(1px)){
  .iw-stat{background:rgba(255,255,255,0.9)}
}
.iw-stat__label{
  font-size:clamp(13px, 1.4vw, 15px);
  color:var(--iw-ink-muted);letter-spacing:.02em;
}
.iw-stat__value{
  display:flex;align-items:baseline;gap:6px;
  font-size:clamp(38px, 6.8vw, 88px);font-weight:500;
  letter-spacing:-0.03em;line-height:1;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum";
  background:linear-gradient(120deg,#7C3AED 0%,#A66BF5 45%,#CA95FF 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.iw-stat__unit{
  font-size:clamp(15px, 1.8vw, 23px);font-weight:500;
  background:linear-gradient(120deg,#9D5CF0,#CA95FF);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.iw-stat__note{font-size:clamp(11px, 1.2vw, 12.5px);color:var(--iw-ink-note)}
/* 利用ユーザーの増減を示す小さな灯り */
.iw-stat__live{display:inline-flex;align-items:center;gap:7px}
.iw-stat__dot{
  width:7px;height:7px;border-radius:50%;background:#2BAE76;
  box-shadow:0 0 0 0 rgba(43,174,118,.45);
  animation:iwLive 2.4s ease-out infinite;
}
@keyframes iwLive{
  0%{box-shadow:0 0 0 0 rgba(43,174,118,.45)}
  70%{box-shadow:0 0 0 8px rgba(43,174,118,0)}
  100%{box-shadow:0 0 0 0 rgba(43,174,118,0)}
}

@media (max-width:700px){
  .iw-stats__grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion: reduce){
  .iw-stat__dot{animation:none}
}

/* ============================================================
   FAQ（左に質問リスト / 右に回答）
   ============================================================ */
.iw-faq{
  background:transparent;
  position:relative;
}
.iw-faq__glow{
  position:absolute;width:min(360px,44vw);aspect-ratio:1;border-radius:50%;
  background:var(--iw-primary);opacity:.16;filter:blur(70px);
  top:-110px;right:-60px;pointer-events:none;
}
.iw-faq__grid{
  position:relative;
  display:grid;grid-template-columns:minmax(280px,1fr) minmax(300px,1.15fr);
  gap:clamp(18px,2.4vw,26px);
  margin-top:clamp(26px,3.2vw,38px);
  align-items:start;
}

/* 共通：グラデーション番号 */
.iw-num-g{
  font-family:var(--iw-font-latin);
  font-weight:500;line-height:1;letter-spacing:0.01em;
  background:linear-gradient(130deg,#9D5CF0 0%,#C68CF7 55%,#E0A8F0 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  flex-shrink:0;
}

/* 左：質問リスト */
.iw-faq__list{display:flex;flex-direction:column;gap:8px}
.iw-faq__q{
  display:flex;align-items:center;gap:14px;
  text-align:left;width:100%;
  padding:17px 22px;border-radius:17px;
  background:rgba(255,255,255,0.38);
  -webkit-backdrop-filter:blur(14px) saturate(1.25);
  backdrop-filter:blur(14px) saturate(1.25);
  border:1px solid rgba(255,255,255,0.75);
  cursor:pointer;font-family:inherit;
  transition:background .25s ease, border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
@supports not (backdrop-filter: blur(1px)){
  .iw-faq__q{background:rgba(255,255,255,0.72)}
}
.iw-faq__q:hover{background:rgba(255,255,255,0.55);transform:translateX(2px)}
.iw-faq__q.is-on{
  background:rgba(255,255,255,0.78);
  border-color:rgba(255,255,255,0.96);
  box-shadow:0 12px 30px rgba(148,95,220,0.16);
}
.iw-faq__q:focus-visible{outline:2px solid var(--iw-action);outline-offset:2px}
.iw-faq__q-no{font-size:17px}
.iw-faq__q-text{
  font-size:14.5px;font-weight:500;color:#5C4A85;line-height:1.7;
}
.iw-faq__q.is-on .iw-faq__q-text{color:#6E3BB8}

/* 右：回答 */
.iw-faq__answer{
  position:sticky;top:96px;
  border-radius:22px;
  background:rgba(255,255,255,0.62);
  -webkit-backdrop-filter:blur(18px) saturate(1.35);
  backdrop-filter:blur(18px) saturate(1.35);
  border:1px solid rgba(255,255,255,0.94);
  box-shadow:0 18px 44px rgba(148,95,220,0.16);
  padding:clamp(24px,3vw,34px) clamp(24px,3vw,34px);
  transition:opacity .28s ease, transform .28s ease;
}
@supports not (backdrop-filter: blur(1px)){
  .iw-faq__answer{background:rgba(255,255,255,0.92)}
}
.iw-faq__answer.is-swap{opacity:0;transform:translateY(8px)}
.iw-faq__a-head{display:flex;align-items:flex-start;gap:16px}
.iw-faq__a-no{font-size:clamp(30px,3.6vw,40px)}
.iw-faq__a-q{
  font-size:clamp(16px,1.8vw,20px);font-weight:500;
  color:var(--iw-ink);line-height:1.7;padding-top:2px;
}
.iw-faq__a-body{
  font-size:clamp(14.5px,1.5vw,17px);
  color:var(--iw-ink-muted);line-height:2.1;
  margin-top:18px;
}

@media (max-width:880px){
  .iw-faq__grid{grid-template-columns:1fr}
  .iw-faq__answer{position:static;order:-1}
}
@media (prefers-reduced-motion: reduce){
  .iw-faq__q,.iw-faq__answer{transition:none}
}

/* ============================================================
   CTA（ダウンロード誘導）
   ============================================================ */
.iw-cta{
  position:relative;overflow:hidden;
  /* フッターと同じ160度に揃え、下端を暗くして自然に繋ぐ */
  background:linear-gradient(160deg,#7C3AED 0%,#9D5CF0 38%,#CA95FF 72%,#8B5CF6 100%);
}
/* CTA下端からフッターの色へ溶け込ませる帯。
   終端をフッター上端の色と完全に一致させる（#2A0F5C・不透明）ことで境界線を消す */
.iw-cta::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:clamp(140px,16vw,240px);
  background:linear-gradient(180deg,
    rgba(42,15,92,0)    0%,
    rgba(42,15,92,.18) 30%,
    rgba(42,15,92,.48) 58%,
    rgba(42,15,92,.80) 80%,
    rgba(42,15,92,.96) 93%,
    rgba(42,15,92,1)  100%);
  pointer-events:none;z-index:0;
}
.iw-cta .iw-sec__inner{position:relative;z-index:1}
.iw-cta__glow-a,.iw-cta__glow-b{position:absolute;border-radius:50%;pointer-events:none;filter:blur(66px)}
.iw-cta__glow-a{width:min(340px,42vw);aspect-ratio:1;background:#FFFFFF;opacity:.13;top:-130px;left:-70px}
.iw-cta__glow-b{width:min(300px,38vw);aspect-ratio:1;background:#E0A8F0;opacity:.3;bottom:-130px;right:-50px}
.iw-cta__grid{
  position:relative;
  display:grid;grid-template-columns:1fr auto;
  gap:clamp(28px,4vw,52px);align-items:center;
}
.iw-cta__eyebrow{
  font-family:var(--iw-font-latin);
  font-size:11px;font-weight:500;letter-spacing:.24em;color:rgba(255,255,255,.72);
}
.iw-cta__title{
  font-size:clamp(24px,3.6vw,36px);font-weight:600;
  color:#FFFFFF;line-height:1.5;letter-spacing:.01em;margin-top:14px;
}
.iw-cta__lead{
  font-size:clamp(13px,1.45vw,15px);color:rgba(255,255,255,.86);
  line-height:1.95;margin-top:14px;
}
.iw-cta__badges{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}
/* QR */
.iw-qr{text-align:center}
.iw-qr__frame{
  width:clamp(140px,16vw,172px);aspect-ratio:1;
  border-radius:24px;
  background:rgba(255,255,255,0.26);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);
  backdrop-filter:blur(18px) saturate(1.3);
  border:1px solid rgba(255,255,255,0.55);
  box-shadow:0 20px 46px rgba(43,20,80,0.28), inset 0 1px 0 rgba(255,255,255,0.6);
  display:flex;align-items:center;justify-content:center;
}
.iw-qr__inner{
  width:72%;aspect-ratio:1;background:#FFFFFF;border-radius:10px;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.iw-qr__img{width:86%;height:86%;object-fit:contain;display:block}
.iw-qr__note{font-size:12px;color:rgba(255,255,255,.84);margin-top:12px;line-height:1.8}

@media (max-width:820px){
  .iw-cta__grid{grid-template-columns:1fr;text-align:center}
  .iw-cta__badges{justify-content:center}
  .iw-qr{display:none}   /* スマホではQRは不要 */
}

/* ============================================================
   A: 業種カバレッジ（これまで / これから）
   ============================================================ */
.iw-sec--cover{
  background:transparent;
  position:relative;overflow:hidden;
}

.iw-swap{
  position:relative;
  display:grid;grid-template-columns:1fr auto 0.85fr;
  gap:clamp(16px,2.4vw,26px);align-items:center;
  margin-top:clamp(28px,3.4vw,42px);
}
.iw-swap__side-label{font-size:12px;color:var(--iw-neutral);margin-bottom:12px}
.iw-swap__list{display:flex;flex-direction:column;gap:9px}

/* 左：これまでの行 */
.iw-row{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  border-radius:16px;padding:16px 22px;
  font-size:clamp(13.5px,1.45vw,15px);
}
.iw-row--has{
  background:rgba(255,255,255,0.34);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  backdrop-filter:blur(14px) saturate(1.4);
  border:1px solid rgba(255,255,255,0.75);
  box-shadow:0 6px 20px rgba(148,95,220,0.09);
  color:#5C4A85;
}
.iw-row--none{
  background:rgba(255,255,255,0.2);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px dashed rgba(201,190,221,0.8);
  color:var(--iw-neutral);
}
@supports not (backdrop-filter: blur(1px)){
  .iw-row--has{background:rgba(255,255,255,0.78)}
  .iw-row--none{background:rgba(255,255,255,0.5)}
}
.iw-row__site{color:#9C8DBD;white-space:nowrap;font-size:.94em}
.iw-row__q{color:#C9BEDD}

/* 中央の矢印 */
.iw-swap__arrow{font-size:20px;color:#C9B2EF;line-height:1}

/* 右：これからのカード */
.iw-onecard{
  border-radius:26px;text-align:center;
  background:rgba(255,255,255,0.34);
  -webkit-backdrop-filter:blur(22px) saturate(1.5);
  backdrop-filter:blur(22px) saturate(1.5);
  border:1px solid rgba(255,255,255,0.88);
  box-shadow:0 24px 58px rgba(148,95,220,0.22), inset 0 1px 0 rgba(255,255,255,0.9);
  padding:clamp(30px,3.6vw,42px) clamp(26px,3vw,36px);
}
@supports not (backdrop-filter: blur(1px)){
  .iw-onecard{background:rgba(255,255,255,0.86)}
}
.iw-onecard__icon{
  display:block;width:56px;height:56px;flex:0 0 56px;
  border-radius:17px;margin:0 auto;overflow:hidden;
  box-shadow:0 10px 26px rgba(148,95,220,0.35);
}
.iw-onecard__icon img{
  width:56px;height:56px;max-width:56px;
  border-radius:17px;object-fit:cover;display:block;
}
.iw-onecard__title{font-size:clamp(17px,2vw,21px);font-weight:500;color:var(--iw-ink);margin-top:16px}
.iw-onecard__body{font-size:clamp(13.5px,1.45vw,15px);color:var(--iw-ink-muted);line-height:2;margin-top:8px}

/* カテゴリチップ（アウトライン） */
.iw-cats{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin-top:18px}
.iw-cat{
  padding:6px 14px;border-radius:999px;
  font-size:clamp(10.5px,1.15vw,11.5px);font-weight:500;
  background:transparent;border:1.5px solid currentColor;
  line-height:1.5;
}
.iw-cat--gourmet{color:#E85D5D}
.iw-cat--beauty{color:#B172F0}
.iw-cat--shopping{color:#3B82F6}
.iw-cat--life{color:#2BAE76}
.iw-cat--outing{color:#D18A20}

/* 一例：美容室の帯（既存ブロックを枠に収める） */
.iw-example{
  margin-top:clamp(26px,3.2vw,36px);
  border-radius:20px;
  background:rgba(255,255,255,0.5);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  backdrop-filter:blur(14px) saturate(1.3);
  border:1px solid rgba(255,255,255,0.8);
  box-shadow:0 12px 32px rgba(148,95,220,0.1);
  padding:clamp(22px,2.8vw,28px) clamp(22px,3vw,30px);
}
@supports not (backdrop-filter: blur(1px)){
  .iw-example{background:rgba(255,255,255,0.85)}
}
.iw-example__eyebrow{font-size:12px;color:var(--iw-ink-faint)}
.iw-example__head{
  font-size:clamp(15px,1.65vw,17px);color:var(--iw-ink);
  line-height:1.8;margin-top:8px;
}

/* このセクションの脚注は上のブロックと同じ幅に揃える */
.iw-sec--cover .iw-note{max-width:none}

@media (max-width:880px){
  .iw-swap{grid-template-columns:1fr;gap:6px}
  .iw-swap__arrow{transform:rotate(90deg);margin:14px auto}
  .iw-swap__col--after{margin-top:6px}
}

/* スクリーンリーダー専用テキスト */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ============================================================
   比較（大手サービスとの違い）
   ============================================================ */
.iw-sec--cmp{
  background:transparent;
  position:relative;overflow:hidden;
}
.iw-cmp{
  position:relative;
  margin-top:clamp(28px,3.4vw,40px);
  /* 枠がはみ出す分の余白 */
  padding-top:14px;
}
.iw-cmp__table{
  position:relative;
  border-radius:24px;
  background:rgba(255,255,255,0.5);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  backdrop-filter:blur(18px) saturate(1.4);
  border:1px solid rgba(255,255,255,0.9);
  box-shadow:0 16px 44px rgba(148,95,220,0.15);
  /* 列幅をここで一元管理（ヘッダー・行・枠がすべて同じ値を参照する） */
  --cmp-c1:1.35fr;
  --cmp-c2:1.1fr;
  --cmp-c3:1.15fr;
}
@supports not (backdrop-filter: blur(1px)){
  .iw-cmp__table{background:rgba(255,255,255,0.88)}
}
.iw-cmp__row{
  display:grid;
  grid-template-columns:var(--cmp-c1) var(--cmp-c2) var(--cmp-c3);
  align-items:center;
}
.iw-cmp__row + .iw-cmp__row{border-top:1px solid rgba(237,227,251,0.85)}

/* いわぽけ列を囲う枠：グリッドの3列目にぴったり重ねる */
.iw-cmp__highlight{
  position:absolute;
  top:-14px;bottom:-1px;
  /* 位置と幅は JS が3列目のセルを実測して設定する（ズレ防止） */
  left:var(--hl-left,68%);
  width:var(--hl-width,32%);
  border-radius:20px;
  border:2px solid rgba(202,149,255,0.55);
  background:rgba(202,149,255,0.07);
  pointer-events:none;
  transition:left .2s ease, width .2s ease;
}

/* ヘッダー */
.iw-cmp__head{padding:24px 18px;text-align:center}
.iw-cmp__head--label{padding:24px 30px}
.iw-cmp__head--other{font-size:clamp(11.5px,1.3vw,12.5px);color:var(--iw-neutral)}
.iw-cmp__badge{
  display:inline-block;padding:7px 20px;border-radius:999px;
  background:linear-gradient(120deg,#7C3AED,#A66BF5 55%,#CA95FF);
  color:#FFFFFF;font-size:clamp(12px,1.35vw,13px);font-weight:500;
  box-shadow:0 6px 18px rgba(148,95,220,0.3);
  white-space:nowrap;
}

/* セル */
.iw-cmp__label{
  padding:22px 30px;font-size:clamp(13.5px,1.5vw,15px);color:#5C4A85;
  display:flex;align-items:center;gap:12px;
}
.iw-cmp__icon{
  width:36px;height:36px;border-radius:11px;flex-shrink:0;
  background:rgba(202,149,255,0.16);color:#9D5CF0;
  display:inline-flex;align-items:center;justify-content:center;
}
.iw-cmp__other{
  padding:22px 20px;text-align:center;line-height:1.75;
  font-size:clamp(13px,1.4vw,14.5px);color:#9C8DBD;
}
.iw-cmp__own{
  padding:22px 22px;text-align:center;line-height:1.75;
  font-size:clamp(13px,1.4vw,14.5px);font-weight:500;color:var(--iw-ink);
}

/* 添え文 */
.iw-cmp__note{
  margin-top:clamp(24px,3vw,32px);
  font-size:clamp(13.5px,1.45vw,16px);color:var(--iw-ink-muted);
  line-height:2.1;max-width:52em;
}
.iw-cmp__note strong{font-weight:500;color:var(--iw-ink)}

/* モバイル：機能紹介のタブを横並びにする */
@media (max-width:880px){
  /* グリッド/フレックスの子は min-width:auto のため、
     中身がはみ出して親を押し広げる。0 にして押し広げを止める */
  .iw-features__grid > *{min-width:0}
  .iw-tabs{
    flex-direction:row;flex-wrap:nowrap;
    gap:8px;align-items:center;
    overflow-x:auto;overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding:2px 0 6px;
    max-width:100%;min-width:0;
  }
  .iw-tabs::-webkit-scrollbar{display:none}
  .iw-tab{
    flex:0 0 auto;
    padding:10px 16px 10px 11px;
  }
  .iw-tab:hover{transform:none}
  .iw-tab__label{font-size:12.5px}
  /* 選択中のタブ（行に残す） */
  .iw-tab.is-on{
    background:linear-gradient(120deg,#7C3AED,#A66BF5 55%,#CA95FF);
    border-color:transparent;
    box-shadow:0 6px 18px rgba(148,95,220,.3);
  }
  .iw-tab.is-on .iw-tab__label{color:#FFFFFF}
  .iw-tab.is-on .iw-tab__mark{
    border-color:rgba(255,255,255,.75);color:#FFFFFF;
  }
  /* パネルはタブ行の下に出す */
  .iw-tabs__panelbox{margin-top:12px}
  .iw-panel{max-width:none}
}
/* PCではパネル枠は使わない */
@media (min-width:881px){
  .iw-tabs__panelbox{display:none}
}

@media (max-width:820px){
  .iw-cmp__table{--cmp-c1:0.95fr;--cmp-c2:1fr;--cmp-c3:1fr}
  /* ヘッダーのラベルも中央に揃える */
  .iw-cmp__head--other{padding:16px 8px}
  .iw-cmp__head{padding:16px 8px}
  .iw-cmp__icon{display:none}
  .iw-cmp__label{padding:15px 14px}
  .iw-cmp__other,.iw-cmp__own{padding:15px 8px}
}

/* ------------------------------------------------------------
   数字カード：LIVEバッジ / 蒸発する＋ / 実況テロップ
   ------------------------------------------------------------ */
.iw-stat{position:relative}

/* LIVEバッジ（ヒーローと同一意匠） */
.iw-stat__live-badge{
  position:absolute;top:-11px;right:18px;z-index:2;
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 14px;border-radius:999px;
  background:rgba(240,253,244,0.92);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgba(34,197,94,0.4);
  box-shadow:0 4px 16px rgba(34,197,94,0.22);
  overflow:hidden;white-space:nowrap;
}

/* バッジ付近から立ちのぼる＋ */
.iw-plus{
  position:absolute;z-index:1;
  font-family:var(--iw-font-latin);font-weight:600;
  color:#22C55E;pointer-events:none;opacity:0;
  animation:iwPlusRise 2.8s ease-out infinite;
}
@keyframes iwPlusRise{
  0%  {opacity:0;   transform:translateY(4px)   scale(.6)}
  18% {opacity:1;   transform:translateY(-4px)  scale(1)}
  60% {opacity:.75; transform:translateY(-26px) scale(1)}
  100%{opacity:0;   transform:translateY(-46px) scale(.82)}
}

@media (prefers-reduced-motion: reduce){
  .iw-plus{animation:none;display:none}
}
@media (max-width:520px){
  .iw-stat__live-badge{right:12px;padding:5px 11px;gap:5px}
}

/* ============================================================
   フッター
   ============================================================ */
.iw-footer{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,#2A0F5C 0%,#301469 30%,#3B1178 68%,#45188A 100%);
  padding:clamp(40px,5vw,56px) 0 clamp(22px,2.6vw,28px);
}
.iw-footer__glow{
  position:absolute;width:min(320px,40vw);aspect-ratio:1;border-radius:50%;
  background:#A66BF5;opacity:.18;filter:blur(80px);
  bottom:-140px;right:6%;pointer-events:none;
}
.iw-footer__inner{
  position:relative;width:min(var(--iw-max), 100% - var(--iw-pad-x) * 2);margin:0 auto;
}
.iw-footer__grid{
  display:grid;grid-template-columns:1.4fr 1fr 1fr;
  gap:clamp(24px,4vw,40px);
}

/* ブランド列 */
.iw-footer__brand{display:flex;align-items:center;gap:11px}
.iw-footer__logo{
  width:38px;height:38px;border-radius:12px;flex-shrink:0;overflow:hidden;
  box-shadow:0 8px 22px rgba(157,92,240,.4);
}
.iw-footer__logo img{width:38px;height:38px;display:block;object-fit:cover}
.iw-footer__name{font-size:17px;font-weight:600;color:#FFFFFF}
.iw-footer__desc{
  font-size:12.5px;color:rgba(255,255,255,.62);
  line-height:1.95;margin-top:14px;
}
.iw-footer__badges{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
.iw-footer__badges .iw-badge{--badge-h:40px}

/* リンク列 */
.iw-footer__col-title{
  font-family:var(--iw-font-latin);
  font-size:10.5px;font-weight:500;letter-spacing:.16em;color:#B49BE0;
}
.iw-footer__links{
  display:flex;flex-direction:column;gap:12px;margin-top:15px;
}
.iw-footer__link{
  font-size:12.5px;color:rgba(255,255,255,.8);
  text-decoration:none;line-height:1.5;
  transition:color .2s ease;
  width:fit-content;
}
.iw-footer__link:hover{color:#FFFFFF}
.iw-footer__link:focus-visible{
  outline:2px solid rgba(202,149,255,.9);outline-offset:3px;border-radius:3px;
}

/* 最下部 */
.iw-footer__bottom{
  margin-top:clamp(28px,3.6vw,36px);padding-top:20px;
  border-top:1px solid rgba(255,255,255,.14);
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:12px;
}
.iw-footer__copy{font-size:11.5px;color:rgba(255,255,255,.5)}
.iw-footer__place{font-size:11.5px;color:rgba(255,255,255,.36)}

@media (max-width:760px){
  .iw-footer__grid{grid-template-columns:1fr 1fr;gap:28px}
  .iw-footer__brand-col{grid-column:1 / -1}
}
@media (max-width:460px){
  .iw-footer__grid{grid-template-columns:1fr}
  .iw-footer__bottom{justify-content:flex-start}
}

/* ===== メガメニュー・幕・モバイル階層シート ===== */
.iw-nav-item{position:static}
.mm-trigger{display:inline-flex;align-items:center;gap:7px;border:0;background:transparent;font-family:inherit;cursor:pointer}
.mm-chev{width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:translateY(-2px) rotate(45deg);opacity:.5;transition:transform .24s,opacity .24s}
.iw-nav-item:hover .mm-chev,.iw-nav-item:focus-within .mm-chev{transform:translateY(1px) rotate(-135deg);opacity:.9}
.iw-nav-item:hover .mm-trigger,.iw-nav-item:focus-within .mm-trigger{background:rgba(202,149,255,.18);color:var(--iw-ink)}
.mm-panel{position:absolute;left:0;right:0;top:calc(100% + 12px);z-index:110;
  opacity:0;pointer-events:none;transform:translateY(-10px);
  transition:opacity .3s cubic-bezier(.2,.7,.3,1), transform .3s cubic-bezier(.2,.7,.3,1)}
.iw-nav-item:hover .mm-panel,.iw-nav-item:focus-within .mm-panel{opacity:1;transform:translateY(0);pointer-events:auto}
.mm-panel::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
.mm-sheet{padding:34px 40px 36px;border-radius:28px}
.mm-head{display:flex;align-items:baseline;gap:12px;margin-bottom:22px}
.mm-en{font-family:var(--iw-font-latin);font-size:26px;font-weight:600;letter-spacing:.02em;color:var(--iw-ink)}
.mm-jp{font-size:13px;color:var(--iw-ink-muted)}
.mm-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px 30px}
.mm-item{display:grid;grid-template-columns:minmax(0,1fr) 16px;gap:2px 12px;align-items:center;
  padding:15px 4px;text-decoration:none;position:relative}
.mm-k{grid-column:1;grid-row:1;font-size:15px;font-weight:700;color:var(--iw-ink);letter-spacing:.01em}
.mm-v{grid-column:1;grid-row:2;font-size:12.5px;line-height:1.7;color:var(--iw-ink-muted);margin-top:3px}
.mm-ar{grid-column:2;grid-row:1/3;align-self:center;justify-self:end;
  width:7px;height:7px;border-right:1.8px solid var(--iw-primary);border-top:1.8px solid var(--iw-primary);
  transform:rotate(45deg);transition:transform .22s,opacity .22s}
a.mm-item:hover .mm-ar{transform:rotate(45deg) translate(3px,-3px)}
.mm-item.is-soon{cursor:default}
.mm-item.is-soon .mm-k,.mm-item.is-soon .mm-v{opacity:.42}
.mm-item.is-soon .mm-ar{opacity:0}
.mm-soon{display:inline-block;font-size:10px;font-weight:700;color:var(--iw-ink-note);
  background:var(--iw-track);border-radius:999px;padding:3px 8px;margin-left:8px;vertical-align:2px}
.mm-sheet{background:rgba(255,255,255,.5);
  -webkit-backdrop-filter:blur(30px) saturate(1.7);backdrop-filter:blur(30px) saturate(1.7);
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 26px 60px rgba(148,95,220,.22), inset 0 1px 0 rgba(255,255,255,.95)}
.mm-head{display:block;margin-bottom:24px}
.mm-en{display:block;font-size:34px;line-height:1.15;
  background:linear-gradient(120deg,#7C3AED 0%,#A66BF5 45%,#CA95FF 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.mm-jp{display:block;margin-top:7px}
.mm-grid{gap:12px}
.mm-item{padding:20px 20px;border-radius:18px;
  background:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.9);
  box-shadow:0 8px 22px rgba(148,95,220,.1);
  transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s,background .22s}
a.mm-item:hover{transform:translateY(-3px);background:rgba(255,255,255,.85);
  box-shadow:0 16px 34px rgba(148,95,220,.2)}
.mm-trigger{padding:9px 16px;border-radius:999px;border:1px solid transparent;
  transition:background .24s,border-color .24s,box-shadow .24s,transform .24s}
.iw-nav-item:hover .mm-trigger,.iw-nav-item:focus-within .mm-trigger{background:rgba(255,255,255,.78);border-color:rgba(255,255,255,.95);color:var(--iw-deep);
  box-shadow:0 8px 20px rgba(148,95,220,.16), inset 0 1px 0 rgba(255,255,255,.9);
  transform:translateY(-1px)}
.iw-nav-item:hover .mm-chev{opacity:.9}
.iw-scrim{position:fixed;inset:0;z-index:98;
  background:linear-gradient(170deg, rgba(42,15,92,.62), rgba(60,22,120,.72));
  -webkit-backdrop-filter:blur(6px) saturate(1.1);backdrop-filter:blur(6px) saturate(1.1);
  opacity:0;pointer-events:none;
  transition:opacity .25s ease;}
.iw-scrim.is-open{opacity:1;pointer-events:auto}
@media (min-width:861px){.iw-scrim{display:none}}
@media (prefers-reduced-motion: reduce){.iw-scrim{transition:none}}
@media (max-width:860px){body.is-menu-open{overflow:hidden}}
@media (max-width:860px){.sh-group + .sh-group{margin-top:18px;padding-top:16px;border-top:1px solid var(--iw-border-lav)}}
@media (max-width:860px){.sh-head{display:flex;align-items:baseline;gap:9px;padding:0 6px 10px}}
@media (max-width:860px){.sh-en{font-family:var(--iw-font-latin);font-size:16px;font-weight:600;letter-spacing:.02em;
    background:linear-gradient(120deg,#7C3AED 0%,#A66BF5 45%,#CA95FF 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent}}
@media (max-width:860px){.sh-ja{font-size:12px;color:var(--iw-ink-muted)}}
@media (max-width:860px){.sh-subs{display:grid;gap:6px}}
@media (max-width:860px){.sh-sub{display:flex;align-items:center;justify-content:space-between;gap:10px;
    padding:12px 14px;border-radius:14px;text-decoration:none;
    font-size:14px;font-weight:700;color:var(--iw-ink);
    background:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.9);
    box-shadow:0 4px 12px rgba(148,95,220,.08);transition:background .2s}}
@media (max-width:860px){a.sh-sub::after{content:"";width:7px;height:7px;flex:none;
    border-right:1.8px solid var(--iw-primary);border-top:1.8px solid var(--iw-primary);transform:rotate(45deg)}}
@media (max-width:860px){a.sh-sub:active{background:rgba(202,149,255,.18)}}
@media (max-width:860px){.sh-sub.is-soon{color:var(--iw-ink-faint);background:rgba(255,255,255,.4);box-shadow:none}}
@media (max-width:860px){.sh-soon{font-size:10px;font-weight:700;color:var(--iw-ink-note);background:var(--iw-track);
    border-radius:999px;padding:3px 8px;margin-left:auto}}
@media (max-width:860px){.sh-foot{margin-top:18px;padding-top:14px;border-top:1px solid var(--iw-border-lav);display:grid;gap:8px}}
@media (max-width:860px){.sh-plain{padding:12px 14px;border-radius:14px;text-decoration:none;font-size:13.5px;color:#5C4A85}}
@media (max-width:860px){.sh-owner{display:flex;align-items:center;justify-content:center;gap:7px;
    padding:13px 14px;border-radius:999px;text-decoration:none;
    font-size:13.5px;font-weight:500;color:#5B21B6;
    background:rgba(255,255,255,.9);border:1px solid rgba(237,227,251,.9);
    box-shadow:inset 0 1px 3px rgba(148,95,220,.1)}}
@media (max-width:860px){.iw-header{z-index:100}}
@media (max-width:860px){.iw-sheet{padding:14px 12px 12px;max-height:calc(100vh - 90px);overflow-y:auto;-webkit-overflow-scrolling:touch}}

/* ============================================================
   暗色テーマ（/business・<x-site-header theme="dark"> / <x-site-footer theme="dark">）
   light 時は一切出力されない修飾クラス .iw-header--dark / .iw-footer--dark でのみ適用。
   色は :root の --bz-* を使う。仕様: /business 基調色パターン4（ミント）
   ============================================================ */
/* --- ヘッダー capsule / ブランド --- */
.iw-header--dark .iw-header__capsule{
  background:var(--bz-surface);
  border-color:var(--bz-border);
  box-shadow:0 8px 28px rgba(0,0,0,.45);
}
.iw-header--dark.iw-header.is-scrolled .iw-header__capsule{background:var(--bz-surface-2)}
.iw-header--dark .iw-header__name{color:var(--bz-text)}
.iw-header--dark .iw-header__latin{color:var(--bz-text-3)}
/* --- ナビリンク（特徴/機能/収録店舗）--- */
.iw-header--dark .iw-header__link{color:var(--bz-text-2)}
.iw-header--dark .iw-header__link:hover,
.iw-header--dark .iw-header__link.is-current{background:rgba(94,234,212,.14);color:var(--bz-text)}
.iw-header--dark .iw-nav-item:hover .mm-trigger,
.iw-header--dark .iw-nav-item:focus-within .mm-trigger{background:rgba(94,234,212,.14);color:var(--bz-text)}
/* --- 店舗オーナー様ボタン（白のまま＝現在地の目印）--- */
.iw-header--dark .iw-header__owner{
  color:#5B21B6;background:#F3EEFF;border-color:rgba(243,238,255,.9);
}
.iw-header--dark .iw-header__owner:hover{background:#FFFFFF}
/* --- ハンバーガー（丸ボタンの地とバー） --- */
.iw-header--dark .iw-header__menu{background:var(--bz-surface-2);border-color:var(--bz-border);box-shadow:none}
.iw-header--dark .iw-header__menu span,
.iw-header--dark .iw-header__menu span::before,
.iw-header--dark .iw-header__menu span::after{background:var(--bz-text)}
/* open 時は真ん中のバーを透明に戻す（×にする）。上のバー色指定（0,2,1）が light の
   [aria-expanded] span{background:transparent}（0,2,1）を後勝ちで打ち消していたため、
   より詳細度の高いこの規則で復元する（光/暗とも×の形は同じ）。 */
.iw-header--dark .iw-header__menu[aria-expanded="true"] span{background:transparent}
/* --- デスクトップ メガメニュー --- */
.iw-header--dark .mm-sheet{background:var(--bz-surface);border:1px solid var(--bz-border)}
.iw-header--dark .mm-en,.iw-header--dark .mm-k{color:var(--bz-text)}
.iw-header--dark .mm-jp,.iw-header--dark .mm-v{color:var(--bz-text-3)}
.iw-header--dark .mm-item{background:var(--bz-surface-2);border-color:var(--bz-border);box-shadow:none}
.iw-header--dark a.mm-item:hover{background:var(--bz-surface-2);border-color:var(--bz-outline);box-shadow:0 16px 34px rgba(0,0,0,.4)}
.iw-header--dark .mm-item:hover{background:rgba(94,234,212,.10)}
.iw-header--dark .mm-soon{background:var(--bz-border);color:var(--bz-text-2)}
.iw-header--dark .mm-ar{border-color:var(--bz-accent)}
/* --- モバイルシート --- */
.iw-header--dark .iw-sheet{
  background:var(--bz-surface);border-color:var(--bz-border);
  box-shadow:0 14px 34px rgba(0,0,0,.5);
}
.iw-header--dark .iw-sheet a{color:var(--bz-text-2)}
.iw-header--dark .iw-sheet a:hover{background:rgba(94,234,212,.12)}
.iw-header--dark .sh-en{color:var(--bz-text)}
.iw-header--dark .sh-ja{color:var(--bz-text-3)}
.iw-header--dark .sh-plain{color:var(--bz-text-2)}
.iw-header--dark .sh-foot{border-top-color:var(--bz-border)}
/* グループ間の区切り線 */
.iw-header--dark .sh-group + .sh-group{border-top-color:var(--bz-border)}
/* 各項目（素・タップ・準備中）。light の白背景・白枠を暗色へ。 */
.iw-header--dark .sh-sub{background:var(--bz-surface-2);border-color:var(--bz-border);color:var(--bz-text);box-shadow:none}
.iw-header--dark a.sh-sub:active{background:var(--bz-surface-2);border-color:var(--bz-outline)}
.iw-header--dark .sh-sub.is-soon{background:var(--bz-surface-2);border-color:var(--bz-border);color:var(--bz-text-3)}
.iw-header--dark a.sh-sub::after{border-color:var(--bz-accent)}
/* 「準備中」ピル */
.iw-header--dark .sh-soon{background:var(--bz-border);color:var(--bz-text-2)}
/* 店舗オーナー様（シート内）はミントのボタンで現在地を示す（白ボタンにしない）。
   色は .iw-header--dark .iw-sheet a（0,2,1）に負けないよう a.sh-owner まで含めて上書きする
   （素の .sh-owner だと文字色が --bz-text-2 に上書きされ、ミント地に淡色で見えづらかった）。 */
.iw-header--dark .iw-sheet a.sh-owner{color:var(--bz-on-accent);font-weight:600;background:var(--bz-accent);border-color:var(--bz-accent);box-shadow:none}
/* --- 下部固定ドック（モバイル）--- */
.iw-header--dark.iw-dock{
  background:var(--bz-surface);border-color:var(--bz-border);
  box-shadow:0 -2px 26px rgba(0,0,0,.5);
}
/* --- オーナーモード（<x-site-header mode="owner">）専用の追加。既存クラスで賄えない
   「for 店舗」ラベルとミント塗り「掲載を申し込む」ボタンだけ最小限に定義する。
   色は lp.css 内で完結する専用変数（--iw-owner-*。実値は :root の --bz-accent/--bz-on-accent と同一）。 --- */
.iw-header--dark{
  --iw-owner-accent:#5EEAD4;
  --iw-owner-on-accent:#053B33;
  --iw-owner-accent-glow:rgba(94,234,212,.28);
}
.iw-header--dark .iw-header__brand-tag{
  font-size:11px;font-weight:600;letter-spacing:.02em;white-space:nowrap;
  color:var(--iw-owner-on-accent);background:var(--iw-owner-accent);
  padding:2px 8px;border-radius:999px;transform:translateY(1px);
}
.iw-header--dark .iw-header__apply{
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;text-decoration:none;
  font-size:13.5px;font-weight:600;
  color:var(--iw-owner-on-accent);background:var(--iw-owner-accent);border:1px solid var(--iw-owner-accent);
  padding:11px 22px;border-radius:999px;margin-left:4px;
  transition:filter .2s,box-shadow .2s;
}
.iw-header--dark .iw-header__apply:hover{filter:brightness(1.06);box-shadow:0 8px 20px var(--iw-owner-accent-glow)}
.iw-header--dark .iw-header__apply:focus-visible{outline:2px solid var(--iw-owner-accent);outline-offset:2px}
/* dock（owner・スマホ）: ログイン=枠線ボタン（flex:1）・掲載を申し込む=ミントのグラデーション（flex:1.4）。
   色は既存変数のみ（--iw-owner-accent #5EEAD4 / --bz-accent-soft #9FF2E4＝business.css :root。
   user ページには __link/__apply が dock に無いため影響なし・フォールバック付き）。 */
.iw-dock.iw-header--dark .iw-header__link{
  flex:1;text-align:center;padding:12px 14px;margin:0;
  border:.5px solid var(--iw-owner-accent);border-radius:999px;
  color:var(--iw-owner-accent);background:transparent;
}
.iw-dock.iw-header--dark .iw-header__apply{
  flex:1.4;justify-content:center;padding:12px 14px;margin:0;
  background:linear-gradient(135deg,var(--iw-owner-accent),var(--bz-accent-soft,#9FF2E4));
}

/* --- フッター（既に暗紫。--bz パレットに寄せる）--- */
.iw-footer--dark{background:linear-gradient(180deg,var(--bz-bg-2) 0%,var(--bz-bg) 100%)}
.iw-footer--dark .iw-footer__glow{background:var(--bz-accent);opacity:.10}
.iw-footer--dark .iw-footer__name{color:var(--bz-text)}
.iw-footer--dark .iw-footer__desc{color:var(--bz-text-3)}
.iw-footer--dark .iw-footer__col-title{color:var(--bz-text-3)}
.iw-footer--dark .iw-footer__link{color:var(--bz-text-2)}
.iw-footer--dark .iw-footer__link:hover{color:var(--bz-text)}
.iw-footer--dark .iw-footer__bottom{border-top-color:var(--bz-border)}
.iw-footer--dark .iw-footer__copy,.iw-footer--dark .iw-footer__place{color:var(--bz-text-3)}

/* ===== site switch（利用者／店舗）===== */
/* 高さは隣接要素に構成で合わせる（実測px固定にしない）：
   PC = track padding3px + opt padding上下8px = 11px が CTA/apply の上下 padding 11px と一致し、
        font-size も 13.5px・line-height 未指定（同一祖先から継承）＝ line-box 同一 → 高さが一致する。
   SP = .iw-seg--sp を 38px 固定でハンバーガー（.iw-header__menu 38px）に合わせ、opt は stretch で充填。 */
.iw-seg{position:relative;display:inline-flex;align-items:stretch;padding:3px;border-radius:999px;background:#F1EEFB;border:.5px solid #E4DFF5;flex-shrink:0}
.iw-seg__opt{position:relative;z-index:1;display:inline-flex;align-items:center;gap:7px;padding:8px 18px;border-radius:999px;font-size:13.5px;font-weight:600;text-decoration:none;color:#8A84B8;white-space:nowrap;transition:color .25s}
.iw-seg__opt.is-on{color:#3C3489}
.iw-seg__ico{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;flex:none}
.iw-seg__knob{position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);border-radius:999px;background:#fff;box-shadow:0 1px 2px rgba(43,33,64,.12);transition:left .45s cubic-bezier(.4,0,.2,1)}
.iw-seg[data-on="owner"] .iw-seg__knob{left:50%}
.iw-header--dark .iw-seg{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14)}
.iw-header--dark .iw-seg__opt{color:rgba(255,255,255,.66)}
.iw-header--dark .iw-seg__opt.is-on{color:var(--iw-owner-on-accent)}
.iw-header--dark .iw-seg__knob{background:var(--iw-owner-accent);box-shadow:none}
.iw-seg--sp{display:none}
@media (max-width:860px){
  .iw-seg--pc{display:none}
  .iw-seg--sp{display:inline-flex;margin-left:auto;height:38px;padding:3px}
  .iw-seg--sp .iw-seg__opt{padding:0 12px;font-size:13px;gap:5px}
  .iw-seg--sp .iw-seg__ico{width:13px;height:13px}
  .iw-header__menu{margin-left:0}
}
.iw-switch-ink{position:fixed;left:0;top:0;width:100vw;height:100vh;z-index:99998;pointer-events:none}
html.is-switch-in::before{content:"";position:fixed;inset:0;z-index:99999;background:var(--iw-switch-bg,#E9E3F9);pointer-events:none;opacity:1;transition:opacity .28s ease}
html.is-switch-in.is-switch-out::before{opacity:0}

/* ===== site switch: narrow SP（<= 374px）はアイコンのみ（実測: <=360 でハンバーガーが capsule を溢れる） ===== */
.iw-header__menu{flex-shrink:0}
@media (max-width:374px){
  .iw-seg--sp .iw-seg__label{display:none}
  .iw-seg--sp .iw-seg__opt{padding:0 11px;gap:0}
  .iw-seg--sp .iw-seg__ico{display:block;width:15px;height:15px}
}

/* ============================================================
   features: Apple 型ステージ（#ftStage）
   器＝.iw-stage。選択中（is-open）で端末が寄り、矢印/×が現れる。
   選択中の機能は data-feat で glow--a の色が変わる。
   ============================================================ */
.iw-stage{position:relative;overflow:hidden}
.iw-stage .iw-features__grid{position:relative;z-index:1}
.iw-stage__glow{position:absolute;border-radius:50%;pointer-events:none;z-index:0}
/* 主 1（--a・端末背後中央）＋副 2（--b 左下ピンク／--c 右上水色）の重ね。色替えは --a のみ */
.iw-stage__glow--a{background:#C9A8FF;transition:background-color .8s ease}
.iw-stage__glow--b{background:#FFD0E8}
.iw-stage__glow--c{background:#B8E8FF}
#ftStage[data-feat="search"] .iw-stage__glow--a{background:#A8C5F0}
#ftStage[data-feat="store"]  .iw-stage__glow--a{background:#CA95FF}
#ftStage[data-feat="coupon"] .iw-stage__glow--a{background:#E9B3E0}
#ftStage[data-feat="notify"] .iw-stage__glow--a{background:#B9A3F5}
.iw-stage__nav,.iw-stage__close{position:absolute;z-index:4;width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.92);color:var(--iw-ink-soft);box-shadow:0 8px 22px rgba(43,33,64,.16);display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .3s,color .2s}
.iw-stage__nav svg,.iw-stage__close svg{width:18px;height:18px}
.iw-stage.is-open .iw-stage__nav,.iw-stage.is-open .iw-stage__close{opacity:1;pointer-events:auto}
.iw-stage__nav:hover,.iw-stage__close:hover{color:var(--iw-action)}
@media (min-width:881px){
  .iw-stage{--iw-devw:clamp(560px,52vw,760px);margin-top:32px;border-radius:28px;padding:0 0 0 96px;background:linear-gradient(135deg,#F8F3FF 0%,#EADCFF 50%,#FBEEFB 100%);box-shadow:inset 0 0 0 .5px rgba(43,33,64,.06)}
  /* オーラ 3 灯：位置は端末（幅 --iw-devw・器の右端に接する・上端≈器+6px）の中心基準 */
  .iw-stage__glow--a{width:calc(var(--iw-devw)*1.15);aspect-ratio:1;right:calc(var(--iw-devw)*-0.075);top:-5%;opacity:.42;filter:blur(64px)}
  .iw-stage__glow--b{width:calc(var(--iw-devw)*0.7);aspect-ratio:1;right:calc(var(--iw-devw)*0.4);top:calc(var(--iw-devw)*0.35);opacity:.38;filter:blur(56px)}
  .iw-stage__glow--c{width:calc(var(--iw-devw)*0.55);aspect-ratio:1;right:calc(var(--iw-devw)*0.025);top:calc(var(--iw-devw)*0.045);opacity:.30;filter:blur(56px)}
  /* ピル列は器の左 padding 直後に寄せ、端末は残り幅の右端へ（既定の中央寄せ 2 カラムを上書き） */
  .iw-stage .iw-features__grid{grid-template-columns:max-content minmax(0,1fr);justify-content:stretch;gap:clamp(32px,6vw,110px)}
  /* 透過 PNG の余白を吸収：絵柄（lp-home 実測 上30/1080・下0）の上下が器の縁から約 24px */
  .iw-stage .iw-viz{justify-self:end;align-self:center;margin:-28px 0 24px}
  .iw-stage__nav--prev{left:36px;top:44px}
  .iw-stage__nav--next{left:36px;top:92px}
  .iw-stage__close{right:20px;top:20px}
}
@media (max-width:880px){
  /* SP は元の骨格（端末→ピル→パネルの通常フロー）。器は透明・glow/矢印/× なし */
  /* 縦は切らない（オーラの上下見切れ防止）。横は clip（visible+clip は両立可・28.124 例外） */
  .iw-stage{border-radius:0;padding:0;margin:0 calc(-1 * var(--iw-pad-x));background:none;overflow-x:clip;overflow-y:visible}
  /* オーラは SP でも表示（PC より一段薄く）。端末は中央寄せ（上端≈器+24px・幅 --iw-devw）なので
     50%（器＝画面幅）基準で端末中心に合わせる。はみ出しは overflow:hidden で切れる */
  .iw-stage{--iw-devw:clamp(560px,52vw,760px)}
  /* --a の top は端末上端 −2%（−7.5% だと見出しの下まで伸びて直線で切れて見える） */
  .iw-stage__glow--a{width:calc(var(--iw-devw)*1.15);aspect-ratio:1;right:calc(50% - var(--iw-devw)*0.575);top:calc(24px - var(--iw-devw)*0.02);opacity:.32;filter:blur(64px)}
  .iw-stage__glow--b{width:calc(var(--iw-devw)*0.7);aspect-ratio:1;right:calc(50% - var(--iw-devw)*0.1);top:calc(24px + var(--iw-devw)*0.35);opacity:.28;filter:blur(56px)}
  .iw-stage__glow--c{width:calc(var(--iw-devw)*0.55);aspect-ratio:1;right:calc(50% - var(--iw-devw)*0.475);top:calc(24px + var(--iw-devw)*0.045);opacity:.22;filter:blur(56px)}
  .iw-stage:not(.is-open) .iw-stage__nav,
  .iw-stage:not(.is-open) .iw-stage__close{display:none}
  /* 説明が開いている間はピル行を高さごと消す（× で閉じると戻る） */
  .iw-stage.is-open .iw-tabs{display:none}
  /* 透過 PNG の下余白を吸収して端末とピル行の間を 12px に（実測で調整） */
  .iw-stage .iw-viz{margin-bottom:-21px}
  .iw-stage .iw-tabs{padding:2px var(--iw-pad-x) 6px}
  /* ＜ 説明カード ＞：カードは画面端から 36px、矢印はその外側（画面端 4px）に absolute で重ねる。
     矢印は JS が SP のとき #ftPanel 内へ移す。影は元の .iw-panel のまま。
     margin-top 0：is-open ではピル行が消えるため、端末→カード 12px は .iw-viz の負 margin だけで決まる
     （透過下余白は最小 0%＝lp-home/search 基準。店舗情報系は +4〜5% ぶん空くが許容） */
  .iw-stage .iw-tabs__panelbox{position:relative;margin:0}
  .iw-stage .iw-tabs__panelbox .iw-panel{margin:0 36px}
  .iw-stage .iw-tabs__panelbox .iw-stage__nav{position:absolute;top:50%;transform:translateY(-50%);width:34px;height:34px;box-shadow:0 6px 16px rgba(43,33,64,.12)}
  .iw-stage .iw-tabs__panelbox .iw-stage__nav--prev{left:4px}
  .iw-stage .iw-tabs__panelbox .iw-stage__nav--next{right:4px}
  /* × は器の右上（端末の右上に重なる位置）。PC と同じ absolute 扱い */
  .iw-stage__close{right:12px;top:12px}
  .iw-stage__nav svg{transform:rotate(-90deg)}
}
@media (prefers-reduced-motion:reduce){
  .iw-stage__nav,.iw-stage__close,.iw-stage__glow--a{transition:none}
}