body{
	margin: 0;
	padding: 0;
}
#container{
	width: 100vw;
	height: calc(100vw * 9 / 16 );
	background: #fff;
	position: relative;
}
#container #bottom{
	width: 100vw;
	height: calc(100vw * 110 / 1920 );
	background: #1582d0;
	background: -moz-linear-gradient(top,  #1582d0 0%, #4a9ada 50%, #5fa4df 50%, #94bce7 100%);
	background: -webkit-linear-gradient(top,  #1582d0 0%,#4a9ada 50%,#5fa4df 50%,#94bce7 100%);
	background: linear-gradient(to bottom,  #1582d0 0%,#4a9ada 50%,#5fa4df 50%,#94bce7 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1582d0', endColorstr='#94bce7',GradientType=0 );
	position: absolute;
	bottom: 0;
	box-shadow: 0 -8px 15px -15px rgba(0,0,0,.9);
}

#container #bottom ul{
	display: flex;
	height: 100%;
	list-style-type: none;
	justify-content: space-between;
	margin: 0;padding: 0;
}

#container #bottom ul li.b_pn{
	display: flex;
	justify-content:center;
	width: 28vw;
}
#container #bottom ul li.b_auto{
	display: flex;
	justify-content:center;
}
#container #bottom ul li{
	width: 24vw;
	position: relative;
	height: 100%;
}
#container #bottom ul li a
{
	width: 100%;
	height: 100%;
	display: block;
	margin: auto;
}
#container #bottom ul li a img
{
	height: 100%;
	width: auto;
	display: block;
	margin: auto;
}
#container #bottom ul li+li::before{
	content: "";
	width: 1px;
	background: #333;
	margin: auto;
	left: 0;
	top: 8px;bottom: 8px;
	position: absolute;
}
#container #bottom ul li+li::after{
	content: "";
	width: 1px;
	background: #fff;
	margin: auto;
	left: 1px;
	top: 8px;bottom: 8px;
	position: absolute;
}


.switchArea {
	line-height: 3vw;
    letter-spacing: 0;
    text-align: center;
    font-size: 1.4vw;
    position: relative;
    margin: auto 0;
    width: 7vw;
}

 /* === チェックボックス ==================================== */
.switchArea input[type="checkbox"] {
  display        : none;
}

 /* === チェックボックスのラベル（標準） ==================== */
.switchArea label {
    display: block;
    box-sizing: border-box;
    height: 3vw;
    border: 2px solid #999999;
    border-radius: 5vw;
    background: #fff;
}

 /* === チェックボックスのラベル（ONのとき） ================ */
.switchArea input[type="checkbox"]:checked +label {
  border-color   : #0099FF;
}

 /* === 表示する文字（標準） ================================ */
.switchArea label span:after{
    content: "OFF";
    padding: 0 0 0 26px;
    color: #999999;
}

 /* === 表示する文字（ONのとき） ============================ */
.switchArea  input[type="checkbox"]:checked + label span:after{
	content: "ON";
    padding: 0 26px 0 0;
    color: #0099FF;
}

 /* === 丸部分のSTYLE（標準） =============================== */
.switchArea #swImg {
	position: absolute;
    width: calc(3vw - 8px);
    height: calc(3vw - 8px);
    background: #999999;
    top: 4px;
    left: 4px;
    border-radius: 5vw;
    transition: .2s;
}

 /* === 丸部分のSTYLE（ONのとき） =========================== */
.switchArea input[type="checkbox"]:checked ~ #swImg {
    transform: translateX(4vw);
    background: #0099FF;
}

#main{
	position: relative;
	height: calc(100vw * 970 / 1920 );
	width: 100vw;
}
/** wether **/


#wether{
	position: absolute;
	width: 16.6vw;
	right: 0;
	height: calc(100vw * 970 / 1920 );
	background: rgb(197,222,243);
	background: -moz-linear-gradient(top,  rgba(197,222,243,1) 0%, rgba(255,255,255,1) 30%);
	background: -webkit-linear-gradient(top,  rgba(197,222,243,1) 0%,rgba(255,255,255,1) 30%);
	background: linear-gradient(to bottom,  rgba(197,222,243,1) 0%,rgba(255,255,255,1) 30%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c5def3', endColorstr='#ffffff',GradientType=0 );
}
#wether::before{
	content: "";
	position: absolute;
	width: 1px;
	background: #bbb;
	left: 0;
	margin: auto;
	top: 0;
	bottom:  calc(100vw * 55 / 1920 );
	box-shadow: 0px 0px 1px 0px rgba(0,0,0,0.6);
}

/**
<div id="wether_list">
<div id="hachinohe"><div class="tmpl"></div><div class="icon"></div></div>	
<div id="sendai"><div class="tmpl"></div><div class="icon"></div></div>	
<div id="oarai"><div class="tmpl"></div><div class="icon"></div></div>	
<div id="nagoya"><div class="tmpl"></div><div class="icon"></div></div>	
**/

#wether img{
	display: block;
	width: 100%;
}

#wether #wether_list{
}
#wether #wether_list div{
	height: calc(100vw * 150 / 1920 );
	position: relative;
	background-size: cover
}

#wether #wether_list div .tmpl{
    position: absolute;
    height: 1em;
    margin: auto;
    bottom: 2vw;
    left: 2.2vw;
    font-size: 1.3vw;
}
#wether #wether_list div .tmpl .max{
	color: red;
}
#wether #wether_list div .tmpl .min{
	color: blue;
}
#wether #wether_list div .icon{
	position: absolute;
    margin: auto;
    bottom: 2.2vw;
    right: 2vw;
    width: calc(100vw * 100 / 1920 );
    height: calc(100vw * 100 / 1920 );
}
#wether #wether_list div#hachinohe{
	background-image: url("../img/weather/hachinohe.svg");
}
#wether #wether_list div#sendai{
	background-image: url("../img/weather/sendai.svg");
}
#wether #wether_list div#oarai{
	background-image: url("../img/weather/oarai.svg");
}
#wether #wether_list div#nagoya{
	background-image: url("../img/weather/nagoya.svg");
}