@charset "UTF-8";

/**
 * オリジナルcss
 */

.mainvisual_area {
	background-color: #EAF8FF;
	padding: 120px 40px 80px;
	position: relative;
}

.mainvisual_inner {
	background-image: url(../images/front-page/mainvisual/mv_bg.jpg);
	background-size: cover;
	background-position: center;
	aspect-ratio: 1080 / 524;
	border-radius: 40px;
	padding: 32px 16px;
	align-content: center;
}

.mainvisual_inner_text {

	background-color: #fff;
	width: clamp(288px, 70vw, 690px);
	margin: 0 auto;
	padding: 16px 32px 28px;

	clip-path: polygon(50% 0%, 100% 15%, 100% 100%, 0 100%, 0% 15%);

	.mv_text_icon {
		width: clamp(86px, 8.9vw, 128px);
		aspect-ratio: 1;
	}

	h1 {
		text-align: center;
		font-size: clamp(20px, 3vw, 29px);
		line-height: 1.8;
		margin-top: -0.5em;

		img {
			display: inline;
			width: auto;
			height: 1.6em;
			vertical-align: middle;
		}

		.text_strong {
			font-size: 1.2em;
		}
	}
}

.mainvisual_inner_point {
	text-align: center;
	font-size: clamp(16px, 2.2vw, 20px);
	color: #fff;
	list-style: none;
	padding: 0;
	margin-top: clamp(16px, 2.2vw, 24px);
	margin-bottom: 0;
	max-width: 480px;

	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 16px;

	li {
		background-color: var(--c2);
		padding: 8px 28px;

		&:last-child {
			flex-shrink: 0;
		}
	}
}

.owner_message {
	position: absolute;
	inset: 0;

	.owner_image {
		position: absolute;
		bottom: 0;
		left: 0;
		width: clamp(178px, calc(245 / 1440 * 100vw), 245px);
		aspect-ratio: 245 / 262;
		z-index: 2;
	}

	.time_icon {
		position: absolute;
		width: clamp(120px, calc(182 / 1440 * 100vw), 182px);
		aspect-ratio: 1;
		bottom: 48px;
		left: clamp(120px, calc(180 / 1440 * 100vw), 180px);
		z-index: 1;
	}
}


@media screen and (max-width: 768px) {
	.mainvisual_area {
		padding-top: 80px;
	}
}

@media screen and (max-width: 480px) {
	.mainvisual_area {
		padding: 40px 16px 105px;

	}

	.mainvisual_inner {
		aspect-ratio: 358 / 515;
		background-image: url(../images/front-page/mainvisual/mv_bg_sp.jpg);
		align-content: flex-start;
		padding-top: 72px;
	}

	.mainvisual_inner_text {
		padding: 12px 16px 20px;

		h1 {
			line-height: 1.6;
		}
	}

	.mainvisual_inner_point {
		gap: 8px 4px;

		li {
			padding: 4px 16px;
		}
	}

	.owner_message .owner_image {
		right: 0;
		left: auto;
		bottom: 12px;
	}

	.owner_message .time_icon {
		bottom: 36px;
		left: auto;
		right: 32%;
		bottom: 50px;
		transform: rotate(-15deg);
	}
}