@charset "utf-8";
/* CSS Document */
/*========= ▼reset ===============*/
/* ブラウザのUAスタイルシートのすべてのスタイルを削除します、displayは除く */
*:where(:not(iframe, canvas, img, svg, video, a):not(svg *)) {all: unset;display: revert;}
/* box-sizingの優先値 */
*, *::before, *::after {box-sizing: border-box;}
/* リストのスタイル（箇条書き・番号）を削除します */
ol,ul {list-style: none;}
/* 画像がコンテナを超えないようにするため */
img {max-width: 100%;}
/* テーブルのセル間のスペースを削除します */
table {border-collapse: collapse;}
a {text-decoration: none;transition: all .35s;}
/*========= ▲reset ===============*/
#CONTENTS, body:not(.noGlobal) #CONTENTS {margin-left: 0;padding: 0;}
#FOOTER{margin-left: 0;}
#Thanksgiving .includeSCT .item:hover{
transform:translateY(-3px);
}
#PAGEBODY{padding-bottom: 0;}
#Thanksgiving ul.action {display: none;}
#PAGEBOTTOM {
    padding-bottom: 0;
    position: relative;
    z-index: 999;
}
#FOOTER .foot{
    background: #F3F3F3;
}
.includeSCT .name{text-align:left;line-height: 1.5;font-size: clamp(14px, 1.1vw, 17px);}
.includeSCT .tag{align-content: flex-start;display: none;}
#Thanksgiving .includeSCT .item{height: auto !important;box-shadow: 2px 5px 10px var(--shadowColor);transition:all .35s;}/*カードの高さ調節*/
#Thanksgiving .includeSCT .item:hover{transform:translateY(-5px);box-shadow: 2px 10px 20px var(--shadowColor);}
#Thanksgiving .includeSCT .maker{display: none;}
#PAGEBOTTOM .targetTop{z-index: 999;}
#Thanksgiving .includeSCT .price{
    min-height: auto;
}

.includeSCT .cont{padding-bottom: 0;}
#PAGEBOTTOM .targetTop {
padding-bottom: 0;
z-index: 999;

}
.includeSCT .quick, .includeSCT .favorite{display: none;}
.includeSCT .cta a{letter-spacing: 0.05em;}



:root {
--bkColor:#000;
--bgColor:#FDF5D9;
--primaryColor:#F50000;
--secondaryColor:#0010A8;
--tertiaryColor:#13A300;
--alphaColor:rgba(255, 255, 255, 0.85);
--whiteColor:#fff;
--yellowColor:#FFDE02;
--shadowColor:rgba(0, 0, 0, 0.2);
--redColor:#DB0000;
--color_mark_yellow: rgba(255, 250, 125, 0.95) !important;
}

/*========= ▼reset ===============*/
/* ブラウザのUAスタイルシートのすべてのスタイルを削除します、displayは除く */
*,::after,::before{box-sizing:border-box}html{line-sizing:normal}body{margin:0}[hidden]{display:none}pre{white-space:pre-wrap}hr{border-style:solid;border-width:1px 0 0;color:inherit;height:0;overflow:visible}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle;max-width:100%}audio:not([controls]){display:none}picture{display:contents}source{display:none}canvas,img,svg,video{height:auto}audio{width:100%}img{border-style:none}svg{overflow:hidden}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}
p, figure{margin: 0;padding: 0;}
/*========= ▲reset ===============*/

*{box-sizing: border-box;}
a {
transition: all .5s;
-webkit-transition: all .5s;
-moz-transition: all .5s;
text-decoration: none;
}
img {width: auto;max-width: 100%;vertical-align: bottom;}

