/* =========================================
   業者選びのポイントページ (point.html) 専用スタイル
========================================= */


/* 仕切り線 */
.section-divider {
    border: none; /* デフォルトの線を一旦消す */
    border-top: 1px solid #cbd2db; /* 薄いブルーグレーの線 */
    width: 80%; /* 横幅を80%にして左右に抜け感を作る */
    max-width: 1000px;
    margin: 10px auto; /* 線の上と下に80pxの余白を作り、中央に配置 */
}

.point-hero-section {
    background-color: #ffffff;
    padding: 80px 20px;
}

.point-hero-container {
    max-width: 1000px;
    margin: 0 auto;
    display: flex; /* 横並びにする */
    align-items: center; /* 縦方向の中央で揃える */
    justify-content: space-between;
    gap: 40px; /* テキストと画像の間の隙間 */
}

/* 左側：テキストエリア */
.point-hero-text {
    flex: 1.2; /* 画像より少し広いスペースを取る */
}

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

.point-hero-desc {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #333333;
}

.point-hero-desc strong {
    font-weight: bold;
    font-family: Arial, sans-serif; /* KMの部分だけ少しフォントを変えてキリッとさせる */
}

/* 右側：イラストエリア */
.point-hero-image {
    flex: 1; /* 残りのスペースを取る */
    text-align: center; /* 画像をエリア内の中央に配置 */
}

.point-hero-image img {
    max-width: 50%; /* コンテナからはみ出さないようにする */
    height: auto;
    max-height: 350px; /* 大きくなりすぎないように制限 */
}

/* --- レスポンシブ対応（スマホ表示） --- */
@media (max-width: 768px) {
    .point-hero-container {
        flex-direction: column-reverse; /* スマホでは「画像が上、テキストが下」になるように入れ替える */
        text-align: center; /* スマホでは全体を中央揃えに */
        gap: 30px;
    }
    
    .point-hero-title {
        font-size: 2.2rem;
    }
    
    .point-hero-desc {
        text-align: left; /* 文章は左寄せの方が見やすいため戻す */
        font-size: 1rem;
    }
    
    .point-hero-image img {
        max-height: 250px; /* スマホでは少し画像を小さくする */
    }
}

/* --- 違法業者への注意喚起セクション --- */
.warning-section {
    padding: 20px 20px 100px;
    background-color: #ffffff;
}

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

/* 青い警告バナー */
.warning-banner {
    background-color: #1756b4; /* 画像の鮮やかなブルー */
    border-radius: 10px;
    padding: 20px 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    position: relative; /* 下の三角を作るための基準 */
    margin-bottom: 70px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
}

/* バナーの下向き三角（吹き出しのしっぽ） */
.warning-banner::after {
    content: "";
    position: absolute;
    bottom: -20px; /* バナーの下にはみ出させる */
    left: 50%;
    transform: translateX(-50%);
    border-top: 20px solid #1756b4; /* 三角形の色（バナーと同じ） */
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
}

.warning-banner-img {
    height: 200px;
    width: auto;
    bottom: -40px;
}

.warning-banner-text {
    color: #ffffff;
    line-height: 1.5;
}

.warning-banner-sub {
    font-size: 1.6rem;
    margin-bottom: 10px;
}

.warning-banner-main {
    font-size: 1.8rem;
    margin: 0;
}

.highlight-white {
    font-size: 1.8rem;
    font-weight: bold;
}

.highlight-yellow {
    color: #ffd700; /* 黄色文字 */
    font-weight: bold;
    border-bottom: 2px solid #ffd700; /* 黄色い下線 */
}

/* 見出し（甘い言葉に注意！） */
.warning-heading {
    font-size: 2.2rem;
    color: #0f2541;
    margin-bottom: 30px;
    font-weight: normal;
}

/* 5つの警告カード */
.warning-cards {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 50px;
}

.warning-card {
    flex: 1; /* 5つ均等に幅を取る */
    /* 上が白で下が薄いオレンジ/ピンクのグラデーション */
    background: linear-gradient(to bottom, #ffffff 0%, #ffece6 100%);
    border-radius: 10px;
    padding: 25px 15px;
    text-align: center;
    box-shadow: 0 3px 10px rgba(0,0,0,0.05);
}

.warning-icon {
    width: 50px;
    height: auto;
    margin-bottom: 15px;
}

.warning-card p {
    font-size: 0.95rem;
    color: #333333;
    line-height: 1.6;
    margin: 0;
}

/* 注意書きテキストエリア */
.warning-desc-area {
    color: #333333;
    line-height: 1.8;
}

.warning-desc-area p {
    font-size: 1.05rem;
    margin-bottom: 20px;
}

.warning-list {
    list-style-type: none; /* デフォルトの点マークを消す */
    padding: 0;
    margin-bottom: 30px;
}

.warning-list li {
    font-size: 1.05rem;
    margin-bottom: 5px;
}

.warning-list li::before {
    content: "・"; /* リストの先頭に「・」をつける */
}

/* 赤文字の強調表示 */
.text-red {
    color: #d93a3a;
    font-size: 1.15rem !important;
    font-weight: bold;
}


/* --- レスポンシブ対応（スマホ表示） --- */
@media (max-width: 768px) {
    .warning-banner {
        flex-direction: column; /* スマホでは縦並びに */
        text-align: center;
        padding: 30px 20px;
        gap: 20px;
    }
    
    .warning-banner-sub {
        font-size: 1.3rem;
    }
    
    .warning-banner-main, .highlight-white {
        font-size: 1.4rem;
    }
    
    .warning-heading {
        font-size: 1.8rem;
        text-align: center;
    }
    
    .warning-cards {
        flex-wrap: wrap; /* 画面に収まらない分を折り返す */
    }
    
    .warning-card {
        flex: 1 1 45%; /* スマホでは2列で並べる */
        padding: 20px 10px;
    }

    .section-divider {
        margin: 10px auto; /* スマホでは上下の余白を少し狭める */
    }
}

/* --- 広告やホームページのチェックポイントセクション --- */
.checkpoint-section {
    padding: 0 20px 100px;
    background-color: #ffffff;
}

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

/* 見出しエリア（アイコンと文字を横並び） */
.checkpoint-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 40px;
}

