/********************** TOP PAGE専用 **********************/
/* index.html でのみ読み込むスタイル。共通部分は base.css を参照。 */
/** top icon **/
:root {
    --svg-logo-red: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAwIiBoZWlnaHQ9IjEzNCIgdmlld0JveD0iMCAwIDQwMCAxMzQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTk4LjI0ODkgMTE2LjczNkgxMDguMTAyVjEwNi44NzJIMTE1LjQ5M1YxMzRIMTA4LjEwMlYxMjQuMTM2SDk4LjI0ODlWMTM0SDkwLjg1ODJWMTA2Ljg3Mkg5OC4yNDg5VjExNi43MzZaIiBmaWxsPSIjRkYyNzMxIi8+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNjcuNjM2IDEwNi44NzJDMTc1LjExOCAxMDYuODcyIDE4MS4xODQgMTEyLjk0NSAxODEuMTg0IDEyMC40MzZDMTgxLjE4NCAxMjcuOTI3IDE3NS4xMTggMTM0IDE2Ny42MzYgMTM0QzE2MC4xNTMgMTM0IDE1NC4wODcgMTI3LjkyNyAxNTQuMDg3IDEyMC40MzZDMTU0LjA4NyAxMTIuOTQ1IDE2MC4xNTMgMTA2Ljg3MiAxNjcuNjM2IDEwNi44NzJaTTE2Ny42MzYgMTE0LjMzMkMxNjQuMjY4IDExNC4zMzIgMTYxLjUzOSAxMTcuMDY2IDE2MS41MzkgMTIwLjQzNkMxNjEuNTM5IDEyMy44MDcgMTY0LjI2OSAxMjYuNTQgMTY3LjYzNiAxMjYuNTRDMTcxLjAwMyAxMjYuNTQgMTczLjczMyAxMjMuODA3IDE3My43MzMgMTIwLjQzNkMxNzMuNzMzIDExNy4wNjUgMTcxLjAwMyAxMTQuMzMyIDE2Ny42MzYgMTE0LjMzMloiIGZpbGw9IiNGRjI3MzEiLz48cGF0aCBkPSJNMjM0LjU1OSAxMTkuNjg2TDI0MS45NSAxMDYuODcySDI0OS4zNFYxMzRIMjQxLjk1VjEyMC41MjRMMjM3LjAyMiAxMjkuMDY3SDIzMi4wOTZMMjI3LjE2OSAxMjAuNTI0VjEzNEgyMTkuNzc5VjEwNi44NzJIMjI3LjE2OUwyMzQuNTU5IDExOS42ODZaIiBmaWxsPSIjRkYyNzMxIi8+PHBhdGggZD0iTTMxMC4xMDUgMTEzLjAzN0gyOTUuMzI0VjExNy45N0gzMDguODczVjEyNC4xMzZIMjk1LjMyNFYxMjcuODM1SDMxMC4xMDVWMTM0SDI4Ny45MzNWMTA2Ljg3MkgzMTAuMTA1VjExMy4wMzdaIiBmaWxsPSIjRkYyNzMxIi8+PHBhdGggZD0iTTEzNC40NTYgMTYuNDgyM0MxMzcuNDUzIDE2LjAxMTIgMTQxLjQ5IDE2LjIwMjIgMTQ0LjQ1MiAxNi43OTQ4QzE2MS4wNzggMjAuMTIxNSAxNTMuMDUzIDM3LjA1MDcgMTU0LjUyNCAzOS4xNDc0QzE1NS4wNDQgMzkuODg4OCAxNTUuOTM4IDQwLjAzMzMgMTU2Ljc4MiA0MC4wMTc1QzE1OS4xMzUgMzkuOTczMyAxNjEuNjM1IDM5LjEwNzMgMTYzLjkxOSAzOC41NDg3QzE2Ny45MTUgMzcuNTcxMiAxNzIuMDU5IDM2LjcxNTMgMTc2LjE4NiAzNi42NzE4QzE3OS42MzIgMzYuNjM1NyAxODMuNDY4IDM2Ljk4NDIgMTg2LjU3NiAzOC41OTI3QzE4OS42MDEgNDAuMTU4MyAxOTMuMDU4IDQ1LjYzMzggMTk2LjM2NSA0NS4xMjM5QzIwNi4xNDQgNDMuNjE1OSAyMjYuNzc2IDMyLjM3NDMgMjM1LjE2OCAzMy44MDM2QzIzNy4zODggMzQuMTgyIDIzOS4yNTEgMzUuMzI3MyAyNDAuNTQ2IDM3LjE5NDNDMjQyLjg3OSA0MC41NTgxIDI0MC4yNDMgNDMuMTAwMiAyMzkuNjg2IDQ2LjM4MjdDMjM5LjU4OCA0Ni45NjIzIDIzOS40NDEgNDcuODA3MyAyMzkuODE3IDQ4LjMxMzRDMjQwLjM5IDQ5LjA4MDkgMjQxLjM5IDQ5LjI5NTggMjQyLjI5MiA0OS4zMzk4QzI0Ny4xMjggNDkuNTc1NiAyNTIuMjQgNDguMjIzNCAyNTcuMDA5IDQ3LjQ4NTNDMjYzLjQ3NiA0Ni40ODM3IDI2OS45ODcgNDUuNzYzMyAyNzYuNDUxIDQ0LjczMDRDMjgwLjY2NyA0NC4wNTYzIDI4NC44OTQgNDMuNDEyNiAyODkuMTAyIDQyLjY4MzVDMjk2LjI2MSA0MS40NDM2IDMwNC4xMjIgMzkuNDEyIDMxMS4zODIgNDAuNjAzNEMzMTcuMjUyIDQxLjU2NzEgMzE3LjAyMSA0NC43OTU4IDMxOS45MDYgNDguNzA3OUMzMjEuMzI3IDUwLjYzNzcgMzIzLjU4NyA0OS41ODQxIDMyNS40OTkgNDkuMDQ4N0MzMzEuOTY3IDQ3LjIzNjIgMzM4LjMzOSA0NC45OTQ5IDM0NC43NjIgNDMuMDE4NUMzNTQuNTY5IDQwLjAwMDkgMzY0LjM2OCAzNy4zODIzIDM3NC40MzEgMzUuMzg2NkMzODAuMjY4IDM0LjIyOTMgMzg2Ljk4NyAzMi44NDE5IDM5Mi45MzEgMzMuODMxQzM5NS4yOTcgMzQuMjI0OSAzOTcuOTM5IDM1LjM2NSAzOTkuMzUyIDM3LjQwMTNDMzk5LjkxMSAzOC4yMTkyIDQwMC4xMTkgMzkuMjI3MiAzOTkuOTMzIDQwLjIwMTFDMzk5LjU0NSA0Mi4yNzYxIDM5Ny4yOTggNDQuNDk4OSAzOTUuNTk3IDQ1LjYwNTRDMzkxLjcwNyA0OC4xMzU0IDM3NS41NjIgNTEuMTc5MiAzNzAuNDQ0IDUyLjM4NjZDMzYxLjY0NSA1NC40MzMyIDM1Mi44NjUgNTYuNTY1MiAzNDQuMTA3IDU4Ljc4MjFDMzMyLjgwMSA2MS42NjUgMzIxLjU1IDY0Ljc2NiAzMTAuMzYzIDY4LjA4MzlDMzAzLjc0NCA2OS45OTMgMjk3LjA2OCA3MS45MDIzIDI5MC4zOTcgNzQuMDQ2OEMyODQuMDgzIDc2LjA3NzcgMjc4LjYyOSA4MC4wOTY4IDI3Mi42NTQgODMuMjk5N0MyNjIuMTM2IDg4LjkzODggMjQ3LjI1NSA5Ny44MTA4IDIzNC43OTYgOTUuNzM1M0MyMzIuNjA4IDk1LjI3NTIgMjMwLjU1IDk0LjI4MzQgMjI5LjM4MSA5Mi4zMDE3QzIyNi4xNCA4Ni44MDYxIDIyOC44MjkgODIuODUwMSAyMzIuOTczIDc5LjA5MzdDMjQ1LjcxMyA2Ny41NDQyIDI2NC4wODggNzAuMzYzIDI3OC40NzUgNjIuMTc3N0MyNzkuMzQ0IDYxLjY4MzcgMjgwLjYxMiA2MC42MTY2IDI4MC44MzEgNTkuNjIzOUMyODAuMDY4IDU3LjAzODggMjcyLjM5NyA1OC45Njg0IDI3MC4zNDYgNTkuMjQwMkMyNjQuNjE2IDU5Ljk2MDkgMjU4Ljg5NCA2MC43NTkgMjUzLjE4MiA2MS42MzQ3QzI0My43NTIgNjMuMDg4NSAyMjcuNDQ4IDY4LjczODEgMjE5LjAwNSA2Mi41OTc2QzIxNi4xNTYgNjAuNTI1OSAyMTQuMDQyIDU1LjY4NTIgMjEyLjIwNiA1NC43ODEyQzIwOS4xMTkgNTMuMjY0NCAxOTAuMjU5IDYyLjg1MjYgMTg2LjU1OSA2NC45MTg5QzE4My41NDkgNjYuNTk5OSAxODAuNzMxIDY5LjAxMzMgMTc3LjQ2OCA3MC4xNjk4QzE3NS42MSA3MC44MjgzIDE3My4zMDQgNzEuMDY5MiAxNzEuNDk0IDcwLjE2NjlDMTcwLjAxMyA2OS40MjgzIDE2OC42MyA2Ny44MDc1IDE2OC4wOTkgNjYuMjM0M0MxNjYuMDU5IDYwLjE4NTkgMTcyLjI2IDU3LjA5MjEgMTc0LjUxNCA1Mi40NzA2QzE3NC4zMTMgNTIuMjQyNSAxNzMuNDg1IDUxLjMxMTcgMTczLjI4NyA1MS4xOTIzQzE3MS4yMjUgNTAuMTkzNSAxNjcuMzcyIDUxLjIwNiAxNjUuMzA5IDUxLjczNzJDMTUyLjk3OSA1NC45MTM2IDE0MS4zMTIgNTkuODY0OCAxMzAuMzM4IDY2LjMxODNDMTI1LjMyNCA2OS4yNjY5IDEyMC42NzEgNzMuNzY4OSAxMTQuODc5IDc0Ljg5MTVDMTExLjc3MSA3NS41MjQ1IDEwNy43NzYgNzIuOTE0MiAxMDcuNDQyIDY5LjY1MTNDMTA2Ljg2NSA2My45OTY1IDExMi43MSA2MS4wNDU0IDExNi40NjggNTguMDg2OEMxMTcuMjY5IDU3LjQ1NjIgMTE4LjM3NSA1Ni42OTgxIDExOS4xMzkgNTYuMDg2OEMxMjQuMzg1IDUxLjg4NzIgMTMyLjIwNyA0NS4xNjMgMTM2LjA3IDM5Ljg5NzRDMTUyLjI4NyAxNy43OTEgMTAzLjMxIDM5LjUxNDkgOTguMzUwNCA0MS41MzhDODEuODc5OSA0OC4zNzUxIDY1LjAyOTIgNTYuMDA2OCA0OS43NDc5IDY1LjM5MTVDNDEuMTM4MSA3MC42NTE3IDMyLjc4MyA3Ni4zMjExIDI0LjcxMDggODIuMzc5OEMyMC4xOTgxIDg1LjcyIDE0Ljg1MzIgOTAuNTE4OSAxMC4yMDIgOTMuMTUzMkMxLjI3Mjc0IDk4LjIxMDMgLTMuNzA0MDYgODguNjYyNiAzLjMyNzk3IDgxLjM0NTZDOC4xMzA3NSA3Ni4zNDg0IDEyLjQwNTEgNzMuNDQ5NCAxNy44NTYzIDY5LjQ3OTRDMjcuMDM5NyA2Mi43MTQ4IDM2LjYwNjggNTYuNDkwOSA0Ni41MDk2IDUwLjg0MDdDNjAuNDc4MiA0Mi44NzM0IDc1Ljk0MzggMzUuNzk5NCA5MC43NzkxIDI5LjY2ODlDMTA0LjMxIDI0LjA3NzQgMTE5LjgxIDE3Ljg1MiAxMzQuNDU2IDE2LjQ4MjNaIiBmaWxsPSIjRkYyNzMxIi8+PHBhdGggZD0iTTIyOS44MjkgMS4wNDQ4NEMyMzUuMjE5IDAuMjk3OTY3IDIzOS4yNyAzLjUzNjg2IDIzNC45NzUgOC41NTE2N0MyMjguOTY2IDE1LjU2NjYgMjIwLjQyMyAxOS45MTk5IDIxMi41ODUgMjQuNTIwNEMyMTAuNjMyIDI1LjY2NjkgMjA4LjY0MiAyNi43NjQ2IDIwNi41MTkgMjcuNTY4M0MyMDQuMTQ5IDI4LjE0MzIgMjAwLjA5MiAyOC42MTAxIDE5OS40NjkgMjUuMzgwOEMxOTguODI1IDIyLjAzMTYgMjAyLjQwNSAxOS4wNjA4IDIwNC41MjEgMTYuOTI4NkMyMDkuMTQ5IDEyLjI2NDEgMjE0LjQ5MiA4LjM5MzU1IDIyMC4yMjIgNS4yMDc5MkMyMjMuMjkzIDMuNTAxMDYgMjI2LjM5MiAxLjgzNDEyIDIyOS44MjkgMS4wNDQ4NFoiIGZpbGw9IiNGRjI3MzEiLz48cGF0aCBkPSJNMTcyLjgwNSAwLjAwMjg0NjUyQzE4MC4xNDQgLTAuMjcyNjQ4IDE5Ni40NDQgMTkuNTM1MSAxODQuNjI2IDIyLjA1NzVDMTgzLjUyOSAyMS45MjQ3IDE4Mi44NTIgMjEuNzEwOSAxODEuODY4IDIxLjE1ODFDMTc2LjI5NCAxOC4wMjc3IDE3MC43MzkgMTIuNzgxOCAxNjguNzQ2IDYuNTQyODlDMTY4LjMzNSA1LjI1NzI3IDE2OC4yMjEgMy42NzQ5OSAxNjguOTE4IDIuNTEzNTlDMTY5Ljg2OCAwLjkyOTk4MSAxNzEuMTcgMC40MzkwNDcgMTcyLjgwNSAwLjAwMjg0NjUyWiIgZmlsbD0iI0ZGMjczMSIvPjwvc3ZnPg==");
    --svg-top-mypage-btn: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxODIiIGhlaWdodD0iNTYiIGZpbGw9Im5vbmUiPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0wIDhhOCA4IDAgMCAxIDgtOGgxNjZhOCA4IDAgMCAxIDggOHY0MGE4IDggMCAwIDEtOCA4SDhhOCA4IDAgMCAxLTgtOHoiLz48cGF0aCBmaWxsPSIjMDIwMDAwIiBkPSJNMTc0IDUzdjNIOHYtM3ptNS01VjhhNSA1IDAgMCAwLTUtNUg4YTUgNSAwIDAgMC01IDV2NDBhNSA1IDAgMCAwIDUgNXYzbC0uNDEyLS4wMUE4IDggMCAwIDEgLjAxIDQ4LjQxMUwwIDQ4VjhhOCA4IDAgMCAxIDgtOGgxNjZhOCA4IDAgMCAxIDggOHY0MGE4IDggMCAwIDEtNy41ODggNy45OUwxNzQgNTZ2LTNhNSA1IDAgMCAwIDUtNSIvPjxwYXRoIGZpbGw9IiNmZjI3MzEiIGQ9Ik0zOCAxMUgxOGE3IDcgMCAwIDAtNyA3djIwYTcgNyAwIDAgMCA3IDdoMjBhNyA3IDAgMCAwIDctN1YxOGE3IDcgMCAwIDAtNy03Ii8+PHBhdGggZmlsbD0iIzAwMCIgZD0iTTQ0IDE4YTYgNiAwIDAgMC02LTZIMThhNiA2IDAgMCAwLTYgNnYyMGE2IDYgMCAwIDAgNiA2aDIwYTYgNiAwIDAgMCA2LTZ6bTIgMjBhOCA4IDAgMCAxLTggOEgxOGE4IDggMCAwIDEtOC04VjE4YTggOCAwIDAgMSA4LThoMjBhOCA4IDAgMCAxIDggOHoiLz48cGF0aCBmaWxsPSIjZmZmIiBkPSJtMzcuNTExIDI2LjQ2OC04LjMzMy04QTEuNyAxLjcgMCAwIDAgMjggMThjLS40NDIgMC0uODY2LjE2OC0xLjE3OC40NjhsLTguMzMzIDhhMS42IDEuNiAwIDAgMC0uMzYzLjUyQTEuNSAxLjUgMCAwIDAgMTggMjcuNnY5LjZjMCAuMjEyLjA4OC40MTYuMjQ0LjU2NnMuMzY4LjIzNC41OS4yMzRIMjUuNWEuODUuODUgMCAwIDAgLjU5LS4yMzQuNzguNzggMCAwIDAgLjI0My0uNTY2di01LjZoMy4zMzR2NS42YzAgLjIxMi4wODcuNDE2LjI0NC41NjYuMTU2LjE1LjM2OC4yMzQuNTg5LjIzNGg2LjY2N2EuODUuODUgMCAwIDAgLjU4OS0uMjM0QS43OC43OCAwIDAgMCAzOCAzNy4ydi05LjZjMC0uMjEtLjA0Mi0uNDE5LS4xMjYtLjYxM2ExLjYgMS42IDAgMCAwLS4zNjMtLjUxOU0zNi4zMzMgMzYuNGgtNXYtNS42YS43OC43OCAwIDAgMC0uMjQ0LS41NjZBLjg1Ljg1IDAgMCAwIDMwLjUgMzBoLTVhLjg1Ljg1IDAgMCAwLS41OS4yMzQuNzguNzggMCAwIDAtLjI0My41NjZ2NS42aC01di04LjhsOC4zMzMtOCA4LjMzMyA4eiIvPjxwYXRoIGZpbGw9IiMwMjAwMDAiIGQ9Ik0xMzguODkzIDE5cTIuMjc3IDAgNC4xMjIuODM1IDEuODQ0LjgxMiAyLjk5NSAyLjI2M2wtMi44NzYgMi45NXEtLjg2MS0xLjA1Ni0xLjg5Mi0xLjU3Mi0xLjAzLS41NDEtMi4zOTctLjU0Mi0xLjM5IDAtMi40OTIuNjRhNC42IDQuNiAwIDAgMC0xLjcyNCAxLjc0NnEtLjY0OCAxLjEzMS0uNjQ4IDIuNjU2IDAgMS41MjQuNiAyLjY4LjYyMiAxLjE1NiAxLjY3NyAxLjc5NSAxLjA3OC42NCAyLjQ2Ny42NHQyLjM0OS0uNTQyYTMuNSAzLjUgMCAwIDAgMS40ODUtMS41NzRxLjE0OS0uMjk1LjI1Ni0uNjIxbC00LjU2OC0uMTE2di0zLjU5aDkuMTUzdi42NjNxMCAzLjEyNC0xLjEwMyA1LjI4Ny0xLjEwMSAyLjE2NC0zLjA2NiAzLjI5NVExNDEuMjkgMzcgMTM4LjcwMiAzN3EtMS45NCAwLTMuNTk1LS42NjNhOS4xIDkuMSAwIDAgMS0yLjg3NS0xLjkxOSA5LjEgOS4xIDAgMCAxLTEuOTE3LTIuODUycS0uNjctMS42NDgtLjY3MS0zLjU2NSAwLTEuOTQ0LjY5Ni0zLjU2N2E4LjcgOC43IDAgMCAxIDEuOTg5LTIuODUyIDguOSA4LjkgMCAwIDEgMi45NDYtMS44OTQgOS42IDkuNiAwIDAgMSAzLjYxOC0uNjg4TTY3Ljg3NiAyOC4yNjZsNS43NjUtOC45N2gzLjA5VjM2LjczaC00LjI0di04LjkyNWwtMy4yMzUgNC45OWgtMi43OGwtMy4yMS00Ljk4M3Y4LjkxOEg1OVYxOS4yOTVoMy4wOXpNODcuNTY2IDI1LjIxM2wzLjIzNi01LjkxOGg0LjgxNkw4OS43IDI5LjQxN3Y3LjMxM2gtNC4yOXYtNy4xMTNsLTUuOTktMTAuMzIyaDQuOTEyeiIvPjxwYXRoIGZpbGw9IiMwMjAwMDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTEwNS4yMjUgMTkuMjk1cTEuNjI5IDAgMi45NDcuNjg5YTUuMDcgNS4wNyAwIDAgMSAyLjA4NSAxLjkxOHEuNzY3IDEuMjMuNzY3IDMgMCAxLjcyLS43NjcgM2E1LjA3IDUuMDcgMCAwIDEtMi4wODUgMS45MThxLTEuMzE4LjY2NC0yLjk0Ny42NjRoLTMuMjExdjYuMjQ2aC00LjI5VjE5LjI5NXptLTMuMjExIDcuOTE4aDIuNDY4cS42MjMgMCAxLjEyNy0uMjQ2LjUyNy0uMjcuODM4LS43ODcuMzExLS41MTYuMzExLTEuMjc4IDAtLjc2My0uMzExLTEuMjhhMS44NyAxLjg3IDAgMCAwLS44MzgtLjc4NiAyLjM1IDIuMzUgMCAwIDAtMS4xMjctLjI3aC0yLjQ2OHpNMTI4LjgwMSAzNi43M2gtNC40ODFsLTEuMDIyLTMuMDQ5aC02LjMxOGwtMS4wNDcgMy4wNDloLTQuMzg1bDYuNTg5LTE3LjQzNWg0LjE0NnptLTEwLjYyMy02LjU0MWgzLjk1bC0xLjk1Mi01LjgyeiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PHBhdGggZmlsbD0iIzAyMDAwMCIgZD0iTTE2Mi44NTcgMjMuMDA4aC04LjE3MnYzLjAyNGg3LjQ1MnYzLjYxNmgtNy40NTJ2My4zNjlIMTYzdjMuNzEzaC0xMi42MDRWMTkuMjk1aDEyLjQ2MXoiLz48L3N2Zz4=");
    --svg-top-join-btn: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNTciIGhlaWdodD0iNDgiIGZpbGw9Im5vbmUiPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0wIDcuOTVBNy45NyA3Ljk3IDAgMCAxIDggMGgxNDFjNC40MiAwIDggMy41NiA4IDcuOTV2MzIuMWE3Ljk3IDcuOTcgMCAwIDEtOCA3Ljk1SDhjLTQuNDIgMC04LTMuNTYtOC03Ljk1eiIvPjxwYXRoIGZpbGw9IiMwMjAwMDAiIGQ9Ik0xNDkgNDUuMDJWNDhIOHYtMi45OHptNS00Ljk3VjcuOTVhNSA1IDAgMCAwLTUtNC45N0g4Yy0yLjc2IDAtNSAyLjIzLTUgNC45N3YzMi4xYTUgNSAwIDAgMCA1IDQuOTdWNDhjLTQuNDIgMC04LTMuNTYtOC03Ljk1VjcuOTVBNy45NyA3Ljk3IDAgMCAxIDggMGgxNDFsLjQxLjAxQTcuOTcgNy45NyAwIDAgMSAxNTcgNy45NXYzMi4xYTcuOTcgNy45NyAwIDAgMS03LjU5IDcuOTRMMTQ5IDQ4di0yLjk4YzIuNzYgMCA1LTIuMjMgNS00Ljk3Ii8+PHBhdGggZmlsbD0iIzAyMDAwMCIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNODguNDMgMTQuOXEyLjAzIDAgMy43NS42OWE4LjggOC44IDAgMCAxIDQuOTMgNC43MnEuNzIgMS42Mi43MiAzLjUzdC0uNzIgMy41MmE4LjggOC44IDAgMCAxLTQuOTMgNC43N3EtMS43LjY2LTMuNy42Ni0yLjAzIDAtMy43NC0uNjhhOC44OSA4Ljg5IDAgMCAxLTMuMDItMTQuNjUgOSA5IDAgMCAxIDIuOTctMS44N3ExLjcxLS42OSAzLjc0LS42OW0wIDMuODdxLTEuNDkgMC0yLjU3LjY0LTEuMS42LTEuNjkgMS43NS0uNiAxLjE0LS42IDIuNjUgMCAxLjE3LjMzIDIuMTIuMzQuOTIuOTkgMS42LjY0LjY2IDEuNTQgMS4wMy45LjM0IDIgLjM0IDEuNSAwIDIuNTgtLjY0YTQuMyA0LjMgMCAwIDAgMS42OS0xLjc3cS42LTEuMTUuNi0yLjY4IDAtMS4xMi0uMzUtMi4wNGE0LjM2IDQuMzYgMCAwIDAtMi41LTIuNjMgNSA1IDAgMCAwLTIuMDItLjM3IiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBmaWxsPSIjMDIwMDAwIiBkPSJNNzYuMSAyNi4xN3EwIDIuMDQtLjg1IDMuNTNhNS42IDUuNiAwIDAgMS0yLjM4IDIuMjYgOCA4IDAgMCAxLTMuNjkuNzggNyA3IDAgMCAxLTMtLjU4IDcgNyAwIDAgMS0yLjE4LTEuN2wyLjg4LTIuOHEuNDUuNiAxLjA0LjkyLjYuMyAxLjM4LjMuNjcgMCAxLjItLjI4LjU0LS4yOS44NC0uODIuMzItLjU3LjMyLTEuNDFWMTUuMjJoNC40NHpNMTA1LjQ4IDMyLjQ3aC00LjQ0VjE1LjIyaDQuNDR6TTExMi42OCAxNS4yMmw3Ljg4IDkuOHYtOS44SDEyNXYxNy4yNWgtMy4zbC03LjY4LTkuNTh2OS41OGgtNC40NFYxNS4yMnoiLz48cGF0aCBmaWxsPSIjZmYyNzMxIiBkPSJNMzAuMjIgMTEuNjVIMTUuNzhhNS4wNCA1LjA0IDAgMCAwLTUuMDYgNS4wMnYxNC4zNWE1LjA0IDUuMDQgMCAwIDAgNS4wNiA1LjAzaDE0LjQ0YzIuOCAwIDUuMDYtMi4yNSA1LjA2LTUuMDNWMTYuNjdhNS4wNCA1LjA0IDAgMCAwLTUuMDYtNS4wMiIvPjxwYXRoIGZpbGw9IiMwMjAwMDAiIGQ9Ik0zNC41NiAxNi42N2MwLTIuMzgtMS45NC00LjMtNC4zNC00LjNIMTUuNzhhNC4zIDQuMyAwIDAgMC00LjM0IDQuM3YxNC4zNWMwIDIuMzggMS45NCA0LjMgNC4zNCA0LjNoMTQuNDRjMi40IDAgNC4zNC0xLjkyIDQuMzQtNC4zek0zNiAzMS4wMmE1Ljc2IDUuNzYgMCAwIDEtNS43OCA1Ljc0SDE1Ljc4QTUuNzYgNS43NiAwIDAgMSAxMCAzMS4wMlYxNi42N2E1Ljc2IDUuNzYgMCAwIDEgNS43OC01Ljc0aDE0LjQ0YzMuMiAwIDUuNzggMi41NyA1Ljc4IDUuNzR6Ii8+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTIyLjE4IDE2LjkxYzIuMDUtMiA1LjM2LTIgNy40IDBhNS4wNyA1LjA3IDAgMCAxIDAgNy4yOCA1LjEgNS4xIDAgMCAxLTUuNzIgMS4wN2wtLjc4Ljc2LjQyLjQuMS4xM2MuNTIuNi40OCAxLjUxLS4xIDIuMDhsLS41OC41N2MtLjUuNDktMS4yNS41Ny0xLjg0LjI1LjMxLjU4LjIyIDEuMzMtLjI4IDEuODJsLS41OS41N2MtLjYuNTktMS41Ni41OS0yLjE3IDBsLS41Mi0uNWExLjMgMS4zIDAgMCAxLTEuNDItLjI3bC0uNzYtLjc0Yy0uNjItLjYxLS42Mi0xLjYgMC0yLjJsNS43NC01LjU4YTQuOSA0LjkgMCAwIDEgMS4xLTUuNjNtNi42NC43N2E0LjIzIDQuMjMgMCAwIDAtNS44OCAwIDMuOCAzLjggMCAwIDAtLjg0IDQuNTFjLjE2LjM1LjExLjc3LS4xOCAxLjA1TDE2LjEgMjguOWEuNDYuNDYgMCAwIDAgMCAuNjdsLjc2Ljc1Yy4wOC4wNy4yMS4wNy4zIDBsLjA0LS4wNWEuNi42IDAgMCAxIC43NyAwbC4wNS4wNC43OC43N2MuMTguMTguNDcuMTguNjYgMGwuNTgtLjU3YS40Ni40NiAwIDAgMCAwLS42N2wtLjU3LS41NWEuODcuODcgMCAwIDEgMC0xLjI0bC4yLS4yLjA3LS4wNmEuOS45IDAgMCAxIDEuMSAwbC4wNi4wNi42LjZjLjE5LjE3LjQ4LjE3LjY2IDBsLjU4LS41OC4wNi0uMDdhLjQ2LjQ2IDAgMCAwLS4wNi0uNmwtLjU3LS41NWEuODcuODcgMCAwIDEtLjA2LTEuMThsLjA2LS4wNiAxLjAxLS45OWEuOS45IDAgMCAxIDEuMDEtLjE3YzEuNDQuNiAzLjE2LjYzIDQuNjMtLjgyYTQgNCAwIDAgMCAwLTUuNzRtLTUuMS43NGEzLjEgMy4xIDAgMCAxIDQuMzIgMCAyLjk3IDIuOTcgMCAwIDEgMCA0LjI2IDMuMSAzLjEgMCAwIDEtNC4zMiAwIDIuOTcgMi45NyAwIDAgMSAwLTQuMjZtMy41Ni43N2EyIDIgMCAwIDAtMi44IDAgMS45IDEuOSAwIDAgMCAwIDIuNzNjLjc4Ljc1IDIuMDMuNzUgMi44IDBhMS45IDEuOSAwIDAgMCAwLTIuNzMiLz48L3N2Zz4=");
    ; --svg-top-logout-btn: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxODIiIGhlaWdodD0iNTYiIGZpbGw9Im5vbmUiPjxwYXRoIGZpbGw9IiNmZjI3MzEiIGQ9Ik0wIDhhOCA4IDAgMCAxIDgtOGgxNjZhOCA4IDAgMCAxIDggOHY0MGE4IDggMCAwIDEtOCA4SDhhOCA4IDAgMCAxLTgtOHoiLz48cGF0aCBmaWxsPSIjMDIwMDAwIiBkPSJNMTc0IDUzdjNIOHYtM3ptNS01VjhhNSA1IDAgMCAwLTUtNUg4YTUgNSAwIDAgMC01IDV2NDBhNSA1IDAgMCAwIDUgNXYzbC0uNDEyLS4wMUE4IDggMCAwIDEgLjAxIDQ4LjQxMUwwIDQ4VjhhOCA4IDAgMCAxIDgtOGgxNjZhOCA4IDAgMCAxIDggOHY0MGE4IDggMCAwIDEtNy41ODggNy45OUwxNzQgNTZ2LTNhNSA1IDAgMCAwIDUtNSIvPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0zOCAxMUgxOGE3IDcgMCAwIDAtNyA3djIwYTcgNyAwIDAgMCA3IDdoMjBhNyA3IDAgMCAwIDctN1YxOGE3IDcgMCAwIDAtNy03Ii8+PHBhdGggZmlsbD0iIzAwMCIgZD0iTTQ0IDE4YTYgNiAwIDAgMC02LTZIMThhNiA2IDAgMCAwLTYgNnYyMGE2IDYgMCAwIDAgNiA2aDIwYTYgNiAwIDAgMCA2LTZ6bTIgMjBhOCA4IDAgMCAxLTggOEgxOGE4IDggMCAwIDEtOC04VjE4YTggOCAwIDAgMSA4LThoMjBhOCA4IDAgMCAxIDggOHoiLz48cGF0aCBmaWxsPSIjZmYyNzMxIiBkPSJNMTYuNDM1IDM0LjY3OWEuNzU0Ljc1NCAwIDAgMSAuOTkuMzU5Yy44NTYgMS44MjMgMS43MzUgMi42OTMgMi4zMzcgMy4xMDYuMzAzLjIwOC41NDUuMzA3LjY5NC4zNTRxLjExMi4wMzMuMTUyLjAzOGguMDA3bC4wNzUuMDFjLjM3LjA1Ny42NDYuMzguNjI4Ljc1NmEuNzQuNzQgMCAwIDEtLjc4LjY5N2wuMDM1LS43My0uMDM1LjczaC0uMDEybC0uMDE1LS4wMDJhMSAxIDAgMCAxLS4xNTUtLjAyIDMgMyAwIDAgMS0uMzU2LS4wODUgNC4xIDQuMSAwIDAgMS0xLjA5NC0uNTVjLS44Ni0uNTktMS44OTUtMS42ODMtMi44MzgtMy42OTRhLjcyNi43MjYgMCAwIDEgLjM2Ny0uOTciLz48cGF0aCBmaWxsPSIjZmYyNzMxIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yNi41NDUgMTYuMzRjLjY0Ni0uMzc3IDEuNDItLjQzNCAyLjEzNS0uMjAyYTMuMTcgMy4xNyAwIDAgMSAxLjcwOCAxLjM3MmwzLjY3MiA2LjAzOGMuMjIyLS40MTQuNTU0LS43NjQuOTgtLjk5OC42MzQtLjM0OCAxLjM4MS0uMzk1IDIuMDc0LS4xNzJhMy4xNyAzLjE3IDAgMCAxIDEuNjczIDEuMzEgMy4xIDMuMSAwIDAgMSAuNDc0IDIuMDg0bC0uOTM0IDUuMTU3di4wMDJjLS4yMSAxLjEzLS41NjggMi4xNzMtMS4yMTEgMy4xMjQtLjY0NS45NTMtMS41NSAxLjc3Ni0yLjc5NyAyLjUwNGwtMS42NjkuOTc1Yy0xLjk3MyAxLjE1MS00LjM4NCAxLjM1NC02LjY4NS42MDctMi4yOTctLjc0Ny00LjMxLTIuMzgxLTUuNjE1LTQuNTI3bC0zLjQ0OS01LjY3Yy0uMzktLjY0MS0uNTQ5LTEuNDAzLS40MTgtMi4xMjVhMi41MSAyLjUxIDAgMCAxIDEuMTk3LTEuNzQzYy4zNzctLjIyLjc5Ni0uMzI5IDEuMjIzLS4zMzdhMyAzIDAgMCAxLS4yMzItMS43NTkgMi41MiAyLjUyIDAgMCAxIDEuMTk4LTEuNzQzIDIuNSAyLjUgMCAwIDEgMS4yMjItLjMzOCAzIDMgMCAwIDEtLjIzLTEuNzYgMi41MSAyLjUxIDAgMCAxIDEuMTk3LTEuNzQyYy42NDUtLjM3NiAxLjQxOC0uNDMzIDIuMTM0LS4yLjU4LjE4OCAxLjA5LjU1NyAxLjQ3IDEuMDM1LjIxLS4zNjMuNTA4LS42NzMuODgzLS44OTNtMS42NjQgMS4xODdjLS4zNDEtLjExLS42Ni0uMDctLjkuMDdzLS40MjcuMzk1LS40OS43NDJjLS4wNTUuMzA3LS4wMDUuNjU3LjE1NS45ODFsLjA3Ni4xMzggMi41ODcgNC4yNTNhLjcyNC43MjQgMCAwIDEtLjI2IDEuMDAzLjc1Ni43NTYgMCAwIDEtMS4wMjQtLjI1M2wtMy43MzYtNi4xNDRjLS4yMi0uMzYyLS41NS0uNjItLjg5Ni0uNzMyLS4zNDEtLjExLS42Ni0uMDcxLS45LjA2OXMtLjQyNy4zOTUtLjQ5Ljc0MmMtLjA2NC4zNTIuMDEuNzU5LjIzIDEuMTJsMy40NSA1LjY3MmEuNzI0LjcyNCAwIDAgMS0uMjYgMS4wMDMuNzU2Ljc1NiAwIDAgMS0xLjAyMy0uMjU0bC0yLjMtMy43ODJjLS4yMi0uMzYxLS41NS0uNjE5LS44OTYtLjczMS0uMzQxLS4xMTEtLjY2LS4wNy0uOS4wN3MtLjQyNi4zOTQtLjQ5Ljc0MWMtLjA2My4zNTIuMDExLjc2LjIzMSAxLjEybDIuODc1IDQuNzI3YS43MjQuNzI0IDAgMCAxLS4yNiAxLjAwMy43NTcuNzU3IDAgMCAxLTEuMDI0LS4yNTRsLTEuNzI0LTIuODM2Yy0uMjItLjM2Mi0uNTUtLjYyLS44OTYtLjczMi0uMzQxLS4xMS0uNjYtLjA3LS45LjA3cy0uNDI3LjM5NS0uNDkuNzQyYy0uMDY0LjM1MS4wMS43NTguMjMgMS4xMmwzLjQ1IDUuNjdjMS4xMzQgMS44NjYgMi44NjkgMy4yNTggNC44IDMuODg2IDEuOTI4LjYyNiAzLjg4My40NCA1LjQ1MS0uNDc1bDEuNjctLjk3NGMxLjA4OS0uNjM1IDEuODE1LTEuMzE1IDIuMzE1LTIuMDU0LjUwMS0uNzQyLjgwMy0xLjU4NC45ODctMi41NzhsLjkzLTUuMTMzYTEuNjYgMS42NiAwIDAgMC0uMjY1LTEuMDcyIDEuNjggMS42OCAwIDAgMC0uODc2LS42OTdjLS4zMy0uMTA3LS42NC0uMDcxLS44NzYuMDU4LS4yMzMuMTI4LS40MTguMzYtLjQ5NS42OGwtLjE5NCAxLjA2OGEuNzQuNzQgMCAwIDEtLjczNi42MDRjLS40MSAwLS45NTUuMzMtMS4zMjEgMS4wNzRhMy4xNCAzLjE0IDAgMCAwLS4wNjUgMi41ODQuNzI3LjcyNyAwIDAgMS0uNDA5Ljk1NS43NTMuNzUzIDAgMCAxLS45NzMtLjQwMSA0LjU4IDQuNTggMCAwIDEgLjEwMi0zLjc3M2MuMzMyLS42NzQuODYtMS4yODIgMS41MjQtMS42MmwtNC4wOTgtNi43MzhjLS4yMi0uMzYyLS41NS0uNjItLjg5Ni0uNzMyIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBmaWxsPSIjZmYyNzMxIiBkPSJNMzUuNjY1IDE3LjkzNmMuMDktLjAwMS4yMTYgMCAuMzY3LjAxLjMuMDIzLjcxNi4wODQgMS4xNzQuMjM3LjkzMi4zMSAyLjAzMiAxIDIuNzI0IDIuNDU3YS43MjUuNzI1IDAgMCAxLS4zNjIuOTcxLjc1My43NTMgMCAwIDEtLjk5Mi0uMzU0Yy0uNDkyLTEuMDM2LTEuMjM2LTEuNDg0LTEuODUxLTEuNjlhMy40IDMuNCAwIDAgMC0xLjAzOC0uMTY5bC0uMDUyLjAwMmgtLjAwM2EuNzQzLjc0MyAwIDAgMS0uODEtLjY2NS43MzUuNzM1IDAgMCAxIC42MDMtLjc4MmwuMDc2LS4wMWguMDA3bC4wMTItLjAwMmEzIDMgMCAwIDEgLjE0NS0uMDA1Ii8+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNODEuMDU5IDE5cTEuOTY4IDAgMy42MjQuNjcyYTguNSA4LjUgMCAwIDEgMi44OCAxLjg0OCA4LjUgOC41IDAgMCAxIDEuODk2IDIuODA4cS42OTYgMS42MDkuNjk2IDMuNDggMCAxLjg3Mi0uNjk2IDMuNDhhOC43IDguNyAwIDAgMS0xLjg5NyAyLjgzMiA4LjggOC44IDAgMCAxLTIuODggMS44NzJxLTEuNjMxLjY0OC0zLjU3Ni42NDgtMS45NjcgMC0zLjYyNC0uNjcyYTkuMSA5LjEgMCAwIDEtMi45MDMtMS44NzIgOC44IDguOCAwIDAgMS0xLjkyLTIuODA4IDguOCA4LjggMCAwIDEtLjY5Ni0zLjUwNHEwLTEuODcyLjY3Mi0zLjQ1NmE4LjggOC44IDAgMCAxIDEuOTItMi44MDggOC41IDguNSAwIDAgMSAyLjg4LTEuODQ4UTc5LjA5IDE5IDgxLjA1OSAxOW0wIDMuODE2cS0xLjQ0IDAtMi40OTYuNjI0LTEuMDU2LjYtMS42MzIgMS43Mjh0LS41NzYgMi42MTZxMCAxLjE1Mi4zMTIgMi4wODguMzM2LjkxMi45NiAxLjU4NC42MjQuNjQ4IDEuNDg4IDEuMDA4Ljg2NC4zMzYgMS45NDQuMzM2IDEuNDQgMCAyLjQ5Ni0uNjI0IDEuMDU1LS42MjQgMS42MzEtMS43NTJ0LjU3Ny0yLjY0cTAtMS4xMDQtLjMzNi0yLjAxNWE0LjE1IDQuMTUgMCAwIDAtLjkzNi0xLjU2MSA0LjIgNC4yIDAgMCAwLTEuNDg4LTEuMDMycS0uODY0LS4zNi0xLjk0NC0uMzZNMTIxLjk1NSAxOXExLjk2OCAwIDMuNjI0LjY3MmE4LjUgOC41IDAgMCAxIDIuODggMS44NDggOC41IDguNSAwIDAgMSAxLjg5NiAyLjgwOHEuNjk2IDEuNjA5LjY5NyAzLjQ4IDAgMS44NzItLjY5NyAzLjQ4YTguNyA4LjcgMCAwIDEtMS44OTYgMi44MzIgOC44IDguOCAwIDAgMS0yLjg4IDEuODcycS0xLjYzMi42NDgtMy41NzYuNjQ4LTEuOTY4IDAtMy42MjQtLjY3MmE5IDkgMCAwIDEtMi45MDMtMS44NzIgOC44IDguOCAwIDAgMS0xLjkyLTIuODA4IDguOCA4LjggMCAwIDEtLjY5Ny0zLjUwNHEwLTEuODcyLjY3Mi0zLjQ1NmE4LjggOC44IDAgMCAxIDEuOTItMi44MDggOC41IDguNSAwIDAgMSAyLjg4LTEuODQ4cTEuNjU2LS42NzIgMy42MjQtLjY3Mm0wIDMuODE2cS0xLjQ0IDAtMi40OTYuNjI0LTEuMDU2LjYtMS42MzIgMS43Mjh0LS41NzYgMi42MTZxMCAxLjE1Mi4zMTIgMi4wODguMzM2LjkxMi45NiAxLjU4NGE0LjQgNC40IDAgMCAwIDEuNDg5IDEuMDA4cS44NjQuMzM2IDEuOTQzLjMzNiAxLjQ0IDAgMi40OTYtLjYyNHQxLjYzMi0xLjc1Mi41NzYtMi42NGE1LjggNS44IDAgMCAwLS4zMzYtMi4wMTUgNC4xNSA0LjE1IDAgMCAwLS45MzUtMS41NjEgNC4yIDQuMiAwIDAgMC0xLjQ4OS0xLjAzMnEtLjg2NC0uMzYtMS45NDQtLjM2IiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMTAxLjk0NSAxOS4wMjRxMi4yOCAwIDQuMTI4LjgxNiAxLjg0OC43OTIgMyAyLjIwOGwtMi44OCAyLjg4cS0uODYzLTEuMDMyLTEuODk1LTEuNTM1LTEuMDMyLS41MjktMi40MDEtLjUyOS0xLjM5MSAwLTIuNDk2LjYyNGE0LjUzIDQuNTMgMCAwIDAtMS43MjcgMS43MDRxLS42NDkgMS4xMDQtLjY0OSAyLjU5MnQuNjAxIDIuNjE2YTQuNTQgNC41NCAwIDAgMCAxLjY4IDEuNzUycTEuMDguNjI0IDIuNDcxLjYyNHQyLjM1My0uNTI4YTMuNDUgMy40NSAwIDAgMCAxLjQ4Ny0xLjUzNnEuMTUtLjI4OC4yNTYtLjYwN2wtNC41NzUtLjExM3YtMy41MDRoOS4xNjh2LjY0OHEwIDMuMDQ4LTEuMTA1IDUuMTYtMS4xMDMgMi4xMTItMy4wNzEgMy4yMTYtMS45NDQgMS4wOC00LjUzNiAxLjA4LTEuOTQ1IDAtMy42LS42NDhhOS4xIDkuMSAwIDAgMS0yLjg4LTEuODcyIDguODUgOC44NSAwIDAgMS0xLjkyLTIuNzg0cS0uNjcyLTEuNjA4LS42NzItMy40OCAwLTEuODk1LjY5Ni0zLjQ4LjcyLTEuNjA4IDEuOTkyLTIuNzg0YTguOTUgOC45NSAwIDAgMSAyLjk1MS0xLjg0OCA5LjggOS44IDAgMCAxIDMuNjI0LS42NzJNMTM4LjE2OSAyOS44NDhxMCAuOTEyLjM4NCAxLjU4NS40MDguNjQ3IDEuMDggMS4wMDcuNjk2LjMzNiAxLjUzNi4zMzYuODY0IDAgMS41MTItLjMzNi42NDgtLjM2IDEuMDMyLTEuMDA3LjM4NC0uNjQ5LjM4NC0xLjU2di0xMC41Nmg0LjMxOVYyOS41NnEwIDIuMDQtLjkxMSAzLjY0N2E2LjYgNi42IDAgMCAxLTIuNTQ0IDIuNDk2cS0xLjYwOC44ODgtMy43OTIuODg4LTIuMTYgMC0zLjgxNi0uODg4YTYuNTMgNi41MyAwIDAgMS0yLjU0NC0yLjUycS0uOTEyLTEuNjA3LS45MTMtMy42NDhWMTkuMzEyaDQuMjczek02My4yOTYgMzIuNjMyaDcuMzJ2My42OTZINTlWMTkuMzEyaDQuMjk2ek0xNjUuNjk4IDIzLjAwOGgtNS4yMDh2MTMuMzJoLTQuMjk2di0xMy4zMmgtNS4yMDh2LTMuNjk1aDE0LjcxMnoiLz48L3N2Zz4=");
    --svg-top-login-btn: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNTciIGhlaWdodD0iNDgiIGZpbGw9Im5vbmUiPjxwYXRoIGZpbGw9IiNmZjI3MzEiIGQ9Ik0xNDcuOCAxLjQ3SDkuMkE3LjggNy44IDAgMCAwIDEuNDUgOS4zdjI5LjM4YTcuOCA3LjggMCAwIDAgNy43NSA3Ljg0aDEzOC42YTcuOCA3LjggMCAwIDAgNy43NC03Ljg0VjkuMzFhNy44IDcuOCAwIDAgMC03Ljc1LTcuODQiLz48cGF0aCBmaWxsPSIjMDIwMDAwIiBkPSJNMTU0LjEgOS4zYTYuMzMgNi4zMyAwIDAgMC02LjMtNi4zNkg5LjJBNi4zMyA2LjMzIDAgMCAwIDIuOSA5LjN2MjkuMzhhNi4zMyA2LjMzIDAgMCAwIDYuMyA2LjM3aDEzOC42YzMuNDcgMCA2LjMtMi44NSA2LjMtNi4zN3ptMi45IDI5LjRjMCA1LjEzLTQuMTIgOS4zLTkuMiA5LjNIOS4yQTkuMjYgOS4yNiAwIDAgMSAwIDM4LjdWOS4zQzAgNC4xOCA0LjEyIDAgOS4yIDBoMTM4LjZjNS4wOCAwIDkuMiA0LjE3IDkuMiA5LjN6Ii8+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTMwLjk1IDExLjg0aC0xNC45YTUuMiA1LjIgMCAwIDAtNS4yIDUuMjJ2MTQuODhhNS4yIDUuMiAwIDAgMCA1LjIgNS4yMmgxNC45YTUuMiA1LjIgMCAwIDAgNS4yLTUuMjJWMTcuMDZhNS4yIDUuMiAwIDAgMC01LjItNS4yMiIvPjxwYXRoIGZpbGw9IiNmZjI3MzEiIGQ9Ik0yMi4yNCAzMS40NmEuNjMuNjMgMCAwIDEtLjY0LjYzaC01LjA2YS42My42MyAwIDAgMS0uNjMtLjYzVjE3LjU0YS42My42MyAwIDAgMSAuNjMtLjYzaDUuMDZhLjYzLjYzIDAgMSAxIDAgMS4yNmgtNC40M3YxMi42Nmg0LjQzYS42My42MyAwIDAgMSAuNjMuNjNtOC42Ny03LjQtMy4xNi0zLjE3YS42My42MyAwIDEgMC0uOS45bDIuMDggMi4wOEgyMS42YS42My42MyAwIDEgMCAwIDEuMjZoNy4zM2wtMi4wOCAyLjA5YS42My42MyAwIDEgMCAuOS45bDMuMTYtMy4xN2EuNjMuNjMgMCAwIDAgMC0uOSIvPjxwYXRoIGZpbGw9IiMwMjAwMDAiIGQ9Ik0zNS4zMSAxNy4wNmE0LjM3IDQuMzcgMCAwIDAtNC4zNy00LjM3SDE2LjA2YTQuMzcgNC4zNyAwIDAgMC00LjM3IDQuMzd2MTQuODhhNC4zNyA0LjM3IDAgMCAwIDQuMzcgNC4zN2gxNC44OGE0LjM3IDQuMzcgMCAwIDAgNC4zNy00LjM3ek0zNyAzMS45NEE2LjA2IDYuMDYgMCAwIDEgMzAuOTQgMzhIMTYuMDZBNi4wNiA2LjA2IDAgMCAxIDEwIDMxLjk0VjE3LjA2QTYuMDYgNi4wNiAwIDAgMSAxNi4wNiAxMWgxNC44OEE2LjA2IDYuMDYgMCAwIDEgMzcgMTcuMDZ6Ii8+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNzguMTYgMTVxMS45NyAwIDMuNjQuNjdhOC41IDguNSAwIDAgMSA0LjggNC42NnEuNyAxLjYxLjcgMy40OHQtLjcgMy40OWE5IDkgMCAwIDEtMS45MSAyLjgzIDkgOSAwIDAgMS0yLjkgMS44N3EtMS42My42Ni0zLjU4LjY1YTEwIDEwIDAgMCAxLTMuNjQtLjY3IDguNzcgOC43NyAwIDAgMS01LjU0LTguMTlxMC0xLjg3LjY3LTMuNDYuNjktMS42IDEuOTItMi44YTkgOSAwIDAgMSAyLjktMS44NiAxMCAxMCAwIDAgMSAzLjY0LS42N20wIDMuODJxLTEuNDUgMC0yLjUuNjItMS4wNy42LTEuNjUgMS43M2E2LjU2IDYuNTYgMCAwIDAtLjI2IDQuN3EuMzMuOTMuOTYgMS42YTQuNCA0LjQgMCAwIDAgMy40NSAxLjM0cTEuNDQgMCAyLjUtLjYzIDEuMDctLjYyIDEuNjQtMS43NS41OC0xLjEzLjU4LTIuNjQgMC0xLjEtLjM0LTIuMDItLjMtLjktLjk0LTEuNTYtLjYyLS42OC0xLjQ5LTEuMDNhNSA1IDAgMCAwLTEuOTUtLjM2IiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBmaWxsPSIjZmZmIiBkPSJNOTkuMTQgMTUuMDJxMi4zIDAgNC4xNS44MmE4IDggMCAwIDEgMy4wMSAyLjIxbC0yLjkgMi44OGE1LjI0IDUuMjQgMCAwIDAtNC4zMS0yLjA3cS0xLjQgMC0yLjUuNjMtMS4wOS42LTEuNzQgMS43dC0uNjUgMi42cTAgMS41LjYgMi42MmE0LjYgNC42IDAgMCAwIDQuMTcgMi4zN3ExLjQgMCAyLjM3LS41MmEzLjUgMy41IDAgMCAwIDEuNS0xLjU0cS4xNS0uMy4yNS0uNmwtNC42LS4xMnYtMy41aDkuMnYuNjRhMTEgMTEgMCAwIDEtMS4xIDUuMTYgNy43IDcuNyAwIDAgMS0zLjA4IDMuMjIgOSA5IDAgMCAxLTQuNTYgMS4wOHEtMS45NCAwLTMuNjItLjY1YTguODUgOC44NSAwIDAgMS00LjgyLTQuNjYgOSA5IDAgMCAxLS42Ny0zLjQ4cTAtMS44OS43LTMuNDguNzItMS42IDItMi43OGE5IDkgMCAwIDEgMi45Ni0xLjg1IDEwIDEwIDAgMCAxIDMuNjQtLjY4TTYwLjMxIDI4LjY0aDcuMzZ2My43SDU2VjE1LjNoNC4zMXpNMTE1LjAyIDMyLjM0aC00LjMxVjE1LjNoNC4zMXpNMTIyLjAyIDE1LjMxIDEyOS43IDI1di05LjY4SDEzNHYxNy4wM2gtMy4ybC03LjQ4LTkuNDZ2OS40NmgtNC4zMVYxNS4zeiIvPjwvc3ZnPg==");
}

