/*
Theme Name: KW STAFF Premium Theme
Author: Media Magic
Description: 世界TOP5のUI/UX。KWスタッフ様専用高級コーポレートテーマ
Version: 1.4
*/

/* --- 1. 定数と基本設定 --- */
:root {
    --primary: #0a2e29; /* ブリティッシュ・レーシンググリーン */
    --accent: #c4d4af;  /* セージグリーン */
    --bg: #f9fbf9;      /* オフホワイト */
    --text: #1a1a1a;
    --ease: cubic-bezier(0.23, 1, 0.32, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    background-color: var(--bg);
    color: var(--text);
    font-family: 'Inter', 'Noto Serif JP', sans-serif;
    line-height: 1.8;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* --- 2. ヘッダーとナビゲーション (WordPress管理バー対応) --- */
header {
    padding: 20px 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: rgba(249, 251, 249, 0.9);
    backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(10, 46, 41, 0.05);
    transition: top 0.3s;
}

/* ログイン時の管理バーの高さ分、位置を調整 */
.admin-bar header { top: 32px; }
@media screen and (max-width: 782px) { .admin-bar header { top: 46px; } }

main {
    padding-top: 100px; /* 固定ヘッダーがコンテンツに被らないための余白 */
}

/* ヒーローがある場合のみヘッダーと重ねる */
.hero {
    margin-top: -100px;
    height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    background: white;
}

.logo {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.6rem;
    letter-spacing: -0.02em;
    color: var(--primary);
    text-decoration: none;
    display: flex;
    align-items: center;
}
.logo span {
    font-family: 'Inter', sans-serif;
    font-size: 0.6rem;
    letter-spacing: 0.2em;
    margin-left: 10px;
    text-transform: uppercase;
    border-left: 1px solid var(--accent);
    padding-left: 10px;
}

header nav ul { list-style: none; display: flex; }
header nav li { margin-left: 35px; }
header nav a {
    text-decoration: none;
    color: var(--text);
    font-size: 0.8rem;
    font-weight: 600;
    transition: color 0.3s;
}
header nav a:hover { color: var(--primary); }

/* --- 3. 新着情報 (News Section) --- */
.news-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 60px;
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
}

.news-list { list-style: none; }
.news-item {
    display: flex;
    align-items: center;
    padding: 30px 0;
    border-bottom: 1px solid #f0f0f0;
    text-decoration: none;
    color: inherit;
    transition: all 0.4s var(--ease);
}
.news-item:hover { transform: translateX(15px); color: var(--primary); }
.news-date { font-size: 0.85rem; color: #999; width: 140px; font-family: 'Inter'; }
.news-tag {
    font-size: 0.65rem;
    padding: 4px 12px;
    background: var(--accent);
    color: var(--primary);
    margin-right: 30px;
    letter-spacing: 0.1em;
    font-weight: 600;
}
.news-title { font-size: 1rem; font-weight: 500; }

/* --- 4. 事業内容 (Business Cards) --- */
.business-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 40px;
    margin-top: 80px;
}
.card {
    padding: 60px 40px;
    background: white;
    border-radius: 2px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.02);
    transition: all 0.5s var(--ease);
}
.card:hover { transform: translateY(-10px); box-shadow: 0 30px 60px rgba(10,46,41,0.08); }
.card h3 { font-family: 'Noto Serif JP', serif; margin-bottom: 25px; color: var(--primary); font-size: 1.5rem; }

