@charset "UTF-8";
/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }

li { list-style-type: none; }

body { color: #000; line-height: 1.4; font-family: 'ヒラギノ角ゴ ProN W3', 'HiraKakuProN-W3', 'メイリオ', Meiryo, sans-serif; font-size: 16px; background-color: #fff;
-webkit-font-smoothing: antialiased;
}

a{
	text-decoration:none;
}


p{
	color:#333;
	margin-bottom:8px;
	font-size:1.1em;
	line-height:1.7em;
}

header{
  text-align:right;
}

header a{
	margin: 6px 8px;
	width: 72px;
	height: 23px;
	display: inline-block;
	background: url(../img/wni_logo.png) no-repeat;
	background-size: 72px 23px;
	overflow: hidden;
	text-indent: 100%;
}

header a:focus{
	opacity: .6;
}

header h1{
	text-align:center;
	background:#525d7d;
	color:#FFF;
	font-weight:normal;
	font-size:1.6em;
	padding:10px;
}

main{
	display:block;
}

main img{
	width:100%;
}

.container{
	padding:20px 0 0;
	margin:0 20px;
}

.box{
	clear:both;
	margin-top:10px;
	border:1px solid #afb2bc;
	padding:10px 15px 0;
}

.box h2{
	font-weight:normal;
	padding-bottom:5px;
	margin-bottom:10px;
	color:#101e4b;
	font-size:1.5em;
	border-bottom:1px solid #afb2bc;
}

figcaption{
	text-align:center;
}

section{
	clear:both;
	margin:25px 0;
	overflow:hidden;
}

section h1{
	font-weight:normal;
	font-size:1.3em;
	color:#101e4b;
	background:#e0e9f2;
	padding:15px 20px;
}

.square{
	font-size:.6em;
	display:inline-block;
	margin-right:7px;
	vertical-align:middle;
}

#app{
	clear:both;
	background:#fbf4ce;
	border:1px solid #faaa65;
	padding:0 0 5px;
	overflow:hidden;
}

#app div{
	padding:0 20px;
}

#app h1{
	font-size:1.5em;
	color:#dc6b07;
	background:none;
	border-bottom:0;
	padding:15px 20px 15px;
}

#app p{
	color:#dc6b07;
}

#app span{
	display:inline-block;
	padding-top:10px;
	font-size:.9em;
}

aside{
	clear:both;
}

aside #colorBtn a{
	display: block;
	font-size: 18px;
	border-radius: 5px;
	text-align:center;
	margin: 10px 0;
	padding: 8px 0;
	line-height: 1.3;
	color: #fff;
}

aside #colorBtn span{
	display: block;
	font-size: 14px;
}

.btn-blue {
	background-color: #248bd4;
}

.btn-green {
	background-color: #4caf50;
}

.btn-orange {
	background-color: #f78f09;
}

.btn-gray {
	background-color: #999;
}

.btn-blue:hover, .btn-blue:active {
	background-color: #207dbe;
}

.btn-green:hover, .btn-green:active {
	background-color: #449d48;
}

.btn-orange:hover, .btn-orange:active {
	background-color: #df8107;
}

.btn-gray:hover, .btn-gray:active {
	background-color: #8c8c8c;
}

#iconBtn{
	border-top:1px solid #afb2bc;
}

#iconBtn li{
	border-bottom:1px solid #afb2bc;
	background:url(../img/arrow.png) no-repeat 100%;
	background-size:39px 37px;
}

#iconBtn a{
	font-size:1.4em;
	color:#101e4b;
	display: block;
	background-repeat:no-repeat;
	background-position:20px 50%;
	background-size:40px 40px;
	padding-top:8px;
	height:67px;
	padding-left:75px;
}

#iconBtn span{
	font-size:.7em;
	display: block;
}

#iconBtn .alerm{
	background-image:url(../img/sidemenu_radar@2x.png);
	background-size:45px 45px;
}

#iconBtn .search{
	background-image:url(../img/icon_gps_blue.png);
}

#iconBtn .map{
	background-image:url(../img/sidemenu_10ten@2x.png);
}

#iconBtn .forecast{
	background-image:url(../img/sidemenu_report_map@2x.png);
}

