/* assets/dist/style.css */
/* Frozen CSS for Fukui Tatanet (semantic classes) */

/* ====== Base Reset (minimal) ====== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}
body {
    margin: 0;
}
img {
    max-width: 100%;
    height: auto;
    display: block;
}
a {
    color: inherit;
    text-decoration: none;
}
button,
input,
textarea {
    font: inherit;
}
:focus-visible {
    outline: 2px solid rgba(249, 115, 22, 0.6);
    outline-offset: 2px;
}

/* ====== Design Tokens (approx Tailwind palette) ====== */
:root {
    --slate-50: #f8fafc;
    --slate-100: #f1f5f9;
    --slate-200: #e2e8f0;
    --slate-500: #64748b;
    --slate-600: #475569;
    --slate-700: #334155;
    --slate-800: #1e293b;
    --slate-900: #0f172a;

    --orange-50: #fff7ed;
    --orange-200: #fed7aa;
    --orange-400: #fb923c;
    --orange-500: #f97316;
    --orange-600: #ea580c;

    --emerald-50: #ecfdf5;
    --emerald-200: #a7f3d0;
    --emerald-900: #064e3b;

    --sky-50: #f0f9ff;
    --sky-200: #bae6fd;
    --sky-900: #0c4a6e;

    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.08);
    --shadow-md: 0 10px 20px rgba(15, 23, 42, 0.1);
    --shadow-lg: 0 20px 40px rgba(15, 23, 42, 0.12);
    --shadow-xl: 0 28px 60px rgba(15, 23, 42, 0.14);

    --radius-2xl: 1rem;
    --radius-3xl: 1.5rem;
}

.site-body {
    color: var(--slate-800);
    background: linear-gradient(to bottom, #fff, #fff, var(--slate-50));
    font-family:
        ui-sans-serif,
        system-ui,
        -apple-system,
        "Segoe UI",
        Roboto,
        "Helvetica Neue",
        Arial,
        "Noto Sans JP",
        "Hiragino Sans",
        "Yu Gothic",
        sans-serif;
}

/* ====== Layout ====== */
.container {
    width: 100%;
    max-width: 72rem; /* 6xl */
    margin: 0 auto;
    padding: 0 1rem;
}
.section {
    padding: 3.5rem 0;
}
@media (min-width: 768px) {
    .section {
        padding: 5rem 0;
    }
}
.section--hero {
    padding: 1.5rem 0;
}
@media (min-width: 768px) {
    .section--hero {
        padding: 2rem 0;
    }
}
.section--alt {
    border-top: 1px solid rgba(226, 232, 240, 0.6);
    border-bottom: 1px solid rgba(226, 232, 240, 0.6);
    background: linear-gradient(to bottom, #fff, var(--slate-50));
}

.divider {
    margin: 1.25rem 0;
    height: 1px;
    width: 100%;
    background: var(--slate-200);
}
.note {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--slate-600);
}
.muted {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--slate-500);
}

/* responsive helpers */
.is-hidden-md {
    display: none;
}
@media (min-width: 768px) {
    .is-hidden-md {
        display: inline-flex;
    }
}
.is-hidden-sm {
    display: none;
}
@media (min-width: 768px) {
    .is-hidden-sm {
        display: block;
    }
}

/* ====== Header ====== */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 1px solid rgba(226, 232, 240, 0.7);
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
}
.site-header__inner {
    max-width: 72rem;
    margin: 0 auto;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
}
.site-header__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 900;
    letter-spacing: -0.01em;
}
.brand__mark {
    width: 2.5rem;
    height: 2.5rem;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: var(--radius-2xl);
    border: 1px solid var(--slate-200);
    background: #fff;
    box-shadow: var(--shadow-sm);
}
.brand__logo {
    width: 2rem;
    height: 2rem;
    object-fit: contain;
}
.brand__name {
    color: var(--slate-900);
}

