/* ============================================================
   NEBULA COLLECTIVE サイト共通【PC用】（トップ・お知らせ・これまでの活動）
   画面幅901px以上だけで読み込む。スマホ用（nebula-sp.css）とは別ファイルなので、
   ここを直してもスマホには影響しない
   テーマ：高校生の手づくり感
   方眼ノートの地に、テープで貼った写真、蛍光ペンの線、付箋、手描きの落書き
   site.css は読み込まず、このファイルだけで完結させる
   ============================================================ */

:root{
  --ink:#152050;          /* 文字。紺のペン */
  --blue:#2348D8;
  --yellow:#FFE34D;       /* 蛍光ペン */
  --pink:#FF77A6;
  --mint:#2FCB9C;
  --sky:#4FC2EE;
  --orange:#FF9A3C;
  /* 付箋の色（文字が読めるよう淡く） */
  --s-yellow:#FFF27D;
  --s-pink:#FFCADB;
  --s-mint:#C2F2E0;
  --s-sky:#CDECFB;
  /* マスキングテープ（半透明） */
  --t-yellow:rgba(255,222,64,.8);
  --t-pink:rgba(255,119,166,.62);
  --t-mint:rgba(47,203,156,.6);
  --t-sky:rgba(79,194,238,.65);
  --muted:#59628A;
  --grid:rgba(35,72,216,.065);
  --err:#E0344A;

  --jp:'Noto Sans JP','Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif;
  --hand:'Yusei Magic','Noto Sans JP',sans-serif;
  --side:clamp(18px,4.4vw,56px);
  --wrap:1200px;

  /* 蛍光ペンの線。手で引いたように端を不揃いにする */
  --hl-yellow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath d='M4 13C46 7 128 4 196 10L194 33C128 38 60 37 6 31Z' fill='%23FFE34D'/%3E%3C/svg%3E");
  --hl-pink:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath d='M4 13C46 7 128 4 196 10L194 33C128 38 60 37 6 31Z' fill='%23FFB3CC'/%3E%3C/svg%3E");
  --hl-mint:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath d='M4 13C46 7 128 4 196 10L194 33C128 38 60 37 6 31Z' fill='%23A6EDD3'/%3E%3C/svg%3E");
  --hl-sky:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath d='M4 13C46 7 128 4 196 10L194 33C128 38 60 37 6 31Z' fill='%23B4E3F8'/%3E%3C/svg%3E");
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:var(--jp);color:var(--ink);
  font-size:15px;font-weight:500;line-height:1.95;letter-spacing:.05em;
  -webkit-font-smoothing:antialiased;
  /* 方眼ノート */
  background-color:#fff;
  background-image:
    linear-gradient(var(--grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:30px 30px;
  overflow-x:hidden;
}
@supports (overflow:clip){body{overflow-x:clip}}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:3px solid var(--sky);outline-offset:3px}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--side)}
@supports (padding-left:max(0px,env(safe-area-inset-left))){
  .wrap{padding-left:max(var(--side),env(safe-area-inset-left));padding-right:max(var(--side),env(safe-area-inset-right))}
}

/* ---------- 部品 ---------- */
.hand{font-family:var(--hand);font-weight:400;letter-spacing:.04em}

/* 蛍光ペン */
.hl{
  background:var(--hl-yellow) no-repeat 0 64%/100% 58%;
  padding:0 .1em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}
.hl.pink{background-image:var(--hl-pink)}
.hl.mint{background-image:var(--hl-mint)}
.hl.sky{background-image:var(--hl-sky)}

/* テープで貼った写真 */
.ph{
  position:relative;display:block;margin:0;
  background:#fff;padding:clamp(8px,.85vw,12px);
  box-shadow:0 16px 30px -14px rgba(21,32,80,.38),0 2px 6px rgba(21,32,80,.08);
  transform:rotate(var(--r,0deg));
  transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s;
}
.ph img{width:100%;height:100%;object-fit:cover}
.ph::before{
  content:"";position:absolute;z-index:3;
  top:-13px;left:50%;
  width:clamp(68px,7vw,108px);height:26px;
  transform:translateX(-50%) rotate(var(--tr,-3deg));
  background:var(--tape,var(--t-yellow));
  clip-path:polygon(3% 0,97% 0,100% 18%,97% 36%,100% 54%,97% 72%,100% 90%,97% 100%,3% 100%,0 82%,3% 64%,0 46%,3% 28%,0 10%);
}
a:hover>.ph,a:focus-visible>.ph{transform:rotate(0deg) translateY(-6px);box-shadow:0 24px 40px -16px rgba(21,32,80,.42),0 3px 8px rgba(21,32,80,.1)}
.tp-yellow{--tape:var(--t-yellow)}
.tp-pink{--tape:var(--t-pink)}
.tp-mint{--tape:var(--t-mint)}
.tp-sky{--tape:var(--t-sky)}

/* 付箋 */
.sticky{
  position:relative;background:var(--c,var(--s-yellow));
  padding:clamp(18px,2vw,26px) clamp(18px,2vw,26px) clamp(20px,2.2vw,28px);
  box-shadow:0 14px 18px -14px rgba(21,32,80,.5);
  transform:rotate(var(--r,0deg));
}
/* 付箋の上端の、のりの部分 */
.sticky::before{content:"";position:absolute;left:0;right:0;top:0;height:12px;background:rgba(255,255,255,.28)}

