/* ■ お申し込み・最終確認・お支払い後の画面（専用） */

/* ◆ 上部（見出しと画像） */
.purchase-intro{padding:32px var(--space-x) 48px;background:linear-gradient(105deg,var(--paper) 5%,#f4eee3 100%)}
.purchase-intro__inner{max-width:1180px;margin:auto}
.purchase-intro__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:42px;align-items:center;margin-top:26px}
.purchase-intro__copy h1{margin:0 0 18px;font:500 var(--fs-h2)/1.5 var(--font-display);letter-spacing:.05em}
.purchase-intro__lead{margin:0;font-size:var(--fs-lg);line-height:1.9}
.purchase-intro__visual{position:relative;min-width:0;margin:0;padding:0 10px 12px 0}
.purchase-intro__visual>img:first-child{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:5px;box-shadow:0 15px 38px rgba(45,34,22,.12)}
.purchase-intro__visual-sp{position:absolute;right:0;bottom:0;width:20%;height:auto;border:5px solid #fff;border-radius:15px;box-shadow:0 12px 28px rgba(35,30,24,.22)}

.is-order-confirmation .purchase-intro{padding-top:16px;padding-bottom:18px}
.is-order-confirmation .purchase-intro__grid{grid-template-columns:1fr;gap:0;margin-top:10px}
.is-order-confirmation .purchase-intro__copy h1{margin-bottom:6px;font-size:var(--fs-h2-s)}
.is-order-confirmation .purchase-intro__lead{font-size:var(--fs-md)}
.is-order-confirmation .purchase-intro__visual{display:none}

/* ◆ ステップ */
.purchase-steps{padding:20px 24px 18px;background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.purchase-steps ol{display:flex;justify-content:center;align-items:center;max-width:850px;margin:0 auto;padding:0;list-style:none}
.purchase-steps li{display:flex;align-items:center;gap:10px;padding:0 32px;color:var(--muted);font-size:var(--fs-md)}
.purchase-steps li+li{border-left:1px solid var(--line)}
.purchase-steps li>span{display:grid;place-items:center;width:36px;height:36px;border:1px solid #cfc4b5;border-radius:50%;font:500 var(--fs-lg) var(--font-display)}
.purchase-steps li.is-current{color:var(--ink)}
.purchase-steps li.is-current>span{background:var(--gold);border-color:var(--gold);color:#fff}
.purchase-steps li.is-complete{color:var(--ink)}
.purchase-steps li.is-complete>span{position:relative;background:var(--gold);border-color:var(--gold);color:transparent}
.purchase-steps li.is-complete>span::after{position:absolute;inset:0;display:grid;place-items:center;content:"✓";color:#fff;font:600 var(--fs-lg)/1 var(--font-body)}
.is-order-confirmation .purchase-steps li.is-current>span,.purchase-steps--completion li.is-current>span{background:var(--navy);border-color:var(--navy)}

/* ◆ 全体の2列（入力＋ご注文内容） */
.purchase-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:0 32px;align-items:start;width:100%;max-width:calc(1360px + 2 * var(--space-x));margin:0 auto;padding:0 var(--space-x) 78px}
.purchase-layout .section{padding-inline:0}
.purchase-plan-section{grid-column:1 / -1;grid-row:1}
.purchase-form-column{grid-column:1;grid-row:2;min-width:0}
.purchase-block{border-bottom:1px solid var(--line)}
.purchase-plan-section .plan-grid{margin-top:48px;gap:var(--gap-grid)}
.purchase-plan-section .plan-card.is-selected{outline:3px solid var(--navy);outline-offset:3px}
.purchase-notice{margin:0 0 24px;padding:14px 18px;background:var(--cream);color:var(--ink-soft);font-size:var(--fs-md)}
.purchase-notice--error{color:var(--alert)}

/* ◆ 月額の期間 */
.purchase-term{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:28px 0 0;padding:22px;border:1px solid var(--line);border-radius:6px;background:var(--paper)}
.purchase-term[hidden],.purchase-hearing[hidden]{display:none}
.purchase-term legend{padding:0 8px;font:500 var(--fs-h3-s) var(--font-display)}
.purchase-term label{display:flex;gap:11px;align-items:flex-start;padding:16px;border:1px solid var(--line);border-radius:5px;background:#fff;cursor:pointer}
.purchase-term label:has(input:checked){border-color:var(--gold);box-shadow:0 0 0 2px rgba(200,158,74,.15)}
.purchase-term input{margin-top:4px;accent-color:var(--gold)}
.purchase-term label span{display:grid;gap:5px}
.purchase-term label strong{font-size:var(--fs-md)}
.purchase-term label small{color:var(--muted);font-size:var(--fs-sm);line-height:1.6}
.purchase-term .form-note,.purchase-term .purchase-error{grid-column:1/-1}

/* ◆ 入力欄 */
.purchase-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 24px}
.purchase-fields .form-field{min-width:0}
.purchase-fields .form-field__label{display:flex;gap:8px;align-items:center}
.purchase-fields .form-field__label em{padding:2px 7px;border-radius:3px;background:var(--alert);color:#fff;font-size:var(--fs-xs);font-style:normal;font-weight:500}
.purchase-fields .form-field__label small{color:var(--muted);font-size:var(--fs-xs);font-weight:400}
.purchase-fields textarea.form-control{min-height:100px;resize:vertical}
.purchase-error{min-height:0;color:var(--alert);font-size:var(--fs-sm);line-height:1.5}
.purchase-error:empty{display:none}
.form-control[aria-invalid="true"]{border-color:var(--alert);background:#fffafa}
.purchase-terms .section-heading a,.purchase-confirmation__ack a{color:var(--gold-dark);text-decoration:underline}
.purchase-hearing__notice{margin:0 0 24px;padding:16px 18px;border-left:3px solid var(--gold);background:var(--cream);font-size:var(--fs-md);line-height:1.9}
.purchase-fields--hearing{margin-bottom:22px}
.purchase-extra-hearing{margin:20px 0 18px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.purchase-extra-hearing summary{padding:18px 4px;cursor:pointer;font-size:var(--fs-md)}
.purchase-extra-hearing .purchase-fields{padding:8px 4px 22px}
.purchase-field-wide{grid-column:1/-1}
.purchase-submit{display:flex;justify-content:center;align-items:center;gap:10px;width:min(100%,420px);margin:28px auto 0;cursor:pointer}
.purchase-result{min-height:1.7em;margin:16px auto 0;text-align:center;font-size:var(--fs-md);line-height:1.7}

/* ◆ ご注文内容（右） */
.purchase-summary{position:sticky;top:calc(var(--header-h) + 24px);align-self:start;grid-column:2;grid-row:2}
.purchase-summary__inner{padding:22px 20px;border:1px solid var(--line);border-radius:6px;background:#fff;box-shadow:0 10px 28px rgba(45,34,22,.07)}
.purchase-summary h2{margin:0 0 16px;font:500 var(--fs-h3-m)/1.5 var(--font-display)}
.purchase-summary__image{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:4px}
.purchase-summary__name{margin:14px 0 2px;font:500 var(--fs-h3-l)/1.4 var(--font-display)}
.purchase-summary__category{margin:0;color:var(--muted);font-size:var(--fs-sm);line-height:1.8}
.purchase-summary__details{margin:18px 0 0;border-top:1px solid var(--line)}
.purchase-summary__details>div{display:flex;justify-content:space-between;gap:14px;padding:13px 0;border-bottom:1px solid var(--line);font-size:var(--fs-sm);line-height:1.7}
.purchase-summary__details dt{color:var(--muted)}
.purchase-summary__details dd{margin:0;text-align:right;font-weight:600}
.purchase-summary__total{display:grid;gap:6px;padding:18px 0;border-bottom:1px solid var(--line)}
.purchase-summary__total>span{font-size:var(--fs-sm);color:var(--muted)}
.purchase-summary__total strong{font:500 var(--fs-h3-l)/1.4 var(--font-display)}
.purchase-summary__total small{font-size:var(--fs-xs);line-height:1.6;color:var(--muted)}
.purchase-summary__condition{margin:14px 0 0;color:var(--muted);font-size:var(--fs-xs);line-height:1.8}

/* ◆ 最終確認 */
.purchase-confirmation-main{grid-column:1;grid-row:1;min-width:0}
.purchase-confirmation-summary{grid-column:2;grid-row:1}
.purchase-flow [hidden]{display:none}
.purchase-confirmation-main[hidden],.purchase-confirmation-summary[hidden],.purchase-confirmation-hearing[hidden],.purchase-confirmation__unanswered[hidden]{display:none!important}
.purchase-layout.is-confirmation-view{grid-template-columns:minmax(0,1.65fr) minmax(360px,1fr);gap:0 24px}
.purchase-confirm-card{margin:0 0 20px}
.purchase-confirm-card__heading,.purchase-confirmation__subheading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:0 0 16px}
.purchase-confirm-card__heading h3,.purchase-confirmation__subheading h3{margin:0;font:500 var(--fs-h3-m)/1.5 var(--font-display)}
.purchase-confirmation__subheading{margin-top:22px;padding-top:22px;border-top:1px solid var(--line)}
.purchase-confirmation__list{margin:0;border-top:1px solid var(--line)}
.purchase-confirmation__list>div{display:grid;grid-template-columns:minmax(150px,.65fr) minmax(0,1.35fr);gap:18px;padding:13px 0;border-bottom:1px solid var(--line);font-size:var(--fs-md);line-height:1.8}
.purchase-confirmation__list dt{color:var(--muted)}
.purchase-confirmation__list dd{margin:0;font-weight:600;white-space:pre-wrap;overflow-wrap:anywhere}
.purchase-confirmation__note{margin:0 0 16px}
.purchase-template-card{display:grid;grid-template-columns:92px minmax(0,1fr);gap:18px;align-items:center;margin:0 0 18px;padding:14px;border:1px solid var(--line);border-radius:5px;background:#fff}
.purchase-template-card>img{display:block;width:92px;height:auto;aspect-ratio:9/14;object-fit:contain}
.purchase-template-card__body{min-width:0}
.purchase-template-card__eyebrow{margin:0 0 4px;color:var(--muted);font-size:var(--fs-xs);letter-spacing:.08em}
.purchase-template-card__body h4{margin:0 0 4px;font:500 var(--fs-h3-m)/1.4 var(--font-display)}
.purchase-template-card__body>p:not(.purchase-template-card__eyebrow){margin:0 0 7px;font-size:var(--fs-sm);line-height:1.65}
.purchase-template-card__body ul{display:flex;flex-wrap:wrap;gap:4px 14px;margin:0;padding:0;list-style:none;color:var(--muted);font-size:var(--fs-xs);line-height:1.6}
.purchase-template-card__body li::before{content:"・"}
.purchase-confirmation__conditions{display:grid;gap:10px}
.purchase-confirmation__condition-group{padding:16px 18px;border:1px solid var(--line);border-radius:5px;background:var(--paper)}
.purchase-confirmation__condition-group h4{margin:0 0 8px;font:500 var(--fs-lg)/1.5 var(--font-display)}
.purchase-confirmation__condition-group ul{display:grid;gap:7px;margin:0;padding-left:1.2em;font-size:var(--fs-md);line-height:1.8}
.purchase-confirmation__unanswered{margin-top:12px;border-top:1px solid var(--line)}
.purchase-confirmation__unanswered summary{padding:12px 0;color:var(--muted);font-size:var(--fs-sm);cursor:pointer}
.purchase-confirmation__unanswered .purchase-confirmation__list{border-top:0}
.purchase-confirmation__ack{display:grid;gap:12px;margin-top:16px;padding:16px;border:1px solid var(--line);border-radius:5px;background:#fff}
.purchase-confirmation__ack label{display:flex;gap:12px;align-items:flex-start;font-size:var(--fs-md);line-height:1.8;cursor:pointer}
.purchase-confirmation__ack input{margin-top:5px;accent-color:var(--gold)}
.purchase-confirmation__payment,.purchase-confirmation__back{display:flex;width:100%;margin:18px auto 0}
.purchase-confirmation__payment-note{margin:8px 0 0;color:var(--muted);text-align:center;font-size:var(--fs-xs);line-height:1.7}
.purchase-confirmation__back{margin-top:22px}

/* ◆ お申し込み後の流れ（お支払い後の画面の、アイコンつきの流れ） */
.flow-grid--icons li{padding:26px 22px;border:1px solid var(--line);border-radius:5px;background:#fff}
.flow-grid--icons .ui-icon{margin:0 0 12px;color:var(--gold-mid)}
.flow-grid--icons p{min-height:0;margin:0}

/* ◆ お支払い後の画面 */
.completion-hero{position:relative;isolation:isolate;overflow:hidden;padding:42px 24px 52px;border-bottom:1px solid var(--line);background:linear-gradient(110deg,var(--paper) 4%,var(--cream) 52%,var(--paper) 100%);text-align:center}
.completion-hero::before,.completion-hero::after{position:absolute;z-index:-1;width:250px;height:250px;border:1px solid rgba(200,158,74,.18);border-radius:50%;content:"";pointer-events:none}
.completion-hero::before{left:-145px;top:-90px}
.completion-hero::after{right:-95px;top:-105px;width:340px;height:340px}
.completion-hero__inner{max-width:940px;margin:0 auto}
.completion-hero__mark{display:grid;width:66px;height:66px;margin:0 auto 14px;place-items:center;border:2px solid var(--gold);border-radius:50%;background:var(--paper);color:var(--gold-dark);font:400 42px/1 var(--font-display)}
.completion-hero__heading{margin:0 auto}
.completion-hero__heading h1{margin-bottom:14px}
.completion-hero__heading>p:last-child{max-width:780px;margin:0 auto;color:var(--muted);font-size:var(--fs-md);line-height:1.9}
.completion-layout{grid-template-columns:minmax(0,1fr) minmax(340px,410px);gap:24px;padding-top:42px}
.completion-layout .purchase-summary{grid-row:1}
.completion-main{min-width:0}
.completion-panel{margin:0 0 20px}
.completion-panel__heading{display:block;margin:0 0 22px}
.completion-panel__heading h2{margin:0 0 8px;font:500 var(--fs-h3-m)/1.5 var(--font-display)}
.completion-panel__heading>p:last-child{margin:0;color:var(--muted);font-size:var(--fs-sm);line-height:1.8}
.completion-flow li{display:flex;flex-direction:column;gap:8px}
.completion-flow li>span{margin:0;color:var(--gold);font:500 var(--fs-h3-l)/1.2 var(--font-display)}
.completion-flow li h3{min-height:3em;margin:0;font:500 var(--fs-lg)/1.6 var(--font-display)}
.completion-flow li p{min-height:0;margin:0;font-size:var(--fs-sm);line-height:1.75}
.completion-flow .ui-icon{width:28px;height:28px}
.completion-flow--data{grid-template-columns:repeat(3,minmax(0,1fr))}
.completion-return{display:flex;align-items:center;gap:18px;margin-top:22px}
.completion-download{display:flex;justify-content:center}
.completion-download+.completion-return__note{text-align:center}
.completion-return__note{margin:14px 0 0;color:var(--muted);font-size:var(--fs-sm)}
.completion-return p{margin:0;color:var(--muted);font-size:var(--fs-sm)}
.completion-summary .purchase-summary__inner{position:sticky;top:calc(var(--header-h) + 24px)}