@charset "utf-8";
h1.sb_tit {
	position: relative;
	display:block;
	margin-bottom: 2%;
	padding: 2% 0 2% 50px;
	font-size:156.3%;
	color:#444;
	letter-spacing: 3px;
	line-height:100%;
}
h1.sb_tit.icon_system::after {
	display: block; content:""; clear: both;
	position: absolute; top:0; bottom:0; left:0;
	margin: auto; width:40px; height: 40px;
	background:url("../img/icon_system_w.svg") no-repeat;
}
h1.sb_tit.icon_user::after {
	display: block; content:""; clear: both;
	position: absolute; top:0; bottom:0; left:0;
	margin: auto; width:40px; height: 40px;
	background:url("../img/icon_user_w2.svg") no-repeat;
}
h1.sb_tit.icon_spot::after {
	display: block; content:""; clear: both;
	position: absolute; top:0; bottom:0; left:0;
	margin: auto; width:40px; height: 40px;
	background:url("../img/icon_sopt_w.svg") no-repeat;
}
@media only screen and (max-width:600px){
	h1.sb_tit { margin-bottom: 4%; font-size:130%;}
}


/*==========================================================================
  LOGIN
============================================================================*/
#login {
	position: absolute; top: 0; left: 0; right: 0; bottom: 0;
	margin:auto;
	max-width:820px; height: 400px;
/*	background:rgba(255,255,255,0.20); */
/*	background:rgba(100,100,100,0.20); */
	background-color:#FFF;
	overflow: hidden;
	transition: all .5s;
}
#login h1 { position: absolute; top:25%; left:10%; width:30%; text-align: center;}
#login h1 img { max-width:185px;}
#login .cont { position: absolute; top:20%; right:10%; width:40%;min-width:300px;}
#login dl { margin-bottom: 20px; border-bottom: 1px solid #fff; overflow: hidden;}
#login dt, #login dd { float: left; padding: 1% 2%;}
#login dt { color: #444;}
#login dd input {
	background:rgba(255,255,255,0.00);
/*	border: none; */
	border-radius: 0;
	width:180px;

}
#login dd input:hover {
	background:rgba(255,255,255,0.20);
/*	border: none; */
}
#login p { margin-top: 20px; text-align: center;}
#login a { color: #444;}
#login .btn { width: 100%;}
@media only screen and (max-width:600px){
	#login {
		position:static;
		margin:2%;
		height:100%;
		min-height:96vh; 
		overflow: hidden;
	}
	#login h1 { position:static; padding: 5%; width: 100%;}
	#login .cont { position:static; padding: 5%; width: 100%;}
}


/*==========================================================================
  USER
============================================================================*/
#user { margin:0 auto 2%; padding:2%; background: #fff; border-radius:5px; overflow: hidden;}
#user dl { overflow: hidden; border:1px solid #CCC; }
/* #user dt  { float: left; padding: 10px; width:150px; border-right: 1px solid rgba(0,0,0,0.10);} */ 
#user dt  { float: left; padding: 10px; width:200px; border-right: 1px solid rgba(0,0,0,0.10);}

/* #user dd  { float:right; padding: 10px; width:calc(100% - 150px);} */
#user dd  { float:right; padding: 10px; width:calc(100% - 200px);}
#user dl:nth-child(odd) { background:#ECF0F1;}
@media only screen and (max-width:650px){
	#user dl dt { float:none; width:100%; padding:5px 15px; border:none;}
	#user dl dd { float:none; width:100%; padding:0 15px 10px;}
	#user input[type="text"] { padding:10px; width: 100%;}
}

/*==========================================================================
  SYSTEM
============================================================================*/
#system { margin:0 auto 2%;}