.site-nav {
    display: none;
    gap: 0.5rem;
}
@media (min-width: 768px) {
    .site-nav {
        display: flex;
        align-items: center;
    }
}
.site-nav__link {
    border-radius: 0.75rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--slate-700);
}
.site-nav__link:hover {
    background: rgba(255, 247, 237, 1);
}

/* ====== Buttons / Badges ====== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
    border-radius: var(--radius-2xl);
    font-size: 0.875rem;
    font-weight: 800;
    box-shadow: var(--shadow-sm);
    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease,
        filter 0.15s ease,
        background-color 0.15s ease;
    border: 0;
    cursor: pointer;
}
.btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.btn--primary {
    color: #fff;
    background: linear-gradient(
        135deg,
        var(--orange-400),
        var(--orange-500),
        var(--orange-600)
    );
    box-shadow: 0 18px 36px rgba(249, 115, 22, 0.2);
}
.btn--primary:hover {
    box-shadow: 0 22px 44px rgba(249, 115, 22, 0.24);
}
.btn--ghost {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid var(--slate-200);
}
.btn--soft {
    background: linear-gradient(135deg, var(--orange-50), #fff, #fff);
    border: 1px solid var(--orange-200);
    color: #7c2d12;
}
.btn--round {
    border-radius: 999px;
}

.badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 900;
    border: 1px solid var(--orange-200);
    background: var(--orange-50);
    color: #7c2d12;
}
.badge--warm {
    border-color: var(--orange-200);
    background: var(--orange-50);
    color: #7c2d12;
}
.badge--mint {
    border-color: var(--emerald-200);
    background: var(--emerald-50);
    color: var(--emerald-900);
}
.badge--sky {
    border-color: var(--sky-200);
    background: var(--sky-50);
    color: var(--sky-900);
}

/* ====== Hero ====== */
.hero {
    overflow: hidden;
    border-radius: 28px;
    border: 1px solid rgba(226, 232, 240, 0.8);
    background: #fff;
    box-shadow: var(--shadow-xl);
}
.hero__image {
    position: relative;
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center 30%;
    aspect-ratio: 16/9;
}
.hero__image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.15),
        rgba(0, 0, 0, 0.45)
    );
}
@media (max-width: 640px) {
    .hero__image {
        aspect-ratio: 4/5;
        background-position: center 25%;
    }
}
.hero__intro {
    display: grid;
    gap: 1rem;
    padding: 1.25rem;
    background: linear-gradient(to bottom, #fff, var(--slate-50));
}
@media (min-width: 768px) {
    .hero__intro {
        grid-template-columns: 1.2fr 0.8fr;
        gap: 1.25rem;
        padding: 1.75rem;
    }
}
.hero__title {
    margin-top: 0.75rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1.1;
    font-size: 26px;
}
@media (min-width: 768px) {
    .hero__title {
        font-size: 2.25rem;
    } /* ~text-4xl */
}
.hero__text {
    margin-top: 0.75rem;
    max-width: 68ch;
    font-size: 15px;
    line-height: 2;
    color: var(--slate-700);
}
.hero__cta {
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.hero__meta {
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* ===== スマホだけ挙動を変える ===== */
@media (max-width: 640px) {
    .hero__image {
        /* 切らない・全体表示 */
        background-size: contain;

        /* 縦横比は画像そのままに任せる */
        aspect-ratio: auto;

        /* 余白が出た時の背景 */
        background-color: #fff;

        /* 高さを確保（画像が小さくなりすぎないように） */
        min-height: 60vw;
    }

    /* スマホではオーバーレイを弱める */
    .hero__image::after {
        background: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.05),
            rgba(0, 0, 0, 0.25)
        );
    }
}

/* Trust box */
.trust {
    border-radius: var(--radius-3xl);
    border: 1px solid rgba(226, 232, 240, 0.8);
    background: rgba(255, 255, 255, 0.85);
    padding: 1rem;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(10px);
}
.trust__title {
    font-size: 0.875rem;
    font-weight: 900;
}
.trust__list {
    margin-top: 0.75rem;
    display: grid;
    gap: 0.75rem;
}
.trust__item {
    display: flex;
    gap: 0.75rem;
    border-radius: var(--radius-2xl);
    padding: 0.75rem;
}
.trust__item--warm {
    border: 1px solid var(--orange-200);
    background: rgba(255, 247, 237, 0.6);
}
.trust__item--mint {
    border: 1px solid var(--emerald-200);
    background: rgba(236, 253, 245, 0.6);
}
.trust__dot {
    width: 10px;
    height: 10px;
    margin-top: 0.25rem;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--orange-400), #34d399);
    flex: 0 0 auto;
}
.trust__text {
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--slate-700);
}

