/* =======================================================
   Google Fonts - Warm Beauty for Nokaso
======================================================= */

@import url("https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Libre+Caslon+Display&family=Noto+Sans+JP:wght@500&family=Noto+Serif+JP:wght@400;500;600;700&family=Poppins:wght@500&display=swap");

/* =======================================================
   1. Design Tokens / CSS Variables
======================================================= */

:root {
  /* ----- Fonts ----- */
  --wb-font-jp: "Noto Serif JP", serif;
  --wb-font-jp-sans: "Noto Sans JP", sans-serif;
  --wb-font-title: "Libre Caslon Display", serif;
  --wb-font-latin: "Libre Baskerville", serif;
  --wb-font-poppins: "Poppins", serif;

  /* ----- Brand colors ----- */
  --wb-color-text: #6A5F55;
  --wb-color-black: #000000;
  --wb-color-white: #FFFFFF;
  --wb-color-title: #A88B62;
  --wb-color-accent: #B09064;
  --wb-color-soft-gold: #A38559;
  --wb-color-green: #B5BDA7;
  --wb-color-bg-light: #EDE9E5;
  --wb-color-bg-soft: #F1E9DC;
  --wb-color-bg-warm: #D9C8B2;
  --wb-color-line: #C9B79B;

  /* ----- Spacing ----- */
  --wb-section-pad-y-mobile: 48px;
  --wb-section-pad-y-tablet: 64px;
  --wb-section-pad-y-desktop: 80px;
  --wb-container-pad-x: 16px;
}
/* =======================================================
   Wrapper
======================================================= */

footer.wb-footer-new {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  padding: 48px 0 24px;
  overflow-x: hidden;
  background-color: var(--wb-color-text);
  color: var(--wb-color-white);
  font-family: var(--wb-font-jp);
}

footer.wb-footer-new .wb-foot-inner {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;
  max-width: 1084px;
  margin: 0 auto;
  padding: 0 24px;
}

footer.wb-footer-new .wb-foot-col {
  flex: 1;
  min-width: 0;
  max-width: 100%;
}

/* =======================================================
   Row - Label + Circular Arrow Button
======================================================= */

footer.wb-footer-new .wb-fc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 0 0 16px;
}

footer.wb-footer-new .wb-fc-label {
  min-width: 0;
  color: var(--wb-color-white);
  font-family: var(--wb-font-jp);
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: 0;
}

footer.wb-footer-new .wb-fc-btn {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  color: var(--wb-color-white);
  text-decoration: none;
  border: 1px solid var(--wb-color-white);
  border-radius: 50%;
  transition:
    background 0.25s ease,
    color 0.25s ease;
}

footer.wb-footer-new .wb-fc-btn:hover {
  background: var(--wb-color-white);
  color: var(--wb-color-text);
}

footer.wb-footer-new .wb-fc-btn:hover .fa-long-arrow-right::before {
  background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2715%27%20height%3D%2717%27%20viewBox%3D%270%200%2015%2017%27%20fill%3D%27none%27%3E%3Cpath%20d%3D%27M12.948%209.40694L4.84082%201.2998L6.14044%200.000187417L14.2476%208.10732L12.948%209.40694Z%27%20fill%3D%27%236A5F55%27%2F%3E%3Cpath%20d%3D%27M6.14044%2016.2151L4.84082%2014.9155L12.948%206.80839L14.2476%208.10801L6.14044%2016.2151Z%27%20fill%3D%27%236A5F55%27%2F%3E%3Cpath%20d%3D%27M12.8712%209.02686H0V7.18751H12.8712V9.02686Z%27%20fill%3D%27%236A5F55%27%2F%3E%3C%2Fsvg%3E");
}

footer.wb-footer-new .wb-fc-btn .fa {
  font-size: 14px;
}

/* =======================================================
   Divider
======================================================= */

footer.wb-footer-new .wb-foot-divider {
  height: 1px;
  margin: 16px 0 24px;
  background-color: rgba(255, 255, 255, 0.6);
}

/* =======================================================
   Tel Row
======================================================= */

footer.wb-footer-new .wb-foot-tel {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 32px;
}

footer.wb-footer-new .wb-tel-label {
  font-size: 16px;
  letter-spacing: 0.08em;
}

footer.wb-footer-new .wb-tel-number {
  font-size: 18px;
  letter-spacing: 0.06em;
}

