.area-icon_information.cat01 {
    grid-area: cat1;
}

@media screen and (max-width: 768px) {
    .area-icon_information.cat01 {
        margin-top: var(--spacing-lg);
    }
}

.area-icon_information.cat01 .inner {
    position: relative;
}

:is(.area-icon_information.cat01 .inner) figure {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 30%;
    height: fit-content;
    overflow: hidden;
}

:is(:is(.area-icon_information.cat01 .inner) figure) img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

:is(.area-icon_information.cat01 .inner) .btn {
    width: 40%;
}

@media screen and (max-width: 768px) {
    :is(.area-icon_information.cat01 .inner) figure {
        position: static;
        width: 50%;
        height: auto;
    }

    :is(.area-icon_information.cat01 .inner) .btn {
        width: 80%;
    }
}

.area-icon_information.cat01 .title::before {
    background-image: url("../images/service-icon01.svg");
}

.area-icon_information.cat02 {
    grid-area: cat2;
}

.area-icon_information.cat02 .title::before {
    background-image: url("../images/service-icon02.svg");
}

.area-icon_information.cat03 {
    grid-area: cat3;
}

.area-icon_information.cat03 .title::before {
    background-image: url("../images/service-icon03.svg");
}

.area-icon_information.cat04 {
    grid-area: cat4;
}

.area-icon_information.cat04 .title::before {
    background-image: url("../images/service-icon04.svg");
}

.area-icon_information.cat05 {
    grid-area: cat5;
}

.area-icon_information.cat05 .title::before {
    background-image: url("../images/service-icon05.svg");
}

.area-icon_information.cat06 {
    grid-area: cat6;
}

.area-icon_information.cat06 .title::before {
    background-image: url("../images/service-icon06.svg");
}

.l-service_page {
    display: grid;
    gap: var(--spacing-md);
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas:
        "cat1 cat1"
        "cat2 cat3"
        "cat4 cat5"
        "cat6 .";
}

@media screen and (max-width: 768px) {
    .l-service_page {
        grid-template-columns: 1fr;
        grid-template-areas:
            "cat1"
            "cat2"
            "cat3"
            "cat4"
            "cat5"
            "cat6";
    }

    .l-service_page figure {
        margin: var(--spacing-md) auto 0 auto;
    }
}

:is(.l-service_page .inner:has(figure)) .content {
    width: 70%;
}

@media screen and (max-width: 768px) {
    :is(.l-service_page .inner:has(figure)) .content {
        width: 100%;
    }
}

:is(.page-service-etc .card-number) .card-campaign {
    display: grid;
    grid-template-rows: 1fr auto 2fr;
}

:is(:is(.page-service-etc .card-number) .card-campaign) .title {
    display: flex;
    align-items: center;
}

:is(:is(.page-service-etc .card-number) .card-campaign) .content {
    align-items: baseline;
    justify-content: flex-start;
}

.page-service-etc article section .section-inner>section {
    margin-top: 0;
}

.page-service-etc dl.disc dt {
    font-weight: bold;
}

.page-service-etc dl.disc dd {
    padding-left: 1em;
}

@media screen and (max-width: 768px) {
    :is(.page-service-feepay .article-inner) ul.note {
        margin-left: auto;
        margin-right: auto;
    }
}

.page-service-feepay .link-table {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid var(--border-gray);
}

:is(.page-service-feepay .link-table) .title,
:is(.page-service-feepay .link-table) .cell {
    font-weight: bold;
    text-align: center;
    padding: var(--spacing-xs) var(--spacing-md) var(--spacing-xs) var(--spacing-sm);
}

:is(.page-service-feepay .link-table) .title {
    width: 100%;
    background-color: var(--bg-th-lightyellow);
    border-bottom: 1px solid var(--border-gray);
}

:is(.page-service-feepay .link-table) .cell {
    display: grid;
    grid-template-columns: 30px calc(100% - 30px);
    gap: var(--spacing-xs);
    width: calc(100% / 3);
    border-bottom: 1px solid var(--border-gray);
    border-right: 1px solid var(--border-gray);
    align-items: center;
    position: relative;
}

