@charset "utf-8";

/* 週間天気予報 */
.weekly_weather_wrapper {
    width: 100%;
    margin: 8px 0;
    font-feature-settings: "palt" 1;
}

.weekly_weather_title {
    font-size: 16px;
    font-weight: bold;
}

.weekly_weather_caret_icon {
    font-size: 18px;
    margin-right: 2px;
    vertical-align: -1px;
    color: #00AEEF;
}

.weekly_weather_announcementTime {
    font-size: 14px;
    font-weight: normal;
    color: #666;
}

.weekly_weather_refresh_icon {
    margin: 0 3px 0 8px;
}

/* 週間天気予報テーブル */
.weekly_weather_table {
    width: 99%;
    border-collapse: collapse;
    margin: 8px 0 15px 0;
    font-size: 14px;
}

.weekly_weather_table th,
.weekly_weather_table td {
    border: 1px solid #ccc;
    text-align: center;
    padding: 6px;
}

.weekly_weather_table th {
    background-color: #e6e6e6;
    font-weight: bold;
}

.weekly_weather_table td img {
    display: block;
    vertical-align: top;
    margin: 5px auto;
    width: 70px;
    height: auto;
}

.weekly_weather_table tbody tr:first-of-type td {
    /* background-color: #ffffff !important; */
}

.weekly_weather_table tbody tr:nth-of-type(odd) {
    /* background-color: #ffffff; */
}

.weekly_weather_table tbody tr:nth-of-type(even) {
    /* background-color: #eee;  */
}


p.weekly_weather_temp,
p.weekly_weather_rain{
    margin:5px auto;
    letter-spacing: 1px;
    font-size: 14px;
    min-width: 96px;
}

.weekly_weather_high_temp {
    color: #fd3102;
}

.weekly_weather_low_tem {
    color: #0a38e4;
}

.weekly_weather_temperature {
    font-size: 12px;
}

/* 以下週間天気予報リニューアルで使用 */
/* タブ */
div.weekly_weather_contents {
    width: 100%;
    border-collapse: collapse;
    margin: 8px 0 24px 0;
    font-size: 14px;
}
.weekly_weatherTab_group {
    display: flex;
    justify-content: center;
    padding: 0;
    background: #00AEEF;
    color: #fff;
    position: relative;
    margin: 6px 0 8px;
}

.weekly_weather_areaTab {
    flex-grow: 1;
    padding: 13px 5px 11px;
    list-style: none;
    text-align: center;
    cursor: pointer;
    font-size: 13px;
}

.weekly_weatherTab_line {
    display: none;
    width: 1px;
    height: 16px;
    background-color: #fff;
    position: absolute;
    top: 12px;
    z-index: 1;
}

.weekly_weatherTab_r-corners_right,
.weekly_weatherTab_r-corners_left {
    display: none;
}

.weekly_weather_areaTab:first-child {
    border-left: 2px solid #00AEEF;
}

.weekly_weather_areaTab:last-child {
    border-right: 2px solid #00AEEF;
}

.weekly_weather_areaTab.current_active {
    background: #fff;
    color: #00AEEF;
    font-weight: bold;
    font-size: 14px;
    margin-top: 5px;
    padding: 9px 5px 0;
    border-top-right-radius: 12px;
    border-top-left-radius: 12px;
    position: relative;
}

.weekly_weatherPanel {
    display: none;
}

.weekly_weatherPanel.weatherArea_show {
    display: block;
}

.weekly_weatherTab_r-corners_left,
.weekly_weatherTab_r-corners_right {
    display: none;
}

.weekly_weather_areaTab.current_active .weekly_weatherTab_r-corners_left,
.weekly_weather_areaTab.current_active .weekly_weatherTab_r-corners_right {
    display: block;
    background: #fff;
    width: 12px;
    height: 12px;
    position: absolute;
    bottom: 0;
    z-index: 1;
}

.weekly_weather_areaTab.current_active .weekly_weatherTab_r-corners_left::before,
.weekly_weather_areaTab.current_active .weekly_weatherTab_r-corners_right::before {
    content: "";
    width: 12px;
    height: 12px;
    position: absolute;
    bottom: 0px;
    left: 0px;
}

.weekly_weather_areaTab.current_active .weekly_weatherTab_r-corners_left {
    left: -12px;
}

.weekly_weather_areaTab.current_active .weekly_weatherTab_r-corners_right {
    right: -12px;
}

.weekly_weather_areaTab.current_active .weekly_weatherTab_r-corners_left::before {
    border-bottom-right-radius: 12px;
}

.weekly_weather_areaTab.current_active .weekly_weatherTab_r-corners_right::before {
    border-bottom-left-radius: 12px;
}

.weekly_weather_areaTab.current_active .weekly_weatherTab_r-corners_left::before,
.weekly_weather_areaTab.current_active .weekly_weatherTab_r-corners_right::before {
    background: #00AEEF;
}

div.weekly_weather_wapper {
    width: 99%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}
div.weekly_weather_wapper div.weekly_weather_top_container_wapper:first-child {
    border-right: 1px solid #ccc;
    padding-right: 12px;
}
div.weekly_weather_top_container_wapper {
    width: 100%;
}
div.weekly_weather_top_container {
    width: 100%;
    height: 170px;
    display: grid;
    grid-template-columns: 1fr 1fr 230px;
    grid-template-rows: repeat(3, 1fr);
    grid-column-gap: 8px;
    grid-template-areas:
    "weekly_weather_day"
    "weekly_weather_icon"
    "weekly_weather_temp_wapper"
    "weekly_weather_rain_wapper";
}
div.weekly_weather_day {
    grid-area: weekly_weather_day;
    grid-column: span 3;
    grid-row: 1;
}
h3.weekly_weather_contents_title {
    border-left: 4px solid #00AEEF;
    color: #111;
    font-size: 18px;
    font-weight: bold;
    height: auto;
    line-height: 20px;
    margin: 10px 5px;
    padding: 0 0 0 10px;
}
div.weekly_weather_icon {
    grid-area: weekly_weather_icon;
    grid-column: span 2;
    grid-row: span 2;
}
div.weekly_weather_icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    vertical-align: top;
}
div.weekly_weather_temp_wapper {
    grid-area: weekly_weather_temp_wapper;
    grid-column: 3;
    grid-row: 2;
}
div.weekly_weather_temp_wapper p {
    margin: 0px 0px 12px;
}
div.weekly_weather_rain_wapper {
    grid-area: weekly_weather_rain_wapper;
    grid-column: 3;
    grid-row: 3;
}
td.precipitation_td {
    width: calc(100% / 4);
}
.weekly_weather_high_temp_large {
    font-size: 18px;
    font-weight: bold;
}
.weekly_weather_high_temp_small,
.small_weekly {
    font-size: 14px;
}