@charset "UTF-8";
/* CSS Document */

/* 背景色 #FDFBF1  */
/* 文字色 #6A2F36  */

:root{
	--main-bg-color:#fdfbf1;
	--main-color:#6a2f36;
}

ul{
	list-style: none;
	padding:0;
}
div{
	padding:0;
}

.parallax-box {
	transform: translateY(60px);
	opacity: 0;
	transition-delay: 1s;
	transition: opacity 1s ease-out, transform 1s ease-out;
}
.parallax-box.headimg{
	transition-delay: 3.5s;
}

.parallax-box.delay{
	transition-delay: 0.4s;
}
.parallax-box.moredelay{
	transition-delay: 0.8s;
}

.fade-in.visible {
	opacity: 1;
	transform: translateY(0);
}

#loading {
  position: fixed;
  inset: 0;
  background: transparent;
  z-index: 9999;
  overflow: hidden;
}

.loading-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* ロゴ消える */

.loading-logo{
  display: block;
  opacity: 1;
  transition:opacity 1s ease-out,transform 0.5s ease-out;
  transform: translate(-50%, -50%) scale(1) ;
}

.loading-logo.hide{
	opacity:0;
	transform:translate(-50%,-50%) scale(50%);
}

/* ワイプレイヤー */
.wipe-layer {
  position: absolute;
  inset: 0;
  background: #fdfbf1;
  transform: translateX(0);
	display: flex;
	justify-content: center;
	align-items: center;
	
	img{
		width:30.58%;
	}
}

/* ワイプアウト */
#loading.hide .wipe-layer {
  transform: translateX(100%);
  animation-delay: 5s;	
  transition: transform 1s cubic-bezier(0.77, 0, 0.18, 1);
}

/* 画像フェード（おまけ） */
#loading.hide .loading-content {
  opacity: 0;
  transition: opacity 0.4s ease;
}


/* サムネ */
.thumb {
  width: 200px;
  cursor: pointer;
}

/* モーダル全体 */
#modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.8);
  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 0;
  visibility: hidden;
  transition: 0.4s;
  z-index: 9999;
}

/* 表示状態 */
#modal.show {
  opacity: 1;
  visibility: visible;
}

/* 中身 */
.modal-content {
  position: relative;
  max-width: 90%;
  max-height: 90%;
  transform: scale(0.8);
  transition: 0.4s;
}

/* 表示時アニメーション */
#modal.show .modal-content {
  transform: scale(1);
}

/* 画像 */
#modal-img {
  width: 100%;
  max-height: 90vh;
  max-height: 90dvh;
　height: auto;
  display: block;
  border-radius: 8px;
}

/* 閉じるボタン */
.close {
  position: absolute;
  top: 0px;
  right: 0;
  width:5.38%;
  aspect-ratio:1/1;	
  font-size: 32px;
  color: white;
  cursor: pointer;
}

body{
	width:100%;
	background-color:var(--main-bg-color);
	min-height: 1vh;
	color:var(--main-color);
	margin:0 auto;
}

#ribbon {
	position: relative;
	width: 100%;
	margin:0 auto;
	height:40px;
	background-color:var(--main-color);
	z-index: 20;
}

#footer {
	width:100%;
	aspect-ratio:1929/200;
	margin: 0px auto;
	background:var(--main-color);
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0;
}
#footer ul.banners{
	width:100%;
	max-width: 1515px;
	display: flex;
	justify-content: center;
	align-items: center;
	gap:10%;
	list-style: none;
}


#footer li{
	display: block;
	
	img{
		width:100%;
	}
}
#top {
	position: relative;
	background: url("../img/bg_top.png"),url("../img/bg_top_dot.png");
	max-width: 1929px;
	min-width: 780px;
	width:100%;
	margin:-40px auto 0;
	aspect-ratio:1929/1318;
	background-size:cover;
	background-position: top center;
}
#top::after{
	position: absolute;
	top:0;
	left:0;
	content: "";
	display: block;
	width:100%;
	height:100%;
	background-image: url("../img/bg_overRayerTriangles.png");
	background-size: cover;
	background-repeat: no-repeat;
	z-index: 6;
}

#header {
	width: 78.53%;
	max-width: 1515px;
	position: absolute;
	top:40px;
	left:50%;
	transform: translateX(-50%);
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	gap:10px;
	z-index: 20;
	
}

#header a{
	display: block;
}

	
	#nekologo{
		width:12.54%;
		margin-top:10px;
		
		img{
			width:100%;
		}
	}
	#koilogo{
		width:10.56%;
		margin-top:10px;
		
		img{
			width:100%;
		}
	}


#contents {
	width: 100%;
	max-width: 1929px;
	min-width: 780px;
	margin:0 auto 0;
}

#lineup {
	background: url( "../img/bg_lineup.png");
	width:100%;
	aspect-ratio:1929/1174;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: top center;
	position: relative;
	box-sizing: border-box;
	border-top:3px solid var(--main-color);
	display: flex;
	justify-content: center;
	align-items: center;
}

#gallery {
	background:url("../img/bg_gallery.png");
	width:100%;
	aspect-ratio:1929/830;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	overflow-x: hidden;
	position: relative;
	border-top:3px solid var(--main-color);
}

#reveal {
	position: relative;
	background:url( "../img/bg_dot.png");
	width:100%;
	aspect-ratio:1929/712;
	background-repeat: repeat;
	background-size: cover;
	background-position: center center;
	display: flex;
	justify-content: center;
	align-items: center;
}

