@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 */
	#special-title {
		width: 100%;
		height: 673px;
		display: block;
		margin: 0px auto;
		padding: 0px;
		background: #fff url(../img/title.jpg) no-repeat center top;
		-webkit-background-size: auto 100%;
		background-size: auto 100%;
		position: relative;
	}
	#special-title h1 {
		padding: 30px 0px 0px;
		overflow: hidden;
		height: 0px !important;
		height /**/:30px;
		background: url(../img/h1_stackingring.png) no-repeat left top;
		-webkit-background-size: 100% auto;
		background-size: 100% auto;
		margin: 0px auto;
		width: 240px;
		display: block;
		position: absolute;
		top: 80px;
		left: 0;
		right: 0;
		opacity: 0;
		-webkit-animation: h1fade 1.5s forwards/* infinite */;
		-webkit-animation-delay: 1.0s;
		animation: h1fade 1.5s forwards/* infinite */;
		animation-delay: 1.0s;
	}
}
@media (max-width: 768px) {	/* SP */
	#special-title {
		width: 100%;
		height: 90vh;
		display: block;
		margin: 0px auto;
		padding: 0px;
		background: #3e5063 url(../img/title_sp.jpg) no-repeat center top;
		-webkit-background-size: auto 100%;
		background-size: auto 100%;
		position: relative;
	}
	#special-title h1 {
		padding: 30px 0px 0px;
		overflow: hidden;
		height: 0px !important;
		height /**/:30px;
		background: url(../img/h1_stackingring.png) no-repeat center top;
		-webkit-background-size: 100% auto;
		background-size: 100% auto;
		margin: 0px auto;
		width: 228px;
		display: block;
		position: absolute;
		top: 30px;
		left: 0;
		right: 0;
		opacity: 0;
		-webkit-animation: h1fade 1.5s forwards/* infinite */;
		-webkit-animation-delay: 0.5s;
		animation: h1fade 1.5s forwards/* infinite */;
		animation-delay: 0.5s;
	}
}
@-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;
	}
}

