@charset "UTF-8";

/* ===============================
	style
=============================== */

.sp2 { display: none !important; }

/*------ main-visual ------*/

#main-visual {
	background: url("/images/fee/golf-stay/main-visual.jpg") no-repeat;
	background-size: cover;
}

/*------ contents ------*/

/* エリアマップボタン */
.maplink a {
	display: block;
	width: 800px;
	font-family: 'PT Serif', serif;
	font-size: 2.6rem;
	color: #1A3222;
	text-align: center;
	background-color: #B9C6BD;
	border-radius: 5px ;
	box-shadow: 0 3px 5px 1px rgba(140,140,140,0.7);
	padding: 2.5rem 0;
	margin: 0 auto 8rem;
	position: relative;
	transition: all .3s;
}
.maplink a span {
	display: block;
	font-family:'Noto Sans JP', sans-serif;
	font-size: 1.4rem;
}
.maplink a:before, 
.maplink a:after { 
	display: inline-block;
	content:'';
	width: 15px;
	height: 80%;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	border-top: solid 2px #1A3222;
	border-bottom: solid 2px #1A3222;
  }
.maplink a:before {
	border-left: solid 2px #1A3222;
	left: 2%;
  }
.maplink a:after {
	border-right: solid 2px #1A3222;
	right: 2%;
  }

.maplink a:hover {
	color: #1A3222;
	background-color: #98a89d;
}

.gs-detail {
	margin-top:5em;
}

.gs-detail sup {
	color: #000
}

.gs-detail .photo {
	margin-top:2em;
}
.gs-detail .photo img {
	object-fit: cover;
}

.gs-detail h5 {
	font-size: 2.8rem;
	line-height: 1.6;
	text-align: center;
	border-top: 1px solid #829889;
	border-bottom: 1px solid #829889;
	padding: 1.8rem 0;
	margin-bottom: 3rem;
}
.gs-detail h5 span {
	display: block;
	font-size: 1.6rem;
}
 
/* ROOM */
.room .col-inner:not(:first-of-type) {
	margin-top: 8rem;
}

.room .color-change {
	margin-top:4rem;
}
.room .color-change a {
	width:500px;
}

/* ACTIVITY */
picture {
	display: block;
}

/* 料金 */
.sec-price:not(:first-of-type) {
	margin-top: 6em;
}

.sec-price .dl-pdf {
	margin-bottom: 3em;
}

.accordion-container {
	width: 100%;
	margin: 0 auto;
}

#accordion .ac-sec:not(:last-of-type) {
	margin-bottom:3rem;
}

.accordion-container .accordion-title {
	position: relative;
	text-align: center;
	margin: 0;
	padding: 2rem 11rem;
	background-color: #E0E7E3;
	cursor: pointer;
	transition: .3s;
}
.accordion-container .accordion-title:hover { 
	background-color: #F4F4F4;
}

.accordion-container .accordion-title::before,
.accordion-container .accordion-title::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 25px;
	width: 15px;
	height: 1px;
	background: #1a3222;
}
.accordion-container .accordion-title::before {
	transform: rotate(90deg);
	transition: all .3s ease-in-out;
}
.accordion-container .accordion-title::after {
	transition: all .2s ease-in-out;
}

.accordion-container .accordion-title.open::before {
	transform: rotate(180deg);
}
.accordion-container .accordion-title.open::after {
	opacity: 0;
}

.accordion-container .accordion-title .ttl {
	font-size: 1.7rem;
}

.accordion-content {
	display: none;
	padding: 5rem 0;
	background-color: #F4F4F4;
	text-align: center;
}

