/*
 * saimc テンプレートのレスポンシブ用の追加（2026-10-25、MobileJoomla の撤去に合わせて追加。Redmine #495）
 * 見た目は PC のまま。狭い画面で横にはみ出さず、1 列で読めるようにするだけ
 * index.php で viewport の meta とこのファイルを読み込む（ほかの CSS のあと）。新しい拡張・フレームワークは使っていない
 */

/* 画像・地図・PDF の埋め込みは、枠より広くならないようにする（PC の幅では今と同じ大きさ） */
#all img { max-width: 100%; height: auto; }
#main iframe, #main embed, #main object, #main video { max-width: 100%; }
#main iframe.access-map { height: auto; aspect-ratio: 3 / 2; }

/* メインメニューのたたみ（javascript/responsive-menu.js）。PC の幅ではボタンを出さない */
.saimc-menu-toggle { display: none; }

/* タブレット以下（768px まで）: 1 列にする。右の列のうちメニューは本文の前、ブログ新着情報・現在の彩強位は本文の後ろ */
@media screen and (max-width: 768px) {
    #contentarea, #contentarea2 { display: flex; flex-direction: column; padding-left: 12px; padding-right: 12px; }
    #contentarea #breadcrumbs, #contentarea2 #breadcrumbs { order: 0; margin-right: 0; }
    #nav { display: contents; }
    #nav > .moduletable_menu { order: 1; margin: 0 0 15px; }
    #wrapper, #wrapper2 { order: 2; float: none; width: auto; }
    #nav > .moduletable { order: 3; margin: 0 0 20px; }
    #right { order: 4; float: none; width: auto; }
    #main { overflow-wrap: anywhere; word-break: normal; }
    #main table { display: block; max-width: 100%; overflow-x: auto; }
    #main iframe { width: 100%; }
    #footer { width: auto; }
    #breadcrumbs ul, #breadcrumbs li { display: inline; }
    /* ハンバーガーメニュー: 見出し「Main Menu」の代わりにボタン。閉じているときはメニューの一覧を隠す */
    .saimc-js-menu #nav > .moduletable_menu > h3 { display: none; }
    .saimc-js-menu #nav > .moduletable_menu:not(.is-open) > ul { display: none; }
    .saimc-menu-toggle {
        display: flex; align-items: center; gap: 10px; width: 100%; margin: 0 0 8px; padding: 10px 12px;
        font: inherit; font-size: 15px; font-weight: bold; color: #444; text-align: left; cursor: pointer;
        background: #f4f4f4; border: 1px solid #ddd; border-radius: 4px;
    }
    .saimc-menu-toggle:focus-visible { outline: 3px solid #4a90d9; outline-offset: 2px; }
    .saimc-menu-icon, .saimc-menu-icon::before, .saimc-menu-icon::after {
        display: block; width: 22px; height: 3px; background: #555; border-radius: 2px; content: ""; position: relative;
    }
    .saimc-menu-icon::before { position: absolute; top: -7px; }
    .saimc-menu-icon::after { position: absolute; top: 7px; }
    .saimc-menu-toggle[aria-expanded="true"] .saimc-menu-icon { background: transparent; }
    .saimc-menu-toggle[aria-expanded="true"] .saimc-menu-icon::before { top: 0; transform: rotate(45deg); }
    .saimc-menu-toggle[aria-expanded="true"] .saimc-menu-icon::after { top: 0; transform: rotate(-45deg); }
}

/* スマホ（480px まで）: 見出し・本文の大きな文字を少し小さくし、ロゴの上の余白を詰める */
@media screen and (max-width: 480px) {
    #logo { margin: 16px 12px 8px; }
    #main [style*="font-size: 24px"], #main [style*="font-size:24px"] { font-size: 18px !important; }
    #main h1, #main h2 { font-size: 1.3em; }
}