/*-------------------- pc --------------------*/
/*---------- base > width:1440px ----------*/
.search_header{
    margin-bottom:32px;
    padding-bottom:32px;
    border-bottom:1px solid #cccfd1;
}
.search_header_container{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;

    .headline{
        display:flex;
        flex-direction:column;
        align-items:flex-start;

        p{
            position:relative;
            margin-bottom:24px;
            padding:0 20px;
            font-family:"Jost", sans-serif;
            font-size:16px;

            span{
                &.left{
                    position:absolute;
                    top:0;
                    left:0;
                    width:16px;
                    height:16px;
                    background-color:#c50018;
                    overflow:hidden;

                    &:before{
                        content:'';
                        position:absolute;
                        top:0;
                        left:0;
                        width:32px;
                        height:32px;
                        background-color:#f0f1f4;
                        border-radius:50%;
                    }
                }
                &.right{
                    position:absolute;
                    bottom:0;
                    right:0;
                    width:16px;
                    height:16px;
                    background-color:#c50018;
                    overflow:hidden;

                    &:before{
                        content:'';
                        position:absolute;
                        bottom:0;
                        right:0;
                        width:32px;
                        height:32px;
                        background-color:#f0f1f4;
                        border-radius:50%;
                    }
                }
            }
        }
        h1{
            font-family:"Shippori Mincho B1", serif;
            font-size:40px;
            letter-spacing:-0.8px;
            line-height:50px;
        }
    }
	.mobile_container{
		display:none;
	}
    .terms{
        display:flex;
        align-items:center;

        .number{
            margin-right:16px;
            font-family:"IBM Plex Sans JP", sans-serif;
            font-weight:600;
            font-size:16px;

            span{
                padding:0 4px 0 12px;
                font-size:24px;
                color:#c50018;
            }
        }
        .view{
            margin-right:48px;
            font-family:"IBM Plex Sans JP", sans-serif;
            font-weight:500;
            font-size:16px;
        }
        .sort{
            display:flex;
            align-items:center;
            gap:16px;
            font-family:"IBM Plex Sans JP", sans-serif;
            font-weight:600;
            font-size:16px;

            select{
                position:relative;
                padding:8px 61px 8px 16px;
				color:#32373e;
                background:url('../images/search_lists/select_arrow.png') center right 6px / 20px no-repeat;
                background-color:#ffffff;
                border:1px solid #cccfd1;
                border-radius:4px;
            }
        }
    }
}

