@charset "utf-8";
/* =========================================================
   lc-header-port.css
   ヘッダー「COMPASS PORT」ボタンのホバー挙動
   ＝ 3案「コンパス・スイープ」

   金の光が斜めに一度だけ走り、枠が締まって 3.5% 拡大する。

   ■ この1本で全ページを上書きする理由
     従来のホバー（金のハロー発光）は lc-home.css ほか
     restyle スキン20本に同じ内容が重複して書かれている。
     20ファイルを書き換える代わりに、スキン(lc_restyle_head / priority 5)
     より後に読み込む共通CSS(priority 6)でまとめて上書きする。
     → 今後の調整もこの1ファイルだけで済む。

   ■ 色の系統は2つ（本番実測）
     系統1 透明地＋金文字 …… 濃紺半透明ヘッダー（TOPほか大多数）、
                              透明ヘッダー×暗い写真（ReNOMA）
     系統2 白地＋濃い金文字 … 白ヘッダー（Q-AUTO / POTENTIAL）、
                              透明ヘッダー×明るい写真（SIMPLE NOTE）
   ========================================================= */

/* ---------------------------------------------------------
   系統1（既定）：透明地＋金文字
   --------------------------------------------------------- */
html .header-btn .btn-inner{
  position:relative;
  overflow:hidden;
  -webkit-transition:border-color .3s ease,box-shadow .3s ease,-webkit-transform .3s ease;
  transition:border-color .3s ease,box-shadow .3s ease,transform .3s ease;
}

/* 斜めに走る光の帯 */
html .header-btn .btn-inner::after{
  content:"";
  position:absolute;
  top:-60%;
  left:-140%;
  width:55%;
  height:220%;
  -webkit-transform:rotate(18deg);
  transform:rotate(18deg);
  pointer-events:none;
  background:-webkit-linear-gradient(left,transparent,rgba(255,248,228,.5),transparent);
  background:linear-gradient(90deg,transparent,rgba(255,248,228,.5),transparent);
}

html .header-btn .btn-inner span{
  -webkit-transition:color .3s ease,text-shadow .3s ease;
  transition:color .3s ease,text-shadow .3s ease;
}

/* 旧ホバー（暗ガラス＋ハロー発光）を解除して差し替える */
html .header-btn .btn-inner:hover,
html .header-btn .btn-inner:focus-visible{
  background:transparent !important;
  border-color:#e8d19a !important;
  box-shadow:0 0 14px rgba(216,184,119,.32) !important;
  -webkit-transform:scale(1.035);
  transform:scale(1.035);
}
html .header-btn .btn-inner:hover span,
html .header-btn .btn-inner:focus-visible span{
  color:#f3e3b3 !important;
  text-shadow:none !important;
}
html .header-btn .btn-inner:hover::after,
html .header-btn .btn-inner:focus-visible::after{
  -webkit-animation:lcPortSweep .78s ease-out;
  animation:lcPortSweep .78s ease-out;
}

@-webkit-keyframes lcPortSweep{ from{ left:-140%; } to{ left:165%; } }
@keyframes lcPortSweep{ from{ left:-140%; } to{ left:165%; } }

/* ---------------------------------------------------------
   系統2：白地＋濃い金文字
   （白ヘッダー Q-AUTO / POTENTIAL、明るい写真上の SIMPLE NOTE）
   白地では淡い光が見えないため、光の帯を濃い金にして
   不透明度も上げる（.3 → .5）。
   --------------------------------------------------------- */
html body.qauto.service .header-btn .btn-inner::after,
html body.potential.service .header-btn .btn-inner::after,
html body.simplenote.service .header-btn .btn-inner::after{
  background:-webkit-linear-gradient(left,transparent,rgba(184,148,90,.5),transparent);
  background:linear-gradient(90deg,transparent,rgba(184,148,90,.5),transparent);
}

html body.qauto.service .header-btn .btn-inner:hover,
html body.qauto.service .header-btn .btn-inner:focus-visible,
html body.potential.service .header-btn .btn-inner:hover,
html body.potential.service .header-btn .btn-inner:focus-visible,
html body.simplenote.service .header-btn .btn-inner:hover,
html body.simplenote.service .header-btn .btn-inner:focus-visible{
  background:#fff !important;
  border-color:#b8945a !important;
  box-shadow:0 0 14px rgba(184,148,90,.34) !important;
}
html body.qauto.service .header-btn .btn-inner:hover span,
html body.qauto.service .header-btn .btn-inner:focus-visible span,
html body.potential.service .header-btn .btn-inner:hover span,
html body.potential.service .header-btn .btn-inner:focus-visible span,
html body.simplenote.service .header-btn .btn-inner:hover span,
html body.simplenote.service .header-btn .btn-inner:focus-visible span{
  color:#7f5f2c !important;
  text-shadow:none !important;
}

/* ---------------------------------------------------------
   動きを減らす設定の端末では静止させる
   --------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html .header-btn .btn-inner:hover::after,
  html .header-btn .btn-inner:focus-visible::after{
    -webkit-animation:none;
    animation:none;
  }
  html .header-btn .btn-inner:hover,
  html .header-btn .btn-inner:focus-visible{
    -webkit-transform:none;
    transform:none;
  }
}