@charset "utf-8";

/*==================================================
エリア　1
===================================*/
/*==================================================
基本設定
===================================*/
body{
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.1em;
	color: #fff;background:white;
	font-size:1rem;
	line-height:1.85;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-text-size-adjust: 100%;
	word-wrap: break-word;
}
ul{margin:0;padding: 0;list-style: none;}
a{color: #fff;text-decoration: none;outline: none;}
*{box-sizing: border-box}
nav{position: relative;z-index:999;padding:5px 20px;}

body.appear h1{opacity: 1;}
.sp-bottom{text-align: center;}

/*==================================================
ローディング画面
===================================*/
#splash {
	position: fixed;
	width: 100%;height: 100%;z-index: 9999;
	background:rgb(59, 59, 59);/*     ローディング画面　バックの色*/
	text-align:center;/*ローディング画面　JYULIYN.com の位置*/
	/*color:#fff;ローディング画面　JYULIYN.com の色 入れないことにした*/}

.splashbg{display: none;}
body.appear .splashbg{
  display: block;position:fixed;z-index: 999;
  width: 100%;height: 100vh;top: 0;left: 0;
  transform: scaleY(0);
  background-color:rgb(140, 140, 140);/*　　ローディング後の地色*/
	animation-name:PageAnime;
	animation-duration:1.2s;
	animation-timing-function:ease-in-out;
	animation-fill-mode:forwards;}
@keyframes PageAnime{
	0% {transform-origin:top;transform:scaleY(0);}
	50% {transform-origin:top;transform:scaleY(1);}
	50.001% {transform-origin:bottom;}
	100% {transform-origin:bottom;transform:scaleY(0);}
}
#container{position: relative;z-index: 1;opacity: 0;}
body.appear #container{
	animation-name:PageAnimeAppear;
	animation-duration:1s;animation-delay: 0.8s;
	animation-fill-mode:forwards;opacity: 0;}
@keyframes PageAnimeAppear{
	0% {opacity: 0;}
	100% {opacity: 1;}
}

/*==============================================================
2025に戻る　　TOP 　　END
==============================================================*/
#menu li
{display:inline-block;}
#menu li a/*TOP END の色と位置*/
{position: relative;display:inline-block;text-decoration:none;
color: #fff/*TOP END の文字の色*/;padding:20px;}
#menu li a::after {
    content: '';
    position: absolute;
    bottom: 34px;
    left: 10%;
    width: 80%;
    height: 1px;
    background: #fff;/*TOP END の伸びる横線の色*/
    transition: all .3s;
    transform: scale(0, 1);
    transform-origin: center top;/}
#menu li a:hover::after {transform: scale(1, 1);}
#menu .modoru{color:red;font-size:20px;padding: 0px;width: 150px;height: 40px;background: white;text-align: center;}

/*==============================================================
Nya~n　スクロールアイコン
==============================================================*/
/*Nya~nと縦線のグループの配置*/
.scrolldown1{
position:absolute;right:50px;bottom:50px;height:50px;}
.scrolldown1_sub{
position:absolute;right:50px;bottom:50px;height:50px;}

.scrolldown1 span{
position: absolute;
left:-30px;top: 0px;/*Nya~nの配置*/
color: #eee;/*Nya~nの色*/
font-size: 1.5rem;/*Nya~nのサイズ*/
letter-spacing: 0.05em;}

.scrolldown1_sub span{
position: absolute;
left:-11px;top: 0px;/*●の配置*/
color: #eee;/*●の色*/
font-size: 1.5rem;/*N●のサイズ*/
}

.scrolldown1::after{
  content: "";
  position: absolute;
  top: 0;
  width: 2px;/*縦線の太さ*/
  height: 35px;/*縦線の長さ*/
  background: #eee;/*縦線の色*/
  animation: pathmove 1.4s ease-in-out infinite;
  opacity:0;}