/* TITLE */
#system h2 {
	clear:both;
	position: relative;
	margin:20px 2%;
	padding:5px 0 5px 20px;
	font-size:125%;
	color:#444;
	border-left:5px solid #444;
}
#system .power_cont,
#system .dust_cont {  padding:2%; background: #fff; overflow: hidden;}
#system h2 span {  margin-left: 25px; color: #000;}
#system button {
	display: block;
	margin: auto;
	padding: 0;
	width: 190px; height: 190px;
	font-family: 'Noto Sans JP', "Yu Gothic", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
	font-weight: 500;
	font-size: 112.5%;
	text-align: center;
	text-decoration:none;
	color: #fff;
	box-shadow:0px 4px 0px 0px rgba(0,0,0,0.10);
	border-radius: 100px;
	border: none;
	background-size: 100% auto !important;
}
#system button:hover { 
	background: #ddd;
	box-shadow:0px 0px 0px 0px;
	border: 1px solid #ddd;
	opacity: 0.7;
}
#system button.on { background: url("../img/btn_g.png") no-repeat;}
#system button.off { background: url("../img/btn_r.png") no-repeat;}
#system button.rescission { background: url("../img/btn_b.png") no-repeat;}
#system button.start { 
	position: absolute; top: 0; right: 0; left: 0; bottom: 0;
	background: url("../img/btn_d.png") no-repeat;
}
#system button.emergency {
	margin: auto;
	width: 406px; height: 64px;
	background: url("../img/btn_e.png") no-repeat;
}

/* POWER */
#system .power_cont { float: left; width: 65%;}
#system .power_cont .power_btn {
	float: left;
	margin-bottom: 2%;
	padding: 5% 0;
	width: 66%;
	background: #eee;
}
#system .power_cont .power_btn+.power_btn {
	float: right;
	width: 33%;
}
#system .power_cont .power_btn:nth-child(1) button { float: left; margin:0 4%;}
#system .power_cont .stop_btn {
	clear: both;
	padding:5% 0;
	background: url("../img/bg_emergency.gif");
}

/* DUST */
#system .dust_cont { float:right; width: 34%;}
#system .dust_cont h2 span { 
	display: block; position: absolute; top: 0; right: 0;
	font-size: 16px; color: #000; font-weight: normal;
	line-height: 110%;
}
#system .dust_cont .dust_btn { position: relative; background: #eee;}
@media only screen and (max-width:1180px){
	#system button { width: 150px; height: 150px; }
}
@media only screen and (max-width:950px){
	#system button { width: 190px; height: 190px; }
	#system .power_cont,
	#system .dust_cont {  float:none; width: 100%;}
	#system .dust_cont {  margin-top:10%; }
	#system .dust_btn { padding:5% 2%;}
	#system button.start { position: static;}
}
@media only screen and (max-width:780px){
	#system button { width: 150px; height: 150px; }
}
@media only screen and (max-width:600px){
	#system button { font-size: 100%; width: 100px; height:100px; }
	#system button.emergency { width: 300px; height: 48px;	}
}


