/* =========================================================================
   共通ヘッダー・フッター（assets/inc/header.html・footer.html。動きは assets/js/site.js）
   土台のスタイル（base.css）には頼らない。クラス名は grp- で始める
   - 1211px 以上：ヘッダーのメニュー（下にスクロールするとメニューだけ上に固定）
   - 1210px 以下：右上の MENU ボタンで開くメニュー
   ========================================================================= */

:root {
  --grp-color-primary: #c30d23;
  --grp-color-primary-vivid: #d70e27;
  --grp-color-text: #333;
  --grp-color-text-header: #444;
  --grp-color-line: #ccc;
  --grp-color-line-light: rgba(0, 0, 0, .06);
}

.grp-header, .grp-header *,
.grp-footer, .grp-footer *,
.grp-drawer, .grp-drawer *,
.grp-menu-btn, .grp-pagetop { box-sizing: border-box; }

.grp-header ul, .grp-footer ul, .grp-drawer ul { margin: 0; padding: 0; list-style: none; }
.grp-header li, .grp-footer li, .grp-drawer li { margin: 0; list-style: none; }
.grp-header a, .grp-footer a, .grp-drawer a { text-decoration: none; }

.grp-visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------- ヘッダー */
.grp-header {
  position: relative;
  z-index: 1000;
  width: 100%;
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
}
.grp-header__inner { margin: 0 auto; padding: 7px 15px 0; display: flow-root; }
@media (min-width: 576px) { .grp-header__inner { max-width: 540px; } }
@media (min-width: 768px) { .grp-header__inner { max-width: 720px; } }
@media (min-width: 992px) { .grp-header__inner { max-width: 1280px; padding-top: 8px; display: block; } }

.grp-header__logo { margin: 0 0 2.8px; padding-top: 7px; line-height: 1; }
@media (min-width: 992px) { .grp-header__logo { margin-bottom: 3.2px; padding-top: 17.6px; } }
.grp-header__logo a { display: block; width: 140px; height: 50px; }
.grp-header__logo img {
  display: block; width: 140px; max-width: none; height: 50px;
  object-fit: contain; object-position: left center;
}
.grp-header__logo a:hover img { transform: none; }
@media (max-width: 767px) {
  .grp-header__logo a { margin: 5px 0; }
}

/* ------------------------------------------------- ヘッダーのメニュー（PC） */
.grp-nav { display: none; }
@media (min-width: 1211px) { .grp-nav { display: block; } }

.grp-nav__list { display: flex; flex-wrap: wrap; justify-content: space-evenly; width: 100%; }
.grp-nav__item { position: relative; text-align: center; }
.grp-nav__link {
  display: flex; justify-content: center; align-items: center;
  padding: 6px 9px;
  color: var(--grp-color-text-header);
  font-size: 13px; font-weight: 700; line-height: 18.2px; letter-spacing: 1.2px;
  white-space: nowrap;
}
.grp-nav__link:hover, .grp-nav__link:focus { color: var(--grp-color-text-header); }

/* マウスを乗せたとき・今のページ：下の線 */
.grp-nav__item::before {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 0;
  border-bottom: 1px solid var(--grp-color-primary);
  transition: width .5s ease-out;
}
.grp-nav__item:hover::before, .grp-nav__item.is-current::before { width: 100%; }

/* サブメニューのある項目：マウスを乗せると三角とサブメニューが出る */
.grp-nav__item--parent::after {
  content: "";
  position: absolute; left: 50%; bottom: -10px; z-index: 1000;
  transform: translateX(-50%);
  border: 10px solid transparent;
  border-bottom-color: var(--grp-color-primary);
  opacity: 0;
  transition: all .2s ease-out;
}
.grp-nav__item--parent:hover::after, .grp-nav__item--parent:focus-within::after { opacity: 1; bottom: 1px; }

