/* ===========================
   フロント側 共通スタイル
   =========================== */

/* サイドバー無しのときだけ背景を 100vw に広げる */
.cp-no-sidebar .cp-block-fullwide {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* サイドバーありのときはメインカラム内に収める */
.cp-has-sidebar .cp-block-fullwide {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.cp-block-fullwide__inner {
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;

  /* SP デフォルト */
  padding-top: var(--cp-sp-pt, 40px);
  padding-bottom: var(--cp-sp-pb, 40px);
}

/* PC のときの padding は別の変数を使う */
@media (min-width: 768px) {
  .cp-block-fullwide__inner {
    padding-top: var(--cp-pc-pt, 60px);
    padding-bottom: var(--cp-pc-pb, 60px);
  }
}

/* 記事幅：ヘッダーより少し狭め（調整可） */
.cp-block-inner-article {
  max-width: 720px;
}

/* サイト幅：ヘッダーと同じくらい（調整可） */
.cp-block-inner-site {
  max-width: 1200px;
}

/* フルワイド：メイン領域いっぱい */
.cp-block-inner-full {
  width: 100%;
  max-width: none;
}

/* 見出し */
.cp-block-fullwide__heading {
  font-size: 1.8rem;
  margin: 0 0 1.5rem;
}

/* ===========================
   ブロックエディタ用（管理画面）
   =========================== */

/* 外側のグレー背景はページ幅いっぱい */
.cp-block-fullwide--editor {
  width: 100%;
  margin: 0 0 1.5rem;
  background-color: #f7f7f7;
  border-radius: 4px;
}

/* 内側の白い枠が「記事幅／サイト幅／フルワイド」で変わる部分 */
.cp-block-fullwide__inner--editor {
  border: 1px dashed #ccc;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* ==== エディタ内での幅プレビュー ==== */
.editor-styles-wrapper .cp-block-fullwide__inner--editor.cp-block-inner-article {
  max-width: 720px;   /* 記事幅 */
}

.editor-styles-wrapper .cp-block-fullwide__inner--editor.cp-block-inner-site {
  max-width: 1200px;  /* サイト幅（ヘッダーと同じイメージ） */
}

/* フルワイド：エディタ内ではグレー枠の内側いっぱいに背景を広げる */
.editor-styles-wrapper .cp-block-fullwide__inner--editor.cp-block-inner-full {
  max-width: none;
  width: 100%;
  padding-left: 0;   /* 両端まで背景色を広げる */
  padding-right: 0;  /* 両端まで背景色を広げる */
}

/* エディタ全体用の補正：外側は常に100%でOK */
.editor-styles-wrapper .cp-block-fullwide {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* 右サイドバーのラベル用 */
.cp-block-control-label {
  font-size: 11px;
  font-weight: 600;
  margin: 0 0 4px;
}

/* 幅ボタンの並び */
.cp-block-width-buttons .components-button {
  margin-right: 4px;
}