/* RECOA WEB の LP v0.3 — 見た目(2026-10-07 ショウ/Opus)
   レコア本体(デザイン指針 v1)の文法に戻した: 温かい白・ベージュの面・白いカード(角丸16・薄い影)・黒い面は1つ・オレンジは点と主ボタンと円だけ。
   書体 = Noto Sans JP + Archivo(本体と同じ)。平面が基本。動きは小さく、意味のある所だけ。
   v0.2 からの主な変更: 書体と形を本体に合わせた / 「SECTION 番号+線」の見出しをやめた / 文字の影の立体をやめた /
   10 枚のカードの見本帳 → 一つずつ大きく見せる舞台に / 実績(森工業)を主役に */

/* ---------- トークン ---------- */
:root{
  --bg:#FFFEFB; --beige:#F6F1EA; --card:#FFFFFF; --tile:#F1EBE1; --ink:#1F1614; --sub:#6B645C; --line:rgba(31,22,20,.09);
  --or:#FF4F00; --or-pale:#FFE9DD;
  --r-s:8px; --r-m:16px; --r-l:28px; --pill:999px;
  --sh-1:0 2px 12px rgba(31,22,20,.06); --sh-2:0 12px 32px rgba(31,22,20,.12);
  --jp:"Noto Sans JP","Hiragino Sans","Yu Gothic UI",Meiryo,sans-serif;
  --en:"Archivo","Helvetica Neue",Arial,sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);
  --gut:20px; --maxw:1136px;
}
*{box-sizing:border-box; min-width:0}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
html.nomotion{scroll-behavior:auto}
html,body{overflow-x:clip}
body{margin:0; background:var(--bg); color:var(--ink); font:400 16px/1.8 var(--jp); overflow-wrap:break-word}
img,svg,video{max-width:100%; display:block}
a{color:inherit}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
h1,h2,h3,summary,.lead,.lead2,.panel-h p{word-break:auto-phrase; text-wrap:pretty}
ul,ol{padding:0; list-style:none}
button{font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer}
input,textarea,select{font:inherit; color:inherit}
.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut)}
.en{font-family:var(--en); font-variant-numeric:tabular-nums; letter-spacing:-.01em}
:focus-visible{outline:3px solid var(--ink); outline-offset:3px; border-radius:8px}
.ic{width:24px; height:24px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}

/* ---------- 確認用の帯・上の帯 ---------- */
.pv{background:var(--ink); color:#fff; font:500 12.5px/1.5 var(--jp); text-align:center; padding:7px var(--gut)}
.hd{position:sticky; top:0; z-index:30; background:rgba(255,254,251,.92); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); transition:box-shadow .2s}
.hd.is-scrolled{box-shadow:0 1px 0 var(--line)}
html.is-shot .hd{position:static}
.hd .wrap{display:flex; align-items:center; justify-content:space-between; height:68px; gap:16px}
.logo{font:800 22px/1 var(--en); letter-spacing:-.02em; display:inline-flex; align-items:center; text-decoration:none; white-space:nowrap}
.logo i{width:.7em; height:.7em; border-radius:50%; background:var(--or); margin:0 .05em}
.logo small{font:700 12px/1 var(--en); margin-left:8px; padding:4px 8px; border-radius:var(--pill); background:var(--or-pale); letter-spacing:.04em}
.nav{display:none; align-items:center; gap:2px}
.nav a{display:inline-flex; align-items:center; height:44px; padding:0 12px; text-decoration:none; font:500 14.5px/1 var(--jp); border-radius:var(--pill); transition:background .2s}
.nav a:hover{background:var(--beige)}

/* ---------- ボタン ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:56px; padding:0 30px; border:0; border-radius:var(--pill);
  background:var(--or); color:var(--ink); font:700 16px/1.2 var(--jp); text-decoration:none; white-space:nowrap; cursor:pointer;
  transition:transform .15s var(--ease), box-shadow .2s var(--ease), background .2s}
.btn:active{transform:translateY(1px) scale(.99)}
.btn--s{min-height:44px; padding:0 20px; font-size:14px}
.btn--ink{background:var(--ink); color:#fff}
.btn--line{background:var(--card); box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn[disabled]{opacity:.4; pointer-events:none}
@media (hover:hover){ .btn:hover{box-shadow:var(--sh-2)} .btn--line:hover{box-shadow:inset 0 0 0 1.5px var(--ink), var(--sh-2)} }
.tlink{display:inline-flex; align-items:center; min-height:44px; font:700 15px/1.4 var(--jp); text-decoration:underline; text-underline-offset:6px; text-decoration-thickness:1.5px}
.tlink:hover{text-decoration-color:var(--or)}

/* ---------- 区画と見出し(本体と同じ: 小さな英字ラベル + 大きな日本語) ---------- */
.sec{padding-block:72px}
.beige{background:var(--beige)}
.dark{background:var(--ink); color:#fff}
.lbl{display:block; font:800 11.5px/1 var(--en); letter-spacing:.14em; color:var(--or); text-transform:uppercase}
.h2{font:900 clamp(26px, 4.4vw, 40px)/1.35 var(--jp); letter-spacing:.01em; margin-top:12px; text-wrap:balance}
.lead2{margin-top:14px; color:var(--sub); max-width:36em}
.dark .lead2{color:rgba(255,255,255,.72)}
.head{margin-bottom:36px}

/* ---------- 出現(1回・小さく) ---------- */
.rv{opacity:0; transform:translateY(18px); transition:opacity .6s var(--ease), transform .6s var(--ease)}
.rv.is-in{opacity:1; transform:none}
html.nomotion .rv{opacity:1; transform:none; transition:none}

/* ---------- 最初の画面 ---------- */
.hero{padding-block:28px 64px; overflow:hidden}
.hero .wrap{display:grid; gap:44px}
.tag{display:inline-flex; align-items:center; gap:8px; height:30px; padding:0 14px; border-radius:var(--pill); background:var(--or-pale); font:700 13px/1 var(--jp)}
.tag::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--or)}
.hero h1{font:900 clamp(30px, 8.3vw, 52px)/1.3 var(--jp); letter-spacing:.005em; margin-top:18px}
.hero h1 > span{display:block; white-space:nowrap}
.hl{position:relative; display:inline; background:linear-gradient(var(--or), var(--or)) 0 88% / 100% .3em no-repeat; padding-inline:.02em}
html.js:not(.nomotion) .hl{background-size:0% .3em; transition:background-size .9s var(--ease) .35s}
html.is-loaded .hl{background-size:100% .3em}
.hero .lead{margin-top:20px; max-width:31em; font-size:clamp(15.5px, 1.5vw, 17px)}
.cta{display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px; margin-top:28px}
.pts{display:flex; flex-wrap:wrap; gap:6px 18px; margin-top:20px; font:500 13.5px/1.6 var(--jp); color:var(--sub)}
.pts li{display:inline-flex; align-items:center; gap:7px}
.pts li::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--or)}

