@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;
}

img {
	width:100%;
}

ul,
ul li {
	margin:0;
	padding:0;
	list-style:none;
}

.yellow-line {
    font-size:1.3rem;
    font-weight:bold;
    position:relative;
    display:inline-block;
}

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

.title-container {
    width: 100%;
	position:relative;
	
	.ab-img01 {
		position:absolute;
		top:6rem;
		left:50%;
		transform:translateX(-50%);
		opacity:0.7;
		
		img {
			opacity:0.9;
		}
	}
	
	.title-image-container {
		width: 100%;
		position:relative;
		z-index:100;
		padding-top:1rem;
		
		.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;
			background:rgb(255 255 255 / 0.8);
		}
	}
	
	.under-box {
		position:relative;
		width:100%;
		z-index:100;
		
		.text {
			width:max-content;
			margin:auto;
			
			p {
				font-size:1.5rem;
				font-weight:bold;
				line-height:1.3;
			}
			
			.first,
			.second span {
				background:rgb(255 255 255 / 0.5);
			}
			
			.second {
				padding-left:8rem;
			}
		}
		
		ul {
			width:max-content;
			margin:auto;
			
			li {
				font-size:1.5rem;
				font-weight:bold;
				line-height:1.3;
				background:rgb(255 255 255 / 0.8);
			}
			
			li:last-child {
				padding-left:8rem;
			}
		}
		
		.ab-img02 {
			position:absolute;
			top:-8rem;
			left:3rem;
			width:25%;
			z-index:-10;
			
			img {
				opacity:0.9;
			}
		}
		
		.image3 {
			width:27%;
			margin:0 0 0 auto;
			padding-right:3rem;
			
			img {
				opacity:0.9;
			}
		}
	}
	
    .width-30 {
        width:30%;
		margin:auto;
    }
	
	.width-35 {
        width:35%;
		margin:auto;
		position:relative;
		z-index:100;
    }

	.width-40 {
        width:40%;
		margin:auto;
		position:relative;
		z-index:100;
    }
	
	.title {
		width:max-content;
		margin:auto;
		
		p {
			margin-top:0;
			font-size:2rem;
			font-weight:bold;
			text-align:center;
			position:relative;
			z-index:100;
			background:rgb(255 255 255 / 0.8);
			line-height:1.1;
		}
	}
	
	.sub-title {
		margin-top:0;
		font-size:1.5rem;
		font-weight:bold;
		text-align:center;
		position:relative;
		z-index:100;
		background:rgb(255 255 255 / 0.8);
	}
	
	.sub-title span {
		font-size:1.3rem;
		font-weight:bold;
	}
}

.content-box {
	width:max-content;
	margin:0 auto;
	
	p {
		font-size:1.1rem;
		color: #454545;
		line-height:1.5;
	}
}

.content-title {
    font-size:2.5rem;
    font-weight:bold;
    color:#1370C6;
    text-align:center;
	width:max-content;
	margin:auto;
	line-height:1.1;
}

.content-title::after {
    content:'';
    display:block;
    height:10px;
    width:100%;
    background-color:#FBFC00;
    margin-top:1rem;
}

.compare-container {
    margin-top:5rem;

    .description {
		width:95%;
		margin:1rem auto 0;
        font-size:1rem;
        color:#2D2D2D;
        font-weight:bold;
    }
}

/*比較表サイト*/
.grid-container {
    display:grid;
    grid-template-columns:repeat(5, 20%);
    width:95%;
	margin:auto;
    color:black;
    overflow:scroll;
    border-collapse:collapse;
}

.full-row {
    grid-column: 1 / -1;
    padding:0.5rem;
    color:#3A93FF;
    font-weight:bold;
    font-size:1.5rem;
    text-align:center;
    border-left:1px solid #CBCBCB;
    border-right:1px solid #CBCBCB;
	line-height:1;
}

.grid-item {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    border:1px solid #CBCBCB;
    background-color:#F7FEFF;
    font-size:1.1rem;
	font-weight:bold;
    line-height:1.3;
	padding:2rem 1rem;
	
	p {
		font-size:1.1rem;
		font-weight:bold;
		line-height:1.3;
	}
	
}

.grid-item.site {
    padding:1rem 0.5rem;

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

    .site-image {
        padding:0 1rem;
        margin-top:1rem;
        width: 100%;
    }

    .site-name {
        font-weight:bold;
        font-size:1rem;
        color:#0056B8;
        text-decoration:underline;
        margin-top:1rem;
    }
}

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

    img {
        width:2rem;
        height:2rem;
    }
}

