/* =========================================================
   B-ART SPACE CUSTOM NAVIGATION
   2026-10 RECRUIT MENU UPDATE
========================================================= */

#basNav202609 {
  --bn-text:#38322e;
  --bn-sub:#84766e;

  --bn-orange:#d17a4d;
  --bn-orange-dark:#bf673c;

  --bn-green:#718f68;

  --bn-cream:#fcf8f3;
  --bn-white:#ffffff;

  --bn-border:#eaded4;

  --bn-shadow:
    0 10px 32px
    rgba(74,53,42,.11);
}


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


/* =========================================================
   HEADER
========================================================= */

#basNav202609 .basNav-header {
  position:relative;

  z-index:9000;

  width:100%;

  background:
    rgba(255,253,249,.97);

  border-bottom:
    1px solid
    rgba(228,215,205,.7);
}


#basNav202609 .basNav-header-inner {
  display:flex;

  align-items:center;

  width:100%;
  max-width:1320px;

  min-height:74px;

  margin:0 auto;

  padding:
    0 28px;
}


/* =========================================================
   BRAND
========================================================= */

#basNav202609 .basNav-brand {
  display:flex;

  flex-direction:column;

  flex:0 0 auto;

  margin-right:auto;

  color:var(--bn-text);

  text-decoration:none !important;
}


#basNav202609 .basNav-brand-name {
  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:20px;

  line-height:1.15;

  letter-spacing:.09em;
}


#basNav202609 .basNav-brand-tagline {
  margin-top:4px;

  color:#736861;

  font-size:8px;

  line-height:1.3;

  letter-spacing:.08em;
}


/* =========================================================
   DESKTOP MENU
========================================================= */

#basNav202609 .basNav-desktop {
  display:flex;

  align-items:center;

  gap:2px;
}


#basNav202609 .basNav-desktop a {
  position:relative;

  display:flex;

  align-items:center;

  min-height:44px;

  padding:
    0 11px;

  color:var(--bn-text);

  font-size:12px;

  font-weight:500;

  line-height:1;

  letter-spacing:.035em;

  text-decoration:none !important;

  white-space:nowrap;
}


#basNav202609 .basNav-desktop a::after {
  content:"";

  position:absolute;

  left:50%;
  bottom:3px;

  width:0;
  height:1px;

  background:var(--bn-orange);

  transform:
    translateX(-50%);

  transition:
    width .2s ease;
}


#basNav202609 .basNav-desktop a:hover {
  color:var(--bn-orange-dark);
}


#basNav202609
.basNav-desktop a:hover::after {
  width:28px;
}


/* =========================================================
   HEADER ACTIONS
========================================================= */

#basNav202609 .basNav-actions {
  display:flex;

  align-items:center;

  gap:7px;

  margin-left:13px;
}


#basNav202609 .basNav-actions a {
  display:flex;

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

  min-height:40px;

  padding:
    0 16px;

  border-radius:999px;

  font-size:11px;

  font-weight:600;

  line-height:1;

  text-decoration:none !important;

  white-space:nowrap;

  transition:
    opacity .2s ease,
    transform .2s ease;
}


#basNav202609 .basNav-actions a:hover {
  transform:
    translateY(-1px);
}


/* LINE */

#basNav202609 .basNav-line {
  color:#587651;

  background:#fff;

  border:
    1px solid
    #8aa582;
}


/* RESERVE */

#basNav202609 .basNav-reserve {
  color:#fff;

  background:
    linear-gradient(
      135deg,
      var(--bn-orange),
      var(--bn-orange-dark)
    );

  box-shadow:
    0 5px 14px
    rgba(176,95,52,.15);
}


/* =========================================================
   MOBILE BUTTON
========================================================= */

#basNav202609 .basNav-mobile-button {
  display:none;

  position:relative;

  width:42px;
  height:42px;

  margin:0;

  padding:10px;

  border:0;

  background:transparent;

  cursor:pointer;
}


#basNav202609 .basNav-mobile-button span {
  display:block;

  width:22px;
  height:1px;

  margin:
    5px auto;

  background:var(--bn-text);
}


/* =========================================================
   OVERLAY
========================================================= */

#basNav202609 .basNav-overlay {
  position:fixed;

  z-index:9997;

  inset:0;

  background:
    rgba(34,29,26,.42);

  opacity:0;

  visibility:hidden;

  pointer-events:none;

  transition:
    opacity .28s ease,
    visibility .28s ease;
}


#basNav202609.basNav-open
.basNav-overlay {
  opacity:1;

  visibility:visible;

  pointer-events:auto;
}


/* =========================================================
   DRAWER
========================================================= */

