:root {
    --color-base: #F7F4EB;
    --color-main: #91A384;
    --color-accent: #594330;
    --font-jp: "Shippori Mincho", serif;
    --font-en: "Cinzel", serif;
    --hero-bg-image: none; /* JSで設定 */
}

/* ============================================
   1. 基本設定 & 夜モード変数
   ============================================ */

/* 夜モードの変数上書き */
body.night-mode {
    --color-base: #1F2623;
    --color-accent: #F7F4EB; 
    --color-main: #91A384; 
}

/* リセット */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body { 
    background-color: var(--color-base); 
    color: var(--color-accent); 
    font-family: var(--font-jp); 
    font-size: 18px; 
    line-height: 2.0; 
    overflow-x: hidden; 
}

/* 文字選択時の色（アクセント） */
::selection { background: var(--color-main); color: #fff; }

/* --- スクロールバーのカスタマイズ --- */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--color-base); }
::-webkit-scrollbar-thumb { 
    background-color: var(--color-main); 
    border-radius: 5px; 
    border: 2px solid var(--color-base); 
}
::-webkit-scrollbar-thumb:hover { background-color: var(--color-accent); }


/* ============================================
   2. レイアウト & 共通パーツ
   ============================================ */

/* 背景用スクリーン（最背面） */
#dynamic-bg {
    position: fixed; top: 0; left: 0; width: 100%; height: 100vh;
    z-index: 0;
    background-position: center; background-size: cover; background-repeat: no-repeat;
    opacity: 0.15; filter: blur(5px);
    transition: background-image 0.5s ease-in-out;
}

/* コンテンツの重なり順（背景より上） */
.site-header, .gallery-section, 
.section-profile, .section-contact, .back-to-top, 
.lightbox, .loading-screen {
    position: relative; z-index: 10;
}

.section-title { 
    text-align: center; font-family: var(--font-en); 
    color: var(--color-main); margin-bottom: 40px; font-size: 1.8rem; 
}

/* 共通セクションの余白 */
.gallery-section, .section-profile, .section-workflow, .section-contact { padding: 80px 5%; }


/* ============================================
   3. ヘッダー
   ============================================ */
.site-header { padding: 30px; display: flex; justify-content: space-between; align-items: center; }

.logo { 
    font-family: var(--font-jp); font-size: 1.5rem; 
    letter-spacing: 0.1em; font-weight: 600; color: var(--color-accent);
}

.greeting { font-family: var(--font-en); font-size: 0.9rem; color: var(--color-main); cursor: pointer; }


/* ============================================
   4. ヒーローセクション（トップ画）
   ============================================ */
.hero { 
    width: 100%;
    aspect-ratio: 16 / 9; /* 比率固定 */
    max-height: 80vh; min-height: 500px;
    display: flex; justify-content: center; align-items: center; text-align: center;
    position: relative; overflow: hidden;
    background-color: var(--color-base); 
    z-index: 1; 
}

.hero::before {
    content: '';
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-image: var(--hero-bg-image);
    background-size: cover; background-position: center;
    opacity: 0.7; 
    filter: brightness(1.2) grayscale(20%);
    z-index: 0;
    animation: breathe 20s infinite alternate ease-in-out;
}
/* 夜モード調整 */
body.night-mode .hero { background-color: var(--color-base); }
body.night-mode .hero::before { opacity: 0.4; filter: brightness(0.8); }

@keyframes breathe {
    0% { transform: scale(1.0); } 100% { transform: scale(1.15); }
}

.hero-content {
    background-color: rgba(247, 244, 235, 0.6);
    backdrop-filter: blur(8px);
    padding: 60px 40px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    max-width: 90%; width: 600px; margin: 0 auto;
    position: relative; z-index: 2;
}
body.night-mode .hero-content {
    background-color: rgba(31, 38, 35, 0.75);
    border-color: rgba(255, 255, 255, 0.1);
}

