@charset "utf-8";
.loading{ position:fixed; width:100%; min-width:100vw; height:100%; min-height:100vh; top:0; left:0; background:#EDEEEE; z-index:100; display:flex; justify-content:center; align-items:center; }
.loading img{ width:80px; margin:16px auto; animation:loadingAni 2s infinite alternate; }
@keyframes loadingAni{from{ transform:scale(.9); } to{ transform:scale(1); } }
picture,img{ display:block; }
picture img{ width:100%; height:auto;}
.wrap{ color:#333; overflow:clip; font-family:'SoDoSans','Noto Sans TC','微軟正黑體','Microsoft JhengHei','Apple LiGothic Medium',sans-serif;}
.wrap picture,
.wrap img{ width:100%; height:auto; }
.wrap section{ position:relative; }
.wrap a.btn{ transition:all .6s ease; font-size:clamp(1.4rem, 4.1vw, 1.8rem); line-height:1.8; padding:.2em 1.4em; border-radius:2em; border:solid 1px; background:#5A3000; color:#fff; border:unset;} 
.wrap a.btn_border{ border:solid 1px;}
.wrap a.more:after{ content:'\f101'; display:inline-block; margin-left:.2em; }

.wrap h2{ font-size:clamp(3.6rem, 9.2vw, 4.8rem); line-height:1.4; letter-spacing:.1em; font-weight:500; }
.wrap h3{ font-size:clamp(2.8rem, 8.2vw, 3.2rem); line-height:1.4; letter-spacing:.05em; font-weight:500;}
.wrap h4{ font-size:clamp(2rem, 6.1vw, 2.4rem); letter-spacing:0; }
.wrap p ,.wrap li{ font-size:clamp(1.4rem, 4.6vw, 1.8rem); text-align:justify; line-height:1.6;}
.wrap p.small{ font-size:clamp(1.2rem, 4vw, 1.4rem); }

.wrap .anchor_box{ display:flex; justify-content:space-between; padding:48px 16px 36px; margin:auto; background:url(../images/bg_noise.png), url(../images/anchor_bg.svg) center bottom; background-size:450px,auto 100%;}
.wrap .anchor_box a{ font-size:clamp(1.4rem, 3.6vw, 2.4rem); color:#284265; flex:1; }
.wrap .anchor_box a h3{ font-size:inherit; transition:all .8s;}
.wrap .anchor_box a:after{ content:'\f107'; }
.wrap .anchor_box a img{ font-size:inherit; transition:all .8s; width:50%; margin:8px auto; aspect-ratio:15 / 9; object-fit:contain;} 
.wrap .anchor_box a:hover img{ transform:translateY(-10px); }
.wrap .anchor_box a:hover h3{ transform:translateY(5px); }

.wrap .slick-list{ z-index:1; }
.wrap .slick-dotted .slick-dots{ display:flex; justify-content:center; flex-wrap:wrap; gap:0 16px; width:calc(100% - 80px); margin:16px auto 0; padding-bottom:24px; position:relative;}
.wrap .slick-dotted .slick-dots li{ width:12px; height:12px; border-radius:12px; background:#5a3000b3; transition:all 1s ease; cursor:pointer; } 
.wrap .slick-dotted .slick-dots li.slick-active{ width:30px; background:#5A3000; } 
.wrap .slick-dotted .slick-dots li button{ font-size:0; }
.wrap .slick-slider figure{ cursor:grab; }


.wrap .products figure .images_block{ width:100%; position:relative; }
.wrap .products figure .images_block img{ max-width:100%; position:relative;}
.wrap .products figure{ display:flex; flex-direction:column; gap:4vw; }
.wrap .products figcaption{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; text-align:left; height:100%;}
.wrap .products figcaption .text_block{ height:100%;}
.wrap .products figcaption .text_block .title{ display:flex; flex-wrap:wrap; align-items:baseline; gap:8px; margin-bottom:12px; }
.wrap .products figcaption .btn{ margin-top:16px; }


.wrap .major{ background-image:url(../images/bg_noise.png), url(../images/major_bg.svg), linear-gradient(167deg, #FFBC6E 0%, #FFE8CC 100%); background-repeat:repeat, no-repeat, no-repeat; background-position:0 0, bottom right, 0 0; background-size:450px, 200% auto, auto; padding:8vw 0 25vw; }
.wrap .major .container{ display:flex; flex-wrap:wrap; gap:12vw 4vw; }
.wrap .major figcaption .title{ color:#5A3000; }
.wrap .major figcaption .title h4.en{ width:100%; }
.wrap .major figure:nth-of-type(n+3){ max-width:370px; }

.wrap .minor{ background:#FFE6AD; padding:80px 0;}
.wrap .minor .container{ display:flex; flex-wrap:wrap; gap:12vw 4vw; }
.wrap .minor figure{ max-width:500px; margin:0 auto; }
.wrap .minor figure .btn{ color:#FFE6AD; }
.wrap .minor figcaption .title{ color:#5A3000; }

.wrap .cake{ background:#FFE6AD; padding-left:20px; padding-top:36px; border-top:solid 1px #5C2A15; }
.wrap .cake figure{ width:calc(100vw - 56px); max-width:260px; margin-right:16px; }
.wrap .cake figure .btn{ color:#FFE6AD; }
.wrap .cake figcaption{ color:#5A3000;  }
.wrap .cake figcaption .text_block{ display:flex; flex-direction:column; align-items:baseline; gap:8px; margin-bottom:12px; }

.wrap .event{ padding:60px 0 80px; background-color:#F0EADB; background-image:url(../images/bg_noise.png),url(../images/event_bg.svg); background-repeat:repeat,no-repeat; background-position:0 0, bottom center; background-size:450px, 100% auto;}
.wrap .event h2{ width:100%; margin:0 auto; color:#267647;}
.wrap .event h3{ font-size:clamp(2.6rem, 5.6vw, 2.8rem); color:#267647; line-height:1.4; margin:36px 0 16px; width:100%; display:flex; align-items:baseline; gap:8px; margin-top:2em;}
.wrap .event h3:after{ content:''; display:inline-block; width:auto; height:2px; background:#267647; flex:1 1 auto; } 
.wrap .event h4{ font-weight:400; counter-reset:subsection; color:#284265; font-weight:500; margin:1em 0 .2em;}
.wrap .event h4:before{counter-increment:section 1; content:counter(section) "."; margin-right:.2em; }
.wrap .event .text_block{ counter-reset:section; margin:0 auto; text-align:left; }
.wrap .event .text_block b{ color:#284265; font-weight:500; }
.wrap .event .text_block ol{ list-style:decimal; margin-left:1.4em; }
.wrap .event .text_block ul{ list-style:disc; margin-left:2.6em; }
.wrap .event .text_block p,
.wrap .event .text_block li{ margin-bottom:8px; letter-spacing:.005em; text-align:left; mix-blend-mode:multiply; }
.wrap .event .text_block h4 + p{ margin-left:1.4em; }
.wrap .event .text_block p strong{ font-size:1.25em; }
.wrap .event .text_block .btn{ margin-top:16px; }
.wrap .event figure{ display:flex; flex-direction:column; gap:8px; align-items:center; }
.wrap .event figure img{ width:75vw; max-width:282px; }
.wrap .event .btn{ background:#267647; }

.wrap .gift, .wrap .beverage, .wrap .online_banner{ line-height:0; }
.wrap .gift img,.wrap .beverage img,.wrap .online_banner img{ object-fit:cover; width:100vw; height:auto; }
.wrap .gift{ position:relative; }
.wrap .gift a{ position:absolute; width:100%; height:50%; top:0; left:0;}
.wrap .gift a:nth-of-type(2){ top:50%; }


.wrap .fixed{ position:fixed; right:0; bottom:58px; z-index:91; transform:translateX(0); transition:transform 1s ease-out; width:clamp(170px, 10% ,200px);}
.wrap .fixed .icon{ width:calc(100% - 12px); pointer-events:auto; border:unset; padding:unset; background:unset; }
.wrap .fixed .btn.toggle{ pointer-events:auto; position:absolute; left:0; top:0; background:#533119; width:24px; height:24px; padding:unset; display:flex; justify-content:center; align-items:center; border:unset; transform:translateX(-110%); border-radius:50%; }
.wrap .fixed.close{ transform:translateX(100%); }
.wrap .fixed.close .btn.toggle{ transform:translateX(-140%); }
.wrap .fixed.close .btn.toggle img{ transform:rotateY(180deg); }




/* 直式 */
@media (orientation:portrait){


}

/* 橫式 */
@media (orientation:landscape){
.wrap a.btn{ font-size:1vw; } 

.wrap h2{ font-size:3.3vw; }
.wrap h3{ font-size:2vw; }
.wrap h4{ font-size:1.6vw; }
.wrap p ,.wrap li{ font-size:1.2vw;}
.wrap p.small{ font-size:.97vw; }

.wrap .products figcaption .text_block .title{ margin-bottom:.8vw; }

.wrap .event{ background-position-y:62%,bottom;}

.wrap .gift a{ width:27%; height:100%; top:0; left:unset; right:35%; }
.wrap .gift a:nth-of-type(2){ width:35%;  top:0; left:unset; right:0;}

.wrap .fixed{ width:14vw; }
}








@media (min-width:819.98px) {
.wrap .anchor_box a img{ min-width:64px; }
.wrap .event figure{ display:flex; flex-direction:row-reverse; gap:36px; align-items:flex-start;} 


}



@media (min-width:991.98px){ 


 }
@media (min-width:1199.98px) {
.wrap .anchor_box{ padding:3vw 3.9vw; background-size:450px, cover; justify-content:center;} 
.wrap .anchor_box a{ width:20vw; flex:unset; font-size:1.8vw;}
.wrap .anchor_box a img{ width:60%; margin:0 auto 1vw;}

.wrap .products .container{ gap:0; max-width:unset; padding:0 3.9vw;} 

.wrap .major{ background-image:url(../images/bg_noise.png), url(../images/major_bg2.svg), url(../images/major_bg.svg), linear-gradient(180deg, #FFBC6E 0%, #FFE8CC 100%); background-repeat:repeat, no-repeat, no-repeat, no-repeat; background-position:0 0, 0 0, bottom right, 0 0; background-size:450px, 100% auto, 100% auto, auto; padding:8vw 0 6vw; }

.wrap .major figure{ flex-direction:row; width:100%; margin:auto; }
.wrap .major figure .images_block{ width:42vw; }
.wrap .major figure figcaption{ width:29vw; height:auto; padding-top:2vw; }
.wrap .major figure figcaption .text_block{ height:auto;}
.wrap .major figure:nth-of-type(even){ flex-direction:row-reverse; transform:translateY(-30%); align-items:flex-end; } 
.wrap .major figure:nth-of-type(even) figcaption{ text-align:right; align-items:flex-end; }
.wrap .major figure:nth-of-type(even) figcaption .text_block .title{ justify-content:flex-end; } 
.wrap .major figure:nth-of-type(even) figcaption .text_block p{ text-align:right; } 
.wrap .major figure:nth-of-type(n+3){ max-width:unset; width:80%; }
.wrap .major figure:nth-of-type(n+3) .images_block{ width:32vw; }
.wrap .major figure:nth-of-type(n+3) figcaption{ padding-top:1vw; }
.wrap .major figure:nth-of-type(4){ flex-direction:row-reverse; transform:translateY(-20%); align-items:flex-end; } 

.wrap .minor{ background-image:url(../images/bg_noise.png),url(../images/minor_bg.svg); background-repeat:repeat,no-repeat; background-position:0 0, top center; background-size:450px, 100% auto; padding:8vw 0 6vw; }
.wrap .minor figure{ width:30%; max-width:unset; gap:2vw;}
.wrap .minor figure figcaption .text_block .title h4{ width:100%; }

.wrap .cake{ border-top:unset; padding:0 0 4.4vw 0; background-image:url(../images/bg_noise.png),url(../images/cake_bg.svg); background-repeat:repeat,no-repeat; background-position:0 0, bottom center; background-size:450px, 100% auto; }
.wrap .cake .cake_list{ padding:4.4vw 0 1.4vw 3.9vw; border-top:solid 1px #5C2A15; border-bottom:solid 1px #5C2A15; }
.wrap .cake figure{ flex-direction:row; width:44vw; max-width:unset; gap:3vw; margin-right:3vw; } 
.wrap .cake figure .images_block{ flex:0 0 18vw; }
.wrap .cake figure figcaption{ justify-content:space-between; height:unset; }
.wrap .cake figure figcaption .text_block{ height:unset; padding-top:1vw; }
.wrap .cake .slick-dots{ width:100%; padding-top:1.5vw; justify-content:flex-start; }

.wrap .event .container{ max-width:62.5vw; }
.wrap .event{ padding:4.7vw 0 18vw;  } 
.wrap .event h3{font-size:2vw; margin:3vw 0 1.2vw; }


}

@media (min-width:1399.98px) { 

 



}
@media (min-width:1919.98px){
.wrap .cake .cake_list{ border-width:2px; }
.wrap .fixed{ width:9vw; }

}