/* Cocoonスタイルのオーバーライド - VueアプリケーションでCocoonを使用する際の調整 */

/* Cocoonの全体的なリセットを部分的に無効化してVueアプリのスタイルを保護 */
body {
  margin: unset !important;
  padding: unset !important;
  background: unset !important;
  font-family: unset !important;
}

/* WordPressテーマ固有の要素を非表示 */
#wpadminbar,
.header,
.footer,
.sidebar,
.breadcrumb,
.sns-share,
.appeal,
.go-to-top-button,
.notice-area {
  display: none !important;
}

/* VueアプリのコンテナがCocoonのレイアウトの影響を受けないようにする */
#app {
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  width: auto !important;
}

/* Cocoonの記事用スタイルを保持したい要素にクラスを適用 */
.cocoon-content {
  /* Cocoonの.articleクラスのスタイルをここで有効にする */
  .article {
    /* ここでCocoonの記事スタイルが適用される */
  }
}

/* WordPressブロックエディターのスタイルを保持 */
.wp-block-group,
.wp-block-columns,
.wp-block-column,
.wp-block-image,
.wp-block-gallery,
.wp-block-quote,
.wp-block-table {
  /* Cocoonのブロックスタイルを維持 */
}