@charset "UTF-8";

/* --- 1. 変数・基本設定 --- */
:root {
    --deep-green: #0a1f14;
    --primary: #1b4332;
    --accent: #2d6a4f;
    --highlight: #4ade80;
    --gold: #d4af37;
    --gold-bright: #ffd700;
    --white: #ffffff;
    --text-light: #e0e7e3;
    --glass-bg: rgba(255, 255, 255, 0.05);
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-blur: blur(12px);
    --font-base: 'Noto Sans JP', sans-serif;
    --container-width: 1200px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--font-base);
    background-color: #153828;
    color: var(--text-light);
    line-height: 1.8;
    overflow-x: hidden;
}
a { text-decoration: none; color: inherit; transition: 0.3s; }
ul { list-style: none; }
img { max-width: 100%; display: block; }
.container { width: 90%; max-width: var(--container-width); margin: 0 auto; }
.container-sm { max-width: 800px; margin: 0 auto; padding: 0 20px; }
.text-center { text-align: center; }

/* --- 2. 背景アニメーション (Liquid & Blob) --- */
.liquid-container {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -2; overflow: hidden;
    background-image: url('../images/common/hero.png');
    background-size: cover; background-position: center; background-attachment: fixed;
}
.liquid-container::after {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(circle at center, rgba(8, 28, 21, 0.7) 0%, rgba(5, 16, 10, 0.9) 100%);
    z-index: -1;
}

/* 粘り気のあるフィルターを適用するコンテナ */
.blob-container { 
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; 
    filter: url('#goo'); /* HTML側のSVGフィルタと連動 */
    opacity: 0.95; pointer-events: none; 
}

/* 玉の共通設定 */
.blob { 
    position: absolute; border-radius: 50%; mix-blend-mode: screen; 
    animation: move 20s infinite ease-in-out alternate; 
    box-shadow: 0 0 60px rgba(74, 222, 128, 0.3); 
}

/* 各玉の個別設定（4つすべて揃えました） */
.blob-1 { width: 500px; height: 500px; background: #00ffa3; bottom: -20%; left: -10%; animation-duration: 5s; box-shadow: 0 0 80px rgba(0, 255, 163, 0.4); }
.blob-2 { width: 300px; height: 300px; background: #5effad; bottom: -5%; right: 5%; animation-duration: 8s; animation-direction: alternate-reverse; }
.blob-3 { width: 300px; height: 300px; background: #00ffa3; bottom: 30%; right: 10%; animation-duration: 8s; }
.blob-4 { 
    width: 230px; height: 230px; 
    background: radial-gradient(circle at 30% 30%, #fff9e3 0%, #ffcc33 30%, #b8860b 60%, #805500 100%); 
    bottom: 18%; right: 27%; animation-duration: 7s; 
    box-shadow: 0 0 100px rgba(184, 134, 11, 0.6); 
    filter: contrast(1.1) saturate(1.2); 
}

@keyframes move {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(10%, 15%) scale(1.1); }
}

/* HTML側のSVGフィルタが消えないようにするための設定 */
.svg-filter { position: absolute; width: 0; height: 0; pointer-events: none; }

/* --- 3. 共通コンポーネント --- */
.section { padding: 120px 0; }
.section-title {
    display: block; width: fit-content; margin: 0 auto 80px; text-align: center;
    font-size: clamp(2.5rem, 5vw, 3.5rem); font-weight: 900; letter-spacing: 0.15em; color: var(--white);
    position: relative; padding-bottom: 15px;
}
.section-title::after {
    content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 4px;
    background: radial-gradient(ellipse at center, rgba(212, 175, 55, 0.8) 0%, rgba(212, 175, 55, 0) 80%);
}

.btn-primary {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 16px 50px; background: transparent; color: var(--gold); border: 2px solid var(--gold);
    font-weight: 700; border-radius: 50px; letter-spacing: 0.15em; text-transform: uppercase;
    position: relative; overflow: hidden; z-index: 1; transition: 0.4s;
}
.btn-primary:hover { background: var(--gold); color: var(--white); transform: translateY(-3px); box-shadow: 0 10px 30px rgba(212, 175, 55, 0.4); }

.glass-card {
    background: var(--glass-bg); backdrop-filter: var(--glass-blur); 
    border: 1.5px solid rgba(212, 175, 55, 0.3); border-radius: 12px;
}

/* --- 4. ヘッダー & フッター --- */
/* ==========================================
   4. ヘッダー (ロゴ・ナビ・レスポンシブ統合)
   ========================================== */
.site-header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    padding: 15px 0;
    background: rgba(10, 31, 20, 0.8);
    backdrop-filter: var(--glass-blur);
    border-bottom: 1px solid var(--glass-border);
}

.header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ロゴエリア (以前のスタイルを完全に保持) */
.site-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.logo-mark {
    height: 40px; /* PCでのロゴの高さ */
    width: auto;
    display: block;
}

.logo-text {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--white);
    letter-spacing: 0.1em;
    line-height: 1;
}

/* ナビゲーションメニュー (PCレイアウト) */
.site-nav {
    display: flex;
    align-items: center;
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 30px;
    align-items: center;
}

.nav-links a {
    position: relative;
    color: var(--text-light);
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.05em;
    transition: 0.3s;
    text-decoration: none;
}

/* 通常リンクのホバー演出 */
.nav-links a:not(.btn-header-contact):hover {
    color: var(--gold-bright);
}

.nav-links a:not(.btn-header-contact)::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--gold);
    transition: 0.3s;
}

