#mail {
    padding-top: 8rem;

    .securityDanger {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 4rem;
        margin-top: 4.8rem;
        width: fit-content;
        margin-inline: auto;

        .circle {
            aspect-ratio: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            background-color: var(--colorWhite);
            border: 1px solid var(--colorTurquoiseBlue);
            border-radius: 50%;
            max-width: 31.3rem;
            padding-inline: 4.6rem;

            .securityDanger__text {
                font-size: var(--fontSize20);
                font-family: var(--fontBIZUDPGothic);
                text-align: center;
            }
        }
    }

    @media (max-width:767px) {
        .securityDanger {
            grid-template-columns: 1fr 1fr;
            gap: 0 2rem;

            .circle {
                width: 18rem;
                height: 18rem;
                padding-inline: 1.6rem;
                margin: 0 auto;

                .securityDanger__text {
                    font-size: var(--fontSize13);
                }

                &:first-of-type {
                    grid-column: 1 / -1;
                }
            }
        }
    }

    .mailService {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 7rem;
        font-family: var(--fontBIZUDPGothic);
        margin-block: 8rem 12rem;

        .mailService__table {
            position: relative;

            .mailService__title {
                font-size: var(--fontSize28);
                color: var(--colorWhite);
                text-align: center;
                border-radius: 2rem 2rem 0 0;
                padding-block: 0.8rem;
            }

            .mailService__list {
                background-color: var(--colorWhite);
                border-radius: 0 0 2rem 2rem;
                padding: 2rem 4rem;

                .mailService__listItem {
                    display: grid;
                    grid-template-columns: 1.8rem auto;
                    gap: 0.2rem;
                    font-size: var(--fontSize20);
                    padding-block: 1.3rem;
                    align-content: center;
                }

                .mailService__listItem:last-of-type {
                    border-bottom: none;
                }

                .mailService__listItem::before {
                    content: "";
                    background-repeat: no-repeat;
                    background-size: contain;
                    display: block;
                    width: 1.8rem;
                    height: 1.8rem;
                    margin-top: 0.7rem;
                }
            }
        }

        .mailService__table::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 100%;
            transform: translateY(-50%);
            display: block;
            clip-path: polygon(0 0, 0 100%, 100% 50%);
            background-color: var(--colorBlack);
            width: 3rem;
            height: 5.6rem;
            margin-left: 2rem;
        }

        .mailService__table:last-of-type:after {
            display: none;
        }

        .recommend__table {
            .recommend__table::after {
                content: "";
            }

            .mailService__title {
                background-color: var(--colorGreen);
            }

            .mailService__listItem {
                border-bottom: 1px solid var(--colorGreen);
            }

            .mailService__listItem::before {
                background-image: url(../img/icon_table_1.png);
            }
        }

        .service__table {
            .mailService__title {
                background-color: var(--colorTurquoiseBlue);
            }

            .mailService__listItem {
                border-bottom: 1px solid var(--colorTurquoiseBlue);
            }

            .mailService__listItem::before {
                background-image: url(../img/icon_table_2.png);
            }
        }
    }

    @media (max-width:767px) {
        .mailService {
            grid-template-columns: 1fr;

            .mailService__table::after {
                top: 100%;
                left: 50%;
                transform: translate(-50%, 0);
                clip-path: polygon(0 0, 50% 100%, 100% 0);
                width: 5.6rem;
                height: 3rem;
                margin: 2rem 0 0;
            }
        }
    }

    .mailMerit {
        background: #fff;
        margin: 0;
        padding-top: 8rem;
        width: 100%;
        max-width: 100%;

        .mailMerit__list {
            padding-inline: 4rem;

            .mailMerit__listItem {
                display: grid;
                grid-template-columns: 10rem auto;
                align-items: center;
                gap: 2rem;
                margin-top: 4rem;

                .mailMerit__numWrap {
                    font-size: var(--fontSize12);
                    font-family: var(--fontBIZUDPGothic);
                    background-color: var(--colorGreen);
                    border-radius: 50%;
                    color: var(--colorWhite);
                    text-align: center;
                    line-height: 1;
                    display: grid;
                    gap: 0.5rem;
                    align-content: center;
                    width: 10rem;
                    height: 10rem;

                    .mailMerit__num {
                        font-size: var(--fontSize44);
                        font-family: var(--fontPrompt);
                        font-weight: 200;
                    }

                    @media (max-width:767px) {
                        align-content: center;
                        padding-top: 0;
                    }
                }

                .mailMerit__listText {
                    font-size: var(--fontSize28);
                    font-family: var(--fontBIZUDPGothic);
                    letter-spacing: 0.1em;
                }
            }
        }
    }

    @media (max-width:767px) {
        .mailMerit {
            .mailMerit__list {
                padding-inline: 0;
            }
        }
    }

    .mailImage {
        background: #fff;
        margin: 0;
        padding-block: 8rem 12rem;
        width: 100%;
        max-width: 100%;

        .common__BlueLink {
            margin-top: 8rem;
        }

        .mailImage__table {
            border: 1px solid var(--colorBlack);
            border-radius: 4rem;
            font-family: var(--fontBIZUDPGothic);

            .mailImage__title {
                font-size: var(--fontSize28);
                color: var(--colorWhite);
                background-color: var(--colorGreen);
                text-align: center;
                border-bottom: 1px solid var(--colorBlack);
                border-radius: 4rem 4rem 0 0;
                padding-block: 1rem;
            }

            .mailImage__tableContent {
                padding: 4rem 8rem 2rem;

                .mailImage__text {
                    font-size: var(--fontSize16);
                }

                .mailImage__img {
                    margin-top: 1.5rem;

                    img {
                        width: 90%;
                        margin-inline: auto;
                        display: block;
                    }
                }

                .mailImage__asterisk {
                    font-size: var(--fontSize13);
                }
            }
        }
    }

    @media (max-width:767px) {
        .mailImage {
            .mailImage__table {
                .mailImage__tableContent {
                    padding: 4rem 2rem 2rem;

                    .mailImage__img {
                        margin-block: 2rem;

                        img {
                            width: 100%;
                        }
                    }
                }
            }

            .common__BlueLink {
                margin-top: 4rem;
            }
        }
    }

    .mailCost {
        h3 {
            font-size: var(--fontSize28);
            font-family: var(--fontBIZUDPGothic);
            color: var(--colorTurquoiseBlue);
            text-align: center;
            margin-block: 12rem 2.5rem;
        }

        .h3title__text {
            font-size: var(--fontSize16);
            text-align: center;
            margin-bottom: 3rem;
        }

        .mailCost__tableWrap {
            display: grid;
            grid-template-columns: 16.6rem auto;
            gap: 2rem;
            font-family: var(--fontBIZUDPGothic);
            position: relative;
            margin-bottom: 7rem;

            &:nth-last-child(1) {
                margin-bottom: 0;
            }

            .mailCost__step {
                display: flex;
                flex-direction: column;
                justify-content: center;
                font-size: var(--fontSize20);
                line-height: 1.25;
                color: var(--colorWhite);
                background-color: var(--colorGreen);
                border-radius: 2rem;
                padding: 2rem 3rem;

                .mailCost__stepBorder {
                    padding-block: 0.5rem;
                }
            }

            .mailCost__table table {
                border-collapse: separate;
                width: 100%;
                height: 100%;

                th {
                    font-size: var(--fontSize20);
                    text-align: center;
                    vertical-align: middle;
                    background-color: var(--colorTurquoiseBlue);
                    color: var(--colorWhite);
                    padding: 1rem 0.5rem 0.7rem;
                    line-height: 1.25;
                }

                td {
                    font-size: var(--fontSize16);
                    text-align: center;
                    vertical-align: middle;
                    background-color: var(--colorWhite);
                    padding: 1rem 0.5rem;
                    border-bottom: 0.4rem solid var(--colorGray);
                    border-right: 0.4rem solid var(--colorGray);

                    &.text-left {
                        text-align: start;
                        padding-left: 2rem;
                    }

                    &:nth-last-child(1) {
                        border-right: none;
                    }
                }
            }

            .table__step1 table {
								th {
									border-right: 0.4rem solid var(--colorGray);
									width: 16.5%;
								}
                th:first-of-type {
                    border-radius: 2rem 0 0 0;
										width: unset;
                }

                th:last-of-type {
                    border-radius: 0 2rem 0 0;
										border-right: none;
                }

                tr:nth-of-type(5) {
                    td:first-of-type {
                        border-radius: 0 0 0 2rem;
                    }
                }

                tr:last-of-type {
                    td:last-of-type {
                        border-radius: 0 0 2rem 0;
                    }
                }
            }

            .table__step2 table {
                font-family: var(--fontBIZUDPGothic);

                th {
                    border-radius: 2rem 0 0 2rem;
                    width: 18rem;
                    padding-block: 3.5rem;
                }

                td {
                    font-size: var(--fontSize20);
                    letter-spacing: 0.1em;
										border-bottom: none;
                }

                td:last-of-type {
                    border-radius: 0 2rem 2rem 0;
                }
            }

            .step3__textWrap {
                background-color: var(--colorWhite);
                text-align: center;
                border-radius: 2rem;
                height: 100%;
                padding: 2rem;
            }

            .step3__text {
                background-color: var(--colorTurquoiseBlue);
                color: var(--colorWhite);
                font-size: var(--fontSize20);
                border-radius: 4rem;
                width: fit-content;
                padding: 1rem 8rem;
                margin: 0.8rem auto 0;
            }

            .step3__title {
                font-size: var(--fontSize20);
            }
        }

        .mailCost__tableWrap::after {
            content: "";
            position: absolute;
            top: 100%;
            left: 57%;
            display: block;
            clip-path: polygon(0 0, 50% 100%, 100% 0);
            background-color: var(--colorBlack);
            width: 5.6rem;
            height: 3rem;
            margin: 2rem auto;
        }

        .mailCost__tableWrap:last-of-type::after {
            display: none;
        }

    }

    @media (max-width:767px) {
        .mailCost {
            .mailCost__tableWrap {
                grid-template-columns: 1fr;

                .mailCost__step {
                    flex-direction: row;
                    gap: 1rem;

                    .mailCost__stepBorder {
                        padding: 0;
                    }
                }

                .table__step2 table {
                    th {
                        width: 12rem;
                    }
                }
            }

            .mailCost__tableWrap::after {
                left: 50%;
                transform: translateX(-50%);
            }

            .mailCost__table.table__step1 {
                position: relative;
                overflow: scroll;
                white-space: nowrap;
                border-radius: 2rem 0 0 2rem;

                th:nth-child(1) {
                    position: sticky;
                    left: 0;
                    z-index: 10;
                    box-shadow: 7px 0px 16px -10px rgba(0, 0, 0, 0.4);
                }

                td:nth-child(1) {
                    position: sticky;
                    left: 0;
                }

                td.text-left {
                    position: sticky;
                    left: 7.9rem;
                    box-shadow: 7px 0px 16px -10px rgba(0, 0, 0, 0.4);
                }
            }
        }

    }
}

