/* パソコンが苦手な人が使う前提の見た目。
   ・文字を大きく（本文17px・見出し28px以上）
   ・ボタンは大きく、押せる場所がはっきり分かる
   ・一画面にひとつの作業だけ
   ・色は静か（葬儀会社で使うため） */

:root{
  --bg:#f4f6f8; --card:#ffffff; --ink:#1b232b; --sub:#5d6b78; --line:#dde3e9;
  --main:#2f5d8a;        /* 落ち着いた紺 */
  --main-dark:#24486b;
  --ok:#0e7a55; --warn:#a85a1e; --bad:#b23b32;
  --r:14px;
  --font:"Yu Gothic","Hiragino Kaku Gothic ProN","Meiryo",sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.8}
h1,h2,h3{margin:0;line-height:1.4}
img{max-width:100%}

/* ---------- 上のバー ---------- */
.bar{background:var(--card);border-bottom:2px solid var(--line);padding:14px 22px;display:flex;align-items:center;gap:14px;position:sticky;top:0;z-index:30}
.bar .home{display:flex;align-items:center;gap:10px;cursor:pointer;border:0;background:none;font-family:inherit;font-size:19px;font-weight:700;color:var(--ink);padding:6px 8px;border-radius:10px}
.bar .home:hover{background:#eef2f6}
.bar .logo{width:30px;height:30px;border-radius:8px;background:var(--main);flex:none}
.bar .spacer{flex:1}
.bar .where{color:var(--sub);font-size:16px}

main{max-width:1120px;margin:0 auto;padding:26px 22px 100px}

/* ---------- ホームの大きなボタン ---------- */
.hello{text-align:center;margin:18px 0 30px}
.hello h2{font-size:30px}
.hello p{color:var(--sub);margin:8px 0 0;font-size:17px}
.menu{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
@media(max-width:760px){.menu{grid-template-columns:1fr}}
.menu button{background:var(--card);border:2px solid var(--line);border-radius:20px;padding:28px 26px;text-align:left;cursor:pointer;font-family:inherit;display:flex;gap:18px;align-items:flex-start;transition:.12s}
.menu button:hover{border-color:var(--main);box-shadow:0 8px 26px rgba(47,93,138,.14);transform:translateY(-2px)}
.menu .ico{width:58px;height:58px;border-radius:16px;background:#eaf0f6;display:flex;align-items:center;justify-content:center;flex:none}
.menu .ico svg{width:32px;height:32px;stroke:var(--main);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.menu b{display:block;font-size:22px;margin-bottom:4px}
.menu span{color:var(--sub);font-size:15px;line-height:1.6}

/* ---------- 手順(ステップ) ---------- */
.steps{display:flex;gap:8px;margin-bottom:22px;flex-wrap:wrap}
.step{display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:#e9edf1;color:var(--sub);font-size:15px;font-weight:600}
.step.now{background:var(--main);color:#fff}
.step.done{background:#dfece5;color:var(--ok)}
.step i{font-style:normal;width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.35);display:inline-flex;align-items:center;justify-content:center;font-size:13px}
.step.now i{background:rgba(255,255,255,.3)}

/* ---------- 箱 ---------- */
.box{background:var(--card);border:2px solid var(--line);border-radius:var(--r);padding:24px;margin-bottom:18px}
.box h3{font-size:22px;margin-bottom:6px}
.box .lead{color:var(--sub);font-size:16px;margin:0 0 18px}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:18px;align-items:start}
@media(max-width:900px){.split{grid-template-columns:1fr}}

/* ---------- 入力 ---------- */
label.f{display:block;margin-bottom:16px}
label.f>span{display:block;font-size:16px;font-weight:700;margin-bottom:6px}
label.f>small{display:block;color:var(--sub);font-size:14px;margin-bottom:6px;font-weight:400}
input[type=text],input[type=tel],input[type=number],textarea,select{
  width:100%;font-family:inherit;font-size:17px;padding:12px 14px;border:2px solid var(--line);
  border-radius:10px;background:#fff;color:var(--ink)}
textarea{line-height:1.7;resize:vertical}
input:focus,textarea:focus,select:focus{outline:0;border-color:var(--main);box-shadow:0 0 0 4px rgba(47,93,138,.14)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:700px){.two{grid-template-columns:1fr}}

input[type=range]{width:100%;height:34px;accent-color:var(--main)}
.slider{display:flex;align-items:center;gap:12px}
.slider b{font-size:15px;min-width:74px;color:var(--sub)}

/* ---------- ボタン ---------- */
.btn{font-family:inherit;font-size:18px;font-weight:700;padding:14px 26px;border-radius:12px;border:2px solid var(--line);background:#fff;color:var(--ink);cursor:pointer}
.btn:hover{background:#f0f4f7}
.btn.go{background:var(--main);border-color:var(--main);color:#fff}
.btn.go:hover{background:var(--main-dark)}
.btn.big{font-size:20px;padding:18px 34px;width:100%}
.btn.sm{font-size:15px;padding:9px 16px}
.btn:disabled{opacity:.45;cursor:default}
.btnrow{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
.btnrow.end{justify-content:space-between}

/* ---------- 見本から選ぶ ---------- */
.picks{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}
.pick{border:3px solid var(--line);border-radius:12px;padding:0;background:#fff;cursor:pointer;overflow:hidden;font-family:inherit;text-align:center}
.pick:hover{border-color:var(--main)}
.pick.on{border-color:var(--main);box-shadow:0 0 0 4px rgba(47,93,138,.16)}
.pick .sw{height:74px;display:block}
.pick .nm{display:block;padding:8px 6px 4px;font-size:15px;font-weight:700}
.pick .ht{display:block;padding:0 6px 9px;font-size:13px;color:var(--sub)}

/* ---------- 写真を置く場所 ---------- */
.drop{border:3px dashed var(--line);border-radius:16px;padding:44px 20px;text-align:center;background:#fbfcfd;cursor:pointer}
.drop:hover,.drop.over{border-color:var(--main);background:#f2f7fb}
.drop b{display:block;font-size:20px;margin-bottom:6px}
.drop span{color:var(--sub);font-size:15px}

.stage{background:repeating-conic-gradient(#e9edf1 0% 25%,#f7f9fb 0% 50%) 50%/20px 20px;
  border:2px solid var(--line);border-radius:12px;padding:14px;display:flex;justify-content:center;align-items:center;min-height:300px}
.stage canvas{max-width:100%;max-height:460px;box-shadow:0 6px 22px rgba(16,24,40,.18);cursor:crosshair}
.stage.plain{background:#fff}

/* ---------- お知らせ ---------- */
.msg{font-size:16px;margin-top:12px;min-height:24px}
.msg.work{color:var(--main);font-weight:700}
.msg.err{color:var(--bad);font-weight:700;white-space:pre-wrap}
.msg.ok{color:var(--ok);font-weight:700}
.tip{background:#eef4f9;border-left:5px solid var(--main);border-radius:8px;padding:12px 16px;font-size:15px;color:#2c4258;margin:14px 0}
.caution{background:#fdf4ec;border-left:5px solid var(--warn);border-radius:8px;padding:12px 16px;font-size:15px;margin:14px 0}
.caution b{color:var(--warn)}
.caution ul{margin:6px 0 0;padding-left:20px}

/* ---------- 一覧 ---------- */
.rows{display:grid;gap:10px}
.row{display:flex;justify-content:space-between;align-items:center;gap:12px;border:2px solid var(--line);border-radius:10px;padding:12px 16px;background:#fff}
.row b{font-size:16px}
.row small{color:var(--sub);font-size:14px}

.cuts{display:grid;gap:12px}
.cut{border:2px solid var(--line);border-radius:12px;padding:14px;background:#fff}
.cut .no{font-weight:700;color:var(--main);font-size:15px;margin-bottom:6px}
.cut .shot{color:var(--sub);font-size:14px;margin-top:6px}