@charset "utf-8";
/*
Theme Name: 東林間商店街 テスト8
*/

*{margin:0;padding:0;}

body{
font: 14px/1.6 "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
color:#333;
}

a{color:#666;text-decoration:none;}
a:hover{color:#888;}
a:active, a:focus {outline: 0;}
img{border:0;vertical-align: bottom;}
.clear{clear:both;}
/*************
全体
*************/
#wrapper{
margin: 0 auto;
overflow: hidden;
}

/*************
/* ヘッダー
*************/
#header{
background: #fff;
margin: 0 0 0px;
padding: 0px 0 0;
}

#logo{
margin: 20px auto ;
width: 980px;
}
#mainimg_outer{
    display: table;
    margin: 0 auto 10px;
}
#mainimg{
    background: url("images/index/main01.jpg") repeat scroll center center rgba(0, 0, 0, 0);
    display: table-cell;
    height: 520px;
    width: 1792px;
}
/*************
/* トップナビゲーション
*************/
#topnav {
width: auto;
height: 66px;
padding: 0px 0 10px;
border-bottom: 5px solid #e2e5e8;
}
#topnav ul{
width: 980px;
height: 66px;
margin: 0px auto 0px;
border-left: 2px solid #e2e5e8;
}

#topnav ul li{
float:left;
list-style:none;
height: 66px;
border-right: 2px solid #e2e5e8;
}

#topnav ul a{
display: block;
height: 66px;
}

/*************
コンテンツ全体
*************/
#container{
margin: 0 auto;
width: 980px;
padding: 20px 0;
overflow: hidden;
}
h2.pagetitle{
margin-bottom: 20px;
color: #fff;
background: url(images/contents/h2_bg.png) no-repeat;
height: 45px;
line-height: 45px;
padding: 0 0 0 20px;
}
h3{
margin-bottom: 15px;
color: #fff;
background: url(images/contents/h3-bg1.png) no-repeat;
line-height: 30px;
padding: 0 0 0 20px;
}
h4{
	border-bottom: solid #e2e5e8;
	margin-bottom: 10px;
}
/*************
メイン（右側）コンテンツ
*************/
#main{
float: right;
width: 730px;
padding: 0px 0 40px;
display: inline;
}

#main ul{
}
#main li{
}

img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
img.alignright {
    padding: 4px;
    margin: 0 0 2px 7px;
    display: inline;
}
img.alignleft {
    padding: 4px;
    margin: 0 7px 2px 0;
    display: inline;
}
.alignright {
    float: right;
}
.alignleft {
    float: left;
}
.last{margin-right:0;}


/*************
サイド（左側）コンテンツ
*************/
#sidebar {
    float: left;
    width: 220px;
}
.side_box{
border: 5px solid #e2e5e8;
}
.side_title{
    color: #000;
    font-size: 12px;
    font-weight: bold;
    padding: 13px 15px 0;
    position: relative;
}
#sidebar ul{
}

#sidebar .industry{
}

#sidebar li{
list-style: none;
}

#sidebar li a{
    cursor: pointer;
    display: table;
    line-height: 1.1;
    padding: 6px 15px;
    table-layout: fixed;
    text-decoration: none;
    width: 156px;
}

#sidebar li a:hover{
}
.side_img{
    display: table-cell;
    text-align: left;
    vertical-align: top;
    width: 40px;
}
.side_txt{
    display: table-cell;
    font-size: 12px;
    vertical-align: middle;
    width: 141px;
    word-wrap: break-word;
}
.separator{
    border-bottom: 2px solid #f9fafa;
    border-top: 1px solid #ebedef;
}
.separator hr{
    display: none;
}
#sidebar .last{
margin-bottom: 0;
padding-bottom: 0;
}

