/* 基本設定 */
body {
    font-family: 'Noto Sans JP', "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    color: #334155;
    background-color: #f8fafc;
}

html {
    scroll-behavior: smooth;
}

/* ヒーローセクション背景などの共通クラス */
.hero-bg-fixed {
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.text-shadow {
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

/* アニメーション定義 */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.fade-in-up {
    animation: fadeInUp 0.8s ease-out forwards;
    opacity: 0;
}

.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }

/* 三角形図解用のCSS (okuridashi.htmlなどで使用) */
.triangle-diagram {
    position: relative;
    height: 320px;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}
.diagram-node {
    position: absolute;
    background: white;
    border: 2px solid #166534; /* brand-800 */
    border-radius: 8px;
    padding: 12px 10px;
    text-align: center;
    font-weight: bold;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    z-index: 10;
    width: 130px;
    font-size: 14px;
    line-height: 1.4;
}
.node-top { top: 0; left: 50%; transform: translateX(-50%); }
.node-left { bottom: 10px; left: 0; }
.node-right { bottom: 10px; right: 0; background-color: #f0fdf4; border-color: #22c55e; }

.diagram-center {
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 5;
    width: 100%;
}
.center-circle {
    background-color: #15803d; /* brand-700 */
    color: white;
    border-radius: 50%;
    width: 90px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 13px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    margin: 0 auto 8px auto;
}

.diagram-line {
    position: absolute;
    background-color: #bbf7d0; /* brand-200 */
    z-index: 1;
}
.line-left { width: 3px; height: 190px; top: 45px; left: 30%; transform: rotate(23deg); transform-origin: top left; }
.line-right { width: 3px; height: 190px; top: 45px; right: 30%; transform: rotate(-23deg); transform-origin: top right; }
.line-bottom { height: 3px; width: 50%; bottom: 35px; left: 25%; }

/* カードホバーエフェクト */
.hover-card {
    transition: all 0.3s ease;
}
.hover-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* Chat Widget Animations */
@keyframes slideIn {
    from { opacity: 0; transform: translateY(20px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.chat-animate-in {
    animation: slideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.typing-dot {
    animation: typing 1.4s infinite ease-in-out both;
}
.typing-dot:nth-child(1) { animation-delay: -0.32s; }
.typing-dot:nth-child(2) { animation-delay: -0.16s; }

@keyframes typing {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1); }
}
.chat-response ul { list-style-type: disc; margin-left: 1.5em; margin-top: 0.5em; margin-bottom: 0.5em; }
.chat-response strong { font-weight: bold; color: #166534; }
.chat-response p { margin-bottom: 0.5em; }

/* --- Extracted from inline <style> blocks (auto-migrated) --- */


/* From: index.html */
html { scroll-behavior: smooth; }
        .hero-section {
            position: relative;
            background-image: linear-gradient(rgba(20, 83, 45, 0.65), rgba(20, 83, 45, 0.5)), url('../img/img2_shokuba.jpg');
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
        }
        .text-shadow { text-shadow: 2px 2px 4px rgba(0,0,0,0.5); }


/* From: about_us.html */
/* 基本設定 */
        body {
            font-family: 'Noto Sans JP', "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
            color: #334155;
            background-color: #f8fafc;
        }

        html {
            scroll-behavior: smooth;
        }

        /* カードホバーエフェクト */
        .hover-card {
            transition: all 0.3s ease;
        }
        .hover-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        }


/* From: okuridashi.html */
/* 三角形図解用のCSS (維持) */
        .triangle-diagram { position: relative; height: 320px; width: 100%; max-width: 400px; margin: 0 auto; }
        .diagram-node { position: absolute; background: white; border: 2px solid #166534; border-radius: 8px; padding: 12px 10px; text-align: center; font-weight: bold; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); z-index: 10; width: 130px; font-size: 14px; line-height: 1.4; }
        .node-top { top: 0; left: 50%; transform: translateX(-50%); }
        .node-left { bottom: 10px; left: 0; }
        .node-right { bottom: 10px; right: 0; background-color: #f0fdf4; border-color: #22c55e; }
        .diagram-center { position: absolute; top: 55%; left: 50%; transform: translate(-50%, -50%); text-align: center; z-index: 5; width: 100%; }
        .center-circle { background-color: #15803d; color: white; border-radius: 50%; width: 90px; height: 90px; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 13px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); margin: 0 auto 8px auto; }
        .diagram-line { position: absolute; background-color: #bbf7d0; z-index: 1; }
        .line-left { width: 3px; height: 190px; top: 45px; left: 30%; transform: rotate(23deg); transform-origin: top left; }
        .line-right { width: 3px; height: 190px; top: 45px; right: 30%; transform: rotate(-23deg); transform-origin: top right; }
        .line-bottom { height: 3px; width: 50%; bottom: 35px; left: 25%; }
        .hover-card { transition: all 0.3s ease; }
        .hover-card:hover { transform: translateY(-5px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); }