@charset "UTF-8";
/* ==========================================================================
   ヘッダー
   --------------------------------------------------------------------------
   Cocoon が生成するマークアップ（hlt-top-menu レイアウト）:

     #header-container            … 固定ヘッダー
       #header-container-in.hlt-top-menu.hlt-tm-right.wrap
         header#header > #header-in > h1.logo-header > a.site-name > img
         nav#navi > #navi-in > ul.menu-header.menu-pc > li > a > .caption-wrap > .item-label

   現行の問題
     ・メニュー5本がすべて外部リンクで、サイト内リンクが1本もない
     ・最後の「エルグラム公式サイトはこちら」は PC で display:none、SP のドロワーでだけ
       紫のボタンになっていた（＝PCに登録導線がない）

   デザイン案
     ロゴ ＋ カテゴリー6本（サイト内リンク）＋ CTA の1段構成、高さ64px。
     メニューの中身の入れ替えは 外観 → メニュー でおこなう。
     ここでは「最後の1項目を CTA ボタンとして扱う」形にしてある。
   ========================================================================== */

/* --------------------------------------------------------------------------
   ヘッダーの器
   -------------------------------------------------------------------------- */
#header-container.header-container{
  position:   fixed;
  left:       0;
  top:        0;
  right:      0;
  z-index:    10;
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-line);
}

#header-container-in.hlt-top-menu{
  display:     flex;
  align-items: center;
  gap:         24px;
  min-height:  var(--h-header);   /* 64px */
}

/* Cocoon は .header と .logo に height:100% を当てて、
   ヘッダーいっぱいに伸ばしたうえで中の要素を上寄せしている。
   こちらは器（#header-container-in）の align-items:center で縦中央に揃えるので、
   ロゴの箱は画像の高さまで縮ませる。height を auto に戻さないと
   箱が60pxのまま残り、その上端にロゴが貼りつく。 */
#header-container-in.hlt-top-menu #header,
#header-container-in.hlt-top-menu #header-in{
  flex:    none;
  height:  auto;
  padding: 0;
  margin:  0;
  min-height: 0;
}

/* --------------------------------------------------------------------------
   ロゴ
   -------------------------------------------------------------------------- */
#header-container-in.hlt-top-menu .logo-header{
  margin:     0;
  padding:    0;
  height:     auto;   /* Cocoon の .logo{height:100%} を解除（上のコメント参照） */
  max-height: none;
  line-height: 1;
}
#header-container-in.hlt-top-menu .logo-header img{
  display:    block;
  height:     30px;
  width:      auto;
  max-width:  none;
  max-height: none;
  margin:     0;
}
.site-name-text-link{ color: var(--c-ink); }

/* スクロールで縮むヘッダー（Cocoonの .header-small）でも高さを揃える */
.header-small #header-container-in.hlt-top-menu .logo-header img{
  height: 26px;
  margin: 0;
}
.header-small{ opacity: 1; }

/* --------------------------------------------------------------------------
   グローバルナビ
   -------------------------------------------------------------------------- */
#navi.navi{
  flex:      1 1 auto;
  min-width: 0;
  background: none;
}
#navi .navi-in{ padding: 0; }

#navi .navi-in > ul{
  display:   flex;
  align-items: center;
  flex-wrap: nowrap;
  gap:       2px;
  margin:    0;
  padding:   0;
}
/* Cocoon は li と a に height:60px を指定している。
   こちらは padding で高さを作るので、その 60px を解除しないと
   文字が 60px の箱の上端に貼りついたまま（＝ヘッダーの中で 11px 上にずれる）になる。
   height を auto に戻すと、上の ul の align-items:center が効いて縦中央に揃う。 */
#navi .navi-in > ul > li{
  width:       auto;
  height:      auto;
  line-height: 1;
}

#navi .navi-in a{
  display:     block;
  height:      auto;
  padding:     8px 14px;
  border-radius: 6px;
  font-size:   14px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .02em;
  color:       var(--c-ink-2);
  white-space: nowrap;
  text-decoration: none;
}
#navi .navi-in a:hover{
  background: var(--c-brand-pale);
  color:      var(--c-brand-deep);
}
/* 現在地（カテゴリーページを開いているとき） */
#navi .navi-in .current-menu-item > a,
#navi .navi-in .current-menu-parent > a{
  background: var(--c-brand-tint);
  color:      var(--c-brand-deep);
}

/* 下線がスライドしてくる旧演出は使わない（背景のハイライトに置き換え） */
#navi .navi-in a::before{ content: none; }

