/* ================================================================
   READINGS — 読みもの 記事詳細
   ================================================================ */

/* ── ヒーロー画像 ────────────────────────────────────────────── */
.magazine-detail-hero {
    position: relative;
    width: 100%;
    max-height: 520px;
    overflow: hidden;
    background: #1a1a1a;
}
/* メイン画像未設定でもラベルが前コンテンツに重ならないよう高さを確保 */
.magazine-detail-hero.is-noimg {
    min-height: 120px;
}
.magazine-detail-hero img {
    width: 100%;
    height: 520px;
    object-fit: cover;
    display: block;
    opacity: 0.9;
}
/* 写真の明るさは記事によって違う。ラベルの下だけ、そっと影を敷いて読めるようにする */
.magazine-detail-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 120px;
    pointer-events: none;
    background: linear-gradient(to top, rgba(0,0,0,0.34), rgba(0,0,0,0));
}
.magazine-detail-hero.is-noimg::after { display: none; }
.magazine-detail-hero-label {
    position: absolute;
    bottom: 24px;
    left: 50%;
    z-index: 1;
    transform: translateX(-50%);
}
.magazine-detail-hero-label .blairitc {
    color: rgba(255,255,255,0.82);
    font-size: 11px;
    letter-spacing: 0.4em;
    text-shadow: 0 1px 3px rgba(0,0,0,0.35);
}

/* ── ラッパー ────────────────────────────────────────────────── */
.magazine-detail-wrap {
    padding: 56px 0 70px;
}

/* ── ヘッダー部 ─────────────────────────────────────────────── */
.magazine-detail-head {
    max-width: 720px;
    margin: 0 auto 44px;
    padding: 0 20px;
}
.magazine-detail-head-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.magazine-detail-no {
    display: inline-block;
    font-size: 11px;
    letter-spacing: 0.16em;
    padding: 4px 10px;
    background: #1a1a1a;
    color: #fff;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.magazine-detail-ttl {
    font-size: 24px;
    font-weight: bold;
    letter-spacing: 0.06em;
    line-height: 1.7;
    color: #1a1a1a;
    margin-bottom: 10px;
}
.magazine-detail-sub {
    display: flex;
    align-items: baseline;
    gap: 14px;
    flex-wrap: wrap;
}
.magazine-detail-customer {
    font-size: 12px;
    color: #999;
    letter-spacing: 0.12em;
}
.magazine-detail-date {
    font-size: 11px;
    color: #aaa;
    letter-spacing: 0.1em;
    font-variant-numeric: tabular-nums;
}

/* ── 物語ナビ（前半／後半の現在地） ──────────────────────────── */

/* ── 住まいの属性（施工事例のデータをそのまま借りる） ──────────── */
.magazine-detail-spec {
    display: flex;
    flex-wrap: wrap;
    gap: 0 28px;
    margin-top: 22px;
    padding: 14px 0;
    border-top: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
}
.magazine-detail-spec > div {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 3px 0;
}
.magazine-detail-spec dt {
    font-size: 10px;
    letter-spacing: 0.12em;
    color: #aaa;
    white-space: nowrap;
}
.magazine-detail-spec dd {
    font-size: 12px;
    letter-spacing: 0.04em;
    color: #444;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ── 本文エリア ─────────────────────────────────────────────── */
.magazine-detail-main {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 20px;
}
.magazine-detail-lead {
    margin-bottom: 40px;
    padding: 22px 24px;
    background: #f7f5f2;
}
.magazine-detail-lead p {
    font-size: 14px;
    line-height: 2.1;
    letter-spacing: 0.05em;
    color: #444;
}

/* WYSIWYG共通の本文スタイル（reset.css打ち消し込み） */
.magazine-body-text {
    font-size: 15px;
    line-height: 2.2;
    letter-spacing: 0.05em;
    color: #333;
    margin-bottom: 40px;
}
.magazine-body-text p {
    margin-bottom: 1.8em;
}
.magazine-body-text p:last-child {
    margin-bottom: 0;
}
.magazine-body-text h2 {
    font-size: 19px;
    font-weight: bold;
    letter-spacing: 0.06em;
    line-height: 1.7;
    margin: 2.2em 0 1em;
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd;
    color: #1a1a1a;
}
.magazine-body-text h3 {
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 0.06em;
    margin: 2em 0 0.9em;
    padding-left: 12px;
    border-left: 3px solid #1a1a1a;
    color: #1a1a1a;
}
.magazine-body-text ul {
    list-style: disc;
    padding-left: 1.5em;
    margin-bottom: 1.8em;
}
.magazine-body-text ol {
    list-style: decimal;
    padding-left: 1.5em;
    margin-bottom: 1.8em;
}
.magazine-body-text ul li,
.magazine-body-text ol li {
    display: list-item;
    list-style: inherit;
    margin-bottom: 0.4em;
}
.magazine-body-text a {
    color: #1a1a1a;
    text-decoration: underline;
}
.magazine-body-text img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1.5em 0;
}
/*
  おかしなトークの会話。RENOVES側は左、お客様は右に置く。
  誰と誰が喋っているかが、読まなくても分かるようにする。
*/
.magazine-body-text .talk-line {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 18px;
}
.magazine-body-text .talk-line.is-guest {
    flex-direction: row-reverse;
}
.magazine-body-text .talk-avatar {
    flex: 0 0 58px;
    width: 58px;
    text-align: center;
}
.magazine-body-text .talk-face {
    width: 52px;
    height: 52px;
    margin: 0 auto;
    border-radius: 50%;
    overflow: hidden;
    background: #eae7e0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.magazine-body-text .talk-face img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    margin: 0;
}
.magazine-body-text .talk-face-none {
    font-size: 16px;
    font-weight: bold;
    color: #9a958a;
}
.magazine-body-text .talk-bubble {
    position: relative;
    max-width: 78%;
    padding: 14px 18px;
    border-radius: 14px;
    background: #f2f0ec;
}
.magazine-body-text .is-guest .talk-bubble {
    background: #eaf0ef;
}
/* 吹き出しの尻尾 */
.magazine-body-text .talk-bubble::before {
    content: "";
    position: absolute;
    top: 18px;
    width: 0;
    height: 0;
    border: 7px solid transparent;
}
.magazine-body-text .is-staff .talk-bubble::before {
    left: -13px;
    border-right-color: #f2f0ec;
}
.magazine-body-text .is-guest .talk-bubble::before {
    right: -13px;
    border-left-color: #eaf0ef;
}
.magazine-body-text .talk-who {
    display: block;
    font-size: 10.5px;
    letter-spacing: 0.06em;
    line-height: 1.3;
    color: #8a8578;
    margin-top: 5px;
    text-align: center;
}
.magazine-body-text .talk-bubble p {
    font-size: 14px;
    line-height: 1.95;
    margin-bottom: 0;
    color: #333;
}

