@charset "UTF-8";

/*-- モーダル共通 --*/
@media all {
    body:has(#fp-contents-wrap) .rs-dialog-modal {

        a {
            transition: opacity 0.3s;
        }

        [type="button"] {
            transition: opacity 0.3s;
            cursor: pointer;
        }

        [type="button"]:hover {
            opacity: var(--rs-opacity-hover);
        }

        & .uk-modal-dialog {
            transform: translateY(0);
            width: min(80%, 66rem);
            position: relative;
            border-radius: 0;
            background-color: transparent;
            container-type: initial;
            height: auto;
            padding: 0;
        }

        & .uk-modal-dialog>.uk-modal-close {
            background-color: transparent;
            margin: 0 0 0.5rem auto;
            border: none;
            padding: 0;
            display: block;
        }

        & .uk-modal-dialog>.uk-modal-close::after {
            content: '';
            background-image: var(--rs-svg-close);
            background-repeat: no-repeat;
            background-size: contain;
            width: 1.2rem;
            height: auto;
            aspect-ratio: var(--rs-ar-close);
            display: block;
            background-color: transparent;
            padding: 0;
        }

        & .rs-modal-inner {
            background-color: #fff;
            padding: 0;
            height: fit-content;
            max-height: 90dvh;
            container-type: inline-size;
            padding: 0 0;
            overflow: hidden;
        }

        & .rs-modal-header {
            background-color: #fff;
            padding: 3rem 3rem 2rem;
        }

        & .rs-modal-header .rs-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 0 1rem;
        }

        & .rs-modal-header .rs-icon::after {
            content: '';
            background-image: url('../img/information-red.png');
            background-repeat: no-repeat;
            background-size: contain;
            aspect-ratio: 56 / 56;
            display: block;
            width: 2.7rem;
            height: auto;
        }

        & .rs-modal-header h2 {
            font-size: var(--rs-fs-20);
            font-weight: var(--rs-fw-bold);
            margin: 0;
            padding: 0;
            text-align: center;
        }

        & .rs-modal-body {
            scrollbar-width: none;
            overflow-y: auto;
            padding: 0 3rem 0;
            max-height: calc(90dvh - 1.7rem - 11.7rem - 9.5rem);
        }

        & .rs-modal-body .rs-message-items {
            background-color: #F7F7F7;
            display: flex;
            flex-direction: column;
            gap: 1.6rem 0;
            padding: 2rem 2.2rem;
        }

        & .rs-modal-body .rs-message-items>* {
            display: flex;
            align-items: start;
            font-size: var(--rs-fs-16);
            font-weight: var(--rs-fw-regular);
            color: #6E6E6E;
            gap: 0 1rem;
        }

        & .rs-modal-body .rs-message-items .rs-list-style {
            padding-top: calc((1lh - 0.8rem) / 2);
        }

        & .rs-modal-body .rs-message-items .rs-list-style::after {
            content: '';
            width: 0.8rem;
            height: auto;
            aspect-ratio: 1 / 1;
            display: block;
            border-radius: 50%;
            background-color: #AEAEAE;
        }

        & .rs-modal-body .rs-message-items>* span:first-child {
            flex-shrink: 0;
        }

        & .rs-modal-footer {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 1.5rem 3rem 3rem;
        }

        & .rs-modal-footer .uk-modal-close {
            background-color: #333333;
            color: #fff;
            font-size: var(--rs-fs-16);
            font-weight: var(--rs-fw-medium);
            width: calc(160 / 660 * 100cqw);
            display: flex;
            align-items: center;
            justify-content: center;
            height: 5rem;
            border-radius: 2.8rem;
            gap: 0 1rem;
            border: none;
        }

        & .rs-modal-footer .uk-modal-close::before {
            content: '';
            background-image: var(--rs-svg-close);
            background-repeat: no-repeat;
            background-size: contain;
            width: 1.1rem;
            height: auto;
            aspect-ratio: var(--rs-ar-close);
            display: block;
            background-color: transparent;
            padding: 0;
        }

        & .rs-modal-footer .uk-modal-close:hover {
            opacity: var(--rs-opacity-hover);
        }
    }
}