footer.wb-footer-new .wb-tel-number a,
footer.wb-footer-new .wb-tel-number a:link,
footer.wb-footer-new .wb-tel-number a:visited,
footer.wb-footer-new .wb-tel-number a:hover,
footer.wb-footer-new .wb-tel-number a:active {
  color: #fff !important;
  text-decoration: none;
}

/* =======================================================
   Brand Block
======================================================= */

footer.wb-footer-new .wb-foot-brand {
  margin: 16px 0 0;
}

footer.wb-footer-new .wb-foot-tag {
  margin: 0 0 8px;
  color: var(--wb-color-white);
  font-family: var(--wb-font-jp);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.05em;
}

footer.wb-footer-new .wb-foot-logo {
  width: 308px;
  height: 79px;
  margin: 0 0 16px;
}

footer.wb-footer-new .wb-foot-logo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

footer.wb-footer-new .wb-foot-address {
  margin: 0;
  color: var(--wb-color-white);
  font-family: var(--wb-font-jp);
  font-size: 14px;
  font-weight: 500;
  line-height: 30px;
}

footer.wb-footer-new .wb-foot-address p {
  margin: 0;
}

/* =======================================================
   Nav Menu - Mobile
======================================================= */

footer.wb-footer-new .wb-foot-nav {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  justify-content: start;
  gap: 12px 20px;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}

footer.wb-footer-new .wb-foot-nav li {
  min-width: 0;
  margin: 0;
}

footer.wb-footer-new .wb-foot-nav a {
  display: inline-block;
  max-width: 100%;
  color: var(--wb-color-white);
  font-family: var(--wb-font-jp);
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 32px;
  text-decoration: none;
  letter-spacing: 0;
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
  transition: opacity 0.25s ease;
}

footer.wb-footer-new .wb-foot-nav a:hover {
  opacity: 0.7;
}

/* =======================================================
   Social Icons
======================================================= */

footer.wb-footer-new .wb-foot-sns {
  display: flex;
  justify-content: flex-start;
  gap: 16px;
  margin: 24px 0;
  padding: 0;
  list-style: none;
}

footer.wb-footer-new .wb-foot-sns li {
  margin: 0;
}

footer.wb-footer-new .wb-foot-sns a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--wb-color-white);
  text-decoration: none;
  transition: opacity 0.25s ease;
}

footer.wb-footer-new .wb-foot-sns a:hover {
  opacity: 0.7;
}

footer.wb-footer-new .wb-foot-sns .fa {
  font-size: 22px;
}

/* =======================================================
   Copyright
======================================================= */

footer.wb-footer-new .wb-foot-copy {
  margin: 24px 0 0;
  padding: 16px 0 0;
  color: var(--wb-color-white);
  font-family: var(--wb-font-jp);
  font-size: 14px;
  font-weight: 500;
  line-height: 26px;
  text-align: left;
}

/* =======================================================
   Mobile Ordering - Match Figma SP Layout
======================================================= */

footer.wb-footer-new .wb-foot-inner {
  display: flex;
  flex-direction: column;
}

footer.wb-footer-new .wb-foot-col {
  display: contents;
}

footer.wb-footer-new .wb-foot-left > .wb-fc-row {
  order: 1;
}

footer.wb-footer-new .wb-foot-left > .wb-foot-divider {
  order: 2;
}

footer.wb-footer-new .wb-foot-left > .wb-foot-tel {
  order: 3;
}

footer.wb-footer-new .wb-foot-right > .wb-fc-row:first-of-type {
  order: 4;
}

footer.wb-footer-new .wb-foot-right > .wb-foot-divider {
  order: 5;
}

footer.wb-footer-new .wb-foot-right > .wb-foot-divider ~ .wb-fc-row {
  order: 6;
}

footer.wb-footer-new .wb-foot-right > .wb-foot-nav {
  order: 7;
}

footer.wb-footer-new .wb-foot-right > .wb-foot-sns {
  order: 8;
}

footer.wb-footer-new .wb-foot-left > .wb-foot-brand {
  order: 9;
}

footer.wb-footer-new .wb-foot-right > .wb-foot-copy {
  order: 10;
}

/* ========================================================
   Tablet / Desktop >= 768px
======================================================== */

