/* 共通スタイル。設計書5.1のUI基準(文字18px以上・ボタン高さ56px以上・誤タップ防止の間隔・色数を絞る)に合わせる */
:root {
    --color-bg: #ffffff;
    --color-text: #1a1a1a;
    --color-accent: #2e7d32;
    --color-warning: #c62828;
    --color-border: #cccccc;
    /* 入力欄・ボタンなど操作部品の輪郭専用。カード枠・区切り線などの装飾目的の境界線には使わない
       (WCAG 1.4.11 非テキストコントラスト、3:1以上を確保するため --color-border より濃くしている) */
    --color-control-border: #949494;
}
* {
    box-sizing: border-box;
}
/* フォーカス表示: Tabキー操作でどの要素を選んでいるか常に分かるよう、全画面共通で太い枠線を表示する。
   :focus-visible なのでマウスクリック時には出ず、キーボード操作時だけ表示される。 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid #1565c0;
    outline-offset: 2px;
}
body {
    margin: 0;
    padding: 24px 16px 64px;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif;
    font-size: 18px;
    line-height: 1.6;
}
.page {
    max-width: 480px;
    margin: 0 auto;
}
/* 599px以下(スマートフォン)は上記のまま。600px/1024pxは設計書6章のブレークポイント基準。
   フォーム・詳細・確認画面など文章主体の画面を対象に、読みやすい幅までゆるやかに広げる
   (商品一覧など複数列にしたい画面は .products-page / .buyer-home-page 側で別途上書きする)。 */
@media (min-width: 600px) {
    .page {
        max-width: 600px;
    }
}
@media (min-width: 1024px) {
    .page {
        max-width: 720px;
    }
}
h1 {
    font-size: 24px;
    margin: 0 0 24px;
}
.field {
    margin-bottom: 20px;
}
label {
    display: block;
    font-weight: bold;
    margin-bottom: 8px;
}
/* label要素は入力欄と組み合わせて使うためのもの。読み取り専用の値の見出しなど、
   対応する入力欄が無い箇所では見た目だけこのクラスで揃える(label要素は使わない)。 */
.field-label {
    display: block;
    font-weight: bold;
    margin-bottom: 8px;
}
input[type="text"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="password"],
select,
textarea {
    width: 100%;
    font-size: 18px;
    padding: 12px;
    border: 1px solid var(--color-control-border);
    border-radius: 8px;
    font-family: inherit;
}
input[type="password"] {
    max-width: 50%;
}
textarea {
    min-height: 120px;
    resize: vertical;
}
.readonly-value {
    display: block;
    width: 100%;
    padding: 12px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: #f2f2f2;
    color: #555555;
}
.field-hint {
    font-size: 14px;
    color: #555555;
    margin-top: 6px;
}
.field-error {
    font-size: 14px;
    color: var(--color-warning);
    margin-top: 6px;
}
button[type="submit"] {
    display: block;
    width: 100%;
    min-height: 56px;
    font-size: 18px;
    font-weight: bold;
    color: #ffffff;
    background: var(--color-accent);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    margin-top: 12px;
}
button[type="submit"]:disabled {
    background: #9e9e9e;
    cursor: default;
}
.message {
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 20px;
    font-size: 16px;
}
.message-success {
    background: #e8f5e9;
    color: var(--color-accent);
    border: 1px solid var(--color-accent);
}
.message-error {
    background: #fdecea;
    color: var(--color-warning);
    border: 1px solid var(--color-warning);
}
[hidden] {
    display: none !important;
}

