/* =========================================
   融資詳細ページ共通スタイル (loan-details.css)
========================================= */

.loan-hero-section {
    /* 画像の背景に近い薄いブルーグレー */
    background-color: #d2d5db; 
    padding: 40px 20px 0; /* 下の余白を0にしてイラストを底につける */
    overflow: hidden; /* はみ出しを隠す */
}

.loan-hero-container {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    align-items: flex-end; /* 下のラインで揃える */
    justify-content: center;
    gap: 40px;
}

/* 左側：イラストエリア */
.loan-hero-image {
    flex: 0 0 250px; /* イラストの幅を固定 */
    text-align: center;
}

.loan-hero-image img {
    width: 100%;
    height: auto;
    display: block; /* 下の隙間をなくすおまじない */
}

/* 右側：テキストエリア */
.loan-hero-text {
    flex: 1;
    padding-bottom: 50px; /* テキストだけ少し上に浮かせる */
}

.loan-hero-title {
    font-size: 3rem;
    color: #0f2541; /* 濃いネイビー */
    font-weight: normal; /* 画像に合わせて細めに */
    margin: 0 0 20px 0;
    letter-spacing: 0.05em;
}

.loan-hero-desc {
    font-size: 0.95rem;
    color: #333333;
    line-height: 1.8;
    margin: 0;
}

/* --- レスポンシブ対応（スマホ表示） --- */
@media (max-width: 768px) {
    .loan-hero-container {
        flex-direction: column-reverse; /* スマホでは「テキストが上、画像が下」に入れ替え */
        align-items: center; /* 中央揃え */
        gap: 20px;
    }
    
    .loan-hero-text {
        text-align: center;
        padding-bottom: 0;
        padding-top: 20px;
    }
    
    .loan-hero-title {
        font-size: 2rem;
    }
    
    .loan-hero-desc {
        text-align: left; /* 注意書きは左寄せの方が見やすいため戻す */
        font-size: 0.9rem;
    }
    
    .loan-hero-image {
        width: 50%;      /* 横幅を画面（コンテナ）の50%にする */
        margin: 0 auto;  /* コンテナ内で中央に配置する */
        flex: none;      /* flexアイテムとしての伸縮を無効化 */
    }
}

/* --- 融資条件テーブルセクション --- */
.loan-table-section {
    padding: 60px 20px 100px; /* 上下の余白 */
    background-color: #ffffff;
}

.loan-table-container {
    max-width: 900px;
    margin: 0 auto;
}

/* テーブル全体の設定 */
.loan-details-table {
    width: 100%;
    border-collapse: collapse; /* セル同士の隙間を無くす */
}

/* セルの共通設定（線と余白） */
.loan-details-table th,
.loan-details-table td {
    /* 画像に合わせて、くっきりと見やすい黒に近い線の色に設定 */
    border: 2px solid #333333; 
    padding: 25px 20px;
    color: #333333;
    font-size: 1.05rem;
    vertical-align: middle; /* 縦方向の中央揃え */
}

/* 左側の見出しセル */
.loan-details-table th {
    width: 30%; /* 左側の幅を固定 */
    text-align: center; /* 中央揃え */
    font-weight: normal; /* 画像通りに太字にしない */
}

/* 右側のデータセル */
.loan-details-table td {
    width: 70%;
    text-align: left; /* 左揃え */
    padding-left: 60px; /* 画像のように、左側に広めの余白を持たせる */
}

/* --- レスポンシブ対応（スマホ表示） --- */
@media (max-width: 768px) {
    .loan-table-section {
        padding: 40px 15px 80px;
    }
    
    /* スマホでは縦並びに変形させる */
    .loan-details-table th,
    .loan-details-table td {
        display: block;
        width: 100%;
        text-align: left; /* スマホではどちらも左揃えが見やすいです */
        padding: 15px 20px;
    }

    .loan-details-table th {
        background-color: #f0f4f8; /* スマホで見やすいよう、見出しだけ薄い背景色をつける */
        border-bottom: none; /* 見出しと内容の間の線を消す */
        font-weight: bold; /* スマホでは見出しを目立たせる */
    }

    .loan-details-table td {
        padding-left: 20px; /* スマホでは左の余白を狭くする */
        border-top: none;
    }
}