@media (min-width: 768px) {
  footer.wb-footer-new {
    padding: 110px 0 52px;
  }

  footer.wb-footer-new .wb-foot-inner {
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    width: calc(100% - 80px);
    max-width: 1084px;
    padding: 0;
    gap: 84px;
  }

  footer.wb-footer-new .wb-foot-col {
    display: flex;
    flex: 1 1 500px;
    flex-direction: column;
    width: 500px;
    max-width: 500px;
    min-width: 0;
  }

  footer.wb-footer-new .wb-foot-inner > *,
  footer.wb-footer-new .wb-foot-left > *,
  footer.wb-footer-new .wb-foot-right > * {
    order: 0;
  }

  footer.wb-footer-new .wb-fc-row {
    width: 100%;
    max-width: 500px;
    margin: 0 0 16px;
    justify-content: space-between;
  }

  footer.wb-footer-new .wb-foot-divider {
    width: 100%;
    max-width: 500px;
    margin: 40px 0;
  }

  footer.wb-footer-new .wb-foot-tel {
    width: 100%;
    max-width: 500px;
    margin-bottom: 68px;
  }

  footer.wb-footer-new .wb-tel-label {
    font-size: 24px;
  }

  footer.wb-footer-new .wb-fc-label {
    font-size: 24px;
  }

  footer.wb-footer-new .wb-fc-btn {
    width: 57px;
    height: 57px;
  }

  footer.wb-footer-new .wb-tel-number {
    font-size: 32px;
  }

  footer.wb-footer-new .wb-foot-sns {
    margin: 60px 0;
  }

  footer.wb-footer-new .wb-foot-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    width: 500px;
    max-width: 100%;
    margin-top: 68px;
    gap: 32px 32px;
  }

  footer.wb-footer-new .wb-foot-nav li {
    flex: 0 0 auto;
    min-width: 0;
    margin: 0;
  }

  footer.wb-footer-new .wb-foot-nav a {
    font-size: 20px;
    line-height: 1.6;
    white-space: nowrap;
  }

  footer.wb-footer-new .wb-foot-tag {
    font-size: 20px;
  }

  footer.wb-footer-new .wb-foot-address {
    font-size: 16px;
    line-height: 30px;
  }

  footer.wb-footer-new .wb-foot-copy {
    font-size: 16px;
    line-height: 26px;
    text-align: right;
  }
}

/* =======================================================
   Override Icons by Figma SVG
======================================================= */

footer .wb-foot-sns .fa-instagram {
  display: inline-block;
  width: 42px;
  height: 43px;
  font-family: inherit !important;
  font-weight: normal !important;
  line-height: 0;
}

