/**
 * 自動車ローンLP — block-editor stylesheet (SWELL child theme)
 *
 * Ported from the original classic theme's assets/css/main.css and adapted to
 * the block markup produced by the "自動車ローンLP" block pattern.
 *
 * Everything is scoped under .loan-lp (the pattern's outermost group block) so
 * it renders identically on the front end and inside the block editor canvas,
 * and never leaks into the rest of a SWELL site.
 *
 * Image paths are relative to this file (assets/css/) and resolve into the
 * assets/carhoo and assets/clone folders copied from the source theme.
 */

.loan-lp {
    --blue: #0068b7;
    --blue-deep: #004b8f;
    --blue-soft: #e8f6ff;
    --blue-line: #d8dee5;
    --border-dark: #252b33;
    --border-soft: #cfd6de;
    --panel-soft: #f3f6f8;
    --red: #d30d30;
    --yellow: #ffe66d;
    --text: #24313a;
    --muted: #5b6872;
    --white: #fff;
    --bg: #f7fbff;
    --shadow: 0 18px 42px rgba(18, 24, 32, 0.12);

    /* Break out of SWELL's constrained LP content width to a full-bleed page,
       regardless of the LP post's "content width" setting. */
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);

    background: var(--bg);
    color: var(--text);
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.8;
    letter-spacing: 0;
}

.loan-lp *,
.loan-lp *::before,
.loan-lp *::after {
    box-sizing: border-box;
}

/* ---- Block-editor compatibility resets ------------------------------------ */
/* On classic themes without a theme.json (SWELL), WordPress injects a legacy
   `.wp-block-group__inner-container` wrapper around every group's children at
   render time. That wrapper would become the sole child of our grid/flex
   containers and collapse every multi-column layout. `display: contents`
   removes the wrapper box from layout so the real children participate again.
   In the block editor (where no wrapper exists) this rule simply matches
   nothing, so front end and editor stay identical. */
.loan-lp .wp-block-group__inner-container {
    display: contents;
}

/* Neutralise the default vertical block spacing / group margins so the ported
   layout controls its own rhythm. */
.loan-lp .wp-block-group,
.loan-lp .wp-block-image,
.loan-lp .wp-block-heading,
.loan-lp p,
.loan-lp figure {
    margin: 0;
}

.loan-lp .wp-block-group.hero__inner > *,
.loan-lp .rank-card__top > *,
.loan-lp .recommend-card__main > * {
    margin: 0;
}

.loan-lp img {
    display: block;
    max-width: 100%;
    height: auto;
}

.loan-lp a {
    color: inherit;
    text-decoration: none;
}

.loan-lp .lp-container {
    width: min(100% - 32px, 1040px);
    margin-inline: auto;
}

/* ---- Header --------------------------------------------------------------- */
.loan-lp .site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 12px clamp(16px, 4vw, 48px);
    border-bottom: 1px solid rgba(18, 24, 32, 0.14);
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(12px);
}

.loan-lp .site-header__brand img {
    width: 210px;
}

.loan-lp .site-header__nav {
    display: flex;
    gap: 22px;
    margin: 0;
    color: var(--blue-deep);
    font-size: 14px;
    font-weight: 800;
}

/* ---- Hero ----------------------------------------------------------------- */
.loan-lp .hero {
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(232, 246, 255, 0.92)),
        url("../clone/img/bbg.jpg") repeat;
}

.loan-lp .hero__inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 480px);
    gap: 32px;
    width: min(100% - 32px, 1180px);
    min-height: 640px;
    margin-inline: auto;
    padding: 72px 0 62px;
    align-items: center;
}

.loan-lp .hero__copy {
    position: relative;
    z-index: 2;
    display: block;
}

.loan-lp .hero__eyebrow {
    display: inline-flex;
    margin: 0 0 18px;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--red);
    color: var(--white);
    font-size: 14px;
    font-weight: 900;
}

.loan-lp .hero__title {
    max-width: 700px;
    margin: 0;
    color: var(--blue-deep);
    font-size: clamp(42px, 6vw, 74px);
    line-height: 1.05;
}

.loan-lp .hero__lead {
    max-width: 640px;
    margin: 24px 0 0;
    color: var(--muted);
    font-size: 19px;
    font-weight: 700;
}

.loan-lp .hero__points {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px;
}

