@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+Display:ital,wght@0,100..900;1,100..900&display=swap');
@import url("https://use.typekit.net/txm6kjs.css");


.forpc, .nosp{ display: inline-block; }
.nopc, .forsp{ display: none; }
@media (max-width: 800px) {
  .nopc, .forsp{ display: inline-block; }
  .forpc, .nosp{ display: none; }
}

.mgt0{margin-top:0!important} .mgt5{margin-top:5px!important} .mgt10{margin-top:10px!important} .mgt20{margin-top:20px!important} .mgt30{margin-top:30px!important} .mgt40{margin-top:40px!important} .mgt50{margin-top:50px!important} .mgt60{margin-top:60px!important} .mgt80{margin-top:80px!important} .mgt100{margin-top:100px!important}
.mgb0{margin-bottom:0!important} .mgb5{margin-bottom:5px!important}
.mgb10{margin-bottom:10px!important} .mgb15{margin-bottom:15px!important} .mgb20{margin-bottom:20px!important} .mgb30{margin-bottom:30px!important} .mgb40{margin-bottom:40px!important} .mgb50{margin-bottom:50px!important} .mgb60{margin-bottom:60px!important} .mgb80{margin-bottom:80px!important} .mgb100{margin-bottom:100px!important}
.pdt0{padding-top:0!important} .pdt10{padding-top:10px!important} .pdt20{padding-top:20px!important} .pdt30{padding-top:30px!important} .pdt40{padding-top:40px!important} .pdt50{padding-top:50px!important} .pdt60{padding-top:60px!important}
.pdb0{padding-bottom:0!important} .pdb10{padding-bottom:10px!important} .pdb15{padding-bottom:15px!important} .pdb20{padding-bottom:20px!important} .pdb30{padding-bottom:30px!important} .pdb40{padding-bottom:40px!important} .pdb50{padding-bottom:50px!important} .pdb60{padding-bottom:60px!important} .pdb100{padding-bottom:200px!important}


