/* =========================================================
   TOTO 四国・うるおいバトン2026
   ========================================================= */

:root{
  --key:#0075c2;
  --key-soft:#3d94d1;
  --mint:#8fe0d2;
  --sky:#7fc8ec;
  --grad-1:#8fe0d2;
  --grad-2:#7bc6ea;
  --grad-3:#5aa8dd;
  --ink:#33454d;
  --body:#42525a;
  --body-soft:#66767d;
  --paper:#ffffff;
  --mist:#f4f9fa;
  --mist-2:#eef6f7;
  --line:#e3edef;
  --soil:#a98a5f;
  --font:'Zen Maru Gothic', -apple-system, 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  --header-h:72px;
}
.pc {
  display: block;
}
@media only screen and (max-width: 959px) {
  .pc {
    display: none;
  }
}

.tablet {
  display: none;
}
@media only screen and (max-width: 959px) {
  .tablet {
    display: block;
  }
}
@media only screen and (max-width: 600px) {
  .tablet {
    display: none;
  }
}

.sp {
  display: none;
}
@media only screen and (max-width: 959px) {
  .sp {
    display: block;
  }
}

.ssp {
  display: none;
}
@media only screen and (max-width: 600px) {
  .ssp {
    display: block;
  }
}

/*PC改行加える*/
.br-pc {
  display: inherit;
}
@media only screen and (max-width: 959px) {
  .br-pc {
    display: none;
  }
}

/*PC改行無効*/
.br_sp {
  display: none;
}
@media only screen and (max-width: 959px) {
  .br_sp {
    display: block;
  }
}

.br_ssp {
  display: none;
}
@media only screen and (max-width: 600px) {
  .br_ssp {
    display: block;
  }
}
/*ズームイン表示*/
.zoomin {
  -webkit-transition: 0.8s;
  transition: 0.8s;
  transform: scale(0, 0);
  -webkit-transform: scale(0, 0);
}

.mv01 {
  transform: scale(1, 1);
  -webkit-transform: scale(1, 1);
}

/*フェードイン表示*/
.fadein {
  -webkit-transition: 0.8s;
  transition: 0.8s;
  opacity: 0;
}

.fadein:not(:target) {
  opacity: 1\9 ;
  /*IE9対策*/
}

.mv02 {
  opacity: 1;
}

/*移動＋フェードイン表示*/
.fadeup {
  -webkit-transition: 0.8s;
  transition: 0.8s;
  opacity: 0;
  transform: translate(0, 60px);
  -webkit-transform: translate(0, 60px);
}

.fadeup:not(:target) {
  opacity: 1\9 ;
  /*IE9対策*/
}

.mv07 {
  opacity: 1;
  transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
}

/*移動＋フェードダウン表示*/
.fadedown {
  -webkit-transition: 2s;
  transition: 2s;
  opacity: 0;
  transform: translate(0, -160px);
  -webkit-transform: translate(0, -160px);
}

.fadedown:not(:target) {
  opacity: 1\9 ;
  /*IE9対策*/
}

.mv08 {
  opacity: 1;
  transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ 
  scroll-behavior:smooth; 
  font-size:18px; 
  @media only screen and (max-width: 959px) {
    font-size:15px;
  }
}
body{
  font-family:var(--font);
  font-weight:500;
  font-size:1rem;
  color:var(--ink);
  background:var(--paper);
  line-height:1.9;
  letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font-family:inherit; background:none; border:none; cursor:pointer; }

.skip{
  position:absolute; left:-999px; top:0; z-index:999;
  background:#fff; color:var(--key); padding:10px 16px; border-radius:0 0 8px 0;
}
.skip:focus{ left:0; }

.wrap{ max-width:1080px; margin:0 auto; padding:0 3%; }

@media(max-width:959px){
  .wrap{ padding:0 8%; }
}

/* ---------- reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .8s ease, transform .8s ease; }
.reveal.in{ opacity:1; transform:none; }

/* ---------- typography helpers ---------- */
.eyebrow{
  font-size:13px;
  font-weight:500;
  letter-spacing:.28em;
  color:var(--key);
  text-transform:uppercase;
  margin-bottom:14px;
}
.on-gradient .eyebrow{ color:rgba(255,255,255,.85); }

.sec-head{
  margin-bottom:44px;
  text-align:center;
}
.sec-head h2{
  font-size:clamp(24px,3.2vw,34px);
  font-weight:500;
  letter-spacing:.08em;
  line-height:1.5;
  color:var(--ink);
}
.on-gradient h2{ color:#fff; }

.sec-sub{
  color:var(--body);
  font-size:1rem;
  max-width:680px;
  margin-bottom:40px;
}
.sec-note{
  color:var(--body);
  font-size:1rem;
  padding:4rem 0 1rem;
  text-align:center;
}
@media(max-width:600px){
  .sec-note{ text-align:left; }
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:15px 34px;
  border-radius:50px;
  font-size:16px;
  font-weight:500;
  letter-spacing:.06em;
  transition:transform .25s ease, box-shadow .25s ease, opacity .25s ease;
  white-space:nowrap;
}
.btn-primary{
  background:linear-gradient(120deg, var(--grad-1), var(--grad-2) 55%, var(--grad-3));
  color:#fff;
  box-shadow:0 10px 26px rgba(90,168,221,.35);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(90,168,221,.45); }
.btn-check-icon{
  flex:none; width:13px; height:9px;
  border-left:2px solid #fff; border-bottom:2px solid #fff;
  transform:rotate(-45deg) translateY(-1px);
}
.btn-icon{ flex:none; width:18px; height:18px; color:currentColor; }
.btn-outline{
  background:#fff;
  color:var(--key);
  border:1px solid var(--line);
  box-shadow:0 6px 18px rgba(30,90,130,.06);
}
.btn-outline:hover{ transform:translateY(-2px); border-color:var(--key); }
.btn-ghost{
  background:transparent;
  color:var(--body-soft);
  border:1px dashed var(--line);
}
.btn-ghost:hover{ color:var(--key); border-color:var(--key); }

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  position:fixed; top:0; left:0; width:100%; z-index:200;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  transition:box-shadow .3s ease, padding .3s ease;
  padding:16px 0;
}
.site-header.scrolled{
  box-shadow:0 2px 18px rgba(20,60,90,.08);
  padding:10px 0;
}
.header-inner{
  max-width:1080px; margin:0 auto; padding:0 3%;
  display:flex; align-items:center; gap:24px;
}
.header-logo img{ height:40px; width:auto; transition:height .3s ease; }
.site-header.scrolled .header-logo img{ height:40px; }

.header-nav{
  margin-left:auto;
  margin-right:0;
  display:flex;
  align-items:center;
  gap:30px;
  font-size:15px;
  font-weight:500;
  color:var(--ink);
}
.header-nav a{ position:relative; padding:4px 0; }
.header-nav > a::after,
.header-nav__item > a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:var(--key); transition:width .25s ease;
}
.header-nav > a:hover::after,
.header-nav__item:hover > a::after,
.header-nav__item:focus-within > a::after{ width:100%; }

