@charset "UTF-8";
#GlobalHeader {}
#GlobalHeader .container {position: fixed;top: 0;left: 0;z-index: 11;right: 0;max-width: 100%;width: 100%;display: flex;justify-content: space-between;}
#GlobalHeader .container .menu-btn {display: none;}
#GlobalHeader .container .menu-icon {display: block;position: relative;height: calc(100% - 2em);width: 2em;margin: 1em;}
#GlobalHeader .container .menu-icon span {display: block;position: absolute;height: 1px;width: 100%;background: #fff;left: 0;transition: all cubic-bezier(0.445, 0.05, 0.55, 0.95) 200ms;}
#GlobalHeader .container .menu-icon span:nth-child(1) {top: 0;}
#GlobalHeader .container .menu-icon span:nth-child(2) {top: 50%;transform: translateY(-50%);}
#GlobalHeader .container .menu-icon span:nth-child(3) {bottom: 0;}
#GlobalHeader .container .menu-btn:checked ~ .menu-icon span:nth-child(1) {top: 50%;left: 50%;transform-origin: 50% 50%;transform: translate(-50%, -50%) rotate(325deg);}
#GlobalHeader .container .menu-btn:checked ~ .menu-icon span:nth-child(2) {width: 0;left: 50%;}
#GlobalHeader .container .menu-btn:checked ~ .menu-icon span:nth-child(3) {bottom: 50%;left: 50%;transform-origin: 50% 50%;transform: translate(-50%, 50%) rotate(-325deg);}
#GlobalHeader .container::before {content: '';position: absolute;top: 0;left: 0;z-index: -1;width: 100%;height: 100%;background: rgba(0,0,0,.2);backdrop-filter: blur(0);opacity: 0;transition: opacity 0.4s ease, backdrop-filter 0.4s ease;}
#GlobalHeader.standby .container::before {opacity: 1;backdrop-filter: blur(2em);}
.globalNavigation ul li a {display: block;text-decoration: none;}
/* =====
* LAYOUT :: PC
=================================================================== */
@media only screen and (min-width: 769px) {
  #GlobalHeader .container {padding: 15px;}
  #GlobalHeader .container .logo {font-size: 100%;}
  #GlobalHeader .container .logo img {width: auto;height: 3.125em;}
  #GlobalHeader .container .menu-icon {display: none;}
  .globalNavigation {padding: 0.5em 0;position: fixed;top: 1.0625em;z-index: 11;right: 1.0625em;}
  .globalNavigation ul {display: flex}
  .globalNavigation ul li {margin-left: 1.5em;margin-bottom: 0;}
  .globalNavigation ul li a {font-family: 'Brandon', sans-serif;color: #fff;text-align: center;}
  .globalNavigation ul li a span {display: block;font-size: 87.5%;line-height: 2.5;letter-spacing: 0.1em;}
  .globalNavigation ul li.contact a {border: 1px solid #fff;border-radius: 3em;padding: 0 2em;}
  .globalNavigation ul li.current a {border-bottom: 2px solid #fff;}
}
@media only screen and (min-width: 769px) and (max-width: 1224px) {}
/* =====
* LAYOUT :: SP
=================================================================== */
@media only screen and (max-width: 768px) {
  #GlobalHeader .container .logo {padding: 0.5em 1em;font-size: 100%;}
  #GlobalHeader .container .logo img {width: auto;height: 3em;}
  .globalNavigation::after {content: "";position: fixed;top: 0;bottom: 0;right: 0;left: 0;z-index: -1;mix-blend-mode: multiply;background: var(--color-01);opacity: 0;transition: opacity ease 1000ms 0ms, z-index ease 0ms 1000ms;}
  .globalNavigation ul {position: fixed;top: 50%;left: 0;z-index: -1;padding: 2em;transform: translateY(-50%);display: flex;flex-wrap: wrap;transition: z-index ease 0ms 400ms;}
  .globalNavigation ul li {width: calc(50% - 1em);margin: 0.5em;overflow: hidden;}
  .globalNavigation ul li a {transform: translate3d(0, 300%, 0);transition: transform ease 500ms;font-family: 'Brandon', sans-serif;color: #fff;}
  .globalNavigation ul li a span {display: block;}
  .globalNavigation ul li a span {font-size: 125%;border-top: 1px solid transparent;padding: 1em 1em 0;}
  body.open .globalNavigation::after {opacity: 1;z-index: 10;transition: opacity ease 400ms 0ms, z-index ease 0ms 0ms;}
  body.open .globalNavigation ul {z-index: 11;transition: z-index ease 0ms 0ms;}
  body.open .globalNavigation ul li a {transform: translate3d(0, 0, 0);}
  body.open .globalNavigation ul li a span {border-color: #fff;}
}