@charset "UTF-8";

/* +++++.main-visual+++++ */
.main-visual{
	position: relative;
	margin-bottom: 14rem;
}

.mv-slide{
	overflow: hidden;
}
.mv-slide .pic img{
	height: 100svh;
/*
	min-height: 48.611111vw;
*/
	min-height: 50rem;
}



/* +++++画像のオーバーレイ+++++ */
.mv-slide .pic:before{
	content: "";
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	width: 100%;
	height: 100%;
	z-index: 999;
}
.mv-slide .pic[data-slick-index="0"]:before{
	background: #791931;
	opacity: .3;
}
.mv-slide .pic[data-slick-index="1"]:before{
	background: #1F4B88;
	opacity: .4;
}
.mv-slide .pic[data-slick-index="2"]:before{
	background: #117469;
	opacity: .5;
}

.mv-slide .slick-current.pic01 picture{
	transform: scale(1.05);
	transform-origin: left center;

	animation-name: slideRl;
	animation-duration: 10s;
	animation-timing-function: linear;
	animation-delay: 0s;
	animation-direction: normal;
	animation-fill-mode: both;
}
.mv-slide .slick-current.pic02 picture{
	animation-name: zoomUp;
	animation-duration: 10s;
	animation-timing-function: linear;
	animation-delay: 0s;
	animation-direction: normal;
	animation-fill-mode: both;
}
.mv-slide .slick-current.pic03 picture{
	transform: scale(1.05);
	transform-origin: right bottom;


	animation-name: slideLr;
	animation-duration: 10s;
	animation-timing-function: linear;
	animation-delay: 0s;
	animation-direction: normal;
	animation-fill-mode: both;
}