.header-nav__item{
  position:relative;
  padding-bottom:12px;
  margin-bottom:-12px;
}
.header-sub{
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%) translateY(4px);
  min-width:240px;
  margin:0;
  padding:10px 0;
  list-style:none;
  background:rgba(238,248,251,1);
  border-radius:12px;
  box-shadow:0 10px 28px rgba(15,45,60,.1);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .2s ease, transform .2s ease, visibility .2s ease;
  z-index:220;
}
.header-sub::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-12px;
  height:12px;
}
.header-nav__item:hover .header-sub,
.header-nav__item:focus-within .header-sub{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
.header-sub li{ margin:0; }
.header-sub a{
  display:block;
  padding:10px 18px;
  color:var(--ink);
  font-size:14px;
  font-weight:500;
  white-space:nowrap;
  text-decoration:none;
}
.header-sub a::after{ display:none; }
.header-sub a:hover{ color:var(--key); background:rgba(255,255,255,.45); }

@media(max-width:1260px){
  .header-nav{ padding-right:100px; }
}

@media(max-width:959px){
  .header-nav{ display:none; }
}

/* ---------- floating droplet menu button (top-right, fixed) ---------- */
.menu-btn{
  position:fixed; top:8px; right:30px; z-index:210;
  width:96px; height:118px;
  border:none; background:none; padding:0; margin:0; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.menu-btn-bg{
  position:absolute; inset:0;
  background:url("../images/h_menu_back.png") center top / contain no-repeat;
  transform-origin:50% 42%;
  transition:transform .5s cubic-bezier(.34,1.56,.64,1);
  filter:drop-shadow(0 10px 20px rgba(0,90,150,.22));
}
.menu-btn:hover .menu-btn-bg,
.menu-btn[aria-expanded="true"] .menu-btn-bg{
  transform:rotate(18deg);
}
.menu-btn-icon{
  position:absolute; left:50%; top:calc(66% - 10px); transform:translate(-50%,-50%);
  display:flex; flex-direction:column; gap:5px; align-items:center; pointer-events:none;
}
.menu-btn-icon span{
  width:22px; height:2px; background:#fff; border-radius:2px;
  transition:transform .3s ease, opacity .3s ease;
}
.menu-btn[aria-expanded="true"] .menu-btn-icon span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn-icon span:nth-child(2){ opacity:0; }
.menu-btn[aria-expanded="true"] .menu-btn-icon span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.menu-btn-label{
  position:absolute; left:50%; top:calc(82% - 10px); transform:translate(-50%,-50%);
  color:#fff; font-size:11px; font-weight:700; letter-spacing:.12em; pointer-events:none;
}

@media(max-width:600px){
  .menu-btn{ width:72px; height:88px; right:14px; top:6px; }
  .menu-btn-icon{ gap:4px; }
  .menu-btn-icon span{ width:16px; }
  .menu-btn[aria-expanded="true"] .menu-btn-icon span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
  .menu-btn[aria-expanded="true"] .menu-btn-icon span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }
  .menu-btn-label{ font-size:8.5px; }
}

/* =========================================================
   GLOBAL MENU (hamburger overlay)
   ========================================================= */
.global-menu{
  position:fixed; inset:0; z-index:220;
  background:#fff;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .4s ease, visibility .4s ease;
  display:flex; flex-direction:column;
}
.global-menu.open{ opacity:1; visibility:visible; pointer-events:auto; }
body.menu-open .site-header,
body.menu-open .menu-btn{ display:none; }

.gm-topbar{
  position:absolute; top:0; left:0; z-index:2; width:100%;
  display:flex; align-items:center; justify-content:flex-end;
  padding:18px 32px;
}

.gm-logo{
  display:block; width:100%; margin:0 0 2rem;
  grid-column:1 / -1;
}
.gm-logo img{ width:260px; }

.gm-close{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  color:var(--ink); font-size:11px; font-weight:700; letter-spacing:.14em;
  transition:color .2s ease;
}
.gm-close:hover{ color:var(--key); }
.gm-close-icon{ position:relative; width:20px; height:20px; }
.gm-close-icon::before, .gm-close-icon::after{
  content:""; position:absolute; left:50%; top:50%; width:20px; height:2px;
  background:currentColor; border-radius:2px;
}
.gm-close-icon::before{ transform:translate(-50%,-50%) rotate(45deg); }
.gm-close-icon::after{ transform:translate(-50%,-50%) rotate(-45deg); }

.gm-body{ flex:1 1 auto; display:flex; min-height:0; overflow-y:auto; }

.gm-visual{
  flex:0 0 40%;
  position:relative; overflow:hidden;
  background:linear-gradient(155deg, #eaf7f5 0%, #bfe7e0 22%, #7cc7ec 62%, #3d8fce 100%);
}
.gm-visual::before, .gm-visual::after{
  content:""; position:absolute; border-radius:50%; filter:blur(50px);
}
.gm-visual::before{ width:260px; height:260px; background:rgba(255,255,255,.35); top:-60px; left:-60px; }
.gm-visual::after{ width:220px; height:220px; background:rgba(255,255,255,.22); bottom:-70px; right:-40px; }

.gm-nav{
  flex:1 1 60%;
  display:grid; grid-template-columns:1fr 1fr;
  gap:0 48px;
  padding:100px 5% 3%;
  align-content:start;
}
.gm-col > ul > li > a{
  display:block; padding:17px 4px 17px 28px;
  font-size:1rem; font-weight:500; letter-spacing:.04em;
  color:var(--ink);
  background:url("../images/h_menu_back.png") left center / 14px auto no-repeat;
  transition:color .2s ease;
}
.gm-col > ul > li > a:hover{ color:var(--key); }
.gm-sub{ padding:0 4px 15px 18px; }
.gm-sub li{ border-bottom:none !important; }
.gm-sub a{
  display:block; padding:8px 0;
  font-size:14px; color:var(--body);
  position:relative; padding-left:16px;
}
.gm-sub a::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:6px; height:1px; background:var(--body-soft);
}
.gm-sub a:hover{ color:var(--key); }

@media(max-width:959px){
  .site-header{ position:static; }
  .gm-visual{ display:none; }
  .gm-nav{ flex:1 1 100%; }
}

@media(max-width:600px){
  .gm-topbar{ padding:16px 20px; }
  .gm-nav{ grid-template-columns:1fr; gap:0; padding:88px 24px 40px; }
  .gm-col > ul > li > a{ padding:10px 0 10px 28px; }
  .gm-sub a{ padding:5px 0; }
}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:flex-start;
  align-items:safe center;
  background:
    radial-gradient(120% 90% at 85% -10%, rgba(143,224,210,.35), transparent 60%),
    radial-gradient(90% 70% at -10% 110%, rgba(122,198,234,.30), transparent 60%),
    var(--paper);
  overflow:hidden;
  padding:clamp(6.5rem, 11vw, 8.75rem) 0 5rem;
}
.hero-blob{ position:absolute; border-radius:50%; filter:blur(60px); opacity:.55; z-index:0; }
.hero-blob.a{ width:560px; height:500px; background:var(--mint); top:-100px; right:-100px; opacity:.6; }
.hero-blob.b{ width:420px; height:420px; background:var(--sky); bottom:-80px; left:-40px; opacity:.4; }

