@charset "utf-8";

/* fonts for SNS
	========================================================================== */
@font-face {
	font-family: 'icomoon';
	src:url('//smtgvs.weathernews.jp/soramagazine/fonts/icomoon.eot?-qz7pb2');
	src:url('//smtgvs.weathernews.jp/soramagazine/fonts/icomoon.eot?#iefix-qz7pb2') format('embedded-opentype'),
		url('//smtgvs.weathernews.jp/soramagazine/fonts/icomoon.woff?-qz7pb2') format('woff'),
		url('//smtgvs.weathernews.jp/soramagazine/fonts/icomoon.ttf?-qz7pb2') format('truetype'),
		url('//smtgvs.weathernews.jp/soramagazine/fonts/icomoon.svg?-qz7pb2#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
	font-family: 'icomoon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.icon-evernote:before {
	content: "\e004";
}
.icon-feedly:before {
	content: "\e007";
}
.icon-pocket:before {
	content: "\e008";
}
.icon-line:before {
	content: "\e009";
}
.icon-hatena:before {
	content: "\e00a";
}
.icon-feedly-square:before {
	content: "\e601";
}
.icon-googleplus:before {
	content: "\e608";
}
.icon-facebook:before {
	content: "\e60d";
}
.icon-instagram:before {
	content: "\e610";
}
.icon-twitter:before {
	content: "\e611";
}
.icon-feed:before {
	content: "\e614";
}
.icon-youtube:before {
	content: "\e617";
}
.icon-flickr2:before {
	content: "\e61e";
}
.icon-githubmark:before {
	content: "\e626";
}
.icon-github:before {
	content: "\e627";
}
.icon-wordpress:before {
	content: "\e629";
}
.icon-tumblr:before {
	content: "\e62d";
}
.icon-yahoo:before {
	content: "\e62f";
}
.icon-apple:before {
	content: "\e631";
}
.icon-android:before {
	content: "\e633";
}
.icon-windows:before {
	content: "\e634";
}
.icon-windows8:before {
	content: "\e635";
}
.icon-skype:before {
	content: "\e636";
}
.icon-delicious:before {
	content: "\e638";
}
.icon-pinterest:before {
	content: "\e63a";
}
.btn_sns{
	display: inline-block;
	background:#0c419a;
	box-shadow:2px 2px rgba(0,0,0,0.5);
	color:#fff !important;
	padding:8px 8px 8px;
	text-decoration:none;
	cursor:pointer;
	border:0;
	border-radius: 2px;
}
.btn_fb{
	background:#3b579d;
	padding:4px;
}
.btn_tw{
	background:#67AADD;
	padding:4px;
}
.btn_gp{
	background:#d64136;
	padding:4px;
}

.arrow_box {
	position: relative;
	display: inline-block;
	background: #ffffff;
	border: 1px solid #cccccc;
	border-radius: 2px;
	color:#666;
	margin-left:10px;
	width:3em;
	text-align:center;
	font-size:15px;
	padding:0px;
}
.arrow_box:after, .arrow_box:before {
	right: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.arrow_box:after {
	border-color: rgba(255, 255, 255, 0);
	border-right-color: #ffffff;
	border-width: 4px;
	margin-top: -4px;
}
.arrow_box:before {
	border-color: rgba(204, 204, 204, 0);
	border-right-color: #cccccc;
	border-width: 5px;
	margin-top: -5px;
}

.share{
	text-align:center;
	margin:1em auto 2em;
}
.share_sp{
	z-index: 999;
	position: fixed;
	bottom:0;
	text-align:center;
	width:100%;
	margin:0 auto;
	padding:.5em 0;
	background-color: #fff;
	border-top:1px solid #ccc;
}

.hexbutton, .hexbutton:before, .hexbutton:after {
	display: inline-table;
	position: relative;
	margin:0 1em 2em;
	top:0;
	height: 30px;
	width: 51.96px;
	background: #fff;
	text-align:center;
	text-transform:uppercase;
	color:#666;
	z-index: 1;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all  0.3s ease;
}
.hexbutton:before, .hexbutton:after {
	content: '';
	position: absolute;
	top: 0;
	left: -1em;
	z-index: -100;
}
.hexbutton:before {
	-ms-transform: rotate(60deg);
	-webkit-transform: rotate(60deg);
	transform: rotate(60deg);
}
.hexbutton:after {
	-ms-transform: rotate(-60deg);
	-webkit-transform: rotate(-60deg);
	transform: rotate(-60deg);
}
.hexbutton span {
	position: absolute;
	left:0;right:0;
	display:table-cell;
	vertical-align:middle;
	font-size:24px;
	line-height:1.25em;
}
.hexbutton_fb, .hexbutton_fb:before, .hexbutton_fb:after {
	background: #3b579d;
}
.hexbutton_tw, .hexbutton_tw:before, .hexbutton_tw:after {
	background: #67aadd;
}
.hexbutton_gp, .hexbutton_gp:before, .hexbutton_gp:after {
	background: #d64136;
}

.snsshare_sp {
	display: inline-block;
	width:30%;
	border-right:1px solid #ccc;
}
.snsshare_sp:last-child {
	border:none;
}
.share_sp span {
	font-size:20px;
	padding:0 .3em;
}

#count_fb,#count_tw,#count_gp{
	color:#fff;
}
#count_fb_sp{
	color:#3b579d;
}
#count_tw_sp{
	color:#67aadd;
}
#count_gp_sp{
	color:#d64136;
}
@media(min-width:768px){
	.share{
		margin:1em auto 2em;
	}
}

