/* Lino Labs サイト（2026-11 作り直し）の共通の見た目。
   ロゴの吹き出し（ミント）と星（橙）を、そのまま頁の形と色にする。ロゴそのものの色は変えない（2026-11-01 作者）。
   頁の中に <style> を書かない（CSP の指紋が要らないよう、見た目はここに集める）。
   暗く締めた版も試した（_preview/lab-dark.css）。作者が「かわいくてポップな感じ」に戻すと決めた（2026-11-01）。 */

:root{
  --paper:#ffffff;
  --ink:#0f1116;          /* 文字と線。いまのサイトの地の色を、明るい頁では墨として使う */
  --ink-2:#3b4250;        /* 説明文。墨を薄めた色（灰色にしない） */
  --mint:#9fe1cb;         /* ロゴの吹き出し */
  --mint-soft:#e3f6ef;
  --mint-deep:#13775a;    /* 白地の上で読める濃さのミント（リンク） */
  --orange:#ffbe7a;       /* ロゴの星 */
  --orange-soft:#fff0dd;
  --line:2.5px;           /* ロゴの線の太さに合わせた輪郭 */
  --r:26px;               /* 吹き出しの角 */
  --shadow:0 14px 30px -12px rgba(15,17,22,.28), 0 2px 6px rgba(15,17,22,.08);
  --pop:cubic-bezier(.34,1.56,.64,1);
  --out:cubic-bezier(.16,1,.3,1);
  --display:"Dela Gothic One", "Zen Kaku Gothic New", sans-serif;
  --body:"Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic UI", sans-serif;
  --w:1180px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:84px;scrollbar-color:var(--ink) var(--mint-soft);}
body{margin:0;background:var(--paper);color:var(--ink);font:500 16px/1.85 var(--body);letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;}
img,video,svg{display:block;max-width:100%;}
/* 絵の高さは幅に合わせる（width・height の属性は縦横の比のため。古い CSS のまま読まれても、縦に引き伸ばされないように） */
img,video{height:auto;}
a{color:inherit;}
p a,li a,dd a{color:var(--mint-deep);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.22em;}
p a:hover,li a:hover,dd a:hover{color:var(--ink);text-decoration-color:var(--orange);}
::selection{background:var(--orange);color:var(--ink);}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:10px;}
h1,h2,h3{margin:0;font-weight:400;line-height:1.3;text-wrap:balance;}
.lb-in{width:min(var(--w),100% - 40px);margin:0 auto;}
.u-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* ── 告知の帯（set-version.py が #barVer を書き換える） ── */
.announce{background:var(--ink);color:#fff;font-size:13px;text-align:center;padding:7px 16px;}
.announce a{color:var(--mint);text-decoration:none;font-weight:700;margin-left:6px;}
.announce a:hover{text-decoration:underline;}
.announce b{color:var(--orange);font-weight:700;}

/* ── 上の帯 ── */
.head{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:var(--line) solid var(--ink);}
.head-in{display:flex;align-items:center;gap:20px;height:68px;}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:400 21px/1 var(--display);letter-spacing:.01em;}
/* ロゴは元の色のまま（ミントの吹き出し・橙の星）。白地では線が淡いので、少し大きめに置く */
.brand svg{width:40px;height:40px;}
.head nav{margin-left:auto;display:flex;align-items:center;gap:4px;}
.head nav a{text-decoration:none;font-weight:700;font-size:14.5px;padding:8px 13px;border-radius:999px;transition:background .2s;}
.head nav a:hover{background:var(--mint-soft);}
.head nav a[aria-current="page"]{background:var(--mint);}
.head nav a.nav-cta{background:var(--orange);border:var(--line) solid var(--ink);padding:6px 16px;margin-left:6px;}
.head nav a.nav-cta:hover{background:#ffcf98;}

/* ── 釦 ── */
.btn{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 26px;border-radius:999px;border:var(--line) solid var(--ink);
  font:700 16px/1 var(--body);text-decoration:none;color:var(--ink);background:var(--paper);cursor:pointer;
  box-shadow:0 5px 0 -1px var(--ink);transition:transform .18s var(--out),box-shadow .18s var(--out),background .2s;}
.btn:hover{transform:translateY(-2px);box-shadow:0 7px 0 -1px var(--ink);}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 -1px var(--ink);}
.btn-pri{background:var(--orange);}
.btn-mint{background:var(--mint);}
.btn svg{width:18px;height:18px;flex:none;}
.btns{display:flex;flex-wrap:wrap;gap:14px;}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none;}

/* ── 吹き出し（頁の部品の型。ロゴの吹き出しと同じ丸い角・太い線・しっぽ） ── */
.bub{position:relative;border:var(--line) solid var(--ink);border-radius:var(--r);background:var(--paper);}
/* しっぽ：45度に回した四角の右下の2辺だけ線を引き、下へ尖らせる（吹き出しの縁の線と1本につながる） */
.bub::after{content:"";position:absolute;left:var(--tail-x,44px);bottom:-12px;width:22px;height:22px;background:inherit;
  border:var(--line) solid var(--ink);border-top:0;border-left:0;border-radius:0 0 4px 0;transform:rotate(45deg);}
.bub.tail-r::after{left:auto;right:var(--tail-x,44px);}
.bub.no-tail::after{display:none;}

/* 星（ロゴの星） */
.star{fill:var(--orange);stroke:var(--ink);stroke-width:1.6;stroke-linejoin:round;}

