@charset "utf-8";

.font-mincho {
font-family:"游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

.article p,
.entry-content > * {
	margin-bottom:0;
}

main,
.main {
	width:100%;
	max-width:1500px;
	margin:auto;
}

.content {
	margin-top:0;
}

.no-sidebar .content .main,
.content .main,
.main {
	padding:0;
	border:none;
    border-radius:0;
}

.body .article,
.article {
	margin-bottom:0;
}

.entry-content {
	margin-top:0;
	margin-bottom:0;
}

.breadcrumb,
.footer {
	display:none;
}

img {
	vertical-align:top;
	width:100%;
}

.top-container {
	position:relative;
	width:100%;
	height:auto;
	
	.img-box {
		width:100%;
		
		div {
			text-align:center;
			margin:auto;
		}
		
		div:first-child {
			width:100%;
		}
		
		div:nth-child(2) {
			width:70%;
			margin:1rem auto;
		}
		
		div:last-child {
			width:60%;
		}
	}
	
	.ab-box01 {
		position:absolute;
		top:0.5rem;
		right:1rem;
		width:13%;
		
		img {
			width:100%;
		}
	}
	
	.ab-box02 {
		position:absolute;
		top:45%;
		transform:translateY(-50%);
		left:3rem;
		width:40%;
		
		.top-title {
			color:#FFFFFF;
			font-size:2.5rem;
			font-weight:bold;
			margin-bottom:0;
			line-height:1.3;
			letter-spacing:0.1rem;
			position:relative;
			/*border-bottom:5px solid #FFFFFF;*/
			width:max-content;
		}
		
		.top-title::after {
			position:absolute;
			content:"";
			width:100%;
            height:2px;
            background:#FFFFFF;
            bottom:0;
            left:0;
		}
		
		.second {
			margin:0 0 2rem auto;
		}
		
		.img-box {
			width:100%;
			
			img {
				width:100%;
			}
		}
		
		.main-title-box {
			border:1px solid #007498;
			padding:0.5rem;
			
			h2 {
				background:rgba(255, 255, 255, 0.9);
				margin:0;
				padding:1rem;
				text-align:center;
			}
		}
		
		.sub-title {
			font-size:2rem;
			font-weight:bold;
			color:#666666;
			-webkit-text-stroke:2px #FFFFFF;
			text-stroke:2px #FFFFFF;
		}
	}
	
	.ab-box03 {
		position:absolute;
		bottom:3rem;
		right:3rem;
		width:100%;
		
		.divide-box {
			display:table;
			width:max-content;
			margin:0 0 0 auto;
			
			.left-box,
			.center-box,
			.right-box {
				display:table-cell;
				width:9em;
				vertical-align:top;
				padding:0 0.5rem;
				
				.inner {
					background:#0056B8;
					padding:2rem 1rem;
					position:relative;
					
					.border-box {
						content:"";
						width:100%;
						height:100%;
						position:absolute;
						top:0.5rem;
						right:-0.5rem;
						border-top:1px solid #000000;
						border-right:1px solid #000000;
						border-bottom:1px solid #000000;
					}
					
					.border-left-box {
						content:"";
						width:100%;
						height:0.5rem;
						position:absolute;
						bottom:-0.5rem;
						right:-0.5rem;
						border-left:1px solid #000000;
					}
					
					ul {
						margin-bottom:0;
						padding-left:0;
						
						li {
							list-style:none;
							text-align:center;
							white-space:nowrap;
							line-height:1.2;
							font-size:1rem;
							color:#FFFFFF;
						}
						
						li:last-child {
							padding-top:0.3rem;
							font-size:1.3rem;
							color:#FFF600;
						}
					}
				}
			}
		}
	}
}

.trouble-container {
	width:80%;
	margin:1rem auto 0.5rem;
	
	.bg-img-box {
		width:100%;
		position:relative;
		
		.ab-box01 {
			position:absolute;
			top:50%;
			left:50%;
			transform: translate(-50%, -50%);
			width:100%;
			
			.orenge-text {
				color:#F7A867;
				font-size:1.3rem;
				font-weight:bold;
				text-align:center;
				margin-bottom:0.3rem;
			}
			
			.main-text {
				color:#333333;
				font-size:1.5rem;
				font-weight:bold;
				text-align:center;
				margin-bottom:1rem;
			}
			
			.img-box {
				width:20%;
				margin:auto;
				img {
					width:100%;
				}
			}
		}
		
		.fukidashi p {
			margin-bottom:0;
			font-size:1.2rem;
			font-weight:bold;
		}
		
		.ab-box02 {
			position:absolute;
			top:10rem;
			left:5rem;
			width:max-content;
			
			.inner {
				background:#D7E9FF;
				box-shadow:0px 6px 6px 0px rgba(0, 0, 0, 0.25);
				padding:1rem;
				border-radius:1rem;
			}
		}
		
		.ab-box03 {
			position:absolute;
			bottom:5rem;
			left:7rem;
			width:max-content;
			
			.inner {
				background:#D7E9FF;
				box-shadow:0px 6px 6px 0px rgba(0, 0, 0, 0.25);
				padding:1rem;
				border-radius:1rem;
			}
		}
		
		.ab-box04 {
			position:absolute;
			top:10rem;
			right:9rem;
			width:max-content;
			
			.inner {
				background:#D7E9FF;
				box-shadow:0px 6px 6px 0px rgba(0, 0, 0, 0.25);
				padding:1rem;
				border-radius:1rem;
			}
		}
		
		.ab-box05 {
			position:absolute;
			bottom:5rem;
			right:3rem;
			width:max-content;
			
			.inner {
				background:#D7E9FF;
				box-shadow:0px 6px 6px 0px rgba(0, 0, 0, 0.25);
				padding:1rem;
				border-radius:1rem;
			}
		}
	}	
}

.circle-img-box {
	text-align:center;
	margin-bottom:0.5rem;
	
	img {
		width:1.5%;
	}
}

.solution-container {
	background:#68C1FF;
	padding:3rem 3rem 4rem;
	margin-bottom:0;
	width:100%;
	
	> p {
		font-size:1.4rem;
		font-weight:bold;
		line-height:1.5;
		color:#000000;
		text-align:center;
		
		span {
			color:#FDD835;
		}
	}
	
	.answer-box {
		width:max-content;
		margin:auto;
		padding-right:5rem;
		
		.board-box {
			border:3px solid #000000;
			border-radius:0.5rem;
			background:#FFFFFF;
			padding:1rem 2rem;
			position:relative;
			
			.ab-box {
				position:absolute;
				bottom:-1rem;
				right:-10rem;
				width:40%;
				
				img {
					width:100%;
				}
			}
			
			ul {
				padding-left:0;
				margin-bottom:1rem;
				
				li {
					list-style:none;
					margin:0;
					line-height:1.5;
					
					img,
					span {
						display:inline-block;
						vertical-align:middle;
					}
					
					img {
						width:1.3rem;
						margin-right:0.2rem;
					}
					
					span {
						font-size:1.2rem;
						font-weight:bold;
					}
				}
			}
			
			.orenge-text {
				color:#FFAE00;
				margin-bottom:0;
				line-height:1.2;
				font-size:1.3rem;
				font-weight:bold;
			}
		}
	}
}

.select-container {
	background-image:url("https://new1.natural-life.fun/wp-content/uploads/2025/04/Frame-107.png");
	background-repeat:no-repeat;
	background-size:100%;
	margin-bottom:0;
	
	.title {
		line-height:1;
		font-size:1.8rem;
		font-weight:bold;
		color:#FFFFFF;
		text-align:center;
		margin-bottom:0;
		padding:3rem 0 2rem;
	}
	
	.divide-box {
		display:table;
		width:85%;
		margin:auto;
		
		.box {
			display:table-cell;
			width:33%;
			vertical-align:top;
			padding:0 1rem;
			
			.inner {
				background:#2789D5;
				padding:1rem 0.5rem;
				border-radius:1rem 1rem 0 0;
				
				.inline-box {
					text-align:center;
					
					.img,
					p {
						display:inline-block;
						vertical-align:middle;
					}
					
					.img {
						width:1.5rem;
						
						img {
							width:100%;
						}
					}
					
					p {
						font-size:1rem;
						font-weight:bold;
						color:#FFFFFF;
						line-height:1.3;
						margin-bottom:0.2rem;
					}
				}
				
				.img-box {
					width:80%;
					margin:0 auto 0.5rem;
					
					img {
						width:100%;
					}
				}
				
				.description {
					text-align:center;
					font-size:1rem;
					color:#FFFFFF;
					line-height:1.3;
				}
				
				.three-divide-box {
					display:table;
					width:100%;
					
					.val-box {
						display:table-cell;
						width:33%;
						vertical-align:top;
						padding:0 0.2rem;
						
						.inner-box {
							background:#FFFFFF;
							border-radius:0.5rem;
							padding:1rem 0.5rem;
							
							.one-img {
								width:60%;
								margin:0 auto 0.5rem;
								
								img {
									width:100%;
								}
							}
							
							p {
								font-size:0.8rem;
								margin-bottom:0;
								line-height:1.2;
							}
						}
					}
				}
			}
		}
		
		.box:nth-child(2) {
			.inner {
				background:#2EB7CC;
			}
		}
		
		.box:last-child {
			.inner:last-child {
				background:#63BCFF;
			}
		}
	}
}

.select-next-container {
	background:#BAE6FF;
	width:100%;
	padding:5rem 2rem 2rem;
	margin-bottom:0;
	position:relative;
	
	.ab-box {
		position:absolute;
	}
	
	.ab-box01 {
		top:3%;
		left:10%;
		width:10%;
	}
	
	.ab-box02 {
		top:25%;
		left:1%;
		width:13%;
	}
	
	.ab-box03 {
		top:55%;
		left:9%;
		width:17%;
	}
	
	.ab-box04 {
		top:3%;
		right:10%;
		width:17%;
	}
	
	.ab-box05 {
		top:25%;
		right:1%;
		width:10%;
	}
	
	.ab-box06 {
		top:55%;
		right:15%;
		width:10%;
	}
	
	.title {
		font-size:1.1rem;
		font-weight:bold;
		color:#0056B8;
		text-align:center;
		margin-bottom:0;
		line-height:1;
		
		span {
			font-size:2rem;
		}
	}
	
	.flag-box {
		position:relative;
		
		.title {
			position:absolute;
			top:25%;
			left:50%;
			transform:translateX(-50%);
		}
		
		.flag-img {
			width:40%;
			margin:auto;
		}
	}
	
	.tenshoku-logo-box {
		width:max-content;
		margin:1rem auto;
		
		.divide-box {
			display:table;
			width:max-content;
			border-bottom:4px solid #0056B8;
			
			.left-box,
			.right-box {
				display:table-cell;
				width:50%;
				vertical-align:middle;
				padding:1rem 0;
				
				p {
					font-size:6rem;
					font-weight:bold;
					margin-bottom:0;
					line-height:1.1;
					padding:0 1rem;
				}
			}
			
			.left-box {
				.inner {
					border-right:4px solid #0056B8;
					
					p {
						color:#F7A867;
					}
				}
			}
			
			.right-box {				
				p {
					color:#7AD96B;
				}
			}
		}
		
		.second {
			border-bottom:none;
			
			.left-box .inner p {
				color:#4388FF;
			}
			
			.right-box .inner p {
				color:#ECAADE;
			}
		}
	}
	
	.description {
		color:#0056B8;
		font-size:1.3rem;
		font-weight:bold;
		line-height:1.3;
		text-align:center;
	}
	
	.btn-box {
		width:max-content;
		margin:3rem auto;
		position:relative;
		background:#FFFFFF;
		border-radius:50vh;
		box-shadow:0px 6px 6px 0px rgba(0, 0, 0, 0.25);
		padding:1rem 1.5rem 0.8rem 4rem;
		
		a {
			position:absolute;
			top:0;
			left:0;
			width:100%;
			height:100%;
		}
		
		p,
		.icon-container {
			display:inline-block;
			width:max-content;
			vertical-align:middle;
		}
		
		p {
			line-height:1;
			font-size:2rem;
			font-weight:300;
			color:#000000;
			border-bottom:3px solid #0062D2;
		}
		
		.icon-container {
			width:3rem;
			margin-left:2rem;
			
			svg {
				color:#0062D2;
			}
		}
	}
}

.ranking-total-container {
	.inner-title-box {
		background:radial-gradient(circle, #3D95FF, #6FC8FF);
		padding:1rem;
		
		p {
			text-align:center;
			color:#FFFFFF;
			font-size:1rem;
			line-height:1.4;
		}
		
		.font-yellow {
			color:#FFF600;
			font-size:1.5rem;
			font-weight:bold;
		}
	}
	
	.ranking-table-box {
		width:95%;
		margin:2rem auto;
		
		.grid-container {
			display:grid;
			grid-template-columns:repeat(5, 20%);
			width:100%;
			margin:auto;
			color:black;
			overflow-x:scroll;
			border-collapse:collapse;
		}

		.full-row {
			grid-column: 1 / -1;
			padding:0.7rem 0.5rem 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 {
			line-height:0;
		}

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

			.crown {
				width: calc(15 / 390 * 100vw);
				height: calc(15 / 390 * 100vw);
				margin-bottom:0.5rem;
			}

			.site-image {
				padding:0 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(7 / 390 * 100vw) 0 calc(5 / 390 * 100vw);
			gap:0.5rem;

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

.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;
	line-height:0;
	
	.text-container,
	.icon-container {
		display:inline-block;
        vertical-align:middle;
	}
	
	.icon-container {
		width:2rem;
		height:2rem;
	}
	
	p {
		display:none;
	}
}

.root-container {
	background-image:url("https://new1.natural-life.fun/wp-content/uploads/2025/04/Frame-1010106186.png");
	background-position:center;
	background-repeat:no-repeat;
	background-size:cover;
	
	.title {
		line-height:1;
        font-size:1.8rem;
        font-weight:bold;
        color:#FFFFFF;
        text-align:center;
        margin-bottom:0;
        padding:3rem 0 2rem;
	}
	
	.second-title {
		font-size:2rem;
		font-weight:bold;
		color:#FFFFFF;
		text-align:center;
		text-shadow:0px 4px 4px rgba(0,0,0,0.3);
		padding:3rem 0 2rem;
	}
	
	.fourth-divide-box {
		width:90%;
		margin:auto;
		
		.table-row {
			display:flex;
			flex-wrap:wrap;
			align-items:stretch;
		
			.box {
				display:flex;
				flex:1 1 25%;
				align-items:stretch;
				justify-content:center;
				padding:0 0.5rem;
				
				.inner {
					background:#FFFFFF;
					border-radius:1rem 1rem 0 0;
					padding:1rem 0.5rem;
					display:flex;
					flex-direction:column;
					flex:1;
					
					p {
						line-height:1.3;
					}
					
					.step-title {
						color:#0056B8;
						font-size:1.2rem;
						text-align:center;
						margin-bottom:0.5rem;
					}
					
					.step-subtitle {
						font-size:1rem;
						text-align:center;
						font-weight:bold;
					}
					
					.img {
						width:50%;
						margin:0.5rem auto;
						
						img {
							width:100%;
						}
					}
					
					.description {
						font-size:1rem;
					}
				}
			}
		}
	}
}

.bg-blue-container {
	background:#0056B8;
	padding:1rem;
	
	p {
		text-align:center;
		color:#FFFFFF;
		font-size:1rem;
		line-height:1.4;
	}
	
	.text-yellow {
		color:#FFF600;
		font-size:1.5rem;
		font-weight:bold;
		line-height:1.2;
	}
	
	.sp-view {
		margin-bottom:0.5rem;
	}
}

.site-all-container {
	width:70%;
	margin:2rem auto;
	
	.site-container {
		width:100%;
		
		.divide-title-box {
			display:flex;
			align-items:center;
			justify-content:space-between;
			width:100%;
			background:radial-gradient(circle, #3D95FF, #6FC8FF);
			padding:1rem 3rem;
			
			.left-box {
				font-size:1.3rem;
				font-weight:bold;
				color:#FFFFFF;
				white-space:nowrap;
			}
			
			.right-box {
				display:flex;
				align-items:center;
				justify-content:flex-end;
				gap:0.5rem;
				flex-wrap:wrap;
				
				p {
					font-size:1rem;
					color:#FFFFFF;
				}
				
				.big {
					font-size:2.5rem;
					font-weight:bold;
				}
				
				.img {
					width:50%;
					padding-bottom:0.4rem;
					
					img {
						width:100%;
						display:block;
					}
				}
			}
		}
		
		.bg-yellow-box {
			background:#FFFEDE;
			padding-bottom:1rem;
            margin-bottom:3rem;
            border-bottom:5px solid #37A8FF;
			
			.bg-white-box {
				padding:0.5rem;
				
				.inner {
					background:#FFFFFF;
					padding:0.5rem;
					
					p {
						font-size:1rem;
						line-height:1.2;
						color:#000000;
						text-align:center;
					}
					
					.font-blue {
						color:#0056B8;
						font-size:1.2rem;
						font-weight:bold;
						margin-bottom:0.5rem;
					}
				}
			}
			
			.blue-border {
				content:"";
				width:100%;
				height:5px;
				background:#37A8FF;
				margin:0.5rem 0 1.5rem;
			}
			
			.divide-box {
				display:table;
				width:95%;
				margin:0 auto;
				
				.left-box,
				.right-box {
					display:table-cell;
					width:50%;
					vertical-align:top;
				}
				
				.left-box {
					padding:0.5rem;
					
					.img {
						width:100%;
						
						img {
							width:100%;
							border-radius:0.2rem;
						}
					}
					
					.star-box {
						width:100%;
						display:table;
						border-top:5px solid #37A8FF;
						border-bottom:5px solid #37A8FF;
						margin-top:2rem;
						padding:0.2rem 0.5rem 0;
						
						.left,
						.right {
							display:table-cell;
							width:50%;
							vertical-align:middle;
						}
						
						.left {
							p {
								display:inline-block;
								vertical-align:middle;
								font-size:1rem;
								color:#0056B8;
								line-height:1.5;
							}
							
							.int {
								font-size:2.5rem;
							}
						}
						
						.right {
							text-align:center;
							
							img {
								90%
							}
						}
					}
					
					.btn-box {
						text-align:center;
						margin-top:2rem;
						
						.custom-link-with-arrow {
							width:70%;
							display:inline-block;
							padding-top:0.7rem;
							
							.text-container {
								font-size:1.3rem;
								font-weight:bold;
								display:inline;
								position:relative;
							}
						}
						
						> p {
							display:none;
						}
					}
				}
				
				.right-box {
					padding:0.5rem;
					
					.table tr {
						th,
						td {
							border:none;
							border-top:1px solid #000000;
							padding:0.5rem;
							font-size:0.8rem;
							color:#000000;
						}
						
						th {
							background:#DFF9FF;
						}
						
						td {
							background:#FFFFFF;
							
							img,
							span {
								display:inline-block;
							}
							
							img {
								width:1.5rem;
								height:1.5rem;
							}
							
							span {
								padding-top:0.1rem;
								padding-left:0.5rem;
							}
						}
					}
					
					.point {
						margin-bottom:1rem;
						
						.img,
						p {
							display:inline-block;
							vertical-align:middle;
						}
						
						.img {
							width:1.5rem;
							height:1.5rem;
							
							img {
								width:100%;
							}
						}
						
						p {
							font-size:1rem;
							font-weight:bold;
							padding-top:0.2rem;
						}
					}
					
					.description {
						p {
							font-size:0.8rem;
							line-height:1.4;
							
							span.small {
								font-size:0.8rem;
							}
						}
					}
				}
			}
		}
	}
}

.select-next-container.second {
	background:#FFFFFF;
	background-image:url("https://new1.natural-life.fun/wp-content/uploads/2025/04/Rectangle-66-1.png");
	background-size:cover;
	background-position:top center;
	background-repeat:no-repeat;
}

.qa-container {
	background-image:url("https://new1.natural-life.fun/wp-content/uploads/2025/04/Frame-109.png");
	background-position:top center;
	background-repeat:repeat-y;
	background-size:100%;
	padding-bottom:3rem;
	
	.inner {
		.title {
			font-size:2rem;
			font-weight:bold;
			color:#FFFFFF;
			text-align:center;
			padding:3rem 0 0.5rem;
		}
	}
}

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

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

.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;
	
	p {
		line-height:1.3;
	}
}

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

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

/*********************************************/

@media only screen and (max-width: 1349px) {
	.select-next-container {
		.flag-box {
			.flag-img {
				width:50%;
			}
		}
	}
}

@media only screen and (max-width: 1299px) {
	.trouble-container {
		width:90%;
		
		.bg-img-box {
			.pc-view,
			.fukidashi {
				display:none;
			}
		}
		
		.inline-box {
			width:80%;
			margin:auto;
			padding-bottom:1rem;
			
			.sp-fukidashi {
				display:inline-block;
				
				.inner {
					background:#D7E9FF;
					box-shadow:0px 6px 6px 0px rgba(0, 0, 0, 0.25);
					padding:1rem;
					border-radius:1rem;
					width:max-content;
					
					p {
						font-size:1rem;
						font-weight:bold;
						line-height:1.2;
						text-align:center;
					}
				}
			}
			
			.sp-fukidashi:last-child {
				float:right;
			}
		}
		
		.inline-box:last-child {
			padding-top:1rem;
			padding-bottom:0;
		}
	}
	
	.circle-img-box {
		img {
			width:2%;
		}
	}
}

@media only screen and (max-width: 1199px) {
	.top-container {
		.ab-box01 {
			width:15%;
		}
	}
	
	.select-container {
		.divide-box {
			width:90%;
		}
	}
}

@media only screen and (max-width: 1099px) {
	.select-container {
        .divide-box {
			display:block;
			position:relative;
			width:100%;
			
			.skyblue-bg {
				position:absolute;
				bottom:0;
				left:0;
				width:100%;
				height:70%;
				background:#BAE6FF;
				z-index:-10;
			}
			
			.box {
				display:block;
				width:60%;
				margin:auto;
				padding:0 0 1rem;
				
				.inner {
					padding:2rem;
					
					.img-box {
						width:50%;
					}
					
					.inline-box {
						margin-bottom:1rem;
						
						.img {
							width:2rem;
						}
						
						p {
							font-size:1.2rem;
							margin-bottom:0;
							padding-left:0.3rem;
						}
					}
					
					.description {
						font-size:1.2rem;
						margin:1rem auto !important;
					}
					
					.three-divide-box {
						.val-box {
							padding:0 0.5rem 0 0;
							
							.inner-box {
								.one-img {
									width:40%;
								}
							}
						}
						
						.val-box:nth-child(2) {
							padding:0 0.25rem 0;
						}
						
						.val-box:last-child {
							padding:0 0 0 0.5rem;
						}
					}
				}
			}
		}
	}
	
	.select-next-container {
		.flag-box {
			.flag-img {
				width:60%;
			}
			
			.title {
				width:100%;
			}
		}
	}
	
	.ranking-total-container {
		.scroll-p {
			font-size:1rem;
			width:95%;
			margin:1rem auto 0;
		}
		
		.ranking-table-box {
			margin-top:0;
			.grid-container {
				grid-template-columns:repeat(5, 22%);
			}
		}
	}
	
	.root-container {
		.fourth-divide-box {
			width:95%;
		}
	}
	
	.site-all-container {
		width:80%;
	}
	
	.accordion-item {
		width:70%;
	}
}

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

@media only screen and (max-width: 999px) {
	.top-container {		
		.ab-box01 {
			width:17%;
		}
		
		.ab-box03 {
			right:1rem;
		}
	}
	
	.trouble-container {
		.bg-img-box {
			.ab-box01 {
				.orenge-text {
					line-height:0.5;
				}
			}
		}
	}
	
	.circle-img-box {
		img {
			width:3%;
		}
	}
	
	.select-next-container {
		.tenshoku-logo-box {
			.divide-box {
				.left-box,
				.right-box {
					p {
						font-size:5rem;
					}
				}
			}
		}
	}
	
	.ranking-total-container {
		.ranking-table-box {
			.grid-container {
				grid-template-columns:repeat(5, 26%);
			}
		}
	}
	
	.accordion-item {
		width:80%;
	}
}

@media only screen and (max-width: 899px) {
	.top-container.pc-view {
		display:none;
	}
	
	.top-container {
		background-image:url("https://johns-works.sakura.ne.jp/car-appraisal/wp-content/uploads/2025/09/Frame-1010106278-1_re.png");
		background-repeat:no-repeat;
		background-position:top;
		background-size:cover;
		
		.ab-box01,
		.ab-box02,
		.ab-box03 {
			position:static;
			transform:none;
			width:100%;
		}
		
		.ab-box01 {
			text-align:right;
			
			img {
				width:17%;
			}
		}
		
		.ab-box02 {
			.top-title {
				margin:auto;
			}
			
			.img-box {
				width:60%;
				margin:1rem auto;
			}
		}
		
		.ab-box03 {
			padding-bottom:3rem;
			
			.divide-box {
				margin:auto;
				width:auto;
				
				.left-box,
				.center-box,
				.right-box {
					width:33%;
				}
			}
		}
	}
	
	.select-next-container {
		padding-top:1rem;
		
		.flag-box {
			.flag-img {
				width:70%;
			}
		}
		
		.ab-box01 {
			top:23%;
		}
		
		.ab-box02 {
			top:40%;
		}
		
		.ab-box03 {
			top:65%;
			left:5%;
		}
		
		.ab-box04 {
			top:20%;
		}
		
		.ab-box05 {
			top:35%;
		}
		
		.ab-box06 {
			top:65%;
			right:10%;
		}
	}
	
	.root-container {
		.fourth-divide-box {
			width:55%;
			margin:auto;
			
			.table-row {
				.box {
					flex:1 1 100%;
					max-width:100%;
					padding-left:0;
					padding-right:0;
					
					.inner {
						padding:1.5rem;
					}
				}
				
				.box:first-child,
				.box:nth-child(2),
				.box:nth-child(3) {
					padding-bottom:1rem;
				}
			}
		}
	}
	
	.site-all-container {
		width:90%;
	}
	
	.accordion-item {
		width:90%;
	}
}

@media only screen and (max-width: 849px) {
	.top-container {
		.ab-box02 {
			top:7rem;
		}
		
		.ab-box03 {
			bottom:7rem;
		}
	}
}

@media only screen and (max-width: 799px) {
	/*.top-container {
        .ab-box03 {
			display:none;
		}
		
        .img-box .sp-view {
            display:none;
        }
	}*/
		
    .trouble-container {
        .bg-img-box {
            .tab-view {
				display:none;
			}
		}
	}
	
	.sp-view-divide-box {
		width:100%;
		background:linear-gradient(to right, #6FC8FF, #5CB4FF, #6FC8FF);
		padding:0 0 3rem;
		
		.divide-box {
			display:table;
			width:90%;
			margin:0 auto 1rem;
			
			.left-box,
			.center-box,
			.right-box {				
				.inner {
					background:#0056B8;
					padding:1rem;
					position:relative;
					
					.border-box {
						content:"";
						width:100%;
						height:100%;
						position:absolute;
						top:0.5rem;
						right:-0.5rem;
						border-top:1px solid #000000;
						border-right:1px solid #000000;
						border-bottom:1px solid #000000;
					}
					
					.border-left-box {
						content:"";
						width:100%;
						height:0.5rem;
						position:absolute;
						bottom:-0.5rem;
						right:-0.5rem;
						border-left:1px solid #000000;
					}
					
					ul {
						margin-bottom:0;
						padding-left:0;
						
						li {
							list-style:none;
							text-align:center;
							white-space:nowrap;
							line-height:1.5;
							font-size:0.8rem;
							color:#FFFFFF;
						}
						
						li:last-child {
							font-size:1rem;
							color:#FFF600;
						}
					}
				}
			}
			
			.left-box,
			.center-box {
				display:table-cell;
				width:50%;
				vertical-align:top;
			}
			
			.left-box {
				padding:0 0.5rem 0 0;
			}
			
			.center-box {
				padding:0 0 0 0.5rem;
			}
		}
		
		.right-box {
			width:50%;
			margin:auto;
			padding:0 0.25rem;
			
			.inner {
				background:#0056B8;
				padding:1rem;
				position:relative;
				
				.border-box {
					content:"";
					width:100%;
					height:100%;
					position:absolute;
					top:0.5rem;
					right:-0.5rem;
					border-top:1px solid #000000;
					border-right:1px solid #000000;
					border-bottom:1px solid #000000;
				}
				
				.border-left-box {
					content:"";
					width:100%;
					height:0.5rem;
					position:absolute;
					bottom:-0.5rem;
					right:-0.5rem;
					border-left:1px solid #000000;
				}
				
				ul {
					margin-bottom:0;
					padding-left:0;
					
					li {
						list-style:none;
						text-align:center;
						white-space:nowrap;
						line-height:1.5;
						font-size:0.8rem;
						color:#FFFFFF;
					}
					
					li:last-child {
						font-size:1rem;
						color:#FFF600;
					}
				}
			}
		}
	}
	
	.solution-container {
		padding:3rem 1rem 4rem;
	}
	
	.select-container {
        .divide-box {
            .box {
				width:70%;
			}
		}
	}
	
	.select-next-container {
        .flag-box {
            .flag-img {
				.pc-view {
					display:none;
				}
			}
			
			.pc-view {
				display:none;
			}
			
			.title {
				top:22%;
			}
		}
	}
	
	.ranking-total-container {
		.ranking-table-box {
			.grid-container {
				grid-template-columns:repeat(5, 30%);
			}
		}
	}
	
	.site-all-container {
		.site-container {
			.divide-title-box {
				padding:0.5rem 1rem;
				
				.right-box {
					.big {
						font-size:1.8rem;
					}
					
					.img {
						width:40%;
					}
				}
			}
			
			.bg-yellow-box {
				.bg-white-box {
					.inner {
						.pc-view {
							display:none;
						}
					}
				}
				
				.divide-box {
					.left-box,
					.right-box {
						display:block;
						width:100%;
					}
					
					.left-box {
						.img {
							width:50%;
							margin:auto;
						}
						
						.star-box {
							.left {
								.int {
									font-size:2rem;
								}
							}
							
							.right {
								text-align:right;
								
								img {
									width:60%;
								}
							}
						}
						
						.btn-box {
							margin:2rem auto;
						}
					}
					
					.right-box .description p {
						font-size:1rem;
					}
				}
			}
		}
	}
	
	.accordion-item {
		width:95%;
		
		.accordion-label {
			font-size:1.3rem;
		}
	}
}

@media only screen and (max-width: 699px) {
	.top-container {
		.ab-box02 {
			top:5rem;
		}
		
		.ab-box03 {
			bottom:5rem;
		}
	}
	
	.trouble-container {
		width:95%;
		
		.inline-box {
			position:relative;
			
			.sp-fukidashi {
				display:block;
			}
			
			.sp-fukidashi {
				.inner p {
					font-size:0.9rem;
				}
			}
			
			.sp-fukidashi:last-child {
				position:absolute;
				bottom:-0.5rem;
				right:0;
			}
		}
		
		.bg-img-box {
			.ab-box01 {
				.img-box {
					width:25%;
				}
			}
		}
	}
	
	.solution-container {
		padding-bottom:3rem;
		
		.answer-box {
			display:table;
			width:100%;
			padding-right:0;
			
			.board-box,
			.sp-view {
				display:table-cell;
				vertical-align:bottom;
			}
			
			.board-box {
				width:80%;
				
				.pc-view {
					display:none;
				}
				
				.orenge-text {
					text-align:center;
				}
			}
			
			.sp-view {
				width:20%;
			}
		}
	}
	
	.select-next-container {
        .ab-box02 {
			top:50%;
		}
		
		.ab-box03,
		.ab-box06 {
			top:80%;
		}
		
		.ab-box05 {
			top:45%;
		}
		
		.btn-box {
			padding:1rem 1rem 0.8rem 3rem;
			
			p {
				font-size:1.5rem;
			}
			
			.icon-container {
				width:2rem;
				margin-left:1rem;
			}
		}
	}
	
	.ranking-total-container {
		.ranking-table-box {
			.grid-container {
				grid-template-columns:repeat(5, 35%);
			}
	
			.grid-item.site {
				.site-name {
					font-size:0.9rem;
				}
			}
			
			.full-row {
				font-size:1.3rem;
			}
		}
		
		.custom-link-with-arrow {
			.text-container {
				font-size:0.9rem;
			}
			
			.icon-container {
				width:1.5rem;
				height:1.5rem;
			}
		}
	}
	
	.sp-700 {
		.pc-view {
			display:none;
		}
	}
}

@media only screen and (max-width: 649px) {
	.select-next-container {
        .flag-box {
            .flag-img {
                width:80%;
            }
		}
	}
	
	.site-all-container {
		width:98%;
	}
	
	.root-container {
		.fourth-divide-box {
			width:65%;
		}
	}
}

@media only screen and (max-width: 599px) {
	.top-container {		
		.ab-box03 {
			.divide-box {
				.left-box,
				.center-box {
					width:30%;
				}
				
				.right-box {
					width:40%;
				}
			}
		}
	}
	
	.trouble-container {
        .bg-img-box {
            .sp-view {
                display:none;
            }
			
			.ab-box01 {
                .img-box {
					width:30%;
				}
			}
        }
    }
	
	.select-container {
        .divide-box {
            .box {
				width:90%;
			}
		}
	}
	
	.ranking-total-container {
		.inner-title-box {
			.pc-view {
				display:none;
			}
		}
	}
	
	.site-all-container {
        .site-container {
            .divide-title-box {
                .right-box {
					justify-content:flex-end;
					text-align:right;
					gap:0;
					
					.big {
						line-height:1;
						padding-left:0.5rem;
					}
					
					.img {
						width:100%;
						text-align:right;
						margin-top:0;
						padding-bottom:0;
						
						img {
							width:50%;
							margin:0 0 0 auto;
						}
					}
				}
			}
		
            .bg-yellow-box {
                .divide-box {
                    .left-box {
                        .img {
							width:60%;
						}
					}
				}
			}
		}
	}
}

@media only screen and (max-width: 549px) {
	.top-container {		
		.ab-box03 {
			.divide-box {
				.left-box,
				.center-box,
				.right-box {
					.inner {
						padding:1rem 0.5rem;
						
						.border-box {
							top:0.2rem;
							right:-0.2rem;
						}
					
						.border-left-box {
							height: 0.2rem;
							bottom: -0.2rem;
							right: -0.2rem;
						}
					}
				}
			}
		}
	}
	
	.trouble-container {
        .bg-img-box {
            .sp-view,
			.sp02-view, {
                display:none;
            }
			
			.ab-box01 {
                .img-box {
					width:30%;
					margin:2rem auto 0;
				}
			}
        }
		
		.inline-box {
			width:100%;
		}
    }
	
	.circle-img-box {
		img {
			width:4%;
		}
	}
	
	.solution-container {
		.answer-box {
			.board-box {
				padding:1rem;
			}
		}
	}
	
	.select-container {
        .divide-box {
			.skyblue-bg {
				height:85%;
			}
			
            .box {
				.inner {
					padding:2rem 1rem;
					
					.three-divide-box {
                        .val-box {
                            padding: 0 0.3rem 0 0;
						}
						
						.val-box:nth-child(2) {
                            padding: 0 0.15rem 0;
						}
						
						.val-box:last-child {
                            padding: 0 0 0 0.3rem;
						}
					}
				}
			}
		}
	}
	
	.select-next-container {
		padding:1rem 0.5rem 2rem;
		width:100%;
		margin:auto;
		
        .flag-box {
            .flag-img {
                width: 100%;
            }
			
			.title {
				top:27%;
				
				span {
					font-size:1.7rem;
				}
			}
		}
	}
	
	.ranking-total-container {
		.ranking-table-box {
			.grid-container {
				grid-template-columns:repeat(5, 40%);
			}
			
			.grid-item.site {
				.crown {
					width:calc(40 / 390 * 100vw);
					height:calc(40 / 390 * 100vw);
				}
				
				.site-image {
					padding:0;
				}
			}
		}
	}
	
	.root-container {
        .fourth-divide-box {
            width:80%;
        }
	}
	
	.sp-550 {
		padding:1rem 0.5rem;
		
		.pc-view {
			display:none;
		}
		
		p {
			font-size:0.8rem;
		}
	}
}

@media only screen and (max-width: 499px) {
	.top-container {
		.ab-box01 {
			padding-top:0.5rem;
			
            img {
                width:30%;
			}
		}
		
		.ab-box02 {
			margin:2rem auto 1rem;
			
			.img-box {
				width:90%;
				margin-bottom:0;
			}
		}
		
		.ab-box03 {
			padding-top:2rem;
			padding-bottom:0.6rem;
			background:#5FB8FF;
			
			.divide-box {
				width:95%;
				
				.left-box,
				.center-box,
				.right-box {
					padding:0 0.3rem;
				}
			}
		}
	}
	
	.trouble-container {
		margin-top:2rem;
		
		.bg-img-box {
            .sp02-view {
				display:none;
			}
			
			.ab-box01 {
				.img-box {
					margin-top:4rem;
				}
			}
		}
		
		.inline-box {
			.sp-fukidashi .inner {
				padding:0.5rem 1rem;
			}
			
			.sp-fukidashi:last-child {
				position:static;
				display:block;
			}
		}
		
		.inline-box:last-child {
            padding-top: 0.5rem;
		}
	}
	
	.solution-container {
		padding-bottom:4rem;
		
		.answer-box {
			margin-top:1rem;
			display:block;
			position:relative;
			
			.board-box {
				padding:1rem 0.5rem;
				display:block;
				width:90%;
				
				ul {
					margin-bottom:0.5rem;
					
					li span {
						font-size:1rem;
					}
				}
				
				.orenge-text {
					text-align:left;
					font-size:1.2rem;
				}
			}
			
			.sp-view {
				position:absolute;
				bottom:-1rem;
				right:-1rem;
				width:20%;
			}
		}
	}
	
	.select-container {
		.title {
			font-size:1.5rem;
		}
	}
	
	.select-next-container {
        .tenshoku-logo-box {
			margin-top:3rem;
			
            .divide-box {
                .left-box,
				.right-box {
					padding:0.5rem 0;
					
                    p {
						font-size:4rem;
						padding:0 0.5rem;
					}
				}
			}
		}
		
		.ab-box01 {
			top:20%;
		}
		
		.ab-box02 {
			top:32%;
		}
		
		.ab-box03 {
			top:48%;
		}
		
		.ab-box04 {
			top:20%;
		}
		
		.ab-box05 {
			top:30%;
		}
		
		.ab-box06 {
			top:48%;
		}
		
		.description {
			margin-top:2rem;
		}
	}
	
	.ranking-total-container {
        .ranking-table-box {
            .grid-item.site {
                .site-name {
                    font-size:0.7rem;
				}
			}
			
			.grid-item,
			.grid-item p {
				font-size:0.9rem;
			}
			
			.grid-item {
				padding:1.5rem 0.5rem;
				
				.custom-link-with-arrow {
					.text-container {
						font-size:0.8rem;
					}
					
					.icon-container {
						width:1rem;
						height:1rem;
					}
				}
			}
			
			.full-row {
                font-size:1.1rem;
            }
		}
	}
	
	.site-all-container {
		.site-container {
			.bg-yellow-box {
				.divide-box {
					.left-box {
						.star-box {
							padding:0 0.3rem;
						}
					}
					
					.right-box {
						.point {
							margin-top:1rem;
						}
					}
				}
			}
		}
	}
	
	.root-container {
		.fourth-divide-box {
			width:90%;
			
			.table-row {
				.box {
					flex:1 1 100%;
					max-width:100%;
					
					.inner {
						.step-subtitle {
							font-size:0.9rem;
						}
					}
				}
			}
		}
		
		.second-title {
			font-size:1.5rem;
		}
	}
	
	.accordion-item {
		.accordion-label {
			font-size:1.1rem;
		}
	}
	
	.accordion-content::before {
		margin-top:calc(10 / 390 * 100vw);
		margin-bottom:calc(10 / 390 * 100vw);
	}
	
	.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 (max-width: 449px) {
	.trouble-container {
		.bg-img-box {
            .sp03-view {
				display:none;
			}
			
			.ab-box01 {
                .img-box {
					width:40%;
				}
				
				.main-text {
					margin-bottom:2rem;
				}
			}
		}
		
		.inline-box {
            .sp-fukidashi:first-child {
				padding-bottom:0.5rem;
			}
		}
		
		.inline-box:last-child {
            padding-top:1rem;
		}
	}
	
	.select-next-container {
        .flag-box {
            .title {
                top:20%;
            }
        }
		
        .tenshoku-logo-box {
            margin-top: 1rem;
		}
		
		.ab-box01,
		.ab-box04 {
			top:21%;
		}
		
		.ab-box02 {
			top:31%;
		}
		
		.ab-box03,
		.ab-box06 {
			top:45%;
		}
		
		.ab-box05 {
			top:29%;
		}
		
		.description {
			font-size:1.1rem;
		}
		
		.btn-box {
			margin:2rem auto 1rem;
		}
	}
}

@media only screen and (min-width: 450px) {
	.trouble-container {
		.bg-img-box {
            .sp04-view {
				display:none;
			}
		}
	}
}

@media only screen and (min-width: 500px) {
	.trouble-container {		
		.bg-img-box {
            .sp03-view {
				display:none;
			}
		}
	}
}

@media only screen and (min-width: 550px) {
	.sp-550 {
		.sp-view {
			display:none;
		}
	}
}

@media only screen and (min-width: 600px) {
	.trouble-container {
        .bg-img-box {
            .sp02-view {
                display:none;
            }
        }
    }
	
	.ranking-total-container {
		.inner-title-box {
			.sp-view {
				display:none;
			}
		}
	}
}

@media only screen and (min-width: 700px) {
	.solution-container {
		.answer-box {
			.sp-view {
				display:none;
			}
		}
	}
	
	.sp-700 {
		.pc-view {
			display:none;
		}
	}
}

@media only screen and (min-width: 800px) {
	.sp-view-divide-box {
		display:none;
	}
	
	.top-container {
		.img-box .sp02-view {
			display:none;
		}
	}
	
	.trouble-container {
        .bg-img-box {
			.sp-view {
				display:none;
			}
		}
	}
	
	.select-next-container {
        .flag-box {
			.sp-view {
				display:none;
			}
            .flag-img {
				.sp-view {
					display:none;
				}
			}
		}
	}
	
	.site-all-container {
		.site-container {
			.bg-yellow-box {
				.bg-white-box {
					.inner {
						.sp-view {
							display:none;
						}
					}
				}
			}
		}
	}
}

@media only screen and (min-width: 900px) {
	.top-container.sp-view {
		display:none;
	}
	
	.top-container {
		.img-box {
			.sp-view {
				display:none;
			}
		}
	}
}

@media only screen and (min-width: 1100px) {
	.select-container {
		.divide-box {
			.box {
				.inner {
					.inline-box {
						margin-bottom:0.5rem;
					}
				}
			}
		}
	}
	.ranking-total-container {
		.ranking-table-box {
			.grid-container {
				overflow: visible;
			}
		}
	}
	
	.scroll-p {
		display:none;
	}
}

@media only screen and (min-width: 1300px) {
	.sp-fukidashi {
		display:none;
	}
	
	.trouble-container {
		.bg-img-box {
			.tab-view {
				display:none;
			}
		}
	}
}