/*
Theme Name: AI Marketing Engineering
Author: ryo
Description: 巨大なタイポグラフィとAIギミックを搭載したオリジナルテーマ。プロトタイプのデザインを完全再現。
Version: 1.0
*/

/* WordPress標準の管理バー（Admin Bar）が表示された際のヘッダー位置微調整 */
.admin-bar #main-header {
    top: 32px;
}
@media screen and (max-width: 782px) {
    .admin-bar #main-header {
        top: 46px;
    }
}

/* 共通変数とベーススタイル */
:root {
    --color-bg: #ffffff;
    --color-text: #1a1a1a;
    --color-overlay-start: rgba(0, 0, 0, 0.8);
    --color-overlay-end: rgba(2, 6, 23, 0.8);
    --font-jp: 'Noto Sans JP', sans-serif;
    --font-en: 'Roboto Mono', monospace;
    --font-hero: 'Noto Sans JP', sans-serif;
    --header-height: 74px;
    --hero-min-h-pc: 900px;
    --hero-min-h-sp: 700px;
    
    /* 背景画像設定（デフォルト） */
    --hero-bg-size: 175% auto;
    --hero-bg-pos: 57% 5%;
}

body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-jp);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

.font-en { font-family: var(--font-en); }
.font-hero { font-family: var(--font-hero); font-weight: 900; }

/* ローディング画面 */
#loading-screen {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100dvh;
    background-color: #000;
    z-index: 999999;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    transition: opacity 0.8s ease-out, visibility 0.8s ease-out;
}
.loading-logo {
    font-family: var(--font-en); font-weight: 700; font-size: 1rem; color: #fff;
    letter-spacing: 0.2em; transform: translateY(10px);
    animation: logoFadeIn 2.0s ease-in-out forwards;
}
.loading-bar-container { width: 180px; height: 1px; background: rgba(255,255,255,0.1); position: relative; overflow: hidden; margin-top: 20px; }
.loading-bar { position: absolute; top: 0; left: 0; height: 100%; width: 0%; background: #fff; animation: loadingProgress 2.0s forwards; }

@keyframes logoFadeIn { 0% { opacity: 0; } 30%, 80% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-10px); } }
@keyframes loadingProgress { 0% { width: 0%; } 100% { width: 100%; } }

/* ヒーローセクション共通 */
#hero {
    background-color: #000;
    position: relative;
    overflow: hidden;
    width: 100%;
    min-height: var(--hero-min-h-pc);
    height: 100dvh;
    display: flex;
    flex-direction: column;
}

.bg-hero-shared {
    background-image: var(--hero-img);
    background-repeat: no-repeat;
    background-size: var(--hero-bg-size);
    background-position: var(--hero-bg-pos);
    background-attachment: fixed;
}

.hero-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
.hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, var(--color-overlay-start) 0%, var(--color-overlay-end) 100%); z-index: 2; }

.hero-content { 
    position: relative; z-index: 10; width: 100%; height: 100%;
    min-height: var(--hero-min-h-pc);
    display: flex; flex-direction: column; padding: 0 5dvw; justify-content: center;
}

/* タイポグラフィ・クリッピング */
.hero-title-clip {
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    font-family: var(--font-hero);
    font-weight: 900;
    line-height: 0.95;
    display: block;
    filter: brightness(1.35);
    opacity: 0;
    transition: opacity 1.2s ease-out;
}
.hero-visible .hero-title-clip { opacity: 1; }

.ai-x-wrapper { order: 1; display: flex; flex-direction: row; align-items: center; gap: 2rem; width: 100%; }
.font-ai { font-size: clamp(5rem, 17vw, 17rem); letter-spacing: 0.12em; line-height: 1; }
.font-x { font-size: clamp(3rem, 7.5vw, 8rem); letter-spacing: 0.1em; margin-top: 0.5rem; }

.web-marketing-group { order: 2; display: flex; flex-direction: row; align-items: baseline; gap: 0.25em; width: 100%; margin-top: 2vh; }
.font-web, .font-marketing { font-size: clamp(5rem, 15vw, 15rem); letter-spacing: 0.1em; line-height: 1; white-space: nowrap; }
.font-marketing { margin-right: -20%; }

.hero-subtitle {
    order: 3;
    font-family: var(--font-jp);
    margin-top: 4vh;
    color: rgba(255,255,255,0.95);
    font-weight: 700;
    font-size: clamp(1rem, 1.5vw, 1.5rem);
    letter-spacing: 0.05em;
    text-shadow: 0 2px 15px rgba(0,0,0,0.7);
    opacity: 0;
    transition: opacity 1.2s ease-out 1.6s;
    max-width: 800px;
    line-height: 1.6;
}
.hero-visible .hero-subtitle { opacity: 1; }

.scroll-down { position: absolute; bottom: 25px; left: 50%; transform: translateX(-50%); color: white; z-index: 20; display: flex; flex-direction: column; align-items: center; gap: 10px; font-family: var(--font-en); font-weight: 700; font-size: 0.7rem; letter-spacing: 0.3em; opacity: 0; transition: opacity 1s ease-out 2.6s; }
.hero-visible .scroll-down { opacity: 0.6; }
.scroll-arrow { animation: arrowMove 2s infinite ease-in-out; }
@keyframes arrowMove { 0%, 100% { transform: translateY(0); opacity: 0.5; } 50% { transform: translateY(8px); opacity: 1; } }

