.loading{ width:100vw; height:100%; min-height:100vh; position:fixed; left:0; top:0; background:#f2f0eb; z-index:100; display:flex; justify-content:center; align-items:center;}
.loading .images_lottie{ width:220px; }
.loading .images_lottie lottie-player{ width:100%; max-width:100%; }
.loading h4{ color:#fff; font-weight:400; }

.how-to-customize{ position:relative; color:#1e3932;  }
.how-to-customize h1,.how-to-customize h2{ font-weight:500; letter-spacing:.075em; line-height:1.6; margin-bottom:.2em; }
.how-to-customize h1{ font-size:clamp(2.2rem, 6.5vw, 5.2rem);}
.how-to-customize h2{ font-size:clamp(2.2rem, 6.5vw, 4.8rem); }
.how-to-customize h3{ font-size:clamp(1.8rem, 2.4vw, 2.8rem); }
.how-to-customize p{ font-size:clamp(1.5rem, 3.6vw, 2rem); letter-spacing:.025em; line-height:1.6; }
.how-to-customize .btn_sweet-as-you-like{ font-size:clamp(1.5rem, 2.4vw, 2rem); color:#fff; font-weight:500; background:linear-gradient(90deg, #5A3992 0%, #5A3992 10%, #E6652D 90%, #E6652D 100%) 0% 0%; padding:.6em 1.5em; border-radius:2em; } 
.how-to-customize .btn_sweet-as-you-like:after{ content:'\f105'; font-size:1.3em; margin-left:.2em; line-height:0; } 
/*輪播*/
.how-to-customize .slide_box{ padding:16px 0 36px; }
.how-to-customize .slide_box .slick-track{ display:flex; align-items:center; padding:24px 0 30px; }
.how-to-customize .slide_box .slide_block{ background:#eef6f3; box-shadow:0px 6px 22px 2px rgba(58, 49, 25, 0.15); padding:24px 10px; transform:scale(.6); margin:0 -1%; transition:transform 1s;} 
.how-to-customize .slide_box .imgaes_block{ max-width:320px; margin:0 auto; }
.how-to-customize .slide_box img{ width:100%; }
.how-to-customize .slide_box mark{ position:relative; font-size:clamp(1.8rem, 3.4vw, 2.4rem); font-weight:600; display:flex; margin:0 auto; align-items:center; line-height:1; background:transparent; justify-content:center; }
.how-to-customize .slide_box mark:before{ content:'換'; font-size:.62em; border-radius:2px; background:#1e3932; color:#fff; display:inline-block; padding:.3em .4em .4em; margin-right:6px; font-weight:400; }
.how-to-customize .slide_box mark:after{ content:''; display:inline-block; background-position:center bottom; background-repeat:no-repeat; background-size:cover; margin-left:8px; }
.how-to-customize .slide_box h3{ font-size:clamp(1.6rem, 2.4vw, 2rem);  }
.how-to-customize .slide_box p{ font-size:clamp(1.2rem, 3vw, 1.8rem); /*height:2.6em;*/ height:auto; }
.how-to-customize .slide_box .text_block{ position:absolute; opacity:0; }
.how-to-customize .slide_box .slick-current{  transform:scale(1); }
.how-to-customize .slide_box .slick-current .text_block{ position:relative; opacity:1; display:block; }
.how-to-customize .slide_box .slick-dots{ display:flex; justify-content:center; align-items:center; } 
.how-to-customize .slide_box .slick-dots li{ margin:16px; line-height:0; }
.how-to-customize .slide_box .slick-dots button{ font-size:0; width:16px; height:16px; background:#1e393259; border-radius:50%; }
.how-to-customize .slide_box .slick-dots .slick-active button{ background:#1e3932;  }
.how-to-customize .slide_box button.slick-arrow{ position:absolute; top:50%; left:50%; width:40px; font-size:0; background:transparent; display:block; z-index:2; cursor:pointer; } 
.how-to-customize .slide_box button.slick-arrow.slick-next:before{ content:'\f105'; font-size:4rem; color:#1e3932; }
.how-to-customize .slide_box button.slick-arrow.slick-prev:before{ content:'\f104'; font-size:4rem; color:#1e3932; }
.how-to-customize .slide_box button.slick-arrow.slick-disabled{ opacity:.4; }



.how-to-customize .kv_bg{ background:#f9f9f9;}
.how-to-customize .kv figure{ display:flex; flex-direction:column;  }
.how-to-customize .kv figure .video_box{ display:flex; justify-content:center; align-items:center; } 
.how-to-customize .kv figure .video_box video{ width:100%; }
.how-to-customize .kv figure figcaption{  }
.how-to-customize .kv figure figcaption p{ font-size:clamp(1.2rem, 3vw, 2.4rem); }

.how-to-customize .photo_block{ width:100%; }
.how-to-customize .photo_block img{ max-width:100%; }
.how-to-customize .milk_bg{ position:relative; background:#f2f0eb; }
.how-to-customize .milk{ position:relative; box-shadow:0 -1vh 4vh 3vh #f2f0eb, 0 0 0 8px #f2f0eb inset; padding-top:24px; background:#f2f0eb;}
.how-to-customize .milk .slide_box mark:after{ width:1.25em; padding-top:2em; transform:translateY(-25%);   } 
.how-to-customize .milk .slide_box mark.almond:after{ background-image:url(../images/icon_milk_almond.svg);  }
.how-to-customize .milk .slide_box mark.soy:after{ background-image:url(../images/icon_milk_soy.svg);  }
.how-to-customize .milk .slide_box mark.oat:after{ background-image:url(../images/icon_milk_oat.svg);  }
.how-to-customize .milk .slide_box mark.coconut:after{ background-image:url(../images/icon_milk_coconut.svg);  }

.how-to-customize .cafe_bg{ position:relative; background:#f2f0eb; }
.how-to-customize .cafe{ position:relative; box-shadow:0 -4vh 4vh 4vh #f2f0eb, 0 0 0 8px #f2f0eb inset; background:#f2f0eb; }
.how-to-customize .cafe .slide_box mark{ margin:.7em auto; }
.how-to-customize .cafe .slide_box mark:after{ width:1.5em; padding-top:1.5em; } 
.how-to-customize .cafe .slide_box mark.decaf:after{ background-image:url(../images/icon_coffee_decaf.svg);  }
.how-to-customize .cafe .slide_box mark.extra:after{ background-image:url(../images/icon_coffee_extra.svg);  }
.how-to-customize .cafe .slide_box mark.cold-brew:after{ background-image:url(../images/icon_coffee_cold-brew.svg);  }
.how-to-customize .cafe .slide_box mark.ristretto:before{ content:'使用'; }
.how-to-customize .cafe .slide_box mark.ristretto:after{ background-image:url(../images/icon_coffee_ristretto.svg);  }
.how-to-customize .cafe .slide_box mark.extra:before{ content:'加'; }


.how-to-customize .syrup_bg{ position:relative; background:#f2f0eb; }
.how-to-customize .syrup{ position:relative; box-shadow:0 -4vh 4vh 4vh #f2f0eb, 0 0 0 8px #f2f0eb inset; padding-bottom:36px; background:#f2f0eb; }
.how-to-customize .syrup .slide_box mark{ margin:.7em auto; }
.how-to-customize .syrup .slide_box mark:after{ width:2em; padding-top:1.75em; } 
.how-to-customize .syrup .slide_box mark.hazelnut:after{ background-image:url(../images/icon_syrup_hazelnut.svg);  }
.how-to-customize .syrup .slide_box mark.caramel:after{ background-image:url(../images/icon_syrup_caramel.svg);  }
.how-to-customize .syrup .slide_box mark.vanilla:after{ background-image:url(../images/icon_syrup_vanilla.svg);  }

.how-to-customize .customize_bg{ background:#f9f9f9; position:relative; padding:80px 0;}
.how-to-customize .customize .customize_for{ display:flex; align-items:center; width:80vw; margin:0 auto; }
.how-to-customize .customize .customize_for h3{ position:relative; font-weight:500; letter-spacing:0.1em; font-size:clamp(2.4rem, 2.8vw, 2.8rem); border-bottom:solid; padding-bottom:.4em; margin-bottom:.4em;} 
.how-to-customize .customize .customize_for h3:before{ content:''; display:inline-block; vertical-align:bottom; margin-right:4px;width:1.5em; height:1.5em; background-size:cover; }
.how-to-customize .customize .customize_for h4{ position:relative; font-size:clamp(1.2rem, 4vw, 1.6rem); font-weight:500; margin-bottom:.4em; display:flex; justify-content:space-between;}
.how-to-customize .customize .customize_for h4 span{ margin-left:.4em; }
.how-to-customize .customize .customize_for p{ font-size:clamp(1.2rem, 2.8vw, 1.4rem); color:#006241; line-height:1.2; }
.how-to-customize .customize .customize_for a{ margin-top:16px; }
.how-to-customize .customize .customize_for .slide_block{ padding:0 20px; }
.how-to-customize .customize .customize_for .slide_block:nth-of-type(1) h3:before{ background-image:url(../images/icon_customize_coffee.svg); }
.how-to-customize .customize .customize_for .slide_block:nth-of-type(2) h3:before{ background-image:url(../images/icon_customize_milk.svg); }
.how-to-customize .customize .customize_for .slide_block:nth-of-type(3) h3:before{ background-image:url(../images/icon_customize_top.svg); }
.how-to-customize .customize .customize_for .slide_block:nth-of-type(4) h3:before{ background-image:url(../images/icon_customize_syrup.svg); }
.how-to-customize .customize .customize_for .slide_block:nth-of-type(4) h4{ justify-content:center; }
.how-to-customize .customize .customize_for button.slick-arrow{ font-size:0; background:transparent; display:block; z-index:2; /*position:absolute; top:50%; transform:translateY(-50%); z-index:2;*/  } 
.how-to-customize .customize .customize_for button.slick-arrow.slick-next{ right:0; }
.how-to-customize .customize .customize_for button.slick-arrow.slick-prev{ left:0; }
.how-to-customize .customize .customize_for button.slick-arrow.slick-next:before{ content:'\f105'; font-size:4rem; color:#1e3932; }
.how-to-customize .customize .customize_for button.slick-arrow.slick-prev:before{ content:'\f104'; font-size:4rem; color:#1e3932; }
.how-to-customize .customize .images_block{ position:relative; }
.how-to-customize .customize .images_block img{ width:100%; position:absolute; top:0; left:0; }
.how-to-customize .customize .customize_nav{ position:relative; width:100%; }
.how-to-customize .customize .customize_nav:before{ content:''; display:block; width:100%; padding-top:100% ; }
.how-to-customize .customize .customize_nav .slick-track{ position:relative; width:100%; padding-top:100%; transform:none!important;}
.how-to-customize .customize .customize_nav .slick-list{ position:absolute; top:0; left:0; width:100%; height:100%; }
.how-to-customize .customize .customize_nav .slick-slide{ position:absolute; font-size:3.7vw; height:2em; display:inline-block; opacity:.4; transition:opacity .6s;}
.how-to-customize .customize .customize_nav .slick-slide.slick-current{ opacity:1; font-weight:500; transform:scale(1.2); transition:all .7s;} 
.how-to-customize .customize .customize_nav .slick-slide.nav_cafe{ left:6%; top:30%; text-align:left; }
.how-to-customize .customize .customize_nav .slick-slide.nav_milk{ left:6%; top:72%; text-align:left; }
.how-to-customize .customize .customize_nav .slick-slide.nav_top{ right:6%; top:6%; text-align:right; }
.how-to-customize .customize .customize_nav .slick-slide.nav_syrup{ right:6%; top:64%; text-align:right; }
.how-to-customize .customize .customize_nav .slick-slide.nav_cafe:after,
.how-to-customize .customize .customize_nav .slick-slide.nav_milk:after,
.how-to-customize .customize .customize_nav .slick-slide.nav_top:before,
.how-to-customize .customize .customize_nav .slick-slide.nav_syrup:before{ content:''; display:inline-block; vertical-align:middle; width:1.6em; height:1px; margin:0 4px; background:#1e3932; }
.how-to-customize .customize .customize_nav .slick-slide.nav_top:before{ width:2.6em;  }





.how-to-customize .mop_bg{ background:#1e3932; color:#ede7dd; }
.how-to-customize .mop{ padding-top:48px; }
.how-to-customize .mop h3{ font-size:clamp(1.8rem, 5vw, 2.8rem); letter-spacing:.05em; }
.how-to-customize .mop a{ font-size:clamp(2rem, 5.5vw, 3.2rem); border:solid 1px; padding:0.5em 2.2em; margin:16px auto 24px; letter-spacing:.025em;}
.how-to-customize .mop .imgaes_block{ width:50vw; margin:0 auto; }
.how-to-customize .mop .imgaes_block img{ width:100%; }

.how-to-customize .nav_anchor{ position:sticky; bottom:0; width:100%; background:#fff; display:flex; justify-content:center; font-size:clamp(1.2rem, 5vw, 1.8rem); padding:0.6em 0; z-index:91; border-radius:.8em .8em 0 0; box-shadow:0 0px 6px 0px #00000040; overflow:hidden; }
.how-to-customize .nav_anchor li{ flex:0 0 25%; }
.how-to-customize .nav_anchor li + li{ border-left:solid 1px; }
.how-to-customize .nav_anchor a{ padding:.4em 0; width:100%; letter-spacing:.3em; margin-right:-.3em; }

@media (max-width:768px){
.how-to-customize .kv figure figcaption{  padding:36px 15px;}

}
@media (min-width:769px){
.how-to-customize h1{ letter-spacing:.14em; }
.how-to-customize .slide_box .slide_block{ cursor:pointer; }

.how-to-customize .kv figure{ flex-direction:row; align-items:center; max-width:1300px; margin:0 auto; }
.how-to-customize .kv figure figcaption{ flex:0 0 50%; }
.how-to-customize .kv figure .video_box{ padding:70px 20px; }

.how-to-customize .milk{ box-shadow:0 -4vh 4vh 4vh #f2f0eb;  }

.how-to-customize .mop figure{ position:relative; width:fit-content; margin:0 auto; } 
.how-to-customize .mop .imgaes_block{margin:0 auto; position:absolute; top:0; left:0; width:auto; height:100%; transform:translateX(-130%); }
.how-to-customize .mop .imgaes_block img{ width:auto; height:100%; }

.how-to-customize .mop{ padding-top:60px; }
.how-to-customize .mop a{ margin-bottom:60px; }

}
@media (min-width:1180px){
.how-to-customize .slide_box{ padding:0; width:1000px; margin:0 auto;}
.how-to-customize .slide_box .slide_block{ padding:24px; }
.how-to-customize .slide_box button.slick-arrow.slick-prev{ transform:translate(-240px,-50%); }
.how-to-customize .slide_box button.slick-arrow.slick-next{ transform:translate(200px,-50%); }

.how-to-customize .customize_bg .container{ max-width:unset; padding:0; height:600px;} 
.how-to-customize .customize h2{ position:absolute; top:0; left:50%; transform:translateX(-50%); }
.how-to-customize .customize{ position:relative; }
.how-to-customize .customize .customize_nav{ display:none; }
.how-to-customize .customize .images_block{ text-align:center; overflow:hidden; }
.how-to-customize .customize .images_block img{ position:relative; width:auto; height:600px;}
.how-to-customize .customize .customize_for{ position:absolute; bottom:0; left:0; width:100%; height:100%;}
.how-to-customize .customize .customize_for .slide_block{ position:absolute!important; opacity:1!important; left:50%!important; top:unset!important; text-align:left; }

.how-to-customize .customize .customize_for .slide_block:nth-of-type(1){ bottom:56.5%; transform:translateX(-248%); }
.how-to-customize .customize .customize_for .slide_block:nth-of-type(2){ bottom:5%; transform:translateX(-189%); }
.how-to-customize .customize .customize_for .slide_block:nth-of-type(3){ bottom:65.5%; transform:translateX(149%);}
.how-to-customize .customize .customize_for .slide_block:nth-of-type(4){ bottom:9.5%; transform:translateX(78%); }
.how-to-customize .customize .customize_for .slide_block:nth-of-type(2) h3:before{ margin-left:-3%; }
.how-to-customize .customize .customize_for .slide_block:nth-of-type(4) h4{ justify-content:flex-start; }
.how-to-customize .customize .customize_for h3{ text-align:left; border-bottom:none; }

.how-to-customize .milk,
.how-to-customize .cafe,
.how-to-customize .syrup{ background:#f2f0eb; padding:40px 0 100px; box-shadow:0 -4vh 20vh 25vh #f2f0eb; }
.how-to-customize .milk{ box-shadow:0 0vh 8vh 15vh #f2f0eb; }

.how-to-customize .btn_sweet-as-you-like{ background-size:100% 100%; transition:background .7s cubic-bezier(.17,.67,.83,.67); }
.how-to-customize .btn_sweet-as-you-like:hover{ background-size:200% 100%;  } 
.how-to-customize .mop a{ transition:background .5s cubic-bezier(.17,.67,.83,.67); background:linear-gradient(270deg, transparent 50%, #0000007a 90%) 0% 0%; background-size:200% 100%; background-position-x:90%;  }
.how-to-customize .mop a:hover{ background-position-x:0%; }
.how-to-customize .syrup .slide_box .imgaes_block{ max-width:280px; }
.how-to-customize .syrup .slide_box mark{ margin:0 auto .2em; }
.how-to-customize .syrup .slide_box mark:after{ margin-top:-.4em; }



.how-to-customize .nav_anchor{ opacity:0; position:fixed; width:10em; left:0; bottom:50%; transform:translateY(50%); flex-direction:column; justify-content:normal; align-items:flex-start; background:transparent; box-shadow:none; font-size:clamp(2rem, 2vw, 3rem); font-weight:500; } .how-to-customize .nav_anchor li{ background:#f2f0eb; border-radius:0 2em 2em 0; box-shadow:0 0px 6px 0px #00000040; display:flex; align-items:center;}
.how-to-customize .nav_anchor li + li{ border-left:none; margin-top:.4em; }
.how-to-customize .nav_anchor li a{ padding:.7em 1.2em .7em .6em; letter-spacing:.1em; box-sizing:content-box; }
.how-to-customize .nav_anchor li:nth-of-type(1) a:after,
.how-to-customize .nav_anchor li:nth-of-type(2) a:after,
.how-to-customize .nav_anchor li:nth-of-type(3) a:after{ content:'選擇'; }
.how-to-customize .nav_anchor li:after{ content:''; width:1em; height:1em; padding:.7em 1.2em .7em .6em; background-repeat:no-repeat; background-position:center center; background-size:50%;} 
.how-to-customize .nav_anchor li:nth-of-type(1):after{ background-image:url(../images/icon_customize_milk.svg); }
.how-to-customize .nav_anchor li:nth-of-type(2):after{ background-image:url(../images/icon_customize_coffee.svg); }
.how-to-customize .nav_anchor li:nth-of-type(3):after{ background-image:url(../images/icon_customize_syrup.svg); }
.how-to-customize .nav_anchor li:nth-of-type(4):after{ background-image:url(../images/customize_all.svg); }
.how-to-customize .nav_anchor li:after,
.how-to-customize .nav_anchor li a{ transition:width .7s cubic-bezier(.17,.67,.83,.67);  }
.how-to-customize .nav_anchor li:after,
.how-to-customize .nav_anchor li:hover a{ display:inline-block; }
.how-to-customize .nav_anchor li:hover:after,
.how-to-customize .nav_anchor li a{ display:none; }
}
@media (min-width:1300px){



}
@media (min-width:1400px){
.how-to-customize .slide_box{ width:1300px; margin:0 auto;  }
.how-to-customize .slide_box button.slick-arrow.slick-prev{ transform:translate(-280px,-50%); }
.how-to-customize .slide_box button.slick-arrow.slick-next{ transform:translate(240px,-50%); }

}