/* MODAl WINDOW */
.modal_open {}
.modal_container {
	position:fixed; top: 0; left: 0;
	width:100vw; height: 100vh;
	background: rgba(0,0,0,80%);
	overflow: auto;
	opacity: 0;
	visibility: hidden;
	transition: .3s;
	box-sizing: border-box;
	z-index: 99999;
}
.modal_container.active { opacity: 1; visibility: visible;}
.modal_body {
	position:fixed; top: 0; left: 0; right: 0; bottom:0;
	margin: auto; width:60vw; height:50vh;
}
.modal_close {
	cursor: pointer;
	position: absolute; top: -40px; right: -40px;
	width: 40px; height: 40px;
	font-size: 40px;
	color: #fff;
}
.modal_content {
	position:fixed; top: 0; left: 0; right: 0; bottom:0;
	margin: auto;
	max-width: 480px;
	height: 400px;
	padding: 50px;
	text-align: left;
	background: #fff;
}
.modal_content h3 {
	margin-bottom: 20px;
	font-size: 137.5%;
	color: #444;
	text-align: center;
}
.modal_content .pass { 
	margin: auto;  max-width: 305px;
	border: 2px solid #000;
	overflow: hidden;
}
.modal_content .pass p { 
	float: left;
	padding: 20px 10px;
	width:25%;
	font-family: 'Oswald', 'sans-serif';
	font-size: 70px;
	line-height: 70px;
	text-align: center;
}
.modal_content .pass p+p {border-left: 2px solid #000;}
.modal_content  dl.pass_check { margin: auto;  padding: 20px 0; max-width: 305px; overflow: hidden;}
.modal_content  dl.pass_check dt { float: left; width: 80px;}
.modal_content  dl.pass_check dd { float: left; width: calc(100% - 80px);}
.modal_content  dl.pass_check dd input[type="text"] { width: 100% !important; border-radius: 0;}
@media only screen and (max-width:550px){
	.modal_content {
		max-width: 400px;
		height: 400px;
		padding: 50px;
		text-align: left;
		background: #fff;
	}
	.modal_content .pass p { 
		font-size: 50px;
	}
	.modal_content .btn { font-size: 100%;}
}



/*==========================================================================
  SPOT LIST
============================================================================*/
#spot {}
#spot .spot_map { margin-bottom: 2%; padding: 10px; background: #fff; }
#spot .spot_list {
	background: #fff;
	border-radius:5px;
	box-shadow: 0px 0px 4px 3px rgba(0,0,0,0.2);
}
#spot .spot_list ul { overflow: hidden;}
#spot .spot_list ul+ul { border-top: 1px solid #ddd;}
#spot .spot_list ul li { float: left; text-align: center;}
#spot .spot_list ul li+li { border-left: 1px solid #ddd;}
#spot .spot_list ul li:nth-child(1) { width: 55%;}
#spot .spot_list ul li:nth-child(2) { width: 25%;}
#spot .spot_list ul li:nth-child(3) { width: 20%;}
#spot .spot_list ul li p { padding:15px 0;}
#spot .spot_list ul li a { color: #000;}
#spot .spot_list ul li a:hover { color: #444; }
#spot ul.spot_head li:nth-child(1) p { float: left;}
#spot ul.spot_head li:nth-child(1) p:nth-child(1) { width:70px; background: url("../img/icon_light_b.svg") no-repeat center center; background-size:auto 30px; text-indent: -9999px;}
#spot ul.spot_head li:nth-child(1) p:nth-child(2) { width:calc(100% - 70px); text-align: left;}
#spot ul.spot_cont:hover {  color: #444; background:#F3F3F3;}
#spot ul.spot_cont:hover {  cursor:pointer;} /* add */
#spot ul.spot_cont:hover li a { color: #444;}
#spot ul.spot_cont li:nth-child(1) p { float: left;}
#spot ul.spot_cont li:nth-child(1) p:nth-child(1) { width:70px;}
#spot ul.spot_cont li:nth-child(1) p:nth-child(2) { width:calc(100% - 70px); text-align: left;}
#spot ul.spot_cont li:nth-child(1) a:hover { display: block; background:url("../img/icon_arrow.svg") no-repeat 98% center; background-size:30px auto;  overflow: hidden;}
#spot ul.spot_cont li:nth-child(2) p { float: left; width: 50%;}
#spot ul.spot_cont li:nth-child(2) p span { display: block; margin: auto; width: 100px; border-radius:5px;}
#spot ul.spot_cont li:nth-child(2) p.level1 span { background:#FCEE21; color: #000;}
#spot ul.spot_cont li:nth-child(2) p.level2 span { background:#FBB03B; color: #000;}
#spot ul.spot_cont li:nth-child(2) p.level3 span { background:#FF0000; color: #fff;}
@media only screen and (max-width:1050px){
	#spot .spot_head { display: none;}
	#spot ul.spot_cont { padding: 10px 0;}
	#spot ul.spot_cont li { 
		position: relative; float:none; padding-left:100px; width: 100% !important;
		overflow: hidden;
	}
	#spot ul.spot_cont li::before {
		display: block;
		position: absolute; left:10px;
		width: 90px;
		content: attr(data-label);
		padding: 3px 0;
		color:#444;
		background:#eee;
	}
	#spot .spot_list ul li p { padding:5px 0;}
	#spot .spot_list ul li+li { border-left:none;}
}


/*==========================================================================
 SPOT DETAIL
============================================================================*/
#detail { position: relative; top:-20px;}

/*  TITLE  */
#detail h2 {
	position: relative;
	margin: 0; padding: 15px 15px 7px 60px;
	width: 265px;
	height: 60px;
	font-size: 156.3%;
	letter-spacing: 3px;
	color: #444;
	background:url("../img/tit_bg.svg") no-repeat;
}
#detail h2::before {
	display: block; clear: both; content:"";
	position: absolute; top: 0; left:15px; bottom: 0;
	margin: auto; width:35px; height:35px;
}
#detail.cate_water h2::before {	background: url("../img/icon_water_g.svg") no-repeat center center;}
#detail.cate_sun h2::before { background: url("../img/icon_sun_g.svg") no-repeat center center;}


