/* リアルガチリスニング 共通ヘッダー
   LP(page-home.php) と Cocoon の固定/投稿ページ(tmp/header-container.php)で共有する。
   Cocoonのテーマ側CSSに負けないよう、ヘッダー内で完結する指定にしている。 */
.hd,.hd *{box-sizing:border-box}
.hd{position:sticky;top:0;z-index:1000;height:60px;background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.06);
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN",system-ui,sans-serif;line-height:1.5}
.hdrow{max-width:1228px;height:60px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.hd .logo{display:flex;align-items:center;flex:0 0 auto;padding:0;border:0}
.hd .logo img{width:210px;height:20px;display:block;max-width:100%}
.hdrow nav{display:flex;align-items:center;gap:16px;margin:0;padding:0}
.hdrow nav a{color:#000;text-decoration:none;font-size:16px;font-weight:700;white-space:nowrap}
.hdrow nav a:hover{color:#0F8A3B}
.hd .menu-t{display:none}
.hd .hbg{display:none}
.hd .mnav{display:none}
.hd .hdact{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.hd .hlogin{display:flex;align-items:center;justify-content:center;height:43px;padding:0 18px;background:#fff;
  border:1px solid #FD5F01;border-radius:8px;color:#FD5F01;font-size:16px;font-weight:700;text-decoration:none;white-space:nowrap}
.hd .now{display:flex;align-items:center;justify-content:center;gap:5px;height:43px;padding:0 14px 0 18px;background:#FD5F01;
  color:#fff;border-radius:8px;font-weight:700;font-size:16px;text-decoration:none;white-space:nowrap}
.hd .chev{width:16px;height:16px;flex:0 0 auto;position:relative;top:0;margin-right:0}
.hd .now-sp{display:none}

/* 光アニメ(既存 style.css の .animate-fade-in と同じ見え方。周期のみ10.5s) */
.hd .now{position:relative;overflow:hidden}
.hd .now::before{content:"";position:absolute;top:-180px;left:0;width:30px;height:100%;pointer-events:none;
  background-color:#fff;animation:lphdshine 10.5s linear infinite}
@keyframes lphdshine{
  0%,93.33%{opacity:.55;transform:scale(0) rotate(45deg);animation-timing-function:linear}
  93.67%{opacity:1;transform:scale(4) rotate(45deg);animation-timing-function:ease-out}
  100%{opacity:0;transform:scale(50) rotate(45deg)}}

/* hover: テーマ側の a:hover{opacity:.7} / a:hover{color} を打ち消す
   （:hover は擬似クラス分だけ詳細度が高いので body を足して勝たせる） */
.hd a{transition:filter .2s ease,transform .2s ease,box-shadow .2s ease,background-color .2s ease,color .2s ease}
body .hd a:hover{opacity:1}
body .hd .now:hover{color:#fff;filter:brightness(1.07);transform:translateY(-2px);box-shadow:0 10px 24px rgba(201,79,10,.35)}
body .hd .hlogin:hover{color:#FD5F01;background:#FFF4EE}
body .hd .mnav a:hover{color:#222}
body .hd .logo:hover{color:inherit}

/* 901-1100px: ナビ+ボタンが1行に収まらないので詰める */
@media (max-width:1100px){
  .hdrow{gap:16px;padding:0 16px}
  .hdrow nav{gap:12px}
  .hdrow nav a{font-size:15px}
  .hd .hlogin{padding:0 12px;font-size:15px}
  .hd .now{padding:0 10px 0 14px;font-size:15px}
}
@media (max-width:1000px){
  .hd .hlogin{display:none}
}
@media (max-width:900px){
  .hd .now-pc{display:none}
  .hd .now-sp{display:inline}
  .hdrow nav{display:none}
  .hd .hbg{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:40px;height:40px;margin-left:-8px;cursor:pointer;flex:0 0 auto}
  .hd .hbg i{display:block;width:22px;height:2px;background:#222;border-radius:2px;transition:transform .2s ease,opacity .2s ease}
  .hd .menu-t:checked ~ .hdrow .hbg i:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .hd .menu-t:checked ~ .hdrow .hbg i:nth-child(2){opacity:0}
  .hd .menu-t:checked ~ .hdrow .hbg i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .hd .mnav{position:absolute;left:0;right:0;top:60px;background:#fff;box-shadow:0 14px 24px rgba(0,0,0,.1);padding:4px 0 8px;z-index:49;display:block;
    visibility:hidden;opacity:0;transform:translateY(-8px);transition:opacity .18s ease,transform .18s ease,visibility .18s}
  .hd .menu-t:checked ~ .mnav{visibility:visible;opacity:1;transform:none}
  .hd .mnav a{display:block;padding:14px 24px;font-size:15px;font-weight:700;color:#222;text-decoration:none;border-top:1px solid #F2F2F2}
  .hd .mnav a:first-child{border-top:0}
}
@media (max-width:560px){
  .hdrow{padding:0 16px;gap:10px}
  .hd .hlogin{display:none}
  .hd .now{height:29px;padding:0 9px 0 11px;font-size:12px;gap:2px}
  .hd .now .chev{width:13px;height:13px}
  .hd .logo img{width:196px;height:19px}
}
@media (max-width:400px){
  .hd .logo img{width:146px;height:14px}
  .hdrow{padding:0 12px;gap:8px}
}
@media (max-width:340px){
  .hd .logo img{width:126px;height:12px}
  .hdrow{padding:0 10px;gap:6px}
  .hd .now{padding:0 8px;font-size:11px}
  .hd .hbg{width:34px;margin-left:-4px}
}