@import 'contract.css';

ul.list li a {
	display: flex;
	gap: 5px;
	align-items: center;
	justify-content: flex-start;
	font-size: 1.2em;
	font-weight: bold;
}

ul.list li a span {
	border: solid 2px var(--color-green);
	height: 22px;
	font-size: 12px;
	aspect-ratio: 1;
	border-radius: 100%;
	color: var(--color-green);
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 12px;
}

ul.list li a span i {
	top: 1px;
}

section h2 {
	text-align: center;
	color: var(--color-black);
}
main .store-list table tr :is(th, td) {
	vertical-align: middle;
}
main .store-list table tr :is(th, td):nth-of-type(1) {
	width: 30%;
	border-right: solid 1px var(--color-gray);
}

main .store-list table tr :is(th, td):nth-of-type(3) {
	width: 7em;
	padding: 15px;
	text-align: center;
	border-left: solid 1px var(--color-gray);
}

main .store-list table tr td:nth-of-type(1) a {
	display: flex;
	align-items: center;
	gap: 5px;
}

main .store-list table tr td:nth-of-type(1) a i {
	color: var(--color-green);
	font-size: 1.4em;
	display: inline-block;
}

main .store-list table tr td:nth-of-type(3) {
	color: var(--color-gray);
	font-size: 1.6em;
	padding: 5px;
}

main .store-list table tr td:nth-of-type(3) a {
	color: var(--color-green);
}


/* Details */
#store-details section h1 {
	text-align: center;
	padding-bottom: var(--section-space);
}

#store-details section h1 small {
	display: block;
}

#store-details .information article:not(.property) {
	width:100%;
	max-width:520px;
}
#store-details .item-slider {
	margin-top: 10px;
}

#store-details .property h2 {
	color: var(--color-green);
	font-size: 1.6em;
	text-align: left;
}
#store-details .property h2 + p {
	margin-top: calc(var(--margin) / 4);
}
#store-details .property p + h2 {
	margin-top: calc(var(--margin) / 2);
}

#store-details :is(.img-main, .swiper-slide, iframe) {
	border-radius: 4px;
}

#store-details section > div > h2 {
	color: var(--color-green);
}

#store-details #drawing {
	max-height:600px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
#store-details #drawing svg {
	max-width:100%;
	max-height: 100%;
	width:100%;
	height:100%;
	object-fit: contain;
}

#store-details .floor {
	text-align: center;
	padding: var(--padding);
}

#store-details .floor img {
	max-width: 600px;
	min-width: auto;
}

#store-details table {
	table-layout: auto;
	font-size: var(--font-size);
}

#store-details table thead th {
	color: var(--color-black);
	white-space: nowrap;
	text-align: center;
}

#store-details table tr :is(th, td) {
	padding: 5px 10px;
	text-align: center;
	vertical-align: middle;
}

#store-details table tr :is(th, td):not(:last-of-type) {
	border-right: solid 1px var(--color-gray);
}

#store-details table tr td.price {
	font-size: 1.2em;
	font-weight: bold;
}

#store-details table tr td:nth-last-of-type(2) {
	font-size: 1.2em;
}

#store-details table tr td:nth-last-of-type(2) a {
	color: var(--color-green);
}

#store-details table .button {
	font-size: var(--font-size);
	font-weight: 500;
	letter-spacing: 0;
	padding-block: 5px;
	box-shadow: none;
	line-height: 1.5;
	top:0;
	left:0;
}
#store-details .button i {
	margin-top: 0;
}
#store-details div.button {
	background:var(--color-gray);
}

#store-details .facility li {
	padding: 15px;
}

#store-details .facility figure {
	border-radius: 100%;
}

#store-details .facility h3 {
	font-size: 1.2em;
	margin-top: 10px;
}

#store-details .facility p {
	margin-top: 10px;
}