/* ENERGY and STATUS */
#detail .energy_staus { position: relative; float:left; width:650px; overflow: hidden;}
#detail .energy_staus::before {
	display: block; clear: both; content:"";
	position: absolute; top:0; right: 0;
	width: 215px; height: 180px;
	z-index: 9999;
}
#detail.cate_water .energy_staus::before { background: url("../img/illust_water.svg") no-repeat;}
#detail.cate_sun .energy_staus::before { background: url("../img/illust_sun.svg") no-repeat;}

#detail .energy { overflow: hidden;}
#detail .energy dl,
#detail .energy dt,
#detail .energy dd {  float: left; color: #444; }
/* #detail .energy dl { position: relative; padding:5% 0; overflow: hidden; } */
#detail .energy dl { position: relative; padding:5.5% 0; overflow: hidden; }
#detail .energy dt { font-size: 112.5%; width: 110px;}
#detail .energy dd b {
	position: relative; top: -3px;
	margin-right: 10px;
	padding: 2px 10px;
	font-size:87.5%;
	font-weight: 400;
	border-radius: 5px;
	border: 1px solid #444;
}

#detail .energy dd span { font-size: 130%; font-family: 'Oswald', 'sans-serif';}

#detail .energy dd span { width:110px;display:inline-block;text-align:right; }

#detail .energy dd span.output { width:135px; }


#detail .energy dd span span { float:right;width:auto; }
#detail .energy dd span span span { float:left;width:16px;text-align:center; }
#detail .energy dd span span span.dot { width:10px; }


#detail .energy dd small { font-size: 105%; margin-left:5px;}
/* #detail .energy dd small { font-size: 125%; margin-left:5px;} */
#detail .energy dl:nth-child(1) { 
	float: none;
	width: 100% !important;
	border-bottom: 1px solid #444;
}
#detail .energy dl:nth-child(1) dt { position: relative; top: 30px; }
#detail .energy dl:nth-child(1) dd span { 
	font-size:85px;
	line-height:70px;
	letter-spacing:-5px;
}
#detail .energy dl:nth-child(1) dd small { font-size:45px;}
#detail .energy dl:nth-child(3)  { float: right; width: 270px;}
#detail .energy dl:nth-child(3) dt  { clear: both; width: 130px;}
#detail .energy dl:nth-child(3) dd  { float: right;}

#detail .status { overflow: hidden;}
#detail .status dl { position: relative; float: left; padding:1.5% 2%; background: #fff; border-radius: 5px;}
#detail .status dl:nth-child(1) { width: 42%;}
#detail .status dl:nth-child(2) { width: 56%;}
#detail .status dl+dl { margin-left:2%;}
#detail .status dt { position: relative; padding-bottom: 10px; color: #444; font-size: 112.5%;}
#detail .status dt span {
	position: absolute; top: 0; left: 65px;
	display: block;
	font-size: 62.5%;
	color: #000;
	line-height: 120%;
}
#detail .status dt+dd { 
	float: left;
	width: 60px;
	color: #444;
	padding: 2px 10px;
	font-weight: 400px;
	text-align: center;
	color:#fff;
	border-radius: 5px;
	background: #444;
}
#detail .status dt+dd+dd { float: right; width:calc(100% - 65px);}

/* add */
#detail .status dt+dd+dd#id_jojinkijotai p { width:35%;}
#detail .status dt+dd+dd#id_jojinkijotai p.jojinki_jotai_atai { width:70%;}

#detail .status dd p { float:left; width: 50%; text-align: center}
#detail .status dd p span { display: block; margin: auto; width: 100%; border-radius:5px;}
#detail .status dd p.level1 span { background:#FCEE21; color: #000;}
#detail .status dd p.level2 span { background:#FBB03B; color: #000;}
#detail .status dd p.level3 span { background:#FF0000; color: #fff;}
#detail .status dl:nth-child(2)  { padding-right: 130px;}
#detail .status dl:nth-child(2) .btn { position:absolute; top:15px; right: 3%; width: 150px;}

