@charset "UTF-8";

/* 共通 */
:root {
  --nkn-navy: #0f3250;
  --nkn-accent: #b8795e;
  --nkn-text: #484848;
  --nkn-line: #e6ded3;
  --nkn-serif: "Noto Serif JP", serif;
  --nkn-sans: "Noto Sans JP", sans-serif;
  --nkn-en: "Adamina", serif;
  --nkn-num: "Roboto Condensed", sans-serif;
  --nkn-unit: 1px;
}

@media (max-width: 959px) {
  :root {
    --u: calc(min(100vw, 600px) / 390);
    --nkn-unit: var(--u);
  }
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* ヘッダー */
.l-header .l-header-row {
  position: relative;
  z-index: 10;
  box-shadow: 0 4px 4px rgb(0 0 0 / 0.02);
}

.l-header .hamburger-menu {
  transition: opacity 0.3s;
}

.l-header .hamburger-menu:hover {
  opacity: 0.6;
}

.l-header .hamburger-menu .hamburger-menu-trigger span,
.l-header .hamburger-menu:hover .hamburger-menu-trigger span,
.is-drawer-open .l-header .hamburger-menu-trigger span {
  background-color: var(--nkn-navy);
}

.l-header .hamburger-menu .hamburger-menu-label,
.l-header .hamburger-menu:hover .hamburger-menu-label,
.is-drawer-open .l-header .hamburger-menu-label {
  transform: none;
  color: var(--nkn-navy);
  font-family: var(--nkn-serif);
  font-size: calc(var(--nkn-unit) * 12);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.04em;
}

/* 電話番号（ヘッダー・ドロワー） */
.header-cta .wp-block-paragraph,
.drawer-menu .widget_block a[href^="tel:"] {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--nkn-unit) * 12);
  color: var(--nkn-navy);
  font-family: var(--nkn-num);
  font-size: calc(var(--nkn-unit) * 24);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-decoration: none;
}

.header-cta .wp-block-paragraph::before,
.drawer-menu .widget_block a[href^="tel:"]::before {
  flex: none;
  width: calc(var(--nkn-unit) * 20);
  height: calc(var(--nkn-unit) * 20);
  background-color: currentColor;
  -webkit-mask: url("../img/icon-tel.svg") no-repeat center / contain;
  mask: url("../img/icon-tel.svg") no-repeat center / contain;
  content: "";
}

/* 予約ボタン（ヘッダー・ドロワー） */
.header-cta .wp-block-button__link,
.drawer-menu .widget_block .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--nkn-unit) * 8);
  box-sizing: border-box;
  padding: calc(var(--nkn-unit) * 10) calc(var(--nkn-unit) * 32);
  border: calc(var(--nkn-unit) * 2) solid #333;
  border-radius: calc(var(--nkn-unit) * 80);
  background-color: var(--nkn-navy);
  color: #fff;
  font-family: var(--nkn-sans);
  font-size: calc(var(--nkn-unit) * 16);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
  transition: opacity 0.3s;
}

.header-cta .wp-block-button__link:hover,
.drawer-menu .widget_block .wp-block-button__link:hover {
  box-shadow: none;
  color: #fff;
  opacity: 0.6;
}

.header-cta .wp-block-button__link::before,
.drawer-menu .widget_block .wp-block-button__link::before {
  flex: none;
  width: calc(var(--nkn-unit) * 16);
  height: calc(var(--nkn-unit) * 16);
  background-color: currentColor;
  -webkit-mask: url("../img/icon-reserve.svg") no-repeat center / contain;
  mask: url("../img/icon-reserve.svg") no-repeat center / contain;
  content: "";
}

