/*
Theme Name: FC Media
Description: フランチャイズ媒体用オリジナルテーマ
Version: 1.0
*/

/* ブランド色はロゴ（assets/logo/icon-512.png）から抽出した実測値。
   主色 = アイコンのオレンジ #f1b545（実測 #f1b749、色相39°）。
   紺 #06223b は主色ではなく「文字・見出し・ボタン」に使う従色。グレー #5d6b77 は補助テキスト。
   派生色はすべて色相39°を保ったまま明度・彩度だけ動かしている。無関係な色相を持ち込まないこと。 */
:root {
    /* オレンジ（主色） */
    --fc-orange: #f1b545;        /* ロゴ実測。面で使う基準色 */
    --fc-orange-light: #f7c25e;  /* ヒーローのグラデ明側 */
    --fc-orange-deep: #e8a323;   /* ヒーローのグラデ暗側・強調の塗り */
    --fc-orange-text: #9e6a08;   /* 白地に置く文字・リンク（白背景で4.65:1＝AA） */
    --fc-orange-soft: #fff3de;   /* 薄いオレンジ地 */

    /* 紺（従色。文字とボタンに使う） */
    --fc-navy: #06223b;
    --fc-navy-light: #0d3a63;

    /* 後方互換。既存の指定が参照しているので残す */
    --fc-yellow: var(--fc-orange);
    --fc-yellow-soft: #fbe6b8;

    --fc-accent: var(--fc-orange-text);
    --fc-text: #12212e;
    --fc-muted: #5d6b77;
    --fc-border: #dfe4e9;
    --fc-bg: #f6f8fa;
    --fc-tint: var(--fc-orange-soft);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif;
    color: var(--fc-text);
    background: var(--fc-bg);
    line-height: 1.7;
}

a {
    color: var(--fc-accent);
    text-decoration: none;
}

/* height: auto は必須。WordPressは width/height 属性を出力するので、
   max-width だけだと横だけ縮んで高さが属性値のまま残り、画像が縦に伸びる。
   スマホの案件詳細でアイキャッチが 301×538（本来301×158）になっていた（2026-09-06実測）。 */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

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

/* サイト説明バー（h1）。ShoppalMartの sm-topbar と同じ、最上部の細い帯。
   白文字はこのオレンジ上でコントラスト1.8しか無いので、文字は紺にしている（9.2:1）。 */
.fc-topbar {
    background: var(--fc-orange);
    padding: 6px 12px;
    text-align: center;
}

.fc-topbar__text {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--fc-navy);
}

.fc-header {
    background: #fff;
    border-bottom: 1px solid var(--fc-border);
    padding: 16px 0;
}

.fc-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.fc-header__logo {
    font-size: 20px;
    font-weight: 700;
    color: var(--fc-text);
}

/* ロゴ画像。高さ基準で揃え、Retinaでも縮小表示されるよう幅は自動。 */
.fc-header__logo--image {
    line-height: 0;
}

.fc-header__logo--image img {
    height: 38px;
    width: auto;
    display: block;
}

@media (max-width: 600px) {
    .fc-header__logo--image img {
        height: 30px;
    }
}

.fc-filter {
    background: #fff;
    border-bottom: 1px solid var(--fc-border);
    padding: 16px 0;
}

.fc-filter__list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
}

.fc-filter__list a {
    display: inline-block;
    padding: 6px 14px;
    border: 1px solid var(--fc-border);
    border-radius: 999px;
    color: var(--fc-text);
    font-size: 14px;
}

.fc-filter__list a.is-active,
.fc-filter__list a:hover {
    background: var(--fc-orange);
    border-color: var(--fc-orange);
    color: var(--fc-navy);
    font-weight: 700;
}

.fc-page-title {
    font-size: 22px;
    margin: 32px 0 16px;
}

.fc-grid {
    display: grid;
    /* 300px下限。260pxだとスペック2列が詰まって数字が折り返す */
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
    margin: 24px 0 48px;
}

/* 案件カード。TOP・案件一覧・業種一覧で共通。
   **PC 3列・SP 1列**（2026-09-06）。縦組みで、画像が上・情報が下。
   1列の横長も試したが「PCは3列でよかった」との指示で戻した。
   ただし1列のときに増やした項目（ロイヤリティ・契約期間・会社名）は、
   カード内で全幅の行として置けるので落とさずに残している。 */
