@charset "utf-8";
/* CSS Document */

/*----------------------------------------
	共通
----------------------------------------*/
body {
	font-family: toppan-bunkyu-midashi-min-st, serif;
	font-weight: 900;
	font-style: normal;
	background-color: #000;
	color: #FFF;
	width: 100%;
}
.sp-only{display: none!important;}
.sp-only2{display: none!important;}
.sp-only3{display: inline-block!important;}
.main_contents_pc{display: block!important;}
.main_contents_sp{display: none!important;}

/*----------------------------------------
	背景
----------------------------------------*/
.bg-slider_pc {background-position: center; background-repeat: no-repeat; background-attachment: fixed;}


/*----------------------------------------
	ファーストビュー
----------------------------------------*/
.fastview {position: relative; height: 95vh; }
.fastview_logo {position: absolute; top: 35px; left: 50px;}
.fastview_text {position: absolute; top: 35px; right: 50px;}
.fastview_text img {max-height: 85vh;}

/*----------------------------------------
	feature
----------------------------------------*/
.feature1,.feature2,.feature3,.feature4 {width: 100%; margin: auto; transition: background .4s ease-out;}
.feature1{height: 80vh;}
.feature2{height: 86vh;}
.feature3{height: 76vh;}
.feature4{height: 100vh;}
.feature4 img{max-width: 730px;}
.feature_contents {width: 1150px; margin: auto; position: relative;}
.feature_contents img:nth-of-type(1) {position: absolute; left: 0;}
.feature_contents img:nth-of-type(2) {position: absolute; right: 0;}

