@charset "UTF-8";

/*
サクコモ通信 個別ページ -----------------------------------------------------------------------------------------------*/
/* single-tsushin.php で出力される 2 カラムレイアウト用 CSS。
   - PC: 左カラム sticky（タイトル等）/ 右カラム 本文
   - タブレット以下: 縦積み（タイトル等が上、本文下） */

/* ページ全体の背景色（body 単位で上書き）。
   single-tsushin というクラスは WordPress が body にデフォルトで付ける。 */
#body_wrap.single-tsushin,
#body_wrap.single.single-tsushin {
    background-color: #fff3f0;
}

/* === ロゴだけのシンプルヘッダー（header-tsushin.php）===
   tsushin 個別ページ専用。左寄せでロゴ画像 1 枚をクリックするとトップへ遷移。 */
.tsushin-header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 24px 5%;
    background-color: #fff3f0;
}
.tsushin-header__logo {
    display: inline-block;
    line-height: 0; /* インライン画像の下に出る余白を消す */
    transition: opacity var(--hover-duration) var(--hover-ease);
}
.tsushin-header__logo:hover {
    opacity: 0.7;
}
.tsushin-header__logo img {
    display: block;
    width: auto;
    max-width: 240px;
    height: auto;
    margin-left: -12px;
}
@media (max-width: 599px) {
    .tsushin-header {
        padding: 16px 5%;
    }

}

/* === スクロール時に出る固定ヘッダー（コンパクト版）===
   メインの .tsushin-header が画面外に消えたら .is-shown が付いて上から滑り込んで表示。
   header-tsushin.php に書いてある IntersectionObserver で切り替わる。 */