.fc-list {
    display: grid;
    /* 300px下限。これ未満だとスペック2列が詰まって数字が折り返す */
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    margin: 24px 0 48px;
}

.fc-card {
    background: #fff;
    border: 1px solid var(--fc-border);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    color: var(--fc-text);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.fc-card:hover {
    border-color: var(--fc-orange);
    box-shadow: 0 6px 20px rgba(6, 34, 59, 0.09);
    transform: translateY(-2px);
}

.fc-card__thumb {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--fc-tint);
}

.fc-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

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

.fc-card__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 10px;
}

.fc-card__cat,
.fc-card__type {
    max-width: 100%;
    border-radius: 4px;
    padding: 4px 10px;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.4;
    /* カードが狭いと業種名がピルの中で折り返すので1行に切る */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fc-card__cat {
    background: var(--fc-orange-soft);
    color: var(--fc-orange-text);
}

.fc-card__type {
    background: var(--fc-bg);
    color: var(--fc-muted);
    border: 1px solid var(--fc-border);
}

.fc-card__brand {
    font-size: 19px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--fc-navy);
    margin: 0;
}

.fc-card__sub {
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.6;
    color: var(--fc-navy);
    margin: 6px 0 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 本部のサブコピー。長いので2行で切る */
.fc-card__lead {
    font-size: 12.5px;
    line-height: 1.8;
    color: var(--fc-muted);
    margin: 8px 0 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 金額2つは横並び、ロイヤリティは全幅の行。
   ロイヤリティは本部により1行〜3行と差が大きいので2行で切る。 */
.fc-card__spec {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--fc-border);
    border: 1px solid var(--fc-border);
    border-radius: 8px;
    overflow: hidden;
    margin: 14px 0 0;
}

.fc-card__spec-item {
    background: #fff;
    padding: 10px 12px;
}

.fc-card__spec-item--text {
    grid-column: 1 / -1;
}

.fc-card__spec dt {
    font-size: 11px;
    color: var(--fc-muted);
    margin: 0 0 2px;
}

.fc-card__spec dd {
    margin: 0;
    color: var(--fc-navy);
    line-height: 1.25;
    white-space: nowrap;
}

.fc-card__spec dd strong {
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.fc-card__spec dd span {
    font-size: 12px;
    font-weight: 700;
    margin-left: 2px;
}

.fc-card__spec-item--text dd {
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.7;
    white-space: normal;
    color: var(--fc-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 契約期間。値があるものだけ出す */
.fc-card__meta {
    margin: 10px 0 0;
    font-size: 12px;
    line-height: 1.7;
}

.fc-card__meta > div {
    margin: 0 0 4px;
}

.fc-card__meta dt {
    color: var(--fc-muted);
    font-size: 11px;
    margin: 0 0 1px;
}

.fc-card__meta dd {
    margin: 0;
    color: var(--fc-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* フッターは margin-top:auto で底に固定。同じ行のカードで高さが揃う */
.fc-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding: 14px 0 0;
    border-top: 1px solid var(--fc-border);
}

.fc-card__company {
    font-size: 11.5px;
    color: var(--fc-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fc-card__more {
    font-size: 13px;
    font-weight: 700;
    color: var(--fc-orange-text);
    white-space: nowrap;
}

.fc-card__more::after {
    content: "→";
    margin-left: 6px;
}

.fc-card:hover .fc-card__more {
    text-decoration: underline;
}

/* スマホは1列。カードが広くなるので中の指定はPCのまま使える */
@media (max-width: 700px) {
    .fc-list {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* 業種ページの導入文とガイド記事リンク。
   これが無いと業種ページが「案件カードだけの出口専用ページ」になる。 */
.fc-taxintro {
    margin: 0 0 8px;
}

.fc-taxintro__lead {
    font-size: 14px;
    line-height: 1.9;
    color: var(--fc-muted);
    margin: 0 0 10px;
    max-width: 760px;
}

.fc-taxintro__desc {
    font-size: 13.5px;
    line-height: 1.9;
    color: var(--fc-muted);
    margin: 0 0 10px;
    max-width: 760px;
}

.fc-taxintro__guides {
    background: #fff;
    border: 1px solid var(--fc-border);
    border-radius: 8px;
    padding: 16px 20px;
    max-width: 760px;
}

.fc-taxintro__guides-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--fc-navy);
    margin: 0 0 8px;
}

.fc-taxintro__guides ul {
    margin: 0;
    padding-left: 20px;
    font-size: 13.5px;
}

.fc-taxintro__guides li {
    margin: 6px 0;
}

.fc-empty {
    padding: 48px 0;
    color: var(--fc-muted);
    text-align: center;
}

.fc-single {
    background: #fff;
    padding: 32px;
    border-radius: 12px;
    border: 1px solid var(--fc-border);
    margin: 32px 0;
}

.fc-single__title {
    font-size: 26px;
    margin: 0 0 8px;
}

.fc-single__sub {
    color: var(--fc-muted);
    margin: 0 0 24px;
}

.fc-single__thumb img {
    border-radius: 8px;
    margin-bottom: 24px;
}


.fc-section {
    margin: 32px 0;
    padding-top: 24px;
    border-top: 1px solid var(--fc-border);
}

.fc-section h2 {
    font-size: 18px;
    margin: 0 0 16px;
}

.fc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.fc-table th,
.fc-table td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid var(--fc-border);
    vertical-align: top;
}

.fc-table th {
    width: 220px;
    color: var(--fc-muted);
    font-weight: 500;
}

.fc-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.fc-tags span {
    background: var(--fc-bg);
    border: 1px solid var(--fc-border);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 13px;
}

.fc-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 480px;
}

.fc-form label {
    font-size: 13px;
    color: var(--fc-muted);
}

.fc-form input,
.fc-form textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--fc-border);
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
}

/* 資料請求はサイト上で最も押させたい操作なので、ロゴのイエローを当てる */
.fc-form button {
    align-self: flex-start;
    background: var(--fc-yellow);
    color: var(--fc-navy);
    font-weight: 700;
    border: none;
    border-radius: 6px;
    padding: 12px 28px;
    font-size: 15px;
    cursor: pointer;
}

/* 送信前に出す第三者提供の同意文。目立たせすぎず、読み飛ばされない大きさにする */
.fc-form__consent {
    font-size: 12.5px;
    line-height: 1.7;
    color: var(--fc-muted);
    margin: 4px 0 0;
}

.fc-form__consent a {
    text-decoration: underline;
}

.fc-footer__nav {
    margin-bottom: 8px;
}

.fc-footer__nav a {
    color: var(--fc-muted);
    text-decoration: underline;
}

.fc-form__notice {
    padding: 12px 16px;
    border-radius: 6px;
    margin-bottom: 16px;
    font-size: 14px;
}

.fc-form__notice--success {
    background: #e6f4ea;
    color: #1e6f3e;
}

.fc-form__notice--error {
    background: #fdecea;
    color: #b3261e;
}

/* ============================================================
   固定ページ／お問い合わせフォーム（/contact/）
   ============================================================ */

.fc-page {
    background: #fff;
    border: 1px solid var(--fc-border);
    border-radius: 12px;
    padding: 36px 40px 40px;
    margin: 16px 0 48px;
}

.fc-page__title {
    font-size: 27px;
    line-height: 1.45;
    margin: 0 0 12px;
    color: var(--fc-navy);
}

.fc-page__lead {
    font-size: 14.5px;
    line-height: 1.9;
    color: var(--fc-muted);
    margin: 0 0 24px;
    max-width: 680px;
}

.fc-contact {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 32px;
    align-items: start;
}

/* 案件詳細の資料請求フォームは幅480pxで足りるが、
   お問い合わせは項目が多いので広げる */
.fc-form--wide {
    max-width: 100%;
    gap: 16px;
}

.fc-form select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--fc-border);
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
    background: #fff;
    color: var(--fc-text);
}

.fc-form__req {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 6px;
    border-radius: 3px;
    background: var(--fc-orange-soft);
    color: var(--fc-orange-text);
    font-size: 10.5px;
    font-weight: 700;
    vertical-align: middle;
}

/* ハニーポット。表示はしないが、display:none だと埋めないbotがいるので画面外へ逃がす */
.fc-form__hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.fc-form__consent {
    font-size: 12.5px;
    line-height: 1.8;
    color: var(--fc-muted);
    background: var(--fc-bg);
    border-radius: 6px;
    padding: 12px 14px;
    margin: 0;
}

.fc-contact__side {
    display: grid;
    gap: 14px;
}

.fc-contact__box {
    background: var(--fc-bg);
    border: 1px solid var(--fc-border);
    border-radius: 8px;
    padding: 16px 18px;
}

.fc-contact__box-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--fc-navy);
    margin: 0 0 6px;
}