@media (min-width: 960px) {
  .l-header {
    --nkn-header-unit: 1px;
    --nkn-header-font: 1px;
  }

  .l-header .l-header-row .l-header__inner {
    height: auto;
    min-height: 88px;
    padding: 20px calc(var(--nkn-header-unit) * 40);
  }

  .l-header .hamburger-menu-content:not(.is-hamburger-menu-right) {
    padding-right: calc(var(--nkn-header-unit) * 24);
  }

  .l-header .header-site-branding {
    height: auto;
  }

  .l-header .header-menu-row .header-menu > .menu-item > a {
    height: auto;
    padding: 0 calc(var(--nkn-header-unit) * 14);
    color: var(--nkn-text);
    font-family: var(--nkn-sans);
    font-size: calc(var(--nkn-header-font) * 16);
    line-height: 1.5;
    transition: opacity 0.3s;
  }

  .l-header .header-menu-row .header-menu > .menu-item:first-child > a {
    padding-left: 0;
  }

  .l-header .header-menu-row .header-menu > .menu-item.current-menu-item > a,
  .l-header .header-menu-row .header-menu > .menu-item:hover > a {
    color: var(--nkn-text);
  }

  .l-header .header-menu-row .header-menu > .menu-item:hover > a {
    opacity: 0.6;
  }

  .l-header-row .l-header__inner .header-cta.has-header-row {
    height: auto;
    padding-left: calc(var(--nkn-header-unit) * 32);
  }

  .l-header .header-cta .wp-block-group {
    display: flex;
    align-items: center;
    gap: calc(var(--nkn-header-unit) * 32);
  }

  .l-header .header-cta .wp-block-group > .wp-block-buttons {
    margin: 0;
  }

  .l-header .header-cta .wp-block-paragraph {
    gap: calc(var(--nkn-header-font) * 12);
    margin: 0;
    font-size: calc(var(--nkn-header-font) * 24);
  }

  .l-header .header-cta .wp-block-paragraph::before {
    width: calc(var(--nkn-header-font) * 20);
    height: calc(var(--nkn-header-font) * 20);
  }

  .l-header .header-cta .wp-block-button__link {
    gap: calc(var(--nkn-header-font) * 8);
    font-size: calc(var(--nkn-header-font) * 16);
  }

  .l-header .header-cta .wp-block-button__link::before {
    width: calc(var(--nkn-header-font) * 16);
    height: calc(var(--nkn-header-font) * 16);
  }

  .l-header .site-logo .site-logo__img-common {
    max-width: none;
    height: calc(var(--nkn-header-unit) * 48);
  }
}

@media (min-width: 960px) and (max-width: 1199px) {
  .l-header {
    --nkn-header-unit: calc(0.7px + (100vw - 960px) * 0.3 / 240);
    --nkn-header-font: calc(0.875px + (100vw - 960px) * 0.125 / 240);
  }
}

@media (max-width: 959px) {
  .l-header .l-header-row {
    box-shadow: 0 calc(var(--u) * 2) calc(var(--u) * 2) rgb(0 0 0 / 0.02);
  }

  .l-header .l-header-row .l-header__inner {
    height: calc(var(--u) * 60);
    padding: 0 calc(var(--u) * 16);
  }

  .l-header .header-site-branding {
    height: 100%;
  }

  .l-header .site-logo .site-logo__img-common {
    height: calc(var(--u) * 32);
  }

  .l-header .hamburger-menu-content:not(.is-hamburger-menu-right) {
    padding-right: calc(var(--u) * 12);
  }

  .l-header .hamburger-menu-trigger {
    width: calc(var(--u) * 26);
    height: calc(var(--u) * 18);
  }

  .l-header .hamburger-menu-trigger span:nth-of-type(2) {
    top: calc(var(--u) * 8);
  }

  .l-header .hamburger-menu .hamburger-menu-label {
    margin-top: calc(var(--u) * 3);
  }
}

/* ドロワー */
.drawer-menu .hamburger-close-menu {
  width: calc(var(--nkn-unit) * 26);
  height: calc(var(--nkn-unit) * 26);
  margin-bottom: calc(var(--nkn-unit) * 40);
}

.drawer-menu .hamburger-close-menu .hamburger-close-line {
  width: 100%;
  height: 100%;
  padding: 0;
  background: url("../img/icon-close.svg") no-repeat center / calc(var(--nkn-unit) * 24);
}

.drawer-menu .hamburger-close-line span {
  display: none;
}

.drawer-menu .drawer-menu__inner .drawer-title,
.drawer-menu .drawer-menu__inner .widget_block > h3 {
  margin: 0 0 calc(var(--nkn-unit) * 16);
  padding: 0 0 calc(var(--nkn-unit) * 8);
  border-bottom: 1px solid var(--nkn-line);
  color: var(--nkn-accent);
  font-family: var(--nkn-en);
  font-size: calc(var(--nkn-unit) * 16);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-align: left;
}

