html{
  height:100vh; 
}

body { margin: 0; padding:0;font-family: '游ゴシック体',YakuHanJP,'Noto Sans JP', YuGothic, '游ゴシック Medium', 'Yu Gothic Medium', '游ゴシック', 'Yu Gothic', 'メイリオ', sans-serif; width:100%; height:100vh;overflow-x:hidden;background-color: #000;}
body > footer {
	position: sticky;
	top: 100vh;
}	
img {
    image-rendering: -webkit-optimize-contrast;
}
br.clear {
	clear:both;
}
br.sponly {display:none;}
br.sponly2 {display:none;}
br.pconly {display:inline;}
.img {
	width: 100%;
	height: auto;
	vertical-align: bottom;
}

@-webkit-keyframes flash {
	0% {
	  opacity: .4;
	}
	100% {
	  opacity: 1;
	}
  }
  @keyframes flash {
	0% {
	  opacity: .4;
	}
	100% {
	  opacity: 1;
	}
}
@keyframes fadeIn {
	from {
	opacity: 0;
	}

	to {
	opacity: 1;
	}
}
.fadeIn {
	animation-name:fadeIn;
	animation-duration:1.25s;
	animation-fill-mode:forwards;
	animation-timing-function: ease-in;
}
.fadeInTeaser {
	animation-name:fadeIn;
	animation-duration:1.5s;
	animation-fill-mode:forwards;
	animation-timing-function: ease-out;
}

@keyframes fadeInUp {
	from {
	opacity: 0;
	transform: translateY(70px);
	}
	to {
	opacity: 1;
	transform: translateY(0);
	}
}
@keyframes fadeInUp2 {
	from {
	opacity: 0;
	transform: translateY(100px);
	}
	to {
	opacity: 1;
	transform: translateY(0);
	}
}
@keyframes fadeOut {
	from {
	opacity: 1;
	}

	to {
	opacity: 0;
	}
}
@keyframes blurIn {
	from {
	opacity: 0;
	filter: blur(10px);
	transform: scale(4);
	}
	to {
	opacity: 1;
	filter: blur(0);
	transform: scale(1);
	}
}
@keyframes zoomIn {
	0% {
	transform: scale(0);
	opacity: 0;
	}
	93% {
		transform: scale(1.1);
		opacity: 1;
	}
	100% {
		transform: scale(1);
		opacity: 1;
	}
}
#totop {
	width: 5%;
	height: auto;
	position: fixed;
	bottom: 2%;
	right: 1%;
	z-index: 2;
	opacity: 0;
}


@media (max-width: 1024px) {
	.pcimg {display: none !important;}
	.spimg {display: inline;}
	br.sponly {display:inline;}
	br.sponly2 {display:none;}
	br.pconly {display:none;}
	#totop {
		width: 10%;
		height: auto;
		position: fixed;
		bottom: 2%;
		right: 1%;
		z-index: 2;
		opacity: 0;
	}
	
}
@media (max-width: 610px) {
	br.sponly2 {display:inline;}
	#totop {
		width: 15%;
		height: auto;
		position: fixed;
		bottom: 2%;
		right: 1%;
		z-index: 2;
		opacity: 0;
	}

}




/* ========================================
トップメイン画像まわり
========================================== */
#topmain {
	width:90%;
	height:auto;
	padding:2vw 5%;
	margin:0;
	position:relative;
	overflow: hidden;
	background-color: #000;
}
#topmain #left-img {
	width: 25%;
	height: auto;
	opacity: 0;
}
#topmain #right-img {
	width: calc(90%*0.25);
	height: auto;
	position: absolute;
	top: 2vw;
	right: 5%;
	opacity: 0;
}
#topmain #main-logo {
	width: 32%;
	height: auto;
	position: absolute;
	top: 34%;
	left: 34%;
}
#topmain #main-catch1 {
	width: 28%;
	height: auto;
	position: absolute;
	top: 20%;
	left: 36%;
	opacity: 0;
}
#topmain #main-catch2 {
	width: 20%;
	height: auto;
	position: absolute;
	top: 60%;
	left: 40%;
	opacity: 0;
}
@keyframes left-img {
	0% {
		opacity: 0;
		transform: translateX(150%);
	}
	100% {
		opacity: 1;
		transform: translateX(0%);
	}
}
.left-img {
	animation: left-img 1.2s ease-out 0s forwards;
}
@keyframes right-img {
	0% {
		opacity: 0;
		transform: translateX(-150%);
	}
	100% {
		opacity: 1;
		transform: translateX(0%);
	}
}
.right-img {
	animation: right-img 1.2s ease-out 0s forwards;
}
.zoomIn1 {
	animation: zoomIn 1.0s cubic-bezier(0.5, 0, 0.75, 0) 0.8s forwards;
}
.zoomIn2 {
	animation: zoomIn 1.0s cubic-bezier(0.5, 0, 0.75, 0) 0.8s forwards;
}


