@charset "UTF-8";

/* 全体
------------------------------------------------------------------ */
body {
	animation: fadeIn 2s ease 0s 1 normal;
	-webkit-animation: fadeIn 2s ease 0s 1 normal;
}
@keyframes fadeIn {
	0% {opacity: 0}
	100% {opacity: 1}
}
@-webkit-keyframes fadeIn {
	0% {opacity: 0}
	100% {opacity: 1}
}

/* 画像切り替え表示 */
@media screen and (min-width: 769px) {	/* PC */
	.pc {
		display: inline-block;
	}
	.sp {
		display: none;
	}
}
@media (max-width: 768px) {	/* SP */
	.pc {
		display: none;
	}
	.sp {
		display: inline-block;
	}
}
/* hover */
@media screen and (min-width: 769px) {	/* PC */
	.linkbtn {
		opacity: 1.0;
		-webkit-transition: all .5s;
		transition: all .5s;
	}
	.linkbtn:hover {
		opacity: 0.7;
	}
}

/* タイトルエリア
------------------------------------------------------------------ */
@media screen and (min-width: 769px) {	/* PC */
	#planet-title {
		width: 100%;
		height: 673px;
		display: block;
		margin: 0px auto;
		padding: 0px;
		background: #000 url(../img/planets_main.jpg) no-repeat center top;
		-webkit-background-size: auto 100%;
		background-size: auto 100%;
		position: relative;
	}
	/* ロゴ横の白ボーダーライン */
	span.stbd1 {	/* 横の線 */
		width: 65px;
		height: 1px;
		border-bottom: 1px solid #fff;
		box-sizing: border-box;
		display:block;
		position: absolute;
		top: 105px;
		left: 24px;
		margin: 0;
		opacity: 0;
	}
	span.stbd1::before {	/* 横の線 */
		content: '';
		width: 15px;
		height: 106px;
		border-left: 1px solid #fff;
		box-sizing: border-box;
		display:block;
		position: absolute;
		top: -105px;
		left: 0px;
		margin: 0;
		opacity: 0;
	}
	span.stbd1::after {	/* 横の線 */
		content: '';
		width: 100%;
		display: inline-block;
		width: 8px;
		height: 8px;
		border-radius: 8px;
		background-color: #fff;
		position: absolute;
		top: -3px;
		right: 0;
		opacity: 0;
	}
	span.stbd2 {	/* 横の線2 */
		width: 30px;
		height: 50px;
		border-right: 1px solid #fff;
		box-sizing: border-box;
		display:block;
		position: absolute;
		top: 76px;
		left: 24px;
		margin: 0;
		opacity: 0;
	}
	span.stbd2::before {	/* 横の線2 */
		content: '';
		width: 30px;
		height: 30px;
		border-bottom: 1px solid #fff;
		box-sizing: border-box;
		display:block;
		transform: skewY(35deg); /*transformで曲げる*/
		position: absolute;
		top: 10px;
		left: 0px;
		margin: 0;
		opacity: 0;
	}
	span.stbd3 {	/* 下の縦線 */
		width: 1px;
		height: 100px;
		border-right: 1px solid #fff;
		box-sizing: border-box;
		display:block;
		position: absolute;
		top: -100px;
		left: 24px;
		margin: 0;
		opacity: 0;
	}
	
	#planet-title.fade_on .stbd1::before {
		-webkit-animation: tbd 1.0s forwards/* infinite */;
		-webkit-animation-delay: 0s;
		animation: tbd 1.0s forwards/* infinite */;
		animation-delay: 0s;
	}
	#planet-title.fade_on .stbd1 {
		-webkit-animation: tbdyoko 1.0s forwards/* infinite */;
		-webkit-animation-delay: 0.5s;
		animation: tbdyoko 1.0s forwards/* infinite */;
		animation-delay: 0.5s;
	}
	#planet-title.fade_on .stbd1::after {
		-webkit-animation: tbddot 0.5s forwards/* infinite */;
		-webkit-animation-delay: 1.0s;
		animation: tbddot 0.5s forwards/* infinite */;
		animation-delay: 1.0s;
	}
	#planet-title.fade_on .stbd2::before {
		-webkit-animation: tbdyoko 0.5s forwards/* infinite */;
		-webkit-animation-delay: 1.0s;
		animation: tbdyoko 0.5s forwards/* infinite */;
		animation-delay: 1.0s;
	}
	#planet-title.fade_on .stbd2 {
		-webkit-animation: tbd 0.5s forwards/* infinite */;
		-webkit-animation-delay: 1.0s;
		animation: tbd 0.5s forwards/* infinite */;
		animation-delay: 1.0s;
	}
	#planet-title.fade_on .stbd3 {
		-webkit-animation: tbd 0.5s forwards/* infinite */;
		-webkit-animation-delay: 0s;
		animation: tbd 0.5s forwards/* infinite */;
		animation-delay: 0s;
	}

	/* h5横の紫ボーダーライン */
	#planet-title span.change-border {
		position: absolute;
		top: 0px;
		left: 25px;
		width: 13px;
		height: 105px;
		background: #542991;
		opacity: 0;
		box-sizing: border-box;
		display:block;
	}
	#planet-title.fade_on span.change-border {
		-webkit-animation: cbd 1.0s forwards/* infinite */;
		-webkit-animation-delay: 0.5s;
		animation: cbd 1.0s forwards/* infinite */;
		animation-delay: 0.5s;
	}
	#planet-title h5 a {
		padding: 23px 0px 0px;
		overflow: hidden;
		height: 0px !important;
		height /**/:23px;
		background: url(../img/h3_cosmiclabo.png) no-repeat left center;
		-webkit-background-size: 193px auto;
		background-size: 193px auto;
		margin: 0px auto;
		width: 240px;
		display: block;
		position: absolute;
		top: 38px;
		left: 60px;
		opacity: 0;
	}
	#planet-title.fade_on h5 a {
		-webkit-animation: logofade 1.5s forwards/* infinite */;
		-webkit-animation-delay: 0.5s;
		animation: logofade 1.5s forwards/* infinite */;
		animation-delay: 0.5s;
	}
	#planet-title h1 {
		padding: 30px 0px 0px;
		overflow: hidden;
		height: 0px !important;
		height /**/:30px;
		background: url(../img/h1_theplanets.png) no-repeat left top;
		-webkit-background-size: 100% auto;
		background-size: 100% auto;
		margin: 0px auto;
		width: 240px;
		display: block;
		position: absolute;
		top: 160px;
		left: 0;
		right: 0;
		opacity: 0;
		-webkit-animation: h1fade 1.5s forwards/* infinite */;
		-webkit-animation-delay: 1.5s;
		animation: h1fade 1.5s forwards/* infinite */;
		animation-delay: 1.5s;
	}
}
@media (max-width: 768px) {	/* SP */
	#planet-title {
		width: 100%;
		height: 80vh;
		display: block;
		margin: 0px auto;
		padding: 0px;
		background: #000 url(../img/planets_main_sp.jpg) no-repeat center top;
		-webkit-background-size: auto 100%;
		background-size: auto 100%;
		position: relative;
	}
	/* ロゴ横の白ボーダーライン */
	span.stbd1 {	/* 横の線（丸付き） */
		width: 45px;
		height: 1px;
		border-bottom: 1px solid #fff;
		box-sizing: border-box;
		display:block;
		position: absolute;
		top: 66px;
		left: 13px;
		margin: 0;
		opacity: 0;
	}
	span.stbd1::before {	/* 横の線（丸付き） */
		content: '';
		width: 15px;
		height: 106px;
		border-left: 1px solid #fff;
		box-sizing: border-box;
		display:block;
		position: absolute;
		top: -105px;
		left: 0px;
		margin: 0;
		opacity: 0;
	}
	span.stbd1::after {	/* 横の線（丸付き） */
		content: '';
		width: 100%;
		display: inline-block;
		width: 8px;
		height: 8px;
		border-radius: 8px;
		background-color: #fff;
		position: absolute;
		top: -3px;
		right: 0;
		opacity: 0;
	}
	span.stbd2 {	/* 横の線2（右側） */
		width: 1px;
		height: 50px;
		border-right: 1px solid #fff;
		box-sizing: border-box;
		display:block;
		position: absolute;
		top: 25px;
		left: 25px;
		margin: 0;
		opacity: 0;
	}
	span.stbd2::before {	/* 横の線2（右側） */
		content: '';
		width: 13px;
		height: 13px;
		border-bottom: 1px solid #fff;
		box-sizing: border-box;
		display:block;
		transform: skewY(35deg); /*transformで曲げる*/
		position: absolute;
		top: 33px;
		left: -12px;
		margin: 0;
		opacity: 0;
	}
	span.stbd3 {	/* 下の縦線 */
		width: 1px;
		height: 100px;
		border-right: none;
		box-sizing: border-box;
		display:none;
		position: absolute;
		top: -100px;
		left: 24px;
		margin: 0;
		opacity: 0;
	}
	
	#planet-title.fade_on .stbd1::before {
		-webkit-animation: tbd 1.0s forwards/* infinite */;
		-webkit-animation-delay: 0s;
		animation: tbd 1.0s forwards/* infinite */;
		animation-delay: 0s;
	}
	#planet-title.fade_on .stbd1 {
		-webkit-animation: tbdyoko 1.0s forwards/* infinite */;
		-webkit-animation-delay: 0.5s;
		animation: tbdyoko 1.0s forwards/* infinite */;
		animation-delay: 0.5s;
	}
	#planet-title.fade_on .stbd1::after {
		-webkit-animation: tbddot 0.5s forwards/* infinite */;
		-webkit-animation-delay: 1.0s;
		animation: tbddot 0.5s forwards/* infinite */;
		animation-delay: 1.0s;
	}
	#planet-title.fade_on .stbd2::before {
		-webkit-animation: tbdyoko 0.5s forwards/* infinite */;
		-webkit-animation-delay: 1.0s;
		animation: tbdyoko 0.5s forwards/* infinite */;
		animation-delay: 1.0s;
	}
	#planet-title.fade_on .stbd2 {
		-webkit-animation: tbd 0.5s forwards/* infinite */;
		-webkit-animation-delay: 1.0s;
		animation: tbd 0.5s forwards/* infinite */;
		animation-delay: 1.0s;
	}
	#planet-title.fade_on .stbd3 {
		-webkit-animation: tbd 0.5s forwards/* infinite */;
		-webkit-animation-delay: 0s;
		animation: tbd 0.5s forwards/* infinite */;
		animation-delay: 0s;
	}

	/* h5横の紫ボーダーライン */
	#planet-title span.change-border {
		position: absolute;
		top: 0px;
		left: 15px;
		width: 10px;
		height: 65px;
		background: #542991;
		opacity: 0;
		-webkit-animation: cbd 1.5s forwards/* infinite */;
		-webkit-animation-delay: 0.5s;
		animation: cbd 1.5s forwards/* infinite */;
		animation-delay: 0.5s;
		box-sizing: border-box;
		display:block;
	}
	#planet-title.fade_on span.change-border {
		-webkit-animation: cbd 1.0s forwards/* infinite */;
		-webkit-animation-delay: 0s;
		animation: cbd 1.0s forwards/* infinite */;
		animation-delay: 0s;
	}
	#planet-title h5 {
		padding: 30px 0px 0px;
		overflow: hidden;
		height: 0px !important;
		height /**/:30px;
		background: url(../img/logo_cosmiclabo.png) no-repeat left top;
		-webkit-background-size: 80% auto;
		background-size: 80% auto;
		margin: 0px auto;
		width: 195px;
		display: block;
		position: absolute;
		top: 20px;
		left: 40px;
		opacity: 0;
		-webkit-animation: logofade 1.5s forwards/* infinite */;
		-webkit-animation-delay: 1.0s;
		animation: logofade 1.5s forwards/* infinite */;
		animation-delay: 1.0s;
	}
	#planet-title.fade_on h5 {
		-webkit-animation: logofade 1.5s forwards/* infinite */;
		-webkit-animation-delay: 0.5s;
		animation: logofade 1.5s forwards/* infinite */;
		animation-delay: 0.5s;
	}
	#planet-title h1 {
		padding: 30px 0px 0px;
		overflow: hidden;
		height: 0px !important;
		height /**/:30px;
		background: url(../img/h1_theplanets.png) no-repeat left top;
		-webkit-background-size: 100% auto;
		background-size: 100% auto;
		margin: 0px auto;
		width: 200px;
		display: block;
		position: absolute;
		top: 115px;
		left: 0;
		right: 0;
		opacity: 0;
		-webkit-animation: h1fade 1.5s forwards/* infinite */;
		-webkit-animation-delay: 1.5s;
		animation: h1fade 1.5s forwards/* infinite */;
		animation-delay: 1.5s;
	}
}
@-webkit-keyframes cbd {
	0% {
		opacity: 0;
	}
	50% {
		height: 0px;
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@keyframes cbd {
	0% {
		opacity: 0;
	}
	50% {
		height: 0px;
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@-webkit-keyframes logofade {
	0% {
		-webkit-transform: translate(0, 0);
		opacity: 0;
	}
	50% {
		-webkit-transform: translate(0, 0);
		opacity: 0;
	}
	100% {
		-webkit-transform: translate(-20px, 0);
		opacity: 1;
	}
}
@keyframes logofade {
	0% {
		transform: translate(20px, 0);
		opacity: 0;
	}
	50% {
		transform: translate(20px, 0);
		opacity: 0;
	}
	100% {
		transform: translate(0, 0);
		opacity: 1;
	}
}
@-webkit-keyframes h1fade {
	0% {
		-webkit-transform: translate(0, 0);
		opacity: 0;
	}
	50% {
		-webkit-transform: translate(0, 0);
		opacity: 0;
	}
	100% {
		-webkit-transform: translate(0px, 20px);
		opacity: 1;
	}
}
@keyframes h1fade {
	0% {
		transform: translate(0, 0);
		opacity: 0;
	}
	50% {
		transform: translate(0, 0);
		opacity: 0;
	}
	100% {
		transform: translate(0, 20px);
		opacity: 1;
	}
}
@-webkit-keyframes tbd {
	0% {
		height: 0px;
		opacity: 0;
	}
	50% {
		height: 0px;
		opacity: 1;
	}
	100% {
		opacity: 1;
	}
}
@-webkit-keyframes tbdyoko {
	0% {
		width: 0px;
		opacity: 0;
	}
	50% {
		width: 0px;
		opacity: 1;
	}
	100% {
		opacity: 1;
	}
}
@-webkit-keyframes tbddot {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 1;
	}
}
@keyframes tbd {
	0% {
		height: 0px;
		opacity: 0;
	}
	50% {
		height: 0px;
		opacity: 1;
	}
	100% {
		opacity: 1;
	}
}
@keyframes tbdyoko {
	0% {
		width: 0px;
		opacity: 0;
	}
	50% {
		width: 0px;
		opacity: 1;
	}
	100% {
		opacity: 1;
	}
}
@keyframes tbddot {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 1;
	}
}

/* スクロール矢印 */
@media screen and (min-width: 769px) {	/* PC */
	a.scroll {
		width: 100px;
		height: 60px;
		margin: auto;
		position: absolute;
		bottom: 50px;
		left: 0;
		right: 0;
	}
	a.scroll img {
		width: 100px;
		height: 60px;
		opacity: 0;
		-webkit-animation: sdb 1.5s infinite;
		-webkit-animation-delay: 3s;
		animation: sdb 1.5s infinite;
		animation-delay: 3s;
		box-sizing: border-box;
	}
}
@media (max-width: 768px) {	/* SP */
	a.scroll {
		padding-top: 70px;
	}
	a.scroll img {
		position: absolute;
		bottom: 30px;
		left: 0;
		right: 0;
		margin: auto;
		width: 100px;
		height: 60px;
		opacity: 0;
		-webkit-animation: sdb 1.5s infinite;
		-webkit-animation-delay: 3s;
		animation: sdb 1.5s infinite;
		animation-delay: 3s;
		box-sizing: border-box;
	}
}
@-webkit-keyframes sdb {
	0% {
		-webkit-transform: rotate(0deg) translate(0, 0);
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		-webkit-transform: rotate(0deg) translate(0px, 20px);
		opacity: 0;
	}
}
@keyframes sdb {
	0% {
		transform: rotate(0deg) translate(0, 0);
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		transform: rotate(0deg) translate(0px, 20px);
		opacity: 0;
	}
}

/* LOOKエリア
------------------------------------------------------------------ */
@media screen and (min-width: 769px) {	/* PC */
	#planet-main #looks {
		width: 100%;
		height: auto;
		display: block;
		margin: 0px auto 70px;
		padding: 70px 0px;
		position: relative;
	}
	#looks h2 {
		padding: 30px 0px 0px;
		overflow: hidden;
		height: 0px !important;
		height /**/:30px;
		background: url(../img/h2_stackingring.png) no-repeat left top;
		-webkit-background-size: 100% auto;
		background-size: 100% auto;
		margin: 0px auto 50px;
		width: 280px;
		display: block;
	}
	/* swiper */
	#looks .swiper-slide {
		width: 278px;
		height: auto;
		display: block;
		margin: 0px auto;
		text-align: center;
	}
	#looks .swiper-slide img {
		width: 100%;
		height: auto;
	}
	#looks .swiper-pagination-bullet-active {
		opacity: 1;
		background: #333;
	}
	/* lightbox */
	.lightboxOverlay {
		background-color: rgba(255,255,255,0.9);
		filter: alpha(Opacity=100);
		opacity: 1;
	}
	.lightbox .lb-image {
		border-radius: 0px;
		border: none;
	}
	.lb-nav a.lb-prev {
		position: absolute;
		left: -50px;
		background: url(../img/arrow_prev_gy.png) left 49% no-repeat;
		filter: alpha(Opacity=100);
		opacity: 1;
		-webkit-transition: opacity .6s;
		-moz-transition: opacity .6s;
		-o-transition: opacity .6s;
		transition: opacity .6s;
	}
	.lb-nav a.lb-next {
		width: 64%;
		position: absolute;
		right: -50px;
		float: right;
		background: url(../img/arrow_next_gy.png) right 49% no-repeat;
		filter: alpha(Opacity=100);
		opacity: 1;
		-webkit-transition: opacity .6s;
		-moz-transition: opacity .6s;
		-o-transition: opacity .6s;
		transition: opacity .6s;
	}
	.lb-data .lb-close {
		display: block;
		float: none;
		position: absolute;
		top: -20px;
		right: 30px;
		width: 36px;
		height: 36px;
		background: url(../img/btn_close.png) top right no-repeat;
		text-align: right;
		outline: 0;
		filter: alpha(Opacity=100);
		opacity: 1;
		-webkit-transition: opacity .2s;
		-moz-transition: opacity .2s;
		-o-transition: opacity .2s;
		transition: opacity .2s;
	}
	#looks p {
		width: 100%;
		display: block;
		margin: 40px auto;
		padding: 0px;
		font: 16px/2em "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
		color: #666;
	}
}
@media (max-width: 768px) {	/* SP */
	#planet-main #looks {
		width: 100%;
		height: auto;
		display: block;
		margin: 0px auto;
		padding: 120px 0px 50px;
		position: relative;
	}
	#looks h2 {
		padding: 30px 0px 0px;
		overflow: hidden;
		height: 0px !important;
		height /**/:30px;
		background: url(../img/h2_stackingring.png) no-repeat left top;
		-webkit-background-size: 100% auto;
		background-size: 100% auto;
		margin: 0px auto 30px;
		width: 220px;
		display: block;
	}
	/* swiper */
	#looks .swiper-slide {
		width: 278px;
		height: auto;
		display: block;
		margin: 0px auto;
		text-align: center;
	}
	#looks .swiper-slide img {
		width: 100%;
		height: auto;
	}
	#looks .swiper-pagination-bullet-active {
		opacity: 1;
		background: #333;
	}
	/* lightbox */
	.lightboxOverlay {
		background-color: rgba(255,255,255,0.9);
		filter: alpha(Opacity=100);
		opacity: 1;
	}
	.lb-outerContainer {
		margin: 10% auto;
	}
	.lightbox .lb-image {
		border-radius: 0px;
		border: none;
	}
	.lb-nav a.lb-prev {
		position: absolute;
		left: -10px;
		background: url(../img/arrow_prev_gy.png) left 49% no-repeat;
		-webkit-background-size: 24px auto;
		background-size: 24px auto;
		filter: alpha(Opacity=100);
		opacity: 1;
		-webkit-transition: opacity .6s;
		-moz-transition: opacity .6s;
		-o-transition: opacity .6s;
		transition: opacity .6s;
	}
	.lb-nav a.lb-next {
		width: 64%;
		position: absolute;
		right: -10px;
		float: right;
		background: url(../img/arrow_next_gy.png) right 49% no-repeat;
		-webkit-background-size: 24px auto;
		background-size: 24px auto;
		filter: alpha(Opacity=100);
		opacity: 1;
		-webkit-transition: opacity .6s;
		-moz-transition: opacity .6s;
		-o-transition: opacity .6s;
		transition: opacity .6s;
	}
	.lb-data .lb-close {
		display: block;
		float: none;
		position: absolute;
		top: -30px;
		right: 15px;
		width: 36px;
		height: 36px;
		background: url(../img/btn_close.png) top right no-repeat;
		text-align: right;
		outline: 0;
		filter: alpha(Opacity=100);
		opacity: 1;
		-webkit-transition: opacity .2s;
		-moz-transition: opacity .2s;
		-o-transition: opacity .2s;
		transition: opacity .2s;
	}
	#looks p {
		width: 100%;
		display: block;
		margin: 25px auto;
		padding: 0px;
		font: 16px/2em "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
		color: #666;
	}
}

