@charset "utf-8";
.top-header {
	background-image: url(../images/top/mainvisual-top.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	position:relative;
	z-index:1;
	overflow:hidden;
}
.top-header h1,.top-subcopy,.top-maincopy {
	text-align:center;
	position:relative;
	z-index:9;	
}
.top-maincopy {
	line-height:130%;	
}
.top-header:before {
	content:"";
	position:absolute;
	z-index:2;
	background-image:url(../images/top/meter-left.png);
	background-repeat:no-repeat;
	background-size:cover;
}
.top-header:after {
	content:"";
	position:absolute;
	z-index:2;	
	background-image:url(../images/top/meter-right.png);
	background-repeat:no-repeat;
	background-size:cover;
}
@media screen and (max-width : 767px){
	.top-header {
	height:500px;	
	}	
	.top-header h1 {
	padding-top:30px;	
	}
	.top-subcopy {
	padding-top:70px;
	font-size:5.5vw;
	}
	.top-maincopy {
	padding-top:40px;
	font-size:10vw;
	}
	.top-header:before,.top-header:after {
	width:200px;
	height:200px;	
	}
	.top-header:before {
	top:250px;
	left:-100px;	
	}
	.top-header:after {
	top:250px;
	right:-100px;	
	}
	.top-btn-ec {
	margin-left:auto;
	margin-right:auto;
	margin-bottom:40px;		
	}
}
@media screen and (min-width : 768px){
	.top-header {
	height:540px;	
	}
	.top-header h1 {
	padding-top:40px;	
	}
	.top-subcopy {
	padding-top:150px;
	font-size:2.4rem;
	}
	.top-maincopy {
	padding-top:20px;
	font-size:4.8rem;
	}
	.top-header:before,.top-header:after {
	width:440px;
	height:440px;	
	}
	.top-header:before {
	top:105px;
	left:-100px;	
	}
	.top-header:after {
	top:105px;
	right:-100px;	
	}
	.top-btn-ec {
	width:320px;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:60px;	
	}
}
.btn-top-rakuten,.btn-top-yahoo {
	border:1px solid #ffffff;
	text-align:center;
	padding:10px 8px;
}
.btn-top-rakuten:hover {
	border:1px solid #bf0000;	
}
.btn-top-yahoo:hover {
	border:1px solid #f18109;	
}
.btn-top-rakuten:after,.btn-top-yahoo:after {
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-webkit-transform: scale(.5);
	transform: scale(.5);
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}
.btn-top-rakuten:hover:after {
  background: #bf0000;
  -webkit-transform: scale(1);
  transform: scale(1);
}
.btn-top-yahoo:hover:after {
  background: #f18109;
  -webkit-transform: scale(1);
  transform: scale(1);
}
.toplink {
	display:block;	
}
.topanime {
	position:relative;
	z-index:1;
	overflow:hidden;	
	-webkit-transition: all 0.4s;
	transition: all 0.4s;
}
.topanime-left {
background: -moz-linear-gradient(left,  rgba(0,0,0,1) 1%, rgba(17,17,17,1) 70%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  rgba(0,0,0,1) 1%,rgba(17,17,17,1) 70%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  rgba(0,0,0,1) 1%,rgba(17,17,17,1) 70%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#111111',GradientType=1 ); /* IE6-9 */	
}
.topanime-right {
background: -moz-linear-gradient(left,  rgba(17,17,17,1) 1%, rgba(0,0,0,1) 70%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  rgba(17,17,17,1) 1%,rgba(0,0,0,1) 70%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  rgba(17,17,17,1) 1%,rgba(0,0,0,1) 70%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#111111', endColorstr='#000000',GradientType=1 ); /* IE6-9 */	
}
.topanime-left:hover {
background: -moz-linear-gradient(left,  rgba(0,0,0,1) 1%, rgba(201,1,4,1) 70%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  rgba(0,0,0,1) 1%,rgba(201,1,4,1) 70%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  rgba(0,0,0,1) 1%,rgba(201,1,4,1) 70%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ce0104',GradientType=1 ); /* IE6-9 */
}
.topanime-right:hover {
background: -moz-linear-gradient(left,  rgba(201,1,4,1) 1%, rgba(0,0,0,1) 70%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  rgba(201,1,4,1) 1%,rgba(0,0,0,1) 70%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  rgba(201,1,4,1) 1%,rgba(0,0,0,1) 70%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ce0104', endColorstr='#000000',GradientType=1 ); /* IE6-9 */
}
.topanime h2 {
	color:#ffffff;	
}
.topanime h2 span {
	display:block;	
}
@media screen and (max-width : 767px){
.toplink,.topanime {
	height:320px;	
}
	.topanime div {
	position:absolute;
	left:50%;
	bottom:70px;
	margin-left:-120px;
	z-index:3;
	transition:all 0.8s;
	transition-delay:0.4s ease-out;
	width:240px;
	height:240px;
	opacity:0;
	-webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -ms-transform: scale(0.8);
    transform: scale(0.8);
	}	
	.topanime h2 {
	position:absolute;
	top:270px;
	width:100%;	
	transition:all 0.8s;
	transition-delay:0.4s ease-out;
	opacity:0;
	z-index:9;
	text-align:center;
	}
	.topanime div.fire {
	opacity:1;
	-webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
	}
	.topanime h2.fire {
	opacity:1;	
	}
}
@media screen and (min-width : 768px){
.toplink {
	width:960px;
	height:320px;	
}
.topanime {
	height:320px;
}
.topanime div {
	position:absolute;
	bottom:-160px;
	z-index:3;
	transition:all 0.8s;
	transition-delay:0.4s ease-out;
	width:480px;
	height:480px;
	opacity:0;
}
.topanime-left div {
	left:90px;	
}
.topanime-right div {
	right:90px;	
}
.topanime h2 {
	position:absolute;
	top:128px;
	width:540px;
	height:90px;	
	transition:all 0.8s;
	transition-delay:0.4s ease-out;
	opacity:0;
	z-index:9;
}
.topanime-left h2 {
	right:90px;
	text-align:right;	
}
.topanime-left div.fire {
	opacity:1;
	left:150px;
}
.topanime-left h2.fire {
	opacity:1;
	right:150px;	
}
.topanime-right h2 {
	left:90px;
	text-align:left;	
}
.topanime-right div.fire {
	opacity:1;
	right:150px;
}
.topanime-right h2.fire {
	opacity:1;
	left:150px;	
}
.topanime h2 span {
	font-size:6.0rem;	
}
.topanime h2 p {
	letter-spacing:0.2em;
	padding-right:8px;
	font-weight:700;
}
}