/*========= LoadingのためのCSS ===============*/
.loader-wrap {
	position: fixed;
	display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100vh;
    background: var(--primaryColor);
    z-index: 999;
}
.loader,
.loader:before,
.loader:after {
  border-radius: 50%;
  width: 2.5em;
  height: 2.5em;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation: load7 1.8s infinite ease-in-out;
  animation: load7 1.8s infinite ease-in-out;
}
.loader {
  color: #ffffff;
  font-size: 10px;
  margin: 80px auto;
  position: relative;
  text-indent: -9999em;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
.loader:before,
.loader:after {
  content: '';
  position: absolute;
  top: 0;
}
.loader:before {
  left: -3.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
.loader:after {
  left: 3.5em;
}
@-webkit-keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}
@keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}
/*========= ▲LoadingのためのCSS ===============*/

#Thanksgiving ul {list-style: none;position: relative;margin: 0;padding: 0;padding-inline-start:0;margin-block-start: 0;margin-block-end: 0;}

#particles-js {
  position:fixed;
  width: 100%;
  height: 100vh;
  z-index: 3;
} 
#particles-js1 {
  position: fixed;
  width: 100%;
  height: 100vh;
  z-index: 2;
  filter: blur(0.5px);
} 

#particles-js2{ 
  position: fixed;
	z-index:1;/*描画を一番下に*/
	width: 100%;
	height: 100vh;
  filter: blur(1px);
}

.kotei{position: fixed;width: 100%;height: 100vh;}

#Thanksgiving {overflow: hidden;font-family:  "Noto Sans JP", sans-serif;font-optical-sizing: auto; font-weight: 400;font-style: normal;line-break: strict;word-wrap: break-word;word-break: break-all!important;line-height: 1.7;color: var(--bkColor);max-width: 2040px;margin: auto;background: var(--bgColor);padding-bottom: 7%;}

#lpwrapper{
}

section{
    position: relative;
}
.sec-inner{
    margin: 6% auto;
    position: relative;
    max-width: 1290px; 
    width: 92%; 
}
#sec02 .sec-inner{
    margin: 0 auto;
    padding-top: 3%;
}

#sec01{
    margin: 0 auto;
    padding: 0;
}
#sec01 .title {
    width: 100%;
}

.termArea{
    text-align: center;
    margin-bottom: 2%;
}

.ab{
    position: absolute;
    width: 21%;
}
.abLeft{
    left: 0;
    top: 0;
}
.abRight{
    right: 0;
    top: 0;
}
.mark_yellow{
    background: linear-gradient(transparent 50%, var(--color_mark_yellow) 0%);
}

.termBox{background: var(--primaryColor);border: 2px solid var(--yellowColor);display: inline-block;padding: 0.1rem 3rem;border-radius: 100vh;}
.termBox p{font-size: clamp(14px, 1.43vw, 23px);color: var(--whiteColor);margin: 0;}

.topLead{
    font-size: clamp(15px, 1.25vw, 20px);
    text-align: center;
    text-shadow: -1px -1px 2px var(--bgColor), -1px 0 2px var(--bgColor), -1px 1px 2px var(--bgColor), 0 -1px 2px var(--bgColor), 0 1px 2px var(--bgColor), 1px -1px 2px var(--bgColor), 1px 0 2px var(--bgColor), 1px 1px 2px var(--bgColor);
}


.ulWrap{
    padding: 0 2rem 2rem;
}
.alphaBox{
    position: relative;
    background: var(--alphaColor);
    box-shadow: 0 5px 10px var(--shadowColor);
    border-radius: 10px;
    padding: 3rem 0 0;
}
.alphaBox h2 {
    background: var(--primaryColor);
    font-size: clamp(22px, 2.4vw, 38px);
    font-weight: 500;
    text-align: center;
    color: var(--whiteColor);
    padding-bottom: 15px;
    padding-top: 10px;
}
.alphaBox h2 .fa-bullhorn {
    font-size: 80%;
    margin: 0 5px;
}
.alphaBox h2 > span {
    border-bottom: solid 5px var(--yellowColor);
}
.alphaBox h2 > .subTitle{
    display: block;
    font-size: clamp(12px, 0.95vw, 15px);
    color: var(--redColor);
    border-bottom: none;
}
.cardArea{
    margin: 3% 5% 0;
    padding-bottom: 3%;
    position: relative;
}
.flex-proList{display: flex;flex-wrap: wrap;}
.flex-proList > li {flex-basis: 25%;margin: 0 0;position: relative;transition: all .5s;}
.flex-proList > li a {color: var(--bkColor);}

