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

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

main,
.main {
    max-width:1300px;
    width:100%;
    padding:0;
    margin:0 auto;
}

.title-container {
    width:100%;
    padding-top:1rem;
    background-color: #11C3CD;
	
	.img-box {
		text-align:center;
		width:100%;
		
		img {
			width:15%;
			vertical-align:top;
		}
	}
	
	.text-center {
		text-align:center;
		font-size:0.9rem;
		font-weight:bold;
	}
	
    .result-message {
        font-size:2.5rem;
        font-weight:bold;
        color:#FFFFFF;
        text-align:center;
        margin-top:3rem;
        line-height:1.2;

        .orange-text {
            font-size:3rem;
            color:#F4B400;
        }
    }
	
	.result-message.second {
		margin-top:1rem;
		padding-bottom:3rem;
	}

    .options-container {
        width:40%;
		margin:auto;
        border-radius:2rem;
        background:#FFFFFF;
        margin-top:1rem;
		padding:2rem;

        .options {
            text-align:center;

            .option {
				display:inline-block;
                color:#FFFFFF;
                font-weight:bold;
                background:#3A93FF;
                padding:1rem 2rem;
                border-radius:50vh;
				margin:0.5rem 1rem;
            }
        }
    }
}

.ranking-container {
	padding-top:3rem;
	
    .ranking-title {
        font-size:3rem;
        font-weight:bold;
        color:#1370C6;
        text-align:center;
		line-height:1;
    }
	
	.ranking-title-jp {
        font-size:2rem;
        font-weight:bold;
        color:#484848;
        text-align:center;
		line-height:1;
		margin-top:0.5rem;
		
		span {
			padding:0 0.5rem;
		}
    }
	
	.ranking-items {
        width:70%;
        margin:1rem auto;
    }

    .ranking-item {
		padding:2rem;
		text-align:center;
		margin-bottom:1rem;
		border:1px solid #CCCCCC;
		border-radius:5px;

		.ranking-item-top > img {
			display:inline-block;
			vertical-align:middle;
		}
		
        .ranking-item-top {
            width:100%;
			text-align:center;

            .ranking-item-top-crown,
			.ranking-item-top-logo.hataractive,
			.ranking-item-top-logo.dym,
			.ranking-item-top-logo.career-start,
			.ranking-item-top-logo.mynavi-job,
			.ranking-item-top-logo.recruit-agent {
                width:auto;
				height:4rem;
            }
        }

        .ranking-item-image {
            width:30%;
            margin-top:1rem;
        }

        .ranking-description {
            font-size:2rem;
            color:#484848;
            font-weight:bold;
            text-align:center;
            margin-top:1rem;
        }

        .recommend-text-container {
            text-align: center;
            border: 1px solid #FFAE00;
            margin:1rem auto 2rem;

            .recommend-title {
                font-size:2rem;
                font-weight:bold;
                color:#FFFFFF;
                background-color:#FFAE00;
                padding:0.5rem;
            }

            .recommend-text {
                background-color:rgba(255, 174, 0, 0.09);
                font-size:1.5rem;
                color:#484848;
                font-weight:bold;
                padding:1rem;
            }
        }

        .custom-link-with-arrow {
            margin:1rem auto 0;
            width:max-content;
            font-size:1.3rem;
            padding:1rem 3rem;

            .icon-container {
                height:2rem;
                width:2rem;
            }
        }
    }
}