/* 農家ホーム画面(F1)。他画面のクラスと混ざらないよう farmer-home__ を接頭辞にする */
.farmer-home {
    max-width: 480px;
    margin: 0 auto;
}
@media (min-width: 600px) {
    .farmer-home {
        max-width: 600px;
    }
}
@media (min-width: 1024px) {
    .farmer-home {
        max-width: 720px;
    }
}
.farmer-home__header {
    margin-bottom: 20px;
}
.farmer-home__title {
    font-size: 24px;
    margin: 0 0 8px;
}
.farmer-home__farmer-name {
    font-size: 18px;
    font-weight: bold;
    margin: 0 0 12px;
}
.farmer-home__header-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.farmer-home__settings-link,
.farmer-home__logout-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    padding: 0 16px;
    border-radius: 8px;
    font-size: 18px;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
}
.farmer-home__settings-link {
    border: 1px solid var(--color-control-border);
    background: #ffffff;
    color: var(--color-text);
}
.farmer-home__logout-button {
    border: 1px solid var(--color-warning);
    background: #ffffff;
    color: var(--color-warning);
}
.farmer-home__logout-button:disabled {
    opacity: 0.6;
    cursor: default;
}
.farmer-home__overview {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}
.farmer-home__overview-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: #f9f9f9;
}
.farmer-home__overview-label {
    font-size: 16px;
}
.farmer-home__overview-value {
    font-size: 22px;
    font-weight: bold;
}
/* 要対応(変更相談)だけリンク化するための最小限のリセット。項目全体をタップ対象にする */
.farmer-home__overview-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    color: inherit;
    text-decoration: none;
}
.farmer-home__menu {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.farmer-home__menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 100px;
    padding: 16px;
    border: 1px solid var(--color-control-border);
    border-radius: 8px;
    text-decoration: none;
    color: var(--color-text);
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    background: #ffffff;
}
.farmer-home__menu-item-icon {
    font-size: 28px;
}
.farmer-home__menu-item--disabled {
    background: #f2f2f2;
    color: #666666;
}
.farmer-home__menu-item-badge {
    font-size: 14px;
    font-weight: normal;
}
@media (max-width: 360px) {
    .farmer-home__menu {
        grid-template-columns: 1fr;
    }
}
@media (min-width: 1024px) {
    .farmer-home__menu {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 注文確認画面(F2)。他画面のクラスと混ざらないよう confirmation- を接頭辞にする */
.confirmation-page__header {
    margin-bottom: 20px;
}
.confirmation-page__back-link {
    display: inline-block;
    margin-bottom: 12px;
    font-size: 16px;
    color: var(--color-text);
    text-decoration: none;
}
.confirmation-page__title {
    font-size: 24px;
    margin: 0;
}
.confirmation-empty {
    padding: 16px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: #f9f9f9;
    text-align: center;
}
.confirmation-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.confirmation-card {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 16px;
    background: #ffffff;
}
.confirmation-card__date {
    font-size: 20px;
    font-weight: bold;
    margin: 0 0 12px;
}
.confirmation-card__buyer,
.confirmation-card__items,
.confirmation-card__address {
    margin: 0 0 8px;
}
.confirmation-card__question {
    font-weight: bold;
    margin: 16px 0 12px;
}
.confirmation-card__actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.confirmation-card__actions button {
    min-height: 56px;
    font-size: 18px;
    font-weight: bold;
    border-radius: 8px;
    border: 1px solid var(--color-control-border);
    background: #ffffff;
    color: var(--color-text);
    cursor: pointer;
}
.confirmation-card__actions button:disabled {
    opacity: 0.6;
    cursor: default;
}
.confirmation-card__actions button[data-response="配達可能"] {
    background: var(--color-accent);
    color: #ffffff;
    border-color: var(--color-accent);
}
.confirmation-card__date-picker {
    display: flex;
    gap: 8px;
    align-items: center;
}
.confirmation-card__date-picker input[type="date"] {
    flex: 1;
    min-height: 56px;
    font-size: 18px;
    padding: 12px;
    border: 1px solid var(--color-control-border);
    border-radius: 8px;
}
.confirmation-card__date-picker button {
    min-height: 56px;
    padding: 0 16px;
    font-size: 18px;
    font-weight: bold;
    border-radius: 8px;
    border: none;
    background: var(--color-accent);
    color: #ffffff;
    cursor: pointer;
}
.confirmation-card__note {
    font-size: 14px;
    color: #555555;
    margin: 16px 0 0;
}
.confirmation-card__message {
    margin-top: 12px;
}

/* 予約一覧画面(F3)。他画面のクラスと混ざらないよう orders-page__ / order-card__ を接頭辞にする */
.orders-page__header {
    margin-bottom: 12px;
}
.orders-page__back-link {
    display: inline-block;
    margin-bottom: 12px;
    font-size: 16px;
    color: var(--color-text);
    text-decoration: none;
}
.orders-page__title {
    font-size: 24px;
    margin: 0;
}
.orders-page__unimplemented {
    margin-bottom: 20px;
}
.orders-page__unimplemented-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 56px;
    padding: 0 16px;
    border-radius: 8px;
    background: var(--color-accent);
    color: #ffffff;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
}
.orders-page__filter {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}
.orders-page__filter label {
    margin-bottom: 0;
    white-space: nowrap;
}
.orders-page__filter select {
    flex: 1;
    min-height: 56px;
    font-size: 18px;
    padding: 8px 12px;
    border: 1px solid var(--color-control-border);
    border-radius: 8px;
}
.orders-empty {
    padding: 16px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: #f9f9f9;
    text-align: center;
}
.orders-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.order-card {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 16px;
    background: #ffffff;
}
.order-card__date {
    font-size: 20px;
    font-weight: bold;
    margin: 0 0 12px;
}
.order-card__buyer,
.order-card__items {
    margin: 0 0 8px;
}
.order-card__status-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: bold;
    margin: 8px 0 16px;
}
.order-status-badge--received {
    background: #e3f2fd;
    color: #1565c0;
}
.order-status-badge--confirmed {
    background: #e0f2f1;
    color: #00695c;
}
.order-status-badge--changed {
    background: #fff3e0;
    color: #b25400;
}
.order-status-badge--delivered {
    background: #e8f5e9;
    color: var(--color-accent);
}
.order-status-badge--cancelled {
    background: #fdecea;
    color: var(--color-warning);
}
/* 購入者からの未処理相談があるカードに付けるバッジ(ステータスとは別枠、色ではなく文字で示す) */
.order-card__change-request-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: bold;
    margin: 0 0 16px;
    background: #ede7f6;
    color: #4527a0;
}
.order-card__complete-button {
    display: block;
    width: 100%;
    min-height: 56px;
    font-size: 18px;
    font-weight: bold;
    border-radius: 8px;
    border: 1px solid var(--color-accent);
    background: #ffffff;
    color: var(--color-accent);
    cursor: pointer;
}
.order-card__complete-button:disabled {
    opacity: 0.6;
    cursor: default;
}
.order-card__complete-form {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
}
.order-card__complete-form label {
    margin-top: 12px;
}
.order-card__complete-form select {
    width: 100%;
    min-height: 56px;
    font-size: 18px;
    padding: 8px 12px;
    border: 1px solid var(--color-control-border);
    border-radius: 8px;
}
.order-card__complete-form button {
    display: block;
    width: 100%;
    min-height: 56px;
    font-size: 18px;
    font-weight: bold;
    border-radius: 8px;
    border: none;
    background: var(--color-accent);
    color: #ffffff;
    cursor: pointer;
    margin-top: 16px;
}
.order-card__complete-form button:disabled {
    opacity: 0.6;
    cursor: default;
}
.order-card__detail-link {
    display: block;
    margin-top: 16px;
    font-size: 16px;
    font-weight: bold;
    color: var(--color-accent);
    text-decoration: none;
}
.order-card__message {
    margin-top: 12px;
}
.orders-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 24px;
}
.orders-pager button {
    min-height: 56px;
    padding: 0 20px;
    font-size: 18px;
    font-weight: bold;
    border-radius: 8px;
    border: 1px solid var(--color-control-border);
    background: #ffffff;
    color: var(--color-text);
    cursor: pointer;
}
.orders-pager button:disabled {
    opacity: 0.5;
    cursor: default;
}
.orders-pager__indicator {
    font-size: 16px;
    font-weight: bold;
}

