@charset "utf-8";

/* ========================================
   コラム 共通トーン（maru-chon）
   メインカラー: #231815 / ベージュ: #EAE9E8 #F3F2F1
   見出し: Zen Old Mincho（明朝）
======================================== */
.column_area,
.column-detail {
    font-family: "Zen Old Mincho", "Noto Sans JP", "游明朝", "Yu Mincho", serif;
    color: #231815;
    -webkit-font-smoothing: antialiased;
}

/* ========================================
   コラム一覧ページ
======================================== */
.column_area {
    width: 100%;
    padding: 120px 0 100px;
    background-color: #fff;
}

.column_inner {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 20px;
}

.column_area .page_ttl {
    font-size: 34px;
    text-align: center;
    margin-bottom: 8px;
    font-weight: 400;
    letter-spacing: 0.28em;
    color: #231815;
}

/* リード文 */
.column-lead {
    text-align: center;
    margin-bottom: 60px;
    position: relative;
    padding-top: 28px;
}

.column-lead::before {
    content: "";
    display: block;
    width: 40px;
    height: 1px;
    background-color: #231815;
    margin: 0 auto 28px;
}

.column-lead-txt {
    font-size: 14px;
    line-height: 2.4;
    letter-spacing: 0.08em;
    color: #55504d;
}

/* コラムリスト */
.column-list-wrap {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 20px;
}

.column-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin-bottom: 60px;
}

.column-item {
    background-color: transparent;
    border-bottom: 1px solid #e2ded9;
    padding: 30px 0;
    overflow: visible;
}

.column-item:first-child {
    border-top: 1px solid #e2ded9;
}

.column-item-link {
    display: flex;
    text-decoration: none;
    color: inherit;
    transition: opacity 0.3s ease;
}

.column-item-link:hover {
    opacity: 0.75;
}

.column-item-thumb {
    width: 280px;
    height: 190px;
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
    background-color: #f3f2f1;
}

.column-item-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.column-item-link:hover .column-item-thumb img {
    transform: scale(1.05);
}

/* 画像なし時のプレースホルダー */
.column-item-thumb--noimg {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #EAE9E8;
}

.column-item-thumb--noimg .noimg-text {
    font-size: 15px;
    letter-spacing: 0.2em;
    color: #b5afa9;
    font-family: "Inter", serif;
}