/* 今日のおかしのお店。本文とは別の、名刺のような扱いにする */
.magazine-body-text .talk-shop {
    margin: 1.8em 0 0;
    padding: 22px 24px;
    border: 1px solid #e2ddd2;
    background: #fbfaf7;
}
.magazine-body-text .talk-shop-eyebrow {
    font-size: 10px;
    letter-spacing: 0.16em;
    color: #a09a8c;
    margin-bottom: 8px;
}
.magazine-body-text .talk-shop-name {
    font-size: 17px;
    font-weight: bold;
    letter-spacing: 0.06em;
    color: #1a1a1a;
    margin-bottom: 10px;
}
.magazine-body-text .talk-shop-desc {
    font-size: 13px;
    line-height: 1.9;
    color: #666;
    margin-bottom: 16px;
}
.magazine-body-text .talk-shop-data {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding-top: 14px;
    border-top: 1px solid #e8e3d8;
}
.magazine-body-text .talk-shop-data > div {
    display: flex;
    gap: 14px;
    align-items: baseline;
}
.magazine-body-text .talk-shop-data dt {
    flex: 0 0 3em;
    font-size: 10px;
    letter-spacing: 0.12em;
    color: #a09a8c;
}
.magazine-body-text .talk-shop-data dd {
    font-size: 12.5px;
    line-height: 1.8;
    color: #444;
}
.magazine-body-text .talk-shop-data a {
    color: #444;
    text-decoration: none;
    border-bottom: 1px solid #ccc;
}
.magazine-body-text .talk-shop-data a:hover { border-color: #1a1a1a; color: #1a1a1a; }

/* 編集後記など、本文のあとに添える囲み */
.magazine-body-text .talk-note {
    margin-top: 2.4em;
    padding: 20px 24px;
    background: #f5f3ee;
    border: 1px solid #e6e1d8;
}
.magazine-body-text .talk-note p {
    font-size: 13px;
    line-height: 2;
    color: #555;
    margin-bottom: 0.8em;
}
.magazine-body-text .talk-note p:last-child { margin-bottom: 0; }
.magazine-body-text .talk-note b {
    font-size: 12px;
    letter-spacing: 0.1em;
    color: #1a1a1a;
}

/* 話し言葉。取材の言葉が地の文と見分けられるように */
.magazine-body-text p.quote {
    padding-left: 1.1em;
    text-indent: -1.1em;
    color: #1a1a1a;
}
.magazine-body-text blockquote {
    margin: 0 0 1.8em;
    padding: 6px 0 6px 18px;
    border-left: 3px solid #ddd;
    color: #666;
}

/* ── インタビューセクション ──────────────────────────────────── */
.magazine-qa {
    margin-bottom: 48px;
}
.magazine-qa-q {
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 0.05em;
    line-height: 1.7;
    margin-bottom: 18px;
    padding-left: 14px;
    border-left: 3px solid #1a1a1a;
    color: #1a1a1a;
}
/* セクション冒頭の写真。見出しの前に置くので、下に余白をとる */
.magazine-qa-img {
    margin: 0 0 32px;
    overflow: hidden;
}
.magazine-qa-img img {
    width: 100%;
    display: block;
    object-fit: cover;
}
.magazine-qa-img figcaption {
    font-size: 12px;
    line-height: 1.8;
    color: #888;
    margin-top: 10px;
}

/* ── 今日のおかし（おかしなトークのコーナー） ────────────────────
   本編の会話とは別の、ひと息つく場所。節ごと囲んで、写真も中に入れる  */
.magazine-qa.is-okashi {
    /* 見出しを先頭に出すために並べ替える（マークアップは写真が先） */
    display: flex;
    flex-direction: column;
    margin: 56px 0 48px;
    padding: 30px 34px 34px;
    background: #f7f3ea;
    border: 1px solid #e8e0cf;
}
.magazine-qa.is-okashi .magazine-qa-q {
    order: -1;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 0.22em;
    padding: 0 0 16px;
    margin: 0 0 26px;
    border-left: 0;
    border-bottom: 1px solid #e0d7c2;
    color: #6b5f45;
}
.magazine-qa.is-okashi .magazine-qa-img {
    max-width: 360px;
    margin: 0 auto 24px;
}
.magazine-qa.is-okashi .magazine-qa-img figcaption {
    color: #9a8f77;
    text-align: center;
}
.magazine-qa.is-okashi .magazine-body-text {
    margin-bottom: 0;
}
.magazine-qa.is-okashi .magazine-body-text p {
    font-size: 14px;
}
/* 中の店舗情報は、囲みの中の囲みになるので線を薄く */
.magazine-qa.is-okashi .talk-shop {
    background: #fffdf8;
    border-color: #e8e0cf;
    text-align: left;
}
.magazine-qa.is-okashi .talk-shop p {
    text-align: left;
}

/* 「次に読む」は1本だけ。読む順を外さないよう、ほかより強く出す */
.magazine-story-others--next {
    margin: 8px 0 16px;
    background: #fff;
    border-color: #cfc8b8;
}
.magazine-story-others--next .magazine-story-others-ttl {
    color: #1a1a1a;
    font-weight: bold;
}
.magazine-story-others--next li a {
    background: #fff;
    border: 1px solid #d8d2c4;
    box-shadow: 0 2px 0 #e8e2d4;
}
.magazine-story-others--next .magazine-story-others-name {
    font-size: 15px;
}
.magazine-story-others--next .magazine-story-others-arrow {
    color: #1a1a1a;
}

/* ── セルフワーク枠 ─────────────────────────────────────────── */
.magazine-selfwork {
    margin: 48px 0;
    padding: 30px 28px;
    background: #f5f3ee;
    border: 1px solid #e6e1d8;
}
.magazine-selfwork-ttl {
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 0.08em;
    color: #1a1a1a;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #ddd6c8;
}
.magazine-selfwork .magazine-body-text {
    margin-bottom: 0;
    font-size: 14px;
}

/* ── CTA枠 ───────────────────────────────────────────────────── */
.magazine-cta {
    margin: 56px 0 48px;
    padding: 36px 28px;
    text-align: center;
    background: #1a1a1a;
}
/* 見学会のときは、本文より少しはみ出させる。バナーを大きく見せたいので */
.magazine-cta--event {
    width: min(900px, calc(100vw - 40px));
    margin-left: 50%;
    transform: translateX(-50%);
    padding: 40px 36px;
}
@media (max-width: 760px) {
    .magazine-cta--event { width: 100%; margin-left: 0; transform: none; padding: 28px 18px; }
}
.magazine-cta-ttl {
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 0.08em;
    color: #fff;
    margin-bottom: 12px;
}
.magazine-cta-text {
    font-size: 13px;
    line-height: 2;
    letter-spacing: 0.05em;
    color: rgba(255,255,255,0.75);
    margin-bottom: 22px;
}
.magazine-cta .btn {
    background: #fff;
    color: #1a1a1a;
    border: 1px solid #fff;
}
.magazine-cta .btn:hover {
    background: transparent;
    color: #fff;
}

/* 開催中の見学会があるときのCTA。黒地のまま、中にイベントカードを置く */
.magazine-cta-eyebrow {
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 0.08em;
    color: #fff;
    margin-bottom: 18px;
}
.magazine-cta-eyebrow .blairitc {
    display: block;
    font-size: 10px;
    letter-spacing: 0.3em;
    color: rgba(255,255,255,0.55);
    margin-bottom: 6px;
    font-weight: normal;
}
.magazine-cta-event {
    display: flex;
    align-items: center;
    gap: 20px;
    text-align: left;
    text-decoration: none;
    color: #fff;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.18);
    padding: 16px;
    margin-bottom: 22px;
    transition: 0.3s ease;
}
.magazine-cta-event:hover {
    background: rgba(255,255,255,0.12);
}
/* バナーは左、文字は右。切らずに出しつつ、大きくなりすぎないように */
.magazine-cta--event .magazine-cta-event {
    align-items: center;
    gap: 22px;
    padding: 18px;
    text-align: left;
}
@media (max-width: 760px) {
    .magazine-cta--event .magazine-cta-event {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        padding: 14px;
    }
}
/* 見学会のバナーは日付と家の名前が焼き込んである。切らずに、3:2のまま出す */
.magazine-cta-event-img {
    flex: 0 0 320px;
    width: 320px;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: #2b2621;
    border-radius: 2px;
}
@media (max-width: 760px) {
    .magazine-cta-event-img { flex: 0 0 auto; width: 100%; }
}
.magazine-cta-event-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.magazine-cta-event-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.magazine-cta-event-ttl {
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 0.04em;
    line-height: 1.6;
}
.magazine-cta-event-date {
    font-size: 12px;
    letter-spacing: 0.06em;
    color: rgba(255,255,255,0.8);
}
.magazine-cta-event-more {
    font-size: 11px;
    line-height: 1.8;
    color: rgba(255,255,255,0.6);
}

/* 見学会のCTAは、真っ黒だと記事の終わりで強く出すぎる。すこし温度のある濃茶に */
.magazine-cta--event {
    background: #37312a;
}
.magazine-cta--event .magazine-cta-event {
    border-color: rgba(255,255,255,0.16);
    background: rgba(255,255,255,0.04);
}

/* ── この家の、ほかの話 ──────────────────────────────────────── */
.magazine-story-others {
    margin: 8px 0 48px;
    padding: 20px 22px;
    border: 1px solid #e5e5e5;
    background: #fafafa;
}
.magazine-story-others-ttl {
    font-size: 11px;
    letter-spacing: 0.14em;
    color: #999;
    margin-bottom: 14px;
}
.magazine-story-others ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.magazine-story-others li a {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid #e8e8e8;
    text-decoration: none;
    color: #1a1a1a;
    transition: 0.3s ease;
}
.magazine-story-others li a:hover {
    border-color: #1a1a1a;
}
.magazine-story-others-img {
    flex: 0 0 78px;
    width: 78px;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #eee;
}
.magazine-story-others-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    margin: 0;
}
.magazine-story-others-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.magazine-story-others-meta {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}
.magazine-story-others-no {
    font-size: 9px;
    letter-spacing: 0.14em;
    padding: 3px 7px;
    background: #1a1a1a;
    color: #fff;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.magazine-story-others-cat {
    font-size: 10px;
    letter-spacing: 0.08em;
    color: #999;
}
.magazine-story-others-part {
    font-size: 10px;
    letter-spacing: 0.08em;
    padding: 3px 7px;
    border: 1px solid #ddd;
    color: #777;
    line-height: 1;
}
.magazine-story-others-name {
    font-size: 13px;
    font-weight: bold;
    line-height: 1.6;
    letter-spacing: 0.02em;
}
.magazine-story-others-arrow {
    flex: 0 0 auto;
    color: #999;
}