/* 注文詳細画面(F4)。他画面のクラスと混ざらないよう order-detail-page__ / order-detail__ を接頭辞にする */
.order-detail-page__header {
    margin-bottom: 20px;
}
.order-detail-page__back-link {
    display: inline-block;
    margin-bottom: 12px;
    font-size: 16px;
    color: var(--color-text);
    text-decoration: none;
}
.order-detail-page__title {
    font-size: 24px;
    margin: 0;
}
.order-detail__heading-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}
.order-detail__order-number {
    font-size: 18px;
    font-weight: bold;
}
.order-detail__proxy-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: bold;
    background: #fff3e0;
    color: #b25400;
}
.order-detail__section {
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--color-border);
}
.order-detail__section:last-child {
    border-bottom: none;
}
.order-detail__section h2 {
    font-size: 18px;
    margin: 0 0 12px;
}
.order-detail__section p {
    margin: 0 0 8px;
}
/* 購入者からのご相談欄:相談種別・相談内容だけ、相談日時等の補足情報より目立たせる
   (設計書5.1「重要な数字は22〜28px」の基準を流用。折り返しても不自然にならないよう
   font-sizeのみ上げ、white-space指定はしない) */
.order-detail__change-request-highlight {
    font-size: 22px;
    font-weight: bold;
    line-height: 1.4;
}
.order-detail__items-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 16px;
}
.order-detail__items-table th,
.order-detail__items-table td {
    text-align: left;
    padding: 8px;
    border-bottom: 1px solid var(--color-border);
}
.order-detail__total {
    margin-top: 12px;
    font-size: 18px;
    font-weight: bold;
}
.order-detail__checkbox-label {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: normal;
}
.order-detail__checkbox-label input[type="checkbox"] {
    width: 24px;
    height: 24px;
}
#detail-reduce-quantity-button {
    display: block;
    width: 100%;
    min-height: 56px;
    font-size: 18px;
    font-weight: bold;
    border-radius: 8px;
    border: 1px solid var(--color-accent);
    background: #ffffff;
    color: var(--color-accent);
    cursor: pointer;
    margin-bottom: 12px;
}
#detail-reduce-quantity-button:disabled {
    opacity: 0.6;
    cursor: default;
}
.order-detail__cancel-button {
    display: block;
    width: 100%;
    min-height: 56px;
    font-size: 18px;
    font-weight: bold;
    border-radius: 8px;
    border: 1px solid var(--color-warning);
    background: #ffffff;
    color: var(--color-warning);
    cursor: pointer;
}
.order-detail__cancel-button:disabled {
    opacity: 0.6;
    cursor: default;
}
/* F4「変更せず相談を終了する」。削除系の強い赤ではなく、既存の「やめる」系と同じ中立色にする */
#detail-resolve-without-change-button {
    display: block;
    width: 100%;
    min-height: 56px;
    font-size: 18px;
    font-weight: bold;
    border-radius: 8px;
    border: 1px solid var(--color-control-border);
    background: #ffffff;
    color: var(--color-text);
    cursor: pointer;
    margin-top: 12px;
}
#detail-resolve-without-change-button:disabled {
    opacity: 0.6;
    cursor: default;
}
/* 数量変更相談フォームの「戻る」。#announcement-cancel-edit-buttonと同じ、中立色の「やめる」系ボタンのパターン */
#detail-cancel-quantity-change-form-button {
    display: block;
    width: 100%;
    min-height: 56px;
    font-size: 18px;
    border-radius: 8px;
    border: 1px solid var(--color-control-border);
    background: #ffffff;
    color: var(--color-text);
    cursor: pointer;
}
#detail-cancel-quantity-change-form-button:disabled {
    opacity: 0.6;
    cursor: default;
}

