@charset "utf-8";

.container {
	position: relative;
	height: 100vh;
}

/* ---------------------------------------------------
TOPビジュアルエリア
---------------------------------------------------- */

/* 動画背景 */
#video-area {
	position: fixed;
	z-index: -1;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	overflow: hidden;
	background: #0c426a;
}

#video {
	position: absolute;
	z-index: -1;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	/* 縦横幅指定 */
	width: 177.77777778vh;
	/* 16:9 の幅→16 ÷ 9＝ 177.77% */
	height: 56.25vw;
	/* 16:9の幅 → 9 ÷ 16 = 56.25% */
	min-height: 100%;
	min-width: 100%;
}

.herotxt {
	width: 100%;
	height: 100vh;
	overflow: hidden;
	margin: 0 auto;
	position: relative;
	color: #fff;
	font-feature-settings: normal;
	z-index: 999;
}

/* 文字サイズ */
@media screen and (min-width:1601px) {
	.copyMain {
		font-size: 91px;
	}

	.copy04 {
		font-size: 43px;
	}

	.copy05 {
		font-size: 34px;
	}

	.copyMain span {
		height: 106px;
	}
}

@media screen and (max-width:1600px) {
	.copyMain {
		font-size: 61px;
	}

	.copy04 {
		font-size: 29px;
	}

	.copy05 {
		font-size: 23px;
	}

	.copyMain span {
		height: 71px;
	}
}

@media screen and (max-width:960px) {
	.copyMain span {
		height: 102px;
	}

	.copyMain .copy02 {
		height: 150px;
	}
}

@media screen and (max-width:767px) {
	.copy04 {
		font-size: 15px;
	}

	.copy05 {
		font-size: 12px;
	}

	.copyMain span {
		height: 51px;
	}

	.copyMain .copy02 {
		height: 75px;
	}
}

