@charset "utf-8";

.en{
	font-family: "franklin-gothic-atf", sans-serif;
}

/*arichive*/
.outlet-header{
	margin: 0 calc((50vw - 540px) * -1) 40px;
	background: url(/images/outlet/page-title-bg.jpg) no-repeat center center / cover;
	.main{
		margin: 0 auto;
		width: 1080px;
		height: 200px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.title-area{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: left;
			text-align: left;
			text-shadow: 0 0 2px rgba(80,80,80,.95), 0 0 6px rgba(60,60,60,.75), 0 0 12px rgba(40,40,40,.45);
			.en{
				font-weight: 800;
				color: #fff;
			}
			.page-title {
				margin: 5px 0 20px;
				color: #111;
				background: none;
				color: #fff;
				&::after{
					bottom: -5px;
				}
			}
			.copy{
				font-weight: 500;
				color: #fff;
			}
		}
		.notice{
			background: rgba(0,0,0,.8);
			height: 200px;
			width: 380px;
			padding-left: 30px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: left;
			text-align: left;
			color: #fff;
			h2{
				font-size: 18px;
				font-weight: 700;
				margin-bottom: .5em;
				&::before{
					content: '\f071';
					padding-right: .5em;
					font-weight: bold;
					font-size: 15px;
					font-family: 'Font Awesome 5 Free';
					line-height: 1;
					-webkit-font-smoothing: antialiased;
					-moz-osx-font-smoothing: grayscale;
				}
			}
			ul{
				li{
					&::before{						
						content: '\f0da';
						padding-right: .5em;
						font-weight: bold;
						font-size: 11px;
						font-family: 'Font Awesome 5 Free';
						line-height: 1;
						-webkit-font-smoothing: antialiased;
						-moz-osx-font-smoothing: grayscale;
					}
				}
			}
		}
	}
}