/* モバイルレスポンシブ */
@media (max-width: 768px) {
    #hero { min-height: var(--hero-min-h-sp); }
    .hero-bg, .hero-title-clip { background-attachment: fixed; background-size: auto 100dvh; background-position: 55% center; }
    .hero-content { min-height: var(--hero-min-h-sp); padding: 15dvh 0 15dvh 5dvw; justify-content: space-between; }
    .hero-title-clip { filter: brightness(1.5); }
    .ai-x-wrapper { flex-direction: column; align-items: flex-start; gap: 0; }
    .font-ai { font-size: clamp(4rem, 22vw, 7rem); }
    .font-x { font-size: clamp(2.5rem, 12vw, 4rem); margin-left: 2rem; margin-top: 1rem; }
    .web-marketing-group { flex-direction: column; order: 3; gap: 0; margin-top: 0; }
    .font-web, .font-marketing { font-size: clamp(4rem, 22vw, 7rem); }
    .hero-subtitle { order: 10; margin-top: auto; margin-bottom: 6dvh; font-size: 0.9rem; padding-right: 1.5rem; }
}

/* ヘッダー・ナビゲーション */
#main-header { height: var(--header-height); z-index: 100000; transition: all 0.4s ease; padding: 0 6%; }
.header-active-white { background-color: rgba(255, 255, 255, 0.98); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(0,0,0,0.06); }
.header-active-black { background-color: rgba(10, 10, 10, 0.85); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255,255,255,0.05); }

.force-black { color: #111 !important; }
.force-white { color: #fff !important; }
.bg-force-black { background-color: #111 !important; }
.bg-force-white { background-color: #fff !important; }

#hamburger-btn { position: fixed; top: 14px; right: 24px; z-index: 100002; width: 48px; height: 48px; cursor: pointer; display: flex; justify-content: center; align-items: center; background: none; border: none; }
.hamburger-line { position: absolute; width: 28px; height: 2.5px; border-radius: 2px; transition: all 0.4s; left: 10px; }
.line-1 { top: 16px; } .line-2 { top: 24px; } .line-3 { top: 32px; }
#hamburger-btn.menu-open .line-1 { top: 24px; transform: rotate(45deg); }
#hamburger-btn.menu-open .line-2 { opacity: 0; }
#hamburger-btn.menu-open .line-3 { top: 24px; transform: rotate(-45deg); }

#nav-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100dvh; background: rgba(0,0,0,0); z-index: 100001; visibility: hidden; transition: background-color 0.4s ease, visibility 0s linear 0.4s; }
#nav-overlay.open { visibility: visible; background: rgba(0,0,0,0.7); transition: background-color 0.4s ease, visibility 0s; }
.nav-content-wrapper { position: absolute; top: 0; right: 0; width: 85%; max-width: 500px; height: 100%; background: #000; padding: 100px 40px; transform: translateX(100%); transition: transform 0.4s cubic-bezier(0.77, 0, 0.175, 1); box-shadow: -10px 0 30px rgba(0,0,0,0.5); overflow-y: auto; }
@media (min-width: 769px) { .nav-content-wrapper { width: 35%; } }
@media (max-width: 768px) { .nav-content-wrapper { width: 100%; background-color: rgba(0, 0, 0, 0.92); backdrop-filter: blur(8px); } }
#nav-overlay.open .nav-content-wrapper { transform: translateX(0); }

/* コンテンツセクション */
.bg-tech-dark { background-color: #050505; color: white; position: relative; }
.dot-pattern { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: radial-gradient(rgba(255, 255, 255, 0.12) 1.5px, transparent 1.5px); background-size: 32px 32px; opacity: 1; pointer-events: none; z-index: 1; }

.tab-btn { padding: 0.6rem 1.4rem; color: #444; font-weight: 700; transition: all 0.3s; font-size: 0.8rem; background: transparent; border: 1px solid transparent; }
.tab-btn.active { background: #000 !important; color: #fff !important; }

.article-tag { transition: all 0.3s ease; display: inline-block; }
.group:hover .article-tag { background-color: #000 !important; color: #fff !important; border-color: #000 !important; }
.article-title-link { transition: all 0.3s ease; display: block; color: #1a1a1a; font-weight: 700; line-height: 1.4; }

/* 記事タイトルはホバー時に青グラデーション */
.group:hover .article-title-link { 
    background: linear-gradient(90deg, #0ea5e9 0%, #3b82f6 50%, #6366f1 100%); 
    -webkit-background-clip: text; 
    background-clip: text; 
    color: transparent !important; 
}

/* 修正: ロゴのホバーは単純拡大のみ（青グラデーション関連をリセット） */
#header-logo:hover { 
    transform: scale(1.02);
    /* グラデーションやテキストクリップを確実に無効化 */
    background: none !important;
    background-image: none !important;
    -webkit-text-fill-color: initial !important;
    background-clip: border-box !important;
    -webkit-background-clip: border-box !important;
    color: currentColor !important;
    animation: none !important;
}