/* top_content_wrapper
    固定ヘッダーの高さ分のマージンをつけるためのID
*************************/
#top_content_wrapper {
    margin-bottom: 6vh;
    background-color: #fff0bd;
}

/* 装飾の背景円（bg_pasts_〇〇）
    自身の箱の外に出せないため、.bg_circleを箱にして、中に実画像（img）をtl/tr/ml/mr/bl/br配置する。
    （bl/brがヒーロー下端を越えてはみ出せるよう、高さ210%の箱にして配置）
*************************/
.bg_circle {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    pointer-events: none;
    height: 100%;
}

.bg_circle img {
    position: absolute;
    display: block;
    animation: showUp 1.4s both, spinCW 50s linear infinite;
    animation-delay: 2.4s, 3.8s;
}

.bg_circle_tl {
    left: -291.6px;
    top: -274.3px;
    width: 630px;
    height: 575px;
}

.bg_circle_tr {
    right: -219.3px;
    top: -210.7px;
    width: 709px;
    height: 630px;
}

.bg_circle_ml {
    left: -62px;
    top: 530px;
    width: 699px;
    height: 637px;
}

.bg_circle_mr {
    right: -291.6px;
    top: 660px;
    width: 630px;
    height: 575px;
}

.bg_circle_bl {
    left: -120px;
    bottom: -280px;
    width: 709px;
    height: 630px;
}

