@charset "utf-8";

@-ms-viewport {
    width: device-width;
}



/* clearfix
------------------------------------------------*/
.clearfix { zoom: 1; }
.clearfix:before,
.clearfix:after {
	display: table;
	content:"";
	line-height: 0;
}
.clearfix:after { clear: both; }

/* 全体
------------------------------------------------*/
/* webフォント読み込み  */
.font_chiaro {
font-family: "fot-chiaro-std", sans-serif;
font-weight: 700;
font-style: normal;
}
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;700&display=swap');
html[lang="ja"] {
	font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  }

ul, ol, dl { 
	list-style: none;
}

body {
	margin: 0;
	padding: 0;
	overflow: scroll;
	font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	font-weight: 400!important;
	background:url(../img/body_bg.png) no-repeat center center/cover;
	/* コンテンツの高さが画像の高さより大きい時、動かないように固定 */
	background-attachment: fixed;
	/* 背景画像が読み込まれる前に表示される背景のカラー */
}


a{
	text-decoration: none;
}
 /*  ================================================================  */
/* 全体　背景へBG  */
 /*  ================================================================  */

  /*  全体へのpadding　一括指定  */
.wrapper {
	background:url(../img/bg.png) repeat center/10%;
	width: 100%;
	margin: 0 auto;
	overflow: hidden;
	background-color: #fff;
}
@media screen and (min-width:641px) {
	.wrapper, .content_01,.content_02,.content_03,.content_04 {
		width: 640px;
	}
}



 /*  ================================================================  */

.mv{
	z-index: 0;
	position: relative;
	background:url(../img/mv_bg.png) no-repeat center/100%;
	height: auto;
	overflow: hidden;
	background-color: #000000;
	
}
.mv_bg img{
	position: absolute;
	width: 100%;
	height: auto;
}
.mv_text01{
	animation-delay: 0.3s;
}

.mv_text02{
	animation-delay: 0.8s;
}

.mv_text03{
	animation-delay: 1.3s;
}
.mv_text04{
	animation-delay: 1.8s;
}
.mv_logo{
	animation-delay: 2.3s;
	animation-duration: 2s;
}

.mv_text01 img{
	width: 38%;
	margin-bottom: -10%;

}

.mv_text02 img{
	width: 23%;
	margin-left: 7%;
	margin-bottom: 30%;
	padding-bottom: 20%;
}

.mv_text03 img{
	position: absolute;
	z-index: 2;
	width: 30%;
	top: 0;
	right: 3%;
}

.mv_text04 img{
	position: absolute;
	z-index: 2;
	width: 28%;
	top:15%;
	right: 2%;
	margin-top: 51%;
}
.mv_logo img{
	position: absolute;
	width: 50%;
	margin: 80% auto 0 auto;
	left: 50%;
	transform: translateX(-50%);
	animation-delay: 6s;
}

video {
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	object-fit: cover;
	mix-blend-mode: color-dodge;
	opacity: 0.5;
	/* グラデーションマスクを適用 */
	-webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 90%, rgba(0,0,0,0));
	mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 90%, rgba(0,0,0,0));
}

/* contents_wrapper =================================================== */
  .midashi_point {
	transform-origin: center;
	animation-delay: 1s;
  }

/* content01 =================================================== */
.content01{
	background:url(../img/content_bg.png) no-repeat top/100%;
	position: relative;
	margin-top: -50%;
}

.content01_midashi{
	width: 40%;
	position: absolute;
	margin-top:13%;
	right: 1%;
	z-index: 1;

}
.content01_bg{
	position: absolute;
  /* 上部10%グラデーションマスクを適用 */
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 10%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 10%);
}
.content01_bg img{
	width: 100%;
}

.content01_text img{
	width: 98%;
	margin-left: 2%;
}

.content01_text01{
	position: absolute;
	top:0;
	z-index: 1;
	animation-delay: 1.3s;
}
.content01_text02{
	position: absolute;
	top:0;
	z-index: 1;
	animation-delay: 1.8s;

}
.content01_text03{
	position: absolute;
	top:0;
	z-index: 1;
	animation-delay: 2.3s;

}


