/* ===========================================
   WordPress Gutenberg Blocks - フロント用補正CSS
   テーマ style.min.css にコアブロック対応が無いため追加
   =========================================== */

/* ---- Classic Editor: <p>内の alignnone 画像（旧式投稿）---- */
/* テーマの img{width:100%} を解除し、HTML属性のサイズを尊重 */
.p-entry__content p img.alignnone,
.p-entry__content p img.alignleft,
.p-entry__content p img.alignright,
.p-entry__content p img.aligncenter{
  width:auto;
  max-width:100%;
  height:auto;
  display:inline-block;
  vertical-align:top;
  margin:0 8px 8px 0;
}

/* <p>内に画像が2枚以上ある場合は横並びレイアウトに（画像は自然サイズ） */
.p-entry__content p:has(img + img){
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  align-items:flex-start;
  margin:0 0 1.5em;
}
.p-entry__content p:has(img + img) img{
  flex:0 0 auto;
  width:auto;
  max-width:100%;
  height:auto;
  margin:0;
}

@media (max-width: 767px){
  .p-entry__content p:has(img + img) img{
    max-width:calc(50% - 8px);
  }
}

/* Gallery（ギャラリー） */
.wp-block-gallery{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  margin:0 0 1.5em;
}
.wp-block-gallery .wp-block-image{
  flex:1 1 calc(50% - 8px);
  margin:0;
  min-width:0;
}
.wp-block-gallery.columns-2 .wp-block-image{ flex:1 1 calc(50% - 8px); }
.wp-block-gallery.columns-3 .wp-block-image{ flex:1 1 calc(33.333% - 11px); }
.wp-block-gallery.columns-4 .wp-block-image{ flex:1 1 calc(25% - 12px); }
.wp-block-gallery.columns-5 .wp-block-image{ flex:1 1 calc(20% - 13px); }
.wp-block-gallery .wp-block-image img{
  width:100%;
  height:auto;
  display:block;
  border-radius:4px;
}
.wp-block-gallery figcaption{
  font-size:13px;
  color:#4a5a6f;
  text-align:center;
  margin-top:6px;
}

/* Columns（カラム） */
.wp-block-columns{
  display:flex;
  flex-wrap:wrap;
  gap:32px;
  margin:0 0 1.5em;
}
.wp-block-columns.are-vertically-aligned-center{ align-items:center; }
.wp-block-columns.are-vertically-aligned-top{ align-items:flex-start; }
.wp-block-columns.are-vertically-aligned-bottom{ align-items:flex-end; }
.wp-block-column{
  flex:1 1 0;
  min-width:0;
}

/* Image（単体） */
.wp-block-image{ margin:0 0 1em; }
.wp-block-image img{
  max-width:100%;
  height:auto;
}
.wp-block-image.alignleft{ float:left; margin:0 1em 1em 0; }
.wp-block-image.alignright{ float:right; margin:0 0 1em 1em; }
.wp-block-image.aligncenter{ text-align:center; }
.wp-block-image.aligncenter img{ display:block; margin:0 auto; }
.wp-block-image figcaption{
  font-size:13px;
  color:#4a5a6f;
  text-align:center;
  margin-top:6px;
}

/* Buttons */
.wp-block-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin:1em 0;
}

/* Quote */
.wp-block-quote{
  border-left:4px solid #5ea580;
  padding:8px 16px;
  margin:1.5em 0;
  background:#f5f5f5;
}
.wp-block-quote cite{
  display:block;
  font-size:13px;
  color:#4a5a6f;
  margin-top:8px;
}

/* Separator */
.wp-block-separator{
  border:none;
  border-top:1px solid #d3dce6;
  margin:2em auto;
  max-width:120px;
}

/* スマホ：3〜5列ギャラリーは2列に、カラムは縦並びに */
@media (max-width: 767px){
  .wp-block-gallery.columns-3 .wp-block-image,
  .wp-block-gallery.columns-4 .wp-block-image,
  .wp-block-gallery.columns-5 .wp-block-image{
    flex:1 1 calc(50% - 8px);
  }
  .wp-block-columns{
    flex-direction:column;
    gap:16px;
  }
  .wp-block-column{
    flex:1 1 100%;
  }
}