@charset "UTF-8";

/* -------------------------------------------------------------
　コンセプト
------------------------------------------------------------- */

/* タイトル
------------------------------------------------------------- */

/* brand_common.css（タイトル）に記載
下記は各調整 */

#concept #page_title {
	background: url(/img/concept/h1_bgs.jpg) center top no-repeat;
	background-size: cover;
	margin: 90px 0 0;
}




/* リードブロック
------------------------------------------------------------- */

#concept #content {
	text-align: center;
	background: #F1F5F7;
	padding: 60px 0 80px;
}
#concept #content .sttl {
	font-family: "Roboto";
	color: #1E2B30;
	font-size: 12px;
	font-weight: 300;
	text-align: center;
	line-height: 28px;
	margin: 0 0 10px;
}

#concept #content h2 {
	color: #1E2B30;
	font-size: 30px;
	font-weight: 300;
	text-align: center;
	line-height: 54px;
	margin: 0 0 40px;
	padding: 0 0 0 0.5em;
}

#concept #content p.lead {
	color: #1E2B30;
	font-size: 14px;
	font-weight: 300;
	text-align: center;
	line-height: 28px;
}



/* ブランドのご紹介
------------------------------------------------------------- */

#concept #brand {
	padding: 60px 0 ;
}

#concept #brand h2 {
	color: #1E2B30;
	font-size: 30px;
	font-weight: 300;
	text-align:center;
	line-height: 36px;
	margin:0 0 20px;
}

#concept #brand p.lead {
	color: #1E2B30;
	font-size:12px;
	font-weight: 300;
	line-height: 22px;
	margin: 0 0 50px;
	padding: 0 35px;
}

#concept #brand .noml,
#concept #brand .prem {
	display: block;
	width: 90%;
	margin: 0 0 70px 9%;
}
#concept #brand .noml {
	border-bottom: 1px solid #638FA2;
}
#concept #brand .prem {
	border-bottom: 1px solid #AC9362;
}

#concept #brand ul.normal,
#concept #brand ul.premier {
	width: 90%;
	max-width: 600px;
	margin: 0 auto 80px;
}
#concept #brand ul.normal li:nth-child(1),
#concept #brand ul.premier li:nth-child(1) {
	text-align: center;
}
#concept #brand ul.normal li img,
#concept #brand ul.premier li img {
	width: 240px;
	margin: 0 0 50px;
}
#concept #brand ul.normal li h3,
#concept #brand ul.premier li h3 {
	color: #638FA2;
	font-size: 28px;
	font-weight: 100;
	line-height: 40px;
	margin: 0 0 40px;
	padding: 0 4%;
*	letter-spacing: 0.05em;
}
#concept #brand ul.premier li h3 {
	color: #AC9362;
}
#concept #brand ul.normal li .txt,
#concept #brand ul.premier li .txt {
	color: #1E2B30;
	font-size: 14px;
	font-weight: 300;
	line-height: 28px;
}


#concept #brand a.detail {
	display: block;
	width: 200px;
	color: #1E2B30;
	font-size: 12px;
	font-weight: 300;
	text-align: center;
	margin: 40px 0 0;
	padding: 7px 0;
	background: #fff url(../../img/common/mk_arrow_bwnR_175.svg) 90% 50% no-repeat;
	border: 1px solid #AC9362;
	border-radius: 40px;
	transition: 0.5s;
}
#concept #brand a.detail:hover {
	text-decoration: none;
	background: #fff url(../../img/common/mk_arrow_bwnR_175.svg) 93% 50% no-repeat;
	transition: 0.5s;
}





/* -------------------------------------------------------------
　プレミアのご紹介（コンセプト下層）
------------------------------------------------------------- */


/* タイトル
------------------------------------------------------------- */

#premier #page_title {
	background: url(/img/premier/h1_bgs.jpg) center top no-repeat;
	background-size: cover;
	margin: 90px 0 0;
}




/* 共通（リードブロック、プレミアのこだわり、おすすめの過ごし方）
------------------------------------------------------------- */

#premier #brand ul.premier li h2,
#premier #speciality h2,
#premier #arraival_bl h2 {
	color: #1E2B30;
	font-size: 28px;
	font-weight: 100;
	text-align: center;
	line-height: 1.3;
	letter-spacing: 0.014em;
	margin: 0 0 40px;
}