/* --- 5. 会社概要 (Information Table) --- */
.info-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 40px;
}
.info-table tr { border-bottom: 1px solid #eee; }
.info-table th, .info-table td {
    padding: 35px 0;
    text-align: left;
    vertical-align: top;
}
.info-table th {
    width: 30%;
    font-size: 0.85rem;
    color: #999;
    font-weight: 400;
}
.info-table td { font-size: 1.05rem; font-weight: 500; }

/* --- 6. ヒーローセクションの詳細 --- */
.hero-content { z-index: 2; padding: 0 10%; max-width: 800px; }
.hero h1 { font-family: 'Noto Serif JP', serif; font-size: clamp(2rem, 5vw, 4rem); font-weight: 600; line-height: 1.2; color: var(--primary); margin-bottom: 35px; }
.hero-image { position: absolute; right: 0; top: 0; width: 45%; height: 100%; background: url('https://kw-staff.com/wp-content/themes/KW-STAFF-Premium-Theme/top-img03.jpg') no-repeat center; background-size: cover; clip-path: polygon(15% 0, 100% 0, 100% 100%, 0% 100%); }

/* --- 7. Contact Form 7 Custom Design (復元) --- */
.contact-form {
    max-width: 600px;
    margin: 40px auto;
}
.wpcf7-form-control:not(.wpcf7-submit) {
    width: 100%;
    border: none;
    border-bottom: 1px solid #ccc;
    background: transparent;
    padding: 15px 0;
    margin-bottom: 30px;
    font-size: 1rem;
    outline: none;
    transition: border-color 0.4s var(--ease);
}
.wpcf7-form-control:not(.wpcf7-submit):focus {
    border-bottom: 1px solid var(--primary);
}
.wpcf7-submit {
    background: var(--primary) !important;
    color: white !important;
    padding: 15px 50px !important;
    border: none !important;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.3s;
    width: 100%;
    display: block;
}
.wpcf7-submit:hover { transform: scale(1.02); opacity: 0.9; }
.wpcf7-response-output { border: none !important; background: #f0f4f0; color: var(--primary); padding: 20px !important; margin-top: 30px !important; }

/* --- 8. その他共通スタイル --- */
.section-padding { padding: 120px 10%; }
.section-label { font-size: 0.75rem; letter-spacing: 0.5em; text-transform: uppercase; color: var(--accent); margin-bottom: 20px; display: block; font-weight: 600; }

footer {
    padding: 100px 10% 60px;
    background: var(--primary);
    color: white;
    text-align: center;
}
.footer-logo { font-family: 'Cormorant Garamond'; font-size: 2.2rem; margin-bottom: 30px; display: block; }
.footer-copy { font-size: 0.65rem; opacity: 0.5; letter-spacing: 0.2em; }

/* Animations */
.scroll-reveal { opacity: 0; transform: translateY(30px); transition: all 1.2s var(--ease); }
.scroll-reveal.active { opacity: 1; transform: translateY(0); }

/* --- 9. レスポンシブ --- */
@media (max-width: 1024px) {
    header { padding: 20px 30px; }
    .hero { flex-direction: column; text-align: center; padding-top: 120px; }
    .hero-image { position: relative; width: 100%; height: 50vh; clip-path: none; margin-top: 40px; }
    .news-item { flex-direction: column; align-items: flex-start; gap: 10px; }
    .news-date { width: auto; }
}

/* 既存のCSSはそのまま維持し、以下のコードを適切に追記・修正してください */

/* --- Hamburger Menu Button --- */
.hamburger {
    display: none; /* PCでは非表示 */
    position: relative;
    z-index: 2000;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
}
.hamburger span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--primary);
    position: absolute;
    left: 0;
    transition: 0.4s var(--ease);
}
.hamburger span:nth-of-type(1) { top: 12px; }
.hamburger span:nth-of-type(2) { top: 20px; }
.hamburger span:nth-of-type(3) { top: 28px; }

/* 開いた時のボタンの変化 */
.hamburger.active span:nth-of-type(1) { transform: rotate(45deg); top: 20px; background-color: white; }
.hamburger.active span:nth-of-type(2) { opacity: 0; }
.hamburger.active span:nth-of-type(3) { transform: rotate(-45deg); top: 20px; background-color: white; }

/* --- Mobile Navigation & Responsive --- */
@media (max-width: 1024px) {
    header { padding: 15px 20px; }
    
    /* ハンバーガーボタンを表示 */
    .hamburger { display: block; }

    /* メニュー本体（通常は隠す） */
    header nav {
        position: fixed;
        top: 0;
        right: -100%; /* 画面外へ隠す */
        width: 100%;
        height: 100vh;
        background: var(--primary);
        z-index: 1500;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: 0.5s var(--ease);
        opacity: 0;
    }

    /* メニューが開いた時 */
    header nav.active {
        right: 0;
        opacity: 1;
    }

    /* メニューリストの縦並び */
    header nav ul {
        flex-direction: column;
        text-align: center;
        width: 100%;
    }

    header nav li {
        margin: 0;
        padding: 20px 0;
        opacity: 0;
        transform: translateY(20px);
        transition: 0.5s var(--ease);
    }
    
    /* メニューが開いた時にリンクをふわっと表示 */
    header nav.active li {
        opacity: 1;
        transform: translateY(0);
        transition-delay: 0.2s;
    }

    header nav a {
        color: white;
        font-size: 1.5rem;
        font-family: 'Noto Serif JP', serif;
        border: none;
    }
    header nav a:after { display: none; } /* 下線アニメーションを消す */

    /* ヒーローエリア等の調整 */
    .hero { flex-direction: column; text-align: center; padding-top: 100px; height: auto; padding-bottom: 60px; }
    .hero-image { position: relative; width: 100%; height: 40vh; margin-top: 40px; clip-path: none; }
    .hero h1 { font-size: 2.2rem; }
    .news-item { flex-direction: column; align-items: flex-start; gap: 10px; }
    .news-date { width: auto; }
}

/* --- Single Post (投稿詳細ページ・修正版) --- */

/* 1. 記事の幅を読みやすく制限し、中央に配置 */
article {
    max-width: 800px; /* 人間の目が疲れにくい最適な幅 */
    margin: 0 auto;   /* 中央寄せ */
}

/* 2. 記事ヘッダーの余白調整 */
.post-header {
    margin-bottom: 80px; /* 本文との間隔を広げる */
    border-bottom: 1px solid #eee;
    padding-bottom: 40px;
}

.post-meta {
    display: flex;
    align-items: center;
    gap: 20px; /* 日付とタグの間隔を確保 */
    margin-bottom: 30px; /* タイトルとの間隔を広げる */
}

