@charset "UTF-8";
/*===================================
top
===================================*/
/* .content_Wrap {
	margin-top: -118px;
} */

.notes_Wrap {
	color: #b7b08c;
}
.notes_Wrap.middle_notes {
	width: 100%;
	max-width: 100%;
}

.mv_Wrap {
	position: relative;
}
.mv_Wrap .mv_img {
	position: relative;
	overflow: hidden;
}
.mv_Wrap .mv_img.aos-animate img {
	transform-origin: 73%;
	animation-name: zoom;
	animation-delay: 0.3s;
	animation-duration: 5s;
	animation-timing-function: linear;
	animation-iteration-count: 1; /* 1回だけ実行 */
	animation-fill-mode: forwards; /* アニメーション終了後も最終状態を維持 */
}
@keyframes zoom {
	from {
		transform:scale(1.0);
	}
	to {
		transform:scale(1.12);
	}
}
/* .mv_Wrap .mv_txt {
	width: 65.33333333%;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: -33%;
} */

.mv_Wrap video {
	width: 100%;
	vertical-align: middle;
}

.content_Bg {
	background: url(../../common/img/bg.jpg) no-repeat center top / 100% 100%;
	color: #fff;
	/* padding: 19% 0 0; */
	padding: 4% 0 0;
}

.mv_txt {
	width: 65.33333333%;
	margin: 0 auto;
}

.facade_Wrap {
	padding: 80px 0 0;
}
.facade_Wrap figure {
	width: 80%;
	max-width: 430px;
	margin: 0 auto;
}
.facade_Wrap figure img {
	filter: blur(20px);
	transition-duration: 1.0s;
}
.facade_Wrap figure.aos-animate img {
	filter: none;
}

.teiki_Wrap {
	text-align: center;
	/* margin: 50px auto 80px; */
	margin: 100px auto 80px;
}
.teiki_Wrap h2 {
	font-size: 45px;
	font-weight: 400;
	letter-spacing: 0.12em;
	color: #b7b08c;
	/* border-bottom: 1px solid #b7b08c; */
	display: inline-block;
	width: fit-content;
	padding: 0 0 15px;
	position: relative;
}
.teiki_Wrap h2 span {
	position: relative;
}
.teiki_Wrap h2 span::before,
.teiki_Wrap h2 span::after{
	position: absolute;
	top: 50%;
	content: '';
	width: 3vw;
	height: 1px;
	background-color: #b7b08c;
}
.teiki_Wrap h2 span::before{
	right: 105%;
}
.teiki_Wrap h2 span::after{
	left: 105%;
}

.teiki_Wrap h2 .box1::after {
	content: "／";
	display: inline;
}
.teiki_Wrap .entry_Btn {
	margin: 30px auto 0;
}

.teiki_Wrap .teiki {
	max-width: 750px;
	width:90%;
	margin: 0 auto 4%;
}

.position_Wrap {
	color: #b7b08c;
	overflow: hidden;
}
.position_Wrap p {
	font-size: min(1.4vw,16px);
	line-height: 2;
	letter-spacing: 0.14em;
}
.position_Wrap p .kyori {
	font-size: 0.75em;
}

.concept_Area {
	text-align: center;
}
.concept_Area h3 {
	font-size: 28px;
	line-height: 1.76;
	letter-spacing: 0.1em;
	margin-bottom: 1.5em;
}
.position_Box1 {
	position: relative;
	padding: 50px 0 0;
}
.pos-img01 {
	position: absolute;
	width: 100%;
	top: 19%;
	left: 0;
}
.pos-img01.pc img {
	display: block;
	width: 47%;
	margin: 0 0 0 auto;
}
.pos-img01 .cap_Txt {
	position: absolute;
	/* left: 50%;
	transform: translateX(-50%); */
	right:5%;
	width: 47%;
	max-width: 1100px;
	bottom: -2.5em;

	text-align: right;
	color: #b7b08c;
	font-size: 14px;
}
.pos-img01 .cap_Txt span {
	font-size: 70%;
}
.pos-mapBox {
	position: relative;
	z-index: 2;
}
.pos-mapBox .pos-map {
	width: 43%;
	margin: 0 38% 0 auto;
}
.pos-mapBox .pos-plot {
	width: 15%;
	position: absolute;
	right: 43%;
	bottom: 51.5%;
	padding: 24% 0 0;
}
.position_Box2 {
	position: relative;
	margin: -7% 0 110px;
}
.pos-img02 img {
	display: block;
	width: 47%;
	margin: 0 auto 0 0;
}
.pos-img02 .cap_Txt {
	position: absolute;
	/* left: 50%;
	transform: translateX(-50%); */
	left:5%;
	width: 47%;
	max-width: 1100px;
	bottom: -2.5em;
	/* text-align: right; */

	font-size: 14px;
	color:#b7b08c;
}
.pos-img02 .cap_Txt span {
	font-size: 70%;
}
.position_Box2 .inner {
	position: absolute;
	left: 50%;
	/* transform: translateX(-50%); */
	bottom: 10%;
}
.pos-img02--capBox {
	bottom: auto;
	top: 0;
	aspect-ratio: 1100/368;
}
.pos-img02--cap {
	position: absolute;
	right: 0;
	padding-top: 10px;
	font-size: 9px;
	letter-spacing: 0.14em;
	color: #fff;
	height: 100%;
	box-sizing: border-box;
}