#detail .graph {
	float: right;
/*	padding: 2%; */
/*	padding: 20px 2%; */
	padding: 20px 2% 10px;
	width:calc(100% - 670px);
	color:#444;
	background: rgba(255,255,255,0.15);
	
}
#detail .graph h3 { position: relative; margin-bottom: 2%; padding-left: 35px; font-size: 112.5%;}
#detail .graph h3::before{
	display: block; clear: both; content:"";
	position: absolute; top: 0; left: 0; bottom: 0;
	margin: auto; width: 25px; height: 25px;
}

#detail .graph h3.graphh3 { 
	margin-bottom: 7px;
}

#detail.cate_water .graph h3::before{background: url("../img/icon_water_w.svg") no-repeat center center;}
#detail.cate_sun .graph h3::before{background: url("../img/icon_sun_w.svg") no-repeat center center;}
/* #detail .graph canvas { width: 100%; height:230px; background: #ddd;} */
#detail .graph canvas { width: 100%; height:213px !important;}
#detail .graph .btn {  width: 100%; max-width:280px;}

#detail .menu { clear: both; overflow: auto;}
#detail .menu .btn {
	float: left; margin-top: 2%;
	width: 32%;	max-width: none !important;
}
#detail .menu .btn+.btn { margin-left: 2%;}
#detail .menu .btn a {
	display: block;
	padding:30px 20px 30px 80px;
	max-width: none !important;
	font-size: 125%;
	text-align: left;
	letter-spacing: 3px;
	border-radius: 5px;
	background-size: 50px !important;
	background-position: 15px center !important;
	background-repeat:no-repeat !important;
}
#detail .menu .btn:nth-child(1) a { background-image:url("../img/icon_system_g.svg");}
#detail .menu .btn:nth-child(2) a { background-image:url("../img/icon_sopt_g.svg");}
#detail .menu .btn:nth-child(3) a { background-image:url("../img/icon_camera_g.svg");}


#detail .status dl.taiyo_shogen {
	width: 56%;
	padding-right:13px;
}
#detail .taiyo_shogen a { 
	background-image:url("../img/icon_system_g.svg");
	background-repeat:no-repeat;
	background-size:50px !important;
	background-position:15px center !important;
	display:block;
	padding:21px 20px 21px 80px;
	font-size:125%;
	color:#444;
	text-decoration:none;
}



@media only screen and (max-width:950px){
	#detail .energy_staus { float:none; width:100%; overflow: hidden;}
	#detail .status { overflow: hidden;}
	#detail .graph { float:none; margin-top:2%; width:100%; overflow: hidden;}
	#detail .graph h3 { position: relative; margin-bottom: 2%; padding-left: 35px; font-size: 112.5%;}
	#detail .graph h3::before{
		display: block; clear: both; content:"";
		position: absolute; top: 0; left: 0; bottom: 0;
		margin: auto; width: 25px; height: 25px;
	}
	#detail.cate_water .graph h3::before{background: url("../img/icon_water_w.svg") no-repeat center center;}
	#detail.cate_sun .graph h3::before{background: url("../img/icon_sun_w.svg") no-repeat center center;}
	#detail .graph canvas { width: 100%; height:230px;}
	#detail .graph .btn { width:280px;}
}
@media only screen and (max-width:900px){
	#detail .menu .btn { float:none; width:100% !important;	}
	#detail .menu .btn+.btn { margin: 2% 0 0;}
	#detail .menu .btn a {  font-size: 112.5%;}
}
@media only screen and (max-width:720px){
	#detail .energy_staus { overflow: none;	}
	#detail .energy_staus::before { top: 20px; width:30%; height:100%;	}	
	#detail .energy dl { float: none !important; padding: 2% 0;}
	#detail .energy dt { font-size: 100%;}
	#detail .energy dl:nth-child(1) dt { position: relative; top: 30px; }
/*	#detail .energy dl:nth-child(1) dd span { font-size:500%; letter-spacing:0;} */
	#detail .energy dl:nth-child(1) dd span {  letter-spacing:0;}
	#detail .energy dl:nth-child(1) dd small { font-size:33px;}
	#detail .energy dl:nth-child(3)  { padding-top: 0; width:295px;}
	#detail .energy dl:nth-child(3) dt { width: 110px;}
	#detail .status dl { float:none; width: 100% !important; overflow: hidden;}
	#detail .status dl+dl { margin:2% 0 0;}
	#detail .status dl:nth-child(2)  { padding-right:0;}
	#detail .status dl:nth-child(2) .btn {  top:7%; width:40%;}

	/* add */
	#detail .status dt+dd+dd#id_jojinkijotai p  { width:20%;}
	#detail .status dt+dd+dd#id_jojinkijotai p.jojinki_jotai_atai  { width:48%;}

}
@media only screen and (max-width:650px){
/*	#detail .energy dl:nth-child(1) dd span {font-size:270%;} */
	#detail .energy dl:nth-child(1) dd span {font-size:200%;}
	#detail .energy dl:nth-child(1) dd small { font-size:25px;}
/*	#detail .energy_staus::before { top:0; width:30%; height:100%; z-index: 999;}	 */
	#detail .energy_staus::before { top:0; width:25%; height:100%; z-index: 999; max-height:260px}	
}