.content01_game{
	position: relative;
	z-index: 1;
	animation: sway 4s ease-in-out infinite;
}
.content01_game_text img{
	position: absolute;
	top: 20%;
	width: 60%;
	transform: rotate(-3deg);
}
.content01_game_bg img{
	margin: 30% 0 0 0;
	width: 60%;
	transform: rotate(-3deg);
}
/* ゆらゆらアニメーション */
@keyframes sway {
    /* 最初と最後の位置 */
    0%,
    100% {
        transform: translateY(0px);
    }

    /* 途中の位置 */
    50% {
        transform: translateY(50px);
    }
}

.content01_game_text02{
	animation-delay: 0.2s;
}

.content01_game_text03{
	animation-delay: 0.6s;

}

.content01_game_text04{
	animation-delay:  1s;
}

.content01_float01 img{
	position: absolute;
	animation: sway 6s ease-in-out infinite;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1;
	opacity: 0.3;
}
.content01_float02 img{
	position: absolute;
	animation: sway 8s ease-in-out infinite;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1;
	opacity: 0.3;
}
.content01_float03 img{
	position: absolute;
	animation: sway 7s ease-in-out infinite;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1;
	opacity: 0.3;
}

/* content02 =================================================== */

.content02{
	margin-top: 10%;
	position: relative;
}

.content02_bg img{
	width: 100%;
}
.content02_midashi{
	width: 40%;
	position: absolute;
	top: 10%;
	left: 5%;
	z-index: 1;
}
.content02_text img{
	width: 98%;
	margin-left: 2%;
}

.content02_text01{
	position: absolute;
	top:5%;
	z-index: 1;
	animation-delay: 1.3s;

}
.content02_text02{
	position: absolute;
	top:5%;
	z-index: 1;
	animation-delay: 1.8s;

}
.content02_text03{
	position: absolute;
	top:5%;
	z-index: 1;
	animation-delay: 2.3s;

}
.content02_float01 img{
	position: absolute;
	animation: sway 8s ease-in-out infinite;
	top: 0;
	left: 0;
	width: 100%;
	opacity: 0.8;
}
.content02_float02 img{
	position: absolute;
	animation: sway 6s ease-in-out infinite;
	top: 0;
	left: 0;
	width: 100%;
	opacity: 0.4;
}

.content02_voice{
	animation-delay: 0.7s;
}

.content02_voice_btn{
	position: absolute;
	bottom:21%;
	right: 8.5%;
	z-index: 2;
	background-color: transparent; /* 背景を透明に */
	border: none; /* ボーダーを削除 */
	padding: 0; /* 余白を削除 */
	margin: 0; /* マージンを削除 */
	cursor: pointer; /* カーソルをポインターに変更（オプション） */
	width: 25%;
	animation-iteration-count: infinite;


}
.content02_voice_btn img{
	width: 100%;
	display: block; /* 画像の周囲に余白ができないようにする */
}
.content02_voice_text{
	position: absolute;
	bottom:15%;
	right: 1%;
	z-index: 2;
	width: 40%;


}
.content02_voice_text img{
	width: 100%;
}

/* content03 =================================================== */

.content03{
	margin-top: -30%;
	margin-bottom: 60%;
	position: relative;
	height: 100vw;
}

@media screen and (min-width:641px) {
	.content03 {
		height: 640px;
	}
}
.content03_bg img{
	width: 100%;
}
.content03_midashi{
	position: absolute;
	top: 12%;
	right: 5%;
	z-index: 2;
	width: 40%;
}

.content03_text img{
	width: 98%;
	margin-left: 2%;
}

.content03_text01{
	position: absolute;
	top:0;
	z-index: 1;
	animation-delay: 1.3s;

}
.content03_text02{
	position: absolute;
	top:0;
	z-index: 1;
	animation-delay: 1.3s;
}

