@charset "utf-8";

#wrap{
	width:98%;
	max-width: 1200px;
	display: flex;
}

section{
	margin-bottom:50px;
}

#seya{
	margin-bottom:0;	
}

.scroll-hint-icon{
	width:100px;
	font-size:20px;
	color: aqua;
}
/*-------------------------------

	一覧メニュー

-------------------------------*/

#listmenu{
	width:120px;
	background-color: #fff;
}

#listmenu ul{
	width:100%;
	margin:0 auto;
	padding:15px 10px;
	border-radius: 6px;
	border:1px solid #D6D6D6;
	position: sticky;
	top:0;
	left: 0;
}

#listmenu li{
	width:8em;
	font-weight: bold;
	text-indent: 0;
	padding-left:0;
}

#listmenu li a{
	font-family: 'Noto Sans JP', sans-serif;
	padding:8px 0;
	font-weight: 700;
	font-size:0.9rem;
	display: flex;
	align-items: center;
	line-height: 1;
	color:#050505;
}

#listmenu li a::before{
	font-family: "Font Awesome 6 Free";
	 content: "\f0da";
	font-size:8px;
	width:10px;
	/*height: 10px;*/
	display: block;
	line-height: 10px;
	background-color:#BED8C9;
	color:#fff;
	text-align: center;
	margin-right: 5px;
	margin-bottom:3px;
}

#listmenu li a:hover::before{
	background-color:#93B3A0;
}

/*-------------------------------

	一覧

-------------------------------*/

#list{
	flex:1;
	margin-left:20px;
}

#list .title{
	line-height: normal;
	margin-bottom:30px;
	display: flex;
	justify-content: center;
	align-items: center;
	width:100%;
}

#list .title::after{
	content: '';
	flex:1;
	height: 1px;
	display: block;
	border-top:1px solid #D6D6D6;
	border-bottom:1px solid #D6D6D6;
}
#list h2{
	font-family: 'Noto Serif JP', serif;
	font-weight: 800;
	font-size:1.9rem;
	display: inline-block;
	background-color: #fff;
	letter-spacing: 0.1em;
	padding-right:15px;
}

section .select{
	width:100%;
	display: flex;
}

section .select li{
	width:250px;
	background-color: #F1F1F1;
	border:1px solid #CACACA;
	font-size:0.9rem;
	margin-right:5px;
	border-radius: 6px 6px 0 0;
	padding:3px 8px;
	font-weight: bold;
	color:rgba(0,0,0,1.00);
	position: relative;
	z-index: 1;
}

section .select li.act{
	background-color: #fff;
	color:rgba(5,5,5,1.0);
	border-bottom:none;
	box-shadow: 2px -2px 7px -3px rgba(60,60,60,0.50);
	z-index: 3;
}

section .select li:not(.act){
	cursor: pointer;
	opacity: 0.7;
}

section .select li:not(.act)::before{
	font-family: "Font Awesome 6 Free";
	 content: "\f150";
	color:#60A059;
	margin-right: 5px;
}

section .select li.act::before{
	font-family: "Font Awesome 6 Free";
	 content: "\f0c8";
	color:#87B982;
	margin-right: 5px;
}


section .select li:not(.act):hover{
	color:rgba(5,5,5,1.0);
	opacity: 1;
}

section .item{
	background-color: #fff;
	border:1px solid #CACACA;
	padding:25px 5px 15px 5px;;
	border-radius: 0 6px 6px 6px;
	margin-top:-1px;
	box-shadow: 3px -3px 8px -5px rgba(60,60,60,0.60);
	position: relative;
	z-index: 2;
}

section h3{
	width:calc(100% - 6px);
	margin:0 auto 0 auto;
	font-size:1.3rem;
	/*padding:3px 15px;*/
	border-bottom:1px solid #D6D6D6;
	line-height: 1em;
	margin-bottom:5px;
	display: flex;
	align-items: center;
	padding-left:5px;
	color:rgba(30,30,30,1.00);
	/*text-align: center;
	border-radius: 3px 3px 0 0;
	background-color: #87B982;
	color:#fff;*/
}

section h3:before{
	content:'';
	width:30px;
	height: 1em;
	display: block;
	background-image: url("img/leaf.png");
	background-size:contain;
	background-repeat: no-repeat;
	margin-right: 8px;
	
}

/*section .item:last-child{
border-radius:6px;
}*/

