/*
Theme Name: Lightning Child_ new
Template: lightning
*/



.detail .row div:not(.slider-nav div) {
    line-height: 1.5rem;
    /* margin-top: 0.5rem; */
    padding-top: 5px;
    padding-bottom: 5px;
}

.detail .row div.nb {
    border: 0px solid;
}

.detail .row .d-title {
    font-weight: bold;
    font-size: 100%;
    background-color: rgb(220 238 249);
    border: 1px solid rgb(240 238 249);
    border-collapse: collapse;
}

.detail .row div.d-title+div {
    border: 1px solid rgb(240 238 249);
    border-collapse: collapse;
}

.detail .row .d-h1 {
    border: 0px solid;
    border-left: 3px solid;
    margin-top: 1rem;
    margin-bottom: 1rem;
    font-weight: bold;
    font-size: 170%;
}

.detail .row .d-h0 {
    background-color: rgba(17, 0, 127);
    color: white;
    font-weight: bold;
}

.detail .row .red {
    color: red;
}

.detail .row .bold {
    font-weight: bold;
}

.slider {
    border: #CECEBF 1px solid;
    margin-top: 1rem;
    padding-top: 0px;
}

.slider-nav div.slick-list {
    flex: 1;
    margin-right: 10px;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.slick-slide img {
    margin: auto;
}

.slick_back,
.slick_next {
    display: flex;
    align-items: center;
    cursor: pointer;
    border: #CECEBF 1px solid;
    margin-top: 1rem;
    padding: 0px;
}

.slider div,
.slider-nav div {
    border: 0px solid !important;
}

.slider-nav div:last-child {
    margin-right: 0;
}

.slider-nav div {
    cursor: pointer;
    margin-right: 0.5rem;
    max-width: 11.5%;
    height: 80px;
    aspect-ratio: 1/1;
    border: 1px #EEEEEE solid !important;
}

.slider-nav div:hover {
    border: 1px rgb(254, 108, 108) solid !important;
}

.slider-nav div.active {
    border: 1px red solid !important;
}

.slider-nav div img {
    /* object-fit: cover; */
    aspect-ratio: inherit;
}

.slider-nav li {
    list-style: none;
    margin: 3px;
}

.slider-nav li a {
    width: 11px;
    height: 11px;
    display: block;
    background: #fff;
    cursor: pointer;
    text-indent: -9999px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -o-border-radius: 20px;
    border-radius: 20px;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.slider-nav li a:hover {
    background: #333;
    background: rgba(0, 0, 0, 0.7);
}

.slider-nav {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    background-color: #EEEEEE;
    border: 1px solid #DAD2BD;
    padding: 5px;
    margin-top: 1rem;
}

.flex {
    display: flex;
}

.nears {
    margin: 10px;
    flex-wrap: wrap;
}

.slider-nav li a.active {
    background: #555;
    cursor: default;
}

.nav-center {
    justify-content: center;
}

.nears div {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    border: 0px #666 solid !important;
}

.nears div.facility {
    min-width: 200px;
    width: 24%;
    margin-top: 0.5rem;
    border: 1px #eee solid !important;
    padding: 0.5rem !important;
    margin-left: 1%;
}

.nears div.facility .title {
    font-weight: bold;
    line-height: 2rem;
}

.nears div.facility .distance {
    line-height: 2rem
}

.view_top_new {
    display: flex;
    flex-wrap: wrap;
    /* gap: 1%; */
    /* justify-content:space-between; */
}

.view_top_new .bukkenbox:nth-child(4) {
    display: none;
}


.view_top_new .bukkenbox {
    padding: 1%;
    /* font-size: 0.8rem; */
    line-height: 1.5rem;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
}

.search_result .bukkenbox {
    /* width: 32%; */
    padding: 1%;
    /* font-size: 0.8rem; */
    line-height: 1.5rem;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
}

.bukkenbox .contents {
    margin: 5px;
}

.bukkenbox .borderd_box {
    border: 1px solid #eee;
    height: 100%;
}

.bukkenbox img {
    width: 100%;
    /* height: 190px; */
    padding: 5px;
}

.bukkenbox .syumokucode {
    padding: 0px 10px;
    background: rgb(235 234 234);
    color: rgb(90, 89, 89);
}

.bukkenbox .tatemonoName {
    font-size: 1.2rem;
    color: blue;
}

.staff_comments {
    height: 4.5rem;
}

.bukkenKakaku {
    line-height: 2rem;
    color: #ff3333;
}

.bigkakaku {
    font-size: 1.5rem;
}

.bukken_title {
    font-size: 1.5rem;
}

.gMenu li ul {
    border: 2px solid #5eaaa8;
    border-radius: 5px;
}

.gMenu>li.menu-item-has-children::after {
    border-bottom-color: #5eaaa8;
}

.gMenu li li {
    background-color: white;
}

.gMenu li li a:hover {
    background-color: rgba(94, 170, 168, 0.3);
}

.gMenu li li a {
    color: black;
}

.gMenu li li a:hover {
    color: black;
}

.gMenu>li:hover {
    background-color: white;
}

.search_box {
    /* width: 100%;
    border: 2px solid #5eaaa8;
    border-radius: 10px;
    padding: 10px 0px 0px 0px; */
    /* align-items: stretch; */
}

a.noused_a {
    pointer-events: none;
    color: #333;
}


.search_result {
    display: flex;
    /* gap: 10px; */
    flex-wrap: wrap;
}

.qr_title,
.qr_title2 {
    color: white;
    font-size: 2rem;
    padding-left: 1rem;
}

.qr_title {
    background-color: #5eaaa8;
}

.qr_title2 {
    background-color: #5e5eaa;
}

.qr_other_button button {
    width: 100%;
    font-size: 2rem;
    line-height: 2;
}

.cushion_button_area {
    padding: 1rem;
}

.cushion_button_area button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    width: 100%;
    border-radius: 5px;
    aspect-ratio: 5/3;
    margin: 10px auto;

}

.cushion_button_area i {
    font-size: 5rem;
}

.cushion_button_area .btn-primary {
    color: #fff;
    background-color: #6557c5;
    border-color: #6557c5;
}

.cushion_button_area .btn-primary:hover {
    color: #fff;
    background-color: #5c4da7 !important;
    border-color: #5c4da7 !important;
}

.cushion_button_area a {
    text-decoration: none !important;
}

.cushion_button_area .btn {
    line-height: 1.5;

}

.qr_area,
.qr_area2 {
    border-radius: 5px;
    width: 48%;
    margin: auto;
}

.qr_area {
    border: 2px solid #5eaaa8;
}

.qr_area2 {
    border: 2px solid #5e5eaa;
}

.full-width {
    margin: 0 calc(-50vw + 50%);
}

.page-template-cushion_base .siteContent {
    padding-top: 0px;
}

.flow {}

.flow_inbox {
    display: table;
    border: 1px solid;
    margin-bottom: 3rem;
    width: 100%;
    position: relative;
}

.flow_inbox .number {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    font-size: 4vh;
    line-height: 8vh;
    margin: auto;
    border-right: 1px solid;
    background: rgba(255, 174, 0, 0.8);
    min-height: 8vh;
    width: 8vh;
}

.flow_inbox .index {
    display: table-cell;
    background: rgba(253, 241, 216, 0.8);
    font-size: 4vh;
    font-weight: bold;
    min-height: 8vh;
    line-height: 8vh;
    padding-left: 2vh;
}

.flow_inbox:not(:last-child)::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    left: 50%;
    bottom: -2rem;
    transform: translateX(-50%);
    border-left: 48px solid transparent;
    border-right: 48px solid transparent;
    border-top: 18px solid rgba(0, 0, 0, 0.8);
}

