:root{--bg:#f7f8fc;--surface:#fff;--surface-soft:#eff3fa;--ink:#2f3a52;--muted:#7b88a2;--line:#d7dfec;--primary:#2f3a52;--primary-strong:#1f2940;--accent:#ea4a4a;--accent-soft:#ffd8d8;--danger:#c63737}*{box-sizing:border-box}body,html{margin:0;padding:0;font-family:M PLUS\ 1p,Noto Sans JP,sans-serif;color:var(--ink);background:radial-gradient(circle at 1px 1px,rgba(89,104,132,.26) 1px,transparent 1.2px) 0 0 /26px 26px,#f8fbff}a{color:inherit;text-decoration:none}.container{width:min(1240px,94%);margin:0 auto}.site-header{position:-webkit-sticky;position:sticky;top:0;z-index:40;border-bottom:1px solid var(--line);background:color-mix(in srgb,#fff 86%,transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.header-inner{min-height:72px;display:grid;grid-gap:.8rem;gap:.8rem;grid-template-columns:1fr auto auto;align-items:center}.logo{display:inline-flex;align-items:center;gap:.5rem;font-weight:900;letter-spacing:.06em;font-size:2rem}.logo-mark{color:#ffb6b6;font-size:.95rem}.top-nav{display:flex;gap:1rem;font-size:.95rem;letter-spacing:.03em;color:#55627e}.top-nav a{transition:color .18s ease}.top-nav a:hover{color:var(--accent)}.header-tools{display:flex;align-items:center;gap:.55rem}.auth-nav{display:inline-flex;align-items:center;gap:.4rem}.auth-link,.auth-logout{border:1px solid var(--line);background:#fff;border-radius:999px;font-size:.72rem;letter-spacing:.08em;color:var(--muted);padding:.35rem .7rem}.auth-logout{cursor:pointer}.ui-badge{position:fixed;top:96px;right:clamp(.5rem,4vw,1.4rem);z-index:45;border-radius:999px;padding:.72rem 1.6rem;color:#fff;letter-spacing:.03em;font-weight:700;background:linear-gradient(90deg,#2b3a55,#24314a);box-shadow:0 14px 30px rgba(30,42,67,.25)}.hero{padding:0}.hero-visual{min-height:260px;border-bottom:1px solid var(--line);background:linear-gradient(90deg,rgba(250,253,255,.88),rgba(250,253,255,.2) 70%),url(https://images.unsplash.com/photo-1629385701021-fcd568a74377?auto=format&fit=crop&w=1800&q=80) 50%/cover no-repeat;display:flex;align-items:center}.hero-copy{max-width:540px;padding:clamp(1.3rem,3vw,2rem) 0}.hero-copy h1{margin:0;font-size:clamp(2rem,5vw,3.3rem);line-height:1.05;letter-spacing:.01em}.hero-copy h1 strong{color:var(--accent)}.hero-pill{display:inline-flex;border-radius:999px;border:1px solid var(--line);background:hsla(0,0%,100%,.92);color:#60708f;font-weight:700;padding:.32rem .85rem;margin-top:.7rem}.hero-actions{margin-top:1.3rem}.button{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;border:1px solid transparent;padding:.72rem 1.3rem;font-weight:700;cursor:pointer;transition:transform .18s ease,background-color .18s ease}.button:hover{transform:translateY(-1px)}.button.primary{background:linear-gradient(90deg,#2f3a52,#253047);color:#fff}.button.primary:hover{background:linear-gradient(90deg,#24314a,#1f2940)}.button.secondary{background:#fff;border-color:#c8d2e2;color:#4f5f7f}.button.danger{background:linear-gradient(90deg,#f15555,#ea3f3f);color:#fff}.section{padding:1.2rem 0 2.2rem}.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:1rem}.meta{color:var(--muted);font-size:.92rem}.price{font-weight:900;color:var(--accent)}.stack{flex-direction:column;gap:.8rem}.row,.stack{display:flex}.row{gap:.75rem;align-items:center;flex-wrap:wrap}.input,.select,.textarea{width:100%;border:1px solid #c9d5e9;border-radius:999px;padding:.75rem .95rem;background:#f8fbff;color:var(--ink)}.textarea{border-radius:14px}.inline-select{display:grid;grid-gap:.45rem;gap:.45rem}.chip{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:.35rem .75rem;font-size:.88rem}.summary{background:#f4f7fd;border:1px solid var(--line);border-radius:14px;padding:.9rem}.danger{color:var(--danger)}.crumb{color:#8ea0bc;font-size:.95rem;letter-spacing:.01em}.screen-title{margin:0;font-size:clamp(1.7rem,4vw,2.9rem);letter-spacing:.03em}.segment{display:inline-flex;padding:.2rem;border:1px solid var(--line);border-radius:999px;background:#edf2fa}.segment button{border:0;border-radius:999px;background:transparent;color:#667896;font-weight:800;padding:.6rem 1.2rem;cursor:pointer}.segment button.active{background:#fff;color:#34435f;box-shadow:0 6px 16px rgba(67,85,117,.13)}.plan-grid{display:grid;grid-gap:1rem;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}.plan-card{border-radius:16px;border:1px solid #d5dfef;background:#fff;overflow:hidden;box-shadow:0 14px 26px rgba(53,69,100,.08)}.plan-card .plan-head{color:#fff;font-weight:900;text-align:center;padding:.72rem;letter-spacing:.04em}.plan-card.personal .plan-head{background:linear-gradient(90deg,#ffb8b8,#f49f9f)}.plan-card.corporate .plan-head{background:linear-gradient(90deg,#cad6e8,#b9c8df)}.plan-card .plan-body{padding:1rem}.plan-card .plan-qty{font-size:2.15rem;font-weight:900}.plan-card.featured{border-color:#f29d9d;box-shadow:0 18px 34px hsla(0,79%,72%,.2)}.selected-ribbon{width:-moz-fit-content;width:fit-content;border-radius:999px;background:#ec4242;color:#fff;font-weight:800;font-size:.84rem;padding:.3rem .9rem;transform:rotate(-9deg)}.flavor-layout{display:grid;grid-gap:1rem;gap:1rem}.flavor-grid{display:grid;grid-gap:.9rem;gap:.9rem;grid-template-columns:repeat(auto-fill,minmax(148px,1fr))}.flavor-card{border:1px solid #d6dfed;border-radius:12px;background:#fefefe;padding:0;overflow:hidden;cursor:pointer;text-align:left}.flavor-card img{width:100%;height:124px;object-fit:cover;display:block}.flavor-card span{display:block;text-align:center;font-size:1.12rem;font-weight:800;padding:.7rem .5rem}.flavor-card.active{border-color:#ef9f9f;box-shadow:0 0 0 3px #ffe6e6}.flavor-card.active.flavor-vanilla{border-color:#ff8f8f;box-shadow:0 0 0 3px #ffd9d9}.flavor-card.active.flavor-matcha{border-color:#6bb68b;box-shadow:0 0 0 3px #d7f1e2}.option-panel{background:#fbfdff;border:1px solid #d4dfef;border-radius:14px;padding:1rem}.option-row{border:1px solid #ced9ea;background:#fff;border-radius:999px;padding:.65rem .92rem;display:flex;justify-content:space-between;align-items:center;font-weight:800;color:#4e5f80}.option-row.active{border-color:#f0a3a3;box-shadow:0 0 0 2px #ffe4e4}.option-muted{color:#95a2bc;font-size:.88rem}.checkout-grid{display:grid;grid-gap:1rem;gap:1rem}.total-box{background:#f1f5fc;border:1px solid #d7e0ef;border-radius:14px;padding:1rem}.category-grid{display:grid;grid-gap:1rem;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.category-card{position:relative;min-height:158px;border-radius:0;overflow:hidden;border:1px solid #c4d0e2}.category-card img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.95)}.category-card .overlay{position:absolute;inset:0;display:grid;place-content:center;color:#fff;text-align:center;font-weight:900;letter-spacing:.03em;background:linear-gradient(180deg,rgba(42,57,87,.18),rgba(42,57,87,.55))}.pickup-grid{display:grid;grid-gap:1rem;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.pickup-card{display:block;border:1px solid #d3deed;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 10px 24px rgba(53,69,100,.08)}.pickup-grid img{width:100%;height:172px;object-fit:cover;display:block}.pickup-info{padding:.8rem .85rem}.pickup-name{margin:0;font-size:1.02rem;font-weight:900;color:#374763}.pickup-meta{margin:.35rem 0 0;font-size:.9rem;color:#7182a0}.grid{display:grid;grid-gap:1rem;gap:1rem}.grid.products{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}.product-thumb{width:100%;height:170px;object-fit:cover;border-radius:12px;border:1px solid #d3deed}.product-thumb.cart{width:120px;min-width:120px;height:120px}.site-footer{margin-top:2rem;border-top:1px solid var(--line);background:linear-gradient(180deg,#f5f8ff,#edf2fb)}.footer-grid{padding:1.35rem 0 1rem;display:grid;grid-gap:1rem;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.footer-title{margin:0;font-weight:900;letter-spacing:.04em;color:#31415f}.footer-links a{color:#556784;font-weight:700}.footer-links a:hover{color:var(--accent)}.footer-bottom{border-top:1px solid #d5deed;padding:.7rem 0 1.05rem}@media (min-width:960px){.two-col{display:grid;grid-template-columns:1.55fr 1fr;grid-gap:1rem;gap:1rem}.flavor-layout{grid-template-columns:1.6fr 1fr}.checkout-grid{grid-template-columns:1.1fr 1.7fr}}@media (max-width:959px){.ui-badge{position:static;margin:.8rem auto 0;width:-moz-fit-content;width:fit-content;display:block}.header-inner{grid-template-columns:1fr;padding:.7rem 0}.top-nav{flex-wrap:wrap;gap:.6rem}.hero-visual{min-height:220px}.footer-grid{padding-top:1rem}}