body {
            font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
            background-color: #f8f9fa;
            padding: 20px;
            color: #2d3436;
            margin: 0;
        }

            body::before {
                content: "";
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                z-index: -1;
                background-repeat: repeat;
                background-attachment: fixed;
                background-position: center;
                opacity: 0.3;
            }

        @media (min-width: 769px) {
            body::before {
                background-image: url("back.jpg");
            }
        }

        @media (max-width: 768px) {
            body::before {
                background-image: url("Back_mobile.jpg");
            }
        }

        .container {
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(5px);
            max-width: 1000px;
            margin: 0 auto;
            padding: 30px;
            border-radius: 20px;
            /* 全体の角丸を少し大きく */
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            position: relative;
        }

        /* --- ヘッダー周り --- */
        .header-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
            border-bottom: 2px solid #e1f5fe;
            padding-bottom: 10px;
        }

        h1 {
            font-family: "M PLUS Rounded 1c", sans-serif;
            font-weight: 900;
            font-style: normal;
            font-size: 2.5rem;
            background: #130854;
            background: linear-gradient(90deg, rgba(19, 8, 84, 1) 0%, rgba(9, 9, 121, 1) 26%, rgba(16, 164, 194, 1) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin: 0 0 10px 0;
            padding: 0px 0;
            position: relative;
            display: inline-block;
        }

        .title::after {
            content: "";
            position: absolute;
            bottom: 10px;
            left: 0;
            width: 100%;
            height: 4px;
            background: linear-gradient(90deg, #66bb6a 0%, transparent 100%);
            border-radius: 2px;
        }

        h1::after {
            content: "🐾 ";
            font-size: 0.8em;
            color: rgba(16, 164, 194, 1);
        }

        .manual-link {
            text-decoration: none;
            color: #0288d1;
            font-size: 0.9rem;
            font-weight: bold;
            padding: 8px 16px;
            border: 1px solid #0288d1;
            border-radius: 20px;
            background: rgba(255, 255, 255, 0.8);
            transition: all 0.2s;
            white-space: nowrap;
        }

            .manual-link:hover {
                background: #0288d1;
                color: white;
            }

        /* --- カテゴリーボタン --- */
        .category-selector {
            text-align: center;
            margin-bottom: 30px;
            padding: 15px;
            background: #f1f2f6;
            border-radius: 15px;
        }

        .category-btn {
            padding: 10px 18px;
            margin: 5px;
            font-size: 16px;
            cursor: pointer;
            border: 2px solid #0288d1;
            border-radius: 30px;
            /* より丸く */
            background: white;
            color: #0288d1;
            font-weight: bold;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            transition: all 0.2s;
        }

            .category-btn:hover {
                transform: translateY(-2px);
                box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
            }

            .category-btn.active {
                background: #0288d1;
                color: white;
            }

        .emoji {
            font-size: 1.6em;
            line-height: 1;
        }

        #mainContent {
            display: none;
        }

        /* --- 検索ボックス --- */
        .search-section {
            display: block;
            gap: 20px;
            margin-bottom: 30px;
        }

        .search-box {
            flex: 1;
            position: relative;
            min-width: 0;
        }

        input[type="text"] {
            width: 100%;
            padding: 12px;
            border: 2px solid #dfe6e9;
            border-radius: 25px;
            /* 丸く */
            font-size: 16px;
            box-sizing: border-box;
            padding-left: 20px;
        }

            input[type="text"]:focus {
                outline: none;
                border-color: #0288d1;
            }

        .suggestion-list {
            position: absolute;
            /* 幅を少し狭く（例: 90%）して中央に寄せる */
            width: 100%;
            background: white;
            /* 初期状態は枠線を消して、ラインに見えないようにする */
            border: none;
            z-index: 100;
            max-height: 200px;
            overflow-y: auto;
            border-radius: 0 0 15px 15px;
            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05);
        }

        .suggestion-item {
            padding: 12px 20px;
            cursor: pointer;
            border-bottom: 1px solid #f1f2f6;
        }

            .suggestion-item:hover {
                background: #e1f5fe;
            }


        /* --- 【変更点】系統樹の曲線化エリア --- */
        .tree-area {
            position: relative;
            padding: 10px 0;
            border-top: 2px dashed #e1f5fe;
            /* 点線にして柔らかく */
            min-height: 300px;
            margin-bottom: 40px;
            overflow-x: auto;
        }


        /* --- 画像保存ボタン --- */
        .screenshot-btn {
            position: absolute;
            top: 10px;
            right: 10px;
            padding: 10px 20px;
            background: #0288d1;
            color: white;
            border: none;
            border-radius: 25px;
            font-size: 14px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.2s;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            z-index: 100;
        }

            .screenshot-btn:hover {
                background: #0277bd;
                transform: translateY(-2px);
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
            }

            .screenshot-btn:active {
                transform: translateY(0);
            }

        .tree-node {
            position: relative;
            margin-left: 40px;
            /* 少し広げる */
            padding-top: 10px;
        }

            /* 縦線（L字の縦部分） */
            .tree-node::after {
                content: "";
                position: absolute;
                left: -20px;
                top: -10px;
                /* 上の要素から繋がるように */
                bottom: 50%;
                /* 下半分まで伸ばす */
                width: 2px;
                background: #b2bec3;
                /* 優しい色 */
                height: calc(100% + 10px);
                /* 次の要素まで伸ばす */
                border-radius: 0;
            }

            /* 最後の要素の縦線は途中で止める */
            .tree-node:last-child::after {
                height: calc(50% + 22px);
                /* ラベルの中央付近で止める */
                border-bottom-left-radius: 10px;
                /* 左下の角を丸く */
            }

            /* 横線（L字の横部分） */
            .tree-node::before {
                content: "";
                position: absolute;
                left: -20px;
                top: calc(50% - 8px);
                /* ラベルの高さに合わせる */
                width: 20px;
                height: 20px;
                border-bottom: 2px solid #b2bec3;
                border-left: 2px solid #b2bec3;
                border-bottom-left-radius: 12px;
                /* ★ここがポイント：L字の角を丸くする */
            }

            /* 構造上、::beforeは角丸を作るパーツとして使い、::afterは上からの直線を担当させると綺麗になりますが、
           現在のDOM構造だと「一本の線」で書くのが難しいため、簡易的な曲線化（角丸ボーダー）を採用します */

            /* 調整版：シンプルな角丸連結線 */
            /* L字のカーブ線を描く要素 */
            .tree-node::before {
                content: "";
                display: block;
                position: absolute;
                top: -12px;
                /* 親からの繋がりを調整 */
                left: -15px;
                width: 15px;
                height: 40px;
                /* ラベルの中央まで伸ばす */
                /* 背景色を透明にし、ボーダーだけで線を作る */
                background: transparent;
                border-bottom: 2px solid #b2bec3;
                border-left: 2px solid #b2bec3;
                border-bottom-left-radius: 12px;
                pointer-events: none;
                /* マウス反応を邪魔しない */
            }

            /* 弟要素へ続く縦線 */
            .tree-node::after {
                content: "";
                display: block;
                position: absolute;
                top: 28px;
                /* 自分のラベルの少し下から */
                left: -15px;
                width: 2px;
                height: calc(100% - 18px);
                background: #b2bec3;
            }

            /* 角を丸くするトリック：接続部分に丸いパーツを置くのではなく、
           擬似要素のborder-radiusを使ってL字カーブを描きます */

            /* リセットして再定義（L字カーブ） */
            .tree-node::before,
            .tree-node::after {
                display: none;
            }

        /* 一旦リセット */


        /* --- 画像保存ボタン --- */
        .screenshot-btn {
            position: absolute;
            top: 10px;
            right: 10px;
            padding: 10px 20px;
            background: #0288d1;
            color: white;
            border: none;
            border-radius: 25px;
            font-size: 14px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.2s;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            z-index: 100;
        }

            .screenshot-btn:hover {
                background: #0277bd;
                transform: translateY(-2px);
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
            }

            .screenshot-btn:active {
                transform: translateY(0);
            }

        .tree-node {
            position: relative;
            margin-left: 30px;
            padding-left: 10px;
            /* ラベルとの距離 */
            margin-top: 10px;
        }

            /* L字のカーブ線を描く要素 */
            .tree-node::before {
                content: "";
                display: block;
                position: absolute;
                top: -10px;
                /* 親の枝からの続き位置 */
                left: -15px;
                /* 左側の位置 */
                width: 23px;
                /* 横幅 */
                height: 38px;
                /* 高さ（ラベルの中央まで） */
                border-bottom: 2px solid #b2bec3;
                /* 下線 */
                border-left: 2px solid #b2bec3;
                /* 左線 */
                border-bottom-left-radius: 12px;
                /* ★角を丸く！ */
            }

            /* 弟要素へ続く縦線 */
            .tree-node::after {
                content: "";
                display: block;
                position: absolute;
                top: 20px;
                /* 自分のラベルの下から */
                left: -15px;
                /* 左線と同じ位置 */
                width: 2px;
                height: calc(100% - 15px);
                /* 次の要素の開始位置まで */
                background: #b2bec3;
            }

            /* 最後の要素は下に続く線がいらない */
            .tree-node:last-child::after {
                display: none;
            }

        /* ルート（一番左）の例外処理 */
        .root-container > .tree-node {
            margin-left: 0;
            padding-left: 0;
            margin-top: 0;
        }

            .root-container > .tree-node::before,
            .root-container > .tree-node::after {
                display: none;
            }


        /* --- ラベルのデザイン変更（丸くポップに） --- */
        .label-group {
            display: inline-block;
            background: #e1f5fe;
            color: #0288d1;
            padding: 6px 14px;
            border-radius: 20px;
            /* 丸く */
            font-size: 0.9em;
            font-weight: bold;
            border: 1px solid #b3e5fc;
            cursor: pointer;
            transition: all 0.2s;
            user-select: none;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
            /* 浮き出し */
        }

            .label-group:hover {
                background: #b3e5fc;
                transform: translateY(-1px);
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            }

        .label-leaf {
            font-weight: bold;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 6px 14px;
            margin: 5px 0;
            border: 2px solid #ffeaa7;
            border-radius: 20px;
            background: #fff;
            color: #d63031;
            transition: all 0.2s;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
            position: relative;
        }

            .label-leaf:hover {
                transform: translateY(-1px);
                border-color: #fdcb6e;
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            }



            /* 絶滅種に自動で † を付ける */
            .label-leaf.extinct::before {
                content: "†";
                margin-right: 4px;
            }

        .tree-remove-btn {
            margin-left: 10px;
            cursor: pointer;
            color: #d63031;
            font-size: 1.1em;
            background: #ffeaa7;
            /* ×ボタンの背景 */
            width: 20px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            border-radius: 50%;
            display: inline-block;
        }

            .tree-remove-btn:hover {
                background: #fdcb6e;
                color: white;
            }

        /* --- 免責事項など --- */

        /* --- キャプチャ用の要素（非表示） --- */
        #captureArea {
            position: fixed;
            left: -9999px;
            top: 0;
            background: white;
            padding: 40px;
            width: 500px;
            transform: scale(1);
            -webkit-font-smoothing: antialiased;
        }

            #captureArea * {
                box-sizing: border-box;
            }

            #captureArea .tree-node {
                position: relative;
                margin-left: 30px !important;
                padding-left: 10px !important;
                margin-top: 10px !important;
            }

                #captureArea .tree-node::before {
                    content: "";
                    display: block;
                    position: absolute;
                    top: -10px !important;
                    left: -15px !important;
                    width: 23px !important;
                    height: 38px !important;
                    border-bottom: 2px solid #b2bec3;
                    border-left: 2px solid #b2bec3;
                    border-bottom-left-radius: 12px !important;
                }

                #captureArea .tree-node::after {
                    content: "";
                    display: block;
                    position: absolute;
                    top: 20px !important;
                    left: -15px !important;
                    width: 2px;
                    height: calc(100% - 15px);
                    background: #b2bec3;
                }

                #captureArea .tree-node:last-child::after {
                    display: none;
                }

            #captureArea .root-container > .tree-node {
                margin-left: 0 !important;
                padding-left: 0 !important;
                margin-top: 0 !important;
            }

                #captureArea .root-container > .tree-node::before,
                #captureArea .root-container > .tree-node::after {
                    display: none !important;
                }

            #captureArea .label-group {
                display: inline-block;
                background: #e1f5fe;
                color: #0288d1;
                padding: 6px 14px !important;
                border-radius: 20px;
                font-size: 0.9em !important;
                font-weight: bold;
                border: 1px solid #b3e5fc;
                cursor: pointer;
                transition: all 0.2s;
                user-select: none;
                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
            }

            #captureArea .label-leaf {
                font-weight: bold;
                display: inline-flex;
                align-items: center;
                gap: 8px;
                padding: 6px 14px !important;
                margin: 5px 0;
                border: 2px solid #ffeaa7;
                border-radius: 20px;
                background: #fff;
                color: #d63031;
                transition: all 0.2s;
                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
                position: relative;
                font-size: 1em !important;
                max-width: none !important;
                overflow: visible !important;
                white-space: normal !important;
                text-overflow: clip !important;
            }


            #captureArea .capture-tree-wrapper {
                display: inline-block;
            }

            #captureArea .capture-title {
                font-family: "M PLUS Rounded 1c", sans-serif;
                font-weight: 900;
                font-style: normal;
                font-size: 1.2rem;
                color: rgba(9, 9, 121, 1);
                margin: 0 0 10px 0;
                padding: 0px 0;
                position: relative;
                display: inline-block;
            }

            #captureArea .capture-footer {
                margin-top: 40px;
                text-align: left;
                font-size: 13px;
                color: #636e72;
                padding-top: 20px;
                border-top: 2px solid #e1f5fe;
            }

                #captureArea .capture-footer div {
                    margin: 5px 0;
                }

        .footer-disclaimer {
            margin-top: 50px;
            padding: 20px;
            border-top: 1px solid #eee;
            color: #7f8c8d;
            font-size: 0.8em;
            line-height: 1.6;
            text-align: left;
        }

        .styled-select {
            width: 100%;
            max-width: 400px;
            padding: 12px 15px;
            font-size: 16px;
            border: 2px solid #0288d1;
            border-radius: 12px;
            background-color: white;
            color: #2d3436;
            cursor: pointer;
            appearance: none;
            /* デフォルトの矢印を消す（モダンに） */
            background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230288d1' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 15px center;
            background-size: 15px;
        }

            .styled-select:focus {
                outline: none;
                box-shadow: 0 0 0 3px rgba(2, 136, 209, 0.2);
            }



        /* --- モバイル対応修正 --- */
        @media (max-width: 768px) {
            .header-container {
                flex-direction: column;
                align-items: flex-start;
                gap: 10px;
            }

            h1 {
                font-size: 24px;
            }

            .manual-link {
                align-self: flex-end;
            }

            .container {
                padding: 15px;
                border-radius: 0;
            }

            .search-section {
                flex-direction: column;
                gap: 15px;
            }

            .search-box {
                width: 100%;
            }

            /* ツリーのインデントを少し詰める（スマホ用） */

            /* --- 画像保存ボタン --- */
            .screenshot-btn {
                position: absolute;
                top: 10px;
                right: 10px;
                padding: 10px 20px;
                background: #0288d1;
                color: white;
                border: none;
                border-radius: 25px;
                font-size: 14px;
                font-weight: bold;
                cursor: pointer;
                transition: all 0.2s;
                box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
                z-index: 100;
            }

                .screenshot-btn:hover {
                    background: #0277bd;
                    transform: translateY(-2px);
                    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
                }

                .screenshot-btn:active {
                    transform: translateY(0);
                }

            .tree-node {
                margin-left: 20px;
            }

                .tree-node::before {
                    left: -0px;
                    /* 左へのズレを微調整（重なりを解消） */
                    width: 10px;
                    /* 線の長さを調整 */
                    top: -11px;
                    /* 上の線との接続ポイントを調整 */
                    height: 38px;
                    /* 曲線の高さをラベル中央へ合わせる */
                    border-bottom-left-radius: 10px;
                    /* 角丸を少し小さくして密着させる */
                }

                /* 弟要素へ続く縦線の位置合わせ */
                .tree-node::after {
                    left: -0px;
                    /* beforeの始点とピッタリ重ねる */
                    top: 20px;
                    /* ラベルの下端に合わせて開始位置を下げる */
                    height: calc(100% - 14px);
                    /* 次の要素までの長さを微調整 */
                }

            /* 1. ツリーエリア自体を横スクロール可能にし、改行を禁止する */
            .tree-area {
                overflow-x: auto;
                white-space: nowrap;
                /* これで改行を防ぎます */
                -webkit-overflow-scrolling: touch;
                /* iPhoneでのスクロールを滑らかに */
                padding-right: 50px;
                /* 右端が切れて見えないよう余白を作る */
            }

            /* 2. インデントを極限まで詰める */

            /* --- 画像保存ボタン --- */
            .screenshot-btn {
                position: absolute;
                top: 10px;
                right: 10px;
                padding: 5px 10px;
                background: #0288d1;
                color: white;
                border: none;
                border-radius: 15px;
                font-size: 12px;
                font-weight: bold;
                cursor: pointer;
                transition: all 0.2s;
                box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
                z-index: 100;
            }

                .screenshot-btn:hover {
                    background: #0277bd;
                    transform: translateY(-2px);
                    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
                }

                .screenshot-btn:active {
                    transform: translateY(0);
                }

            .tree-node {
                margin-left: 12px;
            }

            /* 3. ラベルを少し小さく、スリムにする */
            .label-group,
            .label-leaf {
                font-size: 0.75rem;
                padding: 4px 8px;
            }

            /* 4. 長すぎる名前は最大幅を決めて省略する（お好みで） */
            .label-leaf {
                max-width: 150px;
                /* 幅を制限 */
                overflow: hidden;
                text-overflow: ellipsis;
                /* はみ出しを ... にする */
                white-space: nowrap;
            }

            /* 1. カテゴリー全体の背景をスッキリさせる */
            .category-selector {
                padding: 10px;
                background: transparent;
                /* 背景のグレーを消して白背景になじませる */
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                /* 2列にきっちり並べる */
                gap: 8px;
                /* ボタン同士の隙間 */
            }

            /* 2. ボタン自体のサイズと余白を微調整 */
            .category-btn {
                margin: 0;
                /* gridで管理するのでmarginは不要 */
                padding: 8px 10px;
                font-size: 14px;
                /* 少しだけ小さくして1行に収まりやすくする */
                width: 100%;
                /* グリッドの幅いっぱいに広げる */
                box-sizing: border-box;
                justify-content: flex-start;
                /* 絵文字と文字を左寄りに揃える */
                padding-left: 15px;
                border-width: 1.5px;
                /* 線を少し細くしてスッキリ */
            }

            /* 3. 絵文字のサイズ調整 */
            .emoji {
                font-size: 1.2em;
            }

            input[type="text"] {
                font-size: 14px;
                /* PC版の16pxから14pxへ縮小 */
                padding: 10px;
                /* ついでに余白も少し詰めるとスッキリします */
            }

                /* placeholder（入力前のヒント文字）も小さくしたい場合は以下も追加 */
                input[type="text"]::placeholder {
                    font-size: 12px;
                }

            /* カテゴリー選択エリアを縦並びに変更 */
            .category-selector {
                display: block;
                /* gridやflexを解除して縦に並べる */
                text-align: left;
                /* 左寄せにして読みやすくする */
                padding: 15px;
                background: rgba(2, 136, 209, 0.05);
                /* ほんのり色をつけて境界をわかりやすく */
                border-radius: 15px;
            }

                /* ラベルの設定 */
                .category-selector label {
                    display: block;
                    /* 確実に改行させる */
                    margin-bottom: 10px;
                    font-size: 0.85rem;
                }

            /* セレクトボックスの幅をいっぱいにする */
            .styled-select {
                width: 100%;
                max-width: none;
                /* スマホでは制限を解除 */
                font-size: 14px;
                /* 文字サイズをスマホに最適化 */
            }
        }