@charset "utf-8";

/* sec_main
--------------------*/
main .sec_main {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background:
  linear-gradient(
		135deg,
		rgba(32, 162, 170, 0.7),
		rgba(32, 162, 170, 0.7) 40%,
		rgba(16, 25, 140, 0.7) 80%,
		rgba(16, 25, 140, 0.7) 80%,
		rgba(88, 15, 123, 0.7)
	),
  url('/assets/img/common/bg_texture_01.png');
	background-size:
		cover,
		300px 300px;
}

main {
	padding-top: 100vh;
}

main .sec_main .sec_inner {
	height: 100vh;
}

.is-edge main .sec_main .sec_inner {
	min-height: 100vh;
}

main .sec_main .txt_01 {
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	width: 100%;
}

.visited main .sec_main .txt_01 {
	display: none;
}

main .sec_main .txt_01 img:nth-child(1) {
	display: block;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	width: 46.433%;
	padding: 0 0 0 7.5%;
	opacity: 0;
	animation: fadeinout 3.2s ease-in forwards;
	animation-delay: 0.5s;
	z-index: 2;
}

main .sec_main .txt_01 img:nth-child(2) {
	display: block;
	width: 78.819%;
	opacity: 0;
	animation: fadeinout2 3.7s ease-in forwards;
}