/* NOW */
#now { position: relative; padding: 2%; background: #fff; overflow: hidden;}
#now h2 { 
	position: relative;
	padding: 2% 0 2% 45px;
	color: #444;
	font-size: 156.3%;
}
#now h2:after {
	display: block; clear: both; content:"";
	position: absolute; top: 0; left: 0; bottom: 0;
	margin: auto; width: 35px; height: 35px;
	background: url("../img/icon_now_g.svg") no-repeat center center;
}
#now ul { float:left; margin: 0.5%; width:49%; line-height: 130%; overflow: hidden;}
#now ul li { float: left; padding: 10px 7px; font-weight: normal;}
#now ul li.no{ width: 65px; text-align: center; font-size: 14px; font-weight: bold;}
#now ul li.namae { width:240px; font-size: 11px;}
#now ul li.state { width:160px; padding:20px 5px;}
#now ul li.note { position: relative; padding:0px; width: calc(100% - 465px); font-size:14px; border-left:1px solid rgba(0,0,0,0.10);}
#now ul li.note p { padding: 10px 7px;}
#now ul li.state p { display: inline; padding: 5px 10px; background: #fff;}
#now ul li.state span { padding: 0 5px;}
#now ul li.state .open,
#now ul li.state .close { position: relative; padding-left:30px;}
#now ul li.state .open::before,
#now ul li.state .close::before { 
	display: block; clear:both; content:"";
	position: absolute; top: 0; bottom: 0; left:7px; margin: auto;
	width: 16px; height: 16px; border-radius: 16px;
}
/*
#now ul li.state .open::before { background:#16A302;}
#now ul li.state .close::before { background:#FF0000;}
*/
#now ul li.state .open::before { background:#FF0000;}
#now ul li.state .close::before { background:#16A302;}
#now ul.type_b,
#now ul.type_b li.no {background: rgba(127,173,128,0.25);}
#now ul.type_w,
#now ul.type_w li.no {background:rgba(70,180,188,0.25);}
#now ul li .open_b { display: none;}
#now .table_type { clear: both; padding:1%; padding-top:30px;}
#now table {width:100%;}
#now table th { width:100px; font-weight: normal;}
#now table th,
#now table tr:nth-child(1) td { font-size: 14px;}
#now table tr:nth-last-child(1) td { font-size: 14px;}
#now table td { table-layout: fixed; text-align: center; border: 1px solid #ddd;}
#now table td+td { border-left:none;}
#now table tr:nth-child(1) td { border:none; font-weight: normal;}
#now table tr:nth-last-child(1) td { border:none; font-weight: normal;}
#now table tr+tr+tr td { border-top:none;}
#now table td p {
	margin: auto;
	width: 80%;
	height: 12px;
	text-indent: -9999px;
	border-radius:10px;
	background: #000;
}
/*
#now table td .on { background:#16A302;}
#now table td .off { background:#FF0000;}
*/
#now table td .off { background:#16A302;}
#now table td .on { background:#FF0000;}

