@charset "UTF-8";

/* ギャラリー
======================================================*/
.title_wrap{
	background: url(../img/gallery/title_bg_pc.jpg) no-repeat center/cover;
}
.full{
	margin-bottom: 60px;
}
.layout_01.photo_wrap{
	background: url(../../../common/img/bg_02.png) no-repeat left 10%/625px;
	margin-bottom: 100px;
}
.photo_wrap{
	max-width: 2050px;
	margin: 0 auto;
}
	.photo_wrap > div:not(:last-of-type){
		margin-bottom: 75px;
	}
	.photo_wrap > div:nth-of-type(1){
		width: 67%;
		padding-bottom: 50px;
		margin-left: auto;
		position: relative;
		z-index: 1;
	}
	.photo_wrap > div:nth-of-type(1)::before{
		content: "";
		background: url(../../../common/img/bg_red.png) repeat center/130px;
		height: calc(100% - 50px);
		width: 100%;
		position: absolute;
		left: -50px;
		bottom: 0;
		z-index: -1;
	}
	.photo_wrap > div:nth-of-type(2){
		width: 60%;
		padding-left: 10%;
	}
	.photo_wrap > div:nth-of-type(3){
		position: relative;
	}
	.photo_wrap > div:nth-of-type(3) img{
		width: 30%;
		position: absolute;
		right: 0;
		bottom: -70px;
	}
	.photo_wrap > div:nth-of-type(4){
		width: 65%;
		margin-right: auto;
		text-align: right;
	}
	.photo_wrap > div:nth-of-type(4) img{
		width: 57%;
	}

.layout_02{
	position: relative;
}
.layout_02::after{
	content: "";
	background: url(../../../common/img/bg_01.png) no-repeat center/contain;
	width: 625px;
	height: 417px;
	position: absolute;
	top: 10%;
	right: 0;
}
.layout_02 .photo_01{
	width: 67%;
	padding-bottom: 50px;
	margin: 0 auto 75px 0;
	position: relative;
	z-index: 1;
}
	.layout_02 .photo_01::before{
		content: "";
		background: url(../../../common/img/bg_red.png) repeat center/130px;
		height: calc(100% - 50px);
		width: 100%;
		position: absolute;
		right: -50px;
		bottom: 0;
		z-index: -1;
	}

.layout_02 .flex_box{
	display: flex;
	width: calc(100% - (50% - 500px));
	padding: 0;
	margin: 0 0 60px auto;
	padding-left: 15px;
}
.layout_02 .title_02{
	margin-bottom: 20px;
}
	.layout_02 .list:first-of-type{
		margin-bottom: 45px;
	}
	.layout_02 .list li{
		text-indent: -1.5em;
		padding-left: 1.5em;
	}
	.layout_02 .list li:not(:last-child){
		margin-bottom: 15px;
	}
	.layout_02 .list li::before{
		content: "■";
		color: #781C24;
		margin-right: .5em;
	}
	.layout_02 .flex_box .txt_area{
		flex-shrink: 0;
		width: 335px;
		margin-right: 60px;
	}
	.layout_02 .inner_wrap{
		width: calc(100% - (50% - 500px));
		margin: 0 0 100px auto;
	}
	.layout_02 .inner_wrap > div{
		width: calc(100% - 395px);
	}
	.layout_02 .inner_wrap > div:nth-of-type(1){
		margin: 0 0 75px auto;
	}

#area03.layout_01.photo_wrap{
	background: none;
	position: relative;
	z-index: 1;
}
	#area03.layout_01.photo_wrap::before{
		content: "";
		background: url(../../../common/img/bg_01.png) no-repeat right 10%/contain;
		width: 625px;
		height: 417px;
		position: absolute;
		right: 0;
		bottom: -200px;
		z-index: -1;
	}
	#area03.photo_wrap > div:nth-of-type(3){
		width: 100%;
		margin: 0 auto;
	}
	#area03.photo_wrap > div:nth-of-type(3) img{
		width: 23%;
		position: absolute;
		margin-left: calc(68% + 50px);
		right: 90px;
		bottom: -20px;
	}
	#area03.photo_wrap > div:nth-of-type(4){
		width: 68%;
	}
#area04.layout_02{
	z-index: 1;
}
	#area04.layout_02::before{
		content: "";
		background: url(../../../common/img/bg_02.png) no-repeat center/contain;
		width: 625px;
    height: 417px;
		position: absolute;
		top: 30%;
		left: 0;
		z-index: -1;
	}
	#area04.layout_02::after{
		background: url(../../../common/img/bg_01.png) no-repeat center/contain;
		top: 60%;
		right: -100px;
		z-index: -1;
	}
	#area04.layout_02 .inner_wrap{
		width: 100%;
		margin: 0;
	}
	#area04.layout_02 .inner_wrap div:nth-of-type(1){
		width: 55%;
	}
	#area04.layout_02 .inner_wrap div:nth-of-type(2){
		width: 23%;
		margin: -12vw calc(55% + 80px) 100px auto;
	}
	#area04.layout_02 .inner_wrap div:nth-of-type(3){
		width: 60%;
		margin: 0 0 70px;
	}
	#area04.layout_02 .inner_wrap div:nth-of-type(4){
		width: calc(100% - (50% - 500px));
		margin: 0 auto;
	}
	#area04.layout_02 .inner_wrap div:nth-of-type(4) > div{
		margin-left: auto;
	}