/* ====== Section headings ====== */
.section-head {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
@media (min-width: 768px) {
    .section-head {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
    }
}
.section-title {
    margin-top: 0.5rem;
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: -0.02em;
}
@media (min-width: 768px) {
    .section-title {
        font-size: 1.875rem;
    }
}
.section-lead {
    margin-top: 0.5rem;
    max-width: 72ch;
    font-size: 0.875rem;
    line-height: 1.9;
    color: var(--slate-600);
}
.section-bottom {
    margin-top: 1.25rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.section-bottom__text {
    max-width: 72ch;
    font-size: 0.875rem;
    line-height: 1.9;
    color: var(--slate-600);
}

/* ====== Cards ====== */
.cards {
    margin-top: 1.5rem;
    display: grid;
    gap: 1rem;
}
@media (min-width: 768px) {
    .cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (min-width: 1024px) {
    .cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
.card {
    border-radius: var(--radius-3xl);
    border: 1px solid var(--slate-200);
    background: #fff;
    padding: 1.25rem;
    box-shadow: var(--shadow-sm);
    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease;
}
.card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.card__icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-2xl);
    border: 1px solid var(--slate-200);
    background: linear-gradient(135deg, var(--orange-50), #fff);
    font-size: 1.25rem;
}
.card__title {
    margin-top: 0.75rem;
    font-weight: 900;
    font-size: 1rem;
}
.card__text {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    line-height: 1.9;
    color: var(--slate-600);
}

/* ====== About ====== */
.about {
    margin-top: 1.5rem;
    display: grid;
    gap: 1rem;
}
@media (min-width: 768px) {
    .about {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
.about__photo {
    position: relative;
    border-radius: var(--radius-3xl);
    border: 1px solid var(--slate-200);
    background: #fff;
    box-shadow: var(--shadow-sm);
    overflow: hidden;

    background-size: cover;
    background-repeat: no-repeat;
    background-position: center 35%;
    aspect-ratio: 4/3;
}
.about__photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.05),
        rgba(0, 0, 0, 0.2)
    );
}
.about__points {
    display: grid;
    gap: 0.75rem;
}
.point {
    display: flex;
    gap: 0.75rem;
    border-radius: var(--radius-3xl);
    border: 1px solid var(--slate-200);
    background: #fff;
    padding: 1rem;
    box-shadow: var(--shadow-sm);
}
.point__icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-2xl);
    border: 1px solid var(--emerald-200);
    background: var(--emerald-50);
    font-size: 1.25rem;
}
.point__title {
    font-size: 0.875rem;
    font-weight: 900;
}
.point__text {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    line-height: 1.7;
    color: var(--slate-600);
}

/* ====== Nav cards ====== */
.navcards {
    margin-top: 1.5rem;
    display: grid;
    gap: 1rem;
}
@media (min-width: 768px) {
    .navcards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (min-width: 1024px) {
    .navcards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
.navcard {
    display: flex;
    gap: 0.75rem;
    border-radius: var(--radius-3xl);
    border: 1px solid var(--slate-200);
    background: #fff;
    padding: 1rem;
    box-shadow: var(--shadow-sm);
    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease;
}
.navcard:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.navcard__icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-2xl);
    border: 1px solid var(--slate-200);
    background: linear-gradient(135deg, var(--sky-50), var(--emerald-50));
    font-size: 1.25rem;
}
.navcard__body b {
    display: block;
    font-size: 0.875rem;
    font-weight: 900;
}
.navcard__body small {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--slate-600);
}

