@charset "utf-8";

/* -------------------------------------------------------------------------------------
	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; }
body {
	font: 16px/166% HelveticaNeue, sans-serif, "ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN";
	-webkit-text-size-adjust: none;
	color:#333;
	-webkit-touch-callout: none;
	margin:0 auto;
	background-color: #fafafa;
	line-height: 1.66em;
	min-width: 320px;
}
img { border: none; vertical-align:bottom; }
input,textarea{ margin:0;padding:0; }
a {
	-webkit-touch-callout:none;
	text-decoration: none;
}
figure{
	margin: 0 auto;
	text-align: center;
}
.disabled{
	pointer-events: none;
	opacity:0.5;
	filter: alpha(opacity=50);
	-ms-filter: "alpha( opacity=50 )";
}
a.disabled{
	pointer-events: none;
	opacity:0.3;
	filter: alpha(opacity=30);
	-ms-filter: "alpha( opacity=30 )";
}
hr.dotted{
	border:none;
	border-top:dashed 1px #CCC;
	height:1px;
	color:#FFFFFF;
	margin: 6px 0;
}
@media(min-width:768px){
	a img:hover{
		opacity:0.8;
		filter: alpha(opacity=80);
		-ms-filter: "alpha( opacity=80 )";
	}
}


/* -------------------------------------------------------------------------------------
	GENERAL
------------------------------------------------------------------------------------- */
.clearfix:after {
	clear:both;
	content: "";
	height: 0;
	display: block;
}
.txtcenter{
	text-align: center;
}
.txtleft{
	text-align: left;
}
.txtright{
	text-align: right;
}
.txt_s{
	font-size: 80%;
	line-height: 1.5em;
}
.bold{
	font-weight:bold;
}
.it{
	font-style: italic;
}
.quote{
	font-style: italic;
	font-weight: bold;
	padding-left: 1em;
}
.upper{
	vertical-align: super;
	font-size: 66%;
}
.under{
	vertical-align: baseline;
	font-size: 66%;
}
.web-only, .app-only { display: none; }
.pc-only { display: none; }
@media (min-width: 768px) { .pc-only { display: block; } }
.sp-only { display: block; }
@media (min-width: 768px) { .sp-only { display: none; } }

