/* ==========================================================================
   CARINAR コラム 記事スタイル
   - 公開ページ(/career/column)と管理画面プレビューで共用
   - app.scss のリセット(margin:0 / list-style:none / .body{font-size:62.5%})の
     影響下でも成立するよう、必要なプロパティはすべて明示指定する
   ========================================================================== */

.column-page {
    font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Yu Gothic', sans-serif;
    font-size: 16px;
    line-height: 1.9;
    color: #333;
    background: #fff;
    -webkit-font-smoothing: antialiased;
}

.column-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 40px 24px 96px;
}

.column-container--wide {
    max-width: 1120px;
}

/* --------------------------------------------------------------------------
   パンくず
   -------------------------------------------------------------------------- */
.column-breadcrumb {
    font-size: 12px;
    color: #8a97a5;
    margin: 0 0 28px;
    line-height: 1.6;
}

.column-breadcrumb a {
    color: #8a97a5;
    text-decoration: none;
}

.column-breadcrumb a:hover {
    color: #0260AA;
    text-decoration: underline;
}

.column-breadcrumb__sep {
    margin: 0 6px;
}

/* --------------------------------------------------------------------------
   記事ヘッダー
   -------------------------------------------------------------------------- */
.column-header {
    margin: 0 0 40px;
}

.column-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 16px;
    padding: 0;
}

.column-tag {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 3px 12px;
    border-radius: 999px;
    background: #eaf4fb;
    color: #0260AA;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
}

.column-title {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.5;
    color: #1a2633;
    margin: 0 0 16px;
    letter-spacing: 0.01em;
}

.column-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
    font-size: 13px;
    color: #8a97a5;
    margin: 0 0 24px;
    line-height: 1.6;
}

.column-lead {
    font-size: 16px;
    line-height: 1.9;
    color: #556575;
    margin: 0 0 28px;
}

.column-thumbnail {
    margin: 0 0 48px;
    border-radius: 8px;
    overflow: hidden;
    background: #eef3f7;
}

.column-thumbnail img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

/* --------------------------------------------------------------------------
   記事本文 (.column-body)
   -------------------------------------------------------------------------- */
.column-body {
    font-size: 16px;
    line-height: 2;
    color: #333;
}

.column-body h2 {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.5;
    color: #1a2633;
    background: #f2f8fc;
    border-left: 5px solid #0260AA;
    border-radius: 0 6px 6px 0;
    padding: 16px 20px;
    margin: 64px 0 28px;
    letter-spacing: 0.01em;
}

.column-body h3 {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.55;
    color: #1a2633;
    border-bottom: 2px solid #d8e6f0;
    padding: 0 2px 10px;
    margin: 48px 0 22px;
    position: relative;
}

.column-body h3::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 80px;
    height: 2px;
    background: linear-gradient(90deg, #2EA7E0, #0260AA);
}

.column-body h4 {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.6;
    color: #1a2633;
    padding: 0 0 0 14px;
    border-left: 3px solid #2EA7E0;
    margin: 36px 0 16px;
}

.column-body p {
    font-size: 16px;
    line-height: 2;
    margin: 0 0 28px;
}

.column-body a {
    color: #0260AA;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.column-body a:hover {
    color: #2EA7E0;
}

.column-body strong {
    font-weight: 700;
    color: #1a2633;
}

.column-body em {
    font-style: italic;
}

/* 蛍光マーカー (==text==) */
.column-body mark,
.column-marker {
    background: linear-gradient(transparent 58%, #ffe982 58%);
    color: inherit;
    font-weight: 700;
    padding: 0 2px;
}

/* リスト */
.column-body ul,
.column-body ol {
    margin: 0 0 28px;
    padding: 20px 24px 20px 44px;
    background: #f7fafc;
    border: 1px solid #e4edf4;
    border-radius: 8px;
}

.column-body ul {
    list-style: disc;
}

.column-body ol {
    list-style: decimal;
}

.column-body li {
    font-size: 16px;
    line-height: 1.9;
    margin: 6px 0;
}

.column-body li::marker {
    color: #0260AA;
    font-weight: 700;
}

.column-body li > ul,
.column-body li > ol {
    margin: 6px 0;
    padding: 0 0 0 22px;
    background: transparent;
    border: none;
    border-radius: 0;
}

/* ネストなしのプレーンなリストへ戻したい場合の逃げ道 */
.column-body ul.plain,
.column-body ol.plain {
    background: transparent;
    border: none;
    padding: 0 0 0 24px;
}

/* テーブル */
.column-table-wrap {
    margin: 0 0 32px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.column-body table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
    line-height: 1.7;
}

.column-body th,
.column-body td {
    border: 1px solid #d8e6f0;
    padding: 12px 16px;
    text-align: left;
    vertical-align: top;
    min-width: 120px;
}

.column-body th {
    background: #0260AA;
    color: #fff;
    font-weight: 700;
    white-space: nowrap;
}

.column-body tr:nth-child(even) td {
    background: #f7fafc;
}

/* 引用 */
.column-body blockquote {
    margin: 0 0 28px;
    padding: 20px 24px;
    border-left: 4px solid #b9cede;
    background: #f5f8fa;
    border-radius: 0 8px 8px 0;
    color: #556575;
}

.column-body blockquote p {
    margin: 0 0 12px;
}

.column-body blockquote p:last-child {
    margin-bottom: 0;
}

/* コード */
.column-body code {
    font-family: SFMono-Regular, Consolas, Menlo, monospace;
    font-size: 14px;
    background: #f0f3f6;
    color: #d13381;
    border-radius: 4px;
    padding: 2px 6px;
}

.column-body pre {
    margin: 0 0 28px;
    padding: 20px;
    background: #1f2933;
    border-radius: 8px;
    overflow-x: auto;
}

.column-body pre code {
    background: transparent;
    color: #e8eef4;
    padding: 0;
    font-size: 13px;
    line-height: 1.7;
}

/* 区切り線 */
.column-body hr {
    border: none;
    border-top: 1px solid #e4edf4;
    margin: 48px 0;
}

/* 画像 */
.column-body img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    border-radius: 8px;
}