#keyVisual {
	position: absolute;
	width:65%;
	top:26.95%;
	left:51.99%;
	transform: translateX(-50%);
}
#keyVisual img{
	width: 100%;
	max-width: 1254px;
}

#reveal_chara {
	width:56.6%;
}

#reveal_chara img{
	width:100%;
}

.ticker {
	position: absolute;
	height:100%;
	width:1.14%;
	background-image: url("../img/ribbontext.png");
	background-size: 100% auto;
    -webkit-animation: bgscroll 20s linear infinite;
    animation: bgscroll 40s linear infinite;
	background-repeat: repeat-y;
	overflow: hidden;
	z-index:6;
}

.ticker[name="left"]{
	left:4%;
	transform: rotate(180deg)
}

.ticker[name="right"]{
	right:4%;
}

@-webkit-keyframes bgscroll {
 0% {background-position: 0 0;}
 100% {background-position: 0 -1920px;}
}
 
@keyframes bgscroll {
 0% {background-position: 0 0;}
 100% {background-position: 0 -1920px;}
}

#btn-X {
	width:17.57%; 
}

#btn-Youtube {
	width:19.33%;
}

#Btn-Website {
	width: 21.2%;
}

.slider{
  width:100vw;
  overflow:hidden;
  position:relative;
}

.track{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:40px;
  transition:transform 0.6s ease;
}

.track img{
  width:60vw;
  max-width:600px;
  flex-shrink:0;
}

.gallery{
  width:100%;
  overflow:hidden;
}

.gallery-track{
  display:flex;
  gap:3%;
}

.gallery-track img{
  width:37.3%;
  max-width: 720px;
  flex-shrink:0;
}

.slider {
	position: absolute;
	top:30.1%;
	width: 100%;
  overflow-x: hidden;
}

.slider-track {
	width: 118%;
	margin-left:-9%;
  display: flex;
  gap: 20px;
}

.slider-track img {
  width: calc((100% - 3%) / 3);
  flex-shrink: 0;
}

#gotomaking{
	display: none;
	position: absolute;
	right:30%;
	top:-9%;
	z-index:8;
	width:7.77%;
	aspect-ratio:1/1;
}
#gotomaking a img{
	width:100%;
}


.nui-lineup {
	margin-top:13.11%;
	width: 78.53%;
	max-width: 1515px;
	display: flex;
	justify-content: space-between;
	gap:6%;
}

.nui {
	width:calc(100% - 11.7% / 3 );

	img{
		width:100%;
	}


}
.nui:hover{
	cursor: pointer;
}


#tagimage {
	position: absolute;
	top:-2px;
	right:0px;
	width:11.815%;
	
	img{
		width:100%;
	}
}

#whatsKoineko {
	position: absolute;
	z-index: 8;
	top:16%;
	right:8.39%;
	border-radius: 50%;
	overflow: hidden;
	width:9.33%;
	aspect-ratio:1/1;
}

#whatsKoineko a img{
	width:100%;
}

#reveal_chara_mobile{
	display: none;
}



@media (max-width: 780px){
	#contents{
		width:100%;
		max-width: 780px;
		min-width: 360px;
	}
	
	
	#top{
		width:100%;
		max-width: 780px;
		min-width: 360px;
		background-image: url("../img/mobile/bg_nui_top.png");
		aspect-ratio:780/847;
		background-size: contain;
		background-repeat: no-repeat;
		margin-top:0px;
	}
	#top::after{
		display: none;
	}
	.ticker{
		display: none;
	}
	#keyVisual{
		width: 94%;
		top:31.3%;
	}
	#whatsKoineko{
		width:14.1%;
		top:69.30%;
		right:6%;
	}
	#lineup{
		width:100%;
		max-width: 780px;
		min-width: 360px;
		aspect-ratio:780/2759;
		background-image: url("../img/mobile/bg_nui_lineup.png");
	}
	.nui-lineup{
		width:57.69%;
		margin-top: 19.23%;
		flex-direction: column;
		justify-content: center;
	}
	.nui-lineup .nui{
		width:100%;
		margin-bottom: 12%;
	}
	#reveal_chara{
		display: none;
	}
	#reveal_chara_mobile{
		display: block;
		width:57.7%;
		margin:0 auto;
	}
	#reveal_chara_mobile img{
		width:100%;
	}
	#gallery{
		aspect-ratio:780/600;
		background-image:url("../img/mobile/bg_nui_gallery.png");
	}
	.slider{
		top:25.8%;
		width:100%;
		left:0%;
	}
	.slider-track{
		margin-left:-50.5%;
	}
	.slider-track img{
		width:55.5%;
	}
	#reveal{
		aspect-ratio:780/435;
	}
	#footer{
		aspect-ratio:780/254;
		flex-wrap: wrap;
		align-items: center;
	}
	#footer ul.banners{
		margin:0 auto;
		width:87%;
		max-width: 780px;
		min-width: 360px;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: flex-start;
		gap:15%;
	}
	
	#btn-X{
		width:33.3%;
		margin-bottom:4%;
	}
	#btn-Youtube{
		width:37.1%;
	}
	#Btn-Website{
		width:41.0%;
	}
	#nekologo{
		width:calc( 100% / 780 * 190 );
	}
	#koilogo{
		width:calc( 100% / 780 * 160 );
	}
	#header{
		width: 92.3%;
		height:15.38%;
	}
	#tagimage{
		right:0%;
		width:23.07%;
	}
.parallax-box.delay{
	transition-delay: 0s;
}
.parallax-box.moredelay{
	transition-delay: 0s;
}
	.close{
		width:10%;
	}
	
}