/* 手描きの落書き。スクロールで線が描かれる */
.doodle{position:absolute;pointer-events:none;overflow:visible}
.doodle path,.doodle ellipse{fill:none;stroke:var(--c,var(--blue));stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.js .doodle path,.js .doodle ellipse{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.3s cubic-bezier(.6,.05,.3,1) .25s}
.js .is-in .doodle path,.js .is-in .doodle ellipse,
.js .doodle.is-in path,.js .doodle.is-in ellipse{stroke-dashoffset:0}

/* ボタン：押せそうなシール */
.pill{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:var(--blue);color:#fff;
  border:2.5px solid var(--ink);border-radius:999px;
  padding:12px 26px;
  font-weight:900;font-size:14px;letter-spacing:.08em;line-height:1.3;white-space:nowrap;
  box-shadow:0 5px 0 var(--ink);
  transform:rotate(-1.5deg);
  transition:transform .2s ease,box-shadow .2s ease;
}
/* メンバーに参加ボタン（応募フォームへのリンク）は傾けず、まっすぐにする */
.pill:where([href^="https://forms.gle/4qPXj4DBKUXpqRsR7"]){transform:none}
@media (hover:hover){.pill:hover{transform:rotate(0deg) translateY(2px);box-shadow:0 3px 0 var(--ink)}}
.pill:active{transform:translateY(5px);box-shadow:0 0 0 var(--ink)}
.pill.is-yellow{background:var(--yellow);color:var(--ink)}
.pill.is-sm{padding:8px 18px;font-size:12.5px}

/* 文字だけのリンク。下に手描きの波線 */
.go{
  display:inline-flex;align-items:center;gap:6px;
  font-weight:900;font-size:13.5px;letter-spacing:.08em;color:var(--blue);
  padding-bottom:6px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 8' preserveAspectRatio='none'%3E%3Cpath d='M2 5Q12 1 22 5T42 5T62 5T82 5T102 5T118 5' fill='none' stroke='%232348D8' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 0 100%/100% 7px;
}

/* 小さなラベル（シール） */
.chip{
  display:inline-block;background:var(--c,var(--s-sky));
  border-radius:999px;padding:1px 10px;
  font-size:11px;font-weight:800;letter-spacing:.08em;line-height:1.7;
}

/* ---------- 見出し ---------- */
.sh{position:relative;margin-bottom:clamp(34px,4.2vw,60px)}
.sh-en{
  display:inline-block;font-family:var(--hand);
  font-size:clamp(20px,2vw,28px);line-height:1.2;color:var(--blue);
  transform:rotate(-4deg);margin-bottom:8px;
}
.sh-ja{font-weight:900;font-size:clamp(34px,5vw,66px);line-height:1.2;letter-spacing:.04em}
.sh .doodle{width:clamp(34px,3.4vw,48px);height:auto}
.sh.is-center{text-align:center}

.sec{position:relative;padding:clamp(76px,9vw,140px) 0}

/* ============================================================
   ヘッダー
   ============================================================ */
.hd{
  position:sticky;top:0;z-index:60;
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border-bottom:2px dashed rgba(21,32,80,.18);
}
.hd-in{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  height:clamp(62px,6.2vw,80px);
  max-width:1360px;margin:0 auto;padding:0 var(--side);
}
/* ロゴは紺色の透過画像をそのまま表示する（型抜き＝maskは、ファイルを直接開いたときなどに消えてしまうため使わない） */
.brand{
  display:block;flex:none;
  width:clamp(146px,13vw,190px);aspect-ratio:1621/307;
  background:url(../img/logo-ink.png) center/contain no-repeat;
}
.gnav{display:flex;align-items:center;gap:clamp(14px,1.8vw,26px)}
.gnav ul{display:flex;align-items:center;gap:clamp(14px,1.8vw,26px);list-style:none}
.gnav ul a{
  font-weight:700;font-size:13.5px;letter-spacing:.06em;
  padding:4px 2px;
  background:var(--hl-yellow) no-repeat 0 72%/0% 56%;
  transition:background-size .35s cubic-bezier(.2,.8,.2,1);
}
@media (hover:hover){.gnav ul a:hover{background-size:100% 56%}}
.ig{display:grid;place-items:center;width:36px;height:36px;color:var(--ink)}
.ig svg{width:22px;height:22px;display:block}
@media (hover:hover){.ig:hover{color:var(--blue)}}
.menu-btn{display:none}

/* スマホのメニューはPCでは使わない */
.spmenu{display:none}
.no-scroll{overflow:hidden}

/* ============================================================
   ヒーロー
   ============================================================ */
.hero{position:relative;padding:clamp(34px,4.6vw,72px) 0 clamp(84px,10vw,150px)}
.hero-grid{display:grid;grid-template-columns:1fr 1.06fr;gap:clamp(28px,4vw,64px);align-items:center}
.hero-copy{position:relative;z-index:2}
.hero .eyebrow{display:inline-block;font-size:clamp(15px,1.4vw,19px);font-weight:700;letter-spacing:.06em;color:var(--blue);margin-bottom:16px}
/* 1行ずつ折り返さずに置く。「沖縄を動か／す。」のように割れないようにする */
.hero h1{font-weight:900;font-size:clamp(36px,4.8vw,70px);line-height:1.22;letter-spacing:.02em}
.hero h1>span{display:block;white-space:nowrap}
.hero .sub{margin-top:clamp(18px,2.2vw,28px);font-weight:700;font-size:clamp(14px,1.22vw,17px);line-height:2}
.hero-cta{display:flex;align-items:center;gap:18px;margin-top:clamp(24px,2.8vw,36px)}

.collage{position:relative;aspect-ratio:1/.9}
.collage .ph{position:absolute}
.ph-main{left:5%;top:7%;width:84%;--r:2.2deg;z-index:1}
.ph-main img{aspect-ratio:3/2}
.ph-a{left:-3%;bottom:0;width:42%;--r:-6deg;z-index:2}
.ph-a img{aspect-ratio:4/3}
.ph-b{right:-1%;bottom:5%;width:37%;--r:5deg;z-index:2}
.ph-b img{aspect-ratio:1/1;object-position:50% 40%}

/* 写真が貼られる動き */
.js .collage .ph{opacity:0;transform:rotate(calc(var(--r,0deg) - 8deg)) translateY(24px) scale(.96)}
.is-loaded .collage .ph{opacity:1;transform:rotate(var(--r,0deg));transition:opacity .7s ease,transform .9s cubic-bezier(.2,.9,.25,1.15)}
.is-loaded .collage .ph-main{transition-delay:.15s}
.is-loaded .collage .ph-a{transition-delay:.45s}
.is-loaded .collage .ph-b{transition-delay:.65s}

/* ============================================================
   お知らせ
   ============================================================ */
.news-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(22px,2.6vw,36px)}
.ncard{display:block}
.ncard .ph img{aspect-ratio:3/2}
.ncard:nth-child(4n+1) .ph{--r:-2deg}
.ncard:nth-child(4n+2) .ph{--r:1.6deg;--tr:4deg}
.ncard:nth-child(4n+3) .ph{--r:-1.2deg}
.ncard:nth-child(4n+4) .ph{--r:2.2deg;--tr:-5deg}
.ncard .meta{display:flex;align-items:center;gap:10px;margin-top:18px}
.ncard .date{font-family:var(--hand);font-size:15px;color:var(--blue)}
.ncard h3{font-size:clamp(14px,1.12vw,16px);font-weight:900;line-height:1.65;margin-top:8px}
.ncard p{
  font-size:12.5px;line-height:1.85;color:var(--muted);margin-top:8px;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;
}
.ncard h3 span{background:var(--hl-yellow) no-repeat 0 72%/0% 56%;transition:background-size .4s cubic-bezier(.2,.8,.2,1);-webkit-box-decoration-break:clone;box-decoration-break:clone}
@media (hover:hover){.ncard:hover h3 span{background-size:100% 56%}}

