/*
Theme Name: NEVER Original Theme - Contact Advanced
Author: NEVER Inc.
Version: 12.0
*/

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@700;900&family=Inter:wght@700;900&display=swap');

:root {
    --primary-blue: #00429d;
    --accent-red: #d30000;
    --black: #111111;
    --white: #ffffff;
    --bg-gray: #f0f0f0;
}

/* --- 全体基本設定 --- */
* { box-sizing: border-box; }
body { 
    font-family: 'Noto Sans JP', sans-serif; 
    margin: 0; 
    background-color: var(--bg-gray); 
    color: var(--black); 
    line-height: 1.6; 
    overflow-x: hidden; 
}

/* --- ヘッダー設定 --- */
header { 
    background: var(--white); 
    border-bottom: 5px solid var(--black); 
    padding: 10px 5%; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    position: sticky; 
    top: 0; 
    z-index: 1000; 
}
.header-logo { font-size: 1.5rem; font-weight: 900; color: var(--primary-blue); text-decoration: none; }
.header-nav { display: flex; align-items: center; gap: 30px; }
.header-menu-list { display: flex; list-style: none; margin: 0; padding: 0; gap: 25px; }
.header-menu-list li a { text-decoration: none; color: var(--black); font-weight: 900; font-size: 0.9rem; }

/* ヘッダーCTAボタン（押し込みアニメ） */
.header-cta {
    background: var(--accent-red);
    color: #fff;
    padding: 10px 25px;
    text-decoration: none;
    font-weight: 900;
    font-size: 0.9rem;
    border: 3px solid var(--black);
    box-shadow: 4px 4px 0px var(--black);
    transition: 0.1s;
    position: relative;
    top: 0;
    left: 0;
}
.header-cta:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0px var(--black); background-color: #ff0000; }
.header-cta:active { transform: translate(4px, 4px); box-shadow: 0px 0px 0px var(--black); }

/* --- ファーストビュー (Hero Visual) --- */
.hero { 
    height: 100vh; /* 以前の70vhから全画面に変更 */
    display: flex; 
    align-items: center; 
    justify-content: center; 
    position: relative;
    background: linear-gradient(90deg, var(--primary-blue) 50%, var(--accent-red) 50%); 
    border-bottom: 10px solid var(--black); 
    overflow: hidden;
}

/* 中央イラストの配置 */
.center-visual {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    width: 45vw;
    max-width: 700px;
    pointer-events: none;
    filter: drop-shadow(0 0 30px rgba(0,0,0,0.3));
    animation: floatImage 8s ease-in-out infinite;
}
.img-pc { display: block; width: 100%; height: auto; }
.img-sp { display: none !important; }

@keyframes floatImage {
    0%, 100% { transform: translate(-50%, -50%); }
    50% { transform: translate(-50%, -53%); }
}

/* コンテンツレイヤー */
.hero-content {
    flex: 1;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: var(--white);
}

/* UXボタン（EXPLORE/DECODE）共通設定 */
.ux-link {
    display: flex;
    align-items: center;
    background: var(--white);
    color: var(--black);
    padding: 12px 25px;
    text-decoration: none;
    font-weight: 900;
    border: 4px solid var(--black);
    box-shadow: 6px 6px 0px var(--black);
    transition: 0.2s;
    white-space: nowrap; /* 一行表示 */
}
.ux-link:hover { transform: translate(3px, 3px); box-shadow: 3px 3px 0px var(--black); }

