@charset "UTF-8";
@import "./style.css";

main { min-width:960px; }

header#globalHeader { max-width: 1800px; }
nav#globalNavi { max-width: 1800px; }
main { max-width: 1800px; }
footer#globalFooter { max-width: 1800px; margin: 0 auto; }

section.full{width:100%;clear:both;}
section.half{float:left;width:50%;box-sizing: border-box;min-width:470px;}
section div{margin:5px;border: solid 2px #039; border-radius: 7px;min-width:383px;padding:10px;background:white;box-sizing:border-box;}
section.clear{clear:both;}
/*
p#navi_message { max-width: 1790px; border: solid 2px #039; border-radius: 7px; min-width:383px; padding:10px; background:white; box-sizing:border-box; background: url(../images/index/background.png); margin: 0 auto; }
*/
p#navi_message { margin: 5px; border: solid 2px #039; padding: 10px; border-radius: 6px; box-sizing: border-box; background: url(../images/index/background.png); }


@media screen and (max-width: 1000px) {
	main { min-width: initial; }
	section.half{ min-width: initial; width: 100%; }
	section div{ min-width: initial; width: auto; }
	/*
	section.full { width: auto; }
	section.half{ min-width: initial; }
	section div{ min-width: initial; }
	*/
	p#navi_message { min-width: initial; }
}




/* --------------------------------------------------
	OXIDANT
-------------------------------------------------- */


div#oxidant { position: relative; background: url(../images/index/background.png); text-align:center; }
div#oxidant section { width: 460px; height: 603px; position: relative; margin: 0 auto; text-align: left; }
div#oxidant strong { margin: 0 0 12px 0; font-size: 110%; display: block; }
div#oxidant div img{ margin-left: -220px; }

div#oxidant div{ margin: 5px; padding: 5px; border-radius: 0px; min-width: 0px; }

div#hanrei { position: absolute; z-index: 3; border: solid 1px #333; bottom: 0; right: 0; width: 180px;  text-align: left; }
div#hanrei strong { font-size: 100%; }
div#hanrei strong span { font-size: 50%; display: block; }
div#hanrei ul { margin: 0; list-style: none; }
div#hanrei li { margin: 0.2em 0;font-size: 60%; }
div#hanrei p { margin: 0.2em 0;font-size: 60%; }


@media screen and (max-width: 1000px) {
div#oxidant { margin: 0 2px 8px 2px; padding: 10px 12px 12px 12px; width: auto; height: auto; float: none; }
div#oxidant section { width: auto; height: auto; }
div#oxidant img { width: 100%; height: auto; }
div#hanrei { position: relative; width: auto; float: none; }
}

/* --------------------------------------------------
	ANNOUNCE
-------------------------------------------------- */

div#announce { background: url(../images/index/background.png);  }
div#announce strong { margin: 0 0 0.2em 0; font-size: 150%; text-align: center; display: block; }
div#announce p { margin: 0 0 7px 0; padding: 4px 10px; background: #fff; }
div#announce a.button { padding: 7px 0 0 0; width: 431px; height: 60px; border: solid 3px #f60; border-radius: 6px; color: #740202; font-size: 30px; text-align: center; text-decoration: none; line-height: 1.15; display: block; position: relative; }
div#announce a.button span { color: #c00; font-size: 18px; font-weight: 700; display: block; }
div#announce section#smog { margin: 0 0 10px 0; }
div#announce section#smog a.button { background: linear-gradient(#fff7da, #ffbc58); margin:0 auto;}
div#announce section#smog a.button:hover { background: linear-gradient(#ffbc58, #fff7da); }
div#announce section#smog a.button img { position: absolute; top: 5px; right: 3px; }
div#announce section#pm25 a.button { background: linear-gradient(#fff7da, #ffbc58); margin:0 auto; }
div#announce section#pm25 a.button:hover { background: linear-gradient(#ffbc58, #fff7da); }
div#announce section#pm25 a.button img { position: absolute; top: 3px; right: 3px; }

@media screen and (max-width: 1000px) {
div#announce { margin: 0 2px 8px 2px; padding: 10px 12px; width: auto; height: auto; float: none; }
div#announce strong { font-size: 110%; }
div#announce a.button { width: auto; height: 50px; font-size: 20px; }
div#announce a.button span { font-size: 16px; }
div#announce div#smog a.button img { width: auto; height: 50px; }
div#announce div#pm25 a.button img { width: auto; height: 50px; }
}

/* --------------------------------------------------
	NEWS
-------------------------------------------------- */

div#news {   background: #fff; }
div#news strong { margin: 0 0 0.15em 0; font-size: 130%; display: block; }
div#news div.inner { height: 120px; overflow: auto; }
div#news ul { list-style: none; }
div#news li { margin: 0 0 4px 0; padding: 0 0 0 18px; background: url(../images/index/arrowNews.png) 0 0.3em no-repeat; line-height: 1.5; }

@media screen and (max-width: 1000px) {
div#news { margin: 0 2px 8px 2px; padding: 10px 12px; width: auto; height: auto; float: none; }
div#news strong { font-size: 110%; }
div#news div.inner { height: auto; }
}

/* --------------------------------------------------
	MOBILE
-------------------------------------------------- */

div.left {  }
div#mobile {  background: #fff; }
div#mobile dt { width: 80px; float: left; }
div#mobile dt img { margin: 4px 0; }
div#mobile dd { width: 382px; float: left; }
div#mobile strong { margin: 0 0 0.15em 0; font-size: 110%; display: block; }
div#mobile p span { font-size: 90%; }

@media screen and (max-width: 1000px) {
div.left { width: auto; float: none; }
div#mobile { display: none; }
}

/* --------------------------------------------------
	TEL
-------------------------------------------------- */
div#tel { background: #fff; }
div#tel strong { margin: 0 0 0.15em 0; font-size: 110%; display: block; }
div#tel a { text-decoration: none; }

@media screen and (max-width: 1000px) {
div#tel { margin: 0 2px 8px 2px; width: auto; height: auto; }
div#tel a { text-decoration: underline; }
}

/* --------------------------------------------------
	MAIL
-------------------------------------------------- */
div.right {}
div#mail { background: #fff;}
div#mail dl {display:flex;}
div#mail dt {}
div#mail dt img { margin: 4px 0; }
div#mail dd { width: 100%;padding:0 10px; }

div#mail .chiiba{display:flex;flex-direction:row-reverse;}
div#mail .chiiba dd{text-align:right;}

div#mail strong { margin: 0 0 0.15em 0; font-size: 110%; display: block; }
div#mail p span { font-size: 90%; }

@media screen and (max-width: 1000px) {
div.right { width: auto; float: none; }
div#mail { margin: 0 2px 8px 2px; width: auto; height: auto; }
/*
div#mail dt { display: none; }
*/
div#mail dl dd p { margin: 0 0 10px 0; }
div#mail dd { width: auto; float: none; }
div#mail dd dl { display: none; }
div#mail p { word-break: break-all; }
}



/* --------------------------------------------------
	CONTACT
-------------------------------------------------- */

section#contact { position: relative; }
section#contact strong { margin: 0 0 0.15em 0; font-size: 110%; display: block; }
section#contact img { position: absolute; top: 19px; right: 15px; }

@media screen and (max-width: 1000px) {
section#contact { margin: 0 2px 8px 2px; width: auto; height: auto; }
/*
section#contact img { display: none; }
*/
section#contact img { width: 35%; height: auto; }
}