@charset "UTF-8";
/*---------------------------------------------------
//	Header Style
---------------------------------------------------*/
#top{
	width:100%;
	height:679px;
	background:#f6ab00;
	box-sizing:border-box;
	padding:17px 0;
	position:relative;
}
#top .header01{
	height:111px;
	background:url(../images/header_01.png) repeat-x;
}
#top .header02{
	height:115px;
	background:url(../images/header_02.png) repeat-x;
	margin-top:-8px;
}
#top .header03{
	height:116px;
	background:url(../images/header_03.png) repeat-x;
	margin-top:-8px;
}
#top .header01.loop2{
	margin-top:-8px;
}
.loop1{
	width:100%;
	background-position:0 0;
	-webkit-animation: bgloop1 100s linear infinite;
    animation: bgloop1 100s linear infinite;
}
.loop2{
	width:100%;
	background-position:0 0;
	-webkit-animation: bgloop2 100s linear infinite;
    animation: bgloop2 100s linear infinite;
}
@-webkit-keyframes bgloop1 {
    from {
        background-position: 0  0;
    }
    to {
        background-position: -1290px 0;
    }
}
@keyframes bgloop1 {
    from {
        background-position: 0 0;
    }
    to {
        background-position: -1290px 0;
    }
}
@-webkit-keyframes bgloop2 {
    from {
        background-position: 0  0;
    }
    to {
        background-position: 1290px 0;
    }
}
@keyframes bgloop2 {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 1290px 0;
    }
}
#animateObject,
#search,
#logo,
#zorori,
#author{
	position:absolute;
}
#animateObject{
	width:1312px;
	height:445px;
	top:100px;
	right:0;
	left:0;
	margin:auto;
}
#logo{
	top:21px;
	right:0;
	left:0;
	margin:auto;
	width:760px;
	-webkit-animation: bounce-in-fwd 1.1s both;
	animation: bounce-in-fwd 1.1s both;
	z-index: 2;
}
@-webkit-keyframes bounce-in-fwd {
	0% {
		-webkit-transform: scale(0);
		transform: scale(0);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
		opacity: 0;
	}
	38% {
		-webkit-transform: scale(1);
		transform: scale(1);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
		opacity: 1;
	}
	55% {
		-webkit-transform: scale(0.7);
		transform: scale(0.7);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
	}
	72% {
		-webkit-transform: scale(1);
		transform: scale(1);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}
	81% {
		-webkit-transform: scale(0.84);
		transform: scale(0.84);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
	}
	89% {
		-webkit-transform: scale(1);
		transform: scale(1);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}
	95% {
		-webkit-transform: scale(0.95);
		transform: scale(0.95);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
	}
	100% {
		-webkit-transform: scale(1);
		transform: scale(1);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}
}
@keyframes bounce-in-fwd {
	0% {
		-webkit-transform: scale(0);
		transform: scale(0);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
		opacity: 0;
	}
	38% {
		-webkit-transform: scale(1);
		transform: scale(1);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
		opacity: 1;
	}
	55% {
		-webkit-transform: scale(0.7);
		transform: scale(0.7);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
	}
	72% {
		-webkit-transform: scale(1);
		transform: scale(1);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}
	81% {
		-webkit-transform: scale(0.84);
		transform: scale(0.84);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
	}
	89% {
		-webkit-transform: scale(1);
		transform: scale(1);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}
	95% {
		-webkit-transform: scale(0.95);
		transform: scale(0.95);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
	}
	100% {
		-webkit-transform: scale(1);
		transform: scale(1);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}
}
#search{
	display:none;
	top:0;
	left:0;
	-webkit-animation: slide-in-blurred-right 0.5s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
	animation: slide-in-blurred-right 0.5s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
}
@-webkit-keyframes slide-in-blurred-right {
	0% {
		-webkit-transform: translateX(1000px) scaleX(2.5) scaleY(0.2);
		transform: translateX(1000px) scaleX(2.5) scaleY(0.2);
		-webkit-transform-origin: 0% 50%;
		transform-origin: 0% 50%;
		-webkit-filter: blur(40px);
		filter: blur(40px);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateX(0) scaleY(1) scaleX(1);
		transform: translateX(0) scaleY(1) scaleX(1);
		-webkit-transform-origin: 50% 50%;
		transform-origin: 50% 50%;
		-webkit-filter: blur(0);
		filter: blur(0);
		opacity: 1;
	}
}
@keyframes slide-in-blurred-right {
	0% {
		-webkit-transform: translateX(1000px) scaleX(2.5) scaleY(0.2);
		transform: translateX(1000px) scaleX(2.5) scaleY(0.2);
		-webkit-transform-origin: 0% 50%;
		transform-origin: 0% 50%;
		-webkit-filter: blur(40px);
		filter: blur(40px);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateX(0) scaleY(1) scaleX(1);
		transform: translateX(0) scaleY(1) scaleX(1);
		-webkit-transform-origin: 50% 50%;
		transform-origin: 50% 50%;
		-webkit-filter: blur(0);
		filter: blur(0);
		opacity: 1;
	}
}
#zorori{
	display:none;
	top:25px;
	right:0;
	-webkit-animation: slide-in-blurred-left 0.5s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
	animation: slide-in-blurred-left 0.5s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
}
@-webkit-keyframes slide-in-blurred-left {
	0% {
		-webkit-transform: translateX(-1000px) scaleX(2.5) scaleY(0.2);
		transform: translateX(-1000px) scaleX(2.5) scaleY(0.2);
		-webkit-transform-origin: 100% 50%;
		transform-origin: 100% 50%;
		-webkit-filter: blur(40px);
		filter: blur(40px);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateX(0) scaleY(1) scaleX(1);
		transform: translateX(0) scaleY(1) scaleX(1);
		-webkit-transform-origin: 50% 50%;
		transform-origin: 50% 50%;
		-webkit-filter: blur(0);
		filter: blur(0);
		opacity: 1;
	}
}
@keyframes slide-in-blurred-left {
	0% {
		-webkit-transform: translateX(-1000px) scaleX(2.5) scaleY(0.2);
		transform: translateX(-1000px) scaleX(2.5) scaleY(0.2);
		-webkit-transform-origin: 100% 50%;
		transform-origin: 100% 50%;
		-webkit-filter: blur(40px);
		filter: blur(40px);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateX(0) scaleY(1) scaleX(1);
		transform: translateX(0) scaleY(1) scaleX(1);
		-webkit-transform-origin: 50% 50%;
		transform-origin: 50% 50%;
		-webkit-filter: blur(0);
		filter: blur(0);
		opacity: 1;
	}
}
#author{
	display:none;
	bottom:60px;
	right:0;
	left:0;
	margin:auto;
	width:310px;
	-webkit-animation: slide-in-elliptic-top-fwd 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	animation: slide-in-elliptic-top-fwd 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@-webkit-keyframes slide-in-elliptic-top-fwd {
	0% {
		-webkit-transform: translateY(-600px) rotateX(-30deg) scale(0);
		transform: translateY(-600px) rotateX(-30deg) scale(0);
		-webkit-transform-origin: 50% 100%;
		transform-origin: 50% 100%;
		opacity: 0;
	}
	100% {
		-webkit-transform: translateY(0) rotateX(0) scale(1);
		transform: translateY(0) rotateX(0) scale(1);
		-webkit-transform-origin: 50% 1400px;
		transform-origin: 50% 1400px;
		opacity: 1;
	}
}
@keyframes slide-in-elliptic-top-fwd {
	0% {
		-webkit-transform: translateY(-600px) rotateX(-30deg) scale(0);
		transform: translateY(-600px) rotateX(-30deg) scale(0);
		-webkit-transform-origin: 50% 100%;
		transform-origin: 50% 100%;
		opacity: 0;
	}
	100% {
		-webkit-transform: translateY(0) rotateX(0) scale(1);
		transform: translateY(0) rotateX(0) scale(1);
		-webkit-transform-origin: 50% 1400px;
		transform-origin: 50% 1400px;
		opacity: 1;
	}
}