.loan-lp .hero__points span {
    padding: 10px 14px;
    border: 2px solid var(--blue-line);
    border-radius: 999px;
    background: var(--white);
    color: var(--blue-deep);
    font-weight: 900;
    box-shadow: 0 8px 18px rgba(18, 24, 32, 0.08);
}

.loan-lp .hero__visual {
    position: relative;
    min-height: 430px;
}

.loan-lp .hero__car {
    position: absolute;
    right: 20px;
    bottom: 24px;
    width: min(48vw, 620px);
    max-width: none;
}

.loan-lp .hero__person {
    position: absolute;
    right: -10px;
    bottom: 0;
    width: min(21vw, 270px);
}

/* ---- Catch ---------------------------------------------------------------- */
.loan-lp .catch,
.loan-lp .recommend {
    background: #eef8ff url("../clone/img/bbg.jpg") repeat top center;
}

.loan-lp .catch {
    padding: 64px 0 42px;
}

.loan-lp .catch .lp-container {
    display: grid;
    gap: 48px;
}

.loan-lp .catch__text {
    width: 100%;
}

/* ---- Section headings ----------------------------------------------------- */
.loan-lp .ranking,
.loan-lp .faq {
    padding: 68px 0;
    background: var(--white);
}

.loan-lp .section-head {
    margin-bottom: 36px;
    text-align: center;
}

.loan-lp .section-head p {
    margin: 0 0 8px;
    color: var(--red);
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
}

.loan-lp .section-head h2 {
    margin: 0;
    color: var(--blue-deep);
    font-size: clamp(28px, 4vw, 44px);
    line-height: 1.25;
}

.loan-lp .section-head::after {
    content: "";
    display: block;
    width: min(180px, 44vw);
    height: 8px;
    margin: 18px auto 0;
    border-radius: 999px;
    background:
        linear-gradient(90deg, var(--red) 0 28%, transparent 28% 36%, var(--yellow) 36% 62%, transparent 62% 70%, var(--border-dark) 70% 100%);
}

/* ---- Ranking cards -------------------------------------------------------- */
.loan-lp .rank-card {
    position: relative;
    margin-top: 124px;
    padding: 38px 30px 30px;
    border: 3px solid var(--border-dark);
    border-top-width: 10px;
    border-radius: 8px;
    background: var(--white);
    box-shadow: var(--shadow);
}

.loan-lp .rank-card__badge {
    position: absolute;
    top: -116px;
    right: 30px;
    width: 118px;
    z-index: 1;
    pointer-events: none;
}

.loan-lp .rank-card__top {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 28px;
    align-items: start;
}

.loan-lp .rank-card__thumb {
    width: 100%;
    border-radius: 4px;
}

.loan-lp .rank-card__body {
    padding-right: 128px;
}

.loan-lp .rank-card__body h3 {
    display: inline;
    margin: 0;
    padding-bottom: 4px;
    border-bottom: 8px solid var(--blue-line);
    color: var(--blue);
    font-size: 28px;
    line-height: 1.35;
}

.loan-lp .rank-card--first .rank-card__body h3 {
    border-bottom-color: var(--yellow);
    color: var(--red);
}

.loan-lp .rank-card__body p {
    margin: 24px 0 0;
    color: var(--muted);
    font-weight: 600;
}

.loan-lp .rank-card__body strong {
    background: linear-gradient(transparent 62%, var(--yellow) 0);
    color: var(--text);
}

.loan-lp .spec-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin: 30px 0;
}

.loan-lp .spec-grid div {
    display: grid;
    grid-template-rows: auto 1fr;
}

.loan-lp .spec-grid dt,
.loan-lp .spec-grid dd {
    display: grid;
    min-height: 56px;
    place-items: center;
    margin: 0;
    padding: 10px;
    text-align: center;
    font-size: 14px;
    font-weight: 800;
}

.loan-lp .spec-grid dt {
    background: var(--border-soft);
}

.loan-lp .spec-grid dd {
    background: var(--panel-soft);
    color: var(--border-dark);
}

.loan-lp .rank-card--first .spec-grid dt {
    background: var(--yellow);
}

.loan-lp .rank-card--first .spec-grid dd {
    background: #fff6f8;
    color: var(--red);
}

