/*
Theme Name: mashroom.jp Editorial Child
Theme URI: https://mashroom.jp/
Description: mashroom.jp and Editor's Choice — editorial design child theme.
Author: MASHROOM
Version: 0.5.48
Requires at least: 6.6
Requires PHP: 8.1
Template: twentytwentyfive
Text Domain: mashroom-editorial
License: GNU General Public License v2 or later
*/
:root{--red:#bb1019;--red2:#9f1017;--ink:#191919;--text:#272727;--muted:#717171;--line:#e5e1de;--paper:#fbfaf8;--soft:#f2efec;--dark:#1b1b1b;--max:1180px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,'Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;font-size:15px;line-height:1.85}a{color:inherit;text-decoration:none}a:hover{color:var(--red)}button{font:inherit;cursor:pointer}img{max-width:100%;display:block} .wrap{max-width:var(--max);margin:auto;padding-left:34px;padding-right:34px}
.site-header{border-bottom:1px solid var(--line);background:rgba(251,250,248,.98);position:sticky;top:0;z-index:10}.header-inner{max-width:var(--max);margin:auto;padding:20px 34px;display:flex;align-items:center;justify-content:space-between;gap:32px}.brand{font-size:31px;color:var(--red);font-weight:850;letter-spacing:-1.6px;line-height:1}.brand:hover{color:var(--red2)}.brand.editor{font-size:39px;font-family:Georgia,'Times New Roman',serif;font-weight:700;letter-spacing:-1.5px;line-height:.9}.brand-editor-sub{display:block;color:var(--red);font-size:13px;letter-spacing:0;font-family:Georgia,serif;margin-top:5px}.nav{display:flex;gap:27px;align-items:center;flex-wrap:wrap}.nav a{font-size:11px;font-weight:650;letter-spacing:.09em;white-space:nowrap}.nav a.active{color:var(--red)}.switch{font-size:11px;color:var(--muted);white-space:nowrap}.eyebrow{color:var(--red);font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:800}.line{height:1px;background:var(--line)}.serif{font-family:Georgia,'Times New Roman',serif}.major{font-size:clamp(44px,6vw,83px);line-height:1.06;letter-spacing:-.045em;margin:18px 0 24px;font-weight:750}.major .red{color:var(--red)}.jp-heading{font-size:clamp(25px,3vw,38px);line-height:1.45;letter-spacing:.03em;font-weight:750}.lead{font-size:15px;line-height:2.05}.muted{color:var(--muted)}.small{font-size:12px}.micro{font-size:11px}.section{padding:78px 0;border-bottom:1px solid var(--line)}.section-title{font-size:32px;line-height:1.4;margin:5px 0 15px}.underlined{display:inline-block;border-bottom:1px solid var(--red);padding-bottom:6px}.linkline{display:inline-flex;align-items:center;gap:20px;border-bottom:1px solid var(--red);padding-bottom:5px;font-weight:700;font-size:12px;letter-spacing:.03em}.linkline::after{content:'→';font-size:18px;color:var(--red)}
.hero{display:grid;grid-template-columns:1fr 1fr;min-height:540px}.hero-content{padding:65px 5vw 54px max(34px,calc((100vw - 1112px)/2));display:flex;flex-direction:column;justify-content:center}.hero-visual{min-height:480px;background:linear-gradient(150deg,#eee9e3,#d7d0c7);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.image-slot{position:relative;background:linear-gradient(140deg,#eeeae5 0%,#d7d2cc 60%,#c7c0b8 100%);min-height:180px;display:flex;align-items:center;justify-content:center;color:#77716d;font-size:12px;letter-spacing:.05em;text-align:center;padding:24px}.image-slot:before{content:'';position:absolute;inset:14px;border:1px solid rgba(255,255,255,.52)}.hero-visual:after{content:'VISUAL / PHOTO TO BE INSERTED';position:absolute;bottom:32px;right:34px;color:#706a63;font-size:10px;letter-spacing:.18em}.hero-visual .big-photo-text{font-family:Georgia,serif;font-size:clamp(30px,4vw,63px);color:#ada69d;opacity:.65;transform:rotate(-8deg);line-height:1.1;text-align:center}.hero-micro{margin-top:38px;display:flex;gap:14px;align-items:center;font-size:10px;color:var(--muted);letter-spacing:.1em}.hero-micro .on{color:var(--red);border-bottom:2px solid var(--red);padding-bottom:3px}
.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.four{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.two{display:grid;grid-template-columns:1fr 1fr;gap:28px}.service{border-top:1px solid var(--line);padding:24px 10px 6px 0}.num{font-family:Georgia,serif;font-size:27px;color:var(--red)}.service h3{font-family:Georgia,serif;font-size:22px;margin:4px 0}.service p{font-size:12px;color:#5a5a5a;line-height:1.9}.work-card{background:white;border:1px solid var(--line)}.work-card h3{font-size:17px;margin:0;padding:18px 18px 2px}.work-card p{font-size:12px;color:var(--muted);margin:0;padding:0 18px 20px}.work-card .image-slot{min-height:190px}.red-panel{background:var(--red);color:white;padding:42px}.red-panel .eyebrow{color:#ffe1e3}.red-panel .linkline{border-bottom-color:white}.red-panel .linkline::after{color:white}.intro-strip{background:#f3f0ec;padding:38px 0}.data-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}.data-grid .stat{font-family:Georgia,serif;font-size:34px;color:var(--red)}.data-grid span{display:block;font-size:12px;color:var(--muted)}
.ec-hero{display:grid;grid-template-columns:1fr 1fr;min-height:350px;background:#eeeae6}.ec-hero>div:first-child{padding:55px 6vw 45px max(34px,calc((100vw - 1112px)/2));display:flex;flex-direction:column;justify-content:center}.ec-hero .image-slot{height:100%;min-height:350px}.ec-hero h1{font-size:clamp(30px,3.6vw,49px);line-height:1.45;letter-spacing:.04em;margin:12px 0 22px}.ec-intro{max-width:700px}.ec-main{display:grid;grid-template-columns:minmax(0,3fr) minmax(210px,1.15fr);gap:37px}.section-row{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:0 0 20px}.section-row h2{font-size:20px;letter-spacing:.02em;margin:0}.tile{background:white;border:1px solid var(--line);display:block}.tile .image-slot{min-height:180px}.tile-copy{padding:16px 18px 20px}.tile h3{font-size:17px;line-height:1.6;margin:6px 0 9px}.tile p{font-size:12px;color:var(--muted);margin:0}.tag{color:var(--red);font-size:10px;font-weight:800;letter-spacing:.09em}.tag.secondary{color:#777}.sidebar{padding-top:0}.archive-widget{background:#f2efec;padding:25px}.archive-widget h2{margin:0 0 7px;font-family:Georgia,serif;font-size:30px;color:var(--red)}.archive-widget p{font-size:12px;line-height:1.8;color:#555;margin:0 0 10px}.archive-years{display:flex;flex-wrap:wrap;gap:7px;margin:20px 0}.archive-years span{border:1px solid #d6d0ca;font-size:11px;padding:3px 9px}.archive-linked{border-top:1px solid #d8d3ce;padding-top:15px;font-size:12px;font-weight:700}.status-sample{font-size:10px;background:#efe8e1;color:#806451;padding:3px 7px;margin-left:8px;letter-spacing:.06em}
.article-wrap{max-width:900px;margin:0 auto;padding:64px 34px 90px}.article-title{font-size:clamp(26px,3vw,38px);line-height:1.53;letter-spacing:.01em;margin:12px 0 12px}.article-date{font-size:12px;color:#888}.article-figure{margin:28px 0 30px}.article-figure .image-slot{min-height:320px}.article-figure figcaption{text-align:center;color:#777;font-size:12px;margin:9px 0 0}.article-wrap .body p{font-size:15px;line-height:2.15;margin:0 0 22px}.article-wrap .body h2{font-size:19px;border-bottom:1px solid #d9d1cb;padding-bottom:8px;margin:42px 0 15px}.details{background:#f3f0ed;padding:24px 28px;font-size:13px;line-height:2.1}.details div{border-bottom:1px solid #e2dbd4;padding:6px 0}.details strong{display:inline-block;width:94px;vertical-align:top}.details span{display:inline-block;max-width:calc(100% - 102px);vertical-align:top;overflow-wrap:anywhere}.body .toc{line-height:2.05;font-size:13px;margin:0;white-space:pre-line}.archive-image{width:100%;height:auto;border:1px solid #e3dfdb}.content-narrow{max-width:820px;margin:auto}.timeline{margin-top:25px}.timeline-item{display:grid;grid-template-columns:115px 1fr;gap:28px;border-top:1px solid var(--line);padding:22px 0}.timeline-item strong{font-family:Georgia,serif;color:var(--red);font-size:27px}.timeline-item p{margin:0;font-size:14px}.contact-form{max-width:690px}.field{margin-bottom:20px}.field label{display:block;font-size:12px;font-weight:750;margin-bottom:5px}.field input,.field textarea,.field select{width:100%;border:1px solid #d9d4ce;background:#fff;padding:13px 14px;font-family:inherit;font-size:14px;border-radius:0}.field textarea{min-height:128px;resize:vertical}.mock-cta{padding:13px 20px;background:var(--ink);color:white;border:0;font-size:12px;letter-spacing:.08em;opacity:.65;cursor:not-allowed}
.footer{background:#191919;color:#fff;padding:57px 0 22px}.footer-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:50px}.footer-logo{font-size:40px;font-weight:850;letter-spacing:-2.4px;color:#e52d37;line-height:1.1}.footer h3{color:#eee;font-size:11px;letter-spacing:.15em;margin:0 0 16px}.footer-nav{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px}.footer-nav a{color:#d8d8d8;font-size:12px}.footer-nav a:hover{color:#e52d37}.footer .subline{color:#aaa;font-size:12px;margin-top:14px}.foot-bottom{border-top:1px solid #424242;margin-top:35px;padding-top:17px;display:flex;justify-content:space-between;gap:25px;color:#999;font-size:11px}.preview-ribbon{position:fixed;bottom:15px;left:15px;z-index:20;background:#fbfaf8e8;border:1px solid #d8d3cf;padding:7px 10px;font-size:10px;color:#666;box-shadow:0 2px 12px #0001;pointer-events:none}
@media(max-width:960px){.header-inner{flex-wrap:wrap;gap:15px;padding-top:16px;padding-bottom:16px}.nav{gap:15px}.hero{min-height:400px}.hero-content{padding:46px 30px}.hero-visual{min-height:370px}.ec-hero>div:first-child{padding:40px 30px}.four{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:650px){.wrap{padding-left:20px;padding-right:20px}.header-inner{padding:14px 20px}.brand{font-size:25px}.brand.editor{font-size:31px}.nav{gap:12px;row-gap:5px}.nav a{font-size:10px}.switch{font-size:10px}.hero,.ec-hero{grid-template-columns:1fr}.hero-content{padding:43px 20px}.hero-visual{min-height:255px}.ec-hero>div:first-child{padding:40px 20px}.ec-hero .image-slot{min-height:200px}.major{font-size:52px}.section{padding:50px 0}.three,.two,.data-grid,.footer-grid{grid-template-columns:1fr}.four{grid-template-columns:1fr 1fr}.ec-main{grid-template-columns:1fr}.article-wrap{padding:34px 20px 60px}.article-figure .image-slot{min-height:210px}.footer{padding-top:45px}.foot-bottom{flex-direction:column;gap:6px}.footer-logo{font-size:34px}.timeline-item{grid-template-columns:75px 1fr;gap:10px}.timeline-item strong{font-size:21px}.archive-widget{padding:20px}.section-title{font-size:26px}}
/* Editor's Choice only: media kit gateway before the shared site footer */
.ec-kit{background:#f0ece8;border-top:1px solid #e1dad4;border-bottom:1px solid #d9d1c9}
.ec-kit-inner{display:flex;align-items:center;justify-content:space-between;gap:28px;padding-top:37px;padding-bottom:37px}
.ec-kit h2{font-family:Georgia,'Times New Roman',serif;font-size:27px;margin:3px 0 3px;line-height:1.3}
.ec-kit p{margin:0;color:#666;font-size:12px;line-height:1.8}
.ec-kit-link{display:inline-flex;align-items:center;justify-content:space-between;gap:28px;white-space:nowrap;background:var(--red);color:white;border:1px solid var(--red);padding:13px 19px;font-size:12px;font-weight:650;letter-spacing:.025em}
.ec-kit-link:hover{background:#88121a;color:white}
.ec-kit-note{font-size:10px;color:#8b827e;margin-top:5px;text-align:right}
@media(max-width:650px){.ec-kit-inner{display:block;padding-top:28px;padding-bottom:30px}.ec-kit h2{font-size:23px}.ec-kit-action{margin-top:16px}.ec-kit-link{width:100%}.ec-kit-note{text-align:left}}
/* WordPress shell reset */
body{margin:0!important}.wp-site-blocks{margin:0;padding:0;min-height:100vh}
.wp-site-blocks > *, .wp-block-shortcode, .wp-block-shortcode > * {margin-block-start:0!important;margin-block-end:0!important}
.wp-site-blocks .wp-block-shortcode{width:100%;max-width:none;padding:0!important}
.wp-site-blocks header, .wp-site-blocks footer{max-width:none}
:where(.wp-site-blocks) a{text-decoration:none}
:where(.wp-site-blocks) h1,:where(.wp-site-blocks) h2,:where(.wp-site-blocks) h3{font-family:inherit}
:where(.wp-site-blocks) .serif{font-family:Georgia,"Times New Roman",serif}
/* Magazine-inspired topics lettering */
.topics-strip{padding:28px 0 31px;background:#f8f6f2;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.topics-heading{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.topics-heading strong{font-size:12px;letter-spacing:.19em}
.topics-heading span{font-size:11px;color:#777}
.typocloud{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:12px 23px;padding:16px 0 4px}
.typocloud a{line-height:1.3;white-space:nowrap;display:inline-block;transition:opacity .15s}
.typocloud a:hover{opacity:.7}
.typocloud .big{font-size:clamp(25px,4vw,35px);font-weight:900;letter-spacing:-.06em}
.typocloud .medium{font-size:clamp(18px,2.8vw,25px);font-weight:650;letter-spacing:-.04em}
.typocloud .small{font-size:clamp(13px,2vw,17px);font-weight:350}
.typocloud .mincho{font-family:"Hiragino Mincho ProN","Yu Mincho",serif}
.typocloud .gothic{font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif}
.typocloud .accent{color:var(--red)}
/* Pick up sidebar */
.pickup-widget{margin-top:30px;padding-top:22px;border-top:1px solid var(--line)}
.pickup-widget h3{font-size:17px;margin:6px 0 16px}
.pickup-row{display:flex;align-items:flex-start;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.pickup-thumb{flex:0 0 87px;width:87px;height:66px;background:#eeeae4;object-fit:cover}
.pickup-thumb.placeholder{display:flex;align-items:center;justify-content:center;font-size:9px;color:#aaa;text-align:center}
.pickup-copy{font-size:12px;line-height:1.6;font-weight:650}
.pickup-copy span{display:block;font-weight:400;color:var(--red);font-size:10px}
/* Cards and article details */
.latest-articles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.latest-articles .tile{min-width:0}
.latest-articles .tile .thumb{height:168px;background:#ebe8e4;display:flex;align-items:center;justify-content:center}
.latest-articles .tile .thumb img{width:100%;height:100%;object-fit:cover}
.latest-articles .tile .thumb.placeholder{font-size:10px;color:#a49d96}
.latest-articles .tile h3{font-size:16px;line-height:1.65}
.ec-archive-yr{display:inline-block;padding:2px 8px;border:1px solid #ddd5cf;font-size:11px;color:#555;margin:0 4px 7px 0}
.article-wrap .body p{line-height:2.05;margin:0 0 22px}
.article-wrap .body h2{font-size:20px;border-left:3px solid var(--red);padding-left:12px;margin:30px 0 16px}
.article-wrap .body img{max-width:100%;height:auto}
.article-wrap .body a{color:var(--red);text-decoration:underline}
.article-feature img{max-width:100%;width:auto;max-height:600px;margin:0 auto}
.article-feature figcaption{text-align:center;font-size:11px;color:#777;margin:7px 0 0}
.archive-item-date{color:#777;font-size:12px}
.mashroom-empty{background:#f2efec;border:1px solid #e7e1dc;padding:30px;text-align:center;font-size:13px;color:#777}
.blog-pagination{text-align:center;padding:30px}
.blog-pagination a,.blog-pagination .current{padding:5px 10px;border:1px solid #ddd;margin:2px}
@media(max-width:650px){.typocloud{gap:10px 15px}.latest-articles{grid-template-columns:1fr}.topics-strip{padding:20px 0 23px}}
/* Override the parent's site-wide constrained wrappers for the routed page shell. */
.wp-site-blocks,.wp-site-blocks > main{max-width:none!important;width:100%!important;padding:0!important;margin:0!important}
.wp-site-blocks > .wp-block-shortcode,.wp-site-blocks .wp-block-shortcode{max-width:none!important;width:100%!important;margin:0!important;padding:0!important}
.wp-site-blocks header.site-header{width:100%;max-width:none}
.wp-site-blocks .footer{width:100%;max-width:none}
/* v0.3 — contact page bilingual text and English services. */
.contact-english-lead{font-family:Georgia,'Times New Roman',serif;font-size:clamp(16px,1.7vw,21px);line-height:1.65;max-width:870px;color:#555;margin:15px 0 0}
.en-services-intro{max-width:780px;margin-bottom:25px}.en-services-grid .service h3{font-family:Georgia,serif;font-size:22px}.en-services-grid .service p{font-size:13px;line-height:1.9}
/* v0.4.0 — improve legibility while retaining editorial typography and spacing. */
body{font-size:17px;line-height:1.85}
.lead{font-size:17px;line-height:1.95}
.small{font-size:14px}
.micro{font-size:12px}
.nav a{font-size:13px}
.switch{font-size:13px}
.eyebrow{font-size:12px}
.linkline{font-size:14px}
.service p,.work-card p{font-size:14px;line-height:1.9}
.data-grid span,.tile p,.archive-widget p{font-size:13px}
.details{font-size:15px}
.timeline-item p{font-size:16px;line-height:1.85}
.article-wrap .body p{font-size:17px;line-height:2.05}
.article-date{font-size:13px}
.tag{font-size:12px}
.tile h3,.latest-articles .tile h3{font-size:18px}
.pickup-copy{font-size:14px}
.pickup-copy span{font-size:12px}
.field label{font-size:14px}
.field input,.field textarea,.field select{font-size:16px}
.footer-nav a{font-size:14px}
.footer h3{font-size:12px}
.footer .subline{font-size:13px}
.foot-bottom{font-size:12px}
.article-feature figcaption,.article-figure figcaption{font-size:13px}
.en-services-grid .service p{font-size:14px}
.history-subtitle{color:var(--red);font-weight:700;font-size:17px;margin:4px 0 8px}
.history-intro{font-size:15px;color:var(--muted);margin:0 0 18px;line-height:1.8}
/* Compact screens: maintain a readable navigation without compromising layout. */
@media(max-width:650px){
.nav{gap:10px;row-gap:8px}
.nav a{font-size:12px;letter-spacing:.045em}
.switch{font-size:12px}
.timeline-item p{font-size:16px}
.footer-nav a{font-size:14px}
.article-wrap .body p{font-size:17px}
}
/* v0.5: bilingual inquiry submission */
.mashroom-submit{display:inline-flex;align-items:center;gap:9px;flex-wrap:wrap;background:var(--ink);color:#fff;border:0;border-radius:0;padding:15px 24px;font-family:inherit;font-weight:700;font-size:14px;letter-spacing:.06em;opacity:1;cursor:pointer;transition:background .15s ease}
.mashroom-submit:hover,.mashroom-submit:focus-visible{background:var(--red);color:#fff}
.mashroom-submit .submit-jp{font-weight:500;font-size:12px;letter-spacing:0;margin-left:6px}
.mashroom-form-notice{padding:15px 18px;margin:0 0 24px;border-left:4px solid #555;background:#f2f0eb;font-size:15px;line-height:1.7}
.mashroom-form-notice.success{border-left-color:#356d54}
.mashroom-form-notice.error{border-left-color:var(--red)}
.mashroom-form-notice span{font-size:13px}
.mashroom-required{font-size:13px;margin-top:12px}
.mashroom-honeypot{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden!important}
@media(max-width:600px){.mashroom-submit{width:100%;justify-content:center;text-align:center}}
/* v0.5.1 — centered editorial reading column, balanced page gutters.
The inner wrapper deliberately isolates article layout from the parent
block theme's full-width shortcode and main container rules. */
body .article-wrap:has(> .article-reading){
width:100% !important;
max-width:none !important;
margin:0 !important;
padding:0 !important;
}
body .article-wrap > .article-reading{
display:flow-root;
box-sizing:border-box;
width:calc(100% - 80px) !important;
max-width:780px !important;
margin-left:auto !important;
margin-right:auto !important;
padding:64px 0 90px;
text-align:left;
}
.article-reading .tag,.article-reading .article-title,.article-reading .article-date{
text-align:left;
}
.article-reading .article-figure{
margin:32px 0 35px;
text-align:center;
}
.article-reading .article-feature img{
display:block;
width:auto;
max-width:100%;
height:auto;
margin:0 auto;
object-fit:contain;
}
.article-reading .article-feature figcaption{
margin:10px 0 0;
font-size:13px;
text-align:center;
line-height:1.65;
}
.article-reading .body{
display:block;
width:100% !important;
max-width:100% !important;
text-align:left;
overflow-wrap:anywhere;
}
.article-reading .body p,
.article-reading .body > div,
.article-reading .body > section,
.article-reading .body > blockquote{
width:auto !important;
max-width:100% !important;
}
.article-reading .body :is(h2,h3,h4,ul,ol,pre,table,figure){
max-width:100% !important;
}
.article-reading .body pre{white-space:pre-wrap;overflow-wrap:anywhere}
.article-reading .body table{display:block;overflow-x:auto}
@media (max-width:650px){
body .article-wrap > .article-reading{
width:calc(100% - 36px) !important;
padding:32px 0 60px;
}
.article-reading .article-title{font-size:clamp(25px,6vw,34px)}
}
/* v0.5.2 — final agreed EC article layout. The page canvas is up to
900px wide; body, title and meta share a centered 760px measure.
All text remains LEFT aligned; only the single image and caption center. */
body .wp-site-blocks main.ec-single-article{
display:block!important;
width:100%!important;
max-width:none!important;
padding:0!important;
margin:0!important;
text-align:left;
}
body .wp-site-blocks main.ec-single-article > .article-reading{
display:flow-root;
width:calc(100% - 80px)!important;
max-width:900px!important;
box-sizing:border-box;
margin-left:auto!important;
margin-right:auto!important;
padding:65px 0 90px;
text-align:left!important;
}
.ec-single-article .article-heading,
.ec-single-article .article-body{
width:100%;
max-width:760px;
margin-left:auto;
margin-right:auto;
text-align:left;
min-width:0;
}
.ec-single-article .article-heading .tag,
.ec-single-article .article-heading .article-title,
.ec-single-article .article-heading .article-date{
text-align:left!important;
margin-left:0;
margin-right:0;
}
.ec-single-article .article-title{
margin-top:12px;
margin-bottom:15px;
line-height:1.45;
overflow-wrap:anywhere;
}
.ec-single-article .article-date{
font-size:13px;
color:#777;
letter-spacing:.035em;
}
.ec-single-article .article-figure{
display:block;
width:100%;
max-width:900px;
margin:36px auto 38px!important;
text-align:center;
}
.ec-single-article .article-figure img{
display:block;
width:auto;
max-width:100%;
max-height:640px;
height:auto;
object-fit:contain;
margin:0 auto!important;
}
.ec-single-article .article-figure figcaption{
max-width:760px;
margin:10px auto 0;
text-align:center;
font-size:13px;
color:#777;
line-height:1.7;
}
.ec-single-article .article-body .body{
display:flow-root;
width:100%!important;
max-width:none!important;
min-width:0;
text-align:left!important;
overflow-wrap:anywhere;
word-break:normal;
}
.ec-single-article .article-body .body :is(p,div,section,article,blockquote,ul,ol,figure,pre,table){
max-width:100%!important;
box-sizing:border-box;
}
.ec-single-article .article-body .body > :is(p,div,section,blockquote,ul,ol,figure){
width:auto!important;
margin-left:0;
margin-right:0;
}
.ec-single-article .article-body .body p,
.ec-single-article .article-body .body li{
text-align:left;
font-size:17px;
line-height:2.05;
}
.ec-single-article .article-body .body p{margin:0 0 1.35em}
.ec-single-article .article-body .body :is(pre,code){
white-space:pre-wrap;
overflow-wrap:anywhere;
}
.ec-single-article .article-body .body table{
width:100%!important;
display:block;
overflow-x:auto;
}
.ec-single-article .article-body .body img{max-width:100%!important;height:auto}
@media(max-width:650px){
body .wp-site-blocks main.ec-single-article > .article-reading{
width:calc(100% - 36px)!important;
padding:34px 0 65px;
}
.ec-single-article .article-title{font-size:clamp(25px,6vw,33px)}
.ec-single-article .article-figure{margin:25px auto 28px!important}
.ec-single-article .article-body .body p,
.ec-single-article .article-body .body li{font-size:16px;line-height:1.95}
}
/* v0.5.3 — Editor's Choice image cards.
The Featured image no longer grows to the native portrait cover height;
all cards preserve the entire press-release cover without cropping. */
/* Featured Story: compact landscape-shaped frame even for portrait covers. */
.ec-main > div:first-child > .tile > .thumb {
position: relative;
display: flex;
width: 100%;
height: clamp(240px, 30vw, 340px);
overflow: hidden;
align-items: center;
justify-content: center;
background: #f1eeea;
padding: 15px;
}
.ec-main > div:first-child > .tile > .thumb img {
display: block;
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
object-fit: contain;
object-position: center;
}
.ec-main > div:first-child > .tile > .thumb.placeholder {
color: #9b9691;
font-size: 13px;
}
/* Latest and archive listing cards: consistent horizontal image frame,
with no cropped portrait covers or partial text on cover images. */
.latest-articles .tile > .thumb {
position: relative;
display: block;
width: 100%;
height: auto;
min-height: 0;
aspect-ratio: 16 / 10;
overflow: hidden;
background: #f1eeea;
padding: 0;
}
.latest-articles .tile > .thumb img {
position: absolute;
inset: 9px;
width: calc(100% - 18px);
height: calc(100% - 18px);
display: block;
object-fit: contain;
object-position: center;
max-width: none;
max-height: none;
}
.latest-articles .tile > .thumb.placeholder {display:flex;align-items:center;justify-content:center;font-size:12px;color:#9b9691;}
/* Tighten the large story's handoff to the latest list. */
.ec-main > div:first-child > .tile + .section-row {margin-top: 34px!important;}
@media (max-width:650px) {
.ec-main > div:first-child > .tile > .thumb {height:260px;padding:12px;}
.latest-articles .tile > .thumb {aspect-ratio: 16 / 10;}
}
/* v0.5.4 — stable featured-card image frame, independent of grid nesting.
* The original 0.5.3 selector depended on an exact ancestor structure.
* This explicit card class is rendered from PHP only for FEATURED.
* All LATEST ARTICLES styles remain unchanged. */
.ec-main .tile.ec-featured-card > .thumb {
position: relative !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
height: 290px !important;
min-height: 0 !important;
max-height: 290px !important;
padding: 14px !important;
margin: 0 !important;
overflow: hidden !important;
background: #f1eeea !important;
}
.ec-main .tile.ec-featured-card > .thumb img {
display: block !important;
position: static !important;
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
object-fit: contain !important;
object-position: center !important;
margin: 0 auto !important;
}
@media (max-width: 650px) {
.ec-main .tile.ec-featured-card > .thumb {
height: 230px !important;
max-height: 230px !important;
padding: 12px !important;
}
}
/* v0.5.5 — Corporate HOME visual (approved coastal editorial atmosphere).
* The source picture has embedded copy on the left; the bundled artwork
* is cropped to photograph-only on the right. Native HTML headline stays
* accessible, selectable, responsive and unchanged.
*/
.hero-visual.hero-visual-photo {
background: #e9e6e1;
display: block;
position: relative;
overflow: hidden;
}
.hero-visual.hero-visual-photo::after { content: none !important; }
.hero-visual.hero-visual-photo .hero-editorial-photo {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
max-width: none;
max-height: none;
object-fit: cover;
object-position: 52% center;
}
@media (max-width: 650px) {
.hero-visual.hero-visual-photo .hero-editorial-photo { object-position: 50% 57%; }
}
/* v0.5.7 — unified horizontal grid for ALL corporate and Editor's Choice pages.
Core outer tracks are identically spaced; article reading widths and
approved editorial cards are deliberately retained. */
:root { --site-max: 1520px; --site-edge: 44px; --site-gutter: clamp(20px, 3.2vw, 44px); }
/* Corporate/EC shared header, all section wrappers, media-kit, common footer. */
.wrap,
.header-inner {
width: 100%;
max-width: var(--site-max);
padding-left: var(--site-gutter);
padding-right: var(--site-gutter);
margin-left: auto;
margin-right: auto;
}
/* Edge-to-edge background colors remain, content uses the centered track.
Unlike the old version, neither HOME hero nor media hero hugs screen edge. */
main > .hero,
main > .ec-hero {
box-sizing: border-box;
width: calc(100% - 2 * var(--site-gutter));
max-width: calc(var(--site-max) - 2 * var(--site-edge));
margin-inline: auto;
display: grid;
min-width: 0;
}
/* HOME: the headline retains its own column, the approved coastal visual
is shown without aggressive cropping or synthetic lettering overlays. */
main > .hero {
grid-template-columns: minmax(0, 44%) minmax(0, 56%);
min-height: 0;
align-items: stretch;
}
main > .hero .hero-content {
min-width: 0;
padding: 30px clamp(20px, 3.1vw, 54px) 30px 0;
}
main > .hero .major { font-size: clamp(43px, 4.05vw, 75px); }
main > .hero .hero-visual.hero-visual-photo {
min-height: 0;
width: 100%;
aspect-ratio: 1672 / 941;
background: #dedbd7;
}
main > .hero .hero-visual.hero-visual-photo::after { content: none !important; }
main > .hero .hero-editorial-photo {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
/* Editor's Choice hero now uses the same outer margins as its TOPICS,
FEATURED, LATEST, sidebar and footer. Keep its established 2-column style. */
main > .ec-hero { grid-template-columns: repeat(2, minmax(0,1fr)); }
main > .ec-hero > div:first-child {
min-width: 0;
padding: 46px clamp(18px, 4vw, 60px) 46px 26px;
}
main > .ec-hero > .image-slot { min-width: 0; }
/* These naturally narrower reading pages stay centered, but use the same
minimum mobile gutters. No change to the agreed 760px article measure. */
.article-wrap {
width: 100%;
padding-left: var(--site-gutter);
padding-right: var(--site-gutter);
margin-inline: auto;
}
/* Prevent a long unbroken heading or embedded element from growing beyond
the common columns and clipping against one viewport edge. */
main, .wrap, .ec-main, .ec-main > *, .hero-content, .ec-hero > * { min-width: 0; }
@media (max-width: 1100px) {
main > .hero { grid-template-columns: 1fr; }
main > .hero .hero-content { padding: 36px 0 30px; }
main > .hero .hero-visual.hero-visual-photo { aspect-ratio: 1672 / 941; }
}
@media (min-width: 651px) and (max-width: 850px) {
main > .ec-hero > div:first-child {padding:34px 28px 34px 22px;}
}
@media (max-width: 650px) {
main > .hero, main > .ec-hero { grid-template-columns: 1fr; }
main > .hero .hero-content {padding: 28px 0 24px;}
main > .hero .major {font-size:clamp(44px, 11vw, 56px);}
main > .ec-hero > div:first-child {padding: 32px 18px;}
main > .ec-hero .image-slot {min-height: 200px;}
.article-wrap {padding-left:var(--site-gutter);padding-right:var(--site-gutter);}
}
/* v0.5.8 — HOME image: show the FULL approved studio & Shonan sea image.
No object-cover cropping: keep the red flower branches, art books,
ocean, laptop, red notebook, while preserving the symmetric page gutters. */
main > .hero .hero-visual.hero-visual-photo {
aspect-ratio: auto !important;
min-height: 0 !important;
height: auto !important;
overflow: visible !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: transparent !important;
}
main > .hero .hero-visual.hero-visual-photo .hero-editorial-photo {
display: block !important;
position: relative !important;
inset: auto !important;
width: 100% !important;
height: auto !important;
min-height: 0 !important;
max-width: 100% !important;
max-height: none !important;
object-fit: contain !important;
object-position: center center !important;
}
@media (max-width: 1100px) {
main > .hero .hero-visual.hero-visual-photo { aspect-ratio: auto !important; }
}
/* v0.5.9 — EC informational page content: same horizontal grid as header,
media kit banner and shared footer. About / Advertising / Media Kit were
not covered by the post-specific .ec-single-article selector. */
body .wp-site-blocks main.article-wrap.ec-static-main,
body main.article-wrap.ec-static-main {
box-sizing: border-box !important;
display: block !important;
width: 100% !important;
max-width: var(--site-max) !important;
margin-left: auto !important;
margin-right: auto !important;
padding: 64px var(--site-gutter) 82px !important;
text-align: left !important;
overflow-wrap: break-word;
}
main.ec-static-main > .eyebrow,
main.ec-static-main > .article-title,
main.ec-static-main > .lead,
main.ec-static-main > p {
margin-left: 0 !important;
margin-right: 0 !important;
text-align: left !important;
}
main.ec-static-main > .lead { max-width: 980px; }
main.ec-static-main > .details { max-width: 980px; }
@media (max-width: 650px) {
body .wp-site-blocks main.article-wrap.ec-static-main,
body main.article-wrap.ec-static-main {
padding-top: 36px !important;
padding-bottom: 52px !important;
padding-left: var(--site-gutter) !important;
padding-right: var(--site-gutter) !important;
}
}
/* v0.5.10 — EC taxonomy and archive listings use the same symmetric
content track as EC informational pages. Previously these routed pages
had only .article-wrap, whose padding was overridden by the WP shell.
This covers MEDIA/BUSINESS/MARKETING, tag listings and year archives. */
body .wp-site-blocks main.article-wrap.ec-listing-main,
body main.article-wrap.ec-listing-main {
box-sizing: border-box !important;
display: block !important;
width: 100% !important;
max-width: var(--site-max) !important;
margin-left: auto !important;
margin-right: auto !important;
padding: 48px var(--site-gutter) 72px !important;
overflow-wrap: anywhere;
text-align: left !important;
}
main.ec-listing-main > .eyebrow,
main.ec-listing-main > .article-title {
margin-left: 0 !important;
margin-right: 0 !important;
text-align: left !important;
}
main.ec-listing-main .latest-articles {
width: 100%;
min-width: 0;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
main.ec-listing-main .latest-articles > .tile { min-width: 0; }
@media (max-width: 650px) {
body .wp-site-blocks main.article-wrap.ec-listing-main,
body main.article-wrap.ec-listing-main {
padding: 34px var(--site-gutter) 50px !important;
}
main.ec-listing-main .latest-articles { grid-template-columns: 1fr; }
}
/* Step 43: genuine editorial work photography. Images are kept intact; only framing and tonality are styled. */
.work-photo-wrap{display:flex;width:100%;height:210px;justify-content:center;align-items:center;background:#f3f1ee;overflow:hidden}
.work-photo{display:block;width:100%;height:100%;object-fit:cover;object-position:center center;filter:grayscale(.8) contrast(1.04);transition:filter .3s ease}
.work-photo[src*="works-collage"]{filter:none}
.work-card:hover .work-photo{filter:none}
main .three .work-photo-wrap{height:205px}
@media(max-width:650px){.work-photo-wrap,main .three .work-photo-wrap{height:190px}}
/* v0.5.12 — real supplied brand logos and paired cover art, no cropping or recoloring. */
.media-logo-frame{width:100%;height:235px;display:flex;align-items:center;justify-content:center;background:#f3f1ee;padding:12px;overflow:hidden}
.media-logo-image{display:block;max-width:100%;width:100%;height:100%;object-fit:contain;object-position:center;filter:none}
.work-photo[src*="publishing-"]{filter:none!important;object-fit:contain!important;object-position:center!important;background:#f3f1ee}
.work-card:hover .work-photo[src*="publishing-"]{filter:none!important}
@media(max-width:650px){.media-logo-frame{height:200px}}
/* v0.5.15 — WORKS asset calibration. All four official media logo placements
share a 780px optical wordmark track (DMM's square mark enlarged).
All three publishing pairs use 626px-high complete cover photos.
Card frames and all other site sections remain unchanged. */
/* v0.5.16 — COMPANY only: editorial client/production credit list */
.company-clients .section-title{font-size:clamp(30px,3.5vw,43px);margin:8px 0 10px}
.company-clients-jp{font-size:clamp(19px,2.2vw,25px);margin:0 0 16px;line-height:1.5}
.company-clients-intro{font-size:15px;color:#5f5f5f;line-height:1.95;margin:0 0 34px;max-width:800px}
.company-clients-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line)}
.company-clients-grid li{min-width:0;overflow-wrap:anywhere;border-bottom:1px solid var(--line);padding:21px 20px 21px 0;font-size:15px;font-weight:600;line-height:1.55}
.company-clients-more{margin-top:30px}
.company-clients-more summary{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;border-bottom:1px solid var(--red);padding:13px 0 13px;cursor:pointer;list-style:none}
.company-clients-more summary::-webkit-details-marker{display:none}
.company-clients-more summary:focus-visible{outline:2px solid var(--red);outline-offset:4px}
.company-clients-toggle{font-size:12px;letter-spacing:.07em;font-weight:800}
.company-clients-plus{color:var(--red);font-size:18px;margin-left:16px}
.company-clients-more[open] .company-clients-plus{display:inline-block;transform:rotate(45deg)}
.company-clients-count{font-size:12px;color:var(--muted)}
.company-clients-extra{margin-top:18px}
.company-clients-note{font-size:12px;color:var(--muted);line-height:1.8;margin:24px 0 0}
@media(max-width:800px){.company-clients-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.company-clients-grid li{font-size:14px;padding:19px 15px 19px 0}}
@media(max-width:390px){.company-clients-grid li{font-size:13px;padding:17px 12px 17px 0}}
/* v0.5.17 — COMPANY compact milestones: one row per year, elegant and scannable.
Preserve all entries, readable fonts and original editorial information. */
.company-history.section {padding-top:64px;padding-bottom:65px}
.company-history .timeline {margin-top:23px;max-width:100%;}
.company-history .timeline-item {
display:grid !important;
grid-template-columns:94px minmax(0, 1fr) !important;
align-items:baseline !important;
column-gap:20px !important;
row-gap:0 !important;
padding:13px 0 !important;
margin:0 !important;
min-height:0 !important;
border-top:1px solid var(--line);
}
.company-history .timeline-item:last-child {border-bottom:1px solid var(--line)}
.company-history .timeline-item > strong {
display:block !important;
margin:0 !important;
padding:0 !important;
line-height:1.5 !important;
font-family:Georgia, 'Times New Roman', serif;
font-size:20px !important;
font-weight:400 !important;
color:var(--red) !important;
}
.company-history .timeline-item > p {
display:block !important;
width:auto !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
padding:0 !important;
font-size:15px !important;
line-height:1.7 !important;
font-weight:400;
overflow-wrap:normal;
word-break:normal;
}
@media(max-width:650px){
.company-history.section{padding-top:42px;padding-bottom:46px}
.company-history .timeline-item{grid-template-columns:64px minmax(0,1fr) !important;column-gap:12px !important;padding:11px 0 !important}
.company-history .timeline-item > strong{font-size:17px !important;line-height:1.65 !important}
.company-history .timeline-item > p{font-size:14px !important;line-height:1.7 !important}
}
/* v0.5.19 — COMPANY history: robust horizontal rows independent of the
legacy .timeline-item styles; readable, reduced scroll length. */
.company-history .mashroom-milestones{width:100%;max-width:100%;margin-top:22px;}
.company-history .mashroom-milestone{box-sizing:border-box;display:flex!important;flex-direction:row!important;align-items:baseline!important;min-width:0!important;width:100%!important;}
.company-history .mashroom-milestone:last-child{border-bottom:1px solid var(--line);}
.company-history .mashroom-milestone-year{font-weight:400;}
.company-history .mashroom-milestone-text{white-space:normal!important;word-break:normal!important;text-wrap:pretty;}
@media(max-width:650px){
.company-history .mashroom-milestone{gap:11px!important;padding:10px 0!important;}
.company-history .mashroom-milestone-year{flex:0 0 60px!important;font-size:17px!important;}
.company-history .mashroom-milestone-text{font-size:14px!important;line-height:1.7!important;}
}
/* v0.5.20 — Editor's Choice hero becomes an elegant, automatically updated
six-story editorial grid. Scoped to the Editor's Choice top only. */
main > .ec-hero { min-height: 0; align-items:stretch; }
main > .ec-hero > div:first-child { min-height: 380px; }
main > .ec-hero > .ec-hero-latest {
min-height:380px;
padding:24px;
background:#f5f2ee;
display:flex;
flex-direction:column;
gap:14px;
}
.ec-hero-latest-head {display:flex;justify-content:space-between;align-items:center;gap:10px;padding-bottom:8px;border-bottom:1px solid #d9d4cf;font-size:10px;line-height:1.5;font-weight:800;letter-spacing:.15em;color:var(--red);}
.ec-hero-latest-count {color:#877f79;font-weight:500;letter-spacing:.12em;white-space:nowrap;}
.ec-hero-latest-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 12px;align-content:start;min-width:0;}
.ec-hero-latest-count-1 {grid-template-columns:minmax(0,1fr);max-width:220px;}
.ec-hero-latest-count-2 {grid-template-columns:repeat(2,minmax(0,1fr));}
.ec-hero-story {display:flex;flex-direction:column;min-width:0;color:var(--ink);text-decoration:none;}
.ec-hero-story-image {display:flex;align-items:center;justify-content:center;height:auto;aspect-ratio:1.58;background:#e9e4de;border:1px solid #e7e0d9;overflow:hidden;}
.ec-hero-story-image img {display:block;width:100%;height:100%;object-fit:contain;object-position:center;transition:transform .22s ease;}
.ec-hero-story:hover .ec-hero-story-image img {transform:scale(1.035);}
.ec-hero-story-noimage {color:#a39b94;font-family:Georgia,serif;font-size:11px;text-align:center;letter-spacing:.08em;}
.ec-hero-story-copy {display:flex;flex-direction:column;gap:3px;padding:8px 1px 0;min-width:0;}
.ec-hero-story-category {font-size:9px;font-weight:800;letter-spacing:.1em;color:var(--red);line-height:1.4;}
.ec-hero-story-title {font-size:12px;line-height:1.5;font-weight:650;letter-spacing:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;min-height:2.9em;}
.ec-hero-story-date {font-size:10px;color:#877e78;line-height:1.4;}
.ec-hero-latest-empty {font-size:13px;color:var(--muted);margin:auto;text-align:center;}
@media(max-width:1100px) {
main > .ec-hero > .ec-hero-latest {padding:18px;}
.ec-hero-latest-grid {gap:12px 8px;}
}
@media(max-width:650px) {
main > .ec-hero > div:first-child {min-height:0;}
main > .ec-hero > .ec-hero-latest {min-height:0;padding:22px 18px 25px;gap:13px;}
.ec-hero-latest-grid, .ec-hero-latest-count-2 {grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 12px;}
.ec-hero-latest-count-1 {grid-template-columns:minmax(0,1fr);max-width:200px;}
.ec-hero-story-title {font-size:12px;}
}
/* v0.5.21 — unified, light editorial masthead, TOPICS integrated into the
same surface as the intro and auto-updating six-story grid. Only EC top. */
main > .ec-hero.ec-hero-integrated {
display:grid; grid-template-columns:minmax(0,.83fr) minmax(0,1.17fr);
align-items:start; min-height:0; background:#fbfaf8;
column-gap:clamp(22px,3.3vw,48px); row-gap:0;
border-bottom:1px solid var(--line);
padding:30px 0 18px;
}
main > .ec-hero.ec-hero-integrated > .ec-hero-intro {
min-height:0; padding:32px 12px 16px 0;
display:flex;flex-direction:column;justify-content:flex-start;
}
main > .ec-hero.ec-hero-integrated .ec-hero-intro h1 {
font-size:clamp(27px,2.55vw,38px);font-weight:620;
line-height:1.45;letter-spacing:.017em;margin:12px 0 15px;
}
main > .ec-hero.ec-hero-integrated .ec-intro {font-size:13px;line-height:1.9;max-width:450px;margin:0;}
main > .ec-hero.ec-hero-integrated > .ec-hero-latest {
min-width:0;min-height:0;background:transparent;
padding:4px 0 12px;gap:12px;
}
main > .ec-hero.ec-hero-integrated .ec-hero-latest-head {border-bottom-color:#dedad5;padding-bottom:7px;}
main > .ec-hero.ec-hero-integrated .ec-hero-latest-grid {grid-template-columns:repeat(3,minmax(0,1fr));gap:13px 11px;}
main > .ec-hero.ec-hero-integrated .ec-hero-story-image {aspect-ratio:1.75;background:#f1efec;border-color:#e9e6e2;}
main > .ec-hero.ec-hero-integrated .ec-hero-story-copy {padding:6px 0 0;gap:2px;}
main > .ec-hero.ec-hero-integrated .ec-hero-story-category {font-size:8px;}
main > .ec-hero.ec-hero-integrated .ec-hero-story-title {font-size:11px;line-height:1.48;min-height:2.95em;}
main > .ec-hero.ec-hero-integrated .ec-hero-story-date {font-size:9px;}
main > .ec-hero.ec-hero-integrated > .ec-hero-topics {
grid-column:1/-1;min-width:0;margin-top:12px;
padding:14px 0 0;border-top:1px solid #e4dfda;
}
main > .ec-hero.ec-hero-integrated .ec-hero-topics .topics-heading strong {font-size:10px;color:#272525;}
main > .ec-hero.ec-hero-integrated .ec-hero-topics .topics-heading span {font-size:10px;}
main > .ec-hero.ec-hero-integrated .ec-hero-topics .typocloud {
justify-content:space-between;gap:8px 15px;padding:12px 8px 4px;
}
main > .ec-hero.ec-hero-integrated .ec-hero-topics .typocloud .big {font-size:clamp(22px,2.5vw,31px);}
main > .ec-hero.ec-hero-integrated .ec-hero-topics .typocloud .medium {font-size:clamp(16px,2vw,22px);}
main > .ec-hero.ec-hero-integrated .ec-hero-topics .typocloud .small {font-size:clamp(12px,1.3vw,16px);}
@media (max-width:850px) {
main > .ec-hero.ec-hero-integrated {grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);column-gap:20px;padding-top:22px;}
main > .ec-hero.ec-hero-integrated > .ec-hero-intro {padding:15px 0 12px;}
main > .ec-hero.ec-hero-integrated .ec-hero-intro h1 {font-size:clamp(24px,3vw,31px);}
main > .ec-hero.ec-hero-integrated .ec-intro {font-size:12px;}
main > .ec-hero.ec-hero-integrated .ec-hero-story-title {font-size:10px;}
}
@media (max-width:650px) {
main > .ec-hero.ec-hero-integrated {grid-template-columns:1fr;row-gap:8px;padding:20px 0 15px;}
main > .ec-hero.ec-hero-integrated > .ec-hero-intro {padding:0 0 10px;}
main > .ec-hero.ec-hero-integrated .ec-hero-intro h1 {font-size:clamp(25px,6.3vw,30px);margin:9px 0 11px;}
main > .ec-hero.ec-hero-integrated .ec-intro {font-size:12px;}
main > .ec-hero.ec-hero-integrated > .ec-hero-latest {padding:5px 0 8px;}
main > .ec-hero.ec-hero-integrated .ec-hero-latest-grid,
main > .ec-hero.ec-hero-integrated .ec-hero-latest-count-2 {grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 10px;}
main > .ec-hero.ec-hero-integrated .ec-hero-story-title {font-size:11px;}
main > .ec-hero.ec-hero-integrated > .ec-hero-topics {margin-top:6px;padding-top:12px;}
main > .ec-hero.ec-hero-integrated .ec-hero-topics .typocloud {justify-content:center;gap:9px 13px;padding:12px 0 0;}
main > .ec-hero.ec-hero-integrated .ec-hero-topics .typocloud .big {font-size:24px;}
main > .ec-hero.ec-hero-integrated .ec-hero-topics .typocloud .medium {font-size:17px;}
main > .ec-hero.ec-hero-integrated .ec-hero-topics .typocloud .small {font-size:12px;}
}
/* TOPICS becomes an integral, editorial typographic area underneath the
masthead copy: two aligned columns, no additional full-width strip. */
main > .ec-hero.ec-hero-integrated > .ec-hero-intro {padding-top:30px;padding-bottom:15px;}
main > .ec-hero.ec-hero-integrated .ec-hero-intro > .ec-hero-topics {
grid-column:auto; min-width:0; margin-top:40px;padding-top:17px;
border-top:1px solid #e4dfda;
}
main > .ec-hero.ec-hero-integrated .ec-hero-intro .typocloud {
justify-content:flex-start;gap:12px 19px;padding:14px 0 4px;
}
main > .ec-hero.ec-hero-integrated .ec-hero-intro .typocloud .big {font-size:clamp(23px,2.8vw,34px);}
main > .ec-hero.ec-hero-integrated .ec-hero-intro .typocloud .medium {font-size:clamp(17px,2vw,23px);}
main > .ec-hero.ec-hero-integrated .ec-hero-intro .typocloud .small {font-size:clamp(12px,1.3vw,16px);}
@media(max-width:850px) {
main > .ec-hero.ec-hero-integrated .ec-hero-intro > .ec-hero-topics {margin-top:22px;padding-top:12px;}
main > .ec-hero.ec-hero-integrated .ec-hero-intro .typocloud {gap:10px 14px;}
}
@media(max-width:650px) {
main > .ec-hero.ec-hero-integrated .ec-hero-intro > .ec-hero-topics {margin-top:20px;padding-top:12px;}
main > .ec-hero.ec-hero-integrated .ec-hero-intro .typocloud {justify-content:flex-start;gap:9px 14px;}
main > .ec-hero.ec-hero-integrated .ec-hero-intro h1 br {display:none;}
}
/* 0.5.22 — lean Editor's Choice first view; keep the six story grid 3×2.
Specifically override inherited min-height 380px and oversized left padding. */
@media(min-width:651px){
main > .ec-hero.ec-hero-integrated {
grid-template-columns:minmax(0, 39%) minmax(0,61%);
column-gap:0; padding:16px 0 14px; min-height:0;
background:transparent;align-items:start;
}
main > .ec-hero.ec-hero-integrated > .ec-hero-intro {
min-height:0; padding:10px 25px 4px 0;justify-content:start;
}
main > .ec-hero.ec-hero-integrated .ec-hero-intro h1 {
font-size:clamp(25px,2.18vw,32px);line-height:1.48;
letter-spacing:0;margin:8px 0 9px;font-weight:650;
}
main > .ec-hero.ec-hero-integrated .ec-intro {
font-size:11px;line-height:1.6;max-width:none;margin:0;
}
main > .ec-hero.ec-hero-integrated .ec-hero-intro > .ec-hero-topics {
margin-top:18px;padding-top:10px;border-top:1px solid #e4dfda;
}
main > .ec-hero.ec-hero-integrated .ec-hero-intro .typocloud {
justify-content:flex-start;gap:7px 13px;padding:8px 0 0;
}
main > .ec-hero.ec-hero-integrated .ec-hero-intro .typocloud .big {font-size:clamp(19px,1.95vw,28px);}
main > .ec-hero.ec-hero-integrated .ec-hero-intro .typocloud .medium {font-size:clamp(15px,1.45vw,20px);}
main > .ec-hero.ec-hero-integrated .ec-hero-intro .typocloud .small {font-size:clamp(11px,1.05vw,14px);}
main > .ec-hero.ec-hero-integrated > .ec-hero-latest {
min-height:0; padding:0 0 0 18px; gap:8px;
}
main > .ec-hero.ec-hero-integrated .ec-hero-latest-grid {gap:11px 11px;}
main > .ec-hero.ec-hero-integrated .ec-hero-story-image {aspect-ratio:2.12;}
main > .ec-hero.ec-hero-integrated .ec-hero-story-copy {padding-top:4px;gap:1px;}
main > .ec-hero.ec-hero-integrated .ec-hero-story-title {font-size:10.5px;line-height:1.43;}
main > .ec-hero.ec-hero-integrated .ec-hero-story-category {font-size:8px;}
main > .ec-hero.ec-hero-integrated .ec-hero-story-date {font-size:8.5px;}
main > .ec-hero.ec-hero-integrated .ec-hero-latest-head {padding-bottom:6px;}
}
@media(min-width:651px) and (max-width:950px){
main > .ec-hero.ec-hero-integrated {grid-template-columns:minmax(0,41%) minmax(0,59%);}
main > .ec-hero.ec-hero-integrated .ec-hero-intro h1 {font-size:clamp(23px,2.7vw,27px);}
main > .ec-hero.ec-hero-integrated > .ec-hero-intro {padding-right:14px;}
main > .ec-hero.ec-hero-integrated > .ec-hero-latest {padding-left:12px;}
}
@media(max-width:650px){
main > .ec-hero.ec-hero-integrated {background:transparent;padding:13px 0 15px;gap:3px;}
main > .ec-hero.ec-hero-integrated > .ec-hero-intro {padding:0 0 8px;min-height:0;}
main > .ec-hero.ec-hero-integrated .ec-hero-intro h1 {font-size:clamp(22px,5.8vw,28px);line-height:1.5;margin:6px 0 7px;}
main > .ec-hero.ec-hero-integrated .ec-intro {font-size:11px;line-height:1.6;}
main > .ec-hero.ec-hero-integrated .ec-hero-intro > .ec-hero-topics {margin-top:11px;padding-top:9px;}
main > .ec-hero.ec-hero-integrated .ec-hero-intro .typocloud {gap:7px 11px;padding-top:8px;}
main > .ec-hero.ec-hero-integrated .ec-hero-intro .typocloud .big {font-size:22px;}
main > .ec-hero.ec-hero-integrated .ec-hero-intro .typocloud .medium {font-size:16px;}
main > .ec-hero.ec-hero-integrated .ec-hero-intro .typocloud .small {font-size:12px;}
main > .ec-hero.ec-hero-integrated > .ec-hero-latest {min-height:0;padding:8px 0 4px;gap:8px;}
main > .ec-hero.ec-hero-integrated .ec-hero-story-image {aspect-ratio:1.8;}
}
/* 0.5.24: EC homepage structural overhaul. No inherited fixed-height hero.
One compact masthead, one typographic topics ribbon, then horizontal news cards.
These apply ONLY to .ec-hero-rebuilt; all other page layouts are untouched. */
.ec-hero.ec-hero-rebuilt {
display:block; min-height:0; height:auto;
background:transparent;
padding:20px 0 23px;
border-bottom:1px solid var(--line);
margin-top:0; margin-bottom:0;
}
.ec-hero.ec-hero-rebuilt > .ec-rebuilt-masthead {
display:flex; align-items:baseline; gap:22px;
padding:0 0 12px; min-height:0;
width:100%; background:transparent;
}
.ec-hero.ec-hero-rebuilt .ec-rebuilt-masthead > .eyebrow {
flex:0 0 auto; font-size:10px; letter-spacing:.1em; color:var(--red);
}
.ec-hero.ec-hero-rebuilt .ec-rebuilt-masthead h1 {
font-size:clamp(19px,2.15vw,29px); font-weight:600;
line-height:1.38; letter-spacing:.005em;
margin:0; min-width:0; text-wrap:balance;
}
.ec-hero.ec-hero-rebuilt > .ec-rebuilt-topics {
border-top:1px solid var(--line); border-bottom:1px solid var(--line);
padding:7px 0 8px; min-width:0;
}
.ec-hero.ec-hero-rebuilt .ec-rebuilt-topics .topics-heading {
display:none;
}
.ec-hero.ec-hero-rebuilt .ec-rebuilt-topics .typocloud {
justify-content:space-between; flex-wrap:wrap; align-items:center;
gap:5px 16px; padding:0; margin:0; line-height:1.25;
}
.ec-hero.ec-hero-rebuilt .ec-rebuilt-topics .typocloud .big {font-size:clamp(21px,2.15vw,27px);}
.ec-hero.ec-hero-rebuilt .ec-rebuilt-topics .typocloud .medium {font-size:clamp(15px,1.56vw,19px);}
.ec-hero.ec-hero-rebuilt .ec-rebuilt-topics .typocloud .small {font-size:clamp(12px,1.1vw,14px);}
.ec-hero.ec-hero-rebuilt > .ec-hero-latest {
display:block; min-height:0; padding:13px 0 0; background:transparent; gap:0;
}
.ec-hero.ec-hero-rebuilt .ec-hero-latest-head {
padding-bottom:8px; border:0; font-size:9px;
}
.ec-hero.ec-hero-rebuilt .ec-hero-latest-grid,
.ec-hero.ec-hero-rebuilt .ec-hero-latest-grid.ec-hero-latest-count-1,
.ec-hero.ec-hero-rebuilt .ec-hero-latest-grid.ec-hero-latest-count-2 {
display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
max-width:none; gap:0 22px; align-content:start;
}
.ec-hero.ec-hero-rebuilt .ec-hero-story {
display:grid; grid-template-columns:90px minmax(0,1fr);
align-items:center; gap:10px; padding:10px 0;
border-top:1px solid #e7e1dc; min-width:0;
}
.ec-hero.ec-hero-rebuilt .ec-hero-story-image {
display:flex; width:90px; height:76px; aspect-ratio:auto;
background:#f2efec; border:0; overflow:hidden; justify-content:center;align-items:center;
}
.ec-hero.ec-hero-rebuilt .ec-hero-story-image img {
max-width:100%; max-height:100%; object-fit:contain; width:100%;height:100%;
}
.ec-hero.ec-hero-rebuilt .ec-hero-story-copy {
padding:0; gap:2px; align-self:start; min-width:0;
}
.ec-hero.ec-hero-rebuilt .ec-hero-story-category {font-size:9px;line-height:1.25;}
.ec-hero.ec-hero-rebuilt .ec-hero-story-title {
font-size:11px; line-height:1.44;min-height:0; font-weight:650;
-webkit-line-clamp:3;
}
.ec-hero.ec-hero-rebuilt .ec-hero-story-date {font-size:9px; line-height:1.25;}
@media (max-width:1050px) {
.ec-hero.ec-hero-rebuilt > .ec-rebuilt-masthead {gap:12px;}
.ec-hero.ec-hero-rebuilt .ec-rebuilt-masthead h1 {font-size:clamp(18px,2.05vw,24px);}
.ec-hero.ec-hero-rebuilt .ec-rebuilt-masthead > .eyebrow {font-size:9px;}
.ec-hero.ec-hero-rebuilt .ec-hero-latest-grid,
.ec-hero.ec-hero-rebuilt .ec-hero-latest-grid.ec-hero-latest-count-2,
.ec-hero.ec-hero-rebuilt .ec-hero-latest-grid.ec-hero-latest-count-1 {gap:0 14px;}
.ec-hero.ec-hero-rebuilt .ec-hero-story {grid-template-columns:78px minmax(0,1fr);gap:8px;}
.ec-hero.ec-hero-rebuilt .ec-hero-story-image {width:78px;height:72px;}
}
@media (max-width:700px) {
.ec-hero.ec-hero-rebuilt {padding:15px 0 20px;}
.ec-hero.ec-hero-rebuilt > .ec-rebuilt-masthead {
display:block; padding:0 0 10px;
}
.ec-hero.ec-hero-rebuilt .ec-rebuilt-masthead h1 {font-size:clamp(19px,4.55vw,24px);margin:5px 0 0;line-height:1.43;}
.ec-hero.ec-hero-rebuilt .ec-rebuilt-topics .typocloud {justify-content:flex-start;gap:7px 14px;}
.ec-hero.ec-hero-rebuilt .ec-rebuilt-topics .typocloud .big {font-size:22px;}
.ec-hero.ec-hero-rebuilt .ec-rebuilt-topics .typocloud .medium {font-size:16px;}
.ec-hero.ec-hero-rebuilt .ec-rebuilt-topics .typocloud .small {font-size:12px;}
.ec-hero.ec-hero-rebuilt .ec-hero-latest-grid,
.ec-hero.ec-hero-rebuilt .ec-hero-latest-grid.ec-hero-latest-count-2,
.ec-hero.ec-hero-rebuilt .ec-hero-latest-grid.ec-hero-latest-count-1 {grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px;}
.ec-hero.ec-hero-rebuilt .ec-hero-story {grid-template-columns:1fr;align-items:start;gap:5px;padding:9px 0;}
.ec-hero.ec-hero-rebuilt .ec-hero-story-image {width:100%;height:100px;}
.ec-hero.ec-hero-rebuilt .ec-hero-story-copy {gap:2px;}
.ec-hero.ec-hero-rebuilt .ec-hero-story-title {font-size:11px;}
}
/* v0.5.25: Editor's Choice homepage ONLY.
Restore the TOPICS label and reduce the empty gap above FEATURED.
Keep archive, company and article templates unchanged. */
.ec-hero.ec-hero-rebuilt .ec-rebuilt-topics .topics-heading {
display:flex;
justify-content:space-between;
align-items:baseline;
gap:12px;
padding:0 0 4px;
line-height:1.4;
}
.ec-hero.ec-hero-rebuilt .ec-rebuilt-topics .topics-heading strong {
color:var(--red);
font-size:10px;
font-weight:800;
letter-spacing:.16em;
}
.ec-hero.ec-hero-rebuilt .ec-rebuilt-topics .topics-heading span {
color:#888;
font-size:10px;
}
main > .ec-hero.ec-hero-rebuilt + section.section {
padding-top:30px;
}
@media(max-width:650px) {
main > .ec-hero.ec-hero-rebuilt + section.section {
padding-top:25px;
}
}
/* v0.5.26 — latest stories precede TOPICS; Editor's Choice home only.
Leave other pages and card presentation intact. */
.ec-hero.ec-hero-rebuilt > .ec-hero-latest {
padding:10px 0 9px;
}
.ec-hero.ec-hero-rebuilt > .ec-rebuilt-topics {
border-top:1px solid var(--line);
border-bottom:0;
padding:9px 0 2px;
}
@media(max-width:700px) {
.ec-hero.ec-hero-rebuilt > .ec-hero-latest {padding:8px 0 7px;}
.ec-hero.ec-hero-rebuilt > .ec-rebuilt-topics {padding:8px 0 2px;}
}
/* v0.5.27 STEP 55 — Editor's Choice: honest, concise advertising inquiry */
.ec-ad-main{max-width:var(--site-max)!important}
.ec-ad-main .article-title{font-size:clamp(34px,4.2vw,58px);line-height:1.18;letter-spacing:-.035em;margin:12px 0 20px}
.ec-ad-lede{font-size:clamp(19px,2.3vw,27px);font-weight:600;line-height:1.55;letter-spacing:.015em;max-width:900px;margin:10px 0 16px!important}
.ec-ad-intro{color:#595653;font-size:15px;line-height:1.95;max-width:810px;margin:0!important}
.ec-ad-section{margin-top:54px}
.ec-ad-section-kicker{font-size:11px;color:var(--red);font-weight:800;letter-spacing:.14em}
.ec-ad-section h2{font-size:clamp(21px,2.3vw,29px);font-weight:650;line-height:1.4;margin:8px 0 24px}
.ec-ad-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.ec-ad-option{padding:23px 22px 25px;background:#f5f3f1;border-top:2px solid #d2c9c4;min-width:0}
.ec-ad-option-no{color:var(--red);font-size:17px;font-family:Georgia,serif}
.ec-ad-option h3{font-size:17px;line-height:1.55;margin:12px 0 11px}
.ec-ad-option p,.ec-ad-steps p{font-size:14px;line-height:1.8;color:#555;margin:0}
.ec-ad-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}
.ec-ad-steps>div{border-top:1px solid #cfc8c3;padding-top:15px}
.ec-ad-steps span{font-size:10px;letter-spacing:.1em;color:var(--red);font-weight:750}
.ec-ad-steps p{margin-top:8px}
.ec-ad-caveat{font-size:12px;color:#6a6562;line-height:1.85;margin-top:19px!important}
.ec-ad-contact{background:#b90918;color:#fff;padding:27px 30px;display:flex;align-items:center;justify-content:space-between;gap:26px;margin-top:46px}
.ec-ad-contact .ec-ad-section-kicker{color:#fff}
.ec-ad-contact h2{font-size:clamp(19px,2.2vw,27px);margin:7px 0 5px;line-height:1.4}
.ec-ad-contact p{font-size:13px;margin:0;line-height:1.7}
.ec-ad-primary{display:flex;align-items:center;gap:22px;border:1px solid white;color:white!important;padding:14px 18px;white-space:nowrap;font-size:13px;font-weight:700}
.ec-ad-primary:hover{background:white;color:#b90918!important}
.ec-ad-back{margin:28px 0 0!important}
.ec-kit-facts{display:grid;grid-template-columns:1fr;max-width:890px;margin-top:34px;border-top:1px solid var(--line)}
.ec-kit-facts>div{display:grid;grid-template-columns:155px 1fr;gap:15px;border-bottom:1px solid var(--line);padding:13px 0}
.ec-kit-facts strong{font-size:11px;letter-spacing:.1em;color:var(--red)}
.ec-kit-facts span{font-size:14px}
@media(max-width:700px){
.ec-ad-pc{display:none}
.ec-ad-grid{grid-template-columns:1fr;gap:8px}
.ec-ad-option{padding:16px 17px}
.ec-ad-option h3{margin:4px 0 6px}
.ec-ad-steps{grid-template-columns:1fr;gap:15px}
.ec-ad-section{margin-top:37px}
.ec-ad-contact{display:block;padding:24px 20px}
.ec-ad-primary{margin-top:18px;justify-content:space-between;white-space:normal}
.ec-kit-facts>div{grid-template-columns:1fr;gap:5px}
}
/* v0.5.28 — one navigational rhythm on both editorial properties.
Identical header height, navigation typography, spacing and right-hand grid track;
masthead styles remain distinct, by design. */
.site-header .header-inner{
display:grid; grid-template-columns:minmax(0,260px) minmax(0,1fr) 64px;
align-items:center; column-gap:18px; row-gap:0;
min-height:92px; padding-top:12px; padding-bottom:12px;
flex-wrap:initial;
}
.site-header .header-inner > .brand{grid-column:1;grid-row:1;justify-self:start;align-self:center;}
.site-header .header-inner > .nav{
grid-column:2;grid-row:1;justify-self:end;
display:flex;align-items:center;justify-content:flex-end;
flex-wrap:nowrap;column-gap:clamp(12px,1.55vw,24px);row-gap:0;
margin:0;padding:0;
}
.site-header .header-inner > .nav a{
display:inline-flex;align-items:center;min-height:28px;
font-size:12px;font-weight:700;letter-spacing:.075em;line-height:1.25;
white-space:nowrap;
}
.site-header .header-inner > .switch{grid-column:3;grid-row:1;justify-self:end;font-size:12px;letter-spacing:.03em;line-height:1.25;}
.site-header .header-switch-placeholder{visibility:hidden;pointer-events:none;}
.site-header .brand:not(.editor){font-size:30px;line-height:1.1;letter-spacing:-1.55px;}
.site-header .brand.editor{font-size:37px;line-height:.89;letter-spacing:-1.45px;}
.site-header .brand-editor-sub{font-size:12px;line-height:1.1;margin-top:5px;}
@media(max-width:1120px) and (min-width:961px){
.site-header .header-inner{grid-template-columns:minmax(0,215px) minmax(0,1fr) 52px;column-gap:10px;}
.site-header .header-inner > .nav{column-gap:12px;}
.site-header .header-inner > .nav a{font-size:10.5px;letter-spacing:.04em;}
.site-header .brand.editor{font-size:32px;}
.site-header .brand:not(.editor){font-size:27px;}
}
@media(max-width:960px){
.site-header .header-inner{grid-template-columns:minmax(0,1fr) 68px;grid-template-rows:auto auto;
min-height:106px;row-gap:9px;column-gap:10px;padding-top:11px;padding-bottom:10px;}
.site-header .header-inner > .brand{grid-column:1;grid-row:1;}
.site-header .header-inner > .switch{grid-column:2;grid-row:1;}
.site-header .header-inner > .nav{grid-column:1 / -1;grid-row:2;justify-self:stretch;
justify-content:center;column-gap:clamp(8px,1.8vw,17px);row-gap:6px;flex-wrap:wrap;}
.site-header .header-inner > .nav a{font-size:11px;min-height:20px;letter-spacing:.04em;}
.site-header .brand.editor{font-size:31px;}
.site-header .brand:not(.editor){font-size:27px;}
}
@media(max-width:650px){
.site-header .header-inner{min-height:102px;padding:10px 20px 9px;row-gap:7px;}
.site-header .brand.editor{font-size:27px;}
.site-header .brand-editor-sub{font-size:10px;margin-top:3px;}
.site-header .brand:not(.editor){font-size:26px;}
.site-header .header-inner > .nav{column-gap:clamp(7px,2vw,12px);row-gap:3px;}
.site-header .header-inner > .nav a{font-size:10px;min-height:18px;letter-spacing:.025em;}
}
/* Transparent PR-post rate: same base fee as NV's ¥33,000-tax-included plan. */
.ec-ad-rate{display:flex;justify-content:space-between;align-items:center;gap:30px;
margin-top:30px;padding:26px 28px;background:#f4f1ed;border-left:3px solid var(--red);}
.ec-ad-rate h2{font-size:20px;line-height:1.45;margin:6px 0 5px;font-weight:700;}
.ec-ad-rate p{margin:0;font-size:13px;line-height:1.75;color:#595653;}
.ec-ad-rate-price{flex:0 0 auto;font-family:Georgia,serif;font-size:35px;line-height:1.18;color:var(--red);white-space:nowrap;}
.ec-ad-rate-price small{display:block;font-family:inherit;text-align:right;font-size:12px;color:#625b55;margin-top:8px;}
.ec-ad-terms{margin:17px 0 0;padding-left:20px;color:#615b57;font-size:13px;line-height:1.95;}
.ec-ad-terms li{margin:3px 0;}
@media(max-width:700px){
.ec-ad-rate{display:block;padding:21px 20px;margin-top:24px;}
.ec-ad-rate-price{font-size:30px;margin-top:13px;}
.ec-ad-rate-price small{text-align:left;}
}
/* Lock mobile nav baselines to the same row even if menu text differs. */
@media(max-width:960px){
.site-header .header-inner{grid-template-rows:48px minmax(24px,auto);}
.site-header .header-inner > .nav{align-self:start;}
}
@media(max-width:650px){
.site-header .header-inner{grid-template-rows:44px minmax(28px,auto);}
.site-header .header-inner > .nav{column-gap:6.5px;}
.site-header .header-inner > .nav a{font-size:9.5px;letter-spacing:0;}
}
@media(max-width:375px){
.site-header .header-inner > .nav{column-gap:5px;}
.site-header .header-inner > .nav a{font-size:8.9px;}
}
/* v0.5.29 — Rebuild the cross-site masthead as a true two-track layout.
This replaces v0.5.28 three-track grid and avoids logo wraps + orphaned JP/EN.
Both site brands are inline, with equal top bar height, navigation type + spacing. */
.site-header .header-inner {
display:grid; grid-template-columns:minmax(248px,auto) minmax(0,1fr);
grid-template-rows:1fr; min-height:88px;
align-items:center; column-gap:clamp(14px,2.2vw,36px);row-gap:0;
padding-block:12px; flex-wrap:nowrap;
}
.site-header .header-inner > .brand,
.site-header .header-inner > .brand.editor {
grid-column:1;grid-row:1;justify-self:start;align-self:center;
white-space:nowrap;overflow:visible;width:max-content;max-width:none;
}
.site-header .brand.editor {font-family:Georgia,'Times New Roman',serif;font-size:34px;line-height:1;letter-spacing:-1.6px;}
.site-header .brand:not(.editor) {font-size:30px;line-height:1.08;letter-spacing:-1.5px;}
.site-header .brand-editor-sub {display:block;white-space:nowrap;font-size:11px;line-height:1.12;margin-top:4px;letter-spacing:0;}
.site-header .header-inner > .nav {
grid-column:2;grid-row:1;justify-self:end;align-self:center;
display:flex;flex-wrap:nowrap;align-items:center;justify-content:flex-end;
column-gap:clamp(10px,1.5vw,23px);row-gap:0;width:max-content;max-width:100%;
margin:0;padding:0;
}
.site-header .header-inner > .nav a{font-size:11px;font-weight:700;letter-spacing:.065em;min-height:24px;line-height:1.2;white-space:nowrap;}
.site-header .nav-language {display:inline-flex;align-items:center;gap:5px;white-space:nowrap;margin-left:10px;color:#777;}
.site-header .nav-language a,.site-header .nav-language span{font-size:11px;letter-spacing:0;font-weight:500;color:#777;}
.site-header .nav-language a:hover{color:var(--red)}
/* Some older pages still contain the old switch markup; keep it in the grid, never new-row. */
.site-header .header-inner > .switch{grid-column:2;grid-row:1;justify-self:end;}
@media (max-width:1180px) and (min-width:981px){
.site-header .header-inner{grid-template-columns:minmax(205px,auto) minmax(0,1fr);column-gap:12px;}
.site-header .brand.editor{font-size:30px;}
.site-header .brand:not(.editor){font-size:27px;}
.site-header .header-inner > .nav{column-gap:11px;}
.site-header .header-inner > .nav a{font-size:10px;letter-spacing:.035em;}
.site-header .nav-language{margin-left:1px;gap:3px;}
}
@media (max-width:980px){
.site-header .header-inner{
grid-template-columns:minmax(0,1fr);grid-template-rows:47px auto;
padding-block:10px 12px;row-gap:6px;min-height:114px;
}
.site-header .header-inner > .brand,.site-header .header-inner > .brand.editor{grid-column:1;grid-row:1;}
.site-header .header-inner > .nav{grid-column:1;grid-row:2;justify-self:start;align-self:start;justify-content:flex-start;
width:100%;max-width:100%;flex-wrap:wrap;column-gap:clamp(10px,2vw,20px);row-gap:3px;}
.site-header .header-inner > .nav a{font-size:11px;min-height:20px;letter-spacing:.025em;}
.site-header .brand.editor{font-size:30px;}
.site-header .brand:not(.editor){font-size:27px;}
}
@media (max-width:650px){
.site-header .header-inner{min-height:114px;grid-template-rows:43px auto;padding:10px 20px 11px;row-gap:8px;}
.site-header .brand.editor{font-size:26px;}
.site-header .brand:not(.editor){font-size:25px;}
.site-header .brand-editor-sub{font-size:10px;margin-top:3px;}
.site-header .header-inner > .nav{column-gap:clamp(8px,2.2vw,13px);row-gap:4px;}
.site-header .header-inner > .nav a,.site-header .nav-language a,.site-header .nav-language span{font-size:10px;min-height:18px;letter-spacing:0;}
.site-header .nav-language{margin-left:1px;}
}
@media(max-width:390px){.site-header .header-inner > .nav{column-gap:9px;row-gap:3px}.site-header .header-inner > .nav a,.site-header .nav-language a{font-size:9.5px;}}
/* v0.5.29 — Corporate homepage work portfolio: three actual complete cases,
never stagger individual picture and body across separate grid cells. */
.home-selected-works{padding-block:67px 75px;}
.home-works-heading{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:24px;}
.home-works-heading .section-title{margin-bottom:0;}
.home-works-all{white-space:nowrap;flex:0 0 auto;}
.home-works-grid{
display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;
gap:clamp(16px,2vw,26px)!important;align-items:stretch;grid-auto-flow:row;
}
.home-works-grid > .home-work-card{
display:flex!important;flex-direction:column!important;align-items:stretch!important;
min-width:0!important;width:100%!important;height:100%;grid-column:auto!important;
background:#fff;border:1px solid var(--line);overflow:hidden;box-sizing:border-box;
transition:transform .2s ease,border-color .2s ease;
}
.home-work-card:hover{border-color:#c3b4b0;transform:translateY(-2px);color:inherit;}
.home-work-media{display:flex;align-items:center;justify-content:center;flex:0 0 auto;
width:100%;height:clamp(170px,16vw,235px);background:#f0eeeb;overflow:hidden;}
.home-work-media img{display:block;width:100%;height:100%;min-width:0;object-fit:cover;object-position:center;filter:none;}
.home-work-media--logo img{object-fit:contain!important;width:75%;height:75%;mix-blend-mode:multiply;}
.home-work-media--books img{object-fit:cover;filter:grayscale(1) contrast(1.035);}
.home-work-media--editorial img{object-fit:cover;}
.home-work-copy{display:flex!important;flex-direction:column;align-items:start;gap:5px;
flex:1;min-height:123px;padding:19px 21px 20px;background:#fff;}
.home-work-index{font-size:10px;font-weight:800;letter-spacing:.14em;color:var(--red);line-height:1.5;}
.home-work-copy strong{font-family:Georgia,'Times New Roman',serif;font-size:20px;line-height:1.35;color:#1c1c1c;}
.home-work-desc{font-size:13px;line-height:1.6;color:#666;}
@media(max-width:850px){.home-works-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.home-work-media{height:210px;}}
@media(max-width:650px){.home-selected-works{padding-block:45px 55px}.home-works-heading{align-items:start;flex-wrap:wrap;gap:10px}.home-works-grid{grid-template-columns:1fr!important;gap:14px!important}.home-work-media{height:205px}.home-work-copy{min-height:unset;padding:16px 18px 17px}.home-work-copy strong{font-size:19px}}
/* v0.5.30 — BRAND / NAVIGATION: identical optical top positions, height and nav metrics.
Georgia is retained on Editor's Choice as its approved media masthead style;
optical scale and red colour now harmonize with the corporate sans logo. */
.site-header .header-inner{
display:grid!important;grid-template-columns:minmax(205px,1fr) max-content!important;
grid-template-rows:80px!important;align-items:start!important;
min-height:80px!important;height:80px!important;
column-gap:20px!important;row-gap:0!important;
padding:0 34px!important;max-width:var(--max)!important;
}
.site-header .header-inner > .brand,
.site-header .header-inner > .brand.editor{
grid-column:1!important;grid-row:1!important;align-self:start!important;
justify-self:start!important;white-space:nowrap!important;
max-width:none!important;width:max-content!important;
margin:20px 0 0!important;padding:0!important;
font-size:29px!important;line-height:32px!important;letter-spacing:-1.15px!important;
color:var(--red)!important;
}
.site-header .header-inner > .brand.editor{
font-family:Georgia,'Times New Roman',serif!important;
font-weight:700!important;letter-spacing:-1.2px!important;
}
.site-header .brand-editor-sub{
display:block!important;margin:0!important;padding:0!important;
font-size:10px!important;line-height:12px!important;letter-spacing:0!important;
}
.site-header .header-inner > .nav{
grid-column:2!important;grid-row:1!important;align-self:start!important;
justify-self:end!important;display:flex!important;flex-wrap:nowrap!important;
justify-content:flex-end!important;align-items:center!important;
margin:27px 0 0!important;padding:0!important;
width:max-content!important;max-width:none!important;
column-gap:clamp(11px,1.2vw,19px)!important;row-gap:0!important;
}
.site-header .header-inner > .nav a{
display:inline-flex!important;align-items:center!important;
font-size:10.5px!important;font-weight:700!important;
letter-spacing:.055em!important;line-height:16px!important;
min-height:18px!important;white-space:nowrap!important;
}
.site-header .nav-language{display:inline-flex!important;align-items:center!important;
margin:0 0 0 6px!important;gap:4px!important;white-space:nowrap!important;
line-height:16px!important;}
.site-header .nav-language a,.site-header .nav-language span{
font-size:10.5px!important;line-height:16px!important;
letter-spacing:0!important;font-weight:500!important;color:#777!important;
}
.site-header .header-inner > .switch{display:none!important;}
@media (max-width:1150px){
.site-header .header-inner{grid-template-columns:185px minmax(0,1fr)!important;column-gap:14px!important;}
.site-header .header-inner > .nav{column-gap:10px!important;}
.site-header .header-inner > .nav a{font-size:9.6px!important;letter-spacing:.015em!important;}
.site-header .nav-language{margin-left:2px!important;}
.site-header .nav-language a,.site-header .nav-language span{font-size:9.6px!important;}
}
@media (max-width:850px){
.site-header .header-inner{
display:grid!important;grid-template-columns:minmax(0,1fr)!important;
grid-template-rows:45px auto!important;height:auto!important;
min-height:104px!important;padding:8px 22px 12px!important;row-gap:4px!important;
}
.site-header .header-inner > .brand,.site-header .header-inner > .brand.editor{
grid-column:1!important;grid-row:1!important;
margin:7px 0 0!important;font-size:26px!important;line-height:29px!important;
}
.site-header .header-inner > .nav{
grid-column:1!important;grid-row:2!important;align-self:start!important;
justify-self:start!important;justify-content:flex-start!important;
flex-wrap:wrap!important;width:100%!important;max-width:100%!important;
margin:0!important;column-gap:clamp(10px,1.8vw,18px)!important;row-gap:2px!important;
}
.site-header .header-inner > .nav a,.site-header .nav-language a,.site-header .nav-language span{
font-size:10px!important;line-height:18px!important;min-height:18px!important;
}
.site-header .brand-editor-sub{font-size:9px!important;line-height:10px!important;}
}
@media(max-width:480px){
.site-header .header-inner{padding-left:20px!important;padding-right:20px!important;row-gap:5px!important;}
.site-header .header-inner > .nav{column-gap:10px!important;}
.site-header .header-inner > .nav a,.site-header .nav-language a,.site-header .nav-language span{font-size:9.4px!important;}
}
@media(max-width:360px){
.site-header .header-inner > .nav{column-gap:7px!important;}
.site-header .header-inner > .nav a,.site-header .nav-language a,.site-header .nav-language span{font-size:8.8px!important;}
}
/* Editorial is the service focus; PR remains a distinct offering, not the company identity. */
.hero .major--editorial{font-size:clamp(42px,5.25vw,75px)!important;line-height:1.06!important;letter-spacing:-.04em!important;}
.hero .home-seo-intro{max-width:440px;font-size:13px;line-height:1.8;color:#626262;margin:11px 0 0;}
.hero .hero-micro{margin-top:19px;}
/* Exactly three aligned, non-staggered cards with contained images and descriptions. */
.home-selected-works .home-works-grid{
display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;
gap:20px!important;grid-auto-flow:row!important;align-items:stretch!important;
}
.home-selected-works .home-works-grid>.home-work-card{
display:flex!important;flex-direction:column!important;grid-column:auto!important;
grid-row:auto!important;margin:0!important;transform:none;align-self:stretch!important;
}
.home-selected-works .home-work-media{height:185px!important;flex-shrink:0!important;}
.home-selected-works .home-work-media--brands img{object-fit:contain!important;width:100%!important;height:100%!important;mix-blend-mode:normal!important;}
.home-selected-works .home-work-copy{padding:15px 16px!important;min-height:122px!important;}
.home-selected-works .home-work-desc{font-size:11.5px!important;line-height:1.65!important;}
@media(max-width:850px){
.home-selected-works .home-works-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
}
@media(max-width:650px){
.home-selected-works .home-works-grid{grid-template-columns:1fr!important;}
.home-selected-works .home-work-media{height:205px!important;}
.home-selected-works .home-work-copy{min-height:0!important;}
}
/* 0.5.30 mobile header has a fixed total track height for both properties,
regardless of the number of labels that fit on the nav row. */
@media(max-width:480px){
.site-header .header-inner{
height:125px!important;min-height:125px!important;
grid-template-rows:43px 1fr!important;
}
}
/* v0.5.31 — Fix Gutenberg/WordPress-added
elements between work links.
An intervening
becomes an anonymous CSS grid item and previously
pushed cards into grid cells 1, 3, 5 (left / right / next-row middle).
Keep only genuine portfolio cards as grid participants. */
.home-selected-works .home-works-grid > br,
.home-selected-works .home-works-grid > p:empty { display:none!important; }
.home-selected-works .home-works-grid > .home-work-card {
grid-column:auto!important;
grid-row:auto!important;
order:0!important;
}
/* STEP 60 / v0.5.32 — Corporate HOME: Editor's Choice live article gallery.
Keep the established two-column intro, no false placeholders, 2x2 max. */
.home-ec-gallery {
min-width: 0;
align-self: start;
border-top: 1px solid var(--ink);
padding-top: 12px;
}
.home-ec-gallery-heading {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
margin: 0 0 17px;
}
.home-ec-gallery-heading .eyebrow {
font-size: 10px;
letter-spacing: .12em;
color: var(--red);
}
.home-ec-view-all {
font-size: 10px;
font-weight: 750;
letter-spacing: .09em;
color: var(--ink);
white-space: nowrap;
}
.home-ec-view-all span { color: var(--red); font-size: 14px; }
.home-ec-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 19px 17px;
align-items: start;
}
.home-ec-story { display: block; min-width: 0; }
.home-ec-story-thumb {
display: flex;
width: 100%;
aspect-ratio: 5 / 3;
align-items: center;
justify-content: center;
overflow: hidden;
background: #f3f1ed;
border: 1px solid var(--line);
}
.home-ec-story-thumb img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
background: #f6f4f1;
}
.home-ec-story-fallback {
color: #a9a29d;
font: 700 12px Georgia, serif;
letter-spacing: .03em;
text-align: center;
}
.home-ec-story-title {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
margin-top: 8px;
font-size: 13px;
font-weight: 650;
line-height: 1.55;
color: var(--ink);
overflow-wrap: anywhere;
}
.home-ec-story:hover .home-ec-story-title { color: var(--red); }
.home-ec-empty { font-size: 14px; color: var(--muted); }
@media (max-width: 650px) {
.home-ec-gallery { margin-top: 10px; }
.home-ec-gallery-heading { gap: 6px; margin-bottom: 12px; }
.home-ec-gallery-heading .eyebrow { font-size: 9px; }
.home-ec-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 15px 10px; }
.home-ec-story-title { font-size: 12px; line-height: 1.55; }
}
/* Keep Gutenberg-injected blank line elements out of the two-column grid. */
.home-ec-section .two > br, .home-ec-section .two > p:empty { display: none !important; }
.home-ec-section .two > .home-ec-gallery { grid-column: auto !important; grid-row: auto !important; }
/* v0.5.33 — Expertise rebuild. Scoped service layout independent of WordPress
auto-inserted line breaks and inherited .service grid styles. */
.ex-page{background:var(--paper);}
.ex-hero{padding-top:82px;padding-bottom:67px;}
.ex-hero-inner{max-width:var(--site-max);}
.ex-title{font-size:clamp(54px,6.2vw,88px);line-height:1.03;letter-spacing:-.055em;font-weight:700;margin:14px 0 38px;}
.ex-title-dot{color:var(--red);}
.ex-hero-bottom{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:clamp(30px,7vw,110px);align-items:start;}
.ex-hero-bottom>br,.ex-hero-bottom>p:empty{display:none!important;}
.ex-hero-bottom h2{font-size:clamp(23px,2.8vw,39px);font-weight:700;line-height:1.48;letter-spacing:.025em;margin:0;}
.ex-hero-copy{border-top:1px solid #d6d2cd;padding-top:17px;min-width:0;}
.ex-hero-copy p{color:#484848;font-size:14px;line-height:2.05;margin:0 0 12px;}
.ex-services{padding-top:68px;padding-bottom:80px;}
.ex-section-label{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid #cfcac5;padding-bottom:18px;gap:20px;}
.ex-section-note{font-size:12px;color:#76716e;}
.ex-service-list{display:block;}
.ex-service-card{display:grid!important;grid-template-columns:82px minmax(0,1fr) minmax(195px,.4fr);gap:clamp(18px,3vw,52px);align-items:start;border-bottom:1px solid #d9d4ce;padding:38px 0 42px;}
.ex-service-card>br,.ex-service-card>p:empty{display:none!important;}
.ex-service-card>*{min-width:0;}
.ex-service-index{font-family:Georgia,'Times New Roman',serif;color:var(--red);font-size:38px;line-height:1;white-space:nowrap;}
.ex-service-index span{display:block;font-family:inherit;font-size:12px;color:#aaa09a;letter-spacing:.035em;margin-top:8px;}
.ex-service-kicker{font-size:11px;letter-spacing:.12em;font-weight:750;color:var(--red);margin:0 0 9px;}
.ex-service-body h3{font-family:Georgia,'Times New Roman',serif;font-weight:700;font-size:clamp(25px,2.6vw,38px);letter-spacing:-.032em;line-height:1.14;margin:0 0 19px;}
.ex-service-body h3 span{display:block;}
.ex-service-lead{font-size:18px!important;font-weight:700!important;color:#242424!important;margin:0 0 10px!important;line-height:1.6!important;}
.ex-service-desc{color:#595652;font-size:14px;line-height:2;max-width:660px;margin:0;}
.ex-service-scope{border-top:1px solid #d9d4ce;padding-top:13px;margin-top:3px;min-width:0;}
.ex-service-scope span{font-size:10px;letter-spacing:.12em;color:var(--red);font-weight:700;}
.ex-service-scope p{font-size:12px;color:#6b6561;line-height:2.15;margin:10px 0 0;}
.ex-proof{background:#f1eeea;padding:49px 0;}
.ex-proof-inner{display:flex;justify-content:space-between;align-items:end;gap:30px;}
.ex-proof h2{font-size:clamp(24px,2.7vw,34px);margin:12px 0 9px;letter-spacing:.015em;}
.ex-proof p{font-size:13px;color:#666;margin:0;line-height:1.9;}
.ex-proof .linkline{white-space:nowrap;}
.ex-cta-section{border-bottom:0;padding:74px 0 90px;}
.ex-contact{display:flex;align-items:center;justify-content:space-between;gap:26px;padding:43px 46px;}
.ex-contact h2{font-size:clamp(20px,2.3vw,30px);font-weight:700;margin:10px 0 12px;line-height:1.5;}
.ex-contact p{font-size:13px;line-height:1.7;color:#fff;margin:0;}
.ex-contact-link{display:inline-flex;align-items:center;gap:26px;padding:12px 0;border-bottom:1px solid #fff;color:#fff!important;font-size:12px;font-weight:750;white-space:nowrap;letter-spacing:.05em;}
.ex-contact-link span{font-size:20px;font-weight:400;}
.home-work-media--brands img{filter:grayscale(1) contrast(1.08)!important;}
@media(max-width:900px){
.ex-service-card{grid-template-columns:68px minmax(0,1fr);gap:20px;padding:30px 0 36px;}
.ex-service-scope{grid-column:2;margin-top:0;}
.ex-service-scope p{margin:6px 0 0;}
.ex-service-scope p br{display:none;}
.ex-service-scope p br::after{content:' / ';}
}
@media(max-width:650px){
.ex-hero{padding:43px 0 45px;}.ex-title{font-size:54px;margin:8px 0 27px;}
.ex-hero-bottom{grid-template-columns:minmax(0,1fr);gap:22px;}
.ex-hero-bottom h2{font-size:26px;}.ex-hero-copy p{font-size:13px;}
.ex-services{padding:43px 0 49px;}
.ex-section-label{gap:12px;align-items:start;}.ex-section-note{font-size:10px;text-align:right;}
.ex-service-card{grid-template-columns:45px minmax(0,1fr);column-gap:12px;padding:24px 0 29px;}
.ex-service-index{font-size:26px;}.ex-service-index span{font-size:10px;}
.ex-service-body h3{font-size:25px;line-height:1.14;}
.ex-service-lead{font-size:16px!important;}.ex-service-desc{font-size:13px;line-height:1.85;}
.ex-service-scope p{font-size:11px;}
.ex-proof{padding:38px 0;}.ex-proof-inner{display:block;}.ex-proof .linkline{margin-top:21px;}
.ex-cta-section{padding:49px 0 62px;}.ex-contact{display:block;padding:30px 24px;}.ex-contact-link{margin-top:23px;}
}
/* STEP 62 – Real commissioned photography and an editor-led narrative. */
.ex-perspective{padding:0 0 8px;background:var(--paper);}
.ex-perspective-inner{display:grid!important;grid-template-columns:minmax(0,1.16fr) minmax(0,.84fr);gap:0;align-items:stretch;}
.ex-perspective-inner>br,.ex-perspective-inner>p:empty{display:none!important;}
.ex-perspective-visual{position:relative;min-width:0;min-height:340px;margin:0!important;background:#ddd8d2;overflow:hidden;}
.ex-perspective-visual img{display:block;width:100%;height:100%;position:absolute;inset:0;object-fit:cover;object-position:48% 48%;}
.ex-perspective-visual figcaption{position:absolute;bottom:0;left:0;padding:9px 13px;background:rgba(18,18,18,.82);color:#fff;font-size:9px;letter-spacing:.13em;font-weight:650;}
.ex-perspective-copy{min-width:0;display:flex;flex-direction:column;justify-content:center;background:#f0ede9;padding:39px clamp(22px,4.2vw,64px) 30px;}
.ex-perspective-copy h2{font-family:Georgia,'Times New Roman',serif;font-size:clamp(24px,2.7vw,36px);line-height:1.4;letter-spacing:.006em;margin:15px 0 17px;color:#23211f;}
.ex-perspective-copy p{font-size:13px;line-height:2.05;color:#524e4a;margin:0;}
.ex-perspective-index{display:block;border-top:1px solid #d6cfc8;padding-top:14px;margin-top:25px;font-size:9px;letter-spacing:.1em;color:#736d68;}
@media(max-width:700px){
.ex-perspective-inner{grid-template-columns:minmax(0,1fr);}
.ex-perspective-visual{min-height:0;aspect-ratio:1.75;}
.ex-perspective-copy{padding:28px 22px 27px;}
.ex-perspective-copy h2{font-size:26px;margin:10px 0 12px;}
.ex-perspective-copy p{font-size:12px;}
.ex-perspective-index{margin-top:17px;}
}
/* STEP 63 / v0.5.35 — "Web黎明期から、AI時代へ" and source-grounded 2005 milestones.
Scoped to newly authored blocks; preserve validated header/work cards. */
.hero .home-hero-statement{
font-size:clamp(19px,2vw,25px);line-height:1.55;letter-spacing:.005em;
font-weight:750;max-width:510px;margin:0 0 12px;
}
.hero .home-hero-description{
font-size:14px;line-height:1.85;color:#414141;margin:0;
max-width:490px;
}
.hero .home-seo-intro{font-size:12px;line-height:1.75;margin:11px 0 0;}
.home-evolution-strip{padding:38px 0 40px;}
.home-evolution-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,50px);}
.home-evolution-grid>br,.home-evolution-grid>p:empty{display:none!important;}
.home-evolution-item{min-width:0;}
.home-evolution-kicker{font-size:10px;letter-spacing:.12em;color:var(--red);font-weight:800;}
.home-evolution-item h3{font-size:clamp(17px,1.6vw,22px);line-height:1.45;margin:13px 0 9px;font-weight:750;letter-spacing:-.015em;}
.home-evolution-item p{font-size:12.5px;line-height:1.83;color:#595552;margin:0;max-width:390px;}
.home-evolution-link{display:inline-flex;gap:7px;margin-top:13px;color:var(--red);font-size:11px;font-weight:750;border-bottom:1px solid #bb101950;padding-bottom:2px;}
.works-early-web{background:#f2efec;padding-block:49px 56px;}
.works-early-heading{display:flex;align-items:end;justify-content:space-between;gap:30px;margin:12px 0 28px;}
.works-early-heading h2{font-size:clamp(24px,3vw,36px);margin:0;line-height:1.4;}
.works-early-heading p{font-size:13px;line-height:1.85;color:#585450;margin:0;max-width:420px;}
.works-early-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;}
.works-early-grid>br,.works-early-grid>p:empty{display:none!important;}
.works-early-item{border-top:1px solid #c7c0b9;padding:19px 20px 17px 0;min-width:0;}
.works-early-meta{font-size:10px;letter-spacing:.13em;font-weight:800;color:var(--red);}
.works-early-item h3{font:700 clamp(21px,2.3vw,30px)/1.4 Georgia,'Times New Roman',serif;margin:11px 0 8px;}
.works-early-item p{font-size:14px;line-height:1.95;color:#4c4846;max-width:500px;margin:0 0 13px;}
.works-early-role{font-size:11px;color:#77706c;letter-spacing:.035em;}
@media(max-width:850px){
.home-evolution-grid{gap:18px;}
.home-evolution-item h3{font-size:17px;}
.works-early-heading{display:block;}
.works-early-heading p{margin-top:10px;}
}
@media(max-width:650px){
.home-evolution-strip{padding:26px 0 32px;}
.home-evolution-grid{grid-template-columns:1fr!important;gap:19px;}
.home-evolution-item{border-bottom:1px solid #ded7d1;padding-bottom:19px;}
.home-evolution-item:last-child{border-bottom:0;padding-bottom:0;}
.home-evolution-item h3{font-size:20px;margin:7px 0 5px;}
.home-evolution-item p{font-size:13px;}
.hero .home-hero-statement{font-size:21px;line-height:1.55;}
.works-early-web{padding-block:38px 44px;}
.works-early-grid{grid-template-columns:1fr!important;gap:14px;}
.works-early-item{padding:15px 0 10px;}
}
/* STEP 64 — Curated monochrome editor portrait from generated concept visual. */
.ex-perspective-visual img{object-position:52% 50%;}
/* STEP 66 / v0.5.40 — Shared corporate typography and hero rhythm.
Scoped to corporate pages: Editor's Choice masthead remains independent. */
.corp-page{
--corp-sans:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
--corp-serif:Georgia,"Times New Roman",serif;
--corp-lead-size:clamp(24px,2.5vw,34px);
--corp-display-size:clamp(51px,5.3vw,76px);
font-family:var(--corp-sans);
}
.corp-page .eyebrow{font-family:var(--corp-sans);font-size:11px;font-weight:800;letter-spacing:.17em;line-height:1.5;}
.corp-page .corp-page-hero{
padding-top:clamp(49px,5.3vw,76px) !important;
padding-bottom:clamp(49px,5.3vw,76px) !important;
}
.corp-page .corp-page-hero h1.corp-page-title{
font-family:var(--corp-serif);font-size:var(--corp-display-size) !important;
font-weight:700;letter-spacing:-.045em;line-height:1.08 !important;
margin:13px 0 30px !important;
}
.corp-page .corp-page-title-dot{color:var(--red)}
.corp-page .corp-page-hero .corp-page-statement{
font-family:var(--corp-sans);font-size:var(--corp-lead-size) !important;
font-weight:750;letter-spacing:.012em;line-height:1.56 !important;
max-width:980px;margin:0 !important;
}
.corp-page .corp-page-hero .ex-hero-inner{max-width:var(--site-max);}
.corp-page .corp-page-hero .ex-hero-bottom{margin-top:0;}
.corp-page .corp-page-hero .ex-hero-copy p{font-family:var(--corp-sans);font-size:14px;line-height:2.02;}
.corp-page .corp-page-hero .contact-english-lead{max-width:900px;margin:16px 0 0;font-size:14px;line-height:1.8;}
.corp-page .section-title{font-family:var(--corp-sans);font-weight:750;letter-spacing:-.02em;}
.corp-page .lead,.corp-page .muted,.corp-page .section p{font-family:var(--corp-sans);}
/* Leave HOME's approved headline/image composition intact; normalize its first label position. */
.corp-home > .hero .hero-content{justify-content:center;}
.corp-home > .hero .home-hero-statement{font-family:var(--corp-sans);}
/* Specific original EXPERTISE visual remains; do not change its service card grid. */
.corp-page.ex-page .ex-title-dot{color:var(--red)}
.corp-page.ex-page .corp-page-hero{padding-bottom:clamp(44px,4.5vw,66px) !important;}
/* Image-only editorial scene; ocean without a central pillar or island. */
.ex-perspective-visual img{object-position:50% 50%;}
@media(max-width:700px){
.corp-page{--corp-display-size:clamp(45px,11vw,60px);--corp-lead-size:clamp(22px,6vw,28px);}
.corp-page .corp-page-hero{padding-top:40px!important;padding-bottom:45px!important;}
.corp-page .corp-page-hero h1.corp-page-title{margin:8px 0 22px!important;}
.corp-page .corp-page-hero .ex-hero-copy p{font-size:13px;}
}
/* Editor's Choice compact own footer (before the corporate footer). */
.ec-mini-footer{background:#f4f1ed;border-top:1px solid #ddd6d0;border-bottom:1px solid #ded8d2;}
.ec-mini-footer-inner{
display:flex!important;align-items:center;justify-content:space-between;column-gap:28px;
padding-top:17px;padding-bottom:17px;
}
.ec-mini-footer-inner > br,.ec-mini-footer-inner > p:empty{display:none!important;}
.ec-mini-brand{display:inline-flex;flex-direction:column;flex:0 0 auto;font:700 23px/1.1 Georgia,"Times New Roman",serif;color:var(--red)!important;letter-spacing:-.045em;white-space:nowrap;}
.ec-mini-brand span{font:500 10px/1.3 Georgia,serif;letter-spacing:0;margin-top:3px;}
.ec-mini-links{display:flex!important;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:7px clamp(10px,1.45vw,22px);min-width:0;}
.ec-mini-links a{font-size:11px;line-height:1.5;color:#494542;font-weight:700;white-space:nowrap;letter-spacing:.015em;}
.ec-mini-links a:hover{color:var(--red);}
@media(max-width:830px){
.ec-mini-footer-inner{display:block!important;padding-top:16px;padding-bottom:15px;}
.ec-mini-brand{font-size:21px;}
.ec-mini-links{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin;gap:17px;margin-top:12px;padding-bottom:3px;}
.ec-mini-links a{font-size:10.5px;}
}
/* Related reading within article pages; only real published posts appear. */
.ec-related{width:100%;max-width:900px;margin:0 auto 62px;padding:21px 0 0;border-top:1px solid #ded8d3;}
.ec-related-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 17px;}
.ec-related-head h2{font-size:17px;line-height:1.5;margin:0;font-weight:750;}
.ec-related-head a{font-size:11px;font-weight:750;color:var(--red);}
.ec-related-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;}
.ec-related-grid>br,.ec-related-grid>p:empty{display:none!important;}
.ec-related-card{min-width:0;display:block;}
.ec-related-thumb{display:flex;align-items:center;justify-content:center;background:#efebe6;height:125px;overflow:hidden;}
.ec-related-thumb img{width:100%;height:100%;object-fit:contain;}
.ec-related-noimage{font:700 11px Georgia,serif;color:#9c8b84;}
.ec-related-title{display:block;font-size:12px;line-height:1.65;font-weight:700;margin-top:8px;}
.ec-related-empty{font-size:12px;color:var(--muted);}
@media(max-width:650px){
.ec-related{margin-bottom:36px;}
.ec-related-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.ec-related-thumb{height:95px;}
.ec-related-title{font-size:11px;}
}
/* STEP 67: corporate navigation completes the corporate journey before entering the media. */
.site-header .header-inner > .nav .nav-editorial-entry{
display:inline-flex!important;align-items:center!important;gap:5px!important;
border-left:1px solid #c8c1bb!important;padding-left:14px!important;
margin-left:2px!important;color:var(--red)!important;
}
.site-header .header-inner > .nav .nav-editorial-entry:hover{color:var(--red2)!important;}
.site-header .nav-editorial-entry span{font-size:12px;line-height:1;}
/* Editors' Choice explicitly links back to its corporate publisher. */
.ec-site-header .header-inner{position:relative!important;}
.ec-site-header .header-inner > .nav .ec-return-desktop{
border-left:1px solid #d3cdc6!important;padding-left:12px!important;
margin-left:0!important;color:#726965!important;letter-spacing:0!important;
font-size:10.5px!important;
}
.ec-site-header .header-inner > .nav .ec-return-desktop:hover{color:var(--red)!important;}
.ec-site-header .ec-return-mobile{display:none!important;}
@media(max-width:1150px){
.site-header .header-inner > .nav .nav-editorial-entry{padding-left:10px!important;gap:3px!important;}
.ec-site-header .header-inner > .nav .ec-return-desktop{font-size:9.6px!important;padding-left:9px!important;}
}
@media(max-width:850px){
.ec-site-header .header-inner > .nav .ec-return-desktop{display:none!important;}
.ec-site-header .ec-return-mobile{
display:inline-flex!important;position:absolute;right:22px;top:22px;
z-index:2;color:#675d57!important;font-size:11px!important;
font-weight:700!important;line-height:1.25;white-space:nowrap;
}
.ec-site-header .ec-return-mobile:hover{color:var(--red)!important;}
}
@media(max-width:480px){
.ec-site-header .ec-return-mobile{right:20px;top:20px;font-size:10px!important;}
.site-header .header-inner > .nav .nav-editorial-entry{padding-left:9px!important;}
}
/* STEP 68: Publishing & Comics archive entry. Do not alter card sizes. */
.works-archive-note{margin:18px 0 0;text-align:right;font-size:13px;line-height:1.7}
.works-archive-note a{color:#9f141d;border-bottom:1px solid #d6a2a5;padding-bottom:4px;text-decoration:none;font-weight:700}
.works-archive-note a:hover{color:#d11422;border-bottom-color:#d11422}
.work-photo-archive-link{position:relative;cursor:pointer;text-decoration:none;color:inherit}
.work-photo-archive-link:focus-visible{outline:3px solid var(--red);outline-offset:2px}
.work-photo-archive-link .work-photo{transition:transform .25s ease, filter .25s ease}
.work-photo-archive-link:hover .work-photo{transform:scale(1.025)}
.ec-listing-intro{max-width:680px;margin:0 0 26px;color:#666;font-size:14px;line-height:1.9}
.footer-grid .subline br{display:block;content:""}
.footer-grid p.subline{line-height:1.9}
@media(max-width:650px){.works-archive-note{text-align:left;margin-top:22px}}
/* STEP 69 / v0.5.44 — Editor's Choice typographic system.
Japanese headlines: robust contemporary Japanese sans.
Latin display titles: the established EC editorial serif.
All EC inner pages: shared top rhythm, lead scale and measure.
Deliberately scoped to EC; corporate typography is unchanged. */
:root {
--ec-head-jp:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
--ec-head-en:Georgia,"Times New Roman",serif;
--ec-page-title-size:clamp(32px,4.0vw,52px);
--ec-page-top:clamp(42px,5vw,64px);
}
body .wp-site-blocks main.ec-static-main.article-wrap,
body .wp-site-blocks main.ec-listing-main.article-wrap,
body main.ec-static-main.article-wrap,
body main.ec-listing-main.article-wrap {
padding-top:var(--ec-page-top)!important;
}
main.ec-static-main > .eyebrow,
main.ec-listing-main > .eyebrow {
font-family:var(--ec-head-jp)!important;
font-size:11px!important;
line-height:1.5!important;
letter-spacing:.15em!important;
font-weight:800!important;
color:var(--red);
margin:0 0 12px!important;
}
/* Uniform size, weight and spacing for EC static pages and taxonomy/list pages. */
main.ec-static-main > h1.article-title,
main.ec-listing-main > h1.article-title {
font-family:var(--ec-head-en)!important;
font-weight:700!important;
font-size:var(--ec-page-title-size)!important;
line-height:1.2!important;
letter-spacing:-.035em!important;
margin:0 0 21px!important;
text-align:left!important;
overflow-wrap:break-word;
}
/* Strong Japanese title — overrides both the historical .serif and theme defaults. */
main.ec-listing-main > h1.article-title.ec-title-jp,
main.ec-static-main > h1.article-title.ec-title-jp {
font-family:var(--ec-head-jp)!important;
font-weight:800!important;
font-size:clamp(29px,3.65vw,47px)!important;
line-height:1.35!important;
letter-spacing:-.045em!important;
}
main.ec-listing-main > .ec-listing-intro,
main.ec-static-main > p.lead,
main.ec-static-main > .ec-ad-lede {
font-family:var(--ec-head-jp)!important;
font-size:clamp(15px,1.45vw,18px)!important;
line-height:1.9!important;
font-weight:500;
color:#4b4744;
max-width:850px;
margin:0 0 32px!important;
}
main.ec-static-main > .ec-ad-lede {
font-size:clamp(18px,2vw,24px)!important;
font-weight:700;
margin-bottom:16px!important;
}
main.ec-static-main > .ec-ad-intro {
font-family:var(--ec-head-jp)!important;
font-size:14px!important;
line-height:1.95!important;
margin-bottom:0!important;
}
/* The listing starts just below its intro; empty-state text shares same left measure. */
main.ec-listing-main .latest-articles{margin-top:0!important;}
main.ec-listing-main .mashroom-empty{font-family:var(--ec-head-jp);font-size:14px;line-height:1.8;}
/* EC articles use a narrower reading measure, but the same page-top rhythm. */
body .wp-site-blocks main.ec-single-article > .article-reading,
body main.ec-single-article > .article-reading {
padding-top:var(--ec-page-top)!important;
}
.ec-single-article .article-heading .tag{
font-family:var(--ec-head-jp);font-size:11px;font-weight:800;letter-spacing:.12em;line-height:1.5;
}
.ec-single-article .article-heading h1.article-title {
font-family:var(--ec-head-jp)!important;
font-weight:800!important;
line-height:1.45!important;
letter-spacing:-.025em!important;
}
/* EC front page uses the same Japanese type voice; compact magazine layout remains intact. */
.ec-hero.ec-hero-rebuilt .ec-rebuilt-masthead h1 {
font-family:var(--ec-head-jp)!important;font-weight:750!important;
letter-spacing:-.01em!important;
}
@media(max-width:650px) {
:root{--ec-page-top:34px;--ec-page-title-size:clamp(31px,8vw,42px);}
main.ec-static-main > .eyebrow,main.ec-listing-main > .eyebrow{margin-bottom:9px!important;}
main.ec-static-main > h1.article-title,main.ec-listing-main > h1.article-title{margin-bottom:16px!important;}
main.ec-listing-main > .ec-listing-intro,main.ec-static-main > p.lead{
font-size:14px!important;line-height:1.85!important;margin-bottom:25px!important;
}
main.ec-static-main > .ec-ad-lede{font-size:19px!important;line-height:1.55!important;}
.ec-single-article .article-heading h1.article-title{font-size:clamp(25px,6.3vw,34px)!important;}
}
/* Readable Japanese headline breaks on narrower EC list pages. */
main.ec-listing-main > h1.ec-title-jp {text-wrap:balance;}