/* グループブロックの背景あり時の余白を徹底排除 */
.wp-block-group.has-background {
    padding: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* 念のため、動画ブロック自体の上下余白も殺す */
.wp-block-group.has-background video,
.wp-block-group.has-background .wp-block-video {
    margin: 0 !important;
    vertical-align: top !important; /* これが効くことが多いです */
}

/* 前後の画像との隙間を埋めるための指定 */
.wp-block-group.has-background::before,
.wp-block-group.has-background::after {
    display: none !important; /* 謎の疑似要素による隙間対策 */
}
/* 画像ブロック自体が750pxになろうとするのを防ぐ */
figure.lp-inner-img {
    width: fit-content !important; /* 中身の画像サイズに合わせる */
    margin-left: auto !important;
    margin-right: auto !important;
}

figure.lp-inner-img img {
    width: auto !important; /* ここで100%設定を解除 */
}

/* lp-inner-imgを付けた画像を中央寄せにする */
img.lp-inner-img,
figure.lp-inner-img {
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
}

/* もし画像ブロック(figure)にクラスを付けた場合、中のimgも確実に中央へ */
figure.lp-inner-img img {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* 親のグループブロック側からも「中身を中央に」と命令する */
.wp-block-group.has-background {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* これで子要素が中央に揃います */
    text-align: center !important;
}
/**
 * Twenty Twenty-Three LP用カスタムCSS
 * 上下左右余白0、画像間隙間0、コンテンツ幅750px固定
 * 投稿・固定ページ・カスタム投稿すべてに適用
 */

/* ========================================
   body、HTML全体の余白リセット
======================================== */
body,
html {
    margin: 0 !important;
    padding: 0 !important;
}

/* ========================================
   サイト全体のコンテナ幅を750pxに固定
======================================== */
.wp-site-blocks,
body > .is-root-container,
.wp-block-group.is-root-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* ========================================
   メインコンテンツエリアの設定
======================================== */
main,
.wp-block-post-content,
.entry-content {
    max-width: 750px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

/* ========================================
   記事コンテンツの余白をすべて削除
======================================== */
article,
.entry-content,
.wp-block-post-content {
    margin: 0 !important;
    padding: 0 !important;
}

/* ========================================
   すべてのブロック要素の余白を0に
======================================== */
.wp-block-post-content > *,
.entry-content > *,
.wp-site-blocks > * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* ========================================
   画像ブロックの設定
======================================== */
.wp-block-image,
.wp-block-image img,
figure.wp-block-image {
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    max-width: 750px !important;
    width: 100% !important;
    height: auto !important;
}

/* 画像自体の設定 */
img {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: top !important;
    max-width: 750px !important;
    width: 100% !important;
    height: auto !important;
}

/* figcaptionは非表示（必要に応じて調整） */
figcaption {
    display: none;
}

/* ========================================
   グループブロックやカラムの余白削除
======================================== */
.wp-block-group,
.wp-block-columns,
.wp-block-column,
.wp-block-cover {
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
}

/* ========================================
   Twenty Twenty-Three特有の設定
======================================== */
/* コンテナブロックの調整 */
.wp-block-group.has-global-padding {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* グローバルパディングの無効化 */
body {
    --wp--style--root--padding-top: 0 !important;
    --wp--style--root--padding-right: 0 !important;
    --wp--style--root--padding-bottom: 0 !important;
    --wp--style--root--padding-left: 0 !important;
}

/* ========================================
   ヘッダー・フッターの調整
======================================== */
header,
footer,
.wp-block-template-part {
    max-width: 750px !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

/* ヘッダー・フッターを非表示にする場合は以下のコメントを外す */

header.wp-block-template-part,
footer.wp-block-template-part {
    display: none !important;
}


/* ========================================
   段落・見出しなどのテキスト要素
======================================== */
p,
h1, h2, h3, h4, h5, h6,
.wp-block-heading {
    margin: 0 !important;
    padding: 0 !important;
}

/* ========================================
   リストの余白削除
======================================== */
ul, ol {
    margin: 0 !important;
    padding: 0 !important;
    list-style-position: inside !important;
}

/* ========================================
   ボタンブロックなどの調整
======================================== */
.wp-block-buttons,
.wp-block-button {
    margin: 0 !important;
}

/* ========================================
   スペーサーブロックの調整
======================================== */
.wp-block-spacer {
    margin: 0 !important;
}

/* ========================================
   カスタム投稿タイプページの設定
======================================== */
.post-type-archive,
.single-post,
.page,
.single {
    max-width: 750px !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

/* ========================================
   レスポンシブ設定（SPもPCも750px固定）
======================================== */
@media (max-width: 750px) {
    .wp-site-blocks,
    main,
    .wp-block-post-content,
    .entry-content,
    article {
        max-width: 750px !important;
        width: 100% !important;
    }
    
    /* 750px以下の画面では横スクロールを許可 */
    body {
        overflow-x: auto !important;
    }
}

/* ========================================
   ギャラリーブロックの調整
======================================== */
.wp-block-gallery {
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
}

.wp-block-gallery .wp-block-image {
    margin: 0 !important;
}

/* ========================================
   埋め込みコンテンツの調整
======================================== */
.wp-block-embed,
.wp-block-embed__wrapper {
    margin: 0 !important;
    padding: 0 !important;
}

/* ========================================
   メディア&テキストブロック
======================================== */
.wp-block-media-text {
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
}

/* ========================================
   テーブルブロック
======================================== */
.wp-block-table,
table {
    margin: 0 !important;
    border-spacing: 0 !important;
    border-collapse: collapse !important;
}

/* ========================================
   セパレーターブロック
======================================== */
.wp-block-separator,
hr {
    margin: 0 !important;
}

/* ========================================
   カバーブロック
======================================== */
.wp-block-cover__inner-container {
    padding: 0 !important;
}

/* ========================================
   コンテナクエリ対応
======================================== */
.wp-block-group.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
    max-width: 750px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
/* ========================================
   動画やGIF対応
======================================== */
/* カバーブロックの中にある動画（または画像）を強制的にサイズ調整 */
.wp-block-cover .wp-block-video,
.wp-block-cover video,
.lp-inner-media {
    width: var(--lp-video-width, 60%) !important; /* デフォルト60%、後で個別調整可 */
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ついでに、カバー内のコンテンツを上下左右中央に配置する */
.wp-block-cover__inner-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}
