@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; }
.slick-dots{ display:flex; flex-wrap:wrap; gap:8px; width:calc(100% - 30px); margin:0 auto; justify-content:center; } 
.slick-dots button{ font-size:0; line-height:0; width:16px; height:16px; display:block; background:#6D0272; opacity:.4; border-radius:16px; cursor:pointer; transition:width .6s ease; }
.slick-dots .slick-active button{ opacity:1; width:32px; }

.wrap{ color:#333; overflow:clip;}
.wrap a.btn{ transition:all .6s ease; color:#6D0272; font-weight:500; line-height:1.2; padding:.4em 1em .5em 1.2em; border-radius:2em; }
.wrap a.btn.border{ border:solid 1px; }
.wrap p{ font-size:1.6rem;  line-height:1.5; text-align:justify; }
.wrap p.note_block{ font-size:1.4rem; text-align:left;}
.wrap .banner .images_block{ position:relative; }
.wrap .banner .images_block img{ width:100%; height:auto; }

.wrap h2{ line-height:1.4; letter-spacing:.05em; font-weight:500; }
.wrap h3{ line-height:1.4; font-weight:500; }
.wrap h4{ line-height:1.4; }
.wrap h5{ line-height:1.4; }
.wrap h6{ line-height:1.4;}
.NDAD{ position:sticky; left:0; bottom:0; background:#f2dadb; margin:24px auto 0; width:calc(100% - 20px); }
.NDAD img{ width:100%; height:auto; }

.opening{ position:fixed; top:0; left:0; z-index:99; pointer-events:none; width:100vw; height:100vh; background:linear-gradient(to bottom,  #6d0271 0%,#6d0271 26%,#6d0271 38%,#a15da2 50%,#a15da2 100%); }
.opening img{ position:absolute; bottom:0; width:100%; height:auto; }
.opening img.moon{ position:absolute; transition:all .7s .4s; } 
.opening img.moon.act{ position:absolute; opacity:0; transition:all .7s 1s; } 

.wrap .fixed{ position:fixed; right:0; bottom:58px; z-index:91; transition:transform 1s ease-out;  }
.wrap .fixed .btn.toggle{ pointer-events:auto; position:absolute; left:0; bottom:0; background:#A1856F; width:36px; height:36px; padding:unset; display:flex; justify-content:center; align-items:center; border:unset;} 
.wrap .fixed .btn.icon{ pointer-events:auto; border:unset; padding:unset;}
.wrap .fixed.close .btn.toggle img{ transform:rotateY(180deg); }
.wrap .fixed.close{ transform:translateX(100%); }
.wrap .fixed.close .btn.toggle{ transform:translateX(-120%); }

.kv{ position:relative; }
.kv img{ width:100%; height:auto; display:block; }

.wrap .video_bg{ background:url(../images/video_bg.png) center; background-size:cover;}
/*影片*/
.video_container{ line-height:0; width:100%; margin:0 auto;} 
.video_container .video_box{ position:relative; width:100%; max-width:1000px; display:inline-block; margin:0 auto; }
/*.video_container .video_box .video_block{ width:100%; padding-top:56.25%; aspect-ratio:560/315;  }
.video_container .video_box .video_block iframe{ position:absolute; top:0; left:0; width:100%; height:100%; }*/
.video_container .video_box .video_block{ width:100%; text-align:center; }
.video_container .video_box .video_block iframe{ position:relative; max-height:calc(100vh - 96px); aspect-ratio:394 / 315; }


.wrap .major_bg{ position:relative; padding:48px 0; background:url(../images/major_bg_pc.jpg) center center; background-size:auto 100%;}
.wrap .major{ position:relative; display:flex; flex-direction:column; gap:48px; } 
.wrap .major figure{ position:relative; display:flex; flex-direction:column; align-items:center;} 
.wrap .major figure .images_block{  width:calc(100% - 16px); margin:auto; }
.wrap .major figure figcaption{ position:relative; display:flex; flex-direction:column; gap:1.5vw; align-items:flex-start; padding:16px 20px 0; text-align:left;} 
.wrap .major figure figcaption .title{ color:#E73656; text-align:left; margin-bottom:12px; }
.wrap .major figure figcaption .title img{ width:80%; height:auto; margin-bottom:16px; } 
.wrap .major figure figcaption .btn{ background:#E73656; color:#fff; margin-top:8px; }
.wrap .major figure figcaption ul li{ display:inline-block; line-height:1.4; }
.wrap .major figure figcaption .info{ width:100%; height:10vw; object-fit:scale-down; object-position:left; }
.wrap .major figure.sp figcaption .title{ color:#6D0272; }
.wrap .major figure.sp figcaption .btn{ background:#6D0272; }
.wrap .major figure:nth-of-type(n+2) .images_block{  width:75%; }

.wrap .coffee-bear{ padding:48px 20px; display:flex; flex-direction:column; align-items:center; gap:48px; }
.wrap .coffee-bear .text_block{ position:relative; text-align:left; display:flex; flex-direction:column; align-items:flex-start; gap:24px; /*background:url(../images/coffee-bear_01@2x.png) right bottom no-repeat; background-size:25%;*/ }
.wrap .coffee-bear .text_block .deco{ position:absolute; bottom:0; right:0; width:50%; height:auto; transform:translate(16%, 22%);}
.wrap .coffee-bear .title{ color:#EE793F; }
.wrap .coffee-bear h3{ margin-bottom:.5em; }
.wrap .coffee-bear .btn{ background:#EE793F; color:#fff; }
.wrap .coffee-bear .images_block{ width:80%; }

.wrap .minor_bg{ background:#FADEC7; padding:48px 0;}
.wrap .minor_bg h2{ color:#3D4795; display:inline-block; margin-bottom:36px; }
.wrap .minor_bg h2:after{ content:''; display:block; margin:8px auto 0; width:2.6em; height:3px; background:#3D4795; border-radius:3px;  }
.wrap .minor{ display:flex; flex-wrap:wrap; justify-content:center; }
.wrap .minor figure{ min-width:360px; border-radius:50vw; padding:48px 0; background:linear-gradient(180deg, #FEF4EC 0%, #FADEC7 100%); }
.wrap .minor figure .title ,.wrap .minor figure .btn{ color:#EE793F;  }
.wrap .minor figure .title{ display:flex; align-items:baseline; justify-content:center; margin-bottom:12px; gap:.6em; }
.wrap .minor figure p{ text-align:center; }
.wrap .minor figure .btn{ margin-top:1em; } 
.wrap .minor figure .images_block{ width:280px; margin:0 auto 10px; }

.wrap .dp_bg{ background:#EFEFEF; background-image:url(../images/dp_bg_01.png), url(../images/dp_bg_02.png); background-repeat:no-repeat; background-position:-20% 8%, 162% -4%; background-size:45%, 60%; padding:48px 0 0;}
.wrap .dp_bg h2{ /*color:#3D3935;*/color: transparent; background-image:linear-gradient(143deg, #d1a35b, #ffce75 25%, #e3ab42 40%, #cfa25f 100%); background-clip: text; display:inline-block; margin-bottom:36px; }
.wrap .dp_bg h2:after{ content:''; display:block; margin:8px auto 0; width:2.6em; height:3px; background:linear-gradient(143deg, #d1a35b, #ffce75 25%, #e3ab42 40%, #cfa25f 100%); border-radius:3px;  }
.wrap .dp{ display:flex; flex-wrap:wrap; justify-content:center; }
.wrap .dp figure{ min-width:360px; border-radius:50vw; padding:48px 0; background:linear-gradient(180deg, #efefef00 0%, #FFFCF5 100%); }
.wrap .dp figure .title{ color:#3D3935; }
.wrap .dp figure .btn{ color:#976D3F; }
.wrap .dp figure .title{ display:flex; align-items:baseline; justify-content:center; margin-bottom:12px; }
.wrap .dp figure p{ text-align:center; }
.wrap .dp figure .btn{ margin-top:1em; } 
.wrap .dp figure .images_block{ width:280px; margin:0 auto 10px; }
.wrap .dp_bg > p:before{ position:relative; display:block; content:''; width:100%; height:1px; background:#5C5C5C; margin-bottom:8px; z-index:2; }
.wrap .dp_bg > p{ position:relative; display:inline-block; margin:24px 10px ; color:#3D3935;}

.wrap section.deco img{ object-fit:cover; object-position:center; width:100%; min-height:150px; }

.wrap .product{ position:relative; padding-bottom:24px; }
.wrap .product figure{ position:relative; padding:0 16px; margin-bottom:24px; border-radius:50vw; padding:48px 0; width:274px;} 
.wrap .product figure .images_block{  width:74%; margin:0 auto 8px;} 
.wrap .product figure h3{ margin-bottom:.3em; } 
.wrap .product figure .btn{ margin-top:1em; } 
.wrap .gift_bg{ background:#FEF4EC; background-repeat:no-repeat; background-image:url(../images/gift_left.png), url(../images/gift_right.png); background-position:5% 100%, 108% 100%; background-size:30vw; } 
.wrap .gift figure ,.wrap .gift figure .btn{ color:#EE793F; } 
.wrap .gift figure{ background:linear-gradient(180deg, #FEF4EC 0%, #FADEC7 100%); }
.wrap .gift figure:nth-of-type(even){ background:linear-gradient(180deg, #FADEC7 0%,  #FEF4EC 100%); }

.wrap .coffee_bg{ background:#EFD2E1; background-repeat:no-repeat; padding-top:48px; background-image:url(../images/coffee_left.png); background-position:5% 2%; background-size:19vw; } 
.wrap .coffee{ z-index:2; }
.wrap .coffee_bg p{ position:relative; display:inline-block; margin:0 10px 24px; color:#5C5C5C;}
.wrap .coffee_bg p:before{ position:relative; display:block; content:''; width:100%; height:1px; background:#5C5C5C; margin-bottom:8px; z-index:2; }
.wrap .coffee_bg p span{ position:relative; display:inline-block; }
.wrap .coffee_bg p .deco{ position:absolute; right:0; top:0; transform:translate(41%, calc(-100% - 30px)); width:44vw; }
.wrap .coffee figure ,.wrap .coffee figure .btn{ color:#6D0272; } 
.wrap .coffee figure{ background:linear-gradient(180deg, #F8EAF2 0%, #EFD2E1 100%); }
.wrap .coffee figure:nth-of-type(even){ background:linear-gradient(180deg, #EFD2E1 0%, #F8EAF2 100%); }

.wrap .beverage-and-online_bg{ background:url(../images/beverage-and-online_bg.jpg); background-position:center center; background-size:cover; padding:48px 0; display:flex; flex-direction:column; gap:56px; }
.wrap .beverage-and-online_bg .banner{ display:flex; flex-direction:column; align-items:center; gap:24px; } 
.wrap .beverage-and-online_bg .banner figcaption a.btn{ margin-top:16px; }
.wrap .beverage{ padding:0 12px;  }
.wrap .beverage .title ,.wrap .beverage h4{ color:#5F9D87;}
.wrap .beverage figcaption{ display:flex; flex-direction:column; gap:8px;  }
.wrap .beverage h2 span{ font-size:.66em; }
.wrap .beverage p{ text-align:center; }
.wrap .beverage h4 span,.wrap .beverage p span{ display:inline-block; }
.wrap .beverage .images_block{ width:84%; }
.wrap .beverage .btn{ background:#79AC9A; color:#fff; }
.wrap .online .title{ color:#EE9D3F;}
.wrap .online .btn{ background:#EE9D3F; color:#fff; }
.wrap .online .online_list{ width:100%; }
.wrap .online .online_list .slick-track{ padding-bottom:24px; }
.wrap .online .online_list .onlineP img{ object-fit:scale-down; width:100%; aspect-ratio:200/150; margin-bottom:8px;}


.wrap .event_bg{ position:relative; text-align:left; padding:48px 0; background:radial-gradient(closest-side at 50% 50%, #FADEC7 0%, #FEF4EC 100%) 0% 0%; }
.wrap .event_bg .deco{ position:absolute; top:0; left:0; object-fit:cover; object-position:24%; width:100%; height:80px; transform:translateY(-12px); pointer-events:none;}
.wrap .event_bg h2{ width:100%; text-align:center; margin:0 auto 1em; font-weight:500; }
.wrap .event_bg ul{ list-style:disc; }
.wrap .event_bg ol{ list-style:decimal; }
.wrap .event_bg ul,.wrap .event_bg ol{ margin-left:1.4em; line-height:1.4; }
.wrap .event_bg .text_block + .text_block{ margin-top:36px; }
.wrap .event_bg ul li,.wrap .event_bg ol li,.wrap .event_bg p{ font-size:4vw; margin-bottom:.5em; }
.wrap .event_bg p.note_block{ font-size:3.58vw; }

.wrap .event_bg .event{ padding:48px 20px; background:#fff; border-radius:24px; margin:0 20px;} 
.wrap .event_bg .event h2{ color:#EE793F;  }
.wrap .event_bg .event h4{ background:#EE793F; border-radius:4px; font-size:1.8rem; color:#fff; display:inline-block; padding:.3em 1.2em; margin-bottom:8px;} 
.wrap .event_bg .event strong{ font-weight:700; color:#EE793F; }
.wrap .event_bg .event a.more{ margin:16px 0; color:#EE793F; }
.wrap .event_bg .event .banner{ display:flex; flex-direction:column; }
.wrap .event_bg .event .images_block{ width:75%; margin:0 auto; }
.wrap .event_bg .event .images_block img{ width:100%; height:auto; }
.wrap .event_bg .about{ max-width:900px; padding:48px 20px; margin:0 auto;} 
.wrap .event_bg .about h2{ color:#6D0272; }






/* 直式 */
@media (orientation:portrait){
.fields{ margin:0 0 -3px 0; padding:5rem 0 2rem;}
.for_PC{ display:none; }
.btn.fixed .text_block:after{ font-size:1em; content:'\f101'; margin-left:4px; }

.opening img.moon{ width:60%; top:50%; left:20%; transform:translateY(-50%); }
.opening img.moon.act{ width:9%; top:61%; left:73%; }

.wrap h2{ /*font-size:clamp(2.8rem, 8vw, 3.2rem);*/ font-size:7.6vw; line-height:1.4; letter-spacing:.05em; font-weight:500; }
.wrap h3{ font-size:5.6vw; }
.wrap h4{ font-size:4.6vw; }
.wrap h5{ font-size:4.4vw; }
.wrap h6{ }
.wrap p ,.wrap section ul ,.wrap a.btn{ font-size:4.1vw; }
.wrap p.note_block{ font-size:3.5vw; }

.wrap .coffee-bear{ background:url(../images/coffee-bear_bg.jpg); background-size:cover; }
}
/* 橫式 */
@media (orientation:landscape){
.for_mobile{ display:none; }
.wrap a.more:hover{ background:rgba(255,255,255,.5); }

.opening img.moon{ width:29%; top:30%; left:24%; }
.opening img.moon.act{ width:4%; top:42.5%; left:36%; }
.video_container{ padding:48px 0; }

.wrap h2{ font-size:2.6vw; } /*標題*/
.wrap h3{ font-size:1.6vw; } /*品名*/
.wrap h4{ font-size:1.4vw; } 
.wrap h5{ font-size:1.3vw; } /*價格*/
.wrap p ,.wrap section ul ,.wrap a.btn{ font-size:1.17vw; } /*內文*/
.wrap p.note_block{ font-size:1.02vw; }

.wrap .coffee-bear{ background:url(../images/coffee-bear_bg_pc.jpg); background-size:cover; }

.wrap .beverage-and-online_bg{ background-image:url(../images/beverage-and-online_bg_pc.jpg);}
.wrap .event_bg ul li,.wrap .event_bg ol li,.wrap .event_bg p{ font-size:1.17vw; }
.wrap .event_bg p.note_block{ font-size:1.02vw; }

}
@media (min-width:991.98px) { 
.wrap .major_bg{ padding:4.6vw 0;}
.wrap .major figure figcaption .info{ height:3vw; }

.wrap .major figure{ flex-direction:row; margin:auto 40px; gap:4.6vw; }
.wrap .major figure .images_block{ margin:unset; }
.wrap .major figure figcaption{ max-width:33%; padding:0; }
.wrap .major figure:nth-of-type(1){ justify-content:center; }
.wrap .major figure:nth-of-type(1) .images_block{ width:48%;  }
.wrap .major figure:nth-of-type(1){ flex-direction:row-reverse; margin-bottom:10vw; }
.wrap .major figure.sp{ flex-direction:row; }
.wrap .major figure:nth-of-type(n+2) .images_block{  width:36%;  }
.wrap .major figure:nth-of-type(3){ justify-content:center; }
.wrap .major figure:nth-of-type(5){ flex-direction:row-reverse; justify-content:center; }

.wrap .coffee-bear{ padding:80px 0; flex-direction:row; justify-content:center; gap:10vw; } 
.wrap .coffee-bear .text_block{ width:31%; }
.wrap .coffee-bear .text_block .deco{width:45%; transform:translate(31%, 22%);}
.wrap .coffee-bear .images_block{ width:26%; }

.wrap .minor figure .images_block,
.wrap .dp figure .images_block{ width:65%; }

.wrap .gift_bg{ background-position:25% 100%, 75% 100%; background-size:10vw; }
.wrap .coffee_bg{ background-position:50% 4%; background-size:8vw; }
.wrap .coffee_bg p .deco{ transform:translate(46%, -76%); width:25vw; }

.wrap .event_bg .deco{ height:14vw; object-fit:cover; transform:translateY(-40%); object-position:58%; }
}
@media (min-width:1199.98px){
.wrap .major figure figcaption .info{ height:2.6vw; }

.wrap .minor figure{ flex:0 0 33.3%; }
.wrap .minor figure:nth-of-type(even){ background:linear-gradient(180deg, #FADEC7 0%, #FEF4EC 100%); }

.wrap .dp_bg{ background-position:0% 3%, 76% 88%; background-size:18%; } 
.wrap .dp figure{ flex:0 0 33.3%; padding:96px 0 48px;}
.wrap .dp figure:nth-of-type(even){ background:linear-gradient(180deg, #FFFCF5 0%, #EFEFEF 100%); }

.wrap .gift_bg{ background-position:20% 100%, 82% 100%; background-size:8vw; }
.wrap .coffee_bg{ background-position:40% 2%; background-size:7.5vw; }
.wrap .coffee_bg p .deco{ transform:translate(60%, -76%); width:20vw; }

.wrap .beverage-and-online_bg{ flex-direction:row; align-items:stretch; justify-content:center; gap:0 10vw; }
.wrap .beverage-and-online_bg .banner{ width:35%; }
.wrap .beverage{ display:flex; justify-content:space-between; }
.wrap .beverage figcaption{ gap:12px; }
.wrap .beverage h4 span,.wrap .beverage p span{ display:unset; }


.wrap .online .online_list{ display:flex; flex-wrap:wrap; gap:36px 1.7vw; justify-content:center}
.wrap .online .online_list .onlineP{ width:calc(50% - 24px); }

.wrap .event_bg{ background-image:url(../images/event_bg_pc.jpg); background-position-x:center; background-size:auto 100%; padding:64px 0; }
.wrap .event_bg .deco{ height:147px; object-fit:scale-down; transform:translateY(-30%); object-position:center;} 
.wrap .event_bg .event{ max-width:73%; margin:0 auto; padding:60px 5.8vw 48px; }
.wrap .event_bg .event .banner{ flex-direction:row; gap:24px; }
.wrap .event_bg .event .banner .images_block{ flex:0 0 282px; }
.wrap .event_bg ul li,.wrap .event_bg ol li,.wrap .event_bg p{ font-size:1.17vw; }
.wrap .event_bg p.note_block{ font-size:1vw; }
.wrap .event_bg .about{ max-width:63%;}

}
/* xxl applies to x-large devices (large desktops, less than 1400px) */
@media (min-width:1439.98px) { 
.container{ padding:0 40px;}
.wrap h3{ font-size:1.4vw; } /*品名*/
.wrap h4{ font-size:1.2vw; } 
.wrap h5{ font-size:1.1vw; } /*價格*/
.wrap p ,.wrap section ul ,.wrap a.btn{ font-size:1vw; } /*內文*/
.wrap p.note_block{ font-size:.8vw; }

.wrap .gift_bg{ background-position:16% 100%, 84% 100%; }
.wrap .coffee_bg{ background-position:33% 2%; background-size:6.5vw; }
.wrap .coffee_bg p .deco{ transform:translate(79%, -76%); width:18.5vw; }
}