@charset "UTF-8";
/* =========================================================
   大明司一利 トップページ（デザイン検証用モック）
   構成：方眼紙の上に組んだスマホ1カラム（最大480px）。
         白方眼と黒方眼のセクションを交互に。PCは左右に固定パネル。
   ========================================================= */
:root{
  color-scheme: light;
  --ink:#1c1917;
  --ink-2:#2a2623;
  --paper:#ffffff;
  --panel:#f4f4f2;
  --base:#e8e8e8;
  --mute:#6b6661;
  --rule:rgba(28,25,23,.09);
  --rule-dk:rgba(255,255,255,.07);
  --or:#fb8619;
  --or2:#fb4a19;
  --grad:linear-gradient(90deg,var(--or) 0%,var(--or2) 100%);
  --lime:#c6f23a;
  --violet:#7b3fe4;
  --red:#e8322a;
  --green:#22a24a;
  --yellow:#f5c03a;
  --ff-sans:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  --ff-serif:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;
  --ff-en:"Inter","Noto Sans JP","Helvetica Neue",Arial,sans-serif;
  --ff-mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --col:480px;
  --ease:cubic-bezier(.2,.9,.2,1);
  --pop:cubic-bezier(.2,1.6,.4,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;color:var(--ink);font-family:var(--ff-sans);font-weight:500;font-size:15px;line-height:1.85;
  background-color:var(--base);
  background-image:var(--bg-page);
  background-size:var(--bg-page-size);
  background-position:var(--bg-page-pos);
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
svg{display:block}
h1,h2,h3,p{margin:0}
:focus-visible{outline:3px solid var(--or);outline-offset:3px}
[id]{scroll-margin-top:16px}


/* =========================================================
   背景の柄：↗（斜線＋矢印の頭）
   右肩上がりの斜線に、ところどころ↗の矢印の頭を付けた柄。
   --bg-page 外側 ／ --bg-w 白セクション ／ --bg-d 黒セクション ／
   --bg-card FVのカード ／ --bg-koma イラスト枠
   ========================================================= */
:root{
  --bg-page:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280' viewBox='0 0 280 280'%3E%3Cg fill='none' stroke='%231c1917' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke-opacity='0.075' stroke-width='1.5' d='M-9.5 9.5L9.5 -9.5M-9.5 29.5L29.5 -9.5M-9.5 49.5L49.5 -9.5M-9.5 69.5L69.5 -9.5M-9.5 89.5L89.5 -9.5M-9.5 109.5L109.5 -9.5M-9.5 129.5L129.5 -9.5M-9.5 149.5L149.5 -9.5M-9.5 169.5L169.5 -9.5M-9.5 189.5L189.5 -9.5M-9.5 209.5L209.5 -9.5M-9.5 229.5L229.5 -9.5M-9.5 249.5L249.5 -9.5M-9.5 269.5L269.5 -9.5M-9.5 289.5L289.5 -9.5M10.5 289.5L289.5 10.5M30.5 289.5L289.5 30.5M50.5 289.5L289.5 50.5M70.5 289.5L289.5 70.5M90.5 289.5L289.5 90.5M110.5 289.5L289.5 110.5M130.5 289.5L289.5 130.5M150.5 289.5L289.5 150.5M170.5 289.5L289.5 170.5M190.5 289.5L289.5 190.5M210.5 289.5L289.5 210.5M230.5 289.5L289.5 230.5M250.5 289.5L289.5 250.5M270.5 289.5L289.5 270.5'/%3E%3Cpath stroke-opacity='0.15' stroke-width='1.7' d='M-5.5 0L0 0L0 5.5M14.5 40L20 40L20 45.5M44.5 30L50 30L50 35.5M4.5 90L10 90L10 95.5M74.5 20L80 20L80 25.5M34.5 80L40 80L40 85.5M104.5 10L110 10L110 15.5M-5.5 140L0 140L0 145.5M64.5 70L70 70L70 75.5M134.5 0L140 0L140 5.5M24.5 130L30 130L30 135.5M94.5 60L100 60L100 65.5M54.5 120L60 120L60 125.5M124.5 50L130 50L130 55.5M14.5 180L20 180L20 185.5M84.5 110L90 110L90 115.5M154.5 40L160 40L160 45.5M44.5 170L50 170L50 175.5M114.5 100L120 100L120 105.5M184.5 30L190 30L190 35.5M4.5 230L10 230L10 235.5M74.5 160L80 160L80 165.5M144.5 90L150 90L150 95.5M214.5 20L220 20L220 25.5M34.5 220L40 220L40 225.5M104.5 150L110 150L110 155.5M174.5 80L180 80L180 85.5M244.5 10L250 10L250 15.5M-5.5 280L0 280L0 285.5M64.5 210L70 210L70 215.5M134.5 140L140 140L140 145.5M204.5 70L210 70L210 75.5M274.5 0L280 0L280 5.5M24.5 270L30 270L30 275.5M94.5 200L100 200L100 205.5M164.5 130L170 130L170 135.5M234.5 60L240 60L240 65.5M54.5 260L60 260L60 265.5M124.5 190L130 190L130 195.5M194.5 120L200 120L200 125.5M264.5 50L270 50L270 55.5M84.5 250L90 250L90 255.5M154.5 180L160 180L160 185.5M224.5 110L230 110L230 115.5M114.5 240L120 240L120 245.5M184.5 170L190 170L190 175.5M254.5 100L260 100L260 105.5M144.5 230L150 230L150 235.5M214.5 160L220 160L220 165.5M174.5 220L180 220L180 225.5M244.5 150L250 150L250 155.5M134.5 280L140 280L140 285.5M204.5 210L210 210L210 215.5M274.5 140L280 140L280 145.5M164.5 270L170 270L170 275.5M234.5 200L240 200L240 205.5M194.5 260L200 260L200 265.5M264.5 190L270 190L270 195.5M224.5 250L230 250L230 255.5M254.5 240L260 240L260 245.5M274.5 280L280 280L280 285.5'/%3E%3C/g%3E%3C/svg%3E");
  --bg-page-size:280px 280px; --bg-page-pos:0 0;
  --bg-w:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cg fill='none' stroke='%231c1917' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke-opacity='0.055' stroke-width='1.1' d='M-8.5 -7.5L-7.5 -8.5M-8.5 8.5L8.5 -8.5M-8.5 24.5L24.5 -8.5M-8.5 40.5L40.5 -8.5M-8.5 56.5L56.5 -8.5M-8.5 72.5L72.5 -8.5M-8.5 88.5L88.5 -8.5M-8.5 104.5L104.5 -8.5M-8.5 120.5L120.5 -8.5M-8.5 136.5L136.5 -8.5M-8.5 152.5L152.5 -8.5M-8.5 168.5L168.5 -8.5M-8.5 184.5L184.5 -8.5M-8.5 200.5L200.5 -8.5M-8.5 216.5L216.5 -8.5M-8.5 232.5L232.5 -8.5M-8.5 248.5L248.5 -8.5M-8.5 264.5L264.5 -8.5M7.5 264.5L264.5 7.5M23.5 264.5L264.5 23.5M39.5 264.5L264.5 39.5M55.5 264.5L264.5 55.5M71.5 264.5L264.5 71.5M87.5 264.5L264.5 87.5M103.5 264.5L264.5 103.5M119.5 264.5L264.5 119.5M135.5 264.5L264.5 135.5M151.5 264.5L264.5 151.5M167.5 264.5L264.5 167.5M183.5 264.5L264.5 183.5M199.5 264.5L264.5 199.5M215.5 264.5L264.5 215.5M231.5 264.5L264.5 231.5M247.5 264.5L264.5 247.5M263.5 264.5L264.5 263.5'/%3E%3Cpath stroke-opacity='0.12' stroke-width='1.5' d='M-4.5 0L0 0L0 4.5M-4.5 32L0 32L0 36.5M27.5 16L32 16L32 20.5M-4.5 64L0 64L0 68.5M59.5 0L64 0L64 4.5M27.5 48L32 48L32 52.5M-4.5 96L0 96L0 100.5M59.5 32L64 32L64 36.5M27.5 80L32 80L32 84.5M91.5 16L96 16L96 20.5M-4.5 128L0 128L0 132.5M59.5 64L64 64L64 68.5M123.5 0L128 0L128 4.5M27.5 112L32 112L32 116.5M91.5 48L96 48L96 52.5M-4.5 160L0 160L0 164.5M59.5 96L64 96L64 100.5M123.5 32L128 32L128 36.5M27.5 144L32 144L32 148.5M91.5 80L96 80L96 84.5M155.5 16L160 16L160 20.5M-4.5 192L0 192L0 196.5M59.5 128L64 128L64 132.5M123.5 64L128 64L128 68.5M187.5 0L192 0L192 4.5M27.5 176L32 176L32 180.5M91.5 112L96 112L96 116.5M155.5 48L160 48L160 52.5M-4.5 224L0 224L0 228.5M59.5 160L64 160L64 164.5M123.5 96L128 96L128 100.5M187.5 32L192 32L192 36.5M27.5 208L32 208L32 212.5M91.5 144L96 144L96 148.5M155.5 80L160 80L160 84.5M219.5 16L224 16L224 20.5M-4.5 256L0 256L0 260.5M59.5 192L64 192L64 196.5M123.5 128L128 128L128 132.5M187.5 64L192 64L192 68.5M251.5 0L256 0L256 4.5M27.5 240L32 240L32 244.5M91.5 176L96 176L96 180.5M155.5 112L160 112L160 116.5M219.5 48L224 48L224 52.5M59.5 224L64 224L64 228.5M123.5 160L128 160L128 164.5M187.5 96L192 96L192 100.5M251.5 32L256 32L256 36.5M91.5 208L96 208L96 212.5M155.5 144L160 144L160 148.5M219.5 80L224 80L224 84.5M59.5 256L64 256L64 260.5M123.5 192L128 192L128 196.5M187.5 128L192 128L192 132.5M251.5 64L256 64L256 68.5M91.5 240L96 240L96 244.5M155.5 176L160 176L160 180.5M219.5 112L224 112L224 116.5M123.5 224L128 224L128 228.5M187.5 160L192 160L192 164.5M251.5 96L256 96L256 100.5M155.5 208L160 208L160 212.5M219.5 144L224 144L224 148.5M123.5 256L128 256L128 260.5M187.5 192L192 192L192 196.5M251.5 128L256 128L256 132.5M155.5 240L160 240L160 244.5M219.5 176L224 176L224 180.5M187.5 224L192 224L192 228.5M251.5 160L256 160L256 164.5M219.5 208L224 208L224 212.5M187.5 256L192 256L192 260.5M251.5 192L256 192L256 196.5M219.5 240L224 240L224 244.5M251.5 224L256 224L256 228.5M251.5 256L256 256L256 260.5'/%3E%3C/g%3E%3C/svg%3E");
  --bg-w-size:256px 256px; --bg-w-pos:0 0;
  --bg-d:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='252' height='252' viewBox='0 0 252 252'%3E%3Cg fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke-opacity='0.065' stroke-width='1.1' d='M-9 9L9 -9M-9 27L27 -9M-9 45L45 -9M-9 63L63 -9M-9 81L81 -9M-9 99L99 -9M-9 117L117 -9M-9 135L135 -9M-9 153L153 -9M-9 171L171 -9M-9 189L189 -9M-9 207L207 -9M-9 225L225 -9M-9 243L243 -9M-9 261L261 -9M9 261L261 9M27 261L261 27M45 261L261 45M63 261L261 63M81 261L261 81M99 261L261 99M117 261L261 117M135 261L261 135M153 261L261 153M171 261L261 171M189 261L261 189M207 261L261 207M225 261L261 225M243 261L261 243'/%3E%3Cpath stroke-opacity='0.13' stroke-width='1.5' d='M-5 0L0 0L0 5M13 36L18 36L18 41M40 27L45 27L45 32M4 81L9 81L9 86M67 18L72 18L72 23M31 72L36 72L36 77M94 9L99 9L99 14M-5 126L0 126L0 131M58 63L63 63L63 68M121 0L126 0L126 5M22 117L27 117L27 122M85 54L90 54L90 59M49 108L54 108L54 113M112 45L117 45L117 50M13 162L18 162L18 167M76 99L81 99L81 104M139 36L144 36L144 41M40 153L45 153L45 158M103 90L108 90L108 95M166 27L171 27L171 32M4 207L9 207L9 212M67 144L72 144L72 149M130 81L135 81L135 86M193 18L198 18L198 23M31 198L36 198L36 203M94 135L99 135L99 140M157 72L162 72L162 77M220 9L225 9L225 14M-5 252L0 252L0 257M58 189L63 189L63 194M121 126L126 126L126 131M184 63L189 63L189 68M247 0L252 0L252 5M22 243L27 243L27 248M85 180L90 180L90 185M148 117L153 117L153 122M211 54L216 54L216 59M49 234L54 234L54 239M112 171L117 171L117 176M175 108L180 108L180 113M238 45L243 45L243 50M76 225L81 225L81 230M139 162L144 162L144 167M202 99L207 99L207 104M103 216L108 216L108 221M166 153L171 153L171 158M229 90L234 90L234 95M130 207L135 207L135 212M193 144L198 144L198 149M157 198L162 198L162 203M220 135L225 135L225 140M121 252L126 252L126 257M184 189L189 189L189 194M247 126L252 126L252 131M148 243L153 243L153 248M211 180L216 180L216 185M175 234L180 234L180 239M238 171L243 171L243 176M202 225L207 225L207 230M229 216L234 216L234 221M247 252L252 252L252 257'/%3E%3C/g%3E%3C/svg%3E");
  --bg-d-size:252px 252px; --bg-d-pos:0 0;
  --bg-card:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='252' height='252' viewBox='0 0 252 252'%3E%3Cg fill='none' stroke='%231c1917' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke-opacity='0.07' stroke-width='1.1' d='M-8 -6L-6 -8M-8 8L8 -8M-8 22L22 -8M-8 36L36 -8M-8 50L50 -8M-8 64L64 -8M-8 78L78 -8M-8 92L92 -8M-8 106L106 -8M-8 120L120 -8M-8 134L134 -8M-8 148L148 -8M-8 162L162 -8M-8 176L176 -8M-8 190L190 -8M-8 204L204 -8M-8 218L218 -8M-8 232L232 -8M-8 246L246 -8M-8 260L260 -8M6 260L260 6M20 260L260 20M34 260L260 34M48 260L260 48M62 260L260 62M76 260L260 76M90 260L260 90M104 260L260 104M118 260L260 118M132 260L260 132M146 260L260 146M160 260L260 160M174 260L260 174M188 260L260 188M202 260L260 202M216 260L260 216M230 260L260 230M244 260L260 244M258 260L260 258'/%3E%3Cpath stroke-opacity='0.14' stroke-width='1.4' d='M-4 0L0 0L0 4M3 21L7 21L7 25M38 0L42 0L42 4M10 42L14 42L14 46M45 21L49 21L49 25M17 63L21 63L21 67M80 0L84 0L84 4M-11 105L-7 105L-7 109M52 42L56 42L56 46M24 84L28 84L28 88M87 21L91 21L91 25M-4 126L0 126L0 130M59 63L63 63L63 67M122 0L126 0L126 4M31 105L35 105L35 109M94 42L98 42L98 46M3 147L7 147L7 151M66 84L70 84L70 88M129 21L133 21L133 25M38 126L42 126L42 130M101 63L105 63L105 67M164 0L168 0L168 4M10 168L14 168L14 172M73 105L77 105L77 109M136 42L140 42L140 46M45 147L49 147L49 151M108 84L112 84L112 88M171 21L175 21L175 25M17 189L21 189L21 193M80 126L84 126L84 130M143 63L147 63L147 67M206 0L210 0L210 4M-11 231L-7 231L-7 235M52 168L56 168L56 172M115 105L119 105L119 109M178 42L182 42L182 46M24 210L28 210L28 214M87 147L91 147L91 151M150 84L154 84L154 88M213 21L217 21L217 25M-4 252L0 252L0 256M59 189L63 189L63 193M122 126L126 126L126 130M185 63L189 63L189 67M248 0L252 0L252 4M31 231L35 231L35 235M94 168L98 168L98 172M157 105L161 105L161 109M220 42L224 42L224 46M66 210L70 210L70 214M129 147L133 147L133 151M192 84L196 84L196 88M255 21L259 21L259 25M38 252L42 252L42 256M101 189L105 189L105 193M164 126L168 126L168 130M227 63L231 63L231 67M73 231L77 231L77 235M136 168L140 168L140 172M199 105L203 105L203 109M108 210L112 210L112 214M171 147L175 147L175 151M234 84L238 84L238 88M80 252L84 252L84 256M143 189L147 189L147 193M206 126L210 126L210 130M115 231L119 231L119 235M178 168L182 168L182 172M241 105L245 105L245 109M150 210L154 210L154 214M213 147L217 147L217 151M122 252L126 252L126 256M185 189L189 189L189 193M248 126L252 126L252 130M157 231L161 231L161 235M220 168L224 168L224 172M192 210L196 210L196 214M255 147L259 147L259 151M164 252L168 252L168 256M227 189L231 189L231 193M199 231L203 231L203 235M234 210L238 210L238 214M206 252L210 252L210 256M241 231L245 231L245 235M248 252L252 252L252 256'/%3E%3C/g%3E%3C/svg%3E");
  --bg-card-size:252px 252px; --bg-card-pos:0 0;
  --bg-koma:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='none' stroke='%231c1917' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke-opacity='0.09' stroke-width='1' d='M-7.5 -4.5L-4.5 -7.5M-7.5 7.5L7.5 -7.5M-7.5 19.5L19.5 -7.5M-7.5 31.5L31.5 -7.5M-7.5 43.5L43.5 -7.5M-7.5 55.5L55.5 -7.5M-7.5 67.5L67.5 -7.5M-7.5 79.5L79.5 -7.5M-7.5 91.5L91.5 -7.5M-7.5 103.5L103.5 -7.5M-7.5 115.5L115.5 -7.5M-7.5 127.5L127.5 -7.5M-7.5 139.5L139.5 -7.5M-7.5 151.5L151.5 -7.5M-7.5 163.5L163.5 -7.5M-7.5 175.5L175.5 -7.5M-7.5 187.5L187.5 -7.5M-7.5 199.5L199.5 -7.5M-7.5 211.5L211.5 -7.5M-7.5 223.5L223.5 -7.5M-7.5 235.5L235.5 -7.5M-7.5 247.5L247.5 -7.5M4.5 247.5L247.5 4.5M16.5 247.5L247.5 16.5M28.5 247.5L247.5 28.5M40.5 247.5L247.5 40.5M52.5 247.5L247.5 52.5M64.5 247.5L247.5 64.5M76.5 247.5L247.5 76.5M88.5 247.5L247.5 88.5M100.5 247.5L247.5 100.5M112.5 247.5L247.5 112.5M124.5 247.5L247.5 124.5M136.5 247.5L247.5 136.5M148.5 247.5L247.5 148.5M160.5 247.5L247.5 160.5M172.5 247.5L247.5 172.5M184.5 247.5L247.5 184.5M196.5 247.5L247.5 196.5M208.5 247.5L247.5 208.5M220.5 247.5L247.5 220.5M232.5 247.5L247.5 232.5M244.5 247.5L247.5 244.5'/%3E%3Cpath stroke-opacity='0.16' stroke-width='1.3' d='M-3.5 0L0 0L0 3.5M8.5 12L12 12L12 15.5M20.5 24L24 24L24 27.5M-3.5 60L0 60L0 63.5M56.5 0L60 0L60 3.5M32.5 36L36 36L36 39.5M8.5 72L12 72L12 75.5M68.5 12L72 12L72 15.5M44.5 48L48 48L48 51.5M20.5 84L24 84L24 87.5M80.5 24L84 24L84 27.5M-3.5 120L0 120L0 123.5M56.5 60L60 60L60 63.5M116.5 0L120 0L120 3.5M32.5 96L36 96L36 99.5M92.5 36L96 36L96 39.5M8.5 132L12 132L12 135.5M68.5 72L72 72L72 75.5M128.5 12L132 12L132 15.5M44.5 108L48 108L48 111.5M104.5 48L108 48L108 51.5M20.5 144L24 144L24 147.5M80.5 84L84 84L84 87.5M140.5 24L144 24L144 27.5M-3.5 180L0 180L0 183.5M56.5 120L60 120L60 123.5M116.5 60L120 60L120 63.5M176.5 0L180 0L180 3.5M32.5 156L36 156L36 159.5M92.5 96L96 96L96 99.5M152.5 36L156 36L156 39.5M8.5 192L12 192L12 195.5M68.5 132L72 132L72 135.5M128.5 72L132 72L132 75.5M188.5 12L192 12L192 15.5M44.5 168L48 168L48 171.5M104.5 108L108 108L108 111.5M164.5 48L168 48L168 51.5M20.5 204L24 204L24 207.5M80.5 144L84 144L84 147.5M140.5 84L144 84L144 87.5M200.5 24L204 24L204 27.5M-3.5 240L0 240L0 243.5M56.5 180L60 180L60 183.5M116.5 120L120 120L120 123.5M176.5 60L180 60L180 63.5M236.5 0L240 0L240 3.5M32.5 216L36 216L36 219.5M92.5 156L96 156L96 159.5M152.5 96L156 96L156 99.5M212.5 36L216 36L216 39.5M68.5 192L72 192L72 195.5M128.5 132L132 132L132 135.5M188.5 72L192 72L192 75.5M44.5 228L48 228L48 231.5M104.5 168L108 168L108 171.5M164.5 108L168 108L168 111.5M224.5 48L228 48L228 51.5M80.5 204L84 204L84 207.5M140.5 144L144 144L144 147.5M200.5 84L204 84L204 87.5M56.5 240L60 240L60 243.5M116.5 180L120 180L120 183.5M176.5 120L180 120L180 123.5M236.5 60L240 60L240 63.5M92.5 216L96 216L96 219.5M152.5 156L156 156L156 159.5M212.5 96L216 96L216 99.5M128.5 192L132 192L132 195.5M188.5 132L192 132L192 135.5M104.5 228L108 228L108 231.5M164.5 168L168 168L168 171.5M224.5 108L228 108L228 111.5M140.5 204L144 204L144 207.5M200.5 144L204 144L204 147.5M116.5 240L120 240L120 243.5M176.5 180L180 180L180 183.5M236.5 120L240 120L240 123.5M152.5 216L156 216L156 219.5M212.5 156L216 156L216 159.5M188.5 192L192 192L192 195.5M164.5 228L168 228L168 231.5M224.5 168L228 168L228 171.5M200.5 204L204 204L204 207.5M176.5 240L180 240L180 243.5M236.5 180L240 180L240 183.5M212.5 216L216 216L216 219.5M224.5 228L228 228L228 231.5M236.5 240L240 240L240 243.5'/%3E%3C/g%3E%3C/svg%3E");
  --bg-koma-size:240px 240px; --bg-koma-pos:0 0;
}

/* 背景の柄を各面に当てる */
.paper-w{background-color:var(--paper);background-image:var(--bg-w);background-size:var(--bg-w-size);background-position:var(--bg-w-pos)}
.paper-d{background-color:var(--ink);color:var(--paper);background-image:var(--bg-d);background-size:var(--bg-d-size);background-position:var(--bg-d-pos)}

/* =========================================================
   PCフレーム
   ========================================================= */
.rail{display:none}
.page{position:relative;max-width:var(--col);margin:0 auto;background:var(--paper);overflow:hidden;container-type:inline-size}
@media (min-width:1024px){
  .frame{display:grid;grid-template-columns:1fr var(--col) 1fr;min-height:100vh}
  .page{border-inline:2px solid var(--ink);box-shadow:0 10px 40px rgba(28,25,23,.18);width:var(--col)}
  .rail{display:flex;position:sticky;top:0;height:100vh;flex-direction:column;justify-content:center;padding:40px clamp(24px,3.4vw,60px)}
  .rail--l{align-items:flex-end;text-align:right;gap:20px}
  .rail--r{align-items:flex-start;gap:14px}
}
.rail__logo{background:var(--ink);border:2px solid var(--or);border-radius:16px;padding:14px 22px}
.rail__catch{font-family:var(--ff-serif);font-weight:900;font-size:clamp(17px,1.5vw,23px);line-height:1.55}
.rail__catch b{font-family:var(--ff-sans);background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.rail__chars{display:flex;align-items:flex-end}
.rail__chars .char{width:clamp(60px,5.6vw,92px);margin-inline:-10px}
.rail__chars .char:nth-child(odd){animation:bob 2.6s ease-in-out infinite}
.rail__chars .char:nth-child(even){animation:bob 2.6s ease-in-out -1.3s infinite}
.rail .cta{width:min(320px,100%)}
.toc__ttl{font-family:var(--ff-en);font-style:italic;font-weight:900;font-size:28px;line-height:1}
.toc{list-style:none;margin:0;padding:0;display:grid;gap:2px;counter-reset:toc}
.toc a{display:flex;gap:12px;align-items:baseline;padding:5px 0;text-decoration:none;font-weight:700;font-size:14.5px;color:var(--mute);transition:color .25s,transform .25s}
.toc a::before{counter-increment:toc;content:counter(toc,decimal-leading-zero);font-family:var(--ff-mono);font-size:11px}
.toc a:hover,.toc a.is-now{color:var(--ink);transform:translateX(6px)}
.toc a.is-now::before{color:var(--or2)}

/* =========================================================
   共通パーツ
   ========================================================= */
.wrap{padding-inline:max(18px,env(safe-area-inset-left,0px)) max(18px,env(safe-area-inset-right,0px))}
.sec{padding-block:72px}
.mark{display:inline-flex;align-items:baseline;gap:.24em;font-family:var(--ff-en);font-style:italic;font-weight:900;letter-spacing:-.02em;line-height:1;white-space:nowrap;text-decoration:none}
.mark span:last-child{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.08em}
.mark--w{color:var(--paper)}
.eyebrow{display:flex;align-items:center;justify-content:center;gap:10px;font-family:var(--ff-en);font-style:italic;font-weight:900;font-size:13px;letter-spacing:.14em;color:var(--or2)}
.eyebrow::before,.eyebrow::after{content:"";width:22px;height:2px;background:currentColor}
.h2{margin-top:10px;font-family:var(--ff-serif);font-weight:900;font-size:clamp(25px,7.4cqi,34px);line-height:1.42;letter-spacing:.02em;text-align:center;text-wrap:balance}
.h2 .sans{font-family:var(--ff-sans)}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.marker{background:linear-gradient(to bottom,transparent 62%,var(--lime) 62%,var(--lime) 94%,transparent 94%);padding-inline:2px}
.card{background:var(--paper);border:2px solid var(--ink);border-radius:10px}

.bars{display:grid;justify-items:center;gap:8px}
.bar{display:inline-block;background:var(--ink);color:var(--paper);font-weight:900;line-height:1.35;padding:5px 12px 6px;letter-spacing:.02em}
.bar b{color:var(--or)}
.bar i{font-style:normal;color:var(--lime)}
.js .bars.rv .bar{clip-path:inset(0 100% 0 0);transition:clip-path .55s cubic-bezier(.7,0,.2,1)}
.js .bars.rv.is-in .bar{clip-path:inset(0 0 0 0)}
.bars.rv .bar:nth-of-type(2){transition-delay:.15s}
.bars.rv .bar:nth-of-type(3){transition-delay:.3s}
.bars.rv .bar:nth-of-type(4){transition-delay:.45s}

/* ボタン */
.cta{display:grid;gap:12px}
.btn{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;min-height:66px;padding:10px 54px 10px 22px;border-radius:999px;text-decoration:none;font-weight:900;font-size:18px;line-height:1.3;letter-spacing:.03em;overflow:hidden;isolation:isolate;transition:transform .18s,box-shadow .18s}
.btn small{display:block;font-weight:700;font-size:11.5px;letter-spacing:.06em;opacity:.95}
.btn__txt{text-align:center}
.btn--main{background:var(--grad);color:var(--paper);border:3px solid var(--paper);box-shadow:0 0 0 2px var(--or2),0 8px 18px rgba(251,74,25,.35)}
.btn--sub{background:var(--ink);color:var(--paper);border:3px solid var(--paper);box-shadow:0 0 0 2px var(--ink),0 8px 18px rgba(28,25,23,.25);padding-inline:22px}
.btn::after{content:"";position:absolute;inset:-20% auto -20% -40%;width:26%;background:rgba(255,255,255,.4);transform:skewX(-20deg);animation:shine 3.6s ease-in-out infinite;z-index:-1}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(1px)}
.btn__go{position:absolute;right:20px;top:50%;width:22px;height:22px;margin-top:-11px;border-radius:50%;background:var(--paper);color:var(--or2);display:grid;place-items:center}
.btn__go svg{width:10px;height:10px}
.btn__ico{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--or);animation:wiggle 2.4s ease-in-out infinite}
.btn__ico svg{width:15px;height:15px}
.btn--sm{min-height:54px;font-size:16px}

/* テキストリンク */
.tlink{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-weight:900;font-size:14px;text-decoration:none;color:var(--or2);border-bottom:2px solid currentColor;line-height:1.5;padding-bottom:1px;transition:gap .2s}
.tlink svg{width:11px;height:11px;flex:none}
.tlink:hover{gap:10px}
.tlinks{display:grid;justify-items:start;gap:0}

/* キャラクター（透過PNGの余白を打ち消して接地させる） */
.char{position:relative;display:block;line-height:0}
.char img{width:100%;height:auto}
.char--tall img{margin-bottom:-13%}
.char--sq img{margin-bottom:-8%}

/* =========================================================
   HEADER / タグ
   ========================================================= */
.topbar{padding:12px max(12px,env(safe-area-inset-right,0px)) 0 max(12px,env(safe-area-inset-left,0px));background:var(--base)}
.topbar__in{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--ink);border:2px solid var(--or);border-radius:16px;padding:12px 12px 12px 16px}
.topbar .mark{font-size:clamp(16px,4.9cqi,23px)}
.topbar__cta{flex:none;display:inline-flex;align-items:center;gap:6px;background:var(--grad);color:var(--paper);text-decoration:none;font-weight:900;font-size:12.5px;padding:8px 14px;border-radius:99px;letter-spacing:.03em}
.topbar__cta svg{width:11px;height:11px}

