/* 拡張機能の頁の見た目（2026-10-04にファイルへ出した）。
 *
 * ★ もとは頁の中に直に書いてあった（413行＋443行）。
 *   拡張ごとに頁を分けたので、同じものが9回ぶん増えてしまう。
 *   **置き場所はここ1つ**にして、直すのも1か所で済むようにした。
 */

/* =========================================================
   前回は静かすぎた。名前が「もりあげ」なので、
   声が増える・速くなる・熱が上がる、を画面で起こす。

   ・絵文字は使わない。勢いは、速さ・量・色で出す。
   ・声は「たくさん来ている」ことが分かる量で流す。
   ・熱は色で示す。緑（平常）から橙（盛り上がり）へ寄せる。
   ・ただし読ませる場所では止める。うるさいだけにはしない。
   ========================================================= */

:root{
  /* ロゴに合わせた黒基調。地はロゴの外周、面はロゴの円の中。 */
  --ink:#0f1116;          /* 地 */
  --panel:#171a21;        /* 面（カードなど） */
  --panel-2:#1e222b;
  --paper:#eef2f0;        /* 文字色。名前は据え置き */
  --text:#eef2f0;
  --mint:#9fe1cb;
  --mint-deep:#9fe1cb;    /* 黒地なのでロゴの色をそのまま使える */
  --star:#ffbe7a;
  --star-deep:#ffbe7a;
  --accent:var(--mint);
  --hot:var(--star);
  --sub:#98a29e;
  --line:rgba(159,225,203,.16);
  --line-2:rgba(255,255,255,.07);

  --serif:"Hiragino Mincho ProN","Yu Mincho","YuMincho",serif;
  --sans:"Hiragino Kaku Gothic ProN","Yu Gothic","YuGothic",system-ui,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --pop:cubic-bezier(.34,1.56,.44,1);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html{background:var(--ink);}
body{margin:0;background:transparent;color:var(--text);font-family:var(--sans);
  font-size:16px;line-height:1.9;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
a{color:inherit;}

.heat{position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:60;
  display:flex;flex-direction:column;align-items:center;gap:10px;}
.heat .tube{width:3px;height:180px;background:var(--line);border-radius:2px;overflow:hidden;position:relative;}
.heat .tube i{position:absolute;left:0;bottom:0;width:100%;height:0%;
  background:linear-gradient(180deg,var(--hot) 0%,var(--hot-2) 45%,var(--accent) 100%);}
.heat .v{font-family:var(--serif);font-size:13px;font-variant-numeric:tabular-nums;}
.heat .l{font-size:9px;letter-spacing:.24em;color:var(--sub);writing-mode:vertical-rl;}

.chapter{position:fixed;left:24px;top:50%;transform:translateY(-50%);z-index:50;
  font-family:var(--serif);font-size:12px;letter-spacing:.22em;color:var(--sub);
  writing-mode:vertical-rl;display:flex;align-items:center;gap:12px;
  opacity:0;transition:opacity .5s var(--ease);}
.chapter .num{font-size:15px;color:var(--ink);}
.chapter::after{content:"";width:1px;height:56px;background:var(--line);}

.head{position:fixed;left:0;right:0;top:0;z-index:55;display:flex;align-items:center;
  justify-content:space-between;padding:20px 28px;mix-blend-mode:difference;color:#fff;}
.head .brand{display:flex;align-items:center;gap:9px;font-family:var(--serif);
  font-size:15px;letter-spacing:.16em;text-decoration:none;}
.head .brand img{width:24px;height:24px;border-radius:50%;display:block;mix-blend-mode:normal;}
.head nav{display:flex;gap:24px;font-size:12px;letter-spacing:.14em;}
.head a{text-decoration:none;opacity:.85;}
.head a:hover{opacity:1;}

/* ---- ヒーロー ---- */
.hero{position:relative;height:100svh;min-height:620px;overflow:hidden;background:var(--ink);color:#f5f3ee;}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;}
.hero .inner{position:relative;z-index:3;height:100%;display:flex;flex-direction:column;
  justify-content:center;padding:0 clamp(24px,7vw,120px);pointer-events:none;}
.hero .appicon{width:72px;height:72px;border-radius:18px;display:block;margin:0 0 26px;
  opacity:0;transform:scale(.8) rotate(-6deg);box-shadow:0 10px 34px rgba(0,0,0,.4);}
.hero h1{font-family:var(--serif);font-weight:400;margin:0;
  font-size:clamp(40px,8.2vw,116px);line-height:1.2;}
.hero h1 .l{display:block;}
.hero h1 .c{display:inline-block;transform:translateY(64px) scale(.86);opacity:0;}
.hero h1 em{font-style:normal;color:var(--hot-2);}
.hero .lead{margin:30px 0 0;max-width:33em;font-size:clamp(13px,1.1vw,16px);
  line-height:2.05;color:rgba(245,243,238,.74);opacity:0;transform:translateY(14px);}
.hero .scroll{position:absolute;left:clamp(24px,7vw,120px);bottom:34px;z-index:3;
  font-size:11px;letter-spacing:.28em;color:rgba(245,243,238,.5);display:flex;align-items:center;gap:12px;opacity:0;}
.hero .scroll::after{content:"";width:48px;height:1px;background:currentColor;
  transform-origin:left;animation:pull 2.2s var(--ease) infinite;}
@keyframes pull{0%{transform:scaleX(0);}50%{transform:scaleX(1);}100%{transform:scaleX(0);transform-origin:right;}}

.ticker{position:absolute;left:0;right:0;z-index:2;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);}
.ticker.t1{top:15%;} .ticker.t2{top:79%;}
.ticker .run{display:flex;gap:14px;width:max-content;will-change:transform;}
.ticker .cm{font-size:13px;padding:6px 14px;border-radius:999px;white-space:nowrap;
  background:rgba(245,243,238,.07);border:1px solid rgba(245,243,238,.12);color:rgba(245,243,238,.62);}
.ticker .cm.hot{background:rgba(255,190,122,.18);border-color:rgba(255,190,122,.5);color:#ffdfc0;}

/* ---- 章 ---- */
.act{position:relative;padding:clamp(80px,12vh,170px) clamp(24px,7vw,120px);}
.act + .act{border-top:1px solid var(--line);}
.act .no{font-family:var(--serif);font-size:12px;letter-spacing:.3em;color:var(--sub);
  display:flex;align-items:center;gap:14px;margin-bottom:22px;}
.act .no::after{content:"";width:40px;height:1px;background:var(--line);}
.act h2{font-family:var(--serif);font-weight:400;margin:0 0 26px;
  font-size:clamp(28px,4.6vw,62px);line-height:1.42;}
.act p.body{max-width:30em;color:#b9c2be;font-size:clamp(13px,1.05vw,15px);line-height:2.1;margin:0;}

.rise{overflow:hidden;}
.rise > *{transform:translateY(104%);transition:transform .85s var(--ease);}
.on .rise > *{transform:none;}
.fade{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--pop);}
.on .fade{opacity:1;transform:none;}
.on .d1{transition-delay:.06s;} .on .d2{transition-delay:.12s;} .on .d3{transition-delay:.18s;}

.figures{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,4vw,56px);margin-top:56px;}
.figures div{border-top:2px solid var(--mint);padding-top:18px;}
.figures .n{font-family:var(--serif);font-size:clamp(38px,6.2vw,86px);line-height:1;
  font-variant-numeric:tabular-nums;}
.figures .n small{font-size:.32em;margin-left:.28em;letter-spacing:.08em;}
.figures .t{font-size:11.5px;letter-spacing:.14em;color:var(--sub);margin-top:10px;}

/* ---- 固定章 ---- */
.pin{position:relative;height:330vh;}
.pin .stage{position:sticky;top:0;height:100svh;display:flex;align-items:center;overflow:hidden;}
.pin .col{width:100%;padding:0 clamp(24px,7vw,120px);display:grid;
  grid-template-columns:1fr 1fr;gap:clamp(28px,6vw,86px);align-items:center;}
.pin .steps{position:relative;min-height:250px;}
.pin .step{position:absolute;inset:0;opacity:0;transform:translateY(26px) scale(.97);
  transition:opacity .45s var(--ease),transform .5s var(--pop);}
.pin .step.on{opacity:1;transform:none;}
.pin .step h3{font-family:var(--serif);font-weight:400;font-size:clamp(22px,3vw,40px);margin:0 0 14px;}
.pin .step p{margin:0;max-width:25em;color:#b9c2be;font-size:14px;line-height:2.05;}
.pin .idx{display:flex;gap:8px;margin-bottom:24px;}
.pin .idx i{width:30px;height:3px;background:var(--line);transition:background .3s,transform .3s var(--pop);}
.pin .idx i.on{background:var(--hot);transform:scaleY(1.6);}
.pin .fig{aspect-ratio:1/1;position:relative;}
.pin .fig canvas{width:100%;height:100%;}

/* ---- 機能の帯 ---- */
.rail{overflow:hidden;padding:clamp(64px,9vh,120px) 0;border-top:1px solid var(--line);}
.rail h2{font-family:var(--serif);font-weight:400;font-size:clamp(25px,3.6vw,48px);
  margin:0 0 34px;padding:0 clamp(24px,7vw,120px);}
.rail .track{display:flex;gap:18px;padding:0 clamp(24px,7vw,120px);will-change:transform;}
.rail .card{flex:0 0 clamp(230px,25vw,320px);border:1px solid var(--line);
  padding:26px 24px 28px;background:var(--panel);transition:transform .4s var(--pop),border-color .4s;}
.rail .card:hover{transform:translateY(-6px);border-color:var(--hot);}
.rail .card .k{font-family:var(--serif);font-size:11px;letter-spacing:.24em;color:var(--hot);}
.rail .card h3{font-family:var(--serif);font-weight:400;font-size:19px;margin:12px 0 10px;}
.rail .card p{margin:0;font-size:13px;line-height:2;color:#b9c2be;}

/* ---- 締め ---- */
.end{position:relative;background:var(--ink);color:#f5f3ee;overflow:hidden;
  padding:clamp(100px,16vh,200px) clamp(24px,7vw,120px);}
.end canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.55;}
.end .z{position:relative;z-index:2;}
.end h2{font-family:var(--serif);font-weight:400;font-size:clamp(32px,5.8vw,80px);line-height:1.4;margin:0 0 38px;}
.end h2 em{font-style:normal;color:var(--hot-2);}
.end .go{display:inline-flex;align-items:center;gap:14px;padding:18px 36px;border-radius:999px;
  background:var(--star);color:#3a2408;text-decoration:none;font-size:14px;letter-spacing:.1em;font-weight:700;
  transition:transform .35s var(--pop),box-shadow .35s;}
.end .go:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 14px 40px rgba(255,190,122,.4);}
.end .go i{width:24px;height:2px;background:currentColor;transition:width .35s var(--pop);}
.end .go:hover i{width:40px;}
.end .back{margin-top:26px;}
.end .back a{font-size:12.5px;letter-spacing:.1em;color:rgba(245,243,238,.6);text-decoration:none;}
.end .back a:hover{color:#f5f3ee;}
.foot{padding:34px clamp(24px,7vw,120px);font-size:11.5px;letter-spacing:.1em;color:var(--sub);
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;}

@media(max-width:820px){
  .chapter,.heat{display:none;}
  .pin{height:auto;} .pin .stage{position:static;height:auto;padding:60px 0;}
  .pin .col{grid-template-columns:1fr;}
  .pin .steps{min-height:0;}
  .pin .step{position:static;opacity:1;transform:none;margin-bottom:40px;}
  .figures{grid-template-columns:1fr;}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .rise > *,.fade,.hero h1 .c{transform:none!important;opacity:1!important;transition:none!important;}
  .hero .lead,.hero .scroll,.hero .appicon{opacity:1!important;transform:none!important;}
  .hero .scroll::after{animation:none;transform:scaleX(1);}
  .pin{height:auto;} .pin .stage{position:static;height:auto;padding:56px 0;}
  .pin .step{position:static;opacity:1;transform:none;margin-bottom:36px;}
  .ticker{display:none;}
}

/* ============================================================
   製品ページの中身
   文章とマークアップは現行のものをそのまま使い（約束事が書かれた
   文章を書き換えないため）、見た目だけこのサイトの作りに合わせる。
   ============================================================ */
.sec-pad{padding:clamp(80px,12vh,160px) clamp(24px,7vw,120px);border-top:1px solid var(--line);}
.wrap{max-width:100%;}
.eyebrow{font-family:var(--serif);font-size:12px;letter-spacing:.3em;color:var(--sub);
  display:flex;align-items:center;gap:14px;margin-bottom:22px;}
.eyebrow::after{content:"";width:40px;height:1px;background:var(--line);}
.sec-head h2{font-family:var(--serif);font-weight:400;margin:0 0 20px;
  font-size:clamp(26px,4.2vw,56px);line-height:1.45;}
/* 括り（イベント運営・ゲームオーバーレイ）の中に並ぶ拡張は、一段小さくする。
   同じ大きさだと、どれが括りでどれが中身か分からない（実測で両方53.76pxだった）。 */
.sec-head.item h2{font-size:clamp(22px,2.8vw,34px);margin-top:46px;}
.sec-head.item{border-top:1px solid var(--line,#2a2a33);padding-top:30px;}
.sec-head p,.sub{max-width:32em;color:#b9c2be;font-size:14px;line-height:2.1;margin:0 0 8px;}
.anim{opacity:1;transform:none;}          /* 旧デザインの出現指定は無効にする */
.br-pc{display:none;}
@media(min-width:820px){ .br-pc{display:inline;} }
.u-hidden{display:none;} .u-mint{color:var(--accent);} .u-sm{font-size:.86em;}

/* できること */
/* 見出しと「そのほか」は、3列の格子を横断させる。
   これを書かないと、見出しが1マスに収まって項目と入り混じる。 */
.feat-group{grid-column:1/-1;margin:44px 0 -6px;}
.feat-grid > .feat-group:first-child{margin-top:0;}
.fg-title{font-family:var(--serif);font-weight:400;font-size:clamp(20px,2.6vw,32px);
  margin:0 0 8px;line-height:1.5;}
.fg-lead{color:var(--sub);font-size:13px;margin:0 0 26px;}
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.6vw,34px);}
.feat{border-top:2px solid var(--mint);padding-top:18px;}
.feat h4,.feat .ic + *{margin-top:0;}
.feat h4{font-family:var(--serif);font-weight:400;font-size:17px;margin:0 0 10px;line-height:1.6;}
.feat p{margin:0;font-size:13px;line-height:2;color:#b9c2be;}
.feat .ic{display:none;}                   /* 旧デザインの丸アイコンは使わない */
.more-feats{grid-column:1/-1;margin-top:56px;border-top:1px solid var(--line);padding-top:28px;}
.more-lead{font-size:13.5px;margin:0 0 14px;}
.more-list{display:grid;grid-template-columns:repeat(2,1fr);gap:6px 26px;margin:0;padding-left:1.2em;}
.more-list li{font-size:13px;line-height:2;color:#b9c2be;}
.mini-beta{font-size:10px;letter-spacing:.12em;color:var(--hot);margin-left:.5em;}

/* 組み立ての流れ */
.flow{display:grid;gap:clamp(30px,5vw,64px);margin-top:52px;}
.flow-step{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);
  gap:clamp(20px,3vw,44px);align-items:center;}
.flow-step:nth-child(even){direction:rtl;}
.flow-step:nth-child(even) > *{direction:ltr;}
.flow-step img{width:100%;height:auto;display:block;border:1px solid var(--line);cursor:zoom-in;}
.stepno{font-family:var(--serif);font-size:clamp(28px,4vw,52px);color:var(--line);line-height:1;margin-bottom:10px;}
.flow-step p{font-size:13.5px;line-height:2.05;color:#b9c2be;margin:0;}
.flow-step strong{display:block;font-family:var(--serif);font-weight:400;font-size:19px;
  color:var(--ink);margin-bottom:10px;}

/* 料金 */
.price-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,3vw,34px);margin-top:48px;}
.price-card{border:1px solid var(--line);background:var(--panel);padding:clamp(26px,3vw,40px);}
.price-card.pro{border-color:var(--ink);border-width:2px;}
.price-name{font-family:var(--serif);font-size:13px;letter-spacing:.2em;color:var(--sub);}
.price-amt{font-family:var(--serif);font-size:clamp(32px,4.6vw,58px);line-height:1.2;margin:12px 0 14px;}
.price-note{font-size:12.5px;line-height:2;color:#b9c2be;margin:0 0 20px;}
.price-list{margin:0;padding-left:1.2em;}
.price-list li{font-size:13px;line-height:2.1;color:#b9c2be;}
.price-terms{margin-top:36px;border-top:1px solid var(--line);padding-top:24px;
  font-size:12px;line-height:2.15;color:var(--sub);}
.price-terms a{color:var(--hot);}

/* ダウンロード */
.dl-card{border:1px solid var(--line);background:var(--panel);padding:clamp(28px,3.4vw,48px);margin-top:48px;text-align:center;}
.dl-ic{display:none;}
.dl-card h3{font-family:var(--serif);font-weight:400;font-size:clamp(22px,3vw,34px);margin:0 0 12px;}
.dl-card > p{font-size:13.5px;color:#b9c2be;margin:0 0 26px;}
.dl-btn{display:inline-flex;align-items:center;gap:12px;padding:18px 38px;border-radius:999px;
  background:var(--mint);color:#06352a;text-decoration:none;font-size:14.5px;font-weight:700;letter-spacing:.06em;
  transition:transform .35s var(--pop),background .35s;}
.dl-btn:hover{transform:translateY(-3px);background:var(--star-deep);}
.dl-btn svg{width:20px;height:20px;}
.dl-meta{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;
  font-size:11.5px;color:var(--sub);margin-top:18px;letter-spacing:.06em;}
.dl-alt{margin-top:26px;padding-top:22px;border-top:1px solid var(--line);font-size:12.5px;color:var(--sub);}
.dl-alt-btn{display:inline-block;margin-top:8px;padding:9px 22px;border:1px solid var(--line);
  border-radius:999px;text-decoration:none;color:var(--text);font-size:12.5px;}
.dl-alt-btn:hover{border-color:var(--hot);}
.dl-note{margin-top:22px;font-size:11.5px;line-height:2;color:var(--sub);}
.dl-note a{color:var(--hot);}

/* FAQ */
.faq-list{margin-top:44px;border-top:1px solid var(--line);}
.faq-item{border-bottom:1px solid var(--line);padding:20px 0;}
.faq-item summary{font-family:var(--serif);font-size:16px;cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;gap:16px;align-items:flex-start;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"＋";color:var(--sub);font-size:14px;flex:none;}
.faq-item[open] summary::after{content:"−";}
.faq-item p{margin:14px 0 0;font-size:13.5px;line-height:2.1;color:#b9c2be;max-width:44em;}
.faq-item a{color:var(--hot);}

/* 拡大表示 */
#lightbox{position:fixed;inset:0;background:rgba(21,21,28,.94);z-index:200;
  display:none;align-items:center;justify-content:center;padding:30px;}
#lightbox.is-open{display:flex;}
#lightbox img{max-width:96vw;max-height:92vh;}
.lightbox-close{position:absolute;right:22px;top:18px;background:none;border:none;
  color:var(--paper);font-size:30px;line-height:1;cursor:pointer;}

@media(max-width:1100px){
  .feat-grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:860px){
  .feat-grid,.price-grid,.more-list{grid-template-columns:1fr;}
  .flow-step{grid-template-columns:1fr;direction:ltr;}
  .flow-step:nth-child(even){direction:ltr;}
}



/* 締めの補足（料金の案内）と、トップへの導線 */
.end .endnote{max-width:34em;margin:0 0 34px;font-size:14px;line-height:2.1;color:rgba(245,243,238,.8);}
.end .endnote b{color:var(--star);}
.end .back{margin-top:26px;}
.end .back a{font-size:12.5px;letter-spacing:.1em;color:rgba(245,243,238,.6);text-decoration:none;}
.end .back a:hover{color:var(--paper);}

/* 告知の帯 */
.announce{background:var(--panel);color:var(--text);border-bottom:1px solid var(--line-2);text-align:center;
  padding:11px 20px;font-size:12.5px;line-height:1.8;}
.announce b{color:var(--star);}
.announce .a-tag{display:inline-block;margin-right:10px;padding:2px 10px;border-radius:999px;
  background:var(--star);color:#3a2408;font-size:11px;font-weight:700;letter-spacing:.1em;}
body.has-announce .head{top:max(0px, calc(var(--anh,42px) - var(--asy,0px)));}
.head .brand{display:flex;align-items:center;gap:9px;text-decoration:none;}
.head .brand img{width:26px;height:26px;border-radius:50%;display:block;mix-blend-mode:normal;}


/* ============================================================
   フッタ
   旧デザインのCSSを持ち込んでいないので、ここで用意する。
   用意し忘れると、リンクが既定の青字・左詰めのまま出てしまう。
   ============================================================ */
footer{border-top:1px solid var(--line-2);background:var(--ink);
  padding:clamp(56px,8vh,90px) clamp(24px,7vw,120px) 0;}
footer .wrap{max-width:100%;}
footer .foot-top{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(2,minmax(0,1fr));
  gap:clamp(28px,5vw,72px);align-items:start;}
footer .foot-brand .brand{display:flex;align-items:center;gap:10px;
  font-family:var(--serif);font-size:16px;letter-spacing:.14em;
  color:var(--text);text-decoration:none;}
footer .foot-brand .brand svg{flex:none;}
footer .foot-brand p{margin:16px 0 0;max-width:24em;
  font-size:12.5px;line-height:2.05;color:var(--sub);}
footer .foot-col h4{font-family:var(--serif);font-weight:400;font-size:11px;
  letter-spacing:.26em;color:var(--sub);margin:0 0 16px;}
footer .foot-col a{display:block;font-size:13px;line-height:1.9;color:var(--text);
  text-decoration:none;padding:5px 0;transition:color .3s var(--ease);}
footer .foot-col a:hover{color:var(--hot);}
footer .foot-col .ext{font-size:10px;color:var(--sub);margin-left:.4em;}
footer .foot-bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin-top:clamp(40px,6vh,64px);padding:22px 0 26px;border-top:1px solid var(--line);
  font-size:11.5px;letter-spacing:.08em;color:var(--sub);}
@media(max-width:820px){
  footer .foot-top{grid-template-columns:1fr;gap:34px;}
  footer .foot-bottom{margin-top:32px;}
}


/* ============================================================
   トップと同じ見せ方を、この製品ページにも
   ・背景の星（画面に固定。節ごとに切れないように1枚）
   ・章に入ると印が出て、同じ合図で項目がそろって飛んでくる
   ============================================================ */
#bgfx{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;}
html{background:var(--ink);}
body{background:transparent;}
.hero{background:transparent!important;}
.sec-pad{background:transparent;position:relative;overflow-x:clip;border-top:1px solid var(--line-2);}
.end{background:transparent;}

/* 章の印 */
.flare{position:absolute;left:0;right:0;top:0;height:0;pointer-events:none;}
.flare i{position:absolute;left:50%;top:0;width:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--mint),transparent);
  transform:translateX(-50%);opacity:0;}
.flare b{position:absolute;left:50%;top:0;width:60vw;height:60vw;max-width:900px;max-height:900px;
  transform:translate(-50%,-50%) scale(.4);border-radius:50%;opacity:0;
  background:radial-gradient(circle,rgba(159,225,203,.14),rgba(159,225,203,0) 62%);}
.sec-pad.on .flare i{animation:flareline 1.1s cubic-bezier(.16,1,.3,1) forwards;}
.sec-pad.on .flare b{animation:flareglow 1.6s cubic-bezier(.16,1,.3,1) forwards;}
@keyframes flareline{0%{width:0;opacity:0;}18%{opacity:1;}100%{width:100%;opacity:.5;}}
@keyframes flareglow{0%{opacity:0;transform:translate(-50%,-50%) scale(.4);}
  30%{opacity:1;}100%{opacity:0;transform:translate(-50%,-50%) scale(1.15);}}

/* 見出しと説明は、印のすぐあとに */
.sec-pad .eyebrow,.sec-pad .sec-head{opacity:0;transform:translateY(24px);}
.sec-pad.on .eyebrow,.sec-pad.on .sec-head{opacity:1;transform:none;
  transition:opacity .5s ease .18s,transform .8s cubic-bezier(.22,1.4,.36,1) .18s;}

/* 項目は遠くから飛んできて配置につく */
.fly{opacity:0;
  transform:translate3d(var(--fx,0),var(--fy,60px),0) rotate(var(--fr,0deg)) scale(var(--fs,.86));}
.sec-pad.on .fly{opacity:1;transform:none;
  transition:opacity .45s ease var(--d,0s),
             transform 1.05s cubic-bezier(.18,1.35,.32,1) var(--d,0s);}

@media(prefers-reduced-motion:reduce){
  .sec-pad .eyebrow,.sec-pad .sec-head,.fly{opacity:1!important;transform:none!important;}
  .flare{display:none;}
}


/* 色見本。押すと上の絵が変わる。 */
.sw-row{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 12px;}
.sw-row .sw{border:1px solid var(--line-2);background:none;color:var(--sub);
  font:inherit;font-size:10.5px;border-radius:999px;padding:3px 10px;cursor:pointer;
  transition:border-color .2s,color .2s;}
.sw-row .sw:hover{border-color:var(--mint);color:var(--text);}
.sw-row .sw[aria-current="true"]{border-color:var(--mint);color:var(--ink);
  background:var(--mint);font-weight:700;}

/* いま見ているページ */
.head nav a[aria-current="page"]{color:var(--mint);}
.soon{display:inline-block;margin:0 0 18px;padding:9px 16px;border-radius:10px;
  border:1px solid var(--star);color:var(--star);font-size:13px;line-height:1.9;
  background:rgba(255,190,122,.07);max-width:44em;}
.soon b{font-weight:700;}
.sk-dl.soon-dl{opacity:.9;}
.dl-note{font-size:12px;color:var(--star);margin-top:9px;line-height:1.8;}




/* =========================================================
   前回は静かすぎた。名前が「もりあげ」なので、
   声が増える・速くなる・熱が上がる、を画面で起こす。

   ・絵文字は使わない。勢いは、速さ・量・色で出す。
   ・声は「たくさん来ている」ことが分かる量で流す。
   ・熱は色で示す。緑（平常）から橙（盛り上がり）へ寄せる。
   ・ただし読ませる場所では止める。うるさいだけにはしない。
   ========================================================= */

:root{
  /* ロゴに合わせた黒基調。地はロゴの外周、面はロゴの円の中。 */
  --ink:#0f1116;          /* 地 */
  --panel:#171a21;        /* 面（カードなど） */
  --panel-2:#1e222b;
  --paper:#eef2f0;        /* 文字色。名前は据え置き */
  --text:#eef2f0;
  --mint:#9fe1cb;
  --mint-deep:#9fe1cb;    /* 黒地なのでロゴの色をそのまま使える */
  --star:#ffbe7a;
  --star-deep:#ffbe7a;
  --accent:var(--mint);
  --hot:var(--star);
  --sub:#98a29e;
  --line:rgba(159,225,203,.16);
  --line-2:rgba(255,255,255,.07);

  --serif:"Hiragino Mincho ProN","Yu Mincho","YuMincho",serif;
  --sans:"Hiragino Kaku Gothic ProN","Yu Gothic","YuGothic",system-ui,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --pop:cubic-bezier(.34,1.56,.44,1);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html{background:var(--ink);}
body{margin:0;background:transparent;color:var(--text);font-family:var(--sans);
  font-size:16px;line-height:1.9;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
a{color:inherit;}

.heat{position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:60;
  display:flex;flex-direction:column;align-items:center;gap:10px;}
.heat .tube{width:3px;height:180px;background:var(--line);border-radius:2px;overflow:hidden;position:relative;}
.heat .tube i{position:absolute;left:0;bottom:0;width:100%;height:0%;
  background:linear-gradient(180deg,var(--hot) 0%,var(--hot-2) 45%,var(--accent) 100%);}
.heat .v{font-family:var(--serif);font-size:13px;font-variant-numeric:tabular-nums;}
.heat .l{font-size:9px;letter-spacing:.24em;color:var(--sub);writing-mode:vertical-rl;}

.chapter{position:fixed;left:24px;top:50%;transform:translateY(-50%);z-index:50;
  font-family:var(--serif);font-size:12px;letter-spacing:.22em;color:var(--sub);
  writing-mode:vertical-rl;display:flex;align-items:center;gap:12px;
  opacity:0;transition:opacity .5s var(--ease);}
.chapter .num{font-size:15px;color:var(--ink);}
.chapter::after{content:"";width:1px;height:56px;background:var(--line);}

.head{position:fixed;left:0;right:0;top:0;z-index:55;display:flex;align-items:center;
  justify-content:space-between;padding:20px 28px;mix-blend-mode:difference;color:#fff;}
.head .brand{display:flex;align-items:center;gap:9px;font-family:var(--serif);
  font-size:15px;letter-spacing:.16em;text-decoration:none;}
.head .brand img{width:24px;height:24px;border-radius:50%;display:block;mix-blend-mode:normal;}
.head nav{display:flex;gap:24px;font-size:12px;letter-spacing:.14em;}
.head a{text-decoration:none;opacity:.85;}
.head a:hover{opacity:1;}

/* ---- ヒーロー ---- */
.hero{position:relative;height:100svh;min-height:620px;overflow:hidden;background:var(--ink);color:#f5f3ee;}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;}
.hero .inner{position:relative;z-index:3;height:100%;display:flex;flex-direction:column;
  justify-content:center;padding:0 clamp(24px,7vw,120px);pointer-events:none;}
.hero .appicon{width:72px;height:72px;border-radius:18px;display:block;margin:0 0 26px;
  opacity:0;transform:scale(.8) rotate(-6deg);box-shadow:0 10px 34px rgba(0,0,0,.4);}
.hero h1{font-family:var(--serif);font-weight:400;margin:0;
  font-size:clamp(40px,8.2vw,116px);line-height:1.2;}
.hero h1 .l{display:block;}
.hero h1 .c{display:inline-block;transform:translateY(64px) scale(.86);opacity:0;}
.hero h1 em{font-style:normal;color:var(--hot-2);}
.hero .lead{margin:30px 0 0;max-width:33em;font-size:clamp(13px,1.1vw,16px);
  line-height:2.05;color:rgba(245,243,238,.74);opacity:0;transform:translateY(14px);}
.hero .scroll{position:absolute;left:clamp(24px,7vw,120px);bottom:34px;z-index:3;
  font-size:11px;letter-spacing:.28em;color:rgba(245,243,238,.5);display:flex;align-items:center;gap:12px;opacity:0;}
.hero .scroll::after{content:"";width:48px;height:1px;background:currentColor;
  transform-origin:left;animation:pull 2.2s var(--ease) infinite;}
@keyframes pull{0%{transform:scaleX(0);}50%{transform:scaleX(1);}100%{transform:scaleX(0);transform-origin:right;}}

.ticker{position:absolute;left:0;right:0;z-index:2;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);}
.ticker.t1{top:15%;} .ticker.t2{top:79%;}
.ticker .run{display:flex;gap:14px;width:max-content;will-change:transform;}
.ticker .cm{font-size:13px;padding:6px 14px;border-radius:999px;white-space:nowrap;
  background:rgba(245,243,238,.07);border:1px solid rgba(245,243,238,.12);color:rgba(245,243,238,.62);}
.ticker .cm.hot{background:rgba(255,190,122,.18);border-color:rgba(255,190,122,.5);color:#ffdfc0;}

/* ---- 章 ---- */
.act{position:relative;padding:clamp(80px,12vh,170px) clamp(24px,7vw,120px);}
.act + .act{border-top:1px solid var(--line);}
.act .no{font-family:var(--serif);font-size:12px;letter-spacing:.3em;color:var(--sub);
  display:flex;align-items:center;gap:14px;margin-bottom:22px;}
.act .no::after{content:"";width:40px;height:1px;background:var(--line);}
.act h2{font-family:var(--serif);font-weight:400;margin:0 0 26px;
  font-size:clamp(28px,4.6vw,62px);line-height:1.42;}
.act p.body{max-width:30em;color:#b9c2be;font-size:clamp(13px,1.05vw,15px);line-height:2.1;margin:0;}

.rise{overflow:hidden;}
.rise > *{transform:translateY(104%);transition:transform .85s var(--ease);}
.on .rise > *{transform:none;}
.fade{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--pop);}
.on .fade{opacity:1;transform:none;}
.on .d1{transition-delay:.06s;} .on .d2{transition-delay:.12s;} .on .d3{transition-delay:.18s;}

.figures{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,4vw,56px);margin-top:56px;}
.figures div{border-top:2px solid var(--mint);padding-top:18px;}
.figures .n{font-family:var(--serif);font-size:clamp(38px,6.2vw,86px);line-height:1;
  font-variant-numeric:tabular-nums;}
.figures .n small{font-size:.32em;margin-left:.28em;letter-spacing:.08em;}
.figures .t{font-size:11.5px;letter-spacing:.14em;color:var(--sub);margin-top:10px;}

/* ---- 固定章 ---- */
.pin{position:relative;height:330vh;}
.pin .stage{position:sticky;top:0;height:100svh;display:flex;align-items:center;overflow:hidden;}
.pin .col{width:100%;padding:0 clamp(24px,7vw,120px);display:grid;
  grid-template-columns:1fr 1fr;gap:clamp(28px,6vw,86px);align-items:center;}
.pin .steps{position:relative;min-height:250px;}
.pin .step{position:absolute;inset:0;opacity:0;transform:translateY(26px) scale(.97);
  transition:opacity .45s var(--ease),transform .5s var(--pop);}
.pin .step.on{opacity:1;transform:none;}
.pin .step h3{font-family:var(--serif);font-weight:400;font-size:clamp(22px,3vw,40px);margin:0 0 14px;}
.pin .step p{margin:0;max-width:25em;color:#b9c2be;font-size:14px;line-height:2.05;}
.pin .idx{display:flex;gap:8px;margin-bottom:24px;}
.pin .idx i{width:30px;height:3px;background:var(--line);transition:background .3s,transform .3s var(--pop);}
.pin .idx i.on{background:var(--hot);transform:scaleY(1.6);}
.pin .fig{aspect-ratio:1/1;position:relative;}
.pin .fig canvas{width:100%;height:100%;}

/* ---- 機能の帯 ---- */
.rail{overflow:hidden;padding:clamp(64px,9vh,120px) 0;border-top:1px solid var(--line);}
.rail h2{font-family:var(--serif);font-weight:400;font-size:clamp(25px,3.6vw,48px);
  margin:0 0 34px;padding:0 clamp(24px,7vw,120px);}
.rail .track{display:flex;gap:18px;padding:0 clamp(24px,7vw,120px);will-change:transform;}
.rail .card{flex:0 0 clamp(230px,25vw,320px);border:1px solid var(--line);
  padding:26px 24px 28px;background:var(--panel);transition:transform .4s var(--pop),border-color .4s;}
.rail .card:hover{transform:translateY(-6px);border-color:var(--hot);}
.rail .card .k{font-family:var(--serif);font-size:11px;letter-spacing:.24em;color:var(--hot);}
.rail .card h3{font-family:var(--serif);font-weight:400;font-size:19px;margin:12px 0 10px;}
.rail .card p{margin:0;font-size:13px;line-height:2;color:#b9c2be;}

/* ---- 締め ---- */
.end{position:relative;background:var(--ink);color:#f5f3ee;overflow:hidden;
  padding:clamp(100px,16vh,200px) clamp(24px,7vw,120px);}
.end canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.55;}
.end .z{position:relative;z-index:2;}
.end h2{font-family:var(--serif);font-weight:400;font-size:clamp(32px,5.8vw,80px);line-height:1.4;margin:0 0 38px;}
.end h2 em{font-style:normal;color:var(--hot-2);}
.end .go{display:inline-flex;align-items:center;gap:14px;padding:18px 36px;border-radius:999px;
  background:var(--star);color:#3a2408;text-decoration:none;font-size:14px;letter-spacing:.1em;font-weight:700;
  transition:transform .35s var(--pop),box-shadow .35s;}
.end .go:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 14px 40px rgba(255,190,122,.4);}
.end .go i{width:24px;height:2px;background:currentColor;transition:width .35s var(--pop);}
.end .go:hover i{width:40px;}
.end .back{margin-top:26px;}
.end .back a{font-size:12.5px;letter-spacing:.1em;color:rgba(245,243,238,.6);text-decoration:none;}
.end .back a:hover{color:#f5f3ee;}
.foot{padding:34px clamp(24px,7vw,120px);font-size:11.5px;letter-spacing:.1em;color:var(--sub);
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;}

@media(max-width:820px){
  .chapter,.heat{display:none;}
  .pin{height:auto;} .pin .stage{position:static;height:auto;padding:60px 0;}
  .pin .col{grid-template-columns:1fr;}
  .pin .steps{min-height:0;}
  .pin .step{position:static;opacity:1;transform:none;margin-bottom:40px;}
  .figures{grid-template-columns:1fr;}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .rise > *,.fade,.hero h1 .c{transform:none!important;opacity:1!important;transition:none!important;}
  .hero .lead,.hero .scroll,.hero .appicon{opacity:1!important;transform:none!important;}
  .hero .scroll::after{animation:none;transform:scaleX(1);}
  .pin{height:auto;} .pin .stage{position:static;height:auto;padding:56px 0;}
  .pin .step{position:static;opacity:1;transform:none;margin-bottom:36px;}
  .ticker{display:none;}
}

/* ============================================================
   製品ページの中身
   文章とマークアップは現行のものをそのまま使い（約束事が書かれた
   文章を書き換えないため）、見た目だけこのサイトの作りに合わせる。
   ============================================================ */
.sec-pad{padding:clamp(80px,12vh,160px) clamp(24px,7vw,120px);border-top:1px solid var(--line);}
.wrap{max-width:100%;}
.eyebrow{font-family:var(--serif);font-size:12px;letter-spacing:.3em;color:var(--sub);
  display:flex;align-items:center;gap:14px;margin-bottom:22px;}
.eyebrow::after{content:"";width:40px;height:1px;background:var(--line);}
.sec-head h2{font-family:var(--serif);font-weight:400;margin:0 0 20px;
  font-size:clamp(26px,4.2vw,56px);line-height:1.45;}
/* 括り（イベント運営・ゲームオーバーレイ）の中に並ぶ拡張は、一段小さくする。
   同じ大きさだと、どれが括りでどれが中身か分からない（実測で両方53.76pxだった）。 */
.sec-head.item h2{font-size:clamp(22px,2.8vw,34px);margin-top:46px;}
.sec-head.item{border-top:1px solid var(--line,#2a2a33);padding-top:30px;}
.sec-head p,.sub{max-width:32em;color:#b9c2be;font-size:14px;line-height:2.1;margin:0 0 8px;}
.anim{opacity:1;transform:none;}          /* 旧デザインの出現指定は無効にする */
.br-pc{display:none;}
@media(min-width:820px){ .br-pc{display:inline;} }
.u-hidden{display:none;} .u-mint{color:var(--accent);} .u-sm{font-size:.86em;}

/* できること */
/* 見出しと「そのほか」は、3列の格子を横断させる。
   これを書かないと、見出しが1マスに収まって項目と入り混じる。 */
.feat-group{grid-column:1/-1;margin:44px 0 -6px;}
.feat-grid > .feat-group:first-child{margin-top:0;}
.fg-title{font-family:var(--serif);font-weight:400;font-size:clamp(20px,2.6vw,32px);
  margin:0 0 8px;line-height:1.5;}
.fg-lead{color:var(--sub);font-size:13px;margin:0 0 26px;}
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.6vw,34px);}
.feat{border-top:2px solid var(--mint);padding-top:18px;}
.feat h4,.feat .ic + *{margin-top:0;}
.feat h4{font-family:var(--serif);font-weight:400;font-size:17px;margin:0 0 10px;line-height:1.6;}
.feat p{margin:0;font-size:13px;line-height:2;color:#b9c2be;}
.feat .ic{display:none;}                   /* 旧デザインの丸アイコンは使わない */
.more-feats{grid-column:1/-1;margin-top:56px;border-top:1px solid var(--line);padding-top:28px;}
.more-lead{font-size:13.5px;margin:0 0 14px;}
.more-list{display:grid;grid-template-columns:repeat(2,1fr);gap:6px 26px;margin:0;padding-left:1.2em;}
.more-list li{font-size:13px;line-height:2;color:#b9c2be;}
.mini-beta{font-size:10px;letter-spacing:.12em;color:var(--hot);margin-left:.5em;}

/* 組み立ての流れ */
.flow{display:grid;gap:clamp(30px,5vw,64px);margin-top:52px;}
.flow-step{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);
  gap:clamp(20px,3vw,44px);align-items:center;}
.flow-step:nth-child(even){direction:rtl;}
.flow-step:nth-child(even) > *{direction:ltr;}
.flow-step img{width:100%;height:auto;display:block;border:1px solid var(--line);cursor:zoom-in;}
.stepno{font-family:var(--serif);font-size:clamp(28px,4vw,52px);color:var(--line);line-height:1;margin-bottom:10px;}
.flow-step p{font-size:13.5px;line-height:2.05;color:#b9c2be;margin:0;}
.flow-step strong{display:block;font-family:var(--serif);font-weight:400;font-size:19px;
  color:var(--ink);margin-bottom:10px;}

/* 料金 */
.price-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,3vw,34px);margin-top:48px;}
.price-card{border:1px solid var(--line);background:var(--panel);padding:clamp(26px,3vw,40px);}
.price-card.pro{border-color:var(--ink);border-width:2px;}
.price-name{font-family:var(--serif);font-size:13px;letter-spacing:.2em;color:var(--sub);}
.price-amt{font-family:var(--serif);font-size:clamp(32px,4.6vw,58px);line-height:1.2;margin:12px 0 14px;}
.price-note{font-size:12.5px;line-height:2;color:#b9c2be;margin:0 0 20px;}
.price-list{margin:0;padding-left:1.2em;}
.price-list li{font-size:13px;line-height:2.1;color:#b9c2be;}
.price-terms{margin-top:36px;border-top:1px solid var(--line);padding-top:24px;
  font-size:12px;line-height:2.15;color:var(--sub);}
.price-terms a{color:var(--hot);}

/* ダウンロード */
.dl-card{border:1px solid var(--line);background:var(--panel);padding:clamp(28px,3.4vw,48px);margin-top:48px;text-align:center;}
.dl-ic{display:none;}
.dl-card h3{font-family:var(--serif);font-weight:400;font-size:clamp(22px,3vw,34px);margin:0 0 12px;}
.dl-card > p{font-size:13.5px;color:#b9c2be;margin:0 0 26px;}
.dl-btn{display:inline-flex;align-items:center;gap:12px;padding:18px 38px;border-radius:999px;
  background:var(--mint);color:#06352a;text-decoration:none;font-size:14.5px;font-weight:700;letter-spacing:.06em;
  transition:transform .35s var(--pop),background .35s;}
.dl-btn:hover{transform:translateY(-3px);background:var(--star-deep);}
.dl-btn svg{width:20px;height:20px;}
.dl-meta{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;
  font-size:11.5px;color:var(--sub);margin-top:18px;letter-spacing:.06em;}
.dl-alt{margin-top:26px;padding-top:22px;border-top:1px solid var(--line);font-size:12.5px;color:var(--sub);}
.dl-alt-btn{display:inline-block;margin-top:8px;padding:9px 22px;border:1px solid var(--line);
  border-radius:999px;text-decoration:none;color:var(--text);font-size:12.5px;}
.dl-alt-btn:hover{border-color:var(--hot);}
.dl-note{margin-top:22px;font-size:11.5px;line-height:2;color:var(--sub);}
.dl-note a{color:var(--hot);}

/* FAQ */
.faq-list{margin-top:44px;border-top:1px solid var(--line);}
.faq-item{border-bottom:1px solid var(--line);padding:20px 0;}
.faq-item summary{font-family:var(--serif);font-size:16px;cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;gap:16px;align-items:flex-start;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"＋";color:var(--sub);font-size:14px;flex:none;}
.faq-item[open] summary::after{content:"−";}
.faq-item p{margin:14px 0 0;font-size:13.5px;line-height:2.1;color:#b9c2be;max-width:44em;}
.faq-item a{color:var(--hot);}

/* 拡大表示 */
#lightbox{position:fixed;inset:0;background:rgba(21,21,28,.94);z-index:200;
  display:none;align-items:center;justify-content:center;padding:30px;}
#lightbox.is-open{display:flex;}
#lightbox img{max-width:96vw;max-height:92vh;}
.lightbox-close{position:absolute;right:22px;top:18px;background:none;border:none;
  color:var(--paper);font-size:30px;line-height:1;cursor:pointer;}

@media(max-width:1100px){
  .feat-grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:860px){
  .feat-grid,.price-grid,.more-list{grid-template-columns:1fr;}
  .flow-step{grid-template-columns:1fr;direction:ltr;}
  .flow-step:nth-child(even){direction:ltr;}
}



/* 締めの補足（料金の案内）と、トップへの導線 */
.end .endnote{max-width:34em;margin:0 0 34px;font-size:14px;line-height:2.1;color:rgba(245,243,238,.8);}
.end .endnote b{color:var(--star);}
.end .back{margin-top:26px;}
.end .back a{font-size:12.5px;letter-spacing:.1em;color:rgba(245,243,238,.6);text-decoration:none;}
.end .back a:hover{color:var(--paper);}

/* 告知の帯 */
.announce{background:var(--panel);color:var(--text);border-bottom:1px solid var(--line-2);text-align:center;
  padding:11px 20px;font-size:12.5px;line-height:1.8;}
.announce b{color:var(--star);}
.announce .a-tag{display:inline-block;margin-right:10px;padding:2px 10px;border-radius:999px;
  background:var(--star);color:#3a2408;font-size:11px;font-weight:700;letter-spacing:.1em;}
body.has-announce .head{top:max(0px, calc(var(--anh,42px) - var(--asy,0px)));}
.head .brand{display:flex;align-items:center;gap:9px;text-decoration:none;}
.head .brand img{width:26px;height:26px;border-radius:50%;display:block;mix-blend-mode:normal;}


/* ============================================================
   フッタ
   旧デザインのCSSを持ち込んでいないので、ここで用意する。
   用意し忘れると、リンクが既定の青字・左詰めのまま出てしまう。
   ============================================================ */
footer{border-top:1px solid var(--line-2);background:var(--ink);
  padding:clamp(56px,8vh,90px) clamp(24px,7vw,120px) 0;}
footer .wrap{max-width:100%;}
footer .foot-top{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(2,minmax(0,1fr));
  gap:clamp(28px,5vw,72px);align-items:start;}
footer .foot-brand .brand{display:flex;align-items:center;gap:10px;
  font-family:var(--serif);font-size:16px;letter-spacing:.14em;
  color:var(--text);text-decoration:none;}
footer .foot-brand .brand svg{flex:none;}
footer .foot-brand p{margin:16px 0 0;max-width:24em;
  font-size:12.5px;line-height:2.05;color:var(--sub);}
footer .foot-col h4{font-family:var(--serif);font-weight:400;font-size:11px;
  letter-spacing:.26em;color:var(--sub);margin:0 0 16px;}
footer .foot-col a{display:block;font-size:13px;line-height:1.9;color:var(--text);
  text-decoration:none;padding:5px 0;transition:color .3s var(--ease);}
footer .foot-col a:hover{color:var(--hot);}
footer .foot-col .ext{font-size:10px;color:var(--sub);margin-left:.4em;}
footer .foot-bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin-top:clamp(40px,6vh,64px);padding:22px 0 26px;border-top:1px solid var(--line);
  font-size:11.5px;letter-spacing:.08em;color:var(--sub);}
@media(max-width:820px){
  footer .foot-top{grid-template-columns:1fr;gap:34px;}
  footer .foot-bottom{margin-top:32px;}
}


/* ============================================================
   トップと同じ見せ方を、この製品ページにも
   ・背景の星（画面に固定。節ごとに切れないように1枚）
   ・章に入ると印が出て、同じ合図で項目がそろって飛んでくる
   ============================================================ */
#bgfx{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;}
html{background:var(--ink);}
body{background:transparent;}
.hero{background:transparent!important;}
.sec-pad{background:transparent;position:relative;overflow-x:clip;border-top:1px solid var(--line-2);}
.end{background:transparent;}

/* 章の印 */
.flare{position:absolute;left:0;right:0;top:0;height:0;pointer-events:none;}
.flare i{position:absolute;left:50%;top:0;width:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--mint),transparent);
  transform:translateX(-50%);opacity:0;}
.flare b{position:absolute;left:50%;top:0;width:60vw;height:60vw;max-width:900px;max-height:900px;
  transform:translate(-50%,-50%) scale(.4);border-radius:50%;opacity:0;
  background:radial-gradient(circle,rgba(159,225,203,.14),rgba(159,225,203,0) 62%);}
.sec-pad.on .flare i{animation:flareline 1.1s cubic-bezier(.16,1,.3,1) forwards;}
.sec-pad.on .flare b{animation:flareglow 1.6s cubic-bezier(.16,1,.3,1) forwards;}
@keyframes flareline{0%{width:0;opacity:0;}18%{opacity:1;}100%{width:100%;opacity:.5;}}
@keyframes flareglow{0%{opacity:0;transform:translate(-50%,-50%) scale(.4);}
  30%{opacity:1;}100%{opacity:0;transform:translate(-50%,-50%) scale(1.15);}}

/* 見出しと説明は、印のすぐあとに */
.sec-pad .eyebrow,.sec-pad .sec-head{opacity:0;transform:translateY(24px);}
.sec-pad.on .eyebrow,.sec-pad.on .sec-head{opacity:1;transform:none;
  transition:opacity .5s ease .18s,transform .8s cubic-bezier(.22,1.4,.36,1) .18s;}

/* 項目は遠くから飛んできて配置につく */
.fly{opacity:0;
  transform:translate3d(var(--fx,0),var(--fy,60px),0) rotate(var(--fr,0deg)) scale(var(--fs,.86));}
.sec-pad.on .fly{opacity:1;transform:none;
  transition:opacity .45s ease var(--d,0s),
             transform 1.05s cubic-bezier(.18,1.35,.32,1) var(--d,0s);}

@media(prefers-reduced-motion:reduce){
  .sec-pad .eyebrow,.sec-pad .sec-head,.fly{opacity:1!important;transform:none!important;}
  .flare{display:none;}
}


/* ---- スキンの一覧 ---- */
.sk-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,2vw,24px);margin-top:48px;}
.sk-item{border:1px solid var(--line-2);border-radius:12px;overflow:hidden;
  background:rgba(23,26,33,.6);display:flex;flex-direction:column;}
.sk-item img{width:100%;height:auto;display:block;border-bottom:1px solid var(--line-2);}
.sk-in{padding:clamp(14px,1.6vw,20px);display:flex;flex-direction:column;flex:1 1 auto;}
.sk-item h3{font-family:var(--serif);font-weight:400;font-size:clamp(17px,1.7vw,21px);
  margin:0 0 7px;line-height:1.4;}
.sk-tags{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0;margin:0 0 14px;}
.sk-tags li{font-size:11px;letter-spacing:.06em;color:var(--sub);
  border:1px solid var(--line-2);border-radius:999px;padding:3px 11px;}
.sk-item p{font-size:12.5px;line-height:1.9;color:#b9c2be;margin:0 0 13px;}
.sk-meta{font-size:11.5px;line-height:1.9;color:var(--sub);margin:0 0 15px;}
.sk-meta b{color:#cfd6d2;font-weight:400;}
.sk-dl{margin-top:auto;display:inline-flex;align-items:center;gap:8px;
  align-self:flex-start;padding:9px 19px;border-radius:999px;
  background:var(--mint);color:#06352a;text-decoration:none;
  font-size:12.5px;font-weight:700;letter-spacing:.03em;
  transition:transform .3s var(--pop),background .3s;}
.sk-dl:hover{transform:translateY(-2px);background:var(--star);color:#3a2408;}
.sk-dl .kb{font-weight:400;font-size:11.5px;opacity:.7;}

/* ---- 使い方 ---- */
.sk-how{counter-reset:st;display:grid;gap:18px;margin-top:44px;max-width:44em;}
.sk-how li{list-style:none;position:relative;padding-left:44px;
  font-size:14px;line-height:2.05;color:#b9c2be;}
.sk-how li::before{counter-increment:st;content:counter(st);
  position:absolute;left:0;top:2px;width:28px;height:28px;border-radius:50%;
  background:var(--mint);color:#06352a;display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:14px;}
.sk-how b{color:var(--text);font-weight:400;}

@media(max-width:1080px){ .sk-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media(max-width:700px){ .sk-grid{grid-template-columns:1fr;} }


/* ヘッダの並びは、幅が足りないと1文字ずつ縦に崩れる。
   実測でくずれ始めるのは トップ990px・製品ページ920px・その他840px 以下。
   これまでは 820px で隠していたので、そのあいだの幅がずっと崩れていた。
   同じ行き先はフッタにも並べてあるので、入りきらない幅では出さない。
   数字は5ページでそろえる（1つ足したときに、ここだけ直せばよいように）。 */
@media(max-width:1000px){ .head nav{display:none;} }

/* HTMLに直書きした style="…" は CSP で当たらないので、クラスに寄せたもの */
.u-one{grid-template-columns:minmax(0,720px);justify-content:center;}
.u-mt26{margin-top:26px;}


/* =========================================================
   拡張機能の入口と、拡張1つぶんの頁（2026-10-04）

   【なぜ分けたか】
   拡張が9つになり、1枚の頁が1469行になった。
   来た人が目当てのものにたどり着けない。入口でカードを並べ、
   くわしい話は拡張ごとの頁へ分けた。

   ★ 絵は**透過**で撮ってある（build/shoot-ext.js）。
   　 カードの下地にそのまま重なるので、四角い縁が出ない。
   ★ 色は上の変数を使う。ここで新しい色を足さない。
   ========================================================= */

/* ---- 入口：カードを並べる ---- */
.ext-grid{display:grid;gap:22px;margin-top:38px;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));}
.ext-card{display:flex;flex-direction:column;overflow:hidden;
  background:var(--panel);border:1px solid var(--line);border-radius:16px;
  transition:transform .3s var(--pop),border-color .3s;}
.ext-card:hover{transform:translateY(-3px);border-color:rgba(159,225,203,.4);}
/* 絵を置くところ。★ 高さをそろえる（カードの頭がそろわないと、一覧が読みにくい）。 */
.ext-shot{display:flex;align-items:center;justify-content:center;
  height:168px;padding:14px;text-decoration:none;
  background:
    linear-gradient(140deg,rgba(159,225,203,.07),rgba(255,190,122,.05)),
    var(--ink);
  border-bottom:1px solid var(--line);}
.ext-shot img{max-width:100%;max-height:140px;width:auto;height:auto;display:block;}
.ext-noshot{font-size:12px;color:var(--sub);}
.ext-body{display:flex;flex-direction:column;gap:7px;padding:16px 18px 18px;flex:1;}
.ext-body h3{font-size:15px;margin:0;line-height:1.5;}
.ext-body h3 a{color:var(--text);text-decoration:none;}
.ext-body h3 a:hover{color:var(--mint);}
.ext-game{font-size:11.5px;color:var(--mint);margin:0;letter-spacing:.04em;}
.ext-body p{font-size:13px;line-height:1.85;color:#b9c2be;margin:0;}
.ext-acts{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:auto;padding-top:10px;}
.ext-more{font-size:12.5px;color:var(--mint);text-decoration:none;font-weight:700;
  border-bottom:1px solid rgba(159,225,203,.35);padding-bottom:1px;}
.ext-more:hover{color:var(--star);border-color:rgba(255,190,122,.5);}
/* カードの中の〔ダウンロード〕は、上の余白を詰める（auto にしない）。 */
.ext-acts .sk-dl{margin-top:0;}

/* ベータの印。★ 色だけで表さない（文字も入れる）。 */
.badge{display:inline-block;margin-left:8px;padding:1px 8px;border-radius:999px;
  font-size:10.5px;font-weight:700;background:rgba(255,190,122,.16);color:var(--star);
  vertical-align:middle;letter-spacing:.04em;}

/* ---- 拡張1つぶんの頁 ---- */
.crumbs{font-size:12px;color:var(--sub);margin-bottom:18px;}
.crumbs a{color:var(--sub);text-decoration:none;border-bottom:1px solid rgba(152,162,158,.3);}
.crumbs a:hover{color:var(--mint);}
.ext-hero{margin:34px 0 0;padding:26px;border-radius:16px;
  background:
    linear-gradient(140deg,rgba(159,225,203,.07),rgba(255,190,122,.05)),
    var(--ink);
  border:1px solid var(--line);text-align:center;}
.ext-hero img{max-width:100%;height:auto;display:block;margin:0 auto;}
.ext-hero.wide{padding:18px;}
.ext-hero figcaption{font-size:11.5px;color:var(--sub);margin-top:14px;line-height:1.8;}
.ext-cols{display:grid;gap:30px;margin-top:38px;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));}
.ext-cols h3{font-size:14px;margin:0 0 12px;color:var(--mint);letter-spacing:.04em;}
.ext-cols h3+ul+h3{margin-top:28px;}
.ext-list{margin:0;padding-left:1.25em;}
.ext-list li{font-size:13.5px;line-height:2;color:#b9c2be;margin:0 0 4px;}
/* できないこと。★ 警告色にしない（壊れてはいない）。読み飛ばされない程度に分ける。 */
.ext-cant li{color:#a8b0ac;}
.ext-cant{margin-bottom:22px;}
.ext-ver{font-size:12px;margin-top:12px;}

/* ---- 入れ方（どの頁でも同じ）---- */
.howto{counter-reset:ht;display:grid;gap:14px;margin:30px 0 24px;max-width:44em;padding:0;}
.howto li{list-style:none;position:relative;padding-left:40px;
  font-size:13.5px;line-height:2;color:#b9c2be;}
.howto li::before{counter-increment:ht;content:counter(ht);
  position:absolute;left:0;top:2px;width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(159,225,203,.12);color:var(--mint);
  font-size:12px;font-weight:700;}

/* ---- スマホ ---- */
@media (max-width:640px){
  .ext-grid{grid-template-columns:1fr;gap:18px;}
  .ext-shot{height:148px;}
  .ext-hero{padding:16px;}
  .ext-cols{gap:22px;margin-top:28px;}
}