.bg_circle_br {
    right: -260px;
    bottom: -320px;
    width: 630px;
    height: 575px;
}

@media (max-width: 1440px) {
    .bg_circle_tl {
        left: calc(-291.6/1440*100vw);
        top: calc(13.2px - 287.5/1440*100vw);
        width: calc(630/1440*100vw);
        height: calc(575/1440*100vw);
    }

    .bg_circle_tr {
        right: calc(-219.3/1440*100vw);
        top: calc(104.3px - 315/1440*100vw);
        width: calc(709/1440*100vw);
        height: calc(630/1440*100vw);
    }

    .bg_circle_ml {
        left: calc(-62/1440*100vw);
        top: calc(848.5px - 318.5/1440*100vw);
        width: calc(699/1440*100vw);
        height: calc(637/1440*100vw);
    }

    .bg_circle_mr {
        right: calc(-291.6/1440*100vw);
        top: calc(947.5px - 287.5/1440*100vw);
        width: calc(630/1440*100vw);
        height: calc(575/1440*100vw);
    }

    .bg_circle_bl {
        left: calc(-120/1440*100vw);
        bottom: calc(35px - 315/1440*100vw);
        width: calc(709/1440*100vw);
        height: calc(630/1440*100vw);
    }

    .bg_circle_br {
        right: calc(-260/1440*100vw);
        bottom: calc(-32.5px - 287.5/1440*100vw);
        width: calc(630/1440*100vw);
        height: calc(575/1440*100vw);
    }
}

