@charset "Shift_JIS";
  /* ********************************* */
  /* 上部固定追従メニュー ---- component */
  /* ********************************* */
  :root {
    /* カスタマイズ用変数 */
    --c-fixed-nav-height: 50px;
    --c-fixed-nav-bg: #000000; /* メニュー全体の背景色 */
    --c-fixed-nav-font: serif; /* メニュー全体のフォントタイプ */
    --c-fixed-nav-color: #ffffff; /* メニュー全体の文字色 */
    --c-fixed-nav-border: #ffffff; /* 境界線の色 */
    --c-fixed-nav-current-color: #cc0000; /* ボタン - 現在地表示の文字色 */
    --c-fixed-nav-current-bg: #f5f5f5; /* ボタン - 現在地表示の背景色 */
  }

  /* PCサイズ（769px以上）では非表示 */
  .c-fixed-nav, .c-go-top {
    display: none;
  }

  @media screen and (max-width: 768px) {
    html {
      scroll-behavior: smooth;
      scroll-padding-top: var(--c-fixed-nav-height); 
    }

    .c-fixed-nav {
      display: block;
      position: fixed;
      top: 0;
      z-index: 100;
      width: 100%;
      height: var(--c-fixed-nav-height);
      background-color: var(--c-fixed-nav-bg);
      box-shadow: 0 2px 6px 0px rgba(110, 83, 83, 0.67);
      transform: translateY(-100%);
      visibility: hidden;
      opacity: 0;
      font-family: var(--c-fixed-nav-font);

      /* 表示・非表示アニメーション */
      transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;

      will-change: transform, opacity;
    }

    /* JSアクション（元の位置（top: 0）に戻して表示する） */
    .c-fixed-nav.is-active {
      transform: translateY(0);
      visibility: visible;
      opacity: 1;
    }

    .c-fixed-nav__list {
      display: flex;
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .c-fixed-nav__item {
      flex: 1;
      border-right: 1px solid var(--c-fixed-nav-border);
    }
    
    .c-fixed-nav__item:last-child {
      border-right: none;
    }

    .c-fixed-nav__item a {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      text-decoration: none;
      color: var(--c-fixed-nav-color);
      font-size: 14px;
      font-weight: bold;
      transition: all 0.2s ease;
    }
    .c-fixed-nav__item a.is-current {
      background-color: var(--c-fixed-nav-current-bg);
      color: var(--c-fixed-nav-current-color);
      position: relative;
    }
    .c-fixed-nav__item a.is-current::after {
      content: "";
      position: absolute;
      bottom: 6px;
      left: 50%;
      transform: translateX(-50%);
      width: 10px;
      height: 6px;
      background-color: var(--c-fixed-nav-current-color);
      clip-path: polygon(0 0, 100% 0, 50% 100%);
    }
    /* TOPへ戻るボタンの修正用CSS */
    .goTopAnchor {
      display: none !important;
    }

    /* TOPへ戻るボタン ---- component */
    /* （従来のTOPへ戻るボタンは不具合が生じるため、こちらで上書き処理を行う） */
    .c-go-top {
      position: fixed;
      bottom: 100px; /* ここに集約 */
      right: 5px;
      z-index: 999;
      text-align: center;
      white-space: nowrap;
      line-height: 1;
      font-size: 14px;

      /* 初期状態は透明にしてクリック不可にする */
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity 0.3s ease, visibility 0.3s ease;

      will-change: opacity, visibility;
    }
    .c-go-top.is-visible {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }
    .c-go-top a {
      display: block;
      color: #555555;
      position: relative;
      border-radius: 5px;
      width: 50px;
      height: 50px;
      border: 1px solid #555555;
      background: #fff;
      line-height: 4.5;
      box-shadow: 2px 2px 2px rgba(153, 153, 153, 0.5);
      text-decoration: none;
    }
    .c-go-top a:after {
      position: absolute;
      top: 26%;
      right: 37%;
      display: block;
      content: '';
      width: 9px;
      height: 9px;
      border-top: 2px solid #555555;
      border-right: 2px solid #555555;
      transform: rotate(-45deg);
    }
  }