@charset "UTF-8";
.main {
    margin-top: 2.5rem;
    position: relative;
    z-index: 2;
}
.control {
    background: #000;
    height: 6rem;
    display: flex;
    align-items: center;
}
.control .inner {
    display: flex;
    align-items: center;
    height: 100%;
}
@media only screen and (max-width: 782px) {
    body.Device-SP .control { height: auto; padding-top: 2rem; padding-bottom: 2rem;}
    body.Device-SP .control .inner {display: block;}
}
.dateform {
    display: flex;
    align-items: center;
}
.dateform label{
	border: none;
	color: #fff;
	font-size: 1.8rem;
	text-transform: uppercase;
	box-shadow: none;
	border-radius: 0px;
	-webkit-appearance: none;
	appearance: none;
    box-sizing: border-box;
    background-color: #c0185b;
    width: 4rem;
    height: 4rem;
    margin: 0;
    padding: 0;
    position: relative;
}
.dLabel {
    border: #c0185b 1rem solid;
    border-right: none;
    color: #c0185b;
    background: #fff;
    margin: 0;
    height: 4rem;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    font-weight: bold;
    font-size: 1.4rem;
    padding: 0 0.5rem;
}
@media only screen and (max-width: 782px) {
    body.Device-SP .dLabel { padding:0.5rem; border: #c0185b 2rem solid; font-size: 2.8rem; line-height: 2; height: 7rem;}
}
input[type='text']#datepicker {
    font-weight: bold;
    background-color: #c0185b;
    color: #fff;
    border: none;
    height: 4rem;
    border-radius: 0;
    margin: 0;
    padding: 0.5em 0.5em 0.5em 0.5em;
	box-sizing: border-box;
    font-size: 1.8rem;
    letter-spacing: 0.1em;
}
@media only screen and (max-width: 782px) {
    body.Device-SP input[type='text']#datepicker { font-size: 4rem; height: 7rem;}
}
input[type='text']#datepicker:focus {
	outline: 0;
}


input[type='text'].datepicker {
    font-weight: bold;
    background-color: #c0185b;
    color: #fff;
    border: none;
    height: 4rem;
    border-radius: 0;
    margin: 0;
    padding: 0.5em 0.5em 0.5em 0.5em;
	box-sizing: border-box;
    font-size: 1.8rem;
    letter-spacing: 0.1em;
}
@media only screen and (max-width: 782px) {
    body.Device-SP input[type='text'].datepicker { font-size: 4rem; height: 7rem;}
}
input[type='text'].datepicker:focus {
	outline: 0;
}
button,
button[disabled]:hover,
button[disabled]:focus {
	border: none;
	color: #fff;
	font-size: 1.8rem;
	text-transform: uppercase;
	box-shadow: none;
	border-radius: 0px;
	-webkit-appearance: none;
	appearance: none;
    box-sizing: border-box;
    background-color: #c0185b;
    width: 4rem;
    height: 4rem;
    margin: 0;
    padding: 0;
    position: relative;
}
@media only screen and (max-width: 782px) {
    body.Device-SP button,
    body.Device-SP button[disabled]:hover,
    body.Device-SP button[disabled]:focus { font-size: 4rem; width: 7rem;height: 7rem;}
}
button:hover,
button:focus {
	animation: flash 1s ease;
}
button:focus {
	outline: 0;
}

