/* /settings#upgrade の選択欄・料金カード・比較表と同じスタイルを適用する。 */
.contract-main { grid-template-columns:minmax(0,1fr); gap:0; color:#172b46; }
.contract-main .contract-head { width:100%; margin:0 0 22px; text-align:left; }
.contract-main .contract-head h1 { margin:0; color:#193453; font-size:clamp(1.7rem,3vw,2.2rem); }
.contract-main .grade-picker { display:grid; grid-template-columns:minmax(0,1fr); justify-items:start; gap:10px; margin:0 0 26px; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; }
.contract-main .grade-picker label { color:#193453; font-weight:800; }
.contract-main .grade-picker select { width:min(100%,300px); min-width:0; padding:12px 40px 12px 16px; border:1px solid #b8c7d8; border-radius:9px; background:#f6f9fc; color:#193d6b; text-align:left; text-align-last:left; font-weight:700; }
.contract-main .grade-picker-note { margin:0; color:#62738a; font-size:.8rem; line-height:1.6; }
.contract-main .plan-section-heading { display:flex; align-items:end; justify-content:space-between; gap:16px; margin:0 0 24px; }
.contract-main .plan-section-heading span { color:#806538; font-size:.76rem; font-weight:800; letter-spacing:.1em; }
.contract-main .plan-section-heading h2 { margin:6px 0 0; color:#193453; font-size:clamp(1.2rem,2vw,1.55rem); line-height:1.5; }
.contract-main .upgrade-mobile-compare { display:none; }
.contract-main .plan-section-heading a { padding:0; border:0; background:none; color:#31587f; font:inherit; font-size:.85rem; white-space:nowrap; text-decoration:underline; text-underline-offset:5px; cursor:pointer; }

.contract-main .plan-grid { width:100%; min-width:0; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.contract-main .plan-card { position:relative; gap:15px; padding:28px 24px 22px; border:1px solid #d8e0e9; border-radius:20px; background:#fff; box-shadow:0 12px 28px #152d4a0a; }
.contract-main .plan-card.featured-plan { transform:none; border-color:#bca26c; background:linear-gradient(155deg,#fffdf8,#fff); box-shadow:0 12px 28px #8f723714; }
.contract-main .plan-card.featured-plan::before { content:none; }
.contract-main .plan-audience { color:#62738a; font-size:.78rem; font-weight:700; }
.contract-main .featured-plan .plan-audience { color:#806538; }
.contract-main .plan-card h3 { display:block; min-height:0; margin:0; color:#193453; font-size:clamp(1.1rem,1.65vw,1.4rem); line-height:1.5; text-align:left; }
.contract-main .plan-grade-label { margin-right:.16em; color:#806538; font-size:.82em; white-space:nowrap; }
.contract-main .plan-card > p { display:block; min-height:6.9em; margin:0; overflow:visible; color:#5a687b; font-size:.88rem; line-height:1.75; }
.contract-main .plan-price { display:block; min-height:116px; padding:18px 16px; border:1px solid #e2e8ef; border-radius:12px; background:#f4f7fb; }
.contract-main .featured-plan .plan-price { border-color:#e9dfca; background:#f8f4ea; }
.contract-main .plan-price strong { display:block; color:#193d6b; font-size:clamp(1.5rem,2.2vw,1.95rem); line-height:1.4; letter-spacing:-.02em; }
.contract-main .plan-price span { display:block; margin-top:6px; color:#536176; font-size:.78rem; font-weight:400; line-height:1.7; }
.contract-main .plan-price span:empty { display:none; }
.contract-main .plan-price .plan-discount { margin-top:9px; padding-top:8px; border-top:1px solid #dbe4ee; color:#31587f; font-size:.72rem; font-weight:700; line-height:1.55; }
.contract-main .featured-plan .plan-price .plan-discount { border-color:#e5d8bd; color:#806538; }
.contract-main .plan-includes { display:grid; gap:9px; list-style:none; margin:0; padding:2px 0 10px; color:#3c506a; font-size:.83rem; line-height:1.7; }
.contract-main .plan-includes li { position:relative; padding-left:24px; }
.contract-main .plan-includes li::before { content:"✓"; position:absolute; left:0; color:#376b67; font-weight:800; }
.contract-main .plan-actions { grid-template-rows:none; gap:10px; align-content:normal; }
.contract-main .contract-btn { width:100%; min-height:49px; padding:12px 10px; border:1px solid #294e79; border-radius:10px; background:#fff; color:#24486f; font-size:.88rem; line-height:1.5; }
.contract-main .plan-card:nth-child(2) .contract-btn { background:#eaf0f8; }
.contract-main .featured-plan .contract-btn { background:#193d6b; color:#fff; box-shadow:0 8px 16px #193d6b24; }
.contract-main .contract-btn:disabled,.contract-main .contract-btn.is-disabled { border-color:#d5dce5; background:#edf0f4; color:#64748b; box-shadow:none; }
.contract-main .muted { min-height:2.8em; color:#66758a; font-size:.75rem; font-weight:400; line-height:1.6; }

.contract-main .plan-compare { min-width:0; margin-top:48px; padding:40px 28px; border:0; border-block:1px solid #dae4e8; border-radius:0; background:#f1f5f5; box-shadow:none; }
.contract-main .plan-compare-head { margin:0 0 20px; text-align:left; }
.contract-main .plan-compare-head h2 { color:#193453; font-size:1.5rem; line-height:1.5; }
.contract-main .plan-compare-scroll-hint { display:none; }
.contract-main .plan-compare-box { overflow-x:auto; border:1px solid #dce3eb; border-radius:12px; }
.contract-main .plan-compare-scrollbar { display:none; }
.contract-main .plan-compare-table { width:100%; min-width:740px; table-layout:fixed; }
.contract-main .plan-compare-table th,.contract-main .plan-compare-table td { padding:18px; border-right:0; border-bottom:1px solid #e3e8ed; text-align:center; vertical-align:middle; font-size:.9rem; line-height:1.6; }
.contract-main .plan-compare-table thead th { background:#eff3f7; color:#274564; font-weight:800; }
.contract-main .plan-compare-table thead th:first-child { width:34%; text-align:left; }
.contract-main .plan-compare-table thead th:last-child { background:#193d6b; color:#fff; }
.contract-main .plan-compare-table tbody th { background:#fff; color:#253f5d; text-align:left; font-weight:700; }
.contract-main .plan-compare-table tbody th small { display:block; margin-top:5px; color:#65748a; font-size:.78rem; font-weight:400; }
.contract-main .plan-compare-table tbody td:last-child { background:#f5f8fc; }
.contract-main .plan-compare-table tbody tr:last-child > * { border-bottom:0; }
.contract-main .plan-symbol { width:32px; height:32px; border-radius:50%; }
.contract-main .plan-symbol.yes { color:#28655a; background:#e6f2ec; }
.contract-main .plan-symbol.no { color:#8995a4; background:none; }
.contract-main .plan-cell-benefit { display:block; margin:8px auto 0; color:#355576; font-size:.78rem; font-weight:600; line-height:1.7; }

@media(max-width:900px) {
  .contract-main .plan-grid { gap:12px; }
  .contract-main .plan-card { padding:24px 16px 18px; }
  .contract-main .plan-card > p { min-height:8.8em; }
  .contract-main .plan-price { min-height:130px; padding:14px 10px; }
}
@media(min-width:901px) and (max-width:1240px) {
  .contract-main .plan-grid { gap:12px; }
  .contract-main .plan-card { padding:22px 16px 18px; }
  .contract-main .plan-price { padding:14px 12px; }
  .contract-main .plan-price strong { font-size:1.55rem; }
}
@media(max-width:700px) {
  .contract-main > .contract-head { margin-bottom:22px; }
  .contract-main .grade-picker { gap:9px; margin-bottom:22px; }
  .contract-main .grade-picker label { font-size:.84rem; text-align:left; }
  .contract-main .grade-picker select { width:100%; }
  .contract-main .plan-section-heading { display:none; }
  .contract-main .upgrade-mobile-compare { display:block; justify-self:start; margin:20px 0 0; padding:0; border:0; background:transparent; color:#31587f; font:inherit; font-size:.86rem; text-decoration:underline; text-underline-offset:5px; cursor:pointer; }
  .contract-main .plan-grid { grid-template-columns:1fr; gap:0; overflow:hidden; border:1px solid #d8e0e9; border-radius:18px; background:#fff; box-shadow:0 12px 28px #152d4a0a; }
  .contract-main .plan-card,.contract-main .plan-card.featured-plan { padding:26px 20px; gap:14px; border:0; border-bottom:4px solid #9b7a45; border-radius:0; background:transparent; box-shadow:none; transform:none; }
  .contract-main .plan-card:last-child { border-bottom:0; }
  .contract-main .plan-card h3 { font-size:1.35rem; }
  .contract-main .plan-card > p { min-height:0; font-size:.9rem; }
  .contract-main .plan-price,.contract-main .featured-plan .plan-price { min-height:0; padding:10px 0; border:0; border-radius:0; background:transparent; }
  .contract-main .plan-price strong { font-size:1.8rem; }
  .contract-main .plan-price span { font-size:.82rem; }
  .contract-main .muted:empty { display:none; }
  .contract-main .muted { min-height:0; }
  .contract-main .plan-compare { width:calc(100% + 24px); margin:36px 0 0 -12px; padding:32px 12px; }
  .contract-main .plan-compare-head h2 { font-size:1.3rem; }
  .contract-main .plan-compare-scroll-hint { display:block; margin:0 0 10px; color:#65748a; font-size:.76rem; }
  .contract-main .plan-compare-box { border-color:#c5d5de; border-radius:8px; scrollbar-width:none; }
  .contract-main .plan-compare-box::-webkit-scrollbar { display:none; }
  .contract-main .plan-compare-scrollbar:not([hidden]) { display:block; width:calc(100% - 125px); height:18px; margin:10px 0 0 125px; appearance:none; background:transparent; cursor:ew-resize; }
  .contract-main .plan-compare-scrollbar::-webkit-slider-runnable-track { height:6px; border-radius:999px; background:#c5d5de; }
  .contract-main .plan-compare-scrollbar::-webkit-slider-thumb { width:52px; height:14px; margin-top:-4px; appearance:none; border:0; border-radius:999px; background:#496b80; }
  .contract-main .plan-compare-scrollbar::-moz-range-track { height:6px; border-radius:999px; background:#c5d5de; }
  .contract-main .plan-compare-scrollbar::-moz-range-thumb { width:52px; height:14px; border:0; border-radius:999px; background:#496b80; }
  .contract-main .plan-compare-scrollbar:focus-visible { outline:2px solid #193d6b; outline-offset:3px; }
  .contract-main .plan-compare-table { width:max(100%,530px); min-width:530px; border-collapse:separate; border-spacing:0; }
  .contract-main .plan-compare-table th,.contract-main .plan-compare-table td { padding:13px 10px; border-right:1px solid #d1dde4; border-bottom:1px solid #d1dde4; font-size:.78rem; line-height:1.5; }
  .contract-main .plan-compare-table tr > :last-child { border-right:0; }
  .contract-main .plan-compare-table thead th,.contract-main .plan-compare-table thead th:last-child { background:#17394b; color:#fff; font-size:.76rem; }
  .contract-main .plan-compare-table thead th:first-child { position:sticky; left:0; z-index:2; width:125px; min-width:125px; box-shadow:2px 0 #a9bec9; }
  .contract-main .plan-compare-table tbody th { position:sticky; left:0; z-index:1; width:125px; min-width:125px; background:#fff; color:#17394b; box-shadow:2px 0 #d1dde4; }
  .contract-main .plan-compare-table tbody th small { font-size:.68rem; line-height:1.55; }
  .contract-main .plan-compare-table tbody td:last-child { background:#fff; }
  .contract-main .plan-compare-table tbody tr:nth-child(even) th,.contract-main .plan-compare-table tbody tr:nth-child(even) td { background:#f3f7f9; }
  .contract-main .plan-symbol { width:28px; height:28px; font-size:1rem; }
  .contract-main .plan-cell-benefit { margin-top:5px; font-size:.68rem; line-height:1.5; }
}

/* 契約アップグレードと同じ3プランカード。契約状況に応じた料金と申込先は維持する。 */
.contract-main .plan-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; overflow:visible; border:0; border-radius:0; background:transparent; box-shadow:none; }
.contract-main .plan-card,.contract-main .plan-card.featured-plan { display:flex; flex-direction:column; gap:0; min-width:0; padding:0 24px 24px; overflow:hidden; border:1px solid #dae4e8; border-radius:7px; background:#fff; box-shadow:none; transform:none; text-align:center; }
.contract-main .plan-audience,.contract-main .featured-plan .plan-audience { display:block; margin:0 -24px 18px; padding:9px 12px; background:#17394b; color:#fff; font-size:.8125rem; font-weight:600; letter-spacing:.025em; text-align:center; }
.contract-main .plan-card h3 { min-height:3.2em; margin:0 0 8px; padding:0; border:0; color:#17394b; font-size:1.35rem; line-height:1.6; text-align:center; }
.contract-main .plan-card > p { max-width:22em; min-height:3.8em; margin:0 auto; color:#496170; font-size:.875rem; line-height:1.8; text-align:center; }
.contract-main .plan-price,.contract-main .featured-plan .plan-price { min-height:132px; margin-top:15px; padding:0; border:0; border-radius:0; background:transparent; }
.contract-main .plan-price strong { color:#17394b; font-family:Arial,sans-serif; font-size:2.25rem; font-weight:700; letter-spacing:-.03em; }
.contract-main .plan-price span { color:#496170; font-size:.8125rem; }
.contract-main .plan-includes { gap:0; margin:18px 0 0; padding:16px 0 22px; border-top:1px solid #dae4e8; text-align:left; }
.contract-main .plan-includes li { padding-top:4px; padding-bottom:4px; font-size:.875rem; line-height:1.8; }
.contract-main .plan-actions { margin-top:auto; }
.contract-main .upgrade-set-discount-note { margin:14px 0 0; color:#496170; font-size:.8rem; line-height:1.7; }
.contract-main .upgrade-set-discount-note[hidden] { display:none; }
.contract-main .upgrade-plan-note { margin:8px 0 0; color:#496170; font-size:.8rem; line-height:1.7; }
.contract-main .upgrade-plan-note:empty { display:none; }
.contract-main .upgrade-plan-note::before { content:"※ "; }
.contract-main .plan-grid .plan-card .contract-btn { display:flex; justify-content:center; gap:12px; width:100%; min-height:46px; padding:11px 10px; border:1px solid #17394b; border-radius:6px; background:#17394b; color:#fff; box-shadow:none; font-size:.875rem; text-align:center; }
.contract-main .plan-grid .plan-card .contract-btn::after { content:"→"; flex:none; }
.contract-main .plan-grid .plan-card .contract-btn:disabled,.contract-main .plan-grid .plan-card .contract-btn.is-disabled { border-color:#d5dce5; background:#edf0f4; color:#64748b; box-shadow:none; }
.contract-main .plan-grid .plan-card .contract-btn:disabled::after,.contract-main .plan-grid .plan-card .contract-btn.is-disabled::after { content:none; }

@media(max-width:900px) {
  .contract-main .plan-grid { grid-template-columns:1fr; gap:20px; max-width:500px; margin-inline:auto; }
  .contract-main .plan-card,.contract-main .plan-card.featured-plan { padding:0 24px 24px; }
  .contract-main .plan-card h3 { min-height:0; }
  .contract-main .plan-price,.contract-main .featured-plan .plan-price { min-height:0; }
}
@media(max-width:560px) {
  .contract-main .plan-grid { max-width:none; }
  .contract-main .plan-card > p { min-height:0; }
}

/* 契約選択ページ固有の外枠だけをアップグレード画面の白い面に合わせる。 */
.contract-shell { background:#f8fafc; }
.contract-main { min-width:0; padding:38px 0 72px; }
.contract-main .contract-head { display:block; margin:0 0 22px; }
.contract-main .contract-head h1 { margin:0; color:#193453; font-size:clamp(1.7rem,3vw,2.2rem); line-height:1.4; letter-spacing:normal; }
.contract-main .plan-section-heading h2 { margin:0; }
.contract-main .plan-section-heading a,.contract-main .upgrade-mobile-compare { color:#31587f; text-decoration:underline; text-underline-offset:5px; }
.contract-main .plan-grid .plan-card .contract-btn:hover { background:#244e5f; color:#fff; }
@media(max-width:700px) {
  .contract-main { padding:24px 0 44px; }
  .contract-main .plan-section-heading { display:none; }
}