/* ページ遷移のフェードインフェードアウト
------------------------------------------------------------------ */
.fade_off {
	opacity: 0;
	-webkit-transition: all 2s;
	-moz-transition: all 2s;
	-o-transition: all 2s;
	-ms-transition: all 2s;
	transition: all 2s;
	-moz-transition-delay: .5s;
	-webkit-transition-delay: .5s;
	-o-transition-delay: .5s;
	-ms-transition-delay: .5s;
	transition-delay: .5s;
}
.fade_on {
	opacity: 1;
}

/* Step Modal window
------------------------------------------------------------------ */
@media screen and (min-width: 769px) {	/* PC */
	.step_wrap {
	}
	.box {
		z-index: 999;
		width: 680px;
		height: 380px;
		display: block;
		position: absolute;
		top: 110px;
		left: 0;
		right: 0;
		margin: auto;
		padding: 70px 0px;
		background: #fff;
		opacity: 0;
	}
	.box2 {
		z-index: 999;
		width: 680px;
		height: 380px;
		display: block;
		position: absolute;
		top: 110px;
		left: 0;
		right: 0;
		margin: auto;
		padding: 70px 0px;
		background: #fff;
		opacity: 0;
	}
	.box p,
	.box2 p {
		width: 600px;
		height: auto;
		display: block;
		margin: 30px auto;
		padding: 30px 0px;
		border-top: 1px solid #d1ded5;
		border-bottom: 1px solid #d1ded5;
		font: 20px/38px "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
		color: #666;
	}
}
@media (max-width: 768px) {	/* SP */
	.step_wrap {
	}
	.box {
		z-index: 999;
		width: 90%;
		height: auto;
		display: block;
		position: absolute;
		top: 115px;
		left: 0;
		right: 0;
		margin: auto;
		padding: 40px 0px;
		background: rgba(252,252,252,0.9);
		opacity: 0;
	}
	.box img:not(.closebtn) {
		width: 85px;
		height: auto;
	}
	.box2 {
		z-index: 999;
		width: 90%;
		height: auto;
		display: block;
		position: absolute;
		top: 115px;
		left: 0;
		right: 0;
		margin: auto;
		padding: 40px 0px;
		background: rgba(252,252,252,0.9);
		opacity: 0;
	}
	.box2 img:not(.closebtn) {
		width: 85px;
		height: auto;
	}
	.box p,
	.box2 p {
		width: 90%;
		height: auto;
		display: block;
		margin: 30px auto;
		padding: 30px 0px;
		border-top: 1px solid #d1ded5;
		border-bottom: 1px solid #d1ded5;
		font: 16px/2em "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
		color: #666;
	}
}
#model_select.fade_on .box {
	-webkit-animation: stepwrap 3s forwards/* infinite */;
	-webkit-animation-delay: 0.5s;
	animation: stepwrap 3s forwards/* infinite */;
	animation-delay: 0.5s;
}
#ring_stacking.fade_on .box2 {
	-webkit-animation: stepwrap 3s forwards/* infinite */;
	-webkit-animation-delay: 0.5s;
	animation: stepwrap 3s forwards/* infinite */;
	animation-delay: 0.5s;
}
@-webkit-keyframes stepwrap {
	0% {
		top: 170px;
		opacity: 0;
	}
	30% {
		top: 150px;
		opacity: 1;
	}
	70% {
		top: 150px;
		opacity: 1;
	}
	100% {
		top: 130px;
		opacity: 0;
		z-index: -10;
	}
}
@keyframes stepwrap {
	0% {
		top: 170px;
		opacity: 0;
	}
	30% {
		top: 150px;
		opacity: 1;
	}
	70% {
		top: 150px;
		opacity: 1;
	}
	100% {
		top: 130px;
		opacity: 0;
		z-index: -10;
	}
}

