/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:'Noto Sans JP',system-ui,-apple-system,Segoe UI,Roboto,'Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;
  background:#fafafa;color:#333;line-height:1.8;
}

/* Header */
/* 固定ヘッダー（最前面） */
#site-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 2147483647; /* これ以上ないレベルで最前面 */
  background: #fff;
  border-bottom: 3px solid #f4b6c2;
}

/* ヘッダー高さぶんの余白（とりあえず固定値でOK）*/
body{ padding-top: 60px; } /* 2段折りするなら 96px などに調整 */

/* コンテンツはヘッダーより下の層に */
#site-main, main, .container, section, .card {
  position: relative;
  z-index: 0;
}

/* アンカーのずれ補正＆スムーズスクロール（任意） */
:root { --hdrH: 80px; }
:target { scroll-margin-top: var(--hdrH); }
html { scroll-behavior: smooth; }

header{background:#fff;border-bottom:3px solid #f4b6c2;position:sticky;top:0;z-index:1000}
header nav{
  max-width:1200px;width:95%;margin:0 auto;
  display:flex;flex-wrap:wrap;gap:1rem 1.5rem;align-items:center;justify-content:center;
  padding:12px 0;
}
header nav a{
  text-decoration:none;color:#333;font-weight:700;
  padding:6px 10px;border-radius:8px;
  transition:background .2s ease,color .2s ease;
}
header nav a:hover{background:#fde3ea;color:#b45a6b}

/* Main：PCでも広めの単一カラム */
main{
  max-width:1100px; /* ← ここで本文幅を拡大 */
  width:92%;
  margin:28px auto;
  display:grid;grid-template-columns:1fr;gap:28px;
}
section,.card{
  background:#fff;border-radius:14px;padding:22px;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
}
section h1,section h2,section h3,.card h1,.card h2,.card h3{color:#b45a6b;margin:0 0 12px}
p{margin:0 0 1em}

/* Images */
img{max-width:100%;height:auto;border-radius:10px}

/* Footer */
footer{
  background:#fff;border-top:3px solid #f4b6c2;text-align:center;color:#666;font-size:.92rem;
  padding:14px 0;margin-top:24px;
}

/* SP */
@media (max-width:768px){
  header nav{justify-content:flex-start}
  main{width:94%;margin:18px auto}
}
:root { --hdrH: 64px; }
:target { scroll-margin-top: var(--hdrH); }
html { scroll-behavior: smooth; }

@media (max-width: 768px){
  #site-header nav{
    gap: .25rem .5rem;   /* ← 隙間を小さく */
    padding: 6px 0;      /* ← 上下余白を圧縮 */
    justify-content: flex-start;
  }
  #site-header nav a{
    font-size: 14px;     /* ← 少しだけ縮小（元16px想定） */
    line-height: 1.2;    /* ← 行間を詰める */
    padding: 4px 6px;    /* ← タブ内の余白を圧縮 */
    border-radius: 6px;
    display: inline-block;
    letter-spacing: 0;   /* 日本語は詰め気味でも読みやすい */
  }
}

@media (max-width: 480px){
  #site-header nav{
    gap: .2rem .4rem;
    padding: 2px 0;
  }
  #site-header nav a{
    font-size: 12.5px;   /* ← ここが効きます */
    line-height: 1.1;
    padding: 3px 5px;
    border-radius: 5px;
  }
}