/* PC */
.copyMain img {
	/* filter: drop-shadow(0 0 20px #0071b8);*/
	filter: drop-shadow(0 0 15px #000);
	height: 100%;
	width: auto;
	vertical-align: top;
}

.copyMain span,
.copySub span {
	display: block;
	line-height: 1;
	white-space: nowrap;
}

.copy01 {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -0.75em;
	transform: translate(-100%, -50%);
	animation: slideIn01 3s 1;
}

.copy02 {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	animation: zoomOut 5s 1;
}

.copy03 {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: 0.75em;
	transform: translate(0%, -50%);
	animation: slideIn02 3s 1;
}

.copy04 {
	letter-spacing: .35em;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -2.8em;
	/*  margin-left: -1em;*/
	transform: translate(-50%, -50%);
	animation: slideIn03 4.5s 1;
	/* text-shadow: 0 0 20px #0071b8;*/
	text-shadow: 0 0 20px #000;
}

.copy05 {
	letter-spacing: .3em;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: 3em;
	/* margin-left: -1.5em;*/
	transform: translate(-50%, -50%);
	animation: slideIn04 4.5s 1;
	/* text-shadow: 0 0 15px #0071b8;*/
	text-shadow: 0 0 15px #000;
}


@keyframes slideIn01 {
	0% {
		opacity: 0;
	}

	20% {
		opacity: 0;
		transform: translate(-100%, -1000px);
	}

	50% {
		opacity: 1;
		transform: translate(-100%, -50%);
	}
}

@keyframes slideIn02 {
	0% {
		opacity: 0;
	}

	20% {
		opacity: 0;
		transform: translate(0%, 1000px);
	}

	50% {
		opacity: 1;
		transform: translate(0%, -50%);
	}
}

@keyframes slideIn03 {
	0% {
		opacity: 0;
	}

	50% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@keyframes slideIn04 {
	0% {
		opacity: 0;
	}

	50% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@keyframes zoomOut {
	0% {
		opacity: 0;
	}

	70% {
		opacity: 0;
		transform: translate(-50%, -50%) scale(10);
	}

	100% {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1);
	}
}


/* SP */
@media screen and (max-width:960px) {
	.copy01 {
		transform: translate(-50%, 0%);
		margin-left: 0;
		margin-top: -180px;
	}

	.copy03 {
		transform: translate(-50%, 0%);
		margin-left: 0;
		margin-top: 58px;
	}

	.copy04 {
		margin-top: -244px;
		transform: translate(-50%, 0%);
	}

	.copy05 {
		margin-top: 186px;
		transform: translate(-50%, 0%);
	}

	@keyframes slideIn01 {
		20% {
			transform: translate(-50%, -1000px);
		}

		50% {
			transform: translate(-50%, 0%);
		}
	}

	@keyframes slideIn02 {
		20% {
			transform: translate(-50%, 1000px);
		}

		50% {
			transform: translate(-50%, 0%);
		}
	}
}


@media screen and (max-width:767px) {
	.copy01 {
		margin-top: -90px;
	}

	.copy03 {
		margin-top: 29px;
	}

	.copy04 {
		margin-top: -122px;
	}

	.copy05 {
		margin-top: 93px;
	}
}


/* -----------------------------------------------
４分野
----------------------------------------------- */
.field {
	padding: 100px 0 102px;
	background-image: url(../img/top/bg_01.png);
	background-size: auto 100%;
	background-position: 0 0;
}

.field a {
	transition: all .6s;
}

.field a:hover {
	/*	background-image: radial-gradient(rgba(255, 255, 255, .2) 10%, rgba(255, 255, 255, 0) 50%);*/
	transition: all .6s;
}

.field a:nth-child(1):hover {
	background-image: url(../img/top/field_hover_01.svg);
}

.field a:nth-child(2):hover {
	background-image: url(../img/top/field_hover_02.svg);
}

.field a:nth-child(3):hover {
	background-image: url(../img/top/field_hover_03.svg);
}

.field a:nth-child(4):hover {
	background-image: url(../img/top/field_hover_04.svg);
}

.field .section-inner {
	justify-content: space-between;
}

.field-ttl {
	font-size: 4.8rem;
	font-weight: normal;
	letter-spacing: .15em;
	line-height: 1.5;
	margin: 1.75em 0 1em;
}

.field .section-txt {
	margin-right: 75px;
}

.fieldBox1 {
	width: 58%;
}

.fieldBox2 {
	width: 42%;
	max-width: 420px;
	position: relative;
}

.fieldBox2 img {
	width: 100%;
}

.fieldBox2_illust {
	position: relative;
	width: 100%;
	padding-top: 100%;
}

.fieldBox2_illust div {
	width: 100%;
	position: absolute;
	left: 0;
	top: 0;
}

.fieldBox2_links {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	list-style: none;
}

.fieldBox2_links a {
	display: block;
	width: 50%;
	height: 50%;
}

/* アニメーション */
.flex {
	display: flex;
	flex-wrap: wrap;
}

.fadeUp {
	animation-name: fadeUpAnime;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
	opacity: 0;
}

@keyframes fadeUpAnime {
	from {
		opacity: 0;
		transform: translateY(100px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ブレイクポイント */
@media screen and (max-width: 1120px) {
	.field .section-txt {
		padding: 0;
	}
}

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

	.field {
		padding: 100px 0 102px;
		background-image: url(../img/top/bg_01a_sp.png),
			url(../img/top/bg_01b_sp.png);
		background-size: 100% auto,
			100% auto;
		background-position: 0 0, 0 100%;
	}

	.field .section-inner {
		width: 100%;
		justify-content: unset;
		padding: 0 15px;
	}

	.fieldBox1 {
		width: 100%;
		text-align: center;
	}

	.fieldBox2 {
		width: 100%;
		margin: 0 auto;
	}

	.field-ttl {
		font-size: 3.8rem;
	}

	.field .section-txt {
		margin-right: 0;
		margin-bottom: 3em;
	}
}

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

	.field {
		padding: 60px 0 95px;
	}

	.field-ttl {
		font-size: 2.8rem;
	}
}

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

	.field .section-txt {
		letter-spacing: .05em;
	}
}

/* -----------------------------------------------
フォトギャラリー（スクロール）
----------------------------------------------- */

/* scroll-infinity */
.scroll-infinity__item img {
	width: 100%;
	height: 100%;
	/* height: auto だと境界が揃わない */
	vertical-align: top;
}

@keyframes infinity-scroll-left {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-100%);
	}
}

.scroll-infinity__wrap {
	display: flex;
	overflow: hidden;
}

.scroll-infinity__list {
	display: flex;
	list-style: none;
	padding: 0
}