/*#list h3::before{
	font-family: "Font Awesome 5 Free";
	 content: "\f0c8";
	margin-right:8px;
	font-size:0.95rem;
	color:#8ABA85;
}*/

#list table{
	width:100%;
	border-collapse:separate;
	border-spacing:2px 3px;
}

#list th,
#list td{
	padding:5px 10px;
	line-height: normal;
	font-size:0.98rem;
}

#list thead th,
#list thead td{
	background-color: #87B982;
	font-weight: bold;
	color:#fff;
	text-align: center;
}

#list tbody th,
#list tbody td{
	background-color: #EFF9F4;
}

#list table tbody tr:nth-child(odd) td{
	background-color: #F5F6F5;
}

#list table.onlygeneral thead td{
	background-color: #82B2B7;
}
#list  table.onlygeneral tbody tr.general td.odd{
	background-color: #EAF1F2;
}
#list table.onlygeneral tbody tr.general td.even{
	background-color: #F5F6F5;
}

#list tbody tr td:nth-child(1){
	min-width: 230px;
}

#list tbody tr td:nth-child(2){
	width: auto;
	font-size:0.99rem;
}

/*#list tbody tr td:nth-child(2){
	width:280px;
}*/

#list tbody tr td:nth-child(3),
#list tbody tr td:nth-child(4){
	width:100px;
}

#list tbody tr td:nth-of-type(5),
#list tbody tr td:nth-of-type(6){
	padding:0!important;
	text-align: center;
	width:3em;
	font-size:1.2rem;
}

#list tbody tr td a{
	width:100%;
	height: 100%;
	display: block;
	color:#050505;
}

#list tbody tr td:nth-of-type(5):empty:before{
	content:"-";
}

td[data-href]{
  cursor: pointer;
}
	
#list tbody tr td.over{
	background-color: #D4EFE1;
}

#list tbody tr:nth-child(odd) td.over{
	background-color: #E5E8E5;
}

#list .general{
	margin-top:15px;
	/*padding-top:20px;
	border-top:1px dotted #A9A9A9;*/
}

#list .onge{
	padding:40px 20px;
	font-weight: bold;
}

#list .onge a{
	color:#050505;
}

/*-----------------------
	スマホ・タブレット
-----------------------*/
@media screen and (min-width: 0) and (max-width: 1000px){
	#list tbody tr td:nth-child(1){
		min-width: 200px;
	}
}

@media screen and (min-width: 0) and (max-width: 890px){
	#wrap{
		width:100%;
		display: block;
		min-height: 1000px;
	}
	
	#listmenu{
		width:100%;
		margin-bottom:40px;
		/*border-top:1px solid #CACACA;
		border-bottom:1px solid #CACACA;*/
		background-color: rgba(255,255,255,0.89);
		position: sticky;
		top:0;
		left: 0;
		 backdrop-filter: blur(8px);
		z-index: 2;
	}
	
	#listmenu ul{
		width:95%;
		margin:0 auto;
		border-left:none;
		border-right:none;
		display: flex;
		flex-wrap: wrap;
		position: static;
		border:none;
	}
	
	#listmenu li{
		width:calc(100% / 5);
	}
	
	#list{
		width:95%;
		margin:0 auto;
		flex:none;
		position: relative;
		z-index: 1;
	}
	
	#list .js-scrollable{
		 overflow-x: scroll;
	}
	#list table{
		width:auto;
	}
	
	#list tbody tr td:nth-child(2){
		min-width: 300px;
	}
}

	#listopen{
			display: none;
		}
	
	@media screen and (min-width: 0) and (max-width: 480px){
		#listmenu{
			position:static;
		}
		#listmenu.act{
			position: fixed;
			top:0;
			left: 0;
		}
		
		#listmenu.act #listopen{
			width: 100%;
			background-color: #65AB50;
			font-size:0.9rem;
			text-align: center;
			color:#fff;
			font-weight: bold;
			line-height: 1em;
			padding:2px 0;
			display: block;
		}
		
		#listopen .fa-caret-down,
		#listopen .fa-caret-up{
			margin-right:5px;
		}

		#listmenu li{
			width:calc(100% / 4);
		}
	
		#listmenu ul{
			width:100%;
			padding:0 10px;
		}
		#listmenu li{
			width:calc(100% / 4);
		}
		section .select li{
			width:calc(50% - 2px);
			line-height: 1.2;
			padding:2px 3px;
			display: flex;
			align-items: center;
		}
		section h3{
			padding-left:0;
			font-size:1.2rem;
			border-bottom: none;
		}
	}