#now .btn {position: absolute; top:15px; right:4%; padding: 5px 20px;}
#now .open_box { transition:0s;}
@media only screen and (max-width:1450px){
	#now ul li.note { 
		float: none; clear: both; width: 100%;
		border-top:1px solid rgba(0,0,0,0.10);
		border-left:none;
	}
}
@media only screen and (max-width:1015px){
	#now h2 { padding: 4% 0 4% 45px; }
	#now ul{ float: none; width:98%; position: relative;}
	#now ul.type_b li.namae {background: rgba(127,173,128,0.25);}
	#now ul.type_w li.namae {background:rgba(70,180,188,0.25);}
	#now ul li.namae { width: calc(100% - 65px);}
	#now ul li.state { width: 100%; padding:20px; background: none ;}
	#now ul li .open_b {
		display: block; cursor: pointer;
		position: absolute; top:-60px; right:0;
		width:120px; height:60px;
		color: #444;
		background: none; border: none;
	}
	#now ul li.note { border-top:none !important;}
	#now ul li.note p { display: none; transition:0s;}
}
@media only screen and (max-width:800px){
	#now .table_type { padding:30px 2%;}
	#now table tr:nth-last-child(1) td, 
	#now table tr:nth-child(1) td { 
		font-size: 10px; height:40px; line-height: 100%;
		-ms-writing-mode: tb-rl; writing-mode: vertical-rl;
	}
	#now table th { width:calc(100% - 288px) !important; font-weight: normal;}
	#now table td { width:18px;}
}


/* INFO */
#info { padding: 2%; background: #fff;}
#info h2 { 
	position: relative;
	padding: 2% 0 2% 45px;
	color: #000;
	font-size: 156.3%;
}
#info h2:after {
	display: block; clear: both; content:"";
	position: absolute; top: 0; left: 0; bottom: 0;
	margin: auto; width: 35px; height: 35px;
	background: url("../img/icon_info_b.svg") no-repeat center center;
}
#info .info_box { border-bottom: 1px solid #ddd;}
#info .info_box ul { padding: 10px; border-top: 1px solid #ddd; overflow: hidden;}
#info .info_box ul li { float: left; font-weight: 400;}
/* #info .info_box ul li:nth-child(1) { width: 100px; font-family: 'Oswald', 'sans-serif'; letter-spacing: -1px;} */
#info .info_box ul li:nth-child(1) { width: 125px; font-family: 'Oswald', 'sans-serif'; letter-spacing: -1px;}
#info .info_box ul li:nth-child(2) { 
	position: relative; top: 4px;
	margin-right: 20px; width:80px;
	text-align: center;
	font-size: 87.5%;
	line-height: 140%;
	border: 1px solid #000;
}
/* #info .info_box ul li:nth-child(3) { width:calc(100% - 220px);} */
#info .info_box ul li:nth-child(3) { width:calc(100% - 245px);}
/* #info .info_box ul li:nth-child(3) a { color: #000; text-decoration: none;} */
#info .info_box ul li:nth-child(3) a { color: #000;}
#info .info_box ul li:nth-child(3) a:hover { color:#444; text-decoration:underline;}
@media only screen and (max-width:900px){
	#info .info_box ul li:nth-child(3) { clear: both; float: none; width:100%;}
}

/*==========================================================================
  FREE PAGE
============================================================================*/
#freepage { margin:0 auto 2%; padding:2%; background: #fff; border-radius:5px; overflow: hidden;}

/* LIST -------------------------------------------------------------------*/
#freepage .list {
	clear:both;
	margin:15px 0;
}
#freepage .list p { position:relative; background:rgba(33,104,87,0.05);}
#freepage .list p+p { margin-top:15px;}
#freepage .list p a {
	display:block;
	padding:15px 15px 15px 45px;
	font-size:120%;
	font-weight:bold;
	color:#444;
/*	text-decoration:none; */
	background: url(../img/link_arrow.png) no-repeat 20px center;
}
#freepage .list p a:hover { background-color: rgba(183,199,79,0.30);}


/* UPDATE -----------------------------------------------------------------*/
#freepage .updata { margin:10px 2%; text-align: right;}


