/* =========================================================
   みさお商店 — SKY & WHITE design system (2026-10 renewal)
   白 × 水色で統一。全ページ共通（トップ・各サブページ）。
   ========================================================= */
:root{
  --sky-50:#F5FBFF; --sky-100:#E8F5FE; --sky-200:#CFEAFC; --sky-300:#9FD6F8;
  --sky-400:#5CBDF3; --sky-500:#26A4EA; --sky-600:#0B87D3; --sky-700:#0A6AAA; --sky-800:#0B4E80;
  --ink:#0B2540; --ink-2:#3B5672; --muted:#6B849F;
  --white:#FFFFFF; --dark:#0B2540;
  --line:rgba(38,164,234,.20); --line-2:rgba(11,37,64,.08);
  --surface:#FFFFFF; --surface2:#F5FBFF;
  --grad:linear-gradient(135deg,#5CBDF3 0%,#26A4EA 55%,#0B87D3 100%);
  --grad-soft:linear-gradient(135deg,#E8F5FE 0%,#F5FBFF 100%);
  --shadow-sm:0 2px 10px rgba(11,87,140,.07);
  --shadow:0 12px 34px rgba(11,87,140,.12);
  --shadow-lg:0 24px 60px rgba(11,87,140,.18);
  --r:22px;
  --font-display:'Outfit','Noto Sans JP',sans-serif;
  --font-body:'Noto Sans JP','Hiragino Kaku Gothic ProN','Meiryo',sans-serif;
  /* 旧変数（互換: 旧ページのインラインCSSが参照）— すべて水色系へ */
  --yellow:#5CBDF3; --orange:#0B87D3; --pink:#26A4EA; --cyan:#26A4EA; --green:#0B87D3; --purple:#0A6AAA;
  --muted2:#6B849F;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{font-family:var(--font-body)!important;background:#fff!important;color:var(--ink)!important;overflow-x:hidden;line-height:1.7;-webkit-font-smoothing:antialiased}
img{max-width:100%}
::selection{background:var(--sky-300);color:var(--ink)}
a{-webkit-tap-highlight-color:transparent}

/* ---------- scroll progress ---------- */
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:var(--grad);z-index:300;pointer-events:none}

/* ---------- decorative background ---------- */
.bg-shapes,.bg-orbs{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.bg-shapes .shape{display:none}
.bg-orbs::before,.bg-orbs::after{content:"";position:absolute;border-radius:50%;filter:blur(70px);opacity:.55}
.bg-orbs::before{width:520px;height:520px;background:radial-gradient(circle,#BFE6FC,transparent 70%);top:-160px;right:-120px;animation:orbA 18s ease-in-out infinite alternate}
.bg-orbs::after{width:460px;height:460px;background:radial-gradient(circle,#D7F0FF,transparent 70%);bottom:-140px;left:-120px;animation:orbB 22s ease-in-out infinite alternate}
@keyframes orbA{to{transform:translate(-80px,90px) scale(1.15)}}
@keyframes orbB{to{transform:translate(100px,-70px) scale(1.1)}}

/* ---------- NAV ---------- */
.site-nav{position:sticky!important;top:0;z-index:200;height:68px!important;padding:0 clamp(14px,3vw,32px)!important;display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:rgba(255,255,255,.72)!important;-webkit-backdrop-filter:saturate(1.6) blur(16px);backdrop-filter:saturate(1.6) blur(16px);
  border-bottom:1px solid var(--line)!important;transition:box-shadow .3s,background .3s,height .3s}
.site-nav.scrolled{box-shadow:0 8px 30px rgba(11,87,140,.10);background:rgba(255,255,255,.9)!important;height:60px!important}
.nav-logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)!important;flex-shrink:0}
.nav-logo img{width:38px!important;height:38px!important;border-radius:12px!important;border:2px solid var(--sky-300)!important;object-fit:cover;box-shadow:var(--shadow-sm)}
.nav-logo-text{font-family:var(--font-display)!important;font-weight:800;font-size:1.15rem!important;letter-spacing:.02em;color:var(--ink)!important;background:none!important;-webkit-text-fill-color:currentColor}
.nav-logo-text small{font-weight:600;color:var(--sky-600);font-size:.62rem;letter-spacing:.14em;display:block;line-height:1;margin-top:2px}
.nav-links{display:none;align-items:center;gap:2px;flex:1;justify-content:center;overflow:visible!important}
.nav-link{position:relative;text-decoration:none;font-size:.82rem!important;font-weight:700;padding:8px 14px!important;border-radius:999px;color:var(--ink-2)!important;background:transparent!important;border:0!important;white-space:nowrap;transition:color .2s,background .2s}
.nav-link:hover{background:var(--sky-100)!important;color:var(--sky-700)!important}
.nav-link i{margin-right:6px;color:var(--sky-500)}
.nav-back{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-size:.82rem;font-weight:700;color:var(--sky-700)!important;padding:9px 18px;border-radius:999px;border:1.5px solid var(--sky-300)!important;background:#fff!important;transition:all .2s}
.nav-back:hover{background:var(--sky-500)!important;border-color:var(--sky-500)!important;color:#fff!important}
.nav-right{display:flex;align-items:center;gap:8px}
.menu-btn{display:inline-flex;align-items:center;gap:10px;font:700 .8rem var(--font-display);letter-spacing:.12em;color:#fff;background:var(--grad);border:0;border-radius:999px;padding:10px 18px;cursor:pointer;box-shadow:0 8px 20px rgba(38,164,234,.35);transition:transform .2s,box-shadow .2s}
.menu-btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(38,164,234,.45)}
.menu-btn .bars{display:inline-flex;flex-direction:column;gap:4px}
.menu-btn .bars i{display:block;width:16px;height:2px;background:#fff;border-radius:2px;transition:transform .3s,opacity .3s}
.menu-btn[aria-expanded="true"] .bars i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-btn[aria-expanded="true"] .bars i:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] .bars i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media(min-width:1080px){.nav-links{display:flex}}

/* full menu overlay */
.menu-overlay{position:fixed;inset:0;z-index:190;background:rgba(245,251,255,.96);-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);padding:92px clamp(16px,4vw,48px) 40px;overflow-y:auto;opacity:0;visibility:hidden;transform:translateY(-12px);transition:opacity .35s,transform .35s,visibility .35s}
.menu-overlay.open{opacity:1;visibility:visible;transform:none}
.menu-overlay .menu-inner{max-width:980px;margin:0 auto}
.menu-label{font:700 .72rem var(--font-display);letter-spacing:.3em;color:var(--sky-600);margin:0 0 14px}
.menu-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin-bottom:34px}
.menu-item{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px 18px;font-weight:700;font-size:.95rem;box-shadow:var(--shadow-sm);transition:transform .25s,box-shadow .25s,border-color .25s;opacity:0;transform:translateY(14px)}
.menu-overlay.open .menu-item{opacity:1;transform:none;transition:opacity .5s calc(var(--i,0)*40ms + .1s),transform .5s calc(var(--i,0)*40ms + .1s),box-shadow .25s,border-color .25s}
.menu-item:hover{border-color:var(--sky-400);box-shadow:var(--shadow);transform:translateY(-3px)!important}
.menu-item .mi{width:42px;height:42px;border-radius:13px;background:var(--grad-soft);color:var(--sky-600);display:grid;place-items:center;font-size:1.05rem;flex-shrink:0;border:1px solid var(--sky-200)}
.menu-item small{display:block;font-weight:500;color:var(--muted);font-size:.72rem;margin-top:1px}
body.menu-open{overflow:hidden}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 30px;border-radius:999px;font-family:var(--font-body);font-size:.95rem;font-weight:800;text-decoration:none;cursor:pointer;border:0;position:relative;overflow:hidden;transition:transform .25s cubic-bezier(.2,.9,.3,1.3),box-shadow .25s,background .25s;will-change:transform}
.btn::before{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);transition:left .6s}
.btn:hover::before{left:140%}
.btn::after{display:none!important}
.btn:hover{transform:translateY(-3px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn-primary,.btn-yahoo,.btn-follow,.btn-base,.btn-back{background:var(--grad)!important;color:#fff!important;box-shadow:0 12px 28px rgba(38,164,234,.38)!important}
.btn-primary:hover,.btn-yahoo:hover,.btn-follow:hover,.btn-base:hover,.btn-back:hover{box-shadow:0 18px 38px rgba(38,164,234,.5)!important}
.btn-mercari,.btn-ghost{background:#fff!important;color:var(--sky-700)!important;border:1.5px solid var(--sky-300)!important;box-shadow:0 8px 22px rgba(11,87,140,.08)!important}
.btn-mercari:hover,.btn-ghost:hover{background:var(--sky-50)!important;border-color:var(--sky-500)!important}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1)}
.reveal.visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1!important;transform:none!important;transition:none!important}}

/* ---------- page hero (sub pages) ---------- */
.page-hero{position:relative;z-index:1;padding:78px 24px 56px!important;text-align:center;overflow:hidden;background:linear-gradient(180deg,var(--sky-100) 0%,#fff 100%)!important}
.page-hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:radial-gradient(ellipse 70% 80% at 50% 0,#000 30%,transparent 80%);mask-image:radial-gradient(ellipse 70% 80% at 50% 0,#000 30%,transparent 80%);opacity:.55}
.page-hero::after{content:"";position:absolute;width:420px;height:420px;border-radius:50%;right:-140px;top:-180px;background:radial-gradient(circle,#9FD6F8,transparent 70%);filter:blur(30px);opacity:.6;animation:orbA 14s ease-in-out infinite alternate}
.page-hero>*{position:relative;z-index:1}
.page-hero-photo,.page-hero-bg{display:none!important}
.deco-row{display:flex;justify-content:center;gap:14px;margin-bottom:20px}
.deco-item{font-size:0!important;width:44px;height:44px;border-radius:14px;background:#fff;border:1px solid var(--sky-200);box-shadow:var(--shadow-sm);display:grid;place-items:center;animation:wobble 3.2s ease-in-out infinite}
.deco-item::before{content:"\f1b9";font-family:"Font Awesome 6 Free";font-weight:900;font-size:1.1rem;color:var(--sky-500)}
.deco-item:nth-child(2){animation-delay:-.5s}.deco-item:nth-child(3){animation-delay:-1s}.deco-item:nth-child(4){animation-delay:-1.5s}.deco-item:nth-child(5){animation-delay:-2s}
@keyframes wobble{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-9px) rotate(4deg)}}
.page-badge{display:inline-block!important;background:#fff!important;color:var(--sky-600)!important;border:1px solid var(--sky-300);font:700 .72rem var(--font-display)!important;padding:6px 20px!important;border-radius:999px;margin-bottom:16px;letter-spacing:.22em!important;box-shadow:var(--shadow-sm)}
.page-title{font-family:var(--font-display)!important;font-weight:800;font-size:clamp(2.2rem,8vw,3.8rem)!important;color:var(--ink)!important;margin:0 0 10px;letter-spacing:.01em;line-height:1.15}
.page-title span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent!important;-webkit-text-fill-color:transparent}
.page-subtitle{font-size:.98rem!important;color:var(--ink-2)!important}
@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* ---------- footer ---------- */
.site-footer{position:relative;z-index:1;background:linear-gradient(180deg,#fff,var(--sky-100))!important;color:var(--ink-2)!important;text-align:center;padding:56px 24px 40px!important;border-top:1px solid var(--line);overflow:hidden}
.site-footer::before{content:"MISAO";position:absolute;left:50%;bottom:-.28em;transform:translateX(-50%);font:800 clamp(6rem,22vw,16rem)/1 var(--font-display);color:rgba(38,164,234,.08);letter-spacing:.04em;pointer-events:none;white-space:nowrap}
.site-footer>*{position:relative}
.f-logo{font-family:var(--font-display)!important;font-weight:800;font-size:1.8rem!important;color:var(--ink)!important;margin-bottom:6px}
.f-logo span{color:var(--sky-500)}
.f-links{display:flex;gap:6px 18px;justify-content:center;flex-wrap:wrap;margin:18px auto!important;max-width:880px}
.f-link{color:var(--ink-2)!important;text-decoration:none;font-size:.82rem!important;font-weight:500;transition:color .2s}
.f-link:hover{color:var(--sky-600)!important}
.f-copy{font-size:.74rem!important;color:var(--muted)!important;margin-top:14px}
.site-footer p{color:var(--ink-2)!important}

/* ---------- to top ---------- */
.scroll-to-top{position:fixed;bottom:22px;right:22px;width:52px;height:52px;border-radius:50%;background:var(--grad)!important;color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.05rem;cursor:pointer;border:0;box-shadow:0 10px 26px rgba(38,164,234,.45)!important;opacity:0;visibility:hidden;transform:translateY(12px);transition:all .3s;z-index:150}
.scroll-to-top.show{opacity:1;visibility:visible;transform:none}
.scroll-to-top:hover{transform:translateY(-4px)}

/* ---------- generic sub-page card polish (旧クラスを水色×白に) ---------- */
.page-content{position:relative;z-index:1}
@media(max-width:600px){.btn{width:auto}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}

/* converted-page fixes */
.map-address-bar{color:var(--ink)!important;border-top:1px solid var(--line)}
.map-address-bar i{color:var(--sky-500)!important}