@charset "utf-8";

/*==============================================================
　ページタイトルバナー
==============================================================*/
#page_banner {
    width: 99%;
    margin: -70px auto 0;        /* topbarの高さ分上に引き上げ */
    padding: 118px 0 40px;       /* 上: 70px(topbar) + 48px(元のpadding) */
    background: #3b2a1a;
    background-image:
        repeating-linear-gradient(
            90deg,
            rgba(255,255,255,0.03) 0px,
            rgba(255,255,255,0.03) 1px,
            transparent 1px,
            transparent 60px
        );
    border-bottom: 1px solid #b8a070;
    text-align: center;
    position: relative;
    z-index: 1;
}

.page_banner_sub {
    width: 100%;
    font-family: 'Yu Mincho', 'YuMincho', 'Hiragino Mincho ProN', serif;
    font-size: 13px;
    letter-spacing: 0.5em;
    color: #b8a070;
    margin: 0 0 10px;
}

.page_banner_title {
    font-family: 'Yu Mincho', 'YuMincho', 'Hiragino Mincho ProN', serif;
    font-size: 38px;
    font-weight: normal;
    letter-spacing: 0.4em;
    color: #f5e8d0;
    text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

/*==============================================================
　共通：innerラッパー・見出し
==============================================================*/
.facility_inner {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
}

.fe_midashi {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin: 0 0 32px;
    font-family: 'Yu Mincho', 'YuMincho', 'Hiragino Mincho ProN', serif;
    font-size: 28px;
    font-weight: normal;
    color: #5a3e1b;
    letter-spacing: 0.25em;
}

.fe_midashi::before,
.fe_midashi::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, #b8a070);
}
.fe_midashi::after {
    background: linear-gradient(to left, transparent, #b8a070);
}

/*==============================================================
　レンタルスペース紹介
==============================================================*/
#facility_intro {
    width: 99%;
    margin: 0 auto;
    padding: 50px 0 50px;
    border-bottom: 1px solid #b8a070;
}

.intro_grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
}

.intro_catch {
    border-left: 3px solid #b8a070;
    padding-left: 24px;
}

.intro_catch p {
    width: 100%;
    margin: 0 0 8px;
    font-family: 'Yu Mincho', 'YuMincho', 'Hiragino Mincho ProN', serif;
    font-size: 16px;
    color: #4a3520;
    letter-spacing: 0.1em;
    line-height: 1.8;
}

.intro_conclusion {
    margin-top: 20px !important;
    font-size: 17px !important;
    color: #5a3e1b !important;
    font-weight: bold;
}

.intro_info {
    background: rgba(255,255,255,0.45);
    border: 1px solid #d4b896;
    border-radius: 2px;
    padding: 24px 28px;
}

.info_item {
    display: flex;
    gap: 16px;
    align-items: baseline;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px dotted #d4b896;
}

.info_item:last-of-type { margin-bottom: 20px; }

.info_label {
    font-family: 'Yu Mincho', 'YuMincho', 'Hiragino Mincho ProN', serif;
    font-size: 13px;
    color: #b8a070;
    letter-spacing: 0.2em;
    white-space: nowrap;
    background: rgba(184,160,112,0.12);
    border: 1px solid #d4b896;
    padding: 3px 10px;
    border-radius: 2px;
}

.info_content {
    font-family: 'Yu Mincho', 'YuMincho', 'Hiragino Mincho ProN', serif;
    font-size: 15px;
    color: #4a3520;
    line-height: 1.8;
    letter-spacing: 0.08em;
}

.info_note { font-size: 12px; color: #9a7a50; }

.intro_links {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
}

.intro_links a {
    font-family: 'Yu Mincho', 'YuMincho', 'Hiragino Mincho ProN', serif;
    font-size: 13px;
    color: #5a7a3a;
    text-decoration: none;
    border-bottom: 1px solid #5a7a3a;
    padding-bottom: 2px;
    transition: color 0.2s;
    width: fit-content;
}

.intro_links a:hover { color: #3a5a1a; }

/*==============================================================
　フォトギャラリー
==============================================================*/
#facility_gallery {
    width: 99%;
    margin: 0 auto;
    padding: 50px 0 50px;
    border-bottom: 1px solid #b8a070;
}

/*==============================================================
　設備・器具
==============================================================*/
#equipment_section {
    width: 99%;
    margin: 0 auto;
    padding: 50px 0 50px;
    border-bottom: 1px solid #b8a070;
}

.equipment_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.equipment_card {
    background: rgba(255,255,255,0.45);
    border: 1px solid #d4b896;
    border-radius: 2px;
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.3s, box-shadow 0.3s;
}

.equipment_card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(90,62,27,0.12);
}

.equipment_icon {
    font-size: 28px;
    color: #b8a070;
    margin-bottom: 12px;
    line-height: 1;
}

.equipment_name {
    font-family: 'Yu Mincho', 'YuMincho', 'Hiragino Mincho ProN', serif;
    font-size: 18px;
    font-weight: normal;
    color: #5a3e1b;
    letter-spacing: 0.15em;
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px dotted #d4b896;
    width: 100%;
}

.equipment_list {
    list-style: none;
    width: 100%;
    text-align: left;
    margin: 0 0 16px;
    padding: 0;
    flex: 1;
}

.equipment_list li {
    font-family: 'Yu Mincho', 'YuMincho', 'Hiragino Mincho ProN', serif;
    font-size: 14px;
    color: #4a3520;
    line-height: 2.0;
    letter-spacing: 0.05em;
    padding-left: 1em;
    position: relative;
}

.equipment_list li::before {
    content: '・';
    position: absolute;
    left: 0;
    color: #b8a070;
}

.equipment_note {
    width: 100%;
    font-size: 12px;
    color: #7a6040;
    line-height: 1.8;
    margin: 0;
    text-align: center;
}

.equipment_note a {
    color: #5a7a3a;
    text-decoration: none;
    border-bottom: 1px solid #5a7a3a;
    transition: color 0.2s;
}

.equipment_note a:hover { color: #3a5a1a; }

/*==============================================================
　利用風景
==============================================================*/
#scene_section {
    width: 99%;
    margin: 0 auto;
    padding: 50px 0 60px;
    border-bottom: 1px solid #b8a070;
}

.scene_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.scene_item {
    overflow: hidden;
    background: #2a1a0a;
}

.scene_item img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease, opacity 0.4s ease;
}

.scene_item:hover img {
    transform: scale(1.06);
    opacity: 0.82;
}

/*==============================================================
　スマホ対応（〜800px）
==============================================================*/
@media screen and (max-width: 800px) {

    /* intro：縦1列に */
    .intro_grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    /* 設備・器具：縦1列に */
    .equipment_grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .equipment_card {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 24px 20px;
    }

    /* 利用風景：2列に */
    .scene_grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/*==============================================================
　スマホ対応（〜480px）
==============================================================*/
@media screen and (max-width: 480px) {

    .fe_midashi {
        font-size: 20px;
    }

    .info_item {
        flex-direction: column;
        gap: 6px;
    }

    .info_label {
        white-space: normal;
    }

    /* 利用風景：1列に */
    .scene_grid {
        grid-template-columns: 1fr;
    }

    .scene_item img {
        height: 220px;
    }
}