@charset "UTF-8";

/* ==================================
   下層ページ共通
   ================================== */
.sub .header{
  display: flex;
  position: fixed;
  align-items: center;
  left: 0;
  top: 0;
  width: 100%;
  padding: 0 1em;
  background-color: #fff;
  z-index: 1000;
  transition: transform 0.3s ease, opacity 0.3s ease;
  opacity: 1;
}

/* JSで隠す用 */
.sub .header.header-hidden{
  transform: translateY(-100%);
  opacity: 0;
}

/* 下層はヘッダー固定なので、本文を下げる（数値は必要なら微調整OK） */
.sub main{
  padding-top: 72px;
}

/* ==================================
   sub-nav（PC時：横並び）
   ※ここが超重要：sub-nav にだけ当てる
   ================================== */
.sub .sub-nav{
  margin-left: auto;
  margin-right: 2em;
}

.sub .sub-nav ul{
  display: flex;
  align-items: center;
  gap: 20px;
}

.sub .sub-nav li{
  font-size: clamp(1.2rem, 1.1vw, 1.45rem);
}

/* ==================================
   ハンバーガー（下層）
   - PCでは非表示、900px以下で表示
   - 右寄せのため margin-left:auto を hamburger-nav にだけ付ける
   ================================== */
.sub #hamburger-nav{
  margin-left: auto;
  display: none;
}

/* 900px以下：sub-navを消してハンバーガー表示 */
@media (max-width: 900px){
  .sub .sub-nav{ display: none; }
  .sub #hamburger-nav{ display: block; }

  /* スマホ：ヘッダー高さを統一（変数） */
  .sub .header{
    height: var(--mobile-bar-h);
  }

  /* スマホ：本文の押し下げも変数に合わせる */
  .sub main{
    padding-top: var(--mobile-bar-h);
  }
}

/* 900pxより上：sub-navが見えるのでハンバーガーは消す */
@media (min-width: 901px){
  .sub #hamburger-nav{ display: none; }

  /* 下層は基本：タイトルは横並びのまま */
  .sub .title-small,
  .sub .title-main{
    display: inline;
  }
}