/* 遷移画面の共通部品（commission-screens-20260924・Cowork） ログイン／招待の初回設定／契約の確認／招待された問題集／ライセンスコード／404 で使う。 形：左に「見出し＋ドパガキくん＋できること」、右に白いカード。390px では縦に積む。 cloud-ui.css・site-shell.css は変えず、.dpg-scr の中だけを上書きする。 */ .dpg-scr{ --scr-bg:#fffcf7;--scr-surface:#fff;--scr-surface-2:#fff3e6;--scr-text:#292622;--scr-muted:#65594d; --scr-line:#eadccd;--scr-line-strong:#e5cdb8;--scr-control:#ad8973; --scr-accent:#6535b5;--scr-accent-ink:#4f22a0;--scr-accent-soft:#f3edff;--scr-accent-line:#dccdf6; --scr-grad:linear-gradient(165deg,#9742f5 0%,#6424ed 48%,#441cf0 100%); --scr-shadow:0 8px 30px rgb(124 75 30 / 7%); --scr-font:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Yu Gothic",Meiryo,sans-serif; box-sizing:border-box;max-width:1120px;margin:0 auto;padding:40px 24px 64px;color:var(--scr-text);font-family:var(--scr-font);font-size:16px;line-height:1.7; display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);grid-template-areas:"hero panel" "foot foot";column-gap:48px;row-gap:28px;align-items:start } .dpg-scr *,.dpg-scr *::before,.dpg-scr *::after{box-sizing:border-box} body:has(>.dpg-scr),body:has(>main.dpg-scr){margin:0;background:var(--scr-bg,#fffcf7)} html:has(.dpg-scr) body{background:#fffcf7} .dpg-scr p{max-width:none} .dpg-scr a:not([class]){color:var(--scr-accent)} .dpg-scr :focus-visible{outline:3px solid var(--scr-accent);outline-offset:3px} .dpg-scr [hidden]{display:none!important} /* 左：見出しと挿絵 */ .dpg-scr__hero{grid-area:hero;position:relative;padding-top:8px;min-width:0} .dpg-scr__eyebrow,.dpg-scr .cloud-eyebrow{margin:0 0 4px;color:var(--scr-accent);font-weight:800;font-size:14px;letter-spacing:.06em} .dpg-scr h1{margin:0 0 12px;font-size:40px;line-height:1.3;letter-spacing:-.01em;font-weight:900;color:var(--scr-text)} .dpg-scr h1 .dpg-scr__mark{background:linear-gradient(transparent 62%,#e9deff 62%,#e9deff 92%,transparent 92%)} .dpg-scr__lead{margin:0 0 20px;color:var(--scr-muted);font-size:16px;line-height:1.8} .dpg-scr__art{display:block;width:220px;height:auto;margin:6px 0 18px -6px;filter:drop-shadow(0 10px 18px rgb(80 40 140 / 14%))} .dpg-scr__hero--art-right{padding-right:210px;min-height:260px} .dpg-scr__hero--art-right .dpg-scr__art{position:absolute;right:0;top:0;width:200px;margin:0} /* できること（アイコン＋短い文） */ .dpg-scr__perks{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px} .dpg-scr__perks li{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 10px 12px;background:var(--scr-surface);border:1px solid var(--scr-line);border-radius:16px;text-align:center;font-size:14px;font-weight:700;line-height:1.45;color:var(--scr-text)} .dpg-scr__perks li::before{content:"";width:48px;height:48px;border-radius:50%;background:var(--ico) center/26px 26px no-repeat,var(--tint,var(--scr-accent-soft))} .dpg-scr__perk--device{--tint:#e9f1fb;--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232264ae' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='14' height='10' rx='2'/%3E%3Cpath d='M1.5 17.5h17'/%3E%3Crect x='16' y='9' width='6' height='11' rx='1.5'/%3E%3C/svg%3E")} .dpg-scr__perk--rank{--tint:#fff4d6;--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a8620a' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M3 8l4.5 4L12 5l4.5 7L21 8l-2 11H5z'/%3E%3C/svg%3E")} .dpg-scr__perk--story{--tint:#e8f4e9;--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23276846' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M5 3h10l4 4v14H5z'/%3E%3Cpath d='M9 11h6M9 15h4'/%3E%3Cpath d='M14 3v5h5'/%3E%3C/svg%3E")} /* 2026-10-15 Cowork: マイページの「できること（使い方の一覧）」の絵（たたんだ地図）。地は --scr-accent-soft、線は紫（絵の中は変数が使えないので、ほかの絵と同じく値で書く）。 */ .dpg-scr__perk--guide{--tint:var(--scr-accent-soft);--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236535b5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4 3 6.5v13L9 17l6 3 6-2.5v-13L15 7z'/%3E%3Cpath d='M9 4v13M15 7v13'/%3E%3C/svg%3E")} .dpg-scr__perk--sync{--tint:#f3edff;--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236535b5' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11a8 8 0 0 0-14.6-4.5M4 13a8 8 0 0 0 14.6 4.5'/%3E%3Cpath d='M5 3v4h4M19 21v-4h-4'/%3E%3C/svg%3E")} /* 2026-10-19 区間15 FIX4（評価役 EVAL2 の直す1 の後半「マイページの『問題集の設定』が、下のメニューのランキングと同じ王冠」）: 王冠はランキングの絵（.dpg-scr__perk--rank）を借りていただけで、プラス（有料）の印ではない（プラスの入口は .dpg-scr__perk--device の別の絵）。 「問題集の設定」は、問題集の中の設定と同じ歯車の絵にする（views.js の LINE_ICONS.gear と同じ形。24 の箱・線 2・端と角は丸＝下のメニューの絵と同じ描き方）。 地と線の色は前と同じ（#fff4d6・#a8620a）。リンクの class の dpg-scr__perk--rank は残す（読み先を消さない）。この規則は --rank より後に置くので、絵だけ替わる。 */ .dpg-scr__perk--settings{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a8620a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.4 5.2 10.7 2.6h2.6l.3 2.6 2.1.9 2-1.7 1.9 1.9-1.7 2 .9 2.1 2.6.3v2.6l-2.6.3-.9 2.1 1.7 2-1.9 1.9-2-1.7-2.1.9-.3 2.6h-2.6l-.3-2.6-2.1-.9-2 1.7-1.9-1.9 1.7-2-.9-2.1-2.6-.3v-2.6l2.6-.3.9-2.1-1.7-2 1.9-1.9 2 1.7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E")} /* 右：白いカード */ .dpg-scr__panel{grid-area:panel;min-width:0;display:flex;flex-direction:column;gap:16px} .dpg-scr__card,.dpg-scr .cloud-main section.dpg-scr__card,.dpg-scr section.dpg-scr__card{margin:0;padding:26px 28px;background:var(--scr-surface);border:1px solid var(--scr-line);border-radius:24px;box-shadow:var(--scr-shadow);border-top:1px solid var(--scr-line)} .dpg-scr__card>h2,.dpg-scr__card-title{margin:0 0 14px;font-size:20px;line-height:1.45;font-weight:800;color:var(--scr-text)} .dpg-scr__card>p{margin:0 0 12px} .dpg-scr__foot{grid-area:foot;min-width:0} .dpg-scr__links{display:flex;flex-wrap:wrap;gap:6px 18px;margin:4px 0 0;padding:0;list-style:none;font-size:14px} .dpg-scr__links a{color:var(--scr-accent);font-weight:700;text-underline-offset:3px} /* 入力とボタン（cloud-ui.css の見た目をこの中だけ置き換える） */ .dpg-scr .cloud-form{display:flex;flex-direction:column;gap:14px;max-width:none} .dpg-scr .cloud-field{font-weight:700;font-size:15px} .dpg-scr .cloud-field input,.dpg-scr .cloud-field select,.dpg-scr .cloud-field textarea,.dpg-scr input[type=email],.dpg-scr input[type=password],.dpg-scr input[type=url],.dpg-scr input[type=text]:not([class*="qz"]),.dpg-scr textarea.dpg-field{min-height:50px;margin-top:6px;padding:12px 14px;border:1.5px solid #dcc9b8;border-radius:12px;background:#fff;font:inherit;font-weight:400;color:var(--scr-text);width:100%} .dpg-scr .cloud-field input:focus,.dpg-scr input:focus,.dpg-scr textarea:focus{border-color:var(--scr-accent);outline:none;box-shadow:0 0 0 4px rgb(101 53 181 / 14%)} .dpg-scr .cloud-button,.dpg-scr__btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:10px 20px;border:1.5px solid var(--scr-control);border-radius:14px;background:#fff;color:var(--scr-text);font:inherit;font-weight:800;text-decoration:none;cursor:pointer} .dpg-scr .cloud-button:hover{background:#faf6ff} .dpg-scr .cloud-button.primary,.dpg-scr__btn--primary{border-color:transparent;background:var(--scr-grad);color:#fff;box-shadow:0 3px 0 #4215a8} .dpg-scr .cloud-button.primary:hover{filter:brightness(1.06);background:var(--scr-grad)} .dpg-scr .cloud-button:disabled{background:#f1eeea;border-color:#e5dcd2;color:#65594d;box-shadow:none;filter:none} .dpg-scr .cloud-form>.cloud-button,.dpg-scr__btn--block{width:100%} .dpg-scr .cloud-note{font-size:14px;color:var(--scr-muted);margin:10px 0 0;line-height:1.65} .dpg-scr .cloud-status{min-height:0;margin:0;color:var(--scr-muted)} .dpg-scr .cloud-status:empty{display:none} .dpg-scr .cloud-status:not(:empty){padding:12px 16px;border-radius:14px;background:var(--scr-surface-2);font-weight:700} .dpg-scr .cloud-status.is-error{background:#fff0ed;color:#9b2525} .dpg-scr .cloud-status.is-success{background:#e8f4e9;color:#246b3d} /* Google を先頭に。ボタンが隠れているときは「または」も出さない */ .dpg-scr__google{width:100%} /* ログインボタンの直下の一行「続けると、利用規約とプライバシーポリシーに同意したことになります」（2026-10-03。同意の関門はこの一行に集約）。 ボタンのすぐ後ろに置けば、ボタンが隠れている間（Googleログインが無効のとき）は出ない。 */ .dpg-scr .dpg-login-agree{margin:8px 0 0;font-size:13px;line-height:1.6;color:var(--scr-text);text-align:left} .dpg-scr .dpg-login-agree a{color:var(--scr-accent-ink);text-decoration:underline;text-underline-offset:2px;white-space:nowrap} /* 2026-10-22 本人決定: 設定で2倍に拡大した幅（187px）では「セキュリティと、お預かりする情報」が1行に入らず横にはみ出していた。狭い幅だけ折り返す（文はそのまま） */ @media(max-width:300px){.dpg-scr .dpg-login-agree a{white-space:normal}} .dpg-scr button[hidden]+.dpg-login-agree{display:none} .dpg-scr__google::before{content:"";width:22px;height:22px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23FFC107' d='M43.6 20.5H42V20H24v8h11.3C33.7 32.7 29.2 36 24 36c-6.6 0-12-5.4-12-12s5.4-12 12-12c3.1 0 5.8 1.2 7.9 3.1l5.7-5.7C34 6.1 29.3 4 24 4 12.9 4 4 12.9 4 24s8.9 20 20 20 20-8.9 20-20c0-1.3-.1-2.4-.4-3.5z'/%3E%3Cpath fill='%23FF3D00' d='M6.3 14.7l6.6 4.8C14.7 15.1 19 12 24 12c3.1 0 5.8 1.2 7.9 3.1l5.7-5.7C34 6.1 29.3 4 24 4 16.3 4 9.7 8.3 6.3 14.7z'/%3E%3Cpath fill='%234CAF50' d='M24 44c5.2 0 9.9-2 13.4-5.2l-6.2-5.2C29.2 35.1 26.7 36 24 36c-5.2 0-9.6-3.3-11.3-7.9l-6.5 5C9.5 39.6 16.2 44 24 44z'/%3E%3Cpath fill='%231976D2' d='M43.6 20.5H42V20H24v8h11.3c-.8 2.2-2.2 4.2-4.1 5.6l6.2 5.2C37 39.2 44 34 44 24c0-1.3-.1-2.4-.4-3.5z'/%3E%3C/svg%3E") center/contain no-repeat} /* ログインの方法のボタン（2026-10-07。Apple・Google・Microsoft・LINE）。縦に並べ、隠れているボタンの分の隙間を残さない（gap）。 ボタンが1つも無いとき（#cloud-provider-logins が hidden）は、同意の一行と「または」も出さない。 */ .dpg-scr__providers{display:flex;flex-direction:column;gap:10px} .dpg-scr__providers[hidden]{display:none} .dpg-scr .dpg-scr__providers>.cloud-button,.dpg-scr .dpg-scr__providers>.cloud-button+.cloud-button{width:100%;margin:0} .dpg-scr .dpg-scr__providers[hidden]+.dpg-login-agree{display:none} /* Apple（Human Interface Guidelines の Sign in with Apple: 黒地に白の文字とロゴ。ほかのボタンと同じ大きさと角丸） */ .dpg-scr .cloud-button.dpg-scr__apple{background:#000;border-color:#000;color:#fff} .dpg-scr .cloud-button.dpg-scr__apple:hover{background:#1d1d1f} .dpg-scr__apple::before{content:"";width:18px;height:22px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 814 1000'%3E%3Cpath fill='%23fff' d='M788.1 340.9c-5.8 4.5-108.2 62.2-108.2 190.5 0 148.4 130.3 200.9 134.2 202.2-.6 3.2-20.7 71.9-68.7 141.9-42.8 61.6-87.5 123.1-155.5 123.1s-85.5-39.5-164-39.5c-76.5 0-103.7 40.8-165.9 40.8s-105.6-57-155.5-127C46.7 790.7 0 663 0 541.8c0-194.4 126.4-297.5 250.8-297.5 66.1 0 121.2 43.4 162.7 43.4 39.5 0 101.1-46 176.3-46 28.5 0 130.9 2.6 198.3 99.2zm-234-181.5c31.1-36.9 53.1-88.1 53.1-139.3 0-7.1-.6-14.3-1.9-20.1-50.6 1.9-110.8 33.7-147.1 75.8-28.5 32.4-55.1 83.6-55.1 135.5 0 7.8 1.3 15.6 1.9 18.1 3.2.6 8.4 1.3 13.6 1.3 45.4 0 102.5-30.4 135.5-71.3z'/%3E%3C/svg%3E") center/contain no-repeat} .dpg-scr__azure::before{content:"";width:20px;height:20px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 21'%3E%3Crect x='1' y='1' width='9' height='9' fill='%23f25022'/%3E%3Crect x='11' y='1' width='9' height='9' fill='%237fba00'/%3E%3Crect x='1' y='11' width='9' height='9' fill='%2300a4ef'/%3E%3Crect x='11' y='11' width='9' height='9' fill='%23ffb900'/%3E%3C/svg%3E") center/contain no-repeat} /* LINE（ブランドの緑 #06C755 に白の文字） */ .dpg-scr .cloud-button.dpg-scr__line{background:#06c755;border-color:#06c755;color:#fff} .dpg-scr .cloud-button.dpg-scr__line:hover{background:#05b34c} .dpg-scr .cloud-button.dpg-scr__apple:disabled,.dpg-scr .cloud-button.dpg-scr__line:disabled{opacity:.55} /* マイページの「ログインの方法」（今つながっている方法の札と、メールの無いログインの人への案内） */ .dpg-scr__identities{list-style:none;margin:10px 0 14px;padding:0;display:flex;flex-wrap:wrap;gap:8px} .dpg-scr__identities li{padding:6px 12px;border:1px solid var(--scr-line);border-radius:999px;background:var(--scr-surface-2);font-size:14px;font-weight:700;overflow-wrap:anywhere} .dpg-scr .cloud-note.dpg-scr__email-notice{margin:0 0 14px;padding:10px 14px;border-radius:12px;background:#fff8e6;color:var(--scr-text)} .dpg-scr__or{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--scr-muted);font-size:13px} .dpg-scr__or::before,.dpg-scr__or::after{content:"";flex:1;height:1px;background:var(--scr-line-strong)} .dpg-scr [hidden]+.dpg-scr__note-google+.dpg-scr__or,.dpg-scr .dpg-scr__providers[hidden]~.dpg-scr__or{display:none} /* 注意の枠（黄色の帯ではなく、紙色の小さなカード） */ .dpg-scr .cloud-caution{max-width:none;margin:0;padding:18px 22px;border:1px solid var(--scr-line);border-left:5px solid #e3a33a;border-radius:16px;background:#fffaf0} .dpg-scr .cloud-caution h2,.dpg-scr .cloud-caution h3{margin:0 0 6px;font-size:16px;font-weight:800} .dpg-scr .cloud-caution p{margin:0 0 6px;font-size:14px;color:var(--scr-muted);line-height:1.7} /* 見出しのステップ（招待の初回設定） */ .dpg-scr__steps{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:10px;counter-reset:step} .dpg-scr__steps li{counter-increment:step;display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.55;color:var(--scr-muted)} .dpg-scr__steps li b{display:block;color:var(--scr-text)} .dpg-scr__steps li::before{content:counter(step);flex:none;width:30px;height:30px;border-radius:50%;background:var(--scr-accent-soft);color:var(--scr-accent-ink);font-weight:900;display:flex;align-items:center;justify-content:center;font-size:15px} /* ============ ログイン（account.html） ============ */ .dpg-scr--account .dpg-scr__art{width:210px} .dpg-scr__hub a>span{min-width:0} #cloud-login-panel,#cloud-signed-in-panel,#cloud-sync-panel,#account-rank-onboarding{border-top:1px solid var(--scr-line)} .dpg-scr__signed-email{margin:-4px 0 16px!important;color:var(--scr-muted);font-weight:700;overflow-wrap:anywhere} .dpg-scr__hub{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:10px} .dpg-scr__hub a{display:grid;grid-template-columns:48px minmax(0,1fr) 16px;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--scr-line);border-radius:16px;background:#fff;color:var(--scr-text);text-decoration:none;font-weight:800;line-height:1.4} .dpg-scr__hub a:hover{border-color:var(--scr-accent-line);background:#fdfbff} .dpg-scr__hub a::before{content:"";width:48px;height:48px;border-radius:14px;background:var(--ico) center/26px 26px no-repeat,var(--tint,var(--scr-accent-soft))} .dpg-scr__hub a::after{content:"";width:10px;height:10px;border-top:2.5px solid var(--scr-accent);border-right:2.5px solid var(--scr-accent);transform:rotate(45deg)} .dpg-scr__hub small{display:block;font-weight:500;font-size:13px;color:var(--scr-muted);margin-top:2px} .dpg-scr__hub .dpg-scr__perk--device,.dpg-scr__hub .dpg-scr__perk--rank,.dpg-scr__hub .dpg-scr__perk--story{--x:0} #cloud-signout{margin-top:14px;width:100%} /* ============ 招待された問題集・非公開の問題集（access.html / private-study.html） ============ */ .dpg-scr .access-card{margin:0;padding:24px 26px;background:#fff;border:1px solid var(--scr-line);border-radius:24px;box-shadow:var(--scr-shadow)} .dpg-scr .access-card h2{margin:0 0 10px;font-size:20px} .dpg-scr .access-card button,.dpg-scr #study-next{min-height:52px;padding:10px 22px;border:0;border-radius:14px;background:var(--scr-grad);color:#fff;font:inherit;font-weight:800;box-shadow:0 3px 0 #4215a8;cursor:pointer} .dpg-scr .access-card button:disabled{background:#f1eeea;color:#65594d;box-shadow:none} .dpg-scr .access-note{font-size:14px;color:var(--scr-muted);margin-top:12px} .dpg-scr #access-status,.dpg-scr #study-status{padding:12px 16px;border-radius:14px;background:var(--scr-surface-2);font-weight:700;margin:0} .dpg-scr .access-wait{display:none!important} .dpg-scr #access-decks{margin:0;padding-left:1.2em;color:var(--scr-muted)} /* ============ 契約の確認（subscription.html） ============ */ .dpg-scr--sub{grid-template-columns:minmax(0,1fr) minmax(0,560px)} .dpg-scr--sub #status{margin:0;padding:22px 24px 22px 92px;border-radius:20px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='24' fill='%23f3edff'/%3E%3Cpath d='M14 18h20v14H14z' fill='none' stroke='%236535b5' stroke-width='2.6' stroke-linejoin='round'/%3E%3Cpath d='M14 23h20' stroke='%236535b5' stroke-width='2.6'/%3E%3Cpath d='M18 28h6' stroke='%236535b5' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") 24px center/52px 52px no-repeat;border:1.5px solid var(--scr-accent-line);font-size:20px;font-weight:900;line-height:1.5;color:var(--scr-accent-ink);box-shadow:var(--scr-shadow)} .dpg-scr__plans{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px} .dpg-scr__plans li{padding:14px 12px;border:1px solid var(--scr-line);border-radius:16px;background:#fff;font-size:14px;line-height:1.5;color:var(--scr-muted)} .dpg-scr__plans b{display:block;font-size:18px;color:var(--scr-text);margin-bottom:2px} .dpg-scr__plans li:nth-child(3){border-color:var(--scr-accent-line);background:#fdfbff} .dpg-scr__plans li:nth-child(3) b{color:var(--scr-accent-ink)} .dpg-scr--sub .dpg-scr__small{font-size:14px;color:var(--scr-muted);margin:14px 0 0;line-height:1.75} .dpg-scr--sub .dpg-scr__card{padding:24px 26px} .dpg-scr--sub label{display:block;margin:12px 0 0;font-weight:800;font-size:15px} .dpg-scr--sub input{display:block} .dpg-scr--sub button{min-height:50px;padding:10px 20px;margin:12px 10px 0 0;border:1.5px solid var(--scr-control);border-radius:14px;background:#fff;color:var(--scr-text);font:inherit;font-weight:800;cursor:pointer;max-width:100%} .dpg-scr--sub button[type=submit],.dpg-scr--sub #manage:not(:disabled),.dpg-scr--sub #account-refresh,.dpg-scr--sub #purchase-google-login,.dpg-scr--sub #account-google-login{border-color:transparent;background:var(--scr-grad);color:#fff;box-shadow:0 3px 0 #4215a8} .dpg-scr--sub button:disabled{background:#f1eeea;border-color:#e5dcd2;color:#65594d;box-shadow:none;cursor:default} .dpg-scr--sub #manage{width:100%;margin:0} .dpg-scr--sub #account-panel>p,.dpg-scr--sub #restore>p,.dpg-scr--sub #receipt-view>p{font-size:14px;color:var(--scr-muted);line-height:1.75} .dpg-scr--sub #account-status:empty,.dpg-scr--sub #receipt-status:empty,.dpg-scr--sub #purchase-status:empty{display:none} .dpg-scr--sub #account-status:not(:empty){padding:10px 14px;border-radius:12px;background:var(--scr-surface-2);font-weight:700} .dpg-scr--sub #account-signed-in{padding:14px 16px;border-radius:16px;background:var(--scr-accent-soft)} .dpg-scr--sub #account-signed-in p{margin:0} .dpg-scr--sub #account-signed-in button{margin-top:10px} .dpg-scr--sub #device-limit,.dpg-scr--sub #purchase-login,.dpg-scr--sub #rejoin{margin:0;padding:22px 24px;border-radius:20px;background:#fff;border:1.5px solid var(--scr-accent-line)} .dpg-scr--sub #device-limit h2,.dpg-scr--sub #purchase-login h2,.dpg-scr--sub #rejoin h2{margin:0 0 8px;font-size:18px} .dpg-scr--sub #device-list{list-style:none;margin:10px 0 0;padding:0} .dpg-scr--sub #device-list li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;padding:12px 0;border-top:1px solid var(--scr-line)} .dpg-scr--sub #device-list li:first-child{border-top:0} .dpg-scr--sub .device-info{display:flex;flex-direction:column} .dpg-scr--sub .device-label{font-weight:800}.dpg-scr--sub .device-meta{font-size:13px;color:var(--scr-muted)}.dpg-scr--sub .device-current{color:var(--scr-accent);font-weight:800} .dpg-scr--sub #device-list button{margin:0} .dpg-scr--sub details{margin:0;padding:0 4px} .dpg-scr--sub summary{cursor:pointer;font-weight:800;color:var(--scr-accent);padding:8px 0} .dpg-scr--sub #receipt-url{padding:12px;border:1px solid var(--scr-line);border-radius:12px;background:var(--scr-surface-2);font-weight:700;user-select:all;overflow-wrap:anywhere} .dpg-scr--sub .restore-actions{display:flex;flex-wrap:wrap;gap:0 10px} .dpg-scr--sub [role=status]:not(#status){min-height:0} .dpg-scr__manage-note{margin:8px 0 0;font-size:14px;color:var(--scr-muted);text-align:center} /* ============ ライセンスコード（claim.html） ============ */ .dpg-scr--claim .dpg-card,.dpg-scr--claim .qz-card{margin:0;padding:22px 24px;background:#fff;border:1px solid var(--scr-line);border-radius:24px;box-shadow:var(--scr-shadow)} .dpg-scr--claim .dpg-scr__notice{margin:0;padding:16px 20px;border-radius:16px;background:var(--scr-accent-soft);border:1px solid var(--scr-accent-line);font-weight:700;color:var(--scr-accent-ink);line-height:1.7} .dpg-scr--claim .qz-setup__label{margin:0 0 6px;font-weight:800;font-size:17px} .dpg-scr--claim .dpg-note{font-size:14px;color:var(--scr-muted);margin:6px 0 0} .dpg-scr--claim .dpg-lead{font-weight:800;margin:0} .dpg-scr--claim .qz-btn{min-height:50px;border-radius:14px;font-weight:800} .dpg-scr--claim .qz-btn--primary{background:var(--scr-grad);border-color:transparent;color:#fff;box-shadow:0 3px 0 #4215a8} .dpg-scr--claim .dpg-stack{display:flex;flex-direction:column;gap:10px} /* ============ 404 ============ */ .dpg-scr--404 .dpg-scr__card ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px} .dpg-scr--404 .dpg-scr__card li{padding:14px 16px;border:1px solid var(--scr-line);border-radius:16px;font-size:14px;color:var(--scr-muted);line-height:1.6} .dpg-scr--404 .dpg-scr__card li a{display:block;font-size:16px;font-weight:800;color:var(--scr-accent);text-decoration:none;margin-bottom:2px} .dpg-scr--404 .dpg-scr__card li a::after{content:" ›"} .dpg-scr__back{display:inline-flex;align-items:center;min-height:44px;font-weight:800;color:var(--scr-accent);text-decoration:none} /* ============ 狭い幅 ============ */ @media(max-width:900px){ .dpg-scr,.dpg-scr--sub{grid-template-columns:minmax(0,1fr);grid-template-areas:"hero" "panel" "foot";column-gap:0;row-gap:20px;padding:24px 16px 48px} .dpg-scr h1{font-size:32px} .dpg-scr__hero{padding-right:124px;min-height:150px} .dpg-scr .dpg-scr__art,.dpg-scr--account .dpg-scr__art{position:absolute;right:-6px;top:0;width:124px;margin:0} .dpg-scr__hero--art-right{padding-right:132px;min-height:150px} .dpg-scr__hero--art-right .dpg-scr__art{width:130px} .dpg-scr__perks{margin-right:-124px;gap:8px} .dpg-scr__perks li{padding:12px 6px 10px;font-size:13px} .dpg-scr__perks li::before{width:42px;height:42px;background-size:22px 22px,auto} .dpg-scr__card,.dpg-scr section.dpg-scr__card{padding:20px 18px;border-radius:20px} .dpg-scr__plans{grid-template-columns:minmax(0,1fr)} .dpg-scr--sub #status{font-size:18px;padding:18px 18px 18px 80px;background-position:18px center;background-size:46px 46px} } @media(max-width:420px){ .dpg-scr h1{font-size:30px} .dpg-scr__lead{font-size:15px} } @media(prefers-reduced-motion:reduce){.dpg-scr *{transition:none!important;animation:none!important}} .dpg-scr__card .cloud-note+.cloud-button{margin-top:16px} .dpg-scr__card .cloud-button+.cloud-button{margin-top:10px} .dpg-scr__card--done{border-color:#cfe6d4;background:#fbfffb} .dpg-scr .cloud-field small{font-size:13px;color:var(--scr-muted);font-weight:400} /* 契約の確認：subscription-page.css の main・button・a の既定を、この画面の中だけ打ち消す */ main.dpg-scr--sub{max-width:1120px;margin:0 auto;background:none;border:0;border-radius:0;box-shadow:none} .dpg-scr--sub h1{font-size:40px;line-height:1.3} .dpg-scr--sub h2{margin:0 0 10px;font-size:19px;line-height:1.5} .dpg-scr--sub p{margin:0 0 10px} .dpg-scr--sub a{min-height:0;display:inline} .dpg-scr--sub a.dpg-scr__back{display:inline-flex;min-height:44px} .dpg-scr__more{padding:18px 24px!important} .dpg-scr__more[open]>summary{margin-bottom:10px} /* 2026-10-18 区間13 FIX: 押す所を 44px 以上に（「購入完了URLで復元する・控えを見る」は 43px、「Microsoft・LINEでログインする」の1行だけのリンクは 17px だった）。字は 14px に（前は 13px のプランの札・注） */ .dpg-scr__more>summary{box-sizing:border-box;min-height:44px} .dpg-scr--sub #account-panel>p>a[href^="account.html"],.dpg-scr--sub #account-open-safari>a{display:inline-flex;align-items:center;min-height:44px} .dpg-scr__more #restore,.dpg-scr__more #receipt-view{margin:0 0 16px} .dpg-scr__manage{display:flex;flex-direction:column} @media(max-width:900px){.dpg-scr--sub h1{font-size:30px}.dpg-scr--sub button{width:100%;margin:10px 0 0}.dpg-scr__more{padding:16px 18px!important}} .dpg-scr--study #study-status{margin-top:8px} .dpg-scr--study h1{font-size:34px} .dpg-scr--study #study-options button{background:#fff;color:var(--scr-text);border:1.5px solid var(--scr-line-strong);box-shadow:none;text-align:left} .dpg-scr--study #study-options button[aria-pressed="true"]{background:var(--scr-accent-soft);border-color:var(--scr-accent)} .dpg-scr--study #study-next{margin-top:16px} /* 404：head の