.column-figure {
    margin: 36px 0;
}

.column-figure__caption {
    display: block;
    text-align: center;
    font-size: 13px;
    color: #8a97a5;
    margin-top: 10px;
    line-height: 1.6;
}

/* --------------------------------------------------------------------------
   目次 ([toc])
   -------------------------------------------------------------------------- */
.column-body .column-toc {
    margin: 0 0 40px;
    padding: 24px 28px;
    background: #f7fafc;
    border: 1px solid #d8e6f0;
    border-radius: 8px;
}

.column-body .column-toc__title {
    font-size: 16px;
    font-weight: 700;
    color: #1a2633;
    margin: 0 0 12px;
    padding: 0 0 10px;
    border-bottom: 1px solid #d8e6f0;
}

.column-body .column-toc__list {
    list-style: none;
    counter-reset: column-toc;
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
}

.column-body .column-toc__list li {
    counter-increment: column-toc;
    margin: 8px 0;
    padding-left: 30px;
    position: relative;
    font-size: 15px;
    line-height: 1.7;
}

.column-body .column-toc__list li::before {
    content: counter(column-toc, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 0;
    color: #2EA7E0;
    font-weight: 700;
    font-size: 13px;
    line-height: 1.9;
}

.column-body .column-toc__list li.column-toc__item--sub {
    margin-left: 26px;
    font-size: 14px;
}

.column-body .column-toc__list a {
    color: #333;
    text-decoration: none;
}

.column-body .column-toc__list a:hover {
    color: #0260AA;
    text-decoration: underline;
}

/* 見出しへのアンカー移動時にヘッダーと被らないよう余白を確保 */
.column-body h2[id],
.column-body h3[id] {
    scroll-margin-top: 90px;
}

/* --------------------------------------------------------------------------
   カスタムブロック
   -------------------------------------------------------------------------- */
.column-rich-block {
    margin: 36px 0;
    padding: 0;
    border-radius: 8px;
    border: 2px solid #2EA7E0;
    background: #fff;
    overflow: hidden;
}

.column-rich-block__label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(90deg, #2EA7E0, #0260AA);
    padding: 10px 18px;
    line-height: 1.5;
}

.column-rich-block__label::before {
    content: '💡';
    font-size: 16px;
}

.column-rich-block__body {
    padding: 18px 20px;
    font-size: 15px;
    line-height: 1.9;
}

.column-rich-block__body p {
    margin: 0 0 14px;
    font-size: 15px;
}

.column-rich-block__body p:last-child {
    margin-bottom: 0;
}

.column-rich-block__body ul,
.column-rich-block__body ol {
    margin: 0 0 12px;
    padding: 0 0 0 24px;
    background: transparent;
    border: none;
}

.column-rich-block__body ul {
    list-style: disc;
}

.column-rich-block__body ol {
    list-style: decimal;
}

.column-rich-block__body li {
    font-size: 15px;
    margin: 4px 0;
}

/* alert */
.column-rich-block--alert {
    border-color: #f0b357;
}

.column-rich-block--alert .column-rich-block__label {
    background: linear-gradient(90deg, #f0a83c, #e08a1e);
}

.column-rich-block--alert .column-rich-block__label::before {
    content: '⚠️';
}

.column-rich-block--alert-danger {
    border-color: #e06c6c;
}

.column-rich-block--alert-danger .column-rich-block__label {
    background: linear-gradient(90deg, #e06c6c, #c94747);
}

/* compare */
.column-compare-block {
    margin: 36px 0;
    padding: 24px;
    border-radius: 8px;
    background: #f7fafc;
    border: 1px solid #d8e6f0;
}

.column-compare-block__title {
    font-size: 18px;
    font-weight: 700;
    color: #1a2633;
    margin: 0 0 18px;
    line-height: 1.5;
}

.column-compare-block__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}

.column-compare-block__item {
    background: #fff;
    border: 1px solid #d8e6f0;
    border-radius: 8px;
    overflow: hidden;
}

.column-compare-block__label {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    background: #0260AA;
    text-align: center;
    padding: 8px 12px;
    line-height: 1.5;
}

.column-compare-block__item:last-child .column-compare-block__label {
    background: #8a97a5;
}

.column-compare-block__body {
    padding: 16px 18px;
    font-size: 14px;
    line-height: 1.8;
}

.column-compare-block__body p {
    margin: 0 0 10px;
    font-size: 14px;
}

.column-compare-block__body ul,
.column-compare-block__body ol {
    margin: 0;
    padding: 0 0 0 20px;
    background: transparent;
    border: none;
}

.column-compare-block__body ul {
    list-style: disc;
}

.column-compare-block__body ol {
    list-style: decimal;
}

.column-compare-block__body li {
    font-size: 14px;
    margin: 4px 0;
}

/* cta */
.column-cta-block {
    margin: 48px 0 12px;
    padding: 32px 28px;
    border-radius: 8px;
    background: linear-gradient(135deg, #0260AA, #2EA7E0);
    color: #fff;
    text-align: center;
}

.column-cta-block__title {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.5;
    margin: 0 0 12px;
}

.column-cta-block__body {
    font-size: 15px;
    line-height: 1.9;
    margin: 0 0 4px;
}

.column-cta-block__body p {
    margin: 0 0 10px;
    font-size: 15px;
}

.column-cta-block__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 16px;
    padding: 14px 40px;
    border-radius: 999px;
    background: #fff;
    color: #0260AA;
    text-decoration: none;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    box-shadow: 0 4px 14px rgba(4, 42, 82, 0.25);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.column-cta-block__button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(4, 42, 82, 0.3);
    color: #0260AA;
}

/* --------------------------------------------------------------------------
   記事フッター
   -------------------------------------------------------------------------- */
.column-note {
    margin: 48px 0 0;
    padding: 18px 20px;
    background: #f7fafc;
    border-radius: 8px;
    font-size: 13px;
    color: #8a97a5;
    line-height: 1.8;
}

.column-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 32px;
    color: #0260AA;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.column-back-link:hover {
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   一覧ページ
   -------------------------------------------------------------------------- */
.column-hero {
    background: linear-gradient(135deg, #0260AA, #2EA7E0);
    color: #fff;
    border-radius: 12px;
    padding: 44px 40px;
    margin: 0 0 36px;
}

.column-hero__eyebrow {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.85;
    margin: 0 0 10px;
}

.column-hero h1 {
    margin: 0 0 12px;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.4;
}

.column-hero__lead {
    font-size: 14px;
    line-height: 1.9;
    margin: 0;
    opacity: 0.92;
}

.column-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
}

.column-card {
    display: flex;
    min-height: 100%;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e4edf4;
    border-radius: 8px;
    color: inherit;
    text-decoration: none;
    overflow: hidden;
    transition: box-shadow 0.16s ease, transform 0.16s ease;
}

.column-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(10, 55, 105, 0.12);
}

.column-card__thumb {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #eef3f7;
    overflow: hidden;
}

.column-card__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.column-card__thumb-placeholder {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #eaf4fb, #dfeaf5);
    color: #0260AA;
    font-size: 13px;
    font-weight: 700;
}

.column-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 18px 18px 20px;
}

