/* 【初心者向けガイド】
   お店の特定商取引法に基づく表記ページと、ご注文確定前の法定表示（#order-terms）の
   見た目です。site.css の色と余白をそのまま使い、飾りは足しません。
   読ませることが目的の書面なので、販促の要素（カード、影、色ベタ）を置かないでください。 */

.legal-main {
    margin: 0 auto;
    max-width: 760px;
    padding: 26px clamp(16px, 4vw, 38px) 60px;
}

.legal-intro p {
    color: var(--muted);
    line-height: 1.9;
    margin: 0 0 14px;
}

.legal-list {
    border-top: 1px solid var(--line);
    margin: 22px 0 0;
}

.legal-row {
    border-bottom: 1px solid var(--line);
    display: grid;
    gap: 4px 20px;
    grid-template-columns: 13em minmax(0, 1fr);
    padding: 15px 2px;
}

.legal-row dt {
    color: var(--ink);
    font-size: 14px;
    font-weight: 800;
}

.legal-row dd {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.9;
    margin: 0;
    overflow-wrap: anywhere;
}

.legal-row dd p {
    margin: 0 0 10px;
}

.legal-row dd p:last-child {
    margin-bottom: 0;
}

@media (max-width: 640px) {
    .legal-row {
        gap: 6px;
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ご注文確定の直前に出す法定6項目（特定商取引法12条の6）。
   確定ボタンのすぐ下に、たたまずそのまま置きます（2026-09-13 ユーザー指示で、合計とボタンの
   あいだから移しました。ボタンの直上に #checkout-terms-pointer の案内を出しています）。
   折りたたむと「一覧性をもって表示」にならないので、details にしないでください。 */

.order-terms {
    border-top: 1px solid var(--line);
    margin-top: 14px;
    padding-top: 12px;
}

.order-terms h3 {
    color: var(--ink);
    font-size: 13px;
    font-weight: 900;
    margin: 0 0 8px;
}

.order-terms dl {
    display: grid;
    gap: 7px;
    margin: 0;
}

.order-terms div {
    display: grid;
    gap: 2px;
    grid-template-columns: 7.5em minmax(0, 1fr);
}

.order-terms dt {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.order-terms dd {
    color: var(--ink);
    font-size: 12px;
    line-height: 1.75;
    margin: 0;
    overflow-wrap: anywhere;
}

/* お取り消しの期限は、日時をそのまま読めることがいちばん大切なので少し強めます。 */
.order-terms .order-terms-deadline {
    font-weight: 800;
}

/* 期限を設けている事情。罰則の告知ではなく、お店の準備の説明として読める調子にします。 */
.order-terms .order-terms-reason {
    color: var(--muted);
    display: block;
    font-weight: 400;
    margin-top: 3px;
}

.order-terms-link {
    color: var(--brand-dark);
    display: inline-block;
    font-size: 12px;
    font-weight: 800;
    margin-top: 9px;
}

@media (max-width: 520px) {
    .order-terms div {
        gap: 1px;
        grid-template-columns: minmax(0, 1fr);
    }
}

/* お客様向けの共通フッター。法的な案内へたどり着ける導線です。 */

.customer-footer {
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 10px;
    margin-top: 40px;
    padding: 18px clamp(16px, 4vw, 38px) 28px;
    text-align: center;
}

.customer-footer nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    justify-content: center;
}

.customer-footer a {
    color: var(--muted);
    text-decoration: underline;
}

/* 注文画面は下に固定のカートバーが出るので、footer が隠れないよう逃がします。 */
.order-page .customer-footer {
    padding-bottom: 96px;
}

/* 注文状況の画面は body が縦のフレックスです。幅を指定しないと文字の幅まで縮み、
   カードの真ん中にぶら下がって見えます。カード（max-width:620px）に合わせます。
   罫線はこの画面だけ外します。カードがベージュ地に浮いた1枚ものなので、
   短いハーフラインだけが宙に残って見えるためです。 */
.complete-page .customer-footer {
    border-top: 0;
    margin-top: 20px;
    max-width: 620px;
    padding: 0;
    width: 100%;
}

/* 事業者情報が掲示されていないお店で、オンライン決済を選べないときの案内。
   理由はお客様の落ち度ではないので、警告色ではなく落ち着いた注記にします。 */
.order-terms .order-terms-blocked {
    color: var(--ink);
    font-size: 12px;
    line-height: 1.85;
    margin: 0;
}