.flow_inbox a {
    display: contents;
}

.flow_detail .right {
    display: block;
    text-align: right;
}

.imaged_area {
    position: relative;
    display: inline-block;

}

.overview {
    opacity: 0.5;
}

.overd_img {
    position: absolute;
    top: 25%;
    left: 0;
}

.inner_nav {
    display: none;
}

.ggap {
    gap: 3%;
}

.inner_menu_list {
    border: 2px solid rgba(0, 0, 0, 0.1);
}

.inner_menu_list h2 {
    border-top: 0px;
    padding: 10px 0px 10px 20px;
    margin-left: 1rem;
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

.inner_menu_list h3 {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding: 10px 0px 10px 20px;
    margin: 1rem 0 1rem 2rem;
    font-size: 1.2rem;
}

.inner_menu_list h3::after {
    border-bottom: 0px;
}

.table-primary {
    background-color: #eb5e0b;
    border-color: #e53e0b;
    color: white;
}

@media screen and (max-width: 991px) {

    .view_top_new {
        /* display: block; */
    }

    .view_top_new .bukkenbox {
        /* width: 98%; */
    }

    .bukkenbox img {
        width: 100%;
        object-fit: contain;
        padding: 5px;
    }

    .navbar-header {
        float: unset;
        display: flex;
        justify-content: space-between;
    }


    .siteHeader_logo {
        margin: 0px;
        padding: 0px;
    }

    .siteHeader_logo img {
        margin: 0px;
    }

    .header_data_area {
        display: none;
    }

    .header_data_area_smart {
        display: flex;
        gap: 1rem;
        padding-left: 30px;
        justify-content: flex-end;
    }

    .header_data_area_smart a {
        display: inline-block;
        padding: 8px;
        border: 2px solid #5eaaa8;
        border-radius: 5px;
        text-align: center;
        text-decoration: none;
        color: black;
        transition: 0.3s;
        font-size: 20px;
    }

    .header_data_area_smart a i {
        display: block;
        margin: 0 auto;
    }

    .vk-mobile-nav-menu-btn {
        left: auto;
        right: 5px;
        border-radius: 5px;
        border: 2px solid #5eaaa8;
        width: 40px;
        height: 39px;
        position: unset;
    }
    /* 要望のため一時的にカット */
    /*
    .inner_nav {
        display: flex;
        justify-content: space-between;
        gap: 1%;
        margin: 1.5em 0 1.2em;
    }
    */
    .inner_nav a {
        width: 32%;
    }

    .inner_nav a button {
        /* border:  2px solid #5eaaa8;
        color: black;
        background:white; */
        font-size: min(2.5vh, 16px);
        width: 100%;
        white-space: nowrap;
    }

    .inner_nav a button.btn-success {
        background-color: #6557c5;
        border-color: #6557c5;
    }

}


/* 例外対応 */
@media screen and (max-width: 300px) {
    .inner_nav {
        flex-wrap: wrap;
    }

    .inner_nav a {
        width: 98%;
        margin: 5px 0;
    }
}

@media screen and (max-width: 768px) {


    .view_top_new .bukkenbox:nth-child(4) {
        display: flex;
    }

    .view_top_new .tatemonoName {
        height: 3rem;
    }

    .search_result .bukkenbox {
        width: 48%;
    }

}

@media screen and (max-width: 576px) {

    .page-header_pageTitle,
    h1.page-header_pageTitle:first-child {
        margin: 0.6em 0;
    }

    .full-width {
        margin: 0 -15px;
    }

    .siteContent {
        padding: 0rem 0 2rem;
    }

    .search_result .bukkenbox {
        width: 98%;
    }

    .d-title {
        padding: 5px 5px;
    }

    .qr_area,
    .qr_area2 {
        border-radius: 5px;
        width: 98%;
        margin: 1rem auto;
    }

}


@media screen and (min-width: 992px) {
    .navbar-header {
        float: unset;
        display: flex;
        justify-content: space-between;
    }

    .gMenu_outer {
        width: 100%;
    }

    .siteHeader_logo {
        float: unset;
        width: auto;
    }

    .siteHeader_logo img {
        margin: 0px;
    }

    .gMenu {
        display: flex;
        width: 100%;
    }

    .gMenu>li {
        width: 20%;
        border: 1px solid #eee;
        text-align: left;
    }

    .acc-btn2 {
        background-image: var(--g_nav_main_acc_icon_open_url);
        display: inherit !important;
        color: #333;
        position: absolute;
        right: 8px;
        top: 8px;
        width: 28px;
        height: 28px;
        border-radius: 2px;
        background-size: 28px 28px;
        cursor: pointer;
        z-index: 1000;
    }

    .header_data_area {
        display: flex;
        gap: 1rem;
        padding-top: 0.3rem;
    }

    .header_data_area_smart {
        display: none;
    }

    .tel_company_info {
        line-height: 50px;
        font-size: 30px;
    }

    .header_contact_wrap {
        height: 50px;
    }

    .header_contact_wrap a {
        padding: 0 19px;
        height: 50px;
        line-height: 50px;
        font-size: 18px;
        font-weight: bold;
        color: #fff;
        text-align: center;
        display: inline-block;
        border-radius: 3px;
        box-shadow: 0 1px 6px rgb(32 33 36 / 28%);
        background-color: #4ea2b2eb;
    }
}
/*
 * 薬師神不動産・暖色アクセント調整
 * 子テーマ style.css の末尾へ、そのまま追加してください。
 *
 * 方針:
 * - 青緑はロゴ、見出し、通常リンク、検索導線に残す
 * - 暖色は無料査定、無料相談、価格、NEW系表示だけに使う
 * - 大きなオレンジ背景は作らない
 */

:root {
    --yj-warm-accent: #b9531e;
    --yj-warm-accent-hover: #8f3f17;
    --yj-warm-accent-pale: #f8eee8;
    --yj-warm-neutral: #f7f5f0;
    --yj-warm-price: #a8441c;
}

/* =========================================================
 * トップページ: ヒーロー内の「無料査定」
 * 「物件検索」は従来どおり白・青緑を維持する
 * ======================================================= */

body.home .yj-front-hero .yj-front-hero__button--appraisal {
    color: #fff;
    background: var(--yj-warm-accent);
    border-color: var(--yj-warm-accent);
    box-shadow: 0 12px 28px rgba(89, 40, 16, 0.3);
}

body.home .yj-front-hero .yj-front-hero__button--appraisal:hover,
body.home .yj-front-hero .yj-front-hero__button--appraisal:focus-visible {
    color: #fff;
    background: var(--yj-warm-accent-hover);
    border-color: var(--yj-warm-accent-hover);
    box-shadow: 0 15px 34px rgba(89, 40, 16, 0.38);
}

body.home .yj-front-hero .yj-front-hero__button--appraisal:focus-visible {
    outline-color: #fff;
}

/* =========================================================
 * トップページ: 「まずは無料査定から」の主ボタン
 * 物件種別カードは青緑のまま残す
 * ======================================================= */

body.home .yj-front-sections .yj-appraisal__button {
    color: #fff;
    background: var(--yj-warm-accent);
    border-color: var(--yj-warm-accent);
    box-shadow: 0 12px 26px rgba(89, 40, 16, 0.24);
}

body.home .yj-front-sections .yj-appraisal__button:hover,
body.home .yj-front-sections .yj-appraisal__button:focus-visible {
    color: #fff;
    background: var(--yj-warm-accent-hover);
    border-color: var(--yj-warm-accent-hover);
    box-shadow: 0 15px 32px rgba(89, 40, 16, 0.32);
}

body.home .yj-front-sections .yj-appraisal__button:focus-visible {
    outline: 3px solid rgba(185, 83, 30, 0.38);
    outline-offset: 3px;
}

/* =========================================================
 * トップページ: 青緑背景の連続を抑える
 * 「最近の取引実績」は淡い青緑のまま残し、
 * 「選ばれる理由」だけ暖かいオフホワイトへ変更する
 * ======================================================= */

body.home .yj-front-sections .yj-reasons {
    background: var(--yj-warm-neutral);
}

body.home .yj-front-sections .yj-reason-card {
    border-color: rgba(185, 83, 30, 0.14);
    box-shadow: 0 16px 38px rgba(71, 55, 45, 0.09);
}

/* アイコン部分は青緑を残し、背景だけ中立色へ寄せる */
body.home .yj-front-sections .yj-reason-card__icon-wrap {
    background:
        radial-gradient(circle at center, #fff 0 34%, transparent 35%),
        linear-gradient(145deg, #f2f5f4, #faf9f6);
}

/* =========================================================
 * トップページ: 売却方法カード内の無料相談リンク
 * 1枚目の「売却の流れを見る」は青緑のまま残す
 * ======================================================= */

body.home .yj-front-sections .yj-method-card:last-child .yj-text-link {
    color: var(--yj-warm-accent);
}

body.home .yj-front-sections .yj-method-card:last-child .yj-text-link:hover,
body.home .yj-front-sections .yj-method-card:last-child .yj-text-link:focus-visible {
    color: var(--yj-warm-accent-hover);
}

/* =========================================================
 * 物件価格
 * トップページ、検索一覧、物件詳細で暖色を統一する
 * ======================================================= */

.bukkenKakaku,
body.home .yj-front-sections .yj-property-grid .bukkenKakaku,
.search_result .bukkenKakaku,
.bukken_detail .bukkenKakaku {
    color: var(--yj-warm-price);
}

.bigkakaku,
body.home .yj-front-sections .yj-property-grid .bigkakaku {
    color: inherit;
    font-weight: 900;
}

/* =========================================================
 * NEW、価格変更などの強調表示
 * 対象HTMLで以下のクラスを使用した場合に適用される
 * ======================================================= */

.yj-badge--new,
.yj-badge--price,
.yj-price-change {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    color: #fff;
    background: var(--yj-warm-accent);
    border: 1px solid var(--yj-warm-accent);
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 900;
    line-height: 1.4;
}

/* =========================================================
 * 「貸すときの流れ」末尾の無料相談CTA
 * タイムライン番号や見出しは青緑のまま残す
 * ======================================================= */

body.post-name-rent_for_flow .yj-flow-cta .yj-flow-cta__button {
    color: #fff;
    background: var(--yj-warm-accent);
    border-color: var(--yj-warm-accent);
    box-shadow: 0 10px 24px rgba(89, 40, 16, 0.25);
}

body.post-name-rent_for_flow .yj-flow-cta .yj-flow-cta__button:hover,
body.post-name-rent_for_flow .yj-flow-cta .yj-flow-cta__button:focus-visible {
    color: #fff;
    background: var(--yj-warm-accent-hover);
    border-color: var(--yj-warm-accent-hover);
    box-shadow: 0 13px 28px rgba(89, 40, 16, 0.34);
}

/* =========================================================
 * お問い合わせ・無料査定フォームの送信ボタン
 * 検索フォームの検索ボタンには適用しない
 * ======================================================= */

body.post-name-contact .mainSection input[type="submit"],
body.post-name-contact .mainSection button[type="submit"],
body.post-name-contact .mainSection .btn-primary,
body.post-name-contact2 .mainSection input[type="submit"],
body.post-name-contact2 .mainSection button[type="submit"],
body.post-name-contact2 .mainSection .btn-primary {
    color: #fff;
    background-color: var(--yj-warm-accent);
    border-color: var(--yj-warm-accent);
}

body.post-name-contact .mainSection input[type="submit"]:hover,
body.post-name-contact .mainSection input[type="submit"]:focus-visible,
body.post-name-contact .mainSection button[type="submit"]:hover,
body.post-name-contact .mainSection button[type="submit"]:focus-visible,
body.post-name-contact .mainSection .btn-primary:hover,
body.post-name-contact .mainSection .btn-primary:focus-visible,
body.post-name-contact2 .mainSection input[type="submit"]:hover,
body.post-name-contact2 .mainSection input[type="submit"]:focus-visible,
body.post-name-contact2 .mainSection button[type="submit"]:hover,
body.post-name-contact2 .mainSection button[type="submit"]:focus-visible,
body.post-name-contact2 .mainSection .btn-primary:hover,
body.post-name-contact2 .mainSection .btn-primary:focus-visible {
    color: #fff;
    background-color: var(--yj-warm-accent-hover);
    border-color: var(--yj-warm-accent-hover);
}

/* =========================================================
 * キーボード操作時の視認性
 * ======================================================= */

.yj-badge--new:focus-visible,
.yj-badge--price:focus-visible,
.yj-price-change:focus-visible {
    outline: 3px solid rgba(185, 83, 30, 0.38);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    body.home .yj-front-hero .yj-front-hero__button--appraisal,
    body.home .yj-front-sections .yj-appraisal__button,
    body.post-name-rent_for_flow .yj-flow-cta .yj-flow-cta__button {
        transition: none;
    }
}

/* =========================================================
 * 流れページ共通コンポーネント
 * sell_flow / buy_flow / rent_flow / rent_for_flow
 * ======================================================= */
:where(.yj-flow-page, .yj-sell-flow, .yj-buy-flow, .yj-rent-flow) {
    --yj-flow-primary: #397d8a;
    --yj-flow-dark: #255d67;
    --yj-flow-brand: #4ea2b2;
    --yj-flow-pale: #eef8fa;
    --yj-flow-line: #d6e6e9;
    --yj-flow-text: #24383d;
    --yj-flow-muted: #5d7075;
    --yj-flow-warm: #c75a24;
    --yj-flow-warm-dark: #a9471a;
    --yj-flow-white: #fff;
    --yj-flow-number-size: 62px;
    color: var(--yj-flow-text);
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

:where(.yj-flow-page, .yj-sell-flow, .yj-buy-flow, .yj-rent-flow),
:where(.yj-flow-page, .yj-sell-flow, .yj-buy-flow, .yj-rent-flow) * {
    box-sizing: border-box;
}

:where(.yj-flow-page, .yj-sell-flow, .yj-buy-flow, .yj-rent-flow)
:is(.yj-flow-page__intro, .yj-sell-flow__intro, .yj-buy-flow__intro, .yj-flow-intro) {
    max-width: 790px;
    margin: 0 auto clamp(42px, 6vw, 70px);
    text-align: center;
}

:where(.yj-flow-page, .yj-sell-flow, .yj-buy-flow, .yj-rent-flow)
:is(.yj-flow-page__kicker, .yj-sell-flow__kicker, .yj-buy-flow__kicker, .yj-flow-kicker,
    .yj-flow-page__section-heading > p, .yj-sell-flow__section-heading > p,
    .yj-buy-flow__section-heading > p, .yj-flow-section-heading > p,
    .yj-flow-page__step-label, .yj-sell-flow__step-label,
    .yj-buy-flow__step-label, .yj-flow-step__kicker,
    .yj-flow-page__cta > div:first-child > p, .yj-sell-flow__cta > div:first-child > p,
    .yj-buy-flow__cta > div:first-child > p, .yj-flow-cta__kicker) {
    margin: 0 0 10px;
    color: var(--yj-flow-primary);
    font-size: .7rem;
    font-weight: 900;
    letter-spacing: .19em;
    line-height: 1.3;
}

:where(.yj-flow-page, .yj-sell-flow, .yj-buy-flow, .yj-rent-flow) h2,
:where(.yj-flow-page, .yj-sell-flow, .yj-buy-flow, .yj-rent-flow) h3 {
    margin: 0;
    padding: 0;
    color: var(--yj-flow-text);
    background: none;
    border: 0;
    font-weight: 900;
    line-height: 1.45;
}

:where(.yj-flow-page, .yj-sell-flow, .yj-buy-flow, .yj-rent-flow) h2::before,
:where(.yj-flow-page, .yj-sell-flow, .yj-buy-flow, .yj-rent-flow) h2::after,
:where(.yj-flow-page, .yj-sell-flow, .yj-buy-flow, .yj-rent-flow) h3::before,
:where(.yj-flow-page, .yj-sell-flow, .yj-buy-flow, .yj-rent-flow) h3::after {
    display: none;
}

:where(.yj-flow-page, .yj-sell-flow, .yj-buy-flow, .yj-rent-flow)
:is(.yj-flow-page__intro, .yj-sell-flow__intro, .yj-buy-flow__intro, .yj-flow-intro) h2 {
    font-size: clamp(1.9rem, 4vw, 2.65rem);
}

:where(.yj-flow-page, .yj-sell-flow, .yj-buy-flow, .yj-rent-flow)
:is(.yj-flow-page__intro, .yj-sell-flow__intro, .yj-buy-flow__intro, .yj-flow-intro) > p:last-child {
    margin: 20px 0 0;
    color: var(--yj-flow-muted);
    font-size: 1rem;
    line-height: 2;
}

:where(.yj-flow-page, .yj-sell-flow, .yj-buy-flow, .yj-rent-flow)
:is(.yj-flow-page__overview, .yj-sell-flow__overview, .yj-buy-flow__overview, .yj-flow-overview) {
    padding: clamp(28px, 5vw, 48px);
    background: radial-gradient(circle at 92% 8%, rgba(78, 162, 178, .13), transparent 28%), var(--yj-flow-white);
    border: 1px solid var(--yj-flow-line);
    border-radius: 24px;
    box-shadow: 0 18px 46px rgba(37, 93, 103, .1);
}

:where(.yj-flow-page, .yj-sell-flow, .yj-buy-flow, .yj-rent-flow)
:is(.yj-flow-page__section-heading, .yj-sell-flow__section-heading,
    .yj-buy-flow__section-heading, .yj-flow-section-heading) {
    margin-bottom: 28px;
}

:where(.yj-flow-page, .yj-sell-flow, .yj-buy-flow, .yj-rent-flow)
:is(.yj-flow-page__section-heading, .yj-sell-flow__section-heading,
    .yj-buy-flow__section-heading, .yj-flow-section-heading) h2 {
    font-size: clamp(1.5rem, 3vw, 2rem);
}

:where(.yj-flow-page, .yj-sell-flow, .yj-buy-flow, .yj-rent-flow)
:is(.yj-flow-page__nav, .yj-sell-flow__nav, .yj-buy-flow__nav, .yj-flow-nav) {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

:is(.yj-flow-page--buy, .yj-buy-flow)
:is(.yj-flow-page__nav, .yj-buy-flow__nav) {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.yj-flow-page--rent .yj-flow-page__nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

:where(.yj-flow-page, .yj-sell-flow, .yj-buy-flow, .yj-rent-flow)
:is(.yj-flow-page__nav a, .yj-sell-flow__nav a, .yj-buy-flow__nav a, .yj-flow-nav__item) {
    display: flex;
    min-width: 0;
    min-height: 82px;
    align-items: center;
    gap: 13px;
    padding: 15px;
    color: var(--yj-flow-text);
    background: var(--yj-flow-pale);
    border: 1px solid transparent;
    border-radius: 14px;
    text-decoration: none;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

:where(.yj-flow-page, .yj-sell-flow, .yj-buy-flow, .yj-rent-flow)
:is(.yj-flow-page__nav a, .yj-sell-flow__nav a, .yj-buy-flow__nav a, .yj-flow-nav__item):hover,
:where(.yj-flow-page, .yj-sell-flow, .yj-buy-flow, .yj-rent-flow)
:is(.yj-flow-page__nav a, .yj-sell-flow__nav a, .yj-buy-flow__nav a, .yj-flow-nav__item):focus-visible {
    color: var(--yj-flow-text);
    background: var(--yj-flow-white);
    border-color: var(--yj-flow-brand);
    box-shadow: 0 12px 26px rgba(37, 93, 103, .12);
    text-decoration: none;
    transform: translateY(-2px);
}

:where(.yj-flow-page, .yj-sell-flow, .yj-buy-flow, .yj-rent-flow)
:is(.yj-flow-page__nav a > span, .yj-sell-flow__nav a > span,
    .yj-buy-flow__nav a > span, .yj-flow-nav__number) {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    place-items: center;
    color: var(--yj-flow-white);
    background: var(--yj-flow-primary);
    border-radius: 50%;
    font-weight: 900;
}

:where(.yj-flow-page, .yj-sell-flow, .yj-buy-flow, .yj-rent-flow)
:is(.yj-flow-page__nav strong, .yj-sell-flow__nav strong,
    .yj-buy-flow__nav strong, .yj-flow-nav__label) {
    min-width: 0;
    font-size: .91rem;
    font-weight: 800;
    line-height: 1.55;
}

:where(.yj-flow-page, .yj-sell-flow, .yj-buy-flow, .yj-rent-flow)
:is(.yj-flow-page__details, .yj-sell-flow__details, .yj-buy-flow__details, .yj-flow-details) {
    margin-top: clamp(70px, 9vw, 112px);
}

:where(.yj-flow-page, .yj-sell-flow, .yj-buy-flow, .yj-rent-flow)
:is(.yj-flow-page__section-heading--center, .yj-sell-flow__section-heading--center,
    .yj-buy-flow__section-heading--center, .yj-flow-section-heading--details) {
    margin-bottom: 38px;
    text-align: center;
}

:where(.yj-flow-page, .yj-sell-flow, .yj-buy-flow, .yj-rent-flow)
:is(.yj-flow-page__timeline, .yj-sell-flow__timeline, .yj-buy-flow__timeline, .yj-flow-timeline) {
    position: relative;
    max-width: 950px;
    margin: 0 auto;
}

:where(.yj-flow-page, .yj-sell-flow, .yj-buy-flow, .yj-rent-flow)
:is(.yj-flow-page__timeline, .yj-sell-flow__timeline, .yj-buy-flow__timeline, .yj-flow-timeline)::before {
    position: absolute;
    top: 31px;
    bottom: 31px;
    left: calc(var(--yj-flow-number-size) / 2);
    width: 2px;
    background: linear-gradient(var(--yj-flow-warm), #ead9cf);
    content: "";
    transform: translateX(-50%);
}

:where(.yj-flow-page, .yj-sell-flow, .yj-buy-flow, .yj-rent-flow)
:is(.yj-flow-page__step, .yj-sell-flow__step, .yj-buy-flow__step, .yj-flow-step) {
    position: relative;
    display: grid;
    grid-template-columns: var(--yj-flow-number-size) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
    scroll-margin-top: 120px;
}

:where(.yj-flow-page, .yj-sell-flow, .yj-buy-flow, .yj-rent-flow)
:is(.yj-flow-page__step, .yj-sell-flow__step, .yj-buy-flow__step, .yj-flow-step)
+ :is(.yj-flow-page__step, .yj-sell-flow__step, .yj-buy-flow__step, .yj-flow-step) {
    margin-top: 26px;
}

:where(.yj-flow-page, .yj-sell-flow, .yj-buy-flow, .yj-rent-flow)
:is(.yj-flow-page__number, .yj-sell-flow__number, .yj-buy-flow__number, .yj-flow-step__number) {
    position: relative;
    z-index: 1;
    display: grid;
    width: var(--yj-flow-number-size);
    height: var(--yj-flow-number-size);
    place-items: center;
    color: var(--yj-flow-white);
    background: var(--yj-flow-warm);
    border: 6px solid var(--yj-flow-white);
    border-radius: 50%;
    box-shadow: 0 7px 18px rgba(169, 71, 26, .2);
    font-weight: 900;
}

:where(.yj-flow-page, .yj-sell-flow, .yj-buy-flow, .yj-rent-flow)
:is(.yj-flow-page__card, .yj-sell-flow__card, .yj-buy-flow__card, .yj-flow-step__card) {
    padding: 28px 30px 24px;
    background: var(--yj-flow-white);
    border: 1px solid var(--yj-flow-line);
    border-radius: 18px;
    box-shadow: 0 13px 32px rgba(37, 93, 103, .08);
}

:where(.yj-flow-page, .yj-sell-flow, .yj-buy-flow, .yj-rent-flow)
:is(.yj-flow-page__card, .yj-sell-flow__card, .yj-buy-flow__card, .yj-flow-step__card) h3 {
    font-size: clamp(1.25rem, 2.5vw, 1.55rem);
}

:where(.yj-flow-page, .yj-sell-flow, .yj-buy-flow, .yj-rent-flow)
:is(.yj-flow-page__card, .yj-sell-flow__card, .yj-buy-flow__card, .yj-flow-step__card)
> p:not(:is(.yj-flow-page__step-label, .yj-sell-flow__step-label, .yj-buy-flow__step-label, .yj-flow-step__kicker)) {
    margin: 14px 0 0;
    color: var(--yj-flow-muted);
    font-size: .95rem;
    line-height: 1.9;
}

:where(.yj-flow-page, .yj-sell-flow, .yj-buy-flow, .yj-rent-flow)
:is(.yj-flow-page__table-wrap, .yj-sell-flow__table-wrap, .yj-buy-flow__table-wrap) {
    max-width: 100%;
    margin-top: 20px;
    overflow-x: auto;
    border: 1px solid var(--yj-flow-line);
    border-radius: 12px;
}

:where(.yj-flow-page, .yj-sell-flow, .yj-buy-flow, .yj-rent-flow) table {
    width: 100%;
    margin: 0;
    border: 0;
    border-collapse: collapse;
    background: var(--yj-flow-white);
    font-size: .88rem;
}

:where(.yj-flow-page, .yj-sell-flow, .yj-buy-flow, .yj-rent-flow) th,
:where(.yj-flow-page, .yj-sell-flow, .yj-buy-flow, .yj-rent-flow) td {
    padding: 13px 15px;
    border: 0;
    border-bottom: 1px solid var(--yj-flow-line);
    text-align: left;
    vertical-align: top;
    white-space: normal;
    line-height: 1.75;
}

:where(.yj-flow-page, .yj-sell-flow, .yj-buy-flow, .yj-rent-flow) thead th {
    color: var(--yj-flow-white);
    background: var(--yj-flow-primary);
}

:where(.yj-flow-page, .yj-sell-flow, .yj-buy-flow, .yj-rent-flow) tbody th {
    width: 30%;
    color: var(--yj-flow-dark);
    background: var(--yj-flow-pale);
}

:where(.yj-flow-page, .yj-sell-flow, .yj-buy-flow, .yj-rent-flow) tbody tr:last-child > * {
    border-bottom: 0;
}

:where(.yj-flow-page, .yj-sell-flow, .yj-buy-flow, .yj-rent-flow)
:is(.yj-flow-page__list, .yj-sell-flow__list, .yj-buy-flow__list) {
    margin: 18px 0 0;
    padding-left: 1.5em;
    color: var(--yj-flow-muted);
    line-height: 1.9;
}

:where(.yj-flow-page, .yj-sell-flow, .yj-buy-flow, .yj-rent-flow)
:is(.yj-flow-page__list, .yj-sell-flow__list, .yj-buy-flow__list) li + li {
    margin-top: 5px;
}

:where(.yj-flow-page, .yj-sell-flow, .yj-buy-flow, .yj-rent-flow)
:is(.yj-flow-page__back, .yj-sell-flow__back, .yj-buy-flow__back, .yj-flow-back) {
    display: block;
    margin-top: 18px;
    color: var(--yj-flow-primary);
    font-size: .78rem;
    font-weight: 800;
    text-align: right;
    text-decoration: none;
}

:where(.yj-flow-page, .yj-sell-flow, .yj-buy-flow, .yj-rent-flow)
:is(.yj-flow-page__back, .yj-sell-flow__back, .yj-buy-flow__back, .yj-flow-back):hover,
:where(.yj-flow-page, .yj-sell-flow, .yj-buy-flow, .yj-rent-flow)
:is(.yj-flow-page__back, .yj-sell-flow__back, .yj-buy-flow__back, .yj-flow-back):focus-visible {
    color: var(--yj-flow-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
}

:where(.yj-flow-page, .yj-sell-flow, .yj-buy-flow, .yj-rent-flow)
:is(.yj-flow-page__cta, .yj-sell-flow__cta, .yj-buy-flow__cta, .yj-flow-cta) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 32px;
    align-items: center;
    margin-top: clamp(70px, 9vw, 112px);
    padding: clamp(30px, 5vw, 48px);
    color: var(--yj-flow-white);
    background: radial-gradient(circle at 88% 15%, rgba(255, 255, 255, .11), transparent 28%), linear-gradient(120deg, var(--yj-flow-dark), var(--yj-flow-primary));
    border-radius: 24px;
    box-shadow: 0 20px 46px rgba(37, 93, 103, .2);
}

:where(.yj-flow-page, .yj-sell-flow, .yj-buy-flow, .yj-rent-flow)
:is(.yj-flow-page__cta, .yj-sell-flow__cta, .yj-buy-flow__cta, .yj-flow-cta) h2 {
    color: var(--yj-flow-white);
    font-size: clamp(1.45rem, 3vw, 2rem);
}

:where(.yj-flow-page, .yj-sell-flow, .yj-buy-flow, .yj-rent-flow)
:is(.yj-flow-page__cta, .yj-sell-flow__cta, .yj-buy-flow__cta, .yj-flow-cta)
:is(span, div > p:last-child) {
    display: block;
    margin-top: 13px;
    color: rgba(255, 255, 255, .82);
    font-size: .9rem;
    line-height: 1.8;
}

:where(.yj-flow-page, .yj-sell-flow, .yj-buy-flow, .yj-rent-flow)
:is(.yj-flow-page__cta-actions, .yj-sell-flow__cta-actions, .yj-buy-flow__cta-actions) {
    display: grid;
    gap: 10px;
    min-width: 220px;
}

:where(.yj-flow-page, .yj-sell-flow, .yj-buy-flow, .yj-rent-flow)
:is(.yj-flow-page__cta-actions a, .yj-sell-flow__cta-actions a,
    .yj-buy-flow__cta-actions a, .yj-flow-cta__button) {
    display: inline-flex;
    min-height: 52px;
    align-items: center;
    justify-content: center;
    padding: 12px 22px;
    border-radius: 9px;
    font-weight: 900;
    text-decoration: none;
    transition: transform .2s ease, background-color .2s ease, color .2s ease;
}

:where(.yj-flow-page, .yj-sell-flow, .yj-buy-flow)
:is(.yj-flow-page__cta-primary, .yj-sell-flow__cta-primary, .yj-buy-flow__cta-primary),
.yj-rent-flow .yj-flow-cta__button {
    color: var(--yj-flow-white);
    background: var(--yj-flow-warm);
    border: 1px solid var(--yj-flow-warm);
}

:where(.yj-flow-page, .yj-sell-flow, .yj-buy-flow)
:is(.yj-flow-page__cta-secondary, .yj-sell-flow__cta-secondary, .yj-buy-flow__cta-secondary) {
    color: var(--yj-flow-dark);
    background: var(--yj-flow-white);
    border: 1px solid var(--yj-flow-white);
}

:where(.yj-flow-page, .yj-sell-flow, .yj-buy-flow, .yj-rent-flow)
:is(.yj-flow-page__cta-actions a, .yj-sell-flow__cta-actions a,
    .yj-buy-flow__cta-actions a, .yj-flow-cta__button):hover,
:where(.yj-flow-page, .yj-sell-flow, .yj-buy-flow, .yj-rent-flow)
:is(.yj-flow-page__cta-actions a, .yj-sell-flow__cta-actions a,
    .yj-buy-flow__cta-actions a, .yj-flow-cta__button):focus-visible {
    text-decoration: none;
    transform: translateY(-2px);
}

@media (max-width: 900px) {
    :is(.yj-flow-page--buy, .yj-buy-flow)
    :is(.yj-flow-page__nav, .yj-buy-flow__nav) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    :where(.yj-flow-page, .yj-sell-flow, .yj-buy-flow, .yj-rent-flow)
    :is(.yj-flow-page__nav, .yj-sell-flow__nav, .yj-buy-flow__nav, .yj-flow-nav) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    :where(.yj-flow-page, .yj-sell-flow, .yj-buy-flow, .yj-rent-flow)
    :is(.yj-flow-page__cta, .yj-sell-flow__cta, .yj-buy-flow__cta, .yj-flow-cta) {
        grid-template-columns: 1fr;
    }

    :where(.yj-flow-page, .yj-sell-flow, .yj-buy-flow)
    :is(.yj-flow-page__cta-actions, .yj-sell-flow__cta-actions, .yj-buy-flow__cta-actions) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    :where(.yj-flow-page, .yj-sell-flow, .yj-buy-flow, .yj-rent-flow) {
        --yj-flow-number-size: 50px;
    }

    :where(.yj-flow-page, .yj-sell-flow, .yj-buy-flow, .yj-rent-flow)
    :is(.yj-flow-page__intro, .yj-sell-flow__intro, .yj-buy-flow__intro, .yj-flow-intro) {
        text-align: left;
    }

    :where(.yj-flow-page, .yj-sell-flow, .yj-buy-flow, .yj-rent-flow)
    :is(.yj-flow-page__intro, .yj-sell-flow__intro, .yj-buy-flow__intro, .yj-flow-intro) > p:last-child {
        font-size: .92rem;
        line-height: 1.85;
    }

    :where(.yj-flow-page, .yj-sell-flow, .yj-buy-flow, .yj-rent-flow)
    :is(.yj-flow-page__overview, .yj-sell-flow__overview, .yj-buy-flow__overview, .yj-flow-overview) {
        padding: 24px 18px;
        border-radius: 18px;
    }

    :where(.yj-flow-page, .yj-sell-flow, .yj-buy-flow, .yj-rent-flow)
    :is(.yj-flow-page__nav, .yj-sell-flow__nav, .yj-buy-flow__nav, .yj-flow-nav) {
        gap: 10px;
    }

    :where(.yj-flow-page, .yj-sell-flow, .yj-buy-flow, .yj-rent-flow)
    :is(.yj-flow-page__nav a, .yj-sell-flow__nav a, .yj-buy-flow__nav a, .yj-flow-nav__item) {
        min-height: 72px;
        gap: 9px;
        padding: 11px;
    }

    :where(.yj-flow-page, .yj-sell-flow, .yj-buy-flow, .yj-rent-flow)
    :is(.yj-flow-page__nav a > span, .yj-sell-flow__nav a > span,
        .yj-buy-flow__nav a > span, .yj-flow-nav__number) {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
        font-size: .88rem;
    }

    :where(.yj-flow-page, .yj-sell-flow, .yj-buy-flow, .yj-rent-flow)
    :is(.yj-flow-page__nav strong, .yj-sell-flow__nav strong,
        .yj-buy-flow__nav strong, .yj-flow-nav__label) {
        font-size: .78rem;
    }

    :where(.yj-flow-page, .yj-sell-flow, .yj-buy-flow, .yj-rent-flow)
    :is(.yj-flow-page__step, .yj-sell-flow__step, .yj-buy-flow__step, .yj-flow-step) {
        gap: 12px;
    }

    :where(.yj-flow-page, .yj-sell-flow, .yj-buy-flow, .yj-rent-flow)
    :is(.yj-flow-page__number, .yj-sell-flow__number, .yj-buy-flow__number, .yj-flow-step__number) {
        border-width: 5px;
        font-size: .9rem;
    }

    :where(.yj-flow-page, .yj-sell-flow, .yj-buy-flow, .yj-rent-flow)
    :is(.yj-flow-page__card, .yj-sell-flow__card, .yj-buy-flow__card, .yj-flow-step__card) {
        padding: 22px 16px 18px;
        border-radius: 15px;
    }

    :where(.yj-flow-page, .yj-sell-flow, .yj-buy-flow, .yj-rent-flow)
    :is(.yj-flow-page__card, .yj-sell-flow__card, .yj-buy-flow__card, .yj-flow-step__card)
    > p:not(:is(.yj-flow-page__step-label, .yj-sell-flow__step-label, .yj-buy-flow__step-label, .yj-flow-step__kicker)),
    :where(.yj-flow-page, .yj-sell-flow, .yj-buy-flow, .yj-rent-flow)
    :is(.yj-flow-page__list, .yj-sell-flow__list, .yj-buy-flow__list) {
        font-size: .88rem;
        line-height: 1.8;
    }

    :where(.yj-flow-page, .yj-sell-flow, .yj-buy-flow, .yj-rent-flow) th,
    :where(.yj-flow-page, .yj-sell-flow, .yj-buy-flow, .yj-rent-flow) td {
        padding: 10px;
        font-size: .78rem;
    }

    :where(.yj-flow-page, .yj-sell-flow, .yj-buy-flow, .yj-rent-flow) tbody th {
        width: 38%;
    }

    :where(.yj-flow-page, .yj-sell-flow, .yj-buy-flow, .yj-rent-flow)
    :is(.yj-flow-page__cta, .yj-sell-flow__cta, .yj-buy-flow__cta, .yj-flow-cta) {
        padding: 28px 20px;
        border-radius: 18px;
    }

    :where(.yj-flow-page, .yj-sell-flow, .yj-buy-flow)
    :is(.yj-flow-page__cta-actions, .yj-sell-flow__cta-actions, .yj-buy-flow__cta-actions) {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    :where(.yj-flow-page, .yj-sell-flow, .yj-buy-flow, .yj-rent-flow)
    :is(.yj-flow-page__nav a, .yj-sell-flow__nav a, .yj-buy-flow__nav a,
        .yj-flow-nav__item, .yj-flow-page__cta-actions a,
        .yj-sell-flow__cta-actions a, .yj-buy-flow__cta-actions a,
        .yj-flow-cta__button) {
        transition: none;
    }
}


/* =========================================================
 * 取引実績ページ /performance
 * 外部PHPのHTMLを変更せず、既存クラスだけで整える。
 * ======================================================= */

body.post-name-performance {
    --yj-performance-primary: #397d8a;
    --yj-performance-primary-dark: #173842;
    --yj-performance-brand: #4ea2b2;
    --yj-performance-warm: #b9531e;
    --yj-performance-text: #18343d;
    --yj-performance-muted: #5f747a;
    --yj-performance-line: #d3e4e8;
    --yj-performance-pale: #edf6f8;
    --yj-performance-white: #fff;
    color: var(--yj-performance-text);
}

body.post-name-performance .siteContent {
    padding-top: clamp(48px, 6vw, 76px);
    padding-bottom: clamp(72px, 8vw, 112px);
    background: linear-gradient(180deg, #fff 0, #f8fbfc 100%);
}

body.post-name-performance #main {
    font-family: "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
}

/* ページ見出しと同じ文言なので、PHP側のh2は視覚上のみ隠す。 */
body.post-name-performance #main > h2:first-of-type {
    margin: 0 0 clamp(30px, 4vw, 46px);
    padding: 0 0 18px;
    color: var(--yj-performance-text);
    background: transparent;
    border: 0;
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
    font-weight: 900;
    letter-spacing: .04em;
    text-align: center;
}

body.post-name-performance #main > h2:first-of-type::before {
    display: block;
    margin-bottom: 8px;
    color: var(--yj-performance-primary);
    font-family: Georgia, "Times New Roman", serif;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .2em;
    content: "RECENT RESULTS";
}

body.post-name-performance #main > h2:first-of-type::after {
    display: block;
    width: 56px;
    height: 3px;
    margin: 17px auto 0;
    background: var(--yj-performance-warm);
    content: "";
}

/* 12件の取引実績一覧 */
body.post-name-performance #main > h2:first-of-type + .search_result {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(18px, 2.4vw, 28px);
    align-items: stretch;
    margin: 0;
}

body.post-name-performance #main > h2:first-of-type + .search_result > .bukkenbox {
    display: flex;
    width: auto !important;
    max-width: none !important;
    min-width: 0;
    padding: 0 !important;
    flex: none !important;
}

body.post-name-performance #main > h2:first-of-type + .search_result .borderd_box {
    display: flex;
    width: 100%;
    min-width: 0;
    height: 100%;
    flex-direction: column;
    overflow: hidden;
    background: var(--yj-performance-white);
    border: 1px solid var(--yj-performance-line);
    border-radius: 18px;
    box-shadow: 0 15px 34px rgba(37, 93, 103, .11);
}

body.post-name-performance #main > h2:first-of-type + .search_result .imaged_area {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #e9f1f3;
}

body.post-name-performance #main > h2:first-of-type + .search_result .bukkenview_img {
    padding: 0;
}

body.post-name-performance #main > h2:first-of-type + .search_result .overview {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1;
    filter: none;
}