footer .wb-foot-sns .fa-instagram::before {
  content: "";
  display: inline-block;
  width: 42px;
  height: 43px;
  background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2742%27%20height%3D%2743%27%20viewBox%3D%270%200%2042%2043%27%20fill%3D%27none%27%3E%3Cpath%20d%3D%27M12.3027%200.14881C10.0683%200.25674%208.54197%200.6231%207.20847%201.15802C5.82793%201.70885%204.65781%202.44759%203.49357%203.64428C2.32807%204.84183%201.61239%206.04196%201.07815%207.45666C0.56113%208.82535%200.21043%2010.3888%200.11215%2012.6777C0.0138698%2014.9713%20-0.00839023%2015.7028%200.00252976%2021.5413C0.0134498%2027.379%200.0386498%2028.1117%200.14533%2030.4058C0.25201%2032.6929%200.60859%2034.2547%201.13107%2035.6208C1.66993%2037.0342%202.39065%2038.2318%203.55993%2039.4242C4.72879%2040.6165%205.90185%2041.3488%207.28449%2041.8962C8.62009%2042.4251%2010.1476%2042.785%2012.3829%2042.8852C14.6227%2042.9863%2015.338%2043.0086%2021.0391%2042.9974C26.7427%2042.9863%2027.4579%2042.9605%2029.6978%2042.8517C31.9322%2042.7425%2033.4568%2042.3761%2034.792%2041.8425C36.1725%2041.2895%2037.3426%2040.5529%2038.5069%2039.3558C39.6711%2038.1591%2040.3868%2036.9581%2040.921%2035.5425C41.438%2034.1751%2041.79%2032.6112%2041.887%2030.3241C41.9849%2028.0296%2042.008%2027.2964%2041.9971%2021.4592C41.9861%2015.6211%2041.9605%2014.8896%2041.8543%2012.5969C41.748%2010.308%2041.3902%208.74666%2040.8685%207.38012C40.3288%205.96671%2039.6089%204.77002%2038.4401%203.57677C37.2712%202.38481%2036.0982%201.6508%2034.7155%201.10513C33.3791%200.5758%2031.8524%200.21503%2029.6171%200.11613C27.3777%200.0137904%2026.6629%20-0.00856959%2020.9597%200.00261041C15.2578%200.0137904%2014.5429%200.0387304%2012.3031%200.14881M12.5479%2039.0157C10.5004%2038.9245%209.38869%2038.5762%208.64781%2038.2842C7.66669%2037.8955%206.96655%2037.4294%206.22945%2036.6807C5.49403%2035.9291%205.03749%2035.2145%204.65445%2034.2121C4.36675%2033.4536%204.02025%2032.3167%203.92449%2030.2204C3.82033%2027.9543%203.79639%2027.2745%203.78631%2021.5336C3.77539%2015.7944%203.79597%2015.1141%203.89257%2012.8463C3.98035%2010.7517%204.32265%209.61182%204.60699%208.85416C4.98667%207.84839%205.44027%207.13287%206.17317%206.37822C6.90733%205.624%207.60537%205.15788%208.58523%204.76572C9.32569%204.46945%2010.4358%204.11771%2012.4824%204.01838C14.6971%203.91088%2015.3607%203.88809%2020.9664%203.87691C26.5734%203.86573%2027.2379%203.88594%2029.4529%203.9857C31.4988%204.07686%2032.6122%204.42387%2033.3518%204.71713C34.3338%205.10585%2035.0339%205.56896%2035.7701%206.3206C36.5064%207.07224%2036.963%207.78561%2037.346%208.79095C37.6349%209.54689%2037.9789%2010.6851%2038.0755%2012.7796C38.181%2015.047%2038.2049%2015.7268%2038.215%2021.4665C38.2259%2027.2074%2038.2053%2027.8873%2038.1083%2030.1538C38.0193%2032.25%2037.6795%2033.3887%2037.3939%2034.1481C37.0142%2035.1517%2036.5602%2035.8685%2035.8269%2036.6231C35.0935%2037.3748%2034.3955%2037.8435%2033.4148%2038.2356C32.676%2038.531%2031.5643%2038.8836%2029.5189%2038.983C27.3042%2039.0896%2026.6406%2039.1141%2021.0328%2039.1244C15.427%2039.1356%2014.7634%2039.1141%2012.5483%2039.0157M29.6671%2010.0074C29.6696%2011.4311%2030.8007%2012.584%2032.1913%2012.5814C33.5828%2012.5788%2034.7088%2011.4217%2034.7067%209.99753C34.7038%208.5738%2033.5731%207.42011%2032.1817%207.42269C30.7902%207.42527%2029.6642%208.58326%2029.6667%2010.007M10.2174%2021.5211C10.2287%2027.6185%2015.0658%2032.5506%2021.0202%2032.5386C26.9749%2032.5265%2031.7948%2027.5759%2031.7835%2021.4785C31.7717%2015.3833%2026.9342%2010.4486%2020.9786%2010.4602C15.0242%2010.4722%2010.2056%2015.425%2010.2174%2021.5211ZM13.9999%2021.5134C13.9931%2017.5561%2017.1217%2014.341%2020.9862%2014.3341C24.8514%2014.3263%2027.9922%2017.5281%2027.9997%2021.4863C28.0073%2025.4444%2024.8787%2028.6587%2021.0126%2028.6664C17.1478%2028.6741%2014.007%2025.4719%2013.9999%2021.5138%27%20fill%3D%27white%27%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}

footer .fa-long-arrow-right {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 20px;
  height: 23px;
}

footer .fa-long-arrow-right::before {
  content: "";
  display: inline-block;
  flex-shrink: 0;
  width: 20px;
  height: 23px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='23' viewBox='0 0 20 23' fill='none'><path d='M18.8326 9.87201L7.76562 20.9141L8.93189 22.0777L19.9989 11.0357L18.8326 9.87201Z' fill='white'/><path d='M8.93189 0.000423778L7.76562 1.16406L18.8326 12.2061L19.9989 11.0425L8.93189 0.000423778Z' fill='white'/><path d='M18.7193 10.2188H0V11.8656H18.7193V10.2188Z' fill='white'/></svg>") center / contain no-repeat;
  transition: transform 0.25s ease;
}

/* =======================================================
   New Instagram Icon - Replace Broken DOM Structure
======================================================= */

footer .wb-foot-sns .wb-foot-insta-new {
  display: inline-block;
  list-style: none;
}

footer .wb-foot-sns .wb-foot-insta-new a {
  display: inline-block;
  width: 42px;
  height: 43px;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  text-decoration: none;
}

