/* ******************************************************************
 *	File name		: base.css
 *	Summary			: css base
 * ******************************************************************
 */

/*

青　#ADD8E6　rgba(173,216,230,1.0)
青（濃）　#74B7CE　rgba(116,183,206,1)

青（新）　#003F88　rgba(0,63,136,1)

紺　#313140　rgba(49,49,64,1)
オレンジ　#E7782E　rgba(231,120,46,1)

*/

/* -----------------------------------------------------------------
   top_contents
----------------------------------------------------------------- */

#top_contents{
	position:relative;
	width:1000px;
	margin:0 auto 15px;
	padding:0 0 3px;
}

/* main_img */
#main_img{
	display:block;
	position:relative;
	top:0px;
	width:999px;
	height:500px;
	margin:0 0 12px;
	z-index:1;
	}
	#main_img div{
		position:absolute;
		top:0px;
		width:333px;
		height:100%;
	}
	#main_img div:nth-child(1){left:0px;}
	#main_img div:nth-child(2){left:333px;}
	#main_img div:nth-child(3){left:666px;}

	#main_img div a{
		display:block;
		position:relative;
		width:100%;
		height:100%;
		text-align:center;
		overflow:hidden;
		transition-duration:0.5s;
		}
		#main_img div a img{
			position:relative;
			width:auto;
			max-width:none;
			height:auto;
			z-index:1;
		}
		#main_img div:nth-child(1) a img{top:-20px;left:-26px;}
		#main_img div:nth-child(2) a img{top:0px;left:-185px;}
		#main_img div:nth-child(3) a img{top:-10px;left:-2px;}

	#main_img div a::after{
		content:" ";
		position:absolute;
		top:0px;
		right:0px;
		width:270PX;
		height:500px;
		z-index:100;
		}
		#main_img div:nth-child(1) a::after{background:url(../../image/top/main_cover_01.png) no-repeat 0 0;}
		#main_img div:nth-child(2) a::after{background:url(../../image/top/main_cover_02.png) no-repeat 0 0;}
		#main_img div:nth-child(3) a::after{background:url(../../image/top/main_cover_03.png) no-repeat 0 0;}

		#main_img div a:hover{
			opacity:0.7;
		}

#main_lead{
	padding:0 5px;
	font-size:0.90rem;
}

/* sp */
#main_img_sp{
	display:none;
	margin:0 0 15px;
	}
	#main_img_sp div a{
		display:block;
		position:relative;
		width:100%;
		height:100%;
		padding-bottom:20px;
		text-align:center;
		overflow:hidden;
		transition-duration:0.5s;
	}
	#main_img_sp div a::after{
		content:" ";
		position:absolute;
		top:0px;
		right:0px;
		width:100%;
		height:100%;
		z-index:100;
	}
	#main_img_sp div:nth-child(1) a::after{background:url(../../image/top/sp/main_cover_01.png) no-repeat right bottom;background-size:cover;}
	#main_img_sp div:nth-child(2) a::after{background:url(../../image/top/sp/main_cover_02.png) no-repeat right bottom;background-size:cover;}
	#main_img_sp div:nth-child(3) a::after{background:url(../../image/top/sp/main_cover_03.png) no-repeat right bottom;background-size:cover;}

/* --- responsive --- */
@media screen and (max-width:767px){
	#top_contents{
		width:100%;
	}
	#main_img{
		display:none;
	}
	#main_img_sp{
		display:block;
	}
	#main_lead{
		padding:0 15px;
		font-size:0.77rem;
		text-align:center;
	}
}

/* -----------------------------------------------------------------
   news
----------------------------------------------------------------- */