@keyframes anime2 {
	0% {
	opacity:  1;
	visibility: visible;
	}
	100% {
	opacity:  0;
	visibility: hidden;
	}
}
/* 画面外にいる状態 */
.fadein {
	opacity : 0.1;
	transform : translate(0, 50px);
	transition : all 1.5s;
}
/* 画面内に入った状態 */
.fadein.scrollin {
	opacity : 1;
	transform : translate(0, 0);
}

/* COSMIC LABO Ring
------------------------------------------------------------------ */
@media screen and (min-width: 769px) {	/* PC */
	.content-asset
	{
		width: 100%;
		margin: 0px auto;
		padding: 0px;
		text-align: center;
	}
	#model_select
	{
		width: 100%;
		margin: 50px auto;
		padding: 20px 0px;
		display: block;
		position: relative;
	}
	#ring_stacking
	{
		width: 100%;
		margin: 0px auto;
		padding: 5px 0px;
		display: block;
		position: relative;
	}
	#model_select ul
	{
		width: 940px;
		margin: 0px auto;
		padding: 0px;
/*		display: block;	*/
	}
	#model_select ul li
	{
		width: 280px;
		height: 330px;
		margin: 0px 10px 25px;
		padding: 0px;
		display: inline-block;
	}
	#model_select ul li img
	{
		width: 100%;
		height: auto;
	}
	
	#cvswrapper1 {
		width: 600px;
		height: 720px;
		display: inline-block;
		position: relative;
	}
	#canvas
	{
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	.canvas-container
	{
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	.FinalData
	{
		width: 100%;
		padding: 70px 0px;
		margin: 0px auto;
		display: block;
	}
	#FinalCanvas
	{
		width: 600px;
		height: 720px;
		padding: 0px;
		margin: 0px auto;
	}
}
@media (max-width: 768px) {	/* SP */
	.content-asset
	{
		width: 100%;
		margin: 0px auto;
		padding: 0px;
		text-align: center;
	}
	#model_select
	{
		width: 100%;
		margin: 0px auto;
		padding: 80px 0px;
		display: block;
		position: relative;
	}
	#ring_stacking
	{
		width: 100%;
		margin: 0px auto;
		padding: 50px 0px;
		display: block;
		position: relative;
	}
	#model_select ul
	{
		width: 100%;
		margin: 0px auto;
		padding: 0px;
/*		display: block;	*/
	}
	#model_select ul li
	{
		width: 42vw;
		height: auto;
		margin: 0px 3px 6px;
		padding: 0px;
		display: inline-block;
	}
	#model_select ul li img
	{
		width: 100%;
		height: auto;
	}
	
	#cvswrapper1 {
		display: none;
	}
	#cvswrapper2 {
		width: 375px;
		height: 450px;
		display: block;
		margin: 0px auto;
		position: relative;
		text-align: center;
	}
	#canvas-sp
	{
		display: block;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		width: 100%;
		height: 100%;
	}
	.canvas-container
	{
		display: block;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		width: 100%;
		height: 100%;
	}
	.FinalData
	{
		width: 100%;
		padding: 70px 0px;
		margin: 0px auto;
		display: block;
	}
	#FinalCanvas
	{
		display: none;
	}
	#FinalCanvasSP
	{
		width: 375px;
		height: 450px;
		padding: 0px;
		margin: 0px auto;
	}
}

