@charset "shift-jis"
/*-----------------------------------------------------------------------------------------
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}
@supports not (min-block-size:100dvb){:where(html){block-size:100%}}
@media (prefers-reduced-motion:no-preference){:where(html:focus-within){scroll-behavior:smooth}}
:where(body){block-size:100%;block-size:100dvb;line-height:1.5;font-family:system-ui,sans-serif;-webkit-font-smoothing:antialiased}
: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(button){border-style:solid}
:where(a){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){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)}
:where(hr){border:none;border-block-start:1px solid;color:inherit;block-size:0;overflow:visible}
:where(:focus-visible){outline:2px solid var(--focus-color,Highlight);outline-offset:2px}
:where(.visually-hidden:not(:focus,:active,:focus-within,.not-visually-hidden)){clip-path:inset(50%)!important;height:1px!important;width:1px!important;overflow:hidden!important;position:absolute!important;white-space:nowrap!important;border:0!important}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
  font-weight: normal;
}

html {
  scroll-behavior: smooth;
}

a{text-decoration: none;}


/*-----------------------------------------------------------------------------------------
important
----------------------------------------------------------------------------------------*/
.smp{display: none !important;}
.hidden,.disp_no{display: none !important;}

/*-----------------------------------------------------------------------------------------
base
----------------------------------------------------------------------------------------*/
    :root{
        --white:#f1f1f1;
        --black:#3d241d;
        --org:#f23f00;
        --bg:#f0e4be;
    }


    html,body{
    color: var(--black);
    margin:0;
    padding:0;
    background-color: var(--bg);
    line-height:1.6;
    font-size: 16px;

    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;

    }
/*-----------------------------------------------------------------------------------------
common
----------------------------------------------------------------------------------------*/
.center{max-width: 1080px;margin: auto;}
.common-subtitle {margin: auto; width:fit-content;text-align: center;}


.i-btn::after,
.i-price_h::after,
.c_block::after,
.shop .btn::after
{
	content:"\25B6";
	display:inline-block;
	margin-left:4px;
    margin-right: 4px;
    font-size: 0.6em;
	animation:arrow 1s ease-in-out infinite;
}

@keyframes arrow{
	0%,100%{
		transform:translateX(0);
	}
	50%{
		transform:translateX(4px);
	}
}

