@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);

body {
    font-family: 'Noto Sans JP', sans-serif;
}

main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.yellow-line {
    font-size: calc(16 / 390 * 100vw);
    font-weight: 900;
    position: relative;
    display: inline-block;
}

.yellow-line::after {
    position: absolute;
    content: '';
    height: calc(10 / 390 * 100vw);
    width: 100%;
    left: 0;
    bottom: 0;
    background-color: #FBFC00;
    border-radius: calc(4 / 390 * 100vw);
    z-index: -1;
}

.title-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: calc(44 / 390 * 100vw);

    p {
        font-size: calc(14 / 390 * 100vw);
        color: #454545;
        font-weight: 500;
    }
}

.title-image-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    height: calc(512 / 390 * 100vw);
    width: 100vw;
    padding-top: calc(27 / 390 * 100vw);

    .logo {
        width: calc(184 / 390 * 100vw);
    }

    .image1 {
        position: absolute;
        z-index: -1;
        top: calc(62 / 390 * 100vw);
        left: calc(43 / 390 * 100vw);
        width: calc(334 / 390 * 100vw);
    }

    .image2 {
        position: absolute;
        z-index: -1;
        top: calc(337 / 390 * 100vw);
        left: calc(12 / 390 * 100vw);
        width: calc(159 / 390 * 100vw);
    }

    .image3 {
        position: absolute;
        z-index: -1;
        top: calc(422 / 390 * 100vw);
        left: calc(166 / 390 * 100vw);
        width: calc(191 / 390 * 100vw);
    }

    .title-text {
        display: flex;
        flex-direction: column;
        gap: calc(2 / 390 * 100vw);
        align-items: start;
        padding-left: calc(24 / 390 * 100vw);
        margin-top: calc(46 / 390 * 100vw);

        .title {
            font-size: calc(16 / 390 * 100vw);
            color: #484848;
            font-weight: 900;
            background-color: rgba(255, 255, 255, 0.75);
            text-shadow: rgba(0, 0, 0, 0.25) 0 4px 4px;
        }

        .subtitle {
            font-size: calc(22 / 390 * 100vw);
            color: #484848;
            font-weight: 900;
            background-color: rgba(255, 255, 255, 0.75);
            text-shadow: rgba(0, 0, 0, 0.25) 0 4px 4px;
        }

        img {
            width: calc(350 / 390 * 100vw);
        }
    }

    .description {
        font-size: calc(16 / 390 * 100vw);
        color: #484848;
        font-weight: 900;
    }

    .description.second {
        width: 100%;
        text-align: right;
    }
}

.content-title {
    font-size: calc(24 / 390 * 100vw);
    font-weight: bold;
    color: #1370C6;
    text-align: center;
}

.content-title::after {
    content: '';
    display: block;
    height: calc(7 / 390 * 100vw);
    width: calc(358 / 390 * 100vw);
    background-color: #FBFC00;
    margin-top: calc(12 / 390 * 100vw);
}

.compare-container {
    display: flex;
    flex-direction: column;
    margin-top: calc(92 / 390 * 100vw);
    gap: calc(16 / 390 * 100vw);

    .description {
        font-size: calc(12 / 390 * 100vw);
        color: #2D2D2D;
        font-weight: 700;
    }
}

/*比較表サイト*/
.grid-container {
    display: grid;
    grid-template-columns: repeat(5, calc(104 / 390 * 100vw));
    width: calc(358 / 390 * 100vw);
    color: black;
    overflow: scroll;
    border-collapse: collapse;
}

.full-row {
    grid-column: 1 / -1;
    padding: 0 calc(2 / 390 * 100vw);
    color: #3A93FF;
    font-weight: bold;
    font-size: calc(10 / 390 * 100vw);
    text-align: center;
    border-left: 1px solid #CBCBCB;
    border-right: 1px solid #CBCBCB;
}

