@charset "utf-8";
@import url('assets/css/style.css');

/* =============================================

	main-layout

============================================= */

/* == Main Visual
============================================= */

main {
	width 					: 100%;
	max-width 				: 1300px;
	margin 					: 0 auto; 
	padding 				: 0 15px;
	@media screen and (max-width: 1100px) {
	}
	@media screen and (max-width: 640px) {
	}
}
.mvs {
	margin-bottom 			: var(--space40);
	position 				: relative;
	aspect-ratio 			: 16/5.6;
	@media screen and (max-width: 800px) {
		aspect-ratio  		: 16/6.5;
	}
	@media screen and (max-width: 640px) {
		aspect-ratio  		: 16/8;
	}
	& > img {
		width 				: 100%;
		max-width 			: 1300px;
		height 				: auto;
		position 			: absolute;
		top 				: 0;
		left 				: 0;
	}
	& figcaption {
		width 				: 35%;
		font-size 			: var(--font22);
		color 				: var(--accept_red);
		line-height 		: 1.6;
		position 			: absolute;
		bottom 				: 0;
		right				: 0;
		@media screen and (min-width: 1220px) {
			margin-bottom 	: 2%;
			padding-right 	: 80px;
		}
		@media screen and (max-width: 1220px) {
			padding-right 	: 40px;
		}
		@media screen and (max-width: 1000px) {
			padding-right 	: 0px;
		}
		@media screen and (max-width: 800px) {
			padding-right 	: 0px;
			width 			: 100%;
		}
	}
}
.performance {
	display 				: flex;
	align-items 			: stretch;
	gap  					: var(--space25);
	margin-bottom 			: var(--space40);
	@media screen and (max-width: 640px) {
		flex-wrap 			: wrap;
	}
	& li {
		width 				: calc((100% / 4));
		font-size 			: var(--font16);
		font-weight 		: var(--medium);
		color  				: var(--blue);
		line-height 		: 1.4; 
		@media screen and (max-width: 640px) {
			width 			: calc((100% / 2.1));
		}
	}
	& img {
		width 				: 100%;
		height 				: auto;
		aspect-ratio 		: 16/6.5;
		margin-bottom 		: var(--space15);
	}
	& a:hover {
		opacity: 0.8;
	}
}
.service_menu {
	display 				: flex;
	flex-wrap 				: wrap;
	align-items 			: stretch;
	gap  					: var(--space15);
	margin-bottom 			: var(--space40);
	& div {
		width 				: calc(100% / 4.18);
		padding 			: 0.5em;
		border-radius 		: var(--rad6);
		&:hover,
		&.hover {
			background 		: 
				repeating-linear-gradient(-45deg, #F8E2E0, #F8E2E0 3px,#FAE8E7 3px, #FAE8E7 7px);
			cursor 			: pointer;
		}
		@media screen and (max-width: 1140px) {
			width 				: calc(100% / 4.2);
		}
		@media screen and (max-width: 1040px) {
			width 				: calc(100% / 4.28);
		}
		@media screen and (max-width: 800px) {
			width 				: calc(100% / 2.07);
		}
		@media screen and (max-width: 640px) {
			width 			: calc((100% / 2.05));
		}
	}
	& dt {
		background-image: linear-gradient(0deg, var(--accept_red), var(--palegred));
		font-size 			: var(--font22);
		font-weight 		: var(--medium);
		color  				: var(--white);
		text-align 			: center;
		margin 				: 0 auto 0.7em;
		padding 			: 3em 0.2em 2em;
		position 			: relative;
		& .hole {
			content: '';
			position: absolute;
			inset: 0.5em 0 0 0;
			margin: 0 auto;
			width: 85%;
			border-top: dotted 0.7em #fff;
			height:4em;
			top: 0.7em;
		}
		& a {
			color  			: var(--white);
			text-decoration : none;
		}
	}
	& dd {
		font-size 			: var(--font14);
		font-weight 		: var(--medium);
		color 				: var(--accept_red);
		text-indent 		: -1.3em;
		padding-left 		: 1.3em;
		margin-top 			: 0.5em;
	}
	& dd::before {
		content: "● ";
		color: var(--accept_red);
	}
}
.links {
	display 				: flex;
	flex-wrap 				: wrap;
	align-items 			: stretch;
	gap  					: var(--space15);
	margin-bottom 			: var(--space90);
	& li {
		width 				: calc(100% / 5.18);
		padding 			: 0.5em;
		border-radius 		: var(--rad6);
		& img {
			width 				: 100%;
			height 				: auto;
		}
		& a:hover {
			opacity: 0.8;
		}
		@media screen and (max-width: 1140px) {
			width 				: calc(100% / 5.2);
		}
		@media screen and (max-width: 1040px) {
			width 				: calc(100% / 5.28);
		}
		@media screen and (max-width: 800px) {
			width 				: calc(100% / 3.07);
		}
		@media screen and (max-width: 640px) {
			width 			: calc((100% / 3.05));
		}
	}
}