﻿<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>社会福祉法人 新光会 - 光ヶ丘学園 施設紹介</title>
    <link rel="stylesheet" href="css/style.css"> <style>
        html { scroll-behavior: smooth; }
        .header { background-color: rgba(51, 51, 51, 0.9); padding: 15px 0; position: fixed; top: 0; left: 0; right: 0; z-index: 1001; border-bottom: 1px solid rgba(255, 255, 255, 0.2); }
        .header .container { display: flex; justify-content: space-between; align-items: center; }
        .main-content { padding-top: 80px; }
        .main-nav ul { display: flex; align-items: center; list-style-type: none; margin: 0; padding: 0; flex-wrap: wrap; }
        .main-nav ul li { margin-right: 25px; }
        .main-nav ul li:last-child { margin-right: 0; }
        .main-nav ul li a { color: #fff; text-decoration: none; font-weight: bold; font-size: 1.05em; padding: 5px 0; position: relative; display: block; }
        .main-nav ul li a::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 0; height: 2px; background-color: #4CAF50; transition: width 0.3s ease-out; }
        .main-nav ul li a:hover::after { width: 100%; }

        .hero-section { padding-top: 4rem; padding-bottom: 4rem; position: relative; overflow: hidden; scroll-margin-top: 70px; height: 400px; display: flex; justify-content: center; align-items: center; text-align: center; color: #fff; }
        .hero-background-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; background-repeat: no-repeat; z-index: -2; opacity: 0; transition: opacity 1s ease-in-out; }
        .hero-background-image.active { opacity: 1; }
        .hero-background-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 50, 100, 0.4); z-index: -1; }
        .hero-content { position: relative; z-index: 1; }
        .hero-main-title { font-size: 2.8em; margin-bottom: 0.5em; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); }
        .hero-sub-フレーズ { font-size: 1.3em; line-height: 1.6; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); }

        .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
        .section { padding: 4em 0; border-bottom: 1px solid #eee; scroll-margin-top: 70px; }
        .section:last-child { border-bottom: none; }
        .section > h2 { font-size: 2.2em; color: #333; text-align: center; margin-bottom: 0.5em; position: relative; padding-bottom: 10px; }
        .section > h2::after { content: ''; display: block; width: 60px; height: 3px; background-color: #4CAF50; margin: 10px auto 0; }
        .section-description { text-align: center; color: #666; font-size: 1.1em; margin-bottom: 3em; }

        #facility-intro .gallery-wrapper {
            max-width: 1110px; 
            margin: 0 auto;
            overflow: hidden;
            position: relative;
        }

        #facility-intro .facility-gallery {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap !important;
            align-items: center; 
            gap: 15px;
            padding: 10px 0;
            margin-top: 2em;
            margin-bottom: 1em;
            overflow-x: hidden; 
        }

        #facility-intro .facility-gallery img {
            width: 360px;
            height: 240px;
            object-fit: cover;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            flex-shrink: 0;
        }

        #facility-intro .gallery-navigation {
            text-align: center;
            padding: 15px 0;
            display: block;
        }

        #facility-intro .gallery-bullet {
            display: inline-block;
            width: 12px;
            height: 12px;
            background-color: #ccc;
            border-radius: 50%;
            margin: 0 5px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        #facility-intro .gallery-bullet.active {
            background-color: #4CAF50;
        }

        .table-responsive { overflow-x: auto; margin-top: 2em; margin-bottom: 2em; }
        .styled-table { width: 100%; border-collapse: collapse; margin: 0 auto; font-size: 0.95em; box-shadow: 0 0 20px rgba(0, 0, 0, 0.05); border-radius: 8px; overflow: hidden; }
        .styled-table th, .styled-table td { padding: 12px 15px; border: 1px solid #ddd; text-align: left; }
        .styled-table th { background-color: #eef7ee; color: #333; font-weight: bold; width: 30%; }
        .styled-table tr:nth-child(even) { background-color: #f9f9f9; }
        .styled-table tr:hover { background-color: #f1f8e9; }

        .schedule-item, .activity-item, .event-item { display: flex; align-items: center; margin-bottom: 1.5em; gap: 20px; background-color: #fff; padding: 15px; border-left: 5px solid #4CAF50; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
        .schedule-item:nth-child(even), .activity-item:nth-child(even), .event-item:nth-child(even) { border-left: 5px solid #2196F3; }
        .schedule-item .icon, .activity-item .icon, .event-item .icon { font-size: 2.5em; color: #4CAF50; min-width: 50px; text-align: center; }
        .schedule-item:nth-child(even) .icon, .activity-item:nth-child(even) .icon, .event-item:nth-child(even) .icon { color: #2196F3; }
        .schedule-item .content, .activity-item .content, .event-item .content { flex-grow: 1; }
        .schedule-item h3, .activity-item h3, .event-item h3 { margin-top: 0; color: #333; font-size: 1.3em; }
        .schedule-item p, .activity-item p, .event-item p { margin-bottom: 0; color: #555; line-height: 1.6; }
        .section-image { max-width: 100%; height: auto; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); margin-bottom: 1.5em; }
        .section-image.float-left { float: left; margin-right: 20px; margin-bottom: 10px; width: 40%; max-width: 350px; }
        .section-image.float-right { float: right; margin-left: 20px; margin-bottom: 10px; width: 40%; max-width: 350px; }
        .text-clear::after { content: ""; display: table; clear: both; }

        .contact-info-block { background-color: #e8f5e9; border-left: 6px solid #4CAF50; padding: 25px; margin-top: 2em; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.08); font-size: 1.05em; line-height: 1.8; }
        .contact-info-block h3 { color: #2e7d32; margin-top: 0; margin-bottom: 1em; }
        .contact-info-block p { margin-bottom: 0.5em; }
        .contact-info-block a { color: #1b5e20; text-decoration: none; font-weight: bold; }
        .contact-info-block a:hover { text-decoration: underline; }

        .access-info-wrapper { display: flex; flex-wrap: wrap; gap: 30px; align-items: flex-start; }
        .access-text { flex: 1; min-width: 300px; }
        .map-container { flex: 2; min-width: 300px; }
        .map-container iframe { display: block; margin-top: 1em; }

        @media (max-width: 768px) {
            .main-content { padding-top: 60px; }
            .header .container { flex-direction: column; align-items: flex-start; }
            .main-nav ul { width: 100%; justify-content: center; margin-top: 15px; }
            .main-nav ul li { margin: 0 10px 10px; }
            .hero-main-title { font-size: 2em; }
            .hero-sub-フレーズ { font-size: 1em; }
            .section > h2 { font-size: 1.8em; }
            .section-description { font-size: 1em; }

            #facility-intro .gallery-wrapper { max-width: 100%; }
            #facility-intro .facility-gallery img { width: 280px; height: 187px; }

            .schedule-item, .activity-item, .event-item { flex-direction: column; text-align: center; align-items: center; }
            .schedule-item .icon, .activity-item .icon, .event-item .icon { margin-bottom: 10px; }
            .section-image.float-left, .section-image.float-right { float: none; margin-left: auto; margin-right: auto; width: 90%; max-width: 400px; display: block; }
            .access-info-wrapper { flex-direction: column; }
            .access-text, .map-container { width: 100%; min-width: unset; }
        }
    </style>
</head>
<body>
    <header class="header">
        <div class="container">
            <a href="https://shinkoukai.info/index.html" class="header-logo">
                <img src="images/srogo.png" alt="社会福祉法人 新光会ロゴ"> </a>
            <nav class="main-nav">
                <ul>
                    <li><a href="#hero">トップ</a></li>
                    <li><a href="#facility-intro">施設紹介</a></li>
                    <li><a href="#daily-flow">一日の流れ</a></li>
                    <li><a href="#daily-activities">日中活動</a></li>
                    <li><a href="#annual-events">年間行事</a></li>
                    <li><a href="bosyu.html">職員募集</a></li>
                    <li><a href="index.html#contact">お問い合わせ</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <main class="main-content">
        <section id="hero" class="hero-section">
            <div class="hero-background-overlay"></div>
            <div class="hero-background-image active" style="background-image: url('images/hero-image1.jpg');"></div>
            <div class="hero-background-image" style="background-image: url('images/hero-image2.jpg');"></div>
            <div class="hero-background-image" style="background-image: url('images/hero-image3.jpg');"></div>
            <div class="hero-content">
                <h1 class="hero-main-title">障がい者支援施設 光ヶ丘学園</h1>
                <p class="hero-sub-フレーズ">一人ひとりの個性を尊重し、<br>安心と成長を育む豊かな暮らしを提供します。</p>
            </div>
        </section>

        <div class="container page-content-wrapper">
            <section id="facility-intro" class="section">
                <h2>施設紹介</h2>
                <p class="section-description">- ○○の概要と、利用者様への想いをお伝えします。</p>
                <p>光ヶ丘学園は、知的障がいのある方が、地域社会の中で安心して自分らしく生活できるよう、きめ細やかな支援を提供しています。利用者様一人ひとりの個性と能力を尊重し、日々の生活支援から、社会参加を促す活動、そして自立に向けたサポートまで、多岐にわたるサービスを展開しています。明るく家庭的な雰囲気の中で、温かい交流が生まれ、誰もが笑顔で過ごせる場所を目指しています。</p>

                <div class="gallery-wrapper">
                    <div id="facility-gallery" class="facility-gallery">
                        <img src="images/kikari-image1.jpg" alt="施設内景観1">
                        <img src="images/kikari-image2.jpg" alt="施設内景観2">
                        <img src="images/kikari-image3.jpg" alt="施設内景観3">
                        <img src="images/kikari-image1.jpg" alt="施設内景観4">
                        <img src="images/kikari-image2.jpg" alt="施設内景観5">
                        <img src="images/kikari-image3.jpg" alt="施設内景観6">
                    </div>
                </div>
                <div id="gallery-navigation" class="gallery-navigation"></div>

                <div class="table-responsive">
                    <table class="styled-table">
                        <tbody>
                            <tr><th>事業所の種類</th><td>障害者支援施設</td></tr>
                            <tr><th>事業所の名称</th><td>障害者支援施設　光ヶ丘学園</td></tr>
                            <tr><th>事業所番号</th><td>福岡県　401550011</td></tr>
                            <tr><th>指定日</th><td>平成２４年４月１日</td></tr>
                            <tr><th>管理者</th><td>施設長　　船橋 雄</td></tr>
                            <tr><th>サービスの実施地域</th><td>福岡県全圏域（施設入所支援・生活介護・短期入所）</td></tr>
                            <tr><th>主たる対象者</th><td>知的障害者</td></tr>
                            <tr><th>事業及び定員</th><td>施設入所支援事業：５０名<br>生活介護事業：５０名<br>短期入所事業：３名</td></tr>
                            <tr><th>開設年月日</th><td>平成１０年９月１日</td></tr>
                        </tbody>
                    </table>
                </div>
            </section>

            <section id="daily-flow" class="section">
                <h2>一日の流れ</h2>
                <p class="section-description">- 利用者様の充実した一日をご紹介します。</p>
                <div class="schedule-item">
                    <div class="icon">☀️</div>
                    <div class="content"><h3>起床・朝食</h3><p>気持ちの良い朝を迎え、健康的な朝食で一日の活力をチャージします。職員が丁寧にサポートいたします。</p></div>
                </div>
                <div class="schedule-item">
                    <div class="icon">🚶‍♀️</div>
                    <div class="content"><h3>日中活動へ出発</h3><p>それぞれの活動場所へ移動し、午前のプログラムを開始します。安全に配慮しながら送迎を行います。</p></div>
                </div>
                <div class="schedule-item">
                    <div class="icon">🍽️</div>
                    <div class="content"><h3>昼食</h3><p>栄養バランスの取れた温かい昼食を提供します。皆で楽しく食事をする時間です。</p></div>
                </div>
                <div class="schedule-item">
                    <div class="icon">🎨</div>
                    <div class="content"><h3>日中活動（午後）</h3><p>午後の活動は、趣味活動や創作活動など、個々の興味に合わせたプログラムを実施します。</p></div>
                </div>
                <div class="schedule-item">
                    <div class="icon">🛀</div>
                    <div class="content"><h3>夕食</h3><p>一日の疲れを癒す入浴タイム。その後、皆で夕食を囲み、和やかな時間を過ごします。</p></div>
                </div>
                <div class="schedule-item">
                    <div class="icon">🌙</div>
                    <div class="content"><h3>自由時間・就寝</h3><p>テレビ鑑賞や読書など、それぞれの方法でリラックス。安全に配慮しながら見守り、就寝を促します。</p></div>
                </div>
            </section>

            <section id="daily-activities" class="section">
                <h2>日中活動</h2>
                <p class="section-description">- 多彩な活動を通して、社会参加と自己実現を支援します。</p>
                <img src="images/activity-image.jpg" alt="日中活動の様子" class="section-image float-left">
                <div class="text-clear"><p>光ヶ丘学園では、利用者様が豊かな毎日を送れるよう、様々な日中活動プログラムを提供しています。これらの活動は、身体機能の維持・向上、精神的な安定、社会性の育成、そして自己表現の機会となることを目指しています。</p><p>具体的な活動内容としては、園芸活動、創作活動（絵画、工芸など）、軽作業、調理実習、音楽療法、レクリエーション、地域交流イベントへの参加などがあります。個々の能力や興味に合わせた活動を選べるよう、多様な選択肢を設けています。</p><p>専門の職員がそれぞれの活動をサポートし、利用者様が安心して、そして楽しく参加できるよう努めています。</p></div>
            </section>

            <section id="annual-events" class="section">
                <h2>年間行事</h2>
                <p class="section-description">- 季節ごとの楽しいイベントで、豊かな思い出作りをサポートします。</p>
                <img src="images/event-image.jpg" alt="年間行事の様子" class="section-image float-right">
                <div class="text-clear"><p>光ヶ丘学園では、利用者様に季節を感じ、地域との交流を深めていただくため、年間を通して様々な行事を企画・実施しています。</p><p>春にはお花見や遠足、夏には夏祭りやプール活動、秋には運動会や収穫祭、冬にはクリスマス会やお正月飾り作りなど、季節の移ろいに合わせたイベントが盛りだくさんです。これらの行事は、利用者様同士の絆を深めるだけでなく、地域の方々との触れ合いの場ともなっています。</p><p>行事を通して、新たな体験や発見があり、利用者様の生活に彩りを添えています。職員も一緒に準備から参加し、笑顔あふれる思い出作りに貢献しています。</p></div>
            </section>

            <section id="contact-access" class="section">
                <h2>お問い合わせ・アクセス</h2>
                <div class="access-info-wrapper">
                    <div class="access-text"><div class="contact-info-block"><h3>障がい者支援施設 光ヶ丘学園</h3><p>〒820-1111 福岡県飯塚市勢田119-14<br>電話: <a href="tel:0948962001">(0948) 96-2001</a><br>FAX: (0948) 96-2007</p><p>入所をご希望の方、施設見学をご希望の方はお気軽にご連絡ください。</p></div></div>
                    <div class="map-container"><p><strong>アクセスマップ</strong></p><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3314.9392288339595!2d130.68652307521025!3d33.80521442749449!2m3!1f0!2m3!1f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x354388e200c6d7d9%3A0x67c29377a066928e!2z44CSODIwLTExMTEg56aP5bO255yM6aGM5pyI5biC5a6u56ysMTI2Ng!5e0!3m2!1sja!2sjp!4v1716382029490!5m2!1sja!2sjp" width="100%" height="350" style="border:0; border-radius: 6px;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe><p><small>※地図が表示されない場合は、お手数ですが上記の住所で検索をお願いいたします。</small></p></div>
                </div>
            </section>
        </div>
    </main>

    <footer class="footer">
        <div class="container"><p>© 2025 社会福祉法人 新光会. All Rights Reserved.</p></div>
    </footer>

    <script>
        const heroImages = document.querySelectorAll('.hero-background-image');
        let heroIndex = 0;
        if (heroImages.length > 0) {
            function showNextHeroImage() {
                heroImages.forEach(img => img.classList.remove('active'));
                heroIndex = (heroIndex + 1) % heroImages.length;
                heroImages[heroIndex].classList.add('active');
            }
            setInterval(showNextHeroImage, 3000);
        }

        const facilityGallery = document.getElementById('facility-gallery');
        const galleryNavigation = document.getElementById('gallery-navigation');

        if (facilityGallery && galleryNavigation && facilityGallery.getElementsByTagName('img').length > 0) {
            const images = Array.from(facilityGallery.getElementsByTagName('img'));
            const numImages = images.length;
            
            const IMAGES_PER_PAGE = 3; 
            const SCROLL_SPEED = 0.5; 
            const AUTO_SCROLL_RESUME_DELAY_MS = 5000;
            const INITIAL_AUTO_SCROLL_DELAY_MS = 3000;
            const EDGE_PAUSE_MS = 1500; 

            let currentPage = 0;
            const numPages = Math.ceil(numImages / IMAGES_PER_PAGE);
            const galleryPaddingLeft = parseFloat(window.getComputedStyle(facilityGallery).paddingLeft) || 0; 
            
            let scrollAmount = 0;
            let scrollDirection = 1;
            let animationFrameId;
            let autoScrollResumeTimeoutId;
            let isManuallyPaused = false;

            function createBullets() {
                galleryNavigation.innerHTML = '';
                for (let i = 0; i < numPages; i++) {
                    const bullet = document.createElement('span');
                    bullet.classList.add('gallery-bullet');
                    bullet.dataset.page = i;
                    bullet.addEventListener('click', () => {
                        pauseAutoScrollTemporarily();
                        goToPage(i);
                    });
                    galleryNavigation.appendChild(bullet);
                }
            }

            function updateBullets(activeIndex) {
                currentPage = activeIndex;
                const bullets = galleryNavigation.querySelectorAll('.gallery-bullet');
                bullets.forEach((bullet, index) => {
                    bullet.classList.toggle('active', index === currentPage);
                });
            }
            
            function goToPage(pageIndex, isInitializationCall = false) {
                if (pageIndex < 0 || pageIndex >= numPages) {
                    // console.warn("goToPage: Invalid pageIndex", pageIndex);
                    return;
                }

                let targetScrollLeft;
                if (pageIndex === 0) {
                    targetScrollLeft = 0; // ★最初のページは必ず0に設定
                } else {
                    const firstImageIndexOfPage = pageIndex * IMAGES_PER_PAGE;
                    if (images[firstImageIndexOfPage]) {
                        // galleryPaddingLeft は CSS (padding: 10px 0;) により 0 のはず
                        targetScrollLeft = images[firstImageIndexOfPage].offsetLeft - galleryPaddingLeft;
                    } else { 
                        targetScrollLeft = facilityGallery.scrollWidth - facilityGallery.clientWidth;
                    }
                }
                
                const maxScroll = facilityGallery.scrollWidth - facilityGallery.clientWidth;
                targetScrollLeft = Math.max(0, Math.min(targetScrollLeft, maxScroll));
                
                if (isInitializationCall) {
                    facilityGallery.style.scrollBehavior = 'auto'; 
                    facilityGallery.scrollLeft = targetScrollLeft;
                    // 強制的にリフローを起こして scrollLeft の適用を確実にする（必要な場合）
                    // void facilityGallery.offsetHeight; 
                    facilityGallery.style.scrollBehavior = ''; // CSS指定に戻すか、'smooth'を再指定
                } else {
                    facilityGallery.style.scrollBehavior = 'smooth';
                    facilityGallery.scrollLeft = targetScrollLeft;
                }
                
                scrollAmount = targetScrollLeft; 
                updateBullets(pageIndex);
            }

            function animateScroll() {
                if (isManuallyPaused) {
                    animationFrameId = requestAnimationFrame(animateScroll); 
                    return;
                }

                const maxScroll = facilityGallery.scrollWidth - facilityGallery.clientWidth;
                if (maxScroll <= 0) return;

                facilityGallery.style.scrollBehavior = 'auto'; 
                scrollAmount += SCROLL_SPEED * scrollDirection;

                let atEdge = false;
                if (scrollDirection === 1 && scrollAmount >= maxScroll) {
                    scrollAmount = maxScroll;
                    scrollDirection = -1;
                    atEdge = true;
                } else if (scrollDirection === -1 && scrollAmount <= 0) {
                    scrollAmount = 0;
                    scrollDirection = 1;
                    atEdge = true;
                }
                
                facilityGallery.scrollLeft = scrollAmount;

                if (atEdge) {
                    pauseAutoScrollTemporarily(EDGE_PAUSE_MS); 
                }
                animationFrameId = requestAnimationFrame(animateScroll);
            }
            
            function pauseAutoScrollTemporarily(duration = AUTO_SCROLL_RESUME_DELAY_MS) {
                isManuallyPaused = true;
                clearTimeout(autoScrollResumeTimeoutId);
                cancelAnimationFrame(animationFrameId);
                
                autoScrollResumeTimeoutId = setTimeout(() => {
                    isManuallyPaused = false;
                    scrollAmount = facilityGallery.scrollLeft; 
                    const maxScroll = facilityGallery.scrollWidth - facilityGallery.clientWidth;
                    if (maxScroll > 0) {
                       if (scrollAmount >= maxScroll) scrollDirection = -1;
                       else if (scrollAmount <=0) scrollDirection = 1;
                    }
                    animationFrameId = requestAnimationFrame(animateScroll);
                }, duration);
            }
            
            function initializeGallery() {
                createBullets();
                goToPage(0, true); // ★初期化フラグtrueで呼び出し、scrollLeftを確実に0に
                
                facilityGallery.addEventListener('mouseenter', () => {
                    isManuallyPaused = true;
                    cancelAnimationFrame(animationFrameId);
                    clearTimeout(autoScrollResumeTimeoutId);
                });
                facilityGallery.addEventListener('mouseleave', () => {
                    pauseAutoScrollTemporarily(1000); 
                });

                clearTimeout(autoScrollResumeTimeoutId); 
                autoScrollResumeTimeoutId = setTimeout(() => {
                    if (facilityGallery.scrollWidth - facilityGallery.clientWidth <= 0) return;
                    isManuallyPaused = false;
                    // goToPage(0, true) で scrollAmount は 0 に設定されているため、それを信頼する
                    scrollDirection = 1; 
                    animateScroll();
                }, INITIAL_AUTO_SCROLL_DELAY_MS);
            }

            if (document.readyState === 'loading') {
                document.addEventListener('DOMContentLoaded', initializeGallery);
            } else {
                initializeGallery();
            }

        } else {
            if (galleryNavigation) galleryNavigation.style.display = 'none';
        }
    </script>

</body>
</html>