/* 画像未登録時の透過PNGは、白寄りの背景と余白で見せる。 */
body.post-name-performance #main > h2:first-of-type + .search_result .overview[src*="/kodate.png"] {
    padding: clamp(24px, 4vw, 42px);
    object-fit: contain;
    background:
        radial-gradient(circle at 50% 46%, #fff 0 35%, transparent 36%),
        linear-gradient(145deg, #f1f7f8, #dfecef);
}

body.post-name-performance #main > h2:first-of-type + .search_result .overd_img {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: min(68%, 215px);
    height: auto;
    max-height: 52%;
    padding: 0;
    object-fit: contain;
    transform: translate(-50%, -50%);
}

body.post-name-performance #main > h2:first-of-type + .search_result .borderd_box > .contents {
    display: flex;
    min-height: 88px;
    align-items: center;
    margin: 0;
    padding: 20px 20px 22px;
    background: var(--yj-performance-white);
    border-top: 4px solid var(--yj-performance-warm);
}

body.post-name-performance #main > h2:first-of-type + .search_result .over_message {
    display: block;
    color: var(--yj-performance-text);
    font-size: .96rem;
    font-weight: 800;
    line-height: 1.7;
    overflow-wrap: anywhere;
}

/* ご確認上の注意 */
body.post-name-performance #main > h3 {
    margin: clamp(58px, 7vw, 88px) 0 0;
    padding: 27px 30px 8px;
    color: var(--yj-performance-text);
    background: var(--yj-performance-pale);
    border: 1px solid var(--yj-performance-line);
    border-bottom: 0;
    border-radius: 18px 18px 0 0;
    font-size: clamp(1.15rem, 2.4vw, 1.42rem);
    font-weight: 900;
}

