/**
 * LP専用スタイル
 * body.lp-page スコープで既存レイアウトに影響を与えない
 */

/* === LPコンテンツエリア ===
   上の余白は通常ページ・本番 kaneyo の LP と同じにする（#sub-detail #container の margin-top 40px。
   991px 以下は mobile.css の main { padding-top: 42px } ＋ margin-top 20px で 62px）。
   margin ではなく padding で取る。margin だとタイトルの margin-top 17px と相殺されて余白が減るため */
body.lp-page .lp-content {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 40px 0 0;
}

body.lp-page .lp-content .entry-body {
    max-width: 100%;
    margin: 0;
    padding: 0;
}

/* 配置なしのブロックとページタイトルをコンテンツ幅に制約（背景含む）
   #sub-detail を含めるのは、style.css の #sub-detail .entry-body ul { margin: 0 } 等に左右の auto を潰されないため。
   タイトルの上下の余白は style.css の #sub-detail .entry-title をそのまま使う */
body.lp-page #sub-detail .entry-body > *:not(.alignfull):not(.alignwide):not(.alignleft):not(.alignright),
body.lp-page #sub-detail .entry-title {
    max-width: 940px;
    margin-left: auto;
    margin-right: auto;
}

/* === 全幅ブロック（.alignfull） === */
body.lp-page .alignfull {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
}

/* === 幅広ブロック（.alignwide） === */
body.lp-page .alignwide {
    max-width: 1216px;
    margin-left: auto;
    margin-right: auto;
}

/* === 背景付きブロック ===
   padding は足さない。既存の LP は余白なしで組まれており、段組みや段落の背景色の見た目が本番 kaneyo と変わるため。
   背景の余白はグループ・カバーの指定で付ける */
body.lp-page .has-background {
    background-position: center center;
}

/* === カバーブロック === */
body.lp-page .wp-block-cover {
    padding: 3rem 1.5rem;
}

body.lp-page .wp-block-cover.alignfull {
    padding-left: 2rem;
    padding-right: 2rem;
}

/* === グループブロック ===
   内側の余白は背景色があるときだけ。背景なしのグループ（既存 LP で段落のまとまりに使用）は本番 kaneyo と同じく余白なし */
body.lp-page .wp-block-group.has-background {
    padding: 2rem 1.5rem;
}

body.lp-page .wp-block-group.alignfull {
    padding-left: 2rem;
    padding-right: 2rem;
}

/* グループ内のコンテンツ幅を制御 */
body.lp-page .wp-block-group__inner-container,
body.lp-page .wp-block-group > .wp-block-group__inner-container {
    max-width: 940px;
    margin-left: auto;
    margin-right: auto;
}

body.lp-page .wp-block-group.alignwide > .wp-block-group__inner-container {
    max-width: 1216px;
}

body.lp-page .wp-block-group.alignfull > .wp-block-group__inner-container {
    max-width: 1216px;
}

/* === カラムブロック === */
body.lp-page .wp-block-columns {
    max-width: 940px;
    margin-left: auto;
    margin-right: auto;
}

body.lp-page .wp-block-columns.alignwide {
    max-width: 1216px;
}

/* === ボタンブロック === */
body.lp-page .wp-block-buttons {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

/* === 画像ブロック全幅 === */
body.lp-page .wp-block-image.alignfull img {
    width: 100%;
    height: auto;
}

/* === レスポンシブ === */
@media only screen and (max-width: 991px) {
    body.lp-page .lp-content {
        padding-top: 62px;
    }

    body.lp-page .wp-block-group.has-background {
        padding: 1.5rem 1rem;
    }

    body.lp-page .wp-block-cover {
        padding: 2rem 1rem;
    }
}

/* 本文の幅は本番 kaneyo の #container（mobile.css）に合わせる: 768〜991px は 750px、767px 以下は左右 10px */
@media only screen and (min-width: 768px) and (max-width: 991px) {
    body.lp-page #sub-detail .entry-body > *:not(.alignfull):not(.alignwide):not(.alignleft):not(.alignright),
    body.lp-page #sub-detail .entry-title {
        max-width: 750px;
    }
}

@media only screen and (max-width: 767px) {
    body.lp-page .lp-content .entry-body,
    body.lp-page .lp-content .entry-title {
        padding: 0 10px;
    }
}

@media only screen and (max-width: 576px) {
    body.lp-page .wp-block-group.has-background,
    body.lp-page .wp-block-cover {
        padding: 1rem 0.75rem;
    }
}