@keyframes fadeinout {
  0%   { opacity: 0; }
  40%  { opacity: 1; }
  75%  { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes fadeinout2 {
  0%   { opacity: 0; }
  40%  { opacity: 1; }
  75%  { opacity: 1; }
  100% { opacity: 0; }
}

main .sec_main .txt_02 {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 90.277%;
}

main .sec_main p {
	display: flex;
}

main .sec_main p img {
	opacity: 0;
	animation: fadeintext 2s ease-in forwards;
}

.visited .sec_main p img {
	opacity: 1 !important;
	animation: none;
}

main .sec_main p:nth-child(1) img:nth-child(1) { width: calc((247 / 2602) * 100%); animation-delay: 3.5s; }
main .sec_main p:nth-child(1) img:nth-child(2) { width: calc((262 / 2602) * 100%); animation-delay: 3.57s; }
main .sec_main p:nth-child(1) img:nth-child(3) { width: calc((248 / 2602) * 100%); animation-delay: 3.64s; }
main .sec_main p:nth-child(1) img:nth-child(4) { width: calc((214 / 2602) * 100%); animation-delay: 3.71s; }
main .sec_main p:nth-child(1) img:nth-child(5) { width: calc((270 / 2602) * 100%); animation-delay: 3.78s; }
main .sec_main p:nth-child(1) img:nth-child(6) { width: calc((257 / 2602) * 100%); animation-delay: 3.85s; }
main .sec_main p:nth-child(1) img:nth-child(7) { width: calc((270 / 2602) * 100%); animation-delay: 3.92s; }
main .sec_main p:nth-child(1) img:nth-child(8) { width: calc((290 / 2602) * 100%); animation-delay: 3.99s; }
main .sec_main p:nth-child(1) img:nth-child(9) { width: calc((307 / 2602) * 100%); animation-delay: 4.06s; }
main .sec_main p:nth-child(1) img:nth-child(10) { width: calc((237 / 2602) * 100%); animation-delay: 4.13s; }
main .sec_main p:nth-child(2) img:nth-child(1) { width: calc((437 / 2602) * 100%); animation-delay: 4.38s; }
main .sec_main p:nth-child(2) img:nth-child(2) { width: calc((437 / 2602) * 100%); animation-delay: 4.50s; }
main .sec_main p:nth-child(2) img:nth-child(3) { width: calc((367 / 2602) * 100%); animation-delay: 4.62s; }
main .sec_main p:nth-child(2) img:nth-child(4) { width: calc((416 / 2602) * 100%); animation-delay: 4.74s; }
main .sec_main p:nth-child(3) img:nth-child(1) { width: calc((437 / 2602) * 100%); animation-delay: 5.02s; }
main .sec_main p:nth-child(3) img:nth-child(2) { width: calc((437 / 2602) * 100%); animation-delay: 5.17s; }
main .sec_main p:nth-child(3) img:nth-child(3) { width: calc((783 / 2602) * 100%); animation: fadeintext 2.5s ease-out forwards; animation-delay: 5.42s; }

.en main .sec_main p {
	display: block;
	width: fit-content;
	margin: 0 auto;
	white-space: nowrap;
}

.en main .sec_main p span {
	display: inline-block;
	font-size: 9.027vw;
	font-weight: 500;
	line-height: 1.207;
	letter-spacing: -0.05em !important;
	opacity: 0;
	animation: fadeintext 2s ease-out forwards;
}

.visited.en main .sec_main p span {
	opacity: 1 !important;
	animation: none;
}

.en main .sec_main p span:nth-child(1) { animation-delay: 3.5s; }
.en main .sec_main p span:nth-child(2) { animation-delay: 3.53s; }
.en main .sec_main p span:nth-child(3) { animation-delay: 3.56s; }
.en main .sec_main p span:nth-child(4) { animation-delay: 3.59s; }
.en main .sec_main p span:nth-child(5) { animation-delay: 3.62s; }
.en main .sec_main p span:nth-child(6) { animation-delay: 3.65s; }
.en main .sec_main p span:nth-child(7) { animation-delay: 3.68s; }
.en main .sec_main p span:nth-child(8) { animation-delay: 3.71s; }
.en main .sec_main p span:nth-child(9) { animation-delay: 3.74s; }
.en main .sec_main p span:nth-child(10) { animation-delay: 3.77s; }
.en main .sec_main p span:nth-child(11) { animation-delay: 3.8s; }
.en main .sec_main p span:nth-child(12) { animation-delay: 3.83s; }
.en main .sec_main p span:nth-child(13) { animation-delay: 3.86s; }
.en main .sec_main p span:nth-child(14) { animation-delay: 3.89s; }
.en main .sec_main p span:nth-child(15) { animation-delay: 3.92s; }
.en main .sec_main p span:nth-child(16) { animation-delay: 3.95s; }
.en main .sec_main p span:nth-child(17) { animation-delay: 3.98s; }
.en main .sec_main p span:nth-child(18) { animation-delay: 4.01s; }
.en main .sec_main p span:nth-child(19) { animation-delay: 4.04s; }
.en main .sec_main p span:nth-child(20) { animation-delay: 4.07s; }
.en main .sec_main p span:nth-child(21) { animation-delay: 4.1s; }
.en main .sec_main p span:nth-child(22) { animation-delay: 4.13s; }

.en main .sec_main p span:nth-child(23) { animation-delay: 4.16s; }
.en main .sec_main p span:nth-child(24) { animation-delay: 4.19s; }
.en main .sec_main p span:nth-child(25) { animation-delay: 4.22s; }
.en main .sec_main p span:nth-child(26) { animation-delay: 4.25s; }
.en main .sec_main p span:nth-child(27) { animation-delay: 4.28s; }
.en main .sec_main p span:nth-child(28) { animation-delay: 4.31s; }
.en main .sec_main p span:nth-child(29) { animation-delay: 4.34s; }
.en main .sec_main p span:nth-child(30) { animation-delay: 4.37s; }
.en main .sec_main p span:nth-child(31) { animation-delay: 4.4s; }
.en main .sec_main p span:nth-child(32) { animation-delay: 4.43s; }
.en main .sec_main p span:nth-child(33) { animation-delay: 4.46s; }
.en main .sec_main p span:nth-child(34) { animation-delay: 4.49s; }
.en main .sec_main p span:nth-child(35) { animation-delay: 4.52s; }
.en main .sec_main p span:nth-child(36) { animation-delay: 4.55s; }
.en main .sec_main p span:nth-child(37) { animation-delay: 4.58s; }
.en main .sec_main p span:nth-child(38) { animation-delay: 4.61s; }
.en main .sec_main p span:nth-child(39) { animation-delay: 4.64s; }
.en main .sec_main p span:nth-child(40) { animation-delay: 4.67s; }
.en main .sec_main p span:nth-child(41) { animation-delay: 4.7s; }
.en main .sec_main p span:nth-child(42) { animation-delay: 4.73s; }
.en main .sec_main p span:nth-child(43) { animation-delay: 4.76s; }
.en main .sec_main p span:nth-child(44) { animation-delay: 4.79s; }

.en main .sec_main p span:nth-child(45) { animation-delay: 4.82s; }
.en main .sec_main p span:nth-child(46) { animation-delay: 4.85s; }
.en main .sec_main p span:nth-child(47) { animation-delay: 4.88s; }
.en main .sec_main p span:nth-child(48) { animation-delay: 4.91s; }
.en main .sec_main p span:nth-child(49) { animation-delay: 4.94s; }
.en main .sec_main p span:nth-child(50) { animation-delay: 4.97s; }
.en main .sec_main p span:nth-child(51) { animation-delay: 5.0s; }
.en main .sec_main p span:nth-child(52) { animation-delay: 5.03s; }
.en main .sec_main p span:nth-child(53) { animation-delay: 5.06s; }
.en main .sec_main p span:nth-child(54) { animation-delay: 5.09s; }
.en main .sec_main p span:nth-child(55) { animation-delay: 5.12s; }

@keyframes fadeintext {
  0%   { opacity: 0; }
  70%  { opacity: 1; }
  100% { opacity: 1; }
}

main .sec_main h1 {
	position: absolute;
	top: 50%;
	right: 5.127%;
	width: 26.597%;
	opacity: 0;
	animation: fadeintext 2s ease-in forwards;
	animation-delay: 6.3s;
}

.visited main .sec_main h1 {
	opacity: 1 !important;
	animation: none;
}

.en main .sec_main h1 {
	animation-delay: 5.9s;
}

.en main .sec_main h1 {
	width: 20.625%;
}

main .sec_main h1 img {
	transform: translateY(-50%);
}

main .sec_main .scroll {
	position: absolute;
	left: 50%;
	bottom: 0;
	opacity: 0;
	animation: fadeintext 2.5s ease-in forwards;
	animation-delay: 6.4s;
}

.visited main .scroll {
	opacity: 1 !important;
	animation: none;
}

.en main .sec_main .scroll {
	animation-delay: 6.0s;
}

main .sec_main .scroll:after {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 14px;
	background: #888888;
	z-index: 10;
	animation-name: scrollanime;
	animation-duration: 1.2s;
	animation-iteration-count: infinite;
}

@keyframes scrollanime {
    0% {
        top: 0;
    }
    100% {
        top :85px;
    }
}

@media (max-width: 1100px) {
}

@media (max-width: 768px) {
	main .sec_main {
		background:
		linear-gradient(
			90deg,
			rgba(32, 162, 170, 0.7),
			rgba(32, 162, 170, 0.7) 40%,
			rgba(16, 25, 140, 0.7) 95%,
			rgba(16, 25, 140, 0.7) 95%,
			rgba(88, 15, 123, 0.7)
		),
		url('/assets/img/common/bg_texture_01.png');
		background-size:
			cover,
			200px 200px;
	}

	main .sec_main .wrap {
		position: absolute;
		top: 50%;
		left: 0;
		transform: translateY(-50%);
		width: 100%;
	}

	.en main .sec_main .wrap {
		transform: translateY(-50%);
	}

	main .sec_main h1 {
		position: static;
		width: 57.066%;
		padding: 40px 0 0 3.2%;
	}

	.en main .sec_main h1 {
		width: 57.333%;
		padding: 30px 0 0 8%;
	}

	main .sec_main h1 img {
		transform: none;
	}

	main .sec_main .txt_01 img:nth-child(1) {
		width: 68.557%;
		padding: 0 0 0 5.333%;
	}

	main .sec_main .txt_01 img:nth-child(3) {
		width: 95.2%;
		opacity: 0;
		animation: fadeinout2 3.7s ease-in forwards;
	}

	main .sec_main .txt_02 {
		position: static;
		width: 91.2%;
		margin: 0 auto;
		transform: none;
	}

	.en main .sec_main .txt_02 {
		width: 85.733%;
	}

	.en main .sec_main p span {
		font-size: 15.976vw;
		line-height: 1.114;
	}

	main .sec_main p:nth-child(1) img:nth-child(1) { width: calc((68 / 684) * 100%); animation-delay: 3.5s; }
	main .sec_main p:nth-child(1) img:nth-child(2) { width: calc((66 / 684) * 100%); animation-delay: 3.57s; }
	main .sec_main p:nth-child(1) img:nth-child(3) { width: calc((68 / 684) * 100%); animation-delay: 3.64s; }
	main .sec_main p:nth-child(1) img:nth-child(4) { width: calc((57 / 684) * 100%); animation-delay: 3.71s; }
	main .sec_main p:nth-child(1) img:nth-child(5) { width: calc((70 / 684) * 100%); animation-delay: 3.78s; }
	main .sec_main p:nth-child(1) img:nth-child(6) { width: calc((65 / 684) * 100%); animation-delay: 3.85s; }
	main .sec_main p:nth-child(1) img:nth-child(7) { width: calc((71 / 684) * 100%); animation-delay: 3.92s; }
	main .sec_main p:nth-child(1) img:nth-child(8) { width: calc((80 / 684) * 100%); animation-delay: 3.99s; }
	main .sec_main p:nth-child(1) img:nth-child(9) { width: calc((80 / 684) * 100%); animation-delay: 4.06s; }
	main .sec_main p:nth-child(1) img:nth-child(10) { width: calc((61 / 684) * 100%); animation-delay: 4.13s; }
	main .sec_main p:nth-child(2) img:nth-child(1) { width: calc((179 / 684) * 100%); animation-delay: 4.38s; }
	main .sec_main p:nth-child(2) img:nth-child(2) { width: calc((188 / 684) * 100%); animation-delay: 4.50s; }
	main .sec_main p:nth-child(2) img:nth-child(3) { width: calc((146 / 684) * 100%); animation-delay: 4.62s; }
	main .sec_main p:nth-child(2) img:nth-child(4) { width: calc((171 / 684) * 100%); animation-delay: 4.74s; }
	main .sec_main p:nth-child(3) img:nth-child(1) { width: calc((179 / 684) * 100%); animation-delay: 5.02s; }
	main .sec_main p:nth-child(3) img:nth-child(2) { width: calc((188 / 684) * 100%); animation-delay: 5.17s; }
	main .sec_main p:nth-child(3) img:nth-child(3) { width: calc((317 / 684) * 100%); animation: fadeintext 2.5s ease-out forwards; animation-delay: 5.42s; }

	main .sec_main .scroll {
		left: initial;
		right: 30px;
	}
}

/* sec_01
--------------------*/
main .sec_01 .sec_inner {
	padding: 90px 10.416% !important;
}

main .sec_01 h2 {
	position: absolute;
	top: 90px;
	left: 10.416%;
	padding-top: 0%;
}

main .sec_02 + .sec_01 h2 {
	margin-left: -2%;
}

.en main .sec_02 + .sec_01 h2 {
	margin-left: 0;
}

main .sec_01 p {
	padding: 0 4.385% 0 16.228%;
}

.en main .sec_01 p {
	padding: 133px 0 0;
}

main .sec_02 + .sec_01 p {
	padding-right: 0;
}

/*
main .sec_01 p img {
	width: auto;
	max-width: 100%;
	max-height: 70vh;
}
*/

main .sec_01 nav {
	position: relative;
	display: flex;
	justify-content: right;
	margin: -70px 0 0;
	z-index: 2;
}

.en main .sec_01 nav {
	justify-content: left;
	margin: 90px 0 0;
}

@media (max-width: 1360px) {
	main .sec_01 h2 {
		left: 3.416%;
	}

	main .sec_02 + .sec_01 h2 {
		margin-left: 0;
	}

	.en main .sec_01 h2 {
		left: 10.416%;
	}
}

@media (max-width: 1000px) {
	main .sec_01 nav {
		justify-content: left;
	}

	main .sec_01 h2 {
		position: static;
		padding-top: 0;
	}

	main .sec_01 p {
		padding: 70px 0 0;
	}

	.en main .sec_01 p {
		padding: 70px 0 0;
	}

	main .sec_01 nav {
		margin: 0;
		padding: 70px 0 0;
	}

	.en main .sec_01 nav {
		margin: 0;
	}
}

@media (max-width: 768px) {
	main .sec_01 .sec_inner {
		padding: 70px 8% !important;
	}

	main .sec_01 p {
		padding: 50px 0 0;
	}

	.en main .sec_01 p {
		padding: 50px 0 0;
	}
}

/* sec_02
--------------------*/
main .sec_02 .sec_inner {
	padding: 90px 10.416% !important;
}

main .sec_02 h2 {
	position: absolute;
	top: 90px;
	right: 10.416%;
}

main .sec_02 p {
	width: 100.2%;
	margin-right: -0.2%;
}

.en main .sec_02 p {
	width: 100%;
	margin: 0;
	padding: 133px 0 0;
}

main .sec_02 nav {
	margin: 6.140% 0 0;
}

.en main .sec_02 nav {
	display: flex;
	justify-content: right;
	margin: 90px 0 0;
}

@media (max-width: 1360px) {
	main .sec_02 h2 {
		right: 3.416%;
	}

	.en main .sec_02 h2 {
		right: 10.416%;
	}
}

@media (max-width: 1000px) {
	main .sec_02 h2 {
		position: static;
		padding-top: 0;
	}

	main .sec_02 p {
		width: 100.5%;
		margin-right: -0.5%;
		padding: 70px 0 0;
	}

	.en main .sec_02 p {
		padding: 70px 0 0;
	}

	main .sec_02 nav {
		display: block;
		margin: 70px 0 0;
	}

	.en main .sec_02 nav {
		justify-content: left;
		margin: 70px 0 0;
	}
}

@media (max-width: 768px) {
	main .sec_02 .sec_inner {
		padding: 70px 8% !important;
	}

	main .sec_02 p {
		width: 100%;
		margin-right: 0;
		padding: 50px 0 0;
	}

	.en main .sec_02 p {
		padding: 50px 0 0;
	}
}

/* sec_03
--------------------*/
main .sec_03 .sec_inner {
	padding: 90px 10.416% !important;
}

main .sec_03 h2 {
	position: absolute;
	top: 90px;
	left: 10.416%;
}

main .sec_03 dl {
	margin: -3px 0 0;
	padding: 0 0 0 33.596%;
}

main .sec_03 dl + dl {
	margin: 42px 0 0;
}

main .sec_03 dt {
	margin: 0 0 2px;
	font-size: 14px;
}

main .sec_03 dd {
	font-size: 16px;
}

main .sec_03 dd a:hover {
	text-decoration: underline;
}

@media (max-width: 1360px) {
	main .sec_03 h2 {
		left: 3.416%;
	}

	.en main .sec_03 h2 {
		left: 10.416%;
	}
}

@media (max-width: 1000px) {
	main .sec_03 h2 {
		position: static;
		padding-top: 0;
	}

	main .sec_03 dl {
		padding: 65px 0 0;
	}

	main .sec_03 dl + dl {
		margin: 42px 0 0;
		padding: 0;
	}

	main .sec_03 dt {
		margin: 0 0 2px;
		font-size: 14px;
	}
}

@media (max-width: 768px) {
	main .sec_03 .sec_inner {
		padding: 70px 8% !important;
	}

	main .sec_03 dl {
		line-height: 1.5;
	}

	main .sec_03 dt {
		margin: 0 0 8px;
	}

	main .sec_03 dd a:hover {
		text-decoration: none;
	}
}