/* =========================================================
 manner　共通
========================================================= */

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

.xCenter {
    text-align: center;
}

.sub_heading_caramel {
    color: var(--color-Caramel60);
}

.note_caramel {
    color: var(--color-Caramel60);
    background-color: var(--color-Caramel20);
    border-radius: var(--radius-xs);
    padding: 12px 16px;
}

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

.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_img332px {
    width: 332px;
}

.article_img240px {
    width: 240px;
}

.article_img228px {
    width: 228px;
}

.article_img224px {
    width: 224px;
}

.article_img190px {
    width: 190px;
}

.article_img150px {
    width: 150px;
}

[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 {
    padding: 12px 0 12px;
}

.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;
}

.site_icon_arrow_right {
    mask-image: url('/images/common/icon/icon_arrow_right.svg');
}

.site_icon_late_pregnancy {
    mask-image: url('/images/common/icon/icon_late_pregnancy.svg');
}

.site_icon_childbirth {
    mask-image: url('/images/common/icon/icon_childbirth.svg');
}

.site_icon_discharge {
    mask-image: url('/images/common/icon/icon_discharge.svg');
}

.site_icon_crib {
    mask-image: url('/images/common/icon/icon_crib.svg');
}

.site_icon_crying_baby {
    mask-image: url('/images/common/icon/icon_crying_baby.svg');
}


/* サムネ付きボタン */
.thumb_button {
    display: block;
    border-radius: var(--radius-s);
    border: 1px solid var(--color-black30);
    overflow: hidden;
    background-color: var(--color-white100);
}

.thumb_button>img {
    width: 100%;
}

.thumb_button .label {
    color: var(--color-turquoise50);
    display: flex;
    justify-content: space-between;
    padding: 12px 16px;
    align-items: center;
}

.thumb_button .label::after {
    font-family: "Material Symbols Outlined";
    content: '\e5cc';
    font-size: 20px;
    line-height: 1;
}

/* ラベル付きアイコン */
.symbol_icon {
    color: var(--color-turquoise50);
    background-color: var(--color-turquoise20);
    border-radius: var(--radius-m);
    width: 144px;
    height: 144px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex: 0 0 auto;
}

.symbol_icon .icon {
    font-size: 64px;
}

.symbol_icon .site_icon {
    width: 64px;
    height: 64px;
}

.symbol_icon .label {}


.category_title {
    color: var(--color-Caramel60);
    display: flex;
    gap: 12px;
    align-items: center;
}

.category_title .category {
    background-color: var(--color-Caramel50);
    color: var(--color-white100);
    padding: 8px 16px;
    border-radius: var(--radius-100);

}


/* =========================================================
 .page_title_section ページタイトルセクション
========================================================= */
.page_title_section {
    min-height: 240px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-radius: var(--radius-sm);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    padding: 24px;
    justify-content: center;
}

.page_title_section h1 {
    display: block !important;
}

/* .section_ttl_block タイトル */
.page_title_section .section_ttl_block {
    text-align: center;
}

/* .section_ttl_block サブタイトル */
.page_title_section .section_sub_ttl_block {
    position: absolute;
    left: 30px;
    top: 25px;
}


/* カラー違い caramel */
.page_title_section.caramel40 {
    background-color: var(--color-Caramel40);
}

.page_title_section.caramel50 {
    background-color: var(--color-Caramel50);
}

.page_title_section[class*="carame"] .section_ttl_block .ttl_sub {
    /* DesktopEnCaptionL */
    color: var(--color-Caramel10);
}

.page_title_section[class*="carame"] .section_ttl_block .ttl_main {
    /* DesktopJaHeading1 */
    color: var(--color-white100);
}

.page_title_section[class*="carame"] .section_ttl_block .ttl_lead {
    color: var(--color-white100);
}

.page_title_section[class*="carame"] .section_sub_ttl_block .ttl_sub {
    /* DesktopEnCaptionM */
    color: var(--color-Caramel10);
}

.page_title_section[class*="carame"] .section_sub_ttl_block .ttl_main {
    /* DesktopJaLabelM */
    color: var(--color-white100);
}



/* カラー違い turquoise40 */
.page_title_section.turquoise40 {
    background-color: var(--color-turquoise40);
}

