@charset "UTF-8";
/* CSS Document */
/***ヘッダー兼ナビ***/
#header { position: sticky; top: 0; z-index: 9999; /*box-shadow: 1px 1px 1px #F2F2F2;*/ background-color: #000; color: #FEFEFE; }

.nav-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; height: 8rem; }
.nav-bar .logo { width: 60%; }
.nav-bar .logo img { width: auto; height: 100%; max-height: 5rem; }
.nav-bar .logo h1 { font-size: 0; }
.nav-bar p { font-size: 1.2rem; font-size: clamp(1.2rem, calc(1.2rem + ((1vw - 0.2rem) * 0.3636)), 1.4rem); font-family: 'Raleway', 'Robot', 'Noto Sans JP', 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'BIZ UDPGothic', Meiryo, sans-serif; font-weight: 700; color: #444; line-height: 1.2; }
.nav-bar p span { font-size: 0.8em; }
.nav-bar p > span:first-child { font-size: 1.2em; font-weight: 700; }

.gnav input { display: none; }

.menu-btn { display: flex; height: 60px; width: 60px; justify-content: center; align-items: center; }
.menu-btn span { content: ''; display: block; height: 3px; width: 25px; border-radius: 3px; background-color: #FEFEFE; position: absolute; transition: .4s; }
.menu-btn span:before, .menu-btn span:after { content: ''; display: block; height: 3px; width: 25px; border-radius: 3px; background-color: #FEFEFE; position: absolute; transition: .4s; }
.menu-btn span:before { bottom: 8px; }
.menu-btn span:after { top: 8px; }
.menu-btn:hover { cursor: pointer; }

#menu-btn-check:checked ~ .menu-btn span { background-color: rgba(0, 0, 0, 0); }
#menu-btn-check:checked ~ .menu-btn span::before { bottom: 0; transform: rotate(45deg); }
#menu-btn-check:checked ~ .menu-btn span::after { top: 0; transform: rotate(-45deg); }

.gnav-list { width: 100%; /*height: 100%;*/ position: fixed; top: -100%; left: 0; transition: .4s; z-index: -1; background-color: #000; opacity: 0; }
.gnav-list .close-area { width: 100%; height: 100%; position: fixed; top: -100%; left: 0; background-color: #000; transition: .4s; }
.gnav-list .pnav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-around; width: 100%; background-color: #000; }
.gnav-list .pnav li { width: 100%; font-size: initial; position: relative; border-top: dashed 1px #333; background-color: #000; font-weight: 500; color: #FEFEFE; }
.gnav-list .pnav li a, .gnav-list .pnav li .anchor-area { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; text-indent: -9999px; }

#menu-btn-check:checked ~ .gnav-list { top: 8rem; animation: fade-in 0.4s ease forwards; }
#menu-btn-check:checked ~ .gnav-list .close-area { top: 0; }

@keyframes fade-in { 0% { opacity: 0; }
  50% { opacity: 0; }
  100% { opacity: 1; } }
@media (min-width: 992px) { .nav-bar { /*
.logo { max-width: 200px; 
	img { max-height: 5rem;}
}
*/ }
  .nav-bar p { font-size: 1.4rem; font-size: clamp(1.4rem, calc(1.4rem + ((1vw - 0.2rem) * 0.3636)), 1.6rem); }
  .menu-btn { display: none; }
  .gnav-list { position: relative; z-index: 0; opacity: 1; }
  .gnav-list .pnav li { width: auto; text-align: center; border-top: none; }
  .gnav-list .pnav li::after { content: ""; display: block; position: absolute; bottom: -10px; width: 100%; height: 2px; border-radius: 1px; background-color: #666; transform-origin: center center; transform: scale(0, 1); transition: transform .3s; }
  .gnav-list .pnav li:hover::after { transform: scale(1, 1); }
  #menu-btn-check:checked ~ .gnav-list { top: auto; animation: none; }
  #menu-btn-check:checked ~ .gnav-list .close-area { display: none; } }