@charset "utf-8";
/* CSS Document */
:root {
--bkColor:#000;
--primaryColor:#D7BC72;
--bgColor:#F5F7DC;
--secondaryColor:#EBE7CC;
--alphaColor:rgba(255, 255, 255, 0.7);
--redColor:#DB0000;
--DredColor:#9F0101;
--whiteColor:#fff;
--yellowColor:#FFDE02;
--LyellowColor:rgba(255, 222, 2, 0.7);
--shadowColor:rgba(0, 0, 0, 0.2);
--grayColor:#464646;
}

/*========= ▼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 ===============*/

#HEADER .global{display: none;}

#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;
  filter: blur(1px);
} 
#particles-js1 {
  position: fixed;
  width: 100%;
  height: 100vh;
  z-index: 2;
  filter: blur(2px);
} 

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

.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);}

#lpwrapper{
    background-image: url("feature_12th_Thanksgiving/main_pc.jpg?$staticlink$");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100%;
}

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

#sec01{
    margin: 0 auto;
    padding: 1.5% 0 14.5%;
}
#sec01 .title {
    max-width: 928px;
    margin: auto;
    width: 60%;
}

.termArea{text-align: center;position: absolute;bottom: 20%;left: 50%;transform: translate(-50%, 0);}
.termBox{background: var(--redColor);border: 2px solid var(--primaryColor);display: inline-block;padding: 0.1rem 2rem;border-radius: 100vh;}
.termBox p{font-size: clamp(13px, 1.2vw, 20px);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);
}
span.marker {
    background: linear-gradient(transparent 50%, var(--LyellowColor) 50%);
}
.btnArea{
    margin: 3%;
}
#link01,
#link02{
    padding-top: 100px;
    margin-top: -100px;
}
.btnArea .flexUl{
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
}
.btnArea .flexUl > li {
    position: relative;
    background: var(--yellowColor);
    border: solid 3px var(--whiteColor);
    flex-basis: 45%;
    box-shadow: 3px 8px 15px var(--shadowColor);
    border-radius: 10px;
}
.btnArea .flexUl > li:last-child{
    margin-top: 3%;
}

#Thanksgiving h3 {
  font-size: clamp(20px, 1.9vw, 30px); 
  position: relative;
  display: inline-block;
  margin: 1.5rem 0 1rem -13px;
  padding: 0.5rem 3rem;
  color: #fff;
  background: var(--redColor);
  -webkit-box-shadow: 3px 3px 5px rgba(0, 0, 0, .2);
  box-shadow: 3px 3px 5px rgba(0, 0, 0, .2);
  font-weight: 500;
}

