@charset "utf-8";
.ttl {
	color: #7B5700;
}
/* PC ================================================== */
@media all and (min-width:960px){
#gallery {
	width: 100%;
	height: auto;
	padding: 230px 0px 0px;
	background-color: #FAF9F2;
}
	.gallery--inner {
		width: 100%;
		margin: auto auto;
	}
		.gallery-main {
			width: 100%;
			margin: auto auto auto 0;
			padding: 0 0 70px;
		}
		.container {
			width:100%;
			max-width: 1200px;
			margin:0 auto;
			position: relative;
		}
		.top-ttl {
			display: block;
			width: 100%;
			font-size: 28px;
			text-align: center;
			margin: 0px auto 40px;
		}
		.top-visual {
			width: 100%;
			max-width: 1200px;
			margin: 0 auto;
		}
		.txt01-area {
			font-size: 14px;
			margin: 80px auto;
			line-height: 3.5;
			letter-spacing: 0.2em;
			-ms-writing-mode: tb-rl;
			writing-mode: vertical-rl;
		}
			.txt01-area img {
				width: 50px;
				height: auto;
				margin: 0 0 0 50px;
			}
		.container {
			width:90%;
			max-width: 1200px;
			margin:70px auto;
		}
		.container02 {
			width:90%;
			max-width: 1200px;
			margin:70px auto;
			position: relative;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.container03 {
			width:90%;
			max-width: 1200px;
			margin:70px auto 220px;
			position: relative;
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-direction: row-reverse;
		}
		.visual {
			width: 60%;
			width: 700px;
			height: auto;
		}
		.copy-div {
			width: 40%;
			padding-left: 50px;
		}
		.rev {
			padding-left: 50px;
			padding-right: 50px;
		}
		.copy-ttl {
			font-size: 20px;
			margin-bottom: 20px;
		}
		.container04 {
			width:90%;
			max-width: 1200px;
			margin:0px auto;
		}
		.container-inner {
			
		}
		.gallery--top {
			width: 100%;
			margin: 0 auto;
		}
			.container-div {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 20px auto;
			}
			.gallery--center {
				width: calc(50% - 10px);
			}
				/* .gallery--center:first-child {
					margin-right: 20px;
				} */
			.gallery-txt-area {
				font-size: 20px;
				text-align: center;
				margin: 50px auto;
			}
	
		.gallery01 {
			width: 100%;
			margin: 0 auto;
		}
			.gallery-img-a {
				width: 100%;
			}
			.gallery-img-a img {
				width: 100%;
			}
			.gallery-img-b {
				width: 100%;
				margin: 10px 0 0;
			}
			.gallery-img-b img {
				width: 100%;
			}
}

/* Tablet ================================================== */
@media all and (min-width:560px) and (max-width:959px){
	.header-logo {
		background-color: #fff;
	}
	#gallery {
		width: 100%;
		height: auto;
		padding: 100px 0px 70px;
		background-color: #FAF9F2;
	}
		.gallery--inner {
			width: 100%;
			margin: auto auto;
		}
			.gallery-main {
				width: 100%;
				margin: auto auto auto 0;
			}
			.container {
				width:100%;
				margin:0 auto;
				position: relative;
				overflow: hidden;
			}
			.container02 {
				width:90%;
				margin:30px auto;
				position: relative;
				/* display: flex;
				justify-content: space-between;
				align-items: center; */
			}
			.container03 {
				width:90%;
				margin:30px auto 0px;
				position: relative;
				/* display: flex;
				justify-content: space-between;
				align-items: center;
				flex-direction: row-reverse; */
			}
			.top-ttl {
				display: block;
				width: 100%;
				font-size: 26px;
				text-align: center;
				margin: 20px auto 20px;
			}
			.top-visual {
				width: 100%;
				margin: 0 auto;
			}
			.txt01-area {
				width: 60%;
				font-size: 16px;
				margin: 80px auto;
				line-height: 2.2;
				letter-spacing: 0.075em;
				position: relative;
				/* -ms-writing-mode: tb-rl;
				writing-mode: vertical-rl; */
			}
				.txt01-area img {
					width: 60px;
					height: auto;
					position: absolute;
					top: 0px;
					right: 0;
				}
				.visual {
					width: 100%;
					height: auto;
				}
				.copy-div {
					width: 100%;
					font-size: 14px;
				}
				.copy-ttl {
					font-size: 16px;
					margin-top: 20px;
					margin-bottom: 20px;
				}

				.container04 {
					width:90%;
					margin:120px auto 50px;
				}
			
				.gallery--top {
					width: 100%;
					margin: 0 auto;
				}
					.container-div {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin: 10px auto;
					}
					.gallery--center {
						width: calc(50% - 5px);
					}
					.gallery-txt-area {
						font-size: 16px;
						text-align: left;
						margin: 50px auto;
					}
					.gallery01 {
						width: 100%;
						margin: 0 auto;
					}
						.gallery-img-a {
							width: 100%;
						}
						.gallery-img-a img {
							width: 100%;
						}
						.gallery-img-b {
							width: 100%;
							margin: 6px 0 0;
						}
						.gallery-img-b img {
							width: 100%;
						}
	
}

/* SP ================================================== */
@media all and (max-width:559px){
	.header-logo {
		background-color: #fff;
	}
	#gallery {
		width: 100%;
		height: auto;
		padding: 100px 0px 70px;
		background-color: #FAF9F2;
	}
		.gallery--inner {
			width: 100%;
			margin: auto auto;
		}
			.gallery-main {
				width: 100%;
				margin: auto auto auto 0;
			}
			.container {
				width:100%;
				margin:0 auto;
				position: relative;
				overflow: hidden;
			}
			.container02 {
				width:90%;
				margin: 30px auto;
				position: relative;
				/* display: flex;
				justify-content: space-between;
				align-items: center; */
			}
			.container03 {
				width: 90%;
				margin:30px auto 0px;
				position: relative;
				/* display: flex;
				justify-content: space-between;
				align-items: center;
				flex-direction: row-reverse; */
			}
			.top-ttl {
				display: block;
				width: 100%;
				font-size: 24px;
				text-align: center;
				margin: 20px auto 20px;
			}
			.top-visual {
				width: 100%;
				margin: 0 auto;
			}
			.txt01-area {
				width: 90%;
				font-size: 14px;
				margin: 80px auto;
				line-height: 2.2;
				letter-spacing: 0.075em;
				position: relative;
				/* -ms-writing-mode: tb-rl;
				writing-mode: vertical-rl; */
			}
				.txt01-area img {
					width: 50px;
					height: auto;
					position: absolute;
					top: 0px;
					right: 0;
				}
				.visual {
					width: 100%;
					height: auto;
				}
				.copy-div {
					width: 100%;
					font-size: 14px;
				}
				.copy-ttl {
					font-size: 15px;
					margin-top: 20px;
					margin-bottom: 20px;
				}

				.container04 {
					width:90%;
					margin:120px auto 50px;
				}
			
				.gallery--top {
					width: 100%;
					margin: 0 auto;
				}
					.container-div {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin: 10px auto;
					}
					.gallery--center {
						width: calc(50% - 5px);
					}
					.gallery-txt-area {
						font-size: 14px;
						text-align: left;
						margin: 50px auto;
					}
					.gallery01 {
						width: 100%;
						margin: 0 auto;
					}
						.gallery-img-a {
							width: 100%;
						}
						.gallery-img-a img {
							width: 100%;
						}
						.gallery-img-b {
							width: 100%;
							margin: 5px 0 0;
						}
						.gallery-img-b img {
							width: 100%;
						}

}