@charset "UTF-8";

/*====================================================================================
fcst10m  
====================================================================================*/

/*------------------------------------------
index
------------------------------------------*/
.area-txt-01.fcst10m-index {
    max-width: 345px;
    margin: 0 auto;
}

.fcst10m-btn {
    text-align: center;
}
.fcst10m-btn a {
    display: inline-block;
    width: 100%;
    color: #0c419a;
    font-size: 14px;
    font-weight: bold;
    line-height: 1em;
    padding: 10px;
    border-radius: 4px;
    border: 1px solid #0c419a;
}

/*------------------------------------------
form
------------------------------------------*/

/* セレクトメニュー
------------------------------------------*/
.select {
    display: block;
    width: 100%;
    color: #0c419a;
    font-size: 14px;
    font-weight: bold;
    line-height: 1em;
    padding: 10px;
    border-radius: 4px;
    border: 1px solid #0c419a;
    position: relative;
}

.select:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border: 7px solid transparent;
    border-top: 10px solid #0c419a;
    border-bottom: none;
    position: absolute;
    top: 50%;
    margin-top: -5px;
    right: 10px;
}

/* 送信ボタン
------------------------------------------*/
.submit01 {
    display: block;
    width: 100%;
    color: #fff;
    font-weight: 600;
    line-height: 1em;
    text-align: center;
    padding: 10px;
    background-color: #0c419a;
    border-radius: 4px;
    box-shadow: 0px 2px 2px 0px rgba(0,0,0, 0.25);
}

/* 位置情報
------------------------------------------*/
.position {
    width: 100%;
    display: table;
    table-layout: fixed;
    padding: 10px;
    background-color: #FAFAFA;
    border: 1px solid #CCCCCC;
    border-radius: 4px;
}

.position > * {
    display: table-cell;
    vertical-align: middle;
}

.position .ico {
    width: 30px;
    height: 30px;
}

.position.ico img {
    width: 100%;
}

.position .txt {
    padding-left: 5px;
}
.position p {font-size: 13px;}

/*------------------------------------------
リザルト
------------------------------------------*/
.weather_fcst {
    border-top: 1px solid #CCCCCC;
}
.weather_fcst .item {
    width: 100%;
    display: table;
    table-layout: fixed;
    padding: 10px 0;
    border-bottom: 1px solid #CCCCCC;
}
.weather_fcst .item > * {display: table-cell;}

.weather_fcst .time  {width: 5em; text-align: center;}
.weather_fcst .state {padding-left: 2em;}
.weather_fcst .icon  {width: 44px;}
.weather_fcst img    {width: 100%;}

@media screen and (min-width: 700px) {
    .weather_fcst {
        font-size: 0;
        text-align: center;
        border-top: 0;
        display: table;
        max-width: 510px;
        table-layout: fixed;
        margin: auto;
    }
    .weather_fcst .item {
        width: 16%;
        display: table-cell;
        border: none;
    }

    .weather_fcst .item > * {
        font-size: 14px;
        display: block;
    }

    .weather_fcst .time {
        width: 100%;
        text-align: center;
        font-weight: 600;
    }

    .weather_fcst .icon  {width: 85px;}
    .weather_fcst .state {padding-left: 0px; text-align: center;}
}


/* ボタン
------------------------------------------*/
.btn-06{
    width: 280px;
}

/*------------------------------------------
マップ
------------------------------------------*/
.item-box.map + .item-box {
    margin-top: 20px;
}
/* 配置
------------------------------------------*/
.comm-legend {
    padding: 10px;
    text-align: left;
}

.comm-legend .star, .comm-legend .rain {
    display: block;
}

 .comm-legend .rain > div:not(:last-child) {
    margin-right: 3em;
 }

.comm-legend > div:not(:last-child) {
    margin-bottom: 10px;
}

@media screen and (min-width: 700px) {
    .comm-legend .star, .comm-legend .rain {
        display: inline-block;
        vertical-align: top;
    }

    .comm-legend .star {
        margin-right: 3em;
    }
}

/* カラー
------------------------------------------*/
.comm-legend p:before {border: 1px solid #fff;}
.comm-legend .star .lv01:before {background-color: #FE6500;}
.comm-legend .star .lv02:before {background-color: #FEA900;}
.comm-legend .star .lv03:before {background-color: #9B9B9B;}
.comm-legend .rain .lv01:before {background-color: #00FFEA;}
.comm-legend .rain .lv02:before {background-color: #00D7EA;}
.comm-legend .rain .lv03:before {background-color: #008FEA;}
.comm-legend .rain .lv04:before {background-color: #0000EA;}
.comm-legend .rain .lv05:before {background-color: #EAEA00;}
.comm-legend .rain .lv06:before {background-color: #DA70D6;}
.comm-legend .rain .lv07:before {background-color: #9A32CD;}
.comm-legend .rain .lv08:before {background-color: #FFFFFF;}
.comm-legend .rain .lv09:before {background-color: #000000;}
.comm-legend .rain .lv10:before {background-color: #FF1493;}