@charset "UTF-8";

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

/* front-page common parts */

.top_content {
	padding-top: 80px;
	padding-bottom: 80px;
	/* padding-top: clamp(40px, 6.82vw, 80px);
	padding-bottom: clamp(40px, 6.82vw, 80px); */

	&.bg_blue {
		background-color: var(--c3);
	}

	@media screen and (max-width: 480px) {
		.button_more {
			text-align: center;
		}
	}
}

.top_content_header {
	text-align: center;

	h2 {
		font-size: 2.8rem;
	}

	h2 .strong {
		font-size: 3.2rem;
	}

	h2 .border_y {
		text-decoration: underline;
		text-underline-offset: -4px;
		text-decoration-thickness: 8px;
		text-decoration-color: #FFEE54;
	}

	@media screen and (max-width: 480px) {

		h2 {
			font-size: 2rem;
		}

		h2 .strong {
			font-size: 2.2rem;
		}

		&+.aligncenter {
			text-align: left;
			font-size: 1.5rem;
		}
	}
}

/* --- news section --- */

.content_news {
	background-color: var(--c2);
	max-width: 680px;
	margin-top: -20px;
	margin-left: auto;
	border: 1px solid var(--c2);
	border-radius: 20px 0 0 20px;
	position: relative;
	z-index: 3;
	transition: background-color 0.3s;

	&:has(a:hover) {
		background-color: #fff;

		.top_news_element_text {
			color: var(--c2);
		}
	}

	.top_news_element_text {
		display: flex;
		align-items: baseline;
		gap: 24px;
		color: #fff;
		padding: 12px 32px 12px 52px;
		transition: color 0.3s;

		.top_news_element_title {
			font-size: 1.6rem;
			font-weight: 400;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.top_news_element_date {
			font-family: var(--en);
			font-size: 1.4rem;
			font-weight: 400;
		}
	}

	.nocontents_text {
		padding: 12px 32px 12px 52px;
		color: #fff;
	}

	@media screen and (max-width: 768px) {
		max-width: calc(100% - 16px);

		.top_news_element_text {
			padding: 8px 16px;
			gap: 16px;
		}
	}

}

/* --- concept section --- */
.content_concept {
	padding-top: 64px;

	.top_content_header {
		position: relative;

		.concept_owner_img {
			position: absolute;
			height: 140px;
			left: clamp(0rem, -6.143rem + 12.8vw, 5.375rem);
			top: 50%;
			transform: translateY(-50%);
		}

		.text_blue {
			font-size: 4rem;
			font-family: var(--en);
		}
	}

	.top_concept_list {
		justify-content: center;
		flex-wrap: wrap;
		gap: clamp(40px, 5vw, 60px) 3%;
		margin-top: 96px;

		.top_concept_element {
			display: flex;
			flex-direction: column;
			gap: 16px;
			background-color: var(--c3);
			padding: 48px 24px 40px;
			border-radius: 32px;
			position: relative;
			flex: 1 1 clamp(320px, 30%, 380px);

			.num {
				font-family: var(--en);
				display: block;
				color: var(--c2);
				font-size: 4.8rem;
				font-weight: 700;
				position: absolute;
				left: 24px;
				top: -26px;
			}

			.top_concept_title {
				font-size: 2.2rem;
				font-weight: bold;
				color: #353535;
				position: relative;
				z-index: 2;
			}

			.top_concept_text {
				line-height: 1.6;
			}

			.top_concept_img {
				position: absolute;
				right: 16px;
				top: -32px;
				width: 92px;
				z-index: 1;
			}
		}
	}

	@media screen and (max-width: 768px) {

		.top_content_header {
			display: flex;
			justify-content: center;
			align-items: flex-end;
			margin-left: calc(50% - 50vw);

			h2 {
				text-align-last: left;
				font-size: 1.6rem;

				.strong {
					font-size: 2rem;
				}

				.text_blue {
					font-size: 2.4rem;
				}
			}

			.concept_owner_img {
				position: static;
				transform: none;
				left: auto;
				top: auto;
				width: auto;
			}

			.concept_owner_message {
				height: 1.5em;
				margin-bottom: 8px;
			}
		}

		.top_concept_list {
			margin-top: 32px;

			.top_concept_element {
				padding: 48px 16px 24px;

				.top_concept_title {
					font-size: 2rem;
				}

				.top_concept_img {
					top: -16px;
				}
			}
		}
	}

	@media screen and (max-width: 480px) {}
}


/* --- case section --- */
.content_case {
	background-color: #60B9E5;
	background-image: url(../images/front-page/case/case_bg.png);
	background-size: cover;

	.case_inner {
		padding: 0 40px;
		max-width: none;
	}

	.case_wrapper {
		background-color: #fff;
		border-radius: 16px;
		padding: clamp(24px, 4.68vw, 64px);
		max-width: min(100%, 1200px);
		margin-inline: auto;
	}

	.top_content_header {
		position: relative;

		img {
			position: absolute;
			height: 140px;
			right: 200px;
			bottom: -8px;
		}
	}

	.top_case_list {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
		justify-content: center;
		gap: 32px;
		/* margin-top: 64px; */
	}

	.top_case_element {
		position: relative;
		display: grid;
		grid-template-rows: subgrid;
		grid-row: span 4;
		gap: 8px;

		.top_case_image {
			aspect-ratio: 4 / 3;
			border-radius: 16px;
			overflow: hidden;

			img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}

		/* 
		.content_case_element_new {
			position: absolute;
			left: 0;
			top: 0;
			z-index: 1;
			background: var(--c3);
			clip-path: polygon(0 0, 100% 0, 0 100%);
			width: 120px;
			height: 120px;
		}
	
		.content_case_element_new::before {
			content: 'NEW';
			position: absolute;
			display: block;
			left: 14%;
			top: 20%;
			z-index: 2;
			color: #fff;
			transform-origin: center;
			transform: rotate(-45deg);
			font-size: 2rem;
			font-weight: 600;
		} */

		.top_case_info {
			display: flex;
			flex-direction: column;
			height: 100%;
			gap: 4px;
		}

		.top_case_title {
			font-weight: 400;
			font-size: 1.8rem;
			padding-bottom: 8px;
			border-bottom: 1px solid var(--c2);
			flex: 1;
		}

		.top_case_detail {
			gap: 8px;

			&.text_blue {
				font-size: 2rem;
			}
		}

		.top_case_area_name {
			flex-shrink: 0;
		}

		.top_case_kouki,
		.top_case_cost {
			.small {
				font-size: 0.85em;
			}
		}

		.top_case_kouki::before {
			display: inline-block;
			content: '';
			background-color: var(--c2);
			width: 1px;
			height: 80%;
			vertical-align: middle;
			margin-right: 8px;
		}

		.top_case_category {
			position: absolute;
			top: 0;
			left: 0;
			background-color: var(--c2);
			color: #fff;
			min-width: 120px;
			max-width: calc(100% - 32px);
			padding: 4px 16px;
			border-radius: 16px 0 16px 0;
		}
	}

	@media (max-width: 1280px) {
		.top_content_header img {
			right: 0px;
		}
	}

	@media (max-width: 768px) {

		.top_case_element .top_case_info .top_case_detail {
			font-size: 1.6rem;
		}
	}

	@media (max-width: 480px) {
		background-size: 405%;

		&.top_content {
			margin-top: 80px;
			padding-top: 24px;
			padding-bottom: 80px;
		}

		.top_content_header {
			text-align-last: left;

			h2 {
				font-size: 1.6rem;
			}

			img {
				right: -28px;
			}
		}

		.case_inner {
			padding: 0 8px;
		}

		.case_wrapper {
			padding-bottom: 64px;
		}

		.top_case_list {
			gap: 40px;
		}

		.top_case_element {
			.top_case_image {
				aspect-ratio: 326 / 270;
			}

			.top_case_info .top_case_title {
				font-size: 1.4rem;
			}

			.top_case_info .top_case_detail.text_blue {
				font-size: 1.8rem;
			}
		}
	}
}

/* --- flow section --- */

.content_flow {
	--image-size: clamp(56px, 7.27vw, 72px);

	.content_flow_list {
		gap: clamp(24px, 5.8vw, 80px);
		position: relative;
		z-index: 1;

		&::before {
			content: "";
			position: absolute;
			width: 2px;
			background-color: var(--c2);
			left: calc(var(--image-size) / 2 - 1px);
			top: calc(+1px + var(--image-size));
			bottom: calc(-1px + var(--image-size));
			z-index: 0;
		}
	}

	.content_flow_element {
		align-items: center;
		gap: clamp(16px, 4.32vw, 60px);

		.content_flow_element_image {
			width: var(--image-size);
			height: auto;
			position: relative;
			z-index: 1;
			flex-shrink: 0;
		}

		.content_flow_element_info {
			gap: 8px;
			position: relative;

			h3 {
				margin: 0;
				font-size: 1.12em;
				font-weight: 500;
			}

			.flow_fukidashi_image {
				position: absolute;
				width: 358px;
				top: -50px;
				right: 20px;
			}
		}

	}

	@media screen and (max-width: 768px) {

		.content_flow_list::before {
			top: calc(-1px + var(--image-size));
			bottom: calc(40px + var(--image-size));
		}

		.content_flow_element {
			align-items: flex-start;

			.content_flow_element_info {
				margin-top: 12px;

				.flow_fukidashi_image {
					position: static;
					width: 314px;
					margin-top: -16px;
					margin-left: -40px;
				}
			}
		}
	}
}

/* --- faq section --- */
.content_faq {

	.top_content_header {
		position: relative;

		img {
			position: absolute;
			height: 140px;
			right: clamp(0rem, -6.143rem + 87.2vw, 5.375rem);
			top: 50%;
			transform: translateY(-50%);
		}
	}

	.top_content_header img {
		position: absolute;
		height: 140px;
		left: clamp(0rem, -6.143rem + 12.8vw, 5.375rem);
		top: 50%;
		transform: translateY(-50%);
	}

	.content_faq_list {
		display: flex;
		flex-direction: column;

		.content_faq_question {
			cursor: pointer;
			list-style: none;
			display: grid;
			grid-template-columns: auto 1fr auto;
			align-items: baseline;
			gap: clamp(12px, 2.04vw, 24px);
			font-size: clamp(1.6rem, 2vw, 1.8rem);
			line-height: 1.5;
			font-weight: 600;
			padding: clamp(8px, 1.36vw, 16px);
			padding-bottom: clamp(16px, 2.72vw, 24px);
			background-image: repeating-linear-gradient(90deg, #00659f, #00659f 6px, transparent 6px, transparent 12px);
			background-position: left bottom;
			background-repeat: repeat-x;
			background-size: 100% 1px;

			&::-webkit-details-marker {
				display: none;
			}
		}

		.content_faq_question span {
			position: relative;
			width: clamp(14px, 2vw, 20px);
			aspect-ratio: 1;
			justify-self: flex-end;
			align-self: center;
		}

		.content_faq_question span::before,
		.content_faq_question span::after {
			content: "";
			display: inline-block;
			width: 100%;
			height: 3px;
			background-color: var(--c2);
			transition: transform 0.4s ease;
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			left: 0;
		}

		.content_faq_question span::after {
			transform: rotate(-90deg) translateX(1px);
			transform-origin: center;
		}

		.content_faq_element[open] .content_faq_question span::after {
			transform: rotate(0deg) translateY(-50%);
		}

		.content_faq_answer {
			font-size: clamp(1.4rem, 1.75vw, 1.6rem);
			line-height: 1.8;
			transition: opacity 0.4s ease, transform 0.5s ease;
			opacity: 0;
			transform: translateY(-12px);
			padding: clamp(16px, 2.72vw, 24px) clamp(8px, 1.36vw, 16px);
			background-color: var(--c3);

			p {
				display: flex;
				align-items: baseline;
				gap: clamp(12px, 2.04vw, 24px);
			}

		}

		.content_faq_element[open] .content_faq_answer {
			opacity: 1;
			transform: translateY(0);
		}

		.content_faq_question::before,
		.content_faq_answer p::before {
			display: block;
			font-family: var(--en);
			font-size: clamp(1.4rem, 2vw, 1.8rem);
			color: #fff;
			font-weight: 500;
			line-height: 1;
			border-radius: 100vw;
			text-align: center;
			align-content: center;
			width: 2em;
			aspect-ratio: 1;
			flex-shrink: 0;
		}

		.content_faq_question::before {
			content: 'Q';
			background-color: var(--c2);
		}

		.content_faq_answer p::before {
			content: 'A';
			background-color: #707070;
		}
	}

	@media screen and (max-width: 480px) {
		padding-top: 32px;

		.top_content_header {
			display: flex;
			align-items: center;

			h2 {
				text-align-last: left;
				font-size: 1.6rem;
			}

			img {
				position: static;
				right: auto;
				top: auto;
				transform: none;
			}
		}

		.content_faq_list {
			gap: 8px;
			margin-top: 16px;

			.content_faq_question span::before,
			.content_faq_question span::after {
				height: 2px;
			}
		}
	}
}

/* --- company section --- */
.content_company {
	padding: 0;
	background-color: var(--c2);
	background-image: url(../images/front-page/company/company_bg.png);
	background-repeat: no-repeat;
	background-position: left center;
	background-size: contain;
	margin: 0 auto;
	/* height: 320px; */
	aspect-ratio: 1440 / 320;

	.company_text_area {
		height: 100%;
		align-content: center;
		display: flex;
		align-items: center;

		.company_text {
			color: #fff;
			line-height: 1.83;
			letter-spacing: 0.05em;
			margin-left: auto;
			max-width: 480px;

			img {
				height: 22px;
			}
		}

		.owner_image {
			align-self: flex-end;
			width: clamp(175px, 20vw, 244px);
			margin-left: -30px;
		}
	}

	@media screen and (max-width: 1400px) {
		background-position-x: calc((100vw - 1440px) / 2 + 0px);
		height: 300px;
		aspect-ratio: auto;
	}

	@media screen and (max-width: 880px) {
		background-image: url(../images/front-page/company/company_bg_sp.png);
		background-position: center top;
		background-size: contain;
		height: auto;

		&::before {
			content: "";
			display: block;
			padding-top: 54%;
		}
	}

	@media screen and (max-width: 768px) {

		.company_text_area {
			height: auto;
			max-width: 560px;
			display: block;
			position: relative;

			.company_text {
				margin: 0;
				padding-bottom: 32px;

				img {
					margin-top: 32px;
				}

				.sp_shrink {
					width: 80%;
					display: block;
				}
			}

			.owner_image {
				position: absolute;
				bottom: 0;
				right: 0;
			}
		}
	}

	@media screen and (max-width: 480px) {

		.company_text_area .company_text .sp_shrink {
			width: 65%;
		}
	}
}

.company_button_area {
	padding-top: clamp(80px, 11.3vw, 120px);
	padding-bottom: clamp(80px, 11.3vw, 120px);

	.company_button {
		color: var(--c2);
		border: 3px solid var(--c2);
		border-radius: 15px;
		max-width: 560px;
		width: 100%;
		height: 120px;
		align-content: center;
		font-size: 2.4rem;
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 4rem;
		text-decoration: underline;
		text-underline-offset: -1px;
		text-decoration-thickness: 5px;
		text-decoration-color: #FFEE54;

		&::after {
			content: "";
			display: inline-block;
			width: 1em;
			aspect-ratio: 1;
			background-image: url(../images/front-page/company/button_arrow.png);
			background-size: contain;
			background-repeat: no-repeat;
			background-position: center;
		}
	}

	@media screen and (max-width: 480px) {
		padding-left: 32px;
		padding-right: 32px;
	}
}