@media (max-width: 767px) {
    .bg_circle_tl {
        left: -28vw;
        top: -50vw;
        width: 100vw;
        height: 100vw;
    }

    .bg_circle img.bg_circle_tr {
        display: none;
    }

    .bg_circle img.bg_circle_ml {
        display: none;
    }

    .bg_circle img.bg_circle_mr {
        display: none;
    }

    .bg_circle img.bg_circle_bl {
        display: none;
    }

    .bg_circle_br {
        right: -20vw;
        bottom: -90vw;
        width: 160vw;
        height: 160vw;
    }
}

#navSwitcher.top span {
    background-color: #FF2731;
}

@media (max-width: 767px) {
    .menuOpen #wrapper #navSwitcher {
        background-color: #F9EFD5;
    }
    .menuOpen #wrapper #navSwitcher .r {
        top: 11px;
        background-color: #FF2731 !important;
    }

    .menuOpen #wrapper #navSwitcher .l {
        top: 11px;
        background-color: #FF2731 !important;
    }

    .menuOpen:before {
        content: "";
        background-color: #F9EFD5;
    }
}

/* TOPページのみヘッダーロゴを差し替え*/
.siteHeading a img {
    content: var(--svg-logo-red);
    position: relative;
}

/* TOPページのみヘッダーSNSアイコンを差し替え*/
.sns_wrap img[alt="icon_toysfactory"] {
    content: var(--svg-toysfactory-logo);
}

