@charset "utf-8";
/* ============================================================
   アバンギャルド茶会 2026 追加スタイル
   トップページ新設セクション（シリーズ／人気記事／今日の一首／ニュース3分割）
   と、固定ページ下部のシリーズナビ。
   既存の top.css / under.css には手を入れず、このファイルだけで完結させる。
   ============================================================ */

.sec-lead {
    text-align: center;
    margin: 0 0 30px;
    font-size: 14px;
    line-height: 1.8;
    color: #555;
}
.sec-lead.f-white { color: #fff; }

/* ---------- A 茶道をはじめよう シリーズ ---------- */
.series-lead { margin: 0 auto 26px; max-width: 860px; }
.series-lead a {
    display: block;
    background: #fff;
    border: 2px solid #64ba6b;
    border-radius: 4px;
    padding: 26px 30px;
    text-decoration: none;
    transition: background .2s, box-shadow .2s;
}
.series-lead a:hover { background: #f4f7f2; box-shadow: 0 2px 10px rgba(0,0,0,.08); }
.series-lead .label {
    display: inline-block;
    background: #64ba6b;
    color: #fff;
    font-size: 11px;
    letter-spacing: .1em;
    padding: 3px 12px;
    border-radius: 2px;
    margin-bottom: 12px;
}
.series-lead .ttl {
    display: block;
    font-size: 20px;
    line-height: 1.6;
    font-weight: bold;
    color: #222;
}
.series-lead .more { display: block; margin-top: 12px; font-size: 13px; color: #3f8445; }

.series-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    max-width: 860px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}
.series-list li { width: 19.2%; margin-bottom: 14px; }
.series-list li a {
    display: block;
    height: 100%;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 16px 12px;
    text-decoration: none;
    transition: border-color .2s, background .2s;
}
.series-list li a:hover { border-color: #64ba6b; background: #f4f7f2; }
.series-list .no {
    display: block;
    font-size: 11px;
    letter-spacing: .08em;
    color: #64ba6b;
    margin-bottom: 8px;
    font-weight: bold;
}
.series-list .ttl { display: block; font-size: 13px; line-height: 1.6; color: #222; }

/* ---------- B よく読まれている記事 ---------- */
.pop-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0 auto 30px;
    padding: 0;
}
.pop-list li { width: 24%; list-style: none; }
.pop-list li a {
    display: block;
    height: 100%;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 20px 18px;
    text-decoration: none;
    text-align: left;
    transition: border-color .2s, box-shadow .2s;
}
.pop-list li a:hover { border-color: #64ba6b; box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.pop-list .cat {
    display: inline-block;
    font-size: 11px;
    color: #3f8445;
    border: 1px solid #cfe3d1;
    border-radius: 2px;
    padding: 2px 8px;
    margin-bottom: 10px;
}
.pop-list .ttl { display: block; font-size: 14px; line-height: 1.65; color: #222; }

/* ---------- C 今日の一首（利休百首） ---------- */
.rikyu-sec .l-wrap-inner { padding: 42px 0; }
.rikyu-sec h2 { margin-bottom: 2px; }
.rikyu-sec h3 { margin-bottom: 18px; }
.rikyu-today { max-width: 780px; margin: 0 auto; text-align: center; }
.rikyu-today .card {
    display: block;
    background: #fff;
    border-radius: 4px;
    padding: 24px 28px;
    text-decoration: none;
    transition: box-shadow .2s;
}
.rikyu-today .card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.14); }
.rikyu-today .no {
    display: inline-block;
    font-size: 11px;
    letter-spacing: .12em;
    color: #3f8445;
    border-bottom: 1px solid #cfe3d1;
    padding-bottom: 3px;
    margin-bottom: 11px;
}
.rikyu-today .poem {
    font-size: 19px;
    line-height: 1.75;
    color: #222;
    margin: 0 0 9px;
    letter-spacing: .04em;
}
.rikyu-today .note { font-size: 13px; line-height: 1.7; color: #666; margin: 0 0 11px; }
.rikyu-today .more { font-size: 13px; color: #3f8445; }

/* 「百首すべてを見る」を白ボックスの右端にそろえる */
.rikyu-more { text-align: right; margin: 12px 0 0; }
.rikyu-more a {
    display: inline-block;
    color: #fff;
    font-size: 13px;
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,.55);
    padding-bottom: 2px;
    transition: border-color .2s;
}
.rikyu-more a:hover { border-bottom-color: #fff; }

/* ---------- ニュース（カテゴリ別・縦積み） ---------- */
.news-cols {
    display: block;
    margin: 0 auto 10px;
    text-align: left;
}
.news-col { width: 100%; margin-bottom: 34px; }
.news-col:last-child { margin-bottom: 0; }
.news-col h3 {
    font-size: 17px;
    text-align: left;
    border-bottom: 2px solid #64ba6b;
    padding-bottom: 8px;
    margin: 0 0 4px;
}
.news-col ul { list-style: none; padding: 0; margin: 0; }
.news-col li { border-bottom: 1px dotted #ccc; }
.news-col li a { display: block; padding: 18px 2px; text-decoration: none; color: #222; }
.news-col li a:hover { color: #3f8445; }
.news-col .time { display: block; font-size: 12px; color: #888; margin-bottom: 6px; }
.news-col .ttl { display: block; font-size: 16px; line-height: 1.7; }
.news-col .more { display: block; text-align: right; font-size: 13px; padding-top: 12px; }
.news-col .more a { color: #3f8445; text-decoration: none; }
.news-col .more a:hover { text-decoration: underline; }

/* ---------- 固定ページ下部のシリーズナビ ---------- */
.series-nav {
    margin: 46px 0 10px;
    border: 2px solid #64ba6b;
    border-radius: 4px;
    padding: 22px 24px;
    background: #f4f7f2;
}
.series-nav h2 {
    font-size: 16px;
    margin: 0 0 4px;
    padding: 0;
    border: none;
    text-align: left;
    color: #3f8445;
}
.series-nav .desc { font-size: 12px; color: #666; margin: 0 0 14px; }
.series-nav ol { list-style: none; padding: 0; margin: 0; }
.series-nav li { border-top: 1px dotted #c3d6c5; }
.series-nav li:first-child { border-top: none; }
.series-nav li a,
.series-nav li .current {
    display: block;
    padding: 11px 4px;
    font-size: 14px;
    line-height: 1.6;
    text-decoration: none;
    color: #222;
}
.series-nav li a:hover { color: #3f8445; text-decoration: underline; }
.series-nav li .no {
    display: inline-block;
    min-width: 62px;
    font-size: 11px;
    font-weight: bold;
    color: #64ba6b;
    letter-spacing: .06em;
}
.series-nav li .current { background: #fff; font-weight: bold; border-radius: 3px; }
.series-nav li .current .no { color: #3f8445; }
.series-nav li .current .here {
    display: inline-block;
    margin-left: 10px;
    font-size: 10px;
    font-weight: normal;
    color: #fff;
    background: #64ba6b;
    border-radius: 2px;
    padding: 2px 8px;
    vertical-align: middle;
}

/* ---------- スマートフォン ---------- */
@media only screen and (max-width: 767px) {
    .series-lead a { padding: 20px 18px; }
    .series-lead .ttl { font-size: 16px; }
    .series-list li { width: 100%; margin-bottom: 8px; }
    .series-list li a { padding: 13px 14px; }
    .series-list .no { display: inline-block; min-width: 54px; margin-bottom: 0; }
    .series-list .ttl { display: inline; font-size: 13px; }

    .pop-list li { width: 100%; margin-bottom: 10px; }
    .pop-list li a { padding: 15px 16px; }

    .rikyu-sec .l-wrap-inner { padding: 32px 0; }
    .rikyu-today .card { padding: 20px 16px; }
    .rikyu-today .poem { font-size: 16px; line-height: 1.75; }

    .news-col { margin-bottom: 26px; }

    .series-nav { padding: 18px 16px; margin-top: 34px; }
    .series-nav li .no { display: block; min-width: 0; margin-bottom: 2px; }
    .series-nav li .current .here { display: block; margin: 6px 0 0; }
}

/* ============================================================
   サムネイル（2026-09-25 追加）
   ============================================================ */
.thumb { display: block; overflow: hidden; background: #f2f2f2; border-radius: 3px; }
.thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* A 扉：画像とテキストを横並びに */
.series-lead a { display: flex; align-items: center; gap: 22px; }
.series-lead .thumb { flex: 0 0 210px; width: 210px; aspect-ratio: 4 / 3; }
.series-lead .body { flex: 1 1 auto; min-width: 0; }

/* A Vol.1〜5：カード上部に正方形 */
.series-list .thumb { width: 100%; aspect-ratio: 1 / 1; margin-bottom: 10px; }

/* B 人気記事：カード上部に正方形 */
.pop-list li a { padding: 0 0 18px; overflow: hidden; }
.pop-list .thumb { width: 100%; aspect-ratio: 1 / 1; border-radius: 3px 3px 0 0; margin-bottom: 14px; }
.pop-list .cat, .pop-list .ttl { margin-left: 16px; margin-right: 16px; }

/* ニュース3分割：行の左に小さく */
.news-col li a { display: flex; align-items: center; gap: 18px; }
.news-col .thumb { flex: 0 0 110px; width: 110px; height: 110px; }
.news-col .body { flex: 1 1 auto; min-width: 0; }

@media only screen and (max-width: 767px) {
    .series-lead a { display: block; }
    .series-lead .thumb { width: 100%; flex: none; aspect-ratio: 16 / 9; margin-bottom: 14px; }
    .series-list li a { display: flex; align-items: center; gap: 12px; }
    .series-list .thumb { flex: 0 0 62px; width: 62px; height: 62px; aspect-ratio: auto; margin-bottom: 0; }
    .series-list .body { flex: 1 1 auto; min-width: 0; }
    .pop-list .thumb { aspect-ratio: 16 / 9; }

    .news-col h3 { font-size: 16px; }
    .news-col li a { gap: 13px; padding: 14px 2px; }
    .news-col .thumb { flex: 0 0 84px; width: 84px; height: 84px; }
    .news-col .ttl { font-size: 15px; line-height: 1.6; }
}

/* 「はじめての方へ」モード（シリーズ外のページ・記事で表示） */
.series-nav.is-promo { background: #fff; border-color: #cfe3d1; }
.series-nav.is-promo h2 { color: #3f8445; }
.series-nav-cta { margin: 16px 0 0; text-align: right; }
.series-nav-cta a {
    display: inline-block;
    background: #64ba6b;
    color: #fff;
    font-size: 13px;
    text-decoration: none;
    padding: 9px 22px;
    border-radius: 3px;
    transition: background .2s;
}
.series-nav-cta a:hover { background: #3f8445; }
@media only screen and (max-width: 767px) {
    .series-nav-cta { text-align: center; }
    .series-nav-cta a { display: block; }
}

/* ============================================================
   シリーズ外のページに出す単一CTA
   ============================================================ */
.series-cta { margin: 46px 0 10px; }
.series-cta-inner {
    display: flex;
    align-items: center;
    gap: 22px;
    background: #f4f7f2;
    border: 2px solid #64ba6b;
    border-radius: 4px;
    padding: 22px 26px;
    text-decoration: none;
    transition: background .2s, box-shadow .2s;
}
.series-cta-inner:hover { background: #eaf3ea; box-shadow: 0 2px 12px rgba(0,0,0,.08); }
.series-cta-thumb {
    flex: 0 0 150px;
    width: 150px;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 3px;
    background: #fff;
}
.series-cta-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.series-cta-body { flex: 1 1 auto; min-width: 0; }
.series-cta-label {
    display: block;
    font-size: 17px;
    font-weight: bold;
    color: #3f8445;
    margin-bottom: 8px;
}
.series-cta-lead {
    display: block;
    font-size: 13px;
    line-height: 1.85;
    color: #444;
    margin-bottom: 14px;
}
.series-cta-btn {
    display: inline-block;
    background: #64ba6b;
    color: #fff;
    font-size: 14px;
    padding: 10px 28px;
    border-radius: 3px;
    transition: background .2s;
}
.series-cta-inner:hover .series-cta-btn { background: #3f8445; }

@media only screen and (max-width: 767px) {
    .series-cta { margin-top: 34px; }
    .series-cta-inner { display: block; padding: 18px 16px; }
    .series-cta-thumb { width: 100%; flex: none; aspect-ratio: 16 / 9; margin-bottom: 14px; }
    .series-cta-label { font-size: 16px; }
    .series-cta-btn { display: block; text-align: center; }
}

/* ============================================================
   著者ボックス（記事・固定ページ末尾）
   ============================================================ */
.author-box { margin: 46px 0 0; padding: 22px 24px; background: #fafafa; border: 1px solid #ddd; border-radius: 4px; }
.author-label {
    font-size: 11px;
    letter-spacing: .12em;
    color: #3f8445;
    margin: 0 0 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e2e2e2;
}
.author-inner { display: flex; gap: 20px; align-items: flex-start; }
.author-photo { flex: 0 0 96px; width: 96px; }
.author-photo img { display: block; width: 100%; height: auto; border-radius: 50%; }
.author-body { flex: 1 1 auto; min-width: 0; }
.author-name { margin: 0 0 3px; font-size: 17px; font-weight: bold; line-height: 1.4; }
.author-name a { color: #222; text-decoration: none; }
.author-name a:hover { color: #3f8445; text-decoration: underline; }
.author-kana { display: inline-block; margin-left: 10px; font-size: 11px; font-weight: normal; color: #888; }
.author-role { margin: 0 0 10px; font-size: 12px; color: #3f8445; }
.author-bio { margin: 0 0 12px; font-size: 13px; line-height: 1.85; color: #444; }
.author-credits { list-style: none; margin: 0 0 12px; padding: 0; }
.author-credits li {
    font-size: 11.5px;
    line-height: 1.7;
    color: #666;
    padding-left: 15px;
    position: relative;
}
.author-credits li:before { content: "▸"; position: absolute; left: 0; color: #64ba6b; }
.author-more { margin: 0; text-align: right; font-size: 12px; }
.author-more a { color: #3f8445; text-decoration: none; }
.author-more a:hover { text-decoration: underline; }
/* 著者ボックスの直後にCTAが続くので、間隔を詰める */
.author-box + .series-cta,
.author-box + .series-nav { margin-top: 20px; }

@media only screen and (max-width: 767px) {
    .author-box { padding: 18px 16px; margin-top: 34px; }
    .author-inner { display: block; }
    .author-photo { width: 76px; margin: 0 auto 14px; }
    .author-name, .author-role { text-align: center; }
    .author-kana { display: block; margin: 3px 0 0; }
}

/* ============================================================
   メインビジュアルに重ねる文言（2026-09-25 追加）
   写真の上に載るため、可読性確保のグラデーションを敷く。
   ============================================================ */
.mainvisual { position: relative; }
.mv-copy {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 70px 20px 34px;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 100%);
    pointer-events: none;
}
.mv-copy-inner { max-width: 1000px; margin: 0 auto; }
.mv-copy-main {
    margin: 0 0 8px;
    color: #fff;
    font-size: 30px;
    font-weight: bold;
    line-height: 1.5;
    letter-spacing: .05em;
    text-shadow: 0 2px 10px rgba(0,0,0,.4);
}
.mv-copy-sub {
    margin: 0;
    color: #fff;
    font-size: 15px;
    line-height: 1.7;
    letter-spacing: .04em;
    text-shadow: 0 2px 8px rgba(0,0,0,.5);
}

/* ============================================================
   本文の読みやすさ（2026-09-25 調整）
   reset.css のスマホ指定 body{font-size:.9rem}=14.4px を 16px に戻し、
   日本語に合わせて行間を広げる。PCは元から16pxなので行間のみ調整。
   ============================================================ */
.single-style-content,
.single-style-content p,
.single-style-content li {
    font-size: 16px;
    line-height: 1.95;
}
.single-style-content p { margin-bottom: 1.6em; }
.single-style-content li { margin-bottom: .5em; }
/* 1行が長くなりすぎないように上限を設ける（日本語は40字前後が読みやすい） */
.single-style-content { max-width: 42em; }

@media only screen and (max-width: 767px) {
    body { font-size: 16px; }
    .single-style-content,
    .single-style-content p,
    .single-style-content li { font-size: 16px; line-height: 1.9; }
    .single-style-content { max-width: 100%; }

    .mv-copy { padding: 50px 18px 22px; }
    .mv-copy-main { font-size: 21px; }
    .mv-copy-sub { font-size: 13px; }
}

/* ============================================================
   公開日・更新日の表示（2026-09-25 SEO/AIO対応）
   構造化データには dateModified が入っているのに画面に出ていなかった。
   読者にもLLMにも「いつ更新された情報か」を伝える。
   ============================================================ */
.single-style .info-line .date {
    width: auto;
    max-width: 58%;
}
.single-style .info-line .time-mod {
    display: inline-block;
    margin-left: .6em;
    padding: 1px 9px;
    border-radius: 3px;
    background: #f4f7f2;
    color: #3f8445;
    font-size: 12px;
    line-height: 1.7;
    white-space: nowrap;
}
/* 固定ページは更新日のみなので左マージン不要 */
.page .single-style .info-line .time-mod {
    margin-left: 0;
}

@media only screen and (max-width: 767px) {
    .single-style .info-line .date { max-width: 100%; }
    .single-style .info-line .time-mod { margin-left: .5em; }
    .page .single-style .info-line .time-mod { margin-left: 0; }
}

/* ============================================================
   「次に読む」導線（2026-09-28 追加）
   記事末尾が行き止まりになっていたため新設。PCは3カラム、スマホは横型カードで縦積み。
   ============================================================ */
.next-reads {
    margin: 44px 0 0;
    padding: 22px 24px;
    background: #f4f7f2;
    border-radius: 4px;
}
.next-reads-ttl {
    margin: 0 0 14px;
    font-size: 15px;
    font-weight: bold;
    color: #3f8445;
    letter-spacing: .04em;
}
.next-reads-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 16px;
}
.next-reads-list > li { flex: 1 1 0; min-width: 0; }
.next-reads-list a {
    display: block;
    height: 100%;
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
    text-decoration: none;
    color: #222;
    transition: box-shadow .2s ease;
}
.next-reads-list a:hover { box-shadow: 0 2px 10px rgba(0,0,0,.12); }
.next-reads-thumb {
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #eee;
}
.next-reads-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.next-reads-body { display: block; padding: 12px 14px 14px; }
.next-reads-title {
    display: block;
    font-size: 14px;
    line-height: 1.6;
    font-weight: bold;
}
.next-reads-list a:hover .next-reads-title { color: #3f8445; }

/* ============================================================
   著者ボックスのコンパクト化（2026-09-28）
   旧版は886px＝スマホほぼ1画面を占めていた。略歴・助成実績は
   Person構造化データ側に全文が入っているので、画面上は軽くする。
   ※旧マークアップの .author-inner は廃止し、.author-box 自身をflexにした
   ============================================================ */
.author-box {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    margin: 20px 0 0;
    padding: 18px 22px;
}
.author-box .author-photo { flex: 0 0 64px; width: 64px; margin: 0; }
.author-box .author-body  { flex: 1 1 auto; min-width: 0; }
.author-box .author-label { margin: 0 0 6px; }
.author-box .author-bio   { margin: 0 0 8px; font-size: 12.5px; line-height: 1.75; }
.author-box .author-more  { margin: 0; }

@media only screen and (max-width: 767px) {
    /* 次に読む：横型カードで縦積み */
    .next-reads { padding: 18px 16px; margin-top: 34px; }
    .next-reads-list { display: block; }
    .next-reads-list > li + li { margin-top: 10px; }
    .next-reads-list a {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 8px;
    }
    .next-reads-thumb {
        flex: 0 0 88px;
        width: 88px;
        aspect-ratio: 1 / 1;
        border-radius: 3px;
    }
    .next-reads-body { padding: 0; flex: 1 1 auto; min-width: 0; }
    .next-reads-title { font-size: 15px; }

    /* 著者ボックス：スマホでも横並びのまま小さく（旧版の中央寄せ指定を打ち消す） */
    .author-box { display: flex; gap: 14px; padding: 16px; margin-top: 16px; }
    .author-box .author-photo { flex: 0 0 56px; width: 56px; margin: 0; }
    .author-box .author-name,
    .author-box .author-role { text-align: left; }
    .author-box .author-kana { display: inline-block; margin: 0 0 0 8px; }

    /* 目次：スマホでは畳んだ状態が初期値（JS側で制御）。閉じている間は余白を詰める */
    #toc_container { margin: 0 0 18px !important; padding: 10px 14px !important; }
    #toc_container .toc_title { margin: 0 !important; font-size: 14px; }
    #toc_container.ava-toc-open .toc_title { margin-bottom: 8px !important; }

    /* 記事タイトル：本文16pxとの差が小さく埋もれていたため拡大 */
    .single-style h1 { font-size: 26px; line-height: 1.45; }
}

/* ------------------------------------------------------------
   目次の開閉（2026-09-28 修正）
   JSで display を触ると Table of Contents Plus 側が後から表示に戻してしまうため、
   CSS側を正とする。!important はスタイルシート指定がインラインstyleに優先するので、
   プラグインが display:block を直接書き込んでも閉じたままになる。
   ------------------------------------------------------------ */
@media only screen and (max-width: 767px) {
    #toc_container:not(.ava-toc-open) .toc_list { display: none !important; }
    #toc_container .toc_toggle a { font-weight: bold; }
}