/* init
--------------------------------------------------------------*/
@mixin aspect-ratio($width, $height) {
  position: relative;
  &:before {
    display: block;
    content: "";
    width: 100%;
    padding-top: ($height / $width) * 100%;
  }
}

.emergency {
	/*width: 100vw; 
    height: 56.25vw;*/
    max-height: 720px;
	/*left: 50%;
    top:40%;
    transform: translate(-50%, -50%);*/
	background-image: url('../img/background.jpg');
	background-repeat: no-repeat;
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: center;
	background-color:white; 
}

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;
	text-align: left;
}

html {
	font-size:62.5%;
}

body {
	font-size:10px;
	font-size:1.0rem;
	line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
	display:block;
}

nav ul {
	list-style:none;
}

blockquote, q {
	quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content:'';
	content:none;
}

a {
	margin:0;
	padding:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
}

ins {
	background-color:#ff9;
	color:#000;
	text-decoration:none;
}

mark {
	font-style:italic;
	font-weight:bold;
}

del {
	text-decoration: line-through;
}

abbr[title], dfn[title] {
	border-bottom:1px dotted;
	cursor:help;
}

table {
	border-collapse:collapse;
	border-spacing:0;
}

hr {
	display:block;
	height:1px;
	border:0;
	border-top:1px solid #cccccc;
	margin:1em 0;
	padding:0;
}

input, select {
	vertical-align:middle;
}

ul,li {
	padding:0;
	margin:0;
	border:0;
	list-style-type: none;
}

ol,li {
	padding:0;
	margin:0;
	border:0;
	list-style-type: none;
}

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}


/* swiper
--------------------------------------------------------------*/
html,body{
position:relative;
height:100%;
}
body{
background:#eee;
font-family:Helvetica Neue,Helvetica,Arial,sans-serif;
font-size:14px;
color:#000;
margin:0;
padding:0;
}
.swiper-container{
width:100%;
}
.swiper-slide{
text-align:center;
font-size:18px;
display:flex;
-webkit-box-pack:center;
-ms-flex-pack:center;
-webkit-justify-content:center;
justify-content:center;
-webkit-box-align:center;
-ms-flex-align:center;
-webkit-align-items:center;
align-items:center;
}
.swiper-pagination {
	display: none;
}

/* common
--------------------------------------------------------------*/
html {
	height: 100%;
}

body {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	height: 100%;
	border:0;
	font-size: 14px;
	text-align: left;
	font-family: Verdana, Roboto, "Droid Sans", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
text-align: left;
	font-style: normal;
	line-height: 1.5vw;
	text-transform: none;
	-webkit-text-size-adjust: 100%;
	background-color: #f0f0f0;
	color: #383838;
}

a , a *{ cursor:pointer; }
a,
a:link {
	text-decoration:none;
	color:#383838;
}
a:visited {
	text-decoration:none;
	color:#383838;
}
a:active {
	text-decoration:none;
	color:#383838;
}
a:hover,
a:active {
	color: #1478e0;
	text-decoration: none;
	cursor: pointer;
}



/* column
--------------------------------------------------------------*/
.wrapper {
	margin-top: 5px;
	width: 100%;
	position: relative;
	overflow: hidden;
	/*margin-left: 125px;*/
}

#container {
	position: relative;
}


/* menu
--------------------------------------------------------------*/
.navSpMenuWrapper {
	background-color: #fcfcfc;
}

.navMenu ul li {
	border-bottom: 1px solid #ccc;
	background: transparent url("../img/mark_link.png") no-repeat;
	background-size: 30px auto;
	background-position: right 50%;
}

.navMenu ul li a {
	display: block;
	margin: 0px 0px 0px 0px;
	padding: 12px 25px 12px 15px;
	width: 100%;
	font-size:14px;
	font-size:1.4rem;
	color: #404040;
}


#navSpMenuTrigger {
	overflow: hidden;
	position: absolute;
	top: 0px;
	right: 0px;
	margin: 0px 0px 0px auto;
	padding: 0px 0px 0px 0px;
	background-color: #ffa000;
	width: 44px;
	height: 44px;
	z-index: 9;
}