/* ── 段 ── */
.sec{padding:clamp(72px,10vw,128px) 0;}
.sec-mint{background:var(--mint);}
.sec-soft{background:var(--mint-soft);}
.sec-ink{background:var(--ink);color:#fff;}
.h2{font:400 clamp(28px,4.2vw,46px)/1.3 var(--display);letter-spacing:.01em;}
.lead{font-size:clamp(16px,1.6vw,18px);color:var(--ink-2);max-width:40em;margin:18px 0 0;}
.sec-ink .lead{color:#c9d2dc;}
.sec-head{margin-bottom:clamp(36px,5vw,56px);}

/* ═══ トップ：はじめの段 ═══ */
.hero{position:relative;overflow:hidden;background:var(--mint-soft);border-bottom:var(--line) solid var(--ink);}
.hero-in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center;
  min-height:min(720px,calc(100svh - 104px));padding:clamp(48px,7vw,88px) 0 clamp(56px,7vw,96px);}
.hero h1{font:400 clamp(36px,5.8vw,78px)/1.18 var(--display);letter-spacing:-.005em;}
.hero h1 .ln{display:block;white-space:nowrap;}
.hero h1 .hl{position:relative;display:inline-block;}
.hero h1 .hl::before{content:"";position:absolute;left:-.08em;right:-.08em;bottom:.06em;height:.36em;background:var(--orange);
  border-radius:.2em;z-index:-1;transform-origin:0 50%;}
.hero h1 span{position:relative;z-index:0;}
.hero .lead{color:var(--ink);font-size:clamp(16px,1.8vw,19px);}
.hero .btns{margin-top:32px;}
.hero-who{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 0;padding:0;list-style:none;font-size:13.5px;font-weight:700;}
.hero-who li{display:flex;align-items:center;gap:6px;padding:4px 12px 4px 8px;border-radius:999px;background:var(--paper);border:1.5px solid var(--ink);}
.hero-who svg{width:16px;height:16px;}

/* 見せ場：いろいろなサイトのコメントが、吹き出しで弾んで1つの画面に集まる */
.stage{position:relative;height:clamp(380px,46vw,540px);}
.stage-screen{position:absolute;inset:0 0 0 6%;background:var(--mint);border:var(--line) solid var(--ink);border-radius:32px;
  box-shadow:var(--shadow);overflow:hidden;}
.stage-top{display:flex;align-items:center;gap:8px;height:44px;padding:0 16px;border-bottom:var(--line) solid var(--ink);background:var(--paper);
  font-weight:700;font-size:13px;}
.stage-top i{width:11px;height:11px;border-radius:50%;border:1.5px solid var(--ink);background:var(--orange);}
.stage-top i:nth-child(2){background:var(--mint);} .stage-top i:nth-child(3){background:var(--paper);}
.stage-top span{margin-left:auto;font-size:12px;color:var(--ink-2);}
/* 下は札（.stage-badge）のぶん空ける。いちばん新しいコメントが札に隠れないように */
.stage-feed{position:absolute;left:18px;right:18px;bottom:64px;top:62px;display:flex;flex-direction:column;justify-content:flex-end;gap:12px;overflow:hidden;
  -webkit-mask-image:linear-gradient(transparent,#000 56px);mask-image:linear-gradient(transparent,#000 56px);}
/* コメントは全部同じ形・同じ幅（左右交互・角の形ちがいで、形が変わって見えた・2026-11-01 作者）。動きは lab.js の 足す() */
.cm{display:flex;align-items:center;gap:10px;width:100%;flex:none;padding:10px 16px 10px 12px;font-size:15px;line-height:1.5;
  border:var(--line) solid var(--ink);border-radius:18px 18px 18px 6px;background:var(--paper);box-shadow:0 6px 14px -8px rgba(15,17,22,.35);}
.cm .tm{display:none;}
.cm .who{flex:none;font-size:11px;font-weight:700;line-height:1;padding:5px 8px;border-radius:999px;color:#fff;}
.cm .t{font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cm.gift{background:var(--orange);}
.s-yt{background:#e5302a;} .s-tw{background:#7a3ff0;} .s-tt{background:#111;} .s-nc{background:#4b4f58;} .s-kk{background:#1e8a34;} .s-tc{background:#2f6fe0;}.stage-note{position:absolute;right:16px;top:54px;font-size:11px;font-weight:700;color:var(--ink);background:var(--paper);
  border:1.5px solid var(--ink);border-radius:999px;padding:2px 9px;z-index:2;}
/* 舞台の外に浮く大きな星と、吹き出しの札 */
.stage-star{position:absolute;width:clamp(64px,8vw,104px);left:-1%;top:6%;z-index:3;animation:float 6s ease-in-out infinite;}
.stage-star.s2{width:clamp(36px,4vw,52px);left:auto;right:-2%;top:auto;bottom:10%;animation-delay:-2s;}
.stage-badge{position:absolute;left:-3%;bottom:-6%;margin:0;z-index:3;background:var(--orange);font:400 clamp(15px,1.7vw,19px)/1.35 var(--display);
  padding:14px 20px;--tail-x:30px;box-shadow:var(--shadow);}
@keyframes float{50%{transform:translateY(-10px) rotate(8deg);}}

/* ═══ トップ：3つの行き先 ═══ */
.doors{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(18px,2.4vw,28px);align-items:start;}
.door{display:flex;flex-direction:column;gap:14px;padding:clamp(24px,3vw,36px);text-decoration:none;color:var(--ink);
  box-shadow:var(--shadow);transition:transform .35s var(--pop),box-shadow .3s;}
/* 行き先の箱は、合わせても動かさない（.pop.on の transform:none が勝つので、浮かせる指定は効いていなかった。
   作者が「前のまま」と言ったのは、リノ猫が箱の上の縁からのぞく動きのこと・2026-11-01） */
.door h3{font:400 clamp(24px,2.8vw,34px)/1.25 var(--display);}
.door h3 a{text-decoration:none;}
.door p{margin:0;color:var(--ink-2);}
/* 「〜を見る →」は、合わせると丸い札の形が出る。リノ猫はその縁から出る（枠が無いと、体を隠す所が無くてぼやけて出た・2026-11-01 作者） */
.door .go{padding:6px 14px;margin-left:-16px;border:2px solid transparent;border-radius:999px;transition:background .2s,border-color .2s;}
.door .go:hover,a.door:hover .go{background:var(--paper);border-color:var(--ink);}
.door .go{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:8px;font-weight:700;text-decoration:none;}
.door .go svg{width:22px;height:22px;transition:transform .3s var(--pop);}
.door:hover .go svg{transform:translateX(6px);}
.door-ml{grid-column:span 7;grid-row:span 2;background:var(--mint);}
.door-web{grid-column:span 5;background:var(--orange);}
.door-docs{grid-column:span 5;background:var(--paper);}
.door p b{color:var(--ink);}

.door ul{margin:0 0 14px;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px;}
.door ul li{font-size:13.5px;font-weight:700;padding:3px 11px;border-radius:999px;background:rgba(255,255,255,.7);border:1.5px solid var(--ink);}
/* もりあげログの画面（check-video / check-zoom が #shotvid・.shotfig .frame・#zoom を見る） */
.shotfig{margin:6px 0 0;}
.shotfig .frame{display:block;width:100%;padding:0;border:var(--line) solid var(--ink);border-radius:18px;overflow:hidden;background:var(--ink);cursor:zoom-in;}
.shotfig video{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;}
.shotfig figcaption{font-size:13px;color:var(--ink);margin-top:8px;font-weight:700;}

/* ═══ つくったもの ═══ */
.works{display:grid;gap:clamp(22px,3vw,34px);}
.work-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:clamp(22px,4vw,56px);align-items:center;}
.work-row:nth-child(even) .work-pic{order:-1;}
.work-pic{border:var(--line) solid var(--ink);border-radius:22px;overflow:hidden;box-shadow:var(--shadow);background:var(--ink);}
.work-pic img{width:100%;height:auto;}
.work-kind{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;padding:3px 12px;border-radius:999px;background:var(--paper);border:1.5px solid var(--ink);}
.work-row h3{font:400 clamp(24px,3vw,36px)/1.3 var(--display);margin:12px 0 0;}
.work-row p{color:var(--ink-2);margin:12px 0 0;}
.work-row .btns{margin-top:22px;}
.soon{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;padding:22px 26px;background:var(--orange-soft);border-style:dashed;}
.soon svg{width:46px;height:46px;}
.soon-top{margin-top:clamp(24px,3vw,36px);}
.soon h3{font:700 18px/1.4 var(--body);}
.soon p{margin:4px 0 0;color:var(--ink-2);font-size:15px;}

/* ═══ おしらせ（gen-top-news.py が中身を作る） ═══ */
ol.news{list-style:none;margin:0;padding:0;display:grid;gap:16px;}
.news-item{display:grid;grid-template-columns:110px auto 1fr;gap:6px 18px;align-items:start;padding:20px 24px;background:var(--paper);
  border:var(--line) solid var(--ink);border-radius:20px;}
.news-item time{font:700 15px/1.6 var(--body);font-variant-numeric:tabular-nums;}
.news-tag{font-size:12px;font-weight:700;padding:2px 10px;border-radius:999px;border:1.5px solid var(--ink);background:var(--mint);white-space:nowrap;}
.news-tag.fix{background:var(--orange);}
.news-body h3{font-size:17px;font-weight:700;line-height:1.5;}
.news-body h3 a{text-decoration:none;color:var(--ink);}
.news-body h3 a:hover{text-decoration:underline;text-decoration-color:var(--orange);text-decoration-thickness:3px;}
.news-body p{margin:6px 0 0;font-size:14.5px;color:var(--ink-2);}
.news-body p b{color:var(--ink);}
.news-links{margin-top:6px;font-size:14px;}
.news-links a{color:var(--mint-deep);font-weight:700;}
.news-more{margin-top:26px;}

/* ═══ 提携（gen-partner-vykro.py が a.work を作る。いまのトップと同じ class） ═══ */
a.work{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:28px;align-items:center;padding:clamp(22px,3vw,34px);
  text-decoration:none;color:var(--ink);background:var(--paper);border:var(--line) solid var(--ink);border-radius:var(--r);box-shadow:var(--shadow);
  position:relative;overflow:hidden;transition:transform .35s var(--pop);}
a.work:hover{box-shadow:0 22px 40px -14px rgba(15,17,22,.38), 0 2px 6px rgba(15,17,22,.1);}
a.work .icon{width:52px;height:52px;border-radius:14px;background:var(--ink);padding:6px;}
a.work .tag{font-size:13px;font-weight:700;color:var(--mint-deep);margin-top:12px;}
a.work h3{font:400 clamp(22px,2.6vw,30px)/1.3 var(--display);margin-top:6px;}
a.work h3 .en{display:block;font:700 14px/1.6 var(--body);color:var(--ink-2);margin-top:4px;}
a.work p{color:var(--ink-2);font-size:15px;}
a.work .tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;}
a.work .tags li{font-size:13px;font-weight:700;padding:3px 11px;border-radius:999px;background:var(--mint-soft);border:1.5px solid var(--ink);}
a.work .go{display:inline-flex;margin-top:16px;font-weight:700;color:var(--mint-deep);}
a.work .vis{border:var(--line) solid var(--ink);border-radius:18px;overflow:hidden;}
a.work .vis img{width:100%;height:auto;}
a.work .sweep{display:none;}

/* ═══ スタジオ・支援 ═══ */
.studio{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:start;}
.studio p{color:#d7dee6;}
.studio .h2{color:#fff;}
.support{padding:28px;background:var(--paper);color:var(--ink);--tail-x:56px;}
.support h3{font:400 22px/1.4 var(--display);}
.support p{color:var(--ink-2);margin:10px 0 18px;font-size:15px;}

/* ═══ 締め ═══ */
.end{padding:clamp(72px,10vw,120px) 0;background:var(--orange);border-top:var(--line) solid var(--ink);text-align:center;position:relative;overflow:hidden;}
.end .h2{font-size:clamp(30px,5vw,56px);}
.end p{margin:16px auto 0;max-width:34em;}
.end .btns{justify-content:center;margin-top:30px;}
.end-stars{position:absolute;inset:0;pointer-events:none;}
.end-stars svg{position:absolute;width:56px;}
.end-stars svg:nth-child(1){left:8%;top:18%;transform:rotate(-14deg);}
.end-stars svg:nth-child(2){right:10%;top:26%;width:80px;transform:rotate(12deg);}
.end-stars svg:nth-child(3){left:16%;bottom:14%;width:34px;}
.end-stars .star{fill:var(--paper);}

/* ── 下の帯 ── */
footer.foot{background:var(--ink);color:#c9d2dc;padding:56px 0 28px;font-size:14px;}
.foot-top{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:28px;}
.foot .brand{color:#fff;}
.foot p{margin:12px 0 0;}
.foot-col h4{margin:0 0 10px;font-size:13px;color:var(--mint);letter-spacing:.08em;}
.foot-col ul{list-style:none;margin:0;padding:0;display:grid;gap:6px;}
.foot-col a{color:#fff;text-decoration:none;}
.foot-col a:hover{color:var(--orange);text-decoration:underline;}
.foot-bottom{display:flex;flex-wrap:wrap;gap:10px 20px;justify-content:space-between;margin-top:40px;padding-top:20px;border-top:1px solid #2a2f3a;font-size:13px;}
.foot-bottom a{color:#c9d2dc;}

/* ── 画面の拡大（check-zoom が #zoom.is-open・#zoomImg を見る） ── */
.zoom{position:fixed;inset:0;z-index:100;display:none;place-items:center;padding:24px;background:rgba(15,17,22,.82);}
.zoom.is-open{display:grid;}
.zoom img{max-width:min(1400px,100%);max-height:88vh;border-radius:14px;border:var(--line) solid var(--paper);}
.zoom button{position:absolute;top:18px;right:18px;width:46px;height:46px;border-radius:50%;border:var(--line) solid var(--ink);background:var(--paper);cursor:pointer;
  font:700 22px/1 var(--body);}

/* ── 出方：段に入ったら、吹き出しがぽんと出る（1種類だけ。動きを減らす設定では最初から出す） ── */
.js .pop{opacity:0;transform:scale(.88) translateY(18px);transition:opacity .45s ease,transform .7s var(--pop);}
.js .pop.on{opacity:1;transform:none;}
.js .pop.d1{transition-delay:.08s;} .js .pop.d2{transition-delay:.16s;} .js .pop.d3{transition-delay:.24s;}
.js .hero h1 .hl::before{transform:scaleX(0);transition:transform .8s var(--out) .45s;}
.js .hero.on h1 .hl::before{transform:none;}
@media (prefers-reduced-motion:reduce){
  .js .pop{opacity:1;transform:none;transition:none;}
  .js .hero h1 .hl::before{transform:none;transition:none;}
  .cm.in,.cm.out{animation:none;}
}

/* ═══ 制作のご依頼 ═══ */
.p-hero{background:var(--orange);border-bottom:var(--line) solid var(--ink);overflow:hidden;}
.p-hero .lb-in{padding:clamp(56px,8vw,104px) 0 clamp(56px,7vw,88px);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(24px,4vw,60px);align-items:center;}
.p-hero h1{font:400 clamp(34px,5.4vw,68px)/1.2 var(--display);}
.p-hero .lead{color:var(--ink);}
.p-hero .btns{margin-top:28px;}
.p-hero-pic{transform:rotate(2deg);}
.p-hero-pic .work-pic{transform:rotate(-1deg);}
.makes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,28px);}
.make{padding:26px;}
.make:nth-child(1){background:var(--mint);} .make:nth-child(2){background:var(--paper);} .make:nth-child(3){background:var(--orange-soft);}
.make svg{width:44px;height:44px;}
.make h3{font:400 22px/1.4 var(--display);margin-top:12px;}
.make p{margin:8px 0 0;color:var(--ink-2);font-size:15px;}
.flow{list-style:none;margin:0;padding:0;display:grid;gap:14px;counter-reset:f;}
.flow li{counter-increment:f;display:grid;grid-template-columns:64px 1fr;gap:18px;align-items:center;padding:18px 22px;background:var(--paper);
  border:var(--line) solid var(--ink);border-radius:20px;}
.flow li::before{content:counter(f);display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--mint);
  border:var(--line) solid var(--ink);font:400 22px/1 var(--display);}
.flow h3{font-size:18px;font-weight:700;}
.flow p{margin:2px 0 0;color:var(--ink-2);font-size:15px;}
.case{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center;}
.case-name{margin:10px 0 0;font:400 clamp(20px,2.4vw,28px)/1.4 var(--display);color:var(--mint);}
.case dl{margin:18px 0 0;display:grid;grid-template-columns:auto 1fr;gap:8px 18px;font-size:15px;}
.case dt{font-weight:700;}
.case dd{margin:0;color:#d7dee6;}
.case-btns{margin-top:26px;}
.case .work-pic{transform:rotate(-1.5deg);}
.case-pics{display:grid;gap:18px;}
.case-pics .work-pic:nth-child(2){transform:rotate(1.5deg) translateX(8%);width:80%;}
.faq{display:grid;gap:12px;max-width:860px;}
.faq details{background:var(--paper);border:var(--line) solid var(--ink);border-radius:18px;padding:0 22px;}
.faq summary{cursor:pointer;list-style:none;font-weight:700;padding:16px 0;display:flex;justify-content:space-between;gap:16px;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary{position:relative;padding-right:30px;}
.faq summary::before,.faq summary::after{content:"";position:absolute;right:4px;top:50%;width:14px;height:2.5px;margin-top:-1.25px;border-radius:2px;background:var(--ink);transition:transform .3s var(--pop);}
.faq summary::after{transform:rotate(90deg);}
.faq details[open] summary::after{transform:rotate(0deg);}
.faq details p{margin:0 0 16px;color:var(--ink-2);}

/* ═══ お問い合わせ（contact.js が送る） ═══ */
.contact-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:clamp(28px,5vw,64px);align-items:start;}
.contact-side .bub{padding:22px 24px;background:var(--mint);margin-bottom:34px;}
.contact-side .bub+.bub{background:var(--orange-soft);}
.contact-side h2{font:700 17px/1.4 var(--body);}
.contact-side p,.contact-side li{font-size:15px;color:var(--ink-2);}
.contact-side ul{margin:8px 0 0;padding-left:1.2em;}
.cform{padding:clamp(22px,3vw,36px);background:var(--paper);border:var(--line) solid var(--ink);border-radius:var(--r);box-shadow:var(--shadow);}
.cf-row{margin-bottom:22px;}
.cf-row>label{display:flex;align-items:center;gap:8px;font-weight:700;margin-bottom:8px;}
.req{font-size:11px;font-weight:700;padding:1px 8px;border-radius:999px;background:var(--orange);border:1.5px solid var(--ink);}
.cform input[type=text],.cform input[type=email],.cform select,.cform textarea{width:100%;font:500 16px/1.6 var(--body);color:var(--ink);
  background:var(--paper);border:var(--line) solid var(--ink);border-radius:14px;padding:11px 14px;}
.cform select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:calc(100% - 22px) 52%,calc(100% - 16px) 52%;background-size:6px 6px;background-repeat:no-repeat;padding-right:40px;}
.cform textarea{min-height:200px;resize:vertical;}
/* 開いた一覧も吹き出しの形に（2026-11-01 作者）。一覧まで見た目を変えられるのは base-select の分かるブラウザ（Chrome・Edge）だけ。
   分からないブラウザは、閉じた欄だけこの見た目で、一覧はそのブラウザの標準のまま（選ぶ・送るは変わらない） */
@supports (appearance: base-select) {
  .cform select,.cform select::picker(select){appearance:base-select;}
  .cform select{display:flex;align-items:center;background-image:none;padding-right:14px;cursor:pointer;}
  .cform select::picker-icon{content:"";width:9px;height:9px;margin-left:auto;border-right:2.5px solid var(--ink);border-bottom:2.5px solid var(--ink);
    transform:translateY(-2px) rotate(45deg);transition:transform .25s var(--pop);}
  .cform select:open::picker-icon{transform:translateY(2px) rotate(225deg);}
  .cform select::picker(select){margin-top:8px;padding:6px;border:var(--line) solid var(--ink);border-radius:18px;background:var(--paper);
    box-shadow:var(--shadow);opacity:0;transform:translateY(-6px) scale(.98);transform-origin:50% 0;
    transition:opacity .18s,transform .3s var(--pop),overlay .3s allow-discrete,display .3s allow-discrete;}
  .cform select:open::picker(select){opacity:1;transform:none;}
  @starting-style{ .cform select:open::picker(select){opacity:0;transform:translateY(-6px) scale(.98);} }
  .cform select option{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:12px;font:700 15px/1.4 var(--body);color:var(--ink);cursor:pointer;}
  .cform select option:hover,.cform select option:focus-visible{background:var(--mint-soft);outline:none;}
  .cform select option:checked{background:var(--mint);}
  .cform select option::checkmark{content:"";order:1;margin-left:auto;width:12px;height:7px;border-left:2.5px solid var(--ink);border-bottom:2.5px solid var(--ink);transform:rotate(-45deg) translateY(-2px);}
  .cform select option:not(:checked)::checkmark{visibility:hidden;}
  .cform select option[value=""]{color:var(--ink-2);font-weight:500;}
}
.cform input:focus,.cform select:focus,.cform textarea:focus{outline:none;box-shadow:0 0 0 4px var(--mint);}
.cform ::placeholder{color:#5c6573;}
.hint{font-size:13px;color:var(--ink-2);margin-top:6px;}
.cf-row>.cf-drop{display:grid;place-items:center;gap:4px;text-align:center;padding:22px;border:var(--line) dashed var(--ink);border-radius:18px;background:var(--mint-soft);cursor:pointer;}
.cf-drop.drag{background:var(--mint);}
.cf-drop .di{font:400 26px/1 var(--display);}
.cf-drop .dt{font-weight:700;}
.cf-drop .ds{font-size:13px;color:var(--ink-2);}
.cf-drop input{position:absolute;width:1px;height:1px;opacity:0;}
.cf-files{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px;}
.cf-file{display:flex;align-items:center;gap:10px;padding:6px 10px;border:1.5px solid var(--ink);border-radius:12px;font-size:14px;}
.cf-file .fthumb{width:36px;height:36px;object-fit:cover;border-radius:8px;}
.cf-file .fn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cf-file .fs{color:var(--ink-2);}
.cf-file .fx{border:0;background:none;font:700 18px/1 var(--body);cursor:pointer;color:var(--ink);}
.cf-hp{position:absolute;left:-9999px;}
.cf-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px;}
.cf-msg{font-weight:700;}
.cf-msg.ok{color:var(--mint-deep);}
.cf-msg.err{color:#b42318;}
.cf-alt a{white-space:nowrap;}
.cf-privacy,.cf-alt{font-size:13.5px;color:var(--ink-2);margin:18px 0 0;}

/* ═══ 製品ページ ═══ */
.u-hidden{display:none !important;}
.lead.ink{color:var(--ink);}
.ml-hero-in{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(24px,4vw,56px);align-items:center;padding:clamp(44px,6vw,80px) 0 clamp(52px,6vw,88px);}
.ml-hero h1{font:400 clamp(36px,5.2vw,70px)/1.2 var(--display);}
.ml-hero h1 .ln{display:block;white-space:nowrap;}
.ml-hero .lead b{color:var(--ink);}
.ml-kind{display:inline-block;margin:16px 0 0;padding:6px 14px;font-weight:700;font-size:clamp(14px,1.5vw,16px);background:var(--paper);border:var(--line) solid var(--ink);border-radius:999px;}
.ml-kind b{color:var(--mint-deep);}
.deck{min-width:0;}
/* はじめの段の右：コメントの並びをほぼ原寸で（押すと画面の全体を大きく。体験版は下の段・#handscreen） */
.ml-shot{margin:0 auto;max-width:560px;width:100%;}
.ml-shot-btn{display:block;width:100%;padding:0;border:var(--line) solid var(--ink);border-radius:20px;overflow:hidden;background:var(--ink);
  box-shadow:var(--shadow);cursor:zoom-in;transition:box-shadow .3s;}   /* 傾けると字がにじむので、まっすぐ置く */
.ml-shot-btn:hover{box-shadow:0 22px 40px -14px rgba(15,17,22,.38), 0 2px 6px rgba(15,17,22,.1);}
.ml-shot-btn img{width:100%;height:auto;}
.ml-shot figcaption{margin-top:12px;font-size:13px;font-weight:700;text-align:center;color:var(--ink-2);}
/* 体験版はパソコン向けの画面なので、頁の幅いっぱい（半分の幅では小さすぎた・2026-11-01 作者）。
   写真のときは写真と同じ 16:9 で全体を見せ（16:10 だと左右が切れた）、体験版を開いたときだけ 16:10 に広げる（作者「画像も確認して」） */
.ml-try .deck-stage{aspect-ratio:16/9;}
.ml-try .deck-stage.is-demo{aspect-ratio:16/10;}
.ml-try .deck-stage img{object-fit:contain;object-position:50% 50%;}
.ml-try .deck-tabs{justify-content:center;}
.ml-try .deck-cap{text-align:center;}
.deck-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;}
.deck-tabs button{font:700 13.5px/1 var(--body);padding:9px 14px;border-radius:999px;border:1.5px solid var(--ink);background:var(--paper);color:var(--ink);cursor:pointer;transition:background .2s;}
.deck-tabs button:hover{background:var(--mint-soft);}
.deck-tabs button[aria-selected="true"]{background:var(--ink);color:#fff;}
.deck-tabs .deck-try{background:var(--orange);}
.deck-tabs .deck-try[aria-selected="true"]{background:var(--ink);color:var(--orange);}
.deck-stage{position:relative;border:var(--line) solid var(--ink);border-radius:20px;overflow:hidden;background:var(--ink);box-shadow:var(--shadow);aspect-ratio:16/9;}
.deck-stage img{width:100%;height:100%;object-fit:cover;cursor:zoom-in;}
.deck-stage img[hidden]{display:none;}   /* 体験版を開いたら写真は隠す（共通の img{display:block} が hidden に勝っていた） */
.deck-stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#fff;}
.deck-cap{font-size:14px;color:var(--ink-2);margin:12px 0 0;}
.feats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.6vw,32px);}
.feat{padding:clamp(22px,2.6vw,32px);}
.feat:nth-child(1){background:var(--mint);} .feat:nth-child(2){background:var(--orange);} .feat:nth-child(3){background:var(--paper);} .feat:nth-child(4){background:var(--mint-soft);}
.feat h3{font:400 clamp(20px,2.2vw,26px)/1.35 var(--display);}
.feat ul{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:6px;}
.feat li{position:relative;padding-left:24px;font-weight:700;font-size:15px;}
.feat li::before{content:"";position:absolute;left:2px;top:.55em;width:12px;height:12px;border-radius:50%;background:var(--paper);border:2px solid var(--ink);}
.feats-more{margin-top:34px;}
.site-chips{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0;font:400 18px/1 var(--display);}
.site-chips a{font:700 15px/1 var(--body);text-decoration:none;color:var(--ink);background:var(--paper);border:var(--line) solid var(--ink);border-radius:999px;padding:11px 18px;
  transition:transform .3s var(--pop),background .2s;}
.site-chips a:hover{background:var(--orange);}
.sites-note{margin:22px 0 0;color:var(--ink);font-size:15px;}
.sites-note a{color:var(--ink);font-weight:700;}
.prices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.6vw,32px);align-items:start;}
.price{padding:clamp(24px,3vw,36px);}
.price-pro{background:var(--mint);}
.price h3{font:400 22px/1.3 var(--display);}
.price .amt{font:400 clamp(40px,5vw,60px)/1 var(--display);margin:14px 0 0;}
.price .amt small{font:700 15px/1 var(--body);}
.price .pnote{color:var(--ink-2);font-size:14.5px;margin:12px 0 0;}
.price-pro .pnote{color:var(--ink);}
.price ul{margin:18px 0 0;padding:0;list-style:none;display:grid;gap:8px;border-top:2px dashed var(--ink);padding-top:16px;}
.price li{position:relative;padding-left:26px;font-size:15px;font-weight:700;}
.price li::before{content:"";position:absolute;left:2px;top:.3em;width:15px;height:9px;border-left:3px solid var(--ink);border-bottom:3px solid var(--ink);transform:rotate(-45deg);}
.team-note{margin-top:clamp(28px,3vw,40px);padding:22px 26px;background:var(--orange-soft);}
.team-note h3{font:700 18px/1.4 var(--body);}
.team-note p{margin:8px 0 0;font-size:15px;color:var(--ink-2);}
.team-note p a{margin-right:14px;}
.terms{margin-top:24px;border-top:var(--line) solid var(--ink);padding-top:14px;}
.terms summary{cursor:pointer;font-weight:700;}
.terms div{margin-top:12px;font-size:13.5px;line-height:1.9;color:var(--ink-2);}
.grow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,24px);}
.grow-card{position:relative;display:flex;flex-direction:column;gap:8px;padding:22px;background:var(--paper);border:var(--line) solid var(--ink);border-radius:20px;}
.grow-card.is-latest{background:var(--orange);}
.grow-head{display:flex;align-items:center;gap:12px;}
.grow-ver{font:400 20px/1 var(--display);}
.grow-head time{font-size:13px;font-weight:700;color:var(--ink-2);}
.grow-card.is-latest .grow-head time{color:var(--ink);}
.grow-card h3{font-size:16px;font-weight:700;line-height:1.5;}
.grow-card p{margin:0;font-size:14px;color:var(--ink-2);}
.grow-card.is-latest p{color:var(--ink);}
.grow-card a{margin-top:auto;font-weight:700;font-size:14px;color:var(--ink);}
.pambs{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;}
a.pamb{position:relative;display:grid;grid-template-columns:72px 1fr;grid-template-rows:auto auto auto;column-gap:16px;align-items:center;padding:16px;text-decoration:none;color:var(--ink);
  background:var(--paper);border:var(--line) solid var(--ink);border-radius:20px;transition:transform .3s var(--pop),background .2s;}
a.pamb:hover{background:var(--mint-soft);}
a.pamb img{grid-row:1 / 4;width:72px;height:72px;border-radius:50%;border:var(--line) solid var(--ink);object-fit:cover;}
.pamb-name{font:700 16px/1.4 var(--body);}
.pamb-meta{font-size:12.5px;line-height:1.5;color:var(--ink-2);margin-top:4px;}
.pamb-go{font-size:13px;font-weight:700;color:var(--mint-deep);margin-top:4px;}
.ppart-wrap{margin-top:clamp(24px,3vw,36px);}
a.ppart{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(18px,3vw,36px);align-items:center;padding:clamp(18px,2.4vw,26px);text-decoration:none;color:var(--ink);
  background:var(--mint);border:var(--line) solid var(--ink);border-radius:var(--r);box-shadow:var(--shadow);transition:transform .35s var(--pop);}
a.ppart:hover{box-shadow:0 22px 40px -14px rgba(15,17,22,.38), 0 2px 6px rgba(15,17,22,.1);}
.ppart-art{display:block;border:var(--line) solid var(--ink);border-radius:16px;overflow:hidden;}
.ppart-art img{width:100%;height:auto;}
.ppart-body{display:grid;gap:6px;}
.ppart-name{font:400 clamp(22px,2.6vw,30px)/1.3 var(--display);}
.ppart-meta{font-size:15px;color:var(--ink);}
.ppart-go{font-weight:700;}
.dl{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(20px,3vw,36px);align-items:start;}
.dl-card{padding:clamp(26px,3.4vw,44px);}
.dl-card .btns{margin-top:26px;}
.dl-meta{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px;}
.dl-meta li{font-size:13px;font-weight:700;padding:4px 12px;border-radius:999px;border:1.5px solid var(--ink);background:var(--mint-soft);}
.dl-note{margin:18px 0 0;font-size:13.5px;color:var(--ink-2);}
.dc{padding:clamp(24px,3vw,34px);background:var(--ink);color:#fff;--tail-x:56px;}
.dc h3{font:400 23px/1.4 var(--display);}
.dc p{margin:10px 0 20px;font-size:15px;color:#d7dee6;}
.dc p b{color:#fff;}

/* ── マスコットのリノ猫（lab.js の リノ猫()）。押せる所の上の縁の向こうから、顔をのぞかせる ── */
.neko{position:absolute;z-index:40;overflow:hidden;pointer-events:none;left:-400px;top:-400px;width:56px;height:60px;}
.neko.fixed{position:fixed;z-index:60;}
/* 絵は枠のまんなかに置き、出る向きに合わせて回す。translateY は回す前の向き（猫の下向き）で数えるので、
   どの向きでも「102% で隠れる・36% で口元まで・8% で開けた口まで」が同じ数で済む */
.neko img{position:absolute;left:50%;top:50%;max-width:none;--r:0deg;--p:102%;
  transform:translate(-50%,-50%) rotate(var(--r)) translateY(var(--p));transition:transform .32s cubic-bezier(.4,0,.6,1);}
.neko.n-right img{--r:90deg;} .neko.n-left img{--r:-90deg;} .neko.n-down img{--r:180deg;}
.neko.jump img{transition:none !important;}
.neko.gone{visibility:hidden;}
/* 口元（絵の上から約55%）まで出す。押したら開けた口（約67%）まで見えるように */
.neko.on img{--p:34%;transition:transform .42s var(--pop);}
.neko.pop img{--p:8%;transition:transform .36s var(--pop);}
@media (prefers-reduced-motion:reduce){ .neko img{transition:none !important;} }
/* リノ猫の吹き出し（ロゴと同じ、角の丸い吹き出し。しっぽは猫の口のほうへ） */
.neko-say{position:absolute;z-index:61;pointer-events:none;left:-400px;top:-400px;white-space:nowrap;
  font:700 13px/1 var(--body);color:var(--ink);background:var(--paper);border:2px solid var(--ink);border-radius:14px;padding:8px 12px;
  box-shadow:0 6px 14px -6px rgba(15,17,22,.35);opacity:0;transform:scale(.6) translateY(6px);transform-origin:0 100%;
  transition:opacity .15s,transform .15s;}
/* しっぽ：45度に回した四角の2辺だけ線を引く。猫のいる側へ向ける（lab.js の 言う() が t-○○ を付ける） */
.neko-say::after{content:"";position:absolute;width:10px;height:10px;background:inherit;border:2px solid var(--ink);border-top:0;border-left:0;}
.neko-say.t-bl::after{left:10px;bottom:-7px;transform:rotate(45deg);}
.neko-say.t-br::after{right:10px;bottom:-7px;transform:rotate(45deg);}
.neko-say.t-tl::after{left:10px;top:-7px;transform:rotate(-135deg);}
.neko-say.t-tr::after{right:10px;top:-7px;transform:rotate(-135deg);}
.neko-say.t-l::after{left:-7px;top:calc(50% - 5px);transform:rotate(135deg);}
.neko-say.t-r::after{right:-7px;top:calc(50% - 5px);transform:rotate(-45deg);}
.neko-say.t-br,.neko-say.t-r{transform-origin:100% 100%;}
.neko-say.t-tl{transform-origin:0 0;} .neko-say.t-tr{transform-origin:100% 0;}
.neko-say.t-l{transform-origin:0 50%;} .neko-say.t-r{transform-origin:100% 50%;}
.neko-say.on{opacity:1;transform:none;transition:opacity .2s .12s,transform .38s var(--pop) .12s;}
@media (prefers-reduced-motion:reduce){ .neko-say,.neko-say.on{transition:none;transform:none;} }

/* ── スマホのメニュー（menu.css は暗い頁向け。明るい頁では吹き出しの形にそろえる） ── */
.mmenu-btn{border:var(--line) solid var(--ink);border-radius:14px;color:var(--ink);background:var(--mint);}
.mmenu-btn:hover{border-color:var(--ink);background:var(--orange);}
.mmenu{background:var(--paper);border-left:var(--line) solid var(--ink);box-shadow:none;}
html.mmenu-open .mmenu{box-shadow:-18px 0 40px rgba(15,17,22,.22);}
.mmenu-ttl{color:var(--ink-2);}
.mmenu a{color:var(--ink);font-weight:700;border-bottom:1px solid #e6ebef;}
.mmenu a small{color:var(--ink-2);font-weight:500;}
.mmenu a:hover{background:var(--mint-soft);}
.mmenu a[aria-current="page"]{color:var(--mint-deep);}
.mmenu-sep{background:#e6ebef;}
.mmenu-back{background:rgba(15,17,22,.45);}

/* ── 狭い画面 ── */
@media (max-width:1000px){
  .hero-in,.p-hero .lb-in,.case,.studio{grid-template-columns:1fr;}
  .stage{height:420px;}
  .door-ml,.door-web,.door-docs{grid-column:1 / -1;grid-row:auto;}
  .work-row{grid-template-columns:1fr;}
  .work-row:nth-child(even) .work-pic{order:0;}
  a.work{grid-template-columns:1fr;}
  .makes{grid-template-columns:1fr;}
  .contact-wrap{grid-template-columns:1fr;}
  .contact-wrap .cform{order:-1;}
  .foot-top{grid-template-columns:1fr 1fr;}
  .ml-hero-in,.prices,.dl,a.ppart{grid-template-columns:1fr;}
  .grow{grid-template-columns:1fr;}
}
@media (max-width:700px){
  .feats{grid-template-columns:1fr;}
}
@media (max-width:560px){
  .lb-in{width:calc(100% - 32px);}
  .head-in{height:60px;}
  .brand{font-size:18px;} .brand svg{width:34px;height:34px;}
  .stage{height:380px;}
  .stage-screen{inset:0;}
  .stage-badge{left:4%;bottom:-4%;}
  .news-item{grid-template-columns:auto 1fr;padding:18px;}
  .news-body{grid-column:1 / -1;}
  .btn{min-height:50px;padding:0 22px;}
  .btns .btn{flex:1 1 auto;justify-content:center;}
  .foot-top{grid-template-columns:1fr 1fr;}
  .flow li{grid-template-columns:48px 1fr;padding:14px 16px;}
  .flow li::before{width:42px;height:42px;font-size:18px;}
  .end{padding-top:96px;}
  .end-stars svg:nth-child(1){left:16px;top:22px;width:34px;}
  .end-stars svg:nth-child(2){right:16px;top:14px;width:46px;}
  .end-stars svg:nth-child(3){display:none;}
  .foot-top>div:first-child{grid-column:1 / -1;}
  .deck-stage{aspect-ratio:4/5;}
  .deck-stage img{object-position:0 0;}
}