.tsushin-fixHeader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 10px 5%;
    /* 後ろの本文が透けて被って見えないよう完全不透明に */
    background-color: #fff3f0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    z-index: 100;
    transform: translateY(-100%);
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    pointer-events: none; /* 隠れているときはクリックを通す */
}
.tsushin-fixHeader.is-shown {
    transform: translateY(0);
    pointer-events: auto;
}
.tsushin-fixHeader__logo {
    display: inline-block;
    line-height: 0;
    transition: opacity var(--hover-duration) var(--hover-ease);
}
.tsushin-fixHeader__logo:hover {
    opacity: 0.7;
}
.tsushin-fixHeader__logo img {
    display: block;
    width: auto;
    max-width: 200px; /* メインより一回り小さく */
    height: auto;
}
@media (max-width: 599px) {
    .tsushin-fixHeader {
        padding: 8px 5%;
    }
    .tsushin-fixHeader__logo img {
        max-width: 150px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .tsushin-fixHeader {
        transition: none;
    }
}
/* ログイン中は WP 管理バー（高さ 32px / モバイルは 46px）の下に位置を下げる。
   通常は body.admin-bar クラスで判定するが、SWELL のヘッダーキャッシュなどで
   このクラスが付かないケースがあるので #wpadminbar 要素の存在でも判定する。 */
.admin-bar .tsushin-fixHeader,
html:has(#wpadminbar) .tsushin-fixHeader {
    top: 32px;
}
@media (max-width: 782px) {
    .admin-bar .tsushin-fixHeader,
    html:has(#wpadminbar) .tsushin-fixHeader {
        top: 46px;
    }
}

/* SWELL の標準コンテナ内余白を抑える（テンプレ側が自前で padding を持つため） */
.single-tsushin .l-mainContent,
.single-tsushin .l-content {
    background-color: transparent;
}

/* SWELL の「ページタイトル上部表示」が ON のとき自動で出る大きなタイトル領域を
   非表示。これは parts/top_title_area.php が出すブロックで、中で parts/single/post_head
   （タイトル + 日付 + カテゴリ）も呼んでしまうので、tsushin の専用レイアウトと
   モロにかぶる。 */
.single-tsushin #top_title_area,
.single-tsushin .l-topTitleArea,
.single-tsushin .l-articleHeader,
.single-tsushin .p-postThumb {
    display: none !important;
}

/* SWELL の固定シェアボタン・後続記事ブロック等が hook で挿入されるケースに備えて
   tsushin 個別ページでは抑制する（必要なら後で個別に解除）。 */
.single-tsushin .p-shareBtns.-fix,
.single-tsushin #after_article,
.single-tsushin .p-postFoot,
.single-tsushin .p-postAuthor,
.single-tsushin .p-relatedPosts {
    display: none !important;
}

/* SWELL の自動目次（.p-toc）を tsushin では非表示。
   functions.php 側のフィルタが効かない（SWELL 内部のフック名/挿入経路が
   異なるバージョンの可能性）ので DOM 出力後に CSS で確実に消す。 */
.single-tsushin .p-toc.-double {
    display: none !important;
}

/* パンくず重複防止：single-tsushin.php 内で常にパンくずを出力するので、
   SWELL 設定 pos_breadcrumb === 'bottom' のとき footer.php が自動で出すパンくずを抑制。
   .tsushin-single の外にある .p-breadcrumb（=footer 側出力）だけ消す。 */
.single-tsushin .p-breadcrumb {
    display: none !important;
}
.single-tsushin .tsushin-single .p-breadcrumb {
    display: block !important;
}

/* SWELL の breadcrumb を tsushin 個別ページで再配置：
   - ビューポートいっぱいに広げず、.tsushin-single のコンテンツ領域内に収める。
     これで breadcrumb 左端が __inner の左端＝「サクコモ通信」ブランド名の左端に揃う
   - .tsushin-single の padding-top をキャンセルして大ロゴ直下に置く
   - position: sticky で fix-header のすぐ下に貼り付き、スクロール中も常に見える
   - 背景はページ背景色（#fff3f0）にして、下を流れていく本文を隠す。
     コンテンツ領域より外側のビューポート余白も body 背景が #fff3f0 なので
     見た目は途切れず一枚のバーに見える。 */
.single-tsushin .tsushin-single > .p-breadcrumb {
    position: sticky;
    top: 56px; /* fix-header の高さに合わせる */
    z-index: 90; /* fix-header(100) より下、本文より上 */
    margin: -32px 0 24px; /* margin-top: -32 で .tsushin-single の padding-top をキャンセル */
    padding: 10px 0;
    background: #fff3f0;
    font-size: 13px;
    line-height: 1.6;
    color: #8a6a60;
    border: 0;
}
.single-tsushin .tsushin-single > .p-breadcrumb .p-breadcrumb__list {
    padding-left: 0;
}
.single-tsushin .tsushin-single > .p-breadcrumb a {
    color: inherit;
    text-decoration: none;
    transition: color var(--hover-duration) var(--hover-ease);
}
.single-tsushin .tsushin-single > .p-breadcrumb a:hover {
    color: var(--color-orange, #d98666);
}

/* WP 管理バーが出ているときは fix-header が下に押されるぶん、
   breadcrumb の sticky 位置も下げる。 */
body.admin-bar.single-tsushin .tsushin-single > .p-breadcrumb,
html:has(#wpadminbar) body.single-tsushin .tsushin-single > .p-breadcrumb {
    top: calc(56px + 32px); /* fix-header + admin bar(PC) */
}
@media (max-width: 782px) {
    .admin-bar.single-tsushin .tsushin-single > .p-breadcrumb,
    html:has(#wpadminbar) body.single-tsushin .tsushin-single > .p-breadcrumb {
        top: calc(56px + 46px); /* admin bar(モバイル) */
    }
}
/* モバイルは fix-header 自体が小さい（padding 8px + logo 約 27px = 43px）ので
   breadcrumb の sticky 位置もそれに合わせて下げる */
@media (max-width: 599px) {
    .admin-bar.single-tsushin .tsushin-single > .p-breadcrumb,
    html:has(#wpadminbar) body.single-tsushin .tsushin-single > .p-breadcrumb {
        top: calc(43px + 46px);
    }
}

/* SWELL の .l-container は max-width を
     calc(var(--container_size, 0px) + var(--swl-pad_container, 0px) * 2)
   で算出している。max-width 直書きで上書きしてもこの calc が勝つケースがあるので、
   tsushin 個別ページでは body 配下で CSS 変数自体を上書きして、
   合計 1400px（= 口コミセクションの .hitoVoice-more-align テキスト揃え基準幅）に調整する。 */
.single-tsushin {
    --container_size: calc(1400px - var(--swl-pad_container, 0px) * 2);
}
/* 上の変数戦略が効かない環境向けの保険：max-width 直接指定も併用 */
.single-tsushin #content.l-content.l-container {
    max-width: 1400px;
}

/* セクション全体（背景は body 側で塗ってるのでここでは指定しない） */
.tsushin-single {
    padding: 32px 5% 80px;
}
.tsushin-single__inner {
    max-width: 1400px; /* トップの .hitoVoice-more-align と同じ幅感 */
    margin: 0 auto;
}

/* パンくず */
.tsushin-single__breadcrumb {
    font-size: 13px;
    line-height: 1.6;
    color: #8a6a60;
    margin-bottom: 48px;
}
.tsushin-single__breadcrumb a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color var(--hover-duration) var(--hover-ease);
}
.tsushin-single__breadcrumb a:hover {
    border-color: currentColor;
}

