@charset "utf-8";
/*////////////////////////////////////
concept
////////////////////////////////////*/

@media screen and (min-width: 768px){
#concept {
	position: relative;
	width: 100%;
	padding: 100px 0;
}
#concept_area {
	position: relative;
	width: 100%;
	min-height: 600px;
	background: url("../concept/img/concept_back.jpg");
	background-position: center;
	background-size: cover;
	margin-bottom: 100px;
}
#concept_title_area {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}
.upcover {
	position: absolute;
	z-index: 2;
	top: 0;
	width: 100%;
	height: 80px;
	background-image: linear-gradient(180deg, rgba(245,242,232,1.00), rgba(245,242,232,0));
}
.undercover {
	position: absolute;
	bottom: 0;
	z-index: 2;
	width: 100%;
	height: 80px;
	background-image: linear-gradient(0deg, rgba(245,242,232,1.00), rgba(245,242,232,0));
}
.catch_subtitle {
	position: relative;
	text-align: center;
	margin-bottom: 10px;
	font-size: 2rem;
	font-weight: 400;
	margin-left: 5px;
	color:rgba(12,36,58,1.00);
}
.catch_title {
	position: relative;
	text-align: center;
	margin-bottom: 50px;
}
.catch_title h2 {
	font-size: 5rem;
	font-weight: 700;
	color:rgba(12,36,58,1.00);
}
#concept_pickup {
	position: relative;
	text-align: center;
	font-size: 1.6rem;
	font-weight: 300;
	line-height: 2;
	color:rgba(12,36,58,1.00);
}


.concept_place {
	position: relative;
	width: 80%;
	padding: 100px 0 0 0;
	margin: 0 auto;
}
#concept_place_title {
	position: relative;
	width: 100%;
	margin-bottom: 50px;
}
#concept_place_title h2 {
	font-size: clamp(2.6rem,2vw,4rem);
	font-weight: 700;
	color: #555;
}
.concept_place p {
	font-size: clamp(1.6rem,1.2vw,2rem);
	font-weight: 300;
	line-height: 2;
}
.photo_right {
	position: relative;
	width: 45%;
	float: right;
	margin-left: 20px;
	margin-bottom: 20px;
}
}

@media screen and (min-width: 0px) and (max-width: 767px){
#concept {
	position: relative;
	width: 100%;
	padding: 80px 0;
}
#concept_area {
	position: relative;
	width: 100%;
	min-height: 400px;
	background: url("../concept/img/concept_back.jpg");
	background-position: center;
	background-size: cover;
	margin-bottom: 100px;
}
#concept_title_area {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}
.upcover {
	position: absolute;
	z-index: 2;
	top: 0;
	width: 100%;
	height: 50px;
	background-image: linear-gradient(180deg, rgba(245,242,232,1.00), rgba(245,242,232,0));
}
.undercover {
	position: absolute;
	bottom: 0;
	z-index: 2;
	width: 100%;
	height: 50px;
	background-image: linear-gradient(0deg, rgba(245,242,232,1.00), rgba(245,242,232,0));
}
.catch_subtitle {
	position: relative;
	text-align: center;
	margin-bottom: 10px;
	font-size: 1.4rem;
	font-weight: 400;
	margin-left: 5px;
	color:rgba(12,36,58,1.00);
}
.catch_title {
	position: relative;
	text-align: center;
	margin-bottom: 50px;
}
.catch_title h2 {
	font-size: 3rem;
	font-weight: 700;
	color:rgba(12,36,58,1.00);
}
#concept_pickup {
	position: relative;
	text-align: center;
	font-size: 1.6rem;
	font-weight: 300;
	line-height: 2;
	color:rgba(12,36,58,1.00);
}

.concept_place {
	position: relative;
	width: 80%;
	padding: 100px 0 0 0;
	margin: 0 auto;
}
#concept_place_title {
	position: relative;
	width: 100%;
	margin-bottom: 50px;
}
#concept_place_title h2 {
	font-size: clamp(2.6rem,2vw,4rem);
	font-weight: 700;
	color: #555;
}
.concept_place p {
	font-size: clamp(1.6rem,1.2vw,2rem);
	font-weight: 300;
	line-height: 2;
}
.photo_right {
	position: relative;
	width: 100%;
	margin-bottom: 20px;
}
}