/* TOPページ */
.hero{position:relative;background:radial-gradient(120% 90% at 85% 20%,#1E4796 0%,var(--navy) 55%,#071A42 100%);color:#fff;padding:22px 16px 30px;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:22px 22px}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:10px;background:repeating-linear-gradient(-45deg,var(--yellow) 0 14px,#111 14px 28px)}
.hero .in{position:relative;z-index:1}
.hero .eyebrow{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;background:rgba(255,194,14,.16);color:var(--yellow);border:1px solid rgba(255,194,14,.5);padding:3px 10px;border-radius:14px}
.hero h1{font-size:27px;line-height:1.38;font-weight:900;margin:12px 0 10px;letter-spacing:.01em}
.hero h1 em{font-style:normal;color:var(--yellow)}
.hero .lead{font-size:12px;color:#C9D6F2;max-width:52%}
.hero .prods{position:absolute;right:-10px;top:58px;width:165px;height:170px}
.hero .prods span{position:absolute;border-radius:50%;background:#F4F5F7;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.35);border:3px solid #fff}
.hero .prods span img{width:100%;height:100%;object-fit:cover;transform:scale(1.18)}
.hero .prods .p1{width:118px;height:118px;right:20px;top:0}
.hero .prods .p2{width:84px;height:84px;left:0;top:76px}
.hero .prods .p3{width:72px;height:72px;right:4px;top:108px}
.hero .trust{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:18px 0 16px}
.hero .trust div{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:10px;padding:8px 4px;text-align:center;font-size:10px;font-weight:700;line-height:1.35}
.hero .trust b{display:block;font-family:var(--num);font-size:22px;color:var(--yellow);line-height:1.1}
.hero .trust b small{font-size:11px;font-family:"Noto Sans JP"}
.hero .btn-y{height:54px;font-size:15px}
.hero .sub{display:block;text-align:center;font-size:11px;color:#C9D6F2;margin-top:9px}

/* バナースライダー */
.slider{padding:16px 0 0}
.slides{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 14px;scrollbar-width:none}
.slides::-webkit-scrollbar{display:none}
.slides a{flex:0 0 88%;scroll-snap-align:center;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.slides img{width:100%;aspect-ratio:2/1;object-fit:cover}
.dots{display:flex;justify-content:center;gap:6px;margin-top:10px}
.dots i{width:7px;height:7px;border-radius:4px;background:#C3CAD8;transition:.25s}
.dots i.on{width:20px;background:var(--navy)}

/* 会員特典 */
.perks{margin:16px 14px 0;background:#fff;border-radius:var(--r);box-shadow:var(--shadow);display:grid;grid-template-columns:repeat(3,1fr);overflow:hidden}
.perks div{padding:12px 4px;text-align:center;font-size:10.5px;font-weight:700;line-height:1.4;border-right:1px dashed var(--line)}
.perks div:last-child{border:0}
.perks b{display:block;font-family:var(--num);font-size:24px;color:var(--orange);line-height:1.1}
.perks b small{font-size:11px;font-family:"Noto Sans JP"}

/* カテゴリ */
.cgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.cgrid a{border-radius:10px;overflow:hidden;box-shadow:var(--shadow);background:#fff}
.cgrid img{width:100%;aspect-ratio:1;object-fit:cover}
.cgrid .hide{display:none}
.cgrid.all .hide{display:block}
.cmore{margin-top:10px;height:42px;font-size:13px}

/* 用途 */
.use{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.use a{background:#fff;border-radius:10px;box-shadow:var(--shadow);padding:11px 10px;display:flex;align-items:center;gap:9px;font-size:12.5px;font-weight:700}
.use i{flex:none;width:36px;height:36px;border-radius:8px;background:var(--navy3);color:var(--navy);display:flex;align-items:center;justify-content:center}
.use i svg{width:22px;height:22px}
.use small{display:block;font-size:10px;color:var(--muted);font-weight:400}

/* 強み */
.why{background:var(--navy);margin-top:28px;padding:26px 14px 22px;color:#fff;position:relative}
.why .sec-hd h2{color:#fff}
.why-list{display:grid;gap:8px}
.why-list div{display:flex;gap:12px;align-items:center;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:12px}
.why-list .no{flex:none;width:46px;height:46px;border-radius:50%;background:var(--yellow);color:var(--navy);display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--num);font-weight:700;line-height:1}
.why-list .no small{font-size:8px;letter-spacing:.1em}
.why-list .no b{font-size:20px}
.why-list h3{font-size:14px;font-weight:900;line-height:1.4}
.why-list p{font-size:11.5px;color:#C9D6F2;line-height:1.55;margin-top:2px}

.bnr{display:block;margin:16px 14px 0;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}

/* お知らせ */
.news a{display:flex;gap:10px;padding:12px 0;border-bottom:1px solid var(--line)}
.news a:first-child{padding-top:0}
.news img{flex:none;width:92px;height:56px;border-radius:8px;object-fit:cover}
.news .meta{display:flex;gap:6px;align-items:center;font-size:11px;color:var(--muted);font-family:var(--num)}
.news p{font-size:13px;font-weight:700;line-height:1.45;margin-top:3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ご利用案内 */
.gl{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.gl a{background:#fff;border-radius:10px;box-shadow:var(--shadow);padding:12px 4px 10px;text-align:center;font-size:11.5px;font-weight:700;line-height:1.35}
.gl i{width:38px;height:38px;margin:0 auto 6px;border-radius:50%;background:var(--yellow2);color:#B37E00;display:flex;align-items:center;justify-content:center}
.gl i svg{width:21px;height:21px}
.gl small{display:block;font-size:10px;color:var(--muted);font-weight:400}