/* ===========================================================
   声あつめ｜統一運動意識調査機関 設立準備室
   シグネチャー要素＝「声の吹き出しが集まってくる」モチーフ
   =========================================================== */

:root{
  --bg: #FFFBF2;
  --bg-soft: #FBF1E4;
  --bg-line: #F2F8F6;
  --main: #4F7C82;
  --main-deep: #33565B;
  --main-pale: #E4EEEC;
  --accent: #E08E6D;
  --accent-deep: #BE6B49;
  --text: #3A362F;
  --text-sub: #726A5B;
  --bubble-1: #FBD9BE;
  --bubble-2: #CFE8E1;
  --bubble-3: #FFDCE6;
  --bubble-4: #D7E6F5;
  --line-green: #06C755;
  --line-text: #06341C;
  --focus: #F2A541;
  --border: #E7DCC8;

  --radius-s: 10px;
  --radius-m: 18px;
  --radius-l: 30px;
  --shadow-soft: 0 14px 32px -18px rgba(51,86,91,.45);

  --font-display: 'Zen Maru Gothic','Hiragino Maru Gothic ProN','BIZ UDPGothic',sans-serif;
  --font-body: 'Noto Sans JP','Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;}
}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{max-width:100%;display:block;}
a{color:inherit;}

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

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

:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:2px;
}

/* ---------- ヘッダー ---------- */
.site-header{
  background:rgba(255,251,242,.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:100;
}
.site-header__inner{
  display:flex;align-items:center;justify-content:space-between;
  padding-top:14px;padding-bottom:14px;
}
.brand{
  display:flex;align-items:center;gap:8px;
  text-decoration:none;
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.25rem;
  color:var(--main-deep);
}
.brand__bubble{
  width:14px;height:14px;border-radius:50% 50% 50% 4px;
  background:var(--accent);
  display:inline-block;
}
.site-nav{
  display:flex;gap:18px;
  font-size:.92rem;
}
.site-nav a{
  text-decoration:none;
  color:var(--text-sub);
  padding:8px 2px;
  border-bottom:2px solid transparent;
}
.site-nav a:hover,.site-nav a:focus-visible{
  color:var(--main-deep);
  border-bottom-color:var(--accent);
}
@media (max-width:640px){
  .site-nav{display:none;}
}

/* ---------- 共通セクション ---------- */
.section{
  padding:64px 0;
}
.section--soft{background:var(--bg-soft);}
.section--line{background:var(--bg-line);}

.section__title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(1.5rem,1.1rem + 1.5vw,2rem);
  display:flex;align-items:center;gap:10px;
  margin:0 0 28px;
  color:var(--main-deep);
}
.section__bubble{
  width:18px;height:18px;flex:none;
  border-radius:50% 50% 50% 4px;
  background:var(--accent);
}
.section__lead{
  color:var(--text-sub);
  margin:-12px 0 28px;
  font-size:.95rem;
}

/* ---------- ヒーロー ---------- */
.hero{
  padding:72px 0 56px;
  background:var(--bg);
}
.hero__inner{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:40px;
  align-items:center;
}
@media (max-width:860px){
  .hero__inner{grid-template-columns:1fr;text-align:center;}
  .hero__visual{order:-1;max-width:280px;margin:0 auto;}
}
.kicker{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--main-pale);
  color:var(--main-deep);
  font-size:.85rem;font-weight:700;
  padding:7px 16px 7px 12px;
  border-radius:999px;
  margin:0 0 18px;
}
.kicker__bubble{
  width:10px;height:10px;border-radius:50%;
  background:var(--accent);display:inline-block;
}
.hero__title{
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(2.6rem,2rem + 3vw,4rem);
  line-height:1.15;
  margin:0 0 18px;
  color:var(--main-deep);
}
.hero__lead{
  font-size:clamp(1.1rem,1rem + .4vw,1.35rem);
  font-weight:700;
  line-height:1.7;
  margin:0 0 14px;
}
.hero__sub{
  color:var(--text-sub);
  margin:0 0 30px;
  font-size:1rem;
}
@media (max-width:860px){
  .hero__sub{max-width:460px;margin-inline:auto;}
}

/* 吹き出しクラスター（シグネチャー要素） */
.bubble-cluster{width:100%;height:auto;}
.bubble-cluster__ring{
  fill:none;stroke:var(--main-pale);stroke-width:2;stroke-dasharray:6 10;
}
.bb{
  opacity:.92;
}
.bb--1{fill:var(--bubble-1);}
.bb--2{fill:var(--bubble-2);}
.bb--3{fill:var(--bubble-3);}
.bb--4{fill:var(--bubble-4);}
.bb--core{fill:var(--main);}
.bubble-cluster__group .bb{
  animation:float 6s ease-in-out infinite;
  transform-box:fill-box;
  transform-origin:center;
}
.bb--2{animation-delay:.6s;}
.bb--3{animation-delay:1.2s;}
.bb--4{animation-delay:1.8s;}
.bb--core{animation:none;}
@keyframes float{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-6px);}
}

