/* ==========================================================
   サイト共通のヘッダー（inc/site-header.php、js/site-header.js）。トップページと物件ページ v2
   参考: https://koyama-kyugu.co.jp/
   - 白い帯。100px スクロールすると低くなる（.is-scrolled。96px → 72px）
   - 帯のリンクは、マウスを重ねると下線が左から伸び、離すと右へ抜ける
   - メニューボタンは3本線。開くと × になり、白い全画面のメニューが出る（中身は少し遅れて）
   - 物件ページ（.site-header--hero）は、一番上では帯を上へ隠して写真に重ね、ロゴと文字を白にする
     スクロールすると白い帯が上から下りてきて（.is-solid）、ロゴはグレーに替わる
   テーマの style.css の a:link（0,1,1）より強くなるよう、リンクの色は2つのクラスで指定する
   ========================================================== */
.site-header,.site-menu{
  --sh-h:96px;--sh-h-min:72px;--sh-pad:40px;--sh-logo:24px;
  --sh-ink:#111211;--sh-muted:#686b67;--sh-line:#d8d8d2;--sh-accent:#7bd100;
  --sh-serif:'Shippori Mincho','Noto Serif JP','YuMincho','游明朝',serif;
  --sh-en:'Montserrat',sans-serif;
  --sh-ease:cubic-bezier(.23,1,.32,1);
  --sh-line-ease:cubic-bezier(.165,.84,.44,1);
}
.site-header{position:fixed;top:var(--sh-admin,0px);left:0;right:0;z-index:600;color:var(--sh-ink);transition:color .4s ease}
/* ログイン中は WordPress の管理バーの分だけ下げる */
.admin-bar{--sh-admin:32px}
@media (max-width:782px){.admin-bar{--sh-admin:46px}}

.site-header__bg{position:absolute;inset:0;background:rgba(255,255,255,.96);border-bottom:1px solid var(--sh-line);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:transform .7s var(--sh-ease)}
.site-header__bar{position:relative;display:flex;align-items:center;gap:28px;height:var(--sh-h);padding:0 var(--sh-pad);transition:height .4s var(--sh-ease)}
.site-header.is-scrolled .site-header__bar{height:var(--sh-h-min)}
.site-header a:focus-visible,.site-header__trigger:focus-visible,.site-menu a:focus-visible{outline:2px solid var(--sh-accent);outline-offset:3px}

/* ロゴと物件名 */
.site-header__id{display:flex;align-items:center;gap:20px;min-width:0;margin-right:auto}
.site-header__brand{position:relative;flex:none;display:block;line-height:0}
.site-header__logo{display:block;width:auto;height:var(--sh-logo);transition:opacity .4s ease}
.site-header__logo--light{position:absolute;left:0;top:0;opacity:0}
.site-header__name{position:relative;display:grid;gap:3px;min-width:0;margin:0;padding-left:20px;line-height:1.3}
.site-header__name::before{content:'';position:absolute;left:0;top:2px;bottom:2px;width:1px;background:currentColor;opacity:.3}
.site-header__name-label{font-family:var(--sh-en);font-size:.6rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;opacity:.72}
.site-header__name-text{font-family:var(--sh-serif);font-size:1.05rem;font-weight:500;letter-spacing:.08em}
.site-header__name-label,.site-header__name-text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.site-header__name-label{max-width:32em}
.site-header__name-text{max-width:18em}

/* 帯のリンク */
.site-header__nav{display:flex;align-items:center;gap:clamp(18px,2vw,30px)}
.site-header .site-header__nav a{position:relative;display:inline-block;padding:6px 0;color:inherit;font-family:var(--sh-serif);font-size:clamp(.8125rem,1.1vw,1rem);font-weight:500;line-height:1.6;letter-spacing:.1em;text-decoration:none;white-space:nowrap}
.site-header__nav a::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right top;transition:transform .3s var(--sh-line-ease)}
.site-header__nav a:hover::after,.site-header__nav a:focus-visible::after{transform:scaleX(1);transform-origin:left top}