.outlet-main{
	display: flex;
	justify-content: space-between;
	flex-flow: row-reverse;
	.main{
		width: calc(100% - 240px);
		.summary{
			margin-bottom: 10px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.numbers{
				strong{
					font-size: 25px;
				}
			}
			.sort{
				display: flex;
				justify-content: flex-end;
				align-items: center;
				gap: 5px;
			}
		}
		.remarks{
			margin-bottom: 20px;
			padding: 1.0em;
			border: #eee294 1px solid;
			background: #fffbea;
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #7a6201;
			.text{
				font-size: 12px;
				.sales{
					font-weight: 700;
						&::before{
						content: '\f071';
						padding-right: .5em;
						font-weight: bold;
						font-size: 11px;
						font-family: 'Font Awesome 5 Free';
						line-height: 1;
						-webkit-font-smoothing: antialiased;
						-moz-osx-font-smoothing: grayscale;
					}
				}
				.confirmation{
					margin-left: 2.0em;
				}
			}
			.btns{
				a{
					display: block;
					color: #fff;
					background: #7a6201;
					padding: .5em 1.0em;
					font-size: 12px;
					font-weight: 800;
					text-decoration: none;
					-webkit-transition: all 0.3s ease;
					-moz-transition: all 0.3s ease;
					-o-transition: all 0.3s ease;
					&:hover{
						opacity: .7;
					}
				}
			}
		}
		.list{
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 30px 20px;
			.outlet-once{
				border: #ccc 1px solid;
				.image{
					position: relative;
					.attribute{
						position: absolute;
						top: 5px;
						left: 5px;
						z-index: 10;
						div{
							span{
								display: inline-block;
								color: #fff;
								font-size: 10px;
								padding: 0 .5em;
								font-weight: 500;
								width: 72px;
								text-align: center;
								&.shop{
									background: #2946b6;
								}
								&.model{
									background: #092344;
								}
							}
						}
					}
				}
				.texts{
					padding: 10px;
					.texts-main{
						.en{
							font-size: 12px;
							font-weight: 800;
							color: #777;
						}
						h2{
							height: 6.0em;
							a{
								color: inherit;
								font-weight: 700;
								font-size: 18px;
								display: -webkit-box;
								-webkit-line-clamp: 3;
								-webkit-box-orient: vertical;
								overflow: hidden;
								line-height: 1.3;
							}
						}
						.simple{
							display: none;
							margin-bottom: 1.0em;
							padding: .5em;
							background: #d7dee3;
							border-left: #2946b6 1px solid;
							color: #092344;
							font-size: 13px;
						}
						.prices{
							.regular{
								font-size: 11px;
								color: #aaa;
							}
							.price{
								font-size: 20px;
								font-weight: 800;
								color: #d00;
								.tax{
									font-size: 11px;
									color: #777;
									font-weight: 400;
								}
								.off{
									display: inline-block;
									background: #d00;
									color: #fff;
									font-size: 13px;
									font-weight: 700;
									padding: 0 .5em;
								}
							}
						}
					}
					.inquiry{
						margin: 10px 0 5px;
						form{
							input{
								appearance: none;
								-webkit-appearance: none;
								border: none;
								border-radius: 0;
								cursor: pointer;
								font-family: inherit;
								font-size: inherit;
								width: 100%;
								height: 40px;
								line-height: 40px;
								text-align: center;
								background: #092344;
								color: #fff;
								font-weight: 800;
							}
						}
						span{
							display: block;
							width: 100%;
							height: 40px;
							line-height: 40px;
							text-align: center;
							background: #092344;
							color: #fff;
							font-weight: 800;
						}
					}
					.link{
						a{
							display: block;
							color: #092344;
							width: 100%;
							height: 40px;
							line-height: 38px;
							font-weight: 700;
							text-align: center;
							border: #092344 1px solid;
							text-decoration: none;
							-webkit-transition: all 0.3s ease;
							-moz-transition: all 0.3s ease;
							-o-transition: all 0.3s ease;
							&:hover{
								opacity: .7;
							}
						}
					}
				}
				&.sold{
					.image{
						.attribute,
						img{
							opacity: .7;
							filter: saturate(30%);
						}
						.soldout{
							z-index: 10;
							display: inline-block;
							position: absolute;
							top: 50%;
							left: 20px;
							right: 20px;
							text-align: center;
							transform: translateY(-50%);
							opacity: 1;
							filter: saturate(100%);
							padding: 0 1.0em;
							border: #d00 1px solid;
							color: #d00;
							font-size: 25px;
							font-weight: 900;
							background: rgba(255,255,255,.5);
						}
					}
					.texts{
						opacity: .7;
						filter: saturate(30%);
					}
				}
			}
		}
	}
	#sidebar{
		width: 220px;
		float: none;
		.outlet-search{
			border-top: #092344 3px solid;
			margin-top: 10px;
			padding: 10px;
			background: #eef;
			#feas-searchform-0{
				font-size: 16px;
				font-weight: bold;
				label{
					display: block;
					font-size: 12px;
					font-weight: normal;
					border: none;
					span{
						margin-left: .5em;
					}
				}
				input.feas-submit-button{
					display: block;
					margin: 20px auto 0;
					width: 100%;
					height: 40px;
					line-height: 40px;
					text-align: center;
					background: #092344;
					color: #fff;
					font-size: 12px;
					font-weight: bold;
					letter-spacing: 0.05em;
					-webkit-border-radius: 3px;
					-moz-border-radius: 3px;
					border-radius: 3px;
					opacity: 1;
					-webkit-transition-duration: 0.5s;
					-moz-transition-duration: 0.5s;
					-ms-transition-duration: 0.5s;
					-o-transition-duration: 0.5s;
					transition-duration: 0.5s;
					border: none;
					cursor: pointer;
				}
			}
		}
	}
}

.outlet-flow{
	text-align: center;
	padding: 80px;
	margin: 80px calc((50vw - 540px) * -1);
	background: #eef;
	h2{
		margin-bottom: 50px;
		span{
			display: block;
			&.en{
				font-weight: 800;
				color: #2946b6;
			}
			&.ja{
				font-size: 27px;
				font-weight: 700;
			}
		}
	}
	.main{
		margin: 0 auto;
		width: 1080px;
		ul{
			margin-bottom: 40px;
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 30px;
			li{
				background: #fff;
				padding: 30px 50px;
				.number{
					margin: 0 auto 30px;
					width: 50px;
					height: 50px;
					-webkit-border-radius: 50%;
					-moz-border-radius: 50%;
					border-radius: 50%;
					line-height: 50px;
					text-align: center;
					background: #092340 4px;
					color: #fff;
					font-size: 18px;
					font-weight: 800;
				}
				h3{
					font-size: 18px;
					font-weight: 700;
					margin-bottom: .5em;
				}
				&:not(:last-child){
					position: relative;
					&::after{
						position: absolute;
						top: 50%;
						transform: translateY(-50%);
						right: -20px;
						content: '\f105';
                        font-weight: bold;
                        font-size: 15px;
                        font-family: 'Font Awesome 5 Free';
                        line-height: 1;
                        -webkit-font-smoothing: antialiased;
                        -moz-osx-font-smoothing: grayscale;
					}
				}
			}
		}
	}
	.remarks{
		color: #888;
	}
}