/* スクロール矢印 */
@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: 1.5s;
		animation: sdb 1.5s infinite;
		animation-delay: 1.5s;
		box-sizing: border-box;
	}
}
@media (max-width: 768px) {	/* SP */
	a.scroll {
		padding-top: 70px;
		z-index: 100;
	}
	a.scroll img {
		position: absolute;
		bottom: 70px;
		left: 0;
		right: 0;
		margin: auto;
		width: 100px;
		height: 60px;
		opacity: 0;
		-webkit-animation: sdb 1.5s infinite;
		-webkit-animation-delay: 2s;
		animation: sdb 1.5s infinite;
		animation-delay: 2s;
		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 */
	#stk-main #looks {
		width: 100%;
		height: auto;
		display: block;
		margin: 0px auto 70px;
		padding: 70px 0px;
		position: relative;
	}
	/* 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=90);
		opacity: 1;
	}
	.lb-outerContainer {
		margin: 10px auto 0px;
	}
	.lightbox .lb-image {
		border-radius: 0px;
		border: none;
	}
	.lightbox {
		width: 100vw;
		height: 80vh;
		overflow-x:scroll;
	}
	.lb-data .lb-caption {
		width: 740px;
		display: block;
		padding: 0px;
		margin: 10px auto;
		font-size: 12px;
		font-weight: normal;
		line-height: 2em;
		letter-spacing: 0;
	}
	.lb-data .lb-caption .attention {
		width: 100%;
		display: block;
		font-size: 10px;
		font-weight: normal;
		line-height: normal;
		letter-spacing: 0;
		color: #666;
		text-align: left;
	}
	.lb-data .lb-caption a {
		color: #4d4d4d;
	}
	.lb-data .lb-caption a {
		padding: 3px 25px 10px 0px;
		margin: 0px;
		color: #4d4d4d;
		font-size: 12px;
		font-weight: normal;
		line-height: 1.5em;
		letter-spacing: 0;
		display: block;
	}
	.lb-data .lb-details {
		width: auto;
	}
	.lb-data .lb-caption a:hover {
		opacity: 0.5;
	}

	.lb-nav a.lb-prev {
		position: absolute;
		left: -50px;
		background: url(../img/arrow_prev.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.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: 0px;
		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: #4d4d4d;
	}
}
@media (max-width: 768px) {	/* SP */
	#stk-main #looks {
		width: 100%;
		height: auto;
		display: block;
		margin: 30px auto 0px;
		padding: 100px 0px 100px;
		position: relative;
	}
	/* 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.95);
		filter: alpha(Opacity=95);
		opacity: 1;
	}
	.lb-outerContainer {
		margin: 5% auto 2%;
	}
	.lightbox .lb-image {
		border-radius: 0px;
		border: none;
	}
	.lb-data .lb-caption {
		font-size: 12px;
		font-weight: normal;
		line-height: 1.5em;
		letter-spacing: 0;
	}
	.lb-data .lb-caption .attention {
		width: 100%;
		display: block;
		font-size: 10px;
		font-weight: normal;
		line-height: normal;
		letter-spacing: 0;
		color: #666;
		text-align: left;
	}
	.lb-data .lb-caption a {
		padding: 3px 25px 10px 0px;
		margin: 0px;
		color: #4d4d4d;
		font-size: 12px;
		font-weight: normal;
		line-height: 1.5em;
		letter-spacing: 0;
		display: block;
	}
	.lb-data .lb-details {
		width: auto;
	}

	.lb-nav a.lb-prev {
		position: absolute;
		left: -10px;
		background: url(../img/arrow_prev.png) left 49% no-repeat;
		-webkit-background-size: 20px auto;
		background-size: 20px 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.png) right 49% no-repeat;
		-webkit-background-size: 20px auto;
		background-size: 20px 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: #4d4d4d;
	}
}

/* ページ遷移のフェードインフェードアウト
------------------------------------------------------------------ */
.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: 520px;
		height: auto;
		display: block;
		position: absolute;
		top: 80px;
		left: 0;
		right: 0;
		margin: auto;
		padding: 50px 0px;
		background: rgba(255,255,255,0.85);
		opacity: 0;
	}
	.box2 {
		z-index: 999;
		width: 520px;
		height: auto;
		display: block;
		position: absolute;
		top: 110px;
		left: 0;
		right: 0;
		margin: auto;
		padding: 30px 0px;
		background: rgba(255,255,255,0.85);
		opacity: 0;
	}
	.box img,
	.box2 img {
		width: 150px;
		height: auto;
		padding: 0px;
	}
	.box2 img.obj {
		width: 200px;
		height: auto;
		padding: 20px 0px 0px;
	}
	.box p {
		width: 100%;
		height: auto;
		display: block;
		margin: 0px auto;
		padding: 30px 0px 10px;
		font: 16px/28px "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
		color: #666;
	}
	.box2 p {
		width: 100%;
		height: auto;
		display: block;
		margin: 0px auto;
		padding: 30px 0px 10px;
		font: 16px/28px "ヒラギノ角ゴ 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: 30px 0px;
		background: rgba(252,252,252,0.85);
		opacity: 0;
	}
	.box img:not(.closebtn) {
		width: 85px;
		height: auto;
	}
	.box2 {
		z-index: 999;
		width: 90%;
		height: auto;
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		margin: auto;
		padding: 30px 0px;
		background: rgba(252,252,252,0.85);
		opacity: 0;
	}
	.box2 img:not(.closebtn) {
		width: 85px;
		height: auto;
	}
	.box2 img.obj {
		width: 160px;
		height: auto;
		padding: 20px 0px 0px;
	}
	.box p,
	.box2 p {
		width: 100%;
		height: auto;
		display: block;
		margin: 0px auto;
		padding: 10px 0px;
		font: 14px/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: stepwrap2 5s forwards/* infinite */;
	-webkit-animation-delay: 0.8s;
	animation: stepwrap2 5s forwards/* infinite */;
	animation-delay: 0.8s;
}
@-webkit-keyframes stepwrap {
	0% {
		top: 170px;
		opacity: 0;
	}
	20% {
		top: 150px;
		opacity: 1;
	}
	80% {
		top: 150px;
		opacity: 1;
	}
	100% {
		top: 130px;
		opacity: 0;
		z-index: -10;
	}
}
@keyframes stepwrap {
	0% {
		top: 170px;
		opacity: 0;
	}
	20% {
		top: 150px;
		opacity: 1;
	}
	80% {
		top: 150px;
		opacity: 1;
	}
	100% {
		top: 130px;
		opacity: 0;
		z-index: -10;
	}
}
@-webkit-keyframes stepwrap2 {
	0% {
		top: 120px;
		opacity: 0;
	}
	10% {
		top: 80px;
		opacity: 1;
	}
	80% {
		top: 80px;
		opacity: 1;
	}
	100% {
		top: 50px;
		opacity: 0;
		z-index: -10;
	}
}
@keyframes stepwrap2 {
	0% {
		top: 120px;
		opacity: 0;
	}
	10% {
		top: 80px;
		opacity: 1;
	}
	80% {
		top: 80px;
		opacity: 1;
	}
	100% {
		top: 50px;
		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);
}

