@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho+B1:wght@400;500;600;700;800&display=swap');
:root{
    --fade-duration: 280ms;
    --fade-ease: cubic-bezier(.22,.61,.36,1);
  }
  body{ margin:0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", sans-serif; }
  body.menu-open{ overflow:hidden; }

  /* ==== ヘッダー ==== */
header{
  position: fixed;   /* ← fixedに変更 */
  top: 10px;            /* 上に固定 */
  right: 1%;          /* 右に固定 */
  z-index: 10;
  
  display: flex;
  justify-content: flex-end;  /* 子要素を右端に寄せる */
  align-items: center;

  width: auto;       /* ヘッダーの幅を中身サイズに合わせる */
  padding: 12px 16px;
  margin: 0;
}

  /* ◯の中に “Menu” */
  #menuToggle{
    --size: 56px;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    border: 2px solid #111;
    background-color: rgba(255,255,255,0.3);
    font-family: "Shippori Mincho B1", sans-serif;
    color: #111;
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: .02em;
    display: grid; place-items: center;
    cursor: pointer;
    transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease;
  }
  #menuToggle:hover{
    transform: scale(1.06);
    box-shadow: 0 6px 18px rgba(0,0,0,.08);
    background: #fafafa;
  }
  #menuToggle:active{
    transform: scale(0.96);
  }

  /* ==== 全画面オーバーレイ（黒背景・白文字） ==== */
  .menu-overlay{
    position:fixed; inset:0; z-index:999;
    display:flex; align-items:center; justify-content:center;
    background: rgba(0,0,0,0.96);
    color:#fff;
    opacity:0; pointer-events:none;
    transform: scale(0.985);
    transition:
      opacity var(--fade-duration) var(--fade-ease),
      transform var(--fade-duration) var(--fade-ease);
  }
  .menu-overlay.is-open{
    opacity:1; pointer-events:auto; transform: scale(1);
  }

  .menu-content{
    width:min(92vw, 720px);
    text-align:center;
    display:grid; gap:20px;
  }

  .menu-link{
    text-decoration:none; color:#fff;
    padding:10px 12px;
    font-size:1.8rem; font-weight:500;
        font-family: "Shippori Mincho B1", sans-serif;
    
    border-radius:10px;
    transition: background-color 0.2s ease;
  }
@media screen and (max-width: 768px){
  .menu-link{
    font-size:1.2rem; font-weight:500;
  }
  }
  .menu-link:hover{ background:rgba(255,255,255,0.1); }

  /* 右上の目立つ×ボタン */
/* 閉じるボタン（Menuボタンと同じ位置に揃える） */
.close-btn{

  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  color: #000;
  border:2px solid #111;
  font-size:2rem;
  font-weight:700;
  display:grid;
  place-items:center;
  cursor:pointer;
  transition: background-color .2s ease, transform .15s ease;
}
.close-btn:hover{ background:#fff; transform:scale(1.08); }
.close-btn:active{ transform:scale(0.95); }

  @media (prefers-reduced-motion: reduce){
    .menu-overlay{ transition:none; transform:none; }
    #menuToggle, .close-btn{ transition:none; }
  }
.coming_soon{
  pointer-events: none;
  color:gray;
}