@charset "utf-8";


.header_imgWrapper {
	width: 100%;
	height: 600px;
	background: url(../images/about/about_header_img.webp) no-repeat center;
	background-size: cover;

}

.header_txtWrapper {
	width: 100%;
	background: url(../images/global/bg_grange.webp) no-repeat center;
	background-size: cover;
	padding: 10% 0;
	color: #fff;
	text-align: center;
	position: relative;

	h2:before {
		content: "ABOUT OZMAN";
		font-size: 10rem;
		position: absolute;
		opacity: .3;
		font-family: "PT Sans", sans-serif;
		font-weight: 200;
		top: 0;
		left: 0;
		right: 0;
		margin: auto;
		line-height: .7;
		letter-spacing: .05em;
	}

}

main h4 {
	font-size: 1.8rem;
	letter-spacing: 0;
}


#sec_garden {
	padding: 0 0 20% 0;
	position: relative;

	.cont_box {
		margin: -90px 0 0;
		z-index: 1;
		position: relative;

		figure {
			margin-right: 5%;
		}

	}

	.txt_box.left {
		padding: 4% 2% 4% 13%;
	}

	.txt_box::after {
		background: url(/images/about/about_no01.svg) no-repeat center;
		background-size: contain;
		border: none;
		transform: none;
		width: 36%;
		height: 13vw;
		right: -9%;
		bottom: -12%;
	}

	.img01 {
		position: absolute;
		top: -10%;
		right: 0;
		z-index: 1;
		width: 20%;
	}

	.img02 {
		position: absolute;
		left: 15%;
		bottom: 0;
		width: 22%;
	}

	.img03 {
		position: absolute;
		left: 5%;
		top: 16%;
		z-index: 2;
		width: 10%;
	}

	.img04 {
		position: absolute;
		left: 60%;
		bottom: 20%;
		z-index: 2;
		max-width: 70px;
		width: 6%;
	}

}

#sec_cafe {
	padding: 5% 0 0;
	position: relative;

	.cont_box {
		margin-left: 5%;

		figure {
			width: 60%;
		}
	}

	.txt_box.right {
		padding: 4% 9% 3% 4%;
		margin-top: 5%;
		margin-bottom: 5%;
		margin-left: -13%;
	}

	.txt_box::after {
		background: url(/images/about/about_no02.svg) no-repeat center;
		background-size: contain;
		border: none;
		transform: none;
		width: 36%;
		height: 13vw;
		right: -9%;
		bottom: -12%;
	}

	.img01 {
		position: absolute;
		top: -30%;
		right: 0;
		z-index: 2;
		width: 20%;
	}

	.img02 {
		position: absolute;
		right: 10%;
		top: -15%;
		width: 25%;
	}

	.img03 {
		position: absolute;
		left: 5%;
		bottom: -19%;
		width: 13%;
	}
}

#sec_dogrun {
	padding: 5% 0 0;
	position: relative;

	figure {
		width: 44%;
		margin-right: 10%;
	}

	.txt_box.left {
		margin-right: -5%;
		margin-top: 7%;
		padding: 4% 4% 6% 9%;
	}

	.txt_box::after {
		background: url(/images/about/about_no03.svg) no-repeat center;
		background-size: contain;
		border: none;
		transform: none;
		width: 36%;
		height: 11vw;
		right: -10%;
		bottom: -13%;
	}

}

#sec_shop {
	padding: 5% 0 0;
	position: relative;

	.cont_box {
		margin-left: 8%;
	}

	figure {
		width: 50%;
	}

	.txt_box.right {
		margin-left: -15%;
	}

	.txt_box::after {
		background: url(/images/about/about_no04.svg) no-repeat center;
		background-size: contain;
		border: none;
		transform: none;
		width: 30%;
		height: 11vw;
		right: -8%;
		bottom: -17%;
	}

	.img01 {
		position: absolute;
		top: 5%;
		right: 22%;
		width: 22%;
	}

	.img02 {
		position: absolute;
		right: 5%;
		top: 10%;
		width: 15%;
	}
}