body.post-name-performance #main > h3::before {
    display: inline-flex;
    width: 29px;
    height: 29px;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    color: var(--yj-performance-white);
    background: var(--yj-performance-primary);
    border-radius: 50%;
    font-family: Georgia, serif;
    font-size: .92rem;
    font-weight: 700;
    vertical-align: 2px;
    content: "i";
}

body.post-name-performance #main > h3 + .search_result {
    display: block;
    margin: 0;
    padding: 8px 30px 24px;
    color: var(--yj-performance-muted);
    background: var(--yj-performance-pale);
    border: 1px solid var(--yj-performance-line);
    border-top: 0;
    border-radius: 0 0 18px 18px;
}

body.post-name-performance #main > h3 + .search_result p {
    margin: 0;
    font-size: .9rem;
    line-height: 1.85;
}

body.post-name-performance #main > h3 + .search_result p + p {
    margin-top: 4px;
}

@media (max-width: 991.98px) {
    body.post-name-performance #main > h2:first-of-type + .search_result {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 639.98px) {
    body.post-name-performance .siteContent {
        padding-top: 36px;
        padding-bottom: 72px;
    }

    body.post-name-performance #main > h2:first-of-type + .search_result {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    body.post-name-performance #main > h2:first-of-type + .search_result .imaged_area {
        aspect-ratio: 16 / 9;
    }

    body.post-name-performance #main > h2:first-of-type + .search_result .borderd_box > .contents {
        min-height: 76px;
        padding: 17px 18px 19px;
    }

    body.post-name-performance #main > h2:first-of-type + .search_result .over_message {
        font-size: .9rem;
    }

    body.post-name-performance #main > h3 {
        padding: 22px 20px 7px;
        border-radius: 15px 15px 0 0;
    }

    body.post-name-performance #main > h3 + .search_result {
        padding: 7px 20px 20px;
        border-radius: 0 0 15px 15px;
    }
}

