@charset "utf-8";

/*******************統一設定*******************/
*{
	margin:0;
	padding:0;
	list-style:none;
	text-decoration:none;
}

::selection{
	color:#fff;
	background:#e084ff;
}

html,body{
	width:100vw;
	height:100vh;
	overflow:hidden;
}
/**********************************************/

body{
	background:url("./../images/bg.jpg") center /cover no-repeat fixed;
}

h1.title{
	background:url("./../images/title.svg") center/contain no-repeat;
	text-indent:-9999px;
	margin:auto;
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	z-index:1;
}

@media (max-width:767px){
	h1.title{
		width:82.5vw;
		height:52.5vh;
		z-index:999;
		animation:m_fadein_title 1.25s linear .5s 1 normal both;
	}
}

@media (min-width:768px){
	h1.title{
		width:52.5%;
		height:52.5%;
		animation:fadein_title 2s ease .25s 1 normal both;
	}
}

li.fadein_btn{
	width:230px;
	height:50px;
	margin:auto;
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
}

@media (max-width:767px){
	li.fadein_btn{
		animation:m_fadein_btn 2s linear 2s 1 normal both;
	}
}

@media (min-width:768px){
	li.fadein_btn:nth-child(1){
		animation:fadein_btn_l 2s ease 2s 1 normal both;
	}

	li.fadein_btn:nth-child(2){
		animation:fadein_btn_r 2s ease 2s 1 normal both;
	}
}

.pop_btn{
    width:230px;
	height:50px;
	margin:auto;
	color:#fff;
	background:#910095;
	font-size:1.75em;
    font-family:yomogi;
    text-align:center;
	vertical-align:middle;
    border:solid 1px #999;
	border-radius:10px;
	transition:.4s;
    display:table-cell;
}

@media (max-width:767px){
	div.main ul{
		margin-top:58vh;
		position:relative;
		z-index:11;
	}

	li.fadein_btn{
		width:calc(100vw - 20px);
		height:60px;
		margin:10px auto;
		position:relative;
		z-index:1;
	}

	.pop_btn{
		width:calc(100vw - 20px);
		height:60px;
	}
}

@media (min-width:768px) and (max-width:1209px){
	.pop_btn{
		width:200px;
		z-index:1;
	}
}

.pop_btn:hover{
	background:#da86ab;
}

/* 参加希望をグレーに(終了後) */
.fadein_btn:nth-child(2) .pop_btn{
	color:#676767;
	background:#4e4e4e;
}

.fadein_btn:nth-child(2) .pop_btn:hover{
	background:#4e4e4e;
}

/* 参加希望締切後のポップアップ */
.pop_join{
	width:350px;
	height:110px;
	padding:10px;
	background:#fff;
	font-size:1.075em;
	font-family:yomogi;
	line-height:1.25em;
	letter-spacing:-0.75px;
	border-radius:10px;
	position:fixed;
	top:55%;
	right:5.25%;
	transition:.4s;
	display:none;
}

.fadein_btn:nth-child(2) .pop_btn:hover + .pop_join{
	transition:.4s;
	display:block;
}

/************ フッター ************/
footer{
	position:fixed;
	left:0;
	right:0;
	bottom:0;
	margin:0 auto;
}

@media (max-width:767px){
	footer{
		top:auto;
		bottom:60px;
	}
}

@media (min-width:768px){
	footer{
		top:calc(100vh - 50px);
	}
}


footer p{
	color:#eee;
	text-align:center;
	font-family:'Kodchasan',sans-serif;
}

#twitter-widget-0{
	margin-left:calc(100vw - 96px);
	display:block;
	transition:.4s;
}

#twitter-widget-0:hover{
	opacity:.8;
}



/*********** @keyframes ***********/

/*** モバイル向けアニメーション ***/
@keyframes m_fadein_title{ 
	0%{
		opacity:0;
		margin-top:60px;
		z-index:1;
	}

	50%{
		opacity:.5;
		margin-top:30px;
	}

	100%{
		margin-top:0;
		margin-bottom:0;
		opacity:1;
	}
}

@keyframes m_fadein_btn{
	0%{
		opacity:0;
	}

	100%{
		opacity:1;
	}
}


/*** pc向けアニメーション ***/
@keyframes fadein_title{
	0%{
		opacity:0;
		z-index:1;
	}

	100%{
		opacity:1;
		z-index:2;
	}
}

@keyframes fadein_btn_l{
	0%{
		opacity:0;
		right:0;
	}

	5%{
		opacity:1;
	}

	100%{
		right:72.5%;
	}
}

@keyframes fadein_btn_r{
	0%{
		opacity:0;
		left:0;
	}

	5%{
		opacity:1;
	}

	100%{
		left:72.5%;
	}
}