footer .wb-foot-sns .wb-foot-insta-new a:hover {
  background: transparent !important;
  border: none !important;
  opacity: 0.8;
}

footer .wb-foot-sns .wb-foot-insta-new a .fa-instagram {
  display: inline-block;
  width: 42px;
  height: 43px;
  background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2042%2043%27%20width%3D%2742%27%20height%3D%2743%27%20fill%3D%27white%27%3E%3Cpath%20d%3D%27M21%204.4c5.5%200%206.1%200%208.3.1%202%20.1%203.1.4%203.8.7.9.4%201.6.8%202.3%201.5s1.1%201.4%201.5%202.3c.3.7.6%201.8.7%203.8.1%202.2.1%202.8.1%208.3s0%206.1-.1%208.3c-.1%202-.4%203.1-.7%203.8-.4.9-.8%201.6-1.5%202.3s-1.4%201.1-2.3%201.5c-.7.3-1.8.6-3.8.7-2.2.1-2.8.1-8.3.1s-6.1%200-8.3-.1c-2-.1-3.1-.4-3.8-.7-.9-.4-1.6-.8-2.3-1.5s-1.1-1.4-1.5-2.3c-.3-.7-.6-1.8-.7-3.8-.1-2.2-.1-2.8-.1-8.3s0-6.1.1-8.3c.1-2%20.4-3.1.7-3.8.4-.9.8-1.6%201.5-2.3s1.4-1.1%202.3-1.5c.7-.3%201.8-.6%203.8-.7%202.2-.1%202.8-.1%208.3-.1zm0-3.7c-5.6%200-6.3%200-8.5.1s-3.7.5-5%201c-1.4.5-2.5%201.3-3.7%202.4S1.8%206.5%201.3%207.9c-.5%201.3-.9%202.8-1%205C.2%2015.1.2%2015.8.2%2021.4s0%206.3.1%208.5.5%203.7%201%205c.5%201.4%201.3%202.5%202.4%203.7s2.3%201.9%203.7%202.4c1.3.5%202.8.9%205%201%202.2.1%202.9.1%208.5.1s6.3%200%208.5-.1%203.7-.5%205-1c1.4-.5%202.5-1.3%203.7-2.4s1.9-2.3%202.4-3.7c.5-1.3.9-2.8%201-5%20.1-2.2.1-2.9.1-8.5s0-6.3-.1-8.5-.5-3.7-1-5c-.5-1.4-1.3-2.5-2.4-3.7s-2.3-1.9-3.7-2.4c-1.3-.5-2.8-.9-5-1C27.3.7%2026.6.7%2021%20.7z%27%2F%3E%3Cpath%20d%3D%27M21%2010.7c-5.9%200-10.7%204.8-10.7%2010.7S15.1%2032.1%2021%2032.1s10.7-4.8%2010.7-10.7S26.9%2010.7%2021%2010.7zm0%2017.6c-3.8%200-6.9-3.1-6.9-6.9s3.1-6.9%206.9-6.9%206.9%203.1%206.9%206.9-3.1%206.9-6.9%206.9z%27%2F%3E%3Ccircle%20cx%3D%2732.1%27%20cy%3D%2710.3%27%20r%3D%272.5%27%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

footer .wb-foot-sns .wb-foot-insta-new a .fa-instagram::before {
  content: "";
  display: none;
}

footer.wb-footer-new .wb-tel-number a {
  text-decoration: none !important;
}

/* =======================================================
   Scroll To Top Button
======================================================= */
.wb-scroll-top {
    position: fixed;
    right: 16px;
    bottom: 16px;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;

    padding: 0;
    border: 0;
    border-radius: 50%;

    cursor: pointer;

    background: var(--wb-color-title);

    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);

    transition:
        opacity .3s ease,
        visibility .3s ease,
        transform .3s ease;

    z-index: 999;
}

.wb-scroll-top::before {
    content: "";
    width: 18px;
    height: 18px;
    display: block;

    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M18 15L12 9L6 15' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.wb-scroll-top.is-show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

@media (hover:hover) {
    .wb-scroll-top:hover {
        transform: translateY(-4px);
    }
}

@media (min-width: 768px) {
    .wb-scroll-top {
        right: 24px;
        bottom: 24px;
        width: 56px;
        height: 56px;
    }

    .wb-scroll-top::before {
        width: 24px;
        height: 24px;
    }
}