.grid-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid #CBCBCB;
    background-color: #F7FEFF;
    min-height: calc(70 / 390 * 100vw);
    font-weight: bold;
    line-height: 1.2;
}

.grid-item.site {
    padding: calc(15 / 390 * 100vw) 0 calc(12 / 390 * 100vw);

    .crown {
        width: calc(46 / 390 * 100vw);
        height: calc(41 / 390 * 100vw);
    }

    .site-image {
        padding: 0 calc(3 / 390 * 100vw);
        margin-top: calc(9 / 390 * 100vw);
        width: 100%;
    }

    .site-name {
        font-weight: 700;
        font-size: calc(10 / 390 * 100vw);
        color: #0056B8;
        text-decoration: underline;
        margin-top: calc(12 / 390 * 100vw);
    }

    .site-name.small {
        font-size: calc(9 / 390 * 100vw);
    }
}

.grid-item.age,
.grid-item.support {
    font-size: calc(12 / 390 * 100vw);
    padding: calc(14 / 390 * 100vw) 0 calc(11 / 390 * 100vw);
    gap: calc(8 / 390 * 100vw);

    img {
        width: calc(40 / 390 * 100vw);
        height: calc(40 / 390 * 100vw);
    }
}

.point-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: calc(49 / 390 * 100vw);

    .green-container {
        display: flex;
        flex-direction: column;
        gap: calc(39 / 390 * 100vw);
        align-items: center;
        margin-top: calc(19 / 390 * 100vw);
        padding-top: calc(20 / 390 * 100vw);
        width: calc(358 / 390 * 100vw);
        height: calc(2228 / 390 * 100vw);
        background-image: url("/wp-content/themes/astra-child/images/carisearch/green-background.png");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;

        .person-white-board-container {
            display: flex;
            position: relative;
            flex-direction: column;
            align-items: center;
            width: calc(350 / 390 * 100vw);
            height: calc(372 / 390 * 100vw);

            .person-white-board {
                position: absolute;
                width: calc(350 / 390 * 100vw);
            }

            p {
                position: absolute;
                top: calc(197 / 390 * 100vw);
                font-size: calc(16 / 390 * 100vw);
                line-height: 1.2;
                text-align: center;

                span {
                    font-weight: bold;
                    color: #FFAE00;
                }
            }
        }

    }
}

.shindan-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: calc(30 / 390 * 100vw);
    gap: calc(80 / 390 * 100vw);

    .custom-link-with-arrow {
        width: calc(333 / 390 * 100vw);
        font-size: calc(24 / 390 * 100vw);
        padding: calc(13 / 390 * 100vw) calc(13 / 390 * 100vw) calc(12 / 390 * 100vw) calc(50 / 390 * 100vw) ;
        background-color: #11C3CD;

        .icon-container {
            height: calc(51 / 390 * 100vw);
            width: calc(51 / 390 * 100vw);
        }
    }
}