.drawer-menu .drawer-menu__inner .widget_block > h3 {
  margin-bottom: calc(var(--nkn-unit) * 24);
}

.drawer-menu .drawer-menu__inner .drawer-menu__nav {
  margin-bottom: calc(var(--nkn-unit) * 40);
}

.drawer-menu .drawer-menu__inner .drawer-menu__nav .menu-item {
  padding-left: 0;
}

.drawer-menu .drawer-menu__inner .drawer-menu__nav .menu-item a {
  display: flex;
  align-items: center;
  gap: calc(var(--nkn-unit) * 12);
  height: calc(var(--nkn-unit) * 48);
  padding-left: calc(var(--nkn-unit) * 8);
  color: var(--nkn-text);
  font-family: var(--nkn-sans);
  font-size: calc(var(--nkn-unit) * 18);
  line-height: 1.5;
  letter-spacing: 0.04em;
}

.drawer-menu .drawer-menu__inner .drawer-menu__nav .menu-item a::before {
  position: static;
  flex: none;
  width: calc(var(--nkn-unit) * 6);
  height: calc(var(--nkn-unit) * 10);
  transform: none;
  border-radius: 0;
  background: url("../img/icon-chevron.svg") no-repeat center / contain;
}

.drawer-menu .drawer-menu__inner .widget_block .wp-block-paragraph {
  margin: 0;
  color: var(--nkn-text);
  font-family: var(--nkn-sans);
  font-size: calc(var(--nkn-unit) * 16);
  line-height: 1.5;
}

.drawer-menu .drawer-menu__inner .widget_block .wp-block-paragraph + .wp-block-paragraph {
  margin-top: calc(var(--nkn-unit) * 8);
  line-height: 1.8;
}

.drawer-menu .drawer-menu__inner .widget_block a[href^="tel:"] {
  margin-top: calc(var(--nkn-unit) * 8);
}

.drawer-menu .drawer-menu__inner .widget_block .wp-block-buttons {
  margin-top: calc(var(--nkn-unit) * 24);
}

.drawer-menu .drawer-menu__inner .widget_block .wp-block-button__link {
  width: calc(var(--nkn-unit) * 280);
}

/* フッター */
.l-contents {
  position: relative;
}

body:not(.home) .l-contents {
  padding-bottom: calc(var(--nkn-unit) * 48);
}

.l-contents::after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: calc(var(--nkn-unit) * 24);
  background-color: var(--nkn-navy);
  -webkit-mask: url("../img/divider-up.svg") no-repeat left bottom / 100% 100%;
  mask: url("../img/divider-up.svg") no-repeat left bottom / 100% 100%;
  content: "";
}

@media (max-width: 959px) {
  .l-contents::after {
    height: calc(var(--u) * 12);
  }

  body:not(.home) .l-contents {
    padding-bottom: calc(var(--u) * 24);
  }
}

