@charset "utf-8";

@import "setting";

#mv{
	position: relative;
	width: 100%; height: 100dvh;
	
	.slide-main{
		position: absolute;
		width: 100%; height: 100%;
		top: 0; left: 0;
		z-index: 0;
		line-height: 0;
		
		li{
			width: 100%; height: 100%;
			position: absolute;
			top: 0; left: 0;
			opacity: 0;
			transition: opacity 2s ease 0s;
			
			img{
				width: 100%; height: 100%;
				object-fit: cover;
			}
			
			&.active{
				opacity: 1;
			}
		}
	}
	
	.slide-text{
		position: absolute;
		width: 100%; height: 100%;
		bottom: 0; left: 0;
		z-index: 2;
		
		h2,p{
			transition: color 2s ease 0s;
		}
		
		h2{
			color: #17234d;
			position: absolute;
			left: 16%;
			bottom: 62%;
			@include fs(24,24,.45);
			font-weight: 400;
		}
		
		p{
			position: absolute;
			color: #000;
			left: 8%; bottom: 7.5%;
			margin-bottom: 0;
			font-weight: 100;
			
			strong{
				display: block;
				@include din;
				@include fs(36,28,0);
				margin-bottom: .5em;
				font-weight: 500;
			}
			
			span{
				display: block;
				@include fs(12,18,.025);
			}
		}
		
		&.inv{
			h2,p{
				color: #fff;
			}
		}
	}
	
	.slide-layer{
		position: absolute;
		bottom: 0; right: 0;
		width: 42%;
	}
}

#intro{
	padding: p2r(120) 0;
	
	.left-content{
		figure{
			width: p2r(288);
			margin: auto;
		}
	}
	
	.right-content{
		padding-left: p2r(36);
		
		h2{
			@include fs(50,35,0);
			font-weight: 400;
			margin: .75em 0;
			@include din;
			color: $c1;
		}
		
		p{
			@include fs(18,46,.25);
			margin-bottom: 3em;
		}
		
		span{
			display: block;
			@include fs(14,22,.025);
			font-weight: 100;
			color: #888;
		}
	}
}

#business{
	position: relative;
	text-align: center;
	height: p2r(288);
	
	&::before{
		content: "";
		position: absolute;
		width: 100%; height: p2r(144);
		bottom: 0; left: 0;
		background-color: $c1;	
	}
	
	h2{
		@include din;
		font-weight: 400;
		@include fs(180,125,0);
		color: $c1;
		position: relative;
		top: .25em;
	}
	
	span{
		display: block;
		@include fs(14,20,.025);
		color: #fff;
		position: relative;
		font-weight: 100;
		margin-top: 4em;
	}
}

.business-box{
	figure{
		flex-basis: 48%;
		
		.img01{}
		.img02{
			display: inline-block;
			width: 72%;
			margin-top: p2r(6);
		}
	}
	
	.content{
		flex-basis: 35.5%;
		hgroup{
			h2{
				display: flex;
				width: p2r(396);
				padding-bottom: p2r(50);
				position: relative;
				font-weight: 400;
				margin-bottom: p2r(40);
				align-items: flex-end;
				color: $c1;
				
				&::after{
					content: "";
					position: absolute;
					bottom: 0; left: 0;
					width: 100%;
					padding-bottom: 4.7%;
					background: url("../img/arrow3.svg") left bottom no-repeat;
					background-size: contain;
				}
				
				i{
					@include din;
					@include fs(180,125.95,0);
					font-style: normal;
				}
				
				span{
					@include fs(24,38,.2);
					margin-left: 1em;
					margin-bottom: .75em;
				}
			}

			ul,h3{
				@include fs(21,38,.1);
			}
		}
		
		p{
			@include fs(16,34,.1);
		}
	}
}

#business01{
	padding-bottom: p2r(170);
	figure{
		text-align: right;
	}
	
	.content{
		margin-left: 9%;
		
		hgroup{
			position: relative;
			padding: p2r(20) 0 p2r(75);
			margin-bottom: p2r(60);
			color: #fff;

			&::before{
				content: "";
				width: 110vw;
				height: 100%;
				position: absolute;
				z-index: -1;
				background-color: $c1;
				top: 0; right: -23%;
			}
			
			h2{
				color: #fff;
				
				&::after{
					filter: brightness(0) invert(1);
				}
			}
			
			ul{
				margin-bottom: 0;
			}
		}
		
		&>ul{
			font-weight: 700;
			@include fs(16,28,.1);
			margin-bottom: 2em;
			
			li{
				padding: .75em 0;
				position: relative;
				
				&::after{
					content: "";
					width: calc(100% + 2rem);
					height: p2r(1);
					position: absolute;
					bottom: 0; right: 0;
					background-color: #ccc;
				}
			}
		}
	}
}

#business02{
	padding-bottom: p2r(220);
	
	.business-box{
		justify-content: flex-end;
	}
	
	figure{
		order: 1;
	}
	
	h3{
		color: $c1;
		font-weight: 400;
	}
	
	.content{
		margin-right: 5.5%;
		
		p{
			width: 92%;
			margin-bottom: 2em;
		}
	}
}

