@charset "utf-8";

/**
 * Gutenberg Block Editor Adjustments
 * --------------------------------------------------
 * 最上位のグループブロック（セクション）に対して、
 * 手動でクラスを指定しなくてもデフォルトで .pad 相当の余白を適用するためのスタイルです。
 */

/* フロントエンド用: メインコンテンツ直下のグループブロックに余白を適用 */
.entry-content > .wp-block-group,
.under-main > .wp-block-group,
/* エディタ用: ルート直下のグループブロックに余白を適用 */
.editor-styles-wrapper .is-root-container > .wp-block-group {
    padding-top: 150px;
    padding-bottom: 150px;
}

/* レスポンシブ対応 (既存の .pad クラスに準拠) */

@media (max-width: 1423px) {
    .entry-content > .wp-block-group,
    .under-main > .wp-block-group,
    .editor-styles-wrapper .is-root-container > .wp-block-group {
        padding-top: 9vw;
        padding-bottom: 9vw;
    }
}

@media (max-width: 834px) {
    .entry-content > .wp-block-group,
    .under-main > .wp-block-group,
    .editor-styles-wrapper .is-root-container > .wp-block-group {
        padding-top: 60px;
        padding-bottom: 60px;
    }
}

@media (max-width: 500px) {
    .entry-content > .wp-block-group,
    .under-main > .wp-block-group,
    .editor-styles-wrapper .is-root-container > .wp-block-group {
        padding-top: 50px;
        padding-bottom: 50px;
    }
}

/* 背景色付きセクションの調整等 */
.entry-content > .wp-block-group.bgbl,
.under-main > .wp-block-group.bgbl {
    background-color: #F4F7FA;
}

/* --- 段落（pタグ）のデフォルトスタイル --- */

/* 基本のタイポグラフィ (txt16相当) */
.under-main p,
.editor-styles-wrapper p {
    font-size: 1.6rem;
    line-height: 2;
    font-family: var(--jp02);
}

/* 2番目以降の要素としての段落に上余白を適用 (mrgt20相当) */
.under-main * + p,
.editor-styles-wrapper * + p {
    margin-top: 20px;
}

/* ------------------------------
   見出し（Heading）のデフォルト化
------------------------------ */

/* H2 (under-sec__ttl center 相当) */
.under-main h2,
.entry-content h2,
.editor-styles-wrapper h2 {
    display: block;
    position: relative;
    font-size: var(--f28);
    font-weight: 400;
    text-align: center;
    padding-bottom: 10px;
    margin-bottom: 45px;
    margin-left: auto;
    margin-right: auto;
}

/* H2の下線デザイン */
.under-main h2::after,
.entry-content h2::after,
.editor-styles-wrapper h2::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translate(-50%, 0);
    width: 40px;
    height: 1px;
    background: var(--cbase);
}

/* H3 (under-sec__subttl mrgt50 相当) */
.under-main h3,
.entry-content h3,
.editor-styles-wrapper h3 {
    font-size: var(--f24);
    font-weight: 400;
    line-height: 1.7;
    background: var(--bgbl);
    padding: 20px 25px;
    margin-top: 50px;
    margin-bottom: 25px;
}

/* 青背景セクション（bgbl）内のH3は白背景にする */
.under-main .bgbl h3,
.entry-content .bgbl h3,
.editor-styles-wrapper .bgbl h3 {
    background: var(--bgw);
}

/* H4 (under-sec__subsubttl mrgt50 相当) */
.under-main h4,
.entry-content h4,
.editor-styles-wrapper h4,
.under-main .wp-block-heading h4, /* 一部ブロックでのネスト対策 */
.entry-content .wp-block-heading h4 {
    font-size: var(--f22) !important;
    font-weight: 400;
    line-height: 1.7;
    margin-top: 50px !important;
    margin-bottom: 20px !important;
}

@media(max-width:834px) {
    .under-main h2, .entry-content h2, .editor-styles-wrapper h2 {
        font-size: 2.2rem;
        margin-bottom: 30px;
    }
    .under-main h3, .entry-content h3, .editor-styles-wrapper h3 {
        padding: 15px 20px;
        margin-bottom: 20px;
    }
}