<style type="text/css">
/* 全体の枠組み調整 */
#container {
    width: 100% !important;
    max-width: 100vw !important; /* スマホ画面の幅に合わせる */
    margin: 0 auto;
    overflow-x: hidden; /* 全体が横に揺れるのを防ぐ */
}

/* メインコンテンツの余白を調整 */
main {
    width: 100% !important;
    padding: 10px !important;
    box-sizing: border-box;
}

/* さらに、メインコンテンツ部分も調整 */
.content-wrapper {
    display: flex;
    flex-wrap: wrap; /* スマホではメニューと表を縦並びに切り替えます */
}

main {
    flex: 1;
    width: 100%; /* 横幅を100%に */
    padding: 10px;
    box-sizing: border-box; /* パディングを含めた幅計算にします */
}

/* ★ここが重要：スマホで横スクロールさせる設定 */
.table-responsive {
    width: 100%;
    overflow-x: auto; /* 横方向にはみ出したらスクロールさせる */
    -webkit-overflow-scrolling: touch; /* 指での操作をなめらかにする */
    margin-bottom: 20px;
}

/* テーブルが潰れないようにする */
#result {
    min-width: 730px; /* テーブルの最低幅を確保（Excelと同じ感覚で表示） */
    width: 100%;
}

.meibo {
    font-size: 18px;
    line-height: 1.4;
    width: 100%; /* 固定幅 892px から 100% に変更 */
}

/* スマホ用の微調整 */
@media screen and (max-width: 640px) {
    header img {
        width: 100%;
        height: auto;
    }
    .wrap {
        display: block; /* ナビとメインを縦に並べる */
    }
    nav {
        width: 100%;
        text-align: center;
    }
}

/* テーブルを囲む箱の設定を強化 */
.table-responsive {
    width: 100% !important;
    overflow-x: auto !important; /* ★ここが重要！横スクロールを許可する */
    -webkit-overflow-scrolling: touch; /* 指での操作を滑らかにする */
    margin-top: 20px;
    border: 1px solid #ddd; /* どこまでが表か分かりやすくする */
}

/* テーブル自体の幅を「なりゆき」にする */
#result {
    width: auto !important; /* 100%に固定せず、中身の文字数に合わせる */
    min-width: 600px; /* ★重要：スマホでもこれだけの幅を確保して、文字が潰れるのを防ぐ */
    margin: 0;
}

/* 1. 外枠をスマホの幅にピタッと合わせる */
#container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important; /* 外枠が横揺れするのを防ぐ */
}

/* 2. 表を囲む箱の設定（ここが重要です） */
.table-responsive {
    width: 100% !important;
    overflow-x: auto !important; /* 横方向にはみ出た分をスクロールさせる */
    display: block !important;   /* ブロック要素として定義 */
    -webkit-overflow-scrolling: touch; /* スマホでスイスイ動くようにする */
}

/* 3. テーブル自体の設定 */
#result {
    width: auto !important;     /* 100%にせず、中身の幅に合わせる */
    min-width: 800px !important; /* ★重要：列が多いので、最低でもこれだけ確保して文字を横に並べる */
    border-collapse: collapse;
}

/* 各セルの幅が潰れないようにする */
#result td, #result th {
    white-space: nowrap !important; /* 文字の途中で勝手に改行させない */
    padding: 8px;
}