.point-icon {
    width: 50px; /* 指差しアイコンの大きさ */
    height: auto;
}

.checkpoint-title {
    font-size: 2.2rem;
    color: #0f2541; /* 濃いネイビー */
    font-weight: normal;
    margin: 0;
}

/* テキスト解説エリア */
.checkpoint-text-area {
    margin-bottom: 50px;
}

.checkpoint-list {
    list-style: none; /* デフォルトの点マークを消す */
    padding: 0;
    margin: 0;
}

.checkpoint-list li {
    margin-bottom: 30px; /* 項目同士の隙間 */
}

.list-title {
    font-size: 1.1rem;
    color: #333333;
    margin: 0 0 15px 0;
}

.list-desc {
    font-size: 1rem;
    color: #333333;
    line-height: 1.8;
    margin: 0 0 0 1em; /* 文章全体を少し右にずらして字下げする */
}

/* 金融庁のリンクテキスト */
.list-desc a {
    color: #0f2541;
    font-weight: bold;
    text-decoration: underline;
    word-break: break-all; /* URLが長くてはみ出すのを防ぐ */
}

.list-desc a:hover {
    color: #4a7c8c;
}

/* 3つの図解カードエリア */
.checkpoint-cards {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.cp-card {
    flex: 1; /* 3つを均等な幅にする */
    border: 2px solid #bce27f; /* 画像の枠線に近い黄緑色 */
    border-radius: 8px; /* 角を少し丸くする */
    padding: 30px 20px;
    text-align: center;
    background-color: #ffffff;
}

.cp-card-title {
    font-size: 1.1rem;
    color: #333333;
    margin: 0 0 25px 0;
    font-weight: normal;
    line-height: 1.5;
    /* 1行のタイトルと2行のタイトルで、画像の位置がずれないように高さを揃える魔法 */
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 3em; 
}

.cp-card img {
    max-width: 100%;
    height: auto;
}

/* --- レスポンシブ対応（スマホ表示） --- */
@media (max-width: 768px) {
    .checkpoint-header {
        flex-direction: column; /* アイコンと文字を縦並びに */
        text-align: center;
        gap: 15px;
    }
    
    .checkpoint-title {
        font-size: 1.8rem;
    }
    
    .list-desc {
        margin: 0; /* スマホでは字下げをなくして広く使う */
    }
    
    .checkpoint-cards {
        flex-direction: column; /* 3つのカードを縦並びに */
    }
    
    .cp-card-title {
        min-height: auto; /* スマホでは高さ揃えを解除 */
    }
    
    .cp-card img {
        max-width: 80%; /* スマホでは画像が大きくなりすぎないように調整 */
    }
}

/* --- 悪質な業者にご注意セクション --- */
.malicious-lenders-section {
    padding: 0 20px 100px;
    background-color: #ffffff;
}

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

/* 見出しと赤いバツ印 */
.malicious-title {
    font-size: 2rem;
    color: #333333;
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 30px;
    font-weight: normal;
}

.red-cross {
    color: #d93a3a; /* 画像に近い赤色 */
    font-size: 2.8rem;
    font-weight: bold;
    line-height: 1; /* バツ印の上下の余白を詰める */
}

/* 導入テキストエリア */
.malicious-intro {
    margin-bottom: 60px;
    line-height: 1.8;
    color: #333333;
    font-size: 1.05rem;
}

.malicious-intro p {
    margin-bottom: 25px;
}

/* 文字を大きくする装飾 */
.text-large {
    font-size: 1.4rem;
}

/* 文字を赤く大きくする装飾 */
.text-large-red {
    font-size: 1.4rem;
    color: #d93a3a;
}

/* 悪質業者の手口リスト */
.method-item {
    margin-bottom: 40px; /* 各項目の間隔を広めにとる */
}

.method-title {
    font-size: 1.1rem;
    color: #333333;
    margin: 0 0 15px 0;
    font-weight: normal; /* 画像に合わせて太字にはしない */
}

.method-desc {
    font-size: 1rem;
    line-height: 1.8;
    color: #333333;
    margin: 0;
}

/* --- レスポンシブ対応（スマホ表示） --- */
@media (max-width: 768px) {
    .malicious-title {
        font-size: 1.6rem;
    }
    .red-cross {
        font-size: 2rem;
    }
    .malicious-intro, .method-desc {
        font-size: 0.95rem; /* スマホでは少し文字を小さくして読みやすく */
    }
    .text-large, .text-large-red {
        font-size: 1.2rem; /* 強調文字もスマホに合わせて少し縮小 */
    }
    .method-item {
        margin-bottom: 30px;
    }
}