/*
 * responsive.css
 * スマートフォン対応用の上書きCSS
 *
 * 既存の menu.css / menubar.css のデザインを優先し、
 * 画面幅に応じて固定幅のレイアウトだけを可変化します。
 *
 * 画像を変更するときは image/ フォルダ内の対象ファイルを差し替えてください。
 */

/* =========================================================
   共通
   ========================================================= */
html {
    scroll-behavior: smooth;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    overflow-x: hidden;
    color: #222;
    background: #fff;
}

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

iframe {
    max-width: 100%;
}

table {
    max-width: 100%;
}

input,
select,
textarea,
button {
    max-width: 100%;
    box-sizing: border-box;
}

/* =========================================================
   PCレイアウト（既存の固定幅を維持）
   ========================================================= */
#container {
    max-width: 1070px;
}

#leftcontent {
    width: 280px;
}

#rightcontent {
    width: 780px;
    float: right;
}

#rightcontent > img {
    max-width: 100%;
    height: auto;
}

#flasharea {
    max-width: 780px;
}

#my_flash {
    max-width: 100%;
}

#swiffycontainer {
    max-width: 100%;
}

#sitemaparea {
    max-width: 1070px;
}

#footer {
    max-width: 1210px;
}

/* =========================================================
   900px以下：タブレット
   ========================================================= */
@media (max-width: 1100px) {
    #header,
    #logo,
    #cssmenu {
        width: 100%;
        max-width: 1110px;
    }

    #container {
        width: calc(100% - 24px);
        max-width: 1070px;
    }

    #sitemaparea {
        width: calc(100% - 24px);
        max-width: 1070px;
    }

    #sitemap {
        width: 100%;
        max-width: 1000px;
    }

    #topframe,
    #sideframe,
    #bottomframe {
        max-width: 100%;
    }

    #footer {
        width: 100%;
    }
}

/* =========================================================
   700px以下：スマートフォン
   ========================================================= */
