@charset "utf-8";

/* first-view */
.first-view {
	width: 100%;
}
.main-copy {
	display: flex;
	justify-content: center;
	padding: clamp(16px, 4.3vw, 32px) clamp(20px, 5.3vw, 40px) clamp(40px, 10.6vw, 80px);
	width: 100%;
}

.main-copy img {
	width: 100%;
}

.img-wrap {
  overflow: hidden;
  position: relative;
}

.img-wrap::before,
.img-wrap::after {
  animation: 1s ease-in-out forwards;
  background: #fff;
  content: '';
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

.img-wrap::before {
  animation-name: img-wrap-before;
  inset: 0 0 51.5%;
}

.img-wrap::after {
  animation-name: img-wrap-after;
  inset: 48.5% 0 0;
  animation-delay: 0.9s; /* img-wrap-beforeのアニメーション終了後に開始 */
}

@keyframes img-wrap-before {
  100% {
    transform: translateX(100%);
  }
}

@keyframes img-wrap-after {
  100% {
    transform: translateX(100%);
  }
}

.slide {
	overflow: hidden;
	position: relative;
	aspect-ratio: 2 / 1;
	width: 100%;
}

.slide__img {
	z-index:3;
	opacity: 0;
	width: 100%;
	aspect-ratio: 2 / 1;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	position: absolute;
	left: 0;
	top: 0;
	animation: anime 12s 0s infinite;
}

.slide__img:nth-of-type(2) {
	animation-delay: 4s; 
}

.slide__img:nth-of-type(3) {
	animation-delay: 8s; 
}

.top-nav {
	display: none;
}

@keyframes anime {
  0% {
        opacity: 0;
    }
    8% {
        opacity: 1;
    }
    17% {
        opacity: 1;
    }
    60% {
        opacity: 0;
        transform: scale(1.2) ;
         z-index:2;
    }
    100% { opacity: 0}
}

/* entry-area */
.entry-area__message {
	font-size: clamp(16px, 4.3vw, 32px);
	color: var(--blue-900);
	padding: clamp(20px, 5.3vw, 40px);
}

.entry-area__list {
	display: flex;
	flex-wrap: wrap;
}

.entry-area__btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-weight: 700;
	line-height: 1.3;
	font-size: clamp(16px, 4.3vw, 32px);
	background: var(--text-grad);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.entry-area__btn:nth-of-type(1) {
	width: 100%;
	padding: clamp(32px, 8.5vw, 64px) clamp(16px, 4.3vw, 32px);
	border-top: 1px solid var(--blue-600);
	border-bottom: 1px solid var(--blue-600);
}

.entry-area__btn:nth-of-type(2) {
	width: 45%;
	padding: clamp(24px, 6.4vw, 48px) clamp(16px, 4.3vw, 32px);
	border-right: 1px solid var(--blue-600);
}

.entry-area__btn:nth-of-type(3) {
	width: 55%;
	padding: clamp(24px, 6.4vw, 48px) clamp(16px, 4.3vw, 32px);
}

.entry-area__btn:nth-of-type(1)::after {
	content: "";
	background: url(../img/link-arrow_blue.svg) no-repeat center center;
	background-size: contain;
	display: inline-block;
	width: 40px;
	height: 40px;
	min-width: 40px;
	vertical-align: middle;
}

.entry-area__btn:nth-of-type(2)::after,
.entry-area__btn:nth-of-type(3)::after {
	content: "";
	background: url(../img/link-arrow_blue.svg) no-repeat center center;
	background-size: contain;
	display: inline-block;
	width: 28px;
	height: 28px;
	min-width: 28px;
	vertical-align: middle;
}

/* staff-gallery */
.staff-gallery {
  width: 100%;
  overflow: hidden;
	padding: 20px 0;
	border-top: 1px solid var(--blue-600);
	border-bottom: 1px solid var(--blue-600);
}

.staff-gallery__wrap {
  display: flex;
  gap: 12px;
}

.staff-gallery__img {
  min-width: calc((100% - 16px) / 3); /* 3枚表示の場合 */
  aspect-ratio: 1 / 1;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  flex-shrink: 0;
}

/* content */
.content {
	display: grid;
	padding: clamp(40px, 10.6vw, 80px) clamp(20px, 5.3vw, 40px);
	border-bottom: 1px solid var(--blue-600);
}

.main .content:last-of-type {
	border-bottom: none;
}

.content--type1 {
	grid-template-columns: repeat(8, 1fr);
	grid-template-rows: repeat(1, 1fr);
	gap: clamp(20px, 5.3vw, 40px) 0;
}

.content--type2 {
	gap: clamp(16px, 4.2vw, 32px) 0;
}

.content__link {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.content__title--main::after {
	content: "";
	background: url(../img/link-arrow_blue.svg) no-repeat center center;
	background-size: contain;
	display: inline-block;
	width: clamp(40px, 10.6vw, 80px);
	height:clamp(40px, 10.6vw, 80px);
	min-width: 40px;
	vertical-align: middle;
}

.content__coming-soon::after {
	content: "";
	background: url(../img/link-coming-soon.svg) no-repeat center center;
	background-size: contain;
	display: inline-block;
	width: clamp(40px, 10.6vw, 80px);
	height:clamp(40px, 10.6vw, 80px);
	min-width: 40px;
	vertical-align: middle;
}

.content__title-wrap {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.content--type1 .content__title-wrap {
	grid-area: 1 / 1 / 2 / 9;
}

.content__title {
	display: flex;
	flex-direction: column;
	gap: 0.1em;
	font-size: clamp(36px, 9.6vw, 72px);
	letter-spacing: 0.2em;
	line-height: 1.3;
	font-weight: 700;
	background: var(--text-grad);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	margin-block: calc((1em - 1lh) / 2);
	padding-top: 0.1em;
}

.content__title--main {
	display: flex;
	align-items: center;
	gap: clamp(8px, 2.1vw, 16px);
}

.content__title--sub {
	font-size: clamp(16px, 4.2vw, 32px);
	letter-spacing: 0.16em;
}

.content__body-text {
	font-size: clamp(14px, 3.7vw, 28px);
}

.content__list {
	align-content: start;
	display: flex;
	flex-wrap: wrap;
	gap: 1.2em;
	line-height: 1.3;
	color: var(--blue-900);
	font-size: clamp(14px, 3.7vw, 28px);
}

.content__list--features {
	grid-area: 2 / 1 / 3 / 6;
	align-items: flex-start;
}

.content__sub-link {
	display: flex;
	gap: 8px;
	align-items: center;
}

.content__sub-link::after {
	content: "";
	background: url(../img/link-arrow_blue.svg) no-repeat center center;
	background-size: contain;
	display: inline-block;
	width: clamp(24px, 6.4vw, 48px);
	height: clamp(24px, 6.4vw, 48px);
	min-width: 24px;
	vertical-align: middle;
}

.features-img {
	grid-area: 2 / 6 / 3 / 9;
	position: relative;
}

.features-img::after {
	content: "";
	background: url(../img/top/features-deco.svg) no-repeat center center;
	background-size: contain;
	display: block;
	width: 120%;
	height: 120%;
	position: absolute;
	top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.relationship-chart-img {
	position: relative;
}

.relationship-chart-img::after {
	content: "";
	background: url(../img/top/relationship-chart-deco.svg) no-repeat center center;
	background-size: contain;
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.content--type3 {
	gap: clamp(20px, 5.3vw, 40px);
}

.loop-text {
	display: block;
}

.loop-text__wrap {
	overflow: hidden;
  display: flex;
  width: 100vw;
  height: clamp(66px, 17.6vw, 132px);
	margin: 0 calc(50% - 50vw);
}

.loop-text__wrap:last-child {
	margin-top: calc(clamp(24px, 6.4vw, 48px) * -1);
}

.loop-text__area {
	display: flex;
  padding: 0;
	width: 100vw;
	overflow: hidden;
	height: clamp(66px, 17.6vw, 132px);
}

.loop-text__img {
	width: auto;
	height: 100%;
	min-width: 1000%;
}

.loop-text__img:first-child {
	animation: loop 100s -50s linear infinite;
}

.loop-text__img:last-child {
	animation: loop2 100s linear infinite;
}

.pc-loop-text {
	display: none;
}

.content__list--system {
	grid-area: 2 / 1 / 3 / 6;
	align-items: flex-start;
}

.system-img {
	grid-area: 2 / 6 / 3 / 9;
	position: relative;
}

.system-img::after {
	content: "";
	background: url(../img/top/system-deco.svg) no-repeat center center;
	background-size: contain;
	display: block;
	width: 120%;
	height: 120%;
	position: absolute;
	top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@keyframes loop {
  0% {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}

@keyframes loop2 {
  0% {
    transform: translateX(0);
  }
  to {
    transform: translateX(-200%);
  }
}

.loop-text__img--reverse:first-child {
	animation: loop-reverse 120s -60s linear infinite;
}

.loop-text__img--reverse:last-child {
	animation: loop2-reverse 120s linear infinite;
}

@keyframes loop-reverse {
  0% {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(100%);
  }
}

@keyframes loop2-reverse {
  0% {
    transform: translateX(-200%);
  }
  to {
    transform: translateX(0);
  }
}

.content--type4 {
	gap: clamp(16px, 4.2vw, 32px);
}

.content--type4 .content__title--sub {
	letter-spacing: 0.16em;
}

@media only screen and (min-width: 768px) {
	@media (hover: hover) {
		.top-nav a:hover {
			opacity: 0.5;
		}
	}
	
	.main {
		display: block;
		margin: 0 1.6vw;
		padding: 0 4.8vw;
		border-left: 1px solid var(--blue-600);
		border-right: 1px solid var(--blue-600);
	}

	.main-copy {
		padding: 1.6vw 0 6.4vw;
		width: 100%;
	}

	.first-view__below {
		display: grid;
		grid-template-columns: repeat(12, 1fr);
		gap: 16px;
	}

	.slide {
		grid-column: 1 / 9;
	}

	.top-nav {
		display: flex;
		justify-content: end;
		align-items: flex-start;
		grid-column: 9 / 13;
		text-align: right;
		font-weight: 700;
	}

	.top-nav ul {
		display: flex;
		flex-direction: column;
		gap: 0.75em;
		font-size: clamp(10px, 1.25vw, 24px);
	}

	.top-nav a {
		background: var(--text-grad);
		background-clip: text;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		transition: 0.5s;
	}

	/* entry-area */
	.entry-area {
		border-top: 1px solid var(--blue-600);
		border-bottom: 1px solid var(--blue-600);
		margin-top: clamp(48px, 6.4vw, 120px);
		margin-bottom: clamp(48px, 6.4vw, 120px);
	}

	.entry-area__message {
		font-size: clamp(12px, 1.6vw, 30px);
		color: var(--blue-900);
		padding: clamp(19px, 2.5vw, 48px);
		border-bottom: 1px solid var(--blue-600);
	}

	.entry-area__list {
		display: flex;
		flex-wrap: nowrap;
	}

	.entry-area__btn {
		font-size: clamp(12px, 1.6vw, 30px);
	}
	
	.entry-area__btn:nth-of-type(1) {
		border-top: none;
		border-bottom: none;
		border-right: 1px solid var(--blue-600);
		padding: clamp(19px, 2.5vw, 48px);
	}

	.entry-area__btn:nth-of-type(2),
	.entry-area__btn:nth-of-type(3) {
		width: 100%;
		padding: clamp(19px, 2.5vw, 48px);
	}

	.entry-area__btn:nth-of-type(1)::after,
	.entry-area__btn:nth-of-type(2)::after,
	.entry-area__btn:nth-of-type(3)::after {
		content: "";
		background: url(../img/link-arrow_blue.svg) no-repeat center center;
		background-size: contain;
		width: clamp(28px, 3.75vw, 72px);
		height: clamp(28px, 3.75vw, 72px);
		min-width: 28px;
		transition: .5s ease-in-out;
	}

	.entry-area__btn:hover::after {
		transform: translateX(4px);
	}

	/* staff-gallery */
	.staff-gallery {
		width: 100vw;
		overflow: hidden;
		margin: 0 calc(50% - 50vw);
		position: relative;
		z-index: -1;
		padding-top: clamp(24px, 4.8vw, 60px);
		padding-bottom: clamp(24px, 4.8vw, 60px);
	}

	.staff-gallery__wrap {
		display: flex;
		gap: 1.6vw;
	}

	.staff-gallery__img {
		min-width: calc((100% - 16px) / 5);
		aspect-ratio: 1 / 1;
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
		flex-shrink: 0;
	}

	/* content */
	.content {
		display: grid;
		width: 100vw;
		margin: 0 calc(50% - 50vw);
		padding: clamp(48px, 6.25vw, 120px) clamp(48px, 6.25vw, 120px);
	}

	.content--type1 {
		grid-template-columns: repeat(12, 1fr);
		grid-template-rows: repeat(2, 1fr);
		gap: 16px;
	}

	.content__title-wrap {
		grid-area: 1 / 1 / 2 / 9;
		justify-content: center;
	}

	.content__list {
		font-size: clamp(12px, 1.6vw, 30px);
		gap: 1em;
		padding-top: 0.8em;
	}

	.content__list--features {
		grid-area: 2 / 1 / 3 / 9;
		flex-direction: column;
	}

	.features-img {
		grid-area: 1 / 9 / 3 / 13;
		display: flex;
		justify-content: center;
	}

	.content__title {
		font-size: clamp(43px, 5.625vw, 108px);
	}

	.content__title--sub {
		font-size: clamp(19px, 1.875vw, 48px);
	}

	.content__link {
		justify-content: flex-start;
		gap: clamp(36px, 4.7vw, 90px);
	}

	.content__title--main::after {
		content: "";
		background: url(../img/link-arrow_blue.svg) no-repeat center center;
		background-size: contain;
		display: inline-block;
		width: clamp(48px, 6.25vw, 120px);
		height: clamp(48px, 6.25vw, 120px);
		min-width: 48px;
		vertical-align: middle;
		transition: transform .5s ease-in-out;
	}

	.content__title--main:hover::after {
		transform: translateX(8px);
	}

	.content__coming-soon::after {
		content: "";
		background: url(../img/link-coming-soon.svg) no-repeat center center;
		background-size: contain;
		display: inline-block;
		width: clamp(48px, 6.25vw, 120px);
		height: clamp(48px, 6.25vw, 120px);
		min-width: 48px;
		vertical-align: middle;
	}

	.content__body-text {
		font-size: clamp(12px, 1.56vw, 30px);
		padding-top: 0.8em;
	}

	.content__sub-link {
		gap: 0.4em;
	}

	.content__sub-link::after {
		content: "";
		background: url(../img/link-arrow_blue.svg) no-repeat center center;
		background-size: contain;
		display: inline-block;
		width: clamp(19px, 2.5vw, 36px);
		height: clamp(19px, 2.5vw, 36px);
		min-width: 19px;
		vertical-align: middle;
		transition: transform .5s ease-in-out;
	}

	.content__sub-link:hover::after {
		transform: translateX(4px);
	}

	.content--type2 {
		grid-template-columns: repeat(12, 1fr);
		gap: 16px;
	}

	.content--type2 .content__title-wrap {
		grid-area: 1 / 8 / 2 / 13;
	}

	.relationship-chart-img {
		grid-area: 1 / 1 / 2 / 7;
		scale: 1.1;
	}

	.content--type3 {
		grid-template-columns: repeat(12, 1fr);
		grid-template-rows: repeat(2, 1fr);
		gap: 16px;
	}

	.content__list--interview {
		grid-area: 2 / 1 / 3 / 7; 
	}

	.content--type4 {
		grid-template-columns: repeat(12, 1fr);
		gap: 16px;
		padding-top: 0;
		padding-bottom: 0;
	}

	.loop-text {
		display: none;
	}

	.content--type4 .content__title-wrap {
		grid-area: 1 / 7 / 2 / 13;
	}

	.pc-loop-text {
		grid-area: 1 / 1 / 2 / 7;
		display: flex;
	}

	.pc-loop-text__wrap {
		width: clamp(48px, 6.25vw, 120px);
		height: clamp(262px, 34vw, 656px);
		overflow: hidden;
		position: relative;
		margin-left: calc(clamp(7px, 0.9vw, 18px) * -1) ;
	}

	.pc-loop-text__area {
		position: absolute;
		top: 0;
		left: 0;
	}

	.pc-loop-text__area img {
		display: block;
		width: 100%;
	}

	.pc-loop-text__area img:first-child {
		animation: loop 60s -30s linear infinite both;
	}
	
	.pc-loop-text__area img:last-child {
		animation: loop2 60s linear infinite both;
	}

	@keyframes loop {
		0% {
			transform: translateY(100%);
		}
		to {
			transform: translateY(-100%);
		}
	}
	
	@keyframes loop2 {
		0% {
			transform: translateY(0);
		}
		to {
			transform: translateY(-200%);
		}
	}

	.pc-loop-text__area--reverse img:first-child {
		animation: loop3 60s -30s linear infinite both;
	}
	
	.pc-loop-text__area--reverse img:last-child {
		animation: loop4 60s linear infinite both;
	}

	@keyframes loop3 {
		0% {
			transform: translateY(-100%);
		}
		to {
			transform: translateY(100%);
		}
	}
	
	@keyframes loop4 {
		0% {
			transform: translateY(-200%);
		}
		to {
			transform: translateY(0);
		}
	}
	.system-img {
		grid-area: 1 / 9 / 3 / 13;
		display: flex;
		justify-content: center;
	}
	.content__list--system {
		grid-area: 2 / 1 / 3 / 9;
	}
}