#news{
	position:relative;
	max-width:100%;
	min-height:280px;
	margin:0 auto 25px;
	padding:0 0 0 200px !important;
	border-top:2px solid #94A4AC;
	border-bottom:2px solid #94A4AC;
	text-align:center;
	}
	#news h2{
		display:-webkit-flex;
		display:flex;
		justify-content:center;
		align-items:center;
		position:absolute;
		top:19px;
		left:0px;
		width:160px;
		height:76px;
		font-family: 'Noto Serif JP', serif;
		font-weight:bold;
		font-size:1.2rem;
		color:#000;
		letter-spacing:0px;
		-moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.4);
		-webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.4);
		box-shadow: 0px 0px 5px rgba(0,0,0,0.4);
}
/* --- responsive --- */
@media screen and (max-width:767px){
	#news{
		padding:0px !important;
	}
	#news h2{
		position:relative;
		top:0px;
		width:100%;
		height:40px;
		margin:0 0 10px;
		-moz-box-shadow:none;
		-webkit-box-shadow:none;
		box-shadow:none;
		border:1px solid rgba(0,0,0,0.3);
	}
}

/* news_menu */
#news #news_menu{
	position:absolute;
	top:114px;
	left:20px;
	width:120px;
	padding-bottom:30px;
}
#news #news_menu ul{
	position:relative;
	top:0px;
	left:0px;
	width:100%;
	list-style:none;
	text-align:center;
	}
	#news #news_menu ul li{
		position:relative;
		width:100%;
		margin:0 0 7px;
		font-size:0.90rem;
		text-align:center;
		cursor:pointer;
		transition-duration:0.5s;
		color:#FFF;
		}
		#news #news_menu ul li::before{
			content:" ";
			position:absolute;
			left:0px;
			bottom:0px;
			width:100%;
			height:2px;
			z-index:0;
			transition-duration:0.5s;
			}
			#news #news_menu ul li.active::before,
			#news #news_menu ul li:hover::before{
				height:100%;
		}
		#news #news_menu ul li span{
			position:relative;
			color:#000;
			z-index:10;
			}
			#news #news_menu ul li.active span,
			#news #news_menu ul li:hover span{
				color:#FFF;
	}
	/* active */
	#news #news_menu ul li#tm_all::before{
		background:#94A4AC;
	}
	#news #news_menu ul li#tm_oroshi::before{
		background:#932A12;
	}
	#news #news_menu ul li#tm_supply::before{
		background:#003B83;
	}
	#news #news_menu ul li#tm_yume::before{
		background:#DF7D7D;
}

/* --- responsive --- */
@media screen and (max-width:767px){
	#news #news_menu{
		position:relative;
		top:0px;
		left:0px;
		width:100%;
		margin:0 0 15px;
		padding:7px 10px;
		border:1px solid rgba(0,0,0,0.3);
	}
	#news #news_menu ul{
		display:-webkit-flex;
		display:flex;
		-webkit-box-pack:justify;
		-ms-flex-pack:justify;
		justify-content:space-between;
		flex-wrap:wrap;
		}
		#news #news_menu ul li{
			display:inline-block;
			width:45%;
			font-size:0.70rem;
	}
}

#news_list_page{
	position:absolute;
	bottom:0px;
	left:20px;
	width:80px;
	text-align:center;
	z-index:100;
	}
	#news_list_page a{
		position:relative;
		padding-bottom:18px;
		font-size:0.87rem;
		text-decoration:none;
		color:#000;
		transition-duration:0.5s;
		}
		#news_list_page a::after{
			content:" ";
			position:absolute;
			bottom:0px;
			left:calc(50% - 8px);
			border: 8px solid transparent;
			border-top: 8px solid #94A4AC;
			transition-duration:0.5s;
		}
		#news_list_page a:hover{
			text-decoration:none;
		}
		#news_list_page a:hover::after{
			border-top: 8px solid #000;
}

/* --- responsive --- */
@media screen and (max-width:767px){
	#news_list_page{
		position:relative;
		bottom:0px;
		left:0px;
		width:100%;
		text-align:right;
		z-index:100;
		}
		#news_list_page a{
			padding:0 25px 3px 20px;
			background:rgba(0,0,0,0.1);
			}
			#news_list_page a::after{
				bottom:calc(50% - 8px);
				left:auto;
				right:0px;
				border: 8px solid transparent;
				border-left: 8px solid #94A4AC;
		}
		#news_list_page a:hover::after{
			border: 8px solid transparent;
			border-left: 8px solid #000;
	}
}