/* 予約ボタン */
.btn-reserv {
	width:960px;
	text-align: center;
	padding: 2px;
	margin: 8em auto 0;
	background: #9bccab; /* Old browsers */
	background: -moz-linear-gradient(top, #9bccab 0%, #115327 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #9bccab 0%,#115327 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #9bccab 0%,#115327 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9bccab', endColorstr='#115327',GradientType=0 ); /* IE6-9 */
}
.btn-reserv a {
	display: block;
	padding:50px 0;
	font-family: 'Noto Serif JP', serif;
	font-weight: 500;
	font-size:2.8rem;
	line-height: 1.8;
	color: #1a3222;
	background: #d7e0da;
	transition: .3s;
}
.btn-reserv a:hover {
	color: #ffffff;
	background: #3f8155; 
}

/*------ popup ------*/

/* base */
.mfp-with-anim .subject {
	background-color: #FFFFFF;
	width: 1080px;
    height: 90vh;
    margin: 0 auto;
    overflow: scroll;
	position: relative;
}
.mfp-with-anim .subject .inner {
	padding: 70px 110px 150px;
}

.closeButton01 {
	position: absolute;
	top: 2%;
	right: 2%;
}
.closeButton01 span {
	cursor: pointer;
	display: block;
	position: relative;
	width: 60px;
	height: 60px;
	background: rgba(255,255,255,0.8); /* ボタンの背景色 */
}
.closeButton01 span::before, 
.closeButton01 span::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 2px;
	height: 45px;
	background: #829889; /* バツ印の色 */
  } 
.closeButton01 span::before {
	transform: translate(-50%,-50%) rotate(45deg);
  }
.closeButton01 span::after {
	transform: translate(-50%,-50%) rotate(-45deg);
  }

.closeButton02 {
	cursor: pointer;
	width: 250px;
	height: 50px;
	font-family: 'PT Serif', serif;
	font-size: 1.6rem;
	line-height: 50px;
	color: #829889;
	text-align: center;
	border: 1px solid #829889;
	margin: 0 auto;
	transition: .3s;
}
.closeButton02:hover {
	color: #fff;
	background-color: #829889;
}

button.mfp-close {
	display: none;
}

.mfp-with-anim .subject img {
	object-fit: cover;
}

/* 詳細 */
.subject .topimage,
.subject .topimage img {
	width: 100%;
	height: 430px;
}

.subject h5,
.subject p.intro {
	font-family: 'Noto Serif JP', serif;
	text-align: center;
}

.subject h5 {
	font-size: 2.4rem;
	line-height: 1.6;
    color: #829889;
    padding: 2rem 0;
	margin-bottom:5rem;
	position: relative;
}
/* .subject h5 span {
	display: block;
	font-size: 1.6rem;
} */
.subject h5:before, 
.subject h5:after { 
	display: inline-block;
	content:'';
	width: 15px;
	height: 80%;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	border-top: solid 3px #829889;
	border-bottom: solid 3px #829889;
  }
.subject h5:before {
	border-left: solid 3px #829889;
	left: 28%;
  }
.subject h5:after {
	border-right: solid 3px #829889;
	right: 28%;
  }

#room03 .subject h5:before {
	left: 23%;
  }
#room03 .subject h5:after {
	right: 23%;
  }
  
.subject p.intro {
	font-size: 1.6rem;
	margin: 4rem 0;
}

ul.photo li.planview {
	background-color: #829889;
	text-align: center;
}
ul.photo li.planview img {
	width: 80%;
}

ul.detail {
	margin: 3rem 0 8rem;
}
ul.detail li.title {
	font-size:1.6rem;
	line-height: 2;
	color: #829889;
	background-color: #F7F7F7;
	border-left: 10px solid #829889;
	padding-left: 1.5rem;
	margin-bottom: 1.5rem;
}
ul.detail li.title:not(:first-of-type) {
	margin-top: 1.5rem;
}

.subject hr {
	width: 70%;
    border: none;
    border-top: 1px dashed #829889;
	margin: 0 auto 8rem;
}

