@charset "utf-8";

/*　layout　
-----------------------------------------------------------------------------*/
#wrap {
	width:100%;
	max-width:640px;
	margin:0 auto;
	position:relative;
	padding:0;
	overflow:hidden;
	background-color:#fff;
	}
header, footer, #mainVisual {
	width:100%;
	margin:0 auto;
	position:relative;
	}
.inner {
	position:relative;
	margin:0 auto;
	padding-left:10px;
	padding-right:10px;
	}

/*　mainVisual　
-----------------------------------------------------------------------------*/
#mainVisual a {	outline:none;	text-decoration:none;}

#mainVisual {
	}
	.link_sns {
	position:absolute;
	right:7px;
	bottom:7px;
	z-index:10;
	}
	.link_sns li {
		display:inline-block;
		margin-left:10px;
		width:26px;
		}
.copy-1, .copy-2, .jockey, .hokkaidou, .header_entry {
	position:absolute;
	width:100%;
	left:0;
	}
	.copy-1, .copy-2, .hokkaidou { top:60px;}
	.jockey { bottom:0px;}
	.header_entry {
		bottom:0;
		filter:drop-shadow(10px 10px 8px rgba(0,0,0,0.3));
		}
/* animation */
.copy-1, .copy-2 {
	opacity:0;
	animation: anime1 0.4s ease forwards;
	}
	.copy-1 { animation-delay:0.5s;}
	.copy-2 { animation-delay:0.7s;}
	@keyframes anime1 {
	0% {
		left:-50%;
		top:95px;
		opacity: 0;
		}
	100% {
		left:0;
		top:60px;
		opacity: 1;
		}
	}
.hokkaidou {
	opacity:0;
	animation: anime2 0.3s ease 1s forwards;
	transform-origin: 90% 50%;
	}
	@keyframes anime2 {
	0% {
		transform:scale(8) rotate(-45deg);
		opacity: 0;
		}
	98% {
		transform:scale(0.9) rotate(0deg);
		}
	100% {
		transform:scale(1) rotate(0deg);
		opacity:1;
		}
	}
.header_entry {
		opacity:0;
	animation: anime3 0.8s ease 1s forwards;
	}
	@keyframes anime3 {
	0% {
		bottom:-100%;
		opacity: 0;
		transform:scale(0.1);
		}
	100% {
		bottom:0;
		opacity:1;
		transform:scale(1);
		}
	}

.header_entry_date {
	position:relative;
	}

/*　header　
-----------------------------------------------------------------------------*/
header a {	outline:none;	text-decoration:none;}

header {
	padding:0;
	position:fixed;
	top:0;
	left:0;
	z-index:100;
	}
#headFlex {
	position:relative;
	z-index:100;
	background-color:#fff;
	height:50px;
	text-align:left;
	display:flex;
	align-items:center;
	padding-right:50px;
/*	box-shadow:0 1px 8px rgba(0,0,0,0.7);*/
	}
#logo {
	display:inline-block;
	width:65px;
	margin-left:2.5%;
	}
	.cp_name {
		width:200px;
		}
/*　nav　
-----------------------------------------------------------------------------*/
nav {
	background-color:#FFEF00;
	background-color:rgba(255, 239, 0, 0.95);
	position:relative;
	position:fixed;
	top:50px;
	left:0;
	z-index:99;
	transform: translateY(-100%);
	transition:all 0.5s ease;
	opacity:0;
	overflow:auto;
	-webkit-overflow-scrolling: touch;
	visibility:hidden;
	padding-bottom:50px;
	}
	nav.show {
	opacity:1;
	transform: translateY(0);
	visibility:visible;
	height:100%;
	}

nav ul {
	margin:2% 8%;
	}
	nav ul li {
		border-bottom:1px solid #333;
		}
	nav ul li a {
		display:block;
		padding:2% 10%;
		}
	
/*　nav_btn　
-----------------------------------------------------------------------------*/
#navBtn {
	position:absolute;
	display:block;
	right:0px;
	top:0px;
	width:50px;
	height:50px;
	padding:0;
	z-index:120;
	}
#navBtn span {
	position:absolute;
	right:13px;
	top:50%;
	display: inline-block;
	width:23px;
	height:2px;
	border-radius:1px;
	margin-top:-1px;
	background-color:#000;
	}
	#navBtn span::before, #navBtn span::after {
	content:"";
	position:absolute;
	left:0;
	display: inline-block;
	width:23px;
	height:2px;
	border-radius:1px;
	background-color: #000;
	transition:all 0.3s ease;
	}
		#navBtn span::before { top:-7px;}
		#navBtn span::after { top:7px;}
#navBtn.on {
	}
	#navBtn.on span {
	background-color: transparent;
	}
	#navBtn.on span::before, #navBtn.on span::after {
	content:"";
	position:absolute;
	left:50%;
	top:50%;
	display: inline-block;
	width:23px;
	margin-left:-12px;
	height:2px;
	background-color:#333;
	transform-origin:center center;
	}
		#navBtn.on span::before {
		transform:rotate(45deg);
		}
		#navBtn.on span::after {
		transform:rotate(-45deg);
		}	

