/* ===========================================================
   metz.sc 共通ヘッダー   sitehead.css
   BUILD: 20260821-1
   各ページ共通の見出し帯。ページ名を大きく出し、
   ピンクの横線でヘッダーと本文を分ける。
   使い方（どのページでも同じ）：
     <link rel="stylesheet" href="https://metz.sc/css/sitehead.css">
     <header class="site-head">
       <div class="wrap">
         <a class="home-btn" href="https://metz.sc/top/">…</a>
         <div class="ttl">ページ名<small>説明</small></div>
         <a class="hbtn" href="https://metz.sc/top/">⌂ ホームに戻る</a>
       </div>
     </header>
   =========================================================== */
:root{
  --pink:#e65894; --pink-d:#c73e78; --pink-soft:#ffe6f1; --pink-line:#f4c4da;
  --ink:#3b2a32; --ink-soft:#7a6a72; --home:#7a4a2c; --home-d:#5e3720;
}

.site-head{background:#fff;border-bottom:3px solid var(--pink);position:sticky;top:0;z-index:100}
.site-head .wrap{max-width:920px;margin:0 auto;display:flex;align-items:center;gap:14px;padding:12px 16px}
.site-head a{text-decoration:none}

.home-btn{flex:none;width:42px;height:42px;border-radius:50%;background:var(--pink-soft);color:var(--pink-d);
  display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s}
.home-btn:hover{background:var(--pink);color:#fff}
.home-btn svg{width:23px;height:23px}

.site-head .ttl{font-size:20px;font-weight:700;letter-spacing:.04em;color:var(--ink);line-height:1.4}
.site-head .ttl small{display:block;font-size:12px;font-weight:400;color:var(--ink-soft);letter-spacing:.08em}

/* 右端の「ホームに戻る」ボタン */
.hbtn{margin-left:auto;flex:none;display:inline-block;background:var(--home);color:#fff;
  padding:9px 16px;border-radius:12px;font-size:14px;font-weight:700;white-space:nowrap;
  transition:background .15s}
.hbtn:hover{background:var(--home-d);color:#fff}

@media screen and (max-width:640px){
  .site-head .wrap{gap:10px;padding:10px 12px;flex-wrap:wrap}
  .site-head .ttl{font-size:17px}
  .home-btn{width:36px;height:36px}
  .home-btn svg{width:20px;height:20px}
  .hbtn{font-size:13px;padding:8px 13px}
}
@media screen and (max-width:380px){
  .site-head .wrap{flex-wrap:wrap}
  .hbtn{margin-left:0;width:100%;text-align:center}
}