.hero-shizuku{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
}
.hero-shizuku__item{
  position:absolute;
  display:block;
  width:auto;
  height:auto;
  /*opacity:0;
  animation-name:heroShizukuFall;
  animation-duration:3.2s;
  animation-timing-function:cubic-bezier(.19,.68,.28,1);
  animation-fill-mode:forwards;*/
}
.hero-shizuku__item--1{
  top:12%;
  left:-3%;
  width:30vw;
  /* max-width:300px; */
  transition-delay:.1s;

}
.hero-shizuku__item--1.mv08{
  opacity:.5;
}
.hero-shizuku__item--2{
  top:9%;
  left:22%;
  width:14vw;
  /* max-width:120px; */
  transition-delay:.55s;

}
.hero-shizuku__item--3{
  top:20%;
  right:3%;
  width:24vw;
  /* max-width:300px; */
  /*animation-name:heroShizukuFallFlip;*/
  transition-delay:.3s;
}
.hero-shizuku__item--3.mv08{
  opacity:.7;
}
.hero-shizuku__item--4{
  top:60%;
  right:2%;
  width:12vw;
  max-width:180px;
  transition-delay:.7s;
}
.hero-shizuku__item--5{
  top:63%;
  left:14%;
  width:11vw;
  /* max-width:160px; */
  transition-delay:.45s;
}
@keyframes heroShizukuFall{
  0%{
    transform:translateY(-42vh);
    opacity:0;
  }
  55%{ opacity:1; }
  100%{
    transform:translateY(0);
    opacity:1;
  }
}
@keyframes heroShizukuFallFlip{
  0%{
    transform:scaleX(-1) translateY(-42vh);
    opacity:0;
  }
  55%{ opacity:1; }
  100%{
    transform:scaleX(-1) translateY(0);
    opacity:1;
  }
}
/*
@media(prefers-reduced-motion:reduce){
  .hero-shizuku__item{ animation:none; opacity:1; transform:none; }
  .hero-shizuku__item--3{ transform:scaleX(-1); }
}*/
@media(max-width:760px){
  .hero-shizuku__item--1{
    width:54vw;
    top:2%;
    left:-8%;
  }
  .hero-shizuku__item--2{
    top:9%;
    left:28%;
    width:18vw;
    transition-delay:.55s;
  }
  .hero-shizuku__item--3{
    width:34vw;
    top:30%;
    right:-4%;
  }
  .hero-shizuku__item--4{
    width:30vw;
    top:70%;
    right:12%;
  }
  .hero-shizuku__item--5{
    top:73%;
    left:4%;
    width:31vw;
    transition-delay:.45s;
  }
}

.hero-inner{
  position:relative;
  z-index:2;
  max-width:1160px;
  margin:0 auto;
  padding:0 8%;
  display:block;
}
.hero-text .eyebrow{ color:var(--key-soft); }
.hero-text h1{
  font-size:clamp(28px,4.4vw,44px);
  font-weight:500;
  line-height:1.6;
  letter-spacing:.04em;
  color:var(--ink);
  margin-bottom:26px;
}
.hero-text h1 .hl{ color:var(--key); }
.hero-lead{
  color:var(--body);
  font-size:clamp(14px, 4vw, 18px);
  line-height:1.6;
  margin-bottom:36px;
}
.hero-cta{ display:flex; flex-wrap:wrap; gap:16px; }

.scroll-cue{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:2;
  display:flex; flex-direction:column; align-items:center;
}
.scroll-cue__scene{
  position:relative;
  flex-shrink:0;
  width:80px;
  height:80px;
  overflow:visible;
}
.scroll-cue__drop{
  position:absolute;
  top:0;
  left:50%;
  width:10px;
  height:10px;
  background:radial-gradient(circle at 30% 30%, #a8e4ff, var(--key));
  border-radius:50%;
  box-shadow:0 0 6px rgba(0,117,194,.35);
  transform:translateX(-50%);
  animation:scrollCueDrop 2.8s cubic-bezier(.25,.1,.25,1) infinite;
}
.scroll-cue__ripple{
  position:absolute;
  bottom:16px;
  left:50%;
  width:10px;
  height:10px;
  border:2px solid rgba(0,117,194,.55);
  border-radius:50%;
  transform:translateX(-50%) scale(0);
  opacity:0;
  animation:scrollCueRipple 2.8s ease-out infinite;
}
.scroll-label{
  display:block;
  margin-top:0;
  font-size:10px;
  font-weight:500;
  letter-spacing:.28em;
  color:var(--body-soft);
}
@keyframes scrollCueDrop{
  0%{
    top:0;
    opacity:0;
    transform:translateX(-50%) scale(.8);
  }
  30%{ opacity:1; }
  60%{
    top:56px;
    opacity:1;
  }
  70%{
    top:60px;
    opacity:0;
  }
  100%{
    top:0;
    opacity:0;
  }
}
@keyframes scrollCueRipple{
  60%{
    transform:translateX(-50%) scale(0);
    opacity:0;
  }
  70%{
    transform:translateX(-50%) scale(1.2);
    opacity:1;
  }
  90%{
    transform:translateX(-50%) scale(2.4);
    opacity:0;
  }
  100%{
    transform:translateX(-50%) scale(0);
    opacity:0;
  }
}

@media(max-width:860px){
  .hero{ padding:6.5rem 0 4rem; }
}

@media(max-width:959px){
  .hero{
    min-height:0;
    height:calc(100vh - var(--header-h));
  }
  .hero-cta .btn{
    display:flex;
    width:100%;
    text-align:center;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:10px 34px;
    border-radius:2em;
  }
  .hero-cta .btn .btn-check-icon{
    display:inline-block;
    flex:none;
  }
}

/* =========================================================
   SECTION BLOCKS
   ========================================================= */
section.block{ padding:9rem 0; position:relative; scroll-margin-top:84px; }
.block-mist{ background:linear-gradient(180deg, var(--mist), var(--mist-2)); }
.block-gradient{
  background:linear-gradient(135deg, #16617f 0%, #1a7fa0 30%, #3ea6b8 60%, #7fd3c2 100%);
  color:#fff;
}
.event-sub{ scroll-margin-top:84px; }

@media(max-width:860px){
  section.block{ padding:6rem 0; }
}

/* 企画趣旨 */
#kikaku{ overflow:hidden; padding-bottom:0; }
#kikaku .wrap{
  position:relative;
  z-index:1;
  max-width:880px;
  padding-bottom:4rem;
}

.section-wave{
  position:relative;
  z-index:2;
  line-height:0;
  margin-top:-1px;
  margin-bottom:-2px;
  overflow:hidden;
}
.section-wave svg{
  display:block;
  width:100%;
  height:clamp(3.75rem, 7.5vw, 5.5rem);
  margin-bottom:-1px;
  transform:translateZ(0);
}
#sengen{
  position:relative;
  z-index:1;
  margin-top:-2px;
  padding-top:7rem;
}

