/* ========================================================= よろずごよみ：ChatGPTのデザインシステム（etogoyomi.css）と既存の部品をつなぐ 既存のクラスを、仕様のトークン・部品の見た目にそろえる ========================================================= */ :root { --img-kumo1: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjE0IDQ0IDEwMCA0NiI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJrIiB4MT0iMCIgeTE9IjAiIHgyPSIwIiB5Mj0iMSI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjRjZFM0ExIi8+PHN0b3Agb2Zmc2V0PSIuNiIgc3RvcC1jb2xvcj0iI0UwQkY1QSIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iI0M5QTI0QSIvPjwvbGluZWFyR3JhZGllbnQ+PGZpbHRlciBpZD0ibyI+PGZlTW9ycGhvbG9neSBvcGVyYXRvcj0iZGlsYXRlIiByYWRpdXM9IjEuMSIgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9ImQiLz48ZmVGbG9vZCBmbG9vZC1jb2xvcj0iI0E4ODQyMCIvPjxmZUNvbXBvc2l0ZSBpbjI9ImQiIG9wZXJhdG9yPSJpbiIgcmVzdWx0PSJlIi8+PGZlTWVyZ2U+PGZlTWVyZ2VOb2RlIGluPSJlIi8+PGZlTWVyZ2VOb2RlIGluPSJTb3VyY2VHcmFwaGljIi8+PC9mZU1lcmdlPjwvZmlsdGVyPjwvZGVmcz48ZyBmaWxsPSJ1cmwoI2spIiBmaWx0ZXI9InVybCgjbykiPjxjaXJjbGUgY3g9IjMwLjAiIGN5PSI3Ni4wIiByPSIxMi4wIi8+PGNpcmNsZSBjeD0iNDguMCIgY3k9IjY0LjAiIHI9IjE3LjAiLz48Y2lyY2xlIGN4PSI3MC4wIiBjeT0iNTguMCIgcj0iMjAuMCIvPjxjaXJjbGUgY3g9IjkzLjAiIGN5PSI2Ni4wIiByPSIxNi4wIi8+PGNpcmNsZSBjeD0iMTEwLjAiIGN5PSI3Ni4wIiByPSIxMS4wIi8+PHJlY3QgeD0iMzAuMCIgeT0iNzQuMCIgd2lkdGg9IjgwLjAiIGhlaWdodD0iMTIuMCIgcng9IjYuMCIvPjwvZz48ZyBmaWxsPSJub25lIiBzdHJva2U9IiNBODg0MjAiIHN0cm9rZS13aWR0aD0iMS40IiBzdHJva2UtbGluZWNhcD0icm91bmQiPjxwYXRoIGQ9Ik0yMC42IDc2LjAgTDIwLjkgNzQuOSBMMjEuMyA3My44IEwyMS44IDcyLjcgTDIyLjUgNzEuOCBMMjMuMyA3MS4wIEwyNC4yIDcwLjMgTDI1LjIgNjkuNyBMMjYuMyA2OS4zIEwyNy40IDY5LjAgTDI4LjUgNjguOSBMMjkuNiA2OC45IEwzMC43IDY5LjAgTDMxLjcgNjkuMyBMMzIuNyA2OS43IEwzMy42IDcwLjIgTDM0LjMgNzAuOCBMMzUuMCA3MS41IEwzNS41IDcyLjIgTDM1LjkgNzMuMCBMMzYuMiA3My44IEwzNi40IDc0LjYgTDM2LjQgNzUuNCBMMzYuMyA3Ni4yIEwzNi4xIDc3LjAgTDM1LjcgNzcuNyBMMzUuMyA3OC4zIEwzNC44IDc4LjkgTDM0LjIgNzkuNCBMMzMuNSA3OS44IEwzMi44IDgwLjEgTDMyLjEgODAuMyBMMzEuNCA4MC40IEwzMC43IDgwLjQgTDMwLjAgODAuMyBMMjkuNCA4MC4yIEwyOC44IDc5LjkgTDI4LjIgNzkuNiBMMjcuOCA3OS4zIEwyNy40IDc4LjkgTDI3LjEgNzguNCBMMjYuOCA3OC4wIEwyNi43IDc3LjUgTDI2LjYgNzcuMSBMMjYuNiA3Ni42IEwyNi43IDc2LjIgTDI2LjggNzUuOCBMMjcuMCA3NS40IEwyNy4yIDc1LjEgTDI3LjUgNzQuOCBMMjcuOSA3NC42IEwyOC4yIDc0LjQgTDI4LjUgNzQuMyBMMjguOSA3NC4yIEwyOS4yIDc0LjIgTDI5LjUgNzQuMiBMMjkuOCA3NC4zIEwzMC4xIDc0LjQgTDMwLjMgNzQuNiBMMzAuNSA3NC43Ii8+PHBhdGggZD0iTTM0LjcgNjQuMCBMMzUuMSA2Mi40IEwzNS42IDYwLjggTDM2LjQgNTkuNCBMMzcuNCA1OC4xIEwzOC41IDU2LjkgTDM5LjggNTUuOSBMNDEuMiA1NS4xIEw0Mi44IDU0LjUgTDQ0LjMgNTQuMSBMNDUuOSA1My45IEw0Ny41IDU0LjAgTDQ5LjAgNTQuMiBMNTAuNSA1NC41IEw1MS44IDU1LjEgTDUzLjAgNTUuOCBMNTQuMSA1Ni42IEw1NS4xIDU3LjYgTDU1LjggNTguNiBMNTYuNCA1OS43IEw1Ni44IDYwLjkgTDU3LjAgNjIuMSBMNTcuMSA2My4yIEw1Ni45IDY0LjMgTDU2LjYgNjUuNCBMNTYuMSA2Ni40IEw1NS41IDY3LjMgTDU0LjcgNjguMSBMNTMuOSA2OC44IEw1My4wIDY5LjQgTDUyLjAgNjkuOCBMNTEuMCA3MC4xIEw1MC4wIDcwLjIgTDQ5LjAgNzAuMiBMNDguMCA3MC4xIEw0Ny4xIDY5LjkgTDQ2LjMgNjkuNiBMNDUuNSA2OS4yIEw0NC44IDY4LjcgTDQ0LjMgNjguMSBMNDMuOCA2Ny41IEw0My41IDY2LjggTDQzLjMgNjYuMiBMNDMuMiA2NS41IEw0My4yIDY0LjggTDQzLjMgNjQuMiBMNDMuNSA2My43IEw0My44IDYzLjEgTDQ0LjEgNjIuNyBMNDQuNSA2Mi4zIEw0NS4wIDYyLjAgTDQ1LjQgNjEuNyBMNDUuOSA2MS42IEw0Ni40IDYxLjUgTDQ2LjkgNjEuNSBMNDcuMyA2MS41IEw0Ny43IDYxLjYgTDQ4LjEgNjEuOCBMNDguNCA2Mi4wIEw0OC42IDYyLjIiLz48cGF0aCBkPSJNNTQuNCA1OC4wIEw1NC44IDU2LjEgTDU1LjQgNTQuMyBMNTYuMyA1Mi42IEw1Ny41IDUxLjAgTDU4LjggNDkuNyBMNjAuNCA0OC41IEw2Mi4xIDQ3LjYgTDYzLjggNDYuOSBMNjUuNyA0Ni40IEw2Ny41IDQ2LjIgTDY5LjQgNDYuMiBMNzEuMiA0Ni40IEw3Mi45IDQ2LjkgTDc0LjUgNDcuNSBMNzUuOSA0OC40IEw3Ny4yIDQ5LjMgTDc4LjMgNTAuNSBMNzkuMiA1MS43IEw3OS45IDUzLjAgTDgwLjQgNTQuMyBMODAuNiA1NS43IEw4MC42IDU3LjEgTDgwLjUgNTguNCBMODAuMSA1OS43IEw3OS41IDYwLjggTDc4LjggNjEuOSBMNzcuOSA2Mi44IEw3Ni45IDYzLjYgTDc1LjkgNjQuMyBMNzQuNyA2NC44IEw3My41IDY1LjEgTDcyLjQgNjUuMyBMNzEuMiA2NS4zIEw3MC4wIDY1LjIgTDY5LjAgNjUuMCBMNjguMCA2NC42IEw2Ny4xIDY0LjEgTDY2LjMgNjMuNSBMNjUuNiA2Mi44IEw2NS4xIDYyLjEgTDY0LjcgNjEuMyBMNjQuNCA2MC41IEw2NC4zIDU5LjggTDY0LjMgNTkuMCBMNjQuNCA1OC4zIEw2NC43IDU3LjYgTDY1LjAgNTcuMCBMNjUuNCA1Ni40IEw2NS45IDU2LjAgTDY2LjQgNTUuNiBMNjcuMCA1NS4zIEw2Ny42IDU1LjEgTDY4LjEgNTUuMCBMNjguNyA1NS4wIEw2OS4yIDU1LjEgTDY5LjcgNTUuMiBMNzAuMSA1NS40IEw3MC41IDU1LjYgTDcwLjggNTUuOSIvPjxwYXRoIGQ9Ik04MC41IDY2LjAgTDgwLjggNjQuNSBMODEuMyA2My4wIEw4Mi4xIDYxLjcgTDgzLjAgNjAuNCBMODQuMSA1OS4zIEw4NS4zIDU4LjQgTDg2LjYgNTcuNyBMODguMSA1Ny4xIEw4OS41IDU2LjcgTDkxLjAgNTYuNSBMOTIuNSA1Ni41IEw5My45IDU2LjcgTDk1LjMgNTcuMSBMOTYuNiA1Ny42IEw5Ny44IDU4LjMgTDk4LjggNTkuMSBMOTkuNyA2MC4wIEwxMDAuNCA2MS4wIEwxMDAuOSA2Mi4wIEwxMDEuMyA2My4xIEwxMDEuNSA2NC4yIEwxMDEuNSA2NS4zIEwxMDEuNCA2Ni4zIEwxMDEuMSA2Ny4zIEwxMDAuNiA2OC4zIEwxMDAuMCA2OS4xIEw5OS4zIDY5LjkgTDk4LjYgNzAuNSBMOTcuNyA3MS4wIEw5Ni44IDcxLjQgTDk1LjggNzEuNyBMOTQuOSA3MS45IEw5My45IDcxLjkgTDkzLjAgNzEuOCBMOTIuMiA3MS42IEw5MS40IDcxLjMgTDkwLjcgNzAuOSBMOTAuMCA3MC40IEw4OS41IDY5LjggTDg5LjEgNjkuMyBMODguOCA2OC43IEw4OC41IDY4LjAgTDg4LjQgNjcuNCBMODguNCA2Ni44IEw4OC41IDY2LjIgTDg4LjcgNjUuNyBMODkuMCA2NS4yIEw4OS4zIDY0LjcgTDg5LjcgNjQuNCBMOTAuMSA2NC4xIEw5MC42IDYzLjkgTDkxLjAgNjMuNyBMOTEuNSA2My42IEw5MS45IDYzLjYgTDkyLjQgNjMuNyBMOTIuNyA2My44IEw5My4xIDYzLjkgTDkzLjQgNjQuMSBMOTMuNiA2NC4zIi8+PHBhdGggZD0iTTEwMS40IDc2LjAgTDEwMS42IDc0LjkgTDEwMi4wIDczLjkgTDEwMi41IDczLjAgTDEwMy4xIDcyLjIgTDEwMy45IDcxLjQgTDEwNC43IDcwLjggTDEwNS42IDcwLjMgTDEwNi42IDY5LjkgTDEwNy42IDY5LjYgTDEwOC42IDY5LjUgTDEwOS43IDY5LjUgTDExMC42IDY5LjYgTDExMS42IDY5LjkgTDExMi41IDcwLjIgTDExMy4zIDcwLjcgTDExNC4wIDcxLjIgTDExNC42IDcxLjkgTDExNS4xIDcyLjUgTDExNS41IDczLjIgTDExNS43IDc0LjAgTDExNS44IDc0LjcgTDExNS45IDc1LjUgTDExNS44IDc2LjIgTDExNS41IDc2LjkgTDExNS4yIDc3LjYgTDExNC44IDc4LjEgTDExNC40IDc4LjcgTDExMy44IDc5LjEgTDExMy4yIDc5LjUgTDExMi42IDc5LjcgTDExMi4wIDc5LjkgTDExMS4zIDgwLjAgTDExMC42IDgwLjAgTDExMC4wIDgwLjAgTDEwOS40IDc5LjggTDEwOC45IDc5LjYgTDEwOC40IDc5LjMgTDEwOC4wIDc5LjAgTDEwNy42IDc4LjYgTDEwNy4zIDc4LjIgTDEwNy4xIDc3LjggTDEwNi45IDc3LjQgTDEwNi45IDc3LjAgTDEwNi45IDc2LjUgTDEwNi45IDc2LjEgTDEwNy4xIDc1LjggTDEwNy4zIDc1LjQgTDEwNy41IDc1LjEgTDEwNy43IDc0LjkgTDEwOC4wIDc0LjcgTDEwOC4zIDc0LjUgTDEwOC43IDc0LjQgTDEwOS4wIDc0LjQgTDEwOS4zIDc0LjQgTDEwOS42IDc0LjQgTDEwOS44IDc0LjUgTDExMC4xIDc0LjYgTDExMC4zIDc0LjcgTDExMC40IDc0LjgiLz48L2c+PC9zdmc+"); --img-zuiun-edge: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNDAgMTAwMCI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJrIiB4MT0iMCIgeTE9IjAiIHgyPSIwIiB5Mj0iMSI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjRjZFM0ExIi8+PHN0b3Agb2Zmc2V0PSIuNiIgc3RvcC1jb2xvcj0iI0UwQkY1QSIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iI0M5QTI0QSIvPjwvbGluZWFyR3JhZGllbnQ+PGZpbHRlciBpZD0ibyI+PGZlTW9ycGhvbG9neSBvcGVyYXRvcj0iZGlsYXRlIiByYWRpdXM9IjEuMSIgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9ImQiLz48ZmVGbG9vZCBmbG9vZC1jb2xvcj0iI0E4ODQyMCIvPjxmZUNvbXBvc2l0ZSBpbjI9ImQiIG9wZXJhdG9yPSJpbiIgcmVzdWx0PSJlIi8+PGZlTWVyZ2U+PGZlTWVyZ2VOb2RlIGluPSJlIi8+PGZlTWVyZ2VOb2RlIGluPSJTb3VyY2VHcmFwaGljIi8+PC9mZU1lcmdlPjwvZmlsdGVyPjwvZGVmcz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLDQwKSI+PGcgb3BhY2l0eT0iLjgiPjxnIGZpbGw9InVybCgjaykiIGZpbHRlcj0idXJsKCNvKSI+PGNpcmNsZSBjeD0iMzAuMCIgY3k9Ijc2LjAiIHI9IjEyLjAiLz48Y2lyY2xlIGN4PSI0OC4wIiBjeT0iNjQuMCIgcj0iMTcuMCIvPjxjaXJjbGUgY3g9IjcwLjAiIGN5PSI1OC4wIiByPSIyMC4wIi8+PGNpcmNsZSBjeD0iOTMuMCIgY3k9IjY2LjAiIHI9IjE2LjAiLz48Y2lyY2xlIGN4PSIxMTAuMCIgY3k9Ijc2LjAiIHI9IjExLjAiLz48cmVjdCB4PSIzMC4wIiB5PSI3NC4wIiB3aWR0aD0iODAuMCIgaGVpZ2h0PSIxMi4wIiByeD0iNi4wIi8+PGNpcmNsZSBjeD0iMTIwLjAiIGN5PSI0NC44IiByPSI4LjgiLz48Y2lyY2xlIGN4PSIxMzMuNiIgY3k9IjM2LjAiIHI9IjEyLjAiLz48Y2lyY2xlIGN4PSIxNDkuNiIgY3k9IjMyLjAiIHI9IjE0LjQiLz48Y2lyY2xlIGN4PSIxNjUuNiIgY3k9IjM4LjQiIHI9IjExLjIiLz48Y2lyY2xlIGN4PSIxNzcuNiIgY3k9IjQ0LjgiIHI9IjguMCIvPjxyZWN0IHg9IjEyMC4wIiB5PSI0My4yIiB3aWR0aD0iNTcuNiIgaGVpZ2h0PSI5LjYiIHJ4PSI0LjgiLz48Y2lyY2xlIGN4PSIxNTAuMCIgY3k9IjEwMS45IiByPSI3LjIiLz48Y2lyY2xlIGN4PSIxNjEuMSIgY3k9Ijk1LjQiIHI9IjkuOCIvPjxjaXJjbGUgY3g9IjE3My40IiBjeT0iOTIuOCIgcj0iMTEuMSIvPjxjaXJjbGUgY3g9IjE4NS4xIiBjeT0iOTguMCIgcj0iOC41Ii8+PGNpcmNsZSBjeD0iMTk0LjIiIGN5PSIxMDEuOSIgcj0iNi41Ii8+PHJlY3QgeD0iMTUwLjAiIHk9IjEwMC42IiB3aWR0aD0iNDQuMiIgaGVpZ2h0PSI3LjgiIHJ4PSIzLjkiLz48L2c+PGcgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjQTg4NDIwIiBzdHJva2Utd2lkdGg9IjEuMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBvcGFjaXR5PSIuODUiPjxwYXRoIGQ9Ik0yMC42IDc2LjAgTDIwLjkgNzQuOSBMMjEuMyA3My44IEwyMS44IDcyLjcgTDIyLjUgNzEuOCBMMjMuMyA3MS4wIEwyNC4yIDcwLjMgTDI1LjIgNjkuNyBMMjYuMyA2OS4zIEwyNy40IDY5LjAgTDI4LjUgNjguOSBMMjkuNiA2OC45IEwzMC43IDY5LjAgTDMxLjcgNjkuMyBMMzIuNyA2OS43IEwzMy42IDcwLjIgTDM0LjMgNzAuOCBMMzUuMCA3MS41IEwzNS41IDcyLjIgTDM1LjkgNzMuMCBMMzYuMiA3My44IEwzNi40IDc0LjYgTDM2LjQgNzUuNCBMMzYuMyA3Ni4yIEwzNi4xIDc3LjAgTDM1LjcgNzcuNyBMMzUuMyA3OC4zIEwzNC44IDc4LjkgTDM0LjIgNzkuNCBMMzMuNSA3OS44IEwzMi44IDgwLjEgTDMyLjEgODAuMyBMMzEuNCA4MC40IEwzMC43IDgwLjQgTDMwLjAgODAuMyBMMjkuNCA4MC4yIEwyOC44IDc5LjkgTDI4LjIgNzkuNiBMMjcuOCA3OS4zIEwyNy40IDc4LjkgTDI3LjEgNzguNCBMMjYuOCA3OC4wIEwyNi43IDc3LjUgTDI2LjYgNzcuMSBMMjYuNiA3Ni42IEwyNi43IDc2LjIgTDI2LjggNzUuOCBMMjcuMCA3NS40IEwyNy4yIDc1LjEgTDI3LjUgNzQuOCBMMjcuOSA3NC42IEwyOC4yIDc0LjQgTDI4LjUgNzQuMyBMMjguOSA3NC4yIEwyOS4yIDc0LjIgTDI5LjUgNzQuMiBMMjkuOCA3NC4zIEwzMC4xIDc0LjQgTDMwLjMgNzQuNiBMMzAuNSA3NC43Ii8+PHBhdGggZD0iTTM0LjcgNjQuMCBMMzUuMSA2Mi40IEwzNS42IDYwLjggTDM2LjQgNTkuNCBMMzcuNCA1OC4xIEwzOC41IDU2LjkgTDM5LjggNTUuOSBMNDEuMiA1NS4xIEw0Mi44IDU0LjUgTDQ0LjMgNTQuMSBMNDUuOSA1My45IEw0Ny41IDU0LjAgTDQ5LjAgNTQuMiBMNTAuNSA1NC41IEw1MS44IDU1LjEgTDUzLjAgNTUuOCBMNTQuMSA1Ni42IEw1NS4xIDU3LjYgTDU1LjggNTguNiBMNTYuNCA1OS43IEw1Ni44IDYwLjkgTDU3LjAgNjIuMSBMNTcuMSA2My4yIEw1Ni45IDY0LjMgTDU2LjYgNjUuNCBMNTYuMSA2Ni40IEw1NS41IDY3LjMgTDU0LjcgNjguMSBMNTMuOSA2OC44IEw1My4wIDY5LjQgTDUyLjAgNjkuOCBMNTEuMCA3MC4xIEw1MC4wIDcwLjIgTDQ5LjAgNzAuMiBMNDguMCA3MC4xIEw0Ny4xIDY5LjkgTDQ2LjMgNjkuNiBMNDUuNSA2OS4yIEw0NC44IDY4LjcgTDQ0LjMgNjguMSBMNDMuOCA2Ny41IEw0My41IDY2LjggTDQzLjMgNjYuMiBMNDMuMiA2NS41IEw0My4yIDY0LjggTDQzLjMgNjQuMiBMNDMuNSA2My43IEw0My44IDYzLjEgTDQ0LjEgNjIuNyBMNDQuNSA2Mi4zIEw0NS4wIDYyLjAgTDQ1LjQgNjEuNyBMNDUuOSA2MS42IEw0Ni40IDYxLjUgTDQ2LjkgNjEuNSBMNDcuMyA2MS41IEw0Ny43IDYxLjYgTDQ4LjEgNjEuOCBMNDguNCA2Mi4wIEw0OC42IDYyLjIiLz48cGF0aCBkPSJNNTQuNCA1OC4wIEw1NC44IDU2LjEgTDU1LjQgNTQuMyBMNTYuMyA1Mi42IEw1Ny41IDUxLjAgTDU4LjggNDkuNyBMNjAuNCA0OC41IEw2Mi4xIDQ3LjYgTDYzLjggNDYuOSBMNjUuNyA0Ni40IEw2Ny41IDQ2LjIgTDY5LjQgNDYuMiBMNzEuMiA0Ni40IEw3Mi45IDQ2LjkgTDc0LjUgNDcuNSBMNzUuOSA0OC40IEw3Ny4yIDQ5LjMgTDc4LjMgNTAuNSBMNzkuMiA1MS43IEw3OS45IDUzLjAgTDgwLjQgNTQuMyBMODAuNiA1NS43IEw4MC42IDU3LjEgTDgwLjUgNTguNCBMODAuMSA1OS43IEw3OS41IDYwLjggTDc4LjggNjEuOSBMNzcuOSA2Mi44IEw3Ni45IDYzLjYgTDc1LjkgNjQuMyBMNzQuNyA2NC44IEw3My41IDY1LjEgTDcyLjQgNjUuMyBMNzEuMiA2NS4zIEw3MC4wIDY1LjIgTDY5LjAgNjUuMCBMNjguMCA2NC42IEw2Ny4xIDY0LjEgTDY2LjMgNjMuNSBMNjUuNiA2Mi44IEw2NS4xIDYyLjEgTDY0LjcgNjEuMyBMNjQuNCA2MC41IEw2NC4zIDU5LjggTDY0LjMgNTkuMCBMNjQuNCA1OC4zIEw2NC43IDU3LjYgTDY1LjAgNTcuMCBMNjUuNCA1Ni40IEw2NS45IDU2LjAgTDY2LjQgNTUuNiBMNjcuMCA1NS4zIEw2Ny42IDU1LjEgTDY4LjEgNTUuMCBMNjguNyA1NS4wIEw2OS4yIDU1LjEgTDY5LjcgNTUuMiBMNzAuMSA1NS40IEw3MC41IDU1LjYgTDcwLjggNTUuOSIvPjxwYXRoIGQ9Ik04MC41IDY2LjAgTDgwLjggNjQuNSBMODEuMyA2My4wIEw4Mi4xIDYxLjcgTDgzLjAgNjAuNCBMODQuMSA1OS4zIEw4NS4zIDU4LjQgTDg2LjYgNTcuNyBMODguMSA1Ny4xIEw4OS41IDU2LjcgTDkxLjAgNTYuNSBMOTIuNSA1Ni41IEw5My45IDU2LjcgTDk1LjMgNTcuMSBMOTYuNiA1Ny42IEw5Ny44IDU4LjMgTDk4LjggNTkuMSBMOTkuNyA2MC4wIEwxMDAuNCA2MS4wIEwxMDAuOSA2Mi4wIEwxMDEuMyA2My4xIEwxMDEuNSA2NC4yIEwxMDEuNSA2NS4zIEwxMDEuNCA2Ni4zIEwxMDEuMSA2Ny4zIEwxMDAuNiA2OC4zIEwxMDAuMCA2OS4xIEw5OS4zIDY5LjkgTDk4LjYgNzAuNSBMOTcuNyA3MS4wIEw5Ni44IDcxLjQgTDk1LjggNzEuNyBMOTQuOSA3MS45IEw5My45IDcxLjkgTDkzLjAgNzEuOCBMOTIuMiA3MS42IEw5MS40IDcxLjMgTDkwLjcgNzAuOSBMOTAuMCA3MC40IEw4OS41IDY5LjggTDg5LjEgNjkuMyBMODguOCA2OC43IEw4OC41IDY4LjAgTDg4LjQgNjcuNCBMODguNCA2Ni44IEw4OC41IDY2LjIgTDg4LjcgNjUuNyBMODkuMCA2NS4yIEw4OS4zIDY0LjcgTDg5LjcgNjQuNCBMOTAuMSA2NC4xIEw5MC42IDYzLjkgTDkxLjAgNjMuNyBMOTEuNSA2My42IEw5MS45IDYzLjYgTDkyLjQgNjMuNyBMOTIuNyA2My44IEw5My4xIDYzLjkgTDkzLjQgNjQuMSBMOTMuNiA2NC4zIi8+PHBhdGggZD0iTTEwMS40IDc2LjAgTDEwMS42IDc0LjkgTDEwMi4wIDczLjkgTDEwMi41IDczLjAgTDEwMy4xIDcyLjIgTDEwMy45IDcxLjQgTDEwNC43IDcwLjggTDEwNS42IDcwLjMgTDEwNi42IDY5LjkgTDEwNy42IDY5LjYgTDEwOC42IDY5LjUgTDEwOS43IDY5LjUgTDExMC42IDY5LjYgTDExMS42IDY5LjkgTDExMi41IDcwLjIgTDExMy4zIDcwLjcgTDExNC4wIDcxLjIgTDExNC42IDcxLjkgTDExNS4xIDcyLjUgTDExNS41IDczLjIgTDExNS43IDc0LjAgTDExNS44IDc0LjcgTDExNS45IDc1LjUgTDExNS44IDc2LjIgTDExNS41IDc2LjkgTDExNS4yIDc3LjYgTDExNC44IDc4LjEgTDExNC40IDc4LjcgTDExMy44IDc5LjEgTDExMy4yIDc5LjUgTDExMi42IDc5LjcgTDExMi4wIDc5LjkgTDExMS4zIDgwLjAgTDExMC42IDgwLjAgTDExMC4wIDgwLjAgTDEwOS40IDc5LjggTDEwOC45IDc5LjYgTDEwOC40IDc5LjMgTDEwOC4wIDc5LjAgTDEwNy42IDc4LjYgTDEwNy4zIDc4LjIgTDEwNy4xIDc3LjggTDEwNi45IDc3LjQgTDEwNi45IDc3LjAgTDEwNi45IDc2LjUgTDEwNi45IDc2LjEgTDEwNy4xIDc1LjggTDEwNy4zIDc1LjQgTDEwNy41IDc1LjEgTDEwNy43IDc0LjkgTDEwOC4wIDc0LjcgTDEwOC4zIDc0LjUgTDEwOC43IDc0LjQgTDEwOS4wIDc0LjQgTDEwOS4zIDc0LjQgTDEwOS42IDc0LjQgTDEwOS44IDc0LjUgTDExMC4xIDc0LjYgTDExMC4zIDc0LjcgTDExMC40IDc0LjgiLz48cGF0aCBkPSJNMTEzLjEgNDQuOCBMMTEzLjMgNDQuMCBMMTEzLjYgNDMuMiBMMTE0LjAgNDIuNCBMMTE0LjUgNDEuNyBMMTE1LjEgNDEuMSBMMTE1LjggNDAuNiBMMTE2LjUgNDAuMiBMMTE3LjMgMzkuOSBMMTE4LjEgMzkuNyBMMTE4LjkgMzkuNiBMMTE5LjcgMzkuNiBMMTIwLjUgMzkuNyBMMTIxLjMgMzkuOSBMMTIyLjAgNDAuMiBMMTIyLjYgNDAuNiBMMTIzLjIgNDEuMCBMMTIzLjcgNDEuNSBMMTI0LjEgNDIuMCBMMTI0LjQgNDIuNiBMMTI0LjYgNDMuMiBMMTI0LjcgNDMuOCBMMTI0LjcgNDQuNCBMMTI0LjYgNDUuMCBMMTI0LjQgNDUuNSBMMTI0LjIgNDYuMCBMMTIzLjkgNDYuNSBMMTIzLjUgNDYuOSBMMTIzLjEgNDcuMyBMMTIyLjYgNDcuNiBMMTIyLjEgNDcuOCBMMTIxLjYgNDcuOSBMMTIxLjAgNDguMCBMMTIwLjUgNDguMCBMMTIwLjAgNDguMCBMMTE5LjUgNDcuOSBMMTE5LjEgNDcuNyBMMTE4LjcgNDcuNSBMMTE4LjQgNDcuMiBMMTE4LjEgNDYuOSBMMTE3LjggNDYuNiBMMTE3LjcgNDYuMyBMMTE3LjYgNDUuOSBMMTE3LjUgNDUuNiBMMTE3LjUgNDUuMiBMMTE3LjYgNDQuOSBMMTE3LjcgNDQuNiBMMTE3LjggNDQuMyBMMTE4LjAgNDQuMSBMMTE4LjIgNDMuOSBMMTE4LjQgNDMuNyBMMTE4LjcgNDMuNiBMMTE4LjkgNDMuNSBMMTE5LjIgNDMuNSBMMTE5LjQgNDMuNSBMMTE5LjcgNDMuNSBMMTE5LjkgNDMuNiBMMTIwLjAgNDMuNyBMMTIwLjIgNDMuOCBMMTIwLjMgNDMuOSIvPjxwYXRoIGQ9Ik0xMjQuMiAzNi4wIEwxMjQuNSAzNC45IEwxMjQuOSAzMy44IEwxMjUuNCAzMi43IEwxMjYuMSAzMS44IEwxMjYuOSAzMS4wIEwxMjcuOCAzMC4zIEwxMjguOCAyOS43IEwxMjkuOSAyOS4zIEwxMzEuMCAyOS4wIEwxMzIuMSAyOC45IEwxMzMuMiAyOC45IEwxMzQuMyAyOS4wIEwxMzUuMyAyOS4zIEwxMzYuMyAyOS43IEwxMzcuMiAzMC4yIEwxMzcuOSAzMC44IEwxMzguNiAzMS41IEwxMzkuMSAzMi4yIEwxMzkuNSAzMy4wIEwxMzkuOCAzMy44IEwxNDAuMCAzNC42IEwxNDAuMCAzNS40IEwxMzkuOSAzNi4yIEwxMzkuNyAzNy4wIEwxMzkuMyAzNy43IEwxMzguOSAzOC4zIEwxMzguNCAzOC45IEwxMzcuOCAzOS40IEwxMzcuMSAzOS44IEwxMzYuNCA0MC4xIEwxMzUuNyA0MC4zIEwxMzUuMCA0MC40IEwxMzQuMyA0MC40IEwxMzMuNiA0MC4zIEwxMzMuMCA0MC4yIEwxMzIuNCAzOS45IEwxMzEuOCAzOS42IEwxMzEuNCAzOS4zIEwxMzEuMCAzOC45IEwxMzAuNyAzOC40IEwxMzAuNCAzOC4wIEwxMzAuMyAzNy41IEwxMzAuMiAzNy4xIEwxMzAuMiAzNi42IEwxMzAuMyAzNi4yIEwxMzAuNCAzNS44IEwxMzAuNiAzNS40IEwxMzAuOCAzNS4xIEwxMzEuMSAzNC44IEwxMzEuNSAzNC42IEwxMzEuOCAzNC40IEwxMzIuMSAzNC4zIEwxMzIuNSAzNC4yIEwxMzIuOCAzNC4yIEwxMzMuMSAzNC4yIEwxMzMuNCAzNC4zIEwxMzMuNyAzNC40IEwxMzMuOSAzNC42IEwxMzQuMSAzNC43Ii8+PHBhdGggZD0iTTEzOC40IDMyLjAgTDEzOC42IDMwLjYgTDEzOS4xIDI5LjMgTDEzOS44IDI4LjEgTDE0MC42IDI3LjAgTDE0MS42IDI2LjAgTDE0Mi43IDI1LjIgTDE0My45IDI0LjUgTDE0NS4yIDI0LjAgTDE0Ni41IDIzLjcgTDE0Ny44IDIzLjUgTDE0OS4xIDIzLjUgTDE1MC40IDIzLjcgTDE1MS43IDI0LjAgTDE1Mi44IDI0LjUgTDE1My45IDI1LjEgTDE1NC44IDI1LjggTDE1NS42IDI2LjYgTDE1Ni4yIDI3LjUgTDE1Ni43IDI4LjQgTDE1Ny4xIDI5LjQgTDE1Ny4yIDMwLjQgTDE1Ny4zIDMxLjMgTDE1Ny4xIDMyLjMgTDE1Ni45IDMzLjIgTDE1Ni41IDM0LjAgTDE1NS45IDM0LjggTDE1NS4zIDM1LjUgTDE1NC42IDM2LjEgTDE1My44IDM2LjUgTDE1My4wIDM2LjkgTDE1Mi4yIDM3LjEgTDE1MS4zIDM3LjMgTDE1MC41IDM3LjMgTDE0OS42IDM3LjIgTDE0OC45IDM3LjAgTDE0OC4xIDM2LjcgTDE0Ny41IDM2LjQgTDE0Ni45IDM1LjkgTDE0Ni40IDM1LjUgTDE0Ni4xIDM0LjkgTDE0NS44IDM0LjQgTDE0NS42IDMzLjggTDE0NS41IDMzLjMgTDE0NS41IDMyLjcgTDE0NS42IDMyLjIgTDE0NS44IDMxLjcgTDE0Ni4wIDMxLjMgTDE0Ni4zIDMwLjkgTDE0Ni42IDMwLjUgTDE0Ny4wIDMwLjMgTDE0Ny40IDMwLjEgTDE0Ny44IDI5LjkgTDE0OC4zIDI5LjkgTDE0OC43IDI5LjkgTDE0OS4wIDI5LjkgTDE0OS40IDMwLjAgTDE0OS43IDMwLjEgTDE0OS45IDMwLjMgTDE1MC4xIDMwLjUiLz48cGF0aCBkPSJNMTU2LjkgMzguNCBMMTU3LjEgMzcuMyBMMTU3LjQgMzYuMyBMMTU3LjkgMzUuNCBMMTU4LjYgMzQuNSBMMTU5LjQgMzMuNyBMMTYwLjIgMzMuMSBMMTYxLjEgMzIuNiBMMTYyLjEgMzIuMiBMMTYzLjIgMzEuOSBMMTY0LjIgMzEuOCBMMTY1LjIgMzEuOCBMMTY2LjMgMzEuOSBMMTY3LjIgMzIuMiBMMTY4LjEgMzIuNSBMMTY4LjkgMzMuMCBMMTY5LjYgMzMuNiBMMTcwLjMgMzQuMiBMMTcwLjggMzQuOSBMMTcxLjIgMzUuNiBMMTcxLjQgMzYuNCBMMTcxLjUgMzcuMSBMMTcxLjYgMzcuOSBMMTcxLjUgMzguNiBMMTcxLjIgMzkuMyBMMTcwLjkgNDAuMCBMMTcwLjUgNDAuNiBMMTcwLjAgNDEuMSBMMTY5LjUgNDEuNiBMMTY4LjkgNDEuOSBMMTY4LjIgNDIuMiBMMTY3LjYgNDIuNCBMMTY2LjkgNDIuNSBMMTY2LjMgNDIuNSBMMTY1LjYgNDIuNCBMMTY1LjAgNDIuMyBMMTY0LjUgNDIuMSBMMTY0LjAgNDEuOCBMMTYzLjUgNDEuNSBMMTYzLjEgNDEuMSBMMTYyLjggNDAuNyBMMTYyLjYgNDAuMyBMMTYyLjUgMzkuOCBMMTYyLjQgMzkuNCBMMTYyLjQgMzkuMCBMMTYyLjUgMzguNSBMMTYyLjYgMzguMiBMMTYyLjggMzcuOCBMMTYzLjAgMzcuNSBMMTYzLjMgMzcuMyBMMTYzLjYgMzcuMSBMMTYzLjkgMzYuOSBMMTY0LjIgMzYuOCBMMTY0LjYgMzYuNyBMMTY0LjkgMzYuNyBMMTY1LjIgMzYuOCBMMTY1LjQgMzYuOCBMMTY1LjcgMzYuOSBMMTY1LjkgMzcuMSBMMTY2LjAgMzcuMiIvPjxwYXRoIGQ9Ik0xNDQuNCAxMDEuOSBMMTQ0LjYgMTAxLjIgTDE0NC44IDEwMC42IEwxNDUuMSAxMDAuMCBMMTQ1LjUgOTkuNCBMMTQ2LjAgOTguOSBMMTQ2LjYgOTguNSBMMTQ3LjIgOTguMiBMMTQ3LjggOTcuOSBMMTQ4LjQgOTcuOCBMMTQ5LjEgOTcuNyBMMTQ5LjggOTcuNyBMMTUwLjQgOTcuOCBMMTUxLjAgOTcuOSBMMTUxLjYgOTguMiBMMTUyLjEgOTguNSBMMTUyLjYgOTguOCBMMTUzLjAgOTkuMiBMMTUzLjMgOTkuNiBMMTUzLjUgMTAwLjEgTDE1My43IDEwMC42IEwxNTMuOCAxMDEuMSBMMTUzLjggMTAxLjYgTDE1My43IDEwMi4wIEwxNTMuNiAxMDIuNSBMMTUzLjQgMTAyLjkgTDE1My4xIDEwMy4zIEwxNTIuOCAxMDMuNiBMMTUyLjUgMTAzLjkgTDE1Mi4xIDEwNC4yIEwxNTEuNyAxMDQuMyBMMTUxLjMgMTA0LjUgTDE1MC44IDEwNC41IEwxNTAuNCAxMDQuNSBMMTUwLjAgMTA0LjUgTDE0OS42IDEwNC40IEwxNDkuMyAxMDQuMiBMMTQ5LjAgMTA0LjEgTDE0OC43IDEwMy45IEwxNDguNCAxMDMuNiBMMTQ4LjIgMTAzLjQgTDE0OC4xIDEwMy4xIEwxNDguMCAxMDIuOCBMMTQ4LjAgMTAyLjUgTDE0OC4wIDEwMi4zIEwxNDguMCAxMDIuMCBMMTQ4LjEgMTAxLjggTDE0OC4yIDEwMS41IEwxNDguNCAxMDEuMyBMMTQ4LjUgMTAxLjIgTDE0OC43IDEwMS4wIEwxNDguOSAxMDAuOSBMMTQ5LjEgMTAwLjkgTDE0OS4zIDEwMC44IEwxNDkuNSAxMDAuOCBMMTQ5LjcgMTAwLjkgTDE0OS45IDEwMC45IEwxNTAuMCAxMDEuMCBMMTUwLjIgMTAxLjEgTDE1MC4zIDEwMS4xIi8+PHBhdGggZD0iTTE1My40IDk1LjQgTDE1My42IDk0LjUgTDE1My45IDkzLjYgTDE1NC40IDkyLjggTDE1NS4wIDkyLjAgTDE1NS42IDkxLjMgTDE1Ni40IDkwLjggTDE1Ny4yIDkwLjMgTDE1OC4wIDkwLjAgTDE1OC45IDg5LjcgTDE1OS44IDg5LjYgTDE2MC43IDg5LjYgTDE2MS42IDg5LjggTDE2Mi41IDkwLjAgTDE2My4yIDkwLjMgTDE2My45IDkwLjcgTDE2NC42IDkxLjIgTDE2NS4xIDkxLjcgTDE2NS41IDkyLjMgTDE2NS45IDkzLjAgTDE2Ni4xIDkzLjYgTDE2Ni4yIDk0LjMgTDE2Ni4yIDk1LjAgTDE2Ni4yIDk1LjYgTDE2Ni4wIDk2LjIgTDE2NS43IDk2LjggTDE2NS4zIDk3LjMgTDE2NC45IDk3LjggTDE2NC40IDk4LjIgTDE2My45IDk4LjUgTDE2My40IDk4LjcgTDE2Mi44IDk4LjkgTDE2Mi4yIDk5LjAgTDE2MS42IDk5LjAgTDE2MS4xIDk4LjkgTDE2MC41IDk4LjggTDE2MC4xIDk4LjYgTDE1OS42IDk4LjQgTDE1OS4yIDk4LjEgTDE1OC45IDk3LjcgTDE1OC43IDk3LjQgTDE1OC41IDk3LjAgTDE1OC4zIDk2LjYgTDE1OC4zIDk2LjMgTDE1OC4zIDk1LjkgTDE1OC4zIDk1LjUgTDE1OC41IDk1LjIgTDE1OC42IDk0LjkgTDE1OC44IDk0LjYgTDE1OS4wIDk0LjQgTDE1OS4zIDk0LjIgTDE1OS42IDk0LjEgTDE1OS45IDk0LjAgTDE2MC4xIDk0LjAgTDE2MC40IDkzLjkgTDE2MC43IDk0LjAgTDE2MC45IDk0LjAgTDE2MS4xIDk0LjEgTDE2MS4zIDk0LjIgTDE2MS40IDk0LjQiLz48cGF0aCBkPSJNMTY0LjggOTIuOCBMMTY1LjAgOTEuNyBMMTY1LjMgOTAuNyBMMTY1LjkgODkuOCBMMTY2LjUgODkuMCBMMTY3LjIgODguMiBMMTY4LjEgODcuNiBMMTY5LjAgODcuMCBMMTcwLjAgODYuNyBMMTcxLjAgODYuNCBMMTcyLjAgODYuMyBMMTczLjEgODYuMyBMMTc0LjAgODYuNCBMMTc1LjAgODYuNiBMMTc1LjkgODcuMCBMMTc2LjcgODcuNSBMMTc3LjQgODguMCBMMTc4LjAgODguNiBMMTc4LjUgODkuMyBMMTc4LjkgOTAuMCBMMTc5LjEgOTAuOCBMMTc5LjMgOTEuNSBMMTc5LjMgOTIuMyBMMTc5LjIgOTMuMCBMMTc5LjAgOTMuNyBMMTc4LjcgOTQuNCBMMTc4LjMgOTUuMCBMMTc3LjggOTUuNSBMMTc3LjIgOTUuOSBMMTc2LjYgOTYuMyBMMTc2LjAgOTYuNiBMMTc1LjQgOTYuNyBMMTc0LjcgOTYuOCBMMTc0LjEgOTYuOSBMMTczLjQgOTYuOCBMMTcyLjggOTYuNiBMMTcyLjMgOTYuNCBMMTcxLjggOTYuMiBMMTcxLjMgOTUuOCBMMTcxLjAgOTUuNSBMMTcwLjcgOTUuMSBMMTcwLjUgOTQuNiBMMTcwLjMgOTQuMiBMMTcwLjMgOTMuOCBMMTcwLjMgOTMuMyBMMTcwLjMgOTIuOSBMMTcwLjUgOTIuNiBMMTcwLjYgOTIuMiBMMTcwLjkgOTEuOSBMMTcxLjEgOTEuNyBMMTcxLjQgOTEuNSBMMTcxLjcgOTEuMyBMMTcyLjEgOTEuMiBMMTcyLjQgOTEuMiBMMTcyLjcgOTEuMiBMMTczLjAgOTEuMiBMMTczLjIgOTEuMyBMMTczLjUgOTEuNCBMMTczLjcgOTEuNSBMMTczLjggOTEuNiIvPjxwYXRoIGQ9Ik0xNzguNSA5OC4wIEwxNzguNyA5Ny4yIEwxNzguOSA5Ni40IEwxNzkuMyA5NS43IEwxNzkuOCA5NS4xIEwxODAuNCA5NC41IEwxODEuMCA5NC4wIEwxODEuNyA5My42IEwxODIuNSA5My4zIEwxODMuMyA5My4xIEwxODQuMSA5My4wIEwxODQuOCA5My4wIEwxODUuNiA5My4xIEwxODYuMyA5My4zIEwxODcuMCA5My42IEwxODcuNiA5My45IEwxODguMiA5NC4zIEwxODguNiA5NC44IEwxODkuMCA5NS4zIEwxODkuMyA5NS45IEwxODkuNSA5Ni41IEwxODkuNiA5Ny4wIEwxODkuNiA5Ny42IEwxODkuNSA5OC4yIEwxODkuNCA5OC43IEwxODkuMSA5OS4yIEwxODguOCA5OS42IEwxODguNCAxMDAuMCBMMTg4LjAgMTAwLjQgTDE4Ny42IDEwMC43IEwxODcuMSAxMDAuOSBMMTg2LjYgMTAxLjAgTDE4Ni4xIDEwMS4xIEwxODUuNiAxMDEuMSBMMTg1LjEgMTAxLjEgTDE4NC43IDEwMC45IEwxODQuMiAxMDAuOCBMMTgzLjkgMTAwLjYgTDE4My41IDEwMC4zIEwxODMuMiAxMDAuMCBMMTgzLjAgOTkuNyBMMTgyLjkgOTkuNCBMMTgyLjcgOTkuMSBMMTgyLjcgOTguNyBMMTgyLjcgOTguNCBMMTgyLjcgOTguMSBMMTgyLjggOTcuOCBMMTgzLjAgOTcuNiBMMTgzLjIgOTcuMyBMMTgzLjQgOTcuMSBMMTgzLjYgOTcuMCBMMTgzLjggOTYuOSBMMTg0LjEgOTYuOCBMMTg0LjMgOTYuNyBMMTg0LjUgOTYuNyBMMTg0LjggOTYuOCBMMTg1LjAgOTYuOCBMMTg1LjEgOTYuOSBMMTg1LjMgOTcuMCBMMTg1LjQgOTcuMSIvPjwvZz48L2c+PC9nPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDcwLDU2MCkgc2NhbGUoLjcpIj48ZyBvcGFjaXR5PSIuOCI+PGcgZmlsbD0idXJsKCNrKSIgZmlsdGVyPSJ1cmwoI28pIj48Y2lyY2xlIGN4PSIzMC4wIiBjeT0iNzYuMCIgcj0iMTIuMCIvPjxjaXJjbGUgY3g9IjQ4LjAiIGN5PSI2NC4wIiByPSIxNy4wIi8+PGNpcmNsZSBjeD0iNzAuMCIgY3k9IjU4LjAiIHI9IjIwLjAiLz48Y2lyY2xlIGN4PSI5My4wIiBjeT0iNjYuMCIgcj0iMTYuMCIvPjxjaXJjbGUgY3g9IjExMC4wIiBjeT0iNzYuMCIgcj0iMTEuMCIvPjxyZWN0IHg9IjMwLjAiIHk9Ijc0LjAiIHdpZHRoPSI4MC4wIiBoZWlnaHQ9IjEyLjAiIHJ4PSI2LjAiLz48Y2lyY2xlIGN4PSIxMjAuMCIgY3k9IjQ0LjgiIHI9IjguOCIvPjxjaXJjbGUgY3g9IjEzMy42IiBjeT0iMzYuMCIgcj0iMTIuMCIvPjxjaXJjbGUgY3g9IjE0OS42IiBjeT0iMzIuMCIgcj0iMTQuNCIvPjxjaXJjbGUgY3g9IjE2NS42IiBjeT0iMzguNCIgcj0iMTEuMiIvPjxjaXJjbGUgY3g9IjE3Ny42IiBjeT0iNDQuOCIgcj0iOC4wIi8+PHJlY3QgeD0iMTIwLjAiIHk9IjQzLjIiIHdpZHRoPSI1Ny42IiBoZWlnaHQ9IjkuNiIgcng9IjQuOCIvPjxjaXJjbGUgY3g9IjE1MC4wIiBjeT0iMTAxLjkiIHI9IjcuMiIvPjxjaXJjbGUgY3g9IjE2MS4xIiBjeT0iOTUuNCIgcj0iOS44Ii8+PGNpcmNsZSBjeD0iMTczLjQiIGN5PSI5Mi44IiByPSIxMS4xIi8+PGNpcmNsZSBjeD0iMTg1LjEiIGN5PSI5OC4wIiByPSI4LjUiLz48Y2lyY2xlIGN4PSIxOTQuMiIgY3k9IjEwMS45IiByPSI2LjUiLz48cmVjdCB4PSIxNTAuMCIgeT0iMTAwLjYiIHdpZHRoPSI0NC4yIiBoZWlnaHQ9IjcuOCIgcng9IjMuOSIvPjwvZz48ZyBmaWxsPSJub25lIiBzdHJva2U9IiNBODg0MjAiIHN0cm9rZS13aWR0aD0iMS4yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIG9wYWNpdHk9Ii44NSI+PHBhdGggZD0iTTIwLjYgNzYuMCBMMjAuOSA3NC45IEwyMS4zIDczLjggTDIxLjggNzIuNyBMMjIuNSA3MS44IEwyMy4zIDcxLjAgTDI0LjIgNzAuMyBMMjUuMiA2OS43IEwyNi4zIDY5LjMgTDI3LjQgNjkuMCBMMjguNSA2OC45IEwyOS42IDY4LjkgTDMwLjcgNjkuMCBMMzEuNyA2OS4zIEwzMi43IDY5LjcgTDMzLjYgNzAuMiBMMzQuMyA3MC44IEwzNS4wIDcxLjUgTDM1LjUgNzIuMiBMMzUuOSA3My4wIEwzNi4yIDczLjggTDM2LjQgNzQuNiBMMzYuNCA3NS40IEwzNi4zIDc2LjIgTDM2LjEgNzcuMCBMMzUuNyA3Ny43IEwzNS4zIDc4LjMgTDM0LjggNzguOSBMMzQuMiA3OS40IEwzMy41IDc5LjggTDMyLjggODAuMSBMMzIuMSA4MC4zIEwzMS40IDgwLjQgTDMwLjcgODAuNCBMMzAuMCA4MC4zIEwyOS40IDgwLjIgTDI4LjggNzkuOSBMMjguMiA3OS42IEwyNy44IDc5LjMgTDI3LjQgNzguOSBMMjcuMSA3OC40IEwyNi44IDc4LjAgTDI2LjcgNzcuNSBMMjYuNiA3Ny4xIEwyNi42IDc2LjYgTDI2LjcgNzYuMiBMMjYuOCA3NS44IEwyNy4wIDc1LjQgTDI3LjIgNzUuMSBMMjcuNSA3NC44IEwyNy45IDc0LjYgTDI4LjIgNzQuNCBMMjguNSA3NC4zIEwyOC45IDc0LjIgTDI5LjIgNzQuMiBMMjkuNSA3NC4yIEwyOS44IDc0LjMgTDMwLjEgNzQuNCBMMzAuMyA3NC42IEwzMC41IDc0LjciLz48cGF0aCBkPSJNMzQuNyA2NC4wIEwzNS4xIDYyLjQgTDM1LjYgNjAuOCBMMzYuNCA1OS40IEwzNy40IDU4LjEgTDM4LjUgNTYuOSBMMzkuOCA1NS45IEw0MS4yIDU1LjEgTDQyLjggNTQuNSBMNDQuMyA1NC4xIEw0NS45IDUzLjkgTDQ3LjUgNTQuMCBMNDkuMCA1NC4yIEw1MC41IDU0LjUgTDUxLjggNTUuMSBMNTMuMCA1NS44IEw1NC4xIDU2LjYgTDU1LjEgNTcuNiBMNTUuOCA1OC42IEw1Ni40IDU5LjcgTDU2LjggNjAuOSBMNTcuMCA2Mi4xIEw1Ny4xIDYzLjIgTDU2LjkgNjQuMyBMNTYuNiA2NS40IEw1Ni4xIDY2LjQgTDU1LjUgNjcuMyBMNTQuNyA2OC4xIEw1My45IDY4LjggTDUzLjAgNjkuNCBMNTIuMCA2OS44IEw1MS4wIDcwLjEgTDUwLjAgNzAuMiBMNDkuMCA3MC4yIEw0OC4wIDcwLjEgTDQ3LjEgNjkuOSBMNDYuMyA2OS42IEw0NS41IDY5LjIgTDQ0LjggNjguNyBMNDQuMyA2OC4xIEw0My44IDY3LjUgTDQzLjUgNjYuOCBMNDMuMyA2Ni4yIEw0My4yIDY1LjUgTDQzLjIgNjQuOCBMNDMuMyA2NC4yIEw0My41IDYzLjcgTDQzLjggNjMuMSBMNDQuMSA2Mi43IEw0NC41IDYyLjMgTDQ1LjAgNjIuMCBMNDUuNCA2MS43IEw0NS45IDYxLjYgTDQ2LjQgNjEuNSBMNDYuOSA2MS41IEw0Ny4zIDYxLjUgTDQ3LjcgNjEuNiBMNDguMSA2MS44IEw0OC40IDYyLjAgTDQ4LjYgNjIuMiIvPjxwYXRoIGQ9Ik01NC40IDU4LjAgTDU0LjggNTYuMSBMNTUuNCA1NC4zIEw1Ni4zIDUyLjYgTDU3LjUgNTEuMCBMNTguOCA0OS43IEw2MC40IDQ4LjUgTDYyLjEgNDcuNiBMNjMuOCA0Ni45IEw2NS43IDQ2LjQgTDY3LjUgNDYuMiBMNjkuNCA0Ni4yIEw3MS4yIDQ2LjQgTDcyLjkgNDYuOSBMNzQuNSA0Ny41IEw3NS45IDQ4LjQgTDc3LjIgNDkuMyBMNzguMyA1MC41IEw3OS4yIDUxLjcgTDc5LjkgNTMuMCBMODAuNCA1NC4zIEw4MC42IDU1LjcgTDgwLjYgNTcuMSBMODAuNSA1OC40IEw4MC4xIDU5LjcgTDc5LjUgNjAuOCBMNzguOCA2MS45IEw3Ny45IDYyLjggTDc2LjkgNjMuNiBMNzUuOSA2NC4zIEw3NC43IDY0LjggTDczLjUgNjUuMSBMNzIuNCA2NS4zIEw3MS4yIDY1LjMgTDcwLjAgNjUuMiBMNjkuMCA2NS4wIEw2OC4wIDY0LjYgTDY3LjEgNjQuMSBMNjYuMyA2My41IEw2NS42IDYyLjggTDY1LjEgNjIuMSBMNjQuNyA2MS4zIEw2NC40IDYwLjUgTDY0LjMgNTkuOCBMNjQuMyA1OS4wIEw2NC40IDU4LjMgTDY0LjcgNTcuNiBMNjUuMCA1Ny4wIEw2NS40IDU2LjQgTDY1LjkgNTYuMCBMNjYuNCA1NS42IEw2Ny4wIDU1LjMgTDY3LjYgNTUuMSBMNjguMSA1NS4wIEw2OC43IDU1LjAgTDY5LjIgNTUuMSBMNjkuNyA1NS4yIEw3MC4xIDU1LjQgTDcwLjUgNTUuNiBMNzAuOCA1NS45Ii8+PHBhdGggZD0iTTgwLjUgNjYuMCBMODAuOCA2NC41IEw4MS4zIDYzLjAgTDgyLjEgNjEuNyBMODMuMCA2MC40IEw4NC4xIDU5LjMgTDg1LjMgNTguNCBMODYuNiA1Ny43IEw4OC4xIDU3LjEgTDg5LjUgNTYuNyBMOTEuMCA1Ni41IEw5Mi41IDU2LjUgTDkzLjkgNTYuNyBMOTUuMyA1Ny4xIEw5Ni42IDU3LjYgTDk3LjggNTguMyBMOTguOCA1OS4xIEw5OS43IDYwLjAgTDEwMC40IDYxLjAgTDEwMC45IDYyLjAgTDEwMS4zIDYzLjEgTDEwMS41IDY0LjIgTDEwMS41IDY1LjMgTDEwMS40IDY2LjMgTDEwMS4xIDY3LjMgTDEwMC42IDY4LjMgTDEwMC4wIDY5LjEgTDk5LjMgNjkuOSBMOTguNiA3MC41IEw5Ny43IDcxLjAgTDk2LjggNzEuNCBMOTUuOCA3MS43IEw5NC45IDcxLjkgTDkzLjkgNzEuOSBMOTMuMCA3MS44IEw5Mi4yIDcxLjYgTDkxLjQgNzEuMyBMOTAuNyA3MC45IEw5MC4wIDcwLjQgTDg5LjUgNjkuOCBMODkuMSA2OS4zIEw4OC44IDY4LjcgTDg4LjUgNjguMCBMODguNCA2Ny40IEw4OC40IDY2LjggTDg4LjUgNjYuMiBMODguNyA2NS43IEw4OS4wIDY1LjIgTDg5LjMgNjQuNyBMODkuNyA2NC40IEw5MC4xIDY0LjEgTDkwLjYgNjMuOSBMOTEuMCA2My43IEw5MS41IDYzLjYgTDkxLjkgNjMuNiBMOTIuNCA2My43IEw5Mi43IDYzLjggTDkzLjEgNjMuOSBMOTMuNCA2NC4xIEw5My42IDY0LjMiLz48cGF0aCBkPSJNMTAxLjQgNzYuMCBMMTAxLjYgNzQuOSBMMTAyLjAgNzMuOSBMMTAyLjUgNzMuMCBMMTAzLjEgNzIuMiBMMTAzLjkgNzEuNCBMMTA0LjcgNzAuOCBMMTA1LjYgNzAuMyBMMTA2LjYgNjkuOSBMMTA3LjYgNjkuNiBMMTA4LjYgNjkuNSBMMTA5LjcgNjkuNSBMMTEwLjYgNjkuNiBMMTExLjYgNjkuOSBMMTEyLjUgNzAuMiBMMTEzLjMgNzAuNyBMMTE0LjAgNzEuMiBMMTE0LjYgNzEuOSBMMTE1LjEgNzIuNSBMMTE1LjUgNzMuMiBMMTE1LjcgNzQuMCBMMTE1LjggNzQuNyBMMTE1LjkgNzUuNSBMMTE1LjggNzYuMiBMMTE1LjUgNzYuOSBMMTE1LjIgNzcuNiBMMTE0LjggNzguMSBMMTE0LjQgNzguNyBMMTEzLjggNzkuMSBMMTEzLjIgNzkuNSBMMTEyLjYgNzkuNyBMMTEyLjAgNzkuOSBMMTExLjMgODAuMCBMMTEwLjYgODAuMCBMMTEwLjAgODAuMCBMMTA5LjQgNzkuOCBMMTA4LjkgNzkuNiBMMTA4LjQgNzkuMyBMMTA4LjAgNzkuMCBMMTA3LjYgNzguNiBMMTA3LjMgNzguMiBMMTA3LjEgNzcuOCBMMTA2LjkgNzcuNCBMMTA2LjkgNzcuMCBMMTA2LjkgNzYuNSBMMTA2LjkgNzYuMSBMMTA3LjEgNzUuOCBMMTA3LjMgNzUuNCBMMTA3LjUgNzUuMSBMMTA3LjcgNzQuOSBMMTA4LjAgNzQuNyBMMTA4LjMgNzQuNSBMMTA4LjcgNzQuNCBMMTA5LjAgNzQuNCBMMTA5LjMgNzQuNCBMMTA5LjYgNzQuNCBMMTA5LjggNzQuNSBMMTEwLjEgNzQuNiBMMTEwLjMgNzQuNyBMMTEwLjQgNzQuOCIvPjxwYXRoIGQ9Ik0xMTMuMSA0NC44IEwxMTMuMyA0NC4wIEwxMTMuNiA0My4yIEwxMTQuMCA0Mi40IEwxMTQuNSA0MS43IEwxMTUuMSA0MS4xIEwxMTUuOCA0MC42IEwxMTYuNSA0MC4yIEwxMTcuMyAzOS45IEwxMTguMSAzOS43IEwxMTguOSAzOS42IEwxMTkuNyAzOS42IEwxMjAuNSAzOS43IEwxMjEuMyAzOS45IEwxMjIuMCA0MC4yIEwxMjIuNiA0MC42IEwxMjMuMiA0MS4wIEwxMjMuNyA0MS41IEwxMjQuMSA0Mi4wIEwxMjQuNCA0Mi42IEwxMjQuNiA0My4yIEwxMjQuNyA0My44IEwxMjQuNyA0NC40IEwxMjQuNiA0NS4wIEwxMjQuNCA0NS41IEwxMjQuMiA0Ni4wIEwxMjMuOSA0Ni41IEwxMjMuNSA0Ni45IEwxMjMuMSA0Ny4zIEwxMjIuNiA0Ny42IEwxMjIuMSA0Ny44IEwxMjEuNiA0Ny45IEwxMjEuMCA0OC4wIEwxMjAuNSA0OC4wIEwxMjAuMCA0OC4wIEwxMTkuNSA0Ny45IEwxMTkuMSA0Ny43IEwxMTguNyA0Ny41IEwxMTguNCA0Ny4yIEwxMTguMSA0Ni45IEwxMTcuOCA0Ni42IEwxMTcuNyA0Ni4zIEwxMTcuNiA0NS45IEwxMTcuNSA0NS42IEwxMTcuNSA0NS4yIEwxMTcuNiA0NC45IEwxMTcuNyA0NC42IEwxMTcuOCA0NC4zIEwxMTguMCA0NC4xIEwxMTguMiA0My45IEwxMTguNCA0My43IEwxMTguNyA0My42IEwxMTguOSA0My41IEwxMTkuMiA0My41IEwxMTkuNCA0My41IEwxMTkuNyA0My41IEwxMTkuOSA0My42IEwxMjAuMCA0My43IEwxMjAuMiA0My44IEwxMjAuMyA0My45Ii8+PHBhdGggZD0iTTEyNC4yIDM2LjAgTDEyNC41IDM0LjkgTDEyNC45IDMzLjggTDEyNS40IDMyLjcgTDEyNi4xIDMxLjggTDEyNi45IDMxLjAgTDEyNy44IDMwLjMgTDEyOC44IDI5LjcgTDEyOS45IDI5LjMgTDEzMS4wIDI5LjAgTDEzMi4xIDI4LjkgTDEzMy4yIDI4LjkgTDEzNC4zIDI5LjAgTDEzNS4zIDI5LjMgTDEzNi4zIDI5LjcgTDEzNy4yIDMwLjIgTDEzNy45IDMwLjggTDEzOC42IDMxLjUgTDEzOS4xIDMyLjIgTDEzOS41IDMzLjAgTDEzOS44IDMzLjggTDE0MC4wIDM0LjYgTDE0MC4wIDM1LjQgTDEzOS45IDM2LjIgTDEzOS43IDM3LjAgTDEzOS4zIDM3LjcgTDEzOC45IDM4LjMgTDEzOC40IDM4LjkgTDEzNy44IDM5LjQgTDEzNy4xIDM5LjggTDEzNi40IDQwLjEgTDEzNS43IDQwLjMgTDEzNS4wIDQwLjQgTDEzNC4zIDQwLjQgTDEzMy42IDQwLjMgTDEzMy4wIDQwLjIgTDEzMi40IDM5LjkgTDEzMS44IDM5LjYgTDEzMS40IDM5LjMgTDEzMS4wIDM4LjkgTDEzMC43IDM4LjQgTDEzMC40IDM4LjAgTDEzMC4zIDM3LjUgTDEzMC4yIDM3LjEgTDEzMC4yIDM2LjYgTDEzMC4zIDM2LjIgTDEzMC40IDM1LjggTDEzMC42IDM1LjQgTDEzMC44IDM1LjEgTDEzMS4xIDM0LjggTDEzMS41IDM0LjYgTDEzMS44IDM0LjQgTDEzMi4xIDM0LjMgTDEzMi41IDM0LjIgTDEzMi44IDM0LjIgTDEzMy4xIDM0LjIgTDEzMy40IDM0LjMgTDEzMy43IDM0LjQgTDEzMy45IDM0LjYgTDEzNC4xIDM0LjciLz48cGF0aCBkPSJNMTM4LjQgMzIuMCBMMTM4LjYgMzAuNiBMMTM5LjEgMjkuMyBMMTM5LjggMjguMSBMMTQwLjYgMjcuMCBMMTQxLjYgMjYuMCBMMTQyLjcgMjUuMiBMMTQzLjkgMjQuNSBMMTQ1LjIgMjQuMCBMMTQ2LjUgMjMuNyBMMTQ3LjggMjMuNSBMMTQ5LjEgMjMuNSBMMTUwLjQgMjMuNyBMMTUxLjcgMjQuMCBMMTUyLjggMjQuNSBMMTUzLjkgMjUuMSBMMTU0LjggMjUuOCBMMTU1LjYgMjYuNiBMMTU2LjIgMjcuNSBMMTU2LjcgMjguNCBMMTU3LjEgMjkuNCBMMTU3LjIgMzAuNCBMMTU3LjMgMzEuMyBMMTU3LjEgMzIuMyBMMTU2LjkgMzMuMiBMMTU2LjUgMzQuMCBMMTU1LjkgMzQuOCBMMTU1LjMgMzUuNSBMMTU0LjYgMzYuMSBMMTUzLjggMzYuNSBMMTUzLjAgMzYuOSBMMTUyLjIgMzcuMSBMMTUxLjMgMzcuMyBMMTUwLjUgMzcuMyBMMTQ5LjYgMzcuMiBMMTQ4LjkgMzcuMCBMMTQ4LjEgMzYuNyBMMTQ3LjUgMzYuNCBMMTQ2LjkgMzUuOSBMMTQ2LjQgMzUuNSBMMTQ2LjEgMzQuOSBMMTQ1LjggMzQuNCBMMTQ1LjYgMzMuOCBMMTQ1LjUgMzMuMyBMMTQ1LjUgMzIuNyBMMTQ1LjYgMzIuMiBMMTQ1LjggMzEuNyBMMTQ2LjAgMzEuMyBMMTQ2LjMgMzAuOSBMMTQ2LjYgMzAuNSBMMTQ3LjAgMzAuMyBMMTQ3LjQgMzAuMSBMMTQ3LjggMjkuOSBMMTQ4LjMgMjkuOSBMMTQ4LjcgMjkuOSBMMTQ5LjAgMjkuOSBMMTQ5LjQgMzAuMCBMMTQ5LjcgMzAuMSBMMTQ5LjkgMzAuMyBMMTUwLjEgMzAuNSIvPjxwYXRoIGQ9Ik0xNTYuOSAzOC40IEwxNTcuMSAzNy4zIEwxNTcuNCAzNi4zIEwxNTcuOSAzNS40IEwxNTguNiAzNC41IEwxNTkuNCAzMy43IEwxNjAuMiAzMy4xIEwxNjEuMSAzMi42IEwxNjIuMSAzMi4yIEwxNjMuMiAzMS45IEwxNjQuMiAzMS44IEwxNjUuMiAzMS44IEwxNjYuMyAzMS45IEwxNjcuMiAzMi4yIEwxNjguMSAzMi41IEwxNjguOSAzMy4wIEwxNjkuNiAzMy42IEwxNzAuMyAzNC4yIEwxNzAuOCAzNC45IEwxNzEuMiAzNS42IEwxNzEuNCAzNi40IEwxNzEuNSAzNy4xIEwxNzEuNiAzNy45IEwxNzEuNSAzOC42IEwxNzEuMiAzOS4zIEwxNzAuOSA0MC4wIEwxNzAuNSA0MC42IEwxNzAuMCA0MS4xIEwxNjkuNSA0MS42IEwxNjguOSA0MS45IEwxNjguMiA0Mi4yIEwxNjcuNiA0Mi40IEwxNjYuOSA0Mi41IEwxNjYuMyA0Mi41IEwxNjUuNiA0Mi40IEwxNjUuMCA0Mi4zIEwxNjQuNSA0Mi4xIEwxNjQuMCA0MS44IEwxNjMuNSA0MS41IEwxNjMuMSA0MS4xIEwxNjIuOCA0MC43IEwxNjIuNiA0MC4zIEwxNjIuNSAzOS44IEwxNjIuNCAzOS40IEwxNjIuNCAzOS4wIEwxNjIuNSAzOC41IEwxNjIuNiAzOC4yIEwxNjIuOCAzNy44IEwxNjMuMCAzNy41IEwxNjMuMyAzNy4zIEwxNjMuNiAzNy4xIEwxNjMuOSAzNi45IEwxNjQuMiAzNi44IEwxNjQuNiAzNi43IEwxNjQuOSAzNi43IEwxNjUuMiAzNi44IEwxNjUuNCAzNi44IEwxNjUuNyAzNi45IEwxNjUuOSAzNy4xIEwxNjYuMCAzNy4yIi8+PHBhdGggZD0iTTE0NC40IDEwMS45IEwxNDQuNiAxMDEuMiBMMTQ0LjggMTAwLjYgTDE0NS4xIDEwMC4wIEwxNDUuNSA5OS40IEwxNDYuMCA5OC45IEwxNDYuNiA5OC41IEwxNDcuMiA5OC4yIEwxNDcuOCA5Ny45IEwxNDguNCA5Ny44IEwxNDkuMSA5Ny43IEwxNDkuOCA5Ny43IEwxNTAuNCA5Ny44IEwxNTEuMCA5Ny45IEwxNTEuNiA5OC4yIEwxNTIuMSA5OC41IEwxNTIuNiA5OC44IEwxNTMuMCA5OS4yIEwxNTMuMyA5OS42IEwxNTMuNSAxMDAuMSBMMTUzLjcgMTAwLjYgTDE1My44IDEwMS4xIEwxNTMuOCAxMDEuNiBMMTUzLjcgMTAyLjAgTDE1My42IDEwMi41IEwxNTMuNCAxMDIuOSBMMTUzLjEgMTAzLjMgTDE1Mi44IDEwMy42IEwxNTIuNSAxMDMuOSBMMTUyLjEgMTA0LjIgTDE1MS43IDEwNC4zIEwxNTEuMyAxMDQuNSBMMTUwLjggMTA0LjUgTDE1MC40IDEwNC41IEwxNTAuMCAxMDQuNSBMMTQ5LjYgMTA0LjQgTDE0OS4zIDEwNC4yIEwxNDkuMCAxMDQuMSBMMTQ4LjcgMTAzLjkgTDE0OC40IDEwMy42IEwxNDguMiAxMDMuNCBMMTQ4LjEgMTAzLjEgTDE0OC4wIDEwMi44IEwxNDguMCAxMDIuNSBMMTQ4LjAgMTAyLjMgTDE0OC4wIDEwMi4wIEwxNDguMSAxMDEuOCBMMTQ4LjIgMTAxLjUgTDE0OC40IDEwMS4zIEwxNDguNSAxMDEuMiBMMTQ4LjcgMTAxLjAgTDE0OC45IDEwMC45IEwxNDkuMSAxMDAuOSBMMTQ5LjMgMTAwLjggTDE0OS41IDEwMC44IEwxNDkuNyAxMDAuOSBMMTQ5LjkgMTAwLjkgTDE1MC4wIDEwMS4wIEwxNTAuMiAxMDEuMSBMMTUwLjMgMTAxLjEiLz48cGF0aCBkPSJNMTUzLjQgOTUuNCBMMTUzLjYgOTQuNSBMMTUzLjkgOTMuNiBMMTU0LjQgOTIuOCBMMTU1LjAgOTIuMCBMMTU1LjYgOTEuMyBMMTU2LjQgOTAuOCBMMTU3LjIgOTAuMyBMMTU4LjAgOTAuMCBMMTU4LjkgODkuNyBMMTU5LjggODkuNiBMMTYwLjcgODkuNiBMMTYxLjYgODkuOCBMMTYyLjUgOTAuMCBMMTYzLjIgOTAuMyBMMTYzLjkgOTAuNyBMMTY0LjYgOTEuMiBMMTY1LjEgOTEuNyBMMTY1LjUgOTIuMyBMMTY1LjkgOTMuMCBMMTY2LjEgOTMuNiBMMTY2LjIgOTQuMyBMMTY2LjIgOTUuMCBMMTY2LjIgOTUuNiBMMTY2LjAgOTYuMiBMMTY1LjcgOTYuOCBMMTY1LjMgOTcuMyBMMTY0LjkgOTcuOCBMMTY0LjQgOTguMiBMMTYzLjkgOTguNSBMMTYzLjQgOTguNyBMMTYyLjggOTguOSBMMTYyLjIgOTkuMCBMMTYxLjYgOTkuMCBMMTYxLjEgOTguOSBMMTYwLjUgOTguOCBMMTYwLjEgOTguNiBMMTU5LjYgOTguNCBMMTU5LjIgOTguMSBMMTU4LjkgOTcuNyBMMTU4LjcgOTcuNCBMMTU4LjUgOTcuMCBMMTU4LjMgOTYuNiBMMTU4LjMgOTYuMyBMMTU4LjMgOTUuOSBMMTU4LjMgOTUuNSBMMTU4LjUgOTUuMiBMMTU4LjYgOTQuOSBMMTU4LjggOTQuNiBMMTU5LjAgOTQuNCBMMTU5LjMgOTQuMiBMMTU5LjYgOTQuMSBMMTU5LjkgOTQuMCBMMTYwLjEgOTQuMCBMMTYwLjQgOTMuOSBMMTYwLjcgOTQuMCBMMTYwLjkgOTQuMCBMMTYxLjEgOTQuMSBMMTYxLjMgOTQuMiBMMTYxLjQgOTQuNCIvPjxwYXRoIGQ9Ik0xNjQuOCA5Mi44IEwxNjUuMCA5MS43IEwxNjUuMyA5MC43IEwxNjUuOSA4OS44IEwxNjYuNSA4OS4wIEwxNjcuMiA4OC4yIEwxNjguMSA4Ny42IEwxNjkuMCA4Ny4wIEwxNzAuMCA4Ni43IEwxNzEuMCA4Ni40IEwxNzIuMCA4Ni4zIEwxNzMuMSA4Ni4zIEwxNzQuMCA4Ni40IEwxNzUuMCA4Ni42IEwxNzUuOSA4Ny4wIEwxNzYuNyA4Ny41IEwxNzcuNCA4OC4wIEwxNzguMCA4OC42IEwxNzguNSA4OS4zIEwxNzguOSA5MC4wIEwxNzkuMSA5MC44IEwxNzkuMyA5MS41IEwxNzkuMyA5Mi4zIEwxNzkuMiA5My4wIEwxNzkuMCA5My43IEwxNzguNyA5NC40IEwxNzguMyA5NS4wIEwxNzcuOCA5NS41IEwxNzcuMiA5NS45IEwxNzYuNiA5Ni4zIEwxNzYuMCA5Ni42IEwxNzUuNCA5Ni43IEwxNzQuNyA5Ni44IEwxNzQuMSA5Ni45IEwxNzMuNCA5Ni44IEwxNzIuOCA5Ni42IEwxNzIuMyA5Ni40IEwxNzEuOCA5Ni4yIEwxNzEuMyA5NS44IEwxNzEuMCA5NS41IEwxNzAuNyA5NS4xIEwxNzAuNSA5NC42IEwxNzAuMyA5NC4yIEwxNzAuMyA5My44IEwxNzAuMyA5My4zIEwxNzAuMyA5Mi45IEwxNzAuNSA5Mi42IEwxNzAuNiA5Mi4yIEwxNzAuOSA5MS45IEwxNzEuMSA5MS43IEwxNzEuNCA5MS41IEwxNzEuNyA5MS4zIEwxNzIuMSA5MS4yIEwxNzIuNCA5MS4yIEwxNzIuNyA5MS4yIEwxNzMuMCA5MS4yIEwxNzMuMiA5MS4zIEwxNzMuNSA5MS40IEwxNzMuNyA5MS41IEwxNzMuOCA5MS42Ii8+PHBhdGggZD0iTTE3OC41IDk4LjAgTDE3OC43IDk3LjIgTDE3OC45IDk2LjQgTDE3OS4zIDk1LjcgTDE3OS44IDk1LjEgTDE4MC40IDk0LjUgTDE4MS4wIDk0LjAgTDE4MS43IDkzLjYgTDE4Mi41IDkzLjMgTDE4My4zIDkzLjEgTDE4NC4xIDkzLjAgTDE4NC44IDkzLjAgTDE4NS42IDkzLjEgTDE4Ni4zIDkzLjMgTDE4Ny4wIDkzLjYgTDE4Ny42IDkzLjkgTDE4OC4yIDk0LjMgTDE4OC42IDk0LjggTDE4OS4wIDk1LjMgTDE4OS4zIDk1LjkgTDE4OS41IDk2LjUgTDE4OS42IDk3LjAgTDE4OS42IDk3LjYgTDE4OS41IDk4LjIgTDE4OS40IDk4LjcgTDE4OS4xIDk5LjIgTDE4OC44IDk5LjYgTDE4OC40IDEwMC4wIEwxODguMCAxMDAuNCBMMTg3LjYgMTAwLjcgTDE4Ny4xIDEwMC45IEwxODYuNiAxMDEuMCBMMTg2LjEgMTAxLjEgTDE4NS42IDEwMS4xIEwxODUuMSAxMDEuMSBMMTg0LjcgMTAwLjkgTDE4NC4yIDEwMC44IEwxODMuOSAxMDAuNiBMMTgzLjUgMTAwLjMgTDE4My4yIDEwMC4wIEwxODMuMCA5OS43IEwxODIuOSA5OS40IEwxODIuNyA5OS4xIEwxODIuNyA5OC43IEwxODIuNyA5OC40IEwxODIuNyA5OC4xIEwxODIuOCA5Ny44IEwxODMuMCA5Ny42IEwxODMuMiA5Ny4zIEwxODMuNCA5Ny4xIEwxODMuNiA5Ny4wIEwxODMuOCA5Ni45IEwxODQuMSA5Ni44IEwxODQuMyA5Ni43IEwxODQuNSA5Ni43IEwxODQuOCA5Ni44IEwxODUuMCA5Ni44IEwxODUuMSA5Ni45IEwxODUuMyA5Ny4wIEwxODUuNCA5Ny4xIi8+PC9nPjwvZz48L2c+PC9zdmc+"); --img-zuiun: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNDAgMTIwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImsiIHgxPSIwIiB5MT0iMCIgeDI9IjAiIHkyPSIxIj48c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiNGNkUzQTEiLz48c3RvcCBvZmZzZXQ9Ii42IiBzdG9wLWNvbG9yPSIjRTBCRjVBIi8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjQzlBMjRBIi8+PC9saW5lYXJHcmFkaWVudD48ZmlsdGVyIGlkPSJvIj48ZmVNb3JwaG9sb2d5IG9wZXJhdG9yPSJkaWxhdGUiIHJhZGl1cz0iMS4xIiBpbj0iU291cmNlQWxwaGEiIHJlc3VsdD0iZCIvPjxmZUZsb29kIGZsb29kLWNvbG9yPSIjQTg4NDIwIi8+PGZlQ29tcG9zaXRlIGluMj0iZCIgb3BlcmF0b3I9ImluIiByZXN1bHQ9ImUiLz48ZmVNZXJnZT48ZmVNZXJnZU5vZGUgaW49ImUiLz48ZmVNZXJnZU5vZGUgaW49IlNvdXJjZUdyYXBoaWMiLz48L2ZlTWVyZ2U+PC9maWx0ZXI+PC9kZWZzPjxnIG9wYWNpdHk9Ii44Ij48ZyBmaWxsPSJ1cmwoI2spIiBmaWx0ZXI9InVybCgjbykiPjxjaXJjbGUgY3g9IjMwLjAiIGN5PSI3Ni4wIiByPSIxMi4wIi8+PGNpcmNsZSBjeD0iNDguMCIgY3k9IjY0LjAiIHI9IjE3LjAiLz48Y2lyY2xlIGN4PSI3MC4wIiBjeT0iNTguMCIgcj0iMjAuMCIvPjxjaXJjbGUgY3g9IjkzLjAiIGN5PSI2Ni4wIiByPSIxNi4wIi8+PGNpcmNsZSBjeD0iMTEwLjAiIGN5PSI3Ni4wIiByPSIxMS4wIi8+PHJlY3QgeD0iMzAuMCIgeT0iNzQuMCIgd2lkdGg9IjgwLjAiIGhlaWdodD0iMTIuMCIgcng9IjYuMCIvPjxjaXJjbGUgY3g9IjEyMC4wIiBjeT0iNDQuOCIgcj0iOC44Ii8+PGNpcmNsZSBjeD0iMTMzLjYiIGN5PSIzNi4wIiByPSIxMi4wIi8+PGNpcmNsZSBjeD0iMTQ5LjYiIGN5PSIzMi4wIiByPSIxNC40Ii8+PGNpcmNsZSBjeD0iMTY1LjYiIGN5PSIzOC40IiByPSIxMS4yIi8+PGNpcmNsZSBjeD0iMTc3LjYiIGN5PSI0NC44IiByPSI4LjAiLz48cmVjdCB4PSIxMjAuMCIgeT0iNDMuMiIgd2lkdGg9IjU3LjYiIGhlaWdodD0iOS42IiByeD0iNC44Ii8+PGNpcmNsZSBjeD0iMTUwLjAiIGN5PSIxMDEuOSIgcj0iNy4yIi8+PGNpcmNsZSBjeD0iMTYxLjEiIGN5PSI5NS40IiByPSI5LjgiLz48Y2lyY2xlIGN4PSIxNzMuNCIgY3k9IjkyLjgiIHI9IjExLjEiLz48Y2lyY2xlIGN4PSIxODUuMSIgY3k9Ijk4LjAiIHI9IjguNSIvPjxjaXJjbGUgY3g9IjE5NC4yIiBjeT0iMTAxLjkiIHI9IjYuNSIvPjxyZWN0IHg9IjE1MC4wIiB5PSIxMDAuNiIgd2lkdGg9IjQ0LjIiIGhlaWdodD0iNy44IiByeD0iMy45Ii8+PC9nPjxnIGZpbGw9Im5vbmUiIHN0cm9rZT0iI0E4ODQyMCIgc3Ryb2tlLXdpZHRoPSIxLjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgb3BhY2l0eT0iLjg1Ij48cGF0aCBkPSJNMjAuNiA3Ni4wIEwyMC45IDc0LjkgTDIxLjMgNzMuOCBMMjEuOCA3Mi43IEwyMi41IDcxLjggTDIzLjMgNzEuMCBMMjQuMiA3MC4zIEwyNS4yIDY5LjcgTDI2LjMgNjkuMyBMMjcuNCA2OS4wIEwyOC41IDY4LjkgTDI5LjYgNjguOSBMMzAuNyA2OS4wIEwzMS43IDY5LjMgTDMyLjcgNjkuNyBMMzMuNiA3MC4yIEwzNC4zIDcwLjggTDM1LjAgNzEuNSBMMzUuNSA3Mi4yIEwzNS45IDczLjAgTDM2LjIgNzMuOCBMMzYuNCA3NC42IEwzNi40IDc1LjQgTDM2LjMgNzYuMiBMMzYuMSA3Ny4wIEwzNS43IDc3LjcgTDM1LjMgNzguMyBMMzQuOCA3OC45IEwzNC4yIDc5LjQgTDMzLjUgNzkuOCBMMzIuOCA4MC4xIEwzMi4xIDgwLjMgTDMxLjQgODAuNCBMMzAuNyA4MC40IEwzMC4wIDgwLjMgTDI5LjQgODAuMiBMMjguOCA3OS45IEwyOC4yIDc5LjYgTDI3LjggNzkuMyBMMjcuNCA3OC45IEwyNy4xIDc4LjQgTDI2LjggNzguMCBMMjYuNyA3Ny41IEwyNi42IDc3LjEgTDI2LjYgNzYuNiBMMjYuNyA3Ni4yIEwyNi44IDc1LjggTDI3LjAgNzUuNCBMMjcuMiA3NS4xIEwyNy41IDc0LjggTDI3LjkgNzQuNiBMMjguMiA3NC40IEwyOC41IDc0LjMgTDI4LjkgNzQuMiBMMjkuMiA3NC4yIEwyOS41IDc0LjIgTDI5LjggNzQuMyBMMzAuMSA3NC40IEwzMC4zIDc0LjYgTDMwLjUgNzQuNyIvPjxwYXRoIGQ9Ik0zNC43IDY0LjAgTDM1LjEgNjIuNCBMMzUuNiA2MC44IEwzNi40IDU5LjQgTDM3LjQgNTguMSBMMzguNSA1Ni45IEwzOS44IDU1LjkgTDQxLjIgNTUuMSBMNDIuOCA1NC41IEw0NC4zIDU0LjEgTDQ1LjkgNTMuOSBMNDcuNSA1NC4wIEw0OS4wIDU0LjIgTDUwLjUgNTQuNSBMNTEuOCA1NS4xIEw1My4wIDU1LjggTDU0LjEgNTYuNiBMNTUuMSA1Ny42IEw1NS44IDU4LjYgTDU2LjQgNTkuNyBMNTYuOCA2MC45IEw1Ny4wIDYyLjEgTDU3LjEgNjMuMiBMNTYuOSA2NC4zIEw1Ni42IDY1LjQgTDU2LjEgNjYuNCBMNTUuNSA2Ny4zIEw1NC43IDY4LjEgTDUzLjkgNjguOCBMNTMuMCA2OS40IEw1Mi4wIDY5LjggTDUxLjAgNzAuMSBMNTAuMCA3MC4yIEw0OS4wIDcwLjIgTDQ4LjAgNzAuMSBMNDcuMSA2OS45IEw0Ni4zIDY5LjYgTDQ1LjUgNjkuMiBMNDQuOCA2OC43IEw0NC4zIDY4LjEgTDQzLjggNjcuNSBMNDMuNSA2Ni44IEw0My4zIDY2LjIgTDQzLjIgNjUuNSBMNDMuMiA2NC44IEw0My4zIDY0LjIgTDQzLjUgNjMuNyBMNDMuOCA2My4xIEw0NC4xIDYyLjcgTDQ0LjUgNjIuMyBMNDUuMCA2Mi4wIEw0NS40IDYxLjcgTDQ1LjkgNjEuNiBMNDYuNCA2MS41IEw0Ni45IDYxLjUgTDQ3LjMgNjEuNSBMNDcuNyA2MS42IEw0OC4xIDYxLjggTDQ4LjQgNjIuMCBMNDguNiA2Mi4yIi8+PHBhdGggZD0iTTU0LjQgNTguMCBMNTQuOCA1Ni4xIEw1NS40IDU0LjMgTDU2LjMgNTIuNiBMNTcuNSA1MS4wIEw1OC44IDQ5LjcgTDYwLjQgNDguNSBMNjIuMSA0Ny42IEw2My44IDQ2LjkgTDY1LjcgNDYuNCBMNjcuNSA0Ni4yIEw2OS40IDQ2LjIgTDcxLjIgNDYuNCBMNzIuOSA0Ni45IEw3NC41IDQ3LjUgTDc1LjkgNDguNCBMNzcuMiA0OS4zIEw3OC4zIDUwLjUgTDc5LjIgNTEuNyBMNzkuOSA1My4wIEw4MC40IDU0LjMgTDgwLjYgNTUuNyBMODAuNiA1Ny4xIEw4MC41IDU4LjQgTDgwLjEgNTkuNyBMNzkuNSA2MC44IEw3OC44IDYxLjkgTDc3LjkgNjIuOCBMNzYuOSA2My42IEw3NS45IDY0LjMgTDc0LjcgNjQuOCBMNzMuNSA2NS4xIEw3Mi40IDY1LjMgTDcxLjIgNjUuMyBMNzAuMCA2NS4yIEw2OS4wIDY1LjAgTDY4LjAgNjQuNiBMNjcuMSA2NC4xIEw2Ni4zIDYzLjUgTDY1LjYgNjIuOCBMNjUuMSA2Mi4xIEw2NC43IDYxLjMgTDY0LjQgNjAuNSBMNjQuMyA1OS44IEw2NC4zIDU5LjAgTDY0LjQgNTguMyBMNjQuNyA1Ny42IEw2NS4wIDU3LjAgTDY1LjQgNTYuNCBMNjUuOSA1Ni4wIEw2Ni40IDU1LjYgTDY3LjAgNTUuMyBMNjcuNiA1NS4xIEw2OC4xIDU1LjAgTDY4LjcgNTUuMCBMNjkuMiA1NS4xIEw2OS43IDU1LjIgTDcwLjEgNTUuNCBMNzAuNSA1NS42IEw3MC44IDU1LjkiLz48cGF0aCBkPSJNODAuNSA2Ni4wIEw4MC44IDY0LjUgTDgxLjMgNjMuMCBMODIuMSA2MS43IEw4My4wIDYwLjQgTDg0LjEgNTkuMyBMODUuMyA1OC40IEw4Ni42IDU3LjcgTDg4LjEgNTcuMSBMODkuNSA1Ni43IEw5MS4wIDU2LjUgTDkyLjUgNTYuNSBMOTMuOSA1Ni43IEw5NS4zIDU3LjEgTDk2LjYgNTcuNiBMOTcuOCA1OC4zIEw5OC44IDU5LjEgTDk5LjcgNjAuMCBMMTAwLjQgNjEuMCBMMTAwLjkgNjIuMCBMMTAxLjMgNjMuMSBMMTAxLjUgNjQuMiBMMTAxLjUgNjUuMyBMMTAxLjQgNjYuMyBMMTAxLjEgNjcuMyBMMTAwLjYgNjguMyBMMTAwLjAgNjkuMSBMOTkuMyA2OS45IEw5OC42IDcwLjUgTDk3LjcgNzEuMCBMOTYuOCA3MS40IEw5NS44IDcxLjcgTDk0LjkgNzEuOSBMOTMuOSA3MS45IEw5My4wIDcxLjggTDkyLjIgNzEuNiBMOTEuNCA3MS4zIEw5MC43IDcwLjkgTDkwLjAgNzAuNCBMODkuNSA2OS44IEw4OS4xIDY5LjMgTDg4LjggNjguNyBMODguNSA2OC4wIEw4OC40IDY3LjQgTDg4LjQgNjYuOCBMODguNSA2Ni4yIEw4OC43IDY1LjcgTDg5LjAgNjUuMiBMODkuMyA2NC43IEw4OS43IDY0LjQgTDkwLjEgNjQuMSBMOTAuNiA2My45IEw5MS4wIDYzLjcgTDkxLjUgNjMuNiBMOTEuOSA2My42IEw5Mi40IDYzLjcgTDkyLjcgNjMuOCBMOTMuMSA2My45IEw5My40IDY0LjEgTDkzLjYgNjQuMyIvPjxwYXRoIGQ9Ik0xMDEuNCA3Ni4wIEwxMDEuNiA3NC45IEwxMDIuMCA3My45IEwxMDIuNSA3My4wIEwxMDMuMSA3Mi4yIEwxMDMuOSA3MS40IEwxMDQuNyA3MC44IEwxMDUuNiA3MC4zIEwxMDYuNiA2OS45IEwxMDcuNiA2OS42IEwxMDguNiA2OS41IEwxMDkuNyA2OS41IEwxMTAuNiA2OS42IEwxMTEuNiA2OS45IEwxMTIuNSA3MC4yIEwxMTMuMyA3MC43IEwxMTQuMCA3MS4yIEwxMTQuNiA3MS45IEwxMTUuMSA3Mi41IEwxMTUuNSA3My4yIEwxMTUuNyA3NC4wIEwxMTUuOCA3NC43IEwxMTUuOSA3NS41IEwxMTUuOCA3Ni4yIEwxMTUuNSA3Ni45IEwxMTUuMiA3Ny42IEwxMTQuOCA3OC4xIEwxMTQuNCA3OC43IEwxMTMuOCA3OS4xIEwxMTMuMiA3OS41IEwxMTIuNiA3OS43IEwxMTIuMCA3OS45IEwxMTEuMyA4MC4wIEwxMTAuNiA4MC4wIEwxMTAuMCA4MC4wIEwxMDkuNCA3OS44IEwxMDguOSA3OS42IEwxMDguNCA3OS4zIEwxMDguMCA3OS4wIEwxMDcuNiA3OC42IEwxMDcuMyA3OC4yIEwxMDcuMSA3Ny44IEwxMDYuOSA3Ny40IEwxMDYuOSA3Ny4wIEwxMDYuOSA3Ni41IEwxMDYuOSA3Ni4xIEwxMDcuMSA3NS44IEwxMDcuMyA3NS40IEwxMDcuNSA3NS4xIEwxMDcuNyA3NC45IEwxMDguMCA3NC43IEwxMDguMyA3NC41IEwxMDguNyA3NC40IEwxMDkuMCA3NC40IEwxMDkuMyA3NC40IEwxMDkuNiA3NC40IEwxMDkuOCA3NC41IEwxMTAuMSA3NC42IEwxMTAuMyA3NC43IEwxMTAuNCA3NC44Ii8+PHBhdGggZD0iTTExMy4xIDQ0LjggTDExMy4zIDQ0LjAgTDExMy42IDQzLjIgTDExNC4wIDQyLjQgTDExNC41IDQxLjcgTDExNS4xIDQxLjEgTDExNS44IDQwLjYgTDExNi41IDQwLjIgTDExNy4zIDM5LjkgTDExOC4xIDM5LjcgTDExOC45IDM5LjYgTDExOS43IDM5LjYgTDEyMC41IDM5LjcgTDEyMS4zIDM5LjkgTDEyMi4wIDQwLjIgTDEyMi42IDQwLjYgTDEyMy4yIDQxLjAgTDEyMy43IDQxLjUgTDEyNC4xIDQyLjAgTDEyNC40IDQyLjYgTDEyNC42IDQzLjIgTDEyNC43IDQzLjggTDEyNC43IDQ0LjQgTDEyNC42IDQ1LjAgTDEyNC40IDQ1LjUgTDEyNC4yIDQ2LjAgTDEyMy45IDQ2LjUgTDEyMy41IDQ2LjkgTDEyMy4xIDQ3LjMgTDEyMi42IDQ3LjYgTDEyMi4xIDQ3LjggTDEyMS42IDQ3LjkgTDEyMS4wIDQ4LjAgTDEyMC41IDQ4LjAgTDEyMC4wIDQ4LjAgTDExOS41IDQ3LjkgTDExOS4xIDQ3LjcgTDExOC43IDQ3LjUgTDExOC40IDQ3LjIgTDExOC4xIDQ2LjkgTDExNy44IDQ2LjYgTDExNy43IDQ2LjMgTDExNy42IDQ1LjkgTDExNy41IDQ1LjYgTDExNy41IDQ1LjIgTDExNy42IDQ0LjkgTDExNy43IDQ0LjYgTDExNy44IDQ0LjMgTDExOC4wIDQ0LjEgTDExOC4yIDQzLjkgTDExOC40IDQzLjcgTDExOC43IDQzLjYgTDExOC45IDQzLjUgTDExOS4yIDQzLjUgTDExOS40IDQzLjUgTDExOS43IDQzLjUgTDExOS45IDQzLjYgTDEyMC4wIDQzLjcgTDEyMC4yIDQzLjggTDEyMC4zIDQzLjkiLz48cGF0aCBkPSJNMTI0LjIgMzYuMCBMMTI0LjUgMzQuOSBMMTI0LjkgMzMuOCBMMTI1LjQgMzIuNyBMMTI2LjEgMzEuOCBMMTI2LjkgMzEuMCBMMTI3LjggMzAuMyBMMTI4LjggMjkuNyBMMTI5LjkgMjkuMyBMMTMxLjAgMjkuMCBMMTMyLjEgMjguOSBMMTMzLjIgMjguOSBMMTM0LjMgMjkuMCBMMTM1LjMgMjkuMyBMMTM2LjMgMjkuNyBMMTM3LjIgMzAuMiBMMTM3LjkgMzAuOCBMMTM4LjYgMzEuNSBMMTM5LjEgMzIuMiBMMTM5LjUgMzMuMCBMMTM5LjggMzMuOCBMMTQwLjAgMzQuNiBMMTQwLjAgMzUuNCBMMTM5LjkgMzYuMiBMMTM5LjcgMzcuMCBMMTM5LjMgMzcuNyBMMTM4LjkgMzguMyBMMTM4LjQgMzguOSBMMTM3LjggMzkuNCBMMTM3LjEgMzkuOCBMMTM2LjQgNDAuMSBMMTM1LjcgNDAuMyBMMTM1LjAgNDAuNCBMMTM0LjMgNDAuNCBMMTMzLjYgNDAuMyBMMTMzLjAgNDAuMiBMMTMyLjQgMzkuOSBMMTMxLjggMzkuNiBMMTMxLjQgMzkuMyBMMTMxLjAgMzguOSBMMTMwLjcgMzguNCBMMTMwLjQgMzguMCBMMTMwLjMgMzcuNSBMMTMwLjIgMzcuMSBMMTMwLjIgMzYuNiBMMTMwLjMgMzYuMiBMMTMwLjQgMzUuOCBMMTMwLjYgMzUuNCBMMTMwLjggMzUuMSBMMTMxLjEgMzQuOCBMMTMxLjUgMzQuNiBMMTMxLjggMzQuNCBMMTMyLjEgMzQuMyBMMTMyLjUgMzQuMiBMMTMyLjggMzQuMiBMMTMzLjEgMzQuMiBMMTMzLjQgMzQuMyBMMTMzLjcgMzQuNCBMMTMzLjkgMzQuNiBMMTM0LjEgMzQuNyIvPjxwYXRoIGQ9Ik0xMzguNCAzMi4wIEwxMzguNiAzMC42IEwxMzkuMSAyOS4zIEwxMzkuOCAyOC4xIEwxNDAuNiAyNy4wIEwxNDEuNiAyNi4wIEwxNDIuNyAyNS4yIEwxNDMuOSAyNC41IEwxNDUuMiAyNC4wIEwxNDYuNSAyMy43IEwxNDcuOCAyMy41IEwxNDkuMSAyMy41IEwxNTAuNCAyMy43IEwxNTEuNyAyNC4wIEwxNTIuOCAyNC41IEwxNTMuOSAyNS4xIEwxNTQuOCAyNS44IEwxNTUuNiAyNi42IEwxNTYuMiAyNy41IEwxNTYuNyAyOC40IEwxNTcuMSAyOS40IEwxNTcuMiAzMC40IEwxNTcuMyAzMS4zIEwxNTcuMSAzMi4zIEwxNTYuOSAzMy4yIEwxNTYuNSAzNC4wIEwxNTUuOSAzNC44IEwxNTUuMyAzNS41IEwxNTQuNiAzNi4xIEwxNTMuOCAzNi41IEwxNTMuMCAzNi45IEwxNTIuMiAzNy4xIEwxNTEuMyAzNy4zIEwxNTAuNSAzNy4zIEwxNDkuNiAzNy4yIEwxNDguOSAzNy4wIEwxNDguMSAzNi43IEwxNDcuNSAzNi40IEwxNDYuOSAzNS45IEwxNDYuNCAzNS41IEwxNDYuMSAzNC45IEwxNDUuOCAzNC40IEwxNDUuNiAzMy44IEwxNDUuNSAzMy4zIEwxNDUuNSAzMi43IEwxNDUuNiAzMi4yIEwxNDUuOCAzMS43IEwxNDYuMCAzMS4zIEwxNDYuMyAzMC45IEwxNDYuNiAzMC41IEwxNDcuMCAzMC4zIEwxNDcuNCAzMC4xIEwxNDcuOCAyOS45IEwxNDguMyAyOS45IEwxNDguNyAyOS45IEwxNDkuMCAyOS45IEwxNDkuNCAzMC4wIEwxNDkuNyAzMC4xIEwxNDkuOSAzMC4zIEwxNTAuMSAzMC41Ii8+PHBhdGggZD0iTTE1Ni45IDM4LjQgTDE1Ny4xIDM3LjMgTDE1Ny40IDM2LjMgTDE1Ny45IDM1LjQgTDE1OC42IDM0LjUgTDE1OS40IDMzLjcgTDE2MC4yIDMzLjEgTDE2MS4xIDMyLjYgTDE2Mi4xIDMyLjIgTDE2My4yIDMxLjkgTDE2NC4yIDMxLjggTDE2NS4yIDMxLjggTDE2Ni4zIDMxLjkgTDE2Ny4yIDMyLjIgTDE2OC4xIDMyLjUgTDE2OC45IDMzLjAgTDE2OS42IDMzLjYgTDE3MC4zIDM0LjIgTDE3MC44IDM0LjkgTDE3MS4yIDM1LjYgTDE3MS40IDM2LjQgTDE3MS41IDM3LjEgTDE3MS42IDM3LjkgTDE3MS41IDM4LjYgTDE3MS4yIDM5LjMgTDE3MC45IDQwLjAgTDE3MC41IDQwLjYgTDE3MC4wIDQxLjEgTDE2OS41IDQxLjYgTDE2OC45IDQxLjkgTDE2OC4yIDQyLjIgTDE2Ny42IDQyLjQgTDE2Ni45IDQyLjUgTDE2Ni4zIDQyLjUgTDE2NS42IDQyLjQgTDE2NS4wIDQyLjMgTDE2NC41IDQyLjEgTDE2NC4wIDQxLjggTDE2My41IDQxLjUgTDE2My4xIDQxLjEgTDE2Mi44IDQwLjcgTDE2Mi42IDQwLjMgTDE2Mi41IDM5LjggTDE2Mi40IDM5LjQgTDE2Mi40IDM5LjAgTDE2Mi41IDM4LjUgTDE2Mi42IDM4LjIgTDE2Mi44IDM3LjggTDE2My4wIDM3LjUgTDE2My4zIDM3LjMgTDE2My42IDM3LjEgTDE2My45IDM2LjkgTDE2NC4yIDM2LjggTDE2NC42IDM2LjcgTDE2NC45IDM2LjcgTDE2NS4yIDM2LjggTDE2NS40IDM2LjggTDE2NS43IDM2LjkgTDE2NS45IDM3LjEgTDE2Ni4wIDM3LjIiLz48cGF0aCBkPSJNMTQ0LjQgMTAxLjkgTDE0NC42IDEwMS4yIEwxNDQuOCAxMDAuNiBMMTQ1LjEgMTAwLjAgTDE0NS41IDk5LjQgTDE0Ni4wIDk4LjkgTDE0Ni42IDk4LjUgTDE0Ny4yIDk4LjIgTDE0Ny44IDk3LjkgTDE0OC40IDk3LjggTDE0OS4xIDk3LjcgTDE0OS44IDk3LjcgTDE1MC40IDk3LjggTDE1MS4wIDk3LjkgTDE1MS42IDk4LjIgTDE1Mi4xIDk4LjUgTDE1Mi42IDk4LjggTDE1My4wIDk5LjIgTDE1My4zIDk5LjYgTDE1My41IDEwMC4xIEwxNTMuNyAxMDAuNiBMMTUzLjggMTAxLjEgTDE1My44IDEwMS42IEwxNTMuNyAxMDIuMCBMMTUzLjYgMTAyLjUgTDE1My40IDEwMi45IEwxNTMuMSAxMDMuMyBMMTUyLjggMTAzLjYgTDE1Mi41IDEwMy45IEwxNTIuMSAxMDQuMiBMMTUxLjcgMTA0LjMgTDE1MS4zIDEwNC41IEwxNTAuOCAxMDQuNSBMMTUwLjQgMTA0LjUgTDE1MC4wIDEwNC41IEwxNDkuNiAxMDQuNCBMMTQ5LjMgMTA0LjIgTDE0OS4wIDEwNC4xIEwxNDguNyAxMDMuOSBMMTQ4LjQgMTAzLjYgTDE0OC4yIDEwMy40IEwxNDguMSAxMDMuMSBMMTQ4LjAgMTAyLjggTDE0OC4wIDEwMi41IEwxNDguMCAxMDIuMyBMMTQ4LjAgMTAyLjAgTDE0OC4xIDEwMS44IEwxNDguMiAxMDEuNSBMMTQ4LjQgMTAxLjMgTDE0OC41IDEwMS4yIEwxNDguNyAxMDEuMCBMMTQ4LjkgMTAwLjkgTDE0OS4xIDEwMC45IEwxNDkuMyAxMDAuOCBMMTQ5LjUgMTAwLjggTDE0OS43IDEwMC45IEwxNDkuOSAxMDAuOSBMMTUwLjAgMTAxLjAgTDE1MC4yIDEwMS4xIEwxNTAuMyAxMDEuMSIvPjxwYXRoIGQ9Ik0xNTMuNCA5NS40IEwxNTMuNiA5NC41IEwxNTMuOSA5My42IEwxNTQuNCA5Mi44IEwxNTUuMCA5Mi4wIEwxNTUuNiA5MS4zIEwxNTYuNCA5MC44IEwxNTcuMiA5MC4zIEwxNTguMCA5MC4wIEwxNTguOSA4OS43IEwxNTkuOCA4OS42IEwxNjAuNyA4OS42IEwxNjEuNiA4OS44IEwxNjIuNSA5MC4wIEwxNjMuMiA5MC4zIEwxNjMuOSA5MC43IEwxNjQuNiA5MS4yIEwxNjUuMSA5MS43IEwxNjUuNSA5Mi4zIEwxNjUuOSA5My4wIEwxNjYuMSA5My42IEwxNjYuMiA5NC4zIEwxNjYuMiA5NS4wIEwxNjYuMiA5NS42IEwxNjYuMCA5Ni4yIEwxNjUuNyA5Ni44IEwxNjUuMyA5Ny4zIEwxNjQuOSA5Ny44IEwxNjQuNCA5OC4yIEwxNjMuOSA5OC41IEwxNjMuNCA5OC43IEwxNjIuOCA5OC45IEwxNjIuMiA5OS4wIEwxNjEuNiA5OS4wIEwxNjEuMSA5OC45IEwxNjAuNSA5OC44IEwxNjAuMSA5OC42IEwxNTkuNiA5OC40IEwxNTkuMiA5OC4xIEwxNTguOSA5Ny43IEwxNTguNyA5Ny40IEwxNTguNSA5Ny4wIEwxNTguMyA5Ni42IEwxNTguMyA5Ni4zIEwxNTguMyA5NS45IEwxNTguMyA5NS41IEwxNTguNSA5NS4yIEwxNTguNiA5NC45IEwxNTguOCA5NC42IEwxNTkuMCA5NC40IEwxNTkuMyA5NC4yIEwxNTkuNiA5NC4xIEwxNTkuOSA5NC4wIEwxNjAuMSA5NC4wIEwxNjAuNCA5My45IEwxNjAuNyA5NC4wIEwxNjAuOSA5NC4wIEwxNjEuMSA5NC4xIEwxNjEuMyA5NC4yIEwxNjEuNCA5NC40Ii8+PHBhdGggZD0iTTE2NC44IDkyLjggTDE2NS4wIDkxLjcgTDE2NS4zIDkwLjcgTDE2NS45IDg5LjggTDE2Ni41IDg5LjAgTDE2Ny4yIDg4LjIgTDE2OC4xIDg3LjYgTDE2OS4wIDg3LjAgTDE3MC4wIDg2LjcgTDE3MS4wIDg2LjQgTDE3Mi4wIDg2LjMgTDE3My4xIDg2LjMgTDE3NC4wIDg2LjQgTDE3NS4wIDg2LjYgTDE3NS45IDg3LjAgTDE3Ni43IDg3LjUgTDE3Ny40IDg4LjAgTDE3OC4wIDg4LjYgTDE3OC41IDg5LjMgTDE3OC45IDkwLjAgTDE3OS4xIDkwLjggTDE3OS4zIDkxLjUgTDE3OS4zIDkyLjMgTDE3OS4yIDkzLjAgTDE3OS4wIDkzLjcgTDE3OC43IDk0LjQgTDE3OC4zIDk1LjAgTDE3Ny44IDk1LjUgTDE3Ny4yIDk1LjkgTDE3Ni42IDk2LjMgTDE3Ni4wIDk2LjYgTDE3NS40IDk2LjcgTDE3NC43IDk2LjggTDE3NC4xIDk2LjkgTDE3My40IDk2LjggTDE3Mi44IDk2LjYgTDE3Mi4zIDk2LjQgTDE3MS44IDk2LjIgTDE3MS4zIDk1LjggTDE3MS4wIDk1LjUgTDE3MC43IDk1LjEgTDE3MC41IDk0LjYgTDE3MC4zIDk0LjIgTDE3MC4zIDkzLjggTDE3MC4zIDkzLjMgTDE3MC4zIDkyLjkgTDE3MC41IDkyLjYgTDE3MC42IDkyLjIgTDE3MC45IDkxLjkgTDE3MS4xIDkxLjcgTDE3MS40IDkxLjUgTDE3MS43IDkxLjMgTDE3Mi4xIDkxLjIgTDE3Mi40IDkxLjIgTDE3Mi43IDkxLjIgTDE3My4wIDkxLjIgTDE3My4yIDkxLjMgTDE3My41IDkxLjQgTDE3My43IDkxLjUgTDE3My44IDkxLjYiLz48cGF0aCBkPSJNMTc4LjUgOTguMCBMMTc4LjcgOTcuMiBMMTc4LjkgOTYuNCBMMTc5LjMgOTUuNyBMMTc5LjggOTUuMSBMMTgwLjQgOTQuNSBMMTgxLjAgOTQuMCBMMTgxLjcgOTMuNiBMMTgyLjUgOTMuMyBMMTgzLjMgOTMuMSBMMTg0LjEgOTMuMCBMMTg0LjggOTMuMCBMMTg1LjYgOTMuMSBMMTg2LjMgOTMuMyBMMTg3LjAgOTMuNiBMMTg3LjYgOTMuOSBMMTg4LjIgOTQuMyBMMTg4LjYgOTQuOCBMMTg5LjAgOTUuMyBMMTg5LjMgOTUuOSBMMTg5LjUgOTYuNSBMMTg5LjYgOTcuMCBMMTg5LjYgOTcuNiBMMTg5LjUgOTguMiBMMTg5LjQgOTguNyBMMTg5LjEgOTkuMiBMMTg4LjggOTkuNiBMMTg4LjQgMTAwLjAgTDE4OC4wIDEwMC40IEwxODcuNiAxMDAuNyBMMTg3LjEgMTAwLjkgTDE4Ni42IDEwMS4wIEwxODYuMSAxMDEuMSBMMTg1LjYgMTAxLjEgTDE4NS4xIDEwMS4xIEwxODQuNyAxMDAuOSBMMTg0LjIgMTAwLjggTDE4My45IDEwMC42IEwxODMuNSAxMDAuMyBMMTgzLjIgMTAwLjAgTDE4My4wIDk5LjcgTDE4Mi45IDk5LjQgTDE4Mi43IDk5LjEgTDE4Mi43IDk4LjcgTDE4Mi43IDk4LjQgTDE4Mi43IDk4LjEgTDE4Mi44IDk3LjggTDE4My4wIDk3LjYgTDE4My4yIDk3LjMgTDE4My40IDk3LjEgTDE4My42IDk3LjAgTDE4My44IDk2LjkgTDE4NC4xIDk2LjggTDE4NC4zIDk2LjcgTDE4NC41IDk2LjcgTDE4NC44IDk2LjggTDE4NS4wIDk2LjggTDE4NS4xIDk2LjkgTDE4NS4zIDk3LjAgTDE4NS40IDk3LjEiLz48L2c+PC9nPjwvc3ZnPg=="); --img-washi: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMjAiIGhlaWdodD0iMzIwIj48ZmlsdGVyIGlkPSJmIiB4PSIwIiB5PSIwIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iLjAxMiAuMDkiIG51bU9jdGF2ZXM9IjMiIHNlZWQ9IjciLz48ZmVDb2xvck1hdHJpeCB2YWx1ZXM9IjAgMCAwIDAgLjU1ICAwIDAgMCAwIC40NSAgMCAwIDAgMCAuMjUgIDAgMCAwIDEuNiAtLjg4Ii8+PC9maWx0ZXI+PGZpbHRlciBpZD0iZyIgeD0iMCIgeT0iMCI+PGZlVHVyYnVsZW5jZSB0eXBlPSJmcmFjdGFsTm9pc2UiIGJhc2VGcmVxdWVuY3k9Ii45IiBudW1PY3RhdmVzPSIxIiBzZWVkPSIzIi8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIC41ICAwIDAgMCAwIC40MiAgMCAwIDAgMCAuMyAgMCAwIDAgLjkgLS42Ii8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9IjMyMCIgaGVpZ2h0PSIzMjAiIGZpbHRlcj0idXJsKCNmKSIgb3BhY2l0eT0iLjIyIi8+PHJlY3Qgd2lkdGg9IjMyMCIgaGVpZ2h0PSIzMjAiIGZpbHRlcj0idXJsKCNnKSIgb3BhY2l0eT0iLjE4Ii8+PC9zdmc+Cg=="); --paper: var(--surface-page); --paper-2: var(--surface-soft); --card: var(--surface-card); --ink: var(--color-ink); --muted: var(--color-muted); --ai: var(--color-navy); --ai-deep: var(--color-navy); --beni: var(--color-vermilion); --btn: var(--color-vermilion); --kin: var(--color-gold-dark); --kin-gold: var(--color-gold); --usukin: var(--color-gold-light); --line: var(--border-color); --line-strong: rgba(31, 41, 55, .22); --gold-line: var(--border-gold); --shadow: transparent; --e-moku: var(--color-wood); --e-ka: var(--color-fire); --e-do: var(--color-earth); --e-gon: #8A8F98; --e-sui: var(--color-water); --f-display: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif; --f-body: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", "Meiryo", system-ui, sans-serif; --font-sans: var(--f-body); --font-serif: var(--f-display); --soft: var(--shadow-sm); --r: var(--radius-lg); } body { background: var(--surface-page); background-image: none; font-family: var(--f-body); font-size: 16px; line-height: var(--leading-body); letter-spacing: .02em; } h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 700; line-height: var(--leading-heading); } .wrap { max-width: var(--container); } img { height: auto; } .layout > main::before, .layout.full > main::before { display: none; } .card::after, .print::after, .callout::after { display: none; } .page-title { padding-left: 0; color: var(--color-navy); font-size: clamp(1.75rem, 4vw, 2rem); font-weight: 700; } .page-title::before { display: none; } .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ── ヘッダー ── */ body::before { background: var(--surface-page); } .site-header { top: 0; } .header-inner { gap: var(--space-6); } .site-logo { display: flex; align-items: center; gap: 10px; color: var(--color-navy); } .site-logo:hover { color: var(--color-navy); } .site-logo .logo-t b { font-family: var(--f-display); font-size: 1.35rem; letter-spacing: .1em; color: var(--color-navy); } .site-logo .logo-t small { color: var(--color-muted); opacity: 1; font-size: 10.5px; letter-spacing: .1em; } .seal { background: var(--color-vermilion); border-radius: var(--radius-sm); } .desktop-nav a { padding: 6px 0; border-bottom: 2px solid transparent; } .desktop-nav a[aria-current] { color: var(--color-vermilion); border-bottom-color: var(--color-vermilion); } .header-actions .btn-primary { min-height: 42px; padding: 8px 18px; font-size: var(--text-base-sm); } .hd-uranai { display: none; } .site-header .mobile-menu-button { min-height: 0; padding: 0; display: none; place-items: center; } .site-header .mobile-menu-button .ico { width: 26px; height: 26px; } .mb-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .ico { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* すべてのメニュー（引き出し） */ .site-header .gnav { display: none; position: absolute; top: 100%; left: 0; right: 0; margin: 0; z-index: 5; flex-direction: column; flex-wrap: nowrap; gap: 0; background: var(--surface-page); border-bottom: 1px solid var(--border-gold); box-shadow: var(--shadow-lg); padding: 12px max(16px, env(safe-area-inset-left, 0px)) 20px; max-height: calc(100vh - var(--mobile-header-height)); overflow-y: auto; } .site-header .gnav.open { display: flex; } .site-header .gnav a { color: var(--color-ink); background: none; font-size: 16px; padding: 12px 4px; border-bottom: 1px solid var(--border-color); flex-direction: column; border-radius: 0; box-shadow: none; } .site-header .gnav a small { display: block; font-size: 12px; color: var(--color-muted); opacity: 1; } .site-header .gnav a[aria-current] { color: var(--color-vermilion); } .site-header .gnav .gq-h { color: var(--color-gold-dark); } .site-header .gnav .gquick a { color: var(--color-navy); } .site-header .gnav .yjump { display: flex; margin: 12px 0 0; } .site-header .gnav .yjump select { background: #fff; color: var(--color-ink); border: 1px solid var(--line-strong); width: 100%; font-size: 16px; } .site-header .gnav .head-search { display: flex; margin: 4px 0 8px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: #fff; color: var(--color-ink); } .site-header .gnav .head-search input { display: block; flex: 1; width: auto; font-size: 16px; padding: 10px 12px; } .site-header .gnav .head-search button { background: var(--color-navy); color: #fff; padding: 0 14px; min-height: 46px; border-radius: 0; } @media (min-width: 1024px) { .site-header .gnav { max-width: 760px; left: auto; right: max(16px, calc((100% - var(--container)) / 2)); border: 1px solid var(--border-gold); border-radius: 0 0 var(--radius-md) var(--radius-md); } } @media (max-width: 1023px) { .hd-uranai { display: inline-flex; align-items: center; min-height: 36px; padding: 4px 14px; border: 1px solid var(--color-vermilion); border-radius: var(--radius-round); color: var(--color-vermilion); font-weight: 700; font-size: var(--text-base-sm); text-decoration: none; } .site-header .mobile-menu-button { display: grid; } } @media (max-width: 767px) { .site-logo .logo-t small { display: none; } .site-logo .logo-t b { font-size: 1.2rem; } .seal { width: 32px; height: 32px; font-size: 12px; } } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .site-header .gnav .head-search, :root:not([data-theme="light"]) .site-header .gnav .yjump select { background: var(--surface-card); color: var(--color-ink); } } /* ── 今日の暦の帯 ── */ .today-strip .ts-h { font-weight: 700; letter-spacing: .1em; } .today-strip time { font-weight: 700; } .today-strip a { color: var(--color-gold-light); font-size: var(--text-sm); white-space: nowrap; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .today-strip a { color: var(--color-gold); } } /* ── ヒーロー ── */ .hero.kin.hc.ai { border-bottom: 0; color: var(--color-ink); display: grid; place-items: center; min-height: 620px; padding: var(--space-12) var(--space-4) var(--space-16); } .hero.ai .hero-img { position: absolute; inset: 0; z-index: -2; } .hero.ai .hero-img img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; } .hero.kin.hc.ai::after { background: linear-gradient(180deg, rgba(248, 245, 236, 0), var(--surface-page)); height: 70px; } .hero .hero-content { position: relative; width: min(100%, 620px); text-align: center; } .hero .hero-content::before { content: ""; position: absolute; left: -12%; right: -12%; top: -10%; height: 70%; z-index: -1; background: radial-gradient(ellipse at center, rgba(255, 249, 232, .85) 0, rgba(255, 249, 232, .55) 45%, rgba(255, 249, 232, 0) 72%); pointer-events: none; } .hero .hero-title { margin: 0; font-family: var(--font-serif); font-size: clamp(2.25rem, 5vw, 4rem); line-height: 1.35; letter-spacing: .06em; font-weight: 700; color: var(--color-navy); text-shadow: 0 1px 0 rgba(255, 255, 255, .7), 0 0 18px rgba(255, 249, 232, .95); } .hero .hero-description { max-width: 520px; margin: var(--space-4) auto var(--space-6); font-size: var(--text-base); font-weight: 600; color: var(--color-ink); text-shadow: 0 0 8px rgba(255, 249, 232, .95), 0 0 2px rgba(255, 249, 232, .95); } .hero .birth-form { text-align: left; } .hero .birth-form .form { gap: 0; } .hero .birth-form .dsel legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .hero .birth-form .dsel-row { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-2); } .hero .birth-form .form > .note { display: none; } .hero .birth-form .row { margin: 0; } .hero .hero-about { position: absolute; right: max(16px, calc((100% - var(--container)) / 2)); bottom: 14px; margin: 0; padding: 0; max-width: 46em; text-align: right; font-size: 12.5px; line-height: 1.7; font-weight: 600; color: #2b2416; text-shadow: 0 0 6px rgba(255, 249, 230, .95), 0 0 12px rgba(255, 249, 230, .9); } @media (max-width: 860px) { .hero.kin.hc.ai { background: #e8cd84; place-items: start center; min-height: 0; padding: 200px var(--space-4) var(--space-6); } .hero.ai .hero-img { bottom: auto; } .hero.ai .hero-img img { height: auto; aspect-ratio: 1122 / 1402; object-position: center top; } .hero .hero-title { font-size: clamp(2rem, 10vw, 2.8rem); } .hero .hero-description { font-size: var(--text-base-sm); margin-block: var(--space-2) var(--space-4); } .hero .hero-about { position: static; margin-top: var(--space-4); text-align: center; font-size: 12px; } } /* フォーム・ボタン */ .btn.wide, .form .btn:not(.btn-text):not(.btn-secondary), button.btn:not(.btn-text):not(.btn-secondary) { background: var(--color-vermilion); color: #fff; border: 1px solid var(--color-gold); border-radius: var(--radius-md); min-height: 48px; box-shadow: var(--shadow-sm); font-weight: 700; } .btn.wide:hover, .form .btn:not(.btn-text):not(.btn-secondary):hover { background: var(--color-vermilion-dark); color: #fff; box-shadow: var(--shadow-md); } select, input[type="text"], input[type="search"], input[type="number"], input[type="time"], input[type="date"] { border-radius: var(--radius-md); } select { min-height: 48px; background-color: #fff; color: #1F2937; border: 1px solid rgba(31, 41, 55, .22); } /* ── セクション ── */ .section { padding-block: var(--space-12); } @media (min-width: 1280px) { .section { padding-block: var(--space-16); } } .section.section--compact { padding-block: var(--space-8); } .section-heading h2 { font-weight: 700; } .sec-more { margin: var(--space-6) 0 0; text-align: center; } .sec-more .btn-text { font-size: var(--text-base); } .quick-res .print { max-width: 820px; margin-inline: auto; } .quick-res .section-heading { margin-bottom: var(--space-4); } .quick-res .section-heading h2 { font-size: clamp(1.4rem, 2.6vw, 1.75rem); } .layout.full { padding-block: 0 var(--space-8); } /* 見出し（ページ内）：左寄せ、金の細線 */ .sec-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; border-bottom: 1px solid var(--border-gold); padding-bottom: 8px; } .sec-h h2 { color: var(--color-navy); } .sec-h .en { color: var(--color-gold-dark); letter-spacing: .14em; } .sec-h a { margin-left: auto; font-size: var(--text-sm); } /* ── 十二支 ── */ .zodiac-image { background: var(--color-gold-light); } .zodiac-image .ic { display: block; width: 100%; height: 100%; background-size: 1200% 100%; transition: transform var(--transition); } .zodiac-link:hover .zodiac-image .ic { transform: scale(1.035); } .zodiac-link:focus-visible .zodiac-image { border-color: var(--color-gold); } /* ── 占いカード ── */ .fortune-card { --fc-pad: var(--space-6); color: var(--color-ink); text-decoration: none; overflow: hidden; } .fortune-card:hover { color: var(--color-ink); } .fortune-card .fc-img { width: calc(100% + 2 * var(--fc-pad)); max-width: none; margin: calc(-1 * var(--fc-pad)) calc(-1 * var(--fc-pad)) var(--space-4); aspect-ratio: 16 / 9; object-fit: cover; } .fortune-card .btn-text { align-self: flex-start; } @media (max-width: 767px) { .fortune-card { --fc-pad: var(--space-4); } } /* ── 記事カード ── */ a.article-card { display: block; color: var(--color-ink); text-decoration: none; } a.article-card:hover { color: var(--color-ink); } .article-card-description { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* 一覧ページの記事カード（.art-card）もカテゴリ色を仕様に */ .cat1 { background: var(--category-eto); } .cat2 { background: var(--category-koyomi); } .cat3 { background: var(--category-kyusei); } .cat4 { background: var(--category-western); } .cat5 { background: var(--category-gogyo); } .cat6 { background: var(--category-koyomi); } .cat7 { background: var(--category-indian); } .cat8 { background: var(--category-eto); } .cat9 { background: var(--category-gogyo); } .cat10 { background: var(--category-gogyo); } .cat11 { background: var(--category-western); } .tag.cat { border-radius: var(--radius-round); padding: 3px 10px; font-size: var(--text-xs); } /* ── 九星 ── */ .star-grid { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: var(--space-3); } .star-card { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 6px 14px; background: var(--surface-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); color: var(--color-ink); text-decoration: none; transition: transform var(--transition), box-shadow var(--transition); } .star-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); color: var(--color-ink); } .star-card .mon { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--ec); color: #fff; font-family: var(--f-display); font-weight: 700; font-size: 15px; } .star-card b { font-size: var(--text-sm); font-weight: 700; } @media (max-width: 1023px) { .star-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } } @media (max-width: 599px) { .star-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* ── カード・札・枠 ── */ .card { border: 1px solid var(--border-color); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); background: var(--surface-card); } a.card:hover { border-color: var(--border-color); box-shadow: var(--shadow-md); transform: translateY(-3px); } .card h3 { color: var(--color-navy); } .crest { border: 1px solid var(--border-color); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); background: var(--surface-card); } .crest:hover { box-shadow: var(--shadow-md); border-color: var(--border-gold); transform: translateY(-2px); } .crest .mon { box-shadow: none; } .crest.pic { background: var(--surface-card); } .crest.pic .mon { box-shadow: 0 0 0 2px var(--surface-card), 0 0 0 3px var(--color-gold); } .print, .quick-res .print, .hero.kin .print { border: 1px solid var(--border-gold); border-top: 4px solid var(--color-gold); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); background: var(--surface-card); } .callout, .cal-detail, .next, .today-mini { border-radius: var(--radius-md); } .chip { border-radius: var(--radius-round); } .index-cards .card h3 { font-size: var(--text-lg); } /* ── 表 ── */ .tbl { border: 1px solid var(--border-color); border-radius: var(--radius-md); box-shadow: none; background: var(--surface-card); } .tbl, .meishiki, .ban, .cal, .rel-rows, .spec { box-shadow: none; } th, td { border-bottom: 1px solid rgba(31, 41, 55, .15); } thead th { background: var(--surface-gold); color: var(--color-navy); font-weight: 700; } tbody tr:nth-child(even) { background: color-mix(in srgb, var(--surface-soft) 55%, transparent); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) thead th { color: var(--color-ink); } } /* ── パンくず・目次・本文の見出し ── */ .breadcrumb.crumbs { font-size: var(--text-sm); padding-block: var(--space-4) 0; } .crumbs li + li::before { content: none; } .toc { border: 0; border-left: 3px solid var(--color-gold); background: var(--surface-gold); border-radius: var(--radius-md); padding: var(--space-6); max-width: none; font-size: var(--text-base-sm); } .prose h2, main > h2 { color: var(--color-navy); padding: 0 0 var(--space-3); border-bottom: 1px solid var(--border-gold); font-size: clamp(1.4rem, 3vw, 1.75rem); } .prose h2::before { display: none; } .prose h3 { color: var(--color-navy); padding-left: var(--space-3); border-left: 3px solid var(--color-gold); } .prose { line-height: var(--leading-article); } /* ── 広告 ── */ .ad { border: 1px solid var(--border-color); border-style: solid; background: var(--surface-ad); border-radius: var(--radius-sm); color: var(--color-muted); opacity: 1; display: block; padding: var(--space-3); text-align: center; letter-spacing: 0; } .ad::before { content: none; } .ad.banner { min-height: 110px; margin-block: var(--space-8); max-width: 970px; margin-inline: auto; } .ad.banner.large { min-height: 270px; } .ad.rect { min-height: 280px; } @media (max-width: 767px) { .ad.banner { min-height: 100px; } .ad.banner.large { min-height: 280px; } } /* ── サイドバー ── */ @media (min-width: 1024px) { .layout:not(.full) { grid-template-columns: minmax(0, var(--content)) var(--sidebar); justify-content: center; gap: 48px; } } @media (max-width: 1023px) { .layout:not(.full) { grid-template-columns: minmax(0, 1fr); } .layout:not(.full) > main { max-width: var(--content); width: 100%; margin-inline: auto; } } /* ── フッター ── */ .site-footer.site-foot { background: var(--color-navy); color: rgba(255, 255, 255, .82); border-top: 3px solid var(--color-gold); } .site-foot::before, .site-foot::after { display: none; } .site-footer .logo, .site-footer .logo:hover { color: #fff; } .site-footer .logo-t small { color: rgba(255, 255, 255, .7); } .site-footer .ft-lead { margin: 12px 0 0; font-size: var(--text-base-sm); line-height: 1.8; } .site-footer .ft-eto { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; } .site-footer .ft-eto a { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid rgba(212, 175, 55, .5); border-radius: 50%; font-family: var(--f-display); font-weight: 700; } .site-footer li { font-size: var(--text-base-sm); } .footer-bottom p { margin: 0 0 4px; } .foot-band { display: none; } /* ── スマホの下部ナビ（5項目） ── */ .bnav .nav-icon .ico { width: 22px; height: 22px; } .bnav a[aria-current] { color: var(--color-vermilion); font-weight: 700; } .mobile-bottom-nav .nav-main .nav-icon .ico { width: 22px; height: 22px; stroke: #fff; } @media (min-width: 768px) { .bnav.mobile-bottom-nav { display: none !important; } body { padding-bottom: 0; } .to-top { bottom: 20px; } } @media (max-width: 767px) { .bnav.mobile-bottom-nav { grid-template-columns: repeat(5, 1fr); } .bnav a { min-height: 52px; padding: 4px 0; font-size: 10.5px; } body { padding-bottom: calc(var(--bottom-nav-height) + 32px + env(safe-area-inset-bottom, 0px)); } .to-top { bottom: calc(var(--bottom-nav-height) + 16px + env(safe-area-inset-bottom, 0px)); } } @media print { .today-strip, .mobile-bottom-nav, .ad { display: none !important; } } .zodiac-image { display: block; } .zodiac-kanji, .zodiac-reading { display: block; } .zodiac-nav a { color: var(--color-navy); } /* 命式：薄金の見出し、日柱をいちばん強く */ .meishiki { border: 1px solid var(--border-color); border-radius: var(--radius-md); overflow: hidden; } .meishiki .col { border-right-color: var(--border-color); } .meishiki .hd { background: var(--surface-gold); color: var(--color-navy); font-family: var(--f-display); font-weight: 700; font-size: 13px; } .meishiki .col.me { background: color-mix(in srgb, var(--color-gold-light) 55%, transparent); } .meishiki .col.me .hd { background: color-mix(in srgb, var(--color-gold-light) 72%, var(--color-gold) 28%); } .ban { border: 1px solid var(--line-strong); border-radius: var(--radius-sm); overflow: hidden; } /* 十二支・十干などのページの冒頭 */ .hero-k { border: 1px solid var(--border-gold); border-top: 4px solid var(--color-gold); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); background: var(--surface-card); } .hero-k .big-k { color: var(--ec, var(--color-navy)); } /* ========================================================= 共通パーツ 第9版（ChatGPTのページ見本：十二支・命式・記事） 値は :root のトークンだけを使う ========================================================= */ :root { /* 状態色（装飾色とは分ける。色だけでなくアイコンと文言でも伝える） */ --color-success: #2E6B4F; --color-success-bg: #EAF3EE; --color-warning: #8A5A00; --color-warning-bg: #FBF2DE; --color-error: #B42318; --color-error-bg: #FDECEA; --color-info: #264C73; --color-info-bg: #EAF0F6; --focus-ring: 0 0 0 3px var(--surface-page), 0 0 0 5px var(--color-navy); --tap: 44px; --icon-sm: 18px; --icon-md: 22px; --icon-lg: 26px; --z-header: 1000; --z-drawer: 1010; --z-bottom-nav: 1100; --z-to-top: 1090; --ease: cubic-bezier(.2, .7, .2, 1); --kumo: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OCAyOCI+PHBhdGggZmlsbD0iI0Q0QUYzNyIgZD0iTTcgMjVjLTUgMC02LTctMS04LTEtNiA3LTkgMTEtNCAxLTggMTQtOSAxNi0xIDYtMyAxMiAyIDkgNyA1IDAgNiA2IDEgNnoiLz48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiNBODg0MjAiIHN0cm9rZS13aWR0aD0iMS42IiBzdHJva2UtbGluZWNhcD0icm91bmQiIGQ9Ik0xMyAxOWMtMi0zIDMtNSA0LTJNMjQgMTVjLTEtNCA1LTUgNS0xLTEgMi0zIDItMyAwTTM1IDE4YzEtMyA1LTIgNCAxTTEwIDI1aDMwIi8+PC9zdmc+Cg=="); --gold-leaf: linear-gradient(105deg, #F4E6B8 0%, #ECD48F 38%, #E3C46F 70%, #D9B65A 100%); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; } } :focus-visible { outline: 2px solid var(--color-navy); outline-offset: 2px; } /* ── アイコンボタン（操作用アイコン：24pxグリッド、線幅1.8） ── */ .icon-button { display: inline-grid; grid-auto-flow: column; align-items: center; justify-content: center; gap: 6px; min-width: var(--tap); min-height: var(--tap); padding: 0 10px; border: 1px solid transparent; border-radius: var(--radius-md); background: transparent; color: var(--color-navy); font: inherit; font-size: var(--text-base-sm); font-weight: 600; text-decoration: none; cursor: pointer; transition: background var(--transition-fast), border-color var(--transition-fast); } .icon-button .ico { width: var(--icon-md); height: var(--icon-md); } .icon-button:hover { background: color-mix(in srgb, var(--color-gold-light) 60%, transparent); color: var(--color-navy); } .icon-button:active { transform: translateY(1px); } /* ── ヘッダー（ロゴ・グローバルナビ・検索・無料で占う） ── */ .site-header { z-index: var(--z-header); background: var(--surface-page); backdrop-filter: none; } .site-header::before { content: ""; position: absolute; left: -34px; top: -14px; width: 110px; height: 60px; background: var(--kumo) no-repeat left top / 110px auto; opacity: .28; pointer-events: none; z-index: -1; } .site-header { isolation: isolate; } .site-header .site-logo .logo-t { display: flex; flex-direction: row; align-items: baseline; gap: 12px; } .site-logo .logo-t b { font-size: 1.9rem; letter-spacing: .06em; line-height: 1; } .site-logo .logo-t small { font-size: 12px; color: var(--color-ink); letter-spacing: .08em; font-weight: 500; } .desktop-nav a { font-size: 15px; font-weight: 500; color: var(--color-ink); } .hd-search { border-color: var(--line-strong); background: var(--surface-card); padding: 0 14px; } .hd-cta.btn-primary { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); padding: 0 18px; border-radius: var(--radius-sm); border: 1px solid var(--color-vermilion-dark); background: var(--color-vermilion); color: #fff; font-weight: 700; } .hd-cta .ico { width: var(--icon-sm); height: var(--icon-sm); } .hd-cta:hover { background: var(--color-vermilion-dark); color: #fff; } .site-header .mobile-menu-button { padding: 0; width: var(--tap); } .menu-btn .ico + .ico { display: none; } .menu-btn[aria-expanded="true"] .ico:first-of-type { display: none; } .menu-btn[aria-expanded="true"] .ico + .ico { display: block; } @media (max-width: 1023px) { .hd-cta { display: none !important; } .hd-search { border-color: transparent; background: none; padding: 0; width: var(--tap); } .hd-search .hs-t { display: none; } .site-header .mobile-menu-button { display: inline-grid; } } @media (max-width: 767px) { .site-header { position: relative; } /* スマホは下部ナビがあるのでヘッダーは固定しない */ .site-header .site-logo .logo-t { flex-direction: column; gap: 4px; } .site-logo .logo-t b { font-size: 1.5rem; } .site-logo .logo-t small { display: block; font-size: 10px; } .site-header::before { width: 90px; background-size: 90px auto; } } /* ── 今日の暦（全ページ共通の紺の帯） ── */ .today-strip { background: var(--color-navy); color: #fff; font-size: var(--text-base-sm); border-bottom: 1px solid rgba(212, 175, 55, .45); } .today-strip-inner { min-height: 52px; flex-wrap: wrap; gap: 6px 18px; padding-block: 6px; } .today-strip .ts-h { color: #fff; font-family: var(--f-display); font-weight: 700; font-size: 15px; letter-spacing: .12em; text-decoration: none; padding-right: 18px; border-right: 1px solid rgba(255, 255, 255, .25); } .today-strip .ts-h:hover { color: var(--color-gold-light); text-decoration: underline; } .ts-moon { width: 26px; height: 26px; flex: none; } .ts-moon .mn-bg { fill: #2A3F5A; stroke: rgba(212, 175, 55, .6); stroke-width: .8; } .ts-moon .mn-lit { fill: #E8C766; } .today-strip .ts-main { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; } .today-strip .ts-date { color: #fff; font-weight: 600; } .today-strip .ts-ks { display: inline-flex; gap: 12px; } .today-strip .ts-pills { display: inline-flex; flex-wrap: wrap; gap: 8px; } .today-strip .ts-p { display: inline-flex; align-items: stretch; border: 1px solid rgba(212, 175, 55, .55); border-radius: var(--radius-sm); overflow: hidden; font-size: 13px; line-height: 1; } .today-strip .ts-p i { font-style: normal; padding: 6px 8px; background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .85); } .today-strip .ts-p b { padding: 6px 9px; font-weight: 600; color: #fff; } @media (max-width: 767px) { .today-strip-inner { justify-content: flex-start; gap: 6px 10px; padding-block: 8px; text-align: left; } .today-strip .ts-h { font-size: 14px; padding-right: 10px; } .ts-moon { width: 20px; height: 20px; } .today-strip .ts-main { gap: 2px 10px; font-size: 13px; } .today-strip .ts-ks { gap: 6px; } .today-strip .ts-pills { width: 100%; justify-content: flex-end; gap: 6px; } .today-strip .ts-p i { display: inline-block; padding: 6px 5px; font-size: 12px; } .today-strip .ts-p b { padding: 6px 7px !important; } } /* ── パンくず ── */ .breadcrumb.crumbs ol { gap: 4px 0; } /* ── ページ内目次（開閉できる。スマホは最初は閉じる） ── */ details.toc { padding: 0; background: var(--surface-card); border: 1px solid var(--border-color); border-left: 0; border-top: 3px solid var(--color-gold); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); } details.toc > summary { list-style: none; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 var(--space-4); cursor: pointer; font-family: var(--f-display); font-weight: 700; font-size: var(--text-lg); color: var(--color-navy); } details.toc > summary::-webkit-details-marker { display: none; } details.toc > summary span { flex: 1; } details.toc > summary .ico { width: var(--icon-md); height: var(--icon-md); color: var(--color-gold-dark); } details.toc > summary .ico:last-child { transition: transform var(--transition); color: var(--color-navy); } details.toc[open] > summary .ico:last-child { transform: rotate(180deg); } details.toc ol { margin: 0; padding: 0 var(--space-4) var(--space-4); list-style: none; counter-reset: toc; } details.toc li { counter-increment: toc; border-top: 1px solid var(--border-color); margin: 0; } details.toc li a { display: flex; gap: 10px; align-items: center; min-height: var(--tap); padding: 6px 2px; color: var(--color-ink); text-decoration: none; font-size: var(--text-base-sm); } details.toc li a::before { content: counter(toc) "."; color: var(--color-muted); min-width: 1.4em; } details.toc li a::after { content: "›"; margin-left: auto; color: var(--color-muted); } details.toc li a:hover { color: var(--color-vermilion); } @media (min-width: 768px) { main > details.toc ol, .prose > details.toc ol { columns: 2; column-gap: var(--space-8); } main > details.toc li, .prose > details.toc li { break-inside: avoid; } } /* ── 本文の見出し：金雲＋番号＋金の線 ── */ .prose h2, main > h2, .h-cloud { display: flex; align-items: center; gap: 12px; border-bottom: 0; padding: 0; margin-top: var(--space-12); } .prose h2::before, main > h2::before, .h-cloud::before { content: ""; display: block !important; flex: none; width: 40px; height: 24px; background: var(--img-kumo1) no-repeat center / contain; position: static; border: 0; box-shadow: none; } .prose h2::after, main > h2::after { content: ""; flex: 1 1 24px; min-width: 24px; height: 1px; background: linear-gradient(90deg, var(--color-gold), rgba(212, 175, 55, 0)); } .h2-t { min-width: 0; } .h-no { margin-right: .3em; } .h-cloud { margin: 0 0 var(--space-3); font-size: var(--text-xl); color: var(--color-navy); } .h-cloud::after { content: none; } @media (max-width: 767px) { .prose h2, main > h2 { font-size: 1.3rem; gap: 8px; } .prose h2::before, main > h2::before { width: 32px; height: 20px; } } /* ── スマホの下部ナビ：真ん中の「占う」を大きく ── */ @media (max-width: 767px) { .mobile-bottom-nav { z-index: var(--z-bottom-nav); } .mobile-bottom-nav .nav-main .nav-icon { width: 54px; height: 54px; margin-top: -24px; border-width: 3px; } .mobile-bottom-nav .nav-main .nav-icon .ico { width: 28px; height: 28px; } } .to-top.icon-button { color: var(--color-navy); padding: 0; width: var(--tap); border-radius: 50%; background: var(--surface-card); border: 1px solid var(--border-gold); box-shadow: var(--shadow-md); z-index: var(--z-to-top); } /* ========================================================= 十二支ページ（EtoHero・BirthYears・EtoData・ZodiacNav） ========================================================= */ .page-top { outline: none; } .eto-band { position: relative; overflow: hidden; background: var(--gold-leaf); border-block: 1px solid rgba(168, 132, 32, .35); } .eto-band::before { content: ""; position: absolute; inset: 0; background: url("kinpaku.svg") center / 600px auto; opacity: .35; mix-blend-mode: multiply; pointer-events: none; } .eb-inner { position: relative; z-index: 1; width: min(calc(100% - 32px), var(--container)); margin-inline: auto; min-height: 300px; display: flex; align-items: center; gap: var(--space-8); padding-right: 46%; } .eb-k { margin: 0; flex: none; display: flex; flex-direction: column; align-items: center; font-family: var(--f-display); font-weight: 700; font-size: 150px; line-height: 1; color: var(--color-ink); text-shadow: 0 2px 0 rgba(255, 255, 255, .35); } .eb-k span { margin-top: 10px; font-size: 20px; letter-spacing: .3em; } .eb-text h1 { margin: 0 0 var(--space-4); font-size: clamp(1.9rem, 3.2vw, 2.6rem); line-height: 1.4; color: var(--color-ink); } .eb-lead { margin: 0; max-width: 26em; font-family: var(--f-display); font-size: var(--text-lg); line-height: 1.9; color: #2b2416; } .eb-img { position: absolute; right: 0; top: 0; height: 100%; width: 48%; object-fit: cover; object-position: center 22%; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28%); mask-image: linear-gradient(90deg, transparent 0, #000 28%); } .eb-years { position: relative; margin: 0; padding: 10px 0 10px 170px; border-bottom: 1px solid var(--border-gold); } .eb-y-in { display: flex; flex-wrap: wrap; align-items: center; } .layout.full > main > .eb-years { width: 100%; } .eb-years > summary { position: absolute; left: 0; top: 10px; height: var(--tap); list-style: none; display: flex; align-items: center; gap: 8px; font-family: var(--f-display); font-weight: 700; color: var(--color-navy); pointer-events: none; } .eb-years > summary::-webkit-details-marker { display: none; } .eb-years > summary .ico { display: none; width: var(--icon-md); height: var(--icon-md); } .eb-years ul { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; } .eb-years li { margin: 0; } .eb-years li a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 12px; font-size: var(--text-base-sm); color: var(--color-ink); text-decoration: none; border-right: 1px solid var(--border-color); } .eb-years li a small { color: var(--color-muted); font-size: 12px; } .eb-years li a:hover { color: var(--color-vermilion); } .eb-all { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); color: var(--color-navy); font-size: var(--text-base-sm); text-decoration: none; } .eb-all .ico { width: var(--icon-sm); height: var(--icon-sm); color: var(--color-vermilion); } .eto-top { display: grid; grid-template-columns: 290px minmax(0, 1fr) 300px; gap: var(--space-8); align-items: start; margin: var(--space-8) 0 var(--space-4); } @media (min-width: 1024px) { .ads-off .eto-top { grid-template-columns: 300px minmax(0, 1fr); } } .eto-top > details.toc { margin: 0; } .eto-top details.toc ol { columns: 1; } .eto-top details.toc li a { font-size: 13.5px; } .eto-top .ad.rect { margin: 0; min-height: 250px; } .eto-data .tbl { margin: 0; } .data-tbl { width: 100%; font-size: var(--text-base-sm); } .data-tbl th { width: 9.5em; text-align: left; font-weight: 500; color: var(--color-ink); background: var(--surface-soft); white-space: nowrap; } .data-tbl tr:nth-child(even) { background: none; } .data-tbl th, .data-tbl td { padding: 9px 14px; vertical-align: top; } .eto-body { display: grid; grid-template-columns: minmax(0, 760px) 300px; gap: var(--space-12); justify-content: space-between; } .eto-aside { padding-top: var(--space-12); } .eto-aside .eto-art { position: sticky; top: calc(var(--header-height) + 16px); margin: 0; } .eto-aside .eto-art img { border-radius: var(--radius-md); } @media (max-width: 1023px) { .eb-inner { padding-right: 40%; min-height: 240px; gap: var(--space-6); } .eb-k { font-size: 110px; } .eto-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .eto-top .ad.rect { grid-column: 1 / -1; } .eto-body { grid-template-columns: minmax(0, 1fr); } .eto-aside { padding-top: 0; max-width: 360px; } } @media (max-width: 767px) { .eto-band { background: none; border: 0; } .eto-band::before { bottom: auto; height: 170px; background: var(--gold-leaf); opacity: 1; mix-blend-mode: normal; } .eb-inner { display: block; padding: 0; min-height: 0; } .eb-k { position: relative; z-index: 2; height: 170px; justify-content: center; align-items: flex-start; font-size: 92px; padding-left: 8px; } .eb-k span { font-size: 16px; padding-left: 26px; } .eb-img { top: 0; height: 170px; width: 66%; } .eb-text { padding: var(--space-4) 0 0; text-align: center; } .eb-text h1 { font-size: 1.55rem; margin-bottom: var(--space-2); } .eb-lead { font-size: var(--text-base-sm); margin-inline: auto; } .eb-years > summary { position: static; height: auto; } .eb-y-in { display: block; } .eb-years { display: block; padding: 0; margin-top: var(--space-4); border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--surface-card); } .eb-years > summary { pointer-events: auto; cursor: pointer; justify-content: space-between; min-height: 52px; padding: 0 var(--space-4); margin: 0; border: 0; } .eb-years > summary .ico { display: block; transition: transform var(--transition); } .eb-years[open] > summary .ico { transform: rotate(180deg); } .eb-years ul { display: grid; grid-template-columns: 1fr 1fr; padding: 0 var(--space-4); } .eb-years li a { border: 0; padding: 0; } .eb-all { margin: 0; padding: 0 var(--space-4) var(--space-2); } .eto-top { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); margin-top: var(--space-4); } .data-tbl th { width: 7.5em; white-space: normal; } .data-tbl th, .data-tbl td { padding: 8px 10px; } } /* 十二支ナビ（丸い絵＋漢字＋読み） */ .zodiac-nav { display: block; margin: 0; padding: var(--space-6) 0; background: var(--surface-soft); border-top: 1px solid var(--border-gold); } .zodiac-nav .wrap { display: flex; align-items: center; gap: var(--space-6); } .zodiac-nav .zn-h { margin: 0; flex: none; font-family: var(--f-display); font-weight: 700; font-size: var(--text-lg); color: var(--color-navy); } .zodiac-nav ul { flex: 1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; } .zodiac-nav li { margin: 0; } .zodiac-nav a { width: auto; height: auto; display: grid; grid-template-columns: 40px auto; grid-template-rows: auto auto; column-gap: 6px; align-items: center; padding: 4px; background: none; border: 1px solid transparent; border-radius: var(--radius-md); color: var(--color-ink); text-decoration: none; } .zodiac-nav a .ic { grid-row: 1 / 3; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border-gold); background-color: var(--color-gold-light); background-size: 1200% 100%; } .zodiac-nav a b { font-family: var(--f-display); font-size: 16px; line-height: 1.1; } .zodiac-nav a small { font-size: 11px; color: var(--color-muted); line-height: 1.1; } .zodiac-nav a:hover, .zodiac-nav a[aria-current="page"] { background: var(--surface-card); color: var(--color-ink); border-color: var(--border-gold); } .zodiac-nav a[aria-current="page"] .ic { box-shadow: 0 0 0 2px var(--color-gold); } @media (max-width: 1023px) { .zodiac-nav .wrap { flex-direction: column; align-items: stretch; gap: var(--space-3); } .zodiac-nav ul { grid-template-columns: repeat(6, minmax(0, 1fr)); } .zodiac-nav a { grid-template-columns: 1fr; justify-items: center; text-align: center; } .zodiac-nav a .ic { grid-row: auto; width: 48px; height: 48px; } } @media (max-width: 420px) { .zodiac-nav ul { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .breadcrumb.crumbs li + li::before { margin: 0 8px; } /* ── ロゴ（金の丸紋＋明朝＋副題）・フッターの青海波 ── */ .logo-mark { width: 42px; height: 42px; flex: none; } .site-header .site-logo { gap: 10px; } .site-header .site-logo .logo-t { flex-direction: column; align-items: flex-start; gap: 3px; } .site-header .site-logo .logo-t b { font-size: 1.75rem; } .site-header::before { display: none; } @media (max-width: 767px) { .logo-mark { width: 34px; height: 34px; } .site-header .site-logo .logo-t b { font-size: 1.4rem; } } .site-footer .logo { display: inline-flex; align-items: center; gap: 12px; } .site-footer .logo-mark { width: 52px; height: 52px; } .site-footer .logo-t b { font-size: 1.6rem; } .site-footer.site-foot { position: relative; padding-bottom: 96px; } .site-footer.site-foot::after { content: none; } .site-footer.site-foot { background: #061F3E url("art/footer-1920.webp") no-repeat right bottom / max(100%, 1100px) auto; padding-bottom: clamp(140px, 18vw, 260px); } @media (max-width: 767px) { .site-footer.site-foot { background-image: url("art/footer-960.webp"); background-size: 900px auto; padding-bottom: 200px; } } .footer-bottom { position: relative; z-index: 1; } /* ── ボタン体系（主：えんじ＋矢印／副：紺枠／テキスト：赤矢印／無効：灰）── 状態：通常・ホバー（濃く）・フォーカス（紺のリング）・押下（1px沈む）・無効・処理中（aria-busy） */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border-radius: var(--radius-sm); font-weight: 700; transition: background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast); } .btn .ico { width: var(--icon-sm); height: var(--icon-sm); flex: none; } .btn:active:not(:disabled) { transform: translateY(1px); } .btn:focus-visible { outline: 0; box-shadow: var(--focus-ring); } .btn.wide.btn-primary, .btn-primary { background: var(--color-vermilion); color: #fff; border: 1px solid var(--color-vermilion-dark); } .btn.wide.btn-primary:hover, .btn-primary:hover { background: var(--color-vermilion-dark); color: #fff; } .btn-secondary { background: var(--surface-card); color: var(--color-navy); border: 1.5px solid var(--color-navy); } .btn-secondary:hover { background: var(--color-navy); color: #fff; } .btn-text { min-height: var(--tap); padding: 0 4px; background: none; border: 0; color: var(--color-navy); } .btn-text::after { content: "→"; color: var(--color-vermilion); } .btn-text:hover { color: var(--color-vermilion); } .btn:disabled, .btn[aria-disabled="true"] { background: #D1D5DB !important; border-color: #D1D5DB !important; color: #6B7280 !important; cursor: not-allowed; box-shadow: none !important; } .btn[aria-busy="true"] { cursor: progress; opacity: .85; } .btn[aria-busy="true"] .ico { animation: btn-spin 1s linear infinite; } @keyframes btn-spin { to { transform: rotate(360deg); } } /* 占いカードの「無料で占う」はえんじの枠ボタン */ .fortune-card .btn-text { align-self: stretch; justify-content: center; margin-top: auto; min-height: 44px; border: 1.5px solid var(--color-vermilion); border-radius: var(--radius-sm); color: var(--color-vermilion); } .fortune-card .btn-text::after { content: "→"; } .fortune-card:hover .btn-text { background: var(--color-vermilion); color: #fff; } .fortune-card:hover .btn-text::after { color: #fff; } /* 入力欄のエラー（えんじ枠＋文言。色だけに頼らず「！」と文で示す） */ .form [aria-invalid="true"], .form select.is-err { border: 1.5px solid var(--color-error) !important; background: var(--color-error-bg); } .form .err:not([hidden]) { display: flex; gap: 6px; align-items: flex-start; color: var(--color-error); font-weight: 600; font-size: var(--text-base-sm); } .form .err:not([hidden])::before { content: "！"; flex: none; } .form label.remember { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 10px; min-height: var(--tap); margin: 4px 0 0; font-size: var(--text-base-sm); color: var(--color-ink); cursor: pointer; } .form label.remember input { width: 20px; height: 20px; accent-color: var(--color-navy); flex: none; } .hero .birth-form label.remember { justify-content: center; font-size: 13px; } /* ========================================================= 占いページ（FortuneHero・InputCard・ResultSummary・MeishikiTable・GogyoRadar） ========================================================= */ .page-band { position: relative; overflow: hidden; background: #E9CF86 url("art/band-1920.webp") center / cover no-repeat; border-bottom: 1px solid rgba(168, 132, 32, .35); } .page-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 46% 70% at center, rgba(250, 243, 222, .82), rgba(250, 243, 222, 0) 80%); opacity: 1; pointer-events: none; } .fb-inner { position: relative; width: min(calc(100% - 32px), 880px); margin: 0 auto; padding: var(--space-8) 0; text-align: center; } .has-card .fb-inner { padding-bottom: 112px; } .page-band .page-title { margin: 0; font-size: clamp(1.7rem, 4vw, 2.6rem); color: var(--color-ink); } .page-band .page-sub { margin: var(--space-3) auto 0; max-width: 40em; font-size: var(--text-base-sm); color: #2b2416; font-weight: 500; } .print.input-card { position: relative; z-index: 1; max-width: 880px; margin: -96px auto var(--space-8); padding: var(--space-6) var(--space-8); border-top-width: 1px; } .form .req, .form .opt-b { display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 4px; font-size: 11px; font-weight: 700; line-height: 1.6; vertical-align: 2px; } .form .req { background: var(--color-vermilion); color: #fff; } .dsel legend { font-weight: 700; color: var(--color-navy); } @media (max-width: 767px) { .fb-inner { padding: var(--space-6) 0; } .has-card .fb-inner { padding-bottom: 88px; } .print.input-card { margin-top: -72px; padding: var(--space-4); } } /* 結果：3列（要約・命式表・五行） */ .mei-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, .95fr); gap: var(--space-6); align-items: start; } .mei-col { min-width: 0; } .mei-col .h-cloud, .mei-more .h-cloud { font-size: var(--text-lg); margin-bottom: var(--space-3); } .res-summary { background: var(--surface-card); border: 1.5px solid var(--color-gold); border-radius: var(--radius-md); padding: var(--space-6); box-shadow: var(--shadow-sm); } .rs-lbl { margin: 0 0 var(--space-3); font-weight: 700; color: var(--color-navy); } .rs-main { display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap; } .rs-k { margin: 0; display: flex; flex-direction: column; align-items: center; font-family: var(--f-display); font-weight: 700; font-size: 3.4rem; line-height: 1.05; color: var(--color-ink); } .rs-k small { font-size: 13px; letter-spacing: .25em; margin-top: 6px; color: var(--color-muted); } .rs-pills { margin: 0; display: grid; gap: 8px; } .rs-pills div { display: flex; align-items: center; gap: 10px; } .rs-pills dt { min-width: 4.5em; text-align: center; padding: 3px 8px; border-radius: var(--radius-round); background: var(--surface-gold); color: var(--color-ink); font-size: 12px; } .rs-pills dd { margin: 0; font-family: var(--f-display); font-weight: 700; } .rs-desc { margin: var(--space-4) 0 0; padding-top: var(--space-4); border-top: 1px solid var(--border-color); font-size: var(--text-base-sm); line-height: 1.9; } .mei-tbl-w { margin: 0; } .mei-tbl { width: 100%; text-align: center; font-size: var(--text-base-sm); } .mei-tbl th, .mei-tbl td { padding: 8px 6px; border-bottom: 1px solid var(--border-color); } .mei-tbl tbody th { background: var(--surface-soft); font-weight: 500; white-space: nowrap; } .mei-tbl .me { background: color-mix(in srgb, var(--color-gold-light) 70%, transparent); } .mei-tbl thead .me { background: color-mix(in srgb, var(--color-gold-light) 60%, var(--color-gold) 40%); } .mei-tbl tr:nth-child(even) { background: none; } .mei-tbl .gan, .mei-tbl .shi { font-family: var(--f-display); font-size: 1.5rem; line-height: 1.2; color: var(--color-ink); background: none; } .mei-tbl small { color: var(--color-muted); } .radar { background: var(--surface-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: var(--space-3); } .radar svg { display: block; width: 100%; max-width: 300px; margin: 0 auto; } .rd-grid { fill: none; stroke: rgba(31, 41, 55, .15); stroke-width: 1; } .rd-val { fill: rgba(179, 59, 46, .35); stroke: var(--color-vermilion); stroke-width: 2; stroke-linejoin: round; } .rd-l circle { fill: var(--ec, var(--color-navy)); } .rd-l text { fill: #fff; font-size: 13px; font-weight: 700; font-family: var(--f-display); } .rd-l text.rd-p { fill: var(--color-ink); font-size: 11.5px; font-weight: 600; font-family: var(--f-body); } .rd-l.e0 { --ec: var(--color-wood); } .rd-l.e1 { --ec: var(--color-fire); } .rd-l.e2 { --ec: var(--color-earth); } .rd-l.e3 { --ec: #A88420; } .rd-l.e4 { --ec: var(--color-water); } .mei-col > p { font-size: var(--text-base-sm); } .mei-more { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: var(--space-8); margin-top: var(--space-8); } .md-in { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--space-6); align-items: start; } .md-in img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-md); } .md-h { margin: 0 0 var(--space-2); font-family: var(--f-display); font-weight: 700; font-size: var(--text-lg); } .md-in p { font-size: var(--text-base-sm); } .rel-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .rel-list li { margin: 0; } .rel-list a { display: flex; flex-direction: column; gap: 2px; padding: 10px 36px 10px 14px; min-height: var(--tap); position: relative; background: var(--surface-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); color: var(--color-ink); text-decoration: none; } .rel-list a::after { content: "›"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--color-muted); font-size: 20px; } .rel-list a:hover { border-color: var(--border-gold); box-shadow: var(--shadow-sm); } .rel-list b { font-size: var(--text-base-sm); color: var(--color-navy); } .rel-list small { font-size: 12px; color: var(--color-muted); } @media (max-width: 1023px) { .mei-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .mei-grid > .mei-col:first-child { grid-column: 1 / -1; } .mei-more { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 767px) { .mei-grid { grid-template-columns: minmax(0, 1fr); } .rs-main { justify-content: center; } .rs-k { font-size: 2.8rem; } .md-in { grid-template-columns: 1fr; } .md-in img { max-height: 220px; } } .mei-tbl th, .mei-tbl td { text-align: center; } /* ========================================================= サイドバー（CalendarSummary・おすすめ・十二支から探す）と記事 ========================================================= */ .side { display: flex; flex-direction: column; gap: var(--space-6); } .today-card { border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border-gold); background: var(--surface-card); box-shadow: var(--shadow-sm); } .tc-top { position: relative; padding: var(--space-4) var(--space-4) var(--space-4); background: var(--color-navy); color: #fff; } .tc-top::after { content: ""; position: absolute; right: -10px; top: -6px; width: 120px; height: 70px; opacity: .85; background: var(--img-kumo1) no-repeat right top / 120px auto; opacity: .85; pointer-events: none; } .tc-h { margin: 0 0 var(--space-2); font-family: var(--f-display); font-weight: 700; letter-spacing: .1em; } .tc-main { display: flex; align-items: center; gap: 12px; } .tc-main .ts-moon { width: 40px; height: 40px; } .tc-main .ts-date { display: block; font-family: var(--f-display); font-size: 1.25rem; font-weight: 700; color: #fff; } .tc-main .ts-ks { display: flex; gap: 8px; font-size: 13px; color: rgba(255, 255, 255, .85); } .tc-pills { display: grid; grid-template-columns: repeat(3, 1fr); } .tc-pills .ts-p { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px; border-right: 1px solid var(--border-color); text-align: center; } .tc-pills .ts-p:last-child { border-right: 0; } .tc-pills .ts-p i { font-style: normal; font-size: 11px; color: var(--color-muted); } .tc-pills .ts-p b { font-size: var(--text-base-sm); color: var(--color-ink); } .tc-more { display: flex; justify-content: center; align-items: center; min-height: var(--tap); border-top: 1px solid var(--border-color); font-size: var(--text-sm); color: var(--color-navy); text-decoration: none; } .tc-more::after { content: "→"; margin-left: 6px; color: var(--color-vermilion); } .side-box .side-h { display: flex; align-items: center; margin: 0 0 var(--space-3); border: 0; padding: 0; font-size: var(--text-lg); } .side-box .side-h::after { content: none; } .side-all { margin-left: auto; font-family: var(--f-body); font-size: 12px; font-weight: 600; color: var(--color-vermilion); text-decoration: none; } .side-all::after { content: " →"; } .side .side-list { list-style: none; margin: 0; padding: 0; counter-reset: sl; background: var(--surface-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); } .side .side-list li { counter-increment: sl; margin: 0; border-bottom: 0; border-top: 1px solid var(--border-color); } .side .side-list li:first-child { border-top: 0; } .side .side-list a { border: 0; display: flex; align-items: center; gap: 10px; min-height: var(--tap); padding: 6px 12px; color: var(--color-ink); text-decoration: none; font-size: var(--text-base-sm); } .side .side-list a::before { content: counter(sl); flex: none; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-gold); color: var(--color-gold-dark); font-size: 12px; font-weight: 700; } .side .side-list a:hover { color: var(--color-vermilion); } .side .side-eto { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 6px; } .side .side-eto li { margin: 0; border: 0; } .side .side-eto a { border: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--color-ink); text-decoration: none; padding: 4px 0; border-radius: var(--radius-md); } .side .side-eto .ic { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--border-gold); background-color: var(--color-gold-light); } .side .side-eto b { font-family: var(--f-display); font-size: 15px; line-height: 1.2; } .side .side-eto small { font-size: 11px; color: var(--color-muted); line-height: 1.2; } .side .side-eto a:hover b { color: var(--color-vermilion); } @media (max-width: 1023px) { .side .today-card { display: none; } } /* スマホ・タブレットは上の帯と重なるので出さない */ /* ── 占いカード一覧（FortuneGrid）・十二支一覧（ZodiacList） ── */ .fortune-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-8); } .fortune-grid .fortune-card { --fc-pad: var(--space-4); display: flex; flex-direction: column; gap: 6px; padding: var(--fc-pad); background: var(--surface-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); } .fortune-grid .fortune-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } .fortune-grid .fc-img { aspect-ratio: 4 / 3; margin-bottom: 4px; } .fc-tag { font-size: 12px; color: var(--color-muted); } .fortune-grid .fortune-card-title { margin: 0; font-size: var(--text-lg); color: var(--color-navy); } .fortune-grid .fortune-card-description { margin: 0 0 8px; font-size: 13px; line-height: 1.7; color: var(--color-ink); } @media (max-width: 1279px) { .fortune-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 1023px) { .fortune-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 767px) { .fortune-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); } .fortune-grid .fortune-card { --fc-pad: var(--space-3); } .fortune-grid .fortune-card-title { font-size: var(--text-base); } } .zodiac-list { margin: var(--space-8) auto var(--space-12); } .zodiac-list .h-cloud { display: flex; align-items: center; gap: 12px; } .zodiac-list .h-cloud::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--color-gold), rgba(212, 175, 55, 0)); order: 1; } .zodiac-list .side-all { order: 2; margin-left: 0; } .zodiac-list ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-3); } .zodiac-list li { margin: 0; } .zodiac-list a { display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--color-ink); text-decoration: none; } .zodiac-list .ic { width: 100%; max-width: 76px; aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--border-gold); background-color: var(--color-gold-light); transition: transform var(--transition); } .zodiac-list a:hover .ic { transform: scale(1.05); } .zodiac-list b { font-family: var(--f-display); font-size: 16px; margin-top: 4px; } .zodiac-list small { font-size: 11px; color: var(--color-muted); } @media (max-width: 1023px) { .zodiac-list ul { grid-template-columns: repeat(6, minmax(0, 1fr)); } } @media (max-width: 480px) { .zodiac-list ul { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .side-all { white-space: nowrap; } /* ========================================================= 暦・吉日カレンダー（KichiCalendar・KichiLegend） ========================================================= */ .kc-top { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--space-6); align-items: start; margin-top: var(--space-8); } .kc-side { display: flex; flex-direction: column; gap: var(--space-6); } .kc-legend { background: var(--surface-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: var(--space-4); } .kc-legend dl { margin: 0; } .kc-legend dl > div { padding: 8px 0; border-top: 1px solid var(--border-color); } .kc-legend dt { display: flex; align-items: center; gap: 8px; font-family: var(--f-display); font-weight: 700; } .kc-legend dd { margin: 2px 0 0 0; font-size: 12.5px; color: var(--color-muted); } .kc-legend .nt .s, .cal .d .nt .s { display: inline-block; padding: 0 5px; border-radius: 4px; font-size: 11px; line-height: 1.6; font-weight: 700; } .nt.good .s { background: color-mix(in srgb, var(--color-wood) 14%, #fff); color: var(--color-wood); } .nt.bad .s { background: color-mix(in srgb, var(--color-vermilion) 12%, #fff); color: var(--color-vermilion); } .nt:not(.good):not(.bad) .s { background: var(--surface-soft); color: var(--color-muted); } .cal-nav { margin-bottom: var(--space-3); } .cal-nav .btn { min-height: var(--tap); padding: 0 14px; font-size: var(--text-base-sm); } .cal-nav h2.cal-t { display: block; font-size: clamp(1.4rem, 3vw, 1.75rem); color: var(--color-navy); margin: 0; } .cal-nav h2.cal-t::before, .cal-nav h2.cal-t::after { content: none !important; } .cal { border: 1px solid var(--border-color); border-radius: var(--radius-md); overflow: hidden; } .cal .dow { background: var(--surface-gold); color: var(--color-navy); font-weight: 700; font-size: 13px; padding: 6px 0; } .cal .dow:first-child { background: var(--color-vermilion); color: #fff; } .cal .dow:nth-child(7) { background: var(--color-navy); color: #fff; } .cal .d { align-items: center; text-align: center; gap: 1px; min-height: 92px; background: var(--surface-card); position: relative; } .cal .d .n { font-size: 18px; font-weight: 600; } .cal .d .kk { font-size: 12px; font-weight: 600; } .cal .d .nt .l { display: none; } .cal .d .nt { margin-top: 1px; } .cal .d.past { background: var(--surface-soft); } .cal .d.past > * { opacity: .55; } .cal .d.is-today { background: color-mix(in srgb, var(--color-gold-light) 75%, #fff); outline: 2px solid var(--color-gold); outline-offset: -2px; } .cal .d.is-today::after { content: "今日"; position: absolute; right: 4px; bottom: 4px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--color-gold-dark); color: #fff; font-size: 10.5px; font-weight: 700; } .cal .d[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--color-navy); } .cal-legend .chip { border-radius: 4px; } .kc-lh { margin-top: var(--space-8) !important; } @media (max-width: 1023px) { .kc-top { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 767px) { .cal .d { min-height: 62px; padding: 3px 1px; } .cal .d .n { font-size: 15px; } .cal .d .rk, .cal .d .kk { display: none; } /* スマホは印だけに簡略化 */ .cal .d .nt .s { font-size: 9px; padding: 0 2px; } .cal .d.is-today::after { width: 26px; height: 16px; border-radius: 8px; right: 50%; transform: translateX(50%); bottom: 2px; font-size: 9px; } } @media (max-width: 767px) { .page-band { background-image: url("art/band-960.webp"); } } /* ── お知らせ（Notice）：状態色＋アイコン＋文言の3つで伝える ── */ .notice { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; margin: 0 0 12px; border-radius: var(--radius-md); border: 1px solid; border-left-width: 4px; } .notice .ico { width: var(--icon-md); height: var(--icon-md); flex: none; margin-top: 2px; } .notice b { display: block; } .notice p { margin: 2px 0 0; font-size: var(--text-base-sm); } .notice.is-success { background: var(--color-success-bg); border-color: var(--color-success); color: var(--color-success); } .notice.is-info { background: var(--color-info-bg); border-color: var(--color-info); color: var(--color-info); } .notice.is-warning { background: var(--color-warning-bg); border-color: var(--color-warning); color: var(--color-warning); } .notice.is-error { background: var(--color-error-bg); border-color: var(--color-error); color: var(--color-error); } .notice p { color: var(--color-ink); } /* UIキット見本ページだけで使う並べ方 */ .uk .uk-swatch, .uk .uk-icons { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; } .uk .uk-swatch li, .uk .uk-icons li { margin: 0; display: flex; flex-direction: column; gap: 2px; font-size: 13px; } .uk-sw { display: block; height: 56px; border-radius: var(--radius-md); border: 1px solid var(--border-color); } .uk code { font-size: 12px; } .uk .uk-icons li { align-items: center; padding: 12px 4px; background: var(--surface-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); color: var(--color-navy); } .uk .uk-icons .ico { width: 26px; height: 26px; } .uk-serif { font-family: var(--f-display); font-size: 1.5rem; font-weight: 700; } .uk-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 14px; } .uk-l { min-width: 6.5em; font-size: 13px; color: var(--color-muted); } .btn-primary.is-hover { background: var(--color-vermilion-dark); } .btn-secondary.is-hover { background: var(--color-navy); color: #fff; } .btn.is-focus { box-shadow: var(--focus-ring); } .uk-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); align-items: start; } .uk-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); align-items: start; } .uk-cap { font-size: 12.5px; color: var(--color-muted); } .uk-search { display: flex; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: #fff; overflow: hidden; } .uk-search input { flex: 1; border: 0; padding: 10px 12px; font-size: 16px; min-height: 46px; } .uk-search button { width: 48px; border: 0; background: var(--color-navy); color: #fff; display: grid; place-items: center; } .uk-search .ico { width: 20px; height: 20px; } .uk-zod { max-width: 320px; } .uk-loading { display: flex; align-items: center; gap: 10px; color: var(--color-muted); } .uk-spin { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--border-gold); border-top-color: var(--color-navy); animation: btn-spin 1s linear infinite; } .uk-empty { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border: 1px dashed var(--line-strong); border-radius: var(--radius-md); color: var(--color-muted); } .uk-empty .ico { width: 26px; height: 26px; flex: none; } .uk-empty b { display: block; color: var(--color-ink); } .ad.ad-demo { display: grid !important; place-items: center; min-height: 140px; } .uk-parts { font-size: 13px; } .uk-parts td, .uk-parts th { vertical-align: top; } @media (max-width: 1023px) { .uk-2, .uk-3 { grid-template-columns: minmax(0, 1fr); } } .uk { max-width: 1100px; margin-inline: auto; } .uk .fortune-card-title, .uk .article-card-title { border: 0; padding: 0; } .uk-zod { display: block; } @media (max-width: 767px) { .page-band::before { background: radial-gradient(ellipse 95% 85% at center, rgba(250, 243, 222, .9), rgba(250, 243, 222, .55) 75%, rgba(250, 243, 222, .2)); } } details.toc:not([open]) { padding-bottom: 0; } details.toc:not([open]) > summary { min-height: 52px; } details.toc, details.toc:not([open]) { padding: 0; } details.toc > summary.toc-title { margin: 0; } /* 読みもの一覧：カテゴリーごとに絵を1枚、記事カードは文字だけ */ .cat-sec .cat-head{display:flex;align-items:center;gap:16px;margin:0 0 16px;padding:0 0 12px;border-bottom:1px solid rgba(212,175,55,.45)} .cat-sec .cat-head img{width:120px;height:90px;object-fit:cover;border-radius:10px;flex:none;box-shadow:0 2px 8px rgba(15,39,66,.12)} .cat-sec .cat-head h2{margin:0;border:0;padding:0;font-size:1.5rem} .cat-sec .cat-head h2::before,.cat-sec .cat-head h2::after{display:none} .cat-sec .cat-head small{margin-left:10px;font-size:.85rem;color:var(--color-text-muted,#6B7280);font-weight:400} .article-card.no-img .article-card-body{padding-top:20px} @media (max-width:767px){.cat-sec .cat-head img{width:88px;height:66px}.cat-sec .cat-head h2{font-size:1.25rem}} .cat-sec .article-card.no-img .category-tag{display:none} /* 記事の見出し絵（読みもののカテゴリー別） */ .prose .art-cover{margin:16px 0 24px;border-radius:12px;overflow:hidden;box-shadow:0 2px 10px rgba(15,39,66,.12);border:1px solid rgba(212,175,55,.35)} .prose .art-cover img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover} /* ───── 世界観の地：和紙＋金の瑞雲（見本 page-article / page-list / ui-kit に合わせる） ───── */ body { background-color: var(--paper, #F8F5EC); background-image: var(--img-washi); background-size: 320px 320px; } @media (min-width: 1360px) { body { background-image: var(--img-zuiun-edge), var(--img-zuiun-edge), var(--img-washi); background-size: 220px auto, 220px auto, 320px 320px; background-position: left -150px top 300px, right -160px top 760px, 0 0; background-repeat: repeat-y, repeat-y, repeat; } } .site-header { background-color: rgba(248, 245, 236, .94); background-image: var(--img-washi); } .site-header::before { display: block; left: -78px; top: 4px; width: 170px; height: 64px; background: var(--img-zuiun) no-repeat left top / 170px auto; opacity: .55; } @media (min-width: 1360px) { .site-header::before { left: 0; } } @media (max-width: 767px) { .site-header::before { display: none; } } .site-header::after { display: none; content: ""; position: absolute; right: -30px; bottom: 0; width: 150px; height: 76px; background: var(--img-zuiun) no-repeat right bottom / 150px auto; opacity: .35; pointer-events: none; z-index: -1; transform: scaleX(-1); } /* サイドバーのおすすめ：見本の「人気記事ランキング」と同じく小さな絵つき */ .side .side-list a { padding: 8px 12px; gap: 10px; } .side .side-list img { flex: none; width: 64px; height: 48px; object-fit: cover; border-radius: 6px; border: 1px solid rgba(212,175,55,.35); } .side .side-list a span { line-height: 1.45; } /* 占い一覧の絞り込みタブ（見本 page-list） */ .filter-tabs { display: flex; gap: 0; margin: 0 0 20px; background: var(--surface-card, #fff); border: 1px solid var(--border-color); border-radius: 10px; overflow-x: auto; scrollbar-width: none; } .filter-tabs::-webkit-scrollbar { display: none; } .filter-tabs .ft { flex: 1 0 auto; min-height: var(--tap); padding: 0 18px; border: 0; border-right: 1px solid var(--border-color); background: none; color: var(--color-ink); font: inherit; font-size: var(--text-base-sm); cursor: pointer; white-space: nowrap; } .filter-tabs .ft:last-child { border-right: 0; } .filter-tabs .ft:hover { color: var(--color-vermilion); } .filter-tabs .ft.is-on { background: var(--color-vermilion, #B33B2E); color: #fff; font-weight: 700; } .filter-tabs .ft:focus-visible { outline: none; box-shadow: var(--focus-ring); } .fortune-card[hidden] { display: none !important; } @media (max-width: 767px) { .filter-tabs { flex-wrap: wrap; overflow: visible; } .filter-tabs .ft { flex: 1 1 33.33%; padding: 0 6px; border-bottom: 1px solid var(--border-color); } .filter-tabs .ft:nth-child(3n) { border-right: 0; } .filter-tabs .ft:nth-last-child(-n+3) { border-bottom: 0; } } .filter-tabs { margin-top: 20px; } .zodiac-list .side-all, .side-all, .sec-more a { white-space: nowrap; } /* ═════ ボタン・CTA（チャッピー sheet-buttons.png）═════ 高さ48px統一／角丸 主要CTA12px・他10px／影 0 2px 8px rgba(0,0,0,.08) フォーカス＝紺2px＋金2pxの二重リング／押下＝濃く／無効＝不透明度40%／処理中＝右端にスピナー18px */ :root { --focus-ring: 0 0 0 2px #0F2742, 0 0 0 4px #D4AF37; --btn-shadow: 0 2px 8px rgba(0,0,0,.08); --btn-shadow-hover: 0 4px 14px rgba(0,0,0,.14); --vermilion-press: #8E2A20; --navy-tint: #E6EEF7; } .btn { min-height: 48px; border-radius: 10px; font-size: 16px; padding: 0 22px; box-shadow: var(--btn-shadow); transition: background .15s, box-shadow .15s, color .15s, transform .1s; } .btn-text, .fortune-card .btn-text { box-shadow: none; } .btn-cta, .hd-cta.btn-primary, .hero .birth-form .btn { border-radius: 12px; } .btn-primary, .btn.wide.btn-primary, .form .btn:not(.btn-text):not(.btn-secondary) { background: #B33B2E; border: 0; color: #fff; } .btn-primary:hover, .btn.wide.btn-primary:hover, .form .btn:not(.btn-text):not(.btn-secondary):hover { background: #C1473A; box-shadow: var(--btn-shadow-hover); color: #fff; } .btn-primary:active, .btn.wide.btn-primary:active, .form .btn:not(.btn-text):not(.btn-secondary):active { background: var(--vermilion-press); box-shadow: none; transform: none; } .btn:focus-visible, .icon-button:focus-visible, .filter-tabs .ft:focus-visible, select:focus-visible, input:focus-visible { outline: 0; box-shadow: var(--focus-ring); } .btn-secondary { background: #fff; color: #0F2742; border: 1.5px solid #0F2742; } .btn-secondary:hover { background: var(--navy-tint); color: #0F2742; box-shadow: var(--btn-shadow-hover); } .btn-secondary:active { background: #D3E0EE; } .btn-secondary::after { content: ""; width: 8px; height: 8px; border: solid currentColor; border-width: 2px 2px 0 0; transform: rotate(45deg); margin-left: 4px; flex: none; } .btn-text { min-height: 48px; padding: 0 2px; color: #0F2742; text-decoration: underline; text-decoration-color: rgba(15,39,66,.35); text-underline-offset: 6px; text-decoration-thickness: 1.5px; font-size: 15px; border-radius: 10px; } .btn-text::after { content: ""; width: 8px; height: 8px; border: solid #B33B2E; border-width: 2px 2px 0 0; transform: rotate(45deg); margin-left: 2px; } .btn-text:hover { color: #0F2742; text-decoration-color: #B33B2E; } .btn-text:hover::after { transform: translateX(3px) rotate(45deg); } .btn:disabled, .btn[aria-disabled="true"] { opacity: .4; cursor: not-allowed; box-shadow: none; } .btn-primary:disabled, .btn-primary[aria-disabled="true"] { background: #B33B2E !important; border-color: #B33B2E !important; color: #fff !important; } .btn-secondary:disabled { background: #fff !important; color: #0F2742 !important; border-color: #0F2742 !important; } .btn[aria-busy="true"] { position: relative; padding-right: 48px; opacity: 1; cursor: progress; } .btn[aria-busy="true"] > .ico { display: none; } .btn[aria-busy="true"]::before { content: ""; position: absolute; right: 18px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; animation: btn-spin .8s linear infinite; } .btn-secondary[aria-busy="true"]::before { border-color: rgba(15,39,66,.2); border-top-color: #0F2742; } /* フォーチュンカードのボタン（見本：えんじの細枠） */ .fortune-card .btn-text { text-decoration: none; min-height: 44px; border-radius: 10px; font-size: 15px; } .fortune-card .btn-text::after { border-color: currentColor; } /* アイコンボタン（丸48px） */ .icon-btn-round, .to-top.icon-button { width: 48px; height: 48px; min-width: 48px; border-radius: 50%; background: #fff; border: 1px solid rgba(15,39,66,.16); color: #0F2742; box-shadow: var(--btn-shadow); } .icon-btn-round:hover, .to-top.icon-button:hover { background: var(--navy-tint); } .icon-btn-round:active, .to-top.icon-button:active { background: #0F2742; color: #fff; } @media (max-width: 767px) { .btn-cta, .form .btn.wide { width: 100%; } } /* ═════ フォーム（チャッピー sheet-forms.png）═════ 入力欄48px・角丸10px／ラベル14px Medium／入力文字16px／補足14px 墨70%／エラーは欄の真下にアイコン＋文 */ .form select, .form input[type="text"], .form input[type="search"], .form input[type="number"], .form input[type="time"], .form input[type="date"] { min-height: 48px; border-radius: 10px; border: 1px solid rgba(31,41,55,.22); background-color: #fff; color: #1F2937; font-size: 16px; transition: border-color .15s, box-shadow .15s; } .form select:hover, .form input:hover { border-color: rgba(15,39,66,.45); } .form select:focus, .form input:focus { outline: 0; border-color: #0F2742; box-shadow: var(--focus-ring); } .form .dsel legend { font-family: var(--font-serif); font-size: 18px; font-weight: 700; color: #0F2742; margin-bottom: 6px; } .form .dsel-row label { display: flex; flex-direction: column; gap: 4px; } .form .dsel-row .dl { font-size: 14px; font-weight: 500; color: #1F2937; } .form .dsel select:has(option[value=""]:checked) { color: #6B7280; } .form [aria-invalid="true"], .form select.is-err { border: 1.5px solid #B33B2E !important; background: #fff; } .form .err:not([hidden]) { display: flex; gap: 6px; align-items: center; margin: 6px 0 0; color: #B33B2E; font-weight: 700; font-size: 14px; } .form .err:not([hidden])::before { content: ""; flex: none; width: 16px; height: 16px; border-radius: 50%; background: #B33B2E url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 4v5' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='11.6' r='1.1' fill='%23fff'/%3E%3C/svg%3E") center / 16px no-repeat; } .form > .note { font-size: 14px; color: rgba(31,41,55,.7); margin: 8px 0 10px; } .form label.remember input, .uk-check input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 22px; height: 22px; margin: 0; border: 1.5px solid rgba(31,41,55,.35); border-radius: 5px; background: #fff; display: grid; place-content: center; cursor: pointer; } .form label.remember input:checked, .uk-check input[type="checkbox"]:checked { background: #B33B2E; border-color: #B33B2E; } .form label.remember input:checked::after, .uk-check input[type="checkbox"]:checked::after { content: ""; width: 6px; height: 11px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: translateY(-1px) rotate(45deg); } .form label.remember input:disabled { opacity: .4; } input[type="radio"] { accent-color: #B33B2E; width: 20px; height: 20px; } /* UIキットの状態見本（ボタン・フォーム詳細に合わせる） */ .btn-primary.is-hover { background: #C1473A; box-shadow: var(--btn-shadow-hover); } .btn-primary.is-active { background: var(--vermilion-press); box-shadow: none; } .btn-secondary.is-hover { background: var(--navy-tint); color: #0F2742; } .btn-secondary.is-active { background: #D3E0EE; color: #0F2742; } .btn-text.is-hover { text-decoration-color: #B33B2E; } .icon-btn-round.is-hover { background: var(--navy-tint); } .icon-btn-round.is-active { background: #0F2742; color: #fff; } .is-focus { box-shadow: var(--focus-ring) !important; } .uk-scroll { overflow-x: auto; } .uk-states { border-collapse: collapse; min-width: 980px; background: #fff; } .uk-states th, .uk-states td { padding: 12px 10px; border-bottom: 1px solid var(--border-color); text-align: center; vertical-align: middle; font-size: 13px; } .uk-states thead th { background: var(--surface-gold, #F1E4C4); color: #0F2742; } .uk-states tbody th { text-align: left; color: #0F2742; white-space: nowrap; } .uk-states tbody th small { display: block; font-weight: 400; color: #6B7280; } .uk-states .btn { padding: 0 14px; font-size: 14px; white-space: nowrap; } .uk-states td .icon-btn-round { margin: 0 2px; } .uk-states .btn[aria-busy="true"]:empty { width: 120px; padding: 0; } .uk-states .btn[aria-busy="true"]:empty::before { right: auto; left: 50%; margin-left: -9px; } .uk-states .icon-btn-round[aria-busy="true"] > * { visibility: hidden; } .uk-states .icon-btn-round[aria-busy="true"] { position: relative; } .uk-states .icon-btn-round[aria-busy="true"]::before { content: ""; position: absolute; inset: 14px; border-radius: 50%; border: 2px solid rgba(15,39,66,.2); border-top-color: #0F2742; animation: btn-spin .8s linear infinite; } .icon-btn-round:disabled { opacity: .4; } .uk-checks { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: 12px; } .uk-radio { display: flex; align-items: center; gap: 10px; min-height: 44px; } .btn.btn-primary, .btn.btn-primary:hover, .btn.btn-primary:active { border: 0; } /* ═════ カード（チャッピー sheet-cards.png）═════ 白地・角丸10px（特色カード16px）・内側余白16px・影は控えめ ホバー／フォーカス＝金2pxの枠＋影を少し強く（枠は box-shadow で描き、レイアウトをずらさない） 画像比率：占いメニュー4:3／記事16:9／十二支1:1 */ :root { --card-r: 10px; --card-r-lg: 16px; --card-pad: 16px; --card-shadow: 0 2px 8px rgba(15,39,66,.06); --card-hover: 0 0 0 2px #D4AF37, 0 8px 22px rgba(15,39,66,.12); } .fortune-card, .article-card, .zodiac-card, .rel-card { background: #fff; border: 1px solid rgba(15,39,66,.10); border-radius: var(--card-r); box-shadow: var(--card-shadow); transition: box-shadow .18s, transform .18s; } .fortune-card:hover, .fortune-card:focus-visible, .article-card:hover, .article-card:focus-visible, .zodiac-card:hover, .zodiac-card:focus-visible, .rel-card:hover, .rel-card:focus-visible { box-shadow: var(--card-hover); transform: none; outline: 0; } /* ② 占いメニューカード */ .fortune-card { --fc-pad: var(--card-pad); padding: var(--card-pad); border-top: 1px solid rgba(15,39,66,.10); } .fortune-card .fc-img { width: 100%; margin: 0 0 14px; aspect-ratio: 4 / 3; border-radius: 8px; object-fit: cover; } .fortune-card .fc-tag { font-size: 12px; color: #6B7280; } .fortune-card-title { font-family: var(--font-serif); font-size: 1.2rem; color: #0F2742; margin: 2px 0 6px; } .fortune-card-description { font-size: 14px; color: #374151; line-height: 1.75; margin-bottom: 14px; } .fortune-card .btn-text { margin-top: auto; align-self: stretch; min-height: 44px; border: 0; border-radius: 10px; background: #B33B2E; color: #fff; text-decoration: none; font-weight: 700; box-shadow: 0 2px 6px rgba(179,59,46,.18); } .fortune-card .btn-text::after { border-color: #fff; } .fortune-card:hover .btn-text { background: #C1473A; color: #fff; } .fortune-card:hover .btn-text::after { border-color: #fff; } /* ③ 記事カード */ .article-card { padding: var(--card-pad); display: flex; flex-direction: column; overflow: visible; } .article-card .article-card-image { border-radius: 8px; overflow: hidden; aspect-ratio: 16 / 9; } .article-card:hover img { transform: none; } .article-card .article-card-body { padding: 14px 2px 0; display: flex; flex-direction: column; flex: 1; } .article-card.no-img .article-card-body { padding-top: 4px; } .article-card .category-tag { align-self: flex-start; padding: 3px 10px; border-radius: 6px; font-size: 12px; font-weight: 700; background: color-mix(in srgb, var(--tagc, #0F2742) 12%, #fff) !important; color: var(--tagc, #0F2742) !important; } .category-tag--eto { --tagc: var(--category-eto); } .category-tag--gogyo { --tagc: var(--category-gogyo); } .category-tag--kyusei { --tagc: var(--category-kyusei); } .category-tag--koyomi { --tagc: #8A6A1E; } .category-tag--western { --tagc: var(--category-western); } .category-tag--indian { --tagc: var(--category-indian); } .article-card-title { font-family: var(--font-serif); font-size: 1.12rem; color: #0F2742; margin: 10px 0 6px; } .article-card-description { font-size: 14px; color: #374151; } .article-card-meta { margin-top: auto; padding-top: 10px; display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: #6B7280; } .article-card-meta::after { content: ""; width: 18px; height: 12px; background: linear-gradient(#0F2742, #0F2742) left center / 14px 2px no-repeat; -webkit-mask: none; position: relative; } .article-card-meta::after { background: none; width: 10px; height: 10px; border: solid #0F2742; border-width: 2px 2px 0 0; transform: rotate(45deg); margin-right: 4px; } .article-card:hover .article-card-meta::after { border-color: #B33B2E; } /* ① 十二支カード（トップの十二支） */ .zodiac-item .zodiac-link { display: flex; flex-direction: column; align-items: center; padding: 14px 8px 12px; background: #fff; border: 1px solid rgba(15,39,66,.10); border-radius: var(--card-r); box-shadow: var(--card-shadow); text-decoration: none; transition: box-shadow .18s; } .zodiac-item .zodiac-link:hover, .zodiac-item .zodiac-link:focus-visible { box-shadow: var(--card-hover); outline: 0; } .zodiac-item .zodiac-image { width: 86%; max-width: 132px; aspect-ratio: 1; border: 0; box-shadow: 0 0 0 2px rgba(212,175,55,.55); } .zodiac-item .zodiac-kanji { font-family: var(--font-serif); font-size: 1.75rem; color: #0F2742; margin-top: 10px; line-height: 1.2; } .zodiac-item .zodiac-reading { font-size: 12px; color: #6B7280; } /* ④ 関連記事カード（横長） */ .rel-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } @media (max-width: 767px) { .rel-cards { grid-template-columns: 1fr; } } .rel-card { display: grid; grid-template-columns: 112px 1fr; gap: 14px; align-items: center; padding: 12px; text-decoration: none; color: #1F2937; } .rel-card img { width: 112px; height: 84px; object-fit: cover; border-radius: 8px; } .rel-card .category-tag { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 700; background: color-mix(in srgb, var(--tagc, #0F2742) 12%, #fff); color: var(--tagc, #0F2742); } .rel-card b { display: block; margin: 4px 0 2px; font-family: var(--font-serif); font-size: 15px; line-height: 1.5; color: #0F2742; } .rel-card small { display: flex; justify-content: space-between; align-items: center; color: #6B7280; font-size: 12px; } .rel-card small::after { content: ""; width: 8px; height: 8px; border: solid #0F2742; border-width: 2px 2px 0 0; transform: rotate(45deg); margin-right: 4px; } /* ⑤ 今日の暦カード（紺・金の罫） */ .today-card { background: #0F2742; border: 1px solid rgba(212,175,55,.55); border-radius: var(--card-r); color: #fff; box-shadow: var(--card-shadow); position: relative; } .today-card::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26px; background: repeating-radial-gradient(circle at 50% 100%, transparent 0 6px, rgba(212,175,55,.28) 6px 7px, transparent 7px 10px) 0 0 / 20px 26px repeat-x; pointer-events: none; } .tc-top { background: transparent; text-align: center; padding: 18px 16px 12px; } .tc-h { font-size: 1.1rem; color: #fff; } .tc-main { justify-content: center; padding-bottom: 12px; border-bottom: 1px solid rgba(212,175,55,.5); } .tc-pills { display: block; padding: 4px 16px 30px; } .tc-pills .ts-p { flex-direction: row; justify-content: flex-start; gap: 16px; padding: 10px 2px; border-right: 0; border-bottom: 1px dashed rgba(212,175,55,.35); text-align: left; } .tc-pills .ts-p:last-child { border-bottom: 0; } .tc-pills .ts-p i { width: 5em; color: #E7CF86; font-size: 13px; } .tc-pills .ts-p i::before { content: "◈"; margin-right: 6px; color: #D4AF37; font-size: 12px; } .tc-pills .ts-p b { color: #fff; font-size: 15px; } .tc-more { position: relative; z-index: 1; border-top: 1px solid rgba(212,175,55,.35); color: #E7CF86; background: rgba(255,255,255,.03); } .tc-more::after { color: #E7CF86; } .tc-more:hover { color: #fff; } /* ⑥ 占い結果の要約カード */ .res-summary { background: #fff; border: 1px solid rgba(15,39,66,.10); border-radius: var(--card-r); box-shadow: var(--card-shadow); padding: 20px; } .res-summary .rs-desc { background: #FBF4E2; border-left: 3px solid #D4AF37; border-radius: 6px; padding: 12px 14px; color: #1F2937; } /* 旧来の .btn ghost（次の占いへの導線）もセカンダリーと同じ見た目に */ .btn.ghost { background: #fff; color: #0F2742; border: 1.5px solid #0F2742; box-shadow: var(--btn-shadow); } .btn.ghost:hover { background: var(--navy-tint); color: #0F2742; } .btn.ghost:active { background: #D3E0EE; } .prose a.btn:not(.ghost):not(.btn-secondary):not(.btn-text), .sec a.btn:not(.ghost):not(.btn-secondary):not(.btn-text) { background: #B33B2E; color: #fff; border: 0; text-decoration: none; } .prose a.btn:not(.ghost):not(.btn-secondary):not(.btn-text):hover, .sec a.btn:not(.ghost):not(.btn-secondary):not(.btn-text):hover { background: #C1473A; } .today-card::after { content: none; } .tc-pills { position: relative; } .tc-pills::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 22px; background: repeating-radial-gradient(circle at 50% 100%, transparent 0 6px, rgba(212,175,55,.25) 6px 7px, transparent 7px 10px) 0 0 / 20px 22px repeat-x; pointer-events: none; } .tc-pills .ts-p i { width: 6.5em; flex: none; white-space: nowrap; } .tc-top::after { width: 92px; height: 52px; right: -8px; top: -4px; background-size: 92px auto; opacity: .7; } /* ═════ ナビゲーション（チャッピー sheet-nav.png）═════ */ /* PCヘッダー72px／現在地は紺の太字＋下の金線／ホバーは薄い金 */ @media (min-width: 1024px) { .site-header .header-inner, .site-header > .wrap { min-height: 72px; } } .desktop-nav a { color: #1F2937; font-size: 16px; border-bottom: 3px solid transparent; border-radius: 6px 6px 0 0; transition: background .15s, color .15s; } .desktop-nav a:hover { background: rgba(212,175,55,.14); color: #0F2742; } .desktop-nav a[aria-current] { color: #0F2742; font-weight: 700; border-bottom-color: #D4AF37; background: none; } /* スマホヘッダー56px（固定しない）・丸いアイコンボタン */ @media (max-width: 767px) { .site-header .header-inner, .site-header > .wrap { min-height: 56px; } .site-header .hd-search.icon-button, .site-header .menu-btn.icon-button { width: 44px; height: 44px; min-width: 44px; padding: 0; border-radius: 50%; background: #fff; border: 1px solid rgba(15,39,66,.16); color: #0F2742; } .site-header .hd-search.icon-button span, .site-header .hd-search .hs-t { display: none; } } /* メニュー：右からスライドイン（幅280px・各項目48px・区切り線 #E5E1D6） */ .site-header .gnav { position: fixed !important; top: 0 !important; right: 0 !important; left: auto !important; bottom: 0; width: min(280px, 86vw); max-width: none !important; height: 100dvh; padding: 0 16px 24px; overflow-y: auto; background: #FBF8F1 !important; border: 0 !important; border-left: 1px solid #E5E1D6 !important; border-radius: 0 !important; box-shadow: -12px 0 32px rgba(15,39,66,.18); z-index: var(--z-drawer, 1010); } .site-header .gnav.open { display: flex; animation: gnav-in .22s ease-out; } @keyframes gnav-in { from { transform: translateX(100%); } to { transform: none; } } @media (prefers-reduced-motion: reduce) { .site-header .gnav.open { animation: none; } } body.menu-open::after { content: ""; position: fixed; inset: 0; background: rgba(15,39,66,.38); z-index: calc(var(--z-drawer, 1010) - 1); } .gnav-h { display: flex; align-items: center; justify-content: space-between; min-height: 56px; margin: 0 -16px 8px; padding: 0 8px 0 16px; border-bottom: 1px solid #E5E1D6; position: sticky; top: 0; background: #FBF8F1; z-index: 1; } .gnav-logo { display: flex; align-items: center; gap: 8px; font-family: var(--font-serif); font-weight: 700; font-size: 18px; color: #0F2742; } .gnav-x { width: 44px; height: 44px; padding: 0; border-radius: 50%; } .site-header .gnav a { min-height: 48px; padding: 8px 4px; border-bottom: 1px solid #E5E1D6; justify-content: center; position: relative; padding-right: 24px; } .site-header .gnav > a::after { content: ""; position: absolute; right: 8px; top: 50%; width: 7px; height: 7px; margin-top: -4px; border: solid #9CA3AF; border-width: 1.5px 1.5px 0 0; transform: rotate(45deg); } .site-header .gnav a b { font-weight: 500; font-size: 16px; color: #1F2937; } .site-header .gnav a[aria-current] b { color: #0F2742; font-weight: 700; } .site-header .gnav a[aria-current] { box-shadow: inset 3px 0 0 #D4AF37; padding-left: 12px; } .site-header .gnav .gquick { margin: 8px 0; } /* パンくず：14px・区切り「›」12px #9CA3AF・先頭は家のアイコン */ .breadcrumb.crumbs { font-size: 14px; padding-block: 12px 0; } .breadcrumb.crumbs li + li::before { content: "" !important; display: inline-block; width: 6px; height: 6px; margin: 0 10px 2px 8px; border: solid #9CA3AF; border-width: 1.5px 1.5px 0 0; transform: rotate(45deg); vertical-align: middle; } .breadcrumb.crumbs li:first-child a::before { content: ""; display: inline-block; width: 15px; height: 15px; margin: 0 5px 3px 0; vertical-align: middle; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-7 9 7'/%3E%3Cpath d='M5 10v10h14V10'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-7 9 7'/%3E%3Cpath d='M5 10v10h14V10'/%3E%3C/svg%3E") center / contain no-repeat; } .breadcrumb.crumbs a { color: #1F2937; text-decoration: none; } .breadcrumb.crumbs a:hover { color: #B33B2E; text-decoration: underline; } .breadcrumb.crumbs [aria-current] { color: #6B7280; } /* 目次：見出し48px・16px／リスト15px・区切り #E5E1D6・角丸10px */ details.toc { border-radius: 10px; border: 1px solid #E5E1D6; border-top: 1px solid #E5E1D6; box-shadow: 0 2px 8px rgba(15,39,66,.05); } details.toc > summary.toc-title { min-height: 48px; font-size: 16px; } details.toc li a { font-size: 15px; border-bottom-color: #E5E1D6; } /* スマホ下部ナビ：現在地は上の金線4px＋太字（紺） */ .bnav a { position: relative; color: #6B7280; } .bnav a[aria-current] { color: #0F2742; font-weight: 700; } .bnav a[aria-current]:not(.nav-main)::before { content: ""; position: absolute; top: 0; left: 22%; right: 22%; height: 4px; border-radius: 0 0 3px 3px; background: #D4AF37; } .bnav a:active { background: rgba(212,175,55,.12); } /* ページトップ：48pxの紺の丸／ホバーで金のリング */ .to-top.icon-button { width: 48px; height: 48px; background: #0F2742; color: #fff; border: 0; box-shadow: 0 4px 12px rgba(15,39,66,.25); } .to-top.icon-button:hover { background: #0F2742; box-shadow: 0 0 0 2px #F8F5EC, 0 0 0 4px #D4AF37; } .to-top.icon-button .ico { stroke: #fff; color: #fff; } body.menu-open::after { z-index: 999; } body.menu-open .mobile-bottom-nav, body.menu-open .to-top { visibility: hidden; } .breadcrumb.crumbs li:not(:last-child)::after { content: none; } /* メニュー内「よく使う」は小さめの札に */ .site-header .gnav .gquick { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .site-header .gnav .gquick .gq-h { grid-column: 1 / -1; margin: 4px 0 2px; font-size: 12px; } .site-header .gnav .gquick a { min-height: 40px; padding: 6px 10px; border: 1px solid #E5E1D6; border-radius: 8px; background: #fff; font-size: 13px; font-weight: 500; line-height: 1.35; justify-content: center; } .site-header .gnav .gquick a::after { content: none; } /* ═════ 記事の部品（チャッピー sheet-content.png）═════ */ .prose h3, main > h3:not([class]) { margin: 28px 0 12px; padding-bottom: 6px; font-family: var(--font-serif); font-size: 1.2rem; color: #0F2742; border-bottom: 1px solid rgba(212,175,55,.7); } .prose ul:not([class]) { list-style: none; padding-left: 0; } .prose ul:not([class]) > li { position: relative; padding-left: 20px; margin: 6px 0; } .prose ul:not([class]) > li::before { content: ""; position: absolute; left: 4px; top: .78em; width: 7px; height: 7px; border-radius: 50%; background: #0F2742; } .prose ol:not([class]):not(details.toc ol) { list-style: none; padding-left: 0; counter-reset: pol; } .prose ol:not([class]):not(details.toc ol) > li { position: relative; padding-left: 34px; margin: 8px 0; counter-increment: pol; } .prose ol:not([class]):not(details.toc ol) > li::before { content: counter(pol); position: absolute; left: 0; top: .2em; width: 24px; height: 24px; border-radius: 50%; background: #0F2742; color: #fff; font-size: 13px; font-weight: 700; display: grid; place-items: center; line-height: 1; } .prose table:not([class]) { border-collapse: separate; border-spacing: 0; width: 100%; border: 1px solid #E5E1D6; border-radius: 10px; overflow: hidden; background: #fff; font-size: 15px; } .prose table:not([class]) th { background: #F1EBDD; color: #0F2742; font-weight: 700; } .prose table:not([class]) th, .prose table:not([class]) td { padding: 10px 12px; border-bottom: 1px solid #E5E1D6; text-align: left; } .prose table:not([class]) tr:last-child td { border-bottom: 0; } .prose table:not([class]) td.k { background: #FAF6EC; font-weight: 700; color: #0F2742; white-space: nowrap; } .prose .tbl-wrap, .prose .scroll { overflow-x: auto; } .prose blockquote { position: relative; margin: 20px 0; padding: 16px 18px 16px 52px; background: #EEF3F8; border-radius: 10px; color: #1F2937; } .prose blockquote::before { content: "“"; position: absolute; left: 14px; top: 0; font-family: var(--font-serif); font-size: 48px; line-height: 1.2; color: #D4AF37; } .prose strong { background: linear-gradient(transparent 62%, rgba(212,175,55,.35) 62%); font-weight: 700; } /* 補足ボックス（ポイント＝紺系／注意＝えんじ系）。p.note は控えめな注記 */ .point, .callout-info { margin: 20px 0; padding: 14px 16px 14px 46px; position: relative; background: #EEF4FB; border: 1px solid #C9DAEE; border-radius: 10px; } .point::before, .callout-info::before { content: "i"; position: absolute; left: 14px; top: 15px; width: 20px; height: 20px; border-radius: 50%; background: #2563A8; color: #fff; font: 700 13px/20px var(--font-serif); text-align: center; } .caution, .callout-warn { margin: 20px 0; padding: 14px 16px 14px 46px; position: relative; background: #FDF1EF; border: 1px solid #F0C6C0; border-radius: 10px; color: #7A2318; } .caution::before, .callout-warn::before { content: "!"; position: absolute; left: 14px; top: 15px; width: 20px; height: 20px; border-radius: 50%; background: #B33B2E; color: #fff; font: 700 13px/20px sans-serif; text-align: center; } /* よくある質問・用語の説明（アコーディオン：＋／－） */ .faq details, details.glossary { margin: 8px 0; background: #fff; border: 1px solid #E5E1D6; border-radius: 10px; } .faq summary, details.glossary > summary { position: relative; list-style: none; min-height: 48px; display: flex; align-items: center; padding: 10px 48px 10px 16px; cursor: pointer; font-weight: 700; color: #0F2742; } .faq summary::-webkit-details-marker, details.glossary > summary::-webkit-details-marker { display: none; } .faq summary::after, details.glossary > summary::after { content: ""; position: absolute; right: 16px; top: 50%; width: 14px; height: 14px; margin-top: -7px; background: linear-gradient(#0F2742, #0F2742) center / 14px 2px no-repeat, linear-gradient(#0F2742, #0F2742) center / 2px 14px no-repeat; transition: transform .15s; } .faq details[open] > summary::after, details.glossary[open] > summary::after { background: linear-gradient(#B33B2E, #B33B2E) center / 14px 2px no-repeat; } .faq details[open] > summary, details.glossary[open] > summary { border-bottom: 1px solid #E5E1D6; } .faq details > p, .faq details > div { margin: 0; padding: 12px 16px 14px; } .faq summary::before { content: "Q"; flex: none; margin-right: 10px; width: 24px; height: 24px; border-radius: 50%; background: #B33B2E; color: #fff; font: 700 13px/24px var(--font-serif); text-align: center; } .faq summary:focus-visible, details.glossary > summary:focus-visible { outline: 0; box-shadow: var(--focus-ring); border-radius: 10px; } /* 五行バランスの棒（見本：丸い五行の印＋名前＋棒＋％） */ .mei-col .bars { gap: 10px; margin: 10px 0 14px; } .bar { grid-template-columns: 56px minmax(0,1fr) 64px; font-size: 15px; } .bar b { display: flex; align-items: center; gap: 8px; } .bar b::before { content: ""; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--ec); background: color-mix(in srgb, var(--ec) 14%, #fff); flex: none; } .bar b a { color: #1F2937; text-decoration: none; font-weight: 700; } .bar .tr { height: 10px; border-radius: 5px; background: #ECE8DF; overflow: hidden; } .bar .fl { border-radius: 5px; } .bar span { text-align: right; font-weight: 700; color: #1F2937; } .bar span small { display: block; font-size: 11px; font-weight: 400; color: #6B7280; } /* 次のアクション：主要ボタン＋セカンダリーを縦に */ .next-acts, .next-actions { display: grid; gap: 10px; } .bar { grid-template-columns: 30px minmax(0,1fr) 78px; } .bar b::before { content: none; } .bar b a { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--ec); color: #fff; font-family: var(--font-serif); font-size: 14px; } .bar span { display: flex; align-items: baseline; justify-content: flex-end; gap: 4px; } .bar span small { display: inline; } /* ═════ デザインシステム v1.1 の決定に合わせる（見本と食い違う所は v1.1 を優先）═════ */ :root { /* フォーカス：青系3pxリング＋背景との間隔 */ --focus-ring: 0 0 0 3px var(--focus-gap-color, #fff), 0 0 0 6px var(--focus-color, #175CD3); /* 重なり順 */ --z-header: 20; --z-drawer: 30; --z-bottom-nav: 40; --z-to-top: 10; /* 状態色（五行色・カテゴリ色とは別管理） */ --color-success: #17633F; --color-success-bg: #EEF8F1; --color-warning: #795000; --color-warning-bg: #FFF7E0; --color-error: #A61B1B; --color-error-bg: #FFF1F0; --color-info: #185A90; --color-info-bg: #EFF6FF; --card-hover: 0 0 0 2px #D4AF37; } /* カードのホバーは枠の変化だけ（浮き上がり・影の強調・画像の拡大はしない） */ .fortune-card:hover, .article-card:hover, .zodiac-card:hover, .rel-card:hover, .zodiac-item .zodiac-link:hover { box-shadow: var(--card-shadow), var(--card-hover); transform: none; } .fortune-card:focus-visible, .article-card:focus-visible, .rel-card:focus-visible, .zodiac-item .zodiac-link:focus-visible { box-shadow: var(--focus-ring); } .btn-primary:hover, .btn.wide.btn-primary:hover, .btn-secondary:hover { box-shadow: var(--btn-shadow); } /* 金の小さな文字は使わない（小見出しは薄墨か紺） */ .section-heading-kicker { color: #6B7280 !important; } .site-header .gnav .gq-h, .site-header .gnav .gquick .gq-h { color: #6B7280; } /* スマホのメニュー：ヘッダー直下に通常フローで開く（覆いかぶさるパネルにしない） */ .site-header .gnav { position: static !important; width: auto; height: auto; max-width: none !important; padding: 8px 16px 16px; box-shadow: none; border: 0 !important; border-top: 1px solid #E5E1D6 !important; border-radius: 0 !important; overflow: visible; animation: none !important; background: #FBF8F1 !important; flex-basis: 100%; } @media (min-width: 1024px) { .site-header .gnav { max-width: 760px !important; margin-left: auto; border: 1px solid #E5E1D6 !important; border-radius: 0 0 10px 10px !important; } } .gnav-h { display: none; } body.menu-open::after { content: none; } body.menu-open .mobile-bottom-nav, body.menu-open .to-top { visibility: visible; } /* ページトップ：本文末尾（フッター内）の通常フロー。画面右下に固定しない */ .to-top, .to-top.icon-button, .to-top.show { position: static !important; display: inline-grid !important; opacity: 1 !important; visibility: visible !important; transform: none !important; } /* 固定UI：スマホは下部ナビだけ。占い入力・結果と検索のページでは下部ナビも出さない */ body.page--fortune .mobile-bottom-nav, body.page--search .mobile-bottom-nav { display: none !important; } @media (max-width: 767px) { body.page--fortune, body.page--search { padding-bottom: 0; } } @media (max-width: 1023px) { .site-header { position: static !important; } } @media (min-width: 1024px) { .site-header { position: sticky !important; top: 0; } } .site-footer > .to-top { display: flex !important; width: 48px; margin: 0 max(16px, calc((100% - var(--container, 1200px)) / 2)) 0 auto; position: relative !important; top: -24px; z-index: 1; } /* ═════ フッター（チャッピー sheet-brand.png）═════ 紺 #0F2742／文字 #F8F5EC／リンク #E5E1D6・ホバーは金の下線／区切り rgba(212,175,55,.3) スマホは各列をアコーディオン（＋／－）に */ .site-footer { color: #F8F5EC; padding-top: 48px; } .site-footer .ft-col > summary { list-style: none; cursor: default; pointer-events: none; font-family: var(--font-serif); font-size: 16px; font-weight: 700; color: #F8F5EC; padding-bottom: 8px; margin-bottom: 10px; border-bottom: 1px solid rgba(212,175,55,.3); } .site-footer .ft-col > summary::-webkit-details-marker { display: none; } .site-footer .ft-col ul { list-style: none; margin: 0; padding: 0; } .site-footer .ft-col li { margin: 0; border: 0; } .site-footer .ft-col li a { display: inline-block; min-height: 0; padding: 4px 0; color: #E5E1D6; font-size: 15px; line-height: 1.6; text-decoration: none; border: 0; } .site-footer .ft-col li a:hover { color: #F8F5EC; text-decoration: underline; text-decoration-color: #D4AF37; text-underline-offset: 4px; } .site-footer .ft-eto { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; margin-bottom: 10px !important; padding-bottom: 10px !important; border-bottom: 1px dashed rgba(212,175,55,.22); } .site-footer .footer-bottom { border-top: 1px solid rgba(212,175,55,.3); color: #E5E1D6; padding-bottom: 32px; } @media (max-width: 767px) { .site-footer { padding-top: 32px; } .site-footer .footer-grid { gap: 0; } .site-footer .ft-col { border-bottom: 1px solid rgba(212,175,55,.3); } .site-footer .ft-col:first-of-type { border-top: 1px solid rgba(212,175,55,.3); margin-top: 16px; } .site-footer .ft-col > summary { pointer-events: auto; cursor: pointer; display: flex; justify-content: space-between; align-items: center; min-height: 48px; margin: 0; padding: 0 4px; border: 0; } .site-footer .ft-col > summary::after { content: ""; width: 14px; height: 14px; background: linear-gradient(#F8F5EC, #F8F5EC) center / 14px 1.5px no-repeat, linear-gradient(#F8F5EC, #F8F5EC) center / 1.5px 14px no-repeat; } .site-footer .ft-col[open] > summary::after { background: linear-gradient(#F8F5EC, #F8F5EC) center / 14px 1.5px no-repeat; } .site-footer .ft-col > ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; padding: 0 4px 12px 16px; } .site-footer .ft-col li a { min-height: 40px; display: flex; align-items: center; font-size: 14px; } } .site-footer .ft-eto li a { width: auto; height: auto; display: inline-flex; place-items: initial; border: 0; border-radius: 0; font-family: inherit; white-space: nowrap; } .site-footer .ft-eto li a { font-size: 15px; } .header-actions .hd-search { white-space: nowrap; min-width: 88px; } @media (max-width: 767px) { .header-actions .hd-search { min-width: 44px; } } @media (min-width: 1024px) { .site-footer .footer-grid { grid-template-columns: 1.3fr 1fr 1.2fr 1fr; gap: 40px; } } /* v1.1 素材（和紙・瑞雲）差し替え：仮置きSVGを置き換え */ :root { --img-washi: url("art/washi.webp"); --img-zuiun: url("art/kumo-a.webp"); --img-kumo1: url("art/kumo-b.webp"); --img-zuiun-edge: url("art/kumo-edge.webp"); } body { background-size: 512px 512px; } @media (min-width: 1360px) { body { background-size: 150px auto, 150px auto, 512px 512px; background-position: left -60px top 320px, right -64px top 900px, 0 0; } } .site-header { background-size: 512px 512px; } .site-header::before { width: 180px; height: 60px; background-size: 180px auto; opacity: .4; } .prose h2::before, main > h2::before, .h-cloud::before { width: 48px; height: 18px; } /* 和紙は本文の読みやすさを優先して淡く重ねる */ body { background-image: linear-gradient(rgba(248,245,236,.55), rgba(248,245,236,.55)), var(--img-washi); background-size: auto, 512px 512px; background-repeat: repeat; } @media (min-width: 1360px) { body { background-image: var(--img-zuiun-edge), var(--img-zuiun-edge), linear-gradient(rgba(248,245,236,.55), rgba(248,245,236,.55)), var(--img-washi); background-size: 150px auto, 150px auto, auto, 512px 512px; background-position: left -60px top 320px, right -64px top 900px, 0 0, 0 0; background-repeat: repeat-y, repeat-y, repeat, repeat; } } .site-header { background-image: linear-gradient(rgba(248,245,236,.7), rgba(248,245,236,.7)), var(--img-washi); background-size: auto, 512px 512px; } /* ヒーロー下の説明文：絵の上でも読めるよう和紙色の下地を敷く */ .hero-about { background: rgba(248,245,236,.9); border-radius: 8px; padding: 6px 12px; color: #1F2937; } /* ===== 見出しカード（hero-k）の作り直し：白一色をやめ、和紙の金地＋瑞雲。v1.1の色に合わせる ===== */ .page-top { display: block; } .hero-k { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(115deg, #FFFDF7 0%, #FBF6E8 46%, #F2E4BC 100%); border: 1px solid #E2CF95; border-top: 4px solid #D4AF37; border-radius: 16px; box-shadow: 0 8px 24px rgba(15, 39, 66, .08); grid-template-columns: auto minmax(0, 1fr); gap: 16px 36px; padding: 32px 40px; } .hero-k:not(:has(.eto-art)) { padding-right: 40px; } .hero-k::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--img-washi) 0 0 / 512px 512px; opacity: .35; mix-blend-mode: multiply; pointer-events: none; } .hero-k::after { content: ""; display: block; position: absolute; z-index: -1; right: -30px; bottom: -18px; top: auto; left: auto; width: 360px; height: 120px; background: var(--img-zuiun) right bottom / contain no-repeat; opacity: .55; -webkit-mask-image: none; mask-image: none; pointer-events: none; } .hero-k .big-k { justify-content: center; padding-right: 32px; border-right: 1px solid rgba(212, 175, 55, .45); } .hero-k .tz { background: #FFFDF7; border: 1px solid #B08D2A; color: #0F2742; border-radius: 4px; } .hero-k h1 { color: #0F2742; font-size: clamp(24px, 3vw, 34px); line-height: 1.35; word-break: auto-phrase; overflow-wrap: break-word; text-wrap: balance; } .hero-k .yomi { color: #6B5418; font-weight: 600; letter-spacing: .08em; } .hero-k .hero-lead, .hero-k p { color: #1F2937; } .hero-k:has(.hk-art) { grid-template-columns: auto minmax(0, 1fr) minmax(200px, 280px); } .hero-k:has(.hk-art)::after { right: auto; left: 30%; opacity: .35; } .hk-art { margin: 0; align-self: stretch; border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 1px #D4AF37, 0 0 0 4px #FFFDF7, 0 0 0 5px rgba(212, 175, 55, .6); } .hk-art img { display: block; width: 100%; height: 100%; object-fit: cover; } @media (max-width: 1023px) { .hero-k { padding: 28px; } .hero-k:has(.hk-art) { grid-template-columns: auto minmax(0, 1fr); } .hk-art { grid-column: 1 / -1; aspect-ratio: 16 / 9; } } @media (max-width: 600px) { .hero-k, .hero-k:has(.hk-art) { grid-template-columns: 1fr; padding: 22px 20px; gap: 12px; } .hero-k .big-k { justify-content: flex-start; padding-right: 0; border-right: 0; padding-bottom: 12px; border-bottom: 1px solid rgba(212, 175, 55, .45); } .hero-k::after { width: 220px; height: 74px; right: -20px; } } /* 絵つきの見出し：本文の幅では3列にすると見出しが縦に詰まるため、絵は下に横長で置く */ .hero-k:has(.hk-art) { grid-template-columns: auto minmax(0, 1fr); } .hero-k:has(.hk-art) .hk-art { grid-column: 1 / -1; aspect-ratio: 21 / 8; } .hero-k:has(.hk-art) .hk-art img { object-position: center 40%; } @media (max-width: 600px) { .hero-k:has(.hk-art) { grid-template-columns: 1fr; } .hero-k:has(.hk-art) .hk-art { aspect-ratio: 16 / 10; } } /* ===== トップ：陰陽五行の欄（パネル＋五行カード） ===== */ .gogyo-panel { position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: minmax(280px, 400px) minmax(0, 1fr); gap: 32px 48px; align-items: center; padding: 40px; border-radius: 16px; border: 1px solid #E2CF95; border-top: 4px solid #D4AF37; background: linear-gradient(115deg, #FFFDF7 0%, #FBF6E8 55%, #F2E4BC 100%); box-shadow: 0 8px 24px rgba(15, 39, 66, .08); } .gogyo-panel::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--img-washi) 0 0 / 512px 512px; opacity: .35; mix-blend-mode: multiply; } .gogyo-panel::after { content: ""; position: absolute; z-index: -1; left: -40px; bottom: -20px; width: 380px; height: 126px; background: var(--img-zuiun) left bottom / contain no-repeat; opacity: .4; } .gg-fig { margin: 0; padding: 16px; background: rgba(255, 253, 247, .85); border-radius: 50%; aspect-ratio: 1; display: grid; place-items: center; box-shadow: 0 0 0 1px rgba(212, 175, 55, .5), 0 0 0 8px rgba(255, 253, 247, .6), 0 0 0 9px rgba(212, 175, 55, .35); } .gg-fig svg { width: 100%; height: auto; } .gg-fig figcaption { font-size: 13px; } .gg-lead { margin: 0 0 20px; font-size: 16px; line-height: 1.9; color: #1F2937; } .gg-cards { display: grid; grid-template-columns: 1fr; gap: 8px; } .gg-card { display: grid; grid-template-columns: 44px 7.5em minmax(0, 1fr); align-items: center; gap: 14px; min-height: 60px; padding: 8px 16px 8px 8px; background: #FFFDF7; border: 1px solid #E5E1D6; border-left: 4px solid var(--ec, #D4AF37); border-radius: 10px; color: #1F2937; text-decoration: none; transition: border-color .15s, background-color .15s; } .gg-card:hover { border-color: #D4AF37; border-left-color: var(--ec, #D4AF37); background: #fff; } .gg-card:focus-visible { outline: 3px solid #185A90; outline-offset: 2px; } .gg-card .mon.sm { width: 44px; height: 44px; font-size: 22px; margin: 0; } .gg-card b { font-family: var(--f-display); font-size: 18px; color: #0F2742; display: flex; flex-direction: column; line-height: 1.25; } .gg-card b small { font-family: var(--f-body, inherit); font-size: 12.5px; font-weight: 600; color: #6B5418; letter-spacing: .04em; } .gg-card .gg-img { font-size: 14px; line-height: 1.6; color: #4B5563; } @media (max-width: 1023px) { .gogyo-panel { grid-template-columns: 1fr; padding: 28px; } .gg-fig { max-width: 340px; justify-self: center; width: 100%; } } @media (max-width: 600px) { .gogyo-panel { padding: 20px 16px; } .gg-card { grid-template-columns: 40px minmax(0, 1fr); } .gg-card .gg-img { grid-column: 2; font-size: 13px; } .gg-card .mon.sm { width: 40px; height: 40px; grid-row: span 2; } } /* ===== 結果の見出しラベル（【見本】／前回の入力）：大きな太字の見出しをやめ、小さなお知らせ表示に ===== */ .result-wrap > .sample-label { display: flex; align-items: flex-start; gap: 8px; width: fit-content; max-width: 100%; margin: 0 0 16px; padding: 8px 14px; font-family: var(--f-body, inherit); font-size: 14px; font-weight: 600; line-height: 1.6; letter-spacing: 0; color: #185A90; background: #EEF4FA; border: 1px solid #C9DBEC; border-radius: 8px; } .result-wrap > .sample-label::before { content: "i"; flex: none; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; background: #185A90; color: #fff; font: 700 12px/18px Georgia, serif; text-align: center; display: block; } .result-wrap > .sample-label::after { display: none !important; } .result-wrap:has(.is-sample) > .sample-label { color: #4B5563; background: #F3F1EA; border-color: #E5E1D6; } .result-wrap:has(.is-sample) > .sample-label::before { background: #6B7280; } .gg-card .mon { display: grid; place-items: center; border-radius: 50%; font-family: var(--f-display); font-weight: 800; color: #fff; background: var(--ec, #0F2742); box-shadow: 0 0 0 2px #FFFDF7, 0 0 0 3px rgba(212, 175, 55, .7); } .gg-card b { font-size: 15px; } /* 絵が届くまでの文字の札（同じ絵を使い回さないための仮表示） */ .art-ph { display: grid; place-items: center; aspect-ratio: 16 / 9; position: relative; overflow: hidden; isolation: isolate; background: radial-gradient(120% 90% at 50% 110%, #1B3A5E 0%, #0F2742 60%); } .art-ph::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--img-zuiun) center 120% / 80% auto no-repeat; opacity: .35; } .art-ph::after { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(212, 175, 55, .55); border-radius: 8px; pointer-events: none; } .art-ph span { font-family: var(--f-display); font-weight: 800; font-size: clamp(28px, 4vw, 44px); letter-spacing: .3em; padding-left: .3em; color: #E8CF7A; } .rel-card .rc-ph { flex: none; width: 96px; aspect-ratio: 4 / 3; border-radius: 8px; } .rel-card .rc-ph span { font-size: 15px; letter-spacing: .1em; padding-left: .1em; } .rel-card .rc-ph::after { inset: 4px; border-radius: 5px; } .side .side-list .th-ph { flex: none; width: 64px; height: 48px; border-radius: 6px; display: grid; place-items: center; background: #0F2742; color: #E8CF7A; font-family: var(--f-display); font-weight: 700; font-size: 14px; box-shadow: inset 0 0 0 1px rgba(212, 175, 55, .55); } .fortune-card .fc-img.art-ph { aspect-ratio: 4 / 3; border-radius: 10px; } /* 見出しが長い干支カード型ヒーロー：大きな字を上、見出しを下に */ .hero-k.hk-long { grid-template-columns: 1fr; gap: 14px; } .hero-k.hk-long .big-k { justify-content: flex-start; padding-right: 0; border-right: 0; padding-bottom: 12px; border-bottom: 1px solid rgba(212, 175, 55, .45); } .hero-k.hk-long:has(.hk-art) { grid-template-columns: 1fr; } .hero-k h1 .nw { display: inline-block; } .hero-k .big-k .tz { min-height: 64px; height: max-content; } /* スマホのカード型の表：見出し（左）と値（右）が重ならないように */ @media (max-width: 640px) { .tbl.cards table td { display: flex !important; align-items: baseline; gap: 12px; padding: 6px 14px !important; position: static; } .tbl.cards table td::before { position: static !important; flex: 0 0 5.5em; width: auto; } .tbl.cards table td > * { min-width: 0; } } /* 旧形式のお知らせ枠（アイコンなし）：見出しを上に、金の細枠でそろえる */ .callout:not(:has(> svg, > .icon)) { display: block; background: #FFFDF7; border: 1px solid var(--border-gold, #E2CC8B); border-left: 4px solid var(--color-gold, #C9A13B); border-radius: 10px; box-shadow: none; padding: 14px 18px; } .callout:not(:has(> svg, > .icon)) > strong:first-child, .callout:not(:has(> svg, > .icon)) > b:first-child { display: block; margin-bottom: 4px; color: #0F2742; font-family: var(--font-serif, serif); font-size: 1.05em; } .callout:not(:has(> svg, > .icon)) > strong:first-child, .callout:not(:has(> svg, > .icon)) > b:first-child { background: none; padding: 0; } .callout:not(:has(> svg, > .icon)) > p { margin: 0; } .callout:not(:has(> svg, > .icon)) > p + p, .callout:not(:has(> svg, > .icon)) > ul { margin-top: 8px; } /* 相性の内訳：表と同じ金の細枠・角丸に */ .rel-rows { border: 1px solid var(--border-gold, #E2CC8B); border-radius: 12px; overflow: hidden; background: #fff; } .rel-rows .rel:last-child { border-bottom: 0; } .rel-rows .rel-l { background: #FBF6E9; } /* 検索ページ：入力前のヒント */ .search-hints { margin-top: 28px; } .search-hints h2 { font-size: 18px; margin: 0 0 12px; } .search-hints .chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; } .chip-link { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 16px; border: 1px solid var(--border-gold, #E2CC8B); border-radius: 999px; background: #FFFDF7; color: #0F2742; text-decoration: none; font-weight: 600; } .chip-link:hover { background: #FBF3DC; } .search-cats .card h3 { margin: 0 0 4px; font-size: 17px; } .search-cats .card p { margin: 0; font-size: 13px; color: #4B5563; } .search-results { min-height: 0; } .search-results:empty { margin: 0; } .side-all { white-space: nowrap; flex-shrink: 0; } .tbl tr.dasha-now td { background: #FBF3DC; font-weight: 700; } /* 占い一覧：星の占いコーナー（脇の扱い。横長の小さめカード） */ .star-corner .fg-side { grid-template-columns: 1fr; gap: 12px; } .star-corner .fg-side .fortune-card { display: grid; grid-template-columns: 112px minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; column-gap: 14px; align-items: start; } .star-corner .fg-side .fc-img { grid-row: 1 / span 4; width: 112px; height: 112px; object-fit: cover; margin: 0; aspect-ratio: 1; } .star-corner .fg-side .fortune-card-title { font-size: 1.05rem; } .star-corner .fg-side .btn { justify-self: start; min-height: 40px; padding-inline: 16px; } @media (min-width: 768px) { .star-corner .fg-side { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 960px; } .star-corner .fg-side .fortune-card { grid-template-columns: 180px minmax(0, 1fr); } .star-corner .fg-side .fc-img { width: 180px; height: 135px; aspect-ratio: 4 / 3; } } /* 言語メニュー（日本語版のヘッダーと海外版で共通） */ .ih-lang { position: relative; flex: none; } .ih-lang summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border: 1px solid var(--border-gold, #d9c48a); border-radius: 12px; background: #fff; color: var(--color-navy); font-weight: 600; } .ih-lang summary::-webkit-details-marker { display: none; } .ih-lang summary .ico { width: 20px; height: 20px; } .ih-lang-m { position: absolute; right: 0; top: calc(100% + 6px); z-index: 50; min-width: 168px; display: grid; padding: 6px; background: #fff; border: 1px solid var(--border-gold, #d9c48a); border-radius: 12px; box-shadow: 0 10px 30px rgba(15, 39, 66, .15); } .ih-lang-m a { padding: 10px 12px; border-radius: 8px; color: var(--color-navy); text-decoration: none; } .ih-lang-m a:hover { background: var(--color-gold-light); } .ih-lang-m a[aria-current="true"] { font-weight: 700; background: var(--color-gold-light); } .ih-lang { margin-left: auto; } .ih-lang summary span { display: none; } .hd-lang summary { min-height: 44px; } .hd-lang .ih-lang-m { z-index: 120; } @media (max-width: 1100px) { .hd-lang summary span { display: none; } } @media (max-width: 767px) { .hd-lang { display: none; } } .g-lang { margin: 8px 0 12px; } .g-lang-d summary { display: none; } .g-lang-d .ih-lang-m { position: static; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; border: 0; box-shadow: none; background: transparent; min-width: 0; } .g-lang-d .ih-lang-m a { border: 1px solid var(--border-gold, #d9c48a); background: #fff; padding: 8px 12px; border-radius: 999px; font-size: .9rem; } @media (min-width: 1101px) { .hd-lang summary .lm-t { display: inline !important; position: static; width: auto; height: auto; clip: auto; font-size: .9rem; } } /* ショップ（準備中）のバッジ */ .desktop-nav .dn-soon { display: inline-block; margin-left: 4px; padding: 1px 6px; border-radius: 999px; background: rgba(212,175,55,.18); color: #6B5310; font-size: 11px; font-weight: 600; line-height: 1.5; vertical-align: 2px; } .desktop-nav a { white-space: nowrap; } @media (min-width: 1024px) and (max-width: 1279px) { .desktop-nav { gap: 12px; } .desktop-nav a { font-size: 15px; } } .hd-cta { white-space: nowrap; } @media (min-width: 1280px) { .desktop-nav { gap: 18px; } } .ad-none { display: none !important; } /* ── 第8回レビューの修正 ── */ .site-footer .ft-lang { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: center; margin: 16px auto 0; padding: 0 16px; max-width: var(--container, 1200px); } .site-footer .ft-lang a { color: inherit; } .site-header .gnav .ih-lang-m a[aria-current] { box-shadow: none; padding-left: 12px; background: var(--color-gold-light, #F3E7C1); color: #0F2742; } .btn:focus-visible, select:focus-visible, input:focus-visible, .chip:focus-visible, .bnav a:focus-visible, .desktop-nav a:focus-visible { outline: 3px solid #D4AF37; outline-offset: 2px; } .site-logo .logo-t small { font-size: 11.5px; } @media (max-width: 767px) { .bnav a { font-size: 11px; } } .desktop-nav a { padding-left: 4px; padding-right: 4px; } #daily-rank > .daily-list:not(.mine-only) { grid-template-columns: minmax(0, 1fr); } @media (min-width: 1000px) { #daily-rank > .daily-list:not(.mine-only) { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .tbl.kd table { font-size: 15.5px; } .ih-lang summary span { display: inline; } @media (min-width: 1280px) and (max-width: 1439px) { .desktop-nav { gap: 14px; } .site-header .hd-lang .lm-t { display: none; } } @media (min-width: 1280px) { .site-header .hd-lang .lm-t, .site-header .hd-search .hs-t { display: none !important; } .desktop-nav { gap: 16px; } } @media (min-width: 1280px) { .desktop-nav { gap: 12px; } .desktop-nav a { font-size: 15px; } .header-inner { gap: 16px; } } /* 第9回：表とシェア */ .tbl td:first-child { overflow-wrap: normal; word-break: keep-all; } @media (max-width: 640px) { .tbl.cards table td::before { flex: 0 0 7em; word-break: keep-all; overflow-wrap: normal; } } .share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .share > span { flex: 0 0 100%; font-size: 14px; color: var(--color-muted, #5b6474); } .share a, .share button { flex: 1 1 0; min-width: 0; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #d9c48a; border-radius: 10px; background: #fff; color: #0F2742; font-weight: 700; text-decoration: none; font-size: 14px; padding: 0 10px; } .share a[data-share-x] { background: #0F2742; color: #fff; border-color: #0F2742; } .share a[data-share-line] { background: #06C755; color: #fff; border-color: #06C755; } .share button[hidden], .share input[hidden] { display: none; } @media (max-width: 700px) { .ih .header-inner { display: grid; grid-template-columns: 1fr auto; align-items: center; row-gap: 6px; } .ih .ih-nav { grid-column: 1 / -1; grid-row: 2; } .ih .ih-lang { grid-column: 2; grid-row: 1; } } @media (min-width: 1024px) { .kd + .note, .callout p, .callout .chips .chip small, .tbl.kd td small { font-size: 15px; } } .tbl td .cv .nw { display: inline; white-space: nowrap; } /* 第9回：背の低いスマホでも、最初の画面に生年月日の入力が見えるように */ @media (max-width: 860px) and (max-height: 880px) { .hero.kin.hc.ai { padding-top: 112px; } } @media (max-width: 860px) and (max-height: 700px) { .hero.kin.hc.ai { padding-top: 56px; } .hero .hero-title { font-size: clamp(1.7rem, 8.5vw, 2.3rem); } .hero .hero-description { display: none; } } /* ページ上部の切り替え・ジャンプ */ .jump-top { margin: 4px 0 18px; } .jump-top .jump-q { margin: 0 0 6px; font-size: 14px; font-weight: 700; color: var(--color-muted, #5b6474); } .jump-top .chips { display: flex; flex-wrap: wrap; gap: 8px; } .jump-top .chip { min-height: 40px; display: inline-flex; align-items: center; padding: 0 14px; font-size: 14px; text-decoration: none; color: #0F2742; background: #fff; } .jump-top .chip.on { background: #0F2742; color: #fff; border-color: #0F2742; font-weight: 700; } .tbl.cards td > .cv { min-width: 0; } /* 第10回：吉日一覧（1日1行）、結果へのフォーカス枠、小さすぎる文字 */ .kichi-list .k-good { color: var(--e-moku, #2f6b3a); font-weight: 700; } .kichi-list .k-bad { color: var(--beni, #b3261e); font-weight: 700; } .kichi-list .mix-t { display: inline-block; padding: 0 8px; margin-right: 4px; border: 1px solid #d9c48a; border-radius: 999px; font-size: 12px; background: #fff8e6; } .result:focus:not(:focus-visible), [tabindex="-1"]:focus:not(:focus-visible) { outline: none; box-shadow: none; } .yk-h { margin: 20px 0 8px; font-size: 1.15rem; } .tbl.yk-t td, .tbl.yk-t th { text-align: center; vertical-align: middle; } .tbl.yk-t td small { font-size: 12px; color: var(--color-muted, #5b6474); } .chips.jump-low .chip { min-height: 40px; display: inline-flex; align-items: center; padding: 0 14px; font-size: 14px; } /* 第10回：小さすぎる文字を12px以上に（暦の小さなマスの中だけは11px） */ .form .req, .rel-card .category-tag, .category-tag, .desktop-nav .dn-soon, .logo-sub, .site-logo small { font-size: 12px !important; } .bnav a, .bottom-nav a, nav a.nav-main { font-size: 12px; } .lbl.good, .lbl.bad, .lbl.mid, .chip.sk, span.sk { font-size: 12px; } .mei-col small, .bars small, .gogyo-bars small { font-size: 12px; } .kichi-cal .d .s, .cal .d .s { font-size: 11px; } #cal .d .s { font-size: 12px; } .rel-flat { margin-top: 10px; } .rel-flat summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 700; color: var(--color-muted, #5b6474); } /* 第11回 */ .logo-t small, .site-logo .logo-t small { font-size: 12px !important; } .other-animals a, .ih-others a { margin: 0 6px 6px 0; } /* 第11回：PCメニューの下の段（マウスを乗せる／Tabで移ると開く） */ .desktop-nav .dn-item { position: relative; display: flex; align-items: center; } .desktop-nav .dn-panel { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); min-width: 240px; padding: 8px; margin-top: 6px; background: #fffdf7; border: 1px solid #e3d3a4; border-radius: 12px; box-shadow: 0 12px 28px rgba(15,39,66,.16); display: none; flex-direction: column; z-index: 60; } .desktop-nav .dn-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; } .desktop-nav .dn-item:hover .dn-panel, .desktop-nav .dn-item:focus-within .dn-panel { display: flex; } .desktop-nav .dn-panel a { display: block; padding: 10px 12px; font-size: 15px; font-weight: 500; border-bottom: 0; border-radius: 8px; white-space: nowrap; } .desktop-nav .dn-panel a:hover { background: rgba(212,175,55,.16); } @media (hover: none) { .desktop-nav .dn-item:hover .dn-panel { display: none; } } /* 第11回：フォーカスは紺の枠をキーボード操作のときだけ */ .result:focus-visible, [tabindex="-1"]:focus-visible { outline: 2px solid #1f2937; outline-offset: 4px; box-shadow: none; } .result:focus, #r-meishiki:focus, #r-kyusei:focus, #r-aisho:focus { box-shadow: none; } /* 第11回：12px未満の文字の残り */ .ban .bad, .ban small, .ban .tag, .kyu-ban small { font-size: 12px; } .tbl th small, .tbl.yk-t th small { font-size: 12px; } #cal .d small, #cal .d .rk, .cal .d .rk { font-size: 12px; } .bars span, .bars small, .gbar small { font-size: 12px; } .sample-box .sub, .meishiki .sub { font-size: 12px; } .stamp.sm2 { font-size: 22px; letter-spacing: 0; } .share button[data-copy] { white-space: nowrap; } /* 第11回：背の低いスマホの占いページでは今日の暦の帯とパンくずを詰める */ @media (max-width: 860px) and (max-height: 700px) { .page--fortune #tstrip { display: none; } .page--fortune .crumbs, .page--fortune .breadcrumb { padding-block: 6px; margin-block: 0; } } /* 読みもの：新カテゴリの色と、分野の札・たたみ */ :root { --category-tarot: #8E2F3A; --category-fusui: #2F6B5E; --category-spiritual: #4B3A78; } .cat10 { background: var(--category-fusui); } .cat11 { background: var(--category-spiritual); } .cat12 { background: var(--category-tarot); } .category-tag--tarot { --tagc: var(--category-tarot); } .category-tag--fusui { --tagc: var(--category-fusui); } .category-tag--spiritual { --tagc: var(--category-spiritual); } .learn-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 8px; } .learn-chips .chip { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border: 1px solid var(--border-gold, #d9c48a); border-radius: 999px; background: #fff; color: var(--color-navy); text-decoration: none; font-weight: 600; } .learn-chips .chip small { font-size: 12px; color: var(--color-gold-dark, #8A6A1E); } .learn-chips .chip:hover { background: var(--color-gold-light); } @media (max-width: 767px) { .learn-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; position: sticky; top: 0; z-index: 20; background: var(--surface-page, #FBF8F1); padding: 6px 0; margin-inline: -16px; padding-inline: 16px; } .learn-chips::-webkit-scrollbar { display: none; } .learn-chips .chip { flex: none; } } .cat-sec { scroll-margin-top: 64px; } .cat-more summary { cursor: pointer; display: inline-flex; align-items: center; min-height: 44px; margin-top: 12px; padding: 0 18px; border: 1px solid var(--border-gold, #d9c48a); border-radius: 999px; color: var(--color-navy); font-weight: 600; list-style: none; } .cat-more summary::-webkit-details-marker { display: none; } .cat-more[open] summary { display: none; } .cat-more .article-grid { margin-top: 16px; } /* 絵が届くまでの札：分類ごとに地の色を変え、記事の題を入れる */ .art-ph--tarot { background: radial-gradient(120% 90% at 50% 110%, #6E2430 0%, #3E1219 65%); } .art-ph--fusui { background: radial-gradient(120% 90% at 50% 110%, #2F6B5E 0%, #173B33 65%); } .art-ph--spiritual { background: radial-gradient(120% 90% at 50% 110%, #4B3A78 0%, #241A40 65%); } .art-ph--gogyo { background: radial-gradient(120% 90% at 50% 110%, #2E5A3A 0%, #15301E 65%); } .art-ph--western, .art-ph--indian { background: radial-gradient(120% 90% at 50% 110%, #3B3566 0%, #1C1838 65%); } .art-ph.ph-long span { font-size: clamp(20px, 2.6vw, 30px); letter-spacing: .12em; padding-left: .12em; } .rel-card .rc-ph.ph-long span { font-size: 13px; letter-spacing: .04em; padding-left: 0; } /* トップ：生年月日がなくても遊べる占い */ .fg-sub { margin: var(--space-8) 0 0; font-size: var(--text-lg); color: var(--color-navy); text-align: center; } .fortune-grid.fg-free { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--space-4); max-width: 880px; margin-inline: auto; } .fortune-grid.fg-free .fc-img { width: 100%; height: auto; border-radius: 10px; } .fortune-grid.fg-free .fc-img.art-ph { border-radius: 10px; } @media (max-width: 767px) { .fortune-grid.fg-free { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .fortune-grid.fg-free .fortune-card-description, .fortune-grid.fg-free .btn { display: none; } .fortune-grid.fg-free .fortune-card-title { font-size: 15px; } .fortune-grid.fg-free .art-ph span { font-size: 22px; letter-spacing: .1em; } } .fg-free .fc-s { display: block; font-size: 12px; color: var(--color-gold-dark, #8A6A1E); } /* サイト名が長くなった分、1280〜1365px ではメニューの間を詰める */ @media (min-width: 1200px) and (max-width: 1365px) { .desktop-nav { gap: 6px !important; } .desktop-nav .dn-soon { display: none; } } /* 月の暦：暦注を札に。今日の行。スマホは1日1枚のカード */ .mtab .sn { display: inline-block; white-space: nowrap; margin: 1px 4px 1px 0; padding: 1px 6px; border-radius: 4px; font-size: 12px; line-height: 1.6; background: #F1ECE0; color: var(--color-ink); font-weight: 600; } .mtab .sn.good { background: #F6E9C2; color: #6B4F12; } .mtab .sn.bad { background: #F7E1DC; color: #9B2C1F; } .mtab tr.is-today td { background: #FFF6DC; } .mtab tr.is-today td:first-child { box-shadow: inset 4px 0 0 #B83A2B; } .mtab tr.is-today td:first-child::after { content: "今日"; display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 4px; background: #B83A2B; color: #fff; font-size: 12px; } .mtab tr { scroll-margin-top: 80px; } .mt-today a { font-weight: 700; } @media (max-width: 767px) { .tbl.mtab { overflow: visible; box-shadow: none; border: 0; } .tbl.mtab table, .tbl.mtab tbody { display: block; min-width: 0 !important; width: 100%; } .tbl.mtab thead { display: none; } .tbl.mtab tr { display: grid; grid-template-columns: auto auto auto 1fr; gap: 2px 10px; align-items: baseline; padding: 10px 12px; margin: 0 0 8px; border: 1px solid var(--border-color, #E5E1D6); border-radius: 10px; background: #fff; } .tbl.mtab td { display: block; padding: 0 !important; border: 0 !important; font-size: 14px !important; white-space: normal; } .tbl.mtab td:nth-child(1) { font-weight: 700; white-space: nowrap; } .tbl.mtab td:nth-child(4) { display: block !important; color: var(--color-muted); } .tbl.mtab td:nth-child(5) { grid-column: 1 / 3; color: var(--color-muted); font-size: 13px !important; } .tbl.mtab td:nth-child(5)::before { content: "旧暦 "; } .tbl.mtab td:nth-child(6) { grid-column: 3 / 5; font-weight: 700; color: var(--color-navy); } .tbl.mtab td:nth-child(7), .tbl.mtab td:nth-child(8) { grid-column: 1 / -1; } .tbl.mtab td:nth-child(7):empty, .tbl.mtab td:nth-child(8):empty, .tbl.mtab td:nth-child(6):empty { display: none; } .tbl.mtab tr.is-today { border-color: #B83A2B; } .tbl.mtab tr.is-today td { background: transparent; } .tbl.mtab tr.is-today { background: #FFF6DC; } } .daily-list .d-area { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 4px; background: #F1ECE0; color: #6B4F12; font-size: 12px; font-style: normal; white-space: nowrap; }