/* 以下タブレット・スマホ */
@media (max-width: 1024px) {
	#topmain {
		width:96%;
		height:auto;
		padding:5vw 2%;
		margin:0;
		position:relative;
		overflow: hidden;
		background-color: #000;
	}
	#topmain #left-img {
		width: 30%;
		height: auto;
		opacity: 0;
	}
	#topmain #right-img {
		width: calc(96%*0.30);
		height: auto;
		position: absolute;
		top: 5vw;
		right: 2%;
		opacity: 0;
	}
	#topmain #main-logo {
		width: 32%;
		height: auto;
		position: absolute;
		top: 34%;
		left: 34%;
	}
	#topmain #main-catch1 {
		width: 30%;
		height: auto;
		position: absolute;
		top: 19%;
		left: 35%;
		opacity: 0;
	}
	#topmain #main-catch2 {
		width: 24%;
		height: auto;
		position: absolute;
		top: 45%;
		left: 38%;
		opacity: 0;
	}	
}

/* 以下タブレット・スマホ */
@media (max-width: 610px) {
	#topmain {
		width:96%;
		height:45vh;
		padding:8vw 2%;
		margin:0;
		position:relative;
		overflow: hidden;
		background-color: #000;
	}
	#topmain #left-img {
		width: 50%;
		height: auto;
		opacity: 0;
	}
	#topmain #right-img {
		width: calc(96%*0.50);
		height: auto;
		position: absolute;
		top: auto;
		bottom: 8vw;
		right: 2%;
		opacity: 0;
	}
	#topmain #main-logo {
		width: 60%;
		height: auto;
		position: absolute;
		top: 37%;
		left: 20%;
	}
	#topmain #main-catch1 {
		width: 54%;
		height: auto;
		position: absolute;
		top: 28%;
		left: 23%;
		opacity: 0;
	}
	#topmain #main-catch2 {
		width: 40%;
		height: auto;
		position: absolute;
		top: 43%;
		left: 30%;
		opacity: 0;
	}
}


/* ========================================
イントロ
========================================== */
#intro {
	width: 100%;
	height: auto;
	padding: 2vw 0;
	text-align: center;
	opacity: 0;
}
#intro #intro-inner {
	display: inline-block;
	width: 60%;
	max-width: 1024px;
	height: auto;
	text-align: center;
	font-size: 1rem;
	line-height: 2rem;
	font-feature-settings: "palt";
	letter-spacing: 2.2px;
	color: #fff;
}
.fadeIntro {
	animation-name:fadeIn;
	animation-duration:1.2s;
	animation-fill-mode:forwards;
	animation-delay: 1.8s;
}

/* 以下タブレット・スマホ */
@media (max-width: 1024px) {
	#intro #intro-inner {
		display: inline-block;
		width: 80%;
		max-width: 1024px;
		height: auto;
		text-align: center;
		font-size: 1rem;
		line-height: 2rem;
		font-feature-settings: "palt";
		letter-spacing: 2.2px;
		color: #fff;
	}
}


/* 以下タブレット・スマホ */
@media (max-width: 610px) {
	#intro #intro-inner {
		display: inline-block;
		width: 92%;
		max-width: 1024px;
		height: auto;
		text-align: center;
		font-size: 1rem;
		line-height: 1.7rem;
		font-feature-settings: "palt";
		letter-spacing: 2.2px;
		color: #fff;
	}
}

