﻿.site-list + .ttl-01 {margin-top:50px;}
.site-list + .site-list {margin-top:50px;}

.site-list .txt1 dl {text-align:left; margin:-1px 0 0 0; border:1px solid #333; display:flex;}
.site-list .txt1 dt {width:10em; padding:0.5em 1.0em; background-color:#eee; box-sizing:border-box;}
.site-list .txt1 dd {padding:0.5em 1.0em; border-left:solid 1px #333; box-sizing:border-box; flex:1;}
.site-list .txt2 {text-align:left; margin:0.5em 0 0 0;}
.site-list .txt2 li {padding:0 0 0 1.1em; position:relative;}
.site-list .txt2 li::before {content:'※'; position:absolute; top:0; left:0;}
.site-list .txt3 {margin:15px 0 0 0; display:flex; flex-wrap:wrap; justify-content:center;}
.site-list .txt3 > div {text-align:left; margin:0.2em; padding:0.2em 0.5em; border:1px solid #333; border-radius:3px; display:flex; align-items:center;}
.site-list .txt3 .name {font-size:120%; font-weight:700; white-space:nowrap;}
.site-list .txt3 .tag {margin:0 0 0 0.5em;}
.site-list .txt3 .tag > a,
.site-list .txt3 .tag > span {width:4em; font-size:100%; line-height:1; text-decoration:none; color:#fff; padding:0.5em 0; background-color:rgba(0,40,80,0.9); border-radius:3px; display:flex; justify-content:center; align-items:center;}
.site-list .txt3 .tag.off > a,
.site-list .txt3 .tag.off > span,
.site-list .txt3 .tag.not > a,
.site-list .txt3 .tag.not > span,
.site-list .txt3 .tag.none > a,
.site-list .txt3 .tag.none > span {background-color:rgba(0,0,0,0.7);}
.site-list .txt3 .size {margin:0 0 0 1.0em;}
.site-list .txt4 {display:flex; justify-content:center; align-items:center;}
.site-list .txt4 dd {padding:0 0 0 0.3em;}
.site-list .txt4 dd input {font-size:1.8rem; border:1px solid #333; border-radius:3px;}
.site-list .txt5 a {font-size:100%; line-height:1; text-decoration:none; color:#fff; padding:0.8em 1.5em; background-color:rgba(0,40,80,0.9); border-radius:3px; display:inline-block; transition:opacity 0.3s ease;}
.site-list .txt5 a:hover {opacity:0.7;}
.site-list .cancel {margin:30px 0 0 0; padding:15px 30px 30px 30px; background-color:#eee; border-radius:10px;}
.site-list .cancel dl {text-align:left;}
.site-list .cancel dt {font-size:140%;}
.site-list .cancel dd {margin:5px 0 0 0;}

.map {margin:30px auto 0 auto; display:inline-block; position:relative;}
.map img {display:block;}
.map a {width:10%; display:block; position:absolute;}
.map a > span {width:100%; padding:100% 0 0 0; border-radius:100%; background-color:rgba(0,40,80,0.3); box-shadow:1px 1px 3px rgba(0,0,0,0.7); display:block; position:relative; transition:background-color 0.3s ease, transform 0.3s ease; will-change:transform;}
.map a > span::before {content:'予約'; font-size:120%; line-height:1; white-space:nowrap; color:#fff; display:block; position:absolute; top:50%; left:50%; transform:translate3d(-50%,-50%,0); opacity:0; transition:opacity 0.3s ease; will-change:transform;}
.map a:hover > span {transform:scale3d(1.1,1.1,1); background-color:rgba(0,40,80,0.9);}
.map a:hover > span::before {opacity:1;}
.map a.A-1 {top:5.0%; left:13.8%;}
.map a.B-1 {top:22.4%; left:32.2%;}
.map a.B-2 {top:22.4%; left:50.2%;}
.map a.C-1 {top:28.8%; left:33.2%;}
.map a.C-2 {top:28.8%; left:50.7%;}
.map a.D-1 {top:35.2%; left:37.2%;}
.map a.E-1 {top:25.4%; left:10.4%;}
.map a.E-2 {top:33.4%; left:18.4%;}
.map a.E-3 {top:32.0%; left:6.2%;}
.map a.E-4 {top:38.9%; left:2.8%;}
.map a.F-1 {top:60.4%; left:52.2%;}
.map a.off,
.map a.not,
.map a.none {opacity:1; pointer-events:none;}
.map a.off::before,
.map a.not::before,
.map a.none::before {content:'予約済'; font-size:100%; line-height:1; white-space:nowrap; color:#fff; display:block; position:absolute; top:50%; left:50%; transform:translate3d(-50%,-50%,0); opacity:1; z-index:5;}
.map a.off span,
.map a.not span,
.map a.none span {background-color:rgba(0,0,0,0.8);}
.map a.off::before {content:'予約済';}
.map a.not::before {content:'整備中';}
.map a.none::before {content:'休';}

@media screen and (max-width:767px){
	.site-list + .ttl-01 {margin-top:30px;}
	.site-list + .site-list {margin-top:30px;}

	.site-list .txt1 dl {display:block;}
	.site-list .txt1 dt {width:auto; padding:0 0.5em;}
	.site-list .txt1 dd {padding:0.5em; border-left:none; border-top:solid 1px #333;}
	.site-list .txt2 li {font-size:90%;}
	.site-list .cancel {padding:10px 15px 15px 15px;}

	.map a > span::before {font-size:3.0vw;}
	.map a.off::before,
	.map a.not::before {font-size:2.6vw;}
}