/* =========================================================
 * Q&Aページ共通デザイン
 * 対象: qa.php使用ページ + 空き家Q&A
 * 共通ページタイトル帯は変更しない。
 * ======================================================= */

:is(body.page-template-qa, body.post-name-vacant_qa) {
    --yj-qa-primary: #397d8a;
    --yj-qa-primary-dark: #173842;
    --yj-qa-brand: #4ea2b2;
    --yj-qa-warm: #b9531e;
    --yj-qa-text: #18343d;
    --yj-qa-muted: #526b72;
    --yj-qa-line: #d3e4e8;
    --yj-qa-pale: #edf6f8;
    --yj-qa-white: #fff;
}

:is(body.page-template-qa, body.post-name-vacant_qa) .siteContent {
    padding-top: clamp(46px, 6vw, 76px);
    padding-bottom: clamp(72px, 8vw, 108px);
    background: linear-gradient(180deg, #fff 0, #f8fbfc 100%);
}

:is(body.page-template-qa, body.post-name-vacant_qa) #main {
    width: 100%;
    max-width: 980px;
    margin-right: auto;
    margin-left: auto;
    color: var(--yj-qa-text);
    font-family: "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
}

/* 全Q&Aページ共通の英字。ページ別の文言登録は不要。 */
:is(body.page-template-qa, body.post-name-vacant_qa) #main::before {
    display: block;
    width: fit-content;
    margin: 0 auto clamp(28px, 4vw, 42px);
    padding-bottom: 12px;
    color: var(--yj-qa-primary);
    border-bottom: 3px solid var(--yj-qa-warm);
    font-family: Georgia, "Times New Roman", serif;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .19em;
    content: "QUESTIONS & ANSWERS";
}

