:root {
    --turning-width: 768px;
}
/* #note, #notepc {
   display: none !important;
   } */
.main {
    display: flex;
    flex-wrap: wrap;
    background-color: #e6e6e6;
    max-width: 1000px;
    width: 100%;
    margin-right: auto;
    margin-left : auto;
    padding: 0 1vw;
    padding: 0 1svw;
    /* container: search-section / inline-size;
       resize: horizontal;
       overflow: auto; */
}
.content {
    width: 70%;
    /* @container search-section (width < 768px) {
       width: 100%;
       } */
}

.pagination {
    display: flex;
    width: 100%;
    margin-bottom: 2rem;
    div {
	flex: 1;
	&.pagination__back { text-align: left; }
	&.pagination__btn { text-align: center; }
	&.pagination__next { text-align: right; }
    }
}

.property-list {
    margin-bottom: 2rem;
    min-width: 100%;
}
.property-list__item {
    /* margin-bottom: 1rem; */
    min-width: 100%;
}
.property-list__title {
    display: flex;
    align-items: center;
    padding: 0.4em 0.3em 0.3em 26px;
    margin: 0.2em auto;
    font-size: 16px;
    font-weight: normal;
    background-repeat: no-repeat;
    background-position: left 60%;
    background-image: url("../images/h2.gif");
    border: 1px solid dimgray;
    color: dimgray;
}
.property-card {
    position: relative;
    display: flex;
    flex: 1;
}
.property-card__link {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: contents;
}
.property-card__image {
    width: 30%;
    min-width: 30%;
    img {
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: contain;
	display: block;
    }
}
.property-card__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-left: 5px;
    justify-content: space-evenly;
    container: card-content / inline-size;
}
.property-card__info-row {
    display: flex;
    align-items: baseline;
    flex: 1;
    font-size: 0.95rem;
    gap: 1rem;
    @container card-content (width < 300px) {
	font-size: 0.8125rem;
	gap: 0.1rem;
    }
}
.property-card__value {
    /* color: #000;
       width: fit-content; */
    width: 100%;
    &:before {
	display: block;
	font-size: 11px;
	background: #565656;
	border-radius: 2px;
	color: #eee;
	padding: 1px 2px;
	margin: 1px 3px 0 0;
	width: fit-content;
	display: inline-block;
	font-weight: normal;
    }
}
@container card-content (width < 300px) {
    .property-card__value {
	font-size: 12px;
	&:before {font-size: 9px;}
	@container card-content (width < 220px) {
	    font-size: 10px;
	}
    }

}
.property-card__fee {
    font-size: 150%;
    font-weight: bold;
    color: #f82055;
    width: auto;
    @container card-content (width < 300px) {
	font-size: 1rem;
    }
    &:before {
	content: "賃料";
	display: block;
    }
}
.property-card__location { width: calc(100% - 10px); }
.property-card__genre:before { content: "種類"; }
.property-card__madori:before { content: "間取・面積"; }
.property-card__location:before { content: "所在地"; }
.property-card__area:before { content: "土地"; }
.property-card__senyu:before { content: "建物"; }
.property-card__info-details {
    margin-left: 5px;
    display: flex;
    flex-wrap: wrap;
    flex: 1;
}
.property-card__icon-row {
    display: flex;
    flex: 1;
    img {
	display: block;
	width: 70%;
	height: auto;
    }
}
.property-card__memo-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    font-size: 9px;
    gap: 1rem;
}
.property-card__memo {
    flex: 1;
    font-size: 10px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    @container card-content (width < 300px) {
	font-size: 8px;
    }
}
.property-card__button {
    z-index: 2;
    background-color: #333;
    border: 2px solid #333;
    color: #fff;
    line-height: 30px;
    padding: 0;
    &:hover {
	background-color: #fff;
	border-color: #59b1eb;
	color: #59b1eb;
	& a { color: #59b1eb; }
	&:before, &:after {
	    height: 0;
	    background-color: #59b1eb;
	}
    }
    &:before, &:after {
	width: 100%;
	height: 50%;
	background-color: #333;
    }
    a {
	text-decoration: none;
	color: #fff;
	display: inline-block;
	width: 100%;
	padding: 0.2rem 0.8rem;
    }
}
.search-form {
    width: 30%;
    /* @container search-section (width < 768px) {
       width: 100%;
       } */
    input[type="checkbox"] { margin-right: 10px; }
}
.search-form__sidebar {
    padding-left: 1rem;
}
.search-form__section {
    margin-bottom: 20px;
    container: search-section / inline-size;
}

.search-form__title {
    font-size: 1rem;
    font-weight: bold;
    padding: 0 0 6px 2px;
}
.search-form__area-display {
    margin-bottom: 10px;
    margin-left: 15px;
}
.search-form__btn {
    font-size: 110%;
    position: relative;
    z-index: 2;
    background-color: #333;
    border: 2px solid #333;
    color: #fff;
    line-height: 32px;
    width: 100%;
    box-shadow: 5px 5px 4px #AAAAAA;
    &:hover {
	background-color: #fff;
	border-color: #59b1eb;
	color: #59b1eb;
    }
}
.search-form__btn--select-area {
    width: 40%;
    min-width: 7rem;
    margin-left: 15px;
}
.search-form__price {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    margin-left: 15px;
    @container search-section (width < 250px) {
	div {
	    width: 100%;
	}
	.select-label {
	    width: 80%;
	    select {
		width: 100%;
	    }
	}
	.search-form__price-tilde, .search-form__tsubo-tilde {
	    transform: rotate(90deg);
	    text-align: center;
	}
    }
}
.search-form__price-carport {
    width: 100%;
    margin-top: 8px;
}

.search-form__checkbox-group {
    padding-left: 15px;
    row-gap: 11px;
}
.search-form__madori {
    display: grid;
    grid-template-columns: repeat(3, auto);
    padding-left: 15px;
    grid-template-areas:
	"R1 all all"
	"K1 DK1 LDK1"
	"K2 DK2 LDK2"
	"K3 DK3 LDK3"
	"K4 DK4 LDK4";
    @container search-section (width < 230px) {
	grid-template-areas:
	    "all all"
	    "R1 K1"
	    "DK1 LDK1"
	    "K2 DK2"
	    "LDK2 K3"
	    "DK3 LDK3"
	    "K4 DK4"
	    "LDK4 LDK4";
    }
    label {
	&:nth-child(1) { grid-area: R1; }
	&:nth-child(2) { grid-area: all; }
	&:nth-child(3) { grid-area: K1; }
	&:nth-child(4) { grid-area: DK1; }
	&:nth-child(5) { grid-area: LDK1; }
	&:nth-child(6) { grid-area: K2; }
	&:nth-child(7) { grid-area: DK2; }
	&:nth-child(8) { grid-area: LDK2; }
	&:nth-child(9) { grid-area: K3; }
	&:nth-child(10) { grid-area: DK3; }
	&:nth-child(11) { grid-area: LDK3; }
	&:nth-child(12) { grid-area: K4; }
	&:nth-child(13) { grid-area: DK4; }
	&:nth-child(14) { grid-area: LDK4; }
    }
}
.search-form__genre {
    display: flex;
    flex-wrap: wrap;
    label {
	width: 100%;
    }
    @container search-section (width < 180px) {
	span:last-child {
	    display: block;
	    padding-left: 1.5rem;
	}
    }
}
.search-form__display-mode {
    display: flex;
    flex-wrap: wrap;
}
.search-form__display-mode-item {
    width: 100%;
    &:first-child { margin-bottom: 8px; }
}
.select-label {
    display: inline-flex;
    align-items: center;
    position: relative;
    &:after {
	position: absolute;
	right: 8px;
	width: 10px;
	height: 7px;
	background-color: #535353;
	clip-path: polygon(0 0, 100% 0, 50% 100%);
	content: '';
	pointer-events: none;
    }
    select {
	appearance: none;
	height: 2.8em;
	padding: .4em calc(.5em + 20px) .4em .5em;
	border: 1px solid #d0d0d0;
	border-radius: 3px;
	background-color: #fff;
	color: #333333;
	font-size: 1em;
	cursor: pointer;
    }
}
@media (width < 700px) {
    h2, .property-list__title {
	font-size: 14px;
    }
    .content {
	width: 100%;
    }
    .property-list__item {
	padding: 4px 6px;
    }
    .search-form {
	width: 100%;
	padding: 0 3vw;
	padding: 0 3svw;
    }
    .search-form__sidebar {
	padding-left: 0;
    }
    .search-form__price {
	width: fit-content;
	justify-content: initial;
    }
    .search-form__price-tilde {
	margin: 0 15px;
    }
}
@media (hover: none) {
    /* タッチデバイス向け */
    .property-card__link {
	display: block; 
	
    }
    .property-card__memo {
	flex: initial;
	width: 90%;
	&:after {
	    display: block;
	    content: "";
	    border-top: solid 1.5px #666666;
	    border-right: solid 1.5px #666666;
	    width: 20px;
	    height: 20px;
	    position: absolute;
	    right: 2px;
	    top: 50%;
	    transform: translate(0, -50%) rotate(45deg);
	}
    }
    .property-card__button { display: none; }
}