@charset "UTF-8";

/*
 * 不動産売買3ページ 共通ビジュアル調整
 * 賃貸管理 v2 の濃紺・ブルー・淡青・白の階層を踏襲する。
 */
:root {
    --trade-ui-blue: #1364a9;
    --trade-ui-blue-deep: #063b67;
    --trade-ui-blue-dark: #032f51;
    --trade-ui-blue-pale: #eef7fd;
    --trade-ui-blue-soft: #dcecf7;
    --trade-ui-ink: #082f4a;
    --trade-ui-muted: #526b7d;
    --trade-ui-line: #c9dae6;
    --trade-ui-gold: #c1a717;
    --trade-ui-white: #fff;
    --trade-ui-shadow: 0 18px 44px rgba(5, 54, 92, .1);
    --trade-ui-shadow-soft: 0 10px 28px rgba(5, 54, 92, .075);
}

body.page-template-page-trade,
body.page-template-page-trade-sell,
body.page-template-page-trade-buy {
    color: var(--trade-ui-ink);
    background: #f4f8fb;
}

.page-trade .common_page_wrap,
.page-trade-sell .common_page_wrap,
.page-trade-buy .common_page_wrap {
    padding-block: 0 !important;
    background: #f4f8fb;
}

.page-trade :is(.trade-lead-sec, .trade-menu-sec, .trade-faq-sec, .common-lp-cta-sec),
.page-trade-sell :is(.sell-lead-sec, .sell-need-sec, .sell-promise-sec, .sell-method-sec, .sell-flow-sec, .sell-type-sec, .sell-faq-sec, .common-lp-cta-sec),
.page-trade-buy :is(.buy-reason-sec, .buy-flow-sec, .buy-target-sec, .buy-faq-sec, .common-lp-cta-sec) {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-top: 0;
}

.page-trade :is(.trade-lead-sec, .trade-menu-sec, .trade-faq-sec, .common-lp-cta-sec) > .wrap,
.page-trade-sell :is(.sell-lead-sec, .sell-need-sec, .sell-promise-sec, .sell-method-sec, .sell-flow-sec, .sell-type-sec, .sell-faq-sec, .common-lp-cta-sec) > .wrap,
.page-trade-buy :is(.buy-reason-sec, .buy-flow-sec, .buy-target-sec, .buy-faq-sec, .common-lp-cta-sec) > .wrap {
    position: relative;
    z-index: 1;
}

/* 管理トップと同じく、セクション単位で白・淡青・濃紺を明確に切り替える */
.page-trade .trade-lead-sec,
.page-trade-sell :is(.sell-lead-sec, .sell-promise-sec, .sell-faq-sec),
.page-trade-buy .buy-faq-sec {
    background: var(--trade-ui-white);
    box-shadow: inset 0 -1px 0 var(--trade-ui-line);
}

.page-trade .trade-faq-sec,
.page-trade-sell .sell-method-sec {
    background: var(--trade-ui-blue-pale);
    box-shadow: inset 0 1px 0 #c4d9e7, inset 0 -1px 0 #c4d9e7;
}

.page-trade-sell :is(.sell-need-sec, .sell-type-sec),
.page-trade-buy :is(.buy-reason-sec, .buy-target-sec) {
    background: var(--trade-ui-blue-soft);
    box-shadow: inset 0 1px 0 #b7cfdf, inset 0 -1px 0 #b7cfdf;
}

.page-trade .trade-menu-sec,
.page-trade-sell .sell-flow-sec,
.page-trade-buy .buy-flow-sec {
    background: var(--trade-ui-blue-deep);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 -1px 0 #022c4c;
}

/* 見出しは濃紺、英字とラインはブランドブルー・ゴールド */
.page-trade :is(.common-sec-ttl__main, .trade-menu-item__ttl),
.page-trade-sell :is(.common-sec-ttl__main, .common-point__ttl, .common-photo-card__ttl, .sell-method-item__ttl, .common-vstep__ttl),
.page-trade-buy :is(.common-sec-ttl__main, .common-point__ttl, .common-vstep__ttl, .buy-target__item-ttl) {
    color: var(--trade-ui-blue-deep);
}

.page-trade :is(.common-sec-ttl__sub, .trade-menu-item__icon),
.page-trade-sell :is(.common-sec-ttl__sub, .common-point__icon, .sell-method-item__icon),
.page-trade-buy :is(.common-sec-ttl__sub, .common-point__icon, .common-vstep__icon) {
    color: var(--trade-ui-blue);
}

