@charset "UTF-8";

/* =====================================================
  FULLSCREEN MENU（INSIDE MATCH / FULL）
===================================================== */

.fb-menu{
  position:fixed;
  inset:0;
  z-index:200;

  opacity:0;
  visibility:hidden;
  pointer-events:none;

  transition:
    opacity .75s cubic-bezier(.22,.61,.36,1) .04s,
    visibility 0s linear .79s;
}

.fb-menu.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;

  transition:
    opacity .55s cubic-bezier(.22,.61,.36,1),
    visibility 0s;
}

/* =========================
  BACKDROP
========================= */

.fb-menu__backdrop{
  position:absolute;
  inset:0;

  background:var(--fb-bg);
  opacity:0;

  transition:
    opacity .75s cubic-bezier(.22,.61,.36,1) .08s;
}

.fb-menu.is-open .fb-menu__backdrop{
  opacity:1;
}

/* =========================
  AIR
========================= */

.fb-menu::after{
  content:"";
  position:absolute;
  inset:-18%;
  z-index:1;
  pointer-events:none;

  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(43,42,40,.035) 0%,
      transparent 70%
    ),
    linear-gradient(
      180deg,
      rgba(43,42,40,.012),
      transparent
    );

  opacity:0;
  filter:blur(24px);

  transition:
    opacity 1.2s cubic-bezier(.22,.61,.36,1) .12s;
}

.fb-menu.is-open::after{
  opacity:1;
}

/* =========================
  PANEL
========================= */

.fb-menu__panel{
  position:relative;
  z-index:2;

  min-height:100%;

  width:100%;
  max-width:var(--bar-max);
  margin-inline:auto;
  box-sizing:border-box;

  padding:32px var(--bar-gutter);

  display:flex;
  flex-direction:column;

  opacity:0;

  transition:
    opacity .65s cubic-bezier(.22,.61,.36,1) .12s;
}

.fb-menu.is-open .fb-menu__panel{
  opacity:1;
}

/* =========================
  HEAD
========================= */

.fb-menu__head{
  display:flex;
  align-items:center;
  justify-content:space-between;

  margin-bottom:40px;
}

.fb-menu__brand{
  font-family:var(--fb-en);
  font-size:12px;
  line-height:1;
  letter-spacing:.22em;
  text-transform:uppercase;

  color:var(--fb-text);
  opacity:.78;
}

/* =========================
  CLOSE
========================= */

.fb-menu__close{
  width:auto;
  height:auto;

  border:0;
  background:transparent;

  padding:0;
  margin:0;

  font-family:var(--fb-en);
  font-size:10px;
  line-height:1;
  letter-spacing:.22em;
  text-transform:uppercase;

  color:var(--fb-text);

  opacity:.72;
  cursor:pointer;

  transition:opacity .4s ease;
}

.fb-menu__close:hover{
  opacity:.42;
}

/* Xマーク仕様を使用する場合 */

.fb-menu__close--icon{
  position:relative;
  width:40px;
  height:40px;
}

.fb-menu__close--icon span{
  position:absolute;
  left:50%;
  top:50%;

  width:20px;
  height:1px;

  background:var(--fb-text);
  opacity:.78;
}

.fb-menu__close--icon span:first-child{
  transform:translate(-50%,-50%) rotate(45deg);
}

.fb-menu__close--icon span:last-child{
  transform:translate(-50%,-50%) rotate(-45deg);
}

/* =========================
  NAV
========================= */

.fb-menu__nav{
  padding-bottom:160px;
}

.fb-menu__list{
  list-style:none;
  margin:0;
  padding:0;

  display:grid;
  gap:16px;
}

.fb-menu__list a{
  font-family:var(--fb-en);
  font-size:12px;
  line-height:1.4;
  letter-spacing:.22em;
  text-transform:uppercase;

  color:var(--fb-text);
  text-decoration:none;

  opacity:.68;

  transition:
    color .35s ease,
    opacity .35s ease;
}

.fb-menu__list a:hover{
  color:var(--fb-text);
  opacity:.92;
}

/* =========================
  SCROLL LOCK
========================= */

html.is-menu-open,
body.is-menu-open{
  overflow:hidden;
}

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

@media (max-width:960px){

  .fb-menu__panel{
    padding-left:var(--bar-gutter);
    padding-right:var(--bar-gutter);
  }

  .fb-menu__nav{
    padding-bottom:144px;
  }

  .fb-menu__footer-mark{
    bottom:40px;
    width:68px;
  }

}

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

@media (max-width:767px){

  .fb-menu__panel{
    padding:24px var(--bar-gutter);
  }

  .fb-menu__head{
    margin-bottom:32px;
  }

  .fb-menu__list{
    gap:14px;
  }

  .fb-menu__list a{
    font-size:12px;
    letter-spacing:.22em;
  }

  .fb-menu__nav{
    padding-bottom:120px;
  }

  .fb-menu__footer-mark{
    bottom:32px;
    width:60px;
  }

}