@media(max-width:860px){
  #sengen{ padding-top:5rem; }
}

.rainning{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:0;
}
#kikaku .rain{
  position:absolute;
  width:2px;
  height:100%;
  top:0;
  left:50%;
  overflow:hidden;
}
#kikaku .rain::after{
  content:"";
  display:block;
  position:absolute;
  width:2px;
  height:16vh;
  top:0;
  left:0;
  background:linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 75%, rgba(255,255,255,.55) 100%);
  opacity:.42;
  will-change:transform;
  animation:rainDrop 3.6s linear infinite;
}
#kikaku .rain:nth-child(1){ margin-left:-42%; }
#kikaku .rain:nth-child(1)::after{ animation-delay:0s; }
#kikaku .rain:nth-child(2){ margin-left:-25%; }
#kikaku .rain:nth-child(2)::after{ animation-delay:1.8s; }
#kikaku .rain:nth-child(3){ margin-left:-8%; }
#kikaku .rain:nth-child(3)::after{ animation-delay:3.1s; }
#kikaku .rain:nth-child(4){ margin-left:8%; }
#kikaku .rain:nth-child(4)::after{ animation-delay:.9s; }
#kikaku .rain:nth-child(5){ margin-left:25%; }
#kikaku .rain:nth-child(5)::after{ animation-delay:2.4s; }
#kikaku .rain:nth-child(6){ margin-left:42%; }
#kikaku .rain:nth-child(6)::after{ animation-delay:1.3s; }
@keyframes rainDrop{
  0%{ transform:translateY(-20vh); }
  100%{ transform:translateY(120vh); }
}

.lead-text p{
  font-size:1rem;
  line-height:2.85;
  margin-bottom:2rem;
}
.lead-text p:last-child{ margin-bottom:0; }
#kikaku .lead-text strong{
  font-weight:700;
  color:inherit;
  background:linear-gradient(transparent 58%, rgba(255,236,148,.38) 58%);
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
  padding:0 .06em;
}

/* =========================================================
   宣言セクション
   ========================================================= */
.sengen-title{ max-width:560px; width:88%; margin:0 auto; }
.sengen-visual{
  margin:3.5rem 0;
}
.sengen-image{
  display:block;
  width:100%;
  max-width:720px;
  margin:0 auto;
  border-radius:20px;
}
/*
#sengen .sengen-visual.reveal{
  opacity:0;
  transform:translate3d(0,48px,0);
  transition:opacity 1.15s cubic-bezier(.22,1,.36,1), transform 1.15s cubic-bezier(.22,1,.36,1);
}
#sengen .sengen-visual.reveal.in{
  opacity:1;
  transform:translate3d(0,0,0);
}*/

.declare-card{
  max-width:1080px; margin:0 auto 56px;
  padding:0;
}
.declare-card p{ font-size:1rem; line-height:2.05; margin-bottom:20px; color:var(--body); }
.declare-card p:last-child{ margin-bottom:0; }

.pillars{
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
  margin-bottom:4.5rem;
  padding-top:36px;
}
.pillars--stagger.is-waiting .pillar{
  opacity:0;
  transform:translate3d(0,80px,0);
  transition:
    opacity 1.35s cubic-bezier(.22,1,.36,1),
    transform 3s cubic-bezier(.22,1,.36,1);
}
.pillars--stagger.is-waiting.is-revealed .pillar{
  opacity:1;
  transform:translate3d(0,0,0);
}
.pillars--stagger.is-waiting.is-revealed .pillar:nth-child(1){ transition-delay:0ms; }
.pillars--stagger.is-waiting.is-revealed .pillar:nth-child(2){ transition-delay:450ms; }
.pillars--stagger.is-waiting.is-revealed .pillar:nth-child(3){ transition-delay:900ms; }
/*@media(prefers-reduced-motion:reduce){
  .pillars--stagger.is-waiting.is-revealed .pillar{ transition-delay:0ms!important; }
}*/
.pillar{
  position:relative;
  overflow:visible;
  background:linear-gradient(180deg, #f5fcfb 0%, #eaf6fa 55%, #dceff7 100%);
  border-radius:24px;
  padding:50px 10% 30px;
  text-align:left;
  box-shadow:0 5px 15px rgba(10,30,80,.04);
}
.pillar img{
  position:absolute;
  top:0;
  left:50%;
  height:66px;
  width:auto;
  transform:translate(-50%, -50%);
  margin-bottom:0;
}
.pillar h3{
  font-size:clamp(18px, 2vw, 20px);
  font-weight:700;
  letter-spacing:.04em;
  color:var(--key);
  line-height:1.4;
  margin-bottom:12px;
  text-align:center;
}
.pillar p{
  font-size:.9rem;
  color:var(--body);
  line-height:1.8;
}

.sengen-close{ text-align:center; max-width:1080px; margin:0 auto; }
.sengen-close p{ font-size:1.12rem; line-height:2; margin-bottom:18px; color:var(--key); }
.sengen-close .sign{ font-size:14px; color:var(--body-soft); margin-bottom:0; }

@media(max-width:760px){
  .pillars{ grid-template-columns:1fr; }
}
@media(max-width:600px){
  .pillars{ gap:48px; }
}

/* =========================================================
   水の日とは
   ========================================================= */
#mizunohi{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding-bottom:0;
  color:#fff;
  background-color:#156b8a;
}
#mizunohi .wrap{
  position:relative;
  z-index:1;
  padding-bottom:4rem;
}
#mizunohi .section-wave path{ fill:#fff; }
#shikoku-mizu{
  position:relative;
  z-index:1;
  margin-top:-2px;
  padding-top:5rem;
  padding-bottom:0;
  overflow:hidden;
  background:#fff;
}
#shikoku-mizu .wrap{ padding-bottom:2rem; }
#shikoku-mizu .section-wave path{ fill:#eef8fb; }
#check{
  position:relative;
  z-index:1;
  margin-top:-2px;
  padding-top:3rem;
  padding-bottom:0;
  overflow:hidden;
  background:linear-gradient(180deg, #eef8fb 0%, #e8f4f8 100%);
}
#check .wrap{ padding-bottom:2rem; }
#check .sec-head{ margin-bottom:calc(44px * 0.7); }
#check .section-wave path{ fill:#fff; }
#event{
  position:relative;
  z-index:1;
  margin-top:-2px;
  padding-top:5rem;
  padding-bottom:0;
  overflow:hidden;
  background:#fff;
}
#event .wrap{ padding-bottom:5rem; }
#event .section-wave path{ fill:var(--mist); }
#kikin{
  position:relative;
  z-index:1;
  margin-top:-2px;
  padding-top:5rem;
  padding-bottom:0;
  overflow:hidden;
}
#kikin .wrap{ padding-bottom:5rem; }
#kikin .section-wave path{ fill:#fff; }
#report{
  position:relative;
  z-index:1;
  margin-top:-2px;
  padding-top:5rem;
  padding-bottom:0;
  overflow:hidden;
  background:#fff;
}
#report .wrap{ padding-bottom:5rem; }
#report .section-wave path{ fill:var(--mist); }
#report .sec-sub{ max-width:100%; }
#report .sec-sub a{
  color:var(--key);
  text-decoration:underline;
  text-underline-offset:3px;
}
#media{
  position:relative;
  z-index:1;
  margin-top:-2px;
  padding-top:5rem;
  padding-bottom:0;
  overflow:hidden;
}
#media .wrap{ padding-bottom:5rem; }
#media .section-wave path{ fill:#fff; }
#faq{
  position:relative;
  z-index:1;
  margin-top:-2px;
  padding-top:5rem;
  background:#fff;
}
#mizunohi .mizunohi-parallax{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:
    linear-gradient(
      180deg,
      rgba(0,95,170,.54) 0%,
      rgba(0,112,152,.62) 45%,
      rgba(10,98,142,.56) 100%
    ),
    url("../images/mizunohi_back.jpeg");
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  background-attachment:fixed;
}
@media(max-width:860px){
  #mizunohi .mizunohi-parallax{ background-attachment:scroll; }
}
#mizunohi .sec-head h2{
  color:#fff;
  text-shadow:0 2px 22px rgba(0,0,0,.5), 0 0 1px rgba(0,0,0,.35);
}
#mizunohi .eyebrow{
  color:rgba(255,255,255,.92);
  text-shadow:0 1px 12px rgba(0,0,0,.45);
}
.mnh-dateblock{
  width:100%;
  max-width:820px;
  margin:0 auto 2.5rem;
  color:#fff;
  text-align:center;
  animation:mnh-fade .9s ease both;
}
.mnh-dateblock *{ box-sizing:border-box; }
.mnh-row{
  display:flex;
  align-items:stretch;
  justify-content:center;
  gap:clamp(28px, 6vw, 84px);
}
.mnh-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  flex:1;
  max-width:320px;
}
.mnh-en{
  line-height:1;
  font-family:'Cormorant Garamond',serif;
  font-size:12px;
  letter-spacing:.42em;
  font-weight:500;
  opacity:.82;
  padding-left:.42em;
}
.mnh-num{
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:6px;
  font-family:'Cormorant Garamond',serif;
  font-weight:400;
  line-height:1;
}
.mnh-num>span{ font-size:clamp(64px, 11vw, 104px); }
.mnh-num .mnh-slash{
  font-size:clamp(40px, 7vw, 62px);
  opacity:.72;
  font-weight:300;
}
.mnh-num .mnh-dash{
  font-size:clamp(34px, 6vw, 52px);
  opacity:.72;
  font-weight:300;
  padding:0 4px;
}
.mnh-line{
  width:34px;
  height:1px;
  background:rgba(255,255,255,.55);
}
.mnh-ja{
  font-family:'Zen Maru Gothic',sans-serif;
  font-size:clamp(18px, 2.4vw, 22px);
  font-weight:500;
  letter-spacing:.34em;
  padding-left:.34em;
}
.mnh-divider{
  width:1px;
  align-self:stretch;
  background:linear-gradient(180deg, transparent, rgba(255,255,255,.4) 20%, rgba(255,255,255,.4) 80%, transparent);
}
@keyframes mnh-fade{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:translateY(0); }
}

