@charset "UTF-8";


@media all {
	h1, h2, h3 {color: var(--main-color);}
	.site-main {
		color: var(--main-color);
	}
	.main-section-header {
		position: absolute;
		display: block;
	}
	.main-section-ttl {
		writing-mode: vertical-rl;
		display: flex;
		flex-direction: column-reverse;
		align-items: flex-end;
	}
	.main-section-ttl::before {
		content: '';
		position: absolute;
		bottom: 0;
		left: calc(50% + .5em);
		display: block;
		width: var(--max1px);
		height: 100%;
		transform: scaleY(0);
		transform-origin: center top;
		background-color: var(--light-blue);
		transition: transform 1s ease-out 1.5s;
	}
	.main-section-ttl.animated::before {transform: scaleY(1);}
	.btn {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		padding-top: 2px;
		background-color: var(--main-color);
		border-radius: 2em;
		font-weight: 500;
		color: #fff;
		line-height: 1;
	}
	.btn::before {
		content: '';
		position: absolute;
		top: calc(50% - .25em);
		right: 1.25em;
		display: block;
		width: 1em;
		height: .5em;
		border-right: 1.5rem solid #fff;
		border-bottom: var(--max1px) solid #fff;
		transform: skewX(40deg);
	}
	/* sp */
	@media only screen and (max-width: 767px) {
		.site-main {
			padding-bottom: 120rem;
			background: center / contain url(../img/common/bg-sp.webp);
		}
		.main-section-ttl {
			width: 63rem;
			font-size: 22rem;
		}
		.main-section-ttl::after {
			font-size: 13rem;
		}
		.btn {
			height: 36rem;
			font-size: 15rem;
		}
		.detail-btn {margin-top: 30rem;}
		.detail-btn .btn {
			margin: 0 auto;
			width: 160rem;
		}
	}

	/* pc & tab */
	@media print,
	(min-width: 768px) {
		.site-main {
			padding-bottom: 270rem;
			background: center url(../img/common/bg.webp);
			background-size: max(1600px, 100%) auto;
		}
		.main-section-ttl {
			font-size: 28rem;
		}
		.main-section-ttl::after {
			font-size: 15rem;
		}
		.btn {
			height: 36rem;
			font-size: 15rem;
			transition: .3s;
			cursor: pointer;
		}
		.btn:hover {
			background-color: var(--light-blue);
		}
		.detail-btn .btn {
			margin: 0 auto;
			width: 180rem;
		}
	}
}

/* .main-visual */
@media all {
	.main-visual {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.main-visual-ttl {text-align: center;line-height: 1;}
	.main-visual-ttl img {display: block; width: 100%;}
	.main-visual-ttl small {display: block;margin-top: 1.2em;}

	.scrolldown {
		position: absolute;
		left: calc(50% - 42rem);
		bottom: 80rem;
		font-size: 12rem;
		color: var(--light-blue);
	}
	.scrolldown::after {
		content: '';
		position: absolute;
		top: 0;
		left: calc(50% - 1px);
		width: var(--max1px);
		height: 30rem;
		background-color: var(--light-blue);
		animation: scdwn 1.4s ease-in-out infinite;
		opacity: 0;
	}
	@keyframes scdwn {
		0% {
			height: 0;
			top: 0;
			opacity: 0;
		}
		30% {
			height: 30rem;
			opacity: 1;
		}
		100% {
			height: 0;
			top: 50rem;
			opacity: 0;
		}
	}
	.scrolldown span {
		display: block;
		transform: translateY(-1.25em);
	}

	/* pc & tab */
	@media print,
	(min-width: 768px) {
		.main-visual-logo {
			position: absolute;
			top: 22rem;
			left: max(35rem, calc(50% - 605rem));
		}
		.main-visual-ttl {
			width: 750rem;
		}
		.main-visual-ttl small {
			font-size: 28rem;
			font-weight: bold;
			letter-spacing: .24em;
		}
	}

	/* pc */
	@media (min-width: 1025px) {
		#home .site-header {
			top: -90rem;
			transition: .5s;
		}
		#home .site-header.active {top: 25rem;}

		.main-visual {
			height: 816rem;
		}
		.main-visual-logo img {width: 152rem;}
		
		.main-visual-nav {
			position: absolute;
			top: 30rem;
			right: max(30rem, calc(50% - 480rem));
			width: 600rem;
			height: 45rem;
			font-size: 14rem;
		}
		.main-visual-nav-list {
			display: flex;
		}
	}

	/* sp & tab */
	@media (max-width: 1024px) {
		.main-visual {
			height: 100svh;
			transition: height .5s;
		}
		.main-visual-logo {display: none;}
		.main-visual-ttl {
			width: calc(100% - 46rem);
			max-width: 600rem;
		}
		.main-visual-ttl small {
			font-size: 28rem;
			font-weight: bold;
			letter-spacing: .24em;
		}

		/* sp */
		@media only screen and (max-width: 767px) {
			.main-visual-ttl small {font-size: 18rem;}
			.scrolldown {
				bottom: 30rem;
				left: calc(50% - 42rem);
			}
		}

		/* tab */
		@media (min-width: 768px) {
			.main-visual {min-height: 768rem;}
			.main-visual-ttl small {font-size: 28rem;}
		}
	}
}

