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

.logo-box {
	width:100%;
	text-align:right;
	padding:0.5rem 2rem;
	
	img {
		width:13%;
	}
}

.custom-link-with-arrow {
	background:#FFAE00;
    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;
	}
}

.site-all-container {
	width:100%;
	margin:auto;
	
	.img-bg {
		background-image:url("https://johns-works.sakura.ne.jp/car-appraisal/wp-content/uploads/2025/09/bg_re.png");
		background-repeat:no-repeat;
		background-size:cover;
		padding:3rem 0;
		
		.select-top-container {
			margin-bottom:1.5rem;
			
			.title {
				font-size:1.5rem;
				font-weight:bold;
				color:#FFFFFF;
				text-align:center;
				line-height:1.2;
				
				span {
					font-size:2.5rem;
					color:#F4B400;
					padding-right:0.3rem;
				}
			}
		}
		
		.sub-title {
			font-size:1.5rem;
			font-weight:bold;
			color:#FFFFFF;
			text-align:center;
			line-height:1.2;
			margin:1.5rem auto 0;
		}
	}
	
	.select-customer-container {
		text-align:center;
		
		.inner {
			width:90%;
			margin:auto;
			background:#FFFFFF;
			border-radius:50vh;
			padding:0.5rem 5rem;
			
			.val {
				display:inline-block;
				background:#3A93FF;
				padding:1rem 2rem;
				border-radius:50vh;
				margin:0.2rem;
				
				p {
					color:#FFFFFF;
					line-height:1;
					font-size:1.2rem;
					font-weight:bold;
				}
			}
		}
	}
	
	.bg-blue-box {
		background:#BAE6FF;
		width:100%;
		padding:3rem 0 1rem;
		
		.back-box {
			width:max-content;
			margin:0 auto 2rem;
			background:#FFFFFF;
			padding:2rem;
			border-radius:1rem;
			
			.not-found {
				text-align:center;
				font-size:1.3rem;
				font-weight:bold;
				margin-bottom:1rem !important;
			}
			
			.btn-back {
				width:max-content;
				margin:auto;
				text-align:center;
				background:#0062D2;
				border-radius:50vh;
				padding:1rem 3rem 0.8rem;
				position:relative;
				
				a {
					position:absolute;
					top:0;
					left:0;
					width:100%;
					height:100%;
				}
				
				p {
					font-size:1.3rem;
					font-weight:bold;
					color:#FFFFFF;
					line-height:1;
				}
			}
		}
	}
	
	.site-container {
		width:80%;
		margin:auto;
		
		.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;
						}
					}
				}
			}
		}
	}
}

.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: 1199px) {
	.logo-box {
		img {
			width:15%;
		}
	}
}

@media only screen and (max-width: 1099px) {
	.site-all-container .site-container {
		width:80%;
	}
}

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

@media only screen and (max-width: 999px) {
	.logo-box {
		img {
			width:17%;
		}
	}
}

@media only screen and (max-width: 899px) {
	.site-all-container .site-container {
		width:90%;
	}
}

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

@media only screen and (max-width: 799px) {
	.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;
					}
				}
			}
		}
		
		.select-customer-container {
			.inner {
				border-radius:1rem;
			}
		}
	}
}

@media only screen and (max-width: 649px) {
	.site-all-container .site-container {
		width:98%;
	}
}

@media only screen and (max-width: 599px) {
	.site-all-container {
		.img-bg {
			.pc-view {
				display:none;
			}
			
			.select-top-container {
				.pc-view {
					display:none;
				}
			}
		}
		
		.select-customer-container {
			.inner {
				padding:0.5rem;
				
				.val {
					padding:0.5rem 1.5rem;
				}
			}
		}
		
        .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: 499px) {
	.logo-box {
		img {
			width:30%;
		}
	}
	
	.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: 600px) {
	.site-all-container {
		.img-bg {
			.sp-view {
				display:none;
			}
			
			.select-top-container {
				.sp-view {
					display:none;
				}
			}
		}
	}
}

@media only screen and (min-width: 800px) {
	.site-all-container {
		.site-container {
			.bg-yellow-box {
				.bg-white-box {
					.inner {
						.sp-view {
							display:none;
						}
					}
				}
			}
		}
	}
}