.sns_wrap img[alt="icon_x"] {
    content: var(--svg-x-logo);
}

.sns_wrap img[alt="icon_insta"] {
    content: var(--svg-insta-logo);
}

/* Main img
*************************/
.main_area {
    height: 100vh;
}

/* fv */
.top_main {
    padding: 0;
}

.top_main {
    width: 35vh;
    margin: 0 auto;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

@media screen and (max-width: 767px) {
    .top_main {
        width: min(70vw, 35vh);
    }
}

.top_main .title {
    position: absolute;
    z-index: 4;
    top: -3.8%;
}

/* fv_wrap: bg/logo/girl/iconの絶対配置とコンテナクエリ(cqh/cqw)の基準ボックス */
.top_main .fv_wrap {
    aspect-ratio: 1613/2845;
    position: relative;
    width: 100%;
    height: 100%;
    margin-bottom: 4vh;
    container-type: size;
}

/* house本体（fv_bg01+fv_bg02を重ねて表示。旧.bg::before/::afterの実画像化） */
.top_main .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.top_main .bg img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
}

.top_main .bg img.fv_bg02 {
    top: 7.8%;
    left: 0.8%;
}

/* 光の点滅レイヤー。light01/light02を2拍(=2秒)ごとに交互表示（1拍=1秒） */
.top_main .light {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    animation: showUp 1s both;
    animation-delay: 1.6s;
}

