@charset "UTF-8";
/* ==========================================================================
   Warm & Gentle News Aesthetic
   design/stitch_heartwarming_news_portal/DESIGN.md をプレーンCSSに実装したもの。
   （Tailwind CDN は実行時コンパイルで初期表示が遅れるため不採用）
   ========================================================================== */

:root {
    /* --- surface --- */
    --background: #fff8f4;
    --surface-dim: #e2d8d1;
    --surface-lowest: #ffffff;
    --surface-low: #fcf2ea;
    --surface-container: #f6ece5;
    --surface-high: #f1e6df;
    --surface-variant: #ebe1da;

    /* --- text --- */
    --on-surface: #1f1b17;
    --on-surface-variant: #53433e;
    --outline: #85736d;
    --outline-variant: #d8c2bb;

    /* --- primary (terracotta peach) --- */
    --primary: #8c4e36;
    --on-primary: #ffffff;
    --primary-container: #e89b7e;
    --on-primary-container: #68321c;

    /* --- secondary (sage green) --- */
    --secondary: #406749;
    --secondary-container: #bfeac5;
    --on-secondary-container: #446b4d;

    /* --- shape --- */
    --r: .5rem;
    --r-lg: 1rem;
    --r-xl: 1.5rem;
    --r-2xl: 2rem;
    --r-full: 9999px;

    /* --- layout --- */
    --container: 1200px;
    --gutter: 24px;
    --margin-mobile: 16px;
    --margin-desktop: 40px;
    --section-gap: 80px;

    /* --- type --- */
    --font-head: "Plus Jakarta Sans", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Noto Sans JP", sans-serif;
    --font-body: "Nunito Sans", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Noto Sans JP", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.75;
    background: var(--background);
    color: var(--on-surface);
    -webkit-font-smoothing: antialiased;
}

::selection { background: var(--primary-container); color: var(--on-primary-container); }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.wrap {
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--margin-mobile);
}
@media (min-width: 768px) { .wrap { padding-inline: var(--margin-desktop); } }

.visually-hidden {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
    position: sticky; top: 0; z-index: 50;
    background: rgba(255, 248, 244, .85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.site-nav {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; padding-block: 16px;
}
.brand {
    font-family: var(--font-head);
    font-size: 24px; font-weight: 800; line-height: 30px;
    color: var(--primary); letter-spacing: -.01em;
    white-space: nowrap;
}
.brand small {
    display: block;
    font-family: var(--font-body);
    font-size: 11px; font-weight: 400; line-height: 16px; letter-spacing: .04em;
    color: var(--on-surface-variant);
}
.nav-links { display: none; align-items: center; gap: 32px; }
@media (min-width: 900px) { .nav-links { display: flex; } }
.nav-links a {
    font-family: var(--font-head);
    font-size: 14px; font-weight: 600; letter-spacing: .05em;
    color: var(--on-surface-variant);
    padding-bottom: 4px; border-bottom: 2px solid transparent;
    transition: color .3s, border-color .3s;
}
.nav-links a:hover { color: var(--primary); }
.nav-links a.is-active { color: var(--primary); border-bottom-color: var(--primary); }

/* 狭い画面ではカテゴリを横スクロールで見せる */
.nav-scroller {
    display: flex; gap: 20px; overflow-x: auto;
    max-width: var(--container); margin-inline: auto;
    padding: 0 var(--margin-mobile) 12px;
    scrollbar-width: none;
}
.nav-scroller::-webkit-scrollbar { display: none; }
.nav-scroller a {
    font-family: var(--font-head); font-size: 13px; font-weight: 600;
    color: var(--on-surface-variant); white-space: nowrap;
}
.nav-scroller a.is-active { color: var(--primary); }
@media (min-width: 900px) { .nav-scroller { display: none; } }

/* ==========================================================================
   Buttons / chips / tags
   ========================================================================== */
.btn {
    display: inline-block;
    font-family: var(--font-head); font-size: 14px; font-weight: 600; letter-spacing: .05em;
    padding: 10px 24px; border-radius: var(--r-full);
    background: var(--primary); color: var(--on-primary);
    border: 0; cursor: pointer;
    transition: transform .2s, opacity .2s, box-shadow .2s;
}
.btn:hover { opacity: .92; transform: translateY(-2px); box-shadow: 0 12px 24px -8px rgba(140,78,54,.3); }
/* ヘッダーのボタンは狭い画面で折り返して不格好になるため、フッターの導線に任せて隠す */
@media (max-width: 560px) { .site-nav .btn { display: none; } }
.btn:active { transform: scale(.97); }
.btn--ghost { background: var(--surface-high); color: var(--on-surface-variant); }
.btn--ghost:hover { background: var(--secondary-container); color: var(--on-secondary-container); box-shadow: none; }

.chips { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 40px; }
.chip {
    font-family: var(--font-head); font-size: 12px; font-weight: 700; line-height: 16px;
    padding: 9px 22px; border-radius: var(--r-full);
    background: var(--surface-high); color: var(--on-surface-variant);
    transition: background .2s, color .2s;
}
.chip:hover { background: var(--secondary-container); color: var(--on-secondary-container); }
.chip.is-active { background: var(--primary); color: var(--on-primary); }

.tag {
    display: inline-block;
    font-family: var(--font-head); font-size: 12px; font-weight: 700; line-height: 16px;
    padding: 3px 10px; border-radius: var(--r);
    background: var(--secondary-container); color: var(--on-secondary-container);
}
.tag--primary { background: var(--primary); color: var(--on-primary); }
.tag--pill { border-radius: var(--r-full); padding: 5px 16px; }

.meta {
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
    font-family: var(--font-head); font-size: 12px; font-weight: 600;
    color: var(--on-surface-variant);
}
.meta .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--outline-variant); }