/* vision-section */
@media all {
	.vision-circle-content {
		position: relative;
		aspect-ratio: 1;
		border-radius: 50%;
		background-color: #fff;
		writing-mode: vertical-rl;
	}
	.vision-circle-content {
		display: flex;
		flex-direction: column;
		margin: 20rem auto 0;
		width: 550rem;
	}
	.vision-circle-catch {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		font-weight: bold;
		line-height: 1;
	}
	.vision-circle-txt {
		font-weight: 500;
	}

	.detail-btn.vision {
		margin-top: -18rem;
	}

	/* sp */
	@media only screen and (max-width: 767px) {
		.vision-section {
			padding: 260rem 0 80rem;
		}
		.vision-section-header {
			top: 114rem;
			right: 20rem;
		}
		.vision-section-ttl {
			height: 150rem;
		}

		.vision-circle-content {
			width: 450rem;
			margin-left: -25rem;
		}
		.vision-circle-catch {
			margin: 75rem 109rem 0 0;
			width: 72rem;
			height: 320rem;
			font-size: 22rem;
		}
		.vision-circle-txt {
			margin: 124rem 40rem 0 0;
			font-weight: 500;
			line-height: 2.1;
		}
	}

	/* pc & tab */
	@media print,
	(min-width: 768px) {
		.vision-section {
			margin-top: 135rem;
		}
		.vision-section-header {
			top: -2rem;
			right: max(20rem, calc(50% - 450rem));
		}
		.vision-section-ttl {
			height: 215rem;
		}

		.vision-circle-content {
			display: flex;
			flex-direction: column;
			margin: 20rem auto 0;
			width: 550rem;
		}
		.vision-circle-catch {
			margin: 115rem 125rem 0 0;
			width: 100rem;
			height: 350rem;
			font-size: 25rem;
		}
		.vision-circle-txt {
			margin: 200rem 65rem 0 0;
			line-height: 2.267;
		}


		/* tab */
		@media (max-width: 1024px) {
			.vision-section {margin-top: 250rem;}
			.vision-section-header {
				top: -117rem;
				left: calc(50% + 300rem);
			}
		}
	}
}

