/* ── ページ上部（works・log と同じ見た目に揃える） ────────────── */
.mv {
  padding: 140px 0 44px 0;
  background-color: #f7f7f7;
}
.ttl {
  line-height: 1;
}
.ttl h1,
.ttl h2 {
  text-align: center;
}
.ttl h1 b,
.ttl h2 b {
  display: block;
  font-size: 38px;
  margin-bottom: 5px;
}
.ttl h1 small,
.ttl h2 small {
  font-size: 14px;
}
@media screen and (max-width: 768px) {
  .mv { padding: 80px 0 20px 0; }
  .ttl h1 b,
  .ttl h2 b { font-size: 28px; }
}

/* ================================================================
   READINGS — 読みもの 一覧・シリーズページ
   ================================================================ */

.magazine-container {
    max-width: 1080px;
    margin: 0 auto;
    padding: 34px 20px 80px;
}

/* ── リード文 ─────────────────────────────────────────────────── */
.magazine-lead-text {
    text-align: center;
    margin-bottom: 36px;
}
.magazine-lead-text p {
    font-size: 14px;
    line-height: 2.2;
    letter-spacing: 0.08em;
    color: #444;
}

.magazine-lead-about {
    margin-top: 18px;
}
.magazine-lead-about a {
    display: inline-block;
    font-size: 12px;
    letter-spacing: 0.08em;
    color: #666;
    text-decoration: none;
    border-bottom: 1px solid #ccc;
    padding-bottom: 3px;
    transition: 0.3s ease;
}
.magazine-lead-about a:hover {
    color: #1a1a1a;
    border-color: #1a1a1a;
}

/* ── シリーズヘッダー ────────────────────────────────────────── */
.magazine-series-head {
    text-align: center;
    margin-bottom: 44px;
}
.magazine-series-eyebrow {
    font-size: 10px;
    letter-spacing: 0.3em;
    color: #999;
    margin-bottom: 10px;
}
.magazine-series-name {
    font-size: 22px;
    letter-spacing: 0.08em;
    color: #1a1a1a;
    margin-bottom: 14px;
    font-weight: bold;
}
.magazine-series-desc {
    font-size: 13px;
    line-height: 2;
    letter-spacing: 0.06em;
    color: #666;
    max-width: 640px;
    margin: 0 auto;
}

/* ── シリーズ切替ナビ ────────────────────────────────────────── */
.magazine-series-nav {
    margin-bottom: 44px;
}
.magazine-series-nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 10px;
}
.magazine-series-nav li a {
    display: inline-block;
    font-size: 12px;
    letter-spacing: 0.08em;
    padding: 8px 18px;
    border: 1px solid #ccc;
    color: #666;
    line-height: 1;
    text-decoration: none;
    transition: 0.3s ease;
}
.magazine-series-nav li a:hover,
.magazine-series-nav li.is-active a {
    background: #1a1a1a;
    border-color: #1a1a1a;
    color: #fff;
}

/* ── 特集（いま読んでほしい1本） ─────────────────────────────── */
.magazine-featured {
    margin-bottom: 56px;
    background: #fff;
}
.magazine-featured > a {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    align-items: stretch;
    text-decoration: none;
    color: inherit;
}
.magazine-featured-img {
    position: relative;
    overflow: hidden;
    background: #e9e9e9;
}
.magazine-featured-img:after {
    content: "";
    display: block;
    padding-top: 62%;
}
.magazine-featured-img img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.magazine-featured-body {
    padding: 40px 38px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.magazine-featured-eyebrow {
    font-size: 11px;
    letter-spacing: 0.18em;
    color: #999;
    margin-bottom: 14px;
}
.magazine-featured .magazine-tag {
    align-self: flex-start;
    margin-bottom: 12px;
}
.magazine-featured-no {
    display: inline-block;
    font-size: 10px;
    letter-spacing: 0.16em;
    padding: 3px 8px;
    background: #1a1a1a;
    color: #fff;
    line-height: 1;
    margin-right: 8px;
    font-variant-numeric: tabular-nums;
}
.magazine-featured-story {
    font-size: 11px;
    letter-spacing: 0.14em;
    color: #999;
    margin-bottom: 6px;
}
.magazine-featured-spec {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 7px;
    margin: 12px 0 0;
}
.magazine-featured-spec li {
    font-size: 10px;
    letter-spacing: 0.06em;
    line-height: 1;
    padding: 5px 9px;
    background: #f2f0ec;
    color: #6b675f;
    white-space: nowrap;
}
.magazine-featured-ttl {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1.6;
    margin-bottom: 14px;
}
.magazine-featured-lead {
    font-size: 13px;
    line-height: 2;
    color: #666;
    margin-bottom: 20px;
}
.magazine-featured-more {
    font-size: 12px;
    letter-spacing: 0.12em;
    border-bottom: 1px solid #1a1a1a;
    padding-bottom: 3px;
    align-self: flex-start;
}

/* ── 事例のピックアップ ──────────────────────────────────────── */
.magazine-works {
    margin-top: 80px;
    padding-top: 60px;
    border-top: 1px solid #ddd;
    text-align: center;
}
.magazine-works-eyebrow {
    font-size: 12px;
    letter-spacing: 0.24em;
    color: #999;
    margin-bottom: 8px;
}
.magazine-works-ttl {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
}
.magazine-works-lead {
    font-size: 13px;
    color: #777;
    margin-bottom: 34px;
}
.magazine-works-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px 22px;
    margin-bottom: 40px;
    text-align: left;
}
.magazine-works-list li a {
    display: block;
    text-decoration: none;
    color: inherit;
}
.magazine-works-list figure {
    position: relative;
    overflow: hidden;
    background: #e9e9e9;
    margin-bottom: 10px;
}
.magazine-works-list figure:after {
    content: "";
    display: block;
    padding-top: 66%;
}
.magazine-works-list figure img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.magazine-works-name {
    font-size: 13px;
    letter-spacing: 0.04em;
}