/* --- ビジネスサポートセクション --- */
.business-support-section {
    background-color: #ffffff;
    padding: 60px 20px 100px;
}

.business-support-container {
    max-width: 900px;
    margin: 0 auto;
}

/* 一番上の大きな見出し（下線付き） */
.support-heading {
    font-size: 1.8rem;
    color: #0f2541; /* サイト全体のネイビー */
    border-bottom: 2px solid #0f2541;
    padding-bottom: 15px;
    margin-top: 0;
    margin-bottom: 30px;
    line-height: 1.4;
    font-weight: normal;
}

/* 段落タイトル（[]の部分）の装飾：左側に青い太線 */
.support-subheading {
    font-size: 1.4rem;
    color: #0f2541;
    margin: 60px 0 20px 0; /* 上に広めの余白を取って区切る */
    padding-left: 15px;
    border-left: 5px solid #4a7c8c; /* アクセントカラーの青線 */
    line-height: 1.4;
    font-weight: normal;
}

/* 本文テキスト */
.support-text {
    font-size: 1.05rem;
    color: #333333;
    line-height: 1.8;
    margin: 0 0 25px 0;
}

/* 箇条書きリスト */
.support-list {
    list-style: none; /* デフォルトの点を消す */
    padding: 0;
    margin: 0 0 40px 0;
}

.support-list li {
    font-size: 1.05rem;
    color: #333333;
    line-height: 1.8;
    margin-bottom: 15px;
    padding-left: 1.2em; /* 点を入れるための隙間 */
    position: relative;
}

/* リストの黒丸（・）を綺麗に配置 */
.support-list li::before {
    content: "・";
    position: absolute;
    left: 0;
    color: #0f2541;
    font-weight: bold;
}

/* --- レスポンシブ対応（スマホ表示） --- */
@media (max-width: 768px) {
    .business-support-section {
        padding: 40px 15px 80px;
    }
    
    .support-heading {
        font-size: 1.4rem;
    }
    
    .support-subheading {
        font-size: 1.2rem;
        margin-top: 40px;
    }
    
    .support-text, .support-list li {
        font-size: 0.95rem;
    }
}

/* --- メッセージ＆お問い合わせ誘導セクション --- */
.contact-prompt-section {
    background-color: #ffffff;
    padding: 60px 20px 80px;
}

.contact-prompt-container {
    max-width: 900px;
    margin: 0 auto;
}

.prompt-text:last-of-type {
    margin-bottom: 40px; /* ボタンとの間の余白 */
}

/* ボタンエリア（画像に合わせて右寄せに配置） */
.prompt-btn-area {
    text-align: right;
}

/* 薄いブルーのお問い合わせボタン */
.prompt-contact-btn {
    display: inline-block;
    background-color: #eef3fc; /* 画像の淡いブルー背景 */
    color: #2b65f6; /* 文字の鮮やかなブルー */
    text-decoration: none;
    padding: 15px 60px;
    font-size: 1.1rem;
    border-radius: 50px; /* カプセル型に丸める */
    transition: all 0.3s ease;
}

/* ボタンにマウスを乗せた時の動き */
.prompt-contact-btn:hover {
    background-color: #dbe6f8; /* 少し濃いブルーに変化 */
    color: #1a4bc5;
}

/* --- レスポンシブ対応（スマホ表示） --- */
@media (max-width: 768px) {
    .contact-prompt-section {
        padding: 40px 15px 60px;
    }
    
    .prompt-text {
        font-size: 0.95rem;
    }
    
    .prompt-btn-area {
        text-align: center; /* スマホではボタンを中央寄せにします */
    }
    
    .prompt-contact-btn {
        width: 100%; /* スマホではボタンを押しやすいよう横幅いっぱいにする */
        box-sizing: border-box;
    }
}