@charset "UTF-8";
/*
 * シャレコ お客様相談室
 * 読み手は40〜60代が中心。本文19px・行間1.9を基準にする（小さくしない）。
 * 配色はベージュ×ローズ系（相談室の図解と揃える）。
 * カードはTOPページの「スキンケアコラム」と同じ見え方（画像＋タイトル・3列）に合わせている。
 */

#fkss-soudan,
.fkss-page-header,
.fkss-cards-block {
    --fkss-rose: #c9758b;
    --fkss-rose-pale: #f6e7ea;
    --fkss-beige: #faf6f2;
    --fkss-ink: #2b2b2b;
    --fkss-ink-sub: #5c5c5c;
    --fkss-line: #e6ddd6;
}

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

/* 相談室の帯 */
.fkss-page-header {
    background: var(--fkss-beige, #faf6f2);
    border-bottom: 1px solid var(--fkss-line, #e6ddd6);
    padding: 22px 0;
}

.fkss-page-header__label {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: .08em;
    /* ベージュ背景に #c9758b だと3.05:1で読めない。AAAを満たす濃さにする */
    color: #8f3a54;
}

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

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

.fkss-breadcrumb a {
    color: var(--fkss-ink-sub, #5c5c5c);
    text-decoration: underline;
}

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

.fkss-breadcrumb__current {
    color: var(--fkss-ink, #2b2b2b);
}

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

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

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

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

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

.fkss-meta__cat {
    display: inline-block;
    padding: 4px 14px;
    border-radius: 999px;
    background: var(--fkss-rose-pale, #f6e7ea);
    color: #8f3a54;
    text-decoration: none;
    font-size: 14px;
}

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

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

.fkss-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(--fkss-rose, #c9758b);
}

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

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

.fkss-content a {
    color: #8f3a54;
    text-decoration: underline;
}

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

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

.fkss-content th {
    background: var(--fkss-beige, #faf6f2);
}

/* ===== 記事の中の部品（fk-blocks の fk/text html モードで使う） ===== */

/* 紹介ボックス：この相談に答えるのは… */
.fkss-intro {
    display: flow-root;
    margin: 0 0 2em;
    padding: 20px 22px;
    background: var(--fkss-beige, #faf6f2);
    border-left: 4px solid var(--fkss-rose, #c9758b);
    border-radius: 4px;
    font-size: 17px;
    line-height: 1.85;
}

.fkss-intro img {
    float: left;
    width: 72px;
    height: 72px;
    margin: 0 16px 8px 0;
    border-radius: 50%;
    object-fit: cover;
}

.fkss-sub {
    display: block;
    margin-top: 6px;
    font-size: 15px;
    color: var(--fkss-ink-sub, #5c5c5c);
}

/* 図解 */
.fkss-figure {
    margin: 2em 0;
    text-align: center;
}

.fkss-figure img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.fkss-figcap {
    margin-top: 10px;
    font-size: 15px;
    line-height: 1.8;
    color: var(--fkss-ink-sub, #5c5c5c);
    text-align: left;
}

/* 出典 */
.fkss-source {
    display: block;
    font-size: 15px;
    line-height: 1.8;
    color: var(--fkss-ink-sub, #5c5c5c);
}

.fkss-source a {
    color: #8f3a54;
    text-decoration: underline;
}

/* お客様の声 */
.fkss-voice {
    margin: 0 0 18px;
    padding: 18px 20px;
    background: #fff;
    border: 1px solid var(--fkss-line, #e6ddd6);
    border-radius: 8px;
}

.fkss-voice__name {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 700;
    color: #8f3a54;
}

.fkss-voice__text {
    margin: 0;
    font-size: 17px;
    line-height: 1.9;
}

.fkss-note {
    font-size: 15px;
    color: var(--fkss-ink-sub, #5c5c5c);
    margin: 8px 0 0;
}

/* よくある思い込み（推奨事項と見分けがつくよう、あえて控えめな灰系にする） */
.fkss-myth {
    margin: 0 0 2em;
    padding: 20px 22px;
    background: #f4f2f0;
    border: 1px dashed #c9c2ba;
    border-radius: 8px;
}

.fkss-myth__label {
    margin: 0 0 10px;
    font-size: 15px;
    font-weight: 700;
    /* 灰背景 #f4f2f0 で8.60:1（AAA） */
    color: #4a443e;
    letter-spacing: .04em;
}

.fkss-myth__list {
    margin: 0;
    padding-left: 1.4em;
    font-size: 17px;
    line-height: 1.95;
    color: #4a443e;
}

/* 悪循環の流れ（順序が意味を持つので番号を見せる） */
.fkss-steps {
    counter-reset: fkss-step;
    list-style: none;
    margin: 0 0 2em;
    padding: 0;
}

.fkss-steps li {
    counter-increment: fkss-step;
    position: relative;
    margin: 0 0 12px;
    padding: 16px 18px 16px 62px;
    background: #fff;
    border: 1px solid var(--fkss-line, #e6ddd6);
    border-radius: 8px;
    font-size: 17px;
    line-height: 1.85;
}

.fkss-steps li::before {
    content: counter(fkss-step);
    position: absolute;
    left: 16px;
    top: 14px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #8f3a54;
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    line-height: 32px;
    text-align: center;
}

/* fk-blocks のポイントブロックを相談室のトンマナ（ローズ系）に寄せる */
#fkss-soudan .fk-points__no {
    background: #8f3a54;
}

#fkss-soudan .fk-points__item {
    border-color: var(--fkss-line, #e6ddd6);
}

#fkss-soudan .fk-points__head {
    border-left-color: var(--fkss-rose, #c9758b);
}

/* 記事内のLINE案内 */
.fkss-inline-cta {
    margin: 3em 0;
    padding: 32px 24px;
    background: var(--fkss-beige, #faf6f2);
    border-radius: 8px;
    text-align: center;
}

.fkss-inline-cta__title {
    margin: 0 0 14px;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.6;
}

.fkss-inline-cta__lead {
    margin: 0 0 24px;
    font-size: 17px;
    line-height: 1.9;
    color: var(--fkss-ink-sub, #5c5c5c);
}

.fkss-inline-cta__btn {
    margin: 0;
}

.fkss-inline-cta__btn a {
    display: inline-block;
    min-width: 300px;
    padding: 18px 32px;
    background: #1b5e20; /* 白文字と7.87:1（AAA） */
    color: #fff;
    font-size: 19px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 4px;
}

.fkss-inline-cta__btn a:hover {
    background: #14491a;
}

/* 記事末プロフィール */
.fkss-profile {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    margin: 1em 0 0;
    padding: 24px;
    background: var(--fkss-beige, #faf6f2);
    border-radius: 8px;
}

.fkss-profile img {
    flex: 0 0 96px;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
}

.fkss-profile__name {
    margin: 0 0 4px;
    font-size: 19px;
    font-weight: 700;
}

.fkss-profile__role {
    margin: 0 0 12px;
    font-size: 16px;
    color: var(--fkss-ink-sub, #5c5c5c);
}

.fkss-profile__text {
    margin: 0;
    font-size: 16px;
    line-height: 1.9;
}

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

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

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

/* ジャンル絞り込みボタン */
.fkss-genre-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 12px;
    margin: 0 0 40px;
    padding: 20px;
    background: var(--fkss-beige, #faf6f2);
    border-radius: 8px;
}

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

.fkss-genre-nav__item:hover {
    background: var(--fkss-rose-pale, #f6e7ea);
}

.fkss-genre-nav__item.is-current {
    /* 白文字とのコントラスト7.24:1（AAA通常文字7.0を満たす）。淡いローズだと3.3:1で読めない */
    background: #8f3a54;
    border-color: #8f3a54;
    color: #fff;
    font-weight: 700;
}

/* カード（一覧・TOP共用） */
.fkss-cardgrid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px 28px;
}

.fkss-cardgrid__item {
    margin: 0;
}

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

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

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

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

.fkss-cardgrid__noimg {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--fkss-rose-pale, #f6e7ea);
}

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

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

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

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

/* LINE相談のご案内（一覧の下） */
.fkss-cta {
    margin: 64px 0 0;
    padding: 40px 24px;
    background: var(--fkss-beige, #faf6f2);
    border-radius: 8px;
    text-align: center;
}

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

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

.fkss-cta__btn {
    margin: 0;
}

.fkss-cta__btn a {
    display: inline-block;
    min-width: 300px;
    padding: 20px 32px;
    background: #1b5e20; /* 白文字とのコントラスト7.87:1（AAA通常文字7.0を満たす） */
    color: #fff;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
    border-radius: 4px;
}

.fkss-cta__btn a:hover {
    background: #14491a;
}

/* ===== TOPページ用ショートコード ===== */

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

.fkss-cards-block__title {
    font-size: 26px;
    line-height: 1.5;
    font-weight: 400;
    text-align: center;
    letter-spacing: .08em;
    /* 白背景で5.81:1（26pxはWCAGの大きい文字扱い。AAA 4.5 を満たす） */
    color: #8f3a54;
    margin: 0 0 28px;
}

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

.fkss-cards-block__more a {
    display: inline-block;
    padding: 14px 40px;
    border: 1px solid var(--fkss-rose, #c9758b);
    border-radius: 999px;
    color: #8f3a54;
    text-decoration: none;
}

.fkss-cards-block__more a:hover {
    background: var(--fkss-rose-pale, #f6e7ea);
}

/* ===== スマホ ===== */

@media (max-width: 900px) {
    .fkss-cardgrid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px 18px;
    }
}

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

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

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

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

    .fkss-cardgrid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

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

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

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

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

    .fkss-inline-cta__btn a {
        min-width: 0;
        width: 100%;
        box-sizing: border-box;
        font-size: 18px;
    }

    .fkss-profile {
        flex-direction: column;
        gap: 14px;
        align-items: center;
        text-align: center;
    }
}