@import url("https://fonts.googleapis.com/css2?family=Marcellus&family=Noto+Sans+JP:wght@100;300;700&display=swap");*{padding:0;margin:0;box-sizing:border-box}#cursor{height:3rem;width:3rem;position:fixed;z-index:100;pointer-events:none;display:grid;place-items:center}#cursor.hover{mix-blend-mode:difference}#cursor.hover #canvas{transform:scale(0.8)}#cursor.drag .wrapper{transform:scale(1.3)}#cursor.drag .wrapper p{opacity:1}#cursor .wrapper{transition:transform 0.2s ease-out;transform-origin:center;transform:scale(1);grid-template-areas:"main";display:grid;place-items:center}#cursor .wrapper #canvas{grid-area:main;filter:drop-shadow(0 0 1px white);transform-origin:center;z-index:100;box-sizing:border-box;padding:0;margin:0;transition:transform 0.2s ease-out}#cursor .wrapper p{grid-area:main;font-size:0.4rem;opacity:0;transition:opacity, 0.2s ease-out}body{font-family:"Noto Sans JP", sans-serif;overflow-x:hidden;cursor:none}.page_wrapper{background:white;position:fixed;width:100vw;height:100vh;overflow:hidden}a{color:inherit;text-decoration:none;font-family:inherit;cursor:none}.section_title{text-transform:uppercase;padding-left:6vw;font-family:"Marcellus", serif;font-size:1.1rem}.section_title h2{font-weight:lighter}.link{font-size:1.5rem}.link ion-icon{pointer-events:none}#news ul .list,#location ul .list:not(.head){overflow:hidden;z-index:1;display:block}#news ul .list::after,#location ul .list:not(.head)::after{content:"";display:block;position:absolute;top:50%;left:0;height:120%;transform:translateY(-50%) scaleX(0);width:100%;background:#f6f6f6;box-shadow:inset 0 0 10px 10px white;transform-origin:center;z-index:-1}#news ul .list.hover::after,#location ul .list:not(.head).hover::after{animation:newsLi 0.5s ease-out forwards}header{z-index:10;position:fixed;width:100%}header .logo{z-index:1;text-transform:uppercase;font-family:"Marcellus", serif;position:absolute;top:3.5vh;left:6vw;font-size:1.5rem}header .shop_link{z-index:1;position:absolute;top:calc(3vh + 8px)}header #menu_icon{z-index:1;position:absolute;top:calc(3.5vh + 8px);right:5vw;width:16px;height:5px}header #menu_icon .lines{background:black;height:1px;width:16px;position:relative;top:0;left:0;animation:0.3s ease-out forwards;opacity:1}header #menu_icon .lines.line_2{top:4px;animation-delay:50ms}header #menu_icon .link{position:absolute;top:-14px;left:-2px;transform:translateY(-15px) rotate(-90deg);animation:0.3s ease-out forwards;opacity:0}header .shop_link{position:absolute;right:20vw;top:calc(3.5vh + 8px)}header #menu{position:absolute;background:#e5e2dd;width:100%;height:100vh;top:0;left:0;display:grid;padding:8vh 6vw 3rem 6vw;grid-template-columns:40vw auto;opacity:1;transition:opacity 0.5s cubic-bezier(0.37, 0.05, 0.39, 0.99);transition-delay:0}header #menu #thumb{display:grid;place-items:center}header #menu #thumb .img{width:70%;padding-bottom:100%;background-size:cover;background-position:center;background-repeat:no-repeat;transform:translateY(-10%) rotate(-1.5deg);opacity:0;animation:0.6s ease-out forwards;animation-name:menuThumbIn;background-image:url("/img/menu.jpg")}header #menu .links{align-items:end}header #menu .links .primary_links{font-size:1.8rem}header #menu .links .primary_links li{margin:2.5vh 0}header #menu .links .other_links{margin-top:0}header #menu .links .other_links ul{display:flex;flex-direction:column;justify-content:flex-end}header #menu .links a{overflow:hidden;background-clip:content-box;display:inline-block}header #menu .links a span{display:inline-block;animation:0.5s ease-out forwards;animation-name:menuItemIn;transform:translateY(-80%);animation-delay:0}header #menu.off{opacity:0;transition-delay:0.4s;pointer-events:none}header #menu.off ul li a span{animation-name:menuItemOut;transform:translateY(0);animation-delay:0.2s}header #menu.off #thumb .img{animation-name:menuThumbOut}#hero .main_visual{width:86.5vw;margin:auto;padding-top:13rem;position:relative}#hero .main_visual h1{text-transform:uppercase;font-family:"Marcellus", serif;font-size:9.5vw;line-height:0.95em;font-weight:lighter;margin:-0.05em}#hero .main_visual p{font-size:0.8rem;line-height:1.2em;position:absolute;bottom:6.5px;right:0}#hero #gallery{margin-top:6rem;overflow-x:hidden}#hero #gallery .for_everyone{margin-left:6vw;font-size:0.8rem;margin-top:5px}#hero #gallery .innerWrapper{position:relative;display:grid;grid-auto-flow:column;grid-gap:3.2vw;padding:0 6vw}#hero #gallery .innerWrapper .img{pointer-events:none;width:50vw;padding-bottom:165%;background-size:cover;background-position:center center}#hero #gallery .innerWrapper .img#a{background-image:url("/img/kv-1.jpg")}#hero #gallery .innerWrapper .img#b{background-image:url("/img/kv-2.jpg")}#hero #gallery .innerWrapper .img#c{background-image:url("/img/kv-3.jpg")}#hero #gallery .innerWrapper .img#d{background-image:url("/img/kv-4.jpg")}#news{position:relative;max-width:100%;margin-top:8rem;display:grid;grid-template-columns:32.5vw 66vw}#news ul{padding-right:5vw}#news ul .list{display:block;display:flex;list-style:none;align-items:center;min-height:8rem;font-size:0.9rem;border-bottom:1px solid black;position:relative;overflow:hidden;pointer-events:all}#news ul .list .date{opacity:0.7;margin-right:5vw;pointer-events:none}#news ul .list .heading{font-weight:300;pointer-events:none}#news ul .list:first-child{border-top:1px solid black}#news .link{position:absolute;bottom:-6rem;right:5vw}@keyframes newsLi{0%{transform:translateY(-50%) scaleX(0);opacity:0}70%{opacity:1;transform:translateY(-50%) scaleX(1)}100%{transform:translateY(-50%) scaleX(1);opacity:0}}#concept{width:100%;margin-top:15rem}#concept .head{position:relative;display:grid;grid-template-columns:44vw 56vw}#concept .head .img{background-size:cover;background-position:center;background-image:url("https://images.unsplash.com/photo-1585601356265-5ffabba18b9c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1267&q=80")}#concept .head .slogan{background:#e5e2dd;padding:7vw 7vw;padding-bottom:13vw}#concept .head .slogan>p{margin:1rem 0;font-size:0.85rem}#concept .head .slogan h2{text-transform:uppercase;font-size:7.5vw;font-family:"Marcellus", serif;line-height:0.95em;font-weight:lighter}#concept .head .slogan .sub_title{letter-spacing:0.05em;line-height:1.75em;text-transform:uppercase;margin:4rem 0}#concept .head .link{position:absolute;bottom:5rem;right:5vw}#concept .body{background:#43869f;transition:background 0.5s ease-in-out;min-height:100vh;position:relative}#concept .body .timelineRail{position:absolute;width:4rem;right:0;top:0;height:calc(100% - 100vh);display:flex;justify-content:space-between;flex-direction:column}#concept .body .timelineRail p{opacity:0;height:0;position:relative}#concept .body .timelineRail p::before{display:block;content:"";position:absolute;height:3px;width:3rem;top:50%;left:8px;transform:translateY(-50%);background:red}#concept .body .slideContainer{height:100vh;display:grid;grid-template-areas:"main";overflow:hidden}#concept .body a{grid-area:main;width:100%;height:100%;display:block}#concept .body a .slide{position:-webkit-sticky;position:sticky;top:0;pointer-events:none;width:100%;height:100vh;display:grid;grid-template-areas:"main";place-items:center}#concept .body a .slide h2{opacity:0;display:grid;text-transform:uppercase;white-space:pre-line;text-align:center;line-height:0.9em;font-size:10vw;font-family:"Marcellus", serif;-webkit-text-stroke:1px black;color:transparent;font-weight:lighter;grid-area:main}#concept .body a .slide .img{grid-area:main;background-size:cover;width:28vw;padding-bottom:42%}#concept .body a .slide.slide_1{z-index:-1}#concept .body a .slide.slide_1 .img{transform:rotate(4deg);background-image:url("/img/KV-12.jpg")}#concept .body a .slide.slide_2{z-index:-2}#concept .body a .slide.slide_2 .img{transform:rotate(-3deg);background-image:url("/img/KV-11.jpg")}#concept .body a .slide.slide_3{z-index:-3}#concept .body a .slide.slide_3 .img{transform:rotate(3deg);background-image:url("/img/KV-10.jpg")}#concept .body a .slide.slide_4{z-index:-4}#concept .body a .slide.slide_4 .img{transform:rotate(-2deg);background-image:url("/img/KV-9.jpg")}#concept .body a .slide.slide_5{z-index:-5}#concept .body a .slide.slide_5 .img{transform:rotate(4deg);background-image:url("/img/KV-7.jpg")}#concept .body a .slide.slide_6{z-index:-6}#concept .body a .slide.slide_6 .img{transform:rotate(-3deg);background-image:url("/img/KV-8.jpg")}#concept .body a .slide.slide_7{z-index:-7}#concept .body a .slide.slide_7 .img{transform:rotate(1deg);background-image:url("/img/KV.jpg")}#concept .body .page_number{pointer-events:none;position:sticky;bottom:0;font-size:0.9rem;margin:auto;display:grid;grid-auto-flow:column;grid-gap:2rem}#journal{position:relative;margin-top:9rem;padding:0 9.999vw;padding-right:7.5vw}#journal .articles{width:100%;display:grid;grid-template-columns:35vw auto auto;grid-gap:3.2vw}#journal .articles .post{margin:auto;width:100%;margin-top:0;display:block;pointer-events:all}#journal .articles .post .date{font-size:0.85rem;opacity:0.8;margin-top:1.5rem}#journal .articles .post .heading{margin:0.5rem 0;font-size:0.9rem}#journal .articles .post .thumb{padding-bottom:130%;background-size:cover;background-position:center center;pointer-events:none}#journal .articles .post .post_detail{pointer-events:none}#journal .articles .post.post_1 .thumb{background-image:url("https://images.unsplash.com/photo-1559575003-fb4ee38a747d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60")}#journal .articles .post.post_1{margin-top:6rem}#journal .articles .post.post_2 .thumb{background-image:url("https://images.unsplash.com/photo-1502364271109-0a9a75a2a9df?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80")}#journal .articles .post.post_3 .thumb{background-image:url("https://images.unsplash.com/photo-1579293907020-7570cc70cc9a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=60")}#journal .link{position:absolute;right:7.5vw;bottom:0rem}#location{color:var(--custom);position:relative;text-transform:uppercase;margin-top:9rem;padding-right:5vw}#location .thumbWrapper{height:100%;width:100%;display:grid}#location .thumbWrapper .thumbContainer{width:100%;height:100%;display:grid;grid-template-rows:1fr 0.5fr}#location .thumbWrapper .thumbContainer .location,#location .thumbWrapper .thumbContainer .chocolateBank{display:grid;grid-template-areas:"main";place-items:center}#location .thumbWrapper .thumbContainer .thumbs{opacity:0;grid-area:main;width:50%;padding-bottom:70%;background-size:cover;background-position:center center;animation:0.5s cubic-bezier(0.065, 0.405, 0.245, 0.965) forwards}#location .thumbWrapper .thumbContainer #kamakura{background-image:url("/img/shop-kamakura.jpg")}#location .thumbWrapper .thumbContainer #kamakuraHanare{background-image:url("/img/shop-hanare.jpg")}#location .thumbWrapper .thumbContainer #ofuna{background-image:url("/img/shop-ofuna.jpg")}#location .thumbWrapper .thumbContainer #yokohama{background-image:url("/img/shop-yokohama.jpg")}#location .thumbWrapper .thumbContainer #tokyo{background-image:url("/img/shop-tokyo.jpg")}#location .thumbWrapper .thumbContainer #nagoya{background-image:url("/img/shop-nagoya.jpg")}#location .thumbWrapper .thumbContainer #playRoom{background-image:url("/img/shop-chocolate-bank.jpg")}#location .thumbWrapper .thumbContainer #robb{background-image:url("/img/shop-robb.jpg")}#location .thumbWrapper .thumbContainer #cacaobar{background-image:url("/img/shop-cacao-bar.jpg")}#location .location{display:grid;grid-template-columns:36.66vw auto;grid-template-areas:"thumb table"}#location .location .thumbs{grid-area:thumb;width:36.66vw}#location .location .table{grid-area:table;width:100%}#location .location .table li,#location .location .table .list{position:relative;list-style:none;display:flex;justify-content:space-between;align-items:center;padding:3rem 0;border-bottom:1px solid black}#location .location .table li .place,#location .location .table .list .place{text-align:left;font-family:"Marcellus", serif;font-size:1.8rem;pointer-events:none}#location .location .table li .city,#location .location .table .list .city{text-align:right;font-size:0.8rem;letter-spacing:0.1em;pointer-events:none}#location .location .table .head{padding:1.5rem 0}#location .location .table .head .place,#location .location .table .head .city{font-family:"Noto Sans JP", sans-serif;font-size:0.8rem}#location .chocolate_banks{margin-top:3rem}#location .link{position:absolute;right:5vw;bottom:-5rem}#closer{padding:4rem 0;margin-top:9rem;display:grid;place-items:center;grid-template-areas:"main";margin-bottom:8rem}#closer .img{grid-area:main;width:21vw;transform:rotate(-4deg);padding-bottom:30%;background-position:center center;background-size:100% 100%;background-image:url("/img/bg-shop.jpg");transition:0.5s ease-in-out;transition-property:background-size}#closer .img.active{background-size:110% 110%}#closer h2{display:grid;text-transform:uppercase;white-space:pre-line;text-align:center;line-height:0.9em;font-size:13vw;font-family:"Marcellus", serif;-webkit-text-stroke:1px black;color:rgba(0,0,0,0);font-weight:lighter;grid-area:main;transition:transform, color, 0.5s ease-in-out;transform:scale(1)}#closer h2:hover{color:#000;transform:scale(0.98)}footer{padding:8rem 6vw 5rem 6vw;color:white;background:#111;display:grid;grid-template-columns:50% 50%}footer .copyright{height:100%;position:relative}footer .copyright p{position:absolute;bottom:0;left:0;font-size:0.85rem;letter-spacing:0.1em}footer .copyright p span{text-transform:uppercase}.links{display:grid}.links .primary_links,.links .other_links{display:grid;grid-template-columns:50% 50%}.links .primary_links span,.links .other_links span{pointer-events:none}.links .primary_links{text-transform:uppercase;font-size:1.8rem}.links .primary_links li{margin:1.5rem 0}.links .other_links{margin-top:4rem;font-size:0.9rem}.links .other_links li{margin:0.5rem 0}.links li{list-style:none}@media only screen and (max-width: 768px){#cursor{display:none}header .logo{font-size:0.9rem}header .shop_link{display:none}header #menu{grid-template-columns:1fr}header #menu #thumb{display:none}header #menu .links .primary_links{font-size:1rem}#news{grid-template-columns:1fr}#news .section_title{display:none}#news ul{padding-left:2vw;padding-right:2vw}#concept .head{grid-template-columns:1fr;grid-template-rows:auto auto;grid-template-areas:"txt" "img"}#concept .head .img{padding-bottom:120%;grid-area:img}#concept .head .slogan{padding:13vw 13vw}#concept .body h2 p{transform:translateY(16vh)}#location{padding-left:2vw;padding-right:2vw}#location .location{grid-template-columns:1fr;grid-template-areas:"table"}#location .location .thumbWrapper{display:none}#location .location .table li,#location .location .table .list{padding:2rem 0}#location .location .table li .place,#location .location .table .list .place{font-size:1.5rem}footer{grid-template-columns:1fr;grid-template-areas:"link" "copy";grid-template-rows:auto auto}footer .links .primary_links{font-size:1rem}footer .links .other_links{font-size:0.8rem}footer .copyright{grid-area:copy;margin-top:2rem;font-size:0.5rem}}@keyframes menuIconIn{0%{opacity:0;transform:translateY(-10px) rotate(-90deg)}1%{opacity:0;transform:translateY(10px) rotate(-90deg)}100%{opacity:1;transform:translateY(0) rotate(-90deg)}}@keyframes menuIconOut{0%{opacity:1;transform:translateY(0) rotate(-90deg)}100%{opacity:0;transform:translateY(-10px) rotate(-90deg)}}@keyframes menuLine_1_in{0%{opacity:0;transform:translateY(-5px) rotate(var(--random2))}1%{opacity:0;transform:translateY(10px) rotate(var(--random1))}100%{opacity:1;transform:translateY(0) rotate(0)}}@keyframes menuLine_1_out{0%{opacity:1;transform:translateY(0) rotate(0)}100%{opacity:0;transform:translateY(-15px) rotate(var(--random1))}}@keyframes menuLine_2_in{0%{opacity:0;transform:translateY(-5px) rotate(var(--random1))}1%{opacity:0;transform:translateY(15px) rotate(var(--random2))}100%{opacity:1;transform:translateY(0) rotate(0)}}@keyframes menuLine_2_out{0%{opacity:1;transform:translateY(0) rotate(0)}100%{opacity:0;transform:translateY(-5px) rotate(var(--random2))}}@keyframes menuItemIn{0%{opacity:0;transform:translateY(-75%)}.01%{opacity:0;transform:translateY(75%)}100%{opacity:1;transform:translateY(0)}}@keyframes menuItemOut{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-75%)}}@keyframes menuThumbIn{0%{opacity:0;transform:translateY(-10%) rotate(-1.5deg)}0.01%{opacity:0;transform:translateY(10%) rotate(0)}100%{opacity:1;transform:translateY(0) rotate(-1.5deg)}}@keyframes menuThumbOut{0%{opacity:1;transform:translateY(0) rotate(-1.5deg)}40%{opacity:0;transform:translateY(-10%) rotate(-3deg)}}@keyframes thumbsIn{0%{opacity:0;transform:var(--startPosition)}100%{opacity:1;transform:translate3d(0, 0, 0) rotateX(0) rotateY(0)}}@keyframes thumbsOut{0%{opacity:1;transform:translate3d(0, 0, 0) rotateX(0) rotateY(0)}100%{opacity:0;transform:var(--endPosition)}}