{"id":12,"date":"2025-12-14T22:57:07","date_gmt":"2025-12-14T22:57:07","guid":{"rendered":"https:\/\/mikata--magazine.com\/?post_type=lp&#038;p=12"},"modified":"2025-12-16T20:12:12","modified_gmt":"2025-12-16T20:12:12","slug":"top","status":"publish","type":"lp","link":"https:\/\/mikata--magazine.com\/?lp=top","title":{"rendered":"top"},"content":{"rendered":"\n<div class=\"swell-block-fullWide pc-py-60 sp-py-40 alignfull\" style=\"background-color:#f7f7f7\"><div class=\"swell-block-fullWide__inner\">\n<h2 class=\"wp-block-heading is-style-section_ttl\"><\/h2>\n\n\n\n<!-- =======================================================\n     SWELL\u56fa\u5b9a\u30da\u30fc\u30b8\u7528 \u5b8c\u5168\u7248\u30b3\u30fc\u30c9 (MIKATA magazine)\n     ======================================================= -->\n\n<!-- 1. \u5f37\u529b\u306a\u30b9\u30bf\u30a4\u30eb\u30ea\u30bb\u30c3\u30c8 (SWELL\u306e\u5e72\u6e09\u3092\u6392\u9664) -->\n<style>\n    \/* SWELL\u306e\u30ec\u30a4\u30a2\u30a6\u30c8\u67a0\u3092\u5f37\u5236\u89e3\u9664\u3057\u3066\u5168\u5e45\u306b\u3059\u308b *\/\n    body, #content, #main, .l-main, .l-container, .post_content {\n        margin: 0 !important;\n        padding: 0 !important;\n        width: 100% !important;\n        max-width: 100% !important;\n        background-color: #fff !important;\n    }\n\n    \/* \u4e0d\u8981\u306a\u30d1\u30fc\u30c4\u3092\u975e\u8868\u793a *\/\n    .c-pageTitle, .p-articleThumb, .l-header, .l-footer, .c-share, .c-fix_bottom_menu {\n        display: none !important;\n    }\n\n    \/* \u8a18\u4e8b\u5185\u306e\u81ea\u52d5\u30b9\u30bf\u30a4\u30eb\u3092\u30ea\u30bb\u30c3\u30c8 *\/\n    .mikata-reset-scope * {\n        box-sizing: border-box;\n        margin: 0;\n        padding: 0;\n    }\n    \n    \/* \u30ea\u30f3\u30af\u3084\u898b\u51fa\u3057\u306e\u30b9\u30bf\u30a4\u30eb\u3092\u7121\u52b9\u5316 *\/\n    .mikata-reset-scope h1, \n    .mikata-reset-scope h2, \n    .mikata-reset-scope h3, \n    .mikata-reset-scope p, \n    .mikata-reset-scope ul, \n    .mikata-reset-scope li,\n    .mikata-reset-scope a {\n        background: transparent !important;\n        border: none !important;\n        padding: 0 !important;\n        margin: 0 !important;\n        font-weight: inherit;\n        font-size: inherit;\n        color: inherit;\n        text-decoration: none !important;\n        list-style: none !important;\n        line-height: inherit;\n    }\n\n    \/* \u753b\u9762\u5e45\u3044\u3063\u3071\u3044\u306b\u5e83\u3052\u308b *\/\n    .mikata-full-width-buster {\n        width: 100vw;\n        position: relative;\n        left: 50%;\n        right: 50%;\n        margin-left: -50vw !important;\n        margin-right: -50vw !important;\n    }\n    \n    \/* \u6a2a\u30b9\u30af\u30ed\u30fc\u30eb\u30d0\u30fc\u975e\u8868\u793a *\/\n    .hide-scrollbar::-webkit-scrollbar {\n        display: none;\n    }\n    .hide-scrollbar {\n        -ms-overflow-style: none;\n        scrollbar-width: none;\n    }\n<\/style>\n\n<!-- 2. \u5916\u90e8\u30ea\u30bd\u30fc\u30b9\u8aad\u307f\u8fbc\u307f -->\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;600&#038;family=Zen+Old+Mincho:wght@400;500;700;900&#038;display=swap\" rel=\"stylesheet\">\n\n<!-- Tailwind CSS -->\n<script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n<script>\n    tailwind.config = {\n        important: '.mikata-reset-scope', \n        theme: {\n            extend: {\n                fontFamily: {\n                    sans: ['Inter', 'sans-serif'],\n                    serif: ['Zen Old Mincho', 'serif'],\n                },\n                colors: {\n                    main: '#111827',\n                    sub: '#4b5563',\n                    glass: 'rgba(255, 255, 255, 0.7)',\n                    'glass-high': 'rgba(255, 255, 255, 0.9)',\n                    accent: '#84cc16', \n                    'accent-light': '#bef264',\n                },\n                animation: {\n                    'slow-spin': 'spin 20s linear infinite',\n                }\n            }\n        },\n    }\n<\/script>\n\n<!-- Libraries -->\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/three.js\/r128\/three.min.js\"><\/script>\n<script src=\"https:\/\/unpkg.com\/lucide@latest\"><\/script>\n\n<!-- 3. \u30e1\u30a4\u30f3\u30b3\u30f3\u30c6\u30f3\u30c4 -->\n<div class=\"mikata-reset-scope mikata-full-width-buster font-sans text-gray-800 antialiased overflow-x-hidden selection:bg-accent-light selection:text-black relative bg-white\">\n\n    <!-- \u80cc\u666f\u30a8\u30d5\u30a7\u30af\u30c8 -->\n    <div class=\"bg-grainy fixed top-0 left-0 w-full h-full pointer-events-none z-0 opacity-[0.04] mix-blend-multiply\" style=\"background-image: url('data:image\/svg+xml,%3Csvg viewBox=\\'0 0 200 200\\' xmlns=\\'http:\/\/www.w3.org\/2000\/svg\\'%3E%3Cfilter id=\\'noiseFilter\\'%3E%3CfeTurbulence type=\\'fractalNoise\\' baseFrequency=\\'0.8\\' numOctaves=\\'3\\' stitchTiles=\\'stitch\\'\/%3E%3C\/filter%3E%3Crect width=\\'100%25\\' height=\\'100%25\\' filter=\\'url(%23noiseFilter)\\'\/%3E%3C\/svg%3E');\"><\/div>\n    <div class=\"bg-gradient-mesh fixed top-0 left-0 w-full h-full -z-10\" style=\"background: radial-gradient(circle at 50% 50%, #ffffff 0%, #f9fafb 100%);\"><\/div>\n\n    <!-- \u30d8\u30c3\u30c0\u30fc -->\n    <header class=\"mikata-header fixed top-0 w-full z-40 transition-all duration-300 px-6 py-4 flex justify-between items-center glass-panel border-b-0 border-black\/5 bg-white\/70 backdrop-blur-md\">\n        <div class=\"flex items-center gap-4\">\n            <a href=\"https:\/\/mikata--magazine.com\/\" class=\"no-underline group\">\n                <h1 class=\"font-serif text-2xl font-bold tracking-tighter text-gray-900 m-0 leading-none group-hover:text-accent transition-colors\">MIKATA <span class=\"text-xs font-sans font-light opacity-70 tracking-widest block -mt-1 text-gray-500\">magazine<\/span><\/h1>\n            <\/a>\n        <\/div>\n        <div class=\"flex items-center gap-6\">\n            <nav class=\"hidden md:flex gap-6 text-sm font-medium tracking-wider text-gray-600\">\n                <a href=\"https:\/\/mikata--magazine.com\/category\/love\/\" class=\"hover:text-accent transition-colors no-underline\">LOVE<\/a>\n                <a href=\"https:\/\/mikata--magazine.com\/category\/style\/\" class=\"hover:text-accent transition-colors no-underline\">STYLE<\/a>\n                <a href=\"https:\/\/mikata--magazine.com\/category\/mind\/\" class=\"hover:text-accent transition-colors no-underline\">MIND<\/a>\n                <a href=\"https:\/\/mikata--magazine.com\/category\/life\/\" class=\"hover:text-accent transition-colors no-underline\">LIFE<\/a>\n            <\/nav>\n            <!-- \u691c\u7d22\u30dc\u30bf\u30f3 (SWELL\u6a5f\u80fd\u547c\u3073\u51fa\u3057) -->\n            <button class=\"p-2 text-gray-600 hover:text-accent transition-colors bg-transparent border-none cursor-pointer\" onclick=\"if(document.querySelector('.c-search_btn')) document.querySelector('.c-search_btn').click();\">\n                <i data-lucide=\"search\" class=\"w-5 h-5\"><\/i>\n            <\/button>\n            <!-- \u30e1\u30cb\u30e5\u30fc\u30dc\u30bf\u30f3 (SWELL\u6a5f\u80fd\u547c\u3073\u51fa\u3057) -->\n            <button class=\"flex items-center gap-2 border border-gray-300 px-4 py-1.5 rounded-full hover:bg-black hover:text-white transition-all duration-300 bg-transparent cursor-pointer text-gray-800\" onclick=\"if(document.querySelector('.c-menu_btn')) document.querySelector('.c-menu_btn').click();\">\n                <span class=\"text-xs font-bold tracking-widest\">MENU<\/span>\n                <i data-lucide=\"menu\" class=\"w-4 h-4\"><\/i>\n            <\/button>\n        <\/div>\n    <\/header>\n\n    <!-- \u30e1\u30a4\u30f3\u30d3\u30b8\u30e5\u30a2\u30eb (Hero) -->\n    <section class=\"relative min-h-screen pt-24 pb-12 overflow-hidden flex flex-col justify-center\">\n        <!-- Three.js Canvas -->\n        <div id=\"canvas-container\" class=\"absolute top-0 left-0 w-full h-full z-0 pointer-events-none\"><\/div>\n\n        <div class=\"container mx-auto px-4 z-10 relative h-full flex flex-col md:flex-row items-center\">\n            \n            <!-- \u30ad\u30e3\u30c3\u30c1\u30b3\u30d4\u30fc -->\n            <div class=\"w-full md:w-1\/2 mb-12 md:mb-0 md:pr-12 fade-up relative\">\n                <div class=\"absolute -inset-10 bg-white\/40 blur-3xl -z-10 rounded-full pointer-events-none\"><\/div>\n\n                <p class=\"text-accent font-bold tracking-[0.2em] text-xs mb-6 uppercase flex items-center gap-2\">\n                    <span class=\"w-8 h-[1px] bg-accent inline-block\"><\/span>\n                    The Definitive Guide to Self-Love\n                <\/p>\n                \n                <h2 class=\"font-serif leading-none mb-8 text-gray-900 relative\">\n                    <span class=\"block text-2xl md:text-4xl font-medium tracking-widest mb-4 ml-1\">\u4e00\u5ea6\u304d\u308a\u306e\u4eba\u751f\u3002<\/span>\n                    <span class=\"block text-6xl md:text-8xl lg:text-9xl font-black tracking-tighter -ml-1 mb-2 text-accent\">\n                        \u81ea\u5206\u3092\u597d\u304d\u3067\n                    <\/span>\n                    <span class=\"block text-4xl md:text-6xl lg:text-7xl font-bold tracking-tight text-gray-800\">\n                        \u3044\u3089\u308c\u308b\u3088\u3046\u306b\u3002\n                    <\/span>\n                <\/h2>\n\n                <p class=\"text-gray-600 text-base md:text-lg mb-10 leading-relaxed max-w-md font-medium tracking-wide\">\n                    \u5fc3\u30fb\u898b\u305f\u76ee\u30fb\u7fd2\u6163\u3092\u6574\u3048\u3066\u3001<br>\n                    \u6bce\u65e5\u3092\u5c11\u3057\u305a\u3064\u201c\u81ea\u5206\u306e\u5473\u65b9\u201d\u306b\u3059\u308b\u305f\u3081\u306e<br>\n                    \u30e9\u30a4\u30d5\u30b9\u30bf\u30a4\u30eb\u30de\u30ac\u30b8\u30f3\u3002\n                <\/p>\n                <div class=\"flex flex-wrap gap-4\">\n                    <a href=\"https:\/\/mikata--magazine.com\/category\/featured\/\" class=\"bg-black text-white px-8 py-4 rounded-full font-bold hover:bg-accent hover:text-white transition-all duration-300 shadow-xl shadow-black\/10 hover:shadow-accent\/30 hover:-translate-y-1 inline-block text-sm tracking-widest no-underline\">\n                        \u4eba\u6c17\u8a18\u4e8b\u3092\u8aad\u3080\n                    <\/a>\n                    <a href=\"https:\/\/mikata--magazine.com\/newsletter\/\" class=\"bg-white\/50 backdrop-blur-md border border-gray-300 text-gray-900 px-8 py-4 rounded-full font-bold hover:bg-white transition-all duration-300 flex items-center gap-2 inline-flex hover:border-gray-400 text-sm tracking-widest no-underline\">\n                        <span>Subscribe<\/span>\n                        <i data-lucide=\"arrow-right\" class=\"w-4 h-4\"><\/i>\n                    <\/a>\n                <\/div>\n            <\/div>\n\n            <!-- \u30b9\u30e9\u30a4\u30c0\u30fc\uff08\u9759\u7684\u30d3\u30b8\u30e5\u30a2\u30eb\uff09 -->\n            <div class=\"w-full md:w-1\/2 relative h-[400px] md:h-[600px] flex items-center justify-center perspective-1000 fade-up\" style=\"transition-delay: 0.2s;\">\n                <div class=\"absolute w-64 md:w-80 aspect-[3\/4] rounded-2xl overflow-hidden glass-panel opacity-60 slanted-card shadow-lg\" style=\"transform: perspective(1000px) rotateY(-15deg) rotateZ(5deg) translateZ(-100px) translateX(60px);\">\n                    <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1509631179647-0177331693ae?auto=format&#038;fit=crop&#038;w=600&#038;q=80\" class=\"w-full h-full object-cover grayscale opacity-80\" alt=\"Fashion\">\n                <\/div>\n                <div class=\"absolute w-64 md:w-80 aspect-[3\/4] rounded-2xl overflow-hidden glass-panel opacity-80 slanted-card shadow-lg\" style=\"transform: perspective(1000px) rotateY(-12deg) rotateZ(3deg) translateZ(-50px) translateX(30px);\">\n                    <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1480714378408-67cf0d13bc1b?auto=format&#038;fit=crop&#038;w=600&#038;q=80\" class=\"w-full h-full object-cover grayscale brightness-125 opacity-80\" alt=\"Tech\">\n                <\/div>\n                <!-- \u7279\u96c6\u3078\u306e\u30ea\u30f3\u30af -->\n                <a href=\"https:\/\/mikata--magazine.com\/tag\/special-issue\/\" class=\"absolute w-64 md:w-80 aspect-[3\/4] rounded-2xl overflow-hidden border border-white shadow-2xl group cursor-pointer z-20 bg-white block no-underline slanted-card\" style=\"transform: perspective(1000px) rotateY(-10deg) rotateZ(2deg); transition: transform 0.5s ease;\">\n                    <div class=\"absolute top-4 left-4 z-10 bg-accent-light text-black text-[10px] font-bold px-2 py-1 uppercase tracking-wider shadow-sm\">Special Issue<\/div>\n                    <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1469334031218-e382a71b716b?auto=format&#038;fit=crop&#038;w=800&#038;q=80\" class=\"w-full h-full object-cover opacity-95 group-hover:opacity-100 transition-opacity duration-500\" alt=\"Main Cover\">\n                    <div class=\"absolute bottom-0 left-0 w-full p-6 bg-gradient-to-t from-black\/80 via-black\/40 to-transparent text-white\">\n                        <h3 class=\"font-serif text-2xl font-bold mb-1 leading-tight text-white\">\u201c\u81ea\u5206\u3092\u597d\u304d\u201d\u3092<br>\u53d6\u308a\u623b\u30597\u65e5\u9593<\/h3>\n                        <p class=\"text-xs text-gray-300\">Feb 2025 \u2022 MIKATA Originals<\/p>\n                    <\/div>\n                <\/a>\n            <\/div>\n        <\/div>\n        \n        <!-- \u30b9\u30af\u30ed\u30fc\u30eb\u8a98\u5c0e -->\n        <div class=\"absolute bottom-10 left-1\/2 -translate-x-1\/2 flex flex-col items-center gap-2 opacity-30 animate-bounce text-black\">\n            <span class=\"text-[10px] tracking-[0.3em] uppercase\">Scroll<\/span>\n            <i data-lucide=\"chevron-down\" class=\"w-4 h-4\"><\/i>\n        <\/div>\n    <\/section>\n\n    <!-- \u6700\u65b0\u8a18\u4e8b (\u81ea\u52d5\u53d6\u5f97) -->\n    <section class=\"py-16 border-t border-gray-100 bg-white\/60 backdrop-blur-sm relative z-10\">\n        <div class=\"container mx-auto px-4 mb-8 flex justify-between items-end fade-up\">\n            <div>\n                <span class=\"text-accent font-bold text-xs tracking-widest uppercase\">Latest Stories<\/span>\n                <h2 class=\"font-serif text-3xl md:text-4xl mt-2 text-gray-900\">\u65b0\u7740\u8a18\u4e8b<\/h2>\n            <\/div>\n            <!-- \u65b0\u7740\u4e00\u89a7\u30da\u30fc\u30b8\u3078\u306e\u30ea\u30f3\u30af -->\n            <a href=\"https:\/\/mikata--magazine.com\/new-arrival\/\" class=\"hidden md:flex items-center gap-2 text-sm text-gray-500 hover:text-black transition-colors no-underline\">\n                VIEW ALL <i data-lucide=\"arrow-right\" class=\"w-4 h-4\"><\/i>\n            <\/a>\n        <\/div>\n\n        <div class=\"w-full overflow-x-auto pb-8 px-4 md:px-0 hide-scrollbar\" style=\"scroll-snap-type: x mandatory;\">\n            <!-- \u3053\u3053\u306bJavaScript\u3067\u8a18\u4e8b\u304c\u81ea\u52d5\u633f\u5165\u3055\u308c\u307e\u3059 -->\n            <div id=\"js-latest-articles\" class=\"flex gap-6 w-max px-4 md:pl-[calc((100vw-1200px)\/2)]\">\n                <!-- \u8aad\u307f\u8fbc\u307f\u4e2d\u306e\u30b9\u30b1\u30eb\u30c8\u30f3\u8868\u793a -->\n                <div class=\"w-[280px] md:w-[320px] h-[400px] bg-gray-100 rounded-lg animate-pulse\"><\/div>\n                <div class=\"w-[280px] md:w-[320px] h-[400px] bg-gray-100 rounded-lg animate-pulse delay-100\"><\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <!-- Start Here (\u521d\u5fc3\u8005\u5411\u3051) -->\n    <section class=\"py-16 relative z-10\">\n        <div class=\"container mx-auto px-4 fade-up\">\n            <div class=\"flex items-center gap-3 mb-8 justify-center\">\n                <div class=\"w-12 h-[1px] bg-gray-300\"><\/div>\n                <h3 class=\"font-serif text-xl text-center text-gray-900 m-0\">Start Here \/ \u307e\u305a\u306f\u3053\u3053\u304b\u3089<\/h3>\n                <div class=\"w-12 h-[1px] bg-gray-300\"><\/div>\n            <\/div>\n            \n            <div class=\"grid grid-cols-1 md:grid-cols-3 gap-6\">\n                <a href=\"https:\/\/mikata--magazine.com\/tag\/start-love\/\" class=\"group relative h-48 rounded-xl overflow-hidden bg-white border border-gray-200 hover:border-accent hover:shadow-lg transition-all flex items-center justify-center text-center p-6 no-underline\">\n                    <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1544367563-12123d832e34?auto=format&#038;fit=crop&#038;w=600&#038;q=80\" class=\"absolute inset-0 w-full h-full object-cover opacity-20 group-hover:scale-110 transition-transform duration-700\" alt=\"Start 1\">\n                    <div class=\"relative z-10\">\n                        <span class=\"text-accent font-bold text-[10px] uppercase tracking-wider mb-2 block\">Relations<\/span>\n                        <h4 class=\"font-serif text-xl font-bold text-gray-900 group-hover:text-accent transition-colors m-0\">\u300c\u604b\u611b\u3067\u81ea\u5206\u3092<br>\u5931\u308f\u306a\u3044\u300d\u5165\u9580<\/h4>\n                        <div class=\"mt-4 inline-flex items-center gap-1 text-xs text-gray-500 group-hover:text-black\">\n                            READ GUIDE <i data-lucide=\"arrow-right\" class=\"w-3 h-3\"><\/i>\n                        <\/div>\n                    <\/div>\n                <\/a>\n                <a href=\"https:\/\/mikata--magazine.com\/tag\/start-beauty\/\" class=\"group relative h-48 rounded-xl overflow-hidden bg-white border border-gray-200 hover:border-accent hover:shadow-lg transition-all flex items-center justify-center text-center p-6 no-underline\">\n                    <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1512314889357-e157c22f938d?auto=format&#038;fit=crop&#038;w=600&#038;q=80\" class=\"absolute inset-0 w-full h-full object-cover opacity-20 group-hover:scale-110 transition-transform duration-700\" alt=\"Start 2\">\n                    <div class=\"relative z-10\">\n                        <span class=\"text-accent font-bold text-[10px] uppercase tracking-wider mb-2 block\">Beauty &#038; Style<\/span>\n                        <h4 class=\"font-serif text-xl font-bold text-gray-900 group-hover:text-accent transition-colors m-0\">\u57a2\u629c\u3051\u306f<br>\u201c\u6574\u3048\u308b\u201d\u304b\u3089<\/h4>\n                        <div class=\"mt-4 inline-flex items-center gap-1 text-xs text-gray-500 group-hover:text-black\">\n                            READ GUIDE <i data-lucide=\"arrow-right\" class=\"w-3 h-3\"><\/i>\n                        <\/div>\n                    <\/div>\n                <\/a>\n                <a href=\"https:\/\/mikata--magazine.com\/tag\/start-mind\/\" class=\"group relative h-48 rounded-xl overflow-hidden bg-white border border-gray-200 hover:border-accent hover:shadow-lg transition-all flex items-center justify-center text-center p-6 no-underline\">\n                    <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1452421822248-d4c2b47f0c81?auto=format&#038;fit=crop&#038;w=600&#038;q=80\" class=\"absolute inset-0 w-full h-full object-cover opacity-20 group-hover:scale-110 transition-transform duration-700\" alt=\"Start 3\">\n                    <div class=\"relative z-10\">\n                        <span class=\"text-accent font-bold text-[10px] uppercase tracking-wider mb-2 block\">Mindset<\/span>\n                        <h4 class=\"font-serif text-xl font-bold text-gray-900 group-hover:text-accent transition-colors m-0\">\u8003\u3048\u3059\u304e\u3092<br>\u6b62\u3081\u308b3\u5206<\/h4>\n                        <div class=\"mt-4 inline-flex items-center gap-1 text-xs text-gray-500 group-hover:text-black\">\n                            READ GUIDE <i data-lucide=\"arrow-right\" class=\"w-3 h-3\"><\/i>\n                        <\/div>\n                    <\/div>\n                <\/a>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <!-- [C] TRENDING NOW -->\n    <section class=\"py-12 relative z-10 overflow-hidden bg-gray-50\">\n        <div class=\"container mx-auto px-4 mb-6 flex items-center gap-3 fade-up\">\n            <h3 class=\"font-serif text-xl text-gray-900 m-0\">Trending Now<\/h3>\n            <span class=\"bg-gray-200 text-gray-600 text-[10px] px-2 py-0.5 rounded uppercase tracking-wider\">Weekly Top 5<\/span>\n        <\/div>\n\n        <div class=\"w-full overflow-x-auto pb-6 hide-scrollbar\" style=\"scroll-snap-type: x mandatory;\">\n            <div class=\"flex gap-4 w-max px-4 md:pl-[calc((100vw-1200px)\/2)]\">\n                <!-- Trend items -->\n                <a href=\"https:\/\/mikata--magazine.com\/tag\/sneaker\/\" class=\"w-64 bg-white border border-gray-100 rounded-lg p-3 flex gap-4 items-center snap-center relative group hover:shadow-md transition-all cursor-pointer fade-up no-underline\">\n                    <span class=\"absolute -top-2 -left-2 w-6 h-6 bg-accent text-white font-bold flex items-center justify-center rounded-full text-xs shadow-md z-20\">1<\/span>\n                    <div class=\"w-16 h-16 rounded overflow-hidden shrink-0\">\n                        <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1542291026-7eec264c27ff?auto=format&#038;fit=crop&#038;w=200&#038;q=80\" class=\"w-full h-full object-cover\" alt=\"Trend\">\n                    <\/div>\n                    <div>\n                        <h4 class=\"font-serif text-sm font-bold leading-tight mb-1 group-hover:text-accent text-gray-800 m-0\">\u300c\u30b9\u30cb\u30fc\u30ab\u30fc\u300d\u3067\u5927\u4eba\u304c\u8f1d\u304f\u6cd5\u5247<\/h4>\n                        <span class=\"text-[10px] text-gray-400\">12.5k views<\/span>\n                    <\/div>\n                <\/a>\n                \n                <a href=\"https:\/\/mikata--magazine.com\/tag\/declutter\/\" class=\"w-64 bg-white border border-gray-100 rounded-lg p-3 flex gap-4 items-center snap-center relative group hover:shadow-md transition-all cursor-pointer fade-up no-underline delay-100\">\n                    <span class=\"absolute -top-2 -left-2 w-6 h-6 bg-gray-200 text-gray-600 font-bold flex items-center justify-center rounded-full text-xs shadow z-20\">2<\/span>\n                    <div class=\"w-16 h-16 rounded overflow-hidden shrink-0\">\n                        <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1506784983877-45594efa4cbe?auto=format&#038;fit=crop&#038;w=200&#038;q=80\" class=\"w-full h-full object-cover\" alt=\"Trend\">\n                    <\/div>\n                    <div>\n                        <h4 class=\"font-serif text-sm font-bold leading-tight mb-1 group-hover:text-accent text-gray-800 m-0\">2\u6708\u4e2d\u306b\u6368\u3066\u308b\u3079\u304d\u30e2\u30ce\u30fb\u30b3\u30c8<\/h4>\n                        <span class=\"text-[10px] text-gray-400\">10.1k views<\/span>\n                    <\/div>\n                <\/a>\n\n                <a href=\"https:\/\/mikata--magazine.com\/tag\/desk-work\/\" class=\"w-64 bg-white border border-gray-100 rounded-lg p-3 flex gap-4 items-center snap-center relative group hover:shadow-md transition-all cursor-pointer fade-up no-underline delay-200\">\n                    <span class=\"absolute -top-2 -left-2 w-6 h-6 bg-gray-200 text-gray-600 font-bold flex items-center justify-center rounded-full text-xs shadow z-20\">3<\/span>\n                    <div class=\"w-16 h-16 rounded overflow-hidden shrink-0\">\n                        <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1515378960530-7c0da6231fb1?auto=format&#038;fit=crop&#038;w=200&#038;q=80\" class=\"w-full h-full object-cover\" alt=\"Trend\">\n                    <\/div>\n                    <div>\n                        <h4 class=\"font-serif text-sm font-bold leading-tight mb-1 group-hover:text-accent text-gray-800 m-0\">PC\u4f5c\u696d\u3067\u76ee\u304c\u75b2\u308c\u306a\u3044\u8a2d\u5b9a\u8853<\/h4>\n                        <span class=\"text-[10px] text-gray-400\">8.9k views<\/span>\n                    <\/div>\n                <\/a>\n\n                <a href=\"https:\/\/mikata--magazine.com\/tag\/zara\/\" class=\"w-64 bg-white border border-gray-100 rounded-lg p-3 flex gap-4 items-center snap-center relative group hover:shadow-md transition-all cursor-pointer fade-up no-underline delay-300\">\n                    <span class=\"absolute -top-2 -left-2 w-6 h-6 bg-gray-200 text-gray-600 font-bold flex items-center justify-center rounded-full text-xs shadow z-20\">4<\/span>\n                    <div class=\"w-16 h-16 rounded overflow-hidden shrink-0\">\n                        <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1483985988355-763728e1935b?auto=format&#038;fit=crop&#038;w=200&#038;q=80\" class=\"w-full h-full object-cover\" alt=\"Trend\">\n                    <\/div>\n                    <div>\n                        <h4 class=\"font-serif text-sm font-bold leading-tight mb-1 group-hover:text-accent text-gray-800 m-0\">ZARA\u306e\u9ad8\u898b\u3048\u6625\u30a2\u30a4\u30c6\u30e05\u9078<\/h4>\n                        <span class=\"text-[10px] text-gray-400\">7.2k views<\/span>\n                    <\/div>\n                <\/a>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <!-- Feature Section (Gray Zone) -->\n    <section class=\"py-20 bg-gray-100 relative z-10 border-y border-gray-200\">\n        <div class=\"container mx-auto px-4\">\n            <div class=\"flex flex-col lg:flex-row gap-12\">\n                <!-- Left: Big Feature -->\n                <div class=\"lg:w-7\/12 fade-up\">\n                    <span class=\"text-accent font-bold text-xs tracking-widest uppercase mb-4 block\">Editor&#8217;s Pick<\/span>\n                    <a href=\"https:\/\/mikata--magazine.com\/tag\/digital-detox\/\" class=\"relative aspect-video rounded-xl overflow-hidden group mb-6 cursor-pointer shadow-lg block no-underline\">\n                        <div class=\"absolute inset-0 bg-black\/10 group-hover:bg-transparent transition-all z-10\"><\/div>\n                        <img decoding=\"async\" src=\"https:\/\/images.pexels.com\/photos\/6893325\/pexels-photo-6893325.jpeg?auto=compress&#038;cs=tinysrgb&#038;w=1260&#038;h=750&#038;dpr=2\" class=\"w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-700\" alt=\"Feature\">\n                        <div class=\"absolute bottom-0 left-0 p-8 z-20 w-full bg-gradient-to-t from-black\/80 via-black\/40 to-transparent text-white\">\n                            <h2 class=\"font-serif text-3xl md:text-5xl font-bold leading-tight mb-2 group-hover:text-accent-light transition-colors text-white\">\u30c7\u30b8\u30bf\u30eb\u30fb\u30c7\u30c8\u30c3\u30af\u30b9\u306e<br>\u65b0\u3057\u3044\u5f62<\/h2>\n                            <p class=\"text-gray-200 hidden md:block\">\u30c6\u30af\u30ce\u30ed\u30b8\u30fc\u3068\u5171\u5b58\u3057\u306a\u304c\u3089\u3001\u5fc3\u306e\u5e73\u7a4f\u3092\u4fdd\u3064\u305f\u3081\u306e\u6700\u65b0\u30e1\u30bd\u30c3\u30c9\u3092\u5fb9\u5e95\u89e3\u8aac\u3002<\/p>\n                        <\/div>\n                    <\/a>\n                <\/div>\n                <!-- Right: List -->\n                <div class=\"lg:w-5\/12 flex flex-col justify-center space-y-6 fade-up\" style=\"transition-delay: 0.2s;\">\n                    <div class=\"flex items-center justify-between pb-2 border-b border-gray-300\">\n                        <h3 class=\"font-serif text-xl text-gray-900 m-0\">\u4eca\u9031\u306e\u6ce8\u76ee\u30c8\u30d4\u30c3\u30af<\/h3>\n                        <span class=\"text-xs text-gray-500\">WEEKLY TOPICS<\/span>\n                    <\/div>\n                    <!-- Topic 1 -->\n                    <a href=\"https:\/\/mikata--magazine.com\/category\/work\/\" class=\"group flex gap-4 items-center no-underline\">\n                        <div class=\"w-24 h-24 shrink-0 rounded-lg overflow-hidden shadow-sm\">\n                            <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1486406146926-c627a92ad1ab?auto=format&#038;fit=crop&#038;w=300&#038;q=80\" class=\"w-full h-full object-cover group-hover:opacity-80 transition-opacity\" alt=\"Topic\">\n                        <\/div>\n                        <div>\n                            <span class=\"text-[10px] text-accent font-bold uppercase\">Work &#038; Money<\/span>\n                            <h4 class=\"font-serif text-lg leading-tight text-gray-800 group-hover:text-gray-500 transition-colors m-0\">\u300c\u597d\u304d\u300d\u3092\u4ed5\u4e8b\u306b\u3059\u308b\u524d\u306b\u77e5\u3063\u3066\u304a\u304f\u3079\u304d\u3053\u3068<\/h4>\n                        <\/div>\n                    <\/a>\n                    <!-- Topic 2 -->\n                    <a href=\"https:\/\/mikata--magazine.com\/category\/style\/\" class=\"group flex gap-4 items-center no-underline\">\n                        <div class=\"w-24 h-24 shrink-0 rounded-lg overflow-hidden shadow-sm\">\n                            <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1522335789203-abd6538d8ad1?auto=format&#038;fit=crop&#038;w=300&#038;q=80\" class=\"w-full h-full object-cover group-hover:opacity-80 transition-opacity\" alt=\"Topic\">\n                        <\/div>\n                        <div>\n                            <span class=\"text-[10px] text-accent font-bold uppercase\">Beauty<\/span>\n                            <h4 class=\"font-serif text-lg leading-tight text-gray-800 group-hover:text-gray-500 transition-colors m-0\">30\u4ee3\u304b\u3089\u306e\u30b9\u30ad\u30f3\u30b1\u30a2\u9769\u547d\u3002\u6210\u5206\u3067\u9078\u3076\u7f8e\u5bb9\u6db2<\/h4>\n                        <\/div>\n                    <\/a>\n                    <!-- Topic 3 -->\n                    <a href=\"https:\/\/mikata--magazine.com\/category\/mind\/\" class=\"group flex gap-4 items-center no-underline\">\n                        <div class=\"w-24 h-24 shrink-0 rounded-lg overflow-hidden shadow-sm\">\n                            <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1499209974431-9dddcece7f88?auto=format&#038;fit=crop&#038;w=300&#038;q=80\" class=\"w-full h-full object-cover group-hover:opacity-80 transition-opacity\" alt=\"Topic\">\n                        <\/div>\n                        <div>\n                            <span class=\"text-[10px] text-accent font-bold uppercase\">Mind<\/span>\n                            <h4 class=\"font-serif text-lg leading-tight text-gray-800 group-hover:text-gray-500 transition-colors m-0\">\u300cNO\u300d\u3068\u8a00\u3048\u308b\u79c1\u306b\u306a\u308b\u305f\u3081\u306e\u7df4\u7fd2\u5e33<\/h4>\n                        <\/div>\n                    <\/a>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <!-- Category Pills & Search Tags -->\n    <section class=\"py-16 relative z-10\">\n        <div class=\"container mx-auto px-4 text-center fade-up\">\n            <h3 class=\"font-serif text-2xl mb-8 text-gray-900 m-0\">Categories<\/h3>\n            \n            <div class=\"flex flex-wrap justify-center gap-3 mb-10\">\n                <a href=\"https:\/\/mikata--magazine.com\/category\/love\/\" class=\"bg-white border border-gray-200 text-gray-600 hover:bg-accent hover:text-white hover:border-accent transition-all duration-300 px-6 py-3 rounded-full font-bold tracking-widest text-sm uppercase no-underline shadow-sm\">Love<\/a>\n                <a href=\"https:\/\/mikata--magazine.com\/category\/style\/\" class=\"bg-white border border-gray-200 text-gray-600 hover:bg-accent hover:text-white hover:border-accent transition-all duration-300 px-6 py-3 rounded-full font-bold tracking-widest text-sm uppercase no-underline shadow-sm\">Style<\/a>\n                <a href=\"https:\/\/mikata--magazine.com\/category\/mind\/\" class=\"bg-white border border-gray-200 text-gray-600 hover:bg-accent hover:text-white hover:border-accent transition-all duration-300 px-6 py-3 rounded-full font-bold tracking-widest text-sm uppercase no-underline shadow-sm\">Mind<\/a>\n                <a href=\"https:\/\/mikata--magazine.com\/category\/life\/\" class=\"bg-white border border-gray-200 text-gray-600 hover:bg-accent hover:text-white hover:border-accent transition-all duration-300 px-6 py-3 rounded-full font-bold tracking-widest text-sm uppercase no-underline shadow-sm\">Life<\/a>\n                <a href=\"https:\/\/mikata--magazine.com\/category\/work\/\" class=\"bg-white border border-gray-200 text-gray-600 hover:bg-accent hover:text-white hover:border-accent transition-all duration-300 px-6 py-3 rounded-full font-bold tracking-widest text-sm uppercase no-underline shadow-sm\">Work<\/a>\n            <\/div>\n\n            <!-- [B] QUICK TEST -->\n            <div class=\"max-w-4xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-4 mb-10 fade-up\" style=\"transition-delay: 0.1s;\">\n                <a href=\"https:\/\/mikata--magazine.com\/tag\/self-check\/\" class=\"bg-white border border-gray-200 hover:border-accent hover:shadow-md p-4 rounded-xl flex items-center gap-4 transition-all group text-left no-underline shadow-sm\">\n                    <div class=\"w-12 h-12 bg-lime-100 text-accent rounded-full flex items-center justify-center shrink-0 group-hover:bg-accent group-hover:text-white transition-colors\">\n                        <i data-lucide=\"check-circle\" class=\"w-6 h-6\"><\/i>\n                    <\/div>\n                    <div>\n                        <span class=\"text-[10px] text-gray-400 uppercase tracking-widest block mb-0.5\">Quick Test<\/span>\n                        <h4 class=\"font-bold text-gray-800 group-hover:text-accent transition-colors m-0\">\u81ea\u5df1\u80af\u5b9a\u611f\u30df\u30cb\u8a3a\u65ad\uff083\u5206\uff09<\/h4>\n                    <\/div>\n                    <i data-lucide=\"chevron-right\" class=\"w-5 h-5 ml-auto opacity-30 text-black\"><\/i>\n                <\/a>\n\n                <a href=\"https:\/\/mikata--magazine.com\/tag\/love-check\/\" class=\"bg-white border border-gray-200 hover:border-pink-400 hover:shadow-md p-4 rounded-xl flex items-center gap-4 transition-all group text-left no-underline shadow-sm\">\n                    <div class=\"w-12 h-12 bg-pink-100 text-pink-500 rounded-full flex items-center justify-center shrink-0 group-hover:bg-pink-500 group-hover:text-white transition-colors\">\n                        <i data-lucide=\"heart-pulse\" class=\"w-6 h-6\"><\/i>\n                    <\/div>\n                    <div>\n                        <span class=\"text-[10px] text-gray-400 uppercase tracking-widest block mb-0.5\">Quick Test<\/span>\n                        <h4 class=\"font-bold text-gray-800 group-hover:text-pink-500 transition-colors m-0\">\u604b\u611b\u300c\u304a\u75b2\u308c\u300d\u30bf\u30a4\u30d7\u30c1\u30a7\u30c3\u30af<\/h4>\n                    <\/div>\n                    <i data-lucide=\"chevron-right\" class=\"w-5 h-5 ml-auto opacity-30 text-black\"><\/i>\n                <\/a>\n            <\/div>\n\n            <div class=\"flex flex-wrap justify-center gap-2 text-xs text-gray-400\">\n                <span class=\"text-gray-500\">Popular Tags:<\/span>\n                <a href=\"https:\/\/mikata--magazine.com\/tag\/self-love\/\" class=\"hover:text-accent no-underline text-gray-400 transition-colors\">#\u81ea\u5df1\u80af\u5b9a\u611f<\/a>\n                <a href=\"https:\/\/mikata--magazine.com\/tag\/fashion\/\" class=\"hover:text-accent no-underline text-gray-400 transition-colors\">#\u57a2\u629c\u3051<\/a>\n                <a href=\"https:\/\/mikata--magazine.com\/tag\/minimalist\/\" class=\"hover:text-accent no-underline text-gray-400 transition-colors\">#\u30df\u30cb\u30de\u30ea\u30b9\u30c8<\/a>\n                <a href=\"https:\/\/mikata--magazine.com\/tag\/anxiety\/\" class=\"hover:text-accent no-underline text-gray-400 transition-colors\">#\u4e0d\u5b89\u89e3\u6d88<\/a>\n                <a href=\"https:\/\/mikata--magazine.com\/tag\/solo-time\/\" class=\"hover:text-accent no-underline text-gray-400 transition-colors\">#\u3072\u3068\u308a\u6642\u9593<\/a>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <!-- Column Section -->\n    <section class=\"py-16 bg-white relative z-10\">\n        <div class=\"container mx-auto px-4\">\n            <div class=\"flex justify-between items-end mb-10 fade-up\">\n                <h2 class=\"font-serif text-3xl text-gray-900 m-0\">Columns<\/h2>\n                <span class=\"text-xs text-gray-500 uppercase tracking-widest\">Regular Series<\/span>\n            <\/div>\n\n            <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6\">\n                <!-- Col 1 -->\n                <div class=\"bg-gray-50 border border-gray-100 p-6 rounded-xl hover:bg-white hover:shadow-lg transition-all cursor-pointer fade-up\">\n                    <span class=\"text-accent font-bold text-[10px] uppercase tracking-wider mb-2 block\">Weekly<\/span>\n                    <h3 class=\"font-serif text-xl font-bold mb-3 text-gray-800\">3\u5206\u3067\u6574\u3046<br>\u30de\u30a4\u30f3\u30c9\u30d5\u30eb\u30cd\u30b9<\/h3>\n                    <p class=\"text-sm text-gray-500 leading-relaxed mb-4\">\u5fd9\u3057\u3044\u671d\u3067\u3082\u3001\u96fb\u8eca\u306e\u4e2d\u3067\u3082\u3067\u304d\u308b\u300c\u547c\u5438\u300d\u306e\u30c6\u30af\u30cb\u30c3\u30af\u3002<\/p>\n                    <div class=\"text-right\">\n                        <i data-lucide=\"arrow-right-circle\" class=\"w-6 h-6 ml-auto opacity-30 text-black\"><\/i>\n                    <\/div>\n                <\/div>\n                <!-- Col 2 -->\n                <div class=\"bg-gray-50 border border-gray-100 p-6 rounded-xl hover:bg-white hover:shadow-lg transition-all cursor-pointer fade-up\" style=\"transition-delay: 0.1s;\">\n                    <span class=\"text-accent font-bold text-[10px] uppercase tracking-wider mb-2 block\">Essay<\/span>\n                    <h3 class=\"font-serif text-xl font-bold mb-3 text-gray-800\">\u604b\u611b\u306e\u8aa4\u89e3\u3092<br>\u307b\u3069\u304f<\/h3>\n                    <p class=\"text-sm text-gray-500 leading-relaxed mb-4\">\u300c\u611b\u3055\u308c\u308b\u300d\u3088\u308a\u3082\u300c\u611b\u3059\u308b\u300d\u307b\u3046\u304c\u5e78\u305b\u306a\u7406\u7531\u3002<\/p>\n                    <div class=\"text-right\">\n                        <i data-lucide=\"arrow-right-circle\" class=\"w-6 h-6 ml-auto opacity-30 text-black\"><\/i>\n                    <\/div>\n                <\/div>\n                <!-- Col 3 -->\n                <div class=\"bg-gray-50 border border-gray-100 p-6 rounded-xl hover:bg-white hover:shadow-lg transition-all cursor-pointer fade-up\" style=\"transition-delay: 0.2s;\">\n                    <span class=\"text-accent font-bold text-[10px] uppercase tracking-wider mb-2 block\">Guide<\/span>\n                    <h3 class=\"font-serif text-xl font-bold mb-3 text-gray-800\">\u5927\u4eba\u306e<br>\u57a2\u629c\u3051\u5b9a\u756a<\/h3>\n                    <p class=\"text-sm text-gray-500 leading-relaxed mb-4\">\u30e6\u30cb\u30af\u30ed\u3068\u30cf\u30a4\u30d6\u30e9\u30f3\u30c9\u3092\u6df7\u305c\u3066\u4f5c\u308b\u3001\u8ce2\u3044\u30af\u30ed\u30fc\u30bc\u30c3\u30c8\u3002<\/p>\n                    <div class=\"text-right\">\n                        <i data-lucide=\"arrow-right-circle\" class=\"w-6 h-6 ml-auto opacity-30 text-black\"><\/i>\n                    <\/div>\n                <\/div>\n                <!-- Col 4 -->\n                <div class=\"bg-gray-50 border border-gray-100 p-6 rounded-xl hover:bg-white hover:shadow-lg transition-all cursor-pointer fade-up\" style=\"transition-delay: 0.3s;\">\n                    <span class=\"text-accent font-bold text-[10px] uppercase tracking-wider mb-2 block\">Words<\/span>\n                    <h3 class=\"font-serif text-xl font-bold mb-3 text-gray-800\">\u81ea\u5206\u306b\u512a\u3057\u3044<br>\u8a00\u3044\u63db\u3048\u56f3\u9451<\/h3>\n                    <p class=\"text-sm text-gray-500 leading-relaxed mb-4\">\u300c\u3054\u3081\u3093\u306a\u3055\u3044\u300d\u3092\u300c\u3042\u308a\u304c\u3068\u3046\u300d\u306b\u5909\u3048\u308b\u3060\u3051\u3067\u4e16\u754c\u304c\u5909\u308f\u308b\u3002<\/p>\n                    <div class=\"text-right\">\n                        <i data-lucide=\"arrow-right-circle\" class=\"w-6 h-6 ml-auto opacity-30 text-black\"><\/i>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <!-- Series Icons -->\n    <section class=\"py-16 relative z-10 bg-white\">\n        <div class=\"container mx-auto px-4\">\n            <h3 class=\"text-center font-serif text-2xl mb-12 fade-up text-gray-900 m-0\">Series<\/h3>\n            <div class=\"grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-8 justify-items-center\">\n                <a href=\"https:\/\/mikata--magazine.com\/tag\/morning\/\" class=\"flex flex-col items-center gap-3 group cursor-pointer fade-up no-underline\">\n                    <div class=\"w-20 h-20 rounded-full overflow-hidden border border-gray-200 group-hover:border-accent transition-all p-1 shadow-sm\">\n                        <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1495474472287-4d71bcdd2085?auto=format&#038;fit=crop&#038;w=300&#038;q=80\" class=\"w-full h-full rounded-full object-cover grayscale group-hover:grayscale-0 transition-all\" alt=\"Icon\">\n                    <\/div>\n                    <span class=\"text-xs font-bold tracking-widest text-gray-500 group-hover:text-black\">\u6574\u3048\u308b\u671d<\/span>\n                <\/a>\n                <a href=\"https:\/\/mikata--magazine.com\/tag\/fashion-black\/\" class=\"flex flex-col items-center gap-3 group cursor-pointer fade-up no-underline\" style=\"transition-delay: 0.1s;\">\n                    <div class=\"w-20 h-20 rounded-full overflow-hidden border border-gray-200 group-hover:border-accent transition-all p-1 shadow-sm\">\n                        <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1550614000-4b9519e02d48?auto=format&#038;fit=crop&#038;w=300&#038;q=80\" class=\"w-full h-full rounded-full object-cover grayscale group-hover:grayscale-0 transition-all\" alt=\"Icon\">\n                    <\/div>\n                    <span class=\"text-xs font-bold tracking-widest text-gray-500 group-hover:text-black\">\u5927\u4eba\u306e\u9ed2<\/span>\n                <\/a>\n                 <a href=\"https:\/\/mikata--magazine.com\/tag\/confidence\/\" class=\"flex flex-col items-center gap-3 group cursor-pointer fade-up no-underline\" style=\"transition-delay: 0.2s;\">\n                    <div class=\"w-20 h-20 rounded-full overflow-hidden border border-gray-200 group-hover:border-accent transition-all p-1 shadow-sm\">\n                        <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1534528741775-53994a69daeb?auto=format&#038;fit=crop&#038;w=300&#038;q=80\" class=\"w-full h-full rounded-full object-cover grayscale group-hover:grayscale-0 transition-all\" alt=\"Icon\">\n                    <\/div>\n                    <span class=\"text-xs font-bold tracking-widest text-gray-500 group-hover:text-black\">\u81ea\u4fe1\u3092\u4f5c\u308b<\/span>\n                <\/a>\n                <a href=\"https:\/\/mikata--magazine.com\/tag\/emotion\/\" class=\"flex flex-col items-center gap-3 group cursor-pointer fade-up no-underline\" style=\"transition-delay: 0.3s;\">\n                    <div class=\"w-20 h-20 rounded-full overflow-hidden border border-gray-200 group-hover:border-accent transition-all p-1 shadow-sm\">\n                        <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1518837695005-2083093ee35b?auto=format&#038;fit=crop&#038;w=300&#038;q=80\" class=\"w-full h-full rounded-full object-cover grayscale group-hover:grayscale-0 transition-all\" alt=\"Icon\">\n                    <\/div>\n                    <span class=\"text-xs font-bold tracking-widest text-gray-500 group-hover:text-black\">\u611f\u60c5\u306e\u6271\u3044\u65b9<\/span>\n                <\/a>\n                <a href=\"https:\/\/mikata--magazine.com\/tag\/travel\/\" class=\"flex flex-col items-center gap-3 group cursor-pointer fade-up no-underline\" style=\"transition-delay: 0.4s;\">\n                    <div class=\"w-20 h-20 rounded-full overflow-hidden border border-gray-200 group-hover:border-accent transition-all p-1 shadow-sm\">\n                        <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1469854523086-cc02fe5d8800?auto=format&#038;fit=crop&#038;w=300&#038;q=80\" class=\"w-full h-full rounded-full object-cover grayscale group-hover:grayscale-0 transition-all\" alt=\"Icon\">\n                    <\/div>\n                    <span class=\"text-xs font-bold tracking-widest text-gray-500 group-hover:text-black\">\u3072\u3068\u308a\u65c5<\/span>\n                <\/a>\n                <a href=\"https:\/\/mikata--magazine.com\/tag\/digital-zen\/\" class=\"flex flex-col items-center gap-3 group cursor-pointer fade-up no-underline\" style=\"transition-delay: 0.5s;\">\n                    <div class=\"w-20 h-20 rounded-full overflow-hidden border border-gray-200 group-hover:border-accent transition-all p-1 shadow-sm\">\n                        <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1528722828814-77b9b83aafb2?auto=format&#038;fit=crop&#038;w=300&#038;q=80\" class=\"w-full h-full rounded-full object-cover grayscale group-hover:grayscale-0 transition-all\" alt=\"Icon\">\n                    <\/div>\n                    <span class=\"text-xs font-bold tracking-widest text-gray-500 group-hover:text-black\">\u30c7\u30b8\u30bf\u30eb\u7985<\/span>\n                <\/a>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <!-- [D] VOICES -->\n    <section class=\"py-16 bg-gray-50 relative z-10\">\n        <div class=\"container mx-auto px-4 fade-up\">\n            <h3 class=\"font-serif text-2xl mb-8 text-center text-gray-900 m-0\">Voices <span class=\"text-xs font-sans text-gray-500 block mt-1 tracking-widest\">\u8aad\u8005\u306e\u58f0\u30fb\u4f53\u9a13\u8ac7<\/span><\/h3>\n            \n            <div class=\"grid grid-cols-1 md:grid-cols-3 gap-6\">\n                <div class=\"bg-white border border-gray-100 p-6 rounded-xl relative shadow-sm\">\n                    <i data-lucide=\"quote\" class=\"w-8 h-8 text-accent opacity-30 absolute top-4 left-4\"><\/i>\n                    <p class=\"text-sm text-gray-600 mb-4 mt-6 leading-relaxed\">\n                        \u300c\u81ea\u5206\u3092\u597d\u304d\u306b\u306a\u308b\u300d\u3063\u3066\u96e3\u3057\u3044\u3068\u601d\u3063\u3066\u305f\u3051\u3069\u3001\u8a18\u4e8b\u306b\u3042\u3063\u305f\u300e3\u5206\u306e\u5100\u5f0f\u300f\u3092\u8a66\u3057\u305f\u3089\u3001\u5c11\u3057\u305a\u3064\u6c17\u6301\u3061\u304c\u697d\u306b\u306a\u308a\u307e\u3057\u305f\u3002\n                    <\/p>\n                    <div class=\"flex items-center gap-3\">\n                        <div class=\"w-8 h-8 rounded-full bg-gray-200\"><\/div>\n                        <div>\n                            <span class=\"text-xs font-bold block text-gray-800\">A.K.\u3055\u3093<\/span>\n                            <span class=\"text-[10px] text-gray-500\">28\u6b73 \/ \u4f1a\u793e\u54e1<\/span>\n                        <\/div>\n                    <\/div>\n                <\/div>\n                <div class=\"bg-white border border-gray-100 p-6 rounded-xl relative shadow-sm\">\n                    <i data-lucide=\"quote\" class=\"w-8 h-8 text-accent opacity-30 absolute top-4 left-4\"><\/i>\n                    <p class=\"text-sm text-gray-600 mb-4 mt-6 leading-relaxed\">\n                        \u9ed2\u30b3\u30fc\u30c7\u306e\u629c\u3051\u611f\u30c6\u30af\u30cb\u30c3\u30af\u3001\u76ee\u304b\u3089\u9c57\u3067\u3057\u305f\u3002\u660e\u65e5\u304b\u3089\u306e\u670d\u9078\u3073\u304c\u697d\u3057\u307f\u306b\u306a\u308a\u305d\u3046\u3067\u3059\u3002\n                    <\/p>\n                    <div class=\"flex items-center gap-3\">\n                        <div class=\"w-8 h-8 rounded-full bg-gray-200\"><\/div>\n                        <div>\n                            <span class=\"text-xs font-bold block text-gray-800\">Y.M.\u3055\u3093<\/span>\n                            <span class=\"text-[10px] text-gray-500\">32\u6b73 \/ \u30c7\u30b6\u30a4\u30ca\u30fc<\/span>\n                        <\/div>\n                    <\/div>\n                <\/div>\n                <div class=\"bg-white border border-gray-100 p-6 rounded-xl relative shadow-sm\">\n                    <i data-lucide=\"quote\" class=\"w-8 h-8 text-accent opacity-30 absolute top-4 left-4\"><\/i>\n                    <p class=\"text-sm text-gray-600 mb-4 mt-6 leading-relaxed\">\n                        \u75b2\u308c\u3066\u3044\u308b\u6642\u306b\u300c\u4f55\u3082\u3057\u306a\u3044\u6642\u9593\u300d\u3092\u80af\u5b9a\u3057\u3066\u304f\u308c\u308bMIKATA\u306e\u8a18\u4e8b\u306b\u6551\u308f\u308c\u3066\u3044\u307e\u3059\u3002\n                    <\/p>\n                    <div class=\"flex items-center gap-3\">\n                        <div class=\"w-8 h-8 rounded-full bg-gray-200\"><\/div>\n                        <div>\n                            <span class=\"text-xs font-bold block text-gray-800\">S.T.\u3055\u3093<\/span>\n                            <span class=\"text-[10px] text-gray-500\">26\u6b73 \/ \u516c\u52d9\u54e1<\/span>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <!-- Special Feature (Big 2 Col) -->\n    <section class=\"py-20 bg-white relative z-10 border-t border-gray-100\">\n        <div class=\"container mx-auto px-4\">\n            <h2 class=\"font-serif text-3xl md:text-5xl text-center mb-16 fade-up text-gray-900 m-0\">Special Features<\/h2>\n            \n            <div class=\"grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-0 border border-gray-100 rounded-2xl overflow-hidden bg-white shadow-xl fade-up\">\n                \n                <!-- Left Special -->\n                <div class=\"relative group h-[400px] md:h-[500px] border-b md:border-b-0 md:border-r border-gray-100 overflow-hidden cursor-pointer\">\n                    <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1618221195710-dd6b41faaea6?auto=format&#038;fit=crop&#038;w=1200&#038;q=80\" class=\"absolute inset-0 w-full h-full object-cover opacity-90 group-hover:scale-105 transition-all duration-700\" alt=\"Special A\">\n                    <div class=\"absolute inset-0 flex flex-col justify-end p-8 md:p-12 bg-gradient-to-t from-black\/80 via-black\/30 to-transparent\">\n                        <span class=\"bg-accent text-white inline-block px-3 py-1 text-xs font-bold uppercase mb-4 w-max shadow-sm\">Interior<\/span>\n                        <h3 class=\"font-serif text-3xl md:text-4xl font-bold mb-4 text-white drop-shadow-md\">\u90e8\u5c4b\u304c\u6559\u3048\u3066\u304f\u308c\u308b\u3001<br>\u672c\u5f53\u306e\u81ea\u5206\u3002<\/h3>\n                        <p class=\"text-white line-clamp-2 drop-shadow-md\">\u30e2\u30ce\u3092\u6e1b\u3089\u3059\u3060\u3051\u304c\u6b63\u89e3\u3058\u3083\u306a\u3044\u3002\u597d\u304d\u306a\u3082\u306e\u306b\u56f2\u307e\u308c\u308b\u300c\u30de\u30ad\u30b7\u30de\u30ea\u30b9\u30c8\u300d\u3068\u3044\u3046\u751f\u304d\u65b9\u3002<\/p>\n                    <\/div>\n                <\/div>\n\n                <!-- Right Special -->\n                <div class=\"relative group h-[400px] md:h-[500px] overflow-hidden cursor-pointer\">\n                    <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1494790108377-be9c29b29330?auto=format&#038;fit=crop&#038;w=1200&#038;q=80\" class=\"absolute inset-0 w-full h-full object-cover opacity-90 group-hover:scale-105 transition-all duration-700\" alt=\"Special B\">\n                    <div class=\"absolute inset-0 flex flex-col justify-end p-8 md:p-12 bg-gradient-to-t from-black\/80 via-black\/30 to-transparent\">\n                        <span class=\"bg-white text-black inline-block px-3 py-1 text-xs font-bold uppercase mb-4 w-max shadow-sm\">Psychology<\/span>\n                        <h3 class=\"font-serif text-3xl md:text-4xl font-bold mb-4 text-white drop-shadow-md\">\u300c\u3044\u3044\u4eba\u300d\u3092\u3084\u3081\u308b<br>\u52c7\u6c17\u306e\u51fa\u3057\u65b9\u3002<\/h3>\n                        <p class=\"text-white line-clamp-2 drop-shadow-md\">\u4ed6\u4eba\u306e\u671f\u5f85\u306b\u5fdc\u3048\u308b\u4eba\u751f\u306f\u3082\u3046\u7d42\u308f\u308a\u3002\u81ea\u5206\u306e\u5fc3\u306e\u58f0\u3092\u8074\u304f\u305f\u3081\u306e\u30b9\u30c6\u30c3\u30d7\u30d0\u30a4\u30b9\u30c6\u30c3\u30d7\u3002<\/p>\n                    <\/div>\n                <\/div>\n\n            <\/div>\n            \n            <div class=\"text-center mt-12\">\n                <a href=\"https:\/\/mikata--magazine.com\/tag\/special-issue\/\" class=\"inline-block border border-gray-300 text-gray-800 px-10 py-3 rounded-full hover:bg-black hover:text-white transition-all duration-300 tracking-widest text-sm no-underline\">VIEW MORE<\/a>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <!-- [E] CONTRIBUTORS -->\n    <section class=\"py-16 relative z-10 bg-white\">\n        <div class=\"container mx-auto px-4 fade-up\">\n            <h3 class=\"font-serif text-center text-xl mb-8 text-gray-900 m-0\">Contributors<\/h3>\n            <div class=\"flex flex-wrap justify-center gap-8\">\n                <a href=\"https:\/\/mikata--magazine.com\/about\/\" class=\"flex flex-col items-center gap-2 group cursor-pointer no-underline\">\n                    <div class=\"w-16 h-16 rounded-full overflow-hidden border border-gray-200 group-hover:border-accent transition-all\">\n                        <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1438761681033-6461ffad8d80?auto=format&#038;fit=crop&#038;w=200&#038;q=80\" class=\"w-full h-full object-cover\" alt=\"Editor\">\n                    <\/div>\n                    <span class=\"text-xs font-bold text-gray-800\">M. Tanaka<\/span>\n                    <span class=\"text-[10px] text-gray-500\">Chief Editor<\/span>\n                <\/a>\n                 <a href=\"https:\/\/mikata--magazine.com\/about\/\" class=\"flex flex-col items-center gap-2 group cursor-pointer no-underline\">\n                    <div class=\"w-16 h-16 rounded-full overflow-hidden border border-gray-200 group-hover:border-accent transition-all\">\n                        <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1472099645785-5658abf4ff4e?auto=format&#038;fit=crop&#038;w=200&#038;q=80\" class=\"w-full h-full object-cover\" alt=\"Editor\">\n                    <\/div>\n                    <span class=\"text-xs font-bold text-gray-800\">K. Sato<\/span>\n                    <span class=\"text-[10px] text-gray-500\">Style Director<\/span>\n                <\/a>\n                <a href=\"https:\/\/mikata--magazine.com\/about\/\" class=\"flex flex-col items-center gap-2 group cursor-pointer no-underline\">\n                    <div class=\"w-16 h-16 rounded-full overflow-hidden border border-gray-200 group-hover:border-accent transition-all\">\n                        <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1544005313-94ddf0286df2?auto=format&#038;fit=crop&#038;w=200&#038;q=80\" class=\"w-full h-full object-cover\" alt=\"Editor\">\n                    <\/div>\n                    <span class=\"text-xs font-bold text-gray-800\">E. Suzuki<\/span>\n                    <span class=\"text-[10px] text-gray-500\">Wellness Coach<\/span>\n                <\/a>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <!-- Newsletter -->\n    <section class=\"py-20 relative z-10 bg-gray-50\">\n        <div class=\"container mx-auto px-4\">\n            <div class=\"max-w-2xl mx-auto bg-white p-10 rounded-2xl text-center fade-up shadow-xl border border-gray-100\">\n                <i data-lucide=\"mail\" class=\"w-8 h-8 mx-auto mb-6 text-accent\"><\/i>\n                <h3 class=\"font-serif text-2xl md:text-3xl font-bold mb-4 text-gray-900 m-0\">Newsletter<\/h3>\n                <p class=\"text-gray-500 mb-8\">MIKATA\u304b\u3089\u90311\u3067\u201c\u81ea\u5206\u306e\u5473\u65b9\u3092\u5897\u3084\u3059\u30d2\u30f3\u30c8\u201d\u3092\u9001\u308a\u307e\u3059\u3002<br>\u767b\u9332\u306f\u7121\u6599\u3067\u3059\u3002<\/p>\n                \n                <form class=\"flex flex-col md:flex-row gap-4 mb-4\">\n                    <input type=\"email\" placeholder=\"\u30e1\u30fc\u30eb\u30a2\u30c9\u30ec\u30b9\u3092\u5165\u529b\" class=\"flex-1 bg-gray-50 border border-gray-200 rounded-full px-6 py-3 text-gray-800 placeholder-gray-400 focus:outline-none focus:border-accent focus:ring-1 focus:ring-accent transition-colors\">\n                    <button type=\"submit\" class=\"bg-black text-white font-bold px-8 py-3 rounded-full hover:bg-accent transition-colors border-none cursor-pointer\">\u53d7\u3051\u53d6\u308b<\/button>\n                <\/form>\n                <p class=\"text-xs text-gray-400\">\u89e3\u9664\u306f\u3044\u3064\u3067\u3082\u53ef\u80fd\u3067\u3059\u3002<\/p>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <!-- [F] PARTNERS \/ RECOMMENDS -->\n    <section class=\"py-12 border-t border-gray-200 bg-white relative z-10\">\n        <div class=\"container mx-auto px-4 fade-up\">\n            <div class=\"flex items-center justify-between mb-6\">\n                <h3 class=\"font-serif text-sm text-gray-400 m-0\">Editor&#8217;s Essentials<\/h3>\n                <a href=\"https:\/\/mikata--magazine.com\/items\/\" class=\"text-xs text-gray-500 hover:text-black no-underline\">View All<\/a>\n            <\/div>\n            <div class=\"grid grid-cols-2 md:grid-cols-4 gap-4\">\n                <a href=\"#\" class=\"group block no-underline\">\n                    <div class=\"aspect-square bg-gray-100 rounded-lg overflow-hidden mb-2\">\n                        <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1544716278-ca5e3f4abd8c?auto=format&#038;fit=crop&#038;w=300&#038;q=80\" class=\"w-full h-full object-cover group-hover:opacity-80 transition-opacity\" alt=\"Book\">\n                    <\/div>\n                    <span class=\"text-xs text-gray-500 group-hover:text-black block truncate\">Mindful Living Book<\/span>\n                <\/a>\n                 <a href=\"#\" class=\"group block no-underline\">\n                    <div class=\"aspect-square bg-gray-100 rounded-lg overflow-hidden mb-2\">\n                        <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1608571423902-eed4a5e84d85?auto=format&#038;fit=crop&#038;w=300&#038;q=80\" class=\"w-full h-full object-cover group-hover:opacity-80 transition-opacity\" alt=\"Aroma\">\n                    <\/div>\n                    <span class=\"text-xs text-gray-500 group-hover:text-black block truncate\">Organic Aroma Oil<\/span>\n                <\/a>\n                <a href=\"#\" class=\"group block no-underline\">\n                    <div class=\"aspect-square bg-gray-100 rounded-lg overflow-hidden mb-2\">\n                        <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1585336261022-680e295ce3fe?auto=format&#038;fit=crop&#038;w=300&#038;q=80\" class=\"w-full h-full object-cover group-hover:opacity-80 transition-opacity\" alt=\"Coffee\">\n                    <\/div>\n                    <span class=\"text-xs text-gray-500 group-hover:text-black block truncate\">Morning Blend Coffee<\/span>\n                <\/a>\n                <a href=\"#\" class=\"group block no-underline\">\n                    <div class=\"aspect-square bg-gray-100 rounded-lg overflow-hidden mb-2\">\n                        <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1616627547584-bf28ceeec79c?auto=format&#038;fit=crop&#038;w=300&#038;q=80\" class=\"w-full h-full object-cover group-hover:opacity-80 transition-opacity\" alt=\"Planner\">\n                    <\/div>\n                    <span class=\"text-xs text-gray-500 group-hover:text-black block truncate\">Self-Love Planner<\/span>\n                <\/a>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <!-- Footer -->\n    <footer class=\"py-12 border-t border-gray-200 bg-gray-50 relative z-10 text-sm text-gray-600\">\n        <div class=\"container mx-auto px-4 flex flex-col md:flex-row justify-between items-center gap-8\">\n            <div class=\"flex items-center gap-2\">\n                <span class=\"font-serif text-2xl font-bold tracking-tighter text-black\">MIKATA<\/span>\n                <span class=\"text-xs text-gray-500 mt-2\">\u00a9 2025 MIKATA Inc.<\/span>\n            <\/div>\n            <nav class=\"flex gap-6 text-gray-500\">\n                <a href=\"https:\/\/mikata--magazine.com\/contact\/\" class=\"hover:text-black transition-colors no-underline\">\u304a\u554f\u3044\u5408\u308f\u305b<\/a>\n                <a href=\"https:\/\/mikata--magazine.com\/privacy-policy\/\" class=\"hover:text-black transition-colors no-underline\">\u30d7\u30e9\u30a4\u30d0\u30b7\u30fc\u30dd\u30ea\u30b7\u30fc<\/a>\n                <a href=\"https:\/\/mikata--magazine.com\/about\/\" class=\"hover:text-black transition-colors no-underline\">\u904b\u55b6\u4f1a\u793e<\/a>\n            <\/nav>\n            <div class=\"flex gap-4\">\n                <a href=\"#\" class=\"w-10 h-10 rounded-full border border-gray-300 flex items-center justify-center hover:bg-black hover:text-white transition-colors text-gray-400 hover:border-black no-underline\"><i data-lucide=\"instagram\" class=\"w-4 h-4\"><\/i><\/a>\n                <a href=\"#\" class=\"w-10 h-10 rounded-full border border-gray-300 flex items-center justify-center hover:bg-black hover:text-white transition-colors text-gray-400 hover:border-black no-underline\"><i data-lucide=\"twitter\" class=\"w-4 h-4\"><\/i><\/a>\n                <a href=\"#\" class=\"w-10 h-10 rounded-full border border-gray-300 flex items-center justify-center hover:bg-black hover:text-white transition-colors text-gray-400 hover:border-black no-underline\"><i data-lucide=\"facebook\" class=\"w-4 h-4\"><\/i><\/a>\n            <\/div>\n        <\/div>\n    <\/footer>\n<\/div>\n\n<!-- 4. \u5236\u5fa1\u30b9\u30af\u30ea\u30d7\u30c8 (\u65b0\u7740\u8a18\u4e8b\u81ea\u52d5\u53d6\u5f97\u6a5f\u80fd\u4ed8\u304d) -->\n<script>\n    \/\/ \u30a2\u30a4\u30b3\u30f3\u521d\u671f\u5316\n    lucide.createIcons();\n\n    \/\/ \u30d5\u30a7\u30fc\u30c9\u30a4\u30f3\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\n    const observerOptions = { root: null, rootMargin: '0px', threshold: 0.1 };\n    const observer = new IntersectionObserver((entries, observer) => {\n        entries.forEach(entry => {\n            if (entry.isIntersecting) {\n                entry.target.classList.add('visible');\n            }\n        });\n    }, observerOptions);\n    document.querySelectorAll('.fade-up').forEach(el => { observer.observe(el); });\n\n    \/\/ --- \u3010\u91cd\u8981\u3011\u8a18\u4e8b\u81ea\u52d5\u53d6\u5f97\u30ed\u30b8\u30c3\u30af ---\n    const fetchLatestPosts = async () => {\n        const container = document.getElementById('js-latest-articles');\n        if(!container) return;\n\n        try {\n            \/\/ WordPress\u6a19\u6e96API\u3067\u6700\u65b0\u8a18\u4e8b\u3092\u53d6\u5f97\n            \/\/ \u30c9\u30e1\u30a4\u30f3\u76f4\u4e0b\u306e \/wp-json\/wp\/v2\/posts \u3092\u53e9\u304f\n            const res = await fetch('https:\/\/mikata--magazine.com\/wp-json\/wp\/v2\/posts?_embed&per_page=6');\n            if (!res.ok) throw new Error('API Error');\n            const posts = await res.json();\n\n            if (posts.length === 0) {\n                container.innerHTML = '<p class=\"text-sm text-gray-500 px-4\">\u8a18\u4e8b\u306f\u307e\u3060\u3042\u308a\u307e\u305b\u3093\u3002<\/p>';\n                return;\n            }\n\n            let html = '';\n            posts.forEach(post => {\n                \/\/ \u753b\u50cfURL\u53d6\u5f97\uff08\u306a\u3051\u308c\u3070\u30c0\u30df\u30fc\uff09\n                let imgUrl = 'https:\/\/images.unsplash.com\/photo-1518199266791-5375a83190b7?auto=format&fit=crop&w=600&q=80';\n                if (post._embedded && post._embedded['wp:featuredmedia'] && post._embedded['wp:featuredmedia'][0]) {\n                    imgUrl = post._embedded['wp:featuredmedia'][0].source_url;\n                }\n                \/\/ \u30ab\u30c6\u30b4\u30ea\u540d\u53d6\u5f97\n                let catName = 'New';\n                if (post._embedded && post._embedded['wp:term'] && post._embedded['wp:term'][0] && post._embedded['wp:term'][0][0]) {\n                    catName = post._embedded['wp:term'][0][0].name;\n                }\n                \/\/ \u65e5\u4ed8\n                const date = new Date(post.date).toLocaleDateString('ja-JP', {year: 'numeric', month: '2-digit', day: '2-digit'}).replace(\/\\\/\/g, '.');\n\n                html += `\n                <article class=\"w-[280px] md:w-[320px] snap-center group fade-up\">\n                    <a href=\"${post.link}\" class=\"block no-underline\">\n                        <div class=\"relative aspect-[4\/5] overflow-hidden rounded-lg mb-4 cursor-pointer shadow-sm\">\n                            <span class=\"absolute top-3 left-3 bg-white\/90 text-black text-[10px] font-bold px-2 py-1 uppercase z-10 shadow-sm\">${catName}<\/span>\n                            <img decoding=\"async\" src=\"${imgUrl}\" class=\"w-full h-full object-cover transition-transform duration-500 group-hover:scale-105\" alt=\"${post.title.rendered}\">\n                        <\/div>\n                        <h3 class=\"font-serif text-xl leading-snug text-gray-900 group-hover:text-accent transition-colors cursor-pointer m-0\">${post.title.rendered}<\/h3>\n                        <div class=\"flex justify-between items-center mt-3\">\n                            <span class=\"text-xs text-gray-500\">${date}<\/span>\n                            <span class=\"text-gray-400 hover:text-black bg-transparent border-none\"><i data-lucide=\"bookmark\" class=\"w-4 h-4\"><\/i><\/span>\n                        <\/div>\n                    <\/a>\n                <\/article>\n                `;\n            });\n            container.innerHTML = html;\n            lucide.createIcons(); \/\/ \u30a2\u30a4\u30b3\u30f3\u518d\u63cf\u753b\n            container.querySelectorAll('.fade-up').forEach(el => observer.observe(el)); \/\/ \u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u9069\u7528\n\n        } catch (error) {\n            console.error('Posts fetch error:', error);\n            \/\/ \u30a8\u30e9\u30fc\u6642\u306f\u30c0\u30df\u30fc\u8a18\u4e8b\u3092\u8868\u793a\uff08\u30c7\u30b6\u30a4\u30f3\u5d29\u308c\u9632\u6b62\uff09\n            container.innerHTML = `\n                <p class=\"text-sm text-gray-500 px-4\">\u8a18\u4e8b\u3092\u8aad\u307f\u8fbc\u3081\u307e\u305b\u3093\u3067\u3057\u305f\u3002<br>\u516c\u958b\u6e08\u307f\u306e\u8a18\u4e8b\u304c\u3042\u308b\u304b\u78ba\u8a8d\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n            `;\n        }\n    };\n\n    \/\/ Three.js (\u80cc\u666f\u30a8\u30d5\u30a7\u30af\u30c8) - \u8efd\u91cf\u5316\u7248\n    const initThree = () => {\n        const container = document.getElementById('canvas-container');\n        if(!container) return;\n        const scene = new THREE.Scene();\n        scene.fog = new THREE.FogExp2(0xffffff, 0.002);\n        const camera = new THREE.PerspectiveCamera(75, window.innerWidth \/ window.innerHeight, 0.1, 1000);\n        camera.position.z = 5;\n        const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });\n        renderer.setSize(window.innerWidth, window.innerHeight);\n        renderer.setPixelRatio(window.devicePixelRatio);\n        container.appendChild(renderer.domElement);\n\n        const geometry = new THREE.BoxGeometry(2.5, 2.5, 2.5);\n        const edges = new THREE.EdgesGeometry(geometry);\n        const material = new THREE.LineBasicMaterial({ color: 0x9ca3af, linewidth: 1, transparent: true, opacity: 0.15 });\n        const innerMaterial = new THREE.MeshBasicMaterial({ color: 0x84cc16, transparent: true, opacity: 0.02, side: THREE.DoubleSide });\n        \n        scene.add(new THREE.Mesh(geometry, innerMaterial));\n        scene.add(new THREE.LineSegments(edges, material));\n\n        const particlesGeometry = new THREE.BufferGeometry();\n        const particlesCount = 1200;\n        const posArray = new Float32Array(particlesCount * 3);\n        const colorsArray = new Float32Array(particlesCount * 3);\n        \n        for(let i=0; i<particlesCount*3; i+=3) {\n            posArray[i] = (Math.random()-0.5)*20; posArray[i+1] = (Math.random()-0.5)*20; posArray[i+2] = (Math.random()-0.5)*20;\n            colorsArray[i] = Math.random(); colorsArray[i+1] = Math.random(); colorsArray[i+2] = Math.random(); \/\/ Simple random colors\n        }\n        particlesGeometry.setAttribute('position', new THREE.BufferAttribute(posArray, 3));\n        particlesGeometry.setAttribute('color', new THREE.BufferAttribute(colorsArray, 3));\n        \n        const particlesMesh = new THREE.Points(particlesGeometry, new THREE.PointsMaterial({ size: 0.05, vertexColors: true, transparent: true, opacity: 0.6 }));\n        scene.add(particlesMesh);\n\n        let mouseX = 0, mouseY = 0;\n        document.addEventListener('mousemove', (e) => { mouseX = (e.clientX - window.innerWidth\/2); mouseY = (e.clientY - window.innerHeight\/2); });\n        window.addEventListener('resize', () => { camera.aspect = window.innerWidth\/window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); });\n\n        const animate = () => {\n            requestAnimationFrame(animate);\n            const targetX = mouseX * 0.001; const targetY = mouseY * 0.001;\n            scene.children[0].rotation.y += 0.5 * (targetX - scene.children[0].rotation.y);\n            scene.children[0].rotation.x += 0.5 * (targetY - scene.children[0].rotation.x);\n            scene.children[1].rotation.copy(scene.children[0].rotation);\n            particlesMesh.rotation.y += 0.001;\n            renderer.render(scene, camera);\n        };\n        animate();\n    };\n\n    if (document.readyState === 'loading') {\n        document.addEventListener('DOMContentLoaded', () => { initThree(); fetchLatestPosts(); });\n    } else {\n        initThree(); fetchLatestPosts();\n    }\n<\/script>\n<\/div><\/div>\n","protected":false},"author":1,"featured_media":0,"template":"","meta":{"swell_btn_cv_data":"","footnotes":""},"class_list":["post-12","lp","type-lp","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/mikata--magazine.com\/index.php?rest_route=\/wp\/v2\/lp\/12","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mikata--magazine.com\/index.php?rest_route=\/wp\/v2\/lp"}],"about":[{"href":"https:\/\/mikata--magazine.com\/index.php?rest_route=\/wp\/v2\/types\/lp"}],"author":[{"embeddable":true,"href":"https:\/\/mikata--magazine.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"version-history":[{"count":12,"href":"https:\/\/mikata--magazine.com\/index.php?rest_route=\/wp\/v2\/lp\/12\/revisions"}],"predecessor-version":[{"id":42,"href":"https:\/\/mikata--magazine.com\/index.php?rest_route=\/wp\/v2\/lp\/12\/revisions\/42"}],"wp:attachment":[{"href":"https:\/\/mikata--magazine.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=12"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}