.mdm__merit {
	.mdm__meritinner {
		max-width: 1100px;
    .merit__list {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
        margin-top: 2rem;

        li {
            width: 100%;
            padding: 0;

            .merit__listbox {
                dt {
                    background-color: var(--colorTurquoiseBlue);
                }

                dd {
                    padding: 3rem 2.7rem;

                    .merit__img {
                        margin-bottom: 3.5rem;

                        img {
                            object-fit: contain;
                            width: 15rem;
                            height: 14rem;
                        }
                    }

                    p {
                        line-height: 1.8;
                    }
                }
            }
        }
    }

    .merit__list:first-of-type {
        grid-template-columns: calc((100% - 4rem) / 3) 1fr;
    }

    .common__BlueLink {
        margin-top: 8rem;
    }
	}

}

@media (max-width:767px) {
    .mdm__merit {
			.mdm__meritinner {
				 .merit__list {
            grid-template-columns: 1fr;
            margin-inline: 0.8rem;
        }

        .merit__list:first-of-type {
            grid-template-columns: 1fr;
        }

        .common__BlueLink {
            margin-top: 4rem;
        }
			}
    }
}

.common__BlueLink {
    margin-top: 8rem;
}

#service-flow {
    background-color: var(--colorWhite);
    padding-top: 12rem;
    border-bottom: 1px solid var(--colorBlack);
}