/* ===============================
	PC / Tab Style
=============================== */
@media print , screen and (min-width: 768px) {

	/*------ ページ内リンク ------*/

	#gs-navi ul  {
		width:1080px;
		justify-content: space-between;
	}
	#gs-navi ul li {
		position: relative;
	}
	#gs-navi ul li:before {
		font-family: "Font Awesome 5 Free";
		content: "\f0d7";
		font-weight: 900;
		position: absolute;
		left: 10px;
		top: 50%;
		transform: translateY(-50%);
		color: #FFFFFF;
	}
	#gs-navi .hover.color-change {
		text-align: center;
	}
	#gs-navi .hover.color-change a {
		display: inline-block;
		text-align: center;
		font-size:1.8rem;
		width: 250px;
		padding: 0.1em 0;
		color:#FFFFFF;
		background-color: #1a3222;
		border-radius: 3px;
		}
	#gs-navi .hover.color-change a.hovering {
		color:#FFFFFF;
		background-color: #819387;
		}
	#gs-navi .hover.color-change i {
		margin-right:0.5em;
	}

	/*------ contents ------*/
	article {
		margin-bottom: 12em;
	}
	
	.gs-detail .horizon,
	.subject .horizon {
		justify-content: space-between;
	}

	/* ROOM */
	.room .column .col-inner {
		width:100%;
	}

	.room .column .col-inner p {
		text-align: center;
	}
	
	.room .column .col-inner ul.photo li,
	.room .column .col-inner ul.photo img {
		width: 530px;
		height: 300px;
	}

	.ttlarea {
		position: relative;
	 }
	.ttlarea .icon {
		display: block;
		width: 120px;
		height: 70px;
		position: absolute;
		top: 50%;
		right: 1%;
		transform: translateY(-50%);
		font-size: 1.3rem;
		line-height: 1.4;
		font-weight: 600;
		/* text-align: center; */
		color: #B9865A;
		background-color: #EBE2D2;
		border-radius: 5px;
		display: flex;
		align-items: center;
		justify-content: center;
	 }
	
	/* RELAXATION */
	.relaxation .column .col-inner {
		width: 340px;
	}
	.relaxation .column .col-inner .photo,
	.relaxation .column .photo img {
		width: 340px;
		height: 240px;
	}
	
	.relaxation .column .col-inner p {
		min-height: 125px;
	}

	/* GOURMET */
	.gourmet .column .col-inner {
		width:510px;
	}

	.gourmet .column p {
		min-height: 100px;
	}

	.gourmet .column ul.photo li,
	.gourmet .column ul.photo li img {
		width: 250px;
		height: 175px;
	}
	
	/* ACTIVITY */
	.activity .column .photo.pool,
	.activity .column .photo.pool img {
		width: 100%;
		height: 390px;
	}

	.activity ul.photo {
		margin-top: 1em !important;
	}
	.activity .column ul.photo li,
	.activity .column ul.photo li img {
		width: 530px;
		height: 300px;
	}
	.activity .column ul.photo li:nth-child(n+3) {
		margin-top:1em;
	}

	/*------ popup ------*/

	/* 詳細 */
	.subject ul.photo li {
		width: 49.5%;
		height: 300px;
	}
	.subject ul.photo img {
		width: 100%;
		height: 300px;
	}

}

