/* ベース */
:root{
  --notice-bg:#f1bd6b;        /* オレンジ指定 */
  --notice-height-min:30px;   /* 帯の最小高さ */
  --notice-height-max:48px;   /* 帯の最大高さ */
  --page-max:1200px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Zen Maru Gothic","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,system-ui,-apple-system,"Segoe UI",sans-serif;
  line-height:1.6;
  color:#111;
  background:#fff;
}

/* 告知帯 */
.notice{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:clamp(var(--notice-height-min), 5vw, var(--notice-height-max)); /* 30〜48pxの範囲で自動調整 */
  background:var(--notice-bg);
  position:sticky;
  top:0;
  z-index:20;
}
.notice span{
  font-weight:700;
  color:#000;
  /* 端末ごとに自動調整（SP小さく、PC大きく） */
  font-size:clamp(14px, 2.2vw, 18px);
  letter-spacing:.02em;
}

/* メイン */
.page{
  max-width:var(--page-max);
  margin:24px auto;
  padding:0 16px 40px;
}

/* アクセシビリティ用H1非表示 */
.visually-hidden{
  position:absolute !important;
  width:1px;height:1px;
  margin:-1px;border:0;padding:0;
  white-space:nowrap;clip-path:inset(50%);clip:rect(0 0 0 0);overflow:hidden;
}

/* ギャラリー */
.gallery{
  display:grid;
  grid-template-columns:1fr;     /* SPは縦並び */
  gap:16px;
}
@media (min-width:768px){
  .gallery{                      /* タブレット以上は横並び2カラム */
    grid-template-columns:1fr 1fr;
    gap:20px;
  }
}
.item{
  position:relative;
  overflow:hidden;
  border-radius:12px;
  box-shadow:0 1px 2px rgba(0,0,0,.06);
  background:#f7f7f7;
}

/* 画像 */
.media{
  display:block;
  width:100%;
  height:auto;
  transform-origin:center center;
  transition:transform .25s ease, box-shadow .25s ease;
  cursor:zoom-in; /* PC向け：拡大できる雰囲気 */
}

/* PCホバー時：その場で“部分だけ”拡大表示 */
@media (hover:hover) and (pointer:fine){
  .media:hover{
    transform:scale(1.12);
    box-shadow:0 10px 24px rgba(0,0,0,.18);
  }
}

/* ライトボックス（タップ/クリックで全画面拡大） */
.lightbox[hidden]{display:none !important;}
.lightbox{
  position:fixed; inset:0;
  background:rgba(0,0,0,.8);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  z-index:100;
}
.lightbox__img{
  max-width:96vw;
  max-height:86vh;
  width:auto; height:auto;
  object-fit:contain;
  cursor:zoom-out;
  border-radius:8px;
  box-shadow:0 10px 28px rgba(0,0,0,.35);
}
.lightbox__close{
  position:absolute; top:12px; right:12px;
  width:40px; height:40px;
  border-radius:999px;
  border:none; background:#fff;
  font-size:24px; line-height:1; cursor:pointer;
}

/* 低モーション配慮 */
@media (prefers-reduced-motion:reduce){
  .media{transition:none}
}