/* ============================================================
   GUNMA × FORTNITE Site
============================================================ */
:root{
  --teal:#5fa39a;
  --teal-deep:#4d8e85;
  --navy:#0e2c5b;
  --yellow:#ffd84d;
  --text:#222;
  --text-soft:#3b3b3b;
  --white:#fff;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Noto Sans JP","Hiragino Sans","Yu Gothic UI",sans-serif;
  font-weight:500;
  color:var(--text);
  background:#fff;
  line-height:1.8;
  letter-spacing:.04em;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font-family:inherit;background:none;border:none;cursor:pointer;color:inherit}
ul{list-style:none}

/* ============================================================
   HEADER
============================================================ */
.header{
  position:fixed;
  top:0;left:0;right:0;
  z-index:100;
  background:transparent;
  transition:background .3s,box-shadow .3s,padding .3s;
}
.header.is-scrolled{
  background:var(--teal);
  box-shadow:0 6px 18px -10px rgba(0,0,0,.35);
}
.header-inner{
  max-width:1400px;
  margin:0 auto;
  padding:14px 28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.header-logo{
  display:flex;
  align-items:center;
}
.header-logo__img{
  width:auto;
  height:50px;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.35));
  transition:height .3s;
}
.header.is-scrolled .header-logo__img{
  height:42px;
  filter:none;
}
.header-nav ul{
  display:flex;
  gap:30px;
}
.header-nav a{
  position:relative;
  font-size:13px;
  font-weight:700;
  color:#fff;
  padding:6px 2px;
  text-shadow:0 1px 4px rgba(0,0,0,.45);
  transition:color .25s;
}
.header.is-scrolled .header-nav a{text-shadow:none}
.header-nav a::after{
  content:"";
  position:absolute;
  left:50%;bottom:0;
  width:0;height:2px;
  background:#fff;
  transition:all .3s;
}
.header-nav a:hover{opacity:.85}
.header-nav a:hover::after{left:0;width:100%}

/* ハンバーガーボタン（デスクトップでは非表示） */
.header-toggle{
  display:none;
  position:relative;
  z-index:120;
  width:44px;height:44px;
  padding:0;
  border:none;
  background:transparent;
  cursor:pointer;
}
.header-toggle__bar{
  position:absolute;
  left:10px;
  width:24px;height:2px;
  background:#fff;
  border-radius:2px;
  box-shadow:0 1px 3px rgba(0,0,0,.45);
  transition:transform .3s,opacity .3s,top .3s;
}
.header-toggle__bar:nth-child(1){top:15px}
.header-toggle__bar:nth-child(2){top:21px}
.header-toggle__bar:nth-child(3){top:27px}
.header.is-scrolled .header-toggle__bar{box-shadow:none}
.header-toggle.is-open .header-toggle__bar:nth-child(1){top:21px;transform:rotate(45deg)}
.header-toggle.is-open .header-toggle__bar:nth-child(2){opacity:0}
.header-toggle.is-open .header-toggle__bar:nth-child(3){top:21px;transform:rotate(-45deg)}

/* メニュー背面のオーバーレイ */
.header-overlay{
  position:fixed;
  inset:0;
  z-index:90;
  background:rgba(14,44,91,.45);
  opacity:0;
  transition:opacity .3s;
}
.header-overlay.is-show{opacity:1}

