@charset "utf-8";
body{background:white;}

#splash {
	position: fixed;
	width: 100%;height: 100%;z-index: 9999;
	background:darkgreen;/*ローディング画面　バックの色*/
	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:yellowgreen;/*ローディング後の地色*/
	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;}
}
#menu li
{display:inline-block;}
#menu li a/*TOP END の色と位置*/
{position: relative;display:inline-block;text-decoration:none;
color: #fff;padding:20px;}
#menu li a::after {/*TOP END の伸びる横線*/
    content: '';
    position: absolute;
    bottom: 34px;
    left: 10%;
    width: 80%;
    height: 1px;
    background: #fff;
    transition: all .3s;
    transform: scale(0, 1);
    transform-origin: center top;/}
#menu li a:hover::after {transform: scale(1, 1);}
/*Nya~nと縦線のグループの配置*/
.scrolldown1{
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::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~~CAJENDER タイトルタイプ文字＝＝＝＝＝＝＝＝＝＝*/
h1{font-size: 2rem;position: absolute;
    top:50%;left:50%;/*タイプ文字の配置*/
    transform: translate(-50%,-50%);
    z-index: 999;
    letter-spacing: 0.1em;
    width:10em;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;}




/*＝＝＝＝＝＝＝＝＝＝＝レスポンシブ＝＝＝＝＝＝＝＝＝＝＝＝＝*/
/*＝＝＝＝＝＝＝＝＝＝＝768px以下＝＝＝＝＝＝＝*/
@media screen and (max-width:768px)
{
 h1{font-size: 1.5rem;}
}
/*＝＝＝＝＝＝＝＝＝＝＝550px以下＝＝＝＝＝＝＝*/
@media screen and (max-width:550px)
{
/*TOP END*/
#menu li a{top:-20px;left:-20px;}
#header{justify-content: center;}
.scrolldown1
{
position:absolute;
right:50px;bottom:30px;
height:50px;}
/*タイトルタイプ文字*/
h1{font-size: 1.5rem;
top:30%;left:50%;/*タイプ文字の配置*/
line-height: 1.5;}
.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: 1.5rem;
top:25%;left:50%;/*タイプ文字の配置*/
line-height: 1.5;}

/*ローディングの文字*/
.glowAnime{font-size: 1.3rem;letter-spacing: 0.2em;
	margin: 0 0 30px 0;}

}
/*＝＝＝＝＝＝＝＝＝＝＝321px以下＝＝＝＝＝＝＝＝＝＝*/
@media screen and (max-width:321px)
{
/*タイトルタイプ文字*/
h1{font-size: 1.2rem;
top:25%;left:40%;/*タイプ文字の配置*/
line-height: 1.5;}
}