@charset "euc-jp";


/*///////////////////////////////////////////////////////////////////
reset
/////////////////////////////////////////////////////////////////////*/
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}:where([hidden]:not([hidden='until-found'])){display:none!important}:where(html){-webkit-text-size-adjust:none;color-scheme:dark light;tab-size:2;scrollbar-gutter:stable}:where(html:has(dialog:modal[open])){overflow:clip}@media (prefers-reduced-motion:no-preference){:where(html:focus-within){scroll-behavior:smooth}}:where(body){line-height:1.5;font-family:system-ui,sans-serif;-webkit-font-smoothing:antialiased}:where(button){all:unset}:where(input,button,textarea,select){font:inherit;color:inherit}:where(textarea){resize:vertical;resize:block}:where(button,label,select,summary,[role='button'],[role='option']){cursor:pointer}:where(:disabled){cursor:not-allowed}:where(label:has(>input:disabled),label:has(+input:disabled)){cursor:not-allowed}:where(a){color:inherit;text-underline-offset:.2ex}:where(ul,ol){list-style:none}:where(img,svg,video,canvas,audio,iframe,embed,object){display:block}:where(img,picture,svg,video){max-inline-size:100%;block-size:auto}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(h1,h2,h3){line-height:calc(1em + 0.5rem);text-wrap:balance}:where(hr){border:none;border-block-start:1px solid;color:inherit;block-size:0;overflow:visible}:where(dialog){border:none;background:none;inset:unset;max-width:unset;max-height:unset}:where(dialog:not([open])){display:none!important}:where(:focus-visible){outline:3px solid CanvasText;box-shadow:0 0 0 5px Canvas;outline-offset:1px}:where(:focus-visible,:target){scroll-margin-block:8vh}:where(.visually-hidden:not(:focus-within,:active)){clip-path:inset(50%)!important;height:1px!important;width:1px!important;overflow:hidden!important;position:absolute!important;white-space:nowrap!important;border:0!important}
img{width: 100%;}
h1,h2,h3,h4,h5,p{    margin:0; padding:0; font-size:100%;}
/*///////////////////////////////////////////////////////////////////

base

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

#wrap{
    color: #403732;
    background-color:#e9e3db;
    font-size: 14px;
    font-family:"Zen Maru Gothic", "Noto Sans JP", sans-serif;
    text-align: center;
    width: 100%;
    background-attachment: fixed;
    background-image: url(https://ic4-a.wowma.net/mi/w/1280/h/1280/q/90/image.wowma.click/44587884/image/wintercollection_home/rack-kan/back_house.png);
    background-position: bottom right;
    background-repeat: no-repeat;
}
.smp,.hidden{display: none !important;}

.inner{        position: relative; z-index: 1;}

a{text-decoration: none;color: #403732;}
a:hover{}


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

�ƥ�����

/////////////////////////////////////////////////////////////////////*/
h1{      font-size: 30px;
    font-weight: 700;}
    h1 span,span.mini{font-size: 20px;}
