@charset'utf-8';

/*==============================
	common
==============================*/

#sale h1 img { width:100%; }

#sale a { position:relative; padding-right:.2em; color:var(--link); }
#sale a svg { stroke:var(--link); }

#sale p.info { text-align:right; font-size:1.2em; color:rgba(209,41,6,1); }

@media screen and (max-width:768px) {
#sale { font-size:1em; }
}

@media screen and (max-width:425px) {
#sale p.info { text-align:center; }
}

/*==============================
	sale-box
==============================*/
.sale-box { width:calc(100% - 2em); max-width:45em; margin:auto; padding:2em; background:#fcfcfc; border:1px solid; box-shadow:.2em .2em .2em rgba(0,0,0,.1); }
.sale-box.bg-none { padding:0; background:none; border:none; box-shadow:none; }
.sale-box:nth-of-type(n+2) { margin-top:2em; }
.sale-box h2 { margin-bottom:1.2em; padding-bottom:.6em; text-align:center; font-size:1.16em; line-height:1.4em; border-bottom:1px dashed; }
.sale-box h2 + .sub-ttl { margin-bottom:1.2em; text-align:center; }
.sale-box h2 + .sub-ttl span { padding:.4em 1em; background:#f3f3f3; }

.sale-box > p { line-height:1.6em; margin-bottom:2em; }

.sale-box .sale-code { max-width:12em; margin:.2em auto 1em; text-align:center; font-size:2.2em; }
.sale-box .sale-code input { display:block; height:0; border:none; opacity:0; cursor:default; }
.sale-box .sale-code button { display:block; width:100%; padding:.6em; letter-spacing:1px; background:#fff; cursor:pointer; border:.6em solid #f3f3f3; }
.sale-box .sale-code p { margin-top:.6em; text-align:right; font-size:14px; color:rgba(209,41,6,1); }
.sale-box p.info { margin-top:1em; }

/*thankssalecolor*/
.sale-box.thankssale .sale-code button { color:rgba(184,37,42,1); border-color:rgba(184,37,42,1); }

@media screen and (max-width:768px) {
.sale-box { padding:1.6em; }
}

@media screen and (max-width:425px) {
.sale-box h2 { font-size:1.06em; }
.sale-box .sale-code button { border-width:.6em; }
}

/*==============================
	 sale2403
==============================*/
#sale.sale2403 { padding:0 0 1em; background:rgba(255,255,255,1); }
#sale.sale2403 + footer { margin-top:.2em; }

#sale.sale2403 h1.ttl { width:calc(100% - 2em); max-width:36em; margin:0 auto .4em; line-height:1.6em; padding-top:1.6em; text-align:center; font-weight: bold; font-size:1.2em; color:#fa1f1d; }
#sale.sale2403 h1 { text-align:center; margin:auto; }

@media screen and (min-width: 769px) {
#sale.sale2403 h1.ttl {
    font-size: 1.4em;}
}


@media screen and (min-width:769px) {
#sale.sale2403 h1 img { width:80%; object-fit:cover; font-family:'object-fit:cover;'; }
}


/*==============================
	sale2403 entry
==============================*/
#sale.sale2403 #entry dl { width:calc(100% - 2em); max-width:56em; margin:auto; }
#sale.sale2403 #entry dt { position:relative; padding:.8em .8em .8em .8em; text-align:center; font-weight:600; color:#fa1f1d; border-bottom:1px solid #fa1f1d; cursor:pointer; }
#sale.sale2403 #entry dd { padding:1em; background:#ffffff; transition:.4s; }
#sale.sale2403 #entry dd p { color:#3a3a3a; }
#sale.sale2403 #entry dd p b { color:#fa1f1d; }
#sale.sale2403 #entry dd p + p { margin-top:.8em; }
#sale.sale2403 #entry dd a { text-decoration:underline; color:var(--link); }

#sale.sale2403 #entry dd img { margin-top: 2em; }

#sale.sale2403 #entry dd div.more-btn { margin-top:4em; margin-bottom:1.4em; }
#sale.sale2403 #entry dd div.more-btn a{
  display: flex;
  justify-content: center;
  margin: 0 auto;	
  align-items: center;
  width: calc(100% - 4em);
  max-width:300px ;
  height: 50px;
  position: relative;
  border-radius: 30px;
  box-sizing: border-box;
  padding: 0 25px 0 ;
  color: #ffffff;
  font-weight:600;
  background:#fa1f1d;
  font-size: 16px;
  letter-spacing: 0.1em;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  transition-duration: 0.3s;
}

@media screen and (min-width:769px){
#sale.sale2403 #entry dd div.more-btn a{ font-size:1.4em; max-width:360px; }
}	

@media screen and (min-width:769px){
#sale.sale2403 #entry dt { font-size:1.4em; }	
#sale.sale2403 #entry dd p { font-size:1.2em; }
}

@media screen and (min-width:769px){	
#sale.sale2403 #entry dd img { height:500px; display:block; margin:auto; margin-top: 2em; }
}

/*==============================
	sale2403 info
==============================*/
#sale.sale2403 #info dl { width:calc(100% - 2em); max-width:56em; margin:auto; }
#sale.sale2403 #info dt { position:relative; padding:.8em .8em .8em .8em; text-align:center; font-weight:600; color:#fa1f1d; border-bottom:1px solid #fa1f1d; cursor:pointer; }
#sale.sale2403 #info dt:after {
	position:absolute;
	top:calc(50% - 2px);
	right:.8em;
	content:'';
	display:block;
	width:.6em;
	height:.6em;
	border-right:1px solid #fa1f1d;
	border-bottom:1px solid #fa1f1d;
	transform:translate(-25%,-50%) rotate(43deg);
	transition:.4s;
}
#sale.sale2403 #info dt.open:after { transform:rotate(224deg); }
#sale.sale2403 #info dt:before { position:relative; top:.08em; margin-right:.4em; font-size:1.4em; }
#sale.sale2403 #info dd { padding:1em; background:#ffffff; transition:.4s; }
#sale.sale2403 #info dt:not(.open) + dd { height:0; padding:0 1em; opacity:0; }
#sale.sale2403 #info dt.open + dd { margin-bottom:.4em; }
#sale.sale2403 #info dd:before { display:block; margin-bottom:.2em; font-size:1.4em; }
#sale.sale2403 #info dd p { color:#3a3a3a; }
#sale.sale2403 #info dd p + p { margin-top:.8em; }
#sale.sale2403 #info dd a { text-decoration:underline; color:var(--link); }

@media screen and (min-width:769px){
#sale.sale2403 #info dt { font-size:1.4em; }	
#sale.sale2403 #info dd p { font-size:1.2em; }	
}