@media (max-width: 700px) {
    body {
        font-size: 16px;
        line-height: 1.65;
    }

    /* ヘッダー */
    #headerbg {
        min-width: 0;
        height: 48px;
    }

    #header {
        width: 100%;
        height: 48px;
        overflow: hidden;
    }

    #divh1 {
        float: none;
        width: 100%;
        height: 48px;
        padding: 7px 12px;
        text-align: center;
    }

    #divh1 h1 {
        font-size: 13px;
        line-height: 1.3;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #logo {
        width: 100%;
        height: 64px;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    }

    /* ナビゲーション
       既存の5分類とサブメニューをそのまま使い、
       タップしやすい2列レイアウトにします。 */
    #menubg {
        min-width: 0;
        height: auto;
        padding: 3px 6px 6px;
    }

    #cssmenu {
        width: 100%;
        float: none;
    }

    #cssmenu > ul {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4px;
    }

    #cssmenu > ul > li {
        float: none;
        width: auto;
        height: auto;
        min-width: 0;
        margin: 0;
        background-color: #bbe6c0;
    }

    #cssmenu > ul > li:first-child {
        grid-column: 1 / -1;
    }

    #cssmenu > ul > li > a {
        display: block;
        padding: 0;
        line-height: 0;
    }

    #cssmenu > ul > li > a img {
        display: block;
        width: 100%;
        height: auto;
        max-height: 38px;
        object-fit: contain;
    }

    /* PCのホバー式サブメニューをスマホでは常時表示 */
    #cssmenu > ul > li > ul {
        position: static;
        display: block;
        width: 100%;
        min-width: 0;
        margin: 0;
        padding: 0;
        opacity: 1;
        visibility: visible;
        border-radius: 0;
        box-shadow: none;
        background: #fafafa;
    }

    #cssmenu > ul > li > ul::before {
        display: none;
    }

    #cssmenu ul ul a {
        display: block;
        padding: 6px 8px;
        font-size: 15px;
        line-height: 1.35;
        border-top: 1px solid #e1e1e1;
    }

    /* メイン：左右2カラムを縦積みに */
    #container {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: none;
        padding: 0 10px;
    }

    #container > br:first-child {
        display: none;
    }

    #leftcontent,
    #rightcontent {
        float: none;
        width: 100%;
        max-width: none;
        margin: 0;
    }

    #leftarea {
        float: none;
        width: 100%;
        padding: 12px 0;
        text-align: center;
    }

    #leftarea > a {
        display: inline-block;
        vertical-align: top;
        max-width: 48%;
        margin: 3px 1px;
    }

    #leftarea > a img {
        display: block;
        width: 100%;
        max-width: 220px;
        height: auto;
    }

    #leftarea > img {
        max-width: 100%;
        height: auto;
    }

    #space {
        height: 5px;
        width: 100%;
    }

    #maparea {
        display: block;
        width: 100%;
        max-width: 360px;
        height: 240px;
        margin: 8px auto;
    }

    #mapadress {
        width: 100%;
        max-width: 360px;
        margin: 0 auto;
        text-align: center;
        overflow: visible;
    }

    #rightcontent {
        padding-top: 8px;
    }

    #rightcontent > img {
        display: block;
        width: 100% !important;
        max-width: 780px;
        height: auto !important;
    }

    /* 既存ページ内の固定幅を画面幅に合わせる */
    #rightcontent > div,
    #rightcontent > table,
    #rightcontent section,
    #rightcontent article {
        max-width: 100%;
    }

    #byouintop,
    #byouinbottom,
    #ishishoukai,
    #gakkai,
    #tiikirenkei,
    #news,
    #sisetsu,
    #ryokouinfo,
    #mousi,
    #youi,
    #sche,
    #online,
    #setubitop,
    #setubimiddle,
    #sinryo,
    #sinryotop,
    #tousekitop,
    #tousekibottom,
    #sougeibottom,
    #sougeimap,
    #accessbottom,
    #qacenter,
    #mailformbottom,
    #footcarebottom,
    #recruitbottom,
    #infulbottom,
    #kinenbottom,
    #sougeiQtop,
    #sougeiQcombo,
    #sougeiQarea,
    #sougeidummy,
    #scecomment,
    #sidearea {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* 横並び部分はスマホでは縦積み */
    #byouintopleft,
    #byouintopright,
    #byouinbottomleft,
    #byouinbottomright,
    #ishishoukaileft,
    #ishishoukairight,
    #rinfoleft,
    #rinforight,
    #mousileft,
    #mousiright,
    #youileft,
    #youiright,
    #scheleft,
    #scheright,
    #sinryotopleft,
    #sinryotopright,
    #sinryoleft,
    #sinryoright,
    #tousekileft,
    #tousekiright,
    #sougeibottomleft,
    #sougeibottomright,
    #accesstopleft,
    #accesstopright,
    #sougeiQarealeft,
    #sougeiQarearight,
    #kansenleft,
    #kansenright {
        float: none !important;
        width: 100% !important;
        max-width: 100%;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    #ishishoukaileft,
    #footcareleft,
    #sougeiQarealeft {
        display: none;
    }

    /* 表：画面外にはみ出させず、長文は折り返す */
    #rightcontent table {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    #rightcontent td,
    #rightcontent th {
        max-width: 100%;
        word-break: break-word;
        overflow-wrap: anywhere;
        vertical-align: top;
    }

    /* 画像を含む横並び表は縦積みに */
    #aisatusideframe table tr,
    #aisatusideframe table td {
        display: block;
        width: 100% !important;
    }

    #aisatusideframe {
        width: 100% !important;
        background-size: 100% auto;
        background-repeat: repeat-y;
    }

    #aisatutopframe,
    #aisatubottomframe {
        width: 100% !important;
        background-size: 100% 100%;
    }

    #aisatutopframe {
        height: 45px;
    }

    #aisatubottomframe {
        height: 65px;
    }

    #aisatuarea {
        float: none;
        width: 100% !important;
        font-size: 16px;
    }

    /* 画像だけのボタン群 */
    #sidearea {
        text-align: center;
    }

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

    /* トップページのアニメーション */
    #flasharea {
        width: 100% !important;
        height: auto;
        float: none;
    }

    #my_flash {
        width: 100% !important;
        height: auto;
        min-height: 0;
        border-width: 5px;
    }

    #swiffycontainer {
        width: 100% !important;
        height: 220px !important;
    }

    /* トップページのタブ */
    #info {
        width: 100% !important;
        height: auto;
        float: none;
        overflow: visible;
    }

    div.tabbox {
        width: 100% !important;
        height: auto;
        float: none;
    }

    p.tabs {
        display: flex;
        flex-wrap: wrap;
        gap: 2px;
    }

    p.tabs a {
        float: none;
        flex: 1 1 calc(50% - 2px);
        width: auto;
        min-width: 0;
        padding: 7px 4px;
        font-size: 14px !important;
    }

    div.tab,
    div#tab1,
    div#tab2,
    div#tab3,
    div#tab4,
    div#tab5 {
        width: 100% !important;
        height: 300px;
        overflow: auto;
    }

    /* インフルエンザ等の4列ボックス */
    #infulbox1,
    #infulbox2,
    #infulbox3,
    #infulbox4 {
        float: none !important;
        display: inline-block;
        width: 48% !important;
        height: auto;
        min-height: 180px;
        vertical-align: top;
    }

    /* サイトマップ */
    #sitemaparea {
        width: calc(100% - 20px);
        height: auto;
        min-height: 0;
        margin: 20px auto;
        display: block;
    }

    #sitemap {
        width: 100%;
        height: auto;
        min-height: 0;
        border-width: 6px;
        border-radius: 20px;
    }

    #topframe,
    #sideframe,
    #bottomframe {
        width: 100% !important;
        background-size: 100% 100%;
    }

    #topframe {
        height: 90px;
    }

    #sideframe {
        height: auto;
        min-height: 320px;
        background-size: 100% 100%;
    }

    #bottomframe {
        height: 70px;
    }

    #linkarea {
        width: 100%;
        height: auto;
        padding: 12px;
        float: none;
    }

    #linkspace {
        display: none;
    }

    #link1,
    #link2,
    #link3,
    #link4 {
        float: none;
        width: 100%;
        margin-bottom: 12px;
    }

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

    /* 上に戻る：jQueryを使わず、HTMLのアンカー＋CSSで動作 */
    #back-top {
        position: fixed;
        right: 8px;
        bottom: 12px;
        z-index: 1000;
        margin: 0;
    }

    #back-top a {
        display: block;
        width: 52px;
        height: 52px;
    }

    #back-top span {
        display: block;
        width: 52px;
        height: 52px;
        margin: 0;
        background-size: contain;
        opacity: 0.85;
    }

    /* フッター */
    #footerbg {
        min-width: 0;
    }

    #footer {
        width: 100%;
        height: auto;
        min-height: 50px;
        padding: 10px;
        overflow: visible;
    }

    #footer h2 {
        font-size: 12px;
        line-height: 1.5;
    }

    /* 固定幅のインラインスタイルにも対応 */
    [style*="width:"] {
        max-width: 100% !important;
    }

    [style*="height:"] {
        max-height: none;
    }
}

/* =========================================================
   画像差し替え用の目印
   ========================================================= */
.image-replaceable {
    display: block;
    max-width: 100%;
    height: auto;
}

.incho-div {
  display: flex;
  justify-content: center; /* 横方向の中央揃え */
  align-items: center;     /* 縦方向の中央揃え（不要なら消してOK） */
}