/* -------------------------------------------------------------------------------------
	INITIALIZE
------------------------------------------------------------------------------------- */
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
body,table,h1,h2,h3,h4,h5,h6,p,ul,ol,li,dl,blockquote,form,label,dl,dt,dd,ol,ul,li,fieldset,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary {
	margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; background: transparent;
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,canvas { display: block; }
html {
	width:100%;
	background-color:#f2f2f2;
	margin: 0 auto;
}
body {
	font: 16px/150% Questrial, HelveticaNeue, sans-serif, "ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN";
	-webkit-text-size-adjust: none;
	color:#333;
	text-shadow:0 0 1px #fff;
	-webkit-touch-callout: none;
	margin:0 auto;
	min-width: 320px;
}
img { border: none; vertical-align:bottom; }
input,textarea{ margin:0;padding:0; }

.pc-only { display: none; }
@media (min-width: 768px) { .pc-only { display: block; } }

.sp-only { display: block; }
@media (min-width: 768px) { .sp-only { display: none; } }

b{
	font-weight: bold;
}

/* -------------------------------------------------------------------------------------
	WRAPPER
------------------------------------------------------------------------------------- */
.wrapper{
	padding-bottom: 40px;
}
@media(min-width:768px){
	.wrapper{
		padding-bottom: 0;
	}
}

/* -------------------------------------------------------------------------------------
	HEADER
------------------------------------------------------------------------------------- */
.header{
	position:relative;
	padding:0px;
	margin:0 auto;
	text-align: center;
	color: #333;
}
.logo_qt{
	width:320px;
	height:53px;
}
.header_logo{
	width:320px;
	height:53px;
}
.header_title_text1{
	font-family: 'Oswald', sans-serif;
	font-size: 16px;
	color:#3ecbe1;
	margin-bottom:20px;
}
.header_title_text2{
	font-size: 24px;
	font-weight:bold;
	color:#393d40;
	margin:0 auto 20px;
	line-height: 1.33em;
	width:90%;
}
.header_title_text3{
	font-size: 18px;
	color:#7b8388;
	margin:0 auto 1em;
	line-height: 1.33em;
	width:90%;
}
@media(min-width:768px){
	.header{
		width:800px;
		padding:0px;
		margin:0 auto;
		text-align: left;
	}
	.logo_qt{
		width:320px;
		height:50px;
	}
	.logo_wni{
		width:117px;
		height:50px;
		position: absolute;
		top:0;bottom:0;right:0;
	}
	.header_logo{
		width:640px;
		height:106px;
	}
	.header_title_text1{
		font-size: 24px;
	}
	.header_title_text2{
		font-size: 36px;
	}
	.header_title_text3{
		font-size: 20px;
	}
}

/* -------------------------------------------------------------------------------------
	FOOTER
------------------------------------------------------------------------------------- */
.footer{
	position:relative;
	width:100%;
	padding:0px;
	margin:0 auto;
	text-align: left;
	color:#4e5a70;
	text-align: center;
}
.footer_txt{
	font-size:13px;
}

/* -------------------------------------------------------------------------------------
	LIST_DETAILS
------------------------------------------------------------------------------------- */
.list_details{
	position:relative;
	width:100%;
	margin:0 auto;
	text-align: center;
	padding-top:1em;
}
.list_details h3{
}
.details_item{
	margin-top:1.5em;
	border-bottom:1px solid #4e5a70;
}
.details_item_simple{
	position: relative;
	margin:0 auto;
	border-bottom:1px solid #4e5a70;
}
.details_item_simple .details_item_title{
	font-size:20px;
	color:#4e5a70;
	font-weight:bold;
	padding:.5em 0 0 .5em;
}
.details_item_simple .details_item_abst{
	color:#4e5a70;
	padding: 0 0 .5em .5em;
}
.details_item_img{
	width:150px;
	height:167px;
}
.details_item_img_2{
	width:250px;
	height:210px;
}
.details_item_title{
	font-size:20px;
	color:#4e5a70;
	font-weight:bold;
	padding: .5em 0;
}
.details_item_abst{
	color:#4e5a70;
	padding-bottom: 1em;
}
.details_item_detail{
	color:#4e5a70;
}
.details_item_detail p{
	padding-bottom: 1em;
}
.details_item_sp{
	background-color: #fff;
	color:#4e5a70;
	text-align: left;
	padding:1em;
	box-shadow: 0 0 4px 4px rgba(0,0,0,0.33) inset;
}
.details_item_sp p{
	padding-bottom: 1em;
}
@media(min-width:768px){
	.list_details{
		width:800px;
	}
	.details_item,.details_item_simple{
		border:none;
	}
	.details_item_img{
		width:300px;
		height:611px;
	}
	.details_item_title,.details_item_simple .details_item_title{
		font-size:32px;
		padding: 1.5em 0 1em;
	}
	.details_item_abst,.details_item_simple .details_item_abst{
		font-size:20px;
		padding-bottom: 2em;
	}
}

/* -------------------------------------------------------------------------------------
	ABOUT & LINKS
------------------------------------------------------------------------------------- */
.about, .links{
	position:relative;
	width:100%;
	margin:0 auto;
	text-align: center;
	padding-top:1em;
}
.about_abst{
	position:relative;
	margin:0 1em 2em;
	color:#32415d;
}
.about_title{
	position:relative;
	margin:0 .5em;
	border-bottom: 1px solid #4e5a70;
}
.about_title_icon{
	width:36px;
	height:36px;
	float:left;
}
.about_title_text{
	position:relative;
	text-align: left;
	font-size: 18px;
	height:36px;
}
.about_title_text p{
	position: absolute;
	bottom:0;
	left:36px;
	font-weight:bold;
	color:#32415d;
}
.about_title_text p span{
	transform: scale( 0.8 , 1 );
}
.about_server{
	width:320px;
	height:160px;
}
.about_detail_text{
	position:relative;
	text-align: left;
	padding:0 1em;
	color:#32415d;
}
.list_links{
	padding: 1em 0;
}
ul.list_links{
	list-style-type: none
}
.list_links li{
	position:relative;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	text-align: left;
	padding:.5em;
	color:#32415d;
}
.list_links li:first-child{
	border-bottom:none;
}
.list_links li a{
	display: block;
}
@media(min-width:768px){
	.about{
		width:800px;
	}
	.links{
		width:800px;
	}
	.about_abst{
		font-size: 20px;
		line-height: 1.75em;
	}
	.about_title_icon{
		width:72px;
		height:72px;
	}
	.about_title_text{
		font-size: 36px;
		height:72px;
	}
	.about_title_text p{
		left:72px;
		bottom:.5em;
	}
	.about_detail_text{
		font-size: 18px;
		line-height: 1.75em;
		padding:2em 0;
	}
}

/* -------------------------------------------------------------------------------------
	DL_APP
------------------------------------------------------------------------------------- */
.dl_app{
	position:relative;
	width:100%;
	padding:.5em;
	margin:0 auto;
	text-align: center;
	background-color:#32415d;
	color:#fff;
}
.freemsg{
	color:#fff;
	margin:0 auto;
	padding:1em;
	border:1px solid #ff0;
}
.freemsg_title{
	color:#ff0;
	font-size:20px;
	padding-bottom: .5em;
}
.freemsg_detail{
	font-size:15px;
	padding-bottom: .5em;
}
.freemsg_dlmsg{
	font-size:15px;
	padding-bottom: .5em;
}
@media(min-width:768px){
	.dl_app{
		width:640px;
	}
	.dl_mainmsg{
		position:absolute;
		width:400px;
		top:250px;
		left:290px;
	}
}

/* -------------------------------------------------------------------------------------
	MAINMSG
------------------------------------------------------------------------------------- */
.mainmsg,.mainmsg_wrapper{
	position:relative;
	width:100%;
	padding:0px;
	margin:0 auto;
	text-align: center;
	background-color: #fff;
	color:#333;
}
.mainmsg_img{
	width:320px;
	height:397px;
}
@media(min-width:768px){
	.mainmsg{
		background: url(//smtgvs.weathernews.jp/door/jishin_tsunami/img/mainmsg_bg_pc.jpg) no-repeat center center;
		background-size: cover;
		background-color: transparent;
	}
	.mainmsg_wrapper{
		position:relative;
		width:800px;
		background-color: transparent;
	}
	.mainmsg_img{
		width:800px;
		height:512px;
	}
}

/* -------------------------------------------------------------------------------------
	SUMMARY
------------------------------------------------------------------------------------- */
.summary{
	position:relative;
	width:92%;
	padding:0px;
	margin:0 auto;
	text-align: left;
	color:#666;
}
.summary_title{
	font-family: 'Oswald', sans-serif;
	font-size: 18px;
	text-align: center;
	color:#3ecbe1;
	margin:0 auto 20px;
}
@media(min-width:768px){
	.summary{
		width:800px;
		text-align: center;
	}
	.summary_title{
		font-size: 24px;
	}
}

/* -------------------------------------------------------------------------------------
	ANCHORS
------------------------------------------------------------------------------------- */
a,a:link,a:visited{color:#000;text-decoration:none;}a:hover,a:focus{color:#000;}a:active{color:#000;}
p a,p a:link,p a:visited{color:#fff;text-decoration:underline;}p a:hover,p a:focus{color:#000;}p a:active{color:#000;}

/* -------------------------------------------------------------------------------------
	CLEARFIX
------------------------------------------------------------------------------------- */
.clearfix {zoom:1;}.clearfix:after {content:'';display:block;clear:both;height:0;}

/* -------------------------------------------------------------------------------------
	CONTENT
------------------------------------------------------------------------------------- */
.content{
	width:100%; margin:0 auto;padding:0;
	padding-bottom:20px;
}

it {font-style:italic;}

.center{ text-align:center; }
.right { text-align:right; }
.left  { text-align:left; }

.w90{
	position:relative;
	width:90%; margin:0 auto;padding:10px 0 10px;
}
.w96{
	position:relative;
	width:96%; margin:0 auto;padding:10px 0 10px;
}
.w100{
	position:relative;
	width:100%; margin:0 auto;padding:10px 0 10px;
}

h1 {font-size: 24px;}
h2 {font-size: 20px;}
h3 {font-size: 18px;}
h4 {font-size: 16px;}
h4.picks {color:#f44;	font-size:14px; font-weight: normal; line-height:1.3em; text-align: center; }

.specialbadge{
	position: absolute;
	top:320px;
	right:0px;
	font-size:12px;
	text-align: center;
	background-color: #f8ca42;
	color:#fff;
}
.hexbadge, .hexbadge:before, .hexbadge:after {
 display: table;
 position: absolute;
 top:292px;
 right:16px;
 height: 50px;
 width: 86.6px;
 background: #f8ca42;
 text-align:center;
 text-transform:uppercase;
 color:#fff;
 z-index: 1;
}
.hexbadge:before, .hexbadge:after {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 z-index: -100;
}
.hexbadge:before {
 -ms-transform: rotate(60deg);
 -webkit-transform: rotate(60deg);
 transform: rotate(60deg);
}
.hexbadge:after {
 -ms-transform: rotate(-60deg);
 -webkit-transform: rotate(-60deg);
 transform: rotate(-60deg);
}
.hexbadge span {
 display:table-cell;
 vertical-align:middle;
 font-size:14px;
 line-height:1.25em;
}

@media(min-width:768px){
	.repo_card{
		display:block;
		margin:0 16px 32px;
		flex: 0 calc(90% / 3);
	}
}

.card96black .repo_who,.card96black .repo_where {
	color:#fff;
}
.card96black .repo_who:before {
	content:" ";
	display:inline-block;
	background:url(../img/who_w.png) 0 0 no-repeat transparent;
	width:12px;
	height:16px;
	background-size: 12px 16px;
}
.card96black .repo_where:before {
	content:" ";
	display:inline-block;
	background:url(../img/where_w.png) 0 0 no-repeat transparent;
	width:12px;
	height:16px;
	background-size: 12px 16px;
}
.card96black h4.picks {color:#ff0;}

hr.hr_s{height:1px;border:none;border-top: 1px #999999 solid;}
hr.hr_d{height:1px;border:none;border-top: 1px #999999 dashed;}

.btn_blue {
	display:block;
	width:100%;
	padding: 10px 16px;
	background-color:#cbf2fc;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	border-radius: 2px;
	border: 1px solid #fff;
	box-shadow: rgba(0, 0, 0, 0.33) 2px 2px 0px 0px;
	font-size: 16px;
	font-weight: bold;
	text-align:center;
	color: #fff;
}
.btn_pink {
	display:block;
	width:100%;
	padding: 10px 16px;
	background-color:#fcc;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	border-radius: 2px;
	border: 1px solid #fff;
	box-shadow: rgba(0, 0, 0, 0.33) 2px 2px 0px 0px;
	font-size: 16px;
	font-weight: bold;
	text-align:center;
	color: #fff;
}
.btn_yellow {
	display:block;
	width:100%;
	padding: 10px 16px;
	background: rgba(240,240,0,1);
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	border-radius: 2px;
	border: 1px solid #fff;
	box-shadow: rgba(0, 0, 0, 0.33) 2px 2px 0px 0px;
	font-size: 16px;
	font-weight: bold;
	text-align:center;
	color: #fff;
}
.btn_form {
	display:block;
	width:100%;
	padding: 10px 16px;
	background-color:#2ebcdf;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	border: 1px solid #0792b5;
	font-size: 16px;
	font-weight: bold;
	text-align:center;
	color: #fff;
}

/* THUMBNAIL */
.thumb_sq {
	width: 100%;
	box-shadow: 0 0 40px 40px rgba(0,0,0,0.05) inset;
}
.thumb_sq2 {
	height: 214px;
	width: 214px;
	overflow: hidden;
	margin: 0px auto;
	top:50%;
}
.mt50{
	margin-top: -50%;
	width:214px;
}
.ml50{
	margin-left: -50%;
	height:214px;
}
.il{
	display:inline;
}
.ilb{
	display:inline-block;
}
/*FORM*/
form{width:90%; margin:0 auto;padding:50px 0 10px;}
input[type="text"],input[type="email"],input[type="password"],input[type="number"],input[type="tel"]{box-sizing:border-box;-moz-box-sizing:border-box;width:100%;padding:6px;margin:5px 0 13px;height: 35px; font-size: 14px;-webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; border: solid 1px #8a8a8a; background:rgba(255,255,255,.9); box-shadow:inset 1px 1px 3px rgba(0,0,0,.3);-webkit-box-shadow:inset 1px 1px 3px rgba(0,0,0,.3);-moz-box-shadow:inset 1px 1px 3px rgba(0,0,0,.3); display:block;}
ul.tgl{list-style:none;margin:5px 0 13px;-webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; border: solid 1px #8a8a8a; text-align:center;line-height:35px;
	background: -webkit-gradient(linear,left left,left bottom,from(#8a8a8a),color-stop(.5,#8a8a8a),color-stop(.5,#fff),to(#fff))center 0 no-repeat,-webkit-gradient(linear,left top,left bottom,from(#fbfbfb),to(#8d8d8d));
	background: -webkit-linear-gradient(left,#8a8a8a,#8a8a8a 50%,#fff 50%,#fff)center 0 no-repeat,-webkit-linear-gradient(top,#fbfbfb,#8d8d8d);
	background: -moz-linear-gradient(left,#8a8a8a,#8a8a8a 50%,#fff 50%,#fff)center 0 no-repeat,-moz-linear-gradient(top,#fbfbfb,#8d8d8d);
	background: -ms-linear-gradient(left,#8a8a8a,#8a8a8a 50%,#fff 50%,#fff)center 0 no-repeat,-ms-linear-gradient(top,#fbfbfb,#8d8d8d);
	background: -o-linear-gradient(left,#8a8a8a,#8a8a8a 50%,#fff 50%,#fff)center 0 no-repeat,-o-linear-gradient(top,#fbfbfb,#8d8d8d);
	background: linear-gradient(left,#8a8a8a,#8a8a8a 50%,#fff 50%,#fff)center 0 no-repeat,linear-gradient(top,#fbfbfb,#8d8d8d);
	background-size: 2px 100%, 100% 35px;-webkit-background-size: 2px 100%, 100% 35px; -moz-background-size: 2px 100%, 100% 35px; -o-background-size: 2px 100%, 100% 35px;
}
ul.tgl li{display:block;float:left;width:50%;-webkit-border-radius: 4px 0 0 4px; -moz-border-radius: 4px 0 0 4px; border-radius: 4px 0 0 4px;font-size:16px;text-shadow:0 1px 1px #fff;
background:url(../img/icon_m_off.png)20px 6px no-repeat;background-size:20px 25px;-webkit-background-size:20px 25px;-moz-background-size:20px 25px;-ms-background-size:20px 25px;-o-background-size:20px 25px;
}
ul.tgl li:last-child{-webkit-border-radius: 0 4px 4px 0; -moz-border-radius: 0 4px 4px 0; border-radius: 0 4px 4px 0;background:url(../img/icon_f_off.png)20px 6px no-repeat;background-size:20px 25px;-webkit-background-size:20px 25px;-moz-background-size:20px 25px;-ms-background-size:20px 25px;-o-background-size:20px 25px;}
ul.tgl li.on{color:#fff;text-shadow:0 -1px 1px #000;
	background: url(../img/icon_m_on.png)20px 5px no-repeat,-webkit-gradient(linear, left top, left bottom, from(#236ce5), color-stop(50%, #5fa0f2), to(#8ebeff));
	background: url(../img/icon_m_on.png)20px 5px no-repeat,-webkit-linear-gradient(top, #1748be, #2180df 50%, #2bb2fa);
	background: url(../img/icon_m_on.png)20px 5px no-repeat,-moz-linear-gradient(top, #236ce5, #5fa0f2 50%, #8ebeff);
	background: url(../img/icon_m_on.png)20px 5px no-repeat,-ms-linear-gradient(top, #236ce5, #5fa0f2 50%, #8ebeff);
	background: url(../img/icon_m_on.png)20px 5px no-repeat,-o-linear-gradient(top, #236ce5, #5fa0f2 50%, #8ebeff);
	background: url(../img/icon_m_on.png)20px 5px no-repeat,linear-gradient(top, #236ce5, #5fa0f2 50%, #8ebeff);
	background-size:20px 25px,100% 100%;-webkit-background-size:20px 25px,100% 100%;-moz-background-size:20px 25px,100% 100%;-ms-background-size:20px 25px,100% 100%;-o-background-size:20px 25px,100% 100%;
}
ul.tgl li:last-child.on{
	background: url(../img/icon_f_on.png)20px 5px no-repeat,-webkit-gradient(linear, left top, left bottom, from(#236ce5), color-stop(50%, #5fa0f2), to(#8ebeff));
	background: url(../img/icon_f_on.png)20px 5px no-repeat,-webkit-linear-gradient(top, #1748be, #2180df 50%, #2bb2fa);
	background: url(../img/icon_f_on.png)20px 5px no-repeat,-moz-linear-gradient(top, #236ce5, #5fa0f2 50%, #8ebeff);
	background: url(../img/icon_f_on.png)20px 5px no-repeat,-ms-linear-gradient(top, #236ce5, #5fa0f2 50%, #8ebeff);
	background: url(../img/icon_f_on.png)20px 5px no-repeat,-o-linear-gradient(top, #236ce5, #5fa0f2 50%, #8ebeff);
	background: url(../img/icon_f_on.png)20px 5px no-repeat,linear-gradient(top, #236ce5, #5fa0f2 50%, #8ebeff);
	background-size:20px 25px,100% 100%;-webkit-background-size:20px 25px,100% 100%;-moz-background-size:20px 25px,100% 100%;-ms-background-size:20px 25px,100% 100%;-o-background-size:20px 25px,100% 100%;}
ul.tgl li.on a{color:#fff;}
select{margin:5px 0 3px;width: 100%;height: 35px;
	background: -webkit-gradient(linear, left top, left bottom, from(#f4f8ff), to(#d6dce5));
	background: -webkit-linear-gradient(top, #f4f8ff, #d6dce5);
	background: -moz-linear-gradient(top, #f4f8ff, #d6dce5);
	background: -ms-linear-gradient(top, #f4f8ff, #d6dce5);
	background: -o-linear-gradient(top, #f4f8ff, #d6dce5);
	background: linear-gradient(top, #f4f8ff, #d6dce5);
	-webkit-border-radius: 4px;　-moz-border-radius: 4px; border-radius: 4px; border: solid 1px #8a8a8a;
}
.slct div{position:relative;}.slct div:after{content: ""; width: 0; height: 0; position: absolute; top: 20px; right: 6px;border-top:solid 7px #000;border-bottom:solid 5px transparent;border-left:solid 4px transparent;border-right:solid 4px transparent;}
.slct div{float:left;width:25%;}
.slct div:first-child{width:50%;}
textarea{
	display:block;
	width:100%;padding:6px;margin:5px 0 13px;font-size: 14px;
	-webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;
	border: solid 1px #8a8a8a; background:rgba(255,255,255,.9);
	box-shadow:inset 1px 1px 3px rgba(0,0,0,.3);-webkit-box-shadow:inset 1px 1px 3px rgba(0,0,0,.3);-moz-box-shadow:inset 1px 1px 3px rgba(0,0,0,.3);
}

/* -------------------------------------------------------------------------------------
	PRELOADER
------------------------------------------------------------------------------------- */
.loader{
	width: 100%;
	height: 100%;
	background: #fff;
	position: fixed;
	top:0; left:0;
	z-index: 1000;
	background: #fff url(//smtgvs.weathernews.jp/door/jishin_tsunami/img/loading.gif) no-repeat center bottom;
	background-size: 200px 25px;
}

/* -------------------------------------------------------------------------------------
	MODAL
------------------------------------------------------------------------------------- */

.overlay {
	position: absolute !important;
	z-index: 100;
	top: 0px;
	left: 0px;
	height: 100%;
	width: 100%;
	background: rgba(0,0,0,.7);
	display: none;
}
.modal {
	position: absolute;
	width: 90%;
	box-sizing: content-box;
	display:none;
	border-radius: 5px;
	font-size: 14px;
	overflow: visible;
	overflow: hidden;
	top: 0;
	padding-top: 50px;
	left: 50%;
	z-index: 1000;
}
.modal figure{
	position: relative;
}
.modal .user-detail-photo{
	width: 254px;
	-webkit-mask-box-image: url(../img/hex1.png);
}
.modal .status-icon img{
	width: 53px;
	position: absolute;
	top: 228px;
	left: 50%;
	margin-left: -26.5px;
}
.modal figcaption{
	/*padding: 20px;*/
}
.modal h2{
	font-size: 16px;
	font-weight: normal;
	word-break: break-all;
}
.modal ul{
	margin-top: 30px;
	font-size: 13px;
}
.modal li{
	list-style: none;
}
.modal li strong{
	font-weight: normal;
}
.modal .modal-close{
	font-size:18px;
}
.btn{
	width: 100%;
	margin: 10px auto;
	padding: 10px;
	background: rgba(0,0,0,.3);
	border: 1px solid #fff;
	border-radius: 3px;
	cursor: pointer;
	color: #fff;
}
.icon_map {
	width: 20px;
	height: 20px;
	vertical-align: middle;
	margin-right:-2px;
	margin-top:-6px;
}
.icon_avator {
	width: 20px;
	height: 23px;
	vertical-align: middle;
	margin-right:2px;
	margin-top:-6px;
}

/* -------------------------------------------------------------------------------------
	column layout
------------------------------------------------------------------------------------- */
.flex{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	flex-flow: row wrap;
}
.about_detail, .details_item, .details_item_simple{
	align-items:center;
}
.flex_item{
	width: 100%;
}
.flex_item_2{
	display: inline-block;
	width: 50%;
}
.column--wrapper {
	position: relative;
	-webkit-column-count: 1;
	-webkit-column-gap: 2px;
	-webkit-column-fill: auto;
	-moz-column-count: 1;
	-moz-column-gap: 2px;
	-moz-column-fill: balance;  /* FFはbalanceにしないとダメなのナンデ？ */
	column-count: 1;
	column-gap: 2px;
	column-fill: auto;
}

@media(min-width:768px){
	body {
		width:100%;
	}
	.flex_item{
		display: inline-block;
		width: 50%;
	}
	.column--wrapper {
		-webkit-column-count: 3;
		-webkit-column-gap: 2px;
		-moz-column-count: 3;
		-moz-column-gap: 2px;
		column-count: 3;
		column-gap: 2px;
	}
}

/* -------------------------------------------------------------------------------------
	BUTTON WITH ARROW
------------------------------------------------------------------------------------- */
/* 角丸 */
.Radius5 {  
    border-radius: 5px;        /* CSS3草案 */  
    -webkit-border-radius: 5px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 5px;   /* Firefox用 */  
}
/* ボタン共通 */
.Button {
	overflow: hidden;
	width: 100%;
	height: 50px;
	margin: 0 auto;
	padding: 0;
}
.Button a {
	display: block;
	position: relative;
	z-index: 100;
	text-align:center;
	background: #00a0e9;
	color: #fff;
	font-size: 14px;
	line-height: 50px;
	text-decoration:none;
}
.Button a:hover {
	background: #3ab2e9;        /* マウスオーバーカラー */  
}
#IconList1 a:before {        /*白いひし型 */  
	display: block;
	content: "";
	position: absolute;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	top: 50%;
	right: 15px;
	width: 8px;
	height: 8px;
	margin-top: -4px;
	background: #fff;
}
#IconList1 a:after {        /*バックグラウンドと同じ色のひし型をずらして「before要素」を隠す */  
	display: block;
	content: "";
	position: absolute;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	top: 50%;
	right: 20px;
	width: 8px;
	height: 8px;
	margin-top: -4px;
	background: #00a0e9;
}
#IconList1 a:hover:after {        /*「after要素」のマウスオーバー（カラーを合わせる） */  
	background: #3ab2e9;
}

.btn_open{
	position: absolute;
	top:0;bottom:0;right:10px;
	margin: auto;
	height:24px; width:24px;
	background-color:#00a0e9;
	border-radius:24px;-webkit-border-radius:24px;-moz-border-radius:24px;
}

.btn_open:before{
	content:'';
	height:0; width:0;
	display:block;
	border:6px transparent solid;
	border-right-width:0;
	border-left-color:#fff;
	position:absolute;
	top:7px; left:9px;
	transform: rotate(90deg);
}

.btn_next{
	position: absolute;
	top:0;bottom:0;right:10px;
	margin: auto;
	height:20px; width:20px;
	background-color:transparent;
}
.btn_next:before{
	content:'';
	height:0; width:0;
	display:block;
	border:6px transparent solid;
	border-right-width:0;
	border-left-color:#00a0e9;
	position:absolute;
	top:6px; left:10px;
}