#premier #speciality .sholder,
#premier #arraival_bl .sholder {
	font-family: "Roboto";
	font-size: 12px;
	font-weight: 400;
	text-align: center;
	line-height: 1.5;
	letter-spacing: 0.006em;
}




/* リードブロック
------------------------------------------------------------- */

#premier #brand {
	padding: 80px 0;
}

#premier #brand ul.premier {
	width: 90%;
	max-width: 600px;
	margin: 0 auto;
}

#premier #brand ul.premier li:nth-child(1) {
	text-align: center;
}

#premier #brand ul.premier li img {
	width: 240px;
	margin: 0 0 50px;
}

#premier #brand ul.premier li h2 {
	color: #AC9362;
	text-align: left;
	line-height: 1.4;
}

#premier #brand ul.premier li .txt {
	color: #1E2B30;
	font-size: 14px;
	line-height: 2;
}



/* プレミアのこだわり
------------------------------------------------------------- */

#premier #speciality {
	padding: 60px 0 20px;
	background: #F5F3F2;
}

#premier #speciality article {
	max-width: 600px;
	margin: 0 auto;
	padding: 0 20px;
}

#premier #speciality article .point > li:nth-child(1),
#premier #speciality article .point > li:nth-child(2),
#premier #speciality article .point > li:nth-child(3) {
	position: relative;
	min-height: 140px;
	padding: 20px 0 40px;
	border-radius: 8px;
}

#premier #speciality article .point li ul {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	justify-content: center;
	width: 132px;
	background: #AC9362;
	border-radius: 20px;
	z-index: 2;
}

#premier #speciality article .point li ul li {
	height: 40px;
	color: #fff;
	line-height: 1;
}
#premier #speciality article .point li ul li:nth-child(1) {
	font-size: 12px;
	padding: 14px 16px 0 20px;
}

#premier #speciality article .point li ul li:nth-child(2) {
	font-family: "Roboto";
	font-size: 24px;
	font-style: italic;
	font-weight: 100;
	padding: 8px 20px 0 0;
}

#premier #speciality article .point .catch {
	color: #1E2B30;
	font-size: 12px;
	line-height: 1.8;
	margin: 0;
}



/* おすすめの過ごし方
------------------------------------------------------------- */

#premier #arraival_bl {
	padding: 70px 0 0;
}


/* 背景Blue/背景Brown　共通 */
#premier #arraival_bl .blue_bl,
#premier #arraival_bl .bwn_bl {
	position: relative;
	margin: 0 0 90px;
	padding: 48px 0 20px;
}

#premier #arraival_bl .blue_bl h3,
#premier #arraival_bl .bwn_bl h3 {
	position: absolute;
	top: -18px;
	font-family: "Roboto";
	font-size: 36px;
	font-weight: 100;
	line-height: 1;
	letter-spacing: 0.1em;
}

/* イメージcss */
#premier #arraival_bl .blue_bl ul.cont_wrap li ul.img_list,
#premier #arraival_bl .bwn_bl ul.cont_wrap li ul.img_list {
	display: flex;
	flex-wrap: wrap;
}

#premier #arraival_bl .blue_bl ul.cont_wrap li ul.img_list li,
#premier #arraival_bl .bwn_bl ul.cont_wrap li ul.img_list li {
	line-height: 0;
}
#premier #arraival_bl .blue_bl ul.cont_wrap li ul.img_list li:nth-of-type(1),
#premier #arraival_bl .bwn_bl ul.cont_wrap li ul.img_list li:nth-of-type(1) {
	width: 100%;
	padding: 0 0 20px;
}
#premier #arraival_bl .blue_bl ul.cont_wrap li ul.img_list li:nth-of-type(2),
#premier #arraival_bl .bwn_bl ul.cont_wrap li ul.img_list li:nth-of-type(2) {
	width: 50%;
	padding: 0 7px 0 0;
}
#premier #arraival_bl .blue_bl ul.cont_wrap li ul.img_list li:nth-of-type(3),
#premier #arraival_bl .bwn_bl ul.cont_wrap li ul.img_list li:nth-of-type(3) {
	width: 50%;
	padding: 0 0 0 7px;
}
#premier #arraival_bl .blue_bl ul.cont_wrap li ul.img_list li:nth-of-type(1) img,
#premier #arraival_bl .bwn_bl ul.cont_wrap li ul.img_list li:nth-of-type(1) img {
	width: 100%;
}

