@charset "UTF-8";

/*
 * 広告枠システム スタイル
 *
 * 設計方針
 *  ・業務で使う画面なので配色は白ベースで固定する（OSのダークモードには追随しない）
 *  ・管理画面は左サイドナビ＋広いコンテンツ領域。一覧は表で見せる
 *  ・広告主向けの画面は読みやすさを優先し、中央寄せの1カラム
 *  ・ボタンは「主要 / 通常 / 危険 / 文字リンク」の4種に限定し、役割を色で示す
 */

/* ==================================================================
 * 基本
 * ================================================================== */

:root {
    /* 面 */
    --bg: #f4f5f7;
    --surface: #ffffff;
    --surface-alt: #fafbfc;

    /* 線 */
    --border: #d8dde3;
    --border-light: #e9edf1;

    /* 文字 */
    --text: #1f2328;
    --text-muted: #656d76;
    --text-subtle: #8b949e;

    /* 意味を持つ色 */
    --primary: #1c5fd6;
    --primary-hover: #174ead;
    --primary-bg: #eaf1fd;
    --primary-border: #b6cef5;

    --success: #1a7f37;
    --success-bg: #eaf6ec;
    --success-border: #b4ddbf;

    --danger: #c0293c;
    --danger-bg: #fdeeef;
    --danger-border: #f2c2c7;

    --warning: #8a6100;
    --warning-bg: #fdf5e3;
    --warning-border: #ecd9a5;

    /* 寸法 */
    --sidebar-w: 220px;
    --radius: 6px;
    --radius-lg: 10px;
    --shadow-sm: 0 1px 2px rgba(31, 35, 40, .06);
    --shadow: 0 2px 8px rgba(31, 35, 40, .08);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

/* hidden 属性を必ず効かせる。
 *
 * ブラウザ標準の [hidden] は display:none を当てるだけの弱い指定なので、
 * クラス側で display を持つ要素（.c-alert の display:flex など）に負けて
 * 表示されたままになる。JavaScriptで hidden を切り替えている箇所が
 * 効かなくなり、出るはずのない案内が出続ける。 */
[hidden] {
    display: none !important;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
    font-size: 15px;
    line-height: 1.75;
}

a {
    color: var(--primary);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

h1, h2, h3, h4 {
    margin: 0;
    line-height: 1.4;
    font-weight: 600;
}

p {
    margin: 0 0 1em;
}

p:last-child {
    margin-bottom: 0;
}

code {
    padding: .15em .4em;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .875em;
    background: var(--surface-alt);
    border: 1px solid var(--border-light);
    border-radius: 4px;
    word-break: break-all;
}

/* ==================================================================
 * レイアウト : 広告主向け（中央寄せ1カラム）
 * ================================================================== */

/* 本体サイトのヘッダー（.container）と同じ幅に合わせる。
   画面が狭くなったら左右に15pxの余白を残し、文字が端に貼り付かないようにする。 */
.l-public {
    max-width: 1150px;
    margin: 0 auto;
    padding: 32px 15px 64px;
}

.l-public__header {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

.l-public__brand {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
}

.l-public__brand:hover {
    text-decoration: none;
}

.l-public__account {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 13px;
    color: var(--text-muted);
}

/* ==================================================================
 * レイアウト : 管理画面（サイドナビ＋広いコンテンツ）
 * ================================================================== */

.l-admin {
    display: flex;
    min-height: 100vh;
}

/* ---- サイドナビ ---- */

.l-side {
    flex: 0 0 var(--sidebar-w);
    display: flex;
    flex-direction: column;
    background: #1f2937;
    color: #cbd5e1;
}

.l-side__brand {
    display: block;
    padding: 20px 20px 16px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    color: #ffffff;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.l-side__brand:hover {
    text-decoration: none;
}

.l-side__brand small {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    font-weight: 400;
    color: #94a3b8;
}

.l-side__nav {
    flex: 1;
    padding: 12px 0;
}

.l-side__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 20px;
    font-size: 13.5px;
    color: #cbd5e1;
    border-left: 3px solid transparent;
}

.l-side__link:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, .06);
    text-decoration: none;
}

.l-side__link.is-active {
    color: #ffffff;
    font-weight: 600;
    background: rgba(255, 255, 255, .1);
    border-left-color: var(--primary);
}

.l-side__count {
    min-width: 20px;
    padding: 1px 6px;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    color: #ffffff;
    background: var(--danger);
    border-radius: 999px;
}

.l-side__footer {
    padding: 14px 20px;
    font-size: 12px;
    color: #94a3b8;
    border-top: 1px solid rgba(255, 255, 255, .1);
}

.l-side__user {
    display: block;
    margin-bottom: 6px;
    color: #e2e8f0;
    word-break: break-all;
}

.l-side__logout {
    margin: 0;
}

.l-side__logout button {
    padding: 0;
    font-size: 12px;
    font-family: inherit;
    color: #94a3b8;
    background: none;
    border: 0;
    text-decoration: underline;
    cursor: pointer;
}

.l-side__logout button:hover {
    color: #ffffff;
}

/* ---- メイン ---- */

.l-main {
    flex: 1;
    min-width: 0;
    padding: 28px 32px 64px;
}

.l-main__inner {
    max-width: 1180px;
}

/* ==================================================================
 * ページ見出し
 * ================================================================== */

.c-page-head {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 22px;
}

/* 見出しと本文の差をはっきり付ける。
   近いサイズが並ぶと、どこが区切りなのかを読み取るのに
   いちいち文章を読まなければならなくなる。 */
.c-page-head__title {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.02em;
}

.c-page-head__lead {
    margin: 8px 0 0;
    font-size: 15px;
    line-height: 1.8;
    color: var(--text-muted);
}