.page_title_section[class*="turquoise"] .section_ttl_block .ttl_sub {
    /* DesktopEnCaptionL */
    color: var(--color-white90);
}

.page_title_section[class*="turquoise"] .section_ttl_block .ttl_main {
    /* DesktopJaHeading1 */
    color: var(--color-white100);
}


/* カラー違い turquoise20 */
.page_title_section.turquoise20 {
    background-color: var(--color-turquoise20);
}

.page_title_section.turquoise20 .section_ttl_block .ttl_sub {
    color: var(--color-Caramel50);
}

.page_title_section.turquoise20 .section_ttl_block .ttl_main {
    color: var(--color-black60);
}

.page_title_section.turquoise20 .section_ttl_block .ttl_lead {
    color: var(--color-black60);
}



/* 背景画像違い */
.page_title_section.manner1 {
    background-image: url(/images/manner/manner_ttl_1_pc.png);
}

.page_title_section.manner2 {
    background-image: url(/images/manner/manner_ttl_2_pc.png);
}

.page_title_section.weddingmanner1 {
    background-image: url(/images/weddingmanner/weddingmanner_ttl_1_pc.png);
}

.page_title_section.weddingmanner2 {
    background-image: url(/images/weddingmanner/weddingmanner_ttl_2_pc.png);
}



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

.large_section>.section_ttl_block {
    padding: 8px 0 8px;
}

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

}

.large_section>.section_ttl_block .ttl_main {
    /* DesktopJaHeading2 */
    color: var(--color-black60);
    display: flex;
    gap: 8px;
    align-items: center;
}

.large_section>.section_ttl_block .ttl_main .ttl_icon {
    color: var(--color-cray);
    font-size: 32px;
}



/* =========================================================
 .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);
}


/* =========================================================
 マナー 記事リンク
========================================================= */

.manner_articles {
    padding: 16px 0 0;
    display: flex;
    flex-direction: column;
    gap: 16px;

}

.manner_articles .article {
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-black20);
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
}

.manner_articles .article .article_ttl_block {
    background-color: var(--color-Caramel10);
    border-right: 1px solid var(--color-black20);
    width: 320px;
    padding-top: 16px;
    padding-right: 24px;
    padding-bottom: 16px;
    padding-left: 24px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: var(--color-black60);
}

.manner_articles .article .article_ttl_block .ttl_main {
    /* DesktopJaBodyL */
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: nowrap;
}

.manner_articles .article .article_ttl_block .ttl_main .ttl_icon {
    color: var(--color-cray);
    font-size: 40px;
}



.manner_articles .article .article_content_block {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    justify-content: center;
}

.manners_links {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.manners_links>li {
    min-height: 28px;
}

.manners_links a {
    color: var(--color-caramel);
    display: flex;
    gap: 4px;
    align-items: center;
}

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

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

}

/* =========================================================
 article_inset 囲い記事
========================================================= */
[class*="article_inset"] {
    display: flex;
    flex-direction: column;
}

.article_insetXS {
    padding: 16px 16px;
    border-radius: var(--radius-s);
}

.article_insetS {
    padding: 24px 16px;
    border-radius: var(--radius-s);
}

.article_insetM {
    padding: 16px 32px;
    border-radius: var(--radius-sm);
}


/* .article_inset or inset_section 内 タイトル */
[class*="article_inset"]>.section_ttl_block,
[class*="inset_section"]>.section_ttl_block {
    display: flex;
    flex-direction: column;
    /* align-items: center; */
    color: var(--color-black60);
}

[class*="article_inset"]>.section_ttl_block.centerItem,
[class*="inset_section"]>.section_ttl_block.centerItem {
    align-items: center;
}

[class*="article_inset"].Turquoise10BK>.section_ttl_block *,
[class*="inset_section"].Turquoise10BK>.section_ttl_block * {
    color: var(--color-turquoise70);
}

[class*="article_inset"].Caramel10BK>.section_ttl_block *,
[class*="inset_section"].Caramel10BK>.section_ttl_block * {
    color: var(--color-Caramel60);
}



[class*="article_inset"].Turquoise10BK>.section_ttl_block [class*="DesktopEnCaption"],
[class*="inset_section"].Turquoise10BK>.section_ttl_block [class*="DesktopEnCaption"] {
    color: var(--color-turquoise40);
}


