/**
 * wannya メインスタイルシート v2.0
 *
 * デザイントークンベースの完全リニューアル版
 */

/* ══════════════════════════════════════
   TOKENS
══════════════════════════════════════ */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html{scroll-behavior:smooth;}
:root{
  --or:    #F4742A;
  --or-d:  #C95B18;
  --or-l:  #FFF2E8;
  --or-m:  #FDDCC0;
  --or-g:  linear-gradient(135deg,#F4742A,#F9A45C);
  --gr:    #2EA66A;
  --gr-l:  #E8F8EF;
  --gr-d:  #1A7848;
  --bl:    #3F88E4;
  --bl-l:  #EAF2FD;
  --bl-d:  #1F5CAA;
  --pe:    #F6BE5A;
  --ink:   #181818;
  --ink2:  #262626;
  --mid:   #555;
  --soft:  #888;
  --bdr:   #E6E6E6;
  --bdr2:  #F2F2F2;
  --bg:    #FAFAF9;
  --wh:    #FFFFFF;
  --cream: #FFFBF7;
  --nav:   60px;
  --rad:   14px;
  --sha:   0 2px 16px rgba(0,0,0,.07);
  --sha-h: 0 8px 32px rgba(0,0,0,.13);

  /* ── デザインシステム追加トークン v3.0 ── */

  /* サーフェス */
  --surface-1: #F5F4F2;
  --surface-2: #EDECEA;
  --surface-dark: #1C1917;
  --surface-dark-2: #292524;

  /* オレンジ拡張 */
  --or-pale:  #FEF3EB;
  --or-g2:    linear-gradient(135deg, #F4742A 0%, #FF9A5C 50%, #FFB870 100%);
  --or-g-h:   linear-gradient(135deg, #E06520 0%, #F4742A 100%);
  --or-mesh:  radial-gradient(ellipse at 20% 50%, rgba(244,116,42,.18) 0%, transparent 60%),
              radial-gradient(ellipse at 80% 20%, rgba(255,154,92,.14) 0%, transparent 50%),
              radial-gradient(ellipse at 60% 80%, rgba(244,116,42,.10) 0%, transparent 50%);

  /* テキスト階層 */
  --ink-2: #4A4845;
  --ink-3: #7A7875;
  --ink-inv: #FFFFFF;
  --ink-inv-2: rgba(255,255,255,.72);

  /* 角丸スケール */
  --rad-sm:   8px;
  --rad-lg:   16px;
  --rad-xl:   24px;
  --rad-2xl:  32px;
  --rad-full: 9999px;

  /* シャドウ拡張 */
  --sha-sm:    0 1px 4px rgba(0,0,0,.06);
  --sha-md:    0 4px 20px rgba(0,0,0,.09);
  --sha-xl:    0 16px 48px rgba(0,0,0,.16);
  --sha-or:    0 8px 24px rgba(244,116,42,.28);
  --sha-or-h:  0 12px 36px rgba(244,116,42,.40);
  --sha-glass: 0 8px 32px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.6);

  /* トランジション */
  --t-fast:   all .15s cubic-bezier(.4,0,.2,1);
  --t-base:   all .25s cubic-bezier(.4,0,.2,1);
  --t-slow:   all .45s cubic-bezier(.4,0,.2,1);
  --t-spring: all .35s cubic-bezier(.34,1.56,.64,1);
  --t-ease:   all .3s ease;

  /* グラデーション汎用 */
  --g-brand:   linear-gradient(135deg, #F4742A 0%, #FF9A5C 100%);
  --g-green:   linear-gradient(135deg, #2EA66A 0%, #56C88A 100%);
  --g-blue:    linear-gradient(135deg, #3F88E4 0%, #6BADF5 100%);
  --g-dark:    linear-gradient(135deg, #1C1917 0%, #292524 100%);
  --g-warm:    linear-gradient(160deg, #FFFBF7 0%, #FFF2E8 50%, #FDDCC0 100%);
  --g-subtle:  linear-gradient(160deg, #FFFFFF 0%, #F5F4F2 100%);

  /* グラスモーフィズム */
  --glass-bg:     rgba(255,255,255,.55);
  --glass-bg-d:   rgba(255,255,255,.12);
  --glass-border: rgba(255,255,255,.70);
  --glass-blur:   blur(20px) saturate(180%);

  /* スペーシング */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* タイポグラフィスケール */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   17px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  32px;
  --text-3xl:  40px;
  --text-4xl:  52px;
  --text-5xl:  68px;

  /* アニメーション時間 */
  --dur-fast:   150ms;
  --dur-base:   250ms;
  --dur-slow:   450ms;
  --dur-xslow:  700ms;

  /* Z-index スタック */
  --z-base:    1;
  --z-float:   10;
  --z-overlay: 100;
  --z-modal:   500;
  --z-nav:     900;
  --z-toast:   9999;

  /* 最大幅 */
  --container-sm:  640px;
  --container-md:  900px;
  --container:    1160px;
  --container-lg: 1320px;
}
body{
  font-family:'Noto Sans JP',sans-serif;
  background:var(--bg);color:var(--ink);
  overflow-x:hidden;line-height:1.65;font-size:14px;
}
a{text-decoration:none;color:inherit;}
button{font-family:inherit;cursor:pointer;border:none;background:none;}
img{display:block;max-width:100%;}

/* ══════════════════════════════════════
   KEYFRAMES
══════════════════════════════════════ */
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes slideIn{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}}

/* placeholder shimmer */
.ph{background:#E8E8E8;position:relative;overflow:hidden;}
.ph::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,#E8E8E8 25%,#D4D4D4 50%,#E8E8E8 75%);
  background-size:300% 100%;animation:shimmer 1.6s ease infinite;
}

/* ══════════════════════════════════════
   NAV
══════════════════════════════════════ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:900;
  height:var(--nav);
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(0,0,0,.06);
  display:flex;align-items:center;
  padding:0 28px;gap:16px;
  transition:box-shadow .3s;
}
.nav.scrolled{box-shadow:0 4px 24px rgba(0,0,0,.08);}
.nav-logo{
  font-family:'Outfit',sans-serif;
  font-size:24px;font-weight:800;
  color:var(--or);white-space:nowrap;flex-shrink:0;
  letter-spacing:-.03em;
}
.nav-logo span{color:var(--ink);}
/* ヘッダーメインメニュー */
.nav-menu{flex:1;display:flex;align-items:center;padding:0 16px;}
.nav-menu-list{display:flex;gap:2px;list-style:none;margin:0;padding:0;}
.nav-link{
  font-size:13px;font-weight:600;color:var(--mid);
  padding:6px 12px;border-radius:8px;white-space:nowrap;
  transition:color .2s,background .2s;
}
.nav-link:hover,.nav-link.active{color:var(--or);background:var(--or-l);}
.nav-r{margin-left:auto;display:flex;gap:8px;flex-shrink:0;}
.nav-btn{
  height:36px;padding:0 18px;border-radius:18px;
  font-size:13px;font-weight:700;transition:all .2s;white-space:nowrap;
  display:inline-flex;align-items:center;
}
.nb-ghost{color:var(--or);border:1.5px solid var(--or);}
.nb-ghost:hover{background:var(--or-l);}
.nb-fill{background:var(--or-g);color:#fff;box-shadow:0 3px 12px rgba(244,116,42,.35);}
.nb-fill:hover{box-shadow:0 5px 18px rgba(244,116,42,.45);transform:translateY(-1px);}
/* ─── Hamburger ─── */
.nav-ham{
  display:none;flex-direction:column;justify-content:center;align-items:center;
  gap:5px;width:40px;height:40px;border-radius:10px;
  cursor:pointer;background:none;border:none;padding:0;
  margin-left:auto;flex-shrink:0;transition:background .2s;
}
.nav-ham:hover{background:var(--or-l);}
.nav-ham span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;transition:transform .3s,opacity .3s;}
.nav-ham.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-ham.open span:nth-child(2){opacity:0;transform:scaleX(0);}
.nav-ham.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
@media(max-width:860px){
  .nav-menu{display:none;}
  .nav-ham{display:flex;}
  .nav-r{display:none;}
}
@media(max-width:520px){.nav{padding:0 16px;}}

/* ─── Ham Drawer ─── */
.ham-drawer{
  position:fixed;top:var(--nav);right:-100%;
  width:min(320px,85vw);height:calc(100dvh - var(--nav));
  background:#fff;z-index:850;overflow-y:auto;
  padding:20px 18px;transition:right .35s cubic-bezier(.4,0,.2,1);
  box-shadow:-4px 0 30px rgba(0,0,0,.12);
  display:flex;flex-direction:column;gap:4px;
}
.ham-drawer.open{right:0;}
.ham-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.42);
  z-index:840;opacity:0;pointer-events:none;
  transition:opacity .3s;backdrop-filter:blur(2px);
}
.ham-overlay.open{opacity:1;pointer-events:all;}
.ham-link{
  display:block;padding:13px 14px;font-size:15px;font-weight:600;
  color:var(--ink);border-radius:12px;transition:background .2s,color .2s;
}
.ham-link:hover{background:var(--or-l);color:var(--or);}
.ham-sep{height:1px;background:var(--bdr);margin:8px 0;}
.ham-btns{margin-top:auto;padding-top:16px;display:flex;flex-direction:column;gap:8px;}
.ham-btn{
  width:100%;padding:13px;border-radius:12px;
  font-size:14px;font-weight:700;text-align:center;transition:all .2s;
}
.ham-btn-ghost{border:1.5px solid var(--or);color:var(--or);background:none;}
.ham-btn-ghost:hover{background:var(--or-l);}
.ham-btn-fill{background:var(--or-g);color:#fff;border:none;box-shadow:0 4px 14px rgba(244,116,42,.3);}
.ham-btn-fill:hover{box-shadow:0 6px 20px rgba(244,116,42,.4);}

/* ══════════════════════════════════════
   HERO
══════════════════════════════════════ */
.hero{
  margin-top:var(--nav);
  position:relative;overflow:hidden;
  height:clamp(400px,52vw,540px);
}
.slides{position:relative;width:100%;height:100%;}
.slide{
  position:absolute;inset:0;opacity:0;
  transition:opacity .7s cubic-bezier(.4,0,.2,1);
  pointer-events:none;
  display:grid;grid-template-columns:1fr 1fr;
}
.slide.active{opacity:1;pointer-events:auto;}

.s1{background:linear-gradient(145deg,#FFF5EC 0%,#FFE2C4 55%,#FFDAAD 100%);}
.s2{background:linear-gradient(145deg,#EBF5FF 0%,#D2E9FF 55%,#C4DEFF 100%);}
.s3{background:linear-gradient(145deg,#EDFBF3 0%,#D1F0E2 55%,#C3EDD8 100%);}

.slide::before{
  content:'';position:absolute;
  right:-120px;bottom:-80px;
  width:500px;height:500px;border-radius:50%;
  opacity:.18;pointer-events:none;
  transition:opacity .6s;
}
.s1::before{background:radial-gradient(circle,#F4742A,transparent 70%);}
.s2::before{background:radial-gradient(circle,#3F88E4,transparent 70%);}
.s3::before{background:radial-gradient(circle,#2EA66A,transparent 70%);}

.sl-left{
  display:flex;flex-direction:column;justify-content:center;
  padding:44px clamp(20px,4.5vw,80px);
  position:relative;z-index:2;
}
.sl-eyebrow{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 14px;border-radius:20px;
  font-size:11px;font-weight:700;letter-spacing:.04em;
  margin-bottom:18px;width:fit-content;
  border:1.5px solid;
}
.s1 .sl-eyebrow{background:rgba(244,116,42,.1);color:var(--or-d);border-color:rgba(244,116,42,.2);}
.s2 .sl-eyebrow{background:rgba(63,136,228,.1);color:var(--bl-d);border-color:rgba(63,136,228,.2);}
.s3 .sl-eyebrow{background:rgba(46,166,106,.1);color:var(--gr-d);border-color:rgba(46,166,106,.2);}

.sl-h1{
  font-family:'Noto Serif JP',serif;
  font-size:clamp(24px,3.4vw,46px);
  font-weight:400;line-height:1.5;margin-bottom:14px;
  color:var(--ink);
}
.sl-h1 strong{font-weight:700;display:inline;}
.s1 .sl-h1 strong{color:var(--or);}
.s2 .sl-h1 strong{color:var(--bl);}
.s3 .sl-h1 strong{color:var(--gr);}

.sl-p{
  font-size:clamp(13px,1.4vw,15px);color:var(--mid);
  line-height:1.9;margin-bottom:28px;font-weight:300;
}
.sl-acts{display:flex;gap:10px;flex-wrap:wrap;}

.sbtn{
  height:46px;padding:0 26px;border-radius:10px;
  font-size:14px;font-weight:700;transition:all .22s;
  white-space:nowrap;display:inline-flex;align-items:center;gap:7px;
}
.sf{background:var(--or-g);color:#fff;box-shadow:0 4px 16px rgba(244,116,42,.38);}
.sf:hover{transform:translateY(-2px);box-shadow:0 7px 22px rgba(244,116,42,.45);}
.sf.bl{background:linear-gradient(135deg,#3F88E4,#6AADF5);box-shadow:0 4px 16px rgba(63,136,228,.35);}
.sf.bl:hover{transform:translateY(-2px);box-shadow:0 7px 22px rgba(63,136,228,.45);}
.sf.gr{background:linear-gradient(135deg,#2EA66A,#4EC98A);box-shadow:0 4px 16px rgba(46,166,106,.35);}
.sf.gr:hover{transform:translateY(-2px);box-shadow:0 7px 22px rgba(46,166,106,.45);}

.sg{
  height:46px;padding:0 24px;border-radius:10px;
  font-size:14px;font-weight:700;background:rgba(255,255,255,.6);
  backdrop-filter:blur(8px);border:1.5px solid;
  transition:all .22s;white-space:nowrap;
  display:inline-flex;align-items:center;
}
.sg.or{color:var(--or);border-color:rgba(244,116,42,.4);}
.sg.or:hover{background:rgba(255,255,255,.9);border-color:var(--or);}
.sg.bl{color:var(--bl);border-color:rgba(63,136,228,.4);}
.sg.bl:hover{background:rgba(255,255,255,.9);border-color:var(--bl);}
.sg.gr{color:var(--gr);border-color:rgba(46,166,106,.4);}
.sg.gr:hover{background:rgba(255,255,255,.9);border-color:var(--gr);}

.sl-right{
  position:relative;display:flex;align-items:center;
  justify-content:center;overflow:hidden;padding:24px;z-index:1;
}
.hmain{
  width:clamp(155px,20vw,260px);height:clamp(195px,26vw,325px);
  border-radius:18px;box-shadow:0 20px 56px rgba(0,0,0,.15);
  z-index:3;position:relative;animation:float 4s ease-in-out infinite;overflow:hidden;
}
.hmain.s1-img{background:linear-gradient(160deg,#FFD4A8,#F4A56A,#E8835A);}
.hmain.s2-img{background:linear-gradient(160deg,#BFD9FF,#85B8F5,#5A99E8);}
.hmain.s3-img{background:linear-gradient(160deg,#AAEBC8,#68CC96,#3AAA6E);}
.hmain-inner{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  font-size:clamp(48px,8vw,80px);filter:drop-shadow(0 4px 12px rgba(0,0,0,.15));
}
.hsub{
  position:absolute;border-radius:14px;
  box-shadow:0 10px 28px rgba(0,0,0,.12);z-index:2;overflow:hidden;
}
.hsub.tl{
  width:clamp(90px,11vw,142px);height:clamp(112px,14vw,178px);
  top:11%;left:5%;animation:float 4s ease-in-out infinite;animation-delay:.8s;
}
.hsub.br{
  width:clamp(90px,11vw,142px);height:clamp(112px,14vw,178px);
  bottom:8%;right:4%;animation:float 4s ease-in-out infinite;animation-delay:1.6s;
}
.hsub.s1-tl{background:linear-gradient(160deg,#FDE8D0,#F9C494);}
.hsub.s1-br{background:linear-gradient(160deg,#FFF0E0,#FAD4A4);}
.hsub.s2-tl{background:linear-gradient(160deg,#D8EEFF,#A4CCFA);}
.hsub.s2-br{background:linear-gradient(160deg,#E8F3FF,#B8D8FF);}
.hsub.s3-tl{background:linear-gradient(160deg,#C8F0DC,#8EDAB0);}
.hsub.s3-br{background:linear-gradient(160deg,#D8F5E8,#A4E8C0);}
.hsub-inner{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  font-size:clamp(28px,4.5vw,44px);
}

.h-dots{
  position:absolute;bottom:16px;left:50%;transform:translateX(-50%);
  display:flex;gap:7px;z-index:10;
}
.h-dot{
  width:8px;height:8px;border-radius:5px;border:none;padding:0;
  background:rgba(0,0,0,.2);cursor:pointer;
  transition:all .35s cubic-bezier(.4,0,.2,1);
}
.h-dot.active{width:24px;background:var(--or);}
.h-arr{
  position:absolute;top:50%;transform:translateY(-50%);z-index:10;
  width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,.85);backdrop-filter:blur(10px);
  border:1px solid rgba(0,0,0,.08);
  display:flex;align-items:center;justify-content:center;
  font-size:18px;color:var(--ink);
  box-shadow:0 2px 12px rgba(0,0,0,.1);cursor:pointer;transition:all .2s;
}
.h-arr:hover{background:#fff;box-shadow:0 4px 20px rgba(0,0,0,.15);transform:translateY(calc(-50% - 1px));}
.h-arr.prev{left:14px;}
.h-arr.next{right:14px;}

@media(max-width:680px){
  .hero{height:auto;}
  .slides{height:auto;}
  .slide{position:relative;opacity:1;pointer-events:auto;display:none;grid-template-columns:1fr;}
  .slide.active{display:flex;flex-direction:column;}
  .sl-right{order:-1;height:200px;padding:16px;}
  .hmain{width:115px;height:148px;border-radius:14px;}
  .hsub.tl{width:75px;height:95px;top:6%;left:6%;}
  .hsub.br{width:75px;height:95px;bottom:5%;right:5%;}
  .sl-left{padding:20px 20px 28px;}
  .sl-eyebrow{font-size:10px;padding:4px 11px;margin-bottom:12px;}
  .sl-h1{font-size:26px;margin-bottom:10px;}
  .sl-p{font-size:13px;margin-bottom:20px;}
  .sl-acts{flex-direction:column;gap:9px;}
  .sbtn,.sg{height:50px;font-size:15px;width:100%;justify-content:center;}
  .h-arr{display:none;}
  .h-dots{bottom:10px;}
}

/* ══════════════════════════════════════
   PLATFORM STRIPE
══════════════════════════════════════ */
.pstripe{
  background:var(--ink2);display:flex;align-items:stretch;
  position:relative;overflow:hidden;
}
.pstripe::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(244,116,42,.08),rgba(63,136,228,.08),rgba(46,166,106,.08));
  pointer-events:none;
}
.psi{
  flex:1;display:flex;align-items:center;justify-content:center;gap:11px;
  padding:14px 16px;border-right:1px solid rgba(255,255,255,.07);
  cursor:pointer;transition:background .22s;position:relative;z-index:1;color:#fff;
}
.psi:last-child{border-right:none;}
.psi-icon{font-size:18px;flex-shrink:0;}
.psi-name{font-size:13px;font-weight:700;}
.psi-desc{font-size:10px;opacity:.45;margin-top:1px;}
.psi-arr{font-size:12px;opacity:.3;margin-left:auto;flex-shrink:0;transition:transform .2s,opacity .2s;}
.psi.br .psi-name{color:#FFB87A;}
.psi.sp .psi-name{color:#7EBFFF;}
.psi.sh .psi-name{color:#6EDDAA;}
.psi.br:hover{background:rgba(244,116,42,.12);}
.psi.sp:hover{background:rgba(63,136,228,.12);}
.psi.sh:hover{background:rgba(46,166,106,.12);}
.psi:hover .psi-arr{transform:translateX(4px);opacity:.6;}
@media(max-width:600px){
  .psi-desc{display:none;}.psi{padding:11px 10px;gap:8px;}
  .psi-name{font-size:11px;}.psi-icon{font-size:16px;}
}


/* ══════════════════════════════════════
   LAYOUT
══════════════════════════════════════ */
.wrap{max-width:1120px;margin:0 auto;padding:24px 20px;}
@media(max-width:640px){.wrap{padding:14px 12px;}}

/* ══════════════════════════════════════
   BLOCK
══════════════════════════════════════ */
.block{
  background:var(--wh);border-radius:18px;
  border:1px solid var(--bdr);padding:22px;margin-bottom:20px;
  box-shadow:0 1px 8px rgba(0,0,0,.04);transition:box-shadow .2s;
}
@media(max-width:640px){.block{padding:16px 14px;margin-bottom:14px;border-radius:14px;}}

.sec-hdr{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:16px;gap:12px;flex-wrap:wrap;
}
.sec-l{display:flex;align-items:center;gap:10px;}
.sec-title{
  font-size:20px;font-weight:800;letter-spacing:-.02em;
  color:var(--ink);line-height:1.3;
  display:flex;align-items:center;gap:10px;
}
.sec-title::before{
  content:'';display:inline-block;flex-shrink:0;
  width:5px;height:1.25em;
  background:var(--or-g);border-radius:3px;
}
.sec-more{
  font-size:13px;font-weight:600;color:var(--or);
  white-space:nowrap;display:flex;align-items:center;gap:3px;transition:gap .2s;
}
.sec-more:hover{gap:6px;}
.sec-more::after{content:'\203A';}

/* ══════════════════════════════════════
   FILTER PILLS
══════════════════════════════════════ */
.type-pills{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:16px;}
.tpill{
  display:flex;align-items:center;gap:5px;
  padding:6px 15px;border-radius:20px;font-size:12px;font-weight:600;
  border:1.5px solid var(--bdr);color:var(--mid);
  cursor:pointer;transition:all .2s;white-space:nowrap;background:var(--wh);
}
.tpill:hover:not(.active){border-color:var(--or);color:var(--or);background:var(--or-l);}
.tpill.all.active{background:var(--ink);color:#fff;border-color:var(--ink);}
.tpill.br.active{background:var(--or-g);color:#fff;border-color:var(--or);}
.tpill.sp.active{background:linear-gradient(135deg,#3F88E4,#6AADF5);color:#fff;border-color:var(--bl);}
.tpill.sh.active{background:linear-gradient(135deg,#2EA66A,#4EC98A);color:#fff;border-color:var(--gr);}
@media(max-width:640px){
  .tpill{padding:5px 12px;font-size:11px;}
  .type-pills{gap:5px;margin-bottom:12px;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px;}
  .type-pills::-webkit-scrollbar{display:none;}
}

/* ══════════════════════════════════════
   SEARCH BOX
══════════════════════════════════════ */
.sbox{
  background:var(--wh);border-radius:18px;
  border:1px solid var(--bdr);padding:20px 22px 18px;
  margin-bottom:20px;box-shadow:0 1px 8px rgba(0,0,0,.04);
}
.sbox-title{
  font-family:'Outfit',sans-serif;
  font-size:14px;font-weight:700;margin-bottom:16px;
  display:flex;align-items:center;gap:7px;color:var(--ink);
}
.sbox-title em{color:var(--or);font-style:normal;font-size:13px;font-weight:600;}
.sbox-grid{
  display:grid;grid-template-columns:1fr 1fr 1fr 1fr;
  gap:10px;margin-bottom:14px;
}
.sf-lbl{
  font-size:10px;font-weight:700;color:var(--soft);
  letter-spacing:.06em;margin-bottom:5px;text-transform:uppercase;
}
.sf-sel{
  width:100%;height:44px;background:var(--bg);
  border:1.5px solid var(--bdr);border-radius:10px;
  padding:0 34px 0 12px;font-size:13px;color:var(--ink);font-family:inherit;
  cursor:pointer;transition:border-color .2s,box-shadow .2s;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;
}
.sf-sel:focus{outline:none;border-color:var(--or);box-shadow:0 0 0 3px rgba(244,116,42,.1);}
.sbox-bottom{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.sbox-qtags{display:flex;gap:7px;flex-wrap:wrap;flex:1;}
.qtag{
  padding:6px 13px;border-radius:20px;font-size:12px;font-weight:600;
  border:1.5px solid var(--bdr);color:var(--mid);
  cursor:pointer;transition:all .2s;white-space:nowrap;background:var(--wh);
}
.qtag.active{background:var(--or-l);color:var(--or-d);border-color:var(--or-m);}
.qtag:hover:not(.active){border-color:var(--or);color:var(--or);}
.sbox-btn{
  height:46px;padding:0 32px;background:var(--or-g);color:#fff;
  border-radius:10px;font-size:14px;font-weight:700;
  flex-shrink:0;transition:all .22s;
  box-shadow:0 4px 14px rgba(244,116,42,.32);
  display:flex;align-items:center;gap:8px;font-family:'Outfit',sans-serif;
}
.sbox-btn:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(244,116,42,.42);}
@media(max-width:900px){.sbox-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:600px){
  .sbox{padding:16px 14px;}
  .sbox-grid{grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px;}
  .sf-sel{height:42px;font-size:12px;}
  .sbox-bottom{flex-direction:column;align-items:stretch;gap:10px;}
  .sbox-qtags{gap:5px;}
  .qtag{padding:5px 11px;font-size:11px;}
  .sbox-btn{height:48px;justify-content:center;font-size:15px;}
}
@media(max-width:400px){.sbox-grid{grid-template-columns:1fr;}}

/* 検索セクション余白調整 */
.search-section,.sbox-wrap{margin:0;padding:32px 16px;}
.sbox{border-radius:14px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.08);}

/* ══════════════════════════════════════
   PET CARDS
══════════════════════════════════════ */
.cg5{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;}
.cg4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
@media(max-width:1060px){.cg5{grid-template-columns:repeat(4,1fr);}}
@media(max-width:840px){.cg5,.cg4{grid-template-columns:repeat(3,1fr);}}
@media(max-width:600px){.cg5,.cg4{grid-template-columns:repeat(2,1fr);gap:9px;}}
@media(max-width:360px){.cg5,.cg4{grid-template-columns:1fr;}}

/* ══════════════════════════════════════
   BREED SCROLL
══════════════════════════════════════ */
.breed-row{
  display:flex;gap:14px;overflow-x:auto;
  padding-bottom:8px;scrollbar-width:none;
}
.breed-row::-webkit-scrollbar{display:none;}
.bchip{
  flex-shrink:0;display:flex;flex-direction:column;
  align-items:center;gap:7px;cursor:pointer;transition:transform .22s;
}
.bchip:hover{transform:translateY(-4px);}
.bcircle{
  width:68px;height:68px;border-radius:50%;
  border:3px solid var(--bdr);transition:all .22s;
  overflow:hidden;position:relative;
  display:flex;align-items:center;justify-content:center;font-size:28px;
}
.bchip:not(.active) .bcircle{background:var(--bdr2);}
.bchip.active .bcircle{
  border-color:var(--or);background:var(--or-l);
  box-shadow:0 4px 12px rgba(244,116,42,.25);
}
.bname{font-size:10px;font-weight:600;color:var(--soft);white-space:nowrap;transition:color .2s;}
.bchip.active .bname{color:var(--or);font-weight:700;}
@media(max-width:480px){.bcircle{width:56px;height:56px;font-size:22px;}.bname{font-size:9px;}}

/* ══════════════════════════════════════
   PLATFORM 3-WAY BANNER
══════════════════════════════════════ */
.pb{
  background:var(--cream);border-radius:18px;
  border:1px solid rgba(244,116,42,.12);
  padding:26px 24px;margin-bottom:20px;
  position:relative;overflow:hidden;
}
.pb::before{
  content:'';position:absolute;top:-60px;right:-60px;
  width:300px;height:300px;border-radius:50%;
  background:radial-gradient(circle,rgba(244,116,42,.07),transparent 70%);pointer-events:none;
}
.pb-head{margin-bottom:20px;}
.pb-title{
  font-family:'Outfit',sans-serif;
  font-size:19px;font-weight:700;margin-bottom:5px;letter-spacing:-.02em;
}
.pb-sub{font-size:13px;color:var(--mid);line-height:1.7;}
.pb-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
@media(max-width:768px){
  .pb-cards{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:6px;}
  .pb-cards::-webkit-scrollbar{display:none;}
  .pbc{flex:0 0 270px;scroll-snap-align:start;}
  .pb{padding:18px 16px;}
}

.pbc{
  border-radius:14px;padding:20px 18px;cursor:pointer;transition:all .25s;
  position:relative;overflow:hidden;border:2px solid transparent;
}
.pbc:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(0,0,0,.1);}
.pbc-or{background:linear-gradient(145deg,#FFF5EC,#FFE5CC);}
.pbc-bl{background:linear-gradient(145deg,#EBF5FF,#D2E8FF);}
.pbc-gr{background:linear-gradient(145deg,#EDFBF3,#D1F0E2);}
.pbc:hover.pbc-or{border-color:rgba(244,116,42,.35);}
.pbc:hover.pbc-bl{border-color:rgba(63,136,228,.35);}
.pbc:hover.pbc-gr{border-color:rgba(46,166,106,.35);}
.pbc-icon{font-size:30px;margin-bottom:10px;}
.pbc-name{font-family:'Outfit',sans-serif;font-size:16px;font-weight:700;margin-bottom:6px;}
.pbc-or .pbc-name{color:var(--or-d);}
.pbc-bl .pbc-name{color:var(--bl-d);}
.pbc-gr .pbc-name{color:var(--gr-d);}
.pbc-desc{font-size:12px;color:var(--mid);line-height:1.7;margin-bottom:13px;}
.pbc-features{display:flex;flex-direction:column;gap:6px;margin-bottom:15px;}
.pbcf{font-size:11px;color:var(--mid);display:flex;align-items:flex-start;gap:7px;line-height:1.5;}
.pbcf-dot{
  width:16px;height:16px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:9px;color:#fff;font-weight:700;
}
.pbc-or .pbcf-dot{background:var(--or);}
.pbc-bl .pbcf-dot{background:var(--bl);}
.pbc-gr .pbcf-dot{background:var(--gr);}
.pbc-cta{
  height:38px;border-radius:9px;font-size:13px;font-weight:700;
  display:flex;align-items:center;justify-content:center;gap:5px;
  transition:all .22s;width:100%;
}
.pbc-or .pbc-cta{background:var(--or-g);color:#fff;box-shadow:0 3px 10px rgba(244,116,42,.28);}
.pbc-or .pbc-cta:hover{box-shadow:0 5px 16px rgba(244,116,42,.38);transform:translateY(-1px);}
.pbc-bl .pbc-cta{background:linear-gradient(135deg,#3F88E4,#6AADF5);color:#fff;box-shadow:0 3px 10px rgba(63,136,228,.28);}
.pbc-bl .pbc-cta:hover{box-shadow:0 5px 16px rgba(63,136,228,.38);transform:translateY(-1px);}
.pbc-gr .pbc-cta{background:linear-gradient(135deg,#2EA66A,#4EC98A);color:#fff;box-shadow:0 3px 10px rgba(46,166,106,.28);}
.pbc-gr .pbc-cta:hover{box-shadow:0 5px 16px rgba(46,166,106,.38);transform:translateY(-1px);}

/* ══════════════════════════════════════
   PLATFORM BANNER — modern card redesign (.pbc-card)
══════════════════════════════════════ */
.pbc-modern{}
.pbc-card{
  background:#fff;
  border-radius:var(--rad-xl,18px);
  padding:28px 24px 24px;
  border:1.5px solid rgba(0,0,0,.07);
  box-shadow:var(--sha-md,0 4px 20px rgba(0,0,0,.08));
  display:flex;flex-direction:column;
  transition:transform .25s,box-shadow .25s;
  position:relative;overflow:hidden;
}
.pbc-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:4px;
  border-radius:var(--rad-xl,18px) var(--rad-xl,18px) 0 0;
}
.pbc-card--or::before{background:var(--g-brand,linear-gradient(135deg,#F4742A,#FF9A5C));}
.pbc-card--bl::before{background:var(--g-blue,linear-gradient(135deg,#3F88E4,#6AADF5));}
.pbc-card--gr::before{background:var(--g-green,linear-gradient(135deg,#2EA66A,#4EC98A));}
.pbc-card:hover{transform:translateY(-4px);box-shadow:var(--sha-xl,0 12px 40px rgba(0,0,0,.14));}
.pbc-card-icon{
  width:56px;height:56px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:16px;flex-shrink:0;
}
.pbc-card--or .pbc-card-icon{background:linear-gradient(145deg,#FFF5EC,#FFE5CC);color:var(--or,#F4742A);}
.pbc-card--bl .pbc-card-icon{background:linear-gradient(145deg,#EBF5FF,#D2E8FF);color:var(--bl,#3F88E4);}
.pbc-card--gr .pbc-card-icon{background:linear-gradient(145deg,#EDFBF3,#D1F0E2);color:var(--gr,#2EA66A);}
.pbc-card-name{
  font-family:'Outfit',sans-serif;
  font-size:18px;font-weight:800;letter-spacing:-.02em;margin-bottom:8px;
}
.pbc-card--or .pbc-card-name{color:var(--or-d,#C9520A);}
.pbc-card--bl .pbc-card-name{color:var(--bl-d,#1E5CA8);}
.pbc-card--gr .pbc-card-name{color:var(--gr-d,#1A7A4E);}
.pbc-card-desc{font-size:13px;color:var(--mid,#6b7280);line-height:1.75;margin-bottom:18px;}
.pbc-card-features{
  list-style:none;padding:0;margin:0 0 20px;
  display:flex;flex-direction:column;gap:9px;
}
.pbc-card-features li{
  display:flex;align-items:flex-start;gap:8px;
  font-size:13px;color:var(--ink,#1a1a1a);line-height:1.55;
}
.pbc-card-features li svg{flex-shrink:0;margin-top:2px;}
.pbc-card-cta{
  margin-top:auto;
  display:flex;align-items:center;justify-content:center;gap:6px;
  padding:11px 18px;border-radius:10px;
  font-size:14px;font-weight:700;color:#fff;
  transition:all .22s;text-decoration:none;
}
.pbc-card--or .pbc-card-cta{background:var(--g-brand,linear-gradient(135deg,#F4742A,#FF9A5C));box-shadow:0 4px 12px rgba(244,116,42,.3);}
.pbc-card--or .pbc-card-cta:hover{box-shadow:0 6px 20px rgba(244,116,42,.42);transform:translateY(-1px);}
.pbc-card--bl .pbc-card-cta{background:var(--g-blue,linear-gradient(135deg,#3F88E4,#6AADF5));box-shadow:0 4px 12px rgba(63,136,228,.3);}
.pbc-card--bl .pbc-card-cta:hover{box-shadow:0 6px 20px rgba(63,136,228,.42);transform:translateY(-1px);}
.pbc-card--gr .pbc-card-cta{background:var(--g-green,linear-gradient(135deg,#2EA66A,#4EC98A));box-shadow:0 4px 12px rgba(46,166,106,.3);}
.pbc-card--gr .pbc-card-cta:hover{box-shadow:0 6px 20px rgba(46,166,106,.42);transform:translateY(-1px);}
@media(max-width:768px){
  .pbc-modern{grid-template-columns:1fr !important;gap:var(--space-4,16px) !important;}
}

/* ══════════════════════════════════════
   DIAGNOSIS BANNER
══════════════════════════════════════ */
.diag{
  background:var(--or-g);border-radius:18px;padding:24px 28px;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  margin-bottom:20px;position:relative;overflow:hidden;
}
.diag::before{
  content:'';position:absolute;width:200px;height:200px;border-radius:50%;
  background:rgba(255,255,255,.08);right:-50px;top:-70px;pointer-events:none;
}
.diag::after{
  content:'';position:absolute;width:120px;height:120px;border-radius:50%;
  background:rgba(255,255,255,.05);left:40%;bottom:-40px;pointer-events:none;
}
.diag-l{position:relative;z-index:1;}
.diag-eyebrow{
  font-size:10px;color:rgba(255,255,255,.65);font-weight:700;
  letter-spacing:.1em;margin-bottom:6px;text-transform:uppercase;
}
.diag-title{
  font-family:'Outfit',sans-serif;
  font-size:18px;font-weight:700;color:#fff;margin-bottom:4px;line-height:1.4;
}
.diag-sub{font-size:12px;color:rgba(255,255,255,.78);line-height:1.6;}
.diag-btn{
  flex-shrink:0;background:#fff;color:var(--or-d);
  padding:13px 26px;border-radius:10px;font-size:14px;font-weight:700;
  box-shadow:0 4px 18px rgba(0,0,0,.12);transition:all .22s;white-space:nowrap;
  position:relative;z-index:1;font-family:'Outfit',sans-serif;
  display:inline-flex;align-items:center;
}
.diag-btn:hover{transform:translateY(-2px);box-shadow:0 7px 24px rgba(0,0,0,.16);}
@media(max-width:520px){
  .diag{flex-direction:column;align-items:flex-start;padding:20px 18px;}
  .diag-btn{width:100%;text-align:center;height:48px;justify-content:center;}
}

/* ══════════════════════════════════════
   PROVIDER RANKING
══════════════════════════════════════ */
.prov-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;}
@media(max-width:820px){.prov-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:768px){
  .prov-grid{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:6px;}
  .prov-grid::-webkit-scrollbar{display:none;}
  .provcard{flex:0 0 270px;scroll-snap-align:start;}
}

.provcard{
  background:var(--wh);border-radius:14px;border:1px solid var(--bdr);
  padding:17px;cursor:pointer;transition:all .25s cubic-bezier(.4,0,.2,1);
  position:relative;overflow:hidden;
}
.provcard::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;opacity:0;transition:opacity .22s;}
.provcard[data-ptype="br"]::before{background:var(--or-g);}
.provcard[data-ptype="sp"]::before{background:linear-gradient(90deg,#3F88E4,#6AADF5);}
.provcard[data-ptype="sh"]::before{background:linear-gradient(90deg,#2EA66A,#4EC98A);}
.provcard:hover{box-shadow:0 8px 24px rgba(0,0,0,.1);transform:translateY(-3px);border-color:transparent;}
.provcard:hover::before{opacity:1;}
.prov-top{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.prov-rank{
  width:28px;height:28px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  font-family:'Outfit',sans-serif;font-size:12px;font-weight:800;flex-shrink:0;
}
.r1{background:linear-gradient(135deg,#FFD700,#FFA500);color:#7A4500;box-shadow:0 2px 8px rgba(255,165,0,.4);}
.r2{background:linear-gradient(135deg,#D0D0D0,#A8A8A8);color:#3A3A3A;box-shadow:0 2px 8px rgba(0,0,0,.15);}
.r3{background:linear-gradient(135deg,#E8A070,#CD7F32);color:#fff;box-shadow:0 2px 8px rgba(205,127,50,.35);}
.rn{background:var(--bdr2);color:var(--soft);}
.prov-ava{
  width:50px;height:50px;border-radius:11px;flex-shrink:0;
  overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:22px;
}
.prov-ava img{width:100%;height:100%;object-fit:cover;}
.prov-ava.br-ava{background:linear-gradient(145deg,#FFE8CC,#FFBF80);}
.prov-ava.sp-ava{background:linear-gradient(145deg,#D8EEFF,#A0C8FF);}
.prov-ava.sh-ava{background:linear-gradient(145deg,#C8F0DC,#88DDB0);}
.prov-inf{flex:1;min-width:0;}
.prov-name{font-family:'Outfit',sans-serif;font-size:13px;font-weight:700;margin-bottom:3px;line-height:1.3;}
.prov-area{font-size:10px;color:var(--soft);}
.ptbadge{
  padding:3px 9px;border-radius:5px;font-size:9px;font-weight:700;
  white-space:nowrap;flex-shrink:0;align-self:flex-start;margin-top:2px;
}
.ptb-br{background:var(--or-l);color:var(--or-d);}
.ptb-sp{background:var(--bl-l);color:var(--bl-d);}
.ptb-sh{background:var(--gr-l);color:var(--gr-d);}
.prov-score{display:flex;align-items:center;gap:8px;margin-bottom:10px;}
.ps-num{font-family:'Outfit',sans-serif;font-size:24px;font-weight:800;color:var(--or);letter-spacing:-.03em;}
.ps-stars{color:#F9C231;font-size:13px;letter-spacing:1px;}
.ps-cnt{font-size:11px;color:var(--soft);}
.prov-tags{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:12px;}
.prov-btn{
  width:100%;height:36px;border-radius:9px;
  background:var(--bg);font-size:12px;font-weight:700;
  color:var(--mid);transition:all .2s;border:1px solid var(--bdr);
  font-family:'Outfit',sans-serif;display:flex;align-items:center;justify-content:center;
}
.prov-btn:hover{background:var(--or-l);color:var(--or);border-color:var(--or-m);}

/* ══════════════════════════════════════
   REVIEWS
══════════════════════════════════════ */
.review-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:13px;}
@media(max-width:620px){
  .review-grid{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;padding-bottom:6px;}
  .review-grid::-webkit-scrollbar{display:none;}
  .rvcard{flex:0 0 290px;}
}
.rvcard{
  background:var(--wh);border-radius:14px;border:1px solid var(--bdr);padding:18px;
  transition:box-shadow .22s;position:relative;overflow:hidden;
}
.rvcard::before{
  content:'\275D';position:absolute;right:14px;top:10px;
  font-size:48px;color:var(--bdr2);line-height:1;pointer-events:none;font-family:serif;
}
.rvcard:hover{box-shadow:0 6px 22px rgba(0,0,0,.09);}
.rv-top{display:flex;align-items:flex-start;gap:11px;margin-bottom:12px;}
.rv-ava{
  width:42px;height:42px;border-radius:50%;background:var(--bdr2);
  display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
}
.rv-meta{flex:1;}
.rv-name{font-size:13px;font-weight:700;margin-bottom:3px;}
.rv-stars-row{display:flex;align-items:center;gap:6px;}
.rv-stars{color:#F9C231;font-size:13px;letter-spacing:.5px;}
.rv-score{font-family:'Outfit',sans-serif;font-size:13px;font-weight:700;color:var(--or);}
.rv-date{font-size:10px;color:var(--soft);margin-left:auto;flex-shrink:0;}
.rv-provider{
  display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:9px;
  background:var(--bg);margin-bottom:11px;
}
.rv-pimg{
  width:32px;height:32px;border-radius:7px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:14px;overflow:hidden;
}
.rv-pimg.br-p{background:linear-gradient(145deg,#FFE8CC,#FFBF80);}
.rv-pimg.sp-p{background:linear-gradient(145deg,#D8EEFF,#A0C8FF);}
.rv-pimg.sh-p{background:linear-gradient(145deg,#C8F0DC,#88DDB0);}
.rv-pdot{width:6px;height:6px;border-radius:50%;flex-shrink:0;}
.rv-pname{font-size:11px;font-weight:600;color:var(--mid);}
.rv-text{font-size:12px;color:var(--mid);line-height:1.8;position:relative;z-index:1;}
.rv-pet{
  display:inline-flex;align-items:center;gap:5px;
  margin-top:10px;padding:4px 11px;border-radius:20px;
  background:var(--bdr2);font-size:10px;color:var(--soft);
}

/* ══════════════════════════════════════
   COLUMN
══════════════════════════════════════ */
.col-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px;}
.ctab{
  padding:6px 15px;border-radius:20px;font-size:12px;font-weight:600;
  border:1.5px solid var(--bdr);color:var(--mid);
  cursor:pointer;transition:all .2s;background:var(--wh);
}
.ctab.active{background:var(--or-g);color:#fff;border-color:var(--or);}
.ctab:hover:not(.active){border-color:var(--or);color:var(--or);}
.col-feat{
  display:grid;grid-template-columns:220px 1fr;
  border-radius:12px;overflow:hidden;border:1px solid var(--bdr);margin-bottom:14px;
  cursor:pointer;transition:all .22s;
}
.col-feat:hover{box-shadow:0 6px 22px rgba(0,0,0,.1);transform:translateY(-2px);}
.cf-img{
  height:140px;background:linear-gradient(145deg,#FFE8CC,#F4A56A,#E8835A);
  display:flex;align-items:center;justify-content:center;font-size:44px;overflow:hidden;
}
.cf-img img{width:100%;height:100%;object-fit:cover;}
.cf-body{
  padding:16px 18px;display:flex;flex-direction:column;justify-content:center;background:var(--wh);
}
.cf-cat{font-size:10px;font-weight:700;color:var(--or);margin-bottom:5px;letter-spacing:.05em;}
.cf-title{font-size:14px;font-weight:700;line-height:1.6;margin-bottom:7px;}
.cf-meta{font-size:11px;color:var(--soft);}
@media(max-width:520px){
  .col-feat{grid-template-columns:1fr;}
  .cf-img{height:150px;border-radius:0;}
  .cf-body{padding:14px;}
}
.col-list{display:flex;flex-direction:column;}
.ci{
  display:flex;gap:13px;padding:13px 0;
  border-bottom:1px solid var(--bdr2);cursor:pointer;
  transition:all .18s;border-radius:0;
}
.ci:last-child{border-bottom:none;}
.ci:hover{background:var(--bg);margin:0 -16px;padding:13px 16px;border-radius:10px;}
.ci-img{
  width:82px;height:62px;border-radius:9px;flex-shrink:0;overflow:hidden;
  display:flex;align-items:center;justify-content:center;font-size:26px;
}
.ci-img img{width:100%;height:100%;object-fit:cover;}
.ci-img.col-1{background:linear-gradient(145deg,#FFE8CC,#F4A56A);}
.ci-img.col-2{background:linear-gradient(145deg,#D8EEFF,#90BFFF);}
.ci-img.col-3{background:linear-gradient(145deg,#C8F0DC,#70D4A4);}
.ci-img.col-4{background:linear-gradient(145deg,#FFE0E0,#F4A0A0);}
.ci-body{flex:1;min-width:0;}
.ci-cat{font-size:10px;font-weight:700;color:var(--or);margin-bottom:3px;}
.ci-title{font-size:13px;font-weight:700;line-height:1.5;margin-bottom:3px;}
.ci-meta{font-size:11px;color:var(--soft);}

/* ══════════════════════════════════════
   MOBILE BOTTOM NAV
══════════════════════════════════════ */
.bnav{
  display:none;position:fixed;bottom:0;left:0;right:0;z-index:900;
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-top:1px solid rgba(0,0,0,.07);height:58px;
}
.bnav-inner{display:flex;width:100%;height:100%;align-items:center;justify-content:space-around;padding:0;}
.bni{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  font-size:10px;font-weight:500;color:var(--soft);
  cursor:pointer;padding:4px 10px;border-radius:10px;transition:color .2s;flex:1;
}
.bni svg{flex-shrink:0;}
.bni.active{color:var(--or);}
@media(max-width:680px){
  .bnav{display:flex;}
  body{padding-bottom:58px;}
}

/* ══════════════════════════════════════
   FOOTER
══════════════════════════════════════ */
footer{
  background:var(--ink2);padding:44px 28px 28px;margin-top:14px;
  position:relative;overflow:hidden;
}
footer::before{
  content:'';position:absolute;left:-100px;top:-100px;
  width:400px;height:400px;border-radius:50%;
  background:radial-gradient(circle,rgba(244,116,42,.06),transparent 70%);pointer-events:none;
}
.fi{max-width:1120px;margin:0 auto;}
.ft{
  display:grid;grid-template-columns:220px 1fr;gap:48px;
  margin-bottom:36px;padding-bottom:36px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.flogo{
  font-family:'Outfit',sans-serif;
  font-size:23px;font-weight:800;color:var(--or);margin-bottom:7px;
  letter-spacing:-.03em;display:block;
}
.flogo span{color:#fff;}
.ftag{font-size:11px;color:rgba(255,255,255,.28);margin-bottom:18px;line-height:1.6;}
.f-badges{display:flex;gap:6px;flex-wrap:wrap;}
.fbadge{padding:4px 11px;border-radius:20px;font-size:10px;font-weight:700;}
.fb-or{background:rgba(244,116,42,.18);color:#FFB87A;}
.fb-bl{background:rgba(63,136,228,.18);color:#7EBFFF;}
.fb-gr{background:rgba(46,166,106,.18);color:#6EDDAA;}
.fcols{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.fc-t{
  font-size:10px;font-weight:700;color:rgba(255,255,255,.28);
  letter-spacing:.1em;margin-bottom:14px;text-transform:uppercase;
}
.fc-a{
  display:block;font-size:12px;color:rgba(255,255,255,.5);margin-bottom:10px;transition:color .2s;
}
.fc-a:hover{color:var(--or);}
.fb-c{font-size:11px;color:rgba(255,255,255,.18);text-align:center;padding-top:4px;}
@media(max-width:840px){
  .ft{grid-template-columns:1fr;gap:24px;}
  .fcols{grid-template-columns:1fr 1fr;gap:20px;}
}
@media(max-width:480px){footer{padding:28px 16px 24px;}}

/* ══════════════════════════════════════
   REVEAL ANIMATIONS
══════════════════════════════════════ */
.rv{opacity:0;transform:translateY(20px);transition:opacity .5s ease,transform .5s ease;}
.rv.on{opacity:1;transform:none;}
.rv1{transition-delay:.05s;}.rv2{transition-delay:.1s;}
.rv3{transition-delay:.15s;}.rv4{transition-delay:.2s;}

/* ══════════════════════════════════════
   BREADCRUMB (legacy support)
══════════════════════════════════════ */
.breadcrumb{margin:16px 0;font-size:.85rem;}
.breadcrumb__list{display:flex;flex-wrap:wrap;list-style:none;gap:4px;}
.breadcrumb__item::after{content:'>';margin-left:4px;color:#999;}
.breadcrumb__item:last-child::after{display:none;}
.breadcrumb__link{color:var(--or);}
.breadcrumb__current{color:#999;}

/* ══════════════════════════════════════
   WORDPRESS ADMIN BAR 対応
   ログイン中に表示される管理バー（32px）の
   高さを固定ナビ・スティッキーバー・ヒーローに反映
══════════════════════════════════════ */
.admin-bar .nav{top:32px;}
.admin-bar .hero{margin-top:calc(var(--nav) + 32px);}
.admin-bar .hero-v2{margin-top:calc(var(--nav) + 32px);}
@media screen and (max-width:782px){
  .admin-bar .nav{top:46px;}
  .admin-bar .hero{margin-top:calc(var(--nav) + 46px);}
  .admin-bar .hero-v2{margin-top:calc(var(--nav) + 46px);}
}

/* ══════════════════════════════════════
   HERO V2 ─ フルスクリーン3パネルヒーロー
══════════════════════════════════════ */

/* ── コンテナ ── */
.hero-v2{
  position:relative;
  width:100%;
  height:50vh;
  min-height:400px;
  max-height:500px;
  overflow:hidden;
  margin-top:0;
}

/* ── パネル背景レイヤー ── */
.hv2-bg{
  position:absolute;
  top:0;left:0;
  width:100%;height:100%;
  display:flex;
  flex-direction:row;
  z-index:1;
}
.hv2-panel{
  flex:1;
  width:33.333%;
  height:100%;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  position:relative;
  transition:flex .5s cubic-bezier(.4,0,.2,1);
}
.hv2-shop   {background-image:linear-gradient(155deg,#c94a0a 0%,#f5a96a 100%);}
.hv2-breeder{background-image:linear-gradient(155deg,#0e3d82 0%,#3a7bd5 100%);}
.hv2-rescue {background-image:linear-gradient(155deg,#0a4d2a 0%,#2ea66a 100%);}

/* パネル間フェード */
.hv2-panel::before{
  content:'';
  position:absolute;
  top:0;left:0;width:100%;height:100%;
  background:linear-gradient(to right,rgba(0,0,0,.12) 0%,transparent 18%,transparent 82%,rgba(0,0,0,.12) 100%);
  z-index:1;
  pointer-events:none;
}
/* 底部グラデーション（パネル情報エリアの背景） */
.hv2-panel::after{
  content:'';
  position:absolute;
  bottom:0;left:0;width:100%;height:45%;
  background:linear-gradient(to top,rgba(0,0,0,.38) 0%,transparent 100%);
  z-index:2;
  pointer-events:none;
}

/* ── パネル内プラットフォーム情報 ── */
.hv2-panel-info{
  position:absolute;
  bottom:0;left:0;right:0;
  padding:28px 24px 32px;
  z-index:5;
  text-align:center;
  transition:opacity .3s;
}
.hv2-panel-name{
  color:#fff;
  font-size:15px;
  font-weight:700;
  letter-spacing:.06em;
  margin-bottom:4px;
  text-shadow:0 1px 6px rgba(0,0,0,.5);
}
.hv2-panel-desc{
  color:rgba(255,255,255,.75);
  font-size:12px;
  line-height:1.5;
  margin-bottom:12px;
  text-shadow:0 1px 4px rgba(0,0,0,.4);
}
.hv2-panel-link{
  display:inline-block;
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.35);
  color:#fff;
  font-size:12px;
  font-weight:600;
  padding:6px 18px;
  border-radius:20px;
  text-decoration:none;
  transition:background .2s,transform .2s;
  backdrop-filter:blur(4px);
}
.hv2-panel-link:hover{
  background:rgba(255,255,255,.30);
  transform:translateY(-1px);
}

/* ── グローバルオーバーレイ（暗さ） ── */
.hv2-overlay{
  position:absolute;
  top:0;left:0;
  width:100%;height:100%;
  background:rgba(0,0,0,var(--hv2-ov,.15));
  z-index:3;
  pointer-events:none;
}

/* ── 中央コンテンツ ── */
.hv2-content{
  position:absolute;
  top:0;left:0;
  width:100%;height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:clamp(32px,8%,70px) 24px 40px;
  z-index:20;
  pointer-events:none;
}
.hv2-content > *{pointer-events:auto;}

.hv2-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.35);
  color:#fff;
  font-size:11px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:5px 18px;
  border-radius:24px;
  margin-bottom:16px;
  backdrop-filter:blur(6px);
}
.hv2-h1{
  color:#fff;
  font-size:40px;
  font-weight:900;
  line-height:1.2;
  margin:0 0 10px;
  text-shadow:0 2px 12px rgba(0,0,0,.35);
  letter-spacing:-.01em;
  white-space:nowrap;
}
.hv2-sub{
  color:rgba(255,255,255,.9);
  font-size:14px;
  line-height:1.7;
  margin:0 0 18px;
  text-shadow:0 1px 6px rgba(0,0,0,.3);
  max-width:600px;
}

/* ── モバイルスライドショー用ドット ── */
.hv2-dots{
  position:absolute;
  bottom:16px;
  left:50%;
  transform:translateX(-50%);
  display:none;
  gap:6px;
  z-index:30;
}
.hv2-dot{
  width:8px;height:8px;
  border-radius:50%;
  background:rgba(255,255,255,.4);
  border:none;
  cursor:pointer;
  padding:0;
  transition:background .2s,transform .2s;
}
.hv2-dot.active{
  background:#fff;
  transform:scale(1.3);
}

/* ── レスポンシブ ── */
@media(max-width:900px){
  .hv2-h1{font-size:40px;}
  .hv2-sub{font-size:15px;}
}
@media(max-width:900px){
  .hv2-h1{font-size:32px;}
  .hv2-sub{font-size:13px;}
}
@media(max-width:768px){
  .hero-v2{height:86svh;min-height:440px;max-height:none;}
  /* モバイル: スライドショー */
  .hv2-bg{
    flex-direction:row;
    width:300%;
    transition:transform .45s cubic-bezier(.4,0,.2,1);
  }
  .hv2-panel{
    width:33.333%;
    flex:0 0 33.333%;
  }
  .hv2-dots{display:flex;}
  .hv2-h1{font-size:26px;white-space:normal;}
  .hv2-sub{font-size:13px;margin-bottom:12px;}
  .hv2-content{padding:clamp(20px,6%,48px) 16px 32px;justify-content:center;}
  .hv2-panel-info{padding:20px 16px 60px;}
}
@media(max-width:480px){
  .hv2-h1{font-size:22px;}
}

/* ══════════════════════════════════════
   HERO SEARCH FLOAT
══════════════════════════════════════ */
.hero-search-float{
  position:relative;z-index:30;
  max-width:900px;margin:-48px auto 0;padding:0 20px;
}

/* ── PC: sw2 widget ── */
.sw2{
  background:#fff;border-radius:20px;
  box-shadow:0 12px 48px rgba(0,0,0,.14);
  padding:16px 20px;position:relative;
}
.sw2-methods{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap;}
.swm{
  padding:6px 18px;border-radius:20px;font-size:13px;font-weight:600;
  border:1.5px solid var(--bdr);color:var(--mid);background:#fff;
  cursor:pointer;transition:all .18s;white-space:nowrap;
}
.swm:hover{border-color:var(--or);color:var(--or);background:var(--or-l);}
.swm.active{background:var(--or-g);color:#fff;border-color:var(--or);}
.sw2-row{display:flex;gap:8px;align-items:stretch;min-height:52px;}
.sw2-field{
  flex:1;display:flex;flex-direction:column;justify-content:center;
  padding:9px 14px;border-radius:12px;
  border:1.5px solid var(--bdr);background:var(--bg);
  cursor:pointer;transition:border-color .2s,box-shadow .2s;
  text-align:left;position:relative;min-width:0;font-family:inherit;
}
.sw2-field:hover,.sw2-field.open{
  border-color:var(--or);box-shadow:0 0 0 3px rgba(244,116,42,.09);background:#fff;
}
.sw2-field-lbl{
  font-size:10px;font-weight:700;color:var(--soft);
  letter-spacing:.06em;text-transform:uppercase;margin-bottom:2px;
}
.sw2-field-val{
  font-size:13px;font-weight:600;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:18px;
}
.sw2-arr{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  color:var(--soft);transition:transform .2s;
}
.sw2-field.open .sw2-arr{transform:translateY(-50%) rotate(180deg);}
.sw2-detail-btn{
  padding:0 18px;border-radius:12px;
  border:1.5px solid var(--or-m);background:var(--or-l);
  color:var(--or-d);font-size:13px;font-weight:700;
  white-space:nowrap;cursor:pointer;transition:all .18s;
  display:flex;align-items:center;flex-shrink:0;font-family:inherit;
}
.sw2-detail-btn:hover{background:var(--or-m);}
.sw2-submit{
  padding:0 24px;border-radius:12px;background:var(--or-g);
  color:#fff;font-size:14px;font-weight:700;white-space:nowrap;
  display:flex;align-items:center;gap:7px;flex-shrink:0;
  box-shadow:0 4px 16px rgba(244,116,42,.35);
  transition:all .22s;cursor:pointer;font-family:inherit;border:none;
}
.sw2-submit:hover{transform:translateY(-1px);box-shadow:0 6px 22px rgba(244,116,42,.45);}
/* SP trigger */
.sw2-sp{display:none;}
.sw2-sp-btn{
  display:flex;align-items:center;gap:12px;width:100%;
  background:#fff;border-radius:16px;padding:14px 18px;
  box-shadow:0 12px 48px rgba(0,0,0,.14);
  cursor:pointer;border:none;font-family:inherit;
}
.sw2-sp-text{flex:1;text-align:left;}
.sw2-sp-main{display:block;font-size:15px;font-weight:700;color:var(--ink);}
.sw2-sp-sub{display:block;font-size:11px;color:var(--soft);margin-top:2px;}
.sw2-sp-arr{color:var(--soft);flex-shrink:0;}

/* ── Dropdown ── */
.sdrop{
  position:absolute;top:calc(100% + 6px);left:0;z-index:500;
  background:#fff;border-radius:16px;
  box-shadow:0 16px 56px rgba(0,0,0,.16);
  border:1px solid var(--bdr);width:440px;display:none;
}
.sdrop.open{display:block;}
.sdrop-wide{width:560px;}
.sdrop-tabs{display:flex;border-bottom:1px solid var(--bdr);padding:0 14px;}
.sdrop-tab{
  padding:11px 14px;font-size:14px;font-weight:600;color:var(--soft);
  cursor:pointer;border:none;background:none;font-family:inherit;
  border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .2s,border-color .2s;
}
.sdrop-tab.active{color:var(--or);border-bottom-color:var(--or);}
.sdrop-scroll{
  max-height:320px;overflow-y:auto;padding:12px 14px;
  scrollbar-width:thin;scrollbar-color:var(--bdr) transparent;
}
.sdrop-panel{display:none;}
.sdrop-panel.active{display:block;}
.sdrop-acc{margin-bottom:6px;}
.sdrop-acc-hd{
  width:100%;text-align:left;padding:8px 12px;
  font-size:11px;font-weight:700;color:var(--mid);
  background:var(--bdr2);border-radius:8px;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;
  transition:background .18s,color .18s;border:none;font-family:inherit;
}
.sdrop-acc-hd::after{content:'＋';font-size:13px;}
.sdrop-acc.open .sdrop-acc-hd::after{content:'－';}
.sdrop-acc-hd:hover{background:var(--or-l);color:var(--or-d);}
.sdrop-acc-bd{display:none;flex-wrap:wrap;gap:6px;padding:8px 4px;}
.sdrop-acc.open .sdrop-acc-bd{display:flex;}
.sdrop-item{
  padding:5px 13px;border-radius:18px;font-size:12px;font-weight:600;
  border:1.5px solid var(--bdr);color:var(--mid);background:#fff;
  cursor:pointer;transition:all .18s;white-space:nowrap;font-family:inherit;
}
.sdrop-item:hover,.sdrop-item.active{border-color:var(--or);color:var(--or);background:var(--or-l);}
.sdrop-region-group{margin-bottom:14px;}
.sdrop-region-hd{
  font-size:10px;font-weight:700;color:var(--soft);
  letter-spacing:.05em;padding:4px 0 6px;border-bottom:1px solid var(--bdr2);margin-bottom:7px;
}
.sdrop-region-bd{display:flex;flex-wrap:wrap;gap:5px;}
.sdrop-pref{
  padding:5px 12px;border-radius:16px;font-size:12px;font-weight:600;
  border:1.5px solid var(--bdr);color:var(--mid);background:#fff;
  cursor:pointer;transition:all .18s;white-space:nowrap;font-family:inherit;
}
.sdrop-pref:hover,.sdrop-pref.active{border-color:var(--bl);color:var(--bl-d);background:var(--bl-l);}
.sdrop-item-all{
  display:block;width:100%;margin-bottom:10px;padding:8px 14px;
  border-radius:10px;font-size:13px;font-weight:600;
  border:1.5px solid var(--bdr);color:var(--mid);background:#fff;
  cursor:pointer;text-align:left;transition:all .18s;font-family:inherit;
}
.sdrop-item-all.active{border-color:var(--or);color:var(--or);background:var(--or-l);}
.sdrop-foot{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px;border-top:1px solid var(--bdr);
}
.sdrop-reset{font-size:12px;color:var(--soft);cursor:pointer;text-decoration:underline;background:none;border:none;font-family:inherit;}
.sdrop-apply{
  background:var(--or-g);color:#fff;padding:8px 20px;
  border-radius:10px;font-size:13px;font-weight:700;
  cursor:pointer;transition:opacity .2s;border:none;font-family:inherit;
}
.sdrop-apply:hover{opacity:.88;}
.sdrop-check{
  display:inline-flex;align-items:center;
  padding:5px 13px;border-radius:18px;font-size:12px;font-weight:600;
  border:1.5px solid var(--bdr);color:var(--mid);background:#fff;
  cursor:pointer;transition:all .18s;white-space:nowrap;
}
.sdrop-check input{display:none;}
.sdrop-check.active,.sdrop-check:has(input:checked){border-color:var(--or);color:var(--or);background:var(--or-l);}

/* ── Modal ── */
.smodal{
  position:fixed;inset:0;z-index:1000;
  display:flex;align-items:center;justify-content:center;padding:16px;
  opacity:0;pointer-events:none;transition:opacity .28s;
}
.smodal.open{opacity:1;pointer-events:all;}
.smodal-bg{position:absolute;inset:0;background:rgba(0,0,0,.52);backdrop-filter:blur(4px);}
.smodal-box{
  position:relative;background:#fff;border-radius:20px;
  padding:0;width:100%;max-width:700px;
  max-height:90dvh;overflow-y:auto;
  box-shadow:0 24px 80px rgba(0,0,0,.18);
  transform:translateY(24px);transition:transform .3s;
}
.smodal.open .smodal-box{transform:translateY(0);}
.smodal-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 22px 14px;
  position:sticky;top:0;background:#fff;z-index:1;
  border-bottom:1px solid var(--bdr);
}
.smodal-title{font-size:17px;font-weight:800;color:var(--ink);}
.smodal-close{
  width:32px;height:32px;border-radius:50%;border:none;
  background:var(--bdr2);font-size:18px;line-height:1;
  color:var(--mid);cursor:pointer;display:flex;align-items:center;justify-content:center;
  padding:0;transition:background .2s;flex-shrink:0;
}
.smodal-close:hover{background:var(--bdr);}
.smodal-sec{padding:18px 22px 0;}
.smodal-sec-title{
  font-size:13px;font-weight:800;color:var(--ink);margin-bottom:10px;
  display:flex;align-items:center;gap:6px;
}
.smodal-sec-title::before{content:'';display:inline-block;width:3px;height:14px;background:var(--or-g);border-radius:2px;}
.smodal-methods{display:flex;gap:6px;flex-wrap:wrap;}
.smod-meth{
  display:inline-flex;align-items:center;
  padding:7px 16px;border-radius:20px;font-size:13px;font-weight:600;
  border:1.5px solid var(--bdr);color:var(--mid);background:#fff;cursor:pointer;transition:all .18s;
}
.smod-meth input{display:none;}
.smod-meth.active{background:var(--or-g);color:#fff;border-color:var(--or);}
.smodal-tabs{display:flex;gap:4px;margin-bottom:12px;}
.smodal-tab{
  padding:7px 18px;border-radius:20px;font-size:13px;font-weight:600;
  border:1.5px solid var(--bdr);color:var(--mid);background:#fff;cursor:pointer;transition:all .18s;font-family:inherit;
}
.smodal-tab.active{background:var(--ink);color:#fff;border-color:var(--ink);}
.smodal-panel{display:none;}
.smodal-panel.active{display:block;}
.smodal-pref-wrap{display:flex;flex-direction:column;gap:8px;}
.smod-pref-group{}
.smod-pref-region{font-size:9.5px;font-weight:700;color:var(--soft);letter-spacing:.05em;margin-bottom:4px;}
.smod-pref-list{display:flex;flex-wrap:wrap;gap:4px;}
.smod-pref{
  display:inline-flex;align-items:center;
  padding:3px 9px;border-radius:12px;font-size:11px;font-weight:600;
  border:1.5px solid var(--bdr);color:var(--mid);background:#fff;cursor:pointer;transition:all .18s;
}
.smod-pref input{display:none;}
.smod-pref.active,.smod-pref:has(input:checked){border-color:var(--bl);color:var(--bl-d);background:var(--bl-l);}
.smodal-foot{
  padding:14px 22px 18px;border-top:1px solid var(--bdr);
  margin-top:18px;position:sticky;bottom:0;background:#fff;
}
.smodal-submit{
  width:100%;height:52px;border-radius:14px;
  background:var(--or-g);color:#fff;font-size:15px;font-weight:700;
  display:flex;align-items:center;justify-content:center;gap:8px;
  cursor:pointer;transition:all .22s;border:none;font-family:inherit;
  box-shadow:0 4px 16px rgba(244,116,42,.35);
}
.smodal-submit:hover{transform:translateY(-1px);}
@media(max-width:768px){
  .hero-search-float{margin:-28px auto 0;padding:0 14px;}
  .sw2{display:none;}
  .sw2-sp{display:block;}
  .smodal{align-items:flex-end;padding:0;}
  .smodal-box{border-radius:20px 20px 0 0;max-height:92dvh;max-width:100%;}
}
@media(min-width:769px){
  .sw2-sp{display:none;}
}

/* ══════════════════════════════════════
   v2.6.0 — MODAL ENHANCEMENTS
══════════════════════════════════════ */

/* hv2-search (old element) — always hidden */
.hv2-search{display:none;}

/* ── hv2-cta: in-hero search button (SP only) ── */
.hv2-cta{display:none;}
@media(max-width:768px){
  .hv2-cta{
    display:flex;align-items:center;gap:10px;
    margin-top:16px;
    padding:14px 20px;border-radius:16px;
    background:#fff;
    color:var(--ink);font-size:15px;font-weight:700;
    cursor:pointer;border:none;font-family:inherit;
    box-shadow:0 8px 32px rgba(0,0,0,.25);
    width:100%;max-width:340px;
    pointer-events:auto;
  }
  .hv2-cta span{flex:1;text-align:left;}
  .hv2-cta svg:last-child{color:var(--soft);}
  .hero-search-float{display:none;}
}

/* ── free-word search bar ── */
.smodal-kw-sec{padding:16px 22px 0;}
.smodal-kw-bar{
  display:flex;align-items:center;gap:10px;
  background:var(--bg);border:2px solid var(--bdr);
  border-radius:14px;padding:0 14px;
  transition:border-color .2s,box-shadow .2s;
}
.smodal-kw-bar:focus-within{
  border-color:var(--or);
  box-shadow:0 0 0 3px rgba(244,116,42,.12);
  background:#fff;
}
.smodal-kw-bar svg{flex-shrink:0;color:var(--soft);}
.smodal-kw-inp{
  flex:1;height:48px;border:none;background:none;
  font-size:14px;font-family:inherit;color:var(--ink);outline:none;
}
.smodal-kw-inp::placeholder{color:var(--soft);}

/* ── flat breed chip list (modal) ── */
.smod-breed-row{margin-bottom:12px;}
.smod-breed-row-hd{
  font-size:10px;font-weight:700;color:var(--soft);
  letter-spacing:.05em;padding:4px 0 6px;
  border-bottom:1px solid var(--bdr2);margin-bottom:7px;
}
.smod-breed-row-bd{display:flex;flex-wrap:wrap;gap:5px;}

/* ── region accordion (modal) ── */
.smod-pref-all-wrap{margin-bottom:6px;}
.smodal-acc{margin-bottom:4px;}
.smodal-acc-hd{
  width:100%;text-align:left;padding:9px 12px;
  font-size:12px;font-weight:700;color:var(--mid);
  background:var(--bdr2);border-radius:8px;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;
  transition:background .18s,color .18s;border:none;font-family:inherit;
}
.smodal-acc-hd::after{content:'＋';font-size:12px;flex-shrink:0;}
.smodal-acc.open .smodal-acc-hd::after{content:'－';}
.smodal-acc-hd:hover{background:var(--or-l);color:var(--or-d);}
.smodal-acc-bd{display:none;flex-wrap:wrap;gap:5px;padding:8px 4px 4px;}
.smodal-acc.open .smodal-acc-bd{display:flex;}

/* ── price range slider ── */
.smod-price-wrap{display:flex;flex-direction:column;gap:12px;}
.smod-price-val-row{display:flex;align-items:center;justify-content:center;gap:8px;}
.smod-price-val{
  background:var(--or-l);color:var(--or-d);
  padding:4px 14px;border-radius:14px;font-size:13px;font-weight:700;
}
.smod-price-slider-wrap{
  position:relative;height:40px;display:flex;align-items:center;
}
.smod-range{
  -webkit-appearance:none;appearance:none;
  width:100%;height:4px;border-radius:2px;
  background:transparent;outline:none;cursor:pointer;
  position:absolute;left:0;right:0;pointer-events:none;
}
.smod-range::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:22px;height:22px;border-radius:50%;
  background:#fff;border:3px solid var(--or);
  box-shadow:0 2px 8px rgba(244,116,42,.35);
  cursor:pointer;pointer-events:auto;
}
.smod-range::-moz-range-thumb{
  width:22px;height:22px;border-radius:50%;
  background:#fff;border:3px solid var(--or);
  box-shadow:0 2px 8px rgba(244,116,42,.35);
  cursor:pointer;pointer-events:auto;
}
.smod-range-track{
  position:absolute;left:0;right:0;height:4px;
  background:var(--bdr);border-radius:2px;pointer-events:none;
}
.smod-range-track-fill{
  position:absolute;height:4px;
  background:var(--or-g);border-radius:2px;pointer-events:none;
}

/* ── price tag chips (multiple select) ── */
.smod-price-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:4px;}
.smod-ptag{
  display:inline-flex;align-items:center;
  padding:6px 14px;border-radius:18px;
  font-size:12px;font-weight:600;
  border:1.5px solid var(--bdr);color:var(--mid);background:#fff;
  cursor:pointer;transition:all .18s;white-space:nowrap;
}
.smod-ptag input{display:none;}
.smod-ptag.active,.smod-ptag:has(input:checked){
  border-color:var(--or);color:var(--or-d);background:var(--or-l);
}

/* ══════════════════════════════════════
   ARCHIVE PAGE
══════════════════════════════════════ */

/* ── Page layout ── */
.arc-page{padding-bottom:60px;}
.arc-page .container{max-width:1200px;}

/* ── Header ── */
.arc-hd{margin:20px 0 24px;text-align:center;}
.arc-hd-title{
  font-size:clamp(22px,3.2vw,30px);font-weight:800;
  color:var(--ink);line-height:1.3;
}
.arc-hd-desc{
  margin-top:8px;font-size:14px;color:var(--soft);
  max-width:600px;margin-left:auto;margin-right:auto;
}

/* ── Search bar (PC: sw2-style horizontal) ── */
.arc-search{margin-bottom:20px;}
.arc-sw{
  background:var(--wh);border-radius:20px;
  box-shadow:0 8px 36px rgba(0,0,0,.10);
  padding:16px 20px;
}
.arc-sw-methods{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap;}
.arc-sw-row{display:flex;gap:8px;align-items:stretch;min-height:52px;}
.arc-sw-field{
  flex:1;display:flex;flex-direction:column;justify-content:center;
  position:relative;min-width:0;
}
.arc-sw-field .sw2-field-lbl{
  font-size:10px;font-weight:700;color:var(--soft);
  letter-spacing:.06em;text-transform:uppercase;margin-bottom:3px;
}
.arc-sw-select{
  width:100%;padding:10px 14px;border-radius:12px;
  border:1.5px solid var(--bdr);background:var(--bg);
  font-size:13px;font-weight:600;color:var(--ink);
  cursor:pointer;transition:border-color .2s,box-shadow .2s;
  font-family:inherit;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;
  padding-right:32px;
}
.arc-sw-select:hover,.arc-sw-select:focus{
  border-color:var(--or);box-shadow:0 0 0 3px rgba(244,116,42,.09);
  background-color:var(--wh);outline:none;
}
.arc-sw-submit{
  padding:0 28px;border-radius:12px;background:var(--or-g);
  color:#fff;font-size:14px;font-weight:700;white-space:nowrap;
  display:flex;align-items:center;gap:8px;flex-shrink:0;
  box-shadow:0 4px 16px rgba(244,116,42,.35);
  transition:all .22s;cursor:pointer;font-family:inherit;border:none;
}
.arc-sw-submit:hover{transform:translateY(-1px);box-shadow:0 6px 22px rgba(244,116,42,.45);}

/* SP trigger */
.arc-sw-sp-trigger{display:none;}

/* ── SP search modal ── */
.arc-sp-modal{
  display:none;position:fixed;inset:0;z-index:1000;
  background:rgba(0,0,0,.5);backdrop-filter:blur(4px);
}
.arc-sp-modal.open{display:flex;align-items:flex-end;justify-content:center;}
.arc-sp-modal-inner{
  background:var(--wh);border-radius:20px 20px 0 0;
  width:100%;max-width:480px;max-height:85vh;overflow-y:auto;
  padding:0 0 env(safe-area-inset-bottom,0);
  animation:fadeUp .3s ease;
}
.arc-sp-modal-hd{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 20px;border-bottom:1px solid var(--bdr2);
  position:sticky;top:0;background:var(--wh);z-index:2;
}
.arc-sp-modal-title{font-size:16px;font-weight:700;}
.arc-sp-modal-close{
  width:32px;height:32px;border-radius:50%;
  background:var(--bdr2);border:none;font-size:16px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--mid);transition:background .2s;
}
.arc-sp-modal-close:hover{background:var(--bdr);}
.arc-sp-modal-body{padding:20px;}
.arc-sp-modal-section{margin-bottom:20px;}
.arc-sp-modal-lbl{
  font-size:12px;font-weight:700;color:var(--soft);
  letter-spacing:.04em;margin-bottom:8px;
}
.arc-sp-modal-methods{display:flex;gap:6px;flex-wrap:wrap;}
.arc-sp-method-chip{
  padding:7px 16px;border-radius:20px;font-size:13px;font-weight:600;
  border:1.5px solid var(--bdr);color:var(--mid);background:#fff;
  cursor:pointer;transition:all .18s;white-space:nowrap;
}
.arc-sp-method-chip:has(input:checked),.arc-sp-method-chip.active{
  background:var(--or-g);color:#fff;border-color:var(--or);
}
.arc-sp-modal-submit{
  width:100%;padding:15px;border-radius:14px;background:var(--or-g);
  color:#fff;font-size:15px;font-weight:700;border:none;cursor:pointer;
  box-shadow:0 4px 16px rgba(244,116,42,.35);
  transition:all .2s;font-family:inherit;margin-top:8px;
}
.arc-sp-modal-submit:hover{box-shadow:0 6px 22px rgba(244,116,42,.45);}

/* ── Filter / Sort bar ── */
.arc-filter-bar{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:12px;
  padding:14px 18px;margin-bottom:24px;
  background:var(--wh);border-radius:var(--rad);
  border:1px solid var(--bdr);
  position:sticky;top:calc(var(--nav) + 8px);z-index:200;
  box-shadow:0 2px 12px rgba(0,0,0,.06);
}
.arc-filter-left{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.arc-filter-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-left:auto;}
.arc-count{
  font-size:14px;font-weight:700;color:var(--or);
  white-space:nowrap;
}
.arc-active-filters{display:flex;gap:6px;flex-wrap:wrap;}
.arc-fbadge{
  display:inline-flex;align-items:center;gap:4px;
  padding:4px 10px;border-radius:16px;
  font-size:11px;font-weight:600;
  background:var(--or-l);color:var(--or-d);
  white-space:nowrap;
}
.arc-fbadge-x{
  display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;border-radius:50%;
  font-size:12px;line-height:1;color:var(--or-d);
  transition:background .2s;
}
.arc-fbadge-x:hover{background:var(--or-m);}
.arc-filter-tags{display:flex;gap:6px;flex-wrap:wrap;}
.arc-ftag{
  padding:5px 14px;border-radius:18px;font-size:12px;font-weight:600;
  border:1.5px solid var(--bdr);color:var(--mid);background:#fff;
  transition:all .18s;white-space:nowrap;
}
.arc-ftag:hover{border-color:var(--or);color:var(--or);background:var(--or-l);}
.arc-ftag.active{
  background:var(--or-g);color:#fff;border-color:var(--or);
}
.arc-sort{display:flex;align-items:center;gap:6px;}
.arc-sort-lbl{font-size:12px;font-weight:600;color:var(--soft);white-space:nowrap;}
.arc-sort-select{
  padding:6px 28px 6px 10px;border-radius:8px;
  border:1.5px solid var(--bdr);background:var(--wh);
  font-size:12px;font-weight:600;color:var(--ink);
  cursor:pointer;font-family:inherit;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 8px center;
}
.arc-sort-select:focus{border-color:var(--or);outline:none;}

/* ── Age filter pills ── */
.arc-age-filter{
  background:#fff;border:1.5px solid var(--bdr);border-radius:14px;
  padding:14px 18px;margin-bottom:12px;
}
.arc-age-filter-inner{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.arc-age-filter-lbl{
  font-size:12px;font-weight:700;color:var(--soft);white-space:nowrap;min-width:2.5em;
}
.filter-pills{display:flex;gap:8px;flex-wrap:wrap;}
.pill{
  display:inline-flex;align-items:center;
  padding:6px 16px;border-radius:20px;font-size:13px;font-weight:600;
  border:1.5px solid var(--bdr);color:var(--mid);background:#fff;
  text-decoration:none;white-space:nowrap;
  transition:all .18s;
}
.pill:hover{border-color:var(--or);color:var(--or);background:var(--or-l);}
.pill--active{
  background:var(--or-g);color:#fff;border-color:var(--or);
  box-shadow:0 2px 10px rgba(244,116,42,.22);
}

/* ── Price range filter ── */
.arc-price-filter{
  background:#fff;border:1.5px solid var(--bdr);border-radius:14px;
  padding:14px 18px;margin-bottom:12px;
}
.arc-price-form{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.arc-price-filter-lbl{
  font-size:12px;font-weight:700;color:var(--soft);white-space:nowrap;min-width:2.5em;
}
.arc-price-inputs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.arc-price-input{
  padding:7px 10px;border-radius:8px;border:1.5px solid var(--bdr);
  background:var(--wh);font-size:13px;color:var(--ink);
  width:130px;transition:border-color .18s;
}
.arc-price-input:focus{border-color:var(--or);outline:none;}
.arc-price-sep{font-size:13px;color:var(--soft);font-weight:600;}
.arc-price-submit{
  padding:7px 18px;border-radius:8px;border:none;cursor:pointer;
  background:var(--or-g);color:#fff;font-size:13px;font-weight:700;
  transition:opacity .18s;white-space:nowrap;
}
.arc-price-submit:hover{opacity:.85;}
.arc-price-clear{
  font-size:12px;color:var(--soft);text-decoration:none;
  padding:4px 8px;border-radius:6px;transition:color .18s;
  white-space:nowrap;
}
.arc-price-clear:hover{color:var(--or);}

/* SP modal chips for age */
.arc-sp-modal-chips{display:flex;gap:8px;flex-wrap:wrap;}

@media(max-width:768px){
  .arc-age-filter,.arc-price-filter{padding:12px 14px;border-radius:10px;}
  .arc-age-filter-inner,.arc-price-form{gap:8px;}
  .filter-pills{gap:6px;}
  .pill{padding:5px 13px;font-size:12px;}
  .arc-price-input{width:110px;font-size:12px;}
  .arc-price-filter-lbl,.arc-age-filter-lbl{min-width:auto;}
}

/* ── Pet card grid ── */
.arc-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}

/* ── Pagination ── */
.arc-pager{margin-top:48px;display:flex;justify-content:center;}
.arc-pager .page-numbers{
  list-style:none;display:flex;gap:4px;
  align-items:center;flex-wrap:wrap;justify-content:center;
  margin:0;padding:0;
}
.arc-pager .page-numbers li{margin:0;}
.arc-pager .page-numbers a,
.arc-pager .page-numbers span{
  display:inline-flex;align-items:center;justify-content:center;gap:4px;
  min-width:42px;height:42px;padding:0 10px;
  border-radius:10px;font-size:14px;font-weight:600;
  border:1.5px solid var(--bdr);background:var(--wh);
  color:var(--ink);transition:all .2s;
}
.arc-pager .page-numbers a:hover{
  border-color:var(--or);color:var(--or);background:var(--or-l);
}
.arc-pager .page-numbers .current{
  background:var(--or-g);color:#fff;border-color:var(--or);
}
.arc-pager .page-numbers .dots{
  border:none;background:none;color:var(--soft);min-width:28px;
}
.arc-pager .page-numbers .prev,
.arc-pager .page-numbers .next{
  font-weight:700;gap:4px;
}

/* ── Empty state ── */
.arc-empty{
  text-align:center;padding:80px 20px;
  background:var(--wh);border-radius:var(--rad);
  border:1px solid var(--bdr);
}
.arc-empty-icon{font-size:56px;margin-bottom:16px;}
.arc-empty-title{font-size:18px;font-weight:700;color:var(--ink);margin-bottom:8px;}
.arc-empty-sub{font-size:14px;color:var(--soft);margin-bottom:24px;}
.arc-empty-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:12px 28px;border-radius:24px;
  background:var(--or-g);color:#fff;
  font-size:14px;font-weight:700;
  box-shadow:0 4px 16px rgba(244,116,42,.35);
  transition:all .2s;
}
.arc-empty-btn:hover{transform:translateY(-1px);box-shadow:0 6px 22px rgba(244,116,42,.45);color:#fff;}

/* ── Responsive: Tablet ── */
@media(max-width:1024px){
  .arc-grid{grid-template-columns:repeat(3,1fr);gap:16px;}
}

/* ── Responsive: SP (768px) ── */
@media(max-width:768px){
  .arc-page{padding-bottom:40px;}
  .arc-hd{margin:16px 0 18px;}
  .arc-sw{display:none;}
  .arc-sw-sp-trigger{
    display:flex;align-items:center;gap:12px;width:100%;
    background:var(--wh);border-radius:16px;padding:14px 18px;
    box-shadow:0 8px 36px rgba(0,0,0,.10);
    cursor:pointer;border:none;font-family:inherit;text-align:left;
  }
  .arc-sw-sp-text{flex:1;}
  .arc-sw-sp-main{display:block;font-size:15px;font-weight:700;color:var(--ink);}
  .arc-sw-sp-sub{display:block;font-size:11px;color:var(--soft);margin-top:2px;}

  .arc-grid{grid-template-columns:repeat(2,1fr);gap:10px;}

  .arc-filter-bar{
    flex-direction:column;align-items:stretch;
    padding:12px 14px;gap:10px;
  }
  .arc-filter-left{justify-content:space-between;width:100%;}
  .arc-filter-right{width:100%;justify-content:space-between;}
  .arc-filter-tags{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;}
  .arc-ftag{flex-shrink:0;}

  .arc-pager .page-numbers a,
  .arc-pager .page-numbers span{
    min-width:36px;height:36px;font-size:13px;
  }
  .arc-pager-text{display:none;}
}

/* ══════════════════════════════════════
   SINGLE POST (COLUMN)
══════════════════════════════════════ */

/* breadcrumb shared */
.breadcrumb{margin:16px 0;font-size:12px;color:var(--soft);}
.breadcrumb__list{list-style:none;display:flex;flex-wrap:wrap;gap:4px;align-items:center;}
.breadcrumb__item::after{content:'\203A';margin-left:6px;color:var(--bdr);}
.breadcrumb__item:last-child::after{display:none;}
.breadcrumb__link{color:var(--bl);text-decoration:none;}
.breadcrumb__link:hover{text-decoration:underline;}
.breadcrumb__current{color:var(--mid);}

/* hero image */
.sp-hero{margin:0 -20px 28px;overflow:hidden;}
.sp-hero__img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;}
@media(min-width:769px){.sp-hero{margin:0 0 32px;border-radius:var(--rad);overflow:hidden;}}

/* article wrapper */
.sp-article{max-width:800px;margin:0 auto;}

/* header */
.sp-cat-badge{
  display:inline-block;padding:4px 14px;border-radius:20px;
  font-size:12px;font-weight:700;color:#fff;
  background:var(--or-g);margin-bottom:12px;
}
.sp-title{
  font-size:26px;font-weight:800;line-height:1.4;
  color:var(--ink);margin-bottom:14px;letter-spacing:-.02em;
}
@media(min-width:769px){.sp-title{font-size:32px;}}
.sp-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;
  font-size:13px;color:var(--soft);margin-bottom:28px;
  padding-bottom:20px;border-bottom:1px solid var(--bdr2);
}
.sp-meta__author{display:flex;align-items:center;gap:6px;font-weight:600;color:var(--mid);}
.sp-meta__avatar{border-radius:50%;width:28px;height:28px;}
.sp-meta__read{background:var(--bg);padding:2px 10px;border-radius:12px;font-size:11px;}

/* TOC */
.sp-toc{
  background:var(--bg);border:1px solid var(--bdr2);
  border-radius:var(--rad);padding:20px 24px;margin-bottom:32px;
}
.sp-toc__title{font-size:15px;font-weight:800;color:var(--ink);margin-bottom:12px;}
.sp-toc__list{padding-left:20px;margin:0;}
.sp-toc__list li{margin-bottom:6px;font-size:14px;line-height:1.6;color:var(--mid);}
.sp-toc__list li a{color:var(--bl);text-decoration:none;}
.sp-toc__list li a:hover{text-decoration:underline;}
.sp-toc__list ol{padding-left:18px;margin-top:4px;}
.sp-toc__list .toc-h3{font-size:13px;color:var(--soft);}

/* sticky TOC (PC) */
@media(min-width:1060px){
  .sp-body-wrap{display:flex;gap:40px;align-items:flex-start;}
  .sp-toc{
    position:sticky;top:calc(var(--nav) + 16px);
    width:240px;flex-shrink:0;order:2;margin-bottom:0;
  }
  .sp-content{flex:1;min-width:0;order:1;}
}

/* article body */
.sp-content{
  font-size:16px;line-height:1.9;color:var(--ink);
  word-break:break-word;
}
.sp-content h2{
  font-size:22px;font-weight:800;line-height:1.4;
  margin:48px 0 18px;padding:14px 18px;
  border-left:4px solid var(--or);
  background:var(--or-l);border-radius:0 8px 8px 0;
}
.sp-content h3{
  font-size:18px;font-weight:700;line-height:1.4;
  margin:36px 0 14px;padding-bottom:8px;
  border-bottom:2px solid var(--or);
}
.sp-content h4{
  font-size:16px;font-weight:700;margin:28px 0 10px;
}
.sp-content p{margin-bottom:1.6em;}
.sp-content img{border-radius:8px;margin:20px 0;height:auto;}
.sp-content ul,.sp-content ol{margin:0 0 1.6em 1.5em;}
.sp-content li{margin-bottom:.4em;}
.sp-content a{color:var(--bl);text-decoration:underline;}
.sp-content blockquote{
  margin:24px 0;padding:16px 20px;
  border-left:4px solid var(--or);
  background:var(--bg);border-radius:0 8px 8px 0;
  color:var(--mid);font-style:italic;
}
.sp-content pre,.sp-content code{
  font-family:'SFMono-Regular',Consolas,monospace;
  font-size:14px;
}
.sp-content code{
  background:var(--bdr2);padding:2px 6px;border-radius:4px;
  color:var(--or-d);
}
.sp-content pre{
  background:#2d2d2d;color:#f8f8f2;
  padding:20px;border-radius:10px;
  overflow-x:auto;margin:24px 0;line-height:1.6;
}
.sp-content pre code{background:none;padding:0;color:inherit;}
.sp-content table{
  width:100%;border-collapse:collapse;margin:24px 0;font-size:14px;
}
.sp-content table th,.sp-content table td{
  padding:10px 14px;border:1px solid var(--bdr);text-align:left;
}
.sp-content table th{background:var(--bg);font-weight:700;}

/* author box */
.sp-author-box{
  display:flex;gap:20px;align-items:flex-start;
  background:var(--wh);border:1px solid var(--bdr);
  border-radius:var(--rad);padding:24px;margin:40px auto;
  max-width:740px;
}
.sp-author-box__img{border-radius:50%;width:80px;height:80px;object-fit:cover;}
.sp-author-box__label{font-size:11px;color:var(--soft);margin-bottom:4px;font-weight:600;letter-spacing:.06em;}
.sp-author-box__name{font-size:16px;font-weight:800;color:var(--ink);margin-bottom:6px;}
.sp-author-box__bio{font-size:13px;color:var(--mid);line-height:1.7;}
@media(max-width:640px){
  .sp-author-box{flex-direction:column;align-items:center;text-align:center;}
  .sp-author-box__img{width:64px;height:64px;}
}

/* related */
.sp-related{margin:48px auto 0;max-width:740px;}
.sp-related__grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:20px;
}
.sp-related__card{
  background:var(--wh);border:1px solid var(--bdr);
  border-radius:var(--rad);overflow:hidden;
  transition:box-shadow .2s,transform .2s;display:block;
}
.sp-related__card:hover{box-shadow:var(--sha-h);transform:translateY(-2px);}
.sp-related__thumb img{width:100%;aspect-ratio:16/10;object-fit:cover;}
.sp-related__body{padding:12px 14px;}
.sp-related__cat{
  font-size:10px;font-weight:700;color:var(--or);
  background:var(--or-l);padding:2px 8px;border-radius:10px;
}
.sp-related__title{
  font-size:14px;font-weight:700;color:var(--ink);
  margin:8px 0 6px;line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.sp-related__date{font-size:11px;color:var(--soft);}
@media(max-width:640px){
  .sp-related__grid{grid-template-columns:1fr;gap:12px;}
  .sp-related__card{display:flex;}
  .sp-related__thumb{width:120px;flex-shrink:0;}
  .sp-related__thumb img{aspect-ratio:1/1;height:100%;}
  .sp-related__body{display:flex;flex-direction:column;justify-content:center;}
}

/* CTA banner */
.sp-cta-banner{
  margin:48px auto 0;max-width:740px;
  background:var(--or-g);border-radius:var(--rad);
  padding:40px 24px;text-align:center;
}
.sp-cta-banner__text{color:#fff;font-size:18px;font-weight:700;margin-bottom:16px;}
.sp-cta-banner__btn.btn--primary{
  background:#fff;color:var(--or);font-weight:800;
  border:none;padding:14px 36px;border-radius:30px;font-size:15px;
}
.sp-cta-banner__btn.btn--primary:hover{background:var(--or-l);}


/* ══════════════════════════════════════
   PET DETAIL PAGE
══════════════════════════════════════ */

/* layout */
.pd-layout{
  display:flex;gap:32px;align-items:flex-start;
}
.pd-main{flex:0 0 65%;max-width:65%;min-width:0;}
.pd-sidebar{flex:0 0 calc(35% - 32px);min-width:0;}
.pd-sidebar__sticky{position:sticky;top:calc(var(--nav) + 16px);}

@media(max-width:768px){
  .pd-layout{flex-direction:column;gap:0;}
  .pd-main{flex:none;max-width:100%;width:100%;}
  .pd-sidebar{display:none;}
}

/* gallery */
.pd-gallery{margin-bottom:24px;}
.pd-gallery__main{
  position:relative;border-radius:var(--rad);overflow:hidden;
  background:var(--bdr2);margin-bottom:10px;
}
.pd-gallery__main img{
  width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
}
.pd-gallery__badge{
  position:absolute;top:12px;left:12px;z-index:2;
}
.pd-gallery__thumbs{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:8px;
}
.pd-gallery__thumb{
  border-radius:8px;overflow:hidden;border:2px solid transparent;
  cursor:pointer;transition:border-color .2s;padding:0;
}
.pd-gallery__thumb.active{border-color:var(--or);}
.pd-gallery__thumb:hover{border-color:var(--or-m);}
.pd-gallery__thumb img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;}

/* SP header (title + price shown only on mobile) */
.pd-sp-header{display:none;}
@media(max-width:768px){
  .pd-sp-header{display:block;margin-bottom:20px;}
  .pd-title{font-size:22px;font-weight:800;line-height:1.35;margin-bottom:8px;color:var(--ink);}
  .pd-price{margin-bottom:0;}
  .pd-price__yen{font-size:28px;font-weight:800;color:var(--or);}
  .pd-price__tax{font-size:13px;color:var(--soft);}
}

/* sections */
.pd-section{
  background:var(--wh);border:1px solid var(--bdr);
  border-radius:var(--rad);padding:24px;margin-bottom:20px;
}
.pd-section__title{
  font-size:17px;font-weight:800;color:var(--ink);
  margin-bottom:16px;padding-bottom:10px;border-bottom:2px solid var(--or);
}

/* table */
.pd-table{width:100%;border-collapse:collapse;}
.pd-table th,.pd-table td{
  padding:12px 14px;font-size:14px;
  border-bottom:1px solid var(--bdr2);text-align:left;
}
.pd-table th{
  width:140px;font-weight:700;color:var(--mid);
  background:var(--bg);white-space:nowrap;
}
.pd-table td{color:var(--ink);}
.pd-table a{color:var(--bl);}
@media(max-width:480px){
  .pd-table th,.pd-table td{display:block;width:100%;padding:8px 0;}
  .pd-table th{background:none;padding-bottom:2px;font-size:12px;border-bottom:none;}
}

/* description */
.pd-description{font-size:15px;line-height:1.85;color:var(--ink);}
.pd-description p{margin-bottom:1.4em;}
.pd-description img{border-radius:8px;margin:16px 0;height:auto;}

/* video */
.pd-video{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:var(--rad);}
.pd-video iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:none;}

/* sidebar: CTA card */
.pd-cta-card{
  background:var(--wh);border:1px solid var(--bdr);
  border-radius:var(--rad);padding:24px;margin-bottom:16px;
  box-shadow:var(--sha);
}
.pd-cta-card__title{
  font-size:17px;font-weight:800;line-height:1.35;
  color:var(--ink);margin-bottom:12px;
}
.pd-cta-card__price{margin-bottom:16px;}
.pd-cta-card__yen{font-size:32px;font-weight:800;color:var(--or);}
.pd-cta-card__tax{font-size:13px;color:var(--soft);}
.pd-cta-card__actions{display:flex;flex-direction:column;gap:10px;margin-bottom:14px;}
.pd-cta-card__btn{
  width:100%;text-align:center;justify-content:center;
  padding:14px;font-size:15px;font-weight:700;border-radius:10px;
  display:flex;align-items:center;gap:6px;
}
.pd-cta-card__btn.btn--primary{
  background:var(--or-g);color:#fff;border:none;
  box-shadow:0 4px 16px rgba(244,116,42,.3);
  transition:box-shadow .2s,transform .2s;
}
.pd-cta-card__btn.btn--primary:hover{
  box-shadow:0 6px 24px rgba(244,116,42,.4);transform:translateY(-1px);
}
.pd-cta-card__btn.btn--line{
  background:#06C755;color:#fff;border:none;
}
.pd-cta-card__btn.btn--line:hover{background:#05b04c;}
.pd-cta-card__sold{
  font-size:15px;font-weight:700;color:var(--soft);
  text-align:center;padding:14px 0;
}

/* fav btn */
.pd-fav-btn{
  width:100%;display:flex;align-items:center;justify-content:center;gap:6px;
  padding:10px;border:1.5px solid var(--bdr);border-radius:10px;
  font-size:13px;font-weight:600;color:var(--mid);
  background:var(--wh);cursor:pointer;transition:all .2s;
}
.pd-fav-btn:hover{border-color:var(--or);color:var(--or);}
.pd-fav-btn.active{border-color:var(--or);color:var(--or);background:var(--or-l);}
.pd-fav-btn__icon{font-size:18px;line-height:1;}

/* sidebar: shop card */
.pd-shop-card{
  background:var(--wh);border:1px solid var(--bdr);
  border-radius:var(--rad);padding:20px;
}
.pd-shop-card__header{display:flex;gap:12px;align-items:center;margin-bottom:12px;}
.pd-shop-card__avatar{
  width:48px;height:48px;border-radius:50%;object-fit:cover;flex-shrink:0;
}
.pd-shop-card__avatar--placeholder{
  background:var(--or-l);color:var(--or);
  display:flex;align-items:center;justify-content:center;
  font-size:20px;font-weight:800;
}
.pd-shop-card__name{font-size:14px;font-weight:700;color:var(--ink);}
.pd-shop-card__name a{color:inherit;}
.pd-shop-card__name a:hover{color:var(--or);}
.pd-shop-card__type{font-size:11px;color:var(--soft);font-weight:600;}
.pd-shop-card__address{font-size:12px;color:var(--mid);margin-bottom:12px;line-height:1.5;}
.pd-shop-card__link{
  display:block;text-align:center;padding:8px;
  font-size:13px;font-weight:600;color:var(--bl);
  border:1.5px solid var(--bl);border-radius:8px;
  transition:all .2s;
}
.pd-shop-card__link:hover{background:var(--bl-l);}

/* badge */
.badge{
  display:inline-block;padding:4px 12px;border-radius:16px;
  font-size:11px;font-weight:700;line-height:1;
}
.badge--available{background:var(--gr-l);color:var(--gr-d);}
.badge--negotiating{background:var(--or-l);color:var(--or-d);}
.badge--sold{background:var(--bdr2);color:var(--soft);}

/* related pets */
.pd-related{margin:48px 0 0;}
.pd-related__grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:20px;
}
.pd-related__card{
  background:var(--wh);border:1px solid var(--bdr);
  border-radius:var(--rad);overflow:hidden;display:block;
  transition:box-shadow .2s,transform .2s;
}
.pd-related__card:hover{box-shadow:var(--sha-h);transform:translateY(-2px);}
.pd-related__thumb img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;}
.pd-related__body{padding:12px 14px;}
.pd-related__title{
  font-size:13px;font-weight:700;color:var(--ink);margin-bottom:4px;
  line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.pd-related__breed{font-size:11px;color:var(--soft);display:block;margin-bottom:4px;}
.pd-related__price{font-size:14px;font-weight:800;color:var(--or);}
@media(max-width:768px){
  .pd-related__grid{grid-template-columns:repeat(2,1fr);gap:10px;}
}
@media(max-width:480px){
  .pd-related__grid{grid-template-columns:repeat(2,1fr);gap:8px;}
  .pd-related__body{padding:10px 10px;}
}

/* floating CTA (mobile) */
.pd-floating-cta{
  position:fixed;bottom:0;left:0;right:0;z-index:90;
  background:var(--wh);border-top:1px solid var(--bdr);
  box-shadow:0 -4px 20px rgba(0,0,0,.08);
  transform:translateY(100%);transition:transform .3s;
  display:none;
}
.pd-floating-cta.visible{transform:translateY(0);}
@media(max-width:768px){.pd-floating-cta{display:block;}}
.pd-floating-cta__inner{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 16px;gap:12px;
}
.pd-floating-cta__price{font-size:20px;font-weight:800;color:var(--or);white-space:nowrap;}
.pd-floating-cta__button{
  flex:1;max-width:240px;text-align:center;
  padding:12px 20px;border-radius:10px;font-size:14px;font-weight:700;
  background:var(--or-g);color:#fff;
  box-shadow:0 4px 16px rgba(244,116,42,.3);
}
.pd-floating-cta__button:hover{opacity:.9;}

/* ── Trust badges (research: 信頼バッジ) ── */
.pd-trust-badges{
  display:flex;flex-wrap:wrap;gap:8px;
  margin:16px 0;
}
.pd-trust-badge{
  display:inline-flex;align-items:center;gap:5px;
  padding:6px 12px;border-radius:20px;font-size:11px;font-weight:700;
  border:1.5px solid;white-space:nowrap;
}
.pd-trust-badge--green{color:var(--gr-d);background:var(--gr-l);border-color:var(--gr);}
.pd-trust-badge--blue{color:var(--bl-d);background:var(--bl-l);border-color:var(--bl);}
.pd-trust-badge--or{color:var(--or-d);background:var(--or-l);border-color:var(--or);}

/* ── Seller rating stars ── */
.pd-seller-rating{display:flex;align-items:center;gap:6px;margin:6px 0;}
.pd-rating-stars{color:#F5C518;font-size:15px;letter-spacing:1px;}
.pd-rating-score{font-size:14px;font-weight:700;color:var(--ink);}
.pd-rating-count{font-size:12px;color:var(--soft);}

/* btn shared */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:10px 20px;border-radius:8px;font-size:14px;font-weight:600;
  cursor:pointer;transition:all .2s;border:none;text-decoration:none;
}
.btn--primary{background:var(--or-g);color:#fff;}
.btn--primary:hover{box-shadow:0 4px 16px rgba(244,116,42,.3);}
.btn--lg{padding:14px 28px;font-size:15px;}

/* ══════════════════════════════════════
   TAXONOMY HERO
══════════════════════════════════════ */
.tax-hero{
  margin-bottom:32px;
  border-radius:var(--rad);
  overflow:hidden;
  padding:48px 0;
  text-align:center;
  position:relative;
}

/* 動物種別カラー */
.tax-hero--type-dog{
  background:linear-gradient(135deg,#FFF3E8 0%,#FFD9B0 100%);
}
.tax-hero--type-cat{
  background:linear-gradient(135deg,#EAF2FD 0%,#B8D4FF 100%);
}
.tax-hero--type-rescue{
  background:linear-gradient(135deg,#E8F8EF 0%,#A8DFC0 100%);
}
.tax-hero--breed{
  background:linear-gradient(135deg,var(--bdr2) 0%,#EDE8FF 100%);
}
.tax-hero--region{
  background:linear-gradient(135deg,#E8F4FF 0%,#C8E0FF 100%);
}

.tax-hero__inner{max-width:720px;margin:0 auto;padding:0 20px;}
.tax-hero__emoji{font-size:52px;line-height:1;margin-bottom:12px;}
.tax-hero__eyebrow{font-size:12px;color:var(--soft);margin-bottom:8px;font-weight:600;}
.tax-hero__eyebrow a{color:var(--soft);text-decoration:underline;}
.tax-hero__title{
  font-size:clamp(24px,4vw,36px);font-weight:800;
  color:var(--ink);margin-bottom:10px;line-height:1.3;
}
.tax-hero__sub{font-size:15px;color:var(--mid);margin-bottom:20px;}
.tax-hero__desc{font-size:14px;color:var(--mid);line-height:1.8;max-width:560px;margin:0 auto 20px;}
.tax-hero__count{
  display:inline-flex;align-items:center;gap:6px;
  background:#fff;border-radius:20px;padding:6px 16px;
  font-size:14px;font-weight:700;color:var(--or);
  box-shadow:0 2px 8px rgba(0,0,0,.08);margin-bottom:20px;
}

/* 人気品種・関連チップ */
.tax-hero__chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:12px;}
.tax-hero__chip{
  padding:6px 16px;border-radius:20px;font-size:13px;font-weight:600;
  background:#fff;color:var(--ink);border:1.5px solid var(--bdr);
  transition:all .18s;box-shadow:0 1px 4px rgba(0,0,0,.06);
}
.tax-hero__chip:hover{border-color:var(--or);color:var(--or);background:var(--or-l);}

/* 関連セクション */
.tax-related-breeds,.tax-related-regions{
  margin-top:48px;padding:28px;
  background:var(--wh);border-radius:var(--rad);border:1px solid var(--bdr);
}
.tax-related-breeds h2,.tax-related-regions h2{
  font-size:16px;font-weight:800;color:var(--ink);margin-bottom:16px;
}
.tax-breed-chips,.tax-region-chips{
  display:flex;flex-wrap:wrap;gap:8px;
}
.tax-breed-chip,.tax-region-chip{
  padding:6px 16px;border-radius:20px;font-size:13px;font-weight:600;
  border:1.5px solid var(--bdr);color:var(--mid);background:#fff;
  transition:all .18s;
}
.tax-breed-chip:hover,.tax-region-chip:hover{
  border-color:var(--or);color:var(--or);background:var(--or-l);
}

@media(max-width:768px){
  .tax-hero{padding:32px 0;margin-bottom:20px;}
  .tax-hero__emoji{font-size:40px;}
}

/* ══════════════════════════════════════
   LANDING PAGES (breeder / shop / rescue)
══════════════════════════════════════ */
.lp-hero{
  border-radius:var(--rad);overflow:hidden;margin-bottom:32px;
  padding:56px 24px;text-align:center;color:#fff;
  position:relative;
}
.lp-hero--breeder{background:var(--or-g);}
.lp-hero--shop{background:linear-gradient(135deg,#3F88E4,#6EB5FF);}
.lp-hero--rescue{background:linear-gradient(135deg,#2EA66A,#5DDB9A);}
.lp-hero__title{
  font-size:clamp(22px,4vw,34px);font-weight:800;
  margin-bottom:12px;line-height:1.3;
  text-shadow:0 2px 12px rgba(0,0,0,.18);
}
.lp-hero__sub{
  font-size:15px;opacity:.92;max-width:560px;
  margin:0 auto 28px;line-height:1.7;
}
.lp-hero__stats{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.2);backdrop-filter:blur(8px);
  border-radius:20px;padding:8px 20px;font-size:14px;font-weight:700;
}

/* 特徴カード3枚 */
.lp-features{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
  margin-bottom:32px;
}
.lp-feature{
  background:var(--wh);border-radius:var(--rad);
  border:1px solid var(--bdr);padding:24px 20px;text-align:center;
}
.lp-feature__icon{font-size:32px;margin-bottom:10px;}
.lp-feature__title{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:6px;}
.lp-feature__desc{font-size:13px;color:var(--mid);line-height:1.7;}

@media(max-width:768px){
  .lp-hero{padding:36px 16px;margin-bottom:20px;}
  .lp-features{grid-template-columns:1fr;}
}

/* ══════════════════════════════════════
   FAVORITES PAGE
══════════════════════════════════════ */
.fav-page{padding-bottom:60px;}
.pfav.fav-active{color:#e53e3e;}

/* ============================================================
   SELLER PAGES (出品者向けLP・料金・登録)
   ============================================================ */
.lp-hero--seller{
  background:var(--or-g);color:#fff;
  padding:clamp(56px,10vw,100px) 24px;text-align:center;
  position:relative;overflow:hidden;
}
.lp-hero--seller::before{
  content:'';position:absolute;inset:0;
  background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Ccircle cx='30' cy='30' r='20'/%3E%3C/g%3E%3C/svg%3E") repeat;
}
.lp-hero--seller .lp-hero-title{
  font-size:clamp(22px,4vw,40px);font-weight:900;
  line-height:1.25;margin-bottom:16px;position:relative;
  text-shadow:0 2px 8px rgba(0,0,0,.12);
}
.lp-hero--seller .lp-hero-sub{
  font-size:clamp(14px,2vw,18px);opacity:.9;
  margin-bottom:28px;position:relative;
}
.lp-hero--blue{background:linear-gradient(135deg,var(--bl-d),var(--bl));}
.lp-hero--green{background:linear-gradient(135deg,var(--gr-d),var(--gr));}

/* Stats */
.lp-stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
  padding:40px 0;
}
.lp-stat-card{
  background:var(--wh);border:1px solid var(--bdr);border-radius:var(--rad);
  padding:28px 20px;text-align:center;
  box-shadow:var(--sha);
}
.lp-stat-num{font-size:clamp(28px,4vw,42px);font-weight:900;color:var(--or);line-height:1;}
.lp-stat-label{font-size:13px;color:var(--soft);margin-top:8px;}

/* Features grid (seller) */
.lp-features-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
  padding:40px 0;
}
.lp-feature-card{
  background:var(--wh);border:1px solid var(--bdr);border-radius:var(--rad-lg);
  padding:28px 24px;text-align:center;
  box-shadow:var(--sha);transition:box-shadow .2s,transform .2s;
}
.lp-feature-card:hover{box-shadow:var(--sha-h);transform:translateY(-3px);}
.lp-feature-icon{font-size:36px;margin-bottom:12px;}
.lp-feature-title{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:8px;}
.lp-feature-desc{font-size:13px;color:var(--soft);line-height:1.65;}

/* Steps */
.lp-steps{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
  padding:40px 0;position:relative;
}
.lp-step{
  background:var(--wh);border:1px solid var(--bdr);border-radius:var(--rad);
  padding:24px 20px;text-align:center;position:relative;
}
.lp-step-num{
  width:40px;height:40px;border-radius:50%;
  background:var(--or-g);color:#fff;
  font-size:16px;font-weight:800;
  display:inline-flex;align-items:center;justify-content:center;
  margin-bottom:12px;
}
.lp-step-title{font-size:14px;font-weight:700;color:var(--ink);margin-bottom:6px;}
.lp-step-desc{font-size:12px;color:var(--soft);line-height:1.6;}

/* Seller type cards */
.lp-seller-types{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
  padding:40px 0;
}
.lp-seller-type-card{
  border-radius:var(--rad-lg);overflow:hidden;
  box-shadow:var(--sha);transition:box-shadow .2s,transform .2s;
  text-decoration:none;display:block;
}
.lp-seller-type-card:hover{box-shadow:var(--sha-h);transform:translateY(-3px);}
.lp-stc-head{padding:28px 24px 20px;color:#fff;text-align:center;}
.lp-stc-head--or{background:var(--or-g);}
.lp-stc-head--bl{background:linear-gradient(135deg,var(--bl-d),var(--bl));}
.lp-stc-head--gr{background:linear-gradient(135deg,var(--gr-d),var(--gr));}
.lp-stc-icon{font-size:40px;margin-bottom:8px;}
.lp-stc-title{font-size:16px;font-weight:800;margin-bottom:4px;}
.lp-stc-sub{font-size:12px;opacity:.85;}
.lp-stc-body{background:var(--wh);padding:16px 24px;text-align:center;}
.lp-stc-cta{
  display:inline-block;padding:10px 24px;border-radius:8px;
  font-size:13px;font-weight:700;color:#fff;
  background:var(--or-g);margin-top:4px;
}

/* CTA Banner */
.lp-cta-banner{
  background:var(--or-g);border-radius:var(--rad-lg);
  padding:40px 32px;text-align:center;color:#fff;margin:40px 0;
}
.lp-cta-banner h2{font-size:clamp(18px,3vw,26px);font-weight:900;margin-bottom:12px;}
.lp-cta-banner p{font-size:14px;opacity:.9;margin-bottom:24px;}
.btn-or{
  display:inline-block;padding:14px 36px;border-radius:10px;
  font-size:15px;font-weight:800;color:#fff;
  background:var(--or-g);
  box-shadow:0 4px 20px rgba(244,116,42,.4);
  transition:opacity .2s,transform .2s;text-decoration:none;
}
.btn-or:hover{opacity:.9;transform:translateY(-1px);}
.btn-wh{
  display:inline-block;padding:14px 36px;border-radius:10px;
  font-size:15px;font-weight:800;color:var(--or);
  background:#fff;
  box-shadow:0 4px 20px rgba(0,0,0,.12);
  transition:opacity .2s,transform .2s;text-decoration:none;
}
.btn-wh:hover{opacity:.9;transform:translateY(-1px);}

/* Pricing */
.pricing-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
  padding:40px 0;
  align-items:start;
}
.pricing-card{
  background:var(--wh);border:1px solid var(--bdr);border-radius:var(--rad-lg);
  padding:32px 24px;text-align:center;
  box-shadow:var(--sha);position:relative;
}
.pricing-card--featured{
  border-color:var(--or);
  box-shadow:0 8px 32px rgba(244,116,42,.18);
  transform:scale(1.04);
}
.pricing-badge{
  position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  background:var(--or-g);color:#fff;
  font-size:11px;font-weight:700;
  padding:4px 14px;border-radius:20px;white-space:nowrap;
}
.pricing-plan-name{font-size:18px;font-weight:800;color:var(--ink);margin-bottom:8px;}
.pricing-price{font-size:36px;font-weight:900;color:var(--or);line-height:1;}
.pricing-unit{font-size:13px;color:var(--soft);margin-bottom:20px;}
.pricing-features{
  list-style:none;padding:0;margin:0 0 24px;text-align:left;
}
.pricing-features li{
  font-size:13px;color:var(--ink);padding:7px 0;
  border-bottom:1px solid var(--bdr);
  padding-left:20px;position:relative;
}
.pricing-features li::before{
  content:'✓';color:var(--gr);font-weight:700;
  position:absolute;left:0;
}
.pricing-faq{padding:40px 0;}
.pricing-faq-item{
  border:1px solid var(--bdr);border-radius:var(--rad);
  padding:20px 24px;margin-bottom:12px;
  background:var(--wh);
}
.pricing-faq-q{font-size:14px;font-weight:700;color:var(--ink);margin-bottom:8px;}
.pricing-faq-a{font-size:13px;color:var(--soft);line-height:1.7;}

/* Registration pages */
.reg-hero{
  padding:clamp(48px,8vw,80px) 24px;text-align:center;color:#fff;
  position:relative;overflow:hidden;
}
.reg-hero--or{background:var(--or-g);}
.reg-hero--bl{background:linear-gradient(135deg,var(--bl-d),var(--bl));}
.reg-hero--gr{background:linear-gradient(135deg,var(--gr-d),var(--gr));}
.reg-hero-title{font-size:clamp(22px,3.5vw,36px);font-weight:900;margin-bottom:12px;}
.reg-hero-sub{font-size:clamp(13px,2vw,16px);opacity:.9;margin-bottom:28px;}
.reg-requirements{
  background:var(--wh);border:1px solid var(--bdr);border-radius:var(--rad);
  padding:28px 32px;margin:32px 0;
}
.reg-requirements h3{font-size:16px;font-weight:700;margin-bottom:16px;color:var(--ink);}
.reg-requirements ul{list-style:none;padding:0;margin:0;}
.reg-requirements li{
  font-size:14px;color:var(--ink);padding:10px 0 10px 28px;
  border-bottom:1px solid var(--bdr);position:relative;
}
.reg-requirements li:last-child{border-bottom:none;}
.reg-requirements li::before{
  content:'📄';position:absolute;left:0;font-size:16px;
}
.reg-benefits{
  display:grid;grid-template-columns:repeat(2,1fr);gap:16px;
  margin:32px 0;
}
.reg-benefit-card{
  background:var(--wh);border:1px solid var(--bdr);border-radius:var(--rad);
  padding:20px;display:flex;align-items:flex-start;gap:12px;
}
.reg-benefit-icon{font-size:24px;flex-shrink:0;}
.reg-benefit-text{font-size:13px;color:var(--ink);font-weight:600;line-height:1.5;}

/* Section headers */
.lp-section{padding:56px 0;}
.lp-section-hd{text-align:center;margin-bottom:36px;}
.lp-section-title{font-size:clamp(20px,3vw,28px);font-weight:900;color:var(--ink);}
.lp-section-sub{font-size:14px;color:var(--soft);margin-top:8px;}

/* Responsive */
@media(max-width:768px){
  .lp-stats,.lp-features-grid,.lp-steps,.lp-seller-types{grid-template-columns:1fr;}
  .pricing-grid{grid-template-columns:1fr;}
  .pricing-card--featured{transform:none;}
  .reg-benefits{grid-template-columns:1fr;}
  .lp-stc-head{padding:20px 16px 14px;}
}

/* ============================================================
   CONTENT PAGES (about, faq, guide, company, legal, privacy)
   ============================================================ */

/* Page hero (simple) */
.pg-hero{
  background:linear-gradient(135deg,#fff9f6,#fff3ee);
  border-bottom:3px solid var(--or);
  padding:clamp(40px,6vw,72px) 24px;text-align:center;
}
.pg-hero-eyebrow{
  font-size:11px;font-weight:700;color:var(--or);letter-spacing:.1em;
  text-transform:uppercase;margin-bottom:10px;
}
.pg-hero-title{font-size:clamp(22px,3.5vw,36px);font-weight:900;color:var(--ink);margin-bottom:10px;}
.pg-hero-sub{font-size:clamp(13px,2vw,16px);color:var(--soft);}

/* Page header */
.pg-hd{
  padding:clamp(32px,5vw,56px) 0 24px;
  border-bottom:1px solid var(--bdr);margin-bottom:40px;
}
.pg-hd h1{font-size:clamp(22px,3vw,30px);font-weight:900;color:var(--ink);}
.pg-hd .pg-updated{font-size:12px;color:var(--soft);margin-top:8px;}

/* Mission/Vision */
.about-mission{
  background:var(--or-g);color:#fff;
  border-radius:var(--rad-lg);padding:40px 48px;
  margin:40px 0;text-align:center;
}
.about-mission-text{font-size:clamp(20px,3vw,28px);font-weight:900;margin-bottom:12px;}
.about-vision-text{font-size:14px;opacity:.9;line-height:1.8;max-width:600px;margin:0 auto;}

/* FAQ */
.faq-list{margin:0;padding:0;list-style:none;}
.faq-item details{
  border:1px solid var(--bdr);border-radius:var(--rad);
  margin-bottom:10px;background:var(--wh);
  overflow:hidden;
}
.faq-item summary{
  padding:18px 24px;font-size:14px;font-weight:700;color:var(--ink);
  cursor:pointer;display:flex;align-items:center;gap:12px;
  list-style:none;
  transition:background .15s;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::before{
  content:'Q';
  width:26px;height:26px;border-radius:50%;
  background:var(--or-g);color:#fff;font-size:12px;font-weight:800;
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
}
.faq-item summary::after{
  content:'';margin-left:auto;
  width:10px;height:10px;
  border-right:2px solid var(--soft);border-bottom:2px solid var(--soft);
  transform:rotate(45deg);transition:transform .2s;flex-shrink:0;
}
.faq-item details[open] summary::after{transform:rotate(-135deg);}
.faq-item summary:hover{background:#fafafa;}
.faq-answer{
  padding:16px 24px 20px 62px;font-size:13px;color:var(--soft);
  line-height:1.75;border-top:1px solid var(--bdr);
}

/* Guide grid */
.guide-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:20px;
  margin:40px 0;
}
.guide-card{
  background:var(--wh);border:1px solid var(--bdr);border-radius:var(--rad);
  padding:24px;display:flex;align-items:flex-start;gap:16px;
  box-shadow:var(--sha);transition:box-shadow .2s,transform .2s;
  text-decoration:none;color:inherit;
}
.guide-card:hover{box-shadow:var(--sha-h);transform:translateY(-2px);}
.guide-card-icon{font-size:32px;flex-shrink:0;}
.guide-card-body{}
.guide-card-title{font-size:14px;font-weight:700;color:var(--ink);margin-bottom:6px;}
.guide-card-desc{font-size:12px;color:var(--soft);line-height:1.6;}

/* Company/Legal table */
.company-table{
  width:100%;border-collapse:collapse;margin:24px 0;
}
.company-table tr{border-bottom:1px solid var(--bdr);}
.company-table tr:last-child{border-bottom:none;}
.company-table dt,.company-table th{
  padding:16px 20px 16px 0;
  font-size:13px;font-weight:700;color:var(--ink);
  width:160px;vertical-align:top;
  white-space:nowrap;
}
.company-table dd,.company-table td{
  padding:16px 0;font-size:13px;color:var(--soft);line-height:1.7;
}

/* Company table using dl */
.company-dl{margin:24px 0;}
.company-dl-row{
  display:grid;grid-template-columns:160px 1fr;
  border-bottom:1px solid var(--bdr);
  padding:16px 0;gap:16px;
}
.company-dl-row:last-child{border-bottom:none;}
.company-dl-row dt{font-size:13px;font-weight:700;color:var(--ink);padding:0;}
.company-dl-row dd{font-size:13px;color:var(--soft);line-height:1.7;margin:0;}

/* Terms/Privacy content */
.legal-content{
  max-width:720px;margin:0 auto;
  font-size:14px;line-height:1.9;color:var(--ink);
}
.legal-content h2{
  font-size:16px;font-weight:700;margin:40px 0 12px;
  padding-bottom:8px;border-bottom:2px solid var(--or);color:var(--ink);
}
.legal-content h3{
  font-size:14px;font-weight:700;margin:24px 0 8px;color:var(--ink);
}
.legal-content p{margin-bottom:16px;}
.legal-content ol,.legal-content ul{padding-left:20px;margin-bottom:16px;}
.legal-content li{margin-bottom:6px;}

/* Contact */
.contact-info-cards{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
  margin:32px 0;
}
.contact-info-card{
  background:var(--wh);border:1px solid var(--bdr);border-radius:var(--rad);
  padding:24px;text-align:center;box-shadow:var(--sha);
}
.contact-info-icon{font-size:28px;margin-bottom:10px;}
.contact-info-title{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:6px;}
.contact-info-text{font-size:12px;color:var(--soft);line-height:1.6;}
.contact-form-wrap{
  background:var(--wh);border:1px solid var(--bdr);border-radius:var(--rad-lg);
  padding:36px 40px;margin:32px 0;
  box-shadow:var(--sha);
}
.contact-form-wrap h2{font-size:18px;font-weight:800;margin-bottom:24px;color:var(--ink);}

/* Responsive */
@media(max-width:768px){
  .about-mission{padding:28px 20px;}
  .guide-grid{grid-template-columns:1fr;}
  .contact-info-cards{grid-template-columns:1fr;}
  .company-dl-row{grid-template-columns:1fr;gap:4px;}
  .company-dl-row dt{font-weight:700;color:var(--or);}
  .contact-form-wrap{padding:24px 20px;}
}

/* ══════════════════════════════════════════════════════
   wannya 固定ページ コンポーネント CSS v3.0
   (components.css より統合)
══════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════
   TYPOGRAPHY SYSTEM
══════════════════════════════════════════════════════ */

/* 見出し */
.t-display {
  font-family: 'M PLUS Rounded 1c', 'Outfit', sans-serif;
  font-size: clamp(36px, 6vw, var(--text-5xl));
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -.04em;
  font-feature-settings: 'palt' 1;
}
.t-h1 {
  font-family: 'M PLUS Rounded 1c', 'Outfit', sans-serif;
  font-size: clamp(28px, 4.5vw, var(--text-4xl));
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.03em;
  font-feature-settings: 'palt' 1;
}
.t-h2 {
  font-family: 'M PLUS Rounded 1c', 'Outfit', sans-serif;
  font-size: clamp(22px, 3vw, var(--text-3xl));
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.025em;
  font-feature-settings: 'palt' 1;
}
.t-h3 {
  font-family: 'M PLUS Rounded 1c', 'Outfit', sans-serif;
  font-size: clamp(18px, 2.2vw, var(--text-xl));
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -.02em;
  font-feature-settings: 'palt' 1;
}
.t-h4 {
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -.01em;
}
.t-body {
  font-size: var(--text-base);
  line-height: 1.75;
  letter-spacing: .01em;
}
.t-body-sm {
  font-size: var(--text-sm);
  line-height: 1.7;
}
.t-caption {
  font-size: var(--text-xs);
  line-height: 1.6;
  color: var(--ink-3);
}
.t-label {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.t-gradient {
  background: var(--g-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ══════════════════════════════════════════════════════
   A. セクションレイアウト
══════════════════════════════════════════════════════ */

.section {
  padding: var(--space-9) 0;
  position: relative;
  overflow: hidden;
  background-color: #ffffff;
  background-image: none;
}
.section--sm {
  padding: var(--space-7) 0;
}
.section--lg {
  padding: calc(var(--space-9) * 1.5) 0;
}

/* グレー背景バリアント — クリーンなウォームニュートラル */
.section--gray {
  background-color: #F8F7F4;
  background-image: none;
}
.section--gray::before { display: none; }

/* クリーム背景バリアント */
.section--warm {
  background: var(--g-warm);
}

/* ダークバックグラウンドバリアント */
.section--dark {
  background: var(--g-dark);
  color: var(--ink-inv);
}
.section--dark::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 30% 40%, rgba(244,116,42,.15) 0%, transparent 55%),
              radial-gradient(ellipse at 80% 70%, rgba(63,136,228,.10) 0%, transparent 50%);
  pointer-events: none;
}
.section--dark .section-label { color: rgba(255,255,255,.5); }
.section--dark .section-title { color: #fff; }
.section--dark .section-desc  { color: var(--ink-inv-2); }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}
.container--sm { max-width: var(--container-sm); }
.container--md { max-width: var(--container-md); }
.container--lg { max-width: var(--container-lg); }

/* セクションヘッダー */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--or);
  margin-bottom: var(--space-4);
}
.section-label::before {
  content: '';
  display: block;
  width: 20px;
  height: 2px;
  background: var(--g-brand);
  border-radius: 2px;
}
.section-title {
  font-family: 'M PLUS Rounded 1c', 'Outfit', sans-serif;
  font-size: clamp(24px, 3.5vw, var(--text-3xl));
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.2;
  font-feature-settings: 'palt' 1;
  margin-bottom: var(--space-4);
}
.section-desc {
  font-size: var(--text-base);
  color: var(--ink-2);
  line-height: 1.8;
  max-width: 600px;
}
.section-header {
  margin-bottom: var(--space-8);
}
.section-header--center {
  text-align: center;
}
.section-header--center .section-label {
  justify-content: center;
}
.section-header--center .section-label::before { display: none; }
.section-header--center .section-desc {
  margin: 0 auto;
}

/* ══════════════════════════════════════════════════════
   B. ヒーローコンポーネント v3 (.hero-v3)
══════════════════════════════════════════════════════ */

.hero-v3 {
  position: relative;
  min-height: calc(100svh - var(--nav));
  margin-top: var(--nav);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: linear-gradient(135deg, #FFF8F3 0%, #FFF2E8 40%, #FFE8D4 100%);
}

/* メッシュ背景レイヤー */
.hero-v3::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 15% 60%, rgba(244,116,42,.15) 0%, transparent 45%),
    radial-gradient(ellipse at 85% 30%, rgba(255,154,92,.12) 0%, transparent 40%),
    radial-gradient(ellipse at 50% 90%, rgba(244,116,42,.08) 0%, transparent 40%);
  pointer-events: none;
}

/* 右側波形クリップ（装飾レイヤー） */
.hero-v3::after {
  content: '';
  position: absolute;
  right: -2%;
  top: 0;
  bottom: 0;
  width: 48%;
  background: linear-gradient(145deg, rgba(244,116,42,.10) 0%, rgba(255,154,92,.16) 100%);
  clip-path: ellipse(90% 70% at 100% 50%);
  pointer-events: none;
}

.hero-v3-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container-lg);
  margin: 0 auto;
  padding: var(--space-8) 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: center;
}

/* 左テキストエリア */
.hero-v3-text { position: relative; }

.hero-v3-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(244,116,42,.1);
  border: 1px solid rgba(244,116,42,.2);
  border-radius: var(--rad-full);
  padding: 6px 14px;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--or);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: var(--space-5);
  backdrop-filter: blur(8px);
}
.hero-v3-eyebrow svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  flex-shrink: 0;
}

.hero-v3-title {
  font-family: 'M PLUS Rounded 1c', 'Outfit', sans-serif;
  font-size: clamp(36px, 5.5vw, 72px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -.04em;
  font-feature-settings: 'palt' 1;
  color: var(--ink);
  margin-bottom: var(--space-5);
}
.hero-v3-title .accent {
  background: var(--g-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-v3-sub {
  font-size: clamp(15px, 1.4vw, 18px);
  color: var(--ink-2);
  line-height: 1.8;
  margin-bottom: var(--space-7);
  max-width: 480px;
}

.hero-v3-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

/* CTAボタン — プライマリ */
.btn-hero {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 28px;
  background: var(--g-brand);
  color: #fff;
  font-size: var(--text-base);
  font-weight: 700;
  border-radius: var(--rad-full);
  box-shadow: var(--sha-or);
  transition: var(--t-spring);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}
.btn-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.15) 0%, transparent 50%);
}
.btn-hero:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: var(--sha-or-h);
}
.btn-hero:active { transform: scale(.98); }
.btn-hero svg {
  width: 18px;
  height: 18px;
  stroke: #fff;
  fill: none;
  flex-shrink: 0;
  transition: transform .2s;
}
.btn-hero:hover svg { transform: translateX(3px); }

/* CTAボタン — セカンダリ */
.btn-hero-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 52px;
  padding: 0 24px;
  background: rgba(255,255,255,.8);
  backdrop-filter: blur(12px);
  color: var(--ink);
  font-size: var(--text-base);
  font-weight: 600;
  border-radius: var(--rad-full);
  border: 1.5px solid var(--bdr);
  transition: var(--t-base);
  white-space: nowrap;
}
.btn-hero-ghost:hover {
  background: #fff;
  border-color: var(--or);
  color: var(--or);
}
.btn-hero-ghost svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
}

/* 右SVGイラストエリア */
.hero-v3-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-v3-visual-inner {
  position: relative;
  width: 100%;
  max-width: 520px;
  animation: float 5s ease-in-out infinite;
}

/* ヒーロー統計バー */
.hero-v3-stats {
  display: flex;
  gap: var(--space-6);
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(0,0,0,.07);
}
.hero-v3-stat-num {
  font-family: 'M PLUS Rounded 1c', 'Outfit', sans-serif;
  font-size: var(--text-2xl);
  font-weight: 900;
  letter-spacing: -.03em;
  color: var(--or);
  line-height: 1;
}
.hero-v3-stat-label {
  font-size: var(--text-xs);
  color: var(--ink-3);
  margin-top: 4px;
}

/* スクロールインジケーター */
.hero-v3-scroll {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--ink-3);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  animation: bounceScroll 2s ease infinite;
  z-index: 2;
}
.hero-v3-scroll svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
}
@keyframes bounceScroll {
  0%,100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(6px); }
}

/* Hero SP */
@media (max-width: 768px) {
  .hero-v3 { min-height: auto; padding-bottom: var(--space-7); }
  .hero-v3::after { display: none; }
  .hero-v3-inner {
    grid-template-columns: 1fr;
    gap: var(--space-6);
    text-align: center;
  }
  .hero-v3-sub     { margin: 0 auto var(--space-6); }
  .hero-v3-actions { justify-content: center; }
  .hero-v3-stats   { justify-content: center; }
  .hero-v3-visual  { order: -1; }
  .hero-v3-visual-inner { max-width: 280px; }
  .hero-v3-scroll  { display: none; }
}

/* ══════════════════════════════════════════════════════
   C. Bento グリッド (.bento-grid)
══════════════════════════════════════════════════════ */

.bento-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto;
  gap: 16px;
}

/* デフォルトエリア定義 */
.bento-grid > .bento-a { grid-column: span 7; grid-row: span 2; }
.bento-grid > .bento-b { grid-column: span 5; }
.bento-grid > .bento-c { grid-column: span 5; }
.bento-grid > .bento-d { grid-column: span 4; }
.bento-grid > .bento-e { grid-column: span 4; }
.bento-grid > .bento-f { grid-column: span 4; }

/* named-areas バリアント */
.bento-grid--named {
  grid-template-areas:
    "a a a a a a a b b b b b"
    "a a a a a a a c c c c c"
    "d d d d e e e e f f f f";
}
.bento-grid--named > .bento-a { grid-area: a; }
.bento-grid--named > .bento-b { grid-area: b; }
.bento-grid--named > .bento-c { grid-area: c; }
.bento-grid--named > .bento-d { grid-area: d; }
.bento-grid--named > .bento-e { grid-area: e; }
.bento-grid--named > .bento-f { grid-area: f; }

/* Bento カード基底 */
.bento-card {
  background: var(--wh);
  border-radius: var(--rad-xl);
  padding: var(--space-6);
  box-shadow: var(--sha-md);
  transition: var(--t-base);
  position: relative;
  overflow: hidden;
}
.bento-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sha-xl);
}
.bento-card--brand {
  background: var(--g-brand);
  color: #fff;
}
.bento-card--dark {
  background: var(--g-dark);
  color: #fff;
}
.bento-card--warm {
  background: var(--g-warm);
}
.bento-card--glass {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
}

/* Bento カード装飾 */
.bento-card__label {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-3);
  margin-bottom: var(--space-3);
}
.bento-card--brand .bento-card__label { color: rgba(255,255,255,.65); }
.bento-card__num {
  font-family: 'M PLUS Rounded 1c', 'Outfit', sans-serif;
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: 1;
}
.bento-card__desc {
  font-size: var(--text-sm);
  color: var(--ink-2);
  margin-top: var(--space-3);
  line-height: 1.6;
}
.bento-card--brand .bento-card__desc { color: rgba(255,255,255,.8); }

/* Bento SP */
@media (max-width: 768px) {
  .bento-grid,
  .bento-grid--named {
    grid-template-columns: 1fr;
    grid-template-areas: none;
  }
  .bento-grid > *,
  .bento-grid--named > * {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    grid-area: auto !important;
  }
}

/* ══════════════════════════════════════════════════════
   D. ステータスバッジ (.badge)
══════════════════════════════════════════════════════ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--rad-full);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
}
.badge::before {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.badge--green {
  background: var(--gr-l);
  color: var(--gr-d);
}
.badge--green::before { background: var(--gr); box-shadow: 0 0 0 2px rgba(46,166,106,.2); }

.badge--orange {
  background: var(--or-pale);
  color: var(--or-d);
}
.badge--orange::before { background: var(--or); box-shadow: 0 0 0 2px rgba(244,116,42,.2); }

.badge--blue {
  background: var(--bl-l);
  color: var(--bl-d);
}
.badge--blue::before { background: var(--bl); box-shadow: 0 0 0 2px rgba(63,136,228,.2); }

.badge--gray {
  background: var(--surface-2);
  color: var(--ink-2);
}
.badge--gray::before { background: var(--ink-3); }

/* パルスドット（オンライン系） */
.badge--pulse::before {
  animation: dotPulse 1.8s ease infinite;
}
@keyframes dotPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(46,166,106,.4); }
  50%      { box-shadow: 0 0 0 5px transparent; }
}

/* 大きいバッジ */
.badge--lg {
  height: 30px;
  padding: 0 14px;
  font-size: var(--text-sm);
  gap: 8px;
}
.badge--lg::before { width: 8px; height: 8px; }

/* グラデーションバッジ（人気プランなど） */
.badge--popular {
  background: var(--g-brand);
  color: #fff;
}
.badge--popular::before { background: rgba(255,255,255,.7); }

/* ══════════════════════════════════════════════════════
   E. 機能カード v2 (.feature-card-v2)
══════════════════════════════════════════════════════ */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}

.feature-card-v2 {
  background: var(--wh);
  border-radius: var(--rad-xl);
  padding: var(--space-6);
  box-shadow: var(--sha-sm);
  border: 1px solid var(--bdr2);
  transition: var(--t-base);
  position: relative;
  overflow: hidden;
}
.feature-card-v2::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--g-brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.feature-card-v2:hover {
  box-shadow: var(--sha-md);
  transform: translateY(-3px);
  border-color: transparent;
}
.feature-card-v2:hover::before { transform: scaleX(1); }

/* アイコンエリア */
.fc2-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--rad-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-5);
  position: relative;
  transition: var(--t-spring);
}
.feature-card-v2:hover .fc2-icon {
  transform: scale(1.12);
}
.fc2-icon--orange {
  background: var(--or-pale);
}
.fc2-icon--orange::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--g-brand);
  opacity: 0;
  transition: opacity .3s;
}
.feature-card-v2:hover .fc2-icon--orange::before { opacity: 1; }
.feature-card-v2:hover .fc2-icon--orange svg { stroke: #fff; }

.fc2-icon--green  { background: var(--gr-l); }
.feature-card-v2:hover .fc2-icon--green svg { stroke: var(--gr-d); }

.fc2-icon--blue   { background: var(--bl-l); }
.feature-card-v2:hover .fc2-icon--blue svg { stroke: var(--bl-d); }

.fc2-icon svg {
  width: 24px;
  height: 24px;
  stroke: var(--or);
  fill: none;
  position: relative;
  z-index: 1;
  transition: stroke .2s;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fc2-icon--green svg { stroke: var(--gr); }
.fc2-icon--blue  svg { stroke: var(--bl); }

.fc2-title {
  font-family: 'M PLUS Rounded 1c', 'Outfit', sans-serif;
  font-size: var(--text-md);
  font-weight: 700;
  letter-spacing: -.02em;
  margin-bottom: var(--space-3);
  color: var(--ink);
}
.fc2-desc {
  font-size: var(--text-sm);
  color: var(--ink-2);
  line-height: 1.75;
}
.fc2-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--or);
  transition: gap .2s;
}
.feature-card-v2:hover .fc2-link { gap: 8px; }
.fc2-link svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
}

/* ══════════════════════════════════════════════════════
   F. ステップフロー v2 (.flow-v2)
══════════════════════════════════════════════════════ */

.flow-v2 {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 700px;
  margin: 0 auto;
}

.flow-v2-item {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 0 24px;
  position: relative;
}

/* タイムラインライン */
.flow-v2-item:not(:last-child) .flow-v2-left::after {
  content: '';
  position: absolute;
  top: 56px;
  left: 27px;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--or), transparent);
}

.flow-v2-left {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ナンバリング */
.flow-v2-num {
  width: 56px;
  height: 56px;
  border-radius: var(--rad-full);
  background: var(--g-brand);
  color: #fff;
  font-family: 'M PLUS Rounded 1c', 'Outfit', sans-serif;
  font-size: var(--text-xl);
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--sha-or);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  transition: var(--t-spring);
}
.flow-v2-item:hover .flow-v2-num {
  transform: scale(1.1);
  box-shadow: var(--sha-or-h);
}

.flow-v2-right {
  padding: 12px 0 var(--space-8);
}
.flow-v2-item:last-child .flow-v2-right { padding-bottom: 0; }

.flow-v2-title {
  font-family: 'M PLUS Rounded 1c', 'Outfit', sans-serif;
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: -.02em;
  margin-bottom: var(--space-3);
  line-height: 1.3;
}
.flow-v2-desc {
  font-size: var(--text-sm);
  color: var(--ink-2);
  line-height: 1.8;
}
.flow-v2-tag {
  display: inline-flex;
  margin-top: var(--space-3);
}

@media (max-width: 480px) {
  .flow-v2-item { grid-template-columns: 44px 1fr; gap: 0 16px; }
  .flow-v2-num  { width: 44px; height: 44px; font-size: var(--text-md); }
  .flow-v2-item:not(:last-child) .flow-v2-left::after { left: 21px; top: 44px; }
}

/* ══════════════════════════════════════════════════════
   G. 料金カード v2 (.pricing-card-v2)
══════════════════════════════════════════════════════ */

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
  align-items: start;
}

.pricing-card-v2 {
  background: var(--wh);
  border-radius: var(--rad-xl);
  padding: var(--space-7) var(--space-6);
  box-shadow: var(--sha-md);
  border: 1px solid var(--bdr);
  position: relative;
  transition: var(--t-base);
}
.pricing-card-v2:hover {
  transform: translateY(-4px);
  box-shadow: var(--sha-xl);
}

/* おすすめ — ガラスモーフィズム */
.pricing-card-v2--popular {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1.5px solid rgba(244,116,42,.25);
  box-shadow: var(--sha-or), 0 0 0 4px rgba(244,116,42,.06);
  transform: scale(1.04);
}
.pricing-card-v2--popular:hover {
  transform: scale(1.04) translateY(-4px);
}

/* 人気バッジ */
.pricing-card-v2__badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--g-brand);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 5px 18px;
  border-radius: var(--rad-full);
  box-shadow: var(--sha-or);
  white-space: nowrap;
}

.pricing-card-v2__plan {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--ink-2);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: var(--space-4);
}
.pricing-card-v2--popular .pricing-card-v2__plan { color: var(--or); }

.pricing-card-v2__price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: var(--space-5);
}
.pricing-card-v2__price-num {
  font-family: 'M PLUS Rounded 1c', 'Outfit', sans-serif;
  font-size: clamp(36px, 5vw, 52px);
  font-weight: 900;
  letter-spacing: -.04em;
  color: var(--ink);
  line-height: 1;
  transition: all .4s;
}
.pricing-card-v2__price-unit {
  font-size: var(--text-sm);
  color: var(--ink-3);
}

.pricing-card-v2__desc {
  font-size: var(--text-sm);
  color: var(--ink-2);
  line-height: 1.7;
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--bdr2);
}

/* 機能リスト */
.pricing-card-v2__features {
  list-style: none;
  margin: 0 0 var(--space-7);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pricing-card-v2__features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--text-sm);
  color: var(--ink-2);
  line-height: 1.5;
}
.pricing-card-v2__features li svg {
  width: 16px;
  height: 16px;
  stroke: var(--gr);
  fill: none;
  flex-shrink: 0;
  margin-top: 1px;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pricing-card-v2__features li.disabled {
  color: var(--ink-3);
  text-decoration: line-through;
}
.pricing-card-v2__features li.disabled svg { stroke: var(--ink-3); }

/* CTAボタン */
.pricing-card-v2__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 48px;
  border-radius: var(--rad-full);
  font-size: var(--text-base);
  font-weight: 700;
  transition: var(--t-spring);
}
.pricing-card-v2__btn--primary {
  background: var(--g-brand);
  color: #fff;
  box-shadow: var(--sha-or);
}
.pricing-card-v2__btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--sha-or-h);
}
.pricing-card-v2__btn--outline {
  border: 1.5px solid var(--bdr);
  color: var(--ink);
}
.pricing-card-v2__btn--outline:hover {
  border-color: var(--or);
  color: var(--or);
}
.pricing-card-v2__btn svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
}

/* 料金トグル */
.pricing-toggle {
  display: inline-flex;
  align-items: center;
  background: var(--surface-1);
  border-radius: var(--rad-full);
  padding: 4px;
  gap: 2px;
  margin-bottom: var(--space-8);
}
.pricing-toggle__btn {
  height: 36px;
  padding: 0 20px;
  border-radius: var(--rad-full);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink-2);
  transition: var(--t-fast);
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
}
.pricing-toggle__btn.active {
  background: #fff;
  color: var(--ink);
  box-shadow: var(--sha-sm);
}
.pricing-toggle__save {
  background: var(--gr);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--rad-full);
  white-space: nowrap;
}

@media (max-width: 768px) {
  .pricing-card-v2--popular { transform: scale(1); }
  .pricing-card-v2--popular:hover { transform: translateY(-4px); }
}

/* ══════════════════════════════════════════════════════
   H. FAQ アコーディオン v2 (.faq-v2)
══════════════════════════════════════════════════════ */

.faq-v2 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 780px;
  margin: 0 auto;
}

.faq-v2-item {
  background: var(--wh);
  border-radius: var(--rad-lg);
  border: 1px solid var(--bdr2);
  overflow: hidden;
  transition: box-shadow .25s, border-color .25s;
}
.faq-v2-item.is-open {
  box-shadow: var(--sha-md);
  border-color: rgba(244,116,42,.2);
}

.faq-v2-head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  cursor: pointer;
  user-select: none;
  transition: background .15s;
}
.faq-v2-head:hover { background: var(--or-pale); }
.faq-v2-item.is-open .faq-v2-head { background: var(--or-pale); }

/* 番号 */
.faq-v2-num {
  font-family: 'M PLUS Rounded 1c', 'Outfit', sans-serif;
  font-size: var(--text-md);
  font-weight: 900;
  line-height: 1;
  min-width: 28px;
  background: var(--g-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  flex-shrink: 0;
}

.faq-v2-q {
  flex: 1;
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.5;
}

/* 開閉アイコン */
.faq-v2-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--rad-full);
  background: var(--surface-1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .2s, transform .35s cubic-bezier(.4,0,.2,1);
}
.faq-v2-item.is-open .faq-v2-icon {
  background: var(--g-brand);
  transform: rotate(45deg);
}
.faq-v2-icon svg {
  width: 14px;
  height: 14px;
  stroke: var(--ink-2);
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  flex-shrink: 0;
  transition: stroke .2s;
}
.faq-v2-item.is-open .faq-v2-icon svg { stroke: #fff; }

/* 回答エリア（max-height アニメーション） */
.faq-v2-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s cubic-bezier(.4,0,.2,1);
}
.faq-v2-body-inner {
  padding: 0 24px 20px 68px;
  font-size: var(--text-sm);
  color: var(--ink-2);
  line-height: 1.85;
}

@media (max-width: 768px) {
  .faq-v2-head  { padding: 16px 18px; gap: 12px; }
  .faq-v2-body-inner { padding: 0 18px 16px 56px; }
}

/* ══════════════════════════════════════════════════════
   I. CTAバナー v2 (.cta-banner-v2)
══════════════════════════════════════════════════════ */

.cta-banner-v2 {
  position: relative;
  border-radius: var(--rad-2xl);
  overflow: hidden;
  padding: var(--space-9) var(--space-6);
  text-align: center;
  isolation: isolate;
}

/* メッシュグラデーション背景 */
.cta-banner-v2::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 50%, #F4742A 0%, transparent 40%),
    radial-gradient(circle at 80% 30%, #FF9A5C 0%, transparent 40%),
    radial-gradient(circle at 60% 80%, #E06520 0%, transparent 35%),
    radial-gradient(circle at 40% 10%, #FFB870 0%, transparent 35%);
  background-color: #F4742A;
  z-index: -2;
}

/* ノイズテクスチャオーバーレイ */
.cta-banner-v2::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E");
  background-size: 180px;
  z-index: -1;
  pointer-events: none;
}

.cta-banner-v2 > * { position: relative; z-index: 1; }

.cta-banner-v2__svg-deco {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}
.cta-banner-v2__svg-deco--tl { top: -20px; left: -20px; opacity: .15; }
.cta-banner-v2__svg-deco--br { bottom: -20px; right: -20px; opacity: .12; }

.cta-banner-v2__label {
  display: inline-block;
  background: rgba(255,255,255,.2);
  border: 1px solid rgba(255,255,255,.3);
  border-radius: var(--rad-full);
  padding: 5px 16px;
  font-size: var(--text-xs);
  font-weight: 700;
  color: rgba(255,255,255,.9);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: var(--space-5);
  backdrop-filter: blur(8px);
}

.cta-banner-v2__title {
  font-family: 'M PLUS Rounded 1c', 'Outfit', sans-serif;
  font-size: clamp(26px, 4vw, 48px);
  font-weight: 900;
  color: #fff;
  letter-spacing: -.03em;
  line-height: 1.15;
  font-feature-settings: 'palt' 1;
  margin-bottom: var(--space-4);
}

.cta-banner-v2__desc {
  font-size: var(--text-base);
  color: rgba(255,255,255,.85);
  line-height: 1.7;
  margin-bottom: var(--space-7);
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

/* パルスボタン */
.btn-cta-pulse {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 56px;
  padding: 0 36px;
  background: #fff;
  color: var(--or);
  font-size: var(--text-md);
  font-weight: 800;
  border-radius: var(--rad-full);
  box-shadow: 0 0 0 0 rgba(255,255,255,.5);
  transition: transform .2s, box-shadow .2s;
  animation: ctaPulse 2.5s cubic-bezier(.4,0,.6,1) infinite;
  position: relative;
}
.btn-cta-pulse:hover {
  transform: scale(1.04);
  animation-play-state: paused;
  box-shadow: 0 8px 32px rgba(0,0,0,.2);
}
.btn-cta-pulse svg {
  width: 20px;
  height: 20px;
  stroke: var(--or);
  fill: none;
  flex-shrink: 0;
}
@keyframes ctaPulse {
  0%   { box-shadow: 0 0 0 0   rgba(255,255,255,.55); }
  70%  { box-shadow: 0 0 0 18px rgba(255,255,255,0);  }
  100% { box-shadow: 0 0 0 0   rgba(255,255,255,0);   }
}

.cta-banner-v2__sub {
  margin-top: var(--space-5);
  font-size: var(--text-sm);
  color: rgba(255,255,255,.7);
}

/* ══════════════════════════════════════════════════════
   K. 統計カード v2 (.stat-card-v2)
══════════════════════════════════════════════════════ */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

.stat-card-v2 {
  background: var(--wh);
  border-radius: var(--rad-xl);
  padding: var(--space-6);
  box-shadow: var(--sha-sm);
  position: relative;
  overflow: hidden;
  transition: var(--t-base);
}
.stat-card-v2:hover {
  transform: translateY(-3px);
  box-shadow: var(--sha-md);
}

/* グラデーションボーダー（before 擬似要素） */
.stat-card-v2::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: var(--g-brand);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* グリーン・ブルーバリアント */
.stat-card-v2--green::before { background: var(--g-green); }
.stat-card-v2--blue::before  { background: var(--g-blue);  }

.stat-card-v2__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--rad);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
  background: var(--or-pale);
}
.stat-card-v2--green .stat-card-v2__icon { background: var(--gr-l); }
.stat-card-v2--blue  .stat-card-v2__icon { background: var(--bl-l); }
.stat-card-v2__icon svg {
  width: 20px;
  height: 20px;
  stroke: var(--or);
  fill: none;
  stroke-width: 2;
}
.stat-card-v2--green .stat-card-v2__icon svg { stroke: var(--gr); }
.stat-card-v2--blue  .stat-card-v2__icon svg { stroke: var(--bl); }

.stat-card-v2__num {
  font-family: 'M PLUS Rounded 1c', 'Outfit', sans-serif;
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 900;
  letter-spacing: -.04em;
  color: var(--ink);
  line-height: 1;
  margin-bottom: 4px;
}
.stat-card-v2__unit {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--ink-3);
}
.stat-card-v2__label {
  font-size: var(--text-xs);
  color: var(--ink-3);
  margin-top: 6px;
}
.stat-card-v2__trend {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--gr);
  margin-top: 4px;
}
.stat-card-v2__trend svg {
  width: 12px;
  height: 12px;
  stroke: currentColor;
  fill: none;
}

/* ══════════════════════════════════════════════════════
   汎用ボタン
══════════════════════════════════════════════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--rad-full);
  font-size: var(--text-base);
  font-weight: 700;
  transition: var(--t-spring);
  cursor: pointer;
  white-space: nowrap;
}
.btn svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  flex-shrink: 0;
}

.btn--primary {
  height: 48px;
  padding: 0 28px;
  background: var(--g-brand);
  color: #fff;
  box-shadow: var(--sha-or);
}
.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--sha-or-h);
}

.btn--secondary {
  height: 48px;
  padding: 0 28px;
  background: var(--surface-1);
  color: var(--ink);
}
.btn--secondary:hover {
  background: var(--surface-2);
}

.btn--outline {
  height: 48px;
  padding: 0 26px;
  border: 1.5px solid var(--bdr);
  color: var(--ink);
}
.btn--outline:hover {
  border-color: var(--or);
  color: var(--or);
}

.btn--sm { height: 36px; padding: 0 18px; font-size: var(--text-sm); }
.btn--lg { height: 56px; padding: 0 36px; font-size: var(--text-md); }

/* ══════════════════════════════════════════════════════
   コンテンツセパレーター
══════════════════════════════════════════════════════ */

.wave-sep {
  display: block;
  width: 100%;
  height: 60px;
  overflow: hidden;
  line-height: 0;
}
.wave-sep svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* ══════════════════════════════════════════════════════
   ユーティリティ
══════════════════════════════════════════════════════ */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.text-center { text-align: center; }
.text-or     { color: var(--or); }
.text-gr     { color: var(--gr); }
.text-bl     { color: var(--bl); }
.mt-sm       { margin-top: var(--space-5); }
.mt-md       { margin-top: var(--space-7); }
.mt-lg       { margin-top: var(--space-9); }

/* ══════════════════════════════════════════════════════
   wannya アニメーション定義 v3.0
   (animations.css より統合)
══════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════
   KEYFRAME 定義
══════════════════════════════════════════════════════ */

/* パルス */
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.05); }
}

/* シマー（スケルトンローダー） */
@keyframes shimmer {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}

/* フェードアップ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* スライドイン（左から） */
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-32px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* スライドイン（右から） */
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(32px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* スケールイン */
@keyframes scaleIn {
  from { opacity: 0; transform: scale(.88); }
  to   { opacity: 1; transform: scale(1); }
}

/* CTA パルスリング */
@keyframes ctaPulse {
  0%   { box-shadow: 0 0 0 0   rgba(255,255,255,.55); }
  70%  { box-shadow: 0 0 0 20px rgba(255,255,255,0);  }
  100% { box-shadow: 0 0 0 0   rgba(255,255,255,0);   }
}

/* ボーダーグロー */
@keyframes borderGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(244,116,42,.3); }
  50%       { box-shadow: 0 0 0 8px rgba(244,116,42,0); }
}

/* スピン */
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* カウントアップ */
@keyframes countReveal {
  from { opacity: 0; transform: translateY(16px) scale(.9); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* グラデーションシフト */
@keyframes gradientShift {
  0%   { background-position: 0%   50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0%   50%; }
}

/* ウェーブライン */
@keyframes waveLine {
  0%   { stroke-dashoffset: 1000; }
  100% { stroke-dashoffset: 0; }
}

/* スウィングアイコン */
@keyframes swing {
  0%, 100% { transform: rotate(-6deg); }
  50%       { transform: rotate(6deg); }
}

/* ブリーズ（ゆっくり広がる） */
@keyframes breathe {
  0%, 100% { transform: scale(1); opacity: .7; }
  50%       { transform: scale(1.08); opacity: 1; }
}

/* ══════════════════════════════════════════════════════
   スクロールアニメーション基底
   Intersection Observer + .is-visible で制御
══════════════════════════════════════════════════════ */

/* 共通: アニメーション前の初期状態 */
.anim-fade-up,
.anim-fade-in,
.anim-scale-in,
.anim-slide-left,
.anim-slide-right {
  opacity: 0;
  will-change: opacity, transform;
}

/* reduce-motion 対応 */
@media (prefers-reduced-motion: reduce) {
  .anim-fade-up,
  .anim-fade-in,
  .anim-scale-in,
  .anim-slide-left,
  .anim-slide-right {
    opacity: 1;
    transform: none;
  }
  .anim-fade-up.is-visible,
  .anim-fade-in.is-visible,
  .anim-scale-in.is-visible,
  .anim-slide-left.is-visible,
  .anim-slide-right.is-visible {
    animation: none;
  }
}

/* ─── フェードアップ ─── */
.anim-fade-up {
  transform: translateY(32px);
}
.anim-fade-up.is-visible {
  animation: fadeUp .65s cubic-bezier(.22,1,.36,1) forwards;
}

/* ─── フェードイン ─── */
.anim-fade-in {
  transform: none;
}
.anim-fade-in.is-visible {
  animation: fadeIn .6s ease forwards;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ─── スケールイン ─── */
.anim-scale-in {
  transform: scale(.9);
}
.anim-scale-in.is-visible {
  animation: scaleIn .55s cubic-bezier(.34,1.56,.64,1) forwards;
}

/* ─── 左からスライド ─── */
.anim-slide-left {
  transform: translateX(-36px);
}
.anim-slide-left.is-visible {
  animation: slideInLeft .6s cubic-bezier(.22,1,.36,1) forwards;
}

/* ─── 右からスライド ─── */
.anim-slide-right {
  transform: translateX(36px);
}
.anim-slide-right.is-visible {
  animation: slideInRight .6s cubic-bezier(.22,1,.36,1) forwards;
}

/* ══════════════════════════════════════════════════════
   遅延クラス (data-delay は JS で処理、CSSクラスでも対応)
══════════════════════════════════════════════════════ */
.delay-100 { animation-delay: 100ms !important; }
.delay-150 { animation-delay: 150ms !important; }
.delay-200 { animation-delay: 200ms !important; }
.delay-300 { animation-delay: 300ms !important; }
.delay-400 { animation-delay: 400ms !important; }
.delay-500 { animation-delay: 500ms !important; }
.delay-600 { animation-delay: 600ms !important; }
.delay-700 { animation-delay: 700ms !important; }
.delay-800 { animation-delay: 800ms !important; }

/* ══════════════════════════════════════════════════════
   ヒーローアニメーション（ページロード時 / 遅延付き）
══════════════════════════════════════════════════════ */

/* eyebrow */
.hero-v3-eyebrow {
  animation: fadeUp .5s cubic-bezier(.22,1,.36,1) .1s both;
}
/* タイトル */
.hero-v3-title {
  animation: fadeUp .65s cubic-bezier(.22,1,.36,1) .25s both;
}
/* サブコピー */
.hero-v3-sub {
  animation: fadeUp .6s cubic-bezier(.22,1,.36,1) .45s both;
}
/* CTA ボタン群 */
.hero-v3-actions {
  animation: fadeUp .6s cubic-bezier(.22,1,.36,1) .6s both;
}
/* 統計バー */
.hero-v3-stats {
  animation: fadeUp .6s cubic-bezier(.22,1,.36,1) .75s both;
}
/* ビジュアル */
.hero-v3-visual {
  animation: scaleIn .8s cubic-bezier(.34,1.56,.64,1) .3s both;
}

/* ══════════════════════════════════════════════════════
   パーシステント（ループ）アニメーション
══════════════════════════════════════════════════════ */

/* 浮遊するイラスト */
.anim-float {
  animation: float 5s ease-in-out infinite;
}
.anim-float--slow {
  animation: float 7s ease-in-out infinite;
}
.anim-float--fast {
  animation: float 3s ease-in-out infinite;
}

/* グラデーション背景アニメ */
.anim-gradient {
  background-size: 200% 200%;
  animation: gradientShift 6s ease infinite;
}

/* ブリーズ */
.anim-breathe {
  animation: breathe 4s ease-in-out infinite;
}

/* ══════════════════════════════════════════════════════
   カウントアップ表示アニメ
══════════════════════════════════════════════════════ */

[data-count] {
  display: inline-block;
  transition: opacity .3s;
}
[data-count].counting {
  animation: countReveal .5s cubic-bezier(.22,1,.36,1) both;
}

/* ══════════════════════════════════════════════════════
   グラデーションボーダーアニメ
══════════════════════════════════════════════════════ */

.anim-glow {
  animation: borderGlow 2.5s ease-in-out infinite;
}

/* ══════════════════════════════════════════════════════
   スタガーコンテナ（子要素を順に表示）
   .stagger > * に自動で delay を適用
══════════════════════════════════════════════════════ */

.stagger > *:nth-child(1)  { animation-delay: 0ms; }
.stagger > *:nth-child(2)  { animation-delay: 80ms; }
.stagger > *:nth-child(3)  { animation-delay: 160ms; }
.stagger > *:nth-child(4)  { animation-delay: 240ms; }
.stagger > *:nth-child(5)  { animation-delay: 320ms; }
.stagger > *:nth-child(6)  { animation-delay: 400ms; }
.stagger > *:nth-child(7)  { animation-delay: 480ms; }
.stagger > *:nth-child(8)  { animation-delay: 560ms; }
.stagger > *:nth-child(9)  { animation-delay: 640ms; }
.stagger > *:nth-child(10) { animation-delay: 720ms; }

/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVE & UIUX SYSTEM v3.3.0
   Appended section — do not modify lines above
   ══════════════════════════════════════════════════════════════════════ */

/* ══ RESPONSIVE & UIUX v3.3 ══ */

/* ─────────────────────────────────────────────
   1. Global responsive typography & spacing
───────────────────────────────────────────── */
/* Global SP adjustments */
@media (max-width: 768px) {
  body { font-size: 14px; }
  .container { padding: 0 16px; }
  .container--md { padding: 0 16px; }
  .section { padding: var(--space-7) 0; }
  .section--sm { padding: var(--space-5) 0; }
}
@media (max-width: 480px) {
  .container { padding: 0 14px; }
  .section { padding: var(--space-6) 0; }
}

/* ─────────────────────────────────────────────
   2. Section typography responsive
───────────────────────────────────────────── */
@media (max-width: 768px) {
  .t-h1 { font-size: clamp(24px, 7vw, 38px); }
  .t-h2 { font-size: clamp(20px, 5.5vw, 28px); }
  .t-h3 { font-size: clamp(16px, 4.5vw, 20px); }
  .section-title { font-size: clamp(20px, 5.5vw, 28px); }
  .hero-v3-title { font-size: clamp(26px, 7.5vw, 40px); }
  .cta-banner-v2__title { font-size: clamp(22px, 6vw, 34px); }
}
@media (max-width: 480px) {
  .t-h1 { font-size: clamp(22px, 7vw, 30px); }
}

/* ─────────────────────────────────────────────
   3. Bento grid responsive (CRITICAL)
───────────────────────────────────────────── */
/* bento-grid: 2-col → 1-col at 640px */
@media (max-width: 640px) {
  .bento-grid { grid-template-columns: 1fr !important; }
  .bento-grid--named { grid-template-areas: none !important; grid-template-columns: 1fr !important; }
  .bento-grid--named > * { grid-area: auto !important; }
  .bento-card { min-height: unset; }
}

/* ─────────────────────────────────────────────
   4. Hero v3 responsive
───────────────────────────────────────────── */
@media (max-width: 768px) {
  .hero-v3 { grid-template-columns: 1fr; min-height: auto; padding: var(--space-8) 0 var(--space-6); }
  .hero-v3-content { padding: 0 var(--space-4); text-align: center; }
  .hero-v3-actions { justify-content: center; }
  .hero-v3-stats { justify-content: center; gap: var(--space-5); }
  .hero-v3-visual { display: none; }
  .hero-v3-stat-divider { display: none; }
}
@media (max-width: 480px) {
  .hero-v3-actions { flex-direction: column; align-items: stretch; }
  .btn-hero, .btn-hero-ghost { width: 100%; justify-content: center; }
}

/* ─────────────────────────────────────────────
   5. feature-card-v2 responsive
───────────────────────────────────────────── */
@media (max-width: 768px) {
  .feature-card-v2 {
    grid-template-columns: 1fr !important;
    gap: var(--space-5);
    text-align: center;
  }
  .feature-card-v2-visual { justify-content: center; }
  .feature-card-v2:nth-child(even) .feature-card-v2-visual { order: -1; }
}

/* ─────────────────────────────────────────────
   6. flow-v2 responsive
───────────────────────────────────────────── */
@media (max-width: 640px) {
  .flow-v2 { flex-direction: column; align-items: stretch; }
  .flow-v2-item { flex-direction: row; align-items: flex-start; gap: var(--space-4); }
  .flow-v2-connector { display: none; }
  .flow-v2-num { flex-shrink: 0; }
}

/* ─────────────────────────────────────────────
   7. pricing-card-v2 responsive
───────────────────────────────────────────── */
@media (max-width: 768px) {
  .pricing-card-v2 { padding: var(--space-5); }
  .pricing-toggle { flex-wrap: wrap; gap: var(--space-3); }
}
@media (max-width: 480px) {
  .pricing-card-v2__price { font-size: clamp(28px, 8vw, 40px); }
}

/* ─────────────────────────────────────────────
   8. company-dl (company.php / legal.php)
───────────────────────────────────────────── */
.company-dl { display: flex; flex-direction: column; border-radius: var(--rad-lg); overflow: hidden; border: 1px solid var(--bdr); }
.company-dl-row { display: grid; grid-template-columns: 160px 1fr; border-bottom: 1px solid var(--bdr2); }
.company-dl-row:last-child { border-bottom: none; }
.company-dl-row dt { background: var(--surface-1); padding: 14px 16px; font-size: var(--text-sm); font-weight: 700; color: var(--ink-2); display: flex; align-items: center; }
.company-dl-row dd { padding: 14px 20px; font-size: var(--text-sm); color: var(--ink); display: flex; align-items: center; line-height: 1.65; }
@media (max-width: 600px) {
  .company-dl-row { grid-template-columns: 1fr; }
  .company-dl-row dt { padding: 12px 16px 4px; background: var(--surface-1); border-bottom: none; font-size: var(--text-xs); color: var(--ink-3); }
  .company-dl-row dd { padding: 4px 16px 12px; }
}

/* ─────────────────────────────────────────────
   9. legal-content / entry-content
───────────────────────────────────────────── */
.legal-content h2 { font-size: var(--text-xl); font-weight: 800; color: var(--ink); margin: var(--space-8) 0 var(--space-4); padding-bottom: var(--space-3); border-bottom: 2px solid var(--bdr); }
.legal-content h2:first-child { margin-top: 0; }
.legal-content p, .legal-content li { font-size: var(--text-base); color: var(--ink-2); line-height: 1.85; }
.legal-content ol, .legal-content ul { padding-left: var(--space-6); margin: var(--space-4) 0; }
.legal-content li { margin-bottom: var(--space-2); }
@media (max-width: 768px) {
  .legal-content h2 { font-size: var(--text-lg); }
}

/* ─────────────────────────────────────────────
   10. CTA banner v2 responsive
───────────────────────────────────────────── */
@media (max-width: 768px) {
  .cta-banner-v2 { padding: var(--space-7) var(--space-4); border-radius: var(--rad-xl); }
  .btn-cta-pulse { height: 48px; padding: 0 28px; font-size: var(--text-base); }
}
@media (max-width: 480px) {
  .cta-banner-v2 { border-radius: var(--rad-lg); }
  .btn-cta-pulse { width: 100%; justify-content: center; }
}

/* ─────────────────────────────────────────────
   11. TOPページ sections
───────────────────────────────────────────── */
/* Section header */
.sec-hdr { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: var(--space-6); }
.sec-more { font-size: var(--text-sm); font-weight: 700; color: var(--or); display: flex; align-items: center; gap: 4px; white-space: nowrap; flex-shrink: 0; }
.sec-more:hover { text-decoration: underline; }

/* type filter pills */
.type-pills { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: var(--space-5); }
@media (max-width: 640px) {
  .type-pills { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px; }
  .type-pills::-webkit-scrollbar { display: none; }
}
.tpill { padding: 7px 18px; border-radius: var(--rad-full); font-size: var(--text-sm); font-weight: 700; border: 1.5px solid var(--bdr); color: var(--ink-2); background: var(--wh); cursor: pointer; transition: var(--t-base); }
.tpill:hover, .tpill.active { background: var(--or); color: #fff; border-color: var(--or); }
.tpill.br.active { background: var(--or); border-color: var(--or); }
.tpill.sp.active { background: var(--bl); border-color: var(--bl); }
.tpill.sh.active { background: var(--gr); border-color: var(--gr); }

/* pet card grids */
.cg5 { display: grid; grid-template-columns: repeat(5,1fr); gap: 16px; }
.cg4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
@media (max-width: 1024px) {
  .cg5 { grid-template-columns: repeat(4,1fr); }
}
@media (max-width: 768px) {
  .cg5, .cg4 { grid-template-columns: repeat(2,1fr); gap: 12px; }
}
@media (max-width: 380px) {
  .cg5, .cg4 { grid-template-columns: repeat(2,1fr); gap: 8px; }
}

/* breed chips scroll */
.breed-row { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 8px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.breed-row::-webkit-scrollbar { display: none; }
.bchip { flex-shrink: 0; padding: 10px 20px; border-radius: var(--rad-full); background: var(--wh); border: 1.5px solid var(--bdr); font-size: var(--text-sm); font-weight: 600; color: var(--ink-2); cursor: pointer; transition: var(--t-base); white-space: nowrap; }
.bchip:hover, .bchip.active { background: var(--or-pale); border-color: var(--or); color: var(--or); }
.bname { font-size: var(--text-sm); font-weight: 600; }

/* provider grid */
.prov-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
@media (max-width: 900px) { .prov-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px) { .prov-grid { grid-template-columns: 1fr; } }

/* review grid */
.review-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; }
@media (max-width: 640px) { .review-grid { grid-template-columns: 1fr; } }

/* ─────────────────────────────────────────────
   12. Platform banner cards (pbc-card)
───────────────────────────────────────────── */
.pb { padding: var(--space-8) 0; }
.pb-head { text-align: center; margin-bottom: var(--space-7); }
.pb-title { font-family: 'M PLUS Rounded 1c', sans-serif; font-size: clamp(20px,3vw,32px); font-weight: 900; color: var(--ink); margin-bottom: var(--space-3); }
.pb-sub { font-size: var(--text-sm); color: var(--ink-3); max-width: 560px; margin: 0 auto; line-height: 1.75; }

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

.pbc-card { background: var(--wh); border-radius: var(--rad-2xl); padding: var(--space-6); box-shadow: var(--sha-sm); border: 1px solid var(--bdr); transition: var(--t-base); display: flex; flex-direction: column; }
.pbc-card:hover { transform: translateY(-4px); box-shadow: var(--sha-md); }
.pbc-card-icon { width: 56px; height: 56px; border-radius: var(--rad-xl); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-5); }
.pbc-card--or .pbc-card-icon { background: var(--or-pale); }
.pbc-card--bl .pbc-card-icon { background: var(--bl-l); }
.pbc-card--gr .pbc-card-icon { background: var(--gr-l); }
.pbc-card--or .pbc-card-icon svg { stroke: var(--or); }
.pbc-card--bl .pbc-card-icon svg { stroke: var(--bl); }
.pbc-card--gr .pbc-card-icon svg { stroke: var(--gr); }
.pbc-card-name { font-family: 'M PLUS Rounded 1c', sans-serif; font-size: var(--text-xl); font-weight: 900; color: var(--ink); margin-bottom: var(--space-2); }
.pbc-card-desc { font-size: var(--text-sm); color: var(--ink-2); line-height: 1.75; margin-bottom: var(--space-5); }
.pbc-card-features { list-style: none; display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-6); flex: 1; }
.pbc-card-features li { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--ink-2); }
.pbc-card-cta { display: flex; align-items: center; justify-content: center; gap: 6px; height: 44px; border-radius: var(--rad-full); font-size: var(--text-sm); font-weight: 700; margin-top: auto; transition: var(--t-spring); }
.pbc-card--or .pbc-card-cta { background: var(--g-brand); color: #fff; box-shadow: var(--sha-or); }
.pbc-card--or .pbc-card-cta:hover { transform: translateY(-2px); box-shadow: var(--sha-or-h); }
.pbc-card--bl .pbc-card-cta { background: var(--g-blue); color: #fff; box-shadow: 0 6px 18px rgba(63,136,228,.25); }
.pbc-card--bl .pbc-card-cta:hover { transform: translateY(-2px); }
.pbc-card--gr .pbc-card-cta { background: var(--g-green); color: #fff; box-shadow: 0 6px 18px rgba(46,166,106,.25); }
.pbc-card--gr .pbc-card-cta:hover { transform: translateY(-2px); }

/* ─────────────────────────────────────────────
   13. Diagnosis banner modern
───────────────────────────────────────────── */
.diag { background: var(--g-dark); border-radius: var(--rad-2xl); padding: var(--space-8) var(--space-7); display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); margin: var(--space-5) 0; }
.diag-l { flex: 1; }
.diag-eyebrow { font-size: var(--text-xs); font-weight: 700; color: rgba(255,255,255,.5); letter-spacing: .12em; text-transform: uppercase; margin-bottom: var(--space-3); }
.diag-title { font-family: 'M PLUS Rounded 1c', sans-serif; font-size: clamp(18px,2.5vw,26px); font-weight: 900; color: #fff; line-height: 1.4; margin-bottom: var(--space-3); }
.diag-sub { font-size: var(--text-sm); color: rgba(255,255,255,.65); line-height: 1.7; }
.diag-btn { flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 28px; background: var(--g-brand); color: #fff; border-radius: var(--rad-full); font-size: var(--text-sm); font-weight: 700; transition: var(--t-spring); box-shadow: var(--sha-or); white-space: nowrap; }
.diag-btn:hover { transform: translateY(-2px) scale(1.02); box-shadow: var(--sha-or-h); }
@media (max-width: 640px) {
  .diag { flex-direction: column; align-items: flex-start; padding: var(--space-6) var(--space-5); border-radius: var(--rad-xl); }
  .diag-btn { width: 100%; justify-content: center; }
}

/* ─────────────────────────────────────────────
   14. Provider cards modern
───────────────────────────────────────────── */
.provcard { background: var(--wh); border-radius: var(--rad-xl); padding: var(--space-5); border: 1px solid var(--bdr); box-shadow: var(--sha-sm); display: flex; flex-direction: column; gap: var(--space-3); transition: var(--t-base); }
.provcard:hover { transform: translateY(-3px); box-shadow: var(--sha-md); }
.prov-top { display: flex; align-items: center; gap: var(--space-3); }
.prov-rank { width: 28px; height: 28px; border-radius: var(--rad-full); display: flex; align-items: center; justify-content: center; font-size: var(--text-xs); font-weight: 900; flex-shrink: 0; }
.prov-rank.r1 { background: linear-gradient(135deg,#FFD700,#FFA500); color: #fff; }
.prov-rank.r2 { background: linear-gradient(135deg,#C0C0C0,#A8A8A8); color: #fff; }
.prov-rank.r3 { background: linear-gradient(135deg,#CD7F32,#A0522D); color: #fff; }
.prov-rank.rn { background: var(--surface-2); color: var(--ink-3); }
.prov-ava { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.br-ava { background: var(--or-pale); }
.sh-ava { background: var(--gr-l); }
.sp-ava { background: var(--bl-l); }
.prov-ava img { width: 100%; height: 100%; object-fit: cover; }
.prov-inf { flex: 1; min-width: 0; }
.prov-name { font-size: var(--text-sm); font-weight: 700; color: var(--ink); line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.prov-area { font-size: var(--text-xs); color: var(--ink-3); margin-top: 2px; }
.ptbadge { flex-shrink: 0; padding: 3px 10px; border-radius: var(--rad-full); font-size: var(--text-xs); font-weight: 700; }
.ptb-br { background: var(--or-pale); color: var(--or-d); }
.ptb-sh { background: var(--gr-l); color: var(--gr-d); }
.ptb-sp { background: var(--bl-l); color: var(--bl-d); }
.prov-score { display: flex; align-items: center; gap: var(--space-2); }
.ps-num { font-family: 'Outfit', sans-serif; font-size: var(--text-xl); font-weight: 900; color: var(--ink); }
.ps-stars { color: #F5C518; letter-spacing: 1px; }
.prov-btn { display: block; text-align: center; padding: 10px; border-radius: var(--rad-lg); font-size: var(--text-sm); font-weight: 700; color: var(--or); border: 1.5px solid var(--or); transition: var(--t-base); margin-top: auto; }
.prov-btn:hover { background: var(--or); color: #fff; }

/* ─────────────────────────────────────────────
   15. Review cards modern
───────────────────────────────────────────── */
.rvcard { background: var(--wh); border-radius: var(--rad-xl); padding: var(--space-5); border: 1px solid var(--bdr); box-shadow: var(--sha-sm); display: flex; flex-direction: column; gap: var(--space-3); }
.rv-top { display: flex; align-items: flex-start; gap: var(--space-3); }
.rv-ava { width: 40px; height: 40px; border-radius: 50%; background: var(--surface-2); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: var(--text-base); font-weight: 700; color: var(--ink-3); }
.rv-meta { flex: 1; min-width: 0; }
.rv-name { font-size: var(--text-sm); font-weight: 700; color: var(--ink); }
.rv-stars-row { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.rv-stars { color: #F5C518; font-size: 13px; letter-spacing: 1px; }
.rv-score { font-size: var(--text-sm); font-weight: 700; color: var(--ink); }
.rv-date { font-size: var(--text-xs); color: var(--ink-3); white-space: nowrap; }
.rv-provider { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); background: var(--surface-1); border-radius: var(--rad-sm); }
.rv-pimg { width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; }
.br-p { background: var(--or-pale); }
.sh-p { background: var(--gr-l); }
.sp-p { background: var(--bl-l); }
.rv-pdot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.rv-pname { font-size: var(--text-xs); color: var(--ink-2); font-weight: 600; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.rv-text { font-size: var(--text-sm); color: var(--ink-2); line-height: 1.8; flex: 1; }
.rv-pet { font-size: var(--text-xs); color: var(--or); font-weight: 700; padding: var(--space-1) var(--space-3); background: var(--or-pale); border-radius: var(--rad-full); display: inline-block; }

/* ─────────────────────────────────────────────
   16. Column section
───────────────────────────────────────────── */
.col-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: var(--space-5); }
.ctab { padding: 7px 18px; border-radius: var(--rad-full); font-size: var(--text-sm); font-weight: 700; border: 1.5px solid var(--bdr); color: var(--ink-2); background: var(--wh); cursor: pointer; transition: var(--t-base); }
.ctab:hover, .ctab.active { background: var(--ink); color: #fff; border-color: var(--ink); }

.col-feat { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); border-radius: var(--rad-xl); overflow: hidden; background: var(--wh); border: 1px solid var(--bdr); margin-bottom: var(--space-5); text-decoration: none; color: inherit; transition: var(--t-base); }
.col-feat:hover { box-shadow: var(--sha-md); transform: translateY(-2px); }
.cf-img { aspect-ratio: 4/3; overflow: hidden; background: var(--surface-2); }
.cf-img img { width: 100%; height: 100%; object-fit: cover; }
.cf-body { padding: var(--space-6); display: flex; flex-direction: column; justify-content: center; }
.cf-cat { font-size: var(--text-xs); font-weight: 700; color: var(--or); text-transform: uppercase; letter-spacing: .06em; margin-bottom: var(--space-3); }
.cf-title { font-size: var(--text-xl); font-weight: 800; color: var(--ink); line-height: 1.4; margin-bottom: var(--space-3); }
.cf-meta { font-size: var(--text-xs); color: var(--ink-3); }

.col-list { display: grid; grid-template-columns: repeat(2,1fr); gap: var(--space-4); }
.ci { display: flex; gap: var(--space-4); border-radius: var(--rad-lg); overflow: hidden; background: var(--wh); border: 1px solid var(--bdr); text-decoration: none; color: inherit; padding: var(--space-3); transition: var(--t-base); align-items: flex-start; }
.ci:hover { box-shadow: var(--sha-sm); transform: translateY(-1px); }
.ci-img { width: 80px; height: 80px; border-radius: var(--rad-sm); overflow: hidden; flex-shrink: 0; background: var(--surface-2); }
.ci-img img { width: 100%; height: 100%; object-fit: cover; }
.ci-body { flex: 1; min-width: 0; }
.ci-cat { font-size: var(--text-xs); font-weight: 700; color: var(--or); margin-bottom: 4px; }
.ci-title { font-size: var(--text-sm); font-weight: 700; color: var(--ink); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ci-meta { font-size: var(--text-xs); color: var(--ink-3); margin-top: 4px; }

@media (max-width: 640px) {
  .col-feat { grid-template-columns: 1fr; }
  .cf-body { padding: var(--space-4); }
  .cf-title { font-size: var(--text-lg); }
  .col-list { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────
   17. Wrap container for TOPページ
───────────────────────────────────────────── */
.wrap { max-width: var(--container); margin: 0 auto; padding: 0 clamp(14px,3vw,24px); }
@media (max-width: 480px) { .wrap { padding: 0 14px; } }

/* TOPページ block spacing */
.wrap .block { margin-bottom: var(--space-9); }
@media (max-width: 768px) { .wrap .block { margin-bottom: var(--space-7); } }

/* ─────────────────────────────────────────────
   18. Contact page responsive
───────────────────────────────────────────── */
@media (max-width: 768px) {
  [style*="grid-template-columns:2fr 1fr"],
  [style*="grid-template-columns: 2fr 1fr"] {
    display: flex !important;
    flex-direction: column;
  }
}

/* ─────────────────────────────────────────────
   19. Register pages (breeder/shop/rescue) responsive
───────────────────────────────────────────── */
@media (max-width: 768px) {
  .section .bento-grid { gap: var(--space-4); }
}

/* ─────────────────────────────────────────────
   20. Page header sections (section--sm)
───────────────────────────────────────────── */
.section--sm { padding: var(--space-7) 0; }
@media (max-width: 768px) {
  .section--sm { padding: var(--space-6) 0; }
  .breadcrumb { font-size: var(--text-xs); flex-wrap: wrap; }
}

/* ─────────────────────────────────────────────
   21. Touch targets and interactive elements
───────────────────────────────────────────── */
/* Ensure min 44px touch targets */
.faq-v2-head { min-height: 56px; }
.ham-link { min-height: 48px; display: flex; align-items: center; }
.nav-ham { min-width: 44px; min-height: 44px; }

/* Form inputs — prevent iOS zoom */
input[type="text"], input[type="email"], input[type="tel"], textarea, select {
  font-size: 16px;
  -webkit-appearance: none;
}
@media (max-width: 768px) {
  input[type="text"], input[type="email"], input[type="tel"], textarea, select {
    font-size: 16px;
  }
}

/* ─────────────────────────────────────────────
   22. Badge variants
───────────────────────────────────────────── */
.badge--orange { background: var(--or-pale); color: var(--or-d); border: 1px solid rgba(244,116,42,.2); padding: 5px 14px; border-radius: var(--rad-full); font-size: var(--text-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; display: inline-block; }
.badge--blue { background: var(--bl-l); color: var(--bl-d); border: 1px solid rgba(63,136,228,.2); padding: 5px 14px; border-radius: var(--rad-full); font-size: var(--text-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; display: inline-block; }
.badge--green { background: var(--gr-l); color: var(--gr-d); border: 1px solid rgba(46,166,106,.2); padding: 5px 14px; border-radius: var(--rad-full); font-size: var(--text-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; display: inline-block; }

/* ─────────────────────────────────────────────
   23. t-h1 / t-h2 / t-h3 base definitions
───────────────────────────────────────────── */
.t-h1 { font-family: 'M PLUS Rounded 1c', sans-serif; font-size: clamp(28px, 5vw, 52px); font-weight: 900; color: var(--ink); line-height: 1.2; letter-spacing: -.03em; }
.t-h2 { font-family: 'M PLUS Rounded 1c', sans-serif; font-size: clamp(22px, 3.5vw, 36px); font-weight: 900; color: var(--ink); line-height: 1.25; letter-spacing: -.02em; }
.t-h3 { font-family: 'M PLUS Rounded 1c', sans-serif; font-size: clamp(18px, 2.5vw, 24px); font-weight: 800; color: var(--ink); line-height: 1.35; }
.t-body { font-size: var(--text-base); color: var(--ink-2); line-height: 1.75; }
.t-body-sm { font-size: var(--text-sm); color: var(--ink-2); line-height: 1.7; }
.t-gradient { background: var(--g-brand); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.section-label { font-size: var(--text-xs); font-weight: 700; color: var(--or); letter-spacing: .1em; text-transform: uppercase; display: block; margin-bottom: var(--space-2); }
.section-title { font-family: 'M PLUS Rounded 1c', sans-serif; font-size: clamp(22px, 3.5vw, 36px); font-weight: 900; color: var(--ink); line-height: 1.25; letter-spacing: -.02em; }

/* ══ END RESPONSIVE & UIUX SYSTEM v3.3.0 ══ */

/* ── single-shops.php responsive ── */
@media (max-width: 768px) {
  /* shop header flex stack */
  .site-main [style*="grid-template-columns:2fr 1fr"] {
    display: flex !important;
    flex-direction: column;
  }
  /* shop pets grid: 2 col on SP */
  .site-main [style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: repeat(2,1fr) !important;
  }
}
@media (max-width: 480px) {
  .site-main [style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: 1fr !important;
  }
}

/* ══ AUTH & USER PAGES v3.6.0 ══ */

/* Auth card wrapper */
.auth-card-wrap {
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-7) var(--space-4);
}
.auth-card {
  background: var(--surface-1);
  border-radius: var(--rad-2xl);
  padding: var(--space-7);
  box-shadow: var(--sha-xl);
  width: 100%;
  max-width: 440px;
}
.auth-card__logo {
  text-align: center;
  margin-bottom: var(--space-6);
}
.auth-card__title {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--ink-1);
  text-align: center;
  margin-bottom: var(--space-6);
}
.auth-form-field {
  margin-bottom: var(--space-5);
}
.auth-form-field label {
  display: block;
  font-weight: 700;
  margin-bottom: var(--space-2);
  color: var(--ink-1);
  font-size: 0.875rem;
}
.auth-form-field input[type="email"],
.auth-form-field input[type="password"],
.auth-form-field input[type="text"] {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid var(--border);
  border-radius: var(--rad-xl);
  font-size: 1rem;
  font-family: inherit;
  transition: border-color .2s;
  box-sizing: border-box;
}
.auth-form-field input:focus {
  outline: none;
  border-color: var(--or);
}
.auth-divider {
  text-align: center;
  color: var(--ink-3);
  font-size: 0.875rem;
  margin: var(--space-5) 0;
  position: relative;
}
.auth-divider::before, .auth-divider::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 40%;
  height: 1px;
  background: var(--border);
}
.auth-divider::before { left: 0; }
.auth-divider::after { right: 0; }
.auth-links {
  text-align: center;
  margin-top: var(--space-5);
  font-size: 0.875rem;
  color: var(--ink-3);
}
.auth-links a {
  color: var(--or);
  text-decoration: none;
  font-weight: 700;
}
.auth-notice {
  padding: 12px 16px;
  border-radius: var(--rad-xl);
  margin-bottom: var(--space-5);
  font-size: 0.875rem;
  font-weight: 600;
}
.auth-notice--error {
  background: #FEE2E2;
  color: #DC2626;
  border: 1px solid #FCA5A5;
}
.auth-notice--success {
  background: #D1FAE5;
  color: #065F46;
  border: 1px solid #6EE7B7;
}

/* Mypage */
.mypage-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--space-7);
  align-items: start;
}
.mypage-sidebar {
  position: sticky;
  top: calc(var(--nav) + var(--space-5));
}
.mypage-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto var(--space-4);
  display: block;
}
@media (max-width: 768px) {
  .mypage-grid { grid-template-columns: 1fr; }
  .mypage-sidebar { position: static; }
  .auth-card { padding: var(--space-5); }
}

/* Welfare page numbers */
.welfare-number {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 900;
  background: var(--g-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  margin-bottom: var(--space-3);
}

/* Recruit job cards */
.job-card {
  background: var(--surface-1);
  border: 2px solid var(--border);
  border-radius: var(--rad-xl);
  padding: var(--space-6);
  transition: border-color .2s, box-shadow .2s;
}
.job-card:hover {
  border-color: var(--or);
  box-shadow: var(--sha-md);
}
.job-card__title {
  font-size: 1.125rem;
  font-weight: 900;
  color: var(--ink-1);
  margin-bottom: var(--space-3);
}
.job-card__desc {
  font-size: 0.875rem;
  color: var(--ink-3);
  margin-bottom: var(--space-4);
  line-height: 1.7;
}
.job-card__reqs {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-5);
  font-size: 0.8125rem;
  color: var(--ink-2, var(--ink-3));
}
.job-card__reqs li::before {
  content: '✓ ';
  color: var(--gr);
  font-weight: 700;
}

/* Benefits grid */
.benefit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
.benefit-item {
  text-align: center;
  padding: var(--space-5);
  background: var(--surface-2, #f8f8f8);
  border-radius: var(--rad-xl);
}
.benefit-item__icon {
  width: 48px;
  height: 48px;
  margin: 0 auto var(--space-3);
  background: var(--g-brand);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.benefit-item__label {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--ink-1);
}
@media (max-width: 640px) {
  .benefit-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Search page result cards */
.search-result-card {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--rad-xl);
  transition: box-shadow .2s;
  text-decoration: none;
  color: inherit;
}
.search-result-card:hover {
  box-shadow: var(--sha-md);
}
.search-result-card__body { flex: 1; }
.search-result-card__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink-1);
  margin-bottom: var(--space-2);
}
.search-result-card__excerpt {
  font-size: 0.875rem;
  color: var(--ink-3);
  line-height: 1.6;
}
.search-results-grid {
  display: grid;
  gap: var(--space-4);
}

/* Archive shops grid */
.shops-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
.shop-card {
  background: var(--surface-1);
  border-radius: var(--rad-xl);
  box-shadow: var(--sha-md);
  overflow: hidden;
  transition: box-shadow .2s, transform .2s;
}
.shop-card:hover {
  box-shadow: var(--sha-xl);
  transform: translateY(-2px);
}
.shop-card__thumb {
  aspect-ratio: 16/9;
  overflow: hidden;
  background: linear-gradient(135deg, #f97316 0%, #f59e0b 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  font-weight: 900;
  color: #fff;
}
.shop-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.shop-card__body {
  padding: var(--space-5);
}
.shop-card__name {
  font-size: 1rem;
  font-weight: 900;
  color: var(--ink-1);
  margin-bottom: var(--space-2);
}
.shop-card__meta {
  font-size: 0.8125rem;
  color: var(--ink-3);
  margin-bottom: var(--space-4);
}
@media (max-width: 768px) {
  .shops-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .shops-grid { grid-template-columns: 1fr; }
}

/* ══ REVIEW SYSTEM v3.6.0 ══ */

.review-stars { display:inline-flex; align-items:center; gap:2px; }
.star { font-size:1.25rem; line-height:1; }
.star--full, .star--half { color: var(--or); }
.star--empty { color: var(--border); }
.review-avg { font-family:'Outfit',sans-serif; font-weight:700; font-size:1rem; color:var(--ink-1); margin-left:4px; }

.review-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--rad-xl);
  padding: var(--space-5);
}
.review-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}
.review-card__body {
  font-size: 0.9375rem;
  color: var(--ink-2, var(--ink-1));
  line-height: 1.8;
  margin: 0;
}

/* ══ COMPARE & SITEMAP v3.6.0 ══ */

/* Comparison table */
.compare-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 600px;
}
.compare-table th,
.compare-table td {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  text-align: left;
}
.compare-table__label-col {
  width: 140px;
  background: var(--surface-2, #f8f8f8);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--ink-3);
  white-space: nowrap;
}
.compare-table__pet-col {
  min-width: 180px;
}
.compare-pet-header {
  text-align: center;
}
.compare-table tbody tr:hover td {
  background: #fef9f5;
}

/* Sitemap */
.sitemap-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-7);
}
.sitemap-section--wide {
  grid-column: 1 / -1;
}
.sitemap-heading {
  font-size: 1rem;
  font-weight: 900;
  color: var(--ink-1);
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--or);
  margin-bottom: var(--space-4);
}
.sitemap-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.sitemap-list li {
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.875rem;
}
.sitemap-list a {
  color: var(--ink-1);
  text-decoration: none;
}
.sitemap-list a:hover {
  color: var(--or);
}
.sitemap-list ul {
  list-style: none;
  padding: var(--space-2) 0 0 var(--space-5);
  margin: 0;
}
.sitemap-list--2col {
  columns: 2;
  column-gap: var(--space-5);
}
@media (max-width: 640px) {
  .sitemap-grid { grid-template-columns: 1fr; }
  .sitemap-list--2col { columns: 1; }
}

/* Compare bar clear button hover */
#compare-bar-clear:hover {
  background: rgba(255,255,255,.1);
}
.js-compare-added {
  background: var(--surface-2, #f5f5f5) !important;
  color: var(--ink-3) !important;
  border-color: var(--border) !important;
}

/* ══ FRONT-PAGE DESIGN OVERHAUL v3.6.0 ══ */

/* ── Hero: remove top gap ── */
.hero-v2 { margin-top: 0 !important; }
.admin-bar .hero-v2 { margin-top: 32px !important; }
@media screen and (max-width: 782px) {
  .admin-bar .hero-v2 { margin-top: 46px !important; }
}

/* ── Section header v2 ── */
.sec-hdr-v2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.sec-hdr-v2__main {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.sec-hdr-v2__icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(244,116,42,.08);
  border: 1.5px solid rgba(244,116,42,.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--or);
  flex-shrink: 0;
  font-size: 17px;
  box-shadow: none;
}
.sec-hdr-v2__icon svg { display: none; }
.section--gray .sec-hdr-v2__icon {
  background: rgba(102,126,234,.08);
  border-color: rgba(102,126,234,.15);
  color: #667eea;
}
.sec-hdr-v2__label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--or);
  margin: 0 0 4px;
  line-height: 1;
}
.section--gray .sec-hdr-v2__label { color: #667eea; }
.sec-hdr-v2__title {
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-size: clamp(18px, 2.6vw, 26px);
  font-weight: 700;
  color: #1A1A1A;
  line-height: 1.25;
  letter-spacing: -.01em;
  margin: 0;
}
.sec-hdr-v2__more {
  font-size: 13px;
  font-weight: 700;
  color: var(--or);
  text-decoration: none;
  padding: 8px 18px;
  border: 2px solid var(--or);
  border-radius: 999px;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.sec-hdr-v2__more:hover {
  background: var(--or);
  color: #fff;
}

/* ── Detail condition badges ── */
.smod-detail-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 0;
}
.smod-dbadge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border: 1.5px solid var(--bdr, #e5e7eb);
  border-radius: 100px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-2, #6b7280);
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
  user-select: none;
  white-space: nowrap;
  background: #fff;
}
.smod-dbadge:hover {
  border-color: var(--or);
  background: rgba(244,116,42,.05);
  color: var(--or);
}
.smod-dbadge input { display: none; }
.smod-dbadge:has(input:checked) {
  background: linear-gradient(135deg, #F4742A, #FF9A5C);
  border-color: #F4742A;
  color: #fff;
}

/* ── Prefecture multi-select ── */
.smod-pref-all-btn {
  display: inline-block;
  padding: 5px 14px;
  background: var(--surface-2, #f8f9fa);
  border: 1.5px solid var(--bdr, #e5e7eb);
  border-radius: 100px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  margin-bottom: 8px;
}
.smod-pref-all-btn.active {
  background: var(--or);
  border-color: var(--or);
  color: #fff;
}
.smod-pref-all-btn:hover { border-color: var(--or); }

.smod-pref label.smod-pref {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
label.smod-pref {
  padding: 3px 9px;
  border: 1.5px solid var(--bdr, #e5e7eb);
  border-radius: 100px;
  font-size: 11px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
label.smod-pref:hover { border-color: var(--or); }
label.smod-pref input { display: none; }
label.smod-pref:has(input:checked) {
  background: var(--or-g, var(--or));
  border-color: var(--or);
  color: #fff;
}

/* PC dropdown: prefecture checkbox */
.sdrop-pref-chk {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border: 1.5px solid var(--bdr, #e5e7eb);
  border-radius: 8px;
  font-size: 12px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.sdrop-pref-chk input { display: none; }
.sdrop-pref-chk:has(input:checked) {
  background: var(--or);
  border-color: var(--or);
  color: #fff;
}
.sdrop-pref-chk:hover { border-color: var(--or); }

/* ══════════════════════════════════════════════════════
   TOP PAGE 100-POINT DESIGN SYSTEM v3.7.0
   ══════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────
   1. HERO ENHANCEMENTS
───────────────────────────────────────── */

/* Stats strip inside hero */
.hv2-stats {
  display: flex;
  align-items: center;
  gap: 0;
  margin-top: 28px;
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  padding: 12px 28px;
  width: fit-content;
}
.hv2-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 20px;
  line-height: 1.2;
}
.hv2-stat-num {
  font-family: 'Outfit', sans-serif;
  font-size: 1.375rem;
  font-weight: 900;
  color: #fff;
  letter-spacing: -.02em;
}
.hv2-stat-num small {
  font-size: .75em;
  font-weight: 700;
}
.hv2-stat-lbl {
  font-size: .6875rem;
  color: rgba(255,255,255,.75);
  white-space: nowrap;
  margin-top: 2px;
}
.hv2-stat-div {
  width: 1px;
  height: 28px;
  background: rgba(255,255,255,.25);
}
@media (max-width: 640px) {
  .hv2-stats { padding: 10px 16px; gap: 0; }
  .hv2-stat  { padding: 0 12px; }
  .hv2-stat-num { font-size: 1.125rem; }
}

/* Hero background placeholder when no image */
.hv2-panel {
  background-size: cover;
  background-position: center;
}
.hv2-shop:not([style*="background-image"]) {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.hv2-breeder:not([style*="background-image"]) {
  background: linear-gradient(135deg, #f97316 0%, #ef4444 100%);
}
.hv2-rescue:not([style*="background-image"]) {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

/* ─────────────────────────────────────────
   2. SEARCH BAR V2 — 強いビジュアルウェイト
───────────────────────────────────────── */

.hero-search-float--v2 {
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 20px;
  border: 1.5px solid rgba(255,255,255,.9);
  box-shadow:
    0 8px 32px rgba(0,0,0,.12),
    0 2px 8px rgba(0,0,0,.06),
    0 0 0 1px rgba(249,115,22,.08);
  padding: 16px 20px 20px;
}
.hero-search-float--v2 .sw2 {
  background: transparent;
  box-shadow: none;
  border: none;
  padding: 0;
}
.hero-search-float--v2::before {
  content: 'ペットを探す';
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--or);
  margin-bottom: 10px;
  padding-left: 4px;
}

/* ─────────────────────────────────────────
   3. SECTION ICON COLORS — 各セクション差別化
───────────────────────────────────────── */

.sec-icon--orange  { background: rgba(249,115,22,.08) !important; border-color: rgba(249,115,22,.14) !important; color: #f97316 !important; }
.sec-icon--purple  { background: rgba(139,92,246,.08) !important; border-color: rgba(139,92,246,.14) !important; color: #8b5cf6 !important; }
.sec-icon--gold    { background: rgba(245,158,11,.08) !important; border-color: rgba(245,158,11,.14) !important; color: #d97706 !important; }
.sec-icon--blue    { background: rgba(59,130,246,.08)  !important; border-color: rgba(59,130,246,.14)  !important; color: #3b82f6 !important; }
.sec-icon--teal    { background: rgba(20,184,166,.08)  !important; border-color: rgba(20,184,166,.14)  !important; color: #0d9488 !important; }
.sec-icon--pink    { background: rgba(236,72,153,.08)  !important; border-color: rgba(236,72,153,.14)  !important; color: #db2777 !important; }
.sec-icon--emerald { background: rgba(16,185,129,.08)  !important; border-color: rgba(16,185,129,.14)  !important; color: #059669 !important; }

/* Section label color matching icon */
.sec-icon--purple  ~ div .sec-hdr-v2__label { color: #8b5cf6; }
.sec-icon--gold    ~ div .sec-hdr-v2__label { color: #d97706; }
.sec-icon--blue    ~ div .sec-hdr-v2__label { color: #3b82f6; }
.sec-icon--teal    ~ div .sec-hdr-v2__label { color: #0d9488; }
.sec-icon--pink    ~ div .sec-hdr-v2__label { color: #db2777; }
.sec-icon--emerald ~ div .sec-hdr-v2__label { color: #059669; }

/* ─────────────────────────────────────────
   4. SECTION RHYTHM — メリハリある余白
───────────────────────────────────────── */

/* Feature sections: more breathing room */
.section--feature {
  padding-top: var(--space-10);
  padding-bottom: var(--space-10);
}
/* Compact supporting sections */
.section--compact {
  padding-top: var(--space-7);
  padding-bottom: var(--space-7);
}
/* Alternate background sections: subtle */
.section--alt {
  background: linear-gradient(180deg, #fafafa 0%, #fff 100%);
}

/* ─────────────────────────────────────────
   5. SKELETON LOADER
───────────────────────────────────────── */

@keyframes skeleton-wave {
  0%   { background-position: -200px 0; }
  100% { background-position: calc(200px + 100%) 0; }
}
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 37%, #f0f0f0 63%);
  background-size: 400px 100%;
  animation: skeleton-wave 1.4s ease infinite;
  border-radius: 8px;
}
.skeleton-card {
  background: #fff;
  border-radius: var(--rad-xl, 16px);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.skeleton-card__thumb {
  aspect-ratio: 4/3;
  background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 37%, #f0f0f0 63%);
  background-size: 400px 100%;
  animation: skeleton-wave 1.4s ease infinite;
}
.skeleton-card__body { padding: 14px; }
.skeleton-card__line {
  height: 12px;
  border-radius: 6px;
  margin-bottom: 10px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 37%, #f0f0f0 63%);
  background-size: 400px 100%;
  animation: skeleton-wave 1.4s ease infinite;
}
.skeleton-card__line--short { width: 60%; }
.skeleton-card__line--price { width: 40%; height: 18px; }

/* ─────────────────────────────────────────
   6. EMPTY STATE
───────────────────────────────────────── */

.empty-state-hero {
  text-align: center;
  padding: var(--space-10) var(--space-5);
  max-width: 480px;
  margin: 0 auto;
}
.empty-state-hero__icon {
  font-size: 4rem;
  margin-bottom: var(--space-5);
  animation: bounce 2s infinite;
}
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}
.empty-state-hero__title {
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-size: clamp(20px, 4vw, 28px);
  font-weight: 900;
  color: var(--ink, #1a1a1a);
  margin-bottom: var(--space-4);
}
.empty-state-hero__sub {
  font-size: .9375rem;
  color: var(--ink-3, #6b7280);
  line-height: 1.8;
  margin-bottom: var(--space-6);
}

/* ─────────────────────────────────────────
   7. SELLER CTA SECTION
───────────────────────────────────────── */

.section--seller {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 40%, #0f172a 100%);
  position: relative;
  overflow: hidden;
}
.section--seller::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 80% 50%, rgba(249,115,22,.15) 0%, transparent 70%),
    radial-gradient(ellipse 40% 60% at 10% 80%, rgba(139,92,246,.1) 0%, transparent 70%);
  pointer-events: none;
}
.seller-cta {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: var(--space-10);
  align-items: center;
  padding: var(--space-3) 0;
  position: relative;
  z-index: 1;
}
.seller-cta__badge {
  display: inline-block;
  background: rgba(249,115,22,.2);
  border: 1px solid rgba(249,115,22,.4);
  color: #fb923c;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  padding: 5px 14px;
  border-radius: 999px;
  margin-bottom: var(--space-5);
}
.seller-cta__title {
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-size: clamp(22px, 3.5vw, 36px);
  font-weight: 900;
  color: #fff;
  line-height: 1.3;
  margin-bottom: var(--space-5);
  letter-spacing: -.02em;
}
.seller-cta__sub {
  font-size: .9375rem;
  color: rgba(255,255,255,.7);
  line-height: 1.8;
  margin-bottom: var(--space-6);
  max-width: 500px;
}
.seller-cta__list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-7);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.seller-cta__list li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: .9375rem;
  color: rgba(255,255,255,.85);
}
.seller-cta__list svg {
  color: #f97316;
  flex-shrink: 0;
}
.seller-cta__actions {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.seller-cta__btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #f97316 0%, #ef4444 100%);
  color: #fff;
  font-weight: 800;
  font-size: .9375rem;
  padding: 14px 28px;
  border-radius: 999px;
  text-decoration: none;
  transition: transform .15s, box-shadow .15s;
  box-shadow: 0 4px 20px rgba(249,115,22,.45);
}
.seller-cta__btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(249,115,22,.6);
}
.seller-cta__btn-secondary {
  display: inline-flex;
  align-items: center;
  padding: 14px 24px;
  border: 1.5px solid rgba(255,255,255,.3);
  color: rgba(255,255,255,.85);
  font-weight: 700;
  font-size: .9375rem;
  border-radius: 999px;
  text-decoration: none;
  transition: border-color .15s, color .15s;
}
.seller-cta__btn-secondary:hover {
  border-color: rgba(255,255,255,.7);
  color: #fff;
}

/* Seller stats box */
.seller-cta__visual {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.seller-cta__stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-3);
}
.seller-stat {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px;
  padding: var(--space-5) var(--space-4);
  text-align: center;
}
.seller-stat__num {
  font-family: 'Outfit', sans-serif;
  font-size: 1.75rem;
  font-weight: 900;
  color: #fff;
  line-height: 1;
  margin-bottom: 4px;
}
.seller-stat__num span {
  font-size: 1rem;
  color: #f97316;
}
.seller-stat__lbl {
  font-size: .6875rem;
  color: rgba(255,255,255,.5);
  line-height: 1.4;
}
.seller-cta__badge-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.sc-badge {
  padding: 6px 14px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 999px;
  font-size: 12px;
  color: rgba(255,255,255,.65);
}

@media (max-width: 900px) {
  .seller-cta {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
  .seller-cta__stats { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .seller-cta__stats { grid-template-columns: 1fr 1fr; }
  .seller-stat__num  { font-size: 1.375rem; }
  .seller-cta__btn-primary,
  .seller-cta__btn-secondary { width: 100%; justify-content: center; }
}

/* ─────────────────────────────────────────
   8. AFTER ADOPTION STRIP
───────────────────────────────────────── */

.after-adoption-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
.aa-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  background: var(--surface-1, #fff);
  border: 1.5px solid var(--border, #e5e7eb);
  border-radius: var(--rad-xl, 14px);
  padding: var(--space-4) var(--space-5);
  transition: border-color .2s, box-shadow .2s;
}
.aa-card:hover {
  border-color: var(--or);
  box-shadow: 0 4px 16px rgba(249,115,22,.12);
}
.aa-card__icon {
  font-size: 1.75rem;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  background: var(--surface-2, #f9f9f9);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.aa-card__body { flex: 1; }
.aa-card__title {
  font-size: .875rem;
  font-weight: 800;
  color: var(--ink, #1a1a1a);
  margin-bottom: 2px;
}
.aa-card__sub {
  font-size: .75rem;
  color: var(--ink-3, #9ca3af);
}
.aa-card__link {
  font-size: .8125rem;
  font-weight: 700;
  color: var(--or);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .after-adoption-strip { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────
   9. BRAND CONSISTENCY — オレンジ一本化
───────────────────────────────────────── */

/* Ensure orange is the dominant CTA color */
.btn--primary,
.sw2-submit,
.smodal-submit,
.seller-cta__btn-primary {
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
  border: none;
}

/* type-pills: active state orange only */
.tpill.active {
  background: var(--or) !important;
  color: #fff !important;
  border-color: var(--or) !important;
}
.tpill.br.active,
.tpill.sp.active,
.tpill.sh.active { background: var(--or) !important; }

/* ─────────────────────────────────────────
   10. MICRO-INTERACTIONS & POLISH
───────────────────────────────────────── */

/* Smooth card hover */
.provcard,
.rvcard {
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease;
}
.provcard:hover,
.rvcard:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,.1);
}

/* Breed chip hover */
.bchip {
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.bchip:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(249,115,22,.2);
  border-color: var(--or);
}

/* Section divider accent */
.section + .section--gray::before,
.section--gray + .section::before {
  content: none;
}

/* Scroll to top button: show on scroll */
.scroll-to-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  background: var(--or);
  color: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(249,115,22,.4);
  transition: opacity .2s, transform .2s;
  opacity: 0;
  pointer-events: none;
  z-index: 100;
}
.scroll-to-top.visible {
  opacity: 1;
  pointer-events: auto;
}
.scroll-to-top:hover { transform: translateY(-3px); }

@media (max-width: 480px) {
  .scroll-to-top { bottom: 80px; right: 16px; }
}

/* ══════════════════════════════════════════════════════
   PLATFORM BANNER v3 — animated image cards
   ══════════════════════════════════════════════════════ */

/* ── Section wrapper ── */
.pb3-section {
  background-color: #F5F6F8;
  background-image: none;
  padding: var(--space-16, 96px) 0;
  overflow: hidden;
}
.pb3-section::before { display: none; }

/* ── Centered heading ── */
.pb3-hdr {
  text-align: center;
  margin-bottom: 64px;
}
.pb3-hdr__eyebrow {
  display: inline-block;
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--or, #F4742A);
  background: linear-gradient(135deg, rgba(244,116,42,.1), rgba(255,154,92,.1));
  border: 1px solid rgba(244,116,42,.25);
  padding: 5px 16px;
  border-radius: 100px;
  margin-bottom: 20px;
}
.pb3-hdr__title {
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 900;
  color: var(--ink, #111827);
  line-height: 1.2;
  margin-bottom: 20px;
}
.pb3-hdr__title em {
  font-style: normal;
  background: linear-gradient(135deg, #F4742A 0%, #FF9A5C 50%, #FFB347 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.pb3-hdr__deco {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
}
.pb3-hdr__deco-line {
  display: block;
  width: 48px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(244,116,42,.4), rgba(244,116,42,.4));
  border-radius: 2px;
}
.pb3-hdr__deco-line:last-child {
  background: linear-gradient(90deg, rgba(244,116,42,.4), rgba(244,116,42,.4), transparent);
}
.pb3-hdr__deco-dot {
  display: block;
  width: 8px;
  height: 8px;
  background: var(--or, #F4742A);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(244,116,42,.2);
  animation: pb3-dot-pulse 2.4s ease-in-out infinite;
}
@keyframes pb3-dot-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(244,116,42,.2); }
  50% { box-shadow: 0 0 0 6px rgba(244,116,42,.08); }
}
.pb3-hdr__sub {
  font-size: 15px;
  color: var(--ink-2, #6b7280);
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.8;
}

/* ── 3-col grid ── */
.pb3-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

/* ── Card base ── */
.pb3-card {
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,.07);
  border: 1px solid rgba(0,0,0,.05);
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease;
  cursor: pointer;
  display: flex;
  flex-direction: column;
}
.pb3-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 56px rgba(0,0,0,.13);
}

/* ── Image area ── */
.pb3-card__img-wrap {
  position: relative;
  height: 220px;
  overflow: hidden;
  flex-shrink: 0;
}
/* Fallback gradient when no image */
.pb3-card--or .pb3-card__img-wrap { background: linear-gradient(145deg, #FFECD6, #FFD4A8, #FFC17A); }
.pb3-card--bl .pb3-card__img-wrap { background: linear-gradient(145deg, #DBEEFF, #B8DAFF, #8EC5FF); }
.pb3-card--gr .pb3-card__img-wrap { background: linear-gradient(145deg, #D4F5E6, #A8EAC8, #7ADFA8); }

.pb3-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.25,.46,.45,.94);
  display: block;
}
.pb3-card:hover .pb3-card__img { transform: scale(1.08); }

/* Color overlay (slides up on hover) */
.pb3-card__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 20px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .3s ease, transform .3s ease;
}
.pb3-card--or .pb3-card__overlay { background: linear-gradient(to top, rgba(244,116,42,.82) 0%, rgba(244,116,42,.2) 60%, transparent 100%); }
.pb3-card--bl .pb3-card__overlay { background: linear-gradient(to top, rgba(63,136,228,.82) 0%, rgba(63,136,228,.2) 60%, transparent 100%); }
.pb3-card--gr .pb3-card__overlay { background: linear-gradient(to top, rgba(46,166,106,.82) 0%, rgba(46,166,106,.2) 60%, transparent 100%); }
.pb3-card:hover .pb3-card__overlay { opacity: 1; transform: translateY(0); }
.pb3-card__overlay-txt {
  color: #fff;
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .05em;
  text-shadow: 0 1px 3px rgba(0,0,0,.3);
}

/* Number badge */
.pb3-card__num {
  position: absolute;
  top: 14px;
  right: 16px;
  font-family: 'Outfit', sans-serif;
  font-size: 52px;
  font-weight: 900;
  line-height: 1;
  color: rgba(255,255,255,.35);
  pointer-events: none;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), color .3s;
  user-select: none;
}
.pb3-card:hover .pb3-card__num {
  transform: scale(1.12) translateY(-2px);
  color: rgba(255,255,255,.55);
}

/* ── Card body ── */
.pb3-card__body {
  padding: 24px 24px 28px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Icon */
.pb3-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}
.pb3-card--or .pb3-card__icon { background: linear-gradient(145deg, #FFF5EC, #FFE5CC); color: var(--or, #F4742A); }
.pb3-card--bl .pb3-card__icon { background: linear-gradient(145deg, #EBF5FF, #D2E8FF); color: var(--bl, #3F88E4); }
.pb3-card--gr .pb3-card__icon { background: linear-gradient(145deg, #EDFBF3, #D1F0E2); color: var(--gr, #2EA66A); }
.pb3-card:hover .pb3-card__icon { transform: rotate(-6deg) scale(1.1); }

/* Title */
.pb3-card__name {
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-size: 20px;
  font-weight: 900;
  margin-bottom: 8px;
  line-height: 1.3;
}
.pb3-card--or .pb3-card__name { color: var(--or-d, #C9520A); }
.pb3-card--bl .pb3-card__name { color: var(--bl-d, #1E5CA8); }
.pb3-card--gr .pb3-card__name { color: var(--gr-d, #1A7A4E); }

/* Description */
.pb3-card__desc {
  font-size: 13px;
  color: var(--ink-2, #6b7280);
  line-height: 1.75;
  margin-bottom: 16px;
}

/* Feature list */
.pb3-card__features {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pb3-card__features li {
  font-size: 12.5px;
  color: var(--ink, #111827);
  padding-left: 20px;
  position: relative;
  line-height: 1.5;
}
.pb3-card__features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 5px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: currentColor;
  opacity: .15;
}
.pb3-card__features li::after {
  content: '✓';
  position: absolute;
  left: 1px;
  top: 2px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}
.pb3-card--or .pb3-card__features li::after { color: var(--or, #F4742A); }
.pb3-card--bl .pb3-card__features li::after { color: var(--bl, #3F88E4); }
.pb3-card--gr .pb3-card__features li::after { color: var(--gr, #2EA66A); }

/* CTA button */
.pb3-card__cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 100px;
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease, gap .25s ease;
  position: relative;
  overflow: hidden;
}
.pb3-card__cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0);
  transition: background .25s;
}
.pb3-card__cta:hover::before { background: rgba(255,255,255,.12); }
.pb3-card__cta:hover { transform: translateY(-2px); gap: 12px; }
.pb3-card--or .pb3-card__cta { background: linear-gradient(135deg, #F4742A, #FF9A5C); box-shadow: 0 4px 14px rgba(244,116,42,.35); }
.pb3-card--or .pb3-card__cta:hover { box-shadow: 0 7px 22px rgba(244,116,42,.48); }
.pb3-card--bl .pb3-card__cta { background: linear-gradient(135deg, #3F88E4, #6AADF5); box-shadow: 0 4px 14px rgba(63,136,228,.35); }
.pb3-card--bl .pb3-card__cta:hover { box-shadow: 0 7px 22px rgba(63,136,228,.48); }
.pb3-card--gr .pb3-card__cta { background: linear-gradient(135deg, #2EA66A, #4EC98A); box-shadow: 0 4px 14px rgba(46,166,106,.35); }
.pb3-card--gr .pb3-card__cta:hover { box-shadow: 0 7px 22px rgba(46,166,106,.48); }
.pb3-card__cta svg { transition: transform .25s ease; flex-shrink: 0; }
.pb3-card__cta:hover svg { transform: translateX(4px); }

/* ── stagger delay ── */
.pb3-card[style*="--stagger:0"] { animation-delay: 0s; }
.pb3-card[style*="--stagger:1"] { animation-delay: .12s; }
.pb3-card[style*="--stagger:2"] { animation-delay: .24s; }

/* ── Responsive ── */
@media (max-width: 900px) {
  .pb3-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
  .pb3-card__img-wrap { height: 180px; }
}
@media (max-width: 600px) {
  .pb3-grid { grid-template-columns: 1fr; gap: 16px; }
  .pb3-section { padding: 64px 0; }
  .pb3-card__img-wrap { height: 200px; }
  .pb3-hdr { margin-bottom: 40px; }
}

/* ══════════════════════════════════════════════════════
   DIAGNOSIS SECTION — full redesign
   ══════════════════════════════════════════════════════ */
.diag-section {
  position: relative;
  padding: 100px 0;
  background: linear-gradient(135deg, #0f0c29 0%, #1d0b3a 35%, #24243e 70%, #0d1117 100%);
  overflow: hidden;
  isolation: isolate;
}

/* mesh orb shapes */
.diag-bg-shapes { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.diag-shape { position: absolute; border-radius: 50%; filter: blur(80px); }
.diag-shape--1 { width: 500px; height: 500px; background: rgba(244,116,42,.22); top: -150px; left: -100px; }
.diag-shape--2 { width: 350px; height: 350px; background: rgba(139,92,246,.18); bottom: -80px; right: 15%; }
.diag-shape--3 { width: 250px; height: 250px; background: rgba(251,191,36,.12); top: 30%; right: -50px; }

/* layout */
.diag-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 72px;
}

/* left: text */
.diag-eyebrow {
  display: inline-block;
  font-family: 'Outfit', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(251,191,36,.95);
  background: rgba(251,191,36,.08);
  border: 1px solid rgba(251,191,36,.28);
  padding: 4px 14px;
  border-radius: 100px;
  margin-bottom: 22px;
}
.diag-title {
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-size: clamp(22px, 3.2vw, 38px);
  font-weight: 900;
  color: #fff;
  line-height: 1.35;
  margin-bottom: 16px;
  letter-spacing: -.01em;
}
.diag-sub {
  font-size: 14px;
  color: rgba(255,255,255,.62);
  line-height: 1.9;
  margin-bottom: 28px;
  max-width: 420px;
}
.diag-features {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}
.diag-feat {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,.82);
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.13);
  padding: 6px 14px;
  border-radius: 100px;
  backdrop-filter: blur(6px);
}
.diag-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 38px;
  background: linear-gradient(135deg, #F4742A 0%, #FF9A5C 100%);
  color: #fff;
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-size: 16px;
  font-weight: 800;
  border-radius: 100px;
  text-decoration: none;
  box-shadow: 0 10px 36px rgba(244,116,42,.5);
  transition: transform .28s cubic-bezier(.34,1.56,.64,1), box-shadow .28s ease;
  animation: diagCtaPulse 2.8s ease-in-out infinite;
}
.diag-cta-btn:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 18px 48px rgba(244,116,42,.65);
  animation-play-state: paused;
}
.diag-cta-btn svg { transition: transform .22s ease; }
.diag-cta-btn:hover svg { transform: translateX(5px); }
@keyframes diagCtaPulse {
  0%, 100% { box-shadow: 0 10px 36px rgba(244,116,42,.5); }
  50%       { box-shadow: 0 10px 52px rgba(244,116,42,.7); }
}

/* right: quiz card */
.diag-visual { position: relative; }
.diag-quiz-card {
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 24px;
  padding: 36px 32px;
  box-shadow: 0 28px 72px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.1);
  animation: diagCardFloat 4.5s ease-in-out infinite;
}
@keyframes diagCardFloat {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-12px); }
}
.diag-quiz-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}
.diag-quiz-step {
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,.45);
  white-space: nowrap;
}
.diag-quiz-bar {
  flex: 1;
  height: 4px;
  background: rgba(255,255,255,.1);
  border-radius: 4px;
  overflow: hidden;
}
.diag-quiz-bar span {
  display: block;
  height: 100%;
  width: 20%;
  background: linear-gradient(90deg, #F4742A, #FFB347);
  border-radius: 4px;
}
.diag-quiz-q {
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 20px;
  line-height: 1.45;
}
.diag-quiz-opts { display: flex; flex-direction: column; gap: 10px; }
.diag-quiz-opt {
  padding: 13px 16px;
  background: rgba(255,255,255,.05);
  border: 1.5px solid rgba(255,255,255,.1);
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(255,255,255,.65);
}
.diag-quiz-opt--sel {
  background: linear-gradient(135deg, rgba(244,116,42,.28), rgba(255,154,92,.15));
  border-color: rgba(244,116,42,.55);
  color: #fff;
}

/* floating paw emojis */
.diag-float-paw {
  position: absolute;
  pointer-events: none;
  user-select: none;
  line-height: 1;
}
.diag-float-paw--1 { font-size: 30px; top: -18px; right: -12px; animation: diagFlt1 3.8s ease-in-out infinite; }
.diag-float-paw--2 { font-size: 42px; bottom: -12px; left: -22px; animation: diagFlt2 4.5s ease-in-out infinite; }
.diag-float-paw--3 { font-size: 22px; top: 45%; right: -28px; transform: translateY(-50%); animation: diagFlt1 3.2s ease-in-out infinite reverse; }
@keyframes diagFlt1 {
  0%, 100% { transform: translateY(0) rotate(-6deg); }
  50%       { transform: translateY(-14px) rotate(6deg); }
}
@keyframes diagFlt2 {
  0%, 100% { transform: translateY(0) rotate(10deg); }
  50%       { transform: translateY(-16px) rotate(-6deg); }
}

/* responsive */
@media (max-width: 900px) {
  .diag-inner { grid-template-columns: 1fr; gap: 48px; }
  .diag-visual { max-width: 440px; margin: 0 auto; }
  .diag-section { padding: 72px 0; }
}
@media (max-width: 600px) {
  .diag-section { padding: 60px 0; }
  .diag-quiz-card { padding: 24px 20px; }
  .diag-cta-btn { width: 100%; justify-content: center; }
  .diag-sub { max-width: none; }
}

/* ══════════════════════════════════════════════════════
   TOP PAGE — BACKGROUND POLISH v3.9.0
   ══════════════════════════════════════════════════════ */

/* セクション間の微細なセパレーター */
.section + .section,
.section + .diag-section,
.diag-section + .section {
  border-top: 1px solid rgba(0,0,0,.04);
}

/* --gray セクションにさらに奥行きを追加 */
.section--gray {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), inset 0 -1px 0 rgba(0,0,0,.03);
}

/* pb3 セクションの pb3-grid 内コンテンツが ::before を超えて表示されるよう */
.pb3-section .container { position: relative; z-index: 1; }

/* レビューセクション（白）に微弱ピンク光 */
.section:has(.rvcard) {
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(236,72,153,.04) 0%, transparent 55%),
    radial-gradient(ellipse at 96% 4%,  rgba(244,116,42,.04) 0%, transparent 40%);
}

/* コラムセクション（--gray）内のカードに浮遊感 */
.col-card {
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease;
}
.col-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0,0,0,.1);
}

/* プロバイダーカードも統一 */
.provcard {
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease !important;
}
.provcard:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.1) !important;
}

/* ══════════════════════════════════════════════════════
   STARTUP CORPORATE DESIGN SYSTEM v3.9.2
   ── グラデーション排除・クリーンデザイン統合
   ══════════════════════════════════════════════════════ */

/* Font Awesome icon size in sec-hdr */
.sec-hdr-v2__icon i { font-size: 17px; line-height: 1; }

/* pb3-card icon — FA対応 */
.pb3-card__icon i { font-size: 20px; line-height: 1; }
.pb3-card__icon svg { display: none; }

/* セクションラベル (eyebrow) — オレンジ統一 */
.sec-hdr-v2__label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #F4742A;
  margin: 0 0 3px;
  line-height: 1;
}
/* 全セクション label をオレンジで統一（blue/purpleなど個別上書き削除） */
.sec-icon--purple  ~ div .sec-hdr-v2__label,
.sec-icon--gold    ~ div .sec-hdr-v2__label,
.sec-icon--blue    ~ div .sec-hdr-v2__label,
.sec-icon--teal    ~ div .sec-hdr-v2__label,
.sec-icon--pink    ~ div .sec-hdr-v2__label,
.sec-icon--emerald ~ div .sec-hdr-v2__label { color: #F4742A; }

/* pb3 card name weight */
.pb3-card__name { font-weight: 700 !important; }

/* pb3-card fallback bg — グラデーション → フラット */
.pb3-card--or .pb3-card__img-wrap { background: #FFE8D6; }
.pb3-card--bl .pb3-card__img-wrap { background: #DBEEFF; }
.pb3-card--gr .pb3-card__img-wrap { background: #D4F5E6; }

/* pb3-card design cleanup */
.pb3-card {
  box-shadow: 0 1px 4px rgba(0,0,0,.06), 0 0 0 1px rgba(0,0,0,.04);
  border: none;
}
.pb3-card:hover {
  box-shadow: 0 12px 36px rgba(0,0,0,.10);
}

/* pb3-card overlay — soften */
.pb3-card--or .pb3-card__overlay { background: linear-gradient(to top, rgba(244,116,42,.75) 0%, rgba(244,116,42,.15) 65%, transparent 100%); }
.pb3-card--bl .pb3-card__overlay { background: linear-gradient(to top, rgba(63,136,228,.75) 0%, rgba(63,136,228,.15) 65%, transparent 100%); }
.pb3-card--gr .pb3-card__overlay { background: linear-gradient(to top, rgba(46,166,106,.75) 0%, rgba(46,166,106,.15) 65%, transparent 100%); }

/* セクション区切り — 統一 */
.section + .section { border-top: 1px solid #F0EFED; }
.section + .diag-section,
.diag-section + .section { border-top: none; }
.section--gray { border-top: 1px solid #EDECEA !important; box-shadow: none !important; }

/* 見出し全体のblack軽減 */
h1, h2, h3 { color: #1A1A1A; }
.sec-hdr-v2__title { color: #1A1A1A; }

/* sec-hdr-v2 __more link — シンプル化 */
.sec-hdr-v2__more {
  font-size: 12.5px;
  font-weight: 600;
  color: #F4742A;
  text-decoration: none;
  padding: 6px 14px;
  border: 1.5px solid rgba(244,116,42,.35);
  border-radius: 100px;
  transition: background .15s, color .15s, border-color .15s;
  white-space: nowrap;
}
.sec-hdr-v2__more:hover {
  background: #F4742A;
  border-color: #F4742A;
  color: #fff;
}

/* ── ダークセクション・診断セクションのみグラデーション維持 ── */
/* (diag-section は別途定義済み) */

/* ── 全体 body 背景 ── */
body { background: #FAFAF9; }

/* ── cta-banner-v2 (もし残っていれば) グラデーション維持 ── */

/* ── CTA pulse button — keep gradient (intentional brand element) ── */

/* ── hv2-stats strip cleanup ── */
.hv2-stats {
  background: rgba(255,255,255,.85) !important;
  border: 1px solid rgba(0,0,0,.07) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.06) !important;
}

/* レスポンシブ: セクションタイトルサイズ調整 */
@media (max-width: 768px) {
  .sec-hdr-v2__title { font-size: 18px; }
}

/* ══════════════════════════════════════
   WANNYA CARD SLIDER
══════════════════════════════════════ */
.w-slider { position: relative; }

/* Track — horizontal scroll + snap */
.w-slider__track {
  display: flex;
  gap: 16px;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: 6px;
  cursor: grab;
  user-select: none;
}
.w-slider__track.is-dragging { cursor: grabbing; scroll-behavior: auto; }
.w-slider__track::-webkit-scrollbar { display: none; }

/* Default card sizing: 3 per view (providers) */
.w-slider__track > * {
  flex: 0 0 calc((100% - 32px) / 3);
  scroll-snap-align: start;
  min-width: 0;
}

/* Reviews: 2 per view */
#rv-grid.w-slider__track > * {
  flex: 0 0 calc((100% - 16px) / 2);
}

@media (max-width: 900px) {
  .w-slider__track > * { flex: 0 0 calc((100% - 16px) / 2); }
  #rv-grid.w-slider__track > * { flex: 0 0 calc((100% - 16px) / 2); }
}
@media (max-width: 620px) {
  .w-slider__track > *,
  #rv-grid.w-slider__track > * { flex: 0 0 min(300px, 82vw); }
}

/* Controls */
.w-slider__ctrl {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 20px;
}
.w-slider__btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--bdr);
  background: var(--wh);
  color: var(--ink);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  transition: border-color .2s, color .2s, background .2s;
  flex-shrink: 0;
}
.w-slider__btn:hover { border-color: var(--or); color: var(--or); background: #fff5ef; }
.w-slider__btn:disabled { opacity: .3; cursor: not-allowed; }

/* Dots */
.w-slider__dots { display: flex; gap: 6px; align-items: center; }
.w-slider__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--bdr2, #d1d5db);
  border: none; padding: 0;
  cursor: pointer;
  transition: width .25s, background .25s, border-radius .25s;
}
.w-slider__dot.is-active {
  background: var(--or);
  width: 20px;
  border-radius: 4px;
}

/* Override old grid layout inside slider */
.w-slider .prov-grid { display: flex; grid-template-columns: unset; }
.w-slider .review-grid { display: flex; grid-template-columns: unset; }