@charset "UTF-8";
/* 404 創業祭 */
.close{color: red; text-align: center; font-weight: 500; background-color: #FAE0E0; padding: 10px;}
.column_bg{background-color: #f7eeee !important;border-radius: 30px !important;padding: 30px 30px 0 30px !important;}

.bg404{background-size: contain;background-repeat: repeat;padding:30px 0 50px 0;background-image: url("../../../../../images/pages/f-static/campaign/404/404_bg_img.png");background-color: #e44936;margin: auto;z-index: 0;position: relative;}
.bg404 .bg{background-image: url("../../../../../images/pages/f-static/campaign/404/404_bg_menu.png");background-color: #e3c463; height: 60px;width: 100%; position: absolute; bottom: 0px;z-index: 0; background-repeat: repeat;background-size: 60%;}
.bg404_pb{padding-bottom: 390px !important;}

.hdr404{width: 1260px;margin: auto;text-align: center;position: relative;}
.hdr404 .ttl{width: 1100px;}

.hdr404_menu ul{display: flex; }
.hdr404_menu ul>li{display: flex;align-items:stretch;}
.hdr404_menu li{ width:calc(100%/3);flex-direction: column ;margin-right: 35px;　}
.hdr404_menu li:nth-child(3n) {margin-right: 0px !important;}
.hdr404_menu img{width: 100%;}	


.con404{border: 4px solid #f7eeee;border-radius: 30px;position: relative;padding:80px 50px 1px 50px;}

.con404 .icon_43th{position: absolute;left: 50%;transform: translate(-50%, -50%);top: -0px;width: 150px;}
.con404 .icon_43th_ribon{position: absolute;left: 50%;transform: translate(-50%, -50%);top: -0px;width: 200px;}
.con404 .icon_fg_l{position: absolute;top: -30px; left: -30px;width: 250px;}
.con404 .icon_fg_r{position: absolute;top:-30px;right: -30px;width: 250px;}

.con404 .con_in{width: 80%;margin: auto;}
.con404 .h_sub{letter-spacing: 0.1em;color: #ffffff;font-weight: bold;font-size: 1.3rem;position: relative; display: table;margin: 0 auto;padding: 0 40px;padding: 0 40px; }
.con404 .h_sub::before,
.con404 .h_sub::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 24px;
  height: 24px;
  background-size: contain;
  background-repeat: no-repeat;
  transform: translateY(-50%);
}
.con404 .only{text-align: center;z-index: 2;}
.con404 .only img{width: 200px;}

.con404 .h_sub::before {
  left: 0;
  background-image: url("../../../../../images/pages/f-static/campaign/404/404_icon_l.png");
}

.con404 .h_sub::after {
  right: 0;
  background-image: url("../../../../../images/pages/f-static/campaign/404/404_icon_r.png");
}


.con404 h2{border-bottom: none;padding-bottom: 0; margin-bottom: 20px;font-weight: bold;color: #f6ff96; text-align: center; font-size: 2.2rem; }

.con404 .con_in ul{display: flex;margin-bottom: 30px;}
.con404 .con_in li{width: 47%;margin: auto; position: relative;}
.con404 .con_in li img{width: 100%;}

.con404 .con_in .c_img{width: 600px;}

.con404 .att_box{width: 80%;margin: auto; color: #ffffff;font-weight: bold;}
.con404 .att_ttl{padding: 5px 30px;border-bottom: 2px solid;margin-bottom: 10px;font-size: clamp(1rem, 1.1vw, 1.3rem); letter-spacing: 0.1em;}
.con404 .att {padding: 0 30px;font-size: 0.75rem;}
.con404 .att ul{  list-style: none;margin:0;padding: 0;}
.con404 .att li{  text-indent:-1em;margin-bottom: 5px;}

.con404 .icon01{border: 1px solid #438dad;background-color: #ffffff; color: #438dad;padding: 5px 20px;font-size: 18px;}
.con404 .icon02{background: #438dad;color: #ffffff;padding: 5px 20px;font-size: 18px;}
.con404 .in404{width: 85%;margin:0 auto 50px auto;justify-content: center; align-items: center;}

.con404 .lottery{width: 75%;margin:0 auto 50px auto;}
.con404 .lottery ul{display: flex; margin-top: 50px;}
.con404 .lottery ul>li{display: flex;align-items:stretch;}
.con404 .lottery li{ width:calc(100%/3);flex-direction:column;margin-right: 50px;　}
.con404 .lottery li:nth-child(3n) {margin-right: 0px !important;}
.con404 .lottery img{width: 100%; height: auto;}

.con404 .read{text-align: center;letter-spacing: 0.1em;font-size: 20px;margin: 0 0 50px 0; }

.campaign-img-list__img img{width: 100%;height: auto;}
.campaign-img-list__img .img_ttl{font-size: 17px;color: #a05a5a; font-weight: bold;}	
/*.campaign-img-list__txt {padding: 10px 0 10px;}
.campaign-img-list__txt .ttl { margin-bottom: 10px; font-size: 18px; font-weight: 700;}
.campaign-img-list__txt .txt {font-size: 15px;line-height: 2; }*/

hr{border-top: #cccccc dotted 2px;margin-bottom: 50px;}

.bnr__link a{
}
.bnr__link a:hover {
}

.pre-sale .purchase-btn{width: 80%;margin: auto;letter-spacing: 0.1em;}
.pre-sale .prdct{}
.pre-sale .txt{}	

/*サイズ・位置調節*/

.red404{color: #d9371a;}
.blue404{color: #438dad;}
.ls-01{letter-spacing: 0.1em;}
.f60px{font-size: 60px;}

.ctrt{ text-align: center; }
.ctrm{ margin: auto;}
.ctr{text-align: center!important;}
.w80{width: 80%;}
.w90{width: 90%;}
.w100{width: 100%;}

.yline{background:linear-gradient(transparent 60%, #ff6 60%);}


/*　クーポンコード　コピーエリア　*/
.code{position: absolute;bottom: 100px; left: 250px;font-size: 1.3rem;font-weight: bold;color: #663333;}

.copy-area {
  margin-bottom: 24px;
  position: relative;		
}

.copy-btn {
position: absolute;	
bottom: 40px;left: 120px;	
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  background: #333;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.copy-btn:hover {
  opacity: 0.8;
}

.copy-message {
  position: absolute;
  top: -25px;
  left: 220px;/**/
  padding:  8px 16px;
  border-radius: 8px;
  /*background: #ffffff;*/
  color: #00000;
  font-size: 14px;
	font-weight: bold;
  /*transform: translate(-50%, -50%);*/
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 9999;
}

.copy-message.show {
  visibility: visible;
  animation: fadeToast 1.6s ease forwards;
}

@keyframes fadeToast {
  0% {
    opacity: 0;
    transform: translate(-50%, -40%);
  }
  20% {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
  80% {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -60%);
  }
}




/* ここにSP向けのCSS指定 */
@media (max-width: 768px) {
.bg404{padding:1px 0 20px 0;position: static;width: 100%;}
.bg404 .bg{display: none;}	
.bg404_pb{padding-bottom: 0px !important;}	
	
.hdr404,.hdr404 .ttl,.hdr404 .ttl img{width: 100% !important;}	
	
.hdr404_menu{height: auto; width: 100%; margin: auto;margin-top: 20px;}
.hdr404_menu li{margin-right: 10px;　}
/*.hdr404_menu ul{display: block; margin-top: 0px;}
.hdr404_menu ul>li{width: 49%;float: left;}
.hdr404_menu li{margin-right: 2% !important; margin-top: 2%;}
.hdr404_menu li:nth-child(2n) {margin-right: 0px !important;}
.hdr404_menu img{width: 95%;}*/
	
.att_txt{color: #ffffff;font-size: 11px;font-weight: bold;line-height: 1.2em;}	
	
.con404{padding:80px 5px 1px 5px;}
.con404 .icon_43th{width: 25%;top: 1%;}	
.con404 .icon_43th_ribon{width: 36%;top: 1%;}		
.con404 .icon_fg_l{width: 40%; top: -1%;}
.con404 .icon_fg_r{width: 40%;top: -1%;}
	
.con404 .con_in{width: 95%;margin: auto;}	
.con404 .con_in ul{display: block;margin-bottom: 30px;}
.con404 .con_in li{width: 100%;margin: auto; position: relative;}
.con404 .con_in li img{width: 100%;}	
	
.con404 .con_in .c_img{width: 100%;}	
	
.con404 .h_sub{font-size: 1.0rem;}
.con404 h2{font-size: 1.6rem !important;line-height: 1.3em; }	
.con404 .att_ttl{padding: 5px 0px;font-size: clamp(1.2rem, 1.2vw, 1.3rem); letter-spacing: 0.1em;}	
	
.con404 .only img{width: 40%; z-index: 1;}	
	
.con404 .con_in ul{display: block;margin-bottom: 30px;}
.con404 .con_in li{width: 100%;margin:20px auto; position: static;}
.con404 .con_in li img{width: 100%;}	
	
	
.con404 .in404{width: 90%;margin:0 auto;justify-content: center; align-items: center;}
.con404 .in404 .campaign-wrap__img img{width: 100%;}

.con404 .icon01{padding: 5px 10px;font-size: 14px;}
.con404 .icon02{padding: 5px 10px;font-size: 14px;}	
.con404 .in404 .campaign-wrap__txt{text-align: center;}
	
	
.con404 .att_box{width: 90%;}
.con404 .att {padding: 0 10px ;}	
.con404 .lottery{width: 100%;}	
.con404 .lottery ul{margin-top: 20px;}	
.con404 .lottery ul>li{}
.con404 .lottery li{ width:100%;margin: 0 15px 15px 0;　}
.con404 .lottery li:nth-child(3n) {margin-right: 0px !important;}	
.con404 .lottery img{width: 100%; height: auto;}

.con404 .read{margin-top: 20px;}

.f60px{font-size: 40px;}	
	
/* 3カラム */
/*.column_bg{padding: 10px 0 0 0 !important;}	*/	
.campaign-img-list__item{background-color: #f7eeee !important;border-radius: 30px !important;padding: 20px 0px 10px 0px !important;}
/*.campaign-img-list__item:last-child{border-bottom: none;}	*/
.campaign-img-list__img{display: grid; grid-template-columns: 48% 49%;margin:0 0 0 2%;height: auto;}	
.campaign-img-list__img .img_ttl{line-height: 1.5em;}	

.pre-sale .txt{font-size: 16px;text-align: left;}	

 /*サイズ調節	*/	   

.w100{width: 100%;}
	.w100sp{width: 90%;}
	.w70sp{width: 50%; margin-left: 25%!important;}		

.pconly{
	display:none;
}	
	
	
/*　クーポンコード　コピーエリア　*/
.code{ left: calc(50% + 3vw);bottom:calc(20% + 18.5vw);}

.copy-btn {
	left: calc(20% + 2vw);
bottom:calc(20% + 7vw);

}

.copy-message {
	left: 50%;
bottom:calc(20% + 0vw);
}	
	
	
}







/* ここにPC向けのCSS指定 */
@media (min-width: 768px) {
	
.hdr404_menu{height: 380px; width: 75%; margin: auto;position: absolute; left: 50%;transform: translate(-50%, -50%);z-index: 2;padding-top: 180px;}	
.hdr404_menu ul{margin-top: 50px;}
.att_txt{font-size: 12px;font-weight: bold;color: #ffffff;}
	
.campaign-img-list__txt {padding: 10px 0 0 0;}	

.campaign-img-list__img{display: block;height: auto;}
.campaign-img-list__img img{width: 100%;height: auto;}	
.campaign-img-list__img .img_ttl{display: block;line-height: 1.5em;margin: 20px 10px 0 10px;}

.pre-sale .prdct{text-align: right;}	

.sponly{
	display:none!important;
}	
  .campaign-wrap__img {
    width: 550px;
	  height: auto;
    padding-right: 50px;
    margin: 0 auto;
  }	
	
	
/**/.con404 .con_in .mseg{ 
position: absolute;
  bottom: 40px;
  width: 190px;
  left: 15px;
  font-size: 13px;
  padding: 6px 15px 6px;
  border: #94775b solid 2px;
  text-align: center;
  margin-bottom: 10px;
  border-radius: 5px;
  font-weight: 600;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
	}	
	
.con404 .con_in .mseg.show {
  opacity: 1;
}
	
	
	
/* バナーエリア */
.bnr__link a{
 transition: 0.5s;	
}
.bnr__link a:hover {
  opacity:0.8;
  transition: 0.8s;	
}		
	
}







/* 買い物かご */
.txtlimit{color: #f95f5f;font-weight: 600; text-align: center;font-size: 12px; background-color: #ffffff; padding: 1px 4px; margin: 0 auto; border:1px solid #f95f5f;}
.txtprice{font-weight: 700; font-size: 22px; color: #F8575A;}
.txtprodct{font-size: 18px; text-align: center;}

.specbox {
  width: 95%;
  margin-left: 0px;
  position: relative; }
  .specbox .name {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.11em;
    margin-bottom: 10px;
    margin-top: 10px;
    line-height: 1.7;
    text-align: center; }
  .specbox .spec {
    font-size: 14px;
    letter-spacing: 0.11em;
    font-weight: 500; }

  .specbox .limit {
    font-size: 15px;
    letter-spacing: 0.13em;
   border: solid 2px #f2872d; /**/
    padding: 5px 30px;
    color: #f2872d; 
/*background-color: #b6929c;*/
 border-radius: 50px}

  .specbox .price {
    font-size: 23px;
    font-weight: 700;
    margin-top: 10px;
    text-align: center; }
  .specbox .psmall {
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.1em; }



/* 買い物ボタン */
.btn_style {
  width: 230px;
  height: 45px;
  background: #444;
  letter-spacing: 0.15em;
  border: 1px solid #444;
  box-sizing: border-box;
  transition: all .3s 0s ease-in-out;
  text-align: center;
  font-size: 15px; }

.btn_style.mini {
  width: 100%;
  height: 45px; }

.btn_style.mini > a,
.btn_style.mini > span {
  font-size: 15px; }

.btn_style.mini > a span,
.btn_style.mini > span span {
  padding-left: 35px; }

.btn_style.off {
  background: #ccc;
  border: 1px solid #ccc; }

.btn_style:not(.btn_style.off):hover {
  background: #fff; }

.btn_style:not(.btn_style.off):hover > a,
.btn_style:not(.btn_style.off):hover > span {
  color: #444; }

.btn_style > a,
.btn_style > span {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  height: 100%;
  color: #fff;
  font-weight: bold;
  font-size: 17px; }

.btn_style > a span,
.btn_style > span span {
  position: relative;
  padding-left: 40px;
  text-align: center; }

.btn_style > a span:before,
.btn_style > span span:before {
  display: block;
  content: '';
  width: 23px;
  height: 17px;
  background: url("/assets/images/pages/f-static/campaign/icon_cart.png") left top no-repeat;
  background-size: 23px 17px;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate3d(0, -50%, 0); }

.btn_style:not(.btn_style.off):hover > a span:before,
.btn_style:not(.btn_style.off):hover > span span:before {
  background: url("/assets/images/pages/f-static/campaign/icon_cart_b.png") left top no-repeat;
  background-size: 23px 17px; }

  .arrow_s {
    position: relative;
    display: inline-block;
    padding-left: 12px;
    color: #333;
    text-decoration: none;
  }
  .arrow_s:before {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 0 6px 8px;
    border-color: transparent transparent transparent #333;
    position: absolute;
    top: 60%;
    left: 0;
    margin-top: -6px;
  }
.exprice {
  text-decoration: line-through;font-weight: bold;
}



/* ここにPC向けのCSS指定 */
@media (min-width: 768px) {
	
/* 買い物かご */

	.specbox{text-align: left;}		
}


/* ここにSP向けのCSS指定 */
@media (max-width: 768.98px) {
	
/*サイズ調節	*/	   

.w100{width: 100%;}
	.w100sp{width: 90%;}
	.w70sp{width: 50%; margin-left: 25%!important;}		
	
	
 /* 買い物ボタン */	
	
  .btn_wrap {
    margin-top: 10px;
    width: 90%;
    margin-left: 5%; }	
	
  .btn_style {
    height: 13vw;
    width: 100%; }
    .btn_style .mini {
      height: 12vw; }
      .btn_style .mini > a, .btn_style .mini > span {
        font-size: 0.9rem; }
      .btn_style .mini > a span, .btn_style .mini > span span {
        padding-left: 40px; }
    .btn_style > a, .btn_style > span {
      font-size: 0.9rem; }
    .btn_style > a span, .btn_style > span span {
      padding-left: 32px; }
    .btn_style > a span:before, .btn_style > span span:before {
      width: 20px;
      height: 15px;
      background: url("/assets/images/pages/f-static/campaign/icon_cart.png") left top no-repeat;
      background-size: 20px 15px; }

  .btn_style:not(.btn_style.off):hover > a span:before,
  .btn_style:not(.btn_style.off):hover > span span:before {
    background: url("/assets/images/pages/f-static/campaign/icon_cart_b.png") left top no-repeat;
    background-size: 20px 15px; }		
}