@charset "UTF-8";

/* =========================================
   コーポラスこくふ 専用CSS
   ※本文は原稿・添付資料の内容のみを使用
========================================= */

.facility-hero {
    background-image: url("../img/corpo-kokufu/corpo.jpg");
    background-position: center center;
}

.corpo-page {
    --facility-accent: #e7a7bd;
    --facility-accent-light: #fff1f6;
    --facility-accent-deep: #8f4560;
}

.corpo-page .section-label {
    color: var(--facility-accent-deep);
    border-color: rgba(231, 167, 189, .45);
    background: rgba(231, 167, 189, .12);
}

.corpo-page .facility-quick-actions a,
.corpo-page .hero-actions a:first-child,
.corpo-page .local-mail-btn {
    background: var(--facility-accent);
}

.corpo-page .hero-actions a:last-child {
    color: var(--facility-accent-deep);
    border-color: rgba(231, 167, 189, .75);
}

.corpo-page .modern-section h1,
.corpo-page .facility-intro-card .main-copy {
    color: #3d2130;
}

.number-list {
    max-width: 920px;
    margin: 24px 0 0;
    padding-left: 1.4em;
    font-size: 1.55rem;
    line-height: 2;
    color: #333;
}

.number-list li + li {
    margin-top: 8px;
}


.equipment-panel {
    margin: 28px 0 26px;
}

