@charset "utf-8";

/* ==============================================================================
   カスタムブロック：フレックスアウター (block-flexouter.css)
============================================================================== */

/* 公開画面：Flexboxレイアウト */
.block-flexouter {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  width: 100%;
  box-sizing: border-box;
}

.block-flexouter.block-flexouter--left {
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}

/* ==============================================================================
   ブロックエディタ（編集画面 iframe）専用スタイル
============================================================================== */
.editor-styles-wrapper .block-flexouter,
body.block-editor-page .block-flexouter {
  background-color: #f4f6f8 !important;
  border: 2px dashed #b0bec5 !important;
  min-height: 100px;
  position: relative;
  padding: 30px 15px 15px !important;
  box-sizing: border-box !important;
  margin: 20px 0 !important;
}

/* エディタ内での案内バッジ */
.editor-styles-wrapper .block-flexouter:before,
body.block-editor-page .block-flexouter:before {
  content: '【横並びグループ（Flex Outer）】';
  position: absolute;
  top: 4px;
  left: 10px;
  font-size: 11px;
  font-weight: bold;
  color: #546e7a;
  background: #cfd8dc;
  padding: 2px 8px;
  border-radius: 3px;
}