/* =========================================
   まちナーレ 共通CSS（全ページ）
   ========================================= */

/* 色の値の正は theme.json の settings.custom（--wp--custom--color--*）。
   ここでは短い別名にブリッジし、フォールバック値で theme.json 不在時も保護する。
   エリアごとの色変更は子テーマ theme.json の settings.custom 上書きで行う。
   ライター用パレット（黒/赤/緑/青）のみ settings.color.palette（プリセット）。 */
:root {
    --machi-main:      var(--wp--custom--color--main, #0f766e);
    --machi-main-dark: var(--wp--custom--color--main-dark, #115e59);
    --machi-accent:    var(--wp--custom--color--accent, #f59e0b);
    --machi-bg:        var(--wp--custom--color--bg, #f7faf9);
    --machi-text:      var(--wp--custom--color--text, #1f2937);
    --machi-muted:     var(--wp--custom--color--muted, #6b7280);
    --machi-card:      var(--wp--custom--color--card, #ffffff);
    --machi-border:    var(--wp--custom--color--border, #e5e7eb);
}

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

body {
    margin: 0;
    background: var(--machi-bg);
    color: var(--machi-text);
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic",
                 "YuGothic", "Noto Sans JP", sans-serif;
    line-height: 1.7;
}

a {
    color: inherit;
    text-decoration: none;
}

/* =========================================
   アナウンスバー（最上部・全幅）
   ========================================= */
.machi-announce-bar {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--machi-main);
    color: #fff;
    text-align: center;
    font-size: 1rem;
    font-weight: 700;
    padding: 8px 16px;
    line-height: 1.5;
}

/* =========================================
   ヘッダー
   ========================================= */
.machi-site-header {
    position: relative;
    color: #fff;
    text-align: center;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* 全ページ共通で高さを揃える（元はトップだけの高さだったが、
       全ページにタグライン帯を出すようになったため統一）。
       コンテンツ高(約216px)＋上下に約22pxずつ背景を覗かせて260px。 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 260px;
    padding-top: 22px;
    padding-bottom: 0;
}

/* ロゴをまとめたトップへのリンク */
.machi-header-home {
    display: block;
    text-decoration: none;
    color: inherit;
}

.machi-site-logo {
    display: block;
    max-height: 54px;
    width: auto;
    margin: 0 auto;
}

.machi-header-band {
    background: rgba(255, 255, 255, 0.88);
    border: 1.5px solid var(--wp--custom--color--head-green, #4FBF9F);
    border-radius: 14px;
    /* 文字色は「東大阪市の最新Q&A」等の見出しと同じベースの緑
       （--machi-main-dark）。枠線は他の緑罫線と揃えて head-green のまま。 */
    color: var(--machi-main-dark);
    padding: 6px 14px;
    /* 帯は中の文字の幅に合わせて縮める（画面幅いっぱいには広げない）。
       .machi-site-header は display:flex; align-items:center のため、
       widthを指定しなければ自動でコンテンツ幅に収まる。長文で画面端に
       付かないよう max-width だけ安全のため残す。 */
    max-width: 100%;
    width: fit-content;
    box-sizing: border-box;
    /* ロゴとの間隔（flex-startなので auto ではなく固定値）＋左右中央寄せ */
    margin: 16px auto 0;
}

.machi-site-tagline {
    margin: 0;
    font-size: 1.25rem;
    line-height: 1.5;
    font-weight: 700;
}

@media (max-width: 600px) {
    /* モバイルは上下を詰める（ロゴ・トグルとも上端 16px に揃う）。 */
    .machi-site-header {
        min-height: 200px;
        padding-top: 16px;
        padding-bottom: 16px;
    }
    /* 帯は文字幅に合わせて縮むが、長文で画面端に付かないよう
       左右の安全マージンだけ確保する（CTAの質問フォームと同じ余白）。
       ロゴと同じ中央寄せ（.machi-site-header の align-items:center）は
       そのまま活かし、SPだけ全体を約80%に縮小する。 */
    .machi-header-band {
        max-width: calc(100% - 40px);
        margin: 16px 20px 0;
        padding: 5px 12px;
        border-radius: 11px;
    }
    .machi-site-tagline {
        font-size: 1rem;
    }
    /* ロゴ縮小＋幅制限：トグル（右16+48px）との横方向の衝突を回避
       ※ %指定は親(.machi-header-home)がflexのshrink-to-fitで循環するため100vw基準 */
    .machi-site-logo {
        max-height: 44px;
        max-width: calc(100vw - 148px);
    }
    .machi-nav-toggle {
        top: 16px;
    }
    /* 下層ページ：ロゴと背景画像が混ざるのを防ぐかまぼこ形グラデーション。
       ロゴ中心（top:16px + 高さ44px/2 = 38px）を中心にした楕円で自然に透明に溶ける。
       z-index:1 でヒーロー画像の手前に出し、ロゴは z-index:2 で上に積む */
    body:not(.home):not(.front-page) .machi-site-header::before {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 35px;
        background: radial-gradient(ellipse 70% 100% at 50% 100%, rgba(255, 255, 255, 0.92), transparent);
        pointer-events: none;
        z-index: 1;
    }
    body:not(.home):not(.front-page) .machi-header-home {
        position: relative;
        z-index: 2;
    }
}

/* =========================================
   ハンバーガーボタン
   ========================================= */
.machi-nav-toggle {
    position: absolute;
    /* ヘッダーの padding-top と揃え、ロゴと同じ高さレベルに置く */
    top: 22px;
    right: 16px;
    z-index: 30;
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 999px;
    background: var(--machi-main);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: background 0.15s;
}

.machi-nav-toggle:hover {
    background: var(--machi-main-dark);
}

.machi-nav-toggle-bar {
    display: block;
    width: 22px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: transform 0.25s, opacity 0.25s;
}

/* 開いている時は×印に */
.machi-nav-open .machi-nav-toggle-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.machi-nav-open .machi-nav-toggle-bar:nth-child(2) {
    opacity: 0;
}
.machi-nav-open .machi-nav-toggle-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* =========================================
   グローバルナビ（ドロワー）
   ========================================= */
.machi-global-nav {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 50;
    width: 280px;
    max-width: 84vw;
    height: 100vh;
    background: #fff;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
    transform: translateX(100%);
    transition: transform 0.28s ease;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.machi-nav-open .machi-global-nav {
    transform: translateX(0);
}

/* オーバーレイ */
.machi-global-nav::before {
    content: '';
}

.machi-nav-open::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(0, 0, 0, 0.4);
}

.machi-global-nav-inner {
    padding: 72px 0 24px;
}

.machi-global-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.machi-global-nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 24px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--machi-text);
    text-decoration: none;
    border-bottom: 1px solid var(--machi-border);
    transition: background 0.15s;
}

.machi-global-nav-link:hover {
    background: var(--machi-bg);
    color: var(--machi-main);
}

/* メニュー内検索フォーム */
.machi-global-nav-search-item {
    padding: 16px 24px;
}

/* メニュー内見出しラベル（検索 など） */
.machi-global-nav-heading {
    margin: 0 0 8px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--machi-muted);
}

.machi-search-form {
    display: flex;
    gap: 8px;
}

.machi-search-input {
    flex: 1;
    min-width: 0;
    padding: 10px 12px;
    font-size: 1rem;
    border: 1px solid var(--machi-border);
    border-radius: 6px;
    background: var(--machi-bg);
    color: var(--machi-text);
    font-family: inherit;
    transition: border-color 0.2s, background 0.2s;
}

.machi-search-input:focus {
    outline: none;
    border-color: var(--wp--custom--color--head-green, #4FBF9F);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(79, 191, 159, 0.1);
}

.machi-search-input::placeholder {
    color: var(--machi-muted);
}

.machi-search-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: var(--wp--custom--color--head-green, #4FBF9F);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 1.125rem;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
}

.machi-search-button:hover {
    background: var(--wp--custom--color--head-deep, #2F6F62);
}

.machi-search-button:active {
    transform: scale(0.95);
}

/* flexアイテム（.machi-search-button）の子として配置されるSVGは、
   flex-shrinkの既定値(1)により幅が0に潰れることがあるため
   flex-shrink:0と明示的なwidth/heightで固定する。 */
.machi-search-button-icon {
    display: block;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: #fff;
}

/* メニュー内 CTA（あなたの疑問入力フォーム）
   検索フォームとカテゴリーリストの間を区切り線で分離 */
.machi-global-nav-cta-item {
    padding: 16px 24px;
    border-top: 1px solid var(--machi-border);
    border-bottom: 1px solid var(--machi-border);
}

.machi-global-nav-cta {
    display: block;
    padding: 12px 16px;
    text-align: center;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    background: var(--machi-main);
    border-radius: 8px;
    transition: background 0.2s, transform 0.15s;
}

.machi-global-nav-cta:hover {
    background: var(--machi-main-dark);
    color: #fff;
}

.machi-global-nav-cta:active {
    transform: scale(0.98);
}

.machi-global-nav-icon {
    font-size: 1rem;
}

.machi-global-nav-dot {
    width: 12px;
    height: 12px;
    border-radius: 999px;
    flex-shrink: 0;
}

/* ナビ開時に背面スクロールを抑制 */
.machi-nav-open {
    overflow: hidden;
}

/* =========================================
   CTA バナー
   ========================================= */
.machi-cta-band {
    max-width: 1120px;
    margin: 0 auto;
    /* 上下とも同じ値にして、ヘッダーとの距離＝次セクションとの距離を揃える。 */
    padding: 24px 20px;
}

/* コメント投稿欄は .machinale-composer（下辺なし）＋ .machinale-composer-actions
   （上辺なし）を隙間なく重ねて1つの箱に見せているが、これは操作行が常に
   表示されている前提。ここでは操作行を折りたたみ時に隠すため、外側の
   .machi-question-composer 自体に枠を持たせ、内側の2つは枠なしにする
   （操作行の有無にかかわらず下辺が必ず閉じるようにするため）。 */
.machi-cta-band .machi-question-composer {
    background: #fff;
    border: 1px solid var(--wp--custom--color--head-green, #4FBF9F);
    border-radius: 12px;
    overflow: hidden;
    /* .machinale-comments 由来の margin:1.8em 0 を消し、上下とも
       .machi-cta-band 自体のpaddingだけで間隔を揃える。 */
    margin-top: 0;
    margin-bottom: 0;
}

.machi-cta-band .machi-question-composer .machinale-composer,
.machi-cta-band .machi-question-composer .machinale-composer-actions {
    background: none;
    border: none;
    border-radius: 0;
}

/* フォーム本体（.wpcf7）は他のCF7フォーム用に緑カードの見た目を持つが、
   ここでは二重の枠になってしまうため打ち消す。入力欄・送信ボタンの見た目は
   お問い合わせフォーム共通のスタイル（.wpcf7-form textarea 等）をそのまま使う。 */
.machi-cta-band .wpcf7 {
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    margin-top: 0;
}

/* CF7が自動生成する非表示要素（アクセシビリティ用の応答領域・hidden入力の
   fieldset）。プラグイン本体のCSSはこのショートコードがテンプレート側から
   呼ばれているため読み込まれず、ブラウザ既定のfieldset枠が見えてしまう。 */
.machi-cta-band .screen-reader-response {
    position: absolute;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
}

.machi-cta-band .hidden-fields-container {
    display: none;
}

/* 折りたたみ／展開（JS: navigation.js が本文欄フォーカスで .is-active を付与）。
   初期状態は1行だけの小さな入力欄にし、注記・操作行（ニックネーム・送信）は
   隠しておく。フォーカスした瞬間に本文欄が広がり、両方が現れる。 */
.machi-cta-band .machi-question-composer textarea {
    /* CF7が rows="10" を出力するうえ、お問い合わせフォーム共通スタイルが
       min-height:180px を持つため、height・min-height の両方を明示して
       折りたたみサイズへ縮める。 */
    height: 2.6em;
    min-height: 2.6em;
    transition: height 0.15s, min-height 0.15s;
}

.machi-cta-band .machi-question-composer.is-active textarea {
    height: 7.5em;
    min-height: 7.5em;
}

/* 見出しの下、注記の下の余白を少し詰める。
   .machinale-comments .comment-reply-title と詳細度が同じで後勝ちに負けるため、
   .machi-cta-band を足して詳細度を上げる。 */
.machi-cta-band .machi-question-composer .comment-reply-title {
    margin-bottom: 0.4em;
}

.machi-question-composer .comment-reply-title + p {
    margin-top: 0;
}

.machi-question-composer .machi-question-note {
    margin-bottom: 8px;
}

.machi-question-composer .machinale-composer-actions {
    padding-top: 4px;
}

.machi-question-composer .machi-question-note,
.machi-question-composer .machinale-composer-actions {
    display: none;
}

.machi-question-composer.is-active .machi-question-note {
    display: block;
}

.machi-question-composer.is-active .machinale-composer-actions {
    display: flex;
}

/* ニックネーム欄と送信ボタンを同じ行に（画像添付は無し）。
   1つの段落に両方のショートコードをまとめて出力し、ここで横並びにする。 */
.machi-question-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    flex: 1 1 auto;
    margin: 0;
}

.machi-question-actions .wpcf7-form-control-wrap {
    flex: 1 1 160px;
    min-width: 0;
}

/* ニックネーム欄と送信ボタンで上下パディングが違うため高さが揃わない。
   両方に同じ高さを指定して揃える。
   .wpcf7-form input[type="text"] と詳細度が同じで後勝ちに負けるため、
   .machi-cta-band を足して詳細度を上げる（margin-top:8pxが消えず、
   欄を包むwpcf7-form-control-wrapが伸びて位置がズレていた）。 */
.machi-cta-band .machi-question-actions input[type="text"],
.machi-cta-band .machi-question-actions .wpcf7-submit {
    height: 44px;
    box-sizing: border-box;
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;
}

.machi-question-actions .wpcf7-form-control-wrap {
    display: flex;
    align-items: center;
}

.machi-question-actions .wpcf7-submit {
    width: auto;
    flex: none;
    white-space: nowrap;
}

@media (max-width: 600px) {
    /* CTAとパンくずの間に余白（スマホはcontainerのpaddingが0のため）。
       デスクトップと同じ上下対称の値に揃える。 */
    .machi-cta-band {
        padding-bottom: 24px;
    }
}

/* =========================================
   フッター
   ========================================= */
.machi-footer {
    text-align: center;
    color: var(--machi-muted);
    padding: 32px 20px;
    font-size: var(--wp--preset--font-size--small, 12px);
    border-top: 1px solid var(--machi-border);
    background: var(--machi-card);
}

/* フッターリンク行
   flex-wrap指定が無いと、幅が足りないときリンクの文字自体が
   途中で折り返されてしまう（各リンクは複数行に割れず、行の折り返しは
   リンク単位で行う）。 */
.machi-footer-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 8px;
    column-gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--machi-border);
}

.machi-footer-link,
.machi-footer-sep {
    white-space: nowrap;
}

.machi-footer-link {
    color: var(--machi-text);
    font-weight: 500;
    transition: color 0.2s ease;
}

.machi-footer-link:hover {
    color: var(--wp--custom--color--head-green, #4FBF9F);
}

.machi-footer-sep {
    color: var(--machi-border);
}

/* 免責事項 */
.machi-footer-disclaimer {
    margin: 0 0 16px;
    color: var(--machi-muted);
    font-size: var(--wp--preset--font-size--small, 12px);
    line-height: 1.6;
}

/* コピーライト */
.machi-footer-copyright {
    margin: 0;
    color: var(--machi-muted);
    font-size: var(--wp--preset--font-size--small, 12px);
}

/* =========================================
   日付バッジ（共通）
   ========================================= */
.machi-date-badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    color: #3a7d2c;
    background: #ecfdf5;
    border: 1px solid #bbf0c8;
    border-radius: 999px;
    padding: 3px 10px;
}

/* 質問提供バッジ（スポンサー案件のサンプル用・特定記事にのみ表示）。
   日付バッジと同じ大きさ・並びで、企業ロゴへのリンクにする。 */
.machi-sponsor-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--machi-muted);
    background: #fff;
    border: 1px solid var(--machi-border);
    border-radius: 999px;
    padding: 3px 10px;
    text-decoration: none;
    margin-right: 8px;
    vertical-align: middle;
}

.machi-sponsor-badge:hover {
    border-color: var(--machi-muted);
}

.machi-sponsor-badge-logo {
    display: block;
    height: 14px;
    width: auto;
}

/* 質問提供バナー（ネイティブ広告風・スポンサー案件のサンプル用）。
   コメント一覧の下・投稿フォームの上に表示する。 */
.machi-sponsor-banner-wrap {
    margin: 24px 0;
}

/* 画像1枚まるごとのバナー（_machinale_sponsor_banner_image指定時）。 */
.machi-sponsor-banner-imglink {
    display: block;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    line-height: 0;
}

.machi-sponsor-banner-imglink-img {
    display: block;
    width: 100%;
    height: auto;
}

/* アフィリエイトバナー（記事ごとにメタで画像・リンク先を指定、シェアボタンの下）。
   ASP提供の標準バナー（320x50など）は元のサイズのまま中央寄せで表示する
   （width:100%で引き伸ばすと画質が崩れるため）。
   直下の「まちのスポンサー」バナー（width:100%・角丸で枠のように見える）と
   並んだときに、こちらだけ枠なしの裸画像に見えて浮いてしまうため、
   カードと同じ枠線・角丸で囲む（2026-09-24）。 */
.machi-affiliate-banner-wrap {
    margin: 20px 0;
    padding: 16px;
    text-align: center;
    background: var(--machi-card, #fff);
    border: 1px solid var(--machi-border, #e5e7eb);
    border-radius: 12px;
}

.machi-affiliate-banner-link {
    display: inline-block;
    max-width: 100%;
    border-radius: 4px;
    overflow: hidden;
    line-height: 0;
}

.machi-affiliate-banner-img {
    display: block;
    max-width: 100%;
    height: auto;
}

.machi-sponsor-banner-lead {
    margin: 0 0 6px;
    color: var(--machi-text);
}

.machi-sponsor-banner {
    display: flex;
    align-items: stretch;
    background: #fff;
    border: 1px solid var(--machi-border);
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
}

.machi-sponsor-banner-logoblock {
    flex-shrink: 0;
    width: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, #b5152f, #7a1220);
    padding: 12px;
}

.machi-sponsor-banner-logoblock-img {
    width: 100%;
    height: auto;
    filter: brightness(0) invert(1);
}

.machi-sponsor-banner-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 14px 16px;
}

.machi-sponsor-banner-top {
    display: flex;
    align-items: center;
    gap: 8px;
}

.machi-sponsor-banner-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #f3f4f6;
    border: 1px solid var(--machi-border);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.machi-sponsor-banner-icon img {
    width: 14px;
    height: auto;
}

.machi-sponsor-banner-name {
    color: var(--machi-text);
    font-size: 0.75rem;
    font-weight: 700;
}

.machi-sponsor-banner-ad-tag {
    margin-left: auto;
    color: var(--machi-muted);
    font-size: 0.688rem;
    background: #f3f4f6;
    border-radius: 999px;
    padding: 2px 8px;
}

.machi-sponsor-banner-headline {
    color: var(--machi-text);
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.35;
}

.machi-sponsor-banner-desc {
    color: var(--machi-muted);
    font-size: 0.8125rem;
    line-height: 1.45;
}

/* =========================================
   2カラムレイアウト（共通）
   ========================================= */
.machi-container {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 20px 40px;
}

.machi-layout {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 32px;
    align-items: start;
}

.machi-main {
    min-width: 0;
}

.machi-archive-main {
    padding-top: 0;
}

/* サイドバー共通 */
.machi-sidebar {
    position: sticky;
    top: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.machi-sidebar-widget {
    background: #fff;
    border: 1px solid var(--machi-border);
    border-radius: 18px;
    padding: 20px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.machi-sidebar-title {
    margin: 0 0 16px;
    font-size: 1.125rem;
    font-weight: 800;
    color: var(--machi-main-dark);
    display: flex;
    align-items: center;
    gap: 6px;
}

.machi-sidebar-title::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 18px;
    background: var(--machi-main);
    border-radius: 2px;
    flex-shrink: 0;
}

/* 最新の投稿 */
.machi-sidebar-recent-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.machi-sidebar-recent-item {
    padding: 10px 0;
    border-bottom: 1px solid var(--machi-border);
}

.machi-sidebar-recent-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.machi-sidebar-recent-date {
    display: block;
    font-size: 0.75rem;
    color: var(--machi-main);
    font-weight: 700;
    margin-bottom: 4px;
}

.machi-sidebar-recent-title {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: var(--machi-text);
    line-height: 1.5;
    text-decoration: none;
}

.machi-sidebar-recent-title:hover {
    color: var(--machi-main);
}

/* ジャンルリスト */
.machi-sidebar-cat-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.machi-sidebar-cat-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 4px;
    border-bottom: 1px solid var(--machi-border);
    text-decoration: none;
    color: var(--machi-text);
    font-size: 1rem;
    font-weight: 600;
    transition: color 0.15s;
}

.machi-sidebar-cat-list li:last-child .machi-sidebar-cat-link {
    border-bottom: none;
}

.machi-sidebar-cat-link:hover {
    color: var(--machi-main);
}

.machi-sidebar-cat-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.machi-sidebar-cat-icon img {
    width: 20px;
    height: 20px;
}

.machi-sidebar-cat-name {
    flex: 1;
}

.machi-sidebar-cat-arrow {
    color: var(--machi-muted);
    font-size: 1rem;
}

/* スマホ: 1カラム */

/* =========================================
   記事ページ
   ========================================= */
.machi-article {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
}

.machi-breadcrumb {
    font-size: 0.75rem;
    color: var(--machi-muted);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

.machi-breadcrumb a {
    color: var(--machi-main);
}

.machi-breadcrumb a:hover {
    text-decoration: underline;
}

.machi-breadcrumb-sep {
    color: var(--machi-border);
}

/* カード：バッジ・タイトル・本文を包む白背景ブロック */
.machi-article-card {
    background: var(--machi-card);
    border: 1px solid var(--machi-border);
    border-radius: 18px;
    padding: 32px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.machi-article-cat {
    margin-bottom: 16px;
}

.machi-cat-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 999px;
}

.machi-cat-badge-icon {
    width: 18px;
    height: 18px;
    border-radius: 4px;
}

.machi-article-title {
    font-size: clamp(25px, 4vw, 36px);
    font-weight: 800;
    line-height: 1.4;
    margin: 0 0 16px;
    color: var(--machi-text);
}

/* 質問提供バナー（サンプル用）と対になる、タイトル末尾の小さな添え書き。
   投稿メタがある記事にのみ表示される。 */
.machi-sponsor-title-suffix {
    font-size: 0.6em;
    font-weight: 400;
    color: var(--machi-muted);
}

.machi-article-meta {
    margin-bottom: 28px;
}

.machi-article-content {
    font-size: 1rem;
    line-height: 1.8;
    min-height: 120px;
}

.machi-article-content p {
    margin: 0 0 1.2em;
}

/* H2：AIはる回答タイトルの色・サイズ感（色・サイズは theme.json トークン参照） */
.machi-article-content h2 {
    font-size: var(--wp--custom--font-size--heading-l, 20px);
    font-weight: 700;
    line-height: 1.6;
    margin: 1em 0 0.6em;
    color: var(--wp--custom--color--head-green, #4FBF9F);
}

/* H3：提出期限などのセクション見出し */
.machi-article-content h3 {
    font-size: var(--wp--custom--font-size--heading-m, 16px);
    font-weight: 700;
    margin: 0.5em 0;
    color: var(--wp--custom--color--head-green, #4FBF9F);
}

/* H4：本文色に揃える */
.machi-article-content h4 {
    font-size: var(--wp--custom--font-size--heading-s, 16px);
    font-weight: 700;
    margin: 0.8em 0 0.4em;
    color: var(--wp--custom--color--head-green, #4FBF9F);
}

/* 本文内リンク：見出し(H2-H4)・段落とも区別できるよう青を明示
   （グローバルの a{color:inherit} を上書き）
   ボタン要素（machi-btn-*, machi-callout-btn）は対象外 */
.machi-article-content a:not([class*="btn"]) {
    color: var(--wp--preset--color--blue, #047bd1);
    text-decoration: underline;
}

.machi-article-content a:not([class*="btn"]):visited {
    color: #045a9a;
}

.machi-article-back {
    margin-top: 32px;
}

.machi-btn-back {
    display: inline-block;
    background: var(--machi-main);
    color: #fff;
    padding: 12px 20px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 1rem;
    transition: background 0.15s;
}

.machi-btn-back:hover {
    background: var(--machi-main-dark);
}

/* AI免責表示 */
.machi-ai-disclaimer {
    margin: 20px 0 0;
    font-size: 0.75rem;
    color: var(--machi-muted);
    line-height: 1.7;
}

/* =========================================
   記事下 カテゴリー別関連記事
   ========================================= */
.machi-related {
    margin-top: 48px;
}

.machi-related-block {
    margin-bottom: 36px;
}

.machi-related-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
    font-size: var(--wp--custom--font-size--heading-l, 20px);
    font-weight: 800;
    color: var(--machi-text);
}

.machi-related-head-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.machi-related-head-icon img {
    width: 22px;
    height: 22px;
}

.machi-related-list {
    list-style: none;
    margin: 0;
    padding: 0;
    background: #fff;
    border: 1px solid var(--machi-border);
    border-radius: 14px;
    overflow: hidden;
}

.machi-related-item {
    padding: 14px 18px;
    border-bottom: 1px solid var(--machi-border);
}

.machi-related-item:last-child {
    border-bottom: none;
}

.machi-related-link {
    display: block;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--machi-text);
    text-decoration: none;
    line-height: 1.5;
}

.machi-related-link:hover {
    color: var(--machi-main);
}

.machi-related-date {
    display: block;
    margin-top: 4px;
    font-size: 0.75rem;
    color: var(--machi-muted);
}

.machi-related-more {
    text-align: right;
    margin-top: 10px;
}

.machi-related-more-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--machi-main);
    text-decoration: none;
}

.machi-related-more-link:hover {
    text-decoration: underline;
}

.machi-related-more-arrow {
    font-size: 0.75rem;
}

/* =========================================
   カテゴリーごとの最新一覧の「もっと見る」（押すたびに同じ一覧へ追加表示）
   トップ・記事下の両方で使う（2026-09-28、旧アコーディオンの挙動を統一）。
   template-parts/related-categories.php を expand_more => true で呼んだときだけ、
   .machi-related-list に --expandable が付き、この出し分けが効く。
   .machi-related-list の中に <li class="machi-related-more-row"> として
   <details><summary> を差し込み、対応するバッチの項目を :has() で出し分ける。
   ========================================= */
.machi-related-list--expandable .machi-related-more-row {
    padding: 0 !important;
}

.machi-related-list--expandable .machi-related-more-toggle {
    display: block;
    width: 100%;
}

.machi-related-list--expandable .machi-related-more-row summary.machi-related-more-link {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    padding: 14px 18px;
    cursor: pointer;
    list-style: none;
}

.machi-related-list--expandable .machi-related-more-row summary.machi-related-more-link::-webkit-details-marker {
    display: none;
}

/* 開いたら「もっと見る」自体は用済みなので消す */
.machi-related-list--expandable .machi-related-more-row:has(.machi-related-more-toggle[open]) {
    display: none;
}

/* 続きの項目はバッチ（count件ずつ）に分け、対応するバッチの<details>が開くまで
   非表示。次のバッチの「もっと見る」自体も、ひとつ前のバッチが開くまで非表示
   にして、1回のクリックでcount件ずつ増える形にする。 */
.machi-related-list--expandable li[class*="machi-related-batch-item-"],
.machi-related-list--expandable li[class*="machi-related-gate-"] {
    display: none;
}

.machi-related-list--expandable:has(.machi-related-more-toggle[data-batch="1"][open]) li.machi-related-batch-item-1 {
    display: block;
}
.machi-related-list--expandable:has(.machi-related-more-toggle[data-batch="1"][open]) li.machi-related-gate-1:not(:has(.machi-related-more-toggle[open])) {
    display: block;
}

.machi-related-list--expandable:has(.machi-related-more-toggle[data-batch="2"][open]) li.machi-related-batch-item-2 {
    display: block;
}
.machi-related-list--expandable:has(.machi-related-more-toggle[data-batch="2"][open]) li.machi-related-gate-2:not(:has(.machi-related-more-toggle[open])) {
    display: block;
}

.machi-related-list--expandable:has(.machi-related-more-toggle[data-batch="3"][open]) li.machi-related-batch-item-3 {
    display: block;
}
.machi-related-list--expandable:has(.machi-related-more-toggle[data-batch="3"][open]) li.machi-related-gate-3:not(:has(.machi-related-more-toggle[open])) {
    display: block;
}

.machi-related-list--expandable:has(.machi-related-more-toggle[data-batch="4"][open]) li.machi-related-batch-item-4 {
    display: block;
}

/* =========================================
   アーカイブ・検索 共通
   ========================================= */

/* アーカイブ見出し */
.machi-archive-head {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin: 36px 0 28px;
    padding-bottom: 24px;
    border-bottom: 2px solid var(--machi-border);
}

.machi-archive-head-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    flex-shrink: 0;
}

.machi-archive-head-type {
    margin: 0 0 4px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--machi-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.machi-archive-head-title {
    margin: 0 0 6px;
    font-size: clamp(22px, 4vw, 30px);
    font-weight: 800;
    line-height: 1.3;
}

.machi-archive-head-desc {
    margin: 0;
    font-size: 0.75rem;
    color: var(--machi-muted);
}

/* 投稿リスト */
.machi-post-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* 投稿カード */
.machi-post-card {
    display: block;
    background: var(--machi-card);
    border: 1px solid var(--machi-border);
    border-radius: 14px;
    text-decoration: none;
    color: var(--machi-text);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    margin-bottom: 10px;
}

.machi-post-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.07);
}

.machi-post-card-inner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
}

.machi-post-card-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
}

.machi-post-card-icon img {
    width: 38px;
    height: 38px;
    border-radius: 10px;
}

.machi-post-card-body {
    flex: 1;
    min-width: 0;
}

.machi-post-card-title {
    margin: 0 0 8px;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.45;
    white-space: normal;
}

.machi-post-card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.machi-post-card-cat {
    display: inline-block;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
}

/* 検索フォーム（結果なし時） */
.machi-no-results-wrap {
    padding: 40px 20px;
    text-align: center;
}

.machi-no-results {
    color: var(--machi-muted);
    font-size: 1rem;
    margin-bottom: 20px;
}

.machi-search-form {
    display: flex;
    gap: 8px;
    max-width: 400px;
    margin: 0 auto;
}

.machi-search-form input {
    flex: 1;
    border: 1px solid var(--machi-border);
    border-radius: 999px;
    padding: 10px 16px;
    font-size: 16px; /* iOS Safari の自動ズーム防止のため 16px 以上 */
    outline: none;
}

.machi-search-form input:focus {
    border-color: var(--machi-main);
}

.machi-search-form button {
    background: var(--machi-main);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 10px 20px;
    font-weight: 700;
    cursor: pointer;
}

/* ページネーション */
.machi-pagination {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 32px;
    flex-wrap: wrap;
}

.machi-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 1px solid var(--machi-border);
    font-size: 1rem;
    font-weight: 700;
    color: var(--machi-text);
    text-decoration: none;
    background: var(--machi-card);
}

