{"id":11,"date":"2026-01-26T15:43:51","date_gmt":"2026-01-26T06:43:51","guid":{"rendered":"http:\/\/airstar-group.jp\/?page_id=11"},"modified":"2026-01-28T14:53:05","modified_gmt":"2026-01-28T05:53:05","slug":"home","status":"publish","type":"page","link":"https:\/\/airstar-group.jp\/","title":{"rendered":"HOME"},"content":{"rendered":"\n<script>\n    \/\/ 1. Tailwind\u306e\u30c7\u30b6\u30a4\u30f3\u8a2d\u5b9a (\u30a8\u30e9\u30fc\u3092\u5b8c\u5168\u306b\u9632\u3050\u305f\u3081\u306e\u521d\u671f\u5316)\n    (function() {\n        const config = {\n            theme: {\n                extend: {\n                    colors: {\n                        'brand-white': '#ffffff',\n                        'brand-off-white': '#fafafa',\n                        'brand-gray': '#f5f5f5',\n                        'brand-dark': '#1a1a1a',\n                        'brand-medium': '#666666',\n                        'brand-light': '#999999',\n                        'brand-border': '#e0e0e0',\n                    },\n                    fontFamily: {\n                        'sans': ['Inter', 'sans-serif'],\n                        'serif': ['\"Crimson Pro\"', 'serif'],\n                    },\n                }\n            }\n        };\n\n        \/\/ window.tailwind\u304c\u5b58\u5728\u3059\u308c\u3070\u5373\u6642\u9069\u7528\u3001\u306a\u3051\u308c\u3070\u8aad\u307f\u8fbc\u307f\u3092\u5f85\u3064\n        if (window.tailwind) {\n            window.tailwind.config = config;\n        } else {\n            window.tailwind = { config: config };\n        }\n    })();\n<\/script>\n\n<style>\n    \/* 2. \u30ab\u30b9\u30bf\u30e0CSS (Cocoon\u306e\u5e72\u6e09\u5bfe\u7b56\u3092\u542b\u3080) *\/\n    .wiper-slide { \n        clip-path: inset(0 100% 0 0); \n        animation: wiperSlide 1s cubic-bezier(0.65, 0, 0.35, 1) forwards; \n        z-index: 5; \n    }\n    @keyframes wiperSlide { 0% { clip-path: inset(0 100% 0 0); } 100% { clip-path: inset(0 0 0 0); } }\n    .hero-overlay::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.4) 0%, transparent 50%); pointer-events: none; }\n    \n    \/* \u753b\u50cf\u30db\u30d0\u30fc\u52b9\u679c *\/\n    .image-hover-scale { overflow: hidden; position: relative; }\n    .image-hover-scale img { transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1); }\n    .image-hover-scale:hover img { transform: scale(1.05); }\n\n    \/* Cocoon\u306e\u8981\u7d20\u304c\u5e72\u6e09\u3057\u306a\u3044\u3088\u3046\u306b\u30ea\u30bb\u30c3\u30c8 *\/\n    #root-airstar { \n        all: initial; \n        display: block; \n        font-family: 'Inter', 'Noto Sans JP', sans-serif; \n        color: #1a1a1a; \n        background: #ffffff;\n    }\n    #root-airstar * { box-sizing: border-box; }\n    \n    \/* \u56fa\u5b9a\u30da\u30fc\u30b8\u7279\u6709\u306e\u4f59\u767d\u3084\u30bf\u30a4\u30c8\u30eb\u3092\u96a0\u3059\u8a2d\u5b9a (\u5fc5\u8981\u306b\u5fdc\u3058\u3066) *\/\n    .entry-title, .entry-meta, .sns-share, .author-info { display: none !important; }\n    .entry-content { padding: 0 !important; margin: 0 !important; max-width: none !important; }\n    #main { padding: 0 !important; }\n<\/style>\n\n<!-- 3. \u8868\u793a\u9818\u57df -->\n<div id=\"root-airstar\"><\/div>\n\n<!-- 4. React\u30ed\u30b8\u30c3\u30af\u672c\u4f53 -->\n<script type=\"text\/babel\">\n    const { useState, useEffect, useRef } = React;\n\n    const Navigation = () => {\n        const [scrolled, setScrolled] = useState(false);\n        useEffect(() => {\n            const handleScroll = () => {\n                setScrolled(window.scrollY > 50);\n            };\n            window.addEventListener('scroll', handleScroll);\n            return () => window.removeEventListener('scroll', handleScroll);\n        }, []);\n        return (\n            <nav className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${scrolled ? 'bg-brand-white\/95 backdrop-blur-md border-b border-brand-border' : 'bg-transparent'}`}>\n                <div className=\"max-w-[1400px] mx-auto px-6 lg:px-12\">\n                    <div className=\"flex items-center justify-between h-20\">\n                        <div className=\"font-sans text-xl font-semibold tracking-tight text-brand-dark\">AIRSTAR<\/div>\n                        <div className=\"hidden md:flex items-center space-x-10 text-brand-dark\">\n                            <a href=\"#facilities\" className=\"text-sm font-medium hover:opacity-50\">Facilities<\/a>\n                            <a href=\"#concept\" className=\"text-sm font-medium hover:opacity-50\">About<\/a>\n                            <a href=\"#news\" className=\"text-sm font-medium hover:opacity-50\">News<\/a>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/nav>\n        );\n    };\n\n    const HeroSection = () => {\n        const [currentIndex, setCurrentIndex] = useState(0);\n        const [isTransitioning, setIsTransitioning] = useState(false);\n        const heroImages = [\n            { url: \"https:\/\/images.unsplash.com\/photo-1542314831-068cd1dbfeeb?w=1920&h=1080&fit=crop&q=80\", alt: \"Mountain View\" },\n            { url: \"https:\/\/images.unsplash.com\/photo-1566073771259-6a8506099945?w=1920&h=1080&fit=crop&q=80\", alt: \"Forest Retreat\" },\n            { url: \"https:\/\/images.unsplash.com\/photo-1582719508461-905c673771fd?w=1920&h=1080&fit=crop&q=80\", alt: \"Ocean Resort\" },\n            { url: \"https:\/\/images.unsplash.com\/photo-1540206395-68808572332f?w=1920&h=1080&fit=crop&q=80\", alt: \"Hot Spring Inn\" },\n            { url: \"https:\/\/images.unsplash.com\/photo-1564501049412-61c2a3083791?w=1920&h=1080&fit=crop&q=80\", alt: \"Lake Villa\" }\n        ];\n\n        useEffect(() => {\n            const interval = setInterval(() => {\n                setIsTransitioning(true);\n                setTimeout(() => {\n                    setCurrentIndex((prevIndex) => (prevIndex + 1) % heroImages.length);\n                    setIsTransitioning(false);\n                }, 1000);\n            }, 5000);\n            return () => clearInterval(interval);\n        }, [currentIndex, isTransitioning]);\n\n        return (\n            <section className=\"relative h-screen overflow-hidden hero-overlay\">\n                <div className=\"absolute inset-0 bg-brand-gray\">\n                    <img src={heroImages[currentIndex].url} alt={heroImages[currentIndex].alt} className=\"w-full h-full object-cover opacity-90\" \/>\n                    {isTransitioning && (\n                        <div className=\"absolute inset-0 wiper-slide\">\n                            <img src={heroImages[(currentIndex + 1) % heroImages.length].url} alt={heroImages[(currentIndex + 1) % heroImages.length].alt} className=\"w-full h-full object-cover opacity-90\" \/>\n                        <\/div>\n                    )}\n                <\/div>\n                <div className=\"relative z-10 h-full flex items-end pb-20 lg:pb-32 text-white\">\n                    <div className=\"max-w-[1400px] mx-auto px-6 lg:px-12 w-full\">\n                        <p className=\"text-sm font-medium tracking-[0.3em] mb-4 opacity-80 uppercase\">Breathing Spaces<\/p>\n                        <h1 className=\"text-5xl lg:text-7xl font-light mb-6 drop-shadow-lg\">Find Your Breath<br\/>in Nature<\/h1>\n                        <p className=\"text-lg opacity-90 font-light\">\u81ea\u7136\u306e\u4e2d\u3067\u3001\u547c\u5438\u3059\u308b<\/p>\n                    <\/div>\n                <\/div>\n            <\/section>\n        );\n    };\n\n    const App = () => (\n        <div className=\"app\">\n            <Navigation \/>\n            <HeroSection \/>\n            <section className=\"py-20 text-center bg-white text-brand-dark\">\n                <h2 className=\"text-3xl font-serif\">AIRSTAR Experience<\/h2>\n                <p className=\"mt-4 opacity-60 text-sm\">\u798f\u5ca1\u306e\u9b45\u529b\u3092\u518d\u767a\u898b\u3059\u308b\u65c5\u3092\u3002<\/p>\n            <\/section>\n        <\/div>\n    );\n\n    \/\/ root\u8981\u7d20\u304c\u78ba\u5b9f\u306b\u5b58\u5728\u3059\u308b\u3053\u3068\u3092\u78ba\u8a8d\u3057\u3066\u304b\u3089\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\n    const renderApp = () => {\n        const container = document.getElementById('root-airstar');\n        if (container && typeof ReactDOM !== 'undefined') {\n            const root = ReactDOM.createRoot(container);\n            root.render(<App \/>);\n        }\n    };\n\n    \/\/ DOM\u306e\u8aad\u307f\u8fbc\u307f\u5b8c\u4e86\u3092\u5f85\u3064\n    if (document.readyState === 'loading') {\n        document.addEventListener('DOMContentLoaded', renderApp);\n    } else {\n        renderApp();\n    }\n<\/script>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-11","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/airstar-group.jp\/index.php?rest_route=\/wp\/v2\/pages\/11","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/airstar-group.jp\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/airstar-group.jp\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/airstar-group.jp\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/airstar-group.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=11"}],"version-history":[{"count":12,"href":"https:\/\/airstar-group.jp\/index.php?rest_route=\/wp\/v2\/pages\/11\/revisions"}],"predecessor-version":[{"id":40,"href":"https:\/\/airstar-group.jp\/index.php?rest_route=\/wp\/v2\/pages\/11\/revisions\/40"}],"wp:attachment":[{"href":"https:\/\/airstar-group.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=11"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}