#Thanksgiving .presentUl{
    max-width: 1100px;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    margin: auto;
}
#Thanksgiving .presentUl > li {
    flex-basis: 29%;
    background: var(--whiteColor);
    border: solid 3px var(--redColor);
    position: relative;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-bottom: 4%;
}
.alphaBox hgroup{
    background: var(--secondaryColor);
    padding-top: 10px;
}

.alphaBox hgroup h2{
    background: none;
    line-height: 1.2;
    padding-top: 0;
}
.alphaBox hgroup h3{
    font-size: clamp(22px, 2vw, 32px);
    color: var(--yellowColor);
    font-weight: 600;
    text-align: center;
}
.alphaBox hgroup h2 > span{
    border-bottom: none;
}
.alphaBox hgroup h3 .fa-bullhorn{
    margin-left: 5px;
}

.cardArea h4 > span{
    font-size: clamp(22px, 2vw, 32px);
    color: var(--primaryColor);
    font-weight: 600;
    border-bottom: solid 3px var(--yellowColor);
    text-align: center
}
.cardArea h4{
    text-align: center;
    margin-bottom: 4%;
}


/*========= ▼fontsizeのためのCSS ===============*/
.font_small {font-size: 80%;}
.font_ss{font-size: 70%;}
.font_sss{font-size: 62%;}
.font_large {font-size: 125%;}
.font_ll{font-size: 165%;}
.line_center {text-align: center;}
.line_right{text-align: right;}
.line_left{text-align: left;}
.font_bold{font-weight: 500;}
.font_red {color: var(--redColor);}
.font_white{color: var(--whiteColor);}
.font_yellow{color: var(--yellowColor);}

/*========= ▲fontsizeのためのCSS ===============*/




#Thanksgiving .includeSCT .kanbai .item::after{
    background: rgba(0, 0, 0, .5);
    position: absolute;
    width: 100%;
    height: 100%;
    content: "完　売";
    top: 0;
    left: 0;
    font-size: 36px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 500;
}

#Thanksgiving .includeSCT .tag .stockLabel .outStock{
    background: red;
    color: #fff;
}

@media (any-hover: hover) {
/*:hover はここに書く*/

#Thanksgiving .includeSCT .kanbai .item:hover{
  transform: none;
}
    .btnBox a:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 15px var(--shadowColor);

    }
    
}

.pad-cam {display: none !important;}
.pad-pc {display: block !important;}
.sp-cam {display: none !important;}
.pad-sp {display: none !important;}


/************************************************************/@media screen and (max-width: 820px) {

        .flex-proList > li {
        flex-basis: 33.333%;
    }
    .includeSCT .cta a::before, .includeSCT .cta button::before{
        right: 1em;
    }
    
    
    
    
.pad-cam {display: block !important;}
.pad-pc {display: block !important;}
.pc-cam {display: none !important;}
.sp-cam {display: none !important;}
}

/************************************************************/@media screen and (max-width: 700px) {
    .termBox{
        padding: 0.1rem 0.5rem;
    }
    .topLead{
        text-align: left;
    }
.cardArea {
    margin: 3% 4% 0;
    padding-bottom: 4%;
}
    
.includeSCT .cta a{
padding: 4px 18px 4px 15px;
}
.includeSCT .cta a::before{
right: 1.2em;
}



        .flex-proList > li {
        flex-basis: 50%;
    }
    
    
  
.pad-sp {display: block !important;}
.pc-cam {display: none !important;}
.pad-cam {display: none !important;}
.pad-pc {display: none !important;}
.sp-cam {display: block!important;}

}