:root{--navy:#111a31;--red:#ec3e44;--yellow:#ffe328;--green:#10b969}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#edf0f4;color:#191c23;font-family:'Noto Sans JP',sans-serif;font-weight:500}.shell{max-width:820px;margin:auto;background:#fff;box-shadow:0 0 35px #15264018;overflow:hidden}.hero{height:520px;position:relative;overflow:hidden;color:#fff;background:linear-gradient(145deg,#073374,#0879ca 57%,#18bbdf)}.hero:after{content:"";position:absolute;inset:58% -10% -20%;background:repeating-radial-gradient(ellipse at 50% 0,#67d7ee 0 8px,#188ec7 9px 17px);transform:rotate(-6deg);opacity:.72}.top{position:relative;z-index:3;height:58px;display:flex;align-items:center;gap:14px;padding:0 28px;background:#091126}.top span{font-size:10px;border:1px solid;padding:2px 4px}.top b{letter-spacing:.17em}.top small{margin-left:auto;color:var(--yellow)}.hero-copy{position:relative;z-index:2;padding:30px 34px}.hero-copy p{display:inline-block;margin:0 0 12px;padding:5px 15px;color:#17213c;background:#fff;border-radius:50px;font-weight:900}.hero h1{margin:0;font-size:62px;line-height:1.08;letter-spacing:-.06em;text-shadow:0 4px #0b1831,3px 0 #0b1831,-3px 0 #0b1831}.hero h1 em{font-style:normal;color:var(--yellow)}.hero h1 strong{background:linear-gradient(transparent 66%,#e6333b 66%)}.hero h2{width:62%;font-size:15px}.badge{position:absolute;z-index:4;right:26px;top:285px;width:116px;height:116px;display:flex;align-items:center;justify-content:center;gap:4px;border:6px solid #fff;border-radius:50%;background:var(--red);box-shadow:0 6px 15px #0018;transform:rotate(5deg)}.badge b{font-size:54px;line-height:1}.badge span{font-size:11px;font-weight:900}.boat{position:absolute;z-index:1;right:-20px;bottom:-4px;width:57%;filter:drop-shadow(0 9px 3px #00355c77)}.intro{text-align:center;padding:48px 20px 22px}.intro>span{padding:5px 18px;color:#fff;background:var(--navy);font-size:13px}.intro h2{margin:13px 0 6px;font-size:35px;line-height:1.15}.intro h2 b{font-size:50px;color:var(--red)}.intro p{color:#677080;font-size:13px}.compare{padding:0 24px 35px}.hint{width:66%;margin:0 auto 10px;padding:9px;text-align:center;color:#fff;background:linear-gradient(90deg,#f05b3f,#ed407a);border-radius:30px;font-size:12px;font-weight:900}.table-box{overflow-x:auto;border:1px solid #d7dbe3}table{width:100%;min-width:900px;border-collapse:collapse;text-align:center;font-size:12px}th,td{padding:13px 9px;border:1px solid #d7dbe3}thead th{height:90px;color:#fff;background:#121a2d}thead th:not(:first-child){font-size:14px}tbody th{width:100px;color:#fff;background:#1c2438}tbody td b{color:var(--red);font-size:17px}tbody td a{display:block;padding:8px;color:#fff;background:var(--red);border-radius:4px;text-decoration:none;font-weight:900}.rank-nav{position:sticky;top:0;z-index:10;display:flex;gap:5px;padding:10px;background:#edf0f4}.rank-nav a{flex:1;padding:7px 2px;text-align:center;color:#18213b;background:#fff;border-bottom:3px solid #d5a822;text-decoration:none;font-size:9px;font-weight:900}.rank-nav b{display:grid;place-items:center;width:20px;height:20px;margin:0 auto 3px;color:#fff;background:#d5a822;border-radius:50%;font-size:11px}.ranking{padding:30px 25px;background:#f2f4f7}.card{scroll-margin-top:80px;margin-bottom:40px;background:#fff;border:1px solid #d5d9e2;box-shadow:0 6px 20px #15284b16}.card-head{min-height:80px;display:flex;align-items:center;color:#fff;border-bottom:4px solid #fff1a8}.card-head.gold{background:linear-gradient(100deg,#9c7310,#e2bc49 60%,#90660a)}.card-head.silver{background:linear-gradient(100deg,#4d5968,#aeb7c3,#525d6b)}.card-head.bronze{background:linear-gradient(100deg,#8c4928,#d18a5d,#884526)}.card-head.fourth{background:linear-gradient(100deg,#175b86,#36a6cb,#185678)}.card-head.fifth{background:linear-gradient(100deg,#285847,#59a87b,#254e40)}.card-head>span{padding:0 18px;font-weight:900}.card-head>span b{display:block;font-size:35px;line-height:1}.card-head h2{margin:0;font-size:25px;letter-spacing:.04em}.card-head small{font-size:11px}.card-head>i{margin-left:auto;padding:0 18px;font-size:42px;font-style:normal}.brand{height:225px;display:flex;align-items:center;justify-content:space-around;overflow:hidden;color:#fff}.brand>div:first-child{font-size:28px;line-height:.9;letter-spacing:.12em}.brand>div:first-child b{font-size:49px}.brand>div:first-child small{display:block;margin-top:15px;font-size:8px}.brand svg{width:43%}.blue{background:radial-gradient(circle at 80% 10%,#23c1e9,transparent 40%),linear-gradient(135deg,#091932,#0467b7)}.purple{background:linear-gradient(135deg,#171c45,#5836a8)}.red{background:linear-gradient(135deg,#33151b,#d73239)}.aqua{background:radial-gradient(circle at 70% 40%,#30d3d9,transparent 35%),linear-gradient(135deg,#083850,#0d8fac)}.green{background:linear-gradient(135deg,#0c302b,#168563)}.radar,.compass,.anchor{display:grid;place-items:center;width:130px;height:130px;text-align:center;border:2px solid #ffffffaa;border-radius:50%;font-size:20px;font-weight:900}.radar{background:repeating-radial-gradient(circle,transparent 0 20px,#a98bff55 21px 22px)}.red>strong{font-size:130px;color:var(--yellow);text-shadow:6px 7px #6d1019}.compass{font-size:32px}.anchor{font-size:60px}.rating{display:flex;align-items:baseline;justify-content:center;gap:7px;padding:13px;color:#fff;background:#111a31}.rating>b{font-size:36px;color:var(--yellow)}.rating>i{margin-left:9px;color:#ffd329;font-style:normal;letter-spacing:2px}.benefit{display:flex;justify-content:center;align-items:center;gap:10px;padding:14px;background:#fff7d7}.benefit span{padding:4px 7px;color:#fff;background:var(--red);font-size:10px}.benefit b{color:#c8262d;font-size:14px}.cta{display:block;margin:17px;padding:15px;text-align:center;color:#fff;background:linear-gradient(#19ca76,#079e56);border-bottom:5px solid #087c47;border-radius:7px;box-shadow:0 4px 10px #008e5333;text-decoration:none;font-size:19px;font-weight:900}.cta span{float:right}.body{padding:8px 26px 20px}.body h3{text-align:center;font-size:22px}.body h3 em{color:#e5343b;font-style:normal}.body p{line-height:1.95;font-size:14px}.body ul{padding:0;list-style:none}.body li{margin:7px 0;padding:10px 12px;background:#edf8ff;border-left:5px solid #1386d3;font-size:13px;font-weight:900}.body li:before{content:"✓";margin-right:8px;color:#0cb26b}.review{margin:0 22px 20px;border:2px solid #d7a820}.review h3{margin:0;padding:9px;text-align:center;color:#fff;background:#d19c11;font-size:16px}.review>div{display:flex;gap:13px;padding:15px}.review>div>span{flex:none;display:grid;place-items:center;width:58px;height:58px;color:#fff;background:#1486c8;border-radius:50%;font-size:23px;font-weight:900}.review p{margin:0}.review small{display:block;margin-top:6px;line-height:1.7}.points{margin:20px;padding:15px;background:#edf4f8}.points h3{margin:0 0 12px;text-align:center}.points>div{display:flex;gap:8px}.points span{flex:1;padding:10px 4px;text-align:center;background:#fff;font-size:11px}.points b{display:block;color:#e5343b;font-size:24px}.guide{padding:55px 25px;text-align:center}.guide>span{color:#e5343b;font-weight:900}.guide>h2{margin:8px 0 28px;font-size:31px}.guide>div{display:flex;gap:13px}.guide article{flex:1;padding:20px 14px;border-top:5px solid #1486c8;background:#f2f6f9}.guide article>b{display:block;color:#1486c8;font-size:27px}.guide article h3{font-size:16px}.guide article p{font-size:12px;line-height:1.7}.closing{text-align:center;padding:58px 25px;color:#fff;background:linear-gradient(#17213af1,#17213af7),radial-gradient(circle,#1397d5,#08112b)}.closing>span{color:var(--yellow);font-weight:900}.closing h2{font-size:34px}.closing p{line-height:1.8}.closing a{display:block;max-width:420px;margin:25px auto 0;padding:15px;color:#14213b;background:var(--yellow);border-radius:6px;text-decoration:none;font-weight:900}footer{padding:38px 28px;text-align:center;color:#cbd0da;background:#080d19}footer>b{color:#fff;font-size:23px;letter-spacing:.15em}footer p{margin:4px 0 22px}footer small{font-size:10px;line-height:1.8}footer div{margin-top:22px;font-size:10px}.top-button{position:fixed;right:18px;bottom:18px;width:46px;height:46px;border:0;border-radius:50%;color:#fff;background:#111a31;box-shadow:0 4px 15px #0005;opacity:0;pointer-events:none;transition:.25s}.top-button.show{opacity:1;pointer-events:auto}@media(max-width:600px){body{background:#fff}.hero{height:455px}.top{padding:0 16px}.hero-copy{padding:22px 18px}.hero h1{font-size:39px}.hero h2{width:67%;font-size:12px}.badge{width:95px;height:95px;right:13px;top:260px}.badge b{font-size:42px}.boat{width:69%}.compare,.ranking{padding-left:12px;padding-right:12px}.hint{width:90%}.rank-nav{gap:2px;padding:7px 3px}.rank-nav a{font-size:7px}.brand{height:180px}.card-head h2{font-size:20px}.card-head>span{padding:0 12px}.rating{gap:4px;font-size:11px}.rating>i{font-size:10px}.benefit{align-items:flex-start}.benefit b{font-size:11px}.cta{font-size:16px}.body{padding-left:18px;padding-right:18px}.body h3{font-size:19px}.body p{font-size:13px}.review{margin-left:14px;margin-right:14px}.review>div{padding:12px}.points>div,.guide>div{flex-direction:column}.guide article{text-align:left}.guide article>b{float:left;margin-right:12px}}