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

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
*, *:before, *:after {
box-sizing: border-box;
}
a{
  outline: none;
  text-decoration:none;
}
img{
	vertical-align: bottom;
}
/* ------ */

html{
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 62.5%;/*rem算出をしやすくするために*/
/*	scroll-behavior: smooth;*/
}

body {
	font-family: "BIZ UDPGothic", "Josefin Sans", sans-serif;
	width: 100%;
	color: #000;
  font-size: 2.1rem;/*body内基本フォントサイズ*/
	background-color: #000;
}

.inner{
	width: 1000px;
  margin: 0 auto;
}

button{
  outline: none;
}
/* Firefox */
button::-moz-focus-inner {
  border: 0;
}

.clearfix:after {
 visibility: hidden;
 display: block;
 font-size: 0;
 content: " ";
 clear: both;
 height: 0;
}

.sp{
  display: none;
}

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

/*------------------------------------------------------------------------------------------------
moonrabi-Menu
------------------------------------------------------------------------------------------------*/
.bgColor{
	background-color: #fff;
}

#moonrabi-nav{
  font-family: Meiryo, "sans-serif";
  color: #fff;
  background-color: #fff;
  font-size: 1.4rem;
  letter-spacing: 0;
  line-height: 1;
  padding: 0.5rem;
  width: 1000px;
  height: 50px;
}
#moonrabi-nav ul{
  list-style: none;
  position: relative;
  font-weight: bold;
  margin-top: 5px;
  display: flex;
  align-items: center;
  float: right;
}


#moonrabi-nav ul li{
 margin-left: 7px;
}

#moonrabi-nav .moonrabi-btn{
  display: flex;
  justify-content: space-evenly; 
  align-items: center;
	text-decoration: none;
	width: auto;
	padding: 0.7rem 1rem;
	font-weight: bold;
	background: #39b89f;
	color: #fff;
	position: relative;
}

#moonrabi-nav .moonrabi-btn-non{
  display: flex;
  justify-content: space-evenly; 
  align-items: center;
	text-decoration: none;
	width: auto;
	padding: 0.7rem 1rem;
	font-weight: bold;
	background: #d0d0d0;
	color: #fff;
	position: relative;
}
#moonrabi-nav h1{
  float: left;
}
#moonrabi-nav .moonrabi-btn::before {
	content: '';
	width: 0.7rem;
	height: 0.7rem;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	transform: rotate(45deg);
  margin-right: 1.5rem;
}

#moonrabi-nav ul li .moonrabi-btn:hover {
	background: #595656;
}
/*------------------------------------------------------------------------------------------------
header
------------------------------------------------------------------------------------------------*/

header{
  background: url("../images/header-bg.jpg") no-repeat top center;
	overflow: hidden;
  height: 848px;
}

header .inner{
  position: relative;
}

header .inner h1{
  position: absolute;
  top: 405px;
  right: -10px;
  z-index: 2;
}

header .inner h2{
  position: absolute;
  top: 124px;
  left: 192px;
  z-index: 2;
	  animation-duration: 1.5s;
  animation-delay: 3s;
  animation-fill-mode: both;
　opacity: 0;
}

header .inner .header-chara{
  position: absolute;
  top: 191px;
  left: -88px;
	animation-duration: 1.5s;
  animation-delay: 2s;
  animation-fill-mode: both;
　opacity: 0;
	z-index: 1;
}

header .inner .catch{
  position: absolute;
  top: 41px;
  left: 369px;
  z-index: 2;
	  animation-duration: 1.5s;
  animation-delay: 3s;
  animation-fill-mode: both;
　opacity: 0;
}

header .inner .header-sns{
	position: absolute;
	top: 38px;
	right: 0;
}

header .header-bottom{
	background: url("../images/header-bottom.png") no-repeat top center;
	height: 55px;
	width: 100%;
	position: absolute;
	top: 843px;
	z-index: 1;
}
/* ============
animation
============*/
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.fadein {
  animation-name: fadeIn;
}

.fade_in {
  opacity: 0.1;
  transform: translate(0, 80px);
  transition: all 500ms; }

.fade_in.left_side {
  transform: translate(-160px, 0); }

.fade_in.right_side {
  transform: translate(160px, 0); }

.fade_in.scrollin {
  opacity: 1;
  transform: translate(0, 0); }


header .inner .snow{
    position: relative;
    height: 848px;
}

header .inner .snow span{
  position: absolute;
    top: -100%;
}