#navSpMenuTrigger span {
	display: block;
	line-height: 1.5;
	width: 44px;
	height: 0;
	padding-top: 70px;
	background: transparent url("../img/btn_menu.png") 0 0 no-repeat;
	background-size: 44px 44px;
	overflow: hidden;
}

#navSpMenu {
	display: none;
}

.headerMenuWrapper,
.navMenuWrapper {
	display: none;
}



/* common
--------------------------------------------------------------*/

h1 {
	display: none;
}

h2 {
	max-width:90%;
	padding: 0.5vw 0px 0px 0px;
	font-size:3vw;
	line-height: 3.5vw;
	font-weight: normal;
	text-align:center;
	background-color: rgba(255, 255, 255, 0.8);
    border-radius: 1vw;
}

.setubiryou {
   font-size: 25px;
   font-size:1.8vw;
}

.setubiryou > .tani {
	font-size: 20px;
	font-size:1.6vw;
}
.article {
	width: 100%;
	/*min-width:275px;*/
	margin-left:1vw;
}

.date {
	width: 35vw;
	padding: 0px 0px;
	font-weight: normal;
	line-height: 2.2vw;
	font-size: 18px;
	font-size: 1.6vw;
	margin-top: 2vw;
	border-radius: 0.5vw;
	background-color: rgba(255, 255, 255, 0.8);
}

.date .clock {
	width: 2.2vw;
	background: transparent url("../img/clock.png") no-repeat;
	background-size: 1.5vw auto;
	background-position: left 50%;
}
.date span {
	display: table-cell;
	vertical-align: middle;
}

.date .dateNum {
}

.date .timeNum {
}

.infoArticle {
	padding: 0.5vm 1vm;
	width:35vw;
	padding-top: 1vm;
}

h3,h4{
	font-size:18px;
	font-size: 1.8vw;
	padding-left: 2.4vw;
}

.hastuden h3 {
	background: transparent url("../img/icon_panel.png") no-repeat;
	background-size: 6% auto;
	background-position: left 50%;
}

.hastuden h4 {
	background: transparent url("../img/icon_denryoku.png") no-repeat;
	background-size: 8% auto;
	background-position: left 50%;
}

.chikudenchi h3 {
	background: transparent url("../img/icon_denchi.png") no-repeat;
	background-size: 6% auto;
	background-position: left 50%;
}

.info {
	margin: 0.5vw 0px 0.7vw 0px;
	padding: 0.2vw;
	background-color: rgba(255,255,255,0.8);
	border-radius: 0.5vw;
	box-shadow: 0px 3px 10px  rgba(0, 0, 0, 0.4);
	padding-top: 0.5vw;
}

.info .mode span {
	font-size:16px;
	font-size:1.8rem;
	display: block;
	margin: 0px -10px 0px 0px;
	padding: 10px 20px;
	color: #fff;
	text-align: center;
	font-weight: bold;
	border-radius: 6px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
}


