@charset "UTF-8";
/* =========================================================
   全ページ共通のヘッダー (トップ FV リニューアル版)
   - クラスはすべて khd- で始める (古いヘッダーの pc_header / sp_header とは別物)
   - トップページ: FV の上では透明、FV を過ぎたら白い帯 (.is-scrolled)
   - その他のページ: 最初から白い帯 (.khd--solid)。下に同じ高さの .khd-spacer を置いて本文が隠れないようにする
   元に戻すときは common/header.blade.php を ~/bak-header-* の内容に戻し、head.blade.php の読み込み行を消す
   ========================================================= */
:root {
  --kfv-orange: #ff8000;
  --kfv-orange-2: #ffa64d;
  --kfv-ink: #1f2328;
  --kfv-navy: 18, 26, 38;
  --kfv-radius: 8px;
  --kfv-ease: cubic-bezier(.2, .7, .2, 1);
  --khd-h: 88px;
}

.kfv-lock { overflow: hidden; }

/* ---------- ボタン (応募・登録はオレンジのグラデーション＋ピル型) ---------- */
.kfv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; border-radius: 999px; font-weight: 700; white-space: nowrap; text-decoration: none;
  transition: transform .3s ease, box-shadow .3s ease; }
.kfv-btn--cv, .kfv-btn--cv:visited { background: linear-gradient(90deg, var(--kfv-orange), var(--kfv-orange-2)); color: #fff; box-shadow: 0 10px 26px rgba(255, 128, 0, .32); }
.kfv-btn--cv:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(255, 128, 0, .42); color: #fff; opacity: 1; }
.kfv-btn--sm { padding: 9px 20px; font-size: 13px; }
.kfv-btn--lg { padding: 17px 34px; font-size: 15px; }
.kfv-btn svg { width: 18px; height: 18px; flex: none; transition: transform .3s ease; }
.kfv-btn:hover svg { transform: translateX(3px); }

/* ---------- ヘッダー ---------- */
/* 古い CSS の header { height: 150px } を打ち消す */
header.khd { position: fixed; top: 0; left: 0; right: 0; z-index: 60; width: auto; height: auto; display: flex; align-items: center; justify-content: space-between;
  padding: 22px 40px; color: #fff; background: transparent; font-family: "Noto Sans JP", sans-serif;
  transition: background-color .4s ease, color .4s ease, padding .4s ease, box-shadow .4s ease; }
.khd *, .khd *::before, .khd *::after { box-sizing: border-box; }
.khd :where(a) { color: inherit; text-decoration: none; }
.khd :where(button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.khd :where(img) { display: block; max-width: 100%; }
.khd :where(ul) { margin: 0; padding: 0; list-style: none; }
.khd :where(a, button):focus-visible { outline: 2px solid var(--kfv-orange-2); outline-offset: 3px; border-radius: 4px; }

.khd__logo { position: relative; display: block; }
.khd__logo small { display: block; margin-bottom: 6px; font-size: 11px; font-weight: 700; letter-spacing: .06em; white-space: nowrap; }
.khd__logo img { height: 42px; width: auto; transition: opacity .4s ease; }
.khd__logo .is-dark { position: absolute; left: 0; bottom: 0; opacity: 0; }
.khd__right { position: relative; display: flex; align-items: center; gap: 14px; }

/* PC のナビ: マウスを乗せた項目の後ろにオレンジの背景。項目を移ると背景が横にスライドする */
.khd__nav { position: relative; display: flex; align-items: center; gap: 0; height: 46px; padding: 0 6px; border-radius: var(--kfv-radius);
  background: rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transition: background-color .4s ease; }
.khd__track { position: absolute; z-index: 0; top: 6px; bottom: 6px; left: 0; width: 0; border-radius: 6px; background: var(--kfv-orange);
  opacity: 0; transform: translateX(var(--x, 0)); transition: transform .45s var(--kfv-ease), width .45s var(--kfv-ease), opacity .3s ease; pointer-events: none; }
.khd__nav.is-tracking .khd__track { opacity: 1; }
.khd__nav.is-entering .khd__track { transition: opacity .3s ease; }
.khd__link { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 6px;
  font-size: 14px; font-weight: 700; letter-spacing: .04em; white-space: nowrap; transition: color .3s ease; }
.khd__link:hover { color: inherit; opacity: 1; }
.khd__link.is-hover, .khd__link.is-hover:hover { color: #fff; }
.khd__link svg { width: 15px; height: 15px; color: var(--kfv-orange); transition: color .3s ease; }
.khd__link.is-hover svg { color: #fff; }

.khd__menu { position: relative; width: 46px; height: 46px; border-radius: var(--kfv-radius); background: var(--kfv-orange) !important; color: #fff !important; }
.khd__menu span { position: absolute; left: 13px; right: 13px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .3s, opacity .3s, top .3s; }
.khd__menu span:nth-child(1) { top: 16px; }
.khd__menu span:nth-child(2) { top: 22px; }
.khd__menu span:nth-child(3) { top: 28px; }
.khd.is-open .khd__menu span:nth-child(1) { top: 22px; transform: rotate(45deg); }
.khd.is-open .khd__menu span:nth-child(2) { opacity: 0; }
.khd.is-open .khd__menu span:nth-child(3) { top: 22px; transform: rotate(-45deg); }

/* 白い帯 (トップは FV を過ぎたら・その他のページは最初から) */
.khd.is-scrolled { padding-top: 12px; padding-bottom: 12px; background: rgba(255, 255, 255, .94); color: var(--kfv-ink); box-shadow: 0 6px 24px rgba(0, 0, 0, .06);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.khd.is-scrolled .khd__logo .is-light { opacity: 0; }
.khd.is-scrolled .khd__logo .is-dark { opacity: 1; }
.khd.is-scrolled .khd__nav { background: #f6f2ed; }
/* 白い帯から始まるページでは、読み込み時に色が切り替わる動きを出さない */
.khd--solid, .khd--solid * { transition-property: none; }
.khd--solid .khd__track, .khd--solid .khd__link, .khd--solid .khd__menu span, .khd--solid .khd__panel { transition-property: transform, width, opacity, color, top, visibility; }

/* 白い帯から始まるページで、ヘッダーの分だけ本文を下げる (高さは JS が実際の高さに合わせる) */
.khd-spacer { height: var(--khd-h); }

/* PC: メンバー紹介などをしまうパネル */
.khd__panel { position: absolute; top: calc(100% + 12px); right: 0; width: 290px; padding: 10px; border-radius: 18px; background: rgba(255, 255, 255, .88); color: var(--kfv-ink);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .16); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .3s, transform .3s, visibility .3s; }
.khd.is-open .khd__panel { opacity: 1; visibility: visible; transform: none; }
.khd__panel .item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 14px; border-radius: 10px; font-size: 14px; font-weight: 700; transition: background-color .2s; }
.khd__panel .item:hover { background: #fff4e6; color: var(--kfv-ink); opacity: 1; }
.khd__panel .item::after { content: ""; flex: none; width: 7px; height: 7px; border-top: 2px solid var(--kfv-orange); border-right: 2px solid var(--kfv-orange); transform: rotate(45deg); }
.khd__panel .item[target="_blank"]::after { width: 12px; height: 12px; border: 0; transform: none;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff8000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E"); }
.khd__panel-main, .khd__panel-register { display: none !important; }
.khd__overlay { display: none; }

@media (min-width: 901px) and (max-width: 1200px) {
  header.khd { padding: 18px 24px; }
  .khd__logo img { height: 36px; }
  .khd__nav { padding: 0 4px; }
  .khd__link { padding: 0 9px; font-size: 12.5px; letter-spacing: 0; }
  .khd__right { gap: 10px; }
}

@media (max-width: 900px) {
  :root { --khd-h: 64px; }
  header.khd { padding: 14px 16px; }
  .khd__logo small { font-size: 9px; margin-bottom: 4px; }
  .khd__logo img { height: 32px; }
  .khd__nav, .khd__register { display: none; }
  .khd__menu { width: 44px; height: 44px; z-index: 2; }
  .khd__menu span { left: 12px; right: 12px; }
  /* backdrop-filter があると、中の position: fixed (右から出るメニュー) がヘッダーの中に閉じ込められるので、スマホではぼかしを使わず白で塗る */
  .khd.is-scrolled { padding-top: 8px; padding-bottom: 8px; background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
  /* 右から出るメニュー (全メニューとかんたん登録) */
  .khd__panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(86vw, 360px); padding: 84px 22px 32px; border-radius: 0; overflow-y: auto;
    opacity: 1; transform: translateX(100%); transition: transform .4s var(--kfv-ease), visibility .4s; }
  .khd.is-open .khd__panel { transform: none; }
  .khd__overlay { display: block; position: fixed; inset: 0; background: rgba(var(--kfv-navy), .45); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
  .khd.is-open .khd__overlay { opacity: 1; visibility: visible; }
  .khd__panel-main { display: block !important; padding-bottom: 12px !important; margin-bottom: 12px !important; border-bottom: 1px solid #efe8df; }
  .khd__panel-main .item { padding: 14px 6px; font-size: 16px; }
  .khd__panel-sub .item { padding: 11px 6px; font-size: 13px; color: #4a4f55; }
  .khd__panel-register { display: flex !important; width: 100%; margin-top: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .khd__track { transition: opacity .2s ease; }
}