@charset "utf-8"; 
.waterpark {position:relative; margin-top:40px;}
.waterpark h3 {margin-bottom:15px; font-size:22px; font-weight:500;}
.waterpark .state {display:flex; gap:10px; justify-content:space-around; padding:30px 10px; border-radius:10px; border:4px solid #ddd;}
.waterpark .state dl {text-align:center;}
.waterpark .state dl dt {position:relative; font-size:1.1rem; font-weight:500; padding-top:70px;}
.waterpark .state dl dt:before {position:absolute; left:50%; top:0; width:66px; height:61px; transform:translateX(-50%); background:url('/park/seaside/img/main/waterpark.png') no-repeat; content:"";}
.waterpark .state dl.ic_area dt:before {background-position:0 0;}
.waterpark .state dl.ic_users dt:before {background-position:-66px 0;}
.waterpark .state dl.ic_temp dt:before {background-position:-132px 0;}
.waterpark .state dl.ic_humidity dt:before {background-position:-198px 0;}
.waterpark .state dl.ic_update dt:before {background-position:-264px 0;}
.waterpark .state dl.ic_condition:has(dd.cd01) dt:before {background-position:0 -61px;}
.waterpark .state dl.ic_condition:has(dd.cd02) dt:before {background-position:-66px -61px;}
.waterpark .state dl.ic_condition:has(dd.cd03) dt:before {background-position:-132px -61px;}
.waterpark .state dl.ic_condition:has(dd.cd04) dt:before {background-position:-198px -61px;}
.waterpark .state dl dd {margin-top:10px; color:#666;}
.waterpark .control_btn{position:absolute; right:0; top:2px; overflow:hidden}
.waterpark .control_btn>li{float:left}
.waterpark .control_btn>li>a{display:block; position:relative; width:30px; text-indent:-5000px}
.waterpark .control_btn>li>a:after{display:block; content:''; position:absolute; left:10px; top:8px; width:10px; height:10px; border:2px solid #333; border-width:0px 0px 2px 2px; transform:rotate(45deg); border-radius:1px}
.waterpark .control_btn>li.next>a:after{transform:rotate(225deg);}
.waterpark .control_btn>li.num #visualCnt{font-size:18px; font-weight:500;}
.waterpark .control_btn>li.num #visualCntLen{position:relative; font-size:15px; color:#888}
.waterpark .control_btn>li.num #visualCntLen:before{content:'/'; font-size:13px;}



@media screen and (min-width:861px){

}

@media screen and (max-width:860px){
	.waterpark {margin:40px 5% 30px;}
	.waterpark .state {flex-wrap:wrap; justify-content:start; gap:20px 10px;}
	.waterpark .state dl {flex:0 0 calc(33.33% - 6.66px);}
	.waterpark .state dl dt {font-size:1rem;}
	.waterpark .state dl dd {font-size:0.9rem;}
}