/*
Theme Name: My Tax Theme
Author: Tokuji Yamashiro
Description: 静的サイトと共通利用する統合デザインテーマ
Version: 1.2
*/

/* =========================================
   1. CORE VARIABLES & RESET
   ========================================= */
:root {
    /* Colors */
    --bg-body: #ffffff;
    --bg-secondary: #f8f9fa;
    --text-main: #333333;
    --text-sub: #555555;
    --border-color: #e0e0e0;

    /* Accents */
    --accent-blue: #0056b3;
    --accent-cyan: #007acc;
    --accent-orange: #e37400;
    --accent-green: #2e7d32;
    --accent-red: #d32f2f;

    /* Fonts */
    --font-code: 'Fira Code', monospace;
    --font-body: 'Noto Sans JP', 'Inter', sans-serif;
    
    /* Layout */
    --header-height: 70px;
    --container-width: 960px;
}

* { box-sizing: border-box; }

body {
    margin: 0; padding: 0;
    background-color: var(--bg-body);
    color: var(--text-main);
    font-family: var(--font-body);
    line-height: 1.8;
    padding-top: var(--header-height);
    -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; color: inherit; transition: opacity 0.2s; }
a:hover { opacity: 0.8; }
a.text-link { color: var(--accent-blue); text-decoration: underline; }

/* Contact Form 7 Fieldset Fix (長方形削除) */
fieldset {
    border: none; padding: 0; margin: 0; min-width: 0;
}

/* =========================================
   2. TYPOGRAPHY
   ========================================= */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-body);
    font-weight: 700;
    margin-top: 0;
    line-height: 1.4;
    color: var(--text-main);
}

.article-body h2 {
    font-size: 1.6rem; margin-top: 60px; margin-bottom: 30px;
    padding-bottom: 10px; border-bottom: 2px solid var(--border-color);
}
.article-body h3 {
    font-size: 1.3rem; color: var(--accent-blue); margin-top: 40px; margin-bottom: 20px;
    display: flex; align-items: center; gap: 10px;
}
.article-body h3::before { content: "#"; font-family: var(--font-code); color: var(--accent-cyan); }
.article-body h4 { font-size: 1.1rem; margin-top: 30px; margin-bottom: 15px; font-weight: 700; }

p { margin-bottom: 1.8em; text-align: justify; }
ul, ol { margin-bottom: 1.8em; padding-left: 20px; }
li { margin-bottom: 0.5em; }

blockquote {
    background: #f1f8ff; border-left: 5px solid var(--accent-blue);
    margin: 30px 0; padding: 20px; font-style: italic; color: #444;
}
.highlight {
    font-weight: bold; color: var(--accent-blue); background: #e3f2fd;
    padding: 2px 6px; border-radius: 4px;
}

/* =========================================
   3. LAYOUT & HEADER/FOOTER
   ========================================= */
.container { max-width: var(--container-width); margin: 0 auto; padding: 60px 20px 100px; }

/* Header */
.site-header {
    position: fixed; top: 0; left: 0; width: 100%; height: var(--header-height);
    background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-color); z-index: 1000;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
}
.header-inner {
    width: 100%; max-width: 1200px; padding: 0 20px;
    display: flex; justify-content: space-between; align-items: center;
}
.brand-logo { font-size: 1.1rem; font-weight: 700; display: flex; flex-direction: column; line-height: 1.2; }
.brand-logo small { font-family: var(--font-code); font-size: 0.75rem; color: var(--accent-blue); font-weight: normal; margin-top: 2px; }