.search-results{
	.outlet-main{
		display: block;
		.main{
			width: 100%;
			.list{
				grid-template-columns: repeat(4, 1fr);
			}
		}
	}
}

.pagination-wrap{
	margin-top: 50px;
}

/*single*/
.outlet-single-main{
	display: flex;
	justify-content: space-between;
	.images{
		width: 600px;
		.main{
			margin-bottom: 15px;
			position: relative;
			.shop{
				position: absolute;
				top: 5px;
				left: 5px;
				z-index: 10;
				display: inline-block;
				color: #fff;
				font-size: 10px;
				font-weight: 500;
				background: #2946b6;
				width: 72px;
				text-align: center;
				padding: 0 .5em;
			}
			.car-type{
				position: absolute;
				top: 25px;
				left: 5px;
				z-index: 10;
				display: inline-block;
				color: #fff;
				font-size: 10px;
				width: 72px;
				text-align: center;
				padding: 0 .5em;
				font-weight: 500;
				background: #092344;
			}
		}
		
		.sub{
			ul{
				display: grid;
				grid-template-columns: repeat(5, 1fr);
				gap: 15px;
			}
		}
	}
	.texts{
		width: calc(100% - 630px);
		text-align: left;
		.attribute{
			display: flex;
			justify-content: flex-start;
			align-items: center;
			gap: 5px;
			div{
				span{
					display: inline-block;
					color: #fff;
					font-size: 10px;
					padding: 0 1.0em;
					&.condition{
						text-transform: uppercase;
						font-weight: 800;
						background: #2946b6;
					}
					&.model{
						font-weight: 500;
						background: #092344;
					}
				}
			}
		}
		h1{
			font-size: 25px;
			font-weight: 800;
			margin: .5em 0;
			span{
				font-size: 18px;
				margin-left: 1.0em;
				opacity: .5;
			}
		}
		.prices{
			margin-bottom: 20px;
			padding: .5em;
			background: #f0f3f5;
			border: #2946b6 1px solid;
			.header,
			.regular,
			.installation{
				font-size: 13px;
				color: #092344;
			}
			.price{
				font-size: 35px;
				font-weight: 800;
				color: #d00;
				.tax{
					font-size: 11px;
					color: #092344;
					font-weight: 400;
				}
				.off{
					display: inline-block;
					background: #d00;
					color: #fff;
					font-size: 13px;
					font-weight: 700;
					padding: 0 .5em;
				}
			}
		}
		.spec{
			margin-bottom: 20px;
			padding: .5em;
			border: #2946b6 1px solid;
		}
		.table{
			table{
				width: 100%;
				tr{
					th,td{
						border: 1px solid #dee2e6;
					}
					th{
						background: #f0f3f5;
					}
					&:first-child{
						td{						
							font-weight: 700;
						}
					}
				}
			}
		}
		.shop{
			background: #f0f3f5;
			border: #2946b6 1px solid;
			padding: 10px 10px 10px 40px;
			position: relative;
			margin-bottom: 30px;
			h3{
				font-size: 18px;
				font-weight: 700;
			}
			.add{
				font-size: 12px;
			}
			&::before{
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				left: 15px;
				content: '\f3c5';
				font-weight: bold;
				font-size: 15px;
				font-family: 'Font Awesome 5 Free';
				line-height: 1;
				-webkit-font-smoothing: antialiased;
				-moz-osx-font-smoothing: grayscale;
			}
		}
		.inquiry{
			margin-bottom: 10px;
			form{
				input{
					appearance: none;
					-webkit-appearance: none;
					border: none;
					border-radius: 0;
					cursor: pointer;
					font-family: inherit;
					font-size: inherit;
					width: 100%;
					height: 50px;
					line-height: 50px;
					text-align: center;
					background: #092344;
					color: #fff;
					font-weight: 800;
					font-size: 20px;
				}
			}
		}
		.tel{
			a{
				display: block;
				color: #092344;
				width: 100%;
				height: 50px;
				line-height: 48px;
				font-weight: 700;
				text-align: center;
				border: #092344 1px solid;
				font-size: 18px;
				text-decoration: none;
				-webkit-transition: all 0.3s ease;
				-moz-transition: all 0.3s ease;
				-o-transition: all 0.3s ease;
				&:hover{
					opacity: .7;
				}
			}
		}
		.remarks{
			margin-top: 15px;
			padding-top: 15px;
			border-top: #092344 1px solid;
			ul{
				li{
					font-size: 14px;
					&::before{
						content: '※';
					}
				}
			}
		}
	}
}