#mizunohi .split-text{
  max-width:800px;
  margin:0 auto;
}
#mizunohi .split-text p{
  color:#fff;
  font-size:1rem;
  line-height:2.15;
  margin-bottom:1.75rem;
  text-shadow:0 1px 16px rgba(0,0,0,.55), 0 0 1px rgba(0,0,0,.4);
}
#mizunohi .split-text p:last-child{ margin-bottom:0; }
#mizunohi .split-text strong{
  font-weight:700;
  color:inherit;
  background-image:linear-gradient(transparent 58%, rgba(255,236,148,.42) 58%);
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
  padding:0 .06em;
}
#mizunohi .youtube{
  max-width:800px;
  margin:2.5rem auto 0;
}
#mizunohi .youtube iframe{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16 / 9;
  border:0;
  border-radius:10px;
}

/* =========================================================
   四国の水資源と暮らし
   ========================================================= */
#shikoku-mizu .sec-sub{
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}
@media(max-width:600px){
  #shikoku-mizu .sec-sub{ text-align:left; }
}
#shikoku-mizu .contrast-cards{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:clamp(3.5rem, 6vw, 5.5rem);
  width:100%;
  max-width:1600px;
  margin:0 auto 8px;
  padding:0;
}
#shikoku-mizu .shikoku-map-deco{
  display:none;
  pointer-events:none;
}
#shikoku-mizu .contrast-row{
  display:grid;
  grid-template-columns:55% 1fr;
  gap:clamp(24px, 3vw, 48px);
  align-items:center;
}
#shikoku-mizu .contrast-row--reverse{
  grid-template-columns:1fr 55%;
}
#shikoku-mizu .contrast-row--reverse .contrast-row__media{
  grid-column:2;
  grid-row:1;
}
#shikoku-mizu .contrast-row--reverse .contrast-row__body{
  grid-column:1;
  grid-row:1;
  margin-left:auto;
}
#shikoku-mizu .contrast-row__media{
  width:100%;
}
#shikoku-mizu .contrast-row__media img{
  display:block;
  width:100%;
  min-height:clamp(260px, 32vw, 420px);
  aspect-ratio:4 / 2.6;
  object-fit:cover;
}
@media(max-width:1100px){
  #shikoku-mizu .contrast-row__media img{ aspect-ratio:4 / 3; }
  #shikoku-mizu .shikoku-map-deco{
    display:block;
    position:absolute;
    z-index:3;
    top:48%;
    left:50%;
    width:min(52vw, 360px);
    transform:translate(-50%, -50%) rotate(-6deg);
    pointer-events:none;
  }
  #shikoku-mizu .shikoku-map-deco img{
    display:block;
    width:100%;
    height:auto;
    opacity:.65;
  }
}
@media(max-width:760px){
  #shikoku-mizu .shikoku-map-deco{
    display:block;
    position:absolute;
    z-index:3;
    top:48%;
    left:50%;
    width:min(52vw, 360px);
    transform:translate(-50%, -50%) rotate(-6deg);
    pointer-events:none;
  }
  }
#shikoku-mizu .contrast-row__body{
  max-width:520px;
  padding:0 clamp(20px, 3vw, 40px) 0 clamp(24px, 4vw, 48px);
}
#shikoku-mizu .contrast-row--reverse .contrast-row__body{
  padding:0 clamp(24px, 4vw, 48px) 0 clamp(20px, 3vw, 40px);
}
#shikoku-mizu .contrast-row__head{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:12px 16px;
  margin-bottom:1.25rem;
  font-family:var(--font);
  font-weight:500;
}
#shikoku-mizu .contrast-row__head h3{
  font-family:inherit;
  font-size:clamp(18px, 6vw, 28px);
  font-weight:500;
  letter-spacing:.04em;
  color:var(--ink);
}
#shikoku-mizu .contrast-badge{
  display:inline-flex;
  align-items:center;
  padding:5px 12px;
  border-radius:4px;
  background:var(--key);
  color:#fff;
  font-size:12.5px;
  font-weight:500;
  letter-spacing:.06em;
  line-height:1.4;
  white-space:nowrap;
}
#shikoku-mizu .contrast-row__body p{
  font-size:1rem;
  color:var(--body);
  line-height:1.9;
  margin-bottom:1rem;
}
#shikoku-mizu .contrast-row__body p:last-child{ margin-bottom:0; }

