@charset "UTF-8";

/* ========================================
   1. 基本設定 & リセット
   ======================================== */
* {
    box-sizing: border-box;
}

body {
    font-size: 15px; /* スマホで見やすいよう少し拡大 */
    color: #444;
    background-color: #f4f4f4;
    margin: 0;
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    text-align: center;
    line-height: 1.6;
}

a { color: #0066cc; text-decoration: none; }
a:hover { text-decoration: underline; }
img { border: none; vertical-align: bottom; max-width: 100%; height: auto; }

/* ========================================
   2. レイアウト構造（レスポンシブ）
   ======================================== */
#body {
    margin: 0 auto;
    width: 100%;
    max-width: 850px; /* 最大幅を維持 */
    background: #fff url(../image/bg.gif) repeat-y right top;
    text-align: left;
    display: flex;
    flex-wrap: wrap;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

header, nav, footer {
    width: 100%;
}

#main {
    width: 600px;
    padding: 20px;
}

#right {
    width: 250px;
    padding: 20px 10px;
}

/* ========================================
   3. ヘッダー & メニュー
   ======================================== */
#header {
    height: auto;
    min-height: 108px;
    background-color: #eee;
    border-bottom: 1px solid #ddd;
    padding: 10px 0;
}

.site-title {
    font-size: 11px;
    color: #999;
    margin: 0;
    padding: 0 15px 5px;
    font-weight: normal;
}

.logo-area { padding: 0 15px; }

#menu {
    background: linear-gradient(to bottom, #ffffff 0%, #f2f2f2 50%, #e6e6e6 100%);
    border-top: 1px solid #ccc;
    border-bottom: 2px solid #bbb;
}

#menu ul {
    margin: 0; padding: 0; list-style: none;
    display: flex;
    flex-wrap: wrap; /* スマホで折り返せるように */
}

#menu li {
    flex: 1;
    min-width: 100px; /* スマホで極端に狭くならないよう */
    border-right: 1px solid #ccc;
    text-align: center;
}

#menu a {
    display: block;
    line-height: 40px;
    color: #333;
    font-weight: bold;
    font-size: 14px;
}

#menu a:hover {
    background-color: #ffffff;
    color: #d9534f;
}

/* ========================================
   4. メインコンテンツ（装飾）
   ======================================== */
.main-question {
    font-size: 18px;
    background: linear-gradient(to right, #6085b0 0%, #a2b9d6 100%);
    color: white;
    padding: 12px 15px;
    border-radius: 4px;
    margin: 0 0 20px 0;
}

.answer-label {
    font-size: 14px;
    background: #f0f0f0;
    border-left: 5px solid #666;
    padding: 8px 12px;
    margin: 25px 0 10px;
}

.answer-label.best {
    border-left-color: #d9534f;
    background-color: #fff9e6;
    font-weight: bold;
}

.content-card {
    background: #fff;
    border: 1px solid #e1e4e8;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
    display: flex;
    gap: 15px;
}

.best-bg { background-color: #fffdf9; border-color: #f0e68c; }

.user-profile { width: 90px; text-align: center; flex-shrink: 0; }

.user-icon { 
    width: 70px; height: 70px; margin: 0 auto; 
    border: 2px solid #eee; border-radius: 8px; overflow: hidden;
}

.user-name { font-weight: bold; font-size: 12px; margin-top: 5px; }

.message { flex: 1; }
.message p { margin: 0 0 1em; text-align: left; padding: 0; }

/* ========================================
   5. サイドバー
   ======================================== */
.side-box {
    border: 1px solid #ccc;
    border-radius: 8px;
    background-color: #fff;
    overflow: hidden;
    margin-bottom: 20px;
}

.side-box-head {
    background: linear-gradient(to bottom, #888 0%, #555 100%);
    color: #fff;
    font-weight: bold;
    text-align: center;
    padding: 10px;
}

.side-box-body { padding: 15px; }

.side-links { list-style: none; padding: 0; margin-top: 15px; }
.side-links li {
    font-size: 13px; padding: 10px 0; border-bottom: 1px dashed #ddd;
    text-align: left;
}

/* --- 法令遵守・ステマ規制対応スタイル --- */

/* ページ最上部のPR表記 */
.ad-notice {
    background-color: #f8f8f8;
    color: #666;
    font-size: 11px;
    text-align: center;
    padding: 5px 0;
    border-bottom: 1px solid #ddd;
    width: 100%;
}

/* 金融商品の注意喚起 */
.risk-disclaimer {
    margin-top: 30px;
    padding: 15px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 11px;
    color: #666;
    line-height: 1.5;
}

.risk-disclaimer p {
    margin: 0;
    padding: 0;
}

/* サイドバーのPR見出し */
.side-box-head {
    /* 前回の設定を継承しつつ、PRという文字を含める */
}

/* ========================================
   6. スマートフォン対応（メディアクエリ）
   ======================================== */
@media screen and (max-width: 850px) {
    #body {
        background-image: none;
        box-shadow: none;
    }

    /* 各要素の並び順を明示的に指定 */
    header { order: 1; }
    #menu  { order: 2; }
    #main  { order: 3; width: 100%; padding: 15px; }
    #right { order: 4; width: 100%; padding: 15px; }
    #footer { order: 5; }

    /* 投稿内容をスマホ最適化 */
    .content-card {
        flex-direction: column;
        align-items: center;
    }

    .user-profile {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 10px;
        text-align: left;
    }

    .user-icon { margin: 0; width: 50px; height: 50px; }
    .message p { padding: 0; font-size: 14px; }

    /* メニューの調整 */
    #menu li {
        min-width: 33.33%;
        font-size: 12px;
    }
}

/* ========================================
   7. 共通 & フッター
   ======================================== */
.red-bold { color: #d9534f; font-weight: bold; }
.center-img { text-align: center; margin: 10px 0; }
.page-top { width: 100%; text-align: right; padding: 10px; font-size: 11px; clear: both; }

#footer {
    background: #333;
    color: #fff;
    text-align: center;
    padding: 20px;
    font-size: 11px;
}
#footer a { color: #aaa; }