@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; background:#E9F5F3; }
.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:#4DA59A; 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, 7.1vw, 3.2rem); line-height:1.4; letter-spacing:.05em;  font-weight:500; }
.wrap h4{ font-size:clamp(2rem, 5.1vw, 2.4rem); letter-spacing:0; font-family:'SoDoSans'; }
.wrap p ,.wrap li{ font-size:clamp(1.4rem, 4.1vw, 1.8rem); text-align:justify; line-height:1.6;}
.wrap p.small{ font-size:.87em; }
.wrap .title{ display:flex; flex-wrap:wrap; align-items:baseline; gap:8px; margin-bottom:12px; }



.wrap .online_banner{ line-height:0; background:#F4F2EE; background-repeat:no-repeat; background-image:url(../images/online_banner_deco_1.svg), url(../images/online_banner_deco_2.svg), url(../images/online_banner_deco_3.svg); background-position:right top, left bottom, right bottom; }

.wrap .event{ padding:60px 0; background-color:#D2F0FD; background-image:url(../images/event_bg_2.svg),url(../images/event_bg.svg); background-repeat:no-repeat; background-size:100% auto;}
.wrap .event h2{ width:100%; max-width:426px; margin:0 auto; }
.wrap .event h3{ font-size:clamp(2.6rem, 5.6vw, 2.8rem); color:#4DA59A; 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:#4DA59A; flex:1 1 auto; } 
.wrap .event h4{ font-size:clamp(1.8rem, 5.1vw, 2.2rem); font-weight:400; counter-reset:subsection; color:#5582BF; 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; max-width:900px; margin:0 auto; text-align:left; }
.wrap .event .text_block b{ color:#5582BF; 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{ font-size:clamp(1.4rem, 4.1vw, 1.6rem); margin-bottom:8px; letter-spacing:.005em; }
.wrap .event .text_block p.small{ font-size:.8em; }
.wrap .event .text_block h4 + p{ margin-left:1.4em; }
.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 .beverage{ line-height:0; }
.wrap .beverage img{ object-fit:cover; width:100%; }
.wrap .online_banner img{ object-fit:cover; width:100%; }

/*.wrap .gift .title{ color:#458B6F; }
.wrap .gift figure img{ object-fit:cover; object-position:50%; width:100%; height:auto; }
.wrap .gift figure figcaption{ padding:16px; text-align:justify; }
.wrap .gift figure figcaption .btn{ margin-top:1em; }
.wrap .gift figure:nth-of-type(2){ background:linear-gradient(180deg, #B9E5CB 0%, #E9F5F3 40%) 0% 0%; }
.wrap .gift figure:nth-of-type(2) img{ width:68%; margin:0 auto; }*/
.wrap .gift{ position:relative; }
.wrap .gift a{ position:absolute; }



.wrap .products.info{ background:#E9F5F3 url(../images/info_bg.svg) 5% top no-repeat; padding:60px 0;}
.wrap .products.info h2{ color:#4DA59A; display:inline-block; margin-bottom:.8em; }
.wrap .products.info h2:after{ content:''; height:20px; width:100%; display:block; background-image:radial-gradient(circle, #4DA59A 40%, transparent 50%); background-position:0 0; background-size:20px 4px; background-repeat:repeat-x;  }
.wrap .products.info .info_list{ display:flex; flex-direction:row; align-items:flex-start; gap:48px; flex-wrap:wrap; justify-content:center;} 
.wrap .products.info .info_list figure{ width:70%; max-width:300px;}
.wrap .products.info .info_list figure img{ border-radius:12px; margin-bottom:12px; }
.wrap .products.info .info_list figcaption{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.wrap .products.info .info_list figcaption h3{ color:#006F3F; font-size:clamp(2.4rem, 5.1vw, 2.8rem);}
.wrap .products.info .info_list figcaption .btn{ background:#006F3F; }


.wrap .major{ display:flex; flex-direction:column; align-items:flex-start; gap:48px; }
.wrap .major .container{ display:flex; flex-direction:column; align-items:flex-start; gap:24px; }
.wrap .major .images_block{ width:100%; position:relative; }
.wrap .major .images_block img{ max-width:100%; position:relative;}
.wrap .major figcaption{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; text-align:left;}
.wrap .major figcaption .title{ color:#4DA59A; }
.wrap .major figcaption .title h4.en{ width:100%; }
.wrap .major figcaption .btn{ margin-top:16px; }

.wrap .kv{ background-color:#FFF2BE; background-image:url(../images/kv_bg.svg),url(../images/major_bg_even.svg); background-repeat:no-repeat; }

.wrap .kv .bg{ width:100%; }
.wrap .kv .bg img{ width:100%; height:auto; -webkit-mask-image:url(../images/kv_mask.svg); mask-image:url(../images/kv_mask.svg); mask-size:cover; }


.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{ pointer-events:auto; border:unset; padding:unset; background:unset; }
.wrap .fixed .btn.toggle{ pointer-events:auto; position:absolute; left:0; top:0; background:#4DA59A; width:24px; height:24px; padding:unset; display:flex; justify-content:center; align-items:center; border:unset; transform:translateX(0%); 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){
.wrap .online_banner{ background-size:25%; }

/*.wrap .gift figure{ padding-bottom:24px; }*/
.wrap .gift img{ width:100%; aspect-ratio:390/1204;  }
.wrap .gift a{ width:100%; display:block; }
.wrap .gift a:nth-of-type(1){ top:0; height:52.3%;}
.wrap .gift a:nth-of-type(2){ top:52.3%; height:47.7%; }

.wrap .kv{ padding-bottom:14vw; background-position:-175% bottom,60% bottom; background-size:80% auto,auto 40%; }


.wrap .anchor_box{ display:flex; justify-content:space-between; padding:0 16px; max-width:1200px; margin:0 auto 36px;}
.wrap .anchor_box a{ font-size:clamp(1.4rem, 3.6vw, 2.4rem); color:#5582BF; 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; aspect-ratio:1/1; object-fit:scale-down; object-position:bottom; width:50%; margin:12px auto;}
.wrap .anchor_box a:hover img{ transform:translateY(-10px); }
.wrap .anchor_box a:hover h3{ transform:translateY(5px); }

}

/* 橫式 */
@media (orientation:landscape){
.wrap .event{ background-position-y:62%,bottom;}
/*.wrap .gift{ position:relative; }
.wrap .gift figure:nth-of-type(1){ position:relative; }
.wrap .gift figure:nth-of-type(1) figcaption{ position:absolute; top:50%; left:35%; }
.wrap .gift figure:nth-of-type(1) p{ width:22em;}
.wrap .gift figure:nth-of-type(2){ position:absolute; right:0%; bottom:0; height:84%; }
.wrap .gift figure:nth-of-type(2){  padding:24px; width:420px; display:flex; flex-direction:column; justify-content:center; background:linear-gradient(180deg, #E9F5F300 0%, #e9f5f3d6 40%) 0% 0%;}
.wrap .gift figure:nth-of-type(2) img{ margin-top:48px; }
.wrap .gift figure:nth-of-type(2) .title{flex-direction:column; justify-content:center; }
.wrap .gift figure:nth-of-type(2) figcaption p{ width:16.5em; }
.wrap .gift h3{ font-size:2.1vw; }
.wrap .gift h4{ font-size:1.5vw; }
.wrap .gift h4.en{ width:100%; }
.wrap .gift p{ font-size:1.12vw; }
.wrap .gift p.small{ font-size:.9vw; }*/
.wrap .gift img{ aspect-ratio:1366 / 700; object-fit:cover;  }
.wrap .gift a{ top:0; height:100%; display:block; }
.wrap .gift a:nth-of-type(1){ left:0; width:71%; }
.wrap .gift a:nth-of-type(2){ left:71%; width:29%; }



.wrap .products.info{ padding-bottom:0;}

.wrap .kv{ padding-top:36px; padding-bottom:10vw; margin-bottom:36px; background-position:2% bottom, center bottom; background-size:40% auto, auto 55%; }
.wrap .kv .bg{ position:relative; max-width:1280px; margin:0 auto; }
.wrap .kv .bg img{ -webkit-mask-image:url(../images/kv_pc_mask.svg); mask-image:url(../images/kv_pc_mask.svg); }
.wrap .kv .bg:after{ position:absolute; right:0; top:0; transform:translate(36%,-13%); content:''; width:10%; height:14%; background:url(../images/kv_deco.svg) top no-repeat; background-size:100% auto; }

.wrap .anchor_box{ display:none; }
}






@media (min-width:767.98px) { }

@media (min-width:819.98px) {
.wrap .event figure{ flex-direction:row-reverse; gap:24px; align-items:flex-start; }

}



@media (min-width:991.98px){ 


 }
@media (min-width:1199.98px) {

.wrap .event{ padding:120px 0;  } 
.wrap .beverage img{ height:456px;  }

/*.wrap .gift figure img{ height:700px; }*/

.wrap .products.info .info_list{ gap:36px;} 
.wrap .products.info .info_list figure{ width:22%; }
.wrap .products.info .info_list figure:nth-of-type(1),
.wrap .products.info .info_list figure:nth-of-type(4){ transform:translateY(-36px);}

.wrap .products.info{background-position:15% top; }

.wrap .major{ align-items:center; gap:200px; margin-bottom:80px;}
.wrap .major .container{ flex-direction:row-reverse; align-items:flex-start; gap:64px;}
.wrap .major figure{ background:url(../images/major_bg_odd.svg) no-repeat bottom; background-size:auto 80%; width:100%; }
.wrap .major figure:nth-of-type(even){ background-image:url(../images/major_bg_even.svg); }
.wrap .major figure:nth-of-type(even) .container{ flex-direction:row; }
.wrap .major .images_block{ flex:2 1 50%; }
.wrap .major figcaption { flex:1 1 40%;}
.wrap .major figure:nth-of-type(odd) figcaption { padding-left:100px;}
.wrap .major figure:nth-of-type(even) figcaption { padding-right:100px;}
.wrap .major figure .images_block:before{ content:''; width:100%; height:100%; position:absolute; background-size:cover; top:0; left:0;}
.wrap .major figure:nth-of-type(2) .images_block:before{ background-image:url(../images/major_deco_2.svg); transform:translate(-20%,-10%);}
.wrap .major figure:nth-of-type(3) .images_block:before{ background-image:url(../images/major_deco_3.svg); transform:translate(20%,-10%);}
.wrap .major figure:nth-of-type(3) .images_block:after{ content:''; width:50%; height:22%; position:absolute; background-size:100% auto; bottom:0; left:0; background-image:url(../images/major_deco_bean.svg); transform:translate(-90%, -10%); background-repeat:no-repeat;}


/*.wrap .major h3{ font-size:2.3vw; }
.wrap .major h4{ font-size:1.7vw; }
.wrap .major p{ font-size:1.3vw; }
.wrap .major p.small{ font-size:1.1vw; }*/

}

@media (min-width:1399.98px) { 
/*.wrap .gift h3{ font-size:clamp(2.8rem, 2.1vw, 3.2rem);}
.wrap .gift h4{ font-size:clamp(2rem, 1.5vw, 2.4rem); }
.wrap .gift p{ font-size:clamp(1.4rem, 1.12vw, 1.8rem); }
.wrap .gift p.small{ font-size:clamp(1.2rem, .9vw, 1.56rem);}*/

 



}
@media (min-width:1919.98px){
.wrap .beverage{ background:#eadccf; }
.wrap .beverage img{ object-fit:contain; height:auto; }
/*.wrap .gift figure img{ height:auto; }
.wrap .gift figure:nth-of-type(1) figcaption{ left:41%;}
.wrap .gift figure:nth-of-type(2){ position:absolute; right:auto; left:50%; transform:translateX(300px); bottom:0; height:84%; }*/
.wrap .gift img{ aspect-ratio:unset; object-fit:contain; max-width:1920px; margin:auto;}
.wrap .gift a:nth-of-type(1){ left:0; width:65%; }
.wrap .gift a:nth-of-type(2){ left:65%; width:35%; }



.wrap .products.info{background-position:25% 10%; }

.wrap .major figure{ background-size:contain; }

.wrap .kv{ padding-bottom:8vw; background-position:18% bottom, center bottom; background-size:30% auto, auto 46%;}


}