@charset "utf-8";

/* ==========================================================================
   スマートフォン専用スタイル (メニューとメインの順序逆転版)
   ========================================================================== */

/* 1. 全体とコンテナの最小幅制限を解除し、スマホ幅にフィットさせる */
body {
    min-width: 100% !important;
}

.container1 {
    width: 100% !important;
    min-width: 100% !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
}

/* 2. 親要素をFlexboxにして、上下の並び順を「逆（メインが上、メニューが下）」にする */
.contents {
    display: flex !important;
    flex-direction: column-reverse !important; /* 💡 これで上下が逆になります */
    width: 100% !important;
}

.contentmenu {
    display: block !important;
    width: 100% !important; /* 370px固定を解除 */
    margin-top: 20px !important; /* 下に来るので、上に余白を作る */
    margin-bottom: 0 !important;
}

.contentmain {
    display: block !important;
    width: 100% !important;
    margin: 10px 0 !important;
    padding: 0 !important;
}

/* 3. 詳細画面（左右2分割レイアウトなど）があれば縦並びに */
.contentleft, 
.contentright {
    display: block !important;
    width: 100% !important;
    margin-bottom: 15px !important;
}

/* 4. 横長テーブル（一覧表など）が画面からはみ出さないように横スクロール可能にする */
table#ichiran, 
table#entry, 
table#ichiran_midashi, 
table#detail_midashi {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    white-space: nowrap !important;
}

/* 5. ヘッダーの文字がスマホでデカすぎないように微調整 */
header a {
    font-size: 140% !important;
}

header .head3 {
    display:none;
}

/* 6. 入力画面（Entry）の項目名幅をスマホ用に調整 */
th.entry {
    width: 30% !important;
}

/* 7. 掲示板詳細の余白がスマホだと広すぎるので調整 */
div#detail {
    margin: 15px 5px !important;
}