/* 商品管理画面(F5)。他画面のクラスと混ざらないよう products-page__ / product-card__ を接頭辞にする */
.products-page__header {
    margin-bottom: 12px;
}
.products-page__back-link {
    display: inline-block;
    margin-bottom: 12px;
    font-size: 16px;
    color: var(--color-text);
    text-decoration: none;
}
.products-page__title {
    font-size: 24px;
    margin: 0;
}
.products-page__unimplemented {
    margin-bottom: 20px;
}
.products-page__new-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    padding: 0 20px;
    border-radius: 8px;
    font-size: 18px;
    font-weight: bold;
    text-decoration: none;
    background: var(--color-accent);
    color: #ffffff;
}
.products-page__filter {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}
/* 599px以下は商品カードも1列(全幅)なので、絞り込み枠も全幅のまま。
   600px/1024pxは.products-list(下記)のグリッド列数が変わる境界と完全に一致させ、
   カード1列分と同じ計算式(gapは.products-listと同じ20px)で幅をそろえる。
   .products-page__filterはブロック要素でmargin:autoを指定していないため、
   max-widthを狭めるだけで自動的にカード1枚目と左端がそろう。 */
@media (min-width: 600px) {
    .products-page__filter {
        max-width: calc((100% - 20px) / 2);
    }
}
@media (min-width: 1024px) {
    .products-page__filter {
        max-width: calc((100% - 40px) / 3);
    }
}
.products-page__filter label {
    margin-bottom: 0;
    white-space: nowrap;
}
.products-page__filter select {
    flex: 1;
    min-height: 56px;
    font-size: 18px;
    padding: 8px 12px;
    border: 1px solid var(--color-control-border);
    border-radius: 8px;
}
.products-empty {
    padding: 16px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: #f9f9f9;
    text-align: center;
}
.products-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.product-card {
    display: flex;
    gap: 16px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 16px;
    background: #ffffff;
}
.product-card__image-wrap {
    flex-shrink: 0;
    width: 96px;
    height: 96px;
}
.product-card__image {
    width: 96px;
    height: 96px;
    object-fit: cover;
    border-radius: 8px;
}
.product-card__image-placeholder {
    width: 96px;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #f2f2f2;
    color: #666666;
    font-size: 13px;
    text-align: center;
}
.product-card__info {
    flex: 1;
    min-width: 0;
}
.product-card__name-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 8px;
}
.product-card__name {
    font-size: 20px;
    font-weight: bold;
}
.product-card__archived-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: bold;
    background: #f2f2f2;
    color: #666666;
}
.product-card__category {
    font-size: 15px;
    color: #555555;
    margin: 0 0 12px;
}
.product-card__sale {
    margin-bottom: 12px;
}
.product-card__sale p {
    margin: 4px 0;
}
.product-card__sale-none {
    color: #707070;
}
.product-sale-status-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 8px;
}
.product-sale-status--preparing {
    background: #e3f2fd;
    color: #1565c0;
}
.product-sale-status--on-sale {
    background: #e8f5e9;
    color: var(--color-accent);
}
.product-sale-status--sold-out {
    background: #fff3e0;
    color: #b25400;
}
.product-sale-status--ended {
    background: #f2f2f2;
    color: #666666;
}
.product-card__actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.product-card__edit-link {
    display: block;
    font-size: 16px;
    font-weight: bold;
    color: var(--color-accent);
    text-decoration: none;
}
@media (max-width: 480px) {
    .product-card {
        flex-direction: column;
    }
}
/* 商品一覧(F5商品管理・B3購入者トップで共用)は600px以上で2列、1024px以上で3列表示にする(設計書6章)。
   599px以下は既存の縦積み(flex-direction: column)のまま変更しない。 */