.content03_text03{
	position: absolute;
	top:0;
	z-index: 1;
	animation-delay: 2.3s;

}
.content03_text04{
	position: absolute;
	top:0;
	z-index: 1;
	animation-delay: 2.3s;

}

/*-　桜アニメーション　-*/
.sakura {
	position: absolute;
	padding: 0;
	margin: 0;
	width: 100%;
	height: auto;
	display: block;
	justify-content: center;
	align-items: center;
}

.sakura li {
	position: absolute;
	list-style: none;
	top: -50px;
	background: #ffdbed;
	border-radius: 0% 70%;  
	animation: fall 4s linear infinite, sway 2s ease-in-out infinite alternate, fadeInOut 4s linear infinite;
	opacity: 0; /* 初期状態を透明にする */
	filter: drop-shadow(0 0 5px #ffda9b);
}

@keyframes fall {
	to {
		top: 70%;
	}
}
@keyframes sway1 {
	from {
		transform: translateX(0px) rotate(0deg);
		opacity: 0;
	}
	to {
		transform: translateX(200px) rotate(-45deg);
		opacity: 1;
	}
}

@keyframes sway2 {
	from {
		transform: translateX(200px) rotate(-45deg);
		opacity: 0;
	}
	to {
		transform: translateX(0px) rotate(0deg);
		opacity: 1;
	}
}

@keyframes fadeInOut {
	0% {
		opacity: 0; /* 一番上で透明 */
	}
	10% {
		opacity: 1; /* 少し下がってふわっと表示 */
	}
	90% {
		opacity: 1; /* 表示されたまま下がる */
	}
	100% {
		opacity: 0; /* 一番下でふわっと消える */
	}
}

.sakura li:nth-child(1) {
	left: 0%;
	width: 24px;
	height: 15px;
	animation: fall 10s linear infinite, sway1 3s ease-in-out infinite alternate, fadeInOut 10s linear infinite;
	animation-delay: 2s;
}

.sakura li:nth-child(2) {
	left: 5%;
	width: 13px;
	height: 9px;
	animation: fall 15s linear infinite, sway1 2s ease-in-out infinite alternate, fadeInOut 15s linear infinite;
	animation-delay: 8s;
}

.sakura li:nth-child(3) {
	left: 15%;
	width: 16px;
	height: 10px;
	animation: fall 9s linear infinite, sway1 3.5s ease-in-out infinite alternate, fadeInOut 9s linear infinite;
	animation-delay: 13s;
}

.sakura li:nth-child(4) {
	left: 30%;
	width: 16px;
	height: 10px;
	animation: fall 8s linear infinite, sway2 4s ease-in-out infinite alternate, fadeInOut 8s linear infinite;
	animation-delay: 7s;
}

.sakura li:nth-child(5) {
	left: 40%;
	width: 16px;
	height: 10px;
	animation: fall 10s linear infinite, sway1 4s ease-in-out infinite alternate, fadeInOut 10s linear infinite;
	animation-delay: 0s;
}

.sakura li:nth-child(6) {
	left: 55%;
	width: 24px;
	height: 15px;
	animation: fall 11s linear infinite, sway2 3s ease-in-out infinite alternate, fadeInOut 11s linear infinite;
	animation-delay: 3s;
}

.sakura li:nth-child(7) {
	left: 65%;
	width: 16px;
	height: 10px;
	animation: fall 7s linear infinite, sway2 3.5s ease-in-out infinite alternate, fadeInOut 7s linear infinite;
	animation-delay: 7s;
}

.sakura li:nth-child(8) {
	left: 50%;
	width: 13px;
	height: 9px;
	animation: fall 7s linear infinite, sway1 3s ease-in-out infinite alternate, fadeInOut 7s linear infinite;
	animation-delay: 3s;
}

.sakura li:nth-child(9) {
	left: 80%;
	width: 16px;
	height: 10px;
	animation: fall 10s linear infinite, sway2 4s ease-in-out infinite alternate, fadeInOut 10s linear infinite;
	animation-delay: 4s;
}

  /*-　桜アニメーションここまで　-*/

/* content04 =================================================== */

.content04{
	overflow: hidden;
	background:
	linear-gradient(-180deg,
	 rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 7%,
	 rgba(105, 73, 186, 0.5) 8%, rgba(105, 73, 186, 0.5) 24%, 
	 rgba(58, 202, 255, 0.5) 26%, rgba(58, 202, 255, 0.5) 43%,
	 rgba(255,216,0,0.5) 45%,	 rgba(255,216,0,0.5) 61%,
	 rgba(255,36,0,0.5) 64%, 	 rgba(255,36,0,0.5) 80.5%, 
	 rgba(225, 77, 141, 0.5) 82.5%,	 rgba(225, 77, 141, 0.5) 98%,
	  rgba(255,255,255,0) 100%);
	padding-bottom: 10%;
}


.content04_title_wrapper{  /*-親-*/
	display: flex;
	align-items: center;
	width: 100%;
	margin: 50% 2.5% 0 2.5%;
}
.content04_midashi{ /*-子①-*/
	width: 35%;
	height: 35%;
	z-index: 2;
}

.content04_title_text{ /*-子②-*/
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 60%;
}

.content04_title01{
	animation-delay: 0.7s;
	width: 60%;
}
.content04_title02{
	animation-delay: 0.5s;
	width: 100%;
}

.content04_chara{
  overflow: hidden;
  position: relative;
  filter:drop-shadow(0 0 0.5rem rgb(46, 39, 40));
}
.content04_chara img{
	width: 100%;
}
.content04_chara_inner{
	position: relative;
	padding: 3% 0;
}
.content04_chara_inner img{
	position: absolute;
}

.content04_chara_zenshin{
	animation-delay: 1s;
}

.content04_chara_up{
	animation-delay: 0.5s;
}

.content04_chara_read{
	animation-delay: 2s;
}

.content04_chara_kamon{
	animation-delay: 4.5s;
	
}
.content04_chara_name{
	animation-delay:4s;
}

.content04_chara02{
	margin-top: -20%;
}
.content04_chara03{
	margin-top: -15%;	
}
.content04_chara04{
	margin-top: 20%;
}

.content04_chara05{
	margin-top: 20%;
}


/* ulタグ */
.scroll-list {
	display: flex;
	font-size: 50%;
	list-style: none;
	padding-inline: 0;
	margin-inline: 0;
	gap: 0;
	background-color: rgb(0, 0, 0);
	overflow: hidden;
	margin-top: 10%;
	margin-bottom: -10%;
	transform: rotate(-9deg);
	width: 140%;
	margin-left: -4%;
	opacity: 0.7;
}
  
  /* liタグ */
  .scroll-list01 li {
	color: #9a8ff0;
	font-size: 3em;
	font-weight: bold;
	white-space: nowrap;
	padding: 0 1em 0 0;
	margin: 0;
	animation: marquee-left 16s linear infinite;
  }
  .scroll-list02 li {
	color: #8fd6f0;
	font-size: 3em;
	font-weight: bold;
	white-space: nowrap;
	padding: 0 1em 0 0;
	margin: 0;
	animation: marquee-left 16s linear infinite;
  }
  .scroll-list03 li {
	color: #f9c75b;
	font-size: 3em;
	font-weight: bold;
	white-space: nowrap;
	padding: 0 1em 0 0;
	margin: 0;
	animation: marquee-left 16s linear infinite;
  }
  
  .scroll-list04 li {
	color: #f95b5b;
	font-size: 3em;
	font-weight: bold;
	white-space: nowrap;
	padding: 0 1em 0 0;
	margin: 0;
	animation: marquee-left 16s linear infinite;
  }
  .scroll-list05 li {
	color: #e799b1;
	font-size: 3em;
	font-weight: bold;
	white-space: nowrap;
	padding: 0 1em 0 0;
	margin: 0;
	animation: marquee-left 16s linear infinite;

  }
  
  /* PCの時のフォントサイズ */
  @media (min-width: 641px) {
	.scroll-list li {
	  font-size: 40px;
	}
  }
  
  /* アニメーション */
  @keyframes marquee-left {
	100% {
	  transform: translateX(-150%);
	}
  }


/* content05 =================================================== */
.content05{
	margin-top: -10%;
	position: relative;
	z-index: 1;
}

.content05_bg img{
	width: 100%;
}

.content05_text img{
	width: 98%;
	margin-left: 2%;
}

.content05_text01{
	position: absolute;
	top:0%;
	z-index: 1;
	animation-delay: 1s;


}
.content05_text02{
	position: absolute;
	top:0%;
	z-index: 1;
	animation-delay: 1.7s;

}
.content05_text03{
	position: absolute;
	top:0%;
	z-index: 1;
	animation-delay: 2.4s;

}

/* content06 =================================================== */
.content06{
	margin-top: -30%;
	position: relative;
	height: 120%;
}

.content06_bg img{
	width: 100%;
}

.content06_text img{
	width: 98%;
}

.content06_text01{
	position: absolute;
	top:5%;
	z-index: 1;
	

}
.content06_text02{
	position: absolute;
	top:5%;
	z-index: 1;
	animation-delay: 1s;

}


.content06_text03{
	position: absolute;
	top:5%;
	z-index: 1;
}


/* content07 =================================================== */

.content07 {
    position: relative;
    display: flex; 
    justify-content: center; 
    align-items: flex-start; /* 追加：垂直方向の配置 */
    text-align: center;
    width: 100%;
    height: 130vw; /* 必要に応じて調整 */
    margin: -2% auto 0 auto;
    background: url(../img/content07_bg.png) repeat top left/100%;
    /* 下10%グラデーションマスクを適用 */
    mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 40%), #302d2d;
}