#iconBtn .check{
	background-image:url(../img/sidemenu_check@2x.png);
}

#downloads{
	padding-bottom:100px;
}

#downloads li:first-child{
	float:left;
	width:49.5%;
}

#downloads li:last-child{
	float:right;
	width:49.5%;
}

#wni-global-footer{
	border-top: 1px solid #ddd;
}

#wni-global-footer li{
	float: left;
	width: 50%;
}

#wni-global-footer li a{
	display: block;
	padding: 12px 10px;
	color: #0c419a;
	border-bottom: 1px solid #ddd;
	font-weight: bold;
}

#wni-global-footer li:nth-child(odd) a{
	border-right: 1px solid #ddd;
}

#wni-global-footer li a:focus{
	background-color: #d5e1f6;
}

.sns-share{
	clear:both;
	padding:5px 0;
	overflow:hidden;
	width:300px;
}

#snsTop{
	position:fixed;
	bottom:0;
	left:0;
	width:100%;
	background:#FFF;
	border-top: 1px solid #afb2bc;
}

#snsTop ul{
	margin:0 auto;
}

#snsBottom{
	display:none;
}

.sns-share li { float: left; width: 32%; margin-right:2%;}
.sns-share li:last-child{ margin-right:0; }
.sns-share li a { display: block; font-size: 14px; color: #fff; cursor: pointer; padding: 7px; line-height:16px; position:relative; height:25px;}
.sns-share li a:hover, .sns-share li a:active { opacity: .8; }
.sns-share .twitter svg{ width: 90px; height: 25px;}
.sns-share .facebook svg { width: 25px; height: 25px;}
.sns-share .count{ width:45px; height:20px; text-align:center;position:absolute; top:7px; right:7px; font-size: 12px; display: block; padding: 3px; border-radius: 3px;}

.sns-share .twitter a { background-color: #01a7e1; }
.sns-share .twitter .count { background-color: #007db1; box-shadow: 1px 1px 1px 0 rgba(0, 47, 63, 0.2) inset; }
.sns-share .line a { background-color: #00c300;}
.sns-share .line svg { width: 35px; height: 35px; position:relative; top:-5px; display:block; margin:0 auto;}
.sns-share .facebook a { background-color: #3c599d; }
.sns-share .facebook .count { background-color: #1b2f72; box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, 0.2) inset; }


.copyright{
	clear:both;
	padding:25px 0 50px;
	margin-bottom:0;
}

.copyright small{
	display:block;
	text-align:center;
	font-size:.8em;
	background:#525d7d;
	color:#FFF;
	padding:10px 0;
}

@media (min-width: 1000px) {
	header a {
		padding-top:30px;
		width: 93px;
		height: 0px;
		background: url(../img/wni_logo.png) no-repeat;
		background-size: 93px 30px;
	}
	
	.container, section h1{
		width:950px;
		margin:0 auto;
	}

	#top{
		overflow: hidden;
	}

	section figure, #top figure{
		float:right;
		width:48%;
	}

	.box{
		margin-top:0;
		clear:none;
		float:left;
		width:48%;
		border: none;
		padding: 0;
	}

	section .box figure{
		float:none;
		width:auto;
	}

	#downloads{
		width:400px;
		margin-left:275px;
		padding-bottom:0;
	}

	.sns-share{
		padding:15px 0;
	}

	#snsTop{
		position:static;
		border-top:none;
	}

	#snsBottom{
		display:block;
	}

	#snsTop ul.sns-share, #snsBottom{
		margin:0 0 0 325px;
	}

	#app p{
		float:left;
		width:50%;
	}
	
	#wni-global-footer{
		display:none;
	}
	
	.copyright{
		padding:25px 0 0;
	}
	
	#iconBtn, #colorBtn{
		display:none;
	}
}

/*---------------------
Youtubeの記述
----------------------*/
.youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  margin-bottom: 10px;/* デザインとは関係なく、コンテンツとの隙間をとる用。変更しても問題ないです。 */
}
.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}

#wni-global-footer li {
    float: left;
    width: 50%;
}

#wni-global-footer li a {
    display: block;
    padding: 12px 10px;
    color: #0c419a;
    border-bottom: 1px solid #ddd;
    font-weight: bold;
}