#content{
	/*background:url(../images/allBg.png) repeat center center;*/
}
#index{
	width:1190px;
	height:639px;
	margin:auto;
	position:relative;
	margin-bottom:70px;
}
#index .inner{
	box-sizing:border-box;
	height:639px;
	background:url(../images/indexBg_dotted.png) repeat 0 0;
	margin-top:-70px;
	position:relative;
	text-align:center;
	z-index: 1;
	border:#0063a5 10px solid;
	border-radius:20px;
	box-shadow:0 4px 4px rgba(0,0,0,0.2);
	overflow:hidden;
}
#index header{
	margin-top:70px;
	margin-bottom:70px;
}
#innerChara1,
#innerChara2,
#innerChara3{
	position:absolute;
}
#innerChara1{
	/*left:-268px;*/
	left:-454px;
	top:13px;
	-webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}
#innerChara1.slideIn{
	left:-268px;
}
#innerChara2{
	/*right:-20px;*/
	right:-246px;
	top:60px;
	-webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}
#innerChara2.slideIn{
	right:-20px;
}
#innerChara3{
	left:-65px;
	bottom:-240px;

}
.drive {
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}
.drive.infinite {
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
}
.drive.hinge {
	-webkit-animation-duration: 2s;
	animation-duration: 2s;
}
/*the animation definition*/
@-webkit-keyframes tada {
	0% {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1)
	}
	10%,
	20% {
		-webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
		transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg)
	}
	30%,
	50%,
	70%,
	90% {
		-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
		transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)
	}
	40%,
	60%,
	80% {
		-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
		transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)
	}
	100% {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1)
	}
}
@keyframes tada {
	0% {
		-webkit-transform: scale3d(1, 1, 1);
		-ms-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1)
	}
	10%,
	20% {
		-webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
		-ms-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
		transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg)
	}
	30%,
	50%,
	70%,
	90% {
		-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
		-ms-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
		transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)
	}
	40%,
	60%,
	80% {
		-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
		-ms-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
		transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)
	}
	100% {
		-webkit-transform: scale3d(1, 1, 1);
		-ms-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1)
	}
}
.tada {
	-webkit-animation-name: tada;
	animation-name: tada
}


