#l_animation{display:flex;align-items:center;justify-content:center;position:fixed;top:0;left:0;z-index:10000;width:100%;height:100%;background:#f7f7f7;overflow:hidden;transition:transform 1s cubic-bezier(.215,.61,.355,1)}
#l_animation:before{content:'';position:absolute;margin:auto;top:0;left:0;width:100%;height:100%;background:#000;transition:transform 1s cubic-bezier(.215,.61,.355,1),height 1s cubic-bezier(.215,.61,.355,1);transform:translateY(100%)}
#l_animation .wrapper .logo{transition:transform 1s cubic-bezier(.215,.61,.355,1),opacity .5s;transform:translateY(8rem);opacity:0}
#l_animation .wrapper .logo img{width:50rem}
#l_animation .wrapper .catch{margin-top:8rem;transition:transform 1s cubic-bezier(.215,.61,.355,1),opacity .5s;transform:translateY(8rem);opacity:0}
#l_animation .wrapper .catch img{width:38rem}
#l_animation.is-load:before{height:0;transform:translateY(-100%)}
#l_animation.is-load .wrapper .catch,#l_animation.is-load .wrapper .logo{transform:translateY(0);opacity:1;transition-delay:.3s}
#l_animation.is-load-comp{transform:translateY(-100%)}
#l_container{position:relative;z-index:5;overflow:hidden}
#l_container section{position:relative;background:#fff}
#l_footer{position:relative;z-index:5;padding:12rem 0;text-align:center;background:#f7f7f7}
#l_footer .toTop{position:absolute;top:3rem;right:4rem;z-index:10}
#l_footer .toTop a{display:inline-block}
#l_footer .toTop a img{width:5.2rem}
#l_footer .logo img{width:25.4rem;filter:invert(7%) sepia(27%) saturate(6414%) hue-rotate(352deg) brightness(95%) contrast(112%)}
#l_footer .copy{margin-top:5rem}
#l_header{position:fixed;top:0;left:0;z-index:1000;width:100%;height:10rem;pointer-events:none}
#l_header.is-fixed .head .logo{top:2.3rem}
#l_header.is-fixed .head .logo a img{width:16.6rem}
#l_header.is-white .head .logo a img{filter:invert(99%) sepia(0) saturate(1783%) hue-rotate(5deg) brightness(110%) contrast(104%)}
#l_header.is-white .head .buy a{transition:background .3s,color .3s;background:#fff;color:#000}
#l_header.is-white .head .buy a img{transition:filter .3s;filter:invert(19%) sepia(5%) saturate(571%) hue-rotate(214deg) brightness(93%) contrast(96%)}
#l_header.is-white .head .buy.is-open a{background:#000;color:#fff}
#l_header.is-white .head .buy.is-open a img{filter:invert(100%) sepia(4%) saturate(14%) hue-rotate(62deg) brightness(104%) contrast(105%)}
#l_header.is-white .head .drawerBtn i{transition:background .3s;background:#fff}
#l_header.is-white .head .drawerBtn.is-open i{background:#000}
#l_header .head .logo{position:absolute;top:6rem;left:10rem;transition:top .7s cubic-bezier(.215,.61,.355,1)}
#l_header .head .logo a{display:inline-block;pointer-events:auto}
#l_header .head .logo a img{transition:width .7s cubic-bezier(.215,.61,.355,1);width:36rem;filter:invert(19%) sepia(5%) saturate(571%) hue-rotate(214deg) brightness(93%) contrast(96%)}
#l_header .head .buy{position:absolute;top:0;right:14rem;z-index:1500}
#l_header .head .buy a{display:flex;align-items:center;background:#313034;border-radius:0 0 .5rem .5rem;font-weight:500;font-size:2.4rem;color:#fff;padding:1.3rem 2.5rem 1rem 2rem;pointer-events:auto}
#l_header .head .buy a img{position:relative;top:-.2rem;margin-right:1rem;width:4.5rem;filter:invert(100%) sepia(0) saturate(7490%) hue-rotate(150deg) brightness(101%) contrast(101%)}
#l_header .head .drawerBtn{position:absolute;top:0;right:4rem;z-index:1500;width:6.6rem;height:6.8rem;cursor:pointer;pointer-events:auto}
#l_header .head .drawerBtn i{position:absolute;left:0;width:100%;height:1px;background:#000;transition:top .3s cubic-bezier(.215,.61,.355,1),bottom .3s cubic-bezier(.215,.61,.355,1),transform .3s cubic-bezier(.215,.61,.355,1)}
#l_header .head .drawerBtn i:nth-child(1){top:2.6rem}
#l_header .head .drawerBtn i:nth-child(2){bottom:2.6rem}
#l_header .head .drawerBtn.is-open i:nth-child(1){top:3.3rem;transform:rotate(20deg)}
#l_header .head .drawerBtn.is-open i:nth-child(2){bottom:3.4rem;transform:rotate(-20deg)}
#l_header .drawer{position:fixed;top:0;right:0;z-index:1000;width:50rem;height:100vh;background:#dfe45f;pointer-events:auto;transition:transform .5s cubic-bezier(.215,.61,.355,1);transform:translateX(100%)}
#l_header .drawer.is-open{transform:translateX(0)}
#l_header .drawer .drawer_contents{height:100%;padding:10rem 5rem 5rem;overflow-y:scroll}
#l_header .drawer .drawer_contents ul.gnav{font-size:2rem}
#l_header .drawer .drawer_contents ul.gnav li{position:relative}
#l_header .drawer .drawer_contents ul.gnav li+li{margin-top:2rem}
#l_header .drawer .drawer_contents ul.gnav li.sec{font-size:1.5rem;margin-top:.8rem;padding-left:3rem}
#l_header .drawer .drawer_contents ul.gnav li.sec:before{content:'';position:absolute;margin:auto;top:1.1rem;left:1rem;width:1rem;height:1px;background:#000}
#l_header .drawer .drawer_contents ul.gnav li a.ja{letter-spacing:.1em}
#l_header .drawer .drawer_contents .buy{margin-top:5rem}
#l_header .drawer .drawer_contents .buy .hd{text-align:center;margin-bottom:2rem}
#l_header .drawer .drawer_contents .buy .hd img{width:13rem}
#l_header .drawer .drawer_contents .buy .hd span{display:block;margin-top:2rem}
#l_header .drawer .drawer_contents .buy ul{display:grid;grid-template-columns:repeat(2,minmax(0,50%));column-gap:.5rem;row-gap:.5rem;line-height:0}
#l_header .drawer .drawer_contents .buy ul li a{display:inline-block;border-radius:.5rem;overflow:hidden}
#l_header .drawer .drawer_contents .produce{display:flex;align-items:center;justify-content:center;margin-top:4rem;font-size:1.3rem}
#l_header .drawer .drawer_contents .produce img{width:11.4rem;margin-left:.5rem;filter:invert(9%) sepia(21%) saturate(4624%) hue-rotate(335deg) brightness(98%) contrast(116%)}
#l_header .drawerBg{position:fixed;top:0;right:0;z-index:900;width:100%;height:100vh;pointer-events:none;cursor:pointer}
#l_header .drawerBg.is-open{pointer-events:auto}
#l_modal{display:flex;align-items:center;justify-content:center;position:fixed;top:0;left:0;z-index:5000;width:100%;height:100%;background:rgba(0,0,0,.8);cursor:pointer;pointer-events:none;transition:opacity .5s,transform .5s cubic-bezier(.215,.61,.355,1);opacity:0}
#l_modal.is-show{opacity:1;pointer-events:auto}
#l_modal.is-show .wrapper{transition-delay:.3s;opacity:1;transform:translateY(0);pointer-events:none}
#l_modal.is-show .wrapper .close,#l_modal.is-show .wrapper .panel{pointer-events:auto}
#l_modal .wrapper{position:relative;padding-top:5rem;transition:opacity .5s,transform .5s cubic-bezier(.215,.61,.355,1);opacity:0;transform:translateY(4rem)}
#l_modal .wrapper .close{transition:opacity .3s;cursor:pointer;position:absolute;top:0;right:0;width:5rem;height:5rem}
#l_modal .wrapper .close:hover{opacity:.6}
#l_modal .wrapper .close:after,#l_modal .wrapper .close:before{content:'';position:absolute;margin:auto;top:0;bottom:0;left:1rem;width:3rem;height:2px;background:#fff;transform:rotate(45deg)}
#l_modal .wrapper .close:after{transform:rotate(-45deg)}
#l_modal #opening{background:#fff;cursor:auto;max-height:80vh;overflow-y:scroll}
#l_modal #opening a{display:inline-block}
#l_modal #opening a img{width:60rem}
@media screen and (max-width:767px){
#l_animation .wrapper .logo img{width:40rem}
#l_animation .wrapper .catch img{width:34rem}
#l_footer .toTop a img{width:10rem}
#l_footer .logo img{width:36.6rem}
#l_header .head .logo{top:6rem;left:3rem}
#l_header .head .buy{right:15rem}
#l_header .head .buy a{border-radius:0 0 2rem 2rem}
#l_header .head .drawerBtn{right:5rem}
#l_header .drawer{width:62rem}
#l_header .drawer .drawer_contents ul.gnav{font-size:3.4rem}
#l_header .drawer .drawer_contents ul.gnav li+li{margin-top:3rem}
#l_header .drawer .drawer_contents ul.gnav li.sec{font-size:2.4rem;padding-left:4.5rem}
#l_header .drawer .drawer_contents ul.gnav li.sec:before{top:1.8rem;width:2rem}
#l_header .drawer .drawer_contents .produce{margin-top:5rem;font-size:2.4rem}
#l_header .drawer .drawer_contents .produce img{width:20rem}
}