body {
	background: url("../img/pc/product/babystar/bg.jpg") repeat center top;
	background-attachment: fixed;
	position: relative;
}

#fullpage {
	min-width: 1200px;
	z-index: 100;
}

#fullpage .section {
	text-align: center;
}

#fullpage .section .catch {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -269px;
	margin-top: -320px;}

#fullpage .section .product_name {
	position: absolute;
	bottom: 50%;
	left: 0%;
	width: 100%;
	text-align: center;
	z-index: 1;
	margin-bottom: -352px;}

#fullpage #ramen.section .product_name {
	margin-bottom: -367px;}

#fullpage #ramenmaru.section .product_name {
	margin-bottom: -355px;}

#fullpage #dodekai.section .product_name {
	margin-bottom: -394px;}

#fullpage #otsumami.section .product_name {
	margin-bottom: -390px;}
/* frame */
.frame.top,
.frame.bottom {
	position: fixed;
	left: 0;
	width: 100%;
	height: 15px;
	z-index: 110;
}

#gotochi .frame.top,
#gotochi .frame.bottom {
	display: none;
	position: absolute;
}

.frame.top {
	background: url(../img/pc/product/babystar/bg_header_bottom.png) repeat-x left top;
	top: 0;
}

.frame.bottom {
	background: url(../img/pc/product/babystar/bg_footer_top.png) repeat-x left top;
	bottom: 0;
}

/* ---- mv ---- */
#mv {
	overflow: hidden;
}

#mv .slide_inner {
	height: 100%;
}

#mv .mv_cont {
	position: absolute;
	height: 100%;
	width: 100%;
}

#mv .mv_cont .bomb1 {
	position: absolute;
	top: 48.3%;
	left: 50%;
	margin-left: -326px;
}

#mv .mv_cont .bomb2 {
	position: absolute;
	top: 48.3%;
	right: 50%;
	margin-right: -324px;
}

#mv .ttl {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -289px;
	margin-top: -246px;
	-webkit-animation: shake 3s infinite;
	animation: shake 3s infinite;
}

@-webkit-keyframes shake {
	0%{
		-webkit-transform: rotateZ(0);
		transform: rotateZ(0);
	}
	2%{
		-webkit-transform: rotateZ(5deg);
		transform: rotateZ(5deg);
	}
	4%{
		-webkit-transform: rotateZ(-4deg);
		transform: rotateZ(-4deg);
	}
	6%{
		-webkit-transform: rotateZ(3deg);
		transform: rotateZ(3deg);
	}
	8%{
		-webkit-transform: rotateZ(-2deg);
		transform: rotateZ(-2deg);
	}
	10%{
		-webkit-transform: rotateZ(1deg);
		transform: rotateZ(1deg);
	}
	12%{
		-webkit-transform: rotateZ(0);
		transform: rotateZ(0);
	}
}

@keyframes shake {
	0%{
		-webkit-transform: rotateZ(0);
		transform: rotateZ(0);
	}
	2%{
		-webkit-transform: rotateZ(5deg);
		transform: rotateZ(5deg);
	}
	4%{
		-webkit-transform: rotateZ(-4deg);
		transform: rotateZ(-4deg);
	}
	6%{
		-webkit-transform: rotateZ(3deg);
		transform: rotateZ(3deg);
	}
	8%{
		-webkit-transform: rotateZ(-2deg);
		transform: rotateZ(-2deg);
	}
	10%{
		-webkit-transform: rotateZ(1deg);
		transform: rotateZ(1deg);
	}
	12%{
		-webkit-transform: rotateZ(0);
		transform: rotateZ(0);
	}
}

#mv .product_list li {
	position: absolute;
	bottom: -28px;
	left: 50%;
	z-index: 3;
}

.jump {
	-webkit-animation: jump 3s infinite;
	animation: jump 3s infinite;
	-webkit-transform-origin: center bottom;
	transform-origin: center bottom;
}

@-webkit-keyframes jump {
	0%{
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
		animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
	}
	3.5%{
		-webkit-transform: translate(0, -20px);
		transform: translate(0, -20px);
	}
	7%{
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}
	100%{
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}
}
@keyframes jump {
	0%{
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
		animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
	}
	3.5%{
		-webkit-transform: translate(0, -20px);
		transform: translate(0, -20px);
	}
	7%{
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}
	100%{
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}
}

#mv .product_list li.variety img   {animation-delay: 1.1s;}
#mv .product_list li.dodekai img   {animation-delay: 1.1s;}
#mv .product_list li.ramen img     {animation-delay: .8s;}
#mv .product_list li.ramenmaru img {animation-delay: .8s;}
#mv .product_list li.otsumami img  {animation-delay: .5s;}

