/*
Theme Name: GP Child
Template: generatepress
Version: 1.0
*/


body {
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-weight: 300;
}

.container.grid-container {
  max-width: 100% !important;
}

.site-content{
  display: block;
}


/* =========================
   Custom Footer
========================= */

.site-footer {
  background-color: #8f373a; /* 紅 */
}

.k0299-footer {
  text-align: center;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.8);
  padding: 16px 0;
  letter-spacing: 0.05em;
}

.site-footer .site-info {
  display: none;
}



/* =========================
   Header NEW (0299 hover drop)
========================= */

:root{
  --k0299-green: #2f493f; 
  --k0299-drop:  #2b2b2b;
}

.k0299-header{
  position: sticky;
  top: 0;
  z-index: 9999;
}

.k0299-header__bar{
  background: var(--k0299-green);
  width: 100%;
  padding: 0 24px;
}

.k0299-brand{
  height: 98px;
  max-width: 1200px;
  margin: 0 auto;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

/* 左：白箱ロゴ */
.k0299-brand__logo{
  width: 38px;
  height: 38px;
  background: #fff;
  padding: 0px;
  margin-top: 0px;
  margin-right: 12px;
  display: flex;
  justify-content: center;
  align-items: flex-end;

  text-decoration: none;
}

.k0299-brand__logo img{
  width: 32px;
  height: 32px;
  margin-bottom: 2px;
  object-fit: contain;
  display: block;
}

/* 中央：0299 */
.k0299-brand__trigger{
  position: relative;
  outline: none;
}

.k0299-mark{
  position: relative;
  display: inline-flex;
  align-items: baseline;
  line-height: 1;
  color: #fff;
  cursor: default;
}

.k0299-mark__zero{
  font-size: 72px;
  font-weight: 300;
  letter-spacing: 0.02em;
}


.k0299-mark__299 {
    position: absolute;
    right: -46px;
    bottom: 8px;
    font-size: 24px;
    font-weight: 300;
    opacity: 0.95;
}


/* 右：鹿 / deer（非リンク） */
.k0299-brand__kanji{
  color: #fff;
  line-height: 1;
  user-select: none;
  margin-left: 48px;
  margin-top: 10px;
}

.k0299-brand__shika{
  font-size: 34px;
  font-weight: 300;
  text-align: left;
}
.k0299-brand__deer{
  margin-top: 0px;
  font-size: 15px;
  letter-spacing: 0.12em;
  opacity: 0.9;
}

/* =========================
   Drop menu (hover expand)
========================= */

.k0299-drop{
  position: fixed;
  left: 0;
  right: 0;
  top: 98px;
  width: 100%;
  background: var(--k0299-drop);

  max-height: 0;
  opacity: 0;
  overflow: hidden;

  transition: max-height 260ms ease, opacity 180ms ease;
  pointer-events: none;
}
.k0299-drop__inner{
  max-width: 1200px;
  margin: 0 auto;

  height: 60px;
  padding: 0 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 26px;
}

.k0299-brand__trigger:hover .k0299-drop,
.k0299-brand__trigger:focus-within .k0299-drop,
.k0299-brand__trigger.is-open .k0299-drop{
  max-height: 180px;
  opacity: 1;
  pointer-events: auto;
}


.k0299-drop a{
  position: relative;
  display: inline-block;
  color: #fff;
  text-decoration: none;

  font-size: 15px;
  letter-spacing: 0.12em;
  opacity: 0.92;
  padding: 10px 0;
}

.k0299-drop a:hover{
  opacity: 1;
}


/* 赤い下線：中央から左右へ伸びる */
.k0299-drop a::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4px;                /* 下線の位置 */
  height: 1px;
  width: 0;                   /* 初期は0 */
  background: #a02222;         /* 赤 */
  transform: translateX(-50%);
  transition: width 220ms ease;
  border-radius: 2px;
}

/* hover / キーボードフォーカスでも発火 */
.k0299-drop a:hover::after,
.k0299-drop a:focus-visible::after{
  width: 100%;                /* ★ 文字数の長さ（=aの幅） */
}


/* =========================
   GeneratePress Default Header Kill
========================= */

.site-header{
  display: none;
  height: 0;
  padding: 0;
  margin: 0;
}