.nav-links a:not(.btn-header-contact):hover::after {
    width: 100%;
}

/* --- コンタクトボタン (PC用・統合版) --- */
.btn-header-contact {
    /* 1. 基本のデザイン：金枠・金文字 */
    border: 1px solid rgba(212, 175, 55, 0.5) !important;
    color: var(--gold) !important;
    padding: 10px 24px !important;
    border-radius: 4px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease !important;
}

/* 2. PCでのホバー演出：より輝く金色へ */
.btn-header-contact:hover {
    border-color: var(--gold-bright) !important;
    color: var(--gold-bright) !important;
    background: rgba(212, 175, 55, 0.1); /* ほんのり金色の背景 */
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.2);
    transform: translateY(-2px);
}

/* 3. 特殊設定：他のメニューのような下線を出さない */
.btn-header-contact::after {
    display: none !important;
}

/* --- ハンバーガーボタン --- */
.menu-toggle {
    display: none; /* PCでは非表示 */
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 1001;
}

.bar {
    display: block;
    width: 25px;
    height: 2px;
    margin: 6px 0;
    background-color: var(--white);
    transition: 0.4s;
}

/* --- 5. フッター --- */
.site-footer {
    background: rgba(0, 0, 0, 0.9);
    padding: 80px 0 0;
    border-top: 1px solid rgba(212, 175, 55, 0.2);
    color: var(--white);
}

.footer-container {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    padding-bottom: 60px;
}

/* 左側：会社情報エリア */
.footer-info {
    width: 55%;
    flex-shrink: 0;
}

.footer-logo {
    font-size: 1.8rem;
    font-weight: 900;
    color: var(--white);
    text-decoration: none;
    letter-spacing: 0.1em;
    display: block;
    margin-bottom: 25px;
}

.footer-contact-details p {
    font-size: 0.9rem;
    margin-bottom: 15px;
    color: var(--white);
    display: flex;
    align-items: center;
    letter-spacing: 0.05em;
    line-height: 1.6;
}

.footer-contact-details i {
    color: var(--gold);
    margin-right: 15px;
    width: 20px;
    text-align: center;
    font-size: 1.1rem;
}

/* 右側：ナビゲーションメニュー */
.footer-nav-single {
    width: 45%;
    padding-left: 20px;
    text-align: left;
}

.footer-nav-single ul {
    list-style: none;
    padding: 0;
}

.footer-nav-single li {
    margin-bottom: 15px;
}

.footer-nav-single a {
    text-decoration: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    transition: all 0.3s ease;
    display: inline-block;
}

.footer-nav-single a:hover {
    color: var(--gold);
    transform: translateX(8px); /* ホバー時に少し右に動く演出 */
}