@media(max-width:760px){
  #shikoku-mizu .contrast-row,
  #shikoku-mizu .contrast-row--reverse{
    grid-template-columns:1fr;
    align-items:start;
    gap:40px;
  }
  #shikoku-mizu .contrast-row--reverse .contrast-row__media,
  #shikoku-mizu .contrast-row--reverse .contrast-row__body{
    grid-column:1;
    margin-left:0;
  }
  #shikoku-mizu .contrast-row--reverse .contrast-row__media{ grid-row:1; }
  #shikoku-mizu .contrast-row--reverse .contrast-row__body{ grid-row:2; }
  #shikoku-mizu .contrast-row__media{
    width:100vw;
    margin-left:calc(50% - 50vw);
  }
  #shikoku-mizu .contrast-row__body{
    max-width:none;
    padding:0 8%;
  }
  #shikoku-mizu .contrast-row--reverse .contrast-row__body{
    padding:0 8%;
  }
  #shikoku-mizu .shikoku-map-deco{
    display:block;
    position:absolute;
    z-index:3;
    top:55%;
    left:50%;
    width:min(80vw, 360px);
    transform:translate(-50%, -50%) rotate(-6deg);
    pointer-events:none;
  }
}

/* ---- desktop: staggered collage layout with Shikoku map peeking through ---- */
@media(min-width:1101px){
  #shikoku-mizu .contrast-cards{
    gap:0;
  }
  #shikoku-mizu .shikoku-map-deco{
    display:block;
    position:absolute;
    z-index:3;
    top:33%;
    left:28%;
    width:44%;
    max-width:640px;
    transform:rotate(-6deg);
    pointer-events:none;
  }
  #shikoku-mizu .shikoku-map-deco img{
    display:block;
    width:100%;
    height:auto;
    opacity:.7;
  }
  #shikoku-mizu .contrast-row,
  #shikoku-mizu .contrast-row--reverse{
    display:block;
    position:relative;
    min-height:34vw;
    max-height:560px;
  }
  #shikoku-mizu .contrast-row--reverse{
    margin-top:clamp(20px, 2.5vw, 48px);
  }
  #shikoku-mizu .contrast-row__media,
  #shikoku-mizu .contrast-row--reverse .contrast-row__media{
    position:absolute;
    z-index:1;
    top:0;
    grid-column:auto;
    grid-row:auto;
  }
  #shikoku-mizu .contrast-row__media{
    left:0;
    width:63%;
    height:86%;
  }
  #shikoku-mizu .contrast-row--reverse .contrast-row__media{
    right:0;
    left:auto;
    top:auto;
    bottom:0;
    width:63%;
    height:86%;
  }
  #shikoku-mizu .contrast-row__media img,
  #shikoku-mizu .contrast-row--reverse .contrast-row__media img{
    width:100%;
    height:100%;
    min-height:0;
    aspect-ratio:auto;
    object-fit:cover;
    box-shadow:0 20px 46px rgba(15,45,60,.14);
  }
  #shikoku-mizu .contrast-row__body,
  #shikoku-mizu .contrast-row--reverse .contrast-row__body{
    position:absolute;
    z-index:2;
    max-width:none;
    width:46%;
    margin-left:0;
    padding:clamp(42px, 3.9vw, 66px) clamp(30px, 5vw, 60px);
    background:#fff;
    box-shadow:0 24px 60px rgba(15,45,60,.12);
  }
  #shikoku-mizu .contrast-row__body{
    right:0;
    top:14%;
  }
  #shikoku-mizu .contrast-row--reverse .contrast-row__body{
    left:0;
    right:auto;
    bottom:10%;
    top:auto;
  }
}

.highlight-card{
  margin-top:40px;
  background:linear-gradient(120deg, rgba(143,224,210,.18), rgba(127,198,236,.18));
  border-radius:24px; padding:clamp(26px,4vw,40px);
}
.highlight-card h3{
  font-size:1.2rem;
  font-weight:700;
  text-align:left;
  color:var(--ink);
  margin-bottom:14px;
}
.highlight-card__inner{
  /*display:flex;
  align-items:flex-start;
  gap:clamp(20px, 3vw, 40px);*/
}
.highlight-card__content{
  /*flex:1;*/
  min-width:0;
  margin:0 0 1rem;
}
.highlight-card__content p{
  font-size:16px;
  color:var(--body);
}
.highlight-card__media{
 
  margin:0;
}
.highlight-card__media img{
  display:block;
  width:100%;
  height:auto;
  border-radius:10px;
}
.highlight-card .chui{
  font-size: 0.75rem;
  padding-top: 0.5rem;
}
@media(max-width:760px){
  .highlight-card__inner{ flex-direction:column; }
  .highlight-card__media{ width:min(100%, 280px); margin:0 auto; }
  .highlight-card h3{
    text-align:center;
    padding-top:10px;
  }
}

/* =========================================================
   節水チェック
   ========================================================= */
#check .sec-sub{
  max-width:none;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}
@media(max-width:600px){
  #check .sec-sub{ text-align:left; }
  .check-cta p{ text-align:left; }
  #check .fine-print{ text-align:left; }
}
.checklist{ display:flex; flex-direction:column; gap:14px; margin-bottom:24px; }
.ci{
  display:flex; align-items:flex-start; gap:16px;
  background:#fff; border:1px solid var(--line); border-radius:18px;
  padding:20px 22px; cursor:pointer;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.ci:hover{ border-color:var(--key-soft); box-shadow:0 10px 26px rgba(20,90,140,.08); }
.ci input{ position:absolute; opacity:0; pointer-events:none; }
.bx{
  flex:none;
  width:24px;
  height:24px;
  margin-top:calc((1.1rem * 1.55 - 24px) / 2);
  border:1.5px solid var(--key-soft);
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .2s ease, border-color .2s ease;
}
.bx::after{
  content:""; width:12px; height:8px;
  border-left:2px solid #fff; border-bottom:2px solid #fff;
  transform:rotate(-45deg) translateY(-1px); opacity:0; transition:opacity .2s ease;
}
.ci input:checked ~ .bx{ background:linear-gradient(120deg,var(--grad-1),var(--grad-3)); border-color:transparent; }
.ci input:checked ~ .bx::after{ opacity:1; }
.ci-text strong{
  display:block;
  font-size:1.1rem;
  font-weight:700;
  line-height:1.55;
  color:var(--key);
  margin-bottom:6px;
}
.ci-text small{
  display:block;
  font-size:.9rem;
  color:var(--body-soft);
  line-height:1.7;
}

.check-meter{
  font-size:16px;
  font-weight:500;
  color:var(--key);
  letter-spacing:.04em;
  margin-bottom:48px;
  text-align:center;
}

.check-cta{
  /* background:var(--mist); */
  border-radius:24px;
  padding:0;
  text-align:center;
}
.check-cta p{
  color:var(--body);
  font-size:1rem;
  margin:0 auto 24px;
}
#check .btn{
  margin-bottom:2rem;
  font-size:1.1rem;
  font-weight:700;
  padding-left:68px;
  padding-right:68px;
}
#check .fine-print{
  font-size:.85rem;
  color:var(--body-soft);
  margin-top:18px;
  margin-bottom:0 !important;
}