@media (max-width: 768px){
  .k0299-header__bar{ padding: 0 14px; }

  .k0299-brand{
    height: 68px;
    gap: 14px;
  }

  .k0299-brand__logo{
    width: 24px;
    height: 24px;
    margin-top: 2px;
  }
  .k0299-brand__logo img{
    width: 20px;
    height: 20px;
    margin-bottom: 0px;
  }

  .k0299-mark__zero{ font-size: 48px; }
  .k0299-mark__299{
    right: -28px;
    bottom: 5px;
    font-size: 14px;
  }

  .k0299-brand__shika{ font-size: 22px; }
  .k0299-brand__deer{ font-size: 8px; }

  .k0299-drop{
    top: 68px; /* SPのヘッダー高さ */
  }

  .k0299-brand__kanji{
    margin-left: 26px;
  }

  .k0299-brand__logo{
    margin-right: 4px;
  }

  .k0299-brand__logo-label{
    margin-bottom: 12px;
    font-size: 8px !important;
  }
  
}


.k0299-header__bar{
  background: var(--k0299-green);
  width: 100%;
  padding: 0 24px;

  /* 追加：下辺に影 */
  box-shadow: 0 6px 28px rgba(0,0,0,0.40);
}





/* ロゴを「画像＋文字」の縦並びに */
.k0299-brand__logo{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-decoration: none;
}

/* 下の「シカ」 */
.k0299-brand__logo-label{
  font-size: 10px;
  letter-spacing: .18em;
  margin-bottom: -18px;
  color: rgba(255,255,255,.85);
  line-height: 1;
}


/* =========================
   Header dropdown (SP)
========================= */
@media (max-width: 768px){

  /* SPは hover ではなく class で制御 */
  .k0299-brand__trigger .k0299-drop{
    display: none; /* 初期は閉じる */
  }

  .k0299-brand__trigger.is-open .k0299-drop{
    display: block;
  }

  /* メニューが “全部出ない” 問題対策 */
  .k0299-drop{
    max-height: calc(100vh - 84px); /* ヘッダー分引く */
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ついでに余白調整（好み） */
  .k0299-drop__inner a{
    padding: 14px 18px;
    display: block;
  }
}

/* =========================
   Header dropdown compact (SP)
========================= */
@media (max-width: 768px){

  /* ドロップダウン全体：高さ確保 */
  .k0299-drop{
    max-height: calc(100vh - 64px); /* ヘッダー高に合わせて調整OK */
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* 中身：2列で詰めて一覧表示 */
  .k0299-drop__inner{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    padding: 2px 14px;
  }

  /* リンク：小さく・縦幅を食わない */
  .k0299-drop__inner a{
    display: block;
    padding: 8px 6px;        /* ←高さ削減 */
    font-size: 12px;         /* ←小さく */
    letter-spacing: .08em;
    line-height: 1.1;
    text-align: center;
    white-space: nowrap;     /* 折り返し禁止 */
  }
}

@media (max-width: 768px){
  .k0299-drop__inner{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .k0299-drop__inner a{
    font-size: 11px;
    padding: 7px 4px;
  }

  .k0299-brand__trigger:hover .k0299-drop,
.k0299-brand__trigger:focus-within .k0299-drop,
.k0299-brand__trigger.is-open .k0299-drop{
  max-height: 180px;
  opacity: 1;
  pointer-events: auto;
}
}



/* =========================
   Header dropdown : 1-row horizontal scroll (SP)
========================= */
@media (max-width: 768px){

  /* ドロップ自体は “1段分の高さ” だけにする */
  .k0299-drop{
    top: 68px;                 /* ←あなたのSPヘッダー高と合わせる */
    max-height: 0;             /* 閉じてる時 */
    opacity: 0;
    overflow: hidden;          /* 縦は切る（横スクロールはinnerで） */
  }

  /* 開いた時：1段だけ表示 */
  .k0299-brand__trigger.is-open .k0299-drop{
    display: block;
    max-height: 56px;          /* ←1段の高さ（好みで調整） */
    opacity: 1;
    pointer-events: auto;
  }

  /* 中身：折り返さない横並び + 横スクロール */
  .k0299-drop__inner{
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start;
    align-items: center;

    height: 56px;              /* ←上の max-height と揃える */
    padding: 0 14px;
    gap: 18px;

    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }

  /* リンク：縮まない・折り返さない */
  .k0299-drop__inner a{
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 0;                /* 1段に収めるため縦paddingは消す */
    font-size: 12px;
    letter-spacing: .08em;
    line-height: 1;
    text-align: center;
  }

  /* スクロールバーを目立たせない（必要なら） */
  .k0299-drop__inner::-webkit-scrollbar{
    display: none;
  }
  .k0299-drop__inner{
    scrollbar-width: none; /* Firefox */
  }
}

/* =========================
   SP: hover underline OFF
========================= */
@media (max-width: 768px){
  .k0299-drop a::after{
    content: none !important;   /* 下線自体を消す */
  }
}