.c-page-head__actions {
    display: flex;
    gap: 8px;
}

/* セクション見出し */
.c-section {
    margin-bottom: 36px;
}

.c-section__head {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 14px;
}

.c-section__title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -.01em;
}

.c-section__note {
    font-size: 13px;
    color: var(--text-muted);
}

.c-section__lead {
    margin: -4px 0 14px;
    font-size: 14.5px;
    color: var(--text-muted);
}

/* 手順の番号。いま何番目の作業なのかを形で示す */
.c-step {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    background: var(--primary);
    border-radius: 50%;
}

/* ==================================================================
 * パネル・カード
 * ================================================================== */

.c-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.c-panel__head {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-light);
}

.c-panel__title {
    font-size: 14px;
}

.c-panel__body {
    padding: 18px;
}

.c-panel__body--tight {
    padding: 0;
}

.c-panel__foot {
    padding: 12px 18px;
    background: var(--surface-alt);
    border-top: 1px solid var(--border-light);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* 複数を並べる */
.c-grid {
    display: grid;
    gap: 16px;
}

.c-grid--2 {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.c-grid--3 {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.c-grid--4 {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

/* ==================================================================
 * 統計タイル（稼働状況などの要約）
 * ================================================================== */

.c-stat {
    padding: 16px 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.c-stat--ok    { border-left-color: var(--success); }
.c-stat--warn  { border-left-color: var(--warning); }
.c-stat--alert { border-left-color: var(--danger); }

.c-stat__label {
    font-size: 12.5px;
    color: var(--text-muted);
}

.c-stat__value {
    margin-top: 4px;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.02em;
}

.c-stat__value--sm {
    font-size: 16px;
    font-weight: 600;
}

.c-stat__note {
    margin-top: 4px;
    font-size: 12px;
    color: var(--text-subtle);
}

.c-stat--alert .c-stat__value { color: var(--danger); }
.c-stat--ok .c-stat__value    { color: var(--success); }

/* ==================================================================
 * 表
 * ================================================================== */

.c-table-wrap {
    overflow-x: auto;
}

.c-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.c-table th,
.c-table td {
    padding: 11px 14px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--border-light);
}

.c-table thead th {
    position: sticky;
    top: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
    background: var(--surface-alt);
    border-bottom: 1px solid var(--border);
}

.c-table tbody tr:hover {
    background: var(--surface-alt);
}

.c-table tbody tr:last-child td {
    border-bottom: 0;
}

.c-table__nowrap {
    white-space: nowrap;
}

.c-table__num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.c-table__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
}

.c-table__actions form {
    margin: 0;
}

.c-table__sub {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
}

.c-table__mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    word-break: break-all;
}

/* 空状態 */
.c-empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--text-muted);
}

.c-empty__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}

.c-empty__note {
    margin-top: 6px;
    font-size: 13px;
}

/* ==================================================================
 * 定義リスト
 * ================================================================== */

.c-deflist {
    display: grid;
    grid-template-columns: minmax(120px, auto) 1fr;
    gap: 10px 20px;
    margin: 0;
    font-size: 13px;
}

.c-deflist dt {
    color: var(--text-muted);
}

.c-deflist dd {
    margin: 0;
    word-break: break-word;
}

/* ==================================================================
 * フォーム
 * ================================================================== */

.c-field {
    margin-bottom: 22px;
}

.c-field:last-child {
    margin-bottom: 0;
}

.c-field__label {
    display: block;
    margin-bottom: 7px;
    font-size: 14.5px;
    font-weight: 700;
}

.c-field__help {
    display: block;
    margin-top: 7px;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--text-muted);
}

.c-input,
.c-select,
.c-textarea {
    display: block;
    width: 100%;
    padding: 11px 14px;
    font-family: inherit;
    font-size: 15px;
    line-height: 1.5;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.c-input:focus,
.c-select:focus,
.c-textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-bg);
}

.c-input--sm  { max-width: 160px; }
.c-input--md  { max-width: 320px; }

.c-textarea {
    min-height: 90px;
    resize: vertical;
    line-height: 1.7;
}

.c-check {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-bottom: 10px;
    font-size: 15px;
    cursor: pointer;
}

.c-check:last-child {
    margin-bottom: 0;
}

.c-check input {
    margin-top: 4px;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
}

/* 選択肢そのものを大きな面にする。
   小さな丸だけを狙って押させるより、迷いようがなく間違えにくい。 */
.c-choice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 10px;
    padding: 16px 18px;
    font-size: 15.5px;
    font-weight: 600;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s, background .15s;
}

.c-choice:last-child {
    margin-bottom: 0;
}

.c-choice:hover {
    border-color: var(--primary-border);
    background: var(--surface-alt);
}

.c-choice input {
    margin-top: 2px;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    accent-color: var(--primary);
}

/* 選ばれている項目は面ごと色を変える */
.c-choice:has(input:checked) {
    background: var(--primary-bg);
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-bg);
}

/* 選べない項目は、押せないことが見て分かるようにする */
.c-choice:has(input:disabled) {
    opacity: .55;
    cursor: not-allowed;
    background: var(--surface-alt);
}

/* 帳票の操作メニュー。
 *
 * ダウンロード・再送・別アドレスへの送信を1つにまとめる。
 * 予約一覧は横に長いため、ボタンを並べると表が破綻する。 */
.c-docmenu {
    position: relative;
    display: inline-block;
}

/* 既定は閉じておく。開閉は admin.js が担当する。
   JavaScriptが動かない環境では開けないが、ダウンロードも再送も
   運営の利便のための機能で、これが使えなくても業務は止まらない。 */