/* inset_section 囲い内 グルーピング */
[class*="article_inset"] [class*="inset_section"] {
    border-radius: var(--radius-s);
    display: flex;
    flex-direction: column;
}

[class*="article_inset"] .inset_sectionS {
    padding-top: 8px;
    padding-bottom: 8px;
    gap: 4px;
}

[class*="article_inset"] .inset_sectionSM {
    padding-top: 12px;
    padding-bottom: 12px;
    gap: 8px;
}

[class*="article_inset"] .inset_sectionM {
    padding-top: 16px;
    padding-bottom: 16px;
    gap: 8px;
}

[class*="article_inset"] .inset_sectionL {
    padding-top: 24px;
    padding-bottom: 24px;
    gap: 24px;
}

[class*="inset_section"].sidePaddingM {
    padding-left: 16px;
    padding-right: 16px;

}


/* .definition 用語説明 */
[class*="article_inset"] .definition {
    color: var(--color-black60);
    display: flex;
    gap: 32px;
    flex-wrap: nowrap;
    align-items: center;
}

.definition .definition_term {
    flex: 0 0 auto;

}

.definition .definition_desc {
    flex: 1 1 auto;
}

[class*="article_inset"].Turquoise10BK .definition {
    color: var(--color-turquoise50);
}

/* .definition_inset 用語説明2  */
[class*="article_inset"] .definition_inset {
    color: var(--color-black60);
    display: flex;
    gap: 24px;
    flex-wrap: nowrap;
    align-items: center;

    padding-top: 16px;
    padding-right: 20px;
    padding-bottom: 16px;
    padding-left: 20px;
}

.definition_inset .definition_term {
    flex: 0 0 auto;
    padding: 4px 12px;
    box-sizing: border-box;

    border-radius: var(--radius-100);
}

[class*="article_inset"].Turquoise10BK .definition_inset .definition_term {
    background-color: var(--color-turquoise50);
    color: var(--color-white100);
}

.definition_inset .definition_desc {
    flex: 1 1 auto;
}


/* .definitions_list 用語説明リスト */
.definitions_list {
    padding: 16px;
    background-color: var(--color-Caramel10);
    border-radius: var(--radius-s);
    display: flex;
    gap: 8px 1.2%;
    flex-wrap: wrap;
}

.definitions_list dt {
    flex: 0 0 auto;
    padding: 12px 16px;
    background-color: var(--color-Caramel20);
    color: var(--color-Caramel60);
    border-radius: var(--radius-xs);
    box-sizing: border-box;
    width: 19.5%;
}


.definitions_list dd {
    flex: 0 0 auto;
    background-color: var(--color-white100);
    color: var(--color-black60);
    border-radius: var(--radius-xs);
    box-sizing: border-box;
    width: 79.3%;
    padding: 12px 16px;
}


/* .definition_items アイテム 説明一覧  */
ul.definition_items {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 16px;
}

.definition_items>li {
    width: 208px;
    background-color: var(--color-white100);
    border-radius: var(--radius-m);
    padding: 16px;
}

/* 4つの時 */
.definition_items:has(> li:nth-child(4)):not(:has(> li:nth-child(5)))>li {
    width: 152px;
}