/* ====== Posts ====== */
.posts {
    margin-top: 1.5rem;
    display: grid;
    gap: 1rem;
}
@media (min-width: 768px) {
    .posts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (min-width: 1024px) {
    .posts {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
.post {
    overflow: hidden;
    border-radius: var(--radius-3xl);
    border: 1px solid var(--slate-200);
    background: #fff;
    box-shadow: var(--shadow-sm);
    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease;
}
.post:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.post__thumb {
    aspect-ratio: 16/10;
    background: linear-gradient(
        135deg,
        var(--sky-50),
        var(--emerald-50),
        var(--orange-50)
    );
}
.post__body {
    padding: 1rem;
}
.post__meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--slate-600);
}
.post__title {
    margin-top: 0.5rem;
    font-size: 1rem;
    font-weight: 900;
    line-height: 1.4;
}
.post__text {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    line-height: 1.9;
    color: var(--slate-600);
}
.post__foot {
    margin-top: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.link {
    font-size: 0.875rem;
    font-weight: 900;
    color: #7c2d12;
}
.link:hover {
    text-decoration: underline;
}

.chip {
    display: inline-block;
    border-radius: 999px;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 900;
    border: 1px solid var(--slate-200);
}
.chip--sky {
    border-color: var(--sky-200);
    background: var(--sky-50);
    color: var(--sky-900);
}
.chip--mint {
    border-color: var(--emerald-200);
    background: var(--emerald-50);
    color: var(--emerald-900);
}
.chip--warm {
    border-color: var(--orange-200);
    background: var(--orange-50);
    color: #7c2d12;
}

/* ====== CTA ====== */
.cta {
    border-radius: 28px;
    border: 1px solid rgba(254, 215, 170, 0.6);
    background: linear-gradient(135deg, var(--orange-50), #fff, #fff);
    padding: 1.5rem;
    box-shadow: var(--shadow-xl);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
@media (min-width: 768px) {
    .cta {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 1.75rem;
    }
}
.cta__title {
    margin-top: 0.5rem;
    font-size: 1.25rem;
    font-weight: 900;
    letter-spacing: -0.02em;
}
@media (min-width: 768px) {
    .cta__title {
        font-size: 1.5rem;
    }
}
.cta__text {
    margin-top: 0.5rem;
    max-width: 70ch;
    font-size: 0.875rem;
    line-height: 1.9;
    color: var(--slate-600);
}
.cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* ====== Contact ====== */
.contact {
    margin-top: 1.5rem;
    display: grid;
    gap: 1rem;
}
@media (min-width: 768px) {
    .contact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
.panel {
    border-radius: var(--radius-3xl);
    border: 1px solid var(--slate-200);
    background: #fff;
    padding: 1.25rem;
    box-shadow: var(--shadow-sm);
}
.form {
    display: grid;
    gap: 0.75rem;
}
.field span {
    display: block;
    font-size: 0.75rem;
    font-weight: 900;
    color: var(--slate-700);
}
.input,
.textarea {
    margin-top: 0.5rem;
    width: 100%;
    border-radius: var(--radius-2xl);
    border: 1px solid var(--slate-200);
    background: #fff;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
}
.input:focus,
.textarea:focus {
    outline: none;
    border-color: rgba(253, 186, 116, 1);
}
.textarea {
    resize: vertical;
}
.form__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.small {
    font-size: 0.875rem;
    line-height: 1.9;
    color: var(--slate-600);
}

/* ====== Footer ====== */
.site-footer {
    border-top: 1px solid var(--slate-200);
    background: linear-gradient(to bottom, #fff, var(--slate-50));
    padding: 2.5rem 0;
}
.site-footer__inner {
    max-width: 72rem;
    margin: 0 auto;
    padding: 0 1rem;
    display: grid;
    gap: 1rem;
}
@media (min-width: 768px) {
    .site-footer__inner {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }
}
.site-footer__desc {
    margin-top: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.9;
    color: var(--slate-600);
}
.site-footer__copy {
    margin-top: 0.75rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--slate-500);
}
.site-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
@media (min-width: 768px) {
    .site-footer__links {
        justify-content: flex-end;
    }
}
.pill-link {
    border-radius: var(--radius-2xl);
    border: 1px solid var(--slate-200);
    background: #fff;
    padding: 0.75rem 1rem;
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--slate-700);
    box-shadow: var(--shadow-sm);
    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease;
}
.pill-link:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* ====== Mobile FAB ====== */
.fab {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 50;
}
@media (min-width: 768px) {
    .fab {
        display: none;
    }
}

.post__thumb {
    position: relative;
    overflow: hidden;
}

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

/* 投稿カードのサムネ枠：比率固定＋ダミー表示 */
.post__thumb {
    display: block;
    position: relative;
    overflow: hidden;

    /* ここで高さを作る（＝アイキャッチ無しでもダミーが見える） */
    aspect-ratio: 16 / 10;

    /* アイキャッチ無しのときのダミー（グラデ） */
    background: linear-gradient(135deg, #f0f9ff, #ecfdf5, #fff7ed);
}

/* 入ってきたimgを枠いっぱいにトリミング */
.post__thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* スマホは少し縦長にして見やすく（好みで） */
@media (max-width: 640px) {
    .post__thumb {
        aspect-ratio: 16 / 11;
    }
}

/* メディア掲載用チップ */
.chip--media {
    border-color: #c7d2fe; /* indigo-200 */
    background: #eef2ff; /* indigo-50 */
    color: #3730a3; /* indigo-800 */
}

/* ===== Single 2-col layout ===== */
.two-col {
    display: grid;
    gap: 1rem;
}
@media (min-width: 1024px) {
    .two-col {
        grid-template-columns: 1fr 320px;
        align-items: start;
        gap: 1.25rem;
    }
}

.single {
    border-radius: 28px;
    border: 1px solid #e2e8f0;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
    padding: 1.25rem;
}
@media (min-width: 768px) {
    .single {
        padding: 1.5rem;
    }
}

.single__meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.single__title {
    margin-top: 0.75rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1.2;
    font-size: 1.6rem;
}
@media (min-width: 768px) {
    .single__title {
        font-size: 2rem;
    }
}

/* 個別ページ：アイキャッチは「切らずに」元の縦横比で表示 */
.single__thumb {
    margin-top: 1rem;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    /* aspect-ratio を使わない（=画像比率に従う） */
}

.single__thumb-img {
    width: 100%;
    height: auto; /* ここが肝：画像の比率を保つ */
    display: block;
    object-fit: contain; /* 念のため。height:autoなら基本不要 */
}

.single__content {
    margin-top: 1rem;
}
.single__foot {
    margin-top: 1rem;
    display: flex;
    justify-content: flex-end;
}

/* ===== Content (post body) basic styling ===== */
.content {
    color: #1e293b;
}
.content p {
    line-height: 2;
    margin: 0.9em 0;
    color: #334155;
}
.content h2 {
    margin: 1.2em 0 0.5em;
    font-size: 1.35rem;
    font-weight: 900;
}
.content h3 {
    margin: 1.1em 0 0.4em;
    font-size: 1.1rem;
    font-weight: 900;
}
.content ul {
    margin: 0.8em 0 0.8em 1.2em;
    line-height: 1.9;
    color: #334155;
}
.content a {
    color: #7c2d12;
    font-weight: 800;
    text-decoration: underline;
}
.content img {
    border-radius: 16px;
}

/* ===== Sidebar ===== */
.sidebar {
    display: grid;
    gap: 1rem;
}
@media (min-width: 1024px) {
    .sidebar {
        position: sticky;
        top: 90px;
    }
}

.side-item {
    display: block;
    padding: 0.75rem;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease;
    margin-top: 0.5rem;
}
.side-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.1);
}
.side-item__title {
    display: block;
    font-size: 0.9rem;
    font-weight: 900;
    color: #0f172a;
    line-height: 1.4;
}
.side-item__meta {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: #64748b;
}

.side-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Mobile menu button */
.menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 999px;
    border: 1px solid var(--slate-200);
    background: rgba(255, 255, 255, 0.85);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
}
@media (min-width: 768px) {
    .menu-btn {
        display: none;
    }
}

/* モバイルではヘッダーCTAを非表示 */
@media (max-width: 767px) {
    .site-header__actions .btn {
        display: none;
    }
}

/* ===== Instagram Section Fix ===== */

/* Instagramセクションで流れを一旦切る */
#sb_instagram {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--slate-200);
}

/* Smash Balloonの中央寄せを封じ込める */
#sb_instagram {
    text-align: center;
}