.c-docmenu__body {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 30;
    width: 250px;
    padding: 10px;
    text-align: left;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.c-docmenu.is-open .c-docmenu__body {
    display: block;
}

.c-docmenu__no {
    margin-bottom: 8px;
    padding-bottom: 8px;
    font-size: 11.5px;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-light);
    word-break: break-all;
}

.c-docmenu__item {
    display: block;
    width: 100%;
    padding: 7px 8px;
    font-size: 13.5px;
    font-family: inherit;
    text-align: left;
    color: var(--text);
    background: none;
    border: 0;
    border-radius: var(--radius);
    cursor: pointer;
}

.c-docmenu__item:hover {
    background: var(--primary-bg);
    text-decoration: none;
}

.c-docmenu__form {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border-light);
}

.c-docmenu__label {
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    color: var(--text-muted);
}

.c-docmenu__form .c-input {
    max-width: none;
    margin-bottom: 6px;
}

/* 補足説明の吹き出し。
 *
 * 「なぜ選べないのか」を、選べなくなってから伝えるのでは遅い。
 * 条件そのものは常に見える場所に置き、詳しい説明は必要な人だけが
 * 開けるようにする。
 *
 * hover だけでなく focus でも開く。スマートフォンでは指で触れると
 * focus が当たるため、これがないと開けない。
 */
.c-help {
    position: relative;
    display: inline-flex;
    vertical-align: middle;
    margin-left: 6px;
}

.c-help__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    color: #ffffff;
    background: var(--text-subtle);
    border: 0;
    border-radius: 50%;
    cursor: help;
    padding: 0;
}

.c-help__icon:hover,
.c-help__icon:focus {
    background: var(--primary);
    outline: none;
}

.c-help__body {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 20;
    width: 340px;
    max-width: 78vw;
    padding: 12px 14px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.75;
    text-align: left;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    visibility: hidden;
    opacity: 0;
    transition: opacity .12s;
}

/* 吹き出しの三角 */
.c-help__body::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 6px;
    width: 10px;
    height: 10px;
    background: var(--surface);
    border-left: 1px solid var(--border);
    border-top: 1px solid var(--border);
    transform: rotate(45deg);
}

.c-help:hover .c-help__body,
.c-help:focus-within .c-help__body {
    visibility: visible;
    opacity: 1;
}

.c-choice__note {
    display: block;
    margin-top: 3px;
    font-size: 13px;
    font-weight: 400;
    color: var(--text-muted);
}

/* 横並びのフォーム（絞り込みなど） */
.c-inline-form {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-end;
}

.c-inline-form .c-field {
    margin-bottom: 0;
}

.c-inline-form .c-input,
.c-inline-form .c-select {
    width: auto;
    min-width: 150px;
}

.c-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 20px;
}

.c-form-actions--right {
    justify-content: flex-end;
}

/* 申し込みの最後の一押し。
   ボタンを画面の中央に大きく置き、注意書きはその下に回す。
   横に並べると、ボタンと同じ高さにある文字がボタンの一部に見える。 */
.c-form-actions--center {
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 32px;
    text-align: center;
}

/* ==================================================================
 * ボタン
 * ================================================================== */

.c-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 18px;
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    text-decoration: none;
}

.c-btn:hover {
    background: var(--surface-alt);
    text-decoration: none;
}

.c-btn:disabled,
.c-btn.is-disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* 主要操作 */
.c-btn--primary {
    color: #ffffff;
    background: var(--primary);
    border-color: var(--primary);
}

.c-btn--primary:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
}

/* 取り返しのつかない操作 */
.c-btn--danger {
    color: var(--danger);
    border-color: var(--danger-border);
}

.c-btn--danger:hover {
    color: #ffffff;
    background: var(--danger);
    border-color: var(--danger);
}

.c-btn--sm {
    padding: 5px 10px;
    font-size: 12.5px;
}

.c-btn--lg {
    padding: 15px 34px;
    font-size: 17px;
    font-weight: 700;
    border-radius: var(--radius-lg);
    box-shadow: 0 2px 6px rgba(28, 95, 214, .25);
}

/* 迷わず押せる幅にする。狭い画面では端いっぱいまで広がる */
.c-btn--wide {
    width: 100%;
    max-width: 420px;
}

.c-btn--block {
    width: 100%;
}

.c-btn--link {
    padding: 0;
    font-weight: 400;
    color: var(--primary);
    background: none;
    border: 0;
    box-shadow: none;
    text-decoration: underline;
}

.c-btn--link:hover {
    background: none;
    color: var(--primary-hover);
}

.c-btn--link.is-danger {
    color: var(--danger);
}

/* ==================================================================
 * 通知・バッジ
 * ================================================================== */

.c-alert {
    display: flex;
    gap: 10px;
    padding: 12px 16px;
    margin-bottom: 18px;
    font-size: 13.5px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.c-alert__body {
    flex: 1;
    min-width: 0;
}

.c-alert__title {
    font-weight: 600;
}

.c-alert__note {
    margin-top: 3px;
    font-size: 12.5px;
    opacity: .9;
}

.c-alert--ok {
    color: #12511f;
    background: var(--success-bg);
    border-color: var(--success-border);
}

.c-alert--warn {
    color: #6b4b00;
    background: var(--warning-bg);
    border-color: var(--warning-border);
}

.c-alert--error {
    color: #8f1d2c;
    background: var(--danger-bg);
    border-color: var(--danger-border);
}

.c-alert--info {
    color: #123f96;
    background: var(--primary-bg);
    border-color: var(--primary-border);
}

/* 要対応。管理画面のどのページでも、本文の前に置く。
 * 朝いちばんに開いた人が、下までスクロールせずに気づけること。 */

.c-attention {
    padding: 14px 16px;
    margin-bottom: 20px;
    background: var(--danger-bg);
    border: 1px solid var(--danger-border);
    border-left: 4px solid var(--danger);
    border-radius: var(--radius);
}

.c-attention__title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--danger);
}