/* テキスト */
#premier #arraival_bl .blue_bl ul.cont_wrap li h4,
#premier #arraival_bl .bwn_bl ul.cont_wrap li h4 {
	color: #1E2B30;
	font-size: 28px;
	font-weight: 100;
	line-height: 1.4;
	margin: 0 0 30px 40px;
}

#premier #arraival_bl .blue_bl ul.cont_wrap li .lead,
#premier #arraival_bl .bwn_bl ul.cont_wrap li .lead {
	color: #1E2B30;
	font-size: 14px;
	line-height: 2;
	margin: 0 15px 0 40px;
}


/* 背景Blueのみ */
#premier #arraival_bl .blue_bl {
	background: linear-gradient(90deg, #F1F5F7 0% 83% , #fff 83% 100%);
}

#premier #arraival_bl .blue_bl h3 {
	right: 40px;
	color: #6490A2;
}

#premier #arraival_bl .blue_bl ul.cont_wrap {
}

	/* イメージcss */
#premier #arraival_bl .blue_bl ul.cont_wrap li ul.img_list {
	margin: 0 0 30px 40px;
}


/* 背景Brownのみ */
#premier #arraival_bl .bwn_bl {
	background: linear-gradient(90deg, #fff 0% 17% , #F5F3F2 17% 100%);
}

#premier #arraival_bl .bwn_bl h3 {
	left: 40px;
	color: #AC9362;
}

	/* イメージcss */
#premier #arraival_bl .bwn_bl ul.cont_wrap li ul.img_list {
	margin: 0 40px 30px 0;
}



/* ホテルリスト
------------------------------------------------------------- */

#premier #hotel_list {
	padding: 10px 0 80px;
}

#premier #hotel_list .ttlbl h2 {
	color: #638FA2;
	font-family: "Roboto";
	font-size: 36px;
	font-weight: 100;
	line-height: 1.3;
	text-align: center;
	margin: 0 0 40px;
}


#premier #hotel_list .list_wrap {
	padding: 0 20px;
}

#premier #hotel_list ul.hotelList {
	max-width: 600px;
	margin: 0 auto;
}

#premier #hotel_list ul.hotelList li ul {
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	padding: 18px 0;
	border-bottom: 1px solid #707070;
}
#premier #hotel_list ul.hotelList li ul li:nth-child(1) {
	padding: 0 20px 0 0;
}

#premier #hotel_list ul.hotelList li ul li .hName {
	color: #1E2B30;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.7;
	margin: 0 0 2px;
}
#premier #hotel_list ul.hotelList li ul li .hName a {
	text-decoration: none;
}

#premier #hotel_list ul.hotelList li ul li .hName a.hLink {
	color: #1E2B30;
	font-weight: 300;
}
#premier #hotel_list ul.hotelList li ul li .hName a.hLink:hover {
	color: #638FA2;
}

/*media Queries 
----------------------------------------------------*/
@media screen and (min-width:500px), print {
	#premier #hotel_list ul.hotelList li ul li .hName br {
		display: none;
	}
}/* 500 */

#premier #hotel_list ul.hotelList li ul li .acs {
	color: #638FA2;
	font-size: 12px;
	line-height: 2;
}

#premier #hotel_list ul.hotelList li ul li a.btRsv {
	position: relative;
	display: block;
	width: 80px;
	height: 45px;
	color: #fff;
	font-size: 14px;
	font-weight: 300;
	text-align: center;
	line-height: 1;
	padding: 15px 0;
	background: #1E2B30;
	border-radius: 2px;
	transition:0.5s;
}
#premier #hotel_list ul.hotelList li ul li a.btRsv:hover {
	transition:0.5s;
	opacity: 0.8;
	text-decoration: none;
}