@media (min-width: 600px) {
    .products-page,
    .buyer-home-page {
        max-width: 900px;
    }
    .products-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 1024px) {
    .products-page,
    .buyer-home-page {
        max-width: 1100px;
    }
    .products-list {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 商品登録・編集画面(F6)。他画面のクラスと混ざらないよう product-form-page__ / product-form__ を接頭辞にする */
.product-form-page__header {
    margin-bottom: 20px;
}
.product-form-page__back-link {
    display: inline-block;
    margin-bottom: 12px;
    font-size: 16px;
    color: var(--color-text);
    text-decoration: none;
}
.product-form-page__title {
    font-size: 24px;
    margin: 0;
}
.product-form__image-preview-wrap {
    margin-bottom: 12px;
}
.product-form__image-preview {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 8px;
}
.product-form__image-preview-placeholder {
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #f2f2f2;
    color: #666666;
    font-size: 13px;
}
input[type="file"] {
    width: 100%;
    font-size: 16px;
    padding: 8px 0;
}
.product-form__checkbox-label {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: normal;
}
.product-form__checkbox-label input[type="checkbox"] {
    width: 24px;
    height: 24px;
}

/* 再販売設定画面(F7)。他画面のクラスと混ざらないよう product-resell-page__ / product-resell__ を接頭辞にする */
.product-resell-page__header {
    margin-bottom: 20px;
}
.product-resell-page__back-link {
    display: inline-block;
    margin-bottom: 12px;
    font-size: 16px;
    color: var(--color-text);
    text-decoration: none;
}
.product-resell-page__title {
    font-size: 24px;
    margin: 0;
}
.product-resell__product-name {
    font-size: 20px;
    font-weight: bold;
    margin: 0;
}
.product-resell__previous {
    margin-bottom: 20px;
    padding: 16px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: #f9f9f9;
}
.product-resell__previous-heading {
    font-weight: bold;
    margin: 0 0 8px;
}
.product-resell__previous p {
    margin: 4px 0;
}

/* 売上確認画面(F8)。他画面のクラスと混ざらないよう sales-page__ / sales-card__ を接頭辞にする */
.sales-page__header {
    margin-bottom: 12px;
}
.sales-page__back-link {
    display: inline-block;
    margin-bottom: 12px;
    font-size: 16px;
    color: var(--color-text);
    text-decoration: none;
}
.sales-page__title {
    font-size: 24px;
    margin: 0 0 20px;
}
.sales-page__section {
    margin-bottom: 32px;
}
.sales-page__section h2 {
    font-size: 18px;
    margin: 24px 0 8px;
}
.sales-page__section h2:first-child {
    margin-top: 0;
}
.sales-page__note {
    font-size: 14px;
    color: #555555;
    margin: 0 0 12px;
}
.sales-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.sales-card {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 16px;
    background: #f9f9f9;
    text-align: center;
}
.sales-card__label {
    font-size: 14px;
    color: #555555;
    margin: 0 0 8px;
}
.sales-card__amount {
    font-size: 22px;
    font-weight: bold;
    margin: 0 0 4px;
    color: var(--color-accent);
}
.sales-card__count {
    font-size: 14px;
    color: #555555;
    margin: 0;
}
.sales-card--pending {
    max-width: 240px;
}
.sales-breakdown-table,
.sales-by-product-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 16px;
}
.sales-breakdown-table th,
.sales-breakdown-table td,
.sales-by-product-table th,
.sales-by-product-table td {
    text-align: left;
    padding: 8px;
    border-bottom: 1px solid var(--color-border);
}
.sales-breakdown-table th[scope="row"],
.sales-by-product-table th[scope="row"] {
    font-weight: normal;
}
.sales-page__period-buttons {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}
.sales-period-button {
    flex: 1;
    min-height: 56px;
    font-size: 18px;
    font-weight: bold;
    border-radius: 8px;
    border: 1px solid var(--color-control-border);
    background: #ffffff;
    color: var(--color-text);
    cursor: pointer;
}
.sales-period-button--active {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #ffffff;
}
@media (max-width: 480px) {
    .sales-cards {
        grid-template-columns: 1fr;
    }
}

/* お知らせ投稿画面(F9)。他画面のクラスと混ざらないよう announcements-page__ / announcement-card__ を接頭辞にする */
.announcements-page__header {
    margin-bottom: 12px;
}
.announcements-page__back-link {
    display: inline-block;
    margin-bottom: 12px;
    font-size: 16px;
    color: var(--color-text);
    text-decoration: none;
}
.announcements-page__title {
    font-size: 24px;
    margin: 0 0 20px;
}
.announcements-page__preset-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}
.announcements-page__preset-button {
    min-height: 44px;
    padding: 0 14px;
    font-size: 15px;
    border-radius: 999px;
    border: 1px solid var(--color-accent);
    background: #ffffff;
    color: var(--color-accent);
    cursor: pointer;
}
.announcements-page__checkbox-label {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: normal;
}
.announcements-page__checkbox-label input[type="checkbox"] {
    width: 24px;
    height: 24px;
}
#announcement-cancel-edit-button {
    display: block;
    width: 100%;
    min-height: 56px;
    font-size: 18px;
    border-radius: 8px;
    border: 1px solid var(--color-control-border);
    background: #ffffff;
    color: var(--color-text);
    cursor: pointer;
    margin-top: 12px;
}
.announcements-page__list-heading {
    font-size: 20px;
    margin: 32px 0 16px;
}
.announcements-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.announcement-card {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 16px;
    background: #ffffff;
}
.announcement-card__title-line {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
}
.announcement-card__title {
    font-size: 18px;
    font-weight: bold;
}
.announcement-card__badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: bold;
}
.announcement-card__badge--published {
    background: #e8f5e9;
    color: var(--color-accent);
}
.announcement-card__badge--unpublished {
    background: #f2f2f2;
    color: #666666;
}
.announcement-card__date {
    font-size: 14px;
    color: #555555;
    margin: 0 0 8px;
}
.announcement-card__body {
    margin: 0 0 12px;
    white-space: pre-wrap;
}
.announcement-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.announcement-card__actions button {
    min-height: 44px;
    padding: 0 14px;
    font-size: 15px;
    border-radius: 8px;
    border: 1px solid var(--color-control-border);
    background: #ffffff;
    color: var(--color-text);
    cursor: pointer;
}
.announcement-card__delete-button {
    border-color: var(--color-warning) !important;
    color: var(--color-warning) !important;
}
.announcement-card__actions button:disabled {
    opacity: 0.6;
    cursor: default;
}
.announcement-card__message {
    margin-top: 12px;
}
.announcements-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 24px;
}
.announcements-pager button {
    min-height: 56px;
    padding: 0 20px;
    font-size: 18px;
    font-weight: bold;
    border-radius: 8px;
    border: 1px solid var(--color-control-border);
    background: #ffffff;
    color: var(--color-text);
    cursor: pointer;
}
.announcements-pager button:disabled {
    opacity: 0.5;
    cursor: default;
}
.announcements-pager__indicator {
    font-size: 16px;
    font-weight: bold;
}

