@charset "utf-8";
body {margin:0px;color:#333333;background-color:#ffffff;font-size:100%;line-height:1.3;font-family:"Hiragino Kaku Gothic ProN","メイリオ",sans-serif;-webkit-text-size-adjust:100%;}
.header ,.article ,.footer ,.section ,h1,h2,h3,hr{clear:both;}/*-clear-*/
.article ,.section ,.nav ,dl,ul,div{padding:0px 0px 5px;overflow:auto;}/*-hasLayout-*/
input[type="text"],input[type="button"],input[type="submit"]{-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:0;}
input[type="button"],input[type="submit"]{cursor:pointer;}/*-formAppearanceClear-*/

h1,h2,h3,h4,h5,p,dl,ul,ol {margin-top:0px;}
ul,ol{padding-left:30px;}
#Map,#Map *,#jump{padding:0px;overflow:visible;}
#jump a{position:absolute;width:0px;height:0px;overflow:auto;text-indent:-1000em;}
#jump a:focus{width:12em;height:1.5em;text-indent:0px;background:#ffffff;text-align:center;}
textarea {max-width:95%;}
#TOP{min-width:1120px;}
a{color:#14465f;text-decoration:underline;}
a:hover { text-decoration: none;}
a:hover img{opacity:0.8;}
img{border:none;vertical-align:middle;}
div.left{float:left}
div.right{float:right}
p.right { text-align: right;}
.center { text-align: center;}
fieldset { margin: 0px 0px 1em; padding: 0px 0px 5px; border: none;}

/* add CORE ----------- */
/* カスタム検索 */
.article .search_result_google *{padding:0px;overflow:visible;}
.article .search_result_google table th,.contents .article .search_result_google table td{border:none;}
.article .search_result_google .gsc-results .gsc-cursor {display: block;text-align: center;}
.article .search_result_google .gsc-results .gsc-cursor-box .gsc-cursor-page{padding:.5em;border:1px solid #ccc;}
.article .search_result_google .gsc-results .gsc-cursor-box .gsc-cursor-current-page{border:2px solid #ccc;}

/* READ LINK */
#Map,#Map *,#jump{padding:0px;overflow:visible;}
#jump a{position:absolute;width:0px;height:0px;overflow:auto;text-indent:-999em;}
#jump a:focus{width:12em;height:1.5em;text-indent:0px;background:#ffffff;text-align:center;}
#TOP{min-width:1024px;padding:0px;}

.font_kyoutyo{font-weight:bold;}
.font_comment{font-size:80%;}
.font_red{color:#cc0000;}

/* YouTube動画 */
.article .mv_area p{margin:.5em 0;font-size:.9em;}
.article .mv_area{height:0; overflow:hidden; padding-top:75%; position: relative;}
.article .mv_area iframe,
.article .mv_area object{position:absolute;top:0;left:0;width:100%;height:100%;}

/* IMAGE BOX */
.article .txtbox .box-image { padding: 1em 0 0;}
.article .txtbox .box-image li { margin: 0 1% 1%; float: left; text-align: center; }
.article .txtbox .box-image li:before { display: none;}
.article .txtbox .box-image li img { max-width: 100%; height: auto;}
.article .txtbox .box-image li p { padding-top: 0.5em; font-size: 0.85em;}
.article .txtbox .box-image li p.font{ font-size:1em;}

.article .txtbox .box-image.double li { width: 48%;}
.article .txtbox .box-image.triple li { width: 31%;}
.article .txtbox .box-image.triple li:nth-child(3n-1) { margin: 0 1.5% 1%;}
.article .txtbox .box-image.quadruple li { width: 23%;}

.article .txtbox .image_box { margin: 0px 0px 10px; padding-bottom: 0;}
.article .txtbox .image_box img{ max-width: 100%; height: auto;}
.article .txtbox .image_box_center { min-width:240px; width: 50%; max-width: 80%; margin: 0px auto 10px; padding-right: 2em;}
.article .txtbox .image_box_left,
.article .txtbox .image_box_right { max-width: 50%; }
.article .txtbox .image_box_left { float: left; margin-right: 10px;}
.article .txtbox .image_box_right { float: right; margin-left: 10px;}
.article .txtbox .image_box p { padding-top: 0.5em; font-size: 0.85em;}
.article .txtbox .image_box p.font{ font-size:1em;}


/* COMMON ---------------- */
body > .wrap{ min-width: 320px !important; }
img { max-width: 100%; height: auto;}

/* CONTENTS WIDTH */
.header .wrap,
.main_menu .nav,
.contents,
.footer .banner ul,
.footer .wrap {width:1000px;margin:0px auto;}

/* HEADER ---------------- */
.header { padding-bottom: 0px; box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.5);}
.header .title {float:left;}
.header .wrap { padding-bottom: 0px;}
.header .wrap .title,.header h1 {width:318px;height:75px;margin-top:25px;float:left;}
.header .wrap .title a,.header h1 a {display:block;height:75px;}
.header .page_control{ width: 521px; margin-top: 7px; float: right;}
.header .page_control ul ,#UD dl ,#UD dl dt ,.header .page_control dl dd {min-height:34px;margin:0px 1px;padding:0px;float:left;list-style:none;}
.header .page_control a:hover { opacity: 0.8;}
.header .page_control ul li { margin: 0px; padding-top: 5px; float: left;}
#UD dl.color_change ,#UD dl.textsize_change{margin:0px;padding:5px 0px 0px 0px;float:left;}
#UD dl.textsize_change { margin-right: 16px; padding-bottom: 5px;}
#UD dl dt{padding:0px 0px 0px 0px;background:no-repeat center center;}
#UD dl.color_change dt {width:50px;}
#UD dl.textsize_change dt {width:80px;}
#UD dl.textsize_change dd a.textresizer-active { background-color: #40B6CE;}
#UD dl dd a,
.header .page_control ul li a,
.header .page_control form.search label.search_txt {display:block; width: 34px; height: 34px;}
.header .page_control ul { margin-right: 16px;}
.header .page_control ul li a.announce,
.header .page_control ul li a.language { width: 150px;}
.header .page_control ul li a.announce { color: #000000; background-color: #ebe9dd;}
.header .page_control ul li a.language { color: #ffffff; background-color: #333333;}
#UD dl dd a { width: 28px; height: 28px; margin: 3px 2px; color: #ffffff; background-color: #333333; border-radius: 50%; border: 1px solid #ffffff; box-sizing: border-box;}
#UD dl dd.low a{ color: #000000; background-color: #c0c0c5;}
#UD dl.color_change dd.default a{ color: #000000; background-color: #ffffff; border: 1px solid #c0c0c5;}
.header .page_control form.search {width: 362px;margin:8px 0px 0px;float:right;text-align:center;}
.header .page_control form.search label.search_txt{display:block;width:132px; height: 43px;margin-right: 8px;float:left;}
.header .page_control form.search input#search_txt {display:block;width:74%; padding:9px 2%;margin: 0%;border:none;background-color:#fafafa;float:left;}
.header .page_control form.search input#search_txt:focus { background-color:#ffffff;outline: none;}
.header .page_control form.search input.search_bt { width:20%; height: 29px; color:#ffffff;padding:3px 0px;margin: 2px 1% 2px 1%;font-weight:bold;background-color:#2b2b2b;border:none;float:left;font-family:"Hiragino Kaku Gothic ProN","メイリオ",sans-serif;-webkit-appearance:none;}
.header .page_control form.search input.search_bt:hover { opacity: 0.8;}
.header .page_control form.search .search_box { width: 214px; padding: 4px; background: url(../img/pt_obliqueline.png) #b9e4ed;}
.header .page_control form.search .search_inner { padding: 0px; background-color: #ffffff; border: 1px solid #74cadc;}
#UD dl dd a:hover img { opacity: 1;}

/* GNAV -------------- */
.main_menu .nav{ margin: 0 auto;}
.main_menu .nav .menu_button{display:none;}
.main_menu .nav ul { width: auto; margin: 0 5px; padding: 0px; list-style: none; overflow: visible;}
.main_menu .nav ul li{ width: 19%; margin:14px 0px 12px 1.25%; float:left; background: center bottom no-repeat; }
.main_menu .nav ul li:first-of-type { margin-left: 0px;}
.main_menu .nav ul li a { position: relative; display:block; height: 56px; text-align: center; background: center no-repeat #ebe9dd; box-shadow: 1px 1px 3px 1px rgba(0,0,0,0.5); border-radius: 4px;}
.main_menu .nav ul li:hover a:before{ background-color: #0167bb;}
.main_menu .nav ul li a:before { display: block; content: " "; position: absolute; bottom: 5px; left: 12px; right: 12px; height: 5px; background-color: #c4bd9b; border-radius: 3px;}


/* CONTENTS ---------------- */
.contents { box-sizing: border-box; overflow: visible;}
.contents .locus { margin-bottom: 16px; padding: 0.5em 0 0.2em 24px; font-size: 0.8em; background: url(../img/icon_home.png) left center no-repeat;}
.contents .section { margin-bottom: 1.5em;}
.contents .article { width:770px; float: left;}
.no_nav .contents .article {width:auto;float:none;}
.contents .article .txtbox,
.contents .article .section { margin-left: 4%; margin-right: 4%; overflow: visible;}
.contents .article .section div { overflow: visible;}
.contents .article h1 { padding: 0.65em 0.6em 0.45em; border-left: 10px solid #0168b7; font-size: 1.5em; background: #ebe9dd;}
.contents .article h2 { margin-left: -16px; margin-right: -16px; padding: 0.3em 16px; border-bottom:1px solid #0167bb; font-size:1.2em}
.contents .article ol {padding-left:2em;}
.contents .article ul{list-style:none;padding-left:0px;}
.contents .article ol li,.contents .article ul li{ margin-top:0.3em; margin-bottom:0.5em;}
.contents .article ul li{padding-left:2em;}
.contents .article ul li:before{top:0.15em;left:12px;width:0.8em;height:0.8em;background:#0167bb;}
.contents .article ul.menu li{padding:1em 0.5em 1em 2em;border-bottom:4px solid #c4e9f0;}
.contents .article ul.menu li:before{top:1.05em;width:16px;height:16px;border:none;background:url(../img/menu_link_mark.png) no-repeat center; border-radius: 30%;}
.contents .article ol > li{ padding-left: 0px !important;}
.contents .article ol > li:before{ display: none !important;}
.contents .article ul li > ol,
.contents .article ol li > ul { margin: 0.5em 0;}

.contents .nav  {width:210px;float:right; overflow: visible;}
.contents .nav ul { padding:0px;list-style:none;background:#f1f1e7;}
.contents .nav ul:after { display: block; content: " "; clear: both;}
.contents .nav ul.img_banner { margin-bottom: 0px; background-color: transparent; overflow: visible;}
.contents .nav ul.img_banner li { margin-bottom: 1em; overflow: visible; text-align: center;}
.contents .nav ul.img_banner li a { display: block;}
.contents .nav ul.img_banner li a img { max-width: 100%; box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.4);}

.contents .article h2,
.contents .article h4,
.contents .article ul li{position:relative;}
.contents .article h2:before,
.contents .article h4:before,
.contents .article ul li:before{display:block;content:" ";position:absolute;}
.contents .article h3 { padding: 0.15em 0px 0px 0.5em; font-size: 1.1em; border-left: 0.35em solid #0167bb;}
.contents .article h4 { margin-bottom: 0.5em; padding: 0.1em 0 0 1.2em; font-size: 1em; }
.contents .article h4:before { top: 0.2em; left: 0px; width: 0.9em; height: 0.9em; background:url(../img/heading4_bg.png) center no-repeat; background-size: contain;}
.contents .article h5 { margin-bottom: 0.5em; font-size: 1em;}

.contents .section .link_section .link_list li:before { top: 0.2em; width: 0.8em; height: 0.8em; background: url(../img/arrow_00.png) center no-repeat #5AA6BC; border-radius: 15%}
.contents .section .file_section .file_list li { padding-left: 0px;}
.contents .section .file_section .file_list li:before { display: none;}
.contents .section .file_section .file_list li a { padding-left: 2em; background: url(../img/file_list_mark.gif) 7px 0.2em no-repeat;}
.contents .section .file_section .file_list li.pdf a { background-image: url(../img/file_list_mark_pdf.png);}
.contents .section .file_section .file_list li.doc a { background-image: url(../img/file_list_mark_doc.gif);}
.contents .section .file_section .file_list li.xls a { background-image: url(../img/file_list_mark_xls.gif);}

.contents .acrobat { padding: 10px; background-color:#F4F3EE;}
.contents .acrobat .icon { display: block; float: left;}
.contents .acrobat p { margin-bottom: 0.5em; padding-left: 170px; font-size: 0.9em;}

.contents .section .info_section form { text-align: center; margin-bottom: 0.5em;}
.contents .section .info_section form input:hover { opacity: 0.8;}
.contents .section .info_section h2 { padding-left: 52px; background: url(../img/icon_mail.png) 16px center no-repeat #EBE9DD; border: none;}
.contents .section .info_section h2:before { display: none;}
.contents .section .info_section p { padding-left: 1em;}

.contents .txtbox table { margin-bottom: 1.5em; border-collapse:collapse;}
.contents .txtbox table,
.contents .txtbox table th,
.contents .txtbox table td { border: 2px solid #E8E8D6;}
.contents .txtbox table th,
.contents .txtbox table td { padding: 0.75em;}
.contents .txtbox table th { background-color: #F1F1E7;}
.contents .txtbox table caption { padding-bottom: 0.5em; font-size: 1.1em; font-weight: bold;}
.contents .txtbox .figure img { max-width: 100%;}
.contents .imgbox { margin: 2em auto 1.5em; text-align: center;}
.contents .imgbox img { max-width: 100%;}

.contents .article .menu_list { margin-left: 1%; margin-right: 1%; font-size: 1.1em;}
.contents .article .menu_list li { padding: 0.3em 0px 0.3em 2.2em;}
.contents .article .menu_list li:before { top: 0.35em; width: 1em; height: 1em; background-color: #C4BD9B;}
.contents .article .menu_list li a { text-decoration: none;}
.contents .article .menu_list li a:hover { text-decoration: underline;}

.contents .article .news_section p.nodata,
.contents .article .news_section .news { margin: 0px 26px 0.8em; clear: both;}
.contents .article .news_section .news dt,
.contents .article .news_section .news dd { padding: 1em 0px 0.8em;}
.contents .article .news_section .news dt { float: left; width: 9em; padding-left: 0.5em;}
.contents .article .news_section .news dd { margin-left: 0px; padding-left: 10em; border-bottom: 1px dotted #333333;}
.contents .article .news_section .news dd a {}
.contents .article .news_section .news dd a:hover { text-decoration: none;}

/* FOOTER ---------------- */
.footer { padding-bottom: 0px; box-sizing: border-box;}
.footer a { color: #000000;}
.footer .wrap { padding: 10px; background-color: #ffffff;}
.footer .copyright{ margin:0px; padding: 1em;text-align:center;font-size:0.7em; background-color: #ebe9dd; clear: both;}
.footer .reread_link{ width:67px; padding-bottom: 0px; position: fixed ;bottom: 32px; right:4px; overflow: visible;}
.footer .reread_link a{display:block;height:65px; width: 65px; overflow:hidden; background-color: #b9e4eb; border: 1px solid #ffffff; border-radius: 50%; box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.4);}
.footer .reread_link:hover{opacity:0.8;}
.footer dl { float: left; margin: 1em auto; clear: both;}
.footer dl dt { margin-bottom: 0.5em; font-weight: bold; font-size: 1.1em;}
.footer dl dd { margin-left: 0px; font-size: 0.9em; line-height: 1.6em;}

.footer .banner { background-color: #ebe9dd;}
.footer .banner ul { list-style: none; padding-left: 0px;}
.footer .banner ul li { float: left; width: 25%; padding-top: 15px; padding-bottom: 5px; text-align: center;}
.footer .banner ul li a img { box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.4);}

.footer .official_site { display: block; float: right; margin: 1em 0px;}

@media screen and (min-width: 0px) and (max-width: 1144px) {
textarea ,
#TOP,
.header ,
.contents ,
.contents .article ,
.contents .article .image_box li ,
.contents .article .image_box li img ,
.contents .article .imagetable table,
.contents .article .imagetable table th,
.contents .article .imagetable .figure,
.contents .nav ,
.footer {position:static;width:auto;min-width:0px;max-width:100%;float:none;}


/* CONTENTS WIDTH */
.header .wrap,
.main_menu .nav,
.contents,
.footer .banner ul,
.footer .wrap {width: 92%;}


/* HEADER ---------------- */
.header .page_control { width: auto;}
/*
.header .page_control form.search { width: auto;}
*/
.header .page_control > ul { float: right; margin-bottom: 14px; margin-right: 0px;}
.header #UD { clear: both;}



/* CONTENTS -------------- */
.contents .nav { margin-left: 4%; margin-right: 4%;}
.contents .nav ul.img_banner li { float: left; width: 31.3%; margin-left: 1%; margin-right: 1%;}

}


@media screen and (min-width: 0px) and (max-width:840px) {
/* HEADER ------------ */
.header .wrap .title, .header h1 { width: 258px; height: 68px; margin-top: 16px; background-position: center; background-size: contain;}
.header .wrap .title a, .header h1 a { height: 100%;}
.header .page_control { position: relative; width: 100%; margin: 0px auto; overflow: visible;}
.header .page_control > ul { position: absolute; right: 0px; top: -67px;}
.header #UD { margin-top: 24px; text-align: center;}
.header #UD > dl { display:inline-block; margin-right: 8px; margin-left: 8px; padding: 0px; float: none;}
.header .page_control ul,
#UD dl, #UD dl dt, 
.header .page_control dl dd { min-height: 44px;}
#UD dl dt img { margin-top: 6px;}
#UD dl dd a { width: 44px; height: 44px; margin: 0px 4px;}
#UD dl dd a img { margin-top: 8px;}
.header .page_control form.search { width: 100%; margin-top: 16px;}
.header .page_control form.search label.search_txt { width: 22%; margin-right: 0px;}
.header .page_control form.search .search_box { width: 74%; float: right;}
.main_menu .nav ul li,
.main_menu .nav ul li:first-of-type { width: 48%; margin: 2% 1% 1%; }


/* CONTENTS -------------- */
.contents .section ul li { margin-bottom: 2em;}
.contents .section.info_section .info_section.inner a.mail { clear: both;}

.contents .article .news_section .news dt,
.contents .article .news_section .news dd { padding-bottom: 0.5em;}
.contents .article .news_section .news dt { float: none; width: auto; padding-top: 0.5em;}
.contents .article .news_section .news dd { padding-top: 0em; padding-left: 1em;}


/* FOOTER ------------ */
.footer .banner ul li { float: left; width: 50%; padding-top: 15px; padding-bottom: 5px; text-align: center;}

}


@media screen and (min-width: 0px) and (max-width:640px) {
.contents .article div.schedule,
.contents .article div.schedule dl dt,
#UD dl.color_change ,#UD dl.textsize_change,
#UD dl.color_change,
.header .page_control ul li a.announce ,
.header .page_control ul li a.language ,
.header .page_control form.search ,
.main_menu .nav ul li,
.contents .article div.calendar{position:static;width:auto;min-width:0px;max-width:100%;float:none; clear: both;}
/*
.header .page_control ul,
*/
.main_menu .nav ul,
.header #UD {display:none;}
.main_menu .nav .menu_button{display:block;}
.contents .article div.schedule dl dt,
.contents .article div.schedule dl dd{min-height:0px;padding:0.5em 0px;}
.header .wrap .title,.header h1 { margin-left: auto; margin-right: auto; float: none;}

.header .page_control ul { position: static; right: inherit; top: inherit; width: 150px; margin: 0 auto; clear: both; float: none;}
.header .page_control ul li a.announce { display: none;}


/* add CORE ----------- */
/* IMAGE BOX */
.article .txtbox .box-image { margin-right: 2em;}
.article .txtbox .box-image li { margin: 0 0 1% !important; float: none;}
.article .txtbox .box-image.double li { width: 100%;}
.article .txtbox .box-image.triple li { width: 100%;}
.article .txtbox .box-image.quadruple li { width: 100%;}
.article .txtbox .image_box_center { margin: 0 2em 0 0; padding: 0 0 1em; width: auto; max-width: 100%;}
.article .txtbox .image_box_left,
.article .txtbox .image_box_right { max-width: 100%; margin-right: 2em; padding-bottom: 1em; float: none;}
.article .txtbox .image_box_right { margin-left: 0;}

.contents .section .news_section dl dt { float: none; width: auto; padding-bottom: 0.5em;}
.contents .section .news_section dl dd { padding-top: 0px; padding-left: 1em; border-bottom: 1px dotted #333333;}

/* HEADER -------------- */
.main_menu .nav .menu_button { position: fixed; top: 5px; right: 5px; width: 44px; height: 44px; padding: 0px; background-color: #c3bc9f; border-radius: 4px; z-index: 100; transition-duration: 0.2s;}
.main_menu .nav .menu_button.active { background-color: #ffffff;} 
.main_menu .nav .menu_button:hover { background-color: #ffffff; box-shadow: 0px 0px 0px 2px #0168b7;}
.header .page_control form.search { width: 100%; margin-top: 16px;}
.header .page_control form.search label.search_txt { width: 12%; margin-right: 0px;}
.header .page_control form.search label.search_txt img { height: 43px; width: auto;}

.header .page_control form.search .search_box { width: 84%; float: right;}
.main_menu .nav ul,
.header #UD { position: fixed; right: 0px; width: 95%; background: #74CADC; background-color: rgba(196,189,155,0.8); z-index: 99;}
.main_menu .nav ul { top: 190px; bottom: 0px;}
.header #UD { top: 0px; height: 190px; margin: 0px; padding: 0px; }
#UD dl.color_change,
#UD dl.textsize_change { display: block; width: 250px; margin-left: auto; margin-right: auto;}
#UD dl.color_change { margin-top: 20px;}
#UD dl.textsize_change { margin-top: 60px;}
#UD dl.color_change dt { width: 80px;}

.main_menu .nav ul { margin: 0px;}
.main_menu .nav ul li,
.main_menu .nav ul li:first-of-type { width: auto; margin: 0px;}
.main_menu .nav ul li:first-child { margin: 0px; border-top: 1px dotted #666666;}
.main_menu .nav ul li.menu01,
.main_menu .nav ul li.menu02,
.main_menu .nav ul li.menu03,
.main_menu .nav ul li.menu04,
.main_menu .nav ul li.menu05,
.main_menu .nav ul li.menu06 { background: rgba(255,255,255,0.6); border-bottom: 1px dotted #666666;}
.main_menu .nav ul li a { height: 54px; width: auto; background-size: auto; border-radius: 0px; box-shadow: none;}


/* CONTENTS -------------- */
.contents h1 { font-size: 1.5em;}
.contents .nav ul.img_banner li { float: none; width: auto; margin-left: 0px;}
.contents .section.info_section .info_section.inner a.mail { margin-left: auto; margin-right: auto; float: none;} 

.contents .acrobat p {padding-left: 0px;}
.contents .acrobat .icon { width: 100%; text-align: center; display: block; margin-bottom: 0.5em;}
.contents .article h2 { margin-left: -8px; margin-right: -8px;}
textarea#iken { width:100%;}

/* SUB TOP */
.subtop .contents .nav ul.life_menu li { width: auto; margin-left: 8px; margin-right: 8px; float: none;}
.contents .section .news_section dl dt { float: none; width: auto; padding-bottom: 0.5em;}
.contents .section .news_section dl dd { padding-top: 0px; padding-left: 1em; border-bottom: 1px dotted #333333;}
.contents .section .news_section ul.news_button { position: static; margin: 12px;}
.contents .section .news_section ul.news_button li { width: 50%;}
.contents .section .news_section ul.news_button li.rss a { padding-left: 0.8em; text-align: center; background-position: 12px center;}

.subtop .contents .section .subtop_section .left_column,
.subtop .contents .section .subtop_section .right_column { width: 100%; margin-left: 0px; margin-right: 0px; float: none;}


/* FOOTER -------------- */
.footer dl { margin-bottom: 2em;}
.footer .reread_link{ width:60px; }
.footer .reread_link a{ height:50px; width: 50px; background-size: 80%;}
.footer .banner ul li { float: none; width: 100%;}

.footer .official_site { float: none; width: 200px; margin-left: auto; margin-right: auto;}

}

@media screen and (min-width:641px) {
html body #menu,
html body #UD{display:block !important;}
}


/* mobile */
#pc,#sp{display:none;}
#pc{margin-bottom:1em;clear:both;}
@media screen and (min-width: 0px) and (max-device-width:640px){
 #sp{display:none;margin-bottom:0;width:100%;height:100px;font-size:4em;text-align:
center;border:4px solid #ccc;background:#eee;}
 #pc{display:block;margin:.8em auto;text-align:center;}
}
@media screen and (min-width: 0px) and (max-device-width:640px) and (min-width:
1000px){
 #pc,#menuopen{display:none;}
 #sp{display:block;}
}