/*-----------------------------------------------------------------------------------------
#autumnsale
----------------------------------------------------------------------------------------*/
#autumnsale{
    background-color: var(--bg);
    background-image: url(https://ic4-a.wowma.net/mi/w/1280/h/1280/q/90/ic4-a.wowma.net/mi/w/1280/h/1280/q/90/image.tokyolife.lol/44587804/image/autumnsale/bg_top.png);
    background-position: top center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

/*-----------------------------------------------------------------------------------------
header-wrap
----------------------------------------------------------------------------------------*/
.header-wrap{padding-top: 20px;}

/*-----------------------------------------------------------------------------------------
house-wrap
----------------------------------------------------------------------------------------*/
.house-wrap{position: relative;max-width: 750px;margin: auto;}
.housepict{width: 100%;}

.clickarea{width: 100%;}
.clickarea img{width: 15%;position: absolute;animation:poyon 1.8s ease infinite;}
@keyframes poyon{
	0%,100%{
		transform:scale(1);
	}
	50%{
		transform:scale(1.1);
	}
}

.clickarea a:nth-of-type(1) img{ bottom: 17%;  left: 16%;}
.clickarea a:nth-of-type(2) img{ top: 29%; left: 37%;}
.clickarea a:nth-of-type(3) img{ bottom: 17%; left: 37%;}
.clickarea a:nth-of-type(4) img{top:  29%;    right: 13%;}
.clickarea a:nth-of-type(5) img{ bottom: 17%;    right: 12%;}
.clickarea a:nth-of-type(6) img{top:  29%;left: 20%;}

.clickarea img{
	width:15%;
	position:absolute;
	animation:poyon 1.8s ease infinite;
	transition:.3s;
}
@keyframes poyon{
	0%,100%{transform:scale(1);}
	50%{transform:scale(1.08);}
}

/* �z�o�[�� */
.clickarea a:hover img{animation:glow 2s ease-in-out infinite;}
.clickarea a:hover img{
	animation:glow 1.8s ease-in-out infinite;
}
@keyframes glow{
	0%,100%{
		filter:
			brightness(1)
			drop-shadow(0 0 5px rgba(252, 252, 252, 0.918));
	}
	50%{
		filter:
			brightness(1.3)
			drop-shadow(0 0 20px rgba(255,220,120,.9))
			drop-shadow(0 0 30px rgba(255,220,120,.8))
			drop-shadow(0 0 40px rgba(255,180,0,.7))
			drop-shadow(0 0 70px rgba(255,120,0,.5));
	}
}


/*-----------------------------------------------------------------------------------------
item-wrap
----------------------------------------------------------------------------------------*/
.item-wrap{display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;}
.item{width: calc((100% - 40px ) / 3);}
#c7-wrap{padding-bottom: 50px;}
.shop{    width: calc((100% - 100px) / 5);
    background-color: #fdfdfd;
    border-radius: 10px;
    border: 3px solid #978161;
    text-align: center;
    padding: 10px;
    font-size: 0.9em;}
    .shop dt{    font-weight: bold;
    font-size: 2vw;}
.shop img{width: 80%;margin: auto;}
.shop .btn
{   background-color:var(--org);
    color: var(--white);
    border-radius: 90px;    font-weight: 500;
    padding: 0.5em;    display: flex;
    justify-content: center;
    align-items: center;}
    .shop:hover{opacity: 0.8;}
.shop:nth-of-type(1){
    border: 3px solid #347900;
    & dt{color: #347900;}
    & .btn{background-color:#347900 ;}}

.shop:nth-of-type(2){
    border: 3px solid #f25915;
    & dt{color: #f25915;}
    & .btn{background-color:#f25915 ;}}

.shop:nth-of-type(3){
    border: 3px solid #2e49be;
    & dt{color: #2e49be;}
    & .btn{background-color:#2e49be ;}}

.shop:nth-of-type(4){
    border: 3px solid #ff99cc;
    & dt{color: #ff99cc;}
    & .btn{background-color:#ff99cc ;}}

.shop:nth-of-type(5){
    border: 3px solid #e60116;
    & dt{color: #e60116;}
    & .btn{background-color:#e60116 ;}}




.item dl{display: flex;flex-direction: column;}
.item dt h3{text-align: center;font-weight: 700;padding: 0.2em;}
.item .pict-pickup{
    display: flex;flex-direction: column;
    overflow: hidden;
border-radius: 10px;}
.item .pict-pickup div{    
    background-color: var(--org);
    color: var(--white);
    text-align: center;
    font-weight: 500;
    padding: 0.2em;}
.i-price{
        display: flex;
    align-items: center;
    justify-content: center;
.i-price_h{font-weight: 700;}
.i-price_s{color: var(--org);font-size: 2em;font-weight: 700;}
}
.i-price_s span{font-size: 0.6em;}

.i-btn{
    font-size: 0.8em;
    background-color: var(--black);
    color: var(--white);padding: 0.5em 0;
max-width: 80%;text-align: center;
margin: 10px auto;border-radius: 90px;
display: flex;
    align-items: center;
    justify-content: center;

}


/*-----------------------------------------------------------------------------------------
navi
----------------------------------------------------------------------------------------*/
#navi{position: fixed;bottom: 20px;right: calc(50% - 650px);}
#navi ul{
    display: flex;flex-direction: column;width: 100px;}

#navi a:hover{opacity: 0.7;}


/*-----------------------------------------------------------------------------------------
#coupon
----------------------------------------------------------------------------------------*/

#coupon-wrap{width: 750px;
    margin: 0 auto 50px;
}
.coupon
{display: flex;
    flex-direction: column;
    gap: 10px;
}
#coupon-wrap .c_block img{width: 100px;    margin-right: 10px;}
.c_block{    background-color: #ffffff;
    border-radius: 10px;
    overflow: hidden;
    padding: 10px;
    box-sizing: border-box;box-shadow: 2px 2px 4px gray;

display: flex;
    justify-content: space-between;
    align-items: center;
}

    .c_block a{    display: flex;
    align-items: center;
    justify-content: flex-start;}
    .c_block p
    {    font-size: 1.5em;
    font-weight: 700;}
        .c_block p span
{    font-size: 0.7em;color: var(--org);}

.c_block:hover{opacity: 0.9;box-shadow: 1px 1px 1px gray;}