/* ========================================
第１弾 第2弾
========================================== */
.present {
	width: 100%;
	height: auto;
	margin: 2vw 0 15vw;
	position: relative;
	opacity: 0;
}
.daini {
	margin: 2vw 0 10vw;
}
.gaiyou-box {
	width: 50%;
	height: auto;
	margin: 8vw 25% 5vw;
	padding: 5vw 0 3vw;
	position: relative;
	background-color: #fff;
}
.gaiyou-box h2 {
	width: 60%;
	height: auto;
	position: absolute;
	top: -45%;
	left: 20%;
}
.gaiyou-box p {
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	text-align: center;
	font-size: 1rem;
	line-height: 2rem;
	color: #000;
}
.gaiyou-box p .font-blue {
	color: #0b8dc3;
	font-weight: bold;
}
.gaiyou-box p .font-red {
	color: rgb(199, 26, 26);
	font-weight: bold;
	font-size: 1.2rem;
	line-height: 2.4rem;
}
.gaiyou-box #giftbox {
	width: 10%;
	height: auto;
	position: absolute;
	top: -20%;
	right: 10%;
	animation: pikopiko 5s linear infinite;
}
.gaiyou-box #giftbox2 {
	width: 11%;
	height: auto;
	position: absolute;
	top: -20%;
	left: 8%;
	animation: fuwa 1.5s linear infinite;
}
.present ul {
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	list-style-type: none;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	opacity: 0;
}
.present ul li {
	width: 25%;
	height: auto;
	margin: 0 1%;
}
@keyframes pikopiko {
	0% {
	  transform: rotate(20deg);
	}
	9% {
		transform: rotate(20deg);
	}
  	10% {
		transform: rotate(10deg);
	}
	11% {
		transform: rotate(20deg);
	}
	29% {
		transform: rotate(20deg);
	}
  	30% {
		transform: rotate(10deg);
	}
	31% {
		transform: rotate(20deg);
	}
	59% {
		transform: rotate(20deg);
	}
  	60% {
		transform: rotate(10deg);
	}
	61% {
		transform: rotate(20deg);
	}
	79% {
		transform: rotate(20deg);
	}
  	80% {
		transform: rotate(10deg);
	}
	81% {
		transform: rotate(20deg);
	}
	100% {
		transform: rotate(20deg);
	}
}
@keyframes fuwa {
	0% {
		transform: translateY(-5%);
	}
	50% {
		transform: translateY(10%);
	}
	100% {
		transform: translateY(-5%);
	}
}


/* 以下タブレット・スマホ */
@media (max-width: 1024px) {
	.present {
		width: 100%;
		height: auto;
		margin: 20vw 0 15vw;
		position: relative;
		opacity: 0;
	}
	.daini {
		margin: 2vw 0 10vw;
	}
	.gaiyou-box {
		width: 70%;
		height: auto;
		margin: 8vw 15% 5vw;
		padding: 5vw 0 3vw;
		position: relative;
		background-color: #fff;
	}
	.gaiyou-box h2 {
		width: 60%;
		height: auto;
		position: absolute;
		top: -30%;
		left: 20%;
	}
	.gaiyou-box #giftbox {
		width: 10%;
		height: auto;
		position: absolute;
		top: -15%;
		right: 10%;
		animation: pikopiko 5s linear infinite;
	}
	.gaiyou-box #giftbox2 {
		width: 11%;
		height: auto;
		position: absolute;
		top: -15%;
		left: 8%;
		animation: fuwa 1.5s linear infinite;
	}
	.gaiyou-box p {
		width: 80%;
		height: auto;
		margin: 0 5% 0 15%;
		padding: 0;
		text-align: left;
		font-size: 1rem;
		line-height: 2rem;
		color: #000;
	}
	.present ul li {
		width: 30%;
		height: auto;
		margin: 0 1%;
	}
}



/* 以下タブレット・スマホ */
@media (max-width: 610px) {
	.present {
		width: 100%;
		height: auto;
		margin: 20vw 0 30vw;
		position: relative;
		opacity: 0;
	}
	.gaiyou-box {
		width: 90%;
		height: auto;
		margin: 8vw 5% 5vw;
		padding: 5vw 0 3vw;
		position: relative;
		background-color: #fff;
	}
	.gaiyou-box h2 {
		width: 80%;
		height: auto;
		position: absolute;
		top: -30%;
		left: 10%;
	}
	.gaiyou-box #giftbox {
		width: 12%;
		height: auto;
		position: absolute;
		top: -13%;
		right: -1%;
		animation: pikopiko 5s linear infinite;
	}
	.gaiyou-box #giftbox2 {
		width: 12%;
		height: auto;
		position: absolute;
		top: -16%;
		left: -1%;
		animation: fuwa 1.5s linear infinite;
	}
	.gaiyou-box p {
		width: 94%;
		height: auto;
		margin: 0 2% 0 4%;
		padding: 0;
		text-align: left;
		font-size: 1rem;
		line-height: 2rem;
		color: #000;
	}
	.present ul li {
		width: 80%;
		height: auto;
		margin: 4vw 1%;
	}


}


