@charset "UTF-8";

/* ==========================================================================
   不動産投資で失敗しないためにページ（/realestate-investment-failure）専用CSS
   他ページへ干渉させないため、すべてのセレクタを .page_investment_guide 配下に置く
   （main・パンくずの下地だけは、このページ固有のクラスで指定する）
   ========================================================================== */

/* ページ全体の下地を白にする
   body の背景がサイト共通で薄緑なので、背景色を持たないセクションはそれが透ける。
   先例（築古戸建投資ページ）と同じく main を白で塗り、上下の余白は main の padding で持たせる */
.page_main.page-realestate-investment-failure {
    padding-top: 100px;
    padding-bottom: 100px;
    background: #fff;
}

/* パンくずは main の外にあり背景が透明なので、このページだけ白にして FV から本文まで白でつなげる */
.page-template-page-realestate-investment-failure .breadcrumb {
    background-color: #fff;
}

/* 既存セクションのこのページだけの余白調整
   先頭・末尾のセクションの上下は margin だと main の外へ抜けるため、main の padding で持たせる */
.page_investment_guide .area_info_sec {
    margin-top: 0;
    margin-bottom: 100px;
}

/* 薄い色のセクションが続く箇所に白を挟む（背景色はこのページ限定の上書き） */
.page_investment_guide .bottom_description {
    margin-top: 0;
    background-color: #fff;
}

.page_investment_guide .top_faq {
    margin-top: 80px;
    margin-bottom: 0;
}

/* 失敗事例の注記 */
.page_investment_guide .top_strong .investment_case_note {
    margin: 25px auto 40px;
    text-align: center;
    line-height: 1.8;
}

/* 表のセクション（投資の種類・リスクと防御策・収支例） */
.page_investment_guide .investment_type_sec,
.page_investment_guide .investment_cashflow_sec {
    padding: 100px 0;
    background: #fff;
}

/* リスクと防御策：前後（チェックリスト・3つの数字）が薄緑・薄グレーなので白にして色の連続を切る */
.page_investment_guide .investment_return_sec {
    padding: 100px 0;
    background: #fff;
}

.page_investment_guide .investment_section_lead {
    margin: 30px auto 45px;
    text-align: center;
    line-height: 2;
}

.page_investment_guide .investment_return_sec .investment_return_sec__lead {
    max-width: 820px;
    margin: 30px auto 45px;
    text-align: center;
    line-height: 2;
}

.page_investment_guide .investment_return_table_wrap {
    margin: auto;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(32, 40, 24, .1);
}

.page_investment_guide .investment_return_table_wrap .investment_return_table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
}

.page_investment_guide .investment_return_table_wrap .investment_return_table th,
.page_investment_guide .investment_return_table_wrap .investment_return_table td {
    padding: 20px 26px;
    border-right: 1px solid #d8ddcf;
    border-bottom: 1px solid #d8ddcf;
    text-align: left;
    vertical-align: middle;
}

.page_investment_guide .investment_return_table_wrap .investment_return_table th:last-child,
.page_investment_guide .investment_return_table_wrap .investment_return_table td:last-child {
    border-right: 0;
}

.page_investment_guide .investment_return_table_wrap .investment_return_table thead th {
    background: #202020;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
}

.page_investment_guide .investment_return_table_wrap .investment_return_table tbody th {
    width: 23%;
    background: #f7f8f4;
    font-size: 16px;
    font-weight: 600;
}

.page_investment_guide .investment_return_table_wrap .investment_return_table .amount {
    width: 27%;
    color: #61763d;
    font-size: 17px;
    font-weight: 700;
}

.page_investment_guide .investment_cashflow_sec .investment_return_table_wrap .investment_return_table .result th,
.page_investment_guide .investment_cashflow_sec .investment_return_table_wrap .investment_return_table .result td {
    background: #61763d;
    color: #fff;
}

.page_investment_guide .investment_cashflow_sec .investment_return_table_wrap .investment_return_table .result .amount {
    color: #fff;
}

.page_investment_guide .investment_return_sec__note {
    margin: 25px 0 0;
    font-size: 14px;
    line-height: 1.8;
}

/* 3つの数字は共通パーツ（.top_service）を流用しているため、
   番号ラベルが疑似要素で「SERVICE .0N」と出てしまう。このページの文脈に合わせて差し替える（先例と同じ） */
.page_investment_guide .top_service .new_list li:nth-child(1) .txtBox .theme::before {
    content: "NUMBER .01";
}

.page_investment_guide .top_service .new_list li:nth-child(2) .txtBox .theme::before {
    content: "NUMBER .02";
}

.page_investment_guide .top_service .new_list li:nth-child(3) .txtBox .theme::before {
    content: "NUMBER .03";
}

@media (max-width: 750px) {

    .page_main.page-realestate-investment-failure {
        padding-top: 20vw;
        padding-bottom: 14vw;
    }

    .page_investment_guide .area_info_sec {
        margin-bottom: 14vw;
    }

    .page_investment_guide .top_faq {
        margin-top: 14vw;
    }

    .page_investment_guide .top_strong .investment_case_note {
        margin: 5vw auto 8vw;
        text-align: left;
        font-size: 3.2vw;
    }

    .page_investment_guide .investment_type_sec,
    .page_investment_guide .investment_cashflow_sec,
    .page_investment_guide .investment_return_sec {
        padding: 18vw 0;
    }

    .page_investment_guide .investment_section_lead,
    .page_investment_guide .investment_return_sec .investment_return_sec__lead {
        margin: 6vw auto 9vw;
        text-align: left;
    }

    .page_investment_guide .investment_return_table_wrap {
        border-radius: 2vw;
    }

    /* SPは見出し行を隠して「項目／特徴・確認事項」の2列グリッドに組み替える */
    .page_investment_guide .investment_return_table_wrap .investment_return_table thead {
        display: none;
    }

    .page_investment_guide .investment_return_table_wrap .investment_return_table,
    .page_investment_guide .investment_return_table_wrap .investment_return_table tbody {
        display: block;
    }

    .page_investment_guide .investment_return_table_wrap .investment_return_table tr {
        display: grid;
        grid-template-columns: 42% 58%;
    }

    .page_investment_guide .investment_return_table_wrap .investment_return_table th,
    .page_investment_guide .investment_return_table_wrap .investment_return_table td {
        padding: 4vw;
        border-right: 0;
        font-size: 3.5vw;
    }

    .page_investment_guide .investment_return_table_wrap .investment_return_table tbody th {
        width: auto;
        grid-row: span 2;
    }

    .page_investment_guide .investment_return_table_wrap .investment_return_table .amount {
        width: auto;
        border-left: 1px solid #d8ddcf;
        font-size: 3.8vw;
    }

    .page_investment_guide .investment_return_table_wrap .investment_return_table .point {
        border-left: 1px solid #d8ddcf;
    }

    .page_investment_guide .investment_return_sec__note {
        margin-top: 5vw;
        font-size: 3.2vw;
    }
}