/* ボタン周り
------------------------------------------------------------------ */
@media screen and (min-width: 769px) {	/* PC */
	.accordion button,
	.accordion input[type="image"],
	#cvswrapper1 button,
	#cvswrapper1 input[type="image"]
	{
		padding:0;
		margin:0;
		background:none;
		border:0;
		font-size:0;
		line-height:0;
		overflow:visible;
		cursor:pointer;
	}
	.accordion button img,
	.accordion input[type="image"],
	#cvswrapper1 button img,
	#cvswrapper1 input[type="image"]
	{
		padding:0;
		margin:0;
		background:none;
		border:0;
		font-size:0;
		line-height:0;
		overflow:visible;
		cursor:pointer;
	}
	#cvswrapper1 .btnreset
	{
		width: 115px;
		height: auto;
		display: block;
		position: absolute;
		bottom: 20px;
		left: 20px;
	}
	#cvswrapper1 .btns
	{
		width: 300px;
		height: auto;
		display: block;
		position: absolute;
		bottom: 20px;
		right: 20px;
	}
	#cvswrapper1 .btns ul
	{
		width: 100%;
		height: auto;
		display: block;
		font-size: 0;
	}
	#cvswrapper1 .btns ul li
	{
		width: 84px;
		height: auto;
		text-align: left;
		margin: 0px 0px 0px 5px;
		display: inline-block;
	}
	#ring_stacking .save {
		width: 980px;
		height: auto;
		margin: -71px auto 0px;
		padding: 0px;
		text-align: right;
	}
}
@media (max-width: 768px) {	/* SP */
	button {
		background-color: transparent;
		border: none;
	}
	.accordion button,
	.accordion input[type="image"]
	{
		padding:0;
		margin:0;
		background:none;
		border:0;
		font-size:0;
		line-height:0;
		overflow:visible;
		cursor:pointer;
		background-color: transparent;
	}
	.accordion button img,
	.accordion input[type="image"]
	{
		padding:0;
		margin:0;
		background:none;
		border:0;
		font-size:0;
		line-height:0;
		overflow:visible;
		cursor:pointer;
		background-color: transparent;
		width: 60px;
		height: auto;
	}
	.accordion .inner li input[type="image"]
	{
		width: 23px;
		height: auto;
	}
	.btns
	{
		width: 100%;
		height: auto;
		display: block;
		position: relative;
		bottom: 0;
		right: 0;
	}
	.btns ul
	{
		width: 100%;
		height: auto;
		display: block;
		font-size: 0;
	}
	.btns ul li
	{
		width: auto;
		height: 34px;
		text-align: left;
		margin: 7px 2px 0px 2px;
		display: inline-block;
	}
}