#mv .product_list li.dodekai {
	margin-left: -351px;
	bottom: -30px;
}
#mv .product_list li.ramenmaru {
	margin-left: -209px;
	bottom: -16px;
}
#mv .product_list li.variety {
	margin-left: 160px;
	bottom: -106px;
}
#mv .product_list li.otsumami {
	margin-left: -95px;
	bottom: -18px;
}
#mv .product_list li.ramen {
	margin-left: 91px;
	bottom: -28px;
}

#mv .chara,
#gotochi .chara {
	position: fixed;
	top: 0;
	left: 0;
	min-width: 1200px;
	height: 0%;
	width: 100%;
	z-index: 2;
}

#gotochi .chara {
	position: absolute;
	display: none;
}

.chara .card {
	width: 100%;
	height: 100%;
	max-width: 790px;
	transform-style: preserve-3d;
	transition: transform .8s cubic-bezier(0.215, 0.61, 0.355, 1);
	-moz-backface-visibility: hidden;
}

.chara .card .face {
	position: absolute;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
	bottom: 140px;
}

.chara .card .face img {
	width: 100%;
	height: auto;
}

.chara_r .card {
	position: absolute;
	left: 0;
}

.chara .card .face.front {
	z-index: 10;
}

.chara_r .card .face.front,
.chara_r .card .face.back {
	left: 0;
}

.chara .card .face.back {
	transform: rotateY(180deg);
	transform-origin: 50% 50%;
}

.chara.kaiten .card {
	transform: rotateY(180deg);
	transform-origin: 50% 50%;
}

.chara.kaiten .card .face.front {
	z-index: 0;
}

.chara_r {
	position: absolute;
	height: auto;
	perspective: 1000;
	z-index: 1;
	margin-left: 208px;
	left: 50%;
	top: 140px;
	width: 55%;
}

.chara_r img {
	max-width: 100%;
	height: auto;
}

.slider:before {
	content: '';
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -435px;
	margin-left: -435px;
	width: 870px;
	height: 870px;
	-webkit-animation: background 20s infinite linear;
	animation: background 20s infinite linear;
}

/* ---- cont08 ---- */
#cont08 {
	background: #ffbd32 url(../img/pc/default/bg_contents_list.jpg) center center;}
#panmen    .slider:before {background: url(../img/pc/product/babystar/disk_panmen.png) no-repeat center center;}
#ramen     .slider:before {background: url(../img/pc/product/babystar/disk_ramen.png) no-repeat center center;}
#ramenmaru .slider:before {background: url(../img/pc/product/babystar/disk_ramenmaru.png) no-repeat center center;}
#dodekai   .slider:before {background: url(../img/pc/product/babystar/disk_dodekai.png) no-repeat center center;}
#otsumami  .slider:before {background: url(../img/pc/product/babystar/disk_otsumami.png) no-repeat center center;}
#gotochi   .slider:before {background: url(../img/pc/product/babystar/disk_gotochi.png) no-repeat center center;}

.swiper-container {
	width: 450px;
	height: 450px;
	border-radius: 50%;
	z-index: 20;
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -225px;
	margin-top: -225px;
}

.swiper-button-next,
.swiper-button-prev {
	width: 54px;
	height: 25px;
	background: none;
	margin-top: -10px;
}

.swiper-button-prev {
	left: 14px;
	-webkit-animation: arrow_prev 3s infinite linear;
	animation: arrow_prev 3s infinite linear;
}

.swiper-button-next {
	right: 14px;
	-webkit-animation: arrow_next 3s infinite linear;
	animation: arrow_next 3s infinite linear;
}

.swiper-button-next img,
.swiper-button-prev img {
	position: absolute;
	left: 0;
	top: 0;
	transition: opacity .4s;
}

.swiper-button-next img.white,
.swiper-button-prev img.white {
	opacity: 0;
}

@-webkit-keyframes arrow_prev {
	6% {
		-webkit-transform: translateX(-10px);
		transform: translateX(-10px);
	}
	12% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}
	18% {
		-webkit-transform: translateX(-10px);
		transform: translateX(-10px);
	}
	24% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}
	100% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}
}

@keyframes arrow_prev {
	6% {
		-webkit-transform: translateX(-10px);
		transform: translateX(-10px);
	}
	12% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}
	18% {
		-webkit-transform: translateX(-10px);
		transform: translateX(-10px);
	}
	24% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}
	100% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}
}

@-webkit-keyframes arrow_next {
	6% {
		-webkit-transform: translateX(10px);
		transform: translateX(10px);
	}
	12% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}
	18% {
		-webkit-transform: translateX(10px);
		transform: translateX(10px);
	}
	24% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}
	100% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}
}