#rewindBtn {
    margin-right: 0.2rem;
    border-radius: 0.8rem 0 0 0.8rem;
}
#rewindBtn::before {
    content: "";
    position: absolute;
    width: 1.2rem;
    height:1.2rem;
    border: transparent 0.6rem solid;
    border-right: #fff 0.6rem solid;
    left: calc( 50% - 1.1rem);
    top: calc( 50% - 0.6rem);
    box-sizing: border-box;
}
#rewindBtn::after {
    content: "";
    position: absolute;
    width: 1.2rem;
    height:1.2rem;
    border: transparent 0.6rem solid;
    border-right: #fff 0.6rem solid;
    left: calc( 50% - 0.4rem);
    top: calc( 50% - 0.6rem);
    box-sizing: border-box;
}
@media only screen and (max-width: 782px) {
    body.Device-SP #rewindBtn::before {
        width: 2.4rem;
        height:2.4rem;
        border: transparent 1.2rem solid;
        border-right: #fff 1.2rem solid;
        left: calc( 50% - 2.2rem);
        top: calc( 50% - 1.2rem);
    }
    body.Device-SP #rewindBtn::after {
        width: 2.4rem;
        height:2.4rem;
        border: transparent 1.2rem solid;
        border-right: #fff 1.2rem solid;
        left: calc( 50% - 0.8rem);
        top: calc( 50% - 1.2rem);
    }
}
#forwardBtn {
    margin-left: 0.2rem;
    border-radius: 0 0.8rem 0.8rem 0;
}
#forwardBtn::before {
    content: "";
    position: absolute;
    width: 1.2rem;
    height:1.2rem;
    border: transparent 0.6rem solid;
    border-left: #fff 0.6rem solid;
    right: calc( 50% - 1.1rem);
    top: calc( 50% - 0.6rem);
    box-sizing: border-box;
}
#forwardBtn::after {
    content: "";
    position: absolute;
    width: 1.2rem;
    height:1.2rem;
    border: transparent 0.6rem solid;
    border-left: #fff 0.6rem solid;
    right: calc( 50% - 0.4rem);
    top: calc( 50% - 0.6rem);
    box-sizing: border-box;
}
@media only screen and (max-width: 782px) {
    body.Device-SP #forwardBtn::before {
        width: 2.4rem;
        height:2.4rem;
        border: transparent 1.2rem solid;
        border-left: #fff 1.2rem solid;
        right: calc( 50% - 2.2rem);
        top: calc( 50% - 1.2rem);
    }
    body.Device-SP #forwardBtn::after {
        width: 2.4rem;
        height:2.4rem;
        border: transparent 1.2rem solid;
        border-left: #fff 1.2rem solid;
        right: calc( 50% - 0.8rem);
        top: calc( 50% - 1.2rem);
    }
}

#playBtn {
    margin-left: 1rem;
    border-radius: 0.8rem;
    width: 6rem;
}
#playBtn > input {
    display: none;
}
#playBtn > input:not(:checked) + span::before {
    position: absolute;
    top: 50%;
    left: calc( 50% - 0.7rem);

    transform: translateY(-50%);
    width: 15px;
    height:15px;
    
    border: 0.5em solid transparent;
    border-left: 0.8em solid currentColor;
    box-sizing: border-box;
    content: "";
}
#playBtn > input:checked + span::before,
#playBtn > input:checked + span::after {
    content: "";
    position: absolute;
    width: 0.5rem;
    height:1.4rem;
    background: #fff;
    left: calc( 50% - 0.7rem);
    top: calc( 50% - 0.7rem);
    box-sizing: border-box;
}
#playBtn > input:checked + span::after {left: calc( 50% + 0.2rem);}
@media only screen and (max-width: 782px) {
    body.Device-SP #playBtn { width: 12rem;}
    body.Device-SP #playBtn::before,
    body.Device-SP #playBtn::after {
        width: 1rem;
        height: 2.8rem;
        left: calc( 50% - 1.4rem);
        top: calc( 50% - 1.4rem);
    }
    body.Device-SP #playBtn::after { left: calc( 50% + 0.4rem);}
}

.checkform {
    margin-left: 2rem;
    font-size: 1.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}
@media only screen and (max-width: 782px) {
    body.Device-SP .checkform { justify-content: flex-start; margin: 2rem 0 0 0;}
}
.checkform label {
    margin-left: 2rem;
	display: flex;
    align-items: center;
    height: 100%;
}
.checkform input[type="checkbox"] {
  box-shadow: none;
  border: none;
  margin: 0 0.8rem 0 0;
}
@media only screen and (max-width: 782px) {
    body.Device-SP .checkform label { font-size: 3.2rem;}
}
.map {
    background: #d3e4f2;
    height: 61rem;
    position: relative;
}
#mapImg {
    height: 59rem;
    background-repeat:no-repeat;
    background-position:center top, center top, center top;
    /* background-size: auto 100%; */

}
.dayNight {
    height: 61rem;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    overflow: hidden;
}
.dayNight .container {
    position: absolute;
    height: 100%;    
    width: 100%;
    left: 0;
    top: 0;
}
#dayNightIcon {
    position: absolute;
	width: 7.2rem;
    top: auto;
    bottom: 0;
    height: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translateX( -3.6rem);
}
#dayNightIcon.moon_sun { flex-direction: row-reverse;}
#dayNightIcon.moon li.sun { display: none;}
#dayNightIcon.sun li.moon { display: none;}
.dayNight li { text-align: center; width: 3.6rem;}
.dayNight li.sun img { width: 1.6rem;}
.dayNight li.moon img { width: 1.2rem;}
body.Device-SP #dayNightSvg { width: 140rem; height: 61rem;}
@media only screen and (max-width: 782px) {
    body.Device-SP .map { height: 63rem;}
    body.Device-SP .dayNight { height: 63rem;}
    body.Device-SP #dayNightIcon { height: 4rem; width: 14.4rem; transform: translateX( -7.2rem);}
    body.Device-SP .dayNight li { width: 7.2rem;}
    body.Device-SP .dayNight li.sun img { width: 3.2rem;}
    body.Device-SP .dayNight li.moon img { width: 2.4rem;}
    
    body.Device-SP #dayNightSvg { width: 140rem; height: 63rem;}
}