/* 石セレクトエリア
------------------------------------------------------------------ */
@media screen and (min-width: 769px) {	/* PC */
	.selectArea
	{
		width: 35%;
		max-width: 360px;
		height: 620px;
		overflow: scroll;
		display: inline-block;
		vertical-align:top;
		background: #fff;
		-webkit-appearance: none;
		-ms-overflow-style:none;
	}
	::-webkit-scrollbar {
		display: none;
	}
	.accordion1 {
		width: calc(100% + 17px);
		padding-right: 17px;
		overflow: auto;
		text-align: center;
	}
	ul.accordion1 {
		width: 100%;
		padding: 0px;
		margin: 0px;
		display: block;
		font-size: 0;
		overflow: scroll;
	}
	ul.accordion1 li.parent
	 {
		width : -webkit-calc(100% / 2.02) ;
		width : calc(100% / 2.02) ;
		max-width: 192px;
		height: auto;
		padding: 0px;
		margin: 0px;
		display: inline-block;
		vertical-align: top;
		background: #fff;
	}
	ul.accordion1 li.single
	 {
		width : -webkit-calc(100% / 2.02) ;
		width : calc(100% / 2.02) ;
		max-width: 192px;
		margin: 0px;
		display: inline-block;
		vertical-align: top;
		background: #fff;
	}
	ul.accordion1 li.single1,
	ul.accordion1 li.single2
	 {
		padding: 24px 0px;
	}
	ul.accordion1 li.single3,
	ul.accordion1 li.single4
	 {
		padding: 44px 0px;
	}
	ul.accordion1 li.parent:nth-child(2),
	ul.accordion1 li.parent:nth-child(3),
	ul.accordion1 li.parent:nth-child(6),
	ul.accordion1 li.single1,
	ul.accordion1 li.single4
	 {
		background: #f5f5f5;
	}
	.accordion1 .inner {
		width: 358px;
		height: auto;
		padding: 15px 10px;
		margin: 0px auto;
		font-size: 0;
		display: none;
	}
	.accordion1 .child2,
	.accordion1 .child3,
	.accordion1 .child6
	 {
		background: #f5f5f5;
	}
	.accordion1 .child2,
	.accordion1 .child4,
	.accordion1 .child6
	 {
		margin-left: -101%;
	}
	.accordion1 p{
		width: 100%;
		height: 124px;
		padding: 0px;
		margin: 0px auto;
		display: block;
		cursor: pointer;
		position: relative;
	}
	.accordion1 p img{
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
	}
	.accordion1 .inner ul {
		font-size: 0;
		display: block;
		text-align: center;
	}
	.accordion1 .inner li {
		width: 70px;
		height: auto;
		padding: 0px;
		margin: 10px 10px 10px 0px;
		display: inline-block;
		vertical-align: top;
		text-align: center;
	}
	.accordion1 .inner li .sname {
		width: 100%;
		height: auto;
		padding: 0px;
		margin: 10px 0px 0px 0px;
		display: block;
		font: 10px/1.5em "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
		color: #666;
		letter-spacing: 0;
		text-align: center;
	}
	/* アコーディオンの開閉アイコン */
	.accordion_icon,
	.accordion_icon span {
		display: inline-block;
		transition: all .4s;
		box-sizing: border-box;
	}
	.accordion_icon {
		position: absolute;
		right: 0px;
		width: 30px;
		height: 30px;
		margin-right: 5px;
	}
	.accordion_icon span {
		position: absolute;
		right: 7px;
		width: 50%;
		height: 2px;
		background-color: #c9d0d0;
		border-radius: 4px;
		-webkit-border-radius: 4px;
	}
	.accordion_icon span:nth-of-type(1) {
		top: 110px;
		transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
	}
	.accordion_icon span:nth-of-type(2) {
		top: 110px;
		transform: rotate(90deg);
		-webkit-transform: rotate(90deg);
	}
	/*＋、－切り替え*/
	.accordion_icon.active span:nth-of-type(1) {
		display:none;
	}
	.accordion_icon.active span:nth-of-type(2) {
		top: 110px;
		transform: rotate(180deg);
		-webkit-transform: rotate(180deg);
	}
}
@media (max-width: 768px) {	/* SP */
	.selectArea
	{
		width: 100%;
		height: auto;
		overflow: hidden;
		display: block;
		vertical-align:top;
		margin: 0 auto;
		text-align: center;
		background: #fff;
		-ms-overflow-style:none;
		-webkit-appearance: none;
	}
	::-webkit-scrollbar {
		display: none;
	}
	.accordion1 {
		width: 100%;
		padding-right: 0;
		overflow: auto;
		text-align: center;
	}
	ul.accordion1 {
		width: 100%;
		padding: 0px;
		margin: 0px;
		display: block;
		font-size: 0;
		overflow: scroll;
	}
	ul.accordion1 li.parent
	 {
		width : -webkit-calc(100% / 5.15) ;
		width : calc(100% / 5.15) ;
		max-width: 85px;
		height: auto;
		padding: 0px;
		margin: 0px;
		display: inline-block;
		vertical-align: top;
		background: #fff;
	}
	ul.accordion1 li.single
	 {
		width : -webkit-calc(100% / 5.15) ;
		width : calc(100% / 5.15) ;
		max-width: 85px;
		margin: 0px;
		display: inline-block;
		vertical-align: top;
		background: #fff;
	}
	ul.accordion1 li.single1,
	ul.accordion1 li.single2
	 {
		padding: 25px 0px;
	}
	ul.accordion1 li.single3,
	ul.accordion1 li.single4
	 {
		padding: 34px 0px;
	}
	ul.accordion1 li.parent:nth-child(2),
	ul.accordion1 li.parent:nth-child(4),
	ul.accordion1 li.parent:nth-child(6),
	ul.accordion1 li.single2,
	ul.accordion1 li.single4
	 {
		background: #f5f5f5;
	}
	.accordion1 .inner {
		width: 100vw;
		height: auto;
		padding: 15px 0px;
		margin: 0px auto;
		font-size: 0;
		display: none;
		text-align: center;
	}
	.accordion1 .child1,
	.accordion1 .child3,
	.accordion1 .child5
	 {
		border-bottom: 1px solid #f5f5f5;
	}
	.accordion1 .child2,
	.accordion1 .child4,
	.accordion1 .child6
	 {
		background: #f5f5f5;
		border-bottom: 1px solid #fff;
	}
	.accordion1 .child2
	 {
		margin-left: -105%;
	}
	.accordion1 .child3
	 {
		margin-left: -205%;
	}
	.accordion1 .child4
	 {
		margin-left: -310%;
	}
	.accordion1 .child5
	 {
		margin-left: -405%;
	}
	.accordion1 p{
		width: 100%;
		height: 80px;
		padding: 0px;
		margin: 0px auto;
		display: block;
		cursor: pointer;
		position: relative;
	}
	.accordion1 p img{
		width: 80%;
		height: auto;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
	}
	.accordion1 .inner ul {
		font-size: 0;
		display: block;
		text-align: center;
	}
	.accordion1 .inner li {
		width : -webkit-calc(100% / 6.45) ;
		width : calc(100% / 6.45) ;
		height: auto;
		padding: 0px;
		margin: 5px auto;
		display: inline-block;
		vertical-align: top;
		text-align: center;
	}
	.accordion1 .inner li.single img {
		width: 70px;
		height: auto;
		vertical-align: top;
		text-align: center;
	}
	.accordion1 .inner li .sname {
		width: 98%;
		height: auto;
		padding: 0px;
		margin: 10px 0px 0px 0px;
		display: block;
/*		display:  none;	*/
		font: 8px/1.125em "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
		color: #666;
		letter-spacing: 0;
		text-align: center;
	}
	/* アコーディオンの開閉アイコン */
	.accordion_icon,
	.accordion_icon span {
		display: inline-block;
		transition: all .4s;
		box-sizing: border-box;
	}
	.accordion_icon {
		position: absolute;
		right: 0px;
		width: 22px;
		height: 22px;
		margin-right: 5px;
	}
	.accordion_icon span {
		position: absolute;
		right: -2px;
		width: 50%;
		height: 2px;
		background-color: #c9d0d0;
		border-radius: 4px;
		-webkit-border-radius: 4px;
	}
	.accordion_icon span:nth-of-type(1) {
		top: 70px;
		transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
	}
	.accordion_icon span:nth-of-type(2) {
		top: 70px;
		transform: rotate(90deg);
		-webkit-transform: rotate(90deg);
	}
	/*＋、－切り替え*/
	.accordion_icon.active span:nth-of-type(1) {
		display:none;
	}
	.accordion_icon.active span:nth-of-type(2) {
		top: 70px;
		transform: rotate(180deg);
		-webkit-transform: rotate(180deg);
	}
}

