/* DiskMaker Option Tips v1.0.0 */
.dmkt-b{
    display:inline-flex;align-items:center;justify-content:center;
    width:19px;height:19px;min-width:19px;margin:0 0 0 6px;padding:0;
    border:1px solid #e0c94a;border-radius:50%;
    background:#fdf6d8;color:#8a6d00;
    font:700 12px/1 -apple-system,BlinkMacSystemFont,"Hiragino Sans",sans-serif;
    cursor:pointer;vertical-align:middle;transition:background .15s,border-color .15s;
    -webkit-appearance:none;appearance:none;box-shadow:none;
}
.dmkt-b:hover,.dmkt-b[aria-expanded="true"]{background:#ead91e;border-color:#c9b400;color:#2b2a26;}
.dmkt-b:focus-visible{outline:2px solid #f59e0b;outline-offset:2px;}
.dmr-dbtn .dmkt-b{margin-left:4px;position:relative;z-index:3;}

.dmkt-pop{
    position:fixed;z-index:100000;width:330px;max-width:calc(100vw - 24px);
    background:#fff;border:1px solid #e7e2d4;border-radius:14px;
    box-shadow:0 14px 40px rgba(43,42,38,.16);
    padding:16px 16px 14px;opacity:0;pointer-events:none;
    max-height:calc(100vh - 24px);overflow-y:auto;
    transform:translateY(-6px);transition:opacity .16s ease,transform .2s ease;
    color:#2b2a26;text-align:left;
    font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP",sans-serif;
}
.dmkt-pop.show{opacity:1;pointer-events:auto;transform:translateY(0);}
.dmkt-pop::after{
    content:"";position:absolute;width:12px;height:12px;background:#fff;
    border-left:1px solid #e7e2d4;border-top:1px solid #e7e2d4;
    transform:rotate(45deg);left:var(--ax,24px);top:-7px;border-radius:2px;
}
.dmkt-pop.is-up::after{top:auto;bottom:-7px;transform:rotate(225deg);}
.dmkt-ttl{
    margin:0 0 9px;font-size:15.5px;font-weight:700;line-height:1.5;
    letter-spacing:.01em;
}
.dmkt-fig{
    background:#fffdf7;border:1px solid #f0ead5;border-radius:10px;
    padding:8px;margin:0 0 10px;
}
.dmkt-fig svg{display:block;width:100%;height:auto;}
.dmkt-txt{margin:0;font-size:13px;line-height:1.85;}
.dmkt-note{
    margin:9px 0 0;padding-top:9px;border-top:1px dashed #e7e2d4;
    font-size:12px;line-height:1.8;color:#6b675c;
}
.dmkt-nw{white-space:nowrap;}
.dmkt-pop a.dmkt-link{color:#1d6fb8;text-decoration:underline;text-underline-offset:2px;font-weight:700;}
.dmkt-pop a.dmkt-link:hover{color:#175d9c;}
.dmkt-x{display:none;}

@media (max-width:780px){
    .dmkt-pop{
        position:fixed;left:12px!important;right:12px;bottom:12px;top:auto!important;
        width:auto;max-width:none;max-height:76vh;overflow-y:auto;
        transform:translateY(14px);padding:18px 16px 16px;
        box-shadow:0 -6px 40px rgba(43,42,38,.22);
    }
    .dmkt-pop.show{transform:translateY(0);}
    .dmkt-pop::after{display:none;}
    .dmkt-x{
        display:block;position:absolute;top:8px;right:8px;width:32px;height:32px;
        border:0;background:none;color:#8b8578;font-size:20px;line-height:1;cursor:pointer;
    }
    .dmkt-ttl{padding-right:28px;font-size:16px;}
    .dmkt-txt{font-size:14px;}
    .dmkt-b{width:22px;height:22px;min-width:22px;font-size:13px;}
}
.dmkt-ov{
    position:fixed;inset:0;background:rgba(43,42,38,.28);z-index:99999;
    opacity:0;pointer-events:none;transition:opacity .18s;
}
@media (max-width:780px){ .dmkt-ov.show{opacity:1;pointer-events:auto;} }
.dmkt-fig svg text{font-family:inherit;font-size:10px;fill:#2b2a26;}
.dmkt-fig svg .dmkt-s{fill:#8b8578;font-size:9px;}
.dmkt-fig svg .dmkt-hi{font-weight:700;}

/* ---- 図解のアニメーション ---- */
.dmkt-fig svg *{transform-box:fill-box;}
@keyframes dmkt-fade{from{opacity:0}to{opacity:1}}
@keyframes dmkt-pop{0%{opacity:0;transform:scale(.6)}70%{opacity:1;transform:scale(1.08)}100%{opacity:1;transform:scale(1)}}
@keyframes dmkt-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes dmkt-slide{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:translateX(0)}}
@keyframes dmkt-drop{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:translateY(0)}}
@keyframes dmkt-pulse{0%,100%{opacity:.35}50%{opacity:1}}
/* 封筒がバーの先端と一緒に進む（--dx = バーの長さ） */
@keyframes dmkt-travel{from{transform:translateX(0)}to{transform:translateX(var(--dx,100px))}}
/* 焼き増し：マスターの位置から現れて自分の位置へ */
@keyframes dmkt-copy{from{opacity:0;transform:translateX(calc(var(--dx,40px) * -1))}to{opacity:1;transform:translateX(0)}}
/* 再生位置：「次へ」のたびにチャプター1つぶん（--dx）飛ぶ */
@keyframes dmkt-jump{0%,22%{transform:translateX(0)}25%,47%{transform:translateX(var(--dx,74px))}50%,72%{transform:translateX(calc(var(--dx,74px) * 2))}75%,100%{transform:translateX(calc(var(--dx,74px) * 3))}}
@keyframes dmkt-press{0%,21%{transform:scale(1)}23%{transform:scale(.78)}26%,46%{transform:scale(1)}48%{transform:scale(.78)}51%,71%{transform:scale(1)}73%{transform:scale(.78)}76%,100%{transform:scale(1)}}
/* メニューの選択カーソル：一覧を順に移動（往復） */
@keyframes dmkt-select{0%,22%{transform:translateX(0)}26%,48%{transform:translateX(var(--dx,52px))}52%,74%{transform:translateX(calc(var(--dx,52px) * 2))}78%,100%{transform:translateX(calc(var(--dx,52px) * 3))}}
@keyframes dmkt-flow{0%{opacity:0;transform:translateX(0)}12%{opacity:1}70%{opacity:1;transform:translateX(var(--dx,60px))}85%{opacity:0;transform:translateX(var(--dx,60px))}100%{opacity:0;transform:translateX(0)}}

.dmkt-pop.show .dmkt-fig .a-fade  {animation:dmkt-fade .5s ease both;}
.dmkt-pop.show .dmkt-fig .a-pop   {animation:dmkt-pop .5s cubic-bezier(.2,.9,.3,1.3) both;transform-origin:center;}
.dmkt-pop.show .dmkt-fig .a-grow  {animation:dmkt-grow .8s cubic-bezier(.2,.85,.25,1) both;transform-origin:left center;}
.dmkt-pop.show .dmkt-fig .a-slide {animation:dmkt-slide .55s ease both;}
.dmkt-pop.show .dmkt-fig .a-drop  {animation:dmkt-drop .55s ease both;}
.dmkt-pop.show .dmkt-fig .a-travel{animation:dmkt-travel .8s cubic-bezier(.2,.85,.25,1) both;}
.dmkt-pop.show .dmkt-fig .a-copy  {animation:dmkt-copy .6s cubic-bezier(.2,.85,.25,1) both;}
.dmkt-pop.show .dmkt-fig .a-pulse {animation:dmkt-pulse 1.8s ease-in-out infinite;}
.dmkt-pop.show .dmkt-fig .a-jump  {animation:dmkt-jump 4s ease-in-out infinite;}
.dmkt-pop.show .dmkt-fig .a-press {animation:dmkt-press 4s ease-in-out infinite;transform-origin:center;}
.dmkt-pop.show .dmkt-fig .a-select{animation:dmkt-select 4.4s ease-in-out infinite alternate;}
.dmkt-pop.show .dmkt-fig .a-flow  {animation:dmkt-flow 2.6s ease-in-out infinite;}
@media (prefers-reduced-motion: reduce){
    .dmkt-pop .dmkt-fig *{animation:none!important;}
    .dmkt-pop{transition:none;}
}

/* スマホでシートを開いている間は背景を動かさない */
html.dmkt-lock, html.dmkt-lock body{overflow:hidden!important;}