.top_main .light img {
    position: absolute;
    width: 95.5%;
    top: 1%;
    left: 2.8%;
}

.top_main .light img.fv_light01 {
    animation: fvLightBlink01 2s steps(1) infinite;
}

.top_main .light img.fv_light02 {
    opacity: 0;
    animation: fvLightBlink02 2s steps(1) infinite;
}

@keyframes fvLightBlink01 {
    0% {
        opacity: 1;
    }

    37.5% {
        opacity: 0;
    }

    /* 1周目 18F */
    87.5%, 100% {
        opacity: 1;
    }

    /* 2周目 18F */
}

@keyframes fvLightBlink02 {
    0% {
        opacity: 0;
    }

    37.5% {
        opacity: 1;
    }

    /* 1周目 18F */
    87.5%, 100% {
        opacity: 0;
    }

    /* 2周目 18F */
}

.top_main .girl {
    position: absolute;
    width: 28.8%;
    top: 56.4%;
    left: 49.5%;
    transform: translate(-50%, -50%);
    display: grid;
    justify-items: center;
}

.top_main .girl img {
    grid-area: 1 / 1;
    max-height: 36cqh;
    width: auto;
    opacity: 0;
}

/* BPM120(1拍=0.5秒)基準。woofer-pulseのS/M/Lタイミングに合わせ、girl_cut1(S)→cut2(M)→cut1(S)→cut3(L)→cut2→cut1 を1サイクル(2拍=1秒)としてループ。 */
.top_main .girl img.girl_cut1 {
    opacity: 1;
    animation: girlCut1Anime 1s steps(1) infinite;
}

.top_main .girl img.girl_cut2 {
    opacity: 0;
    animation: girlCut2Anime 1s steps(1) infinite;
}

.top_main .girl img.girl_cut3 {
    opacity: 0;
    animation: girlCut3Anime 1s steps(1) infinite;
}

@keyframes girlCut1Anime {
    0% {
        opacity: 1;
    }

    /* 0F：一枚目 */
    25% {
        opacity: 0;
    }

    /* 6F */
    37.5% {
        opacity: 1;
    }

    /* 9F：一枚目に復帰 */
    75%, 100% {
        opacity: 0;
    }

    /* 18F〜24F */
}

@keyframes girlCut2Anime {
    0% {
        opacity: 0;
    }

    25% {
        opacity: 1;
    }

    /* 6F：二枚目 */
    37.5% {
        opacity: 0;
    }

    /* 9F */
    87.5%, 100% {
        opacity: 1;
    }

    /* 21F：二枚目 */
}

@keyframes girlCut3Anime {
    0% {
        opacity: 0;
    }

    75% {
        opacity: 1;
    }

    /* 18F：三枚目 */
    87.5%, 100% {
        opacity: 0;
    }

    /* 21F */
}

.top_main .icon {
    position: absolute;
    width: 20%;
    text-align: center;
}

.top_main .logo {
    position: absolute;
    width: 47%;
    top: 11.5%;
    left: 50%;
    transform: translateX(-52%);
    display: grid;
    justify-items: center;
}

.top_main .logo img {
    grid-area: 1 / 1;
    max-height: 21cqh;
    width: auto;
    opacity: 0;
}

.top_main .logo img.logo_on {
    opacity: 1;
    animation: logoOnAnime 4s steps(1) infinite;
}

.top_main .logo img.logo_off {
    opacity: 0;
    animation: logoOffAnime 4s steps(1) infinite;
}

@keyframes logoOnAnime {
    0% {
        opacity: 1;
    }

    /* 0:00 一枚目 */
    93.75% {
        opacity: 0;
    }

    /* 3:18 二枚目 */
    95.833% {
        opacity: 1;
    }

    /* 3:20 一枚目 */
    97.917% {
        opacity: 0;
    }

    /* 3:22 二枚目 */
    100% {
        opacity: 1;
    }

    /* 3:24（4:00）一枚目 */
}

@keyframes logoOffAnime {
    0% {
        opacity: 0;
    }

    93.75% {
        opacity: 1;
    }

    /* 3:18 */
    95.833% {
        opacity: 0;
    }

    /* 3:20 */
    97.917% {
        opacity: 1;
    }

    /* 3:22 */
    100% {
        opacity: 0;
    }

    /* 3:24 */
}

.top_main .icon.gallery {
    left: 40.4%;
    top: 26.3%;
}

.top_main .icon.blog {
    left: 7.7%;
    top: 45.5%;
    width: 20.7% !important;
}

.top_main .icon.blog img {
    transform-origin: bottom;
}

.top_main .icon.message {
    top: 55.5%;
    right: 18.2%;
    width: 14% !important;
}

.top_main .icon.message img {
    transform-origin: bottom;
}

.top_main .icon.books {
    top: 65.8%;
    left: 17.4%;
    width: 17.4% !important;
}

.top_main .icon.books img {
    transform-origin: bottom;
}

.top_main .icon.suzuri {
    top: 65.4%;
    right: 12.2%;
    width: 20.5% !important;
}

.top_main .icon.toys {
    top: 85.8%;
    left: 6%;
    width: 23.8% !important;
}

.top_main .icon.toys img {
    transform-origin: bottom;
}

.top_main .icon.fc {
    top: 83.5%;
    right: 5.6%;
    width: 29.3% !important;
}

.top_main .icon.fc img {
    transform-origin: 50% 80%;
}

.top_main .icon .icon_img {
    animation: woofer-pulse 1s steps(1, end) infinite;
}

.top_main .icon .icon_hover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: none;
}

@media (min-width: 768px) {
    .top_main .icon:hover .icon_hover {
        display: block;
        animation: jumpUp .4s both;
    }

    .top_main .icon:hover .icon_img {
        opacity: 0;
    }
}

.top_main .bottom_link_wrap .sns_wrap {
    display: flex;
    justify-content: center;
    gap: 2%;
}

.top_main .bottom_link_wrap .sns_wrap a {
    width: 10%;
}

