@charset "UTF-8";
/* Scss Document */
/* $break-point以下の時に@contentを適用 */
/* $break-point以上の時に@contentを適用 */
/* $break-point-min以上、$break-point-max以下の時に@contentを適用 */
/*svgアイコン*/
.globalnav { display: flex; align-items: center; }
@media print, screen and (min-width: 1024px) { .globalnav { max-width: 1200px; margin-inline: auto; padding-top: 20px; border-top: solid 1px #353635; justify-content: center; } }
.globalnav li a { display: flex; align-items: center; padding: 0; font-size: 1.8rem; }
@media print, screen and (min-width: 1024px) { .globalnav li a { position: relative; font-weight: 600; color: #B4B6B8; padding: 0 3px; }
  .globalnav li a::after { position: absolute; left: 0; content: ''; width: 100%; height: 3px; bottom: -10px; opacity: 0; visibility: hidden; transition: 0.3s; border-radius: 1.5px; }
  .globalnav li a.or::after { background: #F8B31E; }
  .globalnav li a.pi::after { background: #F28082; }
  .globalnav li a.gr::after { background: #4BAD79; } }
@media print, screen and (min-width: 1024.2px) { .globalnav li a:hover { opacity: 1; color: #353635; }
  .globalnav li a:hover::after { visibility: visible; bottom: -3px; opacity: 1; } }
@media print, screen and (min-width: 1024px) { .globalnav li.member a { background-color: #B4B6B9; color: #fff; width: 150px; border-radius: 8px; padding: 2px 8px 4px; justify-content: center; } }
.globalnav li.member a:after { display: none; }
.globalnav li.member a:before { content: ""; width: 15px; height: 19px; background: url("../images/ico_member.svg") no-repeat; background-size: contain; margin-right: 8px; display: block; }
@media only screen and (max-width: 1023.8px) { .globalnav li.member a:before { background: url("../images/ico_member_bk.svg") no-repeat; margin-right: 10px; } }
@media print, screen and (min-width: 1024px) { .globalnav li.member a:hover { background-color: #353635; } }
@media print, screen and (min-width: 1200.2px) { .globalnav > li + li { margin-left: 60px; } }
@media screen and (min-width: 1024px) and (max-width: 1200px) { .globalnav > li + li { margin-left: 30px; } }
.globalnav .nav-button-wrap, .globalnav .open { display: block; animation-name: MenuFadeUpAnime; animation-duration: 0.5s; animation-fill-mode: forwards; opacity: 0; }
@keyframes MenuFadeUpAnime { from { opacity: 0; top: 65px; }
  to { opacity: 1; top: 54px; } }
.globalnav .close { display: block; }

#news .globalnav li a[data-content="news"] { opacity: 1; color: #353635; }
#news .globalnav li a[data-content="news"]::after { visibility: visible; bottom: -3px; opacity: 1; }

#record .globalnav li a[data-content="record"] { opacity: 1; color: #353635; }
#record .globalnav li a[data-content="record"]::after { visibility: visible; bottom: -3px; opacity: 1; }

#contact .globalnav li a[data-content="contact"] { opacity: 1; color: #353635; }
#contact .globalnav li a[data-content="contact"]::after { visibility: visible; bottom: -3px; opacity: 1; }

@media print, screen and (min-width: 1024px) { #member .globalnav li.member a { background-color: #353635; } }
@media print, screen and (min-width: 1024px) { .sub_page .globalnav { padding-bottom: 20px; border-bottom: solid 1px #353635; justify-content: center; } }
@media only screen and (max-width: 1023.8px) { body.login_form .nav-button-wrap { position: absolute !important; }
  .nav-button-wrap { position: fixed; display: flex; justify-content: center; align-items: center; right: 0px; top: 0px; z-index: 1000; cursor: pointer; padding: 0; height: 60px; width: 60px; }
  .nav-button-wrap.active { background: transparent; }
  .globalnav { display: none; }
  .globalnav .close { display: none; }
  .globalnav-wrap.open .globalnav { display: flex; align-content: center; flex-wrap: wrap; padding: 0; position: fixed; left: 0; top: 0; background-color: rgba(255, 255, 255, 0.93); width: 100%; height: 100vh; overflow: hidden; z-index: 999; }
  .globalnav-wrap.open .globalnav li { display: block; text-align: center; width: 100%; }
  .globalnav-wrap.open .globalnav li + li { margin-top: 50px; }
  .globalnav-wrap.open .globalnav li a { color: #4E545A; font-weight: 500; justify-content: center; }
  .nav-button, .nav-button span { display: inline-block; transition: all 0.3s; }
  .nav-button { z-index: 20; width: 34px; height: 23px; position: relative; }
  .nav-button span { position: absolute; left: 0; width: 100%; height: 2px; background-color: #B4B6B9; }
  .nav-button span:nth-of-type(1) { top: 0; }
  .nav-button span:nth-of-type(2) { top: 10px; }
  .nav-button span:nth-of-type(3) { bottom: 0; }
  .active .nav-button span:nth-of-type(1) { transform: translateY(10px) rotate(-45deg); }
  .active .nav-button span:nth-of-type(2) { opacity: 0; }
  .active .nav-button span:nth-of-type(3) { transform: translateY(-10px) rotate(45deg); } }