@charset "UTF-8";
/* CSS Document */
/***ヘッダー兼ナビ***/
#header { /*position: sticky; top: 0;*/ position: relative; z-index: 999; }

.nav-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; background-color: #355E76; height: 8.0rem; }
.nav-bar .logo { height: 100%; margin-left: calc(((60px - 25px) / 2) - 1rem ); }
.nav-bar .logo img { width: auto; height: 6rem; }

.gnav input { display: none; }

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

#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: absolute; top: calc(-1 * (100% + 1rem + 1px)); left: 0; transition: .4s; z-index: -1; }
.gnav-list .pnav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-around; width: 100%; background-color: #FEFEFE; }
.gnav-list .pnav li { width: 100%; font-size: 1.4rem; font-size: clamp(1.4rem, 1.6vw, 1.6rem); position: relative; border-top: dashed 1px #A9A9B1; background-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; }
.gnav-list .pnav li:hover { background-color: #F6F6F6; }
.gnav-list .pnav li .cnav-btn { position: relative; }
.gnav-list .pnav li .cnav-btn::before { position: absolute; top: 55%; transform: translateY(-50%); right: 0; display: block; width: 0; height: 0; border-style: solid; border-width: 0.4em 0.4em 0 0.4em; border-color: #333 transparent transparent transparent; content: ""; }
.gnav-list .pnav li .cnav-btn::after { position: absolute; top: calc(55% - 2px); transform: translateY(-50%); right: 0; display: block; width: 0; height: 0; border-style: solid; border-width: 0.4em 0.4em 0 0.4em; border-color: #FEFEFE transparent transparent transparent; content: ""; }
.gnav-list .pnav li .cnav { display: none; width: 100%; }
.gnav-list .pnav li .cnav li { width: 100%; background-color: #F6F6F6; border-top: dashed 1px #CCC; }
.gnav-list .pnav li .cnav li:hover { color: #BC955C; }

#menu-btn-check:checked ~ .gnav-list { top: 6.5rem; }
#menu-btn-check:checked ~ .gnav-list .close-area { top: 0; }

#cnav-btn-check:checked ~ div .cnav-btn::before { border-width: 0 0.4em 0.4em 0.4em; border-color: transparent transparent #333 transparent; }

#cnav-btn-check:checked ~ div .cnav-btn::after { border-width: 0 0.4em 0.4em 0.4em; border-color: transparent transparent #F6F6F6 transparent; top: calc(55% + 2px); }

#cnav-btn-check:checked ~ .cnav { display: block; }

@media (min-width: 768px) { .nav-bar { height: auto; }
  .nav-bar .logo { margin-left: 0; }
  .menu-btn { display: none; }
  .gnav-list { position: relative; z-index: 0; display: flex; align-items: center; }
  .gnav-list .pnav { background-color: transparent; height: 100%; }
  .gnav-list .pnav li { width: auto; text-align: center; border-top: none; background-color: transparent; color: #FDFDE7; }
  .gnav-list .pnav li::after { content: ""; display: block; position: absolute; bottom: -10px; width: 100%; height: 2px; border-radius: 1px; background-color: #FDFDE7; transform-origin: center center; transform: scale(0, 1); transition: transform .3s; }
  .gnav-list .pnav li:hover::after { transform: scale(1, 1); }
  .gnav-list .pnav li:hover { background-color: transparent; }
  .gnav-list .pnav li .cnav-btn { pointer-events: none; }
  .gnav-list .pnav li .cnav { position: absolute; bottom: 0; transform: translateY(100%); left: 0; display: none; }
  .gnav-list .pnav li .cnav li { width: 100%; }
  .gnav-list .pnav li:hover .cnav { display: block; }
  #menu-btn-check:checked ~ .gnav-list { top: auto; }
  #menu-btn-check:checked ~ .gnav-list .close-area { display: none; } }
.caution { background-color: #E60012; color: #FFF; text-align: center; }
.caution p { font-size: 0.75rem; line-height: 1.4rem; font-weight: 300; }