#basNav202609 .basNav-drawer {
  position:fixed;

  z-index:9998;

  top:0;
  right:0;

  width:
    min(420px, 88vw);

  height:100dvh;

  overflow-y:auto;

  padding:
    28px 28px 30px;

  background:
    linear-gradient(
      155deg,
      #fffdf9 0%,
      #fbf5ee 100%
    );

  box-shadow:
    -12px 0 34px
    rgba(48,37,31,.13);

  transform:
    translateX(105%);

  visibility:hidden;

  transition:
    transform .32s ease,
    visibility .32s ease;
}


#basNav202609.basNav-open
.basNav-drawer {
  transform:
    translateX(0);

  visibility:visible;
}


/* =========================================================
   DRAWER TOP
========================================================= */

#basNav202609 .basNav-drawer-top {
  display:flex;

  align-items:flex-start;

  justify-content:space-between;

  gap:20px;

  margin-bottom:31px;
}


#basNav202609 .basNav-drawer-brand {
  display:flex;

  flex-direction:column;
}


#basNav202609 .basNav-drawer-name {
  color:var(--bn-text);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:23px;

  line-height:1.2;

  letter-spacing:.08em;
}


#basNav202609 .basNav-drawer-tagline {
  max-width:230px;

  margin-top:6px;

  color:#81736b;

  font-size:9px;

  line-height:1.6;

  letter-spacing:.05em;
}


/* CLOSE */

#basNav202609 .basNav-close {
  position:relative;

  flex:0 0 auto;

  width:38px;
  height:38px;

  padding:0;

  border:0;

  background:transparent;

  cursor:pointer;
}


#basNav202609 .basNav-close span {
  position:absolute;

  top:18px;
  left:7px;

  width:25px;
  height:1px;

  background:#443c37;
}


#basNav202609
.basNav-close span:first-child {
  transform:
    rotate(45deg);
}


#basNav202609
.basNav-close span:last-child {
  transform:
    rotate(-45deg);
}


/* =========================================================
   DRAWER MENU
========================================================= */

#basNav202609 .basNav-drawer-menu {
  display:flex;

  flex-direction:column;
}


#basNav202609 .basNav-drawer-menu a {
  position:relative;

  display:grid;

  grid-template-columns:
    38px 1fr 18px;

  align-items:center;

  min-height:61px;

  color:var(--bn-text);

  border-bottom:
    1px solid
    var(--bn-border);

  text-decoration:none !important;
}


#basNav202609 .basNav-number {
  color:var(--bn-orange);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:11px;

  letter-spacing:.07em;
}


#basNav202609
.basNav-drawer-menu a > span:nth-child(2) {
  font-size:15px;

  font-weight:600;

  line-height:1.4;
}


#basNav202609 .basNav-arrow {
  color:#756962;

  font-size:20px;

  font-weight:300;

  text-align:right;
}


/* =========================================================
   DRAWER INFO
========================================================= */

#basNav202609 .basNav-drawer-info {
  display:flex;

  flex-wrap:wrap;

  gap:6px 14px;

  margin-top:32px;

  padding-top:18px;

  border-top:
    1px solid
    var(--bn-border);
}


#basNav202609 .basNav-drawer-info span {
  color:#7d7068;

  font-size:9px;

  line-height:1.5;
}


/* =========================================================
   FLOATING MENU + TOP
========================================================= */

#basNav202609 .basNav-floating {
  position:fixed;

  z-index:9996;

  right:22px;

  bottom:
    105px;

  display:flex;

  flex-direction:column;

  align-items:center;

  gap:9px;

  opacity:0;

  visibility:hidden;

  transform:
    translateY(12px);

  pointer-events:none;

  transition:
    opacity .25s ease,
    transform .25s ease,
    visibility .25s ease;
}


#basNav202609
.basNav-floating.basNav-floating-visible {
  opacity:1;

  visibility:visible;

  transform:
    translateY(0);

  pointer-events:auto;
}


#basNav202609 .basNav-floating button {
  display:flex;

  flex-direction:column;

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

  width:58px;
  height:58px;

  padding:0;

  border-radius:50%;

  cursor:pointer;

  box-shadow:
    0 7px 20px
    rgba(65,47,38,.15);

  transition:
    transform .2s ease;
}


#basNav202609
.basNav-floating button:hover {
  transform:
    translateY(-2px);
}


/* MENU */

#basNav202609 .basNav-floating-menu {
  color:#fff;

  border:0;

  background:
    linear-gradient(
      145deg,
      var(--bn-orange),
      var(--bn-orange-dark)
    );
}


#basNav202609 .basNav-floating-icon {
  display:flex;

  flex-direction:column;

  gap:3px;
}