/* ── 前回・次回 ─────────────────────────────────────────────── */
.magazine-adjacent {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin: 48px 0 0;
}
.magazine-adjacent-link {
    display: block;
    padding: 18px 20px;
    border: 1px solid #ddd;
    text-decoration: none;
    color: inherit;
    transition: 0.3s ease;
}
.magazine-adjacent-link:hover {
    border-color: #1a1a1a;
}
.magazine-adjacent-next {
    grid-column: 2;
    text-align: right;
}
.magazine-adjacent-prev {
    grid-column: 1;
}
.magazine-adjacent-label {
    display: block;
    font-size: 10px;
    letter-spacing: 0.14em;
    color: #999;
    margin-bottom: 8px;
}
.magazine-adjacent-title {
    display: block;
    font-size: 12px;
    font-weight: bold;
    line-height: 1.6;
    color: #1a1a1a;
}

/* ── 関連施工事例 ────────────────────────────────────────────── */
.magazine-related-works {
    background: #f5f3f0;
    padding: 56px 0;
}
.magazine-related-works .inner {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 20px;
}
.magazine-related-ttl {
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 0.14em;
    color: #1a1a1a;
    margin-bottom: 24px;
}
.magazine-related-link {
    display: flex;
    align-items: center;
    gap: 28px;
    text-decoration: none;
    color: inherit;
}
.magazine-related-img {
    width: 220px;
    min-width: 220px;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #e8e5e0;
    margin: 0;
}
.magazine-related-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.magazine-related-body {
    flex: 1;
}
.magazine-related-name {
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 0.06em;
    line-height: 1.7;
    margin-bottom: 12px;
    color: #1a1a1a;
}
.magazine-related-btn {
    font-size: 12px;
    letter-spacing: 0.08em;
    color: #1a1a1a;
    border-bottom: 1px solid #1a1a1a;
    padding-bottom: 2px;
}