.page-trade .common-sec-ttl__main::after,
.page-trade-sell .common-sec-ttl__main::after,
.page-trade-buy .common-sec-ttl__main::after {
    background: var(--trade-ui-gold);
}

.page-trade :is(.common-sec-ttl__catch, .common-lp-lead__text, .trade-menu-item__text),
.page-trade-sell :is(.common-sec-ttl__catch, .common-lp-lead__text, .common-point__text, .common-photo-card__text, .sell-method-item__text, .common-vstep__text),
.page-trade-buy :is(.common-sec-ttl__catch, .common-point__text, .common-vstep__text) {
    color: var(--trade-ui-muted);
}

/* 濃紺セクションの見出しだけを反転し、白いカード内の文字色は維持する */
.page-trade .trade-menu-sec .common-sec-ttl__main,
.page-trade-sell .sell-flow-sec .common-sec-ttl__main,
.page-trade-buy .buy-flow-sec .common-sec-ttl__main {
    color: var(--trade-ui-white);
}

.page-trade .trade-menu-sec .common-sec-ttl__sub,
.page-trade-sell .sell-flow-sec .common-sec-ttl__sub,
.page-trade-buy .buy-flow-sec .common-sec-ttl__sub {
    color: #83c7f3;
}

.page-trade .trade-menu-sec .common-sec-ttl__catch,
.page-trade-sell .sell-flow-sec .common-sec-ttl__catch,
.page-trade-buy .buy-flow-sec .common-sec-ttl__catch {
    color: #dbeaf4;
}

/* カードの輪郭・影・角丸を v2 の質感へ統一 */
.page-trade .trade-menu__item,
.page-trade-sell :is(.common-photo-card__item, .common-point__item, .sell-method__item, .common-vstep__item, .top-faq__list dl),
.page-trade-buy :is(.common-point__item, .common-vstep__item, .buy-target__item, .buy-faq__item) {
    border: 1px solid rgba(164, 193, 211, .82);
    border-radius: 14px;
    background: rgba(255, 255, 255, .97);
    box-shadow: var(--trade-ui-shadow-soft);
}