#basNav202609 .basNav-floating-icon i {
  display:block;

  width:16px;
  height:1px;

  background:#fff;
}


/* TOP */

#basNav202609 .basNav-floating-top {
  color:#a8613e;

  border:
    1px solid
    rgba(211,154,120,.35);

  background:
    rgba(255,253,249,.96);
}


#basNav202609 .basNav-top-arrow {
  display:block;

  margin-bottom:1px;

  font-size:19px;

  font-weight:300;

  line-height:1;
}


#basNav202609 .basNav-floating-label {
  margin-top:4px;

  font-size:6.5px;

  font-weight:600;

  line-height:1;
}


/* =========================================================
   TABLET
========================================================= */

@media screen and (max-width:1100px) {

  #basNav202609
  .basNav-desktop a {
    padding:
      0 7px;

    font-size:10.5px;
  }


  #basNav202609
  .basNav-actions a {
    padding:
      0 12px;

    font-size:10px;
  }

}


/* =========================================================
   MOBILE / TABLET NAVIGATION
   RECRUIT MENU UPDATE: 850px → 1100px
========================================================= */

@media screen and (max-width:1100px) {

  #basNav202609 .basNav-header-inner {
    min-height:64px;

    padding:
      0 18px;
  }


  #basNav202609 .basNav-desktop,
  #basNav202609 .basNav-actions {
    display:none;
  }


  #basNav202609 .basNav-mobile-button {
    display:block;
  }


  #basNav202609 .basNav-brand-name {
    font-size:17px;
  }


  #basNav202609 .basNav-brand-tagline {
    font-size:7px;
  }


  /* CTAと重ならないよう右下から上へ */

  #basNav202609 .basNav-floating {
    right:12px;

    bottom:
      calc(
        86px +
        env(safe-area-inset-bottom)
      );

    gap:7px;
  }


  #basNav202609
  .basNav-floating button {
    width:52px;
    height:52px;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media screen and (max-width:390px) {

  #basNav202609 .basNav-header-inner {
    padding:
      0 14px;
  }


  #basNav202609 .basNav-brand-name {
    font-size:16px;
  }


  #basNav202609 .basNav-drawer {
    width:91vw;

    padding:
      24px 22px 27px;
  }


  #basNav202609 .basNav-drawer-name {
    font-size:20px;
  }


  #basNav202609
  .basNav-drawer-menu a {
    min-height:57px;
  }


  #basNav202609
  .basNav-drawer-menu a >
  span:nth-child(2) {
    font-size:14px;
  }


  #basNav202609 .basNav-floating {
    right:9px;

    bottom:
      calc(
        82px +
        env(safe-area-inset-bottom)
      );
  }

  #basNav202609
  .basNav-floating button {
    width:48px;
    height:48px;
  }

}


/* =========================================================
   DRAWER OPEN
   BODY SCROLL LOCK
========================================================= */

body.basNav202609-lock {
  overflow:hidden;
}


/* =========================================================
   EMANON OLD HEADER / EMPTY SPACE HIDE
========================================================= */

#header,
.header,
.site-header,
.header-area,
.header-wrapper,
.header-inner,
.header-top,
.header-nav,
.global-nav,
.global-menu {
  display:none !important;
}


/* ヘッダー消去後に残る上部余白対策 */

body,
#page,
.site,
.site-content,
.content,
main {
  margin-top:0 !important;
  padding-top:0 !important;
}


/* =========================================================
   B-ART GUIDE
   FLOATING BUTTON POSITION
   LEFT / LOWER
   2026-09-14
========================================================= */


/* =========================================================
   PC / TABLET
========================================================= */

.bas-guide-left-fixed {

  /* 左側へ配置 */
  left: 20px !important;
  right: auto !important;

  inset-inline-start: 20px !important;
  inset-inline-end: auto !important;

  /* 上方向の指定を解除 */
  top: auto !important;

  /*
    画面下からの距離

    数字を小さくすると下へ
    数字を大きくすると上へ
  */
  bottom: 34px !important;

}


/* =========================================================
   SMARTPHONE
========================================================= */

@media screen and (max-width:700px) {

  .bas-guide-left-fixed {

    /* 左端 */
    left:
      max(
        12px,
        env(safe-area-inset-left)
      ) !important;

    right: auto !important;

    inset-inline-start:
      max(
        12px,
        env(safe-area-inset-left)
      ) !important;

    inset-inline-end:
      auto !important;

    /* 上方向の指定を解除 */
    top: auto !important;

    /*
      現在より下へ移動

      以前：
      112px

      今回：
      88px

      ↓ 数字を小さくするほど下へ移動します
    */
    bottom:
      calc(
        88px +
        env(safe-area-inset-bottom)
      ) !important;

  }

}