/* ==========================================================================
   Page head (hero)
   ========================================================================== */
.page-head { position: relative; padding: 32px 0 48px; }
.page-head::before {
    content: ""; position: absolute; z-index: -1;
    top: -40px; right: -40px; width: 320px; height: 320px;
    background: var(--primary-container); opacity: .18;
    border-radius: 50%; filter: blur(60px);
}
.page-head .inner { max-width: 46rem; }
.page-head h1 {
    font-family: var(--font-head);
    font-size: 32px; line-height: 42px; font-weight: 700; letter-spacing: -.02em;
    margin: 16px 0 20px;
}
.page-head h1 .accent { color: var(--primary); }
.page-head p { font-size: 17px; line-height: 28px; color: var(--on-surface-variant); max-width: 40rem; }
@media (min-width: 768px) {
    .page-head h1 { font-size: 46px; line-height: 60px; }
}

.breadcrumb {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding-top: 24px;
    font-family: var(--font-head); font-size: 12px; font-weight: 700;
    color: var(--on-surface-variant);
}
.breadcrumb a:hover { color: var(--primary); }
.breadcrumb .sep { color: var(--outline-variant); }
.breadcrumb .current { color: var(--primary); }

/* ==========================================================================
   Featured (bento)
   ========================================================================== */
.featured {
    display: grid; grid-template-columns: 1fr; gap: var(--gutter);
    margin-bottom: 64px;
}
@media (min-width: 900px) { .featured { grid-template-columns: 2fr 1fr; } }

.feature-main {
    position: relative; display: block; overflow: hidden;
    border-radius: var(--r-2xl); min-height: 380px;
    background: var(--surface-variant);
    box-shadow: 0 20px 40px -10px rgba(140,78,54,.08);
    transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s;
}
@media (min-width: 900px) { .feature-main { min-height: 500px; } }
.feature-main:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -15px rgba(140,78,54,.16); }
.feature-main img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    transition: transform .7s;
}
.feature-main:hover img { transform: scale(1.05); }
.feature-main .scrim {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(31,27,23,.85) 0%, rgba(31,27,23,.35) 38%, transparent 68%);
}
.feature-main .body {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 28px; color: #fff;
}
@media (min-width: 768px) { .feature-main .body { padding: 40px; } }
.feature-main h2 {
    font-family: var(--font-head);
    font-size: 23px; line-height: 34px; font-weight: 700;
    margin: 12px 0 10px;
}
@media (min-width: 768px) { .feature-main h2 { font-size: 31px; line-height: 44px; } }
.feature-main .meta { color: rgba(255,255,255,.85); }
.feature-main .meta .dot { background: rgba(255,255,255,.45); }

.feature-side { display: flex; flex-direction: column; gap: var(--gutter); }
.feature-side .card-sm {
    display: flex; flex-direction: column; height: 100%;
    background: var(--surface-lowest);
    border-radius: var(--r-2xl); padding: 24px;
    box-shadow: 0 20px 40px -10px rgba(140,78,54,.08);
    transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s;
}
.feature-side .card-sm:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -15px rgba(140,78,54,.16); }
.feature-side .thumb {
    height: 180px; border-radius: var(--r-xl); overflow: hidden; margin-bottom: 16px;
    background: var(--surface-variant);
}
.feature-side .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.feature-side .card-sm:hover .thumb img { transform: scale(1.08); }
.feature-side .cat { font-family: var(--font-head); font-size: 12px; font-weight: 700; color: var(--secondary); }
.feature-side h3 {
    font-family: var(--font-head); font-size: 19px; line-height: 28px; font-weight: 600;
    margin: 8px 0;
}
.feature-side p { font-size: 14px; line-height: 24px; color: var(--on-surface-variant); }