.fc-contact__box-text {
    font-size: 12.5px;
    line-height: 1.85;
    color: var(--fc-muted);
    margin: 0 0 6px;
}

.fc-contact__box p:last-child {
    margin-bottom: 0;
}

.fc-footer__nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 20px;
    margin: 0 0 12px;
}

@media (max-width: 780px) {
    .fc-page {
        padding: 24px 20px 28px;
    }

    .fc-page__title {
        font-size: 22px;
    }

    .fc-contact {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

.fc-footer {
    padding: 32px 0;
    color: var(--fc-muted);
    font-size: 13px;
    text-align: center;
}

/* ============================================================
   TOPページ
   ============================================================ */

.fc-btn {
    display: inline-block;
    border-radius: 6px;
    padding: 13px 32px;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
}

.fc-btn--primary {
    background: var(--fc-orange);
    color: var(--fc-navy);
    box-shadow: 0 2px 0 rgba(6, 34, 59, 0.12);
}

.fc-btn--primary:hover,
.fc-btn--accent:hover {
    background: var(--fc-orange-deep);
}

/* 掲載CTAなどが参照している別名。primary と同じ見た目にしておく */
.fc-btn--accent {
    background: var(--fc-orange);
    color: var(--fc-navy);
    box-shadow: 0 2px 0 rgba(6, 34, 59, 0.12);
}

/* 濃い地の上に置くとき用 */
.fc-btn--dark {
    background: var(--fc-navy);
    color: #fff;
}

.fc-btn--ghost {
    border: 1px solid rgba(6, 34, 59, 0.28);
    color: var(--fc-navy);
    background: #fff;
}

.fc-btn--ghost:hover {
    border-color: var(--fc-navy);
}

/* 受け付けを止めているボタン（掲載問い合わせなど）。
   押せないことが見た目で分かるようにし、クリックも通さない。 */
.fc-btn.is-disabled {
    background: var(--fc-border);
    color: var(--fc-muted);
    border-color: var(--fc-border);
    box-shadow: none;
    cursor: not-allowed;
    pointer-events: none;
    user-select: none;
}

.fc-hero {
    background: #fff;
    color: var(--fc-navy);
    border-bottom: 1px solid var(--fc-border);
    padding: 60px 0 52px;
    position: relative;
    overflow: hidden;
}

/* 右上に置く、ごく淡いオレンジの光。面で塗らずに気配だけ残す */
.fc-hero::after {
    content: "";
    position: absolute;
    top: -180px;
    right: -140px;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(241, 181, 69, 0.28) 0%, rgba(241, 181, 69, 0) 70%);
    pointer-events: none;
}

.fc-hero__inner {
    position: relative;
    z-index: 1;
}

.fc-hero__eyebrow {
    display: inline-block;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--fc-orange-text);
    background: var(--fc-orange-soft);
    border-radius: 999px;
    padding: 6px 16px;
    margin: 0 0 18px;
}

