@charset "utf-8";

/*=========================================*/
/* ENVIRONMENT */
/*=========================================*/


/*-- IMAGE --*/

.environment_img_area{
	position:relative;
	margin:0px 0px 60px 0px;
	width:100%;
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
}

.environment_img_frame{
	position:relative;
	margin:0% 0% 3.5% 0%;
	padding:20px 0px 10px 0px;
	width:48.5%;
}

.environment_img{
	position:relative;
	margin:0px 10px 10px 0px;
	width:calc(100% - 10px);
	aspect-ratio:3/2;
	background-repeat:no-repeat;
	background-position:center center;
	background-size:cover;
	background-color:rgba(255,255,255,1.0);
	border:1px solid rgba(25,25,25,1.0);
	box-sizing:border-box;
	/* shadow */
	box-shadow:10px 10px rgba(25,25,25,0.15);
}

.environment_img_frame.img_vertical .environment_img{
	background-position:top 42.5% center;
	background-size:cover;
}

.environment_catch{
	position:relative;
	padding:12px 15px 5px 5px;
	font-size:125%;
	line-height:175%;
	letter-spacing:0.01em;
	color:rgba(0,0,0,1.0);
	font-weight:400;
}

@media screen and (max-width:1440px){

.environment_img_area{
	margin:0px 0px 55px 0px;
}

.environment_img_frame{
	width:48.75%;
}

.environment_catch{
	padding:10px 15px 5px 5px;
	font-size:118.75%;
	line-height:168.75%;
}

}

@media all and (max-width:960px), print{

.environment_img_area{
	margin:0px 0px 50px 0px;
}

.environment_img_frame{
	padding:15px 0px 10px 0px;
	width:49%;
}

.environment_img{
	margin:0px 8px 8px 0px;
	width:calc(100% - 8px);
	/* shadow */
	box-shadow:8px 8px rgba(25,25,25,0.15);
}

.environment_catch{
	padding:10px 12px 4px 4px;
	font-size:112.5%;
	line-height:168.75%;
}

}

@media screen and (max-width:800px){

.environment_img_area{
	margin:0px 0px 45px 0px;
}

.environment_img_frame{
	margin:0px auto 15px auto;
	max-width:540px;
	width:100%;
}

.environment_img_frame.img_vertical{
	max-width:360px;
}

.environment_img_frame.img_vertical .environment_img{
	aspect-ratio:2/3;
	background-position:center center;
	background-size:cover;
}

}

@media screen and (max-width:640px){

.environment_img_area{
	margin:0px 0px 40px 0px;
}

.environment_img{
	margin:0px 6px 6px 0px;
	width:calc(100% - 6px);
	/* shadow */
	box-shadow:6px 6px rgba(25,25,25,0.15);
}

.environment_img_frame{
	margin:0px auto 10px auto;
}

.environment_img_frame.img_vertical{
	max-width:320px;
}

.environment_catch{
	padding:8px 9px 3px 3px;
	font-size:106.25%;
	line-height:162.5%;
}

}

@media screen and (max-width:480px){

.environment_catch{
	font-size:100%;
}

}


/*-- SWIPER --*/

.environment_swiper_frame{
	position:relative;
	margin:0% 0% 3.5% 0%;
	padding:20px 0px 30px 0px;
	width:48.5%;
}

.environment_swiper_frame .swiper_frame{
	position:relative;
	width:100%;
}

@media screen and (max-width:1440px){

.environment_swiper_frame{
	width:48.75%;
}

}

@media all and (max-width:960px), print{

.environment_swiper_frame{
	padding:15px 0px 30px 0px;
	width:49%;
}

}

@media screen and (max-width:800px){

.environment_swiper_frame{
	margin:0px auto 15px auto;
	max-width:540px;
	width:100%;
}

}

@media screen and (max-width:640px){

.environment_swiper_frame{
	margin:0px auto 10px auto;
}

}


/*-- TITLE --*/

.environment_sub_title{
	position:absolute;
	top:0px;
	left:0px;
	padding:8px 15px 5px 10px;
	background-color:rgba(255,255,255,1.0);
	border:1px solid rgba(25,25,25,1.0);
	box-sizing:border-box;
	display:flex;
	align-items:center;
	z-index:10;
}

.environment_sub_title .title{
	font-size:212.5%;
	line-height:105%;
	letter-spacing:-0.05em;
	font-family:"Yu Mincho", "YuMincho", "游明朝体", "游明朝", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pr6 W6", "Hiragino Mincho Pro", "Noto Serif JP", serif;
	color:rgba(0,0,0,1.0);
	font-weight:normal;
	/*--writing-mode:vertical-rl;--*/
	/*--font-feature-settings:initial;--*/
}

@media screen and (max-width:1760px){

.environment_sub_title .title{
	font-size:187.5%;
}

}

@media screen and (max-width:1600px){

.environment_sub_title .title{
	font-size:162.5%;
}

}

@media screen and (max-width:1440px){

.environment_sub_title .title{
	font-size:137.5%;
}

}

@media screen and (max-width:1280px){

.environment_sub_title .title{
	font-size:150%;
}

}

@media all and (max-width:960px), print{

.environment_sub_title .title{
	font-size:137.5%;
}

}

@media screen and (max-width:480px){

.environment_sub_title .title{
	font-size:5.0vw;
}

}