@charset "euc-jp";


/*///////////////////////////////////////////////////////////////////
reset
/////////////////////////////////////////////////////////////////////*/
*,*::before,*::after{box-sizing:border-box;   padding: 0;}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}ul[role='list'],ol[role='list'],li{list-style:none}body{min-height:100vh;line-height:1.5}h1,h2,h3,h4,button,input,label{line-height:1.1}h1,h2,h3,h4{text-wrap:balance}a:not([class]){text-decoration-skip-ink:auto;color:currentColor}img,picture{max-width:100%;display:block}input,button,textarea,select{font:inherit}textarea:not([rows]){min-height:10em}:target{scroll-margin-block:5ex}
a{text-decoration: none;color: #403732;}

/*///////////////////////////////////////////////////////////////////

base

/////////////////////////////////////////////////////////////////////*/

body{
width: 100%;
height: 100vh;
background-image: url(https://ic4-a.wowma.net/mi/w/1280/h/1280/q/90/image.wowma.click/39893661/image/wintersellection_kaden/kanban_img.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
overflow-x: hidden;
}

body::after{
position: fixed;
content: '';
background: inherit;
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
top: -5px;
left: -5px;
right: -5px;
bottom: -5px;
z-index: -1;
}


#wrap{
font-family: "century-gothic","hiragino-kaku-gothic-pron", sans-serif;
font-weight: 600;
font-style: normal;
color: #f2f2f2;
font-size: 14px;
width: 100%;
}

.smp{display: none;}



/*///////////////////////////////////////////////////////////////////

?????��?��??

/////////////////////////////////////////////////////////////////////*/
main #top h1{  font-size:150px;color: #fffbff; letter-spacing: 1px;line-height: 0.5;}
main #top h1 span{ font-size: 60px;}
main #top p{  font-size: 30px;color: #fffbff; letter-spacing: 1px; margin-bottom: 35px;}
main #c_otoku h2{  font-size: 30px;}
main h2{  
  position: relative;
  font-size: 40px;
  color: #fffbff;
  margin: 10px auto;
  border-bottom: double 4px #ffffff65;
  padding-bottom: 7px;
  width: 100%;
}

main h2 span{  
font-size: 25px;
letter-spacing: 2px;
}


main .inner .cate_title:before {
margin-left: -61px;
}

main .inner h2.cate_title:after {
margin-left: 13px;
}

h4{ font-size: 17px;
line-height: 1.3;}



/*///////////////////////////////////////////////////////////////////

?????��??

/////////////////////////////////////////////////////////////////////*/


/*--�?�???��??丸�????��?��?��??--*/
.i_notification{
position: absolute;
right: 10px;
top: -10px;
background-color: #ee2a0c !important;
border-radius: 90px;
width: fit-content;
display: flex;
justify-content: center;
align-items: center;
padding: 10px 14px;
height: 83px;
width: 82px;
}
.i_notification p{color: #f2f2f2 !important;}

.i_point{
  position: absolute;
  right: 10px;
  top: -10px;
  background-color: #ee2a0c !important;
  border-radius: 90px;
  width: fit-content;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 14px;
  height: 83px;
  width: 82px;
  }
  .i_point p{color: #f2f2f2 !important;
    font-size: 13px;
}
  

/*///////////////////////////////////////////////////////////////////

?���?�追�???????

/////////////////////////////////////////////////////////////////////*/


nav .inner{width: 100%;padding: 30px;box-sizing: border-box;}
nav .inner > a p{        color: #202020;
  background-color: #ee8c0c;
  border-radius: 50px;
  text-align: center;
  margin: -10px 0 25px;
  font-size: 16px;
  padding: 3px 0;}
nav .inner > a .otoku.mega{width: 50%; margin: auto;}
nav .inner .CATEGORY_title{color: #202020;
font-size: 25px;
text-align: center;
line-height: 1;
letter-spacing: 1px;}

nav h1 img{width: 80%;margin: auto;}

.m_fixed {
left: calc(50% + 800px / 2);
top: 0;
	position: fixed;   
}

nav{
margin-right: 10px;
left: calc(50% + 800px / 2);
z-index: 99;
position: absolute;
background-color: #f2f2f2;
color: #f2f2f2;
max-width: 300px;
width: 100%;
margin-top: 50px;
}

nav a{color: #f2f2f2;}


.CATEGORY_button{
display: flex;
flex-wrap: nowrap;
justify-content: center;
gap: 10px;
margin: 10px 0;
flex-direction: column;
align-items: center;}
.CATEGORY_button a{
color: #202020;
height: 2rem;
width: 100%;
display: flex;
justify-content: center;
align-items: center;}

nav .CATEGORY_button a{
 border-bottom:1px dotted #202020 ;

}
main .bn_back{
display: flex;
align-items: center;
justify-content: center;
gap: 5px;

}

main .bn_back div{
background-color: #1b1b1b;
padding: 2px 10px ;
border-radius: 20px;
}



/*///////////////////////////////////////////////////////////////////

??��?��??

/////////////////////////////////////////////////////////////////////*/
main{width:100%; background-image: linear-gradient(150deg, rgb(238 110 12 / 22%) 17%, rgb(243 80 4 / 50%) 91%);}


/*??????*/

main #top {width: 100%; height: 100vh;   display: flex;}
main #top .inner{
width: 100%;
position: relative; 
   left: 0 ;
   top: 0;
   bottom: 0;
   right: 0;
   z-index: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   text-align: center;

}
main #top .inner .text{
border: dotted 2px #f2f2f2;
padding: 180px 51px;
background-color: #f2f2f221;
}

/*///////////////////////////////////////////////////////////////////

main ?????????????????��?????

/////////////////////////////////////////////////////////////////////*/


#c_otoku h2 {color: #202020; position: relative;}
#c_otoku h2::before { 
  content: "";
  position: absolute;
  width: 100%;
  height: 35px;
  background-repeat: no-repeat;
  left: -14px;
  top: 13px;        color: #ee8c0c;
}
#c_otoku .otoku{width: 5%; margin: 0 auto;}