/* サブメニュー */
#navi .navi-in > ul .sub-menu{
  background:    var(--c-bg);
  border:        1px solid var(--c-line);
  border-radius: var(--radius);
  box-shadow:    0 8px 24px rgba(28, 27, 34, .08);
  overflow:      hidden;
}
#navi .navi-in > ul .sub-menu li{ height: auto; line-height: 1; }
#navi .navi-in > ul .sub-menu a{
  border-radius: 0;
  font-size:     13px;
  color:         var(--c-ink-2);
}

/* --------------------------------------------------------------------------
   ヘッダーのCTA
   メニューの「最後の1項目」をボタンとして扱う。
   外観 → メニュー で最後に置いた項目がそのままボタンになる。
   ブランドガイド 6.1 の Primary（黄 ＋ 黒文字）。
   ヘッダーは常設なので、本文側のCTA（44〜56px）より小さい38pxにして
   優先順位が逆転しないようにする。
   -------------------------------------------------------------------------- */
#navi .menu-header > li:last-child{
  margin-left: auto;   /* 常に右端へ */
}
#navi .menu-header > li:last-child > a,
#navi .menu-header > li:last-child > a:hover{
  display:     inline-flex;
  align-items: center;
  height:      38px;
  padding:     0 18px;
  border-radius: 999px;
  background:  var(--c-accent);
  color:       var(--c-on-accent);
  font-size:   13.5px;
  font-weight: 700;
}
#navi .menu-header > li:last-child > a:hover{ background: var(--c-accent-deep); }

/* --------------------------------------------------------------------------
   読了プログレスバー（記事ページのみ）
   progress.js がヘッダーの下端に差し込む。
   装飾なので支援技術からは外す（aria-hidden）。
   紫→黄のグラデーションはどちらも公式サイトの色で、CTAではないため
   優先順位を乱さない。
   -------------------------------------------------------------------------- */
.lg-progress{
  position: absolute;
  left:     0;
  right:    0;
  bottom:   -1px;      /* ヘッダーの下線に重ねる */
  height:   3px;
  background: transparent;
  pointer-events: none;
}
.lg-progress__bar{
  height:     100%;
  width:      0;
  background: linear-gradient(90deg, var(--c-brand), var(--c-marker));
  transform-origin: left center;
}

/* --------------------------------------------------------------------------
   本文の開始位置
   ヘッダーが position:fixed なので、その高さぶんを空ける
   -------------------------------------------------------------------------- */
@media screen and (min-width: 1024px){
  #container{ padding-top: var(--h-header); }
  #content{ margin-top: 12px; }
}

/* --------------------------------------------------------------------------
   1024〜1200px
   CTAを退避させ、カテゴリーナビが折り返さないようにする
   -------------------------------------------------------------------------- */
@media screen and (min-width: 1024px) and (max-width: 1200px){
  #navi .navi-in a{ padding: 8px 10px; font-size: 13px; }
  /* CTAはドロワー側に残るのでヘッダーからは隠す */
  #navi .menu-header > li:last-child{ display: none; }
}