/* ==========================================================================
   Card grid
   ========================================================================== */
.grid {
    display: grid; grid-template-columns: 1fr;
    column-gap: var(--gutter); row-gap: 48px;
}
@media (min-width: 640px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid { grid-template-columns: repeat(3, 1fr); } }

.card { display: block; }
.card .thumb {
    aspect-ratio: 4 / 3; overflow: hidden; margin-bottom: 20px;
    border-radius: var(--r-2xl); background: var(--surface-variant);
    box-shadow: 0 20px 40px -10px rgba(140,78,54,.08);
    transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s;
}
.card:hover .thumb { transform: translateY(-4px); box-shadow: 0 30px 60px -15px rgba(140,78,54,.16); }
.card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.card .thumb--empty {
    display: flex; align-items: center; justify-content: center;
    background: var(--surface-container); color: var(--outline);
    font-family: var(--font-head); font-size: 13px; font-weight: 700;
}
.card .body { padding-inline: 8px; }
.card h2, .card h3 {
    font-family: var(--font-head); font-size: 19px; line-height: 29px; font-weight: 600;
    margin: 12px 0 8px;
    transition: color .2s;
}
.card:hover h2, .card:hover h3 { color: var(--primary); }
.card p {
    font-size: 14px; line-height: 25px; color: var(--on-surface-variant);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

.empty {
    text-align: center; color: var(--on-surface-variant);
    padding: 80px 0; font-size: 15px;
}

/* ==========================================================================
   Pager
   ========================================================================== */
.pager { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 64px; }
.pager .count { font-family: var(--font-head); font-size: 12px; font-weight: 600; color: var(--on-surface-variant); }
.pager .links { display: flex; align-items: center; gap: 12px; }

/* ==========================================================================
   Article
   ========================================================================== */
.article { max-width: 46rem; margin-inline: auto; padding-bottom: 24px; }
.article h1 {
    font-family: var(--font-head);
    font-size: 29px; line-height: 44px; font-weight: 700; letter-spacing: -.02em;
    margin: 16px 0;
}
@media (min-width: 768px) { .article h1 { font-size: 38px; line-height: 56px; } }

.article-hero {
    display: block; margin: 24px 0 6px;
    border-radius: var(--r-2xl); overflow: hidden;
    box-shadow: 0 20px 40px -10px rgba(140,78,54,.08);
}
.article-hero img { width: 100%; height: auto; }
.illust-note { font-size: 11px; color: var(--outline); text-align: right; margin-bottom: 32px; }

.article-body { font-size: 17px; line-height: 32px; }
.article-body p { margin-bottom: 1.5em; }
.article-body h2 {
    font-family: var(--font-head); font-size: 21px; line-height: 32px; font-weight: 700;
    margin: 2.2em 0 .8em;
}

/* 引用（著作権法32条の要件に沿って、本文と明瞭に区別する） */
.article-body blockquote {
    position: relative;
    margin: 2em 0; padding: 24px 26px;
    background: var(--surface-low);
    border-left: 4px solid var(--primary-container);
    border-radius: var(--r-lg);
}
.article-body blockquote .quote-original {
    font-size: 16px; line-height: 28px; font-style: italic;
    color: var(--on-surface); margin-bottom: .8em;
}
.article-body blockquote .quote-translation {
    font-size: 15px; line-height: 27px; color: var(--on-surface-variant);
    padding-top: .8em; border-top: 1px dashed var(--outline-variant);
}
.article-body blockquote .quote-translation::before {
    content: "訳: "; font-family: var(--font-head); font-size: 11px; font-weight: 700;
    letter-spacing: .06em; color: var(--outline);
}
.article-body blockquote cite {
    display: block; margin-top: .9em;
    font-family: var(--font-head); font-size: 12px; font-weight: 600; font-style: normal;
    color: var(--outline);
}
.article-body blockquote cite a { color: var(--primary); }
.article-body blockquote cite a:hover { text-decoration: underline; }

/* SNSシェア（外部スクリプト不使用・モバイル優先） */
.share { margin-top: 40px; }
.share-label {
    display: block;
    font-family: var(--font-head); font-size: 12px; font-weight: 700; letter-spacing: .06em;
    color: var(--outline); margin-bottom: 10px;
}
.share-buttons { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 560px) { .share-buttons { grid-template-columns: repeat(4, 1fr); } }

.share-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    /* 指で押しやすい高さを確保する */
    min-height: 48px; padding: 0 12px;
    border-radius: var(--r-full);
    font-family: var(--font-head); font-size: 13px; font-weight: 700;
    color: #fff; background: var(--on-surface);
    transition: transform .15s, opacity .15s;
}
.share-btn:hover { opacity: .88; transform: translateY(-2px); }
.share-btn:active { transform: scale(.97); }
.share-btn svg { width: 17px; height: 17px; fill: currentColor; flex-shrink: 0; }