#c_otoku .inner{    
  padding: 50px;
  color: #f7f7f7;
  background-color: #f2f2f2;
border: solid 1px #ee8c0c;
}

#c_otoku .button_blk{        font-size: 28px; border-top:solid 1px; width: 50%; padding: 12px 0;border-bottom:solid 1px; }
#c_otoku h3{ 
  color: #202020;
  padding: 5px;
  font-size: 20px;
  font-weight: 700;
  width: 87%;
  margin: 23px auto 3px;
  background-color: #ee8c0c;
  display: flex;
  align-items: center;
  justify-content: center;
}
  #c_otoku h3 span{color: #202020; font-size: 30px;   margin-right: 6px;}
#c_otoku p{        color: #202020;             letter-spacing: 0.5px;
  font-size: 14px;
  padding-top: 4px;        line-height: 1.5; font-weight: 600;}
#c_otoku .i_notification{          
  color: #f2f2f2;
  position: relative;
  display: inline-flex;
  left: 0;
  top: 0;
  padding: 9px;
  font-weight: 900;
  margin: 0 4px;
  height: 70px;
  width: 70px;}
/*///////////////////////////////////////////////////////////////////

??��?��????????

/////////////////////////////////////////////////////////////////////*/


.corner_wrap{  
transition: all 0.8s;
transform: translateY(20px);
filter: blur(10px);
opacity: 0;
}

  .blur{
  filter: blur(0);
  opacity: 1;
  transform: translateY(0px);

}



main .corner_wrap{  
width:700px;   
position: relative;
margin: 0 auto;
}



main .item_inner_wrap{
z-index: 1;
position: relative;
padding-top: 5%;
text-align: center;
}

main .item_inner_wrap .inner{
width: 700;


}
.corner_wrap .inner >p{font-weight: 200; letter-spacing: 1px;}

main .corner_wrap{
padding-bottom: 6%;
}