/* ===============================
	Mobile Style
=============================== */
@media screen and (max-width: 767px) {
	
	/*------ main-visual ------*/
	
	#main-visual {
		background: url("/images/fee/golf-stay/main-visual_sp.jpg") no-repeat;
		background-size: cover;
		background-position: center;
	}
	
	/*------ contents ------*/

	/* エリアマップボタン */
	.maplink a {
		width: 90%;
		font-size: 1.8rem;
		line-height: 1.6;
		padding: 1.5rem 0;
		margin: 0 auto 5rem;
	}
	.maplink a:before, 
	.maplink a:after { 
		width: 15px;
		/* height: 70%; */
	}
	.maplink a:before {
		left: 3%;
	}
	.maplink a:after {
		right: 3%;
	}

	.gs-detail:first-of-type {
		margin-top:3em;
	}

	.column .horizon {
		display: block;
		width:100%;
	}
	
	.column .col-inner {
		width:100%;
	}
	.column .col-inner:not(:last-of-type) {
		margin-bottom:2em;
	}

	.column .photo {
		margin-top:1rem;
	}
	.column .photo img {
		width:100%;
		height:55vw;
	}

	.column ul.photo li:not(:first-of-type) {
		margin-top:1rem;
	}

	.gs-detail h5 {
		font-size: 1.8rem;
		line-height: 1.6;
		padding: 1rem 0;
		margin-bottom: 1.5rem;
	}
	.gs-detail h5 span {
		font-size: 1.3rem;
	}
	
	/* ROOM */
	.room .col-inner:not(:first-of-type) {
		margin-top: 4.5rem;
	}
	
	.room .color-change {
		margin-top:2rem;
	}
	.room .color-change a {
		width:90%;
	}
	
	.ttlarea .icon {
		width:85%;
		font-size: 1.3rem;
		font-weight: 600;
		text-align: center;
		color: #B9865A;
		background-color: #EBE2D2;
		border-radius: 3px;
		padding: 0.2rem 0;
		margin: 0 auto 1rem;
	 }	
	
	/* 料金 */
	.sec-price:not(:first-of-type) {
		margin-top: 3.5em;
	}
	
	.sec-price .dl-pdf {
		margin-bottom: 2em;
	}
	
	#accordion .ac-sec:not(:last-of-type) {
		margin-bottom:1.5rem;
	}
	
	.accordion-container .accordion-title {
		padding: 1.5rem 2rem;
	}
	.accordion-container .accordion-title::before,
	.accordion-container .accordion-title::after {
		right: 4%;
		width: 10px;
	}

	.accordion-container .accordion-title .ttl {
		font-size: 1.4rem;
	}
	
	.accordion-content {
		padding: 2rem;
	}

	/* 予約ボタン */
	.btn-reserv {
		width:90%;
		padding: 2px;
		margin: 5em auto 0;
	}
	.btn-reserv a {
		padding:7vw 0;
		font-size:1.6rem;
	}

	/*------ popup ------*/

	/* base */
	.mfp-with-anim .subject {
		width: 95%;
		margin: 3rem auto;
	}
	.mfp-with-anim .subject .inner {
		padding: 2rem 2rem 6rem;
	}

	.closeButton01 {
		top: 2%;
		right: 4%;
	}
	.closeButton01 span {
		width: 7vw;
		height: 7vw;
	}
	.closeButton01 span::before, 
	.closeButton01 span::after {
		width: 2px;
		height: 6vw;
	  } 
	
	.closeButton02 {
		width: 80%;
		height: 10vw;
		font-size: 1.4rem;
		line-height: 10vw;
	}

	/* 詳細 */
	.subject .topimage,
	.subject .topimage img {
		height: 36vw;
	}

	.subject h5 {
		font-size: 1.8rem;
		line-height: 1.4;
		padding: 2rem 0;
		margin-bottom:2rem;
	}
	/* .subject h5 span {
		font-size: 1.3rem;
	} */
	.subject h5:before, 
	.subject h5:after { 
		width: 15px;
		height: 80%;
	}
	.subject h5:before {
		left: 7%;
	}
	.subject h5:after {
		right: 7%;
	}
	#room03 .subject h5:before {
		left: 0;
	  }
	#room03 .subject h5:after {
		right: 0;
	  }
	
	.subject p.intro {
		font-size: 1.3rem;
		text-align: left;
		margin: 2rem 0;
	}

	.subject ul.photo li,
	.subject ul.photo img {
		width: 100%;
		height: 40vw;
	}
	ul.photo li.planview img {
		width: 80%;
	}
	.subject ul.photo li:first-of-type {
		margin-bottom: 2px;
	}


	ul.detail {
		margin: 3rem 0 5rem;
	}
	ul.detail li.title {
		font-size:1.4rem;
		border-left: 10px solid #829889;
		padding-left: 1.5rem;
		margin-bottom: 1.5rem;
	}
	ul.detail li.title:not(:first-of-type) {
		margin-top: 1.5rem;
	}

	.subject hr {
		width: 90%;
		margin: 0 auto 5rem;
	}
				
}

/* ===============================
	Mobile Style
=============================== */
@media screen and (max-width: 480px) {
	
	.sp2 { display: block !important; }
		
}