@charset "UTF-8";
/* =========================================================
   Nēne LP  /  スマホ幅固定・PCは周囲に装飾を回す構成
   ========================================================= */

:root{
  --purple:#8C4898;
  --purple-d:#6B3175;
  --purple-l:#C08EBE;
  --purple-p:#F1E7F3;
  --yellow:#F6F062;
  --yellow-d:#DFD63A;
  --yellow-p:#FCFBE4;
  --orange:#F3981E;
  --green-l:#C0DB81;
  --ink:#1A1A1A;
  --ink-2:#6B6B70;
  --paper:#FFFDF6;
  --paper-2:#F7F3EA;
  --cream:#FAF7EC;
  --line:#E4DCCE;
  --line-green:#06C755;
  --gray-btn:#7C7C84;

  --phone:430px;
  --pad:24px;

  --f-round:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Hiragino Sans",system-ui,sans-serif;
  --f-goth:"Zen Kaku Gothic New","Hiragino Sans","Noto Sans JP",system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:var(--f-goth);color:var(--ink);background:var(--purple-p);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
[hidden]{display:none!important}

body::before{
  content:"";position:fixed;inset:0;z-index:-2;
  background:
    radial-gradient(900px 620px at 12% 12%, #FCF3DC 0%, transparent 60%),
    radial-gradient(900px 620px at 88% 78%, #EBDCEE 0%, transparent 60%),
    linear-gradient(160deg,#F5EEF7 0%, #FCF8EE 55%, #F3E9F5 100%);
}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(140,72,152,.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(140,72,152,.07) 1px, transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 45%, transparent 35%, #000 100%);
          mask-image:radial-gradient(70% 60% at 50% 45%, transparent 35%, #000 100%);
}

/* ============ 本体：スマホ幅カラム ============ */
.phone{
  position:relative;width:100%;max-width:var(--phone);margin:0 auto;
  background:var(--paper);overflow:hidden;
  box-shadow:0 0 0 1px rgba(140,72,152,.10), 0 30px 80px -20px rgba(80,40,110,.28);
  padding-bottom:40px;
}
@media (min-width:900px){
  .phone{margin:26px auto;border-radius:30px}
}

/* ============ PC装飾：左右レール＋上下ティッカー ============ */
.stage-deco{display:none}
@media (min-width:900px){
  .stage-deco{display:block;position:fixed;inset:0;z-index:2;pointer-events:none}
  .stage-deco a{pointer-events:auto}
}
.rail{position:absolute;top:0;bottom:0;display:flex;flex-direction:column;justify-content:center}
.rail--left{left:0;width:calc(50% - var(--phone)/2);align-items:center;text-align:center;padding:0 24px}
.rail__logo{width:clamp(150px,15vw,240px);margin:0 auto}
.rail__sub{
  margin:20px 0 0;color:var(--ink);letter-spacing:.02em;
  font-family:var(--f-round);font-weight:700;
  font-size:clamp(15px,1.35vw,18px);line-height:1.95;
}
.rail__friends{display:flex;gap:14px;align-items:flex-end;justify-content:center;margin-top:24px}
.rail__friends img{width:clamp(56px,5vw,80px)}
.rail__friends img:first-child{animation:bob 4.6s ease-in-out infinite}
.rail__friends img:last-child{animation:bob 5.4s ease-in-out infinite;animation-delay:-2s}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-6px) rotate(2deg)}}
@keyframes gentle-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

.rail--right{right:0;width:calc(50% - var(--phone)/2);flex-direction:row;justify-content:center;align-items:center;gap:10px}
.vlabel{
  position:relative;overflow:visible;
  writing-mode:vertical-rl;
  display:flex;align-items:center;justify-content:center;
  height:248px;box-sizing:border-box;
  font-family:var(--f-round);font-weight:700;font-size:13px;letter-spacing:.18em;
  text-decoration:none;color:var(--purple-d);
  background:rgba(255,255,255,.85);border:1.5px solid var(--purple-l);border-radius:999px;
  padding:16px 9px;transition:background .25s, transform .25s, color .25s;
}
.vlabel:hover{background:var(--purple);color:#fff;transform:translateY(-4px)}
.vlabel__peek{
  position:absolute;left:50%;width:62px;max-width:none;pointer-events:none;
  transform:translate(-50%,18px) scale(.72);opacity:0;
  transition:transform .36s cubic-bezier(.34,1.56,.64,1),opacity .18s;
}
.vlabel__peek--top{top:-52px}
.vlabel__peek--bottom{bottom:-54px}
.vlabel:hover .vlabel__peek,.vlabel:focus-visible .vlabel__peek{
  transform:translate(-50%,0) scale(1);opacity:1;
}

/* ============ 画面内追従UI ============ */
.fixed-rail{
  position:fixed;top:0;bottom:0;left:50%;transform:translateX(-50%);
  width:min(var(--phone),100%);z-index:40;pointer-events:none;
}
.fixed-rail > *{pointer-events:auto}

.ig{
  position:absolute;top:calc(64px + env(safe-area-inset-top,0px));right:12px;
  width:48px;height:48px;display:block;
}
.ig__disc{
  position:relative;z-index:2;width:100%;height:100%;display:grid;place-items:center;
  border-radius:50%;background:var(--purple);
  box-shadow:0 8px 20px -8px rgba(140,72,152,.7), 0 0 0 3px rgba(255,255,255,.9);
  transition:transform .25s, background .25s;
}
.ig__disc svg{width:28px;height:28px;fill:#fff}
.ig:hover .ig__disc,.ig:focus-visible .ig__disc{background:var(--purple-d);transform:scale(1.06)}
/* 後ろに隠れたモヤリー。ホバーで顔を出す */
.ig__peek{
  position:absolute;left:50%;top:50%;width:64px;z-index:1;pointer-events:none;
  max-width:none;
  transform:translate(-50%,-12%) scale(.72);opacity:0;
  transition:transform .42s cubic-bezier(.34,1.56,.64,1), opacity .18s;
}
.ig:hover .ig__peek,.ig:focus-visible .ig__peek,.ig.is-peek .ig__peek{
  transform:translate(-50%,-122%) scale(1);opacity:1;
}
@media (min-width:900px){
  .ig{top:72px;right:-96px;width:56px;height:56px}   /* 枠（スマホ幅カラム）の外へ */
  .ig__peek{width:72px}
}

/* ---- 追従ドック（LINE／メール＋お返事できる時間） ---- */
.dock{
  position:absolute;left:0;right:0;bottom:0;
  background:var(--paper);
  border-radius:22px 22px 0 0;
  box-shadow:0 -10px 30px -12px rgba(80,40,110,.35), 0 0 0 1px rgba(140,72,152,.10);
  padding-bottom:env(safe-area-inset-bottom,0px);
  transform:translateY(calc(100% + 56px));
  transition:transform .42s cubic-bezier(.4,0,.2,1);
}
.dock.is-shown{transform:none}
.dock__handle{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  width:100%;padding:7px 0 5px;
}
.dock .btn--line{padding:14px;font-size:16px}
.dock__handle-bar{width:42px;height:4px;border-radius:2px;background:var(--line);transition:background .25s}
.dock__handle:hover .dock__handle-bar{background:var(--purple-l)}
.dock__handle-txt{
  font-family:var(--f-round);font-weight:700;font-size:11px;letter-spacing:.12em;color:var(--ink-2);
  display:flex;align-items:center;gap:4px;
}
.dock__handle-txt::before{
  content:"";width:0;height:0;
  border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid currentColor;
}
.dock[data-state="closed"] .dock__handle-txt::before{
  border-top:0;border-bottom:5px solid currentColor;
}

.dock__body{
  position:relative;
  padding:0 18px 12px;
  overflow:hidden;
  transition:height .34s cubic-bezier(.4,0,.2,1), opacity .24s;
}
.dock[data-state="closed"] .dock__body{height:0!important;opacity:0;padding-top:0;padding-bottom:0}
.dock__friend{position:absolute;top:-38px;width:54px;z-index:1;pointer-events:none;transform-origin:50% 100%;transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.dock:hover .dock__friend--l{transform:scaleX(-1) translateY(-8px) rotate(6deg)}
.dock:hover .dock__friend--r{transform:translateY(-8px) rotate(-6deg)}
.dock__friend--l{left:14px;transform:scaleX(-1)}
.dock__friend--r{right:14px}
.dock__note{margin:6px 0 0;font-size:10.5px;line-height:1.6;color:var(--ink-2);text-align:center}
.dock__lead{
  margin:0 0 6px;text-align:center;
  font-family:var(--f-round);font-weight:700;font-size:13px;letter-spacing:.1em;color:var(--ink-2);
}
.dock__hours{
  margin-top:10px;padding-top:9px;border-top:1.5px dashed var(--line);text-align:center;
}
.dock__hours-ttl{
  margin:0 0 3px;font-family:var(--f-round);font-weight:900;font-size:12px;
  letter-spacing:.1em;color:var(--purple-d);
}
.dock__hours-body{margin:0;font-size:12px;line-height:1.6;color:var(--ink)}
.dock .btn--mail{margin-top:8px;padding:12px;font-size:14.5px}

/* ---- ＼LINEで／ の飾り ---- */
.dock__lead span,.talk__lead span{position:relative;padding:0 16px}
.dock__lead span::before,.dock__lead span::after,
.talk__lead span::before,.talk__lead span::after{
  content:"";position:absolute;top:50%;width:11px;height:1.5px;background:currentColor;
}
.dock__lead span::before,.talk__lead span::before{left:0;transform:translateY(-50%) rotate(62deg)}
.dock__lead span::after,.talk__lead span::after{right:0;transform:translateY(-50%) rotate(-62deg)}

/* ============ ボタンとキャラの一体化 ============ */
.btn-wrap{position:relative;display:block;padding-top:44px}
.btn-wrap .btn{position:relative;z-index:1}
.btn-wrap__chara{
  position:absolute;bottom:calc(100% - 44px - 16px);width:var(--w,50px);z-index:0;
  pointer-events:none;transform-origin:50% 100%;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1);
  animation:bob 5.2s ease-in-out infinite;
}
.btn-wrap__chara--l{left:6%}
.btn-wrap__chara--c{left:50%;margin-left:calc(var(--w,50px) / -2)}
.btn-wrap__chara--r{right:6%;animation-delay:-2.4s}
/* ホバーで跳ねて手を振る */
.btn-wrap:hover .btn-wrap__chara,.btn-wrap:focus-within .btn-wrap__chara{
  animation:none;transform:translateY(-12px) rotate(-7deg);
}
.btn-wrap:hover .btn-wrap__chara--r,.btn-wrap:focus-within .btn-wrap__chara--r{transform:translateY(-10px) rotate(8deg)}
.btn-wrap:hover .btn-wrap__chara--c,.btn-wrap:focus-within .btn-wrap__chara--c{transform:translateY(-16px) scale(1.06)}
.btn-wrap--mail{padding-top:34px}
.btn-wrap--mail .btn-wrap__chara{bottom:calc(100% - 34px - 14px)}
.btn-wrap--footer{display:inline-block;padding-top:56px}
.btn-wrap--footer .btn-wrap__chara{bottom:calc(100% - 56px - 18px)}
.btn-wrap--footer .btn-wrap__chara--l{left:-14px}
.btn-wrap--footer .btn-wrap__chara--r{right:-14px}

/* ============ ボタン ============ */
.btn{
  display:flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--f-round);font-weight:700;text-decoration:none;border-radius:999px;
  transition:transform .2s, box-shadow .2s, background .2s;
}
.btn--line{
  width:100%;padding:16px;font-size:17px;letter-spacing:.04em;
  background:var(--line-green);color:#fff;box-shadow:0 8px 20px -6px rgba(6,199,85,.55);
}
.btn--line:hover{transform:translateY(-2px);box-shadow:0 12px 26px -6px rgba(6,199,85,.6)}
.btn--mail{
  width:100%;padding:14px;font-size:15.5px;letter-spacing:.04em;
  background:var(--gray-btn);color:#fff;box-shadow:0 7px 18px -8px rgba(40,40,50,.5);
}
.btn--mail:hover{transform:translateY(-2px);background:#6C6C74}
.btn__ico{width:22px;height:22px;fill:currentColor;flex:none}
.btn--ghost{
  display:inline-flex;text-align:center;line-height:1.5;padding:15px 40px;font-size:16px;
  background:#fff;color:var(--purple-d);border:2px solid var(--purple);box-shadow:0 6px 0 var(--purple-l);
}
.btn--ghost:hover{transform:translateY(3px);box-shadow:0 3px 0 var(--purple-l)}

/* ============ FV ============ */
.fv{position:relative;padding:0 0 26px;background:var(--paper);overflow:hidden}
.fv__scene{
  position:relative;height:clamp(370px,64vh,486px);overflow:hidden;
  background:linear-gradient(180deg,#EFE4F6 0%, #F3EAF4 46%, #FBF4E6 100%);
}
.fv__sky{position:absolute;left:0;right:0;bottom:340px;top:0}
.fv__sky::before{
  content:"";position:absolute;inset:0;
  background:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='140' viewBox='0 0 700 140'%3E %3Cg fill='%23FFFFFF' opacity='.9'%3E %3Cellipse cx='90' cy='44' rx='54' ry='20'/%3E%3Cellipse cx='124' cy='34' rx='34' ry='16'/%3E %3Cellipse cx='330' cy='86' rx='42' ry='16'/%3E%3Cellipse cx='356' cy='78' rx='27' ry='12'/%3E %3Cellipse cx='560' cy='38' rx='48' ry='18'/%3E%3Cellipse cx='590' cy='30' rx='30' ry='14'/%3E %3C/g%3E%3C/svg%3E") repeat-x top left / 700px auto;
  opacity:.85;animation:drift 90s linear infinite;
}
.fv__skyline{
  position:absolute;left:0;right:0;bottom:204px;height:112px;z-index:1;opacity:.44;
  background:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='112' viewBox='0 0 720 112'%3E%3Cg fill='%23C08EBE'%3E%3Crect x='0' y='48' width='54' height='64' rx='4'/%3E%3Crect x='72' y='22' width='42' height='90' rx='4'/%3E%3Crect x='132' y='58' width='66' height='54' rx='4'/%3E%3Crect x='222' y='36' width='48' height='76' rx='4'/%3E%3Crect x='292' y='8' width='66' height='104' rx='5'/%3E%3Crect x='382' y='50' width='78' height='62' rx='4'/%3E%3Crect x='486' y='28' width='50' height='84' rx='4'/%3E%3Crect x='558' y='60' width='64' height='52' rx='4'/%3E%3Crect x='646' y='18' width='48' height='94' rx='4'/%3E%3C/g%3E%3Cg fill='%23FFFDF6' opacity='.9'%3E%3Crect x='84' y='38' width='10' height='12' rx='2'/%3E%3Crect x='84' y='62' width='10' height='12' rx='2'/%3E%3Crect x='306' y='28' width='12' height='14' rx='2'/%3E%3Crect x='330' y='28' width='12' height='14' rx='2'/%3E%3Crect x='306' y='54' width='12' height='14' rx='2'/%3E%3Crect x='330' y='54' width='12' height='14' rx='2'/%3E%3Crect x='500' y='44' width='11' height='14' rx='2'/%3E%3C/g%3E%3Cg fill='%23C0DB81'%3E%3Ccircle cx='52' cy='91' r='16'/%3E%3Ccircle cx='190' cy='94' r='18'/%3E%3Ccircle cx='462' cy='92' r='17'/%3E%3Ccircle cx='625' cy='94' r='18'/%3E%3C/g%3E%3C/svg%3E") repeat-x bottom left / 720px 112px;
}
@keyframes drift{to{background-position:-700px 0}}

.fv__band{position:absolute;left:0;display:flex;width:max-content;animation:pan 58s linear infinite}
.fv__band.is-paused{animation-play-state:paused}
.fv__sky.is-paused::before{animation-play-state:paused}
@keyframes pan{to{transform:translateX(-50%)}}

.fv__band--far{bottom:204px;height:112px;opacity:.72;animation-duration:112s}
.fv__band--far .fv__strip{width:560px;background-image:url("assets/town-far.svg");background-size:560px 112px}
.fv__band--near{bottom:52px;height:340px;z-index:2}
.fv__band--near .fv__strip{width:2040px;background-image:url("assets/town-near.svg");background-size:2040px 340px}
.fv__strip{height:100%;flex:none;background-repeat:repeat-x;background-position:bottom left}

/* 街を歩くキャラクター */
.fv__band--crowd{bottom:62px;height:74px;z-index:5;animation-duration:58s}
.fv__crowd{position:relative;width:2040px;flex:none;height:100%}
.fv__crowd img{
  position:absolute;bottom:var(--y,0);left:var(--x);width:var(--w);
  transform:translateX(-50%);
  animation:bob 5.4s ease-in-out infinite;
}
.fv__crowd img:nth-child(2n){animation-duration:6.2s;animation-delay:-1.8s}
.fv__crowd img:nth-child(3n){animation-duration:4.8s;animation-delay:-3.1s}

.fv__ground{
  position:absolute;left:0;right:0;bottom:0;height:64px;z-index:4;
  background:linear-gradient(180deg,#EFE1C9 0%, #F9F1DF 44%, var(--paper) 100%);
}
.fv__ground::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:rgba(140,72,152,.20)}

.fv__hero{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);z-index:6;cursor:pointer}
.fv__moyari.is-hop{animation:hop .7s cubic-bezier(.3,1.4,.5,1)}
.fv__crowd img.is-hop{animation:hop .6s ease-out}
@keyframes hop{0%{transform:translateY(0)}35%{transform:translateY(-34px) rotate(-6deg)}70%{transform:translateY(0) rotate(3deg)}100%{transform:translateY(0)}}
.fv__moyari{
  width:clamp(112px,28vw,132px);animation:bob 4.6s ease-in-out infinite;
  filter:drop-shadow(0 14px 16px rgba(80,40,110,.20));
}
.fv__copy{position:relative;z-index:4;padding:22px var(--pad) 0;text-align:center}
.fv__logo{width:min(330px,88%);margin:0 auto}

/* ============ 共通セクション ============ */
.sec{padding:60px var(--pad);position:relative}
.sec--intro{padding-top:34px;padding-bottom:16px}
.sec--talk{padding-top:44px;padding-bottom:52px}
.sec--moya{background:var(--paper-2);border-radius:34px 34px 0 0;padding-top:56px}
.sec--poem{background:var(--paper-2);padding-top:10px}
.sec--about{background:var(--purple-p);border-radius:34px 34px 0 0;margin-top:-34px;padding-top:62px}
.sec--terrace{background:var(--paper);border-radius:34px 34px 0 0;margin-top:-34px;padding-top:62px;padding-bottom:26px}
.sec--kaigi{background:var(--paper);padding-top:56px;padding-bottom:26px}
.sec--chui{background:var(--yellow-p);border-radius:34px 34px 0 0;padding-top:56px;padding-bottom:40px}
.sec--madoguchi{background:var(--yellow-p);padding-top:10px}
.sec--footer{background:var(--purple);color:#fff;border-radius:34px 34px 0 0;text-align:center;padding-top:58px;padding-bottom:44px}

.sec__friend{
  position:absolute;top:-30px;right:18px;width:70px;z-index:3;
  animation:bob 5.2s ease-in-out infinite;
}

.h-main{
  font-family:var(--f-round);font-weight:900;
  font-size:clamp(23px,6.2vw,28px);line-height:1.5;letter-spacing:.02em;text-align:center;margin:0 0 10px;
}
.h-sub{text-align:center;font-size:13px;letter-spacing:.14em;color:var(--ink-2);margin:0 0 22px}
.h-serif{
  font-family:var(--f-round);font-weight:700;
  font-size:clamp(18px,4.8vw,21px);line-height:1.85;text-align:center;margin:0 0 40px;
}
.lead{text-align:center;font-size:15px;line-height:2.1;margin:0 0 26px;letter-spacing:.02em;text-wrap:balance}
.lead b{color:var(--purple-d);font-weight:700}
.sec--intro .lead{
  margin-bottom:0;
  font-family:var(--f-round);font-weight:700;
  font-size:clamp(17px,4.7vw,19px);line-height:2.05;letter-spacing:.01em;
}

/* ============ 相談ブロック（ページ内の実体） ============ */
.talk{
  position:relative;background:#fff;border-radius:26px;padding:20px 20px 24px;
  border:2px solid var(--yellow);box-shadow:0 14px 34px -20px rgba(80,40,110,.45);
}
.talk__lead{
  margin:6px 0 -30px;position:relative;z-index:1;text-align:center;
  font-family:var(--f-round);font-weight:700;font-size:14px;letter-spacing:.1em;color:var(--ink-2);
}
.talk__or{position:relative;margin:14px 0 -22px;z-index:1;text-align:center}
.talk__or::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--line)}
.talk__or span{
  position:relative;background:#fff;padding:0 14px;
  font-size:12px;letter-spacing:.12em;color:var(--ink-2);
}
.talk__note{margin:9px 64px 0 0;font-size:11.5px;line-height:1.7;color:var(--ink-2);text-align:center}

.hours{
  position:relative;margin-top:22px;padding:22px 16px 18px;
  background:var(--yellow-p);border-radius:18px;text-align:center;
}
.hours__ttl{
  margin:0 0 9px;font-family:var(--f-round);font-weight:900;font-size:15px;
  letter-spacing:.08em;color:var(--purple-d);
}
.hours__days{margin:0 0 8px;font-family:var(--f-round);font-weight:700;font-size:15px;letter-spacing:.08em;line-height:1.7}
.hours__days em{font-style:normal;font-size:12px;font-weight:500;color:var(--ink-2)}
.hours__time{
  margin:0;font-family:var(--f-round);font-weight:900;
  font-size:clamp(22px,6.6vw,27px);letter-spacing:.02em;color:var(--purple-d);
}
.hours__time span{font-size:.7em;margin:0 2px;color:var(--ink-2)}

/* ============ 吹き出し ============ */
.bubbles{display:grid;gap:26px;margin-bottom:56px}
.bubble{position:relative;display:flex;align-items:flex-end;gap:10px}
.bubble--2{flex-direction:row-reverse}
.bubble__txt{
  margin:0;flex:1;background:#fff;border-radius:22px;padding:18px 20px;
  font-size:15px;font-weight:700;line-height:1.85;position:relative;text-align:center;
  box-shadow:0 6px 18px -8px rgba(80,40,110,.22);
}
.bubble__txt::after{
  content:"";position:absolute;bottom:14px;width:0;height:0;
  border-top:9px solid transparent;border-bottom:9px solid transparent;
}
.bubble--1 .bubble__txt::after,.bubble--3 .bubble__txt::after{right:-10px;border-left:11px solid #fff}
.bubble--2 .bubble__txt::after{left:-10px;border-right:11px solid #fff}
.bubble__chara{width:76px;flex:none;animation:bob 5.2s ease-in-out infinite}
.bubble--2 .bubble__chara{animation-delay:-1.6s}
.bubble--3 .bubble__chara{animation-delay:-3.2s}

/* ============ キャラ紹介 ============ */
.chara-card{text-align:center}
.chara-card__img{width:156px;margin:0 auto 10px;animation:bob 5s ease-in-out infinite}
.chara-card__name{font-family:var(--f-round);font-weight:900;font-size:20px;letter-spacing:.14em;margin:0 0 16px}
.chara-card__box{background:var(--purple-p);border-radius:20px;padding:20px 22px;border:1.5px dashed var(--purple-l)}
.chara-card__box p{margin:0;font-size:14px;line-height:2;text-align:left}

/* ============ ポエム ============ */
.poem{text-align:left;padding:26px 0 8px;width:fit-content;max-width:100%;margin:0 auto}
.poem p{font-family:var(--f-round);font-weight:500;font-size:15px;line-height:2.15;letter-spacing:.03em;margin:0 0 34px}
.poem__last{font-weight:700;color:var(--purple-d);border-top:1.5px solid var(--line);padding-top:30px;margin-bottom:0;width:100%}

/* ============ 【聴く/届ける/変えていく】カード ============ */
.cards{list-style:none;margin:0 0 42px;padding:0;display:grid;gap:12px}
.card{
  position:relative;background:#fff;border-radius:20px;padding:16px 18px 18px;
  box-shadow:0 5px 16px -10px rgba(80,40,110,.3);
}
.card__head{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.card__ico{
  width:76px;height:76px;flex:none;object-fit:contain;object-position:center;
}
.card__ttl{margin:0;flex:1;font-size:14px;line-height:1.65;font-family:var(--f-round);font-weight:500}
.card__ttl b{color:var(--purple-d);font-weight:900}
.card__body{margin:0;padding-right:40px;font-size:13.5px;line-height:1.95;color:var(--ink-2)}
.card__more{
  position:absolute;right:14px;bottom:14px;
  width:30px;height:30px;border-radius:50%;background:var(--purple);
  transition:transform .2s, background .2s;
}
.card__more span::before,.card__more span::after{
  content:"";position:absolute;left:50%;top:50%;background:#fff;border-radius:1px;transform:translate(-50%,-50%);
}
.card__more span::before{width:13px;height:2.4px}
.card__more span::after{width:2.4px;height:13px}
.card__more:hover{transform:scale(1.1);background:var(--purple-d)}

/* ============ PJ全体像 図解（末広がり） ============ */
.zukai{margin:0 0 26px;padding:0}
.zukai__ttl{
  text-align:center;margin:0 0 22px;
  font-family:var(--f-round);font-weight:900;
  font-size:clamp(16px,4.4vw,18px);line-height:1.6;color:var(--purple-d);
}
.zukai__flow{list-style:none;margin:0;padding:0;display:grid;gap:34px;justify-items:center}

.zk{
  position:relative;width:100%;border-radius:22px;padding:16px 16px 18px;text-align:center;
}
.zk--1{width:76%;background:var(--yellow);}
.zk--2{width:88%;background:var(--purple-l);}
.zk--3{width:100%;background:var(--purple);color:#fff}

/* 下向きの矢印でつなぐ */
.zk::after{
  content:"";position:absolute;left:50%;bottom:-25px;transform:translateX(-50%);
  width:0;height:0;border-left:11px solid transparent;border-right:11px solid transparent;
  border-top:15px solid var(--purple-l);
}
.zk--3::after{display:none}

.zk__label{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin:0 0 12px;font-family:var(--f-round);font-weight:900;
  font-size:clamp(18px,5vw,21px);letter-spacing:.08em;
}
.zk__label img{width:44px;flex:none}

.zk__chips{
  list-style:none;margin:0 0 14px;padding:0;
  display:flex;flex-wrap:wrap;gap:7px;justify-content:center;
}
.zk__chips li{
  background:rgba(255,255,255,.92);color:var(--ink);border-radius:999px;
  padding:7px 14px;font-size:12px;line-height:1.5;font-weight:700;
  font-family:var(--f-round);
}
.zk__chips em{font-style:normal;font-weight:500;font-size:11px;color:var(--ink-2)}

.zk__txt{
  margin:0;font-size:12.5px;line-height:1.85;
  padding-top:12px;border-top:1.5px dashed rgba(26,26,26,.18);
}
.zk--3 .zk__txt{border-top-color:rgba(255,255,255,.4)}

/* ============ noteカルーセル ============ */
.carousel{position:relative;padding:0 0 46px;background:var(--paper)}
.carousel__track{
  display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:8px var(--pad) 18px;scrollbar-width:none;
}
.carousel__track::-webkit-scrollbar{display:none}
.ncard{flex:0 0 74%;scroll-snap-align:center;text-decoration:none;display:grid;gap:9px}
.ncard__thumb{
  aspect-ratio:4/3;background:#fff;border:1.5px solid var(--line);border-radius:16px;
  display:grid;place-items:center;overflow:hidden;transition:transform .25s, box-shadow .25s;
}
.ncard__thumb img{width:100%;height:100%;object-fit:cover}
.ncard__date{
  font-size:11px;letter-spacing:.08em;color:var(--purple-d);
  font-family:var(--f-round);font-weight:700;padding:0 2px;margin-top:-3px;
}
.ncard__thumb em{font-style:normal;font-size:13px;color:var(--ink-2);letter-spacing:.08em}
.ncard:hover .ncard__thumb{transform:translateY(-4px);box-shadow:0 12px 24px -12px rgba(80,40,110,.4)}
.ncard__ttl{
  font-size:13px;line-height:1.6;color:var(--ink);padding:0 2px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.carousel__arw{
  position:absolute;top:36%;z-index:3;width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.92);box-shadow:0 4px 14px -6px rgba(80,40,110,.5);
}
.carousel__arw::before{
  content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;
  border-top:2px solid var(--ink);border-right:2px solid var(--ink);
}
.carousel__arw--prev{left:6px}
.carousel__arw--prev::before{transform:translate(-40%,-50%) rotate(-135deg)}
.carousel__arw--next{right:6px}
.carousel__arw--next::before{transform:translate(-60%,-50%) rotate(45deg)}
.carousel__arw:disabled{opacity:.3;cursor:default}
/* 2026-10-13 記事がまだ無い時（マガジンへのカード1枚だけ）は中央に置き、矢印を消す */
.carousel.is-single .carousel__track{justify-content:center}
.carousel.is-single .carousel__arw{display:none}
.carousel__dots{display:flex;gap:7px;justify-content:center;margin-top:2px}
.carousel__dots button{width:8px;height:8px;border-radius:50%;background:var(--line);transition:background .25s, width .25s}
.carousel__dots button[aria-current="true"]{background:var(--purple);width:22px;border-radius:4px}

/* ============ 注意事項 ============ */
.notes{margin:0;padding:0;list-style:none}
.notes li{
  position:relative;padding-left:1.4em;font-size:13.5px;line-height:2;color:var(--ink);
  margin-bottom:14px;text-align:left;
}
.notes li::before{content:"※";position:absolute;left:0;color:var(--purple)}
.chui__friend{width:78px;margin:24px auto 0;animation:bob 5.4s ease-in-out infinite}

/* ============ ほかの相談窓口 ============ */
.mado{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.mado__item{
  background:var(--cream);border:1px solid var(--line);border-radius:16px;
  padding:16px 18px;text-align:center;
}
.mado__name{margin:0 0 6px;font-family:var(--f-round);font-weight:700;font-size:14.5px;line-height:1.5}
.mado__link{
  display:inline-block;margin:0 0 6px;font-size:13px;color:#C7522F;
  text-decoration:underline;word-break:break-all;
}
.mado__link--tel{font-size:16px;font-weight:700;letter-spacing:.04em}
.mado__link--tel::before{content:"✆ ";text-decoration:none}
.mado__time{margin:0;font-size:12px;line-height:1.8;color:var(--ink-2)}
.mado__memo{margin:6px 0 0;font-size:12px;line-height:1.8}
.mado__friend{width:76px;margin:26px auto 0;animation:bob 5s ease-in-out infinite}

/* ============ フッター ============ */
.org{margin:0 0 20px;padding:0;display:grid;gap:10px;justify-content:center}
.org div{display:flex;gap:10px;align-items:baseline;justify-content:center;flex-wrap:wrap}
.org dt{font-size:12px;background:rgba(255,255,255,.2);border-radius:999px;padding:3px 12px;flex:none}
.org dd{margin:0;font-size:15px;font-family:var(--f-round);font-weight:700;letter-spacing:.02em}
.org__note{margin:0 0 30px;font-size:12.5px;line-height:1.95;opacity:.85}
.sec--footer .btn--ghost{background:#fff;color:var(--purple-d);border-color:#fff;box-shadow:0 6px 0 rgba(0,0,0,.18)}

/* ============ モーダル ============ */
.modal{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:20px}
.modal__scrim{position:absolute;inset:0;background:rgba(26,26,26,.55);animation:fade .25s ease}
.modal__panel{
  position:relative;width:min(390px,100%);max-height:84vh;overflow-y:auto;
  background:var(--paper);border-radius:24px;padding:46px 24px 28px;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.5);
  animation:pop .3s cubic-bezier(.2,.8,.3,1);
}
@keyframes fade{from{opacity:0}}
@keyframes pop{from{opacity:0;transform:translateY(16px) scale(.96)}}
.modal__close{
  position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:50%;
  background:var(--purple-p);transition:background .2s;
}
.modal__close::before,.modal__close::after{
  content:"";position:absolute;left:50%;top:50%;width:15px;height:2.4px;border-radius:2px;background:var(--purple-d);
}
.modal__close::before{transform:translate(-50%,-50%) rotate(45deg)}
.modal__close::after{transform:translate(-50%,-50%) rotate(-45deg)}
.modal__close:hover{background:var(--purple-l)}
.modal__chara{width:min(210px,72%);margin:0 auto 18px}
.modal__ttl{
  margin:0 0 14px;text-align:center;
  font-family:var(--f-round);font-weight:900;font-size:16px;line-height:1.6;color:var(--purple-d);
}
.modal__body{margin:0;font-size:14px;line-height:2.05;text-align:left}

body.is-locked{overflow:hidden}

/* ============ スクロール演出 ============ */
.js .reveal{opacity:0;transform:translateY(22px)}
.reveal{transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1)}
.reveal.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .fv__band,.fv__sky::before,
  .fv__moyari,.fv__crowd img,.rail__friends img,.bubble__chara,.chara-card__img,
  .btn-wrap__chara,.ig__peek,.sec__friend,
  .chui__friend,.mado__friend{animation:none !important}
  .js .reveal,.reveal{opacity:1;transform:none;transition:none}
  .modal__scrim,.modal__panel{animation:none}
}

/* 2026-09-18 修正指示2／3 */
/* PJ全体像の図 */
.zukai__image{width:calc(100% + 24px);max-width:none;margin:0 -12px;height:auto;border-radius:14px}
.zukai__details{margin-top:20px;border-top:1px solid #c08ebe;border-bottom:1px solid #c08ebe}
.zukai__details summary{padding:16px 8px;font:700 15px var(--f-round);color:var(--purple-d);cursor:pointer}
.zukai__details[open] summary{margin-bottom:8px}
.zukai__details .zukai__flow{gap:16px;padding-bottom:20px}
.zukai__details .zk{width:100%;border-radius:16px}
.zukai__details .zk::after{display:none}

/* 2026-09-18 追加修正：空を詰めた遠景と、案内まわりの微かな動き */
.fv__skyline{bottom:180px;height:160px;background-size:720px 160px}
@media (prefers-reduced-motion:reduce){
  .logo-split__chara,.nest__ill{animation:none !important}
}

/* 2026-09-18 修正 B・C：空を詰めたKV／ロゴと図解はキャラだけが動く */

/* ---- B：キービジュアルの空を縦に詰める（街は下基準なので上だけが減る） ---- */
.fv__scene{height:clamp(350px,50vh,404px)}
.fv__sky{top:0;bottom:auto;height:96px}
.fv__sky::before{background-size:560px auto}

/* 2026-09-18：Nēneが見守る、安心して声をかけ合える街の子どもたち */
.fv__neighborhood-kids{
  position:absolute;left:max(10px,calc(50% - 196px));bottom:58px;z-index:5;
  width:clamp(120px,24vw,180px);height:auto;pointer-events:none;
  filter:drop-shadow(0 7px 9px rgba(80,40,110,.12));
  animation:neighborhood-kids-bob 7.4s ease-in-out infinite;animation-delay:-2.3s;
}
@keyframes neighborhood-kids-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){.fv__neighborhood-kids{animation:none !important}}

/* 2026-09-18：3人を個別の全身イラストとして、既存キャラ列へ混ぜる */
.fv__crowd img.fv__kid{filter:drop-shadow(0 3px 3px rgba(80,40,110,.08))}

/* ---- C1・C3：ロゴを「文字」と「キャラ」に分けて、キャラだけ動かす ---- */
.logo-split{position:relative;display:block}
.logo-split img{position:absolute;display:block;height:auto}
.logo-split--yoko{aspect-ratio:900 / 346}
.logo-split--yoko .logo-split__word {left:0;      top:23.99%;width:53.56%}
.logo-split--yoko .logo-split__chara{left:54.56%; top:0;     width:45.44%}
.logo-split--tate{aspect-ratio:437 / 620}
.logo-split--tate .logo-split__chara{left:0;      top:0;     width:100%}
.logo-split--tate .logo-split__word {left:2.52%;  top:66.13%;width:95.42%}
.logo-split__chara{
  transform-origin:50% 92%;
  animation:chara-sway 3.8s ease-in-out infinite;
}
.logo-split--tate .logo-split__chara{animation-duration:4.4s;animation-delay:-1.3s}
@keyframes chara-sway{
  0%,100%{transform:translateY(0) rotate(0)}
  25%    {transform:translateY(-5px) rotate(-3deg)}
  50%    {transform:translateY(0) rotate(0)}
  75%    {transform:translateY(-5px) rotate(3deg)}
}

/* ---- B図：参考画像に合わせた、中心から右下・左下への広がり ---- */
.zukai{position:relative;isolation:isolate;container-type:inline-size}
.zukai__ttl{
  position:absolute;z-index:1;top:3cqw;left:0;width:100%;margin:0;
  color:#f39316;font-size:6.6cqw;font-weight:700;line-height:1.35;
  letter-spacing:0;
}
.nest{
  position:relative;container-type:inline-size;
  width:100%;margin:0;aspect-ratio:1 / .94;
}
.nest__glow{
  position:absolute;left:3cqw;top:-1cqw;width:94cqw;height:94cqw;
  pointer-events:none;
  background:radial-gradient(circle closest-side,
    #f9b82a 0%,#facc49 24%,rgba(255,226,106,.95) 46%,
    rgba(255,242,151,.8) 70%,rgba(255,250,184,.5) 88%,
    rgba(255,252,203,0) 100%);
}
.nest__ring{
  position:absolute;left:50cqw;top:46cqw;
  border:1px dashed #b9b5a4;border-radius:50%;
  transform:translate(-50%,-50%);pointer-events:none;
}
.nest__ring--2{width:43cqw;height:43cqw}
.nest__ring--3{width:73cqw;height:73cqw}
.nest__step{
  position:absolute;display:flex;gap:1.5cqw;align-items:center;
}
.nest__step--listen{left:29cqw;top:32cqw}
.nest__step--deliver{left:56cqw;top:54cqw}
.nest__step--change{left:13cqw;top:65cqw}
/* 2026-09-30：直前のカードと同じアイコンを使い、ふわふわ浮かせる */
.nest__ill{display:block;flex:none;width:19cqw;height:19cqw;object-fit:contain;
  animation:nest-float 4.8s ease-in-out infinite;
  filter:drop-shadow(0 1.2cqw 1.2cqw rgba(160,90,20,.16))}
.nest__step--listen .nest__ill{width:25cqw;height:25cqw;animation-duration:4.2s}
.nest__step--deliver .nest__ill{animation-delay:-1.6s;animation-duration:5.2s}
.nest__step--change .nest__ill{animation-delay:-3s;animation-duration:4.6s}
@keyframes nest-float{
  0%,100%{transform:translateY(0) rotate(0)}
  30%    {transform:translateY(-1.6cqw) rotate(-2deg)}
  65%    {transform:translateY(-.6cqw) rotate(1.5deg)}
}
.nest__lbl{
  font-family:var(--f-round);font-weight:700;font-size:6.5cqw;
  line-height:1.15;letter-spacing:0;color:#111;white-space:nowrap;
}
.nest__step--listen .nest__lbl{font-size:10cqw}

/* 2026-10-01：図の左右のサブキャラ。うつぼは杖でゆらゆら、メレキチはぴょんと跳ねる */
.nest__friend{position:absolute;z-index:1;pointer-events:none}
.nest__friend img{display:block;width:100%;height:auto;
  filter:drop-shadow(0 1cqw 1cqw rgba(160,90,20,.14))}
.nest__friend--utubo{left:0;top:29cqw;width:17cqw}
.nest__friend--mere {left:81cqw;top:25cqw;width:18cqw}
.nest__friend--utubo img{transform-origin:50% 95%;rotate:-14deg;
  animation:nest-utubo 3.6s ease-in-out infinite}
.nest__friend--mere img{transform-origin:50% 100%;
  animation:nest-mere 2.8s cubic-bezier(.45,0,.55,1) infinite}
@keyframes nest-utubo{
  0%,100%{transform:translateY(0) rotate(0)}
  25%    {transform:translateY(-1cqw) rotate(-6deg)}
  50%    {transform:translateY(0) rotate(0)}
  75%    {transform:translateY(-1cqw) rotate(6deg)}
}
@keyframes nest-mere{
  0%,55%,100%{transform:translateY(0) scale(1,1)}
  62%        {transform:translateY(0) scale(1.08,.9)}
  74%        {transform:translateY(-5cqw) scale(.95,1.06) rotate(-6deg)}
  86%        {transform:translateY(0) scale(1.06,.93)}
  93%        {transform:translateY(0) scale(1,1)}
}
@media (prefers-reduced-motion:reduce){.nest__friend img{animation:none !important}}

/* 2026-09-18 FV再配置：大きなモヤリーが街の上に跳ぶ → 左右にうつぼ・メレキチ → キャッチ → Nēne */
.fv__scene{height:clamp(400px,58vh,470px)}
.fv__neighborhood-kids{display:none}
.fv__hero{bottom:auto;top:clamp(56px,11vh,96px)}
.fv__moyari{width:clamp(230px,64vw,284px);filter:drop-shadow(0 18px 18px rgba(80,40,110,.16))}
.fv__side{
  position:absolute;bottom:60px;z-index:5;height:auto;
  filter:drop-shadow(0 4px 4px rgba(80,40,110,.10));
  animation:bob 5.4s ease-in-out infinite;
}
.fv__side--l{left:18%;width:clamp(44px,12vw,54px)}
.fv__side--r{right:12%;width:clamp(46px,13vw,58px);animation-duration:4.8s;animation-delay:-2.2s}
.fv__side.is-hop{animation:hop .6s ease-out}
.fv__copy{padding-top:26px}
.fv__tagline{
  margin:0 0 14px;font-family:var(--f-round);font-weight:700;
  font-size:clamp(17px,4.8vw,21px);letter-spacing:.14em;color:var(--ink);
}
.fv__word{margin:0 auto;width:min(310px,78%);line-height:0}
.fv__word img{display:block;width:100%;height:auto}
@media (prefers-reduced-motion:reduce){.fv__side{animation:none !important}}

/* 2026-09-18 修正 A〜C */
/* A：地面の線→キャッチの余白を80%に（90px→72px。地面64pxは固定なので上余白で詰める） */
.fv__copy{padding-top:8px}
/* B：大きなモヤリーを上端起点で120%に
   （これまでは img の max-width:100% で「シーン幅の50%」に抑えられていた → 60%へ） */
.fv__hero{width:60%}
.fv__moyari{width:100%;max-width:none}
/* C：Instagramアイコンを130%に */
.ig{width:62px;height:62px}
.ig__disc svg{width:36px;height:36px}
.ig__peek{width:83px}
@media (min-width:900px){
  .ig{width:73px;height:73px}
  .ig__peek{width:94px}
}

/* ============ 初回ローディング ============ */
.intro{display:none}
.intro-on{overflow:hidden}
.intro-on .intro{
  display:grid;place-items:center;position:fixed;inset:0;z-index:1000;
  background:#fff;cursor:pointer;
  transition:opacity .55s ease .1s, visibility 0s linear .65s;
}
.intro.is-out{opacity:0;visibility:hidden}
.intro.is-out .intro__inner{transform:scale(1.06);transition:transform .6s cubic-bezier(.3,.7,.3,1)}
.intro__inner{display:flex;flex-direction:column;align-items:center;width:min(250px,64vw)}

/* キャラ：上から落ちてきて、ぽよんと弾む */
.intro__chara-wrap{position:relative;width:78%;margin-bottom:14px}
.intro__chara{
  position:relative;z-index:2;display:block;width:100%;height:auto;
  transform-origin:50% 100%;opacity:0;
  animation:intro-drop 1s cubic-bezier(.3,.6,.4,1) .15s forwards,
            intro-wiggle 1.6s ease-in-out 1.3s infinite;
}
.intro.is-out .intro__chara{animation:intro-leap .55s cubic-bezier(.3,.6,.4,1) forwards}
@keyframes intro-drop{
  0%  {opacity:1;transform:translateY(-70vh) scale(.9,1.1)}
  45% {opacity:1;transform:translateY(0) scale(1,1)}
  55% {transform:translateY(0) scale(1.18,.8)}
  70% {transform:translateY(-22px) scale(.94,1.08)}
  84% {transform:translateY(0) scale(1.06,.94)}
  100%{opacity:1;transform:translateY(0) scale(1,1)}
}
@keyframes intro-wiggle{
  0%,100%{transform:rotate(0)} 25%{transform:rotate(-4deg)} 75%{transform:rotate(4deg)}
}
@keyframes intro-leap{
  0%{transform:scale(1.1,.88)} 40%{transform:translateY(-26px) scale(.95,1.06)} 100%{transform:translateY(-10px) scale(1)}
}
/* 足元の影：落ちてくるにつれて濃くなる */
.intro__shadow{
  position:absolute;left:50%;bottom:-6px;width:58%;height:12px;margin-left:-29%;
  border-radius:50%;background:rgba(140,72,152,.16);
  transform:scale(.2);opacity:0;animation:intro-shadow 1s ease-out .15s forwards;
}
@keyframes intro-shadow{0%{transform:scale(.2);opacity:0}45%{transform:scale(1.15);opacity:1}100%{transform:scale(1);opacity:1}}

/* 着地の瞬間にはじける丸（紫・黄・橙） */
.intro__pop{
  position:absolute;z-index:1;left:50%;top:58%;width:12px;height:12px;border-radius:50%;
  opacity:0;animation:intro-pop .8s cubic-bezier(.2,.8,.3,1) .62s forwards;
}
.intro__pop--1{background:#8C4898;--tx:-118px;--ty:-70px}
.intro__pop--2{background:#F6F062;--tx:112px;--ty:-84px;width:16px;height:16px;box-shadow:0 0 0 2px #1A1A1A inset}
.intro__pop--3{background:#F3981E;--tx:-96px;--ty:34px;width:9px;height:9px}
.intro__pop--4{background:#C08EBE;--tx:104px;--ty:28px}
.intro__pop--5{background:#F6F062;--tx:-40px;--ty:-128px;width:10px;height:10px;box-shadow:0 0 0 2px #1A1A1A inset}
.intro__pop--6{background:#8C4898;--tx:46px;--ty:-122px;width:8px;height:8px}
@keyframes intro-pop{
  0%  {opacity:1;transform:translate(-50%,-50%) scale(.3)}
  60% {opacity:1;transform:translate(calc(-50% + var(--tx)),calc(-50% + var(--ty))) scale(1)}
  100%{opacity:0;transform:translate(calc(-50% + var(--tx)*1.12),calc(-50% + var(--ty)*1.12)) scale(.6)}
}

/* ロゴタイプ：ぴょこっと出る */
.intro__word{
  display:block;width:100%;height:auto;opacity:0;transform-origin:50% 100%;
  animation:intro-word .6s cubic-bezier(.34,1.56,.64,1) .95s forwards;
}
@keyframes intro-word{0%{opacity:0;transform:translateY(18px) scale(.6,.4)}100%{opacity:1;transform:none}}
.intro__tag{
  margin:14px 0 0;font-family:var(--f-round);font-weight:700;font-size:14px;letter-spacing:.14em;
  color:var(--ink);white-space:nowrap;opacity:0;animation:intro-fade .6s ease 1.35s forwards;
}
@keyframes intro-fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .intro__chara,.intro__word,.intro__tag,.intro__shadow{animation:none !important;opacity:1;transform:none}
  .intro__pop{display:none}
}

/* =========================================================
   2026-09-26 フィードバック反映
   ========================================================= */
/* ルビ（Nēne → ねえね） */
ruby{ruby-position:over}
rt{font-size:.42em;font-weight:700;letter-spacing:.12em;color:var(--purple-d)}
.sec--intro .lead rt{font-size:.5em}

/* 【聴く】【届ける】【変えていく】：見出しだけにしたので文字を大きく、アイコンはシンプルな丸アイコンに */
.card__head{margin-bottom:8px}
.card__ico{width:64px;height:64px}
.card__ttl{font-size:clamp(19px,5.4vw,22px);line-height:1.4;letter-spacing:.04em}
.modal__chara{width:min(140px,50%)}

/* 利用の流れ */
.sec--chui{padding-bottom:10px}
.sec--flow{background:var(--yellow-p);padding-top:34px;padding-bottom:40px}
.flow{list-style:none;margin:0;padding:0;display:grid;gap:22px}
.flow__step{
  position:relative;background:#fff;border-radius:18px;padding:16px 18px 16px 86px;
  box-shadow:0 5px 16px -10px rgba(80,40,110,.3);min-height:72px;
  display:flex;flex-direction:column;justify-content:center;
}
.flow__step:not(:last-child)::after{
  content:"";position:absolute;left:50%;bottom:-17px;transform:translateX(-50%);
  border-left:9px solid transparent;border-right:9px solid transparent;border-top:11px solid var(--purple-l);
}
.flow__num{
  position:absolute;left:16px;top:50%;transform:translateY(-50%);
  width:56px;height:56px;border-radius:50%;background:var(--purple);color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-family:var(--f-round);font-weight:700;font-size:10px;letter-spacing:.08em;line-height:1;
}
.flow__num b{font-size:22px;font-weight:900;margin-top:2px}
.flow__txt{margin:0;font-family:var(--f-round);font-weight:700;font-size:15px;line-height:1.6}
.flow__txt small{display:block;font-size:12.5px;font-weight:500;color:var(--ink-2)}
.flow__txt a{color:var(--purple-d)}
.flow__memo{margin:6px 0 0;font-size:11.5px;line-height:1.7;color:var(--ink-2)}
.flow__line{
  margin:24px 0 0;text-align:center;font-family:var(--f-round);font-weight:700;font-size:14px;
  color:var(--purple-d);
}

/* ほかの相談窓口：アコーディオン */
.mado-acc{margin:0}
.mado-acc__btn{
  list-style:none;cursor:pointer;position:relative;
  display:block;margin:0 auto;max-width:300px;padding:14px 44px 14px 24px;text-align:center;
  background:#fff;border:2px solid var(--purple);border-radius:999px;
  font-family:var(--f-round);font-weight:700;font-size:15px;color:var(--purple-d);
  box-shadow:0 5px 0 var(--purple-l);transition:transform .15s, box-shadow .15s;
}
.mado-acc__btn::-webkit-details-marker{display:none}
.mado-acc__btn::after{
  content:"";position:absolute;right:22px;top:50%;width:9px;height:9px;
  border-right:2.5px solid var(--purple);border-bottom:2.5px solid var(--purple);
  transform:translateY(-70%) rotate(45deg);transition:transform .25s;
}
.mado-acc[open] .mado-acc__btn::after{transform:translateY(-25%) rotate(-135deg)}
.mado-acc__btn:active{transform:translateY(3px);box-shadow:0 2px 0 var(--purple-l)}
.mado-acc[open] .mado{margin-top:22px;animation:fade .3s ease}

/* 利用規約リンク（お問い合わせフォームの下） */
.terms{margin:22px 0 0;font-size:13px}
.terms a{color:#fff;text-underline-offset:3px}

/* アコーディオンを開いたときに画面が動かないように（ブラウザのスクロール補正を止める） */
.mado-acc,.mado-acc .mado{overflow-anchor:none}
.mado-acc__btn{-webkit-tap-highlight-color:transparent}

/* ============ 2026-09-30：リードのマーカー ============ */
.lead .marker{
  background:linear-gradient(transparent 58%, rgba(246,240,98,.95) 58%, rgba(246,240,98,.95) 92%, transparent 92%) no-repeat 0 0 / 0% 100%;
  font-weight:700;padding:0 .15em;
  transition:background-size 1s cubic-bezier(.5,0,.2,1) .5s;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}
.lead .marker--2{transition-delay:1.4s}
.lead.is-in .marker,html:not(.js) .lead .marker{background-size:100% 100%}

/* ============ 2026-09-30：スマホのハンバーガーメニュー ============ */
/* 右上＝メニュー、その下にInstagram。インスタのモヤリーは上ではなく左から顔を出す */
.burger{
  position:absolute;top:calc(12px + env(safe-area-inset-top,0px));right:12px;z-index:62;
  width:62px;height:62px;border:0;border-radius:50%;cursor:pointer;
  background:#fff;color:var(--purple-d);
  box-shadow:0 8px 20px -8px rgba(140,72,152,.55), 0 0 0 2px var(--purple-l);
  display:grid;place-items:center;align-content:center;gap:5px;padding:0;
  transition:transform .25s, background .25s;
}
.burger:hover{transform:scale(1.05)}
.burger__bars{position:relative;width:26px;height:18px;display:block}
.burger__bars i{
  position:absolute;left:0;width:100%;height:3px;border-radius:3px;background:currentColor;
  transition:transform .3s, opacity .2s, top .3s;
}
.burger__bars i:nth-child(1){top:0}
.burger__bars i:nth-child(2){top:7.5px}
.burger__bars i:nth-child(3){top:15px}
.burger__txt{font:700 9px/1 var(--f-round);letter-spacing:.12em}
.burger[aria-expanded="true"]{background:var(--purple);color:#fff}
.burger[aria-expanded="true"] .burger__bars i:nth-child(1){top:7.5px;transform:rotate(45deg)}
.burger[aria-expanded="true"] .burger__bars i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] .burger__bars i:nth-child(3){top:7.5px;transform:rotate(-45deg)}

.ig{top:calc(86px + env(safe-area-inset-top,0px))}
.ig:hover .ig__peek,.ig:focus-visible .ig__peek,.ig.is-peek .ig__peek{
  transform:translate(-128%,-46%) rotate(-12deg) scale(1);
}

.drawer{
  position:absolute;inset:0;z-index:61;
  background:rgba(241,231,243,.97);
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  padding:90px 32px 40px;
  opacity:0;transition:opacity .25s;
}
.drawer[hidden]{display:none}
.drawer.is-open{opacity:1}
.drawer__list{list-style:none;margin:0;padding:0;width:100%;max-width:300px;display:grid;gap:12px}
.drawer__list a{
  display:block;text-align:center;text-decoration:none;
  font:700 18px/1 var(--f-round);letter-spacing:.08em;color:var(--purple-d);
  background:#fff;border:1.5px solid var(--purple-l);border-radius:999px;padding:18px 16px;
  transform:translateY(12px);opacity:0;
  transition:transform .4s cubic-bezier(.34,1.56,.64,1), opacity .3s, background .2s, color .2s;
}
.drawer.is-open .drawer__list a{transform:none;opacity:1}
.drawer.is-open li:nth-child(2) a{transition-delay:.04s}
.drawer.is-open li:nth-child(3) a{transition-delay:.08s}
.drawer.is-open li:nth-child(4) a{transition-delay:.12s}
.drawer.is-open li:nth-child(5) a{transition-delay:.16s}
.drawer__list a:hover,.drawer__list a:focus-visible{background:var(--purple);color:#fff}
.drawer__chara{width:92px;margin-top:26px;animation:bob 4.6s ease-in-out infinite}
.menu-open .ig,.menu-open .dock{visibility:hidden}

@media (min-width:900px){
  .burger,.drawer{display:none !important}
  .ig{top:72px}
  .ig:hover .ig__peek,.ig:focus-visible .ig__peek,.ig.is-peek .ig__peek{transform:translate(-50%,-122%) scale(1)}
}
@media (prefers-reduced-motion:reduce){
  .nest__ill,.drawer__chara{animation:none !important}
  .lead .marker{transition:none}
}

/* =========================================================
   2026-09-30 スクロール演出（要素はそのまま、出方だけ強化）
   transform ではなく translate / scale / rotate を使うので、
   キャラのふわふわ（bob 等の transform アニメ）と重ねがけできる
   ========================================================= */
@media (prefers-reduced-motion:no-preference){
  /* 共通：下から・少し小さく・ぼけた状態からスッと */
  .js .reveal{
    transform:none;translate:0 38px;scale:.96;filter:blur(6px);
    transition:opacity .8s ease, translate 1s cubic-bezier(.16,1,.3,1),
      scale 1s cubic-bezier(.16,1,.3,1), rotate 1s cubic-bezier(.16,1,.3,1),
      filter .8s ease, letter-spacing 1.4s cubic-bezier(.16,1,.3,1);
  }
  .js .reveal.is-in{translate:0 0;scale:1;rotate:0deg;filter:none}

  /* 子要素で見せるものは、親の箱は動かさない */
  .js .h-main.reveal,.js .h-serif.reveal,.js .cards.reveal,.js .zukai.reveal,
  .js .notes.reveal,.js .flow.reveal{opacity:1;translate:none;scale:1;filter:none}

  /* ---- 見出し：1文字ずつポンッと跳ねて出る＋キラッ ---- */
  .js .ch{display:inline-block}
  .js .h-main .ch,.js .zukai__ttl .ch{opacity:0}
  .h-main.is-in .ch,.zukai.is-in .zukai__ttl .ch{
    animation:ch-pop .75s cubic-bezier(.34,1.56,.64,1) calc(var(--i) * 45ms) both;
  }
  @keyframes ch-pop{
    0%  {opacity:0;translate:0 .9em;rotate:14deg;scale:.3}
    60% {opacity:1}
    100%{opacity:1;translate:0 0;rotate:0deg;scale:1}
  }
  .h-main{position:relative}
  .h-main::before,.h-main::after{
    content:"✦";position:absolute;top:-.1em;font-size:.6em;line-height:1;color:var(--orange);
    opacity:0;pointer-events:none;
  }
  .h-main::before{left:6%}
  .h-main::after{right:6%;top:.9em;font-size:.45em;color:var(--yellow-d)}
  .h-main.is-in::before{animation:sparkle 1.1s ease-out .45s both}
  .h-main.is-in::after{animation:sparkle 1.1s ease-out .65s both}
  @keyframes sparkle{
    0%  {opacity:0;scale:0;rotate:-90deg}
    45% {opacity:1;scale:1.4;rotate:0deg}
    100%{opacity:0;scale:.6;rotate:40deg}
  }

  /* ---- 大きめのコピー：1文字ずつ、ぼけからピントが合う ---- */
  .js .h-serif .ch{opacity:0}
  .h-serif.is-in .ch{animation:ch-focus .9s ease-out calc(var(--i) * 38ms) both}
  @keyframes ch-focus{
    0%  {opacity:0;filter:blur(8px);translate:0 -.35em}
    100%{opacity:1;filter:blur(0);translate:0 0}
  }

  /* ---- サブ見出し：字間がキュッと締まる ---- */
  .js .h-sub.reveal{letter-spacing:.6em;filter:none;translate:0 10px}
  .js .h-sub.reveal.is-in{letter-spacing:.14em;translate:0 0}

  /* ---- 本文リード：上から下へ幕が開くように ---- */
  /* clip-path だと IntersectionObserver が「見えていない」と判定して発火しないので mask で */
  .js .lead.reveal{
    filter:none;scale:1;translate:0 16px;
    -webkit-mask-image:linear-gradient(to bottom,#000 40%,transparent 60%);
            mask-image:linear-gradient(to bottom,#000 40%,transparent 60%);
    -webkit-mask-size:100% 250%;mask-size:100% 250%;
    -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
    -webkit-mask-position:0 100%;mask-position:0 100%;
    transition:opacity .6s ease, translate 1s cubic-bezier(.16,1,.3,1),
      -webkit-mask-position 1.4s cubic-bezier(.65,0,.35,1), mask-position 1.4s cubic-bezier(.65,0,.35,1);
  }
  .js .lead.reveal.is-in{-webkit-mask-position:0 0;mask-position:0 0;translate:0 0}

  /* ---- 相談ブロック：ぽよんと出て、ボタンの後ろからキャラが顔を出す ---- */
  .js .talk.reveal{scale:.82;translate:0 30px;
    transition-timing-function:ease, cubic-bezier(.34,1.56,.64,1), cubic-bezier(.34,1.56,.64,1)}
  .js .reveal .btn-wrap__chara{
    translate:0 70%;opacity:0;
    transition:translate .7s cubic-bezier(.34,1.8,.64,1) .55s, opacity .25s .55s, transform .3s;
  }
  .js .reveal .btn-wrap__chara--r{transition-delay:.75s,.75s,0s}
  .js .reveal.is-in .btn-wrap__chara{translate:0 0;opacity:1}
  .js .talk.reveal .hours{opacity:0;scale:.9;transition:opacity .5s .9s, scale .7s cubic-bezier(.34,1.56,.64,1) .9s}
  .js .talk.reveal.is-in .hours{opacity:1;scale:1}

  /* ---- モヤモヤの吹き出し：左右から飛び込んで、キャラがぴょん ---- */
  .js .bubble.reveal{filter:none;translate:-70px 0;rotate:-7deg;scale:.6;
    transition-timing-function:ease, cubic-bezier(.34,1.45,.64,1), cubic-bezier(.34,1.45,.64,1), cubic-bezier(.34,1.45,.64,1)}
  .js .bubble--2.reveal{translate:70px 0;rotate:7deg}
  /* 個別の初期値は共通の .is-in と同じ強さなので、戻り先を個別にも書く（書かないと小さく傾いたまま止まる） */
  .js .bubble.reveal.is-in,.js .talk.reveal.is-in,
  .js .chui__friend.reveal.is-in,.js .mado__friend.reveal.is-in{translate:0 0;rotate:0deg;scale:1}
  .js .bubble.reveal .bubble__chara{
    translate:0 46px;opacity:0;
    transition:translate .75s cubic-bezier(.34,1.9,.64,1) .35s, opacity .25s .35s;
  }
  .js .bubble.reveal.is-in .bubble__chara{translate:0 0;opacity:1}

  /* ---- モヤリー紹介：上から落ちてきてバウンド ---- */
  .js .chara-card.reveal{filter:none;translate:none;scale:1}
  .js .chara-card.reveal .chara-card__img{
    translate:0 -90px;opacity:0;
    transition:translate 1s cubic-bezier(.34,1.9,.64,1) .1s, opacity .3s .1s;
  }
  .js .chara-card.reveal .chara-card__name,.js .chara-card.reveal .chara-card__box{
    opacity:0;translate:0 24px;transition:opacity .6s .55s, translate .8s cubic-bezier(.16,1,.3,1) .55s;
  }
  .js .chara-card.reveal .chara-card__box{transition-delay:.7s,.7s}
  .js .chara-card.reveal.is-in :is(.chara-card__img,.chara-card__name,.chara-card__box){translate:0 0;opacity:1}

  /* ---- ポエム：ゆっくり、ぼけて広がった字がまとまる ---- */
  .js .poem .reveal{translate:0 0;scale:1;filter:blur(10px);letter-spacing:.22em;
    transition-duration:1.4s,1.4s,1.4s,1.4s,1.4s,1.6s}
  .js .poem .reveal.is-in{filter:none;letter-spacing:.03em}
  .js .poem .poem__last{scale:.88}
  .js .poem .poem__last.is-in{scale:1}

  /* ---- 3つのカード：左右交互にすべり込み、アイコンがくるっと ---- */
  .js .cards.reveal .card{
    opacity:0;translate:-90px 0;rotate:-5deg;
    transition:opacity .6s ease, translate .9s cubic-bezier(.34,1.3,.64,1), rotate .9s cubic-bezier(.34,1.3,.64,1);
  }
  .js .cards.reveal .card:nth-child(2){translate:90px 0;rotate:5deg;transition-delay:.18s}
  .js .cards.reveal .card:nth-child(3){transition-delay:.36s}
  .js .cards.reveal.is-in .card{opacity:1;translate:0 0;rotate:0deg}
  .js .cards.reveal .card__ico{scale:0;rotate:-200deg;transition:scale .8s cubic-bezier(.34,1.7,.64,1), rotate .8s cubic-bezier(.34,1.3,.64,1)}
  .js .cards.reveal .card:nth-child(1) .card__ico{transition-delay:.35s}
  .js .cards.reveal .card:nth-child(2) .card__ico{transition-delay:.53s}
  .js .cards.reveal .card:nth-child(3) .card__ico{transition-delay:.71s}
  .js .cards.reveal.is-in .card__ico{scale:1;rotate:0deg}

  /* ---- 同心円の図：光がふわっと広がり → 円 → 聴く → 届ける → 変えていく ---- */
  .js .zukai.reveal .nest__glow{opacity:0;scale:.15;
    transition:opacity 1s ease .1s, scale 1.6s cubic-bezier(.16,1,.3,1) .1s}
  /* 円は transform:translate(-50%,-50%) で中央寄せしているので、scale プロパティではなく transform ごと動かす */
  .js .zukai.reveal .nest__ring{opacity:0;transform:translate(-50%,-50%) scale(.35);
    transition:opacity .6s ease .5s, transform 1.1s cubic-bezier(.34,1.4,.64,1) .5s}
  .js .zukai.reveal.is-in .nest__ring{transform:translate(-50%,-50%) scale(1)}
  .js .zukai.reveal .nest__ring--3{transition-delay:.75s}
  .js .zukai.reveal .nest__step{opacity:0;scale:.2;translate:0 24px;
    transition:opacity .4s ease, scale .8s cubic-bezier(.34,1.7,.64,1), translate .8s cubic-bezier(.34,1.7,.64,1)}
  .js .zukai.reveal .nest__step--listen {transition-delay:1s}
  .js .zukai.reveal .nest__step--deliver{transition-delay:1.35s}
  .js .zukai.reveal .nest__step--change {transition-delay:1.7s}
  .js .zukai.reveal.is-in :is(.nest__glow,.nest__ring,.nest__step){opacity:1}
  .js .zukai.reveal.is-in :is(.nest__glow,.nest__step){scale:1;translate:0 0}
  /* サブキャラは「変えていく」のあとに左右からぴょこっと */
  .js .zukai.reveal .nest__friend{opacity:0;scale:.3;
    transition:opacity .4s ease 2s, scale .8s cubic-bezier(.34,1.7,.64,1) 2s, translate .8s cubic-bezier(.34,1.7,.64,1) 2s}
  .js .zukai.reveal .nest__friend--utubo{translate:-8cqw 4cqw}
  .js .zukai.reveal .nest__friend--mere{translate:8cqw 4cqw;transition-delay:2.25s}
  .js .zukai.reveal.is-in .nest__friend{opacity:1;scale:1;translate:0 0}

  /* ---- 注意事項：1行ずつ左から ---- */
  .js .notes.reveal li{opacity:0;translate:-36px 0;
    transition:opacity .6s ease, translate .8s cubic-bezier(.16,1,.3,1)}
  .js .notes.reveal li:nth-child(2){transition-delay:.15s}
  .js .notes.reveal li:nth-child(3){transition-delay:.3s}
  .js .notes.reveal li:nth-child(n+4){transition-delay:.45s}
  .js .notes.reveal.is-in li{opacity:1;translate:0 0}

  /* ---- 利用の流れ：STEPが順番に落ちてきて、番号がポン ---- */
  .js .flow.reveal .flow__step{opacity:0;translate:0 -30px;
    transition:opacity .5s ease, translate .8s cubic-bezier(.34,1.5,.64,1)}
  .js .flow.reveal .flow__num{scale:0;rotate:-120deg;
    transition:scale .7s cubic-bezier(.34,1.8,.64,1), rotate .7s cubic-bezier(.34,1.3,.64,1)}
  .js .flow.reveal .flow__step:nth-child(2),.js .flow.reveal .flow__step:nth-child(2) .flow__num{transition-delay:.3s}
  .js .flow.reveal .flow__step:nth-child(3),.js .flow.reveal .flow__step:nth-child(3) .flow__num{transition-delay:.6s}
  .js .flow.reveal.is-in .flow__step{opacity:1;translate:0 0}
  .js .flow.reveal.is-in .flow__num{scale:1;rotate:0deg}

  /* ---- 単体のキャラ：下からジャンプして着地 ---- */
  .js .chui__friend.reveal,.js .mado__friend.reveal{
    filter:none;translate:0 70px;rotate:-25deg;scale:.4;
    transition-timing-function:ease, cubic-bezier(.34,1.9,.64,1), cubic-bezier(.34,1.9,.64,1), cubic-bezier(.34,1.9,.64,1);
  }
  .js .sec__friend{opacity:0;translate:0 60px;rotate:-30deg;
    transition:opacity .3s ease, translate .9s cubic-bezier(.34,1.9,.64,1), rotate .9s cubic-bezier(.34,1.5,.64,1)}
  .js .sec__friend.is-in{opacity:1;translate:0 0;rotate:0deg}

  /* ---- noteのカード：右から順にすべり込む ---- */
  .js .carousel[data-carousel] .ncard{opacity:0;translate:60px 0;rotate:3deg;
    transition:opacity .5s ease, translate .9s cubic-bezier(.16,1,.3,1), rotate .9s cubic-bezier(.16,1,.3,1)}
  .js .carousel[data-carousel] .ncard:nth-child(2){transition-delay:.12s}
  .js .carousel[data-carousel] .ncard:nth-child(3){transition-delay:.24s}
  .js .carousel[data-carousel] .ncard:nth-child(n+4){transition-delay:.36s}
  .js .carousel[data-carousel].is-in .ncard{opacity:1;translate:0 0;rotate:0deg}
}

/* =========================================================
   2026-10-08 修正指示（品川区より）
   ========================================================= */
/* 1-3：ロゴにルビ（FV／PC左レール） */
.fv__ruby{
  display:block;margin:0 0 4px;line-height:1;
  font-family:var(--f-round);font-weight:700;font-size:clamp(13px,3.6vw,15px);
  letter-spacing:.5em;text-indent:.5em;color:var(--purple-d);
}
.logo-split__ruby{
  position:absolute;left:0;right:0;top:61.2%;text-align:center;line-height:1;
  font-family:var(--f-round);font-weight:700;font-size:clamp(10px,.95vw,14px);
  letter-spacing:.5em;text-indent:.5em;color:var(--purple-d);
}
/* 1-2：品川区若者支援コーディネーター（「品川区に住む・通う・働く」と同じ大きさ） */
.fv__org{
  margin:14px 0 0;font-family:var(--f-round);font-weight:700;
  font-size:clamp(17px,4.7vw,19px);line-height:1.6;letter-spacing:.01em;color:var(--ink);
}

/* 2-1：「LINE利用の流れ」→「注意事項」の順に入れ替え */
.sec--flow{border-radius:34px 34px 0 0;padding-top:56px;padding-bottom:30px}
.sec--chui{padding-top:30px;padding-bottom:10px}
/* 2-2：見出しの「LINE」 */
.h-line{
  display:inline-block;margin-right:.3em;padding:.12em .42em;border-radius:.3em;
  background:var(--line-green,#06C755);color:#fff;font-size:.62em;letter-spacing:.04em;
  vertical-align:.22em;line-height:1.2;
}
/* 2-3：STEP3 */
.flow__desc{margin:8px 0 0;font-size:13.5px;line-height:1.8;color:var(--ink)}
.flow__step:last-child{justify-content:flex-start;padding-top:18px;padding-bottom:18px}
.flow__step:last-child .flow__num{top:18px;transform:none}
/* 2-4：どんなお話しができるの？ */
.h-tags{
  margin:48px 0 18px;text-align:center;font-family:var(--f-round);font-weight:900;
  font-size:clamp(19px,5.2vw,22px);line-height:1.5;letter-spacing:.02em;
}
.tags{
  list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 8px;
}
.tags li{
  background:#fff;border:2px solid var(--purple);border-radius:999px;
  padding:7px 14px;font-family:var(--f-round);font-weight:700;font-size:14px;line-height:1.4;
  color:var(--purple-d);box-shadow:0 3px 0 var(--purple-l);
}