/* =========================================================
   イベント情報
   ========================================================= */
.event-sub{ margin-bottom:7rem; }
.event-sub:last-child{ margin-bottom:0; }
.event-sub__head{
  position:relative;
  text-align:center;
  margin-bottom:2.5rem;
  padding-top:60px;
}
.event-sub__drop{
  position:absolute;
  top:0;
  left:50%;
  height:calc(52px * 1.3);
  width:auto;
  transform:translate(-50%, -20%);
}
.event-sub__head h3{
  font-size:calc(1.4rem * 1.2);
  font-weight:700;
  letter-spacing:.06em;
  color:var(--ink);
  margin-bottom:0;
  padding-bottom:0;
  border-bottom:none;
  line-height:1.4;
}
.event-sub__head h3 small{
  display:block;
  line-height:1.4;
}
.event-sub p{
  color:var(--body);
  font-size:1rem;
  margin-bottom:1rem;
  max-width:100%;
}
.event-sub__inner{
  display:block;
  margin-bottom:1rem;
}
.event-sub__honbun{
  overflow:hidden;
}
.event-sub__honbun::after{
  content:"";
  display:table;
  clear:both;
}
.event-sub__honbun p:last-child{ margin-bottom:0; }
.event-sub__honbun p strong{
  color:var(--key);
}
.event-sub__media{
  float:right;
  width:30%;
  margin:0 0 1.25em 2.25em;
  border-radius:10px;
  overflow:hidden;
}
#quest .event-sub__media{
  width:25%;
}
.event-sub__media img{
  display:block;
  width:100%;
  height:auto;
  border-radius:10px;
}
@media(max-width:760px){
  .event-sub__media,
  #quest .event-sub__media{
    float:none;
    width:min(100%, 280px);
    margin:0 auto 1.25em;
  }
}

.showroom-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin:32px 0 3rem;
}
#panel .sr-card{
  background:#fff;
  border:none;
  border-radius:16px;
  padding:16px 16px;
  text-align:center;
  box-shadow:0 3px 30px rgba(15,45,40,.08);
}
#panel .sr-card__media{
  aspect-ratio:4 / 3;
  margin:0 0 12px;
  border-radius:10px;
  overflow:hidden;
  background:linear-gradient(135deg, rgba(143,224,210,.25), rgba(127,198,236,.25));
}
#panel .sr-card__media img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
#panel .sr-card p{
  font-size:.85rem;
  color:var(--ink);
  margin-bottom:0;
}

@media(max-width:600px){
  .showroom-grid{ grid-template-columns:repeat(2,1fr); }
}

.info-table{ margin:2.4rem 0; border-top:1px solid var(--line); }
.info-row{
  display:grid; grid-template-columns:120px 1fr; gap:24px;
  padding:16px 0; border-bottom:1px solid var(--line);
}
.info-key{
  font-size:1rem;
  font-weight:500;
  color:var(--key);
}
.info-val{
  font-size:1rem;
  color:var(--body);
}
.info-location{
  display:block;
}
.info-location + .info-location{ margin-top:.75rem; }
.info-location a{
  color:var(--key);
  text-decoration:underline;
}
.info-map{
  display:inline-block;
  margin-left:.6em;
  font-size:.85rem;
  font-weight:500;
  color:var(--key);
  text-decoration:underline;
  text-underline-offset:3px;
}
.info-map:hover{ opacity:.75; }

@media(max-width:600px){
  .info-row{ grid-template-columns:1fr; gap:6px; }
}
#quest .quest-card{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  margin-top:1.5rem;
}
#quest .quest-card__media{
  margin:0;
}
#quest .quest-card__media img{
  display:block;
  width:100%;
  height:auto;
  border-radius:10px;
}
@media(max-width:760px){
  #quest .quest-card{
    grid-template-columns:repeat(2,1fr);
  }
}

#event4 .event4-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:30px;
  max-width:680px;
  margin:0 auto;
  text-align:center;
}
#event4 .event4-card__media{
  margin:0;
}
#event4 .event4-card__media img{
  display:block;
  width:100%;
  height:auto;
  border-radius:10px;
}
#event4 .event4-grid p{
  margin-top:10px;
  font-size:.9rem;
  line-height:1.2;
}
@media(max-width:760px){
  #event4 .event4-grid{
    grid-template-columns:1fr;
  }
}
/* =========================================================
   水環境基金
   ========================================================= */
.kikin-layout{
  display:flex; flex-direction:column; align-items:center; gap:40px; margin-bottom:48px;
}
.kikin-text{ width:100%; text-align:center; }
.kikin-text p{ color:var(--body); font-size:1rem; max-width:none; }
.kikin-text a{
  color:var(--key);
  text-decoration:underline;
  text-underline-offset:3px;
}
.kikin-logo{ display:block; width:100%; max-width:350px; height:auto; margin:0 auto; }

.kikin-stats{
  display:grid; grid-template-columns:repeat(5,1fr); gap:16px; margin-bottom:40px;
}
.kstat{
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(120deg, var(--key), var(--grad-1)) border-box;
  border:3px solid transparent;
  border-radius:20px;
  padding:26px 16px;
  text-align:center;
}
.knum{
  display:block; font-size:clamp(20px,2.4vw,26px); font-weight:700;
  background:linear-gradient(120deg,var(--key),var(--grad-1));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  line-height:1.2;
}
.klabel{
  display:block;
  font-size:0.9rem;
  color:var(--body);
  line-height:1.6;
  margin-bottom:10px;
  font-weight:700;
}
.klabel small{ color:var(--body-soft); font-size:11.5px; }
.kunit{ display:block; color:var(--body-soft); font-size:11.5px; }

.kikin-links{
  display:flex; flex-wrap:wrap; justify-content:center; gap:16px;
  margin-bottom:1.5rem;
}

@media(max-width:860px){
  .kikin-text{ text-align:left; }
  .kikin-stats{ grid-template-columns:repeat(3,1fr); }
}
@media(max-width:520px){
  .kikin-stats{ grid-template-columns:repeat(2,1fr); }
}

/* =========================================================
   活動レポート
   ========================================================= */
