{"id":8,"date":"2025-10-17T20:51:45","date_gmt":"2025-10-17T11:51:45","guid":{"rendered":"http:\/\/saeba-c.co.jp\/?page_id=8"},"modified":"2026-06-19T23:19:43","modified_gmt":"2026-06-19T14:19:43","slug":"home","status":"publish","type":"page","link":"https:\/\/saeba-c.co.jp\/","title":{"rendered":""},"content":{"rendered":"\n<style>\n    @import url('https:\/\/fonts.googleapis.com\/css2?family=Jost:wght@600&display=swap');\n\n    .saeba-full-width-wrapper {\n        width: 100vw;\n        position: relative;\n        left: 50%;\n        right: 50%;\n        margin-left: -50vw;\n        margin-right: -50vw;\n        overflow: hidden;\n    }\n    .saeba-hero {\n        position: relative;\n        width: 100%;\n        height: 80vh;\n        min-height: 500px;\n        background-color: #231815;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n    }\n    .saeba-bg {\n        position: absolute;\n        inset: 0;\n        display: flex;\n        z-index: 1;\n    }\n    .bg-left { flex: 1; background-color: #e1002e; }\n    .bg-right { flex: 1; background-color: #231815; }\n    \n    .saeba-text {\n        position: relative;\n        z-index: 10;\n        font-family: 'Jost', sans-serif;\n        font-weight: 600;\n        font-size: clamp(1.5rem, 6vw, 5rem);\n        color: #ffffff;\n        margin: 0;\n        pointer-events: none;\n    }\n    #saeba-canvas {\n        position: absolute;\n        inset: 0;\n        z-index: 5;\n        touch-action: auto; \n    }\n<\/style>\n\n<div class=\"saeba-full-width-wrapper\">\n    <div class=\"saeba-hero\" id=\"saeba-container\">\n        <div class=\"saeba-bg\">\n            <div class=\"bg-left\"><\/div>\n            <div class=\"bg-right\"><\/div>\n        <\/div>\n        <h1 class=\"saeba-text\">SAEBA COORDINATION<\/h1>\n        <canvas id=\"saeba-canvas\"><\/canvas>\n    <\/div>\n<\/div>\n\n<script>\n(function() {\n    const container = document.getElementById('saeba-container');\n    const canvas = document.getElementById('saeba-canvas');\n    if(!container || !canvas) return;\n    const ctx = canvas.getContext('2d');\n\n    let particles = [];\n    let isMobile = window.innerWidth < 768;\n    const mouse = { x: null, y: null, radius: isMobile ? 80 : 180 };\n\n    class VirusParticle {\n        constructor() {\n            this.x = Math.random() * canvas.width;\n            this.y = Math.random() * canvas.height;\n            this.baseX = this.x; this.baseY = this.y;\n            this.size = Math.random() * 3 + 1.5;\n            this.density = (Math.random() * 40) + 10;\n            this.color = `rgba(255, 255, 255, 0.3)`;\n            this.angle = Math.random() * 360;\n            this.velocity = Math.random() * 0.05 + 0.01;\n        }\n        update() {\n            this.baseX += Math.sin(this.angle) * 0.15;\n            this.baseY += Math.cos(this.angle) * 0.15;\n            this.angle += this.velocity;\n            let dx = mouse.x - this.x;\n            let dy = mouse.y - this.y;\n            let dist = Math.sqrt(dx*dx + dy*dy);\n            if (dist < mouse.radius) {\n                this.x -= (dx\/dist) * (mouse.radius - dist)\/mouse.radius * this.density;\n                this.y -= (dy\/dist) * (mouse.radius - dist)\/mouse.radius * this.density;\n            } else {\n                this.x += (this.baseX - this.x) * 0.05;\n                this.y += (this.baseY - this.y) * 0.05;\n            }\n        }\n    }\n\n    function init() {\n        canvas.width = container.offsetWidth;\n        canvas.height = container.offsetHeight;\n        isMobile = window.innerWidth < 768;\n        particles = [];\n        const count = (canvas.width * canvas.height) \/ 8000;\n        for (let i = 0; i < count; i++) particles.push(new VirusParticle());\n    }\n\n    function animate() {\n        ctx.clearRect(0, 0, canvas.width, canvas.height);\n        particles.forEach(p => { \n            p.update(); \n            ctx.fillStyle = p.color; \n            ctx.beginPath(); \n            ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2); \n            ctx.fill(); \n        });\n        requestAnimationFrame(animate);\n    }\n\n    container.addEventListener('mousemove', e => { const rect = canvas.getBoundingClientRect(); mouse.x = e.clientX - rect.left; mouse.y = e.clientY - rect.top; });\n    container.addEventListener('mouseleave', () => { mouse.x = null; mouse.y = null; });\n    container.addEventListener('touchmove', e => {\n        const rect = canvas.getBoundingClientRect();\n        const touch = e.touches[0];\n        mouse.x = touch.clientX - rect.left;\n        mouse.y = touch.clientY - rect.top;\n    }, { passive: true });\n    \n    window.addEventListener('resize', init);\n    init();\n    animate();\n})();\n<\/script>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"saeba-minimal-frame\">\n    <div class=\"saeba-split-box-v\">\n        <div class=\"saeba-rotating-text\">\n            <span>A<\/span><span>B<\/span><span>O<\/span><span>U<\/span><span>T<\/span>\n        <\/div>\n    <\/div>\n<\/div>\n\n<style>\n    .saeba-minimal-frame {\n        display: flex;\n        justify-content: center;\n        margin: 2rem 0;\n    }\n\n    .saeba-split-box-v {\n        position: relative;\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        padding: 10px 30px;\n        background: linear-gradient(180deg, #e1002e 50%, #231815 50%);\n        min-width: 140px;\n        cursor: pointer;\n        transition: transform 0.3s ease;\n    }\n\n    .saeba-split-box-v:hover {\n        transform: translateY(-2px);\n    }\n\n    .saeba-rotating-text {\n        \/* \u30d5\u30a9\u30f3\u30c8\u6307\u5b9a\u3092\u524a\u9664\uff1a\u89aa\u8981\u7d20\u306e\u8a2d\u5b9a\u3092\u7d99\u627f\u3057\u307e\u3059 *\/\n        font-size: 1.45rem;\n        font-weight: 700;\n        color: #ffffff;\n        letter-spacing: 0.15em;\n        display: flex;\n        perspective: 800px;\n        pointer-events: none;\n    }\n\n    \/* \u521d\u56de\u306e\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3 *\/\n    .saeba-rotating-text span {\n        display: inline-block;\n        opacity: 0;\n        transform: rotateX(-720deg);\n        animation: doubleRotateIn 0.8s cubic-bezier(0.23, 1, 0.32, 1) forwards;\n    }\n\n    \/* \u30db\u30d0\u30fc\uff1a\u4e0d\u900f\u660e\u5ea6\u3092\u7dad\u6301\u3057\u3066\u518d\u56de\u8ee2 *\/\n    .saeba-split-box-v:hover .saeba-rotating-text span,\n    .saeba-split-box-v:active .saeba-rotating-text span {\n        opacity: 1;\n        animation: doubleRotateAction 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards;\n    }\n\n    @keyframes doubleRotateIn {\n        100% { opacity: 1; transform: rotateX(0deg); }\n    }\n\n    @keyframes doubleRotateAction {\n        0% { transform: rotateX(0deg); }\n        100% { transform: rotateX(720deg); }\n    }\n\n    \/* \u9045\u5ef6\u8a2d\u5b9a *\/\n    .saeba-rotating-text span:nth-child(1) { animation-delay: 0.05s !important; }\n    .saeba-rotating-text span:nth-child(2) { animation-delay: 0.10s !important; }\n    .saeba-rotating-text span:nth-child(3) { animation-delay: 0.15s !important; }\n    .saeba-rotating-text span:nth-child(4) { animation-delay: 0.20s !important; }\n    .saeba-rotating-text span:nth-child(5) { animation-delay: 0.25s !important; }\n\n    @media (max-width: 480px) {\n        .saeba-rotating-text { font-size: 1.2rem; }\n        .saeba-split-box-v { padding: 8px 20px; min-width: 110px; }\n    }\n<\/style>\n\n\n\n<div class=\"saeba-copy-container\">\n    <div class=\"saeba-copy-box\">\n        <h1 class=\"saeba-copy-text\">\n            <span>\u73fe<\/span><span>\u5834<\/span><span>\u3092<\/span><span>\u3001<\/span><span class=\"highlight\">\u6e05<\/span><span class=\"highlight\">\u6f54<\/span><span>\u3068<\/span><span class=\"highlight\">\u5b89<\/span><span class=\"highlight\">\u5fc3<\/span><span>\u3067<\/span><span class=\"highlight\">\u30a2<\/span><span class=\"highlight\">\u30c3<\/span><span class=\"highlight\">\u30d7<\/span><span class=\"highlight\">\u30c7<\/span><span class=\"highlight\">\u30fc<\/span><span class=\"highlight\">\u30c8<\/span><span>\u3059<\/span><span>\u308b<\/span><span>\u3002<\/span>\n        <\/h1>\n    <\/div>\n<\/div>\n\n<style>\n    .saeba-copy-container {\n        display: flex;\n        justify-content: center;\n        \/* \u4e0b\u90e8\u306e\u30de\u30fc\u30b8\u30f3\u30920\u306b\u8a2d\u5b9a *\/\n        margin-top: 4rem;\n        margin-bottom: 0;\n        padding: 0 20px 0 20px; \/* \u4e0b\u90e8\u30d1\u30c7\u30a3\u30f3\u30b0\u30820 *\/\n    }\n\n    .saeba-copy-box {\n        cursor: pointer;\n        \/* \u30dc\u30c3\u30af\u30b9\u5185\u306e\u4e0b\u90e8\u4f59\u767d\u30820\u306b *\/\n        padding: 15px 15px 0 15px;\n        transition: transform 0.3s ease;\n    }\n\n    .saeba-copy-box:hover {\n        transform: translateY(-2px);\n    }\n\n    .saeba-copy-text {\n        font-family: 'Noto Sans JP', sans-serif;\n        font-size: clamp(1.2rem, 4vw, 2.2rem);\n        font-weight: 900;\n        color: #231815;\n        letter-spacing: 0.1em;\n        line-height: 1.5;\n        text-align: center;\n        perspective: 1000px;\n        margin: 0;\n        pointer-events: none;\n    }\n\n    .saeba-copy-text span.highlight {\n        color: #e1002e;\n    }\n\n    \/* \u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u8a2d\u5b9a *\/\n    .saeba-copy-text span {\n        display: inline-block;\n        opacity: 0;\n        transform: rotateX(-720deg);\n        animation: copyRotateIn 0.8s cubic-bezier(0.23, 1, 0.32, 1) forwards;\n    }\n\n    .saeba-copy-box:hover .saeba-copy-text span,\n    .saeba-copy-box:active .saeba-copy-text span {\n        opacity: 1;\n        animation: copyDoubleRotateAction 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards;\n    }\n\n    @keyframes copyRotateIn {\n        to { opacity: 1; transform: rotateX(0deg); }\n    }\n\n    @keyframes copyDoubleRotateAction {\n        0% { transform: rotateX(0deg); }\n        100% { transform: rotateX(720deg); }\n    }\n\n    \/* \u9045\u5ef6\u8a2d\u5b9a\uff08!important\u4ed8\u4e0e\u3067\u9806\u5e8f\u3092\u6b7b\u5b88\uff09 *\/\n    .saeba-copy-text span:nth-child(1) { animation-delay: 0.04s !important; }\n    .saeba-copy-text span:nth-child(2) { animation-delay: 0.08s !important; }\n    .saeba-copy-text span:nth-child(3) { animation-delay: 0.12s !important; }\n    .saeba-copy-text span:nth-child(4) { animation-delay: 0.16s !important; }\n    .saeba-copy-text span:nth-child(5) { animation-delay: 0.20s !important; }\n    .saeba-copy-text span:nth-child(6) { animation-delay: 0.24s !important; }\n    .saeba-copy-text span:nth-child(7) { animation-delay: 0.28s !important; }\n    .saeba-copy-text span:nth-child(8) { animation-delay: 0.32s !important; }\n    .saeba-copy-text span:nth-child(9) { animation-delay: 0.36s !important; }\n    .saeba-copy-text span:nth-child(10) { animation-delay: 0.40s !important; }\n    .saeba-copy-text span:nth-child(11) { animation-delay: 0.44s !important; }\n    .saeba-copy-text span:nth-child(12) { animation-delay: 0.48s !important; }\n    .saeba-copy-text span:nth-child(13) { animation-delay: 0.52s !important; }\n    .saeba-copy-text span:nth-child(14) { animation-delay: 0.56s !important; }\n    .saeba-copy-text span:nth-child(15) { animation-delay: 0.60s !important; }\n    .saeba-copy-text span:nth-child(16) { animation-delay: 0.64s !important; }\n    .saeba-copy-text span:nth-child(17) { animation-delay: 0.68s !important; }\n    .saeba-copy-text span:nth-child(18) { animation-delay: 0.72s !important; }\n    .saeba-copy-text span:nth-child(19) { animation-delay: 0.76s !important; }\n    .saeba-copy-text span:nth-child(20) { animation-delay: 0.80s !important; }\n    .saeba-copy-text span:nth-child(21) { animation-delay: 0.84s !important; }\n    .saeba-copy-text span:nth-child(22) { animation-delay: 0.88s !important; }\n    .saeba-copy-text span:nth-child(23) { animation-delay: 0.92s !important; }\n\n    @media (max-width: 600px) {\n        .saeba-copy-text {\n            font-size: 1.3rem;\n            line-height: 1.6;\n        }\n    }\n<\/style>\n\n\n\n<div class=\"saeba-desc-container\">\n    <div class=\"saeba-desc-box\">\n        <p class=\"saeba-desc-text\">\n            <span class=\"line-break\">SAEBA COORDINATION\u306f\u3001<\/span>\n            <span class=\"line-break\">\u885b\u751f\u9818\u57df\u306b\u304a\u3051\u308b\u691c\u67fb\u304b\u3089<\/span>\n            <span class=\"line-break\">\u6e05\u6383\u3001\u6a5f\u5668\u306e\u4fdd\u5b88\u3001\u5e97\u8217\u8a2d\u8a08\u3001\u55b6\u696d\u652f\u63f4\u307e\u3067\u3001<\/span>\n            <span class=\"line-break\">\u7dcf\u5408\u7684\u306b\u30b5\u30dd\u30fc\u30c8\u3057\u307e\u3059\u3002<\/span>\n        <\/p>\n    <\/div>\n<\/div>\n\n<style>\n    .saeba-desc-container {\n        display: flex;\n        justify-content: center;\n        \/* \u4e0a\u90e8\u30d1\u30c7\u30a3\u30f3\u30b0\u30920\u306b\u3057\u3001\u4e0b\u90e8\u306e\u4f59\u767d\u306e\u307f\u8abf\u6574 *\/\n        padding: 0 20px;\n        margin-top: 0; \n        margin-bottom: 3rem;\n    }\n\n    .saeba-desc-box {\n        \/* \u30dc\u30c3\u30af\u30b9\u81ea\u4f53\u306e\u30d1\u30c7\u30a3\u30f3\u30b0\u3082\u4e0a\u90e8\u30920\u306b *\/\n        padding: 0 20px 10px 20px;\n        max-width: 1000px;\n    }\n\n   .saeba-desc-text {\n    \/* Josefin Sans \u3092\u5148\u982d\u306b\u8ffd\u52a0 *\/\n    font-family: 'Josefin Sans', 'Noto Sans JP', sans-serif;\n    font-size: 0.95rem; \n    font-weight: 500;\n    color: #231815;\n    letter-spacing: 0.05em;\n    line-height: 2.2;\n    text-align: center;\n    margin: 0;\n}\n\n    \/* \u6307\u5b9a\u306e\u5834\u6240\u3067\u6539\u884c *\/\n    .line-break {\n        display: block;\n    }\n\n    @media (max-width: 768px) {\n        .saeba-desc-text {\n            font-size: 0.85rem;\n            line-height: 2;\n        }\n    }\n<\/style>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"saeba-minimal-frame\">\n    <div class=\"saeba-split-box-v\">\n        <div class=\"saeba-rotating-text\">\n            <span>R<\/span><span>E<\/span><span>A<\/span><span>S<\/span><span>O<\/span><span>N<\/span>\n        <\/div>\n    <\/div>\n<\/div>\n\n<style>\n    .saeba-minimal-frame {\n        display: flex;\n        justify-content: center;\n        margin: 2rem 0;\n    }\n\n    .saeba-split-box-v {\n        position: relative;\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        padding: 10px 30px;\n        background: linear-gradient(180deg, #e1002e 50%, #231815 50%);\n        min-width: 140px;\n        cursor: pointer;\n        transition: transform 0.3s ease;\n    }\n\n    .saeba-split-box-v:hover {\n        transform: translateY(-2px);\n    }\n\n    .saeba-rotating-text {\n        font-size: 1.45rem;\n        font-weight: 700;\n        color: #ffffff;\n        letter-spacing: 0.15em;\n        display: flex;\n        perspective: 800px;\n        pointer-events: none;\n    }\n\n    \/* \u521d\u56de\u306e\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3 *\/\n    .saeba-rotating-text span {\n        display: inline-block;\n        opacity: 0;\n        transform: rotateX(-720deg);\n        animation: doubleRotateIn 0.8s cubic-bezier(0.23, 1, 0.32, 1) forwards;\n    }\n\n    \/* \u30db\u30d0\u30fc\uff1a\u4e0d\u900f\u660e\u5ea6\u3092\u7dad\u6301\u3057\u3066\u518d\u56de\u8ee2 *\/\n    .saeba-split-box-v:hover .saeba-rotating-text span,\n    .saeba-split-box-v:active .saeba-rotating-text span {\n        opacity: 1;\n        animation: doubleRotateAction 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards;\n    }\n\n    @keyframes doubleRotateIn {\n        100% { opacity: 1; transform: rotateX(0deg); }\n    }\n\n    @keyframes doubleRotateAction {\n        0% { transform: rotateX(0deg); }\n        100% { transform: rotateX(720deg); }\n    }\n\n    \/* \u9045\u5ef6\u8a2d\u5b9a\uff086\u6587\u5b57\u5206\u306b\u8abf\u6574\uff09 *\/\n    .saeba-rotating-text span:nth-child(1) { animation-delay: 0.05s !important; }\n    .saeba-rotating-text span:nth-child(2) { animation-delay: 0.10s !important; }\n    .saeba-rotating-text span:nth-child(3) { animation-delay: 0.15s !important; }\n    .saeba-rotating-text span:nth-child(4) { animation-delay: 0.20s !important; }\n    .saeba-rotating-text span:nth-child(5) { animation-delay: 0.25s !important; }\n    .saeba-rotating-text span:nth-child(6) { animation-delay: 0.30s !important; }\n\n    @media (max-width: 480px) {\n        .saeba-rotating-text { font-size: 1.2rem; }\n        .saeba-split-box-v { padding: 8px 20px; min-width: 120px; }\n    }\n<\/style>\n\n\n\n<div class=\"saeba-copy-container\">\n    <div class=\"saeba-copy-box\">\n        <h1 class=\"saeba-copy-text\">\n            <span>\u9078<\/span><span>\u3070<\/span><span>\u308c<\/span><span>\u308b<\/span><span class=\"highlight\">3<\/span><span>\u3064<\/span><span>\u306e<\/span><span>\u7406<\/span><span>\u7531<\/span>\n        <\/h1>\n    <\/div>\n<\/div>\n\n<style>\n    .saeba-copy-container {\n        display: flex;\n        justify-content: center;\n        margin-top: 4rem;\n        margin-bottom: 0;\n        padding: 0 20px;\n    }\n\n    .saeba-copy-box {\n        cursor: pointer;\n        padding: 15px;\n        transition: transform 0.3s ease;\n    }\n\n    .saeba-copy-box:hover {\n        transform: translateY(-2px);\n    }\n\n    .saeba-copy-text {\n        font-family: 'Noto Sans JP', sans-serif;\n        \/* \u5143\u306e\u6587\u5b57\u30b5\u30a4\u30ba\u8a2d\u5b9a\u306b\u623b\u3057\u307e\u3057\u305f *\/\n        font-size: clamp(1.2rem, 4vw, 2.2rem);\n        font-weight: 900;\n        color: #231815;\n        letter-spacing: 0.1em;\n        line-height: 1.5;\n        text-align: center;\n        perspective: 1000px;\n        margin: 0;\n        pointer-events: none;\n    }\n\n    \/* \u300c3\u300d\u3092\u8d64\u5b57\u306b\u3059\u308b\u305f\u3081\u306e\u30cf\u30a4\u30e9\u30a4\u30c8\u8a2d\u5b9a *\/\n    .saeba-copy-text span.highlight {\n        color: #e1002e;\n    }\n\n    \/* \u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u8a2d\u5b9a *\/\n    .saeba-copy-text span {\n        display: inline-block;\n        opacity: 0;\n        transform: rotateX(-720deg);\n        animation: copyRotateIn 0.8s cubic-bezier(0.23, 1, 0.32, 1) forwards;\n    }\n\n    .saeba-copy-box:hover .saeba-copy-text span,\n    .saeba-copy-box:active .saeba-copy-text span {\n        opacity: 1;\n        animation: copyDoubleRotateAction 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards;\n    }\n\n    @keyframes copyRotateIn {\n        to { opacity: 1; transform: rotateX(0deg); }\n    }\n\n    @keyframes copyDoubleRotateAction {\n        0% { transform: rotateX(0deg); }\n        100% { transform: rotateX(720deg); }\n    }\n\n    \/* \u9045\u5ef6\u8a2d\u5b9a *\/\n    .saeba-copy-text span:nth-child(1) { animation-delay: 0.08s !important; }\n    .saeba-copy-text span:nth-child(2) { animation-delay: 0.16s !important; }\n    .saeba-copy-text span:nth-child(3) { animation-delay: 0.24s !important; }\n    .saeba-copy-text span:nth-child(4) { animation-delay: 0.32s !important; }\n    .saeba-copy-text span:nth-child(5) { animation-delay: 0.40s !important; }\n    .saeba-copy-text span:nth-child(6) { animation-delay: 0.48s !important; }\n    .saeba-copy-text span:nth-child(7) { animation-delay: 0.56s !important; }\n    .saeba-copy-text span:nth-child(8) { animation-delay: 0.64s !important; }\n    .saeba-copy-text span:nth-child(9) { animation-delay: 0.72s !important; }\n\n    @media (max-width: 600px) {\n        .saeba-copy-text {\n            font-size: 1.3rem;\n            line-height: 1.6;\n        }\n    }\n<\/style>\n\n\n\n<div class=\"saeba-reasons-grid\">\n    <div class=\"saeba-reason-card\">\n        <div class=\"card-num-box\">\n            <span class=\"num\">01<\/span>\n            <span class=\"label\">The First Point<\/span>\n        <\/div>\n        <h3>\u5727\u5012\u7684\u306a\u696d\u52d9\u52b9\u7387\u5316<\/h3>\n        <p>\u7a93\u53e3\u3092\u5b8c\u5168\u306b\u4e00\u672c\u5316\u3002\u7169\u96d1\u306a\u4e8b\u52d9\u4f5c\u696d\u3092\u6839\u7d76\u3057\u3001\u60c5\u5831\u306e\u4f1d\u9054\u30df\u30b9\u3092\u7269\u7406\u7684\u306b\u5c01\u3058\u8fbc\u3081\u308b\u3002\u7a7a\u3044\u305f\u30ea\u30bd\u30fc\u30b9\u3092\u30b3\u30a2\u696d\u52d9\u3078\u5b8c\u5168\u6295\u5165\u305b\u3088\u3002<\/p>\n    <\/div>\n    <div class=\"saeba-reason-card\">\n        <div class=\"card-num-box\">\n            <span class=\"num\">02<\/span>\n            <span class=\"label\">The Second Point<\/span>\n        <\/div>\n        <h3>\u8fc5\u901f\u304b\u3064\u67d4\u8edf\u306a\u5bfe\u5fdc\u529b<\/h3>\n        <p>\u30de\u30cb\u30e5\u30a2\u30eb\u3068\u3044\u3046\u540d\u306e\u8db3\u67b7\u306f\u4e0d\u8981\u3002\u73fe\u5834\u306e\u72b6\u6cc1\u306b\u5373\u5fdc\u3057\u3001\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u3068\u3044\u3046\u6b66\u5668\u3067\u7a81\u767a\u7684\u306a\u30cb\u30fc\u30ba\u3092\u6700\u77ed\u3067\u89e3\u6c7a\u3059\u308b\u3002<\/p>\n    <\/div>\n    <div class=\"saeba-reason-card\">\n        <div class=\"card-num-box\">\n            <span class=\"num\">03<\/span>\n            <span class=\"label\">The Third Point<\/span>\n        <\/div>\n        <h3>\u300c\u4f34\u8d70\u578b\u300d\u30d3\u30b8\u30cd\u30b9\u30d1\u30fc\u30c8\u30ca\u30fc<\/h3>\n        <p>\u305f\u3060\u306e\u30b5\u30fc\u30d3\u30b9\u63d0\u4f9b\u3067\u7d42\u308f\u3089\u305b\u306a\u3044\u3002\u9867\u5ba2\u306e\u30d3\u30b8\u30e7\u30f3\u3092\u6df1\u304f\u5171\u6709\u3057\u3001\u8ab2\u984c\u3092\u6839\u672c\u304b\u3089\u89e3\u4f53\u30fb\u518d\u69cb\u7bc9\u3059\u308b\u5fb9\u5e95\u7684\u306a\u30b5\u30dd\u30fc\u30c8\u3092\u7d04\u675f\u3059\u308b\u3002<\/p>\n    <\/div>\n<\/div>\n\n<style>\n    .saeba-reasons-grid {\n        display: grid;\n        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));\n        gap: 2px;\n        background-color: #231815;\n        padding: 2px;\n        max-width: 1200px;\n        margin: 4rem auto;\n    }\n\n    .saeba-reason-card {\n        background-color: #ffffff;\n        padding: 60px 40px;\n        position: relative;\n        overflow: hidden;\n        transition: background-color 0.5s ease;\n    }\n\n    \/* \u30db\u30d0\u30fc\u30a2\u30af\u30b7\u30e7\u30f3 *\/\n    .saeba-reason-card:hover {\n        background-color: #e1002e;\n    }\n\n    .saeba-reason-card:hover h3, \n    .saeba-reason-card:hover p,\n    .saeba-reason-card:hover .num {\n        color: #ffffff !important;\n    }\n\n    .saeba-reason-card:hover .label {\n        transform: translateX(0);\n        opacity: 1;\n    }\n\n    .saeba-reason-card:hover .num {\n        transform: translateX(10px);\n    }\n\n    \/* \u6570\u5b57\u3068\u30e9\u30d9\u30eb\u306e\u30b3\u30f3\u30c6\u30ca *\/\n    .card-num-box {\n        display: flex;\n        align-items: baseline;\n        gap: 15px;\n        margin-bottom: 20px;\n        overflow: hidden;\n    }\n\n    .num {\n        font-size: 6rem; \/* \u6975\u592a\u30b5\u30a4\u30ba *\/\n        font-weight: 900;\n        color: #e1002e;\n        line-height: 1;\n        transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);\n    }\n\n    .label {\n        font-size: 1rem;\n        font-weight: 700;\n        color: #ffffff;\n        background-color: #231815;\n        padding: 4px 12px;\n        opacity: 0;\n        transform: translateX(-50px);\n        transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);\n        white-space: nowrap;\n    }\n\n    .saeba-reason-card h3 {\n        font-size: 1.6rem;\n        color: #231815;\n        margin-bottom: 25px;\n        line-height: 1.3;\n        transition: color 0.5s ease;\n    }\n\n    .saeba-reason-card p {\n        font-size: 1rem;\n        color: #666;\n        line-height: 1.8;\n        transition: color 0.5s ease;\n    }\n\n    @media (max-width: 600px) {\n        .saeba-reason-card { padding: 40px 20px; }\n        .num { font-size: 4rem; }\n    }\n<\/style>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"saeba-minimal-frame\">\n    <div class=\"saeba-split-box-v location-box\">\n        <div class=\"saeba-rotating-text\">\n            <span>L<\/span><span>O<\/span><span>C<\/span><span>A<\/span><span>T<\/span><span>I<\/span><span>O<\/span><span>N<\/span>\n        <\/div>\n    <\/div>\n<\/div>\n\n<style>\n    .saeba-minimal-frame {\n        display: flex;\n        justify-content: center;\n        margin: 2rem 0;\n    }\n\n    .saeba-split-box-v {\n        position: relative;\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        padding: 10px 30px;\n        background: linear-gradient(180deg, #e1002e 50%, #231815 50%);\n        min-width: 180px; \n        cursor: pointer;\n        transition: transform 0.3s ease;\n    }\n\n    .saeba-split-box-v:hover {\n        transform: translateY(-2px);\n    }\n\n    .saeba-rotating-text {\n        \/* \u30d5\u30a9\u30f3\u30c8\u6307\u5b9a\u3092\u524a\u9664\uff1a\u30b5\u30a4\u30c8\u5168\u4f53\u306e\u6307\u5b9a\u3092\u7d99\u627f *\/\n        font-size: 1.45rem;\n        font-weight: 700;\n        color: #ffffff;\n        letter-spacing: 0.15em;\n        display: flex;\n        perspective: 800px;\n        pointer-events: none;\n    }\n\n    .saeba-rotating-text span {\n        display: inline-block;\n        opacity: 0;\n        transform: rotateX(-720deg);\n        animation: doubleRotateIn 0.8s cubic-bezier(0.23, 1, 0.32, 1) forwards;\n    }\n\n    \/* \u30db\u30d0\u30fc\uff1a\u4e0d\u900f\u660e\u5ea6\u3092\u7dad\u6301\u3057\u3066\u518d\u56de\u8ee2 *\/\n    .saeba-split-box-v:hover .saeba-rotating-text span,\n    .saeba-split-box-v:active .saeba-rotating-text span {\n        opacity: 1;\n        animation: doubleRotateAction 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards;\n    }\n\n    @keyframes doubleRotateIn {\n        100% { opacity: 1; transform: rotateX(0deg); }\n    }\n\n    @keyframes doubleRotateAction {\n        0% { transform: rotateX(0deg); }\n        100% { transform: rotateX(720deg); }\n    }\n\n    \/* \u9045\u5ef6\u8a2d\u5b9a *\/\n    .saeba-rotating-text span:nth-child(1) { animation-delay: 0.05s !important; }\n    .saeba-rotating-text span:nth-child(2) { animation-delay: 0.10s !important; }\n    .saeba-rotating-text span:nth-child(3) { animation-delay: 0.15s !important; }\n    .saeba-rotating-text span:nth-child(4) { animation-delay: 0.20s !important; }\n    .saeba-rotating-text span:nth-child(5) { animation-delay: 0.25s !important; }\n    .saeba-rotating-text span:nth-child(6) { animation-delay: 0.30s !important; }\n    .saeba-rotating-text span:nth-child(7) { animation-delay: 0.35s !important; }\n    .saeba-rotating-text span:nth-child(8) { animation-delay: 0.40s !important; }\n\n    @media (max-width: 480px) {\n        .saeba-rotating-text { font-size: 1.1rem; }\n        .saeba-split-box-v { padding: 8px 20px; min-width: 150px; }\n    }\n<\/style>\n\n\n\n<div class=\"saeba-address-container\">\n    <div class=\"saeba-address-box\">\n        <p class=\"saeba-address-text\">\n            <span>\u3012<\/span><span>1<\/span><span>8<\/span><span>0<\/span><span>-<\/span><span>0<\/span><span>0<\/span><span>0<\/span><span>4<\/span><span>&nbsp;<\/span>\n            <span>\u6771<\/span><span>\u4eac<\/span><span>\u90fd<\/span><span>\u6b66<\/span><span>\u8535<\/span><span>\u91ce<\/span><span>\u5e02<\/span>\n            <span>\u5409<\/span><span>\u7965<\/span><span>\u5bfa<\/span><span>\u672c<\/span><span>\u753a<\/span><span>2<\/span><span>-<\/span><span>4<\/span><span>-<\/span><span>1<\/span><span>6<\/span><span>&nbsp;<\/span>\n            <span>\u5409<\/span><span>\u7965<\/span><span>\u5bfa<\/span><span>\u77f3<\/span><span>\u4e95<\/span><span>\u30d3<\/span><span>\u30eb<\/span><span>4<\/span><span>F<\/span>\n        <\/p>\n    <\/div>\n<\/div>\n\n<style>\n    .saeba-address-container {\n        display: flex;\n        justify-content: center;\n        margin-bottom: 2.5rem;\n    }\n\n    .saeba-address-box {\n        cursor: pointer;\n        padding: 10px 20px;\n        transition: transform 0.3s ease;\n    }\n\n    .saeba-address-box:hover {\n        transform: translateY(-1px);\n    }\n\n    .saeba-address-text {\n        font-family: 'Noto Sans JP', sans-serif;\n        font-size: 0.95rem;\n        font-weight: 500;\n        color: #231815;\n        letter-spacing: 0.05em;\n        line-height: 1.8;\n        text-align: center;\n        perspective: 1000px;\n        margin: 0;\n        pointer-events: none;\n    }\n\n    \/* \u521d\u56de\u306e\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3 *\/\n    .saeba-address-text span {\n        display: inline-block;\n        opacity: 0;\n        transform: rotateX(-720deg);\n        animation: addressRotateIn 0.8s cubic-bezier(0.23, 1, 0.32, 1) forwards;\n    }\n\n    \/* \u30db\u30d0\u30fc\u30fb\u30bf\u30c3\u30d7\u6642\u306e\u518d\u56de\u8ee2\uff08\u6d88\u3048\u306a\u3044\u8a2d\u5b9a\uff09 *\/\n    .saeba-address-box:hover .saeba-address-text span,\n    .saeba-address-box:active .saeba-address-text span {\n        opacity: 1;\n        animation: addressDoubleRotateAction 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards;\n    }\n\n    @keyframes addressRotateIn {\n        to { opacity: 1; transform: rotateX(0deg); }\n    }\n\n    @keyframes addressDoubleRotateAction {\n        0% { transform: rotateX(0deg); }\n        100% { transform: rotateX(720deg); }\n    }\n\n    \/* 40\u6587\u5b57\u76ee\u307e\u3067\u30c7\u30a3\u30ec\u30a4\u3092\u5b8c\u5168\u7db2\u7f85\u3002\n       SCSS\u3092\u4f7f\u308f\u306a\u3044\u7d20\u306eCSS\u306a\u306e\u3067\u3001\u4e00\u3064\u305a\u3064\u78ba\u5b9f\u306b\u6307\u5b9a\u3057\u3066\u300cF\u300d\u3092\u9003\u3057\u307e\u305b\u3093\u3002\n    *\/\n    .saeba-address-text span:nth-child(1) { animation-delay: 0.02s !important; }\n    .saeba-address-text span:nth-child(2) { animation-delay: 0.04s !important; }\n    .saeba-address-text span:nth-child(3) { animation-delay: 0.06s !important; }\n    .saeba-address-text span:nth-child(4) { animation-delay: 0.08s !important; }\n    .saeba-address-text span:nth-child(5) { animation-delay: 0.10s !important; }\n    .saeba-address-text span:nth-child(6) { animation-delay: 0.12s !important; }\n    .saeba-address-text span:nth-child(7) { animation-delay: 0.14s !important; }\n    .saeba-address-text span:nth-child(8) { animation-delay: 0.16s !important; }\n    .saeba-address-text span:nth-child(9) { animation-delay: 0.18s !important; }\n    .saeba-address-text span:nth-child(10) { animation-delay: 0.20s !important; }\n    .saeba-address-text span:nth-child(11) { animation-delay: 0.22s !important; }\n    .saeba-address-text span:nth-child(12) { animation-delay: 0.24s !important; }\n    .saeba-address-text span:nth-child(13) { animation-delay: 0.26s !important; }\n    .saeba-address-text span:nth-child(14) { animation-delay: 0.28s !important; }\n    .saeba-address-text span:nth-child(15) { animation-delay: 0.30s !important; }\n    .saeba-address-text span:nth-child(16) { animation-delay: 0.32s !important; }\n    .saeba-address-text span:nth-child(17) { animation-delay: 0.34s !important; }\n    .saeba-address-text span:nth-child(18) { animation-delay: 0.36s !important; }\n    .saeba-address-text span:nth-child(19) { animation-delay: 0.38s !important; }\n    .saeba-address-text span:nth-child(20) { animation-delay: 0.40s !important; }\n    .saeba-address-text span:nth-child(21) { animation-delay: 0.42s !important; }\n    .saeba-address-text span:nth-child(22) { animation-delay: 0.44s !important; }\n    .saeba-address-text span:nth-child(23) { animation-delay: 0.46s !important; }\n    .saeba-address-text span:nth-child(24) { animation-delay: 0.48s !important; }\n    .saeba-address-text span:nth-child(25) { animation-delay: 0.50s !important; }\n    .saeba-address-text span:nth-child(26) { animation-delay: 0.52s !important; }\n    .saeba-address-text span:nth-child(27) { animation-delay: 0.54s !important; }\n    .saeba-address-text span:nth-child(28) { animation-delay: 0.56s !important; }\n    .saeba-address-text span:nth-child(29) { animation-delay: 0.58s !important; }\n    .saeba-address-text span:nth-child(30) { animation-delay: 0.60s !important; }\n    .saeba-address-text span:nth-child(31) { animation-delay: 0.62s !important; }\n    .saeba-address-text span:nth-child(32) { animation-delay: 0.64s !important; }\n    .saeba-address-text span:nth-child(33) { animation-delay: 0.66s !important; }\n    .saeba-address-text span:nth-child(34) { animation-delay: 0.68s !important; }\n    .saeba-address-text span:nth-child(35) { animation-delay: 0.70s !important; }\n    .saeba-address-text span:nth-child(36) { animation-delay: 0.72s !important; }\n    .saeba-address-text span:nth-child(37) { animation-delay: 0.74s !important; }\n    .saeba-address-text span:nth-child(38) { animation-delay: 0.76s !important; }\n    .saeba-address-text span:nth-child(39) { animation-delay: 0.78s !important; }\n    .saeba-address-text span:nth-child(40) { animation-delay: 0.80s !important; }\n\n    @media (max-width: 768px) {\n        .saeba-address-text { font-size: 0.85rem; }\n    }\n<\/style>\n\n\n\n<div class=\"saeba-map-wrapper\">\n    <iframe src=\"https:\/\/www.google.com\/maps\/embed?pb=!1m18!1m12!1m3!1d5448.8545584162175!2d139.5756632456954!3d35.70387401149872!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6018ee48a2fe1ebd%3A0x8f0ab398de9bba9d!2z44CSMTgwLTAwMDQg5p2x5Lqs6YO95q2m6JS16YeO5biC5ZCJ56Wl5a-65pys55S677yS5LiB55uu77yU4oiS77yR77yWIOWQieelpeWvuuefs-S6leODk-ODqw!5e0!3m2!1sja!2sjp!4v1777273354832!5m2!1sja!2sjp\" width=\"600\" height=\"260\" style=\"border:0;\" allowfullscreen=\"\" loading=\"lazy\" referrerpolicy=\"no-referrer-when-downgrade\">\n    <\/iframe>\n<\/div>\n\n<style>\n    \/* \u753b\u9762\u306e\u7aef\u304b\u3089\u7aef\u307e\u3067\u5e83\u3052\u308b\u5168\u5e45\u8a2d\u5b9a *\/\n    .saeba-map-wrapper {\n        width: 100vw;\n        position: relative;\n        left: 50%;\n        right: 50%;\n        margin-left: -50vw;\n        margin-right: -50vw;\n        line-height: 0;\n        overflow: hidden;\n        margin-top: 1.5rem;\n        margin-bottom: 2rem;\n    }\n\n    .saeba-map-wrapper iframe {\n        width: 100%;\n        \/* 280px\u304b\u3089\u3055\u3089\u306b\u7d5e\u3063\u3066260px\u306b\u8abf\u6574 *\/\n        height: 260px; \n        \n        \/* \u30e2\u30ce\u30af\u30ed\u30fb\u30b3\u30f3\u30c8\u30e9\u30b9\u30c8\u8abf\u6574\uff08\u30db\u30d0\u30fc\u5909\u5316\u306a\u3057\uff09 *\/\n        filter: grayscale(100%) contrast(1.2) brightness(0.9);\n        border: none;\n        pointer-events: auto; \/* \u5730\u56f3\u306e\u64cd\u4f5c\u306f\u53ef\u80fd *\/\n    }\n\n    \/* \u30e2\u30d0\u30a4\u30eb\uff08\u30b9\u30de\u30db\uff09\u8868\u793a\u6642\u306e\u6700\u9069\u5316 *\/\n    @media (max-width: 768px) {\n        .saeba-map-wrapper iframe {\n            height: 180px;\n        }\n    }\n<\/style>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n","protected":false},"excerpt":{"rendered":"<p>SAEBA COORDINATION ABOUT \u73fe\u5834\u3092\u3001\u6e05\u6f54\u3068\u5b89\u5fc3\u3067\u30a2\u30c3\u30d7\u30c7\u30fc\u30c8\u3059\u308b\u3002 SAEBA COORDINATION\u306f\u3001 \u885b\u751f\u9818\u57df\u306b\u304a\u3051\u308b\u691c\u67fb\u304b\u3089 \u6e05\u6383\u3001\u6a5f\u5668\u306e\u4fdd\u5b88\u3001\u5e97\u8217\u8a2d\u8a08\u3001\u55b6\u696d\u652f\u63f4\u307e\u3067\u3001 \u7dcf\u5408\u7684\u306b\u30b5\u30dd\u30fc\u30c8\u3057 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_lightning_design_setting":{"layout":"col-one-no-subsection","site_body_padding":"true"},"footnotes":""},"class_list":["post-8","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/saeba-c.co.jp\/index.php?rest_route=\/wp\/v2\/pages\/8","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/saeba-c.co.jp\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/saeba-c.co.jp\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/saeba-c.co.jp\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/saeba-c.co.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=8"}],"version-history":[{"count":10,"href":"https:\/\/saeba-c.co.jp\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions"}],"predecessor-version":[{"id":185,"href":"https:\/\/saeba-c.co.jp\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions\/185"}],"wp:attachment":[{"href":"https:\/\/saeba-c.co.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}