@charset "utf-8";
:root{
  --night:#0E1530;
  --ink:#16204A;
  --ink-2:#243158;
  --stamp:#d33451;
  --rose:#E8879B;
  --sky:#B9C6E0;
  --paper:#E9EAEE;
  --paper-2:#F5F6F8;
  --sumi:#3A4260;

  --w:1120px;
  --r:10px;
  --shadow:0 2px 14px rgba(14,21,48,.10);

  --font:"Hiragino Sans","Noto Sans JP","Yu Gothic Medium",system-ui,sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

html, body{ overflow-x:hidden; }

body{
  margin:0;
  font-family:var(--font);
  color:var(--sumi);
  background:var(--paper-2);
  line-height:1.75;
  font-feature-settings:"palt";
}

a{ color:inherit; text-decoration:none; }

img{ max-width:100%; height:auto; display:block; }

:focus-visible{
  outline:2px solid var(--stamp);
  outline-offset:2px;
}

.wrap{ width:min(100% - 2.4rem, var(--w)); margin-inline:auto; }

.site-header{
  background:var(--night);
  color:#F2F3F6;
  position:sticky; top:0; z-index:50;
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  min-height:66px; gap:1rem;
}
.brand{ display:flex; flex-direction:column; gap:3px; }
.brand b{
  font-size:18px; font-weight:300;
  letter-spacing:.3em; text-indent:.3em;
}
.brand small{
  font-size:11px; color:var(--sky);
  letter-spacing:.5em; text-indent:.5em;
}
.gnav{ display:flex; gap:1.5rem; font-size:16px; }
.gnav a{ color:#D5DAE6; padding:.4rem 0; }
.gnav a:hover{ color:#fff; }

.nav-toggle{ display:none; }

.site-footer{
  background:var(--night); color:var(--sky);
  padding:2.6rem 0 3.2rem; margin-top:4rem; font-size:15.5px;
}
.site-footer nav{
  display:flex; flex-wrap:wrap; gap:1.2rem; margin-bottom:1.6rem;
}
.site-footer small{ font-size:13px; opacity:.6; }

.head{ margin:0 0 1.1rem; font-size:23px; font-weight:600; color:var(--ink); }
.head-lead{ margin:0 0 1.8rem; font-size:15.5px; color:#6B7391; }

@media (max-width:760px){

  .nav-btn{
    display:block; width:26px; height:18px;
    position:relative; z-index:60; cursor:pointer;
  }
  .nav-btn span,
  .nav-btn::before,
  .nav-btn::after{
    content:""; position:absolute; left:0; right:0;
    height:1.5px; background:#F2F3F6; border-radius:2px;
    transition:transform .28s cubic-bezier(.4,0,.2,1),
               opacity .18s ease,
               top .28s cubic-bezier(.4,0,.2,1),
               bottom .28s cubic-bezier(.4,0,.2,1);
  }
  .nav-btn::before{ top:0; }
  .nav-btn span   { top:8px; }
  .nav-btn::after { bottom:0; }

  .nav-toggle:checked ~ .nav-btn::before{ top:8px; transform:rotate(45deg); }
  .nav-toggle:checked ~ .nav-btn span   { opacity:0; transform:scaleX(.4); }
  .nav-toggle:checked ~ .nav-btn::after { bottom:8px; transform:rotate(-45deg); }

  .nav-toggle:focus-visible ~ .nav-btn{
    outline:2px solid var(--stamp); outline-offset:6px; border-radius:2px;
  }

  .gnav{
    position:absolute; top:100%; left:0; right:0;
    background:var(--night);
    flex-direction:column; gap:0;
    padding:.4rem 1.2rem calc(2rem + env(safe-area-inset-bottom, 0px));
    display:flex;
    border-top:1px solid var(--ink-2);
    max-height:calc(100vh - 66px);
    max-height:calc(100dvh - 66px);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    opacity:0; visibility:hidden;
    transform:translateY(-8px);
    transition:opacity .24s ease,
               transform .24s cubic-bezier(.4,0,.2,1),
               visibility 0s linear .24s;
  }
  .nav-toggle:checked ~ .gnav{
    opacity:1; visibility:visible; transform:none;
    transition:opacity .24s ease,
               transform .28s cubic-bezier(.16,1,.3,1),
               visibility 0s;
  }

  .gnav a{
    padding:.95rem 0; font-size:16.5px;
    border-bottom:1px solid var(--ink-2);
    opacity:0; transform:translateY(-6px);
    transition:opacity .3s ease, transform .3s cubic-bezier(.16,1,.3,1);
  }
  .gnav a:last-child:not(.gnav-me){ border-bottom:none; }
  .nav-toggle:checked ~ .gnav a{ opacity:1; transform:none; }
  .nav-toggle:checked ~ .gnav a:nth-child(1){ transition-delay:.06s; }
  .nav-toggle:checked ~ .gnav a:nth-child(2){ transition-delay:.10s; }
  .nav-toggle:checked ~ .gnav a:nth-child(3){ transition-delay:.14s; }
  .nav-toggle:checked ~ .gnav a:nth-child(4){ transition-delay:.18s; }
  .nav-toggle:checked ~ .gnav a:nth-child(5){ transition-delay:.22s; }
  .nav-toggle:checked ~ .gnav a:nth-child(6){ transition-delay:.26s; }

  .gnav a.gnav-me{
    flex:0 0 auto;
    margin-top:.8rem; padding:.9rem 0;
    border:1px solid var(--ink-2); border-radius:8px;
    text-align:center; color:#fff !important;
  }

  .gnav::after{
    content:""; position:fixed; left:0; right:0; top:100%; bottom:0;
    background:rgba(8,12,28,.5);
    opacity:0; pointer-events:none;
    transition:opacity .24s ease;
  }
  .nav-toggle:checked ~ .gnav::after{ opacity:1; }
}

@media (max-width:760px) and (prefers-reduced-motion:reduce){
  .gnav, .gnav a, .nav-btn span, .nav-btn::before, .nav-btn::after{
    transition:none !important; transition-delay:0s !important;
  }
}
@media (min-width:761px){
  .nav-btn{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
}

.brand.is-image{ display:block; }
.brand.is-image img{
  height:38px; width:auto; max-width:210px; object-fit:contain;
}
@media (max-width:560px){
  .brand.is-image img{ height:30px; max-width:160px; }
}

.pagetop{
  position:fixed; right:20px; bottom:20px; z-index:40;
  width:48px; height:48px; border-radius:50%;
  border:1px solid rgba(255,255,255,.18);
  background:var(--ink); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px rgba(14,21,48,.28);
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .22s ease, transform .22s cubic-bezier(.16,1,.3,1),
             visibility 0s linear .22s, background .16s ease;
}
.pagetop.is-on{
  opacity:1; visibility:visible; transform:none;
  transition:opacity .22s ease, transform .28s cubic-bezier(.16,1,.3,1),
             visibility 0s, background .16s ease;
}
.pagetop:hover{ background:var(--stamp); }
.pagetop:active{ transform:translateY(2px); }
.pagetop:focus-visible{ outline:3px solid var(--stamp); outline-offset:3px; }

.pagetop-arrow{
  position:relative; width:14px; height:14px; margin-top:3px;
}
.pagetop-arrow::before{
  content:""; position:absolute; left:6.2px; top:0;
  width:1.6px; height:14px; background:#F2F3F6; border-radius:1px;
}
.pagetop-arrow::after{
  content:""; position:absolute; left:2px; top:1px;
  width:9px; height:9px;
  border-top:1.6px solid #F2F3F6; border-left:1.6px solid #F2F3F6;
  transform:rotate(45deg);
}

@media (max-width:560px){
  .pagetop{ right:14px; bottom:14px; width:44px; height:44px; }
}
@media (prefers-reduced-motion:reduce){
  .pagetop{ transition:opacity .01s, visibility 0s; }
}

.shop{
  display:flex; flex-direction:column; align-items:flex-start;
  gap:.1em;
  max-width:100%; min-width:0;
}
.shop-n{
  max-width:100%;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.shop-k{
  max-width:100%;
  font-size:.86em; font-weight:400; color:#5B6480; letter-spacing:.02em;
  line-height:1.5;
  white-space:normal; overflow-wrap:anywhere;
}
.shop.is-lg .shop-k,
.shop.is-stack .shop-k{ font-size:.72em; }

select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    calc(100% - 22px) calc(50% - 2px),
    calc(100% - 17px) calc(50% - 2px);
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
  padding-right:2.6rem;
}
select::-ms-expand{ display:none; }