AI\u00d7\u5bfe\u8a71\u3067\u4f5c\u308bWeb\u5236\u4f5c\u30b5\u30fc\u30d3\u30b9 | \u500b\u4eba\u4e8b\u696d\u4e3b\u30fb\u5c0f\u898f\u6a21\u30d3\u30b8\u30cd\u30b9\u5411\u3051<\/title>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\" \/>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin \/>\n <link\n href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+JP:wght@300;400;500;700&family=Shippori+Mincho:wght@400;600&display=swap\"\n rel=\"stylesheet\"\n \/>\n <style>\n \/* Base Variables *\/\n :root {\n --primary-color: #2b2b2b; \/* Almost Black *\/\n --accent-color: #3b82f6; \/* Modern Blue *\/\n --bg-color: #ffffff;\n --bg-secondary: #f8f9fa;\n --text-color: #333333;\n --text-light: #666666;\n --border-color: #e5e5e5;\n --max-width: 1000px;\n --spacing-unit: 80px;\n }\n\n \/* Reset & Base Styles *\/\n * {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n }\n\n body {\n font-family: \"Noto Sans JP\", sans-serif;\n color: var(--text-color);\n line-height: 1.8;\n background-color: var(--bg-color);\n -webkit-font-smoothing: antialiased;\n }\n\n h1,\n h2,\n h3,\n h4 {\n font-family: \"Shippori Mincho\", serif; \/* Trust & Professionalism *\/\n line-height: 1.4;\n color: var(--primary-color);\n }\n\n a {\n text-decoration: none;\n color: inherit;\n transition: opacity 0.3s ease;\n }\n\n a:hover {\n opacity: 0.8;\n }\n\n img {\n max-width: 100%;\n height: auto;\n display: block;\n }\n\n .container {\n width: 90%;\n max-width: var(--max-width);\n margin: 0 auto;\n }\n\n .section {\n padding: var(--spacing-unit) 0;\n }\n\n .section-title {\n font-size: 2rem;\n text-align: center;\n margin-bottom: 2rem;\n letter-spacing: 0.05em;\n position: relative;\n padding-bottom: 1rem;\n }\n\n .section-title::after {\n content: \"\";\n position: absolute;\n bottom: 0;\n left: 50%;\n transform: translateX(-50%);\n width: 40px;\n height: 1px;\n background-color: var(--accent-color);\n }\n\n \/* Hero Section *\/\n .hero {\n min-height: 90vh;\n display: flex;\n align-items: center;\n justify-content: center;\n background: linear-gradient(\n rgba(255, 255, 255, 0.9),\n rgba(255, 255, 255, 0.8)\n ),\n url(\"images\/hero-bg.jpg\") center\/cover no-repeat;\n text-align: center;\n padding: 0 1rem;\n }\n\n .hero-content {\n max-width: 700px;\n }\n\n .hero-tagline {\n display: inline-block;\n font-size: 0.9rem;\n letter-spacing: 0.1em;\n margin-bottom: 1.5rem;\n color: var(--text-light);\n border: 1px solid var(--border-color);\n padding: 0.5rem 1rem;\n background-color: rgba(255, 255, 255, 0.8);\n }\n\n .hero-title {\n font-size: 2.8rem;\n margin-bottom: 1.5rem;\n font-weight: 600;\n }\n\n .hero-subtitle {\n font-size: 1.1rem;\n color: var(--text-light);\n margin-bottom: 3rem;\n }\n\n \/* Buttons *\/\n .btn {\n display: inline-block;\n background-color: var(--primary-color);\n color: #fff;\n padding: 1rem 3rem;\n font-size: 1rem;\n letter-spacing: 0.05em;\n border-radius: 2px;\n transition: all 0.3s ease;\n }\n\n .btn:hover {\n background-color: var(--accent-color);\n transform: translateY(-2px);\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n }\n\n .btn-outline {\n background-color: transparent;\n color: var(--primary-color);\n border: 1px solid var(--primary-color);\n }\n\n .btn-outline:hover {\n background-color: var(--primary-color);\n color: #fff;\n }\n\n \/* Concept Section *\/\n .concept {\n background-color: var(--bg-secondary);\n text-align: center;\n }\n\n .concept-text {\n font-size: 1.2rem;\n max-width: 600px;\n margin: 0 auto;\n margin-bottom: 3rem;\n line-height: 2;\n }\n\n .concept-highlight {\n font-family: \"Shippori Mincho\", serif;\n font-size: 1.8rem;\n margin-bottom: 2rem;\n display: block;\n color: var(--primary-color);\n }\n\n .concept-flow {\n display: flex;\n justify-content: center;\n gap: 2rem;\n flex-wrap: wrap;\n margin-top: 2rem;\n }\n\n .flow-step {\n background: #fff;\n padding: 1.5rem 2rem;\n border-radius: 8px;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n min-width: 140px;\n transition: transform 0.3s ease, box-shadow 0.3s ease;\n }\n\n .flow-step:hover {\n transform: translateY(-5px);\n box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);\n }\n\n \/* \u77e2\u5370\u306e\u30c7\u30b6\u30a4\u30f3 *\/\n .flow-step:not(:last-child)::after {\n content: \"\";\n position: absolute;\n right: -1.5rem;\n top: 50%;\n transform: translateY(-50%);\n width: 1rem;\n height: 1rem;\n border-top: 2px solid var(--border-color);\n border-right: 2px solid var(--border-color);\n transform: translateY(-50%) rotate(45deg);\n }\n\n .flow-en {\n font-size: 0.75rem;\n color: var(--accent-color);\n letter-spacing: 0.05em;\n margin-bottom: 0.5rem;\n font-weight: 500;\n text-transform: uppercase;\n }\n\n .flow-jp {\n font-family: \"Shippori Mincho\", serif;\n font-size: 1.25rem;\n font-weight: 600;\n color: var(--primary-color);\n }\n\n \/* Service Flow *\/\n .step-list {\n display: flex;\n flex-direction: column;\n gap: 2rem;\n max-width: 800px;\n margin: 0 auto;\n }\n\n .step-item {\n display: flex;\n align-items: flex-start;\n gap: 2rem;\n padding: 2rem;\n border: 1px solid var(--border-color);\n background: #fff;\n transition: transform 0.3s ease;\n }\n\n .step-item:hover {\n border-color: var(--accent-color);\n }\n\n .step-number {\n font-family: \"Shippori Mincho\", serif;\n font-size: 3rem;\n line-height: 1;\n color: var(--accent-color);\n opacity: 0.2;\n flex-shrink: 0;\n }\n\n .step-content h3 {\n font-size: 1.3rem;\n margin-bottom: 1rem;\n }\n\n .step-content p {\n font-size: 0.95rem;\n color: var(--text-light);\n }\n\n \/* Sample Designs *\/\n .gallery {\n background-color: var(--bg-secondary);\n }\n\n .gallery-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 2rem;\n }\n\n .gallery-item {\n background: #fff;\n padding: 1rem;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);\n }\n\n .gallery-img {\n width: 100%;\n height: 250px;\n object-fit: cover;\n background-color: #eee;\n margin-bottom: 1rem;\n }\n\n .gallery-caption {\n font-size: 0.9rem;\n text-align: center;\n color: var(--text-light);\n }\n\n \/* Target Audience *\/\n .target-list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));\n gap: 2rem;\n text-align: center;\n }\n\n .target-item {\n padding: 2rem;\n border: 1px solid var(--border-color);\n background: #fff;\n transition: transform 0.3s ease, box-shadow 0.3s ease;\n }\n\n .target-item:hover {\n transform: translateY(-5px);\n box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);\n border-color: var(--accent-color);\n }\n\n .target-img {\n width: 100px;\n height: 100px;\n object-fit: cover;\n border-radius: 50%;\n margin: 0 auto 1.5rem;\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);\n display: block;\n }\n\n \/* Pricing *\/\n .pricing-wrapper {\n display: flex;\n justify-content: center;\n gap: 2rem;\n flex-wrap: wrap;\n max-width: 900px;\n margin: 0 auto;\n }\n\n .pricing-card {\n background: #fff;\n border: 1px solid var(--border-color);\n padding: 3rem 2rem;\n flex: 1;\n min-width: 300px;\n position: relative;\n transition: transform 0.3s ease, box-shadow 0.3s ease;\n }\n\n .pricing-card:hover {\n transform: translateY(-5px);\n box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);\n border-color: var(--accent-color);\n }\n\n .pricing-card.highlight {\n border: 2px solid var(--accent-color);\n position: relative;\n }\n\n .pricing-badge {\n position: absolute;\n top: -12px;\n left: 50%;\n transform: translateX(-50%);\n background: var(--accent-color);\n color: #fff;\n padding: 0.25rem 1rem;\n font-size: 0.8rem;\n border-radius: 20px;\n font-weight: 500;\n letter-spacing: 0.05em;\n }\n\n .pricing-title {\n text-align: center;\n margin-bottom: 1.5rem;\n font-size: 1.4rem;\n font-weight: 600;\n }\n\n .price {\n font-size: 2.5rem;\n font-family: \"Shippori Mincho\", serif;\n margin: 1rem 0 2rem;\n text-align: center;\n color: var(--primary-color);\n }\n\n .price span {\n font-size: 1rem;\n color: var(--text-light);\n margin-left: 0.2rem;\n }\n\n .price-sub {\n display: block;\n font-size: 0.9rem;\n color: var(--text-light);\n margin-top: -1rem;\n margin-bottom: 2rem;\n text-align: center;\n }\n\n .price-features {\n list-style: none;\n margin-bottom: 2rem;\n text-align: left;\n }\n\n .price-features li {\n margin-bottom: 1rem;\n padding-left: 1.8rem;\n position: relative;\n font-size: 0.95rem;\n }\n\n .price-features li::before {\n content: \"\u2713\";\n position: absolute;\n left: 0;\n color: var(--accent-color);\n font-weight: bold;\n }\n\n \/* Option List Styles *\/\n .option-list {\n list-style: none;\n text-align: left;\n }\n\n .option-list li {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 1rem 0;\n border-bottom: 1px dashed var(--border-color);\n font-size: 0.95rem;\n }\n\n .option-list li:last-child {\n border-bottom: none;\n }\n\n .option-name {\n font-weight: 500;\n }\n\n .option-price {\n color: var(--text-light);\n font-size: 0.9rem;\n }\n\n \/* FAQ *\/\n .faq-list {\n max-width: 700px;\n margin: 0 auto;\n }\n\n .faq-item {\n border-bottom: 1px solid var(--border-color);\n padding: 1.5rem 0;\n }\n\n .faq-question {\n font-weight: 600;\n margin-bottom: 0;\n position: relative;\n padding-left: 1.5rem;\n cursor: pointer;\n }\n\n .faq-question::before {\n content: \"Q.\";\n position: absolute;\n left: 0;\n color: var(--accent-color);\n }\n\n .faq-answer {\n color: var(--text-light);\n padding-left: 1.5rem;\n font-size: 0.95rem;\n }\n\n \/* CTA *\/\n .final-cta {\n background-color: var(--primary-color);\n color: #fff;\n text-align: center;\n }\n\n .final-cta h2 {\n color: #fff;\n margin-bottom: 2rem;\n }\n\n .final-cta .btn {\n background-color: #fff;\n color: var(--primary-color);\n }\n\n .final-cta .btn:hover {\n background-color: var(--accent-color);\n color: #fff;\n }\n\n \/* Footer *\/\n footer {\n text-align: center;\n padding: 2rem;\n font-size: 0.8rem;\n color: var(--text-light);\n border-top: 1px solid var(--border-color);\n }\n\n \/* Responsive *\/\n @media (max-width: 768px) {\n :root {\n --spacing-unit: 50px; \/* \u4f59\u767d\u3082\u5c11\u3057\u8a70\u3081\u308b *\/\n }\n\n body {\n font-size: 0.9rem; \/* \u30d9\u30fc\u30b9\u306e\u6587\u5b57\u30b5\u30a4\u30ba\u3092\u5c11\u3057\u5c0f\u3055\u304f *\/\n }\n\n .hero-title {\n font-size: 1.6rem; \/* 2.8rem -> 1.6rem *\/\n line-height: 1.5;\n }\n\n .hero-subtitle {\n font-size: 0.95rem;\n margin-bottom: 2rem;\n }\n\n .section-title {\n font-size: 1.5rem; \/* 2rem -> 1.5rem *\/\n margin-bottom: 1.5rem;\n }\n\n .concept-highlight {\n font-size: 1.3rem; \/* 1.8rem -> 1.3rem *\/\n }\n\n .concept-text {\n font-size: 0.95rem; \/* 1.2rem -> 0.95rem *\/\n line-height: 1.8;\n text-align: left; \/* \u30b9\u30de\u30db\u3067\u306f\u5de6\u5bc4\u305b\u306e\u65b9\u304c\u8aad\u307f\u3084\u3059\u3044\u5834\u5408\u304c\u591a\u3044\u304c\u3001\u4e2d\u592e\u63c3\u3048\u7dad\u6301\u306a\u3089\u524a\u9664 *\/\n }\n\n .step-item {\n flex-direction: column;\n gap: 0.8rem;\n padding: 1.5rem;\n }\n\n .step-number {\n font-size: 1.8rem;\n margin-bottom: 0;\n }\n\n .step-content h3 {\n font-size: 1.15rem;\n margin-bottom: 0.5rem;\n }\n\n .price {\n font-size: 2rem;\n }\n\n \/* \u30bf\u30fc\u30b2\u30c3\u30c8\u30ea\u30b9\u30c8\u306e\u8abf\u6574 *\/\n .target-list {\n gap: 1rem;\n }\n\n .target-item {\n padding: 1.5rem;\n }\n\n .concept-flow {\n flex-direction: column;\n align-items: center;\n gap: 1.5rem;\n }\n\n .flow-step {\n width: 100%;\n max-width: 280px;\n }\n\n \/* \u30b9\u30de\u30db\u6642\u306f\u77e2\u5370\u3092\u4e0b\u5411\u304d\u306b\u3001\u3042\u308b\u3044\u306f\u975e\u8868\u793a\u306b *\/\n .flow-step:not(:last-child)::after {\n right: 50%;\n top: auto;\n bottom: -1rem;\n transform: translateX(50%) rotate(135deg);\n }\n }\n\n \/* --- Animation & Interactive Additions --- *\/\n\n \/* Scroll Fade In *\/\n .fade-in-section {\n opacity: 0;\n transform: translateY(30px);\n transition: opacity 0.8s ease-out, transform 0.8s ease-out;\n will-change: opacity, transform;\n }\n\n .fade-in-section.is-visible {\n opacity: 1;\n transform: translateY(0);\n }\n\n \/* FAQ Accordion Enhancements *\/\n .faq-question {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding-right: 1rem;\n }\n\n .faq-question::after {\n content: \"+\";\n font-size: 1.5rem;\n color: var(--accent-color);\n transition: transform 0.3s ease;\n margin-left: 1rem;\n font-weight: 300;\n }\n\n .faq-item.active .faq-question::after {\n transform: rotate(45deg);\n }\n\n .faq-answer {\n max-height: 0;\n overflow: hidden;\n transition: max-height 0.3s ease-out, opacity 0.3s ease;\n opacity: 0;\n }\n\n .faq-item.active .faq-answer {\n opacity: 1;\n \/* max-height is handled by JS *\/\n }\n\n \/* Gallery Hover Effects *\/\n .gallery-item {\n overflow: hidden;\n transition: box-shadow 0.3s ease;\n }\n\n .gallery-item:hover {\n box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);\n }\n\n .gallery-img {\n transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n }\n\n .gallery-item:hover .gallery-img {\n transform: scale(1.05);\n }\n\n \/* Button Hover Enhance *\/\n .btn {\n position: relative;\n overflow: hidden;\n z-index: 1;\n }\n\n .btn::after {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(255, 255, 255, 0.1);\n transform: translateX(-100%);\n transition: transform 0.3s ease;\n z-index: -1;\n }\n\n .btn:hover::after {\n transform: translateX(0);\n }\n\n \/* Special CTA Button (Simple & Modern) *\/\n .btn-cta {\n background-color: var(--primary-color);\n color: #fff;\n padding: 1rem 4rem;\n border: 1px solid var(--primary-color);\n border-radius: 0; \/* \u3042\u3048\u3066\u89d2\u3092\u843d\u3068\u3057\u3066\u30b7\u30e3\u30fc\u30d7\u306b *\/\n font-family: \"Shippori Mincho\", serif; \/* \u660e\u671d\u4f53\u3067\u4e0a\u54c1\u3055\u3092\u30d7\u30e9\u30b9 *\/\n font-weight: 500;\n font-size: 1.1rem;\n letter-spacing: 0.15em;\n position: relative;\n overflow: hidden;\n z-index: 1;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 1rem;\n transition: color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);\n box-shadow: none;\n }\n\n \/* \u80cc\u666f\u30b9\u30e9\u30a4\u30c9\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3 *\/\n .btn-cta::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 0%;\n height: 100%;\n background-color: var(--accent-color);\n z-index: -1;\n transition: width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);\n }\n\n .btn-cta:hover {\n color: #fff;\n border-color: var(--accent-color);\n transform: none; \/* \u6d3e\u624b\u306a\u52d5\u304d\u306f\u6392\u9664 *\/\n box-shadow: none;\n }\n\n .btn-cta:hover::before {\n width: 100%;\n }\n\n .btn-cta::after {\n display: none;\n }\n\n \/* \u30dc\u30bf\u30f3\u5185\u306e\u77e2\u5370\u30a2\u30a4\u30b3\u30f3 *\/\n .btn-icon {\n width: 1em;\n height: 1em;\n fill: none;\n stroke: currentColor;\n stroke-width: 1.5; \/* \u7dda\u3092\u7d30\u304f\u3057\u3066\u7e4a\u7d30\u306b *\/\n stroke-linecap: square; \/* \u89d2\u5f35\u3089\u305b\u308b *\/\n stroke-linejoin: miter;\n transition: transform 0.4s ease;\n }\n\n .btn-cta:hover .btn-icon {\n transform: translateX(8px);\n }\n <\/style>\n <\/head>\n <body>\n \n <header class=\"hero\">\n <div class=\"hero-content\">\n <span class=\"hero-tagline\">\u500b\u4eba\u4e8b\u696d\u4e3b\u30fb\u5c0f\u898f\u6a21\u30d3\u30b8\u30cd\u30b9\u5c02\u9580<\/span>\n <h1 class=\"hero-title\">\n \u8a00\u8449\u3067\u4f1d\u3048\u306a\u304f\u3066\u3044\u3044\u3002<br \/>AI\u304c3\u3064\u306e\u30c7\u30b6\u30a4\u30f3\u3092\u3054\u63d0\u6848\u3002<br \/>\u300c\u9078\u3076\u300d\u304b\u3089\u59cb\u307e\u308bWeb\u5236\u4f5c\u3002\n <\/h1>\n <p class=\"hero-subtitle\">\n \u30a4\u30e1\u30fc\u30b8\u3092\u8a00\u8449\u306b\u3059\u308b\u82e6\u52b4\u306f\u3001\u3082\u3046\u5fc5\u8981\u3042\u308a\u307e\u305b\u3093\u3002<br \/>\n AI\u304c\u63cf\u304f3\u3064\u306e\u9078\u629e\u80a2\u304b\u3089\u3001\u3042\u306a\u305f\u306e\u30d3\u30b8\u30cd\u30b9\u306b\u4e00\u756a\u5408\u3046\u300c\u9854\u300d\u3092\u9078\u3093\u3067\u304f\u3060\u3055\u3044\u3002\n <\/p>\n <a href=\"https:\/\/coconala.com\/\" target=\"_blank\" class=\"btn btn-cta\">\n \u30b3\u30b3\u30ca\u30e9\u3067\u76f8\u8ac7\u3059\u308b\n <svg class=\"btn-icon\" viewBox=\"0 0 24 24\">\n <line x1=\"0\" y1=\"12\" x2=\"24\" y2=\"12\"><\/line>\n <polyline points=\"17 5 24 12 17 19\"><\/polyline>\n <\/svg>\n <\/a>\n <\/div>\n <\/header>\n\n \n <section class=\"section concept\">\n <div class=\"container\">\n <h2 class=\"section-title\">Concept<\/h2>\n <span class=\"concept-highlight\">\u8a00\u8449\u3088\u308a\u3001\u307e\u305a\u306f\u30ab\u30bf\u30c1\u3092\u3002<\/span>\n <p class=\"concept-text\">\n \u300c\u3069\u3093\u306a\u30c7\u30b6\u30a4\u30f3\u304c\u3044\u3044\u3067\u3059\u304b\uff1f\u300d\u3068\u805e\u304b\u308c\u3066\u3082\u3001<br \/>\n \u30d7\u30ed\u306e\u3088\u3046\u306a\u8a00\u8449\u3067\u8aac\u660e\u3059\u308b\u306e\u306f\u96e3\u3057\u3044\u3082\u306e\u3067\u3059\u3002<br \/>\n \u3060\u304b\u3089\u3001\u79c1\u305f\u3061\u306f\u307e\u305aAI\u3092\u4f7f\u3063\u3066\u5177\u4f53\u7684\u306a\u300c\u30ab\u30bf\u30c1\u300d\u3092\u304a\u898b\u305b\u3057\u307e\u3059\u3002<br \/>\n \u3042\u306a\u305f\u306f\u305d\u308c\u3092\u898b\u3066\u3001\u9078\u3093\u3067\u3001\u4e00\u7dd2\u306b\u8abf\u6574\u3059\u308b\u3060\u3051\u3002\n <\/p>\n <div class=\"concept-flow\">\n <div class=\"flow-step\">\n <span class=\"flow-en\">Step 01<\/span>\n <span class=\"flow-jp\">\u8a71\u3059<\/span>\n <\/div>\n <div class=\"flow-step\">\n <span class=\"flow-en\">Step 02<\/span>\n <span class=\"flow-jp\">\u898b\u308b<\/span>\n <\/div>\n <div class=\"flow-step\">\n <span class=\"flow-en\">Step 03<\/span>\n <span class=\"flow-jp\">\u9078\u3076<\/span>\n <\/div>\n <div class=\"flow-step\">\n <span class=\"flow-en\">Step 04<\/span>\n <span class=\"flow-jp\">\u4e00\u7dd2\u306b\u4f5c\u308b<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"section\">\n <div class=\"container\">\n <h2 class=\"section-title\">Service Flow<\/h2>\n <div class=\"step-list\">\n <div class=\"step-item\">\n <div class=\"step-number\">01<\/div>\n <div class=\"step-content\">\n <h3>\u3054\u8981\u671b\u30d2\u30a2\u30ea\u30f3\u30b0<\/h3>\n <p>\n \u307e\u305a\u306f\u300c\u3069\u3093\u306a\u4e8b\u696d\u3092\u3055\u308c\u3066\u3044\u308b\u304b\u300d\u300c\u3069\u3093\u306a\u4eba\u306b\u898b\u3066\u307b\u3057\u3044\u304b\u300d\u306a\u3069\u3001\u7c21\u5358\u306a\u8cea\u554f\u306b\u304a\u7b54\u3048\u304f\u3060\u3055\u3044\u3002\u30b3\u30b3\u30ca\u30e9\u306e\u30e1\u30c3\u30bb\u30fc\u30b8\u3001\u307e\u305f\u306f\u30aa\u30f3\u30e9\u30a4\u30f3\u901a\u8a71\u306b\u3066\u627f\u308a\u307e\u3059\u3002\n <\/p>\n <\/div>\n <\/div>\n <div class=\"step-item\">\n <div class=\"step-number\">02<\/div>\n <div class=\"step-content\">\n <h3>AI\u30673\u6848\u751f\u6210 \u2192 1\u6848\u9078\u629e<\/h3>\n <p>\n \u30d2\u30a2\u30ea\u30f3\u30b0\u5185\u5bb9\u3092\u3082\u3068\u306b\u3001AI\u3092\u6d3b\u7528\u3057\u3066\u30c8\u30c3\u30d7\u30da\u30fc\u30b8\u306e\u30c7\u30b6\u30a4\u30f3\u6848\u30923\u30d1\u30bf\u30fc\u30f3\u4f5c\u6210\u3057\u307e\u3059\u3002\u3042\u306a\u305f\u306f\u63d0\u793a\u3055\u308c\u305f\u30c7\u30b6\u30a4\u30f3\u306e\u4e2d\u304b\u3089\u3001\u4e00\u756a\u30a4\u30e1\u30fc\u30b8\u306b\u8fd1\u3044\u3082\u306e\u30921\u3064\u9078\u3076\u3060\u3051\u3067\u3059\u3002\n <\/p>\n <\/div>\n <\/div>\n <div class=\"step-item\">\n <div class=\"step-number\">03<\/div>\n <div class=\"step-content\">\n <h3>\u30aa\u30f3\u30e9\u30a4\u30f3MT\u3067\u4e00\u7dd2\u306b\u5b8c\u6210<\/h3>\n <p>\n \u9078\u3093\u3060\u30c7\u30b6\u30a4\u30f3\u3092\u30d9\u30fc\u30b9\u306b\u3001\u30aa\u30f3\u30e9\u30a4\u30f3\u30df\u30fc\u30c6\u30a3\u30f3\u30b0\uff081\u301c2\u6642\u9593\uff09\u3067\u753b\u9762\u3092\u5171\u6709\u3057\u306a\u304c\u3089\u6700\u7d42\u8abf\u6574\u3092\u884c\u3044\u307e\u3059\u3002\u4fee\u6b63\u5f85\u3061\u306e\u6642\u9593\u3092\u4f7f\u3063\u3066\u3001\u30c9\u30e1\u30a4\u30f3\u3084\u30b5\u30fc\u30d0\u30fc\u306e\u8a2d\u5b9a\u65b9\u6cd5\u306b\u3064\u3044\u3066\u3082\u4e01\u5be7\u306b\u89e3\u8aac\u3057\u307e\u3059\u3002\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"section gallery\">\n <div class=\"container\">\n <h2 class=\"section-title\">Design Samples<\/h2>\n <p\n style=\"\n text-align: center;\n margin-bottom: 2rem;\n color: var(--text-light);\n \"\n >\n AI\u3092\u6d3b\u7528\u3057\u3066\u751f\u6210\u3059\u308b\u30c7\u30b6\u30a4\u30f3\u306e\u4e00\u4f8b\u3067\u3059\u3002\u30d9\u30fc\u30b7\u30c3\u30af\u3067\u3042\u308a\u306a\u304c\u3089\u3001\u30d7\u30ed\u306e\u8cea\u611f\u3092\u62c5\u4fdd\u3057\u307e\u3059\u3002\n <\/p>\n <div class=\"gallery-grid\">\n <div class=\"gallery-item\">\n <img decoding=\"async\"\n src=\"images\/sample-a.jpg\"\n alt=\"Sample Design 1\"\n class=\"gallery-img\"\n \/>\n <p class=\"gallery-caption\">\n Sample A\uff1a\u4fe1\u983c\u611f\u306e\u3042\u308b\u30d3\u30b8\u30cd\u30b9\u30b9\u30bf\u30a4\u30eb\n <\/p>\n <\/div>\n <div class=\"gallery-item\">\n <img decoding=\"async\"\n src=\"images\/sample-b.jpg\"\n alt=\"Sample Design 2\"\n class=\"gallery-img\"\n \/>\n <p class=\"gallery-caption\">\n Sample B\uff1a\u843d\u3061\u7740\u304d\u306e\u3042\u308b\u30e2\u30c0\u30f3\u30b9\u30bf\u30a4\u30eb\n <\/p>\n <\/div>\n <div class=\"gallery-item\">\n <img decoding=\"async\"\n src=\"images\/sample-c.jpg\"\n alt=\"Sample Design 3\"\n class=\"gallery-img\"\n \/>\n <p class=\"gallery-caption\">\n Sample C\uff1a\u6e29\u304b\u307f\u306e\u3042\u308b\u30ca\u30c1\u30e5\u30e9\u30eb\u30b9\u30bf\u30a4\u30eb\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"section\">\n <div class=\"container\">\n <h2 class=\"section-title\">Recommend<\/h2>\n <div class=\"target-list\">\n <div class=\"target-item\">\n <img decoding=\"async\"\n src=\"images\/target-business.jpg\"\n alt=\"Business Meeting\"\n class=\"target-img\"\n \/>\n <h3>\u500b\u4eba\u4e8b\u696d\u4e3b\u30fb\u5c0f\u898f\u6a21\u30d3\u30b8\u30cd\u30b9<\/h3>\n <p>\u4e88\u7b97\u306f\u6291\u3048\u305f\u3044\u3051\u308c\u3069\u3001\u5b89\u3063\u307d\u3044\u898b\u305f\u76ee\u306b\u306f\u3057\u305f\u304f\u306a\u3044\u65b9\u3002<\/p>\n <\/div>\n <div class=\"target-item\">\n <img decoding=\"async\"\n src=\"images\/target-beginner.jpg\"\n alt=\"Laptop Working\"\n class=\"target-img\"\n \/>\n <h3>\u521d\u3081\u3066HP\u3092\u4f5c\u308b\u65b9<\/h3>\n <p>\u4f55\u304b\u3089\u59cb\u3081\u308c\u3070\u3044\u3044\u304b\u308f\u304b\u3089\u306a\u3044\u3001\u30b5\u30fc\u30d0\u30fc\u7b49\u306e\u77e5\u8b58\u304c\u306a\u3044\u65b9\u3002<\/p>\n <\/div>\n <div class=\"target-item\">\n <img decoding=\"async\"\n src=\"images\/target-idea.jpg\"\n alt=\"Creative Thinking\"\n class=\"target-img\"\n \/>\n <h3>\u30a4\u30e1\u30fc\u30b8\u3092\u8aac\u660e\u3067\u304d\u306a\u3044\u65b9<\/h3>\n <p>\u300c\u3044\u3044\u611f\u3058\u306b\u3057\u3066\u300d\u3068\u8a00\u8449\u306b\u8a70\u307e\u3063\u3066\u3057\u307e\u3046\u65b9\u3002<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"section\" style=\"background-color: var(--bg-secondary)\">\n <div class=\"container\">\n <h2 class=\"section-title\">Plan & Price<\/h2>\n\n <div class=\"pricing-wrapper\">\n \n <div class=\"pricing-card highlight\">\n <span class=\"pricing-badge\">\u304a\u3059\u3059\u3081<\/span>\n <h3 class=\"pricing-title\">\u30d9\u30fc\u30b7\u30c3\u30af\u30d7\u30e9\u30f3<\/h3>\n <div class=\"price\">\u00a550,000<span>\u301c<\/span><\/div>\n <span class=\"price-sub\">\uff08\u7a0e\u8fbc\uff09<\/span>\n <ul class=\"price-features\">\n <li>\u30c8\u30c3\u30d7\u30da\u30fc\u30b8\u30c7\u30b6\u30a4\u30f3\u5236\u4f5c\uff083\u6848\u63d0\u6848\uff09<\/li>\n <li>\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u5bfe\u5fdc\uff08\u30b9\u30de\u30db\u6700\u9069\u5316\uff09<\/li>\n <li>\u30b5\u30fc\u30d0\u30fc\u30fb\u30c9\u30e1\u30a4\u30f3\u63a5\u7d9a\u30b5\u30dd\u30fc\u30c8<\/li>\n <li>\u30aa\u30f3\u30e9\u30a4\u30f3MT\u3067\u306e\u4fee\u6b63\u30fb\u8abf\u6574<\/li>\n <li>\u57fa\u672c\u7684\u306aSEO\u8a2d\u5b9a<\/li>\n <\/ul>\n <\/div>\n\n \n <div class=\"pricing-card\">\n <h3 class=\"pricing-title\">\u30aa\u30d7\u30b7\u30e7\u30f3\u30fb\u8ffd\u52a0\u6a5f\u80fd<\/h3>\n <div class=\"price\" style=\"font-size: 1.5rem; margin: 1.5rem 0\">\n \u30ab\u30b9\u30bf\u30de\u30a4\u30ba\n <\/div>\n <p\n style=\"\n text-align: center;\n margin-bottom: 2rem;\n font-size: 0.9rem;\n color: var(--text-light);\n \"\n >\n \u5fc5\u8981\u306a\u6a5f\u80fd\u3060\u3051\u3092\u3001\u7121\u99c4\u306a\u304f\u8ffd\u52a0\u3067\u304d\u307e\u3059\u3002\n <\/p>\n <ul class=\"option-list\">\n <li>\n <span class=\"option-name\">WordPress\u5c0e\u5165\uff08CMS\uff09<\/span>\n <span class=\"option-price\">+\u00a520,000\u301c<\/span>\n <\/li>\n <li>\n <span class=\"option-name\">\u304a\u554f\u3044\u5408\u308f\u305b\u30d5\u30a9\u30fc\u30e0\u8a2d\u7f6e<\/span>\n <span class=\"option-price\">+\u00a55,000<\/span>\n <\/li>\n <li>\n <span class=\"option-name\">\u4e0b\u5c64\u30da\u30fc\u30b8\u8ffd\u52a0\uff08\u4f1a\u793e\u6982\u8981\u7b49\uff09<\/span>\n <span class=\"option-price\">+\u00a510,000 \/ 1P<\/span>\n <\/li>\n <li>\n <span class=\"option-name\">Google\u30de\u30c3\u30d7\u30fbSNS\u57cb\u3081\u8fbc\u307f<\/span>\n <span class=\"option-price\">+\u00a53,000\u301c<\/span>\n <\/li>\n <li>\n <span class=\"option-name\">\u5b9f\u7e3e\u30fb\u304a\u77e5\u3089\u305b\u66f4\u65b0\u6a5f\u80fd<\/span>\n <span class=\"option-price\">+\u00a510,000\u301c<\/span>\n <\/li>\n <\/ul>\n <\/div>\n <\/div>\n\n <div style=\"text-align: center; margin-top: 3rem; margin-bottom: 2rem\">\n <a href=\"https:\/\/coconala.com\/\" target=\"_blank\" class=\"btn btn-cta\">\n \u30b3\u30b3\u30ca\u30e9\u3067\u76f8\u8ac7\u3059\u308b\n <svg class=\"btn-icon\" viewBox=\"0 0 24 24\">\n <line x1=\"0\" y1=\"12\" x2=\"24\" y2=\"12\"><\/line>\n <polyline points=\"17 5 24 12 17 19\"><\/polyline>\n <\/svg>\n <\/a>\n <\/div>\n\n <p\n style=\"\n text-align: center;\n font-size: 0.9rem;\n color: var(--text-light);\n \"\n >\n \u203b\u30b5\u30fc\u30d0\u30fc\u30fb\u30c9\u30e1\u30a4\u30f3\u8cbb\u7528\u306f\u5225\u9014\u5b9f\u8cbb\u304c\u5fc5\u8981\u3067\u3059\u3002<br \/>\n \u203b\u4e0a\u8a18\u4ee5\u5916\u306e\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u306b\u3064\u3044\u3066\u3082\u304a\u6c17\u8efd\u306b\u3054\u76f8\u8ac7\u304f\u3060\u3055\u3044\u3002\n <\/p>\n <\/div>\n <\/section>\n\n \n <section class=\"section\">\n <div class=\"container\">\n <h2 class=\"section-title\">FAQ<\/h2>\n <div class=\"faq-list\">\n <div class=\"faq-item\">\n <div class=\"faq-question\">\n AI\u304c\u4f5c\u3063\u305f\u30c7\u30b6\u30a4\u30f3\u306f\u305d\u306e\u307e\u307e\u4f7f\u3048\u307e\u3059\u304b\uff1f\n <\/div>\n <div class=\"faq-answer\">\n AI\u306f\u3042\u304f\u307e\u3067\u300c\u305f\u305f\u304d\u53f0\u300d\u306e\u4f5c\u6210\u306b\u4f7f\u7528\u3057\u307e\u3059\u3002\u6700\u7d42\u7684\u306b\u306f\u30d7\u30ed\u306e\u8996\u70b9\u3067\u3001\u6587\u5b57\u9593\u3084\u4f59\u767d\u3001\u914d\u8272\u306a\u3069\u3092\u624b\u4f5c\u696d\u3067\u5fae\u8abf\u6574\u3057\u3001\u5546\u7528\u5229\u7528\u53ef\u80fd\u306a\u30af\u30aa\u30ea\u30c6\u30a3\u306b\u4ed5\u4e0a\u3052\u3066\u7d0d\u54c1\u3057\u307e\u3059\u306e\u3067\u3054\u5b89\u5fc3\u304f\u3060\u3055\u3044\u3002\n <\/div>\n <\/div>\n <div class=\"faq-item\">\n <div class=\"faq-question\">\u30d1\u30bd\u30b3\u30f3\u304c\u82e6\u624b\u3067\u3082\u5927\u4e08\u592b\u3067\u3059\u304b\uff1f<\/div>\n <div class=\"faq-answer\">\n \u306f\u3044\u3001\u5927\u4e08\u592b\u3067\u3059\u3002\u30aa\u30f3\u30e9\u30a4\u30f3MT\u3067\u306f\u753b\u9762\u3092\u5171\u6709\u3057\u306a\u304c\u3089\u3001\u4e00\u3064\u4e00\u3064\u4e01\u5be7\u306b\u3054\u8aac\u660e\u3057\u307e\u3059\u3002\u30c9\u30e1\u30a4\u30f3\u3084\u30b5\u30fc\u30d0\u30fc\u306e\u5951\u7d04\u3082\u3001\u753b\u9762\u3092\u898b\u306a\u304c\u3089\u30b5\u30dd\u30fc\u30c8\u3044\u305f\u3057\u307e\u3059\u3002\n <\/div>\n <\/div>\n <div class=\"faq-item\">\n <div class=\"faq-question\">\u4fee\u6b63\u306f\u4f55\u56de\u307e\u3067\u53ef\u80fd\u3067\u3059\u304b\uff1f<\/div>\n <div class=\"faq-answer\">\n \u30aa\u30f3\u30e9\u30a4\u30f3MT\uff081\u301c2\u6642\u9593\uff09\u306e\u6642\u9593\u5185\u3067\u3042\u308c\u3070\u3001\u305d\u306e\u5834\u3067\u4f55\u5ea6\u3067\u3082\u4fee\u6b63\u30fb\u8abf\u6574\u304c\u53ef\u80fd\u3067\u3059\u3002\u4e00\u7dd2\u306b\u753b\u9762\u3092\u898b\u306a\u304c\u3089\u4f5c\u308a\u4e0a\u3052\u3066\u3044\u304f\u306e\u3067\u3001\u300c\u601d\u3063\u3066\u3044\u305f\u306e\u3068\u9055\u3046\u300d\u3068\u3044\u3046\u30ba\u30ec\u304c\u8d77\u304d\u306b\u304f\u3044\u306e\u304c\u7279\u5fb4\u3067\u3059\u3002\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"section final-cta\">\n <div class=\"container\">\n <h2>\u3042\u306a\u305f\u306e\u30d3\u30b8\u30cd\u30b9\u306b\u3001<br \/>\u6700\u9069\u306a\u300c\u9854\u300d\u3092\u4f5c\u308a\u307e\u305b\u3093\u304b\uff1f<\/h2>\n <p style=\"margin-bottom: 2rem; opacity: 0.9\">\n \u307e\u305a\u306f\u300c\u76f8\u8ac7\u3059\u308b\u300d\u30dc\u30bf\u30f3\u304b\u3089\u3001\u304a\u6c17\u8efd\u306b\u3054\u9023\u7d61\u304f\u3060\u3055\u3044\u3002\n <\/p>\n <a href=\"https:\/\/coconala.com\/\" target=\"_blank\" class=\"btn btn-cta\">\n \u307e\u305a\u306f\u30b3\u30b3\u30ca\u30e9\u3067\u76f8\u8ac7\u3059\u308b\n <svg class=\"btn-icon\" viewBox=\"0 0 24 24\">\n <line x1=\"0\" y1=\"12\" x2=\"24\" y2=\"12\"><\/line>\n <polyline points=\"17 5 24 12 17 19\"><\/polyline>\n <\/svg>\n <\/a>\n <\/div>\n <\/section>\n\n <footer>\n <div class=\"container\">\n <p>© 2024 Web Production Service. All Rights Reserved.<\/p>\n <\/div>\n <\/footer>\n\n <script>\n document.addEventListener(\"DOMContentLoaded\", function () {\n \/\/ --- 1. Scroll Fade In Animation ---\n const observerOptions = {\n root: null,\n rootMargin: \"0px\",\n threshold: 0.1, \/\/ 10%\u304c\u898b\u3048\u305f\u3089\u767a\u706b\n };\n\n const observer = new IntersectionObserver((entries, observer) => {\n entries.forEach((entry) => {\n if (entry.isIntersecting) {\n entry.target.classList.add(\"is-visible\");\n observer.unobserve(entry.target); \/\/ \u4e00\u5ea6\u8868\u793a\u3057\u305f\u3089\u76e3\u8996\u3092\u7d42\u4e86\n }\n });\n }, observerOptions);\n\n \/\/ \u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u5bfe\u8c61\u306e\u8981\u7d20\u3092\u9078\u629e\n const animatedElements = document.querySelectorAll(\n \".hero-content, .section-title, .concept-text, .concept-flow, .step-item, .gallery-item, .target-item, .pricing-card, .faq-item, .final-cta\"\n );\n\n animatedElements.forEach((el) => {\n el.classList.add(\"fade-in-section\");\n observer.observe(el);\n });\n\n \/\/ --- 2. FAQ Accordion ---\n const faqQuestions = document.querySelectorAll(\".faq-question\");\n\n faqQuestions.forEach((question) => {\n question.addEventListener(\"click\", () => {\n const item = question.parentElement;\n const answer = item.querySelector(\".faq-answer\");\n\n \/\/ Toggle active class\n item.classList.toggle(\"active\");\n\n \/\/ Control max-height for smooth animation\n if (item.classList.contains(\"active\")) {\n answer.style.maxHeight = answer.scrollHeight + 20 + \"px\"; \/\/ padding\u5206\u3092\u8003\u616e\n } else {\n answer.style.maxHeight = null;\n }\n });\n });\n });\n <\/script>\n <\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>AI\u00d7\u5bfe\u8a71\u3067\u4f5c\u308bWeb\u5236\u4f5c\u30b5\u30fc\u30d3\u30b9 | \u500b\u4eba\u4e8b\u696d\u4e3b\u30fb\u5c0f\u898f\u6a21\u30d3\u30b8\u30cd\u30b9\u5411\u3051 \u500b\u4eba\u4e8b\u696d\u4e3b\u30fb\u5c0f\u898f\u6a21\u30d3\u30b8\u30cd\u30b9\u5c02\u9580 \u8a00\u8449\u3067\u4f1d\u3048\u306a\u304f\u3066\u3044\u3044\u3002AI\u304c3\u3064\u306e\u30c7\u30b6\u30a4\u30f3\u3092\u3054\u63d0\u6848\u3002\u300c\u9078\u3076\u300d\u304b\u3089\u59cb\u307e\u308bWeb\u5236\u4f5c\u3002 \u30a4\u30e1\u30fc\u30b8\u3092\u8a00\u8449\u306b\u3059\u308b\u82e6\u52b4\u306f\u3001\u3082\u3046 […]<\/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-20","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/hy-pe.jp\/index.php?rest_route=\/wp\/v2\/pages\/20","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hy-pe.jp\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hy-pe.jp\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hy-pe.jp\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hy-pe.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=20"}],"version-history":[{"count":1,"href":"https:\/\/hy-pe.jp\/index.php?rest_route=\/wp\/v2\/pages\/20\/revisions"}],"predecessor-version":[{"id":21,"href":"https:\/\/hy-pe.jp\/index.php?rest_route=\/wp\/v2\/pages\/20\/revisions\/21"}],"wp:attachment":[{"href":"https:\/\/hy-pe.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=20"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":20,"date":"2025-11-29T09:58:05","date_gmt":"2025-11-29T00:58:05","guid":{"rendered":"https:\/\/hy-pe.jp\/?page_id=20"},"modified":"2025-11-29T09:58:05","modified_gmt":"2025-11-29T00:58:05","slug":"20-2","status":"publish","type":"page","link":"https:\/\/hy-pe.jp\/?page_id=20","title":{"rendered":""},"content":{"rendered":"\n\n\n \n \n \n AI\u00d7\u5bfe\u8a71\u3067\u4f5c\u308bWeb\u5236\u4f5c\u30b5\u30fc\u30d3\u30b9 | \u500b\u4eba\u4e8b\u696d\u4e3b\u30fb\u5c0f\u898f\u6a21\u30d3\u30b8\u30cd\u30b9\u5411\u3051<\/title>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\" \/>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin \/>\n <link\n href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+JP:wght@300;400;500;700&family=Shippori+Mincho:wght@400;600&display=swap\"\n rel=\"stylesheet\"\n \/>\n <style>\n \/* Base Variables *\/\n :root {\n --primary-color: #2b2b2b; \/* Almost Black *\/\n --accent-color: #3b82f6; \/* Modern Blue *\/\n --bg-color: #ffffff;\n --bg-secondary: #f8f9fa;\n --text-color: #333333;\n --text-light: #666666;\n --border-color: #e5e5e5;\n --max-width: 1000px;\n --spacing-unit: 80px;\n }\n\n \/* Reset & Base Styles *\/\n * {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n }\n\n body {\n font-family: \"Noto Sans JP\", sans-serif;\n color: var(--text-color);\n line-height: 1.8;\n background-color: var(--bg-color);\n -webkit-font-smoothing: antialiased;\n }\n\n h1,\n h2,\n h3,\n h4 {\n font-family: \"Shippori Mincho\", serif; \/* Trust & Professionalism *\/\n line-height: 1.4;\n color: var(--primary-color);\n }\n\n a {\n text-decoration: none;\n color: inherit;\n transition: opacity 0.3s ease;\n }\n\n a:hover {\n opacity: 0.8;\n }\n\n img {\n max-width: 100%;\n height: auto;\n display: block;\n }\n\n .container {\n width: 90%;\n max-width: var(--max-width);\n margin: 0 auto;\n }\n\n .section {\n padding: var(--spacing-unit) 0;\n }\n\n .section-title {\n font-size: 2rem;\n text-align: center;\n margin-bottom: 2rem;\n letter-spacing: 0.05em;\n position: relative;\n padding-bottom: 1rem;\n }\n\n .section-title::after {\n content: \"\";\n position: absolute;\n bottom: 0;\n left: 50%;\n transform: translateX(-50%);\n width: 40px;\n height: 1px;\n background-color: var(--accent-color);\n }\n\n \/* Hero Section *\/\n .hero {\n min-height: 90vh;\n display: flex;\n align-items: center;\n justify-content: center;\n background: linear-gradient(\n rgba(255, 255, 255, 0.9),\n rgba(255, 255, 255, 0.8)\n ),\n url(\"images\/hero-bg.jpg\") center\/cover no-repeat;\n text-align: center;\n padding: 0 1rem;\n }\n\n .hero-content {\n max-width: 700px;\n }\n\n .hero-tagline {\n display: inline-block;\n font-size: 0.9rem;\n letter-spacing: 0.1em;\n margin-bottom: 1.5rem;\n color: var(--text-light);\n border: 1px solid var(--border-color);\n padding: 0.5rem 1rem;\n background-color: rgba(255, 255, 255, 0.8);\n }\n\n .hero-title {\n font-size: 2.8rem;\n margin-bottom: 1.5rem;\n font-weight: 600;\n }\n\n .hero-subtitle {\n font-size: 1.1rem;\n color: var(--text-light);\n margin-bottom: 3rem;\n }\n\n \/* Buttons *\/\n .btn {\n display: inline-block;\n background-color: var(--primary-color);\n color: #fff;\n padding: 1rem 3rem;\n font-size: 1rem;\n letter-spacing: 0.05em;\n border-radius: 2px;\n transition: all 0.3s ease;\n }\n\n .btn:hover {\n background-color: var(--accent-color);\n transform: translateY(-2px);\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n }\n\n .btn-outline {\n background-color: transparent;\n color: var(--primary-color);\n border: 1px solid var(--primary-color);\n }\n\n .btn-outline:hover {\n background-color: var(--primary-color);\n color: #fff;\n }\n\n \/* Concept Section *\/\n .concept {\n background-color: var(--bg-secondary);\n text-align: center;\n }\n\n .concept-text {\n font-size: 1.2rem;\n max-width: 600px;\n margin: 0 auto;\n margin-bottom: 3rem;\n line-height: 2;\n }\n\n .concept-highlight {\n font-family: \"Shippori Mincho\", serif;\n font-size: 1.8rem;\n margin-bottom: 2rem;\n display: block;\n color: var(--primary-color);\n }\n\n .concept-flow {\n display: flex;\n justify-content: center;\n gap: 2rem;\n flex-wrap: wrap;\n margin-top: 2rem;\n }\n\n .flow-step {\n background: #fff;\n padding: 1.5rem 2rem;\n border-radius: 8px;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n min-width: 140px;\n transition: transform 0.3s ease, box-shadow 0.3s ease;\n }\n\n .flow-step:hover {\n transform: translateY(-5px);\n box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);\n }\n\n \/* \u77e2\u5370\u306e\u30c7\u30b6\u30a4\u30f3 *\/\n .flow-step:not(:last-child)::after {\n content: \"\";\n position: absolute;\n right: -1.5rem;\n top: 50%;\n transform: translateY(-50%);\n width: 1rem;\n height: 1rem;\n border-top: 2px solid var(--border-color);\n border-right: 2px solid var(--border-color);\n transform: translateY(-50%) rotate(45deg);\n }\n\n .flow-en {\n font-size: 0.75rem;\n color: var(--accent-color);\n letter-spacing: 0.05em;\n margin-bottom: 0.5rem;\n font-weight: 500;\n text-transform: uppercase;\n }\n\n .flow-jp {\n font-family: \"Shippori Mincho\", serif;\n font-size: 1.25rem;\n font-weight: 600;\n color: var(--primary-color);\n }\n\n \/* Service Flow *\/\n .step-list {\n display: flex;\n flex-direction: column;\n gap: 2rem;\n max-width: 800px;\n margin: 0 auto;\n }\n\n .step-item {\n display: flex;\n align-items: flex-start;\n gap: 2rem;\n padding: 2rem;\n border: 1px solid var(--border-color);\n background: #fff;\n transition: transform 0.3s ease;\n }\n\n .step-item:hover {\n border-color: var(--accent-color);\n }\n\n .step-number {\n font-family: \"Shippori Mincho\", serif;\n font-size: 3rem;\n line-height: 1;\n color: var(--accent-color);\n opacity: 0.2;\n flex-shrink: 0;\n }\n\n .step-content h3 {\n font-size: 1.3rem;\n margin-bottom: 1rem;\n }\n\n .step-content p {\n font-size: 0.95rem;\n color: var(--text-light);\n }\n\n \/* Sample Designs *\/\n .gallery {\n background-color: var(--bg-secondary);\n }\n\n .gallery-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 2rem;\n }\n\n .gallery-item {\n background: #fff;\n padding: 1rem;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);\n }\n\n .gallery-img {\n width: 100%;\n height: 250px;\n object-fit: cover;\n background-color: #eee;\n margin-bottom: 1rem;\n }\n\n .gallery-caption {\n font-size: 0.9rem;\n text-align: center;\n color: var(--text-light);\n }\n\n \/* Target Audience *\/\n .target-list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));\n gap: 2rem;\n text-align: center;\n }\n\n .target-item {\n padding: 2rem;\n border: 1px solid var(--border-color);\n background: #fff;\n transition: transform 0.3s ease, box-shadow 0.3s ease;\n }\n\n .target-item:hover {\n transform: translateY(-5px);\n box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);\n border-color: var(--accent-color);\n }\n\n .target-img {\n width: 100px;\n height: 100px;\n object-fit: cover;\n border-radius: 50%;\n margin: 0 auto 1.5rem;\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);\n display: block;\n }\n\n \/* Pricing *\/\n .pricing-wrapper {\n display: flex;\n justify-content: center;\n gap: 2rem;\n flex-wrap: wrap;\n max-width: 900px;\n margin: 0 auto;\n }\n\n .pricing-card {\n background: #fff;\n border: 1px solid var(--border-color);\n padding: 3rem 2rem;\n flex: 1;\n min-width: 300px;\n position: relative;\n transition: transform 0.3s ease, box-shadow 0.3s ease;\n }\n\n .pricing-card:hover {\n transform: translateY(-5px);\n box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);\n border-color: var(--accent-color);\n }\n\n .pricing-card.highlight {\n border: 2px solid var(--accent-color);\n position: relative;\n }\n\n .pricing-badge {\n position: absolute;\n top: -12px;\n left: 50%;\n transform: translateX(-50%);\n background: var(--accent-color);\n color: #fff;\n padding: 0.25rem 1rem;\n font-size: 0.8rem;\n border-radius: 20px;\n font-weight: 500;\n letter-spacing: 0.05em;\n }\n\n .pricing-title {\n text-align: center;\n margin-bottom: 1.5rem;\n font-size: 1.4rem;\n font-weight: 600;\n }\n\n .price {\n font-size: 2.5rem;\n font-family: \"Shippori Mincho\", serif;\n margin: 1rem 0 2rem;\n text-align: center;\n color: var(--primary-color);\n }\n\n .price span {\n font-size: 1rem;\n color: var(--text-light);\n margin-left: 0.2rem;\n }\n\n .price-sub {\n display: block;\n font-size: 0.9rem;\n color: var(--text-light);\n margin-top: -1rem;\n margin-bottom: 2rem;\n text-align: center;\n }\n\n .price-features {\n list-style: none;\n margin-bottom: 2rem;\n text-align: left;\n }\n\n .price-features li {\n margin-bottom: 1rem;\n padding-left: 1.8rem;\n position: relative;\n font-size: 0.95rem;\n }\n\n .price-features li::before {\n content: \"\u2713\";\n position: absolute;\n left: 0;\n color: var(--accent-color);\n font-weight: bold;\n }\n\n \/* Option List Styles *\/\n .option-list {\n list-style: none;\n text-align: left;\n }\n\n .option-list li {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 1rem 0;\n border-bottom: 1px dashed var(--border-color);\n font-size: 0.95rem;\n }\n\n .option-list li:last-child {\n border-bottom: none;\n }\n\n .option-name {\n font-weight: 500;\n }\n\n .option-price {\n color: var(--text-light);\n font-size: 0.9rem;\n }\n\n \/* FAQ *\/\n .faq-list {\n max-width: 700px;\n margin: 0 auto;\n }\n\n .faq-item {\n border-bottom: 1px solid var(--border-color);\n padding: 1.5rem 0;\n }\n\n .faq-question {\n font-weight: 600;\n margin-bottom: 0;\n position: relative;\n padding-left: 1.5rem;\n cursor: pointer;\n }\n\n .faq-question::before {\n content: \"Q.\";\n position: absolute;\n left: 0;\n color: var(--accent-color);\n }\n\n .faq-answer {\n color: var(--text-light);\n padding-left: 1.5rem;\n font-size: 0.95rem;\n }\n\n \/* CTA *\/\n .final-cta {\n background-color: var(--primary-color);\n color: #fff;\n text-align: center;\n }\n\n .final-cta h2 {\n color: #fff;\n margin-bottom: 2rem;\n }\n\n .final-cta .btn {\n background-color: #fff;\n color: var(--primary-color);\n }\n\n .final-cta .btn:hover {\n background-color: var(--accent-color);\n color: #fff;\n }\n\n \/* Footer *\/\n footer {\n text-align: center;\n padding: 2rem;\n font-size: 0.8rem;\n color: var(--text-light);\n border-top: 1px solid var(--border-color);\n }\n\n \/* Responsive *\/\n @media (max-width: 768px) {\n :root {\n --spacing-unit: 50px; \/* \u4f59\u767d\u3082\u5c11\u3057\u8a70\u3081\u308b *\/\n }\n\n body {\n font-size: 0.9rem; \/* \u30d9\u30fc\u30b9\u306e\u6587\u5b57\u30b5\u30a4\u30ba\u3092\u5c11\u3057\u5c0f\u3055\u304f *\/\n }\n\n .hero-title {\n font-size: 1.6rem; \/* 2.8rem -> 1.6rem *\/\n line-height: 1.5;\n }\n\n .hero-subtitle {\n font-size: 0.95rem;\n margin-bottom: 2rem;\n }\n\n .section-title {\n font-size: 1.5rem; \/* 2rem -> 1.5rem *\/\n margin-bottom: 1.5rem;\n }\n\n .concept-highlight {\n font-size: 1.3rem; \/* 1.8rem -> 1.3rem *\/\n }\n\n .concept-text {\n font-size: 0.95rem; \/* 1.2rem -> 0.95rem *\/\n line-height: 1.8;\n text-align: left; \/* \u30b9\u30de\u30db\u3067\u306f\u5de6\u5bc4\u305b\u306e\u65b9\u304c\u8aad\u307f\u3084\u3059\u3044\u5834\u5408\u304c\u591a\u3044\u304c\u3001\u4e2d\u592e\u63c3\u3048\u7dad\u6301\u306a\u3089\u524a\u9664 *\/\n }\n\n .step-item {\n flex-direction: column;\n gap: 0.8rem;\n padding: 1.5rem;\n }\n\n .step-number {\n font-size: 1.8rem;\n margin-bottom: 0;\n }\n\n .step-content h3 {\n font-size: 1.15rem;\n margin-bottom: 0.5rem;\n }\n\n .price {\n font-size: 2rem;\n }\n\n \/* \u30bf\u30fc\u30b2\u30c3\u30c8\u30ea\u30b9\u30c8\u306e\u8abf\u6574 *\/\n .target-list {\n gap: 1rem;\n }\n\n .target-item {\n padding: 1.5rem;\n }\n\n .concept-flow {\n flex-direction: column;\n align-items: center;\n gap: 1.5rem;\n }\n\n .flow-step {\n width: 100%;\n max-width: 280px;\n }\n\n \/* \u30b9\u30de\u30db\u6642\u306f\u77e2\u5370\u3092\u4e0b\u5411\u304d\u306b\u3001\u3042\u308b\u3044\u306f\u975e\u8868\u793a\u306b *\/\n .flow-step:not(:last-child)::after {\n right: 50%;\n top: auto;\n bottom: -1rem;\n transform: translateX(50%) rotate(135deg);\n }\n }\n\n \/* --- Animation & Interactive Additions --- *\/\n\n \/* Scroll Fade In *\/\n .fade-in-section {\n opacity: 0;\n transform: translateY(30px);\n transition: opacity 0.8s ease-out, transform 0.8s ease-out;\n will-change: opacity, transform;\n }\n\n .fade-in-section.is-visible {\n opacity: 1;\n transform: translateY(0);\n }\n\n \/* FAQ Accordion Enhancements *\/\n .faq-question {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding-right: 1rem;\n }\n\n .faq-question::after {\n content: \"+\";\n font-size: 1.5rem;\n color: var(--accent-color);\n transition: transform 0.3s ease;\n margin-left: 1rem;\n font-weight: 300;\n }\n\n .faq-item.active .faq-question::after {\n transform: rotate(45deg);\n }\n\n .faq-answer {\n max-height: 0;\n overflow: hidden;\n transition: max-height 0.3s ease-out, opacity 0.3s ease;\n opacity: 0;\n }\n\n .faq-item.active .faq-answer {\n opacity: 1;\n \/* max-height is handled by JS *\/\n }\n\n \/* Gallery Hover Effects *\/\n .gallery-item {\n overflow: hidden;\n transition: box-shadow 0.3s ease;\n }\n\n .gallery-item:hover {\n box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);\n }\n\n .gallery-img {\n transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n }\n\n .gallery-item:hover .gallery-img {\n transform: scale(1.05);\n }\n\n \/* Button Hover Enhance *\/\n .btn {\n position: relative;\n overflow: hidden;\n z-index: 1;\n }\n\n .btn::after {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(255, 255, 255, 0.1);\n transform: translateX(-100%);\n transition: transform 0.3s ease;\n z-index: -1;\n }\n\n .btn:hover::after {\n transform: translateX(0);\n }\n\n \/* Special CTA Button (Simple & Modern) *\/\n .btn-cta {\n background-color: var(--primary-color);\n color: #fff;\n padding: 1rem 4rem;\n border: 1px solid var(--primary-color);\n border-radius: 0; \/* \u3042\u3048\u3066\u89d2\u3092\u843d\u3068\u3057\u3066\u30b7\u30e3\u30fc\u30d7\u306b *\/\n font-family: \"Shippori Mincho\", serif; \/* \u660e\u671d\u4f53\u3067\u4e0a\u54c1\u3055\u3092\u30d7\u30e9\u30b9 *\/\n font-weight: 500;\n font-size: 1.1rem;\n letter-spacing: 0.15em;\n position: relative;\n overflow: hidden;\n z-index: 1;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 1rem;\n transition: color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);\n box-shadow: none;\n }\n\n \/* \u80cc\u666f\u30b9\u30e9\u30a4\u30c9\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3 *\/\n .btn-cta::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 0%;\n height: 100%;\n background-color: var(--accent-color);\n z-index: -1;\n transition: width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);\n }\n\n .btn-cta:hover {\n color: #fff;\n border-color: var(--accent-color);\n transform: none; \/* \u6d3e\u624b\u306a\u52d5\u304d\u306f\u6392\u9664 *\/\n box-shadow: none;\n }\n\n .btn-cta:hover::before {\n width: 100%;\n }\n\n .btn-cta::after {\n display: none;\n }\n\n \/* \u30dc\u30bf\u30f3\u5185\u306e\u77e2\u5370\u30a2\u30a4\u30b3\u30f3 *\/\n .btn-icon {\n width: 1em;\n height: 1em;\n fill: none;\n stroke: currentColor;\n stroke-width: 1.5; \/* \u7dda\u3092\u7d30\u304f\u3057\u3066\u7e4a\u7d30\u306b *\/\n stroke-linecap: square; \/* \u89d2\u5f35\u3089\u305b\u308b *\/\n stroke-linejoin: miter;\n transition: transform 0.4s ease;\n }\n\n .btn-cta:hover .btn-icon {\n transform: translateX(8px);\n }\n <\/style>\n <\/head>\n <body>\n \n <header class=\"hero\">\n <div class=\"hero-content\">\n <span class=\"hero-tagline\">\u500b\u4eba\u4e8b\u696d\u4e3b\u30fb\u5c0f\u898f\u6a21\u30d3\u30b8\u30cd\u30b9\u5c02\u9580<\/span>\n <h1 class=\"hero-title\">\n \u8a00\u8449\u3067\u4f1d\u3048\u306a\u304f\u3066\u3044\u3044\u3002<br \/>AI\u304c3\u3064\u306e\u30c7\u30b6\u30a4\u30f3\u3092\u3054\u63d0\u6848\u3002<br \/>\u300c\u9078\u3076\u300d\u304b\u3089\u59cb\u307e\u308bWeb\u5236\u4f5c\u3002\n <\/h1>\n <p class=\"hero-subtitle\">\n \u30a4\u30e1\u30fc\u30b8\u3092\u8a00\u8449\u306b\u3059\u308b\u82e6\u52b4\u306f\u3001\u3082\u3046\u5fc5\u8981\u3042\u308a\u307e\u305b\u3093\u3002<br \/>\n AI\u304c\u63cf\u304f3\u3064\u306e\u9078\u629e\u80a2\u304b\u3089\u3001\u3042\u306a\u305f\u306e\u30d3\u30b8\u30cd\u30b9\u306b\u4e00\u756a\u5408\u3046\u300c\u9854\u300d\u3092\u9078\u3093\u3067\u304f\u3060\u3055\u3044\u3002\n <\/p>\n <a href=\"https:\/\/coconala.com\/\" target=\"_blank\" class=\"btn btn-cta\">\n \u30b3\u30b3\u30ca\u30e9\u3067\u76f8\u8ac7\u3059\u308b\n <svg class=\"btn-icon\" viewBox=\"0 0 24 24\">\n <line x1=\"0\" y1=\"12\" x2=\"24\" y2=\"12\"><\/line>\n <polyline points=\"17 5 24 12 17 19\"><\/polyline>\n <\/svg>\n <\/a>\n <\/div>\n <\/header>\n\n \n <section class=\"section concept\">\n <div class=\"container\">\n <h2 class=\"section-title\">Concept<\/h2>\n <span class=\"concept-highlight\">\u8a00\u8449\u3088\u308a\u3001\u307e\u305a\u306f\u30ab\u30bf\u30c1\u3092\u3002<\/span>\n <p class=\"concept-text\">\n \u300c\u3069\u3093\u306a\u30c7\u30b6\u30a4\u30f3\u304c\u3044\u3044\u3067\u3059\u304b\uff1f\u300d\u3068\u805e\u304b\u308c\u3066\u3082\u3001<br \/>\n \u30d7\u30ed\u306e\u3088\u3046\u306a\u8a00\u8449\u3067\u8aac\u660e\u3059\u308b\u306e\u306f\u96e3\u3057\u3044\u3082\u306e\u3067\u3059\u3002<br \/>\n \u3060\u304b\u3089\u3001\u79c1\u305f\u3061\u306f\u307e\u305aAI\u3092\u4f7f\u3063\u3066\u5177\u4f53\u7684\u306a\u300c\u30ab\u30bf\u30c1\u300d\u3092\u304a\u898b\u305b\u3057\u307e\u3059\u3002<br \/>\n \u3042\u306a\u305f\u306f\u305d\u308c\u3092\u898b\u3066\u3001\u9078\u3093\u3067\u3001\u4e00\u7dd2\u306b\u8abf\u6574\u3059\u308b\u3060\u3051\u3002\n <\/p>\n <div class=\"concept-flow\">\n <div class=\"flow-step\">\n <span class=\"flow-en\">Step 01<\/span>\n <span class=\"flow-jp\">\u8a71\u3059<\/span>\n <\/div>\n <div class=\"flow-step\">\n <span class=\"flow-en\">Step 02<\/span>\n <span class=\"flow-jp\">\u898b\u308b<\/span>\n <\/div>\n <div class=\"flow-step\">\n <span class=\"flow-en\">Step 03<\/span>\n <span class=\"flow-jp\">\u9078\u3076<\/span>\n <\/div>\n <div class=\"flow-step\">\n <span class=\"flow-en\">Step 04<\/span>\n <span class=\"flow-jp\">\u4e00\u7dd2\u306b\u4f5c\u308b<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"section\">\n <div class=\"container\">\n <h2 class=\"section-title\">Service Flow<\/h2>\n <div class=\"step-list\">\n <div class=\"step-item\">\n <div class=\"step-number\">01<\/div>\n <div class=\"step-content\">\n <h3>\u3054\u8981\u671b\u30d2\u30a2\u30ea\u30f3\u30b0<\/h3>\n <p>\n \u307e\u305a\u306f\u300c\u3069\u3093\u306a\u4e8b\u696d\u3092\u3055\u308c\u3066\u3044\u308b\u304b\u300d\u300c\u3069\u3093\u306a\u4eba\u306b\u898b\u3066\u307b\u3057\u3044\u304b\u300d\u306a\u3069\u3001\u7c21\u5358\u306a\u8cea\u554f\u306b\u304a\u7b54\u3048\u304f\u3060\u3055\u3044\u3002\u30b3\u30b3\u30ca\u30e9\u306e\u30e1\u30c3\u30bb\u30fc\u30b8\u3001\u307e\u305f\u306f\u30aa\u30f3\u30e9\u30a4\u30f3\u901a\u8a71\u306b\u3066\u627f\u308a\u307e\u3059\u3002\n <\/p>\n <\/div>\n <\/div>\n <div class=\"step-item\">\n <div class=\"step-number\">02<\/div>\n <div class=\"step-content\">\n <h3>AI\u30673\u6848\u751f\u6210 \u2192 1\u6848\u9078\u629e<\/h3>\n <p>\n \u30d2\u30a2\u30ea\u30f3\u30b0\u5185\u5bb9\u3092\u3082\u3068\u306b\u3001AI\u3092\u6d3b\u7528\u3057\u3066\u30c8\u30c3\u30d7\u30da\u30fc\u30b8\u306e\u30c7\u30b6\u30a4\u30f3\u6848\u30923\u30d1\u30bf\u30fc\u30f3\u4f5c\u6210\u3057\u307e\u3059\u3002\u3042\u306a\u305f\u306f\u63d0\u793a\u3055\u308c\u305f\u30c7\u30b6\u30a4\u30f3\u306e\u4e2d\u304b\u3089\u3001\u4e00\u756a\u30a4\u30e1\u30fc\u30b8\u306b\u8fd1\u3044\u3082\u306e\u30921\u3064\u9078\u3076\u3060\u3051\u3067\u3059\u3002\n <\/p>\n <\/div>\n <\/div>\n <div class=\"step-item\">\n <div class=\"step-number\">03<\/div>\n <div class=\"step-content\">\n <h3>\u30aa\u30f3\u30e9\u30a4\u30f3MT\u3067\u4e00\u7dd2\u306b\u5b8c\u6210<\/h3>\n <p>\n \u9078\u3093\u3060\u30c7\u30b6\u30a4\u30f3\u3092\u30d9\u30fc\u30b9\u306b\u3001\u30aa\u30f3\u30e9\u30a4\u30f3\u30df\u30fc\u30c6\u30a3\u30f3\u30b0\uff081\u301c2\u6642\u9593\uff09\u3067\u753b\u9762\u3092\u5171\u6709\u3057\u306a\u304c\u3089\u6700\u7d42\u8abf\u6574\u3092\u884c\u3044\u307e\u3059\u3002\u4fee\u6b63\u5f85\u3061\u306e\u6642\u9593\u3092\u4f7f\u3063\u3066\u3001\u30c9\u30e1\u30a4\u30f3\u3084\u30b5\u30fc\u30d0\u30fc\u306e\u8a2d\u5b9a\u65b9\u6cd5\u306b\u3064\u3044\u3066\u3082\u4e01\u5be7\u306b\u89e3\u8aac\u3057\u307e\u3059\u3002\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"section gallery\">\n <div class=\"container\">\n <h2 class=\"section-title\">Design Samples<\/h2>\n <p\n style=\"\n text-align: center;\n margin-bottom: 2rem;\n color: var(--text-light);\n \"\n >\n AI\u3092\u6d3b\u7528\u3057\u3066\u751f\u6210\u3059\u308b\u30c7\u30b6\u30a4\u30f3\u306e\u4e00\u4f8b\u3067\u3059\u3002\u30d9\u30fc\u30b7\u30c3\u30af\u3067\u3042\u308a\u306a\u304c\u3089\u3001\u30d7\u30ed\u306e\u8cea\u611f\u3092\u62c5\u4fdd\u3057\u307e\u3059\u3002\n <\/p>\n <div class=\"gallery-grid\">\n <div class=\"gallery-item\">\n <img decoding=\"async\"\n src=\"images\/sample-a.jpg\"\n alt=\"Sample Design 1\"\n class=\"gallery-img\"\n \/>\n <p class=\"gallery-caption\">\n Sample A\uff1a\u4fe1\u983c\u611f\u306e\u3042\u308b\u30d3\u30b8\u30cd\u30b9\u30b9\u30bf\u30a4\u30eb\n <\/p>\n <\/div>\n <div class=\"gallery-item\">\n <img decoding=\"async\"\n src=\"images\/sample-b.jpg\"\n alt=\"Sample Design 2\"\n class=\"gallery-img\"\n \/>\n <p class=\"gallery-caption\">\n Sample B\uff1a\u843d\u3061\u7740\u304d\u306e\u3042\u308b\u30e2\u30c0\u30f3\u30b9\u30bf\u30a4\u30eb\n <\/p>\n <\/div>\n <div class=\"gallery-item\">\n <img decoding=\"async\"\n src=\"images\/sample-c.jpg\"\n alt=\"Sample Design 3\"\n class=\"gallery-img\"\n \/>\n <p class=\"gallery-caption\">\n Sample C\uff1a\u6e29\u304b\u307f\u306e\u3042\u308b\u30ca\u30c1\u30e5\u30e9\u30eb\u30b9\u30bf\u30a4\u30eb\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"section\">\n <div class=\"container\">\n <h2 class=\"section-title\">Recommend<\/h2>\n <div class=\"target-list\">\n <div class=\"target-item\">\n <img decoding=\"async\"\n src=\"images\/target-business.jpg\"\n alt=\"Business Meeting\"\n class=\"target-img\"\n \/>\n <h3>\u500b\u4eba\u4e8b\u696d\u4e3b\u30fb\u5c0f\u898f\u6a21\u30d3\u30b8\u30cd\u30b9<\/h3>\n <p>\u4e88\u7b97\u306f\u6291\u3048\u305f\u3044\u3051\u308c\u3069\u3001\u5b89\u3063\u307d\u3044\u898b\u305f\u76ee\u306b\u306f\u3057\u305f\u304f\u306a\u3044\u65b9\u3002<\/p>\n <\/div>\n <div class=\"target-item\">\n <img decoding=\"async\"\n src=\"images\/target-beginner.jpg\"\n alt=\"Laptop Working\"\n class=\"target-img\"\n \/>\n <h3>\u521d\u3081\u3066HP\u3092\u4f5c\u308b\u65b9<\/h3>\n <p>\u4f55\u304b\u3089\u59cb\u3081\u308c\u3070\u3044\u3044\u304b\u308f\u304b\u3089\u306a\u3044\u3001\u30b5\u30fc\u30d0\u30fc\u7b49\u306e\u77e5\u8b58\u304c\u306a\u3044\u65b9\u3002<\/p>\n <\/div>\n <div class=\"target-item\">\n <img decoding=\"async\"\n src=\"images\/target-idea.jpg\"\n alt=\"Creative Thinking\"\n class=\"target-img\"\n \/>\n <h3>\u30a4\u30e1\u30fc\u30b8\u3092\u8aac\u660e\u3067\u304d\u306a\u3044\u65b9<\/h3>\n <p>\u300c\u3044\u3044\u611f\u3058\u306b\u3057\u3066\u300d\u3068\u8a00\u8449\u306b\u8a70\u307e\u3063\u3066\u3057\u307e\u3046\u65b9\u3002<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"section\" style=\"background-color: var(--bg-secondary)\">\n <div class=\"container\">\n <h2 class=\"section-title\">Plan & Price<\/h2>\n\n <div class=\"pricing-wrapper\">\n \n <div class=\"pricing-card highlight\">\n <span class=\"pricing-badge\">\u304a\u3059\u3059\u3081<\/span>\n <h3 class=\"pricing-title\">\u30d9\u30fc\u30b7\u30c3\u30af\u30d7\u30e9\u30f3<\/h3>\n <div class=\"price\">\u00a550,000<span>\u301c<\/span><\/div>\n <span class=\"price-sub\">\uff08\u7a0e\u8fbc\uff09<\/span>\n <ul class=\"price-features\">\n <li>\u30c8\u30c3\u30d7\u30da\u30fc\u30b8\u30c7\u30b6\u30a4\u30f3\u5236\u4f5c\uff083\u6848\u63d0\u6848\uff09<\/li>\n <li>\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u5bfe\u5fdc\uff08\u30b9\u30de\u30db\u6700\u9069\u5316\uff09<\/li>\n <li>\u30b5\u30fc\u30d0\u30fc\u30fb\u30c9\u30e1\u30a4\u30f3\u63a5\u7d9a\u30b5\u30dd\u30fc\u30c8<\/li>\n <li>\u30aa\u30f3\u30e9\u30a4\u30f3MT\u3067\u306e\u4fee\u6b63\u30fb\u8abf\u6574<\/li>\n <li>\u57fa\u672c\u7684\u306aSEO\u8a2d\u5b9a<\/li>\n <\/ul>\n <\/div>\n\n \n <div class=\"pricing-card\">\n <h3 class=\"pricing-title\">\u30aa\u30d7\u30b7\u30e7\u30f3\u30fb\u8ffd\u52a0\u6a5f\u80fd<\/h3>\n <div class=\"price\" style=\"font-size: 1.5rem; margin: 1.5rem 0\">\n \u30ab\u30b9\u30bf\u30de\u30a4\u30ba\n <\/div>\n <p\n style=\"\n text-align: center;\n margin-bottom: 2rem;\n font-size: 0.9rem;\n color: var(--text-light);\n \"\n >\n \u5fc5\u8981\u306a\u6a5f\u80fd\u3060\u3051\u3092\u3001\u7121\u99c4\u306a\u304f\u8ffd\u52a0\u3067\u304d\u307e\u3059\u3002\n <\/p>\n <ul class=\"option-list\">\n <li>\n <span class=\"option-name\">WordPress\u5c0e\u5165\uff08CMS\uff09<\/span>\n <span class=\"option-price\">+\u00a520,000\u301c<\/span>\n <\/li>\n <li>\n <span class=\"option-name\">\u304a\u554f\u3044\u5408\u308f\u305b\u30d5\u30a9\u30fc\u30e0\u8a2d\u7f6e<\/span>\n <span class=\"option-price\">+\u00a55,000<\/span>\n <\/li>\n <li>\n <span class=\"option-name\">\u4e0b\u5c64\u30da\u30fc\u30b8\u8ffd\u52a0\uff08\u4f1a\u793e\u6982\u8981\u7b49\uff09<\/span>\n <span class=\"option-price\">+\u00a510,000 \/ 1P<\/span>\n <\/li>\n <li>\n <span class=\"option-name\">Google\u30de\u30c3\u30d7\u30fbSNS\u57cb\u3081\u8fbc\u307f<\/span>\n <span class=\"option-price\">+\u00a53,000\u301c<\/span>\n <\/li>\n <li>\n <span class=\"option-name\">\u5b9f\u7e3e\u30fb\u304a\u77e5\u3089\u305b\u66f4\u65b0\u6a5f\u80fd<\/span>\n <span class=\"option-price\">+\u00a510,000\u301c<\/span>\n <\/li>\n <\/ul>\n <\/div>\n <\/div>\n\n <div style=\"text-align: center; margin-top: 3rem; margin-bottom: 2rem\">\n <a href=\"https:\/\/coconala.com\/\" target=\"_blank\" class=\"btn btn-cta\">\n \u30b3\u30b3\u30ca\u30e9\u3067\u76f8\u8ac7\u3059\u308b\n <svg class=\"btn-icon\" viewBox=\"0 0 24 24\">\n <line x1=\"0\" y1=\"12\" x2=\"24\" y2=\"12\"><\/line>\n <polyline points=\"17 5 24 12 17 19\"><\/polyline>\n <\/svg>\n <\/a>\n <\/div>\n\n <p\n style=\"\n text-align: center;\n font-size: 0.9rem;\n color: var(--text-light);\n \"\n >\n \u203b\u30b5\u30fc\u30d0\u30fc\u30fb\u30c9\u30e1\u30a4\u30f3\u8cbb\u7528\u306f\u5225\u9014\u5b9f\u8cbb\u304c\u5fc5\u8981\u3067\u3059\u3002<br \/>\n \u203b\u4e0a\u8a18\u4ee5\u5916\u306e\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u306b\u3064\u3044\u3066\u3082\u304a\u6c17\u8efd\u306b\u3054\u76f8\u8ac7\u304f\u3060\u3055\u3044\u3002\n <\/p>\n <\/div>\n <\/section>\n\n \n <section class=\"section\">\n <div class=\"container\">\n <h2 class=\"section-title\">FAQ<\/h2>\n <div class=\"faq-list\">\n <div class=\"faq-item\">\n <div class=\"faq-question\">\n AI\u304c\u4f5c\u3063\u305f\u30c7\u30b6\u30a4\u30f3\u306f\u305d\u306e\u307e\u307e\u4f7f\u3048\u307e\u3059\u304b\uff1f\n <\/div>\n <div class=\"faq-answer\">\n AI\u306f\u3042\u304f\u307e\u3067\u300c\u305f\u305f\u304d\u53f0\u300d\u306e\u4f5c\u6210\u306b\u4f7f\u7528\u3057\u307e\u3059\u3002\u6700\u7d42\u7684\u306b\u306f\u30d7\u30ed\u306e\u8996\u70b9\u3067\u3001\u6587\u5b57\u9593\u3084\u4f59\u767d\u3001\u914d\u8272\u306a\u3069\u3092\u624b\u4f5c\u696d\u3067\u5fae\u8abf\u6574\u3057\u3001\u5546\u7528\u5229\u7528\u53ef\u80fd\u306a\u30af\u30aa\u30ea\u30c6\u30a3\u306b\u4ed5\u4e0a\u3052\u3066\u7d0d\u54c1\u3057\u307e\u3059\u306e\u3067\u3054\u5b89\u5fc3\u304f\u3060\u3055\u3044\u3002\n <\/div>\n <\/div>\n <div class=\"faq-item\">\n <div class=\"faq-question\">\u30d1\u30bd\u30b3\u30f3\u304c\u82e6\u624b\u3067\u3082\u5927\u4e08\u592b\u3067\u3059\u304b\uff1f<\/div>\n <div class=\"faq-answer\">\n \u306f\u3044\u3001\u5927\u4e08\u592b\u3067\u3059\u3002\u30aa\u30f3\u30e9\u30a4\u30f3MT\u3067\u306f\u753b\u9762\u3092\u5171\u6709\u3057\u306a\u304c\u3089\u3001\u4e00\u3064\u4e00\u3064\u4e01\u5be7\u306b\u3054\u8aac\u660e\u3057\u307e\u3059\u3002\u30c9\u30e1\u30a4\u30f3\u3084\u30b5\u30fc\u30d0\u30fc\u306e\u5951\u7d04\u3082\u3001\u753b\u9762\u3092\u898b\u306a\u304c\u3089\u30b5\u30dd\u30fc\u30c8\u3044\u305f\u3057\u307e\u3059\u3002\n <\/div>\n <\/div>\n <div class=\"faq-item\">\n <div class=\"faq-question\">\u4fee\u6b63\u306f\u4f55\u56de\u307e\u3067\u53ef\u80fd\u3067\u3059\u304b\uff1f<\/div>\n <div class=\"faq-answer\">\n \u30aa\u30f3\u30e9\u30a4\u30f3MT\uff081\u301c2\u6642\u9593\uff09\u306e\u6642\u9593\u5185\u3067\u3042\u308c\u3070\u3001\u305d\u306e\u5834\u3067\u4f55\u5ea6\u3067\u3082\u4fee\u6b63\u30fb\u8abf\u6574\u304c\u53ef\u80fd\u3067\u3059\u3002\u4e00\u7dd2\u306b\u753b\u9762\u3092\u898b\u306a\u304c\u3089\u4f5c\u308a\u4e0a\u3052\u3066\u3044\u304f\u306e\u3067\u3001\u300c\u601d\u3063\u3066\u3044\u305f\u306e\u3068\u9055\u3046\u300d\u3068\u3044\u3046\u30ba\u30ec\u304c\u8d77\u304d\u306b\u304f\u3044\u306e\u304c\u7279\u5fb4\u3067\u3059\u3002\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"section final-cta\">\n <div class=\"container\">\n <h2>\u3042\u306a\u305f\u306e\u30d3\u30b8\u30cd\u30b9\u306b\u3001<br \/>\u6700\u9069\u306a\u300c\u9854\u300d\u3092\u4f5c\u308a\u307e\u305b\u3093\u304b\uff1f<\/h2>\n <p style=\"margin-bottom: 2rem; opacity: 0.9\">\n \u307e\u305a\u306f\u300c\u76f8\u8ac7\u3059\u308b\u300d\u30dc\u30bf\u30f3\u304b\u3089\u3001\u304a\u6c17\u8efd\u306b\u3054\u9023\u7d61\u304f\u3060\u3055\u3044\u3002\n <\/p>\n <a href=\"https:\/\/coconala.com\/\" target=\"_blank\" class=\"btn btn-cta\">\n \u307e\u305a\u306f\u30b3\u30b3\u30ca\u30e9\u3067\u76f8\u8ac7\u3059\u308b\n <svg class=\"btn-icon\" viewBox=\"0 0 24 24\">\n <line x1=\"0\" y1=\"12\" x2=\"24\" y2=\"12\"><\/line>\n <polyline points=\"17 5 24 12 17 19\"><\/polyline>\n <\/svg>\n <\/a>\n <\/div>\n <\/section>\n\n <footer>\n <div class=\"container\">\n <p>© 2024 Web Production Service. All Rights Reserved.<\/p>\n <\/div>\n <\/footer>\n\n <script>\n document.addEventListener(\"DOMContentLoaded\", function () {\n \/\/ --- 1. Scroll Fade In Animation ---\n const observerOptions = {\n root: null,\n rootMargin: \"0px\",\n threshold: 0.1, \/\/ 10%\u304c\u898b\u3048\u305f\u3089\u767a\u706b\n };\n\n const observer = new IntersectionObserver((entries, observer) => {\n entries.forEach((entry) => {\n if (entry.isIntersecting) {\n entry.target.classList.add(\"is-visible\");\n observer.unobserve(entry.target); \/\/ \u4e00\u5ea6\u8868\u793a\u3057\u305f\u3089\u76e3\u8996\u3092\u7d42\u4e86\n }\n });\n }, observerOptions);\n\n \/\/ \u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u5bfe\u8c61\u306e\u8981\u7d20\u3092\u9078\u629e\n const animatedElements = document.querySelectorAll(\n \".hero-content, .section-title, .concept-text, .concept-flow, .step-item, .gallery-item, .target-item, .pricing-card, .faq-item, .final-cta\"\n );\n\n animatedElements.forEach((el) => {\n el.classList.add(\"fade-in-section\");\n observer.observe(el);\n });\n\n \/\/ --- 2. FAQ Accordion ---\n const faqQuestions = document.querySelectorAll(\".faq-question\");\n\n faqQuestions.forEach((question) => {\n question.addEventListener(\"click\", () => {\n const item = question.parentElement;\n const answer = item.querySelector(\".faq-answer\");\n\n \/\/ Toggle active class\n item.classList.toggle(\"active\");\n\n \/\/ Control max-height for smooth animation\n if (item.classList.contains(\"active\")) {\n answer.style.maxHeight = answer.scrollHeight + 20 + \"px\"; \/\/ padding\u5206\u3092\u8003\u616e\n } else {\n answer.style.maxHeight = null;\n }\n });\n });\n });\n <\/script>\n <\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>AI\u00d7\u5bfe\u8a71\u3067\u4f5c\u308bWeb\u5236\u4f5c\u30b5\u30fc\u30d3\u30b9 | \u500b\u4eba\u4e8b\u696d\u4e3b\u30fb\u5c0f\u898f\u6a21\u30d3\u30b8\u30cd\u30b9\u5411\u3051 \u500b\u4eba\u4e8b\u696d\u4e3b\u30fb\u5c0f\u898f\u6a21\u30d3\u30b8\u30cd\u30b9\u5c02\u9580 \u8a00\u8449\u3067\u4f1d\u3048\u306a\u304f\u3066\u3044\u3044\u3002AI\u304c3\u3064\u306e\u30c7\u30b6\u30a4\u30f3\u3092\u3054\u63d0\u6848\u3002\u300c\u9078\u3076\u300d\u304b\u3089\u59cb\u307e\u308bWeb\u5236\u4f5c\u3002 \u30a4\u30e1\u30fc\u30b8\u3092\u8a00\u8449\u306b\u3059\u308b\u82e6\u52b4\u306f\u3001\u3082\u3046 […]<\/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-20","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/hy-pe.jp\/index.php?rest_route=\/wp\/v2\/pages\/20","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hy-pe.jp\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hy-pe.jp\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hy-pe.jp\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hy-pe.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=20"}],"version-history":[{"count":1,"href":"https:\/\/hy-pe.jp\/index.php?rest_route=\/wp\/v2\/pages\/20\/revisions"}],"predecessor-version":[{"id":21,"href":"https:\/\/hy-pe.jp\/index.php?rest_route=\/wp\/v2\/pages\/20\/revisions\/21"}],"wp:attachment":[{"href":"https:\/\/hy-pe.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=20"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}