/* ============================================================
   はぁにデザイン工房 — コンセプト案「お絵かきアプリ風」
   メインカラー #E1DD60 ／ 下地はドット
   ============================================================ */
:root{
  --main:      #E1DD60;   /* メインカラー */
  --main-deep: #B8B43F;   /* 濃いめ（縁・影） */
  --main-soft: #F2F0BE;   /* 淡い */
  --cream:     #FBFAEC;
  --paper:     #FFFEF7;
  --ink:       #1E1C14;
  --gray:      #8A8470;
  --bd: 2.5px solid var(--ink);
  --r: 12px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'M PLUS Rounded 1c','Noto Sans JP',sans-serif;
  font-weight:700;
  color:var(--ink);
  background-color:var(--cream);
  /* 下地：ドット */
  background-image:radial-gradient(circle, rgba(30,28,20,.13) 1.5px, transparent 1.6px);
  background-size:16px 16px;
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
.dot{font-family:'DotGothic16',monospace;font-weight:400;}

/* ============ 共通ボタン（押し込み） ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  background:var(--paper);color:var(--ink);
  border:var(--bd);border-radius:var(--r);
  padding:.6rem 1.1rem;font:inherit;font-size:.82rem;
  box-shadow:0 3px 0 var(--ink);
  cursor:pointer;transition:transform .08s,box-shadow .08s,background .15s;
  white-space:nowrap;
}
.btn:hover{background:var(--main);}
.btn:active{transform:translateY(3px);box-shadow:0 0 0 var(--ink);}
.btn-y{background:var(--main);}
.btn-y:hover{background:var(--main-deep);}
.btn-g{background:var(--ink);color:var(--main);}
.btn-g:hover{background:#000;color:var(--main);}
.btn-sm{padding:.35rem .75rem;font-size:.72rem;box-shadow:0 2.5px 0 var(--ink);}
.btn-lg{padding:.85rem 1.7rem;font-size:.95rem;box-shadow:0 4px 0 var(--ink);}

/* ============ アプリウィンドウ ============ */
.app{
  max-width:1240px;margin:1rem auto;
  border:var(--bd);border-radius:18px;
  background:var(--paper);
  box-shadow:0 6px 0 var(--ink);
  overflow:hidden;
}
/* タイトルバー */
.titlebar{
  background:var(--main);
  border-bottom:var(--bd);
  padding:.7rem .9rem;
  display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;
}
.tb-title{
  font-size:1.05rem;color:var(--ink);
  text-shadow:0 2px 0 rgba(255,255,255,.55);
  display:flex;align-items:center;gap:.5rem;
}
.tb-spec{
  font-size:.66rem;color:var(--main);
  background:var(--ink);
  border-radius:100px;padding:.2rem .9rem;
  letter-spacing:.05em;
}
.tb-actions{margin-left:auto;display:flex;gap:.5rem;flex-wrap:wrap;}

/* ワークスペース：ツール／キャンバス／パネル */
.workspace{
  display:grid;
  grid-template-columns:88px 1fr 250px;
  align-items:stretch;
}
/* 左ツールバー */
.toolrail{
  background:var(--cream);border-right:var(--bd);
  padding:.7rem .5rem;display:flex;flex-direction:column;gap:.5rem;
}
.tool{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  background:var(--paper);border:var(--bd);border-radius:10px;
  padding:.45rem .2rem;font-size:.6rem;
  box-shadow:0 3px 0 var(--ink);
  transition:transform .08s,box-shadow .08s,background .15s;
}
.tool i{font-style:normal;font-size:1.15rem;line-height:1;}
.tool:hover{background:var(--main);}
.tool:active{transform:translateY(3px);box-shadow:0 0 0 var(--ink);}
.tool.on{background:var(--main);}
.rail-label{
  text-align:center;font-size:.55rem;color:var(--gray);
  padding:.3rem 0 .1rem;letter-spacing:.1em;
}

/* キャンバス：ドットの下地 */
.canvas{
  position:relative;padding:1.1rem;
  background-color:var(--cream);
  background-image:radial-gradient(circle, rgba(30,28,20,.17) 1.8px, transparent 1.9px);
  background-size:12px 12px;
  display:flex;align-items:center;justify-content:center;min-height:440px;
}
.canvas-frame{
  position:relative;width:100%;
  border:var(--bd);border-radius:8px;
  background-color:var(--main);
  /* 画面内もうっすらドット */
  background-image:radial-gradient(circle, rgba(30,28,20,.09) 1.6px, transparent 1.7px);
  background-size:14px 14px;
  overflow:hidden;
  display:grid;grid-template-columns:1fr 1fr;align-items:end;
  min-height:400px;
}
/* 吹き出し */
.balloon{
  position:relative;align-self:center;
  background:#fff;border:var(--bd);border-radius:16px;
  padding:1.1rem 1.2rem;margin:1.2rem;
}
.balloon h1{font-size:clamp(1.2rem,2.6vw,1.7rem);line-height:1.5;letter-spacing:.02em;}
.balloon h1 em{font-style:normal;background:var(--main);padding:0 .2rem;border-radius:4px;}
.balloon p{font-size:.75rem;font-weight:500;color:#4a453c;margin-top:.5rem;}
.balloon .chips{display:flex;gap:.35rem;flex-wrap:wrap;margin-top:.7rem;}
.chip{
  font-size:.62rem;background:var(--cream);
  border:2px solid var(--ink);border-radius:100px;padding:.1rem .6rem;
}
.balloon .cta{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.9rem;}
.canvas-chara{
  align-self:end;justify-self:center;
  max-height:min(56vh,430px);width:auto;
}
/* 右パネル */
.panel{
  background:var(--cream);border-left:var(--bd);
  padding:.8rem .7rem;display:flex;flex-direction:column;gap:.9rem;
}
.pgroup-ttl{font-size:.62rem;color:var(--gray);letter-spacing:.08em;}
.layer{
  display:flex;align-items:center;gap:.4rem;
  background:var(--paper);border:var(--bd);border-radius:9px;
  padding:.35rem .5rem;font-size:.66rem;
  box-shadow:0 2.5px 0 var(--ink);
  transition:transform .08s,box-shadow .08s,background .15s;
}
.layer:hover{background:var(--main);}
.layer:active{transform:translateY(2.5px);box-shadow:0 0 0 var(--ink);}
.layer i{font-style:normal;}
.toggle{
  display:flex;align-items:center;justify-content:space-between;
  font-size:.66rem;background:var(--paper);
  border:var(--bd);border-radius:9px;padding:.3rem .5rem;
}
.toggle span.sw-on{
  width:34px;height:18px;border-radius:100px;
  background:var(--main);border:2px solid var(--ink);
  position:relative;
}
.toggle span.sw-on::after{
  content:'';position:absolute;right:1px;top:1px;
  width:12px;height:12px;border-radius:50%;background:#fff;border:1.5px solid var(--ink);
}

/* ============ 最近の作品（下部の帯） ============ */
.timeline{
  background:var(--cream);border-top:var(--bd);
  padding:.7rem .9rem;
}
.tl-bar{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-bottom:.6rem;}
.tl-label{font-size:.68rem;color:var(--gray);}
.tl-frames{
  overflow-x:auto;overflow-y:hidden;padding:.6rem .5rem;
  background:var(--ink);border-radius:10px;
  scrollbar-width:thin;
}
.tl-track{display:flex;gap:.5rem;}
.tl-frame{
  flex:0 0 auto;width:104px;
  border:3px solid rgba(255,254,247,.2);border-radius:8px;overflow:hidden;
  background:var(--paper);position:relative;
  transition:border-color .18s, transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s;
}
.tl-frame img{width:100%;height:74px;object-fit:cover;}
.tl-frame b{
  position:absolute;top:2px;left:3px;
  font-size:.55rem;background:rgba(30,28,20,.75);color:#fff;
  border-radius:4px;padding:0 .25rem;
}
.tl-frame:hover{border-color:rgba(225,221,96,.6);}
/* 選択中：メインカラーの枠＋ぽんと拡大 */
@keyframes tlPop{
  0%   {transform:scale(1);}
  45%  {transform:scale(1.14);}
  100% {transform:scale(1.07);}
}
.tl-frame.on{
  border-color:var(--main);
  transform:scale(1.07);
  box-shadow:0 0 0 3px rgba(255,254,247,.3);
  animation:tlPop .3s cubic-bezier(.34,1.56,.64,1);
}

/* ============ 料金：主役を1つ決める ============ */
.price-lead{
  display:grid;grid-template-columns:1.2fr 1fr;
  gap:.9rem;align-items:stretch;   /* 左右の高さを揃える */
}
.price-side{display:flex;flex-direction:column;gap:.9rem;}
.price-side .pcard{flex:1;display:flex;flex-direction:column;justify-content:center;}
.pcard.lead{
  text-align:left;padding:1.4rem 1.3rem;
  display:flex;flex-direction:column;
}
.pcard.lead h3{font-size:1.35rem;margin:.45rem 0 .5rem;}
.pcard.lead .yen{align-self:flex-start;}
.pcard.lead p{margin-top:.6rem;}
/* 内訳。margin-top:auto でカード下端まで伸ばし、余白を埋める */
.lead-list{
  list-style:none;margin-top:auto;padding-top:.85rem;
  border-top:2.5px dotted rgba(30,28,20,.22);
  display:grid;grid-template-columns:1fr 1fr;gap:.3rem .8rem;
}
.lead-list li{
  font-size:.68rem;font-weight:500;color:var(--gray);
  position:relative;padding-left:.95rem;
}
.lead-list li::before{
  content:'';position:absolute;left:0;top:.62em;
  width:6px;height:6px;background:var(--main);
  border:1.5px solid var(--ink);border-radius:2px;
}
.pcard.mini{text-align:left;padding:1rem 1.1rem;}
.pcard.mini h3{font-size:.95rem;margin:0 0 .45rem;}
.pcard.mini .yen{font-size:.88rem;}
.pcard.mini p{margin-top:.45rem;}
.badge{
  display:inline-block;font-size:.6rem;
  background:var(--main);border:2px solid var(--ink);
  border-radius:100px;padding:.05rem .65rem;
}

/* ============ 流れ：番号と見出しで意味を伝える ============ */
.steplist{border-top:2.5px dotted rgba(30,28,20,.22);}
.step{
  display:grid;grid-template-columns:auto 1fr;
  gap:1rem;align-items:start;
  padding:.95rem .2rem;
  border-bottom:2.5px dotted rgba(30,28,20,.22);
}
.step-no{
  font-size:.95rem;background:var(--main);
  border:2px solid var(--ink);border-radius:8px;
  padding:.05rem .55rem;line-height:1.5;
}
.step h3{font-size:.95rem;margin-bottom:.1rem;}
.step p{font-size:.73rem;font-weight:500;color:var(--gray);line-height:1.9;}

@media(max-width:760px){
  .price-lead{grid-template-columns:1fr;}
}
@media(max-width:480px){
  .lead-list{grid-template-columns:1fr;}
}

/* ============ 最新ニュース（見出しをクリックで開閉するウィンドウ） ============ */
.nbwin > summary{
  cursor:pointer;list-style:none;
  transition:filter .15s;
}
.nbwin > summary::-webkit-details-marker{display:none;}
.nbwin > summary::after{
  content:'▼';font-size:.7rem;color:var(--ink);
  transition:transform .25s;
}
.nbwin[open] > summary::after{transform:rotate(180deg);}
.nbwin > summary:hover{filter:brightness(1.05);}
.nb-item{
  display:grid;grid-template-columns:auto 1fr;gap:.7rem;
  padding:.75rem .1rem;
  border-top:2.5px dotted rgba(30,28,20,.22);
}
.nb-item:first-child{border-top:none;padding-top:.2rem;}
.nb-date{
  font-size:.6rem;background:var(--main);
  border:2px solid var(--ink);border-radius:100px;
  padding:.05rem .55rem;white-space:nowrap;height:fit-content;
}
.nb-item h4{font-size:.8rem;margin-bottom:.15rem;}
.nb-link{
  display:inline-block;margin-top:.35rem;
  font-size:.68rem;font-weight:700;color:var(--ink);
  background:var(--main);border:2px solid var(--ink);
  border-radius:100px;padding:.12rem .7rem;
  box-shadow:0 2px 0 var(--ink);
  transition:transform .08s,box-shadow .08s;
}
.nb-link:hover{transform:translateY(2px);box-shadow:0 0 0 var(--ink);}
/* 4件目以降の折りたたみ */
.nb-more-body{padding:0 .9rem .5rem;}
.nb-more-body .nb-item:first-child{border-top:none;padding-top:.3rem;}
.nb-item p{font-size:.7rem;font-weight:500;color:var(--gray);line-height:1.8;}
@media(max-width:560px){
  .nb-item{grid-template-columns:1fr;gap:.25rem;}
}

/* ============ 下層ページ用：横並びのツールバー ============ */
.subrail{
  display:flex;gap:.5rem;overflow-x:auto;
  background:var(--cream);border-top:var(--bd);
  padding:.6rem .8rem;
}
.subrail .tool{
  flex:0 0 auto;flex-direction:row;align-items:center;gap:.35rem;
  padding:.45rem .85rem;font-size:.7rem;
}
.subrail .tool i{font-size:.95rem;}
.crumb{
  width:calc(100% - 1.2rem);
  max-width:1000px;margin:1.4rem auto -.6rem;
  padding:0 .6rem;font-size:.68rem;color:var(--gray);
}
.crumb a:hover{color:var(--ink);}

/* ============ 料金テーブル ============ */
.ptable{margin-top:.2rem;}
.prow2{
  display:grid;grid-template-columns:1fr auto;
  gap:.15rem 1rem;align-items:center;
  padding:.85rem .3rem;
  border-bottom:2.5px dotted rgba(30,28,20,.25);
}
.prow2:last-child{border-bottom:none;}
.pn{font-size:.85rem;}
.pd{grid-column:1;font-size:.68rem;font-weight:500;color:var(--gray);line-height:1.8;}
.pp{
  grid-row:1/3;grid-column:2;align-self:center;
  background:var(--main);border:2.5px solid var(--ink);
  border-radius:100px;padding:.15rem .85rem;
  font-size:.9rem;white-space:nowrap;
}
.pp small{font-size:.58rem;font-weight:500;}
.pp.plain{background:var(--paper);}

/* 折りたたみ（料金内訳） */
.det{
  border:var(--bd);border-radius:12px;background:var(--cream);
  box-shadow:0 3px 0 var(--ink);margin-top:1rem;
}
.det summary{
  cursor:pointer;list-style:none;
  padding:.6rem .9rem;font-size:.72rem;
  display:flex;align-items:center;justify-content:space-between;
}
.det summary::-webkit-details-marker{display:none;}
.det summary::after{content:'＋';color:var(--gray);}
.det[open] summary::after{content:'－';}
.det .db{
  padding:0 .9rem .9rem;font-size:.7rem;font-weight:500;
  color:var(--gray);line-height:2;
}

/* ============ 注意書きリスト（四角いドット） ============ */
.nlist li{
  list-style:none;position:relative;padding-left:1.25rem;
  font-size:.74rem;font-weight:500;line-height:2;color:#4a453c;
}
.nlist li::before{
  content:'';position:absolute;left:2px;top:.82em;
  width:8px;height:8px;background:var(--main);
  border:1.5px solid var(--ink);border-radius:2px;
}
.nlist li b{font-weight:700;color:var(--ink);}

/* ============ 制作フロー ============ */
.fstep2{display:grid;grid-template-columns:58px 1fr;gap:1rem;margin-bottom:1.1rem;}
.fstep2:last-child{margin-bottom:0;}
.fnum2{
  width:58px;height:58px;border-radius:14px;
  background:var(--main);border:var(--bd);
  box-shadow:0 4px 0 var(--ink);
  display:flex;align-items:center;justify-content:center;
  font-size:1.05rem;
}
.fbody2{
  border:var(--bd);border-radius:12px;background:var(--cream);
  box-shadow:0 4px 0 var(--ink);padding:.9rem 1rem;
}
.fbody2 h3{font-size:.95rem;margin-bottom:.35rem;}
.fbody2 p{font-size:.74rem;font-weight:500;color:#4a453c;line-height:2;}
.ftag2{
  display:inline-block;margin:.6rem .35rem 0 0;
  font-size:.62rem;background:var(--paper);
  border:2px solid var(--ink);border-radius:100px;padding:.1rem .7rem;
}

/* ============ 下層セクション（ウィンドウ風） ============ */
.win{
  /* 画面が狭いときも左右に必ず余白が残るようにする */
  width:calc(100% - 1.2rem);
  max-width:1000px;margin:2.2rem auto;
  border:var(--bd);border-radius:16px;background:var(--paper);
  box-shadow:0 5px 0 var(--ink);overflow:hidden;
}
.win-bar{
  background:var(--main);border-bottom:var(--bd);
  padding:.55rem .9rem;display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
}
.win-bar h2{
  font-size:.92rem;color:var(--ink);
  text-shadow:0 2px 0 rgba(255,255,255,.55);
}
.win-bar .tb-spec{margin-left:auto;}
.win-body{padding:1.2rem;}

/* 作品グリッド */
.works{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;}
.wk{
  border:var(--bd);border-radius:var(--r);overflow:hidden;
  background:var(--cream);box-shadow:0 4px 0 var(--ink);
  transition:transform .12s,box-shadow .12s;
  display:flex;flex-direction:column;
}
.wk:hover{transform:translateY(-4px);box-shadow:0 8px 0 var(--ink);}
.wk.wide{grid-column:span 2;}
.wk-img{
  position:relative;height:250px;background:#fff;
  border-bottom:var(--bd);overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.wk-img img,.wk-img video{width:100%;height:100%;object-fit:contain;background:#fff;}
.wk-info{padding:.7rem .8rem .8rem;}
.wk-tag{
  display:inline-block;font-size:.58rem;
  background:var(--main);border:2px solid var(--ink);
  border-radius:100px;padding:.05rem .6rem;margin-bottom:.3rem;
}
.wk-info h3{font-size:.85rem;}
.wk-info p{font-size:.68rem;font-weight:500;color:var(--gray);margin-top:.2rem;}
/* カルーセル操作 */
.cslide{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#fff;opacity:0;transition:opacity .3s;pointer-events:none;}
.cslide.on{opacity:1;pointer-events:auto;}
.cbtn{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:30px;height:30px;border-radius:8px;
  background:var(--paper);border:2.5px solid var(--ink);
  box-shadow:0 2.5px 0 var(--ink);
  display:flex;align-items:center;justify-content:center;
  font-size:.9rem;cursor:pointer;padding:0;font-family:inherit;
}
.cbtn:hover{background:var(--main);}
.cbtn:active{transform:translateY(calc(-50% + 2.5px));box-shadow:0 0 0 var(--ink);}
.cprev{left:7px;} .cnext{right:7px;}
.cnum{
  position:absolute;top:7px;right:7px;z-index:3;
  font-size:.58rem;background:var(--ink);color:var(--main);
  border-radius:100px;padding:.05rem .5rem;
}
.vbtn{
  position:absolute;bottom:7px;right:7px;z-index:3;
  font:inherit;font-size:.62rem;
  background:var(--ink);color:var(--main);
  border:2.5px solid var(--ink);border-radius:100px;
  padding:.2rem .7rem;cursor:pointer;
}
.vbtn.on{background:var(--main);color:var(--ink);}
.vlabel{
  position:absolute;top:7px;left:7px;z-index:3;
  font-size:.58rem;background:var(--main);
  border:2px solid var(--ink);border-radius:100px;padding:.02rem .5rem;
}

/* 料金（パレット風） */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem;}
.pcard{
  border:var(--bd);border-radius:var(--r);background:var(--cream);
  box-shadow:0 4px 0 var(--ink);padding:1rem .9rem;text-align:center;
}
.pcard .no{font-size:.6rem;color:var(--gray);}
.pcard h3{font-size:.95rem;margin:.2rem 0 .5rem;}
.pcard .yen{
  display:inline-block;background:var(--main);
  border:2.5px solid var(--ink);border-radius:100px;
  padding:.15rem .8rem;font-size:.9rem;
}
.pcard p{font-size:.66rem;font-weight:500;color:var(--gray);margin-top:.5rem;line-height:1.8;}

/* プロフィール */
.prof{display:grid;grid-template-columns:130px 1fr;gap:1.3rem;align-items:start;}
.prof-ava{
  width:130px;height:130px;border:var(--bd);border-radius:14px;
  overflow:hidden;background:var(--cream);box-shadow:0 4px 0 var(--ink);
}
.prof-ava img{width:100%;height:100%;object-fit:cover;}
.prof h3{font-size:1.3rem;}
.prof .role{font-size:.68rem;color:var(--gray);margin-bottom:.6rem;}
.prof p{font-size:.76rem;font-weight:500;line-height:2;}
.prof .links{display:flex;gap:.45rem;flex-wrap:wrap;margin-top:.9rem;}

/* フォーム */
.form{max-width:520px;margin:0 auto;display:flex;flex-direction:column;gap:.8rem;}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;}
.fg{display:flex;flex-direction:column;gap:.25rem;}
.fg label{font-size:.65rem;color:var(--gray);}
.fg input,.fg select,.fg textarea{
  font:inherit;font-size:.78rem;font-weight:500;
  background:#fff;border:var(--bd);border-radius:10px;
  padding:.55rem .7rem;color:var(--ink);outline:none;
}
.fg input:focus,.fg select:focus,.fg textarea:focus{background:var(--main-soft);}
.fg textarea{min-height:110px;resize:vertical;}

/* フッター */
.foot{
  width:calc(100% - 1.2rem);
  max-width:1000px;margin:2rem auto 2.5rem;
  border:var(--bd);border-radius:14px;background:var(--ink);
  color:var(--cream);padding:1rem 1.2rem;text-align:center;
  box-shadow:0 4px 0 rgba(30,28,20,.35);
}
.foot .fl{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap;margin:.6rem 0;}
.foot .fl a{font-size:.66rem;color:var(--main);}
.foot small{font-size:.58rem;opacity:.55;font-weight:500;}

/* 上へ戻る */
.totop{
  position:fixed;right:1.2rem;bottom:1.2rem;z-index:90;
  width:48px;height:48px;border-radius:12px;
  background:var(--main);border:var(--bd);
  box-shadow:0 4px 0 var(--ink);
  display:flex;align-items:center;justify-content:center;
  font:inherit;font-size:1.1rem;cursor:pointer;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .25s,transform .25s,visibility .25s;
}
.totop.show{opacity:1;visibility:visible;transform:none;}
.totop.show:active{transform:translateY(4px);box-shadow:0 0 0 var(--ink);}

/* ============ レスポンシブ ============ */
/* 縦長・タブレット：吹き出しとキャラを上下に分ける
   （横並びのままだと吹き出しが280px程度まで潰れて読みにくいため） */
/* 縦長（768〜900px前後）：キャラを枠いっぱいに立たせ、吹き出しを上に重ねる。
   横並びのまま縮めると吹き出しが潰れ、単純に縦積みすると
   キャラだけ小さく残って左右が空きすぎるため。 */
@media(max-width:900px){
  .canvas-frame{
    grid-template-columns:1fr;
    grid-template-rows:1fr;
    min-height:auto;
    align-items:end;
    justify-items:center;
  }
  /* 同じマスに重ねる */
  .balloon,.canvas-chara{grid-area:1 / 1;}
  /* 吹き出しは下寄せ。上に置くとキャラの顔が隠れるため */
  .balloon{
    align-self:end;justify-self:center;
    margin:1.1rem;
    max-width:min(560px,calc(100% - 2.2rem));
    z-index:2;
    /* 後ろのキャラがうっすら透ける */
    background:rgba(255,255,255,.94);
    backdrop-filter:blur(2px);
  }
  /* 顔が吹き出しの上に出るよう、キャラは高めに */
  .canvas-chara{
    align-self:end;justify-self:center;
    max-height:none;
    height:clamp(480px,72vw,700px);
    width:auto;
  }
}

@media(max-width:1000px){
  .workspace{grid-template-columns:76px 1fr;}
  /* 横並びになったら中央に寄せる */
  .panel{
    grid-column:1/-1;border-left:none;border-top:var(--bd);
    flex-direction:row;flex-wrap:wrap;
    align-items:flex-start;
    justify-content:center;
    gap:1.4rem;
    padding:1rem .7rem;
  }
  .panel > div{display:flex;flex-direction:column;align-items:center;}
  .panel .pgroup-ttl{text-align:center;}
  .works{grid-template-columns:1fr 1fr;}
  .price-grid{grid-template-columns:1fr;}
}
@media(max-width:720px){
  .app{margin:.6rem;border-radius:14px;}
  .titlebar{padding:.6rem;}
  .tb-title{font-size:.92rem;}
  .tb-spec{display:none;}
  .workspace{grid-template-columns:1fr;}
  .toolrail{
    flex-direction:row;overflow-x:auto;
    border-right:none;border-bottom:var(--bd);
    /* 中央寄せ。項目が入りきらない場合でも左端が隠れないよう safe を指定 */
    justify-content:center;
    justify-content:safe center;
  }
  .tool{flex:0 0 auto;min-width:62px;}
  .rail-label{display:none;}
  .canvas{min-height:auto;padding:.7rem;}
  /* スマホ：重ねると文字が読みづらいので、上下に分ける */
  .canvas-frame{
    grid-template-columns:1fr;
    grid-template-rows:auto auto;
    min-height:auto;
  }
  .balloon,.canvas-chara{grid-area:auto;}
  .balloon{
    margin:.9rem .9rem .3rem;max-width:none;
    background:#fff;backdrop-filter:none;
  }
  .canvas-chara{
    align-self:end;justify-self:center;
    height:auto;max-height:46vh;
  }
  .works{grid-template-columns:1fr;}
  .wk.wide{grid-column:span 1;}
  .wk-img{height:290px;}
  .prof{grid-template-columns:1fr;justify-items:center;text-align:center;}
  .prof .links{justify-content:center;}
  .f2{grid-template-columns:1fr;}
  .win-body{padding:.9rem;}
}

/* スマホ：料金行とフローを縦積みにして文字が詰まらないようにする */
@media(max-width:560px){
  .prow2{grid-template-columns:1fr;gap:.15rem;padding:.9rem .2rem;}
  .pp{grid-row:auto;grid-column:1;justify-self:start;margin-top:.45rem;}
  .fstep2{grid-template-columns:46px 1fr;gap:.7rem;}
  .fnum2{width:46px;height:46px;font-size:.9rem;box-shadow:0 3px 0 var(--ink);}
  .fbody2{padding:.8rem .85rem;}
  .nlist li{font-size:.72rem;}
}