.item > ul {
display: flex;
gap: 20px;
flex-wrap: wrap;
justify-content: center;
}
main .item ul li{
background-color: #f2f2f2; 
position: relative;
transition: 0.3s; 
box-shadow: 0px 0px 0px 0px #31313134;
} 
main .item ul:nth-child(2){gap: 10px;}
main .item ul:nth-child(2) li{
  border: solid 1px;
  background-color: #202020;
  position: relative;
  transition: 0.3s;
  box-shadow: 0px 0px 0px 0px #fff;
  border-radius: 51px;
  padding: 2px 9px;
  margin: 5px 0 5px;
} 

main .item ul:nth-child(2) li:last-child{
  border: none;
background-color: #202020;
position: relative;
transition: 0.3s;
box-shadow: 0px 0px 0px 0px #fff;
width: calc((100% - 0px) / 1);
border-radius: 51px;
margin: 5px 0 0;
} 
main .item ul:nth-child(2) li  a{	
width: 100%;
height: 100%;
margin: 0 auto;
display: flex;
flex-wrap: nowrap;
justify-content: center;
padding: 7px;
align-items: center;
color: #fffbff;
flex-direction: row;

}

main .item ul:nth-child(2) li a span {	
transition: 0.3s;
}
main .item ul:nth-child(2) li:hover a span {	
transform: translateX(4px);
}

main .item ul:nth-child(1) li:hover{
transform: translateY(-5px);
box-shadow: 0px 5px 10px 5px #31313134;
} 
main .item ul li img{
margin: 0% 0 0.5%;
}
main .item ul li a{	
width: 100%;
height: 100%;
margin: 0 auto;
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
padding: 7px;
align-items: center;
flex-direction: column;
}
.item > ul li.clm_1 {
width: calc(100%);

}
.item > ul li.clm_2 {
width: calc((100% - 20px) / 2);

}


.item_title{
position: relative; 
margin: 2px 0 -5px;
}


.item_title span:nth-child(1){
margin: 0 5px 0 5px;}
.item_title span{
border: 1px solid #000;
padding: 1px 9px;
margin: 0 5px 0 0px;
border-radius: 21px;
line-height: 2.12;}



/*??��??*/
.item > ul li.clm_1 .color{        
  position: absolute;
  top: 374px;
  right: 20px;
  font-size: 26px;
}


.item > ul li.clm_2 .color{        
  position: absolute;
  top: 293px;
  right: 20px;
  font-size: 26px;
}


  #lp .inner{        display: flex; 
    flex-wrap: wrap;
    gap: 14px;
    width: 90%;
    margin: 0 auto;}
  
  #lp .inner a{width: calc((100% - 20px) / 2);transition: 0.3s;
  }
  
  #lp .inner a :hover{transform:translateY(-5px) ;transition: 0.3s;
  }

/*///////////////////////////////////////////////////////////////////

??��?��?��?????????????????

/////////////////////////////////////////////////////////////////////*/

main .corner_wrap .inner.sub{  
padding: 24px 31px;
width: 615px;
border: dotted 1px;   
margin: 0 auto;   
}

main .corner_wrap .inner.sub .item > ul li.clm_2 {
width: calc((100% - 20px) / 2);

}

main .corner_wrap .inner.sub .item > ul li.clm_1 {
  width: calc((100% - 20px) / 1);
}
  

  

main .corner_wrap .inner.sub .more{
text-align: center;
border-radius: 50px;
padding: 5px;
width: 100%;
background-color: #f2f2f2;
font-weight: 600;
color: #ee2a0c;
}

main .corner_wrap .inner .item_title > p{
width: 100%; 
margin: 1px auto;  
color: #ee2a0c;
padding: 2px 10px; 
position: relative; 
font-size: 16px;
}

main .corner_wrap .inner .item_title> p::before,
main .corner_wrap .inner .item_title> p::after {
position: absolute;
top: 1px;
height: 26px;
content: '';
}

