@charset "UTF-8";
/* CSS Document */



/****************************************************************************************************
contents
****************************************************************************************************/
#wrap {
	overflow: hidden;
	padding-top: 80px;
}



/****************************************************************************************************
contents
****************************************************************************************************/
#main {
	position: relative;
	padding: 192px 0 0 0;
	z-index: 2;
}
#main h1 {
	position: absolute;
	right: 64px;
	top: 128px;
	
}
#main figure {
	background: #000;
}
#main figure img {
	object-fit: cover;
	width: 100%;
	max-width: 1600px;
	height: 485px;
}

.sec-block {
	position: relative;
}
.flex-block,
.flex-block.pcOnly {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	text-align: left;
}
.img-box {
	position: relative;
	display: inline-block;
}
.img-box .cap-out {
	position: absolute;
	right: 0em;
	bottom: -1.5em;
	font-size: 0.666rem;
	line-height: 1.2;
}
.img-box .cap-out.full {
	right: 0.5em;
}
.img-box .cap-out.white {
	color: #FFF;
}
.img-box .cap-out.gold {
	color: #C8BB9B;
}
.img-box.img-full {
	display: block;
}
.img-full img {
	width: 100%;
	height: auto;
}
.cap {
	position: absolute;
	left: 1em;
	bottom: 1em;
	font-size: 0.666rem;
	line-height: 1.2;
}

#photo-collection-inner {
	padding: 160px 0 140px 0;
    background: URL(../img/plan/plan-bg.jpg) no-repeat center center;
    background-size: cover;
}
.pg-area {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-lines: multiple;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	gap: 30px;
	width: 1200px;
	margin: auto;
	margin-top: 74px;
	text-align: left;
}
.pg-block {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-lines: multiple;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	gap: 15px 30px;
}
.pg-box span {
	display:block;
	margin-top:10px;
	color:#333;
	font-size:13px;
	line-height: 1.6;
}
.pg-box a {
	text-decoration:none;
}
.pg-box img {
	object-fit: cover;
	width: 380px;
	height: 260px;
}
.pg-box.wide img {
	object-fit: cover;
	width: 790px;
	height: 460px;
}
.pg-box.height img {
	object-fit: cover;
	width: 380px;
	height: 460px;
}
.pg-box:nth-of-type(3) img {
	object-position: 50% 55%;
}
.pg-box:nth-of-type(4) img {
	object-position: 50% 70%;
}



@media screen and (max-width: 767px),
screen and (max-width: 960px) and (orientation: landscape) {
	
	
	
	/****************************************************************************************************
	contents
	****************************************************************************************************/
	#wrap {
		padding-top: 0;
	}
	
	/****************************************************************************************************
	contents
	****************************************************************************************************/
	#main {
		padding: 18.5vw 0 0 0;
	}
	#main h1 {
		width: 70vw;
		right: 4vw;
		top: 12vw;
		
	}
	#main figure img {
		max-width: initial;
		height: 38vw;
	}
	
	.flex-block.pcOnly {
		display: none;
	}
	.img-box .cap-out {
		font-size: 0.533rem;
	}
	
	#photo-collection-inner {
		padding: 18vw 4vw 10vw 4vw;
		background: URL(../img/plan/plan-bg.jpg) no-repeat center center;
		background-size: cover;
	}
	.pg-area {
		gap: 4vw 2vw;
		margin-top: 8vw;
		width: 100%;
	}
	.pg-block {
		gap: 7vw 2vw;
		width: 100%;
	}
	.pg-box {
		width: 45vw;
	}
	.pg-box span {
		display:block;
		margin-top:1vw;
	}
	.pg-box a {
		text-decoration:none;
	}
	.pg-box {
		width: 45vw;
		height: 45vw;
	}
	.pg-box.wide {
		width: 92vw;
		height: 60vw;
	}
	.pg-box img {
		object-fit: cover;
		width: 100%;
		height: 100%;
	}
	.pg-box.wide img {
		width: 100%;
		height: 100%;
	}
	.pg-box.height img {
		width: 100%;
		height: 100%;
	}
	.pg-box:nth-of-type(3) img {
		object-position: 50% 55%;
	}
	.pg-box:nth-of-type(4) img {
		object-position: 50% 70%;
	}
}

@media screen and (max-width: 960px) and (orientation: landscape) {
}