/* ++++++MV text+++++ */
.mv-text{
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	width: 100%;
	height: 100%;
	z-index: 99999;
	display: flex;
	justify-content: center;
	align-items: center;
}
.mv-catch{
	text-align: center;
	font-size: 2.4rem;
	line-height: 2;
}
.scroll-arrow{
	writing-mode: vertical-rl;
	position: absolute;
	left: 0;
	right: 0;
	bottom: -6rem;
	margin: auto;
	display: block;
	width: fit-content;
	display: flex;
	align-items: center;
	padding-bottom: 8.8rem;
}
.scroll-arrow-area:after{
	content: "";
	display: block;
	width: 1px;
	height: 8rem;
	background: linear-gradient(#fff 0%, #fff 25% , #A58E78 25%, #A58E78 100%);
	margin-top: .8rem;
	overflow: hidden;
	margin-inline: auto;
}
.scroll-arrow-area{
	display: block;
	width: 1px;
	height: 8rem;
	overflow: hidden;

	position: absolute;
	left: 0;
	right: 0;
	top: 6.5rem;
	margin: auto;

	animation-name: arrow-animation;
	animation-iteration-count: infinite;
	animation-duration: 1s;
	animation-fill-mode: both;
	animation-timing-function: ease-in;
	transform-origin: center top;

}


/* ++++++philosophy+++++ */
.philosophy{
	padding-block: 20rem;
	overflow: hidden;
	position: relative;
}

.philosophy-bg{
	position: absolute;
	inset: -20% 0;
	background: url(../images/index/philosophy-bg01.jpg) no-repeat;
	background-position: center top;
	background-size: cover;
	z-index: -1;
	will-change: transform;
}
.philosophy .inner{
	z-index: 2;
}

.philosophy-lead{
	padding-block: 10rem;
	font-size: 2rem;
	text-align: center;
}
.philosophy-list{
	justify-content: space-between;
	align-items: flex-end;
	padding-bottom: 12rem;
}
.philosophy-list-contents{
	width: 38rem;
	height: 56rem;
	padding: 4rem 3rem;
}
.philosophy-list-contents:nth-of-type(1){
	background: rgba(121,25,49,.7);
}
.philosophy-list-contents:nth-of-type(2){
	height: 66rem;
	background: rgba(31,75,136,.7);
}
.philosophy-list-contents:nth-of-type(3){
	background: rgba(17,116,105,.7);
}
.philosophy-list-contents:before{
	content: attr(data-no);
	font-family: "Cinzel", serif;
	font-size: 9.6rem;
	text-align: center;
	opacity: .4;
	display: block;
	margin-bottom: 2rem;
}
.philosophy-list h3{
	font-size: 3.2rem;
	text-align: center;
	font-weight: 500;
	line-height: 1.5;
	margin-bottom: 3rem;
}
.philosophy-list h3:after{
	content: "";
	display: block;
	width: 6rem;
	height: 0;
	border-bottom: 1px solid #fff;
	opacity: .4;
	margin: 3rem auto 0;
}

.origin-meaning{
	justify-content: space-between;
}
.origin-meaning .text{
	width: 58rem;
}
.origin{
	padding-bottom: 8rem;
}
.origin-meaning .pic{
	width: 38rem;
	margin-top: 5.7rem;
}



/* ++++++++++business+++++++++++ */
.sec-head{
	width: 100%;
	max-width: calc(50% + 60rem + 2.777777vw);
	padding-left: 2.777777vw;
	margin-inline: auto 0;
	position: relative;
}
.business{
	padding-top: 20rem;
}
.business-sec-head .pic{
	width: 60.606060%;
	margin-inline: auto 0;
	padding-top: 10rem;
	overflow: hidden;
	z-index: 1;
}

.business-sec-head .sec-title02{
	position: absolute;
	left: 2.777777vw;
	bottom: 0;
}



/* ++++++++++business+++++++++++ */
.arch-residence,
.arch-square{
	padding-block: 12rem 20rem;
	background: #F5F4F2;
}
.arch-residence:before,
.arch-square:before{
	content: "";
	display: block;
	background: #fff;
	z-index: 1;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 27.2rem;
}
.parallax-bg{
	width: 100%;
	aspect-ratio: 4 / 1;
	position: relative;
	overflow: clip;
}

.arch-residence .inner,
.arch-square .inner{
	z-index: 2;
}
.parallax-bg:before{
	content: "";
	display: block;
	width: 100%;
	height: 140%;
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-position: center top;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	transform: translateY(var(--before-bg-y));
}
.arch-residence .parallax-bg:before{
	background-image: url(../images/index/business01-pic01.jpg);
}
.arch-square .parallax-bg:before{
	background-image: url(../images/index/business02-pic01.jpg);
}
.business-text{
	align-items: stretch;
	padding-block: 8rem;
}
.business .sec-sub-title02{
	width: 35%;
}
.business .text-contents{
	width: 65%;
	padding-left: 8rem;
	border-left: 1px solid #A58E78;
}

/* +++++++++++++works++++++++++++++++++ */
.works-area{
	display: flex;
	gap: 3rem;
}
.works-col{
	width: calc(33.333% - 2rem);
}

.works02,
.works03{
	margin-bottom: 3rem;
}
.works-area .swiper-slide img{
	display: block;
	width: 100%;
}



.peel-slider {
	--peel-speed: 1100ms;
	--peel-ease: cubic-bezier(0.65, 0, 0.18, 1);

	position: relative;
	width: 100%;
	overflow: hidden;
}

/* Swiperの通常スライド移動を実質使わず、全スライドを重ねる */
.peel-slider .swiper-wrapper {
	position: relative;
	width: 100%;
	height: auto;
	transform: none !important;
}

.peel-slider .swiper-slide {
	position: absolute !important;
	inset: 0;
	width: 100% !important;
	height: 100%;
	overflow: hidden;
	opacity: 0 !important;
	visibility: hidden;
	z-index: 0;
	pointer-events: none;
}

/* 現在表示中のスライド */
.peel-slider .swiper-slide.is-active {
	opacity: 1 !important;
	visibility: visible;
	z-index: 1;
	pointer-events: auto;
	position: relative !important;
	height: auto;
}

/* めくれて消える前のスライド */
.peel-slider .swiper-slide.is-leaving {
	opacity: 1 !important;
	visibility: visible;
	z-index: 2;
}

.peel-slide__media {
	width: 100%;
	height: auto;
}

.peel-slide__media img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
}