/* 見出し・文章側には影響させない */
.section-head,
.section-head * {
    text-align: left;
}

/* Instagram内部のカードだけ整える */
#sb_instagram .sbi_item {
    border-radius: 16px;
    overflow: hidden;
}

/* About：団体概要の見せ方 */
.kv {
    margin: 1rem 0 0;
    display: grid;
    gap: 0.75rem;
}
.kv__row {
    display: grid;
    gap: 0.25rem;
    padding: 0.75rem;
    border-radius: 16px;
    border: 1px solid var(--slate-200);
    background: #fff;
    box-shadow: var(--shadow-sm);
}
@media (min-width: 768px) {
    .kv__row {
        grid-template-columns: 180px 1fr;
        align-items: baseline;
        gap: 1rem;
    }
}
.kv__key {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 900;
    color: var(--slate-600);
}
.kv__val {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--slate-800);
}

/* ===== About Intro (logo + text) ===== */
.about-intro {
    margin-top: 1.5rem;
}

.about-intro__inner {
    display: grid;
    gap: 1.25rem;
}

@media (min-width: 768px) {
    .about-intro__inner {
        grid-template-columns: 160px 1fr;
        align-items: flex-start;
        gap: 1.75rem;
    }
}

.about-intro__logo {
    display: flex;
    justify-content: center;
}