/* PC */
@media (min-width: 641px) {
    .content07 {
        height: 830px; /* 必要に応じて調整 */
    }
}

.content07_text01 {
    width: 50%;
    z-index: 1;
    margin-top: 15%;
	animation: infinite;
}

/* PC */
@media (min-width: 641px) {
    .content07_text01 {
        margin-top: 10%; 
    }
}
.content07_text01 img{
	width: 100%;

}
.content07_inner{
    position: absolute;
	left: 50%;
    transform: translateX(-50%);
    background-color: #fff;
    border-radius: 30px;
    text-align: center;
    width: 95%; /* 調整 */
	height: auto;
	margin-top: 20%;
}
.content07_inner_txtlogo{
	padding-top: 10%;
	width: 100%;
}
.content07_text02{
	font-size: 7vw;
	font-family: "fot-chiaro-std", sans-serif;
	color: #d411ca;
	background-color: #f9c75b;
	display: inline;
	background: linear-gradient(transparent 60%, yellow 60%);
}

/* PCの時のフォントサイズ */
@media (min-width: 641px) {
	.content07_text02{
		font-size:  40px;
}
}

.content07_logo img{
	width: 50%;
}

.content07_DL_text img{
	width: 90%;

}
.content07_DL_btn{
	display: flex;
	width: 100%;
}