/* ============================================================
   MAIN VISUAL
============================================================ */
.mv{
  position:relative;
  height:100vh;
  min-height:560px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.mv__bg{
  position:absolute;inset:0;
  z-index:0;
}
.mv__bg img{
  width:100%;height:100%;
  object-fit:cover;
  transform:scale(1.05);
  animation:mvZoom 20s ease-in-out infinite alternate;
}
@keyframes mvZoom{
  0%{transform:scale(1.05) translateY(0)}
  100%{transform:scale(1.18) translateY(-10px)}
}
.mv::before{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.05) 40%,rgba(0,0,0,.35));
  z-index:1;
}
.mv__inner{
  position:relative;
  z-index:2;
  text-align:center;
  color:#fff;
  padding:0 16px;
}
.mv__title{
  font-family:"Bebas Neue",sans-serif;
  font-size:clamp(60px,12vw,200px);
  font-weight:900;
  letter-spacing:.08em;
  line-height:1;
  text-shadow:0 6px 30px rgba(0,0,0,.65),0 2px 8px rgba(0,0,0,.55);
}
.mv__subtitle{
  margin-top:24px;
  display:inline-block;
  font-size:clamp(20px,3vw,42px);
  font-weight:900;
  padding:14px 30px;
  background:rgba(0,0,0,.55);
  border:2px solid rgba(255,255,255,.3);
  letter-spacing:.12em;
  text-shadow:0 2px 6px rgba(0,0,0,.5);
}
.js .mv__title{animation:fadeUp 1.1s .15s both}
.js .mv__subtitle{animation:fadeUp 1.1s .45s both}
.mv__scroll{
  position:absolute;
  bottom:30px;left:50%;
  width:2px;height:60px;
  background:rgba(255,255,255,.35);
  transform:translateX(-50%);
  overflow:hidden;
  z-index:2;
}
.mv__scroll::after{
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  height:30%;
  background:#fff;
  animation:scrollLine 2.2s ease-in-out infinite;
}
@keyframes scrollLine{
  0%{transform:translateY(-100%)}
  100%{transform:translateY(330%)}
}
@keyframes fadeUp{
  from{transform:translateY(30px) scale(.96)}
  to{transform:translateY(0) scale(1)}
}

/* ============================================================
   INTRO (video + tsurumaru)
============================================================ */
.intro{
  background:#fff;
  padding:80px 24px 0;
}
.intro__video-wrap{
  max-width:880px;
  margin:0 auto;
  position:relative;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 20px 50px -20px rgba(0,0,0,.35);
  aspect-ratio:16/9;
  background:#000;
}
.intro__video{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
}
.intro__sound{
  position:absolute;
  right:14px;bottom:14px;
  width:46px;height:46px;
  border-radius:50%;
  background:rgba(0,0,0,.6);
  color:#fff;
  font-size:20px;
  display:flex;align-items:center;justify-content:center;
  transition:transform .2s,background .2s;
}
.intro__sound:hover{background:rgba(0,0,0,.85);transform:scale(1.06)}
.intro__sound .intro__sound-on{display:none}
.intro__sound.is-on .intro__sound-on{display:inline}
.intro__sound.is-on .intro__sound-off{display:none}

.intro__msg{
  margin-top:80px;
  /* 親(.intro)の左右paddingを打ち消して画面幅いっぱいに広げる */
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  padding:60px 24px 80px;
  background:var(--teal);
  color:#fff;
  text-align:center;
  position:relative;
}
.intro__msg::before,
.intro__msg::after{content:"";position:absolute;left:0;right:0;height:1px;background:rgba(255,255,255,.2)}
.intro__msg::before{top:0}
.intro__msg::after{bottom:0}
.intro__tsurumaru{
  width:130px;
  margin:-60px auto 22px;
  filter:drop-shadow(0 14px 24px rgba(0,0,0,.18));
  animation:bounce 3s ease-in-out infinite;
}
@keyframes bounce{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-12px)}
}
.intro__lead{
  font-size:15px;
  line-height:2.1;
  font-weight:500;
}