#reason{
	padding-bottom: p2r(248);
	
	.content{
		flex-basis: 36%;
		position: relative;
		padding: p2r(120) 0;
		color: #fff;
		align-self: flex-start;
		margin: 0 p2r(70) p2r(70) p2r(150);
		
		&::before{
			content: "";
			width: 60vw; height: 100%;
			background-color: $c1;
			position: absolute;
			top: 0; right: -30%;
			z-index: -1;
		}
		
		h2{
			@include din(4);
			@include fs(120,125,0);
			margin-bottom: .3em;
		}
		
		h3{
			@include fs(21,38,.1);
			font-weight: 400;
		}
		
		p{
			@include fs(16,34,.1);
			margin-bottom: 0;
		}
	}
	
	figure{
		flex-basis: 39.14%;
		display: grid;
		grid-template: 
			"i1 i1"
			"i2 i3" / 55.49% 1fr;
		grid-gap: p2r(5);
		line-height: 0;
		margin-bottom: 0;
		align-self: flex-end;
		
		.img01{
			grid-area: i1;
		}
		
		.img02{
			grid-area: i2;
		}
		
		.img03{
			grid-area: i3;
			width: 100%; height: 100%;
			object-fit: cover;
		}
	}
}

#catch{
	background: url("../img/bg_catch.webp") center center no-repeat;
	background-size: cover;
	background-attachment: fixed;
	padding: p2r(200) 0 p2r(180);
	color: rgba(#fff,.7);
	text-align: center;
	
	h2{
		@include din(4);
		@include fs(86,60,0);
		margin-bottom: .25em;
	}
	
	span{
		display: block;
		@include fs(20,28,.025);
		font-weight: 100;
	}
}

#profile{
	background-color: #f7f8f8;
	padding-top: p2r(200);
	
	.d-md-flex{
		justify-content: center;
	}
	
	hgroup{
		flex-basis: p2r(180);
		text-align: center;
		margin: 0 p2r(130) 0 0;
		
		img{
			width: p2r(160);
		}
		
		h2{
			@include din(4);
			color: #000;
			@include fs(42,42,0);
			margin: p2r(50) auto p2r(10);
		}
		
		h6{
			color: $c1;
			@include fs(14,20,.025);
			font-weight: 100;
		}
	}
	
	.content{
		flex-basis: p2r(650);
		
		table{
			width: 100%;
			@include fs(15,32,.15);
			margin-bottom: p2r(130);
			
			th,td{
				border-bottom: solid 1px #ccc;
				
				padding: 1.25em .5em;
			}
			
			th{
				letter-spacing: .2em;
				vertical-align: top;
				font-weight: 400;
				min-width: 8em;
			}
		}
		
		hr{
			margin: 2rem 0;
		}
		
		.group{
			h4{
				@include fs(15,32);
				font-weight: 400;
				margin-bottom: 0;
				
				&::before{
					content: "■";
				}
			}
			
			h5{
				@include fs(15,32);
				font-weight: 400;
				margin-bottom: 0;
			}
			
			p{
				margin-left: 1.2em;
				
				&+h4,&+h5{
					margin-top: 2em;
				}
			}
			
			a.button{
				display: inline-flex;
				width: p2r(370);
				height: p2r(55);
				text-align: center;
				@include fs(17,34,.2);
				align-items: center;
				justify-content: center;
				background-color: #fff;
				
				span{
					@include fs(12,34,.15);
					margin-right: 2em;
				}
			}
		}
	}
	
	iframe{
		width: 100%; height: auto;
		aspect-ratio: 8 / 3;
	}
}

#contact-link{
	background-color: $c1;
	padding: p2r(180) 0;
	text-align: center;
	
	a{
		display: inline-flex;
		width: p2r(660);
		height: p2r(110);
		align-items: center;
		justify-content: center;
		@include din(4);
		@include fs(42,42,0);
		border: solid 1px #fff;
		color: #fff;
		
		&:hover{
			opacity: 1;
			background-color: #fff;
			color: $c1;
		}
	}
}

// Large devices (desktops, 992px and up)
@media (max-width: 1199.98px) {
}

// Medium devices (tablets, 768px and up)
@media (max-width: 991.98px) {
}

/// Small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) {

#mv{
	.slide-main{
		height: calc(100% - 10rem);
	}
	
	.slide-text{
		height: calc(100% - 10rem);
		bottom: auto; top: 0;
		
		h2{
			top: 0; bottom: 0; left: 0; right: 0;
			margin: auto;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		
		p{
			left: 9%; bottom: 4.5%;
		}
	}
	
	.slide-layer{
		position: absolute;
		bottom: 10rem; right: 0;
		width: 73%;
	}
	
	.control{
		position: absolute;
		bottom: 0; left: 0;
		width: 100%; height: 10rem;
		
		.slide-arrow{
			width: p2r(32); height: p2r(32);
			background: url("../img/arrow2.svg") center center no-repeat;
			background-size: contain;
			position: absolute;
			top: 0; bottom: 0; margin: auto;
			z-index: 3
		}
		
		.prev{
			transform: rotate3d(0,1,0,-180deg);
			left: 20%;
		}
		
		.next{
			right: 20%;
		}
		
		.slide-dot{
			position: absolute;
			top: 0; bottom: 0; left: 0; right: 0; margin: auto;
			display: flex;
			align-items: center;
			justify-content: center;
			column-gap: p2r(36);
			z-index: 2;
			
			li{
				width: 1rem; height: 1rem;
				background-color: #ccc;
				border-radius: 1rem;
				
				&.active{
					background-color: #171c61;
				}
			}
			
		}
	}
}