.report-grid{ display:grid; grid-template-columns:1fr; gap:18px; }
.report-card{
  display:grid;
  grid-template-columns:30% 65%;
  gap:5%;
  align-items:flex-start;
  background:#fff;
  border:none;
  border-radius:20px;
  padding:3%;
  text-align:left;
  box-shadow:0 3px 30px rgba(15,45,60,.08);
}
.report-card__media{
  margin:0;
  width:100%;
  border-radius:14px;
  overflow:hidden;
}
.report-card__media img{
  display:block;
  width:100%;
  height:auto;
  border-radius:14px;
}
.report-card__body{
  width:100%;
  padding:10px 0 10px 0;
}
.report-card__meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 12px;
  margin-bottom:12px;
  font-size:0.9rem;
  font-weight:700;
  line-height:1.5;
}
.report-card__meta time{ color:var(--key); }
.report-card__place{
  color:var(--body);
  padding-left:12px;
  border-left:1px solid var(--line);
}
.report-ph{
  display:flex; align-items:center; justify-content:center;
  width:100%;
  aspect-ratio:4/3; border-radius:14px;
  background:linear-gradient(135deg, rgba(143,224,210,.22), rgba(127,198,236,.22));
  font-size:12px; letter-spacing:.1em; color:var(--key-soft); font-weight:500;
}
.report-card__body p:not(.report-card__meta){
  font-size:0.9rem;
  color:var(--body-soft);
  margin-bottom:0;
  text-align:left;
  line-height:1.8;
}

@media(max-width:860px){
  .report-card{
    grid-template-columns:1fr;
    gap:14px;
  }
}

/* =========================================================
   メディア / お問い合わせ
   ========================================================= */
.media-panel{ display:grid; grid-template-columns:1fr; gap:24px; }
.mp{
  width:100%;
  background:#fff;
  border-radius:24px;
  padding:clamp(26px, 4vw, 40px);
  text-align:center;
}
.mp h3{
  font-size:1rem;
  font-weight:700;
  letter-spacing:.05em;
  color:var(--key);
  margin-bottom:0.8rem;
}
.material-list li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:1rem;
  color:var(--body);
  padding:5px 0;
  line-height:1.6;
}
.material-list li::before{
  content:"";
  flex:none;
  width:8px;
  height:5px;
  margin-top:0.45em;
  border-left:2px solid var(--key);
  border-bottom:2px solid var(--key);
  transform:rotate(-45deg);
}
.contact-org{
  font-size:0.9rem;
  color:var(--ink);
  margin-bottom:10px;
}
.contact-lines{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:12px 40px;
  margin-bottom:5px;
}
.contact-line{
  font-size:0.9rem;
  color:var(--ink);
  margin-bottom:0;
}
.contact-line span{
  display:inline-block;
  min-width:56px;
  font-size:0.9rem;
  font-weight:500;
  color:var(--key);
  letter-spacing:.06em;
  margin-right:10px;
}
.contact-tel{
  font-size:1.35rem;
  font-weight:700;
  color:var(--ink);
  letter-spacing:.04em;
  text-decoration:none;
}
.contact-tel:hover{ color:var(--key); }
.contact-line .btn{
  padding:8px 18px;
  font-size:13px;
  letter-spacing:.04em;
  vertical-align:middle;
  box-shadow:0 4px 12px rgba(90,168,221,.28);
}
.contact-line .btn:hover{
  box-shadow:0 6px 16px rgba(90,168,221,.36);
}
.contact-hours{ font-size:13.5px; color:var(--body-soft); margin-top:12px; }

@media(max-width:600px){
  .contact-lines{
    flex-direction:column;
    gap:10px;
  }
}

@media(max-width:760px){
  .media-panel{ grid-template-columns:1fr; }
}

/* =========================================================
   FAQ
   ========================================================= */
.accordion{ border-top:1px solid var(--line); }
.acc-item{ border-bottom:1px solid var(--line); }
.acc-q{
  width:100%; display:flex; align-items:center; gap:18px;
  padding:24px 4px; text-align:left;
}
.q-mark{
  position:relative;
  flex:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:52px;
  background:url("../images/h_menu_back.png") center / contain no-repeat;
  font-size:11px;
  font-weight:700;
  color:#fff;
  line-height:1;
  padding-top:5px;
  letter-spacing:0;
}
.q-text{
  flex:1;
  font-size:1rem;
  font-weight:700;
  color:var(--key);
  line-height:1.7;
}
.q-icon{ position:relative; width:16px; height:16px; flex:none; }
.q-icon::before, .q-icon::after{
  content:""; position:absolute; background:var(--key-soft); border-radius:2px;
}
.q-icon::before{ left:0; top:7px; width:16px; height:1.5px; }
.q-icon::after{ left:7px; top:0; width:1.5px; height:16px; transition:transform .3s ease; }
.acc-q[aria-expanded="true"] .q-icon::after{ transform:rotate(90deg) scaleX(0); }

.acc-a{ max-height:0; overflow:hidden; transition:max-height .4s ease; }
.acc-a p{ padding:0 4px 26px 38px; font-size:1rem; color:var(--body); }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{
  background:var(--key);
  color:rgba(255,255,255,.9);
  padding:64px 0 32px;
}
.footer-inner{ display:flex; flex-direction:column; align-items:flex-start; gap:20px; }
.footer-logos{ display:flex; align-items:center; gap:28px; }
.footer-logo{
  height:46px;
  width:auto;
  filter:brightness(0) invert(1);
  opacity:1;
}
.footer-toto{
  height:30px;
  width:auto;
  filter:brightness(0) invert(1);
  opacity:1;
}
.footer-note{
  font-size:14px;
  color:rgba(255,255,255,.8);
  max-width:100%;
}
.footer-bottom{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:13px;
  color:rgba(255,255,255,.75);
  padding-top:24px;
  border-top:1px solid rgba(255,255,255,.12);
}
.footer-bottom a:hover{ color:#fff; }

/* =========================================================
   PAGE TOP
   ========================================================= */
.page-top{
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:200;
}
.page-top__link{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  width:68px;
  height:68px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--grad-1), var(--grad-2) 55%, var(--grad-3));
  color:#fff;
  box-shadow:0 8px 24px rgba(0,90,150,.28);
  font-size:9px;
  font-weight:700;
  letter-spacing:.1em;
  line-height:1.2;
  text-align:center;
  transition:transform .25s ease, box-shadow .25s ease, opacity .25s ease;
}
.page-top__link:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(0,90,150,.38);
  opacity:.95;
}
.page-top__icon{
  flex:none;
  width:18px;
  height:18px;
}
.page-top__label{
  display:block;
  transform:scale(.95);
}

@media(max-width:600px){
  .acc-q{ gap:12px; }
  .page-top{
    right:16px;
    bottom:max(16px, env(safe-area-inset-bottom));
  }
  .page-top__link{
    width:60px;
    height:60px;
    font-size:8px;
  }
  .page-top__icon{
    width:16px;
    height:16px;
  }
}

/* =========================================================
   RESPONSIVE HELPERS
   ========================================================= */
.sp-only{ display:none; }
.br-pc::before{
  content:"\A";
  white-space:pre;
}
@media(max-width:600px){
  .sp-only{ display:inline; }
  .br-pc::before{ content:none; }
}

@media(prefers-reduced-motion:reduce){
  .reveal{ transition:none; opacity:1; transform:none; }
}