.levelBar {
    position: absolute;
    top: -2rem;
    width: 100%;
}
.levelBar .inner { position: relative;}
/*
.levelBar .toggle:not(.open):not(.lv1) {
    cursor: pointer;
}
.levelBar .toggle:not(.open):not(.lv1):hover {
    animation: whiteout 0.5s ease;
}
*/

@keyframes whiteout {
	 0% { background-color: #777; }
    10% { background-color: #555 }
	100% { background-color: #000 }
}

.levelBar .hukidashi {
    position: absolute;
    /* top: 1rem; */
    top: -9rem;
    right: 4.8rem;
    border: #fff 0.1rem solid;
    border-radius: 0.8rem;
    background: #000;
    text-align: center;
    min-width: 13rem;
    transition: all 0.5s ease;

    opacity: 0;
    pointer-events: none;
}
.levelBar.showHukidashi .hukidashi {
    opacity: 1;
    pointer-events: auto;
}
.levelBar .hukidashi dt { display: block; padding: 0 0.8rem;font-size: 1.2rem;line-height: 2rem;}
.levelBar .hukidashi.lv1 dt { margin: 0.2rem 0;}

a.glass {
    font-size: 1.2rem;
    background: url(../img/icon_glass@2x.png) no-repeat right 0.2rem / 1.8rem auto;
    display: block;
    line-height: 2rem;
    box-sizing: border-box;
}
.toggle:not(.open) a.glass { pointer-events: none;}
.toggle.open a.glass { background-image: url(../img/icon_glass_minus@2x.png);}

.levelBar .hukidashi dt  {
    padding: 0 1.8rem;
    margin: 0.2rem auto;
    font-size: 1.2rem;
    display: block;
    line-height: 2rem;
    box-sizing: border-box;
}


.h3lv {
    font-size: 1.9rem;
    font-weight: bold;
    margin: 0.5rem 0 1rem;
    transition: all 0.5s ease;
}
.lv4 .h3lv { color: #ff2ef0;}
.lv3 .h3lv { color: #ff850d;}
.lv2 .h3lv { color: #ffc70d;}
.lv1 .h3lv { color: #36b739;}
.h3lv.small { font-size: 1.4rem;}

.levelBar .hukidashi.hasDetail dt { text-align: right; padding-right: 2.5rem;}
.levelBar .hukidashi.hasDetail dd {
    text-align: left;
    margin: 0 2rem 1rem 2rem;
}
.levelBar .hukidashi dd p {
    opacity: 1;
    pointer-events: auto;
    width: inherit;
    height: inherit;
    text-align: left;
    font-size: 1.6rem;
    line-height: 2.2rem;
}
body.Device-PC .levelBar .hukidashi dd p { max-width: 30rem;}
.levelBar .lv {
    position: absolute;
    top: 0;
    right: 0;
    width: 5rem;
}
.levelBar .lv img { position: absolute; transition: opacity 0.5s ease;}
.levelBar .lv img:first-child { opacity: 0;}
.levelBar.showHukidashi .lv img:first-child { opacity: 1;}
.levelBar.showHukidashi .lv img:last-child { opacity: 0;}

@media only screen and (max-width: 782px) {
    body.Device-SP .levelBar .hukidashi {
        top: 1rem;
        right: 9.6rem;
        min-width: 26rem;
    }
    body.Device-SP .levelBar .hukidashi dt { margin: 0.4rem 0;padding: 0 1rem;font-size: 2.4rem;line-height: 4rem;}
    body.Device-SP .levelBar .hukidashi.hasDetail dt { margin:0;}
    body.Device-SP .levelBar .hukidashi dt  {
        padding: 0 3.6rem;
        margin: 0.4rem auto;
    }
    body.Device-SP .h3lv {
        font-size: 4rem;
        margin: 1rem 0 2rem;
    }
    body.Device-SP .h3lv.small { font-size: 3rem;}
    body.Device-SP .levelBar .hukidashi.hasDetail dt { padding-right: 5rem;}
    body.Device-SP .levelBar .hukidashi.hasDetail dd {
        margin: 0 4rem 2rem 4rem;
    }
    body.Device-SP .levelBar .hukidashi.hasDetail dd p {
        font-size: 3.2rem;
        line-height: 4.4rem;
    }
    body.Device-SP .levelBar .lv {
        width: 10rem;
    }    
}



.mapping {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}
.mapping.show { opacity: 1;}


.mapping.alert.show { pointer-events: auto; }
.mapping.alert { z-index: 3;}
.mapping.revC { z-index: 2;}

hr.dotLine,
hr.solidLine {
    border: none;
    border-top: rgba(255,255,255,0.5) 1px dashed; 
    position: absolute;
    width: 100%;
    height: 0px;
    left: 0;
    top: 30rem;
}
hr.solidLine {
    border-top: rgba(255,255,255,0.5) 1px solid; 
    top: 50rem;
}

.mapping .inner { position: relative; max-width: inherit;}

.reversedC {
    position: absolute;
    top: 7rem;
    object-fit: contain;
    width: 5rem;
    height: 50rem;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.reversedC.show { opacity: 1;}

.point {
    position: absolute;
    width: 1.4rem;
    height: 1.4rem;
    background-color: #fff;
    border:#000 0.25rem solid;
    border-radius: 50%;
    box-sizing: border-box;
}
.revC.mapping.show + .alert.mapping .point.warning {
    animation: warning 2s linear infinite;
}
@keyframes warning {
    0% { background-color: #FFDF00; }
    33% { background-color: #ff0000; }
    66% { background-color: #ff0000; }
    100% { background-color: #FFDF00; }
}
.point.chiangmai::after, .point.chumphon::after, .point.kototabang::after, .point.baclieu::after, .point.cebu::after{
    content: "";
    background: url("../img/point_arrow@2x.png") no-repeat -1rem 50% / 100% 100%;
    width: 18rem;
    height: 2rem;
    position: absolute;
    top: -0.7rem;
    transform-origin:0 50% 0;
}
.point.chiangmai::after { transform: rotate(185deg);}
.point.chumphon::after { transform: rotate(180deg);}
.point.kototabang::after { transform: rotate(175deg);}
.point.baclieu::after { transform: rotate(20deg) scaleX(2.5);}



.mapping .pop {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
    width: 20rem;
}
.mapping .pop:not(.open):hover { cursor: pointer;}
.mapping .pop:not(.open):hover dt,
.mapping .pop:not(.open):hover dd { animation: whiteout 0.5s ease; }


.mapping .pop.left { right: calc(100% - 39rem);}
.mapping .pop.right { left: calc(100% - 39rem); align-items: flex-start;}

.mapping .pop dt {
    background: #000;
    margin: 0 0.8rem 0 0;
    padding: 0 0.8rem 0 1.2rem;
    width: 12rem;
}
.mapping .pop.right dt { margin: 0 0 0 0.8rem; padding: 0 1.2rem 0 0.8rem;}
.mapping .pop dt a { 
    transform: translateY(0.3rem);
    font-weight: bold;
}
@media only screen and (max-width: 782px) {
    body.Device-SP .mapping .pop { width: auto; background: #000; border-radius: 0.8rem;}
    body.Device-SP .mapping .pop dt,
    body.Device-SP .mapping .pop.right dt { margin: 0; padding: 0.2rem 2rem 0.2rem 0.5rem; width: 100%; box-sizing: border-box;}
    body.Device-SP .mapping .pop dt a { font-size: 2rem;}
}
.mapping .pop dd {
    background: #000;
    padding: 0.8rem;
    border-radius: 0.8rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: row-reverse;
}
.mapping .pop dd .graph { height: 13rem; display: flex;}
.mapping .pop dd .graph figure {
    background: #fff;
    width: calc( 13rem * 1.33333);
    height: 100%;
}
.mapping .pop dd .graph figure + figure { margin-left: 0.8rem;}
.mapping .pop dd .graph figure img {
    object-fit: contain;
    width: 100%;
    height: 100%;
}
.mapping .toggle.twoGraph {
    width: 39rem;
}
@media only screen and (max-width: 782px) {
    body.Device-SP .mapping .pop.twoGraph { width: auto;}
}
.img_block img{
    display: block;
    margin:auto;
}    
.image_readme{
    width: 800px;
    margin: auto auto auto auto;
}

ol {
	margin-left: 3.5em; /* サイトに合せて調整 */
}

ol li {
	list-style-type: none;
	counter-increment: cnt;
	position: relative;
}

ol li:before {
	content: "(" counter(cnt) ")";
	display: inline-block;
	margin-left:-3em; 
	width: 2em;
	text-align: right;
	position: absolute;
	top: 0;
	left: 0;
}

/* th{
    
} */

th,td {
    border: solid 3px;              /* 枠線指定 */
    padding: 10px 20px 10px 10px;      /* 余白指定 */
    /* text-align: center; */
    /* font-weight:bold; */
}

table.epbforecast tr:nth-child(2) td{
	background: rgb(235,46,255);
}
table.epbforecast tr:nth-child(3) td{
	background: rgb(253,136,31);
}
table.epbforecast tr:nth-child(4) td{
	background: rgb(255,243,5);
}
table.epbforecast tr:nth-child(5) td{
	background: rgb(86,214,36);
}

.remarks{
    background: rgb(146, 208, 80);
}

.important{
    color:red;
}

table {
    border-collapse:  collapse;     /* セルの線を重ねる */
    margin: auto auto auto auto;

}

.pop.chiangmai { top: 7.5rem; }
.pop.chumphon { top: 24.5rem; }
.pop.kototabang { top: 41.5rem; }
.pop.cebu { top: 24.5rem; }
.pop.baclieu { top: 41.5rem; }


.mapping .popup { display: none;}

#popup {
    opacity: 0;
    pointer-events: none;
    background: rgba( 0, 0, 0, 0.8);
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transition: all 0.5s ease;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
}
.popup-opened #popup {
    opacity: 1;
    pointer-events: auto;
}
.popup-opened #body { position: fixed; width:100%; height: 100%; z-index: 6;}

#popupClone {
    background: #fff;
    max-width: 96%;
    max-height: 96%;
    color: #000;
    position: relative;
    
    box-sizing: border-box;
}
#popupClone .close {
    width: 5rem;
    height: 5rem;
    display: block;
    position: absolute;
    right: 1.5rem;
    top:1.5rem;
}
#popupClone .close::before,
#popupClone .close::after {
    content: "";
    width: 100%;
    height: 1px;
    background: #000;
    transform: rotate(45deg);
    position: absolute;
    left: 0;
    top: 50%;
}
#popupClone .close::after { transform: rotate(-45deg);}
#popupClone .scrollable {
    overflow: scroll;
    overflow-x: hidden;
    padding: 3rem 0 0 0;
    box-sizing: border-box;
    max-height: 90vh;
}
#popupClone dt {
    font-size: 3rem;
    text-align: center;
    color: #000;
}
#popupClone dd {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 1.5rem;
}
#popupClone dd .graph {
    display: flex;
    align-items: center;
    padding: 0 5rem;
}
#popupClone dd .graph figure + figure { margin: 0 0 0 2rem;}
@media screen and (orientation: portrait) {
    #popupClone dd .graph { flex-direction: column;}
    #popupClone dd .graph figure + figure { margin: 2rem 0 0 0;}
}
#popupClone dd .graph img { width: 900px; height: auto;}
#popupClone dd .detailSet {
    display: flex;
    background: #2f3d6c;
    width: 100%;
    text-align: center;
}
#popupClone dd .detail {
    margin-top: 1.5rem;
    font-size: 1.8rem;
    line-height: 1.5;
    padding: 2rem 5rem 3rem;
    position: relative;
    overflow: hidden;
    background: #2f3d6c;
    color: #fff;
    display: flex;
    justify-content: center;
    width: 100%;
}
#popupClone dd .detail p {
    margin: 0;
}
#popupClone dd .detail p + p { margin-top: 1rem;}


@media only screen and (max-width: 782px) {
    body.Device-SP #popupClone .scrollable { padding-top: 6rem;}
    body.Device-SP #popupClone .close {
        width: 10rem;
        height: 10rem;
    }
    body.Device-SP #popupClone dt { font-size: 6rem;}
    body.Device-SP #popupClone dd .detail { font-size: 4rem;}
}