/* project-section */
@media all {
	.content-lead {font-weight: 500;}
	.content-lead > span {display: block;}

	.project-list {counter-reset: cnt;}
	.project-item {
		position: relative;
		counter-increment: cnt;
	}
	.project-item::before {
		content: counter(cnt, decimal-leading-zero);
		position: absolute;
		top: -1em;
		left: calc(50% - 1em);
		display: flex;
		align-items: center;
		justify-content: center;
		padding-top: 2px;
		width: 2.077em;
		height: 2.077em;
		background-color: var(--main-color);
		border-radius: 50%;
		border: var(--max1px) solid var(--main-color);
		font-size: 26rem;
		font-weight: 500;
		color: #fff;
		pointer-events: none;
	}
	.project-item a {
		overflow: hidden;
		display: flex;
		flex-direction: column;
		height: 100%;
		border-radius: 50%;
		background-color: #fff;
	}
	.project-item a > * {height: 50%;overflow: hidden;}
	.project-item-txt {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		padding: 4em 0 1em;
		text-align: center;
		color: var(--gray);
		line-height: 1.467;
	}
	.project-item-copy {
		font-weight: bold;
		color: var(--txt);
		font-weight: 800;
		line-height: 1;
	}
	.project-item-txt {
		padding: 4em 0 1em;
		text-align: center;
		color: var(--gray);
		font-size: 15rem;
		line-height: 1.467;
	}
	.project-item-copy {
		font-size: 25rem;
		font-weight: bold;
		color: var(--txt);
		font-weight: 800;
		line-height: 1;
	}
	.project-item-img img {
		display: block;
		width: 100%;
		transition: .3s;
	}

	/* sp */
	@media only screen and (max-width: 767px) {
		.project-section {padding: 300rem 30rem 0;}
		.project-section-header {
			top: 60rem;
			left: 20rem;
		}
		.project-section-ttl {height: 150rem;}
		
		.project-item {
			margin: 60rem auto 0;
			width: 320rem;
			height: 320rem;
		}
	}

	/* pc & tab */
	@media print,
	(min-width: 768px) {
		.project-section {margin-top: 170rem;}
		.project-section-header {
			top: 100rem;
			left: calc(50% - 400rem);
		}
		.project-section-ttl {height: 212rem;}
		.section-content {position: relative;}
		.project-content {padding-top: 140rem;}
		.content-lead {
			position: absolute;
			top: 140rem;
			left: calc(50% - 180rem);
			width: 580rem;
		}

		.project-list {
			display: flex;
			justify-content: space-between;
			margin: 300rem auto 0;
			padding: 0 10rem;
			max-width: 1020rem;
		}
		.project-item {
			width: 32%;
			height: min(320rem, calc(32vw - 6.667rem));
		}
		.project-item:nth-child(2) {transition-delay: .2s;}
		.project-item:nth-child(3) {transition-delay: .4s;}
		a:hover .project-item-img img {scale: 1.05;}

		.detail-btn.project {margin-top: 50rem;}

		@media (max-width: 1024px) {
			.project-list {
				flex-wrap: wrap;
				justify-content: center;
				margin: 250rem auto 0;
				gap: 50rem;
			}
			.project-item {
				width: 320rem;
				height: 320rem;
			}
			.project-item:nth-child(3) {transition-delay: 0s;}
		}
	}

}

/* base-section */
@media all {
	.ja_ea-img img {display: block;width: 100%;}
	.base-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		background-color: #fff;
		border-radius: 30rem;
	}

	/* sp */
	@media only screen and (max-width: 767px) {
		.base-section {
			margin-top: 100rem;
			padding: 0 30rem;
		}
		.base-section-header {
			top: 0;
			left: 20rem;
		}
		.base-section-ttl {height: 150rem;}
		.base-content {
			padding-top: 300rem;
		}
		.ja_ea-list {
			margin: 20rem auto 0;
			width: 340rem;
		}
		.ja_ea-item {width: 350rem;}
		.ja_ea-img {
			margin: 0 auto;
			width: 280rem;
		}

		.base-list {
			padding: 24rem 24rem 56rem;
		}
		.base-item:nth-child(n+3) {margin-top: 20rem;}
		.detail-btn.ja_en {margin-top: -18rem;}
	}

	/* pc & tab */
	@media print,
	(min-width: 768px) {
		.base-section {margin-top: 90rem;}
		.base-section-header {
			top: 100rem;
			left: max(0px, calc(50% - 400rem));
		}
		.base-section-ttl {height: 160rem;}
		.base-content {
			padding-top: 300rem;
		}
		.ja_ea-list {
			display: flex;
			justify-content: space-between;
			margin: 0 auto;
			width: 760rem;
		}
		.ja_ea-item {width: 350rem;}
		.ja_ea-img {
			margin: 0 auto;
			width: 320rem;
		}

		.base-list {
			padding: 24rem 24rem 56rem;
		}
		.base-item:nth-child(n+3) {margin-top: 20rem;}
		.detail-btn.ja_en {margin-top: -18rem;}


	}
}