/* ============================================================
   団体について
   ============================================================ */
.about-top{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(36px,5vw,84px);align-items:center}
.about-catch{font-weight:900;font-size:clamp(26px,3vw,42px);line-height:1.45;letter-spacing:.04em;margin-bottom:clamp(18px,2vw,28px)}
.about-body{font-size:clamp(14.5px,1.2vw,16px);font-weight:700;line-height:2.15}
.stickies{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,26px)}
.stickies .sticky:nth-child(3){grid-column:1 / -1;justify-self:center;width:72%}
.sticky dt{font-size:12px;font-weight:800;letter-spacing:.14em;margin-bottom:6px}
.sticky dd{font-weight:900;font-size:clamp(24px,2.6vw,34px);line-height:1.15;white-space:nowrap}
.sticky dd em{font-style:normal;font-size:.48em;font-weight:800;margin-left:.06em}
.sticky dd em.pre{margin:0 .06em 0 0}
/* 関わった高校生：「県内25校以上」の下に「400名以上」を2段で並べる */
.sticky dd+dd{margin-top:.12em}

/* 私たちの想い：罫線ノート */
.thoughts{margin-top:clamp(84px,10vw,150px);display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(30px,4.4vw,72px);align-items:center}
.thoughts-head{margin-bottom:clamp(18px,2vw,26px)}
.thoughts-head .sh-en{margin-bottom:4px}
.thoughts-head h3,.origin-head h3{font-weight:900;font-size:clamp(28px,3vw,42px);line-height:1.35;letter-spacing:.04em}
.page{
  --lh:clamp(32px,2.6vw,38px);
  --mg:clamp(46px,4.4vw,60px);
  position:relative;
  background-color:#fff;
  background-image:
    linear-gradient(90deg,transparent var(--mg),rgba(255,119,166,.5) var(--mg),rgba(255,119,166,.5) calc(var(--mg) + 2px),transparent calc(var(--mg) + 2px)),
    repeating-linear-gradient(to bottom,transparent 0,transparent calc(var(--lh) - 1px),rgba(35,72,216,.18) calc(var(--lh) - 1px),rgba(35,72,216,.18) var(--lh));
  padding:var(--lh) clamp(22px,3vw,44px) var(--lh) calc(var(--mg) + clamp(16px,1.6vw,24px));
  line-height:var(--lh);
  box-shadow:0 18px 34px -18px rgba(21,32,80,.4),0 2px 6px rgba(21,32,80,.06);
  transform:rotate(-.8deg);
}
.page p{font-size:clamp(14px,1.08vw,15.5px);font-weight:700}
.page p+p{margin-top:var(--lh)}
/* 私たちの想い：ノートに手で書いたような文字にする（手書き風の書体。行の高さは罫線に合わせたまま） */
.thoughts .page p{font-family:var(--hand);font-weight:400;font-size:clamp(15px,1.22vw,17.5px);letter-spacing:.04em}
/* ノートの穴 */
.page::before{
  content:"";position:absolute;left:clamp(14px,1.4vw,20px);top:var(--lh);bottom:var(--lh);width:12px;
  background:radial-gradient(circle at 50% 50%,#E8EBF4 0 5px,transparent 5.5px) 0 0/12px calc(var(--lh)*3) repeat-y;
}
.thoughts-photos{position:relative;display:grid;gap:clamp(20px,2.4vw,30px)}
.thoughts-photos .ph:nth-child(1){--r:3deg;width:92%;justify-self:end}
.thoughts-photos .ph:nth-child(2){--r:-4deg;--tr:5deg;width:84%;margin-top:-8%}
.thoughts-photos .ph img{aspect-ratio:4/3}

/* 名前の由来 */
.origin{margin-top:clamp(84px,10vw,150px)}
.origin-head{text-align:center;max-width:48em;margin:0 auto clamp(40px,4.6vw,64px)}
.origin-head p{margin-top:clamp(14px,1.6vw,20px);font-size:clamp(14.5px,1.2vw,16px);font-weight:700;line-height:2.1}
.origin-row{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,4vw,64px);align-items:center}
.origin-row+.origin-row{margin-top:clamp(48px,6vw,90px)}
.origin-row.is-rev{grid-template-columns:1.1fr .9fr}
.origin-row.is-rev .ph{order:2}
.origin-row .ph img{aspect-ratio:4/3}
.origin-row:not(.is-rev) .ph{--r:-2.4deg}
.origin-row.is-rev .ph{--r:2.4deg;--tr:4deg}
.word-head{position:relative;display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:clamp(14px,1.6vw,20px)}
.word .w{font-family:var(--hand);font-size:clamp(46px,5.6vw,80px);line-height:1;letter-spacing:.02em;color:var(--blue)}
.word .y{position:relative;font-weight:900;font-size:clamp(17px,1.6vw,22px);letter-spacing:.12em;padding:6px 14px}
.word .y .doodle{left:-10px;top:-6px;width:calc(100% + 20px);height:calc(100% + 12px);--c:var(--pink)}
.word p{font-size:clamp(14px,1.1vw,15.5px);font-weight:500;line-height:2.1}
.word p+p{margin-top:1em}

/* ============================================================
   進行中のプロジェクト／これからのイベント
   ============================================================ */
.pj-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(30px,4vw,56px)}
.pj{display:block}
.pj .ph{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;text-align:center;
  min-height:clamp(270px,24vw,330px);
  padding:clamp(34px,3.6vw,50px) clamp(24px,2.8vw,40px);
}
.pj:nth-child(odd) .ph{--r:-1.4deg}
.pj:nth-child(even) .ph{--r:1.6deg;--tr:4deg}
.pj .ph img{width:min(78%,300px);height:auto;object-fit:contain}
.pj .ph p{font-size:13.5px;font-weight:700;line-height:1.95;max-width:30em}