#intro{
	padding: p2r(80) 0 p2r(240);
	
	.right-content{
		padding-left: 0;
		text-align: center;
		
		h2{
			@include fs(80,53,0);
			margin: 2.5em 0 1.25em;
		}
		
		p{
			@include fs(28,68,.25);
		}
		
		span{
			@include fs(20,36,.025);
		}
	}
}

#business{
	
	h2{
		@include fs(148,105,0);
		top: .5em;
	}
	
	span{
		@include fs(18,25);
		margin-top: 4em;
	}
}

.business-box{
	figure{
		margin-bottom: 0;
		display: flex;
		flex-direction: column;
		gap: p2r(6);
		
		.img01{
			width: p2r(610);
		}
		.img02{
			align-self: flex-end;
			width: p2r(440);
			margin-top: 0;
		}
	}
	
	.content{
		width: p2r(610);
		margin: 0 auto;
		
		hgroup{
			width: p2r(575);
			margin: 0 auto;
			padding-top: p2r(70);
			
			h2{
				width: 100%;
				padding: 0 0 p2r(40);
				margin-bottom: p2r(50);
				
				i{
					@include fs(240,183,0);
				}
				
				span{
					@include fs(32,56);
					margin-left: 1.5em;
				}
			}

			ul,h3{
				@include fs(32,56);
			}
		}
		
		p{
			@include fs(26,54,.1);
		}
	}
}

#business01{
	padding-bottom: p2r(300);
	figure{
		background-color: $c1;
	}
	
	.content{
		margin-left: auto;
		
		hgroup{
			padding: p2r(60) 0 p2r(90);
			margin-bottom: p2r(50);
			
			h2{
				color: #fff;
				
				&::after{
					filter: brightness(0) invert(1);
				}
			}
		}
		
		&>ul{
			@include fs(34,56,.1);
			padding-left: 4rem;
			
			li{
				&::after{
					width: calc(100% + 4rem);
					height: p2r(1.5);
				}
			}
		}
	}
}

#business02{
	padding-bottom: p2r(130);
	
	h3{
		margin-bottom: 4em;
	}
	
	.content{
		margin-right: auto;
		
		p{
			width: 100%;
		}
	}
}

#reason{
	padding-bottom: p2r(90);
	
	.content{
		width: p2r(610);
		padding: p2r(100) 0;
		margin: 0 auto;
		
		&::before{
			width: 100vw; height: calc(100% + 10rem);
			top: 0; right: p2r(-70);
		}
		
		h2{
			@include fs(148,125,0);
			margin-bottom: .5em;
		}
		
		h3{
			@include fs(36,38);
			margin-bottom: 1.5em;
		}
		
		p{
			@include fs(26,54,.1);
		}
	}
	
	figure{
		width: p2r(650);
		margin-left: auto;
	}
}

#catch{
	padding: p2r(180) 0 p2r(160);
	
	h2{
		@include fs(120,102,0);
	}
}

#profile{
	padding-top: p2r(100);
	
	hgroup{
		width: 100%;
		margin: 0 auto;
		
		h2{
			@include fs(80,80,0);
			margin: p2r(80) auto p2r(30);
		}
		
		h6{
			@include fs(26,38);
		}
	}
	
	.content{
		width: p2r(610);
		margin: auto;
		
		table{
			@include fs(26,48);
			margin-bottom: p2r(100);
			
			th,td{
				display: block;
			}
			
			th{
				padding: 1em .75em;
				letter-spacing: .15em;
				border-bottom: none;
			}
			
			td{
				padding: 0 .75em 1.5em;
				
				&.nbb{
					padding-bottom: 0;
					border-bottom: none;
				}
			}
		}
		
		hr{
			margin: 5rem 0;
		}
		
		.group{
			h4{
				@include fs(26,48);
				margin-left: 1.15em;
				text-indent: -1.15em;
			}
			
			h5{
				@include fs(26,48);
			}
			
			a.button{
				width: 100%;
				height: p2r(150);
				@include fs(36,76);
				margin-top: 1.5em;
				
				span{
					@include fs(24,76);
				}
			}
		}
	}
	
	iframe{
		aspect-ratio: 4 / 3;
	}
}

#contact-link{
	padding: p2r(100) 0;
	
	a{
		width: p2r(610);
		@include fs(44);
	}
}
}


@media (max-width: 991.98px) and (min-aspect-ratio: 8/5) and (orientation: landscape) {
}