.bg_bottom {
    position: absolute;
    clip-path: polygon(40% 0%, 60% 0%, 100% 100%, 0% 100%);
    background-color: #f9f5e4;
    width: 190%;
    height: 54vh;
    bottom: -29.8vh;
    z-index: -1;
    display: none;
}

.top_main .bg {
    animation: showUp 1s both;
    animation-delay: 1.6s;
}

.top_main .title {
    animation: showUp 1s both;
    animation-delay: 1.6s;
}

.top_main .girl {
    animation: showUp 1s both;
    animation-delay: 2.0s;
}

.top_main .logo {
    animation: logoAnime 1s both;
    animation-delay: 0.6s;
}

.top_main .icon {
    animation: popUp .7s both cubic-bezier(0.17, 0.84, 0.2, 1.18);
    animation-delay: 2.4s;
}

.top_main .bottom_link_wrap {
    animation: showUp 1s both;
    animation-delay: 2.4s;
}

.bg_bottom {
    animation: showUp 1.4s both;
    animation-delay: 2.8s;
}

header.top,#navSwitcher.top {
    animation: showDown 1.4s both;
    animation-delay: 2.4s;
    background: unset;
}

/* TOPのみメニュー展開時もヘッダーをグレー背景の前面に（base.cssのz-index:9を打ち消し） */
.menuOpen header {
    z-index: 10;
}

@media (min-width: 768px) {
    #wrapper .top_main a:hover {
        opacity: 1;
    }

    #wrapper .top_main a:hover span {
        animation: jumpUp .4s both;
    }
}

.top_main a {
    text-decoration: none;
    color: #000;
}

@keyframes logoAnime {
    0% {
        top: 58%;
        left: 50%;
        transform: translate(-50%, -50%) scale(2);
    }

    100% {
        top: 11.5%;
        left: 50%;
        transform: translate(calc(-52% + 3.5px), 3px) scale(1);
    }
}

@keyframes jumpUp {
    0% {
        transform: translateY(0px);
    }

    30% {
        transform: translateY(-3px);
    }

    60% {
        transform: translateY(0px);
    }

    80% {
        transform: translateY(-2px);
    }

    100% {
        transform: translateY(0px);
    }
}

@keyframes showUp {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes showDown {
    0% {
        opacity: 0;
        transform: translateY(-60px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes spinCW {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes popUp {
    0% {
        transform: scale(0);
    }

    100% {
        transform: scale(1);
    }
}

/* 動画に合わせ、1秒ごとに短い小パルスと大パルスを段階的に繰り返す。 */
@keyframes woofer-pulse {
    0% {
        transform: scale(1);
    }

    /* 0F：35% */
    25% {
        transform: scale(1.02);
    }

    /* 6F：35.7% */
    37.5% {
        transform: scale(1.0086);
    }

    /* 9F：35.3% */
    50% {
        transform: scale(1);
    }

    /* 12F：35% */
    75% {
        transform: scale(1.0429);
    }

    /* 18F：36.5% */
    87.5% {
        transform: scale(1.0086);
    }

    /* 21F：35.3% */
    100% {
        transform: scale(1);
    }

    /* 24F：35% */
}

/* 使用例 */
.woofer {
    animation: woofer-pulse 1s steps(1, end) infinite;
}

/*
@media screen and (max-width: 767px) {
  .top_main .logo{animation: logoAnimeSp 1s both;animation-delay: 0.6s;}
}
  */
/* TOP contents
*************************/
.top_contents {
    padding: 120px 0;
    background-color: #fff;
    border-radius: 30px;
    margin-bottom: 1px;
}

.top_news {
    margin: 0 auto 96px;
    width: 100%;
    position: relative;
}

.top_news .inner {
    padding: 0 24px!important;
}

@media (max-width: 767px) {
    .top_contents {
        padding: 40px 0;
    }

    .top_news {
        margin-bottom: 42px;
    }

    .top_news .inner {
        padding: 0 16px!important;
    }
}

/* TOP／INFORMATION（旧テンプレート由来。#clearfix / .category は現行のmasonly/pick_list構成では未使用のため削除済み。.btn_box a はMOREリンクで使用中のため維持） */
.btn_box {
    text-align: center;
    position: relative;
    z-index: 1;
}

.btn_box a {
    min-width: 10em;
    padding: 16px;
    background-color: #ffffff;
    text-decoration: none;
    color: red;
    display: inline-block;
    border-radius: 16px;
    font-weight: 700;
    border: 4px solid red;
    font-size: 20px;
    margin: 32px auto 0;
    text-align: center;
}

@media (max-width: 767px) {
    .btn_box a {
        font-size: 15px;
        width: min(180px);
    }
}

/* 以下追加 */
/* ページ内記載のCSSの打ち消し */
.header_main .siteHeading.forPc {
    top: 0;
}

#wrapper #navSwitcher {
    top: 0;
}

#wrapper header .inner #header_user {
    margin-top: 0;
}

.top_main .bottom_link_wrap .btn_wrap a .btn_icon {
    display: none;
}

.top_main .bottom_link_wrap .btn_wrap a img[alt="link_mypage"] {
    content: var(--svg-top-mypage-btn);
}

.top_main .bottom_link_wrap .btn_wrap a img[alt="link_about_dummy"] {
    content: var(--svg-top-join-btn);
}

.top_main .bottom_link_wrap .btn_wrap a img[alt="link_join_dummy"] {
    content: var(--svg-top-login-btn);
}

.top_main .bottom_link_wrap .btn_wrap a img[alt="link_logout"] {
    content: var(--svg-top-logout-btn);
}

.top_main .bottom_link_wrap .btn_wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
}

.top_main .bottom_link_wrap {
    display: block;
    width: 42vh;
    left: 50%;
    transform: translateX(-50%);
    position: relative;
}

.top_main .bottom_link_wrap .btn_wrap a {
    display: block;
}

.top_main .bg_circle {
    overflow-x: clip;
    overflow-y: visible;
}

.top_news .custom-tag-container {
    border-radius: 8px;
}

@media (max-width: 767px) {
    .top_news .custom-tag-container {
        border-radius: 6px;
    }

    .top_main .bottom_link_wrap {
        width: 110%;
    }

    #mainNav.top ul.inner::before {
        margin-top: 0;
    }
}


/* header PC
*************************/
header {
    box-sizing: border-box;
    height: 86px;
    width: 100%;
    position: fixed;
    z-index: 10;
    background: #ff2631;
    box-shadow: none;
    border-bottom: none;
}

.siteHeading {
    font-size: 161.5%;
    float: none;
    z-index: 1000;
    position: relative;
}

.siteHeading.forSp {
    display: none;
}

/* 以下追加 */
header .inner #header_user dt {
    margin-right: 0;
    font-weight: 700;
    font-size: 90%;
    margin: 2px 10px 0 0;
    text-align: left;
    width: auto;
    height: 20px;
    line-height: 20px;
    background: transparent;
    color: var(--c_white);
}

header .inner #header_user dt span {
    display: none;
}

.header_main {
    padding-right: 0;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center;
    position: relative;
}

header .inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: inherit;
    width: 100%;
    height: 100%;
    padding: 0 24px !important;
    margin: 0;
    &::after {
        display: none;
    }

    &::before {
        display: none;
    }
}

header .inner #header_user {
    margin-right: calc(40px + 24px);
    width: auto;
    height: auto;
    position: relative;
    z-index: 1001;
    display: flex;
    box-shadow: none;
    background: transparent;
    border-left: none;
}

.siteHeading.forPc a {
    display: block;
    width: fit-content;
    padding: 0;
    cursor: pointer;
}

.siteHeading.forPc a img {
    display: block;
    width: 140px;
    margin: 0 auto;
    object-fit: contain;
}

header .inner #header_user dd {
    display: flex;
    gap: 16px;
    font-size: 0;
    width: auto;
}

header .inner #header_user p a {
    text-decoration: none;
    width: 216px;
    height: 56px;
    display: block;
}

header .inner #header_user p {
    margin: 0;
}

header .inner #header_user img[alt="top_mypage"], header .inner #header_user img[alt="top_logout"], header .inner #header_user img[alt="top_join"], header .inner #header_user img[alt="top_login"] {
    width: 100%;
    height: auto;
}

header .inner #header_user img[alt="top_mypage"] {
    content: var(--svg-mypage-pc);
}

header .inner #header_user img[alt="top_logout"] {
    content: var(--svg-logout-pc);
}

header .inner #header_user img[alt="top_join"] {
    content: var(--svg-join-pc);
}

header .inner #header_user img[alt="top_login"] {
    content: var(--svg-login-pc);
}

.sns_wrap {
    display: flex;
    gap: 4px;
}

.sns_wrap a {
    display: block;
    width: 44px;
}

@media (max-width: 767px) {
    header .inner {
        padding: 0 16px !important;
        &::after {
            display: none;
        }

        &::before {
            display: none;
        }
    }

    .siteHeading.forSp {
        display: block;
        width: calc(80px / 375px * 100vw);
        padding: 0px;
    }

    header .inner #header_user {
        margin-right: calc(32px + 12px);
        padding: 0;
    }

    header .inner #header_user dd {
        gap: 8px;
    }

    header .inner #header_user p a {
        width: calc(95px / 375px * 100vw);
        height: auto;
        font-size: 0;
    }
}

/* 以上追加 */
.sns_wrap a img {
    width: 100%;
    height: auto;
}

/* header SP
*************************/
@media (max-width: 767px) {
    header {
        height: 60px;
    }

    header .inner #header_user dt {
        margin-bottom: 8px;
        text-align: right;
        margin-right: 50px;
    }

    header .inner #header_user dd {
        display: flex;
        justify-content: right;
        padding: 0;
    }

    .header_main {
        padding-bottom: 0;
        padding: 10px 0;
    }

    .sns_wrap a {
        width: 32px;
    }

    header .inner #header_user img[alt="top_mypage"] {
        content: var(--svg-mypage-sp);
    }

    header .inner #header_user img[alt="top_logout"] {
        content: var(--svg-logout-sp);
    }

    header .inner #header_user img[alt="top_join"] {
        content: var(--svg-join-sp);
    }

    header .inner #header_user img[alt="top_login"] {
        content: var(--svg-login-sp);
    }
}

/* mainNav PC
*************************/
@media (min-width: 768px) {
    #mainNav {
        z-index: 12;
        position: fixed;
        top: 30px;
        width: calc(100% - 360px);
        padding: 0;
        right: 260px;
        background: transparent;
    }

    #mainNav ul.inner {
        position: relative;
        float: none;
        max-width: inherit;
        width: 100%;
        box-sizing: border-box;
        margin: 0 0 0 auto;
        padding: 0;
        text-align: right;
        display: flex;
        justify-content: right;
        align-items: center;
    }

    #mainNav li {
        float: none;
        position: relative;
        margin: 0;
        display: inline-block;
        text-align: center;
    }

    #mainNav li:first-child {
        margin-top: 60px;
    }

    #mainNav li.sns {
        width: 20px;
    }

    #mainNav li.sns a {
        min-width: inherit;
    }

    #mainNav li.sns img {
        width: 18px;
    }

    #mainNav li a {
        color: var(--c_dark);
        margin: 0;
        font-family: var(--font_en);
        font-size: min(2vw,14px);
        font-weight: 600;
        line-height: 1.1em;
        padding: 0;
        display: flex;
        flex-direction: column;
    }

    #mainNav li a span {
        font-size: 0.55em;
        font-weight: 700;
    }

    #mainNav li a:hover {
        border-bottom: none;
        color: var(--c_main);
        opacity: 1;
    }

    #mainNav li a .icon {
        height: 26px;
        margin-bottom: 4px;
    }

    html #mainNav.top ul {
        height: auto;
        bottom: auto;
    }

    html #mainNav.top ul.inner {
        height: 100%;
    }
}