.share-btn--x      { background: #000; }
.share-btn--fb     { background: #1877f2; }
.share-btn--line   { background: #06c755; }
.share-btn--hatena { background: #00a4de; }
.hatena-mark { font-size: 14px; font-weight: 800; line-height: 1; }

/* 当サイト独自の補足（背景 / 日本から見ると） */
.note-box {
    margin: 36px 0;
    padding: 24px 26px;
    border-radius: var(--r-xl);
    background: var(--surface-low);
    border-left: 4px solid var(--outline-variant);
}
.note-box h2 {
    font-family: var(--font-head); font-size: 17px; line-height: 26px; font-weight: 700;
    margin-bottom: 10px;
}
.note-box p { font-size: 15px; line-height: 28px; color: var(--on-surface-variant); }
.note-box--bg { border-left-color: var(--outline-variant); }
.note-box--jp {
    background: var(--secondary-container);
    border-left-color: var(--secondary);
}
.note-box--jp h2 { color: var(--on-secondary-container); }
.note-box--jp p { color: #2f4a36; }

/* 動画・地図などの付加セクション */
.extra { margin-top: 40px; }
.extra h2 {
    font-family: var(--font-head); font-size: 18px; line-height: 26px; font-weight: 700;
    margin-bottom: 14px;
}
.extra-note { font-size: 11px; color: var(--outline); text-align: right; margin-top: 8px; }

.video-embed, .map-embed {
    position: relative; width: 100%; aspect-ratio: 16 / 9;
    border-radius: var(--r-xl); overflow: hidden;
    background: var(--surface-variant);
}
.map-embed { aspect-ratio: 16 / 10; }
.video-embed iframe, .map-embed iframe {
    position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}

.place-box {
    background: var(--surface-container);
    border-radius: var(--r-xl);
    padding: 24px;
}
.place-box h2 { margin-bottom: 10px; }
.place-name {
    font-family: var(--font-head); font-size: 15px; font-weight: 700;
    color: var(--primary); margin-bottom: 8px;
}
.place-note { font-size: 15px; line-height: 27px; color: var(--on-surface-variant); }
.place-box .map-embed { margin-top: 18px; }

.article .source {
    margin-top: 40px; padding: 20px 24px;
    background: var(--surface-container); border-radius: var(--r-lg);
    font-size: 14px; line-height: 24px; color: var(--on-surface-variant);
}
.article .source a { color: var(--primary); font-weight: 700; }
.article .source a:hover { text-decoration: underline; }

/* ==========================================================================
   Info box（design のニュースレター枠の位置づけ）
   ========================================================================== */
.info-box {
    position: relative; overflow: hidden;
    background: var(--surface-container);
    border-radius: var(--r-2xl);
    padding: 40px 32px;
    margin-top: var(--section-gap);
}
.info-box > * { position: relative; z-index: 1; }
.info-box::after {
    content: ""; position: absolute; z-index: 0; right: -60px; bottom: -80px;
    width: 260px; height: 260px; border-radius: 50%;
    background: var(--primary-container); opacity: .22; filter: blur(50px);
}
.info-box h2 {
    font-family: var(--font-head); font-size: 23px; line-height: 34px; font-weight: 700;
    margin-bottom: 12px;
}
.info-box p { font-size: 15px; line-height: 26px; color: var(--on-surface-variant); max-width: 40rem; }
.info-box .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

/* ==========================================================================
   Section heading
   ========================================================================== */
.section-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 16px; margin: 64px 0 28px;
}
.section-head h2 {
    font-family: var(--font-head); font-size: 23px; line-height: 32px; font-weight: 700;
}
.section-head a { font-family: var(--font-head); font-size: 13px; font-weight: 700; color: var(--primary); }

/* ==========================================================================
   Ads
   ========================================================================== */
.ad-unit { margin: 48px 0; text-align: center; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
    margin-top: var(--section-gap);
    background: var(--surface-container);
    padding: 56px 0 40px;
}
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 32px; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr; } }
.footer-grid h3 {
    font-family: var(--font-head); font-size: 12px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--on-surface); margin-bottom: 14px;
}
.footer-grid ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-grid a { font-size: 14px; color: var(--on-surface-variant); }
.footer-grid a:hover { color: var(--primary); }
.site-footer .about { font-size: 13px; line-height: 24px; color: var(--on-surface-variant); max-width: 22rem; margin-top: 14px; }
.site-footer .copyright {
    margin-top: 40px; padding-top: 24px;
    border-top: 1px solid var(--outline-variant);
    font-size: 12px; color: var(--outline);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
    html { scroll-behavior: auto; }
}