.point-container {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    margin-top:5rem;
	
	.green-container {
		background:#11C3CD;
		padding:2rem;
		border-radius:1rem;
		width:90%;
		margin:auto;
	}
	
	.point-inner-container {
		position:relative;
	}
	
	.point-inner-container .ab-box {
		position:absolute;
		top:0;
		left:50%;
		transform:translateX(-50%);
		width:30%;
	}
	
	.point-inner-container .ab-box img {
		width:100%;
	}
	
	.point-inner-container p {
		margin-top:10rem;
		border:3px solid #201614;
		border-radius:5px;
		background:#FFFFFF;
	}

    .green-container {
        margin-top:2rem;
        /*width:100%;*/
		
		.point-img-box {
			width:100%;
			text-align:center;
			
			img {
				width:40%;
			}
			
		}
		
		.point-items {
			width:100%;
			text-align:center;
			margin-top:2rem;
			
			.point-item {
				display:inline-block;
				width:30%;
				vertical-align:top;
				margin:0.5rem;
				padding:1.5rem 0;
			}
			
			.point-title {
				display:block;
				width:90%;
				margin:1rem auto;
				border-radius:1rem;
				font-size:1.2rem;
				padding-top:1rem;
				padding-bottom:1rem;
			}
			
		}
		
		
        .person-white-board-container {
            position:relative;
            margin:auto;
			width:calc(180 / 390 * 100vw);
            height:calc(172 / 390 * 100vw);

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

            p {
                position: absolute;
				width:100%;
                top: calc(108 / 390 * 100vw);
				left:50%;
				transform:translateX(-50%);
                font-size:1.2rem;
                line-height: 1.2;
                text-align: center;

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

    }
}

.shindan-container {
    margin-top:5rem;
	
	.shindan-box {
		position:relative;
		width:max-content;
		margin:2rem auto 0;
		background:#11C3CD;
		border-radius:50vh;
		padding:1rem 3rem 1rem 4rem;
		box-shadow:0 4px 4px rgba(0, 0, 0, 0.25);
		
		a {
			position:absolute;
			top:0;
			left:0;
			width:100%;
			height:100%;
		}
		
		.inner-cont > p,
		.inner-cont > div {
			display:inline-block;
			vertical-align:middle;
			color:#FFFFFF;
		}
		
		.inner-cont > p {
			font-size:1.5rem;
			font-weight:bold;
		}
		
		.icon-container {
            height:2rem;
            width:2rem;
        }
	}

    .custom-link-with-arrow {
        width:max-content;
        font-size:1.2rem;
        padding:1rem 3rem;
        background-color: #11C3CD;

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

.ranking-container {
    margin-top:5rem;

    .ranking-items {
		width:70%;
		margin:1rem auto;
    }

    .ranking-title {
        font-size:2.5rem;
        font-weight:bold;
        color:#1370C6;
        text-align:center;
    }

    .ranking-title-jp {
        font-size:1.5rem;
		line-height:1;
        font-weight:bold;
        color:#484848;
        text-align:center;
    }

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

		.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:1.7rem;
			line-height:1.2;
            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-top:1rem;
            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.1rem;
    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 {
    width:100%;
    font-size:1rem;
    color:white !important;
    background-color:#FFAE00;
    border-radius:50vh;
    padding:0.5rem 0;
    box-shadow:0 4px 4px rgba(0, 0, 0, 0.25) !important;
    text-decoration:none;
	text-align:center;

    .text-container {
		display:inline-block;
		vertical-align:middle;
    }

    .icon-container {
		display:inline-block;
		vertical-align:middle;
        height:2rem;
        width:2rem;
    }
}

.point-item {
    border: 3px solid #FDD835;
    border-radius:1rem;
    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:1.5rem;
		width:70%;
		margin:1.5rem auto 2rem;
        color:#FFAE00;
        font-weight:bold;
        line-height:1.0;
		padding-bottom:0.5rem;
		border-bottom:5px solid #B1B1B1;
    }

    .point-description {
        margin:1rem auto;
        font-size:1.2rem;
        line-height:1.2;
        text-align:center;
		width:90%;
    }
}

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

.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;
}

@media only screen and (max-width: 1099px) {
	.title-container {
		.under-box {
			.ab-img02 {
				left:0;
			}
			
			.image3 {
				padding-right:0;
				width:25%;
			}
		}
	}
	.point-item {
		.pc-view {
			display:none;
		}
	}
	
	.ranking-container {
		.ranking-items {
			.pc-view {
				display:none;
			}
		}
		
		.ranking-item {			
			.custom-link-with-arrow {
				padding:0.7rem 3rem 1rem;
			}
		}
	}
	
	.grid-container {
		grid-template-columns:repeat(5, 23%);
		overflow-x:scroll;
		overflow-y:hidden;
	}
	
	.point-container {
		.green-container {
			.point-img-box {
				img {
					width:50%;
				}
			}
			
			.point-items {
				.point-item {
					display:block;
					width:60%;
					margin:1rem auto 0;
				}
			}
		}
	}
}

@media only screen and (max-width: 1023px) {
	main.main,
	div.sidebar {
		margin:0;
	}
}

@media only screen and (max-width: 999px) {
	
	.point-container .green-container {
		.point-img-box {
			img {
				width:55%;
			}
		}
		
		.point-items {
			.point-item {
				width:65%;
			}
		}
	}
	
	.ranking-container {
		.ranking-items {
			width:80%;
		}
	}
	
}

@media only screen and (max-width: 899px) {
	
	.title-image-container {
		.width-40 {
			width:50%;
		}
		
		.divide-img-box {
			width:95%;
			
			.right-box p {
				font-size:0.8rem;
			}
		}
	}
	
	.title-container {
		.content-box {
			width:90%;
		}
		
		.img02 {
			width:50%;
		}
	}
	
	.content-box {
		width:80%;
		margin:auto;
	}
	
	.grid-container {
		grid-template-columns:repeat(5, 27%);
		overflow-x:scroll;
		overflow-y:hidden;
	}
	
	.point-container .green-container {
		width:95%;
	}
	
	.ranking-container {
        .ranking-items {
			width:90%;
		}
	}
	
	.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: 834px) {
	main.main,
	div.sidebar {
		padding:0;
	}
}

@media only screen and (max-width: 799px) {
    .title-container {
		.under-box {
			.ab-img02 {
				top:-2rem;
			}
		}
	}
	
	.grid-container {
        grid-template-columns: repeat(5, 33%);
	}
	
	.point-container .green-container {
        .point-img-box {
            img {
                width: 65%;
            }
        }
		
        .point-items {
            .point-item {
				width:80%;
			}
		}
    }
	
	.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 {
		.title {
			p {
				font-size:1.8rem;
			}
		}
		
		.ab-img01 {
			width:50%;
			top:4rem;
		}
		
		.img02 {
			width:50%;
		}
		
		.title-image-container {
			.img-box img {
				width:25%;
			}
			
			.width-40 {
				width:60%;
			}
		}
		
		.under-box {
			.ab-img02 {
				width:35%;
				top:0;
			}
			
            .image3 {
				width:35%;
				margin-top:3rem;
			}
		}
	}
	
    .point-container .green-container {
        .point-img-box {
            img {
				width:75%;
			}
		}
		
		.point-items {
            .point-item {
                width: 90%;
            }
		}
	}
	
	.service-container {
		.service-step {
			.divide-box {
				.left-box {
					padding:0 1rem 0 0;
				}
			}
		}
	}
}

@media only screen and (max-width: 599px) {
	.title-container {
        .under-box {
            .image3 {
                margin-top:2rem;
			}
		}
		
		.img02 {
			width:60%;
		}
	}
	
	.title-image-container {
        .width-40 {
            width: 60%;
        }
    }
	
	.content-title {
		font-size:2rem;
	}
	
	.content-title::after {
		height:7px;
	}
	
	.grid-item.site {
		padding:0.5rem 0.3rem;
	}
	
	.grid-item {
		padding:1rem 0.5rem;
		font-size:1rem;
	}
	
	.grid-item.age,
	.grid-item.support {
		img {
			width:3rem;
			height:3rem;
		}
	}
	
	.full-row {
		font-size:1.2rem;
	}
	
	.custom-link-with-arrow {
		.text-container {
			font-size:0.9rem;
		}
		
		.icon-container {
			height:1.5rem;
			width:1.5rem;
		}
	}
	
	.point-container .green-container {
		padding:1.5rem 1rem;
		
        .point-img-box {
            img {
                width: 80%;
            }
        }
    }
	
	.service-container {
        .service-step {
            .divide-box {
				padding:1.5rem 1rem;
            }
        }
    }
}

@media only screen and (max-width: 499px) {
	
	.title-container {
		margin-bottom:1rem;
		
		.ab-img01 {
			width:90%;
		}
		
		.img02 {			
			width:85%;
		}
		
		.title {
			p {
				font-size:1.4rem;
			}
		}
		
		.under-box {
			.ab-img02 {
				width:43%;
			}
			
			.image3 {
				width:55%;
				margin-right:1rem;
				margin-top:1rem;
			}
			
			.text {
				p {
					font-size:1.2rem;
				}
				
				.second {
					padding-left:5rem;
				}
			}
		}
		
		.title-image-container {
			padding-top:2rem;
			
			.text-center {
				font-size:0.7rem;
			}
			
			.img-box img {
				width:30%;
			}
			
			.width-30 {
				width:65%;
			}
			
			.width-40 {
				width:80%;
			}
			
			.divide-img-box {
				.left-box img {
					height:2rem;
				}
				
				.right-box {
					padding-top:0;

					.pc-view {
						display:none;
					}
					
					.sp-view {
						text-align:right;
						line-height:1.2;
					}
				}
			}
			
			.sub-title {
				font-size:1.5rem;
				margin-top:0;
				
				span {
					font-size:1.3rem;
				}
			}
		}
	}
	
	.content-box {
		width:95%;
		
		p {
			font-size:1rem;
		}
	}
	
	.yellow-line {
		font-size:1.2rem;
	}
	
	.yellow-line::after {
		height: calc(7 / 390 * 100vw);
	}
	
	.content-title {
		font-size:1.5rem;
	}
	
	.grid-container {
		width:98%;
		grid-template-columns:repeat(5, 33%);
	}
	
	.grid-item.site {
		padding:0;
		
		.crown {
			margin-top:0.5rem;
			width:calc(25 / 390 * 100vw);
			height:calc(25 / 390 * 100vw);
		}
		
		.site-image {
			margin-top:0.5rem;
		}
		
		.site-name {
			margin-top:0.5rem;
			font-size:0.7rem;
			margin-bottom:0.5rem;
		}
	}
	
	.grid-item {
		padding:0.5rem;
		font-size:0.8rem;
		
		p {
			font-size:0.8rem;
		}
	}
	
	.grid-item.detail {
		padding:0.5rem 0.3rem 0.7rem;
	}
	
	.grid-item.age,
	.grid-item.support {
		gap:0.5rem;
		
        img {
			width:2rem;
			height:2rem;
		}
	}
	
	.custom-link-with-arrow {
		padding:0.5rem 0.1rem 0.7rem;
		
        .icon-container {
			width:1rem;
			height:1rem;
		}
		
		.text-container {
			font-size:0.7rem;
		}
	}
	
	.point-container .green-container {
        .point-img-box {
            img {
                width: 100%;
            }
        }
		
        .point-items {
            .point-item {
				width:100%;
				padding:0.5rem 0;
				
				.point-text {
					margin:1rem auto 1.5rem;
				}
				
				.sp-view {
					font-size:1rem;
				}
			}
		}
    }
	
	.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: 500px) {
	
    .title-image-container {
        .divide-img-box {
            .right-box .sp-view {
                display:none;
			}
		}
	}
	
}

@media only screen and (min-width: 900px) {
	.service-container {
		.service-step {			
			.service-step-text {
				p.sp-view {
					display:none;
				}
			}
		}
	}
}

@media only screen and (min-width: 1100px) {
	.title-container {
		padding-bottom:5rem;
		
		.under-box {
			.image3 {
				position:absolute;
				bottom:-3rem;
				right:0;
			}
		}
	}
	
	.grid-container {
		overflow:visible;
		margin-top:3rem;
	}

	.title-image-container {
		.divide-box {
			position:absolute;
			bottom:0;
			left:0;
			width:100%;
			z-index:-10;
			
			div {
				padding:0 0 0 2rem;
				
				img {
					width:40%;
				}
			}
			
			div:last-child {
				text-align:right;
				padding:0 2rem 0 0;
			}
		}
	}
	
	.point-item {
		.point-description {
			text-align:left;
		}
		
		.sp-view {
			display:none;
		}
	}
	
	.compare-container {
		.description {
			display:none;
		}
	}
	
	.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;
			}
		}
	}

}

@media only screen and (min-width: 1300px) {

}