.events-note{display:flex;justify-content:center}
.events-note .sticky{--c:var(--s-yellow);--r:-2.5deg;width:min(440px,100%);text-align:center;padding:clamp(40px,5vw,64px) 24px}
.events-note .hand{font-size:clamp(28px,3.2vw,40px);line-height:1.3}

/* ============================================================
   これまでの活動
   ============================================================ */
.works-lead p{font-size:clamp(14px,1.15vw,15.5px);font-weight:700;line-height:2.15;max-width:62em}
.works-lead p+p{margin-top:1em}
.wk-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(64px,7vw,104px) clamp(32px,4vw,64px);
  margin-top:clamp(56px,6vw,90px);
}
.wk{display:block}
.wk .ph img{aspect-ratio:16/10}
.wk:nth-child(4n+1) .ph{--r:-1.8deg}
.wk:nth-child(4n+2) .ph{--r:1.5deg;--tr:4deg}
.wk:nth-child(4n+3) .ph{--r:1.2deg;--tr:-5deg}
.wk:nth-child(4n+4) .ph{--r:-1.6deg;--tr:3deg}
.wk .meta{display:flex;align-items:center;gap:10px;margin-top:22px}
.wk .date{font-family:var(--hand);font-size:16px;color:var(--blue)}
.wk h3{font-weight:900;font-size:clamp(20px,1.9vw,26px);line-height:1.45;letter-spacing:.03em;margin-top:8px}
.wk h3 span{background:var(--hl-yellow) no-repeat 0 72%/0% 56%;transition:background-size .45s cubic-bezier(.2,.8,.2,1);-webkit-box-decoration-break:clone;box-decoration-break:clone}
@media (hover:hover){.wk:hover h3 span{background-size:100% 56%}}
.wk p{font-size:13.5px;line-height:1.95;color:var(--muted);margin-top:10px}
.wk .stats{display:flex;flex-wrap:wrap;gap:14px 34px;margin-top:18px}
.wk .stats .n{font-weight:900;font-size:clamp(26px,2.4vw,34px);line-height:1.1}
.wk .stats .n em{font-style:normal;font-size:.44em;font-weight:800;margin-left:.1em}
.wk .stats .n .pre{font-size:.54em;margin-right:.06em}
.wk .stats .k{font-size:11.5px;font-weight:700;letter-spacing:.08em;color:var(--muted);margin-top:4px}
.wk .go{margin-top:18px}

/* ============================================================
   提携企業・団体
   ============================================================ */
.tier+.tier{margin-top:clamp(40px,4.4vw,60px)}
.tier-name{display:inline-block;font-weight:900;font-size:14px;letter-spacing:.14em;margin-bottom:18px}
.tier .soon{
  display:flex;align-items:center;justify-content:center;
  border:2px dashed rgba(21,32,80,.25);border-radius:14px;
  padding:26px 20px;font-family:var(--hand);font-size:18px;color:var(--muted);
}
.logos{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(10px,1.4vw,18px)}
.logos div{aspect-ratio:3/2;display:flex;align-items:center;justify-content:center;padding:clamp(6px,.8vw,12px)}
.logos img{width:var(--w,100%);height:auto;max-width:100%;max-height:100%;object-fit:contain}

/* ============================================================
   お問い合わせ
   ============================================================ */
