@charset "UTF-8";

/* =========================================
   相談支援センター アルペジオ 専用CSS
   共通CSSのヒーロー・配色を活かし、相談支援ページ用に最小限調整
========================================= */

.arpeggio-page {
    --facility-primary: #0f5f6e;
    --facility-primary-dark: #083f4a;
    --facility-accent: #7cc9b8;
    --facility-soft: #eef8f6;
}

/* ヒーローは他施設共通の構成を使用 */
.arpeggio-hero {
    background-image: url("../img/arpeggio/DSC00173.jpg");
    background-position: center center;
}

.arpeggio-hero .facility-hero-overlay h1 span {
    display: inline-block;
    font-size: clamp(3rem, 4.8vw, 4.8rem);
}

/* 導入コピー下の写真：2枚横並び */
.arpeggio-photo-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
    align-items: stretch;
}

.arpeggio-photo-grid img {
    width: 100%;
    height: 100%;
    min-height: 260px;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* 相談支援センター向けのサービス欄 */
.arpeggio-service-grid {
    grid-template-columns: repeat(4, 1fr);
}

.arpeggio-service-grid .service-card h3 {
    font-size: 1.8rem;
}

.arpeggio-service-grid .service-card p {
    font-size: 1.42rem;
}

.arpeggio-target-box h1 {
    font-size: clamp(2rem, 2.6vw, 2.8rem) !important;
}

/* 利用料金：アコーディオンではなく簡潔な告知枠 */
.arpeggio-fees-section {
    max-width: 900px;
}

.fee-simple-box {
    position: relative;
    margin-top: 24px;
    padding: clamp(24px, 4vw, 38px);
    background: #fff;
    border: 1px solid var(--facility-hairline, rgba(7, 54, 63, 0.09));
    border-left: 6px solid var(--facility-accent);
    border-radius: 22px;
}

.fee-simple-box h2 {
    margin: 0 0 18px !important;
    color: var(--facility-primary-dark) !important;
    font-size: clamp(1.8rem, 2.4vw, 2.5rem) !important;
    font-weight: 800 !important;
}

.fee-simple-box p {
    margin: 0.4em 0 !important;
    font-size: 1.55rem;
}

.fee-simple-box p:first-of-type {
    color: var(--facility-primary-dark);
    font-weight: 800;
}

/* 概要下の写真・地図 */
.arpeggio-media-row {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
}

.arpeggio-media-row .facility-bottom-img {
    object-position: center center;
}

/* 相談支援ページでは不要なスライド前提の余白を出さない */
.arpeggio-page .slide-container {
    display: none;
}

@media screen and (max-width: 1000px) {
    .arpeggio-service-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .arpeggio-service-grid .service-card:nth-child(2n) {
        border-right: 0;
    }
}

@media screen and (max-width: 768px) {
    .arpeggio-photo-grid {
        grid-template-columns: 1fr;
        grid-template-rows: none;
    }

    .arpeggio-photo-grid img {
        min-height: auto;
        aspect-ratio: 4 / 3;
    }

    .arpeggio-service-grid {
        grid-template-columns: 1fr;
    }

    .arpeggio-media-row {
        grid-template-columns: 1fr;
    }

    .fee-simple-box {
        border-radius: 18px;
        padding: 22px 18px;
    }
}


/* =========================================
   アルペジオ：他施設ページと統一した控えめな動き
   - セクションはふわっと表示
   - 写真はPC時のみごく軽くズーム
   - ボタン・サービス欄は少しだけ浮かせる
========================================= */
.arpeggio-page {
    --motion-distance: 18px;
    --motion-duration: 760ms;
    --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.arpeggio-page .facility-hero-overlay > * {
    opacity: 0;
    transform: translateY(12px);
    animation: arpeggio-hero-soft-in 760ms var(--motion-ease) forwards;
}

.arpeggio-page .facility-hero-overlay > *:nth-child(2) { animation-delay: 90ms; }
.arpeggio-page .facility-hero-overlay > *:nth-child(3) { animation-delay: 160ms; }
.arpeggio-page .facility-hero-overlay > *:nth-child(4) { animation-delay: 230ms; }

@keyframes arpeggio-hero-soft-in {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.arpeggio-page .js-scroll-fade {
    opacity: 0;
    transform: translateY(var(--motion-distance));
    transition:
        opacity var(--motion-duration) var(--motion-ease),
        transform var(--motion-duration) var(--motion-ease);
    will-change: opacity, transform;
}

.arpeggio-page .js-scroll-fade.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.arpeggio-page .js-scroll-fade[data-motion-delay="1"] { transition-delay: 70ms; }
.arpeggio-page .js-scroll-fade[data-motion-delay="2"] { transition-delay: 140ms; }
.arpeggio-page .js-scroll-fade[data-motion-delay="3"] { transition-delay: 210ms; }

.arpeggio-page .service-card,
.arpeggio-page .hero-actions a,
.arpeggio-page .facility-quick-actions a,
.arpeggio-page .local-mail-btn,
.arpeggio-page .fee-simple-box {
    transition:
        transform 240ms ease,
        box-shadow 240ms ease,
        background-color 240ms ease,
        color 240ms ease,
        border-color 240ms ease;
}

.arpeggio-page .service-card:hover,
.arpeggio-page .hero-actions a:hover,
.arpeggio-page .facility-quick-actions a:hover,
.arpeggio-page .local-mail-btn:hover,
.arpeggio-page .fee-simple-box:hover {
    transform: translateY(-2px);
}

@media (hover: hover) and (pointer: fine) {
    .arpeggio-page .intro-photo-grid img,
    .arpeggio-page .facility-bottom-img {
        transition: transform 5200ms ease;
    }

    .arpeggio-page .intro-photo-grid img:hover,
    .arpeggio-page .facility-bottom-img:hover {
        transform: scale(1.025);
    }
}

@media (prefers-reduced-motion: reduce) {
    .arpeggio-page *,
    .arpeggio-page *::before,
    .arpeggio-page *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }

    .arpeggio-page .js-scroll-fade,
    .arpeggio-page .facility-hero-overlay > * {
        opacity: 1 !important;
        transform: none !important;
    }
}


/* =========================================
   アルペジオ：Word原稿準拠版 追加調整
   - 原稿にないサービスカード・補足導線は使用しない
   - 写真点数が少ない前提で余白と見え方のみ調整
========================================= */

.arpeggio-page .facility-hero-overlay .hero-actions {
    display: none;
}

.arpeggio-page .facility-intro-card {
    max-width: 1080px;
}

.arpeggio-page .facility-section {
    max-width: 980px;
}

.arpeggio-page .facility-section p {
    font-size: 1.62rem;
    line-height: 2.05;
}

.arpeggio-page .main-copy {
    margin-bottom: 34px;
}

.arpeggio-page .intro-photo-grid {
    margin-top: 34px;
}

.arpeggio-page .facility-individual-contact > p {
    display: none;
}

@media screen and (max-width: 768px) {
    .arpeggio-page .facility-section p {
        font-size: 1.5rem;
        line-height: 1.9;
    }
}


/* ===== 2枚写真レイアウト ===== */
.arpeggio-photo-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:clamp(24px,3vw,36px);
    width:100%;
    max-width:1100px;
    margin:40px auto 0;
}
.arpeggio-photo-grid img{
    width:100%;
    height:clamp(300px,30vw,420px);
    object-fit:cover;
    object-position:center;
    display:block;
    border-radius:18px;
}
.arpeggio-photo-grid img:first-child{
    grid-row:auto;
    min-height:0;
}
@media (max-width:768px){
 .arpeggio-photo-grid{
   grid-template-columns:1fr;
   gap:18px;
 }
 .arpeggio-photo-grid img{
   height:auto;
   aspect-ratio:4/3;
 }
}

/* intro写真は2枚とも同じ高さ・同じ比率に揃える */
.intro-photo-grid,
.facility-intro-card .intro-photo-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(12px, 1.6vw, 18px);
    align-items: stretch;
}

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

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;
}
/* =========================================
   2026-09-10 ヒーロータイトル表示統一
   他施設と同じ「写真 → 写真下タイトル」構成
========================================= */

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

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

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

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