.definition_items .item {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.definition_items .item.ng {
    gap: 8px;
}

.definition_items .item .example_ng_img {
    width: 100%;
    margin-bottom: 8px;
}

.definition_items .item dt {
    background-color: var(--color-turquoise10);
    color: var(--color-turquoise50);
    border-radius: var(--radius-100);
    padding: 4px 16px;
    text-align: center;
}

.definition_items .item.ng dt {
    background-color: var(--color-error10);
    color: var(--color-error90);
}

.definition_items .item dd {
    color: var(--color-black60);
}


/* .connect_flow_col 説明 縦 誘導  */
.connect_flow_col {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 0 16px;
}

.connect_flow_col .description {
    background-color: var(--color-turquoise50);
    color: var(--color-white100);
    border-radius: var(--radius-sm);
    padding: 4px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* .connect_flow_col .description:has(> *:nth-child(1)):not(:has(> *:nth-child(2))) { */
.connect_flow_col .description:has(> *:nth-child(2)) {
    padding: 16px 16px;
}

.connect_flow_col .description p {
    color: var(--color-white100);
}



.connect_flow_col .icon {
    color: var(--color-turquoise40);
    font-size: 24px;
    margin: auto;
}



/* .inset_navi_area 小記事内誘導  */
[class*="article_inset"] .inset_navi_area {
    padding-top: 8px;
    padding-bottom: 8px;
    display: flex;
    gap: 16px;
    justify-content: flex-end;
}


/* =========================================================
 inset_section_article: article_inset 内 さらに段下げ記事 
========================================================= */
.inset_section_article {
    padding: 0 16px;
    color: var(--color-black60);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.inset_sectionL .inset_section_article {
    padding: 0 24px;
}

.inset_section_article_ttl_block {}

.inset_section_article_ttl_block .ttl_main {
    display: flex;
    gap: 6px;
    align-items: center;
}

.inset_section_article_ttl_block .ttl_main .site_icon_noshi_fill {
    mask-image: url('/images/common/icon/icon_noshi_fill.svg');
}

[class*="article_inset"].Turquoise10BK .site_icon_noshi_fill {
    background-color: var(--color-turquoise50);
}

.inset_section_article_content_block {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-left: 30px;
}

.inset_section_article_content_block .content_ttl {
    color: var(--color-black80);
    /* gap: 16px; から 4px になるように調整 */
    margin-bottom: -12px;
}

[class*="article_inset"].Turquoise10BK .inset_section_article_content_block .content_ttl {
    color: var(--color-turquoise50);
}






/* =========================================================
 common_table
========================================================= */
.common_table {
    margin: auto -4px;
}

.inset_section .common_table {
    padding: 8px 8px;
}

.common_table table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    /* table-layout: fixed; */
}

.common_table thead th {
    padding: 0 4px;
    position: relative;
    vertical-align: middle;
}

.common_table thead th::before {
    content: "";
    position: absolute;
    inset: 0 4px;
    background-color: var(--color-black10);
    border-radius: var(--radius-xs);
    z-index: 0;
}

.common_table.turquoise thead th::before {
    background-color: var(--color-turquoise10);
}


.common_table_head {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: var(--color-black60);
    padding: 12px 16px;
    /* min-height: 2.6em; */
}

.common_table tbody th,
.common_table tbody td {
    padding: 12px;
    vertical-align: middle;
    text-align: left;
}

.common_table tbody tr {
    position: relative;
}

/* 横線 本来はこの記法が安全 */
/* 
.common_table tbody tr+tr th,
.common_table tbody tr+tr td {
    border-top: 1px dashed var(--color-black30);
} 
*/

/* 横線 デザインに合わせたトリック記法 */
.common_table tbody tr:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 0;
    height: 1px;
    border-bottom: 1px dashed var(--color-black30);
}

/* tbody 側の TH */
.common_table_rowhead {
    color: var(--color-black60);
}

.common_table.turquoise .common_table_rowhead {
    color: var(--color-turquoise50);
}

.common_table tbody td {
    color: var(--color-black60);
}

/* 縦の点線区切り */
.common_table tbody td,
.common_table tbody th[scope="row"] {
    position: relative;
}

.common_table tbody tr>*:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 8px;
    bottom: 8px;
    right: -1px;
    border-right: 1px dashed var(--color-black30);
}

/* =========================================================
 .common_table schedule用スタイル変更
========================================================= */
.common_table.schedule [class*="site_icon"] {
    background-color: var(--color-Caramel30);
    width: 48px;
    height: 48px;
}

.common_table.schedule strong {
    color: var(--color-turquoise50);
}

.common_table.schedule tbody td {
    vertical-align: top;
}



/* =========================================================
 faq_items 
========================================================= */
.faq_items {
    display: flex;
    flex-direction: column;
    color: var(--color-black60);
    gap: 8px;
}

.faq_items>dt {
    /* copy from DesktopJaHeading3 */
    font-family: "Noto Sans JP", sans-serif;
    font-size: var(--heading-txt3-size);
    line-height: var(--heading-txt3-height);
    font-weight: var(--heading-txt3-weight);
    letter-spacing: var(--heading-txt3-spacing);

    padding: 8px 0;
    display: flex;
    gap: 8px;
}

.faq_items>dt::before {
    content: "";
    display: block;
    background-color: var(--color-Caramel50);
    /* サンプル指定 */
    mask-image: url('/images/common/icon/icon_q.svg');
    mask-repeat: no-repeat;
    mask-size: contain;
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
}

.faq_items>dd {
    /* copy from DesktopJaBodyM */
    font-family: "Noto Sans JP", sans-serif;
    font-size: var(--main-txtM-size);
    line-height: var(--main-txt-height);
    font-weight: var(--main-txt-weight);
    letter-spacing: var(--main-txt-spacing);

    padding: 3px 0 16px;
    display: flex;
    gap: 8px;
    position: relative;
}

.faq_items>dd::before {
    content: "";
    display: block;
    background-color: var(--color-turquoise50);
    /* サンプル指定 */
    mask-image: url('/images/common/icon/icon_a.svg');
    mask-repeat: no-repeat;
    mask-size: contain;
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
}

.faq_items>dd::after {
    content: "";
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0;
    height: 1px;
    border-bottom: 1px dashed var(--color-black30);
}

.faq_items>dd .faq_content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.faq_items>dd .faq_content p a {
    color: var(--color-Caramel50);
    text-decoration: underline;

}


/* =========================================================
 feature_list メリット、強み 強調リスト
========================================================= */
.feature_list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.feature_list li {
    color: var(--color-turquoise50);
    background-color: var(--color-turquoise10);
    padding: 8px 16px;
    border-radius: var(--radius-100);
    text-align: center;
}


/* =========================================================
 ranking_items ランキングリスト
========================================================= */

.ranking_items {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 12px;
}

.ranking_items>li {
    width: 220px;
    box-sizing: border-box;
    background-color: var(--color-white100);
    border-radius: var(--radius-m);
    padding: 16px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ranking_items .ranking_icon {
    color: var(--color-turquoise);
    font-size: 24px;
}

.ranking_items .rank {
    color: var(--color-white100);
    background-color: var(--color-turquoise);
    border-radius: var(--radius-100);
    min-width: 30px;
    min-height: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.ranking_items .description {
    color: var(--color-turquoise70);
    padding: 4px 16px;
    margin: 8px auto;
}

.ranking_items .item_image {
    width: 100%;
}

/* =========================================================
 outline系 お礼状などの文章構成を示すパーツ
========================================================= */
.outline_flow {
    padding: 16px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.outline_flow dl {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    position: relative;

}

.outline_flow dl:not(:last-child) {
    padding-bottom: 48px;
}


.outline_flow dl:not(:last-child)::after {
    content: "";
    display: inline-block;
    background-color: var(--color-turquoise50);
    mask-image: url(/images/common/icon/icon_arrow_down.svg);
    mask-repeat: no-repeat;
    mask-size: contain;
    width: 40px;
    height: 40px;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -20px;
}


.outline_flow dt {
    position: relative;
    border-right: 1px dashed var(--color-black30);
    box-sizing: border-box;
    width: 89px;
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.outline_flow dt::before {
    content: "";
    position: absolute;
    inset: 0 8px 0 0;
    background-color: var(--color-turquoise40);
    border-radius: var(--radius-xs);
    z-index: 0;
}

.outline_flow dt .head {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: var(--color-white100);
    padding: 12px 24px 12px 16px;
}


.outline_flow dd {
    background-color: var(--color-turquoise10);
    color: var(--color-turquoise50);
    display: flex;
    flex-direction: column;
    /* gap: 12px; */
    padding: 8px 12px;
    flex: 1 1 auto;
}

.outline_flow dd .note {
    background-color: var(--color-Caramel10);
    color: var(--color-black60);
    padding: 8px 16px;
    margin: 4px 0 16px;
}



/* outline_vertical */
.outline_vertical {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.outline_vertical .outline {
    display: flex;
    gap: 16px;
    flex-direction: row-reverse;
    flex-wrap: nowrap;
    justify-content: space-between;
}

.outline_vertical .outline dl {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 8px;
}

.outline_vertical dt {
    position: relative;
    border-bottom: 1px dashed var(--color-black30);
    box-sizing: border-box;
    height: 57px;
    min-width: 66px;
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.outline_vertical dt::before {
    content: "";
    position: absolute;
    inset: 0 0 8px 0;
    background-color: var(--color-turquoise40);
    border-radius: var(--radius-xs);
    z-index: 0;
}

.outline_vertical dt .head {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: var(--color-white100);
    padding: 4px 16px 12px 16px;
}

.outline_vertical dd {
    writing-mode: vertical-rl;
    color: var(--color-black60);
    /* display: flex; */
    /* flex-direction: column; */
    padding: 8px 12px;
    flex: 1 1 auto;
    text-align: start;
    margin: 0;

    /* 縦書きで、特殊指定 */
    font-family: "Noto Sans JP", sans-serif;
    font-size: var(--label-txtL-size);
    line-height: 1.85;
    font-weight: var(--main-txt-weight);
    letter-spacing: 0.1em;
}

.outline_vertical dd .closing {
    display: block;
    text-align: end;
}

.outline_vertical dd .sent_date {
    display: block;
    /* float: left; */
}

.outline_vertical dd .sender {
    display: block;
    float: right;
    position: relative;
}

.outline_vertical dd .sender .sender_heading {
    display: block;
    position: absolute;
    writing-mode: lr;
    background-color: var(--color-turquoise40);
    border-radius: var(--radius-xs);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: var(--color-white100);
    height: 40px;
    padding: 4px 8px 4px 8px;
    white-space: nowrap;

    right: -0.5em;
    top: -52px;
}

.outline_vertical dd .recipient {
    display: block;
    clear: both;
    float: left;
    text-align: end;
}

.outline_vertical dd .recipient::after {
    content: "";
    display: block;
    clear: both;
}

/* outline_horizontal */
.outline_horizontal {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.outline_horizontal .outline {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.outline_horizontal dl {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    position: relative;

}

.outline_horizontal dt {
    position: relative;
    border-right: 1px dashed var(--color-black30);
    box-sizing: border-box;
    width: 89px;
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.outline_horizontal dt::before {
    content: "";
    position: absolute;
    inset: 0 8px 0 0;
    background-color: var(--color-turquoise40);
    border-radius: var(--radius-xs);
    z-index: 0;
}

.outline_horizontal dt .head {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: var(--color-white100);
    padding: 12px 20px 12px 16px;
}


.outline_horizontal dd {
    color: var(--color-black60);
    display: flex;
    flex-direction: column;
    /* gap: 12px; */
    padding: 8px 12px;
    flex: 1 1 auto;
    position: relative;
}

.outline_horizontal dd .sent_date {
    display: block;
    float: left;
    min-height: 52px;
}

.outline_horizontal dd .sender {
    position: absolute;
    right: 12px;
    top: 4px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.outline_horizontal dd .sender .sender_heading {
    display: block;
    background-color: var(--color-turquoise40);
    border-radius: var(--radius-xs);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: var(--color-white100);
    min-height: 40px;
    padding: 8px;
    white-space: nowrap;

}


/* =========================================================
 タイミング
========================================================= */

.timing_flow {
    padding: 16px 24px;
    border-radius: var(--radius-m);
    background-color: var(--color-turquoise20);
    display: flex;
    gap: 4px;
    align-items: stretch;
    justify-content: space-between;
}

.timing_flow .site_icon_arrow_right {
    background-color: var(--color-turquoise50);
    width: 32px;
    height: 32px;
    align-self: center;
}

.timing_flow .stage_block {
    width: 230px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.timing_flow .stage_block .block_name {
    border-radius: var(--radius-100);
    color: var(--color-white100);
    padding: 4px 8px;
    height: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.timing_flow .stage_block.turquoise .block_name {
    background-color: var(--color-turquoise50);
}

.timing_flow .stage_block.caramel .block_name {
    background-color: var(--color-caramel);
}

.timing_flow .symbol_icon {
    border-radius: var(--radius-m);
    background-color: var(--color-white100);
    padding: 16px 24px;
    width: auto;
    height: auto;
    flex: 1 1 auto;
}

.timing_flow .stage_block.turquoise .symbol_icon {
    color: var(--color-turquoise50);
}

.timing_flow .stage_block.caramel .symbol_icon {
    color: var(--color-caramel);
}

.timing_flow .label {
    text-align: center;
}

.timing_flow .childbirth {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 0;
    align-items: center;

}

.timing_flow .childbirth * {
    color: var(--color-turquoise50);
}

.timing_flow .site_icon_childbirth {
    background-color: var(--color-turquoise50);
    height: 88px;
    width: 88px;
}



/* =========================================================
 セクション下部 ナビゲーションボタンエリア
========================================================= */
.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;
}