/* Stacking 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;
		font-size: 0;
	}
	#model_select ul li
	{
		width: 280px;
		height: auto;
		margin: 0px 10px 20px;
		padding: 0px;
		display: inline-block;
	}
	#model_select button
	{
		background-color: transparent;
	}
	#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 0px;
		padding: 60px 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;
		font-size: 0;
	}
	#model_select ul li
	{
		width: 42vw;
		height: auto;
		margin: 0px 3px 6px;
		padding: 0px;
		display: inline-block;
	}
	#model_select button
	{
		background-color: transparent;
	}
	#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: 30px 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: 175px;
		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: 52px;
		height: auto;
		text-align: left;
		margin: 0px 0px 0px 5px;
		display: inline-block;
	}
	#ring_stacking .save {
		width: 100%;
		height: 48px;
		margin: 0px auto;
		padding: 0px 0px 0px;
		text-align: right;
		display: block;
		position: relative;
	}
	#ring_stacking .save .savebtn
	{
		width: 344px;
		height: 48px;
		position: absolute;
		top: 140px;
		right: 8px;
	}
}
@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: 100vw;
		height: auto;
		display: block;
		position: relative;
		bottom: 0;
		right: 0;
	}
	.btns ul
	{
		width: 100vw;
		height: auto;
		display: block;
		font-size: 0;
		margin: 0px auto;
		padding: 0px;
	}
	.btns ul li
	{
		width: auto;
		height: 34px;
		text-align: left;
		margin: 7px 2px 0px 0px;
		padding: 0px;
		display: inline-block;
	}
}

/* 石セレクトエリア
------------------------------------------------------------------ */
@media screen and (min-width: 769px) {	/* PC */
	.selectArea
	{
		width: 35%;
		max-width: 360px;
		height: 665px;
		display: inline-block;
		vertical-align:top;
		background: #fff;
	}
}
@media (max-width: 768px) {	/* SP */
	.selectArea
	{
		width: 100vw;
		height: auto;
		overflow: hidden;
		display: block;
		vertical-align:top;
		margin: 2px auto 0px;
		padding: 0px;
		text-align: center;
		background: #fff;
	}
}