/* タイトルの見栄え */
.post-title {
    font-family: 'Noto Serif JP', serif;
    font-size: clamp(2rem, 4vw, 2.8rem);
    line-height: 1.5; /* 行間をゆったりと */
    color: var(--primary);
    letter-spacing: 0.05em;
}

/* 3. 本文の「詰まり」を解消 */
.post-content {
    margin-bottom: 120px;
    font-size: 1.05rem; /* 文字サイズをわずかに大きく */
}

.post-content p {
    margin-bottom: 3em; /* 段落間の余白をたっぷりとる */
    line-height: 2.2;   /* 行間を広げて読みやすくする */
    color: #333;
    text-align: justify; /* 両端揃えで美しく見せる */
}

/* 記事内の見出しデザイン */
.post-content h2, .post-content h3 {
    margin-top: 80px;     /* 上の余白 */
    margin-bottom: 40px;  /* 下の余白 */
    font-family: 'Noto Serif JP', serif;
    color: var(--primary);
    font-size: 1.6rem;
    border-bottom: 1px solid #eee; /* 控えめな下線 */
    padding-bottom: 15px;
}

/* 4. 戻るボタンのデザイン強化 */
.post-footer {
    text-align: center;
    margin-top: 100px;
    padding-top: 60px;
}

.back-link {
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.2em;
    padding: 15px 50px;
    border: 1px solid var(--primary); /* 枠線をつけてボタンらしく */
    transition: all 0.3s;
    display: inline-block;
}

.back-link:hover {
    background: var(--primary);
    color: white;
}

/* --- Pagination (ページ送り) --- */
.pagination {
    margin-top: 60px;
    text-align: center;
    font-family: 'Inter', sans-serif;
}
.pagination .page-numbers {
    display: inline-block;
    padding: 10px 20px;
    margin: 0 5px;
    border: 1px solid #ddd;
    color: var(--text);
    text-decoration: none;
    transition: 0.3s;
    font-size: 0.9rem;
}
.pagination .page-numbers.current,
.pagination .page-numbers:hover {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

/* --- Mobile Responsive Fixes (スマホ表示の崩れ防止) --- */
@media (max-width: 1024px) {
    
    /* 1. 全体的な余白の適正化 */
    .section-padding { 
        padding: 80px 5% !important; /* 横の余白を10%→5%に減らしてコンテンツ幅を確保 */
    }

    /* 2. ヘッダー周りの調整 */
    header { padding: 15px 20px; }
    
    /* 3. ヒーローエリアの修正 */
    .hero { 
        flex-direction: column; 
        text-align: center; 
        padding-top: 120px; /* ヘッダー被り防止 */
        height: auto; 
        padding-bottom: 60px; 
    }
    .hero-content {
        padding: 0 20px; /* スマホでの横余白確保 */
    }
    .hero-image { 
        position: relative; 
        width: 100%; 
        height: 40vh; 
        margin-top: 40px; 
        clip-path: none; 
    }
    .hero h1 { 
        font-size: 2rem; /* 文字サイズをスマホ用に固定 */
        word-wrap: break-word; /* 長い単語も折り返す */
    }

    /* 4. 記事詳細ページの「右寄り」防止 */
    article {
        width: 100%;
        padding: 0 10px;
        overflow-wrap: break-word; /* 必須：長いURLなどがはみ出すのを防ぐ */
    }
    
    .post-title {
        font-size: 1.8rem; /* スマホで見やすいサイズに */
        line-height: 1.3;
    }
    
    .post-content p {
        text-align: left; /* スマホでは両端揃えより左揃えが読みやすい */
        font-size: 1rem;
        line-height: 1.8;
    }

    /* 5. 画像のはみ出し防止（超重要） */
    img, iframe, video {
        max-width: 100%;
        height: auto;
    }

    /* 6. ハンバーガーメニュー関連 */
    .hamburger { display: block; }
    header nav {
        position: fixed;
        top: 0; right: -100%; width: 100%; height: 100vh;
        background: var(--primary);
        z-index: 1500;
        display: flex; align-items: center; justify-content: center;
        transition: 0.5s var(--ease); opacity: 0; pointer-events: none;
    }
    header nav.active { right: 0; opacity: 1; pointer-events: auto; }
    header nav ul { flex-direction: column; text-align: center; width: 100%; }
    header nav li { margin: 0; padding: 20px 0; }
    header nav a { color: white; font-size: 1.5rem; border: none; }
    header nav a:after { display: none; }
    
    .news-item { flex-direction: column; align-items: flex-start; gap: 10px; }
    .news-date { width: auto; }
    
    /* テーブルの横スクロール対応（会社概要などが崩れないように） */
    .info-table {
        display: block;
        width: 100%;
        overflow-x: auto;
        white-space: nowrap;
    }
    .info-table th, .info-table td {
        display: block;
        width: 100%;
        padding: 10px 0;
    }
    .info-table tr {
        display: block;
        margin-bottom: 30px;
        border-bottom: 2px solid #eee;
    }
    .info-table th {
        color: var(--primary);
        border-bottom: none;
        padding-bottom: 5px;
    }
}