.ranking-container {
    display: flex;
    flex-direction: column;
    margin-top: calc(50 / 390 * 100vw);

    .ranking-items {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: calc(367 / 390 * 100vw);
        gap: calc(64 / 390 * 100vw);
        margin-top: calc(40 / 390 * 100vw);
    }

    .ranking-title {
        font-size: calc(40 / 390 * 100vw);
        font-weight: bold;
        color: #1370C6;
        text-align: center;
    }

    .ranking-title-jp {
        margin-top: calc(10 / 390 * 100vw);
        font-size: calc(16 / 390 * 100vw);
        font-weight: bold;
        color: #484848;
        text-align: center;
    }

    .ranking-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .ranking-item-top {
            display: flex;
            align-items: center;
            width: calc(380 / 390 * 100vw);
            gap: calc(8 / 390 * 100vw);

            .ranking-item-top-crown {
                width: calc(52 / 390 * 100vw);
                height: calc(52 / 390 * 100vw);
            }

            .ranking-item-top-logo.hataractive {
                width: calc(320 / 390 * 100vw);
                height: calc(58 / 390 * 100vw);
            }

            .ranking-item-top-logo.dym {
                width: calc(228 / 390 * 100vw);
                height: calc(63 / 390 * 100vw);
            }

            .ranking-item-top-logo.career-start {
                width: calc(289 / 390 * 100vw);
                height: calc(50 / 390 * 100vw);
            }

            .ranking-item-top-logo.mynavi-job {
                width: calc(304 / 390 * 100vw);
                height: calc(47 / 390 * 100vw);
            }

            .ranking-item-top-logo.recruit-agent {
                width: calc(275 / 390 * 100vw);
                height: calc(54 / 390 * 100vw);
            }
        }

        .ranking-item-image {
            width: calc(270 / 390 * 100vw);
            height: calc(225 / 390 * 100vw);
            margin-top: calc(15 / 390 * 100vw);
        }

        .ranking-description {
            font-size: calc(20 / 390 * 100vw);
            color: #484848;
            font-weight: 700;
            text-align: center;
            margin-top: calc(15 / 390 * 100vw);
        }

        .recommend-text-container {
            text-align: center;
            border: 1px solid #FFAE00;
            margin-top: calc(10 / 390 * 100vw);

            .recommend-title {
                font-size: calc(24 / 390 * 100vw);
                font-weight: 700;
                color: white;
                background-color: #FFAE00;
                height: calc(45 / 390 * 100vw);
            }

            .recommend-text {
                background-color: rgba(255, 174, 0, 0.09);
                font-size: calc(16 / 390 * 100vw);
                color: #484848;
                font-weight: 700;
                padding: calc(9 / 390 * 100vw) calc(12 / 390 * 100vw);
            }
        }

        .custom-link-with-arrow {
            margin-top: calc(23 / 390 * 100vw);
            width: calc(333 / 390 * 100vw);
            font-size: calc(24 / 390 * 100vw);
            padding: calc(13 / 390 * 100vw) calc(12 / 390 * 100vw);

            .icon-container {
                height: calc(51 / 390 * 100vw);
                width: calc(51 / 390 * 100vw);
            }
        }
    }
}

.service-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: calc(42 / 390 * 100vw);
    gap: calc(56 / 390 * 100vw);
    background-color: #11C3CD;
    padding-top: calc(27 / 390 * 100vw);

    .service-title,
    .faq-title {
        font-size: calc(24 / 390 * 100vw);
        font-weight: bold;
        color: white;
        text-align: center;
    }

    .service-steps {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: calc(12 / 390 * 100vw);
    }

    .service-step {
        display: flex;
        position: relative;
        align-items: center;
        width: calc(362 / 390 * 100vw);
        height: calc(209 / 390 * 100vw);
        gap: calc(14 / 390 * 100vw);
        border: 3px solid #FDD835;
        border-radius: calc(17 / 390 * 100vw);
        background-color: white;
        box-sizing: border-box;

        .step-number {
            font-size: calc(24 / 390 * 100vw);
            font-weight: 500;
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            color: #11C3CD;
            background-color: #FFF600;
            width: calc(60 / 390 * 100vw);
            height: calc(60 / 390 * 100vw);
            border-radius: 50%;
            top: calc(-30 / 390 * 100vw);
        }

        .step-icon.first {
            width: calc(84 / 390 * 100vw);
            height: calc(87 / 390 * 100vw);
            margin-left: calc(14 / 390 * 100vw);
        }

        .step-icon.second {
            width: calc(75 / 390 * 100vw);
            height: calc(105 / 390 * 100vw);
            margin-left: calc(16 / 390 * 100vw);
        }

        .step-icon.third {
            width: calc(93 / 390 * 100vw);
            height: calc(58 / 390 * 100vw);
            margin-left: calc(11 / 390 * 100vw);
        }

        .step-icon.forth {
            width: calc(82 / 390 * 100vw);
            height: calc(96 / 390 * 100vw);
            margin-left: calc(16 / 390 * 100vw);
        }

        .service-step-text {
            display: flex;
            flex-direction: column;
            gap: calc(12 / 390 * 100vw);

            h3 {
                font-size: calc(16 / 390 * 100vw);
                font-weight: 700;
            }

            p {
                font-size: calc(14 / 390 * 100vw);
            }
        }
    }

    .faq-items {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: calc(21 / 390 * 100vw);
        margin-top: calc(28 / 390 * 100vw);
    }
}