/* -------------------------------------------------------------------------------------
	CONTENT
------------------------------------------------------------------------------------- */
.siteheader{
	position: relative;
	background-color: #fff;
	text-align: center;
	border-bottom:solid 1px #eee;
	margin: 0 auto;
	padding: 6px 0;
	box-shadow: 0 1px 1px rgba(0,0,0,.15);
}
.siteheader .logo{
	width: 89px;
	height: 30px;
}
.sitefooter{
	background:#fff;
	color:#aaa;
	font-size:12px;
	font-weight:normal;
	text-align: center;
	padding: .5em 0;
	border-top:1px solid #eee;
}
.sitecontent{
	width:100%;
	padding: 0;
	margin: 0 auto;
}
.main{
	padding: 0 0 15px;
	margin:0 auto;
}
.main:first-of-type{
	padding: 15px 0 15px;
	margin:0 auto;
}
.section_form{
	background-color: #fff;
	color: #0c419a;
	border-top: 2px solid #0c419a;
	border-bottom: 2px solid #0c419a;
	padding: 15px 0 15px;
	margin:0 auto;
}
.titlebanner{
	width: calc(100% - 16px);
	margin: 0 auto 16px;
	text-align: center;
}
.message{
	background-color: #fff;
	border: 1px solid #ccc;
	border-radius: 4px;
	padding:16px;
	width:calc(100% - 16px);
	max-width: 600px;
	margin: 0 auto 16px;
}
h1{
	padding:0 0 0 15px;
	font-size:16px;
	font-weight:bold;
}
h2{
	font-size: 16px;
	font-weight: bold;
	text-align: center;
	margin:16px 0;
}
h3{
	font-size: 16px;
	font-weight: normal;
	text-align: center;
	margin-bottom:16px;
}
.select_div dl{
	margin-bottom:16px;
}
.select_div dl:first-child{
	margin-top:16px;
}
.select_div dt{
	font-size: 13px;
	color: #999;
	line-height: 18px;
	padding-left: 8px;
}
.select_div dd{
	background-color: #fff;
	border-bottom: 1px solid #ccc;
	overflow-x: hidden;
}
dd.search{
	padding: 10px;
	text-align: center;
}
dd.icon::before{
	display: inline-block;
	content: " ";
	width:36px;
	height:36px;
	margin:6px 6px 6px 10px;
	background-size: cover;
	vertical-align: top;
}
.tab_menu::before{
	background-image: url(//smtgvs.weathernews.jp/ip/help5/img/icon_tab_menu@2x.png);
}
.tab_search::before{
	background-image: url(//smtgvs.weathernews.jp/ip/help5/img/icon_tab_search@2x.png);
}
.tab_my::before{
	background-image: url(//smtgvs.weathernews.jp/ip/help5/img/icon_tab_my@2x.png);
}
.tab_radar::before{
	background-image: url(//smtgvs.weathernews.jp/ip/help5/img/icon_tab_radar@2x.png);
}
.tab_wxreport::before{
	background-image: url(//smtgvs.weathernews.jp/ip/help5/img/icon_tab_wxreport@2x.png);
}
.search input[type="text"]{
	border: 1px solid #ccc;
	border-radius: 2px;
	background-color: #fafafa;
	padding: 4px;
	font-size: 15px;
	line-height: 15px;
	width: calc(100% - 60px - 20px);
	height:36px;
}
.search input[type="submit"]{
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	margin-left: 8px;
	border: 1px solid #ccc;
	border-radius: 2px;
	background-color: #fafafa;
	padding: 4px;
	font-size: 15px;
	line-height: 15px;
	font-weight: bold;
	width: 60px;
	height:36px;
	vertical-align: top;
	color:#fff;
	background-color: #0c419a;
}
.select_div dd:first-of-type{
	border-top: 1px solid #ccc;
}
.select_div dd a{
	display: inline-block;
	padding: 10px 0 10px 16px;
	color: #333;
	width: 100%;
}
.select_div dd.icon a{
	line-height: 36px;
	padding: 6px 0 6px 0px;
	width: calc(100% - 54px);
}
.icon_wxicon img{
	width:76px;
	height:56px;
}
.img_wxicon{
	width:76px;
	height:56px;
}
.edit_wxicon{
	width:104px;
	height:76px;
}
.position_city{
	font-size: 15px;
}
.position_city::before{
	content: "";
	background-image: url(//smtgvs.weathernews.jp/ip/help4/img/plot_position@2x.png);
	background-size: 20px 28px;
	background-repeat: no-repeat;
	background-position: center center;
	font-size: 15px;
	padding: 6px 14px 6px 14px;
}
.main figure, .main figure img{
	text-align: center;
}
.main figure figcaption{
	font-size:13px;
	color:#999;
}
.select_nav{
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	width: 100%;
	padding: 0 16px;
}
.select_items{
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	width: 100%;
}
.select_items a{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 60px;
	text-align: center;
	color: #fff;
	font-weight: bold;
	font-size: 16px;
	line-height: 16px;
	background-color: #0c419a;
	border-radius: 4px;
	border: 1px solid #fff;
}
.select_items span{
	font-size: 12px;
	line-height: 12px;
	color:#fff;
}
.jacket{
	padding: 0 0 15px;
	margin:0 auto;
}
.message_center{
	text-align: center;
	padding: 0 0 15px;
	margin:0 auto;
	font-size: 15px;
}
#feedback_wxicon{
	display: flex;
	justify-content: center;
	align-items: center;
}
.select-group{
  position: relative;
  display: block;
  overflow: hidden;
  box-sizing: border-box;
  width: 10em;
  padding: 0;
	margin: 8px 0;
  vertical-align: middle;
  border: 1px solid #0c419a;
	border-radius: 2px;
  background-color: #fff;
  background-repeat: no-repeat;
}
.select{
  position: relative;
  z-index: 1;
	font-size:16px;
  line-height: 40px;
  display: block;
  width: 120%;
  padding: 0;
  text-indent: 8px;
  border: none;
  border-radius: 0;
  background-color: transparent;
  background-image: none;
  box-shadow: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.select.disabled{
	background-color: #ccc;
}
.select-group:after{
  position: absolute;
  top: 0;
  right: 8px;
  bottom: 0;
  width: 0;
  height: 0;
  margin: auto;
  content: '';
  border-top: 4px solid #0c419a;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
}
.edited_icon{
	position: relative;
	width:104px;
	height:76px;
	text-align: center;
}
.edited_icon img{
	position: absolute;
	top: 0; left: 0;
}
#feedback_freetext{
	padding:0 16px 16px;
}
#feedback_freetext h3{
	font-size: 14px;
	text-align: left;
	color: #666;
	margin-bottom: 0;
}
#feedback_freetext textarea{
	width: 100%;
	background-color: #fafafa;
	border: 1px solid #ccc;
	border-radius: 4px;
	resize: none;
	line-height: 20px;
	font-size: 15px;
	height: 6em;
	padding: .5em;
}
.main_text{
	padding:0 15px;
}
.main_text p{
	margin-bottom:15px;
}
.ad{
	padding: 0;
	margin:0 auto;
	text-align: center;
}
.ad_img{
	padding:0 0 15px;
}
.ad_img img{
	width:96%;
	max-width:360px;
}
.top10{
	padding:15px;
	background-color: #fafafa;
	border-radius: 4px;
	margin-bottom: 15px;
}
.top10 dt{
	font-weight: bold;
}
.top10 dd{
	padding:0 0 15px;
}
.top10 li{
	position: relative;
	list-style-type: none;
	border-bottom: 1px dotted #ccc;
}
.top10 li span{
	position: absolute;
	right:0;
}
.report_list {
  display: -webkit-flex; /* Safari */
  display: flex;
	justify-content: start;
	flex-wrap: wrap;
	width:100%;
	padding:0 15px;
}
.report_item {
	width:33.3%;
	padding: 0 4px 15px;
}
.report_item .image{
  position: relative;
  width: 100%;/*　トリミングしたい枠の幅（固定にしたい場合はサイズを入力）　*/
  padding-top: 100%;/*　トリミングしたい枠の高さ（固定にしたい場合はサイズを入力）　*/
  overflow: hidden;/*　画像が枠からはみ出た部分はトリミング（非表示）する　*/
  margin: 0 auto;
}
.report_item .image img{
/* 画像を上下左右に中央配置する（絶対指定） */
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  /* 画像の最大サイズは枠の1.5倍まで */
  max-width: 150%;
  max-height: 150%;
}
.report_item .place,.report_item .date{
	font-size: 13px;
	line-height: 16px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.abstract{
	position: relative;
	padding:8px;
}
.howto_details{
	display: flex;
	flex-flow: row wrap;
	background-color: #fff;
	border-bottom: 1px solid #f0f0f0;
}
.details_img, .details_comment{
	width:100%;
	padding:8px;
}
.details_img2, .details_comment2{
	width:50%;
	padding:8px;
}
.details_img img,.details_img2 img{
	width:100%;
}
.details_comment p,.details_comment2 p{
	margin-bottom: 16px;
}
.details_comment_1c{
	width:100%;
	padding:8px;
}
.dl_lineup dt{
	font-weight: bold;
}
.dl_lineup dd{
	margin-bottom:1em;
}
@media (min-width : 640px) {
	.sitecontent{
		width:640px;
		margin: 0 auto;
	}
	.main_report{
		padding: 15px 0 15px;
		margin:0 auto;
	}
	.report_img{
		padding:0 0 15px;
	}
	.report_img img{
		width:100%;
	}
	.details_img, .details_comment{
		width:50%;
		padding:8px;
	}
	.details_img img{
		width:100%;
	}
	.details_img2, .details_comment2{
		width:50%;
		padding:8px;
	}
	.details_img2 img{
		width:100%;
	}
}

/* -------------------------------------------------------------------------------------
	gmap embed responsive
------------------------------------------------------------------------------------- */
div.responsive_box {
	width: 640px;
	margin: 0 auto;
	margin-bottom:1.5em;
}
@media (max-width : 768px) {
	div.responsive_box {
		width: 100%;
	}
	div.responsive_wrap {
		padding-bottom: 56.25%;
		position: relative;
	}
	.responsive_wrap iframe {
		width: 100%;
		height: 100% !important;
		left: 0;
		position: absolute;
		top: 0;
	}
}

/* -------------------------------------------------------------------------------------
	YOUTUBE EMBED
------------------------------------------------------------------------------------- */
.youtube {
	position: relative;
	width: 100%;
	padding: 0 0 15px;
}
.youtubetitle{
	text-align: center;
	font-weight:bold;
}
.youtube p{
	padding: 0 15px;
	color:#666;
	font-size: 13px;
	line-height: 20px;
}
.youtube2 {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
}
.youtube2 iframe {
	position: absolute;
	top: 0;
	right: 0;
	width: 100% !important;
	height: 100% !important;
}

/* -------------------------------------------------------------------------------------
	IMAGE POPUP
------------------------------------------------------------------------------------- */
#popup-background{
	display: none;
	position:fixed;     /* 位置の固定 */
	top: 0;             /* 表示位置 */
	left: 0;            /* 表示位置 */
	height: 100%;       /* 画面全体に表示 */
	width: 100%;        /* 画面全体に表示 */
	background:#000;    /* 背景色 */
	opacity: 0.90;      /* 透明度 */
	margin: 0;          /* 余白の削除 */
	padding: 0;         /* 余白の削除 */
	z-index:1000;       /* 要素のz座標 */
}
#popup-item{
	position:fixed;     /* 位置の固定 */
	top: 50%;           /* 表示位置(真ん中に表示) */
	left: 50%;          /* 表示位置(真ん中に表示) */
	margin: 0;          /* 余白の削除 */
	padding: 0;         /* 余白の削除 */
	z-index:1001;       /* 要素のz座標 */
}
.popupimg{
	cursor: pointer;
}
#popup-text{
	display: none;
	position:fixed;
	z-index:1002;       /* 要素のz座標 */
	width:100%;
}
#popup-text p{
	position:fixed;
	width:100%;
	top:15px;
	text-align: center;
	color:#fff;
	font-size: 14px;
}