@charset "UTF-8";

body	{font-family: 'メイリオ', 'Hiragino Kaku Gothic Pro', sans-serif}

/* サイト名 */
.site h1 a	{color: #000000;
	text-decoration: none}

.site h1	{margin: 0;
	font-size: 30px}

/* ナビゲーション */
.menu {	background-color: #00a0e9;
	}
	
.menu ul	{margin: 0;
	padding: 0;
	list-style: none}

.menu ul img	{margin: 0;
	padding: 0;
	list-style: none}

.menu li a	{display: block;
	padding: 8px;
	color: #000000;
	font-size: 18px;
	text-decoration: none}

.menu li a:hover	{background-color: #74dbe7}

.menu ul:after	{content: "";
	display: block;
	clear: both}

.menu li	{float: left;
	width: auto}

/* circle menu */
.menu-circle {	background-color: #0c419a;
	}
	
.menu-circle ul	{margin: 0;
	padding: 0;
	list-style: none}

.menu-circle ul img	{margin: 0;
	padding: 0;
	list-style: none}

.menu-circle li a	{display: block;
	padding: 8px;
	color: #000000;
	font-size: 18px;
	text-decoration: none}

.menu-circle li a:hover	{background-color: #74dbe7}

.menu-circle ul:after	{content: "";
	display: block;
	clear: both}

.menu-circle li	{float: left;
	width: auto}


/* 記事 */
.kiji h1	{margin-top: 0;
	margin-bottom: 20px;
	font-size: 36px}

.kiji p	{margin-top: 0;
	margin-bottom: 20px}

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


/* サイドメニュー */
.sidemenu	{margin-top: 10px; margin-bottom: 90px;}
/* .sidemenu	{margin-top: 10px; margin-bottom: 30px;} */

.sidemenu ul	{margin: 0;
	padding: 0;
	list-style: none}

.sidemenu li a	{display: block;
	padding: 5px;
	color: #000000;
	font-size: 14px;
	text-decoration: none}

.sidemenu li a:hover	{background-color: #eeeeee}

.sidemenu h1		{margin-top: 0;
	margin-bottom: 10px;
	border-bottom: dotted 2px #dddddd;
	color: #666666;
	font-size: 18px}


/* 週間気象ニュース */
.weeklynews ul	{margin: 0;
	width:100%;
	padding: 0;
	list-style: none}

.weeklynews li a	{display: block;
	padding: 5px;
	color: #000000;
	font-size: 14px;
	text-decoration: none}

.weeklynews li a:hover	{background-color: #eeeeee}

.weeklynews h1	{margin-top: 0;
	margin-top: 10px;
	margin-bottom: 3px;
	color: #666666;
	font-size: 18px}

.weeklynews h2	{margin-top: 0;
	margin-top: 2px;
	margin-bottom: 10px;
	border-bottom: dotted 2px #dddddd;
	color: #666666;
	font-size: 16px}

/* おすすめ記事メニュー */
.osusume	{margin-bottom: 30px}

.osusume ul	{margin: 0;
	padding: 0;
	list-style: none}

.osusume li a	{display: block;
	padding: 5px;
	color: #000000;
	font-size: 14px;
	text-decoration: none}

.osusume li a:hover	{background-color: #eeeeee}

.osusume h1		{margin-top: 0;
	margin-bottom: 10px;
	border-bottom: dotted 2px #dddddd;
	color: #666666;
	font-size: 18px}


/* 人気の記事メニュー */
.ninki ul	{margin: 0;
	padding: 0;
	list-style: none}

.ninki li a	{display: block;
	padding: 5px;
	color: #000000;
	font-size: 14px;
	text-decoration: none}

.ninki li a:hover	{background-color: #eeeeee}

.ninki h1	{margin-top: 0;
	margin-bottom: 10px;
	border-bottom: dotted 2px #dddddd;
	color: #666666;
	font-size: 18px}


/* コピーライト */
.copyright p	{margin: 0;
	color: #666666;
	font-size: 14px}


/* 色 */
.exal-warn-bg{
  background-color: #5628bb;
}
.m3-bg{
  background-color: #dc143c;
}

@media (min-width: 768px) {

/* ヘッダーを固定するおまじない */
header.fixed { width:100%; position: fixed; top: 0; z-index: 10; background-color: #ffffff;}
#main-container {
        width: 100%;
        padding-top: 110px;
}
#wrapper{text-align:left;font-size:medium;line-height:1.6;min-width:1080px}
#main-container-dnp {padding-top: 84px;text-align:left;font-size:medium;line-height:1.6;min-width:1080px}
#main-container-dnp-test {padding-top: 60px;text-align:left;font-size:medium;line-height:1.6;min-width:1080px}
#main-container-dnp-test2 {padding-top: 48px;text-align:left;font-size:medium;line-height:1.6;min-width:1080px}
#dnpContent,#contentsHeader,#contentsBody,#contentsFooter,#footer{width:1080px;height:100%;margin:0 auto}
#dnpTool {width:900px;margin:0 auto}

/* ヘッダーを固定するおまじない天気情報変 */
#main-wx-container {
        width: 100%;
	height: 100%;
        padding-top: 65px;
}

/* メニューとの余白を設けるおまじない*/
#main-tool-container {
        width: 100%;
        padding-top: 65px;
}

/* BOX1とBOX Searchを横に並べる設定 */
.boxheader:after	{content: "";
	display: block;
	clear: both}

.box1	{float: left;
	width: 90%}

.boxsearch	{float: left;
	width: 10%}

.boxdisaster { 	width:100%; 
		background-color: #ff0000;
		font-size: 24px;
		text-align: center;
		}
	
.box2 {background-color: #00a0e9;
	height:48px;}

.boxtoolmenu { background-color: #0c419a;}
	
/* BOX3とBOX4を横に並べる設定 */
.boxA:after	{content: "";
	display: block;
	clear: both}

.box3	{float: left;
        margin: 0.5rem 1rem 0.5rem, 1rem;
	width: 20%}
	
.box4	{float: left;
	width: 60%}

.box5	{float: left;
        margin: 0.5rem 1rem 0.5rem, 1rem;
	width: 20%}

/* 気象情報閲覧時にboxA内で気象情報表示エリア */
.boxwx	{float: left;
	width: 70%;
	min-width:1080px;
	height: 800px;}

/* ツール用 */
.boxtool	{float: left;
	padding: 0px 10px 0 10px;
	width: 100%;
	height: 700px;}

.boxmap	{float: left;
	width: 600px;
	height: 500px;}

.boxnews	{float: left;
        min-width: 248px;
	height: 600px;}

.boxedit	{float: left;
        min-width: 248px;
        max-width: 480px;
	height: 600px;}

/* 放送局選択ボタン */
button.bsbtn {
　margin: 3px 5px 3px 5px;
  padding: 10px 30px;
}

/* 縦方向のBox */
.boxl1	{float: left;
        margin: 1rem 5rem 1rem 5rem;
	height: 50%;
	width: 90%;
}
	
.boxl2	{float: left;
        margin: 1rem 5rem 1rem 5rem;
	height: 50%;
	width: 90%;
}

/* DNP用にBOXを横に並べる設定 */
.boxDNP:after	{content: "";
	display: block;
	clear: both}

.boxDnpLeft	{float: left;
	margin: 0.5rem 1rem 0.5rem, 1rem;
	width: 1%}
	
.boxDnpMenu	{float: left;
        margin: 0.5rem 1rem 0.5rem, 1.5rem;
	width: 10%}
	
.boxDnpCont	{float: left;
	width: 68%}

.boxDnpWeek	{float: left;
        margin: 0.5rem 1rem 0.5rem, 1rem;
	width: 20%}

.boxDnpRight	{float: left;
        margin: 0.5rem 1rem 0.5rem, 1rem;
	width: 1%}
	
@media only screen and (min-width : 768px) {
.boxDNP:after	{content: "";
	display: block;
	clear: both}

.boxDnpLeft	{float: left;
	margin: 0.5rem 1rem 0.5rem, 1rem;
	width: 5%}
	
.boxDnpMenu	{float: left;
        margin: 0.5rem 1rem 0.5rem, 1rem;
	width: 10%}
	
.boxDnpCont	{float: left;
	width: 60%}

.boxDnpWeek	{float: left;
        margin: 0.5rem 1rem 0.5rem, 1rem;
	width: 20%}

.boxDnpRight	{float: left;
        margin: 0.5rem 1rem 0.5rem, 1rem;
	width: 5%}
}	
@media only screen and (min-width : 980px) {
.boxDNP:after	{content: "";
	display: block;
	clear: both}

.boxDnpLeft	{float: left;
	margin: 0.5rem 1rem 0.5rem, 1rem;
	width: 10%}
	
.boxDnpMenu	{float: left;
        margin: 0.5rem 1rem 0.5rem, 1rem;
	width: 230px}
	
.boxDnpCont	{float: left;
	width: 500px}

.boxDnpHistCont	{float: left;
	width: 650px}

.boxWxrepoCont	{float: left;
	width: 750px}

.boxDnpWeek	{float: left;
        margin: 0.5rem 1rem 0.5rem, 1rem;
	width: 250px}

.boxDnpRight	{float: left;
        margin: 0.5rem 1rem 0.5rem, 1rem;
	width: 10%}

.boxDnpTool	{float: left;
        margin: 0.5rem 1rem 0.5rem, 1rem;
	width: 900px}

.boxDnpHistMenu	{float: left;
        margin: 0.5rem 1rem 0.5rem, 1rem;
	width: 330px}
	
.boxDnpHistRightSpace {float: left;
        margin: 0.5rem 1rem 0.5rem, 1rem;
	width: 150px}
}

.boxModal:after	{content: "";
	display: block;
	width: 850px;
	clear: both}

.boxModalImg	{float: left;
        margin: 0.5rem 1rem 0.5rem, 1rem;
	width: 450px;}

.boxModalMergin { float: left; width: 20px; height:50px;}
	
.boxModalCont	{float: left;
	width: 400px;}