.scroll-infinity__list--left {
	animation: infinity-scroll-left 80s infinite linear 0.5s both;
}

.scroll-infinity__item {
	width: calc(100vw / 3);
	display: flex;
	flex-wrap: wrap;
}

.scroll-infinity__item .wide {
	width: 100%;
	height: 50%;
}

.scroll-infinity__item .small {
	width: 50%;
	height: 50%;
}

.scroll-infinity__item .tall {
	width: 50%;
	height: 100%;
	float: left;
}

.scroll-infinity__item.float {
	display: unset;
}

.scroll-infinity__item.float .small {
	float: left;
}

/* ブレイクポイント */
@media screen and (max-width:1024px) {
	.scroll-infinity__item {
		width: calc(100vw / 2);
	}
}

@media screen and (max-width:767px) {
	.scroll-infinity__item {
		width: calc(100vw / 1.5);
	}
}

/* -----------------------------------------------
総合力
----------------------------------------------- */
.strength {
	padding: 85px 0;
}

.strength .card-outer {
	position: relative;
	margin-bottom: 50px;
}

.strength .card-bg {
	max-width: 763px;
	height: 376px;
}

.strength .card-outer:nth-of-type(odd) .card-bg {
	margin-left: -200px;
}

.strength .card-outer:nth-of-type(even) .card-bg {
	margin-right: -200px;
	margin-left: 400px;
}

.strength .card {
	min-width: 494px;
	height: 266px;
	background: rgba(255, 255, 255, .9);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 15%;
}

.strength .card:hover img {
	opacity: 0;
	transition: all 0.6s;
}

.strength .card-outer:nth-of-type(odd) .card {
	right: 0;
}

.strength .card-outer:nth-of-type(even) .card {
	left: 0;
}

.strength .card p {
	font-size: 3rem;
	line-height: 1.55;
	letter-spacing: .1em;
	margin-bottom: .75em;
}

/* ブレイクポイント */
@media screen and (max-width:1400px) {

	.strength .card-outer:nth-of-type(odd) .card-bg {
		margin-left: 0;
	}

	.strength .card-outer:nth-of-type(even) .card-bg {
		margin-right: 0;
	}
}

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

	.strength .card-outer {
		padding: 0 25px;
	}

	.strength .card-bg {
		margin: 0 auto !important;
		background-size: 100% auto !important;
		height: 100%;
		max-width: unset;
	}

	.strength .card {
		position: unset;
		margin: -50px auto 70px;
		min-width: unset;
		max-width: 494px;
	}
}

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

	.strength {
		padding: 50px 0 30px;
	}

	.strength .card-outer {
		margin-bottom: 30px;
	}

	.strength .card {
		margin: -25px auto 0;
		min-width: 250px;
		width: 50%;
		height: auto;
		padding: 1.5em 0;
	}

	.strength .card p {
		font-size: 1.9rem;
	}
}

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

	.strength .card-outer {
		padding: 0 15px;
	}
}

/* -----------------------------------------------
ソリューション
----------------------------------------------- */
.solution {
	padding: 90px 0 145px;
	background-image: url(../img/top/bg_02.png);
	background-size: auto 100%;
	background-position: 50% 0;
}

.solution .card-box {
	max-width: 795px;
	margin: 0 auto;
	justify-content: space-between;
}

.solution .card {
	background: #e5eff7;
	width: 384px;
	height: 336px;
	margin-bottom: 27px;
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
}

.solution .card:hover img {
	opacity: 0;
	transition: all 0.6s;
}

.solution .card .solution-icon {
	display: inline-block;
	width: 85px;
	height: 68px;
	background-size: contain;
	background-repeat: no-repeat;
}

.solution .card .solution-icon.-sp {
	display: none;
}

.solution .card:nth-of-type(1) .solution-icon {
	background-image: url(../img/top/solution_ico_01.svg);
}

.solution .card:nth-of-type(2) .solution-icon {
	background-image: url(../img/top/solution_ico_02.svg);
}

.solution .card:nth-of-type(3) .solution-icon {
	background-image: url(../img/top/solution_ico_03.svg);
}

.solution .card:nth-of-type(4) .solution-icon {
	background-image: url(../img/top/solution_ico_04.svg);
}

.solution .card p {
	font-size: 3rem;
	line-height: 1.55;
	letter-spacing: .05em;
	margin: 0.35em 0 0.75em;
	text-align: center;
}