.about-intro__logo img {
    width: 120px;
    height: auto;
}

@media (min-width: 768px) {
    .about-intro__logo img {
        width: 140px;
    }
}

.about-intro__text {
    font-size: 0.95rem;
    line-height: 2;
    color: var(--slate-700);
}

.about-intro__text p {
    margin: 0 0 1em;
}

.about-intro__text .lead {
    font-weight: 700;
}

.about-intro__text .catch {
    margin-top: 1.25rem;
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: -0.01em;
}

.about-intro__text .catch span {
    color: var(--orange-600);
}

/* About：ロゴ説明ブロックと次セクションの間を空ける */
.about-intro {
    margin-bottom: 3rem; /* ← ここが一番効く */
}
.about-intro::after {
    content: "";
    display: block;
    margin-top: 3rem;
    height: 1px;
    background: var(--slate-200);
    opacity: 0.6;
}

/* Aboutのロゴが二重に出る場合の応急処置 */
.about-intro__logo img + img {
    display: none;
}

/* ロゴ説明と団体概要の間をしっかり切る */
.about-intro {
    margin-bottom: 3.25rem;
}

.about-intro::after {
    content: "";
    display: block;
    margin-top: 2.5rem;
    height: 1px;
    background: var(--slate-200);
    opacity: 0.6;
}

/* ===== About: パネル同士の間隔を統一 ===== */
/* section.panel が連続したら、次のpanelに余白を付ける */
.page .panel + .panel {
    margin-top: 24px;
}

