@charset "UTF-8";

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

/* content header */

.top_content_header {

	.top_title {
		margin-top: 0;
		margin-bottom: 48px;
		font-size: 2.4rem;
		font-weight: 500;
		letter-spacing: 0.05em;
		display: flex;
		align-items: center;
		gap: 24px;
	}

	.top_title_en {
		font-family: var(--en);
		font-size: 5.6rem;
		font-weight: 800;
		color: #305F49;
		letter-spacing: 0.08em;
		text-transform: uppercase;
	}

	p {
		font-size: 1.8rem;
	}
}

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

.top_content_b {
	padding-top: 80px;
	padding-bottom: 80px;
	background: #FEFBF5;
}

/* case */
.content_case {
	position: relative;

	.inner {
		position: relative;
		z-index: 1;
	}
}

.content_case::after {
	content: "";
	display: block;
	position: absolute;
	top: 130px;
	bottom: 0;
	left: 0;
	z-index: 0;
	width: calc((924 / 1400) * 100%);
	background-color: var(--c3);
}

.case_category_wrapper {
	margin-bottom: 40px;
}

.case_category_list {
	list-style-type: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 24px 40px;

	li a {
		background-color: #fff;
		border-radius: 100vw;
		width: 160px;
		display: block;
		text-decoration: none;
		text-align: center;
		font-weight: 500;
	}
}


.content_reform_elements {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 64px;
	margin-bottom: 64px;
}

