:root{
  /* Colors */
  --mint:#5DE3C1; --sky:#6CC8FF; --pink:#FF6DAE; --yellow:#FFD84D;
  --bg:#FFFFFF; --sub:#F7FAFC; --text:#233347; --muted:#667085; --border:#E6E9EF;

  /* Layout */
  --header-h:72px; --radius:16px;

  /* Aspect ratios (Mobile defaults) */
  --ar-hero: 4 / 3; --ar-about: 4 / 3; --ar-lab: 4 / 3; --ar-news: 4 / 3; --ar-gallery: 1 / 1;
  --gallery-min: 160px;

  /* Mobile CTA (JSで更新) */
  --mobile-cta-h: 72px;

  /* Lightbox compact */
  --lb-dialog-w: 84vw; --lb-dialog-w-lg: 68vw;
  --lb-img-max-w: 86%; --lb-img-max-h: 62vh; --lb-img-max-h-lg: 54vh;

  /* Hero タイトル縁取り色（必要に応じて変更：#FFFFFF / #FFD84D / #233347 など） */
  --hero-title-stroke: #FFFFFF;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}
body{ margin:0; color:var(--text); background:var(--bg); font-family:"Noto Sans JP",system-ui,-apple-system,Segoe UI,Roboto,Arial,"M PLUS Rounded 1c",sans-serif; line-height:1.8; }
:focus-visible{ outline:3px solid var(--sky); outline-offset:2px; border-radius:8px; }

.container{ max-width:1200px; margin:0 auto; padding:0 16px; }
.section{ padding: clamp(32px, 5vw, 64px) 0; }
h2{ font-family:"M PLUS Rounded 1c",system-ui,sans-serif; font-weight:800; margin:0 0 16px; font-size: clamp(22px, 3.2vw, 28px); border-left:8px solid var(--sky); padding-left:12px; }
.visually-hidden{ position:absolute !important; clip:rect(1px,1px,1px,1px); width:1px;height:1px;margin:-1px;overflow:hidden;border:0;padding:0; }


/* Header / Nav */
.header{ position:sticky; top:0; z-index:999; height:auto; display:grid; grid-template-columns:auto 1fr auto; gap:16px; align-items:center; padding:0 16px; border-bottom:1px solid var(--border); background:rgba(255,255,255,0.9); backdrop-filter:saturate(130%) blur(8px); }
.logo{ width:180px; height:48px; display:grid; place-items:center; font-weight:700; color:var(--muted); }
.nav-desktop{ display:none; align-items:center; gap:20px; }
.nav-desktop ul{ list-style:none; margin:0; padding:0; display:flex; gap:16px; align-items:center; }
.nav-desktop a{ color:var(--text); text-decoration:none; padding:8px 10px; border-radius:10px; }
.nav-desktop a:hover{ background:#eff7ff; }
.hamburger{ justify-self:end; background:#fff; border:1px solid var(--border); border-radius:10px; width:44px; height:44px; display:grid; place-items:center; cursor:pointer; }
.hamburger__bar{ display:block; width:22px; height:2px; background:var(--text); }
.hamburger__bar + .hamburger__bar{ margin-top:5px; }

/* Mobile Overlay Nav */
.nav-mobile[hidden]{ display:none !important; }
.nav-mobile{ position:fixed; inset:0; background:rgba(255,255,255,0.98); display:none; padding-top:var(--header-h); }
.nav-mobile[aria-hidden="false"]{ display:block; }
.nav-mobile__inner{ max-width:960px; margin:0 auto; padding:24px 16px 56px; }
.nav-mobile__list{ list-style:none; margin:0 0 16px; padding:0; display:grid; gap:8px; }
.nav-mobile__list a{ display:block; padding:14px 16px; border:1px solid var(--border); border-radius:12px; background:#fff; color:var(--text); text-decoration:none; }
.nav-mobile__list a:hover{ background:#f2fbff; }
body.nav-open{ overflow:hidden; }

/* Buttons */
.btn{ display:inline-flex; align-items:center; justify-content:center; padding:12px 18px; border-radius:12px; text-decoration:none; cursor:pointer; font-weight:700; border:1px solid transparent; transition:transform .16s, box-shadow .16s, background .16s, color .16s; }
.btn:hover{ transform:translateY(-2px); }
.btn-primary{ background:var(--mint); color:var(--text); box-shadow:0 8px 20px rgba(93,227,193,.35); }
.btn-primary:hover{ box-shadow:0 10px 24px rgba(93,227,193,.45); }
.btn-secondary{ background:#eaf5ff; color:#1e4f7a; border-color:#cfe8ff; }
.btn-ghost{ background:#fff; color:var(--text); border-color:var(--border); }
.btn-block{ display:flex; width:100%; }
.btn-ig{ color:#fff; border:0; background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285AEB 90%); box-shadow:0 8px 22px rgba(214,36,159,.25); }
.btn-ig:hover{ filter:brightness(1.05); transform:translateY(-2px); box-shadow:0 10px 26px rgba(214,36,159,.35); }

/* Hero */
.hero{ position:relative; overflow:hidden; }
.hero__bg{
  background:
    radial-gradient(1200px 600px at -10% -20%, rgba(255,208,0,.38), transparent 60%),
    radial-gradient(1200px 600px at 110% -10%, rgba(255,154,0,.30), transparent 60%),
    linear-gradient(180deg, #FFFBE6 0%, #FFFFFF 100%);
}




.hero__photo .ph, .hero__photo img{ aspect-ratio:var(--ar-hero); width:100%; height:auto; display:block; object-fit:cover; border:2px dashed var(--border); border-radius:16px; color:#9aa7b6; }

/* Clouds */
.clouds{ position:absolute; inset:0; overflow:hidden; }
.cloud{ position:absolute; width:240px; opacity:.9; filter:drop-shadow(0 4px 12px rgba(0,0,0,.06)); animation:bob 6s ease-in-out infinite, drift-left 42s linear infinite; }
.cloud--1{ top:12%; left:-25%; animation-duration:6s,42s; }
.cloud--2{ top:28%; left:-35%; transform:scale(1.15); opacity:.85; animation-duration:7.2s,55s; }
.cloud--3{ top:58%; left:-30%; transform:scale(.9); opacity:.8; animation-duration:6.6s,48s; }
.cloud--4{ top:72%; left:-40%; transform:scale(1.35); opacity:.75; animation-duration:7.8s,64s; }
@keyframes drift-left{ from{left:-40%} to{left:160vw} }
@keyframes bob{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }

/* Confetti（明るく鮮明に） */
.confetti{
  position:absolute; inset:0; pointer-events:none;
  background-image:
    radial-gradient(circle 5px, rgba(255,79,160,.48) 99%, transparent 100%),
    radial-gradient(circle 5px, rgba(40,230,199,.48) 99%, transparent 100%),
    radial-gradient(circle 5px, rgba(46,184,255,.48) 99%, transparent 100%),
    radial-gradient(circle 5px, rgba(255,196,0,.48) 99%, transparent 100%);
  background-repeat:repeat;
  background-size:180px 180px;
  animation:sprinkle 18s linear infinite;
}
@keyframes sprinkle{ from{background-position:0 0,100px 100px,50px -50px,-80px 60px} to{background-position:0 400px,100px 500px,50px 350px,-80px 460px} }

/* About */
#about .about__visual .ph, #about .about__visual img{ aspect-ratio:var(--ar-about); width:100%; height:auto; object-fit:cover; display:block; border-radius:16px; border:1px solid var(--border); background:#fff; }
.tagline{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.tag{ display:inline-block; background:#e8fff9; color:#116b55; border:1px solid #c7f7ea; padding:6px 10px; border-radius:999px; font-weight:700; font-size:14px; }

/* Cards */
.cards{ display:grid; gap:16px; grid-template-columns:1fr; }
.card{ background:#fff; border:1px solid var(--border); border-radius:16px; overflow:hidden; display:grid; grid-template-rows:auto 1fr; transition:transform .16s, box-shadow .16s; }
.card:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(32,96,128,.08); }
.card__img{ position:relative; }
.card__body{ padding:14px; display:grid; gap:10px; }
.badge{ display:inline-block; padding:6px 10px; border-radius:999px; font-weight:700; font-size:13px; border:1px solid transparent; }
.badge--mint{ background:#e7fff8; color:#0a6d55; border-color:#c6f7ea; }
.badge--sky{ background:#eef7ff; color:#1b4c7a; border-color:#d2e8ff; }
.badge--pink{ background:#fff0f6; color:#8a1a4f; border-color:#ffd6e6; }
.badge--yellow{ background:#fff7da; color:#7a5b00; border-color:#ffeaa6; }

/* Labs */
#labs .card__img .ph, #labs .card__img img{ aspect-ratio:var(--ar-lab); width:100%; height:auto; object-fit:cover; display:block; border-radius:inherit; border-bottom:1px solid var(--border); }
#labs .card__body{ text-align:center; }
#labs .badge{ font-weight:800; font-size:clamp(15px,1.9vw,18px); padding:10px 14px; border-radius:999px; letter-spacing:.02em; box-shadow:0 8px 22px rgba(0,0,0,.06); border-width:1.5px; }
#labs .badge--mint{ background:#dbfff4; border-color:#b8f4e3; color:#075f4a; }
#labs .badge--sky{ background:#e8f3ff; border-color:#cfe6ff; color:#16466f; }
#labs .badge--pink{ background:#ffe7f1; border-color:#ffd0e1; color:#781746; }
#labs .badge--yellow{ background:#fff1c9; border-color:#ffe097; color:#664d00; }
/* Hide "活動を見る" in Labs */
#labs .card__body a.btn-ghost{ display:none !important; }

/* News */
.news{ display:grid; gap:12px; grid-template-columns:1fr; }
.news__item{ display:grid; grid-template-columns:140px 1fr; gap:12px; align-items:center; padding:8px; border:1px solid var(--border); border-radius:12px; background:#fff; color:inherit; text-decoration:none; }
.news__item:hover{ background:#f7fbff; }
.news__meta time{ display:block; font-size:13px; color:var(--muted); }
.news__meta p{ margin:4px 0 0; }
.news .ph{ aspect-ratio:var(--ar-news); }

/* Gallery */
.grid--gallery{ display:grid; gap:12px; grid-template-columns:repeat(auto-fill, minmax(var(--gallery-min), 1fr)); }
.grid--gallery .tile{ position:relative; aspect-ratio:var(--ar-gallery); border-radius:12px; overflow:hidden; border:1px solid var(--border); background:#fff; }
.grid--gallery .tile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.gallery-hint{ margin:-6px 0 10px; font-size:13px; color:var(--muted); display:inline-flex; align-items:center; gap:6px; }
.gallery-hint::before{ content:'🔍'; font-size:14px; }
/* もっと見る/閉じる：横並び */
.gallery-more{ margin-top:12px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }

/* SNSグリッド（既定：モバイル=1:1 → PC=4:3） */
:root{ --sns-min:160px; --ar-sns:1 / 1; }
.sns-grid{ display:grid; gap:12px; grid-template-columns:repeat(auto-fill, minmax(var(--sns-min), 1fr)); }
.sns-tile{ position:relative; aspect-ratio:var(--ar-sns); border-radius:12px; overflow:hidden; border:1px solid var(--border); background:#fff; }
.sns-tile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; border-radius:inherit; }
@media (min-width:960px){ :root{ --ar-sns: 4 / 3; } }
.sns-tile.ar-1x1  { aspect-ratio: 1 / 1 !important; }
.sns-tile.ar-4x5  { aspect-ratio: 4 / 5 !important; }
.sns-tile.ar-16x9 { aspect-ratio: 16 / 9 !important; }
.sns-grid.fit-contain .sns-tile img{ object-fit:contain; background:#000; }

/* Steps / SNS icons */
.steps{ display:grid; gap:12px; grid-template-columns:repeat(3,1fr); }
.step{ background:#fff; border:1px solid var(--border); border-radius:16px; padding:16px; display:grid; place-items:center; text-align:center; }
.step__num{ width:36px; height:36px; border-radius:50%; display:grid; place-items:center; font-weight:800; background:#eaf5ff; color:#1e4f7a; }
.sns{ display:flex; gap:12px; }
.sns__icon{ width:44px; height:44px; border-radius:12px; border:1px solid var(--border); display:grid; place-items:center; text-decoration:none; color:var(--text); background:#fff; }
.sns__icon:hover{ background:#f2fbff; }

/* Contact */
.section--cta{ background:linear-gradient(180deg,#f6feff 0%,#ffffff 100%); }
.cta{ text-align:center; }
.cta__actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
#contact .cta p{ text-align:left; max-width:48rem; margin:0 auto 10px; }

/* Footer */
.footer{ padding:24px 0; border-top:1px solid var(--border); 
 background:rgba(255,255,255,0.9);}
.footer__grid{ display:grid; gap:12px; align-items:center; grid-template-columns:auto 1fr; }
.footer__logo{ width:120px; height:36px;  display:grid; place-items:center; color:var(--muted); font-weight:700; }
.footer__nav{ display:flex; flex-wrap:wrap; gap:12px; }
.footer__nav a{ color:var(--muted); text-decoration:none; padding:4px 6px; }
.footer__nav a:hover{ background:#f2fbff; border-radius:8px; }
.footer__copy{ grid-column:1 / -1; color:var(--muted); margin:0; }

/* Mobile fixed CTA + padding */
.mobile-cta{ position:fixed; left:0; right:0; bottom:0; z-index:900; padding:10px 12px; background:linear-gradient(180deg, transparent 0%, rgba(255,255,255,.96) 30%, rgba(255,255,255,.98) 100%); backdrop-filter:blur(6px); padding-bottom:calc(10px + env(safe-area-inset-bottom)); }
.mobile-cta .btn{ max-width:600px; margin:0 auto; }
@media (max-width:959px){
  main{ padding-bottom:calc(var(--mobile-cta-h) + 16px + env(safe-area-inset-bottom)); }
  #labs .card:last-child{ margin-bottom:calc(var(--mobile-cta-h) + 16px); }
}

/* Reveal */
.reveal-init{ opacity:0; transform:translateY(12px); transition:opacity 420ms ease, transform 420ms ease; }
.reveal-in{ opacity:1 !important; transform:none !important; }

/* Mobile overlap fix & Hero mobile center + actions 1列 */
@media (max-width:959px){
  article.card{ position:relative; z-index:0; transform:none !important; will-change:auto !important; overflow:hidden; min-width:0; }
  article.card .card__img, article.card .card__body{ transform:none !important; }

  /* ヒーローを中央寄せ＋画像を大きく（1:1）＋ボタン縦1列 */
  :root{ --ar-hero: 1 / 1; }
  .hero__grid{ justify-items:center; text-align:center; min-height: clamp(600px, 110vw, 860px); }
  .hero__copy{ max-width:720px; }
  .hero__actions{
    display:grid; grid-template-columns:1fr; gap:12px; width:100%; max-width:420px; margin-inline:auto;
  }
  .hero__actions .btn{ width:100%; min-width:0; }
}

/* Lightbox */
.lightbox{ position:fixed; inset:0; z-index:1200; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.74); backdrop-filter:blur(2px); overscroll-behavior:contain; }
.lightbox.is-open{ display:flex; }
.lightbox__dialog{ outline:none; width:min(var(--lb-dialog-w),960px); max-height:78vh; display:grid; grid-template-rows:1fr auto; gap:10px; }
.lightbox__stage{ background:transparent !important; border:0 !important; padding:0 !important; box-shadow:none !important; display:flex; align-items:center; justify-content:center; }
.lightbox__img{ display:block; margin:0 auto; object-fit:contain; object-position:center center; background:transparent !important; max-width:var(--lb-img-max-w); max-height:var(--lb-img-max-h); }
.lightbox__caption{ background:transparent !important; color:#e6eef8; text-shadow:0 1px 2px rgba(0,0,0,.5); padding:10px 14px; border-radius:10px; font-size:14px; line-height:1.6; max-width:min(92vw,1000px); margin:0 auto; text-align:center; }
.lightbox__btn{ position:absolute; appearance:none; border:none; cursor:pointer; width:44px; height:44px; border-radius:999px; background:rgba(0,0,0,.45) !important; color:#fff !important; display:grid; place-items:center; box-shadow:0 6px 18px rgba(0,0,0,.35) !important; transition:transform .16s, background .16s, opacity .16s; }
.lightbox__btn:hover{ transform:translateY(-1px); background:rgba(0,0,0,.6) !important; }
.lightbox__close{ top:10px; right:10px; }
.lightbox__prev{ left:10px; top:50%; transform:translateY(-50%); }
.lightbox__next{ right:10px; top:50%; transform:translateY(-50%); }
.lightbox__btn svg{ width:22px; height:22px; }
html.lightbox-scroll-lock{ scroll-behavior:auto !important; }
html.lightbox-scroll-lock, body.lightbox-scroll-lock{ overflow:hidden !important; }

/* Sub-Hero（ニュース/活動一覧など） */
.sub-hero__bg{
  background:
    radial-gradient(900px 480px at -10% -20%,  rgba(255,208,0,.32), transparent 60%),
    radial-gradient(900px 480px at 110% -10%,  rgba(255,154,0,.26), transparent 60%),
    linear-gradient(180deg, #FFFBEA 0%, #FFFFFF 100%);
}

/* Responsive PC拡張：ヒーロー画像をさらに大きく */
@media (min-width:960px){
  .nav-desktop{ display:flex; } .hamburger{ display:none; }
  .hero__grid{ grid-template-columns: 0.8fr 1.2fr; min-height: clamp(720px, 62vw, 900px); }
  .cards{ grid-template-columns:repeat(3,1fr); }
  .grid--gallery{ --gallery-min:220px; --ar-gallery:4 / 3; }
  :root{ --ar-hero:16 / 9; --ar-about:3 / 2; --ar-lab:3 / 2; --ar-news:3 / 2; }
  #labs.section{ padding-top:clamp(12px, 2vw, 24px); }
}
@media (max-width:359px){ .news__item{ grid-template-columns:1fr; } }

/* Hero タイトル：2行で収めやすく＆縁取りを細く */
.hero__title{
  /* 2行想定（<br> を正しく改行として扱い、不要な追加改行を抑制） */
  white-space: pre-line;        /* <br> を改行として扱う */
  word-break: keep-all;         /* 日本語の過剰な途中改行を抑制（幅が極端に狭い端末では縮小で回避） */

  /* 行長と中央寄せ（2行でバランスを取りやすくする） */
  max-width: 18ch;              /* 1行の最大文字幅の目安（調整可） */
  margin-inline: auto;

  /* サイズ調整（2行に収めやすいフルイドタイプ） */
  font-size: clamp(32px, 8vw, 56px);  /* 以前より少し控えめに調整 */
  line-height: 1.05;
  letter-spacing: .01em;

  /* 色と立体感（黒文字＋細めの縁取り＋軽めのシャドウ） */
  color: #000;

  /* 縁取り（細く） */
  -webkit-text-stroke: 1.5px var(--hero-title-stroke);

  /* フォールバック用アウトラインを軽く（輪郭8方向＋控えめ影） */
  text-shadow:
    -1px  0   0 var(--hero-title-stroke),
     1px  0   0 var(--hero-title-stroke),
     0   -1px 0 var(--hero-title-stroke),
     0    1px 0 var(--hero-title-stroke),
    -1px -1px 0 var(--hero-title-stroke),
     1px -1px 0 var(--hero-title-stroke),
    -1px  1px 0 var(--hero-title-stroke),
     1px  1px 0 var(--hero-title-stroke),
    0 6px 12px rgba(0,0,0,.22);
}

/* PCでは少し大きく、縁取りを2pxに（細めを維持） */
@media (min-width: 960px){
  .hero__title{
    font-size: clamp(56px, 5.2vw, 84px);
    -webkit-text-stroke-width: 2px;
  }
}

/* 超狭幅デバイスでの保険（2行からあふれそうな時にさらに縮小） */
@media (max-width: 360px){
  .hero__title{
    font-size: clamp(28px, 8.5vw, 44px);
  }
}

/* 既報のモバイル中央寄せ（未適用なら有効化） */
@media (max-width: 959px){
  .hero__grid{
    justify-items: center;
    text-align: center;
  }
}
/* 1) ヒーロータイトル：縁取りをやめて、背景ハイライト＋軽い影で強調（2行前提） */
.hero__title{
  /* 2行に収めやすく。<br>のみで改行、不要な途中改行を抑制 */
  white-space: pre-line;
  word-break: keep-all;
  text-wrap: balance; /* 対応ブラウザで行の見た目バランス改善 */

  /* 行長とセンタリング（モバイル中心、PCは親のtext-alignに従う） */
  max-width: 18ch;            /* 1行の最大幅の目安。16〜20chで微調整可 */
  margin-inline: auto;

  /* サイズ（縁取り廃止に伴い少し大きめに） */
  font-size: clamp(32px, 8vw, 56px);
  line-height: 1.05;
  letter-spacing: .01em;

  /* 背景ハイライト（各行に独立して敷く） */
  display: inline;                          /* 行ごとに背景を割り当てる */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: .1em .35em;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.60));

  /* 立体感は軽めの影で（縁取りは廃止） */
  color: #000;
  -webkit-text-stroke: 0;                  /* 明示的にオフ */
  text-shadow: 0 8px 18px rgba(0,0,0,.18); /* うっすら浮かせる */
}
/* PCで少し大きく（2行に収めるため行長maxはそのまま） */
@media (min-width: 960px){
  .hero__title{
    font-size: clamp(56px, 5.2vw, 84px);
  }
}
/* 超狭幅保険：文字が長い場合さらに少し縮める */
@media (max-width: 360px){
  .hero__title{ font-size: clamp(28px, 8.5vw, 44px); }
}

/* 2) 写真をより大きく見せる（枠線を外し、画像カラムを拡張） */
.hero__photo .ph,
.hero__photo img{
  border: none !important;        /* 視覚的な縮みを避ける */
  border-radius: 16px;
}

/* PC：画像カラムをさらに大きく（コピー0.7 : 画像1.3）＋高さアップ */
@media (min-width: 960px){
  .hero__grid{
    /* 高さを増やして存在感アップ */
    min-height: clamp(780px, 66vw, 980px);
    /* 画像を大きく（従来 0.8fr 1.2fr → 0.7fr 1.3fr） */
    grid-template-columns: 0.7fr 1.3fr;
    column-gap: clamp(16px, 4vw, 56px);
  }
}

/* モバイル：中央揃え＋画像は1:1で縦にゆったり */
@media (max-width: 959px){
  :root{ --ar-hero: 1 / 1; }               /* 既に設定済みなら不要 */
  .hero__grid{
    justify-items: center;
    text-align: center;
    min-height: clamp(620px, 115vw, 900px); /* ほんの少し伸ばす */
  }
  .hero__copy{ max-width: 36ch; }           /* 行長を抑えて読みやすく */
  .hero__actions{
    display: grid; grid-template-columns: 1fr;
    gap: 12px; width: 100%; max-width: 420px; margin-inline: auto;
  }
  .hero__actions .btn{
    width: 100%; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* 1行固定 */
  }
}

/* 3) バランス微調整（タイトルと副題・ボタンの距離） */
.hero__title + .hero__subtitle{ margin-top: 12px; }
.hero__subtitle + .hero__actions{ margin-top: 12px; }

/* 4) オプション：写真を端いっぱい（フルブリード）にしたい場合は .hero--fullbleed を付与 */
.hero.hero--fullbleed .hero__photo{
  width: 100vw;
  margin-left: calc(50% - 50vw);
}
.hero.hero--fullbleed .hero__photo .ph,
.hero.hero--fullbleed .hero__photo img{
  border-radius: 0; border: none;
}

/* ========== 全ページ共通 背景アニメ（雲＋紙ふぶき） ========== */
.site-bg{
  position: fixed;
  inset: 0;
  z-index: -1;               /* すべてのコンテンツの背面 */
  pointer-events: none;
  overflow: hidden;
}

/* 雲（既存と同じ動き。速度/サイズはお好みで） */
.site-bg .clouds{ position:absolute; inset:0; overflow:hidden; }
.site-bg .cloud{
  position:absolute; width:240px; height:auto; opacity:.9;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.06));
  animation: bob 6s ease-in-out infinite, drift-left 42s linear infinite;
}
.site-bg .cloud--1{ top:12%; left:-25%; animation-duration: 6s, 42s; }
.site-bg .cloud--2{ top:28%; left:-35%; transform:scale(1.15); opacity:.85; animation-duration: 7.2s, 55s; }
.site-bg .cloud--3{ top:58%; left:-30%; transform:scale(0.9);  opacity:.8;  animation-duration: 6.6s, 48s; }
.site-bg .cloud--4{ top:72%; left:-40%; transform:scale(1.35); opacity:.75; animation-duration: 7.8s, 64s; }

@keyframes drift-left{ from{ left:-40%; } to{ left:160vw; } }
@keyframes bob{ 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-8px) } }

/* 紙ふぶき（明るく鮮明） */
.site-bg .confetti{
  position:absolute; inset:0;
  background-image:
    radial-gradient(circle 5px, rgba(255, 79,160,.48) 99%, transparent 100%),
    radial-gradient(circle 5px, rgba( 40,230,199,.48) 99%, transparent 100%),
    radial-gradient(circle 5px, rgba( 46,184,255,.48) 99%, transparent 100%),
    radial-gradient(circle 5px, rgba(255,196,  0,.48) 99%, transparent 100%);
  background-repeat:repeat;
  background-size:180px 180px;
  animation: sprinkle 18s linear infinite;
}
@keyframes sprinkle{
  from{ background-position: 0 0, 100px 100px, 50px -50px, -80px 60px; }
  to  { background-position: 0 400px, 100px 500px, 50px 350px, -80px 460px; }
}

/* 動きを抑えたいユーザー配慮 */
@media (prefers-reduced-motion: reduce){
  .site-bg .cloud, .site-bg .confetti{ animation: none !important; }
}

/* 既存のヒーロー内背景アニメは無効化（重複防止） */
.hero__bg{ display: none !important; }

/* ========== ヒーロー：画像のみ・横幅いっぱい（フルブリード） ========== */
.hero.hero--image-only .hero__copy,
.hero.hero--image-only .hero__actions{
  display: none !important; /* テキスト/ボタンは非表示（導線はヘッダーや固定CTAで継続） */
}

/* 画像を画面端まで（フルブリード） */
.hero.hero--image-only .hero__photo{
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

/* 画像は高さ優先で大きく見せる（トリミングはobject-fitで自然に） */
.hero.hero--image-only .hero__photo img{
  display: block;
  width: 100%;
  height: clamp(50vh, 65vw, 82vh); /* 目安：モバイルで背高め、PCで横広 */
  object-fit: cover;
  object-position: center center;  /* 必要に応じて center top / center bottom */
  border: none; border-radius: 0;
}

/* ヒーローの余白を詰める（上の固定ヘッダ分だけ考慮するなら調整） */
.hero.hero--image-only .hero__grid{
  min-height: 0;
  padding: 0;
}

/* PCではやや背を上げて主役感UP */
@media (min-width: 960px){
  .hero.hero--image-only .hero__photo img{
    height: clamp(56vh, 52vw, 88vh);
  }
}
/* 横幅ぴったり（フルブリード）を堅牢にするパッチ */
.hero.hero--image-only {
  /* 万一のはみ出しをこのセクションでクリップ（body全体には適用しない） */
  overflow-x: clip;
}

.hero.hero--image-only .hero__photo {
  position: relative;
  /* まずは 100vw ベース（すべてのブラウザで動く） */
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* svw 対応ブラウザでは 100svw を優先（モバイルのアドレスバー有無でズレない） */
@supports (width: 1svw) {
  .hero.hero--image-only .hero__photo {
    inline-size: 100svw;                 /* width: 100svw */
    max-inline-size: 100svw;             /* max-width: 100svw */
    margin-inline: calc(50% - 50svw);    /* 左右ともに 50svw 起点でフルブリード */
  }
}

/* 画像自体も親の幅にぴったり・隙間なしで表示 */
.hero.hero--image-only .hero__photo img {
  display: block;        /* 画像下の余白（行ボックスの隙間）を消す */
  width: 100%;
  height: clamp(56vh, 52vw, 88vh); /* 高さはお好みで（横幅ぴったりを優先） */
  object-fit: cover;
  object-position: center center;  /* 被写体位置に合わせて top/center/bottom に変更可 */
  border: none;
  border-radius: 0;
}

/* モバイルは少し縦をゆったりに（任意） */
@media (max-width: 959px) {
  .hero.hero--image-only .hero__photo img {
    height: clamp(60vh, 80svh, 92vh);
  }
}

/* まれに 100vw の端数で 1px 横スクロールが出る環境向け保険 */
html { overflow-x: clip; }

/* ヒーロー画像：横幅ぴったり（フルブリード） */
.hero.hero--image-only { overflow-x: clip; }

.hero.hero--image-only .hero__grid,
.hero.hero--image-only .container{
  padding: 0 !important;    /* コンテナの左右パディング無効化 */
  max-width: none !important;
}

/* ビューポート幅に合わせて端まで広げる（fallback: 100vw） */
.hero.hero--image-only .hero__photo{
  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* svw 対応ブラウザでは 100svw を優先（モバイルのアドレスバー変動でのズレ防止） */
@supports (width: 1svw){
  .hero.hero--image-only .hero__photo{
    inline-size: 100svw;
    max-inline-size: 100svw;
    margin-inline: calc(50% - 50svw);
  }
}

/* 画像自体も隙間ゼロでフィット（下の行ボックス隙間も消す） */
.hero.hero--image-only .hero__photo img{
  display: block;
  width: 100%;
  height: clamp(56vh, 52vw, 88vh);  /* 高さはお好みで（横幅ぴったりを優先） */
  object-fit: cover;
  object-position: center center;   /* 被写体位置に応じて center top などに調整可 */
  border: none !important;
  border-radius: 0 !important;
}

/* モバイルはもう少し背高に（任意） */
@media (max-width: 959px){
  .hero.hero--image-only .hero__photo img{
    height: clamp(60vh, 80svh, 92vh);
  }
}

/* 100vw 端数で出る 1px 横スクロールの保険 */
html{ overflow-x: clip; }

/* ロゴの高さ（お好みで数値調整可） */
:root{
  --logo-h-mb: 60px;   /* ヘッダー：モバイル */
  --logo-h-pc: 100px;   /* ヘッダー：PC */
  --footer-logo-h-mb: 60px; /* フッター：モバイル */
  --footer-logo-h-pc: 120px; /* フッター：PC */
}

/* 画像ロゴ（推奨：<div class="logo"><img ...></div> の場合） */
.header .logo img{
  height: var(--logo-h-mb);
  width: auto;
  display: block;
  object-fit: contain;
}
.footer__logo img{
  height: var(--footer-logo-h-mb);
  width: auto;
  display: block;
  object-fit: contain;
}

/* テキスト/ボックスロゴ（imgが無い場合の見た目調整） */
.header .logo{
  height: var(--logo-h-mb);
  min-width: 120px;
  padding: 0 10px;
  display: inline-grid;
  place-items: center;
}
.footer__logo{
  height: var(--footer-logo-h-mb);
  min-width: 100px;
  padding: 0 8px;
  display: inline-grid;
  place-items: center;
}

/* PCサイズへ自動切替 */
@media (min-width: 960px){
  .header .logo img{ height: var(--logo-h-pc); }
  .footer__logo img{ height: var(--footer-logo-h-pc); }
  .header .logo{ height: var(--logo-h-pc); }
  .footer__logo{ height: var(--footer-logo-h-pc); }
}

/* ヒーロー画像：横の余白ゼロで画面端まで（フルブリード） */
.hero.hero--image-only { overflow-x: clip; }


/* まずは 100vw で端まで（全ブラウザ） */
.hero.hero--image-only .hero__photo{
  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* svw対応環境では 100svw を優先（モバイルUI変動対策） */
@supports (width: 1svw){
  .hero.hero--image-only .hero__photo{
    inline-size: 100svw;
    max-inline-size: 100svw;
    margin-inline: calc(50% - 50svw);
  }
}

/* 画像も隙間ゼロ・高さは見栄えに合わせて */
.hero.hero--image-only .hero__photo img{
  display: block;     /* 画像下の行ボックス隙間を除去 */
  width: 100%;
  height: clamp(60vh, 80svh, 92vh); /* お好みで調整：PCは↓で上書き */
  object-fit: cover;
  object-position: center center;
  border: none !important;
  border-radius: 0 !important;
}

/* PCは少し低めでもOKならこちら（調整可能） */
@media (min-width: 960px){
  .hero.hero--image-only .hero__photo img{
    height: clamp(56vh, 52vw, 88vh);
  }
}

/* 100vw由来の1px横スクロール保険 */
html{ overflow-x: clip; }

/* フッター全体を中央揃えに */
.footer{
  text-align: center;
}

/* 既存のgridを上書き → 縦積み中央寄せ */
.footer__grid{
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

/* ロゴ（点線なし・サイズは変数のまま） */
.footer__logo{
  border: none !important;
  background: transparent !important;
}
.footer__logo img{
  height: var(--footer-logo-h-mb);
  width: auto;
  display: block;
  object-fit: contain;
  border: none !important;
  background: transparent !important;
}
@media (min-width: 960px){
  .footer__logo img{ height: var(--footer-logo-h-pc); }
}

/* フッターのナビを中央寄せ・折返し対応 */
.footer__nav{
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  justify-content: center;
}

/* コピーライトも中央 */
.footer__copy{
  margin: 0;
  text-align: center;
}

/* 余白バランス（必要に応じて微調整可） */
.footer{
  padding: 24px 16px;
}
@media (min-width: 960px){
  .footer__grid{ gap: 14px; }
}

/* PCのギャラリーは 1行3枚＋写真を少し大きく */
:root{
  --gallery-pc-max: 1320px;  /* PC時のギャラリーの最大横幅（1200→1320に拡張） */
  --gallery-gap-pc: 16px;    /* PC時のタイル間ギャップ */
}

@media (min-width: 960px){
  /* ギャラリーセクションだけ横幅を広げる（写真を“少し大きく”） */
  #gallery .container{
    max-width: var(--gallery-pc-max);
  }

  /* 1行3枚に固定（既存のauto-fillを上書き） */
  #gallery .grid--gallery{
    grid-template-columns: repeat(3, 1fr) !important;
    gap: var(--gallery-gap-pc);
  }

  /* タイルは横長4:3でゆったり（見た目のサイズアップ） */
  #gallery .grid--gallery .tile{
    aspect-ratio: 4 / 3 !important;
  }
}

/* パターンB: アスペクト比を固定して切り抜き表示 */
.news-cover1 {
  width: 100%;
  aspect-ratio: 16 / 9;   /* お好みで 4/3, 3/2 などに変更可能 */
  max-height: 60vh;        /* 画面高さの制限（任意） */
  overflow: hidden;
  background: #eaeaea;
  display: block;
}

.news-cover1 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ph{
  width: 100%;
  aspect-ratio: 16 / 9;   /* お好みで 4/3, 3/2 などに変更可能 */
  max-height: 60vh;        /* 画面高さの制限（任意） */
  overflow: hidden;
  background: #eaeaea;
  display: block;
}

.ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}