body.compatibility {
    opacity: 0;
}

body.compatibility.is_active {
    opacity: 1;
    transition: .3s;
}

.onom_form_surname_label:before {
    content: "";
    height: clamp(12px, calc((20/ 600)*100vw), 20px);
    width: clamp(12px, calc((20/ 600)*100vw), 20px);
    background: url(../../static/images/compatibility_star.svg) no-repeat;
    background-size: contain;
    display: block;

}

.result__otherLink--outer {
    padding: 20px;
}

.result__otherLink.result__adovice.b-top {
    border: 1px solid;
    padding: 20px;
    font-size: 14px;
    text-align: center;
    background: #fff;
}

.result__adovice--title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.result__otherLink--sub {
    text-align: center;
    font-weight: bold;
    border-bottom: 1px dashed;
    margin-bottom: 5px;
    padding-bottom: 5px;
}

.result__adovice--image {
    margin-bottom: 10px;
}

.result__otherLink--outer img {
    max-width: 300px;
}

.result__adovice--body {
    text-align: left;
}

.onom_form_surname_label {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #262D7A;
    font-size: clamp(12px, calc((20/ 600)*100vw), 20px);
    margin-bottom: 2px;
}

.onom_form_namebox input {
    width: 100%;
    border: 2px solid #262D7A;
    border-radius: 10px;
    color: #262D7A;
    font-size: clamp(16px, calc((22/ 600)*100vw), 22px);
    padding: 15px 10px;
    box-sizing: border-box;
}

.compatibility__body {
    padding: 60px 0;
    background: linear-gradient(181deg, #FDDFEB, #FFF1F6);
}

.onom_form_namebox {
    margin: 0 auto 50px;
    width: 95%;
}

.compatibility__submit-outer {
    text-align: center;
    margin-bottom: 50px;
}

#send.compatibility__submit {
    background-color: #262D7A;
    width: 250px;
    height: 60px;
    color: #fff;
    position: relative;
    justify-content: center;
    align-items: center;
    border-radius: 80px;
    pointer-events: auto;
    cursor: pointer;
    transition: .2s;
    border: none;
}

#send.compatibility__submit:hover {
    background-color: #4e58bd;
    transition: .2s;
}

#send.compatibility__submit:before,
#send.compatibility__submit:after {
    pointer-events: none;
    content: "";
    width: 10px;
    height: 10px;
    background: url(../../static/images/compatibility_star_w.svg) no-repeat;
    background-size: cover;
    display: block;
    position: absolute;
}

#send.compatibility__submit:before {
    left: 16px;
    top: 0;
    transform: translateY(0%) translateX(0%);
    bottom: 0;
    margin: auto;
}

#send.compatibility__submit:after {
    right: 16px;
    top: 0;
    transform: translateY(0%) translateX(0%);
    bottom: 0;
    margin: auto;
}

/****/
.compatibility__result--submit {
    background-color: #262D7A;
    width: 300px;
    height: 60px;
    color: #fff;
    position: relative;
    justify-content: center;
    align-items: center;
    border-radius: 80px;
    pointer-events: auto;
    cursor: pointer;
    transition: .2s;
    border: none;
    font-size: 1rem;
    display: flex;
    font-weight: bold;
}

.compatibility__result--submit:hover {
    background-color: #4e58bd;
    transition: .2s;
}

.compatibility__result--submit:before,
.compatibility__result--submit:after {
    pointer-events: none;
    content: "";
    width: 10px;
    height: 10px;
    background: url(../../static/images/compatibility_star_w.svg) no-repeat;
    background-size: cover;
    display: block;
    position: absolute;
}

.compatibility__result--submit:before {
    left: 16px;
    top: 0;
    transform: translateY(0%) translateX(0%);
    bottom: 0;
    margin: auto;
}

.compatibility__result--submit:after {
    right: 16px;
    top: 0;
    transform: translateY(0%) translateX(0%);
    bottom: 0;
    margin: auto;
}


