@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New&display=swap');

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

html, body { margin: 0; padding: 0; }
a:hover{
  opacity: 0.8;
}
body {
  color: #232323;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  line-height: 1.85;
  -webkit-text-size-adjust: 100%;
  background: #fff;
  font-size: 16px;
}

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

.inner {
  width: 100%;
  max-width: 1100px;
  margin-inline: auto;
}
.sp_area{
  display: none !important;
}
.pc_area{
   display: block !important;
}
@media (max-width: 768px) {
  .inner {
    width: calc(100% - 60px);
    max-width: 1100px;
    margin: 0 auto;
  }
  .sp_area{
   display: block !important;
  }
  .pc_area{
   display: none !important;
  }
}
/* ==========footer ========== */

/* ========== CTA BUTTONS ========== */
.footer__cta { 
  padding: 100px 0 40px; 
  background: #faf9f6;
}
.footer__cta__grid {
  display: flex;
  gap: 30px;
}
.footer__cta__item--shop  {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #fff;
  background: #deaa00;
  width: calc(50% - 15px);
  position: relative;
  border-radius: 5px;
  font-size: 28px;
  gap: 20px;
  padding:5px 30px 5px;
}
.footer__cta__item-contact  {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #fff;
  background: #185c30;
  width: calc(50% - 15px);
  position: relative;
  border-radius: 5px;
  font-size: 26px;
  gap: 20px;
  padding:5px 30px 5px;
}
.footer__cta__title { 
  font-weight: 700; 
  line-height: 1.6; 
}
.footer__cta__arrow{
  position: absolute;
  right: 30px;
  top:50%;
  transform: translate(0, -50%);
}
@media (max-width: 768px) {
    .footer__cta { 
        padding: 47px 0 40px; 
    }
    .footer__cta__grid {
        flex-direction: column;
        gap: 20px;
    }
    
    .footer__cta__grid a{
        justify-content: start;
    }
    .footer__cta__item--shop  {
        width: 100%;
        font-size: 16px;
        padding:5px 30px 5px;
    }
    .footer__cta__item-contact  {
        width: 100%;
        font-size: 16px;
        padding:5px 30px 5px;
    }
    .footer__cta__title { 
        font-weight: 700; 
        line-height: 1.4; 
    }
    .footer__cta__arrow{
        position: absolute;
        right: 30px;
        top:50%;
        transform: translate(0, -50%);
    }
    .footer__cta__grid-icon{
        width: 42px;
    }
    .footer__cta__arrow img{
        width: 8px;
    }
}


.site-header .inner { 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  padding-block: 12px; 
}
.site-footer { 
  padding: 48px 0; 
  font-weight: 700;
  background: #faf9f6;
}
.site-footer__logo { width: 56px; height: 56px; object-fit: cover; }
.footer__list{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 54px;
  font-weight: 700;
}
.footer__wrap{
  width: 100%;
  max-width: 1300px;
  display: flex;
  margin: 0 auto;
  justify-content: space-between;
}
.footer__brandtext{
  margin-top: 25px;
}
.footer__nav{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 54px;
  margin: 0 47px;
}

@media (max-width: 768px) {
  .site-footer { 
    padding: 15px 0; 
  }
  .site-footer__logo { 
    width: 56px; 
    height: 56px; 
    object-fit: cover; 
  }
  .footer__list{
    display: block;
    flex-wrap: wrap;
    width: calc(50% - 5px);
    gap: 5px;
  }
  .footer__list li{
    font-size: 12px;
  }
  .footer__wrap{
    flex-direction: column-reverse;
  }
  .footer__brandtext{
    margin-top: 25px;
  }
  .footer__nav{
    align-items: start;
    gap: 10px;
    justify-content: center;
    margin: 0 30px;
  }
  .footer__brand{
    margin: 50px 30px 30px;

  }
  .footer__brand img{
    width: 175px;
  }
  .footer__brandtext{
    margin-top: 10px;
    font-size: 12px;
  }

}


