/* 基本リセット */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    font-size: 16px;
}

/* コンテナ */
#top {
    width: 100%;
    max-width: 1200px; /* 最大幅を制限 */
    margin: 0 auto;
    padding: 0 10px;
}

/* ヘッダー */
#header {
    text-align: center;
    padding: 20px 0;
}

#header h1 img {
    max-width: 100%;
    height: auto;
}

#header strong {
    display: block;
    margin-top: 10px;
}

#head {
    margin-top: 10px;
}

/* コンテンツエリア */
#contents {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

/* メインコンテンツ */
/* イメージマップ対応 */
#main {
    width: 100%;
    max-width: 700px; /* 元の画像幅に合わせる */
    margin: 0 auto;
}

#main img {
    max-width: 100%;
    height: auto;
    display: block;
}
/* サイドバー */
#sub {
    width: 100%;
    padding: 20px 0;
}

.section h3, .section h4 {
    margin-bottom: 10px;
}

.section ul {
    list-style: none;
}

.section ul li {
    margin: 5px 0;
}

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

/* フッター */
#totop, #footer {
    text-align: center;
    padding: 10px 0;
}

#footer address {
    font-style: normal;
}

/* カテゴリーページのリスト */
#main2 {
    margin-bottom: 20px;
}

.menu {
    list-style: none;
    padding-left: 20px;
}

.menu li {
    margin: 5px 0;
}

/* 個別記事ページ */
.tantei {
    margin-bottom: 20px;
}

.tantei dt, .tantei dd {
    margin-bottom: 10px;
}

.tantei iframe {
    max-width: 100%;
    height: auto;
}

/* モバイル用デフォルト設定（~768px） */
@media (max-width: 768px) {
    #header h1 img {
        width: 80%; /* モバイルで小さめに */
    }

    #main, #sub {
        width: 100%;
    }

    .tantei iframe {
        width: 100%;
        height: 200px; /* 固定高さ */
    }
}

/* タブレット用 (769px ~ 1024px) */
@media (min-width: 769px) {
    #main {
        width: 65%;
    }

    #sub {
        width: 30%;
    }

    #header h1 img {
        width: 100%;
    }

    .tantei iframe {
        width: 350px;
        height: 200px;
    }
}

/* デスクトップ用 (1025px以上) */
@media (min-width: 1025px) {
    #main {
        width: 70%;
    }

    #sub {
        width: 25%;
    }

    .menu {
        columns: 2; /* リストを2列に */
        column-gap: 20px;
    }
}