#index .inner a{
	display:inline-block;
	/*margin-top:280px;*/
	position:relative;
	z-index: 99;
}
.animated{
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}
.animated.infinite {
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
}
.animated.animated.hinge {
	-webkit-animation-duration: 2s;
	animation-duration: 2s;
}
@-webkit-keyframes rubberBand {
	0% {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1)
	}
	30% {
		-webkit-transform: scale3d(1.25, .75, 1);
		transform: scale3d(1.25, .75, 1)
	}
	40% {
		-webkit-transform: scale3d(0.75, 1.25, 1);
		transform: scale3d(0.75, 1.25, 1)
	}
	50% {
		-webkit-transform: scale3d(1.15, .85, 1);
		transform: scale3d(1.15, .85, 1)
	}
	65% {
		-webkit-transform: scale3d(.95, 1.05, 1);
		transform: scale3d(.95, 1.05, 1)
	}
	75% {
		-webkit-transform: scale3d(1.05, .95, 1);
		transform: scale3d(1.05, .95, 1)
	}
	100% {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1)
	}
}
@keyframes rubberBand {
	0% {
		-webkit-transform: scale3d(1, 1, 1);
		-ms-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1)
	}
	30% {
		-webkit-transform: scale3d(1.25, .75, 1);
		-ms-transform: scale3d(1.25, .75, 1);
		transform: scale3d(1.25, .75, 1)
	}
	40% {
		-webkit-transform: scale3d(0.75, 1.25, 1);
		-ms-transform: scale3d(0.75, 1.25, 1);
		transform: scale3d(0.75, 1.25, 1)
	}
	50% {
		-webkit-transform: scale3d(1.15, .85, 1);
		-ms-transform: scale3d(1.15, .85, 1);
		transform: scale3d(1.15, .85, 1)
	}
	65% {
		-webkit-transform: scale3d(.95, 1.05, 1);
		-ms-transform: scale3d(.95, 1.05, 1);
		transform: scale3d(.95, 1.05, 1)
	}
	75% {
		-webkit-transform: scale3d(1.05, .95, 1);
		-ms-transform: scale3d(1.05, .95, 1);
		transform: scale3d(1.05, .95, 1)
	}
	100% {
		-webkit-transform: scale3d(1, 1, 1);
		-ms-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1)
	}
}
.rubberBand {
	-webkit-animation-name: rubberBand;
	animation-name: rubberBand
}


#indexChar{
	position:absolute;
	bottom:20px;
	width:1190px;
	left:auto;
	right:auto;
	margin:auto;
	z-index:0;
}
#indexChar .chara1,
#indexChar .chara2{
	position:absolute;
}
#indexChar .chara1{
	right:0;
	bottom:0;
}
#indexChar .chara1.deg{
	-webkit-transform: rotate(-5deg);
	-moz-transform: rotate(-5deg);
	transform: rotate(-5deg);
}
#indexChar .chara2{
	left:0;
	bottom:50px;
}
#indexChar .chara2.deg{
	-webkit-transform: rotate(-5deg);
	-moz-transform: rotate(-5deg);
	transform: rotate(-5deg);
}