@keyframes arrow_next {
	6% {
		-webkit-transform: translateX(10px);
		transform: translateX(10px);
	}
	12% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}
	18% {
		-webkit-transform: translateX(10px);
		transform: translateX(10px);
	}
	24% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}
	100% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}
}
#cont08 .fp-tableCell {
	vertical-align: middle;
}

#cont08 .slide_inner {
	min-height: 852px!important;
	box-sizing: border-box;
	padding: 4% 0;
}

#cont08 .chara {
	margin-bottom: 33px;
	-webkit-animation: bottom_chara 2.2s infinite linear;
	animation: bottom_chara 2.2s infinite linear;
}

@-webkit-keyframes bottom_chara {
	0% {
		-webkit-transform: rotate(5deg) translate(0px, -2px);
		transform: rotate(5deg) translate(0px, -2px);
		-webkit-transform-origin: center bottom;
		transform-origin: center bottom;
	}
	6% {
		-webkit-transform: rotate(-7deg) translate(0px, 5px);
		transform: rotate(-7deg) translate(0px, 5px);
	}
	12% {
		-webkit-transform: rotate(-8deg) translate(0px, 5px);
		transform: rotate(-8deg) translate(0px, 5px);
	}
	18% {
		-webkit-transform: rotate(4deg) translate(0px, -1px);
		transform: rotate(4deg) translate(0px, -1px);
	}
	24% {
		-webkit-transform: rotate(5deg) translate(0px, -2px);
		transform: rotate(5deg) translate(0px, -2px);
	}
	30% {
		-webkit-transform: rotate(-7deg) translate(0px, 5px);
		transform: rotate(-7deg) translate(0px, 5px);
	}
	36% {
		-webkit-transform: rotate(-8deg) translate(0px, 5px);
		transform: rotate(-8deg) translate(0px, 5px);
	}
	42% {
		-webkit-transform: rotate(4deg) translate(0px, -1px);
		transform: rotate(4deg) translate(0px, -1px);
	}
	48% {
		-webkit-transform: rotate(5deg) translate(0px, -2px);
		transform: rotate(5deg) translate(0px, -2px);
		-webkit-transform-origin: center bottom;
		transform-origin: center bottom;
	}
	100% {
		-webkit-transform: rotate(5deg) translate(0px, -2px);
		transform: rotate(5deg) translate(0px, -2px);
		-webkit-transform-origin: center bottom;
		transform-origin: center bottom;
	}
}
@keyframes bottom_chara {
	0% {
		transform: rotate(5deg) translate(0px, -2px);
		transform-origin: center bottom;
	}
	6% {
		transform: rotate(-7deg) translate(0px, 5px);
	}
	12% {
		transform: rotate(-8deg) translate(0px, 5px);
	}
	18% {
		transform: rotate(4deg) translate(0px, -1px);
	}
	24% {
		transform: rotate(5deg) translate(0px, -2px);
	}
	30% {
		transform: rotate(-7deg) translate(0px, 5px);
	}
	36% {
		transform: rotate(-8deg) translate(0px, 5px);
	}
	42% {
		transform: rotate(4deg) translate(0px, -1px);
	}
	48% {
		transform: rotate(5deg) translate(0px, -2px);
		transform-origin: center bottom;
	}
	100% {
		transform: rotate(5deg) translate(0px, -2px);
		transform-origin: center bottom;
	}
}


#cont08 .btn {
	display: block;
	margin-bottom: 33px;
}

@media screen and (min-width: 1200px) and (min-height: 900px) {
	#mv .ttl {
		width: 662px;
		height: 566px;
		margin-top: -300px;
		margin-left: -331px;
	}
	#mv .ttl img {
		width: 100%;
	}
}

@media screen and (max-height: 800px) {
	.chara .card {
		max-width: 650px;
	}
	#mv .ttl {
		width: 489px;
		height: 418px;
		margin-top: -218px;
		margin-left: -250px;
	}
	#mv .ttl img {
		width: 100%;
	}
	.slider {
		transform: scale(.85);
	}
	.swiper-container {
		transform: scale(.85);
	}
}
@media screen and (max-height: 680px) {
	.chara .card {
		max-width: 570px;
	}
	.chara .card .face {
		top: -80px;
		bottom: auto;
	}
	.chara_r {
		margin-left: 170px;
	}
	#mv .ttl {
		width: 376px;
		height: 320px;
		margin-top: -170px;
		margin-left: -200px;
	}
	.slider {
		transform: scale(.75);
	}
	.swiper-container {
		transform: scale(.75);
	}
}
/* ---- header/footer ---- */
#fullpage #footer,
#fullpage #header {
	display: block;
	position: absolute;
	left: 0;
	width: 100%;
	z-index: 10;
}

#fullpage #header {
	height: 130px;
	top: 0;
	text-align:left;
}

#fullpage #footer {
	bottom: 0;
}

#fullpage .footer-bottom {
	background-color: #ffffff;
}