/* 最下部：コピーライト */
.footer-bottom {
    background: #000000;
    padding: 25px 0;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.copyright {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 0.05em;
}

/* --- 5. 下層共通 Hero --- */
.page-hero { background-color: #153828; padding: 160px 0 80px; text-align: center; border-bottom: 1px solid rgba(212, 175, 55, 0.2); }
.page-title { font-size: clamp(2.5rem, 6vw, 4rem); font-weight: 900; color: var(--gold); letter-spacing: 0.15em; margin-bottom: 15px; text-transform: uppercase; }
.page-subtitle { font-size: 1.1rem; color: rgba(255, 255, 255, 0.6); }



/* ==========================================
   共通レスポンシブ (768px以下：スマホ・タブレット)
   ========================================== */
@media (max-width: 768px) {
    /* --- 1. ヘッダー・タイトル調整 --- */
    body {
        font-size: 0.95rem; /* 約15px相当。小さすぎず、情報量も確保できる絶妙なサイズ */
        line-height: 1.75;  /* 行間を広めに取ることで、長文の圧迫感を軽減 */
        color: var(--text-light);
    }
    
    h2 {
        font-size: 1.6rem !important; /* 目を引くが、画面からはみ出さないサイズ */
        line-height: 1.3;
        margin-bottom: 25px;
    }

    h3 {
        font-size: 1.3rem !important;
        margin-bottom: 15px;
    }

    .site-nav-pc { display: none; }
    
    .page-title, .hero-title {
        font-size: 2.2rem !important;
        line-height: 1.2;
    }

    .page-subtitle,
    .section-intro,
    .legal-intro-text {
        font-size: 1rem; /* 本文より一回り大きくして印象を強める */
        line-height: 1.8;
        opacity: 0.9;
    }

    ul li, ol li, dl dd {
        font-size: 0.95rem;
        margin-bottom: 10px;
    }

    .small-text,
    .price-note,
    footer p {
        font-size: 0.8rem;
        opacity: 0.8;
    }

    /* ロゴの調整 */
    .logo-mark { height: 32px; }
    .logo-text { font-size: 1.2rem; }

    /* --- 2. ハンバーガーボタン --- */
    .menu-toggle {
        display: block;
        background: transparent;
        border: none;
        cursor: pointer;
        z-index: 1001;
        -webkit-tap-highlight-color: transparent; /* タップ時の青枠を消す */
    }

    .bar {
        display: block;
        width: 25px;
        height: 2px;
        margin: 6px 0;
        background-color: var(--white);
        transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* ボタンの「×」アニメーション */
    .menu-toggle.is-active .bar:nth-child(2) { opacity: 0; }
    .menu-toggle.is-active .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .menu-toggle.is-active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

    /* --- 3. 全画面モバイルメニュー --- */
    .nav-links {
        display: none;
        flex-direction: column;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: rgba(10, 31, 20, 0.98); /* 深い緑 */
        justify-content: center;
        align-items: center;
        gap: 35px;
        z-index: 1000;
        padding: 0;
    }

    .nav-links.active {
        display: flex;
    }

    /* メニュー内のリンク操作 (タップ反応) */
    .nav-links a {
        font-size: 1.4rem;
        -webkit-tap-highlight-color: transparent;
        transition: 0.2s;
    }

    /* タップした瞬間に金色に光るフィードバック */
    .nav-links a:not(.btn-header-contact):active {
        color: var(--gold-bright) !important;
    }

    /* 下線アニメーション（タップでスッと伸びる） */
    .nav-links a:not(.btn-header-contact)::after {
        content: '';
        position: absolute;
        bottom: -8px;
        left: 0;
        width: 0;
        height: 2px;
        background: var(--gold);
        transition: 0.3s ease;
    }

    .nav-links a:not(.btn-header-contact):active::after {
        width: 100%;
    }

    /* コンタクトボタン（初期：白 → タップ：金） */
    .btn-header-contact {
        color: var(--white) !important;
        border: 1px solid rgba(255, 255, 255, 0.5) !important;
        background: transparent !important;
        padding: 12px 40px !important;
        border-radius: 5px;
        font-size: 1.1rem !important;
        text-align: center;
    }

    .btn-header-contact:active {
        color: var(--gold-bright) !important;
        border-color: var(--gold-bright) !important;
        background: rgba(212, 175, 55, 0.15) !important;
        transform: scale(0.96); /* 押し込み演出 */
        box-shadow: 0 0 15px rgba(212, 175, 55, 0.3);
    }

    /* --- 4. フッター (ご提示いただいたコードを統合) --- */
    .footer-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .footer-info, 
    .footer-nav-single {
        width: 100%;
        padding-left: 0;
    }

    .footer-info {
        margin-bottom: 40px;
    }

    .footer-nav-single {
        text-align: center;
    }

    .footer-contact-details p {
        justify-content: center;
    }

    .footer-nav-single a:hover {
        transform: none; /* スマホではスライド演出をオフ */
    }
}