/*************
/* フッター
*************/
#footer{
    clear: both;
    margin: 0px 0 0;
    background: #02ab98;
    color: #fff;
}
#footer_info{
width: 980px;
margin: 0px auto;
font-size: 12px;
padding: 20px 0;
text-align: right;
}
#footer_info span{
font-size: 14px;
font-weight: bold;
margin: 0 0 5px;
display: block;
}
address{
width: 980px;
margin: 0px auto;
padding:7px;
text-align: right;
font-style:normal;
font-size: 12px;
clear:both;
}
/*************
/* table
*************/
#main table{
    border: 1px solid #e3e3e3;
    border-collapse: collapse;
    border-spacing: 0;
    clear: both;
    line-height: 1.4;
    margin: 0 0 30px;
    width: 730px;
}
#main thead{
}
#main tbody{
}
#main tr{
}
#main tbody tr:nth-child(2n+1){
background: #ffffff;
}
#main tbody tr {
background: #f6f3f8;
}
#main th{
    background: none repeat scroll 0 0 #02ab98;
    border-color: #e3e3e3;
    border-style: solid;
    border-width: 0 0 1px 1px;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    line-height: 120%;
    padding: 10px;
    text-align: center;
}
#main td{
    border-color: #e3e3e3;
    border-style: solid;
    border-width: 0 0 1px 1px;
    min-width: 45px;
    padding: 10px;
    text-align: left;
    font-size: 13px;
}
/*************
/* index
*************/
#index{
}
.index_block{
width: 730px;
padding: 5px 0;
background: #fff5f8;
display: table;
}
.index_block .box{
    border-right: 2px dotted #ffc8b2;
    width: 202px;
    padding: 15px 20px;
display: table-cell;
}
.index_block .last{
    border: medium none;
}
.box img{
    margin: 0 0 10px;
}
.box h2{
    background: initial;
    color: #333333;
    font-size: 16px;
    line-height: 1.6;
    margin: 0 0 5px;
}
.box p{
    font-size: 13px;
}
.box .link{
    text-align: right;
}
.news_block{
    border-bottom: 1px dashed #5f5f34;
    margin: 30px 0 0;
}
.news_block .subtitle{
    color: #5f5f34;
    font-size: 20px;
    margin: 0px 0 5px 15px;
}
.news_block a{
    display: block;
    border-top: 1px dashed #5f5f34;
}
.news_block dl{
    margin: 10px 15px;
}
.news_block dt{
    float: left;
    width: 110px;
}
.news_block dd{
    margin: 0 0 0 110px;
}
/*************
/* お知らせ
*************/
.news-list{
	width: 230px;
	float:left;
	margin: 0 20px 20px 0;
}
.news-list:nth-of-type(3n+1){
	margin: 0 0 20px 0;
}
.news-list a{
	border: none;
}
.news-list_thumb{
	background: #f0f0f0 none repeat scroll 0 0;
	margin: 0 0 10px;
}
.news-list_tag{
}
.news-list_tag .cat{
    background: #02ab98;
    color: #ffffff;
    display: inline-block;
    font-size: 12px;
    line-height: 1;
    margin: 0 10px 0 0;
    padding: 3px 10px;
}
.news-list_tag .date{
    font-size: 14px;
    line-height: 1;
    padding: 3px 10px;
}
.news-list_content{
}
.news-list_content .news-list_title{
    font-size: 15px;
    font-weight: bold;
    margin: 5px 0;
}
.news-list_content p{
    font-size: 13px;
	min-height: 62px;
}


/*************
taxonomy
*************/
.tax-industry h2.pagetitle{
background: none;
padding: 0;
}
.shoplist{
overflow: hidden;
}
.shoplist a{
display: block;
overflow: hidden;
}
/* 偶数行の背景色を変更 */
.shoplist a:nth-child(even){
background-color: #ffffff;
}
 
