/* 株式会社ログレッジ 会社サイト ―― 案B「白基調・エディトリアル」（2026-09-18 見直し案）
   ★外部依存ゼロ（Webフォント・CDN・外部JSなし）。決算公告の5年掲載義務があるため。
   ★色はインク #151a21 ＋ 白 ＋ 抑えた藍 #1f3a5f の3色だけ。製品の青 #2F6BFF は使わない。
   ★動きは html.js が付いている時だけ（?anim=off・prefers-reduced-motion・JS無効では最終状態）。*/
:root{
  --ink:#151a21;
  --on-dark:#e7eaf0;
  --sub:#4c5564;
  --mute-t:#6d7788;
  --line:#e0e4ea;
  --line-2:#c9d0da;
  --bg:#ffffff;
  --bg-2:#f6f7f9;
  --accent:#c8553d;
  --ease:cubic-bezier(.16,1,.3,1);
  --hd:72px;
}
*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN",
              "Noto Sans JP","Yu Gothic UI",Meiryo,sans-serif;
  font-size:16.5px;line-height:1.9;letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;font-feature-settings:"palt";overflow-x:hidden}
img{max-width:100%}
a{color:inherit}
.wrap{--wrap-pad:28px; max-width:1080px;margin:0 auto;padding:0 var(--wrap-pad)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:12px;top:12px;z-index:200;background:#fff;padding:10px 14px;border-radius:8px;
  box-shadow:0 6px 24px rgba(0,0,0,.2)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ============ 文字の動き（html.js の時だけ） ============ */
.line{display:block}
.nb{white-space:nowrap}
.ch,.wd{display:inline-block;will-change:opacity,transform}
/* 字ごとに下から立ち上がる */
html.js [data-split="chars"] .ch{opacity:0;transform:translateY(.72em) rotate(2deg)}
html.js [data-split="chars"].in .ch{opacity:1;transform:none;
  transition:opacity .5s ease calc(var(--i) * .07s),
             transform .8s var(--ease) calc(var(--i) * .07s)}
html.js [data-split="words"] .wd{opacity:0;transform:translateY(.4em)}
html.js [data-split="words"].in .wd{opacity:1;transform:none;
  transition:opacity .5s ease calc(var(--i) * .09s),
             transform .7s var(--ease) calc(var(--i) * .09s)}
/* 英字の小見出しは字間が締まりながら現れる */
.tight{display:inline-block;letter-spacing:.22em}
html.js .tight{opacity:0;letter-spacing:.7em}
html.js .tight.in{opacity:1;letter-spacing:.22em;
  transition:opacity .7s ease,letter-spacing 1.1s var(--ease)}
.d1{--dl:.08s}.d2{--dl:.16s}.d3{--dl:.24s}.d4{--dl:.34s}.d5{--dl:.44s}
html.js .r-up{opacity:0;transform:translateY(18px)}
html.js .r-up.in{opacity:1;transform:none;
  transition:opacity .6s ease var(--dl,0s),transform .7s var(--ease) var(--dl,0s)}

/* リンクは hover で文字が上へ転がって入れ替わる */
.roll{text-decoration:none;display:inline-flex;align-items:center;gap:8px;
  font-size:14.5px;font-weight:700;color:var(--accent)}
.rl{display:inline-block;position:relative;overflow:hidden;vertical-align:bottom;
  line-height:1.5}
.rl .b{position:absolute;left:0;top:0;transform:translateY(102%)}
.rl .a,.rl .b{display:block;transition:transform .42s var(--ease)}
.roll:hover .rl .a{transform:translateY(-102%)}
.roll:hover .rl .b{transform:translateY(0)}
.roll .ar{transition:transform .42s var(--ease)}
.roll:hover .ar{transform:translateX(5px)}
.roll.u .rl{border-bottom:1.5px solid currentColor}

/* ============ ヘッダー ============ */
.hd{position:fixed;inset:0 0 auto;z-index:60;background:rgba(255,255,255,0);
  border-bottom:1px solid transparent;transition:background-color .3s,border-color .3s}
.hd.solid{background:rgba(255,255,255,.92);border-bottom-color:var(--line);
  -webkit-backdrop-filter:saturate(180%) blur(8px);backdrop-filter:saturate(180%) blur(8px)}
.hd-in{max-width:1080px;margin:0 auto;padding:0 28px;height:var(--hd);
  display:flex;align-items:center;justify-content:space-between;gap:24px}
.hd-logo{display:flex;align-items:center;line-height:0}
.hd-logo img{height:21px;width:auto}
.hd-nav{display:flex;gap:2px}
.hd-nav a{position:relative;padding:8px 13px;text-decoration:none;color:var(--mute-t);
  font-size:12.5px;font-weight:700;letter-spacing:.1em;transition:color .25s}
.hd-nav a::after{content:"";position:absolute;left:13px;right:13px;bottom:4px;height:1.5px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--ease)}
.hd-nav a:hover{color:var(--ink)}
.hd-nav a:hover::after,.hd-nav a.act::after{transform:scaleX(1)}
.hd-nav a.act{color:var(--accent)}
.hd-burger{display:none;width:44px;height:44px;border:0;background:none;padding:0;
  cursor:pointer;position:relative;z-index:90}
.hd-burger span{display:block;width:22px;height:1.5px;background:var(--ink);margin:5px auto;
  transition:transform .3s var(--ease)}