/* MIDASHI ----------------------------------------------------------------*/
#freepage h2 {
	clear:both;
	margin:20px 2%;
	padding:5px 0 5px 20px;
	font-size:125%;
	color:#444;;
	border-left:5px solid #444;
}
#freepage h3 {
	clear:both;
	margin:20px 2%;
	padding:7px 15px;
	font-size:112.5%;
	color:#fff;
	background:rgba(33,104,87,1.00);
}


/* COMMENT ----------------------------------------------------------------*/
#freepage .comment { clear:both; margin:20px 2%; overflow: hidden;}


/* PHOTO ------------------------------------------------------------------*/
#freepage .photo-l { float:left; margin-right:2%; width: 40%; max-width: 400px;}
#freepage .photo-r { float:right; margin-left:2%; width: 40%; max-width: 400px;}
#freepage .photo-c { clear:both; text-align:center;}
#freepage .photo-l img,
#freepage .photo-r img,
#freepage .photo-c img { width: 100%; height: auto;}
#freepage .photo-l p,
#freepage .photo-r p,
#freepage .photo-c p { padding: 0 0 2%;} 
#freepage .photo-l2 { float:left;}
#freepage .photo-r2 { float:right;}
#freepage .photo-l2 p { float:left; margin-right:2%;}
#freepage .photo-r2 p { float:left; margin-left:2%;}
#freepage .caption { font-size:80%; text-align:center;}


/* LIST -------------------------------------------------------------------*/
#freepage ul { clear:both; margin:20px 2%;}
#freepage ul li {
	padding-left:20px;
	background: url(../img/list_arrow.png) no-repeat left center;
}
#freepage ol { clear:both; margin:20px 2%; padding-left:20px; list-style-type: decimal;}
#freepage ol li { list-style-type: decimal;}


/* HYOU -------------------------------------------------------------------*/
#freepage table {
	margin:20px 2%;
	width:96%;
/*
	border-right:1px solid #CCC;
	border-bottom:1px solid #CCC;
	border-collapse: separate;
	border-spacing: 0;
*/
	border:1px solid #CCC !important;
	border-collapse: collapse;

}

#freepage table th,
#freepage table td {
	padding: 10px;
/*
	border-top:1px solid #CCC;
	border-left:1px solid #CCC;
*/
	border:1px solid #CCC !important;
}
#freepage table th {
	background:rgba(33,104,87,0.05);
	font-weight:bold;
	text-align:center;
}


/* LINK -------------------------------------------------------------------*/
#freepage .icon-pdf,
#freepage .icon-word,
#freepage .icon-excel,
#freepage .icon-link { clear:both; margin:0 2%; padding: 5px 0 5px 25px;}
#freepage .icon-pdf {background: url(../img/icon-pdf.jpg) no-repeat left 4px;}
#freepage .icon-word { background: url(../img/icon-word.jpg) no-repeat left 4px;}
#freepage .icon-excel { background: url(../img/icon-excel.jpg) no-repeat left 4px;}
#freepage .icon-link { background: url(../img/link_arrow.png) no-repeat 0 10px;}


/* BOX --------------------------------------------------------------------*/
#freepage .c_box { clear:both; margin:20px 2%; overflow: hidden;}
#freepage .c_box h3 { clear:none; margin:15px 0; padding:0; font-size:112.5%; color:#444; background: none;}
#freepage .c_box h4 { clear:none; margin:0 0 15px; padding:0 0 15px; font-size:112.5%; color:#444; border-bottom:2px solid #444;}
#freepage .c_box .come { clear:none;}
#freepage .box2 { padding:3%; background:rgba(33,104,87,0.05);}
#freepage .box3 { padding:3%; border:1px solid #DFDFDF;}
#freepage .box4 { clear:none; float:left; width:46%; padding:3%; background:rgba(33,104,87,0.05);}
#freepage .box4 p { padding:10px 0 0 !important; }
#freepage .box4 .photo-c img { max-width:400px;}

@media only screen and (max-width:600px){
	#freepage table {
		width:96% !important;
	
	}
	#freepage table th,
	#freepage table td {
		table-layout:auto !important;
		display:block !important;
		padding:5px 5% !important;
		width:100% !important;
		height:auto !important;
		text-align:left;
		font-weight:normal;
		box-sizing:	border-box;
	}
	#freepage .box4 { loat:none; width:96%;}
}

.btn:hover{
	cursor:pointer;
}