.snow span:nth-child(1) {
  width: 79px;
  height: 89px;
  background: url("../images/snowflake-01.png") no-repeat;
  animation: confetti1 2s 0s linear infinite;
  left: -342px;
}

.snow span:nth-child(2) {
  width: 143px;
  height: 153px;
  background: url("../images/snowflake-02.png") no-repeat;
  animation: confetti1 8s 0s linear infinite;
  left: -166px;
}

.snow span:nth-child(3) {
  width: 112px;
  height: 117px;
  background: url("../images/snowflake-03.png") no-repeat;
  animation: confetti1 4s 0s linear infinite;
  left: -403px;
}
.snow span:nth-child(4) {
  width: 247px;
  height: 233px;
  background: url("../images/snowflake-04.png") no-repeat;
  animation: confetti1 9s 0s linear infinite;
  left: -491px;
}
.snow span:nth-child(5) {
  width: 76px;
  height: 84px;
  background: url("../images/snowflake-05.png") no-repeat;
  animation: confetti1 6s 0s linear infinite;
  left: -201px;
}
.snow span:nth-child(6) {
  width: 77px;
  height: 86px;
  background: url("../images/snowflake-06.png") no-repeat;
  animation: confetti1 5s 0s linear infinite;
  left: 146px;
}
.snow span:nth-child(7) {
  width: 80px;
  height: 91px;
  background: url("../images/snowflake-07.png") no-repeat;
  animation: confetti1 8s 0s linear infinite;
  left: 243px;
}
.snow span:nth-child(8) {
  width: 119px;
  height: 116px;
  background: url("../images/snowflake-08.png") no-repeat;
  animation: confetti1 8s 0s linear infinite;
  left: 304px;
}

.snow span:nth-child(9) {
  width: 86px;
  height: 88px;
  background: url("../images/snowflake-09.png") no-repeat;
  animation: confetti1 5s 0s linear infinite;
  right: 165px;
}

.snow span:nth-child(10) {
  width: 169px;
  height: 165px;
  background: url("../images/snowflake-10.png") no-repeat;
  animation: confetti1 12s 0s linear infinite;
  right: 0;
}

.snow span:nth-child(11) {
  width: 243px;
  height: 233px;
  background: url("../images/snowflake-11.png") no-repeat;
  animation: confetti1 11s 0s linear infinite;
  right: -182px;
}

.snow span:nth-child(12) {
  width: 74px;
  height: 76px;
  background: url("../images/snowflake-12.png") no-repeat;
  animation: confetti1 7s 0s linear infinite;
  right: -399px;
}


.snow span:nth-child(13) {
  width: 217px;
  height: 281px;
  background: url("../images/snowflake-13.png") no-repeat;
  animation: confetti1 10s 0s linear infinite;
  right: -478px;
}

.snow span:nth-child(14) {
  width: 128px;
  height: 113px;
  background: url("../images/snowflake-14.png") no-repeat;
  animation: confetti1 8s 0s linear infinite;
  right: -146px;
}

.snow span:nth-child(15) {
  width: 106px;
  height: 130px;
  background: url("../images/snowflake-15.png") no-repeat;
  animation: confetti1 3s 0s linear infinite;
  right: -391px;
}
@keyframes confetti1 {
  0% {
    top: -10%;
    transform: translateX(0) rotateX(0) rotateY(0);
  }

  100% {
    top: 100%;
    transform: translateX(20px) rotateX(180deg) rotateY(360deg);
}
}

@keyframes confetti2 {
  0% {
    top: -10%;
    transform: translateX(0) rotateX(0) rotateY(0);
  }

  100% {
    top: 100%;
    transform: translateX(-20vw) rotateX(180deg) rotateY(360deg);
  }
}

@keyframes confetti3 {
  0% {
    top: -10%;
    transform: translateX(0) rotateX(0) rotateY(0);
  }

  100% {
    top: 100%;
    transform: translateX(20vw) rotateX(180deg) rotateY(360deg);
  }
}
/*------------------------------------------------------------------------------------------------
register
------------------------------------------------------------------------------------------------*/

.register{
  position: relative;
  background: url("../images/register-bg.jpg") no-repeat top center;
  width: 100%;
  height: 122px;
  top: 0;
	z-index: 3;
}

.register ul{
  padding-top: 12px;
  display: flex;
  justify-content: center;
}

.register ul li{
  margin-right: 67px;
}

.register ul li:last-child{
  margin-right: 0;
}

/*------------------------------------------------------------------------------------------------
nav
------------------------------------------------------------------------------------------------*/
nav{
  position: relative;
  background: url(../images/menu-bg.png) repeat top center;
  width: 100%;
  height: 109px;
  top: 0;
  z-index: 100;
}