/* --- セクションタイトル --- */
.container { width: 90%; max-width: 1200px; margin: 0 auto; padding: 100px 0; }
.section-title { 
    background: var(--primary-blue); 
    color: var(--white); 
    display: inline-block; 
    padding: 15px 40px; 
    font-size: 2rem; 
    font-weight: 900; 
    border: 5px solid var(--black); 
    box-shadow: 8px 8px 0px var(--black); 
    margin-bottom: 60px; 
    position: relative; 
}
.section-title::after { content: ""; position: absolute; top: 100%; left: 30px; width: 6px; height: 30px; background: #000; }

/* --- お問い合わせフォーム --- */
.contact-container { background: var(--white); border: 8px solid var(--black); padding: 60px 50px; box-shadow: 20px 20px 0px var(--primary-blue); }
.form-group label { display: block; font-weight: 900; font-size: 1.2rem; margin-bottom: 10px; }
.form-input { width: 100%; padding: 18px; border: 4px solid var(--black); font-size: 1.1rem; background: var(--bg-gray); transition: 0.2s; }
.btn-submit { background: var(--accent-red); color: #fff; border: 5px solid var(--black); padding: 20px 60px; font-weight: 900; font-size: 1.5rem; cursor: pointer; box-shadow: 8px 8px 0px var(--black); transition: 0.1s; }

/* --- フッターエリア --- */
footer { background: var(--black); color: var(--white); padding: 80px 0; border-top: 10px solid var(--accent-red); }
.footer-layout { display: flex; justify-content: space-between; gap: 60px; flex-wrap: wrap; }
.footer-section { flex: 1; min-width: 300px; }

/* ミニテーブル（会社概要・ナビ用） */
.footer-mini-title { background: var(--accent-red) !important; border: 1px solid #fff !important; font-size: 0.8rem !important; padding: 3px 12px !important; display: inline-block !important; margin-bottom: 20px !important; letter-spacing: 0.1em; }
.info-table.mini { width: 100%; font-size: 0.75rem !important; border-collapse: collapse; }
.info-table.mini th { width: 90px; text-align: left; color: #888; font-weight: 400; padding: 10px 0; border-bottom: 1px solid #222; }
.info-table.mini td { padding: 10px 0; color: #ccc; border-bottom: 1px solid #222; }
.info-table.mini a { color: #fff; text-decoration: none; transition: 0.3s; }
.info-table.mini a:hover { color: var(--accent-red); padding-left: 5px; }

.footer-copyright { text-align: center; margin-top: 50px; font-size: 0.7rem; opacity: 0.4; }

/* =========================================
   レスポンシブ設定：スマホ版（圧迫感解消 & 最適化）
   ========================================= */
@media (max-width: 768px) {
    /* 1. フォントサイズの一括抑制 */
    body { font-size: 14px; }
    .hero h1 { font-size: 1.8rem !important; text-shadow: 4px 4px 0px #000; }
    .section-title { font-size: 1.2rem !important; padding: 10px 20px !important; margin-bottom: 40px !important; }
    .form-group label { font-size: 1rem !important; }
    
    /* 2. ヒーローセクションの画像調整 */
    .img-pc { display: none !important; }
    .img-sp { display: block !important; }
    .center-visual { width: 85vw !important; opacity: 0.8; }

    /* 3. CTAボタンの一行表示を死守 */
    .ux-link, .btn-submit, .header-cta {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        white-space: nowrap !important; /* 絶対に一行 */
        font-size: 0.8rem !important;
        padding: 10px 15px !important;
        width: fit-content !important;
        margin-left: auto;
        margin-right: auto;
    }

    /* 4. 余白（圧迫感）の解消 */
    .container { padding: 50px 20px !important; }
    .contact-container { padding: 30px 20px !important; border-width: 5px !important; }
    .footer-layout { flex-direction: column; gap: 40px; }
    .info-table.mini { font-size: 0.7rem !important; }

    /* 5. グリッドの調整 */
    .grid { grid-template-columns: 1fr; gap: 25px; }
    .card { padding: 30px 20px !important; box-shadow: 8px 8px 0px var(--black); }
}
@media (max-width: 768px) {
    /* 1. サイト内のすべての主要ボタンをターゲットにする */
    .btn-submit, 
    .header-cta, 
    .ux-link, 
    .cta-button, 
    [class*="button"], /* クラス名にbuttonを含むものすべて */
    [class*="btn"]    /* クラス名にbtnを含むものすべて */ {
        
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        
        /* 改行を「禁止」する最重要プロパティ */
        white-space: nowrap !important; 
        
        /* ボタンの幅を「文字の長さに合わせる」 */
        width: auto !important;
        min-width: 200px !important; 
        max-width: 92vw !important; /* 画面の端に少し余白を残す */
        
        /* 文字サイズを一行に収まる限界まで下げる */
        font-size: 0.75rem !important; /* それでも切れる場合は 0.7rem に */
        letter-spacing: 0.05em !important;
        
        /* 左右のパディングを削って横幅を節約 */
        padding: 12px 15px !important;
        
        margin-left: auto !important;
        margin-right: auto !important;
        height: auto !important;
    }
}

/* --- Privacy Policy Page --- */
.privacy-page {
    background: var(--bg-gray);
    min-height: 100vh;
}

.privacy-hero-title {
    background: var(--black) !important; /* タイトルはあえて黒で引き締める */
    margin-top: 40px;
}

.privacy-content {
    background: #fff;
    border: 6px solid var(--black);
    padding: 60px 50px;
    box-shadow: 15px 15px 0px var(--primary-blue);
    margin-top: 40px;
}

.privacy-content section {
    margin-bottom: 50px;
    padding: 0;
}

.privacy-content h2 {
    font-size: 1.3rem;
    font-weight: 900;
    border-bottom: 4px solid var(--accent-red);
    display: inline-block;
    margin-bottom: 20px;
}

.privacy-content p, 
.privacy-content li {
    font-size: 1rem;
    line-height: 1.8;
    color: #333;
    text-align: justify;
}

.privacy-content ul {
    padding-left: 20px;
}

.privacy-content li {
    margin-bottom: 10px;
    list-style-type: square;
}

/* --- スマホ最適化：文字を凝縮して圧迫感を消す --- */
@media (max-width: 768px) {
    .privacy-content {
        padding: 30px 20px;
        border-width: 4px;
        box-shadow: 10px 10px 0px var(--primary-blue);
    }

    .privacy-content h2 {
        font-size: 1.1rem; /* スマホで見出しをさらに小さく */
        margin-bottom: 15px;
    }

    .privacy-content p, 
    .privacy-content li {
        font-size: 0.85rem; /* スマホでは0.85rem(約13px)に凝縮 */
        line-height: 1.6;
    }

    .privacy-hero-title {
        font-size: 1.4rem !important;
        padding: 10px 20px !important;
    }
}