/* 電話注文の代理入力画面(F10)。他画面のクラスと混ざらないよう order-form-page__ / order-form__ を接頭辞にする */
.order-form-page__header {
    margin-bottom: 12px;
}
.order-form-page__back-link {
    display: inline-block;
    margin-bottom: 12px;
    font-size: 16px;
    color: var(--color-text);
    text-decoration: none;
}
.order-form-page__title {
    font-size: 24px;
    margin: 0 0 20px;
}
.order-form__registration-note {
    padding: 12px 16px;
    border-radius: 8px;
    background: #fff3e0;
    color: #b25400;
    font-size: 15px;
    margin-bottom: 16px;
}
.order-form__estimate {
    font-size: 15px;
    color: #555555;
    margin: -8px 0 20px;
}
.order-form__success {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 20px;
}
.order-form__success p {
    margin: 8px 0;
}
.order-form__success-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 16px 0;
}
.order-form__success-links a {
    font-size: 16px;
    font-weight: bold;
    color: var(--color-accent);
    text-decoration: none;
}
#order-form-continue-button {
    display: block;
    width: 100%;
    min-height: 56px;
    font-size: 18px;
    border-radius: 8px;
    border: 1px solid var(--color-control-border);
    background: #ffffff;
    color: var(--color-text);
    cursor: pointer;
}

/* 購入者トップ(B3)。他画面のクラスと混ざらないよう buyer-home-page__ を接頭辞にする */
.buyer-home-page__header {
    margin-bottom: 20px;
}
.buyer-home-page__title {
    font-size: 22px;
    margin: 0 0 12px;
}
.buyer-home-page__header-nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}
.buyer-home-page__user-name {
    font-size: 16px;
}
.buyer-home-page__nav-link,
.buyer-home-page__settings-link,
.buyer-home-page__login-link,
.buyer-home-page__register-link {
    font-size: 15px;
    color: var(--color-accent);
    text-decoration: none;
    font-weight: bold;
}
.buyer-home-page__logout-button {
    min-height: 40px;
    padding: 0 16px;
    font-size: 15px;
    border-radius: 8px;
    border: 1px solid var(--color-control-border);
    background: #ffffff;
    color: var(--color-text);
    cursor: pointer;
}
.buyer-home-page__message {
    margin-bottom: 24px;
}
.buyer-home-page__section-heading {
    font-size: 18px;
    margin: 0 0 12px;
}
.buyer-home-page__announcements {
    margin-bottom: 24px;
}
.buyer-home-page__empty {
    padding: 16px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: #f9f9f9;
    text-align: center;
    color: #555555;
}
.announcements-summary-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.announcements-summary-list__item {
    padding: 10px 0;
    border-bottom: 1px solid var(--color-border);
    font-size: 16px;
}
.announcements-summary-list__item:last-child {
    border-bottom: none;
}
.buyer-home-page__category-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}
.buyer-home-page__category-tab {
    min-height: 44px;
    padding: 0 16px;
    font-size: 15px;
    font-weight: bold;
    border-radius: 999px;
    border: 1px solid var(--color-control-border);
    background: #ffffff;
    color: var(--color-text);
    cursor: pointer;
}
.buyer-home-page__category-tab--active {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #ffffff;
}
.product-card__price {
    font-size: 24px;
    font-weight: bold;
    margin: 0 0 8px;
}
.product-status-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 8px;
}
.product-status-badge--open {
    background: #e8f5e9;
    color: var(--color-accent);
}
.product-status-badge--closed {
    background: #f2f2f2;
    color: #666666;
}
.product-status-badge--sold-out {
    background: #fdecea;
    color: var(--color-warning);
}
.product-status-badge--preparing {
    background: #e3f2fd;
    color: #1565c0;
}
.product-status-badge--ended {
    background: #f2f2f2;
    color: #666666;
}
.product-card__stock,
.product-card__delivery {
    font-size: 15px;
    color: #555555;
    margin: 4px 0;
}
.product-card__detail-link {
    display: block;
    margin-top: 12px;
    font-size: 16px;
    font-weight: bold;
    color: var(--color-accent);
    text-decoration: none;
}

/* 商品詳細(B4)。他画面のクラスと混ざらないよう product-detail-page__ / product-detail__ を接頭辞にする */
.product-detail-page__header {
    margin-bottom: 20px;
}
.product-detail-page__back-link {
    display: inline-block;
    font-size: 16px;
    color: var(--color-text);
    text-decoration: none;
}
.product-detail__image-wrap {
    width: 100%;
    height: 220px;
    margin-bottom: 16px;
}
.product-detail__image {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 8px;
}
.product-detail__image-placeholder {
    width: 100%;
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #f2f2f2;
    color: #666666;
    font-size: 15px;
}
.product-detail__category {
    font-size: 15px;
    color: #555555;
    margin: 0 0 4px;
}
.product-detail__name {
    font-size: 24px;
    margin: 0 0 12px;
}
.product-detail__price {
    font-size: 28px;
    font-weight: bold;
    margin: 0 0 8px;
}
.product-detail__stock {
    font-size: 16px;
    color: #555555;
    margin: 0 0 8px;
}
.product-detail__order-period {
    font-size: 16px;
    color: #555555;
    margin: 0 0 4px;
}
.product-detail__delivery {
    font-size: 16px;
    margin: 0 0 4px;
}
.product-detail__delivery-note {
    font-size: 14px;
    color: #555555;
    margin: 0 0 16px;
}
.product-detail__description {
    font-size: 16px;
    line-height: 1.7;
    margin: 0 0 24px;
    white-space: pre-wrap;
}
.product-detail__order-button {
    display: block;
    width: 100%;
    min-height: 56px;
    font-size: 18px;
    font-weight: bold;
    color: #ffffff;
    background: var(--color-accent);
    border: none;
    border-radius: 8px;
    cursor: pointer;
}
.product-detail__order-button:disabled {
    background: #9e9e9e;
    cursor: default;
}
.product-detail__login-prompt {
    padding: 16px;
    border-radius: 8px;
    background: #e3f2fd;
    color: #1565c0;
    font-size: 16px;
    text-align: center;
}
.product-detail__login-prompt a {
    color: #1565c0;
    font-weight: bold;
}