:is(:is(.page-service-feepay .link-table) .cell):hover {
    background-color: var(--bg-th-lightyellow);
}

:is(:is(.page-service-feepay .link-table) .cell)::after {
    content: "";
    display: block;
    position: absolute;
    border-right: var(--accent_green) 0.2em solid;
    border-top: var(--accent_green) 0.2em solid;
    transform: rotate(135deg);
    width: var(--arrow-width);
    height: var(--arrow-width);
    top: calc(50% - var(--arrow-width) / 2);
    right: calc(var(--arrow-width) + var(--spacing-xs));
}

@media screen and (min-width: 768.8px) {
    :is(:is(.page-service-feepay .link-table) .cell):nth-of-type(3n) {
        border-right: none;
    }

    :is(:is(.page-service-feepay .link-table) .cell):nth-last-child(-n + 3) {
        border-bottom: none;
    }
}

@media screen and (max-width: 768px) {
    :is(.page-service-feepay .link-table) .cell {
        width: 50%;
    }

    :is(:is(.page-service-feepay .link-table) .cell):nth-of-type(2n) {
        border-right: none;
    }

    :is(:is(.page-service-feepay .link-table) .cell):nth-last-child(-n + 2) {
        border-bottom: none;
    }
}

.page-service-feepay h3>figure {
    margin-right: 0.5em;
}

.page-service-feepay ul.disc {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, max-content));
    gap: var(--spacing-sm);
    row-gap: 0;
    text-indent: unset;
    padding-left: unset;
}

:is(.page-service-feepay ul.disc) li {
    display: inline-flex;
}

.page-service-jcb .grid-jcb {
    display: grid;
    grid-template-columns: calc(100px + var(--spacing-md) * 2) 1fr;
    gap: var(--spacing-md);
}

:is(.page-service-jcb .grid-jcb) figure {
    padding: var(--spacing-md);
    background-color: var(--bg-gray);
}

:is(.page-service-jcb dl.disc) .disc-item+.disc-item {
    margin-top: 1rem;
}

:is(.page-service-jcb dl.disc) dt {
    font-weight: bold;
}

:is(.page-service .area-icon_information) .inner {
    display: grid;
    grid-template-rows: 1fr 1fr;
}

:is(:is(.page-service .area-icon_information) .inner):has(figure) {
    grid-template-rows: 6rem 1fr;
}

@media screen and (max-width: 768px) {
    :is(:is(.page-service .area-icon_information) .inner) figure {
        margin-top: 0;
    }

    :is(.page-service .area-icon_information) .inner {
        grid-template-rows: unset;
    }
}

/*---discount //----------------------------------------*/
.page-service-discount figure.card-img {
    width: 80%;
    margin: 0 auto;
}

@media screen and (max-width: 768px) {
    .page-service-discount figure.card-img {
        width: 100%;
    }
}

.page-service-discount .discount {
    width: 90%;
    margin: 0 auto;
}

@media screen and (max-width: 768px) {
    .page-service-discount .discount {
        width: 100%;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-xs);
    }
}

.page-service-discount .graph01 {
    width: 55%;
    margin: 0 auto;
}

@media screen and (max-width: 768px) {
    .page-service-discount .graph01 {
        width: 100%;
    }
}

.page-service-discount .graph02 {
    width: 55%;
    margin: 0 auto;
}

@media screen and (max-width: 768px) {
    .page-service-discount .graph02 {
        width: 100%;
    }
}

.page-service-discount .section-inner>.with-img {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: var(--spacing-md);
}

:is(.page-service-discount .section-inner > .with-img) p {
    word-break: keep-all;
    overflow-wrap: anywhere;
    width: 70%;
}

:is(.page-service-discount .section-inner > .with-img) figure {
    width: 45%;
}

@media screen and (max-width: 768px) {
    .page-service-discount .section-inner>.with-img {
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    :is(.page-service-discount .section-inner > .with-img) p {
        width: 100%;
    }

    :is(.page-service-discount .section-inner > .with-img) figure {
        width: 60%;
        margin-left: auto;
        margin-right: auto;
    }
}