/* ▼▼▼ 480px〜768px
======================================================*/
@media screen and (max-width: 768px) {
	.title_wrap{
		background: url(../img/gallery/title_bg_sp.jpg) no-repeat center/cover;
	}
	.full,
	.layout_01.photo_wrap{
		margin-bottom: 40px;
		background: none;
	}

	.photo_wrap{
		max-width: 2050px;
		margin: 0 auto;
	}
		.photo_wrap > div:not(:last-of-type){
			margin-bottom: 40px;
		}
		.photo_wrap > div:nth-of-type(1){
			width: 95%;
			padding: 0 0 20px 20px;
			margin: 0 0 40px auto;
			left: 0;
		}
		.photo_wrap > div:nth-of-type(1)::before{
			height: calc(100% - 20px);
			width: calc(100% - 20px);
			left: 0;
		}
		.photo_wrap > div:nth-of-type(2){
			width: calc(100% - 60px);
			padding: 0;
			margin-right: auto;
		}
		.photo_wrap > div:nth-of-type(2) img{
			width: 100%;
		}
		.photo_wrap > div:nth-of-type(3){
			width: 55%;
			margin: 0 0 40px auto;
		}
		.photo_wrap > div:nth-of-type(3) img{
			width: 100%;
			position: static;
		}
		.photo_wrap > div:nth-of-type(4){
			width: 51%;
			margin: 0 0 0 60px;
		}
		.photo_wrap > div:nth-of-type(4) img{
			width: 100%;
		}

	.layout_02::after{
		display: none;
	}
	.layout_02 .photo_01{
		width: 95%;
		padding: 0 20px 20px 0;
		margin: 0 auto 40px 0;
		position: relative;
		z-index: 1;
	}
		.layout_02 .photo_01::before{
			height: calc(100% - 20px);
			width: calc(100% - 20px);
			right: 0;
		}
	.layout_02 .flex_box{
		display: block;
		width: 100%;
		padding: 0 20px;
		margin: 0 0 20px 0;
	}
	.layout_02 .title_02{
		margin-bottom: 20px;
	}
		.layout_02 .list{
			margin-bottom: 40px;
		}
		.layout_02 .list li{
			text-indent: -1.5em;
			padding-left: 1.5em;
		}
		.layout_02 .list li:not(:last-child){
			margin-bottom: 15px;
		}
		.layout_02 .list li::before{
			content: "■";
			color: #781C24;
			margin-right: .5em;
		}
		.layout_02 .flex_box .txt_area{
			width: 100%;
			margin-right: 0;
		}
		.layout_02 .inner_wrap{
			display: block;
			margin: 0 auto;
			width: 100%;
		}
		.layout_02 .inner_wrap > div{
			width: calc(100% - 60px);
			margin-bottom: 40px!important;
		}

	#area03.layout_01.photo_wrap{
		background: none;
		position: relative;
		z-index: 1;
	}
		#area03.layout_01.photo_wrap::before{
			content: "";
			background: none;
		}
		#area03.photo_wrap > div:nth-of-type(3){
			width: 100%;
			margin: 0 auto 40px;
			text-align: right;
		}
		#area03.photo_wrap > div:nth-of-type(3) img{
			width: 40%;
			position: static;
			margin: 0;
		}
		#area03.photo_wrap > div:nth-of-type(4){
			width: calc(60% - 16px);
			margin: -70px 0 0;
		}
	#area04.layout_02::before,
	#area04.layout_02::after{
		background: none;
	}
		#area04.layout_02 .inner_wrap{
			width: 100%;
			margin: 0;
		}
		#area04.layout_02 .inner_wrap div:nth-of-type(1){
			width: calc(100% - 60px);
		}
		#area04.layout_02 .inner_wrap div:nth-of-type(2){
			width: 50%;
			margin: 0 0 55px!important;
		}
		#area04.layout_02 .inner_wrap div:nth-of-type(3){
			width: calc(100% - 60px);
			margin: 0 0 40px;
		}
		#area04.layout_02 .inner_wrap div:nth-of-type(4){
			width: calc(100% - 60px);
			margin: 0 0 0 auto;
		}
		#area04.layout_02 .inner_wrap div:nth-of-type(4) > div{
			width: 100%;
		}

}