/*　button　
-----------------------------------------------------------------------------*/
.btn_m {
	display:inline-block;
	width:50%;
	margin:0 auto 10%;
	}
.area_entry {
	display:inline-block;
	width:80%;
	}

/*　about　
-----------------------------------------------------------------------------*/
#about {
	background:url(../images/about_bg.jpg) no-repeat center top;
	}

/*　prize　
-----------------------------------------------------------------------------*/
#prize {
	background:url(../images/prize_bg.png) repeat-x left top #F4DA7F;
	background-size:60px 600px;
	padding-bottom:30px;
	}

/*　specialSite_banner　
-----------------------------------------------------------------------------*/
#specialSite_banner {
	background:url(../images/kage.png) repeat-x left top;
	background-size:100px 15px;
	padding:30px 0;
	}
#banner_WASJ_VAN {
	margin:10px auto;
	}

/*  howto　
-----------------------------------------------------------------------------*/
#howto {
	padding:20px 0;
	}
	.btn_howto_entry {
		margin-bottom:0;
		}


/*  flow & faq
-----------------------------------------------------------------------------*/
#flow h2, #faq h2 {
	position:relative;
	z-index:5;
	margin-bottom:-4.8%;
	}
.box_base {
	border:2px solid #060E9F;
	background-color:#f7f7f7;
	padding:50px 20px;
	box-shadow:4px 4px 0 #060E9F;
	}

/*  flow
-----------------------------------------------------------------------------*/
#flow {
	padding:30px 0;
	}

ol.stepWrap {
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
	}
	ol.stepWrap li {
		width:470px;
		margin:0 auto 50px;
		}
.stepTxt {
	display:flex;
	text-align:left;
	margin-bottom:15px;
	}
	.stepTxt .stepNum {
		width:46px;
		margin:0 10px 0 0;
		}
	.stepTxt .txt {
		flex:1;
		align-self:center;
		text-align: justify;
		-ms-text-justify: inter-ideograph;
		}
.stepImg {
	padding:0 5%;
	}
	.stepImg img {
	border:1px solid #999;
	}
	
.area_inquiry, .area_entry {
	margin-bottom:20px;
	}

/*  faq
-----------------------------------------------------------------------------*/
#faq {
	padding:30px 0;
	}
.faqList {
	border-bottom:1px solid #72D0EB;
	padding-bottom:30px;
	margin-bottom:30px;
	}
	.faqList:last-child {
		border: none;
		padding-bottom:15px;
		margin-bottom:0;
		}
	.faq_item {
	display:flex;
	text-align:left;
	}
	.faq_item .faq_icon {
		width:40px;
		margin:3px 10px 3px 0;
		}
	.faq_item .txt {
		flex:1;
		align-self:center;
		text-align: justify;
		-ms-text-justify: inter-ideograph;
		}
		.faq_Q {
			color:#060E9F;
			font-weight:bold;
			margin-bottom:15px;
			}

/*  footer
-----------------------------------------------------------------------------*/
footer a {	outline:none;	text-decoration:none;}

footer {
	margin-top:40px;
	padding-bottom:100px;
	}
.logo_footer {
	display:inline-block;
	width:135px;
	}
.copyright {
	font-size:12px;
	padding-top:10px;
	}

/*　ページトップ　*/
#page_top {
	position: fixed;
	bottom: 15px;
	right: 15px;
	z-index:50;
	
	background-color:#060E9F;
	width:54px;
	height:54px;
	line-height:54px;
	border-radius:50%;
	transition:all 0.6s ease;
	
	opacity:0;
	visibility:hidden;
	}
	#page_top.show {
		opacity:0.8;
		visibility:visible;
		}
	#page_top i {
	display:inline-block;
	border-top:2px solid #fff;
	border-left:2px solid #fff;
	width:14px;
	height:14px;
	margin-bottom: -4px;
	transform:rotate(45deg);
	}


/*　inview　
-----------------------------------------------------------------------------*/
#about .inview,
#prize h2.inview,
#specialSite_banner .inview {
	position:relative;
	top:60px;
	opacity:0;
	transition:all 0.8s ease;
	}
	#about .active,
	#prize h2.active,
	#specialSite_banner .active {
	top:0px;
	opacity:1;
	}
#prize .prizePhoto .inview_2 {
	opacity:0;
	transition:all 0.4s ease;
	transform:scale(0.9);
	transform-origin: center bottom ;
	}
	#prize .prizePhoto .active {
	opacity:1;
	transform:scale(1);
	}



#footer_bg .inview {
	opacity:0;
	transition:all 0.8s ease;
	}
	#footer_bg .active {
	opacity:1;
	}