img.content07_DL_btn01{
	width: 90%;
	margin-right: -2%;
	margin-bottom: 6%;
}
img.content07_DL_btn02{
	width: 90%;
	margin-left: -2%;
}
/* footer =================================================== */
footer{
	background-color: #090909;
	padding: 5% 0;
	margin: 0 auto;
	text-align: center;
	width: 100%;
}

footer img{
	width: 100%;
}
footer p{
	margin-top: 5%;
	margin-bottom: 2%;
	font-size: xx-small;
	color: #9c9c9c;
}

/* 下部固定DLボタン（追従） */
.bottom_kotei {
    z-index: 3;
    background: url(../img/bottom_kotei_bgpat.png) repeat top/10%,
                linear-gradient(180deg, rgba(70,58,65,0.8) 0%, rgba(26,26,26,0.9) 100%);
    position: fixed;
    bottom: 0;
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out, transform 0.5s ease-in-out;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    padding-bottom: 0.5%;
    width: 100%; /* 画面幅に収める */
    box-sizing: border-box;
}
.bottom_kotei_text {
    margin-top: 2%;
    margin-bottom: -2%;
}
.bottom_kotei_text img{
	width: 100%;
}

.bottom_kotei_btn {
	width: 100%;
	margin-bottom: 6%;

}
.bottom_kotei_btn01 img{
	width: 45%;
}
.bottom_kotei_btn02 img{
	width: 53%;

}