@media screen and (max-width: 480px){
	html{
		min-width:100%;
	}
	body{
		overflow-x:hidden;
	}
	#content{
		width:90%;
		margin:auto;
	}
	#top{
		height:auto;
	}
	#top .header01{
		height:56px;
		background-size:645px 56px;
	}
	#top .header02{
		height:58px;
		background-size:645px 58px;
		margin-top:-4px;
	}
	#top .header03{
		height:58px;
		background-size:645px 58px;
		margin-top:-4px;
	}
	#top .header01.loop2{
		margin-top:-4px;
	}
	#animateObject{
		width:90%;
		height:auto;
		margin:auto;
		top:25px;
	}
	#logo{
		width:100%;
	}
	#zororiSp{
		margin-top:160px;
		text-align:center;
		display:none;
		-webkit-animation: slide-in-blurred-right 0.5s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
		animation: slide-in-blurred-right 0.5s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
	}
	#authorSp{
		margin-top:20px;
		text-align:center;
		display:none;
	}
	#authorSp img{
		width:40%;
	}
	#index{
		width:100%;
		height:auto;
		margin-bottom:70px;
	}
	.inner{
		width:100%;
		height:auto;
	}
	#index .inner{
		height:auto;
		margin-top:-30px;
		border: #0063a5 5px solid;
		padding-bottom: 12%;
	}
	#index header{
		margin-top:20px;
		margin-bottom:35px;
	}
	#index header img{
		width:45%;
	}
	#index #checkBtn{
		margin-bottom:22%;
	}
	#index #checkBtn img{
		width:70%;
	}
	#innerChara1{
		top:30px;
		left:-227px;
		width:50%;
	}
	#innerChara1.slideIn{
		left:-96px;
	}
	#innerChara2{
		top:30px;
		right:-123px;
		width:29%;
	}
	#innerChara2.slideIn{
		right:-6px;
	}
	#innerChara3{
		width:106.5%;
		bottom:-22%;
		left:-6.5%;
	}
	#pr{
		width:100%;
	}
	#pr .inner{
		border: #f6ab00 5px solid;
		padding:20px;
	}
	#pr .contentLeft, #pr .contentRight{
		float:none;
		padding:0;
		width:100%;
		border:none;
	}
	#pr .contentLeft{
		margin-bottom:1.5em;
		padding-bottom:1.5em;
		border-bottom:#dddddd 1px solid;
	}
	#pr .contentRight .table{
		margin-bottom:25px;
	}
	#pr .table .th h3{
		font-size:1.6rem;
	}
	#pr .table .th .meta,
	#pr .table .th .price{
		font-size:1.2rem;
	}
	#pr .excerpt{
		font-size:1.4rem;
	}
	#pr .table .td{
		width:90px;
	}
	#pr .btn a{
		font-size:1.6rem;
		background: #fff url(../images/btn_mark.png) no-repeat right 15px center;
		background-size:4px 8px;
		border: #f6ab00 2px solid;
	}
	#prCharSp{
		position:absolute;
		width:100%;
		top:-9%;
		left:0;
	}
	#prCharSp .chara1,
	#prCharSp .chara2{
		width:50%;
		float:left;

	}
	#prCharSp .chara2{
		text-align:right;
	}
	#prCharSp .chara1 img{
		width:50%;
		margin-left:-10px;
	}
	#prCharSp .chara2 img{
		width:40%;
		margin-right:-10px;
		position:relative;
		bottom:-7px;
	}
	#sns,
	#snsChar{
		width:100%;
	}
	#sns{
		padding-bottom:30px;
	}
	#snsHeader{
		margin-bottom: -30px;
	}
	#snsHeader img{
		width:85%;
	}
	#sns .inner{
		border: #11a92b 5px solid;
		padding:50px 20px 20px 20px;
	}
	#sns a, .sns a{
		width:100%;
		margin-right:0;
		margin-bottom:1em;
		height:44px;
		line-height:44px;
		font-size:2rem;
	}
	#sns a:last-child, .sns a:last-child{
		margin-bottom:0;
	}
	#snsChar .chara1{
		width:25%;
		transform: rotate(-10deg);
	    -moz-transform: rotate(-10deg);
	    -webkit-transform: rotate(-10deg);
	    top:9px;
	    left:-16px;
	}
	#snsChar .chara2{
		width:25%;
		transform: rotate(17deg);
	    -moz-transform: rotate(17deg);
	    -webkit-transform: rotate(17deg);
	    top:3px;
	    right:-16px;
	}
	#official{
		width:100%;
		margin-bottom:30px;
	}
	#official a{
		width:90%;
		height:60px;
		line-height:52px;
		font-size:1.4rem;
		border: #fff 4px solid;
		background: #e34b45 url(../images/btn_mark_wh.png) no-repeat right 10px center;
		background-size:4px 8px;
		border-radius:10px;
		margin-left:auto;
		margin-right:auto;
	}
}