@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; }

.wrap{ background:url(../images/bg_texture.png), radial-gradient(closest-side at 50% 50%, #EBEBEB 0%, #D0BFAC 83%, #CEBD9C 100%); background-size:contain, cover; overflow-x:clip; color:#333; padding-bottom:80px;}
.wrap h3{ line-height:1.4;  }
.wrap h4{ line-height:1.4;  }
.wrap p{ line-height:1.4; letter-spacing:.02em; }
.wrap h5{ line-height:1.4; }
.wrap .btn{ background:#5C3800; color:#fff; border-radius:2em; padding:.2em 1em; line-height:1; }
.wrap .btn.more{ padding:.1em 1em .4em; }

.wrap .about{ position:relative; }
.wrap .about .deco{ position:absolute;   }
.wrap .about .deco.left{ object-position:right; object-fit:cover;}
.wrap .about .deco.right{ object-fit:scale-down; height:auto;  }



.wrap .about .text_block{ display:flex; flex-direction:column; gap:10vw; padding:0 16px; margin:auto;}
.wrap .about .title{ position:relative; display:inline-block; margin:0 auto .2em; padding:0 .3em; }
.wrap .about .title:before, .wrap .about .title:after{ position:absolute; top:50%; content:''; display:inline-block; height:1.18em; aspect-ratio:72/38; background:url(../images/about_title_deco.svg); background-size:cover; }
.wrap .about .title:before{ left:0; transform:translate(-100%,-50%); }
.wrap .about .title:after{ right:0; transform:translate(100%,-50%); }
.wrap .about b{ font-weight:600; }

.wrap .products_list{ position:relative; display:flex; flex-direction:column; }
.wrap .products_list .deco.right{ object-fit:cover; object-position:left; right:0; }

.wrap .product{ position:relative; display:flex; flex-wrap:wrap; justify-content:center; align-items:center;}
.wrap .product .deco{ position:absolute; height:auto; }

.wrap .product .info{ text-align:left; background-image:url(../images/info_top.svg),url(../images/info_bottom.svg); background-repeat:repeat-x; background-position:top, bottom;  } 
.wrap .product p + p{ margin-top:1em; }

.wrap .product figure .images_block{ width:100%; aspect-ratio:595/546; display:flex; align-items:center; justify-content:center; background:url(../images/frame_01.png); background-size:cover; transform:translateY(.7em);}
.wrap .product figure .images_block img{ width:70%; height:auto; /*mix-blend-mode:color-burn;*/ transform:scale(1); mix-blend-mode:normal; filter:blur(0px); transition:transform .5s cubic-bezier(0.4, 0, 1, 1) ,filter .7s cubic-bezier(0.4, 0, 1, 1) ,mix-blend-mode 0 .7s; }
.wrap .product figure:nth-of-type(even) .images_block{ background-image:url(../images/frame_02.png); }
.wrap .product figure figcaption{ color:#5C3800; }
.wrap .product figure figcaption .btn_group{ margin-top:.7em; }
.wrap .product figure figcaption .btn_group li{ display:flex; justify-content:center; align-items:center; }
.wrap .product figure figcaption .btn_group li .price{ font-size:.75em; }

/*.wrap .product.puppet{ background:url(../images/puppet_bg.png) 100% 0 no-repeat; background-size:contain; }*/
.wrap .product.puppet figure .images_block{ background-image:url(../images/frame_02.png); }


/* 直式 */
@media (orientation:portrait){ 
.wrap h3{ font-size:7.1vw; }
.wrap h4,.wrap .btn{ font-size:5.3vw; }
.wrap p{ font-size:5vw;  }
.wrap h5{ font-size:4.1vw;  }

.wrap .about{ padding-top:40vw; padding-bottom:16vw; }
.wrap .about .deco.left{ width:57vw; height:40vw; top:-12vw;}
.wrap .about .deco.right{ width:26.5vw; right:10%; top:-5vw; }
.wrap .about b br{ display:none; }

.wrap .products_list{ gap:5vh; }
.wrap .products_list .deco.right{ /*width:32vw;*/ width:100%; height:42vw; object-fit:scale-down; object-position:right; }

.wrap .product figure{ width:75%; order:1; }
.wrap .product figure figcaption .btn_group li{ gap:4vw; }
.wrap .product figure figcaption .btn_group li{ font-size:5.3vw; }
.wrap .product .info{ width:90%; padding:12vw 5vw; background-size:7.5vw; margin:10vw 0; order:2; }

.wrap .product.opera .deco{ bottom:1%; right:1%; width:37%; }
.wrap .product.cheongsam .deco{ bottom:-20%; left:4%; width:44%; }
.wrap .product.student .deco{ bottom:-2.5%; right:10%; width:37%; }
.wrap .product.puppet .deco{ bottom:-9%; right:-5%; width:41%; }
}
/* 橫式 */
@media (orientation:landscape){ 
.wrap h3{ font-size:1.6vw; }
.wrap h4,.wrap .btn{ font-size:1.25vw; }
.wrap p{ font-size:1.2vw; }
.wrap h5{ font-size:.93vw;  }

.wrap .about{ padding-top:8vw; padding-bottom:12vw; }
.wrap .about .deco.left{ top:42%; transform:translateY(-50%); width:25vw; height:16vw; } 
.wrap .about .deco.right{ right:13%; width:12vw; top:4vw; }

.wrap .about .text_block{ max-width:37vw; gap:2vw; }

.wrap .products_list{ gap:15vh; }
.wrap .products_list .deco.right{ width:12vw; height:15vw; position:absolute; right:0; top:50%; transform:translateY(-80%);}

.wrap .product figure{ width:31%;  }
.wrap .product figure:nth-of-type(even){ margin-left:-1.4vw; }
.wrap .product figure figcaption .btn_group li{ gap:1vw; font-size:1.25vw; }
.wrap .product .info{ width:32%; padding:3vw 1.5vw; background-size:1.6vw; margin:0 1.8vw;  }

/*.wrap .product.puppet{ background-size:40%; }*/

.wrap .product.opera .deco{ bottom:-9%; right:3%; width:18%; }
.wrap .product.cheongsam .deco{ position:relative; width:15%; }
.wrap .product.student .deco{ bottom:0%; right:2%; width:15%; }
.wrap .product.puppet .deco{ position:relative; width:18vw; transform:translateY(15%);} 



}
/* lg applies to medium devices (tablets, less than 992px) */
@media (min-width: 991.98px) { 





}
/* xl applies to large devices (desktops, less than 1200px) */
@media (min-width: 1199.98px) { 





}
/* xxl applies to x-large devices (large desktops, less than 1400px) */
@media (min-width: 1399.98px) { 





}