@charset "utf-8";
/* CSS Document */

/*sm　*/
#title{
background: url("../img/bg_facility.jpg") center center/cover no-repeat;
}

#area_nav ul{
margin-bottom: 30px;
}

#area_nav li{
border: 1px solid rgba(30,30,30,1.0);
box-sizing: border-box;
text-align: center;
}

#area_nav li:not(:last-child){
margin-bottom: 30px;
}

#area_nav li a{
display: block;
padding: 10px 0;
}

#facility_list h3{
margin-bottom: 30px;
padding-top: 20px;
font-size: 2.0rem;
text-align: center;
}

#facility_list .facility_img{
margin-bottom: 15px;
text-align: center;
}

#facility_list .facility_img img{
width: 80%;
}

#facility_list .affiliated_company{
display: inline-block;
margin-bottom: 5px;
padding: 3px 8px 1px;
border: 1px solid rgba(150, 65, 85, 1.0);
outline: 1px solid rgba(150, 65, 85, 1.0);
outline-offset: 1px;
border-radius: 10px;
color: rgba(150, 65, 85, 1.0);
font-size: 1.2rem;
font-weight: bold;
}

#facility_list h4{
font-size: 2.0rem;
}

#facility_list h5{
display: inline-block;
margin-bottom: 10px;
padding: 5px 10px 3px;
font-size: 1.4rem;
}

#facility_list dt{
font-weight: bold;
}

#facility_list dd{
margin-bottom: 15px;
line-height: 1.4;
}

.tel_mdlg{
display: none;
}

#facility_list .view-detail,
#facility_list .external-link{
margin-bottom: 50px;
padding-bottom: 15px;
border-bottom: 1px solid rgba(30,30,30,0.5);
text-align: right;
font-size: 1.4rem;
font-weight: bold;
}

#facility_list .view-detail{
padding-right: 20px;
}

#facility_list .external-link{
padding-right: 25px;
}

#facility_list .external-link a{
position: relative;
}

#facility_list .external-link a:after{
content: "";
display: inline-block;
position: absolute;
top: 0;
right: -20px;
width: 15px;
height: 15px;
background: url(../img/icon_link.svg)center center/cover no-repeat;
}

.area_no_contents{
margin: 0 auto 50px;
padding-bottom: 15px;
border-bottom: 1px solid rgba(30,30,30,0.5);
text-align: center;
}

#facility_detail .facility_profile{
margin-bottom: 30px;
padding: 30px 0 20px;
background-color: rgba(30,30,30,0.05);
text-align: center;
}

#facility_detail .facility_profile .facility_service{
display: inline-block;
margin: 0 auto 5px;
padding: 5px 10px 3px;
font-size: 1.4rem;
}

#facility_detail .facility_profile h3{
margin-bottom: 15px;
font-size: 2.4rem;
font-weight: bold;
line-height: 1.4;
text-align: center;
}

#facility_detail .facility_profile .facility_img{
margin-bottom: 15px;
}

#facility_detail .facility_profile .facility_introduction{
margin-bottom: 30px;
text-align: left;
}

#facility_detail .facility_profile dl{
text-align: left;
}

#facility_detail .facility_profile dt{
display: inline-block;
margin-bottom: 5px;
padding: 5px 20px 3px;
border-radius: 20px;
font-size: 1.4rem;
text-align: center;
}

#facility_detail .facility_profile dd{
margin-bottom: 10px;
}

#facility_detail .facility_information,
#facility_detail .facility_overview,
#facility_detail .facility_floormap,
#facility_detail .facility_cost{
margin-bottom: 30px;
}

#facility_detail .facility_floormap .facility_img{
text-align: center;
}

#facility_detail .facility_photogallery{
margin-bottom: 22px;/*30-8*/
}

#facility_detail h4{
margin-bottom: 15px;
padding: 10px 0 7px;
background-color: rgba(30,30,30,0.05);
font-size: 2.0rem;
font-weight: bold;
text-align: center;
}

#facility_detail dt{
font-weight: bold;
}

#facility_detail dd{
line-height: 1.4;
}

#facility_detail dd:not(:last-of-type){
margin-bottom: 15px;
}

#facility_detail .facility_profile dd{
font-weight: bold;
}

#facility_detail .facility_overview p{
font-size: 1.8rem;
font-weight: bold;
margin-bottom: 5px;
}

#facility_detail .facility_cost .facility_monthlycost{
font-size: 2.4rem;
font-weight: bold;
}

#facility_detail .facility_photogallery ul{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

#facility_detail .facility_photogallery li{
width: 49%;
margin-bottom: 8px;
}

#facility_detail .facility_photogallery li img{
aspect-ratio: 4 / 3;
object-fit: cover;
}

.facilityModal{
display: none;
}

.facility_photogallery .thumbnail{
position: relative;
overflow: hidden;
cursor: pointer;
}

.facility_photogallery .thumbnail img{
display: block;
width: 100%;
height: auto;
}

.modal-figure{
display: grid;
place-items: center;
}

.modal-figure img{
width: auto;
height: auto;
}

.zoom-icon {
position: absolute;
right: 10px;
bottom: 10px;
width: 20px;
height: 20px;
border-radius: 50%;
background: rgba(255,255,255,1.0);
}

.zoom-icon::before,
.zoom-icon::after{
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(90,90,90,1.0);
}

.zoom-icon::before{
width: 2px;
height: 10px;
}

.zoom-icon::after{
width: 10px;
height: 2px;
}

