.dgcm{--primary:#0b6f8f;--pale:#e4f2f7;--ink:#203a45;--sub:#5f6b74;--accent:#ffd23f;--glow:#ffb21e;--air:#1769c2;--font:"Zen Kaku Gothic New","Noto Sans JP",system-ui,sans-serif;--mono:"IBM Plex Mono",ui-monospace,monospace}
.dgcm,.dgcm *{box-sizing:border-box}
.dgcm{--w:min(1280px,calc(100vw - 24px));width:var(--w);max-width:none;margin:0 0 40px calc((100% - var(--w))/2);line-height:1.5;color:var(--ink);font-family:var(--font)}
.dgcm .page{padding:0}
.dgcm .hero{position:relative;display:grid;grid-template-columns:400px 1fr;height:clamp(540px,calc(100vh - 40px),960px);height:clamp(540px,calc(100dvh - 40px),960px);border:3px solid var(--ink);border-radius:24px;overflow:hidden;background:#fff;box-shadow:6px 6px 0 var(--ink)}
.dgcm .side{position:relative;z-index:5;padding:14px;display:flex;flex-direction:column;gap:10px;background:#fff;border-right:3px solid var(--ink);overflow-y:auto;min-height:0}
.dgcm .page:has(.hero:not([data-step="start"])) .topwrap{display:none}
.dgcm .topwrap{max-width:904px;margin:10px auto 18px}
.dgcm .ftop{display:flex;align-items:center;gap:11px;margin:0 0 18px;padding-right:3px}
.dgcm .frail{display:flex;flex:1;gap:4px}
.dgcm .frail i{display:block;flex:1;height:3px;border-radius:2px;background:#e8f2f4}
.dgcm .frail i.now{background:#00788c}
.dgcm .fstamps{display:flex;flex:none;gap:5px;align-items:center}
.dgcm .fstamps i{display:block;width:27px;height:27px;border:1.5px dashed #00b7ce;border-radius:50%;opacity:.22;transform:rotate(var(--t))}
.dgcm .h1w{text-align:center;margin:0 0 -18px}
.dgcm .h1p:not(#_){display:inline-block;margin:0!important;padding:4px 16px!important;border:0!important;border-radius:999px;background:var(--accent)!important;color:var(--ink)!important;font-family:var(--font)!important;font-size:15px!important;font-weight:900!important;letter-spacing:.08em;line-height:1.6!important;box-shadow:none!important;rotate:-2deg}
.dgcm .h1p:not(#_)::before,.dgcm .h1p:not(#_)::after,.dgcm .ttl:not(#_)::before,.dgcm .ttl:not(#_)::after{content:none!important;display:none!important}
.dgcm .ttl:not(#_){display:block;margin:56px 0 0!important;padding:0!important;border:0!important;background:none!important;color:var(--ink)!important;font-family:var(--font)!important;font-size:clamp(26px,5.2vw,50px)!important;font-weight:900!important;line-height:1.6!important;letter-spacing:.01em;text-align:center!important;box-shadow:none!important}
.dgcm .ttl:not(#_) em{display:inline-block;margin:0 6px 0 0;padding:1px 10px 5px;background:var(--accent);color:var(--ink);border:2px solid var(--ink);border-radius:7px;box-shadow:4px 4px 0 var(--ink);font-style:normal;transform:rotate(-1.6deg)}
.dgcm .ttl:not(#_) .nw{white-space:nowrap}
.dgcm .axes{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dgcm .axis{position:relative;border:3px solid var(--ink);border-radius:16px;box-shadow:4px 4px 0 var(--ink);padding:9px 11px 8px;background:#fff;--ac:#0b6f8f;--wt:0px;text-align:left;font:inherit;color:var(--ink);cursor:pointer;overflow:hidden}
.dgcm .axis.t{--ac:#9c6b0a}
.dgcm .axis b{display:block;font-size:16px;font-weight:900;position:relative;z-index:1}
.dgcm .axis.on{outline:4px solid var(--accent);outline-offset:-1px;box-shadow:4px 4px 0 var(--ink),0 0 0 6px rgba(255,210,63,.35)}
.dgcm .lab{font-size:12px;font-weight:900;color:var(--sub);display:flex;align-items:center;gap:6px}
.dgcm .lab i{font-style:normal;flex:none;width:20px;height:20px;border-radius:50%;background:var(--sb);color:var(--sf);box-shadow:inset 0 0 0 2px var(--sl);display:grid;place-items:center;font-family:var(--mono);font-size:11px}
.dgcm .chips{display:flex;flex-wrap:wrap;gap:5px}
.dgcm .chip{border:2px solid var(--ink);background:#fff;border-radius:999px;padding:4px 10px;font:inherit;font-weight:900;font-size:12px;cursor:pointer;color:var(--ink)}
.dgcm .chip.on{background:var(--sb);color:var(--sf);border-color:var(--sl);box-shadow:2px 2px 0 var(--ss)}
.dgcm .sub{font-size:11.5px;font-weight:900;color:var(--sub);margin:6px 0 3px}
.dgcm .od{display:grid;gap:6px}
.dgcm .od label{display:flex;align-items:center;gap:8px;background:#fff;border:2.5px solid var(--ink);border-radius:12px;padding:4px 10px;font-weight:900;font-size:12.5px}
.dgcm .od label span{flex:none;background:var(--sb);color:var(--sf);box-shadow:inset 0 0 0 2px var(--sl);border-radius:999px;padding:1px 9px;font-size:11.5px}
.dgcm .od input{flex:1;min-width:0;border:0;outline:0;font:inherit;font-weight:700;background:transparent;color:var(--ink)}
.dgcm .target{display:inline-flex;gap:6px;font-size:11px;font-weight:900}
.dgcm .target button{border:2px solid var(--ink);border-radius:999px;background:#fff;font:inherit;padding:2px 11px;cursor:pointer;color:var(--ink)}
.dgcm .target button.on{background:#fff7d6;color:var(--sf);border:3.5px solid var(--sl);box-shadow:2px 2px 0 var(--ss)}
.dgcm .target button.on::before{content:"✓ ";color:#c98400;font-weight:900}
.dgcm .qrow{display:flex;flex-wrap:wrap;align-items:center;gap:5px}
.dgcm .q{border:1.5px solid var(--ink);background:#fff;border-radius:999px;padding:3px 9px;font:inherit;font-size:11.5px;font-weight:700;cursor:pointer;color:var(--ink)}
.dgcm .q.on{background:#fff7d6;border:3px solid var(--sl);box-shadow:2px 2px 0 var(--ss)}
.dgcm .q.air{background:#e6f1fc;border-color:var(--air);color:var(--air);font-weight:900}
.dgcm .courses{display:grid;gap:7px;margin-top:7px}
.dgcm .course{display:flex;align-items:center;gap:9px;border:2.5px solid var(--ink);border-radius:13px;background:#fff;padding:6px 9px;font:inherit;color:var(--ink);cursor:pointer;text-align:left;box-shadow:3px 3px 0 var(--ink)}
.dgcm .course .no{flex:none;width:30px;height:30px;border-radius:9px;background:var(--pale);border:2px solid var(--ink);display:grid;place-items:center;font-family:var(--mono);font-weight:700;font-size:10.5px}
.dgcm .course .t{font-weight:900;font-size:12.5px;line-height:1.35}
.dgcm .course .m{font-size:10.5px;color:var(--sub);font-weight:700}
.dgcm .course.on{background:var(--sb);color:var(--sf);border-color:var(--sl);box-shadow:3px 3px 0 var(--ss)}
.dgcm .course.on .no{background:#fff;border-color:var(--sl);color:var(--sf)}
.dgcm .course.on .m{color:var(--sf)}
.dgcm .hint{font-size:12px;color:var(--sub);line-height:1.6;background:var(--pale);border-radius:10px;padding:8px 10px}
.dgcm .result{background:#fff;border:3px solid var(--ink);border-radius:15px;box-shadow:4px 4px 0 var(--ink);padding:9px 11px}
.dgcm .result .row{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.dgcm .big{font-family:var(--mono);font-weight:700;font-size:23px;color:var(--primary)}
.dgcm .big small{font-size:12px;color:var(--ink);margin-left:2px}
.dgcm .legs{list-style:none;margin:5px 0 0;padding:0;font-size:11.5px;line-height:1.5}
.dgcm .legs li{display:flex;gap:6px;padding:2px 5px;border-radius:7px;color:var(--sub);font-weight:700}
.dgcm .legs li i{font-style:normal;font-family:var(--mono);color:var(--ink)}
.dgcm .legs li span.km{margin-left:auto;font-family:var(--mono);white-space:nowrap}
.dgcm .legs li.add{color:#a15a12}
.dgcm .legs li.now{background:var(--accent);color:var(--ink)}
.dgcm .price{margin-top:6px;display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.dgcm .price b{font-family:var(--mono);font-size:18px}
.dgcm .ask{background:#fff1e6;color:#b5541a;border:2px solid #b5541a;border-radius:999px;padding:3px 10px;font-weight:900;font-size:12px}
.dgcm .go{display:block;width:100%;margin-top:8px;background:var(--accent);border:3px solid var(--ink);border-radius:999px;font:inherit;font-weight:900;font-size:14.5px;padding:9px;box-shadow:3px 3px 0 var(--ink);cursor:pointer;color:var(--ink)}
.dgcm .go{text-align:center;text-decoration:none}
.dgcm a.go.line:not(#_),.dgcm a.go.mail:not(#_){color:#fff!important;text-decoration:none!important;font-weight:800;border-width:2px;border-radius:100px;box-shadow:4px 4px 0 var(--ink);transition:translate .2s,box-shadow .2s,background-color .2s}
.dgcm a.go.line:not(#_){background:#00833d;border-color:#00833d}
.dgcm a.go.mail:not(#_){background:#0b6f8f;border-color:#0b6f8f}
.dgcm a.go.line:not(#_):is(:hover,.dgcm :focus-visible){background:#006b32;border-color:#006b32;translate:-2px -2px;box-shadow:6px 6px 0 var(--ink)}
.dgcm a.go.mail:not(#_):is(:hover,.dgcm :focus-visible){background:#095a75;border-color:#095a75;translate:-2px -2px;box-shadow:6px 6px 0 var(--ink)}
.dgcm .back{border:0;background:none;font:inherit;font-weight:700;font-size:12.5px;color:var(--primary);text-decoration:underline;cursor:pointer;padding:6px 0;align-self:flex-start}
.dgcm .steps{display:flex;gap:4px;font-size:11px;font-weight:900;color:var(--sub)}
.dgcm .steps span{flex:1;text-align:center;padding:3px 0;border-radius:999px;background:#eef3f5}
.dgcm .steps span.on{background:var(--sb);color:var(--sf);box-shadow:inset 0 0 0 2px var(--sl)}
.dgcm .steps span.done{background:var(--pale);color:var(--ink);cursor:pointer}
.dgcm .h3{font-size:17px;font-weight:900;margin:2px 0 0}
.dgcm .nums{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.dgcm .num{border:3px solid var(--ink);border-radius:13px;background:#fff;font:inherit;font-weight:900;font-size:20px;padding:10px 0;box-shadow:3px 3px 0 var(--ink);cursor:pointer;color:var(--ink)}
.dgcm .num.wide{grid-column:1/-1;font-size:15px}
.dgcm .num.on{background:var(--sb);color:var(--sf);border-color:var(--sl);box-shadow:3px 3px 0 var(--ss)}
.dgcm textarea{width:100%;min-height:96px;border:2.5px solid var(--ink);border-radius:12px;padding:8px 10px;font:inherit;font-size:13.5px}
.dgcm .pv{white-space:pre-wrap;background:#f6f9fa;border:2px dashed #b9c8cf;border-radius:12px;padding:9px 11px;font-size:12.5px;line-height:1.75}
.dgcm .nt{font-size:11.5px;color:var(--sub);line-height:1.7}
.dgcm .otherbox{margin-top:8px;padding:12px;background:#fffbea;border:2px solid var(--ink);border-radius:12px;font-size:14px;line-height:1.7}
.dgcm .otherbox[hidden]{display:none}
.dgcm .otherbox p{margin:0}
.dgcm .otherbox p+p{margin-top:6px}
.dgcm .otherbox .nb{white-space:nowrap}
.dgcm .otherbox.chamnote{margin:10px 0}
.dgcm .otherbox .go{display:block;margin-top:10px;font-size:15px;padding:10px;text-align:center}
.dgcm .tot .min4{display:block;margin-top:8px;padding-top:8px;border-top:2px dashed var(--ink);font-size:13.5px;font-weight:800;line-height:1.6}
.dgcm .tot .min4 i{display:inline-block;font-style:normal}
.dgcm .steps-top{display:none}
.dgcm .steps-top[hidden]{display:none!important}
.dgcm .hero[data-step="send"] .side>.body>.steps{position:sticky;top:-14px;z-index:3;margin:-14px -8px 0;padding:14px 8px 8px;background:#fff}
@media (max-width:860px){
.dgcm .hero[data-step="send"]{overflow:clip}
.dgcm .hero[data-step="send"] .steps-top{display:block;order:-1;position:sticky;top:0;z-index:20;padding:8px 12px;background:#fff;border-bottom:3px solid var(--ink);margin-bottom:-10px}
.dgcm .hero[data-step="send"] .stage{border-top:0}
.dgcm .hero[data-step="send"] .steps-top .steps{margin:0}
.dgcm .hero[data-step="send"] .side>.body>.steps{display:none}
}
.dgcm .arrange{margin:10px 0 2px;text-align:center;font-size:14.5px;font-weight:900;line-height:1.5;color:var(--ink)}
.dgcm .arrange b{font-weight:900;color:var(--primary)}
.dgcm .prog{position:absolute;z-index:6;left:12px;right:150px;top:12px;background:#fff;border:2.5px solid var(--ink);border-radius:14px;box-shadow:3px 3px 0 var(--ink);padding:5px 10px 8px;max-width:560px}
.dgcm .prog .pt{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:900;white-space:nowrap;overflow:hidden}
.dgcm .prog .pt b{color:var(--primary);font-family:var(--mono)}
.dgcm .prog .pt span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.dgcm .prog .pt em{font-style:normal;font-family:var(--mono);color:var(--primary)}
.dgcm .prog .pb{position:relative;height:20px;border:1.5px solid var(--ink);border-radius:6px;overflow:hidden;background:#fff;margin-top:6px}
.dgcm .prog .pb i{position:absolute;left:0;top:0;bottom:0;z-index:2;width:3px;margin-left:-1.5px;background:var(--ink)}
.dgcm .prog .pb s{position:absolute;top:0;bottom:0;text-decoration:none;box-sizing:border-box}
.dgcm .prog .pb s+s{border-left:1px solid #fff}
.dgcm .prog .pb .pale s.move{background:repeating-linear-gradient(135deg,#fff6dd 0 5px,#ffe9ad 5px 10px)}
.dgcm .prog .pb .full s.move{background:repeating-linear-gradient(135deg,#ffcb5c 0 5px,#ffb21e 5px 10px)}
.dgcm .prog .pb .pale s.stay{background:#d6ebf2;color:var(--primary)}
.dgcm .prog .pb .full s.stay{background:var(--primary);color:#fff}
.dgcm .prog .pb s b{display:block;width:100%;overflow:hidden;white-space:nowrap;text-align:center;font-size:10.5px;font-weight:900;line-height:17px;padding:0 2px;box-sizing:border-box}
.dgcm .prog .pt i.st{flex:none;font-style:normal;font-size:11px;font-weight:900;line-height:1.6;padding:0 8px;border-radius:999px}
.dgcm .prog .pt i.st:empty{display:none}
.dgcm .prog .pt i.st.move{background:#ffb21e;color:var(--ink)}
.dgcm .prog .pt i.st.stay{background:var(--primary);color:#fff}
.dgcm .prog .pb span{position:absolute;inset:0}
.dgcm .scale{position:absolute;z-index:5;right:12px;pointer-events:none;color:var(--ink);line-height:1.25;white-space:nowrap;text-align:left;text-shadow:0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff}
.dgcm .scale[hidden],.dgcm .airmk[hidden],.dgcm .shr[hidden]{display:none}
.dgcm .shr{position:absolute;z-index:6;right:12px;bottom:34px;display:inline-flex;align-items:center;gap:6px;padding:9px 16px 9px 12px;background:var(--accent);color:var(--ink);border:2.5px solid var(--ink);border-radius:999px;box-shadow:3px 3px 0 var(--ink);font:inherit;font-weight:900;font-size:14.5px;line-height:1.2;white-space:nowrap;cursor:pointer}
.dgcm .shr svg{width:17px;height:17px;fill:var(--ink)}
.dgcm .shr:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}
/* シェアのポップアップ（スマホは下から、PC は中央） */
.dgcm .shpop{position:fixed;inset:0;z-index:100000;background:rgba(20,40,50,.5);display:grid;place-items:end center}
.dgcm .shpop[hidden]{display:none}
.dgcm .shp{position:relative;box-sizing:border-box;width:100%;max-width:440px;background:#fff;color:var(--ink);border:3px solid var(--ink);border-bottom:0;border-radius:22px 22px 0 0;padding:20px 22px calc(22px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:12px;box-shadow:0 -10px 40px rgba(0,0,0,.18);font-family:var(--font);animation:shpUp .25s cubic-bezier(.2,.9,.3,1) both}
@keyframes shpUp{from{transform:translateY(30px);opacity:0}to{transform:none;opacity:1}}
@media (min-width:600px){.dgcm .shpop{place-items:center;padding:20px}.dgcm .shp{border-bottom:3px solid var(--ink);border-radius:22px;box-shadow:6px 6px 0 var(--ink)}}
.dgcm .shp .sht{font-size:19px;font-weight:900;line-height:1.4;padding-right:48px}
.dgcm .shp .shn{margin-top:-6px;padding-right:20px;font-size:13.5px;font-weight:700;line-height:1.6;color:var(--sub)}
.dgcm .shp .shn:empty{display:none}
.dgcm .shp .shb{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:100%;min-height:52px;margin:0;padding:8px 16px;border:2.5px solid var(--ink);border-radius:999px;box-shadow:3px 3px 0 var(--ink);background:#fff;color:var(--ink);font:inherit;font-size:16px;font-weight:900;line-height:1.3;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
/* LINE はサイト全体の LINE カラー（#00833d、下のバーや記事のボタンと同じ）、コピーはメインカラー。どちらも白文字（2026-11-07 ユーザー指示） */
.dgcm .shp a.shb.line,.dgcm .shp a.shb.line:visited{background:#00833d;color:#fff!important;text-decoration:none!important}/* 記事のリンク色に負けないように */
.dgcm .shp a.shb.line:hover{background:#006b32;color:#fff!important;text-decoration:none!important}
.dgcm .shp .shb.copy{background:var(--primary);color:#fff}
.dgcm .shp .shb.copy:hover{background:#085a74}
.dgcm .shp .shb.copy.done{background:#085a74;color:#fff}
.dgcm .shp .shb[hidden]{display:none}
.dgcm .shp .shb:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.dgcm .shp .shx{position:absolute;top:12px;right:12px;width:42px;height:42px;margin:0;padding:0;display:grid;place-items:center;border:2px solid var(--ink);border-radius:50%;background:#fff;color:var(--ink);font:inherit;font-size:22px;line-height:1;cursor:pointer}
.dgcm .shp .shu{box-sizing:border-box;width:100%;margin:2px 0 0;padding:8px 12px;border:1.5px solid #c9d6dc;border-radius:10px;background:#f7f9fa;color:var(--sub);font:inherit;font-size:16px;line-height:1.4}
.dgcm .sharenote{margin-top:14px;padding:10px 12px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;background:var(--pale);border-radius:12px}
.dgcm .sharenote p{flex:1 1 180px;margin:0;font-size:13.5px;font-weight:700;line-height:1.6}
.dgcm .sharenote .sharego{flex:none;padding:6px 14px;background:#fff;color:var(--ink);border:2px solid var(--ink);border-radius:999px;box-shadow:2px 2px 0 var(--ink);font:inherit;font-size:13.5px;font-weight:900;line-height:1.3;cursor:pointer}
@media (max-width:860px){.dgcm .shr{bottom:10px;padding:8px 13px 8px 10px;font-size:13.5px}
.dgcm .stage:has(.shr:not([hidden])) .badge{max-width:calc(100% - 172px)}}
.dgcm .scale b{font-family:var(--mono);font-size:12px;font-weight:900}
.dgcm .scale span{font-size:11px;font-weight:800}
.dgcm .scale i{display:block;height:6px;margin-top:2px;border:solid var(--ink);border-width:0 2px 2px;box-shadow:0 1px 0 #fff}
.dgcm .hero[data-step="start"] .scale{display:none}
.dgcm .airmk{position:absolute;z-index:2;left:0;top:0;width:26px;height:26px;margin:-13px 0 0 -13px;padding:4px;box-sizing:border-box;border-radius:50%;background:var(--air);border:2px solid #fff;box-shadow:0 0 0 2px #0d3f78,2px 3px 0 2px #0d3f78;pointer-events:none}
.dgcm .airmk svg{display:block;width:100%;height:100%;fill:#fff}
.dgcm .airmk.moved::before{content:"";position:absolute;left:50%;bottom:100%;width:2px;height:calc(var(--d) - 11px);margin-left:-1px;background:#0d3f78;box-shadow:0 0 0 1px #fff}
.dgcm .prog .pnote{margin-top:5px;font-size:10.5px;font-weight:700;line-height:1.4;color:#566b75}
.dgcm .prog .pnote i{display:inline-block;font-style:normal}


.dgcm .toast{position:absolute;z-index:8;left:50%;top:14px;transform:translateX(-50%);background:var(--ink);color:#fff;border-radius:999px;padding:6px 14px;font-weight:900;font-size:12.5px;box-shadow:0 6px 18px rgba(0,0,0,.25);opacity:0;transition:opacity .3s;pointer-events:none;white-space:nowrap}
.dgcm .toast.on{opacity:1}
.dgcm .boot{position:absolute;inset:0;z-index:2;display:block}
.dgcm .boot img{display:block;width:100%;height:100%;object-fit:cover}
.dgcm .hero[data-step="start"] .stage{cursor:pointer}
.dgcm .hero[data-step="start"] .ctrl{display:none}
.dgcm .loadmsg{font-weight:900;color:var(--ink)}
.dgcm .hero{--sb:#fff;--sf:#203a45;--sl:#f5a800;--ss:#ffd23f;--st:#fff1c2}
.dgcm .chip.on,.dgcm .pin.on .tag,.dgcm .course.on{border-width:3.5px}
.dgcm .hero[data-step="start"] .axis.on{outline:0;box-shadow:4px 4px 0 var(--ink)}
.dgcm .hero[data-step="start"]{grid-template-columns:1fr 1fr;height:620px}
.dgcm .hero[data-step="start"] .side{justify-content:stretch;gap:16px;padding:20px;overflow:visible;background:var(--pale)}
.dgcm .hero[data-step="start"] .axes{flex:1;min-height:0;gap:14px}
.dgcm .hero[data-step="start"] .axis{display:flex;flex-direction:column;align-items:stretch}
.dgcm .hero[data-step="start"] .axis{--wt:0px;padding:18px 14px 14px;gap:10px;background:#fff;border-radius:18px;box-shadow:5px 5px 0 var(--ink);cursor:default}
.dgcm .atip{font-size:15px;font-weight:900;color:var(--primary)}
.dgcm .atiles{flex:1;min-height:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:8px}
.dgcm .atiles.hrs{grid-template-columns:repeat(3,minmax(0,1fr))}
.dgcm .tl{appearance:none;font:inherit;color:var(--ink);padding:0;background:#fff;border:2.5px solid var(--ink);border-radius:10px;box-shadow:3px 3px 0 var(--ink);cursor:pointer;overflow:hidden;display:flex;flex-direction:column;min-height:0;min-width:0;transition:background .15s}
.dgcm .tl img{display:block;flex:1;min-height:0;width:100%;object-fit:cover}
.dgcm .tl span{flex:none;display:block;font-size:14px;font-weight:900;line-height:1.55;text-align:center;white-space:nowrap}
.dgcm .tl:hover{background:var(--accent)}
.dgcm .tl:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.dgcm .tl:focus-visible,.dgcm .amore:focus-visible{outline:3px solid var(--primary);outline-offset:2px}
.dgcm .tl.hr{align-items:center;justify-content:center;font-family:var(--mono);font-size:38px;font-weight:700;line-height:1}
.dgcm .tl.hr small{font-family:var(--font);font-size:12.5px;font-weight:900;margin-top:5px}
.dgcm .tl.hr:last-child{grid-column:span 2}
.dgcm .amore{appearance:none;flex:none;margin-top:auto;min-height:46px;font:inherit;font-size:15px;font-weight:900;color:var(--ink);background:var(--accent);border:2.5px solid var(--ink);border-radius:999px;box-shadow:3px 3px 0 var(--ink);cursor:pointer;transition:background .15s}
.dgcm .amore:hover{background:#ffe27a}
.dgcm .amore:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.dgcm .hero[data-step="start"] .axis.on{box-shadow:5px 5px 0 var(--ink)}
.dgcm .hero[data-step="start"] .axis b{font-size:31px;line-height:1.3}
.dgcm .hero[data-step="start"] .hint{background:none;padding:0;font-size:16px;line-height:1.7;font-weight:700;color:var(--ink);text-align:center}
.dgcm .hero[data-step="start"] .body{flex:none}
.dgcm .hero[data-step="start"] .badge{display:none}
.dgcm .hero:not([data-step="start"]) .axes{display:none}
.dgcm .hero[data-step="send"]{grid-template-columns:minmax(0,1fr) 350px}
.dgcm .hero[data-step="send"] .side{order:2;border-right:0;border-left:3px solid var(--ink)}
.dgcm .hero[data-step="send"] .stage{order:1}
.dgcm .sum{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.dgcm .tot{background:var(--accent);border:3px solid var(--ink);border-radius:14px;box-shadow:4px 4px 0 var(--ink);padding:9px 13px 10px;line-height:1.35}
.dgcm .tot .l{display:block;font-size:13px;font-weight:900}
.dgcm .tot .m{display:block;font-size:13.5px;font-weight:700;margin-top:2px}
.dgcm .tot b{display:block;font-family:var(--mono);font-size:38px;font-weight:700;line-height:1.15;color:var(--ink)}
.dgcm .tot b small{font-family:var(--font);font-size:17px;font-weight:900;margin-left:2px}
.dgcm .tot b.askb{font-family:var(--font);font-size:26px;font-weight:900}
.dgcm .tot .p{display:block;font-size:14px;font-weight:900;margin-top:1px}
@keyframes pageF{from{opacity:0;transform:perspective(1100px) rotateY(58deg) translateX(30px)}to{opacity:1;transform:none}}
@keyframes pageB{from{opacity:0;transform:perspective(1100px) rotateY(-58deg) translateX(-30px)}to{opacity:1;transform:none}}
.dgcm .body.flip{transform-origin:0 50%;animation:pageF .5s cubic-bezier(.2,.75,.25,1)}
.dgcm .body.flipb{transform-origin:100% 50%;animation:pageB .5s cubic-bezier(.2,.75,.25,1)}
@media (prefers-reduced-motion:reduce){.dgcm .body.flip,.dgcm .body.flipb{animation:none}}
.dgcm .hero[data-step="od"] .badge{display:none}
.dgcm .result .h4{font-size:17px;font-weight:900;margin-bottom:2px}
.dgcm .result .pask{display:none;margin-top:6px;font-weight:700;color:var(--ink)}
.dgcm .result.hasother .pask{display:block}
.dgcm .result.hasother .pwrap{display:none}
.dgcm .plane.noanim{transition:none!important}
.dgcm .odseg{display:grid;grid-template-columns:1fr 1fr;border:3px solid var(--ink);border-radius:14px;overflow:hidden}
.dgcm .odseg button{appearance:none;font:inherit;background:#fff;border:0;padding:10px 4px;font-size:15px;font-weight:900;color:var(--ink);cursor:pointer}
.dgcm .odseg button+button{border-left:3px solid var(--ink)}
.dgcm .odseg button.on{background:#fff7d6}
.dgcm .odseg button.on::before,.dgcm .q.on[data-odk]::before{content:"✓ ";color:#c98400;font-weight:900}
.dgcm .odh{align-self:flex-start;width:fit-content;background:#fff;border:2.5px solid var(--sl);border-radius:999px;padding:1px 11px;font-size:13.5px;font-weight:900}
.dgcm .q.on[data-odk]{background:#fff}
.dgcm .odsum{font-size:13.5px;font-weight:700;color:var(--sub);text-align:center}
.dgcm .odsum b{color:var(--ink)}
.dgcm .go:disabled{opacity:.45;cursor:not-allowed}
.dgcm .tot b.askb{font-size:22px;line-height:1.4;overflow-wrap:anywhere}
.dgcm .hero.nomap[data-step="send"]{grid-template-columns:minmax(0,1fr)}
.dgcm .hero.nomap[data-step="send"] .stage{display:none}
.dgcm .hero.nomap[data-step="send"] .side{border:0;padding:20px}
@media (min-width:861px){.dgcm .hero.nomap[data-step="send"]{height:auto}
.dgcm .hero.nomap[data-step="send"] .side>.body{width:100%;max-width:640px;margin-inline:auto}}
.dgcm .hero.nomap .prog,.dgcm .hero.nomap .badge{display:none}
.dgcm .hero:not([data-step="start"]) .steps{font-size:12.5px;letter-spacing:-.02em}
.dgcm .hero:not([data-step="start"]) .steps span{padding:5px 0}
.dgcm .hero:not([data-step="start"]) .lab{font-size:17px;color:var(--ink);gap:8px}
.dgcm .hero:not([data-step="start"]) .lab i{width:26px;height:26px;font-size:13.5px}
.dgcm .hero:not([data-step="start"]) .chips{gap:8px}
.dgcm .hero:not([data-step="start"]) .chip{font-size:15px;padding:7px 13px}
.dgcm .hero:not([data-step="start"]) .chip:has(.ci){display:inline-flex;align-items:center;gap:7px;padding:3px 13px 3px 3px}
.dgcm .chip .ci{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;overflow:hidden;background:var(--pale);border:2px solid var(--ink);font-style:normal;font-size:15px}
.dgcm .chip .ci img{display:block;width:100%;height:100%;object-fit:cover}
.dgcm .chip.on .ci{border-color:var(--sl)}
.dgcm .hero:not([data-step="start"]) .sub{font-size:14px;margin-top:8px}
.dgcm .hero:not([data-step="start"]) .od{gap:10px}
.dgcm .hero:not([data-step="start"]) .od label{font-size:15px;padding:8px 12px}
.dgcm .hero:not([data-step="start"]) .od label span{font-size:13.5px;padding:2px 11px}
.dgcm .hero:not([data-step="start"]) .target{font-size:13.5px}
.dgcm .hero:not([data-step="start"]) .target button{padding:5px 14px}
.dgcm .hero:not([data-step="start"]) .target button.on{padding:3.5px 12.5px}
.dgcm .hero:not([data-step="start"]) .q{font-size:14.5px;padding:6px 13px}
.dgcm .hero:not([data-step="start"]) .qrow{gap:8px}
.dgcm .hero:not([data-step="start"]) .qrow>span:not(.target){font-size:13px!important}
.dgcm .hero:not([data-step="start"]) .course{padding:9px 11px;gap:11px}
.dgcm .hero:not([data-step="start"]) .course .no{width:36px;height:36px;font-size:12px}
.dgcm .hero:not([data-step="start"]) .course .t{font-size:15px}
.dgcm .hero:not([data-step="start"]) .course .m{font-size:12.5px}
.dgcm .hero:not([data-step="start"]) .hint{font-size:14.5px}
.dgcm .hero:not([data-step="start"]) .nt{font-size:13.5px}
.dgcm .hero:not([data-step="start"]) .legs{font-size:13.5px}
.dgcm .hero:not([data-step="start"]) .price span{font-size:13.5px!important}
.dgcm .hero:not([data-step="start"]) .price b{font-size:22px}
.dgcm .hero:not([data-step="start"]) .big{font-size:28px}
.dgcm .hero:not([data-step="start"]) .h3{font-size:20px}
.dgcm .hero:not([data-step="start"]) .go{font-size:16px;padding:11px}
.dgcm .hero:not([data-step="start"]) .back{font-size:16px}
.dgcm .hero:not([data-step="start"]) textarea{font-size:15px}
/* 文字を入れる欄は 16px 以上にする。16px 未満だと iPhone は欄を押したときに画面を拡大し、そのあと地図の画面が左右に動いてしまう（2026-11-07） */
.dgcm textarea,.dgcm .hero:not([data-step="start"]) textarea,.dgcm .od input{font-size:16px}
.dgcm .hero:not([data-step="start"]) .pv{font-size:13.5px}
.dgcm .stage{position:relative;overflow:hidden;background:#bfe3ef;perspective:1500px;perspective-origin:50% 35%;min-height:0}
.dgcm .plane{position:absolute;left:0;top:0;transition:transform 1.3s cubic-bezier(.35,.1,.2,1);background:#f7f4ed}
.dgcm .plane.carplane{z-index:3;background:none;pointer-events:none;transform-style:preserve-3d}
.dgcm .plane svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.dgcm #dgcm-rsvg{will-change:transform}
.dgcm .plane .carl{position:absolute;left:0;top:0;width:0;height:0;transform-origin:0 0;transform-style:preserve-3d;will-change:transform;pointer-events:none}
.dgcm .plane .carl .v{position:absolute;left:0;top:0;width:0;height:0;transform-style:preserve-3d}
.dgcm .plane .carl .ly{position:absolute;inset:auto;left:-22px;top:-15px;width:44px;height:30px;overflow:visible}
.dgcm .plane .carl svg.v-rope{inset:auto;left:-24px;top:-2.4px;width:48px;height:36px;overflow:visible;transform-origin:24px 2.4px;transform:var(--bill,none) translateZ(1px)}
.dgcm .mapimg{position:absolute;left:0;top:0;width:100%;height:100%;display:block;max-width:none;margin:0}
.dgcm .mapimg.city{width:1000px;height:1001px}
.dgcm .pins{position:absolute;inset:0;z-index:3;pointer-events:none}
.dgcm .pin{position:absolute;left:0;top:0;transform:translate(-50%,-100%);pointer-events:auto;display:flex;flex-direction:column;align-items:center;cursor:pointer;border:0;background:none;padding:0;font:inherit}
.dgcm .pin .tag{position:relative;z-index:1;white-space:nowrap;background:#fff;border:2.5px solid var(--ink);border-radius:999px;padding:2px 10px 2px 3px;font-weight:900;font-size:12px;color:var(--ink);box-shadow:3px 3px 0 var(--ink);display:flex;align-items:center;gap:5px}
.dgcm .pin .tag em{font-style:normal;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--pale);font-size:14px;overflow:hidden;border:2px solid var(--ink);flex:none}
.dgcm .pin .tag em img{width:100%;height:100%;object-fit:cover;display:block}
.dgcm .pin .tag u{display:none;text-decoration:none;position:absolute;left:-7px;top:-8px;width:20px;height:20px;border-radius:50%;background:var(--accent);border:2px solid var(--ink);font-family:var(--mono);font-size:10.5px;place-items:center;color:var(--ink)}
.dgcm .pin.on .tag u{display:grid}
.dgcm .pin .arw{display:none;font-size:22px;line-height:1;font-weight:900;color:#b5541a}
.dgcm .pin small{display:none;font-weight:700;color:#b5541a;font-size:10.5px}
.dgcm .pin .stem{width:2.5px;height:32px;margin-top:-14px;background:var(--ink)}/* 棒の上を札の裏へ通す。札を端までずらしても離れない */
.dgcm .pin .foot{width:12px;height:5px;border-radius:50%;background:rgba(32,58,69,.35)}
.dgcm .pin.on .tag{background:var(--sb);color:var(--sf);border-color:var(--sl);box-shadow:3px 3px 0 var(--ss)}
.dgcm .pin.on .tag em{border-color:var(--sl)}
.dgcm .pin.on .tag u{background:#fff;border-color:var(--sl);color:var(--sf)}
.dgcm .pin.hit .tag{animation:dgcm-pop .6s cubic-bezier(.3,1.7,.5,1)}
@keyframes dgcm-pop{0%{transform:scale(.7)}50%{transform:scale(1.25)}100%{transform:scale(1)}}
.dgcm .pin.start .tag{background:var(--st);box-shadow:3px 3px 0 var(--ink)}
.dgcm .pin.air .tag{background:var(--air);color:#fff;border-color:#0d3f78;box-shadow:3px 3px 0 #0d3f78}
.dgcm .pin.air .tag em{background:#fff;font-size:15px;border-color:#0d3f78}
.dgcm .pin.dim{filter:grayscale(.6) opacity(.6)}
.dgcm .pin.pill{transform:translate(-50%,-50%)}
.dgcm .pin.pill .stem,.dgcm .pin.pill .foot{display:none}
.dgcm .pin.pill .tag{background:#fff7e0}
.dgcm .pin.pill .arw,.dgcm .pin.pill small{display:inline}
.dgcm .pin.pill.on .tag{background:var(--sb);color:var(--sf);border-color:var(--sl)}
.dgcm .pin.pill.on .arw{color:var(--sf)}
.dgcm .badge{position:absolute;z-index:4;left:12px;bottom:10px;background:#fff;border:2.5px solid var(--ink);border-radius:14px;padding:4px 11px;font-weight:900;font-size:12px;box-shadow:3px 3px 0 var(--ink);max-width:calc(100% - 24px)}
.dgcm .badge b{color:var(--primary);font-family:var(--mono);font-size:14px}
.dgcm .ctrl{position:absolute;z-index:4;right:12px;top:12px;display:flex;gap:6px}
.dgcm .ctrl button{border:2.5px solid var(--ink);background:#fff;border-radius:999px;font:inherit;font-weight:900;font-size:12px;padding:4px 10px;box-shadow:3px 3px 0 var(--ink);cursor:pointer;color:var(--ink)}
.dgcm .ctrl button.on{background:var(--sb);color:var(--sf)}
.dgcm .osm{position:absolute;z-index:4;right:8px;bottom:6px;font-size:10px;color:#5f6b74;background:rgba(255,255,255,.85);border-radius:4px;padding:0 5px}
.dgcm .ml{transform:translate(var(--x),var(--y)) scale(var(--k,1))}
.dgcm .ml text{font-family:var(--font);font-weight:900;paint-order:stroke;stroke:rgba(255,255,255,.95);stroke-width:4px;stroke-linejoin:round;fill:#1769c2}
.dgcm .ml .big{font-size:16px}
.dgcm .ml .sm{font-size:12px}
.dgcm .ml circle{fill:#1769c2;stroke:#fff;stroke-width:2}
.dgcm .rgh{fill:none;stroke:rgba(255,255,255,.95);stroke-width:calc(8px*var(--k,1));stroke-linecap:round;stroke-linejoin:round}
.dgcm .rg{fill:none;stroke:rgba(255,178,30,.5);stroke-width:calc(17px*var(--k,1));stroke-linecap:round;stroke-linejoin:round}
.dgcm .rm{fill:none;stroke:var(--glow);stroke-width:calc(6px*var(--k,1));stroke-linecap:round;stroke-linejoin:round}
.dgcm .rf{fill:none;stroke:#fff6c9;stroke-width:calc(2.4px*var(--k,1));stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:calc(10px*var(--k,1)) calc(26px*var(--k,1));}
.dgcm .rp0{fill:none;stroke:#fff;stroke-width:calc(6px*var(--k,1));stroke-linecap:round}
.dgcm .rp{fill:none;stroke:var(--ink);stroke-width:calc(2.5px*var(--k,1))}
.dgcm .rpd{fill:none;stroke:var(--ink);stroke-width:calc(8px*var(--k,1));stroke-linecap:round;stroke-dasharray:calc(.1px*var(--k,1)) calc(46px*var(--k,1))}
.dgcm .carl .v{display:none}
.dgcm .carl.still .wake{display:none}
.dgcm .carl[data-v="car"] .v-car,.dgcm .carl[data-v="boat"] .v-boat,.dgcm .carl[data-v="rope"] .v-rope{display:block}
.dgcm .rb{fill:none;stroke:#1769c2;stroke-width:calc(4px*var(--k,1));stroke-linecap:round;stroke-dasharray:calc(2px*var(--k,1)) calc(10px*var(--k,1))}
@media (max-width:860px){.dgcm .page{padding:0}
.dgcm .hero{display:flex;flex-direction:column;height:auto;padding-bottom:12px;gap:10px}
.dgcm .side{display:contents}
.dgcm .side>*{margin-left:12px;margin-right:12px}
.dgcm .axes{order:2}
.dgcm .hero[data-step="start"]{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:1fr 1fr;height:auto;padding-bottom:0;gap:0}
.dgcm .hero[data-step="start"] .side{display:flex;padding:16px 14px;gap:12px;border-right:0;border-bottom:3px solid var(--ink)}
.dgcm .hero[data-step="start"] .side>*{margin:0;order:0}
.dgcm .hero[data-step="start"] .axes{gap:10px}
.dgcm .hero[data-step="start"] .axis{padding:9px 8px;gap:6px;border-radius:14px;box-shadow:4px 4px 0 var(--ink)}
.dgcm .hero[data-step="start"] .axis b{font-size:min(16px,calc(100vw/24));white-space:nowrap;margin:0}
.dgcm .atip{font-size:min(11.5px,calc(100vw/32))}
.dgcm .atiles{flex:none;grid-auto-rows:auto;gap:5px}
.dgcm .tl{border-width:2px;border-radius:8px;box-shadow:2px 2px 0 var(--ink)}
.dgcm .tl img{flex:none;height:auto;aspect-ratio:4/3}
.dgcm .tl span{font-size:10.5px;letter-spacing:-.03em}
.dgcm .tl.hr{height:46px;font-size:min(19px,calc(100vw/20));white-space:nowrap}
.dgcm .tl.hr small{font-size:9px;margin-top:1px}
.dgcm .amore{min-height:34px;padding:0 2px;font-size:min(11px,calc(100vw/35));letter-spacing:-.04em;white-space:nowrap;box-shadow:2px 2px 0 var(--ink)}
.dgcm .hero[data-step="start"] .axis.on{box-shadow:4px 4px 0 var(--ink)}
.dgcm .vb .ph span{font-size:8.5px}
.dgcm .vb .hr{font-size:13px}
.dgcm .vb .hr small{font-size:8px}
.dgcm .vb .hrs{gap:3px}
.dgcm .hero[data-step="start"] .axis .vb{gap:3px}
.dgcm .hero[data-step="start"] .hint{font-size:12.5px;line-height:1.6}
.dgcm .hero[data-step="start"] .stage{order:0;height:auto;min-height:0;border:0}
.dgcm .hero[data-step="start"] .pin .tag{font-size:10.5px;padding:1px 7px 1px 2px;border-width:2px;box-shadow:2px 2px 0 var(--ink)}
.dgcm .hero[data-step="start"] .pin .tag em{width:20px;height:20px;border-width:1.5px}
.dgcm .hero[data-step="start"] .osm{font-size:8.5px;right:4px;bottom:3px}
.dgcm .hero[data-step="shared"] .side>.body,.dgcm .hero[data-step="od"] .side>.body,.dgcm .hero[data-step="select"] .side>.body,.dgcm .hero[data-step="people"] .side>.body,.dgcm .hero[data-step="notes"] .side>.body{order:2;margin-top:12px}
.dgcm .hero[data-step="shared"] .stage,.dgcm .hero[data-step="od"] .stage,.dgcm .hero[data-step="select"] .stage,.dgcm .hero[data-step="people"] .stage,.dgcm .hero[data-step="notes"] .stage{order:3;height:500px;border-bottom:0}
.dgcm .hero[data-step="shared"],.dgcm .hero[data-step="od"],.dgcm .hero[data-step="select"],.dgcm .hero[data-step="people"],.dgcm .hero[data-step="notes"]{padding-bottom:0}
/* シェア用 URL を開いたスマホでは、まず地図を見せる（③人数からは今までどおり説明が上） */
.dgcm .hero[data-step="shared"] .stage{order:1;border-top:0;border-bottom:3px solid var(--ink)}
.dgcm .hero[data-step="shared"]{gap:0;padding-bottom:14px}
.dgcm .hero.nomap[data-step="send"] .side>.body{order:2}
.dgcm .hero.nomap[data-step="send"]{padding-top:14px}
.dgcm .hero:not([data-step="send"]) .osm{bottom:auto;top:5px;right:6px}
.dgcm .stage{order:3;height:500px;flex:none;border-top:3px solid var(--ink);border-bottom:3px solid var(--ink)}
.dgcm .side>.body{order:4;display:flex;flex-direction:column;gap:10px}
.dgcm .ctrl{display:none}
.dgcm .prog{left:8px;right:8px;top:8px;max-width:none}
.dgcm .prog .pt{flex-wrap:wrap;gap:0 6px}
.dgcm .prog .pt span{flex:1 1 60%}
.dgcm .prog .pt em{margin-left:auto}
.dgcm .pin .tag{font-size:11px;padding:2px 8px 2px 3px}
.dgcm .pin .tag em{width:24px;height:24px;font-size:12px}
.dgcm .pin.pill small,.dgcm .pin.pill .tag em{display:none}
.dgcm .pin.pill .tag{font-size:10.5px;padding:2px 9px;border-width:2px;box-shadow:2px 2px 0 var(--ink)}
.dgcm .pin.pill .arw{font-size:15px}}
@media (prefers-reduced-motion:reduce){.dgcm .plane{transition:none}
.dgcm .rf{animation:none}}
@media (max-width:781px){.dgcm .ttl:not(#_){font-size:clamp(24px,7.45vw,34px)!important;line-height:1.8!important;margin-top:42px!important}
.dgcm .ttl:not(#_) em{display:block;width:fit-content;margin:0 auto 12px 0;padding:.02em .26em .1em}}
@media (max-width:640px){.dgcm .topwrap{margin:0 0 14px}
.dgcm .ftop{gap:11px}
.dgcm .fstamps{gap:4px}
.dgcm .fstamps i{width:24px;height:24px}
.dgcm .h1p:not(#_){font-size:13px!important}
.dgcm .ttl:not(#_){font-size:clamp(20px,6.6vw,26px)!important;letter-spacing:.02em}}