/* PC */
@media (min-width: 641px) {
	.bottom_kotei {
		padding-bottom: 0;
	}
	
}


/* 表示アニメーション (通常のフェードインなど) */
@keyframes fadein {
	0% {
		opacity: 0;
		transform: translateY(20px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

/* 非表示アニメーション (footer でのフェードアウト) */
.is-hidden-animation {
	opacity: 0;
	visibility: hidden;
	transform: translateY(50px);
	transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out, transform 0.5s ease-in-out;
}

/* アニメーションなしで即座に非表示 (mv 領域で使用) */
.is-hidden-no-animation {
	opacity: 0;
	visibility: hidden;
	transform: translateY(0); /* 位置変化はなし */
	transition: none; /* アニメーションを無効化 */
}

/* スクリーンサイズによって変更するスタイル (例として使用) */
@media screen and (min-width: 641px) {
	.bottom_kotei {
		width: 640px;
	}
}




/* ========================================================================== 
　 モーダル
============================================================================ */

/*モーダルを開くボタン*/
.modal-open{
	text-align: center;
	display: inline-block;
    justify-content: center;
	color: #fff;
	background: #363636;
	margin: 0 auto;
	border-radius: 10px;
	padding: 5px 10px;
	cursor: pointer;
	font-weight: 400;
	font-size: 0.8em;

}
/*モーダル本体の指定 + モーダル外側の背景の指定*/
.modal-container{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-align: center;
	background: rgba(0, 0, 0, 0.5);
	padding: 40px 20px;
	overflow: auto;
	opacity: 0;
	visibility: hidden;
	transition: .3s;
    box-sizing: border-box;
	z-index: 4; /* 追加: モーダル全体の z-index を設定 */

}
/*モーダル本体の擬似要素の指定*/
.modal-container:before{
	content: "";
	display: inline-block;
	vertical-align: middle;
	height: 100%;
}
/*モーダル本体に「active」クラス付与した時のスタイル*/
.modal-container.active{
	opacity: 1;
	visibility: visible;
}
/*モーダル枠の指定*/
.modal-body{
	position: relative;
	display: inline-block;
	vertical-align: middle;
	max-width: 500px;
	width: 90%;
}
/*モーダルを閉じるボタンの指定*/
.modal-close{
	position: absolute;
	z-index: 1000;
	display: flex;
    align-items: center;
    justify-content: center;
	top: -50px;
	right: -10px;
	width: 50px;
	height: 50px;
	font-size: 50px;
	color: #fff;
}
/*モーダル内のコンテンツの指定*/
.modal-content{
	background: #fff;
	text-align: center;
	height: 70vh;
	overflow: scroll;
}
.modal-content p{
	background-color: #323232;
	color: #fff;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: bold;
	font-size: large;
	margin-top: 0;
	padding: 10px 0;

}
.modal-content dl{
	font-family: 'Noto Sans JP', sans-serif;
	padding: 0px 20px 20px 20px;
}
.modal-content dt{
	opacity: 0.8;
	font-size: 0.9em;
	font-weight: 600;
	margin: 0 0 2% 0;
}
.modal-content dd{
	font-size: 0.95em;
	margin-left: 0;
	margin-top: 10%;
	margin-bottom: 3%;

}
/* ============================================================================ */
/* ============================================================================ */
/* ============================================================================ */