@media (min-width: 960px) {
  .l-footer .l-footer__inner {
    padding: 64px 0 0;
  }

  .l-footer .footer-widget .l-content {
    width: min(1120px, calc(100% - 80px));
  }

  .l-footer .footer-widget .wrapper-column {
    align-items: center;
    gap: 48px;
    width: 100%;
  }

  .l-footer .footer-widget .column-6 {
    width: auto;
    margin-right: 0;
  }

  .l-footer .footer-widget .column-6:first-child {
    flex: 1;
  }

  .l-footer .footer-widget .widget_block .wp-block-paragraph {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: #d5dce4;
    font-family: var(--nkn-sans);
    font-size: 16px;
    line-height: 1.8;
    letter-spacing: 0.04em;
  }

  .l-footer .footer-widget .widget_block .wp-block-paragraph:first-child {
    display: block;
    margin-bottom: 16px;
    color: #fff;
    font-family: var(--nkn-serif);
    font-size: 32px;
    font-weight: 500;
    line-height: 1.5;
  }

  .l-footer .footer-widget .widget_block .wp-block-paragraph + .wp-block-paragraph + .wp-block-paragraph {
    margin-top: 8px;
  }

  .l-footer .footer-widget .widget_block .wp-block-paragraph:not(:first-child)::before {
    flex: none;
    width: 16px;
    height: 16px;
    background-color: currentColor;
    -webkit-mask: var(--nkn-footer-icon) no-repeat center / contain;
    mask: var(--nkn-footer-icon) no-repeat center / contain;
    content: "";
  }

  .l-footer .footer-widget .widget_block .wp-block-paragraph:nth-child(2) {
    --nkn-footer-icon: url("../img/icon-map.svg");
  }

  .l-footer .footer-widget .widget_block .wp-block-paragraph:nth-child(3) {
    --nkn-footer-icon: url("../img/icon-tel.svg");
  }

  .l-footer .footer-widget .widget_block br {
    display: none;
  }

  .l-footer .footer-widget .widget.widget_block .wp-block-group .wp-block-paragraph a[href^="tel:"] {
    color: inherit;
    pointer-events: none;
  }

  .l-footer .footer-widget .widget_nav_menu .menu {
    display: flex;
    gap: 32px;
  }

  .l-footer .footer-widget .widget_nav_menu .menu-item {
    padding-left: 0;
  }

  .l-footer .footer-widget .widget_nav_menu .menu-item a {
    padding: 0;
    color: #fff;
    font-family: var(--nkn-sans);
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: 0.04em;
    transition: opacity 0.3s;
  }

  .l-footer .footer-widget .widget_nav_menu .menu-item a:hover {
    transform: none;
    opacity: 0.6;
  }

  .l-footer .footer-widget .widget_nav_menu .menu > .menu-item a::before {
    content: none;
  }

  .l-footer .footer-menu__inner {
    display: none;
  }

  .l-footer .site-copyright {
    padding: 40px 0;
  }

  .l-footer .site-copyright small {
    font-family: var(--nkn-sans);
    font-size: 14px;
    line-height: 1.8;
    letter-spacing: 0.04em;
  }
}

/* SP追従バー */
@media (max-width: 959px) {
  #js-fixed-footer-menu {
    transform: none;
    box-shadow: 0 calc(var(--u) * -4) calc(var(--u) * 16) rgb(15 50 80 / 0.12);
  }

  #js-fixed-footer-menu .fixed-footer-menu__inner,
  #js-fixed-footer-menu .fixed-footer-nav {
    height: auto;
  }

  #js-fixed-footer-menu .fixed-footer-nav {
    flex-wrap: nowrap;
    gap: calc(var(--u) * 10);
    padding: calc(var(--u) * 8) calc(var(--u) * 12);
  }

  #js-fixed-footer-menu .fixed-footer-nav > .menu-item {
    flex: 1;
  }

  #js-fixed-footer-menu .fixed-footer-nav > .menu-item > a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--u) * 8);
    padding: calc(var(--u) * 12 - 1px) calc(var(--u) * 8);
    border: 1px solid var(--nkn-navy);
    border-radius: calc(var(--u) * 100);
    font-family: var(--nkn-sans);
    font-size: calc(var(--u) * 16);
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.04em;
  }

  #js-fixed-footer-menu .fixed-footer-nav > .menu-item > a > span {
    display: flex;
    align-items: center;
    gap: calc(var(--u) * 8);
  }

  #js-fixed-footer-menu .fixed-footer-nav > .menu-item > a i {
    display: block;
    margin: 0;
    padding: 0;
    font-size: calc(var(--u) * 16);
  }

  button.hamburger-menu-floating {
    right: calc(var(--u) * 16);
    bottom: calc(var(--u) * 90);
    width: calc(var(--u) * 60);
    height: calc(var(--u) * 60);
    border: 1px solid #fff;
    box-shadow: none;
  }

  button.hamburger-menu-floating:hover {
    border: 1px solid #fff;
  }

  button.hamburger-menu-floating .hamburger-menu-trigger {
    width: calc(var(--u) * 26);
    height: calc(var(--u) * 18);
  }

  button.hamburger-menu-floating .hamburger-menu-trigger span:nth-of-type(2) {
    top: calc(var(--u) * 8);
  }

  button.hamburger-menu-floating .hamburger-menu-label {
    bottom: calc(var(--u) * 9);
    transform: none;
    font-family: var(--nkn-serif);
    font-size: calc(var(--u) * 12);
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.04em;
  }
}