.grp-nav__sub {
  position: absolute; top: calc(100% - 1px); left: 0; z-index: 1500;
  width: 240px; max-height: 0;
  overflow: hidden;
  background-color: var(--grp-color-primary);
  box-shadow: 1px 1px 3px rgba(0, 0, 0, .2);
  text-align: left;
  opacity: 0;
  transition: all .5s;
}
.grp-nav__item--parent:hover > .grp-nav__sub,
.grp-nav__item--parent:focus-within > .grp-nav__sub { max-height: 80vh; overflow-y: auto; opacity: 1; }
.grp-nav__sub a {
  display: block;
  padding: 14px 14.4px;
  border-bottom: 1px solid rgba(255, 255, 255, .15);
  color: #fff;
  font-size: 12px; font-weight: 400; line-height: 16.8px; letter-spacing: 1.2px;
}
.grp-nav__sub a:hover, .grp-nav__sub a:focus { color: #fff; background-color: var(--grp-color-primary-vivid); }

/* 下にスクロールしたとき（1211px 以上）：ロゴを隠し、メニューだけ上に固定する */
@keyframes grp-header-drop { from { top: -63px; } to { top: 0; } }
@media (min-width: 1211px) {
  .grp-header-fixed .grp-header {
    position: fixed; top: 0; left: 0;
    max-width: 100vw;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
    animation: grp-header-drop .5s ease-out;
  }
  .grp-header-fixed .grp-header__logo { display: none; }
}

/* ---------------------------------------------------------------- フッター */
.grp-footer { border-top: 1px solid var(--grp-color-primary); font-size: 12px; }
.grp-footer__nav {
  margin: 10px 0 0; padding: 12px 0;
  border-bottom: 1px solid var(--grp-color-line-light);
  line-height: 1;
}
.grp-footer__inner { margin: 0 auto; padding: 0 15px; }
@media (min-width: 576px) { .grp-footer__inner { max-width: 540px; } }
@media (min-width: 768px) { .grp-footer__inner { max-width: 720px; } }
@media (min-width: 992px) { .grp-footer__inner { max-width: 960px; } }
@media (min-width: 1200px) { .grp-footer__inner { max-width: 1140px; } }
.grp-footer__list li {
  display: inline-block;
  width: calc(100% / 3 - 36px);
  margin-bottom: 10px; padding: 0 18px;
  line-height: 12px; letter-spacing: 1.2px;
}
.grp-footer__list a { color: var(--grp-color-text); letter-spacing: 1.2px; }
.grp-footer__list a:hover { color: var(--grp-color-text); text-decoration: underline; }
@media (max-width: 767px) {
  .grp-footer__nav { margin: 0; padding: 10px 0; border-bottom: none; }
  .grp-footer__list li { display: block; width: 100%; margin: 0; padding: 0; border-bottom: 1px solid var(--grp-color-line-light); }
  .grp-footer__list a { display: block; padding: 12px 0; }
}

/* ------------------------------------------ MENU ボタンとメニュー（1210px 以下） */
.grp-menu-btn {
  display: none;
  position: fixed; top: 5px; right: 5px; z-index: 2100;
  width: 34px; height: 34px; padding: 0;
  border: 1px solid #333; border-radius: 2px;
  background: rgba(255, 255, 255, .8) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M9.8 13.2h28.5v2H9.8zm0 9.8h28.5v2H9.8zm0 9.8h28.5v2H9.8z'/%3E%3C/svg%3E") center / 24px 24px no-repeat;
  cursor: pointer;
}
.grp-menu-btn[aria-expanded="true"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M13.9 12.5 24 22.6l10.1-10.1 1.4 1.4L25.4 24l10.1 10.1-1.4 1.4L24 25.4 13.9 35.5l-1.4-1.4L22.6 24 12.5 13.9z'/%3E%3C/svg%3E");
}
@media (max-width: 1210px) { .grp-menu-btn { display: block; } }
@media (min-width: 992px) and (max-width: 1210px) { .grp-menu-btn { top: 15px; right: 15px; } }

.grp-drawer {
  position: fixed; top: -2000px; left: 0; z-index: 2000;
  width: 100%; height: 100%;
  padding: 45px 10px;
  overflow: auto;
  background-color: #fff;
  border-bottom: 1px solid #e5e5e5;
  visibility: hidden;
  transition: top .5s ease-out, visibility .5s;
}
.grp-drawer.is-open { top: 0; visibility: visible; }
@media (min-width: 1211px) { .grp-drawer { display: none; } }

.grp-drawer__nav { margin-bottom: 1.5em; }
.grp-drawer__list { border-top: 1px solid var(--grp-color-line); }
.grp-drawer__list li { position: relative; line-height: 1.65; }
.grp-drawer__list a {
  display: block;
  padding: .7em .5em;
  border-bottom: 1px solid var(--grp-color-line);
  color: var(--grp-color-text);
  letter-spacing: .1em;
}
.grp-drawer__list a:hover, .grp-drawer__list a:focus { color: var(--grp-color-text); }
.grp-drawer__list .grp-drawer__parent > a { padding-right: 3em; }
.grp-drawer__list .grp-drawer__sub a { padding-left: 1.5em; }

/* サブメニューを開け閉めするボタン */
.grp-drawer__toggle {
  position: absolute; top: 8px; right: 8px; z-index: 1;
  width: 28px; height: 28px; padding: 0;
  border: 1px solid #333; border-radius: 2px;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M24 32.1 9.8 18l1.5-1.4L24 29.3l12.7-12.7 1.5 1.4z'/%3E%3C/svg%3E") center / 28px 28px no-repeat;
  cursor: pointer;
}
.grp-drawer__toggle[aria-expanded="true"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M24 16.6 38.2 30.7l-1.5 1.4L24 19.4 11.3 32.1l-1.5-1.4z'/%3E%3C/svg%3E");
}
.grp-drawer__sub {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: all .5s ease-in;
}
.grp-drawer__sub.is-open { max-height: 80vh; overflow-y: auto; opacity: 1; visibility: visible; }

/* ---------------------------------------------------- ページの先頭へ戻るボタン */
.grp-pagetop {
  position: fixed; right: 2%; bottom: 3%; z-index: 99999;
  width: 40px; height: 38px;
  background: rgba(0, 0, 0, .8) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23fff' d='M38.2 30.7 36.7 32.1 24 19.4 11.3 32.1 9.8 30.7 24 16.6z'/%3E%3C/svg%3E") center / 50% no-repeat;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .8), 0 0 0 2px rgba(0, 0, 0, .8);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .3s, visibility .3s;
}
.grp-scrolled .grp-pagetop { opacity: 1; visibility: visible; pointer-events: auto; }
.grp-pagetop:focus-visible { outline: 2px solid #4f94d4; outline-offset: 2px; }

/* ---------------------------------------------------- 言語の切り替え（JA / EN / ID） */
/* 動きは assets/js/i18n.js。ヘッダーの中（header.html）：1211px 以上はロゴの行の右端、
   1210px 以下は MENU ボタンのすぐ左。メニューだけを固定したときは隠す */
.grp-lang {
  position: absolute; top: 13px; right: 59px; z-index: 2;
  display: flex; height: 38px; padding: 3px; gap: 2px;
  background: #fff; border: 1px solid var(--grp-color-line); border-radius: 999px;
}
@media (min-width: 1211px) {
  .grp-lang { top: 31px; right: calc((100% - min(100%, 1280px)) / 2 + 15px); }
  .grp-header-fixed .grp-lang { display: none; }
}
@media (max-width: 991px) { .grp-lang { top: 5px; right: 47px; height: 34px; } }
.grp-lang__btn {
  min-width: 40px; margin: 0; padding: 0 10px; border: 0; border-radius: 999px;
  background: transparent; color: #666; font: 700 12px/1 sans-serif; letter-spacing: .05em;
  cursor: pointer;
}
.grp-lang__btn:hover { color: var(--grp-color-primary); }
.grp-lang__btn[aria-pressed="true"] { background: var(--grp-color-primary); color: #fff; }
.grp-lang__btn:focus-visible { outline: 2px solid #4f94d4; outline-offset: 1px; }
@media (max-width: 767px) {
  .grp-lang__btn { min-width: 32px; padding: 0 7px; }
}

@media (prefers-reduced-motion: reduce) {
  .grp-nav__item::before, .grp-nav__item--parent::after, .grp-nav__sub,
  .grp-drawer, .grp-drawer__sub, .grp-pagetop { transition: none; }
  .grp-header-fixed .grp-header { animation: none; }
}
@media print {
  .grp-menu-btn, .grp-drawer, .grp-pagetop, .grp-lang { display: none !important; }
}