.c-attention__total {
    min-width: 20px;
    padding: 1px 7px;
    font-size: 11.5px;
    line-height: 18px;
    color: #ffffff;
    background: var(--danger);
    border-radius: 999px;
}

.c-attention__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.c-attention__item + .c-attention__item {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--danger-border);
}

.c-attention__link {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--danger);
}

.c-attention__link:hover {
    color: var(--danger);
}

/* 黄は「今日でなくてよい」もの。赤の中に混ざっても区別がつくようにする。 */
.c-attention__item--warn .c-attention__link {
    color: var(--warning);
}

.c-attention__count {
    margin-left: 4px;
}

.c-attention__note {
    display: block;
    margin-top: 2px;
    font-size: 12.5px;
    color: var(--text-muted);
}

.c-badge {
    display: inline-block;
    padding: 2px 9px;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
    border-radius: 999px;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    color: var(--text-muted);
}

.c-badge--live,
.c-badge--approved {
    color: #12511f;
    background: var(--success-bg);
    border-color: var(--success-border);
}

.c-badge--scheduled,
.c-badge--paid {
    color: #123f96;
    background: var(--primary-bg);
    border-color: var(--primary-border);
}

.c-badge--in_review,
.c-badge--pending,
.c-badge--awaiting_content {
    color: #6b4b00;
    background: var(--warning-bg);
    border-color: var(--warning-border);
}

.c-badge--cancelled,
.c-badge--suspended,
.c-badge--rejected {
    color: #8f1d2c;
    background: var(--danger-bg);
    border-color: var(--danger-border);
}

.c-badge--finished,
.c-badge--pending_payment {
    color: var(--text-muted);
}

/* ==================================================================
 * 承認待ちカード
 * ================================================================== */

.c-review {
    display: grid;
    grid-template-columns: minmax(240px, 320px) 1fr;
    gap: 0;
    overflow: hidden;
}

.c-review__preview {
    padding: 18px;
    background: var(--surface-alt);
    border-right: 1px solid var(--border-light);
}

.c-review__media {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    overflow: hidden;
    background: #000000;
    border-radius: var(--radius);
}

.c-review__media iframe,
.c-review__media img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: contain;
}

.c-review__banner {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius);
    border: 1px solid var(--border-light);
}

.c-review__body {
    padding: 18px;
}

.c-review__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-end;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--border-light);
}

.c-review__reject {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-end;
    flex: 1;
    min-width: 260px;
}

.c-review__reject .c-select {
    width: auto;
    min-width: 200px;
}

.c-review__reject .c-input {
    flex: 1;
    min-width: 160px;
}

/* ==================================================================
 * 空き状況カレンダー（管理画面）
 * ================================================================== */

.c-availability {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
    gap: 4px;
}

.c-availability__cell {
    padding: 7px 4px;
    text-align: center;
    background: var(--surface-alt);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
}

.c-availability__cell.is-low {
    background: var(--warning-bg);
    border-color: var(--warning-border);
}

.c-availability__cell.is-full {
    background: var(--danger-bg);
    border-color: var(--danger-border);
}

.c-availability__date {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
}

.c-availability__count {
    display: block;
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ==================================================================
 * ページ送り
 * ================================================================== */

.c-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    color: var(--text-muted);
}

.c-pager__links {
    display: flex;
    gap: 8px;
}

/* ==================================================================
 * 広告主向け : 購入画面まわり
 * ================================================================== */

/* 料金は「見るもの」であって「選ぶもの」ではない。
 *
 * 白いカードに枠線を付けると、この画面では支払方法の選択肢と
 * 同じ見た目になり、押せるものだと読める。実際には押しても何も
 * 起きないので、押してみて反応がない＝壊れている、と受け取られる。
 *
 * そこで枠線と白い面をやめ、1枚の帯の中を仕切り線で分けた表に近い
 * 見た目にしている。この画面での約束は
 *   「白いカード＋枠線」＝押せる
 *   「枠線のない帯」    ＝読むだけ
 * となる。
 */
.c-plan {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--surface-alt);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

@media (max-width: 620px) {
    .c-plan {
        grid-template-columns: 1fr;
    }
}

.c-plan__item {
    padding: 18px 20px;
    cursor: default;
}

.c-plan__item + .c-plan__item {
    border-left: 1px solid var(--border-light);
}

@media (max-width: 620px) {
    .c-plan__item + .c-plan__item {
        border-left: 0;
        border-top: 1px solid var(--border-light);
    }
}

/* いま適用されている料金だけに印を付ける。
   選ぶものではないので、常時どちらかを強調しない。 */
.c-plan__item.is-active {
    background: var(--primary-bg);
}

.c-plan__head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 2px;
}

.c-plan__name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-muted);
}

.c-plan__applied {
    padding: 2px 9px;
    font-size: 11.5px;
    font-weight: 700;
    color: #ffffff;
    background: var(--primary);
    border-radius: 999px;
}

.c-plan__price {
    margin: 2px 0;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.03em;
}

.c-plan__price small {
    font-size: 13px;
    font-weight: 400;
    color: var(--text-muted);
    letter-spacing: 0;
}

.c-plan__note {
    font-size: 12.5px;
    color: var(--text-muted);
}

/* カレンダー（購入画面） */
.c-cal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.c-cal__month {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -.01em;
}

/* 2か月を横に並べる。
   1か月だけだと、月をまたぐ期間を選ぶために月を移動した瞬間に
   選んだ日が画面から消える。狭い画面では縦に積む。 */
