@charset "UTF-8";

/* =========================================
   とさ 専用CSS
========================================= */

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

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

body,
.facility-main-content,
.modern-facility-page {
    --page-main: #2f6db3;
    --page-dark: #1f4f87;
    --page-mid: #5c91cf;
    --page-light: rgba(47,109,179,.11);
    --page-line: rgba(47,109,179,.30);

    --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;
}

/* =========================================
   Instagram タイトルロゴ
========================================= */
.instagram-section .instagram-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.instagram-section .instagram-title img {
    flex: 0 0 auto;
    width: auto;
    height: 32px;
    display: block;
    object-fit: contain;
    border-radius: 0 !important;
    clip-path: none !important;
    background: none !important;
}

@media screen and (max-width: 640px) {
    .instagram-section .instagram-title {
        gap: 10px;
    }

    .instagram-section .instagram-title img {
        width: auto;
        height: 28px;
    }
}