:root{--dark:#101b24;--pane:#1b252d;--line:#394650;--soft:#f3f5f6}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#0c151c;color:#eef3f6;font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;line-height:1.85}a{color:inherit;text-decoration:none}button{cursor:pointer;font:inherit}.wrap{width:min(1120px,calc(100% - 58px));margin:auto}.note{font-size:12px;background:#243541;color:#d2dfe7;text-align:center;padding:9px}.header{background:#101b24;position:sticky;top:0;z-index:10;border-bottom:1px solid #283843}.head{min-height:73px;display:flex;justify-content:space-between;align-items:center;gap:20px}.brand{font-size:25px;letter-spacing:.12em;line-height:1.1}.brand small{display:block;font-size:9px;letter-spacing:.035em;margin-top:8px}.nav{display:flex;gap:25px;font-size:12px}.nav a:hover,.link:hover{color:#a7cbdc}.menu{display:none;background:transparent;color:white;border:1px solid #63747e;border-radius:7px;padding:6px 12px}.hero{height:405px;position:relative;display:flex;align-items:center;background:#152a38;overflow:hidden}.hero img{position:absolute;width:100%;height:100%;object-fit:cover;object-position:center 57%;filter:brightness(.75)}.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#07111df2 0%,#0c1b29c9 39%,#0c1b2920 85%),linear-gradient(0deg,#07121c85,transparent 55%)}.hero .wrap{z-index:1;position:relative}.eyebrow{color:#b5d0dd;font-size:12px;letter-spacing:.13em;font-weight:700}.hero h1{font-size:clamp(28px,3.6vw,43px);line-height:1.42;letter-spacing:.015em;margin:17px 0}.hero p{font-size:14px;line-height:2;max-width:550px}.sub{margin-top:22px;font-size:12px;color:#d5e0e6}.section{margin-top:20px}.twocol{display:grid;grid-template-columns:1fr 1fr;gap:18px}.darkcard{background:linear-gradient(145deg,#202b34,#151e25);border:1px solid #34434c;border-radius:12px;padding:23px 25px;box-shadow:0 12px 30px #0002}.darkcard h2{font-size:17px;margin:0 0 17px;padding-bottom:10px;border-bottom:1px solid #53606a}.toc{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;list-style:none;padding:0;margin:0}.toc a{display:flex;gap:10px;align-items:center;font-size:13px;line-height:1.5;padding:6px 0}.toc a:hover{text-decoration:underline}.toc span{height:29px;width:29px;flex:none;background:#53616b;border-radius:50%;display:grid;place-items:center;font-size:12px}.product{display:flex;align-items:center;gap:18px}.product img{width:42%;height:170px;object-fit:cover;border-radius:8px}.product strong{font-size:17px}.product p,.darkcard p{font-size:13px;color:#d3dce1}.smallbtn{display:inline-block;margin-top:8px;background:#e8edf0;color:#182934;border-radius:6px;padding:9px 13px;font-size:12px;font-weight:700}.bodycard{margin-top:20px;background:#f8f9fa;border-radius:13px;color:#24313b;overflow:hidden;padding:38px clamp(20px,4.3vw,60px);box-shadow:0 10px 30px #0003}.lead{font-size:16px;line-height:2.1;padding:0 0 24px;border-bottom:1px solid #d6dfe4}.article-section{padding-top:29px;scroll-margin-top:100px}.article-section h2{font-size:25px;line-height:1.5;border-bottom:2px solid #bccad2;padding:0 0 11px;margin:0 0 19px}.num{display:inline-grid;place-items:center;background:#344853;color:white;width:38px;height:38px;border-radius:50%;font-size:18px;margin-right:10px}.article-section p{font-size:15px;line-height:2.1;margin:13px 0}.article-section ul{padding-left:24px;line-height:2.2;font-size:15px}.media{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:center}.photo{margin:10px 0}.photo img{width:100%;display:block;aspect-ratio:16/10;object-fit:cover;border-radius:9px}.photo figcaption{font-size:11px;color:#667985;margin-top:7px}.tip{margin:22px 0;padding:17px 20px;background:#e8eef1;border-left:4px solid #7a97a7;border-radius:6px;font-size:14px}.steps{display:grid;gap:11px}.steps p{margin:0!important;padding:12px 18px;background:#edf1f3;border-radius:7px}.alert{background:#fff4e6;border-left:4px solid #cc9752;padding:18px 21px;border-radius:7px}.assessment{display:grid;gap:12px}.rating{display:grid;grid-template-columns:150px 1fr;gap:16px;font-size:13px;border-bottom:1px solid #46535c;padding-bottom:12px}.rating em{font-style:normal;color:#cadbe5}.bottom{margin-bottom:36px}.footer{padding:28px 0;background:#081118;text-align:center;color:#bac8d0;font-size:12px}.footer strong{letter-spacing:.15em;font-size:21px;color:white}.footer p{margin:6px}.links{margin:18px 0;display:flex;gap:24px;justify-content:center;flex-wrap:wrap}.fixedtop{position:fixed;right:18px;bottom:18px;background:#344955;color:white;border:1px solid #8697a2;border-radius:50%;height:44px;width:44px;display:grid;place-items:center;z-index:9}.kicker{font-size:11px;letter-spacing:.1em;color:#adbfc9}
@media(max-width:760px){.wrap{width:min(100% - 30px,1120px)}.menu{display:block}.head{min-height:67px}.brand{font-size:21px}.nav{display:none;position:absolute;top:67px;left:0;right:0;padding:15px 22px 24px;flex-direction:column;background:#101b24;gap:14px}.nav.active{display:flex}.hero{height:385px}.hero img{object-position:55% center}.hero:after{background:linear-gradient(0deg,#07131df5,#07131d95 65%,#07131d55)}.hero .wrap{align-self:flex-end;margin-bottom:28px}.hero h1{font-size:29px}.hero p{font-size:13px}.twocol{grid-template-columns:1fr}.darkcard{padding:19px}.bodycard{padding:25px 20px}.media{grid-template-columns:1fr}.photo{order:-1}.article-section h2{font-size:21px}.rating{grid-template-columns:110px 1fr}.toc{gap:3px}.product img{height:130px}.nav a{font-size:15px}}


/* 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(14,15,17,.91) 0%,rgba(35,37,39,.73) 38%,transparent 77%),linear-gradient(0deg,rgba(19,20,21,.72),transparent 55%)!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: top page matched machine-gray article refinements */
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;background-attachment:fixed!important}
.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!important}
.hero{background:#44484a!important}
.hero img{filter:brightness(.97) contrast(1.03) saturate(.98)!important}
.hero:after{background:linear-gradient(90deg,rgba(22,24,26,.88) 0%,rgba(33,35,37,.6) 45%,rgba(28,30,32,.08) 100%),linear-gradient(0deg,rgba(22,24,26,.48),transparent 65%)!important}
.eyebrow{color:#e3e5e5!important}.sub{color:#e4e6e6!important}
.darkcard{background:linear-gradient(138deg,#4b4f51 0%,#3b3e40 50%,#303335 100%)!important;border:1px solid rgba(224,227,228,.3)!important;box-shadow:0 9px 23px #0003!important}
.darkcard h2{border-color:#a0a4a655!important}
.darkcard p{color:#eceeee!important}
.toc span{background:#62676a!important}
.bodycard{background:#fafafa!important;color:#2a2d2f!important;box-shadow:0 12px 34px #0002!important}
.footer{background:linear-gradient(115deg,#111315,#252729 53%,#3a3d3f)!important;border-top:1px solid #73767966!important}
@media(max-width:760px){.hero img{filter:brightness(1.03) contrast(1.02) saturate(.98)!important}.hero:after{background:linear-gradient(0deg,rgba(29,31,33,.87) 0%,rgba(38,41,43,.46) 63%,rgba(38,41,43,.06) 100%)!important}.nav{background:#2b2d30!important}.bodycard{padding:24px 20px!important}}

.hero .hero-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.post-content{min-height:300px}.darkcard a{color:white}.post-content h2{scroll-margin-top:20px}

/* v3 article reading system */
.hero .hero-image{filter:brightness(1.08) contrast(1.02)!important}
.hero:after{background:linear-gradient(90deg,rgba(20,22,24,.89) 0%,rgba(28,30,32,.57) 43%,rgba(28,30,32,.08) 100%),linear-gradient(0deg,rgba(20,22,24,.35),transparent 72%)!important}
.bodycard.post-content{padding-left:clamp(28px,7vw,100px);padding-right:clamp(28px,7vw,100px)}
.post-content>p,.post-content>h2,.post-content>h3,.post-content>h4,.post-content>ul,.post-content>ol,.post-content>blockquote{max-width:760px;margin-left:auto;margin-right:auto}
.post-content>h2{margin-top:1.75em;line-height:1.5}
.post-content>h3{margin-top:1.4em}
.post-content .wp-block-table{margin-left:auto;margin-right:auto;max-width:850px}
.post-content table{max-width:100%}
.toc a{overflow-wrap:anywhere}
@media(max-width:760px){.toc{grid-template-columns:1fr;gap:5px}.toc a{font-size:14px;padding:7px 0}.hero .hero-image{filter:brightness(1.04) contrast(1.02)!important}.hero:after{background:linear-gradient(0deg,rgba(23,25,27,.90),rgba(27,29,31,.43) 65%,rgba(27,29,31,.08))!important}.bodycard.post-content{padding:26px 19px!important}.post-content{font-size:16px;line-height:1.85}.post-content h2{font-size:22px}.post-content h3{font-size:19px}}

.bottom--single{grid-template-columns:1fr}.bottom--single .darkcard{max-width:100%}

/* v3.1: give body copy a calmer mobile rhythm without shrinking headings/cards. */
@media(max-width:760px){.bodycard.post-content{line-height:1.78}.bodycard.post-content p{margin-top:0;margin-bottom:1.05em}.bodycard.post-content>p{max-width:100%}}

/* v3.2: mobile-first article readability and long Japanese table cells. */
@media (max-width:760px) {
  .bodycard.post-content {font-size:18px;line-height:1.8;}
  .bodycard.post-content p,
  .bodycard.post-content li {font-size:18px!important;line-height:1.8!important;}
  .bodycard.post-content p {margin-bottom:1.5em!important;}
  .bodycard.post-content li {margin-bottom:.25em;}
  .bodycard.post-content .wp-block-table {max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .bodycard.post-content table,
  .bodycard.post-content .wp-block-table table {width:100%;min-width:0;max-width:100%;table-layout:fixed;}
  .bodycard.post-content table th,
  .bodycard.post-content table td {white-space:normal;overflow-wrap:anywhere;word-break:normal;hyphens:auto;}
}