.c-cal__months {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

@media (max-width: 780px) {
    .c-cal__months {
        grid-template-columns: 1fr;
    }
}

.c-cal__caption {
    margin-bottom: 8px;
    padding-bottom: 6px;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    border-bottom: 1px solid var(--border-light);
}

.c-cal__actions {
    display: flex;
    justify-content: center;
    margin-top: 14px;
}

.c-cal__loading {
    margin: 8px 0 0;
    font-size: 12.5px;
    text-align: center;
    color: var(--text-muted);
}

.c-cal__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
}

.c-cal__weekday {
    padding: 6px 0;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    color: var(--text-muted);
}

.c-cal__cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    min-height: 62px;
    padding: 6px 2px;
    font-family: inherit;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    cursor: pointer;
    /* 素早く2回押したときに日付の数字が選択されないようにする。
       操作はクリックだけなので、スクロールは妨げない。 */
    user-select: none;
}

.c-cal__cell:hover:not(:disabled) {
    border-color: var(--primary);
}

.c-cal__cell--blank {
    background: transparent;
    border-color: transparent;
    cursor: default;
}

.c-cal__cell.is-disabled {
    color: var(--text-subtle);
    background: var(--surface-alt);
    cursor: not-allowed;
}

/* 期間選択。選んだ日はすべて同じ青で塗る。
   両端と途中で濃さを変えると、どこまで選べているのかが
   かえって読み取りにくくなるため、塗り分けはしない。 */
.c-cal__cell.is-selected {
    color: #ffffff;
    background: var(--primary);
    border-color: var(--primary);
}

.c-cal__cell.is-selected .c-cal__remaining {
    color: rgba(255, 255, 255, .85);
}

/* 上限（連続30日）を超える日。選ばせない */
.c-cal__cell.is-out-of-reach {
    opacity: .45;
}

.c-cal__day {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
}

.c-cal__remaining {
    font-size: 11.5px;
    color: var(--text-muted);
    /* 「残5枠」で1つの言葉。狭い画面でも途中で折らない */
    white-space: nowrap;
}

.c-cal__legend {
    margin: 12px 0 0;
    font-size: 12.5px;
    color: var(--text-muted);
}

/* 選択中の案内。カレンダーの真上に出して操作と結び付ける */
.c-cal__hint {
    margin: 0 0 14px;
    padding: 11px 14px;
    font-size: 14px;
    font-weight: 500;
    color: #123f96;
    background: var(--primary-bg);
    border: 1px solid var(--primary-border);
    border-radius: var(--radius);
}

.c-cal__hint--warn {
    color: #6b4b00;
    background: var(--warning-bg);
    border-color: var(--warning-border);
}


/* 見積 */
.c-quote {
    padding: 18px 20px;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.c-quote__row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 5px 0;
    font-size: 14px;
}

.c-quote__row--total {
    margin-top: 8px;
    padding-top: 12px;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -.02em;
    border-top: 1px solid var(--border);
}

.c-quote__label {
    color: var(--text-muted);
}

.c-quote__row--total .c-quote__label {
    color: var(--text);
}

.c-quote__nudge {
    margin: 12px 0 0;
    padding: 11px 14px;
    font-size: 13px;
    background: var(--primary-bg);
    border-left: 3px solid var(--primary);
    border-radius: 3px;
}

/* 決済ページで選べるお支払い方法。
 *
 * 「何が使えるか」と「いつ使えるか」を必ず対で出す。
 * 名前だけ並べると、直前の日程でコンビニ決済を当てにされて
 * 決済ページで詰まる。使えない行は打ち消して、理由を横に置く。 */
.c-paylist {
    display: block;
    margin: 12px 0 0;
    padding: 12px 14px;
    background: var(--surface-alt);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
}

.c-paylist__item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 16px;
    padding: 6px 0;
    font-size: 13.5px;
    font-weight: 400;
}

.c-paylist__item + .c-paylist__item {
    border-top: 1px dashed var(--border-light);
}

.c-paylist__name {
    font-weight: 600;
}

.c-paylist__when {
    color: var(--text-muted);
    font-size: 12.5px;
}

/* 使えない方法は、名前そのものを打ち消して見せる。
   文字色を薄くするだけだと、読み飛ばされて期待させてしまう。 */
.c-paylist__item.is-unavailable .c-paylist__name {
    color: var(--text-subtle);
    text-decoration: line-through;
}

.c-paylist__item.is-unavailable .c-paylist__when {
    color: var(--warning);
}

.c-paylist__foot {
    margin: 10px 0 0;
    font-size: 13px;
    color: var(--text-muted);
}

.c-terms-box {
    max-height: 200px;
    padding: 12px 14px;
    overflow-y: auto;
    font-size: 12.5px;
    line-height: 1.8;
    white-space: pre-wrap;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

/* 手順 */
.c-steps {
    margin: 0;
    padding-left: 1.3em;
    font-size: 13.5px;
}

.c-steps li {
    margin-bottom: 6px;
}

/* ==================================================================
 * 予約カード（マイページ）
 * ================================================================== */

.c-booking {
    margin-bottom: 18px;
}

.c-booking__head {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
}

.c-booking__period {
    font-size: 15px;
    font-weight: 600;
}

.c-booking__id {
    font-size: 12px;
    color: var(--text-muted);
}

.c-booking__content {
    padding: 14px;
    margin-bottom: 14px;
    background: var(--surface-alt);
    border-radius: var(--radius);
}

.c-booking__thumb {
    max-width: 240px;
    height: auto;
    border-radius: var(--radius);
    border: 1px solid var(--border-light);
}

.c-disclosure {
    margin-top: 4px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
}

.c-disclosure__summary {
    padding: 11px 14px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    background: var(--surface-alt);
    border-radius: var(--radius);
}

.c-disclosure[open] .c-disclosure__summary {
    border-bottom: 1px solid var(--border-light);
    border-radius: var(--radius) var(--radius) 0 0;
}

.c-disclosure__body {
    padding: 16px;
}

/* ==================================================================
 * 診断チェックリスト
 * ================================================================== */

.c-checks {
    list-style: none;
    margin: 0;
    padding: 0;
}

.c-checks__item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 11px 18px;
    border-bottom: 1px solid var(--border-light);
}