body.menu .hd-burger span{background:#fff}
body.menu .hd-burger span:first-child{transform:translateY(3.25px) rotate(45deg)}
body.menu .hd-burger span:last-child{transform:translateY(-3.25px) rotate(-45deg)}
.spmenu{position:fixed;inset:0;z-index:80;background:var(--ink);
  padding:calc(var(--hd) + 12px) 26px 40px;display:flex;flex-direction:column;
  justify-content:space-between;overflow-y:auto}
.spmenu[hidden]{display:none}
body.menu .hd{z-index:90;background:transparent;border-bottom-color:transparent}
body.menu .hd-logo img{filter:invert(1)}
.spmenu nav{display:flex;flex-direction:column}
.spmenu a{display:flex;align-items:baseline;gap:12px;padding:16px 0;text-decoration:none;
  color:var(--on-dark);border-bottom:1px solid rgba(231,234,240,.16)}
.spmenu b{font-size:20px;letter-spacing:.04em}
.spmenu span{font-size:12.5px;color:#a8b2c1}
.spmenu-f{margin-top:28px;font-size:12px;color:#6a7486;letter-spacing:.04em}

/* ============ ヒーロー（白・大きな文字） ============ */
.hero{padding:calc(var(--hd) + 92px) 0 0}
.hero .eb{font-size:11.5px;font-weight:700;color:var(--mute-t);text-transform:uppercase}
.hero .eb .sep{display:inline-block;width:34px;height:1px;background:var(--accent);
  vertical-align:middle;margin:0 14px 3px 0}
.hero h1{margin-top:22px;font-size:clamp(30px,5.4vw,60px);font-weight:700;
  line-height:1.3;letter-spacing:.015em}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero-lead{margin-top:30px;max-width:30em;color:var(--sub);font-size:16.5px;line-height:1.95}
.hero-btns{margin-top:34px;display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:#fff;
  text-decoration:none;font-weight:700;font-size:15px;padding:15px 28px;border-radius:999px;
  transition:transform .25s var(--ease),box-shadow .25s,background-color .25s}
.btn::after{content:"→"}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(21,26,33,.22)}
.btn.line{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line-2)}
.btn.line:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.hero-facts{margin:56px 0 0;padding:26px 0;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.hero-facts dt{font-size:10.5px;font-weight:700;letter-spacing:.2em;color:var(--mute-t);
  text-transform:uppercase}
.hero-facts dd{margin-top:7px;font-size:15px;line-height:1.55;font-weight:700}
.hero-facts dd small{display:block;font-size:11.5px;font-weight:400;color:var(--mute-t);
  line-height:1.5;margin-top:3px}

/* 輪郭文字の帯が横に流れ続ける（html.js の時だけ） */
.mq{margin-top:0;padding:30px 0 34px;overflow:hidden}
.mq-track{display:flex;width:max-content;white-space:nowrap}
.mq-track span{font-size:clamp(38px,6.6vw,84px);font-weight:700;letter-spacing:-.02em;
  line-height:1.12;color:transparent;-webkit-text-stroke:1.2px #b9c2ce;padding-right:.45em}
html.js .mq-track{animation:mqRun 30s linear infinite}
@keyframes mqRun{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============ 節（左に番号と英字＝現在地／右に本文） ============ */
.bsec{padding:112px 0;scroll-margin-top:var(--hd)}
.bsec.alt{background:var(--bg-2)}
.g2{display:grid;grid-template-columns:200px 1fr;gap:44px}
.col-l{position:sticky;top:calc(var(--hd) + 30px);align-self:start}
.col-l .no{font-size:64px;font-weight:700;line-height:.9;letter-spacing:-.04em;
  color:transparent;-webkit-text-stroke:1.4px color-mix(in srgb,var(--accent) 45%,#fff)}
.col-l .eb{margin-top:12px;font-size:12px;font-weight:700;color:var(--ink)}
.col-l .eb b{display:block;font-size:11.5px;font-weight:500;letter-spacing:.08em;
  color:var(--mute-t);margin-top:4px}
h2.h{font-size:clamp(26px,3.7vw,44px);font-weight:700;line-height:1.36;letter-spacing:-.022em}
.p{margin-top:24px;color:var(--sub);font-size:16.5px;line-height:1.95;max-width:36em}

/* 事業の2枚 */
.two{margin-top:44px;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}
.two article{background:var(--bg);padding:34px 30px}
.bsec.alt .two{background:var(--line)}
.bsec.alt .two article{background:#fff}
.two .n{font-size:11.5px;font-weight:700;letter-spacing:.2em;color:var(--accent)}
.two h3{margin-top:12px;font-size:21px;font-weight:700;line-height:1.5;letter-spacing:-.015em}
.two p{margin-top:12px;font-size:15.5px;line-height:1.9;color:var(--sub)}
.chips{margin-top:18px;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:7px}
.chips li{font-size:12px;color:var(--mute-t);border:1px solid var(--line-2);border-radius:999px;
  padding:3px 11px}
.two .roll{margin-top:18px}

/* 製品 */
.prod{margin-top:40px;display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.tag{display:inline-block;margin-top:16px;font-size:12.5px;font-weight:700;color:var(--accent);
  border:1px solid var(--line-2);border-radius:999px;padding:3px 13px}
.feat{margin-top:24px;padding:0;list-style:none}
.feat li{padding:15px 0;border-top:1px solid var(--line);font-size:14.5px;line-height:1.85;
  color:var(--sub)}
.feat li:last-child{border-bottom:1px solid var(--line)}
.feat b{display:block;font-size:16px;color:var(--ink);margin-bottom:2px}
.shots{display:flex;justify-content:center;align-items:center}
.ph{margin:0;flex:none;background:#e9ecf1;border:1px solid var(--line-2);border-radius:24px;
  padding:6px;box-shadow:0 20px 44px rgba(21,26,33,.14)}
.ph img{display:block;width:100%;height:auto;aspect-ratio:440/840;object-fit:cover;
  object-position:top;border-radius:19px;background:#fff}
.ph-l{width:clamp(112px,13vw,164px);transform:rotate(-6deg) translateY(20px);margin-right:-18px}
.ph-c{width:clamp(138px,16vw,198px);position:relative;z-index:3}
.ph-r{width:clamp(112px,13vw,164px);transform:rotate(6deg) translateY(20px);margin-left:-18px}

/* 製品の札（トドログ1枚） */
.pcard{margin-top:40px;background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:34px 30px}
.pcard .prod{margin-top:0;align-items:center;grid-template-columns:minmax(0,1fr) auto}
.pcard .tag{white-space:nowrap}
.pcard .ph-l,.pcard .ph-r{width:clamp(84px,8vw,112px)}
.pcard .ph-c{width:clamp(104px,10vw,140px)}
.pcard h3{font-size:22px;font-weight:700;letter-spacing:-.015em}
.pcard .meta{margin-top:18px;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:7px}
.pcard .meta li{font-size:12px;color:var(--mute-t);border:1px solid var(--line-2);
  border-radius:999px;padding:3px 11px}
.pcard .p{margin-top:14px}

/* 進め方 */
.steps{margin-top:36px;padding:0;list-style:none;display:grid;
  grid-template-columns:repeat(4,1fr);gap:24px}
.steps li{padding-top:18px;border-top:1px solid var(--line-2);position:relative}
.steps li::before{content:"";position:absolute;top:-1px;left:0;width:26px;height:2px;
  background:var(--accent)}
.steps .n{font-size:12px;font-weight:700;letter-spacing:.18em;color:var(--accent)}
.steps h4{margin-top:8px;font-size:16.5px;font-weight:700}
.steps p{margin-top:8px;font-size:14px;line-height:1.85;color:var(--mute-t)}

/* 理念（1行だけ） */
.creed{padding:86px 0;background:var(--ink);color:var(--on-dark)}
.creed h2{font-size:clamp(24px,3.4vw,38px);font-weight:700;line-height:1.5;letter-spacing:-.02em}
.creed p{margin-top:20px;max-width:34em;color:#a8b2c1;font-size:15.5px;line-height:1.95}

/* 会社の事実 */
.facts{margin-top:8px}
.facts>div{display:grid;grid-template-columns:130px 1fr;gap:16px;padding:16px 0;
  border-bottom:1px solid var(--line)}
.facts>div:first-child{border-top:1px solid var(--line)}
.facts dt{font-size:13px;color:var(--mute-t);letter-spacing:.04em;padding-top:3px}
.facts dd{font-size:16px;line-height:1.8}
.facts dd .pend,.facts dd.pend{color:var(--mute-t);font-size:13.5px}
.notice{margin-top:24px;border-left:2px solid var(--accent);padding:4px 0 4px 18px;
  font-size:14.5px;line-height:1.9;color:var(--sub)}
.notice b{display:block;color:var(--ink)}
.k-link{margin-top:24px;display:flex;align-items:center;justify-content:space-between;gap:16px;
  border:1px solid var(--line);border-radius:14px;padding:22px 24px;text-decoration:none;
  transition:border-color .25s,transform .25s var(--ease)}
.k-link:hover{border-color:var(--line-2);transform:translateY(-2px)}
.k-link .t{display:block;font-size:16px;font-weight:700}
.k-link .d{display:block;font-size:13px;color:var(--mute-t);margin-top:2px}
.k-link .ar{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);flex:none;
  display:flex;align-items:center;justify-content:center;color:var(--accent)}

/* お知らせ */
.news{margin-top:8px}
.news a{display:grid;grid-template-columns:118px 1fr auto;gap:18px;align-items:baseline;
  padding:20px 0;border-bottom:1px solid var(--line);text-decoration:none;
  transition:background-color .2s}
.news a:first-child{border-top:1px solid var(--line)}
.news time{font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--accent)}
.news .t{font-size:16px;line-height:1.75}
.news .ar{color:var(--mute-t)}
.news a:hover .t{text-decoration:underline}
/* 本文が無い件（個別ページを持たない）はリンクにしない＝矢印無し・hoverの動き無し */
.news article{display:grid;grid-template-columns:118px 1fr;gap:18px;align-items:baseline;padding:20px 0;border-bottom:1px solid var(--line)}
.news article:first-child{border-top:1px solid var(--line)}

/* 連絡 */
.mt{margin-top:28px}
.fine{margin-top:20px;font-size:13px;color:var(--mute-t)}

/* フッター */
.ft{background:var(--ink);color:#a8b2c1;padding:72px 0 28px}
.ft-in{display:grid;grid-template-columns:1fr auto;gap:48px;padding-bottom:40px;
  border-bottom:1px solid rgba(231,234,240,.16)}
.ft-logo{height:21px;width:auto;filter:invert(1)}
.ft-brand p{margin-top:18px;font-size:14px;line-height:1.9;color:#8a94a6}
.ft-nav{display:flex;gap:52px}
.ft-nav a{display:block;font-size:14px;text-decoration:none;color:#a8b2c1;padding:5px 0}
.ft-nav a:hover{color:#fff}
.ft-h{font-size:10.5px;font-weight:700;letter-spacing:.2em;color:#667081;margin-bottom:8px;
  text-transform:uppercase}
.ft-btm{margin-top:24px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.ft-mark{height:15px;width:auto;filter:invert(1);opacity:.34}
.ft-btm small{font-size:12px;letter-spacing:.04em;color:#6d7788}

/* ============ レスポンシブ ============ */
@media (max-width:900px){
  .g2{grid-template-columns:1fr;gap:18px}
  .col-l{position:static;display:flex;align-items:baseline;gap:16px}
  .col-l .no{font-size:40px}
  .col-l .eb{margin-top:0}
  .col-l .eb b{display:inline;margin-left:8px}
  .two,.prod,.pcard .prod{grid-template-columns:1fr}
  .two{gap:1px}
  .steps{grid-template-columns:1fr 1fr}
  .hero-facts{grid-template-columns:1fr 1fr}
  .ft-in{grid-template-columns:1fr;gap:32px}
}
@media (max-width:820px){
  :root{--hd:60px}
  .hd-nav{display:none}
  .hd-burger{display:block}
  .wrap{--wrap-pad:22px}
  .hd-in{padding-left:22px;padding-right:22px}
  .bsec{padding:70px 0}
  .hero{padding-top:calc(var(--hd) + 56px)}
  .hero h1{font-size:clamp(27px,8vw,36px);line-height:1.38}
  h2.h{font-size:clamp(25px,7.2vw,32px)}
  .creed{padding:60px 0}
  .news a{grid-template-columns:1fr auto;gap:4px 12px}
  .news article{grid-template-columns:1fr;gap:4px}
  .news time{grid-column:1/-1}
  .ft{padding:54px 0 24px}
  .ft-nav{gap:32px;flex-wrap:wrap}
}
@media (max-width:560px){
  .steps{grid-template-columns:1fr}
  .ph-l,.ph-r{width:clamp(104px,26vw,146px);margin:0 -15px}
  .ph-c{width:clamp(128px,32vw,178px)}
}

/* 動きを止める（?anim=off・OS設定） */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
html.no-anim{scroll-behavior:auto}
html.no-anim *,html.no-anim *::before,html.no-anim *::after{
  animation:none!important;transition:none!important}


/* ============ 下層ページ（会社概要・お知らせ・電子公告） ============ */
.hd.static{position:static;background:#fff;border-bottom:1px solid var(--line)}
.doc{padding:60px 0 100px}
.doc .wrap{max-width:820px}
.doc .eb{font-size:12px;font-weight:700;color:var(--ink)}
.doc .eb b{display:inline;font-size:11.5px;font-weight:500;letter-spacing:.08em;
  color:var(--mute-t);margin-left:10px}
.doc h1{margin-top:14px;font-size:clamp(27px,4.2vw,40px);font-weight:700;line-height:1.32;
  letter-spacing:-.022em}
.doc .lead{margin-top:22px;color:var(--sub);font-size:16px;line-height:1.95;max-width:38em}
.doc section{margin-top:52px}
.doc section h2{font-size:19px;font-weight:700;letter-spacing:-.015em}
.doc .card{margin-top:16px;border:1px solid var(--line);border-radius:14px;padding:26px 24px}
.doc .status{display:flex;gap:14px;align-items:flex-start}
.doc .status .dot{flex:none;width:9px;height:9px;border-radius:50%;background:var(--line-2);
  margin-top:9px}
.doc .status b{display:block;font-size:16px;line-height:1.8}
.doc .status p{margin-top:8px;font-size:14.5px;line-height:1.9;color:var(--sub)}
.doc .spec{width:100%;border-collapse:collapse}
.doc .spec th,.doc .spec td{text-align:left;font-weight:400;vertical-align:top;
  padding:13px 0;border-bottom:1px solid var(--line);font-size:14.5px;line-height:1.85}
.doc .spec tr:last-child th,.doc .spec tr:last-child td{border-bottom:0}
.doc .spec th{width:150px;color:var(--mute-t);font-size:13px;padding-right:16px}
.doc .facts{margin-top:28px}
.doc .news{margin-top:28px}
.doc .news article{display:grid;grid-template-columns:118px 1fr;gap:18px;align-items:baseline;
  padding:20px 0;border-bottom:1px solid var(--line)}
.doc .news article:first-child{border-top:1px solid var(--line)}
.back{display:inline-flex;align-items:center;gap:9px;margin-top:56px;text-decoration:none;
  font-size:14.5px;font-weight:700;color:var(--accent)}
.back::before{content:"\2190";transition:transform .3s var(--ease)}
.back:hover::before{transform:translateX(-4px)}
@media (max-width:820px){
  .doc{padding:44px 0 72px}
  .doc .spec th{width:auto;display:block;padding-bottom:2px;border-bottom:0}
  .doc .spec td{display:block;padding-top:0}
  .doc .news article{grid-template-columns:1fr;gap:4px}
}

/* プロダクトの札のスクショ: 実機の比率（390×844）で3枚を同じ大きさにまっすぐ並べる。回転・重なりは付けない。
   端末の縁は薄く（今どきの端末）、外の角の半径＝内の角の半径＋縁の厚み。3枚は札の幅に合わせて縮む（固定幅だと札が画面からはみ出す） */
.pcard .shots{gap:14px;align-items:flex-start;min-width:0;width:100%}
.pcard .ph,.pcard .ph-l,.pcard .ph-c,.pcard .ph-r{box-sizing:border-box;flex:1 1 0;min-width:0;max-width:158px;width:auto;margin:0;transform:none;z-index:auto;
  padding:clamp(3px,.3vw,4px);background:#14171c;border:none;border-radius:clamp(18px,1.9vw,26px);overflow:hidden;
  box-shadow:0 10px 26px rgba(15,23,42,.14),inset 0 0 0 1px rgba(255,255,255,.08)}
.pcard .ph img{aspect-ratio:390/844;object-fit:cover;width:100%;height:auto;display:block;border-radius:clamp(15px,1.6vw,22px);background:#eef1f5}
@media (min-width:901px){.pcard .prod{grid-template-columns:minmax(0,1fr) minmax(0,3fr)}.pcard .shots{justify-content:flex-end}}
@media (max-width:900px){
  .pcard .shots{gap:10px;justify-content:center;margin-top:22px}
  .pcard .ph,.pcard .ph-l,.pcard .ph-c,.pcard .ph-r{max-width:124px;padding:3px;border-radius:17px}
  .pcard .ph img{border-radius:14px}
}

/* 色は1つ（テラコッタ）を要所だけに。プロダクトの節は地色をごく薄く色づける＝3段目の地色（masatoさん 9/18 選択） */
#product.bsec{background:color-mix(in srgb,var(--accent) 6%,#fff)}
.hero .eb .tight{color:var(--accent)}
/* 動き（masatoさん 9/18 採用）（スクロールで画面に入った時に動く。ホバーに頼らないのでスマホでも見える。?anim=off と reduced-motion では止まる） */
html.js .col-l .no{opacity:0;transform:translateY(14px);transition:opacity .8s var(--ease),transform 1s var(--ease)}
html.js .col-l .no.in{opacity:1;transform:none}
html.js .pcard .ph{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease),transform .9s var(--ease)}
html.js .pcard.in .ph{opacity:1;transform:none}
html.js .pcard.in .ph:nth-child(2){transition-delay:.12s}
html.js .pcard.in .ph:nth-child(3){transition-delay:.24s}
html.js .news>a,html.js .news>article{opacity:0;transform:translateX(-10px);transition:opacity .6s var(--ease),transform .7s var(--ease)}
html.js .news>a.in,html.js .news>article.in{opacity:1;transform:none}
html.js .steps>*{opacity:0;transform:translateY(12px);transition:opacity .6s var(--ease),transform .8s var(--ease)}
html.js .steps.in>*{opacity:1;transform:none}
html.js .steps.in>*:nth-child(2){transition-delay:.1s}
html.js .steps.in>*:nth-child(3){transition-delay:.2s}
html.js .steps.in>*:nth-child(4){transition-delay:.3s}
@media (hover:hover){
  .pcard{transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
  .pcard:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(15,23,42,.10)}
}
/* ロゴのシンボル（masatoさん 9/18 採用）（L）の輪郭を敷き詰めた幾何学模様。右上に寄せて左下へ消す。
   1枚ずつ 90° ずつ回り、斜めに波が走る（?anim=off と reduced-motion では静止） */
.hero{position:relative;isolation:isolate;overflow:hidden}
.hero .sympat{position:absolute;inset:var(--hd) 0 0 0;z-index:-1;pointer-events:none;
  -webkit-mask-image:radial-gradient(ellipse 62% 78% at 86% 30%,#000 25%,rgba(0,0,0,.35) 55%,transparent 78%);
  mask-image:radial-gradient(ellipse 62% 78% at 86% 30%,#000 25%,rgba(0,0,0,.35) 55%,transparent 78%)}
.hero .sympat svg{position:absolute;overflow:visible}
.hero .sympat .s path{fill:none;stroke:var(--line-2);stroke-width:1.1}
.hero .sympat .s.a path{stroke:color-mix(in srgb,var(--accent) 70%,#fff)}
@media (max-width:900px){.hero .sympat{opacity:.75;-webkit-mask-image:radial-gradient(ellipse 70% 36% at 92% 6%,#000 15%,rgba(0,0,0,.3) 55%,transparent 80%);mask-image:radial-gradient(ellipse 70% 36% at 92% 6%,#000 15%,rgba(0,0,0,.3) 55%,transparent 80%)}}

/* 地を白から生成り（紙の色）へ（masatoさん 9/18「生成りでいこう」）。黒い文字・テラコッタ・黒い理念の帯とフッターはそのまま。
   ヘッダーとスマホのメニューも生成りに揃える（暗い面は理念の帯とフッターの2つだけにする） */
:root{--bg:#f5f0e8;--bg-2:#ede6db;--line:#ddd5c8;--line-2:#c9bfae;--mute-t:#7a7466}
.hd.solid{background:rgba(245,240,232,.92)}
.hd.static,.skip:focus{background:var(--bg)}
.bsec.alt .two article,.pcard{background:#fbf8f3}
.mq-track span{-webkit-text-stroke:1.2px #c9bfae}
.col-l .no{-webkit-text-stroke:1.4px color-mix(in srgb,var(--accent) 50%,var(--bg))}
#product.bsec{background:color-mix(in srgb,var(--accent) 8%,var(--bg))}
.hero .sympat .s path{stroke:#c9bfae}
.spmenu{background:var(--bg);color:var(--ink)}
.spmenu a{color:var(--ink)}
.spmenu span{color:var(--mute-t)}
.spmenu-f{color:var(--mute-t)}
body.menu .hd-burger span{background:var(--ink)}
body.menu .hd-logo img{filter:none}
/* ギミック①: 模様がカーソル／指の位置に反応して灯る（尾を引く）。スマホでは光る点が勝手に泳ぐ */
.hero .sympat .s path{transition:stroke .55s ease,stroke-width .55s ease,opacity .55s ease}
.hero .sympat .s.hot path{stroke:var(--accent);stroke-width:1.7}
.hero .sympat .s.warm path{stroke:color-mix(in srgb,var(--accent) 55%,#c9bfae);stroke-width:1.3}
/* ギミック②: 見出しが自分の言葉を実演する。「つくって」＝字が組み上がる（既存）／「使って」＝押される／「また直す」＝傾いた「直」をトンと押すとまっすぐに直る */
.hero h1 .ch{position:relative}
.hero h1 .ch.press{transform:translateY(.07em) scale(.93)!important;transition-duration:.14s!important;transition-delay:0s!important}
.hero h1 .ch .rip{position:absolute;left:50%;top:55%;width:1.1em;height:1.1em;margin:-.55em 0 0 -.55em;border-radius:50%;border:2px solid var(--accent);opacity:0;pointer-events:none}
.hero h1 .ch.press .rip,.hero h1 .ch.snap .rip{animation:h1rip .55s ease-out}
@keyframes h1rip{0%{transform:scale(.35);opacity:.9}100%{transform:scale(1.5);opacity:0}}
/* ギミック②: 「進化させる」が記号・かな・漢字から解けて現れる（演出の見本19「解読される文字」）。
   解くまでの間は字の幅を 1em に固定して、記号の幅で行が揺れないようにする（立ち上がりの transition は消さない） */
.hero h1 .ch.dec{width:1em;text-align:center}
.hero h1{cursor:default}
html.js .hero h1[data-replay]{cursor:pointer}
/* ギミック④: 進め方がスクロールで進む。4段の上の線をテラコッタの線が左から伸び、先端の点が通過した段が灯る。スマホ（1列）では左を縦に下りる。?anim=off では最後まで引いた状態 */
.steps{--p:1;position:relative}
.steps::before{content:"";position:absolute;left:0;top:-1px;height:2px;width:calc(var(--p)*100%);background:var(--accent);z-index:1;pointer-events:none;transition:width .35s cubic-bezier(.2,.7,.2,1)}
.steps::after{content:"";position:absolute;top:-5px;left:calc(var(--p)*100%);width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 18%,transparent);z-index:2;pointer-events:none;transition:left .35s cubic-bezier(.2,.7,.2,1)}
html.js .steps li{transition:opacity .5s ease}
html.js .steps li.off{opacity:.42}
@media (max-width:900px){
  .steps::before{width:2px;height:calc(var(--p)*100%);top:0;left:-1px;transition:height .35s cubic-bezier(.2,.7,.2,1)}
  .steps::after{left:-1px;top:calc(var(--p)*100%);margin:-5px 0 0 -4px;transition:top .35s cubic-bezier(.2,.7,.2,1)}
  .steps li{padding-left:18px}
}
/* ギミック③: ページ間の遷移（View Transitions・ページ跨ぎ）。ヘッダーは動かず、本文が上へ抜けて次の本文が下から入る。
   対応ブラウザ（Chrome 126+／Safari 18.2+／Edge）だけで効き、他は普通の遷移。動きを減らす設定では即切り替え */
@view-transition{navigation:auto}
.hd{view-transition-name:site-header}
::view-transition-old(root){animation:vt-out .22s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:vt-in .42s cubic-bezier(.16,1,.3,1) both}
@keyframes vt-out{to{opacity:0;transform:translateY(-14px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(18px)}}
::view-transition-group(site-header){animation-duration:0s}
@media (prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}}
html.no-anim::view-transition-old(root),html.no-anim::view-transition-new(root){animation:none}
/* ギミック⑤': メニューが右上のボタンから札になって弾み出る（ポップアップ）。後ろは暗くぼける。札の左と下の縁をテラコッタの線が L に走る。閉じる時は縮んで消える */
.spmenu{background:rgba(21,26,33,.18);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);padding:0;overflow:hidden}
.spmenu-in{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:calc(100% - 28px);max-width:420px;max-height:calc(100% - 40px);overflow-y:auto;background:rgba(245,240,232,.62);-webkit-backdrop-filter:blur(22px) saturate(1.1);backdrop-filter:blur(22px) saturate(1.1);border-radius:22px;
  padding:20px 26px 34px 36px;box-shadow:0 28px 60px rgba(0,0,0,.30),0 2px 6px rgba(0,0,0,.12);transform-origin:calc(100% - 24px) 0;overflow:hidden}
.spmenu-in::after{content:"";position:absolute;inset:0;background:linear-gradient(150deg,rgba(245,240,232,.35) 40%,rgba(245,240,232,0) 100%);pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.5);border-radius:22px}
.spmenu-in::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.42;border-radius:22px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-3 -3 22 22'%3E%3Cpath d='M0 0h4v12h12v4H0z' fill='none' stroke='%23c9bfae' stroke-width='.8'/%3E%3Cpath d='M7 .725H15.275V9' fill='none' stroke='%23c9bfae' stroke-width='.8'/%3E%3C/svg%3E");
  background-size:46px 46px;background-position:right -6px bottom -6px;
  -webkit-mask-image:radial-gradient(ellipse 75% 65% at 100% 100%,#000 15%,transparent 75%);mask-image:radial-gradient(ellipse 75% 65% at 100% 100%,#000 15%,transparent 75%)}
.spmenu-in>*{position:relative;z-index:1}
.spmenu-in nav{display:flex;flex-direction:column}
.spmenu a{padding:13px 0}
.spmenu a b{color:var(--accent)}
.spmenu-f{margin-top:16px}
/* ロゴの模様: 太い L（札の左と下の太い縁）＋細いかぎ括弧（右上の内側）。札の角丸に沿って切れる */
.spmenu-l1,.spmenu-l2{position:absolute;background:var(--accent);z-index:2;pointer-events:none}
.spmenu-l1{left:0;top:0;width:10px;height:100%;transform:scaleY(0);transform-origin:top}
.spmenu-l2{left:0;bottom:0;height:10px;width:100%;transform:scaleX(0);transform-origin:left}
.spmenu-lb{position:absolute;top:14px;right:14px;left:52%;height:46%;z-index:2;pointer-events:none}
.spmenu-lb i{position:absolute;background:var(--accent);border-radius:2px}
.spmenu-lb .t{left:0;right:0;top:0;height:3px;transform:scaleX(0);transform-origin:left}
.spmenu-lb .r{right:0;top:0;bottom:0;width:3px;transform:scaleY(0);transform-origin:top}
html.js .spmenu.open .spmenu-lb .t{transition:transform .24s cubic-bezier(.7,0,.2,1) .62s;transform:none}
html.js .spmenu.open .spmenu-lb .r{transition:transform .26s cubic-bezier(.7,0,.2,1) .8s;transform:none}
html.js .spmenu.closing .spmenu-lb i{opacity:0;transition:opacity .15s}
@keyframes popIn{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}62%{opacity:1;transform:translate(-50%,-50%) scale(1.03)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes popOut{to{opacity:0;transform:translate(-50%,-50%) scale(.75)}}
@keyframes dimIn{from{opacity:0}to{opacity:1}}
html.js .spmenu.open{animation:dimIn .3s ease both}
html.js .spmenu.open .spmenu-in{animation:popIn .5s cubic-bezier(.2,1.2,.3,1) both}
html.js .spmenu.open .spmenu-l1{transition:transform .26s cubic-bezier(.7,0,.2,1) .22s;transform:none}
html.js .spmenu.open .spmenu-l2{transition:transform .3s cubic-bezier(.7,0,.2,1) .44s;transform:none}
@keyframes menuItem{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
html.js .spmenu.open a{animation:menuFade .3s ease both;animation-delay:var(--d)}
html.js .spmenu.open a:nth-child(1){--d:.16s}html.js .spmenu.open a:nth-child(2){--d:.22s}html.js .spmenu.open a:nth-child(3){--d:.28s}
html.js .spmenu.open a:nth-child(4){--d:.34s}html.js .spmenu.open a:nth-child(5){--d:.40s}html.js .spmenu.open a:nth-child(6){--d:.48s}html.js .spmenu.open a:nth-child(7){--d:.54s}
@keyframes menuFade{from{opacity:0}to{opacity:1}}
/* 番号: ぼけた状態から下から弾んで入る */
@keyframes mbIn{0%{opacity:0;transform:translateY(.6em) scale(.7)}100%{opacity:1;transform:translateY(0) scale(1)}}
html.js .spmenu.open a b{display:inline-block;animation:mbIn .55s cubic-bezier(.2,1.35,.3,1) both;animation-delay:calc(var(--d) + .04s)}
/* 項目名: 1字ずつ下から立ち上がる（冒頭の見出しと同じ型） */
.spmenu a span .mc{display:inline-block;font-style:normal}  /* <i> の既定の斜体を打ち消す */
@keyframes mcIn{from{opacity:0;transform:translateY(.6em)}to{opacity:1;transform:translateY(0)}}
html.js .spmenu.open a span .mc{animation:mcIn .42s var(--ease) both;animation-delay:calc(var(--d) + .12s + var(--i) * 32ms)}
html.js .spmenu.open .spmenu-f{animation:menuItem .35s var(--ease) .62s both}
html.js .spmenu.closing{animation:dimIn .28s ease reverse both}
html.js .spmenu.closing .spmenu-in{animation:popOut .26s cubic-bezier(.4,0,1,1) both}

/* ============ お問い合わせのフォーム ============
   地は生成り（--bg）、線は濁った --line-2、フォーカスでテラコッタ。
   .hp はハニーポット＝画面外へ出す（display:none にすると bot に見抜かれる） */
.cform{margin-top:28px;max-width:34em}
.cform .cf-row{margin:0 0 18px;display:flex;flex-direction:column;gap:7px}
.cform label{font-size:12.5px;font-weight:700;letter-spacing:.04em;color:var(--mute-t)}
.cform input[type=text],.cform input[type=email],.cform select,.cform textarea{
  width:100%;box-sizing:border-box;font:inherit;font-size:15.5px;line-height:1.7;color:var(--ink);
  background:var(--bg);border:1px solid var(--line-2);border-radius:12px;padding:13px 15px;
  transition:border-color .2s ease,box-shadow .2s ease}
.cform textarea{min-height:132px;line-height:1.85;resize:vertical}
/* お問い合わせの種類。矢印は字の色（--mute-t）の2本の斜線で描く（新しい色を増やさない）。未選択の間は字を薄く */
.cform select{appearance:none;-webkit-appearance:none;padding-right:42px;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--mute-t) 50%),linear-gradient(135deg,var(--mute-t) 50%,transparent 50%);
  background-position:calc(100% - 21px) 52%,calc(100% - 16px) 52%;background-size:5px 5px;background-repeat:no-repeat}
.cform select:invalid{color:var(--mute-t)}
.cform select option{color:var(--ink)}
/* 見出しの「必須」「任意」の札。必須はテラコッタ（--accent）、任意は見出しと同じ薄い字 */
.cform .cf-tag{display:inline-block;margin-left:8px;padding:0 7px;border:1px solid var(--line-2);border-radius:999px;
  font-size:10.5px;font-weight:700;line-height:1.7;letter-spacing:.06em;color:var(--mute-t);vertical-align:1px}
.cform .cf-tag.req{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.cform input:focus,.cform select:focus,.cform textarea:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent)}
.cform .cf-turnstile{margin-top:4px;min-height:68px}
.cform .cf-send{margin:20px 0 0}
.cform .btn[disabled]{opacity:.5;transform:none;box-shadow:none;cursor:default}
.cform .cstatus{margin-top:14px;min-height:1.3em}
.cform .cstatus.ok{color:var(--ink)}
.cform .cstatus.ng{color:#a2402c}
/* かんたん見積もり・仕様カタログから持って来た内容（#cf-carry）。相談欄の上に、読むだけの枠で1行ずつ。
   地は --bg-2・線は --line（.pcard と同じ控えめな枠）。「外す」は字だけのボタン */
.cform .cf-carry{margin:0 0 18px;padding:16px 18px 14px;background:var(--bg-2);border:1px solid var(--line);border-radius:12px}
.cform .cf-carry-h{font-size:12.5px;font-weight:700;letter-spacing:.04em;color:var(--ink)}
.cform .cf-carry-h~.cf-carry-h{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.cform .cf-carry-s{margin-top:8px;font-size:12px;color:var(--mute-t)}
.cform .cf-carry ul{list-style:none;margin:6px 0 0;padding:0}
.cform .cf-carry li{font-size:14px;line-height:1.75;color:var(--sub);overflow-wrap:anywhere}
.cform .cf-carry-f{margin-top:12px;display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  font-size:12px;color:var(--mute-t)}
.cform .cf-carry-off{flex:none;font:inherit;font-size:12.5px;color:var(--mute-t);background:none;border:0;padding:4px 2px;
  text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.cform .cf-carry-off:hover{color:var(--accent)}
.cform textarea::placeholder{color:var(--mute-t);opacity:.8}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cf-actions{display:flex;gap:16px 24px;flex-wrap:wrap;margin-top:28px}
.csent{margin-top:28px}
.csent h2{font-size:19px;font-weight:700;letter-spacing:-.015em}
.csent p{margin-top:10px}

/* ============ 宿題の頁（/homework/。ヒアリングの前にお願いしたいこと 2026-09-25）============
   フォームは .cform を借りる。手順は番号の丸（--accent の線）＋見出し。面の3つは同じ背の行（名前・説明1行・件数） */
.hw{margin-top:24px}
.hw-state{margin-top:8px}
.hw-bad{margin-top:8px}
.hw-bad h2{font-size:19px;font-weight:700;letter-spacing:-.015em}
.hw-bad p{margin-top:10px}
.hw-form{max-width:36em;margin-top:8px}
.hw-to{margin:0;font-size:17px}
.hw-to b{font-size:20px;font-weight:700;margin-right:2px}
.hw-lead{margin-top:12px}
.hw-due{margin-top:12px;font-size:14px;color:var(--sub)}
.hw-due b{color:var(--ink)}
.hw-prev{margin-top:8px}
.hw-step{margin-top:36px;padding-top:28px;border-top:1px solid var(--line)}
.doc .hw-step h2{display:flex;align-items:center;gap:12px;margin:0 0 16px;font-size:18px;font-weight:700;letter-spacing:-.01em;line-height:1.4}
.doc .hw-step h2 .hw-n{flex:0 0 auto;display:inline-flex;margin:0;letter-spacing:0;line-height:1;align-items:center;justify-content:center;width:30px;height:30px;border-radius:999px;
  border:1.5px solid var(--accent);color:var(--accent);font-size:14px;font-weight:700}
.hw-note{margin:0 0 14px;font-size:14px;line-height:1.8;color:var(--sub)}
.hw-step .hw-note:last-child{margin:12px 0 0}
.hw-facets{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.hw-facets a{display:grid;grid-template-columns:4.2em 1fr auto;align-items:center;gap:12px;min-height:56px;padding:0 16px;
  border:1px solid var(--line-2);border-radius:12px;color:var(--ink);text-decoration:none;transition:border-color .2s ease}
.hw-facets a:hover{border-color:var(--accent)}
.hw-facets b{font-size:15.5px;font-weight:700}
.hw-facets span{font-size:13px;color:var(--mute-t);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hw-facets em{font-style:normal;font-size:14px;font-weight:700;color:var(--accent);white-space:nowrap}
.hw-total{margin-top:12px}
.hw-nda{margin:0;padding:0;border:0;display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px}
.hw-nda legend{width:100%;margin-bottom:10px;padding:0;font-size:15px;font-weight:700;color:var(--ink)}
.cform .hw-nda label{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:15.5px;font-weight:400;letter-spacing:0;color:var(--ink);cursor:pointer}
.hw-nda input{width:18px;height:18px;margin:0;accent-color:var(--accent)}
.cat-bar a[hidden]{display:none}
.doc .cform{max-width:560px}
@media (max-width:820px){
  .cform{max-width:none}
  .cform input[type=text],.cform input[type=email],.cform select,.cform textarea{font-size:16px}  /* iOS の自動ズーム除け */
}
/* お知らせの個別ページ（本文がある件だけ。masatoさん 9/19） */
.post .news{margin-top:30px}
.post h1{margin-top:10px}
.post h1+p{margin-top:24px}
.post p{color:var(--sub);font-size:16px;line-height:1.95;max-width:38em}
.post p+p{margin-top:16px}
.post .back{margin-top:48px}

/* 進め方の後ろ「つくったあとのこと」（masatoさん 2026-09-19） */
.after{margin-top:34px; border:1px solid var(--line); border-radius:16px; padding:24px 24px 22px; background:var(--bg)}
.after h3{font-size:17px; font-weight:700; letter-spacing:-.01em; margin:0}
.after p{margin:12px 0 0; color:var(--sub); line-height:1.95}
.after .fine{margin-top:10px; font-size:13.5px}
@media (max-width:760px){ .after{padding:20px 18px 18px} }

/* 費用の目安（masatoさん 2026-09-19）。既存の .doc / .spec / .card / .fine を流用し、足りない分だけ。
   早見表だけ3列（.spec は本来2列）。狭い画面では見出し行を伏せて1件ずつ積む＝横にはみ出さない。 */
.doc .spec.tri{margin-top:18px;table-layout:auto}
.doc .spec.tri th,.doc .spec.tri td{display:table-cell;width:auto;padding:13px 14px 13px 0;
  border-bottom:1px solid var(--line)}
.doc .spec.tri th:last-child,.doc .spec.tri td:last-child{padding-right:0}
.doc .spec.tri thead th{padding-top:0;color:var(--mute-t);font-size:12.5px;letter-spacing:.04em;
  border-bottom:1px solid var(--line)}
.doc .spec.tri tbody th{color:var(--ink);font-size:15px;font-weight:700}
.doc .spec.tri tbody td{white-space:nowrap}
.doc .spec.tri tbody tr:last-child th,.doc .spec.tri tbody tr:last-child td{border-bottom:0}
@media (max-width:560px){
  .doc .spec.tri thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .doc .spec.tri tbody tr{display:block;padding:14px 0;border-bottom:1px solid var(--line)}
  .doc .spec.tri tbody tr:first-child{border-top:1px solid var(--line)}
  .doc .spec.tri tbody tr:last-child{border-bottom:0}
  .doc .spec.tri tbody th,.doc .spec.tri tbody td{display:inline-block;padding:0;border-bottom:0}
  .doc .spec.tri tbody th{display:block}
  .doc .spec.tri tbody td{color:var(--sub);font-size:14.5px}
  .doc .spec.tri tbody td+td{margin-left:16px}
}
.doc .spec+.fine{margin-top:16px}
.doc .fine+.fine{margin-top:6px}
.doc .txt{margin-top:14px;color:var(--sub);font-size:16px;line-height:1.95;max-width:38em}
/* ★.steps はトップの「進め方」の線（script.js が --p を差す）。ここでは使えないので .nums */
.doc .nums{margin-top:16px;padding-left:1.4em}
.doc .nums li{color:var(--sub);font-size:15.5px;line-height:1.95}
.doc .nums li+li{margin-top:4px}
.doc .nums li::marker{color:var(--mute-t);font-size:14px}
.doc .marks{margin-top:14px;padding-left:1.3em}
.doc .marks li{color:var(--sub);font-size:15px;line-height:1.95}
.doc .marks li::marker{color:var(--line-2)}
.doc .duo{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.doc .duo .card{margin-top:0}
.doc .card h3{font-size:15px;font-weight:700;letter-spacing:-.01em}
.doc .card .marks{margin-top:10px}
@media (max-width:640px){
  .doc .duo{grid-template-columns:1fr;gap:12px}
  .doc .card{padding:20px 18px}
}
.doc .faq{margin-top:18px}
.doc .faq>div{padding:20px 0;border-bottom:1px solid var(--line)}
.doc .faq>div:first-child{border-top:1px solid var(--line)}
.doc .faq dt{font-size:15.5px;font-weight:700;line-height:1.8}
.doc .faq dd{margin-top:8px;color:var(--sub);font-size:15px;line-height:1.95;max-width:38em}
/* 事業02の札: リンクが2本並ぶ（費用の目安・お問い合わせ） */
.two .rolls{display:flex;flex-wrap:wrap;gap:10px 24px;margin-top:18px}
.two .rolls .roll{margin-top:0}

/* 費用の目安 追記分（masatoさん 2026-09-19）。表を厚くした分の最小追加。
   .quad は「どのくらいかかるか」表の4列版。狭い画面では td も1件ずつ完全に積む（横並びにしない） */
.doc .spec.quad tbody td:nth-child(2){white-space:normal}
@media (max-width:560px){
  .doc .spec.quad tbody td{display:block;margin-left:0;padding-top:4px}
}
.doc .nums li b{display:block;color:var(--ink);margin-bottom:2px}
/* 見出しと本文が離れて見えたので、項目ごとの間だけ空ける（Fable 2026-09-19） */
.doc .nums li+li{margin-top:16px}
.doc .nums li br{display:none}

/* 費用の目安「つくるものごとの目安」＝例をブロックで並べる（masatoさん 2026-09-19「例をブロックごとに分けた方が見やすい」） */
.doc .egs{display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:20px}
.doc .eg{border:1px solid var(--line); border-radius:14px; padding:20px 20px 18px; background:var(--bg)}
.doc .eg h3{margin:0; font-size:16px; font-weight:700; letter-spacing:-.01em}
/* 段の名と金額はブロックの下に（masatoさん 2026-09-19「金額はブロックにせず、作りたいアプリで分ける」） */
.doc .eg-n{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px;
  margin:14px 0 0; padding-top:12px; border-top:1px solid var(--line);
  font-size:14px; font-weight:700; color:var(--ink); letter-spacing:0}
.doc .eg-n span{font-size:16px; font-weight:700; color:var(--accent); letter-spacing:.01em}
.doc .eg .marks{margin:12px 0 0}
.doc .eg .marks li{font-size:14px; line-height:1.85}
.doc .eg-x{margin:12px 0 0; padding-top:12px; border-top:1px solid var(--line); font-size:13.5px; line-height:1.8; color:var(--sub)}
@media (max-width:760px){
  .doc .egs{grid-template-columns:1fr; gap:12px}
  .doc .eg{padding:18px 17px 16px}
}

/* つくり方の比べ（masatoさん 2026-09-19「ここ分かりにくい」）。
   表を狭い画面で積むと、費用と向いているものが同じ字に見えて区切りが消えた。
   倍率の基準を1つに揃え、名前の右に印として出す。 */
.doc .ways{margin-top:20px; border-top:1px solid var(--line)}
.doc .ways dt{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 12px;
  margin:0; padding:16px 0 0}
.doc .ways dt b{font-size:15.5px; font-weight:700; color:var(--ink)}
.doc .ways dt span{font-size:14px; font-weight:700; color:var(--accent);
  border:1px solid var(--line-2); border-radius:999px; padding:1px 11px; letter-spacing:.02em}
.doc .ways dd{margin:6px 0 0; padding:0 0 16px; border-bottom:1px solid var(--line);
  font-size:14.5px; line-height:1.85; color:var(--sub)}

/* つくり方のブロックの説明文（masatoさん 2026-09-19「ここもブロックにして」） */
.doc .eg-d{margin:10px 0 0; font-size:14.5px; line-height:1.85; color:var(--sub)}

/* 値に必ずラベルを添える表（masatoさん 2026-09-19。手本＝lassic のスマホ表示）。
   広い画面は普通の表。狭い画面では1行が1枚の札になり、項目ごとに「ラベル→値」を縦に積む。 */
.doc .spec.resp th[scope="col"]{font-size:12.5px}
@media (max-width:760px){
  .doc .spec.resp{display:block}
  .doc .spec.resp thead{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
  .doc .spec.resp th,.doc .spec.resp td{display:block; width:auto}
  /* 横に送って見る。高さは flex の伸びで揃う（masatoさん 2026-09-19）。
     ★overflow-x だけだと overflow-y が auto に化けて縦にも滑るので hidden を明示。 */
  /* ★項目の高さも札どうしで揃える＝格子の行を共有する（subgrid）。
     flex で縦に積むと、札ごとに機能例の行数が違って項目の位置がずれていた（masatoさん 2026-09-19）。 */
  .doc .spec.resp tbody{
    display:grid; grid-auto-flow:column; grid-auto-columns:86%; grid-template-rows:repeat(4,auto);
    gap:12px; align-items:stretch;
    overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none;
    margin-left:0; margin-right:0; padding:2px 0 4px;
  }
  .doc .spec.resp tbody::-webkit-scrollbar{display:none}
  .doc .spec.resp tr{
    display:grid; grid-row:1 / span 4; grid-template-rows:subgrid; scroll-snap-align:center;
    border:1px solid var(--line); border-radius:14px; padding:2px 16px 14px; margin:0; background:var(--bg)}
  /* ★最後の札だけ線が消えていた＝.spec の tr:last-child の指定が全セルに効いていたので当て直す */
  .doc .spec.resp tr:last-child th,.doc .spec.resp tr:last-child td{border-bottom:0}
  /* ★線は項目の「上」に置き、文字はその直下に寄せる（masatoさん 2026-09-19「線の上合わせにして」）。
     下線だと、揃えた行の余りが文字と線のあいだに落ちて、中央寄せに見えていた。 */
  .doc .spec.resp th,.doc .spec.resp td{
    align-self:start; border:0; border-top:1px solid var(--line);
    padding:13px 0 0; text-align:left}
  .doc .spec.resp tr>*:first-child{border-top:0; padding-top:10px}

  .doc .spec.resp th::before,.doc .spec.resp td::before{
    content:attr(data-l); display:block; margin-bottom:3px;
    font-size:11px; font-weight:700; letter-spacing:.04em; color:var(--mute-t)}
  .doc .spec.resp th{font-size:15px; font-weight:700; color:var(--ink)}
  .doc .spec.resp td{font-size:14px; line-height:1.85; color:var(--ink)}
}

/* --- 費用の目安: 節の中の小見出し（2026-09-19 統合した節で使う） --- */
.doc section>h3{margin:38px 0 0; font-size:15.5px; font-weight:700; letter-spacing:-.01em; color:var(--ink)}
.doc section>h2+h3{margin-top:20px}
.doc section>h3+.txt{margin-top:10px}

/* --- 費用の目安: かんたん見積もり（2026-09-19 作り直し）。既存の .card / .chips の律に合わせる ---
   JS が無い時は全部の問いと選択肢がそのまま縦に読める。JS が付くと .js-sim で一問ずつに替わる。 */
.doc .sim{margin-top:20px; max-width:620px}
.doc .sim-r{margin-top:24px; padding-top:24px; border-top:1px solid var(--line)}
.doc .sim-r:first-child{margin-top:0; padding-top:0; border-top:0}
.doc .sim-q{margin:0; font-size:16.5px; font-weight:700; line-height:1.65; letter-spacing:-.015em; color:var(--ink)}
.doc .sim-help{margin:7px 0 0; font-size:13px; line-height:1.8; color:var(--sub)}
.doc .sim-o{margin-top:14px; display:grid; gap:9px}

/* 選択肢は縦に積む大きめの札。太字の見出し＋小さい説明。 */
.doc .sim-pick{position:relative; display:block; width:100%; text-align:left; font:inherit;
  background:var(--bg); border:1px solid var(--line-2); border-radius:12px;
  padding:13px 48px 13px 15px; cursor:pointer; -webkit-appearance:none; appearance:none;
  transition:background-color .18s, border-color .18s, box-shadow .18s}
.doc .sim-pick-t{display:block; font-size:15px; font-weight:700; line-height:1.55;
  letter-spacing:-.01em; color:var(--ink)}
.doc .sim-pick-d{display:block; margin-top:3px; font-size:12.5px; line-height:1.7; color:var(--sub)}
.doc .sim-pick:hover{border-color:var(--ink)}
/* 選んだ札: 枠と地をテラコッタ側へ。印は CSS で描く丸と線（絵文字は使わない）。 */
.doc .sim-pick[aria-pressed="true"]{border-color:var(--accent); background:rgba(200,85,61,.055);
  box-shadow:inset 0 0 0 1px var(--accent)}
.doc .sim-pick[aria-pressed="true"] .sim-pick-t{color:var(--accent)}
.doc .sim-pick::after{content:''; position:absolute; top:50%; right:15px; width:19px; height:19px;
  margin-top:-10px; box-sizing:border-box; border:1px solid var(--line-2); border-radius:999px;
  background:var(--bg); transition:background-color .18s, border-color .18s}
.doc .sim-pick[aria-pressed="true"]::after{background:var(--accent); border-color:var(--accent)}
.doc .sim-pick::before{content:''; position:absolute; top:50%; right:22px; z-index:1;
  width:4px; height:8px; margin-top:-6px; box-sizing:border-box;
  border:2px solid #fff; border-top:0; border-left:0; transform:rotate(45deg); opacity:0}
.doc .sim-pick[aria-pressed="true"]::before{opacity:1}

/* 進み具合の帯（JS が足す）。答えた数だけ伸び、答えの箱では満了にする。 */
.doc .sim-prog{max-width:620px; margin:22px 0 11px; display:flex; align-items:center; gap:12px}
.doc .sim-bar{flex:1 1 auto; height:3px; border-radius:999px; background:var(--line); overflow:hidden}
.doc .sim-bar i{display:block; width:0; height:100%; border-radius:999px;
  background:var(--accent); transition:width .25s ease}
.doc .sim-step{flex:0 0 auto; margin:0; font-size:11.5px; font-weight:700; letter-spacing:.08em;
  color:var(--mute-t); white-space:nowrap; font-variant-numeric:tabular-nums}

/* 一問ずつ切り替える枠（JS が動く時だけ）。 */
.doc .js-sim{margin-top:0; border:1px solid var(--line); border-radius:16px;
  padding:22px 20px 20px; background:var(--bg)}
.doc .js-sim .sim-r{margin:0; padding:0; border:0}
.doc .sim-nav{margin:16px 0 0}
.doc .sim-back{appearance:none; -webkit-appearance:none; background:none; border:0; padding:0;
  cursor:pointer; font:inherit; font-size:13.5px; color:var(--sub);
  text-decoration:underline; text-underline-offset:3px}
.doc .sim-back:hover{color:var(--ink)}
.doc .js-sim .sim-r[hidden],.doc .sim-out[hidden],.doc .sim[hidden],.doc .sim-nav[hidden]{display:none}

/* 答えの箱 */
.doc .sim-out{margin-top:22px; max-width:620px}
.doc .sim-tier{margin:0; font-size:clamp(21px,3.6vw,26px); font-weight:700;
  line-height:1.4; letter-spacing:-.015em; color:var(--accent)}
.doc .sim-nums{margin:16px 0 0; display:grid; grid-template-columns:1fr 1fr; gap:14px 18px}
.doc .sim-nums>div{border-top:1px solid var(--line); padding-top:10px}
.doc .sim-nums dt{font-size:12px; color:var(--mute-t); letter-spacing:.04em}
.doc .sim-nums dd{margin:4px 0 0; font-size:17px; font-weight:700; letter-spacing:-.01em}
.doc .sim-sum{margin:22px 0 0; border-top:1px solid var(--line)}
.doc .sim-sum>div{display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding:9px 0; border-bottom:1px solid var(--line)}
.doc .sim-sum dt{flex:0 0 auto; font-size:12.5px; line-height:1.6; color:var(--mute-t)}
.doc .sim-sum dd{margin:0; text-align:right; font-size:13.5px; font-weight:700;
  line-height:1.6; letter-spacing:-.01em; color:var(--ink)}
.doc .sim-inc{margin-top:20px}
.doc .sim-inc-h{margin:0; font-size:12px; font-weight:700; letter-spacing:.04em; color:var(--mute-t)}
.doc .sim-inc ul{margin:10px 0 0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:7px}
.doc .sim-inc li{font-size:12.5px; line-height:1.6; color:var(--sub); background:var(--bg);
  border:1px solid var(--line-2); border-radius:999px; padding:5px 12px}
.doc .sim-out .fine{margin-top:18px}
.doc .sim-cta{margin:18px 0 0}
@media (max-width:420px){
  .doc .js-sim{padding:18px 15px 16px; border-radius:14px}
  .doc .sim-pick{padding:12px 44px 12px 13px}
  .doc .sim-nums{grid-template-columns:1fr; gap:12px}
}

/* かんたん見積もり: はじめる画面と切り替えの動き（masatoさん 2026-09-19） */
.doc .sim-intro{padding:22px 20px 20px; border-radius:14px;
  background:rgba(200,85,61,.055); border:1px solid rgba(200,85,61,.22)}
.doc .sim-intro-h{margin:0; font-size:19px; font-weight:700; letter-spacing:-.01em; color:var(--accent)}
.doc .sim-intro-m{margin:7px 0 16px; font-size:13px; font-weight:600; letter-spacing:.02em; color:var(--sub)}
.doc .sim-start{display:flex; width:100%; justify-content:center; padding:15px 20px; font-size:15.5px}
.doc .sim-intro-t{margin:0 0 18px; font-size:15px; line-height:1.9; color:var(--sub)}
.doc .sim-start{border:0; cursor:pointer; font:inherit}
.doc .sim-intro[hidden],.doc .sim-prog[hidden]{display:none}
/* 横に送る＋札が1枚ずつ（masatoさん 2026-09-19 の選択 B＋E） */
.doc .js-sim .sim-anim.from-r,.doc .sim-out.sim-anim.from-r{animation:simInR .3s cubic-bezier(.22,.68,.32,1) both}
.doc .js-sim .sim-anim.from-l,.doc .sim-out.sim-anim.from-l{animation:simInL .3s cubic-bezier(.22,.68,.32,1) both}
@keyframes simInR{from{opacity:0; transform:translateX(26px)} to{opacity:1; transform:none}}
@keyframes simInL{from{opacity:0; transform:translateX(-26px)} to{opacity:1; transform:none}}
.doc .js-sim .sim-anim .sim-pick{animation:simUp .26s cubic-bezier(.22,.68,.32,1) both; animation-delay:var(--d,0s)}
@keyframes simUp{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
.doc .sim-bar i{transition:width .35s cubic-bezier(.22,.68,.32,1)}
@media (prefers-reduced-motion: reduce){
  .doc .js-sim .sim-anim,.doc .sim-out.sim-anim,.doc .js-sim .sim-anim .sim-pick{animation:none}
  .doc .sim-bar i{transition:none}
}

/* つくり方の比べを短くした（masatoさん 2026-09-19「見積もりができたからここは簡略化していい」）。
   dd をやめて dt だけの並びにし、名前の右に動きを出す。 */
.doc .ways dt:first-child{border-top:1px solid var(--line)}
.doc .ways dt{padding:14px 0; border-bottom:1px solid var(--line); gap:4px 12px}
.doc .ways dt span{border:0; padding:0; font-size:14.5px}

/* 値にラベルを添えて縦に積む札（masatoさん 2026-09-19。横に送らない版）。
   広い画面は普通の表。狭い画面では1行が1枚の札になる。 */
@media (max-width:760px){
  .doc .spec.stack{display:block}
  .doc .spec.stack thead{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
  .doc .spec.stack tbody,.doc .spec.stack tr,.doc .spec.stack th,.doc .spec.stack td{display:block; width:auto}
  .doc .spec.stack tr{border:1px solid var(--line); border-radius:14px; padding:4px 18px 16px; margin:0 0 12px; background:var(--bg)}
  .doc .spec.stack tr:last-child{margin-bottom:0}
  .doc .spec.stack th,.doc .spec.stack td{border:0; border-top:1px solid var(--line); padding:13px 0 0; text-align:left}
  .doc .spec.stack tr>*:first-child{border-top:0; padding-top:10px}
  .doc .spec.stack th::before,.doc .spec.stack td::before{
    content:attr(data-l); display:block; margin-bottom:3px;
    font-size:12px; font-weight:700; letter-spacing:.04em; color:var(--mute-t)}
  .doc .spec.stack th{font-size:16px; font-weight:700; color:var(--ink)}
  .doc .spec.stack td{font-size:15.5px; line-height:1.8; color:var(--ink)}
}

/* 読みやすさの直し（2026-09-19）: 目次・見出しの二段・1列の札。
   色も飾りも増やさない。既存の変数だけを使う。 */
.doc .toc{margin:26px 0 0}
.doc .toc-h{margin:0 0 6px; font-size:12px; font-weight:700; letter-spacing:.04em; color:var(--mute-t)}
.doc .toc ul{margin:0; padding:0; list-style:none}
.doc .toc li{margin:0}
.doc .toc a{display:inline-block; padding:5px 0; font-size:15px; line-height:1.7; color:var(--ink);
  text-decoration:underline; text-decoration-color:var(--line-2); text-underline-offset:4px}
.doc .toc a:hover{text-decoration-color:var(--accent)}

/* 見出しは主題＋補足の二段。補足は小さく薄く、折り返す。 */
.doc section h2 span{display:block; margin-top:5px; font-size:13.5px; font-weight:400;
  line-height:1.7; letter-spacing:0; color:var(--mute-t)}
.doc section>h3 span{display:block; margin-top:4px; font-size:12.5px; font-weight:400;
  line-height:1.7; letter-spacing:0; color:var(--mute-t)}
.doc section[id]{scroll-margin-top:calc(var(--hd,64px) + 16px)}

/* 含むもの / 含まないもの: 1列なので広い画面でも札のまま（ラベルが消えないように） */
.doc .spec.stack.one{display:block}
.doc .spec.stack.one tbody,.doc .spec.stack.one tr,.doc .spec.stack.one td{display:block; width:auto}
.doc .spec.stack.one tr{border:1px solid var(--line); border-radius:14px;
  padding:4px 18px 16px; margin:0 0 12px; background:var(--bg)}
.doc .spec.stack.one tr:last-child{margin-bottom:0}
.doc .spec.stack.one td{border:0; padding:10px 0 0; text-align:left;
  font-size:15.5px; line-height:1.8; color:var(--ink)}
.doc .spec.stack.one td::before{content:attr(data-l); display:block; margin-bottom:3px;
  font-size:12px; font-weight:700; letter-spacing:.04em; color:var(--mute-t)}

/* 横に送る札の3項目版（つくり方。masatoさん 2026-09-19） */
@media (max-width:760px){
  .doc .spec.resp.r3 tbody{grid-template-rows:repeat(3,auto)}
  .doc .spec.resp.r3 tr{grid-row:1 / span 3}
}

/* 費用の段の横棒（かんたん見積もりの上。masatoさん 2026-09-19）。
   見積もりが終わると、当てはまった段の棒が濃くなる。 */
.doc .chart{margin:20px 0 26px}
.doc .chart-r{margin-bottom:12px}
.doc .chart-r:last-of-type{margin-bottom:8px}
.doc .chart-h{display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin-bottom:5px}
.doc .chart-n{font-size:13px; font-weight:700; color:var(--sub)}
.doc .chart-v{font-size:12.5px; color:var(--mute-t); font-variant-numeric:tabular-nums}
.doc .chart-t{position:relative; height:13px; border-radius:999px; background:var(--line)}
.doc .chart-b{position:absolute; top:0; bottom:0; border-radius:999px;
  background:rgba(200,85,61,.34); transition:background .25s ease}
.doc .chart-b.open{background:linear-gradient(90deg,rgba(200,85,61,.34),rgba(200,85,61,.06))}
.doc .chart-r.on .chart-b{background:var(--accent)}
.doc .chart-r.on .chart-b.open{background:linear-gradient(90deg,var(--accent),rgba(200,85,61,.18))}
.doc .chart-r.on .chart-n,.doc .chart-r.on .chart-v{color:var(--ink)}
.doc .chart-ax{display:flex; justify-content:space-between; margin-top:6px;
  font-size:11px; color:var(--mute-t); font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion: reduce){ .doc .chart-b{transition:none} }


/* お見積もりが出るまでの流れ（masatoさん 2026-09-19「見積もりの流れのこと」）。横に送る。 */
.doc .pflow{display:flex; gap:10px; align-items:stretch; list-style:none;
  margin:16px 0 26px; padding:2px 0 4px;
  overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; scrollbar-width:none;
  scroll-snap-type:x proximity; counter-reset:none}
.doc .pflow::-webkit-scrollbar{display:none}
.doc .pflow li{position:relative; flex:0 0 63%; scroll-snap-align:center;
  border:1px solid var(--line); border-radius:14px; padding:14px 16px 15px; background:var(--bg)}
.doc .pflow li+li{margin-left:14px}
.doc .pflow li+li::before{content:"›"; position:absolute; left:-18px; top:50%; transform:translateY(-50%);
  font-size:15px; color:var(--mute-t)}
.doc .pf-n{display:inline-block; min-width:20px; height:20px; line-height:20px; text-align:center;
  border-radius:999px; background:var(--accent); color:#fff; font-size:11.5px; font-weight:700}
.doc .pflow b{display:block; margin-top:8px; font-size:15px; font-weight:700; color:var(--ink)}
.doc .pflow i{display:block; margin-top:5px; font-style:normal; font-size:13px; line-height:1.75; color:var(--sub)}
@media (min-width:761px){ .doc .pflow li{flex:1 1 0} }

/* 費用の5段階（masatoさん 2026-09-19。￥を丸で囲み、間隔を空ける） */
.doc .yen{display:inline-flex; gap:7px; line-height:1}
.doc .yen i{display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:50%; box-sizing:border-box;
  font-style:normal; font-size:12px; font-weight:700; line-height:1;
  color:var(--line-2); border:1.5px solid var(--line-2); background:transparent}
.doc .yen i.on{color:#fff; border-color:var(--accent); background:var(--accent)}

/* 複数選べる問いの「次へ」（masatoさん 2026-09-19） */
.doc .sim-nav{display:flex; align-items:center; gap:18px; flex-wrap:wrap}
.doc .sim-next{border:0; cursor:pointer; font:inherit; font-size:14px; padding:11px 22px}
.doc .sim-next[hidden],.doc .sim-back[hidden]{display:none}

/* ★同じ項目が並ぶ所は高さを揃える（masatoさん 2026-09-19。何度も言われている）。
   説明は必ず1行に切る。長い字が来ても札の背が伸びない。 */
.doc .sim-pick-d{display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* ★横に送る札は画面の端まで（masatoさん 2026-09-19「見切れているのは前までなかった」）。
   余白の実測値を当てにせず、中央寄せを打ち消す計算で端まで伸ばす。
   狭い画面だけに効かせる（広い画面は中央の柱の中に収める）。 */
@media (max-width:760px){
  .doc .pflow,.doc .flow,.doc .spec.resp tbody{
    margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
    padding-left:calc(50vw - 50%); padding-right:calc(50vw - 50%);
  }
}

/* 答えの箱だけは横に動かさない（masatoさん 2026-09-19「最後でやっぱり横に少し動く」）。
   問いの切り替えは横のまま。答えは下からそっと出すだけにする。 */
.doc .sim-out.sim-anim.from-r,.doc .sim-out.sim-anim.from-l{
  animation:simUp .28s cubic-bezier(.22,.68,.32,1) both}
@media (prefers-reduced-motion: reduce){
  .doc .sim-out.sim-anim.from-r,.doc .sim-out.sim-anim.from-l{animation:none}
}

/* 本文から見積もりへ飛ぶリンク（masatoさん 2026-09-19） */
.doc .txt a{color:var(--accent); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px}
.doc .txt a:hover{color:var(--ink)}

/* よくある質問（押すと開く。masatoさん 2026-09-19） */
.doc .qa{margin-top:18px; border-top:1px solid var(--line)}
.doc .qa details{border-bottom:1px solid var(--line)}
.doc .qa summary{position:relative; list-style:none; cursor:pointer;
  padding:17px 34px 17px 0; font-size:15.5px; font-weight:700; line-height:1.7; color:var(--ink)}
.doc .qa summary::-webkit-details-marker{display:none}
.doc .qa summary::after{content:""; position:absolute; right:6px; top:50%;
  width:11px; height:11px; margin-top:-8px; border-right:1.6px solid var(--mute-t); border-bottom:1.6px solid var(--mute-t);
  transform:rotate(45deg); transition:transform .2s ease}
.doc .qa details[open] summary::after{transform:rotate(-135deg); margin-top:-3px}
.doc .qa summary:hover{color:var(--accent)}
.doc .qa p{margin:0; padding:0 0 18px; font-size:15px; line-height:1.95; color:var(--sub)}
@media (prefers-reduced-motion: reduce){ .doc .qa summary::after{transition:none} }

/* 札の中の箇条書き（masatoさん 2026-09-19。／の羅列をやめる） */
.doc .spec .lst{margin:0; padding:0; list-style:none}
.doc .spec .lst li{position:relative; padding-left:15px; line-height:1.85}
.doc .spec .lst li+li{margin-top:4px}
.doc .spec .lst li::before{content:""; position:absolute; left:2px; top:.72em;
  width:4px; height:4px; border-radius:50%; background:var(--accent); opacity:.7}

/* 見積もりの進み具合は上の4枚の札で見せる（masatoさん 2026-09-19） */
.doc .pflow li.now{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset}
.doc .pflow li.now .pf-n{background:var(--accent)}
.doc .pflow li.done{opacity:.55}
.doc .pflow li.done .pf-n{background:transparent; color:var(--mute-t); box-shadow:0 0 0 1.5px var(--line-2) inset}
.doc .pflow{scroll-behavior:smooth}
.doc .pflow li{transition:opacity .25s ease, border-color .25s ease, box-shadow .25s ease}
@media (prefers-reduced-motion: reduce){ .doc .pflow{scroll-behavior:auto} .doc .pflow li{transition:none} }

/* はじめる前は外枠を出さない（中の案内が枠を持つため二重になる。masatoさん 2026-09-19） */
.doc .js-sim.is-intro{border:0; padding:0; background:none}

/* 仕様カタログ（/catalog/）: JavaScript が無い時の案内（本体は Claude Design の書き出し。皮は tools/catalog/shell.html） */
.catalog-ns{max-width:820px;margin:0 auto;padding:60px 20px 100px;color:var(--sub);line-height:1.9}
/* 仕様カタログの面の切り替え（機能｜外観｜演出）。見出しの直下・app の見出しの上。幅と左端は app（1120px・左右20px）に揃える。
   スクロールしても上に留める（masatoさん 2026-09-25）。高さは --cat-fh（48px＋下線1px）。app 側で上に追従する2つ（スマホ〜タブレット幅の札の列＝
   header 直後の nav、PC幅の左の縦の一覧＝aside）はこの下へずらす（下の #dc-root の所）。z-index は app の札の列(20/30)より上・「詳しく見る」の幕(44)より下。
   ★iOS の sticky 殺し: 祖先は body だけ（body の overflow-x:hidden は html が visible なので viewport へ移る＝body はスクロールする箱にならない）。
   app の a{color} が文書全体に掛かるので色は class で持つ */
:root{--cat-fh:49px}
html:has(.cat-facets){scroll-padding-top:var(--cat-fh)}
.cat-facets{position:sticky;top:0;z-index:35;background:var(--bg);border-bottom:1px solid var(--line)}
#dc-root header+nav{top:var(--cat-fh)!important}
#dc-root aside[aria-label$="一覧"]{top:calc(var(--cat-fh) + 16px)!important;max-height:calc(100vh - var(--cat-fh) - 32px)!important}
.cat-facets-in{max-width:1120px;margin:0 auto;padding:0 20px;display:flex;gap:4px}
/* 見た目の面は左の一覧＋3列で中身の幅が 1280px（2026-09-24）。切り替えの左端を中身に揃える */
.cat-facets--wide .cat-facets-in{max-width:1280px}
/* 見た目・動きの面は中身が 1280px。サイトのヘッダーも同じ幅にしてロゴ・切り替え・見出しの左端を1本にそろえる（masatoさん 2026-09-24「統一感」） */
@media (min-width:800px){.hd--wide .hd-in{max-width:1280px;padding-left:20px;padding-right:20px}}
.cat-facets a{position:relative;display:flex;align-items:center;min-height:48px;padding:0 14px;
  font-size:14px;font-weight:700;letter-spacing:.06em;line-height:1.4;text-decoration:none;color:var(--mute-t)}
/* 左端の見出し「仕様カタログ」（何の切り替えかを示す。紹介の頁 /catalog/ へ）。控えめに: 小さく・淡い色・右に細い仕切り */
.cat-facets a.cat-facets-h{padding:0 14px 0 0;margin-right:6px;font-size:12.5px;font-weight:700;letter-spacing:.08em;white-space:nowrap}
.cat-facets a.cat-facets-h::after{left:auto;right:0;top:50%;bottom:auto;width:1px;height:14px;margin-top:-7px;background:var(--line);transform:none;transition:none}
.cat-facets a::after{content:"";position:absolute;left:14px;right:14px;bottom:-1px;height:2px;background:var(--accent);
  transform:scaleX(0);transition:transform .3s var(--ease)}
.cat-facets a:hover{color:var(--ink)}
.cat-facets a[aria-current="page"]{color:var(--ink)}
.cat-facets a[aria-current="page"]::after{transform:scaleX(1)}
.cat-facets a:focus-visible{outline:2px solid var(--accent);outline-offset:-4px;border-radius:6px}
/* 右端の「仕様カタログとは」（紹介の頁 /catalog/ へ）。控えめに: 下線の印を付けず字も小さく */
.cat-facets a.cat-facets-about{margin-left:auto;margin-right:-14px;font-size:12.5px;font-weight:500;letter-spacing:.02em}
.cat-facets a.cat-facets-about::after{display:none}
/* 狭い幅は右端の「仕様カタログとは」を隠す（左の見出しが同じ /catalog/ へのリンク＝役目は重複しない）。390px でも4つは1行に入らない */
@media (max-width:520px){.cat-facets a.cat-facets-about{display:none}}
@media (max-width:420px){.cat-facets a{padding:0 11px}.cat-facets a.cat-facets-h{padding:0 11px 0 0;margin-right:4px;font-size:12px}}
/* スマホ〜タブレット幅（〜1023px）の上部（masatoさん 2026-09-25 案 A＋C）。app の横の札の列（header 直後の nav）は隠し、
   帯の中の細い1行「今いる所」（.cat-here。中身と一覧のシート .cat-sheet は script.js が作る）で現在地と一覧を担う。
   機能の面は #catalog-nav に業種の列も入っているので、札の列（#chip-row）だけ隠して nav は流れの中へ戻す（業種で絞るは残す）。
   演出の面の分類の見出し（div#c-01…）の sticky もやめる（節名は1行が担う。app の stickCat が付ける transform も打ち消す）。
   下へスクロールしている間は帯ごと上へ隠す（.is-away。script.js が向きで付け外し）。★transform を持つ祖先の中の fixed は箱が変わるので、シートは帯の外に置く */
.cat-here,.cat-sheet{display:none}
@media (max-width:1023px){
  :root{--cat-fh:90px}
  #dc-root header+nav:not(#catalog-nav),#dc-root #chip-row{display:none!important}
  #dc-root #catalog-nav{position:static!important}
  #dc-root div[id^="c-"][style*="sticky"]{position:relative!important;top:auto!important;transform:none!important}
  .cat-facets{transition:transform .28s var(--ease)}
  .cat-facets.is-away{transform:translateY(calc(-100% - 2px))}
  .cat-here{display:block;border-top:1px solid var(--line)}
  .cat-here-b{display:flex;align-items:center;gap:12px;width:100%;max-width:1280px;height:40px;margin:0 auto;padding:0 20px;border:0;background:none;
    font:inherit;color:var(--ink);text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .cat-here-b:focus-visible{outline:2px solid var(--accent);outline-offset:-4px;border-radius:6px}
  .cat-here-t{flex:1 1 auto;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:13.5px;font-weight:700;line-height:40px;letter-spacing:.02em}
  .cat-here-t small{font-size:11.5px;font-weight:500;color:var(--mute-t);letter-spacing:.04em}
  .cat-here-t i{font-style:normal;font-size:12px;font-variant-numeric:tabular-nums;color:var(--accent);margin-right:.5em}
  .cat-here-o{flex:none;display:flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;color:var(--mute-t);letter-spacing:.04em}
  .cat-here-o svg{width:11px;height:11px}
  /* 一覧のシート（下から出る・高さは画面の75%まで・中だけスクロール）。下の帯 .cat-bar（60）より上 */
  .cat-sheet{display:block;position:fixed;inset:0;z-index:70}
  .cat-sheet[hidden]{display:none}
  .cat-sheet-bg{position:absolute;inset:0;background:rgba(21,26,33,.42);opacity:0;transition:opacity .25s}
  .cat-sheet-p{position:absolute;left:0;right:0;bottom:0;max-width:720px;max-height:75vh;max-height:75dvh;margin:0 auto;display:flex;flex-direction:column;
    background:var(--bg);border-radius:16px 16px 0 0;box-shadow:0 -8px 32px rgba(21,26,33,.18);padding-bottom:env(safe-area-inset-bottom);
    transform:translateY(100%);transition:transform .32s var(--ease);outline:none}
  .cat-sheet.is-on .cat-sheet-bg{opacity:1}
  .cat-sheet.is-on .cat-sheet-p{transform:none}
  .cat-sheet-hd{flex:none;display:flex;align-items:center;justify-content:space-between;min-height:52px;padding:4px 8px 4px 20px;border-bottom:1px solid var(--line)}
  .cat-sheet-h{margin:0;font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--accent)}
  .cat-sheet-x{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border:0;border-radius:999px;background:none;color:var(--ink);cursor:pointer}
  .cat-sheet-x svg{width:16px;height:16px}
  .cat-sheet-l{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:6px 0 20px}
  .cat-sheet-g{margin:0;padding:16px 20px 6px;font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--mute-t)}
  .cat-sheet-l a{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 20px 0 18px;border-left:2px solid transparent;
    color:var(--ink);text-decoration:none;font-size:15px;font-weight:500;line-height:1.35}
  .cat-sheet-l a span{flex:0 0 22px;font-size:12px;font-variant-numeric:tabular-nums;color:var(--mute-t)}
  .cat-sheet-l a[aria-current="true"]{border-left-color:var(--accent);color:var(--accent);font-weight:700}
  .cat-sheet-l a[aria-current="true"] span{color:var(--accent)}
  /* 背後の頁を止める: html だけ overflow:hidden（viewport が止まる）。★body の overflow-x:hidden はこの間 visible へ戻す。
     html が visible でなくなると body の overflow が viewport へ移らず body 自身がスクロールの箱になり、帯の sticky が死ぬ（iOS の sticky 殺しと同じ形） */
  html.cat-sheet-open{overflow:hidden}
  html.cat-sheet-open body{overflow:visible}
}
@media (max-width:1023px) and (prefers-reduced-motion:reduce){.cat-facets,.cat-sheet-bg,.cat-sheet-p{transition:none}}
/* 仕様カタログの読み込みの幕（#lg-pre。皮は tools/catalog/shell.html の @top）。bundler が <html> ごと差し替えるまでの間だけ在る。
   左端・幅は .cat-facets-in に揃える。線は細く左から右へ流すだけ（動きを控える設定では止めて短い線を置く）。画像は使わない */
.cat-pre{min-height:100vh}
.cat-pre-in{max-width:1120px;margin:0 auto;padding:40px 20px 0}
.cat-pre-eb{font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--mute-t)}
.cat-pre-h{margin-top:8px;font-size:clamp(24px,4.2vw,34px);font-weight:700;line-height:1.35;letter-spacing:-.015em;color:var(--ink)}
.cat-pre-line{position:relative;margin-top:28px;max-width:320px;height:2px;border-radius:999px;background:rgba(21,26,33,.1);overflow:hidden}
.cat-pre-line i{position:absolute;top:0;bottom:0;left:0;width:36%;border-radius:999px;background:var(--accent);
  animation:catPre 1.4s cubic-bezier(.45,0,.25,1) infinite}
@keyframes catPre{from{transform:translateX(-100%)}to{transform:translateX(280%)}}
.cat-pre-t{margin-top:12px;font-size:13px;letter-spacing:.04em;color:var(--sub)}
@media (prefers-reduced-motion:reduce){.cat-pre-line i{animation:none}}

/* 仕様カタログの下の帯（3つの面の合算。script.js の「気になる」の帯）。app の帯（position:fixed・/contact/? へのリンク入り）は隠す。
   ★:has の無いブラウザは script.js が .lg-app-bar を付けて隠す。帯の位置はブラウザ任せ（position:fixed。scroll で動かさない） */
[style*="fixed"][style*="bottom"]:has(a[href^="/contact/?"]):not(.cat-bar),.lg-app-bar{display:none!important}
.cat-bar{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--ink);color:#fff;
  padding:12px 20px calc(12px + env(safe-area-inset-bottom));box-shadow:0 -10px 30px rgba(21,26,33,.18);letter-spacing:normal}
.cat-bar[hidden]{display:none}
.cat-bar-in{max-width:1120px;margin:0 auto;display:flex;align-items:center;gap:10px 18px}
.cat-bar-t{flex:1 1 auto;min-width:0;margin:0;font-size:13px;line-height:1.5;color:#d9d4cb}
.cat-bar-t b{font-size:15px;font-weight:700;color:#fff;margin-right:6px}
.cat-bar a{flex:0 0 auto;display:flex;align-items:center;min-height:44px;margin:0;border-radius:999px;font-size:14px;font-weight:700;
  text-decoration:none;white-space:nowrap}
.cat-bar-list{padding:0 6px;color:#fff;text-decoration:underline!important;text-underline-offset:3px}
.cat-bar-go{padding:0 20px;background:#a8432f;color:#fff}
.cat-bar-go:hover{background:#8f3826}
/* 合わせて必要（機能の見本）。1行で収め、帯を高くしない */
.cat-bar-in{flex-wrap:wrap}
.cat-bar-need{order:-1;flex:1 0 100%;display:flex;align-items:center;gap:12px;margin:0;font-size:12.5px;line-height:1.5;color:#d9d4cb}
.cat-bar-need[hidden]{display:none}
.cat-bar-need span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cat-bar-need button{flex:none;min-height:32px;padding:0 12px;border:1px solid rgba(255,255,255,.45);border-radius:999px;background:none;
  color:#fff;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer}
.cat-bar-need button:hover{border-color:#fff}
.cat-bar-t{flex:1 1 200px}
body.has-cat-bar .ft{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
@media (max-width:560px){.cat-bar-in{flex-wrap:wrap}.cat-bar-t{flex-basis:100%}.cat-bar-t span{display:inline-block}
  .cat-bar-list{margin-left:auto!important}body.has-cat-bar .ft{padding-bottom:calc(184px + env(safe-area-inset-bottom))}}

/* 仕様カタログの紹介の頁（/catalog/。手書き）。3つの入口の札は高さを揃える（絵は 16:10 で切る） */
.doc.cat-intro .wrap{max-width:1080px}
.cat-intro .lead{max-width:40em}
.cat-entries{margin-top:40px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;list-style:none;padding:0}
.cat-entry{display:flex;flex-direction:column;height:100%;border:1px solid var(--line);border-radius:14px;overflow:hidden;
  text-decoration:none;color:var(--ink);background:#fff;transition:border-color .3s var(--ease),transform .3s var(--ease)}
.cat-entry:hover{border-color:var(--line-2);transform:translateY(-2px)}
.cat-entry img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top;background:var(--bg-2);border-bottom:1px solid var(--line)}
.cat-entry-b{flex:1;display:flex;flex-direction:column;padding:18px 20px 20px}
.cat-entry h2{font-size:18px;font-weight:700;line-height:1.5;display:flex;align-items:baseline;gap:10px}
.cat-entry h2 small{font-size:13px;font-weight:700;color:var(--accent);letter-spacing:.02em}
.cat-entry p{margin-top:6px;font-size:14px;line-height:1.8;color:var(--sub)}
.cat-entry-go{margin-top:auto;padding-top:12px;font-size:14px;font-weight:700;color:var(--accent)}
.cat-entry-go::after{content:" \2192"}
.cat-picks{scroll-margin-top:24px}
.cat-picks .txt{margin-top:8px;font-size:14.5px;color:var(--sub)}
.cat-picks-empty{margin-top:16px;padding:22px 24px;border:1px dashed var(--line-2);border-radius:14px;font-size:14.5px;color:var(--sub)}
.cat-picks-list{margin-top:16px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.cat-picks-list[hidden],.cat-picks-empty[hidden],.cat-picks-act[hidden]{display:none}
.cat-picks-g h3{font-size:14px;font-weight:700;color:var(--mute-t);padding-bottom:6px;border-bottom:1px solid var(--line)}
.cat-picks-g ul{list-style:none;padding:0}
.cat-picks-g li{display:flex;align-items:center;gap:12px;min-height:48px;border-bottom:1px solid var(--line);font-size:15px;line-height:1.5}
.cat-picks-g li span{flex:1;min-width:0}
.cat-picks-rm{flex:none;min-height:36px;padding:0 12px;border:1px solid var(--line-2);border-radius:999px;background:#fff;
  font:inherit;font-size:13px;color:var(--sub);cursor:pointer}
.cat-picks-rm:hover{border-color:var(--ink);color:var(--ink)}
.cat-picks-g h4{margin-top:16px;font-size:12.5px;font-weight:700;color:var(--mute-t)}
.cat-picks-need li{color:var(--sub)}
.cat-picks-addall{margin-top:10px;min-height:36px;padding:0 14px;border:1px solid var(--ink);border-radius:999px;background:#fff;
  font:inherit;font-size:13px;font-weight:700;color:var(--ink);cursor:pointer}
.cat-picks-act{margin-top:24px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.cat-picks-clear{border:0;background:none;padding:8px 0;font:inherit;font-size:14px;color:var(--sub);text-decoration:underline;
  text-underline-offset:3px;cursor:pointer}
@media (max-width:820px){.cat-entries,.cat-picks-list{grid-template-columns:minmax(0,1fr)}.cat-entries{gap:16px}}

/* 見出しの並び: 仕様カタログを足して7つになったので、狭めの幅（821〜1100px）で折り返さないよう詰める（2026-09-23） */
.hd-nav a{white-space:nowrap}
@media (max-width:1100px){.hd-nav a{padding:8px 8px}.hd-nav a::after{left:8px;right:8px}}
@media (max-width:960px){.hd-nav{gap:0}.hd-nav a{padding:8px 6px;font-size:12px}.hd-nav a::after{left:6px;right:6px}}