@charset "UTF-8";
#GlobalHeader {}
#GlobalHeader .container {position: fixed;top: 0;left: 0;z-index: 12;width: 100%;display: flex;justify-content: space-between;background-color: #fff;}
#GlobalHeader .container .menu-btn {display: none;}
#GlobalHeader .container .menu-icon {display: block;position: relative;height: calc(100% - 2.5em);width: 2em;margin: 1em 1.25em;}
#GlobalHeader .container .menu-icon span {display: block;position: absolute;height: 1px;width: 100%;background: #2c366d;left: 0;transition: all var(--easing) 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-icon::after {content: "MENU";display: block;position: absolute;left: 50%;top: 100%;transform: scale(.5) translateX(-100%);transform-origin: 50% 50%;font-size: 14px;font-weight: 600;font-family: 'Jost', sans-serif;line-height: 1;color: #888;z-index: -1;}
#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 .menu-btn:checked ~ .menu-icon::after {content: "CLOSE";}

.globalNavigation ul {margin: 0 2em 0 0;}
.globalNavigation ul:nth-child(1) li:not(.pulldown) a {transform: scale(0.8);transform-origin: 100% 100%;color: #1e1516;}
.globalNavigation ul:nth-child(2) li a {margin-left: 2em;font-weight: bold;}

/* =====
* LAYOUT :: PC
=================================================================== */
@media only screen and (min-width: 769px) {
  #GlobalHeader .container .logo {background-color: #fff;position: absolute;top: 0;left: 0;padding: 2em 3em;font-size: 100%;transition: transform var(--easing) 200ms;overflow: hidden;}
  #GlobalHeader .container .logo a img {height: 10em;opacity: 1;transition: transform var(--easing) 600ms,  opacity var(--easing) 600ms;}
  #GlobalHeader .container .logo a::before {content: "";position: absolute;top: 98%;left: 2em;right: -2em;height: 5em;background: transparent url("../img/common/logo_yell_02.svg") no-repeat 0 50% / contain;opacity: 0;transition: all var(--easing) 100ms;}
  #GlobalHeader .container .menu-icon {display: none;}
  #GlobalHeader.standby .container .logo {transform: translateY(-14em);overflow: visible;}
  #GlobalHeader.standby .container .logo a img {transform: translateY(-5%);opacity: 0;}
  #GlobalHeader.standby .container .logo a::before {top: 100%;opacity: 1;transition: top var(--easing) 400ms 200ms, opacity var(--easing) 400ms 200ms;}

  .globalNavigation {position: fixed;top: 0;left: 0;right: 0;z-index: 11;background-color: #fff;}
  .globalNavigation ul {display: flex;justify-content: flex-end;}
  .globalNavigation ul li {margin-bottom: 0;margin-left: 1em;}
  .globalNavigation ul li > a {display: flex;align-items: center;height: 3em;text-align: center;letter-spacing: 0.1em;transition: all var(--easing) 200ms!important;}
  .globalNavigation ul li > a span {display: block;font-size: 87.5%;font-weight: 700;line-height: 1;letter-spacing: 0;white-space: nowrap;color: #333;}
  .globalNavigation ul li > a small {display: block;margin-top: 0.75em;font-size: 50%;font-weight: 400;line-height: 1;letter-spacing: 0.06em;white-space: nowrap;color: #888;}
  .globalNavigation ul li:hover > a span {color: #004277;}
  .globalNavigation ul li:hover > a small {color: #4997a9;}
  .globalNavigation ul li.pulldown {position: relative;padding-top: 0.6em;}
  .globalNavigation ul li.pulldown > div {position: absolute;top: calc(100% + 0.5em);right: 0;background-color: #f3f3f3;z-index: -1;opacity: 0;transition: opacity ease 200ms, z-index linear 1ms 200ms;}
  .globalNavigation ul li.pulldown > div p {position: relative;margin: 0 1em;padding: 0.5em 0;}
  .globalNavigation ul li.pulldown > div p + p {border-top: 1px solid #ddd;}
  .globalNavigation ul li.pulldown > div a {transform-origin: 50% 50%;pointer-events: none;}
  .globalNavigation ul li.pulldown > div::before {content: "";border-style: solid;border-width: 0 0.75em 0.75em;border-color: transparent transparent #f3f3f3;position: absolute;bottom: 100%;left: 2em;}
  .globalNavigation ul li.pulldown > a {position: relative;font-size: 80%;padding: 0.5em 3em 0.5em 2em;border: 1px solid #ddd;height: auto;color: #1e1516;}
  .globalNavigation ul li.pulldown > a::after {content: "▼";position: absolute;top: 50%;right: 0.5em;transform: translateY(-50%) scale(0.7);color: #aaa;}
  .globalNavigation ul li.pulldown > a.open::before {content: "";position: fixed;top: 0;right: 0;width: 100vw;height: 100vh;z-index: 1;}
  .globalNavigation ul li.pulldown > a.open + div {z-index: 2;opacity: 1;transition: opacity ease 200ms;}
  .globalNavigation ul li.pulldown > a.open + div a {pointer-events: auto;}

  #GlobalHeader.standby + .globalNavigation ul li > a {height: 2.5em;transition: height var(--easing) 400ms!important;}
}
@media only screen and (min-width: 769px) and (max-width: 1280px) {
  #GlobalHeader .container {width: calc(100% - 2em);}

}
@media only screen and (min-width: 769px) and (max-width: 1056px) {}

/* =====
* LAYOUT :: SP
=================================================================== */
@media only screen and (max-width: 768px) {
  #GlobalHeader {right: 0;}
  #GlobalHeader::before {content: '';position: absolute;top: 0;left: 0;z-index: -1;width: 100%;height: 100%;background: #fff;}
  #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(--grad-blue);opacity: 0;transition: opacity ease 1000ms 0ms, z-index ease 0ms 1000ms;}
  .globalNavigation {position: fixed;top: 4em;bottom: 0;left: 0;right: 0;z-index: -1;padding: 2em 3em;overflow: scroll;transition: z-index ease 0ms 400ms;}
  .globalNavigation ul {margin-right: 0;}
  .globalNavigation ul li {margin: 0;position: relative;}
  .globalNavigation ul li > a {position: relative;opacity: 0;padding: 0.5em;margin-left: 0!important;border-bottom: 1px solid #0097e1;transition: opacity var(--easing) 500ms 200ms;transform: scale(1)!important;color: #fff!important;}
  .globalNavigation ul li > a span {display: block;border-bottom: 1px solid transparent;padding: 1.5em 0;font-size: 125%;font-weight: 700;white-space: nowrap;}
  .globalNavigation ul li > a::before {content: "→";font-family: 'Jost', sans-serif;font-size: 125%;position: absolute;top: 50%;right: 0;transform: translateY(-50%);color: #fff;}
  .globalNavigation ul li > a::after {content: "";position: absolute;bottom: 0;left: 0;width: 1.5em;height: 1px;background-color: #fff;}
  .globalNavigation ul li > a small {display: none;}
  .globalNavigation ul li.pulldown > a {border-bottom: none;}
  .globalNavigation ul li.pulldown > a::before {display: none;}
  .globalNavigation ul li.pulldown > a::after {display: none;}
  .globalNavigation ul li.pulldown > div {padding: 0 0.25em 1.5em;border-bottom: 1px solid #0097e1;display: flex;flex-wrap: wrap;}
  .globalNavigation ul li.pulldown > div::after {content: "";position: absolute;bottom: 0;left: 0;width: 1.5em;height: 1px;background-color: #fff;}
  .globalNavigation ul li.pulldown > div p {margin: 0.2em;font-size: 75%;}
  .globalNavigation ul li.pulldown > div a {background-color: rgb(255 255 255 / 10%);padding: 0.5em 1em;color: #eee;}

  body.open {overflow-y: hidden;}
  body.open .globalNavigation::after {opacity: 0.98;z-index: 10;transition: opacity ease 400ms 0ms, z-index ease 0ms 0ms;}
  body.open .globalNavigation {z-index: 11;transition: z-index ease 0ms 0ms;}
  body.open .globalNavigation ul {position: relative;z-index: 11;}
  body.open .globalNavigation ul li a {opacity: 1;}
  body.open .globalNavigation ul li a span {border-bottom-color: rgb(255 255 255 / 20%);}

}