.column-item-content {
    flex: 1;
    padding: 8px 0 8px 34px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.column-item-title {
    font-size: 19px;
    line-height: 1.7;
    margin-bottom: 14px;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: #231815;
}

.column-item-excerpt {
    font-size: 13.5px;
    line-height: 2;
    letter-spacing: 0.04em;
    color: #6b6560;
    margin-bottom: 16px;
    font-family: "Noto Sans JP", sans-serif;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

.column-item-meta {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.column-item-date {
    font-size: 12px;
    letter-spacing: 0.1em;
    color: #a29b95;
    font-family: "Inter", sans-serif;
}

.no-posts {
    text-align: center;
    padding: 80px 20px;
    color: #a29b95;
    font-size: 15px;
    letter-spacing: 0.1em;
}

/* ページネーション */
.column-pager {
    text-align: center;
    margin-top: 50px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
}

.column-pager a,
.column-pager span {
    display: inline-block;
    min-width: 44px;
    padding: 11px 14px;
    background-color: #fff;
    border: 1px solid #d8d3ce;
    color: #55504d;
    text-decoration: none;
    font-size: 13px;
    letter-spacing: 0.06em;
    line-height: 1;
    transition: all 0.3s ease;
    font-family: "Inter", sans-serif;
}

.column-pager a:hover,
.column-pager .current {
    background-color: #231815;
    color: #fff;
    border-color: #231815;
}

/* ========================================
   コラム詳細ページ
======================================== */
.column-detail {
    width: 100%;
    background-color: #fff;
    padding: 120px 0 90px;
}

.column-detail-inner {
    max-width: 820px;
    margin: 0 auto;
    padding: 0 20px;
}

.column-detail-header {
    text-align: left;
    margin-bottom: 36px;
}

.column-detail-category {
    margin-bottom: 18px;
}

.column-detail-category .category-tag {
    display: inline-block;
    background-color: #231815;
    color: #fff;
    padding: 6px 16px;
    font-size: 12px;
    letter-spacing: 0.1em;
    margin-right: 6px;
    font-family: "Noto Sans JP", sans-serif;
}

.column-detail-title {
    font-size: 30px;
    line-height: 1.6;
    font-weight: 500;
    color: #231815;
    margin-bottom: 18px;
    letter-spacing: 0.08em;
    text-align: left;
    padding: 0;
}

.column-detail-meta {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
    padding-bottom: 24px;
    border-bottom: 1px solid #e2ded9;
}

.column-detail-date {
    font-size: 13px;
    letter-spacing: 0.1em;
    color: #a29b95;
    font-family: "Inter", sans-serif;
}

.column-detail-eyecatch {
    margin: 36px 0 44px;
}

.column-detail-eyecatch img {
    width: 100%;
    height: auto;
    display: block;
}

.column-detail-content {
    background-color: transparent;
    margin-bottom: 60px;
    font-family: "Noto Sans JP", sans-serif;
}

.column-detail-content h2 {
    font-size: 25px;
    margin: 55px 0 22px;
    padding: 14px 20px;
    background-color: #F3F2F1;
    border-left: 4px solid #231815;
    color: #231815;
    font-weight: 700;
    letter-spacing: 0.06em;
    font-family: "Zen Old Mincho", serif;
}

.column-detail-content h2:first-child {
    margin-top: 0;
}

.column-detail-content h3 {
    font-size: 21px;
    margin: 44px 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #d8d3ce;
    color: #231815;
    font-weight: 700;
    letter-spacing: 0.06em;
    font-family: "Zen Old Mincho", serif;
}

.column-detail-content h4 {
    font-size: 18px;
    margin: 34px 0 14px;
    padding-left: 14px;
    border-left: 3px solid #231815;
    color: #231815;
    font-weight: 700;
}

.column-detail-content h5 {
    font-size: 16px;
    margin: 26px 0 12px;
    color: #231815;
    font-weight: 700;
}

.column-detail-content h6 {
    font-size: 15px;
    margin: 22px 0 10px;
    color: #55504d;
    font-weight: 700;
}

.column-detail-content mark {
    font-style: normal;
}

/* reset.css の font-weight:normal / font-size:100% が span に直接適用されるため
   見出し内の span は親見出しのスタイルを継承するよう上書き */
.column-detail-content h1 span,
.column-detail-content h2 span,
.column-detail-content h3 span,
.column-detail-content h4 span,
.column-detail-content h5 span,
.column-detail-content h6 span {
    font-weight: inherit;
    font-size: inherit;
    line-height: 1.4;
    color: inherit;
}

.column-detail-content p {
    font-size: 15px;
    line-height: 2.15;
    margin-bottom: 26px;
    letter-spacing: 0.04em;
    color: #3d3733;
}

/* Gutenbergエディタのフォントサイズ設定を優先 */
.column-detail-content .has-small-font-size    { font-size: 13px !important; }
.column-detail-content .has-medium-font-size,
.column-detail-content .has-normal-font-size   { font-size: 16px !important; }
.column-detail-content .has-large-font-size    { font-size: 24px !important; }
.column-detail-content .has-x-large-font-size  { font-size: 36px !important; }
.column-detail-content .has-xx-large-font-size { font-size: 48px !important; }

.column-detail-content ul,
.column-detail-content ol {
    margin: 22px 0;
    padding-left: 0;
    list-style: none;
}

.column-detail-content ul:not(.gallery):not(.blocks-gallery-grid):not(.wp-block-gallery) li {
    position: relative;
    padding-left: 1.5em;
}

.column-detail-content ul:not(.gallery):not(.blocks-gallery-grid):not(.wp-block-gallery) li::before {
    content: "●";
    position: absolute;
    left: 0;
    color: #231815;
    font-size: 0.6em;
    line-height: 3.4;
}

.column-detail-content #toc_container ul li::before {
    display: none !important;
}

.column-detail-content ol {
    counter-reset: list-counter;
    padding-left: 0;
}

.column-detail-content ol li {
    position: relative;
    padding-left: 1.8em;
    counter-increment: list-counter;
}

.column-detail-content ol li::before {
    content: counter(list-counter) ".";
    position: absolute;
    left: 0;
    color: #231815;
    font-weight: 600;
}

.column-detail-content ul ul,
.column-detail-content ul ul ul {
    margin: 10px 0;
}

.column-detail-content ul:not(.gallery):not(.blocks-gallery-grid):not(.wp-block-gallery) ul li::before {
    content: "○";
}

.column-detail-content ul:not(.gallery):not(.blocks-gallery-grid):not(.wp-block-gallery) ul ul li::before {
    content: "■";
    font-size: 0.5em;
}

.column-detail-content ul:not(.gallery):not(.blocks-gallery-grid):not(.wp-block-gallery) li,
.column-detail-content ol li {
    font-size: 15px;
    line-height: 2.1;
    margin-bottom: 10px;
    letter-spacing: 0.04em;
    color: #3d3733;
}

.column-detail-content img {
    max-width: 100%;
    height: auto;
}

.column-detail-content blockquote {
    margin: 30px 0;
    padding: 22px 26px;
    background-color: #F3F2F1;
    border-left: 4px solid #231815;
    color: #55504d;
    font-style: italic;
}

.column-detail-content a {
    color: #231815;
    text-decoration: underline;
}

.column-detail-content a:hover {
    opacity: 0.7;
}

/* テーブル
   ※テーマ共通CSSに全<table>を position:absolute / width:500px にする
     トップページ用の指定があるため、ここで確実に打ち消す */
.column-detail-content .wp-block-table {
    margin: 30px 0;
    overflow-x: auto;
}

.column-detail-content .wp-block-table table {
    margin: 0;
}

.column-detail-content table {
    position: static;
    top: auto;
    left: auto;
    z-index: auto;
    width: 100%;
    margin: 30px 0;
    text-align: left;
    vertical-align: baseline;
    border-collapse: collapse;
    border: 1px solid #ddd;
    background-color: #fff;
}

.column-detail-content table.has-fixed-layout {
    table-layout: fixed;
}

.column-detail-content table th,
.column-detail-content table td {
    padding: 12px 15px;
    border: 1px solid #ddd;
    text-align: left;
    vertical-align: top;
    font-size: 14px;
    line-height: 1.8;
    color: #3d3733;
}

.column-detail-content table th {
    background-color: #F3F2F1;
    font-weight: 600;
    color: #231815;
}

.column-detail-content table .has-text-align-center { text-align: center; }
.column-detail-content table .has-text-align-right  { text-align: right; }

/* ========================================
   ブロックエディタ補完
   （テーマが wp_head() を呼ばないため WordPress 標準の
     ブロックCSS・色パレット・プラグインCSSが読み込まれない分を補う）
======================================== */

/* 埋め込み（YouTube等）のはみ出し防止 */
.column-detail-content iframe {
    max-width: 100%;
}

.column-detail-content iframe[src*="youtube"],
.column-detail-content iframe[src*="youtu.be"],
.column-detail-content iframe[src*="vimeo"] {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
}

/* 目次（Table of Contents Plus） */
.column-detail-content #toc_container {
    display: block;
    width: auto;
    max-width: 100%;
    box-sizing: border-box;
    background-color: #F7F6F5;
    border: 1px solid #e2ded9;
    padding: 24px 28px;
    margin: 34px 0;
    font-family: "Noto Sans JP", sans-serif;
}

.column-detail-content #toc_container .toc_title {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.06em;
    margin-bottom: 14px;
    color: #231815;
    text-align: left;
}

