@charset "UTF-8";

/* 変数指定 */
:root {
	--color-black: #000;
	--color-white: #fff;
	--color-gray: #F1F1F1;
	--bg-gradient: linear-gradient(90deg,rgba(28, 13, 93, 1) 0%, rgba(49, 15, 93, 1) 100%);
	--font-jp: 'Noto Sans JP', sans-serif;
	--base-font-size: clamp(0.875rem, 0.83rem + 0.23vw, 1rem);
	--h1-font-size: clamp(2rem, 0.815rem + 5.93vw, 6rem);
	--lead-font-size: clamp(1rem, 0.852rem + 0.74vw, 1.5rem);
	--container-width: 1400px;
}

/* common
-------------------- */
html {
	overflow-x: hidden;
}
img {
	width: 100%;
	height: auto;
}
header,
main {
	font-family: var(--font-jp);
	font-size: var(--base-font-size);
}
main {
	position: relative;
	overflow: hidden;
	height: fit-content;
}
ul {
	list-style: none;
	padding: 0;
}
.splash {
	position: absolute;
	width: 100vw;
	height: 100lvh;
	background: var(--color-gray);
	display: none;
}
[class*="fadeIn"] {
	opacity: 0;
	visibility: hidden;
	-webkit-transition: 1s;
	-o-transition: 1s;
	transition: 1s;
	will-change: opacity, transform;
}
[class*="fadeIn"].is-show {
	opacity: 1;
	visibility: visible;
}
.fadeIn-left {
	-webkit-transform: translateX(-2vw);
    -ms-transform: translateX(-2vw);
    transform: translateX(-2vw);
}
.fadeIn-left.is-show {
	-webkit-transform: translateX(0vw);
    -ms-transform: translateX(0vw);
    transform: translateX(0vw);
}
.fadeIn-right {
	-webkit-transform: translateX(2vw);
    -ms-transform: translateX(2vw);
    transform: translateX(2vw);
}
.fadeIn-right.is-show {
	-webkit-transform: translateX(0vw);
    -ms-transform: translateX(0vw);
    transform: translateX(0vw);
}
.fadeIn-up {
	-webkit-transform: translateY(2vw);
    -ms-transform: translateY(2vw);
    transform: translateY(2vw);
}
.fadeIn-up.is-show {
	-webkit-transform: translateY(0vw);
    -ms-transform: translateY(0vw);
    transform: translateY(0vw);
}
.delay {
	transition-delay: .25s;
}
.delay2 {
	transition-delay: .5s;
}
.delay3 {
	transition-delay: .75s;
}
.delay3 {
	transition-delay: 1s;
}
.sp {
	display: none;
}

@media screen and (max-width: 490px) {
	.sp {
		display: block;
	}
}

/* hero
-------------------- */
.hero {
	width: 100%;
	height: 220lvh;
	color: var(--color-white);
}

.hero_bg {
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
	width: 100vw;
	height: 100lvh;
	object-fit: cover;
	background: var(--bg-gradient);
}

.hero_bg > div {
	position: absolute;
	aspect-ratio: 1 / 1;
	filter: blur(30px);
	opacity: .8;
	mix-blend-mode: hard-light;
}

.hero_bg .size1 {
	width: 6vw;
}

.hero_bg .size2 {
	width: 8vw;
}

.hero_bg .size3 {
	width: 16vw;
}

.hero_bg .size4 {
	width: 32vw;
}

.hero_bg > div svg {
	width: 100%;
	height: 100%;
	animation-timing-function: ease-in-out;
}

.hero_bg > div:nth-of-type(1) {
	top: 60vh;
	left: 50vw;
}
.hero_bg > div:nth-of-type(2) {
	bottom: 60vh;
	left: 30vw;
}
.hero_bg > div:nth-of-type(3) {
	top: 20vh;
	right: 40vw;
}
.hero_bg > div:nth-of-type(4) {
	bottom: 10vh;
	left: 20vw;
}
.hero_bg > div:nth-of-type(5) {
	top: 20vh;
	left: 40vw;
}
.hero_bg > div:nth-of-type(6) {
	top: 40vh;
	right: 40vw;
}
.hero_bg > div:nth-of-type(7) {
	top: 40vh;
	right: 30vw;
}
.hero_bg > div:nth-of-type(8) {
	top: 10vw;
	right: 20vh;
}


/* header
-------------------- */
header {
	position: fixed;
	top: 2em;
	left: 50%;
	width: 98vw;
	max-width: 96%;
	height: 80px;
	background: rgba(255, 255, 255, .6);
	transform: translateX(-50%);
	border-radius: 40px;
	padding: 2em;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	align-items: center;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	color: var(--color-black);
	z-index: 1;
}
.site-id .flex_box {
	align-items: center;
}
.xit_logo {
	max-width: 35%;
}
.xit_logo a {
	display: block;
	max-width: 80px;
	margin-right: 1.5em;
}

/* contents
-------------------- */
.contents1 {
	position: relative;
	width: 100%;
	height: 100lvh;
	z-index: -1;
}
.contents-container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 100%;
	max-width: var(--container-width);
	margin: auto;
}
.contents1 .scroll_nav {
	position: absolute;
	bottom: 2em;
	right: 2em;
	height: 100px;
	overflow: hidden;
}
.scroll_nav:after {
	content: "";
	display: block;
	width: 1px;
	background: var(--color-white);
	margin: auto;
	animation: scroll 2s ease-in-out infinite;
}
h1 {
	text-align: center;
	line-height: 1.5;
	padding: 0;
	font-size: var(--h1-font-size);
}
.contents2 {
	width: 100%;
	height: 100lvh;
}
.lead {
	font-size: var(--lead-font-size);
	text-align: center;
	line-height: 2;
}
.lead span {
	display: block;
	line-height: 2.4;
}
.floating_y1 {
	animation: floating_y1 18s ease-in-out infinite alternate-reverse;
}
.floating_y2 {
	animation: floating_y2 12s ease-in-out infinite alternate-reverse;
}
.floating_y3 {
	animation: floating_y3 6s ease-in-out infinite alternate-reverse;
}
.floating_y4 {
	animation: floating_y4 3s ease-in-out infinite alternate-reverse;
}

@media screen and (orientation: portrait) {
	.contents-container {
		padding: 0 1em;
		box-sizing: border-box;
	}
}


/* keyframes
-------------------- */

@keyframes floating_y1 {
	0%, 100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(200px);
	}
}

@keyframes floating_y2 {
	0%, 100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(100px);
	}
}

@keyframes floating_y3 {
	0%, 100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(50px);
	}
}

@keyframes floating_y4 {
	0%, 100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(25px);
	}
}

@keyframes scroll {
	0% {
		height: 0;
		top: 0;
	}
	30% {
		height: 100%;
	}
	100% {
		top: 100%;
	}
}