/* news-section */
@media all {
	.news-list {background-color: #fff;}
	.news-item + .news-item {
		margin-top: 1.25em;
		padding-top: 1.25em;
		border-top: var(--max1px) solid #f0f6f6;
	}
	.news-item a {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}
	.news-date {display: block;}
	.news-cat {
		display: flex;
		align-items: center;
		justify-content: center;
		padding-top: 2rem;
		width: 65rem;
		height: 1.6em;
		border: var(--max1px) solid var(--gray);
		color: var(--gray);
		line-height: 1;
		font-size: 13rem;
	}
	.news-cat.info {
		border-color: var(--main-color);
		color: var(--main-color);
	}
	.news-cat.column {
		border-color: #009488;
		color: #009488;
	}
	.news-ttl {
		display: -webkit-box;
		overflow: hidden;
		-webkit-box-orient: vertical;
	}
	.detail-btn.news {margin-top: -18rem;}

	/* sp */
	@media only screen and (max-width: 767px) {
		.news-section {margin-top: 120rem;}
		.news-section-header {
			top: 0;
			left: 20rem;
		}
		.news-content {padding-top: 190rem;}
		.news-section-ttl {height: 150rem;}
		.news-list {
			margin: 0 auto;
			padding: 20rem;
			width: 340rem;
			border-radius: 30rem;
			font-size: 15rem;
		}
		.news-date {width: 6em;}
		.news-ttl {
			width: 100%;
			-webkit-line-clamp: 2;
		}
	}

	/* pc & tab */
	@media print,
	(min-width: 768px) {
		.news-section {margin-top: 95rem;}
		.news-section-header {
			top: 100rem;
			left: max(calc(50% - 480rem), 10rem);
		}
		.news-section-ttl {height: 146rem;}
		.news-content {padding-top: 140rem;}
		.news-list {
			margin: 0 auto;
			width: calc(100% - 200rem);
			padding: 35rem 43rem 53rem;
			max-width: 760rem;
			border-radius: 30rem;
			font-size: 15rem;
		}
		.news-item a {
			justify-content: space-between;
		}
		.news-ttl {
			width: calc(100% - 185rem);
			-webkit-line-clamp: 1;
		}
	}
}

/* tab */
@media (min-width: 768px) and (max-width: 1024px) {
	.main-section-ttl {height: 180rem;}
}

/* deco */
@media all {
	/* sp */
	@media only screen and (max-width: 767px) {
		.deco-c-1 {
			top: 105rem;
			left: -75rem;
		}
		.deco-c-2 {
			top: -15rem;
			right: -150rem;
		}
		.deco-c-3 {
			bottom: 170rem;
			left: -50rem;
		}
		.deco-c-4 {
			bottom: -115rem;
			right: -80rem;
		}
		.deco-c-5 {display: none;}
		.deco-c-6 {
			bottom: 20rem;
			right: -80rem;
			transform: scaleX(-1);
		}

		.deco-c-7 {
			top: 0;
			left: -130rem;
		}
		.deco-c-8 {display: none;}

		.deco-c-9 {
			bottom: 100%;
			left: -103rem;
			transform: scaleY(-1);
		}

		.deco-c-11 {
			top: -60rem;
			left: -110rem;
		}
		.deco-c-12 {
			top: 10rem;
			right: -30rem;
		}
		.deco-c-13 {
			top: 175rem;
			right: -70rem;
			transform: scale(1, -1);
		}

		/*イラスト*/
		.deco-10 {
			top: calc(50% - 250rem);
			right: 30rem;
		}
		.deco-3 {
			top: calc(50% + 50rem);
			left: 10rem;
		}
		.deco-4 {
			top: 70%;
			right: 20rem;
		}
		.deco-1 {
			top: 120rem;
			left: 16rem;
		}
		.deco-6 {
			bottom: -145rem;
			right: -8rem;
		}
	}

	/* tab */
	@media print,
	(min-width: 768px) and (max-width: 1024px) {
		/*雲*/
		.deco-c-1 {
			bottom: calc(50% + 90rem);
			left: 0;
		}
		.deco-c-2 {
			top: -10rem;
			left: calc(50% + 100rem);
		}
		.deco-c-3 {
			bottom: 170rem;
			left: -100rem;
		}
		.deco-c-4 {
			bottom: -134rem;
			left: calc(50% + 150rem);
		}
		.deco-c-5 {
			top: 20rem;
			left: calc(50% - 650rem);
			transform: scaleY(-1);
		}
		.deco-c-6 {
			bottom: 0;
			left: calc(50% + 280rem);
			transform: scaleX(-1);
		}

		.deco-c-7 {
			top: 18rem;
			left: calc(50% - 604rem);
		}
		.deco-c-8 {
			top: 140rem;
			left: calc(50% + 240rem);
			transform: scale(-1,-1);
		}

		.deco-c-9 {
			top: 20rem;
			left: calc(50% - 700rem);
			transform: scaleY(-1);
		}

		.deco-c-11 {
			top: 20rem;
			left: calc(50% - 600rem);
		}
		.deco-c-12 {
			bottom: -220rem;
			left: calc(50% + 250rem);
		}
		.deco-c-13 {
			top: 200rem;
			left: calc(50% + 240rem);
			transform: scale(1, -1);
		}

		/*イラスト*/
		.deco-10 {
			bottom: calc(50% + 80rem);
			right: 20rem;
		}
		.deco-3 {
			top: calc(50% + 60rem);
			left: calc(50% - 350rem);
		}
		.deco-4 {
			bottom: 160rem;
			left: calc(50% + 180rem);
		}
		.deco-1 {
			top: -200rem;
			left: calc(50% - 380rem);
		}
		.deco-6 {
			top: calc(100% - 100rem);
			left: calc(50% + 120rem);
		}
	}

	/* pc */
	@media print,
	(min-width: 1025px) {
		/*雲*/
		.deco-c-1 {
			top: 35rem;
			left: calc(50% - 550rem);
		}
		.deco-c-2 {
			top: 100rem;
			left: calc(50% + 300rem);
		}
		.deco-c-3 {
			top: 570rem;
			left: calc(50% - 790rem);
		}
		.deco-c-4 {
			top: 700rem;
			left: calc(50% + 300rem);
		}
		.deco-c-5 {
			top: 10rem;
			left: calc(50% - 950rem);
			transform: scaleY(-1);
		}
		.deco-c-6 {
			bottom: 0;
			left: calc(50% + 350rem);
			transform: scaleX(-1);
		}

		.deco-c-7 {
			top: 0;
			left: calc(50% - 704rem);
		}
		.deco-c-8 {
			top: 100rem;
			left: calc(50% + 390rem);
			transform: scale(-1,-1);
		}

		.deco-c-9 {
			top: 0;
			left: calc(50% - 820rem);
			transform: scaleY(-1);
		}

		.deco-c-11 {
			top: 0;
			left: calc(50% - 835rem);
		}
		.deco-c-12 {
			bottom: -120rem;
			left: calc(50% + 350rem);
		}
		.deco-c-13 {
			top: 200rem;
			left: calc(50% + 290rem);
			transform: scale(1, -1);
		}

		/*イラスト*/
		.deco-10 {
			top: 80rem;
			left: calc(50% + 372rem);
		}
		.deco-3 {
			top: 420rem;
			left: calc(50% - 600rem);
		}
		.deco-4 {
			bottom: -20rem;
			left: calc(50% + 240rem);
		}
		.deco-1 {
			top: 10rem;
			left: calc(50% - 600rem);
		}
		.deco-6 {
			top: calc(100% - 150rem);
			left: calc(50% + 260rem);
		}
	}
}






/* template-section */
@media all {
	/* sp */
	@media only screen and (max-width: 767px) {}

	/* pc & tab */
	@media print,
	(min-width: 768px) {}
}