/* ■ マイページ（専用。カード・契約の一覧・商品カードは お申し込みの画面の部品を使う） */
.page-mypage{background:var(--mist)}

/* ◆ 全体（左メニュー＋内容） */
.mypage-shell{display:grid;grid-template-columns:240px minmax(0,1fr);min-height:calc(100vh - var(--header-h))}
.mypage-sidebar{position:sticky;top:var(--header-h);align-self:start;height:calc(100vh - var(--header-h));overflow-y:auto;padding:34px 20px;background:#fff;border-right:1px solid var(--line)}
.mypage-sidebar>.eyebrow{margin:0 0 3px 12px}
.mypage-sidebar h2{margin:0 12px 20px;font:500 var(--fs-h3-m)/1.5 var(--font-display);color:var(--navy)}
.mypage-sidebar__toggle{display:none}
.mypage-navigation{display:grid;gap:4px}
.mypage-navigation a{display:flex;align-items:center;gap:13px;min-height:44px;padding:8px 13px;border-radius:9px;color:var(--muted);font-size:var(--fs-md)}
.mypage-navigation a>span{width:17px;text-align:center;font-size:var(--fs-lg)}
.mypage-navigation a:hover,.mypage-navigation a.is-active{background:var(--cream);color:var(--navy);font-weight:700}
.mypage-navigation a.is-active>span{color:var(--gold-dark)}
.mypage-navigation form{margin:16px 8px 0;padding-top:12px;border-top:1px solid var(--line)}
.mypage-sidebar__logout{padding:8px 5px;border:0;background:transparent;color:var(--muted);font:inherit;font-size:var(--fs-md);cursor:pointer}
.mypage-content{min-width:0;padding:24px var(--space-x) 40px}
.admin-viewas{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 16px;margin:0 0 16px;padding:12px 18px;border:1px solid var(--gold-line);border-radius:8px;background:var(--cream);font-size:var(--fs-md)}
.admin-viewas .text-link{margin:0}
.mypage-breadcrumb{max-width:none;margin:0 0 16px;font-size:var(--fs-sm)}

/* ◆ 見出しの帯 */
.mypage-welcome{position:relative;overflow:hidden;margin:0 0 26px;padding:30px 38px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(105deg,#fff 5%,var(--paper) 53%,var(--cream) 100%);box-shadow:0 14px 30px rgba(44,47,43,.06)}
.mypage-welcome::after{position:absolute;right:36px;top:-80px;width:240px;height:240px;border:1px solid var(--gold-line);border-radius:50%;opacity:.5;content:""}
.mypage-welcome .eyebrow{margin:0 0 9px}
.mypage-welcome h1{position:relative;z-index:1;margin:0 0 8px;color:var(--navy);font:500 var(--fs-h2-s)/1.55 var(--font-display);letter-spacing:.04em}
.mypage-welcome__name{display:inline-block;max-width:100%}
.mypage-welcome>p:not(.eyebrow){margin:0;color:var(--muted);font-size:var(--fs-md)}
.mypage-section__title{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:0 0 14px}
.mypage-section__title>div{display:flex;align-items:baseline;gap:12px}
.mypage-section__title h2{margin:0;color:var(--navy);font:500 var(--fs-h3-m)/1.4 var(--font-display)}
.mypage-section__title .eyebrow{margin:0;letter-spacing:.17em}
.mypage-section__date{margin:0;color:var(--muted);font-size:var(--fs-sm)}
.mypage-orders{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.mypage-orders a{padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:var(--fs-md)}
.mypage-orders a[aria-current]{border-color:var(--gold);background:var(--cream)}

/* ◆ カードの並び */
.mypage-dashboard{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(300px,.9fr);gap:16px;align-items:start}
.mypage-dashboard__main,.mypage-dashboard__side{display:grid;gap:16px;min-width:0}
.mypage-product-card{margin:0}
.mypage-news-card .news-compact li{grid-template-columns:minmax(0,1fr);padding:12px 0}
.mypage-news-card .text-link{margin:12px 0 0}
.mypage-card{min-width:0;scroll-margin-top:calc(var(--header-h) + 16px)}
.mypage-card__heading{margin-bottom:10px}
.mypage-card__heading>h3::before,.mypage-card__kicker::before{display:inline-block;width:3px;height:16px;margin-right:9px;background:var(--gold-mid);vertical-align:-2px;content:""}
.mypage-card__kicker{margin:0 0 5px;color:var(--navy);font-size:var(--fs-md);font-weight:700}
.mypage-card__heading .text-link{margin:0;flex:none}
.mypage-materials-status .text-link{display:inline-block;margin:0}
.mypage-status{flex:none;padding:6px 12px;border:1px solid color-mix(in srgb,var(--ok) 25%,#fff);border-radius:999px;background:color-mix(in srgb,var(--ok) 8%,#fff);color:var(--ok);font-size:var(--fs-sm)}

/* ◆ 制作の進捗 */
.mypage-progress-card__lead{margin:0;color:var(--muted);font-size:var(--fs-md)}
.mypage-timeline{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));position:relative;gap:0;margin:18px 0 20px;padding:0;list-style:none}
.mypage-timeline::before{position:absolute;top:17px;left:8%;right:8%;height:1px;background:var(--line);content:""}
.mypage-timeline li{position:relative;display:flex;min-width:0;flex-direction:column;align-items:center;gap:6px;text-align:center;color:var(--muted)}
.mypage-timeline li>span{z-index:1;display:grid;width:34px;height:34px;place-items:center;border:1px solid var(--line);border-radius:50%;background:var(--paper);font:500 var(--fs-md) var(--font-display)}
.mypage-timeline li b{max-width:95px;font-size:var(--fs-sm);font-weight:500;line-height:1.5}
.mypage-timeline li small{font-size:var(--fs-sm)}
.mypage-timeline li.is-done>span{border-color:var(--gold-mid);background:var(--gold-mid);color:#fff}
.mypage-timeline li[aria-current=step]{color:var(--navy)}
.mypage-timeline li[aria-current=step]>span{border:3px solid var(--line);background:var(--navy);color:#fff;font-weight:700}
.mypage-next-action{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:12px;align-items:center;padding:15px;border:1px solid var(--line);border-radius:10px;background:var(--cream)}
.mypage-next-action__icon{display:grid;width:42px;height:42px;place-items:center;border-radius:8px;background:#fff;color:var(--gold-mid);font-size:var(--fs-h3-m)}
.mypage-next-action h4{margin:0 0 4px;color:var(--navy);font-size:var(--fs-md)}
.mypage-next-action p{margin:0;color:var(--muted);font-size:var(--fs-md);line-height:1.7}

/* ◆ ご契約中のテンプレート */
.mypage-product-card{grid-template-columns:130px minmax(0,1fr)}
.mypage-product-card>img{width:130px}
.mypage-product-card .purchase-template-card__body h4{font-size:var(--fs-h3-l)}
.mypage-product-card__tag{display:inline-block;margin:6px 0 8px;padding:5px 12px;border-radius:999px;background:var(--cream);color:var(--ink-soft);font-size:var(--fs-sm);font-weight:700}
.purchase-template-card__body .text-link{margin:10px 0 0}

/* ◆ ヒアリングのご回答 */
.mypage-hearing-status{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.mypage-hearing-status article{padding:14px;border:1px solid var(--line);border-radius:8px}
.mypage-hearing-status p{margin:0 0 5px;color:var(--muted);font-size:var(--fs-sm)}
.mypage-hearing-status strong{display:block;color:var(--navy);font-size:var(--fs-md)}
.mypage-hearing-status small{display:block;margin-top:4px;color:var(--muted);font-size:var(--fs-sm);line-height:1.6}
.mypage-materials-status{margin:12px 0 0;font-size:var(--fs-md)}
.mypage-materials-status strong{margin-right:10px;color:var(--navy)}
.mypage-hearing-note{margin:12px 0 0;padding:10px 12px;border-left:3px solid var(--gold-line);background:var(--mist);color:var(--muted);font-size:var(--fs-md);line-height:1.8}

/* ◆ お支払い情報 */
.mypage-year-select{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:var(--fs-sm)}
.mypage-year-select select{min-height:32px;padding:4px 24px 4px 8px;border:1px solid var(--line);border-radius:4px;background:#fff;color:var(--muted);font:inherit}
.mypage-payment-highlight{display:flex;gap:14px;align-items:center;margin:0 0 12px;padding:13px 15px;border-radius:8px;background:var(--mist)}
.mypage-payment-highlight>span{color:var(--gold-mid);font-size:var(--fs-h3-l)}
.mypage-payment-highlight>div{display:grid;gap:1px}
.mypage-payment-highlight small{color:var(--muted);font-size:var(--fs-sm)}
.mypage-payment-highlight strong{color:var(--navy);font:500 var(--fs-h3-l)/1.35 var(--font-display)}
.mypage-payment-highlight p{margin:0;color:var(--muted);font-size:var(--fs-sm)}
.mypage-table-wrap{overflow-x:auto}
.mypage-payment-table{width:100%;border-collapse:collapse;text-align:left;font-size:var(--fs-md)}
.mypage-payment-table th{padding:8px;color:var(--muted);background:var(--mist);font-weight:500;white-space:nowrap}
.mypage-payment-table td{padding:10px 8px;border-bottom:1px solid var(--line);color:var(--ink-soft);white-space:nowrap}
.mypage-payment-table td:last-child{color:var(--ok);font-weight:700}
.mypage-payment-table tr[hidden]{display:none}
.mypage-ending-card{margin:0 0 16px}
.mypage-ending-card .button{display:flex;width:fit-content;margin:20px auto 0}
.mypage-ending-next{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 22px;margin:24px 0 0;padding-top:18px;border-top:1px solid var(--line)}
.mypage-ending-next p{flex-basis:100%;margin:0;color:var(--navy);font-weight:700}
.mypage-ending-next .text-link{margin:0}
.mypage-ending-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;margin:16px 0}
.mypage-ending-price small{flex-basis:100%;color:var(--muted);font-size:var(--fs-sm)}
.mypage-ending-price strong{color:var(--navy);font:500 var(--fs-h3-m) var(--font-display)}
.mypage-ending-price span{color:var(--muted);font-size:var(--fs-sm)}
.mypage-payment-note,.mypage-contract-note,.mypage-account-card>p{margin:11px 0 0;color:var(--muted);font-size:var(--fs-sm);line-height:1.75}

/* ◆ 公開サイト */
.mypage-site-placeholder{display:flex;gap:14px;align-items:center;padding:14px;border:1px solid var(--line);border-radius:8px;background:var(--paper)}
.mypage-site-placeholder>span{display:grid;width:52px;height:48px;flex:none;place-items:center;border-radius:7px;background:var(--cream);color:var(--gold-mid);font-size:var(--fs-h3-m)}
.mypage-site-placeholder strong{color:var(--navy);font-size:var(--fs-md)}
.mypage-site-placeholder p{margin:4px 0 0;color:var(--muted);font-size:var(--fs-sm);line-height:1.7}

/* ◆ ご契約・更新／アカウント */
.mypage-contract-card .purchase-summary__details{margin-top:0}
.mypage-contract-card .purchase-summary__details>div{padding:10px 0;font-size:var(--fs-md)}
.mypage-contract-card .purchase-summary__details dt{max-width:53%}
.mypage-contract-card .purchase-summary__details dd{overflow-wrap:anywhere}
.mypage-account-details{margin:0}
.mypage-account-details dt{color:var(--muted);font-size:var(--fs-sm)}
.mypage-account-details dd{margin:3px 0 0;color:var(--navy);font-size:var(--fs-md);font-weight:700;overflow-wrap:anywhere}


/* ◆ ログイン前（タイトル帯の背景は、フォーム部分と同じにする） */
.page-mypage .list-hero{background:none}
.mypage-login-done{display:grid;gap:14px}
.mypage-login-done h2{margin:0;font:500 var(--fs-h3-l)/1.5 var(--font-display)}
.mypage-login-done p{margin:0;line-height:1.9}