/* 奇数行の背景色を変更 */
.shoplist a:nth-child(odd){
background-color: #f6f3f8;
}
.list_box{
padding: 20px;
line-height: 1.4;
height: 60px
}
.cat_icon{
    float: right;
    margin: 15px 0;
}
.cat_icon img{
    margin: 0 0 0 5px;
}
.list_img{
    display: block;
    float: left;
    height: 60px;
    text-align: center;
    width: 100px;
    margin-right: 20px;
}
.shoplist .catch{
    color: #727171;
    font-size: 13px;
    margin-bottom: 10px;
    min-height: 1em;
}
.shoplist .title{
    color: #011841;
    font-size: 16px;
}
/*************
加盟店紹介
*************/
.spotbox{
    background: #fff;
    overflow: hidden;
    padding: 0 0 15px;
}
#imgbox{
    float: left;
    margin: 0 0 0px;
    width: 345px;
    min-height: 10px;
}
#imgdata1{
}
.imgdata2{
    float: left;
    margin: 4px 4px 0 0;
    width: 168px;
}
#disbox{
    float: left;
    margin: 0 15px 0px 25px;
    width: 345px;
}
#disbox .cat{
    height: 40px;
    line-height: 40px;
    margin: 0 0 10px;
}
#disbox h2{
    font-size: 18px;
    font-weight: bold;
    padding: 0 0 10px;
    background: none;
    margin: 0 0 10px;
}
#disbox h3{
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    color: #555;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.3;
    margin-bottom: 10px;
    padding: 10px 0 10px 0px;
}
#disbox h3.use{
    background: url("images/icon/member.png") no-repeat right center ;
}
#disbox h3 span{
font-size: 14px;
font-weight:normal;
letter-spacing: 0px;
line-height: 1;
padding: 15px 10px 10px 0px;
font-family: 'Nunito', sans-serif;
}
#disbox .subtitle{
font-size: 14px;
letter-spacing: 0px;
line-height: 1;
padding: 15px 0px 10px;
font-family: 'Nunito', sans-serif;
}
.datalist{
    border-top: 1px solid #ccc;
    padding: 5px 0px 5px 0;
    font-size: 13px;
}
.datalist dt{
    float: left;
    font-weight: bold;
    width: 25%;
    padding: 0 10px 0 0;
}
.datalist dd{
    margin: 0px 0 0px 25%;
    border-left: 1px solid #ddd;
    color: #777;
    padding: 2px 10px 2px 20px;
    min-height: 17px;
}
#disbox p{
    color: #666;
    font-size: 13px;
    line-height: 1.7;
    padding: 10px 0;
}
.sales{
    margin-top: 0px;
}


/*************
加盟店紹介　カテゴリ色変更
*************/
.gourmet_detail h2, .gourmet_detail h3 span, .gourmet_detail .subtitle{
    color: #e85521;
}
.gourmet_detail h2{
    border-bottom: 1px dotted #e85521;
}
.gourmet_detail h3{
    border-bottom: 2px solid #e85521;
}
.gourmet_detail .favor{
    border-top: 1px dotted #e85521;
}

.food_detail h2, .food_detail h3 span, .food_detail .subtitle{
    color: #a9cd37;
}
.food_detail h2{
    border-bottom: 1px dotted #a9cd37;
}
.food_detail h3{
    border-bottom: 2px solid #a9cd37;
}
.food_detail .favor{
    border-top: 1px dotted #a9cd37;
}

.necessities_detail h2, .necessities_detail h3 span, .necessities_detail .subtitle{
    color: #0079c2;
}
.necessities_detail h2{
    border-bottom: 1px dotted #0079c2;
}
.necessities_detail h3{
    border-bottom: 2px solid #0079c2;
}
.necessities_detail .favor{
    border-top: 1px dotted #0079c2;
}

.fashion_detail h2, .fashion_detail h3 span, .fashion_detail .subtitle{
    color: #b7347a;
}
.fashion_detail h2{
    border-bottom: 1px dotted #b7347a;
}
.fashion_detail h3{
    border-bottom: 2px solid #b7347a;
}
.fashion_detail .favor{
    border-top: 1px dotted #b7347a;
}

.hobby_detail h2, .hobby_detail h3 span, .hobby_detail .subtitle{
    color: #f9be00;
}
.hobby_detail h2{
    border-bottom: 1px dotted #f9be00;
}
.hobby_detail h3{
    border-bottom: 2px solid #f9be00;
}
.hobby_detail .favor{
    border-top: 1px dotted #f9be00;
}

.precious_detail h2, .precious_detail h3 span, .precious_detail .subtitle{
    color: #a5aeb5;
}
.precious_detail h2{
    border-bottom: 1px dotted #a5aeb5;
}
.precious_detail h3{
    border-bottom: 2px solid #a5aeb5;
}
.precious_detail .favor{
    border-top: 1px dotted #a5aeb5;
}

.cleaning_detail h2, .cleaning_detail h3 span, .cleaning_detail .subtitle{
    color: #00b8ee;
}
.cleaning_detail h2{
    border-bottom: 1px dotted #00b8ee;
}
.cleaning_detail h3{
    border-bottom: 2px solid #00b8ee;
}
.cleaning_detail .favor{
    border-top: 1px dotted #00b8ee;
}