.fc-hero__title {
    font-size: 36px;
    line-height: 1.42;
    letter-spacing: -0.01em;
    margin: 0 0 18px;
}

/* 見出しの1行目だけオレンジの下線で受ける */
.fc-hero__title::after {
    content: "";
    display: block;
    width: 64px;
    height: 5px;
    border-radius: 3px;
    background: var(--fc-orange);
    margin: 20px 0 0;
}

.fc-hero__lead {
    font-size: 15px;
    line-height: 1.9;
    color: var(--fc-muted);
    max-width: 620px;
    margin: 20px 0 28px;
}

.fc-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.fc-hero__stats {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    margin: 36px 0 0;
    padding: 24px 0 0;
    border-top: 1px solid var(--fc-border);
}

.fc-hero__stats strong {
    display: block;
    font-size: 27px;
    line-height: 1.2;
    color: var(--fc-navy);
}

.fc-hero__stats span {
    font-size: 12px;
    color: var(--fc-muted);
}

.fc-home-section {
    margin: 56px 0;
}

.fc-home-section__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 2px solid var(--fc-orange);
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.fc-home-section__title {
    font-size: 21px;
    margin: 0;
}

.fc-home-section__more {
    font-size: 13px;
    white-space: nowrap;
}

.fc-home-section__lead {
    font-size: 14px;
    color: var(--fc-muted);
    margin: 0 0 20px;
}