@media screen and (max-width: 768px) {
    .magazine-featured {
        margin-bottom: 36px;
    }
    .magazine-featured > a {
        grid-template-columns: 1fr;
    }
    .magazine-featured-body {
        padding: 24px 20px 28px;
    }
    .magazine-featured-ttl {
        font-size: 17px;
    }
    .magazine-works {
        margin-top: 52px;
        padding-top: 40px;
    }
    .magazine-works-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px 14px;
        margin-bottom: 28px;
    }
    .magazine-works-name {
        font-size: 12px;
    }
}

/* ── 探すブロック（カテゴリ・連載・タグ） ─────────────────────── */
.magazine-find {
    margin-bottom: 44px;
}
.magazine-find .magazine-series-nav {
    margin-bottom: 0;
}
.magazine-find .magazine-series-nav + .magazine-series-nav,
.magazine-find .magazine-series-nav + .magazine-tag-nav {
    margin-top: 20px;
}
.magazine-find-label {
    text-align: center;
    font-size: 11px;
    letter-spacing: 0.12em;
    color: #999;
    margin-bottom: 8px;
}
.magazine-tag-nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 8px;
}
.magazine-tag-nav 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-tag-nav li a:hover,
.magazine-tag-nav li.is-active a {
    background: #1a1a1a;
    color: #fff;
}

/* ── 記事カード ──────────────────────────────────────────────── */
.magazine-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 28px;
    margin-bottom: 30px;
}
.magazine-list-item a {
    display: block;
    text-decoration: none;
    color: inherit;
}
.magazine-list-img {
    position: relative;
    margin: 0 0 14px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: #ebe8e3;
}
.magazine-list-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* hover時の拡大は common.css の .img-hover を利用 */
}
.magazine-list-noimg {
    width: 100%;
    height: 100%;
    background: #e2dfd9;
}
.magazine-list-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.magazine-tag {
    display: inline-block;
    font-size: 10px;
    letter-spacing: 0.1em;
    padding: 3px 9px;
    border: 1px solid #ccc;
    color: #888;
    line-height: 1;
    text-decoration: none;
}
.magazine-tag--series {
    border-color: #1a1a1a;
    color: #1a1a1a;
}
a.magazine-tag--series:hover {
    background: #1a1a1a;
    color: #fff;
}
.magazine-list-no {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    font-size: 11px;
    letter-spacing: 0.1em;
    padding: 5px 10px;
    background: rgba(26,26,26,0.82);
    color: #fff;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.magazine-list-story {
    font-size: 11px;
    letter-spacing: 0.14em;
    color: #999;
    margin-bottom: 4px;
}
.magazine-list-name {
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 0.04em;
    line-height: 1.7;
    margin-bottom: 6px;
    color: #1a1a1a;
}
/* 住まいの属性。読者が「うちに近いのはどれか」で選べるようにする */
.magazine-list-spec {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 6px;
    margin-bottom: 8px;
}
.magazine-list-spec li {
    font-size: 10px;
    letter-spacing: 0.06em;
    line-height: 1;
    padding: 4px 8px;
    background: #f2f0ec;
    color: #6b675f;
    white-space: nowrap;
}
.magazine-list-lead {
    font-size: 12px;
    color: #666;
    line-height: 1.8;
    letter-spacing: 0.04em;
}

/* 前編・後編バッジ */

/* ── ページング（works/logと同じ .pager-post マークアップ用） ─── */
.pager-post {
    padding: 40px 0 40px 0;
    text-align: center;
    width: 100%;
    font-size: 12px;
}
.pager-post .pager-post-btn {
    display: inline-block;
    text-align: center;
    margin: 0 7px;
}
.pager-post a {
    color: black;
}
.pager-post ul {
    display: inline-block;
    text-align: center;
}
.pager-post ul li {
    display: inline-block;
    text-align: center;
}
.pager-post ul li span {
    padding: 4px 10px;
    text-align: center;
    border-left: 1px solid #4d4d4d;
    border-top: 1px solid #4d4d4d;
    border-bottom: 1px solid #4d4d4d;
    background-color: #4d4d4d;
    color: #ffffff;
    display: inline-block;
}
.pager-post ul li a {
    color: #000000;
    text-align: center;
    padding: 4px 10px;
    display: inline-block;
    border-left: 1px solid #4d4d4d;
    border-top: 1px solid #4d4d4d;
    border-bottom: 1px solid #4d4d4d;
    transition: 0.4s cubic-bezier(0.47, 0, 0.745, 0.715);
}
.pager-post ul li a:hover {
    background-color: #4d4d4d;
    color: #ffffff;
}
.pager-post ul li:last-child span,
.pager-post ul li:last-child a {
    border-right: 1px solid #4d4d4d;
}

/* ── 空状態 ───────────────────────────────────────────────────── */
.magazine-empty {
    text-align: center;
    padding: 80px 20px;
    color: #999;
    font-size: 13px;
    letter-spacing: 0.08em;
}

/* ── モバイル ─────────────────────────────────────────────────── */
@media (max-width: 860px) {
    .magazine-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px 16px;
    }
}
@media (max-width: 560px) {
    .magazine-container { padding: 30px 16px 60px; }
    .magazine-series-name { font-size: 18px; }
    .magazine-list-name { font-size: 12px; }
    .magazine-list-lead { display: none; }
    .pager-post { padding: 20px 0 30px 0; }
}

/* ── 物語（前半・後半をまとめた塊） ───────────────────────── */

@media screen and (max-width: 768px) {
        }