/* ── ほかの物語 ─────────────────────────────────────────────── */
.magazine-other-stories {
    padding: 56px 0 8px;
}
.magazine-other-stories .inner {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 20px;
}
.magazine-other-ttl {
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 0.14em;
    color: #1a1a1a;
    margin-bottom: 24px;
}
.magazine-other-stories ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}
.magazine-other-stories li a {
    display: block;
    text-decoration: none;
    color: inherit;
}
.magazine-other-stories figure {
    aspect-ratio: 4/3;
    overflow: hidden;
    background: #eee;
    margin: 0 0 12px;
}
.magazine-other-stories figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.magazine-other-name {
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 0.04em;
    line-height: 1.6;
    margin-bottom: 6px;
    color: #1a1a1a;
}
.magazine-other-lead {
    font-size: 12px;
    line-height: 1.8;
    color: #777;
}

/* ── 事例へ送る（記事の最後） ──────────────────────────────── */
.magazine-works-cta {
    background: #1a1a1a;
    padding: 62px 0 70px;
    text-align: center;
}
.magazine-works-cta .inner {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 20px;
}
.magazine-works-cta-eyebrow {
    font-size: 11px;
    letter-spacing: 0.34em;
    color: rgba(255,255,255,0.5);
    margin-bottom: 16px;
}
.magazine-works-cta-ttl {
    font-size: 21px;
    font-weight: bold;
    letter-spacing: 0.08em;
    line-height: 1.7;
    color: #fff;
    margin-bottom: 10px;
}
.magazine-works-cta-lead {
    font-size: 13px;
    line-height: 2;
    letter-spacing: 0.05em;
    color: rgba(255,255,255,0.65);
    margin-bottom: 34px;
}
.magazine-works-cta-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 36px;
    text-align: left;
}
.magazine-works-cta-list a {
    display: block;
    text-decoration: none;
    color: #fff;
}
/* 事例のサムネイルは正方形で作っている。横長に切ると文字が欠ける */
.magazine-works-cta-list figure {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #333;
    margin: 0 0 10px;
}
.magazine-works-cta-list figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.magazine-works-cta-name {
    font-size: 13px;
    letter-spacing: 0.04em;
    line-height: 1.6;
    color: rgba(255,255,255,0.9);
}
.magazine-works-cta .btn {
    background: #fff;
    color: #1a1a1a;
    border: 1px solid #fff;
}
.magazine-works-cta .btn:hover {
    background: transparent;
    color: #fff;
}

/* ── 戻る ────────────────────────────────────────────────────── */
.magazine-back {
    text-align: center;
    padding: 48px 20px 70px;
}