/* news_list */
#news #news_list{
	position:relative;
}
#news #news_list ul{
	position:relative;
	top:0px;
	width:100%;
	max-width:100%;
	min-height:100px;
	margin:0 0 -1px;
	list-style:none;
	text-align:left;
	}
	#news #news_list ul li{
		display:block;
		position:relative;
		width:100%;
		margin:0px;
		padding:13px 0px 45px 85px;
		font-size:0.87rem;
		color:#000;
		border-bottom:1px dashed #94A4AC;
		line-height:1.4;
	}
	#news #news_list ul li:last-child{
		border-bottom:none;
		}
		#news #news_list ul li span.date{
			display:block;
			position:absolute;
			top:13px;
			left:0px;
			font-weight:normal;
			font-size:0.87rem;
			text-align:left;
			color:#000;
		}
		#news #news_list ul li .category{
			display:-webkit-flex;
			display:flex;
			-webkit-box-pack:justify;
			-ms-flex-pack:justify;
			justify-content:flex-start;
			flex-wrap:wrap;
			position:absolute;
			bottom:13px;
			left:0px;
			width:100%;
			z-index:1;
			}
			#news #news_list ul li .category span{
				display:-webkit-flex;
				display:flex;
				justify-content:center;
				align-items:center;
				position:relative;
				width:100px;
				height:22px;
				margin:0 10px 0 0;
				font-size:0.77rem;
				text-align:center;
				color:#FFF;
				background:#969696;
				line-height:18px;
				z-index:1;
			}
			#news #news_list ul li span.cate_oroshi{
				background:#932A12;
				color:#FFF;
			}
			#news #news_list ul li span.cate_supply{
				background:#003B83;
				color:#FFF;
			}
			#news #news_list ul li span.cate_yume{
				background:#DF7D7D;
				color:#FFF;
		}
		#news #news_list ul li a{
			display:block;
			position:relative;
			width:calc(100% + 85px);
			height:calc(100% + 71px);
			margin:-13px 0 -45px -85px;
			padding:13px 0 45px 85px;
			text-decoration:none;
			color:#000;
			z-index:100;
			transition-duration:0.5s;
		}
		#news #news_list ul li a:hover{
			background:rgba(0,0,0,0.1);
}
/* --- responsive --- */
@media screen and (max-width:767px){
	#news #news_list ul{
		margin:0 0 0px;
		}
		#news #news_list ul li{
			padding:13px 0px 45px 0px;
			font-size:0.77rem;
	}
	#news #news_list ul li span.date{
		display:block;
		position:relative;
		top:0px;
		margin:0 0 5px;
		font-size:0.77rem;
	}
	#news #news_list ul li .category{
		position:absolute;
		bottom:13px;
		left:0px;
		width:100%;
		z-index:1;
		}
		#news #news_list ul li .category span{
			width:80px;
			margin:0 7px 0 0;
			font-size:0.60rem;
		}
		#news #news_list ul li a{
			display:inline-block;
			width:auto;
			height:auto;
			margin:0px 0 0px 0px;
			padding:0px 0 0px 0px;
	}
}

/* -----------------------------------------------------------------
   contents_banner
----------------------------------------------------------------- */

#contents_banner{
	position:relative;
	margin:0 0 20px;
	}
	#contents_banner ul{
		display:-webkit-flex;
		display:flex;
		-webkit-box-pack:justify;
		-ms-flex-pack:justify;
		justify-content:space-between;
		flex-wrap:wrap;
		position:relative;
		list-style:none;
	}
	#contents_banner ul li{
		position:relative;
		width:495px;
		height:160px;
		margin:0 0 9px;
		padding:0px;
	}
	#contents_banner ul li a{
		display:inline-block;
}

/* --- responsive --- */
@media screen and (max-width:767px){
	#contents_banner ul li{
		width:100%;
		height:auto;
	}
}