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

#blackfriday{
	color: #fff;
	padding:0;
	background-color: #000;
	position: relative;
}
[class^="twinkle-"],
[class^="deco-"]{
	position: absolute;
	z-index: 1;
	margin: 0;
    padding: 0;
}
[class^="twinkle-L"]{background: url(../img/bg-L.png) no-repeat 0 0;}
[class^="twinkle-R"]{background: url(../img/bg-R.png) no-repeat 0 0;}
[class^="deco-"]{background: url(../img/bg.png) no-repeat 0 0;}
.twinkle-L {
    width: 50%;
    height: 30%;
    background-size: auto 50%;
    bottom: 39%;
    left: -16%;
}
.twinkle-R {
    width: 50%;
    height: 30%;
    background-size: auto 50%;
    bottom: 0;
    right: 0;
}
.deco-L2 {
    width: 50%;
    height: 30%;
    background-size: auto 40%;
    bottom: 40%;
    left: -32%;
}
.deco-R2 {
    width: 15%;
    height: 30%;
    background-size: auto 40%;
    bottom: 49%;
    right: 0;
}
.twinkle-L3 {
    width: 50%;
    height: 30%;
    background-size: auto 54%;
    top: 60%;
    left: -19%;
}
.twinkle-R3 {
    width: 50%;
    height: 30%;
    background-size: auto 54%;
    top: 8%;
    right: 0;
}
.deco-L4 {
    width: 50%;
    height: 30%;
    background-size: auto 42%;
    bottom: -18%;
    left: -34%;
}
.deco-R4 {
    width: 41%;
    height: 30%;
    background-size: auto 47%;
    bottom: 19%;
    right: -18%;
}
.deco-L5 {
    width: 50%;
    height: 30%;
    background-size: auto 42%;
    bottom: 18%;
    left: -34%;
}
.deco-R5 {
    width: 41%;
    height: 30%;
    background-size: auto 47%;
    bottom: -18%;
    right: -18%;
}
.twinkle-L6 {
    width: 50%;
    height: 30%;
    background-size: auto 54%;
    top: 0;
    left: -19%;
}
.twinkle-L7 {
    width: 50%;
    height: 30%;
    background-size: auto 54%;
    bottom: 0;
    left: -19%;
}
#blackfriday .container{width: 100%;}
#blackfriday img {width: 100%;}
#blackfriday a   {color: #f8f8f8;text-decoration: none;}
#blackfriday a:hover {text-decoration: none; opacity: 0.8;}

#blackfriday .pc {display: none;}
#blackfriday .sp {display: inherit;}

#blackfriday h1{
	font-size: 1rem; line-height: 1.6; border-bottom: none;
	letter-spacing: 1px; text-align: center; margin-bottom: 0;
}
#blackfriday h2{
	font-size: 2rem; color:#D7AE5E !important;
	line-height: 1.4; margin-bottom: 1em;
	letter-spacing: 1px; text-align: center;
}
#blackfriday .price{font-size: 1rem;color: #f00;}
#blackfriday .price strong.point{/* color: #009CDE; */}
#blackfriday  .price strong{font-size: 1.6rem; color: #F53131;}
/*#blackfriday p{font-size: .9rem; line-height: 1.6; margin-bottom: 5%;}*/
#blackfriday .tx-center{text-align: center;}
#blackfriday .tx-blue  {color: #74afe1;}
#blackfriday .tx-gold  {color: #D7AE5E;}
#blackfriday .copyright{font-size: 10px; text-align: right;}

#blackfriday .inner {
	width: 90%; margin: 0 auto; padding: 2% 0;
	overflow: hidden; clear: both;
	max-width: 1200px;
}
#blackfriday .btn-area{padding-bottom: 5%;}
#blackfriday .btn-area h3 {
              font-size: 1.3rem;
              font-weight: bold;
              text-align: center;
              color: #d8ae5f;
              }
#blackfriday .btn{
	width: 80%; margin: 0 auto; padding: 2% 0;
	display: block;
	text-align: center; font-weight: bold;
	border-radius: 2rem;
	font-size: 1.2rem; color: #fff;
	background-color:#D7AE5E;
}
#blackfriday .btn.close{color: #fad35c; background-color:#6c6c6c;}

#blackfriday .col4{
    width:100%; margin:0 auto; padding: 0;
	display: flex; flex-wrap: wrap;
	justify-content: space-between;
	z-index: 10; position: relative;
}
#blackfriday .col4 .box{width: calc(95% / 2); margin-bottom: 5%; text-align: center;}
#blackfriday .col4 .box img{margin-bottom: .5rem;}
#blackfriday .title{font-size: 1rem; margin:0 auto 1rem;}
#blackfriday .title span{display: block; font-size: 90%; font-weight: bold;}

#blackfriday .KV {margin:0 auto 1rem; padding: 0; z-index: 2; position: inherit;}
#blackfriday .subtext {text-align: left; color: #fff; margin-bottom: 5%;}
#blackfriday .subtext strong {color:#FAFEC1; background-color: #5D9DDA;}
#blackfriday .subtext .note{font-size: 80%;}



/* ------------------------------------------------------------------------------------------------ PC */
@media screen and (min-width: 1200px) {

	#blackfriday .sp{display: none;}
	#blackfriday .pc{display: inherit;}
	
	#blackfriday h1{font-size: 1.6rem; padding: 0;}
	#blackfriday p {font-size: 1.2rem;margin-bottom: 5%;}	
	#blackfriday .btn{
	width: 30%; padding: 1rem 0;
	font-size: 1.2rem; border-radius: 3.4rem;
	}

	#blackfriday .col4{width: 80%;}
    #blackfriday .col4 .box {width: calc(85%/3);margin: 0 1% 5%;}
	#blackfriday .col4 .box img{margin-bottom: 1rem;}
	#blackfriday .btn-area h3 {font-size: 2rem;}
	
	#blackfriday .KV {margin-bottom: 1rem;}
	#blackfriday .subtext {text-align: center;}
	
.twinkle-L {
    width: 30%;
    height: 30%;
    background-size: auto 100%;
    bottom: 30%;
    left: -10%;
}
.twinkle-R {
    width: 30%;
    height: 30%;
    background-size: auto 100%;
    bottom: 0;
    right: 0;
}
.deco-L2 {
    width: 25%;
    height: 30%;
    background-size: auto 60%;
    bottom: 18%;
    left: -10%;
}
.deco-R2 {
    width: 15%;
    height: 30%;
    background-size: auto 60%;
    bottom: 8%;
    right: 0;
}
.twinkle-L3 {
    width: 25%;
    height: 30%;
    background-size: auto 100%;
    top: -10%;
    left: -10%;
	transform: rotate(0);
}
.twinkle-R3 {
    width: 29%;
    height: 30%;
    background-size: auto 100%;
    top: 8%;
    right: 0;
}
.deco-L4 {
    width: 23%;
    height: 30%;
    background-size: auto 60%;
    bottom: -6%;
    left: -16%;
	transform: rotate(90deg);
}
.deco-L5,.deco-R4,.deco-R5,.twinkle-L6,.twinkle-L7{display: none;}
}