@charset "UTF-8";
/* -------------------------------------------------------------------------------- */
/* 2カラムブロック                                          .mgsblk-two-column */
/* -------------------------------------------------------------------------------- */

/* 管理画面: 子ブロックにラベル付き色枠 */
.editor-styles-wrapper .mgsblk-two-column {
  border: 2px solid #8bc5ed;
  min-height: 60px;
  padding: 4px;
}
.editor-styles-wrapper .mgsblk-two-column::before {
  content: "2カラム";
  display: block;
  background: #8bc5ed;
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  padding: 2px 8px;
  margin: -4px -4px 4px;
}
.editor-styles-wrapper .mgsblk-two-column__inner .acf-innerblocks-container > * {
  border: 1px dashed #b0d8f0;
  margin-bottom: 4px;
}
/* 管理画面では編集しやすいよう1カラム表示（フロントは2カラムのまま） */
.editor-styles-wrapper .mgsblk-two-column__inner {
  min-width: 0;
}
.editor-styles-wrapper .mgsblk-two-column__inner .acf-innerblocks-container {
  grid-template-columns: 1fr;
}

/* フロント */
.mgsblk-two-column__inner {
  margin: 0 auto;
  max-width: 1200px;
}

/* ACFのInnerBlocksは中身をさらに .acf-innerblocks-container で1つに包むため、
   grid はこちらの要素に対して指定する（__inner に直接付けると子が1個しかなく2カラムにならない） */
.mgsblk-two-column__inner .acf-innerblocks-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: stretch;
}

/* グリッドが伸ばすのは直接の子（各カラムのグループブロック）まで。
   その中の入れ子（ACFブロックのラップ用div等）にも高さを伝えて、
   カード自体（.mgsblk-list-box 等）の高さが揃うようにする */
.mgsblk-two-column__inner .acf-innerblocks-container > * {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.mgsblk-two-column__inner .acf-innerblocks-container > * > * {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
/* 角丸画像が2カラム内で隣の高さに揃うよう伝搬 */
.mgsblk-two-column__inner .acf-innerblocks-container > *:has(.mgsblk-image-rounded) > *,
.mgsblk-two-column__inner .acf-innerblocks-container > *:has(.mgsblk-image-rounded) > * > *,
.mgsblk-two-column__inner .acf-innerblocks-container > *:has(.mgsblk-image-rounded) > * > * > * {
  height: 100%;
}
.mgsblk-two-column__inner .mgsblk-image-rounded {
  position: relative;
  overflow: hidden;
}
.mgsblk-two-column__inner .mgsblk-image-rounded img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 1カラム積みになるタブレット以下では、絶対配置だと高さ0で画像が消えるため通常フローに戻す */
@media screen and (max-width: 899px) {
  .mgsblk-two-column__inner .mgsblk-image-rounded img {
    position: static;
    width: 100%;
    height: auto;
  }
}

/* 管理画面: 1カラム表示になるため隣カラムの高さが効かず、絶対配置のままだと
   高さがほぼ0につぶれる。どの画像かが分かれば十分なので、通常フローに戻して
   左寄せ・固定サイズのプレビューにする（フロントは上の伸縮指定のまま）。 */
.editor-styles-wrapper .mgsblk-two-column__inner .mgsblk-image-rounded {
  height: auto;
  width: 480px;
  max-width: 100%;
  align-self: flex-start;
}
.editor-styles-wrapper .mgsblk-two-column__inner .mgsblk-image-rounded img {
  position: static;
  width: 100%;
  height: 300px;
  object-fit: cover;
}

/* 背景色（全体） */
.mgsblk-two-column--white  { background-color: #fff; padding: 60px 0; }
.mgsblk-two-column--gray   { background-color: #f5f5f5; padding: 60px 0; }
.mgsblk-two-column--orange { background-color: var(--main-color); color: #fff; padding: 60px 0; }
.mgsblk-two-column--green  { background-color: #1f3d2e; color: #fff; padding: 60px 0; }

/* -------------------------------------------------------------------------------- */
/*        TABLET                                                                    */
/* -------------------------------------------------------------------------------- */
@media screen and (min-width: 740px) and (max-width: 899px) {
  .mgsblk-two-column__inner {
    min-width: 0;
    max-width: 100%;
    padding: 0;
  }
  .mgsblk-two-column__inner .acf-innerblocks-container {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  /* 「タブレットでの表示 = 2カラムのまま」を選んだブロックだけ横並びを維持
     （クラスは two-column-block.php で付与。既定は上の1カラム） */
  .mgsblk-two-column--tb2 .mgsblk-two-column__inner .acf-innerblocks-container {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
  .mgsblk-two-column--white,
  .mgsblk-two-column--gray,
  .mgsblk-two-column--orange,
  .mgsblk-two-column--green {
    padding: 50px 0;
  }
}

/* -------------------------------------------------------------------------------- */
/*         MOBILE                                                                   */
/* -------------------------------------------------------------------------------- */
@media only screen and (max-width: 739px) {
  .mgsblk-two-column__inner {
    min-width: 0;
    width: 100%;
    padding: 0;
  }
  .mgsblk-two-column__inner .acf-innerblocks-container {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .mgsblk-two-column--white,
  .mgsblk-two-column--gray,
  .mgsblk-two-column--orange,
  .mgsblk-two-column--green {
    padding: 40px 0;
  }
}