{"id":6,"date":"2026-11-07T22:14:46","date_gmt":"2026-11-07T13:14:46","guid":{"rendered":"https:\/\/www.wondergardenkasukabe.com\/?page_id=6"},"modified":"2026-11-07T22:14:46","modified_gmt":"2026-11-07T13:14:46","slug":"6-2","status":"publish","type":"page","link":"https:\/\/www.wondergardenkasukabe.com\/?page_id=6","title":{"rendered":""},"content":{"rendered":"\n<!DOCTYPE html>\n<html lang=\"ja\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Wonder Garden Farm School<\/title>\n    \n    <!-- Google Fonts: Zen Maru Gothic -->\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Zen+Maru+Gothic:wght@400;500;700&#038;display=swap\" rel=\"stylesheet\">\n    \n    <!-- Tailwind CSS -->\n    <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n    <script>\n        tailwind.config = {\n            theme: {\n                extend: {\n                    colors: {\n                        beige: {\n                            DEFAULT: '#F9F6F0',\n                            dark: '#EAE3D5'\n                        },\n                        green: {\n                            DEFAULT: '#355E4A',\n                            light: '#4A7A62'\n                        },\n                        orange: {\n                            DEFAULT: '#D46A4A',\n                            hover: '#C25A3A'\n                        },\n                        brown: {\n                            DEFAULT: '#4A3B32',\n                            light: '#6B5A50'\n                        }\n                    },\n                    fontFamily: {\n                        sans: ['\"Zen Maru Gothic\"', 'sans-serif'],\n                    }\n                }\n            }\n        }\n    <\/script>\n\n    <style>\n        body {\n            background-color: #F9F6F0;\n            color: #4A3B32;\n            overflow-x: hidden;\n        }\n\n        \/* \u6709\u6a5f\u7684\u306a\u89d2\u4e38\uff08\u30d2\u30fc\u30ed\u30fc\u753b\u50cf\uff09 *\/\n        .organic-shape {\n            border-radius: 35% 65% 55% 45% \/ 45% 40% 60% 55%;\n            box-shadow: 0 10px 30px rgba(0,0,0,0.05);\n            transition: border-radius 3s ease-in-out;\n        }\n        .organic-shape:hover {\n            border-radius: 45% 55% 40% 60% \/ 55% 45% 50% 45%;\n        }\n\n        \/* \u4e0b\u90e8\u306e\u5c0f\u3055\u306a\u5186\u5f62\u753b\u50cf\u7528 *\/\n        .circle-shape-1 {\n            border-radius: 50% 40% 60% 40% \/ 40% 60% 50% 50%;\n        }\n        .circle-shape-2 {\n            border-radius: 40% 60% 50% 50% \/ 50% 40% 60% 40%;\n        }\n\n        \/* SVG\u30a2\u30a4\u30b3\u30f3\u306e\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3 *\/\n        .float-slow {\n            animation: float 6s ease-in-out infinite;\n        }\n        .float-slower {\n            animation: float 8s ease-in-out infinite reverse;\n        }\n        @keyframes float {\n            0% { transform: translateY(0px) rotate(0deg); }\n            50% { transform: translateY(-15px) rotate(5deg); }\n            100% { transform: translateY(0px) rotate(0deg); }\n        }\n    <\/style>\n<\/head>\n<body class=\"antialiased\">\n\n    <!-- Header -->\n    <header class=\"w-full bg-beige py-4 px-6 md:px-12 flex justify-between items-center sticky top-0 z-50 shadow-sm\">\n        <!-- Logo -->\n        <a href=\"#\" class=\"flex items-center gap-3\">\n            <div class=\"w-10 h-10 md:w-12 md:h-12 bg-white rounded-full flex items-center justify-center shadow-sm border border-beige-dark\">\n                <!-- \u6728\u306e\u30a2\u30a4\u30b3\u30f3\u4ee3\u7528\u306e\u7d75\u6587\u5b57\/SVG -->\n                <span class=\"text-2xl\">\ud83c\udf33<\/span>\n            <\/div>\n            <h1 class=\"text-xl md:text-2xl font-bold leading-tight\">\n                Wonder Garden<br>\n                <span class=\"text-lg md:text-xl\">Farm School<\/span>\n            <\/h1>\n        <\/a>\n\n        <!-- Navigation (Hidden on Mobile) -->\n        <nav class=\"hidden lg:flex items-center gap-8 font-medium\">\n            <a href=\"#\" class=\"text-green border-b-2 border-green pb-1\">Home<\/a>\n            <a href=\"#\" class=\"hover:text-green transition-colors\">About<\/a>\n            <a href=\"#\" class=\"hover:text-green transition-colors\">Programs<\/a>\n            <a href=\"#\" class=\"hover:text-green transition-colors\">Information<\/a>\n            <a href=\"#\" class=\"hover:text-green transition-colors\">Contact<\/a>\n        <\/nav>\n\n        <!-- CTA Button -->\n        <a href=\"#\" class=\"hidden md:inline-block bg-orange hover:bg-orange-hover text-white font-medium px-6 py-3 rounded-full transition-all shadow-md hover:shadow-lg\">\n            \u3054\u4f53\u9a13\u30fb\u304a\u554f\u5408\u305b\u306f\u3053\u3061\u3089\n        <\/a>\n        \n        <!-- Mobile Menu Icon -->\n        <button class=\"lg:hidden text-3xl text-green\">\n            \u2630\n        <\/button>\n    <\/header>\n\n    <main>\n        <!-- Hero Section -->\n        <section class=\"max-w-6xl mx-auto px-4 md:px-8 mt-8 md:mt-12 relative z-10\">\n            <div class=\"w-full h-[300px] md:h-[500px] organic-shape overflow-hidden relative\">\n                <!-- \u7551\u3067\u306e\u53ce\u7a6b\u98a8\u666f\u306e\u30d7\u30ec\u30fc\u30b9\u30db\u30eb\u30c0\u30fc\u753b\u50cf -->\n                <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1595841696677-6489ff3f8cd1?auto=format&#038;fit=crop&#038;q=80&#038;w=1200\" \n                     alt=\"\u5b50\u3069\u3082\u305f\u3061\u304c\u7551\u3067\u91ce\u83dc\u3092\u53ce\u7a6b\u3057\u3066\u3044\u308b\u69d8\u5b50\" \n                     class=\"w-full h-full object-cover\">\n            <\/div>\n        <\/section>\n\n        <!-- Message Section -->\n        <section class=\"relative bg-beige pt-16 md:pt-24 pb-8 text-center px-4\">\n            \n            <!-- Decorations (Absolute positioning) -->\n            <!-- \u5de6\u4e0a\u306e\u8449\u3063\u3071 -->\n            <svg class=\"absolute top-10 left-[5%] md:left-[15%] w-16 h-16 float-slow opacity-80\" viewBox=\"0 0 100 100\" fill=\"none\" stroke=\"#5E6C58\" stroke-width=\"3\" stroke-linecap=\"round\">\n                <path d=\"M10 90 C 40 90, 80 50, 90 10\" \/>\n                <path d=\"M30 70 C 20 50, 40 30, 60 40 C 60 50, 40 70, 30 70\" fill=\"#E8F0E1\" \/>\n                <path d=\"M50 50 C 40 30, 60 10, 80 20 C 80 30, 60 50, 50 50\" fill=\"#E8F0E1\" \/>\n            <\/svg>\n            \n            <!-- \u53f3\u4e0a\u306e\u30cb\u30f3\u30b8\u30f3 -->\n            <svg class=\"absolute top-4 right-[5%] md:right-[15%] w-20 h-20 float-slower opacity-90\" viewBox=\"0 0 100 100\" fill=\"none\" stroke=\"#A96E4C\" stroke-width=\"3\">\n                <path d=\"M50 30 C 80 30, 90 50, 50 90 C 10 50, 20 30, 50 30\" fill=\"#E27B58\"\/>\n                <path d=\"M40 30 C 30 10, 45 5, 50 20\" stroke=\"#5E6C58\" stroke-width=\"4\" fill=\"none\"\/>\n                <path d=\"M60 30 C 70 10, 55 5, 50 20\" stroke=\"#5E6C58\" stroke-width=\"4\" fill=\"none\"\/>\n            <\/svg>\n\n            <!-- \u5de6\u4e0b\u306e\u82b1 -->\n            <svg class=\"absolute bottom-10 left-[10%] md:left-[20%] w-12 h-12 float-slower opacity-80\" viewBox=\"0 0 100 100\" fill=\"none\" stroke=\"#A96E4C\" stroke-width=\"3\">\n                <circle cx=\"50\" cy=\"50\" r=\"12\" fill=\"#F4B942\" \/>\n                <path d=\"M50 35 C 40 10, 60 10, 50 35\" fill=\"#FDF7E3\"\/>\n                <path d=\"M50 65 C 40 90, 60 90, 50 65\" fill=\"#FDF7E3\"\/>\n                <path d=\"M35 50 C 10 40, 10 60, 35 50\" fill=\"#FDF7E3\"\/>\n                <path d=\"M65 50 C 90 40, 90 60, 65 50\" fill=\"#FDF7E3\"\/>\n            <\/svg>\n\n            <!-- \u53f3\u4e0b\u306e\u3066\u3093\u3068\u3046\u866b (\u7d75\u6587\u5b57\u3067\u4ee3\u7528) -->\n            <div class=\"absolute bottom-16 right-[10%] md:right-[22%] text-4xl float-slow rotate-45 opacity-80\">\n                \ud83d\udc1e\n            <\/div>\n\n            <!-- Content -->\n            <div class=\"relative z-10 max-w-3xl mx-auto\">\n                <h2 class=\"text-3xl md:text-5xl lg:text-6xl font-bold leading-tight tracking-wide mb-6\">\n                    \u81ea\u7136\u3068\u3064\u306a\u304c\u308b\u3001<br class=\"md:hidden\">\n                    \u751f\u304d\u305f\u77e5\u8b58\u304c\u80b2\u3064\u3002\n                <\/h2>\n                <h3 class=\"text-xl md:text-3xl font-bold mb-6 text-brown-light\">\n                    Wonder Garden Farm School\n                <\/h3>\n                <p class=\"text-base md:text-lg leading-relaxed mb-4 font-medium\">\n                    \u571f\u306b\u89e6\u308c\u3001\u98df\u3079\u7269\u3092\u80b2\u3066\u308b\u559c\u3073\u3092\u901a\u3058\u3066\u3001<br>\n                    \u5b50\u3069\u3082\u305f\u3061\u306e\u300e\u81ea\u3089\u8003\u3048\u308b\u529b\u300f\u3068\u300e\u8c4a\u304b\u306a\u611f\u6027\u300f\u3092\u80b2\u3080\u81ea\u7136\u4f53\u9a13\u30b9\u30af\u30fc\u30eb\u3067\u3059\u3002\n                <\/p>\n            <\/div>\n        <\/section>\n\n        <!-- Green Wave & CTA Section -->\n        <section class=\"relative w-full z-20\">\n            <!-- Top Wave -->\n            <div class=\"w-full overflow-hidden leading-none mb-[-1px]\">\n                <svg viewBox=\"0 0 1440 120\" class=\"w-full h-16 md:h-24 text-green fill-current block\" preserveAspectRatio=\"none\">\n                    <path d=\"M0,64L80,74.7C160,85,320,107,480,101.3C640,96,800,64,960,58.7C1120,53,1280,75,1360,85.3L1440,96L1440,120L1360,120C1280,120,1120,120,960,120C800,120,640,120,480,120C320,120,160,120,80,120L0,120Z\"><\/path>\n                <\/svg>\n            <\/div>\n            \n            <!-- Green Band content -->\n            <div class=\"bg-green py-8 md:py-12 flex justify-center items-center\">\n                <a href=\"#\" class=\"inline-block bg-orange hover:bg-orange-hover text-white text-lg md:text-xl font-bold px-10 py-4 rounded-full shadow-lg transition-transform hover:-translate-y-1\">\n                    \u4f53\u9a13\u30d7\u30ed\u30b0\u30e9\u30e0\u3092\u898b\u308b\n                <\/a>\n            <\/div>\n            \n            <!-- Bottom Wave -->\n            <div class=\"w-full overflow-hidden leading-none mt-[-1px]\">\n                <svg viewBox=\"0 0 1440 120\" class=\"w-full h-16 md:h-24 text-green fill-current block rotate-180\" preserveAspectRatio=\"none\">\n                    <path d=\"M0,64L80,74.7C160,85,320,107,480,101.3C640,96,800,64,960,58.7C1120,53,1280,75,1360,85.3L1440,96L1440,120L1360,120C1280,120,1120,120,960,120C800,120,640,120,480,120C320,120,160,120,80,120L0,120Z\"><\/path>\n                <\/svg>\n            <\/div>\n        <\/section>\n\n        <!-- About Area Section -->\n        <section class=\"bg-beige pt-16 md:pt-24 pb-32 px-4 md:px-12 relative\">\n            <div class=\"max-w-5xl mx-auto relative flex flex-col items-center\">\n                \n                <!-- Left Image (Absolute on Desktop, Relative on Mobile) -->\n                <div class=\"w-48 h-48 md:w-64 md:h-64 mb-8 md:mb-0 md:absolute md:-left-4 md:bottom-0 z-10\">\n                    <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1574943320219-553eb213f72d?auto=format&#038;fit=crop&#038;q=80&#038;w=400\" \n                         alt=\"\u8fb2\u4f5c\u696d\u3092\u3059\u308b\u5b50\u3069\u3082\" \n                         class=\"w-full h-full object-cover circle-shape-1 shadow-md border-4 border-white\">\n                <\/div>\n\n                <!-- Center Text -->\n                <div class=\"text-center md:px-32 relative z-20\">\n                    <h2 class=\"text-2xl md:text-4xl font-bold mb-8 tracking-wide\">\n                        \u300e\u77e5\u308b\u300f \u304b\u3089 \u300e\u3084\u3063\u3066\u307f\u308b\u300f \u3078\u3002\n                    <\/h2>\n                    <p class=\"text-base md:text-lg leading-loose font-medium text-left md:text-center\">\n                        \u81ea\u7136\u306e\u4e2d\u3067\u5b66\u3076\u5b50\u3069\u3082\u305f\u3061\u306e\u30d7\u30ed\u30bb\u30b9\u3092\u5927\u5207\u306b\u3057\u3001<br class=\"hidden md:block\">\n                        \u697d\u3057\u3055\u3068\u767a\u898b\u3092\u5171\u6709\u3067\u304d\u308b\u5834\u6240\u306b\u8fb2\u5712\u3092\u80b2\u3066\u3066\u3044\u307e\u3059\u3002<br>\n                        \u5c0f\u3055\u306a\u5bc4\u308a\u9053\u3082\u3059\u3079\u3066\u3001\u5b50\u3069\u3082\u305f\u3061\u306e\u81ea\u7acb\u5fc3\u3092\u5fdc\u63f4\u3057\u3066\u3001<br class=\"hidden md:block\">\n                        \u6e29\u304b\u307f\u306e\u3042\u308b\u5fc3\u3092\u80b2\u3093\u3067\u3044\u304f\u3053\u3068\u3092\u76ee\u6307\u3057\u3066\u304a\u308a\u307e\u3059\u3002\n                    <\/p>\n                <\/div>\n\n                <!-- Right Image (Absolute on Desktop, Relative on Mobile) -->\n                <div class=\"w-40 h-40 md:w-56 md:h-56 mt-12 md:mt-0 md:absolute md:-right-8 md:-bottom-12 z-10\">\n                    <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1516253593875-bd7ba052fbc5?auto=format&#038;fit=crop&#038;q=80&#038;w=400\" \n                         alt=\"\u81ea\u7136\u3068\u89e6\u308c\u5408\u3046\u69d8\u5b50\" \n                         class=\"w-full h-full object-cover circle-shape-2 shadow-md border-4 border-white\">\n                <\/div>\n                \n                <!-- Right Side Decorations -->\n                <svg class=\"hidden md:block absolute -right-4 top-0 w-24 h-24 float-slow opacity-80\" viewBox=\"0 0 100 100\" fill=\"none\" stroke=\"#5E6C58\" stroke-width=\"2\">\n                    <path d=\"M20 80 C 40 80, 80 40, 80 20\" \/>\n                    <circle cx=\"80\" cy=\"20\" r=\"10\" fill=\"#E8F0E1\" \/>\n                    <circle cx=\"50\" cy=\"50\" r=\"8\" fill=\"#F4B942\" stroke=\"none\" \/>\n                <\/svg>\n\n            <\/div>\n        <\/section>\n    <\/main>\n\n    <!-- Footer Simple Placeholder -->\n    <footer class=\"bg-brown text-white text-center py-8\">\n        <p class=\"text-sm font-medium opacity-80\">&copy; 2026 Wonder Garden Farm School. All Rights Reserved.<\/p>\n    <\/footer>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Wonder Garden Farm School \ud83c\udf33 Wonder Garden Farm School Home About Programs Information Contact \u3054\u4f53\u9a13\u30fb\u304a\u554f\u5408\u305b\u306f\u3053\u3061\u3089 \u2630 \ud83d\udc1e [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-6","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.wondergardenkasukabe.com\/index.php?rest_route=\/wp\/v2\/pages\/6","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wondergardenkasukabe.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.wondergardenkasukabe.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.wondergardenkasukabe.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wondergardenkasukabe.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=6"}],"version-history":[{"count":1,"href":"https:\/\/www.wondergardenkasukabe.com\/index.php?rest_route=\/wp\/v2\/pages\/6\/revisions"}],"predecessor-version":[{"id":8,"href":"https:\/\/www.wondergardenkasukabe.com\/index.php?rest_route=\/wp\/v2\/pages\/6\/revisions\/8"}],"wp:attachment":[{"href":"https:\/\/www.wondergardenkasukabe.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=6"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}