@charset "utf-8";
/* ------------------------------------------------------------ fv */
#company .fv h1 {
	background: url(../images/common/animal_02.png) no-repeat center center;
	padding: 250px 0;
}

#company .fv h1 span {
	margin: 0 0 20px;
	text-shadow: rgba(0,0,0,0.5) 10px 10px 20px;
}

/* ------------------------------------------------------------ outline */
#company .outline {
	margin: 0 auto 120px;
}

#company .outline .outline_flex {
	display: flex;
	justify-content: space-between;
}

#company .outline .outline_flex .outline_left {
	width: 440px;
}

#company .outline .outline_flex .outline_left img {
	width: 100%;
	height: auto;
}

#company .outline .outline_flex .outline_right {
	width: 660px;
	padding: 0 0 0 70px;
	box-sizing: border-box;
}

#company .outline .outline_flex .outline_right dl {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

#company .outline .outline_flex .outline_right dl dt {
	position: relative;
	width: 130px;
	font-size: 14px;
	line-height: 1.85;
	color: #a0a0a0;
	padding: 0 10px;
	margin: 0 0 30px;
	box-sizing: border-box;
}

#company .outline .outline_flex .outline_right dl dt::before {
	position: absolute;
	content: "";
	left: 0;
	top: 0;
	width: 1px;
	height: 25px;
	background: #a0a0a0;
}

#company .outline .outline_flex .outline_right dl dd {
	width: calc(100% - 130px);
	margin: 0 0 15px;
	line-height: 1.625;
}


/* ------------------------------------------------------------ access */
#company .access {
	margin: 0 auto 125px;	
}

#company .access .map {
	margin: 0 auto 35px;
}

#company .access .map iframe {
	width: 100%;
	height: 500px;
}

#company .access .address {
	text-align: center;
	margin: 0 0 10px;
}

#company .access .link {
	text-align: center;
}

#company .access .link a {
	font-size: 14px;
	text-decoration: underline;
	color: #fff;
}


/* ------------------------------------------------------------ gallery */
#company .gallery {
	
}

#company .gallery .gallery_flex {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

#company .gallery .gallery_flex .gallery_left h2 {
	text-align: left;
}

#company .gallery .gallery_flex .gallery_right {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

#company .gallery .gallery_flex .gallery_right .dots {
	position: static;
	width: inherit;
	height: inherit;
	margin: 0 40px 0 0;
}

#company .gallery .gallery_flex .gallery_right .dots span {
	display: inline-block;
	font-size: 20px;
	font-family: "helvetica neue",'Hiragino Kaku Gothic ProN',"ヒラギノ角ゴ ProN W3","Meiryo","メイリオ","Osaka","MS PGothic","arial",sans-serif;
	font-weight: 100;
}

#company .gallery .gallery_flex .gallery_right .dots .total {
	position: relative;
	padding: 0 0 0 65px;
}

#company .gallery .gallery_flex .gallery_right .dots .total::before {
	position: absolute;
	content: "";
	left: 18px;
	top: 0;
	bottom: 0;
	margin: auto 0;
	width: 30px;
	height: 1px;
	background: #fff;
}

#company .gallery .gallery_flex .gallery_right .arrows {
	display: flex;
	justify-content: space-between;
} 

#company .gallery .gallery_flex .gallery_right .arrows .animation_btn {
	width: 55px;
}

#company .gallery .gallery_flex .gallery_right .arrows .animation_btn .arrow {
	width: 45px;
	left: 0;
}

#company .gallery .gallery_flex .gallery_right .arrows .animation_btn:hover .arrow {
	left: 8px;
}

#company .gallery .gallery_flex .gallery_right .arrows .animation_btn:hover .circle {
	right: -8px;
}

#company .gallery .gallery_flex .gallery_right .arrows .prev {
	transform: scaleX(-1);
	margin: 0 30px 0 0;
}

#company .gallery .gallery_slider .slick-slide > div {
	margin: 0 25px;
}

#company .gallery .gallery_slider li img {
	width: 800px;
	height: auto;
}






/* ------------------------------------------------------------ mobile ------------------------------------------------------------ */
@media only screen and (max-width: 767px) {
	
	/* ------------------------------------------------------------ fv */
	#company .fv h1 {
		background: url(../images/common/animal_02.png) no-repeat center 110px/auto 300px;
		padding: 250px 0 50px;
	}
	
	#company .fv h1 span {
		margin: 0 0 15px;
	}
	
	/* ------------------------------------------------------------ outline */
	#company .outline {
		margin: 60px auto 80px;
	}
	
	#company .outline .outline_flex {
		display: block;
	}
	
	#company .outline .outline_flex .outline_left {
		width: 100%;
		margin: 0 0 25px;
	}
	
	#company .outline .outline_flex .outline_left img {
		width: 90vw;
	    height: 56.25vw;
	    object-fit: cover;
	}

	#company .outline .outline_flex .outline_right {
		width: 100%;
		padding: 0;
	}
	
	#company .outline .outline_flex .outline_right dl {
	}
	
	#company .outline .outline_flex .outline_right dl dt {
		width: 90px;
		font-size: 12px;
		line-height: 1.5;
		padding: 0 10px;
		margin: 0 0 15px;
	}
	
	#company .outline .outline_flex .outline_right dl dt::before {
		height: 18px;
	}
	
	#company .outline .outline_flex .outline_right dl dd {
		width: calc(100% - 90px);
		margin: 0 0 15px;
		font-size: 12px;
		line-height: 1.5;
	}
	
	/* ------------------------------------------------------------ access */
	#company .access {
		margin: 0 auto 100px;	
	}
	
	#company .access .map  { 
		position: relative; 
		padding-bottom: 56.25%; 
		height: 0; 
		overflow: hidden; 
		margin: 0 0 20px;
	}
	
	#company .access .map iframe { 
		position: absolute; 
		top: 0; 
		left: 0; 
		width: 100%; 
		height: 100%;
	}
	
	#company .access .address {
		font-size: 14px;
		line-height: 1.7;
		margin: 0 5% 10px;
	}
	
	/* ------------------------------------------------------------ gallery */
	#company .gallery .gallery_flex {
		display: block;
	}
	
	#company .gallery .gallery_flex .gallery_left h2 {
		text-align: left;
	}
	
	#company .gallery .gallery_flex .gallery_right {
		margin: 0 0 25px;
	}
	
	#company .gallery .gallery_slider .slick-slide > div {
		margin: 0 10px;
	}
	
	#company .gallery .gallery_slider li img {
		width: calc(80vw - 20px);
		height: auto;
	}
	
	#company .gallery .gallery_flex .gallery_right .arrows .animation_btn:hover .arrow {
		left: 0;
	}
	
	#company .gallery .gallery_flex .gallery_right .arrows .animation_btn:hover .circle {
		right: 0;
	}

}