/* ============================================================
   CODE BOX (shared button)
============================================================ */
.code-box-wrap{
  display:flex;
  justify-content:center;
  margin-top:40px;
}
.code-box{
  display:inline-flex;
  align-items:center;
  gap:18px;
  background:var(--navy);
  color:#fff;
  padding:18px 38px;
  border-radius:6px;
  font-weight:900;
  cursor:pointer;
  position:relative;
  margin:34px auto 0;
  transition:transform .2s,box-shadow .2s,background .2s;
  user-select:none;
  box-shadow:0 6px 0 rgba(0,0,0,.12);
}
.code-box:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 18px -4px rgba(14,44,91,.4);
  background:#143775;
}
.code-box:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(0,0,0,.12)}
.code-box__label{
  font-size:14px;
  letter-spacing:.2em;
}
.code-box__value{
  font-size:24px;
  letter-spacing:.06em;
  font-family:"Bebas Neue",sans-serif;
}
.code-box__icon{display:inline-flex;color:#fff}
.code-box__copied{
  position:absolute;
  top:-38px;left:50%;
  transform:translateX(-50%) translateY(6px);
  background:var(--yellow);
  color:#222;
  font-size:12px;
  padding:6px 14px;
  border-radius:14px;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s,transform .2s;
}
.code-box.is-copied .code-box__copied{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}

/* ============================================================
   COMMON SECTION TITLE
============================================================ */
.section-title{
  text-align:center;
  font-size:clamp(36px,5vw,68px);
  font-weight:900;
  letter-spacing:.08em;
  color:var(--text);
}
.section-title--white{color:#fff}
.section-lead{
  text-align:center;
  margin-top:20px;
  font-size:15px;
  font-weight:700;
  color:var(--text-soft);
}
.section-lead--white{color:#fff}

/* ============================================================
   GUNMA MAP
============================================================ */
.map{
  padding:90px 24px 120px;
  background:#fff;
  text-align:center;
}
.map__wrap{
  position:relative;
  max-width:720px;
  margin:46px auto 0;
}
/* マップ画像とピンを重ねるステージ（地理座標で絶対配置） */
.map__stage{
  position:relative;
  width:100%;
}
.map__img{
  display:block;
  width:100%;
  filter:drop-shadow(0 18px 30px rgba(0,0,0,.15));
}

/* ピン（マップ上に絶対配置） */
.pin{
  position:absolute;
  transform:translate(-50%,-50%);
  display:inline-flex;
  align-items:center;
  background:var(--navy);
  color:#fff;
  font-size:13px;
  font-weight:900;
  padding:8px 14px;
  border-radius:4px;
  box-shadow:0 4px 0 rgba(0,0,0,.18),0 6px 14px -4px rgba(0,0,0,.4);
  white-space:nowrap;
  cursor:pointer;
  transition:transform .25s,background .2s,box-shadow .2s;
  letter-spacing:.04em;
  z-index:2;
}
.pin:hover{
  transform:translate(-50%,-50%) scale(1.08);
  background:#1a4ba0;
  box-shadow:0 8px 18px -4px rgba(0,0,0,.45),0 0 0 4px rgba(26,75,160,.18);
  z-index:5;
}
.pin.is-active{
  background:var(--yellow);
  color:#222;
}

/* ============================================================
   スポット画像ライトボックス
============================================================ */
.lightbox{
  position:fixed;
  inset:0;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  opacity:0;
  visibility:hidden;
  transition:opacity .3s,visibility .3s;
}
.lightbox.is-open{
  opacity:1;
  visibility:visible;
}
.lightbox__overlay{
  position:absolute;
  inset:0;
  background:rgba(14,44,91,.78);
  backdrop-filter:blur(3px);
}
.lightbox__inner{
  position:relative;
  z-index:1;
  width:min(820px,100%);
  background:#fff;
  border-radius:14px;
  padding:20px 64px;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.6);
  transform:translateY(30px) scale(.96);
  opacity:0;
  transition:transform .4s cubic-bezier(.2,.8,.25,1),opacity .4s;
}
.lightbox.is-open .lightbox__inner{
  transform:translateY(0) scale(1);
  opacity:1;
}
.lightbox__close{
  position:absolute;
  top:-14px;right:-14px;
  width:40px;height:40px;
  border:none;
  border-radius:50%;
  background:var(--navy);
  color:#fff;
  font-size:24px;
  line-height:1;
  cursor:pointer;
  box-shadow:0 4px 12px -2px rgba(0,0,0,.5);
  transition:background .2s,transform .2s;
}
.lightbox__close:hover{background:#1a4ba0;transform:scale(1.1)}
.lightbox__frame{
  position:relative;
  border-radius:8px;
  overflow:hidden;
  background:#eef1f5;
  aspect-ratio:4/3;
  display:flex;
  align-items:center;
  justify-content:center;
}
.lightbox__img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.lightbox__placeholder{
  position:absolute;
  color:#9aa3b2;
  font-size:15px;
  font-weight:700;
  letter-spacing:.06em;
}
/* 前へ・次へ矢印 */
.lightbox__nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:3;
  width:44px;height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:none;
  border-radius:50%;
  background:rgba(14,44,91,.78);
  color:#fff;
  cursor:pointer;
  transition:background .2s,transform .2s;
}
.lightbox__nav:hover{background:#1a4ba0;transform:translateY(-50%) scale(1.1)}
.lightbox__nav--prev{left:10px}
.lightbox__nav--next{right:10px}
/* 画像が正常表示されているときはプレースホルダーを隠す */
.lightbox__frame.has-img .lightbox__placeholder{display:none}
.lightbox__frame:not(.has-img) .lightbox__img{visibility:hidden}
.lightbox__caption{
  margin-top:16px;
  text-align:center;
  font-size:18px;
  font-weight:900;
  color:var(--navy);
  letter-spacing:.05em;
}

/* ============================================================
   HOW TO JOIN
============================================================ */
.howto{
  background:var(--teal);
  color:#fff;
  padding:90px 24px 110px;
  text-align:center;
}
.howto__steps{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px;
  max-width:1100px;
  margin:60px auto 0;
}
.step{
  text-align:center;
}
.step__title{
  font-family:"Bebas Neue",sans-serif;
  font-size:clamp(40px,4.4vw,68px);
  letter-spacing:.04em;
  line-height:1;
  font-weight:900;
}
.step__heading{
  margin-top:14px;
  font-size:16px;
  font-weight:900;
  line-height:1.5;
  min-height:3em; /* 2行分を確保しSTEP1〜3の画像位置を揃える */
  display:flex;
  align-items:center;
  justify-content:center;
}
.step__visual{
  margin:22px auto 18px;
  width:100%;
  aspect-ratio:734/522;
  background:#0b2447;
  border-radius:10px;
  overflow:hidden;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 14px 30px -10px rgba(0,0,0,.4);
  transition:transform .35s ease;
}
.step:hover .step__visual{transform:translateY(-6px)}
.step__visual--fortnite{background:#0b2447}
.step__visual--code{background:#0e1b3a}
.step__visual img{
  width:100%;height:100%;object-fit:cover;
}
.step__desc{
  font-size:13px;
  line-height:1.9;
  font-weight:500;
}

/* ============================================================
   DEVICE
============================================================ */
.device{
  background:#fff;
  padding:90px 24px 110px;
  text-align:center;
}
.device__btn{
  display:inline-flex;
  align-items:center;
  gap:30px;
  margin-top:40px;
  padding:24px 50px;
  border:2px solid var(--navy);
  color:var(--navy);
  font-weight:900;
  border-radius:4px;
  transition:background .25s,color .25s,transform .2s;
}
.device__btn small{font-size:12px;font-weight:700}
.device__btn:hover{
  background:var(--navy);
  color:#fff;
  transform:translateY(-2px);
}

/* ============================================================
   DISCLAIMER
============================================================ */
.disclaimer{
  background:var(--teal);
  color:#fff;
  padding:90px 24px 110px;
}
.disclaimer .section-title{margin-bottom:50px}
.disclaimer__block{
  max-width:1100px;
  margin:0 auto 40px;
}
.disclaimer__h3{
  font-size:22px;
  font-weight:900;
  margin-bottom:16px;
  letter-spacing:.04em;
}
.disclaimer__block p{
  font-size:13px;
  line-height:2;
}

/* ============================================================
   ABOUT (地方創生メタバース)
============================================================ */
.about{
  background:#fff;
  padding:90px 24px 100px;
  text-align:center;
}
.about__title{
  font-size:clamp(40px,5.6vw,76px);
  font-weight:900;
  letter-spacing:.08em;
  background:linear-gradient(180deg,#222 0%,#444 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
/* タイトル・サブ見出し内の改行はモバイルのみ有効（PCでは1行表示） */
.about__title-br,.about__sub-br{display:none}
.about__sub{
  margin-top:18px;
  font-size:14px;
  line-height:2;
  font-weight:700;
}
.about__h3{
  margin-top:70px;
  font-size:30px;
  font-weight:900;
  letter-spacing:.4em;
  position:relative;
  display:inline-block;
}
.about__h3::before,
.about__h3::after{
  content:"";
  position:absolute;
  top:50%;
  width:50px;height:2px;
  background:var(--text);
}
.about__h3::before{left:-70px}
.about__h3::after{right:-70px}
.about__cards{
  margin-top:36px;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:24px;
  max-width:900px;
  margin-left:auto;margin-right:auto;
}
.about__card{
  border:2px solid var(--text);
  padding:30px 24px;
  border-radius:6px;
  transition:transform .3s,box-shadow .3s;
}
.about__card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 24px -10px rgba(0,0,0,.25);
}
.about__card h4{
  font-size:20px;
  font-weight:900;
  margin-bottom:12px;
}
.about__card p{
  font-size:13px;
  line-height:1.9;
}
.about__bridge{
  margin-top:46px;
  font-size:14px;
  font-weight:700;
  line-height:2;
}
.about__purposes{
  margin-top:36px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  max-width:1100px;
  margin-left:auto;margin-right:auto;
}
.purpose{
  background:#fff;
  border:2px solid var(--text);
  padding:30px 24px;
  border-radius:6px;
  text-align:center;
  transition:transform .3s,box-shadow .3s;
}
.purpose:hover{
  transform:translateY(-6px);
  box-shadow:0 16px 30px -12px rgba(0,0,0,.18);
}
.purpose h4{
  font-size:18px;
  font-weight:900;
  margin-bottom:16px;
  line-height:1.5;
}
.purpose p{
  font-size:12.5px;
  line-height:1.9;
  text-align:left;
}

/* ============================================================
   STATEMENT
============================================================ */
.statement{
  background:#f3f3f3;
  padding:90px 24px 100px;
}
.statement__title{
  text-align:center;
  font-size:clamp(28px,3.6vw,44px);
  font-weight:900;
  margin-bottom:50px;
}
.statement__inner{
  max-width:1000px;
  margin:0 auto;
  display:grid;
  grid-template-columns:260px 1fr;
  gap:36px;
  align-items:start;
}
.statement__photo img{
  border-radius:8px;
  width:100%;
  height:340px;
  object-fit:cover;
  box-shadow:0 16px 30px -12px rgba(0,0,0,.3);
}
.statement__body p{
  font-size:13px;
  line-height:2.05;
}
.statement__sign{
  margin-top:18px;
  font-size:12px;
  font-weight:700;
  color:#555;
  line-height:1.7;
}

/* ============================================================
   CO-CREATION
============================================================ */
.cocreate{
  background:#fff;
  padding:90px 24px 100px;
  text-align:center;
}
.cocreate__title{
  font-size:clamp(32px,4.2vw,52px);
  font-weight:900;
  letter-spacing:.06em;
  margin-bottom:30px;
}
.cocreate__lead{
  max-width:1000px;
  margin:0 auto;
  font-size:13.5px;
  line-height:2.05;
  text-align:left;
}
.cocreate__grid{
  margin-top:50px;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:30px;
  max-width:1100px;
  margin-left:auto;margin-right:auto;
}
.cocreate__card{
  text-align:left;
  background:#f6f8f7;
  border-radius:10px;
  overflow:hidden;
  transition:transform .3s,box-shadow .3s;
}
.cocreate__card:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 30px -10px rgba(0,0,0,.18);
}
.cocreate__card h3{
  background:var(--teal);
  color:#fff;
  padding:14px 20px;
  font-size:18px;
  font-weight:900;
  letter-spacing:.04em;
}
.cocreate__img{
  height:180px;
  overflow:hidden;
}
.cocreate__img img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .6s ease;
}
.cocreate__card:hover .cocreate__img img{transform:scale(1.05)}
.cocreate__card p{
  padding:18px 22px 24px;
  font-size:13px;
  line-height:1.95;
}

/* ============================================================
   KIDS MEETING
============================================================ */
.kids{
  background:#f2f3f5;
  padding:90px 24px 110px;
  text-align:center;
}
.kids__title{
  font-size:clamp(20px,2.4vw,30px);
  font-weight:900;
  line-height:1.7;
}
.kids__title-em{
  background:linear-gradient(transparent 60%,var(--yellow) 60%);
  padding:0 4px;
}
.kids__lead{
  max-width:1000px;
  margin:30px auto 0;
  font-size:13px;
  line-height:2;
  text-align:left;
}
.kids__photo{
  max-width:1100px;
  margin:50px auto 0;
  display:flex;
  gap:8px;
}
.kids__photo img{
  flex:1 1 0;
  width:0;
  height:210px;
  object-fit:cover;
  border-radius:8px;
  box-shadow:0 12px 24px -12px rgba(0,0,0,.25);
}

/* ============================================================
   FOOTER
============================================================ */
.footer{
  background:#fff;
  padding:60px 24px 50px;
  text-align:center;
  position:relative;
  border-top:1px solid #ececec;
}
.footer__logo img{
  width:170px;
  margin:0 auto 26px;
}
.footer__contact{
  margin:0 auto 26px;
}
.footer__contact-label{
  font-size:13px;
  font-weight:700;
  letter-spacing:.06em;
  color:var(--text-soft);
  margin-bottom:8px;
}
.footer__contact-mail{
  display:inline-block;
  font-size:18px;
  font-weight:700;
  color:var(--teal-deep);
  letter-spacing:.04em;
  border-bottom:1px solid currentColor;
  padding-bottom:2px;
  transition:color .25s;
}
.footer__contact-mail:hover{color:var(--teal)}
.footer__copy{
  font-size:12px;
  font-weight:700;
  color:var(--text);
}
.footer__top{
  position:absolute;
  right:30px;bottom:50px;
  display:flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  font-weight:700;
  color:var(--text);
  border-bottom:1px solid #999;
  padding-bottom:4px;
  flex-direction:column;
}
.footer__top:hover{color:var(--teal);border-color:var(--teal)}

/* page top floating */
.pagetop{
  position:fixed;
  right:24px;bottom:24px;
  width:48px;height:48px;
  border-radius:50%;
  background:var(--teal);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  pointer-events:none;
  transition:opacity .3s,transform .3s,background .25s;
  box-shadow:0 8px 18px -6px rgba(0,0,0,.35);
  z-index:90;
}
.pagetop.is-show{
  opacity:1;
  pointer-events:auto;
}
.pagetop:hover{background:var(--teal-deep);transform:translateY(-3px)}

/* ============================================================
   SCROLL FADE-IN
   JS 有効時のみ初期状態 opacity:0 を適用する
============================================================ */
.js .fade-in{
  opacity:0;
  transform:translateY(30px);
  transition:opacity .9s ease,transform .9s ease;
}
.js .fade-in.is-visible{
  opacity:1;
  transform:translateY(0);
}

/* メニュー展開中は背面スクロールを止める */
body.is-nav-open{overflow:hidden}

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width:900px){
  .header-toggle{display:block}

  /* ナビをスライドインパネルに */
  .header-nav{
    position:fixed;
    top:0;right:0;
    z-index:110;
    width:min(78vw,300px);
    height:100vh;
    height:100dvh;
    padding:90px 28px 40px;
    background:var(--teal);
    box-shadow:-8px 0 24px -12px rgba(0,0,0,.45);
    transform:translateX(100%);
    transition:transform .32s ease;
    overflow-y:auto;
  }
  .header-nav.is-open{transform:translateX(0)}
  .header-nav ul{
    flex-direction:column;
    gap:4px;
  }
  .header-nav li{border-bottom:1px solid rgba(255,255,255,.18)}
  .header-nav a{
    display:block;
    font-size:15px;
    padding:16px 4px;
    text-shadow:none;
  }
  .header-nav a::after{display:none}

  .header-logo__img{height:42px}
  .mv__title{font-size:80px}
  .mv__subtitle{font-size:18px;padding:10px 16px}

  .howto__steps{grid-template-columns:1fr;gap:50px;max-width:420px}
  .step__visual{max-width:280px;margin-left:auto;margin-right:auto}

  .about__cards,.cocreate__grid,.about__purposes{grid-template-columns:1fr}
  .about__h3::before,.about__h3::after{display:none}
  .about__title-br,.about__sub-br{display:inline}

  .statement__inner{grid-template-columns:1fr}
  .statement__photo img{height:auto;max-height:380px}

  /* マップ：ピンを縮小して重なりを抑える */
  .pin{font-size:11px;padding:5px 8px;letter-spacing:0}

  /* 子ども未来会議：2×2 */
  .kids__photo{flex-wrap:wrap}
  .kids__photo img{flex:1 1 45%;width:auto;height:160px}

  .code-box{padding:14px 22px;gap:10px;flex-wrap:wrap;justify-content:center}
  .code-box__value{font-size:20px}

  .footer__top{position:static;margin-top:30px;justify-content:center;flex-direction:row}
}

@media (max-width:520px){
  .intro__msg{padding:50px 18px 60px}
  .intro__lead{font-size:13px;line-height:2}
  .intro__tsurumaru{width:100px;margin-top:-46px}
  .map{padding:60px 16px 80px}
  .pin{font-size:9.5px;padding:4px 6px}
  .lightbox__inner{padding:18px 48px}
  .lightbox__nav{width:38px;height:38px}
  .lightbox__nav--prev{left:6px}
  .lightbox__nav--next{right:6px}
  .lightbox__caption{font-size:16px}
  .device__btn{flex-direction:column;gap:12px;padding:20px 28px}
}