.accordion-item {
    width: calc(342 / 390 * 100vw);
    max-height: 9999px;
    border-radius: calc(16 / 390 * 100vw);
    background-color: white;
    padding: calc(16 / 390 * 100vw) calc(11 / 390 * 100vw);
}

.accordion-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    font-size: calc(11 / 390 * 100vw);
    font-weight: bold;
}

.accordion-label::after {
    content: '+';
    font-size: calc(24 / 390 * 100vw);
    transition: transform 0.3s ease;
}

.accordion-checkbox:checked + .accordion-label::after {
    content: '−';
    transform: rotate(180deg);
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease;
    font-size: calc(11 / 390 * 100vw);
}

.accordion-content::before {
    content: '';
    display: block;
    height: 1px;
    width: 100%;
    background-color: #919191;
    margin-top: calc(5 / 390 * 100vw);
    margin-bottom: calc(5 / 390 * 100vw);
}

.accordion-checkbox {
    display: none;
}

.accordion-checkbox:checked + .accordion-label + .accordion-content {
    max-height: 9999px;
}

.custom-link-with-arrow {
    display: flex;
    align-items: center;
    width: calc(98 / 390 * 100vw);
    font-size: calc(9 / 390 * 100vw);
    color: white !important;
    background-color: #FFAE00;
    border-radius: calc(47 / 390 * 100vw);
    padding: calc(3 / 390 * 100vw) calc(2 / 390 * 100vw);
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25) !important;
    text-decoration: none;

    .text-container {
        display: flex;
        justify-content: center;
        flex-grow: 1;
    }

    .icon-container {
        display: flex;
        justify-content: center;
        align-content: center;
        height: calc(20 / 390 * 100vw);
        width: calc(20 / 390 * 100vw);
    }
}

.point-items {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(30 / 390 * 100vw);
}

.point-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: calc(312 / 390 * 100vw);
    height: calc(325 / 390 * 100vw);
    border: 3px solid #FDD835;
    border-radius: calc(17 / 390 * 100vw);
    background-color: white;

    .point-title {
        display: flex;
        justify-content: center;
        background-color: #3A93FF;
        width: calc(253 / 390 * 100vw);
        font-size: calc(20 / 390 * 100vw);
        font-weight: bold;
        color: white;
        line-height: 1.2;
        padding-top: calc(38 / 390 * 100vw);
        padding-bottom: calc(31 / 390 * 100vw);
        text-align: center;
        border-radius: calc(22 / 390 * 100vw);
        box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    }

    .point-text {
        text-align: center;
        font-size: calc(24 / 390 * 100vw);
        color: #FFAE00;
        font-weight: 700;
        line-height: 1.0;
        margin-top: calc(12 / 390 * 100vw);
    }

    .point-text::after {
        content: '';
        display: block;
        height: calc(3 / 390 * 100vw);
        width: calc(200 / 390 * 100vw);
        background-color: #B1B1B1;
        margin-top: calc(5 / 390 * 100vw);
    }

    .point-description {
        margin-top: calc(25 / 390 * 100vw);
        font-size: calc(16 / 390 * 100vw);
        line-height: 1.2;
        text-align: center;
    }
}

.grid-item.top {
    background-color: #FFFEDE;
}

.footer-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: calc(63 / 390 * 100vw);
    background-color: #0056B8;

    .footer-links {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: calc(20 / 390 * 100vw);
        font-size: calc(6 / 390 * 100vw);
        font-weight: bold;
        color: white;
    }
}