.content_case_element {
	position: relative;

	a {
		text-decoration: none;
	}

	.list_case_image {
		aspect-ratio: 320 / 240;

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

	.list_case_info {
		.list_case_detail {
			display: flex;
			align-items: center;
			gap: 8px;
			padding: 0;
			margin: 0;
			margin-top: 16px;
			list-style-type: none;

			li {
				font-size: 1.6rem;
				color: var(--c2);
				font-weight: 500;
			}

			li+li::before {
				content: '|';
				padding-right: 8px;
			}
		}

		h3 {
			font-size: 1.6rem;
			font-weight: 400;
			line-height: 1.78;
			margin: 0;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			text-overflow: ellipsis;
			-webkit-line-clamp: 3;
			overflow: hidden;
		}
	}
}

/* partners */
.content_partners {
	padding-bottom: 0;
}

.partners_header {
	text-align: center;

	.top_title {
		flex-direction: column;
		align-items: center;
		line-height: 1.5;
		gap: 0;
	}

	.top_title_en {
		display: block;
	}

	p {
		margin-top: 64px;
	}
}

.partners_list {
	margin-top: 40px;
	/* display: flex;
	flex-wrap: wrap; */
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 40px;
	justify-content: center;
	align-items: center;

	.archive-list_item {
		flex: none;
		width: 220px;
		aspect-ratio: 11 / 5;
		display: flex;
		justify-content: center;
		align-items: center;

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

.top_partners_swiper {
	/* overflow: hidden; */


}

.content_concept {
	position: relative;
}

.content_concept::before {
	position: absolute;
	content: "";
	display: block;
	width: calc((1310 / 1400) * 100%);
	height: 406px;
	background-color: var(--c3);
	bottom: 0;
	left: 0;
}

.concept_container {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap: 40px;
	margin-top: 40px;

	.concept_img {
		width: 50%;
		max-width: 500px;

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

	.concept_title_wrapper {
		display: flex;
		align-items: center;
		gap: 32px;
	}

	.concept_title_wrapper p {
		font-family: var(--en);
		font-weight: 600;
		font-size: 8rem;
		line-height: 1.2;
		color: #305F49;
	}

	.concept_title {
		display: flex;
		flex-direction: column;
	}

	.concept_title .ja {
		font-size: 2.4rem;
		font-weight: 500;
	}

	.concept_title .en {
		font-family: var(--en);
		color: #305F49;
		font-size: 1.8rem;
		font-weight: 400;
	}
}

a.partner_button {
	span::before {
		background-image: url(../images/top/partner_icon.svg);
	}
}

#concept02.concept_container {
	margin-top: 120px;
	justify-content: flex-start;
	padding-bottom: 326px;
	position: relative;

	.concept_img_wrapper {
		position: absolute;
		right: 0;
		bottom: 0;
		width: 57%;
		height: 588px;

		img {
			width: calc((300 / 612) * 100%);
			max-width: 300px;
		}

		img:nth-of-type(1) {
			position: absolute;
			top: 0;
			right: 0;
		}

		img:nth-of-type(2) {
			position: absolute;
			bottom: 0;
			left: 0;
		}
	}

	.concept_contents {
		width: 60%;
		max-width: 540px;
	}
}

#concept03.concept_container {
	align-items: flex-end;
	justify-content: space-between;

	.concept_img {
		max-width: 400px;
	}

	.concept_contents {
		width: 60%;
		max-width: 580px;
	}
}


/* review */

.content_review {
	margin-top: 160px;

}


/* blog */
.content_blog {
	overflow: hidden;
	position: relative;
	padding-bottom: 120px;
	margin-bottom: 80px;

	.swiper-scrollbar {
		height: 2px;
		margin-bottom: 40px;
	}

	.swiper-scrollbar-drag {
		background-color: var(--c1);
	}
}

.content_blog::before {
	content: "";
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	width: calc((930 / 1400) * 100%);
	aspect-ratio: 930 / 670;
	max-height: 670px;
	background-color: var(--c3);
}

.top_blog {
	margin-bottom: 40px;
}

.top_blog_element a {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	position: relative;

	.top_blog_image {
		aspect-ratio: 320 / 240;
		width: 100%;
		height: 100%;

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

	.top_blog_element_category {
		padding: 3px 24px;
		font-size: 1.4rem;
		background-color: #fff;
		color: #305F49;
		font-weight: 600;
		width: fit-content;
		position: absolute;
		top: 0;
		left: 0;
	}

	.top_blog_info {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 100%;
		padding-top: 8px;

		h3 {
			margin: 0;
			font-size: 1.6rem;
			font-weight: 400;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			text-overflow: ellipsis;
			-webkit-line-clamp: 2;
			overflow: hidden;
		}

		.top_blog_element_date {
			font-size: 1.6rem;
			color: #1E3932;
			font-weight: 500;
		}
	}
}


/* siteinfo */
.content_siteinfo {
	padding: 120px 0;
}

.top_siteinfo {
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
	gap: 40px 5%;

}

.siteinfo_element {
	border-radius: 24px;
	aspect-ratio: 480 / 360;
	width: 45%;
	max-width: 480px;
	background-image: url(../images/top/siteinfo_1.jpg);
	background-size: cover;
	background-position: center;
	position: relative;
}

.siteinfo_element:nth-child(2) {
	background-image: url(../images/top/siteinfo_2.jpg);
}


.siteinfo_element {
	display: block;
	align-content: flex-end;
	width: 100%;
	height: 100%;
	text-decoration: none;
	transition: transform 0.3s ease;
	transform: scale(1);

	&:hover {
		transform: scale(1.02);
	}
}

.siteinfo_title {
	padding: 16px 24px;
	width: 278px;
	background-color: #fff;
	border-radius: 0 0 0 20px;
	position: relative;
	align-content: center;

	.ja {
		margin: 0;
		font-size: 1.8rem;
		font-weight: 400;
		line-height: 1.5;
	}

	.en {
		margin: 0;
		font-family: var(--en);
		font-size: 1.2rem;
		font-weight: 400;
		text-transform: uppercase;
		line-height: 1.2;
	}

	&::after {
		display: block;
		content: "";
		background-image: url(../images/top/siteinfo_arrow.svg);
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;
		width: 12px;
		aspect-ratio: 1;
		position: absolute;
		top: 60%;
		right: 24px;
		transform: translateY(-50%);
	}
}


/* company */
.content_company {
	padding-bottom: 0;
	position: relative;
}

.company_bg {
	position: absolute;
	bottom: 4%;
	left: 0;
	width: 100%;
	height: 156px;
	background-color: var(--c3);
	z-index: 0;
}

.top_company_wrapper {
	display: flex;
	gap: 56px;
	justify-content: flex-start;
	align-items: center;
	margin-bottom: 48px;
	position: relative;
	z-index: 1;
}

.top_company_wrapper .top_company_image {
	width: 50%;
	max-width: 540px;
}

.top_company_wrapper .top_company_info {
	width: 50%;
	max-width: 540px;

	h2 {
		font-size: 2.4rem;
		margin-bottom: 16px;
		font-weight: 500;
		letter-spacing: 0.05em;
	}

	ul {
		margin: 0;
		padding: 0;
	}

	li {
		display: flex;
		gap: 32px;
		align-items: flex-start;
	}

	li+li {
		margin-top: 20px;
	}

	li .top_company_list_left {
		border: 1px solid var(--c1);
		flex: 1;
		text-align: center;
		font-size: 1.4rem;
	}

	li .top_company_list_right {
		font-size: 1.6rem;
		flex: 3;
	}

	li .top_company_list_right .name {
		font-size: 1.8rem;
	}

	li .top_company_list_right .licence {
		padding-left: 1em;
	}
}

@media screen and (max-width:768px) {
	/* content header */

	.top_content_header {

		.top_title {
			margin-bottom: 40px;
			font-size: 1.6rem;
			gap: 16px;
		}

		.top_title_en {
			font-size: 4rem;
		}

		p {
			font-size: 1.4rem;
		}
	}

	.top_content {
		padding-top: 40px;
		padding-bottom: 40px;
	}

	.top_content_b {
		padding-top: 40px;
		padding-bottom: 40px;
	}

	/* case */
	.content_case {
		padding-bottom: 80px;
		margin-bottom: 80px;
	}

	.content_case::after {

		top: 75px;
		width: calc((300 / 390) * 100%);
	}

	.case_category_list {
		gap: 16px 24px;

		li a {
			width: 100px;
			font-size: 1.2rem;
			padding: 4px;
		}
	}

	.content_case_element {

		.list_case_info {
			padding-bottom: 0;

			.list_case_detail {
				gap: 8px;
				margin-top: 8px;

				li {
					font-size: 1.2rem;
				}

			}

			h3 {
				font-size: 1.4rem;
				-webkit-line-clamp: 2;
			}
		}
	}

	/* partners */

	.content_partners {
		overflow: hidden;
		padding-bottom: 0;
	}

	.partners_header {
		margin-bottom: 40px;

		.top_title {
			gap: 0;
			margin-bottom: 24px;
		}

		p {
			margin-top: 24px;
		}
	}

	.content_concept::before {
		width: calc((374 / 390) * 100%);
		aspect-ratio: 374 / 297;
		height: auto;
		bottom: 16px;
	}

	.concept_container {
		flex-direction: column;
		gap: 16px;
		margin-top: 0;

		.concept_img {
			width: 100%;
		}

		.concept_title_wrapper {
			gap: 16px;
			margin-bottom: 8px;
		}

		.concept_title_wrapper p {
			font-size: 4rem;
		}

		.concept_title {
			margin: 0;
		}

		.concept_title .ja {
			font-size: 1.8rem;
		}

		.concept_title .en {
			font-size: 1.4rem;
		}
	}

	#concept02.concept_container {
		margin-top: 48px;
		padding-bottom: 48px;
		position: relative;

		.concept_img_wrapper {
			position: static;
			width: 100%;
			height: auto;
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			gap: 8px;

			img:nth-of-type(1) {
				position: static;
				order: 1;
			}

			img:nth-of-type(2) {
				position: static;
				order: 0;
				margin-top: 40px;
			}
		}

		.concept_contents {
			width: 100%;
		}
	}

	#concept03.concept_container {
		align-items: center;

		.concept_img {
			max-width: 320px;
		}

		.concept_contents {
			width: 100%;
		}
	}

	a.partner_button {
		margin-top: 100px;
	}

	/* review */
	.content_review {
		margin-top: 40px;

		.button_more {
			text-align: right;
		}
	}

	/* siteinfo */
	.content_siteinfo {
		padding: 100px 0 40px;
	}

	.top_siteinfo {
		gap: 80px;
		padding: 0 16px;
	}

	.siteinfo_element {
		border-radius: 16px;
		aspect-ratio: 480 / 360;
		width: 100%;
	}

	.siteinfo_title {
		padding: 10px 24px;
		width: 220px;
		background-color: #fff;
		border-radius: 0 0 0 16px;
		position: relative;
		align-content: center;

		.ja {
			font-size: 1.4rem;
		}

		.en {
			font-size: 1.0rem;
		}

		&::after {
			width: 14px;
			position: absolute;
			top: 60%;
			right: 12px;
			transform: translateY(-50%);
		}
	}

	/* blog */

	.content_blog {

		.top_title {
			flex-direction: column;
			align-items: flex-start;
			gap: 0;
		}

		.link_button_r {
			text-align: center;

			a,
			span {
				margin-right: auto;
			}
		}
	}

	.content_blog::before {
		bottom: 0;
		left: 0;
		width: calc((300 / 390) * 100%);
		aspect-ratio: 300 / 568;
		max-height: 568px;
	}

	.top_blog {
		margin-bottom: 24px;
	}

	.top_blog_element {
		height: auto;
	}

	.top_blog_element a {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 100%;

		.top_blog_info {
			justify-content: flex-start;
			height: 100%;

			h3,
			.top_blog_element_date {
				font-size: 1.6rem;
			}
		}
	}

	/* company */
	.content_company {
		padding: 0;
	}

	.company_bg {
		bottom: 3%;
		height: 153px;
	}

	.top_company_wrapper {
		flex-direction: column;
		gap: 40px;
		align-items: flex-start;
		margin-bottom: 40px;
	}

	.top_company_wrapper .top_company_image {
		width: 100%;
		order: 1;
	}

	.top_company_wrapper .top_company_info {
		width: 100%;
		order: 0;

		h2 {
			margin: 0;
			margin-bottom: 24px;
		}

		ul {
			margin: 0;
			padding: 0;
		}

		li {
			display: flex;
			gap: 32px;
			align-items: flex-start;
		}

		li+li {
			margin-top: 16px;
		}

		li .top_company_list_left {
			flex: 1.5;
		}

		li .top_company_list_right {
			flex: 3;
		}

		li .top_company_list_right .name {
			font-size: 1.8rem;
		}

		li .top_company_list_right .licence {
			padding-left: 1em;
		}
	}

	.nocontents_text {
		font-size: 1.3rem;
	}
}

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

	/* Case */

	.content_reform_elements {
		padding: 0 16px;
		grid-template-columns: 1fr;
		gap: 40px;
		margin-bottom: 40px;
	}

	.content_case_element {
		.list_case_info {
			padding: 0;
		}
	}

}