.fc-tilegrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.fc-tile {
    display: block;
    background: #fff;
    border: 1px solid var(--fc-border);
    border-radius: 10px;
    padding: 20px;
    color: var(--fc-text);
}

.fc-tile:hover {
    border-color: var(--fc-orange);
}

.fc-tile__title {
    display: block;
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1.55;
    color: var(--fc-navy);
}

.fc-tile__desc {
    display: block;
    margin-top: 8px;
    font-size: 12.5px;
    line-height: 1.8;
    color: var(--fc-muted);
}

/* スマホは記事タイルも2列にする。ただしタイトルは27字前後あるので、
   幅161pxのまま全文を出すと1タイル4行を超えて読みにくくなる。
   `｜` より後ろの補足とリード文を落とし、主題だけを2〜3行で見せる。 */
@media (max-width: 700px) {
    .fc-tilegrid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .fc-tile {
        padding: 14px 13px;
    }

    .fc-tile__title {
        font-size: 13.5px;
        line-height: 1.5;
    }

    .fc-tile__sub,
    .fc-tile__desc {
        display: none;
    }

    .fc-tile__main {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

.fc-home-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
}

.fc-home-column {
    background: #fff;
    border: 1px solid var(--fc-border);
    border-radius: 10px;
    padding: 22px 24px;
}

.fc-home-column__title {
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--fc-border);
}

.fc-home-column__title a {
    color: var(--fc-navy);
}

.fc-home-column__list {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 14px;
}

.fc-home-column__list li {
    margin: 0 0 10px;
    padding-left: 14px;
    position: relative;
    line-height: 1.65;
}

.fc-home-column__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--fc-yellow);
}

.fc-home-column__list a {
    color: var(--fc-text);
}

.fc-home-column__list a:hover {
    color: var(--fc-navy);
    text-decoration: underline;
}

.fc-home-cta {
    background: var(--fc-orange-soft);
    border: 1px solid #f6ddb0;
    border-radius: 12px;
    padding: 36px 32px;
    margin: 56px 0;
    text-align: center;
}

.fc-home-cta__title {
    font-size: 19px;
    margin: 0 0 12px;
}

.fc-home-cta__text {
    font-size: 14px;
    line-height: 1.9;
    color: var(--fc-muted);
    max-width: 640px;
    margin: 0 auto 22px;
}

/* ヘッダーは狭い画面でロゴとナビが重なるので縦に積む */
@media (max-width: 780px) {
    .fc-header__inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .fc-header__nav {
        gap: 4px 14px;
        font-size: 13px;
    }
}

@media (max-width: 700px) {
    .fc-br-pc {
        display: none;
    }

    .fc-hero {
        padding: 44px 0 40px;
    }

    .fc-hero__title {
        font-size: 25px;
    }

    .fc-hero__stats {
        gap: 24px;
    }

    .fc-home-cta {
        padding: 28px 20px;
    }
}

/* ============================================================
   記事（post）
   本文の正本は フランチャイズ媒体/articles/{slug}.html
   ============================================================ */

.fc-header__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    font-size: 14px;
}

.fc-header__nav a {
    color: var(--fc-text);
}

.fc-header__nav a:hover {
    color: var(--fc-accent);
}

.fc-subnav {
    background: #fff;
    border-bottom: 1px solid var(--fc-border);
    padding: 14px 0;
}

.fc-subnav__list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
}

.fc-subnav__list a {
    display: inline-block;
    padding: 6px 14px;
    border: 1px solid var(--fc-border);
    border-radius: 999px;
    color: var(--fc-text);
    font-size: 14px;
}

