@charset "utf-8";
/* ==========================================================================
   WHITEBOX 特設サイト / event202610（v4）
   ------------------------------------------------------------------------
   骨格（v3）：全幅の帯＋1本の格子（最大1200px）／追従ヘッダー＋ページ内ナビ／全区画共通の見出しの型／面の色の流れ
   動き（v4）：動かす意味がある場所だけを動かす
     ・すごろく盤：スクロールで駒が1マスずつ進む（読み手が自分で進める）
     ・実例　　　：96個の報告のうち72個が「中身の抜けた枠」に裏返る
     ・見出しは行ごとにせり上がる／チェックは書き込まれる／帯は流れる
   すべて .js が付いているときだけ隠す。prefers-reduced-motion では止める。
   ※ WordPressテーマへの依存ゼロ。プレーンCSSのみ。
   ========================================================================== */

:root{
  /* チラシ実測 */
  --blue:#2895d4;
  --navy:#192b50;
  --teal:#42b3b2;
  --pink:#ec7496;
  --yellow:#ffe30f;
  --cyan:#53c3f1;
  --c-blue:#aac9ea;
  --c-mint:#b3dad9;
  --c-pink:#f6c0cd;
  --c-yellow:#fff1a3;
  --ink:#3a3634;
  /* 読みやすさのための濃い版 */
  --ink-2:#5b5653;
  --blue-deep:#2289c7;
  --blue-ink:#1c6ea8;
  --pink-ink:#df5d86;
  --pink-deep:#c13a66;
  /* 面 */
  --pale-blue:#eaf5fb;
  --pale-pink:#fdf0f3;
  --rule:#d5e4ee;

  --hdr:0px;          /* ヘッダーは置かない（ページ内ページのため） */
  --pad:clamp(20px,4vw,40px);
  --sec:clamp(88px,10vw,144px);

  --ease-out:cubic-bezier(.19,1,.22,1);
  --ease-back:cubic-bezier(.34,1.56,.64,1);
  --star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.6l3.15 6.7 7.25.95-5.35 5.05 1.4 7.2L12 18l-6.45 3.5 1.4-7.2L1.6 9.25l7.25-.95z' fill='%23ffe30f' stroke='%23192b50' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E");
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:#fff;color:var(--ink);
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  font-size:16px;line-height:1.85;font-weight:400;
  word-break:auto-phrase;overflow-wrap:break-word;line-break:strict;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,h4,p,ol,ul,dl,dd{margin:0}
ol,ul{padding:0;list-style:none}
h1,h2,h3,h4{font-weight:900;line-height:1.4;letter-spacing:.03em;font-feature-settings:"palt";text-wrap:balance}
p,li,dd{text-wrap:pretty}
em{font-style:normal}
:focus-visible{outline:3px solid var(--navy);outline-offset:3px}
.np{white-space:nowrap}
.tbd{color:#b3470c;font-weight:700}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.wrap{width:min(100% - var(--pad)*2, 1200px);margin-inline:auto}

/* ---------- 部品 ---------------------------------------------------------- */
.btn{
  position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:.7em;
  min-height:56px;padding:0 2em;border-radius:999px;
  font-size:1rem;font-weight:700;letter-spacing:.04em;text-decoration:none;white-space:nowrap;
}
/* 押す前に、色が左から満ちる */
.btn::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--yellow);transform:scaleX(0);transform-origin:right center;transition:transform .55s var(--ease-out)}
.btn:hover::before{transform:scaleX(1);transform-origin:left center}
.btn::after,.lnk::after{content:"";width:.45em;height:.45em;border-top:2.5px solid currentColor;border-right:2.5px solid currentColor;transform:rotate(45deg);transition:translate .35s var(--ease-out)}
.btn:hover::after,.lnk:hover::after{translate:5px 0}
.btn--white{background:#fff;color:var(--navy)}
.btn--lg{min-height:64px;padding:0 2.4em;font-size:1.1rem}
.lnk{display:inline-flex;align-items:center;gap:.55em;font-weight:700;text-decoration:underline;text-underline-offset:.35em;text-decoration-thickness:2px}
.lnk--white{color:#fff}
.lnk--white:hover{text-decoration-color:var(--yellow)}

/* 見出しの型：矢羽根のタグ＋大見出し */
.tag{
  display:inline-block;padding:.34em 1.9em .34em .9em;
  background:var(--blue-ink);color:#fff;font-size:.82rem;font-weight:700;letter-spacing:.08em;line-height:1.5;
  clip-path:polygon(0 0,100% 0,calc(100% - .75em) 50%,100% 100%,0 100%);
}
.tag--white{background:#fff;color:var(--blue-ink)}
.sec{padding-block:var(--sec);scroll-margin-top:var(--hdr)}
.sh{margin-bottom:clamp(40px,5vw,64px)}
.sh__title{margin-top:18px;font-size:clamp(1.9rem,3.6vw,2.9rem);line-height:1.36;color:var(--navy)}
.sh--split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:20px clamp(32px,5vw,80px);align-items:end}
.sh__lead{font-size:clamp(1rem,1.3vw,1.1rem);line-height:1.95;color:var(--ink-2)}
.sh__lead em{color:var(--pink-deep);font-weight:700}

/* 見出しの行（行ごとに下からせり上がる） */
.ln{display:block;overflow:hidden;padding-bottom:.1em}   /* 字面（行の高さより大きい）を切らず、行どうしも重ねない */
.ln__in{display:block}

/* ---------- サービスサイトへのボタン（右端に固定する縦書きの札） ---------- */
.fab{
  position:fixed;right:0;top:50%;z-index:60;translate:0 -50%;
  display:flex;flex-direction:column;align-items:center;gap:12px;
  padding:18px 12px 16px;border:2px solid #fff;border-right:0;border-radius:12px 0 0 12px;
  background:var(--navy);color:#fff;text-decoration:none;
  transition:background-color .3s ease,padding .35s var(--ease-out);
}
.fab:hover{background:var(--blue-ink);padding-right:18px}
.fab:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
.fab__mark{display:block;width:28px;height:28px;color:var(--yellow)}
.fab__txt{writing-mode:vertical-rl;font-size:.9rem;font-weight:700;letter-spacing:.14em;line-height:1.2}
.fab__brand{display:block;margin-left:6px;font-size:.72rem;letter-spacing:.1em;opacity:.8}
.fab__arw{width:8px;height:8px;border-right:2.5px solid currentColor;border-bottom:2.5px solid currentColor;rotate:-45deg;transition:translate .35s var(--ease-out)}
.fab:hover .fab__arw{translate:3px 0}
.js .fab{translate:110% -50%}
.js.is-ready .fab{translate:0 -50%;transition:translate .9s var(--ease-out) 1.8s,background-color .3s ease,padding .35s var(--ease-out)}

/* ---------- ヒーロー ------------------------------------------------------ */
.hero{position:relative;overflow:hidden;background:var(--blue);color:#fff}
.hero :focus-visible{outline-color:#fff}
.hero__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);min-height:clamp(580px,calc(100svh - 56px),860px)}
.hero__copy{position:relative;z-index:1;align-self:center;padding-block:clamp(56px,7vw,96px)}
.hero__ribbon{
  position:relative;display:inline-block;padding:.4em 2.2em .4em 0;
  background:var(--yellow);box-shadow:0 0 0 100vw var(--yellow);clip-path:inset(0 -3px 0 -100vw);color:var(--navy);
  font-size:clamp(1.17rem,1.6vw,1.3rem);font-weight:900;letter-spacing:.04em;line-height:1.5;
}
/* 折り返すときは「お考えの、」の後だけ（各行は途中で折らない） */
.hero__ribbon-l{display:inline-block;white-space:nowrap}
.hero__ribbon::after{content:"";position:absolute;top:0;bottom:0;right:-3px;width:calc(.9em + 3px);background:var(--blue);clip-path:polygon(100% 0,0 50%,100% 100%)}
.hero__title{margin-top:clamp(24px,3vw,36px);font-size:clamp(2.5rem,5.4vw,4.8rem);line-height:1.3;letter-spacing:.02em}
.hero__event{margin-top:clamp(24px,3vw,36px);display:grid;gap:2px}
.hero__event-name,.hero__event-meta{font-size:clamp(1.17rem,1.5vw,1.3rem);font-weight:700;line-height:1.65}
.hero__event-name{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;font-weight:900}
.hero__badge{display:inline-block;padding:.12em .8em;border-radius:5px;background:var(--yellow);color:var(--navy);font-size:1rem;font-weight:900;letter-spacing:.08em;line-height:1.6}
.hero__act{margin-top:clamp(32px,3.6vw,44px);display:flex;flex-wrap:wrap;align-items:center;gap:16px 32px}
.hero__art{position:relative}
.hero__dots{position:absolute;right:-6%;top:12%;width:74%;height:62%;background-image:radial-gradient(rgba(255,255,255,.24) 2.6px,transparent 3px);background-size:22px 22px}
/* 人の幅（--mw）を基準に、尻尾の小さい丸が頭の右上 約(84%, 8%) に来る位置。人＋吹き出しの幅は 1.39倍 */
.hero__think{position:absolute;left:77%;top:calc(var(--mw) * -.263);width:62%;fill:#e3eef9;overflow:visible}
.hero__think *{transform-box:fill-box;transform-origin:center}
.hero__think .t1{transform-origin:12% 88%}
.hero__man{--mw:clamp(220px,23vw,360px);position:absolute;left:calc(50% - var(--mw) * .695);bottom:0;width:var(--mw)}
.hero__man img{width:100%}
.hero__scroll{position:absolute;z-index:2;left:50%;bottom:0;width:2px;height:64px;overflow:hidden;background:rgba(255,255,255,.28)}
.hero__scroll i{position:absolute;left:0;top:0;width:100%;height:40%;background:#fff;animation:scrollcue 2.2s var(--ease-out) infinite}
@keyframes scrollcue{0%{transform:translateY(-100%)}100%{transform:translateY(260%)}}

/* 出展情報が流れる帯 */
.ticker{overflow:hidden;background:var(--yellow);color:var(--navy)}
.ticker__track{display:flex;width:max-content;animation:marquee 110s linear infinite}   /* 1巡が約3000px。流れる速さは約27px/秒 */
.ticker:hover .ticker__track{animation-play-state:paused}
.ticker p{display:flex;flex-shrink:0}
.ticker span{display:inline-flex;align-items:center;gap:22px;padding:15px 22px 15px 0;font-size:clamp(.95rem,1.3vw,1.08rem);font-weight:900;letter-spacing:.04em;white-space:nowrap}
.ticker span::after{content:"";width:16px;height:16px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.6l3.15 6.7 7.25.95-5.35 5.05 1.4 7.2L12 18l-6.45 3.5 1.4-7.2L1.6 9.25l7.25-.95z' fill='%23192b50'/%3E%3C/svg%3E") center/contain no-repeat}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- WHITEBOXとは（答え → 渡す3つ → 進み方） ------------------------- */
.about__catch{margin-top:clamp(24px,3vw,32px);font-size:clamp(2.1rem,4.6vw,4rem);line-height:1.3;color:var(--blue)}
.about__catch em{color:var(--pink-ink)}
.about__lead{margin-top:clamp(20px,2.4vw,28px);font-size:clamp(1.05rem,1.4vw,1.2rem);font-weight:500;line-height:1.95}

/* 渡す3つ：語そのものを大きく。左に理由、右に3つと結論 */
.give{margin-top:clamp(64px,8vw,120px);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px clamp(40px,6vw,104px);align-items:start}
.give__title{font-size:clamp(1.5rem,2.4vw,2rem);color:var(--navy)}
.give__text p{margin-top:20px;line-height:2;color:var(--ink-2)}
.give__list{margin:0;padding:0;list-style:none}
.give__list li{display:grid;grid-template-columns:calc(clamp(2rem,3.6vw,3rem) * 3.2) minmax(0,1fr);align-items:center;gap:clamp(20px,3vw,40px);padding-block:clamp(18px,2.2vw,28px)}
.give__k{font-size:clamp(2rem,3.6vw,3rem);font-weight:900;line-height:1.1;letter-spacing:.02em;white-space:nowrap}
.give__k--flow{color:var(--blue-deep)}
.give__k--goal{color:var(--pink-ink)}
.give__k--rule{color:var(--navy)}
.give__list span{font-size:clamp(1.02rem,1.4vw,1.15rem);font-weight:700;line-height:1.75;color:var(--navy)}
.give__so{margin-top:clamp(28px,3.4vw,40px);display:grid;gap:12px}
.give__so-a{font-size:clamp(1.2rem,1.9vw,1.55rem);font-weight:900;line-height:1.6;color:var(--navy)}
.give__so-b{line-height:1.95;color:var(--ink-2)}
/* 結論に蛍光ペン（チラシの強調と同じ色） */
.mk{background:linear-gradient(transparent 60%,var(--c-pink) 60%) no-repeat 0 0/100% 100%}
.js .give__so .mk{background-size:0% 100%;transition:background-size .9s var(--ease-out) .5s}
.js .give__so.is-in .mk{background-size:100% 100%}

/* 進み方：1枚の面を3つの持ち場に分け、あいだに矢印 */
.flow{margin:clamp(56px,7vw,96px) 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-radius:20px;background:var(--pale-blue)}
.flow__col{position:relative;padding:clamp(28px,3vw,44px) clamp(24px,2.6vw,40px)}
.flow__col + .flow__col{border-left:2px solid #fff}
.flow__col + .flow__col::before{
  content:"";position:absolute;z-index:1;left:-19px;top:50%;width:36px;height:36px;translate:0 -50%;border:2px solid #fff;border-radius:50%;
  background:var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 5l7 7-7 7' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;
}
.flow__step{display:flex;align-items:center;gap:12px;font-size:clamp(1.15rem,1.6vw,1.35rem);color:var(--navy)}
.flow__step span{display:grid;place-items:center;flex-shrink:0;width:34px;height:34px;border-radius:50%;background:var(--yellow);color:var(--navy);font-size:1rem}
.flow__col p{margin-top:16px;line-height:1.95;color:var(--ink-2)}

/* ---------- すごろく ------------------------------------------------------ */
.sugo{position:relative;overflow:clip;background:var(--pale-blue)}   /* hidden だと盤の固定が効かない */
.sugo .wrap{position:relative;z-index:1}
.sugo__dots{position:absolute;right:clamp(12px,3vw,48px);top:clamp(20px,2.4vw,36px);width:198px;height:88px;
  background-image:radial-gradient(var(--cyan) 4px,transparent 4.5px);background-size:22px 22px;opacity:.75}

/* 盤：線路の絵（SVG）＋同じ比率の座標に置いた文字（HTML） */
.board{position:relative;width:100%;max-width:1400px;margin:0 auto;aspect-ratio:1500/760;container-type:inline-size}   /* 盤の座標は 1500×760 */
.board__svg{position:absolute;inset:0;width:100%;height:100%;z-index:2;overflow:visible}
.trk path{stroke:var(--navy);stroke-width:3;stroke-linejoin:round;transition:fill .5s ease}
.f-blue{fill:var(--c-blue)} .f-mint{fill:var(--c-mint)} .f-pink{fill:var(--c-pink)} .f-yellow{fill:var(--c-yellow)}
.arw path{fill:var(--navy)}
.board > .cell,
.board .fig,
.board .bubble{
  position:absolute;
  left:calc(var(--x) / 1500 * 100%);
  top:calc(var(--y) / 760 * 100%);
  width:calc(var(--w) / 1500 * 100%);
}
/* 下に尻尾がある吹き出しは下端を基準に置く＝文字が増えても上へ伸び、下の人にかからない */
.board .bubble--up{top:auto;bottom:calc((760 - var(--yb)) / 760 * 100%)}
.pain{display:contents}
.cell{height:calc(var(--h) / 760 * 100%);z-index:3;display:grid;place-items:center;text-align:center}
.c-blue{--hl:#7fb0e3} .c-mint{--hl:#7cc4c1} .c-pink{--hl:#eea0b4} .c-yellow{--hl:#f2d24a}
.cell__n{position:absolute;inset:0;display:grid;place-items:center;font-size:7.47cqw;font-weight:900;line-height:1;letter-spacing:-.04em;color:rgba(255,255,255,.62);pointer-events:none;transition:color .5s ease}
.cell__name{position:relative;font-size:clamp(15px,1.5cqw,23px);font-weight:700;line-height:1.3;color:var(--navy);letter-spacing:.02em;font-feature-settings:"palt";transition:scale .5s var(--ease-back)}
.cell__name small{display:block;font-size:.9em;font-weight:700}
.badge{
  position:absolute;left:9%;top:0;transform:translateY(-62%);z-index:5;
  display:inline-flex;align-items:center;gap:.1em;white-space:nowrap;
  padding:.18em .9em .18em 2em;border:2px solid var(--navy);border-radius:999px;background:var(--yellow);
  font-size:clamp(12px,1.05cqw,16px);font-weight:700;line-height:1.5;color:var(--navy);
  transition:opacity .4s ease,filter .4s ease;
}
.badge::before{content:"";position:absolute;left:-.7em;top:50%;width:2.4em;height:2.4em;transform:translateY(-54%) rotate(-8deg);background:var(--star) center/contain no-repeat}
.badge b{font-weight:900}
.badge--below{left:auto;right:6%;top:auto;bottom:0;transform:translateY(64%)}
.fig{z-index:3}
.bubble{
  z-index:4;background:#fff;border-radius:18px;
  padding:1em 1.25em;font-size:clamp(13px,1.02cqw,15px);line-height:1.65;color:var(--ink-2);
  transition:opacity .5s ease,translate .6s var(--ease-out),scale .6s var(--ease-back);
}
.bubble b{display:block;margin-bottom:.35em;font-size:1.13em;line-height:1.55;font-weight:700;color:var(--ink)}
.bubble::after{content:"";position:absolute;top:42%;width:22px;height:22px;background:inherit;border-radius:3px;transform:rotate(45deg)}
.bubble--r::after{right:-9px}
.bubble--l::after{left:-9px}
.bubble--b::after{top:auto;bottom:-9px;left:22%}
.pawn,.confetti{display:none}

/* 手に入る5つのアイテム：盤の下に1列。紺の枠と札で、盤とは別の «手に入るもの» として立てる */
.bag{position:relative;max-width:1120px;margin:clamp(48px,5vw,64px) auto 0;padding:clamp(28px,3vw,40px) clamp(20px,2.6vw,36px) clamp(20px,2.4vw,28px);border:3px solid var(--navy);border-radius:18px;background:#fff}
.bag__title{position:absolute;left:clamp(16px,2.4vw,32px);top:0;translate:0 -50%;padding:.45em 1.2em;border-radius:999px;background:var(--navy);color:#fff;font-size:clamp(.95rem,1.3vw,1.12rem);line-height:1.3;white-space:nowrap}
.bag__list{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px clamp(10px,1.6vw,24px)}
.bag__list li{display:flex;flex-direction:column;align-items:center;text-align:center;transition:opacity .45s ease,filter .45s ease}
.bag__star{display:grid;place-items:center;flex:0 0 auto;width:clamp(68px,7vw,92px);aspect-ratio:1;padding-top:.3em;font-size:clamp(1.2rem,1.8vw,1.5rem);font-weight:900;color:var(--navy);background:var(--star) center/contain no-repeat}
.bag__name{margin-top:10px;font-size:clamp(.95rem,1.25vw,1.1rem);font-weight:900;line-height:1.45;color:var(--navy)}
.bag__name small{display:block;font-size:.84em;font-weight:700;color:var(--ink-2)}
/* アイテム欄の締め（チラシの文） */
.bag__msg{margin-top:clamp(18px,2.2vw,26px);padding-top:clamp(14px,1.8vw,20px);border-top:1px solid var(--rule);font-weight:700;line-height:1.85;color:var(--blue-ink);text-align:center}

/* --- 盤を進める演出（JSが .is-play を付けたときだけ。幅1024px以上・高さ640px以上） --- */
.is-play .sugo__stage{height:330vh}
.is-play .sugo__pin{position:sticky;top:var(--hdr);height:calc(100svh - var(--hdr));display:flex;align-items:center}
.is-play .sugo__play{display:flex;flex-direction:column;align-items:center;gap:26px}
.is-play .sugo__play{width:min(100% - 2 * max(var(--pad), 80px), 1500px)}   /* 盤は横長なので、固定画面では格子（1200px）より広く使う */
.is-play .board{width:min(100%, calc((100svh - var(--hdr) - 232px) * 1500 / 760))}   /* 232px＝下のアイテム欄＋余白 */

.is-play .trk path.is-here{fill:#fff}
.is-play .cell.is-here .cell__n{color:var(--hl)}
.is-play .cell.is-here .cell__name{scale:1.07}
.is-play .badge{opacity:.3;filter:grayscale(1)}
.is-play .cell.is-got .badge{opacity:1;filter:none;animation:pop .7s var(--ease-back)}
.is-play .board.is-goal .fig--goal{animation:cheer .42s ease-in-out 4 alternate}
@keyframes cheer{to{translate:0 -6%}}
@keyframes pop{0%{scale:.6}55%{scale:1.2}100%{scale:1}}

/* 駒：マスからマスへ跳ねて移る */
.is-play .pawn{
  display:block;position:absolute;left:0;top:0;z-index:6;width:3.14cqw;pointer-events:none;
  transform:translate(calc(var(--px,410) * 1cqw / 15 - 50%), calc(var(--py,250) * 1cqw / 15 - 94%));
  transition:transform .62s var(--ease-out);
}
.pawn__hop.is-hop{animation:hop .62s cubic-bezier(.3,.7,.4,1)}
@keyframes hop{0%{translate:0 0}40%{translate:0 -42%}100%{translate:0 0}}
.pawn svg{width:100%;overflow:visible}
.pawn__body{fill:var(--pink-ink);stroke:var(--navy);stroke-width:2;stroke-linejoin:round}
.pawn__shine{fill:#fff;opacity:.75}
.pawn__shadow{fill:var(--navy);opacity:.18}

/* 上がりで舞う星 */
.is-play .confetti{display:block;position:absolute;left:calc(1108 / 1500 * 100%);top:calc(510 / 760 * 100%);z-index:7;pointer-events:none}
.confetti i{position:absolute;left:0;top:0;width:1.8cqw;aspect-ratio:1;background:var(--star) center/contain no-repeat;opacity:0}
.is-goal .confetti i{animation:burst 1.3s var(--ease-out) forwards}
.confetti i:nth-child(1){--dx:-7cqw;--dy:-9cqw;--r:-40deg}
.confetti i:nth-child(2){--dx:-2cqw;--dy:-12cqw;--r:20deg;animation-delay:.05s}
.confetti i:nth-child(3){--dx:4cqw;--dy:-11cqw;--r:60deg;animation-delay:.1s}
.confetti i:nth-child(4){--dx:8cqw;--dy:-6cqw;--r:-20deg;animation-delay:.02s}
.confetti i:nth-child(5){--dx:-9cqw;--dy:-3cqw;--r:80deg;animation-delay:.12s}
.confetti i:nth-child(6){--dx:10cqw;--dy:-1cqw;--r:-70deg;animation-delay:.08s}
@keyframes burst{0%{opacity:0;transform:translate(0,0) scale(.3)}20%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--r)) scale(1)}}

/* 盤の下の5つのアイテム：高さを抑えて横並び。手に入ったものから灯る */
.is-play .bag{width:100%;margin:0;padding:22px 24px 16px}
.is-play .bag__list li{flex-direction:row;gap:12px;text-align:left;opacity:.35;filter:grayscale(1)}
.is-play .bag__list li.is-got{opacity:1;filter:none}
.is-play .bag__list li.is-got .bag__star{animation:pop .7s var(--ease-back)}
.is-play .bag__star{width:56px;font-size:1rem}
.is-play .bag__name{margin-top:0;font-size:.95rem}
.is-play .bag__msg{margin-top:12px;padding-top:10px;font-size:.9rem;line-height:1.6}

/* ---------- 実例 ---------------------------------------------------------- */
.case{background:var(--pale-pink)}
.case__grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(32px,5vw,80px);align-items:center}
.case__viz{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(4px,.6vw,7px);max-width:470px}
.q{aspect-ratio:1;border-radius:3px;background:var(--blue);border:2px solid var(--blue)}
.q.is-void{background:#fff;border-color:var(--pink-ink)}
.case__legend{margin-top:16px;display:flex;flex-wrap:wrap;gap:6px 22px;font-size:.88rem;font-weight:700;color:var(--ink-2)}
.lg{display:inline-flex;align-items:center;gap:8px}
.lg::before{content:"";width:14px;height:14px;border-radius:3px;border:2px solid}
.lg--void::before{background:#fff;border-color:var(--pink-ink)}
.case__grid{align-items:center}
.case__num{display:flex;align-items:baseline;margin-bottom:clamp(22px,2.6vw,32px);line-height:1;font-weight:900;color:var(--pink-ink)}
.case__num b{font-size:clamp(5rem,11vw,8.6rem);letter-spacing:-.04em;font-weight:900;font-variant-numeric:tabular-nums}
.case__num .case__of{margin:0 .2em 0 0}
.case__num span{margin-left:.12em;font-size:clamp(1.5rem,2.6vw,2.2rem);color:var(--ink-2)}
.case__body p{font-size:clamp(1rem,1.3vw,1.08rem);line-height:2}
.case__body p + p{margin-top:1em}
.case__body strong{color:var(--pink-deep)}
.case__body .case__note{font-size:.85rem;color:var(--ink-2)}

/* ---------- フリープラン -------------------------------------------------- */
.plan{position:relative;overflow:hidden;background:var(--blue-ink);color:#fff}
.plan :focus-visible{outline-color:#fff}
.plan__stripe{position:absolute;right:0;top:0;bottom:0;width:clamp(160px,24vw,340px);overflow:hidden;pointer-events:none}
.plan__stripe::before{content:"";position:absolute;top:0;bottom:0;left:-30px;right:0;background:repeating-linear-gradient(45deg,var(--stripe,rgba(255,255,255,.08)) 0 10.6066px,transparent 10.6066px 21.2132px) 0 0/30px 30px;animation:stripe 1.6s linear infinite;will-change:transform}
@keyframes stripe{to{transform:translateX(30px)}}   /* 30px＝模様1周期ぶん。戻る瞬間も模様がつながる */
.plan__grid{position:relative;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,80px);align-items:end}
.plan__title{margin-top:18px;font-size:clamp(2.4rem,5.2vw,4.3rem);line-height:1.28}
.plan__spec{margin-top:clamp(20px,2.4vw,28px);max-width:30em;font-size:clamp(1.05rem,1.5vw,1.2rem);font-weight:700;line-height:1.95}
.plan__act{display:grid;gap:24px;justify-items:start}
.plan__note{font-size:.85rem;color:#e8f1f8}

/* ---------- DX支援事業者さまへ ＋ 対応業界 ------------------------------- */
/* 盛った版の指定は「振り切り版」ブロックにある */
.inds__list li:hover .inds__ico img{animation:iconhop .6s var(--ease-back)}
@keyframes iconhop{0%{translate:0 0;rotate:0deg}40%{translate:0 -14%;rotate:-6deg}100%{translate:0 0;rotate:0deg}}

/* ---------- 出展情報 ------------------------------------------------------ */
.event{background:var(--pale-blue)}
.event__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,72px);align-items:stretch}
.event__date{line-height:1;font-weight:900;color:var(--blue-deep)}
.event__date b{font-size:clamp(4.6rem,9vw,7.6rem);letter-spacing:-.03em;font-weight:900}
.event__date span{font-size:clamp(1.5rem,2.4vw,2rem)}
.event__time{margin-top:14px;font-weight:700}
.event__name{margin-top:clamp(20px,2.4vw,28px);font-size:clamp(1.35rem,2.2vw,1.7rem);color:var(--navy)}
.event__dl{margin-top:16px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 20px;line-height:1.8}
.event__dl dt{font-weight:700;color:var(--blue-ink)}
.event__map{min-height:380px;border-radius:12px;overflow:hidden;background:#d8e6ef}
.event__map iframe{display:block;width:100%;height:100%;min-height:380px;border:0}
.event__next{margin-top:clamp(32px,4vw,48px);display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 18px;line-height:1.7}
.event__next-label{font-size:.88rem;font-weight:700;color:var(--blue-ink)}
.event__next b{font-size:1.1rem;color:var(--navy)}

/* ---------- フッター ------------------------------------------------------ */
.gf{background:var(--navy);color:#fff;padding:0 0 40px}
.gf a{color:#fff}
.gf :focus-visible{outline-color:#fff}
.gf__marquee{overflow:hidden;padding-block:clamp(28px,4vw,48px);margin-bottom:clamp(48px,6vw,80px);border-bottom:1px solid rgba(255,255,255,.12)}
.gf__track{display:flex;width:max-content;animation:marquee 60s linear infinite}
.gf__track p{display:flex;flex-shrink:0}
.gf__track span{padding-right:.45em;font-size:clamp(3rem,8vw,7rem);font-weight:900;line-height:1.15;letter-spacing:.02em;white-space:nowrap;color:#fff}
.gf__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,104px);align-items:start}
.gf__motto{display:inline-block;padding-bottom:6px;border-bottom:2px solid var(--cyan);font-size:clamp(1.2rem,1.8vw,1.45rem);font-weight:900}
.gf__hitl{margin-top:14px;font-weight:700;color:#dbe4f2}
.gf__logo{width:clamp(200px,20vw,260px);margin-top:28px;filter:brightness(0) invert(1)}
.gf__nav{display:flex;flex-wrap:wrap;gap:8px 28px;font-size:.95rem;font-weight:700}
.gf__nav a{text-decoration:none}
.gf__nav a:hover{text-decoration:underline;text-underline-offset:.3em}
.gf__co{margin-top:32px;font-weight:700}
.gf__isms{margin-top:8px;max-width:40em;font-size:.88rem;line-height:1.85;color:#c9d3e6}
.gf__links{margin-top:18px;display:flex;flex-wrap:wrap;gap:6px 22px;font-size:.88rem}
.gf__cr{margin-top:28px;font-size:.8rem;color:#aeb9cf}

/* ==========================================================================
   出現の演出（.js のときだけ隠す。is-in / is-ready が付いたら出す）
   ========================================================================== */
/* ヒーロー：読み込み時に順に立ち上がる */
.js .hero__ribbon{clip-path:inset(0 calc(100% + 100vw) 0 -100vw)}
.js.is-ready .hero__ribbon{clip-path:inset(0 -3px 0 -100vw);transition:clip-path 1.1s var(--ease-out) .1s}
.js .hero__title .ln__in{transform:translateY(110%)}
.js.is-ready .hero__title .ln__in{transform:none;transition:transform 1.2s var(--ease-out) .3s}
.js.is-ready .hero__title .ln:nth-child(2) .ln__in{transition-delay:.44s}
.js .hero [data-enter]{opacity:0;transform:translateY(22px)}
.js.is-ready .hero [data-enter]{opacity:1;transform:none;transition:opacity .9s ease .75s,transform 1.1s var(--ease-out) .75s}
.js.is-ready .hero .hero__act{transition-delay:.9s}
.js .hero__man img{opacity:0;transform:translateY(70px)}
.js.is-ready .hero__man img{opacity:1;transform:none;transition:opacity .8s ease .35s,transform 1.3s var(--ease-out) .35s}
.js .hero__think *{transform:scale(0)}
.js.is-ready .hero__think *{transform:scale(1);transition:transform .7s var(--ease-back)}
.js.is-ready .hero__think .t3{transition-delay:1.05s}
.js.is-ready .hero__think .t2{transition-delay:1.2s}
.js.is-ready .hero__think .t1{transition-delay:1.36s}

/* 見出し：タグが伸び、行が下からせり上がり、添え文が続く */
.js [data-reveal] .tag{clip-path:polygon(0 0,0 0,0 50%,0 100%,0 100%);transition:clip-path .8s var(--ease-out)}
.js [data-reveal].is-in .tag{clip-path:polygon(0 0,100% 0,calc(100% - .75em) 50%,100% 100%,0 100%)}
.js [data-reveal] .ln__in{transform:translateY(110%);transition:transform 1.15s var(--ease-out) .15s}
.js [data-reveal] .ln:nth-child(2) .ln__in{transition-delay:.28s}
.js [data-reveal].is-in .ln__in{transform:none}
.js [data-reveal] :is(.sh__lead,.about__lead,.plan__spec,.partner__text){opacity:0;translate:0 24px;transition:opacity .9s ease .45s,translate 1.1s var(--ease-out) .45s}
.js [data-reveal].is-in :is(.sh__lead,.about__lead,.plan__spec,.partner__text){opacity:1;translate:none}

/* 汎用：下から現れる */
.js [data-rv]{opacity:0;translate:0 32px;transition:opacity .9s ease,translate 1.1s var(--ease-out);transition-delay:calc(var(--i,0) * 80ms)}
.js [data-rv].is-in{opacity:1;translate:none}

/* チェックが書き込まれる */

/* 盤（固定しない幅）：盤が見えたら吹き出しが順に現れる */

/* 実例：一見すべて埋まった報告 → 72個が中身の抜けた枠に裏返る */
.js .case__viz:not(.is-run) .q.is-void{background:var(--blue);border-color:var(--blue)}
.js .case__viz .q.is-void{transition:background-color .3s ease calc(var(--o) * 24ms),border-color .3s ease calc(var(--o) * 24ms)}
.js .case__viz.is-run .q.is-void{animation:qflip .5s var(--ease-back) calc(var(--o) * 24ms) both}
@keyframes qflip{0%{scale:1}45%{scale:.55}100%{scale:1}}

/* ==========================================================================
   1023px 以下
   ========================================================================== */
@media (max-width:1023px){

  .hero__grid{grid-template-columns:1fr;min-height:0}
  .hero__copy{padding-block:clamp(48px,8vw,72px) 8px}
  .hero__art{min-height:calc(min(40vw,250px) * (1 / .6 + .27) + 16px)}
  .hero__man{--mw:min(40vw,250px)}
  .hero__dots{right:-12%;top:20%;width:84%;height:72%}
  .hero__scroll{display:none}

  .give,.sh--split,.case__grid,.plan__grid,.partner__grid,.event__grid,.gf__grid{grid-template-columns:1fr}
  .sh--split{align-items:start}
  .flow{grid-template-columns:1fr}
  .flow__col + .flow__col{border-left:0;border-top:2px solid #fff}
  .flow__col + .flow__col::before{left:50%;top:-19px;translate:-50% 0;rotate:90deg}
  .plan__grid{align-items:start}

  /* 盤：同じHTMLを読み順どおりに縦へ流し、タイル＋下向き矢印の道にする */
  .board{aspect-ratio:auto;container-type:normal;display:flex;flex-direction:column;max-width:560px}
  .board__svg{display:none}
  .board > .cell,
  .board .fig,
  .board .bubble{position:relative;left:auto;top:auto;width:auto}
  .cell{
    height:auto;min-height:80px;margin-bottom:34px;
    display:flex;align-items:center;gap:12px;text-align:left;
    padding:16px 18px 16px 86px;border:3px solid var(--navy);border-radius:14px;background:var(--c);
    transition:background-color .45s ease,translate .45s var(--ease-out);
  }
  .c-blue{--c:var(--c-blue)} .c-mint{--c:var(--c-mint)} .c-pink{--c:var(--c-pink)} .c-yellow{--c:var(--c-yellow)}
  .cell::after{content:"";position:absolute;left:50%;bottom:-27px;transform:translateX(-50%);border-style:solid;border-width:14px 11px 0;border-color:var(--navy) transparent transparent}
  .cell.is-last{margin-bottom:0}
  .cell.is-last::after{display:none}
  .cell__n{right:auto;width:78px;font-size:2.9rem;letter-spacing:-.06em;color:rgba(255,255,255,.8)}
  .cell__name{font-size:1.15rem}
  .cell__name small{display:inline}
  /* 画面の中ほどを通るマスが光る */
  .board .cell.is-here{background:#fff;translate:6px 0}
  .board .cell.is-here .cell__n{color:var(--hl)}
  .board .cell.is-got .badge{animation:pop .7s var(--ease-back)}
  .badge{position:relative;left:auto;top:auto;transform:none;margin-left:auto;padding-left:1.9em;font-size:12.5px}
  .badge--below{right:auto;bottom:auto}
  .pain{display:flex;align-items:flex-end;gap:10px;margin:-6px 0 22px}
  .board .pain .fig{flex:0 0 auto;width:52px}
  .board .pain .fig--start{width:50px}
  .bubble{flex:1 1 auto;font-size:14px}
  .bubble::after,.bubble--r::after,.bubble--l::after,.bubble--b::after{left:-8px;right:auto;top:auto;bottom:18px}
  .board .fig--goal{width:80px;margin:18px auto 0}

  .bag{max-width:680px}
}

@media (max-width:640px){
  .fab{top:auto;bottom:16px;right:16px;translate:none;width:58px;height:58px;padding:0;justify-content:center;gap:0;border:2px solid #fff;border-radius:50%}
  .fab__mark{width:30px;height:30px}
  .fab__txt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .fab__arw{display:none}
  .fab:hover{padding:0}
  .js .fab{translate:0 160%}
  .js.is-ready .fab{translate:none}
  .hero__title{font-size:min(9vw,2.6rem)}
  .hero__ribbon{font-size:.88rem;line-height:1.6}
  .hero__ribbon-l{white-space:normal}   /* スマホでは収まらないので、言葉のまとまり（.np）の切れ目でだけ折り返す */
  .hero__act{flex-direction:column;align-items:stretch;gap:18px}
  .btn,.btn--lg{width:100%}
  .plan__act{justify-items:stretch}
  .bag__list{grid-template-columns:1fr;gap:10px}
  .bag__list li{flex-direction:row;gap:14px;text-align:left}
  .bag__star{width:56px;font-size:1.05rem}
  .bag__name{margin-top:0}
  .bag{padding-top:48px}
  .bag__title{white-space:normal;right:16px;text-align:center}
  .bag__msg{text-align:left}
  .case__viz{max-width:none}
  .event__dl{grid-template-columns:1fr;gap:0}
  .event__dl dt{margin-top:8px}
  .sugo__dots{display:none}
}

/* ==========================================================================
   横長の画面（幅1024px以上・高さ640px以上）：各セクションを画面の高さ1つ分に収める
   ・短いセクションは画面いっぱいに広げ、中身を上下中央に置く
   ・長いセクションは、見出しを左の列に入れて高さを詰める
   ・文字と余白は、画面の高さ（svh）でも上限を掛ける
   ========================================================================== */
@media (min-width:1024px){
  .wrap{width:min(100% - 2 * max(var(--pad), 80px), 1200px)}   /* 右端のボタン（幅約64px）に中身がかからない */
}
@media (min-width:1024px) and (min-height:640px){
  .sec{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-block:clamp(40px,7svh,96px)}
  .sh{margin-bottom:clamp(24px,4.4svh,56px)}
  .sh__title{font-size:clamp(1.8rem,min(3.6vw,5.6svh),2.9rem)}

  /* ヒーロー＋流れる帯で、ちょうど1画面 */
  .ticker span{padding-block:0;height:60px}
  .hero__grid{min-height:calc(100svh - 60px)}
  .hero__title{font-size:clamp(2.4rem,min(5.4vw,8.4svh),4.8rem)}

  /* すごろく：見出しのあとは、盤とアイテム欄で1画面（固定） */
  .sugo{min-height:0;display:block}

  /* WHITEBOXとは：左に答えと理由、右に渡す3つ、下に進み方 */
  .about .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-areas:"head main" "text main" "flow flow";column-gap:clamp(40px,6vw,104px);align-items:start}
  .give{display:contents}
  .about__head{grid-area:head}
  .give__text{grid-area:text;margin-top:clamp(24px,4svh,44px)}
  .give__main{grid-area:main;align-self:center}
  .about__foot{grid-area:flow;margin-top:clamp(28px,5svh,56px)}
  .flow{margin-top:0}
  .about__catch{font-size:clamp(2rem,min(4vw,6.2svh),3.4rem)}
  .about__lead{margin-top:clamp(12px,2svh,24px);line-height:1.8}
  .give__title{font-size:clamp(1.3rem,min(2.2vw,3.4svh),1.8rem)}
  .give__text p{margin-top:clamp(10px,1.8svh,20px);line-height:1.85}
  .give__list li{padding-block:clamp(10px,2svh,24px)}
  .give__k{font-size:clamp(1.8rem,min(3.4vw,5.4svh),2.8rem)}
  .give__so{margin-top:clamp(16px,3svh,36px)}
  .flow__col{padding:clamp(18px,3svh,36px) clamp(22px,2.4vw,36px)}
  .flow__col p{margin-top:clamp(8px,1.4svh,16px);line-height:1.8}

  /* 実例：左に見出しと図、右に本文 */
  .case .wrap{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);grid-template-areas:"sh body" "fig body";column-gap:clamp(32px,5vw,80px);align-items:start}
  .case__grid{display:contents}
  .case .sh{grid-area:sh}
  .case__fig{grid-area:fig}
  .case__body{grid-area:body;align-self:center}
  .case__viz{max-width:min(470px,58svh)}
  .case__num{margin-bottom:clamp(14px,2.6svh,32px)}
  .case__num b{font-size:clamp(4rem,min(11vw,13svh),8.6rem)}
  .case__body p{line-height:1.85}
  .case__body p + p{margin-top:.8em}

  /* 出展情報 */
  .event__date b{font-size:clamp(3.6rem,min(9vw,12svh),7.6rem)}
  .event__name{margin-top:clamp(12px,2.4svh,28px)}
  .event__map,.event__map iframe{min-height:0;height:100%}
  .event__next{margin-top:clamp(20px,3.6svh,48px)}
}

/* 低めの画面で盤を進める演出：アイテム欄を1段に詰め、そのぶん盤を大きく。盤の文字は盤の幅に合わせて縮める */
@media (min-width:1024px) and (min-height:640px) and (max-height:860px){
  .is-play .sugo__play{gap:18px}
  .is-play .board{width:min(100%, calc((100svh - 150px) * 1500 / 760))}
  .is-play .bag{padding:16px 20px 8px}
  .is-play .bag__title{font-size:.9rem}
  .is-play .bag__list{gap:8px 12px}
  .is-play .bag__list li{gap:8px}
  .is-play .bag__star{width:40px;font-size:.8rem}
  .is-play .bag__name{font-size:.84rem;line-height:1.35}
  .is-play .bag__name small{font-size:.8em}
  .is-play .bag__msg{margin-top:8px;padding-top:6px;font-size:.8rem;line-height:1.5}
  .is-play .cell__name{font-size:clamp(12px,1.5cqw,23px)}
  .is-play .bubble{font-size:clamp(11.5px,1.02cqw,15px);line-height:1.55}
}

/* 低めの画面（ノートPCなど）：余白と本文をもう一段詰める */
@media (min-width:1024px) and (min-height:640px) and (max-height:860px){
  .sec{padding-block:clamp(28px,5svh,48px)}
  .hero__copy{padding-block:clamp(32px,6svh,64px)}
  .hero__title{margin-top:clamp(16px,3svh,32px)}
  .hero__event{margin-top:clamp(16px,3svh,32px)}
  .hero__act{margin-top:clamp(20px,3.6svh,40px)}
  .case__body p{font-size:.97rem;line-height:1.75}
  .case__num b{font-size:clamp(3.6rem,11svh,6rem)}
  .flow__col p{font-size:.95rem;line-height:1.7}
  .give__text p{font-size:.95rem}
  .give__so-b{font-size:.95rem;line-height:1.75}
}
@media (min-width:1024px) and (max-width:1279px) and (min-height:640px){
  .case__body p{font-size:.93rem;line-height:1.7}
  .case .wrap{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .about__lead{font-size:1rem}
  .about__catch{font-size:clamp(1.9rem,5.4svh,2.6rem)}
  .about .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:40px}
  .give__text p{font-size:.9rem;line-height:1.75}
  .give__k{font-size:clamp(1.7rem,4.6svh,2.3rem)}
  .give__list span{font-size:.98rem}
  .about__foot{margin-top:24px}
  .flow__step{font-size:1.05rem}
  .flow__col p{font-size:.88rem;line-height:1.65}
}

/* ==========================================================================
   振り切り版（A〜D をすべて入れた試作 / 2026-09-24）
   A 色面と境目：強い色の面（黄・ピンク・青）を挟み、セクションの境目を斜めに切る
   B 人を主役に：チラシの人物を大きく出し、現れるときに弾ませる
   C 文字を絵に：日付「10.5」を画面いっぱいの白抜きに／見出しのキーワードに蛍光ペン
   D 小道具　　：入場券の形の出展情報／ステッカー／またたく星／押し込めるボタン
   図形（斜線の帯・ドット・三角）はチラシ裏面の飾りをそのまま持ち込んだもの
   ========================================================================== */

/* --- チラシの図形 --- */
.geo{position:absolute;z-index:0;pointer-events:none}
.geo--hatch{width:clamp(150px,17vw,280px);height:clamp(26px,2.8vw,42px);transform:skewX(-35deg);background:repeating-linear-gradient(90deg,var(--g) 0 8px,transparent 8px 17px)}
.geo--cyan{--g:var(--cyan)} .geo--teal{--g:var(--teal)} .geo--yellow{--g:var(--yellow)}
.geo--tri{width:clamp(64px,7vw,112px);aspect-ratio:1;background:var(--yellow);clip-path:polygon(0 0,100% 0,0 100%)}
.geo--dots{width:180px;height:100px;background:radial-gradient(var(--g) 4.5px,transparent 5px) 0 0/20px 20px}   /* 幅・高さは粒の間隔（20px）の整数倍＝端の粒が欠けない */
.geo--y{--g:var(--yellow)} .geo--c{--g:var(--cyan)} .geo--w{--g:rgba(255,255,255,.9)}
.sec > .wrap{position:relative;z-index:1}

/* --- 斜めの境目：上のセクションに食い込む三角を、自分の地の色で描く --- */
.cut{--cut:clamp(36px,5vw,76px);position:relative;z-index:1}
.cut::before{content:"";position:absolute;left:0;right:0;top:calc(1px - var(--cut));height:var(--cut);background:var(--bg,#fff);pointer-events:none}
.cut--r::before{clip-path:polygon(0 100%,100% 0,100% 100%)}
.cut--l::before{clip-path:polygon(0 0,100% 100%,0 100%)}
.about{--bg:#fff;background:#fff;overflow-x:clip}
.case{--bg:var(--pale-pink);overflow-x:clip}
.plan{--bg:var(--yellow)}
.event{--bg:var(--blue)}

/* --- 人：大きく出し、現れるときに下から弾む --- */
.pp{position:relative;z-index:1;pointer-events:none}
.pp img{width:100%;transform-origin:50% 100%}
.js [data-pop] img,.js .sticker[data-pop]{opacity:0;transform:translateY(40%) scale(.85)}
.js [data-pop].is-in img,.js .sticker[data-pop].is-in{opacity:1;transform:none;transition:opacity .5s ease,transform .9s var(--ease-back)}

/* --- 見出しの札を少し傾け、大きく --- */
.tag{rotate:-2deg;font-size:.9rem;padding:.4em 2em .4em 1em}

/* --- 押し込めるボタン：紺の縁と影 --- */
.btn{border:3px solid var(--navy);box-shadow:5px 5px 0 var(--navy);transition:translate .18s ease,box-shadow .18s ease}
.btn:hover{translate:3px 3px;box-shadow:2px 2px 0 var(--navy)}
.btn:active{translate:5px 5px;box-shadow:0 0 0 var(--navy)}

/* --- またたく星 --- */
.twinkle{position:absolute;z-index:2;width:22px;aspect-ratio:1;background:var(--star) center/contain no-repeat;pointer-events:none;animation:twinkle 2.6s ease-in-out infinite}
@keyframes twinkle{0%,100%{scale:.55;rotate:0deg;opacity:.5}50%{scale:1.1;rotate:25deg;opacity:1}}

/* ---------- すごろく ---------- */
.sugo__pin{position:relative}
.sugo__g1{left:34%;top:2.5%}   /* 盤の上の空いた帯（左右の吹き出しのあいだ） */
.sugo__g2{right:0;bottom:0;rotate:180deg}
.sugo__g3{right:30%;top:1.5%;width:120px;height:60px}
.bag__tw1{left:clamp(8px,1.4vw,20px);top:-30px;animation-delay:-.8s}
.bag__tw2{right:6%;top:-14px;width:16px;animation-delay:-1.7s}
.sugo .sh__title{font-size:clamp(2rem,4.2vw,3.4rem)}

/* ---------- WHITEBOXとは：右の3つを黄色の面に載せる ---------- */
.about__g1{left:0;top:0}
.about__g2{right:6%;bottom:clamp(20px,4svh,48px)}
.about__catch em{background:linear-gradient(transparent 64%,var(--c-yellow) 64%) no-repeat 0 0/100% 100%}
.js .about__head .about__catch em{background-size:0% 100%;transition:background-size .9s var(--ease-out) .9s}
.js .about__head.is-in .about__catch em{background-size:100% 100%}
.give__main{position:relative;isolation:isolate;padding:clamp(18px,3svh,36px) 0 clamp(18px,3svh,36px) clamp(52px,5.4vw,84px)}   /* 面は上ほど右へ傾くので、左の余白を多めに取る */
.give__main::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:0;right:-50vw;background:var(--c-yellow);border-radius:28px 0 0 28px;transform:skewX(-6deg);transform-origin:0 100%}
.give__k--flow{color:var(--blue-ink)}
.give__k--goal{color:var(--pink-deep)}
.give__so .mk{background-image:linear-gradient(transparent 60%,#fff 60%)}
.about__foot{position:relative}
.about__foot .flow{margin-right:clamp(72px,6vw,96px)}
.about__pp{position:absolute;right:0;bottom:-2px;width:min(clamp(52px,4.2vw,70px),6.6svh)}

/* ---------- 実例：左半分をピンクの面に ---------- */
.case__fig{position:relative;isolation:isolate}
.case__fig::before{content:"";position:absolute;z-index:-1;inset:-40px -40px -40px -50vw;background:var(--c-pink);border-radius:0 28px 28px 0;transform:skewX(-6deg);transform-origin:100% 0}
.q{border-color:var(--navy);background:var(--blue)}
.q.is-void{background:#fff;border-color:var(--pink-deep)}
.lg--void::before{border-color:var(--pink-deep)}
.case__legend{color:var(--navy)}
.case__g1{right:3%;top:8%}
.case__g2{right:10%;bottom:6%}
.case__num b{color:var(--pink-deep)}

/* ---------- フリープラン：黄色の面 ---------- */
.plan{background:var(--yellow);color:var(--navy);overflow-x:clip;overflow-y:visible}
.plan :focus-visible{outline-color:var(--navy)}
.plan__stripe{--stripe:rgba(25,43,80,.08)}
.plan__g1{left:3%;top:6%}
.plan__grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:center}
.plan__title{color:var(--navy);font-size:clamp(2.6rem,min(6vw,9svh),5rem)}
.plan__spec{color:var(--navy)}
.plan__act{margin-top:clamp(24px,4svh,40px);display:grid;justify-items:start;gap:16px}
.plan__note{grid-column:1/-1;color:var(--navy)}
.plan .lnk{color:var(--navy)}
.plan .lnk:hover{text-decoration-color:var(--pink-deep)}
.plan__art{position:relative;align-self:end;display:grid;justify-items:center}
.plan__pp{width:clamp(180px,20vw,300px);margin-bottom:calc(-1 * clamp(40px,7svh,96px))}
.sticker{position:absolute;z-index:2;left:-6%;top:6%;display:grid;place-items:center;width:clamp(120px,11vw,168px);aspect-ratio:1;rotate:-12deg;
  background:var(--pink-deep);color:#fff;font-size:clamp(1.3rem,1.9vw,1.75rem);font-weight:900;letter-spacing:.04em;
  clip-path:polygon(50% 0%,61% 10%,75% 6%,79% 20%,93% 25%,90% 39%,100% 50%,90% 61%,93% 75%,79% 80%,75% 94%,61% 90%,50% 100%,39% 90%,25% 94%,21% 80%,7% 75%,10% 61%,0% 50%,10% 39%,7% 25%,21% 20%,25% 6%,39% 10%)}
.js .sticker[data-pop].is-in{transition-delay:.35s}
.sticker span{line-height:1.3;text-align:center}
.plan__tw1{right:6%;top:6%}
.plan__tw2{left:18%;top:46%;width:16px;animation-delay:-1s}
.plan__tw3{right:22%;top:30%;width:28px;animation-delay:-1.8s}
.plan__pp img{animation:bob 2.8s ease-in-out infinite}
.js .plan__pp[data-pop]:not(.is-in) img{animation:none}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -3%}}

/* ---------- DX支援事業者さまへ：ミントの面／話しかける人／紺の縁の業界カード ---------- */
.partner{--bg:var(--c-mint);background:var(--c-mint);overflow-x:clip}
.partner__g1{left:3%;top:9%}
.partner__g2{right:4%;bottom:7%}
.geo--w-hatch{--g:rgba(255,255,255,.85)}
.partner__grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(32px,5vw,80px);align-items:center}
.partner__title{font-size:clamp(2.1rem,min(4.2vw,7svh),3.4rem);line-height:1.32;color:var(--navy)}
.partner__title em{color:var(--pink-deep)}
.partner__talk{margin-top:clamp(18px,4svh,40px);display:flex;align-items:flex-end;gap:clamp(12px,1.6vw,24px)}
.partner__pp{flex:0 0 auto;width:clamp(130px,13vw,200px);margin:0}
.partner__text{position:relative;align-self:flex-start;margin:clamp(8px,2svh,24px) 0 0;padding:clamp(14px,2.2svh,20px) clamp(16px,1.8vw,24px);
  border:3px solid var(--navy);border-radius:18px;background:#fff;box-shadow:6px 6px 0 var(--navy);
  font-size:clamp(.98rem,1.3vw,1.1rem);font-weight:700;line-height:1.8;color:var(--navy)}
/* 吹き出しの尻尾（人の方＝左下へ） */
.partner__text::before{content:"";position:absolute;left:-15px;bottom:26px;width:22px;height:22px;background:#fff;border-left:3px solid var(--navy);border-bottom:3px solid var(--navy);transform:rotate(45deg) skew(8deg,8deg)}

.inds{position:relative;padding:clamp(40px,6svh,56px) clamp(18px,2.4vw,36px) clamp(22px,3.6svh,36px);border:3px solid var(--navy);border-radius:22px;background:#fff;box-shadow:8px 8px 0 var(--navy)}
.inds__title{position:absolute;left:50%;top:0;translate:-50% -50%;padding:.5em 1.6em;border:3px solid var(--navy);border-radius:999px;background:#1d7a79;color:#fff;font-size:clamp(1rem,1.4vw,1.2rem);letter-spacing:.06em;white-space:nowrap}
.inds__list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2.6svh,24px) clamp(8px,1.2vw,16px)}
.inds__list li{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.inds__ico{display:grid;place-items:center;width:min(clamp(76px,8vw,108px),13svh);aspect-ratio:1;border-radius:50%;background:#e1f1f0;transition:background-color .35s ease}
.inds__ico img{width:62%}
.inds__name{display:inline-block;padding:.2em .8em;border-radius:6px;background:var(--blue-ink);color:#fff;font-size:clamp(.8rem,1vw,.9rem);font-weight:700;line-height:1.5;white-space:nowrap}
.inds__list li:hover .inds__ico{background:var(--c-yellow)}
/* 「ほか幅広く！」はギザギザのステッカー */
.inds__list .inds__more{justify-content:center}
.inds__more span{display:grid;place-items:center;width:min(clamp(92px,9.4vw,124px),15svh);aspect-ratio:1;rotate:-10deg;background:var(--pink-deep);color:#fff;font-size:clamp(.95rem,1.3vw,1.15rem);font-weight:900;line-height:1.35;text-align:center;
  clip-path:polygon(50% 0%,61% 10%,75% 6%,79% 20%,93% 25%,90% 39%,100% 50%,90% 61%,93% 75%,79% 80%,75% 94%,61% 90%,50% 100%,39% 90%,25% 94%,21% 80%,7% 75%,10% 61%,0% 50%,10% 39%,7% 25%,21% 20%,25% 6%,39% 10%)}
/* アイコンは順に弾んで現れる */
.js .inds__list li[data-rv] .inds__ico,.js .inds__list li[data-rv].inds__more span{scale:.3}
.js .inds__list li[data-rv].is-in .inds__ico,.js .inds__list li[data-rv].is-in.inds__more span{scale:1;transition:scale .7s var(--ease-back) calc(var(--i,0) * 70ms + .1s)}
.partner__tw1{left:-10px;top:-18px}
.partner__tw2{right:18%;bottom:-14px;width:18px;animation-delay:-1.3s}

/* ---------- 出展情報：青の面・白抜きの巨大な日付・入場券 ---------- */
.event{background:var(--blue);color:#fff;overflow-x:clip}
.event .sh__title{color:#fff}
.event :focus-visible{outline-color:#fff}
.event__markbox{position:absolute;z-index:0;inset:0;overflow:hidden;pointer-events:none}   /* セクションの外（フッター）へはみ出さない */
.event__mark{position:absolute;right:-6vw;bottom:-10vw;width:clamp(360px,40vw,720px);overflow:visible}
.event__mark path{fill:none;stroke:rgba(255,255,255,.38);stroke-width:2px;vector-effect:non-scaling-stroke}
.event__g1{right:4%;top:10%}
.event__grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.ticket{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);border-radius:18px;background:#fff;color:var(--ink);box-shadow:8px 8px 0 var(--navy)}
.ticket__stub{position:relative;display:grid;align-content:center;gap:10px;padding:clamp(20px,3svh,32px) clamp(20px,2.4vw,32px);border-radius:18px 0 0 18px;background:var(--c-yellow);border-right:3px dashed var(--navy)}
/* ミシン目の切り欠き（地の青で抜く） */
.ticket__stub::before,.ticket__stub::after{content:"";position:absolute;right:-15px;width:28px;height:28px;border-radius:50%;background:var(--blue)}
.ticket__stub::before{top:-14px}
.ticket__stub::after{bottom:-14px}
.ticket .event__date{color:var(--navy)}
.ticket .event__date{white-space:nowrap}   /* 「10.5（月）」を1行に */
.ticket .event__date b{font-size:clamp(3rem,min(6vw,10svh),5.4rem)}
.ticket .event__date span{font-size:clamp(1.2rem,1.8vw,1.6rem)}
.ticket .event__time{margin:0;font-size:clamp(1.05rem,1.5vw,1.3rem);font-weight:900;line-height:1.6;color:var(--navy)}
.ticket__body{padding:clamp(20px,3svh,32px) clamp(20px,2.6vw,36px)}
.ticket .event__name{margin-top:0}
.event__next{color:#fff}
.event__next-label{color:var(--c-yellow)}
.event__next b{color:#fff}
.event__map{border:3px solid var(--navy);box-shadow:8px 8px 0 var(--navy)}

/* 見出しの行は途中で折らない（行ごとにせり上がる作りのため。狭い画面では文字の大きさで収める） */
@media (min-width:641px){
  .about__catch .ln__in,.plan__title .ln__in,.sh__title .ln__in,.partner__title .ln__in{white-space:nowrap}
  .case .sh__title .ln__in{white-space:normal}
}
@media (min-width:1024px) and (min-height:640px){
  .case .sh__title{font-size:clamp(1.6rem,min(2.8vw,5svh),2.5rem)}   /* 1行目「AIにまかせた調査の多くは、」が左の列に収まる大きさ */
}
@media (min-width:1024px) and (min-height:640px){
  .about__catch{font-size:clamp(2rem,min(3.4vw,6.2svh),3rem)}
}

/* --- 画面の高さに合わせる版（横長）での調整 --- */
@media (min-width:1024px) and (min-height:640px){
  .plan__art{align-self:stretch;align-content:end}
}
@media (min-width:1024px) and (min-height:640px) and (max-height:900px){
  .give__main{padding-block:10px}
  .give__list li{padding-block:clamp(6px,1.4svh,14px)}
  .about__foot{margin-top:clamp(18px,3svh,32px)}
  .give__so{margin-top:clamp(10px,2svh,24px)}
}
@media (min-width:1024px) and (max-width:1279px){
  .about__pp{display:none}
  .about__foot .flow{margin-right:0}
  .ticket .event__date b{font-size:clamp(2.6rem,8svh,4rem)}
}

/* --- 1023px 以下 --- */
@media (max-width:1023px){
  .cut{--cut:28px}
  .case__g1,.case__g2,.partner__g1,.partner__g2,.event__g1,.about__g2,.plan__g1,.sugo__g1,.sugo__g3{display:none}
  /* 右端のボタン：縦長の札だと本文にかかるので、右下の丸ボタンに */
  .fab{top:auto;bottom:16px;right:16px;translate:none;width:58px;height:58px;padding:0;justify-content:center;gap:0;border:2px solid #fff;border-radius:50%}
  .fab__mark{width:30px;height:30px}
  .fab__txt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .fab__arw{display:none}
  .fab:hover{padding:0}
  .js .fab{translate:0 160%}
  .js.is-ready .fab{translate:none}
  /* 指で押す文字リンクは、押せる高さを44px確保する */
  .lnk,.gf__nav a,.gf__links a{display:inline-flex;align-items:center;min-height:44px}
  .gf__nav,.gf__links{row-gap:0}   /* 狭い画面では文字に重なるため出さない */
  .give__main{padding:24px 0 24px 20px}
  .give__main::before{right:calc(-1 * var(--pad))}
  .case__fig::before{inset:-24px calc(-1 * var(--pad)) -24px calc(-1 * var(--pad));transform:none;border-radius:0}
  .plan__grid{grid-template-columns:1fr}
  .plan__art{justify-items:end;margin-top:8px}
  .plan__pp{width:min(46vw,220px);margin-bottom:calc(-1 * var(--sec))}
  .sticker{left:0;top:auto;bottom:30%}
  .event__grid{grid-template-columns:1fr}
  .event__map{min-height:320px}
  .event__mark{width:80vw;right:-24vw;bottom:-18vw}
  .event__mark path{stroke:rgba(255,255,255,.22)}
  .plan__tw2,.plan__tw3{display:none}   /* 狭い画面ではステッカーと人に重なる */
  .about__pp{display:none}
  .about__foot .flow{margin-right:0}
  .partner__grid{grid-template-columns:minmax(0,1fr);gap:48px}
  .partner__copy,.inds{min-width:0}
  .partner__pp{width:120px}
  .inds__list{grid-template-columns:repeat(3,minmax(0,1fr))}
  .inds__ico{width:min(22vw,92px)}
  .inds__more span{width:min(22vw,100px)}
}
@media (max-width:640px){
  .ticket{grid-template-columns:1fr}
  .ticket__stub{border-radius:18px 18px 0 0;border-right:0;border-bottom:3px dashed var(--navy)}
  .ticket__stub::before,.ticket__stub::after{top:auto;bottom:-15px;right:auto}
  .ticket__stub::before{left:-14px}
  .ticket__stub::after{right:-14px}
  .ticket .event__date b{display:inline;font-size:3.4rem}
  .geo--hatch{width:120px;height:22px}
  .geo--dots{width:100px;height:60px}
  .give__k{font-size:1.6rem}
  .partner__pp{width:92px}
  .partner__text .np{white-space:normal}
  .partner__text{font-size:.95rem}
  .inds__list{gap:16px 6px}
  .inds__name{font-size:.78rem;padding:.2em .6em}
  .give__list li{grid-template-columns:5.4rem minmax(0,1fr);gap:12px}
  .geo--tri{width:56px}
  .sugo__g1,.sugo__g3{display:none}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none !important;animation:none !important}
  .js [data-pop] img,.js .sticker[data-pop]{opacity:1;transform:none}
  .js .inds__list li[data-rv] .inds__ico,.js .inds__list li[data-rv].inds__more span{scale:1}
}