@charset "UTF-8";
:root{
	--color-gra: linear-gradient(-60deg, rgba(235, 85, 5, 1) 0%, rgba(245, 170, 0, 1) 100%);
	--color-orange: #e88f00;
	--color-gray: #b9b9b9;
	--color-gray2: #f8f8f8;
	--color-wh: #fff;
}

@media only screen and (min-width: 1650px) {
    html {
        /* font-size: 12.5px; */
    }
}
html {
    /* font-size: 10px; */
}

.container {
	overflow: hidden;
}
.container.has-header {
	padding-top: 138px;
}
.mv{
	width: 100%;
	background: url(../images/business/mv.webp) no-repeat top center/ cover;
	aspect-ratio: 1680 / 620;
	.inner{
		width: 100%;
		height: 100%;
		position: relative;
	}
}
.mv-ttl-box{
	padding: 1.6rem 3rem;
	max-width: 400px;
	width: 100%;
	background-color: rgba(242, 242, 242, .5);
	backdrop-filter: blur(10px);
	filter: brightness(1.1);
	position: absolute;
	bottom: 10%;
	left: 0;
}
.mv-ttl {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: clamp(2rem, 5.12vw, 3.2rem);
	font-weight: 650;
	letter-spacing: .1rem;
	.small-text {
		font-size: 36%;
		letter-spacing: 0;
	}
}
.intro{
	.note{
		margin: 0;
	}
}
.mansion{
	margin-bottom: clamp(32px, 8vw, 80px);
	position: relative;
	&::before{
		content: "";
		background: var(--color-gray2);
		width: calc(1160 / 1680 * 100%);
		height: 100%;
		position: absolute;
		top: 0;
		z-index: 1;
	}
	.inner{
		position: relative;
		z-index: 2;
	}
	&.content1::before{
		left: 0;
	}
	&.content2::before{
		right: 0;
	}
}
.business-flex{
	gap: clamp(32px, 6vw, 60px);
	.contents-l,
	.contents-r{
		width: calc(50% - 30px);
	}
	.contents-l{
		container-type: inline-size;
	}
	.tertiary-heading{
		font-weight: 600;
	}
	.img-01{
		margin: 0 auto 0 0;
		max-width: 480%;
		width: 88%;
	}
	.img-02{
		margin: calc(32 / 543 * -100%) 0 0 auto;
		max-width: 370px;
		width: 67%;
	}
	&.reverse{
		flex-direction: row-reverse;
	}
}
.contents-detail-lists{
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}
.detail-cards{
	padding: 16px 16px 18px;
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 3;
	gap: 0;
	background-color: var(--color-wh);
	border: 1px solid var(--color-gray);
	border-radius: 10px;
	.link-btn{
		padding: 10px;
		max-width: 156px;
		min-width: auto;
		width: 100%;
		display: block;
		background: var(--color-gra);
		font-size: 16px;
		border-radius: 6px;
		&:hover{
			color: var(--color-wh);
		}
	}
	.note{
		line-height: 1.6;
	}
}
.cards-ttl{
	margin-bottom: .6em;
	padding-bottom: .6em;
	align-content: center;
	font-size: 16px;
	line-height: 1.6;
	border-bottom: 1.5px solid var(--color-orange);
}
.others{
	margin-bottom: clamp(32px, 8vw, 80px);
	background: var(--color-gra);
	.inner{
		padding:  clamp(48px, 12vw, 140px) 0;
		> *{
			margin-bottom: 32px;
		}
	}
}
.business-flex2{
	padding: clamp(32px, 6vw, 60px) clamp(20px, 6vw, 60px);
	background-color: var(--color-wh);
	&:has(.others-img){
		padding: 0;
		.ttl-wrap{
			padding: 32px clamp(20px, 6vw, 60px);
			.link-btn{
				padding: clamp(14px, 2vw, 20px) 10px;
				max-width: 237px;
				min-width: auto;
				width: 100%;
				display: block;
				background: var(--color-gra);
				font-size: clamp(16px, 2vw, 20px);
				border-radius: 6px;
				&:hover{
					color: var(--color-wh);
				}
			}
		}
	}
	.ttl-wrap{
		width: calc(580 / 1200 * 100%);
		align-content: center;
	}
	.tertiary-heading{
		margin-bottom: .3em;
		font-weight: 600;
		letter-spacing: .2rem;
	}
	.note{
		line-height: 2;
		letter-spacing: .1rem;
	}
	.text-area,
	.others-img{
		width: calc(620 / 1200 * 100%);
		img{
			height: 100%;
			object-fit: cover;
		}
	}
}
.link-btn{
	&:hover{
		color: var(--color-wh);
		animation: ripple 1.6s infinite;
	}
}
@keyframes ripple{
	0% {
		box-shadow: 0 0 0 0 var(--color-orange);
	}

	70% {
		box-shadow: 0 0 0 10px rgba(134, 93, 23, 0);
	}
	98% {
		box-shadow: 0 0 0 0 rgba(134, 93, 23, 0);
	}
	100% {
		box-shadow: 0 0 0 0 var(--color-orange);
	}
}
@media (max-width: 991px) {
	.container.has-header {
		padding-top: 60px;
	}
	.contents-detail-lists{
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 767px) {
	.mv{
        aspect-ratio: 750 / 650;
        background-position: 25%;
		.mv-ttl-box{
			padding: 1.6rem 2rem;
			width: 64%;
		}
	}
	.mansion::before{
		width: calc(560 / 750 * 100%);
	}
	.business-flex{
		.contents-l,
		.contents-r{
			width: 100%;
		}
		.img-01{
			margin: 0 auto 0 0;
			max-width: 480%;
			width: 88%;
		}
		.img-02{
			margin: calc(32 / 543 * -100%) 0 0 auto;
			max-width: 370px;
			width: 67%;
		}
		&.reverse{
			flex-direction: row-reverse;
		}
	}
	.contents-detail-lists{
		margin-inline: auto;
		width: 90%;
		grid-template-columns: auto;
	}
	.detail-cards{
		.link-btn{
			margin-inline: auto;
		}
	}
	.business-flex2{
		.ttl-wrap,
		.text-area,
		.others-img{
			width: 100%;
		}
	}
	.business-box{
		figure{
			height: 100%;
			aspect-ratio: 62 / 39;
			overflow: hidden;
			img{
				height: 100%;
				object-fit: cover;
			}
		}
	}
	.sp-order-1{
		order: 1;
	}
	.sp-order-2{
		order: 2;
	}
}


.main__head {
	position: relative;
}
.main__head .section__body {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	height: 375px
}
.main__head .head {
	position: relative;
	z-index: 1
}
.main__head .head .pagettl {
	font-size: 40px;
	font-weight: 700;
	position: relative;
	padding-bottom: 1rem
}
.main__head .head .pagettl:before {
	content: "";
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 50px;
	height: 3px;
	background: -webkit-gradient(linear, left top, right top, from(#E88F00), to(#E43C00));
	background: -webkit-linear-gradient(left, #E88F00, #E43C00);
	background: linear-gradient(left, #E88F00, #E43C00)
}
html.ie11 .main__head .head .pagettl:before {
	background: #E88F00
}
.main__head .imgArea {
	position: absolute;
	right: 0;
	top: 0;
	width: 57vw;
	height: 375px;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat
}
.main__head .imgArea .img {
	position: relative;
	z-index: 1;
	display: none
}
.main__head .imgArea .img img{
	    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: auto;
}
.main__head .imgAreaBg {
	position: absolute;
	z-index: -1;
	left: -175px;
	bottom: -50px;
	width: 100%;
	height: 100%
}
.main__head .imgAreaBg .bg {
	display: block;
	background: #EAEAEA;
	width: calc(100% + 14rem);
	height: 100%
}



@media only screen and (max-width: 1023px) {
	.main__head .section__body {
		display: block;
		height: auto
	}
	.main__head .head {
		margin-bottom: 3rem
	}
	.main__head .head .parentttl {
		font-size: 1.2rem
	}
	.main__head .head .pagettl {
		font-size: 2.5rem;
		padding-bottom: 1rem;
		letter-spacing: 0
	}
	.main__head .head .pagettl:before {
		width: 3rem;
		height: 2px
	}
	.main__head .imgArea {
		position: relative;
		right: auto;
		margin: 0 -2rem;
		padding-left: 4rem;
		width: calc(100vw - 4rem);
		height: auto;
		background: none !important
	}
	.main__head .imgArea .img {
		display: block
	}
	.main__head .imgAreaBg {
		position: absolute;
		left: 2rem;
		bottom: -2rem;
		width: 100%;
		height: 100%
	}
	.main__head .imgAreaBg .bg {
		width: calc(100% - 2rem);
		height: 100%
	}
}
.section__body {
    max-width: 1100px;
    margin-right: auto;
    margin-left: auto;
    padding-right: 2rem;
    padding-left: 2rem;
}
@media only screen and (min-width: 1500px) {
    .section__body {
        max-width: 1376px;
    }
}
@media only screen and (max-width: 1650px) {
    .main__head .imgArea {
			height: 300px;
		}
		.main__head .head .pagettl {
    font-size: 32px;
	}
	.main__head .imgAreaBg {
    position: absolute;
    left: -140px;
    bottom: -40px;
	}
}

@media only screen and (max-width: 1023px) {
	.main__head{
		margin-bottom: 32px;
	}
	.main__head .head{
    padding-top: 5vw;
	}
	.main__head .head{
		margin-bottom: 8.1vw;
	}
	.main__head .imgArea {
		height: 32.287vw;
		padding-left: 10.8vw;
		width: 89.32vw;
	}
	.main__head .head .pagettl {
		font-size: 6.675vw;
	}
	.main__head .imgAreaBg {
    position: absolute;
        left: 5.4vw;
    bottom: -7.4vw;
	}
	.main__head .imgAreaBg .bg {
        width:calc(100% - 5.4vw);
    }

		.js-easing .easingBg, .c-titleEasing .easingBg {
			-webkit-transform: translateX(13.5vw);
			transform: translateX(13.5vw);
	}
	.main__head .head .pagettl:before {
        width: 8vw;
    }
}