/* 会員登録(B1)・ログイン(B2)共通画面。他画面のクラスと混ざらないよう auth-form-page__ / auth-form__ を接頭辞にする */
.auth-form-page__header {
    margin-bottom: 20px;
}
.auth-form-page__title {
    font-size: 24px;
    margin: 0;
}
.auth-step__actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 8px;
}
.auth-step__next {
    display: block;
    width: 100%;
    min-height: 56px;
    font-size: 18px;
    font-weight: bold;
    color: #ffffff;
    background: var(--color-accent);
    border: none;
    border-radius: 8px;
    cursor: pointer;
}
.auth-step__back {
    display: block;
    width: 100%;
    min-height: 48px;
    font-size: 16px;
    background: none;
    border: none;
    color: var(--color-text);
    cursor: pointer;
    text-align: left;
    padding: 0;
}
.auth-form__note {
    font-size: 15px;
    color: #555555;
    margin-bottom: 16px;
}
#auth-resend-button {
    display: block;
    width: 100%;
    min-height: 48px;
    font-size: 16px;
    border-radius: 8px;
    border: 1px solid var(--color-control-border);
    background: #ffffff;
    color: var(--color-text);
    cursor: pointer;
    margin-top: 8px;
}
#auth-resend-button:disabled {
    opacity: 0.5;
    cursor: default;
}
.auth-form__countdown {
    font-size: 14px;
    color: #555555;
    margin: 8px 0 0;
}
#auth-verify-button {
    display: block;
    width: 100%;
    min-height: 56px;
    font-size: 18px;
    font-weight: bold;
    color: #ffffff;
    background: var(--color-accent);
    border: none;
    border-radius: 8px;
    cursor: pointer;
}
#auth-verify-button:disabled {
    background: #9e9e9e;
    cursor: default;
}
.auth-form__switch {
    text-align: center;
    margin: 20px 0;
}
.auth-form__switch button {
    background: none;
    border: none;
    color: var(--color-accent);
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    text-decoration: underline;
}
.auth-form__footer-link {
    text-align: center;
    margin-top: 24px;
    font-size: 15px;
}
.auth-form__footer-link a {
    color: var(--color-accent);
    font-weight: bold;
}
#email-login-submit-button {
    display: block;
    width: 100%;
    min-height: 56px;
    font-size: 18px;
    font-weight: bold;
    color: #ffffff;
    background: var(--color-accent);
    border: none;
    border-radius: 8px;
    cursor: pointer;
}
#email-login-submit-button:disabled {
    background: #9e9e9e;
    cursor: default;
}

/* 注文内容の確認(B5)。他画面のクラスと混ざらないよう order-confirm-page__ / order-confirm__ を接頭辞にする */
.order-confirm-page__header {
    margin-bottom: 12px;
}
.order-confirm-page__back-link {
    display: inline-block;
    margin-bottom: 12px;
    font-size: 16px;
    color: var(--color-text);
    text-decoration: none;
}
.order-confirm-page__title {
    font-size: 22px;
    margin: 0;
}
.order-confirm-page__reassurance {
    padding: 12px 16px;
    border-radius: 8px;
    background: #e3f2fd;
    color: #1565c0;
    font-size: 15px;
    margin-bottom: 20px;
}
.order-confirm__summary {
    margin: 0 0 16px;
}
.order-confirm__summary dt {
    font-size: 14px;
    color: #555555;
    margin-top: 12px;
}
.order-confirm__summary dt:first-child {
    margin-top: 0;
}
.order-confirm__summary dd {
    margin: 4px 0 0;
    font-size: 18px;
}
.order-confirm__amount {
    font-size: 28px;
    font-weight: bold;
}
.order-confirm__delivery-note {
    font-size: 14px;
    color: #555555;
    margin: 0 0 20px;
}
.order-confirm__submit-button {
    display: block;
    width: 100%;
    min-height: 56px;
    font-size: 18px;
    font-weight: bold;
    color: #ffffff;
    background: var(--color-accent);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    margin-bottom: 12px;
}
.order-confirm__submit-button:disabled {
    background: #9e9e9e;
    cursor: default;
}
.order-confirm__cancel-link {
    display: block;
    text-align: center;
    min-height: 56px;
    line-height: 56px;
    font-size: 16px;
    border-radius: 8px;
    border: 1px solid var(--color-warning);
    background: var(--color-warning);
    color: #ffffff;
    text-decoration: none;
}