:is(body.page-template-qa, body.post-name-vacant_qa) #main :is(h2, h3).question {
    position: relative;
    margin: 0;
    padding: 22px 28px 20px 84px;
    color: var(--yj-qa-text);
    background: linear-gradient(135deg, var(--yj-qa-pale), #f8fbfc);
    border: 1px solid var(--yj-qa-line);
    border-bottom: 0;
    border-radius: 18px 18px 0 0;
    font-size: clamp(1.02rem, 2vw, 1.23rem);
    font-weight: 800;
    line-height: 1.65;
    letter-spacing: .02em;
    overflow-wrap: anywhere;
}

:is(body.page-template-qa, body.post-name-vacant_qa) #main :is(h2, h3).question::before {
    position: absolute;
    top: 19px;
    left: 24px;
    display: inline-flex;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: var(--yj-qa-white);
    background: var(--yj-qa-primary);
    border: 0;
    border-radius: 50%;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    content: "Q";
}

:is(body.page-template-qa, body.post-name-vacant_qa) #main :is(h2, h3).question::after {
    display: none;
}

:is(body.page-template-qa, body.post-name-vacant_qa) #main p.ans {
    position: relative;
    margin: 0 0 clamp(22px, 3vw, 30px);
    padding: 23px 30px 27px 84px;
    color: var(--yj-qa-muted);
    background: var(--yj-qa-white);
    border: 1px solid var(--yj-qa-line);
    border-top: 0;
    border-radius: 0 0 18px 18px;
    box-shadow: 0 14px 32px rgba(37, 93, 103, .09);
    font-size: .96rem;
    line-height: 1.95;
    overflow-wrap: anywhere;
}