/* ---- CTA groups + SWELL buttons ------------------------------------------- */
/* The CTAs are native SWELL buttons (loos/button). Because that block does not
   accept a custom className, we scope the look through the surrounding groups
   so it is fully self-contained (independent of the SWELL customizer palette). */
.loan-lp .cta-group {
    display: grid;
    gap: 12px;
    justify-items: center;
    margin-top: 18px;
    text-align: center;
}

.loan-lp .cta-group p {
    margin: 0;
    color: var(--text);
    font-size: 14px;
    font-weight: 800;
}

.loan-lp .cta-group .swell-block-button {
    width: 100%;
    margin: 0;
}

.loan-lp .cta-group .swell-block-button__link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: min(100%, 680px);
    margin-inline: auto;
    padding: 18px 28px;
    border-radius: 999px;
    font-size: clamp(16px, 2.4vw, 20px);
    font-weight: 900;
    line-height: 1.3;
    color: var(--white);
    box-shadow: 0 14px 28px rgba(211, 13, 48, 0.28);
    transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease;
}

/* Primary "公式サイト" link CTA — red gradient */
.loan-lp .cta-link .swell-block-button__link {
    background: linear-gradient(135deg, #ff2d55, var(--red));
}

/* Telephone CTA — blue gradient */
.loan-lp .cta-tel .swell-block-button__link {
    background: linear-gradient(135deg, #1e9be0, var(--blue));
    box-shadow: 0 14px 28px rgba(0, 104, 183, 0.28);
}

.loan-lp .cta-group .swell-block-button__link:hover {
    transform: translateY(-2px);
    filter: brightness(1.04);
}

/* ---- Recommend ------------------------------------------------------------ */
.loan-lp .recommend {
    padding: 68px 0;
}

.loan-lp .recommend-card {
    position: relative;
    padding: 30px;
    border: 3px solid var(--border-dark);
    border-top-width: 10px;
    border-radius: 8px;
    background: var(--white);
    box-shadow: var(--shadow);
}

.loan-lp .recommend-card__badge {
    position: absolute;
    top: -44px;
    right: 20px;
    width: 132px;
}

.loan-lp .recommend-card__main {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 28px;
    align-items: start;
}

.loan-lp .recommend-card__main img {
    border-radius: 4px;
}

.loan-lp .recommend-card h3 {
    margin: 0;
    color: var(--blue);
    font-size: 30px;
}

.loan-lp .recommend-card p {
    margin: 16px 0 0;
    color: var(--muted);
    font-weight: 600;
}

.loan-lp .reason-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 30px 0;
}

.loan-lp .reason-grid div {
    min-height: 112px;
    padding: 18px;
    border: 2px solid var(--border-soft);
    border-radius: 8px;
    background: var(--panel-soft);
}

.loan-lp .reason-grid strong {
    display: block;
    color: var(--red);
    font-size: 13px;
    font-weight: 900;
}

.loan-lp .reason-grid span {
    display: block;
    margin-top: 6px;
    color: var(--blue-deep);
    font-size: 18px;
    font-weight: 900;
}

/* ---- FAQ (SWELL native loos/faq block, restyled to the original UI) -------- */
/* Structure: dl.swell-block-faq > div.swell-block-faq__item > (dt.faq_q, dd.faq_a).
   We keep the SWELL block (native editing + FAQ JSON-LD) but override its default
   look to reproduce the original bordered Q/A cards with round Q/A badges. */
.loan-lp .faq .swell-block-faq {
    display: grid;
    gap: 16px;
    margin: 0;
}

.loan-lp .faq .swell-block-faq__item {
    margin: 0;
}

/* SWELL adds margin between consecutive items; the grid gap handles that here. */
.loan-lp .faq .swell-block-faq__item + .swell-block-faq__item {
    margin-top: 0;
}

/* Question box (top half of the card) */
.loan-lp .faq .faq_q {
    position: relative;
    margin: 0;
    padding: 20px 24px 18px 64px;
    border: 3px solid var(--border-dark);
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
    background: var(--white);
    color: var(--blue-deep);
    font-size: 18px;
    font-weight: 900;
    line-height: 1.6;
    box-shadow: 0 10px 24px rgba(18, 24, 32, 0.1);
}

.loan-lp .faq .faq_q::before {
    content: "Q";
    position: absolute;
    top: 18px;
    left: 22px;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--border-dark);
    box-shadow: none;
    color: var(--white);
    font-family: inherit;
    font-size: 16px;
    font-weight: 900;
    line-height: 1;
}