.catchcopy { font-size: 2.2rem; margin-bottom: 30px; font-weight: 800; letter-spacing: 0.1em; line-height: 1.6; }
.subcopy { font-size: 1.2rem; opacity: 0.9; }


/* ============================================
   5. ギャラリー
   ============================================ */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; }

.art-card { 
    background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(5px);
    padding: 10px; box-shadow: 0 5px 15px rgba(89, 67, 48, 0.05); 
    transition: transform 0.3s; 
}
.art-card:hover { transform: translateY(-5px); }
.art-card img { width: 100%; height: auto; display: block; aspect-ratio: 1 / 1; object-fit: cover; cursor: pointer; }
.art-title { font-size: 0.9rem; margin-top: 10px; text-align: center; color: var(--color-accent); }

/* タイトル非表示設定 */
#gallery-preview .art-title, #gallery-all .art-title { display: none; }

/* 夜モード調整 */
body.night-mode .art-card { background-color: #252e2a; border: 1px solid var(--color-main); }
body.night-mode img { filter: brightness(0.9); }

/* View More ボタン */
.view-more-container { text-align: center; margin-top: 50px; }
.btn-more { display: inline-block; font-family: var(--font-en); color: var(--color-main); border: 1px solid var(--color-main); padding: 12px 30px; text-decoration: none; letter-spacing: 0.1em; transition: 0.4s; position: relative; overflow: hidden; }
.btn-more:hover { background-color: var(--color-main); color: #fff; padding-right: 40px; }


/* ============================================
   6. プロフィール
   ============================================ */
.section-profile { background-color: #fff; }
body.night-mode .section-profile { background-color: #252e2a; border: 1px solid var(--color-main); }

.profile-container { max-width: 800px; margin: 0 auto; display: flex; align-items: center; gap: 40px; justify-content: center; }
.profile-image img { border-radius: 50%; width: 220px; height: 220px; object-fit: cover; border: 3px solid var(--color-main); }
.profile-desc { font-size: 1.1rem; }

/* 時間差フェードイン */
.delay-fade { opacity: 0; transform: translateY(20px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; }
.section-profile.visible .delay-fade { opacity: 1; transform: translateY(0); transition-delay: 0.5s; }

.sns-links { margin-top: 20px; display: flex; gap: 15px; justify-content: flex-start; }
.sns-btn { text-decoration: none; color: var(--color-main); border: 1px solid var(--color-main); padding: 8px 20px; border-radius: 20px; transition: 0.3s; font-size: 1rem; }
.sns-btn:hover { background-color: var(--color-main); color: #fff; }


/* ============================================
   7. コンタクト & ワークフロー
   ============================================ */
.section-contact { text-align: center; background-color: #eeeae0; }
body.night-mode .section-contact { background-color: #232b28; }

.workflow-btn-wrapper { margin-top: 50px; margin-bottom: 10px; }
.workflow-toggle-btn { background: transparent; border: 1px solid var(--color-accent); color: var(--color-accent); padding: 10px 25px; border-radius: 30px; cursor: pointer; font-family: var(--font-jp); font-size: 1rem; transition: 0.3s; }
.workflow-toggle-btn:hover { background-color: var(--color-accent); color: var(--color-base); }

/* アコーディオン */
.hidden-area { display: none; margin: 0 auto 30px; animation: fadeIn 0.5s ease; }
.hidden-area.is-open { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

/* タイムライン */
.section-contact .timeline { max-width: 500px; margin: 0 auto; text-align: left; }
.timeline { position: relative; border-left: 2px solid var(--color-main); margin-left: 20px; }
.step { margin-bottom: 40px; position: relative; padding-left: 30px; }
.step-number { position: absolute; left: -36px; top: 0; background-color: var(--color-base); color: var(--color-main); font-weight: bold; font-family: var(--font-en); padding: 5px; border: 2px solid var(--color-main); border-radius: 50%; width: 30px; height: 30px; display: flex; justify-content: center; align-items: center; font-size: 0.8rem; }
body.night-mode .step-number { background-color: var(--color-base); }

.step-note { font-size: 0.85rem; opacity: 0.8; margin-top: 5px; }
.step-content p { margin-bottom: 5px; line-height: 1.8; }

/* 料金表（Price List - 提案機能用） */
.price-list {
    max-width: 500px; margin: 0 auto 60px; padding: 30px;
    background-color: #fff; border: 1px dashed var(--color-main); border-radius: 8px;
}
.price-item { display: flex; justify-content: space-between; border-bottom: 1px solid #eee; padding: 10px 0; }
.price-cost { font-weight: bold; color: var(--color-accent); }
.price-note { font-size: 0.8rem; margin-top: 15px; text-align: right; color: #888; }
/* 料金表の夜モード */
body.night-mode .price-list { background-color: #2b3330; border-color: #666; }
body.night-mode .price-item { border-bottom-color: #444; }


/* フォーム */
.contact-form-container { max-width: 600px; margin: 40px auto 0; text-align: left; }
.form-group { margin-bottom: 25px; }
.form-group label { display: block; margin-bottom: 8px; font-size: 0.95rem; color: var(--color-accent); font-weight: 600; }

.contact-form input, .contact-form textarea { width: 100%; padding: 15px; background-color: #fff; border: 1px solid #ddd; border-radius: 4px; font-family: var(--font-jp); font-size: 1rem; color: var(--color-accent); transition: 0.3s; box-shadow: 0 2px 5px rgba(0,0,0,0.02); }
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--color-main); background-color: #fafbf9; }

.submit-btn { display: block; width: 100%; background-color: var(--color-main); color: #fff; font-family: var(--font-jp); font-size: 1.1rem; font-weight: 600; border: none; padding: 15px; border-radius: 5px; cursor: pointer; transition: 0.3s; margin-top: 10px; }
.submit-btn:hover { background-color: var(--color-accent); transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); }

/* 文字数カウンター */
.counter-text {
    text-align: right; font-size: 0.8rem; color: var(--color-main);
    margin-top: 5px; font-family: var(--font-en); opacity: 0.8;
}

/* フォームの夜モード */
body.night-mode .contact-form input, body.night-mode .contact-form textarea {
    background-color: #2b3330; border-color: #444; color: #fff;
}
body.night-mode .contact-form input:focus, body.night-mode .contact-form textarea:focus {
    border-color: var(--color-main); background-color: #333d39;
}


/* ============================================
   8. フッター & プライバシーポリシー
   ============================================ */
.site-footer {
    text-align: center; padding: 30px 20px;
    background-color: var(--color-base); border-top: 1px solid rgba(89, 67, 48, 0.1);
    font-size: 0.8rem; color: var(--color-accent);
    position: relative; z-index: 10;
}
body.night-mode .site-footer { border-top-color: rgba(255, 255, 255, 0.1); }

.privacy-link {
    background: none; border: none; color: var(--color-main);
    text-decoration: underline; cursor: pointer; font-size: 0.8rem;
    margin-top: 10px; font-family: var(--font-en);
}
.privacy-link:hover { color: var(--color-accent); }

/* ポップアップ（モーダル） */
.modal {
    display: none; position: fixed; z-index: 10000; left: 0; top: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.6); backdrop-filter: blur(3px);
}
.modal-content {
    background-color: #fff; margin: 10% auto; padding: 40px;
    border: 1px solid var(--color-main); width: 90%; max-width: 600px;
    border-radius: 8px; box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    max-height: 80vh; overflow-y: auto; animation: fadeIn 0.3s; position: relative;
}
.close-modal { color: #aaa; float: right; font-size: 28px; font-weight: bold; cursor: pointer; }
.close-modal:hover { color: var(--color-accent); }

.modal-content h3 { text-align: center; color: var(--color-main); margin-bottom: 20px; }
.policy-text p { font-size: 0.9rem; line-height: 1.8; margin-bottom: 20px; color: #333; text-align: left; }

/* モーダル夜モード */
body.night-mode .modal-content { background-color: #252e2a; border-color: #fff; }
body.night-mode .policy-text p { color: #eee; }


/* ============================================
   9. 機能パーツ & アニメーション
   ============================================ */

/* 1. ローディング画面（ゆらゆら揺れるみかん） */
.loading-screen {
    position: fixed; top: 0; left: 0; width: 100%; height: 100vh;
    background-color: var(--color-base); z-index: 9999;
    display: flex; justify-content: center; align-items: center;
    transition: opacity 0.8s ease-out, visibility 0.8s ease-out;
}
.loading-screen.loaded { opacity: 0; visibility: hidden; }
.loading-content { text-align: center; color: var(--color-accent); position: relative; }

.swaying-mikan-container { position: relative; width: 80px; height: 100px; margin: 0 auto -45px; }
.mikan-parent {
    display: block; font-size: 3.5rem; position: absolute; bottom: 30px; left: 50%;
    transform-origin: center bottom; transform: translateX(-50%) rotate(-5deg); z-index: 5;
    animation: mikanSway 2s infinite ease-in-out;
}
.mikan-shadow {
    width: 40px; height: 8px; background-color: rgba(89, 67, 48, 0.2); border-radius: 50%;
    position: absolute; bottom: 15px; left: 50%; margin-left: -20px;
    animation: shadowSway 2s infinite ease-in-out;
}
.loading-logo { display: block; font-family: var(--font-jp); font-size: 1.2rem; font-weight: 600; letter-spacing: 0.1em; margin-bottom: 5px; position: relative; z-index: 10; }
.loading-text { font-family: var(--font-en); font-size: 0.9rem; opacity: 0.7; letter-spacing: 0.2em; animation: textBlink 1.5s infinite; position: relative; z-index: 10; }

@keyframes mikanSway {
    0% { transform: translateX(-50%) rotate(-5deg) translateY(0); }
    50% { transform: translateX(-50%) rotate(5deg) translateY(-5px); }
    100% { transform: translateX(-50%) rotate(-5deg) translateY(0); }
}
@keyframes shadowSway {
    0%, 100% { transform: scale(1); opacity: 0.3; }
    50% { transform: scale(0.9); opacity: 0.2; }
}
@keyframes textBlink { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }


/* 2. 昼夜切り替え演出（天体ショー） */
.transition-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100vh;
    z-index: 99999; pointer-events: none; opacity: 0; transition: opacity 0.5s ease;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
}
.transition-overlay.active { pointer-events: auto; opacity: 1; }
.transition-overlay.mode-sun { background-color: #F7F4EB; }
.transition-overlay.mode-moon { background-color: #1F2623; }

.celestial-body { width: 150px; height: 150px; border-radius: 50%; position: absolute; bottom: -200px; }
.celestial-sun { background: radial-gradient(circle, #ffdb4d, #ffae00); box-shadow: 0 0 40px rgba(255, 174, 0, 0.6); }
.celestial-moon { background: radial-gradient(circle at 30% 30%, #fff, #f0f0f0); box-shadow: 0 0 30px rgba(255, 255, 255, 0.4); }

.rise-animation { animation: celestialRise 3s ease-in-out forwards; }
@keyframes celestialRise {
    0% { bottom: -200px; opacity: 1; transform: scale(0.8); }
    50% { bottom: 50%; transform: scale(1.2); }
    100% { bottom: 120vh; opacity: 0; transform: scale(1); }
}

.transition-text {
    font-family: var(--font-en); font-size: 1.5rem; letter-spacing: 0.2em;
    opacity: 0; margin-top: 200px; z-index: 2; transition: opacity 1s;
}
.transition-overlay.active .transition-text { opacity: 1; color: var(--color-main); }


/* 3. ライトボックス */
.lightbox {
    position: fixed; top: 0; left: 0; width: 100%; height: 100vh;
    background: rgba(0,0,0,0.9); display: flex; justify-content: center; align-items: center;
    z-index: 5000; opacity: 0; pointer-events: none; transition: 0.3s;
}
.lightbox.active { opacity: 1; pointer-events: auto; }
.lightbox img { max-width: 90%; max-height: 90%; border: 2px solid #fff; object-fit: contain; }
.close-btn { position: absolute; top: 20px; right: 30px; font-size: 3rem; color: #fff; cursor: pointer; }


/* 4. トップへ戻るボタン & フェードイン */
.back-to-top {
    position: fixed; bottom: 30px; right: 30px; width: 50px; height: 50px;
    background-color: var(--color-main); color: #fff; border: none; border-radius: 50%;
    font-size: 1.2rem; cursor: pointer; box-shadow: 0 4px 10px rgba(89,67,48,0.3);
    z-index: 1000; opacity: 0; pointer-events: none; transition: 0.4s;
}
.back-to-top.visible { opacity: 1; pointer-events: auto; }

.fade-up { opacity: 0; transform: translateY(30px); transition: opacity 0.8s, transform 0.8s; }
.fade-up.visible { opacity: 1; transform: translateY(0); }


/* 5. 光の粒子（夜専用） */
.particle { position: fixed; bottom: -20px; border-radius: 50%; pointer-events: none; display: none; z-index: 1; animation: floatAurora linear forwards; filter: blur(1px); }
body.night-mode .particle { display: block; filter: blur(2px) brightness(1.5); mix-blend-mode: screen; }
.p-color1 { background: radial-gradient(circle at 30% 30%, #a8c0ff, #3f2b96); box-shadow: 0 0 10px rgba(63, 43, 150, 0.4); }
.p-color2 { background: radial-gradient(circle at 30% 30%, #ffd89b, #19547b); box-shadow: 0 0 10px rgba(25, 84, 123, 0.4); }
.p-color3 { background: radial-gradient(circle at 30% 30%, #d4fc79, #96e6a1); box-shadow: 0 0 10px rgba(150, 230, 161, 0.4); }
@keyframes floatAurora {
    0% { transform: translateY(0) translateX(0); opacity: 0; }
    10% { opacity: 0.7; }
    50% { transform: translateY(-60vh) translateX(20px); }
    100% { transform: translateY(-130vh) translateX(-10px); opacity: 0; }
}


/* ============================================
   10. メディアクエリ（スマホ対応）
   ============================================ */
@media (max-width: 600px) {
    body { font-size: 16px; }

    /* プロフィール周り */
    .profile-container { flex-direction: column; text-align: center; }
    .profile-image img { width: 180px; height: 180px; }
    .sns-links { justify-content: center; } 

    /* ヒーローエリア（トップ画） */
    .hero-content { 
        padding: 30px 15px; /* 余白も少し減らしてスッキリ */
        width: 90%; 
    }

    /* ★修正：メインのキャッチコピーを小さく */
    .catchcopy { 
        font-size: 1.3rem; /* 1.6rem → 1.3rem に変更 */
        line-height: 1.8;  /* 行間を少し整える */
        margin-bottom: 20px;
    }
    
    /* ★修正：サブコピー（下の小さい文字）も少し小さく */
    .subcopy {
        font-size: 0.9rem; /* 1.2rem → 0.9rem に変更 */
    }

    /* ★修正：左上のロゴも少し控えめに */
    .logo {
        font-size: 1.2rem; /* 1.5rem → 1.2rem に変更 */
    }

    /* ★修正：各セクションのタイトル（GALLERYなど） */
    .section-title {
        font-size: 1.5rem; /* 1.8rem → 1.5rem に変更 */
        margin-bottom: 30px;
    }
}