/* 端末の絵: 橙の円 + ブラウザ + スマホ + 窓口の札 */
.art{position:relative; min-height:360px}
.art .disc{position:absolute; width:min(76vw, 420px); aspect-ratio:1; border-radius:50%; background:var(--or); right:-14%; top:2%}
.browser{position:absolute; left:0; top:10%; width:88%; border-radius:14px; background:var(--card); box-shadow:var(--sh-2); overflow:hidden; border:1px solid var(--line)}
.browser .bar{height:30px; display:flex; align-items:center; gap:6px; padding:0 12px; background:#F4EFE8; border-bottom:1px solid var(--line)}
.browser .bar i{width:8px; height:8px; border-radius:50%; background:#D8D0C5}
.browser .bar i:first-child{background:var(--or)}
.browser .bar span{margin-left:10px; flex:1; height:18px; border-radius:var(--pill); background:#fff; font:500 10.5px/18px var(--en); color:var(--sub); padding:0 10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.screen{position:relative; aspect-ratio:16/10; background:var(--tile); overflow:hidden}
.screen img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top; transition:opacity .7s var(--ease)}
.screen img.is-off{opacity:0}
.phone{position:absolute; right:3%; bottom:-2%; width:30%; max-width:150px; border-radius:24px; background:var(--ink); padding:6px; box-shadow:var(--sh-2)}
.phone .screen{aspect-ratio:9/19.5; border-radius:18px}
.note{position:absolute; left:4%; bottom:-4%; width:min(58%, 250px); background:var(--card); border-radius:var(--r-m); box-shadow:var(--sh-2); padding:13px 15px; display:grid; gap:7px; transform:rotate(-2deg)}
.note .who{display:flex; align-items:center; gap:7px; font:700 11.5px/1 var(--jp); color:var(--sub)}
.note .who::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--or)}
.note p{font:500 13px/1.55 var(--jp)}
.note b{justify-self:start; height:30px; padding:0 14px; border-radius:var(--pill); background:var(--or); font:700 12px/30px var(--jp)}
.swc{position:absolute; left:0; top:calc(10% - 46px); display:flex; align-items:center; gap:8px}
.swc .now{display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 12px; border-radius:var(--pill); background:var(--card); box-shadow:var(--sh-1); font:700 12px/1 var(--jp); white-space:nowrap}
.swc .now em{font-style:normal; color:var(--or)}
.swc button{width:32px; height:32px; border-radius:50%; background:var(--card); box-shadow:var(--sh-1); display:grid; place-items:center}
.swc button svg{width:12px; height:12px; fill:var(--ink)}
.dots{display:flex; gap:5px}
.dots i{width:6px; height:6px; border-radius:50%; background:#D8D0C5; transition:background .3s, width .3s}
.dots i.on{background:var(--ink); width:16px; border-radius:3px}

/* ---------- 数字の帯 ---------- */
.facts{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.facts li{background:var(--card); border-radius:var(--r-m); box-shadow:var(--sh-1); padding:16px 10px; text-align:center; display:grid; gap:4px}
.facts b{font:800 clamp(20px, 3.6vw, 30px)/1.1 var(--en); letter-spacing:-.01em}
.facts b small{font:900 .58em/1 var(--jp); margin-left:2px}
.facts span{font:500 12px/1.5 var(--jp); color:var(--sub)}

/* ---------- つくったもの(森工業) ---------- */
.work{display:grid; background:var(--card); border-radius:var(--r-l); box-shadow:var(--sh-2); overflow:hidden}
.work .pic{position:relative; background:#123A26; padding:22px 22px 0; display:grid; align-items:end}
.work .pic .browser{position:relative; left:auto; top:auto; width:100%; border-radius:12px 12px 0 0; border-bottom:0; box-shadow:0 -6px 30px rgba(0,0,0,.25)}
.work .pic .phone{right:16px; bottom:16px; width:24%; max-width:120px}
.work .txt{padding:28px 24px 30px; display:grid; gap:14px; align-content:center}
.chips{display:flex; flex-wrap:wrap; gap:6px}
.chip{display:inline-flex; align-items:center; height:28px; padding:0 12px; border-radius:var(--pill); background:var(--beige); font:700 12px/1 var(--jp)}
.chip.or{background:var(--or-pale)}
.work h3{font:900 clamp(20px, 2.6vw, 26px)/1.45 var(--jp)}
.work p{color:var(--sub); font-size:15px}
.newline{display:flex; align-items:center; gap:12px; margin-top:22px; padding:14px 18px; border-radius:var(--r-m); background:var(--card); box-shadow:var(--sh-1); font:500 14.5px/1.6 var(--jp)}
.newline b{flex:none; height:24px; padding:0 10px; border-radius:var(--pill); background:var(--ink); color:#fff; font:800 11px/24px var(--en); letter-spacing:.06em}

/* ---------- こんなことができる(舞台) ---------- */
.show{display:grid; gap:18px}
.tabs-x{display:flex; gap:8px; overflow-x:auto; scroll-snap-type:x mandatory; padding:4px 2px 10px; margin-inline:calc(var(--gut) * -1); padding-inline:var(--gut); scrollbar-width:none}
.tabs-x::-webkit-scrollbar{display:none}
.tabs-x button{flex:none; scroll-snap-align:start; display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 16px; border-radius:var(--pill); background:var(--card); box-shadow:var(--sh-1); font:700 14px/1 var(--jp); white-space:nowrap; transition:background .2s, color .2s}
.tabs-x button b{font:800 12px/1 var(--en); color:var(--or)}
.tabs-x button small{display:none}
.tabs-x button[aria-selected="true"]{background:var(--ink); color:#fff}
.stage{background:var(--card); border-radius:var(--r-l); box-shadow:var(--sh-2); padding:24px 18px 26px; min-height:420px}
.panel{display:grid; gap:18px}
.panel[hidden]{display:none}
.panel.is-on{animation:pin .45s var(--ease)}
@keyframes pin{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
html.nomotion .panel.is-on{animation:none}
.panel-h h3{font:900 22px/1.45 var(--jp)}
.panel-h p{color:var(--sub); font-size:14.5px; margin-top:4px}
.panel-h .for{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px}
.tray{background:var(--beige); border-radius:var(--r-m); padding:18px 14px}
.box{background:var(--card); border-radius:var(--r-m); box-shadow:var(--sh-1); padding:18px; display:grid; gap:12px; max-width:560px; margin-inline:auto; width:100%}
.hint{display:flex; align-items:center; gap:8px; font:700 13px/1.5 var(--jp); color:var(--sub)}
.hint::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--or); flex:none}

/* 時刻 */
.o-state{display:flex; align-items:center; gap:10px; font:900 22px/1.2 var(--jp)}
.o-state i{width:12px; height:12px; border-radius:50%; background:#9AA; flex:none}
.o-state.is-open i{background:#1C9A5A; box-shadow:0 0 0 5px rgba(28,154,90,.15)}
.o-state.is-closed i{background:var(--sub)}
.o-row{display:flex; align-items:center; justify-content:space-between; gap:14px}
.o-next{font-size:14.5px; color:var(--sub)}
.o-next b{font:800 22px/1 var(--en); color:var(--ink); margin:0 2px}
.ring{position:relative; width:72px; height:72px; border-radius:50%; background:conic-gradient(var(--or) var(--p, 0%), var(--or-pale) 0); display:grid; place-items:center; flex:none}
.ring::before{content:""; position:absolute; inset:7px; border-radius:50%; background:var(--card)}
.ring b{position:relative; font:800 13px/1 var(--en)}
.slider{display:grid; gap:8px; font:700 12.5px/1 var(--jp); color:var(--sub); padding-top:12px; border-top:1px solid var(--line)}
.slider span{display:flex; justify-content:space-between}
.slider output{font:800 13px/1 var(--en); color:var(--ink)}
.slider input{width:100%; accent-color:var(--or); height:28px}
.greet{font-size:14px; color:var(--sub)} .greet b{color:var(--ink)}

/* 伝票 */
.slip li{display:grid; grid-template-columns:1fr auto auto; gap:12px; align-items:center; padding:10px 0; border-bottom:1px solid var(--line); font:500 15px/1.4 var(--jp)}
.slip .pr{font:700 14px/1 var(--en); color:var(--sub)}
.stp{display:inline-flex; align-items:center; background:var(--beige); border-radius:var(--pill)}
.stp button{width:38px; height:38px; border-radius:50%; display:grid; place-items:center; font:700 18px/1 var(--en)}
.stp button:hover{background:#EBE3D8}
.stp output{min-width:22px; text-align:center; font:800 15px/1 var(--en)}
.slip-ft{display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding-top:4px}
.slip-ft .cnt{font:500 14px/1 var(--jp); color:var(--sub)}
.slip-ft .sum{font:800 32px/1 var(--en)}
.when{font-size:13.5px; color:var(--sub)} .when b{color:var(--ink)}
.slip-go{position:relative}
.slip-go .btn{width:100%}
.stamp{position:absolute; right:10px; top:-62px; width:74px; height:74px; border:3px solid var(--or); border-radius:50%; color:var(--or); display:grid; place-items:center; font:900 14px/1.25 var(--jp); text-align:center; transform:rotate(-12deg) scale(0); opacity:0; background:rgba(255,255,255,.88); pointer-events:none}
.stamp.is-on{animation:stamp .45s cubic-bezier(.2,1.4,.4,1) forwards}
@keyframes stamp{0%{transform:rotate(-12deg) scale(1.6); opacity:0} 60%{transform:rotate(-12deg) scale(.95); opacity:1} 100%{transform:rotate(-12deg) scale(1); opacity:1}}

/* カレンダー */
.cal-h{display:flex; align-items:center; justify-content:space-between}
.cal-h b{font:800 18px/1 var(--en)}
.cal-h button{width:44px; height:44px; border-radius:50%; background:var(--beige); display:grid; place-items:center; font:700 18px/1 var(--en)}
.cal table{width:100%; border-collapse:collapse; table-layout:fixed; font:700 13.5px/1 var(--en)}
.cal th{font:700 11.5px/1 var(--jp); color:var(--sub); padding:6px 0}
.cal td{text-align:center; padding:2px 0}
.cal td span{display:grid; place-items:center; height:36px; width:36px; margin:auto; border-radius:50%; position:relative}
.cal td.off span{background:var(--or-pale); color:var(--or)}
.cal td.off span::after{content:"休"; position:absolute; right:-5px; top:-5px; width:17px; height:17px; border-radius:50%; background:var(--or); color:var(--ink); font:900 9px/17px var(--jp)}
.cal td.today span{background:var(--ink); color:#fff}
.cal table.is-next{animation:flipn .35s var(--ease)} .cal table.is-prev{animation:flipp .35s var(--ease)}
@keyframes flipn{from{opacity:0; transform:translateX(16px)} to{opacity:1; transform:none}}
@keyframes flipp{from{opacity:0; transform:translateX(-16px)} to{opacity:1; transform:none}}
.lg{font-size:12.5px; color:var(--sub)}

/* しぼりこみ */
.ftabs{display:flex; flex-wrap:wrap; gap:6px}
.ftabs button{height:38px; padding:0 16px; border-radius:var(--pill); background:var(--beige); font:700 13.5px/1 var(--jp); transition:background .2s, color .2s}
.ftabs button[aria-pressed="true"]{background:var(--ink); color:#fff}
.mgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.mgrid figure{display:grid; gap:6px; align-content:start}
.mgrid .ph{aspect-ratio:1; border-radius:var(--r-s); overflow:hidden; background:var(--tile)}
.mgrid img{width:100%; height:100%; object-fit:cover}
.mgrid figcaption{font:700 12.5px/1.35 var(--jp)}
.mgrid figcaption span{display:block; font:700 12px/1.3 var(--en); color:var(--sub)}

/* 試聴 */
.player{display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:center}
.pbtn{width:64px; height:64px; border-radius:50%; background:var(--or); display:grid; place-items:center; position:relative; flex:none}
.pbtn svg{width:24px; height:24px; fill:var(--ink)}
.pbtn.is-on{animation:pulse 1.4s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,79,0,.4)} 100%{box-shadow:0 0 0 16px rgba(255,79,0,0)}}
.wave{display:grid; gap:8px}
.wave .ttl{font:700 15px/1.3 var(--jp)} .wave .ttl small{display:block; font:500 12px/1.4 var(--jp); color:var(--sub)}
.wave canvas{width:100%; height:52px; display:block; cursor:pointer}
.wave .meta{display:flex; justify-content:space-between; align-items:center; font:700 12px/1 var(--en); color:var(--sub)}
.lvl{display:inline-flex; gap:3px; align-items:flex-end; height:16px}
.lvl i{width:3px; height:3px; border-radius:2px; background:var(--or); transition:height .08s}

/* 書体 */
.fpick input{height:50px; border:0; border-radius:var(--r-s); background:var(--beige); padding:0 16px; width:100%; font-size:16px}
.fprev{min-height:110px; display:grid; place-items:center; padding:12px; font-size:clamp(24px,3.2vw,32px); line-height:1.4; text-align:center}
.fbtns{display:grid; grid-template-columns:repeat(4,1fr); gap:6px}
.fbtns button{height:58px; border-radius:var(--r-s); background:var(--beige); display:grid; place-content:center; gap:4px; font-size:17px; line-height:1}
.fbtns button small{font:700 10.5px/1 var(--jp); color:var(--sub)}
.fbtns button[aria-pressed="true"]{background:var(--ink); color:#fff}
.fbtns button[aria-pressed="true"] small{color:rgba(255,255,255,.7)}
.fname{font-size:13px; color:var(--sub)} .fname b{font-family:var(--en); color:var(--ink)}

/* 写真 */
.pgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.pgrid button{aspect-ratio:1; border-radius:var(--r-s); overflow:hidden; background:var(--tile)}
.pgrid img{width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease)}
@media (hover:hover){ .pgrid button:hover img{transform:scale(1.05)} }
dialog.lb{border:0; padding:0; background:transparent; max-width:min(92vw, 980px); width:auto; overflow:visible}
dialog.lb::backdrop{background:rgba(31,22,20,.86)}
dialog.lb img{max-height:80vh; border-radius:var(--r-m); object-fit:contain}
dialog.lb .x{position:absolute; right:0; top:-50px; color:#fff; font:700 14px/1 var(--jp); height:44px; padding:0 12px}
dialog.lb figcaption{color:#fff; font:700 13px/1 var(--jp); margin-top:12px}

/* お知らせ */
.news li{display:grid; grid-template-columns:auto 1fr; gap:14px; padding:12px 0; border-bottom:1px solid var(--line); font-size:14.5px; line-height:1.6; transition:opacity .4s}
.news li .d{font:700 13px/1.6 var(--en); color:var(--sub)}
.news li.is-new{animation:newin .6s var(--ease)}
.news li.is-new .t::after{content:"NEW"; display:inline-block; margin-left:8px; padding:0 7px; height:18px; border-radius:var(--pill); background:var(--or); font:800 10px/18px var(--en); vertical-align:2px}
@keyframes newin{from{opacity:0; transform:translateY(-10px)} to{opacity:1; transform:none}}
.news-ft{display:flex; align-items:center; justify-content:space-between; gap:12px; font:500 12.5px/1.5 var(--jp); color:var(--sub)}
.news-ft button{flex:none; height:38px; padding:0 14px; border-radius:var(--pill); background:var(--beige); font:700 12.5px/1 var(--jp); white-space:nowrap}

/* ---------- 流れ ---------- */
.steps4{display:grid; gap:12px}
.steps4 li{background:var(--card); border-radius:var(--r-m); box-shadow:var(--sh-1); padding:14px 14px 20px; display:grid; gap:8px; align-content:start}
.steps4 .fig{height:112px; border-radius:var(--r-s); background:var(--beige); display:grid; place-items:center}
.steps4 .fig svg{width:72%; max-width:200px; height:72px; stroke:var(--ink); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.steps4 .fig .o{stroke:var(--or)}
.steps4 .n{font:800 24px/1 var(--en); color:var(--or); margin-top:6px}
.steps4 h3{font:900 17px/1.45 var(--jp); display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.steps4 h3 em{font:700 11px/1 var(--jp); font-style:normal; padding:5px 9px; border-radius:var(--pill); background:var(--or-pale)}
.steps4 p{font-size:14px; color:var(--sub); line-height:1.7}

/* ---------- 窓口(黒い面) ---------- */
.desk{display:grid; gap:40px; align-items:center}
.dpts{display:grid; gap:18px; margin-top:28px}
.dpts li{display:grid; grid-template-columns:auto 1fr; gap:2px 14px}
.dpts .ic{grid-row:span 2; color:var(--or); margin-top:2px}
.dpts h3{font:700 16.5px/1.5 var(--jp)}
.dpts p{color:rgba(255,255,255,.66); font-size:14.5px}
.my{width:100%; max-width:380px; margin-inline:auto; border-radius:40px; background:#0E0A09; padding:10px; box-shadow:0 30px 60px rgba(0,0,0,.4); border:1px solid rgba(255,255,255,.08)}
.my .scr{border-radius:31px; background:var(--bg); color:var(--ink); overflow:hidden; display:grid; grid-template-rows:auto auto auto 1fr auto; height:620px}
.my .top{display:flex; align-items:center; justify-content:space-between; padding:16px 18px 10px; font:700 12px/1 var(--jp); color:var(--sub)}
.my .top .logo{font-size:16px; color:var(--ink)}
.my .site{margin:0 14px; border-radius:var(--r-m); background:var(--card); box-shadow:var(--sh-1); padding:10px; display:grid; gap:8px; font:700 10.5px/1.3 var(--jp)}
.my .site .s-h{display:flex; justify-content:space-between; align-items:center; color:var(--sub)}
.my .site .s-h b{font:800 11px/1 var(--en); color:var(--ink)}
.my .site .s-img{height:62px; border-radius:var(--r-s); background:var(--tile) center/cover}
.my .site .s-img.is-swap{animation:swap .7s var(--ease)}
@keyframes swap{from{clip-path:inset(0 100% 0 0)} to{clip-path:inset(0)}}
.my .site .s-btn{height:28px; border-radius:var(--pill); background:var(--or); display:grid; place-items:center; font:800 11px/1 var(--jp)}
.my .site .s-btn.is-hot{animation:hot .9s var(--ease)}
@keyframes hot{0%{transform:scale(1.06); box-shadow:0 0 0 6px rgba(255,79,0,.25)} 100%{transform:none; box-shadow:none}}
.my .site .s-news{display:grid; gap:3px; font:500 10px/1.35 var(--jp); color:var(--sub)}
.my .site .s-news span.is-new{color:var(--ink); font-weight:700; animation:newin .5s var(--ease)}
.my .prog{margin:14px 14px 0; display:grid; grid-template-columns:repeat(4,1fr); gap:4px}
.my .prog span{display:grid; gap:5px; font:700 10px/1 var(--jp); color:var(--sub); text-align:center}
.my .prog span::before{content:""; height:5px; border-radius:3px; background:var(--tile); transition:background .4s}
.my .prog span.on{color:var(--ink)} .my .prog span.on::before{background:var(--or)}
.my .log{display:flex; flex-direction:column; gap:8px; padding:12px 14px; overflow-y:auto}
.my .log .empty{margin:auto; text-align:center; font:500 12.5px/1.7 var(--jp); color:var(--sub)}
.msg{max-width:88%; padding:10px 13px; border-radius:16px; font:500 13px/1.6 var(--jp); animation:newin .4s var(--ease)}
.msg.me{align-self:flex-end; background:var(--or); border-bottom-right-radius:4px}
.msg.you{align-self:flex-start; background:var(--card); box-shadow:var(--sh-1); border-bottom-left-radius:4px}
.msg small{display:block; font:700 10.5px/1.4 var(--jp); color:var(--sub); margin-bottom:2px}
.msg.me small{color:rgba(31,22,20,.65)}
.msg .act{display:flex; gap:6px; margin-top:8px; flex-wrap:wrap}
.msg .act button{height:36px; padding:0 16px; border-radius:var(--pill); background:var(--or); font:800 12.5px/1 var(--jp)}
.msg .act button.ghost{background:var(--beige)}
.msg .act button:disabled{opacity:.4}
.my .ask{padding:10px 14px 16px; border-top:1px solid var(--line); background:var(--card); display:grid; gap:8px}
.my .ask p{font:700 11px/1 var(--jp); color:var(--sub)}
.my .chips-d{display:flex; flex-wrap:wrap; gap:6px}
.my .chips-d button{min-height:36px; padding:6px 12px; border-radius:var(--pill); background:var(--beige); font:700 12px/1.3 var(--jp); text-align:left}
.my .chips-d button:hover{background:var(--or-pale)}
.my .chips-d button:disabled{opacity:.4}

/* ---------- 見本 ---------- */
.samples{display:grid; gap:14px}
.sample{display:grid; gap:12px; text-decoration:none; background:var(--card); border-radius:var(--r-m); box-shadow:var(--sh-1); padding:12px 12px 18px; align-content:start; transition:box-shadow .2s, transform .2s var(--ease)}
@media (hover:hover){ .sample:hover{box-shadow:var(--sh-2); transform:translateY(-3px)} }
.sample .shot{border-radius:var(--r-s); overflow:hidden; background:var(--tile); aspect-ratio:16/10}
.sample .shot img{width:100%; height:100%; object-fit:cover; object-position:top}
.sample h3{font:900 18px/1.4 var(--jp); padding-inline:6px; display:flex; align-items:baseline; gap:10px}
.sample h3 small{font:500 12.5px/1 var(--jp); color:var(--sub)}
.sample .chips{padding-inline:6px}
.sample .go{padding-inline:6px; font:700 14px/1 var(--jp); display:flex; align-items:center; gap:6px}
.sample .go::after{content:"→"; color:var(--or); font-family:var(--en)}

/* ---------- 入っているもの・ドメイン ---------- */
.two{display:grid; gap:14px}
.panel2{background:var(--card); border-radius:var(--r-l); box-shadow:var(--sh-1); padding:26px 22px}
.panel2 h3{font:900 20px/1.4 var(--jp); margin-bottom:14px}
.inc{display:grid; gap:2px}
.inc li{display:flex; gap:12px; align-items:center; padding:10px 0; font:700 15px/1.5 var(--jp)}
.inc .ic{color:var(--or); width:22px; height:22px}
.out{margin-top:12px; color:var(--sub); font-size:13.5px; line-height:1.7}
.url{display:flex; align-items:center; gap:10px; height:52px; padding:0 18px; border-radius:var(--pill); background:var(--beige); font:700 17px/1 var(--en); margin-bottom:14px}
.url::before{content:""; width:10px; height:10px; border-radius:50%; background:var(--or)}
.dl{display:grid; gap:8px}
.dl li{display:grid; grid-template-columns:auto 1fr; gap:10px; font-size:14.5px; line-height:1.7}
.dl li::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--ink); margin-top:10px}

/* ---------- その先 ---------- */
.link3{display:grid; gap:12px}
.link3 li{border-radius:var(--r-m); padding:22px 20px; display:grid; gap:4px; align-content:start; background:var(--card); box-shadow:var(--sh-1)}
.link3 li b{font:800 14px/1 var(--en); color:var(--or)}
.link3 h3{font:900 18px/1.5 var(--jp)}
.link3 p{color:var(--sub); font-size:14.5px}
.link3 li.now{background:var(--ink); color:#fff; box-shadow:none}
.link3 li.now p{color:rgba(255,255,255,.7)}

/* ---------- 料金・質問 ---------- */
.price{background:var(--card); border-radius:var(--r-l); box-shadow:var(--sh-1); padding:26px 22px; display:grid; gap:8px}
.price b{font:900 20px/1.5 var(--jp)} .price p{color:var(--sub); font-size:14.5px}
.faq{display:grid; gap:10px}
.faq details{background:var(--card); border-radius:var(--r-m); box-shadow:var(--sh-1); padding:0 20px}
.faq summary{list-style:none; cursor:pointer; min-height:62px; display:flex; align-items:center; justify-content:space-between; gap:14px; font:700 15.5px/1.6 var(--jp); padding-block:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:""; flex:none; width:10px; height:10px; border-right:2px solid var(--ink); border-bottom:2px solid var(--ink); transform:rotate(45deg) translate(-3px,-3px); transition:transform .2s var(--ease)}
.faq details[open] summary::after{transform:rotate(225deg) translate(-3px,-3px)}
.faq .a{padding:0 0 18px; color:var(--sub); font-size:14.5px; line-height:1.85}

/* ---------- 相談(フォーム) ---------- */
.contact{display:grid; gap:28px}
.form{background:var(--card); border-radius:var(--r-l); box-shadow:var(--sh-2); padding:24px 20px; display:grid; gap:14px}
.form label{display:grid; gap:6px; font:700 13px/1 var(--jp)}
.form input:not([type=checkbox]),.form textarea,.form select{border:0; border-radius:var(--r-s); padding:14px 16px; background:var(--beige); font-size:16px; width:100%}
.form textarea{min-height:120px; resize:vertical; line-height:1.7}
.form .chk{grid-template-columns:auto 1fr; align-items:center; gap:10px; font:500 14px/1.5 var(--jp)}
.form .chk input{width:22px; height:22px; accent-color:var(--or); margin:0}
.form .btn{width:100%}
.st{font-size:13px; color:var(--sub); line-height:1.7}
.st.err{color:#B3261E; font-weight:700}
.st .ok{display:grid; gap:4px; padding:14px 16px; background:var(--or-pale); border-radius:var(--r-s); color:var(--ink)}
.st .ok b{font-size:15.5px} .st .ok .en{font-size:13px; color:var(--sub)}
.cpts{display:grid; gap:10px; margin-top:22px}
.cpts li{display:flex; gap:10px; align-items:center; font:500 15px/1.6 var(--jp)}
.cpts li::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--or); flex:none}

/* ---------- フッター(本体と同じ大きな REC●A) ---------- */
.ft{background:var(--ink); color:rgba(255,255,255,.7); padding-top:44px; font-size:13px; line-height:1.9; overflow:hidden}
.ft .logo{color:#fff; margin-bottom:10px}
.ft .logo small{background:rgba(255,255,255,.14); color:#fff}
.ft a{color:#fff}
.big{font:800 clamp(90px, 27vw, 380px)/.78 var(--en); letter-spacing:-.05em; color:#fff; display:flex; align-items:center; margin-top:36px; margin-bottom:-.12em; white-space:nowrap; justify-content:center}
.big i{width:.7em; height:.7em; border-radius:50%; background:var(--or); margin:0 .04em}

/* ---------- タブレット・PC ---------- */
@media (min-width:700px){
  .samples{grid-template-columns:repeat(3,1fr)}
  .steps4{grid-template-columns:repeat(2,1fr)}
  .link3{grid-template-columns:repeat(3,1fr)}
  .two{grid-template-columns:1fr 1fr}
  .nav{display:flex}
  .facts li{padding:20px 12px}
}
@media (min-width:960px){
  :root{--gut:40px}
  .sec{padding-block:112px}
  .head{margin-bottom:48px}
  .hero{padding-block:44px 96px}
  .hero .wrap{grid-template-columns:1.12fr .88fr; align-items:center; gap:24px}
  .hero h1{font-size:min(4.1vw, 58px)}
  .art{min-height:540px}
  .art .disc{width:440px; right:-60px; top:30px}
  .browser{top:96px; width:92%}
  .swc{top:46px}
  .phone{right:-10px; bottom:30px; width:150px}
  .note{left:-28px; bottom:6px}
  .work{grid-template-columns:1.25fr 1fr}
  .work .pic{padding:36px 36px 0}
  .work .txt{padding:44px 44px}
  .show{grid-template-columns:280px 1fr; gap:28px; align-items:start}
  .tabs-x{flex-direction:column; overflow:visible; margin:0; padding:0; gap:4px; position:sticky; top:96px}
  .tabs-x button{height:auto; min-height:56px; padding:12px 18px; border-radius:var(--r-m); box-shadow:none; background:transparent; display:grid; grid-template-columns:28px 1fr; text-align:left; gap:2px 6px; white-space:normal}
  .tabs-x button b{grid-row:span 2; align-self:start; padding-top:3px}
  .tabs-x button small{display:block; font:500 12px/1.5 var(--jp); color:var(--sub)}
  .tabs-x button:hover{background:rgba(255,255,255,.6)}
  .tabs-x button[aria-selected="true"]{background:var(--card); color:var(--ink); box-shadow:var(--sh-1)}
  .tabs-x button[aria-selected="true"] b{color:var(--or)}
  .stage{padding:36px 36px 40px; min-height:540px}
  .tray{padding:32px}
  .steps4{grid-template-columns:repeat(4,1fr); gap:16px}
  .desk{grid-template-columns:1fr 400px; gap:72px}
  .contact{grid-template-columns:1fr 1.1fr; gap:64px; align-items:start}
  .form{padding:34px 32px}
  .panel2{padding:34px 32px}
}
@media (min-width:1200px){
  .art .disc{width:470px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
  .rv{opacity:1; transform:none}
  .hl{background-size:100% .3em !important}
}

/* ======================================================================
   v0.4(2026-10-07 夜 ショウ/Opus)— 構成の組み直しと、動きを足した分(森さん「今だと静かすぎる」)
   動きはどれも「意味のある所」だけ: 画面が替わる・返事が届いて反映される・枠の中のサイトが流れる・部品を順に見せる・線が引かれる。
   文字だけが横に流れる動きは使わない。止めるボタン・乗せている間は止まる・動きを減らす設定では止まる。
   ====================================================================== */

/* ---------- 最初の画面: 端末がゆっくり浮く・画面が上から替わる・返事が届く ---------- */
.float-wrap{position:absolute; inset:0; pointer-events:none}
.float-wrap > *{pointer-events:auto}
html.js:not(.nomotion) .fb1{animation:float 7s ease-in-out infinite}
html.js:not(.nomotion) .fb2{animation:float 6s ease-in-out -2.4s infinite}
@keyframes float{0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)}}
html.js:not(.nomotion) .art .disc{animation:breathe 9s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1)} 50%{transform:scale(1.035)}}
.screen img.wipe{z-index:2; animation:wipe .9s var(--ease) both}
@keyframes wipe{from{clip-path:inset(0 0 100% 0)} to{clip-path:inset(0)}}
.screen .prog{position:absolute; left:0; bottom:0; z-index:3; height:3px; width:100%; background:var(--or); transform-origin:left; transform:scaleX(0)}
.screen .prog.run{animation:prog var(--dur, 4.2s) linear both}
@keyframes prog{from{transform:scaleX(0)} to{transform:scaleX(1)}}
.note{transition:transform .4s var(--ease)}
.note.is-new{animation:notein .6s var(--ease)}
@keyframes notein{0%{opacity:0; transform:rotate(-2deg) translateY(14px)} 100%{opacity:1; transform:rotate(-2deg)}}
.note b{transition:background .3s, color .3s, transform .2s}
.note b.is-press{transform:scale(.92)}
.note b.is-done{background:var(--ink); color:#fff}
.stk li{position:absolute; z-index:4; display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 14px 0 6px; border-radius:var(--pill); background:var(--card); box-shadow:var(--sh-2); font:700 12.5px/1 var(--jp); white-space:nowrap}
.stk li b{display:inline-grid; place-items:center; height:26px; padding:0 10px; border-radius:var(--pill); background:var(--or-pale); font:700 11.5px/1 var(--jp)}
.stk li:nth-child(1){top:2%; right:2%}
.stk li:nth-child(2){display:none}
.stk li:nth-child(3){display:none}
html.js:not(.nomotion) .stk li{animation:float 5.5s ease-in-out infinite, pop .6s var(--ease) both}
html.js:not(.nomotion) .stk li:nth-child(1){animation-delay:-1s, 1.1s}
html.js:not(.nomotion) .stk li:nth-child(2){animation-delay:-3s, 1.4s}
html.js:not(.nomotion) .stk li:nth-child(3){animation-delay:-2s, 1.7s}
@keyframes pop{from{opacity:0; transform:scale(.6)} to{opacity:1; transform:none}}

/* ---------- 数字が数え上がる ---------- */
.facts-sec{padding-block:28px}
.facts .cntup{font:inherit; color:inherit; letter-spacing:inherit}

/* ---------- つくったもの: 枠の中のサイトがゆっくり流れる ---------- */
.screen.scroller img{position:absolute; left:0; top:0; width:100%; height:auto; object-fit:initial; object-position:initial}
.scroller.run img{animation:scrollY var(--t, 18s) ease-in-out infinite alternate}
.scroller.run:hover img, .sample:hover .shot.run img{animation-play-state:paused}
@keyframes scrollY{0%,10%{transform:translateY(0)} 90%,100%{transform:translateY(var(--d, 0px))}}
.head--sub{margin-top:64px; margin-bottom:22px}
.h3{font:900 clamp(20px, 2.6vw, 26px)/1.45 var(--jp)}
.samples{grid-template-columns:1fr}
.sample .shot{position:relative; aspect-ratio:16/11}
.sample .shot img{position:absolute; left:0; top:0; width:100%; height:auto; object-fit:initial}
.sample .shot.run img{animation:scrollY var(--t, 10s) ease-in-out infinite alternate}
.sample .live{position:absolute; left:10px; top:10px; z-index:2; display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 10px; border-radius:var(--pill); background:rgba(31,22,20,.78); color:#fff; font:700 11px/1 var(--jp); opacity:0; transition:opacity .3s}
.sample .live::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--or)}
.sample .shot.run .live{opacity:1}
@media (min-width:560px){ .samples{grid-template-columns:1fr 1fr} }

/* ---------- できること: 自動で順に見せる(進み具合の線・止めるボタン) ---------- */
.tabs-x button{position:relative; overflow:hidden}
.tabs-x button .bar{position:absolute; left:0; bottom:0; height:3px; width:100%; background:var(--or); transform-origin:left; transform:scaleX(0)}
.tabs-x button .bar.run{animation:prog var(--dur, 6.5s) linear both}
.tour{display:inline-flex; align-items:center; gap:10px; min-height:40px; margin-top:6px; padding:0 4px; font:500 12.5px/1.4 var(--jp); color:var(--sub)}
.tour::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--or); flex:none}
.tour em{font-style:normal; font-weight:700; color:var(--ink); text-decoration:underline; text-underline-offset:4px}
.tour[aria-pressed="false"]::before{background:#CFC7BD}

/* ---------- 流れ: 線が引かれ、絵が描かれる ---------- */
.flowline{display:none}
.steps4 .fig svg *{stroke-dasharray:320; stroke-dashoffset:0}
html.js:not(.nomotion) .steps4 li .fig svg *{stroke-dashoffset:320; transition:stroke-dashoffset 1.4s var(--ease) .3s}
html.js:not(.nomotion) .steps4 li.is-in .fig svg *{stroke-dashoffset:0}
html.js:not(.nomotion) .steps4 li:nth-child(2) .fig svg *{transition-delay:.55s}
html.js:not(.nomotion) .steps4 li:nth-child(3) .fig svg *{transition-delay:.8s}
html.js:not(.nomotion) .steps4 li:nth-child(4) .fig svg *{transition-delay:1.05s}

/* ---------- ドメインが打ち替わる ---------- */
.url .caret{width:2px; height:20px; background:var(--ink); margin-left:-6px; animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}

@media (min-width:960px){
  .stk li:nth-child(1){top:44px; right:6%}
  .stk li:nth-child(2){display:inline-flex; top:44%; left:-9%; right:auto}
  .stk li:nth-child(3){display:inline-flex; top:26%; right:-5%}
  .tabs-x{position:static}
  .tabs-col{position:sticky; top:96px}
  .tabs-x button .bar{left:18px; right:18px; width:auto; bottom:4px; height:2px}
  .samples{grid-template-columns:repeat(4,1fr); gap:16px}
  .flowline i{position:absolute; inset:0; background:var(--or); transform-origin:left; transform:scaleX(0); transition:transform 1.8s var(--ease) .2s}
  .flowline.is-in i, html.nomotion .flowline i{transform:scaleX(1)}
}
@media (prefers-reduced-motion:reduce){
  .scroller img, .sample .shot img{animation:none !important}
}

/* ======================================================================
   v0.5(2026-10-08 未明 ショウ/Opus)— 確かめ表で直した分
   B1 背景の緩急: 白→ベージュ→白→黒→淡い橙→白→ベージュ→白→オレンジ(相談)→黒(フッター)。同じ色を続けない。
   B2 あしらい: 最初の画面の橙の円(ロゴの●)を、ほかの節の端にも平らに置く。見出しの大事な言葉に、最初の画面と同じ橙の下線。
   F2-4 同じ型をくり返さない: 節ごとに見出しの見せ方を変える(大きな数字・特大の言葉・大きな「4」・オレンジの上の大きな言葉)。
   F2-7 途中にも相談の入口(窓口の節の下)。
   ====================================================================== */
.facts-sec{background:var(--bg); padding-block:8px 36px}
.peach{background:#FFF0E6}
.orange{background:var(--or)}
.has-deco{position:relative; overflow:clip}
.has-deco > .wrap{position:relative; z-index:1}
.deco{position:absolute; z-index:0; border-radius:50%; pointer-events:none}
.deco--a{width:clamp(220px, 32vw, 440px); aspect-ratio:1; right:-170px; top:38%; background:var(--or)}
.deco--b{width:clamp(200px, 30vw, 380px); aspect-ratio:1; left:-120px; bottom:-140px; border:clamp(28px, 4vw, 48px) solid #FFD5BF}
.deco--c{width:clamp(120px, 16vw, 200px); aspect-ratio:1; right:6%; bottom:-60px; background:var(--or); box-shadow:-150px -30px 0 -60px #FFD5BF}
html.js:not(.nomotion) .deco{animation:breathe 10s ease-in-out infinite}
.hl2{background:linear-gradient(var(--or), var(--or)) 0 90% / 100% .26em no-repeat; padding-inline:.02em}
.dark .hl2{background-image:linear-gradient(var(--or), var(--or))}
.h2--xl{font-size:clamp(30px, 5.6vw, 60px); line-height:1.25}
.h2--xxl{font-size:clamp(34px, 6vw, 72px); line-height:1.2}
.nw{white-space:nowrap}
.head--big{display:flex; align-items:flex-end; justify-content:space-between; gap:20px}
.bignum{font:800 clamp(64px, 12vw, 148px)/.78 var(--en); color:var(--or); letter-spacing:-.04em; display:flex; align-items:flex-end; gap:8px}
.bignum small{font:700 13px/1 var(--en); color:var(--ink); letter-spacing:.1em; text-transform:uppercase; padding-bottom:10px}
.kick{display:inline-flex; align-items:center; gap:10px; font:700 14px/1 var(--jp); color:var(--or)}
.kick::before{content:""; width:10px; height:10px; border-radius:50%; background:var(--or)}
.num4{font-size:1.7em; line-height:.8; color:var(--or); margin-right:.04em; vertical-align:-.08em}
.desk-cta{margin-top:56px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px 24px; padding:24px 28px; border:1px solid rgba(255,255,255,.16); border-radius:var(--r-m)}
.desk-cta p{display:grid; gap:4px}
.desk-cta b{font:900 clamp(18px, 2.2vw, 24px)/1.4 var(--jp); color:#fff}
.desk-cta span{font-size:14px; color:rgba(255,255,255,.7)}
.orange .lbl{color:var(--ink)}
.orange .lead2{color:rgba(31,22,20,.8)}
.orange .cpts li::before{background:var(--ink)}
.orange .form{box-shadow:0 20px 50px rgba(120,30,0,.25)}

/* v0.5 速さ(確かめ表 F2-2): 画面の外の節は見えるまで計算しない。ページ内リンクで飛ぶ時は、先に全部描く(lp.js) */
.cv{content-visibility:auto; contain-intrinsic-size:auto 1000px}

/* ======================================================================
   v0.6(2026-10-08 ショウ/Opus)— 採点 RECOA_LP_00 の上位5つと、おかしな所の一覧から
   ====================================================================== */
.vh{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
/* ① 最初の画面を1枚の絵に: 見本を大きく・入りを順に(空白を見せない) */
@media (min-width:960px){
  .art{margin-right:-48px}
  .browser{width:100%}
  .phone{width:136px; right:-6px}
}
html.js:not(.nomotion) .art .disc{opacity:0; scale:.7; transition:opacity .9s var(--ease) .1s, scale 1.1s var(--ease) .1s}
html.js:not(.nomotion) .fb1{opacity:0; translate:0 28px; transition:opacity .8s var(--ease) .35s, translate .9s var(--ease) .35s}
html.js:not(.nomotion) .fb2{opacity:0; translate:0 28px; transition:opacity .8s var(--ease) .6s, translate .9s var(--ease) .6s}
html.js:not(.nomotion) .note{opacity:0; translate:0 18px; transition:opacity .7s var(--ease) .95s, translate .8s var(--ease) .95s}
html.js:not(.nomotion) .swc{opacity:0; transition:opacity .6s .8s}
html.js.is-loaded .art .disc{opacity:1; scale:1}
html.js.is-loaded .fb1, html.js.is-loaded .fb2, html.js.is-loaded .note{opacity:1; translate:0 0}
html.js.is-loaded .swc{opacity:1}
@media (max-width:959px){
  .note{bottom:3%; left:2%; width:min(62%, 236px); padding:10px 12px}
  .note p{font-size:12px}
}
/* 数字の札 */
.facts b small{font-size:.5em; margin-left:3px}
/* ② 本物の数字 */
.proof{display:flex; align-items:center; gap:18px; margin-top:22px; padding:18px 22px; border-radius:var(--r-m); background:var(--ink); color:#fff}
.proof b{font:800 clamp(40px, 6vw, 60px)/1 var(--en); color:var(--or); flex:none}
.proof b small{font:900 .4em/1 var(--jp); margin-left:2px}
.proof span{font:500 15px/1.7 var(--jp)}
/* ⑤ 見出しの橙の下線も、見えた時に引く */
html.js:not(.nomotion) .hl2{background-size:0% .26em; transition:background-size .9s var(--ease) .35s}
html.js .is-in .hl2, html.js .hl2.is-in, html.nomotion .hl2{background-size:100% .26em}
/* 見本のカード: 「見本を開く」を下に揃える・流している札は下の右に小さく */
.sample{display:flex; flex-direction:column}
.sample .go{margin-top:auto; padding-top:4px}
.sample .live{left:auto; right:8px; top:auto; bottom:8px; background:rgba(255,255,255,.94); color:var(--ink); box-shadow:var(--sh-1)}
#works{padding-bottom:88px}
/* スマホのタブの列: 続きがあると分かるように右をぼかす */
@media (max-width:959px){ .tabs-x{-webkit-mask-image:linear-gradient(90deg, #000 82%, transparent); mask-image:linear-gradient(90deg, #000 82%, transparent)} }
/* ③ 窓口の見本: 空の箱をやめる・吹き出しは上をぼかして流す・今の段を強く・押したボタンは「反映しました」 */
.my .site .s-img{background-image:url(ph/b-table.jpg); background-size:cover; background-position:center}
.my .log{-webkit-mask-image:linear-gradient(180deg, transparent 0, #000 22px); mask-image:linear-gradient(180deg, transparent 0, #000 22px)}
.my .prog span.on:not(.now)::before{background:#FFB993}
.my .prog span.now{color:var(--ink); font-weight:900}
.my .prog span.now::before{background:var(--or)}
.msg .act button:disabled{opacity:1; background:var(--beige); color:var(--sub)}
/* 手順の絵を大きく・太く */
.steps4 .fig{height:136px}
.steps4 .fig svg{width:88%; max-width:250px; height:100px; stroke-width:2.4}
/* ドメインのカード */
.dom-ex{margin-top:18px; margin-bottom:8px; font:700 13px/1 var(--jp); color:var(--sub)}
/* その先: 01 を「選ばれたタブ」に見せない */
.link3 li.now{background:var(--card); color:var(--ink); box-shadow:inset 0 0 0 2px var(--or), var(--sh-1)}
.link3 li.now p{color:var(--sub)}
/* 料金と質問 */
.pricebar{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 32px; padding:26px 30px; margin-bottom:64px; background:var(--card); border-radius:var(--r-l); box-shadow:var(--sh-1)}
.pricebar b{display:block; font:900 clamp(19px, 2.2vw, 24px)/1.4 var(--jp); margin-top:6px}
.pricebar p{color:var(--sub); font-size:14.5px; max-width:34em}
@media (min-width:960px){ .faq--2{grid-template-columns:1fr 1fr; align-items:start; gap:12px 16px} }
/* 相談の左: 工房の写真と運営 */
.ws{margin-top:28px; border-radius:var(--r-m); overflow:hidden; background:var(--card); box-shadow:0 14px 34px rgba(120,30,0,.22)}
.ws img{width:100%; aspect-ratio:16/10; object-fit:cover}
.ws figcaption{padding:10px 16px; font:700 13px/1.4 var(--jp)}
.op{display:grid; grid-template-columns:auto 1fr; gap:6px 16px; margin-top:20px; font-size:14px; line-height:1.6}
.op dt{font-weight:700}
.op a{color:inherit}
/* 言葉の途中で折らない所を増やす */
.dl li, .cpts li, .facts span, .steps4 p, .inc li, .proof span, .op dd, .ft p, .pricebar p{word-break:auto-phrase}
/* フッター: 道を足す・運営の行を読みやすく・大きな REC●A は切らない */
.ft p{color:rgba(255,255,255,.82)}
.ft-links{display:flex; flex-wrap:wrap; gap:6px 18px; margin:14px 0 12px}
.ft-links a{color:#fff; font:700 13.5px/2 var(--jp); text-decoration:none}
.ft-links a:hover{text-decoration:underline; text-underline-offset:4px}
.big{margin-bottom:0; padding-bottom:28px}
/* スマホの上の帯のメニュー */
.hd-r{display:flex; align-items:center; gap:8px}
.mnav{width:44px; height:44px; border-radius:50%; background:var(--beige); display:grid; place-items:center}
.mnav span:first-child{position:relative; width:18px; height:2px; background:var(--ink); box-shadow:0 -6px 0 var(--ink), 0 6px 0 var(--ink)}
.mnav[aria-expanded="true"] span:first-child{box-shadow:none; transform:rotate(45deg)}
.mnav[aria-expanded="true"] span:first-child::after{content:""; position:absolute; inset:0; background:var(--ink); transform:rotate(90deg)}
.mdrop{display:grid; padding:6px var(--gut) 16px; background:rgba(255,254,251,.98); border-bottom:1px solid var(--line)}
.mdrop[hidden]{display:none}
.mdrop a{padding:12px 0; border-bottom:1px solid var(--line); font:700 16px/1.4 var(--jp); text-decoration:none}
@media (min-width:700px){ .mnav{display:none} .mdrop{display:none !important} }

/* ======================================================================
   v0.7(2026-10-08 ショウ/Opus)— 仕組みの図(1時間ごとに専任の AI が直す)・手順の 3D の模型
   ====================================================================== */
.mech-sec{background:var(--bg); padding-top:40px}
.mech{display:grid; gap:12px; counter-reset:none}
.mech li{position:relative; background:var(--card); border-radius:var(--r-l); box-shadow:var(--sh-1); padding:26px 24px 28px; display:grid; gap:8px; align-content:start}
.mech .mn{display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:var(--or-pale); color:var(--or); font:800 20px/1 var(--en)}
.mech h3{font:900 clamp(18px, 2vw, 22px)/1.45 var(--jp)}
.mech p{color:var(--sub); font-size:14.5px; line-height:1.75}
.mech .mech-ai{background:var(--ink); color:#fff; box-shadow:var(--sh-2)}
.mech .mech-ai .mn{background:var(--or); color:var(--ink)}
.mech .mech-ai p{color:rgba(255,255,255,.75)}
.mech .now{display:inline-flex; align-items:center; gap:8px; justify-self:start; margin-top:6px; padding:6px 14px; border-radius:var(--pill); background:rgba(255,255,255,.1); color:#fff !important; font:700 12.5px/1.4 var(--jp)}
.mech .now::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--or); animation:blink 2s infinite}
.mech .now.off::before{background:#8a807a; animation:none}
.mech-sec .proof{margin-top:16px}
@media (min-width:960px){
  .mech{grid-template-columns:1fr 1.15fr 1fr; gap:0; align-items:stretch}
  .mech li + li{margin-left:28px}
  .mech li + li::before{content:""; position:absolute; left:-24px; top:50%; width:20px; height:2px; background:var(--or)}
  .mech li + li::after{content:""; position:absolute; left:-12px; top:calc(50% - 5px); border:6px solid transparent; border-left-color:var(--or); border-right:0}
  .mech .mech-ai{transform:translateY(-10px)}
}
@media (max-width:959px){
  .mech li + li{margin-top:10px}
}
/* 手順の 3D の模型: 透明の背景に影を足して、見えたら少し浮かぶ */
.steps4 .fig{height:auto; aspect-ratio:10/7; padding:6px}
.steps4 .fig img{width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 14px 16px rgba(31,22,20,.16))}
html.js:not(.nomotion) .steps4 li .fig img{opacity:0; translate:0 14px; transition:opacity .7s var(--ease), translate .8s var(--ease)}
html.js:not(.nomotion) .steps4 li.is-in .fig img{opacity:1; translate:0 0}
html.js:not(.nomotion) .steps4 li:nth-child(2) .fig img{transition-delay:.15s} html.js:not(.nomotion) .steps4 li:nth-child(3) .fig img{transition-delay:.3s} html.js:not(.nomotion) .steps4 li:nth-child(4) .fig img{transition-delay:.45s}
@media (hover:hover){ .steps4 li:hover .fig img{animation:float 3s ease-in-out infinite} }

/* ======================================================================
   v0.8(2026-10-08 ショウ/Opus)— 採点 RECOA_LP_01 の上位5つと、おかしな所 33件から
   ====================================================================== */
/* 言葉の途中で切らない(行末に1〜2文字を残さない) */
/* v0.9b: 全部の文に当てると重い(スマホの TBT 240→510ms)。採点で切れが出た短い文だけに絞る */
.mech p, .evi-n span, .evi-h span, .did li, .work p, .steps4 p, .link3 p, .note p, .msg, .desk-cta span, .faq .a, .pricebar p, .cpts li, .hero-rec span{word-break:auto-phrase}
/* #5 確認用の帯: 最初の画面を使わない小さな札に */
.pv{position:fixed; left:12px; bottom:12px; z-index:60; padding:6px 12px; border-radius:var(--pill); font-size:11.5px; box-shadow:var(--sh-2); opacity:.92}
/* ② 最初の画面: 絵を大きく・読み込んですぐ出す */
html.js:not(.nomotion) .fb1, html.js:not(.nomotion) .art .disc{opacity:1; translate:0 0; scale:1; transition:none}
@media (min-width:960px){
  .hero .wrap{grid-template-columns:1fr 1.06fr}
  .art{min-height:580px; margin-right:-72px}
  .browser{top:92px; width:104%}
  .phone{width:150px; right:-14px; bottom:18px}
  .note{left:-44px; bottom:-6px; width:270px}
  .ask-b{left:-64px; bottom:156px}
}
.ask-b{position:absolute; z-index:3; left:2%; bottom:30%; width:min(60%, 250px); background:var(--ink); color:#fff; border-radius:var(--r-m) var(--r-m) var(--r-m) 4px; box-shadow:var(--sh-2); padding:11px 14px; display:grid; gap:6px; transform:rotate(1.5deg)}
.ask-b .who, .note .who{justify-content:flex-start}
.ask-b .who{display:flex; align-items:center; gap:7px; font:700 11.5px/1 var(--jp); color:rgba(255,255,255,.7)}
.ask-b .who::before{content:""; width:8px; height:8px; border-radius:50%; background:#fff}
.ask-b p{font:700 13px/1.55 var(--jp)}
.ask-b time, .note time{margin-left:auto; font:700 11px/1 var(--en); letter-spacing:.04em; opacity:.8}
.note{z-index:4}
.ask-b.is-new{animation:notein .5s var(--ease)}
.note.is-new{animation:notein .6s var(--ease) .7s both}
html.js:not(.nomotion) .ask-b{opacity:0; translate:0 14px; transition:opacity .6s var(--ease) .5s, translate .7s var(--ease) .5s}
html.js.is-loaded .ask-b{opacity:1; translate:0 0}
@media (max-width:959px){ .ask-b{display:none} }
/* #6・#7 スマホの最初の画面: 特長は1列・絵を早く見せる */
@media (max-width:699px){
  .hero{padding-block:16px 40px}
  .hero .wrap{gap:26px}
  .pts{display:grid; gap:4px; margin-top:14px}
  .art{min-height:340px}
}
/* ① 本物の記録 */
.evi{margin-top:22px; border-radius:var(--r-l); background:var(--card); box-shadow:var(--sh-2); padding:24px 22px; display:grid; gap:22px}
.evi-h{display:grid; gap:8px}
.evi-h p{display:grid; gap:2px}
.evi-h p b{font:900 18px/1.45 var(--jp)}
.evi-h p span{font-size:13px; color:var(--sub)}
.evi-g{display:grid; gap:10px}
.evi-n{display:grid; gap:4px; padding:16px 18px; border-radius:var(--r-m); background:var(--beige)}
.evi-n b{font:800 clamp(34px, 4.2vw, 46px)/1 var(--en); color:var(--ink); letter-spacing:-.01em}
.evi-n b small{font:700 15px/1 var(--jp); margin-left:4px; color:var(--sub)}
.evi-n span{font:500 13.5px/1.6 var(--jp); color:var(--sub)}
.evi-bars p{font:700 13px/1 var(--jp); color:var(--sub); margin-bottom:10px}
.evi-bars ul{display:grid; gap:8px}
.evi-bars li{display:grid; grid-template-columns:8.5em 1fr 2em; align-items:center; gap:10px; font:700 13.5px/1.4 var(--jp)}
.evi-bars i{height:12px; border-radius:6px; background:var(--or-pale); position:relative; overflow:hidden}
.evi-bars i::after{content:""; position:absolute; inset:0 auto 0 0; width:calc(var(--n) / 7 * 100%); border-radius:6px; background:var(--or); transform-origin:left; transition:transform 1.1s var(--ease) .2s}
html.js:not(.nomotion) .evi:not(.is-in) .evi-bars i::after{transform:scaleX(0)}
.evi-bars b{font:800 15px/1 var(--en); text-align:right}
@media (min-width:960px){
  .evi{grid-template-columns:1fr 1fr; padding:32px 34px; gap:22px 40px}
  .evi-h{grid-column:1/-1; grid-template-columns:auto 1fr; align-items:center; gap:18px}
  .evi-g{grid-template-columns:repeat(3,1fr); grid-column:1/-1}
  .evi-bars{grid-column:1/-1}
  .evi-bars li{grid-template-columns:10em 1fr 2em}
}
.proof{display:none}
/* ① 森工業で入れたもの */
.did{display:flex; flex-wrap:wrap; gap:6px 14px}
.did li{display:flex; align-items:center; gap:8px; font:700 13.5px/1.6 var(--jp)}
.did li::before{content:""; width:16px; height:16px; flex:none; border-radius:50%; background:var(--or) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.6 2.5L12 5.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
/* #11〜#14 飾りの丸: 節の端で切らない(節の中に収める)・スマホでは出さない */
.deco--a{width:clamp(110px, 12vw, 170px); right:3%; top:64px}
.deco--b{width:clamp(110px, 12vw, 160px); left:3%; bottom:48px; border-width:clamp(16px, 2vw, 24px)}
.deco--c{width:clamp(90px, 10vw, 140px); right:5%; bottom:48px; box-shadow:none}
@media (max-width:699px){ .deco{display:none} }
/* #16 07:30 の輪を濃く */
.ring{background:conic-gradient(var(--or) var(--p, 0%), #FFC4A6 0)}
/* #17 スマホの部品の札: 左の余白をほかと同じに */
@media (max-width:959px){ .tabs-x{scroll-padding-inline:var(--gut)} .tabs-x::before{content:""; flex:none; width:0} }
/* #19 マイページの見本: 段とふきだしの間をあける */
.my .log{padding-top:16px}
.my .prog{margin-bottom:2px}
/* ⑤ 窓口の段: いま進んでいる段を強く */
.my .prog span.now{color:var(--or)}
/* #22 スマホの手順: 絵は小さく横に */
@media (max-width:699px){
  .steps4 li{grid-template-columns:112px 1fr; grid-template-rows:auto auto 1fr; column-gap:14px; row-gap:4px; padding:14px}
  .steps4 .fig{grid-row:1 / span 3; aspect-ratio:1; padding:4px; align-self:start}
  .steps4 .n{margin-top:2px}
}
/* #23 まずここから */
.link3 .here{justify-self:start; margin-top:6px; height:24px; padding:0 10px; border-radius:var(--pill); background:var(--or); color:#fff; font:700 11.5px/24px var(--jp)}
/* #27 橙の地の副題を読みやすく */
.orange .lead2{color:var(--ink); font-weight:700; font-size:clamp(15.5px, 1.6vw, 17px)}
/* #32 見本のカード: 札は1行に */
.sample .chips{flex-wrap:nowrap; overflow:hidden; -webkit-mask-image:linear-gradient(90deg, #000 88%, transparent); mask-image:linear-gradient(90deg, #000 88%, transparent)}
.sample .chip{flex:none}
/* ④ 相談の節: 見出し → 理由 → フォーム → 写真と運営(PC は 左=見出しと写真・右=フォーム) */
.contact{display:grid; gap:26px}
.c-info{display:grid; gap:4px}
.ws{margin-top:0}
.ws img{aspect-ratio:900/380}
@media (min-width:960px){
  .contact{grid-template-columns:1fr 1.05fr; grid-template-areas:"head form" "info form"; gap:32px 64px; align-items:start}
  .c-head{grid-area:head} .contact .form{grid-area:form} .c-info{grid-area:info}
}

/* ---------- v0.8b(見た目の確かめから・SHO-HAN を追加)---------- */
/* 最初の画面: 見出しが端末とぶつからないように・依頼のふきだしは右上(返事は左下)へ */
@media (min-width:960px){
  .hero .wrap{grid-template-columns:1.04fr 1fr}
  .hero h1{font-size:min(3.65vw, 54px)}
  .ask-b{left:auto; right:-30px; top:6px; bottom:auto; transform:rotate(-1.5deg); border-radius:var(--r-m) var(--r-m) 4px var(--r-m)}
  .swc{left:0}
}
/* 相談の節の写真: 画像の高さの属性に引っぱられないように */
.ws img{height:auto}
/* 確認用の札: 広い画面では左上の余白へ(中身に重ねない) */
@media (min-width:1360px){ .pv{top:20px; bottom:auto; left:16px} }
/* 記録: 「真ん中の値」 */
.evi-n span small{display:block; font-size:11.5px; color:var(--mute, #A39B90)}
/* つくったもの 2件目(SHO-HAN): 明るい地 */
.work--sub{margin-top:18px}
.pic--sh{background:linear-gradient(160deg, #EAF3FB, #F6F1EA)}
.work .did{margin-top:2px}
/* ---------- v0.8c(見た目の確かめから)---------- */
.work .pic--sh{background:linear-gradient(160deg, #E4EEF8, #F6F1EA)}
.deco--a{display:none}
@media (max-width:699px){
  .pv{display:none}
  .hero .pts{display:none}
  .steps4 .fig img{transform:scale(1.35)}
}

/* ---------- v0.8d: SeeQ(3件目)---------- */
.work .pic--sq{background:#1B1B1B}
@media (min-width:960px){ .work--rev{grid-template-columns:1fr 1.25fr} .work--rev .pic{order:2} }

/* ---------- v0.8e: 窓口の実演を動きで(打つ → 見回り → 確認用 → 公開)---------- */
.my .scr{position:relative; grid-template-rows:auto auto auto auto 1fr auto; height:680px}
.s-badge{padding:4px 9px; border-radius:var(--pill); font:800 10px/1 var(--jp); transition:background .3s, color .3s}
.s-badge.live{background:#E3F2E9; color:#1E7A4C}
.s-badge.live::before{content:"● "; font-size:8px}
.s-badge.pv{background:var(--or); color:#fff}
.s-badge.is-flip{animation:flip .5s var(--ease)}
@keyframes flip{0%{transform:rotateX(90deg)} 100%{transform:none}}
.is-ring{animation:ringp 1.1s ease-out 2}
@keyframes ringp{0%{box-shadow:0 0 0 0 rgba(255,79,0,.6)} 100%{box-shadow:0 0 0 12px rgba(255,79,0,0)}}
.my .s-news span.is-ring{border-radius:6px}
/* 見回り(専任の AI): 時計の針が回る → 直したら橙に */
.patrol{margin:10px 14px 0; display:flex; align-items:center; gap:9px; height:34px; padding:0 14px; border-radius:var(--pill); background:var(--ink); color:#fff; font:700 11.5px/1 var(--jp); opacity:0; translate:0 -6px; transition:opacity .35s, translate .35s var(--ease), background .3s}
.patrol.on{opacity:1; translate:0 0}
.patrol.done{background:var(--or)}
.clk{position:relative; width:16px; height:16px; border-radius:50%; border:2px solid currentColor; flex:none}
.clk::before, .clk::after{content:""; position:absolute; left:50%; bottom:50%; width:2px; margin-left:-1px; background:currentColor; transform-origin:50% 100%; border-radius:1px}
.clk::before{height:5px}
.clk::after{height:6px; animation:spin 1.4s linear infinite}
.patrol.done .clk::after{animation:none; transform:rotate(90deg)}
@keyframes spin{to{transform:rotate(360deg)}}
/* 入力欄: 文字が打たれて、送る */
.cmp{display:flex; align-items:center; gap:2px; height:40px; padding:0 5px 0 14px; border-radius:var(--pill); background:var(--beige); font:500 12.5px/1 var(--jp); color:var(--ink); overflow:hidden; white-space:nowrap}
.cmp #dType:empty::before{content:"直してほしいことを書く"; color:var(--sub)}
.cmp .caret{width:1.5px; height:15px; background:var(--ink); animation:blink 1s steps(1) infinite}
.cmp .send{margin-left:auto; height:30px; padding:0 14px; border-radius:var(--pill); background:var(--ink); color:#fff; font:700 11.5px/30px var(--jp); flex:none; transition:transform .15s}
.is-press{transform:scale(.9)}
/* 指 */
.tap{position:absolute; left:0; top:0; z-index:6; width:28px; height:28px; margin:-14px 0 0 -14px; border-radius:50%; background:rgba(31,22,20,.28); border:2px solid #fff; box-shadow:0 4px 12px rgba(0,0,0,.25); opacity:0; pointer-events:none; transition:translate .55s var(--ease), opacity .2s, scale .15s}
.tap.on{opacity:1}
.tap.press{scale:.72; background:rgba(255,79,0,.55)}
@media (prefers-reduced-motion:reduce){ .tap{display:none} }
.msg small time{margin-left:8px; font:700 10px/1 var(--en); opacity:.75}
.patrol{height:0; margin-top:0; overflow:hidden; transition:opacity .35s, translate .35s var(--ease), background .3s, height .35s var(--ease), margin .35s var(--ease)}
.patrol.on{height:34px; margin-top:10px}

/* ======================================================================
   v0.9(2026-10-08 ショウ/Opus)— 採点 RECOA_LP_02 から
   ====================================================================== */
/* ② 最初の画面の下: 本物の記録の3つの数字 */
.hero-rec{display:flex; flex-wrap:wrap; gap:10px; margin-top:24px}
.hero-rec li{display:grid; gap:2px; padding:10px 16px 12px; border-radius:var(--r-m); background:var(--card); box-shadow:var(--sh-1); min-width:118px}
.hero-rec b{font:800 26px/1 var(--en); color:var(--ink)}
.hero-rec b small{font:700 12px/1 var(--jp); color:var(--sub); margin-left:3px}
.hero-rec span{font:700 12px/1.4 var(--jp); color:var(--sub)}
.hero-rec-n{margin-top:8px; font-size:11.5px; color:var(--sub)}
@media (max-width:699px){
  .hero .lead{font-size:15px}
  .hero-rec{display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:16px}
  .hero-rec li{min-width:0; padding:8px 10px}
  .hero-rec b{font-size:20px}
  .hero-rec span{font-size:10.5px}
  .hero-rec-n{display:none}
  /* ④ スマホ: 返事の札は見本の画面を隠さない位置へ・入れ替わりの点を大きく */
  .note{left:auto; right:2%; bottom:-6%; width:min(56%, 220px)}
}
/* 入れ替わりの点: 大きく・間を広く */
.swc .dots{gap:7px}
.swc .dots i{width:9px; height:9px}
/* ③ 仕組みの3枚: 順に光る・矢印が伸びる */
html.js:not(.nomotion) #mechFlow li{transition:transform .6s var(--ease), box-shadow .6s, opacity .6s}
html.js:not(.nomotion) #mechFlow:not(.is-go) li{opacity:.45}
html.js:not(.nomotion) #mechFlow.is-go li:nth-child(1){transition-delay:.1s} html.js:not(.nomotion) #mechFlow.is-go li:nth-child(2){transition-delay:.7s} html.js:not(.nomotion) #mechFlow.is-go li:nth-child(3){transition-delay:1.3s}
@media (min-width:960px){
  html.js:not(.nomotion) .mech li + li::before{transform-origin:left; transform:scaleX(0); transition:transform .5s var(--ease)}
  html.js:not(.nomotion) #mechFlow.is-go li:nth-child(2)::before{transform:none; transition-delay:.45s}
  html.js:not(.nomotion) #mechFlow.is-go li:nth-child(3)::before{transform:none; transition-delay:1.05s}
}
/* 上の帯: 透けない・どの節の上でも温かい白 */
.hd{background:rgba(255,254,251,.98)}
/* 見出しの後ろの小さな説明 */
.work h3 small{display:block; font:700 14px/1.5 var(--jp); color:var(--sub); margin-top:2px}
/* 入れたもの: 2列にそろえる */
.did{display:grid; grid-template-columns:1fr 1fr; gap:6px 14px}
@media (max-width:420px){ .did{grid-template-columns:1fr} }
/* 見本のカード: 札は2つまでで切らない */
.sample .chips{flex-wrap:wrap; -webkit-mask-image:none; mask-image:none; max-height:66px; overflow:hidden}
.sample .chip:nth-child(n+3){display:none}
/* ドメインの札: 中身の高さに */
.two{align-items:start}
/* 料金の札の前の空き */
#next{padding-bottom:72px}
#faq{padding-top:56px}
/* 工房の写真: 明るく(黄ばみを抑える) */
.ws img{filter:brightness(1.12) saturate(.92) sepia(.04)}
/* 手順の札の本文を読みやすく */
.steps4 p{color:var(--ink2, #4A3F3A)}
/* 一番下の大きな RECOA を真ん中に */
.big{transform:translateX(-.06em)}
@media (max-width:699px){ .note{display:none} }

/* ======================================================================
   v1.0(2026-10-08 ショウ/Opus)— 採点 RECOA_LP_03 から
   ====================================================================== */
/* ① 入れ替わり: 前の絵と透けて重ならない(上から開くだけ)・録画 */
.screen img{transition:none}
.screen video.sv{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top; z-index:2; background:transparent; transition:opacity .35s}
.screen video.sv.is-off{opacity:0; pointer-events:none}
/* 入れ替わりの点: いまの点は長い棒 */
.swc .dots i.on{width:22px; border-radius:5px}
/* ② 見本のカード: 最初の画面を大きく */
.sample .shot img{object-position:top}
.h3 .cnt4{margin-left:12px; font:700 13px/1 var(--jp); color:var(--sub)}
/* ③ 見本の画面の札 */
.my .top .mihon{margin-left:8px; padding:3px 8px; border-radius:var(--pill); background:var(--or-pale); color:var(--or); font:800 10px/1 var(--jp); font-style:normal}
/* ③ つくったものの数: 公開中のサイト */
.bignum small{font:800 13px/1.3 var(--jp); letter-spacing:.04em}
/* ④ 最初の画面: 次の節の見出しが下端で半分に切れない */
@media (min-width:960px){ .hero{min-height:calc(100svh - 68px); display:grid; align-content:center} }
/* ④ グッズと会員: 相談のあとに小さく */
.next-s{padding-block:56px}
.next-s .h2{font-size:clamp(20px, 2.4vw, 26px)}
/* ⑤ 窓口の見本: 吹き出しが進み具合の帯の下に潜らない */
.my .log{padding-top:10px; scroll-padding-top:10px}
.my .prog{position:relative; z-index:1; background:var(--bg); padding-bottom:6px}
/* ⑤ 下線を字にかぶせない */
.hl2{background-position:0 100%; padding-bottom:.04em}
/* ⑤ 1〜2文字だけの行 */
.newline, .desk-cta b, .desk-cta span, .steps4 p{word-break:auto-phrase}
.desk-cta span{white-space:nowrap}
/* ⑤ 上の帯: スマホでも透けない */
.hd{background:#FFFEFB; backdrop-filter:none; -webkit-backdrop-filter:none}
/* ⑤ 時刻のつまみの線を温かい色に */
input[type=range]{accent-color:var(--or)}
/* ⑤ 「まずここから」の札も、ほかと同じ重さに */
.link3 li.now{box-shadow:var(--sh-1)}
/* ⑤ 下の案内: 「相談する」だけ下線にしない */
.ft-links a{text-decoration:none !important}
/* ⑤ 必須の印 */
.req{margin-left:8px; padding:3px 7px; border-radius:var(--pill); background:var(--or-pale); color:var(--or); font:800 10.5px/1 var(--jp); font-style:normal; vertical-align:1px}
/* ⑤ スマホ: 部品の札は指で送れる印 */
@media (max-width:959px){ .tabs-col::after{content:"← 指で送れます →"; display:block; margin-top:2px; font:700 11px/1 var(--jp); color:var(--sub); text-align:center} }
.work .did{grid-template-columns:1fr; gap:4px}

/* ======================================================================
   v1.1(2026-10-08 ショウ/Opus)— 採点 RECOA_LP_04 から
   ====================================================================== */
/* ① 最初の画面: 上に見出し、下に大きな作品の画面(PC)。スマホは 見出し → 作品の画面 → 記録の数字 */
@media (min-width:960px){
  .hero--wide{min-height:0; padding-block:28px 40px}
  .hero--wide .wrap{grid-template-columns:1fr; gap:26px; max-width:1180px}
  .hero--wide .hero-copy{display:grid; grid-template-columns:1fr auto; grid-template-areas:"tag tag" "h1 h1" "lead rec" "cta rec"; gap:0 56px; align-items:start}
  .hero--wide .tag{grid-area:tag; justify-self:start}
  .hero--wide h1{grid-area:h1; font-size:min(3.7vw, 52px); margin-top:14px}
  .hero--wide h1 > span{display:inline}
  .hero--wide .lead{grid-area:lead; margin-top:14px; max-width:40em}
  .hero--wide .cta{grid-area:cta; margin-top:18px}
  .hero--wide .hero-rec{grid-area:rec; align-self:end; margin-top:0}
  .hero--wide .hero-rec-n{display:none}
  .hero--wide .art{width:min(100%, 980px); justify-self:center; aspect-ratio:980/660; min-height:0; margin-right:0}
  .hero--wide .browser{top:46px; left:0; width:90%}
  .hero--wide .swc{top:0; left:0}
  .hero--wide .float-wrap.phone-w .phone{right:0; bottom:2%; width:17%; max-width:190px}
  .hero--wide .art .disc{width:460px; right:-90px; top:-30px}
  .hero--wide .note{left:-36px; bottom:6%; width:260px}
}
@media (max-width:959px){
  .hero--wide .hero-copy{display:contents}
  .hero--wide .wrap{gap:0}
  .hero--wide .art{order:5; margin-top:26px}
  .hero--wide .hero-rec{order:6; margin-top:44px}
  .hero--wide .hero-rec-n{order:7}
}
/* ② 切り替えの幕 */
.screen::after{content:""; position:absolute; inset:0; z-index:4; background:var(--tile); opacity:0; pointer-events:none; transition:opacity .2s}
.screen.is-blank::after{opacity:1}
/* ③ つくったものの録画 */
.screen video.wv{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top; z-index:2; opacity:0; transition:opacity .4s}
.screen video.wv.on{opacity:1}
.work .pic .browser .screen{aspect-ratio:16/10}
/* ⑤ 節の色の緩急(並べ替えたので): 公開したあとの節はベージュ・料金と質問もベージュ */
.mech-sec{background:var(--beige)}
#faq{background:var(--beige)}
/* ④ 見出しの下線: 字に重ねず、少し下に */
.hl2{background:none !important; text-decoration:underline; text-decoration-color:var(--or); text-decoration-thickness:.13em; text-underline-offset:.2em; text-decoration-skip-ink:none}
/* ④ スマホの折り返し */
.bignum small{white-space:nowrap}
@media (max-width:699px){ .head--big{grid-template-columns:1fr; gap:6px} .head--big .bignum{justify-self:start} }
/* ④ 必須の札: 名前の横に小さく */
.form label > span{display:flex; align-items:center; gap:0}
.form .req{flex:none}

/* ======================================================================
   v1.2(2026-10-08 ショウ/Opus)— 採点 RECOA_LP_05 から
   ====================================================================== */
/* ① 切り替え: 幕を使わない・録画は流れ始めた時に一瞬で出す */
.screen.is-blank::after{opacity:0}
.screen video.sv{transition:none}
/* ③ 録画が枠の外の物(スマホの枠)の上に出ない */
.screen{isolation:isolate}
/* ② 最初の画面: 左に2行の大きな見出し、右に大きめの作品の画面。画面の高さに収める(PC) */
@media (min-width:960px){
  .hero--wide{padding-block:24px 36px}
  .hero--wide .wrap{grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr); gap:24px 40px; max-width:1240px; align-items:center}
  .hero--wide .hero-copy{display:block}
  .hero--wide h1{font-size:min(3.4vw, 48px); margin-top:16px}
  .hero--wide h1 > span{display:block}
  .hero--wide .lead{margin-top:18px; max-width:30em}
  .hero--wide .cta{margin-top:24px}
  .hero--wide .hero-rec{margin-top:24px}
  .hero--wide .hero-rec-n{display:block}
  .hero--wide .art{width:auto; aspect-ratio:760/560; justify-self:stretch; margin-right:-40px}
  .hero--wide .browser{top:46px; width:94%}
  .hero--wide .float-wrap.phone-w .phone{right:0; bottom:0; width:21%; max-width:170px}
  .hero--wide .art .disc{width:440px; right:-80px; top:-10px}
}
/* ⑤ 返事のカードは作品のボタンに被るので、最初の画面では出さない(窓口の節で見せる) */
.hero .note{display:none}
@media (min-width:960px){ .hero--wide h1{font-size:min(3.05vw, 44px)} .hero--wide .wrap{grid-template-columns:minmax(0, .84fr) minmax(0, 1.16fr)} }

/* ======================================================================
   v1.3(2026-10-08 ショウ/Opus)— 採点 RECOA_LP_06 から
   ====================================================================== */
/* ① 見出しの大きさの順: 最初の見出し > 節の見出し > カードの見出し(節の見出しを一段小さく) */
.h2--xl{font-size:clamp(28px, 3.6vw, 46px)}
.h2--xxl{font-size:clamp(32px, 4vw, 52px)}
.bignum{font-size:clamp(56px, 7vw, 104px)}
@media (min-width:960px){
  .hero--wide .wrap{grid-template-columns:minmax(0, .88fr) minmax(0, 1.12fr)}
  .hero--wide h1{font-size:min(3.75vw, 54px); line-height:1.25}
  /* 作品の画面は1つを大きく(右の端まで)。スマホの枠は最初の画面では出さない */
  .hero--wide .art{margin-right:calc(-1 * max(40px, (100vw - 1240px) / 2 + 40px)); aspect-ratio:auto; height:auto; padding-top:46px}
  .hero--wide .float-wrap.fb1{position:relative; inset:auto}
  .hero--wide .browser{position:relative; top:0; left:0; width:100%; border-radius:14px 0 0 14px; border-right:0}
  .hero--wide .float-wrap.phone-w{display:none}
  .hero--wide .art .disc{width:520px; right:-120px; top:-20px}
}
/* ① 作品を送る点 → 名前のボタン */
.swc .dots{display:flex; flex-wrap:wrap; gap:4px}
.swc .dots button{height:26px; padding:0 10px; border-radius:var(--pill); background:transparent; font:700 11.5px/26px var(--jp); color:var(--sub); transition:background .25s, color .25s}
.swc .dots button:hover{background:var(--or-pale)}
.swc .dots button.on{background:var(--ink); color:#fff}
@media (max-width:699px){ .swc{flex-wrap:wrap} .swc .dots button{height:24px; padding:0 8px; font-size:11px} }
/* ② 手順の模型: 見えたら 1 → 4 の順に、ぽんと動く */
@keyframes pop{0%{opacity:0; transform:translateY(18px) scale(.86)} 55%{opacity:1; transform:translateY(-6px) scale(1.05)} 100%{opacity:1; transform:none}}
html.js:not(.nomotion) .steps4 li .fig img{opacity:0; translate:none; transition:none}
html.js:not(.nomotion) .steps4 li.is-in .fig img{animation:pop .9s var(--ease) both}
html.js:not(.nomotion) .steps4 li:nth-child(2).is-in .fig img{animation-delay:.25s}
html.js:not(.nomotion) .steps4 li:nth-child(3).is-in .fig img{animation-delay:.5s}
html.js:not(.nomotion) .steps4 li:nth-child(4).is-in .fig img{animation-delay:.75s}
/* 手順の模型を大きく */
.steps4 .fig{padding:0}
.steps4 .fig img{transform-origin:50% 60%}
.steps4 li .fig img{scale:1.12}
/* ③ 工房の写真(つくるまで) */
.flow-ws{margin-top:22px; display:grid; border-radius:var(--r-l); overflow:hidden; background:var(--card); box-shadow:var(--sh-1)}
.flow-ws img{width:100%; height:auto; aspect-ratio:900/380; object-fit:cover; filter:brightness(1.1) saturate(.92)}
.flow-ws figcaption{display:grid; gap:4px; padding:16px 20px 18px}
.flow-ws figcaption b{font:900 16px/1.4 var(--jp)}
.flow-ws figcaption span{font-size:14px; color:var(--sub)}
@media (min-width:960px){ .flow-ws{grid-template-columns:1.6fr 1fr; align-items:center} .flow-ws img{height:100%} .flow-ws figcaption{padding:24px 30px} }
#flow{padding-bottom:72px}
/* ④ スマホの見出しの改行 */
@media (max-width:699px){ .h2--xl{font-size:clamp(28px, 8vw, 36px)} }
/* ⑤ つくったもの: 作品の画面は枠の真ん中に・左右の向きはそろえる */
.work .pic{align-items:center; padding:28px 28px}
.work .pic .browser{border-radius:12px; border-bottom:1px solid var(--line)}
@media (min-width:960px){ .work .pic{padding:40px 36px} }
.work .chips{flex-wrap:nowrap; overflow:hidden}
/* ⑤ 見本のカード: 絵が枠いっぱい(下にベージュの帯を出さない) */
.sample .shot{aspect-ratio:16/10}
.sample .shot img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top}
.sample .chips{flex-wrap:nowrap}
.sample .chip{font-size:11.5px; padding:0 10px}
/* ⑤ 窓口: 吹き出しの上の切れを、上をぼかして自然に */
.my .log{-webkit-mask-image:linear-gradient(transparent 0, #000 22px); mask-image:linear-gradient(transparent 0, #000 22px)}
/* ⑤ 細かい所 */
.mech .mech-ai{transform:none}
html.js:not(.nomotion) .mech .mech-ai{opacity:1}
.desk .lead2{margin-top:18px}
.tabs-col::after{margin-top:10px}
.two{align-items:stretch}
.pricebar{align-items:flex-start}
.orange .cpts li{font-weight:700}
.form ::placeholder{color:#B8ADA2; font-weight:400}
.link3 li{position:relative}
.link3 .here{position:absolute; top:18px; right:18px; margin:0}
.big i{width:.64em; height:.64em; transform:translateY(-.03em)}
/* v1.3b: 数え上がりの数字に、下の説明文の指定が当たっていた */
.hero-rec b .cntup, .evi-n b .cntup{font:inherit; color:inherit; letter-spacing:inherit; display:inline}
/* 名前のボタンが縮まない・スマホでは2段目に */
.swc{flex-wrap:wrap; row-gap:6px}
.swc .dots{flex-wrap:nowrap}
.swc .dots button{flex:none; white-space:nowrap}
@media (min-width:960px){ .hero--wide h1{font-size:min(3.55vw, 51px)} .hero--wide .swc{top:-6px} }
@media (max-width:959px){ .swc .dots{flex-wrap:wrap; width:100%} .swc{top:-62px} .hero--wide .art{margin-top:84px} }
.swc .dots button{width:auto; display:inline-block; box-shadow:none; place-items:initial}
.swc .dots{background:var(--card); border-radius:var(--pill); padding:3px; box-shadow:var(--sh-1)}
@media (max-width:959px){ .swc .dots{width:auto; flex-wrap:nowrap; padding:2px} .swc .dots button{padding:0 6px; font-size:10.5px; height:24px} }
/* v1.3c: 使いやすさ(Lighthouse)— 光る前に薄くしない・小さな橙の字は濃い橙に */
html.js:not(.nomotion) #mechFlow:not(.is-go) li{opacity:1}
@keyframes litcard{0%{box-shadow:0 0 0 0 rgba(255,79,0,.55), var(--sh-1)} 100%{box-shadow:0 0 0 14px rgba(255,79,0,0), var(--sh-1)}}
html.js:not(.nomotion) #mechFlow.is-go li{animation:litcard 1s var(--ease) both}
html.js:not(.nomotion) #mechFlow.is-go li:nth-child(2){animation-delay:.6s} html.js:not(.nomotion) #mechFlow.is-go li:nth-child(3){animation-delay:1.2s}
.swc .now em, .tabs-x button b, .lbl, .steps4 .n, .link3 li b{color:#C93D00}
.dark .lbl, .orange .lbl{color:inherit}
.dark .lbl{color:var(--or)}
/* v1.3d: 採点 RECOA_LP_07 から — 最初の画面の右上を静かに(名前のボタンだけ)・スマホの札を割らない・相談の節の写真 */
.swc .now{display:none}
.chip{white-space:nowrap}
@media (max-width:699px){ .head--big{display:block} .head--big .h2{white-space:nowrap} .work .chips{flex-wrap:wrap; overflow:visible} }
.ws img{aspect-ratio:900/420; filter:none}
.flow-ws img{filter:brightness(1.16) saturate(.95)}

/* ======================================================================
   v1.4(2026-10-08 ショウ/Opus)— 森さん「PCTOPバランス悪いかも」+ 採点 RECOA_LP_07 の残り
   ====================================================================== */
/* PC の最初の画面: 作品の画面は幅の中に収める(右にはみ出さない)・橙の円は画面の後ろに小さく・左右の上下をそろえる */
@media (min-width:960px){
  .hero--wide{padding-block:56px 64px}
  .hero--wide .wrap{grid-template-columns:minmax(0, 1fr) minmax(0, 1.08fr); gap:0 56px; max-width:1240px; align-items:center}
  .hero--wide .art{margin-right:0; padding-top:44px}
  .hero--wide .browser{border-radius:14px; border-right:1px solid var(--line)}
  .hero--wide .art .disc{width:380px; right:-48px; top:auto; bottom:-36px}
  .hero--wide .swc{top:0; left:0}
  .hero--wide .hero-copy .tag{margin-top:0}
  .hero--wide .hero-rec{margin-top:28px}
}
/* 最初の画面の数字の箱: 大きく・説明も読める */
.hero-rec b{font-size:30px}
.hero-rec span{font-size:12.5px; color:var(--ink2, #4A3F3A)}
.hero-rec-n{font-size:12.5px; color:var(--sub)}
/* 名前のボタン: 押したあとの灰色を残さない・スマホで幅に収める */
.swc .dots button:focus:not(:focus-visible){background:transparent}
.swc .dots button.on:focus{background:var(--ink)}
@media (max-width:420px){ .swc .dots button{padding:0 5px; font-size:10px} }
/* 仕組みの3枚: 幅をそろえる */
@media (min-width:960px){ .mech{grid-template-columns:1fr 1fr 1fr} }
/* 「公開したあとも、ずっと同じ窓口で。」: 字の大きさを1つに */
.desk-cta b .nw{font:inherit; color:inherit; display:inline; margin:0}
/* 相談の節: 全面の橙をやめ、淡い橙の地に(橙は差し色) */
.orange{background:#FFE7D9}
.orange .form{box-shadow:var(--sh-2)}
.orange .cpts li::before{background:var(--or)}
.orange .lbl{color:#C93D00}
/* 下の大きなロゴ: 丸が C に触れない */
.big i{margin:0 .07em}
/* できること: 左の目次を詰める(右の見本の箱と高さを釣り合わせる) */
@media (min-width:960px){ .tabs-x button{min-height:46px; padding:9px 16px} .tabs-x{gap:2px} }
/* v1.4b: 最初の画面の幅を、上の帯やほかの節と同じに(左端をそろえる) */
@media (min-width:960px){ .hero--wide .wrap{max-width:var(--maxw); grid-template-columns:minmax(0, 1fr) minmax(0, 1.1fr); gap:0 48px} .hero--wide h1{font-size:min(3.3vw, 47px)} .hero--wide .art .disc{width:340px; right:-40px; bottom:-30px} }

/* ======================================================================
   v1.5(2026-10-08 ショウ/Opus)— 採点 RECOA_LP_09 から
   ====================================================================== */
/* ① 最初の画面: 幅はそろえたまま、作品の窓を主役に(左右の割合を入れ替える)。作品の画面は 860 幅で撮った物(字が大きく写る) */
@media (min-width:960px){
  .hero--wide .wrap{grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr); gap:0 44px}
  .hero--wide h1{font-size:min(3vw, 43px)}
  .hero--wide .lead{max-width:26em}
  .hero--wide .art .disc{width:420px; right:-56px; bottom:-48px}
}
@media (max-width:959px){ .hero .cta{margin-top:18px} .hero--wide .art{margin-top:72px} }
/* 名前のボタン: 乗せた時は色だけ(灰色の地を残さない) */
.swc .dots button:hover{background:transparent; color:var(--ink)}
.swc .dots button.on:hover{background:var(--ink); color:#fff}
/* ③ 手順の模型: 少し回って止まる */
@keyframes pop2{0%{opacity:0; transform:translateY(18px) rotate(-10deg) scale(.86)} 55%{opacity:1; transform:translateY(-6px) rotate(4deg) scale(1.05)} 100%{opacity:1; transform:none}}
html.js:not(.nomotion) .steps4 li.is-in .fig img{animation-name:pop2}
/* ④ 工房の写真: 大きく・横いっぱいに近く */
.flow-ws img{aspect-ratio:900/420; filter:none}
@media (min-width:960px){ .flow-ws{grid-template-columns:2.2fr 1fr} }
/* ⑤ 直しの時刻の表 */
.evi-time{grid-column:1/-1}
.evi-time p{font:700 13px/1 var(--jp); color:var(--sub); margin-bottom:10px}
.evi-time table{width:100%; border-collapse:collapse; font:700 14px/1.5 var(--jp)}
.evi-time th{font:700 12px/1.4 var(--jp); color:var(--sub); text-align:left; padding:6px 10px; border-bottom:1px solid var(--line)}
.evi-time td{padding:9px 10px; border-bottom:1px solid var(--line); font-family:var(--en); font-variant-numeric:tabular-nums}
.evi-time td small{display:inline-block; margin-left:8px; padding:2px 8px; border-radius:var(--pill); background:var(--or-pale); color:#C93D00; font:700 11px/1.4 var(--jp)}
.evi-time tr.night td:first-child{color:var(--sub)}
@media (max-width:699px){ .evi-time table{font-size:12.5px} .evi-time th, .evi-time td{padding:7px 6px} .evi-time td small{display:block; margin:4px 0 0; width:max-content} }
/* v1.5b: 左の列を詰める(見出しが札の列にかからない・数字の箱は1段)*/
@media (min-width:960px){ .hero--wide h1{font-size:min(2.75vw, 40px)} .hero--wide .lead{font-size:15.5px; max-width:none} .hero--wide .hero-rec{flex-wrap:nowrap; gap:8px} .hero--wide .hero-rec li{min-width:0; padding:9px 12px 10px} .hero--wide .hero-rec b{font-size:24px} .hero--wide .hero-rec span{font-size:11.5px} .hero--wide .hero-rec-n{font-size:11.5px} }
.hero--wide .hero-rec b .cntup, .hero-rec b .cntup, .evi-n b .cntup{font:inherit !important; color:inherit !important}
@media (max-width:959px){ .swc{flex-wrap:nowrap; gap:4px; top:-40px; right:0} .swc button#scPause{width:28px; height:28px; flex:none} .swc .dots{overflow-x:auto; scrollbar-width:none; flex-wrap:nowrap; width:auto; min-width:0} .swc .dots::-webkit-scrollbar{display:none} .hero--wide .art{margin-top:52px} }

/* ======================================================================
   v1.6(2026-10-08)— 森さん「こんなのできるよー！ってのが大事」・料金
   ====================================================================== */
.hero-can{margin-top:26px}
.hero-can p{font:700 12.5px/1 var(--jp); color:var(--sub); margin-bottom:10px}
.hero-can ul{display:flex; flex-wrap:wrap; gap:6px}
.hero-can a{display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 13px; border-radius:var(--pill); background:var(--card); box-shadow:var(--sh-1); font:700 12.5px/1 var(--jp); color:var(--ink); text-decoration:none; transition:background .2s}
.hero-can a::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--or)}
.hero-can a:hover{background:var(--or-pale)}
.head--big{grid-template-columns:1fr}
/* 料金 */
.pricebar{display:grid; gap:14px; align-items:start}
.price-g{display:grid; gap:12px}
.price-i{padding:18px 20px; border-radius:var(--r-m); background:var(--beige)}
.pk{font:700 13px/1 var(--jp); color:var(--sub)}
.pval{margin-top:10px; font:900 18px/1.2 var(--jp)}
.pval b{font:800 clamp(30px, 3.4vw, 40px)/1 var(--en); margin:0 2px}
.pval span{margin:0 6px; color:var(--sub)}
.pval small{font-size:13px; margin-left:4px; color:var(--sub)}
.pn{margin-top:8px; font-size:13.5px; color:var(--sub)}
.price-n{font-size:13.5px; color:var(--sub)}
@media (min-width:700px){ .price-g{grid-template-columns:1fr 1fr} }
.pricebar .pval b{display:inline; margin:0 2px; font:800 clamp(30px, 3.4vw, 40px)/1 var(--en)}
.pricebar{grid-template-columns:1fr; justify-items:stretch}
.pricebar .price-g{width:100%}

/* ======================================================================
   v1.7(2026-10-08)— 裏の仕組み(SHO-HAN のデモ)・作るたびに強くなる
   ====================================================================== */
.sys{display:grid; gap:40px}
.sys .head{margin-bottom:24px}
.sys-steps{display:grid; gap:8px}
.sys-steps li{display:flex; gap:14px; align-items:center; padding:12px 16px; border-radius:var(--r-m); background:var(--card); box-shadow:var(--sh-1); font-weight:700; font-size:15px; line-height:1.5}
.sys-steps b{font-size:13px; color:#C93D00; flex:none}
.sys-demo{margin-top:26px}
.sys-demo > p:first-child{font:900 16px/1.4 var(--jp); margin-bottom:10px}
.sys-demo > p:first-child small{display:block; font:500 12.5px/1.5 var(--jp); color:var(--sub); margin-top:2px}
.sys-demo ul{display:flex; flex-wrap:wrap; gap:6px}
.sys-demo a{display:inline-flex; align-items:center; gap:7px; min-height:44px; padding:0 16px; border-radius:var(--pill); background:var(--ink); color:#fff; font:700 13.5px/1 var(--jp); text-decoration:none; transition:background .2s, transform .15s var(--ease)}
.sys-demo a::after{content:"↗"; font-family:var(--en); color:var(--or)}
.sys-demo a:hover{background:#3A2E2A}
.sys-demo a:active{transform:scale(.98)}
.sys-n{margin-top:12px; font-size:13px; color:var(--sub)}
.sys-art{position:relative; aspect-ratio:4/3.1; align-self:center}
.sys-art img{width:100%; height:auto}
.sys-tab{position:absolute; left:0; top:5%; width:78%; border-radius:14px; overflow:hidden; background:#fff; box-shadow:var(--sh-2); border:6px solid var(--ink)}
.sys-ph{position:absolute; right:0; top:14%; width:27%; border-radius:18px; overflow:hidden; background:#fff; box-shadow:var(--sh-2); border:5px solid var(--ink); aspect-ratio:420/760}
.sys-ph img{height:100%; object-fit:cover; object-position:top}
.sys-kt{position:absolute; left:5%; bottom:0; width:31%; border-radius:var(--r-m); overflow:hidden; background:#fff; box-shadow:var(--sh-2)}
.sys-kt span{position:absolute; top:8px; left:8px; padding:3px 9px; border-radius:var(--pill); background:var(--or-pale); font:700 11px/1.4 var(--jp)}
.sys-new{position:absolute; left:15%; top:76%; width:23%; padding:5px 7px; border-radius:6px; background:#fff; border:2px solid var(--or); font:700 clamp(9px, 1vw, 12px)/1.3 var(--jp); font-style:normal; box-shadow:0 6px 18px rgba(255,79,0,.28)}
.sys-new b{display:block; color:#C93D00}
html.js:not(.nomotion) .sys-art .sys-ph{opacity:0; transform:translateY(30px)}
html.js:not(.nomotion) .sys-art .sys-kt{opacity:0; transform:translateY(30px)}
html.js:not(.nomotion) .sys-art .sys-new{opacity:0; transform:scale(.6)}
html.js:not(.nomotion) .sys-art.is-in .sys-ph{animation:sysIn .7s var(--ease) .2s both}
html.js:not(.nomotion) .sys-art.is-in .sys-new{animation:sysPop .6s var(--ease) 1.1s both, sysGlow 2.4s ease-in-out 2s infinite}
html.js:not(.nomotion) .sys-art.is-in .sys-kt{animation:sysIn .7s var(--ease) 1.8s both}
@keyframes sysIn{from{opacity:0; transform:translateY(30px)} to{opacity:1; transform:none}}
@keyframes sysPop{0%{opacity:0; transform:scale(.6)} 60%{opacity:1; transform:scale(1.08)} 100%{opacity:1; transform:none}}
@keyframes sysGlow{0%,100%{box-shadow:0 6px 18px rgba(255,79,0,.28)} 50%{box-shadow:0 6px 26px rgba(255,79,0,.55)}}
@media (min-width:960px){ .sys{grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr); gap:56px; align-items:center} }

.grow{display:grid; gap:36px; align-items:center}
.loop{position:relative; width:min(100%, 420px); aspect-ratio:1; margin-inline:auto}
.loop::before{content:""; position:absolute; inset:13%; border-radius:50%; border:2px dashed rgba(31,22,20,.16)}
.loop ol{position:absolute; inset:0}
.loop li{position:absolute; width:34%; aspect-ratio:1; display:grid; place-items:center; text-align:center; border-radius:50%; background:var(--card); box-shadow:var(--sh-1); font:900 clamp(12.5px, 1.4vw, 15px)/1.4 var(--jp)}
.loop li:nth-child(1){left:33%; top:0}
.loop li:nth-child(2){right:0; top:33%}
.loop li:nth-child(3){left:33%; bottom:0}
.loop li:nth-child(4){left:0; top:33%}
.loop-c{position:absolute; inset:36%; display:grid; place-content:center; text-align:center; font:900 14px/1.4 var(--jp); color:var(--sub)}
.loop-c .en{display:block; font-size:22px; color:#C93D00; font-weight:800}
html.js:not(.nomotion) .loop.is-in li{animation:loopOn 6s linear infinite}
html.js:not(.nomotion) .loop.is-in li:nth-child(2){animation-delay:1.5s}
html.js:not(.nomotion) .loop.is-in li:nth-child(3){animation-delay:3s}
html.js:not(.nomotion) .loop.is-in li:nth-child(4){animation-delay:4.5s}
@keyframes loopOn{0%,22%{background:var(--ink); color:#fff; transform:scale(1.06)} 26%,100%{background:var(--card); color:var(--ink); transform:none}}
html.js:not(.nomotion) .loop.is-in::before{animation:loopTurn 24s linear infinite}
@keyframes loopTurn{to{transform:rotate(360deg)}}
.grow-c{display:grid; gap:12px}
.grow-c li{padding:20px 22px; border-radius:var(--r-m); background:var(--beige)}
.grow-c h3{font:900 17px/1.4 var(--jp)}
.grow-c p{margin-top:6px; font-size:14.5px; color:var(--sub)}
.grow-n{margin-top:22px; font-size:13px; color:var(--sub)}
@media (min-width:960px){ .grow{grid-template-columns:minmax(0, 1fr) minmax(0, 1.1fr); gap:56px} }

/* v1.7b: スマホは 見出し → 画面の写真 → 手順 → デモの入口 */
@media (max-width:959px){
  .sys{gap:22px}
  .sys-copy{display:contents}
  .sys .head{order:1; margin-bottom:0}
  .sys-art{order:2; margin-block:6px 10px}
  .sys-steps{order:3}
  .sys-demo{order:4; margin-top:8px}
}
/* v1.7c: カルテの絵が「新しい予約」の札を隠さないよう、台帳の右下へ */
.sys-kt{left:auto; right:29%; bottom:0}

/* ======================================================================
   v1.8(2026-10-08)— 採点 RECOA_LP_10 から
   ====================================================================== */
/* ① 最初の画面: 作品の画面を主役の大きさに(幅の中に収めたまま・森さん「PCTOPバランス」)・札は2×2 */
@media (min-width:960px){
  .hero--wide .wrap{grid-template-columns:minmax(0, .7fr) minmax(0, 1.3fr); gap:0 40px}
  .hero--wide h1{font-size:min(2.5vw, 36px)}
  .hero--wide .lead{font-size:15px}
  .hero--wide .art .disc{width:400px; right:-40px; bottom:-40px}
  .hero-can ul{display:grid; grid-template-columns:repeat(2, max-content)}
}
/* スマホ: 作品の画面をボタンのすぐ下へ(札はそのあと) */
@media (max-width:959px){ .hero--wide .hero-can{order:6; margin-top:22px} .hero--wide .art{margin-top:60px} }
/* ② 作品の画面の下の切れ目を、なじませる(ボタンが半分で切れて見えない) */
.screen::before{content:""; position:absolute; left:0; right:0; bottom:0; height:16%; z-index:3; pointer-events:none; background:linear-gradient(rgba(241,235,225,0), rgba(241,235,225,.96))}
.phone .screen::before{height:10%}
.sample .shot{position:relative}
.sample .shot::after{content:""; position:absolute; left:0; right:0; bottom:0; height:18%; pointer-events:none; background:linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.95))}
/* ⑥ 森工業の枠: スマホの絵が立体の文字を隠さないよう小さく右下へ */
@media (min-width:960px){ #mkPic .phone{width:19%; right:2%; bottom:4%} }
/* ④ 料金の数字は濃く・本文の灰色を一段濃く */
:root{--sub:#5C554E}
.pricebar .pval, .pricebar .pval b{color:var(--ink)}
.pricebar .pval span, .pricebar .pval small{color:var(--sub)}
/* ⑨ 夜の依頼の行も、ほかと同じ濃さ */
.evi-time tr.night td:first-child{color:var(--ink)}
/* ③ 時刻の表: 見えたら1行ずつ出る */
html.js:not(.nomotion) .evi .evi-time tbody tr{opacity:0; transform:translateY(8px); transition:opacity .5s var(--ease), transform .5s var(--ease)}
html.js:not(.nomotion) .evi.is-in .evi-time tbody tr{opacity:1; transform:none}
html.js:not(.nomotion) .evi.is-in .evi-time tbody tr:nth-child(2){transition-delay:.25s}
html.js:not(.nomotion) .evi.is-in .evi-time tbody tr:nth-child(3){transition-delay:.5s}
html.js:not(.nomotion) .evi.is-in .evi-time tbody tr:nth-child(4){transition-delay:.75s}
html.js:not(.nomotion) .evi-bars li:nth-child(2) i::after{transition-delay:.35s}
html.js:not(.nomotion) .evi-bars li:nth-child(3) i::after{transition-delay:.5s}
html.js:not(.nomotion) .evi-bars li:nth-child(4) i::after{transition-delay:.65s}
html.js:not(.nomotion) .evi-bars li:nth-child(5) i::after{transition-delay:.8s}
/* ⑫ 輪の中の文字に余白 ・ ⑬ つまみの溝を落ち着いた色に */
.ring b{font-size:11.5px; letter-spacing:-.02em}
.slider input{accent-color:var(--ink)}
/* ⑤ 裏の仕組みの絵: 縦の台帳を大きく・スマホは右に重ねる */
.sys-art{aspect-ratio:1/.92}
.sys-tab{left:0; top:0; width:66%; border-width:7px}
.sys-ph{right:0; top:22%; width:31%; aspect-ratio:440/790}
.sys-new{left:35%; top:84%; width:28%; padding:6px 8px}
.sys-steps li{position:relative}
.sys-kt2{width:52px; height:52px; margin-left:auto; border-radius:10px; border:1px solid var(--line); flex:none; background:#fff}
html.js:not(.nomotion) .sys-art .sys-new{opacity:0}
@media (min-width:960px){ .sys{grid-template-columns:minmax(0, .82fr) minmax(0, 1.18fr)} }
/* ⑰ 作るたびに: PC は見出しと説明を左右に */
@media (min-width:960px){
  #grow .head{display:grid; grid-template-columns:1fr 1fr; gap:0 56px; align-items:end}
  #grow .head .lbl{grid-column:1 / -1; margin-bottom:12px}
  #grow .head .lead2{margin:0 0 6px}
}
/* ㉙ 輪の灯りがスマホの端を越えない */
.loop{width:min(calc(100% - 12px), 420px)}
@keyframes loopOn{0%,22%{background:var(--ink); color:#fff; transform:scale(1.03)} 26%,100%{background:var(--card); color:var(--ink); transform:none}}
/* ㉚㉛ 1文字だけ・助詞から始まる行を出さない */
.grow-c p, .grow-n, .sys-n, .sys-steps span, .sys-demo small{word-break:auto-phrase; text-wrap:pretty}
/* ㉑ 工房の写真 */
.ws img{aspect-ratio:640/420; object-position:center}
/* ㉒ その先 */
.next-s .h2.h2--xl{font-size:clamp(28px, 3.6vw, 46px)}
/* ㉝ スマホの「指で送れます」は札の帯の影で分かるので外す */
@media (max-width:959px){ .tabs-col::after{content:none} }
/* v1.8b: 画面の下のなじませを短く・スマホの裏の仕組みの絵の下の空きを詰める */
.screen::before{height:11%}
@media (max-width:959px){ .sys-art{aspect-ratio:1/.85; margin-block:4px 0} }

/* ======================================================================
   v1.9(2026-10-08)— 採点 RECOA_LP_11 から
   ====================================================================== */
/* ① PC の最初の画面: 作品の画面をもう一段大きく(幅の中のまま)・見出しは同じ大きさ */
@media (min-width:1200px){
  .hero--wide .wrap{grid-template-columns:minmax(0, .64fr) minmax(0, 1.36fr); gap:0 36px}
  .hero--wide h1{font-size:min(2.45vw, 35px)}
}
/* ①⑤⑥⑦ 作品の画面の下の切れ目: 地の色へはっきりなじませる(中の文字やボタンが半分で見えない) */
.screen::before{height:22%; background:linear-gradient(rgba(241,235,225,0), rgba(241,235,225,.75) 45%, rgba(241,235,225,1))}
.phone .screen::before{height:12%}
.sample .shot::after{height:24%; background:linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.8) 45%, #fff)}
/* ② 進み具合の印は、画面の上(URL の帯の下)に通す(左下の短い橙の線に見えない) */
.screen .prog{top:0; bottom:auto; height:3px; z-index:5}
/* ③ 札の幅をそろえる */
@media (min-width:960px){ .hero-can ul{grid-template-columns:1fr 1fr; max-width:400px} .hero-can a{width:100%} }
/* ⑧ 仕組みの3枚の幅をそろえる(余白は間に) */
@media (min-width:960px){ .mech{grid-template-columns:repeat(3, minmax(0, 1fr)); gap:0 28px} .mech li + li{margin-left:0} }
/* ③(b) 仕組みの3枚: 見えたら 1 → 2 → 3 の順に橙の縁が灯る(1回) */
@keyframes mechOn{0%{box-shadow:0 0 0 0 rgba(255,79,0,0)} 40%{box-shadow:0 0 0 3px rgba(255,79,0,.85)} 100%{box-shadow:var(--sh-1)}}
html.js:not(.nomotion) .mech li.is-in{animation:mechOn 1.4s var(--ease) both}
html.js:not(.nomotion) .mech li.is-in:nth-child(2){animation-delay:.5s}
html.js:not(.nomotion) .mech li.is-in:nth-child(3){animation-delay:1s}
/* ⑪ 窓口の実演: 済んだボタンは「済んだ印」の形に */
.msg .act button:disabled{background:transparent; color:#1E7A4C; box-shadow:inset 0 0 0 1.5px #1E7A4C; padding:0 12px}
.msg .act button:disabled::before{content:"✓ "}
/* ⑬ 工房の写真の説明を、写真の高さの真ん中に */
@media (min-width:960px){ .flow-ws figcaption{align-self:center} }
/* ⑭ カルテの小さな絵を大きく・線を濃く */
.sys-kt2{width:68px; height:68px; filter:contrast(1.6) saturate(1.2)}
/* ⑮ 回る図の番号 */
.loop li em{display:block; font-style:normal; font-size:11px; color:#C93D00; letter-spacing:.06em; margin-bottom:2px}
.loop-c{font-size:13px}
.loop-c .en{font-size:20px}
/* 相談の節の写真 */
.ws img{aspect-ratio:3/2; object-position:center 55%}
.ws figcaption{display:grid; gap:2px}
.ws figcaption span{font:500 12px/1.4 var(--jp); color:var(--sub)}
/* 料金の大見出し */
#faq > .wrap > .head:first-child{margin-bottom:22px}
/* ⑳ スマホの作品の切り替えのタブ: 右の端をぼかして、続きがあると分かるように */
@media (max-width:959px){ .swc .dots{-webkit-mask-image:linear-gradient(90deg, #000 85%, transparent); mask-image:linear-gradient(90deg, #000 85%, transparent); padding-right:18px} }
/* ㉒ 大きな RECOA の O を、ほかの文字の高さに */
.big i{width:.72em; height:.72em; transform:translateY(.01em)}
/* v1.9b: 左の列が細くなったので、上の札は1行に・下のなじませは少し短く */
@media (min-width:960px){ .hero--wide .tag{white-space:nowrap; font-size:12px} }
.screen::before{height:18%}

/* ======================================================================
   v2.0(2026-10-08)— ロゴを、立体の映像に(キューの Blender の見本・RECOA のロゴ)
   ====================================================================== */
.m3{display:grid; gap:18px}
.m3-big{margin:0; border-radius:var(--r-l); overflow:hidden; background:#000; box-shadow:0 24px 60px rgba(0,0,0,.45)}
.m3-stage{position:relative; aspect-ratio:16/9; background:#2a201d}
.m3-stage img, .m3-stage video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.m3-stage video{opacity:0; transition:opacity .35s}
.m3-stage video.on{opacity:1}
.m3-big figcaption{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 14px; padding:14px 18px 16px; background:#2a201d}
.m3-big figcaption b{font:900 17px/1.4 var(--jp); color:#fff}
.m3-big figcaption span{font-size:14px; color:rgba(255,255,255,.72)}
.m3-list{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px}
.m3-t{display:grid; gap:6px; width:100%; text-align:left; padding:6px; border-radius:var(--r-m); background:rgba(255,255,255,.06); transition:background .2s, box-shadow .2s}
.m3-t:hover{background:rgba(255,255,255,.12)}
.m3-t.on{background:rgba(255,79,0,.18); box-shadow:inset 0 0 0 2px var(--or)}
.m3-p{position:relative; display:block; aspect-ratio:16/9; border-radius:10px; overflow:hidden; background:#2a201d}
.m3-p img, .m3-p video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.m3-p video{opacity:0; transition:opacity .3s}
.m3-p video.on{opacity:1}
.m3-t b{font:700 13px/1.3 var(--jp); color:#fff; padding:0 4px 2px}
.m3-n{margin-top:18px; font-size:14px; color:rgba(255,255,255,.72)}
@media (min-width:700px){ .m3-list{grid-template-columns:repeat(3, minmax(0, 1fr))} }
@media (min-width:960px){
  .m3{grid-template-columns:minmax(0, 1.55fr) minmax(0, 1fr); align-items:start; gap:22px}
  .m3-list{grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px}
}

/* v2.1(2026-10-08)— その先の3枚に写真(01 = 本物の作品の画面・02/03 = Adobe Stock) */
.link3 li{overflow:hidden}
.nx-ph{display:block; margin:-22px -20px 12px; aspect-ratio:4/3; overflow:hidden; background:var(--tile)}
.nx-ph img{width:100%; height:100%; object-fit:cover}
.link3 li.now .nx-ph img{object-position:left top}
.link3 .here{top:12px; right:12px; z-index:2; background:var(--card); box-shadow:var(--sh-1)}
.link3 .here{display:inline-flex; align-items:center; height:28px; padding:0 12px; border-radius:var(--pill); color:var(--ink); font:800 12px/1 var(--jp)}
.link3 .here::before{content:""; width:6px; height:6px; margin-right:6px; border-radius:50%; background:var(--or)}

/* ======================================================================
   v2.3(2026-10-08)— 採点 RECOA_LP_12 から
   ====================================================================== */
/* ① PC(1200 以上): 見出しを1行で大きく(左右の列をまたぐ)・その下に説明と作品の画面 */
@media (min-width:1200px){
  .hero--wide .wrap{grid-template-columns:minmax(0, .62fr) minmax(0, 1.38fr); grid-template-areas:"tag tag" "h1 h1" "lead art" "cta art" "can art" ". art"; grid-template-rows:auto auto auto auto auto 1fr; gap:0 40px; align-items:start}
  .hero--wide .hero-copy{display:contents}
  .hero--wide .tag{grid-area:tag; justify-self:start}
  .hero--wide h1{grid-area:h1; font-size:min(3.9vw, 56px); line-height:1.2; white-space:nowrap; margin:16px 0 26px}
  .hero--wide h1 > span{display:inline}
  .hero--wide .lead{grid-area:lead; margin-top:52px}
  .hero--wide .cta{grid-area:cta}
  .hero--wide .hero-can{grid-area:can}
  .hero--wide .art{grid-area:art; align-self:start; padding-top:44px}
  .hero--wide{padding-block:40px 56px}
}
/* ② 作品の画面の下の切れ目: もう少し長く、最後は地の色で止める */
.screen::before{height:22%; background:linear-gradient(rgba(241,235,225,0), rgba(241,235,225,.85) 55%, rgba(241,235,225,1) 80%)}
/* ③ 小さな見本: 止め絵だけ */
.m3-t:focus-visible{outline-offset:2px}
/* ④ 仕組みの 1 → 2 → 3: 矢印が順に伸びる(1回) */
@media (min-width:960px){
  html.js:not(.nomotion) .mech li + li::before{transform-origin:left; transform:scaleX(0); transition:transform .6s var(--ease)}
  html.js:not(.nomotion) .mech li + li::after{opacity:0; transition:opacity .3s}
  html.js:not(.nomotion) .mech li.is-in + li.is-in::before{transform:none; transition-delay:.4s}
  html.js:not(.nomotion) .mech li.is-in + li.is-in::after{opacity:1; transition-delay:.9s}
  html.js:not(.nomotion) .mech li:nth-child(3).is-in::before{transition-delay:.9s}
  html.js:not(.nomotion) .mech li:nth-child(3).is-in::after{transition-delay:1.4s}
}
/* ⑤(b) 手順 03 の小さな絵: カードの高さをほかとそろえる */
.sys-kt2{width:40px; height:40px; margin-block:-6px}
/* ⑨ 映像の節の終わりの余白を詰める */
#m3d{padding-bottom:64px}
/* ⑫ 時刻の表の列をそろえる */
.evi-time table{table-layout:fixed}
/* ⑭ 料金: 箱を二重にしない(外の白い箱をやめ、中の2枚を白いカードに) */
.pricebar{background:transparent; box-shadow:none; padding:0; border-radius:0}
.price-i{background:var(--card); box-shadow:var(--sh-1); padding:22px 24px}
@media (max-width:699px){ .price-i{padding:18px 18px} .pricebar .pval b{font-size:30px} }

/* ======================================================================
   v2.4(2026-10-08)— 3D のロゴを最初の画面の看板に(森さん「TOPのLOGOとして」)
   ====================================================================== */
.hero-logo{position:relative; width:min(100%, 440px); aspect-ratio:960/340; margin:0 0 6px -14px;
  -webkit-mask-image:radial-gradient(ellipse 72% 70% at 50% 50%, #000 62%, transparent 100%); mask-image:radial-gradient(ellipse 72% 70% at 50% 50%, #000 62%, transparent 100%)}
.hero-logo img, .hero-logo video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.hero-logo video{opacity:0; transition:opacity .25s}
.hero-logo video.on{opacity:1}
/* PC(1200 以上): 左の列に ロゴ → 札 → 見出し(2行)→ 説明 → ボタン → できること。右に作品の画面 */
@media (min-width:1200px){
  .hero--wide .wrap{grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr); grid-template-areas:none; grid-template-rows:none; gap:0 44px; align-items:center}
  .hero--wide .hero-copy{display:block}
  .hero--wide h1{font-size:min(3vw, 43px); white-space:normal; margin:14px 0 0}
  .hero--wide h1 > span{display:block}
  .hero--wide .lead{margin-top:16px}
  .hero--wide .art{grid-area:auto; padding-top:44px}
}
@media (max-width:959px){ .hero-logo{width:min(100%, 380px); margin:0 auto 4px; order:-1} }

/* ======================================================================
   v2.5(2026-10-08)— レコアならではの、6つ
   ====================================================================== */
.only{display:grid; gap:14px}
.only-c{display:grid; gap:6px; height:100%; padding:0 0 20px; border-radius:var(--r-l); overflow:hidden; background:var(--card); box-shadow:var(--sh-1); text-decoration:none; color:var(--ink); transition:transform .25s var(--ease), box-shadow .25s}
.only-c:hover{transform:translateY(-3px); box-shadow:var(--sh-2)}
.only-ph{display:block; aspect-ratio:16/10; overflow:hidden; background:var(--beige); margin-bottom:8px}
.only-ph img{width:100%; height:100%; object-fit:cover}
.only li:nth-child(4) .only-ph img{object-fit:contain; padding:6% 0}
.only li:nth-child(3) .only-ph img{object-fit:contain; padding:4% 0}
.only-c b, .only-c h3, .only-c p, .only-lk{padding-inline:20px}
.only-c b{font:800 13px/1 var(--en); color:#C93D00}
.only-c h3{font:900 18px/1.45 var(--jp)}
.only-c p{font-size:14px; color:var(--sub); word-break:auto-phrase; text-wrap:pretty}
.only-lk{margin-top:4px; font:700 13.5px/1.4 var(--jp); text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1.5px; text-decoration-color:var(--or)}
@media (min-width:700px){ .only{grid-template-columns:repeat(2, minmax(0, 1fr))} }
@media (min-width:1080px){ .only{grid-template-columns:repeat(3, minmax(0, 1fr)); gap:18px} }
/* 立体の映像の節は、6つの 01 のくわしい見本として続ける */
#m3d .head{margin-bottom:28px}
/* v2.5b: 影をほぼ切り落とした映像(960×290)に合わせる・四角い縁が出ないよう、ふちを広めにぼかす・スマホは小さめ */
.hero-logo{aspect-ratio:960/290; -webkit-mask-image:radial-gradient(ellipse 75% 78% at 50% 50%, #000 70%, transparent 100%); mask-image:radial-gradient(ellipse 75% 78% at 50% 50%, #000 70%, transparent 100%)}
@media (max-width:959px){ .hero-logo{width:min(82%, 320px)} }
/* v2.5c: 森さん「TOPにある赤いバーはいらないね」→ 作品の画面の上を走る進み具合の線を出さない(入れ替えの間合いは名前のボタンの黒で分かる) */
.screen .prog{display:none}
/* v2.6(2026-10-08)森さん「バランス整えていきましょう」: 最初の画面の札は外し(すぐ下の「レコアならではの、6つ。」と同じ中身)、左右の高さをそろえる・ロゴの R を見出しの左端に */
.hero-logo{margin-left:-34px}
@media (min-width:1200px){ .hero--wide .art{padding-top:36px} .hero--wide .cta{margin-top:28px} }
@media (max-width:959px){ .hero-logo{margin-left:auto} }
/* v2.6b: ドメインの説明の li は横並びの作り → 中に nw を入れない。改行は言葉の切れ目で */
.dl li{word-break:auto-phrase}

/* ======================================================================
   v2.7(2026-10-08)— 採点 RECOA_LP_13 から
   ====================================================================== */
/* ① 3D のロゴ: 背景はページの白(255,254,251)と同じに書き出し直した・PC は一回り大きく */
@media (min-width:1200px){
  .hero-logo{width:500px; margin-left:-40px}
  /* ③ 作品の画面も一回り大きく(幅の中) */
  .hero--wide .wrap{grid-template-columns:minmax(0, .74fr) minmax(0, 1.26fr); gap:0 40px}
  .hero--wide h1{font-size:min(2.9vw, 41px)}
}
.hero-logo{-webkit-mask-image:none; mask-image:none}
/* ⑪⑫ 6つのカード: 番号・見出しの高さをそろえる */
.only-c{grid-template-rows:auto auto auto 1fr auto; align-content:start}
.only li:nth-child(3) .only-ph img{object-fit:cover; padding:0; object-position:left top}
.only li:nth-child(5) .only-c{box-shadow:var(--sh-1)}
/* ⑤ 業務の画面(縦が短くなった絵)に合わせる */
.sys-art{aspect-ratio:1/.86}
@media (max-width:959px){ .sys-art{aspect-ratio:1/.8} }
.sys-new{top:80%}
/* ⑮ 小さな見本の名前に余白 */
.m3-t b{padding:2px 4px 4px}
/* ㉒ 相談の節の写真がフォームより下まで伸びない */
.ws img{aspect-ratio:16/10}
/* ㉓ 「まずここから」は写真の上に乗せず、文字の側に */
.link3 .here{position:static; justify-self:start; margin:2px 0 4px; box-shadow:none; background:var(--or-pale)}
/* ㉖ 下の大きなロゴは本文の幅の中に */
.big{font-size:clamp(80px, 21vw, 290px)}

/* ======================================================================
   v2.8(2026-10-08)— スマホの本文は端末の日本語ゴシック(RECOA 本体と同じ)。見出しの 900 だけ Noto
   ====================================================================== */
@media (max-width:859px){
  :root{--jp:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans CJK JP","Yu Gothic UI",Meiryo,sans-serif}
  .h2, .hero h1, .h3, .m3-big figcaption b{font-family:"Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans CJK JP", sans-serif}
}

/* ======================================================================
   v2.9(2026-10-08)— 札を外す・ロゴは読める動きを順に流し続ける・サービスの紹介
   ====================================================================== */
.hero-logo video{transition:opacity .45s}
.hero--wide h1, .hero h1{margin-top:6px}
/* サービスの紹介 */
.svc{display:grid; gap:14px}
.svc li{display:grid; align-content:start; gap:8px; padding:26px 24px 24px; border-radius:var(--r-l); background:var(--card); box-shadow:var(--sh-1)}
.svc-ic{display:grid; place-items:center; width:48px; height:48px; border-radius:14px; background:var(--or-pale)}
.svc-ic svg{width:26px; height:26px; fill:none; stroke:#C93D00; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.svc b.en{margin-top:6px; font:800 13px/1 var(--en); color:#C93D00}
.svc h3{font:900 clamp(22px, 2.4vw, 28px)/1.3 var(--jp)}
.svc p{font-size:14.5px; color:var(--sub); word-break:auto-phrase; text-wrap:pretty}
.svc .svc-pr{margin-top:2px; font:800 15px/1.4 var(--jp); color:var(--ink)}
.svc .tlink{justify-self:start; min-height:36px; font-size:14px}
@media (min-width:860px){ .svc{grid-template-columns:repeat(3, minmax(0, 1fr)); gap:18px} }
/* v2.9b: 動きによってはロゴが大きく出るので、少し小さく・見出しとの間を空ける */
@media (min-width:1200px){ .hero-logo{width:460px; margin:0 0 14px -34px} }
.hero-logo{margin-bottom:12px}
/* v2.10(2026-10-09)採点 RECOA_LP_14 から: ロゴの映像のふちをぼかす(地の四角が見えない)・作品の画面の下のぼかしを短く(ボタンが褪せない)・PC の本文の Noto は display=optional(途中で書体が替わらない) */
.hero-logo{-webkit-mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent), linear-gradient(transparent, #000 10%, #000 90%, transparent); -webkit-mask-composite:source-in; mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent), linear-gradient(transparent, #000 10%, #000 90%, transparent); mask-composite:intersect}
.screen::before{height:13%; background:linear-gradient(rgba(241,235,225,0), rgba(241,235,225,.9))}

/* v2.11(2026-10-09)採点 RECOA_LP_15 から */
.svc-rec{display:grid; gap:2px; margin:4px 0 2px; padding:10px 12px; border-radius:var(--r-m); background:var(--beige); font-size:12.5px; color:var(--sub); line-height:1.5}
.svc-rec b{font:800 22px/1.1 var(--en); color:var(--ink)}
/* ② 作品の画面を一回り大きく */
@media (min-width:960px){ .work{grid-template-columns:1.45fr 1fr} .work .pic{padding:34px 30px} }

/* v2.13(2026-10-09)採点 RECOA_LP_17 から: カードの絵の切り方と高さをそろえる */
.only li:nth-child(5) .only-ph img{object-fit:cover; object-position:left top}
.link3 li.now .nx-ph img{object-position:center top}
/* ② 最初の画面: 見出しと作品の画面の間をあける */
@media (min-width:1200px){ .hero--wide .wrap{gap:0 56px} }

/* v2.14(2026-10-09)調査レポートの文言の点検から: 本物のサイトの画面に作った例のお返事を重ねない */
.hero .note{display:none !important}
/* v2.15(2026-10-09)採点 RECOA_LP_18 ⑤: その先 01 の画面は左から見せる(「髪に」の1文字目が欠けていた)・見本のカードの下の白いもやを短く */
.link3 li.now .nx-ph img{object-position:left top}
.sample .shot::after{height:10%; background:linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.7))}

/* v2.16(2026-10-09)採点 RECOA_LP_19 から */
/* ① ロゴの映像は地をページの白にそろえた。ぼかしの枠は外し、掛け合わせで重ねて箱の縁を消す */
.hero-logo{-webkit-mask-image:none !important; mask-image:none !important}
.hero-logo img, .hero-logo video{mix-blend-mode:multiply}
.hero-logo video{transition:opacity .28s}
/* ⑥ 最初の画面の作品の画面: 下の端のボタンが半分で切れて見えないよう、下を長めにぼかす */
.hero .screen::before{height:20%; background:linear-gradient(rgba(241,235,225,0), rgba(241,235,225,.92) 60%, rgba(241,235,225,1))}
/* v2.16b(2026-10-09)採点 RECOA_LP_19 ④: PC で右側が途中で終わって空く所をなくす */
@media (min-width:960px){
  /* 仕組み: 画面の絵は、左の説明を読むあいだ横についてくる */
  .sys{align-items:start}
  .sys-art{position:sticky; top:110px; align-self:start}
  /* 相談: フォームを左の列の高さまで伸ばし、内容の欄で埋める */
  .contact .form{align-self:stretch; display:flex; flex-direction:column; gap:14px}
  .contact .form label:has(textarea){flex:1; display:flex; flex-direction:column}
  .contact .form textarea{flex:1; min-height:180px}
  /* 工房の写真の説明: 文を大きく、箱を詰める */
  .flow-ws{grid-template-columns:2.4fr 1fr}
  .flow-ws figcaption b{font-size:20px}
  .flow-ws figcaption span{font-size:15.5px; line-height:1.8}
  /* 次が良くなる: 右のカードを輪の高さにそろえて並べる */
  .grow{align-items:stretch}
  .grow-c{align-content:space-between}
}

/* v2.17(2026-10-09)採点 RECOA_LP_20 から */
/* ② 作品の札: 切り替えの途中の色(灰色の地に灰色の文字)を見せない */
.swc .dots button{transition:none}
/* ② 作品の画面の下の端: 半分切れたボタンが見えないよう、下を長めにぼかす */
.hero .screen::before{height:30%}
/* ④ 輪の丸: 地と文字の色を同時に切り替える(途中の灰色に灰色の文字を作らない) */
@keyframes loopOn{0%,23%{background:var(--ink); color:#fff; transform:scale(1.03)} 23.01%,100%{background:var(--card); color:var(--ink); transform:none}}
.loop li em{transition:none}
/* ④ 出てくるのを早く・短く */
.rv{transition:opacity .45s var(--ease), transform .45s var(--ease)}

/* v2.18(2026-10-09)採点 RECOA_LP_21 から */
/* ① 映像が始まったら、下の止め絵は出さない(掛け合わせで透けて二重になるため) */
.hero-logo.is-playing img{opacity:0}
/* ② 最初の画面の作品の画面: 下の端のボタンの手前で切って、ぼかしは浅く(ボタンが薄く・半分に見えないように) */
.hero #scPc{aspect-ratio:16/9}
.hero .screen::before{height:10%}
/* v2.19(2026-10-09)採点 RECOA_LP_22 から: 16:9 にしたら最初の画面の作品の画面が小さくなり、下が空いた → 16:10 に戻し、ぼかしは浅めに */
.hero #scPc{aspect-ratio:16/10}
.hero .screen::before{height:14%}
/* v2.20(2026-10-09)採点 RECOA_LP_23 から */
/* ⑤ 窓口の見本: 上の端のぼかしで1つ目の吹き出しが切れて見える → ぼかしをやめ、出すのは2つまで */
.my .log{-webkit-mask-image:none; mask-image:none}
/* ⑤ 足元の著作権の表示 */
.ft .copy{margin-top:10px; font-size:12px; opacity:.8}
/* ④ スマホのカードの小見出しも、見出しと同じ太い書体(読み込み済みの Noto Sans JP 900)に */
@media (max-width:859px){ main h3{font-family:"Noto Sans JP", var(--jp); font-weight:900} }
/* v2.21(2026-10-09)採点 RECOA_LP_24 ②: ロゴの入れ替えで、何も無い時間を短く(消える .2秒・つぎは .12秒あとに) */
.hero-logo video{transition:opacity .2s}
/* v2.22(2026-10-09)採点 RECOA_LP_25 ②: 最初の画面の作品の画面を一回り大きく(左の文字の列を少し細く)・下の端はボタンの手前で切る */
@media (min-width:1200px){
  .hero--wide .wrap{grid-template-columns:minmax(0, .74fr) minmax(0, 1.26fr)}
  .hero #scPc{aspect-ratio:16/9.4}
}
/* v2.24(2026-10-10)採点 RECOA_LP_26 ①: 最初の1〜2秒は立体のロゴが主役 → いつもの位置に収まり、見出しと作品の画面が出る */
@media (min-width:960px){
  html.js:not(.nomotion) .hero-logo{animation:logoIntro 1.5s cubic-bezier(.2,.7,.2,1) .15s both; transform-origin:0 0; z-index:5}
  @keyframes logoIntro{0%{transform:translate(32vw, 18vh) scale(1.9); opacity:0} 18%{opacity:1} 55%{transform:translate(32vw, 18vh) scale(1.9)} 100%{transform:none}}
  html.js:not(.nomotion) .hero--wide .hero-copy > :not(.hero-logo), html.js:not(.nomotion) .hero--wide .art{animation:afterLogo .7s ease 1.35s both}
  @keyframes afterLogo{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
}
@media (prefers-reduced-motion:reduce){ .hero-logo, .hero--wide .hero-copy > *, .hero--wide .art{animation:none !important} }
/* v2.24b: ロゴの大きい時間を少し長く(2秒)・作品の画面は消さずに少し動くだけ(表示の速さの数字を落とさない) */
@media (min-width:960px){
  html.js:not(.nomotion) .hero-logo{animation-duration:2s}
  html.js:not(.nomotion) .hero--wide .hero-copy > :not(.hero-logo){animation-delay:1.7s}
  html.js:not(.nomotion) .hero--wide .art{animation:artIn .8s ease 1.6s both}
  @keyframes artIn{from{transform:translateY(14px)} to{transform:none}}
}
/* v2.25(2026-10-10)採点 RECOA_LP_27 ①②: 入りで重ね順(z-index)を付けると掛け合わせが効かず白い箱が出た → 重ね順を外し、
   大きくなるのは左の列の中だけ(作品の画面にかぶらない) */
@media (min-width:960px){
  html.js:not(.nomotion) .hero-logo{z-index:auto; transform-origin:0 50%; animation:logoIntro2 2s cubic-bezier(.2,.7,.2,1) .1s both}
  @keyframes logoIntro2{0%{transform:translateY(16vh) scale(1.45); opacity:0} 15%{opacity:1} 55%{transform:translateY(16vh) scale(1.45)} 100%{transform:none}}
}
/* v2.25b: 左の列は約370px で、ロゴを大きくすると作品の画面の下に潜る → 大きくせず、ロゴ → 見出し → 作品の画面の順に出す */
@media (min-width:960px){
  html.js:not(.nomotion) .hero-logo{animation:logoIn3 .9s cubic-bezier(.2,.7,.2,1) .1s both}
  @keyframes logoIn3{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
  html.js:not(.nomotion) .hero--wide .hero-copy > :not(.hero-logo){animation-delay:.75s}
  html.js:not(.nomotion) .hero--wide .art{animation-delay:.6s}
}
/* v2.26(2026-10-11)キュー便 1010_2215: モーションギャラリー(見本 20 種)への案内 */
.m3-gal{margin-top:10px;font-size:15px;color:var(--sub)}
.m3-gal a{font-weight:700;color:var(--ink);text-decoration:underline;text-underline-offset:3px;margin-left:6px;white-space:nowrap}