#Thanksgiving h3:before {
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 0;
  height: 0;
  content: '';
  border-top: 10px solid var(--DredColor);
  border-left: 10px solid transparent;
}
.ulWrap{
    padding: 0 2rem 2rem;
}
#Thanksgiving h4,
#Thanksgiving h5{
    padding: 0;
    margin: 0;
}
#Thanksgiving h4{
    font-size: clamp(18px, 1.5vw, 24px);
    font-weight: 600;
}
#Thanksgiving h5{
    font-size: clamp(15px, 1.15vw, 18px);
    font-weight: 400;
}
.btnBox{
    margin: 1.5rem 1rem 0.5rem;
}
.btnBox a {
    display: inline-block;
    padding: 0.5rem 1.5rem;
    background: var(--redColor);
    border: solid 2px var(--whiteColor);
    box-shadow: 0 5px 10px var(--shadowColor);
    font-size: clamp(15px, 1.15vw, 18px);
    font-weight: 500;
    color: var(--whiteColor);
    border-radius: 5px;
    transition: all .5s;
}
.ab{
    position: absolute;
    margin: 0;
}
.ab01{
    width: 31%;
    top: 50%;
    transform: translateY(-50%);
    right: 5%;
}
.alphaBox{
    position: relative;
    background: var(--alphaColor);
    box-shadow: 0 5px 10px var(--shadowColor);
    border-radius: 10px;
    padding: 3rem 0 0;
}
.alphaBox h6{
    font-size: clamp(18px, 1.5vw, 24px);
    font-weight: 400;
    background: var(--primaryColor);
    padding: 0.3rem;
    text-align: center;
    margin: 0;
}
.alphaBox h2 {
    font-size: clamp(22px, 2.25vw, 36px);
    font-weight: 500;
    text-align: center;
    margin: 1rem;
}
.alphaBox h2 span {
    border-bottom: solid 5px var(--redColor);
}
.alphaBox h2 > .subTitle{
    display: block;
    font-size: clamp(12px, 0.95vw, 15px);
    color: var(--redColor);
    border-bottom: none;
}
.presentArea{
    margin: 4% 4% 0;
    padding-bottom: 4%;
}
.cardArea{
    margin: 3% 3% 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%;
}
.liInner{
    padding: 15px 15px 5px;
}
.awardName {
    font-size: clamp(13px, 1vw, 16px);
    text-align: center;
    line-height: 1.4;
    margin: 0.5rem auto;
    padding-bottom: 5px;
    border-bottom: solid 1px var(--bkColor);
}
.awardSum {
    font-size: clamp(13px, 1vw, 16px);
}
.awardNotice{
    font-size: clamp(12px, 0.95vw, 15px);
    text-align: right;
}
.bottomBox{
    background: var(--secondaryColor);
    border-radius: 0 0 8px 8px;
    font-size: clamp(12px, 0.95vw, 15px);
    text-align: center;
    padding: 0.5rem 0;
}
.awardImg{
    position: absolute;
    left: 50%;
    top: -7%;
    transform: translateX(-50%);
    width: 52%;
}
.awardPhoto > img {
    margin: auto;
}
.presentSum {
    text-align: center;
    font-size: clamp(15px, 1.15vw, 18px); 
}
.presentNotice{
    font-size: clamp(12px, 0.95vw, 15px);
    text-align: right;
    margin: 1rem 0;
}

.precautions{
    background: var(--whiteColor);
    border: solid 1px var(--bkColor);
    border-radius: 5px;
    padding: 1rem;
}
.precautionsTitle{
    font-size: clamp(15px, 1.15vw, 18px);
    font-weight: 500;
}
#Thanksgiving ul.precausitonsUl {
    list-style: disc;
    font-size: clamp(13px, 1vw, 16px); 
    padding: 1rem;
    margin-left: 1rem;
}
.titleWrapper{
    text-align: center;
    margin-bottom: 4%;
    margin-top: 3%;
}
.sameTitle{
    position: relative;
    display: inline-block;
}
.sameTitle .sameTitleInner{
    font-size: clamp(15px, 1.4vw, 22px);
    font-weight: 700;
    text-align: center;
    text-shadow: #ffffff 2px 0px 2px, #ffffff -2px 0px 2px, #ffffff 0px -2px 2px, #ffffff 0px 2px 2px, #ffffff 2px 0px 1px, #ffffff -2px 0px 1px, #ffffff 0px -2px 1px, #ffffff 0px 2px 1px, #ffffff 2px 2px 2px, #ffffff 2px 2px 1px, #000 1px 4px 0, #000 1px 2px 0, #000 2px 4px 0;
    background: var(--yellowColor);
    padding: 0 1.5rem 0.5rem;
    display: inline-block;
    line-height: 1.5;
}
.sameTitle .sameTitleInner::before{
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    border: solid 1px var(--bkColor);
    top: -5px;
    left: -5px;
}
.taxPng{
    position: absolute;
    width: 15%;
    top: -28%;
    right: 1%;
}
.ab02{
    width: 28%;
    top: 1.5%;
    left: 3%;
}
.ab03{
    width: 27%;
    right: 3%;
    top: 1.5%;
}
.ab04{
    width: 25%;
    left: 4%;
    top: -3%;
}
.ab05{
    width: 21%;
    right: 4%;
    top: -3%;
}
.ab06{
    width: 25%;
    left: 4%;
    top: -4%;
}
.ab07{
    width: 30%;
    right: 1%;
    top: -4%;
}
.ab08{
    width: 30%;
    left: 2%;
    top: -3%;
}
.ab09{
    width: 30%;
    right: 1%;
    top: -5%;
}