/* SPフッター */
@media (max-width: 959px) {
  .l-footer {
    padding-bottom: calc(var(--u) * 64);
  }

  .l-footer .l-footer__inner {
    padding: calc(var(--u) * 48) 0 0;
  }

  .l-footer .l-content {
    width: calc(100% - var(--u) * 40);
  }

  .l-footer .footer-widget .wrapper-column {
    display: block;
    width: 100%;
  }

  .l-footer .footer-widget .column-6 {
    width: 100%;
    margin-right: 0;
  }

  .l-footer .footer-widget .widget_block .wp-block-paragraph {
    display: flex;
    align-items: flex-start;
    gap: calc(var(--u) * 10);
    margin: 0;
    color: #d5dce4;
    font-family: var(--nkn-sans);
    font-size: calc(var(--u) * 16);
    line-height: 1.75;
    letter-spacing: 0.04em;
  }

  .l-footer .footer-widget .widget_block .wp-block-paragraph:first-child {
    display: block;
    margin-bottom: calc(var(--u) * 16);
    color: #fff;
    font-family: var(--nkn-serif);
    font-size: calc(var(--u) * 28);
    font-weight: 500;
    line-height: 1.5;
  }

  .l-footer .footer-widget .widget_block .wp-block-paragraph + .wp-block-paragraph + .wp-block-paragraph {
    margin-top: calc(var(--u) * 8);
  }

  .l-footer .footer-widget .widget_block .wp-block-paragraph:not(:first-child)::before {
    flex: none;
    width: calc(var(--u) * 16);
    height: calc(var(--u) * 28);
    background-color: currentColor;
    -webkit-mask: var(--nkn-footer-icon) no-repeat center / contain;
    mask: var(--nkn-footer-icon) no-repeat center / contain;
    content: "";
  }

  .l-footer .footer-widget .widget_block .wp-block-paragraph:nth-child(2) {
    --nkn-footer-icon: url("../img/icon-map.svg");
  }

  .l-footer .footer-widget .widget_block .wp-block-paragraph:nth-child(3) {
    --nkn-footer-icon: url("../img/icon-tel.svg");
  }

  .l-footer .footer-widget .widget.widget_block .wp-block-group .wp-block-paragraph a[href^="tel:"] {
    color: inherit;
  }

  .l-footer .footer-menu__inner {
    padding: 0;
    text-align: left;
  }

  .l-footer .footer-menu,
  .l-footer .footer-widget .widget_nav_menu .menu {
    display: block;
    margin-top: calc(var(--u) * 24);
  }

  .l-footer .footer-menu .menu-item,
  .l-footer .footer-widget .widget_nav_menu .menu-item {
    display: block;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid rgb(255 255 255 / 0.3);
  }

  .l-footer .footer-menu .menu-item a,
  .l-footer .footer-widget .widget_nav_menu .menu-item a {
    display: block;
    padding: calc(var(--u) * 16) calc(var(--u) * 4);
    color: #fff;
    font-family: var(--nkn-sans);
    font-size: calc(var(--u) * 16);
    line-height: 1.5;
    letter-spacing: 0.04em;
  }

  .l-footer .footer-widget .widget_nav_menu .menu > .menu-item a::before {
    content: none;
  }

  .l-footer .site-copyright {
    padding: calc(var(--u) * 40) 0 calc(var(--u) * 52);
  }

  .l-footer .site-copyright small {
    font-family: var(--nkn-sans);
    font-size: calc(var(--u) * 14);
    line-height: 1.75;
    letter-spacing: 0.04em;
  }
}

/* PCヘッダー固定 */
@media (min-width: 960px) {
  html {
    scroll-padding-top: 88px;
  }

  .l-container > .l-header {
    position: sticky;
    top: 0;
    z-index: 200;
  }

  .admin-bar .l-container > .l-header {
    top: 32px;
  }
}

@media (max-width: 959px) {
  html {
    scroll-padding-top: calc(var(--u) * 60);
  }
}