/* 注文完了(B6)。他画面のクラスと混ざらないよう order-complete-page__ / order-complete__ を接頭辞にする */
.order-complete-page {
    text-align: center;
}
.order-complete__icon {
    font-size: 48px;
    color: var(--color-accent);
    margin: 24px 0 12px;
}
.order-complete__heading {
    font-size: 22px;
    margin: 0 0 24px;
}
.order-complete__summary {
    text-align: left;
    margin: 0 0 24px;
}
.order-complete__summary dt {
    font-size: 14px;
    color: #555555;
    margin-top: 12px;
}
.order-complete__summary dt:first-child {
    margin-top: 0;
}
.order-complete__summary dd {
    margin: 4px 0 0;
    font-size: 20px;
    font-weight: bold;
}
.order-complete__back-link {
    display: inline-block;
    font-size: 16px;
    font-weight: bold;
    color: var(--color-accent);
    text-decoration: none;
}

/* 注文履歴(B7)。他画面のクラスと混ざらないよう order-history-page__ / order-history-card__ を接頭辞にする */
.order-history-page__header {
    margin-bottom: 12px;
}
.order-history-page__back-link {
    display: inline-block;
    margin-bottom: 12px;
    font-size: 16px;
    color: var(--color-text);
    text-decoration: none;
}
.order-history-page__title {
    font-size: 22px;
    margin: 0;
}
.order-history-page__filter {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}
.order-history-page__filter label {
    margin-bottom: 0;
    white-space: nowrap;
}
.order-history-empty {
    padding: 16px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: #f9f9f9;
    text-align: center;
}
.order-history-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.order-history-card {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 16px;
    background: #ffffff;
}
.order-history-card__date {
    font-size: 18px;
    font-weight: bold;
    margin: 0 0 8px;
}
.order-history-card__number,
.order-history-card__items {
    margin: 0 0 8px;
    color: #555555;
}
.order-history-card__amount {
    font-size: 20px;
    font-weight: bold;
    margin: 8px 0;
}
.order-history-card__actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}
.order-history-card__detail-link {
    display: block;
    text-align: center;
    min-height: 48px;
    line-height: 48px;
    font-size: 16px;
    font-weight: bold;
    color: var(--color-accent);
    text-decoration: none;
    border: 1px solid var(--color-accent);
    border-radius: 8px;
}
.order-history-card__reorder-button {
    display: block;
    width: 100%;
    min-height: 48px;
    font-size: 16px;
    font-weight: bold;
    color: #ffffff;
    background: var(--color-accent);
    border: none;
    border-radius: 8px;
    cursor: pointer;
}
.order-history-card__reorder-button:disabled {
    background: #9e9e9e;
    cursor: default;
}
.order-history-card__message {
    margin-top: 12px;
}

/* 購入者向け注文詳細の追加要素(構造自体はF4の.order-detail-page__ / .order-detail__を流用) */
.order-detail__reorder-button {
    display: block;
    width: 100%;
    min-height: 56px;
    font-size: 18px;
    font-weight: bold;
    color: #ffffff;
    background: var(--color-accent);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    margin-top: 20px;
}
.order-detail__reorder-button:disabled {
    background: #9e9e9e;
    cursor: default;
}

/* 通知一覧(B8)。他画面のクラスと混ざらないよう notifications-page__ / notification-card__ を接頭辞にする */
.notifications-page__header {
    margin-bottom: 12px;
}
.notifications-page__back-link {
    display: inline-block;
    margin-bottom: 12px;
    font-size: 16px;
    color: var(--color-text);
    text-decoration: none;
}
.notifications-page__title {
    font-size: 22px;
    margin: 0;
}
.notifications-page__mark-all-button {
    display: block;
    width: 100%;
    min-height: 48px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 8px;
    border: 1px solid var(--color-control-border);
    background: #ffffff;
    color: var(--color-text);
    cursor: pointer;
    margin-bottom: 20px;
}
.notifications-page__mark-all-button:disabled {
    opacity: 0.6;
    cursor: default;
}
.notifications-empty {
    padding: 16px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: #f9f9f9;
    text-align: center;
}
.notifications-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.notification-card {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 16px;
    background: #ffffff;
}
.notification-card--unread {
    border-color: var(--color-accent);
    background: #f3fbf3;
}
.notification-card__title-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 8px;
}
.notification-card__title {
    font-size: 18px;
    font-weight: bold;
}
.notification-card__unread-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: bold;
    background: var(--color-accent);
    color: #ffffff;
}
.notification-card__body {
    margin: 0 0 8px;
    white-space: pre-wrap;
}
.notification-card__date {
    font-size: 14px;
    color: #555555;
    margin: 0 0 12px;
}
.notification-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.notification-card__actions button {
    min-height: 44px;
    padding: 0 16px;
    font-size: 15px;
    border-radius: 8px;
    cursor: pointer;
}
.notification-card__view-button {
    border: 1px solid var(--color-accent);
    background: #ffffff;
    color: var(--color-accent);
    font-weight: bold;
}
.notification-card__read-button {
    border: 1px solid var(--color-control-border);
    background: #ffffff;
    color: var(--color-text);
}
.notification-card__read-button:disabled {
    opacity: 0.6;
    cursor: default;
}

/* 設定画面(B9・F1共通)。他画面のクラスと混ざらないよう settings-page__ を接頭辞にする */
.settings-page__header {
    margin-bottom: 12px;
}
.settings-page__back-link {
    display: inline-block;
    margin-bottom: 12px;
    font-size: 16px;
    color: var(--color-text);
    text-decoration: none;
}
.settings-page__checkbox-label {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: normal;
}
.settings-page__checkbox-label input[type="checkbox"] {
    width: 24px;
    height: 24px;
}