@charset "UTF-8";

/* --- PC表示時のレイアウト設定（Flexbox） --- */

/* レイアウトの親箱 */
.layout-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 900px;
    margin: 0 auto;
    box-sizing: border-box;
}

/* メインコンテンツ */
#contents {
    width: 560px; /* 余白込みで600px相当 */
    padding: 20px 0 40px 40px; /* 左に余白 */
    text-align: left;
    box-sizing: content-box;
}

/* サイドバー */
#sidebar {
    width: 210px;
    padding-top: 20px;
}

/* ヘッダー画像 */
#header img {
	height: 250px;
	width: 900px;
}

h2 {
	color: #FF9900;
	margin-bottom: 25px;
	font-size: 20px;
    border-bottom: 1px dotted #FF9900;
    padding-bottom: 10px;
}

#exp {
    margin-bottom: 30px;
    line-height: 1.6;
}
	
/* コメントタイトル（質問者名など） */
.comment_title {
	width: 100%; /* 親要素に合わせる */
	color: #713213;
	border-bottom: 1px dotted #713213;
	margin-top: 30px;
	margin-bottom: 10px;
	font-size: 16px;
    font-weight: bold;
}

/* コメント本文 */
.comment {
	width: 100%; /* 親要素に合わせる */
	list-style: none;
    line-height: 1.8;
    font-size: 14px;
    margin-bottom: 20px;
}

.comment a {
	color: #C33;
	text-decoration: none;
}

.comment a:hover {
	color: #C33;
	text-decoration: underline;
}

/* ページトップ */
#pagetop {
    text-align: right;
    margin-top: 30px;
}
#pagetop a {
    color: #713213;
    text-decoration: none;
}

/* サイドバー内の画像 */
#inquirybanner, #blog {
    margin-bottom: 20px;
    transition: 0.3s;
}

#inquirybanner a:hover img, 
h3 a:hover img {
    opacity: 0.7;
}


/* --- スマホ対応（レスポンシブ） --- */
@media screen and (max-width: 640px) {
    
    .layout-wrapper {
        width: 100% !important;
        flex-direction: column;
        padding: 0;
    }

    /* ▼▼▼ 修正：余白と幅の強制リセット ▼▼▼ */
    #contents {
        width: 100% !important;
        padding: 20px 20px !important; /* 左右に20pxのスペース確保 */
        box-sizing: border-box; /* パディングを幅に含める */
        margin: 0 !important;
    }

    /* ▼▼▼ 修正：文字サイズと幅の調整 ▼▼▼ */
    .comment_title {
        width: 100% !important; /* 固定幅を解除 */
        font-size: 16px !important; /* 少し小さく */
        line-height: 1.5;
        margin-top: 25px;
        box-sizing: border-box;
    }

    .comment {
        width: 100% !important; /* 固定幅を解除 */
        font-size: 13px !important; /* 本文を読みやすいサイズに縮小 */
        line-height: 1.6;
        box-sizing: border-box;
    }
    /* ▲▲▲ ここまで ▲▲▲ */

    /* サイドバー */
    #sidebar {
        width: 100% !important;
        text-align: center;
        padding: 20px 0;
    }
    
    #sidebar img {
        max-width: 90%;
        height: auto;
    }

    .insta-card {
        margin: 0 auto 20px !important;
    }

    #header img {
        width: 100% !important;
        height: auto !important;
    }
}