/* 来場予約・お問い合わせ: 黒い四角。マウスを重ねると文字の下に #7bd100 の線が伸びる（背景の色は変えない） */
.site-header .site-header__contact{position:relative;flex:none;display:inline-flex;align-items:center;padding:12px 18px;background:var(--sh-ink);color:#fff;font-family:var(--sh-serif);font-size:clamp(.8125rem,1.1vw,1rem);font-weight:500;line-height:1.6;letter-spacing:.1em;text-decoration:none;white-space:nowrap}
.site-header__contact::after{content:'';position:absolute;left:18px;right:18px;bottom:7px;height:2px;background:var(--sh-accent);transform:scaleX(0);transition:transform .35s var(--sh-ease)}
.site-header__contact:hover::after,.site-header__contact:focus-visible::after{transform:scaleX(1)}

/* メニューボタン: 3本線。開くと × になる */
.site-header__trigger{display:none;position:relative;flex:none;width:44px;height:44px;margin-right:-7px;padding:0;border:0;border-radius:0;background:transparent;color:inherit;cursor:pointer;-webkit-appearance:none;appearance:none}
.site-header__trigger span{position:absolute;left:7px;width:30px;height:1px;background:currentColor;transition:top .6s cubic-bezier(.19,1,.22,1),transform .6s cubic-bezier(.19,1,.22,1)}
.site-header__trigger span:nth-child(1){top:13px}
.site-header__trigger span:nth-child(2){top:21px}
.site-header__trigger span:nth-child(3){top:29px}
.is-menu-open .site-header__trigger span:nth-child(1){top:21px;transform:rotate(-30deg)}
.is-menu-open .site-header__trigger span:nth-child(2),.is-menu-open .site-header__trigger span:nth-child(3){top:21px;transform:rotate(30deg)}
/* 物件ページはリンクが多いので、帯のリンクを少し小さく詰め、物件名の場所を広く取る
   メニューに他の住まいへのリンクもあるので、メニューボタンを常に出す */
.site-header--wide-nav .site-header__nav{gap:22px}
.site-header--wide-nav .site-header__nav a{font-size:.875rem}
.site-header--wide-nav .site-header__trigger{display:block}

/* 写真の上（物件ページの一番上）: 帯を上へ隠し、ロゴと文字を白にする */
.site-header--hero:not(.is-solid){color:#fff}
.site-header--hero:not(.is-solid) .site-header__bg{transform:translate3d(0,-101%,0)}
.site-header--hero:not(.is-solid) .site-header__logo--dark{opacity:0}
.site-header--hero:not(.is-solid) .site-header__logo--light{opacity:1;filter:drop-shadow(0 1px 8px rgba(0,0,0,.28))}
.site-header--hero:not(.is-solid) .site-header__name,.site-header--hero:not(.is-solid) .site-header__nav a{text-shadow:0 1px 12px rgba(0,0,0,.4)}

/* ---------- 全画面のメニュー ---------- */
.site-menu{position:fixed;top:var(--sh-h);left:0;right:0;bottom:0;z-index:590;overflow-y:auto;overscroll-behavior:contain;background:#fff;color:var(--sh-ink);font-family:var(--sh-serif);opacity:0;visibility:hidden;transition:opacity .6s cubic-bezier(.075,.82,.165,1),visibility 0s linear .6s}
.is-menu-open .site-menu{opacity:1;visibility:visible;transition:opacity .6s cubic-bezier(.075,.82,.165,1)}
.site-menu__inner{min-height:100%;display:flex;flex-direction:column;align-items:center;gap:30px;padding:48px 24px 64px;text-align:center;opacity:0;transition:opacity .3s ease}
.is-menu-open .site-menu__inner{opacity:1;transition:opacity .3s ease-out .3s}
.site-menu__name{display:grid;gap:4px;margin:0;line-height:1.4}
.site-menu__name-label{color:var(--sh-muted);font-family:var(--sh-en);font-size:.62rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase}
.site-menu__name-text{font-size:1.4rem;font-weight:500;letter-spacing:.08em}
.site-menu__nav ul,.site-menu__after,.site-menu__sub{list-style:none;margin:0;padding:0}
.site-menu__nav ul{display:grid;gap:2px}
.site-menu .site-menu__nav a{position:relative;display:inline-block;padding:11px 2px;color:var(--sh-ink);font-size:1.05rem;font-weight:500;line-height:1.6;letter-spacing:.12em;text-decoration:none}
.site-menu__nav a::after{content:'';position:absolute;left:0;right:0;bottom:8px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right top;transition:transform .3s var(--sh-line-ease)}
.site-menu__nav a:hover::after,.site-menu__nav a:focus-visible::after{transform:scaleX(1);transform-origin:left top}
.is-menu-open .site-menu__nav li{animation:siteMenuItem .7s cubic-bezier(.19,1,.22,1) both;animation-delay:calc(.3s + var(--i,0) * .04s)}
@keyframes siteMenuItem{from{opacity:0;transform:translate3d(0,10px,0)}to{opacity:1;transform:none}}
.site-menu .site-menu__contact{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:min(100%,300px);padding:16px 28px;background:var(--sh-ink);color:#fff;font-size:1rem;font-weight:500;line-height:1.6;letter-spacing:.12em;text-decoration:none}
.site-menu__contact::after{content:'';position:absolute;left:50%;bottom:9px;width:56px;height:2px;margin-left:-28px;background:var(--sh-accent);transform:scaleX(0);transition:transform .35s var(--sh-ease)}
.site-menu__contact:hover::after,.site-menu__contact:focus-visible::after{transform:scaleX(1)}
.site-menu__tel{display:grid;gap:2px;margin:-10px 0 0;font-size:.8rem;letter-spacing:.08em;line-height:1.6}
.site-menu .site-menu__tel a{color:var(--sh-ink);font-family:var(--sh-en);font-size:1.5rem;font-weight:600;letter-spacing:.12em;text-decoration:none}
.site-menu__after{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px}
.site-menu .site-menu__after a{color:var(--sh-ink);font-size:.92rem;letter-spacing:.1em;text-decoration:underline;text-decoration-color:rgba(17,18,17,.3);text-underline-offset:6px}
.site-menu__sub{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;margin-top:auto;padding-top:8px}
.site-menu .site-menu__sub a{color:var(--sh-muted);font-size:.78rem;letter-spacing:.08em;text-decoration:none}
.site-menu .site-menu__sub a:hover{text-decoration:underline;text-underline-offset:4px}

/* 物件ページで帯のリンクと物件名が並びきらない幅（1439px以下）は、リンクをメニューだけにする */
@media (max-width:1439px){
  .site-header--wide-nav .site-header__nav{display:none}
}
/* スマホ・タブレット: ロゴ・来場予約ボタン・メニューボタン。物件名はロゴの下に小さく出す */
@media (max-width:1000px){
  .site-header,.site-menu{--sh-h:64px;--sh-h-min:64px;--sh-pad:20px;--sh-logo:18px}
  .site-header__bar{gap:12px}
  .site-header__nav{display:none}
  .site-header__trigger{display:block}
  .site-header .site-header__contact{padding:9px 13px;font-size:.72rem}
  .site-header__contact::after{left:13px;right:13px;bottom:5px}
  .site-header--named .site-header__id{flex-direction:column;align-items:flex-start;gap:4px}
  .site-header__name{padding-left:0}
  .site-header__name::before,.site-header__name-label{display:none}
  .site-header__name-text{max-width:12em;font-size:.72rem;letter-spacing:.06em}
  .site-menu__inner{gap:26px;padding:36px 20px 56px}
}
/* 狭いスマホ: 来場予約ボタンは「来場予約／お問い合わせ」の2行にして幅を詰める */
@media (max-width:480px){
  .site-header,.site-menu{--sh-pad:16px;--sh-logo:13px}
  .site-header .site-header__contact{flex-direction:column;padding:6px 10px;font-size:.64rem;line-height:1.35;letter-spacing:.06em}
  .site-header__contact-sep{display:none}
  .site-header__contact::after{left:10px;right:10px;bottom:3px}
  .site-header__name-text{max-width:10em}
}
@media (prefers-reduced-motion:reduce){
  .site-header,.site-header *,.site-header *::after,.site-menu,.site-menu *,.site-menu *::after{transition:none!important;animation:none!important}
}