.fc-subnav__list a.is-active,
.fc-subnav__list a:hover {
    background: var(--fc-orange);
    border-color: var(--fc-orange);
    color: var(--fc-navy);
    font-weight: 700;
}

.fc-breadcrumb {
    font-size: 12px;
    color: var(--fc-muted);
    margin: 20px 0 0;
}

.fc-breadcrumb a {
    color: var(--fc-muted);
}

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

.fc-article {
    background: #fff;
    border: 1px solid var(--fc-border);
    border-radius: 12px;
    padding: 40px;
    margin: 16px 0 48px;
    max-width: 760px;
}

.fc-article__cat {
    display: inline-block;
    background: var(--fc-orange-soft);
    color: var(--fc-orange-text);
    border-radius: 4px;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 700;
}

.fc-article__title {
    font-size: 27px;
    line-height: 1.5;
    margin: 12px 0 10px;
}

.fc-article__meta {
    display: flex;
    gap: 14px;
    font-size: 12px;
    color: var(--fc-muted);
    margin: 0;
}

.fc-article__thumb img {
    border-radius: 8px;
    margin: 24px 0 0;
}

/* 目次 */
.fc-toc {
    background: var(--fc-bg);
    border: 1px solid var(--fc-border);
    border-radius: 8px;
    padding: 16px 20px;
    margin: 28px 0;
}

.fc-toc__title {
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
}

.fc-toc__list {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    font-size: 14px;
}

.fc-toc__item {
    margin: 7px 0;
}

.fc-toc__item--h3 {
    padding-left: 18px;
    font-size: 13px;
}

.fc-toc__item a {
    color: var(--fc-text);
}

.fc-toc__item a:hover {
    color: var(--fc-accent);
    text-decoration: underline;
}

/* 本文 */
.fc-article__body {
    font-size: 16px;
    line-height: 1.95;
}

.fc-article__body h2 {
    font-size: 21px;
    line-height: 1.5;
    margin: 48px 0 18px;
    padding: 12px 16px;
    background: var(--fc-bg);
    border-left: 4px solid var(--fc-orange);
    border-radius: 0 4px 4px 0;
    scroll-margin-top: 20px;
}

.fc-article__body h3 {
    font-size: 18px;
    line-height: 1.5;
    margin: 34px 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--fc-border);
    scroll-margin-top: 20px;
}

.fc-article__body p {
    margin: 0 0 20px;
}

.fc-article__body ul,
.fc-article__body ol {
    margin: 0 0 24px;
    padding-left: 24px;
}

.fc-article__body li {
    margin: 0 0 12px;
}

.fc-article__body a {
    text-decoration: underline;
}

/* 本文中のマーカー（結論・要点） */
.fc-marker {
    background: linear-gradient(transparent 58%, var(--fc-yellow-soft) 58%);
    font-weight: 700;
}

/* 本文中の表。横幅が足りないときは表だけ横スクロールさせる */
.fc-table-wrap {
    margin: 0 0 28px;
}

.fc-table-wrap > table {
    margin-bottom: 8px;
}

.fc-article-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    line-height: 1.75;
    display: block;
    overflow-x: auto;
    white-space: normal;
}

.fc-article-table th,
.fc-article-table td {
    border: 1px solid var(--fc-border);
    padding: 10px 12px;
    text-align: left;
    vertical-align: top;
    min-width: 110px;
}

.fc-article-table thead th {
    background: var(--fc-bg);
    font-weight: 700;
    color: var(--fc-text);
    white-space: nowrap;
}

.fc-article-table tbody th {
    background: var(--fc-bg);
    font-weight: 700;
    color: var(--fc-text);
    width: 180px;
}

.fc-source {
    font-size: 12px;
    color: var(--fc-muted);
    line-height: 1.7;
    margin: 0;
}

/* 記事末のCTA */
.fc-article-cta {
    margin: 48px 0 0;
    padding: 28px;
    border: 1px solid var(--fc-orange);
    border-radius: 10px;
    background: var(--fc-orange-soft);
    text-align: center;
}

.fc-article-cta__title {
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 10px;
}