/* 前の画像を右から左へめくる */
.peel-slider .swiper-slide.is-leaving .peel-slide__media {
	animation: peelOutRightToLeft var(--peel-speed) var(--peel-ease) forwards;
}

/* めくれ部分の光・影っぽい帯 */
/*
.peel-slider .swiper-slide.is-leaving::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 100%;
	width: 22%;
	transform: translateX(-50%);
	z-index: 5;
	pointer-events: none;
	background: linear-gradient(
		to right,
		rgba(0, 0, 0, 0),
		rgba(255, 255, 255, 0.45),
		rgba(0, 0, 0, 0.18),
		rgba(0, 0, 0, 0)
	);
	animation: peelEdgeRightToLeft var(--peel-speed) var(--peel-ease) forwards;
}
*/

/* 次に出てくる画像を少しだけズームアウト */
.peel-slider .swiper-slide.is-active .peel-slide__media img {
	animation: peelSlideZoom var(--peel-speed) var(--peel-ease) forwards;
}

@keyframes peelOutRightToLeft {
	0% {
		clip-path: inset(0 0 0 0);
	}
	100% {
		clip-path: inset(0 100% 0 0);
	}
}

@keyframes peelEdgeRightToLeft {
	0% {
		left: 100%;
		opacity: 1;
	}
	85% {
		opacity: 1;
	}
	100% {
		left: 0%;
		opacity: 0;
	}
}

.works-area-bottom p {
	text-align: right;
	font-size:1.4rem;
	margin:1em 0 0;
}


/* ++++++++++++arch-square++++++++++ */
.business02-pic-list{
	gap: 3rem;
	justify-content: space-between;
}
.business02-pic-list .pic{
	width: calc(33.333% - 2rem);
}




/* ++++++++++++arch-city++++++++++ */
.arch-city{
	padding-block: 20rem;
}
.arch-city .sec-title01{
	margin-bottom: 4rem;
}
.line-drawing{
	width: 100%;
	overflow: hidden;
}