.equipment-panel .sub-title {
    margin: 0 0 0;
    padding: 18px 26px;
    border: 1px solid #e8d5de;
    border-left: 6px solid var(--facility-accent);
    background: linear-gradient(180deg, #fff, #fff7fa);
    box-shadow: 0 10px 24px rgba(143, 69, 96, .06);
    font-size: 2rem;
    line-height: 1.5;
    color: #3d2130;
}

.equipment-panel .text-panel {
    border: 1px solid #ead5de;
    border-top: 0;
}

.text-panel {
    padding: 28px 32px 30px;
    background: #fff;
    border-top: 1px solid #ead5de;
}

.text-panel p {
    margin: 0 0 14px;
    font-size: 1.5rem;
    line-height: 2;
    color: #333;
}

.text-panel p:last-child {
    margin-bottom: 0;
}

.corpo-fee-table th,
.corpo-fee-table td {
    white-space: nowrap;
}

.corpo-fee-table thead th {
    background: #f1e4ec;
}

.fee-note-list {
    margin: 18px 0 0;
    padding-left: 1.2em;
    font-size: 1.42rem;
    line-height: 1.9;
    color: #333;
}

.facility-photo-placeholder {
    min-height: 360px;
    border-radius: 22px;
    background: linear-gradient(135deg, #fff7fa, #f4f7f2);
    border: 1px dashed rgba(143, 69, 96, .35);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8f4560;
    font-weight: 700;
    letter-spacing: .06em;
}

.corpo-page .info-table th,
.corpo-page .fee-table th {
    background: #f0e4ed;
}

.corpo-page .fee-accordion summary::before,
.corpo-page .faq-section summary::before {
    background: var(--facility-accent);
}

@media screen and (max-width: 768px) {
    .number-list {
        font-size: 1.42rem;
        line-height: 1.85;
    }

    
.equipment-panel {
    margin: 28px 0 26px;
}

.equipment-panel .sub-title {
    margin: 0 0 0;
    padding: 18px 26px;
    border: 1px solid #e8d5de;
    border-left: 6px solid var(--facility-accent);
    background: linear-gradient(180deg, #fff, #fff7fa);
    box-shadow: 0 10px 24px rgba(143, 69, 96, .06);
    font-size: 2rem;
    line-height: 1.5;
    color: #3d2130;
}

.equipment-panel .text-panel {
    border: 1px solid #ead5de;
    border-top: 0;
}

.text-panel {
        padding: 22px 18px;
    }

    .text-panel p {
        font-size: 1.38rem;
    }

    .corpo-fee-table th,
    .corpo-fee-table td {
        white-space: normal;
        min-width: 120px;
    }

    .facility-photo-placeholder {
        min-height: 240px;
    }
}

/* =========================================
   ページ内カラー最終統一
   このページ内では下記カラーの濃淡だけを使用
========================================= */

body,
.facility-main-content,
.modern-facility-page {
    --page-main: #7e57c2;
    --page-dark: #5b3e94;
    --page-mid: #9a78d4;
    --page-light: rgba(126,87,194,.12);
    --page-line: rgba(126,87,194,.32);

    --facility-primary: var(--page-main);
    --facility-primary-dark: var(--page-dark);
    --facility-accent: var(--page-mid);
    --facility-soft: var(--page-light);
    --facility-border: var(--page-line);
    --facility-shadow: 0 18px 45px rgba(38,50,56,.10);
}

/* ヒーローの色被りを抑える */
.facility-hero::after {
    background: linear-gradient(90deg, color-mix(in srgb, var(--page-dark) 58%, transparent), color-mix(in srgb, var(--page-main) 18%, transparent)) !important;
}

.modern-hero::before {
    background:
        linear-gradient(100deg, color-mix(in srgb, var(--page-dark) 60%, transparent) 0%, color-mix(in srgb, var(--page-dark) 34%, transparent) 44%, rgba(7,54,63,.08) 78%),
        radial-gradient(circle at 78% 20%, rgba(255,255,255,.20), transparent 30%),
        linear-gradient(180deg, transparent 78%, var(--facility-bg, #f6f8f5) 100%) !important;
}

/* ラベル・ページ内ナビ */
.section-label,
.facility-eyebrow {
    color: var(--page-dark) !important;
    background: var(--page-light) !important;
    border-color: var(--page-line) !important;
}

.facility-hero-overlay .hero-kicker,
.hero-kicker {
    color: #fff !important;
    background: rgba(255,255,255,.18) !important;
    border-color: rgba(255,255,255,.30) !important;
}

.facility-quick-actions a {
    color: var(--page-dark) !important;
    background: transparent !important;
    border-color: var(--page-line) !important;
    box-shadow: none !important;
}

.facility-quick-actions a:hover {
    color: #fff !important;
    background: var(--page-main) !important;
    border-color: var(--page-main) !important;
}

/* 見出し・本文アクセント */
.body h1,
.body h2,
.body h3,
.feature-card h3,
.service-card h3,
.life-grid h3,
.work-category-card h3,
.faq-section summary {
    color: var(--page-dark) !important;
}

.main-copy {
    color: var(--page-dark) !important;
    background: transparent !important;
    border-left-color: var(--page-main) !important;
}

.sub-title,
.facility-section .sub-title,
.fee-subheading {
    color: var(--page-dark) !important;
    border-left-color: var(--page-main) !important;
}

/* カード・枠線 */
.facility-intro-card,
.modern-section,
.target-box,
.faq-section,
.faq-section details,
.facility-feature-cards,
.service-card-grid,
.life-grid,
.feature-card,
.service-card,
.life-grid article,
.work-category-card,
.service-detail-block,
.fee-content-block,
.equipment-panel,
.text-panel,
.info-table,
.fee-accordion {
    border-color: var(--page-line) !important;
}

.feature-number,
.work-icon {
    color: var(--page-main) !important;
    background: transparent !important;
}

.work-category-card::before {
    background: var(--page-main) !important;
}

/* 背景の淡色 */
.target-box,
.daily-timeline li,
.service-table th {
    background: var(--page-light) !important;
}

.work-section {
    background: transparent !important;
}

/* 料金表・アコーディオン */
.fee-accordion summary {
    color: var(--page-dark) !important;
    background: linear-gradient(90deg, var(--page-light), rgba(255,255,255,.96)) !important;
    border-left-color: var(--page-main) !important;
}

.fee-accordion summary::after {
    background: var(--page-main) !important;
    color: #fff !important;
}

.fee-accordion[open] summary::after {
    background: var(--page-dark) !important;
}

.fee-summary-title::before {
    background: var(--page-main) !important;
    color: #fff !important;
}

.fee-table th,
.fee-table td {
    border-color: var(--page-line) !important;
}

.fee-table thead th,
.fee-table tbody th,
.info-table th {
    background: var(--page-light) !important;
    color: var(--page-dark) !important;
}

.fee-table caption,
.daily-timeline time,
.daily-timeline-compact time {
    color: var(--page-main) !important;
}

/* リストの丸・線 */
.available-list li::before,
.normal-list li::before,
.number-list li::before {
    background: var(--page-main) !important;
}

.available-list li,
.number-list li {
    border-color: var(--page-line) !important;
}

/* お問い合わせ */
.facility-individual-contact {
    background: linear-gradient(135deg, var(--page-dark), var(--page-main)) !important;
}

.local-mail-btn,
.hero-actions a:first-child {
    color: var(--page-dark) !important;
    background: #fff !important;
}

.local-mail-btn:hover,
.hero-actions a:first-child:hover {
    color: #fff !important;
    background: var(--page-main) !important;
}

/* 個別CSSに残る固定色の上書き */
.info-table th,
.fee-table th,
.corpo-fee-table thead th,
.corpo-page .info-table th,
.corpo-page .fee-table th,
.nanpu-page .fee-table th,
.nanpu-page .service-table th {
    background: var(--page-light) !important;
    color: var(--page-dark) !important;
}

.nanpu-page .service-detail-block h2,
.nanpu-page .fee-content-block h2,
.equipment-panel .sub-title {
    background: linear-gradient(180deg, #fff, var(--page-light)) !important;
    border-color: var(--page-line) !important;
    border-left-color: var(--page-main) !important;
    color: var(--page-dark) !important;
}

.corpo-page .section-label,
.corpo-page .facility-quick-actions a,
.corpo-page .hero-actions a:first-child,
.corpo-page .local-mail-btn {
    color: var(--page-dark) !important;
    background: var(--page-light) !important;
    border-color: var(--page-line) !important;
}

.corpo-page .facility-quick-actions a:hover,
.corpo-page .hero-actions a:first-child:hover,
.corpo-page .local-mail-btn:hover {
    color: #fff !important;
    background: var(--page-main) !important;
    border-color: var(--page-main) !important;
}


/* =========================================
   個別お問い合わせ：見出し・説明文の白文字固定
   各施設CSSの .body h3 !important より後で上書き
========================================= */
.body .facility-individual-contact h3,
.facility-individual-contact h3 {
    color: #fff !important;
}

.body .facility-individual-contact p,
.facility-individual-contact p {
    color: rgba(255,255,255,.92) !important;
}


/* =========================================
   メールお問い合わせボタン（通常時は白）
========================================= */
.corpo-page .local-mail-btn{
    background:#fff !important;
    color:var(--page-dark) !important;
    border:2px solid #fff !important;
}

.corpo-page .local-mail-btn:hover{
    background:var(--page-main) !important;
    color:#fff !important;
    border-color:var(--page-main) !important;
}

.corpo-page .local-mail-btn:hover .local-mail-icon{
    filter:brightness(0) invert(1);
}


/* =========================================
   導入文下：施設写真2枚
========================================= */
.corpo-intro-gallery {
    width: min(100%, 1120px);
    margin: 34px auto 72px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.corpo-intro-gallery figure {
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--page-line);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 18px 38px rgba(38, 50, 56, .10);
    aspect-ratio: 4 / 3;
}

.corpo-intro-gallery img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}




/* =========================================
   居室写真5枚：中央を大きく見せるカルーセル
========================================= */
.corpo-room-section {
    overflow: hidden;
}

.corpo-room-carousel {
    width: 100%;
    margin: 36px auto 0;
}

.corpo-room-carousel-viewport {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 24px 0 34px;
}

.corpo-room-carousel-track {
    display: flex;
    align-items: center;
    gap: 28px;
    width: max-content;
    opacity: 1;
    visibility: visible;
    transition: none;
    will-change: transform;
}

/* 初期位置の計算後から通常のスライドアニメーションを有効にする */
.corpo-room-carousel.is-ready .corpo-room-carousel-track {
    transition: transform .65s ease;
}

/* 初期表示・画面幅変更時の位置補正はアニメーションさせない */
.corpo-room-carousel-track.is-positioning {
    transition: none !important;
}

.corpo-room-card {
    flex: 0 0 clamp(240px, 31vw, 380px);
    margin: 0;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border: 1px solid var(--page-line);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 16px 36px rgba(38, 50, 56, .11);
    opacity: .48;
    transform: scale(.86);
    cursor: pointer;
    transition:
        flex-basis .55s ease,
        aspect-ratio .55s ease,
        transform .55s ease,
        opacity .55s ease,
        box-shadow .55s ease;
}

/* 横向き写真は元画像の比率を保ち、表示領域を横幅いっぱい近くまで広げる */
.corpo-room-card.is-landscape {
    flex-basis: min(86vw, 820px);
    aspect-ratio: var(--room-aspect-ratio, 4 / 3);
}

/* 縦向き写真は従来どおり縦長カードで表示 */
.corpo-room-card.is-portrait {
    flex-basis: clamp(240px, 31vw, 380px);
    aspect-ratio: 3 / 4;
}

.corpo-room-card.is-active {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 26px 56px rgba(38, 50, 56, .18);
    z-index: 2;
}

.corpo-room-card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.corpo-room-card.is-landscape img {
    object-fit: contain;
}

.corpo-room-carousel-button {
    position: absolute;
    top: 50%;
    z-index: 5;
    width: 54px;
    height: 54px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .82);
    border-radius: 50%;
    background: rgba(91, 62, 148, .88);
    color: #fff;
    box-shadow: 0 10px 26px rgba(38, 50, 56, .2);
    cursor: pointer;
    transform: translateY(-50%);
    transition:
        background .25s ease,
        transform .25s ease;
}

.corpo-room-carousel-button:hover {
    background: var(--page-main);
    transform: translateY(-50%) scale(1.06);
}

.corpo-room-carousel-button span {
    display: block;
    font-size: 3.9rem;
    line-height: .9;
    transform: translateY(-2px);
}

.corpo-room-carousel-prev {
    left: 22px;
}

.corpo-room-carousel-next {
    right: 22px;
}

.corpo-room-carousel-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 11px;
    margin-top: 4px;
}

.corpo-room-carousel-dots button {
    width: 11px;
    height: 11px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(91, 62, 148, .28);
    cursor: pointer;
    transition:
        width .25s ease,
        border-radius .25s ease,
        background .25s ease;
}

.corpo-room-carousel-dots button.is-active {
    width: 34px;
    border-radius: 999px;
    background: var(--page-main);
}

/* コーポラスこくふ：アクセス部分の画像を左上起点で表示 */
.corpo-page .facility-media-row .facility-bottom-img {
    object-position: left top;
}

@media screen and (max-width: 768px) {
    .corpo-room-carousel {
        margin-top: 26px;
    }

    .corpo-room-carousel-viewport {
        padding: 18px 0 28px;
    }

    .corpo-room-carousel-track {
        gap: 16px;
    }

    .corpo-room-card {
        flex-basis: min(74vw, 320px);
        border-radius: 18px;
    }

    .corpo-room-card.is-portrait {
        flex-basis: min(74vw, 320px);
    }

    .corpo-room-card.is-landscape {
        flex-basis: 92vw;
        max-width: 720px;
    }

    .corpo-room-carousel-button {
        width: 42px;
        height: 42px;
    }

    .corpo-room-carousel-button span {
        font-size: 3.1rem;
    }

    .corpo-room-carousel-prev {
        left: 8px;
    }

    .corpo-room-carousel-next {
        right: 8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .corpo-room-carousel-track,
    .corpo-room-card,
    .corpo-room-carousel-button,
    .corpo-room-carousel-dots button {
        transition: none;
    }
}

/* =========================================
   利用料金表：定員列の幅・位置を統一
========================================= */
.corpo-fee-table .fee-capacity-col {
    width: 84px;
    min-width: 84px;
    text-align: center !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
}

@media screen and (max-width: 768px) {
    .corpo-fee-table .fee-capacity-col {
        width: 72px;
        min-width: 72px;
    }
}
/* =========================================
   2026-09-10 ヒーロータイトル表示統一
   他施設と同じ「写真 → 写真下タイトル」構成
========================================= */

.corpo-page .facility-hero-copy .hero-kicker {
    color: var(--page-main, var(--facility-primary)) !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.corpo-page .facility-hero-copy .hero-kicker::after {
    background: var(--page-main, var(--facility-primary)) !important;
}

.corpo-page .facility-hero-copy h1,
.corpo-page .facility-hero-copy h1 span {
    color: var(--page-dark, var(--facility-primary-dark)) !important;
    text-shadow: none !important;
}

.corpo-page .facility-hero-copy .facility-hero-overlay p:not(.hero-kicker) {
    color: #4b5960 !important;
    text-shadow: none !important;
}
/* =========================================
   2026-09-10 セクション英字ラベル
   こくふページと同じ小さい角丸ラベルに統一
========================================= */

.modern-facility-page .modern-section > .section-label,
.modern-facility-page .facility-section > .section-label,
.modern-facility-page .fees-section > .section-label,
.modern-facility-page .summary > .section-label,
.modern-facility-page .faq-section > .section-label {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    width: auto !important;
    max-width: max-content !important;
    min-width: 0 !important;

    margin-left: 0 !important;
    margin-right: auto !important;

    padding: 7px 16px !important;
    border-radius: 999px !important;

    font-size: 1.2rem !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    letter-spacing: 0.08em !important;

    text-align: left !important;
    box-sizing: border-box !important;
    align-self: flex-start !important;
}

/* p要素でsection-labelを使用している場合も横幅を伸ばさない */
.modern-facility-page p.section-label {
    width: auto !important;
    max-width: max-content !important;
}


/* =========================================
   2026-09-10 ヒーロー内ボタン表示統一
   とさページと同じ2ボタン構成／コーポラスこくふは紫系
========================================= */
.corpo-page .facility-hero-copy .hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 28px;
}

.corpo-page .facility-hero-copy .hero-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 162px;
    min-height: 50px;
    padding: 12px 28px;
    border: 1px solid var(--page-main) !important;
    border-radius: 999px;
    background: #fff !important;
    color: var(--page-dark) !important;
    font-weight: 700;
    text-decoration: none;
    box-sizing: border-box;
    box-shadow: 0 8px 22px rgba(91, 62, 148, .08);
    transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}

.corpo-page .facility-hero-copy .hero-actions a:last-child {
    border-color: var(--page-line) !important;
}

.corpo-page .facility-hero-copy .hero-actions a:hover {
    background: var(--page-main) !important;
    border-color: var(--page-main) !important;
    color: #fff !important;
    transform: translateY(-2px);
}

@media screen and (max-width: 768px) {
    .corpo-page .facility-hero-copy .hero-actions {
        gap: 10px;
        margin-top: 22px;
    }

    .corpo-page .facility-hero-copy .hero-actions a {
        min-width: 0;
        min-height: 46px;
        padding: 10px 20px;
    }
}