/* Nav */
.main-nav { display: flex; gap: 30px; align-items: center; }
.nav-link { font-size: 0.95rem; font-weight: 500; color: var(--text-sub); }
.nav-link:hover { color: var(--accent-blue); font-weight: 700; }
.nav-btn {
    background-color: var(--accent-blue); color: #fff; padding: 8px 20px;
    border-radius: 4px; font-size: 0.9rem; font-weight: 700; transition: background 0.3s;
}
.nav-btn:hover { background-color: #004494; }

/* Page Hero */
.page-hero {
    text-align: center; padding: 80px 20px 60px;
    background: radial-gradient(circle at center, #f0f8ff 0%, #ffffff 70%);
}
.role-tag {
    display: inline-block; font-family: var(--font-code); color: var(--accent-cyan);
    border: 1px solid var(--accent-cyan); padding: 4px 12px; border-radius: 4px;
    font-size: 0.85rem; margin-bottom: 20px; background: #fff;
}
.page-title { font-size: 2.4rem; font-weight: 800; margin-bottom: 20px; color: #1a1a1a; }
.page-lead { font-size: 1.1rem; color: var(--text-sub); max-width: 700px; margin: 0 auto; text-align: center; line-height: 1.8; }

/* Footer */
footer {
    text-align: center; padding: 50px 20px; background: #fff;
    border-top: 1px solid var(--border-color); color: #888;
    font-size: 0.85rem; font-family: var(--font-code);
}

/* =========================================
   4. TABLES
   ========================================= */
table {
    width: 100%; border-collapse: collapse; margin-bottom: 30px;
    background: #fff; border: 1px solid var(--border-color); border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}
th {
    background: #f1f3f5; color: var(--text-sub); font-weight: 600;
    padding: 15px 20px; text-align: left; border-bottom: 1px solid var(--border-color);
}
td { padding: 20px; border-bottom: 1px solid var(--border-color); vertical-align: top; }
tr:last-child td { border-bottom: none; }

.price-val { display: block; font-size: 1.3rem; font-weight: 700; font-family: var(--font-code); }
.price-sub { display: block; font-size: 0.85rem; color: var(--text-sub); margin-top: 4px; }
.price-add { display: block; font-size: 0.85rem; color: var(--accent-blue); margin-top: 4px; font-weight: 600; }

/* =========================================
   5. CONTACT FORM & SIDEBAR (Fixed)
   ========================================= */
.contact-layout { display: grid; grid-template-columns: 1.5fr 1fr; gap: 50px; }
.form-section { background: #fff; }

.form-group { margin-bottom: 25px; }
.form-label { display: block; font-weight: 700; margin-bottom: 8px; color: var(--text-main); font-size: 0.95rem; }
.form-required { color: var(--accent-red); font-size: 0.8rem; margin-left: 5px; font-weight: normal; }

/* Inputs */
.form-control, input[type="text"], input[type="email"], textarea, select {
    width: 100%; padding: 14px; border: 1px solid #ccc; border-radius: 4px;
    font-size: 1rem; font-family: var(--font-body); background: #fcfcfc; transition: all 0.2s;
}
.form-control:focus, input:focus, textarea:focus, select:focus {
    border-color: var(--accent-blue); outline: none;
    box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.1); background: #fff;
}
textarea.form-control { min-height: 150px; }

/* Submit Btn */
.submit-btn, input[type="submit"] {
    background-color: var(--accent-blue); color: #fff; font-weight: bold;
    padding: 16px 40px; border: none; border-radius: 4px; font-size: 1.1rem;
    width: 100%; cursor: pointer; transition: background 0.3s, transform 0.1s;
    box-shadow: 0 4px 15px rgba(0, 86, 179, 0.2); -webkit-appearance: none;
}
.submit-btn:hover, input[type="submit"]:hover { background-color: #004494; transform: translateY(-2px); }

/* Sidebar Info & List Style (Fix for Checkmarks) */
.info-card {
    background: var(--bg-secondary); padding: 30px; border-radius: 8px;
    border: 1px solid var(--border-color); margin-bottom: 30px;
}
.info-title {
    font-size: 1.1rem; font-weight: 700; margin-bottom: 20px;
    border-bottom: 2px solid #e0e0e0; padding-bottom: 10px; font-family: var(--font-code);
}

.policy-list { list-style: none; padding: 0; margin: 0; font-size: 0.95rem; }
.policy-list li { margin-bottom: 15px; padding-left: 24px; position: relative; }
/* Default Icon (Contact Page uses checkmark) */
.policy-list li::before {
    content: "✔"; color: var(--accent-cyan); position: absolute; left: 0; top: 2px; font-weight: bold;
}
/* Override for Pricing Page (Prohibited items) - if needed later */
.pricing-page .policy-list li::before { content: "🚫"; }

.office-row { margin-bottom: 15px; font-size: 0.9rem; }
.office-label { font-weight: bold; color: var(--text-sub); display: block; font-size: 0.8rem; }

/* =========================================
   6. WORDPRESS UTILITIES & MOBILE
   ========================================= */
body.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) { body.admin-bar .site-header { top: 46px; } }

@media (max-width: 768px) {
    .main-nav { display: none; }
    .contact-layout { grid-template-columns: 1fr; }
    .price-table th, .price-table td { display: block; width: 100%; }
}

/* --- Final Adjustments for Contact Page --- */

/* 1. Policy List Strong Text Color (Blue) */
.contact-layout .policy-list li strong {
    color: var(--accent-blue) !important;
}

/* 2. Google Map Placeholder Force Display */
.map-placeholder {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 300px !important;
    background: #e9ecef !important;
    border: 1px solid #ddd;
    border-radius: 8px;
    color: #888;
    font-family: var(--font-code);
    margin-top: 20px;
}
/* 中身が空でも文字を出す（CSSで擬似要素として表示） */
/*
.map-placeholder::after {
    content: "🗺️ Google Map Area";
    display: block;
}
*/
/* map-placeholderの中にあるiframeを、親要素のサイズに強制的に合わせる */
.map-placeholder iframe {
    width: 100% !important;
    height: 100% !important;
    display: block; /* 隙間防止 */
}

/* =========================================
   7. NAVIGATION DROPDOWN (Added)
   ========================================= */
/* ドロップダウンの親ラッパー */
.nav-item-dropdown {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
}

/* 親メニュー（シミュレータ、技術選定など） */
.nav-link-parent {
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
}
/* 下矢印アイコン */
.nav-link-parent::after {
    content: "▼";
    font-size: 0.6em;
    opacity: 0.7;
    margin-top: 2px;
}

/* ドロップダウンメニュー本体 */
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: #fff;
    min-width: 180px;
    border-radius: 6px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    padding: 10px 0;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    border: 1px solid rgba(0,0,0,0.05);
    z-index: 9999;
}
/* ホバー時の表示 */
.nav-item-dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* ドロップダウン内のリンク */
.dropdown-item {
    display: block;
    padding: 10px 20px;
    font-size: 0.9rem;
    color: var(--text-main);
    transition: background 0.2s;
    text-align: left;
    white-space: nowrap;
}
.dropdown-item:hover {
    background-color: var(--bg-secondary);
    color: var(--accent-blue);
}

/* --- Dark Theme Adjustment (for LP) --- */
/* LP(.fixed-header)内のドロップダウンは黒くする */
.fixed-header .dropdown-menu {
    background: rgba(30, 30, 30, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.fixed-header .dropdown-item {
    color: #d4d4d4;
}
.fixed-header .dropdown-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #4ec9b0; /* Accent Cyan */
}

/* =========================================
   8. FOOTER SPLIT LAYOUT
   ========================================= */
.footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between; /* 左右に配置 */
    align-items: center;
    flex-direction: row-reverse; /* 右：リンク、左：コピーライトにするため反転 */
    text-align: right;
}

.footer-link a {
    font-size: 0.85rem;
    color: #555;
    text-decoration: none;
    transition: color 0.2s;
}
.footer-link a:hover { color: var(--accent-blue); }

.footer-copy {
    font-size: 0.85rem;
    color: #888;
    font-family: var(--font-code);
}

/* Mobile: 縦積みに戻す */
@media (max-width: 768px) {
    .footer-inner {
        flex-direction: column; /* 縦積み */
        gap: 15px;
        text-align: center;
    }
}

/* =========================================
   9. MOBILE HAMBURGER MENU (Added)
   ========================================= */
/* ハンバーガーボタン (スマホのみ表示) */
.hamburger-btn {
    display: none; /* PCでは非表示 */
    position: fixed;
    top: 15px;
    right: 20px;
    width: 40px;
    height: 40px;
    z-index: 10001; /* 最前面 */
    cursor: pointer;
    background: transparent;
    border: none;
    padding: 0;
}
.hamburger-btn span {
    display: block;
    width: 26px;
    height: 2px;
    background-color: var(--accent-blue); /* デフォルト色 */
    margin: 6px auto;
    transition: all 0.3s ease-in-out;
    border-radius: 2px;
}

/* LP(黒背景)用のボタン色調整 */
.fixed-header .hamburger-btn span {
    background-color: #fff;
}

/* ボタンのアニメーション (×印になる) */
.hamburger-btn.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hamburger-btn.active span:nth-child(2) { opacity: 0; }
.hamburger-btn.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* モバイルメニュー本体 (全画面オーバーレイ) */
.mobile-nav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(30, 30, 30, 0.98); /* 統一してダークテーマでカッコよく */
    z-index: 10000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}
.mobile-nav-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* メニューリンク */
.mobile-nav-link {
    font-family: var(--font-body);
    font-size: 1.2rem;
    font-weight: 700;
    color: #d4d4d4;
    text-decoration: none;
    margin: 15px 0;
    padding: 10px 20px;
    transition: color 0.2s;
}
.mobile-nav-link:hover { color: var(--accent-cyan); }
.mobile-nav-btn {
    margin-top: 30px;
    padding: 12px 30px;
    background: var(--accent-blue);
    color: #fff;
    border-radius: 30px;
    font-weight: bold;
    text-decoration: none;
}

/* スマホ表示時の適用 */
@media (max-width: 768px) {
    .hamburger-btn { display: block; }
    /* 既存ナビを消す */
    .main-nav, .header-nav { display: none !important; }
}

/* =========================================
   10. LP HEADER MOBILE FIX (Added)
   ========================================= */
@media (max-width: 768px) {
    /* LPのロゴを縦積みに変更 */
    .fixed-header .header-logo {
        flex-direction: column;
        align-items: flex-start;
        line-height: 1.2;
    }
    
    /* 英語部分(span)のサイズ調整と配置 */
    .fixed-header .header-logo span {
        display: block;          /* 改行させる */
        margin-left: 0;          /* 横の余白を消す */
        margin-top: 2px;
        font-size: 0.75rem;      /* 小さくする */
        color: var(--accent-cyan);
        opacity: 0.9;
    }
    
    /* "| " の文字が邪魔なら透明にして隠す小技（任意） */
    /* ※HTML内の " | Tech-Lead..." の "|" だけ消すのはCSSでは難しいので、
       見た目を整えるためフォントサイズ調整だけで十分綺麗になります */
       
    /* メニューボタンの位置微調整 */
    .hamburger-btn {
        top: 10px; /* 少し上に */
    }
}

/* =========================================
   11. LP HEADER LOGO FIX (Global)
   ========================================= */
/* LP(.fixed-header)のロゴを、PC/スマホ問わず常に縦積みにする */
.fixed-header .header-logo {
    display: flex;
    flex-direction: column !important; /* 縦並びを強制 */
    align-items: flex-start !important;
    line-height: 1.2;
}

/* サブタイトル(英語部分)のデザイン調整 */
.fixed-header .header-logo span {
    display: block;
    margin-left: 0 !important; /* 横並び用の余白を削除 */
    margin-top: 2px;
    font-size: 0.75rem !important; /* プロフィールと同じ小サイズに */
    color: var(--accent-cyan);
    font-family: var(--font-code);
    opacity: 0.9;
}

/* =========================================
   12. LP HEADER BUTTON COLOR (Added)
   ========================================= */
/* LP(.fixed-header)のお問い合わせボタンを明るくする */
.fixed-header .header-btn {
    /* ▼▼▼ ここで色を指定します ▼▼▼ */
    color: #4ec9b0;
    border-color: #4ec9b0;
    /* ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ */
}

/* ホバー時の挙動（背景色で塗りつぶし） */
.fixed-header .header-btn:hover {
    background-color: #4ec9b0; /* 上と同じ色にする */
    border-color: #4ec9b0;
    color: #1e1e1e; /* 文字は黒く抜く */
    box-shadow: 0 0 20px rgba(78, 201, 176, 0.4); /* ふわっと光らせる */
}

/* =========================================
   13. STANDARD CTA BUTTON (Added)
   ========================================= */
/* 下層ページ用のシンプルなボタンコンテナ */
.std-cta-wrapper {
    text-align: center;
    margin: 60px 0 80px; /* フッタ前の余白 */
    padding: 0 20px;
}

/* ボタン本体のデザイン */
.std-cta-btn {
    display: inline-block;
    background-color: var(--accent-blue);
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    padding: 16px 60px;
    border-radius: 50px; /* 丸みを持たせて親しみやすく */
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(0, 86, 179, 0.3);
    transition: all 0.3s ease;
}

.std-cta-btn:hover {
    background-color: #004494;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 86, 179, 0.4);
    color: #fff;
}