<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
    href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;600;700&family=Noto+Sans+JP:wght@300;400;500;700&family=Noto+Serif+JP:wght@400;600;700&display=swap"
    rel="stylesheet">

<style>
    /* ============================================
       COCOON THEME OVERRIDE (このページ限定)
    ============================================ */
    #header,
    #header-container,
    .logo-header,
    .tagline,
    .navi,
    #breadcrumb,
    #sidebar,
    #footer,
    .sns-share,
    .sns-follow,
    .article-header,
    .article-footer,
    .author-info,
    .related-entries,
    #pager-post-navi,
    #comments,
    .entry-title,
    .date-tags,
    .navi-entry-cards,
    .navi-entries,
    .appeal,
    .appeal-title,
    .appeal-message,
    .appeal-button,
    .appeal-content,
    #notice-area,
    .recommended,
    .main-widget-label,
    .widget-entry-cards,
    .entry-card-wrap,
    .cat-label,
    .eye-catch,
    .admin-panel,
    .go-to-top,
    #mobile-menu-buttons,
    .mobile-menu-buttons,
    .footer-bottom-logo,
    .footer-bottom-content,
    .content-top,
    .content-bottom,
    .under-entry-content,
    .breadcrumb,
    .a-wrap,
    .post-date,
    .post-update,
    .pagination,
    .ranking-items,
    #notification,
    .notice-area,
    .carousel,
    .index-tab-buttons,
    .list-columns,
    .navi-in,
    .header-in,
    .site-name-text {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .main,
    #main,
    .content,
    #content,
    .wrap,
    #wrap,
    .content-in,
    .article,
    #the-content,
    .entry-content,
    .post,
    .page,
    body {
        max-width: 100% !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        background: #0a0a0a !important;
        border: none !important;
        box-shadow: none !important;
    }

    /* キャッシュによる真っ暗バグ強制回避 */
    body.home #main,
    body.home .custom-front-wrapper {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }


    /* ============================================
       DESIGN SYSTEM
    ============================================ */
    .maru-page * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    .maru-page {
        --bg: #0a0a0a;
        --bg2: #111118;
        --bg-card: rgba(22, 22, 32, 0.7);
        --txt: #f5f5f0;
        --txt2: #9a9aaa;
        --gold: #c8a960;
        --gold2: #dcc07a;
        --navy: #1a1a24;
        --sans: 'Noto Sans JP', sans-serif;
        --serif: 'Noto Serif JP', serif;
        --en: 'Cormorant Garamond', serif;

        font-family: var(--sans);
        color: var(--txt);
        background: var(--bg);
        line-height: 1.8;
        -webkit-font-smoothing: antialiased;
        overflow-x: hidden;
    }

    /* ============================================
       NAVIGATION
    ============================================ */
    .maru-nav {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 9999;
        padding: 24px 48px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        transition: all 0.4s ease;
        mix-blend-mode: difference;
    }

    .maru-nav.scrolled {
        background: rgba(10, 10, 10, 0.85);
        backdrop-filter: blur(20px);
        padding: 16px 48px;
        mix-blend-mode: normal;
    }

    .maru-nav-logo {
        font-family: var(--en);
        font-size: 24px;
        font-weight: 600;
        letter-spacing: 0.2em;
        color: var(--txt);
        text-decoration: none;
    }

    .maru-nav-links {
        display: flex;
        gap: 36px;
        align-items: center;
    }

    .maru-nav-links a {
        font-size: 12px;
        letter-spacing: 0.15em;
        color: var(--txt);
        text-decoration: none;
        transition: color 0.3s;
        font-weight: 400;
    }

    .maru-nav-links a:hover {
        color: var(--gold);
    }

    .maru-nav-cta {
        border: 1px solid var(--gold) !important;
        color: var(--gold) !important;
        padding: 10px 28px !important;
        font-size: 11px !important;
        transition: all 0.3s !important;
    }

    .maru-nav-cta:hover {
        background: var(--gold) !important;
        color: var(--bg) !important;
    }

    /* ============================================
       HERO
    ============================================ */
    .maru-hero {
        position: relative;
        height: 100vh;
        min-height: 700px;
        display: flex;
        align-items: center;
        overflow: hidden;
    }

    .maru-hero-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
    }

    .maru-hero-bg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center 20%;
        filter: brightness(0.4) contrast(1.1);
    }

    .maru-hero-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, rgba(10, 10, 10, 0.92) 0%, rgba(10, 10, 10, 0.5) 60%, rgba(10, 10, 10, 0.3) 100%);
        z-index: 2;
    }

    .maru-hero-grain {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0.03;
        z-index: 3;
        pointer-events: none;
        background-image: url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="n"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.7" numOctaves="4" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23n)"/%3E%3C/svg%3E');
    }

    .maru-hero-content {
        position: relative;
        z-index: 10;
        max-width: 800px;
        padding: 0 48px 0 80px;
    }

    .maru-hero-label {
        font-family: var(--en);
        font-size: 13px;
        letter-spacing: 0.4em;
        color: var(--gold);
        font-weight: 400;
        margin-bottom: 32px;
        opacity: 0;
        transform: translateY(20px);
        animation: maruFadeUp 1s 0.3s ease-out forwards;
    }

    .maru-hero-title {
        font-family: var(--serif);
        font-size: clamp(32px, 5.5vw, 72px);
        font-weight: 700;
        line-height: 1.4;
        letter-spacing: 0.08em;
        margin-bottom: 36px;
    }

    .maru-hero-title .maru-line {
        display: block;
        opacity: 0;
        transform: translateY(30px);
    }

    .maru-hero-title .maru-line:nth-child(1) {
        animation: maruFadeUp 1.2s 0.6s ease-out forwards;
    }

    .maru-hero-title .maru-line:nth-child(2) {
        animation: maruFadeUp 1.2s 1.0s ease-out forwards;
    }

    .maru-gold {
        color: var(--gold);
    }

    .maru-hero-desc {
        font-size: 14px;
        line-height: 2.2;
        color: var(--txt2);
        letter-spacing: 0.08em;
        max-width: 560px;
        opacity: 0;
        transform: translateY(20px);
        animation: maruFadeUp 1s 1.6s ease-out forwards;
    }

    .maru-hero-scroll {
        position: absolute;
        bottom: 48px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 10;
        display: flex;
        flex-direction: column;
        align-items: center;
        opacity: 0;
        animation: maruFadeUp 1s 2.2s ease-out forwards;
    }

    .maru-hero-scroll span {
        font-family: var(--en);
        font-size: 10px;
        letter-spacing: 0.3em;
        color: var(--txt2);
        margin-bottom: 12px;
    }

    .maru-scroll-line {
        width: 1px;
        height: 60px;
        background: rgba(200, 169, 96, 0.3);
        position: relative;
        overflow: hidden;
    }

    .maru-scroll-line::after {
        content: '';
        position: absolute;
        top: -50%;
        left: 0;
        width: 100%;
        height: 50%;
        background: var(--gold);
        animation: maruScrollDown 2.5s ease-in-out infinite;
    }

    @keyframes maruFadeUp {
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes maruScrollDown {
        0% {
            top: -50%;
        }

        100% {
            top: 100%;
        }
    }

    /* ============================================
       SECTIONS COMMON
    ============================================ */
    .maru-section {
        padding: 120px 48px;
        position: relative;
    }

    .maru-label {
        font-family: var(--en);
        font-size: 11px;
        letter-spacing: 0.4em;
        color: var(--gold);
        font-weight: 400;
        margin-bottom: 12px;
        display: block;
    }

    .maru-h2 {
        font-family: var(--serif);
        font-size: clamp(24px, 3vw, 40px);
        font-weight: 700;
        line-height: 1.6;
        letter-spacing: 0.06em;
        margin-bottom: 32px;
        color: var(--txt);
    }

    .maru-divider {
        width: 60px;
        height: 1px;
        background: linear-gradient(to right, var(--gold), transparent);
        margin-bottom: 40px;
    }

    /* ============================================
       PHILOSOPHY
    ============================================ */
    .maru-philosophy {
        background: var(--bg);
        border-top: 1px solid rgba(255, 255, 255, 0.04);
    }

    .maru-philosophy-inner {
        max-width: 1200px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 80px;
        align-items: center;
    }

    .maru-philosophy-img {
        position: relative;
        aspect-ratio: 1;
        overflow: hidden;
    }

    .maru-philosophy-img::before {
        content: '';
        position: absolute;
        top: -12px;
        left: -12px;
        width: 100%;
        height: 100%;
        border: 1px solid rgba(200, 169, 96, 0.2);
        z-index: 1;
    }

    .maru-philosophy-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: grayscale(80%) brightness(0.9);
        transition: all 0.8s ease;
    }

    .maru-philosophy-img:hover img {
        filter: grayscale(0%) brightness(1);
        transform: scale(1.03);
    }

    .maru-philosophy-txt p {
        font-size: 14px;
        line-height: 2.4;
        color: var(--txt2);
        letter-spacing: 0.06em;
    }

    /* ============================================
       ABOUT
    ============================================ */
    .maru-about {
        background: var(--bg2);
        border-top: 1px solid rgba(255, 255, 255, 0.04);
    }

    .maru-about-inner {
        max-width: 900px;
        margin: 0 auto;
        text-align: center;
    }

    .maru-profile {
        display: flex;
        align-items: center;
        gap: 48px;
        background: var(--bg-card);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.05);
        padding: 48px;
        border-radius: 4px;
        margin-top: 40px;
    }

    .maru-avatar {
        width: 140px;
        height: 140px;
        border-radius: 50%;
        overflow: hidden;
        flex-shrink: 0;
        border: 2px solid rgba(200, 169, 96, 0.3);
    }

    .maru-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .maru-avatar>div {
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, #1a1a24, #2a2a3e);
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: var(--en);
        font-size: 36px;
        color: var(--gold);
    }

    .maru-profile-info {
        text-align: left;
    }

    .maru-name {
        font-family: var(--serif);
        font-size: 24px;
        font-weight: 700;
        letter-spacing: 0.1em;
        margin-bottom: 8px;
        color: var(--txt);
    }

    .maru-name small {
        font-family: var(--en);
        font-size: 13px;
        font-weight: 400;
        color: var(--gold);
        margin-left: 12px;
        letter-spacing: 0.15em;
    }

    .maru-tags {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        margin-bottom: 16px;
    }

    .maru-tags span {
        font-size: 11px;
        padding: 4px 12px;
        border: 1px solid rgba(200, 169, 96, 0.3);
        color: var(--gold);
        letter-spacing: 0.05em;
    }

    .maru-profile-desc {
        font-size: 13px;
        line-height: 2;
        color: var(--txt2);
    }

    /* ============================================
       SERVICES
    ============================================ */
    .maru-services {
        background: linear-gradient(180deg, var(--bg) 0%, var(--navy) 100%);
        border-top: 1px solid rgba(255, 255, 255, 0.04);
    }

    .maru-services-inner {
        max-width: 1200px;
        margin: 0 auto;
    }

    .maru-services-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
        margin-top: 60px;
    }

    .maru-card {
        background: var(--bg-card);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.05);
        padding: 48px 36px;
        transition: all 0.5s ease;
        position: relative;
        overflow: hidden;
    }

    .maru-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 2px;
        background: linear-gradient(to right, var(--gold), transparent);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.5s ease;
    }

    .maru-card:hover {
        transform: translateY(-8px);
        border-color: rgba(200, 169, 96, 0.2);
    }

    .maru-card:hover::before {
        transform: scaleX(1);
    }

    .maru-card-num {
        font-family: var(--en);
        font-size: 48px;
        font-weight: 300;
        color: rgba(200, 169, 96, 0.15);
        line-height: 1;
        margin-bottom: 24px;
    }

    .maru-card h3 {
        font-family: var(--serif);
        font-size: 18px;
        font-weight: 700;
        letter-spacing: 0.08em;
        margin-bottom: 16px;
        color: var(--txt);
    }

    .maru-card p {
        font-size: 13px;
        line-height: 2;
        color: var(--txt2);
    }

    .maru-card-label {
        font-family: var(--en);
        font-size: 10px;
        letter-spacing: 0.2em;
        color: var(--gold);
        margin-bottom: 8px;
        display: block;
    }

    /* ============================================
       NUMBERS
    ============================================ */
    .maru-numbers {
        background: var(--navy);
        border-top: 1px solid rgba(255, 255, 255, 0.04);
        padding: 80px 48px;
    }

    .maru-numbers-inner {
        max-width: 1000px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 48px;
        text-align: center;
    }

    .maru-num-val {
        font-family: var(--en);
        font-size: 56px;
        font-weight: 300;
        color: var(--gold);
        line-height: 1;
        margin-bottom: 12px;
    }

    .maru-num-val span {
        font-size: 24px;
    }

    .maru-num-label {
        font-size: 12px;
        letter-spacing: 0.1em;
        color: var(--txt2);
    }

    /* ============================================
       CTA
    ============================================ */
    .maru-cta {
        background: var(--bg);
        border-top: 1px solid rgba(255, 255, 255, 0.04);
        text-align: center;
        padding: 120px 48px;
    }

    .maru-cta-inner {
        max-width: 600px;
        margin: 0 auto;
    }

    .maru-cta-title {
        font-family: var(--serif);
        font-size: clamp(24px, 3vw, 36px);
        font-weight: 700;
        letter-spacing: 0.08em;
        margin-bottom: 24px;
        line-height: 1.6;
    }

    .maru-cta-desc {
        font-size: 14px;
        line-height: 2;
        color: var(--txt2);
        margin-bottom: 48px;
    }

    .maru-cta-btn {
        display: inline-block;
        background: linear-gradient(135deg, var(--gold), var(--gold2));
        color: var(--bg);
        padding: 18px 64px;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 0.2em;
        text-decoration: none;
        transition: all 0.4s ease;
    }

    .maru-cta-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 40px rgba(200, 169, 96, 0.3);
    }

    /* ============================================
       FOOTER
    ============================================ */
    .maru-footer {
        background: var(--bg);
        border-top: 1px solid rgba(255, 255, 255, 0.06);
        padding: 64px 48px 40px;
        text-align: center;
    }

    .maru-footer-logo {
        font-family: var(--en);
        font-size: 20px;
        font-weight: 600;
        letter-spacing: 0.2em;
        margin-bottom: 24px;
        color: var(--txt);
    }

    .maru-footer-social {
        display: flex;
        justify-content: center;
        gap: 16px;
        margin-bottom: 32px;
    }

    .maru-footer-social a {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, 0.1);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--txt2);
        text-decoration: none;
        transition: all 0.3s;
    }

    .maru-footer-social a:hover {
        color: var(--gold);
        border-color: var(--gold);
        background: rgba(200, 169, 96, 0.05);
    }

    .maru-footer-links {
        display: flex;
        justify-content: center;
        gap: 32px;
        margin-bottom: 32px;
    }

    .maru-footer-links a {
        font-size: 12px;
        letter-spacing: 0.1em;
        color: var(--txt2);
        text-decoration: none;
        transition: color 0.3s;
    }

    .maru-footer-links a:hover {
        color: var(--gold);
    }

    .maru-footer-copy {
        font-size: 10px;
        letter-spacing: 0.15em;
        color: rgba(255, 255, 255, 0.2);
    }

    /* ============================================
       RESPONSIVE
    ============================================ */
    @media (max-width: 768px) {
        .maru-nav {
            padding: 16px 20px;
            flex-direction: column;
            gap: 16px;
            background: rgba(10, 10, 10, 0.95);
            mix-blend-mode: normal;
        }

        .maru-nav-links {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 12px 20px;
        }

        .maru-nav-cta {
            padding: 6px 16px !important;
        }

        .maru-hero-content {
            padding: 0 24px;
        }

        .maru-hero-title {
            font-size: 28px;
            margin-top: 40px;
        }

        .maru-section {
            padding: 80px 24px;
        }

        .maru-philosophy-inner {
            grid-template-columns: 1fr;
            gap: 40px;
        }

        .maru-services-grid {
            grid-template-columns: 1fr;
        }

        .maru-numbers-inner {
            grid-template-columns: 1fr;
            gap: 32px;
        }

        .maru-profile {
            flex-direction: column;
            text-align: center;
        }

        .maru-profile-info {
            text-align: center;
        }

        .maru-tags {
            justify-content: center;
        }
    }

    /* ============================================
       SCROLL REVEAL
    ============================================ */
    .maru-reveal {
        opacity: 0;
        transform: translateY(40px);
        transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .maru-reveal.visible {
        opacity: 1;
        transform: translateY(0);
    }
</style>

<!-- ====================== CONTENT ====================== -->
<div class="maru-page">

    <!-- Navigation -->
    <nav class="maru-nav" id="maruNav">
        <a href="/" class="maru-nav-logo">MARUO ACT</a>
        <div class="maru-nav-links">
            <a href="#maru-philosophy">PHILOSOPHY</a>
            <a href="#maru-about">ABOUT</a>
            <a href="#maru-services">SERVICES</a>
            <a href="/blog/">INSIGHT</a>
            <a href="/contact/" class="maru-nav-cta">CONTACT</a>
        </div>
    </nav>

    <!-- Hero -->
    <section class="maru-hero" id="maru-hero">
        <div class="maru-hero-bg">
            <!-- ★アップロード済み画像のURLを反映しました★ -->
            <img src="https://marumaruoact.com/wp-content/uploads/2026/03/hero_stage.jpg"
                alt="Stage lighting and business">
        </div>
        <div class="maru-hero-overlay"></div>
        <div class="maru-hero-grain"></div>
        <div class="maru-hero-content">
            <p class="maru-hero-label">NON-VERBAL COMMUNICATION × BUSINESS</p>
            <h1 class="maru-hero-title">
                <span class="maru-line">言葉は、不完全だ。</span>
                <span class="maru-line">だから― <span class="maru-gold">"伝わる力"</span> が居る。</span>
            </h1>
            <p class="maru-hero-desc">
                表面化しない「非言語」が、実はビジネスの成果の8割を決めている。<br>
                俳優が舞台で使う "空気の創り方" を、あなたのビジネススキルへ。
            </p>
        </div>
        <div class="maru-hero-scroll">
            <span>SCROLL</span>
            <div class="maru-scroll-line"></div>
        </div>
    </section>

    <!-- Philosophy -->
    <section class="maru-section maru-philosophy" id="maru-philosophy">
        <div class="maru-philosophy-inner">
            <div class="maru-philosophy-img maru-reveal">
                <!-- ★アップロード済み画像のURLを反映しました★ -->
                <img src="https://marumaruoact.com/wp-content/uploads/2026/03/philosophy_hands.jpg"
                    alt="Non-verbal communication">
            </div>
            <div class="maru-philosophy-txt maru-reveal">
                <span class="maru-label">01 — PHILOSOPHY</span>
                <h2 class="maru-h2">ロジックだけでは<br>人は動かない。<br>心を動かすのは、<br>熱量と「間」。</h2>
                <div class="maru-divider"></div>
                <p>
                    どんなに優れたプレゼン資料を作っても、提案相手がうなずかない経験はないだろうか。<br><br>
                    私たちは「言語化」に固執しすぎるあまり、語る人間の「表情」「声のトーン」「視線」「間合い」といった、もっと根源的でパワフルな武器を忘れている。<br><br>
                    ビジネスの現場において、非言語コミュニケーションは定量化できないが、確実に成果を左右する "定性的な絶対値" だ。
                </p>
            </div>
        </div>
    </section>

    <!-- About -->
    <section class="maru-section maru-about" id="maru-about">
        <div class="maru-about-inner maru-reveal">
            <span class="maru-label">02 — ABOUT</span>
            <h2 class="maru-h2">俳優が培った "空気を支配する力" を<br>ビジネスの武器に変える。</h2>
            <div class="maru-divider" style="margin: 0 auto 40px;"></div>
            <div class="maru-profile">
                <div class="maru-avatar">
                    <img src="https://marumaruoact.com/wp-content/uploads/2026/03/石丸-裕紳2.jpg" alt="石丸 裕紳">
                </div>
                <div class="maru-profile-info">
                    <div class="maru-name">石丸 裕紳 <small>YUJIN ISHIMARU</small></div>
                    <div class="maru-tags">
                        <span>元俳優</span>
                        <span>セールスイネーブルメント</span>
                        <span>非言語コミュニケーション専門家</span>
                    </div>
                    <p class="maru-profile-desc">
                        俳優として舞台に立ち続けた経験を持ち、大手企業でセールスイネーブルメントに携わる。「空気を読む」のではなく「空気を創る」という独自のメソッドで、営業・マネジメント・面接のパフォーマンスを根本から変革する。
                    </p>
                </div>
            </div>
        </div>
    </section>

    <!-- Services -->
    <section class="maru-section maru-services" id="maru-services">
        <div class="maru-services-inner">
            <div style="text-align:center;" class="maru-reveal">
                <span class="maru-label">03 — SERVICES</span>
                <h2 class="maru-h2">非言語を武器にする、3つの領域。</h2>
            </div>
            <div class="maru-services-grid">
                <div class="maru-card maru-reveal">
                    <div class="maru-card-num">01</div>
                    <span class="maru-card-label">SALES ENABLEMENT</span>
                    <h3>セールス<br>イネーブルメント</h3>
                    <p>成約率を劇的に引き上げる営業パーソン向け「ノンバーバル・トレーニング」。顧客の無意識の警戒心を解き、信頼を勝ち取る「声」と「所作」を身につける。</p>
                </div>
                <div class="maru-card maru-reveal">
                    <div class="maru-card-num">02</div>
                    <span class="maru-card-label">MANAGEMENT INTEGRATION</span>
                    <h3>マネジメント<br>インテグレーション</h3>
                    <p>離職防止と心理的安全性構築のためのリーダー層向けコーチング。部下の本音を引き出す「聴く姿勢」と、チームの空気を創る「空間支配力」。</p>
                </div>
                <div class="maru-card maru-reveal">
                    <div class="maru-card-num">03</div>
                    <span class="maru-card-label">CAREER PERFORMANCE</span>
                    <h3>キャリア・<br>面接パフォーマンス</h3>
                    <p>面接官や経営層に「こいつは違う」と思わせる存在感の演出。言葉の内容以上に「誰が語っているか」のオーラを纏う自己表現技術。</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Numbers -->
    <section class="maru-numbers maru-reveal">
        <div class="maru-numbers-inner">
            <div>
                <div class="maru-num-val">93<span>%</span></div>
                <div class="maru-num-label">第一印象の非言語依存率</div>
            </div>
            <div>
                <div class="maru-num-val">2.4<span>×</span></div>
                <div class="maru-num-label">非言語改善後の成約率向上</div>
            </div>
            <div>
                <div class="maru-num-val">80<span>%</span></div>
                <div class="maru-num-label">コミュニケーションにおける非言語の割合</div>
            </div>
        </div>
    </section>

    <!-- CTA -->
    <section class="maru-cta maru-reveal">
        <div class="maru-cta-inner">
            <span class="maru-label" style="display:block;text-align:center;margin-bottom:20px;">CONTACT</span>
            <h2 class="maru-cta-title">あなたの「伝わる力」を<br>覚醒させる。</h2>
            <p class="maru-cta-desc">
                まずは無料相談から。<br>
                あなたのビジネスシーンに最適な<br>非言語戦略をご提案します。
            </p>
            <a href="/contact/" class="maru-cta-btn">無料相談はこちら</a>
        </div>
    </section>

    <!-- Footer -->
    <footer class="maru-footer">
        <div class="maru-footer-logo">MARUO ACT</div>
        <div class="maru-footer-social">
            <a href="https://x.com/" target="_blank" rel="noopener noreferrer" aria-label="X (Twitter)">
                <svg viewBox="0 0 24 24" fill="currentColor" width="16" height="16">
                    <path
                        d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
                </svg>
            </a>
        </div>
        <div class="maru-footer-links">
            <a href="/blog/">記事一覧</a>
            <a href="/contact/">お問い合わせ</a>
        </div>
        <p class="maru-footer-copy">© 2026 MARUO ACT. All rights reserved.</p>
    </footer>

</div>

<script>
    // Scroll reveal
    (function () {
        var revealEls = document.querySelectorAll('.maru-reveal');
        var obs = new IntersectionObserver(function (entries) {
            entries.forEach(function (e) {
                if (e.isIntersecting) e.target.classList.add('visible');
            });
        }, { threshold: 0.15 });
        revealEls.forEach(function (el) { obs.observe(el); });

        // Nav scroll
        var nav = document.getElementById('maruNav');
        window.addEventListener('scroll', function () {
            if (nav) nav.classList.toggle('scrolled', window.scrollY > 100);
        });
    })();
</script>
/* ============================================
   ブログ本文の視認性向上（ダークテーマ・最適化）
   ============================================ */
body.single-post .entry-content,
body.page:not(.home) .entry-content,
body.single-post .entry-content p,
body.page:not(.home) .entry-content p,
body.single-post .entry-content li,
body.page:not(.home) .entry-content li,
body.single-post .entry-content span,
body.page:not(.home) .entry-content span,
body.single-post .entry-content td,
body.page:not(.home) .entry-content td,
body.single-post .entry-content div,
body.page:not(.home) .entry-content div {
    color: #e2e8f0 !important;
    /* 黒背景に映える明るいグレー */
    font-size: 16px !important;
    line-height: 1.9 !important;
    letter-spacing: 0.04em !important;
}

/* 見出しの視認性確保（ダークテーマ用デザイン） */
body.single-post .entry-content h2,
body.page:not(.home) .entry-content h2 {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border-left: 5px solid #c8a960 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 16px 20px !important;
    margin-top: 48px !important;
    margin-bottom: 24px !important;
}

body.single-post .entry-content h3,
body.page:not(.home) .entry-content h3 {
    color: #ffffff !important;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1) !important;
    padding-bottom: 10px !important;
    margin-top: 40px !important;
    background: transparent !important;
    border-left: none !important;
}

body.single-post .entry-content h4,
body.page:not(.home) .entry-content h4 {
    color: #e2e8f0 !important;
    border-left: 3px solid #c8a960 !important;
    background: transparent !important;
    padding-left: 12px !important;
}

/* リンク色（青リンクを排除、トップページには影響しない） */
body.single-post .entry-content a,
body.page:not(.home) .entry-content a {
    color: #dcc07a !important;
    text-decoration: underline !important;
}

/* 引用ブロック */
body.single-post .entry-content blockquote,
body.page:not(.home) .entry-content blockquote {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #94a3b8 !important;
    border-left: 4px solid #c8a960 !important;
}

/* 目次（TOC）などの背景 */
.toc,
.ez-toc-container {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.toc-title,
.ez-toc-title {
    color: #ffffff !important;
}

.toc a,
.ez-toc-container a {
    color: #cbd5e1 !important;
    text-decoration: none !important;
}

/* メタ情報（日付・タグなど） */
.post-date,
.post-update,
.cat-link,
.tag-link,
.author-info {
    color: #94a3b8 !important;
}