/* --- 基本設定 & 変数 --- */
:root {
    --primary-color-start: #6a11cb;
    --primary-color-end: #2575fc;
    --text-dark: #333;
    --text-light: #666;
    --bg-white: #ffffff;
    --bg-light: #f8f9fa;
    --shadow-light: rgba(0, 0, 0, 0.05);
    --shadow-dark: rgba(0, 0, 0, 0.1);
    --color-indigo-600: #4f46e5;
    --color-gray-900: #111827;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--text-dark);
    margin: 0;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* === アニメーション === */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- サイト共通ヘッダー --- */
.site-header {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 15px 0;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 999;
    box-shadow: 0 2px 20px var(--shadow-light);
    transition: all 0.3s ease;
}

.site-header.scrolled {
    box-shadow: 0 5px 25px var(--shadow-dark);
}

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

.logo img { 
    height: 40px; 
    width: auto; 
    display: block; 
}

.nav-links { 
    display: flex; 
    list-style: none; 
    gap: 30px; 
    margin: 0;
    padding: 0;
}

.nav-links a { 
    text-decoration: none; 
    color: var(--color-gray-900); 
    font-weight: 500; 
    transition: all 0.3s ease; 
    position: relative; 
    padding-bottom: 5px; 
}

.nav-links a:hover,
.nav-links a.nav-active {
    color: var(--primary-color-start); 
}

.nav-links a::after { 
    content: ''; 
    position: absolute; 
    width: 0; 
    height: 2px; 
    bottom: 0; 
    left: 50%; 
    transform: translateX(-50%); 
    background: linear-gradient(45deg, var(--primary-color-start), var(--primary-color-end)); 
    transition: width 0.3s ease; 
}

.nav-links a:hover::after,
.nav-links a.nav-active::after {
    width: 100%; 
}

/* --- ハンバーガーメニュー --- */
.mobile-nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 10002;
}

.mobile-nav-toggle .fa-bars,
.mobile-nav-toggle .fa-times {
    font-size: 28px;
    color: var(--color-gray-900);
}

.mobile-nav-toggle .fa-times {
    display: none;
}

@media (max-width: 768px) {
    .site-header nav { padding: 0 20px; }
    .mobile-nav-toggle { display: block; }
    .nav-links {
        position: fixed; 
        top: 70px;
        left: 0; 
        width: 100%;
        height: calc(100vh - 70px); 
        background: rgba(255, 255, 255, 0.98);
        flex-direction: column; 
        align-items: center; 
        justify-content: center;
        gap: 40px; 
        transform: translateX(100%);
        transition: transform 0.3s ease-in-out;
        z-index: 9998;
    }
    .nav-links.active { transform: translateX(0); }
    .nav-links a { font-size: 1.5rem; }
    .mobile-nav-toggle.active .fa-bars { display: none; }
    .mobile-nav-toggle.active .fa-times { display: block; }
}

/* ===== サイト共通フッター ===== */
footer { 
    background: #2c3e50; 
    color: white; 
    text-align: center; 
    padding: 40px 20px; 
}

footer .container { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    gap: 25px; 
}

.footer-social-links { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    gap: 30px; 
    flex-wrap: wrap; 
}

footer a { 
    color: rgba(255, 255, 255, 0.8); 
    text-decoration: none; 
    font-size: 1rem; 
    font-weight: 500; 
    transition: all 0.3s ease; 
    display: flex; 
    align-items: center; 
    gap: 8px; 
}

footer a:hover { 
    color: white; 
    transform: translateY(-2px); 
}

footer p { 
    font-size: 0.9rem; 
    color: rgba(255, 255, 255, 0.6); 
    margin: 0; 
}

/* ===== フッターの追加リンクスタイル ===== */
.footer-links {
    margin-top: 15px;
    order: 1; /* pタグより上に表示するための指定 */
}

.footer-links a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: white;
    text-decoration: underline;
}

footer .container > p {
    order: 2; /* pタグを一番下に */
    margin-top: 15px;
}