@charset "utf-8";

body {
	overflow: hidden;
	position: relative;
	font-family: "Hiragino Sans","ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN", sans-serif !important;
	font-size: 22px;
	line-height: 1;
}
#container {
	position: relative;
	background: #f6efdd;
}
#container > div {
	position: relative;
	margin: 0 auto;
	padding-bottom: 20px;
	background: url(../../img/tsuboi/bg.png);
	background-size: 20%;
}

/* タイトル部分 */
#tltle {
	overflow: hidden;
	position: relative;
	padding-top: 55%;
}
#tltle img {
	position: absolute;
	opacity: 0;
	top: 0;
	left: 0;
	transition: 1s;
}
#tltle img#bg {top: 50%;}
#tltle img#bg.on {top: 0%;	opacity: 1;}

#tltle img#sub {top: -25%;	transition: 0.5s 0.5s;}
#tltle img#sub.on {top: 0%; 	opacity: 1;}

#tltle img#main {left: -100%;	transition: 0.5s 1s;}
#tltle img#main.on {left: 0%; 	opacity: 1;}

#tltle img#hito {
	top: 45%;
	left: 47%;
	transition: 0s 1.75s;
}
#tltle img#hito.on {
	opacity: 1;
	-moz-animation: bounce 1s linear 1.75s 1 normal;
	-webkit-animation: bounce 1s linear 1.75s 1 normal;
	animation: bounce 1s linear 1.75s 1 normal;

}
@-moz-keyframes bounce {
	0% {transform: translateY(0px);}
	20% {transform: translateY(-15px);}
	40% {transform: translateY(0px);}
	60% {transform: translateY(-10px);}
	80% {transform: translateY(0px);}
}
@-webkit-keyframes bounce {
	0% {transform: translateY(0px);}
	20% {transform: translateY(-15px);}
	40% {transform: translateY(0px);}
	60% {transform: translateY(-10px);}
	80% {transform: translateY(0px);}
}
@keyframes bounce {
	0% {transform: translateY(0px);}
	20% {transform: translateY(-15px);}
	40% {transform: translateY(0px);}
	60% {transform: translateY(-10px);}
	80% {transform: translateY(0px);}
}
#tltle img#bin {
	top: 47%;
	left: 74%;
	transition: 0s 2.5s;
}
#tltle img#bin.on {
	opacity: 1;
	-moz-animation: pop 0.5s linear 2.5s 1 normal;
	-webkit-animation: pop 0.5s linear 2.5s 1 normal;
	animation: pop 0.5s linear 2.5s 1 normal;
}
@-moz-keyframes pop {
	0% {transform: scale(1,1);}
	20% {transform: scale(1.25,1.25);}
	40% {transform: scale(1,1);}
	60% {transform: scale(1.1,1.1);}
	80% {transform: scale(1,1);}
}
@-webkit-keyframes pop {
	0% {transform: scale(1,1);}
	20% {transform: scale(1.25,1.25);}
	40% {transform: scale(1,1);}
	60% {transform: scale(1.1,1.1);}
	80% {transform: scale(1,1);}
}
@keyframes pop {
	0% {transform: scale(1,1);}
	20% {transform: scale(1.25,1.25);}
	40% {transform: scale(1,1);}
	60% {transform: scale(1.1,1.1);}
	80% {transform: scale(1,1);}
}

/* リード */
p.lead {
	padding: 5% 10px;
	border-top: solid 8px #d5b45c;
	border-bottom: solid 8px #d5b45c;
	text-align: center;
	font-size: 1.1em;
	font-weight: bold;
	line-height: 2.2;
	background: #fff;
}

/* ビデオ*/
section.video {
	position: relative;
	padding-top: 62%;
	background: url(../../img/tsuboi/bg_video.png);
	background-size: contain;
}
section.video video {
	position: absolute;
	width: 70%;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}
section.video div {
	position: absolute;
	width: 70%;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}
section.video div.bg1 {
	background: url(../../img/tsuboi/bg_btn_1.png);
	background-size: contain;
}

section.video img.btn {cursor: pointer;}

section.video img.btn:hover {opacity: 0;}

section.video img.file {
	position: absolute;
	top: 13%;
	left: 12%;
}
section.video img.comment {
	position: absolute;
	right: 10%;
	bottom: 10%;
}
section.video img.file.on {
	display: none;
}
section.video img.comment.on {
	display: none;
}
section.video p {
	position: absolute;
	top: 83%;
	left: 15%;
	color: #fff;
	font-size: 0.8em;
	font-weight: bold;
}

a#totop {
	position: fixed;
	display: block;
	z-index: 999;
	width: 60px;
	height: 60px;
	right: 5%;
	bottom: 35px;
}

/* パララックス */
.blk_slide {
	opacity: 0;
	margin-top: 50px;
	transition: 1s;
}
.slide_in {
	opacity: 1;
	margin-top: 0;
}

/* マスク */
#mask {
	ovrtfloe: hidden;
	position: absolute;
	z-index: 1000;
	width: 100vw;
	height: 100vh;
	top: 0;
	left: 0;
	background: #cc1724;
}
#mask p{
	position: absolute;
	width: 97px;
	height: 127px;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	text-align: center;
	font-size: 16px;
	font-weight: bold;
	color: #fff;
	white-space
}
#mask img{
	width: 97px;
	height: 127px;
	margin-bottom: 10px;
}

/* 共通 */
.red {
	color: #d20012;
}
.sml {
	font-size: 0.8em;
	line-height: 1.2;
}
.bld {
	font-weight: bold;
}
.pos_l {
	position: relative;
}
.t_r {
	text-align: right;
}
.mb0 {margin-bottom: 0!important;}
.mb10 {margin-bottom: 10px!important;}

.clearfix::after{
  content: "";
  display: block;
  clear: both;
}


/* ==================================================== */
/*                                             ：-768px                                                */
/* ==================================================== */
@media screen and (max-width: 768px) {

body {font-size: 13px;}

section.video video {
	width: 90%;
}
section.video div {
	width: 90%;
}
section.video img.btn:hover {opacity: 1;}

section.video img.file {
	width: 80px;
	top: 3%;
	left: 2%;
}
section.video img.comment {
	width: 170px;
	position: absolute;
	right: 2%;
	bottom: 0%;
}
section.video p {
	top: 93%;
	left: 5%;
}

/* 応募ボタン */
a#totop {
	width: 50px;
	height: 50px;
}

a:hover img {
	filter: alpha(opacity=100);
	-moz-opacity:1;
	opacity:1;
}

}