.medical_detail h2, .medical_detail h3 span, .medical_detail .subtitle{
    color: #ed869b;
}
.medical_detail h2{
    border-bottom: 1px dotted #ed869b;
}
.medical_detail h3{
    border-bottom: 2px solid #ed869b;
}
.medical_detail .favor{
    border-top: 1px dotted #ed869b;
}

.housing_detail h2, .housing_detail h3 span, .housing_detail .subtitle{
    color: #876132;
}
.housing_detail h2{
    border-bottom: 1px dotted #876132;
}
.housing_detail h3{
    border-bottom: 2px solid #876132;
}
.housing_detail .favor{
    border-top: 1px dotted #876132;
}

.finance_detail h2, .finance_detail h3 span, .finance_detail .subtitle{
    color: #3eb271;
}
.finance_detail h2{
    border-bottom: 1px dotted #3eb271;
}
.finance_detail h3{
    border-bottom: 2px solid #3eb271;
}
.finance_detail .favor{
    border-top: 1px dotted #3eb271;
}

.service_detail h2, .service_detail h3 span, .service_detail .subtitle{
    color: #ba8cbd;
}
.service_detail h2{
    border-bottom: 1px dotted #ba8cbd;
}
.service_detail h3{
    border-bottom: 2px solid #ba8cbd;
}
.service_detail .favor{
    border-top: 1px dotted #ba8cbd;
}

/*************
りんりんカード
*************/
.card #main dl{
	padding-left: 15px;
	margin-bottom: 20px
}
.card #main p{
	margin-bottom: 15px;
	padding-left: 15px;
}
.card #main ul{
	padding-left: 15px;
	padding-bottom: 10px;
}

/*************
googlemap
*************/
.infowindow{
max-width: 250px;
}
.infowindow span{
    display: inline-block;
    text-align: right;
    width: 100%;
}
/*************
はじめに
*************/
.introduction .l_text{
margin-bottom: 30px;
width: 380px;
float: left;
line-height: 1.8;
}

.introduction h3{
clear: both;
}

.introduction #main img{
background: #ddd;
margin-bottom: 30px;
width: 330px;
height: 220px;
float: right;
}
/*************
イベント＆祭
*************/
.event{
}
.event .l_text{
margin-bottom: 30px;
width: 380px;
float: left;
line-height: 1.8;
}

.event h3{
clear: both;
}

.event #main img{
background: #ddd;
margin-bottom: 30px;
width: 330px;
height: 220px;
float: right;
}

/*************
商店街マップ
*************/
.map_img img.end {
    margin-right: 0;
}

.map_img img {
    margin: 0 30px 30px 0;
}

.map_img {
margin-top: 30px;
}

/* =========================================================
   Smartphone / tablet responsive adjustments
   The desktop layout above is intentionally preserved.
   ========================================================= */
.mobile-menu-toggle{display:none;}
.mobile-top-menu{display:none;}
.nav_label{display:none;}

/* Prevent legacy fixed-width content from forcing a horizontal page scroll. */
#container img,
#main img,
#sidebar img{max-width:100%;height:auto;}
#main iframe{max-width:100%;}

@media screen and (max-width: 980px){
    #logo,
    #container,
    #footer_info,
    address{width:auto;max-width:none;margin-left:15px;margin-right:15px;}
    #mainimg_outer{width:100%;}
    #mainimg{width:100%;}
    #topnav ul{width:calc(100% - 30px);}
    #main{width:calc(100% - 240px);}
}