/* ブレイクポイント */
@media screen and (max-width:1024px) {

	.solution {
		background-image: url(../img/top/bg_02_sp.png);
		background-size: 100% auto;
	}

	.solution .card-box {
		justify-content: unset;
		padding: 0 25px;
	}

	.solution .card {
		width: 100%;
		height: auto;
		margin: 0 auto 2.25em;
		padding: 30px 0;
	}

	.solution .card .solution-icon.-sp {
		display: inline-block;
		margin: 0 10px -10px 0;
	}

	.solution .card .solution-icon.-pc {
		display: none;
	}

	.solution .card p {
		display: flex;
		align-items: center;
	}
}

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

	.solution {
		background-size: auto 100%;
		padding: 50px 0;
	}

	.solution .card {
		margin: 0 auto 1.75em;
	}

	.solution .card p {
		font-size: 1.8rem;
		margin: 0 0 0.75em -10px;
	}

	.solution .card .solution-icon.-sp {
		margin: 3px 7px 0 0;
		width: 50px;
		height: 40px;
	}
}

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

	.solution .card-box {
		padding: 0 15px;
	}

	.solution .card p {
		font-size: 1.5rem;
	}
}

/* -----------------------------------------------
トータルエンジニアリング
----------------------------------------------- */
.total {
	padding: 80px 0 140px
}

.total .section-txt {
	margin-bottom: 80px;
}

.totalBox2 {
	position: relative;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.totalBox2>div {
	width: calc(50% - 3px);
	margin-bottom: 6px;
}

.totalBox2 img {
	width: 100%;
	height: auto;
	vertical-align: top;
}

.totalBox2>div.total05 {
	width: 38.4%;
	height: auto;
	aspect-ratio: 1/1;
	padding: 0;

	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
}

.total .btn {
	margin-top: 92px;
}

/* ブレイクポイント */
@media screen and (max-width:1024px) {

	.totalBox2 {
		flex-direction: column;
		align-content: center;
		max-width: 768px;
		margin: 0 auto;
	}

	.totalBox2>div {
		width: 100%;
		margin-bottom: 25px;
	}

	.totalBox2>div.total05 {
		width: 72.8%;
		position: relative;
		top: unset;
		left: unset;
		transform: unset;
		margin: 0 auto 50px;
	}
}

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

	.total {
		padding: 50px 0 60px;
	}

	.total .section-txt {
		margin-bottom: 3.5em;
	}

	.totalBox2>div {
		margin-bottom: 10px;
	}

	.total .btn {
		margin-top: 35px;
	}
}

/* -----------------------------------------------
SDGs
----------------------------------------------- */
.sdgs {
	padding: 78px 0 0;
	background-image: url(../img/top/bg_03.png);
	background-size: 100% auto;
	background-position: 50% 86%;
}

.sdgs a:hover {
	filter: brightness(1.2);
}

.sdgs .section-txt {
	margin-bottom: 80px;
}

.sdgs_links,
.sdgs_icon {
	display: flex;
	justify-content: space-between;
	margin: 0 auto;
}

.sdgs_links a,
.sdgs_icon a {
	display: block;
}

.sdgs_links {
	margin-bottom: 34px;
}

.sdgs_links li {
	width: 22.8%;
	height: auto;
}

.sdgs_icon li {
	width: 76px;
	height: 76px;
}

.sdgs .btn {
	margin-top: 92px;
}

/* ブレイクポイント */
@media screen and (max-width:1024px) {

	.sdgs {
		background-image: url(../img/top/bg_03_sp.png);
		background-position: 0% 250px;
	}

	.sdgs_links,
	.sdgs_icon {
		flex-wrap: wrap;
		max-width: 480px;
		padding: 0 25px;
	}

	.sdgs_links li {
		width: calc(50% - 3px);
		height: auto;
		margin-bottom: 6px;
	}

	.sdgs_icon li {
		width: calc(16.6666% - 3px);
		height: auto;
		margin-bottom: 8px;
	}
}

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

	.sdgs {
		padding: 50px 0 0;
	}

	.sdgs .section-txt {
		margin-bottom: 3.25em;
	}

	.sdgs_links {
		margin-bottom: 25px;
	}

	.sdgs .btn {
		margin-top: 50px;
	}
}