.service-container {
    width:90%;
    margin:5rem auto 0;
    background-color:#11C3CD;
	padding-bottom:3rem;

    .service-title,
    .faq-title {
        font-size:2.5rem;
        font-weight:bold;
        color:#FFFFFF;
        text-align:center;
		padding-top:2rem;
    }

    .service-steps {
        width:80%;
		margin:1rem auto;
		
		.img-box {
			text-align:center;
			
			.service-step-arrow {
				margin:2rem auto;
				width:5rem;
			}
		}
    }

    .service-step {
        width:100%;
        border:3px solid #FDD835;
        border-radius:calc(17 / 390 * 100vw);
        background-color:#FFFFFF;
		position:relative;

        .step-number {
            font-size:2rem;
            font-weight:bold;
            position:absolute;
            color:#11C3CD;
            background-color:#FFF600;
            border-radius: 50%;
            top:-1rem;
			left:0;
			width:3.5rem;
			height:3.5rem;
			text-align:center;
        }
		
		.divide-box {
			display:table;
			width:100%;
			padding:2rem;
			
			.left-box,
			.right-box {
				display:table-cell;
				vertical-align:middle;
			}
			
			.left-box {
				width:25%;
				padding:0 2rem;
				text-align:center;
			}
			
			.right-box {
				width:75%;
			}
		}

        .step-icon.first,
		.step-icon.second,
		.step-icon.third,
		.step-icon.forth {
            width:auto;
			height:5rem;
        }

        .service-step-text {

            h3 {
                font-size:1.5rem;
                font-weight:bold;
            }

            p {
                font-size:1rem;
            }
        }
    }

    .faq-items {
        margin:1rem auto 0;
    }
}

.accordion-item {
    width:80%;
	margin:1rem auto;
    border-radius:1rem;
    background-color:#FFFFFF;
    padding:1rem;
}

.accordion-label {
    font-size:1.5rem;
    font-weight: bold;
	display:block;
	width:100%;
	position:relative;
	padding-right:1rem;
}

.accordion-label::after {
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	right:0;
    content:'+';
    font-size:2rem;
    transition:transform 0.3s ease;
	float:right;
}

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

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease;
    font-size:1rem;
}

.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(333 / 390 * 100vw);
    font-size: calc(24 / 390 * 100vw);
    color: white !important;
    background-color: #FFAE00;
    border-radius: calc(47 / 390 * 100vw);
    padding: calc(13 / 390 * 100vw) calc(12 / 390 * 100vw);
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25) !important;
    text-decoration: none;
    margin-top: calc(66 / 390 * 100vw);

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

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

.footer-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: calc(40 / 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;
		
		a {
			color:#FFFFFF;
			text-decoration:none;
			font-size:0.8rem;
		}
    }
}

.footer {
	display:none;
}

.no-result-box {
	padding-bottom:5rem;
	
	.back-btn {
		text-align:center;
		margin-top:3rem;
		
		a {
			background:#FFFFFF;
			padding:1rem 3rem;
			text-decoration:none;
			font-size:1.3rem;
			font-weight:bold;
			border-radius:50vh;
			box-shadow:0 4px 4px rgba(0, 0, 0, 0.25);
		}
		
		a:hover {
			color:#1967d2;
		}
	}
}

@media only screen and (max-width: 1099px) {
    .title-container {
		.options-container {
			width:60%;
		}
	}
	
	.ranking-container {
		.ranking-items {
			.pc-view {
				display:none;
			}
		}
		
		.ranking-item {
			.custom-link-with-arrow {
				padding:0.7rem 3rem 1rem;
			}
		}
	}
}

@media only screen and (max-width: 899px) {
	.service-container {
		.service-steps {
			width:90%;
		}
		
		.service-step {
			.divide-box {
				.left-box {
					padding:0 1rem;
				}
			}
			
			.service-step-text {
				p.pc-view {
					display:none;
				}
			}
			
			.step-icon.forth {
				height:7rem;
			}
		}
	}
}

@media only screen and (max-width: 799px) {
    .title-container {
		.options-container {
			width:80%;
		}
		
		.result-message.pc-view {
			display:none;
		}
	}
	
	.ranking-container {
        .ranking-items {
            width: 95%;
		}
		
		.ranking-item {
			.ranking-description {
				font-size:1.5rem;
			}
			
			.recommend-text-container {
				.recommend-title {
					font-size:1.5rem;
				}
				
				.recommend-text {
					font-size:1.2rem;
				}
			}
			
			.custom-link-with-arrow {
				padding:0.8rem 3rem 1rem;
			}
		}
	}
	
	.service-container {
		width:95%;
	}
	
	.accordion-item {
		width:90%;
	}
}

@media only screen and (max-width: 699px) {
	.title-container {	
		.img-box {			
			img {
				width:25%;
			}
		}
	}
	
	.service-container {
		.service-step {
			.divide-box {
				.left-box {
					padding:0 1rem 0 0;
				}
			}
		}
	}
}