/* ========================================
応募方法 
========================================== */
#howto {
	width: 100%;
	height: auto;
	margin: 2vw 0;
}
#howto h2 {
	width: 100%;
	height: auto;
	margin: 10vw 0 2vw;
	padding: 0;
	text-align: center;
	opacity: 0;
}
#howto h2 img {
	width: 25%;
}
#howto .oubo-unit {
	width: 60%;
	height: auto;
	margin: 2vw 20% 5vw;
	padding: 2vw 0;
	box-sizing: border-box;
	border: 4px solid #0b8dc3;
	background-color: #fff;
	position: relative;
	opacity: 0;
}
#howto .oubo-unit h3 {
	width: 100%;
	height: auto;
	margin: 0;
	padding: 1vw 0;
	text-align: center;
	position: relative;
}
#howto .oubo-unit h3 img {
	width: auto;
	height: 2vw;
}
#howto .oubo-unit h3 .kazari {
	width: 10%;
	height: auto;
	position: absolute;
	top: 15%;
	right: 26%;
	transform: rotate(10deg);
	animation: pikopiko 5s linear infinite;
}
#howto .oubo-unit h3 .kazari2 {
	width: 10%;
	height: auto;
	position: absolute;
	top: 15%;
	right: 26%;
	transform: rotate(10deg);
	animation: fuwa 1.5s linear infinite;
}
#howto .oubo-unit p {
	width: 90%;
	height: auto;
	margin: 2vw 5%;
	padding: 0;
	font-size: 1.0rem;
	line-height: 2.0rem;
	font-feature-settings: "palt";
	letter-spacing: 1.5px;
	color: #000;
}
#howto .oubo-unit p span {
	color: rgb(199, 26, 26);
	font-weight: bold;
	font-size: 1.1rem;
	line-height: 2.2rem;
}
#howto .oubo-unit h4 {
	width: 100%;
	height: auto;
	margin: 0;
	padding: 3vw 0 1vw;
	text-align: center;
	color: #0b8dc3;
	font-size: 1.2rem;
}
#howto .oubo-unit .sns-link {
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	list-style-type: none;
	display: flex;
	justify-content: center;
}
#howto .oubo-unit .sns-link li {
	width: 6%;
	height: auto;
	text-align: center;
}
#howto .oubo-unit .sns-link li a {
	font-size: 2.5rem;
	color: #000;
	text-decoration: none;
}
#howto .oubo-unit .sns-link li a:hover {
	animation: flash 1.5s;
}
#howto .oubo-unit #btn-area {
	width: 100%;
	height: auto;
	padding: 2vw 0;
	text-align: center;
}
#howto .oubo-unit .theater-btn {
	width: auto;
	height: auto;
	padding: 1vw 2rem;
	background-color: #fdd000;
	color: #000;
	text-decoration: none;
	font-size: 1.1rem;
	font-weight: bold;
	transition: 1.0s;
}
#howto .oubo-unit .theater-btn:hover {
	background-color: #000;
	color: #fdd000;
}
#howto .w-cp {
	width: 60%;
	height: auto;
	padding: 0 20% 6vw;
	text-align: left;
	color: #fff;
	font-size: 1.1rem;
	font-weight: bold;
	line-height: 2.2rem;
	font-feature-settings: "palt";
	letter-spacing: 2px;
	opacity: 0;
}
#howto .w-cp span {
	color: #fdd000;
	font-weight: bold;
	font-size: 1.5rem;
	line-height: 3.0rem;
}


/* 以下タブレット・スマホ */
@media (max-width: 1024px) {
	#howto {
		width: 100%;
		height: auto;
		margin: 10vw 0;
	}
	#howto h2 {
		width: 100%;
		height: auto;
		margin: 10vw 0 2vw;
		padding: 0;
		text-align: center;
		opacity: 0;
	}
	#howto h2 img {
		width: 40%;
	}
	#howto .oubo-unit {
		width: 80%;
		height: auto;
		margin: 2vw 10% 5vw;
		padding: 2vw 0;
		box-sizing: border-box;
		border: 4px solid #0b8dc3;
		background-color: #fff;
		position: relative;
		opacity: 0;
	}
	#howto .oubo-unit h3 img {
		width: auto;
		height: 3vw;
	}
	#howto .oubo-unit h3 .kazari {
		width: 30%;
		height: auto;
		position: absolute;
		top: 4%;
		right: 13%;
		transform: rotate(10deg);
		animation: pikopiko 5s linear infinite;
	}
	#howto .oubo-unit h3 .kazari2 {
		width: 30%;
		height: auto;
		position: absolute;
		top: 0%;
		right: 14%;
		transform: rotate(10deg);
		animation: fuwa 1.5s linear infinite;
	}
	#howto .oubo-unit .sns-link li {
		width: 10%;
		height: auto;
		text-align: center;
	}
	#howto .oubo-unit .sns-link li a {
		font-size: 2.5rem;
		color: #000;
		text-decoration: none;
	}
	#howto .w-cp {
		width: 80%;
		height: auto;
		padding: 0 10% 6vw;
		text-align: left;
		color: #fff;
		font-size: 1.1rem;
		font-weight: bold;
		line-height: 2.2rem;
		font-feature-settings: "palt";
		letter-spacing: 2px;
		opacity: 0;
	}
}