nav ul{
  display: flex;
  justify-content: center;
}

nav ul li{
  margin-right: 0px;
}

nav ul li:last-child{
  margin-right: 0;
}

nav.fixed{
	position: fixed;
}

/*------------------------------------------------------------------------------------------------
loading
------------------------------------------------------------------------------------------------*/
#loading-screen {
    position: fixed; /* 修正：画面全体に固定 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 背景色をグラデーションから、画像の雰囲気に合うものに変更 */
    background: #0c142c; /* 暗い青系の単色、または元の画像を使う */
    z-index: 9999; 
    display: flex;
    justify-content: center;
    align-items: center; /* コンテンツを画面中央に配置 */
    flex-direction: column;
    color: white;
    font-family: 'Georgia', serif; 
    /* **重要**：背景画像を完全に覆うための設定を確実にする */
    overflow: hidden; 
}
/* ローディングコンテンツ */
.loading-content {
    text-align: center;
    z-index: 10000; /* 雪より前面に */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

/* タイトルロゴ（メイン画像） */
.title-logo {
    display: block; /* 中央寄せのため */
    width: 100%; /* 幅を調整 (適宜変更してください) */
    max-width: 450px; /* PCなど大画面での最大幅 */
    height: auto;
    margin-bottom: 10px; /* サブタイトルとの間にスペース */
}

/* ローディングスピナー（シンプルなもの） */
.loader {
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top: 4px solid #fff;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: 20px auto;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 雪のコンテナ */
#snow-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* 雪の粒の基本スタイル */
.snowflake {
    position: absolute;
    background-color: white;
    border-radius: 50%;
    pointer-events: none; /* クリック不可に */
    opacity: 0.8;
}

/* 落下アニメーションの定義 (複数のアニメーションを定義することで自然な動きに) */
@keyframes fall-1 {
    0% { top: -10%; opacity: 0.5; }
    100% { top: 110%; opacity: 0; }
}

@keyframes fall-2 {
    0% { top: -10%; opacity: 0.7; }
    100% { top: 110%; opacity: 0; }
}

@keyframes fall-3 {
    0% { top: -10%; opacity: 0.9; }
    100% { top: 110%; opacity: 0; }
}

/*------------------------------------------------------------------------------------------------
story
------------------------------------------------------------------------------------------------*/
#story{
  background: url("../images/story-bg.jpg") no-repeat top center;
  overflow: hidden;
}

#story .inner{
  height: 943px;
  position: relative;
}

#story .inner .title {
  position: absolute;
  top: 47px;
  left: 238px;
}

#story .inner .txt li{
  position: absolute;
}

#story .inner .txt li:nth-of-type(1){
	top: 245px;
	right: 0;
}

#story .inner .txt li:nth-of-type(2){
	top: 376px;
	right: 24px;
}

#story .inner .txt li:nth-of-type(3){
	top: 618px;
	right: 60px;
}

#story .inner .chara {
  position: absolute;
	top: 312px;
	left: -78px;
}


/*------------------------------------------------------------------------------------------------
update-1223
------------------------------------------------------------------------------------------------*/
.update-12231{
  background: url("../images/update-bg1.jpg") no-repeat top center;
  overflow: hidden;
}

.update-12231 .inner{
  height: 1302px;
  position: relative;
  text-align: center;
}

.update-12231 .title{
  position: absolute;
	top: 87px;
	left: 98px;
}
.update-12231 .inner .chara{
	position: relative;
}

.update-12231 .inner .desc li,
.update-12231 .inner .chara li,
.update-12231 .inner .chara li .txt{
  position: absolute;
}

.update-12231 .inner .chara li:nth-of-type(1){
	top: 252px;
	left: -500px;
}

.update-12231 .inner .chara li:nth-of-type(1) .txt{
	top: 672px;
	left: 490px;
}

.update-12231 .inner .chara li:nth-of-type(2){
	top: 300px;
	right: -500px;
}

.update-12231 .inner .chara li:nth-of-type(2) .txt{
	top: 666px;
	right: 492px;
}

.update-12231 .inner .desc li:nth-of-type(1){
	top: 399px;
	left: 316px;
}

.update-12231 .inner .desc li:nth-of-type(2){
	top: 647px;
	left: 209px;
}



.update-12232{
  background: url("../images/update-bg2.jpg") no-repeat top center;
  overflow: hidden;
}