.scrolldown1_sub::after{
  content: "";
  position: absolute;
  top: 0;
  width: 2px;/*縦線の太さ*/
  height: 35px;/*縦線の長さ*/
  background: #eee;/*縦線の色*/
  animation: pathmove 1.4s ease-in-out infinite;
  opacity:0;}

@keyframes pathmove{
	0%{height:0;top:0;opacity: 0;}
	30%{height:30px;opacity: 1;}
	100%{height:0;top:50px;opacity: 0;}
}

/*==============================================================
JYULIYAN.COM 2024 JANUARY タイトルタイプ文字
==============================================================*/

h1{font-size: 50px;position: absolute;
  top:50%;left:50%;/*タイプ文字の配置*/
  transform: translate(-50%,-50%);
  z-index: 999;
  letter-spacing: 0.1em;line-height: 1.5;
  width:400px;opacity: 0;}

.ms-section
{color:#fff;padding:20px;}/*タイプ文字の色と配置*/
.ms-section a
{color:#fff;}
.TextTyping span{display: none;}
.TextTyping::after {
 	content: "|";
	animation: typinganime .8s ease infinite;
  font-weight: normal;
  padding: 0 0 0 10px;}
@keyframes typinganime{
	from{opacity:0}to{opacity:1}
}

/*==============================================================
舞い散る
==============================================================*/
.particle{position:absolute;
left:0;top:0;width: 100%;height: 100vh;}
#multiscroll-nav span
{background:transparent!important;
border-color:#fff!important;}
#multiscroll-nav li .active span
{background:#fff!important;}

/*==============================================================
レスポンシブ
==============================================================*/
/*＝＝＝＝＝＝＝＝＝＝＝850px以下＝＝＝＝＝＝＝*/
@media screen and (max-width:850px)
{
/*TOP END*/
#menu li a{top:-20px;left:-20px;}
#header{justify-content: center;}
h1{font-size: 40px;position: absolute;
    top:50%;left:70%;/*タイプ文字の配置*/
    width:350px;opacity: 0;}
}
/*＝＝＝＝＝＝＝＝＝＝＝550px以下＝＝＝＝＝＝＝*/
@media screen and (max-width:550px)
{

/*Nya~nと縦線のグループの配置*/
.scrolldown1{position:absolute;right:50px;bottom:30px;height:50px;}

/*タイトルタイプ文字*/
h1{font-size: 40px;
    top:60%;left:50%;/*タイプ文字の配置*/
    width:350px;}

.ms-section{padding:0;}
.ms-tableCell{vertical-align:top;}
.ms-right{display: none;}
.ms-left{width:100%!important;}
.sp-bottom{padding:20px;}
}
/*＝＝＝＝＝＝＝＝＝＝＝401px以下＝＝＝＝＝＝＝*/
@media screen and (max-width:401px)
{
/*タイトルタイプ文字*/
h1{font-size: 35px;
  top:55%;left:60%;/*タイプ文字の配置*/
  width:320px;}
/*ローディングの文字*/
.glowAnime{font-size: 1.3rem;letter-spacing: 0.2em;margin: 0 0 30px 0;}
/*Nya~nと縦線のグループの配置*/
.scrolldown1_sub{position:absolute;right:20px;bottom:20px;height:50px;}
.scrolldown1_sub span{
position: absolute;
left:-7px;top: 10px;/*●の配置*/
color: #eee;/*●の色*/
font-size: 1rem;/*N●のサイズ*/
}

}
/*＝＝＝＝＝＝＝＝＝＝＝321px以下＝＝＝＝＝＝＝＝＝＝*/
@media screen and (max-width:321px)
{
/*タイトルタイプ文字*/
h1{font-size: 32px;
    top:50%;left:60%;/*タイプ文字の配置*/
    width:280px;}
/*Nya~nと縦線のグループの配置*/
.scrolldown1_sub{position:absolute;right:10px;bottom:40px;height:50px;}
.scrolldown1_sub span{
position: absolute;
left:-5px;top: 17px;/*●の配置*/
color: #eee;/*●の色*/
font-size: 0.7rem;/*N●のサイズ*/
}
}