body { font-size:16px; color:#231815; line-height: 1.5; letter-spacing: 0.03em; background-color:#ebeae8; font-family: "poppins","Noto Sans JP", sans-serif; font-weight: 400; font-style: normal; scroll-behavior: smooth; box-sizing: border-box; }
.font_en { font-family: "Noto Serif Display", serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; }
img { vertical-align: bottom; }
@media (max-width: 800px) {
  body { font-size:15px; font-family: "poppins","Noto Sans JP", sans-serif; font-weight: 400; font-style: normal; }
}

#navArea { position: fixed; z-index: 10000; width:50%; right:0; }
#navArea nav { position: fixed; width:30%; z-index: 10001; top: 10vh; right: 0; bottom: 0; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; transition: all 0.7s; opacity: 0; transform: translateX(50vw); }
#navArea.open nav { opacity: 1; width:430px; transform: translateX(0); }
#navArea nav .inner { width:70%; margin:auto; }
#navArea nav .inner ul { list-style: none; margin: auto; padding: 0; }
#navArea nav .inner ul li { position: relative; margin-bottom:20px; }
#navArea nav .inner ul li#navTitle { color:#333;; font-size: 28px; font-weight: bold; padding-bottom:40px; }
#navArea nav .inner ul li a { display: block; color:#333; font-size: 20px; font-weight: bold; line-height: 1.2; text-decoration: none; transition-duration: 0.3s; position:relative; width:fit-content; }
#navArea nav .inner ul li a::after { content: ""; width:0; height:1px; background-color:#333; position:absolute; bottom:0; left:0; transition:all 0.3s ease-in-out; }
#navArea nav .inner ul li a:hover::after { width:100%; }

#navArea nav div.nav_logo{ width:50%; max-width:40px; text-align:left; margin-top:50px; margin-left:15%; }
#navArea nav div.nav_logo > img { width:100%; }
@media (min-width: 1660px) {
  #navArea.open nav { width:26%; }
}
@media (max-width: 800px) {
  #navArea { width:100%; }
  #navArea nav { width:100%; transform: translateX(100vw); top: 15vh; }
  #navArea.open nav { opacity: 1; width:100%; }
  #navArea nav .inner { width:80%; }
}

#g_nav { position:fixed; width:100%; left:0; top:0; z-index: 100; display: flex; }
#g_nav > div#gNav_logo { width:70%; text-align:left; margin-left:50px; margin-top:20px; box-sizing: border-box; }
#g_nav > div#gNav_logo img { width:200px; transition: all 0.3s ease-in-out; }
#g_nav > div#gNav_logo img:hover { position:relative; transform: translateY(-10px); }
#g_nav > div#cart_btn { width:220px; display: flex; column-gap: 20px; height:90px; align-items: center; }
#g_nav > div#cart_btn > div > a img { width:40px; height:40px; object-fit: contain; transition: all 0.3s ease-in-out; }
#g_nav > div#cart_btn > div > a:hover img { transform: scale(1.15, 1.15); }
@media (max-width: 800px) {
  #g_nav { justify-content: space-between; }
  #g_nav > div#gNav_logo { width:50%; margin-left:30px; margin-top:10px; }
  #g_nav > div#gNav_logo img { width:100%; max-width:120px; height:64px; }
  #g_nav > div#cart_btn { width:90px; justify-content: flex-end; text-align:right; column-gap:8px; height:80px; }
  #g_nav > div#cart_btn > div > a img { width:25px; height:25px; }
}


#toggle_btn { width:160px; }
#toggle_btn #menu_btn { margin-top:20px; margin-right:30px; }
#toggle_btn #menu_btn > p { font-size:24px; font-weight: 700; color: #231815; background-color:#fefefe; border:solid 3px #231815; line-height: 36px; padding:4px 20px 0; border-radius: 26px; min-width: 80px; text-align:center; box-shadow: 3px 4px #231815; }
#toggle_btn #menu_btn > p::before { content:"MENU"; transition: all 0.6s ease-in-out; }
#navArea.open #toggle_btn #menu_btn > p::before { content:"CLOSE"; }
#toggle_btn #menu_btn > p:hover { background-color:#95caff; cursor: pointer; box-shadow: 2px 3px #231815; position:relative; top:1px; }
@media (max-width: 800px) {
  #toggle_btn { width:120px; }
  #toggle_btn #menu_btn { margin-left:15px; margin-right:15px; }
  #toggle_btn #menu_btn > p { font-size:16px; line-height: 27px; min-width: 60px; padding:3px 10px 0; }
}


/*
#toggle_btn span { display: block; position: absolute; left: 0; width: 30px; height: 2px; background-color: #333; border-radius: 4px; transition: all 0.6s; }
#toggle_btn span:nth-child(1) { top: 4px; }
#toggle_btn span:nth-child(2) { top: 14px; }
#toggle_btn span:nth-child(3) { bottom: 4px; }
#navArea.open #toggle_btn span { background-color: #333; }
#navArea.open #toggle_btn span:nth-child(1) { -webkit-transform: translateY(10px) rotate(-315deg); transform: translateY(10px) rotate(-315deg); }
#navArea.open #toggle_btn span:nth-child(2) { opacity: 0; }
#navArea.open #toggle_btn span:nth-child(3) { -webkit-transform: translateY(-10px) rotate(315deg); transform: translateY(-10px) rotate(315deg); }
*/



#navArea #mask { display: block; -webkit-overflow-scrolling: touch; position: fixed; top: 0; right:0; width: 30vw; min-width: 420px; height: 100%; background: linear-gradient(rgba(241,171,169,0.9) 0%, rgba(231,141,139,1) 95%, rgba(241,171,169,1) 100%); right:0; z-index: 2; transform: translateX(50vw); transition: all 0.5s ease-in-out; }
#navArea.open #mask { transform: translateX(0); }
@media (max-width: 800px) {
  #navArea #mask { width: 100vw; transform: translateX(100vw); min-width:auto; }
}


footer#footer { border-top:solid #231815 2px; padding-top:50px; padding-bottom:80px; }
footer#footer div#footerLogo { width:50%; max-width:260px; margin:auto; }
footer#footer div#footerLogo > img { width:100%; }

footer#footer div#footerMenu { width:70%; max-width:650px; margin:40px auto; }
footer#footer div#footerMenu ul { display: flex; flex-wrap: wrap; justify-content: center; gap:10px 30px; }
footer#footer div#footerMenu ul li > a { color:#231815; font-weight: bold; line-height: 2; position:relative; }
footer#footer div#footerMenu ul li > a::after { content: ""; width:0; height:1px; background-color:#333; position:absolute; left:0; bottom:0; transition: all 0.3s ease-in-out; }
footer#footer div#footerMenu ul li > a:hover::after { width:100%; }
footer#footer div#footer_insta { margin:auto; text-align:center; width:20%; max-width:32px; margin-bottom:40px }
footer#footer div#copyright { text-align:center; margin:auto; }
footer#footer div#copyright > p { font-size:12px; letter-spacing: 1px; }
@media (max-width: 800px) {
  footer#footer { padding-top:40px; padding-bottom:50px; }
  footer#footer div#footerLogo { width:44%; max-width:220px; }
  footer#footer div#footerMenu { margin:20px auto 30px; }
  footer#footer div#footerMenu ul { flex-direction: column; gap:0; text-align: center; }
  footer#footer div#footerMenu ul li > a { text-align:center; }
  footer#footer div#copyright > p { font-size:11px; letter-spacing: 0; }
}



/* マウスストーカー */
#js-stalker-wrap { opacity: 0; transition: 2s; pointer-events: none; }
#js-stalker { position: absolute; width: 32px; height: 32px; border-radius: 50%; text-indent: -9999px; background: rgba(149,202,255, 0.8); background-blend-mode: overlay; z-index: 19999; transition-property: width, height; transition-duration: 0.4s; transition-timing-function: ease; }
#js-stalker.is_active { width:52px; height:52px; transform: translate(-10px,-10px); }
@media (max-width: 500px) {
  #js-stalker-wrap, #js-stalke { display: none; }
}