/*����*/
main h2{  font-size: 36px;color: #de510b;}
h2.sub{font-size: 30px;}
/*���Ф����ƥ�����*/
h3{margin: 1rem ;}
/*����̾*/
h4{margin: 0.5rem ;}
/*�������ܥ���*/
h5{}


/*--��������--*/
.check{
    position: absolute;
    background-color: #403732;
    color: #e9e3db;
    padding: 4px 10px;
    top: 0;
    left: 0;}


/*�դ�����*/
.balloon1 {
    position: relative;
    display: inline-block;
    margin: 1.5em 0;
    padding: 7px 10px;
    min-width: 120px;
    max-width: 100%;
    font-size: 16px;
    background: #de510b;  animation: btn_animation 2s infinite;
  }
  
  .balloon1:before {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -15px;
    border: 15px solid transparent;
    border-top: 15px solid #de510b;
  }
  
  .balloon1 h2 {
    color: #f3f0ec !important;
    margin: 0;
    padding: 0;        margin: 0.5rem 2rem;
  }

  @keyframes btn_animation {
    0% {
        transform: translate(4px, 0px);
    }
    5% {
        transform: translate(-4px, 0px);
    }
    10% {
        transform: translate(4px, 0px);
    }
    15% {
        transform: translate(-4px, 0px);
    }
    20% {
        transform: translate(4px, 0px);
    }
    25% {
        transform: translate(-4px, 0px);
    }
    30% {
        transform: translate(0px, 0px);
    }
  }
  
  

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

�ѡ���

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


/*--���?�ܥ���--*/
.button_blk{        
    background-color: #403732;
    position: relative;
    border-radius: 90px;
    font-size: 12px;
    padding: 0.5rem 4rem;
    width: fit-content;
    margin: 3% auto 0;
    display: flex;
        align-items: center;
        justify-content: center;
    color: #e9e3db;}
.button_blk a{color: #e9e3db;}
a .button_blk:hover{background-color: #403732b4;        transition: all .18s ease-in-out;}

/*--�����ݥ��󥯥ܥ���--*/

.coupon_btn_link {
    display: flex;
    justify-content:space-between;
    width: 90%;
    margin: 0 auto;
}
.coupon_btn_link.clm01 > li {
    width: 100%;
}
.coupon_btn_link.clm02 > li {
    width: 100%;
    margin: 0 1%;
}

.button_blk01{        
    background-color: #403732;
    position: relative;
    border-radius: 90px;
    font-size: 12px;
    padding: 0.5rem 4rem;
    /* width: fit-content; */
    /* margin: 3% auto 0; */
    display: flex;
        align-items: center;
        justify-content: center;
    color: #e9e3db;}
.button_blk01 a{color: #e9e3db;}
a .button_blk01:hover{background-color: #403732b4;        transition: all .18s ease-in-out;}

/*--���п��δݤ���������--*/
.i_notification{
    position: absolute;
    right: 10px;
    top: -10px;
    background-color: #97c803 !important;
    border-radius: 90px;
    width: fit-content;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 14px;
}
.i_notification p{color: #e9e3db !important;font-size: 10px;}

/*�����륢������*/
main .i_notification{    top: 10px;padding:19px  5px;}
main .i_notification p{font-size: 14px;}

/*--�Хʡ�--*/
.bn_icon{gap: 20px;
    display: flex;        
    justify-content: center;
    margin: 10px 0 0;}

.bn_icon .icon_r{        
    background-color: #403732;
    color: #e9e3db;
    border-radius: 90px;
    display: flex;
    width: 127px;
    height: 22px;
    justify-content: center;
    align-items: center;}


    .bn_event{gap: 10px;
        display: flex;
        width: 80%;
        margin: auto;
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;}
      .bn_event a{width: calc((100% - 10px)/ 2) }

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

manu

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

/*�ܥ�����*/
.menu_button{
    
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;margin:30px 0;}

.menu_button a{    height: 4rem;
        width: calc((100% - 20px) / 3);
        display: flex;
        justify-content: center;
        border-radius: 20px;        border: #e9e3db 1px solid;
        line-height: 1rem;
        color: #e9e3db;
        transition: all .18s ease-in-out;
        position: relative;
        overflow: hidden;
        align-items: center;}

        .menu_button a::before {
            content: "";
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;
            background: #e9e3db;
            transform-origin: 100% 50%;
            transform: scaleX(0);
            transition: transform ease .3s;
          }
          .menu_button a:hover {
            color: #de510b;
          }
          .menu_button a:hover::before {
            transform-origin: 0% 50%;
            transform: scaleX(1);
          }






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

header

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

header{        
    position: fixed;
    z-index: 99;
    left: 0;
    top: 0;        font-size: 12px;
    background-color:#de510b;
    max-width: 400px;
    height: 100vh;
    display: flex;
    align-items: center;}

/*------nav------*/

header nav .inner{width: 100%;padding: 40px;box-sizing: border-box;}
header nav h1 img{width: 80%;margin: auto;}


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

main

/////////////////////////////////////////////////////////////////////*/
main{margin-left: 400px;width: calc(100% - 400px);position: relative;}
main section > .inner{width: 750px;margin: auto;        padding: 50px 0;}

main .backline{         position: fixed; left: 400px; bottom: 0;        z-index: 2;}
main .backlinel{         position: fixed;right: 0px; bottom: 0;        z-index: 2;}
    main .backline img,main .backlinel img{width: auto;height: calc(100vh - 50px);}

/*�ե������ȥӥ塼*/
main #top{        
    background-color: #cfb3a3;
    position: relative;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-family: "Zen Maru Gothic", serif;
    font-weight: 900;
    font-style: normal;;
}

    main #top .inner{width: 100%;}
    main #top .inner p:first-of-type{
        font-size: 2vw;padding: 1rem ;
        font-weight: 900;}
    main #top .inner p:first-of-type span{color: #de510b;}
    main #top .inner div#subtitle{        
        font-size: 6vw;
        font-weight: 900;
        display: flex;
        justify-content: center;
    }
    main #top .inner div#subtitle rt{    font-size: 20px;}
    main #top .topimage{position: fixed; width: 100%;}
    main #top .topimage .light{        position: absolute;animation: blinking 4s ease-in-out infinite alternate;        mix-blend-mode: plus-lighter;
        top: 0;}
        @keyframes blinking {
            0% {
                opacity: 0;
            }
            100% {
                opacity: 0.8;
            }
        }

    #subtitle span{margin: 0;padding: 0;display: inline-block;	}
    #subtitle span:nth-of-type(1){animation-name:blurAnime;animation-duration:2s;}
    #subtitle span:nth-of-type(2){animation-name:blurAnime;animation-duration:3s;}
    #subtitle span:nth-of-type(3){animation-name:blurAnime;animation-duration:4s;}
    #subtitle span:nth-of-type(4){animation-name:blurAnime;animation-duration:5s;}
    #subtitle span:nth-of-type(5){animation-name:blurAnime;animation-duration:6s;}
    #subtitle span:nth-of-type(6){animation-name:blurAnime;animation-duration:7s;}
    #subtitle span:nth-of-type(7){animation-name:blurAnime;animation-duration:8s;}

    


/*�طʿ�*/
#c_menu{background-color: #f3f0ec;}
#c_otoku{         
    padding: 50px 0;
    background-color: #de510bc4;
}
#c_pkpkcp{         
    padding: 50px 0;
    background-color: #403732ce;
}
#c_otoku .inner,#c_pkpkcp .inner{    
    padding: 50px;
    color: #e9e3db;
    border-radius: 40px;
    border: 1px solid;}

.corner_wrap{        backdrop-filter: blur(5px) !important;
    background-color: #f3f0ecc2;}

/*Ź���ȼ��ɲ�*/
.sale_txt{
    font-size: 2vw;
    padding: 1rem;
    font-weight: 900;
    font-family: "Zen Maru Gothic", serif;
}



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

main > item

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

.item > ul{  display: flex;gap: 20px;flex-wrap: wrap;}

.item > ul li.clm_1{width: calc(100%);}
.item > ul li.clm_2{width: calc((100% - 20px)/ 2);
    display: flex;
    flex-direction: column;
    justify-content: space-between;}

/*����̾�����ʲ���*/
.item_title{position: relative;}
.item_title p{font-size: 12px;
    margin: 0.5rem 1rem;}

/*�����������???*/
.item_type{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1px;
    justify-content: space-between;}
.item_type a{  flex-grow:1; margin-bottom: 0.3%;}


.item_type div:first-of-type{
    display: flex;
    padding: 0.5rem 0;
    justify-content: center;
    background-color: #de510b;
    color: #e9e3db;
}

    .item_type div:hover{    background-color: #de510bd7;}
    .item_type h5 span{font-size: 10px;margin-left: 0.5rem;}

.prices{     color: #de510b; margin: 0.5rem 0;font-size: 18px;}

/*�������*/
    .item .keyword{        
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        padding: 2rem;
        gap: 20px;
        margin: 20px 0;
        border: #d1ccc5d1 1px solid;}
    .item .keyword p{        background-color: #d1ccc5d1;
        padding: 0.5rem 1rem;
        border-radius: 10px;}

/*���֥���*/
.subcate{background-color: #d1ccc5d1;
    border-radius: 20px;
    padding: 20px;
    margin: 20px 0;}
/*///////////////////////////////////////////////////////////////////

�ݤ��ݤ��᡼����

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

/*����*/
.pkpk{    position: fixed;
    z-index: 99;
    top: 0;
    right: 0;
    height: 50px;
    gap: 10px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
color: #e9e3db;
font-weight: 700;
padding: 0 10px;
background-color: #403732;}

.pkpk p:first-of-type{font-size: 10px;}

.progress-bar {
    border-radius: 90px;
    width: 600px;
    height: 20px;
  }


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

���Ȥ������ʡ�/�ݤ��ݤ�����

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

#c_otoku h3{         
    font-size: 18px;
    color: #403732;
    font-weight: 800;
    display: flex;
    justify-content: center;
    align-items: center;}

    #c_otoku h3 .material-symbols-outlined {
        align-self: flex-start;
    }
    
#c_otoku p,#c_pkpkcp p{ display: flex;
    align-items: center;
    justify-content: center; }
#c_otoku p img{width: 50px !important;}

#c_pkpkcp .button_blk01{border: #de510b 1px solid; }

#c_otoku hr{        border: none;
    margin-bottom: 20px;
    width: 50%;
    margin: 0 auto 10px;
    display: block;
    height: 2px;
    /* padding-bottom: 10px; */
    background-color: #403732;}

#c_pkpkcp h2{font-size: 14px;color: #de510b;}
    #c_pkpkcp p{}

#c_pkpkcp h3{        font-size: 20px;
    font-weight: 900;}

span.wave{  
    text-decoration: #de510b wavy underline;}


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

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

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

.scrolldown1{
    /*������֢����֤��?��Ĵ�����Ƥ�������*/
	position:absolute;
	left:50%;
	bottom:10px;
    /*���Τι⤵*/
	height:50px;
}

/*Scroll�ƥ����Ȥ�����*/
.scrolldown1 span{
    /*�������???*/
	position: absolute;
	left:-15px;
	top: -15px;
    /*�ƥ����Ȥη���*/
	color: #ffffff;
	font-size: 0.7rem;
	letter-spacing: 0.05em;
}

/* �������� */
.scrolldown1::after{
	content: "";
    /*�������???*/
	position: absolute;
	top: 0;
    /*�����*/
	width: 1px;
	height: 30px;
	background: #ffffff;
    /*����ư��1.4�ä�����ư�����ʱ�˥롼��???*/
	animation: pathmove 1.4s ease-in-out infinite;
	opacity:0;
}

/*�⤵�����֡�Ʃ�᤬�Ѳ����������夫�鲼��ư��*/
@keyframes pathmove{
	0%{
		height:0;
		top:0;
		opacity: 0;
	}
	30%{
		height:30px;
		opacity: 1;
	}
	100%{
		height:0;
		top:50px;
		opacity: 0;
	}
}

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

���� 

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

.blinking{
	-webkit-animation:blink 1.5s ease-in-out infinite alternate;
    -moz-animation:blink 1.5s ease-in-out infinite alternate;
    animation:blink 1.5s ease-in-out infinite alternate;
}
@-webkit-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@-moz-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
/*///////////////////////////////////////////////////////////////////

�� 

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

/*** ��̡ʶ��̡�??? ***/
.snows div{
    position: fixed; /*���̸���*/
    top: -250px; /*�������???*/
    left: 0;
    border-radius: 50%; /*�ݷ�*/
    background: #fff; /*���??*/
    opacity: 0.9; /*�㴳Ʃ����*/
  }
  
  /*** ���������??? ***/
  .snows div:nth-child(1){
    width: 10px;
    height: 10px;
    filter: blur(2px); /*�ܤ���*/
    /* ��240px���ϰϤDZ�(ʣ��)���� */
    box-shadow:
      5vw -40px 0 #fff,
      10vw 150px #fff,
      15vw -230px #fff,
      22vw 240px #fff,
      30vw 120px #fff,
      35vw -180px #fff,
      44vw 240px #fff,
      50vw 0 #fff,
      60vw 180px #fff,
      68vw 40px #fff,
      74vw -130px #fff,
      81vw -240px #fff,
      88vw 100px #fff,
      95vw 60px #fff;
      animation: fall 12s linear infinite;/*�*/
  }
  
  /*** ���������???2 ***/
  .snows div:nth-child(2){
    width: 10px;
    height: 10px;
    filter: blur(2px); /*�ܤ���*/
    /* ��240px���ϰϤDZ�(ʣ��)���� */
    box-shadow:
      7vw 220px 0 #fff,
      35vw 20px #fff,
      68vw 100px #fff,
      93vw -190px #fff;
    animation: fall 12.5s linear infinite;/*�*/
    animation-delay: 6s; /*�����ٱ�*/
  }
  
  /*** �椰�餤�����??? ***/
  .snows div:nth-child(3){
    width: 14px;
    height: 14px;
    filter: blur(3px); /*�ܤ���*/
    /* ��233px���ϰϤDZ�(ʣ��)���� */
    box-shadow:
      12vw 5px 0 #fff,
      32vw -100px #fff,
      45vw -180px #fff,
      68vw 40px #fff,
      77vw 65px #fff,
      94vw 230px #fff;
    animation: fall 10s linear infinite; /*�*/
    animation-delay: 6s; /*�����ٱ�*/
  }
  
  /*** �礭������ ***/
  .snows div:nth-child(4){
    width: 20px;
    height: 20px;
    filter: blur(8px); /*�ܤ���*/
    /* ��222px���ϰϤDZ�(ʣ��)���� */
    box-shadow:
      40vw -200px #fff,
      80vw 220px #fff;
    animation: fall 7s linear infinite; /*�*/
    animation-delay: 4s; /*�ٱ�*/
  }
  
  /*** ����˥᡼�����??? ***/
  @keyframes fall{
    0%{
      top: -250px;
    }
    100% {
      top: calc(100% + 250px);
    }
  }
  
  /*///////////////////////////////////////////////////////////////////

blur

/////////////////////////////////////////////////////////////////////*/
.blur{
	animation-name:blurAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
}


@keyframes blurAnime{
  from {
	filter: blur(10px);
	transform: scale(1.02);
	opacity: 0;
  }

  to {
	filter: blur(0);
	transform: scale(1);
	opacity: 1;
  }
}