.line-drawing svg{
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.line-drawing path{
	fill: none;
	stroke: #7B6959;
/*
	vector-effect: non-scaling-stroke;
*/
	visibility: hidden;
	
	stroke-linecap: butt;
	stroke-linejoin: round;
}

.arch-city-detail{
	text-align: center;
}
.arch-city-detail .sec-sub-title02{
	margin-block: 3rem 4rem;
	width: 100%;
}



/* +++++++++++++++++++++about us++++++++++++++++ */
.about-us-sec-head{
	margin-bottom: 8rem;
}
.about-us-sec-head .pic{
	width: 60.606060%;
	margin-inline: auto 0;
	padding-top: 5rem;
	overflow: hidden;
}
.about-us-sec-head .sec-title02{
	position: absolute;
	left: 2.777777vw;
	bottom: 0;
}
.about-us-sec-head:before{
	content: "";
	display: block;
	width: 80rem;
	aspect-ratio: 4 / 1;
	background: linear-gradient(90deg, #F5F4F2 0%, #F5F4F2 50%, rgba(255,255,255,0) 50%, rgba(255,255,255,0) 100%);
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	z-index: -1;
	margin-inline: auto;
}



/* +++++++++++++++++++++message++++++++++++++++ */
.message{
	padding-block: 12rem 20rem;
	background: #F5F4F2;
}
.message .sec-title01{
	margin-bottom: 8rem;
}
.message-contents{
	justify-content: space-between;
}
.message-text{
	width: 58.333333%;
}
.signature{
	text-align: right;
	margin-top: 4rem;
}
.signature span{
	font-size: 125%;
}
.message-pic{
	width: 31.666666%;
}



/* +++++++++++++++++++++company++++++++++++++++ */
.company{
	padding-block: 16rem 20rem;
	background: #E8E8E3;
}
.company .sec-title01{
	margin-bottom: 9rem;
}
.company-contents{
	justify-content: space-between;
	align-items: stretch;
	flex-direction: row-reverse;
}
.company-pic{
	width: 31.666666%;
}
.company-text{
	width: 60%;
}

.company-outline{
	width: 100%;
	margin-top: -2rem;
}
.company-outline tr:not(:last-of-type){
	border-bottom: 1px solid #A58E78;
}
.company-outline th{
	color: #988069;
	width: 28%;
	font-size: 125%;
	text-align: left;
	font-weight: 500;
	padding-block: 2rem;
	vertical-align: top;
	line-height: 1;
}
.company-tel-block p,
.company-tel-block p *{
	pointer-events: none;
	text-decoration: none;
}
.company-outline td{
	width: 72%;
	line-height: 1.5;
	padding-block: 2rem;
}
.outline-parag,
.outline-parag *,
.company-map-block p,
.company-map-block p *{
	text-decoration: none;
	pointer-events: none;
}
.outline-sub-title{
	line-height: 2;
	padding-bottom: .5em;
}
.button01{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 12rem;
	height: 2.4rem;
	color: #fff;
	border-radius: 999px;
	background: #988069;
	margin-bottom: 1rem;
}
.button01:hover{
	opacity: .7;
}
.button01:before{
	content: "";
	display: block;
	width: 1.2rem;
	aspect-ratio: 2 / 3;
	background: url(../images/index/company-icon01.svg) no-repeat;
	background-position: center;
	background-size: 100% auto;
	margin-right: .4rem;
}
.company-map-block{
	color: #988069;
	margin-top: 3rem;
}
.googlemap{
	width: 100%;
	margin-top: 3rem;
}
.googlemap>iframe{
	display: block;
	width: 100%;
	aspect-ratio: 72 / 4;
}



/* +++++++++++++++++++++partners++++++++++++++++ */
.partners{
	padding-block: 20rem;
	overflow: hidden;
	position: relative;
}
.partners .sec-title01{
	margin-bottom: 8rem;
}
.partners-text{
	max-width: 70rem;
	margin-inline: auto;
	text-align: center;
	position: relative;
	z-index: 2;
}
.partners-text p:not(:last-of-type){
	padding-bottom: 1em;
}


.partners-bg{
	position: absolute;
	inset: -20% 0;
	background: url(../images/index/partners-bg01.jpg) no-repeat;
	background-position: center bottom;
	background-size: auto 100%;
	z-index: -1;
	will-change: transform;
}
.partners h2{
	z-index: 2;
	position: relative;
}



/* +++++++++++++++++contact++++++++++++++++ */
.contact{
	background: #F5F4F2;
	padding-block: 16rem;
}
.contact .sec-title01{
	margin-bottom: 6.3rem;
}
.form-area{
	max-width: 80rem;
	margin: 0 auto;
}
.privacy-policy{
	width: 100%;
	height: 16rem;
	overflow: auto;
	resize: vertical;
	padding: 2rem 5rem;
	background: #F7F7F7;
	border: 1px solid #D9D9D9;
	margin-block: 4rem 6rem;
	font-size: 1.4rem;
	border-radius: .4rem;
}
.privacy-policy-title{
	color: #988069;
	font-weight: 500;
	text-align: center;
}

.privacy-box h4{
	font-weight: 900;
	color: #988069;
	font-size: 1.4rem;
	margin-bottom: 1rem;
}
.privacy-box{
	padding-block: 2rem;
}
.privacy-box:not(:last-of-type){
	border-bottom: 1px solid #A58E78;
}
.privacy-box li{
	padding-left: 1.5em;
	text-indent: -1.5em;
}
.poc{
	padding: 1rem 3rem;
	background: #E8E8E3;
	border-radius: .4rem;
	margin-top: 1rem;
}
.poc tr:not(:last-of-type){
	border-bottom: 1px solid #A58E78;
}
.poc th{
	font-weight: 500;
	color: #A58E78;
	width: 18%;
	text-align: left;
	vertical-align: top;
	padding-block: 1rem;
}
.poc td{
	padding-block: 1rem;
	width: 82%;
}

.form-table dt{
	width: 25%;
	padding-top: .7rem;
	line-height: 1.5;
	font-size: 2rem;
	color: #988069;
}
.required:after{
	content: "※";
	display: inline-block;
	color: #E60000;
	font-size: 75%;
	margin-left: .3em;
}
.form-table dt:not(:last-of-type),
.form-table dd:not(:last-of-type){
	padding-bottom: 5rem;
}
.form-table dd{
	width: 75%;
}
input[type="text"],
input[type="email"],
input[type="tel"]{
	background: #fff;
	height: 4rem;
	border-radius: .4rem;
	border: 1px solid #988069;
	display: flex;
	align-items: center;
	padding-inline: 1em;
	font-family: "Noto Serif JP", serif;
	font-weight: 500;
	font-size: 1.6rem;
	width: 100%;
}
textarea{
	background: #fff;
	height: 16rem;
	border-radius: .4rem;
	border: 1px solid #988069;
	display: block;
	align-items: center;
	padding: .75em 1em;
	font-family: "Noto Serif JP", serif;
	font-weight: 500;
	font-size: 1.6rem;
	width: 100%;
	line-height: 1.5;
}
.privacy-check{
	justify-content: center;
	align-items: center;
	position: relative;
	cursor: pointer;
	width: fit-content;
	margin-inline: auto;
}
.privacy-check input{
	position: absolute;
	left: 0;
	top: 0;
}
.privacy-check:before{
	content: "";
	display: block;
	width: 2.4rem;
	height: 2.4rem;
	border-radius: .4rem;
	background-color: #fff;
	border: 1px solid #988069;
	margin-right: 1rem;
}
.active.privacy-check:before{
	background-image: url(../images/index/check-icon01.svg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 80% auto;
}


/* +++++++++++++++++gallery++++++++++++++++ */
.gallery{
	padding-top: 20rem;
}
.gallery .sec-title02{
	text-align: center;
	margin-bottom: -3.5em;
	position: relative;
	z-index: 9;
	display: block;
	position: relative;
	z-index: 1;
}
.split-slider{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(2, 1fr);
	width: 100%;
	overflow: hidden;
	aspect-ratio: 1440 / 700;
	position: relative;
	z-index: 9;
}
.panel{
	position: relative;
	overflow: hidden;
}
.panel .slide{
	background-repeat: no-repeat;
	background-size: 400% 200%;
	transform: translateY(0);
	position: absolute;
	width: calc(100% + 1px);
	height: calc(100% + 1px);
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}
.slide01{
	background-image: url(../images/index/gallery-pic01.jpg);
}
.slide02{
	background-image: url(../images/index/gallery-pic02.jpg);
}
.panel01 .slide{
	background-position: 0% 0%;
}
.panel02 .slide{
	background-position: 33.333333% 0%;
}
.panel03 .slide{
	background-position: 66.666666% 0%;
}
.panel04 .slide{
	background-position: 100% 0%;
}
.panel05 .slide{
	background-position: 0% 100%;
}
.panel06 .slide{
	background-position: 33.333333% 100%;
}
.panel07 .slide{
	background-position: 66.666666% 100%;
}
.panel08 .slide{
	background-position: 100% 100%;
}



	.business-sec-head .pic-area,
	.about-us-sec-head .pic-area{
		position: relative;
		z-index: 9;
	}
	.business-sec-head .pic:after{
		content: "Business";
		font-family: "Cinzel", serif;
		display: block;
		color: #C4A280;
		font-size: 16.8rem;
		mix-blend-mode: plus-lighter;
		font-weight: 400;
		position: absolute;
		left: 0;
		bottom: 0;
	}
	.about-us-sec-head .pic:after{
		content: "About Us";
		font-family: "Cinzel", serif;
		display: block;
		color: #C4A280;
		font-size: 16.8rem;
		mix-blend-mode: plus-lighter;
		font-weight: 400;
		position: absolute;
		left: 0;
		bottom: 0;
		white-space: nowrap;
	}
	.split-slider:after{
		content: "gallery";
		font-family: "Cinzel", serif;
		display: block;
		color: #C4A280;
		font-size: 16.8rem;
		mix-blend-mode: plus-lighter;
		font-weight: 400;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		text-align: center;
		transform: translateY(-.5em);
		white-space: nowrap;
	}



/* +++++++++++++++++++++mask animation++++++++++++++++++ */
.image-mask {
	--mask-progress: 0%;
	--mask-feather: 24%;


	overflow: hidden;

	-webkit-mask-image: linear-gradient(
		to bottom,
		#000 0%,
		#000 calc(var(--mask-progress) - var(--mask-feather)),
		rgba(0, 0, 0, 0) var(--mask-progress)
	);
	mask-image: linear-gradient(
		to bottom,
		#000 0%,
		#000 calc(var(--mask-progress) - var(--mask-feather)),
		rgba(0, 0, 0, 0) var(--mask-progress)
	);

	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

.image-mask img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	transform: scale(1.06);
}




/* ++++++++++++++++++++ */
/* +++++SP Style+++++++ */
/* ++++++++++++++++++++ */
@media screen and (max-width: 768px){
	.sec-title02{
		z-index: 99999999;
		position: relative;
	}
	.sec-title02 .en{
		mix-blend-mode: plus-lighter;
	}

	.header{
		position: fixed;
		transform: translateY(-8rem);
	}
	.header{
		z-index: 999999998;
	}
	.header-logo{
		z-index: 999999999;
	}

/* ++++++main-visual+++++ */
	.main-visual{
		margin-bottom: 8rem;
	}
	.mv-slide .pic img{
		min-height: 54rem;
	}
/* ++++++MV text+++++ */
	.mv-catch{
		font-size: 2rem;
	}
	.scroll-arrow{
		font-size: 1.4rem;
		writing-mode: vertical-rl;
		position: absolute;
		left: 0;
		right: 0;
		bottom: -3.6rem;
		margin: auto;
		display: block;
		width: fit-content;
		display: flex;
		align-items: center;
		padding-bottom: 7.1rem;
	}
	.scroll-arrow:after{
		height: 4.8rem;
		margin-top: .6rem;
	}

	.main-visual .swiper-slide img{
		height: 100vh;
	}

/* ++++++philosophy+++++ */
	.philosophy{
		padding: 0;
		overflow: clip;
	}

	.philosophy-bg{
		background-image: url(../images/index/sp-philosophy-bg01.jpg);
		height: 100vh;
		position: sticky;
		left: 0;
		top: 0;
		margin-bottom: -100vh;
	}

	.philosophy .inner{
		padding: 7rem 2rem;
	}
	.philosophy-lead{
		padding-block: 4rem;
		font-size: 1.6rem;
	}
	.philosophy-list{
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		gap: 3rem;
		padding: 0 0 4.8rem;
	}
	.philosophy-list-contents{
		width: 100%;
		height: auto !important;
		padding: 2.7rem 2.5rem;
	}

	.philosophy-list-contents:before{
		font-size: 6.4rem;
		margin-bottom: .8rem;
	}
	.philosophy-list h3{
		font-size: 2.4rem;
		margin-bottom: 2.4rem;
	}
	.philosophy-list h3:after{
		margin: 2.4rem auto 0;
	}

	.origin-meaning{
		flex-direction: column;
		justify-content: flex-start;
	}
	.origin-meaning .text{
		width: 100%;
	}
	.origin{
		padding-bottom: 4rem;
	}
	.origin-meaning .pic{
		width: 61.8%;
		margin: 3rem auto 1.8rem;
	}






/* ++++++++++business+++++++++++ */
	.sec-head{
		width: 100%;
		max-width: 100%;
		padding-left: 2rem;
	}
	.business{
		padding-top: 8rem;
	}
	.business-sec-head:before{
		width: calc(50vw - 3rem);
		left: 3rem;
	}
	.business-sec-head .pic{
		width: 61.8vw;
		padding-top: 6rem;
	}
	.business-sec-head .sec-title02{
		left: 2rem;
		bottom: 0;
	}



/* ++++++++++business+++++++++++ */
	.arch-residence,
	.arch-square{
		padding-block: 7rem;
	}
	.arch-residence:before,
	.arch-square:before{
		height: 13.5rem;
	}
	.parallax-bg{
		aspect-ratio: 21 / 9;
	}
	.parallax-bg:before{
		background-size: cover;
	}
	.arch-residence .parallax-bg:before{
		background-position: left 8% top;
	}

	.business-text{
		display: block;
		padding-block: 3rem;
	}
	.business .sec-sub-title02{
		width: 100%;
		margin-bottom: 1.2rem;
	}
	.business .text-contents{
		width: 100%;
		padding-left: 0;
		border-left: 0;
		margin-bottom: 0;
	}

/* +++++++++++++works++++++++++++++++++ */
	.works-area{
		gap: 0;
		justify-content: space-between;
		align-items: stretch;
		aspect-ratio: 1200 / 790;
		overflow: hidden;
	}
	.works-col{
		width: calc(33.333333% - .4rem);
	}

	.works02,
	.works03{
		margin-bottom: .8rem;
	}

	.works-area-bottom p {
		font-size:1.2rem;
		margin:1.25em 0 0;
	}
/* ++++++++++++arch-square++++++++++ */
	.business02-pic-list{
		gap: 0;
	}
	.business02-pic-list .pic{
		width: calc(33.333333% - .5333333rem);
	}
/* ++++++++++++arch-city++++++++++ */
	.arch-city{
		padding-block: 7rem;
		overflow: hidden;
	}
	.line-drawing{
		width: 160%;
		overflow: hidden;
		margin-left: -30%;
	}

	.line-drawing svg{
		display: block;
		width: 100%;
		height: auto;
		overflow: hidden;
	}
	.arch-city-detail .sec-sub-title02{
		margin-block: 3rem 2.4rem;
	}






/* +++++++++++++++++++++about us++++++++++++++++ */
	.about-us-sec-head{
		margin-bottom: 4rem;
	}
	.about-us-sec-head .pic{
		padding-top: 3rem;
		aspect-ratio: 4 / 3;
	}
	.about-us-sec-head .sec-title02{
		left: 2rem;
	}
	.about-us-sec-head:before{
		width: 25%;
		aspect-ratio: 5 / 3;
		background: #F5F4F2;
		position: absolute;
		left: 10rem;
		right: auto;
	}
	.about-us-sec-head .pic img{
		object-position: 76%;
	}

/* +++++++++++++++++++++message++++++++++++++++ */
	.message{
		padding-block: 7rem;
	}
	.message .sec-title01{
		margin-bottom: 4rem;
	}
	.message-contents{
		flex-direction: column-reverse;
		justify-content: flex-start;
	}
	.message-text{
		width: 100%;
	}
	.signature{
		margin-top: 1.8rem;
		line-height: 1.75;
	}
	.signature span{
		font-size: 115%;
	}
	.message-pic{
		width: 61.8%;
		margin: 0 auto 2.4rem;
	}



/* +++++++++++++++++++++company++++++++++++++++ */
	.company{
		padding-block: 7rem;
	}
	.company .sec-title01{
		margin-bottom: 2rem;
	}
	.company-contents{
		flex-direction: row;
		justify-content: justify-content;
		align-items: stretch;
	}
	.company-pic{
		width: calc(25% - .5333333rem);
		height: 18rem;
		overflow: hidden;
	}
	.company-pic img{
		object-position: center top;
	}

	.googlemap{
		width: calc(75% - .5333333rem);
		margin-top: 0;
		height: 18rem;
	}
	.googlemap>iframe{
		aspect-ratio: auto;
		height: 100%;
	}
	.company-text{
		width: 100%;
		padding-inline: 2rem;
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		flex-wrap: wrap;
	}

	.company-outline{
		width: 100%;
		margin-top: 0;
	}
	.company-outline table,
	.company-outline tr,
	.company-outline tbody,
	.company-outline th,
	.company-outline td{
		display: block;
		width: 100%;
	}
	.company-outline th{
		font-size: 100%;
		text-align: left;
		font-weight: 500;
		padding-block: 2rem 1rem;
	}
	.company-outline td{
		line-height: 1.5;
		padding-block: 0 2rem;
	}
	.outline-sub-title{
		padding-bottom: 0;
	}
	.company-map-block{
		margin-top: 2.1rem;
	}




/* +++++++++++++++++++++partners++++++++++++++++ */
	.partners{
		padding-block: 7rem;
	}
	.partners .sec-title01{
		margin-bottom: 4rem;
	}
	.partners-text{
		max-width: 100%;
	}




/* +++++++++++++++++contact++++++++++++++++ */
	.contact{
		background: #F5F4F2;
		padding-block: 7rem;
	}
	.contact .sec-title01{
		margin-bottom: 4rem;
	}
	.form-area{
		max-width: 100%;
		margin: 0 auto;
	}
	.privacy-policy{
		height: 32rem;
		padding: 2rem;
		margin-block: 3.6rem 2.4rem;
		font-size: 1.3rem;
	}


	.privacy-box h4{
		font-size: 1.3rem;
	}
	.privacy-box{
		padding-block: 1.8rem;
	}
	.privacy-box:last-of-type{
		padding-block: 1.8rem 0;
	}

	.poc{
		padding: 1rem 1.5rem;
		margin-top: 1rem;
		line-height: 1.5;
	}

	.poc table,
	.poc tr,
	.poc tbody,
	.poc th,
	.poc td{
		display: block;
		width: 100%;
	}

	.poc th{
		text-align: left;
		vertical-align: top;
		padding-block: 1.6rem 0;
	}
	.poc td{
		padding-block: .4rem 1.6rem;
	}

	.form-table{
		flex-direction: column;
	}
	.form-table dt{
		width: 100%;
		padding-top: .0;
		font-size: 1.6rem;
	}
	.form-table dt{
		padding-bottom: 1.2rem !important;
	}
	.form-table dd:not(:last-of-type){
		padding-bottom: 2.4rem;
	}
	.form-table dd{
		width: 100%;
	}
	input[type="text"],
	input[type="email"],
	input[type="tel"]{
		height: 3.6rem;
		font-size: 1.5rem;
	}
	textarea{
		font-size: 1.5rem;
	}



/* +++++++++++++++++gallery++++++++++++++++ */
.gallery{
	padding-top: 4rem;
}
.gallery .sec-title02{
	text-align: center;
	margin-bottom: -1em;
}






/* +++++++++++++++++見出し英字のブレンド++++++++++++++++ */
	.business-sec-head .pic:after{
		font-size: 4.8rem;
	}
	.about-us-sec-head .pic:after{
		font-size: 4.8rem;
	}



	.business-sec-head .sec-title02,
	.about-us-sec-head .sec-title02{
		z-index: 1;
	}
	.split-slider:after{
		font-size: 4.8rem;
		transform: translateY(-.53em);
	}
}



/* *********************** */
/* ****** animation ****** */
/* *********************** */
@keyframes zoomUp{
	0%{
		transform: scale(1.1);
	}
	100%{
		transform: scale(1);
	}
}
@keyframes slideRl{
	0%{
		transform: scale(1.05) translateX(0);
	}
	100%{
		transform: scale(1.05) translateX(-3%);
	}
}
@keyframes slideLr{
	0%{
		transform: scale(1.05) translateX(0);
	}
	100%{
		transform: scale(1.05) translateX(3%);
	}
}

@keyframes curtain{
	0%{
		opacity: .7;
	}
	100%{
		opacity: 0;
		z-index: -1;
	}
}

@keyframes arrow-animation{
	0%{
		height: 0;
	}
	100%{
		height: 8rem;
	}
}

@media screen and (max-width: 768px){

	@keyframes slideRl{
		0%{
			transform: scale(1.1) translateX(0);
		}
		100%{
			transform: scale(1.1) translateX(-8%);
		}
	}
	@keyframes slideLr{
		0%{
			transform: scale(1.1) translateX(0);
		}
		100%{
			transform: scale(1.1) translateX(8%);
		}
	}
}