:root{--ink:#302f2a;--muted:#7a786e;--paper:#faf9f5;--line:#e4e1d7;--green:#3e604f;--orange:#bd643e}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;font-size:14px;line-height:1.9}a{color:inherit;text-decoration:none}a:hover{color:var(--orange)}button,input,textarea{font:inherit}button,a,input,textarea{outline-offset:5px}button{cursor:pointer}a:focus-visible,button:focus-visible{outline:2px solid var(--green)}.topline{background:var(--green);color:#fff;text-align:center;font-size:11px;letter-spacing:.18em;padding:6px}.header{max-width:1120px;margin:auto;display:flex;justify-content:space-between;align-items:center;padding:28px 0}.brand{display:flex;gap:13px;align-items:center;font-size:29px;font-weight:800;line-height:1.25;letter-spacing:.05em}.brand-icon{background:var(--orange);color:white;font-size:15px;writing-mode:vertical-rl;padding:9px 6px;border-radius:3px}.brand-serif{font-family:serif}.brand small{display:block;font-size:9px;letter-spacing:.17em;font-weight:500;margin-top:7px}.header-note{color:var(--muted);font-size:12px}.nav{border-block:1px solid var(--line);background:#fff}.nav>div{max-width:1120px;margin:auto;display:flex;gap:35px;align-items:center}.nav a{padding:14px 8px;font-weight:bold;border-bottom:3px solid transparent}.nav a[aria-current]{border-color:var(--green);color:var(--green)}.nav span{margin-left:auto;font-size:10px;letter-spacing:.12em;color:var(--muted)}.notice{max-width:1120px;margin:16px auto 0;font-size:10px;color:var(--orange)}.notice span{color:var(--muted);margin-left:12px}.layout{max-width:1120px;margin:30px auto 36px;display:grid;grid-template-columns:minmax(0,760px) minmax(0,280px);gap:60px}.intro{padding:0 0 28px}.eyebrow{font-size:10px;letter-spacing:.2em;color:var(--green);font-weight:bold}.intro h1{font-family:serif;font-size:38px;line-height:1.55;letter-spacing:.08em;margin:15px 0}.intro p:last-child{font-size:12px;color:var(--muted)}.featured{display:block;border-radius:5px;overflow:hidden;background:white!important;border:1px solid var(--line)}.feature-art{display:flex;flex-direction:column;align-items:center;justify-content:center;height:220px;background:#e9e1d3;font-size:88px;position:relative}.feature-art:before,.feature-art:after{content:"";position:absolute;width:130px;height:130px;border:1px solid #b9aa9055;border-radius:50%;left:10%;top:10%}.feature-art:after{left:auto;right:7%;width:170px;height:170px;top:25%}.feature-art>span{font-family:serif;font-size:16px;letter-spacing:.3em;color:#79694e}.feature-copy{padding:24px 28px}.tag{color:var(--orange);font-size:11px;font-weight:bold}.feature-copy h2{font-size:23px;line-height:1.6;margin:10px 0}.feature-copy p{font-size:12px;color:var(--muted)}.meta{color:var(--muted);font-size:10px;display:block}.meta span{margin-left:15px}.feature-copy .meta{display:flex;justify-content:space-between}.section-head{display:flex;align-items:center;justify-content:space-between;border-bottom:2px solid var(--ink);padding-bottom:11px;margin-top:36px}.section-head h2{font-size:18px;margin:0}.section-head>span{font-size:9px;color:var(--muted);letter-spacing:.12em}.story{display:grid;grid-template-columns:145px 1fr;gap:22px;padding:24px 0;border-bottom:1px solid var(--line)}[hidden]{display:none!important}.thumb{border-radius:4px;display:flex;align-items:center;justify-content:center;min-height:118px;font-size:49px}.coffee{background:#e9e1d3}.rice{background:#eee6cf}.walk{background:#dfe9e1}.tea{background:#e6dfd2}.category{font-size:10px;color:var(--green);font-weight:bold}.story h3{font-size:17px;line-height:1.65;margin:5px 0}.story p{font-size:11px;color:var(--muted);margin:8px 0}.about{background:#e9eee7;padding:28px;position:relative;overflow:hidden;border-top:3px solid var(--green)}.about h2{font-family:serif;font-size:26px;line-height:1.6;letter-spacing:.05em}.about p{font-size:11px;color:#636e60}.about-mark{position:absolute;right:-5px;bottom:-38px;font-size:120px;color:#3e604f0b;font-family:serif}.ranking .section-head h2{font-size:16px}.ranking>a{display:flex;gap:15px;padding:18px 0;border-bottom:1px solid var(--line)}.rank{font-family:Georgia,serif;font-size:27px;color:var(--orange);line-height:1.5}.ranking h3{font-size:13px;line-height:1.7;margin:3px 0}.side-categories{margin-top:32px}.side-categories h2{font-size:16px}.side-categories>a{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding:10px 0;font-size:12px}.ad-slot{border:1px dashed var(--line);color:#99988e;text-align:center;padding:38px 12px;margin-top:28px;font-size:10px}.breadcrumb{font-size:11px;color:var(--muted);margin-bottom:25px}.article-body h1{font-family:serif;font-size:31px;line-height:1.7}.lead{font-size:15px;margin:25px 0}.article-art{font-size:64px;line-height:1.5;text-align:center;padding:18px;border-radius:4px}.source-note{background:#efeee8;padding:14px;font-size:11px;color:var(--muted);margin:25px 0}.response{padding:22px 0;border-bottom:1px solid var(--line)}.response>div{font-size:11px;color:var(--muted)}.response strong{color:var(--green);margin-left:8px}.response span{margin-left:15px}.response p{font-size:16px;padding-left:16px}.comment-cta{background:#e9eee7;padding:25px;text-align:center;margin-top:30px}.comment-cta h2{font-size:19px}.comment-cta p{font-size:12px}.button{display:inline-block;border:0;border-radius:3px;background:var(--green);color:white;padding:11px 23px;font-size:13px;font-weight:bold}.button:hover{background:#2d483a;color:white}.related-link{display:flex;justify-content:space-between;gap:15px;padding:15px 0;border-bottom:1px solid var(--line);font-size:13px}.reader-comment{padding:14px 18px;background:white;border:1px solid var(--line)}.reader-comment p{margin:8px 0;overflow-wrap:anywhere}.reader-comment+.reader-comment{margin-top:10px}.reader-comment time{display:block;color:var(--muted);font-size:11px}.votes{display:flex;gap:8px}.votes button{background:var(--paper);border:1px solid var(--line);border-radius:4px;padding:5px 14px}.votes button[aria-pressed=true]{background:#dfe9e1;border-color:var(--green)}form{margin-top:35px}form h2{font-size:20px}label{display:block;font-size:12px;margin:20px 0 7px}input,textarea{display:block;width:100%;padding:12px;border:1px solid #c9c7bc;border-radius:3px;background:white;color:var(--ink)}textarea{resize:vertical}.required{font-size:10px;color:var(--orange)}form .button{margin-top:20px}#comment-preview{background:white;padding:20px;border:1px solid var(--line);overflow-wrap:anywhere}#comment-preview p{white-space:pre-wrap}.text-link{color:var(--green)}footer{background:#efeee7;border-top:1px solid var(--line);padding:35px max(24px,calc((100% - 1120px)/2));position:relative}.footer-brand{font-family:serif;font-size:23px;font-weight:bold}footer p{font-size:11px;color:var(--muted)}footer small{font-size:10px;color:var(--muted)}.back-top{display:block;font-size:11px;margin-top:15px}.skip{position:absolute;top:-100px;left:10px;z-index:5;background:white;padding:10px}.skip:focus{top:0}@media(min-width:1100px){.intro h1 br{display:none}}@media(max-width:1180px){.header,.nav>div,.layout,.notice{margin-left:25px;margin-right:25px}.layout{gap:35px;grid-template-columns:minmax(0,1fr) 260px}}@media(max-width:720px){.header{padding:21px 0}.brand{font-size:25px}.header-note,.nav span{display:none}.nav>div{gap:16px;justify-content:space-between}.nav a{font-size:12px;padding:11px 5px}.notice{line-height:1.6}.notice span{display:block;margin-left:0}.layout{display:block;margin-top:25px}.intro h1{font-size:31px}.intro p:last-child{font-size:11px}.feature-art{height:185px;font-size:74px}.feature-copy{padding:20px}.feature-copy h2{font-size:20px}.story{grid-template-columns:95px 1fr;gap:15px;padding:20px 0}.thumb{min-height:95px;font-size:36px;align-self:start}.story h3{font-size:15px}.story p{display:none}.story .meta{margin-top:10px}.story .meta span{display:none}aside{margin-top:40px}.about{padding:24px}.article-body h1{font-size:26px}.response span{display:block;margin-left:0}.article-body,.story{overflow-wrap:anywhere}.side-latest{margin-bottom:25px}}

/* News navigation and article discovery. */
.nav > div { gap: 25px; }
.nav .news-flash { color: var(--orange); }
.layout { gap: 40px; grid-template-columns: minmax(0, 780px) minmax(0, 300px); }
.layout:has(.intro) { margin-top: 10px; }
.intro { padding-bottom: 4px; }
.intro > .eyebrow { margin-top: 0; }
.intro h1 { font-size: 29px; margin: 8px 0; }
.intro p:last-child { margin-bottom: 16px; }
.pickups .section-head { margin-top: 8px; }
.pickup-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.pickup-card { display: flex; flex-direction: column; background: white; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.pickup-art { display: flex; align-items: center; justify-content: center; align-self: center; width: 100%; height: 150px; flex-shrink: 0; padding: 12px; font-size: 52px; }
.pickup-copy { display: flex; flex-direction: column; align-items: flex-start; flex: 1; padding: 14px; }
.pickup-copy h3 { font-size: 18px; font-weight: 800; line-height: 1.65; margin: 7px 0 12px; }
.pickup-read { margin-top: auto; font-size: 10px; font-weight: 700; color: var(--orange); }
.pickup-card:hover { border-color: #bd643e88; }
.story { grid-template-columns: 172px minmax(0, 1fr); padding: 11px 0; gap: 21px; }
.thumb { height: 129px; min-height: 129px; align-self: center; overflow: hidden; padding: 10px; font-size: 58px; }
.thumb img, .pickup-art img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; }
.story > div { min-width: 0; }
.story h3 { overflow-wrap: anywhere; font-size: 23px; font-weight: 900; line-height: 1.5; margin: 3px 0; color: #25241f; }
.story p { margin: 3px 0; }
.latest .section-head { margin-top: 26px; }
#filter-status:empty { display: none; }
.article-body h1 { font-family: inherit; font-size: 34px; font-weight: 800; line-height: 1.55; }
.article-illustration { display: flex; align-items: center; justify-content: center; margin: 24px 0; padding: 18px; border-radius: 4px; }
.article-illustration img { display: block; width: auto; max-width: 100%; height: auto; max-height: 400px; object-fit: contain; }
.ranking { background: #f3eee4; border: 1px solid #e0d6c5; border-top: 4px solid var(--orange); padding: 0 18px 7px; border-radius: 3px; }
.ranking .section-head { margin-top: 16px; padding-bottom: 12px; border-color: #d4c7b3; }
.ranking .section-head h2 { font-size: 17px; font-weight: 800; }
.ranking .section-head > span { background: var(--orange); color: white; padding: 1px 6px; border-radius: 2px; white-space: nowrap; }
.ranking h3 { font-size: 15px; font-weight: 800; line-height: 1.65; }
.ranking > a { padding: 16px 0; gap: 11px; }
.ranking > a:last-child { border-bottom: 0; }
.rank { font-size: 30px; font-weight: bold; }
.side-latest .related-link { font-weight: 400; }
.side-categories { display: flex; flex-wrap: wrap; gap: 8px; }
.side-categories h2 { flex-basis: 100%; margin-bottom: 5px; }
.side-categories > a { border: 1px solid var(--line); border-radius: 3px; padding: 5px 12px; background: white; }
.side-categories > a span { display: none; }
@media (max-width: 1180px) {
    .layout { grid-template-columns: minmax(0, 1fr) 280px; gap: 28px; }
    .nav > div { gap: 17px; }
    .pickup-copy { padding: 11px; }
    .pickup-copy h3 { font-size: 16px; }
}
@media (max-width: 920px) and (min-width: 721px) {
    .layout { display: block; }
    .layout > aside { margin-top: 40px; }
    .pickup-grid { grid-template-columns: 1fr; gap: 10px; }
    .pickup-card { display: grid; grid-template-columns: 100px minmax(0, 1fr); }
    .pickup-art { height: 125px; font-size: 40px; }
    .pickup-copy h3 { margin: 4px 0; }
    .story { grid-template-columns: 120px minmax(0, 1fr); gap: 15px; }
    .thumb { height: 110px; min-height: 110px; font-size: 44px; }
    .story h3 { font-size: 21px; }
    .story p { display: none; }
}
@media (max-width: 720px) {
    .nav > div { gap: 10px; justify-content: flex-start; overflow-x: auto; margin: 0; padding: 0 20px; scroll-padding-inline: 20px; }
    .nav a { white-space: nowrap; flex-shrink: 0; min-width: 44px; min-height: 44px; text-align: center; }
    .layout { display: block; margin-bottom: 28px; }
    .intro h1 { font-size: 25px; letter-spacing: .02em; }
    .pickup-grid { grid-template-columns: 1fr; gap: 10px; margin-top: 14px; }
    .pickup-card { display: grid; grid-template-columns: 110px minmax(0, 1fr); }
    .pickup-art { height: 125px; font-size: 43px; }
    .pickup-copy { padding: 11px 14px; }
    .pickup-copy h3 { font-size: 17px; margin: 3px 0; }
    .pickup-read { font-size: 9px; }
    .story { grid-template-columns: 110px minmax(0, 1fr); gap: 14px; padding: 10px 0; }
    .thumb { height: 105px; min-height: 105px; font-size: 43px; }
    .story h3 { font-size: 20px; line-height: 1.5; }
    .story .meta { margin-top: 4px; }
    .article-body h1 { font-size: 27px; }
    .ranking { padding-inline: 20px; }
}

/* Decorative townscape beside the site title. */
.header { justify-content: space-between; gap: 16px; padding-block: 6px; }
.header .brand { flex-shrink: 0; }
.header-illustration {
    display: block;
    width: min(60%, 650px);
    height: 80px;
    object-fit: cover;
    object-position: center 55%;
    min-width: 0;
}
@media (max-width: 720px) {
    .header { flex-direction: column; align-items: stretch; gap: 0; padding-block: 12px 14px; }
    .header .brand { align-self: flex-start; }
    .header-illustration {
        flex: none;
        width: 100%;
        height: auto;
        aspect-ratio: 5.5 / 1;
        object-fit: cover;
        object-position: center 55%;
    }
}
@media (max-width: 380px) {
    .header .brand { font-size: 22px; gap: 8px; }
}

@media (max-width: 400px) {
    .story { grid-template-columns: 92px minmax(0, 1fr); gap: 12px; }
    .story .thumb { height: 92px; min-height: 92px; }
}

/* Comment replies and per-comment reactions. */
.comment-number { color: var(--muted); font-size: 12px; }
.reader-comment { scroll-margin-top: 16px; }
.reader-comment-reply { margin-left: 28px; border-left: 3px solid #dce6d9; }
.reader-comment:target { border-color: var(--green); }
.reader-comment time { display: inline-block; margin-left: 10px; }
.comment-device-id { display: inline-block; margin-left: 14px; color: var(--muted); font-size: 11px; }
.comment-actions { display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.comment-actions button { display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 40px; min-height: 40px; line-height: 1; font-size: 12px; }
.comment-actions .reply-button { border: 1px solid #c4d2c5; border-radius: 4px; background: #e9eee7; color: #294735; padding: 5px 9px; font-size: 13px; font-weight: 800; }
.reply-icon { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.comment-actions .reply-button:hover { background: #dce6d9; border-color: var(--green); }
.comment-actions .votes { gap: 6px; }
.comment-actions .votes button { padding: 5px 9px; white-space: nowrap; }
.reply-context { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; background: #e9eee7; font-size: 12px; }
.reply-context a, .preview-reply-target { color: var(--green); text-decoration: underline; }
.reply-context button { border: 0; background: transparent; color: var(--muted); padding: 6px; font-size: 12px; text-decoration: underline; }
.preview-reply-target { display: block; margin-top: 8px; font-size: 12px; }
.comment-cta .comment-count { margin: 8px 0 16px; color: var(--muted); font-size: 14px; }
#comment-form { scroll-margin-top: 16px; }

/* Reader text sizes shared by the home, article, and comment pages. */
body { font-size: 16px; }
.nav a { font-size: 16px; }
.category, .tag { font-size: 14px; }
.intro h1 { font-size: 32px; }
.intro p:last-child, .feature-copy p, .about p { font-size: 16px; }
.feature-copy h2 { font-size: 25px; }
.section-head h2 { font-size: 20px; }
.pickup-copy h3 { font-size: 20px; }
.pickup-read { font-size: 14px; }
.story h3 { font-size: 24px; }
.story p { font-size: 16px; }
#filter-status { font-size: 14px; }
.about h2 { font-size: 28px; }
.ranking .section-head h2 { font-size: 19px; }
.ranking h3 { font-size: 17px; }
.related-link, .side-categories > a { font-size: 16px; }
.side-categories h2 { font-size: 18px; }
.breadcrumb, .source-note { font-size: 14px; }
.article-body h1 { font-size: 36px; }
.lead, .response p, .reader-comment, #comment-preview { font-size: 18px; }
.comment-cta h2 { font-size: 21px; }
.comment-cta p, .button { font-size: 16px; }
form h2 { font-size: 22px; }
label, input, textarea { font-size: 16px; }
.required { font-size: 12px; }
.comment-number,
.comment-actions button,
.comment-actions .reply-button,
.reply-context,
.reply-context button,
.preview-reply-target,
.back-top { font-size: 14px; }

@media (max-width: 1180px) {
    .pickup-copy h3 { font-size: 18px; }
}
@media (max-width: 920px) {
    .story h3 { font-size: 22px; }
}
@media (max-width: 720px) {
    .intro h1 { font-size: 28px; }
    .pickup-copy h3 { font-size: 19px; }
    .article-body h1 { font-size: 30px; }
}

/* Compact reading and posting area on comment pages. */
.comment-page .layout { margin-top: 20px; }
.comment-page #main { font-size: 14px; line-height: 1.65; }
.comment-page .breadcrumb { font-size: 12px; margin-bottom: 16px; }
.comment-page .article-body > .category { font-size: 12px; }
.comment-page .article-body h1 { font-size: 30px; line-height: 1.5; margin: 8px 0; }
.comment-page .article-body > p { margin: 8px 0; }
.comment-page .article-body .source-note { font-size: 12px; margin: 12px 0; padding: 10px; }
.comment-page .reader-comment { font-size: 16px; padding: 10px 12px; }
.comment-page .reader-comment > strong { font-size: 14px; }
.comment-page .reader-comment p { margin: 5px 0; }
.comment-page .reader-comment + .reader-comment { margin-top: 6px; }
.comment-page .comment-number { font-size: 12px; }
.comment-page .comment-actions { gap: 6px; margin-top: 6px; }
.comment-page .comment-actions button { height: 32px; min-height: 32px; font-size: 12px; }
.comment-page .comment-actions .reply-button,
.comment-page .comment-actions .votes button { padding: 4px 8px; }
.comment-page .reply-icon { width: 14px; height: 14px; }
.comment-page .comment-actions .votes { gap: 4px; }
.comment-page #comment-form { margin-top: 22px; }
.comment-page #comment-form h2 { font-size: 20px; margin: 12px 0; }
.comment-page #comment-form label { font-size: 14px; margin: 12px 0 4px; }
.comment-page #comment-form input,
.comment-page #comment-form textarea { font-size: 14px; padding: 8px 10px; }
.comment-page #comment-form .button { font-size: 14px; padding: 8px 16px; margin-top: 12px; }
.comment-page .reply-context { font-size: 12px; gap: 6px; padding: 8px 10px; }
.comment-page .reply-context button { font-size: 12px; padding: 4px; }
.comment-page .preview-reply-target { font-size: 12px; margin-top: 6px; }
.comment-page #comment-preview { font-size: 16px; padding: 12px; }
.comment-page #comment-preview p { margin: 8px 0; }
.comment-page .related .section-head { margin-top: 24px; padding-bottom: 8px; }
.comment-page .related .section-head h2 { font-size: 18px; }
.comment-page .related-link { font-size: 14px; padding-block: 10px; }

@media (max-width: 720px) {
    .comment-page .article-body h1 { font-size: 26px; }
}

/* Published article content and live reading statistics. */
.ranking #ranking-list > a { display: flex; gap: 11px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.ranking #ranking-list > a:last-child { border-bottom: 0; }
.image-empty { font-size: 12px; color: var(--muted); }
.reply-image { margin: 16px 0; }
.reply-image img { display: block; width: auto; max-width: 100%; height: auto; max-height: 900px; object-fit: contain; }
.youtube-embed { width: 100%; max-width: 560px; aspect-ratio: 16 / 9; margin: 14px 0; }
.youtube-embed iframe { display: block; width: 100%; height: 100%; border: 0; }
.side-newest { margin-top: 32px; }
.side-latest { margin-top: 32px; }
.side-story { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; font-weight: 400; line-height: 1.5; }
.side-story-art { display: flex; width: 72px; height: 58px; align-items: center; justify-content: center; overflow: hidden; border-radius: 3px; background: #e9e1d3; }
.side-story-art img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; }
.side-story-art .image-empty { font-size: 9px; }
.side-story-title { min-width: 0; overflow-wrap: anywhere; }
.side-categories { margin-top: 27px; }
.side-about { margin-top: 29px; }
.side-about h2 { position: relative; top: 5px; margin: 0 0 -2px; font-size: 16px; }
.side-about > a { display: block; padding: 8px 0; border-bottom: 1px solid var(--line); color: var(--green); font-size: 14px; font-weight: 400; }
.about-page { max-width: 760px; }
.about-page h1 { font-family: serif; font-size: 30px; line-height: 1.5; }
.about-page h2 { margin: 30px 0 10px; font-size: 20px; }
.about-page p { margin: 0 0 16px; line-height: 1.9; }
.about-page a { color: var(--green); text-decoration: underline; }
.contact-page { max-width: 680px; }
.contact-page h1 { font-family: serif; font-size: 30px; }
.contact-page > p { color: var(--muted); }
.contact-page form { margin-top: 24px; }
.contact-page label { margin: 18px 0 6px; font-weight: 700; }
.contact-page input, .contact-page textarea { font-size: 16px; }
.contact-page textarea { min-height: 180px; }
.contact-trap { position: absolute!important; left: -10000px!important; width: 1px!important; height: 1px!important; overflow: hidden!important; }
.footer-contact { display: inline-block; margin: 10px 18px 10px 0; font-size: 12px; color: var(--green); }