/* ヒーロー画像：スマホ（< 600px）でのみ表示する。
   PC・タブレットでは雑誌風表紙サムネ（.tsushin-single__cover）でアイキャッチを
   見せているので不要 → display: none。
   スマホ用の表示切り替えは下のメディアクエリ（max-width: 599px）で行う。
   サイドバー（.tsushin-single__side-inner）内のタイトル/日付の下に配置されるので、
   親 flex コンテナの gap: 18px がスペースを取ってくれる → margin は 0。
   <figure> + the_post_thumbnail() なので WP の srcset / lazy load も自動。 */
.tsushin-single__hero {
    display: none;
    margin: 0;
    padding: 0; /* figure のデフォルト余白を消す */
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}
.tsushin-single__hero-img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center;
}

/* レイアウト：2 カラム grid */
.tsushin-single__layout {
    display: grid;
    grid-template-columns: 30% 1fr;
    gap: 8rem;
    align-items: start;
}

/* 左カラム（sticky）*/
.tsushin-single__side {
    position: sticky;
    /* fix-header（約56px）+ 管理バー(32px) + 余白を見越して sticky 位置を下げる */
    top: 100px;
    align-self: start;
}
.tsushin-single__side-inner {
    /* 左カラムの中身をひとまとめにする小さなボックス */
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* 「サクコモ通信」ブランド表記 + vol を横並びにまとめるラッパー */
.tsushin-single__brandVol {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}

/* 「サクコモ通信」ブランド表記（vol の左） */
.tsushin-single__brand {
    margin: 0;
    font-family: 'Kiwi Maru', serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.12em;
    color: var(--color-orange, #d98666);
    line-height: 1;
}

/* vol 番号 */
.tsushin-single__vol {
    display: flex;
    align-items: baseline;
    gap: 2px;
    color: var(--color-orange, #d98666);
    line-height: 1;
    font-family: 'Noto Sans JP', sans-serif;
}
.tsushin-single__vol-label {
    font-size: 14px;
    letter-spacing: 0.06em;
}
.tsushin-single__vol-num {
    font-size: 24px;
    font-weight: 500;
    letter-spacing: 0.02em;
}

/* タイトル */
.tsushin-single__title {
    font-family: var(--font-kiwi);
    font-size: 24px;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: 0.04em;
    color: var(--color-brown, #4a2f2a);
    margin: 0;
}

/* meta（日付 + カテゴリ） */
.tsushin-single__meta {
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-size: 13px;
}
.tsushin-single__date {
    color: #8a6a60;
    letter-spacing: 0.06em;
}

/* タクソノミー term chips */
.tsushin-single__terms {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.tsushin-single__chip {
    display: inline-block;
    padding: 3px 10px;
    background-color: var(--color-orange, #d98666);
    color: #fff;
    border-radius: 999px;
    font-size: 11px;
    letter-spacing: 0.06em;
}

/* 左カラム内の表紙風サムネ。
   .tsushin-cover の本体スタイルは style.css 側（トップの一覧と共通）にあり、
   container-type: inline-size により親に合わせて cqi 単位で自動スケールする。
   サイドバー幅（280px）の半分くらいのサイズに抑える。 */
.tsushin-single__cover {
    margin-top: 8px;
    width: 140px; /* サイドバー幅の約半分 */
    align-self: center; /* サイドバー内で中央配置 */
}

/* 前の号 / 次の号 ナビ（vol.XX と矢印だけのシンプル版） */
.tsushin-single__pager {
    display: flex;
    gap: 12px;
    margin-top: 16px;
    font-family: 'Noto Sans JP', sans-serif;
}
.tsushin-single__pager-link,
.tsushin-single__pager-spacer {
    flex: 1 1 0;
    min-width: 0;
}
.tsushin-single__pager-link {
    display: inline-flex;
    align-items: center; /* チェブロンとテキストを中央揃え */
    gap: 6px;
    color: var(--color-orange, #d98666);
    text-decoration: none;
    transition: opacity var(--hover-duration) var(--hover-ease),
                transform var(--hover-duration) var(--hover-ease);
}
.tsushin-single__pager-link:hover {
    opacity: 0.7;
}
.tsushin-single__pager-link--prev {
    justify-content: flex-start;
}
.tsushin-single__pager-link--next {
    justify-content: flex-end;
}
.tsushin-single__pager-link--prev:hover {
    transform: translateX(-2px);
}
.tsushin-single__pager-link--next:hover {
    transform: translateX(2px);
}
/* 矢印：シンプルな「>」チェブロン。
   border-top と border-right を持つ正方形を 45deg 回転させて作る。
   currentColor に追従するので親リンクの color を変えれば矢印色も変わる。
   prev は -135deg 回転で左向き「<」に。 */
.tsushin-single__pager-arrow {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-top: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    transform: rotate(45deg);
    flex-shrink: 0;
}
.tsushin-single__pager-link--prev .tsushin-single__pager-arrow {
    transform: rotate(-135deg);
}
.tsushin-single__pager-vol {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.04em;
}

/* 一覧に戻るリンク：見た目は style.css の共通ボタン .sakukomo-link-btn で当てる。
   ページ下部の中央に配置。 */
.tsushin-single__back {
    margin: 80px 0 0;
    text-align: center;
    color: var(--color-orange, #d98666); /* 共通ボタンが color: inherit なので親で色を決める */
}

/* 右カラム：本文 */
.tsushin-single__main {
    /* SWELL の content スタイルを邪魔しないよう、ベースだけ */
    font-size: 15px;
    line-height: 1.95;
    color: var(--color-brown, #4a2f2a);
    /* grid item は初期値 min-width: auto のため、幅の広い表などの
       min-content サイズでカラム自体が広がりページが横にはみ出す。
       0 にして、はみ出しは子要素側の overflow-x で処理させる。 */
    min-width: 0;
}
.tsushin-single__main > * + * {
    margin-top: 1.5em;
}
.tsushin-single__main img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
}

/* === 本文中の見出し（h2〜h6）===
   SWELL デフォルトの背景バー・装飾線などを抑えて、誌面寄りの落ち着いた階層に。
   SWELL は h2 等を :where() 内で装飾するので、こちら側は素直なセレクタで上書き可能。
   ::before / ::after 由来の装飾も念のため content: none で消す。 */
.tsushin-single__main h2,
.tsushin-single__main h3,
.tsushin-single__main h4,
.tsushin-single__main h5,
.tsushin-single__main h6 {
    background: none !important;
    border: 0;
    padding: 0;
    color: var(--color-brown, #4a2f2a);
    font-family: var(--font-kiwi);
    font-weight: 500 !important;
    line-height: 1.5;
    letter-spacing: 0.04em;
}
.tsushin-single__main h2::before,
.tsushin-single__main h2::after,
.tsushin-single__main h3::before,
.tsushin-single__main h3::after,
.tsushin-single__main h4::before,
.tsushin-single__main h4::after,
.tsushin-single__main h5::before,
.tsushin-single__main h5::after,
.tsushin-single__main h6::before,
.tsushin-single__main h6::after {
    content: none !important;
}

/* h2：章タイトル相当。下に細いオレンジの区切り線で章感を出す */
.tsushin-single__main h2 {
    font-size: 22px;
    font-weight: 600;
    margin-top: 2.4em;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--color-orange, #d98666);
}
/* 先頭の h2 は記事の「リード見出し」として章見出しと階層を分ける：
   オレンジ下線を外し、大きめ＋軽めウェイトで誌面の導入見出しらしく。
   `:first-of-type` を使うのは、本文先頭に SWELL の自動目次 .p-toc（div）が
   挿入されるため `:first-child` ではマッチしないケースがあるから。 */
.tsushin-single__main h2:first-of-type {
    font-size: 28px;
    font-weight: 500;
    margin-top: 0;
    margin-bottom: 1.4em;
    padding-bottom: 0;
    border-bottom: 0;
    line-height: 1.55;
}

/* h3：節見出し。左に短いオレンジのアクセント */
.tsushin-single__main h3 {
    position: relative;
    font-size: 19px;
    font-weight: 600;
    margin-top: 2em;
    padding-left: 14px;
}
.tsushin-single__main h3::before {
    content: "" !important;
    position: absolute;
    left: 0;
    top: 0.35em;
    bottom: 0.35em;
    width: 3px;
    border-radius: 2px;
    background: var(--color-orange, #d98666);
}

/* h4：小見出し。装飾なしのウェイト違い */
.tsushin-single__main h4 {
    font-size: 17px;
    font-weight: 600;
    margin-top: 1.8em;
}

/* h5：さらに細かい段落見出し */
.tsushin-single__main h5 {
    font-size: 15px;
    font-weight: 600;
    margin-top: 1.6em;
    color: #6b4a40;
}

/* h6：最小レベル。本文と同サイズで weight だけ強める */
.tsushin-single__main h6 {
    font-size: 14px;
    font-weight: 600;
    margin-top: 1.5em;
    color: #8a6a60;
    letter-spacing: 0.08em;
}

/* 本文中の章区切り <hr>：
   SWELL/WP デフォルトの 1 本線を、誌面感のあるオレンジ中点 3 つ「· · ·」に置換。
   - 元の border / background / opacity をリセット
   - SVG（円 3 つ）を背景画像として中央配置
   - 上下に大きめ余白を取って章間のリズムを作る
   .has-alpha-channel-opacity は WP のセパレータブロックが opacity 指定時に付ける
   クラスで、デフォルトで半透明になるので opacity: 1 で打ち消す。 */
.tsushin-single__main hr,
.tsushin-single__main hr.wp-block-separator {
    border: 0;
    background-color: transparent;
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 5'%3E%3Ccircle cx='2.5' cy='2.5' r='2.5' fill='%23d98666'/%3E%3Ccircle cx='35' cy='2.5' r='2.5' fill='%23d98666'/%3E%3Ccircle cx='67.5' cy='2.5' r='2.5' fill='%23d98666'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 70px 5px;
    height: 5px;
    margin: 3em auto;
    padding: 0;
    opacity: 1;
}

/* === 著者ボックス（記事末尾「この記事を書いた人」） =========================
   SWELL デフォルトの装飾（色付きタイトルバー + 枠線）をリセットして、
   - 上端に細い1本線（ブラウン）
   - 右肩にオレンジの小さなタブで「この記事を書いた人」を表示
   - 本体は白背景・最小限の罫線で誌面の「プロフィール欄」風に
   構造（.swell-block-capbox > .cap_box_ttl + .cap_box_content）は SWELL のまま。
   .wp-block-column の inline `flex-basis: 25%` を上書きするため一部 !important を使用。 */
.tsushin-single .swell-block-capbox {
    position: relative;
    margin-top: 80px;
    padding: 0 0 8px;
    background: transparent;
    border: 0;
    border-top: 1px solid var(--color-orange, #4a2f2a);
    border-radius: 0;
    box-shadow: none;
}

/* タブ本体：線の下、右寄せ。通常フローで配置（旧版は絶対配置で線の上に
   飛び出させていたが、線の下に置きたい要望で static 配置に変更）。 */
.tsushin-single .swell-block-capbox > .cap_box_ttl {
    position: static;
    margin: 0 0 1rem !important;
    padding: 0;
    text-align: right;
    justify-content: flex-end;
    background: transparent;
    border: 0;
    border-radius: 0;
    min-height: 0;
}
/* SWELL デフォルトでタイトル前後に出る装飾アイコン等を消す */
.tsushin-single .swell-block-capbox > .cap_box_ttl::before,
.tsushin-single .swell-block-capbox > .cap_box_ttl::after {
    content: none !important;
    display: none !important;
}
.tsushin-single .swell-block-capbox > .cap_box_ttl > span {
    display: inline-block;
    padding: 7px 20px;
    background: var(--color-orange, #d98666);
    color: #fff;
    font-family: var(--font-noto), sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    line-height: 1;
}

/* コンテンツ部リセット */
.tsushin-single .swell-block-capbox > .cap_box_content {
    padding: 0;
    background: transparent;
    border: 0;
}

/* アバター列 + テキスト列：縦中央揃え。
   SWELL の inline `flex-basis: 25%` を !important で打ち消して、
   アバター列は固定 100px、テキスト列は残り全て、にする。 */
.tsushin-single .swell-block-capbox .wp-block-columns {
    align-items: center;
    gap: 24px;
    margin: 0;
}
.tsushin-single .swell-block-capbox .wp-block-columns > .wp-block-column:first-child {
    flex: 0 0 100px !important;
    max-width: 100px;
}
.tsushin-single .swell-block-capbox .wp-block-columns > .wp-block-column:nth-child(2) {
    flex: 1 1 0 !important;
    min-width: 0;
}

/* アバター figure / img：丸く、細いオレンジ枠 */
.tsushin-single .swell-block-capbox figure {
    margin: 0;
}
.tsushin-single .swell-block-capbox figure img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 50%;
    border: 1px solid rgba(217, 134, 102, 0.4);
    box-shadow: none;
}

/* 名前用見出し（2つ目カラムの一番上に置く想定。h2〜h6 のどれでも対応）。
   本文 h4 用の装飾（左オレンジ罫 / margin-top: 1.8em 等）が capbox 内でも
   発火してしまうので、ここでまとめてリセットする。 */
.tsushin-single .swell-block-capbox .wp-block-column :is(h2, h3, h4, h5, h6) {
    margin: 0 0 8px;
    padding: 0;
    background: none;
    border: 0;
    color: var(--color-brown, #4a2f2a);
    font-family: var(--font-noto), sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.04em;
}
.tsushin-single .swell-block-capbox .wp-block-column :is(h2, h3, h4, h5, h6)::before,
.tsushin-single .swell-block-capbox .wp-block-column :is(h2, h3, h4, h5, h6)::after {
    content: none !important;
    display: none !important;
}

/* バイオ本文：ブラウン系で控えめに */
.tsushin-single .swell-block-capbox p {
    margin: 0;
    color: #6b4a40;
    font-size: 14px;
    line-height: 1.85;
    letter-spacing: 0.03em;
}
/* 名前見出しの直下に p が来るケースの間隔だけ気持ち詰める */
.tsushin-single .swell-block-capbox .wp-block-column :is(h2, h3, h4, h5, h6) + p {
    margin-top: 4px;
}

/* 名前の直下に置く「移住X年目」などのメタ行。
   段落ブロックの「追加CSSクラス」に author-meta を入れて使う。
   名前 H4（15px/700/ブラウン）よりも小さく、ブランドオレンジで「肩書き」感を出す。 */
.tsushin-single .swell-block-capbox .author-meta {
    margin: 2px 0 10px;
    color: var(--color-orange, #d98666);
    font-family: var(--font-noto), sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.12em;
}

/* === SNSシェアボタン（記事末尾、「一覧へ」ボタンの上） =========================
   X / Facebook / LINE / URLコピー の4つを丸アイコンで横並び。
   PC・タブ・スマホ共通レイアウト（中央寄せ）。
   アイコンは SVG inline（currentColor 追従）なので hover で色をブランドオレンジに。 */
.tsushin-single__share {
    margin: 64px 0 0;
    text-align: center;
}
.tsushin-single__share-label {
    margin: 0 0 16px;
    color: var(--color-brown, #4a2f2a);
    font-family: var(--font-noto), sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.2em;
}
.tsushin-single__share-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 14px;
}
.tsushin-single__share-list > li {
    margin: 0;
    padding: 0;
}

/* ボタン本体：白丸 + 細い枠、hover でブランドオレンジに */
.tsushin-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    background: #fff;
    border: 1px solid rgba(74, 47, 42, 0.18);
    color: var(--color-brown, #4a2f2a);
    text-decoration: none;
    cursor: pointer;
    transition: color var(--hover-duration) var(--hover-ease),
                border-color var(--hover-duration) var(--hover-ease),
                transform var(--hover-duration) var(--hover-ease);
}
.tsushin-share-btn svg {
    width: 18px;
    height: 18px;
    display: block;
}
.tsushin-share-btn:hover,
.tsushin-share-btn:focus-visible {
    color: var(--color-orange, #d98666);
    border-color: var(--color-orange, #d98666);
    transform: translateY(-2px);
    outline: none;
}

/* コピー成功トースト：body 直下に JS で動的生成される。 */
.tsushin-share-toast {
    position: fixed;
    bottom: 32px;
    left: 50%;
    transform: translate(-50%, 16px);
    padding: 10px 22px;
    background: rgba(74, 47, 42, 0.95);
    color: #fff;
    border-radius: 999px;
    font-family: var(--font-noto), sans-serif;
    font-size: 13px;
    letter-spacing: 0.06em;
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.tsushin-share-toast.is-shown {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* PC（≥ 960px）：シェアセクションをレイアウトと同じ 2 カラムグリッドに乗せて、
   ラベルと丸ボタン群を右カラム（本文側）に寄せた状態で中央配置する。
   .tsushin-single__layout と同じ `grid-template-columns: 30% 1fr; gap: 8rem` で
   位置を完全一致させているので、本文の左端＝シェア群の左端基準が揃う。 */
@media (min-width: 960px) {
    .tsushin-single__share {
        display: grid;
        grid-template-columns: 30% 1fr;
        column-gap: 8rem;
    }
    .tsushin-single__share-label,
    .tsushin-single__share-list {
        grid-column: 2;
    }
}

/* スマホ（≤ 599px）：アバターを中央寄せで縦積みに */
@media (max-width: 599px) {

    .tsushin-single .swell-block-capbox > .cap_box_ttl > span {
        padding: 6px 14px;
        font-size: 10px;
        letter-spacing: 0.16em;
    }
    .tsushin-single .swell-block-capbox .wp-block-columns {
        gap:4px;
    }
    /* カラム1（アバター）を全幅にして、中の figure を margin: 0 auto で中央寄せ。
       flex item の margin auto より確実に中央配置できる。 */
    .tsushin-single .swell-block-capbox .wp-block-columns > .wp-block-column:first-child {
        flex: 1 1 100% !important;
        max-width: 100%;
        margin: 0 0 .5rem !important;
    }
    .tsushin-single .swell-block-capbox .wp-block-columns > .wp-block-column:nth-child(2) {
        flex: 1 1 100% !important;
    }
    .tsushin-single .swell-block-capbox figure {
        max-width: 80px;
        margin: 0 auto;
    }
    /* スマホでは中央縦並びで揃える：アバター → 名前 → メタ → バイオ すべて中央寄せ */
    .tsushin-single .swell-block-capbox .wp-block-column :is(h2, h3, h4, h5, h6) {
        text-align: center;
        margin-bottom: 1rem;
    }
    .tsushin-single .swell-block-capbox .author-meta {
        text-align: center;
        margin-bottom: 1rem;
    }
    .tsushin-single .swell-block-capbox p {
        font-size: 13px;
    }
    .tsushin-single .swell-block-capbox .wp-block-columns {
        gap: 0 !important;
    }
}

/* タブレット以下：縦積み */
@media (max-width: 959px) {
    .tsushin-single {
        padding: 24px 5% 60px;
    }
    .tsushin-single__breadcrumb {
        margin-bottom: 32px;
    }
    .tsushin-single__layout {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .tsushin-single__side {
        position: static;
        top: auto;
    }
    .tsushin-single__title {
        font-size: 22px;
    }
    .tsushin-single__vol-num {
        font-size: 32px;
    }
}

/* タブレット（600〜959px）専用：表紙画像を左、ブランド/vol/タイトル/meta を右に並べる
   2 カラムグリッド。pager は下段で全幅。
   モバイル（<600px）は上の 959px ルールのまま縦積みになる（このメディアクエリは適用外）。 */
@media (min-width: 600px) and (max-width: 959px) {
    .tsushin-single__side-inner {
        display: grid;
        grid-template-columns: 180px 1fr;
        column-gap: 28px;
        row-gap: 12px;
        align-items: start;
    }
    /* 表紙：左カラム、上から brand/vol/title/meta の 4 行ぶんを占有 */
    .tsushin-single__cover {
        grid-column: 1;
        grid-row: 1 / span 4;
        width: 100%; /* 親セル（180px）に合わせる */
        margin-top: 0;
        align-self: start;
    }
    /* テキスト群は右カラムに順番に積まれる（auto-placement） */
    .tsushin-single__brand,
    .tsushin-single__vol,
    .tsushin-single__title,
    .tsushin-single__meta {
        grid-column: 2;
    }
    /* pager は下段、両カラム横断で幅いっぱい */
    .tsushin-single__pager {
        grid-column: 1 / -1;
        margin-top: 8px;
    }
}

/* スマホ（< 600px）専用：
   - ヒーロー画像を表示（PC・タブレットでは非表示）
   - 雑誌風表紙サムネ（.tsushin-single__cover）はヒーロー画像で代替するので非表示
   レイアウト順は: パンくず → ヒーロー → ブランド/vol/タイトル/meta/pager → 本文 */
@media (max-width: 599px) {
    .tsushin-single__hero {
        display: block;
    }
    .tsushin-single__cover {
        display: none;
    }
    .tsushin-single__main h2 {
        font-size: 18px;
    }
    .tsushin-single__main h2:first-of-type {
        font-size: 20px;
    }
    

}