#CONTENTS, body:not(.noGlobal) #CONTENTS {margin-left: 0;padding: 0;}
#FOOTER{margin-left: 0;}
#PAGEBODY{padding-bottom: 0;}
.includeSCT .item{box-shadow: 2px 5px 10px var(--shadowColor);}
.includeSCT .item:hover{transform:translateY(-5px);box-shadow: 2px 10px 20px var(--shadowColor);}
.includeSCT .name{text-align:left;line-height: 1.5;}
.includeSCT .tag{align-content: flex-start;}
#Thanksgiving ul.action {display: none;}
#Thanksgiving .includeSCT .item{height: auto !important;}/*カードの高さ調節*/
#PAGEBOTTOM .targetTop{z-index: 999;}
#Thanksgiving .includeSCT .item {
height: auto !important;
}
.includeSCT .cont{padding-bottom: 0;}
#PAGEBOTTOM {
    padding-bottom: 0;
    z-index: 999;
    position: relative;
}

/*========= ▼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);

    }
    
}

/************************************************************/@media screen and (max-width: 1600px) {
    #sec01{
        padding: 1% 0 11%;
    }
}


/************************************************************/@media screen and (max-width: 1279px) {
  #HEADER .global{display: block;}
}
/************************************************************/@media screen and (max-width: 820px) {

        .flex-proList > li {
        flex-basis: 33.333%;
    }
    .btnArea{
        3% 0;
    }
    .ab01{
        width: 28%;
        top: 20%;
    }
    .ulWrap{
        padding: 0 1.2rem 1rem;
    }
    .ab02{
        top: 1%;
    }
    .ab03{
        top: 1%;
    }
    .ab04{
        width: 24%;
        left: 0;
        top: -1%;
    }
    .ab05{
        width: 20%;
        right: 1%;
        top: -1%;
    }
    .ab06{
        width: 22%;
        left: 0;
        top: -1%;
    }
    .ab07{
        width: 26%;
        right: 0;
        top: -1%;
    }
    .ab08{
        width: 28%;
        left: 0;
        top: -1%;
    }
    .ab09{
        width: 29%;
        right: -1%;
        top: -2%;
    }
    
    
    
    
.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) {
    #lpwrapper{
        background-image: url("feature_12th_Thanksgiving/main_sp.jpg?$staticlink$");
    }
    #sec01{
        padding: 7% 0 42%;
    }
    #sec01 .title{
        width: 100%;
    }
    .termArea{
        width: 100%;
        bottom: 23%;
    }
    .btnArea .flexUl{
        flex-direction: column;
    }
    .btnArea .flexUl > li{
        width: 90%;
        margin: auto;
    }
    #Thanksgiving .presentUl{
        flex-direction: column;
    }
    #Thanksgiving .presentUl > li{
        width: 90%;
        margin: 5% auto;
    }
    .taxPng{
        top: -36%;
    }
    .awardImg{
        top: -5%;
    }
    .presentSum{
        text-align: left;
    }
    .titleWrapper{
        margin-bottom: 17%;
    }
    .ab02, .ab03{
        top: 2.2%;
    }
    .ab04,.ab05{
        top: 2.5%;
        width: 30%;
    }
    .ab06{
        width: 32%;
        top: 3%;
    }
    .ab07{
        width: 36%;
        top: 3%;
    }
    .ab08{
        width: 38%;
        top: 3%;
    }
    .ab09{
        width: 38%;
        top: 2.5%;
    }


        .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;}
}