.c-checks__item:last-child {
    border-bottom: 0;
}

.c-checks__mark {
    flex: 0 0 18px;
    font-weight: 700;
    line-height: 1.6;
}

.c-checks__mark.is-ok { color: var(--success); }
.c-checks__mark.is-ng { color: var(--danger); }

.c-checks__label {
    font-size: 13.5px;
    font-weight: 600;
}

.c-checks__detail {
    font-size: 12.5px;
    color: var(--text-muted);
    word-break: break-word;
}

/* 一覧の行（ブロック日・バックアップなど） */
.c-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.c-list__item {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    padding: 11px 18px;
    border-bottom: 1px solid var(--border-light);
}

.c-list__item:last-child {
    border-bottom: 0;
}

.c-list__main {
    font-size: 13.5px;
}

.c-list__sub {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
}

.c-list__item form {
    margin: 0;
}

/* ==================================================================
 * 掲載プレビュー
 * ================================================================== */

.c-preview {
    max-width: 320px;
    padding: 14px;
    background: var(--surface-alt);
    border: 1px dashed var(--border);
    border-radius: var(--radius);
}

.c-preview .adslot-slot__caption {
    color: var(--text);
}

/* ==================================================================
 * ユーティリティ
 * ================================================================== */

.u-muted   { color: var(--text-muted); }
.u-danger  { color: var(--danger); }
.u-small   { font-size: 12.5px; }
.u-mb-0    { margin-bottom: 0; }
.u-mb-sm   { margin-bottom: 10px; }
.u-mb      { margin-bottom: 18px; }
.u-mt      { margin-top: 18px; }
.u-nowrap  { white-space: nowrap; }
.u-break   { word-break: break-all; }

/* ==================================================================
 * 画面幅が狭いとき
 * ================================================================== */

@media (max-width: 900px) {
    .l-admin {
        flex-direction: column;
    }

    .l-side {
        flex: none;
    }

    .l-side__nav {
        display: flex;
        flex-wrap: wrap;
        padding: 6px 8px;
    }

    .l-side__link {
        padding: 8px 12px;
        border-left: 0;
        border-bottom: 3px solid transparent;
        border-radius: var(--radius);
    }

    .l-side__link.is-active {
        border-left: 0;
        border-bottom-color: var(--primary);
    }

    .l-side__footer {
        display: flex;
        gap: 14px;
        align-items: center;
        justify-content: space-between;
    }

    .l-side__user {
        margin-bottom: 0;
    }

    .l-main {
        padding: 20px 16px 48px;
    }

    .c-review {
        grid-template-columns: 1fr;
    }

    .c-review__preview {
        border-right: 0;
        border-bottom: 1px solid var(--border-light);
    }
}

@media (max-width: 600px) {
    .c-page-head {
        flex-direction: column;
        align-items: stretch;
    }

    .c-deflist {
        grid-template-columns: 1fr;
        gap: 2px 0;
    }

    .c-deflist dd {
        margin-bottom: 10px;
    }

    .c-table__actions {
        justify-content: flex-start;
    }
}

/* ------------------------------------------------------------------ *
 * ロゴ
 * ------------------------------------------------------------------ */

.l-side__logo {
    display: block;
    width: 100%;
    max-width: 150px;
    height: auto;
}

.l-side__brandtext {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
}

.l-public__brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.l-public__logo {
    display: block;
    width: auto;
    height: 26px;
}

.l-public__brandtext {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-muted);
    padding-left: 10px;
    border-left: 1px solid var(--border);
}

/* ------------------------------------------------------------------ *
 * 本体サイトのヘッダー・フッターの中に置く場合
 * ------------------------------------------------------------------ */

.l-public--framed {
    padding-top: 24px;
}

.l-public__bar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
}

.l-public__home {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
}

.l-public__home:hover {
    text-decoration: none;
}

/* ==================================================================
 * 申込ページの装飾（デザイナー指定 / Figma: 肥後ジャーナル自販機）
 *
 * 「広告枠について」は赤、「お申し込み」は青。この2色で
 * 「読むところ」と「操作するところ」を分けている。
 * 色の指定はデザイナーの値をそのまま使う。
 * ================================================================== */

:root {
    /* 肥後ジャーナルの赤。--danger（警告の赤）とは用途が違うので分ける */
    --brand-red: #c2292d;
    --brand-red-dark: #a62125;
    /* マーカー */
    --marker: rgba(251, 196, 38, .5);
}

/* ---- 赤帯の見出し ---- */

.c-hero {
    position: relative;
    display: flex;
    align-items: baseline;
    gap: 18px;
    /* 右端のイラストが帯の上にはみ出す。その分の余白を上に取る */
    margin: 28px 0 20px;
    padding: 14px 24px;
    background: var(--brand-red);
    border-radius: 7px;
}

.c-hero__title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 18px;
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.3;
    color: #ffffff;
}

.c-hero__en {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    opacity: .95;
}

.c-hero__figure {
    position: absolute;
    right: 32px;
    bottom: 0;
    width: 54px;
    height: 94px;
}

