:root{--ink:#12202b;--navy:#101b24;--muted:#697581;--max:1180px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#f7f8f9;color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif}a{color:inherit;text-decoration:none}button{font:inherit}.wrap{max-width:var(--max);margin:auto;padding:0 4.2%}.header{height:77px;background:#101b24;color:white;display:flex;align-items:center;position:relative;z-index:10}.header .wrap{display:flex;justify-content:space-between;align-items:center;width:100%;gap:20px}.brand{display:flex;flex-direction:column;flex-shrink:0}.brand strong{font-family:Arial,sans-serif;letter-spacing:.115em;font-weight:400;font-size:27px;line-height:1.1}.brand small{font-size:9px;letter-spacing:.075em;margin-top:6px}.nav{display:flex;gap:28px;font-size:12px;font-weight:600}.nav a:hover,.footer a:hover{color:#afc8d6}.menu{display:none;background:transparent;border:1px solid #75818b;border-radius:4px;color:white;padding:7px 10px}.hero{height:462px;position:relative;overflow:hidden;background:#203542}.hero-photo{position:absolute;inset:0 0 0 35%;width:65%;height:100%;object-fit:cover;object-position:center}.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,19,27,.9) 0%,rgba(12,25,35,.64) 33%,transparent 70%),linear-gradient(0deg,rgba(5,13,20,.6),transparent 50%);z-index:1}.hero .wrap{position:relative;z-index:2;height:100%;display:flex;align-items:center}.hero-copy{color:white;max-width:520px}.hero h1{font-weight:400;font-size:clamp(32px,4.5vw,55px);letter-spacing:.075em;line-height:1.5;margin:0 0 12px}.hero p{font-size:13px;line-height:2;letter-spacing:.01em;margin:0 0 26px}.outline-btn{display:inline-flex;align-items:center;justify-content:space-between;gap:28px;min-width:170px;padding:12px 20px;border:1px solid rgba(255,255,255,.8);color:white;font-weight:600;font-size:12px;transition:.2s}.outline-btn:hover{background:white;color:#12202b}.category-area{padding-top:34px;padding-bottom:30px}.categories{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.category{height:298px;border-radius:5px;position:relative;overflow:hidden;color:white;background:#101c26;display:flex;flex-direction:column;justify-content:flex-end;padding:26px;transition:transform .2s}.category:hover{transform:translateY(-4px)}.category img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;filter:brightness(.63)}.category:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(2,10,15,.96),rgba(3,12,20,.05) 88%)}.category-content{position:relative;z-index:1}.category .symbol{font-size:25px;margin-bottom:8px}.category h2{font-size:22px;font-weight:500;margin:0 0 8px;letter-spacing:.04em}.category p{font-size:12px;line-height:1.9;min-height:48px;margin:0 0 15px}.category span{font-size:12px;font-weight:bold}.latest{padding-top:33px;padding-bottom:52px}.section-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.section-heading h2{border-left:4px solid #1b303f;padding-left:20px;font-size:23px;margin:0;line-height:1.3}.section-heading small{display:block;font-size:10px;font-weight:400;letter-spacing:.12em;color:#7d8b96;margin-top:4px}.section-heading .more{font-size:12px;font-weight:bold}.article-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}.article{display:block;background:white;box-shadow:0 2px 10px #10202a14;border:1px solid #e6ebee;border-radius:5px;overflow:hidden;transition:transform .2s}.article:hover{transform:translateY(-3px)}.article-media{height:155px;position:relative;overflow:hidden;background:#192b38}.article-media img{width:100%;height:100%;object-fit:cover}.article-media label{position:absolute;bottom:9px;left:9px;background:rgba(13,23,31,.85);color:white;font-size:10px;padding:5px 7px}.article-body{padding:16px 15px 14px;min-height:124px;display:flex;flex-direction:column;justify-content:space-between}.article-title{font-size:13px;line-height:1.8;font-weight:600}.article-date{font-size:11px;color:#8e9aa5;margin-top:18px}.empty-card{background:#eef1f3;min-height:276px;border:1px dashed #c8d2d8;border-radius:5px;padding:24px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;color:#536675}.empty-card strong{font-size:16px;margin:10px 0}.empty-card p{font-size:12px;line-height:1.9}.about{background:#111f29;position:relative;min-height:285px;overflow:hidden;color:white}.about-photo{position:absolute;inset:0 auto 0 0;width:50%;height:100%;object-fit:cover;filter:brightness(.75)}.about:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,#111f29 52%);z-index:1}.about .wrap{min-height:285px;position:relative;z-index:2;display:flex;justify-content:flex-end;align-items:center}.about-copy{width:54%;padding:25px 0}.about h2{font-size:21px;letter-spacing:.03em;font-weight:500;margin:0 0 17px}.about p{font-size:13px;line-height:2.1;margin:0 0 20px}.footer{background:#101b24;color:white;padding:36px 0 29px;text-align:center}.footer .wordmark{font-size:23px;letter-spacing:.14em;font-family:Arial,sans-serif;font-weight:400}.footer .links{display:flex;justify-content:center;gap:29px;flex-wrap:wrap;font-size:11px;margin:22px 0 26px}.footer .fineprint{border-top:1px solid #65717a;padding-top:21px;font-size:10px;color:#8f9ba4}.demo-note{background:#e9f0f4;text-align:center;color:#475f70;padding:9px 12px;font-size:11px}
@media(max-width:800px){.header{height:67px}.brand strong{font-size:23px}.menu{display:block}.nav{display:none;position:absolute;top:67px;left:0;right:0;background:#101b24;flex-direction:column;gap:0;padding:10px 6% 20px;box-shadow:0 10px 20px #0004}.nav.active{display:flex}.nav a{padding:12px;border-bottom:1px solid #34414b}.hero{height:490px}.hero-photo{left:10%;width:90%;object-position:54% center}.hero:before{background:linear-gradient(90deg,#08131bd9,#0c192373 65%,#101c2519),linear-gradient(0deg,#05101bc2,transparent)}.hero-copy{padding-top:80px}.categories{gap:12px}.category{height:260px;padding:15px}.category h2{font-size:18px}.article-grid{grid-template-columns:repeat(2,1fr)}.about-copy{width:60%}}
@media(max-width:560px){.wrap{padding:0 5%}.hero{height:465px}.hero-photo{left:0;width:100%;object-position:55% center;filter:brightness(1.04)}.hero:before{background:linear-gradient(0deg,rgba(16,18,20,.86) 0%,rgba(20,22,24,.38) 63%,rgba(20,22,24,.08) 100%)}.hero .wrap{align-items:flex-end;padding-bottom:43px}.hero-copy{padding:0}.hero h1{font-size:33px}.hero p{font-size:12px}.categories{grid-template-columns:1fr;gap:14px}.category{height:215px;padding:22px}.category img{object-position:center 40%}.category p{min-height:0;margin-bottom:11px}.category h2{font-size:21px}.category-area{padding-top:21px;padding-bottom:4px}.latest{padding-top:28px;padding-bottom:35px}.section-heading h2{font-size:19px}.article-grid{grid-template-columns:1fr}.article-media{height:205px}.article-body{min-height:unset}.empty-card{min-height:180px}.about{padding-top:125px}.about-photo{width:100%;height:205px;object-position:left 30%}.about:before{background:linear-gradient(0deg,#111f29 0%,#111f29 38%,#111f2900 90%)}.about .wrap{min-height:260px}.about-copy{width:100%;padding:15px 0 35px}.footer .links{gap:15px;line-height:2}}


/* MAZDA3 LIFE — Machine Gray design system */
:root{--mg:#45484A;--mg-light:#5A5E61;--mg-dark:#2B2D30;--silver:#85898b;--page-dark:#17191b;--border-mg:rgba(200,205,205,.20)}
body{background:radial-gradient(ellipse 88% 530px at 82% 8%,rgba(90,94,97,.25),transparent 74%),linear-gradient(145deg,#181a1c 0%,#26292b 35%,#373a3c 59%,#202224 83%,#141618 100%);background-attachment:fixed;color:#f4f5f5}
.header{background:linear-gradient(108deg,#131517 0%,#292c2e 52%,#45484a 100%)!important;border-bottom:1px solid rgba(214,218,218,.23)!important;box-shadow:0 6px 22px #0003;color:#fff;min-height:77px;height:auto!important;position:sticky;top:0;z-index:90}
.header .wrap{width:100%}.head{min-height:77px}.brand{color:#fafafa!important}.brand strong{font-weight:400}.brand small{color:#c9cccd}
.nav a:hover,.footer a:hover{color:#fff!important;text-decoration:underline;text-underline-offset:6px}
.menu{border:1px solid #828587!important;color:#fff!important}
.hero{background:#333638!important}
.hero:before{background:linear-gradient(90deg,rgba(16,18,20,.92) 0%,rgba(30,32,34,.61) 31%,transparent 63%),linear-gradient(0deg,rgba(19,20,21,.24),transparent 58%)!important}
.hero:after{background:linear-gradient(90deg,#181a1bea 0%,#2b2d30bb 39%,transparent 90%),linear-gradient(0deg,#15171980,transparent 65%)!important}
.category-area,.latest{background:transparent!important}
.category{border:1px solid rgba(214,218,218,.20)!important;border-radius:10px!important;box-shadow:0 12px 25px #0003}
.category:after{background:linear-gradient(0deg,rgba(25,27,29,.98),rgba(35,38,40,.11) 90%)!important}
.section-heading h2{border-left-color:#7a7f82!important;color:#fff}
.section-heading small{color:#b8bcbe!important}.section-heading .more{color:#e7e9e9}
.article{border-radius:10px!important;box-shadow:0 10px 26px #0003!important;border-color:#c8cbcd!important;color:#24282a;background:#f5f6f6!important}
.article-media{background:#343638!important}
.article label{background:#45484a!important;color:#fff!important}
.about{background:linear-gradient(128deg,#1a1c1e,#343739 55%,#27292b)!important}
.about:before{background:linear-gradient(90deg,#1a1c1ee6,#2b2d30a0 52%,transparent)!important}
.footer{background:linear-gradient(115deg,#111315,#252729 53%,#3a3d3f)!important;color:#d3d5d6!important;border-top:1px solid #73767966!important}
.footer strong,.footer .wordmark{color:#fff!important}.footer .links{display:flex;flex-wrap:wrap;gap:16px 24px;justify-content:center}.footer a{color:#d5d7d8}
.note{background:#303335!important;color:#e4e5e5!important}
.darkcard{background:linear-gradient(137deg,#44484a 0%,#2d3032 43%,#202224 100%)!important;border:1px solid rgba(226,228,228,.18)!important;box-shadow:0 14px 32px #0004!important}
.darkcard h2{border-color:#85898b88!important}.darkcard p{color:#e1e2e3!important}
.toc span,.num{background:#45484a!important}
.bodycard{background:#f6f7f7!important;color:#292c2e!important}
.article-section h2{border-color:#b9bdbf!important}.tip{background:#e6e8e8!important;border-left-color:#747a7d!important}.steps p{background:#e9ebeb!important}
.smallbtn{background:#e1e3e4!important;color:#252729!important}.smallbtn:hover{background:#fff!important}
.kicker,.rating em{color:#d5d8d9!important}
.fixedtop{background:#45484a!important;border-color:#a7adaf!important}
.outline-btn:hover{color:#303335!important}
@media(max-width:760px){.nav{background:#2b2d30!important}.header{min-height:67px}.head{min-height:67px}.hero:after{background:linear-gradient(0deg,#17191bee,#2d3032a2 66%,#20222470)!important}}


/* 2026-10-15: カテゴリの暗さを緩和（画像・重ね色・背景のみ変更） */
body{background:radial-gradient(ellipse 95% 540px at 82% 7%,rgba(115,119,121,.24),transparent 76%),linear-gradient(145deg,#252729 0%,#343739 35%,#484b4d 61%,#303335 83%,#242628 100%)!important}
.category{background:#4a4d4f!important;border-color:rgba(224,227,228,.29)!important;box-shadow:0 9px 23px rgba(0,0,0,.21)!important}
.category img{filter:brightness(1.08) contrast(1.02) saturate(1.00)!important}
.category:after{background:linear-gradient(0deg,rgba(25,27,29,.79) 0%,rgba(30,32,34,.27) 39%,rgba(32,35,37,.02) 91%)!important}

.category h2,.category p,.category span{color:#fff}
@media(max-width:560px){.category img{filter:brightness(1.12) contrast(1.02) saturate(1.00)!important}.category:after{background:linear-gradient(0deg,rgba(25,27,29,.78) 0%,rgba(30,32,34,.25) 40%,rgba(30,32,34,.02) 100%)!important}}

.about-photo{filter:brightness(1.15)!important}.about:before{background:linear-gradient(90deg,transparent 3%,rgba(34,36,38,.40) 49%,#2b2d30 70%)!important}

.category-label{position:absolute;bottom:9px;left:9px;background:rgba(20,23,26,.78);color:white;padding:5px 8px;font-size:11px}

/* v2 home refinements */
@media(max-width:560px){.hero-copy h1{font-size:clamp(25px,7.2vw,32px)!important;letter-spacing:0!important;line-height:1.5!important}.hero-copy h1 .ml-nowrap{white-space:nowrap;display:inline-block}.hero-copy{max-width:100%!important}}
.about-photo{filter:brightness(1.5) contrast(1.05)!important}
.about:before{background:linear-gradient(90deg,rgba(25,27,29,.10) 0%,rgba(35,37,39,.22) 40%,#2b2d30 72%)!important}
@media(max-width:560px){.about-photo{filter:brightness(1.35) contrast(1.03)!important}.about:before{background:linear-gradient(0deg,#2b2d30 0%,rgba(43,45,48,.82) 25%,transparent 78%)!important}}

/* v3 homepage: image luminance + priority for real articles */
.hero-photo{filter:brightness(1.13) contrast(1.02) saturate(1.02)}
.hero:before{background:linear-gradient(90deg,rgba(15,17,19,.95) 0%,rgba(26,28,30,.73) 30%,rgba(26,28,30,.10) 59%,transparent 72%),linear-gradient(0deg,rgba(14,16,18,.20),transparent 65%)!important}
.article-grid--single{grid-template-columns:minmax(0,360px)}
.latest .article:focus-visible,.category:focus-visible{outline:3px solid #fff;outline-offset:3px}
@media(max-width:800px){.hero-photo{filter:brightness(1.11) contrast(1.02)}.hero:before{background:linear-gradient(90deg,rgba(15,17,19,.80),rgba(20,22,24,.30) 54%,transparent 92%),linear-gradient(0deg,rgba(15,17,19,.44),transparent 78%)!important}}
@media(max-width:560px){.hero-photo{filter:brightness(1.07) contrast(1.02)}.hero:before{background:linear-gradient(0deg,rgba(15,17,19,.90),rgba(17,19,21,.48) 54%,rgba(17,19,21,.08) 100%)!important}.article-grid--single{grid-template-columns:1fr}.category p{font-size:13px}.hero-copy h1{font-size:clamp(25px,7.2vw,32px)!important}}