.column-card__date {
    font-size: 12px;
    color: #8a97a5;
    line-height: 1.6;
}

.column-card__title {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.6;
    color: #1a2633;
    margin: 8px 0 14px;
}

.column-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: auto;
}

.column-card__tag {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 2px 10px;
    border-radius: 999px;
    background: #eaf4fb;
    color: #0260AA;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
}

.column-empty {
    background: #f7fafc;
    border: 1px solid #e4edf4;
    border-radius: 8px;
    padding: 32px;
    font-size: 15px;
    color: #556575;
}

.column-pagination {
    margin-top: 36px;
    font-size: 14px;
}

.column-pagination svg {
    width: 20px;
}

.column-pagination nav > div:first-child {
    display: none;
}

/* --------------------------------------------------------------------------
   レスポンシブ
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
    .column-container {
        padding: 28px 18px 72px;
    }

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

    .column-lead {
        font-size: 15px;
    }

    .column-thumbnail {
        margin-bottom: 36px;
        border-radius: 6px;
    }

    .column-body h2 {
        font-size: 20px;
        padding: 12px 16px;
        margin: 48px 0 22px;
    }

    .column-body h3 {
        font-size: 18px;
        margin: 40px 0 18px;
    }

    .column-body h4 {
        font-size: 16px;
        margin: 30px 0 14px;
    }

    .column-body p,
    .column-body li {
        font-size: 15px;
    }

    .column-body ul,
    .column-body ol {
        padding: 16px 18px 16px 36px;
    }

    .column-hero {
        padding: 30px 24px;
        border-radius: 10px;
    }

    .column-hero h1 {
        font-size: 24px;
    }

    .column-grid {
        grid-template-columns: 1fr;
    }

    .column-cta-block {
        padding: 26px 20px;
    }

    .column-cta-block__title {
        font-size: 19px;
    }
}