/* ── モバイル ─────────────────────────────────────────────────── */
@media (max-width: 760px) {
    .magazine-detail-hero img { height: 280px; }
    .magazine-detail-wrap { padding: 36px 0 50px; }
    .magazine-detail-ttl { font-size: 19px; }
    .magazine-body-text { font-size: 14px; }
    .magazine-qa-q { font-size: 15px; }
    .magazine-qa.is-okashi { padding: 22px 18px 24px; margin: 40px 0 36px; }
    .magazine-adjacent { grid-template-columns: 1fr; }
    .magazine-adjacent-next { grid-column: 1; text-align: left; }
    .magazine-related-link { flex-direction: column; align-items: flex-start; gap: 16px; }
    .magazine-related-img { width: 100%; min-width: 0; }
    .magazine-detail-spec { gap: 0 18px; }
    .magazine-works-cta { padding: 42px 0 46px; }
    .magazine-works-cta-ttl { font-size: 17px; }
    .magazine-works-cta-list { grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 26px; }
    .magazine-works-cta-list li:nth-child(3) { display: none; }
    .magazine-works-cta-name { font-size: 11px; }
    .magazine-body-text .talk-avatar { flex-basis: 46px; width: 46px; }
    .magazine-body-text .talk-face { width: 40px; height: 40px; }
    .magazine-body-text .talk-who { font-size: 9.5px; margin-top: 4px; }
    .magazine-body-text .talk-line { gap: 9px; margin-bottom: 14px; }
    .magazine-body-text .talk-bubble { max-width: 82%; padding: 11px 14px; }
    .magazine-body-text .talk-bubble p { font-size: 13px; line-height: 1.9; }
    .magazine-body-text .talk-note { padding: 16px 18px; }
    .magazine-body-text .talk-shop { padding: 18px 16px; }
    .magazine-selfwork { padding: 22px 18px; }
    .magazine-cta { padding: 28px 20px; }
    .magazine-story-nav { gap: 10px; }
    .magazine-story-others { padding: 16px 14px; }
    .magazine-story-others li a { gap: 11px; padding: 8px 9px; }
    .magazine-story-others-img { flex-basis: 62px; width: 62px; }
    .magazine-story-others-name { font-size: 12px; }
    .magazine-cta-event { flex-direction: column; align-items: stretch; }
    .magazine-cta-event-img { width: 100%; flex-basis: auto; }
    .magazine-other-stories ul { grid-template-columns: 1fr 1fr; gap: 20px 14px; }
    .magazine-other-lead { display: none; }
}

/* ── 記事末尾のタグ ──────────────────────────────────────────── */
.magazine-detail-tags {
    margin: 40px 0 0;
}
.magazine-detail-tags ul {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 8px;
}
.magazine-detail-tags li a {
    display: inline-block;
    font-size: 11px;
    letter-spacing: 0.04em;
    padding: 5px 12px;
    border-radius: 999px;
    background: #f4f4f4;
    color: #777;
    line-height: 1;
    text-decoration: none;
    transition: 0.3s ease;
}
.magazine-detail-tags li a:hover {
    background: #1a1a1a;
    color: #fff;
}

/* ================================================================
   おかしなトーク — 雑談のページだけ、少し崩す
   体験記は静かなまま。ここは吹き出しに色を足し、角を丸め、
   見出しの線を手描き風にして、読む前から「ゆるい回」だと分かるようにする。
   ================================================================ */
body.reading-talk .container {
    background: #fbf7ee;
}

/* ヒーローの札。文字だけだったものを、黄色い丸のスタンプに */
body.reading-talk .magazine-detail-hero-label .blairitc {
    display: inline-block;
    padding: 12px 18px;
    border-radius: 999px;
    background: #f6d76b;
    color: #1a1a1a;
    font-size: 11px;
    letter-spacing: 0.3em;
    transform: rotate(-4deg);
    box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}

/* カテゴリ札は黒枠をやめて、黄色のピルに */
body.reading-talk .magazine-detail-head-meta .magazine-tag--series {
    border: 0;
    border-radius: 999px;
    padding: 6px 13px;
    background: #f6d76b;
    color: #1a1a1a;
    font-weight: bold;
}
body.reading-talk .magazine-detail-head-meta a.magazine-tag--series:hover {
    background: #1a1a1a;
    color: #fff;
}

/* リード文は点線の丸い囲み */
body.reading-talk .magazine-detail-lead {
    background: #fff;
    border: 2px dashed #e6d9b7;
    border-radius: 18px;
}

/* 見出し。縦線をやめて、下に手描きの波線 */
body.reading-talk .magazine-qa-q {
    border-left: 0;
    padding: 0 0 12px 0;
    margin-bottom: 22px;
    font-size: 19px;
    letter-spacing: 0.04em;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='8' viewBox='0 0 28 8'%3E%3Cpath d='M0 5 Q 3.5 1 7 5 T 14 5 T 21 5 T 28 5' fill='none' stroke='%23f2c94c' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x left bottom;
}

/*
  吹き出し。尻尾は付けず、顔に近い側の角だけを小さくして向きを出す。
  名前は吹き出しの外、上に小さく置く（中に入れると重くなる）。
*/
body.reading-talk .magazine-body-text .talk-line {
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 22px;
}
body.reading-talk .magazine-body-text .talk-bubble {
    border-radius: 18px;
    padding: 14px 20px;
    background: #fff;
    border: 0;
    box-shadow: 0 2px 0 #eadfc6;
    overflow: visible;
}
body.reading-talk .magazine-body-text .is-guest .talk-bubble {
    background: #fdeccd;
    box-shadow: 0 2px 0 #edd6ab;
}
body.reading-talk .magazine-body-text .talk-bubble::before {
    display: block;
    content: "";
    position: absolute;
    top: 20px;
    width: 13px;
    height: 13px;
    border: 0;
    border-radius: 2px;
    background: inherit;
    transform: rotate(45deg);
}
body.reading-talk .magazine-body-text .is-staff .talk-bubble::before {
    left: -5px;
    right: auto;
}
body.reading-talk .magazine-body-text .is-guest .talk-bubble::before {
    right: -5px;
    left: auto;
}

