/* みんなのバッジ 公式サイト  方向 A: ブランドブルー × 丸ゴシック */
:root{--blue:#2459ac;--blue-d:#003384;--navy:#253a5b;--blue-2:#3a6fc4;--mist:#e9edf3;--mist-2:#f4f6fa;--line:#e1edf2;--gray:#6d6d6d;--ink:#253a5b;--r:14px;--w:1100px;--h:'Zen Maru Gothic','Hiragino Maru Gothic ProN','Hiragino Sans',sans-serif;--b:'Noto Sans JP','Hiragino Sans','Hiragino Kaku Gothic ProN',sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:92px}
body{margin:0;font-family:var(--b);color:var(--ink);background:#fff;line-height:1.75;font-size:15px}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue)}a:hover{color:var(--blue-d)}
h1,h2,h3{font-family:var(--h);font-weight:700;line-height:1.35;margin:0;text-wrap:pretty}
h1{font-size:28px;font-weight:900}h2{font-size:22px}h3{font-size:17px}
p{margin:0}
figure{margin:0}figcaption{font-size:12px;margin-top:10px;color:var(--gray)}
:focus-visible{outline:3px solid #c67617;outline-offset:4px}
.stores{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.wrap{width:min(100% - 40px,var(--w));margin-inline:auto}
.skip{position:absolute;left:-999px;top:0;background:#fff;padding:8px}.skip:focus{left:8px;z-index:100}
/* header */
.site-header{background:var(--blue);color:#fff;position:sticky;top:0;z-index:50}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:56px;gap:16px}
.brand img{height:26px;width:auto}
.nav-toggle{background:none;border:0;width:44px;height:44px;display:flex;flex-direction:column;justify-content:center;gap:5px;padding:10px;cursor:pointer}
.nav-toggle span{display:block;height:2px;background:#fff;border-radius:2px}
.nav{display:none;position:absolute;left:0;right:0;top:56px;background:var(--blue);padding:8px 20px 20px;box-shadow:0 10px 30px rgba(0,0,0,.2);max-height:calc(100dvh - 160px);overflow-y:auto}
.nav.is-open{display:block}
.nav ul{list-style:none;margin:0;padding:0}
.nav li a{display:block;color:#fff;text-decoration:none;padding:12px 4px;border-bottom:1px solid rgba(255,255,255,.15);font-weight:500}
.nav li a[aria-current]{font-weight:700}
.nav-store{display:flex;gap:10px;margin-top:16px}
/* store buttons: 現行サイトの公式バッジ画像をそのまま使用（サイズ調整のみ） */
.store{display:inline-block;line-height:0}
.store img{height:44px;width:auto}
.store-sm img{height:36px}
/* sticky CTA */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;gap:10px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);border-top:1px solid var(--line);box-shadow:0 -6px 20px rgba(37,58,91,.12)}
.sticky-cta{align-items:center;flex-direction:column;gap:5px}.sticky-cta .store img{height:40px}
.sticky-label{font-size:11px;font-weight:700;color:var(--blue)}
body{padding-bottom:100px}
/* sections */
.sec{padding:48px 0}.sec-mist{background:var(--mist-2)}.sec-warm{background:#faf6ee}.sec-title{text-align:center;margin-bottom:20px}.sec-note{text-align:center;color:var(--gray);font-size:12px;margin-top:-14px;margin-bottom:18px}
.stack{display:flex;flex-direction:column;gap:12px}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.grid-3{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));gap:12px}.grid-4{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.card{background:#fff;border-radius:var(--r);overflow:hidden}
.card img{width:100%;aspect-ratio:16/10;object-fit:contain;background:#fff}
.card .body{padding:12px}.card .sub{font-size:12px;color:var(--gray)}.card .price{font-family:var(--h);font-size:18px;color:var(--blue);margin-top:4px}
.feature{display:flex;gap:14px;align-items:flex-start;padding:16px;border-radius:var(--r);background:var(--mist)}
.feature svg{flex:none;width:36px;height:36px}
.feature p{font-size:13px;margin-top:4px}
.btn{display:flex;align-items:center;justify-content:center;gap:20px;min-height:48px;padding:10px 24px;border-radius:999px;border:2px solid var(--blue);font-weight:700;text-decoration:none;color:var(--blue)}
.btn:hover{background:var(--blue);color:#fff}
.chip{display:inline-block;background:#fff;color:var(--blue);border-radius:999px;padding:6px 12px;font-size:12px;font-weight:700}
.tag{display:inline-block;background:var(--navy);color:#fff;border-radius:6px;padding:2px 8px;font-size:11px;font-weight:700;vertical-align:middle}
.notice{display:flex;gap:10px;align-items:center;padding:12px 14px;border-radius:12px;background:#fff;border:1px dashed #b2bed1;font-size:13px}
.box{background:#fff;border-radius:12px;padding:14px 16px;font-size:13px}
.breadcrumb{font-size:12px;color:var(--gray);margin:20px 0 6px}.breadcrumb a{color:var(--gray);text-decoration:none}
.lead{font-size:15px;margin-top:8px}
/* お知らせバナー（TOP、通常は非表示） */
.site-notice{background:#fff7d6;border-bottom:1px solid #f0d78a;color:#5a4a00}
.site-notice-item{width:min(100% - 40px,var(--w));margin-inline:auto;padding:10px 0;display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.6}
.site-notice-item+.site-notice-item{border-top:1px solid #f0d78a}
.site-notice-label{flex:none;background:#7a6000;color:#fff;border-radius:6px;padding:1px 8px;font-size:11px;font-weight:700;margin-top:3px}
.site-notice-item.is-alert{color:#7a1f1f}.site-notice-item.is-alert .site-notice-label{background:#c0392b}
.site-notice a{color:inherit;font-weight:700}
/* hero */
.hero{background:var(--blue);color:#fff;padding:34px 0 40px;position:relative;overflow:hidden}
.hero::before,.hero::after{content:"";position:absolute;border-radius:50%;pointer-events:none}
.hero::before{width:220px;height:220px;right:-60px;top:-40px;background:var(--blue-2);opacity:.5}
.hero::after{width:160px;height:160px;left:-40px;bottom:-70px;background:#1b4590;opacity:.6}
.hero .wrap{position:relative;display:flex;flex-direction:column;gap:30px;z-index:1}
.hero-text{display:flex;flex-direction:column;gap:16px}
.hero h1{font-size:clamp(26px,7.6vw,42px);color:#fff;line-height:1.5;letter-spacing:-.035em}
.hero h1 span{color:#ffe7a5}
.hero .lead{font-size:14px;margin:0;line-height:1.9}
.eyebrow{font-size:12px;letter-spacing:.09em;font-weight:700;color:var(--blue)}
.hero .eyebrow{color:#fff;font-size:11px;letter-spacing:.03em}
.hero-price{display:flex;flex-wrap:wrap;gap:6px;align-items:baseline;font-size:14px}
.hero-price strong{font-family:var(--h);font-size:38px;line-height:1.2}.hero-price strong span{font-size:20px}.hero-price>span{font-size:11px}
.download-block>p{font-size:12px;margin-bottom:8px}.hero-link{display:inline-block;margin-top:16px;color:#fff;font-size:13px;text-underline-offset:5px}.hero-link:hover{color:#ffe7a5}
.hero-photo{position:relative;align-self:center;background:#fff;padding:10px 10px 14px;border-radius:5px;width:min(100% - 20px,420px);transform:rotate(2deg);box-shadow:0 18px 36px #13376b40}
.hero-photo img{width:100%;aspect-ratio:1;object-fit:cover}.hero-photo figcaption{text-align:center;font-family:var(--h);color:var(--blue);font-weight:700;font-size:12px}
.photo-seal{position:absolute;right:-14px;top:-18px;display:grid;place-content:center;background:#ffe7a5;color:var(--blue-d);width:86px;height:86px;border-radius:50%;font-family:var(--h);font-size:14px;line-height:1.5;text-align:center;transform:rotate(-12deg);box-shadow:0 3px 0 #12396b20}
.promise-strip{background:#f1f5fb;border-bottom:1px solid var(--line)}.promise-strip .wrap{display:grid;padding-block:18px;gap:12px}.promise-strip p{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:12px}.promise-strip b{color:var(--blue)}.promise-strip span{font-size:10px}
.section-heading{margin-bottom:26px}.section-heading h2{margin:8px 0 14px;font-size:25px}.section-heading>p:last-child{font-size:14px}
.idea-grid{display:grid;gap:14px}.idea{position:relative;display:flex;flex-direction:column;gap:16px;padding:26px;border-radius:16px;background:#f6f1e7;text-decoration:none;color:var(--ink);border:1px solid transparent}.idea:nth-child(2){background:#f0f3fb}.idea:nth-child(3){background:#edf5ef}.idea:hover{border-color:var(--blue);color:var(--ink)}.idea-number{font-family:var(--h);font-size:15px;color:var(--blue)}.idea-kicker{font-size:12px;font-weight:700}.idea h3{font-size:24px;line-height:1.5}.idea>p:not(.idea-kicker){font-size:14px}.idea .text-link{margin-top:auto;padding-top:10px;font-size:13px}
.text-link{display:inline-flex;align-items:center;gap:16px;color:var(--blue);font-weight:700;text-decoration:none;text-underline-offset:5px;min-height:44px}.text-link:hover{text-decoration:underline}.fineprint{font-size:12px;line-height:1.8;color:#606b79;margin-top:12px}
.story img{border-radius:16px;width:100%;aspect-ratio:1;object-fit:cover}.split{display:grid;gap:28px}.story .stack{gap:18px}
.product-cards .card{text-decoration:none;border:1px solid var(--line);transition:border-color .15s}.product-cards .card:hover{border-color:var(--blue)}.product-cards .body{padding:16px 12px}.product-cards h3{margin:8px 0;font-size:16px}.product-cards .price{display:flex;justify-content:space-between;align-items:center;margin-top:14px}.product-cards img{padding:8px;background:#f7f9fc}.product-cards .sub{font-size:11px}#lineup .btn{align-self:center;margin-top:14px}
.price-example{border:1px solid #d0ddf1;background:#f6f8fc;border-radius:16px;padding:24px}.price-example>p:first-child{font-weight:700;font-size:14px}.price-sum{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;margin-top:12px;color:var(--blue);font-weight:700}.price-sum>span{font-size:12px}.price-sum strong{font-family:var(--h);font-size:40px;line-height:1.2}.price-sum strong span{font-size:18px}.shipping-benefit{margin-top:20px;padding-top:18px;border-top:1px solid #d0ddf1;font-size:13px}.shipping-benefit b{font-size:18px;color:var(--blue)}
.closing-cta{background:#eef3fb}.closing-cta h2{font-size:25px;line-height:1.6}.closing-cta .stores,.closing-cta .text-link{justify-content:center}.closing-cta .fineprint{margin-top:0}
.choice-grid{display:grid;gap:14px;margin-top:24px}.choice{padding:22px;background:var(--mist-2);border-radius:14px}.choice p{font-size:14px;margin-top:10px}.choice h3{font-size:20px}.usecase-section h2{margin:6px 0 18px}.usecase-section .btn{margin-top:24px;max-width:380px}.mini-heading{color:var(--blue);font-size:14px;font-weight:700}
/* steps / video */
.video{position:relative;border-radius:var(--r);overflow:hidden;background:var(--navy);aspect-ratio:16/9}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-play{position:absolute;inset:0;width:100%;border:0;background:var(--navy);color:#fff;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px;cursor:pointer;font-family:var(--b);font-size:15px}.video-play:hover{background:var(--blue-d)}.video-play>span:last-child{font-size:11px}.play-icon{border:1px solid #ffffff60;border-radius:50%;width:64px;height:64px;display:grid;place-items:center;font-size:24px;padding-left:3px}.video-play:focus-visible{outline-offset:-6px}
.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;counter-reset:s}
.steps li{display:flex;gap:12px;align-items:center;font-size:14px}
.steps li::before{counter-increment:s;content:counter(s);font-family:var(--h);width:32px;height:32px;border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;flex:none;font-size:15px}
.samples{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.samples img{aspect-ratio:1;object-fit:cover;border-radius:12px}
.center{text-align:center}
/* tables */
table{border-collapse:collapse;width:100%;font-size:14px}
th,td{padding:10px 8px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{font-weight:500;color:var(--gray);font-size:12px}
td.p{text-align:right;font-weight:700;color:var(--blue);white-space:nowrap}
.spec{display:flex;gap:12px;font-size:14px}.spec b{width:72px;flex:none;color:var(--blue)}
/* faq */
details.faq{border-bottom:1px solid var(--line)}
details.faq summary{cursor:pointer;padding:14px 4px;font-weight:700;list-style:none;display:flex;gap:10px}
details.faq summary::before{content:"Q";font-family:var(--h);color:var(--blue);flex:none}
details.faq summary::after{content:"＋";margin-left:auto;color:var(--blue)}details.faq[open] summary::after{content:"−"}
details.faq summary::-webkit-details-marker{display:none}
details.faq .a{padding:0 4px 16px 26px;font-size:14px}
details.faq .a p+p{margin-top:8px}
/* news */
.news-item{padding:20px 0;border-bottom:1px solid var(--line)}.news-item time{font-size:12px;color:var(--gray)}.news-item h2{font-size:18px;margin:4px 0 8px}.news-item p+p{margin-top:8px}
/* policy */
.policy-sec{padding:20px 0}.policy-sec h2{padding-bottom:8px;border-bottom:2px solid var(--blue);margin-bottom:12px;scroll-margin-top:72px}
.policy-sec h3{margin:18px 0 6px;font-size:15px}.policy-sec p{font-size:13px;margin-top:4px}
.toc{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0}
/* prose */
.prose p+p{margin-top:12px}.prose h2{margin:28px 0 10px}.prose h3{margin:20px 0 6px}
.dl{display:grid;grid-template-columns:100px 1fr;gap:8px 12px;font-size:14px}.dl dt{color:var(--gray)}.dl dd{margin:0}
/* footer */
.site-footer{background:var(--navy);color:#fff;padding:32px 0 16px;font-size:13px}
.site-footer a{color:#fff}
.footer-grid{display:grid;grid-template-columns:1fr;gap:22px}
.footer-brand img{height:26px;width:auto;margin-bottom:10px}
.footer-brand address{font-style:normal;font-size:12px;line-height:1.8;opacity:.85}
.footer-links{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 16px}
.footer-links a{text-decoration:none}.footer-head{opacity:.7;width:100%}
.copyright{margin-top:22px;font-size:11px;opacity:.6}
/* responsive */
@media(min-width:600px){
  body{font-size:16px}
  .grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .samples{grid-template-columns:repeat(4,minmax(0,1fr))}
  .hero h1{font-size:42px}
  .choice-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .promise-strip .wrap{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding-block:24px}.promise-strip p{flex-direction:column;align-items:flex-start;gap:6px}.promise-strip span{font-size:11px}
  .footer-grid{grid-template-columns:1.4fr 1fr 1fr 1fr}.footer-links{flex-direction:column}
}
@media(min-width:960px){
  h1{font-size:40px}h2{font-size:30px}
  .site-header .wrap{height:72px}.brand img{height:32px}
  .nav-toggle{display:none}
  .nav{display:flex;position:static;padding:0;box-shadow:none;background:none;align-items:center;gap:24px}
  .nav ul{display:flex;gap:16px}.nav li a{padding:8px 0;border:0;font-size:13px}
  .nav-store{margin:0;gap:8px}
  .sticky-cta{display:none}body{padding-bottom:0}
  .sec{padding:72px 0}
  .grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .hero{padding:68px 0 76px}
  .hero .wrap{display:grid;grid-template-columns:1.15fr 1fr;align-items:center;gap:40px}
  .hero .hero-text{gap:22px;max-width:580px}
  .hero h1{font-size:clamp(38px,4vw,52px);line-height:1.5}.hero .lead{font-size:17px}.hero .eyebrow{font-size:12px}
  .hero::before{width:480px;height:480px;right:-120px;top:-120px}.hero::after{width:360px;height:360px;left:40%;bottom:-200px}
  .hero-photo{width:100%;max-width:420px;justify-self:end;padding:14px 14px 18px}.hero-photo figcaption{font-size:14px;margin-top:14px}.photo-seal{width:102px;height:102px;right:-20px;font-size:17px}
  .idea-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.idea{padding:30px}.idea h3{font-size:25px}.section-heading h2{font-size:34px}.section-heading{margin-bottom:36px}.promise-strip b{font-size:16px}.promise-strip p{align-items:center;border-right:1px solid #d0ddf1}.promise-strip p:last-child{border:0}.closing-cta h2{font-size:36px}.story figure{max-width:460px}.story .stack{gap:24px}
  .split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
  .feature{flex-direction:column;padding:28px;gap:12px}.feature svg{width:40px;height:40px}.feature p{font-size:14px}
  .two{display:grid;grid-template-columns:1fr 1fr;gap:24px}
  .narrow{max-width:800px;margin-inline:auto}
  .policy-sec p{font-size:14px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}