/* ================= Header ================= */
.site-header {
  position: sticky; 
  top: 0; z-index: 50; 
  background: #fff;
  border-bottom: 1px solid #efefef;
}
.header__bar {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 20px;
  padding: 5px 15px;
}

/* logo */
.header__logo {
  display: inline-flex;
  padding: 5px 15px;
}
.header__brand { display: grid; line-height: 1.1; }
.header__brand strong { font-size: 14px; font-weight: 800; letter-spacing: .06em; }
.header__brand small { font-size: 10px; color: #777; }

/* nav + ctas row */
.header__right {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: end;
}

/* gnav */
.gnav__list {
  margin: 0; 
  padding: 0; 
  list-style: none;
  display: flex; 
  justify-content: center;
  gap: 35px;
  font-weight: bold;
}
.gnav__list a {  
  letter-spacing: 0.01em;
}

/* CTAs */
.header__ctas { display: flex; gap: 14px; }
.cta-btn {
  display: inline-flex; 
  align-items: center; 
  gap: 13px;
  padding: 12px 18px; 
  text-decoration: none;
  letter-spacing: .02em; 
  color: #fff;
  border-radius: 5px;
}
.cta-btn svg { flex: 0 0 auto; }
.cta-btn__chev { margin-left: 6px; opacity: .9; }
.cta-btn--shop { background: #deaa00; }
.cta-btn--contact { background: #185c30; }

/* Hamburger (hidden on PC) */
.header__hamburger { display: none; width: 34px; height: 28px; position: relative; cursor: pointer; }
.header__hamburger span {
  position: absolute; left: 0; right: 0; height: 2px; background: #111; transform-origin: center; transition: .25s;
}
.header__hamburger span:nth-child(1){ top: 4px; }
.header__hamburger span:nth-child(2){ top: 13px; }
.header__hamburger span:nth-child(3){ bottom: 4px; }
.header__toggle { display: none; }
.header__toggle:checked + .header__hamburger span:nth-child(1){ transform: translateY(9px) rotate(45deg); }
.header__toggle:checked + .header__hamburger span:nth-child(2){ opacity: 0; }
.header__toggle:checked + .header__hamburger span:nth-child(3){ transform: translateY(-9px) rotate(-45deg); }
.gnav__list-star{
  display: none;
}
.gnav__list .sp-only{
  display: none;
}
.header__ctas a.sp-only{
  display: none;
}
@media (max-width: 1400px) {
  .gnav__list{
        gap: 20px;
  }
  .cta-btn {
    padding: 8px 10px;
  }
  .header__right{
    opacity: 0;
    position: absolute;
    pointer-events: none;
    display: block;
    width: 100%;
    height: 100vh;
    top: 65px;
    right: 0;
    background: #faf9f6;
    z-index: 2px;
    display: block;
    padding: 30px 50px;
  }
  .gnav__list{
    display: block;
  }
  .gnav__list a{
    display: flex;
    align-items: center;
    padding: 13px 0;
    gap: 10px;
    border-bottom: solid 1px #4a4a4a;
  }
  .gnav__list-star{
    display: block;
  }
  .header__toggle:checked + .header__hamburger + .header__right{
    opacity: 1;
    pointer-events: auto;
  }
  .gnav__list .sp-only{
    display: block;
  }  
  .header__ctas { 
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 30px 0; 
  }
  .cta-btn{
    width: 100%;
  }
  .header__ctas a{
    display: none;
    position: relative;
    line-height: 1.2;
    padding: 8px 26px;
  }
  .header__ctas a.sp-only{
    display: flex;
  }
  .header__ctas a .cta-btn-icon{
    width: 40px;
  }
  .cta-btn__chev{
    position: absolute;
    right: 40px;
    top:50%;
    transform: translate(0, -50%);
  }
  .cta-btn__chev img{
    width: 5px;
  }
    .header__bar { 
      padding: 9px 5px;
      display: flex;
      justify-content: space-between;
    }
    .header__logo img { 
      width: 145px; 
    }
    .header__hamburger{
      margin-right: 15px;
    }
    .header__brand { display: none; } 
    .header__hamburger { display: inline-block; }
  }