@charset "UTF-8";

/*======================================================
レスポンシブはみ出しチェック用
=======================================================*/
/* * {  outline: 2px solid red;} */

/*======================================================
WordPressダッシュボードに関する修正
=======================================================*/
.acf-field .acf-label label {
    font-weight: bold;
}


/*======================================================
TOPページ・下層ページ用共通
=======================================================*/

.page-header-image{
    margin-bottom:40px;
    img{
        width:100%;
    }
}

/*======================================================
施設ページ 
======================================================*/
.page-template-page-facility{
    article{
        padding:4em 0;
    }
    @media(max-width:767px){
        article{
            padding:4em 1em;
        }
    }
}
.facility-main-image-wrapper{
    display: grid;
    justify-content: center;
}

.facility-main-image{
   text-align: center;
   img{
       margin-inline:auto;
   }
}

.facility-main-info{
    max-width:600px;
    margin:20px auto;
}

/*------------------------------------------------------
施設概要
-----------------------------------------------------*/

.facility-outline{
    background: #fff;
    }


/*------------------------------------------------------
サービス内容・設備等
-----------------------------------------------------*/
.facility-point-wrapper{
    display: grid;
    grid-template-columns:repeat(auto-fit, minmax(300px,auto));
    gap: 20px;
    margin-bottom:4em;
}




/*------------------------------------------------------
ギャラリー
-----------------------------------------------------*/
.facility-gallery{
    max-width: 1000px;
    margin-inline:auto;
    display: grid;
    gap: 10px;
    margin-bottom:20px;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));

}

/*------------------------------------------------------
資料ダウンロード
-----------------------------------------------------*/
.facility-dl-wrapper{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 140px));
    gap: 20px;
    justify-content: center;
    margin-bottom:20px;
    max-width: 600px;
    margin-inline:auto;
    text-align: center;
    justify-self: center;
    li{
        text-align: center;
    }
    img{
        width:100px;
        margin:auto;
    }
}

.facility-dl{
    dt{
        font-size:1.4rem;
        font-weight:bold;
        margin-bottom:0.5em;
    }
}

/*------------------------------------------------------
ご利用までの流れ
-----------------------------------------------------*/

.facility-flow{
display:grid;
    @media(min-width:768px){
        grid-template-columns:1fr 5fr;
    }
    gap:20px;
    margin-bottom:20px;
}
.step-tel{
    font-size:2.4rem;
    font-weight:bold;
    color:#92916d;
}

/*------------------------------------------------------
アクセス
-----------------------------------------------------*/

.map-section{
    display: grid;
    gap: 40px;
    margin-bottom:20px;
    @media(min-width:768px){
        grid-template-columns: 1fr 1fr;
    }
}

.map-content p{
    width:100%;
    aspect-ratio: 16 / 9;
    iframe{
        width:100%;
        height:100%;
    }
}

/*======================================================
施設一覧（全施設）ページ
======================================================*/

/* 施設詳細と施設一覧でフォントサイズを変更する */

.font-change20-15{
    font-size:2.0rem;
}

.facility-list .font-change20-15{
     font-size:1.5rem;
}

.facility-list-group{
    display: grid;
    gap:60px;
    grid-template-columns: repeat(auto-fill,minmax(260px,1fr));
    margin-bottom:60px;
}
.facility-list-room{
    justify-self: start;
    width: 100%;
    p{
        text-align: left !important;
    }
}

.facility-list-room-text p{
    font-size:1.5rem;
}

.facility-list-item{
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 4;
    gap:0;
    
}

/* このページだけ空き状況のテーブル表示を変更 */

.facility-list{

  .ta-res-line thead {
    display: none; /* ヘッダーを非表示 */
  }

  .ta-res-line tbody,
  .ta-res-line tr,
  .ta-res-line td {
    display: block;
    width: 100%;
  }

  .ta-res-line td {
    position: relative;
    padding: 0 0 0 6em;
    border: none;
    box-sizing: border-box;
    font-size:1.6rem;
  }

  .ta-res-line td::before {
    content: attr(data-label)"："; /* 各曜日 */
    position: absolute;
    left: 0.5em;
    top: 50%;
    transform: translateY(-50%);
    font-weight: bold;
    color: #333;
  }
}





/*======================================================
豊勝会・瑞豊会ページ
======================================================*/

.facility-all-wrapper{
    display: grid;
    @media(min-width:768px){
        grid-template-columns: 3fr 8fr;
        gap:20px;
    }    
    margin-bottom:40px;
    a{
        text-decoration: none;;
    }
}

.facility-all-image{
    max-width:320px;
    margin-inline:auto;
    margin-bottom:20px;
    img{
        width: 100%;
        height:auto;
        object-fit:cover;
        aspect-ratio: 1 / 1;
        display: block;
    }
}

.facility-all-text{
    display: grid;
    justify-items: center;
    @media(min-width:768px){
        justify-items: end;
    }
    
}

/*======================================================
法人概要ページ
======================================================*/
/*------------------------------------------------------
会長あいさつ
-----------------------------------------------------*/
.about-greeting{
    display:grid;
    gap:3em;
    margin-bottom:2em;
    max-width: 900px;
    background-color: #fff;
    padding: 40px 20px;
    @media(min-width:768px){
        grid-template-columns: 10fr 3fr;
    }    
}
.about-greeting-image{
    margin-inline:auto;
    img{
        @media(max-width:767px){
        max-width:200px;
        height:auto;
        }
    }
    figcaption{
        font-size:1.2rem;
    }
}
.about-greeting-text{
    margin-left:1em;
    p{
        text-indent:1em;
    }
}

/*------------------------------------------------------
概要
-----------------------------------------------------*/

.about-outline-wrapper{
    display: grid;
    @media(min-width:768px){
        rid-template-columns: 3fr 2fr;
    }
    gap:20px;
}


/*------------------------------------------------------
タイムライン（沿革）
-----------------------------------------------------*/

.timeline-wrapper {
    margin: 28px auto;
    /* border: 1px solid #ccc; */
    background-color: #fff;
    border-radius: 4px;
}

.timeline {
    padding: 20px 10px;
    margin-bottom:40px;
    @media(min-width:768px){
        padding: 40px 20px;
    }
}
        
.timeline dl{
    display: flex;
    line-height: 1.5;
    dt {
        width: 15%;
        @media(max-width:600px){
            width: 40%;
        }
        padding: 0 0 0 20px;
        color: var(--font-color);
        font-weight: bold;
        }
    dd {
        position: relative;
        width: 80%;
        padding: 0 20px 60px 30px;
        border-left: 1px solid var(--blue-dark);;
        &::before {
                    content: "";
                    position: absolute;
                    top: 0;
                    left: -10px;
                    width: 20px;
                    height: 20px;
                    background-color: var(--blue-dark);
                    border-radius: 10px;
                }
            }

    }



 /* 外部リンクよりダウンロードボタン */

.btn-out-dl a{
    padding:1.5em 4em;
    @media(max-width:767px){
        width:100%;
    }
}







/*======================================================
互助会ページ
======================================================*/
/*------------------------------------------------------
互助会ログインページ
-----------------------------------------------------*/

body:has(.login-gojokai){
    height:100vh;
    display: grid;
    place-content: center;
    }


/*------------------------------------------------------
互助会ギャラリー
-----------------------------------------------------*/
.gojokai-gallery-wrapper{
    margin-bottom:40px;
}

.facility-gallery{
    background:#fff;
    padding:40px;
    border-radius: 16px;
}