.gallery-close {
position: absolute;
top: -20px;
right: -20px;
z-index: 20;
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(30,30,30,1.0);
color: rgba(255,255,255,1.0);
cursor: pointer;
display: inline-grid;
place-items: center;
}

.gallery-close::before,
.gallery-close::after {
content: "";
position: absolute;
width: 18px;
height: 2px;
background: rgba(255,255,255,1.0);
left: 50%;
top: 50%;
transform-origin: center;
}

.gallery-close::before {
transform: translate(-50%, -50%) rotate(45deg);
}

.gallery-close::after {
transform: translate(-50%, -50%) rotate(-45deg);
}

.gallery-nav{
position: absolute;
top: 0;
bottom: 0;
width: 30%; /* クリック範囲調整 */
cursor: pointer;
}

.gallery-nav.prev{
left: 0;
}

.gallery-nav.next{
right: 0;
}

.gallery-nav::after{
content: "";
position: absolute;
top: 50%;
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(241,201,76,1.0);
transform: translateY(-50%);
z-index: 0;
}

.gallery-nav.prev::after{
left: -10px;
}

.gallery-nav.next::after{
right: -10px;
}

.gallery-nav::before {
content: "";
position: absolute;
top: 50%;
width: 10px;
height: 10px;
border-top: 2px solid rgba(255,255,255,1.0);
border-right: 2px solid rgba(255,255,255,1.0);
transform: translateY(-50%) rotate(45deg);
pointer-events: none;
z-index: 1;
}

.gallery-nav.prev::before{
left: 6px;
transform: translateY(-50%) rotate(-135deg);
}

.gallery-nav.next::before{
right: 6px;
transform: translateY(-50%) rotate(45deg);
}


/* md*/
@media screen and (min-width: 768px) {
#area_nav ul{
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
}

#area_nav li{
width: 24%;
}

#area_nav li:not(:last-child){
margin-bottom: 0;
}

#facility_list .facility_contents{
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
}

#facility_list .facility_contents a{
display: block;/* クリック領域を面で確保 */
width: 40%;
}

#facility_list .facility_contents .facility_img img{
width: 100%;
}

#facility_list .facility_contents .facility_text{
width: 58%;
}

#facility_list h3{
margin-bottom: 50px;
padding-top: 50px;
}

#facility_list dl{
display: flex;
flex-wrap: wrap;
align-items: baseline;
}

#facility_list dt{
width: 80px;
}

#facility_list dd{
width: calc(100% - 80px);
margin-bottom: 0;
}

.tel_mdlg{
display: block;
}

.tel_sm{
display: none;
}

#facility_detail .facility_profile{
margin-bottom: 50px;
padding: 50px 0 30px;
}

#facility_detail .facility_profile .facility_service{
margin: 0 auto 15px;
}

#facility_detail .facility_profile .facility_frame{
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
}

#facility_detail .facility_profile .facility_img{
width: 40%;
margin-bottom: 0;
}

#facility_detail .facility_profile .facility_img img{
width: 100%;
}

#facility_detail .facility_profile .facility_text{
width: 58%;
}

#facility_detail .facility_profile dl{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}

#facility_detail .facility_profile dt{
width: 38%;
margin-bottom: 0;
padding: 5px 0 3px;
}

#facility_detail .facility_profile dt,
#facility_detail .facility_profile dd{
margin-bottom: 20px;
}

#facility_detail .facility_profile dd{
width: 60%;
}

#facility_detail .facility_information,
#facility_detail .facility_overview,
#facility_detail .facility_floormap,
#facility_detail .facility_cost{
margin-bottom: 50px;
}

#facility_detail .facility_photogallery{
margin-bottom: 40px;
}

#facility_detail h4{
margin-bottom: 30px;
}

#facility_detail dl{
display: flex;
flex-wrap: wrap;
align-items: baseline;
}

#facility_detail .facility_information dl{
margin-bottom: 30px;
}

#facility_detail dt{
width: 95px;
}

#facility_detail dd{
width: calc(100% - 95px);
}

#facility_detail .facility_photogallery ul{
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
gap: 10px;
}

#facility_detail .facility_photogallery li{
flex: 0 0 calc((100% - 2 * 10px) / 3);
margin-bottom: 0;
}

.gallery-close {
width: 50px;
height: 50px;
}

.gallery-close::before,
.gallery-close::after {
width: 20px;
}

.gallery-nav::after{
width: 50px;
height: 50px;
}

.gallery-nav.prev::after{
left: -20px;
}

.gallery-nav.next::after{
right: -20px;
}

.gallery-nav::before {
width: 15px;
height: 15px;
}

.gallery-nav.prev::before{
left: 0;
}

.gallery-nav.next::before{
right: 0;
}
}


/* lg*/
@media screen and (min-width: 1024px) {
#area_nav ul li a{
transition: 0.3s;
}

#area_nav ul li a:hover{
background-color: rgba(30,30,30,0.05);
}

#facility_list .facility_contents .facility_img img{
transition: 0.3s;
}

#facility_list .facility_contents .facility_img img:hover{
transform: scale(1.02);
}

#facility_list .external-link a:after{
transition: 0.3s;
}

#facility_list .external-link a:hover:after{
top: -3px;
}

#facility_detail .facility_information dl{
width: 800px;
margin: 0 auto 30px;
}

#facility_detail .facility_overview .facility_overview_frame,
#facility_detail .facility_cost dl{
width: 800px;
margin: 0 auto;
}

.gallery-close,
.gallery-nav::after{
transition: 0.3s;
}

.gallery-close:hover{
transform: scale(1.02);
}

.gallery-nav:hover::after{
transform: translateY(-50%) scale(1.02);
}
}