@charset "UTF-8";


/* ───── 戻るボタン ───── */
.page-back{
  position:fixed; top:20px; right:12px;
  z-index:1200;
  padding:10px 14px;
  font-size:16px; line-height:1;
  border:0; border-radius:999px;
  background: var(--main-color, #E1241E);
  color: var(--main-inverse-color, #fff);
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
  cursor:pointer;
}
.page-back:hover{ filter:brightness(0.95); }
.page-back:focus-visible{ outline:2px solid #000; outline-offset:2px; }
@media (max-width: 768px){
  .page-back{
    left: auto;  /* 左固定は無効化して常に右上 */
    /* ノッチ対応＋右上固定（iOSの安全領域を考慮） */
    top:  calc(env(safe-area-inset-top, 0px)  + 20px);
    right:calc(env(safe-area-inset-right, 0px) + 12px);
  }
}

/* ───── メインコンテンツ余白（必要なら） ───── */
.content { margin-top: 80px; padding: 20px; }

/* ───── 表示切替：PC(>=1024px)のみPC版、スマホはSP版 ───── */
.pc-stack { display: none; }
.sp-stack { display: block; }
@media (min-width: 1024px) {
  .sp-stack { display: none; }
  .pc-stack { display: block; }
}

/* 継ぎ目の1px隙間対策（2枚目以降） */
.stitch { margin-top: -1px; }

/* 画像の初期化：必要なときだけ縮む（伸びない） */
picture, img { display: block; }
img { max-width: 100%; height: auto; border: 0; box-shadow: none; background: none; }

/* タッチ端末ではPC用原寸リンクを無効化（安全側） */
@media (pointer: coarse) {
  a.fullres { pointer-events: none; }
}

/* PCのときだけ画像を95%にして中央寄せ */
@media (min-width: 1024px) {
  /* アンカーをブロック化（行頭から行末までとる） */
  .pc-stack a.fullres { display: block; }

  /* pictureコンテナの幅を95%にして中央寄せ */
  .pc-stack picture {
    width: 95%;
    margin-left: auto;
    margin-right: auto;
  }

  /* picture内のimgはコンテナ幅いっぱいに */
  .pc-stack img {
    width: 100%;
    height: auto;
  }
}

/* 見出し：左寄せ＋左端に寄り過ぎないレイアウト＆アクセント */
.wrap > h2{
  /* 画像(95%)と同じ幅で中央配置にして、左端ベタ付きを回避 */
  width: 95%;
  margin: clamp(12px, 3vw, 28px) auto 12px;  /* 上は可変、左右はautoで中央に */
  padding: 0.4rem 0.5rem 0.6rem 0.85rem;     /* 左に少しだけ余白を足す */

  font-family:'Noto Sans JP' ,'Noto Serif JP',serif;
  font-weight: 900;
  font-size: clamp(1.4rem, 2.6vw, 2.0rem);
  line-height: 1.25;
  letter-spacing: .02em;
  color: #111;
  position: relative;


}

/* PC時は少しだけサイズアップ＆行間タイトに */
@media (min-width: 1024px){
  .wrap > h2{
    font-size: clamp(1.6rem, 2.2vw, 2.2rem);
    line-height: 1.2;
  }
}

/* ===== menu.html だけで上部の食い込みを防止 ===== */

/* 端末の安全領域も加味した上部オフセット（必要に応じて 48〜72px で調整） */
:root { --top-offset: calc(env(safe-area-inset-top, 0px) + 56px); }

/* 初期スクロールや #アンカー時の止まり位置を下げる */
html { scroll-padding-top: var(--top-offset); }

/* 最上段の見出しが常に見切れないように */
.wrap > h2 { scroll-margin-top: var(--top-offset); }

/* もし初期から余白を確保したいなら（任意・見切れ防止をさらに堅く） */
body { padding-top: env(safe-area-inset-top, 0px); } /* まずは安全領域だけ。足りなければ +16〜24px を追加 */