@media (max-width: 720px) {
    .c-hero {
        padding-right: 76px;
    }

    .c-hero__title {
        font-size: 21px;
    }

    .c-hero__en {
        font-size: 12px;
    }

    .c-hero__figure {
        right: 14px;
        width: 40px;
        height: 70px;
    }
}

/* ---- 白いカード ---- */

.c-card {
    margin-bottom: 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 7px;
}

.c-card__head {
    display: flex;
    align-items: center;
    gap: 12px;
    /* 罫線をカードの端まで伸ばさず、本文と同じ幅で止める */
    margin: 0 28px;
    padding: 22px 0 14px;
    border-bottom: 3px solid var(--border);
}

.c-card__head--red {
    border-bottom-color: var(--brand-red);
}

.c-card__head--blue {
    border-bottom-color: var(--primary);
}

.c-card__icon {
    flex: none;
    width: 40px;
    height: 40px;
}

.c-card__title {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
}

.c-card__body {
    padding: 24px 28px 28px;
}

.c-card__subtitle {
    margin: 0 0 6px;
    font-size: 19px;
    font-weight: 700;
}

.c-card__lead {
    margin: 0 0 16px;
    font-size: 14.5px;
}

@media (max-width: 720px) {
    .c-card__head {
        margin: 0 16px;
        padding: 16px 0 10px;
        gap: 9px;
    }

    .c-card__icon {
        width: 30px;
        height: 30px;
    }

    .c-card__title {
        font-size: 19px;
    }

    .c-card__body {
        padding: 18px 16px 22px;
    }
}

/* ---- 広告枠について ---- */

.c-about {
    display: flex;
    gap: 32px;
    align-items: flex-start;
}

.c-about__text {
    flex: 1;
    min-width: 0;
}

.c-about__lead {
    margin: 0 0 8px;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.5;
}

.c-about__lead:not(:first-child) {
    margin-top: 26px;
}

.c-about__note {
    margin: 0;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.6;
}

/* マーカー。太字ではなく色で引くのがデザイナーの指定 */
.c-marker {
    padding: 0 1px;
    color: inherit;
    background: var(--marker);
}

.c-about__figure {
    position: relative;
    flex: none;
    width: 400px;
    overflow: hidden;
    border: 1px solid var(--border-light);
    border-radius: 7px;
}

.c-about__thumb {
    display: block;
    width: 100%;
    /* 記事ページの上のほうだけを見せる。全体を入れると何も読めない */
    aspect-ratio: 402 / 216;
    object-fit: cover;
    object-position: top center;
}

/* 押せることが伝わるよう、画像を暗くしてボタンを浮かせる */
.c-areabtn {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    width: 260px;
    max-width: calc(100% - 32px);
    padding: 14px 18px;
    font-size: 17px;
    font-weight: 700;
    color: #ffffff;
    background: var(--brand-red);
    border: 0;
    border-radius: 70px;
    transform: translate(-50%, -50%);
    cursor: pointer;
}

.c-about__figure::after {
    position: absolute;
    inset: 0;
    content: "";
    background: rgba(0, 0, 0, .6);
    pointer-events: none;
}

.c-areabtn:hover {
    background: var(--brand-red-dark);
}

.c-areabtn__icon {
    width: 26px;
    height: 26px;
}

@media (max-width: 900px) {
    .c-about {
        flex-direction: column;
    }

    .c-about__figure {
        width: 100%;
    }
}

/* ---- 料金プラン ---- */

.c-plan {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 7px;
}

.c-plan__item {
    padding: 16px 20px;
}

.c-plan__item.is-active {
    background: var(--primary-bg);
}

/* 左だけが選ばれているときに角が飛び出さないようにする */
.c-plan__item:first-child.is-active {
    border-radius: 7px 0 0 7px;
}

.c-plan__item:last-child.is-active {
    border-radius: 0 7px 7px 0;
}

.c-plan__head {
    flex-wrap: wrap;
}

.c-plan__name {
    font-size: 14.5px;
}

.c-plan__save {
    padding: 2px 12px;
    font-size: 13px;
    font-weight: 700;
    color: #ffffff;
    background: var(--brand-red);
    border-radius: 999px;
}

.c-plan__applied {
    font-size: 13px;
}

.c-plan__price {
    font-size: 30px;
}

.c-plan__price small {
    font-size: 13.5px;
}

.c-plan__note {
    font-size: 13.5px;
}

@media (max-width: 620px) {
    .c-plan__item:first-child.is-active,
    .c-plan__item:last-child.is-active {
        border-radius: 0;
    }
}

/* ---- STEP の帯 ---- */

.c-stepbar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    align-items: center;
    margin: 28px 0 0;
    padding: 14px 20px;
    background: var(--primary);
    border-radius: 7px;
}

.c-stepbar__badge {
    flex: none;
    padding: 3px 12px;
    font-size: 14px;
    font-weight: 700;
    color: var(--primary);
    background: #ffffff;
    border-radius: 6px;
}

.c-stepbar__title {
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
}

/* 補足は右端へ。狭いときは折り返して左に並ぶ */
.c-stepbar__note {
    margin-left: auto;
    font-size: 13.5px;
    color: #ffffff;
}

.c-stepbody {
    padding: 20px 2px 0;
}

@media (max-width: 720px) {
    .c-stepbar {
        padding: 12px 14px;
    }

    .c-stepbar__title {
        font-size: 16px;
    }

    .c-stepbar__note {
        margin-left: 0;
        font-size: 12.5px;
    }

    .c-stepbody {
        padding-top: 16px;
    }
}

/* ---- 規約を開くリンク ---- */

/* 見た目はリンク、正体はボタン。文中に置くため下線と色を付ける */
.c-termslink {
    padding: 0;
    font: inherit;
    color: var(--primary);
    text-decoration: underline;
    background: none;
    border: 0;
    cursor: pointer;
}

