/* 共通ヘッダーのすぐ下に細い帯（見出し 1 行と一言）→ すぐ作る画面。説明・使い方・FAQ・パンくずは作る画面の下 */
[data-schedule-bar] { display: flex; align-items: baseline; flex-wrap: wrap; gap: .25rem 1rem; margin: .5rem 0; min-height: 2rem; }
.bc.ds [data-schedule-bar] h1 { margin: 0; font-size: 1.125rem; line-height: 1.4; }
[data-schedule-bar] p { margin: 0; font-size: .875rem; color: var(--bc-text-muted, #5b6b73); }
/* 帯と作る画面は、全幅のヘッダーと同じ幅（--bc-wide-max・bc-ui.css）。本文の段より広いので、横の位置は parent.js が画面の真ん中に合わせる（ヘッダーと同じ中心） */
@media (min-width: 48.0625rem) { [data-schedule-wrap] { width: min(calc(100vw - 48px), var(--bc-wide-max, 1280px)); max-width: none; } }
/* 作る画面は幅 701px 以上で PC の段組み（右の欄つき） */
[data-schedule-frame] { display: block; max-width: none; width: 100%; height: calc(100dvh - 8rem); min-height: 32rem; /* 実際の高さは parent.js が画面の下端に合わせる */ border: 0; background: var(--bc-surface, #fff); }
/* SP は本文の余白を越えて画面の幅いっぱい。横の位置は parent.js が画面の真ん中に合わせる */
@media (max-width: 48rem) { [data-schedule-wrap] { width: 100vw; max-width: none; } [data-schedule-bar] { padding: 0 12px; } }
[data-schedule-wrap] + .ds-lead { margin-top: 2rem; }
#faq + .ds-meta { margin-top: 2rem; }
.ds-lead { text-wrap: pretty; }
[data-schedule-crumbs] { margin-top: 1.5rem; }
/* PC は作る画面を影と角丸の箱にする（10/21 ユーザーが B を選んだ）。線を引かずに左の端を区切り、右の欄の灰色を箱の中に収める */
@media (min-width: 48.0625rem) {
  [data-schedule-frame] { border-radius: 12px; box-shadow: 0 0 0 1px rgba(32,51,62,.06), 0 2px 6px rgba(32,51,62,.06), 0 10px 28px rgba(32,51,62,.08); }
}