/* Answer box (bottom half of the card) */
.loan-lp .faq .faq_a {
    position: relative;
    margin: 0;
    padding: 18px 24px 20px 64px;
    border: 3px solid var(--border-dark);
    border-top: 0;
    border-radius: 0 0 8px 8px;
    background: var(--panel-soft);
    color: var(--muted);
    font-weight: 600;
    line-height: 1.8;
    box-shadow: var(--shadow);
}

.loan-lp .faq .faq_a::before {
    content: "A";
    position: absolute;
    top: 18px;
    left: 22px;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--red);
    box-shadow: none;
    color: var(--white);
    font-family: inherit;
    font-size: 16px;
    font-weight: 900;
    line-height: 1;
}

/* ---- Footer --------------------------------------------------------------- */
.loan-lp .lp-footer {
    display: grid;
    gap: 8px;
    justify-items: center;
    padding: 26px 16px;
    background: #121820;
    color: #eef3f7;
    font-size: 13px;
}

.loan-lp .lp-footer p {
    margin: 0;
}

.loan-lp .lp-footer a {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---- Responsive ----------------------------------------------------------- */
@media (max-width: 900px) {
    .loan-lp .site-header__nav {
        display: none;
    }

    .loan-lp .hero__inner,
    .loan-lp .rank-card__top,
    .loan-lp .recommend-card__main {
        grid-template-columns: 1fr;
    }

    .loan-lp .rank-card__body {
        padding-right: 0;
    }

    .loan-lp .hero__visual {
        min-height: 260px;
    }

    .loan-lp .hero__car {
        left: 0;
        right: auto;
        width: min(92vw, 620px);
    }

    .loan-lp .hero__person {
        right: 4%;
        width: min(34vw, 220px);
    }

    .loan-lp .spec-grid,
    .loan-lp .reason-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .loan-lp {
        font-size: 15px;
    }

    .loan-lp .lp-container,
    .loan-lp .hero__inner {
        width: min(100% - 24px, 560px);
    }

    .loan-lp .site-header {
        padding: 12px;
    }

    .loan-lp .site-header__brand img {
        width: 178px;
    }

    .loan-lp .hero__inner {
        min-height: 0;
        padding: 42px 0 38px;
    }

    .loan-lp .hero__title {
        font-size: 38px;
    }

    .loan-lp .hero__lead {
        font-size: 16px;
    }

    .loan-lp .hero__points span {
        width: 100%;
        text-align: center;
    }

    .loan-lp .hero__visual {
        min-height: 190px;
        margin-top: 8px;
        overflow: hidden;
    }

    .loan-lp .hero__car {
        bottom: 6px;
        width: min(92vw, 520px);
    }

    .loan-lp .hero__person {
        right: 2%;
        bottom: -8px;
        width: min(30vw, 150px);
    }

    .loan-lp .catch,
    .loan-lp .ranking,
    .loan-lp .recommend,
    .loan-lp .faq {
        padding: 44px 0;
    }

    .loan-lp .catch .lp-container {
        gap: 34px;
    }

    .loan-lp .rank-card,
    .loan-lp .recommend-card {
        padding: 22px 16px 24px;
        border-width: 2px;
        border-top-width: 8px;
    }

    .loan-lp .rank-card__badge {
        top: -70px;
        left: 14px;
        right: auto;
        width: 78px;
    }

    .loan-lp .rank-card__body h3,
    .loan-lp .recommend-card h3 {
        display: block;
        font-size: 24px;
    }

    .loan-lp .spec-grid,
    .loan-lp .reason-grid {
        grid-template-columns: 1fr;
    }

    .loan-lp .recommend-card__badge {
        width: 116px;
        top: -40px;
        right: 0;
    }

    .loan-lp .faq .faq_q {
        padding: 18px 16px 16px 54px;
        font-size: 16px;
    }

    .loan-lp .faq .faq_a {
        padding: 16px 16px 18px 54px;
        font-size: 14px;
    }

    .loan-lp .faq .faq_q::before,
    .loan-lp .faq .faq_a::before {
        left: 16px;
        width: 26px;
        height: 26px;
        font-size: 14px;
    }
}