/* =========================================================
   FV
   ========================================================= */
.hero{padding:22px 12px 34px;background:var(--paper)}
.hero__card{position:relative;background:var(--panel);border:2px solid var(--ink);border-radius:30px;padding:26px 16px 0;overflow:hidden}
.hero__card::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:var(--bg-card);background-size:var(--bg-card-size);background-position:var(--bg-card-pos);-webkit-mask-image:linear-gradient(to bottom,#000 30%,transparent 90%);mask-image:linear-gradient(to bottom,#000 30%,transparent 90%)}
.hero__lead{position:relative;text-align:center;font-weight:900;font-size:clamp(13px,3.7cqi,17px);letter-spacing:.06em;white-space:nowrap;animation:fadeUp .6s .05s both}
.hero__h1{position:relative;margin-top:10px;line-height:1.1;letter-spacing:.01em}
.hero__h1 .ln{display:block;overflow:hidden;padding-block:.06em}
.hero__h1 .ln > span{display:inline-block;animation:rise .8s var(--ease) both}
.hero__h1 .ln2 > span{animation-delay:.12s}
.hero__h1 .ln3 > span{animation-delay:.24s}
.hero__h1 .ln1{font-weight:900;font-size:calc((100cqi - 58px) / 11.2);white-space:nowrap}
.hero__h1 .ln2{font-weight:900;font-size:calc((100cqi - 58px) / 5.85);line-height:1.08;white-space:nowrap}
.hero__h1 .ln2 .to{font-size:.62em;margin-left:.04em}
.hero__h1 .ln3{font-family:var(--ff-serif);font-weight:900;font-size:calc((100cqi - 58px) / 6.6);white-space:nowrap}
.sheen{background:linear-gradient(90deg,var(--or) 0%,var(--or2) 40%,#ffb14a 50%,var(--or2) 60%,var(--or) 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sheen 5s linear infinite}
/* FVの中身：見出し3行目「楽しく。」の上辺から、右に大明司一利・左に画面共有デモ */
.hero__body{--ln3:calc((100cqi - 58px) / 6.6 * 1.22);--sw:36%;position:relative;display:grid;grid-template-columns:minmax(0,1fr) var(--sw);grid-template-rows:calc(var(--ln3) + 10px) minmax(0,1fr);grid-template-areas:". stage" "scr stage";column-gap:10px;margin-top:calc(-1 * var(--ln3))}
.hero__eps{display:none}
.hero__stage{grid-area:stage;position:relative;z-index:2;align-self:end}
.hero__stage .char{width:182%;margin:-22.8% 0 -30% -40%;animation:slideIn 1s var(--ease) .35s both,bobD 3.6s ease-in-out 1.4s infinite}
/* 画面共有デモ（基本＝1：ライブ・ターミナル） */
.scr{grid-area:scr;position:relative;z-index:3;display:flex;flex-direction:column;min-width:0;min-height:180px;margin-bottom:14px;background:var(--ink);color:#e9e6df;border-radius:12px;box-shadow:0 16px 30px -14px rgba(28,25,23,.6);overflow:hidden;animation:fadeUp .7s .9s both}
.scr__bar{display:flex;align-items:center;gap:8px;padding:8px 10px 5px;font-size:10px;line-height:1}
.scr__dots{display:flex;gap:4px}
.scr__dots i{width:7px;height:7px;border-radius:50%;background:#5a5550}
.scr__dots i:nth-child(1){background:var(--or2)}
.scr__dots i:nth-child(2){background:var(--yellow)}
.scr__dots i:nth-child(3){background:var(--green)}
.scr__live{display:inline-flex;align-items:center;gap:5px;min-width:0;overflow:hidden;font-weight:700;letter-spacing:.04em;color:#bdb7ae;white-space:nowrap}
.scr__live i{width:6px;height:6px;border-radius:50%;background:#ff4d3d;box-shadow:0 0 0 3px rgba(255,77,61,.22);animation:blink 1.4s ease-in-out infinite}
.scr__time{margin-left:auto;font-family:var(--ff-mono);font-variant-numeric:tabular-nums;color:#8f8a83}
.scr__eps{display:flex;gap:3px;padding:1px 10px 0}
.scr__seg{flex:1;position:relative;height:13px;padding:0;border:0;background:none;cursor:pointer}
.scr__seg::before,.scr__seg i{content:"";position:absolute;left:0;top:5px;height:3px;border-radius:2px}
.scr__seg::before{right:0;background:rgba(255,255,255,.16)}
.scr__seg i{width:var(--p,0%);background:var(--or);transition:width .35s linear}
.scr__head{display:flex;align-items:baseline;gap:8px;padding:4px 10px 7px;border-bottom:1px solid rgba(255,255,255,.08)}
.scr__no{flex:none;font-family:var(--ff-mono);font-weight:700;font-size:10.5px;color:var(--or)}
.scr__no small{font-size:.85em;color:#8f8a83}
.scr__ttl{min-width:0;font-weight:900;font-size:12.5px;line-height:1.35}
@container (max-width:420px){.scr__live span{display:none}.scr__ttl{font-size:11.5px}}
.scr__ttl.is-swap{animation:fadeUp .45s var(--ease) both}
.scr__view{position:relative;flex:1;min-height:0;cursor:pointer}
.scr__log{position:absolute;inset:0;overflow:hidden;padding:8px 10px 16px;font-family:var(--ff-mono);font-size:11px;line-height:1.7;transition:opacity .25s}
.scr__log.is-over{-webkit-mask-image:linear-gradient(transparent 0,#000 26px);mask-image:linear-gradient(transparent 0,#000 26px)}
.scr__log.is-clear{opacity:0}
.scr.is-next .scr__log{padding-bottom:92px}
.sl{overflow-wrap:anywhere;animation:slIn .3s var(--ease) both}
.sl__p{color:var(--or)}
.sl--cmd{color:#fff;margin-top:6px}
.sl--cmd:first-child{margin-top:0}
.sl.is-typing .sl__txt::after{content:"";display:inline-block;width:6px;height:1.05em;background:var(--lime);vertical-align:-2px;margin-left:2px;animation:caret .8s steps(1) infinite}
.sl--out{color:#a9a39a;padding-left:1em}
.sl--ok{color:var(--lime);padding-left:1em}
.sl--ok::before{content:"✓ "}
.sl--hl{color:var(--or);font-weight:700;margin-top:5px}
.sl--hl::before{content:"› "}
.sl--me,.sl--you{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px;margin-top:5px;font-family:var(--ff-sans)}
.sl__who{align-self:start;margin-top:2px;padding:1px 5px;border-radius:4px;font-size:9.5px;font-weight:900;line-height:1.45;white-space:nowrap}
.sl--me .sl__who{background:var(--or);color:var(--ink)}
.sl--you .sl__who{background:var(--lime);color:var(--ink)}
.sl--me .sl__txt,.sl--you .sl__txt{color:#fff;font-weight:700}
.sl__dots{display:inline-flex;gap:3px;vertical-align:middle}
.sl__dots i{width:4px;height:4px;border-radius:50%;background:currentColor;animation:blink 1s ease-in-out infinite}
.sl__dots i:nth-child(2){animation-delay:.15s}
.sl__dots i:nth-child(3){animation-delay:.3s}
.sl--bar{display:grid;grid-template-columns:minmax(30px,1fr) auto;align-items:center;gap:1px 8px;padding-left:1em;color:#a9a39a}
.sl--bar .sl__txt{grid-column:1/-1}
.sl__meter{height:6px;border-radius:3px;background:rgba(255,255,255,.12);overflow:hidden}
.sl__meter i{display:block;height:100%;width:0;background:var(--grad);transition:width .1s linear}
.sl__pct{min-width:3.1em;text-align:right;font-family:var(--ff-mono);font-variant-numeric:tabular-nums;color:#fff}
.sl--num{padding-left:1em;color:#a9a39a}
.sl--num s{opacity:.7}
.sl--num b{margin-inline:3px;font-family:var(--ff-mono);font-size:1.55em;color:var(--lime);font-variant-numeric:tabular-nums}
.sl--cta{margin-top:10px}
.sl--cta a{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:6px;background:var(--grad);color:#fff;text-decoration:none;font-family:var(--ff-sans);font-weight:900;font-size:12px}
.scr__next{position:absolute;left:8px;right:8px;bottom:8px;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"lbl go" "ttl ttl" "bar bar";align-items:center;gap:4px 8px;padding:8px 10px 9px;border-radius:10px;background:#2c2723;border:1px solid rgba(251,134,25,.5);box-shadow:0 12px 26px rgba(0,0,0,.5);color:#fff;cursor:default;animation:nextIn .5s var(--ease) both}
.scr__next[hidden]{display:none}
.scr__nextlbl{grid-area:lbl;font-family:var(--ff-mono);font-weight:700;font-size:10px;letter-spacing:.14em;color:var(--or)}
.scr__go{grid-area:go;padding:4px 10px;border:0;border-radius:99px;background:var(--or);color:var(--ink);font:inherit;font-weight:900;font-size:11px;cursor:pointer;white-space:nowrap}
.scr__nextttl{grid-area:ttl;font-weight:900;font-size:12.5px;line-height:1.4}
.scr__count{grid-area:bar;height:3px;border-radius:2px;background:rgba(255,255,255,.14);overflow:hidden}
.scr__count i{display:block;height:100%;width:100%;background:var(--or)}
.scr__pause{position:absolute;top:8px;right:8px;z-index:2;display:none;padding:3px 9px;border-radius:99px;background:rgba(255,255,255,.16);font-size:10px;font-weight:700;color:#fff;pointer-events:none}
.scr.is-paused .scr__pause{display:block}
.scr.is-paused .scr__live i{animation:none;opacity:.4}
.band{position:relative;margin:0 -16px;background:var(--ink);padding:14px 16px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;z-index:4}
.band .mark{font-size:clamp(22px,6.6cqi,32px)}
.band small{flex:none;font-family:var(--ff-mono);font-size:9.5px;line-height:1.5;letter-spacing:.04em;color:#a8a39b;text-align:right;white-space:nowrap}
.hero .cta{margin-top:22px;padding-inline:4px}

/* =========================================================
   ティッカー
   ========================================================= */

/* =========================================================
   ABOUT
   ========================================================= */
.about{text-align:center}
.about__ttl{margin-top:10px;font-family:var(--ff-serif);font-weight:900;font-size:clamp(27px,7.6cqi,34px);line-height:1.3}
.about__ttl .grad{font-family:var(--ff-sans)}
.about .bars{margin-top:24px}
.about .bar{font-size:min(calc((100cqi - 64px) / 16),25px);padding:6px 14px 7px}
.about .bar b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* スライダー共通 */
.slider{position:relative}
.slider__track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;outline-offset:-3px}
.slider__track::-webkit-scrollbar{display:none}
.dots{display:flex;justify-content:center;align-items:center;gap:8px}
.dots button{width:9px;height:9px;padding:0;border:0;border-radius:50%;background:#c9c6bf;cursor:pointer;transition:width .3s,background .3s}
.dots button[aria-current="true"]{width:28px;border-radius:99px;background:var(--ink)}

/* 顔カード */

/* =========================================================
   WHY
   ========================================================= */
.why{text-align:center;padding-block:68px 56px}
.bridge + .why{padding-top:22px}   /* 会話のつなぎの直後は、間を詰める */
.why .h2{color:var(--paper);font-size:clamp(26px,7.8cqi,36px)}
.why .h2 .q{font-family:var(--ff-sans);background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.five{position:relative;margin:30px auto 0;max-width:360px;background:var(--paper);color:var(--ink);border-radius:18px;padding:18px 18px 20px}
.five::before{content:"";position:absolute;left:50%;top:-12px;width:2px;height:24px;margin-left:-1px;background:var(--or)}
.five .mark{font-size:24px}
.five p{margin-top:8px;font-weight:900;font-size:min(calc((100cqi - 96px) / 13.4),24px);line-height:1.3;white-space:nowrap}
.five p strong{font-family:var(--ff-en);font-style:italic;font-weight:900;font-size:1.9em;line-height:.8;vertical-align:-.08em;padding-inline:.06em}
.five__nums{margin-top:14px;display:flex;justify-content:center;gap:6px}
.five__nums span{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;border:2px solid var(--ink);font-family:var(--ff-en);font-style:italic;font-weight:900;font-size:13px;transition:background .3s,color .3s,transform .3s var(--pop)}
.five__nums span.is-on{background:var(--ink);color:var(--paper);transform:scale(1.08)}

/* =========================================================
   REASONS
   ========================================================= */
.reasons{padding-block:20px 48px}
.reason{padding-top:22px}
.reason + .reason{margin-top:26px;border-top:1px dashed #cfccc5}
.reason__no{display:flex;align-items:flex-end;justify-content:center;gap:12px;line-height:.8}
.reason__no small{padding-bottom:9px;font-family:var(--ff-en);font-style:italic;font-weight:900;font-size:19px;letter-spacing:.14em}
.reason__no b{font-family:var(--ff-en);font-style:italic;font-weight:900;font-size:98px;letter-spacing:-.04em;line-height:.8;padding-right:.06em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.reason__msg{position:relative;margin:26px auto 0;width:max-content;max-width:100%;padding:18px 24px 14px;text-align:center;font-weight:900;font-size:clamp(17px,4.9cqi,21px);line-height:1.55;background:var(--paper);border:2px solid var(--ink);border-radius:14px;box-shadow:0 8px 10px rgba(28,25,23,.08)}
.reason__msg::before{content:"MESSAGE";position:absolute;left:50%;top:-11px;transform:translateX(-50%);padding:0 10px;line-height:20px;white-space:nowrap;background:var(--paper);font-family:var(--ff-en);font-style:italic;font-weight:900;font-size:13px;letter-spacing:1.5px;color:var(--mute)}
.reason__arrow{margin:12px auto 10px;width:20px;height:56px;color:var(--ink)}
.reason__arrow line{stroke-dasharray:4 4;animation:dash 1s linear infinite}
.reason__gain{gap:9px}
.so{margin-bottom:2px;padding:2px 18px 3px;border-radius:99px;background:var(--grad);color:var(--paper);font-weight:900;font-size:17px;letter-spacing:.1em}
.reason__gain .bar{font-size:min(calc((100cqi - 60px) / 13.2),27px);padding:7px 14px 8px;white-space:nowrap}
.reason__body{margin-top:14px;font-size:15px;line-height:1.93}
.fine{margin-top:8px;font-size:11.5px;line-height:1.7;color:var(--mute)}
.creds{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.creds li{font-weight:900;font-size:13px;line-height:1.4;padding:4px 10px 4px 26px;border:2px solid var(--ink);border-radius:99px;background:var(--paper);position:relative}
.creds li::before{content:"";position:absolute;left:9px;top:50%;width:9px;height:9px;margin-top:-5px;border-radius:50%;background:var(--grad)}

/* コマ（イラスト枠） */
.koma{position:relative;margin-top:14px;height:228px;border:2px solid var(--ink);border-radius:14px;background-color:var(--bg,#fff);overflow:hidden}
.koma::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:var(--bg-koma);background-size:var(--bg-koma-size);background-position:var(--bg-koma-pos)}
.koma__cap{position:absolute;inset:0 0 auto;z-index:4;display:flex;align-items:center;gap:6px;padding:3px 10px;line-height:1.6;background:var(--ink);color:#e9e6df;font-family:var(--ff-mono);font-weight:700;font-size:11px}
.koma__cap::before{content:"";width:7px;height:7px;margin-right:26px;border-radius:50%;background:var(--or2);box-shadow:11px 0 0 var(--yellow),22px 0 0 var(--green)}
.koma__note{position:absolute;right:8px;bottom:6px;z-index:4;padding:0 6px;border-radius:4px;background:rgba(255,255,255,.9);font-size:10px;font-weight:700;color:var(--mute)}
.koma .char{position:absolute;z-index:2}
.koma__live,.koma__alert{position:absolute;right:8px;top:30px;z-index:4;padding:0 8px;border-radius:4px;font-family:var(--ff-mono);font-weight:700;font-size:10.5px;color:var(--paper)}
.koma__live{background:var(--green)}
.koma__alert{background:var(--red);animation:blink 1.1s steps(1) infinite}

/* 01 画面共有 */
.koma--share{--bg:#fff1e4;height:236px}
.koma--share .char{width:178px;right:-34px;bottom:-14px}
.sheet{position:absolute;left:16px;top:36px;z-index:3;width:min(236px,64%);padding:7px 9px 8px;display:flex;flex-direction:column;gap:3px;border-radius:6px}
.sheet__ttl{font-family:var(--ff-mono);font-weight:500;font-size:10.5px;color:var(--mute);border-bottom:1px dashed #e4e1d6;padding-bottom:2px}
.sheet__goal{font-size:13px;line-height:1.5;font-weight:900}
.sheet__rows{display:grid;gap:1px}
.sheet__row{display:flex;align-items:center;gap:7px;height:23px;font-weight:900;font-size:12px;white-space:nowrap}
.sheet__box{flex:none;width:16px;height:16px;display:grid;place-items:center;border:2px solid var(--ink);border-radius:3px}
.sheet__box svg{width:12px;height:12px}
.sheet__box path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .35s ease-out}
.is-in .sheet__row:nth-child(1) path{transition-delay:.35s}
.is-in .sheet__row:nth-child(2) path{transition-delay:.8s}
.is-in .sheet__row:nth-child(3) path{transition-delay:1.25s}
.is-in .sheet__box path{stroke-dashoffset:0}
.sheet__done{text-align:center;font-size:15px;font-weight:900;line-height:22px;color:var(--or2);transform:scale(0);transition:transform .45s var(--pop) 1.7s}
.is-in .sheet__done{transform:scale(1)}

/* 02 つくる・届ける */
.koma--make{--bg:#f1eafe}
.koma--make .char{width:170px;right:-30px;bottom:-12px}
.steps4{position:absolute;left:14px;top:38px;z-index:3;width:66%;display:grid;gap:7px}
.steps4__row{display:grid;grid-template-columns:4.4em 1fr;align-items:center;gap:6px;font-weight:900;font-size:12px;line-height:1.2}
.steps4__row em{display:block;font-family:var(--ff-mono);font-style:normal;font-size:9px;color:var(--mute)}
.steps4__bar{height:27px;border:2px solid var(--ink);border-radius:6px;background:var(--paper);overflow:hidden}
.steps4__bar i{display:flex;align-items:center;height:100%;width:0;padding-left:7px;overflow:hidden;white-space:nowrap;background:var(--c);color:var(--paper);font-style:normal;font-size:11px;font-weight:900;transition:width .9s var(--ease)}
.steps4__row:nth-child(2) i{transition-delay:.3s}
.steps4__row:nth-child(3) i{transition-delay:.6s}
.steps4__row:nth-child(4) i{transition-delay:.9s}
.is-in .steps4__bar i{width:100%}
.steps4__goal{justify-self:start;margin-top:2px;padding:1px 12px;border-radius:99px;background:var(--ink);color:var(--paper);font-weight:900;font-size:12.5px;white-space:nowrap;transform:scale(0) rotate(-4deg);transition:transform .45s var(--pop) 1.5s}
.is-in .steps4__goal{transform:scale(1) rotate(-4deg)}

/* 03 道具 */
.koma--kit{--bg:#fff7d6;height:250px}
.koma--kit .char{width:124px;right:0;bottom:-14px}
.feed{position:absolute;left:0;right:0;top:52px;z-index:1;display:grid;gap:10px}
.feed__row{display:flex;gap:8px;width:max-content;animation:marquee 20s linear infinite}
.feed__row--rev{animation-direction:reverse;animation-duration:17s}
.feed__row--img img{flex:none;width:72px;height:72px;object-fit:cover;border:2px solid var(--ink);border-radius:10px;background:var(--paper)}
.feed__chip{flex:none;padding:3px 12px;border:2px solid var(--ink);border-radius:99px;background:var(--paper);font-weight:900;font-size:12.5px;white-space:nowrap}
.feed__chip b{margin-right:5px;padding:0 4px;border-radius:4px;background:var(--red);color:var(--paper);font-family:var(--ff-en);font-weight:900;font-size:9.5px}

/* 04 実績 */
.koma--proof{--bg:#e6f6ea;height:242px}
.koma--proof .char{width:132px;right:-14px;bottom:-14px}
.dash{position:absolute;left:12px;top:36px;z-index:3;width:72%;padding:8px 10px 6px}
.dash__rows{display:grid;gap:3px}
.dash__row{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:6px;padding-bottom:2px;border-bottom:1.5px dashed #e4e1d6;font-size:11px;font-weight:900;white-space:nowrap}
.dash__row span{overflow:hidden;text-overflow:ellipsis}
.dash__row b{font-family:var(--ff-en);font-weight:900;font-size:14.5px;font-variant-numeric:tabular-nums;text-align:right}
.dash__row b span{font-size:1.12em}
.dash__row .up{color:var(--green)}
.spark{width:100%;height:auto;margin-top:6px;overflow:visible}
.spark__line{fill:none;stroke:var(--ink);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.8s ease-out .2s}
.spark__area{fill:rgba(34,162,74,.22);opacity:0;transition:opacity .8s 1.2s}
.spark circle{fill:var(--or);stroke:var(--ink);stroke-width:2;opacity:0;transition:opacity .2s 1.6s}
.is-in .spark__line{stroke-dashoffset:0}
.is-in .spark__area,.is-in .spark circle{opacity:1}

/* 05 実践ノート */
.koma--notes{--bg:#ffe9e6;height:236px}

/* 実践ノート一覧 */
.notes{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}
.notes a{display:grid;gap:2px;padding:9px 34px 10px 12px;background:var(--paper);border:2px solid var(--ink);border-radius:10px;text-decoration:none;position:relative;transition:transform .2s,box-shadow .2s}
.notes a::after{content:"";position:absolute;right:13px;top:50%;width:8px;height:8px;margin-top:-4px;border-top:2.5px solid var(--or2);border-right:2.5px solid var(--or2);transform:rotate(45deg)}
.notes a:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--ink)}
.notes__meta{font-family:var(--ff-mono);font-weight:700;font-size:10.5px;color:var(--or2);letter-spacing:.04em}
.notes__meta time{margin-left:8px;color:var(--mute)}
.notes__ttl{font-weight:900;font-size:14px;line-height:1.55}

/* =========================================================
   AIに、夢中に。（dark）
   ========================================================= */
.shout{position:relative;text-align:center;overflow:hidden}
.shout__glow{position:absolute;left:50%;top:44%;width:440px;height:440px;margin:-220px 0 0 -220px;border-radius:50%;background:radial-gradient(circle,rgba(251,134,25,.35),transparent 65%);pointer-events:none}
.shout .wrap{position:relative}
.shout__lead{font-weight:900;font-size:clamp(16px,4.6cqi,21px)}
.shout__big{position:relative;margin-top:4px;white-space:nowrap;font-family:var(--ff-serif);font-weight:900;font-size:min(calc((100cqi - 48px) / 6.6),62px);line-height:1.3}
.shout__big .ch{display:inline-block}
.js .shout__big .ch{opacity:0}
.shout__big.is-in .ch{animation:shout .55s var(--pop) both;animation-delay:calc(var(--i) * 75ms)}
.shout__big .hot .ch{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.shout__stage{position:relative;height:270px;margin-top:4px}
.shout__stage .char{position:absolute;left:50%;top:50%;width:min(300px,78%);transform:translate(-50%,-50%);z-index:5}
.shout__stage .char img{animation:floatTilt 3.4s ease-in-out infinite}
.ai-orbit{position:absolute;inset:0}
.ai-tile{position:absolute;left:50%;top:50%;width:104px;height:44px;display:grid;place-items:center;padding:6px 10px;background:var(--paper);border:2px solid var(--ink);border-radius:12px;box-shadow:0 0 0 2px rgba(255,255,255,.12),0 10px 18px rgba(0,0,0,.35);transform:translate(-50%,-50%)}
.ai-tile{overflow:hidden}
.ai-tile img{position:absolute;left:6px;top:3px;width:calc(100% - 12px);height:calc(100% - 6px);max-width:none;object-fit:cover}   /* ロゴをカードの中に収める（上下の白い余白だけ切る） */
.shout__note{margin-top:8px;font-weight:700;font-size:15px;line-height:1.9;color:#e9e6df}
.shout__logo{margin-top:18px}
.shout__logo .mark{font-size:clamp(30px,9.2cqi,44px)}
.shout .cta{margin-top:26px}

/* =========================================================
   信頼の理由（エビデンス）
   ========================================================= */
.proof__head{text-align:center}
.proof__kicker{margin-top:14px;font-weight:900;font-size:15px}
.proof__id{margin-top:8px;display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.proof__id span{padding:1px 10px;border:2px solid var(--ink);border-radius:99px;background:var(--paper);font-weight:900;font-size:12.5px}
.proof__sub{margin-top:8px;font-size:13px;color:var(--mute);line-height:1.8}
.slider__nav{display:flex;align-items:center;justify-content:center;gap:16px}
.arrow{width:44px;height:44px;padding:0;display:grid;place-items:center;border:2px solid var(--ink);border-radius:50%;background:var(--paper);color:var(--ink);cursor:pointer;transition:background .2s,color .2s}
.arrow:hover{background:var(--ink);color:var(--paper)}
.arrow svg{width:16px;height:16px}

/* 経歴・資格（アコーディオン） */
.records{margin-top:40px;display:grid;gap:12px}
.records__who{display:flex;align-items:center;gap:14px;padding:14px;background:var(--paper);border:2px solid var(--ink);border-radius:14px;box-shadow:0 8px 10px rgba(28,25,23,.08)}
.records__who img{flex:none;width:76px;height:76px;border-radius:50%;border:2px solid var(--ink);object-fit:cover}
.records__who div{display:grid;gap:1px}
.records__catch{justify-self:start;padding:0 8px;background:var(--ink);color:var(--paper);font-weight:900;font-size:11.5px;line-height:1.7}
.records__who b{font-family:var(--ff-serif);font-weight:900;font-size:22px;line-height:1.4}
.records__who small{font-size:11.5px;font-weight:700;color:var(--mute);line-height:1.5}
.rec{background:var(--paper);border:2px solid var(--ink);border-radius:12px;overflow:hidden}
.rec summary{list-style:none;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:12px 14px;cursor:pointer}
.rec summary::-webkit-details-marker{display:none}
.rec__no{width:40px;height:40px;display:grid;place-items:center;border-radius:10px;background:var(--ink);color:var(--paper);font-family:var(--ff-en);font-style:italic;font-weight:900;font-size:16px}
.rec__ttl{display:grid;line-height:1.45}
.rec__ttl b{font-weight:900;font-size:16px}
.rec__ttl small{font-size:11.5px;font-weight:700;color:var(--mute)}
.rec__pm{position:relative;width:26px;height:26px;border:2px solid var(--ink);border-radius:50%}
.rec__pm::before,.rec__pm::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:2px;margin:-1px 0 0 -5px;background:var(--ink);transition:transform .3s}
.rec__pm::after{transform:rotate(90deg)}
.rec[open] .rec__pm::after{transform:rotate(0)}
.rec[open] summary{border-bottom:1.5px dashed #cfccc5}
.rec__body{padding:12px 14px 16px;font-size:13.5px;line-height:1.9}
.rank{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px}
.rank li{display:grid;grid-template-columns:5.6em 1fr;gap:8px;padding:7px 10px;background:var(--panel);border-radius:8px;line-height:1.5}
.rank time{font-family:var(--ff-mono);font-size:11px;font-weight:700;color:var(--or2);padding-top:2px}
.rank b{display:block;font-size:13.5px}
.rank span{font-size:12px;color:var(--mute)}
.rec__note{margin-top:10px;font-size:13px}
.quals{margin:10px 0 0;display:grid;gap:4px}
.quals div{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:5px 0;border-bottom:1.5px dashed #e4e1d6}
.quals dt{font-weight:900;font-size:13.5px}
.quals dt small{font-weight:700;font-size:11px;color:var(--mute)}
.quals dd{margin:0;flex:none;font-family:var(--ff-mono);font-size:11.5px;color:var(--mute)}
.paths{margin-top:10px;display:grid;gap:6px}
.paths a{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 12px;border:2px solid var(--ink);border-radius:10px;text-decoration:none;transition:background .2s,color .2s}
.paths a b{font-size:13.5px}
.paths a span{font-size:11.5px;font-weight:700;color:var(--or2)}
.paths a:hover{background:var(--ink);color:var(--paper)}
.records__date{font-size:11.5px;color:var(--mute);text-align:right}
.next{margin-top:6px;padding:20px 16px;border-radius:16px;background:var(--ink);color:var(--paper);text-align:center;display:grid;gap:6px}
.next > b{font-size:18px;font-weight:900}
.next p{font-size:13px;color:#cfcac2;line-height:1.8}
.next .btn{margin-top:8px}

/* =========================================================
   AI実戦キット（dark）
   ========================================================= */
.kit{text-align:center}
.kit .h2{color:var(--paper);font-size:clamp(23px,6.6cqi,31px)}
.kit__sub{margin-top:8px;font-weight:700;font-size:13.5px;color:#bdb8af}
.kit__list{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.kit__list li{transition:transform .45s var(--pop),opacity .3s}
.js .kit__list:not(.is-in) li{transform:translateY(14px) scale(.85);opacity:0}
.kit__list.is-in li{transition-delay:calc(var(--i) * 60ms)}
.kit__list a{position:relative;display:grid;justify-items:center;gap:2px;height:100%;padding:10px 8px 12px;border-radius:8px;background:var(--paper);color:var(--ink);text-decoration:none;transition:transform .2s,box-shadow .2s}
.kit__list a:hover{transform:translateY(-3px);box-shadow:0 0 0 3px var(--or)}
.kit__list img{width:86px;height:86px;object-fit:cover;border-radius:6px;margin-bottom:4px}
.kit__no{position:absolute;left:8px;top:6px;font-family:var(--ff-en);font-style:italic;font-weight:900;font-size:13px;color:var(--or2)}
.kit__list b{font-family:var(--ff-en);font-weight:900;font-size:15.5px;line-height:1.3}
.kit__list small{font-size:11.5px;font-weight:700;line-height:1.5;color:var(--mute)}
.kit__more{grid-column:1 / -1}
.kit__list .kit__more a{display:flex;justify-content:center;align-items:center;gap:8px;padding:12px;background:transparent;color:var(--paper);border:2px dashed #77726b;font-weight:900;font-size:15px}
.kit__more svg{width:12px;height:12px}
.kit__note{margin-top:16px;font-size:11.5px;color:#a8a39b}

/* =========================================================
   体系から学ぶ（フロー）
   ========================================================= */
.path__lead{margin-top:10px;text-align:center;font-weight:900;font-size:14px;color:var(--mute)}
.path .h2{margin-top:2px}
.path__sub{margin-top:8px;text-align:center;font-size:13.5px;line-height:1.85}
.path__body{position:relative;margin-top:34px}
.path__steps{position:relative;list-style:none;margin:0;padding:0;display:grid;gap:14px}
.path__rail{position:absolute;left:25px;top:20px;width:3px;height:calc(100% - 120px);overflow:hidden;background:#dcd9d2}
.path__rail i{position:absolute;inset:0;transform-origin:top;transform:scaleY(var(--p,0));background:var(--grad)}
.step{position:relative;display:grid;grid-template-columns:52px 1fr;gap:14px;align-items:start}
.step__no{position:relative;z-index:1;width:52px;height:52px;display:grid;place-items:center;border:2px solid var(--ink);border-radius:12px;background:var(--paper);font-family:var(--ff-en);font-style:italic;font-weight:900;font-size:20px;transition:background .35s,color .35s}
.step.is-lit .step__no{background:var(--ink);color:var(--paper)}
.step__card{position:relative;display:block;min-height:96px;padding:12px 74px 14px 14px;background:var(--paper);border:2px solid var(--ink);border-radius:12px;text-decoration:none;transition:transform .2s,box-shadow .2s}
.step__card:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--ink)}
.step__card img{position:absolute;right:8px;top:50%;width:62px;height:62px;margin-top:-31px;object-fit:contain}
.step__card small{font-size:12px;font-weight:700;color:var(--mute)}
.step__ttl{font-weight:900;font-size:18px;line-height:1.4}
.step__txt{margin-top:6px;font-size:13.5px;line-height:1.9}
.step__go{display:inline-flex;align-items:center;gap:5px;margin-top:4px;font-weight:900;font-size:12.5px;color:var(--or2)}
.step__go svg{width:10px;height:10px}
.step--goal .step__no{border-color:var(--or2);color:var(--or2)}
.step--goal.is-lit .step__no{background:var(--grad);color:var(--paper)}
.step--goal .step__card{padding-right:14px;background:var(--ink);color:var(--paper);border-color:var(--ink)}
.step--goal .step__card small{color:#bdb8af}
.step--goal .step__ttl{color:var(--or)}
.step--goal .step__go{color:var(--lime)}

/* =========================================================
   CLOSING
   ========================================================= */
.finale{padding:0 12px 40px}
.finale__card{position:relative;padding:34px 16px 0;text-align:center;background:var(--panel);border:2px solid var(--ink);border-radius:30px;overflow:hidden}
.finale__eyebrow{font-weight:900;font-size:clamp(13px,3.6cqi,15px);color:var(--mute)}
.finale__h{position:relative;margin-top:6px;font-family:var(--ff-serif);font-weight:900;font-size:clamp(30px,8.8cqi,40px);line-height:1.4}
.finale__h .big{font-family:var(--ff-sans);font-size:1.35em;line-height:1}
.finale__stage{position:relative;height:290px;margin-top:6px}
.team{position:absolute;inset:auto 0 0;display:flex;justify-content:center;align-items:flex-end}
.team .char{width:24%;margin-inline:-4.5%}
.team .char--sq img{margin-bottom:-1%}
.team .char:not(.char--main){animation:bob 2.4s ease-in-out infinite}
.team .char:nth-child(2){animation-delay:-.6s}
.team .char:nth-child(4){animation-delay:-1.2s}
.team .char:nth-child(5){animation-delay:-1.8s}
.team .char--main{width:44%;z-index:2;margin-inline:-6%;animation:float 3s ease-in-out infinite}
.team .char--main img{margin-bottom:-10%}
.finale .band{margin:0 -16px}
.finale__body{padding:28px 0 32px;display:grid;gap:20px}
.finale__lead{font-weight:900;font-size:clamp(17px,4.9cqi,21px);line-height:1.7}
.finale__lead b{color:var(--or2)}
.finale__links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.finale__links a{padding:4px 14px;border:2px solid var(--ink);border-radius:99px;background:var(--paper);font-weight:900;font-size:13px;text-decoration:none;transition:background .2s,color .2s}
.finale__links a:hover{background:var(--ink);color:var(--paper)}

/* =========================================================
   FOOTER / 追従CTA
   ========================================================= */
.foot{padding:24px 16px calc(100px + env(safe-area-inset-bottom,0px));background:var(--ink);color:#a8a39b;text-align:center;font-size:12px}
.foot .mark{font-size:22px}
.foot__tag{margin-top:8px;font-size:12px}
.foot__links{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 14px;margin:10px 0 8px;font-size:11.5px}
.foot__links a{color:#d8d4cc;text-decoration:none;white-space:nowrap}
.foot__links a:hover{text-decoration:underline}
@media (min-width:1024px){.foot{padding-bottom:28px}}

.dock{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;gap:10px;padding:10px max(12px,env(safe-area-inset-right,0px)) calc(12px + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px));background:linear-gradient(to top,rgba(255,255,255,.96) 60%,rgba(255,255,255,0));transform:translateY(120%);transition:transform .4s var(--ease)}
.dock.is-shown{transform:translateY(0)}
.dock .btn{min-height:56px;font-size:16px;padding:8px 18px}
.dock .btn--main{flex:1}
.dock .btn--sub{flex:none;width:56px;padding:0}
@media (min-width:1024px){.dock{display:none}}

/* =========================================================
   スクロール出現
   ========================================================= */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .rv.is-in{opacity:1;transform:none}
.js .bars.rv{opacity:1;transform:none}

/* =========================================================
   keyframes
   ========================================================= */
@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes rise{from{transform:translateY(105%)}to{transform:translateY(0)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes sheen{from{background-position:100% 0}to{background-position:-150% 0}}
@keyframes slideIn{from{opacity:0;transform:translateX(40%) rotate(6deg)}to{opacity:1;transform:none}}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -10px}}
@keyframes floatTilt{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-12px) rotate(2deg)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes shine{0%,62%{left:-40%}100%{left:130%}}
@keyframes wiggle{0%,60%,100%{transform:rotate(0)}66%{transform:rotate(-16deg)}72%{transform:rotate(14deg)}78%{transform:rotate(-10deg)}84%{transform:rotate(6deg)}}
@keyframes caret{50%{opacity:0}}
@keyframes dash{to{stroke-dashoffset:-8}}
@keyframes blink{50%{opacity:.25}}
@keyframes shout{from{opacity:0;transform:translateY(30%) scale(.4) rotate(-8deg)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .js .rv,.js .shout__big .ch{opacity:1!important;transform:none!important}
}


/* =========================================================
   ボタン：矢印タブ付きの角ボタン（<html data-btn="3">）
   ========================================================= */

html[data-btn="3"] .btn{border:0;border-radius:6px;justify-content:flex-start;padding:10px 88px 10px 22px;box-shadow:0 12px 22px -12px rgba(28,25,23,.55)}
html[data-btn="3"] .btn__txt{text-align:left}
html[data-btn="3"] .btn__go{top:0;bottom:0;right:0;width:64px;height:auto;margin:0;border-radius:0 6px 6px 0;background:var(--ink);color:var(--paper);transition:width .3s var(--ease)}
html[data-btn="3"] .btn__go svg{width:16px;height:16px;transition:transform .3s var(--ease)}
html[data-btn="3"] .btn:hover .btn__go{width:74px}
html[data-btn="3"] .btn:hover .btn__go svg{transform:translateX(4px)}
html[data-btn="3"] .btn--main{box-shadow:0 12px 22px -12px rgba(251,74,25,.7)}
html[data-btn="3"] .btn--sub{background:var(--paper);color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink),0 12px 22px -14px rgba(28,25,23,.45)}
html[data-btn="3"] .btn--sub .btn__ico{border-radius:4px;color:var(--paper)}
html[data-btn="3"] .btn--sub::after{background:rgba(251,134,25,.18)}
html[data-btn="3"] .dock .btn--main{justify-content:center;padding:8px 18px}
html[data-btn="3"] .dock .btn--sub{justify-content:center;padding:0}
html[data-btn="3"] .topbar__cta{border-radius:4px}


/* =========================================================
   ヘッダーの見出しと「個別コンサル」ボタン：↗マーク×枠線ボタン（<html data-hd="2">）
   ========================================================= */
.hlogo{display:none;align-items:center;gap:9px;color:var(--paper);text-decoration:none;min-width:0}
.hlogo__ic{flex:none;width:30px;height:30px;display:none;place-items:center;border-radius:8px;background:var(--grad);color:var(--paper);box-shadow:0 4px 10px -4px rgba(251,74,25,.7)}
.hlogo__ic svg{width:15px;height:15px}
.hlogo__txt{display:grid;line-height:1.15;min-width:0}
.hlogo__txt small,.hlogo__jp,.hlogo__en,.hlogo__tag{display:none}
.topbar__ava{display:none}
.topbar__go{display:inline-grid;place-items:center}
.topbar__go svg{width:11px;height:11px}

html[data-hd] .topbar__mark{display:none}
html[data-hd] .hlogo{display:inline-flex}

/* ↗マーク×枠線ボタン */
html[data-hd="2"] .hlogo__ic{display:grid}
html[data-hd="2"] .hlogo__txt{grid-auto-flow:column;align-items:baseline;gap:.35em}
html[data-hd="2"] .hlogo__en,html[data-hd="2"] .hlogo__tag{display:block;font-family:var(--ff-en);font-weight:900;font-size:clamp(13.5px,3.8cqi,19px);letter-spacing:.06em;white-space:nowrap}
html[data-hd="2"] .hlogo__txt{flex:none}
html[data-hd="2"] .hlogo__tag{color:var(--or)}
html[data-hd="2"] .hlogo{gap:9px}
html[data-hd="2"] .hlogo__txt{display:flex;align-items:baseline;gap:.35em}
html[data-hd="2"] .topbar__cta{background:transparent;border:2px solid var(--or);border-radius:8px;padding:7px 12px;color:var(--paper);transition:background .2s,color .2s}
html[data-hd="2"] .topbar__cta:hover{background:var(--or);color:var(--ink)}
html[data-hd="2"] .topbar__go{color:var(--or)}
html[data-hd="2"] .topbar__cta:hover .topbar__go{color:var(--ink)}




/* =========================================================
   細かい部品の形（<html data-remix="3">）
   イラスト枠のタブ・白いメンバーカード・円の番号・四角いチップ
   ========================================================= */



/* イラスト枠の「● ● ●」バー → オレンジのタブ */
html[data-remix="3"] .koma__cap{inset:0 auto auto 0;padding:3px 12px 4px 10px;border-radius:0 0 10px 0;background:var(--grad);color:var(--paper)}
html[data-remix="3"] .koma__cap::before{content:"↗";width:auto;height:auto;margin-right:2px;background:none;box-shadow:none;border-radius:0}
/* メンバーカード：色ベタ → 白いカード＋上の色帯 */
/* 流れの番号：角丸の四角 → 円 */
html[data-remix="3"] .step__no{border-radius:50%;font-style:normal}


/* =========================================================
   FV・画面共有デモ：画面共有ウィンドウ（<html data-scr="2">）
   白い窓・吹き出し・イラストの左に話数リスト
   ========================================================= */
@keyframes slIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes nextIn{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
@keyframes bobD{0%,100%{translate:0 0}50%{translate:0 5px}}

html[data-scr="2"] .hero__body{--sw:32%;grid-template-rows:calc(var(--ln3) + 8px) auto minmax(0,1fr);grid-template-areas:". stage" "eps stage" "scr scr"}
html[data-scr="2"] .hero__stage{z-index:4;align-self:start}
html[data-scr="2"] .hero__stage .char{margin-bottom:-29.4%}
html[data-scr="2"] .hero__eps{display:block;grid-area:eps;align-self:end;padding:0 0 12px;animation:fadeUp .7s 1s both}
html[data-scr="2"] .scr{height:clamp(210px,52cqi,250px);background:#fff;color:var(--ink);border:2px solid var(--ink);border-radius:14px;box-shadow:0 18px 30px -18px rgba(28,25,23,.55)}
html[data-scr="2"] .scr__bar{padding:7px 10px;background:var(--panel);border-bottom:1.5px solid rgba(28,25,23,.1)}
html[data-scr="2"] .scr__live{padding:3px 8px 3px 6px;border-radius:99px;background:#ff4d3d;color:#fff}
html[data-scr="2"] .scr__live i{background:#fff;box-shadow:none}
html[data-scr="2"] .scr__time{color:var(--mute)}
html[data-scr="2"] .scr__eps{display:none}
html[data-scr="2"] .scr__head{padding:7px 12px;border-bottom:1px solid rgba(28,25,23,.08)}
html[data-scr="2"] .scr__no small{color:var(--mute)}
html[data-scr="2"] .scr__log{padding:10px 12px 18px;font-family:var(--ff-sans);font-size:12px;line-height:1.6}
html[data-scr="2"] .sl + .sl{margin-top:4px}
html[data-scr="2"] .sl--cmd{width:fit-content;max-width:100%;margin-top:8px;padding:3px 9px;border-radius:6px;background:var(--ink);color:#fff;font-family:var(--ff-mono);font-size:11px}
html[data-scr="2"] .sl--cmd:first-child{margin-top:0}
html[data-scr="2"] .sl--out{padding-left:0;color:var(--mute)}
html[data-scr="2"] .sl--ok{padding-left:0;color:var(--green);font-weight:700}
html[data-scr="2"] .sl--hl{padding:6px 10px;border-left:3px solid var(--or2);background:#fff4ea;color:var(--or2)}
html[data-scr="2"] .sl--hl::before{content:none}
html[data-scr="2"] .sl--me,html[data-scr="2"] .sl--you{display:flex;flex-direction:column;align-items:flex-start;gap:2px;max-width:88%;margin-top:8px}
html[data-scr="2"] .sl--you{margin-left:auto;align-items:flex-end}
html[data-scr="2"] .sl__who{margin:0;padding:0;background:none!important;color:var(--mute);font-size:9.5px}
html[data-scr="2"] .sl--me .sl__txt{padding:6px 11px;border-radius:4px 14px 14px 14px;background:var(--panel);border:1.5px solid rgba(28,25,23,.12);color:var(--ink)}
html[data-scr="2"] .sl--you .sl__txt{padding:6px 11px;border-radius:14px 4px 14px 14px;background:var(--or);color:#fff}
html[data-scr="2"] .sl.is-typing .sl__txt::after{background:currentColor}
html[data-scr="2"] .sl--bar{padding-left:0;color:var(--mute)}
html[data-scr="2"] .sl__meter{background:rgba(28,25,23,.1)}
html[data-scr="2"] .sl__pct{color:var(--ink)}
html[data-scr="2"] .sl--num{padding-left:0;color:var(--mute)}
html[data-scr="2"] .sl--num b{color:var(--or2)}
html[data-scr="2"] .scr__next{background:var(--ink);border-color:var(--ink)}
html[data-scr="2"] .scr__pause{background:rgba(28,25,23,.78)}
/* 話数リスト（イラストの左） */
.hero__epsttl{margin-bottom:4px;font-size:11px;font-weight:700;color:var(--mute);letter-spacing:.04em}
.hero__epsttl b{color:var(--or2);font-size:1.15em}
.hero__eps ol{list-style:none;margin:0;padding:0;display:grid;gap:0}
.hero__eps button{display:flex;align-items:center;gap:8px;width:100%;padding:1.5px 0;border:0;background:none;font:inherit;font-size:clamp(11.5px,2.9cqi,13px);line-height:1.45;font-weight:700;color:#8f8a83;text-align:left;cursor:pointer;transition:color .3s}
.hero__eps button b{flex:none;display:grid;place-items:center;width:23px;height:17px;border-radius:4px;border:1.5px solid currentColor;font-family:var(--ff-mono);font-size:10px;transition:background .3s,color .3s,border-color .3s}
.hero__eps button span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero__eps .is-done button{color:var(--ink)}
.hero__eps .is-done button b{background:var(--ink);border-color:var(--ink);color:#fff}
.hero__eps .is-now button{color:var(--ink)}
.hero__eps .is-now button b{background:var(--grad);border-color:var(--or2);color:#fff}
.hero__eps .is-now button span{background:linear-gradient(transparent 62%,rgba(251,134,25,.35) 62%)}


/* =========================================================
   ヘッダー下のキーワード帯：パタパタ案内板
   空港の発車標のように1文字ずつめくれて、学べることが切り替わる
   ========================================================= */
.kw{position:relative;padding:12px 12px 12px;background:var(--base);border-bottom:1px solid #d3d1cc}
.kw__no{flex:none;font-family:var(--ff-mono);font-weight:700;font-size:10px;line-height:1.2;color:var(--mute);text-align:right;font-variant-numeric:tabular-nums}
.kw__no b{display:block;font-size:15px;color:var(--ink)}

.kw__v--1{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:12px;background:#151210;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 10px 22px -12px rgba(28,25,23,.7)}
.kw__lbl{flex:none;font-family:var(--ff-mono);font-weight:700;font-size:9.5px;line-height:1.35;letter-spacing:.08em;color:var(--or)}
.kw__lbl i{display:block;font-style:normal;color:#8f8a83}
.kw__flaps{flex:1;display:grid;grid-template-columns:repeat(7,1fr);gap:3px;min-width:0}
.flap{position:relative;display:grid;place-items:center;height:clamp(32px,9.6cqi,44px);border-radius:4px;background:linear-gradient(#2e2925 0 50%,#26221f 50% 100%);color:#f6f1e8;font-weight:900;font-size:clamp(16px,5.4cqi,24px);line-height:1;box-shadow:inset 0 -1px 0 rgba(0,0,0,.5),0 2px 0 #0b0908;overflow:hidden;perspective:120px}
.flap::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:#0b0908;box-shadow:0 1px 0 rgba(255,255,255,.05)}
.flap.is-on{color:var(--or)}
.flap.is-flip{animation:flapTurn .085s linear}
.kw__v--1 .kw__no{color:#8f8a83}
.kw__v--1 .kw__no b{color:#f6f1e8}
@keyframes flapTurn{0%{transform:none}50%{transform:rotateX(-70deg) scaleY(.6);filter:brightness(.55)}100%{transform:none}}


/* =========================================================
   セクションのつなぎ：会話でつなぐ（「Who is DAIMYOUJI?」の帯から変更）
   あなたの質問 → 大明司が入力中 → 返事 で、次の章へ話をつなぐ
   ========================================================= */
.bridge{position:relative}

.br{display:flex;flex-direction:column;gap:10px;padding:16px 14px;background:var(--panel);border-block:2px solid var(--ink)}
.bridge--alt .br{padding-top:54px;background:var(--ink)}   /* 上の黒い余白を「01〜05」の下（56px）とそろえる（枠2px＋54px） */
.bub{display:flex;align-items:flex-end;gap:8px;margin:0;transition:opacity .35s,transform .5s var(--pop)}
.bub--you{justify-content:flex-end}
.bub__av{flex:none;position:relative;width:42px;height:42px;border-radius:50%;overflow:hidden;border:2px solid var(--ink);background:#fff}
.bub__av img{position:absolute;left:50%;top:0;width:100%;height:auto;transform:translateX(-50%)}
.bub__av--me{background:#ffe2c4}
.bub__av--me img{width:172%;max-width:none;top:-13%;left:53%}
.bridge--alt .bub__av{border-color:var(--paper)}
.bub__txt{position:relative;max-width:76%;padding:9px 14px;border-radius:18px;border:2px solid var(--ink);font-weight:700;font-size:14.5px;line-height:1.5}
.bub--you .bub__txt{background:#fff;border-bottom-right-radius:5px}
.bub--me .bub__txt{background:var(--grad);color:#fff;border-bottom-left-radius:5px;font-weight:900}
.bridge--alt .bub__txt{border-color:var(--paper)}
.bub__dots{display:none;gap:4px;padding:5px 2px}
.bub__dots i{width:7px;height:7px;border-radius:50%;background:#fff;animation:brDot 1s ease-in-out infinite}
.bub__dots i:nth-child(2){animation-delay:.15s}
.bub__dots i:nth-child(3){animation-delay:.3s}
@keyframes brDot{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-5px);opacity:1}}
html.js .br .bub{opacity:0;transform:translateY(12px) scale(.92)}
html.js .br.is-in .bub--you,html.js .br.is-typing .bub--me{opacity:1;transform:none}
html.js .br.is-typing:not(.is-said) .bub__dots{display:flex}
html.js .br:not(.is-said) .bub__say{display:none}
.br.is-said .bub__say{animation:brSay .45s var(--pop) both}
@keyframes brSay{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}


/* =========================================================
   大明司一利の6つの顔：ガチャ（4枚のスライドパネルから変更）
   回すとカプセルが転がり出て、割れるとSSRカード。下のコレクションを6つそろえる
   ========================================================= */
.fcs{margin-top:34px;padding-inline:14px;text-align:left}
@keyframes fcSpin{to{transform:rotate(360deg)}}

.gacha{--w:min(158px,38cqi);display:grid;grid-template-columns:var(--w) 1fr;gap:14px;align-items:stretch}
.gacha__machine{position:relative;height:calc(var(--w) * 1.78);z-index:2}
.gacha__dome{position:absolute;left:calc(var(--w) * .04);top:0;width:calc(var(--w) * .92);height:calc(var(--w) * .92);border:3px solid var(--ink);border-radius:50%;overflow:hidden;z-index:2;background:radial-gradient(circle at 30% 26%,rgba(255,255,255,.95) 0 7%,rgba(255,255,255,.4) 16%,rgba(214,232,244,.55) 58%,rgba(170,198,220,.8) 100%)}
.gacha__cap{position:absolute;width:30%;height:30%;margin:-15% 0 0 -15%;border-radius:50%;border:2px solid var(--ink);background:linear-gradient(#fff 0 50%,var(--c) 50% 100%);box-shadow:inset -3px -4px 0 rgba(0,0,0,.12)}
.gacha.is-spin .gacha__dome .gacha__cap{animation:capShake .14s ease-in-out var(--d) 5 alternate}
@keyframes capShake{to{transform:translate(5px,-9px) rotate(28deg)}}
.gacha__body{position:absolute;left:0;top:calc(var(--w) * .74);width:var(--w);height:calc(var(--w) * 1.04);border:3px solid var(--ink);border-radius:18px 18px 12px 12px;background:var(--grad);box-shadow:inset 0 -8px 0 rgba(0,0,0,.12)}
.gacha__logo{position:absolute;left:0;right:0;top:calc(var(--w) * .2);text-align:center;font-family:var(--ff-en);font-style:italic;font-weight:900;font-size:calc(var(--w) * .075);letter-spacing:.06em;line-height:1.05;color:#fff}
.gacha__logo b{display:block;font-size:calc(var(--w) * .14)}
.gacha__knob{position:absolute;left:50%;top:calc(var(--w) * .5);width:calc(var(--w) * .3);height:calc(var(--w) * .3);margin-left:calc(var(--w) * -.15);border:3px solid var(--ink);border-radius:50%;background:var(--paper);display:grid;place-items:center}
.gacha__knob i{width:72%;height:20%;border-radius:4px;background:var(--ink)}
.gacha.is-spin .gacha__knob i{animation:fcSpin .6s cubic-bezier(.5,0,.3,1)}
.gacha__chute{position:absolute;left:50%;bottom:calc(var(--w) * .07);width:calc(var(--w) * .38);height:calc(var(--w) * .18);margin-left:calc(var(--w) * -.19);border-radius:10px 10px 4px 4px;background:#1c1917;box-shadow:inset 0 4px 0 rgba(255,255,255,.08)}
.gacha__out{position:absolute;left:50%;top:calc(var(--w) * 1.42);width:calc(var(--w) * .26);height:calc(var(--w) * .26);margin-left:calc(var(--w) * -.13);opacity:0;z-index:4;pointer-events:none}
.gacha__out b{position:absolute;left:0;right:0;height:50%;border:2px solid var(--ink);transition:transform .35s cubic-bezier(.2,.9,.3,1),opacity .35s}
.gacha__out b:first-child{top:0;border-radius:999px 999px 0 0;border-bottom-width:1px;background:#fff}
.gacha__out b:last-child{bottom:0;border-radius:0 0 999px 999px;border-top-width:1px;background:var(--c)}
.gacha.is-drop .gacha__out{animation:capOut 1s cubic-bezier(.3,.7,.4,1) forwards}
@keyframes capOut{0%{opacity:1;transform:translateY(-14px) scale(.4)}30%{transform:translateY(calc(var(--w) * .1)) scale(1)}45%{transform:translateY(calc(var(--w) * .02))}60%{transform:translateY(calc(var(--w) * .1))}100%{opacity:1;transform:translate(calc(var(--w) * .95),calc(var(--w) * -.55)) rotate(540deg) scale(1.15)}}
.gacha.is-open .gacha__out b:first-child{transform:translate(-14px,-30px) rotate(-40deg);opacity:0}
.gacha.is-open .gacha__out b:last-child{transform:translate(14px,26px) rotate(35deg);opacity:0}
.gacha__card{position:relative;min-height:calc(var(--w) * 1.78);border:3px solid var(--ink);border-radius:16px;overflow:hidden;background:var(--panel);perspective:700px}
.gacha__empty{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:6px;text-align:center;font-weight:700;font-size:12px;line-height:1.6;color:var(--mute)}
.gacha__empty b{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;border:3px dashed #c9c6c1;font-family:var(--ff-en);font-weight:900;font-size:30px;color:#c9c6c1}
.gacha__res{position:absolute;inset:0;overflow:hidden;background-color:var(--c);background-image:linear-gradient(170deg,rgba(255,255,255,.25),rgba(0,0,0,.25));color:#fff}
.gacha__res[hidden],.gacha__empty[hidden]{display:none}
.gacha__res.is-new{animation:resIn .7s cubic-bezier(.2,1.4,.4,1)}
@keyframes resIn{0%{transform:rotateY(90deg) scale(.6);filter:brightness(2.4)}60%{filter:brightness(1.4)}100%{transform:none;filter:none}}
.gacha__rays{position:absolute;left:50%;top:44%;width:240%;aspect-ratio:1;margin-left:-120%;translate:0 -50%;background:repeating-conic-gradient(rgba(255,255,255,.2) 0 7deg,transparent 7deg 20deg);animation:fcSpin 16s linear infinite}
.gacha__rare{position:absolute;left:10px;top:8px;font-family:var(--ff-en);font-style:italic;font-weight:900;font-size:22px;letter-spacing:.02em;background:linear-gradient(90deg,#fff36b,#ffb347,#ff7ad9,#7af7ff,#fff36b);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:1px rgba(0,0,0,.35);animation:sheen 2.4s linear infinite;z-index:2}
.gacha__en{position:absolute;right:10px;top:14px;font-family:var(--ff-en);font-style:italic;font-weight:900;font-size:9.5px;letter-spacing:.12em;opacity:.9;z-index:2}
.gacha__img{position:absolute;left:50%;bottom:58px;height:60%;width:auto;max-width:none;transform:translateX(-50%);filter:drop-shadow(0 0 1px #fff) drop-shadow(0 6px 0 rgba(0,0,0,.25))}
.gacha__res.is-sq .gacha__img{height:50%}
.gacha__prop{position:absolute;left:4%;bottom:64px;width:34%;filter:drop-shadow(0 4px 6px rgba(0,0,0,.35));animation:bob 2.4s ease-in-out infinite}
.gacha__prop--1{left:auto;right:2%;width:26%;animation-delay:.5s}
.gacha__jp{position:absolute;left:10px;right:8px;bottom:26px;font-weight:900;font-size:clamp(15px,4.4cqi,20px);line-height:1.25;text-shadow:2px 2px 0 rgba(0,0,0,.3);z-index:2}
.gacha__line{position:absolute;left:10px;right:8px;bottom:9px;font-weight:700;font-size:11px;line-height:1.3;opacity:.95;z-index:2}
.gacha__btn{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;margin-top:14px;padding:12px 18px;border:3px solid var(--ink);border-radius:999px;background:var(--ink);color:#fff;font:inherit;font-weight:900;font-size:16px;cursor:pointer;box-shadow:0 5px 0 var(--or2);transition:transform .1s,box-shadow .1s}
.gacha__btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--or2)}
.gacha__btn small{font-family:var(--ff-mono);font-weight:700;font-size:11px;color:#bdb8b2}
.gacha__btn small b{color:var(--or);font-size:15px}
.fc.is-done .gacha__btn{background:var(--grad)}
.fc.is-done .gacha__btn small{color:#fff}
.fc.is-done .gacha__btn small b{color:#fff}
.gacha__col{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:12px}
.gacha__slot{position:relative;height:60px;padding:0;border:2px solid var(--ink);border-radius:10px;background:var(--panel);overflow:hidden;cursor:pointer;font:inherit;-webkit-tap-highlight-color:transparent}
.gacha__slot img{position:absolute;right:-4%;top:6%;width:58%;max-width:none;filter:brightness(0);opacity:.16;transition:.4s}
.gacha__slot.is-sq img{top:4%;width:56%}
.gacha__q{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-family:var(--ff-en);font-weight:900;font-size:22px;color:#bdb8b2}
.gacha__nm{position:absolute;left:7px;right:22%;bottom:6px;font-weight:900;font-size:10px;letter-spacing:-.02em;line-height:1.2;color:#fff;text-align:left;opacity:0;text-shadow:0 1px 2px rgba(0,0,0,.4)}
.gacha__slot.is-got{background:var(--c);animation:slotGot .5s var(--pop)}
.gacha__slot.is-got img{filter:none;opacity:1}
.gacha__slot.is-got .gacha__q{opacity:0}
.gacha__slot.is-got .gacha__nm{opacity:1}
@keyframes slotGot{0%{transform:scale(.7)}100%{transform:none}}


/* =========================================================
   5つの理由の見出し：LEVEL UP 風（「REASON 01」の大きな数字から変更）
   読むたびに数字が回り、「わかった！」がはじけてゲージがたまるゲーム画面
   「REASON」は「理由」と日本語で表記
   ========================================================= */
.rn{position:relative;max-width:400px;margin:0 auto}

.rn__v{position:relative;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:16px;padding:34px 16px 16px 18px;border:3px solid var(--ink);border-radius:18px;background-color:#14100e;background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 2px,transparent 2px 4px),radial-gradient(120% 120% at 0% 100%,rgba(251,74,25,.35),transparent 55%);color:#fff;text-align:left;overflow:hidden;box-shadow:0 8px 0 -2px var(--or2),0 18px 28px -14px rgba(0,0,0,.5)}
.lv__up{position:absolute;left:18px;top:10px;font-family:var(--ff-en);font-style:italic;font-weight:900;font-size:12.5px;letter-spacing:.14em;color:var(--lime);text-shadow:0 0 10px rgba(198,242,58,.7);opacity:0}
.rn.is-in .lv__up{animation:lvUp 1.6s .55s both}
@keyframes lvUp{0%{opacity:0;transform:translateY(8px) scale(.6)}20%{opacity:1;transform:scale(1.25)}35%{transform:scale(1)}55%{opacity:1}65%{opacity:.35}75%{opacity:1}85%{opacity:.35}100%{opacity:1}}
.lv__main{position:relative;display:flex;align-items:flex-end;line-height:.8}
.lv__lv{padding-bottom:7px;margin-right:2px;font-family:var(--ff-en);font-style:italic;font-weight:900;font-size:22px;color:var(--or)}
.lv__num{display:inline-block;height:78px;overflow:hidden;font-family:var(--ff-en);font-style:italic;font-weight:900;font-size:88px;line-height:78px;letter-spacing:-.04em}
.lv__num b{display:block;padding-right:.08em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;transition:transform .75s cubic-bezier(.3,1.6,.4,1) .35s}
.rn.is-in .lv__num b{transform:translateY(-100%)}
.lv__burst{position:absolute;left:62%;top:50%;width:6px;height:6px;margin:-3px;border-radius:50%;opacity:0;box-shadow:0 -34px 0 var(--lime),24px -24px 0 var(--or),34px 0 0 var(--lime),24px 24px 0 var(--or),0 34px 0 var(--lime),-24px 24px 0 var(--or),-34px 0 0 var(--lime),-24px -24px 0 var(--or);pointer-events:none}
.rn.is-in .lv__burst{animation:lvBurst .8s .75s ease-out both}
@keyframes lvBurst{0%{opacity:1;transform:scale(.2)}100%{opacity:0;transform:scale(1.7)}}
.lv__side{display:grid;gap:5px;min-width:0}
.lv__skill{display:flex;align-items:center;gap:8px;font-weight:900;font-size:clamp(18px,5.4cqi,24px);line-height:1.2;white-space:nowrap}
.lv__skill i{flex:none;padding:2px 6px;border-radius:4px;background:var(--lime);color:var(--ink);font-family:var(--ff-en);font-style:italic;font-weight:900;font-size:9.5px;letter-spacing:.08em}
.lv__en{font-family:var(--ff-en);font-style:italic;font-weight:800;font-size:11px;letter-spacing:.18em;color:#8f8a83}
.lv__xp{display:grid;grid-template-columns:repeat(5,1fr);gap:3px;margin-top:4px}
.lv__xp i{position:relative;height:10px;border-radius:2px;background:rgba(255,255,255,.12);overflow:hidden}
.lv__xp i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--or),var(--lime));transform:scaleX(0);transform-origin:0 50%}
.lv__xp i.is-done::after{transform:none}
.rn.is-in .lv__xp i.is-now::after{transform:none;transition:transform 1s cubic-bezier(.2,.9,.2,1) .45s;box-shadow:0 0 10px var(--lime)}
.lv__lv--jp{font-family:var(--ff-sans);font-style:normal;font-size:19px;letter-spacing:.02em}
.lv__up--jp{font-family:var(--ff-sans);font-style:normal;letter-spacing:.06em}
.lv__exp{font-family:var(--ff-mono);font-weight:700;font-size:10.5px;color:#8f8a83}
.lv__exp b{color:#fff}

@keyframes fcSpin{to{transform:rotate(360deg)}}


/* =========================================================
   「AIに、夢中に。」の大明司（寝そべった絵から変更）
   没頭：ノートPC・立ちのぼるコード・進み続ける時計
   ========================================================= */
.mc{position:absolute;inset:0}
.shout__stage .mc .char{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);z-index:5}
.shout__stage .mc .char img{animation:none}
.shout__stage .mc1__ch{width:min(250px,64%)}
.shout__stage .mc1__ch img{animation:mcType .42s ease-in-out infinite alternate}
@keyframes mcType{to{transform:translateY(-2px)}}
.mc1__glow{position:absolute;left:43%;top:54%;width:170px;height:130px;margin:-65px 0 0 -85px;border-radius:50%;background:radial-gradient(closest-side,rgba(140,200,255,.55),rgba(140,200,255,0));z-index:6;mix-blend-mode:screen;animation:mcGlow 1.8s ease-in-out infinite;pointer-events:none}
@keyframes mcGlow{50%{opacity:.55;transform:scale(.92)}}
.mc1__bits i{position:absolute;left:40%;top:50%;z-index:7;font-family:var(--ff-mono);font-style:normal;font-weight:700;font-size:13px;color:var(--lime);text-shadow:0 0 8px rgba(198,242,58,.6);opacity:0;animation:mcBit 3.2s linear infinite}
.mc1__bits i:nth-child(1){--dx:-60px;animation-delay:0s}
.mc1__bits i:nth-child(2){--dx:-20px;animation-delay:.4s;color:#fff}
.mc1__bits i:nth-child(3){--dx:30px;animation-delay:.8s}
.mc1__bits i:nth-child(4){--dx:-90px;animation-delay:1.2s;color:var(--or)}
.mc1__bits i:nth-child(5){--dx:10px;animation-delay:1.6s;color:#fff}
.mc1__bits i:nth-child(6){--dx:-40px;animation-delay:2s;color:var(--or)}
.mc1__bits i:nth-child(7){--dx:50px;animation-delay:2.4s}
.mc1__bits i:nth-child(8){--dx:-75px;animation-delay:2.8s;color:var(--yellow)}
@keyframes mcBit{0%{opacity:0;transform:translate(0,0) scale(.6)}12%{opacity:1}80%{opacity:.9}100%{opacity:0;transform:translate(var(--dx),-130px) scale(1.15)}}
.mc1__clock{position:absolute;left:2%;top:4%;z-index:7;display:grid;grid-template-columns:auto auto;align-items:center;column-gap:8px;padding:6px 11px 6px 6px;border-radius:12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);text-align:left;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.mc1__face{grid-row:span 2;position:relative;width:32px;height:32px;border-radius:50%;border:2px solid #fff}
.mc1__face i{position:absolute;left:50%;bottom:50%;width:2px;margin-left:-1px;border-radius:2px;background:#fff;transform-origin:50% 100%}
.mc1__h{height:8px;animation:fcSpin 12s linear infinite}
.mc1__m{height:12px;background:var(--or)!important;animation:fcSpin 1s linear infinite}
.mc1__clock b{font-family:var(--ff-mono);font-weight:700;font-size:15px;line-height:1.1;color:#fff;font-variant-numeric:tabular-nums}
.mc1__clock small{font-weight:700;font-size:9.5px;line-height:1.2;color:#bdb8b2}


/* =========================================================
   6つの実績：信頼パスポート（4枚のスライドパネルから変更）
   表紙がひらき、ハンコが6つのスタンプを押す。下の記録が順に確定
   ========================================================= */
.evs{margin-top:26px;padding-inline:16px}

.pp__book{position:relative;width:min(340px,100%);margin-inline:auto;perspective:1400px;transform:translateY(-25%);transition:transform .9s cubic-bezier(.3,.9,.3,1)}
.pp__book.is-open{transform:none}
.pp__top,.pp__bot,.pp__cover{aspect-ratio:340/228}
.pp__bot{position:relative;border-radius:0 0 10px 10px;background:#f2eee3;border:1px solid #cfc6ae;box-shadow:0 14px 26px rgba(28,25,23,.18);background-image:linear-gradient(to bottom,rgba(0,0,0,.12),transparent 14px),repeating-radial-gradient(circle at 50% 120%,rgba(18,127,134,.06) 0 1px,transparent 1px 7px)}
.pp__hd{display:flex;justify-content:space-between;margin:0;padding:12px 14px 0;font-family:var(--ff-mono);font-weight:700;font-size:9.5px;letter-spacing:.06em;color:#6d6656}
.pp__cnt b{font-size:12px;color:var(--ink)}
.pp__cover{position:absolute;left:0;right:0;bottom:0;transform-origin:50% 0;transform-style:preserve-3d;transition:transform 1.1s cubic-bezier(.5,.05,.2,1)}
.pp__book.is-open .pp__cover{transform:rotateX(-180deg)}
.pp__front,.pp__id{position:absolute;inset:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.pp__front{display:grid;place-content:center;justify-items:center;gap:2px;border-radius:0 0 10px 10px;background:radial-gradient(120% 100% at 30% 20%,#23385e,#122039 70%);box-shadow:inset 0 0 0 5px #122039,inset 0 0 0 6px #b8964b;color:#dcbc6c;text-align:center}
.pp__emb{display:grid;place-items:center;width:46px;height:46px;margin-bottom:8px;border:2px solid currentColor;border-radius:50%}
.pp__emb svg{width:22px;height:22px}
.pp__front b{font-family:var(--ff-serif);font-weight:900;font-size:22px;letter-spacing:.2em;line-height:1.3}
.pp__front small{font-family:var(--ff-en);font-weight:800;font-size:10.5px;letter-spacing:.32em}
.pp__lab{margin-top:10px;font-family:var(--ff-mono);font-size:9px;letter-spacing:.2em;opacity:.8}
.pp__id{transform:rotateX(180deg);overflow:hidden;padding:12px 14px 10px;border-radius:10px 10px 0 0;background:#f2eee3;border:1px solid #cfc6ae;background-image:linear-gradient(to top,rgba(0,0,0,.12),transparent 14px),repeating-linear-gradient(115deg,rgba(36,87,181,.05) 0 1px,transparent 1px 6px);text-align:left}
.pp__id::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,120,200,.22) 42%,rgba(120,220,255,.25) 50%,rgba(255,240,120,.22) 58%,transparent 70%) 0 0/300% 100%;mix-blend-mode:multiply;animation:ppHolo 4s linear infinite;pointer-events:none}
@keyframes ppHolo{from{background-position:120% 0}to{background-position:-120% 0}}
.pp__idh{display:flex;justify-content:space-between;margin:0;font-family:var(--ff-mono);font-weight:700;font-size:9px;letter-spacing:.05em;color:#6d6656}
.pp__idb{display:grid;grid-template-columns:30% 1fr;gap:12px;margin-top:8px}
.pp__photo{display:block;aspect-ratio:3/4;overflow:hidden;border:1px solid #8d8571;background:#e5dfcf}
.pp__photo img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;filter:saturate(.85)}
.pp__idb dl{margin:0;display:grid;gap:5px;align-content:start}
.pp__idb dt{font-family:var(--ff-mono);font-size:8px;letter-spacing:.04em;color:#8a826f;line-height:1.2}
.pp__idb dd{margin:0;font-weight:900;font-size:12.5px;line-height:1.35}
.pp__idb div:first-child dd{font-family:var(--ff-serif);font-size:19px;letter-spacing:.12em}
.pp__mrz{position:absolute;left:14px;right:14px;bottom:9px;margin:0;font-family:var(--ff-mono);font-weight:500;font-size:clamp(8.5px,2.7cqi,10.5px);line-height:1.35;letter-spacing:.06em;color:#3b372f;white-space:nowrap;overflow:hidden}
.st{position:absolute;left:var(--x);top:var(--y);display:grid;place-content:center;justify-items:center;padding:0;border:2.5px solid var(--c);background:none;color:var(--c);font-family:var(--ff-sans);line-height:1.1;text-align:center;cursor:pointer;opacity:0;transform:translate(-50%,-50%) rotate(var(--r));mix-blend-mode:multiply;-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='90' height='90'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.4 0 0 0 1.75'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='90' height='90'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.4 0 0 0 1.75'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.st small{font-family:var(--ff-en);font-weight:800;font-size:7.5px;letter-spacing:.14em}
.st b{font-family:var(--ff-en);font-weight:900;font-size:19px;line-height:1.05;letter-spacing:-.01em;margin:1px 0}
.st span{font-weight:900;font-size:8.5px}
.st--c,.st--x{width:80px;height:80px;border-radius:50%;box-shadow:inset 0 0 0 2px #f2eee3,inset 0 0 0 3.5px var(--c)}
.st--x{border-style:dashed}
.st--x b{font-family:var(--ff-sans);font-size:14px}
.st--r{width:94px;height:62px;border-radius:4px;border-width:3px}
.st--r b{font-size:24px}
.st--b{width:96px;height:58px;border-radius:12px}
.st--b b,.st--o b,.st--d b{font-family:var(--ff-sans);font-size:13.5px}
.st--o{width:98px;height:64px;border-radius:50%}
.st--d{width:92px;height:60px;border-radius:2px;box-shadow:inset 0 0 0 2px #f2eee3,inset 0 0 0 3.5px var(--c)}
.st.is-on{opacity:.9;animation:stHit .42s cubic-bezier(.3,1.5,.5,1) both}
@keyframes stHit{0%{opacity:0;transform:translate(-50%,-50%) rotate(var(--r)) scale(1.8);filter:blur(2px)}45%{opacity:1;filter:none}65%{transform:translate(-50%,-50%) rotate(var(--r)) scale(.94)}100%{opacity:.9;transform:translate(-50%,-50%) rotate(var(--r)) scale(1)}}
.st.is-hot{animation:stHot .6s ease}
@keyframes stHot{50%{transform:translate(-50%,-50%) rotate(var(--r)) scale(1.12)}}
.pp__bot.is-hit{animation:ppHit .22s ease}
@keyframes ppHit{30%{transform:translateY(2px)}60%{transform:translateY(-1px)}}
.pp__stamper{position:absolute;left:50%;top:60%;z-index:5;width:64px;height:84px;margin:-84px 0 0 -32px;pointer-events:none;opacity:0;transition:left .38s cubic-bezier(.4,0,.2,1),top .38s cubic-bezier(.4,0,.2,1),opacity .3s;filter:drop-shadow(0 10px 8px rgba(0,0,0,.25))}
.pp__stamper.is-show{opacity:1}
.pp__stamper i{position:absolute;left:50%;display:block}
.pp__knob{top:0;width:34px;height:34px;margin-left:-17px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#d9a066,#8a5328 70%)}
.pp__stem{top:28px;width:18px;height:34px;margin-left:-9px;background:linear-gradient(90deg,#7a4922,#c78a52 45%,#7a4922)}
.pp__base{top:60px;width:64px;height:24px;margin-left:-32px;border-radius:4px;background:linear-gradient(#a8703f,#6e4220);box-shadow:inset 0 -6px 0 var(--c,#c8281c)}
.pp__stamper > *{transform:translateY(-22px)}
.pp__stamper.is-press > *{animation:ppPress .5s cubic-bezier(.5,0,.3,1)}
@keyframes ppPress{0%{transform:translateY(-22px)}35%{transform:translateY(0) scaleY(.96)}55%{transform:translateY(0)}100%{transform:translateY(-22px)}}
.pp__ok{position:absolute;right:12px;top:8px;display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:99px;background:#1f8a4c;color:#fff;font-weight:900;font-size:10.5px;opacity:0;transform:scale(.4);transition:opacity .3s,transform .4s var(--pop)}
.pp__ok svg{width:10px;height:10px}
.pp.is-done .pp__ok{opacity:1;transform:none}
.pp.is-done .pp__cnt{visibility:hidden}
.pp__log{display:grid;gap:6px;margin:16px auto 0;padding:0;width:min(340px,100%);list-style:none;text-align:left}
.pp__log li{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:7px 8px 7px 7px;border:2px solid var(--ink);border-radius:10px;background:var(--paper);opacity:.32;transform:translateX(-6px);transition:opacity .4s,transform .4s,box-shadow .3s}
.pp__log li.is-on{opacity:1;transform:none}
.pp__log li.is-hot{box-shadow:0 0 0 3px var(--c)}
.pp__n{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--c);color:#fff;font-family:var(--ff-en);font-weight:900;font-size:12px}
.pp__log b{display:block;font-weight:900;font-size:13px;line-height:1.4}
.pp__log small{display:block;font-size:11px;line-height:1.45;color:var(--mute)}
.pp__go{display:inline-flex;align-items:center;gap:3px;font-weight:900;font-size:11.5px;color:var(--or2);text-decoration:none;white-space:nowrap}
.pp__go svg{width:9px;height:9px}
.pp__go--none{color:var(--mute)}
.pp__again{display:block;margin:12px auto 0;padding:4px 2px;border:0;border-bottom:2px solid currentColor;background:none;font-weight:900;font-size:13px;color:var(--or2);cursor:pointer;visibility:hidden}
.pp.is-done .pp__again{visibility:visible}

@media (prefers-reduced-motion:reduce){
  .st.is-on{animation:none!important}
  .pp__book,.pp__cover{transition:none}
}


/* =========================================================
   「楽しく。」と「この夢中を、一緒に。」の絵：「楽しい」がはじける（後ろで回る点線をやめた）
   冒頭：光の放射・振った手から学べることが浮かぶ／最後：吹き出しと紙吹雪
   ========================================================= */
.fz{position:absolute;inset:0;pointer-events:none}
.hero__stage .char > img{position:relative;z-index:1}
.finale__stage{z-index:0}
.finale__stage .team{z-index:1}

.hz1__glow,.hz1__rays{position:absolute;left:55%;top:36%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);z-index:0}
.hz1__glow{width:120%;background:radial-gradient(closest-side,rgba(251,134,25,.34),rgba(251,134,25,.12) 60%,transparent)}
.hz1__rays{width:150%;background:repeating-conic-gradient(rgba(251,134,25,.26) 0 4deg,transparent 4deg 13deg);-webkit-mask-image:radial-gradient(closest-side,transparent 26%,#000 44%,transparent 96%);mask-image:radial-gradient(closest-side,transparent 26%,#000 44%,transparent 96%);animation:hzRay 3s ease-in-out infinite}
@keyframes hzRay{50%{transform:translate(-50%,-50%) scale(1.07);opacity:.65}}
.hz1__chips i{position:absolute;left:22%;top:40%;z-index:2;display:inline-flex;align-items:center;gap:4px;padding:2px 8px 2px 6px;border:2px solid var(--ink);border-radius:99px;background:#fff;font-style:normal;font-weight:900;font-size:10.5px;line-height:1.5;white-space:nowrap;color:var(--ink);box-shadow:0 3px 0 rgba(28,25,23,.18);opacity:0;animation:hzChip 6s cubic-bezier(.2,.8,.3,1) infinite}
.hz1__chips i::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c)}
.hz1__chips i:nth-child(2){animation-delay:1.2s}
.hz1__chips i:nth-child(3){animation-delay:2.4s}
.hz1__chips i:nth-child(4){animation-delay:3.6s}
.hz1__chips i:nth-child(5){animation-delay:4.8s}
@keyframes hzChip{0%{opacity:0;transform:translate(-50%,0) scale(.3)}8%{opacity:1;transform:translate(-50%,-22px) scale(1.08)}14%{transform:translate(-50%,-26px) scale(1)}36%{opacity:1}50%{opacity:0;transform:translate(calc(-50% + var(--dx)),-72px) scale(.9)}100%{opacity:0}}
.hz1__sp{position:absolute;z-index:2;font-size:13px;line-height:1;color:var(--or);animation:hzTw 1.6s ease-in-out infinite}
.hz1__sp--1{left:13%;top:33%}
.hz1__sp--2{left:31%;top:31%;font-size:9px;color:var(--yellow);animation-delay:.5s}
.hz1__sp--3{left:11%;top:46%;font-size:10px;animation-delay:1s}
@keyframes hzTw{0%,100%{opacity:0;transform:scale(.4) rotate(0)}50%{opacity:1;transform:scale(1) rotate(45deg)}}

.fn1__rays{position:absolute;left:50%;top:40%;width:380px;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(251,134,25,.22),transparent 70%),repeating-conic-gradient(rgba(251,134,25,.2) 0 4deg,transparent 4deg 12deg);-webkit-mask-image:radial-gradient(closest-side,#000 30%,transparent 95%);mask-image:radial-gradient(closest-side,#000 30%,transparent 95%);animation:hzRay 3.4s ease-in-out infinite}
.fn1__conf i{position:absolute;top:-6%;width:7px;height:11px;border-radius:2px;background:var(--or);opacity:0;animation:fnFall 4.2s linear infinite}
.fn1__conf i:nth-child(3n+1){background:var(--lime)}
.fn1__conf i:nth-child(3n+2){background:var(--yellow);width:6px;height:6px;border-radius:50%}
.fn1__conf i:nth-child(4n){background:#2457b5}
.fn1__conf i:nth-child(1){left:6%;animation-delay:0s}
.fn1__conf i:nth-child(2){left:14%;animation-delay:1.6s}
.fn1__conf i:nth-child(3){left:22%;animation-delay:.7s}
.fn1__conf i:nth-child(4){left:30%;animation-delay:2.5s}
.fn1__conf i:nth-child(5){left:38%;animation-delay:1.1s}
.fn1__conf i:nth-child(6){left:46%;animation-delay:3.2s}
.fn1__conf i:nth-child(7){left:54%;animation-delay:.3s}
.fn1__conf i:nth-child(8){left:62%;animation-delay:2s}
.fn1__conf i:nth-child(9){left:70%;animation-delay:3.7s}
.fn1__conf i:nth-child(10){left:78%;animation-delay:1.3s}
.fn1__conf i:nth-child(11){left:86%;animation-delay:2.8s}
.fn1__conf i:nth-child(12){left:94%;animation-delay:.9s}
.fn1__conf i:nth-child(13){left:10%;animation-delay:3.5s}
.fn1__conf i:nth-child(14){left:90%;animation-delay:2.2s}
@keyframes fnFall{0%{opacity:0;transform:translateY(0) rotate(0)}8%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translateY(300px) translateX(18px) rotate(540deg)}}
.fn1__bub{position:absolute;z-index:3;padding:5px 12px;border:2px solid var(--ink);border-radius:16px;background:#fff;font-weight:900;font-size:13px;line-height:1.3;white-space:nowrap;color:var(--ink);box-shadow:0 4px 0 rgba(28,25,23,.2);opacity:0;animation:fnBub 7.5s cubic-bezier(.2,1.6,.4,1) infinite}
.fn1__bub::after{content:"";position:absolute;bottom:-7px;left:50%;width:10px;height:10px;margin-left:-5px;background:inherit;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg)}
.fn1__bub--1{left:1%;top:57%}
.fn1__bub--2{left:17%;top:48%;animation-delay:1.5s}
.fn1__bub--3{left:62%;top:2%;background:var(--grad);color:#fff;font-size:15px;animation-delay:3s}
.fn1__bub--3::after{left:22%;background:#fb7a19}
.fn1__bub--4{right:17%;top:48%;animation-delay:4.5s}
.fn1__bub--5{right:1%;top:57%;animation-delay:6s}
@keyframes fnBub{0%{opacity:0;transform:scale(.3) translateY(10px)}4%{opacity:1;transform:none}17%{opacity:1;transform:none}20%{opacity:0;transform:translateY(-10px)}100%{opacity:0}}

@media (prefers-reduced-motion:reduce){
  .hz1__chips i,.fn1__bub{animation:none;opacity:1}
  .hz1__chips i:not(:first-child),.fn1__bub:not(.fn1__bub--3),.fn1__conf{display:none}
  .hz1__chips i{transform:translate(-50%,-30px)}
}


/* =========================================================
   理由5「そこから得た気づき」の下の絵：手順 → 気づき（灰色の紙の絵から変更）
   3つの手順に順にチェック → 線がのびて電球が灯り、「気づき」のカードが出る
   ========================================================= */
.n5{position:absolute;inset:0}
.n5 .sq{opacity:0;transform:translateY(6px);transition:opacity .35s,transform .45s var(--pop)}
.n5 .sq.is-on{opacity:1;transform:none}
.koma--notes .n5__ch{left:-22px;bottom:-14px;width:150px}

.n5st{position:absolute;left:120px;right:10px;top:36px;bottom:10px;z-index:3;text-align:left}
.n5st ol{margin:0;padding:0;list-style:none;display:grid;gap:5px}
.n5st li{display:flex;align-items:center;gap:7px;padding:3px 8px 3px 4px;border:2px solid var(--ink);border-radius:9px;background:#fff;font-weight:900;font-size:11.5px;line-height:1.3}
.n5st li b{display:grid;place-items:center;flex:none;width:20px;height:20px;border-radius:6px;background:var(--ink);color:#fff;font-family:var(--ff-en);font-size:11px}
.n5st li i{display:grid;place-items:center;width:16px;height:16px;margin-left:auto;border-radius:50%;background:var(--green);color:#fff;transform:scale(0);transition:transform .35s var(--pop) .35s}
.n5st li.is-on i{transform:none}
.n5st li i svg{width:9px;height:9px}
.n5st__line{display:block;width:3px;height:9px;margin:3px 0 3px 14px;background:repeating-linear-gradient(var(--or) 0 3px,transparent 3px 6px);transform-origin:50% 0}
.n5st__line.sq{transform:scaleY(0)}
.n5st__line.sq.is-on{transform:none}
.n5st__aha{display:flex;align-items:center;gap:8px;padding:4px 8px 5px 5px;border:2px solid var(--ink);border-radius:11px;background:var(--lime);font-weight:900;font-size:12px;line-height:1.35;box-shadow:0 4px 0 var(--ink)}
.n5st__aha.sq{transform:scale(.6)}
.n5st__aha.sq.is-on{transform:none}
.n5st__aha small{display:block;font-family:var(--ff-mono);font-weight:700;font-size:9.5px;color:#3d4a12}
.n5st__bulb{position:relative;display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;background:#fff;border:2px solid var(--ink);color:#c9c4bb;transition:color .3s .3s,box-shadow .4s .3s}
.n5st__bulb svg{width:22px;height:22px}
.n5st__aha.is-on .n5st__bulb{color:var(--yellow);box-shadow:0 0 0 4px rgba(245,192,58,.35),0 0 18px 6px rgba(245,192,58,.55);animation:n5Bulb 1.4s ease-in-out 1s infinite}
@keyframes n5Bulb{50%{box-shadow:0 0 0 6px rgba(245,192,58,.25),0 0 26px 10px rgba(245,192,58,.35)}}

@media (prefers-reduced-motion:reduce){
  .n5 .sq{opacity:1;transform:none;transition:none}
  .n5st li i{transform:none}
}

/* =========================================================
   理由01「画面共有」：声でやり取りしている音声波形
   「● オンライン」と大明司一利の間。大明司（オレンジ）とあなた（青）が交互に話す
   ========================================================= */
.voice{position:absolute;right:8px;top:52px;z-index:4;width:min(118px,calc(36% - 30px));height:30px}
.voice__line{position:absolute;inset:0;display:flex;align-items:center;gap:4px;padding:0 6px;border:2px solid var(--ink);border-radius:99px;background:#fff;box-shadow:0 3px 0 var(--ink);animation:voiceTurn 5.2s steps(1) infinite}
.voice__line--you{animation-delay:-2.6s}
.voice__line b{flex:none;font-size:9.5px;font-weight:900;line-height:1;color:var(--c)}
.voice__line--me{--c:var(--or2)}
.voice__line--you{--c:#2457b5}
.voice__wave{flex:1;min-width:0;display:flex;align-items:center;gap:2px;height:100%}
.voice__wave i{flex:1;max-width:4px;height:22%;border-radius:2px;background:var(--c);animation:voiceBar .8s ease-in-out infinite}
.voice__wave i:nth-child(3n+1){animation-duration:.62s}
.voice__wave i:nth-child(3n+2){animation-duration:.94s;animation-delay:-.3s}
.voice__wave i:nth-child(4n){animation-duration:.7s;animation-delay:-.5s}
.voice__wave i:nth-child(5n){animation-duration:1.06s;animation-delay:-.2s}
@keyframes voiceBar{0%,100%{height:22%}50%{height:86%}}
@keyframes voiceTurn{0%{opacity:1;visibility:visible}50%{opacity:0;visibility:hidden}}
@media (prefers-reduced-motion:reduce){.voice__wave i{animation:none;height:55%}.voice__line--you{display:none}.voice__line--me{animation:none}}