@charset "utf-8";
/* CSS Document */
.contents .r_intoro {
	width: 100%;
	height: 50vh;
	object-fit: cover;
}
.intoro {
	width: 60%;
	margin: 5% auto;
	line-height: 2em;
}
.container img {
	max-width: 100%;
	height: auto;
}
.container {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(3, 1fr);
}
.img01 {
	grid-column: 1/3;
	grid-row: 1;
	z-index: 0;
}
.r_01 {
	grid-column: 3/5;
	grid-row: 1;
}
.img02 {
	grid-column: 3/5;
	grid-row: 2;
	z-index: 0;
}
.r_02 {
	grid-column: 1/3;
	grid-row: 2;
}
.img03 {
	grid-column: 1/3;
	grid-row: 3;
	z-index: 0;
}
.r_03 {
	grid-column: 3/5;
	grid-row: 3;
}
h3 {
	margin:0 4% 10%;
	text-align: center;
	font-size: 170%;
	font-family: 'Noto Serif JP';
	font-weight: normal;
	color: #fff/*linear-gradient(to right, #000 45%, #D3C299)*/;
}
h3 span {
	font-family: 'Cormorant Garamond','century';
	font-size: 130%;
	font-weight: bold;
}
.r_02 h3 {
	color: #1E1908;
}
.r_01, .r_02, .r_03 {
	padding: 13% 0 0;
}
.r_01, .r_03 {
	background-color: #3D3838;
	color: #fff;
}
.r_02 {
	background-color: #fff;
}
.r_01 p, .r_02 p, .r_03 p {
	margin: 0 12% 4%;
	padding: 0 2%;
	/*border-left: #7A6F57 solid 1px;
	border-right: #7A6F57 solid 1px;*/
	line-height: 2em;
}

@media only screen and (max-width: 1240px) {
	h3 {
		margin:12% 4% 10%;
		text-align: center;
		font-size: 130%;
	}
	h3 span {
		font-size: 110%;
		font-weight: bold;
	}
	.r_01 p, .r_02 p, .r_03 p {
		margin: 0 6%;
	}
	.r_01, .r_02, .r_03 {
	padding: 0% 0 1%;
	}
}
@media only screen and (max-width: 1145px) {
	h3 {
		margin:8% 4%;
	}
	.r_01, .r_02, .r_03 {
	padding: 0 0 1%;
	}
}
@media only screen and (max-width: 1030px) {
	h3 {
		margin:4%;
		text-align: center;
		font-size: 130%;
	}
	.r_01, .r_02, .r_03 {
	padding: 0;
	}
	.r_01 p, .r_02 p, .r_03 p {
		border: none;
		margin: 0 2%;
	}
}
@media only screen and (max-width: 940px) {
	.img01 {
		max-width: 100%;
		grid-column: 1/3;
		grid-row: 1;
	}
	.r_01 {
		grid-column: 2/5;
		grid-row: 1;
		z-index: 1;
	}
	.img02 {
		grid-column: 3/5;
		grid-row: 2;
		max-width: 100%;
	}
	.r_02 {
		grid-column: 1/4;
		grid-row: 2;
		z-index: 1;
	}
	.img03 {
		max-width: 100%;
		grid-column: 1/3;
		grid-row: 3;
		z-index: 0;
	}
	.r_03 {
		grid-column: 2/5;
		grid-row: 3;
		z-index: 1;
	}
}
@media only screen and (max-width: 835px) {
	.container {
		display: grid;
		grid-template-columns: repeat(6, 1fr);
		grid-template-rows: repeat(3, 1fr);
	}
	.img01 {
		max-width: 100%;
		grid-column: 1/5;
		grid-row: 1;
	}
	.r_01 {
		grid-column: 2/7;
		grid-row: 1;
		z-index: 1;
	}
	.img02 {
		grid-column: 3/7;
		grid-row: 2;
		max-width: 100%;
	}
	.r_02 {
		grid-column: 1/6;
		grid-row: 2;
		z-index: 1;
	}
	.img03 {
		max-width: 100%;
		grid-column: 1/5;
		grid-row: 3;
		z-index: 0;
	}
	.r_03 {
		grid-column: 2/7;
		grid-row: 3;
		z-index: 1;
	}
	h3 {
		margin: 8% 4%;
	}
}
@media only screen and (max-width: 710px) {
	.intoro {
		width: 75%;
		margin: 5% auto;
		line-height: 2em;
	}	
	h3 {
		margin:4%;
	}
}
@media only screen and (max-width: 660px) {
	.intoro {
		width: 80%;
	}	
	.container {
		display: block;
	}
	.container img {
		max-width: 100%;
		height: 30vh;
		object-fit: cover;
	}
	.r_01, .r_02, .r_03 {
		margin-bottom:6%;
	}
	.r_01 p, .r_02 p, .r_03 p {
		width: 80%;
		margin: 0 auto;
	}
	h3 {
		margin: 6% auto;
	}
	.r_01, .r_03 {
		background-color: #fff;
		color: #1E1908;
	}
	.r_01 h3, .r_03 h3 {
		color: #1E1908;
	}
}