/* media Queries PC //////////////////////////////////////////////////////////////////////////////////////
------------------------------------------------------------------------------------------------- 810px */
@media screen and (min-width:810px), print {

/* -------------------------------------------------------------
　コンセプト
------------------------------------------------------------- */

/* タイトル
------------------------------------------------------------- */

/* brand_common.css（タイトル）に記載
下記は各調整 */

#concept #page_title {
	background:url(/img/concept/h1_bg.jpg) center top no-repeat;
	background-size:cover;
	margin: 120px 0 0;
}




/* リードブロック
------------------------------------------------------------- */

#concept #content {
	width: unset;
	max-width: unset;
	padding: 140px 0 110px;
}

#concept #content .sttl {
	font-size: 21px;
	font-weight: 300;
	line-height: 42px;
	margin: 0 0 15px;
	letter-spacing: 0.05em;
}

#concept #content h2 {
	font-size: 42px;
	line-height: 46px;
	margin:0 0 110px;
	letter-spacing: 0.05em;
}

#concept #content p.lead {
	font-size:18px;
	line-height: 36px;
}



/* ブランドのご紹介
------------------------------------------------------------- */

#concept #brand {
	padding: 160px 0 60px;
}

#concept #brand .top_bl {
	display: flex;
	justify-content: center;
	max-width: 1000px;
	margin:0 auto 120px;
}
#concept #brand .top_bl li:nth-child(1) {
	width: 44%;
	padding: 0 4% 0 0;
	border-right: 1px solid #1E2B30;
}
#concept #brand .top_bl li:nth-child(2) {
	width: 56%;
	padding: 0 0 0 4%;
}
#concept #brand h2 {
	font-size: 48px;
	line-height: 50px;
	margin: 0;
	letter-spacing: 0.035em;
}

#concept #brand p.lead {
	font-size:18px;
	line-height: 27px;
	margin: 0;
}


#concept #brand .noml,
#concept #brand .prem {
	display: block;
	width: 90%;
	margin: 0 0 70px auto;
}



#concept #brand ul.normal,
#concept #brand ul.premier {
	display: flex;
	width: 90%;
	max-width: 1030px;
	margin: 0 auto 100px;
}
#concept #brand ul.normal li:nth-child(1),
#concept #brand ul.premier li:nth-child(1) {
	width: 350px;
	text-align: left;
	padding: 0 60px 0 0;
}
#concept #brand ul.normal li:nth-child(2),
#concept #brand ul.premier li:nth-child(2) {
	width: calc(100% - 350px);
}


#concept #brand ul.normal li img,
#concept #brand ul.premier li img {
	width: 290px;
	margin: 0;
}

#concept #brand ul.normal li h3,
#concept #brand ul.premier li h3 {
	font-size: 36px;
	line-height: 54px;
	margin: 0 0 60px;
	padding: 0;
}
#concept #brand ul.normal li .txt,
#concept #brand ul.premier li .txt {
	font-size: 14px;
	line-height: 35px;
}





/* -------------------------------------------------------------
　プレミアのご紹介（コンセプト下層）
------------------------------------------------------------- */


/* タイトル
------------------------------------------------------------- */

#premier #page_title {
	background: url(/img/premier/h1_bg.jpg) center top no-repeat;
	background-size: cover;
	margin: 120px 0 0;
}




/* 共通（リードブロック、プレミアのこだわり、おすすめの過ごし方）
------------------------------------------------------------- */

#premier #brand ul.premier li h2,
#premier #speciality h2,
#premier #arraival_bl h2 {
	font-size: 48px;
	line-height: 1.2;
	letter-spacing: 2.4px;
	margin: 0 0 60px;
}




/* リードブロック
------------------------------------------------------------- */

#premier #brand {
	padding: 160px 10px 60px;
}

#premier #brand ul.premier {
	width: 100%;
	max-width: 1030px;
	display: flex;
	justify-content: center;
	margin:0 auto 100px;
}

#premier #brand ul.premier li:nth-child(1) {
	width: 34%;
	padding: 0 5.83% 0 0;
}

#premier #brand ul.premier li img {
	width: 290px;
	margin: 0;
}

#premier #brand ul.premier li:nth-child(2) {
	width: 66%;
	padding: 0;
}


