@charset "utf-8";
/* CSS Document */
html,body{
	margin:0;
}
body{
	font-size:10pt;
}

/* Menu */
#menu{
	background-color:rgba(0,0,0,0.7);
	width:100px;
	padding:2em;
	text-align:center;
	margin-left:auto;
	vertical-align:middle;
	float:right;
	color:white;
	position:fixed;
}

#menu li{
	list-style:none;
	color:white;
	font-size:1.5em;
	float:left;
	vertical-align:middle;
}


/* Customize */
.ma10{
	
}
.ma_b10{
	margin-bottom:10px;
}
.bold{
	font-weight:bold;
}
.linemaker{
	background:linear-gradient(transparent 60%, #ff6 60%);
}
.linemaker_red{
	background:linear-gradient(transparent 60%, #f8bbd0 60%);
}

.container{
	height:100%;
}

.main{
	background-color:#e3f2fd;
	padding-top:10px;
	margin:0;
	padding-bottom:10px;
}

.effect-fade {
  opacity: 0;
  transition: all 1000ms; /* フェードインにかかる時間を指定 */
}

.effect-scroll {
  opacity: 1;
}

/*========= 背景動画設定のCSS ===============*/
/*header設定*/
#header{
    position: relative;/*h1の中央寄せ配置の起点とするためのrelative*/
    height: 100vh;/*高さを全画面にあわせる*/
	margin:0;
} 

#video-area{
    position: fixed;
    z-index: -1;/*最背面に設定*/
    top: 0;
    right:0;
    left:0;
    bottom:0;
    overflow: hidden;
}

#video {
    /*天地中央配置*/
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /*縦横幅指定*/
    width: 177.77777778vh; /* 16:9 の幅→16 ÷ 9＝ 177.77% */
    height: 56.25vw; /* 16:9の幅 → 9 ÷ 16 = 56.25% */
    min-height: 100%;
    min-width: 100%;
}

#video-area::after {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100vh;
	background-color: rgba(0,0,0,0.3);
	/*background-image: radial-gradient(#111 30%, transparent 31%), radial-gradient(#111 30%, transparent 31%);*/
	/*background-size: 4px 4px;*/
	/*background-position: 0 0, 2px 2px;*/
}

#filter{
	background-color:gray;
	z-index:-11;
}

/*見出し設定*/
.toplogo{
    /*要素の配置*/
    position:absolute;
    /*要素を天地中央寄せ*/
    top: 50%;
    left: 50%;
	bottom: 0%;
    transform: translateY(-50%) translateX(-50%);
    /*見た目の調整*/
    color:#fff;
    text-shadow: 0 0 15px #666;
	animation-delay:10s;
}

_:lang(x)+_:-webkit-full-screen-document, .toplogo {
	top: 30%;
}

/* Scroll Down */
/*スクロールダウン全体の場所*/
.scrolldown1{
    /*描画位置※位置は適宜調整してください*/
	position:absolute;
	left:50%;
	bottom:30px;
    /*全体の高さ*/
	height:50px;
}

/*Scrollテキストの描写*/
.scrolldown1 span{
    /*描画位置*/
	position: absolute;
	left:-15px;
	top: -15px;
    /*テキストの形状*/
	color: #eee;
	font-size: 0.7rem;
	letter-spacing: 0.05em;
}

/* 線の描写 */
.scrolldown1::after{
	content: "";
    /*描画位置*/
	position: absolute;
	top: 0;
    /*線の形状*/
	width: 1px;
	height: 30px;
	background: #eee;
    /*線の動き1.4秒かけて動く。永遠にループ*/
	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;
	}
}

.msg{
	animation-delay: 5s;
	animation: fadeIn 1s ease 0s 1 normal;
}

.photo-blur {
	
	animation-delay: 6s;
	animation: fadeIn 2s ease 2s 1 forwards;
	-webkit-animation: fadeIn 4s ease 4s 1 forwards;
	opacity:0;
	top:50%;
}

/* じわっと画像が表示される */
@keyframes fadeIn { /*上のbody内で呼び出しているアニメーションと名前をそろえる*/
    0% {
		opacity: 0;
		top:55%;
	} /* 始め */
    100% {
		opacity: 1;
		top:50%;
	} /* 終わり */
}

/* じわっと画像が表示される */
@-webkit-keyframes fadeIn { /*上のbody内で呼び出しているアニメーションと名前をそろえる*/
    0% {
		opacity: 0;
		top:50%;
	} /* 始め */
    100% {
		opacity: 1;
		top:40%;
	} /* 終わり */
}