/*----------------------------------------
	動画
----------------------------------------*/
.movie {width: 100%; height: 95vh; margin-top: 70px;}
.frame {width: 1400px; margin:auto; border: 1px solid #FFF; padding: 30px;}
.frame iframe {width: 1280px; height: calc(1280px * 0.5625);}

/*----------------------------------------
	商品情報
----------------------------------------*/
.product_info {margin: 120px auto; }
.product_info img {max-width: 90%; width: 1400px;}
.product_info h2 {max-width: 90%; width: 1400px; padding-left: 15px; margin: 80px auto 40px; border-bottom: 2px solid #FFF; font-size: 30px; text-align: left; line-height: 1.4em; letter-spacing: 6px;}
.details {table-layout: fixed; max-width: 90%; width: 1400px; padding:0 15px; margin: 15px auto; text-align: left; font-size: 22px; letter-spacing: 3px;}
.details table {width: 100%; border-spacing: 0px 5px; border-collapse: separate;}
.info_01 th {width: 15%;}
.info_02 th {width: 15%; vertical-align: middle;}
.info_02 a {display: inline-block; width: 190px; margin: 7px; padding: 10px; border: 1px solid #FFF; color: #FFF; text-align: center;text-decoration: none; position: relative; transition-duration: 0.2s;}
.info_02 a:hover { background: #fff; color: #000;}
.product_info p{max-width: 90%; width: 1400px; padding:0 15px; margin: auto; text-align: left; font-size: 18px;}
.purchase_button{width: 560px; height: auto; max-width: 90%; margin: 50px auto 0; border: 1px solid #FFF; font-size: 22px; letter-spacing: 5px; line-height: 1.5em;}
.purchase_button a{display: block; color: #FFF; text-decoration: none; width: 100%; height: 100%; padding: 8%; position: relative; transition-duration: 0.2s;}
.purchase_button a:hover { background: #fff; color: #000;}
.fnt25 {font-size: 25px;}
.fnt14 {font-size: 14px;}
    



/*========================================================================================
【メディアクエリ】タブレット～ノートサイズの調整
========================================================================================*/
@media screen and (min-width: 768px) and (max-width: 1360px){
	.sp-only{display: block!important;}
	.sp-only2{display: none!important;}
	.sp-only3{display: inline-block!important;}
	.main_contents_pc{display: none!important;}
	.main_contents_sp{display: block!important;}
	
	/*----------------------------------------
		背景
	----------------------------------------*/
	/* --- 全体のBOX定義 ---------------------------------------- */
	.box {
	  position   : relative;
	  max-width  : 100%;
	  margin     : auto;
	  overflow   : hidden;
	}

	/* --- 背景の指定 ------------------------------------------- */
	.box .bgImg {
	  position   : absolute;
	  top        : 0;
	  left       : 0;
	  bottom     : 0;
	  right      : 0;
	  opacity    : 0;
	  animation  : bgAnime 24s infinite;   /* 4画像 × 各5s = 20s */
	}

	/* --- 段差で背景画像のアニメーションを実行 ----------------- */
	.box .src1 {
		background: url(/megahouse/rubikcube/commons/images/miniature-metal-rubiks/main_sp_bg1.png) no-repeat center center;   /* 背景の画像を指定 */
		content: ""; background-size: cover; display: block; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -1; transform: translateZ(0);
	}
	.box .src2 {
		background: url(/megahouse/rubikcube/commons/images/miniature-metal-rubiks/main_sp_bg2.png) no-repeat center center;   /* 背景の画像を指定 */
		content: ""; background-size: cover; display: block; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -1; transform: translateZ(0);
		animation-delay  : 6s;
	}
	.box .src3{
		background: url(/megahouse/rubikcube/commons/images/miniature-metal-rubiks/main_sp_bg3.png) no-repeat center center;   /* 背景の画像を指定 */
		content: ""; background-size: cover; display: block; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -1; transform: translateZ(0);
		animation-delay  : 12s;
	}
	.box .src4 {
		background : url(/megahouse/rubikcube/commons/images/miniature-metal-rubiks/main_sp_bg4.png) no-repeat center center;   /* 背景の画像を指定 */
		content: ""; background-size: cover; display: block; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -1; transform: translateZ(0);
		animation-delay  : 18s;
	}
	@keyframes bgAnime {
	   0% { opacity: 0; }
	   8% { opacity: 1; }
	  25% { opacity: 1; }
	  33% { opacity: 0; }
	 100% { opacity: 0; }
	}

	/*----------------------------------------
		ファーストビュー
	----------------------------------------*/
	.fastview {height: auto; min-height: 710px;}
	.fastview_logo {position: initial; max-width: 361px; width: 40%; padding: 5% 0 0 2%;}
	.fastview_logo img {width: 100%;}
	.fastview_text {max-width: 150px; width: 30%; top: 3%; right: 2%;}
	.fastview_text img {width: 60%; max-height: none; min-width: 90%;}
	
	/*----------------------------------------
		feature
	----------------------------------------*/
	.feature1,.feature2,.feature3,.feature4 {width: 95%; height: auto; margin: 8% auto; transition: background .4s ease-out; text-align: center;}
	.feature1 {margin-top: 10%;}
	.feature1 img:nth-of-type(1) {position: initial!important; display: inline-block; width: 76%;}
	.feature1 img:nth-of-type(2) {position: initial!important; display: inline-block; width: 20%; margin-left: 3%;}
	.feature2 img:nth-of-type(1) {position: initial!important; display: inline-block; width: 10%; margin-right: 3%;}
	.feature2 img:nth-of-type(2) {position: initial!important; display: inline-block; width: 86%;}
	.feature3 img:nth-of-type(1) {position: initial!important; display: inline-block; width: 86%;}
	.feature3 img:nth-of-type(2) {position: initial!important; display: inline-block; width: 10%; margin-left: 3%;}
	.feature4 img {width: 80%;}
	.feature4 p {width: 90%; margin: auto; }
	.feature_contents {width: 100%!important; margin: auto; position: initial;}
	.feature_contents img {position: initial!important; width: 100%;}
	.feature_contents p {width: 95%!important; letter-spacing: 3px; font-size: 14px; margin: 2% auto 4%;}
	
	/*----------------------------------------
		動画
	----------------------------------------*/
	.movie {width: 100%; height: auto; margin-top: 70px; padding-bottom: 10%;}
	.frame {width: 95%; margin:auto; border: 1px solid #FFF; padding: 4%;}
	.frame iframe {width: 85vw; height: calc(85vw * 0.5625);}
	
	/*----------------------------------------
		商品情報
	----------------------------------------*/
	.product_info {max-width: 100%; margin: 0; padding: 15% 0; background-color: #000;}
	.product_info h2 {margin: 7% auto 5%; font-size: 18px; }
	.product_info table {width: 100%; font-size: 14px; table-layout: fixed; padding: 0;}
	.info_01 th {width: 30%;}
	.info_02 th {width: 30%;}
	.info_02 a {display: inline-block; width: 110px; padding: 10px; border: 1px solid #FFF; color: #FFF; text-align: center;text-decoration: none;}
	.product_info p{max-width: 90%;margin: auto; text-align: left; padding:0 2em; font-size: 12px; text-indent: -1em;}
	.purchase_button{font-size: 15px; height: auto;}
	.fnt18 {font-size: 18px;}
	.fnt10 {font-size: 10px;}
}


/*========================================================================================
【メディアクエリ】スマホ～タブレットサイズの調整
========================================================================================*/
@media screen and (min-width: 320px) and (max-width: 767px){
	.sp-only{display: block!important;}
	.sp-only2{display: block!important;}
	.sp-only3{display: none!important;}
	.main_contents_pc{display: none!important;}
	.main_contents_sp{display: block!important;}
	
	/*----------------------------------------
		背景
	----------------------------------------*/
	/* --- 全体のBOX定義 ---------------------------------------- */
	.box {
	  position   : relative;
	  max-width  : 100%;
	  margin     : auto;
	  overflow   : hidden;
	}

	/* --- 背景の指定 ------------------------------------------- */
	.box .bgImg {
	  position   : absolute;
	  top        : 0;
	  left       : 0;
	  bottom     : 0;
	  right      : 0;
	  opacity    : 0;
	  animation  : bgAnime 24s infinite;   /* 4画像 × 各5s = 20s */
	}

	/* --- 段差で背景画像のアニメーションを実行 ----------------- */
	.box .src1 {
		background: url(/megahouse/rubikcube/commons/images/miniature-metal-rubiks/main_sp_bg1.png) no-repeat center center;   /* 背景の画像を指定 */
		content: ""; background-size: cover; display: block; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -1; transform: translateZ(0);
	}
	.box .src2 {
		background: url(/megahouse/rubikcube/commons/images/miniature-metal-rubiks/main_sp_bg2.png) no-repeat center center;   /* 背景の画像を指定 */
		content: ""; background-size: cover; display: block; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -1; transform: translateZ(0);
		animation-delay  : 6s;
	}
	.box .src3{
		background: url(/megahouse/rubikcube/commons/images/miniature-metal-rubiks/main_sp_bg3.png) no-repeat center center;   /* 背景の画像を指定 */
		content: ""; background-size: cover; display: block; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -1; transform: translateZ(0);
		animation-delay  : 12s;
	}
	.box .src4 {
		background : url(/megahouse/rubikcube/commons/images/miniature-metal-rubiks/main_sp_bg4.png) no-repeat center center;   /* 背景の画像を指定 */
		content: ""; background-size: cover; display: block; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -1; transform: translateZ(0);
		animation-delay  : 18s;
	}
	@keyframes bgAnime {
	   0% { opacity: 0; }
	   8% { opacity: 1; }
	  25% { opacity: 1; }
	  33% { opacity: 0; }
	 100% { opacity: 0; }
	}

	/*----------------------------------------
		ファーストビュー
	----------------------------------------*/
	.fastview {height: auto; min-height: 150vw; max-height: 710px;}
	.fastview_logo {position: initial; max-width: 361px; width: 40%; padding: 5% 0 0 2%;}
	.fastview_logo img {width: 100%;}
	.fastview_text {max-width: 150px; width: 30%; top: 3%; right: 2%;}
	.fastview_text img {width: 60%; max-height: none; min-width: 90%;}
	
	/*----------------------------------------
		feature
	----------------------------------------*/
	.feature1,.feature2,.feature3,.feature4 {width: 95%; height: auto; margin: 8% auto; transition: background .4s ease-out; text-align: center;}
	.feature1 {margin-top: 10%;}
	.feature1 img:nth-of-type(1) {position: initial!important; display: inline-block; width: 67%;}
	.feature1 img:nth-of-type(2) {position: initial!important; display: inline-block; width: 28%; margin-left: 3%;}
	.feature2 img:nth-of-type(1) {position: initial!important; display: inline-block; width: 14%; margin-right: 3%;}
	.feature2 img:nth-of-type(2) {position: initial!important; display: inline-block; width: 80%;}
	.feature3 img:nth-of-type(1) {position: initial!important; display: inline-block; width: 80%;}
	.feature3 img:nth-of-type(2) {position: initial!important; display: inline-block; width: 14%; margin-left: 3%;}
	.feature4 img {width: 90%;}
	.feature4 p {width: 90%; margin: auto; }
	.feature_contents {width: 100%!important; margin: auto; position: initial;}
	.feature_contents img {position: initial!important; width: 100%;}
	.feature_contents p {width: 95%!important; letter-spacing: 3px; font-size: 14px; margin: 2% auto 4%;}
	
	/*----------------------------------------
		動画
	----------------------------------------*/
	.movie {width: 100%; height: auto; margin-top: 70px; padding-bottom: 10%;}
	.frame {width: 95%; margin:auto; border: 1px solid #FFF; padding: 4%;}
	.frame iframe {width: 85vw; height: calc(85vw * 0.5625);}
	
	/*----------------------------------------
		商品情報
	----------------------------------------*/
	.product_info {max-width: 100%; margin: 0; padding: 15% 0; background-color: #000;}
	.product_info h2 {margin: 7% auto 5%; font-size: 18px; }
	.product_info table {width: 100%; font-size: 14px; table-layout: fixed; padding: 0;}
	.info_01 th {width: 30%;}
	.info_02 th {width: 30%;}
	.info_02 a {display: block; width: 110px; padding: 10px; border: 1px solid #FFF; color: #FFF; text-align: center;text-decoration: none; margin-left: 0;}
	.product_info p{max-width: 90%;margin: auto; text-align: left; padding:0 26px; font-size: 12px; text-indent: -1em;}
	.purchase_button{font-size: 15px; height: auto;}
	.fnt18 {font-size: 18px;}
	.fnt10 {font-size: 10px;}

}