#premier #brand ul.premier li h2 {
	font-size: 36px;
	line-height: 1.4;
	letter-spacing: unset;
	margin: 0 0 60px;
}

#premier #brand ul.premier li .txt {
	font-size: 14px;
	line-height: 2.25;
	margin: 0;
}



/* プレミアのこだわり
------------------------------------------------------------- */

#premier #speciality {
	padding: 120px 0;
}


#premier #speciality article {
	max-width: unset;
	margin: 0;
	padding: 0 20px;
}

#premier #speciality article .point {
	display: flex;
	justify-content: space-between;
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
}

#premier #speciality article .point > li:nth-child(1),
#premier #speciality article .point > li:nth-child(2),
#premier #speciality article .point > li:nth-child(3) {
	width: 30%;
	margin: 0 5% 0 0;
	padding: 20px 0 0;
}
#premier #speciality article .point > li:nth-child(3) {
	margin: 0;
}


#premier #speciality article .point > li ul {
	left: -20px;
	transform: unset;
	display: list-item;
	width: 100px;
	height: 100px;
	margin: 0 0 16px;
	border-radius: 50%;
}

#premier #speciality article .point li ul li {
	height: auto;
	text-align: center;
}
#premier #speciality article .point li ul li:nth-child(1) {
*	font-size: 14px;
*	padding: 20px 0 0;
	font-size: 16px;
	padding: 13px 0 0;
	letter-spacing: 1.3px;
}

#premier #speciality article .point li ul li:nth-child(2) {
	font-size: 56px;
	margin: 3px 0 0;
	padding: 0;
}

#premier #speciality article .point .catch {
	font-size: 14px;
}



/* おすすめの過ごし方
------------------------------------------------------------- */

#premier #arraival_bl {
	padding: 120px 0 116px;
}


/* 背景Blue/背景Brown　共通 */
#premier #arraival_bl .blue_bl,
#premier #arraival_bl .bwn_bl {
	margin: 0 0 178px;
	padding: 66px 0 36px;
}

#premier #arraival_bl .blue_bl h3,
#premier #arraival_bl .bwn_bl h3 {
	top: -36px;
	font-size: 72px;
}

#premier #arraival_bl .blue_bl ul.cont_wrap,
#premier #arraival_bl .bwn_bl ul.cont_wrap {
	display: flex;
	width: 100%;
}

#premier #arraival_bl .blue_bl ul.cont_wrap li:nth-of-type(1),
#premier #arraival_bl .bwn_bl ul.cont_wrap li:nth-of-type(1) {
	width: 53.8%;
}

#premier #arraival_bl .blue_bl ul.cont_wrap li:nth-of-type(2),
#premier #arraival_bl .bwn_bl ul.cont_wrap li:nth-of-type(2) {
	width: 46.2%;
}

/* イメージcss */
#premier #arraival_bl .blue_bl ul.cont_wrap li ul.img_list,
#premier #arraival_bl .bwn_bl ul.cont_wrap li ul.img_list {
	margin: 0 0 -60px;
}
#premier #arraival_bl .blue_bl ul.cont_wrap li ul.img_list li:nth-of-type(1),
#premier #arraival_bl .bwn_bl ul.cont_wrap li ul.img_list li:nth-of-type(1) {
	padding: 0 0 40px;
}

/* テキスト */
#premier #arraival_bl .blue_bl ul.cont_wrap li h4,
#premier #arraival_bl .bwn_bl ul.cont_wrap li h4 {
	font-size: 36px;
	margin: 0 0 45px;
}

#premier #arraival_bl .blue_bl ul.cont_wrap li .lead,
#premier #arraival_bl .bwn_bl ul.cont_wrap li .lead {
	margin: 0;
}


/* 背景Blueのみ */
#premier #arraival_bl .blue_bl {
	background: linear-gradient(90deg, #F1F5F7 0% 80% , #fff 80% 100%);
}

#premier #arraival_bl .blue_bl h3 {
	left: 59.2%;
	right: unset;
}

#premier #arraival_bl .blue_bl ul.cont_wrap li:nth-of-type(2) {
	padding: 0 6.1% 0 5.4%;
}

	/* イメージcss */
#premier #arraival_bl .blue_bl ul.cont_wrap li ul.img_list {
	justify-content: flex-end;
}