/* 名前は顔の下。太字にして、誰の顔かが先に目に入るようにする */
body.reading-talk .magazine-body-text .talk-who {
    font-size: 10.5px;
    font-weight: bold;
    letter-spacing: 0.04em;
    color: #6b6255;
}

/* 顔は白い縁取りをつけて、少し浮かせる */
body.reading-talk .magazine-body-text .talk-face {
    width: 52px;
    height: 52px;
    border: 3px solid #fff;
    box-shadow: 0 3px 10px rgba(60,40,0,0.14);
    background: #fff;
}

/* ── おかしなトークとは（毎回おなじ説明） ──────────────────────
   点線と黄色は「今日のおかし」が使っているので、こちらは無地の生成りにして、
   細い金の罫と小さな見出しだけで格を出す。開きはじめの一枚として扱う */
body.reading-talk .talk-intro {
    position: relative;
    max-width: 720px;
    margin: 0 auto 44px;
    padding: 30px 34px 28px;
    border-radius: 20px;
    background: #fffdf6;
    box-shadow: 0 2px 0 #efe3c6, 0 10px 30px rgba(120,90,20,0.07);
    text-align: center;
}
body.reading-talk .talk-intro-label {
    display: inline-block;
    margin: 0 0 14px;
    padding: 0 0 8px;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 0.22em;
    color: #8a6a1e;
    border-bottom: 1px solid #e6d09a;
}
/* 見出しの左右に、こぼれた砂糖粒 */
body.reading-talk .talk-intro-label::before,
body.reading-talk .talk-intro-label::after {
    content: "";
    position: absolute;
    top: 36px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #e6d09a;
}
body.reading-talk .talk-intro-label::before { left: 34%; }
body.reading-talk .talk-intro-label::after  { right: 34%; }
body.reading-talk .talk-intro-text {
    margin: 0;
    font-size: 14px;
    line-height: 2.05;
    color: #4a4335;
    text-align: left;
}
@media (max-width: 760px) {
    body.reading-talk .talk-intro { padding: 24px 20px 22px; margin-bottom: 34px; border-radius: 16px; }
    body.reading-talk .talk-intro-label::before { left: 22%; }
    body.reading-talk .talk-intro-label::after  { right: 22%; }
    body.reading-talk .talk-intro-text { font-size: 13.5px; line-height: 1.95; }
}