.page-trade .trade-menu__item,
.page-trade-sell :is(.common-photo-card__item, .sell-method__item),
.page-trade-buy :is(.common-point__item, .buy-target__item) {
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

@media (hover: hover) {
    .page-trade .trade-menu__item:hover,
    .page-trade-sell :is(.common-photo-card__item, .sell-method__item):hover,
    .page-trade-buy :is(.common-point__item, .buy-target__item):hover {
        border-color: rgba(19, 100, 169, .38);
        box-shadow: var(--trade-ui-shadow);
        transform: translateY(-4px);
    }
}

.page-trade :is(.trade-menu-item__icon, .top-faq__icon),
.page-trade-sell :is(.common-point__icon, .sell-method-item__icon, .top-faq__icon),
.page-trade-buy :is(.common-point__icon, .common-vstep__icon) {
    background: var(--trade-ui-blue-pale);
    color: var(--trade-ui-blue);
}

.page-trade :is(.top-faq__icon),
.page-trade-sell :is(.top-faq__icon),
.page-trade-buy :is(.top-faq__icon) {
    background: var(--trade-ui-blue);
    color: #fff;
}

.page-trade-sell .common-photo-card__img,
.page-trade-buy .buy-target__item-img,
.page-trade .trade-menu-item__img {
    background: #eaf2f7;
}

/* ステップ番号・主要ボタンは青、最後の到達点のみ金で強調 */
.page-trade-sell .common-vstep__num,
.page-trade-buy .common-vstep__num {
    background: var(--trade-ui-blue);
    color: #fff;
}

.page-trade-sell .common-vstep__item.-last .common-vstep__num,
.page-trade-buy .common-vstep__item.-last .common-vstep__num {
    background: var(--trade-ui-gold);
}

.page-trade .trade-menu-item__btn a,
.page-trade-sell .common-lp-anchor__item a,
.page-trade-buy .lp-mv__cta-item.-primary a {
    background: linear-gradient(135deg, var(--trade-ui-blue-deep), var(--trade-ui-blue));
    box-shadow: 0 8px 20px rgba(5, 54, 92, .18);
}

.page-trade-sell .common-lp-anchor__item a {
    border-color: var(--trade-ui-blue-deep);
    color: var(--trade-ui-white);
}

.page-trade-sell .common-lp-anchor__item a:hover {
    border-color: var(--trade-ui-blue-dark);
    background: var(--trade-ui-blue-dark);
    color: var(--trade-ui-white);
}

/* CTAは周囲を濃紺にし、白い相談ボックスを明確な終着点として見せる */
.page-trade .common-lp-cta-sec,
.page-trade-sell .common-lp-cta-sec,
.page-trade-buy .common-lp-cta-sec {
    margin-inline: calc(50% - 50vw);
    padding-inline: calc(50vw - 50%);
    border-top: 4px solid var(--trade-ui-gold);
    background:
        radial-gradient(circle at 84% 15%, rgba(25, 117, 194, .34), transparent 32%),
        linear-gradient(135deg, var(--trade-ui-blue-dark), var(--trade-ui-blue-deep));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}

.page-trade .common-lp-cta__box,
.page-trade-sell .common-lp-cta__box,
.page-trade-buy .common-lp-cta__box {
    border: 1px solid rgba(255, 255, 255, .65);
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 22px 54px rgba(0, 26, 53, .28);
}

.page-trade .common-lp-cta__ttl,
.page-trade-sell .common-lp-cta__ttl,
.page-trade-buy .common-lp-cta__ttl {
    background: linear-gradient(135deg, var(--trade-ui-blue-deep), var(--trade-ui-blue));
    box-shadow: 0 8px 18px rgba(5, 54, 92, .2);
}

.page-trade :is(.common-lp-cta__tel-num, .common-lp-cta__tel-num .color),
.page-trade-sell :is(.common-lp-cta__tel-num, .common-lp-cta__tel-num .color),
.page-trade-buy :is(.common-lp-cta__tel-num, .common-lp-cta__tel-num .color) {
    color: var(--trade-ui-blue-deep);
}

@media (min-width: 901px) {
    .page-trade-sell .sell-lead-sec {
        margin-inline: calc(50% - 50vw);
        padding: 68px calc(50vw - 50%) 64px;
    }

    .page-trade .common-lp-cta-sec,
    .page-trade-sell .common-lp-cta-sec,
    .page-trade-buy .common-lp-cta-sec {
        padding-top: 72px;
        padding-bottom: 72px;
    }

    .page-trade .common-lp-cta__box,
    .page-trade-sell .common-lp-cta__box,
    .page-trade-buy .common-lp-cta__box {
        border-radius: 16px;
    }
}

@media (max-width: 900px) {
    .page-trade :is(.trade-lead-sec, .trade-menu-sec, .trade-faq-sec),
    .page-trade-sell :is(.sell-lead-sec, .sell-need-sec, .sell-promise-sec, .sell-method-sec, .sell-flow-sec, .sell-type-sec, .sell-faq-sec),
    .page-trade-buy :is(.buy-reason-sec, .buy-flow-sec, .buy-target-sec, .buy-faq-sec) {
        border-top: 1px solid rgba(167, 193, 210, .72);
    }

    .page-trade .trade-menu__item,
    .page-trade-sell :is(.common-photo-card__item, .common-point__item, .sell-method__item, .common-vstep__item, .top-faq__list dl),
    .page-trade-buy :is(.common-point__item, .common-vstep__item, .buy-target__item, .buy-faq__item) {
        border-radius: 10px;
        box-shadow: 0 8px 22px rgba(5, 54, 92, .085);
    }

    .page-trade .common-lp-cta-sec,
    .page-trade-sell .common-lp-cta-sec,
    .page-trade-buy .common-lp-cta-sec {
        padding-block: 42px 44px;
        border-top-width: 3px;
    }

    .page-trade .common-lp-cta__box,
    .page-trade-sell .common-lp-cta__box,
    .page-trade-buy .common-lp-cta__box {
        border-radius: 12px;
        box-shadow: 0 14px 32px rgba(0, 26, 53, .24);
    }
}

@media (prefers-reduced-motion: reduce) {
    .page-trade .trade-menu__item,
    .page-trade-sell :is(.common-photo-card__item, .sell-method__item),
    .page-trade-buy :is(.common-point__item, .buy-target__item) {
        transition: none;
    }
}