@charset "UTF-8";
/* CSS Document */
/* 基本情報 */
@keyframes bodyFadeIn {
 0% {
opacity: 0
}
 100% {
opacity: 1
}
}
 @-webkit-keyframes bodyFadeIn {
 0% {
opacity: 0
}
 100% {
opacity: 1
}
}
img {
	max-width: 100%;
	height: auto;
}
body {
	animation: bodyFadeIn 2s ease 0s 1 normal;
	-webkit-animation: bodyFadeIn 2s ease 0s 1 normal;
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
}
/*body:before{
  content:"";
  display:block;
  position:fixed;
  top:0;
  left:0;
  z-index:-1;
  width:100%;
  height:100vh;
  background:url("../../_img/bg2.jpg") center no-repeat;
  background-size:cover;
}*/
body {
	display: block;
	z-index: -1;
	width: 100%;
}
ol, ul {
	list-style: none;
	list-style-type: none;
}
a:hover img {
	opacity: 0.8;
	filter: alpha(opacity=80);
	-ms-filter: “alpha( opacity=80 )”;
}
.imgPC {
	display: block;
}
.imgSP {
	display: none;
}
.fadein {
	opacity : 0;
	transform : translate(0, 50px);
	transition : all 300ms;
}
.fadein.scrollin {
	opacity : 1;
	transform : translate(0, 0);
}

#chiko_wrapper{
	width: 100%;
	background: url("../../_img/bg.jpg") repeat-x center top;
    padding-bottom:40px;
}

/* ヘッダーロゴ部分 */
header#chiko_header{
	width: 1000px;
    height:339px;
    position:relative;
    margin:0 auto;
    z-index:1;
}

header#chiko_header h1 {font-size: 0;}
header#chiko_header #chara1 {
    width:289px; position: absolute; z-index: 3; left:0; right:0; top: 30px; margin:0 auto;
}
header#chiko_header #midashi {
    width:852px; position: absolute; z-index: 6; left:0; right:0; top: 5px; margin:0 auto;
}
header#chiko_header #logo {
    width:852px; position: absolute; z-index: 1; left:20px; top: 110px;
}
header#chiko_header #nhk {
    width:365px; position: absolute; z-index: 2; right:0; top: 110px;
}
header#chiko_header #name {
    width:181px; position: absolute; z-index: 4;right:310px; top: 300px; 
}

#main{width:1000px; height:734px; margin:0 auto; background: url("../../_img/main_bg.png") no-repeat center; position:relative; overflow: hidden;z-index:11;}

#main #toy {
    width:498px; position: absolute; z-index: 11; right:210px; top: 220px;
}
#main #chara2 {
    width:272px; position: absolute; z-index: 9; right:0; top: 180px;
}
#main #bomb1 {
    width:338px; position: absolute; z-index: 13; left:30px;  bottom: 0px;
}
#main #bomb2 {
    width:310px; position: absolute; z-index: 13; right:30px; bottom: 0px;
}
#main #anger_voice {
    width:438px; position: absolute; z-index: 13; left:40px; top: 90px;
}
#main #anger_face {
    width:292px; position: absolute; z-index: 12; left:-20px; top: 170px;
}
#main #text1 {
    width:883px; position: absolute; z-index: 13; left:0; right:0; top: 20px; margin:0 auto;
}

#obi {
	width: 100%;
	margin: 0px auto;
	position: relative;
	background: url("../../_img/bg_obi.jpg") repeat-x center top;
}
#obi .inner {
	width: 1000px;
	height: 352px;
	position: relative;
	margin: 0 auto;
}

#obi #changeFace{
    width: 345px;
    height: 346px;
	position: absolute;
    top:3px;left:0;
    background: url("../../_img/bg_face.png") no-repeat center top;
}
#viewer {
    width:67%;
    height: auto;
    padding-bottom: calc(100%*274/251);
    overflow: hidden;
    position: relative;
    left:17%;
    top:10%
}
 
#viewer img {
    top: 0;
    left: 0;
    position: absolute;
} 
#obi #text{	position: absolute;
    top:45px;right:0;}

/* ビデオ部分 */
#movie {
	width: 100%;
	height: auto;
    background: url("../../_img/bg_mv.jpg") center top;
    padding:30px 0;
}
#movie .midashi{text-align:center; }
#movie .youtube{width:840px; height:478px; margin:20px auto 0; box-shadow: 0px 0px 10px 0 #666;}
#movie .youtube iframe{width:100%; height:100%;}


/* 予約受付中部分 */
#yoyaku #yoyakuBtn{
	width: 256px;
	height: 75px;
    position:absolute;
    z-index:3;
    bottom:44px;
    right:160px;
}
#yoyaku {
	width: 100%;
	height: auto;
    background: url("../../_img/bg_yoyaku.jpg") center top;
}
#yoyaku .inner {
        position:relative;
	width: 1000px;
	margin: 0 auto;
}

/* フッター */
footer {
	width: 100%;
	box-sizing: border-box;
}
footer p {
	font-size: 12px;
	line-height: 16px;
	text-align: center;
}

footer #snsBtn{
  font-size: 0;
  padding: 20px 0;
    text-align:center;
}
footer #snsBtn li{
  line-height: 1.83333;
  letter-spacing: 0;
  display: inline-block
}
footer #snsBtn li + li {
  margin-left: 15px
}
footer #snsBtn img {
  width: 50px;
  height: auto
}

/* clearfix */
.clearfix {
	zoom: 1;
}
.clearfix:after, ul:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}

/*タカラトミーモールの設定をリセット*/
#contents {
	width: 100%;
	padding: 0;
}
footer.footer {
	padding: 0 0 20px;
}