.fc-article-cta__text {
    font-size: 14px;
    color: var(--fc-muted);
    margin: 0 0 18px;
}

.fc-article-cta__btn {
    display: inline-block;
    background: var(--fc-yellow);
    color: var(--fc-navy);
    border-radius: 6px;
    padding: 13px 40px;
    font-size: 15px;
    font-weight: 700;
}

/* 関連記事 */
.fc-article-links {
    margin: 32px 0 0;
    padding: 22px 24px;
    background: var(--fc-bg);
    border-radius: 8px;
}

.fc-article-links__title {
    font-weight: 700;
    font-size: 15px;
    margin: 0 0 10px;
}

.fc-article-links ul {
    margin: 0;
    padding-left: 20px;
    font-size: 14px;
}

.fc-article-links li {
    margin: 8px 0;
}

/* 記事一覧 */
.fc-page-lead {
    color: var(--fc-muted);
    font-size: 14px;
    margin: 0 0 24px;
}

.fc-postlist {
    list-style: none;
    margin: 0 0 40px;
    padding: 0;
    display: grid;
    gap: 16px;
}

.fc-postlist__item a {
    display: block;
    background: #fff;
    border: 1px solid var(--fc-border);
    border-radius: 10px;
    padding: 20px 24px;
    color: var(--fc-text);
}

.fc-postlist__item a:hover {
    border-color: var(--fc-orange);
}

.fc-postlist__title {
    display: block;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.55;
    color: var(--fc-navy);
}

.fc-postlist__desc {
    display: block;
    margin-top: 8px;
    font-size: 13px;
    color: var(--fc-muted);
    line-height: 1.8;
}

.fc-pagination {
    margin: 0 0 48px;
    font-size: 14px;
}

@media (max-width: 700px) {
    .fc-article {
        padding: 24px 20px;
    }

    .fc-article__title {
        font-size: 22px;
    }

    .fc-article__body {
        font-size: 15.5px;
    }

    .fc-article__body h2 {
        font-size: 19px;
        margin-top: 40px;
    }

    .fc-article-cta {
        padding: 22px 18px;
    }
}

/* ============================================================
   案件詳細のスマホ表示（2026-09-06）
   `.fc-table th` の固定幅220pxがスマホでも効いていたため、375px幅で
   項目名が194px・値が75pxになり、金額・費用内訳・プラン内容が縦に潰れていた（実測）。
   スマホでは表を「ラベルの下に値」の縦積みにする。項目名が長い日本語の表では
   これが一番確実で、資金条件・料金プラン・開業例・企業概要はすべて `.fc-table` なので
   一括で直る。
   **このブロックはファイル末尾に置くこと。** `.fc-table th { width: 220px }` が
   564行目にあるため、それより前に書くと後ろの指定に負けて効かない（実際に一度そうなった）。
   ============================================================ */
@media (max-width: 700px) {
    .fc-single {
        padding: 20px 16px;
        border-radius: 10px;
        margin: 16px 0;
    }

    .fc-single__title {
        font-size: 20px;
        line-height: 1.5;
    }

    .fc-single__sub {
        font-size: 13px;
        margin-bottom: 16px;
    }

    .fc-single__thumb img {
        margin-bottom: 16px;
    }

    .fc-section {
        margin: 24px 0;
        padding-top: 20px;
    }

    .fc-section h2 {
        font-size: 17px;
    }

    .fc-table,
    .fc-table tbody,
    .fc-table tr,
    .fc-table th,
    .fc-table td {
        display: block;
        width: auto;
    }

    .fc-table tr {
        border-bottom: 1px solid var(--fc-border);
        padding: 10px 0;
    }

    .fc-table tr:last-child {
        border-bottom: none;
    }

    .fc-table th {
        padding: 0 0 4px;
        border: none;
        font-size: 12px;
        line-height: 1.5;
    }

    .fc-table td {
        padding: 0;
        border: none;
        font-size: 14px;
    }

    /* ヘッダーのナビ。1001行目に同じ指定があるが、1034行目の基本指定のほうが
       後ろにあるため font-size が効いていなかった（14pxのまま3行に折り返していた）。 */
    .fc-header__nav {
        gap: 2px 12px;
        font-size: 12px;
    }
}