main .corner_wrap .inner .item_title> p::before {
border-left: solid 1px;
left: -4px;
transform: rotate(-30deg);
}

main .corner_wrap .inner .item_title> p::after {
border-right: solid 1px;
right: -3px;
transform: rotate(30deg);
}

main .corner_wrap .inner.sub .item > ul li.clm_2 .color{
  position: absolute;
  top: 218px;
  right: 20px;
  font-size: 26px;
  
  }



/*///////////////////////////////////////////////////////////////////

価�??

/////////////////////////////////////////////////////////////////////*/


main .prices span span span{display: none;}
main .prices{
font-size: 43px;
color: #ee2a0c;

}




/*///////////////////////////////////////////////////////////////////

???楽�????��?��?��?��??

/////////////////////////////////////////////////////////////////////*/

/*??��??*/
.pkpk{ position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
  height: 100vh;
  gap: 10px;
  width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f2f2f2;
  font-weight: 700;
  padding: 0 10px;
  background-color: #0e0e0e;
  flex-direction: column;}

  

.pkpk p:first-of-type{font-size: 12px;   -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl; letter-spacing: 3px;}

.progress-bar {
  border-radius: 90px;
  width: 10px;
  height: 50vh;
}




#c_funny .inner{           padding: 40px 0;
  color: #0e0e0e;
  background-color: #f2f2f2d3;
  border: solid 1px #ee8c0c;
}

    #c_funny .button_blk{     font-size:30px; animation:2s  coupon 0.1s ease-in infinite; background-color: #0e0e0e;width: 70%; padding: 15px 0 10px;border-bottom:1px solid ; }

    #c_funny .button_blk span{font-size: 40px;}
    @keyframes coupon{
        0%,10%,40%,90%,100%{opacity:1;}
        50%{opacity:0;}
        60%{opacity:1;}
        70%{opacity:0}
        80%{opacity:1;}
}
    
    #c_funny h3{          font-size: 15px;
      font-weight: 700;
      letter-spacing: 1px;
      line-height: 1.5;}
    #c_funny h3 span{border-bottom: dotted 2px  ;}
    #c_funny a{        
      color: #0e0e0e;
      background-color: #ee8c0c;
      padding: 11px 9px;
      border-radius: 50px;
      width: 500px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 18px auto;
      font-size: 17px;
      font-weight: 800;
      position: relative;}


            #c_funny a:hover span{transform: translateX(10px);}
            #c_funny a span{transition: 0.3s;}

/*///////////////////////////////////////////////////////////////////

??��????��?��???????????

/////////////////////////////////////////////////////////////////////*/


@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400&display=swap');
.scroll_down{
  position: absolute;
  z-index: 2;}

.scroll_down a{
color: #fffbff;
letter-spacing: 2px;
display: block;
background-size: 14px auto;
text-decoration: none;
}

.scroll_down a:before {
  position: absolute;
  top: 197px;
  left: -9px;
  display: block;
  width: 12px;
  height: 12px;
  content: "";
  border: 2px solid #fffbff;
  border-width: 0px 0 2px 2px;
  animation: check 2s infinite;
}

.scroll_down a:after {
  position: absolute;
  width: 35px;
  height: 35px;
  border: 2px solid #fffbff;
  content: "";
  border-radius: 100%;
  top: 191px;
  left: -20px;
}

.scroll_down a span::before {
  content: '';
  position: absolute;
  top: 190px;
  left: -20px;
  z-index: -1;
  width: 34px;
  height: 34px;
  border-radius: 100%;
  box-sizing: border-box;
  box-shadow: 0 0 0 0 #f06309;
  opacity: 0;
  animation: circle 2s infinite;
}

@keyframes circle {
  0% { opacity: 0; }
  30% { opacity: 1; }
  60% { box-shadow: 0 0 0 25px #f06309;
opacity: 0; }
  100% { opacity: 0; }
}

@keyframes check {
0%,100% { transform: translateY(0px) rotate(-45deg); }
50% { transform: translateY(5px) rotate(-45deg);  }

  }