.location_Wrap .access {
	margin: 0 auto 30px;
}
.location_Wrap .map {
	margin: 100px auto 15px;
}


.movie_Wrap {
	margin: 80px auto 50px;
}
.movie_Wrap .movie_txt {
	color: #b7b08c;
	text-align: center;
	font-size: 28px;
	line-height: 1.76;
	letter-spacing: 0.15em;
	margin-bottom: 1.0em;
}
.movie_Wrap a {
	display: block;
	background: #fff;
}
.movie_Wrap a img {
	transition: .3s;
}
.movie_Wrap a:hover img {
	opacity: .7;
}
/*.modal {
    display: none;
    height: 100vh;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999;
}
.modal__bg {
    background: rgba(0, 0, 0, 0.8);
    height: 100vh;
    position: absolute;
    width: 100%;
}
.modal__content {
    left: 50%;
    padding: 0 40px;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 70%;
}
.modal__content a {
    position: absolute;
    top: 105%;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 15px;
    letter-spacing: 4px;
    border: solid 1px #fff;
    padding: 10px 20px 10px 25px;
}
.modal__content iframe {
    width: 100%;
    aspect-ratio: 16/9;
}*/


.brand_Wrap {
	margin: 60px auto 50px;
}
.brand_Wrap a {
	display: block;
	position: relative;
	aspect-ratio: 770/280;
	background: #000;
	color: #fff;
	overflow: hidden;
}
.brand_Wrap a::before {
	content: "";
	display: block;
	width: 100%;
	aspect-ratio: 770/280;
	background: url(../img/btn_brand_bg.jpg) center center / cover;
	position: absolute;
	top: 0;
	left: 0;
	transition: .3s;
}
.brand_Wrap a::after {
	content: "";
	display: block;
	width: 100%;
	aspect-ratio: 770/280;
	background: #000;
	opacity: .6;
	mix-blend-mode: multiply;
	z-index: 2;
	position: absolute;
	top: 0;
	left: 0;
	transition: .3s;
}
.brand_Wrap a .brand_LinkBtn--inner {
	height: 100%;
	position: relative;
	z-index: 3;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}
.brand_LinkBtn--inner .btn_ttl {
	font-size: min(2.4vw,30px);
	color: #b7b08c;
	letter-spacing: 0.38em;
	margin: 0 0 1.0em;
}
.brand_LinkBtn--inner .btn_copy {
	font-size: min(1.7vw,20px);
	letter-spacing: 0.1em;
	margin: 0 0 1.75em;
}
.brand_LinkBtn--inner .btn_more {
	width: fit-content;
	letter-spacing: 0.1em;
	padding: 0 2.0em 0.5em 0.5em;
	margin: 0 auto;
	position: relative;
	font-size: 18px;
}
.brand_LinkBtn--inner .btn_more::before {
	content: "";
	display: block;
	background: #fff;
	width: 100%;
	height: 1px;
	position: absolute;
	bottom: 0;
	left: 0;
}
.brand_LinkBtn--inner .btn_more::after {
	content: "";
	display: block;
	background: #fff;
	width: 30px;
	height: 1px;
	position: absolute;
	bottom: 0;
	right: 0;
	transform: rotate(50deg);
	transform-origin: right bottom;
}

.brand_Wrap a:hover::before {
	transform: scale(1.1);
}
.brand_Wrap a:hover::after {
	opacity: .3;
}


/*     tab
--------------------*/
@media screen and (min-width: 768px) and (max-width: 1024px){





}