/* フォームを中央に横長で置き、連絡先はその下に横並び */
.ct-grid{max-width:960px;margin:0 auto}
.ct-links{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,44px);margin-top:clamp(40px,4.6vw,64px)}
.ct-links .sticky{display:block;font-weight:900;font-size:clamp(14px,1.15vw,16px);letter-spacing:.03em;word-break:break-all;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.ct-links .sticky:nth-child(1){--c:var(--s-pink);--r:0deg}
.ct-links .sticky:nth-child(2){--c:var(--s-sky);--r:0deg}
.ct-links .sticky span{display:block;font-family:var(--hand);font-weight:400;font-size:15px;color:var(--blue);margin-bottom:4px}
/* 連絡先は傾けずにまっすぐ置く */
@media (hover:hover){.ct-links .sticky:hover{transform:translateY(-4px)}}

.form{position:relative;background:#fff;padding:clamp(28px,3.4vw,48px);box-shadow:0 18px 34px -18px rgba(21,32,80,.38),0 2px 6px rgba(21,32,80,.06)}
.form::before{
  content:"";position:absolute;top:-13px;left:50%;width:120px;height:26px;transform:translateX(-50%) rotate(-2deg);
  background:var(--t-mint);
  clip-path:polygon(3% 0,97% 0,100% 18%,97% 36%,100% 54%,97% 72%,100% 90%,97% 100%,3% 100%,0 82%,3% 64%,0 46%,3% 28%,0 10%);
}
.kinds{border:0;margin-bottom:24px}
.kinds legend,.field label{display:flex;align-items:center;gap:8px;font-weight:900;font-size:13.5px;letter-spacing:.06em;margin-bottom:10px}
.kinds legend i,.field label i{font-style:normal;background:var(--pink);color:#fff;border-radius:999px;font-size:10px;font-weight:800;padding:1px 8px;letter-spacing:.1em}
.field label em{font-style:normal;background:#EEF0F6;color:var(--muted);border-radius:999px;font-size:10px;font-weight:800;padding:1px 8px;letter-spacing:.1em}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip-in{position:relative;display:inline-block}
.chip-in input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.chip-in span{
  display:inline-block;background:#fff;border:2px solid var(--ink);border-radius:999px;
  padding:7px 15px;font-weight:800;font-size:12.5px;letter-spacing:.04em;cursor:pointer;
  transition:background .15s,color .15s,transform .2s;
}
.chip-in input:checked+span{background:var(--yellow);transform:rotate(-2deg)}
.chip-in input:focus-visible+span{outline:3px solid var(--sky);outline-offset:2px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.field{margin-top:22px}
.row .field{margin-top:0}
.field input,.field textarea{
  width:100%;font:inherit;font-size:16px;font-weight:500;letter-spacing:.03em;color:var(--ink);
  background:transparent;border:0;border-bottom:2.5px solid var(--ink);border-radius:0;
  padding:10px 4px;-webkit-appearance:none;appearance:none;
  transition:background .2s;
}
.field textarea{min-height:170px;line-height:1.9;resize:vertical;border:2.5px solid var(--ink);border-radius:10px;padding:12px 14px}
.field input:focus,.field textarea:focus{outline:none;background:rgba(255,227,77,.32)}
.field.is-bad input,.field.is-bad textarea{border-color:var(--err);background:rgba(224,52,74,.06)}
.err{font-size:12px;font-weight:700;color:var(--err);margin-top:6px}
.err:empty{display:none}
.count{font-size:11px;color:var(--muted);text-align:right;margin-top:4px}
.count.is-near{color:var(--err);font-weight:700}
.consent{display:flex;align-items:flex-start;gap:10px;margin-top:22px;padding:12px;border:2px dashed transparent;border-radius:10px;font-size:13px;line-height:1.8;cursor:pointer}
.consent.is-bad{border-color:var(--err)}
.consent input{flex:none;width:20px;height:20px;margin-top:3px;accent-color:var(--blue)}
.consent a{text-decoration:underline;text-underline-offset:3px}
.form .pill{margin-top:24px}
.form button[disabled]{opacity:.5;cursor:default}
.form-msg{margin-top:14px;font-weight:700;font-size:13.5px}
.form-msg.is-bad{color:var(--err)}

/* ============================================================
   フッター（ギザギザに切った紙）
   ============================================================ */
.ft{position:relative;background:var(--ink);color:#fff;margin-top:clamp(40px,5vw,72px);padding:clamp(52px,6vw,80px) 0 calc(28px + env(safe-area-inset-bottom))}
.ft::before{
  content:"";position:absolute;left:0;right:0;top:-14px;height:15px;
  background:
    linear-gradient(135deg,transparent 50%,var(--ink) 50%) 0 0/16px 15px repeat-x,
    linear-gradient(225deg,transparent 50%,var(--ink) 50%) 0 0/16px 15px repeat-x;
}
.ft-in{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:28px 40px}
.ft-logo{width:170px;height:auto}
.ft nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:12px 26px;font-weight:700;font-size:13px}
@media (hover:hover){.ft nav a:hover{color:var(--yellow)}}
.ft-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;margin-top:40px;padding-top:20px;border-top:1px dashed rgba(255,255,255,.25);font-size:11.5px;letter-spacing:.1em;color:rgba(255,255,255,.7)}
.ft-bottom a{text-decoration:underline;text-underline-offset:3px}

/* ============================================================
   スクロールで出す
   ============================================================ */
.js .rv{opacity:0;transform:translateY(26px);transition:opacity .85s cubic-bezier(.2,.8,.2,1),transform .95s cubic-bezier(.2,.8,.2,1)}
.js .rv.is-in{opacity:1;transform:none}
.js .rv[data-d="1"]{transition-delay:.1s}
.js .rv[data-d="2"]{transition-delay:.2s}
.js .rv[data-d="3"]{transition-delay:.3s}

@media (prefers-reduced-motion:reduce){
  .js .rv{opacity:1;transform:none;transition:none}
  .js .collage .ph{opacity:1;transform:rotate(var(--r,0deg));transition:none}
  .js .doodle path,.js .doodle ellipse{stroke-dashoffset:0;transition:none}
}

/* ============================================================
   タブレット・スマホ
   ============================================================ */
@media (max-width:1080px){.gnav ul .hide-md{display:none}}



/* ============================================================
   パソコンで開いたときだけ、全体をひと回り大きくする
   文字・写真・余白・テープまで同じ比率で拡大するので、組みは崩れない。
   マウス操作の端末に限り、タブレットやスマホには効かせない
   ============================================================ */
@media (min-width:1200px) and (hover:hover) and (pointer:fine){
  body{zoom:1.14}
  html{scroll-padding-top:100px}
}
@media (min-width:1600px) and (hover:hover) and (pointer:fine){
  body{zoom:1.24}
  html{scroll-padding-top:110px}
}

/* ============================================================
   アニメーション（手づくり感）
   ※ PC用・スマホ用の両方に同じものを入れている。片方だけ変えたいときは、そのファイルだけ直す
   ============================================================ */

/* ---- ヒーロー：文字が1文字ずつ跳ねて出て、蛍光ペンが引かれる ---- */
.hero h1 .ch{display:inline-block}
.js .hero h1 .ch{opacity:0;transform:translateY(.45em) rotate(-10deg) scale(.6)}
.is-loaded .hero h1 .ch{animation:ch-pop .6s cubic-bezier(.2,.9,.3,1.45) forwards;animation-delay:calc(var(--i,0) * 55ms + .1s)}
@keyframes ch-pop{to{opacity:1;transform:none}}
.js .hero h1 .hl{background-size:0% 58%}
.is-loaded .hero h1 .hl{background-size:100% 58%;transition:background-size .75s cubic-bezier(.6,.05,.3,1) 1.05s}
.js .hero .eyebrow,.js .hero .sub,.js .hero-cta{opacity:0;translate:0 16px}
.is-loaded .hero .eyebrow,.is-loaded .hero .sub,.is-loaded .hero-cta{opacity:1;translate:0 0;transition:opacity .7s ease,translate .8s cubic-bezier(.2,.8,.2,1)}
.is-loaded .hero .eyebrow{transition-delay:0s}
.is-loaded .hero .sub{transition-delay:1.15s}
.is-loaded .hero-cta{transition-delay:1.3s}

/* ヒーローの写真：貼られたあと、ゆらゆら浮かぶ */
.is-loaded .collage .ph-main{animation:float 6.4s ease-in-out 1.8s infinite}
.is-loaded .collage .ph-a{animation:float 7.2s ease-in-out 2.1s infinite}
.is-loaded .collage .ph-b{animation:float 5.6s ease-in-out 2.4s infinite}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -7px}}
/* テープは写真が貼られてから伸びる */
.js .collage .ph::before{transform:translateX(-50%) rotate(var(--tr,-3deg)) scaleX(0);transform-origin:0 50%}
.is-loaded .collage .ph::before{transform:translateX(-50%) rotate(var(--tr,-3deg)) scaleX(1);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.is-loaded .collage .ph-main::before{transition-delay:.85s}
.is-loaded .collage .ph-a::before{transition-delay:1.1s}
.is-loaded .collage .ph-b::before{transition-delay:1.3s}

/* 「メンバーに参加」がときどきピョコッと揺れる */
.hero-cta .pill{animation:nudge 3.6s ease-in-out 3s infinite}
/* ときどきぴょこっと跳ねる（傾きなし） */
@keyframes nudge{0%,78%,100%{translate:0 0;scale:1}82%{translate:0 -5px;scale:1.05}87%{translate:0 0;scale:1}91%{translate:0 -2px}95%{translate:0 0}}

/* ---- 見出し：蛍光ペンが引かれ、手書きの英語は左から書かれていく ---- */
.js .rv .hl{background-size:0% 58%;transition:background-size .8s cubic-bezier(.6,.05,.3,1) .35s}
.js .rv.is-in .hl{background-size:100% 58%}
.js .rv .sh-en{clip-path:inset(-20% 100% -20% 0);transition:clip-path .9s cubic-bezier(.6,.05,.3,1) .1s}
.js .rv.is-in .sh-en{clip-path:inset(-20% -10% -20% 0)}

/* ---- カード：傾いて落ちてきて、ペタッと貼りつく ---- */
.js .ncard.rv,.js .wk.rv,.js .pj.rv,.js .ph.rv,.js .thoughts-photos.rv{
  transform:translateY(44px) rotate(-5deg) scale(.94);
  transition-duration:.6s,1s;
  transition-timing-function:ease,cubic-bezier(.2,.9,.25,1.22);
}
.js .wk.rv:nth-child(even),.js .ncard.rv:nth-child(even),.js .pj.rv:nth-child(even){transform:translateY(44px) rotate(5deg) scale(.94)}
.js .ncard.rv.is-in,.js .wk.rv.is-in,.js .pj.rv.is-in,.js .ph.rv.is-in,.js .thoughts-photos.rv.is-in{transform:none}
/* テープは貼りついたあとに伸びる */
.js .rv .ph::before,.js .ph.rv::before{transform:translateX(-50%) rotate(var(--tr,-3deg)) scaleX(0);transform-origin:0 50%;transition:transform .45s cubic-bezier(.2,.8,.2,1) .55s}
.js .rv.is-in .ph::before,.js .ph.rv.is-in::before{transform:translateX(-50%) rotate(var(--tr,-3deg)) scaleX(1)}

/* ---- 付箋：上をのりにして、ペラッとめくれるように貼られる ---- */
.stickies,.ct-links,.events-note{perspective:900px}
.js .rv .sticky{
  opacity:0;transform:rotate(var(--r,0deg)) rotateX(-80deg);transform-origin:50% 0;
  transition:opacity .4s ease,transform .9s cubic-bezier(.2,.9,.25,1.3);
}
.js .rv.is-in .sticky{opacity:1;transform:rotate(var(--r,0deg))}
.js .rv .sticky:nth-child(1){transition-delay:.15s}
.js .rv .sticky:nth-child(2){transition-delay:.32s}
.js .rv .sticky:nth-child(3){transition-delay:.49s}
@media (hover:hover){.js .ct-links.is-in .sticky:hover{transform:translateY(-4px);transition-delay:0s}}

/* ---- マウスを乗せたとき：写真がぷるっと揺れる ---- */
@media (hover:hover){
  a:hover>.ph{animation:wobble .6s ease}
  .pill:hover{animation:none}
}
@keyframes wobble{0%,100%{rotate:0deg}25%{rotate:1.6deg}50%{rotate:-1.2deg}75%{rotate:.5deg}}

.sec>.wrap{position:relative;z-index:1}

/* ---- スクロールしたらヘッダーに影 ---- */
.hd{transition:box-shadow .3s ease}
.is-scrolled .hd{box-shadow:0 6px 18px -10px rgba(21,32,80,.35)}

/* ---- 動きを減らす設定のときは、すべて止めて最初から見せる ---- */
@media (prefers-reduced-motion:reduce){
  .hero h1 .ch{opacity:1!important;transform:none!important;animation:none!important}
  .hero h1 .hl,.rv .hl{background-size:100% 58%!important;transition:none!important}
  .hero .eyebrow,.hero .sub,.hero-cta{opacity:1!important;translate:none!important}
  .collage .ph,.hero-cta .pill,a:hover>.ph{animation:none!important}
  .collage .ph::before,.rv .ph::before,.ph.rv::before{transform:translateX(-50%) rotate(var(--tr,-3deg))!important}
  .rv .sticky{opacity:1!important;transform:rotate(var(--r,0deg))!important}
  .rv .sh-en{clip-path:none!important}
}

/* ============================================================
   下層ページ（お知らせ・これまでの活動）
   ※ PC用・スマホ用の両方に同じものを入れている。片方だけ変えたいときは、そのファイルだけ直す
   ============================================================ */

/* ---- ページの頭 ---- */
.sub-hero{position:relative;padding:clamp(36px,4.6vw,72px) 0 clamp(44px,5.4vw,84px)}
.sub-hero .back-top{margin-bottom:clamp(24px,2.8vw,38px)}
.sub-hero .meta{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.sub-hero .date{font-family:var(--hand);font-size:clamp(16px,1.5vw,20px);color:var(--blue)}
.sub-title{font-weight:900;font-size:clamp(26px,3.4vw,48px);line-height:1.5;letter-spacing:.03em;max-width:26em}
.sub-hero .lead{margin-top:clamp(18px,2vw,26px);font-weight:700;font-size:clamp(14.5px,1.22vw,17px);line-height:2.05;max-width:46em}
.sub-hero .lead+.lead{margin-top:.7em}

/* 活動ページの頭：左に文字、右にテープで貼った写真 */
.sub-hero.has-photo .sub-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(30px,4.4vw,72px);align-items:center}
.sub-hero.has-photo .sub-title{font-size:clamp(30px,4vw,58px);line-height:1.3}
.sub-key{--r:2.2deg}
.sub-key img{aspect-ratio:3/2}
.sub-hero .en{display:block;font-family:var(--hand);font-size:clamp(15px,1.4vw,19px);color:var(--blue);letter-spacing:.04em;margin-top:12px}
.sub-hero .msg{margin-top:clamp(22px,2.6vw,32px);font-weight:900;font-size:clamp(20px,2.2vw,30px);line-height:1.6;letter-spacing:.03em}
.sub-hero .msg-sub{margin-top:10px;font-family:var(--hand);font-size:clamp(16px,1.5vw,20px);line-height:1.6;color:var(--blue)}

/* ---- お知らせ：写真と本文の紙 ---- */
.sub-main{position:relative;padding-bottom:clamp(64px,7.4vw,120px)}
.news-fig{max-width:900px;margin:0 auto clamp(48px,5.4vw,80px);--r:-1.2deg}
.news-fig img{aspect-ratio:auto}
.news-fig.is-portrait{max-width:560px;--r:1.6deg}
.news-fig a{display:block}
.paper{
  position:relative;max-width:900px;margin:0 auto;
  background:#fff;padding:clamp(30px,3.8vw,60px) clamp(24px,4vw,64px);
  box-shadow:0 18px 34px -18px rgba(21,32,80,.38),0 2px 6px rgba(21,32,80,.06);
}
.paper::before{
  content:"";position:absolute;top:-13px;left:50%;width:120px;height:26px;transform:translateX(-50%) rotate(-2deg);
  background:var(--t-sky);
  clip-path:polygon(3% 0,97% 0,100% 18%,97% 36%,100% 54%,97% 72%,100% 90%,97% 100%,3% 100%,0 82%,3% 64%,0 46%,3% 28%,0 10%);
}
.prose p{font-size:clamp(14.5px,1.15vw,16px);font-weight:500;line-height:2.15}
.prose p+p,.prose ul+p,.prose dl+p{margin-top:1.3em}
/* 「 」の声は付箋に */
.prose .voices{list-style:none;margin:1.8em 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.prose .voices li{background:var(--s-yellow);padding:14px 18px;font-weight:800;font-size:clamp(14px,1.1vw,15.5px);line-height:1.7;box-shadow:0 12px 16px -12px rgba(21,32,80,.5)}
.prose .voices li:nth-child(5n+1){background:var(--s-yellow);transform:rotate(-1.6deg)}
.prose .voices li:nth-child(5n+2){background:var(--s-pink);transform:rotate(1.2deg)}
.prose .voices li:nth-child(5n+3){background:var(--s-mint);transform:rotate(-.8deg)}
.prose .voices li:nth-child(5n+4){background:var(--s-sky);transform:rotate(1.6deg)}
.prose .voices li:nth-child(5n+5){background:var(--s-yellow);transform:rotate(-1.2deg)}
/* 募集要項 */
.prose .spec{margin:1.8em 0;border-top:2px dashed rgba(21,32,80,.22)}
.prose .spec>div{display:grid;grid-template-columns:clamp(96px,10vw,140px) 1fr;gap:16px;padding:14px 4px;border-bottom:2px dashed rgba(21,32,80,.22)}
.prose .spec dt{font-weight:900;font-size:14px}
.prose .spec dd{font-weight:500;font-size:clamp(14px,1.1vw,15.5px)}
.prose .pill{margin:.4em 0}
.sub-back{text-align:center;margin-top:clamp(48px,5.4vw,80px)}

/* ---- 数字の付箋 ---- */
.stat-notes{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(18px,2.6vw,36px)}
.stat-notes .sticky{min-width:min(240px,100%);text-align:center}
.stat-notes .sticky:nth-child(1){--c:var(--s-yellow);--r:-2.4deg}
.stat-notes .sticky:nth-child(2){--c:var(--s-pink);--r:2deg}
.stat-notes .sticky:nth-child(3){--c:var(--s-mint);--r:-1.4deg}
.stat-notes dt{font-size:12.5px;font-weight:800;letter-spacing:.14em;margin-bottom:6px}
.stat-notes dd{font-weight:900;font-size:clamp(30px,3.4vw,46px);line-height:1.1;white-space:nowrap}
.stat-notes dd em{font-style:normal;font-size:.44em;font-weight:800;margin-left:.08em}
.stat-notes dd .pre{font-size:.5em;margin-right:.06em}
/* 協賛のすぐ下に数字が続くときは、見出しがないので上の余白をなくして近づける */
#sub-sponsor + #sub-numbers{padding-top:clamp(8px,1vw,16px)}

/* ---- 写真のアルバム ---- */
.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-flow:dense;gap:clamp(30px,3.4vw,52px) clamp(22px,2.6vw,40px)}
.gallery .ph img{aspect-ratio:3/2}
.gallery .ph:nth-child(3n+1){--r:-1.8deg}
.gallery .ph:nth-child(3n+2){--r:1.5deg;--tr:4deg}
.gallery .ph:nth-child(3n+3){--r:-1deg;--tr:-4deg}
.gallery .ph.is-wide{grid-column:span 2}
.gallery .ph.is-wide img{aspect-ratio:auto;height:100%}
.gallery .ph.is-tall{grid-row:span 2}
.gallery .ph.is-tall img{aspect-ratio:auto;height:100%}
.gallery.is-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.gallery.is-2 .ph.is-wide img{aspect-ratio:1600/754;height:auto}

/* ---- 協賛ロゴ ---- */
.logos.is-lead{grid-template-columns:repeat(2,minmax(0,1fr));max-width:720px;margin:0 auto clamp(18px,2.4vw,30px)}

/* ---- プロジェクト紹介（クリスマスマーケット） ---- */
.cm-lede{font-weight:900;font-size:clamp(22px,2.6vw,36px);line-height:1.6;letter-spacing:.03em;margin-bottom:clamp(20px,2.4vw,30px)}
.cm-text p{font-size:clamp(14.5px,1.18vw,16.5px);font-weight:500;line-height:2.15}
.cm-text p+p,.cm-text ul+p{margin-top:1.2em}
.cm-text .strong{font-weight:900}
.checks{list-style:none;margin:1.4em 0;display:grid;gap:10px}
.checks li{position:relative;padding-left:34px;font-weight:800;font-size:clamp(14.5px,1.2vw,16.5px)}
.checks li::before{content:"✓";position:absolute;left:4px;top:-3px;font-family:var(--hand);font-size:22px;color:var(--pink)}
.cm-text .stat-notes{justify-content:flex-start;margin-top:clamp(32px,3.6vw,48px)}
.sub-h2{font-weight:900;font-size:clamp(24px,3vw,42px);line-height:1.45;letter-spacing:.03em;margin-bottom:clamp(22px,2.6vw,34px)}
.sub-h2.is-center{text-align:center}
.cm-narrow{max-width:820px;margin:0 auto}
.cm-narrow .page{margin-top:6px}
.cm-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4.4vw,72px);align-items:center}
.cm-row.is-rev .ph{order:2}
.cm-row .ph img{aspect-ratio:4/3}
.cm-row:not(.is-rev) .ph{--r:-2deg}
.cm-row.is-rev .ph{--r:2deg;--tr:4deg}
.cm-row+.cm-row{margin-top:clamp(64px,7vw,110px)}
.cm-row .num{display:block;font-family:var(--hand);font-size:clamp(17px,1.6vw,22px);color:var(--blue);margin-bottom:10px}
.cm-row h3{font-weight:900;font-size:clamp(21px,2.3vw,32px);line-height:1.5;letter-spacing:.03em;margin-bottom:clamp(14px,1.6vw,20px)}
.cm-close{display:flex;justify-content:center}
.cm-close .sticky{--c:var(--s-yellow);--r:-1.8deg;width:min(680px,100%);text-align:center;padding:clamp(40px,5vw,70px) clamp(24px,3vw,44px)}
.cm-close .big{font-weight:900;font-size:clamp(24px,3vw,42px);line-height:1.55;letter-spacing:.04em}
.cm-close small{display:block;margin-top:16px;font-family:var(--hand);font-size:clamp(13px,1.15vw,16px);line-height:1.7;color:var(--blue)}

/* ---- 下層ページの動き ---- */
.js .sub-key.rv{transform:translateY(40px) rotate(-6deg) scale(.94);transition-duration:.6s,1s;transition-timing-function:ease,cubic-bezier(.2,.9,.25,1.22)}
.js .sub-key.rv.is-in{transform:rotate(var(--r,0deg))}
.js .news-fig.rv{transform:translateY(40px) rotate(-5deg) scale(.95);transition-duration:.6s,1s;transition-timing-function:ease,cubic-bezier(.2,.9,.25,1.22)}
.js .news-fig.rv.is-in{transform:rotate(var(--r,0deg))}
.js .gallery .ph.rv:nth-child(even){transform:translateY(44px) rotate(6deg) scale(.94)}
.js .gallery .ph.rv.is-in{transform:rotate(var(--r,0deg))}
.js .ph.rv.is-in{transform:rotate(var(--r,0deg))}
.js .sub-key.rv::before,.js .news-fig.rv::before{transform:translateX(-50%) rotate(var(--tr,-3deg)) scaleX(0);transform-origin:0 50%;transition:transform .45s cubic-bezier(.2,.8,.2,1) .55s}
.js .sub-key.rv.is-in::before,.js .news-fig.rv.is-in::before{transform:translateX(-50%) rotate(var(--tr,-3deg)) scaleX(1)}
.js .prose .voices li{opacity:0;translate:0 14px;transition:opacity .5s ease,translate .7s cubic-bezier(.2,.9,.25,1.3)}
.js .rv.is-in .prose .voices li,.js .paper.rv.is-in .voices li{opacity:1;translate:0 0}
.js .paper.rv .voices li:nth-child(1){transition-delay:.2s}
.js .paper.rv .voices li:nth-child(2){transition-delay:.3s}
.js .paper.rv .voices li:nth-child(3){transition-delay:.4s}
.js .paper.rv .voices li:nth-child(4){transition-delay:.5s}
.js .paper.rv .voices li:nth-child(5){transition-delay:.6s}
@media (prefers-reduced-motion:reduce){
  .sub-key,.news-fig,.gallery .ph{transform:rotate(var(--r,0deg))!important}
  .sub-key::before,.news-fig::before{transform:translateX(-50%) rotate(var(--tr,-3deg))!important}
  .prose .voices li{opacity:1!important;translate:none!important}
}

/* ---- プライバシーポリシー（法的な文書なので、飾らず読みやすく） ---- */
.prose h2{font-weight:900;font-size:clamp(18px,1.6vw,22px);line-height:1.6;margin:2.4em 0 .9em;padding-left:14px;border-left:6px solid var(--yellow)}
.prose h2:first-child{margin-top:0}
.prose h3{font-weight:800;font-size:clamp(15px,1.25vw,17px);line-height:1.7;margin:1.8em 0 .6em}
.prose .list{margin:1em 0 1.2em;padding-left:1.4em;display:grid;gap:.4em}
.prose .list li{font-size:clamp(14.5px,1.15vw,16px);line-height:1.9}
.prose .list li::marker{color:var(--blue)}
.prose a:not(.pill){color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.prose strong{font-weight:900}

.fig-placeholder{aspect-ratio:3/2;display:grid;place-content:center;gap:4px;text-align:center;border:2px dashed rgba(21,32,80,.25);color:var(--muted);font-size:13px;font-weight:700}
.fig-placeholder b{display:block;font-family:var(--hand);font-weight:400;font-size:20px;color:var(--blue)}

/* ============================================================
   大胆なアニメーション
   ①見出し ②数字 ③ノート ④写真が広がる ⑤横スクロール ⑥ページ移動の幕
   どれも .js が付いたとき（動きを減らす設定でないとき）だけ動く
   ============================================================ */
/* ---- ① 見出しが下からせり上がる ----
   見出しの下端で切り抜いて、文字を行数ぶん下に隠しておき、見えたらせり上げる。
   マーカーが行ごとに引かれたまま動くよう、transform ではなく top で動かす */
.js .sh.rv{opacity:1;transform:none}
.js .rv .sh-ja,.js .rv .thoughts-head h3,.js .rv.origin-head h3{overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
.js .rv .sh-ja>span,.js .rv .thoughts-head h3>span,.js .rv.origin-head h3>span{
  position:relative;top:calc(var(--lines,1) * 1.35em + .2em);
  transition:top 1s cubic-bezier(.16,.84,.24,1) .05s;
}
.js .rv.is-in .sh-ja>span,.js .rv.is-in .thoughts-head h3>span,.js .rv.is-in.origin-head h3>span{top:0}
/* ---- ② 数字がスロットのように回る ----
   本物の数字は透明にして場所だけ取り、その上にけたごとのリール（0〜9の帯）を重ねて回す */
.is-slot .dg{position:relative;display:inline-block;color:transparent;font-variant-numeric:tabular-nums}
.is-slot .reel{position:absolute;inset:0;overflow:hidden;color:var(--slot-fg,var(--ink))}
.is-slot .strip{display:block;transition:transform 1.2s cubic-bezier(.12,.8,.2,1)}
.is-slot .strip span{display:block;text-align:center}