/* --------------------------------------------------------------------------
   1023px以下（Cocoonがナビをハンバーガーへ格納する幅）
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1023px){
  #container{ padding-top: 0; }

  /* この幅の見出し行は Cocoon の別マークアップ
     （.mobile-header-menu-buttons ＝ メニュー／ロゴ／検索の固定バー・高さ50px）が担当する。
     PC用のロゴとナビは Cocoon 側で隠す設計だが、
       Cocoon : .navi-in .menu-pc { display:none }        (0,2,0)
       こちら : #navi .navi-in > ul { display:flex }       (1,1,1)
     とこちらのほうが強く、SPでもPCメニューが出たままになっていた。
     元の意図どおり隠し、空になったヘッダーの器も潰す。 */
  #navi .navi-in > ul.menu-pc{ display: none; }

  #header-container.header-container{ border-bottom: 0; }
  #header-container-in.hlt-top-menu{ min-height: 0; gap: 0; }

  /* ハンバーガーの中のメニュー */
  .menu-drawer li{ position: relative; }
  .menu-drawer li a{
    padding: 14px 10px;
    border-bottom: 1px solid var(--c-line);
    font-weight: 700;
    color: var(--c-ink-2);
  }
  .menu-drawer li::after{
    content: "";
    position: absolute;
    right:  24px;
    top:    0;
    bottom: 0;
    width:  9px;
    height: 9px;
    margin: auto;
    border-top:   2px solid var(--c-ink-4);
    border-right: 2px solid var(--c-ink-4);
    transform: rotate(45deg);
    transition: transform .15s;
  }
  .menu-drawer li:hover::after{ transform: rotate(45deg) translate(2px, -2px); }

  /* ドロワーの最後の項目はCTAボタン。現状は紫だったので黄へ */
  .menu-drawer li:nth-child(n+2){ margin-top: 10px; }
  .menu-drawer li:last-child{ margin-top: 20px; }
  .menu-drawer li:last-child a{
    display:       block;
    padding:       14px;
    border:        0;
    border-radius: 999px;
    background:    var(--c-accent);
    color:         var(--c-on-accent);
    font-weight:   700;
    text-align:    center;
  }
  .menu-drawer li:last-child::after{ content: none; }

  .menu-close-button{ font-size: 18px; line-height: 2.8; }
  /* 閉じるボタンは既定で中央。開くハンバーガーが右端にあるので、
     ×も右に置いたほうが指の移動が短い */
  .navi-menu-close-button.menu-close-button{
    text-align: right;
    padding-right: 10px;
  }

  /* SPヘッダーの検索欄 */
  #search-menu-content .search-edit{ font-size: 16px; }

  /* ------------------------------------------------------------------
     SPヘッダーのボタン（メニュー／ロゴ／検索）

     Cocoon 既定は「アイコンの下に9pxのラベル」を縦に積んだ70px幅のボタン。
     デザイン案は 38px の角丸アイコンボタン2つ。
     ラベルは display:none にせず読み上げ用に残す（ボタンの名前が
     「メニュー」「検索」以外に無いため、消すと音声だけの利用で何のボタンか
     分からなくなる）。
     ------------------------------------------------------------------ */
  .mobile-header-menu-buttons.mobile-menu-buttons{
    z-index:     100;
    display:     flex;
    align-items: center;
    gap:         8px;
    height:      56px;
    padding:     0 16px;
    background:  var(--c-bg);
    border-bottom: 1px solid var(--c-line);
  }
  /* ロゴは左、アイコンは右にまとめる */
  .mobile-header-menu-buttons.mobile-menu-buttons > .logo-menu-button{
    order: 1;
    flex:  1 1 auto;
    width: auto;
    min-width: 0;
  }
  .mobile-header-menu-buttons.mobile-menu-buttons > .search-menu-button{ order: 2; }
  .mobile-header-menu-buttons.mobile-menu-buttons > .navi-menu-button{   order: 3; }

  .mobile-header-menu-buttons.mobile-menu-buttons > .search-menu-button,
  .mobile-header-menu-buttons.mobile-menu-buttons > .navi-menu-button{
    flex:   none;
    width:  38px;
    height: 38px;
  }
  .mobile-header-menu-buttons.mobile-menu-buttons .menu-open{
    display:     grid;
    place-items: center;
    width:       38px;
    height:      38px;
    border:        1px solid var(--c-line);
    border-radius: 8px;
    background:  var(--c-bg);
    color:       var(--c-ink-2);
  }
  .mobile-header-menu-buttons.mobile-menu-buttons .menu-icon{
    height:    auto;
    font-size: 17px;
    line-height: 1;
  }
  /* 読み上げには残し、見た目からは外す */
  .mobile-header-menu-buttons.mobile-menu-buttons .menu-caption{
    position: absolute;
    width:    1px;
    height:   1px;
    margin:   -1px;
    padding:  0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  /* Cocoon はロゴの li 側を display:flex; justify-content:center にしている。
     中央寄せを解除するのは a ではなく li のほう。 */
  .mobile-header-menu-buttons.mobile-menu-buttons > .logo-menu-button{
    justify-content: flex-start;
    text-align:      left;
  }
  .mobile-header-menu-buttons.mobile-menu-buttons > .logo-menu-button > a{
    display:         flex;
    align-items:     center;
    justify-content: flex-start;
    padding:         0;
  }
  .mobile-header-menu-buttons.mobile-menu-buttons .site-logo-image{
    height:    26px;
    width:     auto;
    max-width: none;
  }

  /* トップページは帯の常設検索があるので、ヘッダーの虫めがねは出さない
     （同じ機能の入口が画面上部に2つ並ぶと、どちらを押すか迷う） */
  .home .mobile-header-menu-buttons.mobile-menu-buttons > .search-menu-button{ display: none; }

  /* ------------------------------------------------------------------
     SPの検索パネル
     Cocoon 既定は画面の中ほど（上から4割）にふわっと出る。
     押した虫めがねから離れた場所に出るので、どこが開いたのか分かりにくい。
     ヘッダーの真下に降ろす。
     ------------------------------------------------------------------ */
  #search-menu-content.search-menu-content{
    top:    56px;
    bottom: auto;
    left:   0;
    right:  0;
    width:  auto;
    padding: 16px;
    background: var(--c-bg);
    border-bottom: 1px solid var(--c-line);
    box-shadow: 0 8px 24px rgba(28, 27, 34, .10);
    z-index: 100;
  }
  /* Cocoon は検索パネルを開くと画面全体に黒い暗幕（#search-menu-close）を出す。
     これは .mobile-header-menu-buttons の「子」なので、親の z-index を上げても
     必ずヘッダーの上に重なり、押した虫めがねが見えなくなる。
     デザイン案に暗幕は無いので、透明にして見た目だけ消す。
     要素自体は残るので「パネルの外をタップして閉じる」は今までどおり効く。 */
  #search-menu-close{ background: transparent; }

  /* ------------------------------------------------------------------
     画面下の固定バー（.mobile-footer-menu-buttons）

     Cocoon 既定は「アイコンの上・9pxラベルの下」を等分に並べる帯。
     デザイン案は白の半透明＋ぼかしの上に
       ・pill型の「目次」（枠線・白地）
       ・黄色のCTA（残り幅いっぱいに伸びる）
     の2アクション。

     項目の入れ替えは 外観 → メニュー →「フッターモバイルボタン」。
     最後の1項目を CTA として扱うので、CTAは必ず最後に置くこと。
     ------------------------------------------------------------------ */
  .mobile-footer-menu-buttons.mobile-menu-buttons{
    display:     flex;
    align-items: center;
    gap:         10px;
    height:      auto;
    padding:     10px 16px calc(10px + env(safe-area-inset-bottom));
    background:  rgba(255, 255, 255, .94);
    border-top:  1px solid var(--c-line);
    backdrop-filter: blur(8px);
  }
  .mobile-footer-menu-buttons.mobile-menu-buttons > li{
    width:  auto;
    height: auto;
    flex:   none;
  }
  /* 最後の項目＝CTA。残り幅いっぱいに伸ばす */
  .mobile-footer-menu-buttons.mobile-menu-buttons > li:last-child{ flex: 1 1 auto; min-width: 0; }

  .mobile-footer-menu-buttons.mobile-menu-buttons .menu-button-in{
    display:     inline-flex;
    align-items: center;
    justify-content: center;
    gap:         6px;
    width:       100%;
    height:      44px;
    padding:     0 18px;
    border:        1px solid var(--c-line-strong);
    border-radius: 999px;
    background:  var(--c-bg);
    font-size:   13px;
    font-weight: 700;
    color:       var(--c-ink-2);
    text-decoration: none;
  }
  /* CTAは黄色。ブランドガイドの Primary（黄＋黒文字） */
  .mobile-footer-menu-buttons.mobile-menu-buttons > li:last-child .menu-button-in{
    border:     0;
    background: var(--c-accent);
    color:      var(--c-on-accent);
    font-size:  14px;
  }
  /* アイコンとラベルを横並びにする（既定は縦積み） */
  .mobile-footer-menu-buttons.mobile-menu-buttons .menu-icon{
    display:   inline-block;
    width:     auto;
    height:    auto;
    font-size: 14px;
    line-height: 1;
  }
  .mobile-footer-menu-buttons.mobile-menu-buttons .menu-caption{
    display:   inline-block;
    font-size: inherit;
    line-height: 1;
  }
  /* CTAはアイコンなしで文字だけにする（黄色の面にアイコンが乗ると読みにくい） */
  .mobile-footer-menu-buttons.mobile-menu-buttons > li:last-child .menu-icon{ display: none; }

  /* この幅では Cocoon が別の固定ヘッダー（.mobile-header-menu-buttons）を使い、
     下へスクロールすると style="top:-61px" を付けて隠す。
     プログレスバーを画面に固定したままにすると、ヘッダーが消えたあとも
     3pxの帯だけが宙に浮いて残ってしまう。
     progress.js が SP ではバーをヘッダーバーの中へ入れるので、
     ここでは親の下端に貼るだけでよい（ヘッダーと一緒に隠れる）。 */
  .lg-progress{
    position: absolute;
    left:     0;
    right:    0;
    top:      auto;
    bottom:   -1px;
  }
}