.column-detail-content #toc_container ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.column-detail-content #toc_container ul ul {
    margin: 6px 0 6px 1.4em;
}

.column-detail-content #toc_container li {
    margin-bottom: 8px;
    padding-left: 0;
    font-size: 14px;
    line-height: 1.7;
    color: #3d3733;
}

.column-detail-content #toc_container li:last-child {
    margin-bottom: 0;
}

.column-detail-content #toc_container a {
    color: #3d3733;
    text-decoration: none;
}

.column-detail-content #toc_container a:hover {
    text-decoration: underline;
    opacity: 1;
}

.column-detail-content #toc_container .toc_number {
    margin-right: 6px;
    color: #a29b95;
}

/* WordPress 標準カラーパレット（クラス指定分のフォールバック）
   ※インラインの style="color:..." はそのまま優先されるため上書きしない */
.column-detail-content .has-black-color { color: #000000; }
.column-detail-content .has-cyan-bluish-gray-color { color: #abb8c3; }
.column-detail-content .has-white-color { color: #ffffff; }
.column-detail-content .has-pale-pink-color { color: #f78da7; }
.column-detail-content .has-vivid-red-color { color: #cf2e2e; }
.column-detail-content .has-luminous-vivid-orange-color { color: #ff6900; }
.column-detail-content .has-luminous-vivid-amber-color { color: #fcb900; }
.column-detail-content .has-light-green-cyan-color { color: #7bdcb5; }
.column-detail-content .has-vivid-green-cyan-color { color: #00d084; }
.column-detail-content .has-pale-cyan-blue-color { color: #8ed1fc; }
.column-detail-content .has-vivid-cyan-blue-color { color: #0693e3; }
.column-detail-content .has-vivid-purple-color { color: #9b51e0; }

.column-detail-content .has-black-background-color { background-color: #000000; }
.column-detail-content .has-cyan-bluish-gray-background-color { background-color: #abb8c3; }
.column-detail-content .has-white-background-color { background-color: #ffffff; }
.column-detail-content .has-pale-pink-background-color { background-color: #f78da7; }
.column-detail-content .has-vivid-red-background-color { background-color: #cf2e2e; }
.column-detail-content .has-luminous-vivid-orange-background-color { background-color: #ff6900; }
.column-detail-content .has-luminous-vivid-amber-background-color { background-color: #fcb900; }
.column-detail-content .has-light-green-cyan-background-color { background-color: #7bdcb5; }
.column-detail-content .has-vivid-green-cyan-background-color { background-color: #00d084; }
.column-detail-content .has-pale-cyan-blue-background-color { background-color: #8ed1fc; }
.column-detail-content .has-vivid-cyan-blue-background-color { background-color: #0693e3; }
.column-detail-content .has-vivid-purple-background-color { background-color: #9b51e0; }

/* スペーサー・区切り */
.column-detail-content .wp-block-spacer {
    display: block;
}

.column-detail-content .wp-block-separator {
    border: none;
    border-top: 1px solid #e2ded9;
    margin: 34px auto;
}

/* 単体画像（wp-block-image）とキャプション */
.column-detail-content figure.wp-block-image {
    margin: 30px 0;
}

.column-detail-content figure.wp-block-image.aligncenter {
    text-align: center;
}

.column-detail-content figure.wp-block-image img {
    height: auto;
}

.column-detail-content figure.wp-block-image > figcaption,
.column-detail-content .wp-element-caption {
    font-size: 13px;
    color: #6b6560;
    text-align: center;
    padding: 8px 4px 0;
    line-height: 1.6;
}

/* ギャラリー（クラシックエディタ） */
.column-detail-content .gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 20px 0;
    padding: 0;
    list-style: none;
}

.column-detail-content .gallery-item {
    margin: 0;
    padding: 0;
    overflow: hidden;
    flex: 0 0 auto;
}

.column-detail-content .gallery-columns-1 .gallery-item  { width: 100%; }
.column-detail-content .gallery-columns-2 .gallery-item  { width: calc(50% - 4px); }
.column-detail-content .gallery-columns-3 .gallery-item  { width: calc(33.333% - 6px); }
.column-detail-content .gallery-columns-4 .gallery-item  { width: calc(25% - 6px); }
.column-detail-content .gallery-columns-5 .gallery-item  { width: calc(20% - 7px); }
.column-detail-content .gallery-columns-6 .gallery-item  { width: calc(16.666% - 7px); }
.column-detail-content .gallery-columns-7 .gallery-item  { width: calc(14.285% - 7px); }
.column-detail-content .gallery-columns-8 .gallery-item  { width: calc(12.5% - 7px); }
.column-detail-content .gallery-columns-9 .gallery-item  { width: calc(11.111% - 7px); }

.column-detail-content .gallery-icon {
    overflow: hidden;
    line-height: 0;
}

.column-detail-content .gallery-icon a {
    display: block;
    line-height: 0;
}

.column-detail-content .gallery-item img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.column-detail-content .gallery-caption {
    font-size: 13px;
    color: #6b6560;
    text-align: center;
    padding: 6px 4px;
    line-height: 1.5;
}

/* ギャラリー（Gutenbergブロックエディタ） */
.column-detail-content .wp-block-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 20px 0;
    padding: 0;
    list-style: none;
}

.column-detail-content .wp-block-gallery .wp-block-image {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
}

.column-detail-content .wp-block-gallery .wp-block-image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.column-detail-content .wp-block-gallery figcaption {
    font-size: 13px;
    color: #6b6560;
    text-align: center;
    padding: 6px 4px;
    line-height: 1.5;
}

.column-detail-content .blocks-gallery-grid {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
}

.column-detail-content .blocks-gallery-item {
    display: flex;
    flex: 1 1 auto;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.column-detail-content .blocks-gallery-item figure {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0;
    position: relative;
    overflow: hidden;
}

.column-detail-content .blocks-gallery-item figure img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    flex-shrink: 0;
}

.column-detail-content .blocks-gallery-item__caption,
.column-detail-content .blocks-gallery-item figcaption {
    width: 100%;
    box-sizing: border-box;
    font-size: 13px;
    color: #6b6560;
    text-align: center;
    padding: 6px 4px;
    line-height: 1.5;
    margin: 0;
}

.column-detail-content .wp-block-gallery.columns-2 .wp-block-image { width: calc(50% - 16px); flex: 0 0 auto; }
.column-detail-content .wp-block-gallery.columns-3 .wp-block-image { width: calc(33.333% - 6px); flex: 0 0 auto; }
.column-detail-content .wp-block-gallery.columns-4 .wp-block-image { width: calc(25% - 6px); flex: 0 0 auto; }
.column-detail-content .wp-block-gallery.columns-5 .wp-block-image { width: calc(20% - 7px); flex: 0 0 auto; }

.column-detail-content .wp-block-gallery.columns-2 .blocks-gallery-item { width: calc(50% - 16px); flex: 0 0 auto; }
.column-detail-content .wp-block-gallery.columns-3 .blocks-gallery-item { width: calc(33.333% - 6px); flex: 0 0 auto; }
.column-detail-content .wp-block-gallery.columns-4 .blocks-gallery-item { width: calc(25% - 6px); flex: 0 0 auto; }
.column-detail-content .wp-block-gallery.columns-5 .blocks-gallery-item { width: calc(20% - 7px); flex: 0 0 auto; }

.column-detail-content .wp-block-gallery.has-nested-images {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 30px 0;
}

/* flex-basis:auto だと画像の元サイズ基準で折り返し縦積みになるため、
   WordPress標準と同じく幅を割合指定して横並びを保つ */
.column-detail-content .wp-block-gallery.has-nested-images figure.wp-block-image {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-grow: 1;
    width: calc(50% - 4px); /* デフォルト＝2枚横並び（ビフォー/アフター等） */
    margin: 0;
    box-sizing: border-box;
}

/* 列数指定に対応 */
.column-detail-content .wp-block-gallery.has-nested-images.columns-1 figure.wp-block-image { width: 100%; }
.column-detail-content .wp-block-gallery.has-nested-images.columns-3 figure.wp-block-image { width: calc(33.333% - 6px); }
.column-detail-content .wp-block-gallery.has-nested-images.columns-4 figure.wp-block-image { width: calc(25% - 6px); }
.column-detail-content .wp-block-gallery.has-nested-images.columns-5 figure.wp-block-image { width: calc(20% - 7px); }
.column-detail-content .wp-block-gallery.has-nested-images.columns-6 figure.wp-block-image { width: calc(16.666% - 7px); }

.column-detail-content .wp-block-gallery.has-nested-images figure.wp-block-image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* 横並び時、背の高い画像に高さを揃える（is-cropped）
   行内で最も高い画像に合わせ、他方を同じ高さまで引き伸ばし・トリミング */
.column-detail-content .wp-block-gallery.has-nested-images.is-cropped {
    align-items: stretch;
}

.column-detail-content .wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image {
    align-self: stretch;
}

.column-detail-content .wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image > a,
.column-detail-content .wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image > div {
    display: flex;
    flex: 1 1 auto;
}

.column-detail-content .wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image img {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ========================================
   ブロックの横並びレイアウト補完
   （テーマが wp_head() を呼ばず WordPress 標準の
     is-layout-flex / カラムブロック用CSSが読み込まれない分を補う）
======================================== */

/* カラムブロック（横並び） */
.column-detail-content .wp-block-columns {
    display: flex;
    flex-wrap: wrap;
    align-items: normal;
    gap: 2em;
    margin-bottom: 26px;
}

.column-detail-content .wp-block-column {
    flex-grow: 1;
    min-width: 0;
    flex-basis: 100%;
    margin: 0;
    word-break: break-word;
    overflow-wrap: break-word;
}

.column-detail-content .wp-block-column > *:first-child { margin-top: 0; }
.column-detail-content .wp-block-column > *:last-child { margin-bottom: 0; }

/* 縦位置揃え */
.column-detail-content .wp-block-columns.are-vertically-aligned-top { align-items: flex-start; }
.column-detail-content .wp-block-columns.are-vertically-aligned-center { align-items: center; }
.column-detail-content .wp-block-columns.are-vertically-aligned-bottom { align-items: flex-end; }
.column-detail-content .wp-block-column.is-vertically-aligned-top { align-self: flex-start; }
.column-detail-content .wp-block-column.is-vertically-aligned-center { align-self: center; }
.column-detail-content .wp-block-column.is-vertically-aligned-bottom { align-self: flex-end; }

/* 汎用フレックス（ボタン群・グループ横並びなど） */
.column-detail-content .wp-block-buttons.is-layout-flex,
.column-detail-content .wp-block-group.is-layout-flex {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8em;
    align-items: center;
}

/* PC：カラムを横並びに */
@media screen and (min-width: 782px) {
    .column-detail-content .wp-block-columns:not(.is-not-stacked-on-mobile) {
        flex-wrap: nowrap;
    }
    .column-detail-content .wp-block-columns {
        flex-wrap: nowrap;
    }
    .column-detail-content .wp-block-column {
        flex-basis: 0;
    }
    /* エディタで幅（flex-basis）を指定したカラムは伸縮させない */
    .column-detail-content .wp-block-column[style*="flex-basis"] {
        flex-grow: 0;
    }
}

/* スマホでも横並びを維持する設定のカラム */
.column-detail-content .wp-block-columns.is-not-stacked-on-mobile {
    flex-wrap: nowrap;
}

.column-detail-content .wp-block-columns.is-not-stacked-on-mobile > .wp-block-column {
    flex-basis: 0;
    flex-grow: 1;
}

@media screen and (max-width: 768px) {
    .column-detail-content .gallery-columns-3 .gallery-item,
    .column-detail-content .gallery-columns-4 .gallery-item,
    .column-detail-content .gallery-columns-5 .gallery-item,
    .column-detail-content .gallery-columns-6 .gallery-item,
    .column-detail-content .gallery-columns-7 .gallery-item,
    .column-detail-content .gallery-columns-8 .gallery-item,
    .column-detail-content .gallery-columns-9 .gallery-item {
        width: calc(50% - 4px);
    }

    .column-detail-content .wp-block-gallery.has-nested-images figure.wp-block-image {
        width: calc(50% - 4px);
    }

    .column-detail-content .wp-block-gallery.has-nested-images.columns-3 figure.wp-block-image,
    .column-detail-content .wp-block-gallery.has-nested-images.columns-4 figure.wp-block-image,
    .column-detail-content .wp-block-gallery.has-nested-images.columns-5 figure.wp-block-image,
    .column-detail-content .wp-block-gallery.has-nested-images.columns-6 figure.wp-block-image {
        width: calc(50% - 4px);
    }

    .column-detail-content .wp-block-gallery.columns-3 .blocks-gallery-item,
    .column-detail-content .wp-block-gallery.columns-4 .blocks-gallery-item,
    .column-detail-content .wp-block-gallery.columns-5 .blocks-gallery-item {
        width: calc(50% - 4px);
        flex: 0 0 auto;
    }
}

/* WordPressキャプション */
.column-detail-content .wp-caption {
    max-width: 100%;
    margin: 30px 0;
    text-align: center;
}

.column-detail-content .wp-caption img {
    display: block;
    margin: 0 auto;
}

.column-detail-content .wp-caption-text {
    font-size: 13px;
    color: #6b6560;
    padding: 10px 0;
    text-align: center;
    line-height: 1.6;
}

/* Gutenberg テキスト揃えクラス */
.column-detail-content .has-text-align-left   { text-align: left !important; }
.column-detail-content .has-text-align-center { text-align: center !important; }
.column-detail-content .has-text-align-right  { text-align: right !important; }

.column-detail-content .aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.column-detail-content .alignleft {
    float: left;
    margin: 0 1.5em 1em 0;
}

.column-detail-content .alignright {
    float: right;
    margin: 0 0 1em 1.5em;
}

.column-detail-content .alignnone {
    margin: 0;
}

/* 戻るリンク */
.column-back-link {
    text-align: center;
    margin-bottom: 20px;
}

.back-btn {
    display: inline-block;
    padding: 16px 60px;
    background-color: #231815;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    letter-spacing: 0.1em;
    transition: all 0.3s ease;
}

.back-btn:hover {
    opacity: 0.8;
}

/* 関連記事 */
.related-columns {
    background-color: #F7F6F5;
    padding: 70px 0 80px;
}

.related-columns-inner {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 20px;
}

.related-columns-title {
    font-size: 24px;
    text-align: center;
    margin-bottom: 44px;
    font-weight: 500;
    letter-spacing: 0.16em;
    color: #231815;
    font-family: "Zen Old Mincho", serif;
}

.related-columns-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 34px;
}

.related-column-item {
    background-color: transparent;
    overflow: visible;
}

.related-column-link {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: opacity 0.3s ease;
}

.related-column-link:hover {
    opacity: 0.75;
}

.related-column-thumb {
    width: 100%;
    height: 190px;
    overflow: hidden;
    background-color: #EAE9E8;
    margin-bottom: 16px;
}

.related-column-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.related-column-content {
    padding: 0;
}

.related-column-title {
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 10px;
    color: #231815;
    font-weight: 500;
    letter-spacing: 0.04em;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-family: "Zen Old Mincho", serif;
}

.related-column-date {
    font-size: 12px;
    letter-spacing: 0.1em;
    color: #a29b95;
    font-family: "Inter", sans-serif;
}

/* ========================================
   レスポンシブ対応
======================================== */

/* タブレット */
@media screen and (max-width: 1024px) {
    .related-columns-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* スマートフォン */
@media screen and (max-width: 768px) {
    .column_area,
    .column-detail {
        padding: 80px 0 60px;
    }

    .column_area .page_ttl {
        font-size: 27px;
    }

    .column-lead {
        margin-bottom: 40px;
    }

    .column-lead-txt {
        font-size: 13px;
        line-height: 2.1;
        text-align: left;
    }

    .column-item {
        padding: 22px 0;
    }

    .column-item-link {
        flex-direction: column;
    }

    .column-item-thumb {
        width: 100%;
        height: 210px;
    }

    .column-item-content {
        padding: 18px 0 0;
    }

    .column-item-title {
        font-size: 17px;
    }

    .column-item-excerpt {
        font-size: 13px;
    }

    .column-detail-title {
        font-size: 24px;
    }

    .column-detail-content h2 {
        font-size: 21px;
        margin: 44px 0 18px;
    }

    .column-detail-content h3 {
        font-size: 18px;
        margin: 34px 0 14px;
    }

    .column-detail-content h4 {
        font-size: 16px;
        margin: 26px 0 12px;
    }

    .column-detail-content p,
    .column-detail-content li {
        font-size: 14px;
    }

    .related-columns {
        padding: 50px 0 55px;
    }

    .related-columns-list {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .related-columns-title {
        font-size: 21px;
        margin-bottom: 30px;
    }

    .back-btn {
        padding: 14px 44px;
        font-size: 13px;
    }
}