/* シェアボタンエリア
------------------------------------------------------------------ */
@media screen and (min-width: 769px) {	/* PC */
	#planet-share
	{
		width: 100%;
		margin: 100px auto 0px;
		padding: 0px 0px 0px;
		overflow: hidden;
	}
	#planet-share ul
	{
		margin: 0px auto 0px;
		padding: 0px;
		list-style: none;
		font-size: 0;
		text-align: center;
	}
	#planet-share ul li
	{
		width: 50px;
		margin: 0px 30px 0px 0px;
		padding: 0px;
		display: inline-block;
	}
	#planet-share ul li a img
	{
		vertical-align: middle;
	}
	#planet-share ul li:last-child
	{
		width: 45px;
		height: 45px;
		margin: 0px 0px 0px 0px;
		padding: 0px;
		display: inline-block;
		vertical-align: middle;
	}
}
@media (max-width: 768px) {	/* SP */
	#planet-share
	{
		width: 100%;
		margin: 0px auto 0px;
		padding: 0px 0px 0px;
		overflow: hidden;
	}
	#planet-share ul
	{
		margin: 0px auto 0px;
		padding: 0px;
		list-style: none;
		font-size: 0;
		text-align: center;
	}
	#planet-share ul li
	{
		width: 50px;
		margin: 0px 30px 0px 0px;
		padding: 0px;
		display: inline-block;
	}
	#planet-share ul li a img
	{
		vertical-align: middle;
	}
	#planet-share ul li:last-child
	{
		width: 45px;
		height: 45px;
		margin: 0px 0px 0px 0px;
		padding: 0px;
		display: inline-block;
		vertical-align: middle;
	}
}