body.yokocho-refresh{--ink:#23354a;--blue:#183b68;--paper:#fffcf5;--muted:#606d79;--line:#d9dfdf;--gold:#edb744;--warm:#fff1cd;--soft-blue:#edf3fa}
body.yokocho-refresh{background:var(--paper);font-family:'Hiragino Sans','Noto Sans CJK JP','Yu Gothic',sans-serif;color:var(--ink)}
body.yokocho-refresh>header{background:var(--paper);max-width:1000px;width:calc(100% - 48px);margin:auto;padding:12px 0 10px;min-height:0}
body.yokocho-refresh .brand-logo{width:250px;height:50px}
body.yokocho-refresh .badge{font-size:12px;color:var(--muted)}
body.yokocho-refresh .primary-nav{max-width:1000px;width:calc(100% - 48px);margin:auto;padding:0;background:transparent;gap:20px;border-top:3px solid var(--gold);border-bottom:1px solid var(--line)}
body.yokocho-refresh .primary-nav a{font-size:12px;padding:9px 0;color:var(--blue)}
body.yokocho-refresh main{max-width:850px;width:calc(100% - 48px);margin:auto;padding:0 0 36px}
body.yokocho-refresh .reading-article{max-width:none;margin:0}
body.yokocho-refresh .reading-head{position:relative;padding:25px 24px 22px;margin:20px 0 0;border:0;border-left:5px solid var(--gold);background:var(--soft-blue)}
body.yokocho-refresh .reading-article .category-kicker{font-size:12px;color:var(--blue);font-weight:700;margin:0 0 10px;letter-spacing:.06em}
body.yokocho-refresh .reading-head h1{font-family:'Yu Mincho','Hiragino Mincho ProN','Noto Serif CJK JP',serif;font-size:34px;line-height:1.55;font-weight:600;letter-spacing:.01em;max-width:790px;color:var(--blue);margin:0 0 12px}
body.yokocho-refresh .reading-head .small{color:var(--muted);font-size:12px;margin:0}
body.yokocho-refresh .article-lead{max-width:740px;margin:22px auto 28px}
body.yokocho-refresh .reading-article p,body.yokocho-refresh .reading-article li{font-size:16px;line-height:1.85}
body.yokocho-refresh .article-lead p:first-child{font-size:17px;line-height:1.85}
body.yokocho-refresh .article-lead p:first-child strong{color:var(--blue)}
body.yokocho-refresh .reading-article>section{max-width:740px;margin:0 auto 30px;scroll-margin-top:16px}
body.yokocho-refresh .reading-article h2{font-size:23px;font-weight:700;line-height:1.55;letter-spacing:.01em;margin:0 0 15px;padding:11px 15px;border:0;border-left:4px solid var(--gold);background:var(--soft-blue);color:var(--blue)}
body.yokocho-refresh .reading-article p{margin:14px 0}
body.yokocho-refresh .reading-article strong{font-weight:700}
body.yokocho-refresh .reading-article .article-source,body.yokocho-refresh .reading-article .small{font-size:12px;line-height:1.75;color:var(--muted)}
body.yokocho-refresh .article-source a{color:#315977;text-underline-offset:3px}
body.yokocho-refresh .article-lead>.small{background:#f6f1e6;border-left:3px solid #d7c59f;padding:10px 13px;margin-bottom:0}
body.yokocho-refresh .reading-article .article-checklist{border:1px solid #e5ddc8;border-radius:8px;background:#fff9e9;margin:18px 0;padding:0 17px;list-style:none}
body.yokocho-refresh .article-checklist li{padding:12px 0;border-bottom:1px solid #e5ddc8;margin:0}
body.yokocho-refresh .article-checklist li+li{margin:0}
body.yokocho-refresh .article-checklist li:last-child{border-bottom:0}
body.yokocho-refresh .article-checklist li strong{display:inline;color:var(--blue);margin:0}
body.yokocho-refresh ol.article-checklist{counter-reset:check}
body.yokocho-refresh ol.article-checklist li{position:relative;padding-left:35px}
body.yokocho-refresh ol.article-checklist li:before{counter-increment:check;content:counter(check,decimal-leading-zero);position:absolute;left:0;top:14px;font:bold 16px Georgia,serif;color:#8a5a10}
body.yokocho-refresh .reading-article .article-decision-figure{box-sizing:border-box;border:1px solid #d2dfeb;border-radius:8px;background:#f3f7fb;width:560px;max-width:100%;margin:18px auto;padding:12px 14px 10px}
body.yokocho-refresh .article-decision-figure img{display:block;width:100%;height:auto;max-width:none}
body.yokocho-refresh .article-decision-figure a{display:block}
body.yokocho-refresh .reading-article .article-decision-figure figcaption{font-size:12px;line-height:1.65;color:var(--muted);margin:8px 0 0;padding-top:8px;border-top:1px solid #d2dfeb}
body.yokocho-refresh .reading-article .visual-aside{width:540px;background:#fff7e3;border-color:#ead8ab}
body.yokocho-refresh .visual-aside figcaption{border-color:#ead8ab}
body.yokocho-refresh .reading-return{max-width:740px;margin:0 auto!important;padding-top:16px}
body.yokocho-refresh .reading-return a{font-size:14px}
body.yokocho-refresh>footer{background:var(--soft-blue);max-width:1000px;width:calc(100% - 48px);padding:18px 22px;margin:auto;border-top:3px solid var(--gold);font-size:12px}
@media(max-width:760px){
body.yokocho-refresh>header,body.yokocho-refresh .primary-nav,body.yokocho-refresh main,body.yokocho-refresh>footer{width:calc(100% - 32px);margin-left:16px;margin-right:16px}
body.yokocho-refresh>header{padding:10px 0 8px;gap:0;min-height:0}
body.yokocho-refresh .brand-logo{width:220px;height:44px}
body.yokocho-refresh .badge{display:none}
body.yokocho-refresh .primary-nav{gap:17px}
body.yokocho-refresh .primary-nav a{font-size:12px;min-height:40px;padding:8px 0}
body.yokocho-refresh main{padding-top:0}
body.yokocho-refresh .reading-head{padding:16px 15px;margin:16px 0 0;border-left-width:4px}
body.yokocho-refresh .reading-head h1{font-size:27px;line-height:1.55;margin:0 0 12px}
body.yokocho-refresh .reading-head .small{font-size:11px}
body.yokocho-refresh .article-lead{margin:18px 0 25px}
body.yokocho-refresh .article-lead p:first-child{font-size:16px;line-height:1.85}
body.yokocho-refresh .reading-article>section{margin-bottom:28px}
body.yokocho-refresh .reading-article h2{font-size:21px;line-height:1.55;padding:10px 12px;margin:0 0 13px}
body.yokocho-refresh .reading-article p,body.yokocho-refresh .reading-article li{font-size:16px;line-height:1.85}
body.yokocho-refresh .reading-article p{margin:13px 0}
body.yokocho-refresh .reading-article .article-checklist{padding:0 13px;margin:15px 0}
body.yokocho-refresh .article-checklist li{padding-top:11px;padding-bottom:11px}
body.yokocho-refresh .reading-article .article-decision-figure{width:100%;margin:16px auto;padding:10px 7px 9px}
body.yokocho-refresh .reading-article .article-decision-figure figcaption{padding:7px 4px 0;font-size:12px}
body.yokocho-refresh .reading-article .small,body.yokocho-refresh .reading-article .article-source{font-size:12px}
body.yokocho-refresh>footer{padding:15px}}/* Selective conclusion emphasis, not decoration on every bold phrase. */
body.yokocho-refresh .article-lead p:first-child strong{background:linear-gradient(transparent 65%,#ffe4a0 65%);box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* These portraits are CSS viewports into the approved, pixel-identical lossless full-body WebP files. */
body.yokocho-refresh .guide-exchange{margin:18px auto 22px;max-width:740px;border:1px solid #d9dfdf;border-radius:8px;padding:12px;background:#fff}
body.yokocho-refresh .guide-exchange .guide-label{font-size:11px;line-height:1.6;color:#606d79;margin:0 0 10px}
body.yokocho-refresh .guide-line{display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;align-items:start;margin:10px 0}
body.yokocho-refresh .guide-portrait{display:block;position:relative;width:64px;height:64px;border-radius:50%;overflow:hidden;background:#edf3fa;border:1px solid #d2dfeb}
body.yokocho-refresh .guide-portrait img{position:absolute;width:200px;max-width:none;height:300px;left:-57px;top:-3px}
body.yokocho-refresh .guide-line p{margin:0;padding:8px 11px;background:#edf3fa;border-radius:7px;font-size:15px;line-height:1.75}
body.yokocho-refresh .guide-line.shopkeeper p{background:#fff1cd}
body.yokocho-refresh .guide-line strong{display:block;font-size:12px;color:#183b68;margin-bottom:2px}
@media(max-width:480px){body.yokocho-refresh .guide-exchange{padding:10px}body.yokocho-refresh .guide-line{grid-template-columns:54px minmax(0,1fr);gap:8px}body.yokocho-refresh .guide-portrait{width:54px;height:54px}body.yokocho-refresh .guide-portrait img{width:170px;height:255px;left:-49px;top:-3px}body.yokocho-refresh .guide-line p{padding:7px 9px}}
/* Compact, consistent public shell and decision surfaces. */
body.yokocho-refresh main{max-width:1040px}
body.yokocho-refresh main:has(.reading-article){max-width:850px}
body.yokocho-refresh .primary-nav{gap:16px}
body.yokocho-refresh .reading-index{max-width:900px;margin:auto}
body.yokocho-refresh .reading-card{display:grid;grid-template-columns:150px minmax(0,1fr);gap:20px;padding:18px;background:#fff;border:1px solid #e2dfd4;border-radius:8px;margin:15px 0}
body.yokocho-refresh .reading-card img{width:150px;height:112px;object-fit:contain;background:#edf3fa;border-radius:6px}
body.yokocho-refresh .reading-card h2{font-size:21px;line-height:1.55;margin:5px 0 8px}
body.yokocho-refresh .reading-card p{font-size:14px;margin:6px 0}
body.yokocho-refresh .reading-card .small{font-size:12px;color:#606d79}
body.yokocho-refresh .category-hero{padding:20px;background:#edf3fa;border-left:5px solid #edb744;border-radius:0 8px 8px 0;gap:18px}
body.yokocho-refresh .category-hero img{width:145px;height:110px}
body.yokocho-refresh .category-hero h1{font-size:29px}
body.yokocho-refresh .category-form,body.yokocho-refresh .plan-card{background:#fff;border-color:#d9dfdf;padding:18px}
body.yokocho-refresh .summary-plan{background:#edf3fa;border-top:3px solid #edb744}
body.yokocho-refresh .selection-guide{padding:20px;background:#f5f7fa;border:1px solid #d2dfeb;border-radius:8px;margin:24px 0}
body.yokocho-refresh .selection-steps{gap:15px}
body.yokocho-refresh .selection-steps li{background:#fff;padding:15px;border-radius:6px}
body.yokocho-refresh .no-purchase,body.yokocho-refresh .warning{background:#fff3d7;border-left:3px solid #d49b25;padding:12px 15px}
body.yokocho-refresh th{background:#e9f0f8;color:#183b68}
body.yokocho-refresh td{background:#fff}
body.yokocho-refresh .connection-diagram{max-width:420px;margin:18px auto}
body.yokocho-refresh .connection-diagram img{max-width:100%;height:auto}
body.yokocho-refresh .page>h1{background:#edf3fa;border-left:5px solid #edb744;padding:17px 19px;font-size:29px}
body.yokocho-refresh .page h2{color:#183b68;border-bottom:2px solid #edb744;padding-bottom:7px}
body.yokocho-refresh .guide-exchange{max-width:740px}
body.yokocho-refresh .guide-line.female p{background:#fff1cd}
body.yokocho-refresh .guide-line.tanuki p{background:#edf4e9}
body.yokocho-refresh .guide-portrait.portrait-tanuki img{width:110px;height:auto;left:-22px;top:-2px}
.yokocho-welcome{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:16px 20px;margin:0 0 22px;background:#edf3fa;border-left:5px solid #edb744;border-radius:0 8px 8px 0}
.yokocho-welcome p{font-size:15px;line-height:1.7;margin:4px 0;color:#183b68}
.yokocho-welcome .welcome-kicker{font-size:12px;font-weight:bold;letter-spacing:.06em}
.welcome-cast{display:flex;gap:16px;flex-shrink:0}
.welcome-cast>div{display:flex;flex-direction:column;align-items:center;gap:5px}
.welcome-cast>div>span:last-child{font-size:10px;color:#606d79}
body.yokocho-refresh .ed-intro{padding:14px 0}
body.yokocho-refresh .ed-opening{gap:26px;padding-bottom:25px;grid-template-columns:minmax(0,1fr) 290px}
body.yokocho-refresh .ed-feature{background:#fff8e7;border:1px solid #e9ddbf;border-radius:8px;padding:20px}
body.yokocho-refresh .ed-feature h1{font-size:34px;margin:15px 0 18px;color:#183b68}
body.yokocho-refresh .ed-feature-copy>p:first-child{font-size:15px;line-height:1.85}
body.yokocho-refresh .ed-editorial-art img{filter:none}
body.yokocho-refresh .ed-compare{padding:16px;background:#edf3fa;border:0;border-radius:8px}
body.yokocho-refresh .ed-compare h2{font-size:24px}
body.yokocho-refresh .ed-comparison-primary{border-radius:6px;background:#183b68}
body.yokocho-refresh .ed-comparison-row{padding:13px 0}
body.yokocho-refresh .ed-readings{border-top-color:#edb744;padding:20px 0 26px}
body.yokocho-refresh .ed-reading-columns{gap:22px;margin-top:18px}
body.yokocho-refresh .ed-reading-columns article{background:#fff;padding:17px;border-top:3px solid #edb744}
body.yokocho-refresh .ed-reading-columns h3{font-size:21px;color:#183b68}
body.yokocho-refresh .ed-editorial-note{padding:16px;background:#edf3fa;border:0}
@media(max-width:760px){
 body.yokocho-refresh .category-hero{grid-template-columns:minmax(0,1fr);padding:16px}
 body.yokocho-refresh .category-hero img{display:none}
 body.yokocho-refresh .category-hero h1,body.yokocho-refresh .page>h1{font-size:25px}
 body.yokocho-refresh .selection-guide{padding:14px}
 body.yokocho-refresh .ed-opening{display:flex;flex-direction:column;gap:18px}
 body.yokocho-refresh .ed-feature h1{font-size:29px}
 .yokocho-welcome{flex-direction:column;align-items:flex-start;gap:12px;padding:13px 15px;margin-bottom:17px}
 .welcome-cast{width:100%;justify-content:space-between;gap:6px}
 body.yokocho-refresh .welcome-cast .guide-portrait{width:54px;height:54px}
 body.yokocho-refresh .welcome-cast .guide-portrait img{width:170px;height:255px;left:-49px;top:-3px}
 body.yokocho-refresh .welcome-cast .portrait-tanuki img,body.yokocho-refresh .guide-portrait.portrait-tanuki img{width:94px;height:auto;left:-19px;top:-2px}
 body.yokocho-refresh .reading-card{grid-template-columns:90px minmax(0,1fr);padding:12px;gap:12px}
 body.yokocho-refresh .reading-card img{width:90px;height:76px}
 body.yokocho-refresh .reading-card h2{font-size:18px}
 body.yokocho-refresh .reading-card p{font-size:13px}
}
@media(max-width:360px){body.yokocho-refresh .ed-feature{padding:14px}body.yokocho-refresh .ed-feature h1{font-size:26px}body.yokocho-refresh .reading-card{grid-template-columns:1fr}body.yokocho-refresh .reading-card img{width:112px;height:76px}body.yokocho-refresh .primary-nav{gap:12px}}
/* Individually re-laid-out vector graphics retain readable mobile type. */
body.yokocho-refresh .compact-diagram{display:block;max-width:100%}
body.yokocho-refresh .compact-diagram img{display:block;width:100%;height:auto}
body.yokocho-refresh .invoice-visual{width:100%;max-width:560px;margin:18px auto;min-width:0}
body.yokocho-refresh .invoice-visual img{width:100%;max-width:100%;height:auto}
body.yokocho-refresh .category-hero>div{display:block}
body.yokocho-refresh .category-hero h1{margin:4px 0 10px}
body.yokocho-refresh .category-hero p{margin:8px 0}
body.yokocho-refresh .category-hero .category-kicker{margin:0 0 6px}
body.yokocho-refresh .category-hero .category-subtitle{margin:6px 0}
@media(max-width:760px){body.yokocho-refresh .invoice-visual{width:100%;max-width:100%;margin:16px 0}body.yokocho-refresh .category-hero{gap:8px}}
/* The six-column comparison becomes service cards on narrow screens. */
body.yokocho-refresh #compare table{min-width:1140px;table-layout:fixed}
body.yokocho-refresh #compare th:nth-child(1){width:150px}
body.yokocho-refresh #compare th:nth-child(2){width:150px}
body.yokocho-refresh #compare th:nth-child(3){width:170px}
body.yokocho-refresh #compare th:nth-child(4){width:230px}
body.yokocho-refresh #compare th:nth-child(5){width:260px}
body.yokocho-refresh #compare th:nth-child(6){width:180px}
@media(max-width:760px){
 body.yokocho-refresh #compare .table-wrap{overflow:visible}
 body.yokocho-refresh #compare table,body.yokocho-refresh #compare tbody{display:block;width:100%;min-width:0;max-width:100%}
 body.yokocho-refresh #compare thead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
 body.yokocho-refresh #compare tr{display:block;border:1px solid #d2dfeb;border-radius:8px;overflow:hidden;margin:16px 0;background:#fff}
 body.yokocho-refresh #compare tbody th,body.yokocho-refresh #compare td{display:block;width:auto!important;max-width:100%;padding:11px 14px;border:0;border-bottom:1px solid #e2e7ed;white-space:normal;overflow-wrap:anywhere}
 body.yokocho-refresh #compare tbody th{background:#183b68;color:#fff;font-size:18px}
 body.yokocho-refresh #compare td::before{display:block;font-size:12px;font-weight:bold;color:#606d79;margin-bottom:5px}
 body.yokocho-refresh #compare td:nth-child(2)::before{content:'OS'}
 body.yokocho-refresh #compare td:nth-child(3)::before{content:'端末'}
 body.yokocho-refresh #compare td:nth-child(4)::before{content:'Office'}
 body.yokocho-refresh #compare td:nth-child(5)::before{content:'人数・契約条件'}
 body.yokocho-refresh #compare td:nth-child(6)::before{content:'公式出典'}
 body.yokocho-refresh #compare td p{margin:8px 0}
}