.info .mode.modeNum01 span {
background: #79b455; /* Old browsers */
background: -moz-linear-gradient(top,  #79b455 0%, #5fa530 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#79b455), color-stop(100%,#5fa530)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #79b455 0%,#5fa530 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #79b455 0%,#5fa530 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #79b455 0%,#5fa530 100%); /* IE10+ */
background: linear-gradient(to bottom,  #79b455 0%,#5fa530 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#79b455', endColorstr='#5fa530',GradientType=0 ); /* IE6-9 */
}

.info .mode.modeNum02 span {
background: #efcc73; /* Old browsers */
background: -moz-linear-gradient(top,  #efcc73 0%, #eab146 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#efcc73), color-stop(100%,#eab146)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #efcc73 0%,#eab146 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #efcc73 0%,#eab146 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #efcc73 0%,#eab146 100%); /* IE10+ */
background: linear-gradient(to bottom,  #efcc73 0%,#eab146 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efcc73', endColorstr='#eab146',GradientType=0 ); /* IE6-9 */
}

.info .mode.modeNum03 span {
sbackground: #ed7874; /* Old browsers */
background: -moz-linear-gradient(top,  #ed7874 0%, #c43a3a 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ed7874), color-stop(100%,#c43a3a)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ed7874 0%,#c43a3a 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #ed7874 0%,#c43a3a 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #ed7874 0%,#c43a3a 100%); /* IE10+ */
background: linear-gradient(to bottom,  #ed7874 0%,#c43a3a 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed7874', endColorstr='#c43a3a',GradientType=0 ); /* IE6-9 */
}



.hatsudenInfoWrapper {
	margin: 10px auto 0;
	width: 100%;
	display: table;
}

.hatsudenInfoWrapper .mode {
	width: 45%;
	display: table-cell;
	vertical-align: top;
}

.hatsudenInfoWrapper .weatherInfo {
	width: 55%;
	display: table-cell;
	vertical-align: middle;
}

.hatsudenInfoWrapper .weatherInfo h4 {
	text-align: center;
	font-size:16px;
	font-size:1.8rem;
}

.weatherInfoInner {
	margin: 0 auto;
	display: table;
}

.weatherInfoInner .weatherIcon {
	display: table-cell;
	vertical-align: middle;
}

.weatherInfoInner .weatherData {
	display: table-cell;
	vertical-align: middle;
}

.weatherInfoInner .weatherData .num {
	margin: 0px 6px 0px 10px;
	font-size:30px;
	font-size:3.0rem;
}

.weatherInfoInner .weatherData .order {
	font-size: 16px;
	font-size: 2.2rem;
}

.hastuden dl {
	margin: 0px auto;
	width: 96%;
}

.hastuden dl dt {
	font-size: 16px;
	font-size: 2.2rem;
}

.hastuden dl dd {
	margin: 0px 0 0px 0;
	text-align: right;
}

.hastuden dl dd .dataNum {
	font-size: 26px;
	font-size: 2.6rem;
}

.hastuden dl dd .order {
	padding-left: 4px;
	font-size: 16px;
	font-size: 2.2rem;
}


.chikudenchiInfoWrapper {
	margin: 0 auto;
	float:right;
	width: 20%;
}

.chikudenchiInfoWrapper .chikudenchiInfo {
	
	display: table-cell;
	vertical-align: middle;
}

.chikudenchiInfoWrapper .chikudenchiInfo .modeName {
	display: block;
	margin: 6px 10% 6px auto;
	text-align: center;
}

.chikudenchiInfoWrapper .chikudenchiData .data {
	display: block;
	text-align: center;
}

.chikudenchiInfoWrapper .chikudenchiData .data .dataNum {
	font-size: 40px;
	font-size: 4.0rem;
	height: 136px;
	line-height: 136px;
}

.chikudenchiInfoWrapper .chikudenchiData .data .order {
	height: 136px;
	line-height: 136px;
}

.chikudenchiInfoWrapper .chikudenchiData {
	display: table-cell;
	vertical-align: top;
}

.chikudenchiInfoWrapper .chikudenchiData .chikudenchiDataInner {
	width: 6vw;
	height: 8vw;
	/*margin: 0 auto;*/
	margin-top: -130%;
}

.chikudenchiInfoWrapper .chikudenchiData.p0 .chikudenchiDataInner {
    background: transparent url("../img/p0.png") no-repeat;
	background-size: 100% auto;
}

.chikudenchiInfoWrapper .chikudenchiData.p1 .chikudenchiDataInner {
	background: transparent url("../img/p1.png") no-repeat;
	background-size: 100% auto;
}

.chikudenchiInfoWrapper .chikudenchiData.p2 .chikudenchiDataInner {
	background: transparent url("../img/p2.png") no-repeat;
	background-size: 100% auto;
}

.chikudenchiInfoWrapper .chikudenchiData.p3 .chikudenchiDataInner {
	background: transparent url("../img/p3.png") no-repeat;
	background-size: 100% auto;
}

.chikudenchiInfoWrapper .chikudenchiData.p4 .chikudenchiDataInner {
	background: transparent url("../img/p4.png") no-repeat;
	background-size: 100% auto;
}

.chikudenchiInfoWrapper .chikudenchiData.p5 .chikudenchiDataInner {
	background: transparent url("../img/p5.png") no-repeat;
	background-size: 100% auto;
}

.chikudenchiInfoWrapper .chikudenchiData.p6 .chikudenchiDataInner {
	background: transparent url("../img/p6.png") no-repeat;
	background-size: 100% auto;
}

.chikudenchiInfoWrapper .chikudenchiData.p7 .chikudenchiDataInner {
	background: transparent url("../img/p7.png") no-repeat;
	background-size: 100% auto;
}

.chikudenchiInfoWrapper .chikudenchiData.p8 .chikudenchiDataInner {
	background: transparent url("../img/p8.png") no-repeat;
	background-size: 100% auto;
}

.chikudenchiInfoWrapper .chikudenchiData.p9 .chikudenchiDataInner {
	background: transparent url("../img/p9.png") no-repeat;
	background-size: 100% auto;
}

.chikudenchiInfoWrapper .chikudenchiData.p10 .chikudenchiDataInner {
	background: transparent url("../img/p10.png") no-repeat;
	background-size: 100% auto;
}

.chikudenchiInfoWrapper > .chikudenchiDataInner {
	min-width:50px;
	min-height:100px;
}
.chikudenchi h4 {
	padding-left: 10px;
	font-size:16px;
	font-size:1.8rem;
	padding-left: 28px;
	background: transparent url("../img/icon_denryoku.png") no-repeat;
	background-size: 30px auto;
	background-position: 6px 50%;
}

.single .info > dl {
	padding-top: 1vw;
	padding-bottom: 1vw;
}

.single > .date {
	margin-top:3vw;
}

.single > .infoArticle {
	padding-top:10vw!important;
}

.chikuinfo dl {
	margin: 0px auto;
	width: 96%;
	overflow: hidden;
	line-height: 1.7vw;
}

.chikuinfo dl dt {
	font-size: 1.6vw;
	float: left;
	clear: both;
}

.chikuinfo dl dd {
	margin: 0px 0 0.5vw 0;
	text-align: right;
}

.chikuinfo dl dd .dataNum {
	font-size: 26px;
	font-size: 1.6vw;
}

.chikuinfo dl dd .order {
	padding-left: 1vw;
	font-size: 16px;
	font-size: 1.6vw;
	display: inline-block;
	width: 6vw;
	text-align: left;
	min-width: 35px;
}

.chikudenchi dl {
	margin: 0px auto;
	width: 96%;
	overflow: hidden;
}

.chikudenchi dl dt {
	font-size: 16px;
	font-size: 1.6vw;
	float: left;
	clear: both;
}

.chikudenchi dl dd {
	margin: 0px 0 0.5vw 0;
	text-align: right;
}

.chikudenchi dl dd .dataNum {
	font-size: 26px;
	font-size: 1.6vw;
}

.chikudenchi dl dd .order {
	padding-left: 1vw;
	font-size: 16px;
	font-size: 1.6vw;
}

.sp-buttons {
    position: relative;
    width: 100%;
    text-align: center;
    padding-top: 10px;
}

.sp-button {
    width: 15px;
    height: 15px;
    border: 2px solid #000;
    border-radius: 50%;
    margin: 2px;
    display: inline-block;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    cursor: pointer;
}
.sp-button {
    border:2px solid #ccc;
}

.sp-selected-button {
    background-color: #17a518;
}
/* err
--------------------------------------------------------------*/

.msgBox {
	width: 100%;
	text-align: center;
	margin: 20px 0;
	min-height: 240px;
}

.msgBox.err {
	padding-top: 120px;
	background: transparent url("../img/mark_err.png") no-repeat;
	background-size: 100px auto;
	background-position: 50% 10px;
}

.msgBox p {
	width: 100%;
	text-align: center;
}