.size-80 , .size-80 rect { background-color: #e54040; fill: #e54040; }
.size-60 , .size-60 rect { background-color: #e540a5; fill: #e540a5; }
.size-40 , .size-40 rect { background-color: #b840e5; fill: #b840e5; }
.size-26 , .size-26 rect { background-color: #5340e5; fill: #5340e5; }
.size-20 , .size-20 rect { background-color: #408ee5; fill: #408ee5; }
.size-16 , .size-16 rect { background-color: #6bd456; fill: #6bd456; }
.size-bike , .size-bike rect { background-color: #e5a540; fill: #e5a540; }
.room.contract rect { fill: var(--color-gray); }
.room:not(.contract) text:last-of-type { display:none; }
.room.contract text:first-of-type { display:none; }

.floor-map-info li {
	width: 100%;
	min-width:60px;
	text-align: center;
	padding: 5px;
	font-size:0.8em;
	color: var(--color-white);
	border-radius:var(--radius-inner);
}

#drawing .room {
	cursor: pointer;
}
#drawing .room:hover rect {
	filter:brightness(1.1);
}
#drawing .room tspan {
	fill:var(--color-white);
}

#store-details #price-zone > div .coupon {
    position: sticky;
    top:100px;
    z-index:4;
}
#store-details #price-zone table td:has(> span) {
    padding:0 2px;
}
#store-details #price-zone table td > span {
    padding:3px 5px;
    color:var(--color-white);
    border-radius: 4px;
    display:flex;
    align-items: center;
    justify-content: center;
}
#store-details #price-zone table td:has(> s) {

}
#store-details #price-zone table td s {
    color:var(--color-gray);
    font-size:0.8em;
    line-height:1;
    display:block;
    font-weight:normal;
}
#store-details #price-zone table td strong {
    color:var(--color-red);
    margin:0;
    display:block;
}
#store-details #price-zone table td .flex {
    height:100%;
    gap:10px;
}
#store-details #price-zone table td .button {
    margin:0;
    flex:1;
    min-width:auto;
    max-width:none;
}

#store-details .icons {
    grid-template-columns: repeat(3, 1fr);
    gap:10px 5px;
}
#store-details .icons figure img {
    border-radius:8px;
    border:solid 1px var(--color-gray);
    padding:10px;
    display:block;
}
#store-details .icons figure figcaption {
    font-size:0.6em;
    text-align:center;
    margin-top:5px;
    line-height:1.2;
}


/* ポップアップ */
.popup {
	position: fixed;
	bottom: -100vh;
	left: 50%;
	width: calc(100% - 20px);
	max-width:400px;
	background: var(--color-white);
	border: 4px solid var(--color-green);
	border-bottom:0;
	padding: 10px;
	z-index: 10;
	border-radius: 0 var(--radius) 0 0;
	transition:var(--transition);
	translate:-50% 0;
	box-shadow:var(--shadow-2);
}
.popup.show {
	bottom:0;
}

.popup .close.button {
	background:var(--color-gray);
}

.popup h3 {
	position:absolute;
	bottom:100%;
	left:-4px;
	border-radius:var(--radius-inner) var(--radius-inner) 0 0;
	padding:5px 20px;
	background:var(--color-green);
	color:var(--color-white);
	font-size:1.2em;
}

.popup table {
	margin-top:0;
}
.popup table th {
	background-color: var(--color-lightgreen);
	width: 50%;
}
.popup table td:has(> s) {

}
.popup table td s {
    color:var(--color-gray);
    font-size:0.8em;
    line-height:1;
    display:block;
    font-weight:normal;
}
.popup table td strong {
    color:var(--color-red);
    margin:0;
    display:block;
}

.popup > div {
	margin-top:10px;
}
.popup .buttons {
	flex-wrap: nowrap;
	flex-direction: row !important;
}
.popup .button {
	border-radius:var(--radius-inner);
	padding:5px;
	flex:1;
	min-width:auto;
}


@media (max-width: 920px) {
	.button {
		min-width: unset;
	}

	#store-details #price-zone table tr > :nth-child(2), 
	#store-details #price-zone table tr > :nth-child(4) { 
		 display: none; 
	} 

	#store-details table tr :is(th, td) {
		padding: 5px;
		line-height: 1.5;
	}
}
@media (max-width: 820px) {
	main .store-list table {
		font-size: 1em;
	}

	main .store-list table tr th {
		text-align: center;
		vertical-align: middle;
	}

	main .store-list table tr :is(th, td):nth-of-type(1) {
		width: unset;
	}

	main .store-list table tr :is(th, td):nth-of-type(3) {
		width: 60px;
	}

	main .store-list table tr :is(th, td):nth-of-type(3),
	main .store-list table :is(th, td) {
		padding: 10px;
	}

    #store-details #price-zone > div .coupon {
        top:60px;
    }
}
@media (max-width: 620px) {
	main h1 {
		font-size: clamp(1.6em, 2.5vw, 2em);
	}

	#store-details .facility {
		grid-template-columns: repeat(2, 1fr);
	}

	#store-details .facility h3 {
		font-size: 1em;
		text-align:justify;
	}

	#store-details .facility p {
		font-size: 1em;
	}
}

@media ( max-width:520px ){
	#store-details .button {
        padding:5px;
	}
    #store-details #price-zone table td .flex {
        flex-direction: column;
        gap:5px;
    }
}