{"id":151,"date":"2025-11-24T20:51:21","date_gmt":"2025-11-24T11:51:21","guid":{"rendered":"https:\/\/sakai-saisei.com\/?page_id=151"},"modified":"2025-12-15T14:56:19","modified_gmt":"2025-12-15T05:56:19","slug":"151-2","status":"publish","type":"page","link":"https:\/\/sakai-saisei.com\/151-2\/","title":{"rendered":"\u30b7\u30e7\u30fc\u30c8\u30b3\u30fc\u30c9\u30c6\u30b9\u30c8"},"content":{"rendered":"    <style>\n        \/* --- SCOPED VARIABLES --- *\/\n        .sk-regen-wrapper-root {\n            --sk-regen-gold: #bfa57d !important;\n            --sk-regen-black: #0a0a0a !important;\n            --sk-regen-white: #ffffff !important;\n            --sk-regen-gray: #f4f4f4 !important;\n            --sk-regen-serif: \"Yu Mincho\", \"YuMincho\", \"Hiragino Mincho ProN\", serif !important;\n            --sk-regen-sans: \"Helvetica Neue\", \"Helvetica\", \"Hiragino Kaku Gothic ProN\", sans-serif !important;\n            --sk-regen-ease: cubic-bezier(0.25, 1, 0.5, 1) !important;\n        }\n\n        \/* --- RESET & LAYOUT --- *\/\n        \/* TCD\u30c6\u30fc\u30de\u306eCSS\u5e72\u6e09\u3092\u9632\u3050\u305f\u3081\u306e\u5f37\u529b\u306a\u30ea\u30bb\u30c3\u30c8 *\/\n        .sk-regen-wrapper-root .sk-regen-wrapper * {\n            box-sizing: border-box !important;\n            margin: 0 !important;\n            padding: 0 !important;\n        }\n\n        .sk-regen-wrapper-root .sk-regen-wrapper a {\n            text-decoration: none !important;\n            color: inherit !important;\n            transition: opacity 0.3s !important;\n        }\n\n        \/* --- SCROLL TRACK (Mobile Height Control) --- *\/\n        .sk-regen-wrapper-root .sk-regen-scroll-track {\n            position: relative !important;\n            background: var(--sk-regen-black) !important;\n            width: 100% !important;\n            \/* PC\u30c7\u30d5\u30a9\u30eb\u30c8 *\/\n            height: 100vh !important;\n            overflow: hidden !important;\n            margin: 0 !important;\n            padding: 0 !important;\n        }\n\n        \/* --- STICKY CONTAINER --- *\/\n        .sk-regen-wrapper-root .sk-regen-sticky-container {\n            position: sticky !important;\n            top: 0 !important;\n            width: 100% !important;\n            height: 100vh !important;\n            display: flex !important;\n            overflow: hidden !important;\n            margin: 0 !important;\n            padding: 0 !important;\n        }\n\n        \/* --- PANEL STYLES --- *\/\n        .sk-regen-wrapper-root .sk-regen-panel {\n            position: relative !important;\n            height: 100% !important;\n            border-right: 1px solid rgba(255,255,255,0.15) !important;\n            overflow: hidden !important;\n            cursor: pointer !important;\n            \n            \/* Flex Transition *\/\n            flex: 1 !important;\n            transition: flex 1.0s var(--sk-regen-ease) !important;\n        }\n\n        \/* Active State *\/\n        .sk-regen-wrapper-root .sk-regen-panel.active {\n            flex: 3.5 !important;\n            cursor: default !important;\n        }\n\n        \/* IMAGE STYLES (Zoom Effect) *\/\n        .sk-regen-wrapper-root .sk-regen-img-wrap {\n            position: absolute !important;\n            inset: 0 !important;\n            width: 100% !important;\n            height: 100% !important;\n            overflow: hidden !important;\n        }\n\n        .sk-regen-wrapper-root .sk-regen-img {\n            width: 100% !important;\n            height: 100% !important;\n            object-fit: cover !important;\n            opacity: 0.6 !important;\n            filter: grayscale(100%) brightness(0.8) !important;\n            transform: scale(1) !important;\n            transition: all 1.2s var(--sk-regen-ease) !important;\n        }\n\n        .sk-regen-wrapper-root .sk-regen-panel.active .sk-regen-img {\n            opacity: 1 !important;\n            filter: grayscale(0%) brightness(1) !important;\n            transform: scale(1.1) !important;\n        }\n\n        \/* TEXT CONTENT *\/\n        .sk-regen-wrapper-root .sk-regen-content {\n            position: absolute !important;\n            bottom: 0 !important;\n            left: 0 !important;\n            width: 100% !important;\n            padding: 60px 40px !important;\n            background: linear-gradient(to top, rgba(0,0,0,0.9), rgba(0,0,0,0.4), transparent) !important;\n            z-index: 2 !important;\n            \n            opacity: 0 !important;\n            transform: translateY(30px) !important;\n            transition: all 0.8s 0.2s var(--sk-regen-ease) !important;\n        }\n\n        .sk-regen-wrapper-root .sk-regen-panel.active .sk-regen-content {\n            opacity: 1 !important;\n            transform: translateY(0) !important;\n        }\n\n        \/* TYPOGRAPHY *\/\n        .sk-regen-wrapper-root .sk-regen-number {\n            display: block !important;\n            font-family: var(--sk-regen-serif) !important;\n            font-size: clamp(3rem, 6vw, 7rem) !important;\n            line-height: 0.9 !important;\n            color: rgba(255,255,255,0.1) !important;\n            margin-bottom: -10px !important;\n            transition: color 0.6s !important;\n        }\n        \n        .sk-regen-wrapper-root .sk-regen-panel.active .sk-regen-number {\n            color: var(--sk-regen-gold) !important;\n        }\n\n        .sk-regen-wrapper-root .sk-regen-title {\n            font-family: var(--sk-regen-serif) !important;\n            font-size: clamp(1.8rem, 3vw, 3.5rem) !important;\n            color: var(--sk-regen-white) !important;\n            margin-bottom: 15px !important;\n            line-height: 1.1 !important;\n            font-weight: 500 !important;\n            letter-spacing: 0.05em !important;\n        }\n\n        .sk-regen-wrapper-root .sk-regen-copy {\n            font-family: var(--sk-regen-sans) !important;\n            font-size: 0.95rem !important;\n            color: #ccc !important;\n            line-height: 1.8 !important;\n            max-width: 400px !important;\n            margin-bottom: 30px !important;\n            display: none !important; \/* \u9589\u3058\u3066\u308b\u6642\u306f\u975e\u8868\u793a *\/\n        }\n        \n        .sk-regen-wrapper-root .sk-regen-panel.active .sk-regen-copy {\n            display: block !important;\n            animation: skRegenFadeIn 1s forwards !important;\n        }\n\n        \/* BUTTON *\/\n        .sk-regen-wrapper-root .sk-regen-btn {\n            display: inline-flex !important;\n            align-items: center !important;\n            justify-content: center !important;\n            width: 60px !important;\n            height: 60px !important;\n            border: 1px solid rgba(255,255,255,0.6) !important;\n            border-radius: 50% !important;\n            color: var(--sk-regen-white) !important;\n            font-size: 1.2rem !important;\n            line-height: 1 !important;\n            transition: all 0.4s !important;\n            backdrop-filter: blur(5px) !important;\n            background: rgba(0,0,0,0.3) !important;\n            text-align: center !important;\n            position: relative !important;\n            z-index: 10 !important;\n        }\n        \n        .sk-regen-wrapper-root .sk-regen-btn:hover {\n            background: var(--sk-regen-gold) !important;\n            border-color: var(--sk-regen-gold) !important;\n            color: #000 !important;\n        }\n\n        @keyframes skRegenFadeIn {\n            from { opacity: 0 !important; }\n            to { opacity: 1 !important; }\n        }\n\n        \/* --- MOBILE RESPONSIVE (Sticky Scroll Logic) --- *\/\n        @media (max-width: 900px) {\n            \/* \u30b9\u30de\u30db\u306e\u307f\u30b9\u30af\u30ed\u30fc\u30eb\u9818\u57df\u3092\u62e1\u5f35 *\/\n            \/* 100vh\uff08\u30d3\u30e5\u30fc\u30dd\u30fc\u30c8\uff09+ 100vh\uff08\u30b9\u30af\u30ed\u30fc\u30eb\u5206\uff09= 200vh *\/\n            .sk-regen-wrapper-root .sk-regen-scroll-track {\n                height: 200vh !important; \/* \u9069\u5207\u306a\u30b9\u30af\u30ed\u30fc\u30eb\u9818\u57df *\/\n            }\n\n            .sk-regen-wrapper-root .sk-regen-sticky-container {\n                flex-direction: column !important;\n                height: 100vh !important;\n            }\n\n            .sk-regen-wrapper-root .sk-regen-panel {\n                width: 100% !important;\n                border-right: none !important;\n                border-bottom: 1px solid rgba(255,255,255,0.15) !important;\n                \/* \u30b9\u30de\u30db\u3067\u306e\u9589\u3058\u305f\u72b6\u614b - \u6700\u5c0f\u9650\u306e\u9ad8\u3055 *\/\n                flex: 0 0 20vh !important;\n                min-height: 20vh !important;\n                max-height: 20vh !important;\n            }\n\n            .sk-regen-wrapper-root .sk-regen-panel.active {\n                \/* \u30b9\u30de\u30db\u3067\u306e\u958b\u3044\u305f\u72b6\u614b - \u5927\u304d\u304f\u8868\u793a *\/\n                flex: 0 0 80vh !important;\n                min-height: 80vh !important;\n                max-height: 80vh !important;\n            }\n\n            \/* Mobile Typography Adjustments *\/\n            .sk-regen-wrapper-root .sk-regen-content {\n                padding: 30px 20px !important;\n            }\n            .sk-regen-wrapper-root .sk-regen-number {\n                font-size: 4rem !important;\n                position: absolute !important;\n                right: 20px !important;\n                bottom: 20px !important;\n                margin: 0 !important;\n                opacity: 0.2 !important;\n            }\n            .sk-regen-wrapper-root .sk-regen-panel.active .sk-regen-number {\n                position: relative !important;\n                right: auto !important;\n                bottom: auto !important;\n                opacity: 1 !important;\n                margin-bottom: -5px !important;\n            }\n            .sk-regen-wrapper-root .sk-regen-title {\n                font-size: 2rem !important;\n            }\n            \n            \/* \u30dc\u30bf\u30f3\u3092\u78ba\u5b9f\u306b\u8868\u793a *\/\n            .sk-regen-wrapper-root .sk-regen-btn {\n                width: 50px !important;\n                height: 50px !important;\n                font-size: 1rem !important;\n            }\n        }\n    <\/style>\n\n    <div class=\"sk-regen-wrapper-root\">\n        <div class=\"sk-regen-wrapper\">\n            <div class=\"sk-regen-scroll-track\" id=\"skRegenTrack\">\n                <div class=\"sk-regen-sticky-container\">\n                    \n                    <div class=\"sk-regen-panel active\" id=\"skPanel20\">\n                        <div class=\"sk-regen-img-wrap\">\n                            <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1517841905240-472988babdf9?q=80&#038;w=1887&#038;auto=format&#038;fit=crop\" class=\"sk-regen-img\" alt=\"20s Fresh Skin\">\n                        <\/div>\n                        <div class=\"sk-regen-content\">\n                            <span class=\"sk-regen-number\">20s<\/span>\n                            <h3 class=\"sk-regen-title\">Texture<br>&amp; Glow<\/h3>\n                            <p class=\"sk-regen-copy\">\n                                \u81ea\u5206\u306e\u7d30\u80de\u3067\u3001\u7f8e\u3057\u3055\u3092\u30ad\u30fc\u30d7\u3059\u308b\u3068\u3044\u3046\u9078\u629e\u3002<br>\u30c0\u30a6\u30f3\u30bf\u30a4\u30e0\u3092\u6291\u3048\u305f\u300c\u4e88\u9632\u300d\u3068\u300c\u8cea\u611f\u6539\u5584\u300d\u3002                            <\/p>\n                            <a href=\"\/woman-20s\/\" class=\"sk-regen-btn\">\u2192<\/a>\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"sk-regen-panel\" id=\"skPanel40\">\n                        <div class=\"sk-regen-img-wrap\">\n                            <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1509967419530-da38b4704bc6?q=80&#038;w=1795&#038;auto=format&#038;fit=crop\" class=\"sk-regen-img\" alt=\"40s Elegant Strength\">\n                        <\/div>\n                        <div class=\"sk-regen-content\">\n                            <span class=\"sk-regen-number\">40s<\/span>\n                            <h3 class=\"sk-regen-title\">Volume<br>&amp; Structure<\/h3>\n                            <p class=\"sk-regen-copy\">\n                                \u5e74\u9f62\u3092\u91cd\u306d\u3066\u3082\u3001\u7f8e\u3057\u3055\u306f\u518d\u751f\u3067\u304d\u308b\u3002<br>\u7d30\u80de\u306b\u3088\u308b\u300c\u69cb\u9020\u518d\u69cb\u7bc9\u300d\u3068\u300c\u66f4\u5e74\u671f\u30b1\u30a2\u300d\u3002                            <\/p>\n                            <a href=\"\/woman-40s\/\" class=\"sk-regen-btn\">\u2192<\/a>\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"sk-regen-panel\" id=\"skPanel60\">\n                        <div class=\"sk-regen-img-wrap\">\n                            <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1551024739-78e9d60c45ca?q=80&#038;w=1887&#038;auto=format&#038;fit=crop\" class=\"sk-regen-img\" alt=\"60s Noble Beauty\">\n                        <\/div>\n                        <div class=\"sk-regen-content\">\n                            <span class=\"sk-regen-number\">60s<\/span>\n                            <h3 class=\"sk-regen-title\">Density<br>&amp; Life<\/h3>\n                            <p class=\"sk-regen-copy\">\n                                \u3082\u3046\u4e00\u5ea6\u3001\u3042\u306a\u305f\u306e\u808c\u3092\"\u80b2\u3066\u308b\"\u3068\u3044\u3046\u9078\u629e\u3002<br>\u76ae\u819a\u840e\u7e2e\u3068\u6df1\u3044\u30b7\u30ef\u3078\u306e\u300c\u533b\u7642\u7684\u518d\u751f\u30a2\u30d7\u30ed\u30fc\u30c1\u300d\u3002                            <\/p>\n                            <a href=\"\/woman-60s\/\" class=\"sk-regen-btn\">\u2192<\/a>\n                        <\/div>\n                    <\/div>\n\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <script>\n        (function() {\n            'use strict';\n            \n            function initSkRegen() {\n                const track = document.getElementById('skRegenTrack');\n                if (!track) return;\n                \n                const p20 = document.getElementById('skPanel20');\n                const p40 = document.getElementById('skPanel40');\n                const p60 = document.getElementById('skPanel60');\n                const panels = [p20, p40, p60].filter(p => p !== null);\n\n                if (panels.length === 0) return;\n\n                function setActive(targetPanel) {\n                    panels.forEach(p => {\n                        if(p === targetPanel) {\n                            p.classList.add('active');\n                        } else {\n                            p.classList.remove('active');\n                        }\n                    });\n                }\n\n                \/\/ --- SCROLL LISTENER (Mobile Logic) ---\n                let scrollTimeout;\n                let lastActivePanel = p20;\n                let isMobile = window.innerWidth <= 900;\n                \n                function handleScroll() {\n                    \/\/ PC (900px\u4ee5\u4e0a) \u306fHover\u512a\u5148\u306e\u305f\u3081\u30b9\u30af\u30ed\u30fc\u30eb\u9023\u52d5OFF\n                    if (!isMobile) return;\n\n                    const rect = track.getBoundingClientRect();\n                    const trackTop = rect.top;\n                    const trackHeight = rect.height;\n                    const viewportHeight = window.innerHeight;\n                    \n                    \/\/ \u30c8\u30e9\u30c3\u30af\u306e\u4e0a\u7aef\u304c\u30d3\u30e5\u30fc\u30dd\u30fc\u30c8\u306e\u4e0a\u7aef\u306b\u6765\u305f\u6642\u70b9\u30920\u3068\u3057\u3066\u8a08\u7b97\n                    \/\/ \u30c8\u30e9\u30c3\u30af\u304c\u307e\u3060\u4e0a\u306b\u3042\u308b\u5834\u5408\u306f\u8ca0\u306e\u5024\u3001\u901a\u904e\u3057\u305f\u3089\u6b63\u306e\u5024\n                    const scrollProgress = -trackTop;\n                    \n                    \/\/ \u30b9\u30af\u30ed\u30fc\u30eb\u53ef\u80fd\u306a\u8ddd\u96e2\uff08\u30c8\u30e9\u30c3\u30af\u306e\u9ad8\u3055 - \u30d3\u30e5\u30fc\u30dd\u30fc\u30c8\u306e\u9ad8\u3055\uff09\n                    const scrollableDistance = Math.max(0, trackHeight - viewportHeight);\n                    \n                    \/\/ \u30d1\u30cd\u30eb\u5207\u308a\u66ff\u3048\u30ed\u30b8\u30c3\u30af\n                    let targetPanel = p20;\n                    \n                    if (scrollProgress <= 0) {\n                        \/\/ \u30c8\u30e9\u30c3\u30af\u304c\u307e\u3060\u4e0a\u306b\u3042\u308b\u5834\u5408\u3001\u6700\u521d\u306e\u30d1\u30cd\u30eb\u3092\u8868\u793a\n                        targetPanel = p20;\n                    } else if (scrollProgress >= scrollableDistance) {\n                        \/\/ \u30c8\u30e9\u30c3\u30af\u3092\u5b8c\u5168\u306b\u901a\u904e\u3057\u305f\u5834\u5408\u3001\u6700\u5f8c\u306e\u30d1\u30cd\u30eb\u3092\u8868\u793a\n                        targetPanel = p60;\n                    } else {\n                        \/\/ \u30c8\u30e9\u30c3\u30af\u5185\u3092\u30b9\u30af\u30ed\u30fc\u30eb\u4e2d\n                        \/\/ \u30b9\u30af\u30ed\u30fc\u30eb\u9032\u884c\u5ea6\u3092\u8a08\u7b97\uff080.0 - 1.0\uff09\n                        const percentage = scrollProgress \/ scrollableDistance;\n                        \n                        if (percentage < 0.33) {\n                            targetPanel = p20;\n                        } else if (percentage >= 0.33 && percentage < 0.66) {\n                            targetPanel = p40;\n                        } else {\n                            targetPanel = p60;\n                        }\n                    }\n                    \n                    \/\/ \u30d1\u30cd\u30eb\u304c\u5909\u308f\u3063\u305f\u5834\u5408\u306e\u307f\u66f4\u65b0\n                    if (targetPanel !== lastActivePanel) {\n                        setActive(targetPanel);\n                        lastActivePanel = targetPanel;\n                    }\n                }\n\n                \/\/ \u521d\u671f\u72b6\u614b\u3092\u8a2d\u5b9a\n                if (isMobile) {\n                    handleScroll();\n                }\n\n                \/\/ \u30b9\u30af\u30ed\u30fc\u30eb\u30a4\u30d9\u30f3\u30c8\u306e\u6700\u9069\u5316\n                window.addEventListener('scroll', function() {\n                    if (scrollTimeout) {\n                        window.cancelAnimationFrame(scrollTimeout);\n                    }\n                    scrollTimeout = window.requestAnimationFrame(handleScroll);\n                }, { passive: true });\n                \n                \/\/ \u30ea\u30b5\u30a4\u30ba\u6642\u306b\u3082\u518d\u8a08\u7b97\n                window.addEventListener('resize', function() {\n                    isMobile = window.innerWidth <= 900;\n                    if (isMobile) {\n                        handleScroll();\n                    }\n                }, { passive: true });\n\n                \/\/ --- HOVER LISTENER (PC Logic) ---\n                panels.forEach(panel => {\n                    panel.addEventListener('mouseenter', function() {\n                        if (window.innerWidth > 900) {\n                            setActive(panel);\n                        }\n                    });\n                });\n            }\n\n            \/\/ WordPress\u4e92\u63db: DOMContentLoaded + jQuery ready\n            if (document.readyState === 'loading') {\n                document.addEventListener('DOMContentLoaded', initSkRegen);\n            } else {\n                initSkRegen();\n            }\n\n            \/\/ jQuery\u304c\u5229\u7528\u53ef\u80fd\u306a\u5834\u5408\u3082\u5bfe\u5fdc\n            if (typeof jQuery !== 'undefined') {\n                jQuery(document).ready(function($) {\n                    initSkRegen();\n                });\n            }\n        })();\n    <\/script>\n    \n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":26,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"symptom":[],"class_list":["post-151","page","type-page","status-publish","hentry"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/sakai-saisei.com\/wp-json\/wp\/v2\/pages\/151","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sakai-saisei.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sakai-saisei.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sakai-saisei.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sakai-saisei.com\/wp-json\/wp\/v2\/comments?post=151"}],"version-history":[{"count":8,"href":"https:\/\/sakai-saisei.com\/wp-json\/wp\/v2\/pages\/151\/revisions"}],"predecessor-version":[{"id":305,"href":"https:\/\/sakai-saisei.com\/wp-json\/wp\/v2\/pages\/151\/revisions\/305"}],"wp:attachment":[{"href":"https:\/\/sakai-saisei.com\/wp-json\/wp\/v2\/media?parent=151"}],"wp:term":[{"taxonomy":"symptom","embeddable":true,"href":"https:\/\/sakai-saisei.com\/wp-json\/wp\/v2\/symptom?post=151"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}