@media screen and (max-width: 760px){
    html,body{width:100%;overflow-x:hidden;}
    body{font-size:15px;line-height:1.7;}
    #wrapper{width:100%;overflow:visible;}

    #header{width:100%;}
    #logo{width:auto;margin:12px 15px;text-align:center;}
    #logo img{width:auto;max-width:100%;height:auto;}

    /* Home hero */
    #mainimg_outer{display:block;width:100%;margin:0 0 8px;}
    #mainimg{
        display:block;
        width:100%;
        height:240px;
        background-position:center center;
        background-size:cover;
    }

    /* Mobile navigation */
    #topnav{
        height:auto;
        padding:0;
        border-bottom:3px solid #e2e5e8;
        background:#fff;
    }
    .mobile-menu-toggle{
        display:block;
        width:100%;
        min-height:50px;
        padding:10px 15px;
        border:0;
        border-bottom:1px solid #e2e5e8;
        background:#fff;
        color:#333;
        font-size:16px;
        font-weight:bold;
        text-align:left;
        cursor:pointer;
    }
    .mobile-menu-toggle span{float:right;font-size:22px;line-height:1;}
    #topnav ul{
        display:none;
        width:100%;
        height:auto;
        margin:0;
        border-left:0;
        background:#fff;
    }
    #topnav ul.is-open{display:block;}
    #topnav ul li{
        float:none;
        width:100%;
        height:auto;
        border-right:0;
        border-bottom:1px solid #e2e5e8;
    }
    #topnav ul a{
        display:block;
        width:100%;
        height:auto;
        min-height:50px;
        box-sizing:border-box;
        padding:13px 15px;
        color:#333;
        font-size:15px;
        font-weight:bold;
    }
    #topnav ul a img{display:none;}
    .nav_label{display:block;}

    #container{
        width:auto;
        margin:0;
        padding:15px;
        overflow:visible;
    }
    #main,
    #sidebar{
        float:none;
        display:block;
        width:100%;
        box-sizing:border-box;
    }
    #main{padding:0 0 25px;}
    #sidebar{margin-top:10px;}

    h2.pagetitle{
        height:auto;
        min-height:45px;
        line-height:1.4;
        box-sizing:border-box;
        padding:10px 15px;
        margin-bottom:15px;
        background-size:auto 45px;
        font-size:20px;
    }
    h3{padding-left:15px;}

    /* Home cards */
    .index_block{
        width:100%;
        box-sizing:border-box;
        display:block;
        padding:0;
    }
    .index_block .box,
    .index_block .last{
        display:block;
        width:100%;
        box-sizing:border-box;
        padding:15px;
        border-right:0;
        border-bottom:2px dotted #ffc8b2;
    }
    .index_block .box:last-child{border-bottom:0;}
    .box img{display:block;width:100%;max-width:100%;height:auto;margin:0 auto 10px;max-height: 170px;object-fit: cover;}
    .box h2{font-size:18px;}
    .box p{font-size:14px;}

    .news_block{margin-top:20px;}
    .news_block .subtitle{font-size:19px;margin-left:5px;}
    .news_block dl{margin:10px 5px;}
    .news_block dt{float:none;width:auto;font-weight:bold;}
    .news_block dd{margin:2px 0 0;}

    /* News cards */
    .news-list,
    .news-list:nth-of-type(3n+1){
        width:100%;
        float:none;
        margin:0 0 20px;
    }

    /* Sidebar */
    .side_box{border-width:3px;}
    .side_title{font-size:14px;padding:12px 12px 5px;}
    #sidebar li a{
        display:flex;
        align-items:center;
        width:auto;
        min-height:48px;
        box-sizing:border-box;
        padding:8px 12px;
        line-height:1.3;
    }
    .side_img{display:block;flex:0 0 40px;width:40px;}
    .side_txt{display:block;width:auto;font-size:14px;}

    /* Merchant list */
    .list_box{
        position:relative;
        height:auto;
        min-height:80px;
        box-sizing:border-box;
        padding:15px 52px 15px 15px;
    }
    .list_img{
        width:80px;
        height:auto;
        min-height:60px;
        margin-right:12px;
    }
    .list_img img{max-width:80px;height:auto;}
    .cat_icon{position:absolute;right:12px;top:0;margin:10px 0;}
    .shoplist .catch{font-size:12px;margin-bottom:4px;}
    .shoplist .title{font-size:16px;}

    /* Merchant detail */
    #imgbox,
    #disbox{
        float:none;
        width:100%;
        margin:0;
        box-sizing:border-box;
    }
    #imgbox{margin-bottom:15px;}
    #imgdata1 img{display:block;width:auto;max-width:100%;height:auto;margin:0 auto;}
    .imgdata2{width:calc(50% - 3px);margin:6px 6px 0 0;box-sizing:border-box;}
    .imgdata2:nth-of-type(even){margin-right:0;}
    .imgdata2 img{display:block;width:100%;height:auto;}
    #disbox h2{font-size:19px;}
    #disbox h3{padding:10px 0;}
    .datalist dt{float:none;width:auto;padding:4px 0;font-size:13px;}
    .datalist dd{margin:0;border-left:0;border-top:1px dotted #ddd;padding:5px 0;min-height:0;}
    #main iframe{display:block;width:100%;height:300px;border:0;}

    /* Generic WordPress content */
    #main .alignleft,
    #main .alignright{float:none;display:block;margin:10px auto;}
    #main table{width:100%;max-width:100%;font-size:12px;table-layout:auto;}
    #main th,#main td{padding:7px 6px;font-size:12px;}
    #main input[type="text"],
    #main input[type="email"],
    #main input[type="tel"],
    #main input[type="url"],
    #main input[type="number"],
    #main textarea,
    #main select{max-width:100%;box-sizing:border-box;}

    #footer{margin-top:10px;}
    #footer_info{
        width:auto;
        margin:0;
        padding:18px 15px;
        text-align:center;
        font-size:12px;
        line-height:1.8;
    }
    #footer_info span{font-size:14px;}
    address{width:auto;margin:0;padding:10px 15px;font-size:11px;}
}