@media (min-width: 768px) {
    .page .panel + .panel {
        margin-top: 28px;
    }
}

/* 見出しと中身が詰まって見える場合の微調整（好み） */
.page .panel h2 {
    margin: 0 0 12px;
}
.page .panel p,
.page .panel ul,
.page .panel dl {
    margin: 0;
}
.page .panel ul {
    padding-left: 1.2em;
}

/* ===== Contact Page ===== */
.contact-hero {
    background: linear-gradient(
        135deg,
        var(--orange-50),
        #fff,
        var(--slate-50)
    );
    border: 1px solid rgba(226, 232, 240, 0.9);
}

.contact-hero__inner {
    display: grid;
    gap: 1.25rem;
}

@media (min-width: 900px) {
    .contact-hero__inner {
        grid-template-columns: 1.3fr 0.7fr;
        align-items: start;
        gap: 1.5rem;
    }
}

.contact-hero__title {
    margin: 0.75rem 0 0;
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1.15;
    font-size: 2rem;
}
@media (max-width: 640px) {
    .contact-hero__title {
        font-size: 1.55rem;
    }
}

.contact-hero__lead {
    margin: 0.75rem 0 0;
    color: var(--slate-700);
    line-height: 2;
}

.contact-hero__tips {
    margin-top: 1rem;
    display: grid;
    gap: 0.75rem;
}
@media (min-width: 768px) {
    .contact-hero__tips {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.tip {
    border-radius: 16px;
    border: 1px solid var(--slate-200);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: var(--shadow-sm);
    padding: 0.9rem;
}
.tip b {
    display: block;
    font-weight: 900;
}
.tip p {
    margin: 0.35rem 0 0;
    color: var(--slate-600);
    line-height: 1.8;
    font-size: 0.9rem;
}

.contact-hero__side {
    display: grid;
    gap: 0.75rem;
}
.mini-card {
    border-radius: 16px;
    border: 1px solid var(--slate-200);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: var(--shadow-sm);
    padding: 0.9rem;
}

.contact-form .input,
.contact-form .textarea {
    background: #fff;
}

.contact-form__note {
    margin-top: 0.5rem;
}

.faq {
    display: grid;
    gap: 0.75rem;
    margin-top: 0.75rem;
}
.faq__item {
    border-radius: 16px;
    border: 1px solid var(--slate-200);
    background: #fff;
    box-shadow: var(--shadow-sm);
    padding: 0.75rem 1rem;
}
.faq__item summary {
    cursor: pointer;
    font-weight: 900;
    color: var(--slate-800);
}
.faq__item p {
    margin: 0.6rem 0 0;
    line-height: 1.9;
}

.cta--contact {
    margin: 0;
}

/* ===== Contact 2-col ===== */
.two-col--contact {
    margin-top: 1.25rem;
}

/* 右カラムの“sticky”が強すぎる場合に備えて、contactだけ少し緩める */
@media (min-width: 1024px) {
    .two-col--contact .contact-side {
        top: 88px;
    }
}

.contact-form-panel .contact-h2,
.contact-side .contact-h2 {
    margin: 0 0 0.5rem;
    font-size: 1.1rem;
    font-weight: 900;
    letter-spacing: -0.01em;
}

.contact-lead {
    margin: 0 0 1rem;
}

/* 右側のカード群 */
.contact-side__stack {
    display: grid;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.mini-card {
    border-radius: 16px;
    border: 1px solid var(--slate-200);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: var(--shadow-sm);
    padding: 0.9rem;
}
.mini-card b {
    display: block;
    font-weight: 900;
}
.mini-card p {
    margin: 0.35rem 0 0;
    line-height: 1.9;
}

/* フォーム周りの見た目だけ少し整える */
.contact-form .input,
.contact-form .textarea {
    background: #fff;
}

/* 送信ボタンが変な位置に飛ぶ対策（他CSSの影響を封じる） */
.contact-form .form__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.contact-form .form__foot .btn {
    margin: 0;
}
/* ===== Page common ===== */
.page-head {
    margin-bottom: 1.25rem;
}
.page-title {
    margin: 0.5rem 0 0;
    font-size: 2rem;
    font-weight: 900;
    letter-spacing: -0.02em;
}
.page-lead {
    margin-top: 0.5rem;
    max-width: 70ch;
    color: var(--slate-600);
    line-height: 1.9;
    font-size: 0.95rem;
}

/* ===== Contact page tweak ===== */
.contact-main {
    padding: 1.25rem;
}
.contact-side .panel + .panel {
    margin-top: 1rem;
}

/* “相談する”が変な位置に行くときの保険（ヘッダー内の並びを固定） */
.site-header__actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ===== Contact Form 7 spacing fix ===== */
.wpcf7 form p {
    margin: 0 0 0.9rem; /* pの下余白を小さく */
}

.wpcf7 form br {
    display: none; /* CF7が入れるbrを殺して密度を上げる */
}

.wpcf7 .field {
    display: grid; /* ラベル→入力の間隔をgapで管理 */
    gap: 0.5rem;
    margin: 0; /* 余計な間隔を消す */
}

.wpcf7 label {
    margin: 0;
}

.wpcf7 .wpcf7-form-control-wrap {
    display: block; /* inline由来の変な余白を防ぐ */
}

.wpcf7 .input,
.wpcf7 .textarea,
.wpcf7 select.input {
    margin-top: 0; /* 既存 .input の margin-top を無効化してgapに一本化 */
}

/* contactページだけ、フォームパネルを少し締める（必要なら） */
.page-id-XXX .panel {
    /* XXXはcontact固定ページIDに置き換え */
    padding: 1.1rem;
}
@media (min-width: 768px) {
    .page-id-XXX .panel {
        padding: 1.25rem;
    }
}

/* ===== Contact page spacing fix ===== */

/* Contact Form 7 / Understrap が吐く <p> の余白を消す（余白が広い原因の本丸） */
.contact-form p,
.wpcf7-form p {
    margin: 0;
}

/* label をブロック化して “項目間の間隔” をこちらで管理 */
.contact-form .field,
.wpcf7-form label {
    display: block;
    margin-top: 14px;
}
.contact-form .field:first-child,
.wpcf7-form label:first-child {
    margin-top: 0;
}

/* 入力欄の上のラベル（span）と入力欄の距離を詰める */
.contact-form .field span {
    margin-bottom: 6px;
}

/* フォーム下のボタン群：左右に散らばらない＆変な位置に行かない */
.form__foot {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: flex-start; /* ← space-between をやめる */
    align-items: center;
}

/* ボタンの余白を少し小さく（ヘッダー/フォームで暴れにくい） */
.form__foot .btn,
.site-header__actions .btn {
    padding: 0.75rem 1rem;
}

/* 「トップへ戻る」等のリンクもボタン同様に扱う */
.form__foot a.btn {
    display: inline-flex;
}

/* 右カラムのパネル同士がくっつく問題を防ぐ */
.sidebar .panel + .panel {
    margin-top: 1rem;
}

/* 相談する（FAB）が左下に行くのを防ぐ保険 */
.fab {
    left: auto !important;
    right: 1rem !important;
    bottom: 1rem !important;
}

/* ===== Header menu centering ===== */

/* 3カラム化：左(ロゴ) / 中(ナビ) / 右(CTA) */
@media (min-width: 768px) {
    .site-header__inner {
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: 1rem;
    }

    /* 中央カラムを使ってナビを中央寄せ */
    .site-nav {
        display: flex; /* 既にflexでもOK */
        justify-content: center; /* ←これが効く */
        gap: 0.5rem;
    }

    /* 右は右寄せ（念のため） */
    .site-header__actions {
        justify-self: end;
    }
}

/* CTAパーツがcontainer外でも暴れない保険 */
.cta-talk {
    max-width: 72rem;
    margin-left: auto;
    margin-right: auto;
}