.compatibility__descbox__head,
.compatibility__descbox__bottom {
    display: block;
    width: 100%;
    position: relative;
}

.compatibility__descbox__head:before,
.compatibility__descbox__head:after,
.compatibility__descbox__bottom:before,
.compatibility__descbox__bottom:after {
    content: "";
    width: 10px;
    height: 10px;
    background: url(../../static/images/compatibility_star.svg) no-repeat;
    background-size: cover;
    display: block;
    position: absolute;
}

.compatibility__descbox__head:before {
    top: 12px;
    left: 12px;
}

.compatibility__descbox__head:after {
    top: 12px;
    right: 12px;
}

.compatibility__descbox__bottom:before {
    bottom: 12px;
    left: 12px;
}

.compatibility__descbox__bottom:after {
    bottom: 12px;
    right: 12px;
}

.compatibility__descbox {
    border: 2px solid;
    color: #262D7A;
    padding: 23px 27px;
    border-radius: 8px;
    background: #fff;
}

.compatibility__dotline_pk {
    text-align: center;
    font-weight: bold;
    border-bottom: 1px dotted;
    padding: 0 10px 8px;
    margin-bottom: 8px;
    display: inline-block;
}

.compatibility__desctitle {
    text-align: center;
}

.compatibility__image {
    background: #fcdfea;
    position: relative;
}

.compatibility__image--right {
    position: absolute;
    top: 4%;
    right: 20%;
    width: 20%;
}


.compatibility__image--left {
    position: absolute;
    bottom: 17%;
    left: 20%;
    width: 9%;
}

.compatibility_buttonbox {
    text-align: center;
}

.compatibility_button {

    display: flex;
    justify-content: center;
}

button.compatibility-copy {
    border: 1px solid #3f4589;
    color: #3f4589;
}

.compatibility .koimikuji_sns_share a {
    background: #3f4589;
}

.compatibility #copy:after {

    background: #3f4589;
    mask-image: url(../../static/images/copyicon_bk.svg);
    mask-size: 16px 16px;
}