@media screen and (max-width: 420px){
    #mainimg{height:200px;}
    #container{padding:12px;}
    h2.pagetitle{font-size:18px;}
    .index_block .box{padding:13px;}
    .list_img{width:70px;}
    .list_img img{max-width:70px;}
}


/* =========================================================
   Categories inside the smartphone hamburger menu
   ========================================================= */
.mobile-category-menu{display:none;}

@media screen and (max-width: 760px){
    .mobile-category-menu{display:block;}
    .mobile-category-title{
        padding:13px 15px 8px;
        background:#f7f7f7;
        border-top:2px solid #e2e5e8;
        color:#333;
        font-size:15px;
        font-weight:bold;
    }
    .mobile-category-list{
        display:block !important;
        width:100% !important;
        margin:0 !important;
        padding:0 !important;
        border:0 !important;
    }
    #topnav .mobile-category-list li{
        float:none;
        width:100%;
        height:auto;
        border-right:0;
        border-bottom:1px solid #e2e5e8;
    }
    #topnav .mobile-category-list a{
        display:flex;
        align-items:center;
        min-height:48px;
        padding:7px 15px;
        box-sizing:border-box;
        font-size:14px;
        font-weight:normal;
        color:#333;
        text-decoration:none;
    }
    #topnav .mobile-category-list a:hover{background:#f7f7f7;}
    #topnav .mobile-category-list .mobile-cat-icon{
        display:block;
        flex:0 0 40px;
        width:40px;
        margin-right:10px;
        text-align:center;
    }
    #topnav .mobile-category-list .mobile-cat-icon img{
        display:inline-block;
        width:auto;
        max-width:36px;
        height:auto;
        max-height:36px;
        vertical-align:middle;
    }
    /* The desktop sidebar category list is represented by the hamburger menu on mobile. */
    #sidebar .side_box{display:none;}
}

/* Keep room for the menu beside the logo on inner pages. */
@media screen and (max-width: 760px){
    #header.inner-page-header #logo{
        margin:0;
        padding:12px 80px 12px 15px;
        min-height:50px;
        display:flex;
        align-items:center;
        justify-content:flex-start;
        text-align:left;
        box-sizing:border-box;
    }
    #header.inner-page-header #logo img{width:100%;max-width:410px;}
    #header.inner-page-header #topnav{border-bottom:3px solid #e2e5e8;}
    #header.inner-page-header .mobile-menu-toggle{
        width:50px;
        height:50px;
        min-height:50px;
        padding:0;
        border:1px solid #e2e5e8;
        border-radius:4px;
        text-align:center;
        font-size:0;
    }
    #header.inner-page-header .mobile-menu-toggle span{
        float:none;
        font-size:25px;
        line-height:48px;
    }
}

/* The same fixed control and scrollable menu are used on every page. */
@media screen and (max-width: 760px){
    #topnav .mobile-top-menu{
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        width:100%;
        box-sizing:border-box;
        border-top:1px solid #e2e5e8;
        background:#fff;
    }
    #topnav .mobile-top-menu a{
        display:flex;
        align-items:center;
        justify-content:center;
        min-height:50px;
        padding:0;
        box-sizing:border-box;
        border-bottom:1px solid #e2e5e8;
        text-align:center;
    }
    #topnav .mobile-top-menu img{
        display:block;
        width:100%;
        max-width:243px;
        height:auto;
    }
    #topnav .mobile-top-menu a:nth-child(odd){border-right:1px solid #e2e5e8;}
    #topnav .mobile-top-menu a:focus-visible{outline:2px solid #e77e25;outline-offset:-2px;}
}

