@charset 'utf-8';
/**
 * style.css
 * @version 1.0
 * @author  ADVANCED INFORMATION DESIGN Co.,Ltd.
 */

/* reset default browser CSS */
*{ margin: 0; padding:0; }
body, div, dl, dt, dd, ul, ol, li,h1, h2, h3, h4, h5, h6,
pre, form, fieldset, input, textarea, p, blockquote, th, td { margin: 0; padding: 0; }
address, caption, cite, code, dfn, em, strong, th, var { font-style: normal; font-weight: normal; }
table { border-collapse: collapse; border-spacing: 2px; background: transparent; }
h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; }
ul, ol { list-style-position: inside }
img { border: none; vertical-align: bottom; }
img[usemap] { max-width: 100%; height: auto; }
hr { border: none; }

/* font configuration */
body { color: #333f48; font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,Verdana,"ＭＳ ゴシック","Osaka−等幅",sans-serif; font-size: 95%; }
pre, table, input, select, textarea { font: inherit; }
a { color: #2e71b3; text-decoration: underline; }
a:link { color: #2e71b3; text-decoration: underline; }
a:hover { color: #2e71b3; text-decoration: none; }

/* common settings */
img { user-select: none; -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; -khtml-user-select: none; -webkit-user-drag: none; -khtml-user-drag: none; -webkit-touch-callout: none; }
a img { background: none!important; }
a:hover img { opacity: 0.85; filter:alpha(opacity=80); -ms-filter: 'alpha(opacity=85)'; background: none!important; }
::selection { background: #d4dcd6; }
::-moz-selection { background: #d4dcd6; }

/* common classes */
a.disabled { cursor: default; }
.mt1 { margin-top: 10px; }
.mt2 { margin-top: 20px; }
.mt4 { margin-top: 40px; }
.mb1 { margin-bottom: 10px; }
.mb2 { margin-bottom: 20px; }
.mb4 { margin-bottom: 40px; }
.ml01 { margin-left: 1px; }
.ml1 { margin-left: 10px; }
.ml2 { margin-left: 20px; }
.ml4 { margin-left: 40px; }

.w480 { width: 480px; }

.fl { float: left; }
.fr { float: right; }
.txtl { text-align: left; }
.txtc { text-align: center; }
.txtind1 { text-indent: 1em; }
.txtind2 { text-indent: 2em; }
.txtind4 { text-indent: 3em; }

.justifyright, .txtr { text-align: right; }
.clear { clear: both; }
.clearfix:after { clear: both; display: block; content: ''; }
small.caution { display: block; padding-left: 1.5em; color: #cc0052; font-size: 85%; text-indent: -1.5em; line-height: 1.3em; }
small.caution:before { margin-right: 0.2em; content: '※'; }

.sp_only { display: none; }

/* structure */
html, body { line-height: 1.5em; background: #f9f9f9; }
div#wrapper { background-attachment: fixed; background-position: 50% 50%; background-repeat:no-repeat; background-size: cover; }
div#contener { position: relative; min-height: calc(100vh - 280px); }

/* header */
#header { width: 100%; box-shadow: 0px 9px 3px -3px rgba(0,0,0,0.4); background: #f9f9f9; z-index: 9; }
#header h1 { background: #eceff1; font-size: 80%; }
#header h1 span { display: block; width: 1060px; margin: 0 auto; }
#header > div { width: 1060px; margin: 0 auto; padding: 15px 0; }
#header p#logo { float: left; width: 150px; }
#header div#utilities { float: right; width: 870px; height: 45px; font-size: 85%; text-align: right; }
#header div#utilities ul { padding-top: 17px; }
#header div#utilities ul li { display: inline-block; margin: 0 15px 5px 0; list-style: none; vertical-align: bottom; }
#header div#utilities ul li:first-child { margin-left: 0; }
#header div#utilities ul li#utill01,
#header div#utilities ul li#utill03,
#header div#utilities ul li#utill04 { background-position: left 50%; background-repeat: no-repeat; }
#header div#utilities ul li#utill01 { padding-left: 35px; background-image: url('images/bg_utill01.png'); }
#header div#utilities ul li#utill03 { padding-left: 45px; background-image: url('images/bg_utill03.png'); }
#header div#utilities ul li#utill04 { padding-left: 35px; background-image: url('images/bg_utill04.png'); }
#header div#utilities ul li span { display: inline-block; width: 28px; height: 28px; margin-left: 5px; border-radius: 4px; text-align: center; line-height: 28px; }
#header div#utilities ul li span:first-child { margin-left: 0; }
#header div#utilities ul li span:hover { cursor: pointer; }
#header div#utilities ul li#utill01 span,
#header div#utilities ul li#utill03 span { background: #ddd; }
#header div#utilities ul li span.selected { border: red solid 2px; }
#header div#utilities ul li#utill01 span:hover,
#header div#utilities ul li#utill03 span:hover { background: #333f48 !important; color: #fff; }
#header div#utilities ul li#utill02 span:first-child { margin-left: 5px; }
#header div#utilities ul li#utill02 span#wite { background: #fff; border: #ddd solid 1px; }
#header div#utilities ul li#utill02 span#blue { background: #2e71b3; color: #fff; }
#header div#utilities ul li#utill02 span#black { background: #333f48; color: yellow; }
#header div#utilities ul li#utill03 span { width: 5em; }
#header div#utilities ul li select,
#header div#utilities ul li input[type="search"],
#header div#utilities ul li input[type="submit"] { display: inline-block; height: 26px; padding: 2px 5px; }
#header div#utilities ul li input[type="search"] { width: 150px; border-radius: 3px; border: #17a25a solid 2px; }
#header div#utilities ul li input[type="submit"] { width: 28px; margin-left: -3px; border-radius: 3px; border: #17a25a solid 3px; background: #17a25a; vertical-align: bottom; }
#header div#utilities ul li#utill04 * { font: inherit; }
#header div#utilities ul li#utill04 span { width: auto; height: auto; line-height: 1.5em; }
#header div#utilities ul li#utill05 { width: 200px; border: #17a25a solid 2px; border-radius: 3px; background: #fff; }
#header div#utilities ul li#utill05 * { margin: 0; padding: 0; }
#header div#utilities ul li#utill05 form { position: relative; }
#header div#utilities ul li#utill05 input[name="q"] { width: calc(100% - 10px) !important; height: 24px; padding: 0 5px !important; border: none !important; background-color: #fff; line-height: 24px; }
#header div#utilities ul li#utill05 input[name="sa"] { position: absolute; top: -1px; right: -1px; width: 26px; height: 26px; border: none !important; background: #17a23d url('images/bg_search.png') no-repeat center center; background-size: 60%; border-radius: 0; }
#header div#utilities ul li#utill05 input[name="sa"]:hover { background-color: #3ab072; cursor: pointer; }
#header #gnavi { position: static; border-top: #eceff1 solid 1px; }
#header #gnavi ul li { list-style: none; }
#header #gnavi ul li a { display: block; text-decoration: none; }
#header #gnavi > ul { display: table; width: 1060px; margin: 0 auto; table-layout: fixed; text-align: center; }
#header #gnavi > ul > li.mainmenu { display: table-cell; position: relative; width: 100%; }
#header #gnavi > ul > li.mainmenu > a { position: relative; padding: 20px 0; color: #333f48; font-size: 110%; line-height: 1em; }
#header #gnavi > ul > li.mainmenu:hover a:after { -webkit-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1); }
#header #gnavi > ul > li.mainmenu > a:after { position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); background-color: #17a25a; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; content: ''; }
#header #gnavi > ul > li.mainmenu > a.active:after  { background-color: #17a25a; }
#header #gnavi > ul > li.mainmenu > a.active[href^="#"],
#header #gnavi > ul > li.mainmenu > a.active[href^="#"]:hover { background: url('images/bg_gnavi_on.png') no-repeat bottom center; }
#header #gnavi > ul > li.mainmenu > a[href^="#"]:hover { background: url('images/bg_gnavi.png') no-repeat bottom center; }
#header #gnavi > ul > li.mainmenu > ul { position: absolute; width: 100%; box-shadow: 0px 9px 3px -3px rgba(0,0,0,0.4); border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; background: #333f48; text-align: left; z-index: 9; }
#header #gnavi > ul > li.mainmenu > ul > li > a { padding: 8px 8px 8px 25px; border-top: #666 dotted 1px; background: url('images/bg_all_on.png') no-repeat 5px 50%; color: #fff; font-size: 85%; line-height: 1.5em; }
#header #gnavi > ul > li.mainmenu > ul > li:first-child > a { border-top: none; }
#header #gnavi > ul > li.mainmenu > ul > li > a:hover { background: #445460 url('images/bg_all_off.png') no-repeat 5px 50%; }

header #sp_menu,
header #sp_menubtn { display: none; }

.fixed { position: fixed; top: 0; left: 0; background-color: rgba(249, 249, 249, 0.96) !important; }
.fixed h1 { display: none; }
.fixed h1 + div { display: none; }

#topimage { border-top: #666 solid 1px; }
#topimage * { display: none; }

/* content */
#content { width: 1060px; margin: 40px auto 0 auto; border-radius: 5px; box-shadow: 0px 0px 5px #ccc; background: #fff; }
#content a[target="_blank"] { padding-right: 15px; background: url('images/blank.png') no-repeat right 50%; }
#content a.rss[target="_blank"] { padding-right: 0; background: none; }

/* main */
#main { float: left; width: 740px; margin: 10px 0; padding: 10px 20px; border-right: #d6dce0 dotted 1px; }
#main input,
#main select,
#main textarea { padding: 5px 0.5em; border: #ccc solid 1px; border-radius: 2px; background: #f9f9f9; }
#main input:focus,
#main select:focus,
#main textarea:focus { border-color: #17a25a; }
#main input[type="checkbox"] { border-color: red; margin-right: 0.5em; }
#main table th,
#main table td { padding: 2px 0.5em; }

/* page */
.topicpath { margin-bottom: 20px; font-size: 80%; line-height: 1.5em; }

body#page #main > h1 { position: relative; margin-bottom: 40px; padding: 10px 0 10px 1em; font-size: 160%; line-height: 1.25em; }
body#page #main > h1:after { position: absolute; bottom: 0; left: 0; width: 8px; height: 100%; border-radius: 2px; background-color: #17a25a; content: ''; }
body#page #main > h2 { margin: 40px 0 20px 0; padding: 10px 10px 10px 20px; border-radius: 4px; background: #efefef url('images/bg_h202.gif') no-repeat 5px top; font-size: 140%; }
body#page #main .topicpath + h2,
body#page #main > h1 + h2 { margin-top: 0; }
body#page #main > h3 { margin: 20px 0; padding-left: 20px; border-bottom: #999 dotted 1px; background: url('images/bg_h301.png') no-repeat left 50%; font-size: 120%; }
body#page #main > h4 { margin: 20px 0; font-weight: bold; }
body#page #main > h5:before { content: '＜'; }
body#page #main > h5:after { content: '＞'; }
body#page #main > h6:before { content: '○'; }
body#page #main > ul,
body#page #main > ol { margin-bottom: 1em; }
body#page #main > ul li { padding-left: 1em; text-indent: -1em; }
body#page #main > ol li { padding-left: 1.25em; text-indent: -1.25em; }
body#page #main > ul ul,
body#page #main > ul ol,
body#page #main > ol ul,
body#page #main > ol ol { margin-left: 20px; }
body#page #main > p { text-indent: 1em; }
body#page #main > table { margin-bottom: 1em; }

/* 南牧村生活情報冊子 */
div.jouhousassi:after { clear: both; display: block; content: ''; }
div.jouhousassi div { width: 180px; margin: 20px; float: left; }

/* 課 - お知らせ */
.contentnews { margin-bottom: 20px; }
.contentnews span.postedon { margin-right: 0.5em; color: #999; font-size: 85%; }
.contentnews ul li { border-bottom: #ccc dotted 1px; list-style: none; line-height: 1.75em; }
/* 課 - リソース */
.resource_box { margin-bottom: 20px; }
.resource_box,
.contentmenu_box { line-height: 2em; }
.resource_box ul,
.contentmenu_box ul { overflow: hidden; }
.resource_box ul li,
.contentmenu_box ul li a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.resource_box ul li,
.contentmenu_box ul li { min-height: 24px; padding-left: 28px; list-style: none; }
.resource_box ul li,
.contentmenu_box ul li.resource { background: url('images/bg_resource.png') no-repeat left 3px; }
.contentmenu_box ul li.container { background: url('images/bg_container.png') no-repeat left 3px; }
/* 課 - コンテナ */
.contentmenu_box { width: 350px; margin-bottom: 20px; }
.contentmenu_box:nth-of-type(odd) { float: left; }
.contentmenu_box:nth-of-type(even) { float: right; }
.contentmenu_box dt { min-height: 24px; margin-bottom: 5px; padding-left: 30px; border-radius: 4px; 
  background: #333f48 url('images/listmrk02.png') no-repeat 10px center; color: #fff; font-size: 120%; line-height: 2em; }
.contentmenu_box dt a { color: #fff; }
.contentmenu_box dd { height: 12.5em; }
.contentmenu_box ul { position: relative; height: 12.5em; }
/* 本文＋リンクのリンク */
.template_menu { margin-top: 40px; border: #2e71b3 solid 2px; border-radius: 4px; }
.template_menu h2 { margin: 0 !important; padding: 5px 0.5em !important; border-bottom: none !important; border-radius: 0 !important; background: #2e71b3 !important; color: #fff; }
.template_menu ul { padding: 10px; }
.template_menu ul li { border-bottom: #ccc dotted 1px; list-style: none; line-height: 1.75em; }
.template_menu ul li a { display: block; padding-left: 20px; background: url('images/listmrk02.png') no-repeat left 50%; }
.template_menu ul li a:hover { background-image: url('images/listmrk03.png'); }
.template_menu ul li a[target="_blank"] { display: block; padding-left: 20px; background: url('images/listmrk02.png') no-repeat left 50%, url('images/blank.png') no-repeat right 50% !important; }
.template_menu ul li a[target="_blank"]:hover { background: url('images/listmrk03.png') no-repeat left 50%, url('images/blank.png') no-repeat right 50% !important; }
/* 本文のみのファイル */
.files { margin-top: 20px; color: red; }
.files ul li { min-height: 24px; padding-left: 28px; background-position: left center; background-repeat: no-repeat; list-style: none; }
.files ul li.pdf { background-image: url('images/bg_pdf.png'); }
.files ul li.doc { background-image: url('images/bg_word.png'); }
.files ul li.xls { background-image: url('images/bg_xls.png'); }
.files ul li.file { background-image: url('images/bg_file.png'); }
/* ページネイト */
.paginate { position: absolute; bottom: 0; width: 100%; margin-left: 0 !important; padding: 0 !important; background: none !important; font-size: 85%; text-align: center; }
.paginate span { display: inline-block; width: 2.5em; min-width: 30px; height: 2.5em; min-height: 30px; margin: 5px 0 5px 2px; background-image: url('images/bg_pageinate01.png'); background-repeat: no-repeat; background-position: 50% 50%; line-height: 2.5em; vertical-align: middle; }
.paginate span:first-child { margin-left: 0; }
.paginate span:hover { background-image: url('images/bg_pageinate03.png') !important; color: #fff !important; cursor: pointer; }
.paginate span.current { background-image: url('images/bg_pageinate04.png'); }
.paginate span.current:hover { background-image: url('images/bg_pageinate04.png') !important; color: #333f48 !important; cursor: default; }
.paginate span.next,
.paginate span.prev { background-image: url('images/bg_pageinate02.png'); color: #fff; font-weight: bold; }
.paginate span.invalid { background-image: url('images/bg_pageinate01.png') !important; color: #999 !important; }
.paginate span.invalid:hover { background-image: url('images/bg_pageinate01.png') !important; cursor: default; }
.paginate span.ellipsis { background: none !important; }
.paginate span.ellipsis:hover { cursor: default; }

a.button_1 { display: inline-block; padding: 5px 2em !important; border: solid 2px; border-radius: 100px; background: none !important; text-decoration: none; }
a.button_1:hover { border-color: #2e71b3; background: #2e71b3 !important; color: #fff; }

.error { color: #cc0052; font-size: 90%; }

.btnarea { margin: 40px 0; text-align: center; }
.btnarea form { display: inline; }
.btnarea input#btn_conf,
.btnarea input#btn_turn,
.btnarea input#btn_send { padding: 10px 2em 8px 2em !important; box-shadow: 0px 4px 3px -3px rgba(0,0,0,0.5); -webkit-box-shadow: 0px 4px 3px -3px rgba(0,0,0,0.5); -moz-box-shadow: 0px 4px 3px -3px rgba(0,0,0,0.5); border: none !important; font-weight: bold; }
.btnarea input#btn_conf,
.btnarea input#btn_turn { border-bottom: #d5dce1 solid 2px !important; background: #e1e6e9 !important; color: #333f48; }
.btnarea input#btn_send { border-bottom: #159151 solid 2px !important; background: #17a25a !important; color: #fff; }
.btnarea input#btn_send { margin-left: 40px; }
.btnarea input#btn_conf:hover,
.btnarea input#btn_turn:hover,
.btnarea input#btn_send:hover { cursor: pointer; }
.btnarea input#btn_conf:hover,
.btnarea input#btn_turn:hover { background: #eceff1 !important; }
.btnarea input#btn_send:hover { background: #1ab464 !important; }

div#contact-information { clear: both; margin-top: 40px; border: #d6dce0 solid 1px; border-radius: 3px; }
div#contact-information h2 { margin: 0 !important; padding: 10px 10px 10px 40px !important; background: #d6dce0 url('images/bg_contact_info.png') no-repeat 10px center !important;
   border-radius: 0 !important; font-size: inherit !important; font-weight: bold; line-height: 1em; }
div#contact-information p.name { padding: 10px; }
div#contact-information span.tel:before { content: 'TEL.'; }

/* sub */
#sub { float: right; width: 239px; padding: 20px; }
#sub > * { margin-bottom: 20px; }

#dp { border: #ad002d solid 2px; }
#dp h2 { margin: 1px 1px 0 1px; padding: 5px 0; background: #e05739; color: #fff; text-align: center; }
#dp h2:first-child { background: #ad002d; }
#dp p,
#dp select,
#dp ul { margin: 5px; }
#dp select { width: 223px; }
#dp p#observe img { width: 223px; height: auto; }
#dp ul li { padding-left: 20px; list-style-image: url('images/listmrk01.png'); text-indent: -20px; vertical-align: bottom; }

#weather table { width: 100%; margin-bottom: 10px; border-radius: 4px; background: #f9f9f9; table-layout: fixed; text-align: center; }
#weather table th,
#weather table td { padding: 5px 0; vertical-align: middle; }
#weather table th { width: 40% }
#weather table td { width: 60% }
#weather table th span { display: block; line-height: 105%; }
#weather table th span.d { font-size: 190%; font-weight: bold; }
#dp select,
#weather select { margin-bottom: 5px; border: #999 solid 1px; border-radius: 2px; }
#weather select { width: 100%; }
#weather p a img { width: 100%; height: auto; border-radius: 2px; }

#others { border: #eee solid 5px; border-radius: 4px; }
#others h2 { padding: 10px; background: #17a25a; color: #fff; }
#others ul li { list-style: none; }
#others ul li a { display: block; padding: 10px; border-right: #d6dce0 solid 1px; border-bottom: #d6dce0 solid 1px; border-left: #d6dce0 solid 1px; text-decoration: none; }
#others ul li:first-child a { border-top: #d6dce0 solid 1px; }

/* aside */
#aside { width: 1060px; margin: 40px auto; }
#aside ul li { float: left; list-style: none; margin: 0 3px; }
#aside ul li img { width: 100%; height: auto; } 

/* footer */
#footer { background: #eceff1; font-size: 90%; line-height: 1.5em; }
#footer p#pagetop { display: none; }
#footer #links { border-bottom: #333f48 dotted 1px; }
#footer #links ul { width: 1060px; margin: 0 auto; }
#footer #links ul li { display: inline-block; margin-left: 1em; padding: 20px 0; }
#footer #links ul li:first-child { margin-left: 0; }
#footer #address { position: relative; width: 1060px; margin: 0 auto; background: url('images/bg_footer.png') no-repeat 0 20px; }
#footer #address dl { padding: 20px 0 20px 170px; }
#footer #address dl dt { font-weight: bold; }
#footer #address dl dd.no:before { content: '法人番号：'; }
#footer #address dl dd.open:before { content: '開庁時間：'; }
#footer #address .tel:before { content: 'TEL.'; }
#footer #address .fax:before { content: 'FAX.'; }
#footer #population { width: 1060px; margin: 0 auto; }
#footer #population dl { padding: 0 0 20px 170px; }
#footer #population dl dt { font-weight: bold; }
#footer #population dl dd p { display: inline; }
#footer p#access { position: absolute; top: -45px; right: 0; width: 150px; height: 150px; border: #333f48 dotted 1px; border-radius: 200px; }
#footer p#copyright { padding: 0.5em 0; background: #333f48; color: #fff; text-align: center; }

@media only screen and (max-width: 1060px) {
  #header h1,
  #header div#utilities,
  #header #gnavi,
  #footer #links,
  #footer p#access { display: none; }
  
  /* header */
  #header > div { width: calc(100% - 20px); margin: 0 10px; }
  #header p#logo { padding: 15px 0 15px 10px; }
  #sp_menu { display: block !important; position: fixed; top: 0; right: -500px; width: 500px; height: 100%;
   background: -moz-linear-gradient(left, #333f48, #1a1a1a); background: -webkit-linear-gradient(left, #333f48, #1a1a1a);
   background: -ms-linear-gradient(left, #333f48, #1a1a1a); background: linear-gradient(left, #333f48, #1a1a1a); background-color : #333f48;
   font-size: 95%; z-index: 99999; overflow-y: scroll; }
  #sp_menu h2 { margin: 10px 0 !important; text-align: center; }
  #sp_menu ul { font-family: 'Source Sans Pro', sans-serif; }
  #sp_menu ul li ul { padding-left: 1em; display: none; }
  #sp_menu h2 a:active,
  #sp_menu ul li a:active { opacity: 0.9; }
  #sp_menu ul li { list-style: none; }
  #sp_menu ul li a { display: block; padding: 5px 10px; color: #ddd; border-top: #444 dotted 1px; }
  #sp_menu ul li.mainmenu > a { border-top: #444 dotted 1px; padding-left: 25px; background: url('images/bg_all_on.png') no-repeat 5px 50%; }
  #sp_menu ul li.mainmenu:first-child > a { border-top: none; }
  #sp_menu ul li a.disabled { text-decoration: none; }
  #sp_menu > ul > li.mainmenu > ul > li > a { padding-left: 25px; background: url('images/bg_all_on.png') no-repeat 5px 50%; }
  #sp_menubtn { display: block !important; position: absolute; top: 2px; right: 2px; width: 88px; height: 88px; background: url('images/sp_menu.png') no-repeat; z-index: 9999; }
  #sp_menubtn span { display: table-cell; width: 88px; height: 88px; vertical-align: bottom; font-size: 12px !important; text-align: center; }
  #sp_menu #close { float:right; width: 88px; height: 88px; background: url('images/sp_close.png') no-repeat; z-index: 9999; }
  #sp_menu #close:hover { opacity: 0.85; filter:alpha(opacity=80); -ms-filter: 'alpha( opacity=85)'; cursor: pointer; }
  #sp_menu .open { position: relative; }
  #sp_menu .open:after {
    position: absolute; top: 50%; right: 10px; margin-top: -14px; content: '>'; font-size: 14px; font-weight: bold;
    -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg);
    -moz-transition: all, 0.25s, linear; -o-transition: all, 0.25s, linear; -webkit-transition: all, 0.25s, linear; transition: all, 0.25s, linear; }
  #sp_menu .open.active:after {
    -moz-transform: translate(0, 50%); -ms-transform: translate(0, 50%); -webkit-transform: translate(0, 50%); transform: translate(0, 50%);
    -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); transform: rotate(-90deg); }
  ul#sp_navigation,
  ul#sp_links { border-top: 2px solid #444; margin-top: 20px; }
  ul#sp_navigation li a,
  ul#sp_links li a { border-top: #444 dotted 1px; }
  
  #sp_menu #gc_search { width: calc(100% - 20px); height: 48px; margin: 20px 10px; }
  #sp_menu #gc_search * { margin: 0; padding: 0; }
  #sp_menu #gc_search form { position: relative; }
  #sp_menu #gc_search input[name="q"] { width: calc(100% - 10px) !important; height: 48px !important; padding: 0 5px !important; border: none !important; border-radius: 3px; background-color: #1a1a1a !important; color: #fff; line-height: 48px; }
  #sp_menu #gc_search input[name="sa"] { position: absolute; top: -1px; right: -1px; width: 50px; height: 50px; border: none !important; border-radius: 3px; background: #1a1a1a url('images/bg_search.png') no-repeat center center; background-size: 60%;}
  #sp_menu #gc_search input[name="sa"]:hover { background-color: #1a1a1a; cursor: pointer; }
  
  p#mmm_logo { text-align: center; }
  
  #content { width: 100%; margin: 0 auto; border-radius: 0; padding-bottom: 40px; }
  #content img { max-width: 100%; height: auto; }
  
  #main { float: none; width: calc(100% - 40px); border-right: none; margin: 0; }
  
 /* page */
  body#page #main > p { text-indent: 0; }
  body#page #sub { display: none; }

  .contentmenu_box { width: 48%; }

 /* aside */
 #aside { width: calc(100% - 40px); }
  ul.slider { margin: 0 !important; }
  .slick-track { width: 100% !important; }
  #aside ul li { margin: 1%; width: 18% !important; }
  #aside ul li img { width: 100% }
  #arrows { display: none; }

 /* footer */
  #footer #address,
  #footer #population { width: calc(100% - 20px); margin: 0 10px; }
}

@media only screen and (max-width: 762px) {
  .contentmenu_box { width: 100%; }
}

@media only screen and (max-width: 640px) {
/* --201910-- */
  div#wrapper { background: none; background-position: 50% 30px; background-repeat: no-repeat; background-size: 100vh; }
  div#wrapper::before {
    content: "";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    -webkit-transform: translate3d(0, 0, -1px);
    transform: translate3d(0, 0, -1px);
    width: 100%;
    height: 100vh;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-background-size: cover;
    z-index: -1;
  }
/* ---------- */
  #aside ul li { width: 31.3% !important; }
  #footer #address { background: none; }
  #footer #address dl { padding: 20px 0; }
  #footer #population dl { padding: 0 0 20px 0; }
}