﻿html, body {
	width: 100%;
	color: #693e3e;
	font-family: ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, ＭＳ Ｐゴシック, MS PGothic, sans-serif;
	font-size: 14px;
	line-height: 200%;
	letter-spacing: 0.05em;
	-webkit-text-size-adjust: 100%;
	margin: 0px;
	background-color:#fef1c4;
	background-image:
		url("../images/bg_right.png"),
		url("../images/bg_left.png"),
		url("../images/bg.png");
	background-position:
		right,
		left,
		top left;
	background-repeat:
		repeat-y,
		repeat-y,
		repeat;
}

a,a:link,a:visited{color:#f5a100;text-decoration:none;}
a:hover,a:active{color:#df2012;}

.menu-container-top{
	position:relative;
	width:100%;
	height:101px;
	margin-top:-101px;
	background:url("../images/menu-bg.png") center no-repeat;
	z-index: 100;
}

.menu-wrapper{
	position:absolute;;
	width:1000px;
	bottom:-5px;
	left:50%;
	transform:translateX(-50%);
	-moz-transform:translateX(-50%);
	-webkit-transform:translateX(-47%);
}

.menu-container-top .menu-wrapper img{
	transition:margin-bottom 0.3s;
	-moz-transition:margin-bottom 0.3s;
	-webkit-transition:margin-bottom 0.3s;
}

.menu-container-top .menu-wrapper img:hover{
	margin-bottom:10px;
}

.title{
	position:absolute;
	bottom:15px;
	left:50%;
	transform:translateX(-605px);
	-moz-transform:translateX(-605px);
	-webkit-transform:translateX(-605px);
	opacity: 0;
	
	animation: moveY_title 0.7s ease 2.5s 1 forwards;
	-ms-animation: moveY_title 0.7s ease 2.5s 1 forwards;
	-webkit-animation: moveY_title 0.7s ease 2.5s 1 forwards;
	-moz-animation: moveY_title 0.7s ease 2.5s 1 forwards;
}

.main-container{
	width:1250px;
	margin:0px auto;
}

.topics-left{
	width:885px;
	margin-left:15px;
	padding-top:10px;
	float:left;
}

.topics-left a img{
	margin-left:17px;
}

.topics-left a:nth-of-type(2n+1) img{
	margin-top:15px;
	margin-left:0px;
}

.topics-right{
	width:325px;
	margin-right:20px;
	padding-top:7px;
//	padding-top:40px;
	float:right;
}

.topics-right a img{
	margin-top:34px;
}

/* //////////////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////// */

.news-twi-container{
	position:relative;
	height:484px;
}

.news-twi-container > div{
}

.news-container{
	width:417px;
	background:url("../images/news.png") no-repeat left;
	margin-left:20px;
	top:0px;
	left:0px;
	padding-top:85px;
	height:399px;
	float:left;
}
.twitter1-container{
	width:417px;
	background:url("../images/twitter1.png") no-repeat center;
	margin-left:-20px;
	top:-15px;
	left:0px;
	height:484px;
	float:left;
}
.twitter2-container{
	float:left;
	width:417px;
	background:url("../images/twitter2.png") no-repeat right;
	margin-left:-20px;
	top:-15px;
	left:0px;
	height:484px;
}

/* //////////////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////// */

.productinfo{
	margin-top:10px;
	margin-left:-4px;
}

.banner{
	display:block;
	margin:30px auto;
}

.footer{
	width:100%;
	height:142px;
	background:url("../images/footer.png") center bottom no-repeat;
}

.btn-top{
	position:fixed;
	right:5px;
	bottom:5px;
	transition:opacity 0.3s;
	-moz-transition:opacity 0.3s;
	-webkit-transition:opacity 0.3s;
	z-index:101;
}

.btn-top:hover{
	opacity:0.5;
}

.topics-left img {
	opacity: 1;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

.topics-left img:hover {
	opacity: .5;
}

.topics-right img {
	opacity: 1;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

.topics-right img:hover {
	opacity: .5;
}

//.logbox{
//	width: 320px;
//	height: 340px;
//	overflow: auto;
//	margin:30px;
//	margin-top:85px;
//}

.logbox{
	width:320px;
	height:340px;
	overflow:auto;
	margin:0px 30px 30px 30px;
}

p.day{
	margin:0px;
	margin-left:10px;
	padding:0px;
}

p.news{
	margin:0px;
	margin-left:50px;
	margin-right:20px;
	padding:0px;
}
img.line{
	margin-left:5px;
}

div.twitter1{
	width: 320px;
	margin-left:40px;
	margin-top:70px;
}

div.twitter2{
	width: 320px;
	margin-left:40px;
	margin-top:70px;
}

.top-container{
	position:relative;
	width:100%;
	height:900px;
	background:url("../images/top-bg2.jpg") center no-repeat;
	overflow:hidden;
}

.chara1,.chara2,.chara3,.chara4{
	position:absolute;
	bottom:0px;
	left:50%;
	opacity: 0;
	z-index: 100;
}

.logo{
	position:absolute;
	width:458px;
	height:158px;
	bottom:80px;
	left:50%;
	z-index: 101;
	transform:translateX(-530px);
	-moz-transform:translateX(-530px);
	-webkit-transform:translateX(-530px);
}

.logo img{
	display:none;
}

.chara1{
//	animation: moveY 0.7s ease 0.5s 1 forwards;
//	-ms-animation: moveY 0.7s ease 0.5s 1 forwards;
//	-webkit-animation: moveY 0.7s ease 0.5s 1 forwards;
//	-moz-animation: moveY 0.7s ease 0.5s 1 forwards;
	
	transform:translateX(-210px);
	-moz-transform:translateX(-210px);
	-webkit-transform:translateX(-210px);
}
.chara2{
//	animation: moveY 0.7s ease 0.8s 1 forwards;
//	-ms-animation: moveY 0.7s ease 0.8s 1 forwards;
//	-webkit-animation: moveY 0.7s ease 0.8s 1 forwards;
//	-moz-animation: moveY 0.7s ease 0.8s 1 forwards;
	
	transform:translateX(-560px);
	-moz-transform:translateX(-560px);
	-webkit-transform:translateX(-560px);
}
.chara3{
//	animation: moveY 0.7s ease 1.1s 1 forwards;
//	-ms-animation: moveY 0.7s ease 1.1s 1 forwards;
//	-webkit-animation: moveY 0.7s ease 1.1s 1 forwards;
//	-moz-animation: moveY 0.7s ease 1.1s 1 forwards;
	
	transform:translateX(-290px);
	-moz-transform:translateX(-290px);
	-webkit-transform:translateX(-290px);
}
.chara4{
//	animation: moveY 0.7s ease 1.4s 1 forwards;
//	-ms-animation: moveY 0.7s ease 1.4s 1 forwards;
//	-webkit-animation: moveY 0.7s ease 1.4s 1 forwards;
//	-moz-animation: moveY 0.7s ease 1.4s 1 forwards;
	
	transform:translateX(-10px);
	-moz-transform:translateX(-10px);
	-webkit-transform:translateX(-10px);
}

@-ms-keyframes moveY {
0% {bottom:-30px;}
100% {
	bottom:0px;
	opacity: 1;}
}
@-webkit-keyframes moveY /* Safari and Chrome */
{
0% {bottom:-30px;}
100% {
	bottom:0px;
	opacity: 1;}
}
@-moz-keyframes moveY /* Firefox */
{
0% {bottom:-30px;}
100% {
	bottom:0px;
	opacity: 1;}
}


@-ms-keyframes moveY_title {
0% {bottom:-15px;}
100% {
	bottom:15px;
	opacity: 1;}
}
@-webkit-keyframes moveY_title /* Safari and Chrome */
{
0% {bottom:-15px;}
100% {
	bottom:15px;
	opacity: 1;}
}
@-moz-keyframes moveY_title /* Firefox */
{
0% {bottom:-15px;}
100% {
	bottom:15px;
	opacity: 1;}
}


.kuma,.kuma2,.kuma3{
	position:absolute;
	top:810px;
	left:50%;
	transform:translateX(460px);
	-moz-transform:translateX(460px);
	-webkit-transform:translateX(460px);
	z-index:101;
}

.kuma2{
	top:1865px;
	transform:translateX(-70px);
	-moz-transform:translateX(-70px);
	-webkit-transform:translateX(-70px);
}

.kuma3{
	top:800px;
	transform:translateX(-600px);
	-moz-transform:translateX(-600px);
	-webkit-transform:translateX(-600px);
}

.kuma img{
	animation:yura infinite 2s ease;
	-moz-animation:yura infinite 2s ease;
	-webkit-animation:yura infinite 2s ease;
}

.kuma2 img{
	animation:pyon infinite 2s;
	-moz-animation:pyon infinite 2s;
	-webkit-animation:pyon infinite 2s;
}
.kuma3 img{
	animation:kuru infinite 2s ease;
	-moz-animation:kuru infinite 2s ease;
	-webkit-animation:kuru infinite 2s ease;
}

@keyframes kuru{
	0%{transform:rotate(0deg);}
	100%{transform:rotate(360deg);}
}
@-moz-keyframes kuru{
	0%{-moz-transform:rotate(0deg);}
	100%{-moz-transform:rotate(360deg);}
}
@-webkit-keyframes kuru{
	0%{-webkit-transform:rotate(0deg);}
	100%{-webkit-transform:rotate(360deg);}
}

@keyframes pyon{
	0%{margin-top:0px;}
	7%{margin-top:-10px;}
	14%{margin-top:0px;}
	21%{margin-top:-10px;}
	28%{margin-top:0px;}
	100%{margin-top:0px;}
}
@-moz-keyframes pyon{
	0%{margin-top:0px;}
	7%{margin-top:-10px;}
	14%{margin-top:0px;}
	21%{margin-top:-10px;}
	28%{margin-top:0px;}
	100%{margin-top:0px;}
}
@-webkit-keyframes pyon{
	0%{margin-top:0px;}
	7%{margin-top:-10px;}
	14%{margin-top:0px;}
	21%{margin-top:-10px;}
	28%{margin-top:0px;}
	100%{margin-top:0px;}
}

@keyframes yura{
	0%{transform:rotate(-10deg);}
	50%{transform:rotate(10deg);}
	100%{transform:rotate(-10deg);}
}
@-moz-keyframes yura{
	0%{-moz-transform:rotate(-10deg);}
	50%{-moz-transform:rotate(10deg);}
	100%{-moz-transform:rotate(-10deg);}
}
@-webkit-keyframes yura{
	0%{-webkit-transform:rotate(-10deg);}
	50%{-webkit-transform:rotate(10deg);}
	100%{-webkit-transform:rotate(-10deg);}
}

.btn-twitter,.btn-fb{
	position:fixed;
	z-index:101;
	top:-70px;
	left:50%;
	transform:translateX(-550px);
	-moz-transform:translateX(-550px);
	-webkit-transform:translateX(-550px);
	transition:opacity 0.3s,top 0.3s ease;
	-moz-transition:opacity 0.3s,top 0.3s ease;
	-webkit-transition:opacity 0.3s,top 0.3s ease;
}

.btn-fb{
	transform:translateX(-490px);
	-moz-transform:translateX(-490px);
	-webkit-transform:translateX(-490px);
}

.btn-twitter:hover,.btn-fb:hover{
	opacity:0.5;
}

.copy1,.copy2{
	position:absolute;
	width:0px;
	height:144px;
	top:0px;
	left:50%;
	transform:translateX(140px);
	-moz-transform:translateX(140px);
	-webkit-transform:translateX(140px);
	background:url("../images/copy1.png") top left;
	transition:width 0.3s ease;
	-moz-transition:width 0.3s ease;
	-webkit-transition:width 0.3s ease;
}

.copy2{
	width:0px;
	height:204px;
	top:80px;
	transform:translateX(170px);
	-moz-transform:translateX(170px);
	-webkit-transform:translateX(170px);
	background:url("../images/copy2.png") top left;
}

.ninshou-container{
	position:fixed;
	z-index:200;
	width:100%;
	height:100%;
	top:0px;
	left:0px;
	background:rgba(255,255,204,0.9);
	display:none;
}

.ninshou-box{
	position:absolute;
	top:50%;
	left:50%;
	width:722px;
	height:373px;
	background:url("../images/ninshou.png");
	transform:translate(-50%,-50%);
	-moz-transform:translate(-50%,-50%);
	-webkit-transform:translate(-50%,-50%);
	text-align:center;
}

.in,.leave{
	margin-top:270px;
}

.in{
	cursor:pointer;
	margin-right:50px;
}

.in:hover,.leave:hover{
	opacity:0.5;
}

.headphone{
	position:absolute;
	width:188px;
	height:53px;
	top:50px;
	left:50%;
	z-index:101;
	transform:translateX(-350px);
	-moz-transform:translateX(-350px);
	-webkit-transform:translateX(-350px);
	-webkit-animation:doki 1s infinite;
	display:none;
}

@-webkit-keyframes doki{
	0%{
		width:188px;
		height:53px;
		top:50px;
		-webkit-transform:translateX(-350px);
	}
	80%{
		width:188px;
		height:53px;
		top:50px;
		-webkit-transform:translateX(-350px);
	}
	90%{
		width:202px;
		height:57px;
		top:48px;
		-webkit-transform:translateX(-357px);
	}
	100%{
		width:188px;
		height:53px;
		top:50px;
		-webkit-transform:translateX(-350px);
	}
}

.topics-container{
	margin-top:20px;
	text-align:center;
}

.topics-container a img{
	width:17%;
	margin-left:10px;
}

.topics-container a{
	transition:opacity 0.3s;
	-moz-transition:opacity 0.3s;
	-webkit-transition:opacity 0.3s;
}

.topics-container a:hover{
	opacity:0.7;
}