.update-12232 .inner{
  height: 966px;
  position: relative;
  text-align: center;
}

.update-12232 .inner .map{
	background: url("../images/update-map-bg.png") no-repeat top center;
	width: 1225px;
	height: 848px;
	position: absolute;
	top: 63px;
	left: -113px;
}


.update-12232 .inner .map .title{
	position: absolute;
	top: 80px;
	left: 104px;
}

.update-12232 .inner .map .map-1 li,
.update-12232 .inner .map .map-2 li{
	position: absolute;
}

.update-12232 .inner .map .map-1 li:nth-of-type(1){
	top: 202px;
	left: 171px;
}

.update-12232 .inner .map .map-1 li:nth-of-type(2){
	top: 261px;
	left: 104px;
}

.update-12232 .inner .map .map-1 li:nth-of-type(3){
	top: 604px;
	left: 144px;
}

.update-12232 .inner .map .map-2 li:nth-of-type(1){
	top: 202px;
	right: 158px;
}

.update-12232 .inner .map .map-2 li:nth-of-type(2){
	top: 261px;
	right: 102px;
}

.update-12232 .inner .map .map-2 li:nth-of-type(3){
	top: 604px;
	right: 105px;
}

/*------------------------------------------------------------------------------------------------
update0127
------------------------------------------------------------------------------------------------*/
#update0127 .update0127-top{
	background: url("../images/class-top.png") no-repeat top center;
	height: 220px;
	width: 100%;
	position: absolute;
	top: 0;
}

#update0127{
  background: url("../images/class-bg.jpg") no-repeat top center;
	position: relative;
	height: 1575px;
}

#update0127 .inner{
  text-align: center;
	position: relative;
}

#update0127 .inner .title{
  position: absolute;
	top: 257px;
	left: 146px;
}

#update0127 .inner .subtitle{
  position: absolute;
	top: 369px;
	left: 187px;
}

#update0127 .inner .txt li{
	position: absolute;
}

#update0127 .inner .txt li:nth-of-type(1){
	top: 482px;
	left: 0;
}

#update0127 .inner .txt li:nth-of-type(2){
	top: 494px;
	left: 259px;
}

#update0127 .inner .txt li:nth-of-type(3){
	top: 1154px;
	left: -136px;
	
}

#update0127 .inner .txt li:nth-of-type(4){
	top: 827px;
	left: -32px;
}
/*------------------------------------------------------------------------------------------------
about
------------------------------------------------------------------------------------------------*/
#about{
  background-color: rgba(16,26,44,0.55);
  height: 905px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

#about .inner{
  position: relative;
}

#about .inner .title{
  position: absolute;
  top: 90px;
  left: 139px;
}

#about .inner .subtitle{
  position: absolute;
  top: 170px;
  left: 74px;
}

#about .inner .txt{
  position: absolute;
	top: 363px;
	left: 187px;
}

#about .inner .chara li{
  position: absolute;
}

#about .inner .chara li:nth-of-type(4){
	top: 286px;
	left: -329px;
}

#about .inner .chara li:nth-of-type(3){
	top: 515px;
	left: 14px;
}

#about .inner .chara li:nth-of-type(2){
	top: 462px;
	right: -9px;
}

#about .inner .chara li:nth-of-type(1){
	top: 238px;
	right: -273px;
}

#about .about-bottom{
	background: url("../images/about-bottom.png") no-repeat top center;
	height: 22px;
	width: 100%;
	position: absolute;
	bottom: 0;
}

.background video{
	display: block;
	min-width: 100%;
	height: auto;
	margin: 0;
  padding: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  z-index: -1;
}
/*------------------------------------------------------------------------------------------------
btn
------------------------------------------------------------------------------------------------*/
#btn{
  background: url("../images/register2-bg.jpg") repeat top center;
  height: 144px;
}

#btn ul{
  padding-top: 34px;
  display: flex;
  justify-content: center;
	
}

#btn ul li{
  margin-right: 63px;
z-index: 101;
}

#btn ul li:last-child{
  margin-right: 0;
}
/*------------------------------------------------------------------------------------------------
footer
------------------------------------------------------------------------------------------------*/
footer{
  background-color: #fff;
  height: 225px;
  text-align: center;
}

footer ul{
  padding: 30px 0;
  display: flex;
  justify-content: center;
    align-items: center;
}

footer li{
  padding: 0 10px 0 0;
}

footer p{
    padding-top: 16px;
}

footer #copyright{
    font-size: 14px;
    color: #959aad;
    line-height: 1.5;
    letter-spacing: normal;
}