:is(body.page-template-qa, body.post-name-vacant_qa) #main p.ans::before {
    position: absolute;
    top: 21px;
    left: 24px;
    display: inline-flex;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: var(--yj-qa-white);
    background: var(--yj-qa-warm);
    border: 0;
    border-radius: 50%;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    content: "A";
}

:is(body.page-template-qa, body.post-name-vacant_qa) #main p.ans:last-child {
    margin-bottom: 0;
}

@media (max-width: 639.98px) {
    :is(body.page-template-qa, body.post-name-vacant_qa) .siteContent {
        padding-top: 36px;
        padding-bottom: 72px;
    }

    :is(body.page-template-qa, body.post-name-vacant_qa) #main::before {
        margin-bottom: 26px;
        font-size: .7rem;
    }

    :is(body.page-template-qa, body.post-name-vacant_qa) #main :is(h2, h3).question {
        padding: 18px 17px 17px 66px;
        border-radius: 15px 15px 0 0;
        font-size: .98rem;
        line-height: 1.6;
    }

    :is(body.page-template-qa, body.post-name-vacant_qa) #main :is(h2, h3).question::before {
        top: 16px;
        left: 16px;
        width: 36px;
        height: 36px;
        font-size: .9rem;
    }

    :is(body.page-template-qa, body.post-name-vacant_qa) #main p.ans {
        padding: 20px 17px 22px 66px;
        border-radius: 0 0 15px 15px;
        font-size: .9rem;
        line-height: 1.85;
    }

    :is(body.page-template-qa, body.post-name-vacant_qa) #main p.ans::before {
        top: 18px;
        left: 16px;
        width: 36px;
        height: 36px;
        font-size: .9rem;
    }
}