#sec_space {
	padding: 10% 0 10%;
	position: relative;

	dl {
		display: flex;
		text-align: left;

		dt {
			width: 60%;
			padding-right: 5%;
			border-right: 1px solid #000;
		}

		dd {
			padding-left: 5%;
			position: relative;

			figure {
				position: absolute;
				width: 60px;
				height: 60px;
				right: -40%;
				bottom: 41%;
			}
		}
	}

	.txt_box::after {
		background: url(/images/about/about_no05.svg) no-repeat center;
		background-size: contain;
		border: none;
		transform: none;
		width: 24%;
		height: 15vw;
		right: -4%;
		bottom: -21%;
	}

}

#sec_access {
	height: auto;
	background-image: url(../images/about/access_bg.webp);
	background-color: rgba(0, 0, 0, 0.6);
	background-blend-mode: overlay;
	margin: auto;

	h3 {
		color: #fff;
		text-align: center;

	}

	.inner {
		max-width: 1200px;
		padding: 5%;
		margin: auto;
	}

	.cont_box {
		display: flex;
		color: #fff;

		ul {
			width: 100%;
			margin-right: 5%;

			li:not(:last-of-type) {
				border-bottom: 1px dotted #fff;
			}
		}
	}
}

/* 1024px以下 */

@media screen and (max-width: 1024px) {

	main h4 {
		font-size: 1.6rem;
	}

	.txt_box.left .cont_title {
		font-size: 3rem;
	}

}

/* 768px以下 */

@media screen and (max-width: 768px) {

	.header_txtWrapper {
		padding: 20% 5%;
	}

	#sec_garden {

		.cont_box {
			margin: auto;
		}

		.txt_box.left {
			padding: 4% 4% 12% 29%;
		}

		.txt_box::after {
			width: 20%;
			height: 18vw;
			right: 0;
			bottom: -8%;
		}

		.img01 {
			width: 30%;
		}

		.img02 {
			left: 6%;
			bottom: -7%;
			width: 36%;
		}

		.img03 {
			left: 0%;
			top: -3%;
			width: 25%;
		}

		.img04 {
			left: auto;
			right: 34%;
			bottom: -5%;
			width: 11%;
		}
	}

	#sec_cafe {
		padding: 70% 0 0;

		.cont_box {
			margin: auto;

			figure {
				width: 100%;
			}
		}

		.txt_box.right {
			padding: 4% 15% 12% 4%;
			margin: auto;
		}

		.txt_box::after {
			width: 20%;
			height: 18vw;
			right: 0;
			bottom: -8%;
		}

		.img01 {
			top: 10%;
			right: 0;
			width: 40%;
		}

		.img02 {
			right: 26%;
			top: 16%;
			width: 50%;
		}

		.img03 {
			width: 33%;
			bottom: -11%;

		}

	}

	#sec_dogrun {
		padding: 35% 0 0;

		figure {
			width: 100%;
		}

		.txt_box.left {
			margin-right: -5%;
			margin: auto;
			padding: 4% 4% 12% 17%;
		}

		.txt_box::after {
			width: 20%;
			height: 18vw;
			right: 0;
			bottom: -8%;
		}

	}

	#sec_shop {
		padding: 50% 0 0;

		.cont_box {
			margin: auto;
		}

		figure {
			width: 100%;
		}

		.txt_box.right {
			margin-left: auto;
			padding: 4% 13% 12% 6%
		}

		.txt_box::after {
			width: 20%;
			height: 18vw;
			right: 0;
			bottom: -8%;
		}

		.img01 {
			top: 5%;
			right: auto;
			width: 45%;
			left: 10%;
		}

		.img02 {
			right: 9%;
			top: 12%;
			width: 31%;
		}
	}

	#sec_space {
		padding: 20% 0;

		.cont_box.cn {
			width: 100%;
		}

		.txt_box.center {
			padding: 4%;
			width: 100%;
			margin: auto;
		}

		.txt_box::after {
			width: 20%;
			height: 18vw;
			right: 0;
			bottom: -8%;
		}

		dl {
			flex-direction: column;

			dt {
				margin: auto;
				width: 100%;
				border-bottom: 1px solid #000;
				border-right: none;
				padding: 0 0 6%;
			}

			dd {
				padding: 6% 0 0;
				width: 100%;
				margin: auto;

				figure {
					right: 0;
					bottom: 43%;
				}
			}

		}
	}

	#sec_access {
		.inner {
			padding: 10% 0;
		}


		ul {
			margin: 0 0 5%;

			li {
				font-size: 16px;
			}
		}

	}



}