/* =========================================================
 guide　共通
========================================================= */

p,
ul,
dl {
    color: var(--color-black60);
}

.xCenter {
    text-align: center;
}

.bullet_list {
    list-style: middle-dot;
    padding-left: 1em;
}

.ttl_icon.fill {
    /* material-symbols-outlined 指定がある前提 */
    font-variation-settings:
        'FILL'1,
        'wght'400,
        'GRAD'0,
        'opsz'24
}




[class*="split_layout"] {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
}

[class*="split_layout"].alignCenter {
    align-items: center;
}

.split_layoutS {
    gap: 8px;
}

.split_layoutSM {
    gap: 12px;
}

.split_layoutM {
    gap: 16px;
}

.split_layoutL {
    gap: 24px;
}


[class*="split_layout"]>img,
[class*="split_layout"]>[class*="article_img"] {
    flex: 0 0 auto;
}

[class*="split_layout"]>.split_layout_inset {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
}

/* article_img img直指定 or　親要素に指定 */
.article_img {
    width: 100%;
}

.article_img220px {
    width: 220px;
}


[class*="article_img"]>img {
    width: 100%;
}

img.roundedXS {
    border-radius: var(--radius-xs);
}

img.roundedS {
    border-radius: var(--radius-s);
}

img.roundedSM {
    border-radius: var(--radius-sm);
}


.divider {}

.divider>hr {
    border-top-width: 1px;
    border-top-color: var(--color-black20);
}

/* divider_spacer 汎用 */
[class*="divider_spacer"] {
    padding: 12px 0 0;
}

[class*="divider_spacer"]>hr {
    border-top-width: 0px;
    border-top-color: transparent;
}

.divider_spacerS {
    padding-top: 8px;
}

.divider_spacerM {
    padding-top: 16px;
}

.divider_spacerL {
    padding-top: 24px;
}

.divider_spacerXL {
    padding-top: 32px;
}


/* gap 強制書き換え */
.gapXS {
    gap: 4px !important;
}

.gapS {
    gap: 8px !important;
}

.gapSM {
    gap: 12px !important;
}

.gapM {
    gap: 16px !important;
}

.gapL {
    gap: 24px !important;
}

.gapXL {
    gap: 32px !important;
}

.flex_start {
    display: flex;
    gap: 8px;
    flex-direction: column;
    align-items: flex-start;
}

.flex_end {
    display: flex;
    gap: 8px;
    flex-direction: column;
    align-items: flex-end;
}

.flex_center {
    display: flex;
    gap: 8px;
    flex-direction: column;
    align-items: center;
}


/* サイト独自アイコン */
[class*="site_icon"] {
    display: inline-block;
    background-color: var(--color-cray);
    /* サンプル指定 */
    mask-image: url('/images/common/icon/icon_info_fill.svg');
    mask-repeat: no-repeat;
    mask-size: contain;
    width: 24px;
    height: 24px;
}

/* =========================================================
 .page_title_section ページタイトルセクション
========================================================= */
.page_title_section {}

.page_title_section h1 {
    display: block !important;
}

/* .section_ttl_block タイトル */
.page_title_section .section_ttl_block {}

.page_title_section>.section_ttl_block:has(.ttl_sub, p) {
    padding: 24px 0 16px;
}

.page_title_section>.section_ttl_block .ttl_sub {
    /* DesktopEnCaptionL */
    color: var(--color-Caramel50);

}

.page_title_section>.section_ttl_block .ttl_main {
    /* DesktopJaHeading2 */
    color: var(--color-black60);
}





/* =========================================================
 .large_section
========================================================= */
.large_section {
    padding: 24px 0 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}



/* =========================================================
 .step_section
========================================================= */
.step_section {
    background-color: var(--color-black10);
    padding: 24px 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.step_section>.section_ttl_block {
    display: flex;
    gap: 8px;
}

.step_section>.section_ttl_block .ttl_sub {
    /* DesktopEnLabelM */
    color: var(--color-turquoise50);
    background-color: var(--color-turquoise20);
    border-radius: var(--radius-100);
    padding: 8px 16px;
}

.step_section>.section_ttl_block .ttl_main {
    color: var(--color-black60);
}


.step_section>.section_body {
    background-color: var(--color-white100);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}



/* =========================================================
 .common_section
========================================================= */
[class*="common_section"] {
    padding: 24px 0 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.common_sectionM {
    gap: 16px;
}

.common_sectionL {
    gap: 24px;
}

.common_sectionXL {
    gap: 32px;
}


.large_section>[class*="common_section"] {
    padding: 8px 0 8px;
}

[class*="common_section"]>.section_ttl_block:has(.ttl_sub, p) {
    padding: 8px 0 8px;
}

[class*="common_section"]>.section_ttl_block .ttl_sub {
    /* DesktopEnCaptionL */
    color: var(--color-Caramel50);

}

[class*="common_section"]>.section_ttl_block .ttl_main {
    /* DesktopJaHeading2 */
    color: var(--color-black60);
}


/* =========================================================
 セクション下部 ナビゲーションボタンエリア
========================================================= */
.section_bottom_navi_area {
    display: flex;
    gap: 16px;
    padding-top: 16px;
    padding-bottom: 16px;
}

.nextButton {
    /* btn_outlined */
    /* btn_medium */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.nextButton a {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: nowrap;
}

.nextButton a::after {
    font-family: "Material Symbols Outlined";
    content: '\e5cc';
    font-size: 20px;
}


.backButton {
    /* btn_outlined */
    /* btn_medium */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.backButton a {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: nowrap;
}

.backButton a::before {
    font-family: "Material Symbols Outlined";
    content: '\e5cb';
    font-size: 20px;
}