.machi-pagination .page-numbers.current {
    background: var(--machi-main);
    color: #fff;
    border-color: var(--machi-main);
}

.machi-pagination .page-numbers:hover:not(.current) {
    border-color: var(--machi-main);
    color: var(--machi-main);
}

.machi-pagination .prev,
.machi-pagination .next {
    width: auto;
    padding: 0 16px;
}

/* =========================================
   引用ブロック（回答カード）
   ========================================= */
.machi-article-content .wp-block-quote,
.machi-article-content blockquote {
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    border: 1.5px solid var(--wp--custom--color--head-green, #4FBF9F);
    padding: 0.7em 0.6em;
    background: var(--wp--custom--color--quote-bg, #F7FCFA);
    margin: 1.5em 0;
    box-shadow: none;
}

/* cite をカードのタイトルとして先頭に表示 */
.machi-article-content .wp-block-quote cite,
.machi-article-content blockquote cite {
    order: -1;
    display: block;
    font-weight: 700;
    font-size: var(--wp--custom--font-size--heading-l, 20px);
    line-height: 1.6;
    color: var(--wp--custom--color--head-green, #4FBF9F);
    margin: 0 0 0.6em;
    font-style: normal;
}

.machi-article-content .wp-block-quote p,
.machi-article-content blockquote p {
    color: var(--wp--custom--color--head-green, #4FBF9F);
    line-height: 1.9;
    margin: 0 0 0.8em;
}

.machi-article-content .wp-block-quote p:last-of-type,
.machi-article-content blockquote p:last-of-type {
    margin-bottom: 0;
}

/* =========================================
   AIによる回答ブロック
   H2 は枠の中でアイコン横に表示し、本文は全てフル幅で表示。
   ========================================= */
.machinale-answer-section {
    margin: 1.8em 0;
}

.machinale-answer-box {
    /* ロボットアイコンを絶対配置するための基準にのみ使う（枠・背景は持たない）。 */
    position: relative;
}

/* ロボットアイコン（Font Awesome Free "robot" を SVGパスとして埋め込み）
   Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com
   License (CC BY 4.0) - https://fontawesome.com/license/free
   Copyright Fonticons, Inc. */
.machinale-answer-icon {
    position: absolute;
    /* .machinale-answer-box は枠を持たなくなった（緑罫線を撤去）ため、
       以前ボックスのpadding:20pxが担っていた上下左右のオフセットは無い。
       見出し・本文と縦中心／左端を揃えるため top:0・left:0 にする。 */
    top: 0;
    left: 0;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background-color: var(--wp--custom--color--quote-bg, #F7FCFA);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640' fill='%234FBF9F'%3E%3Cpath d='M352 64C352 46.3 337.7 32 320 32C302.3 32 288 46.3 288 64L288 128L192 128C139 128 96 171 96 224L96 448C96 501 139 544 192 544L448 544C501 544 544 501 544 448L544 224C544 171 501 128 448 128L352 128L352 64zM160 432C160 418.7 170.7 408 184 408L216 408C229.3 408 240 418.7 240 432C240 445.3 229.3 456 216 456L184 456C170.7 456 160 445.3 160 432zM280 432C280 418.7 290.7 408 304 408L336 408C349.3 408 360 418.7 360 432C360 445.3 349.3 456 336 456L304 456C290.7 456 280 445.3 280 432zM400 432C400 418.7 410.7 408 424 408L456 408C469.3 408 480 418.7 480 432C480 445.3 469.3 456 456 456L424 456C410.7 456 400 445.3 400 432zM224 240C250.5 240 272 261.5 272 288C272 314.5 250.5 336 224 336C197.5 336 176 314.5 176 288C176 261.5 197.5 240 224 240zM368 288C368 261.5 389.5 240 416 240C442.5 240 464 261.5 464 288C464 314.5 442.5 336 416 336C389.5 336 368 314.5 368 288zM64 288C64 270.3 49.7 256 32 256C14.3 256 0 270.3 0 288L0 384C0 401.7 14.3 416 32 416C49.7 416 64 401.7 64 384L64 288zM608 256C590.3 256 576 270.3 576 288L576 384C576 401.7 590.3 416 608 416C625.7 416 640 401.7 640 384L640 288C640 270.3 625.7 256 608 256z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px 24px;
}

.machi-article-content .machinale-answer-heading {
    min-height: 44px;
    padding-left: 60px;
    display: flex;
    align-items: center;
    margin: 0 0 0.6em;
    color: var(--wp--custom--color--head-green, #4FBF9F);
}

.machinale-answer-body {
    color: var(--machi-text);
}

/* 旧保存HTML向け：H2が枠外にある既存ブロックでは、先頭本文だけアイコンを避ける。 */
.machinale-answer-box:not(:has(> .machinale-answer-heading)) .machinale-answer-body > :first-child {
    min-height: 44px;
    padding-left: 60px;
    margin-top: 0;
}

.machinale-answer-body > :first-child {
    margin-top: 0;
}

.machinale-answer-body > :last-child {
    margin-bottom: 0;
}

/* 「確認できる情報をもとにAIが整理」注記は非表示（既存記事の保存済みHTMLにも
   含まれているため、生成側だけでなくCSSでも隠す）。 */
.machi-answer-note {
    display: none;
}

/* =========================================
   意見・体験談ブロック（複数カード）
   H2 は枠の外。カードごとに枠あり（AI回答とは別配色＝中立グレー）。
   各カード内は「ラベル（最初）＋本文（2要素目）」の2要素構成。
   アイコンは絶対配置し、最初の要素だけ避ける（2要素目はフル幅）。
   ========================================= */
.machinale-comments-section {
    margin: 1.8em 0;
}

.machinale-comment-box {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    border: 1px solid var(--wp--custom--color--head-green, #4FBF9F);
    border-radius: 12px;
    background: #fff;
    padding: 20px;
    margin: 0 0 14px;
}

.machinale-comment-box:last-child {
    margin-bottom: 0;
}

/* アイコンは絶対配置ではなく本文と同じ行（flex）に並べ、上端をテキストと
   揃える。ユーザーアイコン（Font Awesome Free "user" を SVGパスとして
   埋め込み）
   Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com
   License (CC BY 4.0) - https://fontawesome.com/license/free
   Copyright Fonticons, Inc. */
.machinale-comment-icon {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640' fill='%234FBF9F'%3E%3Cpath d='M320 312C386.3 312 440 258.3 440 192C440 125.7 386.3 72 320 72C253.7 72 200 125.7 200 192C200 258.3 253.7 312 320 312zM290.3 368C191.8 368 112 447.8 112 546.3C112 562.7 125.3 576 141.7 576L498.3 576C514.7 576 528 562.7 528 546.3C528 447.8 448.2 368 349.7 368L290.3 368z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 34px 34px;
}

.machinale-comment-body {
    flex: 1 1 auto;
    min-width: 0;
}

/* 投稿時に選んだアイコン（色付き丸＋絵文字）。デフォルトアイコンの
   background-image を打ち消し、絵文字を中央に表示する。 */
.machinale-comment-icon--avatar {
    background-image: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    line-height: 1;
}

.machinale-comment-box--reply .machinale-comment-icon--avatar {
    font-size: 19px;
}

/* コメント投稿欄の町名選択 */
.machinale-town-picker {
    margin: 10px 0 0;
}

.machinale-town-picker select {
    height: 38px;
    padding: 0 10px;
    border: 1px solid var(--machi-border);
    border-radius: 8px;
    background: #fff;
    font-size: 1rem;
    color: var(--machi-text);
    max-width: 100%;
}

/* コメント投稿欄のアイコン選択（丸いラジオボタンの並び） */
.machinale-avatar-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0 0;
}

.machinale-avatar-option {
    display: inline-flex;
    cursor: pointer;
}

.machinale-avatar-option input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.machinale-avatar-option__circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    font-size: 20px;
    line-height: 1;
    border: 2px solid transparent;
    box-sizing: border-box;
    transition: border-color 0.15s, transform 0.15s;
}

.machinale-avatar-option input:checked + .machinale-avatar-option__circle {
    border-color: var(--wp--custom--color--head-green, #4FBF9F);
    transform: scale(1.08);
}

.machinale-avatar-option input:focus-visible + .machinale-avatar-option__circle {
    outline: 2px solid var(--wp--custom--color--head-green, #4FBF9F);
    outline-offset: 2px;
}

/* ラベル（最初の要素） */
.machinale-comment-body > :first-child {
    margin-top: 0;
    margin-bottom: 0.35em;
}

/* 本文（2要素目）：フル幅 */
.machinale-comment-body > :last-child {
    margin-bottom: 0;
}

.machinale-comment-label {
    font-size: 1rem;
    font-weight: 700;
    color: var(--machi-muted);
    margin: 0 0 4px;
}

.machinale-comment-text {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--machi-text);
    margin: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* 投稿日ウィジェット（時計アイコン＋吹き出し） */
.machinale-comment-date {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    vertical-align: middle;
}

.machinale-comment-date__icon {
    flex: none;
    color: var(--machi-muted);
}

.machinale-comment-date__text {
    margin-left: 4px;
    white-space: nowrap;
    font-size: 0.75rem;
    color: var(--machi-muted);
}

/* =========================================
   コメント欄（machinale/comments：一覧＋投稿フォーム）
   ========================================= */
.machinale-comments {
    /* --machi-card-pad は .machi-article-card の padding と一致させる
       （.machinale-comments-list と同じ値）。 */
    --machi-card-pad: 32px;
    margin: 1.8em 0;
}

@media (max-width: 600px) {
    .machinale-comments {
        --machi-card-pad: 14px;
    }
}

/* 一覧の見出し */
.machinale-comments-heading {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--wp--custom--color--head-green, #4FBF9F);
    margin: 0 0 1em;
}

/* カード一覧（各カードは .machinale-comment-box を流用） */
.machinale-comments-list {
    margin: 0 0 2em;
}

/* 複数段落コメントの段落余白（.machinale-comment-text が div の場合） */
.machinale-comment-text > p {
    margin: 0 0 0.8em;
}

.machinale-comment-text > p:last-child {
    margin-bottom: 0;
}

/* 投稿フォームの見出し：緑の囲み・白文字・中央寄せのピル型にする。
   display:table で文字幅に縮め、margin:autoで中央寄せする
   （.machi-question-composer は独自の見た目のため対象外）。
   記事の投稿欄（.machi-question-composer 以外）ではボタンにしており、
   ブラウザ既定のボタン見た目を打ち消す。 */
.machinale-comments:not(.machi-question-composer) .comment-reply-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    background: var(--wp--custom--color--head-green, #4FBF9F);
    display: table;
    margin: 0 auto 0.8em;
    padding: 6px 20px;
    border-radius: 999px;
    text-align: center;
    border: none;
    font-family: inherit;
    cursor: pointer;
}

.machi-question-composer .comment-reply-title {
    font-size: 1.375rem;
}

/* クイズ記事：投稿フォームは画面には出さないが、DOMからは消さない
   （comments.js の initReply() が返信フォームの複製元として使うため）。 */
.machinale-comment-form--hidden {
    display: none;
}

/* 開閉アイコン：閉じている間は▼、開くと▲（回転） */
.machinale-composer-toggle::after {
    content: '▼';
    display: inline-block;
    margin-left: 6px;
    font-size: 0.7em;
    transition: transform 0.15s;
}

.machinale-composer-toggle[aria-expanded="true"]::after {
    transform: rotate(180deg);
}

/* デフォルトは閉じた状態。トグルを押すと #respond に .is-open が付き、
   中の <form> が開く（comments.js）。返信フォームは複製先が別の場所
   （#respond の外）に挿入されるため対象にならない。 */
.machinale-comments:not(.machi-question-composer) #respond > form {
    display: none;
}

.machinale-comments:not(.machi-question-composer) #respond.is-open > form {
    display: block;
}

/* 区切り線は見出しの下ではなく、投稿フォーム（見出し＋入力欄＋送信ボタン等、
   #respond 一式）の下に置く。左右スペースなしでカードの左右いっぱいまで
   伸ばすため、カードの内側余白ぶんだけ外へはみ出させ、同じ量を内側に戻す
   （コメント同士の区切りと同じ手法）。ヘッダーCTAの質問フォーム
   （.machi-question-composer）は見出しスタイルの流用のため
   .machinale-comments クラスも持つが、あちらは独自の枠・余白を持つので
   対象外にする。 */
.machinale-comments:not(.machi-question-composer) #respond {
    display: block;
    margin: 0 calc(var(--machi-card-pad) * -1) 1.8em;
    padding: 0 var(--machi-card-pad) 1.8em;
    border-bottom: 1px solid var(--machi-border);
}

/* 投稿フォームの説明文 */
.machinale-comments .machinale-comment-notes {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--machi-text);
    margin: 0 0 1.2em;
}

/* コメント本文欄の下の注意書き */
.machinale-comments .machinale-comment-caution {
    font-size: 0.75rem;
    line-height: 1.7;
    color: var(--machi-muted);
    margin: 0.5em 0 0;
}

/* id ではなく name で指定する：返信フォームは複製時に id の重複を避けるため
   id="comment" → "comment-reply" に付け替えられるが、name="comment" は
   そのままなので、こちらを使えば返信フォームの本文欄にも同じスタイルが効く
   （2026-09-28、返信欄だけ枠線・幅が揃わない不具合の修正）。 */
.machinale-comments textarea[name="comment"] {
    width: 100%;
    /* textarea は rows 属性（comment_form() 既定の5行）で自然な高さが決まり、
       min-height だけではその高さを下回れない。height も明示して縮める
       （.machi-question-composer textarea と同じ手当て）。
       元7.5emの半分（2026-09-28） */
    height: 3.75em;
    min-height: 3.75em;
    font-size: 16px; /* iOS の自動ズーム防止 */
    line-height: 1.6;
    padding: 13px 16px;
    border: 1px solid var(--machi-border);
    border-radius: 12px;
    background: #fff;
    box-sizing: border-box;
    resize: vertical;
}

.machinale-comments .comment-form-author {
    grid-column: 1;
    margin: 0.6em 0 0;
}

.machinale-comments .comment-form-author label {
    display: block;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 0.3em;
}

.machinale-comments #author {
    width: min(100%, 16rem);
    font-size: 16px; /* iOS の自動ズーム防止 */
    line-height: 1.6;
    padding: 10px 16px;
    border: 1px solid var(--machi-border);
    border-radius: 8px;
    background: #fff;
    box-sizing: border-box;
}

/* 本文欄と操作行を1つの枠に見せる（SNS の投稿ボックス風）。
   .machinale-composer が枠、その下に .machinale-composer-actions が続く。 */
.machinale-comments .comment-form {
    display: block;
}

.machinale-composer {
    border: 1px solid var(--wp--custom--color--head-green, #4FBF9F);
    border-radius: 12px 12px 0 0;
    border-bottom: none;
    background: #fff;
    padding: 12px 14px;
    /* 中の要素のマージンが外へ抜けて操作行との間に隙間（＝枠の途切れ）を
       作らないよう、この要素で閉じ込める。 */
    overflow: hidden;
    margin-bottom: 0;
}

.machinale-comments .comment-form-comment {
    margin: 0;
}

/* 枠は .machinale-composer 側が持つので、本文欄自体の枠は消す */
.machinale-comments textarea[name="comment"] {
    border: none;
    padding: 0;
    background: transparent;
    resize: vertical;
}

.machinale-comments textarea[name="comment"]:focus {
    outline: none;
}

/* 操作行：画像アイコン → ニックネーム → Turnstile → 送信 */
.machinale-composer-actions {
    --machi-field-height: 38px;
    display: flex;
    align-items: center;
    /* スマホでも折り返さず1行に収める。詰まったらニックネーム欄が縮む。 */
    flex-wrap: nowrap;
    gap: 8px;
    margin-top: 0;
    border: 1px solid var(--wp--custom--color--head-green, #4FBF9F);
    border-top: none;
    border-radius: 0 0 12px 12px;
    background: #fff;
    padding: 10px 12px 12px;
}

.machinale-composer-actions .form-submit {
    margin: 0;
    flex: none; /* 送信ボタンは縮めない */
}

/* Turnstile は操作行の外（下）に置く。表示・非表示は Cloudflare 側が
   data-appearance="interaction-only" で制御するため、こちらで隠さないこと。
   ⚠ display:none にするとウィジェットが動作せずトークンを取得できなくなり、
     fail-closed の検証にすべて弾かれる（2026-08-27 に実際に発生）。 */
.machinale-comments .cf-turnstile {
    margin: 0;
}

/* 画像添付アイコン（ファイル入力は隠して label を押させる） */
.machinale-image-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.machinale-composer-image {
    display: inline-flex;
    position: relative;
    flex: none;
}

.machinale-image-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--machi-field-height);
    height: var(--machi-field-height);
    border-radius: 999px;
    color: var(--wp--custom--color--head-green, #4FBF9F);
    cursor: pointer;
}

.machinale-image-button:hover,
.machinale-image-input:focus-visible + .machinale-image-button,
.machinale-composer-image:focus-within .machinale-image-button {
    background: var(--wp--custom--color--quote-bg, #F7FCFA);
}

/* 画像を選んでいるときはアイコンを強調する */
.machinale-composer-image.is-selected .machinale-image-button {
    background: var(--wp--custom--color--head-green, #4FBF9F);
    color: #fff;
}

/* ニックネーム欄：残り幅を受け持ち、狭いときはここが縮む */
.machinale-composer-author {
    display: inline-flex;
    min-width: 0;
    flex: 1 1 auto;
}

.machinale-comments #author {
    width: 100%;
    height: var(--machi-field-height);
    font-size: 1rem;
    padding: 0 10px;
}

@media (max-width: 600px) {
    /* 幅が足りないときはファイル名を隠し、サムネイルと×だけにする */
    .machinale-image-name {
        display: none;
    }

    .machinale-composer-actions .submit {
        padding: 0 14px;
    }
}

/* =========================================
   返信スレッド
   ========================================= */
.machinale-comments-list,
.machinale-comment-children {
    list-style: none;
    padding: 0;
    margin: 0;
}

.machinale-comments-list {
    margin: 0 0 2em;
}

/* コメント一覧は角丸の箱ではなく罫線で区切る。
   （記事本文中の意見・体験談ブロック .machinale-comments-section は
     従来どおり角丸のまま。ここは投稿されたコメントの一覧だけを対象にする） */
/* 罫線は記事カード（.machi-article-card）の左右いっぱいまで伸ばす。
   カードの内側余白ぶんだけ外へはみ出させ、同じ量を内側に戻す。
   --machi-card-pad は .machi-article-card の padding と一致させること。 */
.machinale-comments-list {
    --machi-card-pad: 32px;
}

.machinale-comments-list > .machinale-comment-item {
    margin: 0 calc(var(--machi-card-pad) * -1);
    padding: 9px var(--machi-card-pad);
    border-bottom: 1px solid var(--machi-border);
}

.machinale-comments-list > .machinale-comment-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* 枠・背景は <li> 側が持つのでカード自体は素にする */
.machinale-comments-list .machinale-comment-box {
    border: none;
    border-radius: 0;
    background: transparent;
    padding: 0;
    margin: 0;
}


/* 返信の開閉ボタン */
/* 返信ボタンの行。
   ⚠ セレクタに .machinale-comments を必ず付けること。コメント欄は記事本文の
     中に出力されるため、クラス1つだけだと .machi-article-content p（margin
     0 0 1.2em）に特異度で負けて下マージンが上書きされる（2026-08-27）。
   <p> のままだとインライン要素の行送りぶんの余白がボタンの下に付くため
   flex にしている。3つ目の値が「返信ボタン → 下の罫線」の距離の調整箇所。 */
.machinale-comments .machinale-comment-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 6px;
    justify-content: space-between;
    gap: 8px;
    line-height: 1;
    margin: 8px 0 0;
}

/* 左側：反応3種・通報（右側の返信ボタンとは反対に寄せる） */
.machinale-comment-actions__left {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
}

.machinale-reaction,
.machinale-report {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 30px;
    padding: 6px 8px;
    border: none;
    border-radius: 999px;
    background: none;
    color: var(--machi-muted);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

/* SPは40pxのアイコン3つ＋ラベル＋返信ボタンだと折り返してしまうため、
   Yahoo!ニュースのコメント欄の縮尺に合わせて縮小
   （2026-09-28。18px→22pxのさらに120%で26pxに）。 */
@media (max-width: 480px) {
    .machinale-reaction__emoji svg {
        width: 26px;
        height: 26px;
    }
    .machinale-reaction,
    .machinale-report {
        gap: 2px;
        min-height: auto;
        padding: 4px 2px;
        font-size: 0.75rem;
    }
    /* ボタン同士の間隔（例：「いいね！」のラベルから「なっとく」のアイコン
       まで）も詰める（2026-09-28、それでも折り返す場合の追加調整）。 */
    .machinale-comment-actions__left {
        gap: 0;
    }
}

/* アイコンはSVG（色は各パスに直接指定）。18px→27px→40pxと2回1.5倍に
   （2026-09-28。widthとheight属性も同じ値）。 */
.machinale-reaction__emoji {
    display: inline-flex;
    line-height: 1;
}

.machinale-reaction__emoji svg {
    display: block;
}

.machinale-reaction:hover,
.machinale-report:hover {
    background: var(--wp--custom--color--quote-bg, #F7FCFA);
}

.machinale-reaction:focus-visible,
.machinale-report:focus-visible {
    outline: 2px solid var(--wp--custom--color--head-green, #4FBF9F);
    outline-offset: 2px;
}

/* 押した状態（1人1種類。押し直すと解除、別のボタンを押すと切り替え）。
   背景・文字も種別の色に合わせる。 */
.machinale-reaction[aria-pressed="true"] {
    background: var(--wp--custom--color--quote-bg, #F7FCFA);
    color: var(--machi-text);
}

.machinale-reaction--empathize[aria-pressed="true"] {
    background: #FDECEF;
    color: #E17A8D;
}

.machinale-reaction--interesting[aria-pressed="true"] {
    background: #EAF2FB;
    color: #4A85C4;
}

.machinale-reaction--hmm[aria-pressed="true"] {
    background: #E9F5EE;
    color: #4F9C71;
}

.machinale-reaction__count[hidden] {
    display: none;
}

.machinale-report.is-done {
    opacity: 0.5;
}

/* 通報モーダル */
.machinale-report-title {
    font-weight: 700;
}

.machinale-report-note {
    margin: 0 0 12px;
    font-size: 0.75rem;
    color: var(--machi-muted);
    line-height: 1.7;
}

.machinale-report-reasons {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 0 12px;
}

.machinale-report-reason {
    padding: 12px 14px;
    border: 1px solid var(--machi-border);
    border-radius: 10px;
    background: #fff;
    color: var(--wp--custom--color--text, #1f2937);
    font-size: 1rem;
    text-align: left;
    cursor: pointer;
}

.machinale-report-reason:hover {
    border-color: var(--wp--custom--color--head-green, #4FBF9F);
    background: var(--wp--custom--color--quote-bg, #F7FCFA);
}

.machinale-report-reason:disabled {
    opacity: 0.5;
    cursor: progress;
}

.machinale-comment-replytoggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--machi-border);
    border-radius: 6px;
    background: none;
    color: var(--machi-muted);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    padding: 7px 12px;
    cursor: pointer;
}

.machinale-comment-replytoggle:hover {
    background: var(--wp--custom--color--quote-bg, #F7FCFA);
}

/* ▼ / ▲ の三角。開いているときは上向きにする */
.machinale-comment-replytoggle__caret {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
}

.machinale-comment-replytoggle[aria-expanded="true"] .machinale-comment-replytoggle__caret {
    border-top: none;
    border-bottom: 5px solid currentColor;
}

/* 開閉する返信領域。左の縦棒で「ここから先は返信」と示す */
.machinale-comment-thread[hidden] {
    display: none;
}

.machinale-comment-thread {
    margin: 12px 0 0;
    padding-left: 14px;
    border-left: 3px solid var(--wp--custom--color--head-green, #4FBF9F);
}

/* 返信カードも罫線区切り。最後の返信は線を出さない */
.machinale-comment-box--reply {
    border: none;
    border-radius: 0;
    background: transparent;
    padding: 10px 0;
    margin: 0;
    border-bottom: 1px solid var(--machi-border);
}

.machinale-comment-children > .machinale-comment-item:last-child > .machinale-comment-box--reply {
    border-bottom: none;
}

/* 返信のアイコンは少し小さく、間隔も詰める */
.machinale-comment-box--reply {
    gap: 10px;
}

.machinale-comment-box--reply .machinale-comment-icon {
    width: 31px;
    height: 31px;
    background-size: 31px 31px;
}

/* 返信フォームの差し込み先 */
.machinale-comment-replyslot:empty {
    display: none;
}

.machinale-comment-replyslot {
    margin: 12px 0 0;
}

/* display を指定した要素は hidden 属性が効かなくなるため、明示的に打ち消す。 */
.machinale-comment-image-preview[hidden] {
    display: none;
}

/* =========================================
   コメントの添付画像
   本文の左にサムネイル、クリックで原寸をモーダル表示。
   ========================================= */
.machinale-comment-content {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.machinale-comment-content .machinale-comment-text {
    flex: 1 1 auto;
    min-width: 0;
}

.machinale-comment-image {
    flex: none;
    display: block;
    width: 56px;
    height: 56px;
    border-radius: 8px;
    overflow: hidden;
    cursor: zoom-in;
}

.machinale-comment-image__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}

/* 選択中の画像（本文欄の下、操作行の上に出る） */

/* 選択中の画像は、画像アイコンの横にサムネイル＋ファイル名のチップで出す */
.machinale-comment-image-preview {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex: 0 1 auto;
    max-width: 9rem;
    padding: 3px 6px 3px 3px;
    border-radius: 999px;
    background: var(--wp--custom--color--quote-bg, #F7FCFA);
}

/* 縮小処理中：アイコンを薄くして操作中であることを示す */
.machinale-composer-image.is-busy .machinale-image-button {
    opacity: 0.5;
    cursor: progress;
}

/* 画像を弾いたときのメッセージ。操作行は1行固定（flex-wrap:nowrap）なので、
   行の中に入れるとニックネーム欄が潰れる。行の外（下）に全幅で出す。 */
.machinale-image-error {
    margin: 6px 0 0;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--wp--preset--color--red, #f01e21);
}

.machinale-image-error[hidden] {
    display: none;
}

.machinale-comment-image-preview img {
    width: 28px;
    height: 28px;
    object-fit: cover;
    border-radius: 999px;
    display: block;
    flex: none;
}

.machinale-image-name {
    font-size: 0.75rem;
    color: var(--machi-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* チップの取り消しボタン */
.machinale-image-remove {
    flex: none;
    width: 18px;
    height: 18px;
    border: none;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    font-size: 0.75rem;
    line-height: 1;
    padding: 0;
    cursor: pointer;
}

.machinale-image-remove:hover {
    background: rgba(0, 0, 0, 0.7);
}

@media (max-width: 600px) {
    /* .machi-article-card の padding に合わせる */
    .machinale-comments-list {
        --machi-card-pad: 14px;
    }

    .machinale-comment-thread {
        padding-left: 10px;
    }
}

/* =========================================
   送信結果モーダル（成功・エラー）
   ========================================= */
body.machinale-modal-open {
    overflow: hidden;
}

.machinale-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

/* hidden 属性が付いている間は非表示（.machinale-modal の display:flex を上書き） */
.machinale-modal[hidden] {
    display: none;
}

.machinale-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

.machinale-modal__box {
    position: relative;
    width: 100%;
    max-width: 480px;
    background: #fff;
    border-radius: 16px;
    padding: 28px 24px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    text-align: center;
}

.machinale-modal__text {
    font-size: 1rem;
    line-height: 1.9;
    color: var(--machi-text);
    margin: 0 0 1.4em;
}

.machinale-modal__close {
    background: var(--machi-main);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 12px 32px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s;
}

.machinale-modal__close:hover {
    background: var(--machi-main-dark);
}

/* =========================================
   コメント画像の拡大モーダル
   ========================================= */
.machinale-modal--image .machinale-modal__box {
    max-width: min(92vw, 720px);
    background: transparent;
    box-shadow: none;
    padding: 0;
}

.machinale-image-modal__img {
    display: block;
    width: 100%;
    max-height: 80vh;
    object-fit: contain;
    border-radius: 8px;
    background: #000;
}

.machinale-modal--image .machinale-modal__close {
    margin: 14px auto 0;
    display: block;
}

/* =========================================
   コメント投稿の確認モーダル
   ========================================= */
.machinale-modal--confirm .machinale-modal__box {
    max-width: 480px;
    text-align: left;
}

.machinale-modal__close-x {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: 999px;
    color: var(--machi-muted);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

.machinale-modal__close-x:hover {
    background: var(--machi-bg);
    color: var(--machi-text);
}

.machinale-confirm-title {
    font-size: 1.35rem;
    font-weight: 800;
    text-align: center;
}

.machinale-confirm-lead,
.machinale-confirm-note,
.machinale-confirm-agree {
    font-size: 0.75rem;
    color: var(--machi-muted);
}

.machinale-confirm-list {
    margin: 0 0 1.4em;
    padding-left: 1.2em;
}

.machinale-confirm-list li {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--machi-text);
}

.machinale-confirm-agree {
    text-align: center;
}

.machinale-confirm-agree a {
    color: var(--machi-main);
    text-decoration: underline;
}

.machinale-confirm-actions {
    display: flex;
    gap: 10px;
    margin-top: 1em;
}

.machinale-confirm-edit,
.machinale-confirm-submit {
    flex: 1;
    border-radius: 12px;
    padding: 12px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, opacity 0.15s;
}

.machinale-confirm-edit {
    background: #fff;
    color: var(--machi-text);
    border: 1px solid var(--machi-border);
}

.machinale-confirm-edit:hover {
    background: #f5f5f5;
}

.machinale-confirm-submit {
    background: var(--machi-main);
    color: #fff;
    border: none;
}

.machinale-confirm-submit:hover {
    background: var(--machi-main-dark);
}

/* 送信ボタン：コンタクトフォーム（.wpcf7-submit）と同じ配色 */
.machinale-composer-actions .submit {
    background: var(--machi-main);
    color: #fff;
    border: none;
    border-radius: 10px;
    /* ニックネーム欄と高さを揃える（--machi-field-height） */
    height: var(--machi-field-height);
    padding: 0 18px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s;
}

.machinale-composer-actions .submit:hover {
    background: var(--machi-main-dark);
}

/* 同意前は無効（グレーアウト） */
.machinale-composer-actions .submit:disabled {
    background: var(--machi-muted, #9ca3af);
    cursor: not-allowed;
    opacity: 0.7;
}

/* =========================================
   カスタムブロック：情報提供・知恵の提供
   ========================================= */
.machi-callout {
    border: 1px solid var(--machi-border);
    border-radius: 14px;
    padding: 24px;
    background: #fff;
    margin: 1.5em 0;
}

.machi-callout-title {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--machi-text);
    margin: 0 0 10px;
}

.machi-callout-text {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--machi-text);
    margin: 0 0 16px;
}

.machi-callout-btn {
    display: inline-block;
    padding: 11px 24px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    color: #fff;
    transition: opacity 0.15s;
}

.machi-callout-btn:hover {
    opacity: 0.85;
    color: #fff;
}

.machi-callout-btn--info {
    background: #2d6e8e;
}

/* コメント欄の下：「まちの質問スポンサー」募集バナー（画像1枚）。 */
.machi-sponsor-banner-link {
    display: block;
    margin: 1.5em 0;
    border-radius: 14px;
    overflow: hidden;
    line-height: 0;
}

.machi-sponsor-banner-img {
    display: block;
    width: 100%;
    height: auto;
}

/* =========================================
   カスタムブロック：Googleマップ
   ========================================= */
.machi-map {
    margin: 1.5em 0;
}

.machi-map iframe {
    display: block;
    width: 100%;
    height: 350px;
    border: 0;
    border-radius: 10px;
}

/* =========================================
   レスポンシブ（スマホ）※ デスクトップCSSの後に記述
   ========================================= */
@media (max-width: 860px) {

    /* 2カラム → 1カラム */
    .machi-layout {
        grid-template-columns: 1fr;
    }
    .machi-sidebar {
        position: static;
    }

    /* コンテナ: 左右padding 0 */
    .machi-container {
        padding-left: 0;
        padding-right: 0;
        padding-bottom: 32px;
    }

    /* 記事ページ */
    .machi-article {
        padding: 0;
        margin-top: 0;
        margin-bottom: 0;
    }

    /* パンくず・バッジ・タイトル・メタ・戻るリンク: 個別に左右余白 */
    .machi-breadcrumb,
    .machi-article-cat,
    .machi-article-title,
    .machi-article-meta,
    .machi-article-back {
        padding-left: 14px;
        padding-right: 14px;
    }

    /* 記事カード: 横いっぱい・角丸なし・padding縮小 */
    .machi-article-card {
        border-radius: 0;
        border-left: none;
        border-right: none;
        padding: 14px;
    }

    /* 見出し */
    .machi-article-content h2,
    .machi-article-content h3,
    .machi-article-content h4 {
        margin-left: 0;
    }

    /* 投稿カード: 横いっぱい・区切り線のみ */
    .machi-post-card {
        border-radius: 0;
        border-left: none;
        border-right: none;
        margin-bottom: 0;
        border-bottom: none;
    }

    .machi-post-list {
        gap: 0;
        border-top: 1px solid var(--machi-border);
    }

    .machi-post-card + .machi-post-card {
        border-top: 1px solid var(--machi-border);
    }

    .machi-post-card-inner {
        padding: 12px 14px;
    }

    /* アーカイブ見出し */
    .machi-archive-head {
        margin: 20px 14px 16px;
    }

    /* 関連記事: 見出し・もっと見るは左右余白、リストは横いっぱい */
    .machi-related-head {
        padding-left: 14px;
        padding-right: 14px;
    }

    .machi-related-list {
        border-radius: 0;
        border-left: none;
        border-right: none;
    }

    .machi-related-more {
        padding-right: 14px;
    }

    .machi-ai-disclaimer {
        padding-left: 14px;
        padding-right: 14px;
    }
}

/* =========================================
   お問い合わせフォーム（Contact Form 7）
   ※ 必須マークはフォーム側で <span class="machi-req">*</span> と記述する
   ========================================= */

/* フォーム本体だけを緑のカードに（タイトル・画像など他の要素は対象外） */
.wpcf7 {
    max-width: 100%;
    background: #f1faf6;
    background: color-mix(in srgb, var(--wp--custom--color--head-green, #4FBF9F) 8%, #fff);
    border: 1px solid rgba(79, 191, 159, 0.35);
    border-radius: 18px;
    padding: 32px;
    margin-top: 8px;
}

/* 各項目（ラベルが input を内包する構造） */
.wpcf7-form label {
    display: block;
    font-weight: 700;
    font-size: 1rem;
    color: var(--machi-text);
    margin-bottom: 20px;
}

/* 必須マーク（フォーム側で <span class="machi-req">*</span>） */
.machi-req {
    color: #e3342f;
    font-weight: 700;
    margin-left: 2px;
}

/* 入力欄 */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="number"],
.wpcf7-form input[type="date"],
.wpcf7-form input[type="search"],
.wpcf7-form select,
.wpcf7-form textarea {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 13px 16px;
    font-size: 16px; /* iOS Safari の自動ズーム防止のため 16px 以上 */
    font-weight: 400;
    color: var(--machi-text);
    background: #fff;
    border: 1px solid var(--machi-border);
    border-radius: 12px;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.wpcf7-form textarea {
    min-height: 180px;
    resize: vertical;
}
.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder {
    color: var(--machi-muted);
}
.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form input[type="url"]:focus,
.wpcf7-form input[type="tel"]:focus,
.wpcf7-form input[type="number"]:focus,
.wpcf7-form input[type="date"]:focus,
.wpcf7-form input[type="search"]:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus {
    border-color: var(--machi-main);
    box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
}

/* 同意チェックボックス（文字はプレースホルダーと同じ15px・チェックは大きめ） */
.wpcf7-acceptance {
    display: block;
    font-size: 1rem;
    color: var(--machi-text);
    margin: 4px 0 8px;
}
.wpcf7-acceptance .wpcf7-list-item {
    margin: 0;
}
.wpcf7-acceptance label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-weight: 400;
    line-height: 1.6;
    margin: 0;
}
.wpcf7-acceptance input {
    width: 20px;
    height: 20px;
    margin-top: 1px;
    flex-shrink: 0;
    accent-color: var(--machi-main);
    cursor: pointer;
}

/* プライバシーポリシーリンク（site.css の a{color:inherit} を上書き） */
.wpcf7-form a {
    display: inline-block;
    margin-bottom: 24px;
    color: var(--machi-main);
    font-weight: 700;
    text-decoration: underline;
}

/* 送信ボタン（参照画像：濃色・横幅いっぱい） */
.wpcf7-submit {
    display: block;
    width: 100%;
    background: var(--machi-main);
    color: #fff;
    border: none;
    border-radius: 14px;
    padding: 16px 24px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s;
}
.wpcf7-submit:hover {
    background: var(--machi-main-dark);
}

/* バリデーション・送信後メッセージ */
.wpcf7-not-valid {
    border-color: #e3342f !important;
}
.wpcf7-not-valid-tip {
    display: block;
    margin-top: 6px;
    font-size: 0.75rem;
    color: #e3342f;
}
.wpcf7-response-output {
    margin: 16px 0 0 !important;
    padding: 12px 16px !important;
    border-radius: 10px;
    font-size: 1rem;
    background: #fff;
}

/* スマホ：カード余白を縮小 */
@media (max-width: 600px) {
    .wpcf7 {
        padding: 20px;
    }
}

/* =========================================
   記事構成 v2（検証中）
   「AIの回答で完結させず、住民が足せる余白を可視化する」構成のスタイル。
   .machi-answer-v2 の内側だけにスコープしているため、既存記事には影響しない。
   検証が済んだら、生成テンプレート側（createArticle-seo.md）と合わせて標準化する。
   ========================================= */

/* 冒頭の性格宣言。「これは完成品ではない」を最初に伝える */
.machi-answer-v2 .machi-v2-lead {
    margin: 0 0 16px;
    padding: 12px 16px;
    border-left: 3px solid var(--wp--custom--color--head-green, #4FBF9F);
    border-radius: 0 8px 8px 0;
    background: var(--wp--custom--color--quote-bg, #F7FCFA);
    font-size: 0.75rem;
    line-height: 1.7;
    color: var(--machi-muted);
}

/* 事実の一覧表。本文を縦に伸ばさず、比較できる形に圧縮する */
.machi-answer-v2 .machi-v2-table {
    width: 100%;
    margin: 16px 0;
    border-collapse: collapse;
    font-size: 0.75rem;
    line-height: 1.6;
}

.machi-answer-v2 .machi-v2-table th,
.machi-answer-v2 .machi-v2-table td {
    padding: 8px 10px;
    border: 1px solid var(--machi-border);
    text-align: left;
    vertical-align: top;
}

.machi-answer-v2 .machi-v2-table th {
    background: var(--wp--custom--color--quote-bg, #F7FCFA);
    white-space: nowrap;
}

.machi-answer-v2 .machi-v2-sub {
    color: var(--machi-muted);
}

/* スマホでは4カラムが潰れるため、1件=1カードに積み替える。
   見出しは各セルの data-label から出す（表の意味は保ったまま縦に並べる）。 */
@media (max-width: 600px) {
    .machi-answer-v2 .machi-v2-table,
    .machi-answer-v2 .machi-v2-table tbody,
    .machi-answer-v2 .machi-v2-table tr,
    .machi-answer-v2 .machi-v2-table td {
        display: block;
        width: auto;
    }

    .machi-answer-v2 .machi-v2-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    .machi-answer-v2 .machi-v2-table tr {
        margin-bottom: 12px;
        border: 1px solid var(--machi-border);
        border-radius: 10px;
        overflow: hidden;
    }

    .machi-answer-v2 .machi-v2-table td {
        border: none;
        border-bottom: 1px solid var(--machi-border);
    }

    .machi-answer-v2 .machi-v2-table tr td:last-child {
        border-bottom: none;
    }

    .machi-answer-v2 .machi-v2-table td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 2px;
        font-weight: 700;
        color: var(--machi-muted);
    }

    /* 1件目のセル（行き先）は見出し扱いにして、ラベルを省く */
    .machi-answer-v2 .machi-v2-table td:first-child {
        background: var(--wp--custom--color--quote-bg, #F7FCFA);
        font-size: 1.125rem;
        font-weight: 700;
    }

    .machi-answer-v2 .machi-v2-table td:first-child::before {
        display: none;
    }
}

/* AIが答えられた範囲と、答えられなかった範囲の境界。
   読者にとっては「自分が足せるもの」の一覧になる。
   直後のコメント欄（投稿フォーム・一覧）を同じ点線の枠に内包させ、
   1つの箱に見せるため、下辺は閉じずに開けておく
   （.machi-answer-v2:has(.machi-v2-boundary) + .machinale-comments 側で続きを描く）。 */
.machi-answer-v2 .machi-v2-boundary {
    margin: 20px 0 0;
    padding: 16px;
    border: 1px dashed var(--wp--custom--color--head-green, #4FBF9F);
    border-bottom: none;
    border-radius: 10px 10px 0 0;
    background: #fff;
}

/* 箱に内包するのは「投稿フォーム（見出し・入力欄・コメント利用規約まで）」
   だけ。実際に投稿されたコメント一覧は箱の外（下）に出す。
   #respond が投稿フォーム一式（comment_form() の出力）の実体で、
   「コメント利用規約」もこの中に含まれるため、ここに点線の続きを描いて
   閉じる。.machi-v2-boundary 自体は .machi-answer-v2 の中の最後の要素で、
   .machinale-comments とは兄弟関係にないため、ラッパーの .machi-answer-v2 を
   基準にする。--machi-card-pad をこの枠自身のpadding（16px）に合わせ、
   中の full-bleed 要素（投稿フォーム見出し下の罫線）がこの枠の内側に
   きちんと収まるようにする。 */
/* .machinale-comments 自体の上マージン（通常は1.8em）をこの枠内では
   打ち消し、.machi-v2-boundary の点線に隙間なくつなげる。
   本来は直後の兄弟（+）のはずだが、編集画面で空の段落ブロックが
   .machi-answer-v2 と .machinale-comments の間に残ると + が不成立になり
   下辺の点線が描かれず「枠が閉じていない」ように見える（2026-09-24 発覚）。
   間に何か挟まっても効くよう、直後兄弟（+）ではなく一般兄弟（~）にする。 */
.machi-answer-v2:has(.machi-v2-boundary) ~ .machinale-comments {
    margin-top: 0;
}

.machi-answer-v2:has(.machi-v2-boundary) ~ .machinale-comments #respond {
    /* 通常時の #respond は左右に -16px（旧 --machi-card-pad）のはみ出し
       マージンでカード端いっぱいに広げる指定が別途あるが、この枠内では
       .machi-v2-boundary と同じ幅で揃えたいので打ち消す。 */
    --machi-card-pad: 16px;
    margin: 0;
    padding: 0 16px 16px;
    border: 1px dashed var(--wp--custom--color--head-green, #4FBF9F);
    border-top: none;
    border-radius: 0 0 10px 10px;
    background: #fff;
}

/* 箱の外に出た実際のコメント一覧との間隔。 */
.machi-answer-v2:has(.machi-v2-boundary) ~ .machinale-comments #respond + .machinale-comments-list {
    margin-top: 20px;
}

.machi-answer-v2 .machi-v2-boundary-title {
    margin: 0 0 8px;
    font-weight: 700;
    color: var(--wp--custom--color--head-deep, #0f766e);
}

.machi-answer-v2 .machi-v2-boundary ul {
    margin: 8px 0 0;
    padding-left: 1.2em;
}

.machi-answer-v2 .machi-v2-boundary li {
    margin-bottom: 6px;
}

/* 記事の締め。「まとめ」で閉じずに、問いで開く */
.machi-answer-v2 .machi-v2-ask {
    margin: 24px 0 0;
    padding: 14px 16px;
    border-radius: 10px;
    background: var(--wp--custom--color--head-green, #4FBF9F);
    color: #fff;
    font-size: 1.125rem;
    line-height: 1.6;
}

.machi-answer-v2 .machi-v2-ask-sub {
    display: inline-block;
    margin-top: 6px;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.6;
    opacity: 0.9;
}

/* 詳細は畳む。JS不要（<details>）で、HTML上には存在するのでSEOにも残る */
.machi-answer-v2 .machi-v2-details {
    margin: 12px 0;
    border: 1px solid var(--machi-border);
    border-radius: 10px;
    background: #fff;
}

.machi-answer-v2 .machi-v2-details > summary {
    padding: 12px 16px;
    font-weight: 700;
    cursor: pointer;
    list-style: revert;
}

.machi-answer-v2 .machi-v2-details[open] > summary {
    border-bottom: 1px solid var(--machi-border);
}

.machi-answer-v2 .machi-v2-details > *:not(summary) {
    margin: 12px 16px;
}

.machi-answer-v2 .machi-v2-source {
    margin: 20px 0 0;
    font-size: 0.75rem;
    line-height: 1.7;
    color: var(--machi-muted);
}

/* =========================================
   連絡フォーム：対象コメントの表示
   ?machi_comment={ID} 付きでお問い合わせフォームを開いたとき、フォームの上に
   「どの記事のどのコメントについてか」を出す（functions.php の areatheme_contact_context_*）。
   ========================================= */
.machi-contact-context {
    margin: 0 0 20px;
    padding: 16px;
    border: 1px solid var(--wp--custom--color--head-green, #4FBF9F);
    border-radius: 12px;
    background: var(--wp--custom--color--quote-bg, #F7FCFA);
}

.machi-contact-context p {
    margin: 0;
}

.machi-contact-context-lead {
    font-weight: 700;
    color: var(--wp--custom--color--head-deep, #2F6F62);
}

.machi-contact-context-title {
    margin-top: 8px !important;
    font-size: 1rem;
}

.machi-contact-context-quote {
    margin: 10px 0 0;
    padding: 10px 12px;
    border-left: 3px solid var(--wp--custom--color--head-green, #4FBF9F);
    background: #fff;
    font-size: 1rem;
    line-height: 1.7;
    white-space: pre-line;
}

.machi-contact-context-meta {
    margin-top: 6px !important;
    font-size: 0.75rem;
    color: var(--machi-muted);
}

/* =========================================
   会社・お店図鑑（machi-shop-profile）
   企業・店舗が入力した情報をそのまま記事にする構成。AI生成のv2構成とは別物。
   ========================================= */
.machi-shop-profile-lead {
    margin: 0 0 16px;
    padding: 12px 16px;
    border-left: 3px solid var(--wp--custom--color--head-green, #4FBF9F);
    border-radius: 0 8px 8px 0;
    background: var(--wp--custom--color--quote-bg, #F7FCFA);
    font-size: 0.75rem;
    line-height: 1.7;
    color: var(--machi-muted);
}

.machi-shop-photo-wrap {
    margin: 0 0 16px;
}

.machi-shop-photo {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
}

.machi-shop-table {
    width: 100%;
    margin: 0 0 16px;
    border-collapse: collapse;
    font-size: 0.875rem;
    line-height: 1.6;
}

.machi-shop-table th,
.machi-shop-table td {
    padding: 8px 10px;
    border: 1px solid var(--machi-border);
    text-align: left;
    vertical-align: top;
}

.machi-shop-table th {
    width: 7em;
    background: var(--wp--custom--color--quote-bg, #F7FCFA);
    white-space: nowrap;
}

@media (max-width: 600px) {
    .machi-shop-table,
    .machi-shop-table tbody,
    .machi-shop-table tr,
    .machi-shop-table th,
    .machi-shop-table td {
        display: block;
        width: auto;
    }

    .machi-shop-table tr {
        margin-bottom: 10px;
        border: 1px solid var(--machi-border);
        border-radius: 10px;
        overflow: hidden;
    }

    .machi-shop-table th,
    .machi-shop-table td {
        border: none;
        border-bottom: 1px solid var(--machi-border);
    }

    .machi-shop-table tr td:last-child {
        border-bottom: none;
    }
}

/* =========================================
   まちの質問スポンサー LP（/info/sponsor/）
   ========================================= */
.machi-sponsor-lp-hero {
    text-align: center;
    margin-bottom: 0.5em;
}

.machi-sponsor-lp-hero p:first-child {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--machi-muted);
    margin-bottom: 4px;
}

.machi-sponsor-lp-price {
    background: var(--machi-bg);
    border: 1.5px solid var(--wp--custom--color--head-green, #4FBF9F);
    border-radius: 14px;
    padding: 20px 24px;
    text-align: center;
    margin: 1.5em 0;
}

.machi-sponsor-lp-price p {
    margin: 4px 0;
}

.machi-sponsor-lp-badge {
    display: inline-block;
    background: var(--machi-main);
    color: #fff;
    font-weight: 700;
    font-size: 0.875rem;
    padding: 4px 14px;
    border-radius: 999px;
    margin-bottom: 6px;
}

.machi-sponsor-lp-was {
    text-decoration: line-through;
    color: var(--machi-muted);
    font-size: 1rem;
}

.machi-sponsor-lp-now {
    font-size: 1.375rem;
    font-weight: 800;
    color: var(--wp--custom--color--head-green, #4FBF9F);
}

.machi-sponsor-lp-note {
    font-size: 0.875rem;
    color: var(--machi-muted);
}

.machi-sponsor-lp-example {
    background: #fff;
    border-left: 4px solid var(--wp--custom--color--head-green, #4FBF9F);
    border-radius: 8px;
    padding: 14px 18px;
    margin: 1em 0;
}

.machi-sponsor-lp-example strong {
    display: block;
    margin-bottom: 4px;
    color: var(--machi-main-dark);
}

.machi-sponsor-lp-flow {
    text-align: center;
    background: var(--machi-bg);
    border-radius: 12px;
    padding: 16px;
    margin: 1em 0;
}

.machi-sponsor-lp-flow p {
    margin: 6px 0;
}

.machi-sponsor-lp-flow-arrow {
    color: var(--machi-muted);
    font-size: 1.25rem;
    line-height: 1;
}

.machi-sponsor-lp-divider {
    border: none;
    border-top: 1px dashed var(--machi-border);
    margin: 2em 0;
}

.machi-sponsor-lp-cta {
    text-align: center;
    background: var(--machi-bg);
    border-radius: 16px;
    padding: 32px 20px;
    margin: 2em 0 0;
}

.machi-sponsor-lp-cta-btn {
    display: inline-block;
    margin-top: 16px;
    background: var(--machi-main);
    color: #fff;
    font-weight: 700;
    padding: 14px 32px;
    border-radius: 999px;
    text-decoration: none;
    font-size: 1.125rem;
    transition: background 0.15s;
}

.machi-sponsor-lp-cta-btn:hover {
    background: var(--machi-main-dark);
    color: #fff;
}