/* メニュー項目の非表示（9,10番目） */
#mainNav li:nth-child(9) {
    display: none;
}

#mainNav li:nth-child(10) {
    display: none;
}

html #mainNav.top ul {
    height: auto;
    max-height: 100vh;
    bottom: auto;
    overflow-y: auto;
}

html #mainNav.top ul::-webkit-scrollbar {
    display: none;
}

#mainNav.top {
    position: fixed;
    z-index: 9;
    top: 85px;
    width: 100%;
    pointer-events: none;
}

#mainNav.top ul {
    width: 358px;
    padding: 0;
    background-color: #F9EFD5;
    position: fixed;
    top: 0;
    /*SPヘッダーの高さ*/
    right: 0;
    margin-left: 0;
    overflow-y: auto;
}

#mainNav.top ul.inner {
    padding: 0;
    opacity: 0;
    visibility: hidden;
    transition: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}

#mainNav.top ul li {
    flex-shrink: 0;
}

#mainNav.top ul a {
    font-family: var(--font_en);
    font-size: 24px;
    font-weight: 700;
    text-decoration: none;
    border-top: none;
    display: block;
    line-height: 1.2em;
    letter-spacing: 0.05em;
    color: #ffffff !important;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    height: 100%;
    background-color: red;
    padding: 8px 24px;
    text-align: left;
    border-radius: 8px;
    position: relative;
    transition: 0.1s;
    overflow: hidden;
}

#mainNav.top ul a span {
    font-size: 0.55em;
    font-weight: 700;
}

#mainNav.top ul a::before {
    content: "";
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    border: 4px solid #000;
    border-radius: 8px;
    pointer-events: none;
    z-index: 2;
    background: linear-gradient(115deg, transparent 0%, transparent 46%, rgba(255,255,255,0.85) 46%, rgba(255,255,255,0.85) 54%, transparent 54%, transparent 100%);
    background-repeat: no-repeat;
    background-size: 300% 100%;
    background-position: 100% 0;
    transition: background-position 0.35s ease-out;
}

@media (min-width: 768px) {
    #mainNav.top ul a:hover {
        filter: drop-shadow(2px 7px 0px rgba(0,0,0,0.6));
        transform: translate3D(0, -7px, 0);
    }

    #mainNav.top ul a:hover::before {
        background-position: 0% 0;
    }
}

#mainNav.top li a .icon {
    width: 40px;
    margin-bottom: 0;
}

.menuOpen #mainNav.top {
    pointer-events: all;
    z-index: 11;
}

.menuOpen #mainNav.top ul.inner {
    z-index: 11;
}

.menuOpen #mainNav.top ul {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.6s;
}

.menuOpen #mainNav.top ul li {
    height: auto;
    margin-bottom: 36px;
    width: 310px;
    height: 56px;
}

.menuOpen #mainNav.top ul li:nth-last-child(-n+2) a {
    background-color: #222B59;
}

.menuOpen #mainNav.top ul li:first-child {
    margin-top: 96px;
}

.menuOpen #mainNav.top ul li.sns a {
    padding: 1.4em;
}

.menuOpen #mainNav.top ul li.sns a img {
    width: 20px;
}

.menuOpen:before {
    position: fixed;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 10;
    pointer-events: none;
    transition: opacity 0.6s;
    opacity: 1;
    visibility: visible;
}

/* メニュー展開時、ヘッダー・ページトップをグレー背景(z-index:10)より後ろへ */
.menuOpen header, .menuOpen .pageTop {
    z-index: 9 !important;
}

/* mainNav SP
*************************/
@media (max-width: 767px) {
    #mainNav {
        position:fixed;
        z-index: 9;
        top: 85px;
        width: 100%;
    }

    #mainNav ul {
        width: 100%;
        padding: 0;
        background-color: #f9f5e4;
        position: fixed;
        top: 60px;
        /*SPヘッダーの高さ*/
        left: 0;
        margin-left: 0;
    }

    #mainNav ul.inner {
        padding: 0;
        opacity: 0;
        transition: 1s;
    }

    #mainNav ul a {
        font-family: var(--font_en);
        font-size: 16px;
        font-weight: 700;
        text-align: left;
        text-decoration: none;
        border-top: none;
        display: block;
        line-height: 1.2em;
        padding: 1em;
        letter-spacing: 0.05em;
        color: #000 !important;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    #mainNav ul a span {
        font-size: 0.55em;
        font-weight: 700;
    }

    #mainNav li a .icon {
        width: 40px;
        margin-bottom: 0;
    }

    #mainNav.top ul {
        width: 100%;
    }

    #mainNav.top ul a {
        font-size: 20px;
    }

    #mainNav.top ul a::before {
        border-width: 3px;
    }

    #mainNav.top ul.inner {
        top: 60px;
        height: calc(100% - 60px);
    }

    .menuOpen #mainNav.top ul li {
        margin-bottom: 24px;
    }

    .menuOpen #mainNav.top ul li:first-child {
        margin-top: 24px;
    }

    .menuOpen #mainNav.top ul li:last-child {
        margin-bottom: 80px;
    }

    .menuOpen #mainNav ul {
        height: calc(100vh - 40px);
        opacity: 1;
        transition: 0.6s;
        overflow-y: scroll;
    }

    .menuOpen #mainNav ul li {
        height: auto;
        margin-bottom: 0;
        /* border-bottom: 1px solid var(--c_main); */
    }

    .menuOpen #mainNav ul li:last-of-type {
        margin-bottom: 6vw;
    }

    .menuOpen #mainNav ul li:first-child {
        margin-top: 60px;
        /* border-top: 1px solid var(--c_main); */
    }

    .menuOpen #mainNav ul li.sns a {
        padding: 1.4em;
    }

    .menuOpen #mainNav ul li.sns a img {
        width: 20px;
    }

    .menuOpen:before {
        content: none;
    }
}

/* navSwitcher SP
*************************/
/* 以下追加 */
#navSwitcher {
    background-color: transparent;
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: space-between;
    pointer-events: none;
    top: 0;
    right: 0;
    z-index: 20000;
    width: 358px;
    /* メニュー358pxに合わせる */
    height: 86px;
    padding: 0 24px;
    /* 右端からの余白を確保 */
}

#navSwitcher::before {
    content: "MENU";
    font-family: var(--font_en);
    color: #fff;
    font-size: 48px;
    font-weight: 700;
    letter-spacing: 0.05em;
    height: fit-content;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s;
}

#navSwitcher::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(rgba(249, 239, 213, 1) 85%, rgba(249, 239, 213, 0) 100%);
    pointer-events: none;
    z-index: -1;
    opacity: 0;
}

#navSwitcher a {
    width: 40px;
    height: 27px;
    display: block;
    position: relative;
    border-top: none;
    border-bottom: none;
    pointer-events: auto;
}

#navSwitcher span {
    width: 100%;
    height: 5px;
    margin: 0;
    background-color: #ffffff;
    border-radius: 50px;
    position: absolute;
    top: 0;
    bottom: 0;
    transition: 0.2s;
}

#navSwitcher .l {
    bottom: inherit;
    top: 0;
}

#navSwitcher .r {
    top: inherit;
    width: 100%;
    right: 0;
    bottom: 0px;
}

#navSwitcher .m {
    top: 11px;
    width: 100%;
    right: 0;
    bottom: inherit;
}

.menuOpen #navSwitcher::after {
    opacity: 1;
    transition: opacity 0.6s ease-in;
}

.menuOpen #navSwitcher a {
    width: 36px;
    border: none;
}

.menuOpen #navSwitcher a:before {
    display: none;
}

.menuOpen #navSwitcher .l {
    bottom: 0;
    top: 50%;
    transform: translateY(-50%) rotate(-45deg);
    -webkit-transform: translateY(-50%) rotate(-45deg);
    -moz-transform: translateY(-50%) rotate(-45deg);
    -ms-transform: translateY(-50%) rotate(-45deg);
    -o-transform: translateY(-50%) rotate(-45deg);
    background-color: #000;
}

.menuOpen #navSwitcher .r {
    width: 100%;
    right: inherit;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    -webkit-transform: translateY(-50%) rotate(45deg);
    -moz-transform: translateY(-50%) rotate(45deg);
    -ms-transform: translateY(-50%) rotate(45deg);
    -o-transform: translateY(-50%) rotate(45deg);
    background-color: #000;
}

.menuOpen #navSwitcher .m {
    opacity: 0;
}

.menuOpen #navSwitcher::before {
    color: #000;
    opacity: 1;
    visibility: visible;
}

#mainNav.top ul li:nth-child(n+3):nth-child(-n+6) a::after, #mainNav.top ul li:nth-child(n+7):nth-child(-n+8) a::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -2px;
    transform: translateY(-50%) rotate(-10deg);
    width: 48px;
    height: 48px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    z-index: 1;
}

#mainNav.top ul li:nth-child(n+3):nth-child(-n+6) a::after {
    background-image: var(--svg-key-icon);
}

#mainNav.top ul li:nth-child(n+7):nth-child(-n+8) a::after {
    width: 36px;
    height: 36px;
    right: 2px;
    background-image: var(--svg-external-icon);
}

@media (max-width: 767px) {
    #navSwitcher::before {
        content: none;
    }

    #navSwitcher a {
        width: 32px;
    }

    #navSwitcher {
        width: 100%;
        height: 60px;
        background-image: inherit;
        padding: 0 12px;
        justify-content: flex-end;
    }

    .menuOpen #navSwitcher a {
        width: 32px;
    }

    .menuOpen #navSwitcher .r {
        top: 11px;
        background-color: #fff;
    }

    .menuOpen #navSwitcher .l {
        top: 11px;
        background-color: #fff;
    }

    .menuOpen #navSwitcher {
        background-image: inherit;
    }

    #mainNav.top ul.inner::before {
        content: "MENU";
        color: #000;
        font-family: var(--font_en);
        font-size: 32px;
        font-weight: 700;
        letter-spacing: 0.05em;
        white-space: nowrap;
        margin-top: 24px;
        pointer-events: none;
        line-height: 1.3;
    }

    #mainNav.top ul li:nth-child(n+3):nth-child(-n+6) a::after {
        right: -2px;
    }

    #mainNav.top ul li:nth-child(n+7):nth-child(-n+8) a::after {
        right: 2px;
    }

    .menuOpen #navSwitcher::after {
        opacity: 0;
        transition: opacity 0.6s ease-in;
    }
}