#premier #arraival_bl .blue_bl ul.cont_wrap li ul.img_list li:nth-of-type(2) {
	width: 55.72%;
	padding: 0 0 0 17.15%;
}
#premier #arraival_bl .blue_bl ul.cont_wrap li ul.img_list li:nth-of-type(3) {
	width: 44.28%;
	padding: 0 0 0 5.71%;
}


/* 背景Brownのみ */
#premier #arraival_bl .bwn_bl {
	background: linear-gradient(90deg, #fff 0% 20% , #F5F3F2 20% 100%);
}

#premier #arraival_bl .bwn_bl h3 {
	left: 9.2%;
}

#premier #arraival_bl .bwn_bl ul.cont_wrap {
	flex-direction: row-reverse;
}

#premier #arraival_bl .bwn_bl ul.cont_wrap li:nth-of-type(2) {
	padding: 0 2.3% 0 9.2%;
}

	/* イメージcss */
#premier #arraival_bl .bwn_bl ul.cont_wrap li ul.img_list li:nth-of-type(2) {
	width: 44.28%;
	padding: 0 5.71% 0 0;
}
#premier #arraival_bl .bwn_bl ul.cont_wrap li ul.img_list li:nth-of-type(3) {
	width: 55.72%;
	padding: 0 17.15% 0 0;
}



/* -------------------------------------------------------------
　ホテルリスト（コンセプト下層）
------------------------------------------------------------- */

#premier #hotel_list {
	padding: 0 0 180px;
}

#premier #hotel_list .ttlbl h2 {
	font-size: 72px;
	line-height: 58px;
	margin: 0 0 70px;
}

#premier #hotel_list ul.hotelList {
	max-width: 1000px;
	margin: 0 auto;
}


#premier #hotel_list ul.hotelList > li {
	display: flex;
	flex-wrap: wrap;
	max-width: 1000px;
}
#premier #hotel_list ul.hotelList li ul {
	width: 47.5%;
	padding: 18px 0;
}
#premier #hotel_list ul.hotelList li ul:nth-of-type(1) {
	order: 1;
}
#premier #hotel_list ul.hotelList li ul:nth-of-type(2) {
	order: 3;
}
#premier #hotel_list ul.hotelList li ul:nth-of-type(3) {
	order: 5;
}
#premier #hotel_list ul.hotelList li ul:nth-of-type(4) {
	order: 2;
}
#premier #hotel_list ul.hotelList li ul:nth-of-type(5) {
	order: 4;
}
#premier #hotel_list ul.hotelList li ul:nth-of-type(6) {
	order: 6;
}

#premier #hotel_list ul.hotelList li ul:nth-of-type(1),
#premier #hotel_list ul.hotelList li ul:nth-of-type(2),
#premier #hotel_list ul.hotelList li ul:nth-of-type(3) {
	margin: 0 2.5% 0 0;
}
#premier #hotel_list ul.hotelList li ul:nth-of-type(4),
#premier #hotel_list ul.hotelList li ul:nth-of-type(5),
#premier #hotel_list ul.hotelList li ul:nth-of-type(6) {
	margin: 0 0 0 2.5%;
}

#premier #hotel_list ul.hotelList li ul li .hName {
	font-size: 17px;
	line-height: 1.5;
	margin: 0 0 5px;
}

#premier #hotel_list ul.hotelList li ul li .hName br {
	display: inline;
}
#premier #hotel_list ul.hotelList li ul li .hName br.long_hn {
	display: inline;
}

/*media Queries 
----------------------------------------------------*/
@media screen and (min-width:1000px), print {
	#premier #hotel_list ul.hotelList li ul li .hName br {
		display: none;
	}
}/* 1000 */

/*media Queries 
----------------------------------------------------*/
@media screen and (min-width:1040px), print {
	#premier #hotel_list ul.hotelList li ul li .hName {
		font-size: 18px;
	}
}/* 1040 */

#premier #hotel_list ul.hotelList li ul li .acs {
	font-size: 14px;
}

#premier #hotel_list ul.hotelList li ul li a.btRsv {
	width: 100px;
	height: 50px;
	font-size: 18px;
}






}/* 801 */