.search_body{

}
.search_body_container{
    display:grid;
    /* minmax(0,1fr): a bare 1fr keeps an automatic min-content minimum, so one
       card whose free text cannot wrap (e.g. a PRポイント line padded with 75
       全角スペース) grows this track past the container and scrolls the whole
       page sideways. Measured 2026-08-20 on ?maker=03&page=9 (45-10894). */
    grid-template-columns:320px minmax(0, 1fr);
    gap:40px;
}
.search_body_terms{
	/* display:flex;
	flex-direction:column;
	justify-content:space-between;
	position:relative; */
}
.terms_container{
	/* display:grid;
	gap:24px; */
	position:sticky;
	top:0;
	height:100vh;
}
.terms_scroll_area{
	height:100%;
	overflow:auto;

	/* &::-webkit-scrollbar{
		width:4px;
		height:4px;
	}
	&::-webkit-scrollbar-thumb{
		background:#c50018;
		border-radius:2px;
	}
	&::-webkit-scrollbar-track{
		background:#cccfd1;
		border-radius:2px;
	} */
}
.terms_box{
	position:relative;
	margin-bottom:24px;
	background-color:#ffffff;
	border:1px solid #cccfd1;
	border-radius:4px;
	overflow:hidden;

	h2{
		padding:16px 0;
		font-family:"IBM Plex Sans JP", sans-serif;
		font-weight:600;
		font-size:16px;
		line-height:22px;
		text-align:center;
		color:#ffffff;
		background-color:#6b6f75;
	}
	.content{
		max-height:300px;
		padding:20px;

		&.active{
			max-height:100%;
		}
		.box{
			margin-bottom:13px;
			padding-bottom:12px;
			border-bottom:1px solid #cccfd1;

			&:last-child{
				margin:0;
				padding:0;
				border:none;
			}
			h3{
				position:relative;
				margin-bottom:4px;
				padding-left:16px;
				font-family:"IBM Plex Sans JP", sans-serif;
				font-weight:600;
				font-size:14px;
				line-height:20px;

				&:before{
					content:'';
					position:absolute;
					top:50%;
					left:0;
					transform:translateY(-50%);
					width:8px;
					height:8px;
					background-color:#c50018;
					border-radius:50%;
				}
			}
			ul{
				position:relative;

				&:before{
					content:'';
					position:absolute;
					top:0;
					left:3.5px;
					width:1px;
					height:100%;
					background-color:#cccfd1;
				}
				li{
					position:relative;
					padding-left:24px;
					font-family:"IBM Plex Sans JP", sans-serif;
					font-weight:500;
					font-size:14px;
					line-height:20px;

					&:before{
						content:'';
						position:absolute;
						top:50%;
						left:3.5px;
						transform:translateY(-50%);
						width:12.5px;
						height:1px;
						background-color:#cccfd1;
					}
					&:last-child{
						&:after{
							content:'';
							position:absolute;
							bottom:0;
							left:3px;
							width:2px;
							height:calc(50% - 0.5px);
							background-color:#ffffff;
						}
					}
				}
			}
		}
	}
	.more{
		position:absolute;
		bottom:0;
		width:100%;
		padding:70px 0 20px;
		text-align:center;
		background:linear-gradient(transparent, #ffffff 50%);
		
		&.active{
			position:relative;
			padding-top:5px;
		}
		span{
			font-family:"IBM Plex Sans JP", sans-serif;
			font-weight:600;
			font-size:14px;
			line-height:20px;
			text-decoration:underline;
			cursor:pointer;
			transition:0.3s;

			&:hover{
				color:#c50018;
			}
		}
	}
	.area{
		display:grid;
		gap:16px;
		padding:24px 20px;

		button{
			display:flex;
			justify-content:center;
			align-items:center;
			gap:8px;
			padding:13px 0;
			font-family:"IBM Plex Sans JP", sans-serif;
			font-weight:600;
			font-size:14px;
			line-height:20px;
			background:url('../images/search_lists/terms_plus.png') center right 14px / 20px no-repeat;
			border:1px solid #cccfd1;
			border-radius:24px;
			transition:0.3s;

			&:hover{
				color:#c50018;
				border-color:#c50018;
			}
			img{
				width:20px;
			}
		}
	}
	.form{
		display:grid;
		gap:30px;
		padding:20px;

		h3{
			position:relative;
			margin-bottom:12px;
			padding-left:16px;
			font-family:"IBM Plex Sans JP", sans-serif;
			font-weight:600;
			font-size:14px;
			line-height:20px;

			&:before{
				content:'';
				position:absolute;
				top:50%;
				left:0;
				transform:translateY(-50%);
				width:8px;
				height:8px;
				background-color:#c50018;
				border-radius:50%;
			}
		}
		select{
			position:relative;
			width:100%;
			padding:14px 20px 14px 16px;
			font-family:"IBM Plex Sans JP", sans-serif;
			font-weight:600;
			font-size:14px;
			background:url('../images/search_lists/select_arrow.png') center right 6px / 20px no-repeat;
			background-color:#ffffff;
			border:1px solid #cccfd1;
			border-radius:4px;
			transition:0.3s;

			&:hover{
				border-color:#c50018;
			}
		}
		label{
			display:flex;
			align-items:flex-start;
			gap:8px;
			font-family:"IBM Plex Sans JP", sans-serif;
			font-weight:500;
			font-size:14px;
			line-height:20px;
			cursor:pointer;

			input{
				position:relative;
				width:20px;
				height:20px;
				margin:0;
				background-color:#ffffff;
				border:1px solid #cccfd1;
				border-radius:4px;

				&:checked{
					background-color:#c50018;

					&:before{
						content:'';
						position:absolute;
						top:3.5px;
						left:50%;
						transform:translateX(-50%) rotate(45deg);
						width:4px;
						height:7px;
						border-bottom:2px solid #ffffff;
						border-right:2px solid #ffffff;
					}
				}
			}
			span{
				padding-top:3px;
			}
		}
		.select{
			margin-bottom:12px;

			&:last-child{
				margin:0;
			}
		}
		.between{
			display:flex;
			align-items:center;
			gap:8px;

			select{
				width:100%;
			}
		}
		.checkbox{
			display:grid;
			grid-template-columns:repeat(2, 1fr);
			gap:12px;
		}
	}
}
.terms_fixed{
	position:sticky;
	bottom:0;
	padding:24px 20px 20px;
	background-color:#ffffff;
	border:1px solid #cccfd1;
	border-radius:4px;
	box-shadow:0px 0px 6px 2px rgba(0, 0, 0, 0.15);

	.count{
		display:flex;
		justify-content:space-between;
		align-items:center;
		margin-bottom:16px;
		padding:10px 20px;
		background-color:#fbf1f2;
		border-radius:4px;

		.left{
			font-family:"IBM Plex Sans JP", sans-serif;
			font-weight:600;
			font-size:16px;
			line-height:24px;
		}
		.right{
			display:flex;
			align-items:baseline;
			gap:4px;
			font-family:"IBM Plex Sans JP", sans-serif;
			font-weight:600;
			font-size:16px;
			line-height:24px;

			span{
				font-size:32px;
				line-height:48px;
				color:#c50018;
			}
		}
	}
	.search{
		margin-bottom:13px;

		button{
			display:flex;
			justify-content:center;
			align-items:center;
			gap:4px;
			width:100%;
			padding:12px 0;
			font-family:"IBM Plex Sans JP", sans-serif;
			font-weight:600;
			font-size:16px;
			line-height:24px;
			color:#ffffff;
			background-color:#c50018;
			border-radius:24px;
			transition:0.3s;

			&:hover{
				opacity:0.7;
			}
			img{
				width:20px;
				height:20px;
			}
		}
	}
	.cancel{
		font-family:"IBM Plex Sans JP", sans-serif;
		font-weight:600;
		font-size:16px;
		line-height:24px;
		text-align:center;
		text-decoration:underline;
		transition:0.3s;
		
		&:hover{
			color:#c50018;
		}
		span{
			cursor:pointer;
		}
	}
}

.search_body_result{
	
}
.result_container{
	display:grid;
	gap:32px;
}
.result_box{
	padding:32px 40px;
	background-color:#ffffff;
	border:1px solid #cccfd1;
	border-radius:4px;
}
.result_header{
	display:flex;
	justify-content:space-between;
	margin-bottom:18px;
	padding-bottom:20px;
	border-bottom:1px solid #cccfd1;

	.left{
		display:grid;
		grid-template-columns:120px 1fr;
		align-items:center;
		gap:24px;

		.img{
			img{
				width:100%;
			}
		}
		.name{
			h2{
				margin-bottom:4px;
				font-family:"Shippori Mincho B1", serif;
				font-size:24px;
				letter-spacing:-0.48px;
				line-height:36px;
			}
			p{
				font-family:"Shippori Mincho B1", serif;
				font-size:16px;
				letter-spacing:-0.32px;
				line-height:24px;
				opacity:0.7;
			}
		}
	}
	.right{
		.date{
			display:flex;
			align-items:center;
			gap:16px;
			margin-bottom:12px;

			dl{
				display:flex;
				align-items:center;
				gap:8px;
				margin:0;

				dt{
					padding:4px 8px 2px;
					font-family:"IBM Plex Sans JP", sans-serif;
					font-weight:600;
					font-size:12px;
					line-height:18px;
					background-color:#f0f1f4;
					border-radius:2px;
				}
				dd{
					margin:0;
					padding:4px 0 2px;
					font-family:"IBM Plex Sans JP", sans-serif;
					font-weight:500;
					font-size:12px;
					line-height:18px;
				}
			}
		}
		.favorite{
			display:flex;
			justify-content:flex-end;

			button{
				display:flex;
				align-items:center;
				gap:4px;
				padding:5.5px 12px 5.5px 8px;
				background-color:#ffffff;
				border:1px solid #cccfd1;
				border-radius:24px;
				transition:0.3s;

				&:hover{
					border-color:#c50018;
				}
				&.active{
					border-color:#c50018;
				}
				img{
					width:16px;
				}
			}
		}
	}
}

.result_body{
	display:grid;
	/* grid-template-columns:50% 45.2385%; */
	grid-template-columns:420px minmax(0, 1fr);  /* minmax(0,…): see .search_body_container */
	gap:40px;
	margin-bottom:16px;

	.left{
		.gallery{
			margin-bottom:24px;
		}
		.view{
			button{
				display:flex;
				justify-content:center;
				align-items:center;
				gap:8px;
				width:100%;
				padding:14px 0;
				font-family:"IBM Plex Sans JP", sans-serif;
				font-weight:500;
				font-size:14px;
				line-height:18px;
				color:#ffffff;
				background:url('../images/search_lists/white_circle_black_arrow.png') center right 12px / 24px no-repeat;
				background-color:#32373e;
				border-radius:24px;
				transition:0.3s;

				&:hover{
					opacity:0.7;
				}
				img{
					width:20px;
				}
			}
		}
	}
	.right{
		.price{
			margin-bottom:28px;

			.main{
				display:flex;
				align-items:baseline;
				gap:5px;
				margin-bottom:4px;
				font-family:"IBM Plex Sans JP", sans-serif;
				font-weight:500;
				font-size:16px;
				line-height:24px;
				
				span{
					font-size:32px;
					line-height:48px;
					color:#c50018;
				}
			}
			.sub{
				display:flex;
				align-items:center;
				gap:16px;

				dl{
					display:flex;
					align-items:center;
					gap:8px;
					margin:0;

					dt{
						position:relative;
						padding-right:8px;
						font-family:"IBM Plex Sans JP", sans-serif;
						font-weight:600;
						font-size:14px;
						line-height:21px;
						
						&:after{
							content:'';
							position:absolute;
							top:50%;
							right:-1px;
							transform:translateY(-50%);
							width:1px;
							height:14px;
							background-color:#cccfd1;
						}
					}
					dd{
						margin:0;
						font-family:"IBM Plex Sans JP", sans-serif;
						font-weight:500;
						font-size:14px;
						line-height:21px;

						span{
							color:#c50018;
						}
					}
				}
			}
		}
		.content{
			margin-bottom:20px;

			dl{
				display:grid;
				grid-template-columns:100px 1fr;
				gap:20px;
				margin:0;
				margin-bottom:20px;
				border-bottom:1px solid #cccfd1;

				dt{
					position:relative;
					padding-bottom:6px;
					font-family:"IBM Plex Sans JP", sans-serif;
					font-weight:600;
					font-size:14px;
					line-height:20px;

					&:after{
						content:'';
						position:absolute;
						bottom:-1px;
						left:0;
						width:100%;
						height:2px;
						background-color:#c50018;
					}
				}
				dd{
					margin:0;
					padding-bottom:6px;
					font-family:"IBM Plex Sans JP", sans-serif;
					font-weight:500;
					font-size:14px;
					line-height:20px;
				}
			}
		}
		.point{
			p{
				margin-bottom:12px;
				font-family:"IBM Plex Sans JP", sans-serif;
				font-weight:600;
				font-size:14px;
				line-height:21px;
			}
			ul{
				display:flex;
				flex-wrap:wrap;
				gap:8px 4px;

				li{
					padding:4px 12px 2px;
					font-family:"IBM Plex Sans JP", sans-serif;
					font-weight:500;
					font-size:12px;
					line-height:21px;
					border:1px solid #cccfd1;
					border-radius:24px;
				}
			}
		}
	}
}

.gallery_slider{
	.slider_img{
		position:relative;
		border-radius:4px;
		overflow:hidden;
		cursor:pointer;
		
		img{
			width:100%;
		}
		.title{
			display:flex;
			align-items:flex-end;
			position:absolute;
			bottom:0;
			left:0;
			width:100%;
			height:80px;
			padding:0 0 8px 12px;
			font-family:"IBM Plex Sans JP", sans-serif;
			font-weight:500;
			font-size:12px;
			line-height:18px;
			color:#ffffff;
			background:linear-gradient(to bottom, transparent, rgba(0,0,0,0.8));
		}
		.zoom{
			position:absolute;
			bottom:11px;
			right:12px;
			width:32px;
			height:32px;
			background:url('../images/search_lists/zoom_icon.png') center / cover no-repeat;
		}
	}
}
.gallery_thumbnail{
	display:grid;
	grid-template-columns:16px 1fr 16px;
	gap:8px;
	margin-top:12px;
	background-color:#646974;
	border-radius:2px;
	overflow:hidden;

	.thumbnail_img{
		margin:8px 4px;
		background-color:#ffffff;
		border-radius:2px;
		cursor:pointer;
		transition:0.3s;

		&:hover{
			opacity:0.7;
		}
		img{
			width:100%;
		}
	}
	.prev_arrow{
		transform:scale(-1, 1);
		background:url('../images/search_lists/white_arrow.png') center / 8px no-repeat;
	}
	.next_arrow{
		background:url('../images/search_lists/white_arrow.png') center / 8px no-repeat;
	}
	.slide_arrow{
		background-color:#32373e;
		cursor:pointer;
		transition:0.3s;

		&:hover{
			opacity:0.7;
		}
	}
	.slick-current{
		position:relative;

		&:before{
			content:'';
			position:absolute;
			top:-4px;
			right:-4px;
			bottom:-4px;
			left:-4px;
			border:1px solid #ffffff;
			border-radius:2px;
		}
	}
}
.pswp__custom-caption{
	position:absolute;
    bottom:15px;
    left:20px;
    color:#ffffff;
    font-size:16px;
	text-shadow:1px 1px 3px #4f4f4f;
}

.result_footer{
	.headline{
		display:flex;
		align-items:center;
		gap:12px;
		margin-bottom:20px;
		padding-bottom:16px;
		border-bottom:1px solid #cccfd1;
		
		h2{
			position:relative;
			padding-left:16px;
			font-family:"Shippori Mincho B1", serif;
            font-size:20px;
			font-weight:700;
            line-height:29px;

			&:before{
				content:'';
				position:absolute;
				top:50%;
				left:0;
				transform:translateY(-50%);
				width:4px;
				height:20px;
				background-color:#c50018;
			}
		}
		p{
			font-family:"Jost", sans-serif;
			font-weight:700;
            font-size:12px;
			color:#b5b7ba;
		}
	}
	.container{
		display:grid;
		grid-template-columns:repeat(3, 1fr);
		gap:12px;
		margin-bottom:32px;

		.box{
			display:grid;
			grid-template-columns:36px 1fr;
			align-items:center;
			gap:12px;
			padding:8px;
			background-color:#f0f1f4;
			border-radius:4px;

			.img{
				img{
					width:100%;
				}
			}
			p{
				font-family:"IBM Plex Sans JP", sans-serif;
				font-weight:600;
				font-size:14px;
				line-height:20px;
			}
		}
	}
	.link{
		display:grid;
		grid-template-columns:repeat(2, 1fr);
		gap:20px;

		button{
			padding:21px 0 19px;
			font-family:"IBM Plex Sans JP", sans-serif;
			font-weight:600;
			font-size:16px;
			line-height:24px;
			text-align:center;
			border:1px solid #cccfd1;
			border-radius:32px;
			transition:0.3s;
			
			&:first-child{
				color:#ffffff;
				background:url('../images/search_lists/white_circle_red_arrow.png') center right 20px / 24px no-repeat;
				background-color:#c50018;

				&:hover{
					opacity:0.7;
				}
			}
			&:last-child{
				color:#32373e;
				background:url('../images/search_lists/red_circle_white_arrow.png') center right 20px / 24px no-repeat;
				background-color:#ffffff;

				&:hover{
					color:#c50018;
					border-color:#c50018;
				}
			}
		}
	}
}

.result_paginate{
	margin-top:48px;

	ul{
		display:flex;
		justify-content:center;
		align-items:center;
		gap:24px;

		li{
			a{
				font-family:"IBM Plex Sans JP", sans-serif;
				font-weight:600;
				font-size:16px;
				line-height:16px;
				color:#32373e;

				&.active{
					color:#c50018;
					text-decoration:underline;
				}
			}
			&.prev{
				a{
					display:block;
					transform:scale(-1, 1);
					width:60px;
					height:48px;
					background:url('../images/search_lists/white_arrow.png') center / 12px no-repeat;
					background-color:#32373e;
					border-radius:24px;
				}
			}
			&.next{
				a{
					display:block;
					width:60px;
					height:48px;
					background:url('../images/search_lists/white_arrow.png') center / 12px no-repeat;
					background-color:#32373e;
					border-radius:24px;
				}
			}
			&.dot{
				font-family:"IBM Plex Sans JP", sans-serif;
				font-weight:600;
				font-size:16px;
				line-height:16px;
				color:#32373e;
			}
		}
	}
}

.search_modal{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	padding:85px 16px;
	background:rgba(0, 0, 0, 0.75);
	opacity:0;
	visibility:hidden;
	transition:0.3s;
	z-index:2000;

	&.active{
		opacity:1;
		visibility:visible;
	}
}
.search_modal_window{
	display:none;
	position:relative;
	max-width:1120px;
	height:100%;
	margin:0 auto;
	padding:48px 38px 48px 80px;
	background-color:#ffffff;
	border-radius:4px;

	&.active{
		display:flex;
		flex-direction:column;
	}
}
.search_modal_close{
	position:absolute;
	top:-40px;
	right:0;
	width:24px;
	height:24px;
	cursor:pointer;

	img{
		width:100%;
	}
}
.search_modal_haedline{
	display:flex;
	align-items:center;
	gap:8px;
	margin-bottom:45px;
	
	img{
		width:32px;
	}
	h2{
		font-family:"IBM Plex Sans JP", sans-serif;
		font-weight:600;
		font-size:24px;
		line-height:36px;
	}
}
.search_modal_toggle{
	display:grid;
	grid-template-columns:repeat(2, 1fr);
	gap:8px;
	margin-bottom:32px;

	.toggle{
		display:flex;
		justify-content:center;
		align-items:center;
		gap:8px;
		padding-bottom:7px;
		border-bottom:4px solid #32373e;
		cursor:pointer;
		opacity:0.7;

		img{
			width:24px;

			&.red{
				display:none;
			}
			&.gray{
				display:block;
			}
		}
		span{
			padding-right:24px;
			font-family:"IBM Plex Sans JP", sans-serif;
			font-weight:600;
			font-size:20px;
			line-height:36px;
		}
		&.active{
			border-color:#c50018;
			opacity:1;

			img{
				&.red{
					display:block;
				}
				&.gray{
					display:none;
				}
			}
			span{
				color:#c50018;
				background:url('../images/search_lists/select_arrow.png') center right 0 / 20px no-repeat;
			}
		}
	}
}
.search_modal_body{
	display:none;
	overflow:hidden;

	&.active{
		display:block;
	}
}
.search_modal_allcheck{
	display:flex;
	
	label{
		display:flex;
		align-items:flex-start;
		gap:8px;
		font-family:"IBM Plex Sans JP", sans-serif;
		font-weight:600;
		font-size:16px;
		line-height:24px;
		cursor:pointer;

		input{
			position:relative;
			width:20px;
			height:20px;
			margin:0;
			background-color:#ffffff;
			border:1px solid #cccfd1;
			border-radius:4px;

			&:checked{
				background-color:#c50018;

				&:before{
					content:'';
					position:absolute;
					top:3.5px;
					left:50%;
					transform:translateX(-50%) rotate(45deg);
					width:4px;
					height:7px;
					border-bottom:2px solid #ffffff;
					border-right:2px solid #ffffff;
				}
			}
		}
	}
}
.search_modal_content{
	display:grid;
	gap:29px;
	height:100%;
	padding-right:38px;
	overflow:auto;

	&::-webkit-scrollbar{
		width:4px;
		height:4px;
	}
	&::-webkit-scrollbar-thumb{
		background:#c50018;
		border-radius:2px;
	}
	&::-webkit-scrollbar-track{
		background:#cccfd1;
		border-radius:2px;
	}
}
.search_modal_column{
	.title{
		position:relative;
		margin-bottom:24px;
		padding:0 0 10px 16px;
		font-family:"IBM Plex Sans JP", sans-serif;
		font-weight:600;
		font-size:20px;
		line-height:36px;
		border-bottom:1px solid #cccfd1;


		&:before{
			content:'';
			position:absolute;
			top:6px;
			left:0;
			width:4px;
			height:21px;
			background-color:#c50018;
		}
	}
	.container{
		display:grid;
		grid-template-columns:repeat(4, 1fr);
		gap:16px;

		.arrow_box{
			padding:26px 18px 24px;
			font-family:"IBM Plex Sans JP", sans-serif;
			font-weight:600;
			font-size:16px;
			line-height:24px;
			background:url('../images/search_lists/red_right_arrow.png') center right 16px / 20px no-repeat;
			border:1px solid #cccfd1;
			border-radius:4px;
			cursor:pointer;
			transition:0.3s;

			&:hover{
				color:#c50018;
				border-color:#c50018;
			}
		}
		.check_box{
			label{
				display:flex;
				justify-content:space-between;
				align-items:center;
				padding:23px 24px 18px;
				border:1px solid #cccfd1;
				border-radius:4px;
				cursor:pointer;
				transition:0.3s;

				&:hover{
					color:#c50018;
					border-color:#c50018;
				}
				.check{
					display:flex;
					align-items:flex-start;
					gap:8px;
					font-family:"IBM Plex Sans JP", sans-serif;
					font-weight:600;
					font-size:16px;
					line-height:24px;
					cursor:pointer;
		
					input{
						position:relative;
						width:20px;
						height:20px;
						margin:0;
						background-color:#ffffff;
						border:1px solid #cccfd1;
						border-radius:4px;
		
						&:checked{
							background-color:#c50018;
		
							&:before{
								content:'';
								position:absolute;
								top:3.5px;
								left:50%;
								transform:translateX(-50%) rotate(45deg);
								width:4px;
								height:7px;
								border-bottom:2px solid #ffffff;
								border-right:2px solid #ffffff;
							}
						}
					}
					span{
						padding-top:1px;
					}
				}
				> span{
					font-family:"IBM Plex Sans JP", sans-serif;
					font-weight:600;
					font-size:16px;
					line-height:24px;
				}
			}
		}
	}
}
.search_modal_footer{
	display:grid;
	grid-template-columns:repeat(2, 1fr);
	align-items:center;
	gap:15px;
	margin-top:44px;

	.left{
		display:flex;
		justify-content:space-between;
		align-items:center;
		padding:13px 24px 11px 16px;
		background-color:#f0f1f4;
		border-radius:4px;

		.selected{
			display:flex;
			align-items:center;
			gap:16px;
			position:relative;
			padding-left:18px;
			font-family:"IBM Plex Sans JP", sans-serif;
			font-weight:600;
			font-size:16px;
			line-height:24px;
			
			&:before{
				content:'';
				position:absolute;
				top:50%;
				left:0;
				transform:translateY(-50%);
				width:10px;
				height:10px;
				background-color:#c50018;
				border-radius:50%;
			}
			span{
				color:#6b6f75;
			}
		}
		.change{
			font-family:"IBM Plex Sans JP", sans-serif;
			font-weight:500;
			font-size:16px;
			line-height:20px;
			text-decoration:underline;
			color:#0356cb;
			cursor:pointer;
			transition:0.3s;

			&:hover{
				opacity:0.7;
			}
		}
	}
	.right{
		display:flex;
		align-items:center;
		gap:24px;

		button{
			display:flex;
			justify-content:center;
			align-items:center;
			gap:4px;
			width:100%;
			padding:13px 0 11px;
			font-family:"IBM Plex Sans JP", sans-serif;
			font-weight:600;
			font-size:16px;
			line-height:24px;
			color:#ffffff;
			background-color:#c50018;
			border-radius:24px;
			transition:0.3s;

			&:hover{
				opacity:0.7;
			}
			img{
				width:20px;
				height:20px;
			}
		}
		.cancel{
			font-family:"IBM Plex Sans JP", sans-serif;
			font-weight:600;
			font-size:16px;
			line-height:20px;
			text-decoration:underline;
			white-space:nowrap;
			cursor:pointer;
			transition:0.3s;

			&:hover{
				opacity:0.7;
			}
		}
	}
}
.search_modal_mobile_footer{
	display:none;
}
.search_mobile_nav{
	display:none;
}

.img_modal{
	display:flex;
	justify-content:center;
	align-items:center;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	padding:0 16px;
	background:rgba(0, 0, 0, 0.75);
	opacity:0;
	visibility:hidden;
	transition:0.3s;
	z-index:2000;

	&.active{
		opacity:1;
		visibility:visible;
	}
}
.img_modal_window{
	position:relative;
	width:100%;
	max-width:720px;
	margin:0 auto;
}
.img_modal_header{
	display:flex;
	justify-content:space-between;
	align-items:flex-end;
	margin-bottom:16px;
}
.img_modal_cnt{
	font-family:"IBM Plex Sans JP", sans-serif;
	font-weight:600;
	font-size:14px;
	line-height:20px;
	color:#cccfd1;
}
.img_modal_close{
	width:24px;
	height:24px;
	cursor:pointer;

	img{
		width:100%;
	}
}
.img_modal_content{
	img{
		width:100%;
	}
}
.img_modal_title{
	margin-top:16px;
	font-family:"IBM Plex Sans JP", sans-serif;
	font-weight:600;
	font-size:14px;
	line-height:18px;
	color:#ffffff;
}





/*-------------------- pc-spの間 --------------------*/
/*---------- base > width:1440px ----------*/
@media(max-width:1439px) and (min-width:769px){
    .search_header{
        margin-bottom:2.222vw;
        padding-bottom:2.222vw;
        border-bottom:1px solid #cccfd1;
    }
    .search_header_container{
        display:flex;
        justify-content:space-between;
        align-items:flex-end;
    
        .headline{
            display:flex;
            flex-direction:column;
            align-items:flex-start;
    
            p{
                position:relative;
                margin-bottom:1.667vw;
                padding:0 1.389vw;
                font-family:"Jost", sans-serif;
                font-size:1.111vw;
    
                span{
                    &.left{
                        position:absolute;
                        top:0;
                        left:0;
                        width:1.111vw;
                        height:1.111vw;
                        background-color:#c50018;
                        overflow:hidden;
    
                        &:before{
                            content:'';
                            position:absolute;
                            top:0;
                            left:0;
                            width:2.222vw;
                            height:2.222vw;
                            background-color:#f0f1f4;
                            border-radius:50%;
                        }
                    }
                    &.right{
                        position:absolute;
                        bottom:0;
                        right:0;
                        width:1.111vw;
                        height:1.111vw;
                        background-color:#c50018;
                        overflow:hidden;
    
                        &:before{
                            content:'';
                            position:absolute;
                            bottom:0;
                            right:0;
                            width:2.222vw;
                            height:2.222vw;
                            background-color:#f0f1f4;
                            border-radius:50%;
                        }
                    }
                }
            }
            h1{
                font-family:"Shippori Mincho B1", serif;
                font-size:2.778vw;
                letter-spacing:-0.056vw;
                line-height:3.472vw;
            }
        }
        .mobile_container{
            display:none;
        }
        .terms{
            display:flex;
            align-items:center;
    
            .number{
                margin-right:1.111vw;
                font-family:"IBM Plex Sans JP", sans-serif;
                font-weight:600;
                font-size:1.111vw;
    
                span{
                    padding:0 0.278vw 0 0.833vw;
                    font-size:1.667vw;
                    color:#c50018;
                }
            }
            .view{
                margin-right:3.333vw;
                font-family:"IBM Plex Sans JP", sans-serif;
                font-weight:500;
                font-size:1.111vw;
            }
            .sort{
                display:flex;
                align-items:center;
                gap:1.111vw;
                font-family:"IBM Plex Sans JP", sans-serif;
                font-weight:600;
                font-size:1.111vw;
    
                select{
                    position:relative;
                    padding:0.556vw 4.236vw 0.556vw 1.111vw;
                    color:#32373e;
                    background:url('../images/search_lists/select_arrow.png') center right 0.417vw / 1.389vw no-repeat;
                    background-color:#ffffff;
                    border:1px solid #cccfd1;
                    border-radius:0.278vw;
                }
            }
        }
    }
    
    .search_body{
    
    }
    .search_body_container{
        display:grid;
        grid-template-columns:22.222vw minmax(0, 1fr);
        gap:2.778vw;
    }
    .search_body_terms{
        /* display:flex;
        flex-direction:column;
        justify-content:space-between;
        position:relative; */
    }
    .terms_container{
        /* display:grid;
        gap:1.667vw; */
        position:sticky;
        top:0;
        height:100vh;
    }
    .terms_scroll_area{
        height:100%;
        overflow:auto;
    
        /* &::-webkit-scrollbar{
            width:0.278vw;
            height:0.278vw;
        }
        &::-webkit-scrollbar-thumb{
            background:#c50018;
            border-radius:0.139vw;
        }
        &::-webkit-scrollbar-track{
            background:#cccfd1;
            border-radius:0.139vw;
        } */
    }
    .terms_box{
        position:relative;
        margin-bottom:1.667vw;
        background-color:#ffffff;
        border:1px solid #cccfd1;
        border-radius:0.278vw;
        overflow:hidden;
    
        h2{
            padding:1.111vw 0;
            font-family:"IBM Plex Sans JP", sans-serif;
            font-weight:600;
            font-size:1.111vw;
            line-height:1.528vw;
            text-align:center;
            color:#ffffff;
            background-color:#6b6f75;
        }
        .content{
            max-height:20.833vw;
            padding:1.389vw;
    
            &.active{
                max-height:100%;
            }
            .box{
                margin-bottom:0.903vw;
                padding-bottom:0.833vw;
                border-bottom:1px solid #cccfd1;
    
                &:last-child{
                    margin:0;
                    padding:0;
                    border:none;
                }
                h3{
                    position:relative;
                    margin-bottom:0.278vw;
                    padding-left:1.111vw;
                    font-family:"IBM Plex Sans JP", sans-serif;
                    font-weight:600;
                    font-size:0.972vw;
                    line-height:1.389vw;
    
                    &:before{
                        content:'';
                        position:absolute;
                        top:50%;
                        left:0;
                        transform:translateY(-50%);
                        width:0.556vw;
                        height:0.556vw;
                        background-color:#c50018;
                        border-radius:50%;
                    }
                }
                ul{
                    position:relative;
    
                    &:before{
                        content:'';
                        position:absolute;
                        top:0;
                        left:0.243vw;
                        width:0.069vw;
                        height:100%;
                        background-color:#cccfd1;
                    }
                    li{
                        position:relative;
                        padding-left:1.667vw;
                        font-family:"IBM Plex Sans JP", sans-serif;
                        font-weight:500;
                        font-size:0.972vw;
                        line-height:1.389vw;
    
                        &:before{
                            content:'';
                            position:absolute;
                            top:50%;
                            left:0.243vw;
                            transform:translateY(-50%);
                            width:0.868vw;
                            height:0.069vw;
                            background-color:#cccfd1;
                        }
                        &:last-child{
                            &:after{
                                content:'';
                                position:absolute;
                                bottom:0;
                                left:0.208vw;
                                width:0.139vw;
                                height:calc(50% - 0.035vw);
                                background-color:#ffffff;
                            }
                        }
                    }
                }
            }
        }
        .more{
            position:absolute;
            bottom:0;
            width:100%;
            padding:4.861vw 0 1.389vw;
            text-align:center;
            background:linear-gradient(transparent, #ffffff 50%);
            
            &.active{
                position:relative;
                padding-top:0.347vw;
            }
            span{
                font-family:"IBM Plex Sans JP", sans-serif;
                font-weight:600;
                font-size:0.972vw;
                line-height:1.389vw;
                text-decoration:underline;
                cursor:pointer;
                transition:0.3s;
    
                &:hover{
                    color:#c50018;
                }
            }
        }
        .area{
            display:grid;
            gap:1.111vw;
            padding:1.667vw 1.389vw;
    
            button{
                display:flex;
                justify-content:center;
                align-items:center;
                gap:0.556vw;
                padding:0.903vw 0;
                font-family:"IBM Plex Sans JP", sans-serif;
                font-weight:600;
                font-size:0.972vw;
                line-height:1.389vw;
                background:url('../images/search_lists/terms_plus.png') center right 0.972vw / 1.389vw no-repeat;
                border:1px solid #cccfd1;
                border-radius:1.667vw;
                transition:0.3s;
    
                &:hover{
                    color:#c50018;
                    border-color:#c50018;
                }
                img{
                    width:1.389vw;
                }
            }
        }
        .form{
            display:grid;
            gap:2.083vw;
            padding:1.389vw;
    
            h3{
                position:relative;
                margin-bottom:0.833vw;
                padding-left:1.111vw;
                font-family:"IBM Plex Sans JP", sans-serif;
                font-weight:600;
                font-size:0.972vw;
                line-height:1.389vw;
    
                &:before{
                    content:'';
                    position:absolute;
                    top:50%;
                    left:0;
                    transform:translateY(-50%);
                    width:0.556vw;
                    height:0.556vw;
                    background-color:#c50018;
                    border-radius:50%;
                }
            }
            select{
                position:relative;
                width:100%;
                padding:0.972vw 1.389vw 0.972vw 1.111vw;
                font-family:"IBM Plex Sans JP", sans-serif;
                font-weight:600;
                font-size:0.972vw;
                background:url('../images/search_lists/select_arrow.png') center right 0.417vw / 1.389vw no-repeat;
                background-color:#ffffff;
                border:1px solid #cccfd1;
                border-radius:0.278vw;
                transition:0.3s;
    
                &:hover{
                    border-color:#c50018;
                }
            }
            label{
                display:flex;
                align-items:flex-start;
                gap:0.556vw;
                font-family:"IBM Plex Sans JP", sans-serif;
                font-weight:500;
                font-size:0.972vw;
                line-height:1.389vw;
                cursor:pointer;
    
                input{
                    position:relative;
                    width:1.389vw;
                    height:1.389vw;
                    margin:0;
                    background-color:#ffffff;
                    border:1px solid #cccfd1;
                    border-radius:0.278vw;
    
                    &:checked{
                        background-color:#c50018;
    
                        &:before{
                            content:'';
                            position:absolute;
                            top:0.243vw;
                            left:50%;
                            transform:translateX(-50%) rotate(45deg);
                            width:0.278vw;
                            height:0.486vw;
                            border-bottom:2px solid #ffffff;
                            border-right:2px solid #ffffff;
                        }
                    }
                }
                span{
                    padding-top:0.208vw;
                }
            }
            .select{
                margin-bottom:0.833vw;
    
                &:last-child{
                    margin:0;
                }
            }
            .between{
                display:flex;
                align-items:center;
                gap:0.556vw;
    
                select{
                    width:100%;
                }
            }
            .checkbox{
                display:grid;
                grid-template-columns:repeat(2, 1fr);
                gap:0.833vw;
            }
        }
    }
    .terms_fixed{
        position:sticky;
        bottom:0;
        padding:1.667vw 1.389vw 1.389vw;
        background-color:#ffffff;
        border:1px solid #cccfd1;
        border-radius:0.278vw;
        box-shadow:0px 0px 6px 2px rgba(0, 0, 0, 0.15);
    
        .count{
            display:flex;
            justify-content:space-between;
            align-items:center;
            margin-bottom:1.111vw;
            padding:0.694vw 1.389vw;
            background-color:#fbf1f2;
            border-radius:0.278vw;
    
            .left{
                font-family:"IBM Plex Sans JP", sans-serif;
                font-weight:600;
                font-size:1.111vw;
                line-height:1.667vw;
            }
            .right{
                display:flex;
                align-items:baseline;
                gap:0.278vw;
                font-family:"IBM Plex Sans JP", sans-serif;
                font-weight:600;
                font-size:1.111vw;
                line-height:1.667vw;
    
                span{
                    font-size:2.222vw;
                    line-height:3.333vw;
                    color:#c50018;
                }
            }
        }
        .search{
            margin-bottom:0.903vw;
    
            button{
                display:flex;
                justify-content:center;
                align-items:center;
                gap:0.278vw;
                width:100%;
                padding:0.833vw 0;
                font-family:"IBM Plex Sans JP", sans-serif;
                font-weight:600;
                font-size:1.111vw;
                line-height:1.667vw;
                color:#ffffff;
                background-color:#c50018;
                border-radius:1.667vw;
                transition:0.3s;
    
                &:hover{
                    opacity:0.7;
                }
                img{
                    width:1.389vw;
                    height:1.389vw;
                }
            }
        }
        .cancel{
            font-family:"IBM Plex Sans JP", sans-serif;
            font-weight:600;
            font-size:1.111vw;
            line-height:1.667vw;
            text-align:center;
            text-decoration:underline;
            transition:0.3s;
            
            &:hover{
                color:#c50018;
            }
            span{
                cursor:pointer;
            }
        }
    }
    
    .search_body_result{
        
    }
    .result_container{
        display:grid;
        gap:2.222vw;
    }
    .result_box{
        padding:2.222vw 2.778vw;
        background-color:#ffffff;
        border:1px solid #cccfd1;
        border-radius:0.278vw;
    }
    .result_header{
        display:flex;
        justify-content:space-between;
        margin-bottom:1.25vw;
        padding-bottom:1.389vw;
        border-bottom:1px solid #cccfd1;
    
        .left{
            display:grid;
            grid-template-columns:8.333vw 1fr;
            align-items:center;
            gap:1.667vw;
    
            .img{
                img{
                    width:100%;
                }
            }
            .name{
                h2{
                    margin-bottom:0.278vw;
                    font-family:"Shippori Mincho B1", serif;
                    font-size:1.667vw;
                    letter-spacing:-0.033vw;
                    line-height:2.5vw;
                }
                p{
                    font-family:"Shippori Mincho B1", serif;
                    font-size:1.111vw;
                    letter-spacing:-0.022vw;
                    line-height:1.667vw;
                    opacity:0.7;
                }
            }
        }
        .right{
            .date{
                display:flex;
                align-items:center;
                gap:1.111vw;
                margin-bottom:0.833vw;
    
                dl{
                    display:flex;
                    align-items:center;
                    gap:0.556vw;
                    margin:0;
    
                    dt{
                        padding:0.278vw 0.556vw 0.139vw;
                        font-family:"IBM Plex Sans JP", sans-serif;
                        font-weight:600;
                        font-size:0.833vw;
                        line-height:1.25vw;
                        background-color:#f0f1f4;
                        border-radius:0.139vw;
                    }
                    dd{
                        margin:0;
                        padding:0.278vw 0 0.139vw;
                        font-family:"IBM Plex Sans JP", sans-serif;
                        font-weight:500;
                        font-size:0.833vw;
                        line-height:1.25vw;
                    }
                }
            }
            .favorite{
                display:flex;
                justify-content:flex-end;
    
                button{
                    display:flex;
                    align-items:center;
                    gap:0.278vw;
                    padding:0.382vw 0.833vw 0.382vw 0.556vw;
                    background-color:#ffffff;
                    border:1px solid #cccfd1;
                    border-radius:1.667vw;
                    transition:0.3s;
    
                    &:hover{
                        border-color:#c50018;
                    }
                    &.active{
                        border-color:#c50018;
                    }
                    img{
                        width:1.111vw;
                    }
                }
            }
        }
    }
    
    .result_body{
        display:grid;
        /* grid-template-columns:50% 45.2385%; */
        grid-template-columns:29.167vw minmax(0, 1fr);
        gap:2.778vw;
        margin-bottom:1.111vw;
    
        .left{
            .gallery{
                margin-bottom:1.667vw;
            }
            .view{
                button{
                    display:flex;
                    justify-content:center;
                    align-items:center;
                    gap:0.556vw;
                    width:100%;
                    padding:0.972vw 0;
                    font-family:"IBM Plex Sans JP", sans-serif;
                    font-weight:500;
                    font-size:0.972vw;
                    line-height:1.25vw;
                    color:#ffffff;
                    background:url('../images/search_lists/white_circle_black_arrow.png') center right 0.833vw / 1.667vw no-repeat;
                    background-color:#32373e;
                    border-radius:1.667vw;
                    transition:0.3s;
    
                    &:hover{
                        opacity:0.7;
                    }
                    img{
                        width:1.389vw;
                    }
                }
            }
        }
        .right{
            .price{
                margin-bottom:1.944vw;
    
                .main{
                    display:flex;
                    align-items:baseline;
                    gap:0.347vw;
                    margin-bottom:0.278vw;
                    font-family:"IBM Plex Sans JP", sans-serif;
                    font-weight:500;
                    font-size:1.111vw;
                    line-height:1.667vw;
                    
                    span{
                        font-size:2.222vw;
                        line-height:3.333vw;
                        color:#c50018;
                    }
                }
                .sub{
                    display:flex;
                    align-items:center;
                    gap:1.111vw;
    
                    dl{
                        display:flex;
                        align-items:center;
                        gap:0.556vw;
                        margin:0;
    
                        dt{
                            position:relative;
                            padding-right:0.556vw;
                            font-family:"IBM Plex Sans JP", sans-serif;
                            font-weight:600;
                            font-size:0.972vw;
                            line-height:1.458vw;
                            
                            &:after{
                                content:'';
                                position:absolute;
                                top:50%;
                                right:-0.069vw;
                                transform:translateY(-50%);
                                width:0.069vw;
                                height:0.972vw;
                                background-color:#cccfd1;
                            }
                        }
                        dd{
                            margin:0;
                            font-family:"IBM Plex Sans JP", sans-serif;
                            font-weight:500;
                            font-size:0.972vw;
                            line-height:1.458vw;
    
                            span{
                                color:#c50018;
                            }
                        }
                    }
                }
            }
            .content{
                margin-bottom:1.389vw;
    
                dl{
                    display:grid;
                    grid-template-columns:6.944vw 1fr;
                    gap:1.389vw;
                    margin:0;
                    margin-bottom:1.389vw;
                    border-bottom:1px solid #cccfd1;
    
                    dt{
                        position:relative;
                        padding-bottom:0.417vw;
                        font-family:"IBM Plex Sans JP", sans-serif;
                        font-weight:600;
                        font-size:0.972vw;
                        line-height:1.389vw;
    
                        &:after{
                            content:'';
                            position:absolute;
                            bottom:-0.069vw;
                            left:0;
                            width:100%;
                            height:0.139vw;
                            background-color:#c50018;
                        }
                    }
                    dd{
                        margin:0;
                        padding-bottom:0.417vw;
                        font-family:"IBM Plex Sans JP", sans-serif;
                        font-weight:500;
                        font-size:0.972vw;
                        line-height:1.389vw;
                    }
                }
            }
            .point{
                p{
                    margin-bottom:0.833vw;
                    font-family:"IBM Plex Sans JP", sans-serif;
                    font-weight:600;
                    font-size:0.972vw;
                    line-height:1.458vw;
                }
                ul{
                    display:flex;
                    flex-wrap:wrap;
                    gap:0.556vw 0.278vw;
    
                    li{
                        padding:0.278vw 0.833vw 0.139vw;
                        font-family:"IBM Plex Sans JP", sans-serif;
                        font-weight:500;
                        font-size:0.833vw;
                        line-height:1.458vw;
                        border:1px solid #cccfd1;
                        border-radius:1.667vw;
                    }
                }
            }
        }
    }
    
    .gallery_slider{
        .slider_img{
            position:relative;
            border-radius:0.278vw;
            overflow:hidden;
            cursor:pointer;
            
            img{
                width:100%;
            }
            .title{
                display:flex;
                align-items:flex-end;
                position:absolute;
                bottom:0;
                left:0;
                width:100%;
                height:5.556vw;
                padding:0 0 0.556vw 0.833vw;
                font-family:"IBM Plex Sans JP", sans-serif;
                font-weight:500;
                font-size:0.833vw;
                line-height:1.25vw;
                color:#ffffff;
                background:linear-gradient(to bottom, transparent, rgba(0,0,0,0.8));
            }
            .zoom{
                position:absolute;
                bottom:0.764vw;
                right:0.833vw;
                width:2.222vw;
                height:2.222vw;
                background:url('../images/search_lists/zoom_icon.png') center / cover no-repeat;
            }
        }
    }
    .gallery_thumbnail{
        display:grid;
        grid-template-columns:1.111vw 1fr 1.111vw;
        gap:0.556vw;
        margin-top:0.833vw;
        background-color:#646974;
        border-radius:0.139vw;
        overflow:hidden;
    
        .thumbnail_img{
            margin:0.556vw 0.278vw;
            background-color:#ffffff;
            border-radius:0.139vw;
            cursor:pointer;
            transition:0.3s;
    
            &:hover{
                opacity:0.7;
            }
            img{
                width:100%;
            }
        }
        .prev_arrow{
            transform:scale(-1, 1);
            background:url('../images/search_lists/white_arrow.png') center / 0.556vw no-repeat;
        }
        .next_arrow{
            background:url('../images/search_lists/white_arrow.png') center / 0.556vw no-repeat;
        }
        .slide_arrow{
            background-color:#32373e;
            cursor:pointer;
            transition:0.3s;
    
            &:hover{
                opacity:0.7;
            }
        }
        .slick-current{
            position:relative;
    
            &:before{
                content:'';
                position:absolute;
                top:-0.278vw;
                right:-0.278vw;
                bottom:-0.278vw;
                left:-0.278vw;
                border:1px solid #ffffff;
                border-radius:0.139vw;
            }
        }
    }
    
    .result_footer{
        .headline{
            display:flex;
            align-items:center;
            gap:0.833vw;
            margin-bottom:1.389vw;
            padding-bottom:1.111vw;
            border-bottom:1px solid #cccfd1;
            
            h2{
                position:relative;
                padding-left:1.111vw;
                font-family:"Shippori Mincho B1", serif;
                font-size:1.389vw;
                font-weight:700;
                line-height:2.014vw;
    
                &:before{
                    content:'';
                    position:absolute;
                    top:50%;
                    left:0;
                    transform:translateY(-50%);
                    width:0.278vw;
                    height:1.389vw;
                    background-color:#c50018;
                }
            }
            p{
                font-family:"Jost", sans-serif;
                font-weight:700;
                font-size:0.833vw;
                color:#b5b7ba;
            }
        }
        .container{
            display:grid;
            grid-template-columns:repeat(3, 1fr);
            gap:0.833vw;
            margin-bottom:2.222vw;
    
            .box{
                display:grid;
                grid-template-columns:2.5vw 1fr;
                align-items:center;
                gap:0.833vw;
                padding:0.556vw;
                background-color:#f0f1f4;
                border-radius:0.278vw;
    
                .img{
                    img{
                        width:100%;
                    }
                }
                p{
                    font-family:"IBM Plex Sans JP", sans-serif;
                    font-weight:600;
                    font-size:0.972vw;
                    line-height:1.389vw;
                }
            }
        }
        .link{
            display:grid;
            grid-template-columns:repeat(2, 1fr);
            gap:1.389vw;
    
            button{
                padding:1.458vw 0 1.319vw;
                font-family:"IBM Plex Sans JP", sans-serif;
                font-weight:600;
                font-size:1.111vw;
                line-height:1.667vw;
                text-align:center;
                border:1px solid #cccfd1;
                border-radius:2.222vw;
                transition:0.3s;
                
                &:first-child{
                    color:#ffffff;
                    background:url('../images/search_lists/white_circle_red_arrow.png') center right 1.389vw / 1.667vw no-repeat;
                    background-color:#c50018;
    
                    &:hover{
                        opacity:0.7;
                    }
                }
                &:last-child{
                    color:#32373e;
                    background:url('../images/search_lists/red_circle_white_arrow.png') center right 1.389vw / 1.667vw no-repeat;
                    background-color:#ffffff;
    
                    &:hover{
                        color:#c50018;
                        border-color:#c50018;
                    }
                }
            }
        }
    }
    
    .result_paginate{
        margin-top:3.333vw;
    
        ul{
            display:flex;
            justify-content:center;
            align-items:center;
            gap:1.667vw;
    
            li{
                a{
                    font-family:"IBM Plex Sans JP", sans-serif;
                    font-weight:600;
                    font-size:1.111vw;
                    line-height:1.111vw;
                    color:#32373e;
    
                    &.active{
                        color:#c50018;
                        text-decoration:underline;
                    }
                }
                &.prev{
                    a{
                        display:block;
                        transform:scale(-1, 1);
                        width:4.167vw;
                        height:3.333vw;
                        background:url('../images/search_lists/white_arrow.png') center / 0.833vw no-repeat;
                        background-color:#32373e;
                        border-radius:1.667vw;
                    }
                }
                &.next{
                    a{
                        display:block;
                        width:4.167vw;
                        height:3.333vw;
                        background:url('../images/search_lists/white_arrow.png') center / 0.833vw no-repeat;
                        background-color:#32373e;
                        border-radius:1.667vw;
                    }
                }
                &.dot{
                    font-family:"IBM Plex Sans JP", sans-serif;
                    font-weight:600;
                    font-size:1.111vw;
                    line-height:1.111vw;
                    color:#32373e;
                }
            }
        }
    }
    
    .search_modal{
        position:fixed;
        top:0;
        left:0;
        width:100%;
        height:100%;
        padding:5.903vw 1.111vw;
        background:rgba(0, 0, 0, 0.75);
        opacity:0;
        visibility:hidden;
        transition:0.3s;
        z-index:2000;
    
        &.active{
            opacity:1;
            visibility:visible;
        }
    }
    .search_modal_window{
        display:none;
        position:relative;
        /* max-width:77.778vw; */
        height:100%;
        margin:0 auto;
        padding:3.333vw 2.639vw 3.333vw 5.556vw;
        background-color:#ffffff;
        border-radius:0.278vw;
    
        &.active{
            display:flex;
            flex-direction:column;
        }
    }
    .search_modal_close{
        position:absolute;
        top:-2.778vw;
        right:0;
        width:1.667vw;
        height:1.667vw;
        cursor:pointer;
    
        img{
            width:100%;
        }
    }
    .search_modal_haedline{
        display:flex;
        align-items:center;
        gap:0.556vw;
        margin-bottom:3.125vw;
        
        img{
            width:2.222vw;
        }
        h2{
            font-family:"IBM Plex Sans JP", sans-serif;
            font-weight:600;
            font-size:1.667vw;
            line-height:2.5vw;
        }
    }
    .search_modal_toggle{
        display:grid;
        grid-template-columns:repeat(2, 1fr);
        gap:0.556vw;
        margin-bottom:2.222vw;
    
        .toggle{
            display:flex;
            justify-content:center;
            align-items:center;
            gap:0.556vw;
            padding-bottom:0.486vw;
            border-bottom:4px solid #32373e;
            cursor:pointer;
            opacity:0.7;
    
            img{
                width:1.667vw;
    
                &.red{
                    display:none;
                }
                &.gray{
                    display:block;
                }
            }
            span{
                padding-right:1.667vw;
                font-family:"IBM Plex Sans JP", sans-serif;
                font-weight:600;
                font-size:1.389vw;
                line-height:2.5vw;
            }
            &.active{
                border-color:#c50018;
                opacity:1;
    
                img{
                    &.red{
                        display:block;
                    }
                    &.gray{
                        display:none;
                    }
                }
                span{
                    color:#c50018;
                    background:url('../images/search_lists/select_arrow.png') center right 0 / 1.389vw no-repeat;
                }
            }
        }
    }
    .search_modal_body{
        display:none;
        overflow:hidden;
    
        &.active{
            display:block;
        }
    }
    .search_modal_allcheck{
        display:flex;
        
        label{
            display:flex;
            align-items:flex-start;
            gap:0.556vw;
            font-family:"IBM Plex Sans JP", sans-serif;
            font-weight:600;
            font-size:1.111vw;
            line-height:1.667vw;
            cursor:pointer;
    
            input{
                position:relative;
                width:1.389vw;
                height:1.389vw;
                margin:0;
                background-color:#ffffff;
                border:1px solid #cccfd1;
                border-radius:0.278vw;
    
                &:checked{
                    background-color:#c50018;
    
                    &:before{
                        content:'';
                        position:absolute;
                        top:0.243vw;
                        left:50%;
                        transform:translateX(-50%) rotate(45deg);
                        width:0.278vw;
                        height:0.486vw;
                        border-bottom:2px solid #ffffff;
                        border-right:2px solid #ffffff;
                    }
                }
            }
        }
    }
    .search_modal_content{
        display:grid;
        gap:2.014vw;
        height:100%;
        padding-right:2.639vw;
        overflow:auto;
    
        &::-webkit-scrollbar{
            width:0.278vw;
            height:0.278vw;
        }
        &::-webkit-scrollbar-thumb{
            background:#c50018;
            border-radius:0.139vw;
        }
        &::-webkit-scrollbar-track{
            background:#cccfd1;
            border-radius:0.139vw;
        }
    }
    .search_modal_column{
        .title{
            position:relative;
            margin-bottom:1.667vw;
            padding:0 0 0.694vw 1.111vw;
            font-family:"IBM Plex Sans JP", sans-serif;
            font-weight:600;
            font-size:1.389vw;
            line-height:2.5vw;
            border-bottom:1px solid #cccfd1;
    
    
            &:before{
                content:'';
                position:absolute;
                top:0.417vw;
                left:0;
                width:0.278vw;
                height:1.458vw;
                background-color:#c50018;
            }
        }
        .container{
            display:grid;
            grid-template-columns:repeat(4, 1fr);
            gap:1.111vw;
    
            .arrow_box{
                padding:1.806vw 1.25vw 1.667vw;
                font-family:"IBM Plex Sans JP", sans-serif;
                font-weight:600;
                font-size:1.111vw;
                line-height:1.667vw;
                background:url('../images/search_lists/red_right_arrow.png') center right 1.111vw / 1.389vw no-repeat;
                border:1px solid #cccfd1;
                border-radius:0.278vw;
                cursor:pointer;
                transition:0.3s;
    
                &:hover{
                    color:#c50018;
                    border-color:#c50018;
                }
            }
            .check_box{
                label{
                    display:flex;
                    justify-content:space-between;
                    align-items:center;
                    padding:1.597vw 1.667vw 1.25vw;
                    border:1px solid #cccfd1;
                    border-radius:0.278vw;
                    cursor:pointer;
                    transition:0.3s;
    
                    &:hover{
                        color:#c50018;
                        border-color:#c50018;
                    }
                    .check{
                        display:flex;
                        align-items:flex-start;
                        gap:0.556vw;
                        font-family:"IBM Plex Sans JP", sans-serif;
                        font-weight:600;
                        font-size:1.111vw;
                        line-height:1.667vw;
                        cursor:pointer;
            
                        input{
                            position:relative;
                            width:1.389vw;
                            height:1.389vw;
                            margin:0;
                            background-color:#ffffff;
                            border:1px solid #cccfd1;
                            border-radius:0.278vw;
            
                            &:checked{
                                background-color:#c50018;
            
                                &:before{
                                    content:'';
                                    position:absolute;
                                    top:0.243vw;
                                    left:50%;
                                    transform:translateX(-50%) rotate(45deg);
                                    width:0.278vw;
                                    height:0.486vw;
                                    border-bottom:2px solid #ffffff;
                                    border-right:2px solid #ffffff;
                                }
                            }
                        }
                        span{
                            padding-top:0.069vw;
                        }
                    }
                    > span{
                        font-family:"IBM Plex Sans JP", sans-serif;
                        font-weight:600;
                        font-size:1.111vw;
                        line-height:1.667vw;
                    }
                }
            }
        }
    }
    .search_modal_footer{
        display:grid;
        grid-template-columns:repeat(2, 1fr);
        align-items:center;
        gap:1.042vw;
        margin-top:3.056vw;
    
        .left{
            display:flex;
            justify-content:space-between;
            align-items:center;
            padding:0.903vw 1.667vw 0.764vw 1.111vw;
            background-color:#f0f1f4;
            border-radius:0.278vw;
    
            .selected{
                display:flex;
                align-items:center;
                gap:1.111vw;
                position:relative;
                padding-left:1.25vw;
                font-family:"IBM Plex Sans JP", sans-serif;
                font-weight:600;
                font-size:1.111vw;
                line-height:1.667vw;
                
                &:before{
                    content:'';
                    position:absolute;
                    top:50%;
                    left:0;
                    transform:translateY(-50%);
                    width:0.694vw;
                    height:0.694vw;
                    background-color:#c50018;
                    border-radius:50%;
                }
                span{
                    color:#6b6f75;
                }
            }
            .change{
                font-family:"IBM Plex Sans JP", sans-serif;
                font-weight:500;
                font-size:1.111vw;
                line-height:1.389vw;
                text-decoration:underline;
                color:#0356cb;
                cursor:pointer;
                transition:0.3s;
    
                &:hover{
                    opacity:0.7;
                }
            }
        }
        .right{
            display:flex;
            align-items:center;
            gap:1.667vw;
    
            button{
                display:flex;
                justify-content:center;
                align-items:center;
                gap:0.278vw;
                width:100%;
                padding:0.903vw 0 0.764vw;
                font-family:"IBM Plex Sans JP", sans-serif;
                font-weight:600;
                font-size:1.111vw;
                line-height:1.667vw;
                color:#ffffff;
                background-color:#c50018;
                border-radius:1.667vw;
                transition:0.3s;
    
                &:hover{
                    opacity:0.7;
                }
                img{
                    width:1.389vw;
                    height:1.389vw;
                }
            }
            .cancel{
                font-family:"IBM Plex Sans JP", sans-serif;
                font-weight:600;
                font-size:1.111vw;
                line-height:1.389vw;
                text-decoration:underline;
                white-space:nowrap;
                cursor:pointer;
                transition:0.3s;
    
                &:hover{
                    opacity:0.7;
                }
            }
        }
    }
    .search_modal_mobile_footer{
        display:none;
    }
    .search_mobile_nav{
        display:none;
    }
    
    .img_modal{
        display:flex;
        justify-content:center;
        align-items:center;
        position:fixed;
        top:0;
        left:0;
        width:100%;
        height:100%;
        padding:0 1.111vw;
        background:rgba(0, 0, 0, 0.75);
        opacity:0;
        visibility:hidden;
        transition:0.3s;
        z-index:2000;
    
        &.active{
            opacity:1;
            visibility:visible;
        }
    }
    .img_modal_window{
        position:relative;
        width:100%;
        /* max-width:50vw; */
        margin:0 auto;
    }
    .img_modal_header{
        display:flex;
        justify-content:space-between;
        align-items:flex-end;
        margin-bottom:1.111vw;
    }
    .img_modal_cnt{
        font-family:"IBM Plex Sans JP", sans-serif;
        font-weight:600;
        font-size:0.972vw;
        line-height:1.389vw;
        color:#cccfd1;
    }
    .img_modal_close{
        width:1.667vw;
        height:1.667vw;
        cursor:pointer;
    
        img{
            width:100%;
        }
    }
    .img_modal_content{
        img{
            width:100%;
        }
    }
    .img_modal_title{
        margin-top:1.111vw;
        font-family:"IBM Plex Sans JP", sans-serif;
        font-weight:600;
        font-size:0.972vw;
        line-height:1.25vw;
        color:#ffffff;
    }
}





/*-------------------- sp --------------------*/
/*---------- base > width:375px ----------*/
@media(max-width:768px){
	.search_header{
		margin-bottom:8.533vw;
		padding-bottom:6.4vw;
	}
	.search_header_container{
		flex-direction:column;
		align-items:unset;
		gap:8.533vw;
	
		.headline{
			display:flex;
			flex-direction:column;
			align-items:flex-start;
	
			p{
				margin-bottom:5.333vw;
				padding:0 5.333vw;
				font-size:3.733vw;
	
				span{
					&.left{
						width:4.267vw;
						height:4.267vw;
						
						&:before{
							width:8.533vw;
							height:8.533vw;
						}
					}
					&.right{
						width:4.267vw;
						height:4.267vw;
						
						&:before{
							width:8.533vw;
							height:8.533vw;
						}
					}
				}
			}
			h1{
				font-size:8.533vw;
				letter-spacing:-0.171vw;
				line-height:11.2vw;
			}
		}
		.mobile_container{
			display:block;
			border:1px solid #cccfd1;
			border-radius:1.067vw;
			overflow:hidden;

			.box{
				display:flex;
				justify-content:space-between;
				align-items:center;
				padding:2.667vw 3.2vw 2.4vw;
				background-color:#ffffff;
				border-bottom:1px solid #cccfd1;

				&:last-child{
					border:none;
				}
				.selected{
					display:flex;
					align-items:center;
					font-family:"IBM Plex Sans JP", sans-serif;
					font-weight:600;
					font-size:3.2vw;
					line-height:4.8vw;
					color:#6b6f75;

					img{
						width:5.333vw;
						margin-right:3.2vw;
					}
				}
				.change{
					display:flex;
					align-items:center;
					font-family:"IBM Plex Sans JP", sans-serif;
					font-weight:600;
					font-size:3.2vw;
					line-height:4.8vw;

					img{
						width:5.333vw;
					}
				}
			}
		}
		.terms{
			flex-wrap:wrap;
			gap:2.4vw 0;

			.number{
				margin-right:3.2vw;
				font-size:3.733vw;
				line-height:5.333vw;
	
				span{
					padding:0 1.067vw 0 3.2vw;
					font-size:5.333vw;
					line-height:8.533vw;
				}
			}
			.view{
				margin-right:0;
				font-size:3.733vw;
				line-height:5.333vw;
			}
			.sort{
				flex-grow:1;
				gap:3.2vw;
				font-size:3.733vw;
				line-height:5.333vw;
	
				select{
					flex-grow:1;
					padding:2.667vw 16.267vw 2.4vw 3.2vw;
					font-size:3.733vw;
					line-height:5.333vw;
					background:url('../images/search_lists/select_arrow.png') center right 8px / 20px no-repeat;
					background-color:#ffffff;
				}
			}
		}
	}
	
	.search_body{
	
	}
	.search_body_container{
		display:flex;
		flex-direction:column;
		gap:10.667vw;
		margin:0 -4.267vw;
	}
	.search_body_terms{
		display:none;
	}
	
	.search_body_result{
		
	}
	.result_container{
		display:flex;
		flex-direction:column;
		gap:8.533vw;
	}
	.result_box{
		padding:6.4vw 3.2vw 8.533vw;
		border-radius:0;
	}
	.result_header{
		display:block;
		position:relative;
		margin-bottom:4.8vw;
		padding-bottom:5.333vw;
	
		.left{
			display:block;
			
			.img{
				width:36.267vw;
				margin-bottom:3.2vw;
			}
			.name{
				padding-right:10.667vw;

				h2{
					margin-bottom:1.067vw;
					font-size:5.867vw;
					letter-spacing:-0.117vw;
					line-height:8.8vw;
				}
				p{
					font-size:3.733vw;
					letter-spacing:-0.075vw;
					line-height:5.333vw;
				}
			}
		}
		.right{
			position:absolute;
			top:0;
			right:0;

			.date{
				flex-direction:column;
				gap:2.667vw;
				margin-bottom:0;
	
				dl{
					gap:2.133vw;
					
					dt{
						padding:0.8vw 1.6vw 0.533vw;
						font-size:2.667vw;
						line-height:4vw;
					}
					dd{
						padding:0.8vw 0 0.533vw;
						font-size:3.2vw;
						line-height:4.8vw;
					}
				}
			}
			.favorite{
				margin-top:3.2vw;
	
				button{
					width:10.667vw;
					height:10.667vw;
					padding:1.6vw;
					border-radius:50%;
					
					img{
						width:7.2vw;
					}
				}
			}
		}
	}
	
	.result_body{
		display:flex;
		flex-direction:column;
		gap:10.667vw;
		margin-bottom:7.467vw;
	
		.left{
			.gallery{
				/* display:none; */
				margin-bottom:6.4vw;
			}
			.view{
				padding:0 8.533vw;

				button{
					gap:2.133vw;
					padding:3.733vw 0;
					font-weight:600;
					font-size:3.733vw;
					line-height:4.8vw;
					background:url('../images/search_lists/white_circle_black_arrow.png') center right 12px / 24px no-repeat;
					background-color:#32373e;

					img{
						width:5.333vw;
					}
				}
			}
		}
		.right{
			.price{
				margin-bottom:7.467vw;
	
				.main{
					gap:1.067vw;
					margin-bottom:0.533vw;
					font-weight:600;
					font-size:3.733vw;
					line-height:5.6vw;
					
					span{
						font-size:7.467vw;
						line-height:11.2vw;
					}
				}
				.sub{
					gap:3.2vw;
	
					dl{
						gap:1.6vw;
						
						dt{
							padding-right:1.6vw;
							font-size:3.2vw;
							line-height:4.8vw;
							
							&:after{
								right:-0.267vw;
								width:0.267vw;
								height:3.2vw;
							}
						}
						dd{
							font-size:3.2vw;
							line-height:4.8vw;
						}
					}
				}
			}
			.content{
				margin-bottom:5.6vw;
	
				dl{
					grid-template-columns:100px 1fr;
					gap:4.8vw;
					margin-bottom:5.333vw;
					
					dt{
						padding-bottom:1.333vw;
						font-size:3.733vw;
						line-height:5.6vw;
					}
					dd{
						padding-bottom:1.333vw;
						font-size:3.733vw;
						line-height:5.6vw;
					}
				}
			}
			.point{
				p{
					margin-bottom:1.6vw;
					font-size:3.733vw;
					line-height:5.6vw;
				}
				ul{
					gap:2.133vw 1.067vw;
	
					li{
						padding:1.067vw 3.2vw 0.533vw;
						font-size:3.2vw;
						line-height:5.6vw;
					}
				}
			}
		}
	}
	
	.gallery_slider{
		.slider_img{
			.title{
				height:17.067vw;
				padding:0 0 1.867vw 2.4vw;
				font-size:2.667vw;
				line-height:4vw;
			}
			.zoom{
				bottom:2.133vw;
				right:2.4vw;
				width:8.533vw;
				height:8.533vw;
			}
		}
	}
	.gallery_thumbnail{
		grid-template-columns:13px 1fr 13px;
		gap:2.133vw;
		margin-top:3.2vw;
		
		.thumbnail_img{
			margin:1.867vw 0.933vw;
		}
		.prev_arrow{
			background:url('../images/search_lists/white_arrow.png') center / 7px no-repeat;
		}
		.next_arrow{
			background:url('../images/search_lists/white_arrow.png') center / 7px no-repeat;
		}
		.slide_arrow{
			background-color:#32373e;
		}
		.slick-current{
			&:before{
				top:-0.933vw;
				right:-0.933vw;
				bottom:-0.933vw;
				left:-0.933vw;
			}
		}
	}
	
	.result_footer{
		.headline{
			gap:3.2vw;
			margin-bottom:4.267vw;
			padding-bottom:4.267vw;
			
			h2{
				padding-left:4.267vw;
				font-size:5.333vw;
				line-height:7.733vw;
	
				&:before{
					width:1.067vw;
					height:5.333vw;
				}
			}
			p{
				font-size:3.2vw;
			}
		}
		.container{
			grid-template-columns:repeat(2, 1fr);
			gap:3.2vw;
			margin-bottom:8.533vw;
	
			.box{
                grid-template-columns:9.6vw 1fr;
				gap:2.133vw;
				padding:1.6vw;
				
				p{
					font-size:3.2vw;
					line-height:4vw;
				}
			}
		}
		.link{
			gap:2.4vw;
	
			button{
				padding:3.733vw 6.4vw 3.467vw 0;
				font-size:3.733vw;
				line-height:5.6vw;
				
				&:first-child{
					color:#ffffff;
					background:url('../images/search_lists/white_circle_red_arrow.png') center right 12px / 24px no-repeat;
					background-color:#c50018;
				}
				&:last-child{
					background:url('../images/search_lists/red_circle_white_arrow.png') center right 12px / 24px no-repeat;
					background-color:#ffffff;
				}
			}
		}
	}
	
	.result_paginate{
		margin-top:8.533vw;
	
		ul{
			gap:5.333vw;
	
			li{
				a{
					font-size:4.267vw;
					line-height:4.267vw;
				}
				&.prev{
					a{
						width:13.333vw;
						height:10.667vw;
						background:url('../images/search_lists/white_arrow.png') center / 10px no-repeat;
						background-color:#32373e;
					}
				}
				&.next{
					a{
						width:13.333vw;
						height:10.667vw;
						background:url('../images/search_lists/white_arrow.png') center / 10px no-repeat;
						background-color:#32373e;
					}
				}
				&.dot{
					font-size:4.267vw;
					line-height:4.267vw;
				}
			}
		}
	}
	
	.search_modal{
		padding:0;
	}
	.search_modal_window{
		padding:14.667vw 0 0;
		overflow:auto;

		&.active{
			display:block;
		}
		&#search_modal_area2{
			padding-bottom:50.133vw;
		}
        &#search_modal_area3{
			padding-bottom:43.2vw;
		}
	}
	.search_modal_close{
		top:5.333vw;
		right:5.333vw;
		width:4.8vw;
		height:4.8vw;
	}
	.search_modal_haedline{
		gap:2.133vw;
		margin-bottom:9.333vw;
		padding:0 4.267vw;
		
		img{
			width:6.4vw;
		}
		h2{
			font-size:5.333vw;
			line-height:8.533vw;
		}
	}
	.search_modal_toggle{
		display:none;
	}
	.search_modal_selected{
        margin:0 4.267vw 6.4vw;
		padding:3.467vw 4.267vw 3.2vw;
		background-color:#f0f1f4;
		border-radius:1.067vw;

		p{
			display:flex;
			align-items:center;
			gap:4.267vw;
			position:relative;
			margin-bottom:2.4vw;
			padding-left:4.267vw;
			font-family:"IBM Plex Sans JP", sans-serif;
			font-weight:600;
			font-size:3.733vw;
			line-height:5.333vw;
			
			&:before{
				content:'';
				position:absolute;
				top:50%;
				left:0;
				transform:translateY(-50%);
				width:2.133vw;
				height:2.133vw;
				background-color:#c50018;
				border-radius:50%;
			}
		}
		.selected{
			display:flex;
			justify-content:space-between;

			span{
				font-family:"IBM Plex Sans JP", sans-serif;
				font-weight:600;
				font-size:3.733vw;
				line-height:5.333vw;
				color:#6b6f75;
			}
			.change{
				font-family:"IBM Plex Sans JP", sans-serif;
				font-weight:600;
				font-size:3.733vw;
				line-height:5.333vw;
				text-decoration:underline;
				color:#0356cb;
				cursor:pointer;
				transition:0.3s;

				&:hover{
					opacity:0.7;
				}
			}
		}
	}
    .search_modal_return{
        display:flex;
		margin-bottom:8.8vw;
        padding:0 4.267vw;

		.change{
			font-family:"IBM Plex Sans JP", sans-serif;
			font-weight:600;
			font-size:3.733vw;
			line-height:5.333vw;
			text-decoration:underline;
			color:#0356cb;
			cursor:pointer;
			transition:0.3s;

			&:hover{
				opacity:0.7;
			}
		}
	}
	.search_modal_body{
		padding:0 4.267vw 4.267vw;
	}
	.search_modal_content{
		gap:4.267vw;
		height:auto;
		padding-right:0;
		overflow:unset;
	}
	.search_modal_column{
		border:1px solid #cccfd1;
		border-radius:1.067vw;

		.title{
			margin-bottom:0;
			padding:6.4vw 4.267vw 6.4vw 8.533vw;
			font-size:4.267vw;
			line-height:6.4vw;
			background:url('../images/search_lists/red_circle_plus.png') center right 16px / 20px no-repeat;
			border:none;

			&.active{
				background:url('../images/search_lists/red_circle_minus.png') center right 16px / 20px no-repeat;
			}
			&:before{
				top:50%;
				left:4.267vw;
				transform:translateY(-50%);
				width:1.067vw;
				height:4.267vw;
			}
		}
		.container{
			display:none;
			padding:0 4.267vw 6.4vw;
			
			&.active{
				display:block;
			}
			.arrow_box{
				padding:5.067vw 0 3.2vw;
				font-size:3.733vw;
				line-height:5.333vw;
				background:url('../images/search_lists/red_right_arrow.png') top 19px right 0 / 20px no-repeat;
				border:none;
				border-top:1px solid #cccfd1;
				border-radius:0;

				&:last-child{
					border-bottom:1px solid #cccfd1;
				}
				&:hover{
					border-color:#cccfd1
				}
			}
			.check_box{
				label{
					display:flex;
					justify-content:space-between;
					align-items:center;
					padding:6.133vw 6.4vw 4.8vw;
					border:1px solid #cccfd1;
					border-radius:1.067vw;
					cursor:pointer;
					transition:0.3s;
	
					&:hover{
						color:#c50018;
						border-color:#c50018;
					}
					.check{
						display:flex;
						align-items:flex-start;
						gap:2.133vw;
						font-family:"IBM Plex Sans JP", sans-serif;
						font-weight:600;
						font-size:4.267vw;
						line-height:6.4vw;
						cursor:pointer;
			
						input{
							position:relative;
							width:5.333vw;
							height:5.333vw;
							margin:0;
							background-color:#ffffff;
							border:1px solid #cccfd1;
							border-radius:1.067vw;
			
							&:checked{
								background-color:#c50018;
			
								&:before{
									content:'';
									position:absolute;
									top:0.933vw;
									left:50%;
									transform:translateX(-50%) rotate(45deg);
									width:1.067vw;
									height:1.867vw;
									border-bottom:2px solid #ffffff;
									border-right:2px solid #ffffff;
								}
							}
						}
						span{
							padding-top:0.267vw;
						}
					}
					> span{
						font-family:"IBM Plex Sans JP", sans-serif;
						font-weight:600;
						font-size:4.267vw;
						line-height:6.4vw;
					}
				}
			}
		}
	}
	.search_modal_detail_column{
		border:1px solid #cccfd1;
        border-radius:1.067vw;

		.title{
			display:flex;
			align-items:center;
			gap:2.133vw;
			padding:6.133vw 4.267vw 5.6vw;
			font-family:"IBM Plex Sans JP", sans-serif;
			font-weight:600;
			font-size:4.267vw;
			line-height:6.4vw;
			/* background:url('../images/search_lists/red_circle_plus.png') center right 16px / 20px no-repeat;
			background-color:#ffffff; */
			
			/* &.active{
				background:url('../images/search_lists/red_circle_minus.png') center right 16px / 20px no-repeat;
				background-color:#ffffff;
			} */
			img{
				width:5.333vw;
			}
		}
		.container{
			/* display:none; */
			padding:2.933vw 4.267vw 4.267vw;

			/* &.active{
				display:block;
			} */
			.allcheck{
				display:flex;
				margin-bottom:5.333vw;
				
				label{
					display:flex;
					align-items:flex-start;
					gap:2.133vw;
					font-family:"IBM Plex Sans JP", sans-serif;
					font-weight:600;
					font-size:3.733vw;
					line-height:5.333vw;
					cursor:pointer;
			
					input{
						position:relative;
						width:5.333vw;
						height:5.333vw;
						margin:0;
						background-color:#ffffff;
						border:1px solid #cccfd1;
						border-radius:1.067vw;
			
						&:checked{
							background-color:#c50018;
			
							&:before{
								content:'';
								position:absolute;
								top:0.933vw;
								left:50%;
								transform:translateX(-50%) rotate(45deg);
								width:1.067vw;
								height:1.867vw;
								border-bottom:2px solid #ffffff;
								border-right:2px solid #ffffff;
							}
						}
					}
					span{
						padding-top:0.8vw;
					}
				}
			}
			.lists{
				margin-bottom:7.467vw;

				&:last-child{
					margin:0;
				}
				.headline{
					margin-bottom:4.267vw;
					padding-bottom:1.333vw;
					font-family:"IBM Plex Sans JP", sans-serif;
					font-weight:600;
					font-size:3.733vw;
					line-height:5.333vw;
					border-bottom:1px solid #cccfd1;
				}
				.check_box{
					margin-bottom:3.2vw;

					label{
						display:flex;
						justify-content:space-between;
						align-items:center;
						cursor:pointer;
						transition:0.3s;
		
						&:hover{
							color:#c50018;
						}
						.check{
							display:flex;
							align-items:flex-start;
							gap:2.133vw;
							font-family:"IBM Plex Sans JP", sans-serif;
							font-weight:500;
							font-size:3.733vw;
							line-height:5.333vw;
							cursor:pointer;
				
							input{
								position:relative;
								width:5.333vw;
								height:5.333vw;
								margin:0;
								background-color:#ffffff;
								border:1px solid #cccfd1;
								border-radius:1.067vw;
				
								&:checked{
									background-color:#c50018;
				
									&:before{
										content:'';
										position:absolute;
										top:0.933vw;
										left:50%;
										transform:translateX(-50%) rotate(45deg);
										width:1.067vw;
										height:1.867vw;
										border-bottom:2px solid #ffffff;
										border-right:2px solid #ffffff;
									}
								}
							}
							span{
								padding-top:0.267vw;
							}
						}
						> span{
							font-family:"IBM Plex Sans JP", sans-serif;
							font-weight:500;
							font-size:3.733vw;
							line-height:5.333vw;
						}
					}
				}
			}
			.train_container{
				display:grid;
				gap:8.533vw;

				.train_column{
					.headline{
						position:relative;
						padding:0 5.333vw 1.067vw 4.267vw;
						font-family:"IBM Plex Sans JP", sans-serif;
						font-weight:500;
						font-size:4.267vw;
						line-height:6.4vw;
						background:url('../images/search_lists/red_circle_plus.png') top right 0 / 20px no-repeat;
						border-bottom:1px solid #cccfd1;
						cursor:pointer;
			
						&.active{
							background:url('../images/search_lists/red_circle_minus.png') top right 0 / 20px no-repeat;
						}
						&:before{
							content:'';
							position:absolute;
							top:0.533vw;
							left:0;
							width:1.067vw;
							height:4.267vw;
							background-color:#c50018;
						}
					}
					.train_railway{
						display:none;
						padding-top:5.333vw;

						&.active{
							display:block;
						}
						.sub_headline{
							display:flex;
							justify-content:space-between;

							label{
								display:flex;
								justify-content:space-between;
								align-items:center;
								cursor:pointer;
								transition:0.3s;
				
								&:hover{
									color:#c50018;
								}
								.check{
									display:flex;
									align-items:flex-start;
									gap:2.133vw;
									font-family:"IBM Plex Sans JP", sans-serif;
									font-weight:500;
									font-size:3.733vw;
									line-height:5.333vw;
									cursor:pointer;
						
									input{
										position:relative;
										width:5.333vw;
										height:5.333vw;
										margin:0;
										background-color:#ffffff;
										border:1px solid #cccfd1;
										border-radius:1.067vw;
						
										&:checked{
											background-color:#c50018;
						
											&:before{
												content:'';
												position:absolute;
												top:0.933vw;
												left:50%;
												transform:translateX(-50%) rotate(45deg);
												width:1.067vw;
												height:1.867vw;
												border-bottom:2px solid #ffffff;
												border-right:2px solid #ffffff;
											}
										}
									}
									span{
										padding-top:0.267vw;
									}
								}
							}
							button{
								width:5.333vw;
								height:5.333vw;
								background:url('../images/search_lists/red_plus.png') center right 0 / 20px no-repeat;
								border-radius:50%;

								&.active{
									background:url('../images/search_lists/red_minus.png') center right 0 / 20px no-repeat;
								}
							}
						}
						.sub_container{
							display:none;
							padding-top:5.333vw;

							&.active{
								display:block;
							}
							.check_box{
								margin-bottom:3.2vw;
			
								label{
									display:flex;
									justify-content:space-between;
									align-items:center;
									cursor:pointer;
									transition:0.3s;
					
									&:hover{
										color:#c50018;
									}
									.check{
										display:flex;
										align-items:flex-start;
										gap:2.133vw;
										font-family:"IBM Plex Sans JP", sans-serif;
										font-weight:500;
										font-size:3.733vw;
										line-height:5.333vw;
										cursor:pointer;
							
										input{
											position:relative;
											width:5.333vw;
											height:5.333vw;
											margin:0;
											background-color:#ffffff;
											border:1px solid #cccfd1;
											border-radius:1.067vw;
							
											&:checked{
												background-color:#c50018;
							
												&:before{
													content:'';
													position:absolute;
													top:0.933vw;
													left:50%;
													transform:translateX(-50%) rotate(45deg);
													width:1.067vw;
													height:1.867vw;
													border-bottom:2px solid #ffffff;
													border-right:2px solid #ffffff;
												}
											}
										}
										span{
											padding-top:0.267vw;
										}
									}
									> span{
										font-family:"IBM Plex Sans JP", sans-serif;
										font-weight:500;
										font-size:3.733vw;
										line-height:5.333vw;
									}
								}
							}
						}
					}
				}
			}
		}
	}

	.search_modal_detail_form{
		display:grid;
		gap:8vw;
		padding:0 4.267vw 4.267vw;
		
		h3{
			position:relative;
			margin-bottom:3.2vw;
			padding-left:4.267vw;
			font-family:"IBM Plex Sans JP", sans-serif;
			font-weight:600;
			font-size:3.733vw;
			line-height:5.333vw;

			&:before{
				content:'';
				position:absolute;
				top:50%;
				left:0;
				transform:translateY(-50%);
				width:2.133vw;
				height:2.133vw;
				background-color:#c50018;
				border-radius:50%;
			}
		}
		select{
			position:relative;
			width:100%;
			padding:3.733vw 5.333vw 3.733vw 4.267vw;
			font-family:"IBM Plex Sans JP", sans-serif;
			font-weight:600;
			font-size:3.733vw;
			background:url('../images/search_lists/select_arrow.png') center right 6px / 20px no-repeat;
			background-color:#ffffff;
			border:1px solid #cccfd1;
			border-radius:1.067vw;
			transition:0.3s;

			&:hover{
				border-color:#c50018;
			}
		}
		label{
			display:flex;
			align-items:flex-start;
			gap:2.133vw;
			font-family:"IBM Plex Sans JP", sans-serif;
			font-weight:500;
			font-size:3.733vw;
			line-height:5.333vw;
			cursor:pointer;

			input{
				position:relative;
				width:5.333vw;
				height:5.333vw;
				margin:0;
				background-color:#ffffff;
				border:1px solid #cccfd1;
				border-radius:1.067vw;

				&:checked{
					background-color:#c50018;

					&:before{
						content:'';
						position:absolute;
						top:0.933vw;
						left:50%;
						transform:translateX(-50%) rotate(45deg);
						width:1.067vw;
						height:1.867vw;
						border-bottom:2px solid #ffffff;
						border-right:2px solid #ffffff;
					}
				}
			}
			span{
				padding-top:0.8vw;
			}
		}
		.select{
			margin-bottom:3.2vw;

			&:last-child{
				margin:0;
			}
		}
		.between{
			display:flex;
			align-items:center;
			gap:2.133vw;

			select{
				width:100%;
			}
		}
		.checkbox{
			display:grid;
			grid-template-columns:repeat(2, 1fr);
			gap:3.2vw;
		}
	}
	.search_modal_mobile_footer{
		display:block;
		/* position:sticky; */
		position:fixed;
		bottom:0;
		left:0;
		width:100%;
		margin-top:0;
		padding:4.267vw 4.267vw 5.333vw;
		background-color:#ffffff;
		border-top:1px solid #cccfd1;

		.count{
			display:flex;
			justify-content:space-between;
			align-items:center;
			margin-bottom:3.2vw;
			padding:2.133vw 5.333vw 1.067vw;
			background-color:#fbf1f2;
			border-radius:1.067vw;
	
			.left{
				font-family:"IBM Plex Sans JP", sans-serif;
				font-weight:600;
				font-size:3.733vw;
				line-height:5.333vw;
			}
			.right{
				display:flex;
				align-items:baseline;
				gap:1.067vw;
				font-family:"IBM Plex Sans JP", sans-serif;
				font-weight:600;
				font-size:3.733vw;
				line-height:5.333vw;
	
				span{
					font-size:6.4vw;
					line-height:10.133vw;
					color:#c50018;
				}
			}
		}
		.search{
			display:flex;
			align-items:center;
			gap:2.133vw;

			button{
				display:flex;
				justify-content:center;
				align-items:center;
				gap:1.067vw;
				width:100%;
				padding:3.733vw 0 3.467vw;
				font-family:"IBM Plex Sans JP", sans-serif;
				font-weight:600;
				font-size:3.733vw;
				line-height:5.333vw;
				color:#ffffff;
				background-color:#c50018;
				border-radius:6.4vw;
				transition:0.3s;

				&:hover{
					opacity:0.7;
				}
				&.gray{
					background-color:#32373e;
				}
				img{
					width:5.333vw;
					height:5.333vw;
				}
			}
		}
		.detail_search{
			display:flex;
			align-items:center;
			gap:0;

			button{
				display:flex;
				justify-content:center;
				align-items:center;
				gap:1.067vw;
				width:100%;
				padding:3.733vw 0 3.467vw;
				font-family:"IBM Plex Sans JP", sans-serif;
				font-weight:600;
				font-size:3.733vw;
				line-height:5.333vw;
				color:#ffffff;
				background-color:#c50018;
				border-radius:6.4vw;
				transition:0.3s;

				&:hover{
					opacity:0.7;
				}
				img{
					width:5.333vw;
					height:5.333vw;
				}
			}
			.cancel{
				padding:0 4.267vw;
				font-family:"IBM Plex Sans JP", sans-serif;
				font-weight:600;
				font-size:3.733vw;
				line-height:5.333vw;
				text-decoration:underline;
				white-space:nowrap;
				cursor:pointer;
				transition:0.3s;
			}
		}
		.cancel_area{
			margin-top:5.6vw;
			text-align:center;

			.cancel{
				font-family:"IBM Plex Sans JP", sans-serif;
				font-weight:600;
				font-size:3.733vw;
				line-height:5.333vw;
				text-decoration:underline;
				white-space:nowrap;
				cursor:pointer;
				transition:0.3s;
			}
		}
	}

	.search_mobile_nav{
		display:grid;
		grid-template-columns:repeat(2, 1fr);
		gap:2.4vw;
		position:fixed;
		bottom:0;
		left:0;
		width:100%;
		padding:3.2vw 4.267vw;
		background-color:rgba(223, 226, 229, 0.8);

		button{
			display:flex;
			justify-content:center;
			align-items:center;
			gap:2.133vw;
			padding:3.733vw 0;
			font-family:"IBM Plex Sans JP", sans-serif;
			font-weight:600;
			font-size:3.733vw;
			line-height:5.333vw;
            color:#32373e;
			background-color:#ffffff;
			border:1px solid #cccfd1;
			border-radius:6.4vw;

			img{
				width:5.333vw;
			}
		}
	}

	.img_modal{
		padding:0 4.267vw;
	}
	.img_modal_header{
		margin-bottom:3.2vw;
	}
	.img_modal_cnt{
		font-size:3.2vw;
		line-height:4.8vw;
	}
	.img_modal_close{
		width:5.333vw;
		height:5.333vw;
	}
	.img_modal_title{
		margin-top:3.2vw;
		font-size:3.2vw;
		line-height:4.8vw;
	}
}
/* task56d (2026-07-24): card gallery slides pinned to the design frame
   (mockup 276x206 = 560:418 ratio). Real uploads vary in ratio - cover-crop
   to fill the frame (owner direction; the click preview still shows the
   full image via PhotoSwipe fit-fill). */