.c-termslink:hover {
    color: var(--primary-hover);
}

/* 同意欄は <label> ではなく <div>。中の文字だけが label になっている */
.c-choice > span > label {
    cursor: pointer;
}

/* ==================================================================
 * モーダル
 * ================================================================== */

.c-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
}

.c-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .55);
}

.c-modal__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 1210px;
    max-width: 100%;
    /* 入りきらないときは本文を縦スクロールさせる。
       モーダルごと伸ばすと、閉じるボタンに戻れなくなる */
    max-height: calc(100vh - 48px);
    background: var(--surface);
    border-radius: 7px;
    box-shadow: 0 18px 50px rgba(15, 23, 42, .3);
}

.c-modal__panel--narrow {
    width: 780px;
}

.c-modal__head {
    display: flex;
    flex: none;
    gap: 12px;
    align-items: center;
    margin: 0 28px;
    padding: 24px 0 14px;
    border-bottom: 4px solid var(--border);
}

.c-modal__head--red {
    border-bottom-color: var(--brand-red);
}

.c-modal__body {
    flex: 1;
    min-height: 0;
    padding: 20px 28px 28px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.c-modal__lead {
    margin: 0 0 20px;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.6;
}

.c-modal__close {
    position: absolute;
    top: -14px;
    right: -14px;
    width: 48px;
    height: 48px;
    font-size: 24px;
    line-height: 1;
    color: var(--text);
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 999px;
    box-shadow: var(--shadow);
    cursor: pointer;
}

.c-modal__close:hover {
    background: var(--surface-alt);
}

/* モーダルの裏がスクロールしないように止める */
body.is-modal-open {
    overflow: hidden;
}

@media (max-width: 720px) {
    .c-modal {
        padding: 16px 10px;
    }

    .c-modal__head {
        margin: 0 16px;
        padding: 20px 0 10px;
    }

    .c-modal__body {
        padding: 16px 16px 22px;
    }

    .c-modal__close {
        top: -10px;
        right: -6px;
        width: 40px;
        height: 40px;
    }
}

/* 規約はモーダル本文がスクロールするので、中身側では抑えない */
.c-terms-box--plain {
    max-height: none;
    overflow: visible;
    font-size: 13.5px;
    background: none;
    border: 0;
    padding: 0;
}

/* ==================================================================
 * 表示エリア詳細
 * ================================================================== */

.c-area {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.c-area__col {
    flex: 1;
    min-width: 0;
    padding: 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 7px;
}

/* スマホ側の作例は細いので、場所を取らせない */
.c-area__col--sp {
    flex: none;
    width: 313px;
}

.c-area__label {
    margin-bottom: 12px;
    font-size: 18px;
    font-weight: 700;
}

.c-area__shot {
    position: relative;
}

.c-area__shot img {
    display: block;
    width: 100%;
}

/* 広告枠の位置を示す赤い枠。座標はデザイン（Figma）の比率そのまま */
.c-area__mark {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 0, 0, .6);
    border: 3px dashed #ff0000;
    border-radius: 8px;
}

.c-area__mark > span {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
    color: #ffffff;
    /* 枠が縦長なので、文字も縦に組む */
    writing-mode: vertical-rl;
}

.c-area__mark--pc {
    top: 25.25%;
    left: 72.76%;
    width: 19.82%;
    height: 72.26%;
}

.c-area__mark--sp {
    top: 61.29%;
    left: 0;
    width: 99.69%;
    height: 38.45%;
}

.c-area__mark--sp > span {
    font-size: 34px;
}

/* ---- スマホ側の作例 ---- */

/* デザイナーが3枚のスクリーンショットを縦に継いで1画面に見せている。
   各断片は「窓」で、その中で画像をずらして必要な部分だけ出す。
   比率はすべてデザインの座標から出している。 */
/* 作例そのものはデザインの実寸（183px）。枠いっぱいに広げると
   縦に伸びて、パソコン側と高さが揃わなくなる */
.c-area__shot--sp {
    width: 183px;
    margin: 0 auto;
    aspect-ratio: 182.93 / 637.92;
}

.c-sp__part {
    position: absolute;
    left: 1.09%;
    width: 97.94%;
    overflow: hidden;
}

.c-sp__part img {
    position: absolute;
}

.c-sp__part--head {
    top: 0;
    height: 30.09%;
}

.c-sp__part--head img {
    left: -1.35%;
    top: 1.6%;
    width: 102.6%;
}

.c-sp__part--mid {
    top: 28.47%;
    height: 32.77%;
}

.c-sp__part--mid img {
    left: -.69%;
    top: -3.64%;
    width: 101.19%;
}

.c-sp__part--foot {
    top: 61.88%;
    height: 38.12%;
}

.c-sp__part--foot img {
    left: 0;
    top: 0;
    width: 100.03%;
}

/* 「最新記事エリア省略」の帯。ちぎった紙のような形はデザインのSVG */
.c-sp__omit {
    position: absolute;
    top: 23.64%;
    left: .55%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 99.46%;
    height: 5.48%;
    font-size: 10.5px;
    font-weight: 700;
    background: url("../images/booking/sp-omit-band.svg") center / 100% 100% no-repeat;
}

@media (max-width: 900px) {
    .c-area {
        flex-direction: column;
    }

    .c-area__col--sp {
        width: 100%;
    }

    /* 幅いっぱいに伸ばすと作例が間延びするので、中央に寄せて止める */
    .c-area__col--sp .c-area__shot {
        width: 280px;
        margin: 0 auto;
    }

    .c-area__mark--pc > span {
        font-size: 20px;
    }
}