/* 今日のおかし。囲みを丸くして、点線に */
body.reading-talk .magazine-qa.is-okashi {
    position: relative;
    border-radius: 24px;
    border: 2px dashed #e6d09a;
    background: #fff8e3;
    margin-top: 66px;
    padding-top: 42px;
    overflow: visible;
}
/* 見出しは、囲みの上辺に乗せたクッキー。形と焼き色はSVG（下のdata:）で描く */
body.reading-talk .magazine-qa.is-okashi .magazine-qa-q {
    position: absolute;
    top: -24px;
    left: 50%;
    z-index: 1;
    width: auto;
    margin: 0;
    padding: 13px 34px 12px;
    border: 0;
    border-radius: 0;
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 200 60%22 preserveAspectRatio=%22none%22%3E%3Cdefs%3E%3CradialGradient id=%22g%22 cx=%2250%%22 cy=%2242%%22 r=%2270%%22%3E%3Cstop offset=%220%22 stop-color=%22%23f3d493%22/%3E%3Cstop offset=%22.7%22 stop-color=%22%23e6bb6a%22/%3E%3Cstop offset=%221%22 stop-color=%22%23d9a44f%22/%3E%3C/radialGradient%3E%3C/defs%3E%3Cg fill=%22url(%23g)%22%3E%3Ccircle cx=%2229.0%22 cy=%229.0%22 r=%226.4%22/%3E%3Ccircle cx=%2229.0%22 cy=%2251.0%22 r=%226.4%22/%3E%3Ccircle cx=%2241.5%22 cy=%229.0%22 r=%226.4%22/%3E%3Ccircle cx=%2241.5%22 cy=%2251.0%22 r=%226.4%22/%3E%3Ccircle cx=%2254.0%22 cy=%229.0%22 r=%226.4%22/%3E%3Ccircle cx=%2254.0%22 cy=%2251.0%22 r=%226.4%22/%3E%3Ccircle cx=%2266.5%22 cy=%229.0%22 r=%226.4%22/%3E%3Ccircle cx=%2266.5%22 cy=%2251.0%22 r=%226.4%22/%3E%3Ccircle cx=%2279.0%22 cy=%229.0%22 r=%226.4%22/%3E%3Ccircle cx=%2279.0%22 cy=%2251.0%22 r=%226.4%22/%3E%3Ccircle cx=%2291.5%22 cy=%229.0%22 r=%226.4%22/%3E%3Ccircle cx=%2291.5%22 cy=%2251.0%22 r=%226.4%22/%3E%3Ccircle cx=%22104.0%22 cy=%229.0%22 r=%226.4%22/%3E%3Ccircle cx=%22104.0%22 cy=%2251.0%22 r=%226.4%22/%3E%3Ccircle cx=%22116.5%22 cy=%229.0%22 r=%226.4%22/%3E%3Ccircle cx=%22116.5%22 cy=%2251.0%22 r=%226.4%22/%3E%3Ccircle cx=%22129.0%22 cy=%229.0%22 r=%226.4%22/%3E%3Ccircle cx=%22129.0%22 cy=%2251.0%22 r=%226.4%22/%3E%3Ccircle cx=%22141.5%22 cy=%229.0%22 r=%226.4%22/%3E%3Ccircle cx=%22141.5%22 cy=%2251.0%22 r=%226.4%22/%3E%3Ccircle cx=%22154.0%22 cy=%229.0%22 r=%226.4%22/%3E%3Ccircle cx=%22154.0%22 cy=%2251.0%22 r=%226.4%22/%3E%3Ccircle cx=%22166.5%22 cy=%229.0%22 r=%226.4%22/%3E%3Ccircle cx=%22166.5%22 cy=%2251.0%22 r=%226.4%22/%3E%3Ccircle cx=%2221.0%22 cy=%2249.4%22 r=%226.4%22/%3E%3Ccircle cx=%22179.0%22 cy=%2210.6%22 r=%226.4%22/%3E%3Ccircle cx=%2214.2%22 cy=%2244.8%22 r=%226.4%22/%3E%3Ccircle cx=%22185.8%22 cy=%2215.2%22 r=%226.4%22/%3E%3Ccircle cx=%229.6%22 cy=%2238.0%22 r=%226.4%22/%3E%3Ccircle cx=%22190.4%22 cy=%2222.0%22 r=%226.4%22/%3E%3Ccircle cx=%228.0%22 cy=%2230.0%22 r=%226.4%22/%3E%3Ccircle cx=%22192.0%22 cy=%2230.0%22 r=%226.4%22/%3E%3Ccircle cx=%229.6%22 cy=%2222.0%22 r=%226.4%22/%3E%3Ccircle cx=%22190.4%22 cy=%2238.0%22 r=%226.4%22/%3E%3Ccircle cx=%2214.2%22 cy=%2215.2%22 r=%226.4%22/%3E%3Ccircle cx=%22185.8%22 cy=%2244.8%22 r=%226.4%22/%3E%3Ccircle cx=%2221.0%22 cy=%2210.6%22 r=%226.4%22/%3E%3Ccircle cx=%22179.0%22 cy=%2249.4%22 r=%226.4%22/%3E%3Crect x=%228%22 y=%229%22 width=%22184%22 height=%2242%22 rx=%2221.0%22/%3E%3C/g%3E%3Crect x=%2210%22 y=%2211%22 width=%22180%22 height=%2238%22 rx=%2219.0%22 fill=%22none%22 stroke=%22%23c9903c%22 stroke-opacity=%22.35%22 stroke-width=%221.2%22/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    color: #4a2f12;
    font-size: 14px;
    letter-spacing: 0.16em;
    white-space: nowrap;
    box-shadow: none;
    filter: drop-shadow(0 3px 0 #c58f38) drop-shadow(0 6px 10px rgba(90,60,10,0.16));
    transform: translateX(-50%) rotate(-2.2deg);
}
/* 写真は一枚の思い出として、白フチをつけて少し傾ける */
body.reading-talk .magazine-qa.is-okashi .magazine-qa-img {
    max-width: 340px;
    padding: 12px 12px 14px;
    background: #fff;
    border-radius: 3px;
    box-shadow: 0 8px 20px rgba(90,70,20,0.16);
    transform: rotate(1.6deg);
}
body.reading-talk .magazine-qa.is-okashi .magazine-qa-img img { border-radius: 2px; }
body.reading-talk .magazine-qa.is-okashi .magazine-qa-img figcaption { margin-top: 10px; }

body.reading-talk .magazine-qa.is-okashi .talk-shop {
    border-radius: 14px;
    border-color: #ecdfb6;
}

/* 編集後記も角を丸めておく */
body.reading-talk .magazine-body-text .talk-note {
    border-radius: 14px;
    border: 1.5px solid #ece4d0;
    background: #fff;
}

@media (max-width: 760px) {
    body.reading-talk .magazine-body-text .talk-avatar { flex-basis: 50px; width: 50px; }
    body.reading-talk .magazine-body-text .talk-face { width: 44px; height: 44px; }
    body.reading-talk .magazine-qa-q { font-size: 16px; }
}

/* ── 人ごとの吹き出しの色（おかしなトーク） ────────────────────
   誰が喋っているかを、顔を見なくても色で追えるようにする */
body.reading-talk .magazine-body-text .talk-line--akari     .talk-bubble { background: #e7f0ea; box-shadow: 0 2px 0 #cfdfd4; }
body.reading-talk .magazine-body-text .talk-line--miyajima  .talk-bubble { background: #e3ebf5; box-shadow: 0 2px 0 #c9d7e8; }
body.reading-talk .magazine-body-text .talk-line--kobayashi .talk-bubble { background: #fde4d3; box-shadow: 0 2px 0 #efc9b0; }
body.reading-talk .magazine-body-text .talk-line--ikeda     .talk-bubble { background: #ece7f6; box-shadow: 0 2px 0 #d4cbe8; }
body.reading-talk .magazine-body-text .talk-line--minato    .talk-bubble { background: #fdeccd; box-shadow: 0 2px 0 #edd6ab; }
body.reading-talk .magazine-body-text .talk-line--kaoru     .talk-bubble { background: #fbe0e6; box-shadow: 0 2px 0 #ecc6cf; }
body.reading-talk .talk-line--akari     .talk-who { color: #3f6b52; }
body.reading-talk .talk-line--miyajima  .talk-who { color: #3b5a80; }
body.reading-talk .talk-line--kobayashi .talk-who { color: #a4572a; }
body.reading-talk .talk-line--ikeda     .talk-who { color: #5b4a8c; }
body.reading-talk .talk-line--minato    .talk-who { color: #8a6a1e; }
body.reading-talk .talk-line--kaoru     .talk-who { color: #a34b6b; }

/* ── 登場人物 ─────────────────────────────────────────────── */
.magazine-body-text .talk-cast {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 34px 16px;
    align-items: start;
    margin: 26px 0 8px;
    padding: 26px 18px 22px;
    background: #fff;
    border-radius: 18px;
    border: 1.5px solid #ece4d0;
}
/* 1人ぶんをひとかたまりに。自動で入る段落の余白が効いて、
   顔とコメントが離れて見えるのを止める */
.magazine-body-text .talk-cast-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.magazine-body-text .talk-cast-item p { margin: 0; }
.magazine-body-text .talk-cast-face {
    display: block;
    width: 72px;
    height: 72px;
    margin: 0 auto 10px;
    border-radius: 50%;
    overflow: hidden;
    background: #f6f1e6;
}
.magazine-body-text .talk-cast-face img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; }
.magazine-body-text .talk-cast-name { display: block; font-size: 14px; font-weight: bold; letter-spacing: 0.04em; line-height: 1.4; }
.magazine-body-text .talk-cast-role { display: inline-block; font-size: 10px; letter-spacing: 0.12em; color: #8a8578; margin: 4px 0 0; }
.magazine-body-text .talk-cast-note { font-size: 11.5px; line-height: 1.75; color: #555; margin: 10px 0 0; text-align: center; }
.talk-cast--akari     .talk-cast-face { box-shadow: 0 0 0 3px #cfdfd4; }
.talk-cast--miyajima  .talk-cast-face { box-shadow: 0 0 0 3px #c9d7e8; }
.talk-cast--kobayashi .talk-cast-face { box-shadow: 0 0 0 3px #efc9b0; }
.talk-cast--ikeda     .talk-cast-face { box-shadow: 0 0 0 3px #d4cbe8; }
.talk-cast--minato    .talk-cast-face { box-shadow: 0 0 0 3px #ecd58f; }
.talk-cast--kaoru     .talk-cast-face { box-shadow: 0 0 0 3px #f1c3b2; }

/* ── みんなのおすすめサウナ ──────────────────────────────── */
.magazine-body-text .talk-picks { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 6px 0 0; }
.magazine-body-text .talk-pick { position: relative; padding: 20px 20px 18px; background: #fff; border-radius: 16px; border: 1.5px solid #ece4d0; }
.magazine-body-text .talk-pick-photo {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 132px;
    margin: -4px 0 14px;
    padding: 8px 10px 0;
    border-radius: 12px;
    background: #f8f3e7;
    overflow: hidden;
}
.magazine-body-text .talk-pick-photo img { max-height: 100%; width: auto; max-width: 100%; object-fit: contain; margin: 0; display: block; }
.magazine-body-text .talk-pick-who { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.magazine-body-text .talk-pick-face { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: #f6f1e6; }
.magazine-body-text .talk-pick-face img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; }
.magazine-body-text .talk-pick-name { font-size: 12px; font-weight: bold; letter-spacing: 0.04em; }
.magazine-body-text .talk-pick-name small { display: block; font-size: 10px; font-weight: normal; letter-spacing: 0.1em; color: #8a8578; margin-top: 2px; }
.magazine-body-text .talk-pick-sauna { font-size: 17px; font-weight: bold; letter-spacing: 0.03em; line-height: 1.4; color: #c8562a; margin: 0 0 4px; }
.magazine-body-text .talk-pick-sauna small { font-size: 11px; font-weight: normal; letter-spacing: 0.08em; color: #8a8578; margin-left: 6px; }
.magazine-body-text .talk-pick-note { font-size: 13px; line-height: 1.85; color: #333; margin: 0 0 12px; }
.magazine-body-text .talk-pick-data { padding-top: 10px; border-top: 1px dashed #e6dcc6; display: flex; flex-direction: column; gap: 3px; }
.magazine-body-text .talk-pick-data > div { display: flex; gap: 10px; align-items: baseline; }
.magazine-body-text .talk-pick-data dt { flex: 0 0 3.4em; white-space: nowrap; font-size: 9.5px; letter-spacing: 0.12em; color: #a09a8c; }
.magazine-body-text .talk-pick-data dd { font-size: 11.5px; line-height: 1.7; color: #555; }
.magazine-body-text .talk-pick-data a { color: #555; text-decoration: none; border-bottom: 1px solid #ccc; }
.magazine-body-text .talk-pick-data a:hover { color: #1a1a1a; border-color: #1a1a1a; }
.magazine-body-text .talk-pick.is-extra { grid-column: 1 / -1; background: #fff8e3; }
.magazine-body-text .talk-pick-extra { position: absolute; top: -10px; left: 18px; font-size: 10px; letter-spacing: 0.14em; padding: 3px 10px; border-radius: 999px; background: #f6d76b; color: #1a1a1a; font-weight: bold; }
.talk-pick--akari     .talk-pick-face { box-shadow: 0 0 0 2px #cfdfd4; }
.talk-pick--miyajima  .talk-pick-face { box-shadow: 0 0 0 2px #c9d7e8; }
.talk-pick--kobayashi .talk-pick-face { box-shadow: 0 0 0 2px #efc9b0; }
.talk-pick--ikeda     .talk-pick-face { box-shadow: 0 0 0 2px #d4cbe8; }
.talk-pick--minato    .talk-pick-face { box-shadow: 0 0 0 2px #ecd58f; }
.talk-pick--kaoru     .talk-pick-face { box-shadow: 0 0 0 2px #f1c3b2; }

@media (max-width: 760px) {
    .magazine-body-text .talk-cast { grid-template-columns: repeat(3, 1fr); padding: 18px 12px 16px; gap: 16px 8px; }
    .magazine-body-text .talk-cast-face { width: 56px; height: 56px; }
    .magazine-body-text .talk-picks { grid-template-columns: 1fr; }
    .magazine-body-text .talk-pick-photo { height: 150px; }
}