/* 全ページ共通。色は HANDOFF.md 2章の5色だけを使う */
body { margin: 0; font-family: 'Noto Sans JP', sans-serif; color: #3E2215; background: #FFFFFF; -webkit-font-smoothing: antialiased; }
a { color: #3E2215; }
a:hover { color: #6E5A4E; }
p, h1, h2, h3, dl, dd, ul { margin: 0; }
ul { padding: 0; list-style: none; }
/* 画面には出さず、読み上げにだけ伝える */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.logo { font-family: 'Zen Old Mincho', serif; font-weight: 500; font-size: 30px; letter-spacing: 0.04em; text-decoration: none; white-space: nowrap; line-height: 1; }

/* 白い余白の内側に板を置く */
.frame { padding: 40px; }

/* メニュー：右上に縦並び */
.h-nav { display: flex; flex-direction: column; align-items: flex-end; gap: 30px; }
.h-nav a { font-size: 17px; font-weight: 700; letter-spacing: 0.06em; text-decoration: none; line-height: 1; }
.h-nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 7px; }
.h-menu { display: none; }
.h-legal { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 12px; }
.h-legal a { color: #6E5A4E; text-decoration: none; }

/* ボタン：角を丸く。塗りはイラストのスカートの色 */
.btn { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; padding: 0 12px 0 28px; border-radius: 999px; font-size: 16px; font-weight: 700; letter-spacing: 0.05em; text-decoration: none; box-sizing: border-box; }
.btn-line { border: 2px solid #3E2215; background: #FFFFFF; color: #3E2215; }
.btn-line:hover { color: #3E2215; background: #FAF8F5; }
.btn-fill { border: 2px solid transparent; background: #3E2215; color: #FFFFFF; }
.btn-fill:hover { color: #FFFFFF; filter: brightness(0.94); }
.arw { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 999px; flex: none; }
.btn-line .arw { background: #3E2215; color: #FFFFFF; }
.btn-fill .arw { background: #FFFFFF; color: #3E2215; }
button.btn { font: inherit; font-size: 16px; font-weight: 700; letter-spacing: 0.05em; cursor: pointer; width: 100%; }
.menu { align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 13px; background: #3E2215; border: 0; cursor: pointer; }

/* メニューボタンの絵：閉じているときは2本線、開いているときは × */
.h-menu .i-close { display: none; }
.h-menu[aria-expanded="true"] .i-open { display: none; }
.h-menu[aria-expanded="true"] .i-close { display: block; }

@media (max-width: 880px) {
  .frame { padding: 14px; }
  .logo { font-size: 25px; }
  .h-nav { display: none; }
  .h-menu { display: inline-flex; }

  /* 開いたメニュー：板の色で画面いっぱいに出す。ロゴとボタンは上に残して、閉じ方が分かるようにする */
  .nav-open { overflow: hidden; }
  /* html を付けて、下層の .ph .h-nav（右寄せ）より強くする。右寄せが残ると、固定した面でも右に縮む */
  html.nav-open .h-nav { display: flex; position: fixed; inset: 0; z-index: 10; background: #F5F5F2; justify-self: stretch; align-self: stretch;
    flex-direction: column; align-items: flex-start; justify-content: center; gap: 34px; padding: 0 34px; }
  .nav-open .h-nav a { font-size: 20px; }
  .nav-open .logo, .nav-open .h-menu { position: relative; z-index: 11; }
}