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

concept.css

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


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

	mainimg

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

/*----------------------------------------------------------
	Display：common
----------------------------------------------------------*/

#mainimg {
	width:100%;
	background-image:url(../img/concept/mainimg.jpg);
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-color:#ffffff;	
	background-size:cover;
	position:relative;
}


/*----------------------------------------------------------
	Display：320px → 559px（ sp ）
----------------------------------------------------------*/

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

	#mainimg {
		height:270px;
	}
	
}


/*----------------------------------------------------------
	Display：560px →（ tablet → ）
----------------------------------------------------------*/

@media screen and (min-width: 560px) {

	#mainimg {
		height:420px;
	}
	
}


/*----------------------------------------------------------
	Display：769px →（ pc ）
----------------------------------------------------------*/

@media screen and (min-width: 769px) {

	#mainimg {
		height:470px;
	}

}




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

	concpet

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

/*----------------------------------------------------------
	Display：common
----------------------------------------------------------*/

#conceptArea {

}
#conceptArea .conceptList .box{
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-pack: space-between;
	-ms-flex-pack: space-between;
	justify-content: space-between;
	-webkit-flex-wrap: wrap;
	-ms-flex-pack: wrap;
	flex-wrap: wrap;
	-webkit-align-items: center;
	align-items: center;
}
#conceptArea .conceptList .box:nth-child(even) {
	flex-direction: row-reverse;
}
#conceptArea .conceptList .box.live .photo{
	background-image:url(/-/media/hotel/hh/takarazukahotel/contents/lensemble/img/concept/concept_photo01.jpg);
}
#conceptArea .conceptList .box .photo{
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-size:cover;
}
#conceptArea .conceptList .box .data{
	text-align:center;
	box-sizing:border-box;
}
#conceptArea .conceptList .box .data h3{
	line-height:1.2em;
	letter-spacing:0.1em;
	font-family:'EB Garamond', serif;
}
#conceptArea .conceptList .box .data .txt{
	margin-top:20px;
	font-size:1.2rem;
	line-height:2em;
	letter-spacing:0.05em;
}


/*----------------------------------------------------------
	Display：320px → 559px（ sp ）
----------------------------------------------------------*/

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

	#conceptArea .conceptList{
		margin-top:30px;
	}
	#conceptArea .conceptList .box .photo{
		width:100%;
		min-height:200px;
	}
	#conceptArea .conceptList .box .data{
		width:100%;
		padding:30px 15px 40px;
	}
	#conceptArea .conceptList .box .data h3{
		font-size:2.8rem;
	}
	
}


/*----------------------------------------------------------
	Display：560px →（ tablet → ）
----------------------------------------------------------*/

@media screen and (min-width: 560px) {

	#conceptArea .conceptList{
		margin-top:40px;
	}
	#conceptArea .conceptList .box .photo{
		width:50%;
		min-height:270px;
	}
	#conceptArea .conceptList .box .data{
		width:50%;
		padding:15px;
	}
	#conceptArea .conceptList .box .data h3{
		font-size:3.2rem;
	}
	
}


/*----------------------------------------------------------
	Display：769px →（ pc ）
----------------------------------------------------------*/

@media screen and (min-width: 769px) {

	#conceptArea .conceptList{
		margin-top:50px;
	}
	#conceptArea .conceptList .box .photo{
		width:50%;
		height:300px;
	}
	#conceptArea .conceptList .box .data{
		width:50%;
		padding:20px;
	}
	#conceptArea .conceptList .box .data h3{
		font-size:3.6rem;
	}

}




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

	Display：print

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

@media print{

}