.gallery_slider .slider_img {
    aspect-ratio: 560 / 418;
    background-color: #fff;
}
.gallery_slider .slider_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* task21 Phase 5 (2026-08-03): 新着バナー + お気に入り一覧への導線.
   The design drop has neither — both are system features (design-deviations
   C11). Palette and radius follow the page's own tokens (#c50018 accent,
   #fbf1f2 tint, #cccfd1 border) so they read as part of the same sheet. */
.search_new_banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 24px;
    padding: 14px 20px;
    border: 1px solid #c50018;
    border-radius: 4px;
    background-color: #fbf1f2;
}
.search_new_banner p {
    font-family: "IBM Plex Sans JP", sans-serif;
    font-weight: 600;
    font-size: 15px;
    color: #c50018;
}
.search_new_banner .close {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background-color: transparent;
    color: #c50018;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}
.search_new_banner .close:hover {
    background-color: #ffffff;
}
/* The global button reset kills outlines, so focus needs its own ring. */
.search_new_banner .close:focus-visible,
.favorites_link:focus-visible {
    outline: 2px solid #c50018;
    outline-offset: 2px;
}

.search_header .terms .favorites_link {
    margin-left: auto;
    padding: 8px 14px;
    border: 1px solid #cccfd1;
    border-radius: 4px;
    font-family: "IBM Plex Sans JP", sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: #32373e;
    text-decoration: none;
    white-space: nowrap;
}
.search_header .terms .favorites_link:hover {
    border-color: #c50018;
    color: #c50018;
}
/* margin-left:auto right-aligns the link, but it collapses to 0 once 並び替え
   fills the row — which is the normal PC width, so the button ended up welded
   to the select. The gap has to come from the item before it; a floor on the
   link itself cannot be expressed alongside `auto`. PC only: on SP the row
   wraps and already has its own gap. */
@media screen and (min-width: 769px) {
    .search_header .terms .sort {
        margin-right: 24px;
    }
}

@media screen and (max-width: 768px) {
    .search_new_banner {
        margin: 0 4vw 4vw;
        padding: 3.2vw 4vw;
    }
    .search_new_banner p { font-size: 3.4vw; }
    .search_header .terms .favorites_link {
        margin-left: 0;
        padding: 2.4vw 3.2vw;
        font-size: 3.2vw;
    }
}

/* task21 Phase 7 (2026-08-03): card spec values are free text and some makers
   put every line into 交通 (項番14) — one listing renders six lines of rail
   names, which pushes the whole card out of shape. The mock assumes one line.
   Clamp on the CARD only: the full string stays in the DOM (and on the detail
   page), so nothing is lost, it just stops dominating the result list. */
.result_box .content dl dd {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* task21 review (2026-08-04): gallery thumbnails had `img{width:100%}` and no
   height constraint, so each one took its own aspect ratio and the strip came
   out ragged. Same treatment the main slide already gets (task56d / ledger C3):
   fix the frame, cover-crop inside it. 4:3 matches the thumbnail's box in the
   mock; the full image is still one click away via PhotoSwipe. */
.gallery_thumbnail .thumbnail_img {
    aspect-ratio: 4 / 3;
    overflow: hidden;
}
.gallery_thumbnail .thumbnail_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* task21 review (2026-08-04): the results area is empty from first paint until
   the search returns (~550ms -> ~1300ms measured). The mock has no state for
   that, so it read as a broken page. Same box for empty/error/loading. */
.result_container .result_empty {
    padding: 48px 24px;
    text-align: center;
    font-family: "IBM Plex Sans JP", sans-serif;
    font-size: 15px;
    line-height: 1.8;
    color: #6b6f75;
    background-color: #ffffff;
    border-radius: 4px;
}
.result_container .result_loading {
    color: #32373e;
}
@media screen and (max-width: 768px) {
    .result_container .result_empty {
        margin: 0 4vw;
        padding: 10vw 4vw;
        font-size: 3.4vw;
    }
}

/* task21 review (2026-08-04): loading placeholders.
   These ship in the HTML so the first paint already shows them — the card
   template sits in an inert <template>, so nothing of the mock renders and its
   805KB of placeholder photos are never fetched. Geometry is deliberately
   approximate: it holds the space, it does not pretend to be the card. */
@keyframes sumstock_shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.result_skeleton {
    padding: 32px 40px;
    margin-bottom: 24px;
    background-color: #ffffff;
    border: 1px solid #cccfd1;
    border-radius: 4px;
}
.result_skeleton .sk {
    display: block;
    border-radius: 4px;
    background-color: #eceef1;
    background-image: linear-gradient(90deg, #eceef1 0%, #f6f7f9 50%, #eceef1 100%);
    background-size: 200% 100%;
    animation: sumstock_shimmer 1.4s linear infinite;
}
.result_skeleton_header {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 8px 24px;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #f0f1f4;
}
.result_skeleton .sk_logo  { grid-row: 1 / 3; height: 56px; }
.result_skeleton .sk_title { height: 24px; max-width: 420px; }
.result_skeleton .sk_sub   { height: 16px; max-width: 300px; }
.result_skeleton_body {
    display: grid;
    grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
    gap: 40px;
}
.result_skeleton .sk_photo { aspect-ratio: 560 / 418; }
.result_skeleton_thumbs { display: flex; gap: 8px; margin-top: 12px; }
.result_skeleton .sk_thumb { flex: 1 1 0; aspect-ratio: 4 / 3; }
.result_skeleton .sk_price { height: 40px; max-width: 260px; margin-bottom: 24px; }
.result_skeleton .sk_row   { height: 20px; margin-bottom: 16px; }
.result_skeleton .sk_row:nth-child(odd) { max-width: 90%; }

/* The swap: cards arrive faded and settle, rather than the whole list
   appearing in one frame. */
.result_container .result_box {
    transition: opacity 220ms ease-out, transform 220ms ease-out;
}
.result_container .result_box.is-entering {
    opacity: 0;
    transform: translateY(8px);
}

@media screen and (max-width: 768px) {
    .result_skeleton { padding: 4vw; margin: 0 4vw 4vw; }
    .result_skeleton_header { grid-template-columns: 22vw 1fr; gap: 2vw 4vw; }
    .result_skeleton .sk_logo { height: 12vw; }
    .result_skeleton_body { grid-template-columns: 1fr; gap: 4vw; }
}

@media (prefers-reduced-motion: reduce) {
    .result_skeleton .sk { animation: none; }
    .result_container .result_box { transition: none; }
    .result_container .result_box.is-entering { opacity: 1; transform: none; }
}

/* task21 review (2026-08-04): こだわりポイント is free text and some makers list
   a dozen renovation lines, which buried the rest of the card. Two rows by
   default, the rest behind もっと見る. max-height (not height:auto) so the open
   and close can be animated; JS supplies the pixel target. */
.result_box .point ul {
    overflow: hidden;
    transition: max-height 260ms ease;
}
/* The chips are flex items, so their default min-width:auto lets an unbreakable
   run (a long 全角スペース pad) set the card's min-content width. Wrap inside the
   chip instead of pushing the layout. */
.result_box .point ul li {
    min-width: 0;
    overflow-wrap: anywhere;
}
.result_box .point .point_more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding: 4px 0;
    border: 0;
    background: none;
    font-family: "IBM Plex Sans JP", sans-serif;
    font-weight: 600;
    font-size: 13px;
    color: #c50018;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.result_box .point .point_more::after {
    content: '';
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 260ms ease;
}
.result_box .point:not(.is-collapsed) .point_more::after {
    transform: translateY(2px) rotate(-135deg);
}
/* The global button reset removes outlines. */
.result_box .point .point_more:focus-visible {
    outline: 2px solid #c50018;
    outline-offset: 2px;
}

/* task21 review (2026-08-04): a long address squeezed the header's right column
   until 情報更新日 / 次回更新日 wrapped onto two lines. The dates are a fixed
   pair — the address is what should wrap. */
.result_header .left { min-width: 0; }
.result_header .left .name h2 { overflow-wrap: anywhere; }
.result_header .right { flex: 0 0 auto; }
.result_header .right .date { flex-wrap: nowrap; }
.result_header .right .date dl { flex: 0 0 auto; }
.result_header .right .date dt,
.result_header .right .date dd { white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
    .result_box .point ul,
    .result_box .point .point_more::after { transition: none; }
}

/* The live 該当件数 dims while its request is in flight, so a changed filter is
   visibly acknowledged before the new number lands. */
.count .right span { transition: opacity 150ms ease; }
.count .right span.is-updating { opacity: 0.35; }

/* task21 review round 3 (2026-08-04) --------------------------------------
   1) SP reserved 58px for a header that is actually 70px tall (task53 replaced
      it and the reservation was never re-measured), so the top of the results
      sat under it. search-app.js publishes the measured height. */
@media screen and (max-width: 768px) {
    main.common_search_page {
        padding-top: calc(var(--sumstock-header-h, 70px) + 8px);
    }
}

/* 2) The modal shipped at z-index 2000 under a z-index 5000 fixed header, so
      scrolling slid its ✕ underneath and it could not be tapped. Same fix the
      detail page's VR overlay already carries (ledger C8): above the header,
      and lock the page behind it. */
.search_modal { z-index: 6000; }
body.search_modal_open { overflow: hidden; }

/* 4) Floating pager. The list is ~16 screens tall and the real pager sits at
      the very bottom; this one is reachable from anywhere and steps aside when
      the real one scrolls into view. */
.sticky_pager {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 1500;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px;
    transform: translateX(-50%);
    background-color: rgba(255, 255, 255, 0.96);
    border: 1px solid #cccfd1;
    border-radius: 999px;
    box-shadow: 0 4px 16px rgba(50, 55, 62, 0.18);
    transition: opacity 200ms ease, transform 200ms ease;
}
.sticky_pager.is-hidden {
    opacity: 0;
    transform: translateX(-50%) translateY(12px);
    pointer-events: none;
}
.sticky_pager_label {
    min-width: 64px;
    text-align: center;
    font-family: "IBM Plex Sans JP", sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: #32373e;
}
.sticky_pager button {
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: #c50018;
    cursor: pointer;
    position: relative;
    transition: opacity 200ms ease;
}
.sticky_pager button::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border-top: 2px solid #ffffff;
    border-right: 2px solid #ffffff;
}
.sticky_pager_prev::after { transform: translate(-40%, -50%) rotate(-135deg); }
.sticky_pager_next::after { transform: translate(-60%, -50%) rotate(45deg); }
.sticky_pager button:disabled { opacity: 0.3; cursor: default; }
.sticky_pager button:focus-visible { outline: 2px solid #32373e; outline-offset: 2px; }

@media screen and (max-width: 768px) {
    /* Clear the fixed エリア / 詳細な条件 bar. */
    .sticky_pager { bottom: calc(77px + 12px); }
}
@media (prefers-reduced-motion: reduce) {
    .sticky_pager { transition: none; }
}

/* ========================================================================
   task147 (2026-08-20) — checkback fixes on the results screen.
   ======================================================================== */

/*
 * 条件を解除 in the SP results header (物件 S11).
 *
 * Sits inside .mobile_container, which the SP block above already draws as a
 * bordered stack of .box rows — so this row inherits the border, padding and
 * background from there and only has to say how its single control looks.
 * PC hides .mobile_container outright and keeps its own 条件を解除 in the
 * sidebar, so nothing here needs a desktop counterpart.
 */
.mobile_container .result_cancel {
    justify-content: center;
}
.mobile_container .result_cancel .cancel {
    font-family: "IBM Plex Sans JP", sans-serif;
    font-weight: 600;
    color: #c50018;
    text-decoration: underline;
    cursor: pointer;
}
.mobile_container .result_cancel .cancel:focus-visible {
    outline: 2px solid #32373e;
    outline-offset: 2px;
}
/* [hidden] loses to .mobile_container .box{display:flex}: same specificity,
   later rule wins. Without this the control shows on a bare /search/. */
.mobile_container .result_cancel[hidden] {
    display: none;
}

/*
 * Inverted 下限/上限 warning (物件 S7 / CQ6).
 *
 * Appended to the .box of the offending pair by search-app.js. The 検索する
 * button is dimmed rather than disabled: a disabled button gives no hint why,
 * and the click still has to land so the warning can be (re)painted.
 */
.range_warning {
    margin-top: 8px;
    font-family: "IBM Plex Sans JP", sans-serif;
    font-weight: 600;
    font-size: 13px;
    line-height: 20px;
    color: #c50018;
}
.has-range-error .terms_fixed .search button,
.has-range-error .detail_search button {
    opacity: 0.4;
}

@media screen and (max-width: 768px) {
    .range_warning {
        margin-top: 2.133vw;
        font-size: 3.2vw;
        line-height: 4.8vw;
    }
}

/*
 * task146 物件 S12 — thumbnail strip collapses to an empty grey band.
 *
 * `.gallery_thumbnail` is a three-column grid (16px | 1fr | 16px on PC,
 * 13px on SP) laid out for slick's two arrows plus the track between them.
 * slick only builds arrows when `slideCount > slidesToShow`, and
 * search-app.js asks for `slidesToShow: 4` — so any listing with 4 or fewer
 * photos gets no arrows, the lone `.slick-list` falls into column 1, and the
 * strip renders as 13-16px of nothing with only the #646974 background
 * showing. Measured: slick-list 13px, each thumb 0x1.
 *
 * Placing the track explicitly fixes every breakpoint at once — the SP and
 * tablet blocks override only grid-template-columns, not the placement.
 * Not `infinite:false`: the cause is grid placement, not slide cloning.
 * Diagnosed by the detail-page agent; the file is this one, so the fix is here.
 */
.gallery_thumbnail .slick-list {
    grid-column: 2;
}