.koimikuji_loader_bar {
    height: 4px;
    width: 130px;
    --c: no-repeat linear-gradient(#202880 0 0);
    background: var(--c), var(--c), #d4d7ff;
    background-size: 60% 100%;
    animation: l16 3s infinite;
}

.compatibility_loader_box {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fee1ec;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    z-index: 10;
    padding-top: 50px;
    pointer-events: none;

    background-size: 40px;
}


.loading__women {
    width: 100px;
}

.loading__men {
    width: 60px;
}



.compatibility_loaderimg {
    display: flex;
    justify-content: center;
    align-items: center;
}

.koimikuji_resultitle_wrap {
    padding: 10px;
}

.koimikuji_resultitle_date.font-b {
    text-align: center;
}

.koimikuji_resultitle_name {
    margin-bottom: 5px;
    font-size: clamp(1px, calc((17 / 600)*100vw), 17px);
    font-weight: bold;

    @media screen and (max-width: 425px) {
        font-size: clamp(1px, calc((11 / 425)*100vw), 11px);
    }

    @media screen and (max-width: 375px) {
        font-size: clamp(1px, calc((9 / 375)*100vw), 9px);
    }

    @media screen and (max-width: 320px) {
        font-size: 7px;
    }
}


.koimikuji_resultitle_logo {
    width: 50px;
}

.koimikuji_mainbox {
    background: linear-gradient(181deg, #FDDFEB, #FDDFEB);
    padding-bottom: 0;
}

.anime {
    opacity: 0;
    transform: translateX(20px);
}

.fade-in-left {
    animation: fadeInleft 1.1s ease-out forwards;

}

.fade-in-right {
    animation: fadeInRight 0.9s ease-out forwards;
}

.bounce {
    animation: bounceUpDown 5s ease-in-out infinite;
}

.bounce2 {
    animation: bounceUpDown2 4s ease-in-out infinite;
}

@keyframes fadeInleft {
    0% {
        opacity: 0;
        transform: translateX(20px);
    }

    100% {
        opacity: 1;
        transform: translateX(0px);
    }
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translateX(-20px);
    }

    100% {
        opacity: 1;
        transform: translateX(0px);
    }
}

@keyframes bounceUpDown {
    0% {
        transform: translateY(0px);
    }

    25% {
        transform: translateY(-7px);
    }

    75% {
        transform: translateY(7px);
    }

    100% {
        transform: translateY(0px);
    }
}

@keyframes bounceUpDown2 {
    0% {
        transform: translateY(0px);
    }

    23% {
        transform: translateY(-7px);
    }

    82% {
        transform: translateY(7px);
    }

    100% {
        transform: translateY(0px);
    }
}




.animation-a {
    display: inline-block;
    animation: moveAndFlipA 2s infinite;
}

@keyframes moveAndFlipA {
    0% {
        transform: translateY(0);
    }


    10% {
        transform: translateY(-10px);
    }

    20% {
        transform: translateY(0px);
    }

    30% {
        transform: translateY(0px);
    }

    40% {
        transform: translateY(-10px);
    }

    50% {
        transform: translateY(0px);
    }



    100% {
        transform: translateY(0pc);
    }
}

.animation-b {
    display: inline-block;
    animation: moveAndFlipB 2s infinite;
}

@keyframes moveAndFlipB {
    0% {
        transform: translateY(0);
    }


    10% {
        transform: translateY(-10px);
    }

    20% {
        transform: translateY(0px);
    }

    30% {
        transform: translateY(0px);
    }

    40% {
        transform: translateY(-10px);
    }

    50% {
        transform: translateY(0px);
    }



    100% {
        transform: translateY(0pc);
    }
}

/* particles.jsコンテナ */
#particles-js {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    /* ビューポート幅 */
    height: 100vh;
    /* ビューポート高 */
    pointer-events: none;
    z-index: 12;

}

/* canvasタグに対しても明示的にスタイル適用 */
#particles-js canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

.compatibility_loader_box,
.koimikuji_resultbox {

    transition: opacity 1s ease;
}

.compatibility__desctxt {
    text-align: justify;
}


.compatibility__recomend--title {
    font-size: 20px;
    text-align: center;
    margin: 30px auto 30px;
    font-weight: bold;
    color: #262d79;
}

.compatibility__recomend--list {
    width: 95%;
    margin: auto;
}

.compatibility__recomend--item a {
    display: flex;
}

.compatibility__recomend--item img {
    width: 50%;
}

.compatibility__recomend--itemTitle {
    font-size: 20px;
    font-weight: bold;
}

.compatibility__recomend--itemSubTitle {
    font-size: 14px;


    @media screen and (max-width: 425px) {
        font-size: 12px;
    }
}

.compatibility__recomend--list {
    width: 95%;
    margin: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.compatibility__recomend--item a {
    display: flex;
    gap: 10px;
}

.compatibility__recomend--item {
    background: #fff;
    padding: 10px;
    border-radius: 3px;
    border: 2px solid #fff;
}

.compatibility__recomend--itemTitle {
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    border-bottom: 1px dotted #aaa;
    margin-bottom: 10px;
    padding-bottom: 10px;
}

.compatibility__recomend--item img {
    border-radius: 3px;
}

h1.compatibility__image {
    margin: 0;
}

.cf2_btn__wrapper {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.result__otherLink--outer {
    padding: 20px;
    color: #262d79;
}





#gpt-passback,
#gpt-passback iframe,
.gpt-passback__outer {
    width: 300px !important;
    height: 250px !important;
    max-width: 300px !important;
}

.ads__outer {
    display: flex;
    padding-bottom: 10px;
    justify-content: center;
    background: #fddfea;

}

.ad-loder-outer {
    margin-top: 20px;
}

.koimikuji_resultbox {
    padding-bottom: 30px;
    margin-bottom: 0;
}