/* mixItUp 並び替え エリア（jquery.mixitup.min.js）
------------------------------------------------------------*/
@media screen and (min-width: 769px) {	/* PC */
	#FilterArea {
		width: 100%;
		height: 70px;
		margin: 0px auto;
		padding: 0px;
		text-align: center;
		display: block;
	}
	#FilterArea ul.group {
		width: 100%;
		display: block;
		margin: 0px auto;
		padding: 0px 0px 13px;
		list-style-type: none;
		font-size: 0; /* 追加 */
		text-align: center;
	}
	#FilterArea ul.group li {
		width : 33.33333% ; /* 未対応ブラウザ用フォールバック */
		width : -webkit-calc(100% / 3.2) ;
		width : calc(100% / 3.2) ;
		height: auto;
		margin: 0 auto 1px;
		padding: 0px;
		display:inline-block;
		background: #1a1a1a;
	}
	#FilterArea ul.group li.active {
		background: #555;
	}
	#FilterArea ul.group li a {
		width: 100%;
		height: auto;
		margin: 0px auto;
		padding: 12px 0px 25px;
		display:block;
		font: 12px/1.25em "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
		letter-spacing: 0.05em;
		color: #fff;
		position: relative;
	}
	#FilterArea ul.group li a span {
		width: 0;
		height: 0;
		border-left: 7px solid transparent;
		border-right: 7px solid transparent;
		border-top: 7px solid #fff;
		position:absolute;
		bottom: 10px;
		left: 0;
		right: 0;
		margin: auto;
	}
}
@media (max-width: 768px) {	/* SP */
	#FilterArea {
		width: 100%;
		height: auto;
		margin: 0px auto;
		padding: 0px;
		text-align: center;
		display: block;
	}
	#FilterArea ul.group {
		width: 100%;
		display: block;
		margin: 0px auto;
		padding: 0px;
		list-style-type: none;
		font-size: 0; /* 追加 */
		text-align: center;
	}
	#FilterArea ul.group li {
		width : 33.33333% ; /* 未対応ブラウザ用フォールバック */
		width : -webkit-calc(100% / 3.08) ;
		width : calc(100% / 3.08) ;
		height: auto;
		margin: 0px 1px 1px 0px;
		padding: 0px;
		display:inline-block;
		background: #1a1a1a;
	}
	#FilterArea ul.group li.active {
		background: #555;
	}
	#FilterArea ul.group li a {
		width: auto;
		height: auto;
		margin: 0px auto;
		padding: 10px 10px 10px 0px;
		display:block;
		font: 8px/1.125em "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
		letter-spacing: 0.05em;
		color: #fff;
		position: relative;
	}
	#FilterArea ul.group li a span {
		width: 0;
		height: 0;
		border-left: 5px solid transparent;
		border-right: 5px solid transparent;
		border-top: 5px solid #fff;
		position:absolute;
		top: 0;
		bottom: 0;
		right: 8px;
		margin: auto;
	}
}