@media only screen and (max-width: 599px) {
	.title-container {		
		.result-message {
			font-size:2rem;
        
			.orange-text {
				font-size:2.5rem;
			}
		}
		
		.options-container {
			width:90%;
			padding:1.5rem 1rem;
		}
	}
	
	.service-container {
        .service-step {
            .divide-box {
				padding:1.5rem 1rem;
            }
        }
    }
}

@media only screen and (max-width: 499px) {
	.title-container {
		padding-top:2rem;
		
		.img-box {			
			img {
				width:30%;
			}
		}
		
		.text-center {
			font-size:0.7rem;
		}
		
		.result-message {
			font-size:1.5rem;
        
			.orange-text {
				font-size:2rem;
			}
		}
		
		.options-container {
			width:90%;
			padding:1.5rem 1rem;
			
			.options {
				.option {
					padding:0.5rem 1rem;
					margin:0.3rem 0.5rem;
				}
			}
		}
	}
	
	.ranking-container {
		
        .ranking-items {
			width:99%;
		}
		
		.ranking-item {
			padding:1.5rem 0.5rem 3rem;
			
			.ranking-item-image {
				width:50%;
			}
			
			.ranking-description {
				font-size:1.3rem;
			}
			
			.recommend-text-container {
                .recommend-title {
                    font-size: 1.2rem;
				}
				
				.recommend-text {
					font-size:1rem;
					padding:1rem 0.5rem;
					text-align:left;
				}
			}
			
			.custom-link-with-arrow {
				padding:0.8rem 2rem 1rem;
				
				.text-container {
					font-size:1rem;
					font-weight:bold;
				}
			}
		}
	}
	
	.service-container {
        .service-steps {
			width:95%;
		}
		
		.service-steps {
			.img-box {
				.service-step-arrow {
					width:3rem;
					margin:1.5rem auto;
				}
			}
		}
		
		.service-step {
			.step-number {
				font-size:1.9rem;
			}
			
			.service-step-text {
				h3 {
					font-size:1.1rem;
				}
				
				p {
					font-size:1rem;
				}
			}
			
			.divide-box {
				padding:1rem 0.5rem;
				
				.left-box {
					width:30%;
				}
				
				.right-box {
					width:70%;
				}
				
				.step-icon.third {
					width:100%;
					height:auto;
				}
				
				.step-icon.forth {
					height:6rem;
				}
			}
		}
		
		.service-title,
		.faq-title {
			font-size:1.5rem;
		}
	}
	
	.accordion-item {
		width:95%;
	}
	
	.accordion-label {
		font-size:1.2rem;
	}
	
	.footer-container {
		display:block;
		align-items:normal;
		justify-content:normal;
		height:auto;
		padding:2rem;
		
		.footer-links {
			display:block;
			align-items:normal;
			justify-content:normal;
			height:auto;
			gap:normal;
			
			a {
				display:inline-block;
				width:45%;
				text-align:center;
				padding:0.3rem 0;
			}
		}
	}
}

@media only screen and (min-width: 800px) {
	.title-container {
		.result-message.sp-view {
			display:none;
		}
	}
}

@media only screen and (min-width: 1100px) {	
	.ranking-container {
		.ranking-image-container {
			margin-bottom:2rem;
		}
		
		.ranking-items {
			width:90%;
			
			.ranking-item {
				display:table;
				
				.left-box {
					display:table-cell;
					width:40%;
					vertical-align:middle;
					padding-right:2rem;
					
					.width-100 {
						width:100%;
						text-align:center;
						margin-bottom:3rem;
						
						.ranking-item-image {
							width:70%;
						}
					}
					
					.custom-link-with-arrow {
						padding:0.9rem 3rem 1.2rem;
					}
				}
				
				.right-box {
					display:table-cell;
					width:60%;
					vertical-align:middle;
					
					.recommend-text-container {
						.recommend-title {
							font-size:1.5rem;
						}
						
						.recommend-text {
							font-size:1.1rem;
							text-align:left;
						}
					}
				}
			}
			
			.sp-view {
				display:none;
			}
		}
	}
}