/*     sp
--------------------*/
@media screen and (max-width: 767px) {

	.content_Wrap {
		margin-top: 0px;
	}

	/* .mv_Wrap .mv_txt {
		width: 75.46666667%;
		bottom: -42%;
		transform: translateX(-50%);
	} */
	/*.mv_Wrap .mv_txt img.sp {
		transform: translateZ(0);
		filter: drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 3px #fff);
	}*/
	.mv_Wrap .mv_txt img.sp.aos-animate {
		transform: translateZ(0);
		/* filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 3px #fff); */
	}

	.content_Bg {
		/* padding: 0; */
		padding: 30px 0 0;
	}
	.mv_Wrap .mv_txt {
		width: 75.46666667%;
	}

	.facade_Wrap {
		padding: 150px 0 0;
	}
	.facade_Wrap figure {
		width: 80%;
		max-width: 430px;
		margin: 0 auto;
	}
	.facade_Wrap figure img {
		filter: blur(20px);
		transition-duration: 1.0s;
	}
	.facade_Wrap figure.aos-animate img {
		filter: none;
	}

	.teiki_Wrap {
		margin: 0 auto 100px;
		/* padding: 300px 0 0; */
		/* padding: 50px 0 0; */
		/* padding: 110px 0 0; */
		padding: 20px 0 0;
	}
	.teiki_Wrap h2 {
		font-size: 34px;
		border-bottom: none;
		padding: 0;
		/* background: #fff; */
		width: 100%;
		padding: 25px 5%;
	}
	.teiki_Wrap h2 .box1::after {
		content: "";
		display: block;
		width: 100%;
		height: 1px;
		background: #b7b08c;
		margin: 15px 0;
	}
	.teiki_Wrap .entry_Btn {
		margin: 20px auto 0;
	}

	.teiki_Wrap .teiki {
		max-width: 100%;
		width:90%;
		margin: 0 auto;
	}

	.pos-img01 {
		position: relative;
		/* width: 100%; */
		width: 90%;
		margin-top: -100px;
		margin-bottom: 40px;
		margin-left: 10%;
		top: 0;
	}
	.pos-img01 .cap_Txt {
		width: 100%;
		box-sizing: border-box;
		padding: 0 5%;
		bottom: -1.5em;
		right: 0;
	}
	.position_Wrap p {
		font-size: 12px;
		line-height: 1.84615385;
		/* text-align: justify; */
	}
	.concept_Area h3 {
		font-size: 18px;
		line-height: 1.75982533;
		margin-bottom: 2.5em;
	}
	.position_Box1 {
		padding: 20px 0 0;
	}
	.pos-mapBox .pos-map {
		width: 90%;
		margin: 0 auto;
	}
	.pos-mapBox .pos-plot {
		width: 34%;
		right: 15%;
		bottom: 46%;
		padding: 0;
	}
	.position_Box2 {
		margin: 20px 0 40px;
	}
	.pos-img02 {
		width: 90%;
		margin: 0 10% 40px 0;
		position: relative;
	}
	.pos-img02 img {
		width: 100%;
		margin: 0;
	}
	.pos-img02 .cap_Txt {
		width: 100%;
		box-sizing: border-box;
		padding: 0 5%;
		/* text-align: right; */
		top: auto;
		bottom: -1.5em;
	}
	.position_Box2 .inner {
		position: static;
		transform: none;
	}

	.location_Wrap {
		width: 100%;
		max-width: 100%;
	}
	.location_Wrap .access {
		width: 90%;
		margin: 0 auto 30px;
	}
	.location_Wrap .map {
		margin: 40px 0 10px;
	}
	.location_Wrap .notes_Wrap {
		width: 90%;
		max-width: 90%;
	}

	.movie_Wrap {
		margin: 40px auto 0;
	}
	.movie_Wrap .movie_txt {
		font-size: 16px;
		margin-bottom: 1.0em;
	}
	/*.modal__content {
        padding: 0 0;
        width: 100%;
    }
    .modal__content video {
        width: 100%;
    }
    .modal__content a {
        top: -64px;
        left: auto;
        right: -5px;
        font-size: 50px;
        border: none;
        padding: 0;
        transform: none;
    }*/


	.brand_Wrap {
		width: 100%;
		max-width: 100%;
		margin: 20px auto 0;
	}
	.brand_Wrap a {
		aspect-ratio: 375/175;
	}
	.brand_Wrap a::before {
		aspect-ratio: 375/175;
	}
	.brand_Wrap a::after {
		aspect-ratio: 375/175;
	}
	.brand_LinkBtn--inner .btn_ttl {
		font-size: 18px;
	}
	.brand_LinkBtn--inner .btn_copy {
		font-size: 13px;
	}
	.brand_LinkBtn--inner .btn_more {
		font-size: 12px;
	}
	.brand_LinkBtn--inner .btn_more::after {
		width: 20px;
	}
	.brand_Wrap a:hover::before {
		transform: scale(1.0);
	}
	.brand_Wrap a:hover::after {
		opacity: .6;
	}


}