/* 画像部分
------------------------------------------------------------*/
@media screen and (min-width: 769px) {	/* PC */
	#FilterBody {
		width: 95%;
		max-width: 100%;
		height: 540px;
		overflow: scroll;
		margin: 0px auto;
		padding: 0px;
		font-size: 0; /* 追加 */
		position: relative;
		text-align: center;
		-webkit-appearance: none;
		-ms-overflow-style:none;
	}
	::-webkit-scrollbar {
		display: none;
	}
	
	#FilterBody ul {
		width: 100%;
		max-width: 100%;
		margin: 0px auto 0px;
		padding: 0px 0px 100px;
		list-style-type: none;
		font-size: 0; /* 追加 */
		text-align: center;
	}
	
	#FilterBody ul li {
		width : 49% ; /* 未対応ブラウザ用フォールバック */
		width : -webkit-calc(100% / 2.1) ;
		width : calc(100% / 2.1) ;
		height: 130px;
		margin: 0px auto;
		padding: 0px;
		display:inline-block;
		text-align: center;
	}
	
	#FilterBody ul li .pic {
		width: 100%;
		height: 100px;
		padding: 0px;
		margin: auto;
		display: block;
		text-align: center;
		position: relative;
	}
	#FilterBody ul li .pic img {
		width: 100px;
		height: auto;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
	}
	#FilterBody ul li .pic input {
		width: 100px;
		height: auto;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
	}
	
	#FilterBody ul li .pic img.large {
		width: 73px;
		height: auto;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
	}
	
	#FilterBody ul li .pic.large input {
		width: 73px;
		height: auto;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
	}
	
	#FilterBody ul li .pic img.small {
		width: 85px;
		height: auto;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
	}
	
	#FilterBody ul li .pic.small input {
		width: 85px;
		height: auto;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
	}
	
	#FilterBody ul li .link {
		width: 45px;
		height: 23px;
		margin: 0px auto;
		padding: 4px 0px 0px;
		display:inline-block;
		vertical-align: top;
		text-align: center;
		-webkit-border-top-left-radius: 3px;
		-webkit-border-bottom-left-radius: 3px;
		-moz-border-radius-topleft: 3px;
		-moz-border-radius-bottomleft: 3px;
		border-top: 1px solid #c8cfcf;
		border-left: 1px solid #c8cfcf;
		border-bottom: 1px solid #c8cfcf;
		transition-property: all;
		transition: 0.2s linear;
	}
	#FilterBody ul li .link a {
		width: 100%;
		height: auto;
		display:block;
	}
	#FilterBody ul li .link a img {
		width: 10px;
		height: 13px;
	}

	#FilterBody ul li .layout {
		width: 45px;
		height: 23px;
		margin: 0px auto;
		padding: 0px;
		display:inline-block;
		vertical-align: top;
		text-align: center;
		-webkit-border-top-right-radius: 3px;
		-webkit-border-bottom-right-radius: 3px;
		-moz-border-radius-topright: 3px;
		-moz-border-radius-bottomright: 3px;
		border: 1px solid #c8cfcf;
		transition-property: all;
		transition: 0.2s linear;
	}
	#FilterBody ul li .layout input {
		width: 44px;
		height: 23px;
		margin: 0px auto;
		padding: 4px 16px 6px;
	}

	#FilterBody ul li .link:hover,
	#FilterBody ul li .layout:hover {
		background: rgba(200,207,207,0.5);
	}
	#FilterBody .mix {
		display: none;
	}
}
@media (max-width: 768px) {	/* SP */
	#FilterBody {
		max-width: 100%;
		height: 90px;
		overflow: hidden;
		margin: 0px auto;
		padding: 0px;
		position: relative;
		text-align: center;
	}
	#FilterBody ul {
		display: flex;
		margin: 0 auto;
		max-width: 10000px;
		width: 100%;
		overflow-x: scroll;
		-webkit-overflow-scrolling: touch;
		overflow-scrolling: touch;
		font-size: 0;
	}
	#FilterBody ul li {
		flex: 0 0 90px;
		height: 90px;
		margin: 0px auto;
		padding: 0px;
		text-align: center;
		overflow-y: hidden;
	}
	
	#FilterBody ul li .pic {
		width: 100%;
		height: 60px;
		padding: 0px;
		margin: 0px auto;
		display:inline-block;
		text-align: center;
		position: relative;
	}
	
	#FilterBody ul li .pic img {
		width: 75px;
		height: auto;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
	}
	
	#FilterBody ul li .pic input {
		width: 75px;
		height: auto;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
	}
	
	#FilterBody ul li .pic img.large {
		width: 46px;
		height: auto;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
	}
	
	#FilterBody ul li .pic.large input {
		width: 46px;
		height: auto;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
	}
	
	#FilterBody ul li .pic img.small {
		width: 63px;
		height: auto;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
	}
	
	#FilterBody ul li .pic.small input {
		width: 63px;
		height: auto;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
	}
	
	#FilterBody ul li .link {
		width: 40px;
		height: 30px;
		margin: 0px auto;
		padding: 6px 0px 0px;
		display:inline-block;
		vertical-align: top;
		text-align: center;
		-webkit-border-top-left-radius: 3px;
		-webkit-border-bottom-left-radius: 3px;
		-moz-border-radius-topleft: 3px;
		-moz-border-radius-bottomleft: 3px;
		border-top: 1px solid #c8cfcf;
		border-left: 1px solid #c8cfcf;
		border-bottom: 1px solid #c8cfcf;
	}
	#FilterBody ul li .link a {
		width: 100%;
		height: auto;
		display:block;
	}
	#FilterBody ul li .link a img {
		width: 10px;
		height: 13px;
	}
	
	#FilterBody ul li .layout {
		width: 40px;
		height: 30px;
		margin: 0px auto;
		padding: 0px;
		display:inline-block;
		vertical-align: top;
		text-align: center;
		-webkit-border-top-right-radius: 3px;
		-webkit-border-bottom-right-radius: 3px;
		-moz-border-radius-topright: 3px;
		-moz-border-radius-bottomright: 3px;
		border: 1px solid #c8cfcf;
	}
	#FilterBody ul li .layout input {
		width: 40px;
		height: 30px;
		margin: 0px auto;
		padding: 7px 14px 10px;
	}

	#FilterBody　img {
		-webkit-backface-visibility: hidden;
	}

	#FilterBody .mix {
		display: none;
	}
}




@media (max-width: 768px) {	/* SP */
}

/* シェアボタンエリア
------------------------------------------------------------------ */
@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;
	}
}