@charset "UTF-8";
/*
 * FK Soudan 共通スタイル
 *
 * 想定読者は40〜60代。本文19px・行間1.9を基準にする（小さくしない）。
 * 配色は客先を選ばない無彩色＋青系。CSS変数で持たせてあるので、
 * 客先のトンマナに寄せるときは子テーマ側で変数だけ上書きすればよい。
 * 文字色はいずれも背景に対してWCAG AAA（通常文字7.0:1）を満たす値にしてある。
 */

#fksd-soudan,
.fksd-page-header,
.fksd-cards-block {
    --fksd-ink: #222222;        /* 白背景15.91:1 */
    --fksd-ink-sub: #4d4d4d;    /* 白背景8.45:1 / 面背景7.87:1 */
    --fksd-accent: #14556b;     /* 白背景8.26:1 / 面背景7.69:1 */
    --fksd-accent-dark: #0f4c5c;/* 白文字を載せて9.51:1 */
    --fksd-accent-pale: #e8f0f3;
    --fksd-surface: #f5f7f8;
    --fksd-line: #dfe3e6;
}

.fksd-container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

/* 相談室の帯 */
.fksd-page-header {
    background: var(--fksd-surface, #f5f7f8);
    border-bottom: 1px solid var(--fksd-line, #dfe3e6);
    padding: 22px 0;
}

.fksd-page-header__label {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--fksd-accent, #14556b);
}

.fksd-body-wrap {
    padding: 32px 0 72px;
}

/* パンくず */
.fksd-breadcrumb {
    font-size: 15px;
    color: var(--fksd-ink-sub, #4d4d4d);
    margin-bottom: 24px;
    line-height: 1.8;
}

.fksd-breadcrumb a {
    color: var(--fksd-ink-sub, #4d4d4d);
    text-decoration: underline;
}

.fksd-breadcrumb__sep {
    margin: 0 .5em;
}

.fksd-breadcrumb__current {
    color: var(--fksd-ink, #222222);
}

/* ===== 記事ページ ===== */

.fksd-title {
    font-size: 30px;
    line-height: 1.55;
    font-weight: 700;
    color: var(--fksd-ink, #222222);
    margin: 0 0 24px;
}

.fksd-eyecatch {
    margin: 0 0 24px;
}

.fksd-eyecatch img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 6px;
}

.fksd-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 20px;
    font-size: 15px;
    color: var(--fksd-ink-sub, #4d4d4d);
    padding-bottom: 20px;
    margin-bottom: 32px;
    border-bottom: 1px solid var(--fksd-line, #dfe3e6);
}

.fksd-meta__cat {
    display: inline-block;
    padding: 4px 14px;
    border-radius: 999px;
    background: var(--fksd-accent-pale, #e8f0f3);
    color: var(--fksd-accent, #14556b);
    text-decoration: none;
    font-size: 14px;
}

.fksd-content {
    font-size: 19px;
    line-height: 1.95;
    color: var(--fksd-ink, #222222);
    max-width: 880px;
}

.fksd-content p {
    margin: 0 0 1.6em;
}

.fksd-content h2 {
    font-size: 25px;
    line-height: 1.6;
    font-weight: 700;
    margin: 2.4em 0 1em;
    padding: 0 0 .5em;
    border-bottom: 2px solid var(--fksd-accent, #14556b);
}

.fksd-content h3 {
    font-size: 21px;
    line-height: 1.65;
    font-weight: 700;
    margin: 2em 0 .9em;
    padding-left: .6em;
    border-left: 4px solid var(--fksd-accent, #14556b);
}

/* 見出しへのジャンプで固定ヘッダーに隠れないようにする（足りなければ子テーマで増やす） */
.fksd-content h2,
.fksd-content h3 {
    scroll-margin-top: 24px;
}

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

.fksd-content a {
    color: var(--fksd-accent, #14556b);
    text-decoration: underline;
}

.fksd-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 1.8em;
    font-size: 17px;
}

.fksd-content th,
.fksd-content td {
    border: 1px solid var(--fksd-line, #dfe3e6);
    padding: 12px 14px;
    text-align: left;
    vertical-align: top;
}

.fksd-content th {
    background: var(--fksd-surface, #f5f7f8);
}

/* ===== 一覧ページ ===== */

.fksd-archive-title {
    font-size: 28px;
    line-height: 1.55;
    font-weight: 700;
    margin: 0 0 16px;
}

.fksd-archive-desc {
    font-size: 18px;
    line-height: 1.9;
    color: var(--fksd-ink-sub, #4d4d4d);
    margin: 0 0 28px;
}

/* カテゴリー絞り込みボタン */
.fksd-genre-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 12px;
    margin: 0 0 40px;
    padding: 20px;
    background: var(--fksd-surface, #f5f7f8);
    border-radius: 8px;
}

.fksd-genre-nav__item {
    display: inline-block;
    /* スマホのタップ領域を44px以上確保する（上下12px＋行の高さ） */
    padding: 12px 18px;
    line-height: 1.3;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--fksd-line, #dfe3e6);
    color: var(--fksd-accent, #14556b);
    font-size: 17px;
    text-decoration: none;
}

.fksd-genre-nav__item:hover {
    background: var(--fksd-accent-pale, #e8f0f3);
}

.fksd-genre-nav__item.is-current {
    background: var(--fksd-accent-dark, #0f4c5c);
    border-color: var(--fksd-accent-dark, #0f4c5c);
    color: #fff;
    font-weight: 700;
}

/* カード（一覧・ショートコード共用）
 * 列数は fksd-cols-N クラスで指定する。インラインstyleで変数を渡すと
 * メディアクエリ側で上書きできなくなるため、クラスにしてある。 */
.fksd-cardgrid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px 28px;
}

.fksd-cardgrid.fksd-cols-1 { grid-template-columns: repeat(1, 1fr); }
.fksd-cardgrid.fksd-cols-2 { grid-template-columns: repeat(2, 1fr); }
.fksd-cardgrid.fksd-cols-3 { grid-template-columns: repeat(3, 1fr); }
.fksd-cardgrid.fksd-cols-4 { grid-template-columns: repeat(4, 1fr); }
.fksd-cardgrid.fksd-cols-5 { grid-template-columns: repeat(5, 1fr); }
.fksd-cardgrid.fksd-cols-6 { grid-template-columns: repeat(6, 1fr); }

.fksd-cardgrid__item {
    margin: 0;
}

.fksd-cardgrid__link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.fksd-cardgrid__thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-radius: 4px;
    background: var(--fksd-surface, #f5f7f8);
}

.fksd-cardgrid__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}

.fksd-cardgrid__link:hover .fksd-cardgrid__thumb img {
    transform: scale(1.04);
}

.fksd-cardgrid__noimg {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--fksd-accent-pale, #e8f0f3);
}

.fksd-cardgrid__title {
    font-size: 18px;
    line-height: 1.65;
    font-weight: 700;
    margin: 14px 0 0;
    color: var(--fksd-ink, #222222);
}

.fksd-cardgrid__link:hover .fksd-cardgrid__title {
    text-decoration: underline;
}

.fksd-pagination {
    margin-top: 48px;
    font-size: 17px;
}

.fksd-empty {
    font-size: 18px;
    line-height: 1.9;
}

/* ===== 一覧下のご案内（CTA） ===== */

.fksd-cta {
    margin: 64px 0 0;
    padding: 40px 24px;
    background: var(--fksd-surface, #f5f7f8);
    border-radius: 8px;
    text-align: center;
}

.fksd-cta__title {
    font-size: 24px;
    line-height: 1.6;
    font-weight: 700;
    margin: 0 0 16px;
    color: var(--fksd-ink, #222222);
}

.fksd-cta__lead {
    font-size: 18px;
    line-height: 1.9;
    color: var(--fksd-ink-sub, #4d4d4d);
    margin: 0 0 28px;
}

.fksd-cta__btn {
    margin: 0;
}

.fksd-cta__btn a {
    display: inline-block;
    min-width: 300px;
    padding: 20px 32px;
    background: var(--fksd-accent-dark, #0f4c5c);
    color: #fff;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
    border-radius: 4px;
}

.fksd-cta__btn a:hover {
    background: #0b3a47;
}

/* ===== ショートコード ===== */

.fksd-cards-block {
    margin: 0 auto;
    padding: 0 20px;
    max-width: 1100px;
    box-sizing: border-box;
}

.fksd-cards-block__title {
    font-size: 26px;
    line-height: 1.5;
    font-weight: 700;
    text-align: center;
    letter-spacing: .08em;
    color: var(--fksd-accent, #14556b);
    margin: 0 0 28px;
}

.fksd-cards-block__more {
    margin: 32px 0 0;
    text-align: center;
    font-size: 17px;
}

.fksd-cards-block__more a {
    display: inline-block;
    padding: 14px 40px;
    border: 1px solid var(--fksd-accent, #14556b);
    border-radius: 999px;
    color: var(--fksd-accent, #14556b);
    text-decoration: none;
}

.fksd-cards-block__more a:hover {
    background: var(--fksd-accent-pale, #e8f0f3);
}

/* ===== タブレット・スマホ ===== */

@media (max-width: 900px) {
    /* 3列以上は2列に落とす。1列指定はそのまま。
     * fksd-cols-N は詳細度(0,2,0)なので、こちらも同じ形で並べないと勝てない */
    .fksd-cardgrid {
        gap: 24px 18px;
    }

    .fksd-cardgrid.fksd-cols-3,
    .fksd-cardgrid.fksd-cols-4,
    .fksd-cardgrid.fksd-cols-5,
    .fksd-cardgrid.fksd-cols-6 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .fksd-title {
        font-size: 25px;
    }

    .fksd-content {
        font-size: 18px;
    }

    .fksd-content h2 {
        font-size: 22px;
    }

    .fksd-content h3 {
        font-size: 19px;
    }

    .fksd-cardgrid,
    .fksd-cardgrid.fksd-cols-2,
    .fksd-cardgrid.fksd-cols-3,
    .fksd-cardgrid.fksd-cols-4,
    .fksd-cardgrid.fksd-cols-5,
    .fksd-cardgrid.fksd-cols-6 {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .fksd-cardgrid__title {
        font-size: 19px;
    }

    .fksd-cta {
        padding: 32px 16px;
    }

    .fksd-cta__title {
        font-size: 21px;
    }

    .fksd-cta__btn a {
        min-width: 0;
        width: 100%;
        box-sizing: border-box;
        font-size: 19px;
    }
}