/* 以下タブレット・スマホ */
@media (max-width: 610px) {
	#howto h2.gekijo {
		width: 100%;
		height: auto;
		margin: 28vw 0 2vw;
		padding: 0;
		text-align: center;
		opacity: 0;
	}
	#howto h2 img {
		width: 60%;
	}
	#howto .oubo-unit {
		width: 90%;
		height: auto;
		margin: 5vw 5% 10vw;
		padding: 5vw 0;
		box-sizing: border-box;
		border: 4px solid #0b8dc3;
		background-color: #fff;
		position: relative;
		opacity: 0;
	}
	#howto .oubo-unit h3 img {
		width: auto;
		height: 5vw;
	}
	#howto .oubo-unit h3 .kazari {
		width: 30%;
		height: auto;
		position: absolute;
		top: 0%;
		right: 5%;
		transform: rotate(10deg);
		animation: pikopiko 5s linear infinite;
	}
	#howto .oubo-unit h3 .kazari2 {
		width: 30%;
		height: auto;
		position: absolute;
		top: -8%;
		right: 5%;
		transform: rotate(10deg);
		animation: fuwa 1.5s linear infinite;
	}
	#howto .oubo-unit h4 {
		width: 100%;
		height: auto;
		margin: 0;
		padding: 3vw 0 1vw;
		text-align: center;
		color: #0b8dc3;
		font-size: 1.1rem;
	}
	#howto .oubo-unit .sns-link li {
		width: 15%;
		height: auto;
		text-align: center;
	}
	#howto .w-cp {
		width: 90%;
		height: auto;
		padding: 0 5% 6vw;
		text-align: left;
		color: #fff;
		font-size: 1.1rem;
		font-weight: bold;
		line-height: 2.2rem;
		font-feature-settings: "palt";
		letter-spacing: 2px;
		opacity: 0;
	}
}


/* ========================================
応募規約・注意事項 
========================================== */
.kiyaku {
	width: 60%;
	height: auto;
	margin: 3vw 20% 1vw;
	padding: 0;
	color: #fff;
	font-size: 1rem;
}
ul#kiyaku-list {
	width: 60%;
	height: auto;
	margin: 0 20%;
	padding: 0;
}
ul#kiyaku-list li {
	color: #fff;
	font-size: 0.9rem;
}
ul#kiyaku-list li a {
	color: #fff;
}
p.policy {
	width: 60%;
	height: auto;
	margin: 0 20%;
	padding: 0;
	color: #fff;
	font-size: 0.9rem;
	text-align: left;
}
p.policy a {
	color: #fff;
}


/* 以下タブレット・スマホ */
@media (max-width: 1024px) {
	.kiyaku {
		width: 90%;
		height: auto;
		margin: 3vw 5% 1vw;
		padding: 0;
		color: #fff;
		font-size: 1rem;
	}
	ul#kiyaku-list {
		width: 90%;
		height: auto;
		margin: 0 5%;
		padding: 0;
	}
	p.policy {
		width: 90%;
		height: auto;
		margin: 0 5%;
		padding: 0;
		color: #fff;
		font-size: 0.9rem;
		text-align: left;
	}

}

/* ========================================
フッター
========================================== */
footer {
	width:100%;
	height:auto;
	padding:5vw 0;
	margin:0;
	position: relative;
	text-align: center;
}
footer img {
	width: 7%;
}



@media (max-width: 1024px) {
	footer {
		width:100%;
		height:auto;
		padding:8vw 0;
		margin:0;
		position: relative;
	}
	footer img {
		width: 12%;
	}
	
}
@media (max-width: 510px) {
	footer {
		width:100%;
		height:auto;
		padding:20vw 0 10vw;
		margin:0;
		position: relative;
	}
	footer img {
		width: 17%;
	}

}