@media screen and (max-width: 760px){
    #topnav .mobile-menu-toggle,
    #header.inner-page-header .mobile-menu-toggle{
        position:fixed;
        top:calc(12px + env(safe-area-inset-top));
        right:calc(15px + env(safe-area-inset-right));
        width:50px;
        height:50px;
        min-height:50px;
        padding:0;
        border:1px solid #e2e5e8;
        border-radius:4px;
        background:#fff;
        box-shadow:0 2px 9px rgba(0,0,0,.16);
        text-align:center;
        font-size:0;
        z-index:10001;
    }
    #topnav .mobile-menu-toggle span,
    #header.inner-page-header .mobile-menu-toggle span{
        float:none;
        font-size:25px;
        line-height:48px;
    }
    #topnav > #site-navigation{
        position:fixed;
        top:calc(70px + env(safe-area-inset-top));
        right:calc(15px + env(safe-area-inset-right));
        left:auto;
        width:min(340px, calc(100vw - 30px));
        height:auto;
        max-height:calc(100vh - 85px - env(safe-area-inset-top));
        overflow-y:auto;
        overscroll-behavior:contain;
        border:1px solid #e2e5e8;
        background:#fff;
        box-shadow:0 5px 18px rgba(0,0,0,.2);
        z-index:10000;
    }
    body.admin-bar #topnav .mobile-menu-toggle,
    body.admin-bar #header.inner-page-header .mobile-menu-toggle{
        top:calc(58px + env(safe-area-inset-top));
    }
    body.admin-bar #topnav > #site-navigation{
        top:calc(116px + env(safe-area-inset-top));
        max-height:calc(100vh - 131px - env(safe-area-inset-top));
    }
}

/* Legacy inner-page blocks use fixed desktop widths and floated images. */
@media screen and (max-width: 760px){
    #main{min-width:0;overflow-wrap:anywhere;}
    .spotbox{padding:0 15px 15px;}
    #imgbox{overflow:hidden;}
    .event .l_text,
    .introduction .l_text{
        float:none;
        width:100%;
        margin:0 0 18px;
        box-sizing:border-box;
    }
    .event #main img,
    .introduction #main img{
        display:block;
        float:none;
        width:100%;
        max-width:330px;
        height:auto;
        margin:0 auto 24px;
    }
    .event .l_text{width:100%;float:none;}
    .event #main img{width:100%;max-width:100%;height:auto;float:none;}
    .event h3,
    .introduction h3{clear:both;}
    #main table{
        width:100%;
        table-layout:fixed;
    }
    #main th,
    #main td{
        min-width:0;
        overflow-wrap:anywhere;
        word-break:normal;
    }
    #imgbox::after{content:"";display:block;clear:both;}
    #imgdata1 img{max-height:none;}
    #imgbox .imgdata2{float:left;width:calc(50% - 3px);}
    #imgbox .imgdata2:nth-of-type(even){margin-right:6px;}
    #imgbox .imgdata2:nth-of-type(odd){margin-right:0;}
    #disbox{min-width:0;overflow-wrap:anywhere;}
    #disbox .cat{height:auto;min-height:40px;}
    #disbox .cat img{display:block;width:100%;max-width:none;height:auto;}
    #disbox h3.use{padding-right:80px;background-size:30px auto;}
    .datalist{min-width:0;}
    .datalist dd,
    .datalist dd a{overflow-wrap:anywhere;word-break:break-word;}

    /* Keep map category buttons beside the interactive map. */
    .map-layout{
        display:grid;
        grid-template-columns:minmax(0,1fr) 110px;
        gap:8px;
        align-items:start;
        width:100%;
    }
    .map-layout #map_canvas{
        width:100% !important;
        height:460px !important;
        min-width:0;
    }
    .map-layout .map_img{
        display:flex;
        flex-direction:column;
        gap:5px;
        margin:0;
        min-width:0;
    }
    .map-layout .map_img a,
    .map-layout .map_img img{
        display:block;
        width:100%;
        max-width:100%;
        height:auto;
        margin:0 0 3px;
    }
}