.mapping.vertical,
.mapping.horizontal {
    overflow: hidden;
    pointer-events: none;
    z-index: 2;  
}

.mapping.vertical .inner,
.mapping.horizontal .inner {
    height: 59rem;
}

.mapping svg {
    position: absolute;
    stroke: #00deff;
    stroke-width:2;
    fill: transparent;
    width: 20rem;
    height: 20rem;
}
.mapping.vertical svg {stroke: #00deff;}
.mapping.horizontal svg {stroke: #00ff8a; stroke-width:2.1;}

.hanrei {
    width: 14rem;
    height: 16.5rem;
    border-radius: 0.8rem;
    background: rgba(0,0,0,0.3);
    position: absolute;
    right: 1rem;
    border: #fff 0.1rem solid;
    box-sizing: border-box;
    padding: 1rem 0 0.5rem;
    transition: top 0.5s ease;
}
.hanrei.verti { top: 40rem;}
.hanrei.horiz { top: 40rem;}
.mapping.horizontal.show + .mapping.vertical.show .hanrei.verti { top: 21rem;}
.hanrei dt { text-align: center; white-space: nowrap;font-size: 1.1rem;}
.hanrei dd { position: relative;}
.hanrei dd figure {
    width: 55rem;
    position: absolute;
    left: 1.5rem;
    top: 1rem;
}
.hanrei dd figure img { width: 5.5rem;}
.hanrei dd span {
    width: 5rem;
    position: absolute;
    left: 8rem;
    font-size: 1.4rem;
}
.hanrei dd span.max { top: 3rem;}
.hanrei dd span.min { top: 11.5rem;}


.lastupdate {
    margin: 0;
    padding: 0.2rem 1rem 0 0;
    text-align: right;
    color: #0a1433;
    font-size: 1.1rem;
}
@media only screen and (max-width: 782px) {
    body.Device-SP .lastupdate { padding: 2rem; font-size: 2.2rem;}
}
.dateSlider {
    height: 6rem;
    background: rgba(0,0,0,0.3);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
}
.dateSlider .inner {
    position: relative;
    height: 100%;    
}
.dateSlider .legend {
    position: absolute;
    bottom: -2.5rem;
    right: 0;
    display: flex;
    align-items: center;
    font-size: 1.1rem;
    font-weight: bold;
    height: 2.5rem;
}
.dateSlider .legend li {
    padding: 0 0 0 1.5rem;
    position: relative;
}
.dateSlider .legend li + li { margin-left: 2rem;}
.dateSlider .legend li::before {
    content: "";
    width: 1rem;
    height: 1rem;
    position: absolute;
    left: 0;
    top: calc( 50% - 0.5rem);
}
.dateSlider .legend li.range::before { background-color: #EB3479 ;}
.dateSlider .legend li.frequency::before { background-color: #903BEB ;}
.dateSlider .legend li.mix::before { background-color: #2F72EB ;}
.dateSlider .legend li.nohpf::before { background-color: #7E8981 ;}
.dateSlider .legend li.nodata::before { background-color: #000000 ;}


.bg_white { position: relative; z-index: 1;}

.bg_white_center { 
    background: #fff;
    color: #000;
    font-size: 1.8rem;
    min-width: 1200px;
    max-width: 1200px;
    margin: auto auto auto auto;
    line-height: 40px;
}
.subtitle{
    font-weight:bold;
    font-size: 1.9rem;
    padding: 0rem,0rem,0rem,0rem;
    
}
.subtitle.center{
    font-size: 2.2rem;
    text-align: center;
}
.simple {
    margin-left: 3.5em;
}

.references{
    font-size: 1.4rem;
    margin-top: 0rem;
}


.graphList .inner_n {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    margin-top: 2rem;
}
.graphList .inner_n dl {
    margin-top: 2rem;
    width: 50%;    
}
.graphList .inner_n dt {
    color: #0a1433;
    font-size: 1.8rem;
    text-align: center;
    margin-bottom: 0.5rem;
}
.graphList .inner_n dd {
    display: flex;
    justify-content: center;
    text-align: center;
}
.graphList .inner_n dd img {
    max-width: 100%;
}
@media only screen and (max-width: 782px) {
    body.Device-SP .graphList .inner_n { margin-top: 3rem;}
    body.Device-SP .graphList .inner_n dl {margin-top: 4rem; width: 80%;}
    body.Device-SP .graphList .inner_n dt {font-size: 3.2rem;margin-bottom: 1rem;}
}

.figure_title{
    text-align: center;
    font-style: italic;
    font-size: 1.4rem;
    color: #003366;
}