/* ---------- ボタン ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.02rem;
  padding:14px 26px;
  min-height:48px;
  border-radius:999px;
  text-decoration:none;
  border:none;
  cursor:pointer;
}
.btn__icon{width:22px;height:22px;flex:none;}
.btn--line{
  background:var(--line-green);
  color:var(--line-text);
  box-shadow:var(--shadow-soft);
}
.btn--line:hover{filter:brightness(1.04);}
.btn--disabled{
  opacity:.72;
  cursor:not-allowed;
}
.btn--disabled:hover{filter:none;}

.badge{
  display:inline-flex;align-items:center;
  font-size:.88rem;font-weight:700;
  padding:7px 16px;
  border-radius:999px;
  margin:0 0 16px;
}
.badge--wait{
  background:var(--bubble-1);
  color:var(--accent-deep);
}

/* ---------- 声あつめとは ---------- */
.about__grid{
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:32px;
  align-items:start;
}
@media (max-width:760px){
  .about__grid{grid-template-columns:1fr;}
}
.about__text p{margin:0 0 16px;}
.about__text p:last-child{margin-bottom:0;}
.about__note{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius-m);
  padding:24px;
}
.about__note-label{
  font-family:var(--font-display);
  font-weight:700;
  color:var(--accent-deep);
  margin:0 0 10px;
  font-size:.95rem;
}
.about__note p:last-child{margin:0;color:var(--text-sub);font-size:.95rem;}

/* ---------- ステップ（ジグザグ・カード3列の手癖を避ける） ---------- */
.steps{
  list-style:none;
  margin:0 0 28px;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:18px;
}
.steps__item{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:18px;
  align-items:start;
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius-m);
  padding:22px 26px;
  max-width:720px;
}
.steps__item--alt{
  margin-left:auto;
  background:var(--main-pale);
  border-color:transparent;
}
@media (max-width:640px){
  .steps__item,.steps__item--alt{margin-left:0;max-width:none;}
}
.steps__num{
  width:42px;height:42px;flex:none;
  border-radius:50% 50% 50% 6px;
  background:var(--main);
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);
  font-weight:900;
  font-size:1.1rem;
}
.steps__item h3{
  margin:0 0 6px;
  font-family:var(--font-display);
  font-size:1.08rem;
}
.steps__item p{margin:0;color:var(--text-sub);}
.steps__note{
  color:var(--text-sub);
  font-size:.92rem;
  border-top:1px dashed var(--border);
  padding-top:18px;
}

/* ---------- LINE登録 ---------- */
.line__wrap{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:36px;
  align-items:center;
}
@media (max-width:760px){
  .line__wrap{grid-template-columns:1fr;}
}
.line__text p{color:var(--text-sub);margin:0 0 22px;}
.line__qr{display:flex;justify-content:center;}
.qr-placeholder{
  width:180px;
  background:#fff;
  border:2px dashed var(--border);
  border-radius:var(--radius-m);
  padding:18px;
  text-align:center;
}
.qr-placeholder__frame{fill:none;stroke:var(--text-sub);stroke-width:2;}
.qr-placeholder__mark{fill:var(--text-sub);opacity:.5;}
.qr-placeholder p{
  margin:10px 0 0;
  font-size:.85rem;
  color:var(--text-sub);
  font-weight:700;
}

/* ---------- タイムライン ---------- */
.timeline{
  list-style:none;
  margin:0;padding:0;
  border-left:3px dashed var(--border);
  padding-left:28px;
  display:flex;flex-direction:column;gap:26px;
}
.timeline__item{position:relative;}
.timeline__item::before{
  content:"";
  position:absolute;
  left:-35px;top:4px;
  width:14px;height:14px;
  border-radius:50% 50% 50% 4px;
  background:var(--accent);
}
.timeline__date{
  display:inline-block;
  font-family:var(--font-display);
  font-weight:700;
  color:var(--main-deep);
  margin-bottom:4px;
}
.timeline__item p{margin:0;color:var(--text-sub);}

/* ---------- 運営者 ---------- */
.org-table{
  margin:0;
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius-m);
  overflow:hidden;
  max-width:620px;
}
.org-table__row{
  display:grid;
  grid-template-columns:140px 1fr;
  gap:16px;
  padding:16px 24px;
  border-bottom:1px solid var(--border);
}
.org-table__row:last-child{border-bottom:none;}
.org-table__row dt{
  font-weight:700;
  color:var(--main-deep);
  margin:0;
}
.org-table__row dd{margin:0;color:var(--text);}
@media (max-width:480px){
  .org-table__row{grid-template-columns:1fr;gap:4px;}
}

/* ---------- フッター ---------- */
.site-footer{
  background:var(--main-deep);
  color:#F2EFE6;
  padding:28px 0;
}
.site-footer__inner p{
  margin:0;
  font-size:.88rem;
  text-align:center;
}

/* ---------- フェードイン ---------- */
.fade-in{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .6s ease, transform .6s ease;
}
.fade-in.is-visible{
  opacity:1;
  transform:translateY(0);
}
@media (prefers-reduced-motion: reduce){
  .fade-in{opacity:1;transform:none;}
}