动态页脚CSS代码
动态页脚CSS
动态页脚CSS
.site-footer{
background: url("data:image/svg+xml,%3Csvg%20width%3D%22100%25%22%20height%3D%22100%25%22%20id%3D%22svg%22%20viewBox%3D%220%200%201440%20690%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20class%3D%22transition%20duration-300%20ease-in-out%20delay-150%22%3E%3Cstyle%3E%0A%20%20%20%20%20%20%20%20%20%20.path-0%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20animation%3ApathAnim-0%204s%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20animation-timing-function%3A%20linear%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20animation-iteration-count%3A%20infinite%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%40keyframes%20pathAnim-0%7B%0A%20%20%20%20%20%20%20%20%20%20%20%200%25%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20d%3A%20path(%22M%200%2C700%20L%200%2C131%20C%2053.654458009618935%2C113.21511900357626%20107.30891601923787%2C95.43023800715254%20162%2C87%20C%20216.69108398076213%2C78.56976199284746%20272.4187939326674%2C79.4941669749661%20321%2C87%20C%20369.5812060673326%2C94.5058330250339%20411.0159082500925%2C108.59309409298308%20470%2C123%20C%20528.9840917499075%2C137.40690590701692%20605.5175730669627%2C152.13345665310152%20657%2C148%20C%20708.4824269330373%2C143.86654334689848%20734.913799482057%2C120.87307929461093%20792%2C111%20C%20849.086200517943%2C101.12692070538907%20936.8272290048094%2C104.3742261684548%20989%2C100%20C%201041.1727709951906%2C95.6257738315452%201057.7772844987053%2C83.63001603156988%201107%2C100%20C%201156.2227155012947%2C116.36998396843012%201238.06363300037%2C161.10570970526572%201299%2C171%20C%201359.93636699963%2C180.89429029473428%201399.968183499815%2C155.94714514736714%201440%2C131%20L%201440%2C700%20L%200%2C700%20Z%22)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%2025%25%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20d%3A%20path(%22M%200%2C700%20L%200%2C131%20C%2066.74776174620793%2C144.62155629547416%20133.49552349241586%2C158.24311259094833%20176%2C167%20C%20218.50447650758414%2C175.75688740905167%20236.76566777654455%2C179.64910593168088%20290%2C168%20C%20343.23433222345545%2C156.35089406831912%20431.44180540140576%2C129.16046368232827%20502%2C120%20C%20572.5581945985942%2C110.83953631767173%20625.467110617832%2C119.70903933900604%20665%2C109%20C%20704.532889382168%2C98.29096066099396%20730.6897521272662%2C68.00337896164756%20786%2C72%20C%20841.3102478727338%2C75.99662103835244%20925.773880873104%2C114.27744481440374%20980%2C143%20C%201034.226119126896%2C171.72255518559626%201058.2147243803183%2C190.88684178073743%201100%2C191%20C%201141.7852756196817%2C191.11315821926257%201201.3672216056234%2C172.17518806264644%201261%2C159%20C%201320.6327783943766%2C145.82481193735356%201380.3163891971883%2C138.41240596867678%201440%2C131%20L%201440%2C700%20L%200%2C700%20Z%22)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%2050%25%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20d%3A%20path(%22M%200%2C700%20L%200%2C131%20C%2058.74203970896535%2C138.3395979775558%20117.4840794179307%2C145.6791959551116%20175%2C132%20C%20232.5159205820693%2C118.3208040448884%20288.80572203724256%2C83.6228141571094%20342%2C83%20C%20395.19427796275744%2C82.3771858428906%20445.2930324330989%2C115.82954741645085%20493%2C127%20C%20540.7069675669011%2C138.17045258354915%20586.0221482303613%2C127.05899617708721%20632%2C140%20C%20677.9778517696387%2C152.9410038229128%20724.6183746454557%2C189.9344678752004%20778%2C190%20C%20831.3816253545443%2C190.0655321247996%20891.5043531878159%2C153.20313232211123%20957%2C148%20C%201022.4956468121841%2C142.79686767788877%201093.3642126032805%2C169.25300283635468%201146%2C161%20C%201198.6357873967195%2C152.74699716364532%201233.0387963990627%2C109.7848563324701%201279%2C99%20C%201324.9612036009373%2C88.2151436675299%201382.4806018004688%2C109.60757183376495%201440%2C131%20L%201440%2C700%20L%200%2C700%20Z%22)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%2075%25%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20d%3A%20path(%22M%200%2C700%20L%200%2C131%20C%2052.926674065852765%2C151.79205820693056%20105.85334813170553%2C172.58411641386115%20165%2C163%20C%20224.14665186829447%2C153.41588358613885%20289.5132815390307%2C113.45559255148599%20336%2C94%20C%20382.4867184609693%2C74.54440744851401%20410.09352571217175%2C75.59351338019485%20464%2C95%20C%20517.9064742878282%2C114.40648661980515%20598.1126156122825%2C152.17035392773462%20653%2C173%20C%20707.8873843877175%2C193.82964607226538%20737.4560118386979%2C197.72507090886666%20789%2C176%20C%20840.5439881613021%2C154.27492909113334%20914.0633370329263%2C106.92936243679864%20965%2C93%20C%201015.9366629670737%2C79.07063756320136%201044.2906400295967%2C98.55747934393881%201095%2C116%20C%201145.7093599704033%2C133.4425206560612%201218.7741028486867%2C148.84072018744607%201280%2C151%20C%201341.2258971513133%2C153.15927981255393%201390.6129485756567%2C142.07963990627695%201440%2C131%20L%201440%2C700%20L%200%2C700%20Z%22)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20100%25%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20d%3A%20path(%22M%200%2C700%20L%200%2C131%20C%2053.654458009618935%2C113.21511900357626%20107.30891601923787%2C95.43023800715254%20162%2C87%20C%20216.69108398076213%2C78.56976199284746%20272.4187939326674%2C79.4941669749661%20321%2C87%20C%20369.5812060673326%2C94.5058330250339%20411.0159082500925%2C108.59309409298308%20470%2C123%20C%20528.9840917499075%2C137.40690590701692%20605.5175730669627%2C152.13345665310152%20657%2C148%20C%20708.4824269330373%2C143.86654334689848%20734.913799482057%2C120.87307929461093%20792%2C111%20C%20849.086200517943%2C101.12692070538907%20936.8272290048094%2C104.3742261684548%20989%2C100%20C%201041.1727709951906%2C95.6257738315452%201057.7772844987053%2C83.63001603156988%201107%2C100%20C%201156.2227155012947%2C116.36998396843012%201238.06363300037%2C161.10570970526572%201299%2C171%20C%201359.93636699963%2C180.89429029473428%201399.968183499815%2C155.94714514736714%201440%2C131%20L%201440%2C700%20L%200%2C700%20Z%22)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%7D%3C%2Fstyle%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22gradient%22%20x1%3D%220%25%22%20y1%3D%2250%25%22%20x2%3D%22100%25%22%20y2%3D%2250%25%22%3E%3Cstop%20offset%3D%225%25%22%20stop-color%3D%22%23F78DA7%22%3E%3C%2Fstop%3E%3Cstop%20offset%3D%2295%25%22%20stop-color%3D%22%238ED1FC%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20d%3D%22M%200%2C700%20L%200%2C131%20C%2053.654458009618935%2C113.21511900357626%20107.30891601923787%2C95.43023800715254%20162%2C87%20C%20216.69108398076213%2C78.56976199284746%20272.4187939326674%2C79.4941669749661%20321%2C87%20C%20369.5812060673326%2C94.5058330250339%20411.0159082500925%2C108.59309409298308%20470%2C123%20C%20528.9840917499075%2C137.40690590701692%20605.5175730669627%2C152.13345665310152%20657%2C148%20C%20708.4824269330373%2C143.86654334689848%20734.913799482057%2C120.87307929461093%20792%2C111%20C%20849.086200517943%2C101.12692070538907%20936.8272290048094%2C104.3742261684548%20989%2C100%20C%201041.1727709951906%2C95.6257738315452%201057.7772844987053%2C83.63001603156988%201107%2C100%20C%201156.2227155012947%2C116.36998396843012%201238.06363300037%2C161.10570970526572%201299%2C171%20C%201359.93636699963%2C180.89429029473428%201399.968183499815%2C155.94714514736714%201440%2C131%20L%201440%2C700%20L%200%2C700%20Z%22%20stroke%3D%22none%22%20stroke-width%3D%220%22%20fill%3D%22url(%23gradient)%22%20fill-opacity%3D%220.4%22%20class%3D%22transition-all%20duration-300%20ease-in-out%20delay-150%20path-0%22%3E%3C%2Fpath%3E%3Cstyle%3E%0A%20%20%20%20%20%20%20%20%20%20.path-1%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20animation%3ApathAnim-1%204s%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20animation-timing-function%3A%20linear%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20animation-iteration-count%3A%20infinite%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%40keyframes%20pathAnim-1%7B%0A%20%20%20%20%20%20%20%20%20%20%20%200%25%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20d%3A%20path(%22M%200%2C700%20L%200%2C306%20C%2060.853718091009995%2C315.8246392896781%20121.70743618201999%2C325.64927857935623%20181%2C320%20C%20240.29256381798%2C314.35072142064377%20298.0239733629301%2C293.2275249722531%20348%2C272%20C%20397.9760266370699%2C250.7724750277469%20440.1966703662598%2C229.4406215316315%20494%2C252%20C%20547.8033296337402%2C274.5593784683685%20613.1893451720309%2C341.0099889012209%20660%2C357%20C%20706.8106548279691%2C372.9900110987791%20735.0459489456159%2C338.51942286348503%20783%2C306%20C%20830.9540510543841%2C273.48057713651497%20898.6268590455051%2C242.91231964483902%20961%2C244%20C%201023.3731409544949%2C245.08768035516098%201080.446614872364%2C277.8312985571588%201127%2C278%20C%201173.553385127636%2C278.1687014428412%201209.5866814650387%2C245.76248612652606%201260%2C245%20C%201310.4133185349613%2C244.23751387347394%201375.2066592674805%2C275.118756936737%201440%2C306%20L%201440%2C700%20L%200%2C700%20Z%22)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%2025%25%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20d%3A%20path(%22M%200%2C700%20L%200%2C306%20C%2040.07448513996795%2C310.1099519052904%2080.1489702799359%2C314.21990381058083%20139%2C322%20C%20197.8510297200641%2C329.78009618941917%20275.4786040202244%2C341.23033666296703%20335%2C326%20C%20394.5213959797756%2C310.76966333703297%20435.93661363916635%2C268.8587495375509%20491%2C280%20C%20546.0633863608336%2C291.1412504624491%20614.7749414231101%2C355.33466518682945%20666%2C356%20C%20717.2250585768899%2C356.66533481317055%20750.9636206683931%2C293.8025897151314%20792%2C285%20C%20833.0363793316069%2C276.1974102848686%20881.3705759033172%2C321.4549759526452%20937%2C330%20C%20992.6294240966828%2C338.5450240473548%201055.5540757183376%2C310.3775064742878%201108%2C288%20C%201160.4459242816624%2C265.6224935257122%201202.4131212233322%2C249.03499815020348%201256%2C253%20C%201309.5868787766678%2C256.9650018497965%201374.7934393883338%2C281.48250092489826%201440%2C306%20L%201440%2C700%20L%200%2C700%20Z%22)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%2050%25%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20d%3A%20path(%22M%200%2C700%20L%200%2C306%20C%2048.71811567394252%2C277.9629054137378%2097.43623134788504%2C249.92581082747563%20146%2C269%20C%20194.56376865211496%2C288.07418917252437%20242.9731902824023%2C354.2596621038353%20291%2C355%20C%20339.0268097175977%2C355.7403378961647%20386.6710075225059%2C291.03554075718336%20450%2C260%20C%20513.3289924774941%2C228.96445924281664%20592.3427796275743%2C231.59817486743128%20653%2C267%20C%20713.6572203724257%2C302.4018251325687%20755.9578739671971%2C370.5717597730916%20805%2C363%20C%20854.0421260328029%2C355.4282402269084%20909.825724503638%2C272.11478604020226%20968%2C256%20C%201026.174275496362%2C239.88521395979774%201086.7392280182514%2C290.9690960660994%201132%2C299%20C%201177.2607719817486%2C307.0309039339006%201207.2173634233566%2C272.00882969540015%201256%2C266%20C%201304.7826365766434%2C259.99117030459985%201372.3913182883216%2C282.9955851522999%201440%2C306%20L%201440%2C700%20L%200%2C700%20Z%22)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%2075%25%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20d%3A%20path(%22M%200%2C700%20L%200%2C306%20C%2054.34248366013071%2C312.73039832285116%20108.68496732026142%2C319.4607966457023%20168%2C313%20C%20227.31503267973858%2C306.5392033542977%20291.602614379085%2C286.8872117400419%20343%2C285%20C%20394.397385620915%2C283.1127882599581%20432.9045751633986%2C298.99035639413006%20482%2C317%20C%20531.0954248366014%2C335.00964360586994%20590.7790849673204%2C355.15136268343815%20643%2C356%20C%20695.2209150326796%2C356.84863731656185%20739.9790849673202%2C338.4041928721174%20791%2C312%20C%20842.0209150326798%2C285.5958071278826%20899.3045751633988%2C251.23186582809223%20959%2C247%20C%201018.6954248366012%2C242.76813417190777%201080.8026143790848%2C268.66834381551365%201133%2C297%20C%201185.1973856209152%2C325.33165618448635%201227.4849673202614%2C356.0947589098532%201277%2C358%20C%201326.5150326797386%2C359.9052410901468%201383.2575163398692%2C332.9526205450734%201440%2C306%20L%201440%2C700%20L%200%2C700%20Z%22)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20100%25%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20d%3A%20path(%22M%200%2C700%20L%200%2C306%20C%2060.853718091009995%2C315.8246392896781%20121.70743618201999%2C325.64927857935623%20181%2C320%20C%20240.29256381798%2C314.35072142064377%20298.0239733629301%2C293.2275249722531%20348%2C272%20C%20397.9760266370699%2C250.7724750277469%20440.1966703662598%2C229.4406215316315%20494%2C252%20C%20547.8033296337402%2C274.5593784683685%20613.1893451720309%2C341.0099889012209%20660%2C357%20C%20706.8106548279691%2C372.9900110987791%20735.0459489456159%2C338.51942286348503%20783%2C306%20C%20830.9540510543841%2C273.48057713651497%20898.6268590455051%2C242.91231964483902%20961%2C244%20C%201023.3731409544949%2C245.08768035516098%201080.446614872364%2C277.8312985571588%201127%2C278%20C%201173.553385127636%2C278.1687014428412%201209.5866814650387%2C245.76248612652606%201260%2C245%20C%201310.4133185349613%2C244.23751387347394%201375.2066592674805%2C275.118756936737%201440%2C306%20L%201440%2C700%20L%200%2C700%20Z%22)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%7D%3C%2Fstyle%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22gradient%22%20x1%3D%220%25%22%20y1%3D%2250%25%22%20x2%3D%22100%25%22%20y2%3D%2250%25%22%3E%3Cstop%20offset%3D%225%25%22%20stop-color%3D%22%23F78DA7%22%3E%3C%2Fstop%3E%3Cstop%20offset%3D%2295%25%22%20stop-color%3D%22%238ED1FC%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20d%3D%22M%200%2C700%20L%200%2C306%20C%2060.853718091009995%2C315.8246392896781%20121.70743618201999%2C325.64927857935623%20181%2C320%20C%20240.29256381798%2C314.35072142064377%20298.0239733629301%2C293.2275249722531%20348%2C272%20C%20397.9760266370699%2C250.7724750277469%20440.1966703662598%2C229.4406215316315%20494%2C252%20C%20547.8033296337402%2C274.5593784683685%20613.1893451720309%2C341.0099889012209%20660%2C357%20C%20706.8106548279691%2C372.9900110987791%20735.0459489456159%2C338.51942286348503%20783%2C306%20C%20830.9540510543841%2C273.48057713651497%20898.6268590455051%2C242.91231964483902%20961%2C244%20C%201023.3731409544949%2C245.08768035516098%201080.446614872364%2C277.8312985571588%201127%2C278%20C%201173.553385127636%2C278.1687014428412%201209.5866814650387%2C245.76248612652606%201260%2C245%20C%201310.4133185349613%2C244.23751387347394%201375.2066592674805%2C275.118756936737%201440%2C306%20L%201440%2C700%20L%200%2C700%20Z%22%20stroke%3D%22none%22%20stroke-width%3D%220%22%20fill%3D%22url(%23gradient)%22%20fill-opacity%3D%220.53%22%20class%3D%22transition-all%20duration-300%20ease-in-out%20delay-150%20path-1%22%3E%3C%2Fpath%3E%3Cstyle%3E%0A%20%20%20%20%20%20%20%20%20%20.path-2%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20animation%3ApathAnim-2%204s%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20animation-timing-function%3A%20linear%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20animation-iteration-count%3A%20infinite%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%40keyframes%20pathAnim-2%7B%0A%20%20%20%20%20%20%20%20%20%20%20%200%25%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20d%3A%20path(%22M%200%2C700%20L%200%2C481%20C%2046.28274756443457%2C481.2452583549143%2092.56549512886914%2C481.49051670982857%20147%2C475%20C%20201.43450487113086%2C468.50948329017143%20264.02076704895796%2C455.2831915156%20326%2C438%20C%20387.97923295104204%2C420.7168084844%20449.35143667529906%2C399.3767172277717%20503%2C427%20C%20556.648563324701%2C454.6232827722283%20602.5734862498458%2C531.2099395733136%20643%2C542%20C%20683.4265137501542%2C552.7900604266864%20718.3546183253176%2C497.78352447897396%20771%2C494%20C%20823.6453816746824%2C490.21647552102604%20894.008040448884%2C537.6559625107905%20960%2C524%20C%201025.991959551116%2C510.3440374892095%201087.6132198791465%2C435.5926254778641%201143%2C424%20C%201198.3867801208535%2C412.4073745221359%201247.5390800345294%2C463.9735355777531%201296%2C484%20C%201344.4609199654706%2C504.0264644222469%201392.2304599827353%2C492.5132322111234%201440%2C481%20L%201440%2C700%20L%200%2C700%20Z%22)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%2025%25%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20d%3A%20path(%22M%200%2C700%20L%200%2C481%20C%2045.949636206683934%2C500.3449747194475%2091.89927241336787%2C519.689949438895%20144%2C530%20C%20196.10072758663213%2C540.310050561105%20254.35254655321245%2C541.5851769638673%20308%2C522%20C%20361.64745344678755%2C502.4148230361327%20410.69054137378225%2C461.9693427056357%20467%2C455%20C%20523.3094586262177%2C448.0306572943643%20586.8852879516586%2C474.53745221358986%20647%2C488%20C%20707.1147120483414%2C501.46254778641014%20763.7683068195831%2C501.8808484400049%20819%2C495%20C%20874.2316931804169%2C488.1191515599951%20928.0414847700088%2C473.93915402639044%20979%2C470%20C%201029.9585152299912%2C466.06084597360956%201078.0657541003825%2C472.3625354544334%201130%2C490%20C%201181.9342458996175%2C507.6374645455666%201237.695498828462%2C536.6107041558762%201290%2C537%20C%201342.304501171538%2C537.3892958441238%201391.152250585769%2C509.1946479220619%201440%2C481%20L%201440%2C700%20L%200%2C700%20Z%22)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%2050%25%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20d%3A%20path(%22M%200%2C700%20L%200%2C481%20C%2055.20690590701689%2C471.24165741768405%20110.41381181403378%2C461.4833148353681%20164%2C475%20C%20217.58618818596622%2C488.5166851646319%20269.55165865088173%2C525.3083980762116%20327%2C520%20C%20384.44834134911827%2C514.6916019237884%20447.37955358243926%2C467.2830928597855%20506%2C449%20C%20564.6204464175607%2C430.7169071402145%20618.9301270193612%2C441.55923048464666%20666%2C435%20C%20713.0698729806388%2C428.44076951535334%20752.899938340116%2C404.47998520162787%20802%2C425%20C%20851.100061659884%2C445.52001479837213%20909.470119620175%2C510.5208287088419%20962%2C526%20C%201014.529880379825%2C541.4791712911581%201061.2195831791837%2C507.4366999630041%201109%2C503%20C%201156.7804168208163%2C498.5633000369959%201205.6515476630902%2C523.7323714391417%201261%2C525%20C%201316.3484523369098%2C526.2676285608583%201378.1742261684549%2C503.63381428042914%201440%2C481%20L%201440%2C700%20L%200%2C700%20Z%22)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%2075%25%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20d%3A%20path(%22M%200%2C700%20L%200%2C481%20C%2046.799161425576514%2C466.5136268343815%2093.59832285115303%2C452.0272536687631%20144%2C463%20C%20194.40167714884697%2C473.9727463312369%20248.40587002096441%2C510.4046121593291%20299%2C525%20C%20349.5941299790356%2C539.5953878406709%20396.7781970649895%2C532.3542976939204%20453%2C512%20C%20509.2218029350105%2C491.6457023060796%20574.4813417190776%2C458.1781970649895%20627%2C447%20C%20679.5186582809224%2C435.8218029350105%20719.2964360587002%2C446.9329140461216%20775%2C442%20C%20830.7035639412998%2C437.0670859538784%20902.3329140461216%2C416.0901467505241%20954%2C425%20C%201005.6670859538784%2C433.9098532494759%201037.3719077568135%2C472.70649895178195%201095%2C470%20C%201152.6280922431865%2C467.29350104821805%201236.1794549266247%2C423.083857442348%201298%2C418%20C%201359.8205450733753%2C412.916142557652%201399.9102725366877%2C446.95807127882597%201440%2C481%20L%201440%2C700%20L%200%2C700%20Z%22)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20100%25%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20d%3A%20path(%22M%200%2C700%20L%200%2C481%20C%2046.28274756443457%2C481.2452583549143%2092.56549512886914%2C481.49051670982857%20147%2C475%20C%20201.43450487113086%2C468.50948329017143%20264.02076704895796%2C455.2831915156%20326%2C438%20C%20387.97923295104204%2C420.7168084844%20449.35143667529906%2C399.3767172277717%20503%2C427%20C%20556.648563324701%2C454.6232827722283%20602.5734862498458%2C531.2099395733136%20643%2C542%20C%20683.4265137501542%2C552.7900604266864%20718.3546183253176%2C497.78352447897396%20771%2C494%20C%20823.6453816746824%2C490.21647552102604%20894.008040448884%2C537.6559625107905%20960%2C524%20C%201025.991959551116%2C510.3440374892095%201087.6132198791465%2C435.5926254778641%201143%2C424%20C%201198.3867801208535%2C412.4073745221359%201247.5390800345294%2C463.9735355777531%201296%2C484%20C%201344.4609199654706%2C504.0264644222469%201392.2304599827353%2C492.5132322111234%201440%2C481%20L%201440%2C700%20L%200%2C700%20Z%22)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%7D%3C%2Fstyle%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22gradient%22%20x1%3D%220%25%22%20y1%3D%2250%25%22%20x2%3D%22100%25%22%20y2%3D%2250%25%22%3E%3Cstop%20offset%3D%225%25%22%20stop-color%3D%22%23F78DA7%22%3E%3C%2Fstop%3E%3Cstop%20offset%3D%2295%25%22%20stop-color%3D%22%238ED1FC%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20d%3D%22M%200%2C700%20L%200%2C481%20C%2046.28274756443457%2C481.2452583549143%2092.56549512886914%2C481.49051670982857%20147%2C475%20C%20201.43450487113086%2C468.50948329017143%20264.02076704895796%2C455.2831915156%20326%2C438%20C%20387.97923295104204%2C420.7168084844%20449.35143667529906%2C399.3767172277717%20503%2C427%20C%20556.648563324701%2C454.6232827722283%20602.5734862498458%2C531.2099395733136%20643%2C542%20C%20683.4265137501542%2C552.7900604266864%20718.3546183253176%2C497.78352447897396%20771%2C494%20C%20823.6453816746824%2C490.21647552102604%20894.008040448884%2C537.6559625107905%20960%2C524%20C%201025.991959551116%2C510.3440374892095%201087.6132198791465%2C435.5926254778641%201143%2C424%20C%201198.3867801208535%2C412.4073745221359%201247.5390800345294%2C463.9735355777531%201296%2C484%20C%201344.4609199654706%2C504.0264644222469%201392.2304599827353%2C492.5132322111234%201440%2C481%20L%201440%2C700%20L%200%2C700%20Z%22%20stroke%3D%22none%22%20stroke-width%3D%220%22%20fill%3D%22url(%23gradient)%22%20fill-opacity%3D%221%22%20class%3D%22transition-all%20duration-300%20ease-in-out%20delay-150%20path-2%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E") !important;
}
动态页脚CSS
/* 页脚动画优化 */
.site-footer {
background: url("data:image/svg+xml,%3Csvg%20id%3D%22svg%22%20viewBox%3D%220%200%201440%20690%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22gradient%22%20x1%3D%220%25%22%20y1%3D%2250%25%22%20y2%3D%2250%25%22%3E%3Cstop%20offset%3D%225%25%22%20stop-color%3D%22%23F78DA7%22%2F%3E%3Cstop%20offset%3D%2295%25%22%20stop-color%3D%22%238ED1FC%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20d%3D%22M0%20700V306c60.854%209.825%20121.707%2019.65%20181%2014%2059.293-5.65%20117.024-26.772%20167-48s92.197-42.56%20146-20c53.803%2022.56%20119.19%2089.01%20166%20105%2046.81%2015.99%2075.046-18.48%20123-51%2047.954-32.52%20115.627-63.088%20178-62%2062.373%201.088%20119.447%2033.831%20166%2034%2046.553.169%2082.587-32.238%20133-33%2050.413-.762%20115.207%2030.119%20180%2061v394H0z%22%20fill%3D%22url(%23gradient)%22%20style%3D%22animation:pathAnim%204s%20linear%20infinite%3B%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E") no-repeat center bottom;
background-size: cover !important; /* 让背景图覆盖整个宽度 */
animation: pathAnim 4s linear infinite; /* 平滑动画 */
}
/* 动态调整的媒体查询 */
@media (max-width: 768px) {
.site-footer {
background-size: 100% auto; /* 避免重叠，按宽度适配 */
height: 200px; /* 限制小屏设备的高度 */
}
}
/* 动画关键帧 */
@keyframes pathAnim {
0%, 100% {
background-position: center bottom;
}
50% {
background-position: center center;
}
}
示例图
动态背景CSS代码
# 修改动态背景
.bg-image {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
overflow: hidden
}
.bg-image-ptn-set {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
min-width: 1200px;
min-height: 680px
}
.bg-image-ptn {
position: absolute;
-webkit-transform-origin: center center;
-ms-transform-origin: center center;
transform-origin: center center;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%)
}
.bg-image-ptn > div {
position: relative;
width: 100%;
padding-top: 100%
}
.bg-image-ptn svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
fill: none;
stroke: #000;
stroke-width: 4px;
stroke-linecap: round;
stroke-linejoin: round
}
.bg-image-ptn.color-purple svg {
stroke: #bdafc5
}
.bg-image-ptn.color-pink svg {
stroke: #e8a1c3
}
.bg-image-ptn.color-blue svg {
stroke: #94c2de
}
.bg-image-ptn.color-yellow svg {
stroke: #edd37f
}
.bg-image-ptn.color-green svg {
stroke: #d5e0b6
}
.bg-image-ptn.color-orange svg {
stroke: #eba789
}
.bg-image-ptn.rotate-1 {
-webkit-transform: translate(-50%, -50%) rotate(30deg);
-ms-transform: translate(-50%, -50%) rotate(30deg);
transform: translate(-50%, -50%) rotate(30deg)
}
.bg-image-ptn.rotate-2 {
-webkit-transform: translate(-50%, -50%) rotate(15deg);
-ms-transform: translate(-50%, -50%) rotate(15deg);
transform: translate(-50%, -50%) rotate(15deg)
}
.bg-image-ptn.rotate-3 {
-webkit-transform: translate(-50%, -50%) rotate(-15deg);
-ms-transform: translate(-50%, -50%) rotate(-15deg);
transform: translate(-50%, -50%) rotate(-15deg)
}
.bg-image-ptn.rotate-4 {
-webkit-transform: translate(-50%, -50%) rotate(-30deg);
-ms-transform: translate(-50%, -50%) rotate(-30deg);
transform: translate(-50%, -50%) rotate(-30deg)
}
.bg-image-ptn.ptn-line {
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%)
}
.bg-image-ptn.act-duration-0 svg {
-webkit-animation-duration: 3s;
animation-duration: 3s
}
.bg-image-ptn.act-duration-1 svg {
-webkit-animation-duration: 3.5s;
animation-duration: 3.5s
}
.bg-image-ptn.act-duration-2 svg {
-webkit-animation-duration: 4s;
animation-duration: 4s
}
.bg-image-ptn.act-duration-3 svg {
-webkit-animation-duration: 4.5s;
animation-duration: 4.5s
}
.bg-image-ptn.act-duration-4 svg {
-webkit-animation-duration: 5s;
animation-duration: 5s
}
.bg-image-ptn.act-delay-0 svg {
-webkit-animation-delay: 0;
animation-delay: 0
}
.bg-image-ptn.act-delay-1 svg {
-webkit-animation-delay: .5s;
animation-delay: .5s
}
.bg-image-ptn.act-delay-2 svg {
-webkit-animation-delay: 1s;
animation-delay: 1s
}
.bg-image-ptn.act-delay-3 svg {
-webkit-animation-delay: 1.5s;
animation-delay: 1.5s
}
.bg-image-ptn.act-delay-4 svg {
-webkit-animation-delay: 2s;
animation-delay: 2s
}
.bg-image-ptn.act-rotate svg {
opacity: 0;
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
-webkit-animation-name: act-rotate;
animation-name: act-rotate;
-webkit-animation-timing-function: ease;
animation-timing-function: ease;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite
}
@-webkit-keyframes act-rotate {
0% {
opacity: 0;
-webkit-transform: rotate(0);
transform: rotate(0)
}
40% {
opacity: 1;
-webkit-transform: rotate(0);
transform: rotate(0)
}
60% {
opacity: 1;
-webkit-transform: rotate(360deg);
transform: rotate(360deg)
}
100% {
opacity: 0;
-webkit-transform: rotate(360deg);
transform: rotate(360deg)
}
}
@keyframes act-rotate {
0% {
opacity: 0;
-webkit-transform: rotate(0);
transform: rotate(0)
}
40% {
opacity: 1;
-webkit-transform: rotate(0);
transform: rotate(0)
}
60% {
opacity: 1;
-webkit-transform: rotate(360deg);
transform: rotate(360deg)
}
100% {
opacity: 0;
-webkit-transform: rotate(360deg);
transform: rotate(360deg)
}
}
.bg-image-ptn.act-scale svg {
opacity: 0;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-webkit-animation-name: act-scale;
animation-name: act-scale;
-webkit-animation-timing-function: ease;
animation-timing-function: ease;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite
}
@-webkit-keyframes act-scale {
0% {
opacity: 0;
-webkit-transform: scale(1);
transform: scale(1)
}
40% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1)
}
60% {
opacity: 1;
-webkit-transform: scale(1.5);
transform: scale(1.5)
}
100% {
opacity: 0;
-webkit-transform: scale(1.5);
transform: scale(1.5)
}
}
@keyframes act-scale {
0% {
opacity: 0;
-webkit-transform: scale(1);
transform: scale(1)
}
40% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1)
}
60% {
opacity: 1;
-webkit-transform: scale(1.5);
transform: scale(1.5)
}
100% {
opacity: 0;
-webkit-transform: scale(1.5);
transform: scale(1.5)
}
}
.bg-image-ptn.act-line svg {
opacity: 0;
stroke-dasharray: 200;
stroke-dashoffset: 400;
-webkit-animation-name: act-line;
animation-name: act-line;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite
}
@-webkit-keyframes act-line {
0% {
opacity: 0;
stroke-dashoffset: 400
}
10% {
opacity: 1
}
40% {
stroke-dashoffset: 400
}
60% {
stroke-dashoffset: 0
}
90% {
opacity: 1
}
100% {
stroke-dashoffset: 0;
opacity: 0
}
}
@keyframes act-line {
0% {
opacity: 0;
stroke-dashoffset: 400
}
10% {
opacity: 1
}
40% {
stroke-dashoffset: 400
}
60% {
stroke-dashoffset: 0
}
90% {
opacity: 1
}
100% {
stroke-dashoffset: 0;
opacity: 0
}
}
html {
background: 0 0;
line-height: 1.6;
height: 100%
}
body {
font-family: "-apple-system", BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "segoe ui", "游ゴシック Medium", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
color: #222;
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img {
width: 100%;
vertical-align: bottom
}
a, a img {
outline: 0
}
#root {
position: relative
}
#wrapper {
position: relative;
width: 100%;
z-index: 0;
overflow: hidden;
opacity: 0
}
#index #wrapper {
opacity: 1
}
.site-sectitle {
position: absolute;
top: 0;
font-size: 16vw;
line-height: 1;
color: #4f1e08;
-webkit-transform: translate(0, -65%);
-ms-transform: translate(0, -65%);
transform: translate(0, -65%);
pointer-events: none
}
.site-header {
position: relative;
padding-top: 36.6%
}
.site-header_logo {
position: absolute;
top: 4vw;
left: 2vw;
width: 26.6%
}
.site-header_logo a:hover {
opacity: .8
}
.btnGnav {
position: fixed;
top: 0;
right: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
width: 13.33333vw;
height: 13.33333vw;
color: #fff;
background: #222;
cursor: pointer;
z-index: 9001
}
.btnGnav::before {
content: "";
display: block;
position: absolute;
width: calc(64 / 80 * 100%);
height: calc(64 / 80 * 100%);
top: calc(8 / 80 * 100%);
left: calc(8 / 80 * 100%);
border: 1px solid;
opacity: .4;
-webkit-box-sizing: border-box;
box-sizing: border-box
}
.btnGnav i {
position: relative;
display: block;
width: 50%;
height: 20%
}
.btnGnav i::before {
content: "";
display: block;
position: absolute;
width: 100%;
left: 0;
height: .53333vw;
border-radius: .53333vw;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: .2s ease;
-o-transition: .2s ease;
transition: .2s ease;
-webkit-transform-origin: center;
-ms-transform-origin: center;
transform-origin: center;
background-color: #fff;
top: 10%
}
.btnGnav i::after {
content: "";
display: block;
position: absolute;
width: 100%;
left: 0;
height: .53333vw;
border-radius: .53333vw;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: .2s ease;
-o-transition: .2s ease;
transition: .2s ease;
-webkit-transform-origin: center;
-ms-transform-origin: center;
transform-origin: center;
background-color: #fff;
top: 90%
}
.btnGnav span {
display: block;
margin-top: 20%;
line-height: 0;
text-align: center;
white-space: nowrap
}
.btnGnav span::before {
font-size: 2.13333vw;
display: block;
content: 'MENU'
}
.btnGnav.state-active i::before {
-webkit-transform: rotate(30deg);
-ms-transform: rotate(30deg);
transform: rotate(30deg);
top: 50%
}
.btnGnav.state-active i::after {
-webkit-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
transform: rotate(-30deg);
top: 50%
}
.btnGnav.state-active span::before {
content: 'CLOSE'
}
.gnav {
position: absolute;
top: 0;
right: 0;
width: 100%;
min-height: 100vh;
overflow: hidden;
z-index: 9000;
display: none
}
.gnav_inner {
position: relative;
padding: 5.5vw 0
}
.gnav_logo {
width: 33.3%;
margin: 0 auto 10vw
}
.gnav_list li {
font-size: 6.4vw;
font-weight: 900 !important;
line-height: 1;
text-align: center
}
.gnav_list li:not(:first-child) {
margin-top: 4%
}
.gnav_list li.state-active a::after {
width: 100%
}
.gnav_list a {
position: relative;
display: block;
padding-bottom: 2vw;
color: #4f1e08;
text-decoration: none;
z-index: 0
}
.gnav_list a::after {
content: "";
display: block;
position: absolute;
width: 0;
height: 4vw;
bottom: 0;
left: 0;
-webkit-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
z-index: -1
}
.gnav_list_index a::after {
background-color: #e6b000
}
.gnav_list_news a::after {
background-color: #e3388f
}
.gnav_list_event a::after {
background-color: #9a61ba
}
.gnav_list_introstory a::after {
background-color: #279ce6
}
.gnav_list_character a::after {
background-color: #9ab848
}
.gnav_list_movie a::after {
background-color: #d74f13
}
.gnav_list_theater a::after {
background-color: #e6b000
}
.gnav_list_ticket a::after {
background-color: #e3388f
}
.gnav_list_novelty a::after {
background-color: #9a61ba
}
.gnav_list_goods a::after {
background-color: #279ce6
}
.gnav_list_bddvd a::after {
background-color: #9ab848;
}
.gnav_list_music a::after {
background-color: #d74f13;
}
.gnav_list_staffcast a::after {
background-color: #e6b000;
}
.gnav_list_twitter a::after {
background-color: #e3388f;
}
.gnav_sns {
margin-top: 10.66667vw
}
.gnav_sns_caption {
font-size: 3.2vw;
font-weight: 600;
color: #4f1e08;
text-align: center
}
.gnav_sns_list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-top: 5.33333vw;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center
}
.gnav_sns_list li:not(:first-child) {
margin-left: 5.33333vw
}
.gnav_sns_list li a {
display: block;
width: 8.8vw;
height: 8.8vw;
border: 2px solid #4f1e08;
border-radius: 50%;
background: #4f1e08;
overflow: hidden
}
.site-footer {
position: relative;
margin-top: 43.3%;
z-index: 0
}
.site-footer-index {
margin-top: 53.3%;
background-color: #9ab848
}
.site-footer-news {
background-color: #e3388f
}
.site-footer-event {
background-color: #9a61ba
}
.site-footer-introstory {
background-color: #279ce6
}
.site-footer-character {
background-color: #9ab848
}
.site-footer-movie {
background-color: #d74f13
}
.site-footer-theater {
background-color: #e6b000
}
.site-footer-ticket {
background-color: #e3388f
}
.site-footer-novelty {
background-color: #9a61ba
}
.site-footer-goods {
background-color: #279ce6
}
.site-footer-bddvd {
background-color: #9ab848
}
.site-footer-music {
background-color: #d74f13
}
.site-footer_conte {
position: absolute;
top: -42.13333vw;
width: 100%
}
.site-footer_date {
position: absolute;
top: 0;
right: 50%;
font-size: 16vw;
margin: -.06em;
line-height: 1;
color: #4f1e08;
font-weight: 900;
-webkit-transform: translate(50%, -65%);
-ms-transform: translate(50%, -65%);
transform: translate(50%, -65%)
}
.site-footer_date small {
font-size: 11.73333vw
}
.site-footer_inner {
position: relative;
padding: 14.6% 0
}
.site-footer_logo {
width: 32%;
margin: 0 auto
}
.site-footer_sns {
margin-top: 10.66667vw
}
.site-footer_sns_caption {
font-size: 3.2vw;
font-weight: 600;
color: #fff;
text-align: center
}
.site-footer_sns_list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-top: 5.33333vw;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center
}
.site-footer_sns_list li:not(:first-child) {
margin-left: 5.33333vw
}
.site-footer_sns_list li a {
display: block;
width: 8.8vw;
height: 8.8vw;
border: 2px solid #4f1e08;
border-radius: 50%;
background: #4f1e08;
overflow: hidden
}
.site-footer_bnrs {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-top: 10.6%
}
.site-footer_bnrs li {
width: 45.3%
}
.site-footer_pageup {
position: absolute;
top: 15vw;
right: 7%;
width: 8.5%
}
.site-footer_pageup img {
display: block;
opacity: 0;
-webkit-transition: opacity .35s ease-out;
-o-transition: opacity .35s ease-out;
transition: opacity .35s ease-out
}
.site-footer_pageup a {
display: block;
background: url(../img/common/pageup.png) 0 0/100% auto no-repeat
}
.site-footer_attbox {
font-size: 12px;
font-size: .75rem;
position: relative;
padding: 20px 40px;
background-color: #222;
text-align: center;
color: #fff
}
.site-footer_attbox a {
color: #fff
}
.site-footer_copyright {
margin-top: 10px
}
.ytbModal {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
z-index: 10000;
display: none
}
.ytbModal_overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%
}
.ytbModal_content {
position: absolute;
right: 50%;
bottom: 50%;
-webkit-transform: translate(50%, 50%);
-ms-transform: translate(50%, 50%);
transform: translate(50%, 50%)
}
.ytbModal_content_inner {
position: relative;
padding-top: 56.25%
}
.ytbModal_iframe {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%
}
.ytbModal_close {
position: absolute;
top: 0;
right: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
width: 13.33333vw;
height: 13.33333vw;
color: #fff;
background: #222;
cursor: pointer
}
.ytbModal_close::before {
content: "";
display: block;
position: absolute;
width: calc(64 / 80 * 100%);
height: calc(64 / 80 * 100%);
top: calc(8 / 80 * 100%);
left: calc(8 / 80 * 100%);
border: 1px solid;
opacity: .4;
-webkit-box-sizing: border-box;
box-sizing: border-box
}
.ytbModal_close i {
position: relative;
display: block;
width: 50%;
height: 20%
}
.ytbModal_close i::before {
content: "";
display: block;
position: absolute;
width: 100%;
left: 0;
height: .53333vw;
border-radius: .53333vw;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: .2s ease;
-o-transition: .2s ease;
transition: .2s ease;
-webkit-transform-origin: center;
-ms-transform-origin: center;
transform-origin: center;
background-color: #fff;
top: 50%;
-webkit-transform: rotate(30deg);
-ms-transform: rotate(30deg);
transform: rotate(30deg)
}
.ytbModal_close i::after {
content: "";
display: block;
position: absolute;
width: 100%;
left: 0;
height: .53333vw;
border-radius: .53333vw;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: .2s ease;
-o-transition: .2s ease;
transition: .2s ease;
-webkit-transform-origin: center;
-ms-transform-origin: center;
transform-origin: center;
background-color: #fff;
top: 50%;
-webkit-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
transform: rotate(-30deg)
}
.ytbModal_close span {
font-size: 2.13333vw;
display: block;
margin-top: 20%;
line-height: 0;
text-align: center;
white-space: nowrap
}
.font-din, .gnav_list li, .idx-subtitle, .site-borLnk, .site-btn, .site-footer_date {
font-family: dinosaur, sans-serif;
-webkit-font-smoothing: antialiased;
font-weight: 500
}
.bold.idx-subtitle, .bold.site-borLnk, .bold.site-btn, .bold.site-footer_date, .font-din.bold, .gnav_list li.bold {
font-weight: 900
}
.font-marugo {
display: inline-block;
font-family: a-otf-ud-shin-maru-go-pr6n, sans-serif;
font-weight: 300;
-webkit-font-smoothing: antialiased;
margin-right: -11%;
-webkit-transform: scaleX(.9);
-ms-transform: scaleX(.9);
transform: scaleX(.9);
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
letter-spacing: .1em
}
.font-marugo.bold {
font-weight: 900
}
.bg-fixed {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background-image: url(../img/common/bg_visual.png);
background-position: center top;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed
}
.touch-device .bg-fixed {
position: fixed;
bottom: 0;
height: auto;
background-size: auto 100vh;
background-attachment: scroll;
background-position-y: bottom;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
.edge .bg-fixed {
z-index: auto
}
.site-hlines {
position: absolute;
top: 0;
width: 100%;
padding-top: 70.7%;
z-index: -1
}
.site-hlines_line1 {
position: fixed;
left: 0;
width: 100%;
height: 1px;
background-color: #d3d3d3
}
.site-hlines_line2 {
position: fixed;
left: 0;
width: 100%;
height: 1px;
background-color: #d3d3d3
}
.site-hlines_line1 {
top: 80px
}
.site-hlines_line2 {
bottom: 80px
}
.site-vlines {
position: absolute;
top: 0;
right: 50%;
width: 87.3%;
height: 100%;
-webkit-transform: translate(50%, 0);
-ms-transform: translate(50%, 0);
transform: translate(50%, 0);
z-index: -1
}
.site-vlines_line1 {
position: absolute;
top: 0;
width: 1px;
height: 100%;
background-color: #d3d3d3
}
.site-vlines_line2 {
position: absolute;
top: 0;
width: 1px;
height: 100%;
background-color: #d3d3d3
}
.site-vlines_line3 {
position: absolute;
top: 0;
width: 1px;
height: 100%;
background-color: #d3d3d3
}
.site-vlines_line1 {
left: 0
}
.site-vlines_line2 {
left: 50%
}
.site-vlines_line3 {
right: 0
}
.site-vlines-white .site-vlines_line1, .site-vlines-white .site-vlines_line2, .site-vlines-white .site-vlines_line3 {
background-color: rgba(255, 255, 255, .4)
}
.scroll::-webkit-scrollbar {
width: 8px
}
.scroll::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
box-shadow: inset 0 0 6px rgba(0, 0, 0, .1)
}
.scroll::-webkit-scrollbar-thumb {
background-color: rgba(78, 71, 58, .68)
}
.site-btn {
font-size: 14px;
font-size: .875rem;
width: 38.66667vw;
margin-top: 4vw;
line-height: 1;
font-weight: 700
}
.site-btn a {
display: block;
padding: 7% 0;
border: 2px solid #4f1e08;
border-radius: 30px;
background: #4f1e08;
color: #fff;
text-decoration: none;
text-align: center;
overflow: hidden
}
.site-btn a:hover {
background-color: transparent;
color: #4f1e08
}
.site-borLnk {
font-size: 14px;
font-size: .875rem
}
.site-borLnk a {
display: inline-block;
border: 2px solid #4f1e08;
background: #fff;
color: #4f1e08 !important;
white-space: nowrap;
text-decoration: none;
text-align: center;
overflow: hidden
}
.site-borLnk a:hover {
background-color: #4f1e08;
color: #fff !important
}
.text-left {
text-align: left
}
.text-center {
text-align: center
}
.text-right {
text-align: right
}
.text-combine {
-webkit-text-combine: horizontal;
-ms-text-combine-horizontal: all;
text-combine-upright: all
}
.fontB {
font-weight: 700
}
.mb0 {
margin-bottom: 0
}
.mb5 {
margin-bottom: 5px
}
.mb10 {
margin-bottom: 10px
}
.mb15 {
margin-bottom: 15px
}
.mb20 {
margin-bottom: 20px
}
.mb25 {
margin-bottom: 25px
}
.mb30 {
margin-bottom: 30px
}
.mb35 {
margin-bottom: 35px
}
.mb40 {
margin-bottom: 40px
}
.mb45 {
margin-bottom: 45px
}
.mb50 {
margin-bottom: 50px
}
.root-index {
visibility: hidden
}
.idx-subtitle {
position: absolute;
top: 0;
font-size: 16vw;
margin: -.06em;
line-height: 1;
color: #4f1e08;
font-weight: 900;
-webkit-transform: translate(0, -65%);
-ms-transform: translate(0, -65%);
transform: translate(0, -65%)
}
.idx-kv {
position: relative;
padding-bottom: 53.3%
}
.idx-kv_titleArea {
position: absolute;
top: 0;
width: 100%;
z-index: 1
}
.idx-kv_titleArea_inner {
position: relative;
padding-top: 141.3%
}
.idx-kv_titleArea_main {
position: absolute;
bottom: 5%;
left: 3%;
width: 30.6%
}
.idx-kv_date {
margin-top: 7.8%
}
.idx-kv_imageArea {
position: relative;
margin: 0 auto;
z-index: 0
}
.idx-kv_rafu {
position: absolute;
top: 0;
left: 0;
padding-top: 141.3%;
width: 100%;
background: url(../img/top/kv_vis03_line.jpg) 0 0/auto 100% no-repeat
}
.idx-kv_image {
padding-top: 141.3%;
position: relative;
overflow: hidden
}
.idx-kv_imageLayer {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
background-position: 100% 0;
background-repeat: no-repeat;
background-size: auto 100%
}
.idx-kv_imageName {
display: none
}
.idx-kv_imageName span {
display: block
}
.idx-kv_spImageName {
font-size: 18px;
font-size: 1.125rem
}
.idx-kv_spImageName span {
display: block;
text-align: center
}
.idx-kv_catchcopy {
position: absolute;
top: 9%;
right: 4%;
width: 22.5%;
z-index: 100;
opacity: 0
}
.idx-kv_selectorArea {
position: relative
}
.idx-kv_selectorArea_inner {
position: relative
}
.idx-kv_selector {
margin-top: 5.3%
}
.idx-kv_selector_name {
display: none
}
.idx-kv_selector_name span {
display: block;
text-align: center
}
.idx-kv_selector_image {
display: none
}
.idx-kv_selector_imageInner {
padding-top: 141.3%;
position: relative;
overflow: hidden
}
.idx-kv_selector_imageLayer {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size: auto 100%;
background-position: 100% 0
}
.idx-kv_selector_controller {
position: relative;
margin-top: 5.3%;
line-height: 0;
text-align: center;
z-index: 0
}
.idx-kv_selector_controller::before {
position: absolute;
top: 2px;
display: block;
content: '';
width: 100%;
height: 4px;
background-color: #d3d3d3;
z-index: -1
}
.idx-kv_selector_progress {
position: absolute;
top: 2px;
width: 0;
height: 4px;
background-color: #888;
z-index: 0
}
.idx-kv_selector_dots {
position: relative;
z-index: 1
}
.idx-kv_selector_dot {
display: inline-block;
width: 9.3%;
height: 8px;
background-color: #4f1e08;
z-index: 1
}
.idx-kv_selector_dot:not(:first-child) {
margin-left: 2.6%
}
.idx-kv_selector_dot.state-active {
background-color: #d74f13
}
.idx-kv_trailer {
position: absolute;
top: -20vw;
right: 0;
width: 26.6%;
cursor: pointer;
z-index: 1
}
.idx-kv_trailer_play {
position: absolute;
right: 50%;
bottom: 50%;
width: 30%;
-webkit-transform: translate(50%, 50%);
-ms-transform: translate(50%, 50%);
transform: translate(50%, 50%);
z-index: 2
}
.idx-kv_trailer_play span {
display: block;
-webkit-transition: -webkit-transform .3s ease-out;
transition: -webkit-transform .3s ease-out;
-o-transition: transform .3s ease-out;
transition: transform .3s ease-out;
transition: transform .3s ease-out, -webkit-transform .3s ease-out
}
.idx-kv_trailer::after {
content: "";
display: block;
position: absolute;
top: 0;
width: 100%;
height: 100%;
background: #e3388f;
opacity: .8;
mix-blend-mode: multiply
}
.idx-kv_bnrs {
position: relative;
margin-top: 10.6%;
padding: 3.3% 0;
background: rgba(232, 184, 25, .9)
}
.idx-kv_bnrs_items:not(:first-child) {
display: none
}
.idx-kv_bnrs ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: left;
-ms-flex-pack: left;
justify-content: left;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
position: relative;
width: 93.3%;
margin: 0 auto
}
.idx-kv_bnrs ul li {
width: 47.1%
}
.idx-kv_bnrs ul::after {
content: "";
display: block;
position: absolute;
width: 1px;
height: 100%;
right: 50%;
top: 0;
background: #fff
}
.idx-kv_bnrs_controller {
position: relative;
margin-top: 5.3%;
line-height: 0;
text-align: center;
z-index: 0
}
.idx-kv_bnrs_controller::before {
position: absolute;
top: 2px;
display: block;
content: '';
height: 4px;
z-index: -1
}
.idx-kv_bnrs_controller::before {
width: 100%;
background-color: rgba(255, 255, 255, .4)
}
.idx-kv_bnrs_progress {
position: absolute;
top: 2px;
width: 0;
height: 4px;
background-color: #fff;
z-index: 0
}
.idx-kv_bnrs_dots {
position: relative;
z-index: 1
}
.idx-kv_bnrs_dot {
display: inline-block;
width: 9.3%;
height: 8px;
background-color: #4f1e08
}
.idx-kv_bnrs_dot:not(:first-child) {
margin-left: 2.6%
}
.idx-kv_bnrs_dot.state-active {
background-color: #d74f13
}
.idx-update {
position: relative;
background-color: #e6b000;
z-index: 0;
margin-bottom: 53.3%
}
.idx-update_conte {
position: absolute;
top: -42.66667vw;
width: 100%
}
.idx-update_inner {
width: 87.3%;
margin: 0 auto;
padding: 10.6% 0 14.6%
}
.idx-update_news_item {
position: relative;
background-color: #4f1e08
}
.idx-update_news_item:not(:first-child) {
margin-top: 3%
}
.idx-update_news_item a {
position: relative;
display: block;
padding: 0 20px 30px;
background-color: #fff;
-webkit-box-sizing: border-box;
box-sizing: border-box
}
.idx-update_news_item a::after, .idx-update_news_item a::before {
position: absolute;
display: block;
content: '';
background-color: #4f1e08
}
.idx-update_news_item a::before {
width: 100%;
height: 1px;
left: 0;
bottom: 10px
}
.idx-update_news_item a::after {
width: 1px;
height: 100%;
top: 0;
right: 10px
}
.idx-update_news_date {
font-size: 14px;
font-size: .875rem;
display: inline-block;
padding: 3px 15px;
color: #fff;
line-height: 1;
background-color: #4f1e08;
-webkit-transform: translate(0, -3px);
-ms-transform: translate(0, -3px);
transform: translate(0, -3px)
}
.idx-update_news_text {
font-size: 14px;
font-size: .875rem;
margin-top: 10px;
color: #222
}
.idx-update_twitter {
width: 74.6%;
margin: 5% auto 0
}
.idx-update_twitter_inner {
padding: 7.1%;
background: #fff
}
.idx-update_twitter_title {
font-size: 6.4vw;
color: #4f1e08;
text-align: center;
-webkit-transform: translateY(40%);
-ms-transform: translateY(40%);
transform: translateY(40%)
}
.idx-update_twitter iframe {
display: block !important;
width: 740px !important;
height: 250px !important;
max-width: 100% !important;
margin: 0 auto !important;
border: 2px solid #4f1e08 !important;
-webkit-box-sizing: border-box;
box-sizing: border-box
}
.idx-update .site-btn {
margin-left: auto;
margin-right: auto
}
.idx-about {
position: relative;
background-color: #e3388f;
z-index: 0;
margin-bottom: 53.3%
}
.idx-about .idx-subtitle {
right: 0
}
.idx-about_conte {
position: absolute;
top: -40vw;
width: 100%
}
.idx-about_inner {
position: relative;
padding-top: 10.6%
}
.idx-about_textArea {
width: 87.3%;
margin: 0 auto
}
.idx-about_textArea p {
color: #fff
}
.idx-about_imgArea {
width: 100%;
height: 60vh;
margin-top: 10%
}
.idx-about_imgArea_row1 {
width: 100%
}
.idx-about_imgArea_row2 {
width: 100%
}
.idx-about_imgArea_row3 {
width: 100%
}
.idx-about_imgArea_row1 {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: left;
-ms-flex-pack: left;
justify-content: left;
height: 25%
}
.idx-about_imgArea_row3 {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: left;
-ms-flex-pack: left;
justify-content: left;
height: 25%
}
.idx-about_imgArea_row2 {
height: 50%
}
.idx-about_imgArea_col1 {
width: 50%;
height: 100%;
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: cover
}
.idx-about_imgArea_col2 {
width: 50%;
height: 100%;
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: cover
}
.idx-about_imgArea_col3 {
width: 50%;
height: 100%;
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: cover
}
.idx-about_imgArea_col4 {
width: 50%;
height: 100%;
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: cover
}
.idx-about_imgArea_col1 {
background-image: url(../img/top/about_img01.png)
}
.idx-about_imgArea_col2 {
background-image: url(../img/top/about_img02.png)
}
.idx-about_imgArea_col3 {
background-image: url(../img/top/about_img03.png)
}
.idx-about_imgArea_col4 {
background-image: url(../img/top/about_img04.png)
}
.idx-about_catchcopy span {
font-size: 5.33333vw
}
.idx-about_catchcopy b {
font-size: 7.46667vw;
font-weight: 900
}
.idx-about_text span {
font-size: 14px;
font-size: .875rem;
margin-top: 5%;
font-weight: 600
}
.idx-about_ytb {
position: relative;
height: 100%;
cursor: pointer;
overflow: hidden
}
.idx-about_ytb_iframe {
position: absolute;
right: 50%;
bottom: 50%;
-webkit-transform: translate(50%, 50%);
-ms-transform: translate(50%, 50%);
transform: translate(50%, 50%)
}
.idx-about_ytb::after {
content: "";
display: block;
position: absolute;
top: 0;
width: 100%;
height: 100%;
background: #e3388f;
opacity: .8;
mix-blend-mode: multiply;
z-index: 1
}
.idx-about_ytb_play {
position: absolute;
right: 50%;
bottom: 50%;
-webkit-transform: translate(50%, 50%);
-ms-transform: translate(50%, 50%);
transform: translate(50%, 50%);
width: 20%;
z-index: 2
}
.idx-about .site-btn {
margin: 10% auto 0
}
.idx-staffcast {
position: relative;
background-color: #279ce6;
z-index: 0
}
.idx-staffcast_conte {
position: absolute;
top: -41.33333vw;
width: 100%
}
.idx-staffcast_inner {
position: relative;
width: 87.3%;
margin: 0 auto;
padding: 16% 0
}
.idx-staffcast_box:nth-child(2) {
margin-top: 10%
}
.idx-staffcast_box_main {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: left;
-ms-flex-pack: left;
justify-content: left
}
.idx-staffcast_title {
font-size: 6.13333vw;
margin-left: 5%;
color: #fff
}
.idx-staffcast_item {
width: 50%;
padding-left: 5%;
color: #fff;
-webkit-box-sizing: border-box;
box-sizing: border-box
}
.idx-staffcast_item.state-long {
width: 100%
}
.idx-staffcast_item:nth-child(n+3) {
margin-top: 20px
}
.idx-staffcast_item dt {
font-size: 14px;
font-size: .875rem
}
.idx-staffcast_item dd {
font-size: 16px;
font-size: 1rem
}
#news .news-content {
background-color: #e3388f
}
#event .news-content {
background-color: #9a61ba
}
.news-content {
position: relative;
z-index: 0
}
.news-content .site-sectitle {
right: 0
}
.news-inner {
position: relative;
padding: 14.66667vw 0
}
.news-article {
width: 87.3%;
margin: 0 auto;
background: #fff
}
.news-article:not(:first-of-type) {
margin-top: 3rem
}
.news-article_header {
position: relative;
padding: 2.5rem 1rem 1.5rem;
border-bottom: 1px solid #4f1e08
}
.news-article_ttl {
font-size: 14px;
font-size: .875rem;
color: #d74f13
}
.news-article_date {
position: absolute;
top: 0;
left: 1rem;
display: inline-block;
padding: 0 .5em;
color: #fff;
background: #4f1e08
}
.news-article_inner {
font-size: 14px;
font-size: .875rem;
padding: 0 1rem 1rem
}
.news-article_inner > * {
margin-top: 2.25em
}
.news-article_inner a:not(.site-btn) {
color: #d74f13
}
.news-article_video {
position: relative;
width: 100%;
padding-top: 56.25%;
height: 0
}
.news-article_video iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important
}
.news-article_box {
padding: 1em;
border: 2px solid #4f1e08
}
.news-article_subtitle {
position: relative;
display: inline-block;
padding: .2em .5em;
margin-bottom: .25em;
color: #fff;
z-index: 0
}
.news-article_subtitle::before {
content: "";
position: absolute;
top: .1em;
left: 0;
width: 100%;
height: calc(100% - .2em);
background: #4f1e08;
z-index: -1
}
.news-article img {
width: 100%;
height: auto
}
.news-article img.alignleft {
display: block;
margin: 0
}
.news-article img.aligncenter {
display: block;
margin: 0 auto
}
.news-article img.alignright {
display: block;
margin: 0 0 0 auto
}
.introstory-content {
position: relative;
background-color: #279ce6;
z-index: 0
}
.introstory-content_main {
position: relative
}
.introstory-content_textArea_inner {
padding: 8% 4%
}
.introstory-content_text {
font-size: 14px;
font-size: .875rem;
line-height: 2;
color: #fff
}
.introstory-content_text:not(:first-child) {
margin-top: 5%
}
.introstory-content-intro section {
margin-top: 5vw
}
.introstory-content-intro .site-sectitle {
right: 0;
text-align: right;
z-index: 10;
line-height: .8;
-webkit-transform: translate(0, -80%);
-ms-transform: translate(0, -80%);
transform: translate(0, -80%)
}
.introstory-content-story {
margin-top: 36%
}
.introstory-content-story .site-sectitle {
z-index: 10
}
.introstory-content-story .introstory-content_main {
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse
}
.introstory-content-story .introstory-content_imageArea {
background: url(../img/introstory/story_image.png) 50% 0/cover no-repeat
}
.chara-content {
position: relative;
z-index: 0
}
.chara-content .site-sectitle {
right: 0
}
.chara-inner {
position: relative;
padding: 14.66667vw 0 0
}
.chara-list1 {
width: 100%
}
.chara-list1 li[data-id=aoi] {
background-color: #e6b000
}
.chara-list1 li[data-id=shizuka] {
background-color: #d74f13
}
.chara-list1 li[data-id=midori] {
background-color: #9a61ba
}
.chara-list1 li[data-id=misa] {
background-color: #279ce6
}
.chara-list1 li[data-id=ema] {
background-color: #9ab848
}
.chara-list1_inner {
position: relative;
padding-top: 32%;
overflow: hidden
}
.chara-list1_image {
position: absolute;
top: -10%;
right: 50%;
width: 60%;
-webkit-transform: translate(40%, 0);
-ms-transform: translate(40%, 0);
transform: translate(40%, 0)
}
.chara-list1_image img {
display: block;
-webkit-transition: -webkit-transform .15s ease-out;
transition: -webkit-transform .15s ease-out;
-o-transition: transform .15s ease-out;
transition: transform .15s ease-out;
transition: transform .15s ease-out, -webkit-transform .15s ease-out
}
.chara-list1_name1 {
font-size: 11.73333vw;
color: #fff;
line-height: 1
}
.chara-list1_name2 {
font-size: 11.73333vw;
color: #fff;
line-height: 1
}
.chara-list1_name1 {
position: absolute;
top: 0;
left: 0;
-webkit-transform: translate(0, -32%);
-ms-transform: translate(0, -32%);
transform: translate(0, -32%)
}
.chara-list1_name2 {
position: absolute;
right: 0;
bottom: 0;
-webkit-transform: translate(0, 25%);
-ms-transform: translate(0, 25%);
transform: translate(0, 25%)
}
.chara-list2 {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: left;
-ms-flex-pack: left;
justify-content: left;
width: 100%
}
.chara-list2 li {
width: 50%;
cursor: pointer
}
.chara-list2 li[data-id=miyai] {
background-color: #e6b000
}
/* 追加キャラ 黄→緑→赤→青→紫の順番 */
.chara-list2 li[data-id=yano] {
background-color: #9ab848
}
.chara-list2 li[data-id=sara] {
background-color: #d74f13
}
.chara-list2 li[data-id=ando] {
background-color: #279ce6
}
.chara-list2 li[data-id=ai] {
background-color: #9a61ba
}
.chara-list2 li[data-id=kyuji] {
background-color: #e6b000
}
.chara-list2 li[data-id=shun] {
background-color: #9ab848
}
.chara-list2 li[data-id=yuka] {
background-color: #d74f13
}
.chara-list2 li[data-id=taro] {
background-color: #279ce6
}
.chara-list2 li[data-id=hiraoka] {
background-color: #9a61ba
}
.chara-list2 li[data-id=seiichi] {
background-color: #e6b000
}
.chara-list2 li[data-id=gotaro] {
background-color: #9ab848
}
.chara-list2 li[data-id=yamada] {
background-color: #d74f13
}
.chara-list2 li[data-id=madoka] {
background-color: #279ce6
}
.chara-list2 li[data-id=endo] {
background-color: #9a61ba
}
.chara-list2 li[data-id=yuichiro] {
background-color: #e6b000
}
.chara-list2 li[data-id=sakura] {
background-color: #9ab848
}
.chara-list2 li[data-id=chiemi] {
background-color: #d74f13
}
.chara-list2 li[data-id=nao] {
background-color: #279ce6
}
.chara-list2 li[data-id=rinko] {
background-color: #9a61ba
}
.chara-list2 li[data-id=yumi] {
background-color: #e6b000
}
.chara-list2 li[data-id=misato] {
background-color: #9ab848
}
.chara-list2 li[data-id=sugie] {
background-color: #d74f13
}
.chara-list2 li[data-id=honda] {
background-color: #279ce6
}
.chara-list2 li[data-id=shimeji] {
background-color: #9a61ba
}
.chara-list2 li[data-id=masato] {
background-color: #e6b000
}
.chara-list2 li[data-id=yoshio] {
background-color: #9ab848
}
.chara-list2_inner {
position: relative;
padding-top: 75%;
overflow: hidden
}
.chara-list2_image {
position: absolute;
top: 5%;
right: 50%;
width: 100%;
-webkit-transform: translate(40%, 0);
-ms-transform: translate(40%, 0);
transform: translate(40%, 0)
}
.chara-list2_image img {
display: block;
-webkit-transition: -webkit-transform .15s ease-out;
transition: -webkit-transform .15s ease-out;
-o-transition: transform .15s ease-out;
transition: transform .15s ease-out;
transition: transform .15s ease-out, -webkit-transform .15s ease-out
}
.chara-list2_name1 {
font-size: 8.53333vw;
color: #fff;
line-height: 1
}
.chara-list2_name2 {
font-size: 8.53333vw;
color: #fff;
line-height: 1
}
.chara-list2_name1 {
position: absolute;
top: 0;
left: 0;
-webkit-transform: translate(-2%, -20%);
-ms-transform: translate(-2%, -20%);
transform: translate(-2%, -20%)
}
.chara-list2_name2 {
position: absolute;
right: 0;
bottom: 0;
-webkit-transform: translate(2%, 10%);
-ms-transform: translate(2%, 10%);
transform: translate(2%, 10%)
}
.chara-det {
position: absolute;
top: 0;
left: 0;
width: 100%;
min-height: 100vh;
z-index: 10000;
display: none
}
.chara-det_one {
position: relative;
width: 100%;
min-height: 100vh;
overflow: hidden;
display: none
}
.chara-det_one_bgcolor {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%
}
.chara-det_one_main {
position: relative;
padding: 13.3% 3.3% 32%;
min-height: 100%;
-webkit-box-sizing: border-box;
box-sizing: border-box
}
.chara-det_one_inner {
position: relative
}
.chara-det_one_bgimage {
position: absolute;
top: 5.3%;
padding: 6% 0 .3%
}
.chara-det_one_bgimage::after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
background: url(../img/character/bg_conte.png) 0 0/100% auto no-repeat
}
.chara-det_one_bgimage_inner {
position: relative
}
.chara-det_one_bgimage_inner::after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
background-color: rgba(255, 255, 255, .6)
}
.chara-det_one_bgname {
position: absolute;
bottom: 8%;
left: -3.4%;
font-size: 16vw;
line-height: 1;
color: #fff
}
.chara-det_one_image {
position: relative;
width: 74.2%;
margin-left: auto
}
.chara-det_one_textArea {
position: absolute;
top: 35vw;
left: 3%
}
.chara-det_one_name {
font-size: 6.4vw;
text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff;
color: #4f1e08
}
.chara-det_one_name small {
font-size: 14px;
font-size: .875rem
}
.chara-det_one_cv {
font-size: 3.2vw;
display: inline-block;
margin-top: 10px;
padding: 0 8px 0 15px;
background: #4f1e08;
border-radius: 12px;
color: #fff
}
.chara-det_one_text {
font-size: 3.46667vw;
text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff;
color: #4f1e08;
margin-top: 5%;
line-height: 1.7
}
.chara-det_one-aoi .chara-det_one_bgcolor {
background-color: #e6b000
}
.chara-det_one-shizuka .chara-det_one_bgcolor {
background-color: #d74f13
}
.chara-det_one-midori .chara-det_one_bgcolor {
background-color: #9a61ba
}
.chara-det_one-misa .chara-det_one_bgcolor {
background-color: #279ce6
}
.chara-det_one-ema .chara-det_one_bgcolor {
background-color: #9ab848
}
.chara-det_one-miyai .chara-det_one_bgcolor {
background-color: #e6b000
}
/* 追加キャラ 黄→緑→赤→青→紫の順番 */
.chara-det_one-yano .chara-det_one_bgcolor {
background-color: #9ab848
}
.chara-det_one-sara .chara-det_one_bgcolor {
background-color: #d74f13
}
.chara-det_one-ando .chara-det_one_bgcolor {
background-color: #279ce6
}
.chara-det_one-ai .chara-det_one_bgcolor {
background-color: #9a61ba
}
.chara-det_one-kyuji .chara-det_one_bgcolor {
background-color: #e6b000
}
.chara-det_one-shun .chara-det_one_bgcolor {
background-color: #9ab848
}
.chara-det_one-yuka .chara-det_one_bgcolor {
background-color: #d74f13
}
.chara-det_one-taro .chara-det_one_bgcolor {
background-color: #279ce6
}
.chara-det_one-hiraoka .chara-det_one_bgcolor {
background-color: #9a61ba
}
.chara-det_one-seiichi .chara-det_one_bgcolor {
background-color: #e6b000
}
.chara-det_one-gotaro .chara-det_one_bgcolor {
background-color: #9ab848
}
.chara-det_one-yamada .chara-det_one_bgcolor {
background-color: #d74f13
}
.chara-det_one-madoka .chara-det_one_bgcolor {
background-color: #279ce6
}
.chara-det_one-endo .chara-det_one_bgcolor {
background-color: #9a61ba
}
.chara-det_one-yuichiro .chara-det_one_bgcolor {
background-color: #e6b000
}
.chara-det_one-sakura .chara-det_one_bgcolor {
background-color: #9ab848
}
.chara-det_one-chiemi .chara-det_one_bgcolor {
background-color: #d74f13
}
.chara-det_one-nao .chara-det_one_bgcolor {
background-color: #279ce6
}
.chara-det_one-rinko .chara-det_one_bgcolor {
background-color: #9a61ba
}
.chara-det_one-yumi .chara-det_one_bgcolor {
background-color: #e6b000
}
.chara-det_one-misato .chara-det_one_bgcolor {
background-color: #9ab848
}
.chara-det_one-sugie .chara-det_one_bgcolor {
background-color: #d74f13
}
.chara-det_one-honda .chara-det_one_bgcolor {
background-color: #279ce6
}
.chara-det_one-shimeji .chara-det_one_bgcolor {
background-color: #9a61ba
}
.chara-det_one-masato .chara-det_one_bgcolor {
background-color: #e6b000
}
.chara-det_one-yoshio .chara-det_one_bgcolor {
background-color: #9ab848
}
.chara-det_close {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
width: 13.33333vw;
height: 13.33333vw;
color: #fff;
background: #222;
cursor: pointer;
position: fixed;
top: 0;
right: 0
}
.chara-det_close::before {
content: "";
display: block;
position: absolute;
width: calc(64 / 80 * 100%);
height: calc(64 / 80 * 100%);
top: calc(8 / 80 * 100%);
left: calc(8 / 80 * 100%);
border: 1px solid;
opacity: .4;
-webkit-box-sizing: border-box;
box-sizing: border-box
}
.chara-det_close span {
font-size: 2.13333vw;
display: block;
margin-top: 20%;
line-height: 0;
text-align: center;
white-space: nowrap
}
.chara-det_close i {
position: relative;
display: block;
width: 50%;
height: 20%
}
.chara-det_close i::before {
content: "";
display: block;
position: absolute;
width: 100%;
left: 0;
height: .53333vw;
border-radius: .53333vw;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: .2s ease;
-o-transition: .2s ease;
transition: .2s ease;
-webkit-transform-origin: center;
-ms-transform-origin: center;
transform-origin: center;
background-color: #fff
}
.chara-det_close i::after {
content: "";
display: block;
position: absolute;
width: 100%;
left: 0;
height: .53333vw;
border-radius: .53333vw;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: .2s ease;
-o-transition: .2s ease;
transition: .2s ease;
-webkit-transform-origin: center;
-ms-transform-origin: center;
transform-origin: center;
background-color: #fff
}
.chara-det_close i::before {
top: 50%;
-webkit-transform: rotate(30deg);
-ms-transform: rotate(30deg);
transform: rotate(30deg)
}
.chara-det_close i::after {
top: 50%;
-webkit-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
transform: rotate(-30deg)
}
.chara-det_controller {
position: relative
}
.chara-det_controller_close {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
width: 13.33333vw;
height: 13.33333vw;
color: #fff;
background: #222;
cursor: pointer;
position: relative
}
.chara-det_controller_close::before {
content: "";
display: block;
position: absolute;
width: calc(64 / 80 * 100%);
height: calc(64 / 80 * 100%);
top: calc(8 / 80 * 100%);
left: calc(8 / 80 * 100%);
border: 1px solid;
opacity: .4;
-webkit-box-sizing: border-box;
box-sizing: border-box
}
.chara-det_controller_close span {
font-size: 2.13333vw;
display: block;
margin-top: 20%;
line-height: 0;
text-align: center;
white-space: nowrap
}
.chara-det_controller_close i {
position: relative;
display: block;
width: 50%;
height: 20%
}
.chara-det_controller_close i::before {
content: "";
display: block;
position: absolute;
width: 100%;
left: 0;
height: .53333vw;
border-radius: .53333vw;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: .2s ease;
-o-transition: .2s ease;
transition: .2s ease;
-webkit-transform-origin: center;
-ms-transform-origin: center;
transform-origin: center;
background-color: #fff
}
.chara-det_controller_close i::after {
content: "";
display: block;
position: absolute;
width: 100%;
left: 0;
height: .53333vw;
border-radius: .53333vw;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: .2s ease;
-o-transition: .2s ease;
transition: .2s ease;
-webkit-transform-origin: center;
-ms-transform-origin: center;
transform-origin: center;
background-color: #fff
}
.chara-det_controller_close i::before {
top: 50%;
-webkit-transform: rotate(30deg);
-ms-transform: rotate(30deg);
transform: rotate(30deg)
}
.chara-det_controller_close i::after {
top: 50%;
-webkit-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
transform: rotate(-30deg)
}
.chara-det_controller_next {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
width: 13.33333vw;
height: 13.33333vw;
color: #fff;
background: #222;
cursor: pointer;
z-index: 0
}
.chara-det_controller_next::before {
content: "";
display: block;
position: absolute;
width: calc(64 / 80 * 100%);
height: calc(64 / 80 * 100%);
top: calc(8 / 80 * 100%);
left: calc(8 / 80 * 100%);
border: 1px solid;
opacity: .4;
-webkit-box-sizing: border-box;
box-sizing: border-box
}
.chara-det_controller_next span {
font-size: 2.13333vw;
display: block;
margin-top: 20%;
line-height: 0;
text-align: center;
white-space: nowrap
}
.chara-det_controller_next i {
position: relative;
display: block;
width: 50%;
height: 20%
}
.chara-det_controller_next i::before {
content: "";
display: block;
position: absolute;
width: 100%;
left: 0;
height: .53333vw;
border-radius: .53333vw;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: .2s ease;
-o-transition: .2s ease;
transition: .2s ease;
-webkit-transform-origin: center;
-ms-transform-origin: center;
transform-origin: center;
background-color: #fff
}
.chara-det_controller_next i::after {
content: "";
display: block;
position: absolute;
width: 100%;
left: 0;
height: .53333vw;
border-radius: .53333vw;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: .2s ease;
-o-transition: .2s ease;
transition: .2s ease;
-webkit-transform-origin: center;
-ms-transform-origin: center;
transform-origin: center;
background-color: #fff
}
.chara-det_controller_next i::after, .chara-det_controller_next i::before {
width: 60%;
left: 20%;
top: 25%;
-webkit-transform-origin: right;
-ms-transform-origin: right;
transform-origin: right
}
.chara-det_controller_next i::before {
-webkit-transform: rotate(20deg);
-ms-transform: rotate(20deg);
transform: rotate(20deg)
}
.chara-det_controller_next i::after {
-webkit-transform: rotate(-20deg);
-ms-transform: rotate(-20deg);
transform: rotate(-20deg)
}
.chara-det_controller_next_icon {
position: absolute;
top: 0;
left: -13.33333vw;
width: 100%
}
.chara-det_controller_prev {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
width: 13.33333vw;
height: 13.33333vw;
color: #fff;
background: #222;
cursor: pointer;
z-index: 0
}
.chara-det_controller_prev::before {
content: "";
display: block;
position: absolute;
width: calc(64 / 80 * 100%);
height: calc(64 / 80 * 100%);
top: calc(8 / 80 * 100%);
left: calc(8 / 80 * 100%);
border: 1px solid;
opacity: .4;
-webkit-box-sizing: border-box;
box-sizing: border-box
}
.chara-det_controller_prev span {
font-size: 2.13333vw;
display: block;
margin-top: 20%;
line-height: 0;
text-align: center;
white-space: nowrap
}
.chara-det_controller_prev i {
position: relative;
display: block;
width: 50%;
height: 20%
}
.chara-det_controller_prev i::before {
content: "";
display: block;
position: absolute;
width: 100%;
left: 0;
height: .53333vw;
border-radius: .53333vw;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: .2s ease;
-o-transition: .2s ease;
transition: .2s ease;
-webkit-transform-origin: center;
-ms-transform-origin: center;
transform-origin: center;
background-color: #fff
}
.chara-det_controller_prev i::after {
content: "";
display: block;
position: absolute;
width: 100%;
left: 0;
height: .53333vw;
border-radius: .53333vw;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: .2s ease;
-o-transition: .2s ease;
transition: .2s ease;
-webkit-transform-origin: center;
-ms-transform-origin: center;
transform-origin: center;
background-color: #fff
}
.chara-det_controller_prev i::after, .chara-det_controller_prev i::before {
width: 60%;
left: 20%;
top: 25%;
-webkit-transform-origin: left;
-ms-transform-origin: left;
transform-origin: left
}
.chara-det_controller_prev i::before {
-webkit-transform: rotate(-20deg);
-ms-transform: rotate(-20deg);
transform: rotate(-20deg)
}
.chara-det_controller_prev i::after {
-webkit-transform: rotate(20deg);
-ms-transform: rotate(20deg);
transform: rotate(20deg)
}
.chara-det_controller_prev_icon {
position: absolute;
top: 0;
right: -13.33333vw;
width: 100%
}
.movie-content {
position: relative;
z-index: 0
}
.movie-content .site-sectitle {
right: 0;
z-index: 10
}
.movie-box {
position: relative
}
.movie-box_main {
position: relative;
background-color: #d74f13;
z-index: 0
}
.movie-box_inner {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: left;
-ms-flex-pack: left;
justify-content: left;
position: relative
}
.movie-box_imageArea {
width: 50%
}
.movie-box_titleArea {
width: 50%
}
.movie-box_titleArea a {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
height: 100%;
color: #fff;
text-decoration: none;
javascript: void(0)
}
.movie-box_titleArea_play {
width: 21.3%;
margin: 0 auto
}
.movie-box_titleArea_pctitle {
display: none
}
.movie-box_sptitle {
font-size: 16px;
font-size: 1rem;
padding: 5px 0 20px;
text-align: center;
color: #4f1e08
}
.movie-box:nth-child(2n) .movie-box_inner {
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse
}
.movie-box:last-child .movie-box_sptitle {
padding-bottom: 0
}
/* THEATER
============================== */
.theater-content {
position: relative;
background-color: #e6b000;
z-index: 0
}
.theater-content .site-sectitle {
right: 0
}
.theater-inner {
position: relative;
padding: 14.66667vw 0
}
.theater-snavs {
position: relative;
width: 93.3%;
margin: 0 auto;
margin-bottom:3rem;
padding: 0 15px;
border-radius: 16px;
background: #4f1e08;
-webkit-box-sizing: border-box;
box-sizing: border-box;
z-index: 10
}
.theater-snavs ul {
letter-spacing: -.4em;
text-align: left;
text-align: center
}
.theater-snavs ul > * {
display: inline-block;
letter-spacing: normal
}
.theater-snavs_item {
font-size: 12px;
font-size: .75rem;
position: relative;
font-weight: 300;
line-height: 1
}
.theater-snavs_item:not(:last-child) {
padding-right: 15px
}
.theater-snavs_item:not(:first-child) {
padding-left: 15px
}
.theater-snavs_item:not(:first-child)::before {
content: "";
display: block;
position: absolute;
width: 1px;
height: 35%;
left: 0;
bottom: 50%;
-webkit-transform: translate(0, 50%);
-ms-transform: translate(0, 50%);
transform: translate(0, 50%);
background: #858585
}
.theater-snavs a {
display: block;
padding: 10px 0;
color: #fff;
text-decoration: none
}
.theater-section {
position: relative;
width: 93.3%;
margin: 10% auto 0;
border-radius: 16px;
overflow: hidden
}
.theater-section_title {
font-size: 14px;
font-size: .875rem;
padding: 5px 0;
background: #4f1e08;
font-weight: 400;
color: #fff;
text-align: center
}
.theater-section_title span {
-webkit-transform-origin: center;
-ms-transform-origin: center;
transform-origin: center;
margin-right: 0
}
.theater-databox {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: left;
-ms-flex-pack: left;
justify-content: left;
text-align: center;
background: #fbf6e5;
font-weight: 400
}
.theater-databox:nth-child(2n) {
background: #fff
}
.theater-databox-th {
background: #f5df99
}
.theater-databox_pref {
width: 25%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-top: 1px solid #c1c1c1
}
.theater-databox_details {
width: 75%
}
.theater-databox_one {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: left;
-ms-flex-pack: left;
justify-content: left;
border-top: 1px solid #c1c1c1
}
.theater-databox_pref {
font-size: 12px;
font-size: .75rem;
padding: 5px 10px;
-webkit-box-sizing: border-box;
box-sizing: border-box
}
.theater-databox_pref span {
-webkit-transform-origin: center;
-ms-transform-origin: center;
transform-origin: center;
margin-right: 0
}
.theater-databox_name {
font-size: 12px;
font-size: .75rem;
padding: 5px 10px;
-webkit-box-sizing: border-box;
box-sizing: border-box
}
.theater-databox_name span {
-webkit-transform-origin: center;
-ms-transform-origin: center;
transform-origin: center;
margin-right: 0
}
.theater-databox_date {
font-size: 12px;
font-size: .75rem;
padding: 5px 10px;
-webkit-box-sizing: border-box;
box-sizing: border-box
}
.theater-databox_date span {
-webkit-transform-origin: center;
-ms-transform-origin: center;
transform-origin: center;
margin-right: 0
}
.theater-databox_attention {
font-size: 12px;
font-size: .75rem;
padding: 5px 10px;
-webkit-box-sizing: border-box;
box-sizing: border-box
}
.theater-databox_attention span {
-webkit-transform-origin: center;
-ms-transform-origin: center;
transform-origin: center;
margin-right: 0
}
.theater-databox_name {
width: 50%;
border-left: 1px solid #c1c1c1
}
.theater-databox_name a {
color: #e3388f;
text-decoration: none
}
.theater-databox_date {
width: 25%;
border-left: 1px solid #c1c1c1
}
.theater-databox_attention {
width: 25%;
border-left: 1px solid #c1c1c1
}
.theater-att {
position: relative;
width: 93.3%;
margin: 10% auto 0
}
.theater-att li {
font-size: 14px;
font-size: .875rem
}
.theater-att li:not(:first-child) {
margin-top: 5px
}
.theater-article {
width: 93.3%;
margin: 0 auto;
background: #fff
}
.theater-article:not(:last-child) {
margin-bottom: 3rem
}
.theater-article_header {
position: relative;
padding: 1rem;
border-bottom: 1px solid #4f1e08
}
.theater-article_ttl {
font-size: 14px;
font-size: .875rem;
color: #d74f13
}
.theater-article_inner {
font-size: 14px;
font-size: .875rem;
padding: 1rem;
line-height: 1.5
}
.theater-article_inner p{
font-size: 12px;
font-size: .75rem
}
/*.theater-article_inner a:not(.site-btn) {
color: #d74f13
}*/
.theater-article_inner strong {
font-size: 16px;
font-size: 1rem;
font-weight: 400;
color: #d74f13;
}
.theater-article_inner small {
font-size: 12px;
font-size: .75rem;
}
.theater-article_box {
padding: 1em;
border: 2px solid #4f1e08
}
.theater-article_subtitle {
position: relative;
display: inline-block;
margin-bottom: .25em;
padding: 0 .5em;
color: #fff;
background-color: #4f1e08
}
.theater-article_imgBorderbox {
border: 1px solid #4f1e08
}
.theater-article_fxbox {
margin: 7% 0
}
.theater-article_fxbox_image {
width: 70%;
margin: 0 auto
}
.theater-article_fxbox_text {
margin-top: 7%
}
/* TICKET
============================== */
.ticket-content {
position: relative;
background-color: #e3388f;
z-index: 0
}
.ticket-content .site-sectitle {
right: 0
}
.ticket-inner {
position: relative;
padding: 14.66667vw 0
}
.ticket-article {
width: 87.3%;
margin: 0 auto;
background: #fff
}
.ticket-article:not(:last-child) {
margin-bottom: 3rem
}
.ticket-article_header {
position: relative;
padding: 1rem;
border-bottom: 1px solid #4f1e08
}
.ticket-article_ttl {
font-size: 14px;
font-size: .875rem;
color: #d74f13
}
.ticket-article_inner {
font-size: 14px;
font-size: .875rem;
padding: 1rem;
line-height: 1.5
}
.ticket-article_inner a:not(.site-btn) {
color: #d74f13
}
.ticket-article_inner strong {
font-size: 16px;
font-size: 1rem;
/*font-weight: 400*/
font-weight: bold;
color: #d74f13;
}
.ticket-article_inner small {
font-size: 12px;
font-size: .75rem
}
.ticket-article_box {
padding: 1em;
border: 2px solid #4f1e08
}
.ticket-article_subtitle {
position: relative;
display: inline-block;
margin-bottom: .25em;
padding: 0 .5em;
color: #fff;
background-color: #4f1e08
}
.ticket-article_imgBorderbox {
border: 1px solid #4f1e08
}
.ticket-article-1_fxbox {
margin: 7% 0
}
.ticket-article-1_fxbox_image {
width: 70%;
margin: 0 auto
}
.ticket-article-1_fxbox_text {
margin-top: 7%
}
.ticket-article-1_bnrs {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: left;
-ms-flex-pack: left;
justify-content: left;
margin-top: 7%
}
.ticket-article-1_bnrs li:not(:first-child) {
margin-left: 2vw
}
.ticket-article-1_bnrs img {
width: auto;
height: 10.5vw
}
.ticket-article-1_bnrs p {
text-align: center
}
.ticket-article-1_bnrs a {
-webkit-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
transition: all .2s ease-out
}
/* NOVELTY
============================== */
.novelty-content {
position: relative;
background-color: #9a61ba;
z-index: 0
}
.novelty-content .site-sectitle {
right: 0
}
.novelty-inner {
position: relative;
padding: 14.66667vw 0
}
.novelty-navs {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: left;
-ms-flex-pack: left;
justify-content: left;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin: 0 auto
}
.novelty-navs a {
display: block;
padding: 10px 0;
color: #fff;
text-decoration: none;
background: #4f1e08;
border: 2px solid #4f1e08;
text-align: center;
-webkit-box-sizing: border-box;
box-sizing: border-box
}
.novelty-article {
width: 87.3%;
margin: 0 auto;
background: #fff
}
.novelty-article:not(:last-child) {
margin-bottom: 3rem
}
.novelty-article_header {
position: relative;
padding: 1rem;
border-bottom: 1px solid #4f1e08
}
.novelty-article_ttl {
font-size: 14px;
font-size: .875rem;
color: #d74f13
}
.novelty-article_inner {
font-size: 14px;
font-size: .875rem;
padding: 1rem;
line-height: 1.5
}
.novelty-article_inner a:not(.site-btn) {
color: #d74f13
}
.novelty-article_inner strong {
font-size: 16px;
font-size: 1rem;
font-weight: 400
}
.novelty-article_inner small {
font-size: 12px;
font-size: .75rem
}
.novelty-article_box {
padding: 1em;
border: 2px solid #4f1e08
}
.novelty-article_subtitle {
position: relative;
display: inline-block;
margin-bottom: .25em;
padding: 0 .5em;
color: #fff;
background-color: #4f1e08
}
.novelty-article_imgBorderbox {
border: 1px solid #4f1e08
}
.novelty-article_fxbox {
margin: 7% 0
}
.novelty-article_fxbox_image {
width: 70%;
margin: 0 auto
}
.novelty-article_fxbox_text {
margin-top: 7%
}
.novelty-article_note {
color: #d74f13;
font-weight: 600;
}
/* GOODS
============================== */
.goods-content {
position: relative;
background-color: #279ce6;
z-index: 0
}
.goods-content .site-sectitle {
right: 0
}
.goods-inner {
position: relative;
padding: 14.66667vw 0
}
.goods-archives {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: left;
-ms-flex-pack: left;
justify-content: left;
margin: 0 auto
}
.goods-archives_card {
position: relative;
background-color: #4f1e08;
margin-bottom: 6%
}
.goods-archives_card_imageArea {
position: relative;
overflow: hidden;
width: 100%
}
.goods-archives_card_image {
padding-top: 100%;
background-position: 50% 50%;
background-size: contain;
background-repeat: no-repeat;
width: 90%;
background-position: center center;
margin: 5% 5% 0
}
.goods-archives_card_textArea {
position: relative;
padding: 25px;
width: 100%;
min-height: 50px
}
.goods-archives_card_textArea::after, .goods-archives_card_textArea::before {
position: absolute;
display: block;
content: '';
background-color: #4f1e08
}
.goods-archives_card_textArea::before {
width: 100%;
height: 1px;
left: 0;
bottom: 10px
}
.goods-archives_card_textArea::after {
width: 1px;
height: 100%;
top: 0;
right: 10px
}
.goods-archives_card a {
display: block;
height: 100%;
background-color: #fff;
text-decoration: none;
color: #d74f13;
width: 100%;
display: flex;
flex-wrap: wrap
}
.goods-article {
width: 87.3%;
margin: 0 auto;
background: #fff
}
.goods-article:not(:last-child) {
margin-bottom: 3rem
}
.goods-article_header {
position: relative;
padding: 1rem;
border-bottom: 1px solid #4f1e08
}
.goods-article_ttl {
font-size: 14px;
font-size: .875rem;
color: #d74f13
}
.goods-article_inner {
font-size: 14px;
font-size: .875rem;
padding: 1rem;
line-height: 1.5
}
.goods-article_inner a:not(.site-btn) {
color: #d74f13
}
.goods-article_inner strong {
font-size: 16px;
font-size: 1rem;
font-weight: 400
}
.goods-article_inner small {
font-size: 12px;
font-size: .75rem
}
.goods-article_fxbox {
margin: 7% 0
}
.goods-article_fxbox_image {
margin: 0 auto
}
.goods-article_fxbox_text {
margin-top: 7%
}
.goods-article_datas_item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: left;
-ms-flex-pack: left;
justify-content: left;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap
}
.goods-article_datas_item:not(:first-child) {
margin-top: 15px
}
.goods-article_datas_item dt {
margin-right: 15px;
color: #d74f13;
font-weight: 600;
white-space: nowrap
}
.goods-article_datas_item dt span {
display: inline-block;
padding-left: 15px;
color: #4f1e08
}
.goods-article_buy {
line-height: 1
}
.goods-article_buy a {
display: inline-block;
margin-top: 40px;
padding: 12px 40px;
border-radius: 24px;
border: 2px solid #4f1e08;
background-color: #4f1e08;
color: #fff !important;
text-decoration: none;
-webkit-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out
}
.goods-article_back {
text-align: center;
line-height: 1
}
.goods-article_back a {
display: inline-block;
margin: 0 auto;
padding: 12px 40px;
border-radius: 24px;
border: 2px solid #4f1e08;
background-color: transparent;
color: #4f1e08 !important;
text-decoration: none;
-webkit-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out
}
.music-content {
position: relative;
background-color: #d74f13;
z-index: 0;
}
.music-content .site-sectitle {
right: 0
}
.music-inner {
position: relative
}
.music-article {
margin: 0 auto;
background: #fff
}
.music-article:not(:last-child) {
margin-bottom: 3rem
}
.music-article_header {
position: relative;
padding: 1rem;
border-bottom: 1px solid #4f1e08
}
.music-article_ttl {
font-size: 14px;
font-size: .875rem;
color: #d74f13
}
.music-article_inner {
font-size: 14px;
font-size: .875rem;
padding: 1rem;
line-height: 1.5
}
.music-article_inner a:not(.site-btn) {
color: #d74f13
}
.music-article_inner strong {
font-size: 16px;
font-size: 1rem;
font-weight: 400
}
.music-article_inner small {
font-size: 12px;
font-size: .75rem
}
.music-article_box {
padding: 1em;
border: 2px solid #4f1e08
}
.music-article_subtitle {
position: relative;
display: inline-block;
margin-bottom: .75em;
padding: 0 .5em;
color: #fff;
background-color: #4f1e08
}
.music-article_fxbox_dl dt span {
color: #d74f13
}
/* Blu-ray&DVD
============================== */
.bddvd-content {
position: relative;
background-color: #9ab848;
z-index: 0;
}
.bddvd-content .site-sectitle {
right: 0
}
.bddvd-inner {
position: relative;
padding: 14.66667vw 0
}
.bddvd-navs {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: left;
-ms-flex-pack: left;
justify-content: left;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin: 0 auto
}
.bddvd-navs a {
display: block;
padding: 10px 0;
color: #fff;
text-decoration: none;
background: #4f1e08;
border: 2px solid #4f1e08;
text-align: center;
-webkit-box-sizing: border-box;
box-sizing: border-box
}
.bddvd-article {
width: 87.3%;
margin: 0 auto;
background: #fff
}
.bddvd-article:not(:last-child) {
margin-bottom: 3rem
}
.bddvd-article_header {
position: relative;
padding: 1rem;
border-bottom: 1px solid #4f1e08
}
.bddvd-article_ttl {
font-size: 14px;
font-size: .875rem;
color: #d74f13
}
.bddvd-article_inner {
font-size: 14px;
font-size: .875rem;
padding: 1rem;
line-height: 1.5;
}
.bddvd-article_inner a:not(.site-btn) {
color: #d74f13
}
.bddvd-article_inner strong {
font-size: 16px;
font-size: 1rem;
font-weight: 400
}
.bddvd-article_inner small {
font-size: 12px;
font-size: .75rem
}
.bddvd-article_box {
padding: 1em;
border: 2px solid #4f1e08
}
.bddvd-article_subtitle {
position: relative;
display: inline-block;
margin-bottom: .25em;
padding: 0 .5em;
color: #fff;
background-color: #4f1e08
}
.bddvd-article_imgBorderbox {
border: 1px solid #4f1e08
}
.bddvd-article_fxbox {
margin: 7% 0
}
.bddvd-article_fxbox_image {
width: 70%;
margin: 0 auto
}
.bddvd-article_fxbox_text {
margin-top: 7%
}
.bddvd-article_fxbox_text img{
display: block;
margin: 10px auto 20px;
}
.bddvd-article_note {
color: #d74f13;
font-weight: 600;
}
.bddvd-article_boximage:not(:last-child) {
margin-bottom: 40px;
}
.bddvd-article_boximage .bddvd-article_header {
padding-left: 0;
padding-right: 0;
margin-bottom: 40px;
}
.bddvd-article_boximage_txt span,
.bddvd-article_shopbox .bddvd-article_fxbox_text span {
color: #d74f13;
}
.bddvd-article_boximage .bddvd-article_fxbox_text {
width: 100%;
}
.bddvd-article_boximage .bddvd-article_fxbox {
margin-top: 20px;
}
.bddvd-article_boximage .bddvd-article_fxbox:last-child {
margin-bottom: 0;
}
.bddvd-article_boximage .bddvd-article_fxbox_text p,
.bddvd-article_boximage .bddvd-article_boximage_txt p,
.bddvd-article_shopbox .bddvd-article_fxbox_text p {
line-height: 1.8;
}
.bddvd-article_shopbox:not(:last-child) {
padding-bottom: 0;
}
.bddvd-article_shopbox .bddvd-article_fxbox:not(:last-child) {
border-bottom: 1px solid #4f1e08;
padding-bottom: 40px;
}
.bddvd-article_shopbox .bddvd-article_fxbox:last-child {
margin-bottom: 0;
}
.site-sectitle {
font-size: 168px;
font-size: 10.5rem
}
.site-header {
height: 320px;
padding-top: 0
}
.site-header_logo {
width: 244px;
left: 40px;
top: 30px
}
.site-header_logo a {
display: block;
-webkit-transition: opacity .3s ease-out;
-o-transition: opacity .3s ease-out;
transition: opacity .3s ease-out
}
.btnGnav {
width: 80px;
height: 80px
}
.btnGnav i::before {
height: 4px;
border-radius: 4px
}
.btnGnav i::after {
height: 4px;
border-radius: 4px
}
.btnGnav span {
margin-top: 16px
}
.btnGnav span::before {
font-size: 16px;
font-size: 1rem
}
.gnav_inner {
padding: 120px 0 40px
}
.gnav_logo {
position: fixed;
top: 30px;
left: 40px;
width: 244px;
z-index: 1
}
.gnav_logo a {
display: block;
-webkit-transition: opacity .3s ease-out;
-o-transition: opacity .3s ease-out;
transition: opacity .3s ease-out
}
.gnav_logo a:hover {
opacity: .8
}
.gnav_list li {
font-size: 48px;
font-size: 3rem
}
.gnav_list li:not(:first-child) {
margin-top: 15px
}
.gnav_list a {
padding-bottom: 15px
}
.gnav_list a::after {
height: 30px
}
.gnav_list a:hover::after {
width: 100%
}
.gnav_sns {
margin-top: 40px
}
.gnav_sns_caption {
font-size: 16px;
font-size: 1rem
}
.gnav_sns_list {
margin-top: 15px
}
.gnav_sns_list li:not(:first-child) {
margin-left: 15px
}
.gnav_sns_list li a {
width: 40px;
height: 40px;
-webkit-transition: .3s ease-out;
-o-transition: .3s ease-out;
transition: .3s ease-out
}
.gnav_sns_list li a:hover {
background: 0 0
}
.gnav_sns_list li a:hover img {
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%)
}
.site-footer {
margin-top: 325px
}
.site-footer-index {
margin-top: 400px
}
.site-footer_conte {
width: 1200px;
left: 40px;
top: -320px
}
.site-footer_date {
font-size: 168px;
font-size: 10.5rem
}
.site-footer_date small {
font-size: 88px;
font-size: 5.5rem
}
.site-footer_inner {
padding: 125px 0
}
.site-footer_logo {
width: 240px
}
.site-footer_sns {
margin-top: 40px
}
.site-footer_sns_caption {
font-size: 16px;
font-size: 1rem
}
.site-footer_sns_list {
margin-top: 15px
}
.site-footer_sns_list li:not(:first-child) {
margin-left: 15px
}
.site-footer_sns_list li a {
width: 40px;
height: 40px;
-webkit-transition: .3s ease-out;
-o-transition: .3s ease-out;
transition: .3s ease-out
}
.site-footer_sns_list li a:hover {
background: 0 0
}
.site-footer_sns_list li a:hover img {
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%)
}
.site-footer_bnrs {
margin-top: 80px
}
.site-footer_bnrs li {
width: 240px
}
.site-footer_bnrs li:not(:first-child) {
margin-left: 25px
}
.site-footer_pageup {
width: 64px;
right: 40px;
top: 80px
}
.site-footer_pageup a:hover {
background: 0 0
}
.site-footer_pageup a:hover img {
opacity: 1
}
.site-footer_attbox {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: left;
-ms-flex-pack: left;
justify-content: left;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 15px 30px;
text-align: left
}
.site-footer_copyright {
margin-top: 0;
text-align: right
}
.ytbModal_content {
width: 80%;
max-width: 860px
}
.ytbModal_close {
width: 80px;
height: 80px
}
.ytbModal_close i::before {
height: 4px;
border-radius: 4px
}
.ytbModal_close i::after {
height: 4px;
border-radius: 4px
}
.ytbModal_close span {
font-size: 16px;
font-size: 1rem;
margin-top: 16px
}
.site-vlines {
width: 50%
}
.spOnly {
display: none
}
.site-btn {
font-size: 16px;
font-size: 1rem;
width: 240px;
margin-top: 30px
}
.site-btn a {
padding: 15px 0;
border-radius: 32px;
-webkit-transition: all .4s ease-out;
-o-transition: all .4s ease-out;
transition: all .4s ease-out
}
.site-borLnk {
font-size: 16px;
font-size: 1rem;
margin-top: 30px
}
.site-borLnk a {
padding: 10px 40px;
border-radius: 32px;
-webkit-transition: all .4s ease-out;
-o-transition: all .4s ease-out;
transition: all .4s ease-out
}
.idx-subtitle {
font-size: 168px;
font-size: 10.5rem
}
.idx-kv {
padding-bottom: 400px
}
.idx-kv_main {
position: fixed;
top: 0;
width: 100%;
height: 100vh;
min-width: 1280px;
min-height: 630px
}
.idx-kv_titleArea {
width: 25%
}
.idx-kv_titleArea_inner {
padding-top: 0
}
.idx-kv_titleArea_main {
width: 220px;
top: 45px;
left: 50%;
-webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0)
}
.idx-kv_imageArea {
width: 50%
}
.idx-kv_imageName {
position: absolute;
right: 50%;
bottom: 152px;
font-size: 24px;
font-size: 1.5rem;
display: block;
padding: 0 120px 10px 10px;
font-weight: 400;
-webkit-transform: translate(-77%, 0);
-ms-transform: translate(-77%, 0);
transform: translate(-77%, 0);
background: url(../img/top/kv_vistitle_line.png) 100% 100% no-repeat;
z-index: 99
}
.idx-kv_spImageName {
display: none
}
.idx-kv_catchcopy {
width: 9.3%;
top: 45px;
right: 28%
}
.idx-kv_selectorArea {
position: absolute;
top: 0;
right: 0;
width: 25%;
height: 100%
}
.idx-kv_selectorArea_inner {
height: 100%;
padding-top: 0
}
.idx-kv_selector {
position: absolute;
bottom: 50%;
width: 100%;
margin-top: 0;
-webkit-transform: translate(0, 50%);
-ms-transform: translate(0, 50%);
transform: translate(0, 50%)
}
.idx-kv_selector_name {
font-size: 12px;
font-size: .75rem;
display: block;
line-height: 1;
color: #4f1e08;
white-space: nowrap
}
.idx-kv_selector_image {
display: block;
width: 200px;
margin: 5% auto 0;
border: 1px solid #222;
cursor: pointer;
overflow: hidden
}
.idx-kv_selector_imageInner {
-webkit-transition: -webkit-transform .2s ease-out;
transition: -webkit-transform .2s ease-out;
-o-transition: transform .2s ease-out;
transition: transform .2s ease-out;
transition: transform .2s ease-out, -webkit-transform .2s ease-out;
-webkit-backface-visibility: hidden;
backface-visibility: hidden
}
.idx-kv_selector_imageInner:hover {
-webkit-transform: scale(1.03);
-ms-transform: scale(1.03);
transform: scale(1.03)
}
.idx-kv_selector_controller {
margin-top: 5%
}
.idx-kv_selector_controller::before {
top: 3px;
height: 2px
}
.idx-kv_selector_progress {
top: 3px;
height: 2px
}
.idx-kv_selector_dot {
width: 7.5%;
height: 4px;
cursor: pointer
}
.idx-kv_selector_dot:not(:first-child) {
margin-left: 3.1%
}
.idx-kv_trailer {
width: 200px;
top: auto;
bottom: 0
}
.idx-kv_trailer:hover .idx-kv_trailer_play span {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg)
}
.idx-kv_bnrs {
position: absolute;
top: auto;
bottom: 0;
width: 640px;
margin-top: 0;
padding: 15px 0;
z-index: 1
}
.idx-kv_bnrs ul {
width: 560px
}
.idx-kv_bnrs ul li {
width: 240px
}
.idx-kv_bnrs ul li a {
-webkit-transition: opacity .3s ease-out;
-o-transition: opacity .3s ease-out;
transition: opacity .3s ease-out
}
.idx-kv_bnrs ul li a {
display: block
}
.idx-kv_bnrs ul li a:hover {
opacity: .7
}
.idx-kv_bnrs_controller {
margin-top: 15px
}
.idx-kv_bnrs_controller::before {
top: 3px;
height: 2px
}
.idx-kv_bnrs_progress {
top: 3px;
height: 2px
}
.idx-kv_bnrs_dot {
width: 7.5%;
height: 4px;
cursor: pointer
}
.idx-kv_bnrs_dot:not(:first-child) {
margin-left: 3.1%
}
.idx-update {
margin-bottom: 370px
}
.idx-update_conte {
width: 1200px;
top: -340px;
right: 40px
}
.idx-update_inner {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: left;
-ms-flex-pack: left;
justify-content: left;
width: calc(100% - 80px);
padding-bottom: 110px;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse
}
.idx-update_news {
width: calc(50% - 40px)
}
.idx-update_news_item:not(:first-child) {
margin-top: 24px
}
.idx-update_news_item a {
height: 120px;
-webkit-transition: -webkit-transform .15s ease-out;
transition: -webkit-transform .15s ease-out;
-o-transition: transform .15s ease-out;
transition: transform .15s ease-out;
transition: transform .15s ease-out, -webkit-transform .15s ease-out
}
.idx-update_news_item a:hover {
-webkit-transform: translate(-10px, -10px);
-ms-transform: translate(-10px, -10px);
transform: translate(-10px, -10px)
}
.idx-update_news_item a:hover .idx-update_news_text {
color: #d74f13
}
.idx-update_twitter {
width: calc(50% - 40px);
margin: -80px 0 0
}
.idx-update_twitter_inner {
padding: 30px
}
.idx-update_twitter_title {
font-size: 48px;
font-size: 3rem;
text-align: left
}
.idx-update_twitter iframe {
height: 350px !important
}
.idx-update .site-btn {
margin-right: 0
}
.idx-about {
margin-bottom: 370px
}
.idx-about_conte {
width: 1200px;
top: -300px;
left: 40px
}
.idx-about_inner {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: left;
-ms-flex-pack: left;
justify-content: left;
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
padding-top: 0
}
.idx-about_textArea {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 50%;
margin: 0
}
.idx-about_textArea_main {
width: 565px
}
.idx-about_imgArea {
width: 50%;
height: 100vh;
margin-top: 0
}
.idx-about_catchcopy span {
font-size: 40px;
font-size: 2.5rem
}
.idx-about_catchcopy b {
font-size: 56px;
font-size: 3.5rem
}
.idx-about_text span {
font-size: 16px;
font-size: 1rem;
margin-top: 30px
}
.idx-about_ytb_play {
width: 130px
}
.idx-about_ytb_play img {
display: block;
-webkit-transition: -webkit-transform .2s cubic-bezier(.175, .885, .32, 1.275);
transition: -webkit-transform .2s cubic-bezier(.175, .885, .32, 1.275);
-o-transition: transform .2s cubic-bezier(.175, .885, .32, 1.275);
transition: transform .2s cubic-bezier(.175, .885, .32, 1.275);
transition: transform .2s cubic-bezier(.175, .885, .32, 1.275), -webkit-transform .2s cubic-bezier(.175, .885, .32, 1.275)
}
.idx-about_ytb:hover .idx-about_ytb_play img {
-webkit-transform: scale(1.15);
-ms-transform: scale(1.15);
transform: scale(1.15)
}
.idx-about .site-btn {
margin: 60px 0 0 auto
}
.idx-staffcast_conte {
width: 1200px;
top: -300px;
right: 40px
}
.idx-staffcast_inner {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: left;
-ms-flex-pack: left;
justify-content: left;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
width: 100%;
padding: 120px 0
}
.idx-staffcast_box {
width: 50%
}
.idx-staffcast_box:nth-child(2) {
margin-top: 0
}
.idx-staffcast_title {
margin-left: 40px;
font-size: 46px;
font-size: 2.875rem
}
.idx-staffcast_item {
padding-left: 40px
}
.idx-staffcast_item dt {
font-size: 15px;
font-size: .9375rem
}
.idx-staffcast_item dd {
font-size: 20px;
font-size: 1.25rem
}
.news-inner {
padding: 110px 0
}
.news-article {
width: 50%;
min-width: 880px
}
.news-article:not(:first-of-type) {
margin-top: 80px
}
.news-article_header {
padding: 40px 40px 30px
}
.news-article_ttl {
font-size: 24px;
font-size: 1.5rem;
line-height: 2
}
.news-article_date {
left: 25px
}
.news-article_inner {
font-size: 16px;
font-size: 1rem;
padding: 0 40px 40px;
line-height: 2
}
.news-article img {
width: auto;
max-width: 100%
}
.introstory-content_main {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: left;
-ms-flex-pack: left;
justify-content: left
}
.introstory-content_imageArea {
width: 50%
}
.introstory-content_textArea {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 50%
}
.introstory-content_textArea_inner {
width: 570px
}
.introstory-content_text {
font-size: 16px;
font-size: 1rem
}
.introstory-content_text:not(:first-child) {
margin-top: 30px
}
.introstory-content-intro section {
margin-top: 0
}
.introstory-content-intro .site-sectitle {
-webkit-transform: translate(0, -65%);
-ms-transform: translate(0, -65%);
transform: translate(0, -65%)
}
.introstory-content-story {
margin-top: 230px
}
.introstory-content-story .introstory-content_textArea_inner {
padding: 12% 4%
}
.chara-inner {
padding: 110px 0 0
}
.chara-list1 {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: left;
-ms-flex-pack: left;
justify-content: left
}
.chara-list1 li {
width: 20%;
cursor: pointer
}
.chara-list1 li:hover .chara-list1_image img {
-webkit-transform: scale(1.05);
-ms-transform: scale(1.05);
transform: scale(1.05)
}
.chara-list1_inner {
height: 640px;
padding-top: 0
}
.chara-list1_image {
width: 400px;
top: 40px
}
.chara-list1_name1 {
font-size: 88px;
font-size: 5.5rem
}
.chara-list1_name2 {
font-size: 88px;
font-size: 5.5rem
}
.chara-list1_name1 {
left: -20px;
-webkit-transform: rotate(90deg) translate(0, -100%);
-ms-transform: rotate(90deg) translate(0, -100%);
transform: rotate(90deg) translate(0, -100%);
-webkit-transform-origin: left top;
-ms-transform-origin: left top;
transform-origin: left top
}
.chara-list1_name1 span {
display: block;
-webkit-transform: scaleX(-1) scaleY(-1);
-ms-transform: scaleX(-1) scaleY(-1);
transform: scaleX(-1) scaleY(-1)
}
.chara-list1_name2 {
right: 0;
-webkit-transform: rotate(90deg) translate(0, 100%);
-ms-transform: rotate(90deg) translate(0, 100%);
transform: rotate(90deg) translate(0, 100%);
-webkit-transform-origin: right bottom;
-ms-transform-origin: right bottom;
transform-origin: right bottom
}
.chara-list1_name2 span {
display: block;
-webkit-transform: scaleX(-1) scaleY(-1);
-ms-transform: scaleX(-1) scaleY(-1);
transform: scaleX(-1) scaleY(-1)
}
.chara-list2 {
margin-top: 80px
}
.chara-list2 li {
width: 25%
}
.chara-list2 li:hover .chara-list2_image img {
-webkit-transform: scale(1.05);
-ms-transform: scale(1.05);
transform: scale(1.05)
}
.chara-list2_inner {
height: 240px;
padding-top: 0
}
.chara-list2_image {
width: 400px;
top: 10px
}
.chara-list2_name1 {
font-size: 64px;
font-size: 4rem
}
.chara-list2_name2 {
font-size: 64px;
font-size: 4rem
}
.chara-det_one_main {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 50px 0 0
}
.chara-det_one_inner {
width: 1000px;
padding-bottom: 50px
}
.chara-det_one_bgimage {
position: relative;
top: 0;
padding: 60px 0 3px
}
.chara-det_one_bgname {
font-size: 160px;
font-size: 10rem;
bottom: -20px;
left: -145px
}
.chara-det_one_image {
position: absolute;
top: 0;
left: -50px;
width: 400px;
margin: auto
}
.chara-det_one_textArea {
width: 530px;
left: 42%;
top: 100px
}
.chara-det_one_name {
font-size: 48px;
font-size: 3rem
}
.chara-det_one_name small {
font-size: 16px;
font-size: 1rem
}
.chara-det_one_cv {
font-size: 16px;
font-size: 1rem
}
.chara-det_one_text {
font-size: 16px;
font-size: 1rem
}
.chara-det_close {
width: 80px;
height: 80px
}
.chara-det_close span {
font-size: 16px;
font-size: 1rem;
margin-top: 16px
}
.chara-det_close i::before {
height: 4px;
border-radius: 4px
}
.chara-det_close i::after {
height: 4px;
border-radius: 4px
}
.chara-det_controller {
position: fixed;
right: 0;
bottom: 0
}
.chara-det_controller_close {
width: 80px;
height: 80px
}
.chara-det_controller_close span {
font-size: 16px;
font-size: 1rem;
margin-top: 16px
}
.chara-det_controller_close i::before {
height: 4px;
border-radius: 4px
}
.chara-det_controller_close i::after {
height: 4px;
border-radius: 4px
}
.chara-det_controller_close {
display: none
}
.chara-det_controller_next {
width: 80px;
height: 80px
}
.chara-det_controller_next span {
font-size: 16px;
font-size: 1rem;
margin-top: 16px
}
.chara-det_controller_next i::before {
height: 4px;
border-radius: 4px
}
.chara-det_controller_next i::after {
height: 4px;
border-radius: 4px
}
.chara-det_controller_next_icon {
left: 0;
opacity: 0
}
.chara-det_controller_next:hover .chara-det_controller_next_icon {
opacity: 1
}
.chara-det_controller_prev {
width: 80px;
height: 80px
}
.chara-det_controller_prev span {
font-size: 16px;
font-size: 1rem;
margin-top: 16px
}
.chara-det_controller_prev i::before {
height: 4px;
border-radius: 4px
}
.chara-det_controller_prev i::after {
height: 4px;
border-radius: 4px
}
.chara-det_controller_prev {
margin-top: 30px
}
.chara-det_controller_prev_icon {
right: 0;
left: 0;
opacity: 0
}
.chara-det_controller_prev:hover .chara-det_controller_prev_icon {
opacity: 1
}
.movie-box_titleArea a:hover .movie-box_titleArea_play {
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1)
}
.movie-box_titleArea_play {
width: 80px;
-webkit-transition: -webkit-transform .2s ease-out;
transition: -webkit-transform .2s ease-out;
-o-transition: transform .2s ease-out;
transition: transform .2s ease-out;
transition: transform .2s ease-out, -webkit-transform .2s ease-out
}
.movie-box_titleArea_pctitle {
font-size: 16px;
font-size: 1rem;
display: block;
margin-top: 15px
}
.movie-box_sptitle {
display: none
}
/* THEATER
============================== */
.theater-inner {
padding: 110px 0
}
.theater-snavs {
width: 1040px;
border-radius: 24px
}
.theater-snavs_item {
font-size: 16px;
font-size: 1rem
}
.theater-snavs_item:not(:last-child) {
padding-right: 30px
}
.theater-snavs_item:not(:first-child) {
padding-left: 30px
}
.theater-snavs a:hover {
color: #e6b000
}
.theater-section {
width: 1040px;
margin-top: 60px
}
.theater-section_title {
font-size: 16px;
font-size: 1rem;
padding: 5px 0
}
.theater-databox_pref {
font-size: 14px;
font-size: .875rem
}
.theater-databox_name {
font-size: 14px;
font-size: .875rem
}
.theater-databox_date {
font-size: 14px;
font-size: .875rem
}
.theater-databox_attention {
font-size: 14px;
font-size: .875rem
}
.theater-databox_attention {
display: block
}
.theater-att {
width: 1040px;
margin-top: 60px
}
.theater-article {
width: 1040px;
min-width: 880px;
margin-top: 80px
}
.theater-article:not(:last-child) {
margin-bottom: 80px
}
.theater-article_header {
padding: 20px 40px
}
.theater-article_ttl {
font-size: 24px;
font-size: 1.5rem;
line-height: 2
}
.theater-article_inner {
font-size: 16px;
font-size: 1rem;
padding: 40px
}
.theater-article_inner strong {
font-size: 18px;
font-size: 1.125rem
}
.theater-article_inner p {
font-size: 18px;
font-size: 1.125rem
}
.theater-article_imgBorderbox {
display: inline-block
}
.theater-article_imgBorderbox img {
max-width: 100%;
width: auto;
height: auto
}
.theater-article_fxbox {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: left;
-ms-flex-pack: left;
justify-content: left;
margin: 40px 0;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between
}
.theater-article_fxbox_image {
width: 280px;
margin: 0
}
.theater-article_fxbox_text {
width: 435px;
margin-top: 0
}
/* TICKET
============================== */
.ticket-inner {
padding: 110px 0
}
.ticket-article {
width: 50%;
min-width: 880px
}
.ticket-article:not(:last-child) {
margin-bottom: 80px
}
.ticket-article_header {
padding: 20px 40px
}
.ticket-article_ttl {
font-size: 24px;
font-size: 1.5rem;
line-height: 2
}
.ticket-article_inner {
font-size: 16px;
font-size: 1rem;
padding: 40px
}
.ticket-article_inner strong {
font-size: 18px;
font-size: 1.125rem
}
.ticket-article_imgBorderbox {
display: inline-block
}
.ticket-article_imgBorderbox img {
max-width: 100%;
width: auto;
height: auto
}
.ticket-article-1_fxbox {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: left;
-ms-flex-pack: left;
justify-content: left;
margin: 40px 0;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between
}
.ticket-article-1_fxbox_image {
width: 280px;
margin: 0
}
.ticket-article-1_fxbox_text {
width: 435px;
margin-top: 0
}
.ticket-article-1_bnrs {
margin-top: 30px
}
.ticket-article-1_bnrs li:not(:first-child) {
margin-left: 15px
}
.ticket-article-1_bnrs img {
height: 60px
}
.ticket-article-1_bnrs a:hover {
opacity: .85
}
/* NOVELTY
============================== */
.novelty-inner {
padding: 110px 0
}
.novelty-navs {
width: 800px
}
.novelty-navs li {
width: 240px;
margin-left: 40px
}
.novelty-navs li:nth-child(3n+1) {
margin-left: 0
}
.novelty-navs li:nth-child(n+4) {
margin-top: 24px
}
.novelty-navs a {
font-size: 16px;
font-size: 1rem;
line-height: 1;
border-radius: 24px;
-webkit-transition: all .4s ease-out;
-o-transition: all .4s ease-out;
transition: all .4s ease-out
}
.novelty-navs a:hover {
background: 0 0
}
.novelty-article {
width: 50%;
min-width: 880px;
margin-top: 80px
}
.novelty-article:not(:last-child) {
margin-bottom: 80px
}
.novelty-article_header {
padding: 20px 40px
}
.novelty-article_ttl {
font-size: 24px;
font-size: 1.5rem;
line-height: 2
}
.novelty-article_inner {
font-size: 16px;
font-size: 1rem;
padding: 40px
}
.novelty-article_inner strong {
font-size: 18px;
font-size: 1.125rem
}
.novelty-article_imgBorderbox {
display: inline-block
}
.novelty-article_imgBorderbox img {
max-width: 100%;
width: auto;
height: auto
}
.novelty-article_fxbox {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: left;
-ms-flex-pack: left;
justify-content: left;
margin: 40px 0;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between
}
.novelty-article_fxbox_image {
width: 280px;
margin: 0
}
.novelty-article_fxbox_text {
width: 435px;
margin-top: 0
}
.goods-inner {
padding: 110px 0
}
.goods-archives {
width: 93.7%
}
.goods-archives_card {
width: 240px;
width: 20%;
margin-left: 6.6%
}
.goods-archives_card:nth-child(4n+1) {
margin-left: 0
}
.goods-archives_card_textArea {
font-size: 16px;
font-size: 1rem
}
.goods-archives_card a {
-webkit-transition: -webkit-transform .15s ease-out;
transition: -webkit-transform .15s ease-out;
-o-transition: transform .15s ease-out;
transition: transform .15s ease-out;
transition: transform .15s ease-out, -webkit-transform .15s ease-out
}
.goods-archives_card a:hover {
-webkit-transform: translate(-10px, -10px);
-ms-transform: translate(-10px, -10px);
transform: translate(-10px, -10px)
}
.goods-article {
width: 50%;
min-width: 880px
}
.goods-article:not(:last-child) {
margin-bottom: 80px
}
.goods-article_header {
padding: 20px 40px
}
.goods-article_ttl {
font-size: 24px;
font-size: 1.5rem;
line-height: 2
}
.goods-article_inner {
font-size: 16px;
font-size: 1rem;
padding: 40px
}
.goods-article_inner strong {
font-size: 18px;
font-size: 1.125rem
}
.goods-article_fxbox {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: left;
-ms-flex-pack: left;
justify-content: left;
margin: 40px 0;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between
}
.goods-article_fxbox_image {
width: 400px;
margin: 0
}
.goods-article_fxbox_text {
width: 360px;
margin-top: 0
}
.goods-article_buy a:hover {
background-color: #fff;
color: #4f1e08 !important
}
.goods-article_back a:hover {
background-color: #4f1e08;
color: #fff !important
}
.music-inner {
padding: 110px 0
}
.music-article {
width: 50%;
min-width: 880px
}
.music-article:not(:last-child) {
margin-bottom: 80px
}
.music-article_header {
padding: 20px 40px
}
.music-article_ttl {
font-size: 24px;
font-size: 1.5rem;
line-height: 2
}
.music-article_inner {
font-size: 16px;
font-size: 1rem;
padding: 40px
}
.music-article_inner strong {
font-size: 18px;
font-size: 1.125rem
}
.music-article_fxbox {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: left;
-ms-flex-pack: left;
justify-content: left;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
margin-top: 80px
}
.music-article_fxbox_image {
width: 400px
}
.music-article_fxbox_texts {
font-size: 16px;
font-size: 1rem;
width: 360px;
-webkit-box-sizing: border-box;
box-sizing: border-box
}
.music-article_fxbox_dl {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: left;
-ms-flex-pack: left;
justify-content: left;
margin-bottom: 5px;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between
}
.music-article_fxbox_dl dt {
width: 80px
}
.music-article_fxbox_dl dd {
width: 270px;
-webkit-box-sizing: border-box;
box-sizing: border-box
}
/* Blu-ray&DVD
============================== */
.bddvd-inner {
padding: 110px 0
}
.bddvd-navs {
width: 650px
}
.bddvd-navs li {
width: 300px;
margin-left: 40px
}
.bddvd-navs li:nth-child(2n+1) {
margin-left: 0
}
.bddvd-navs li:nth-child(n+3) {
margin-top: 24px
}
.bddvd-navs a {
font-size: 16px;
font-size: 1rem;
line-height: 1;
border-radius: 24px;
-webkit-transition: all .4s ease-out;
-o-transition: all .4s ease-out;
transition: all .4s ease-out
}
.bddvd-navs a:hover {
background: 0 0
}
.bddvd-article {
width: 50%;
min-width: 880px;
margin-top: 80px
}
.bddvd-article:not(:last-child) {
margin-bottom: 80px
}
.bddvd-article_header {
padding: 20px 40px
}
.bddvd-article_ttl {
font-size: 24px;
font-size: 1.5rem;
line-height: 2
}
.bddvd-article_inner {
font-size: 16px;
font-size: 1rem;
padding: 40px
}
.bddvd-article_inner strong {
font-size: 18px;
font-size: 1.125rem
}
.bddvd-article_imgBorderbox {
display: inline-block
}
.bddvd-article_imgBorderbox img {
max-width: 100%;
width: auto;
height: auto
}
.bddvd-article_fxbox {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: left;
-ms-flex-pack: left;
justify-content: left;
margin: 40px 0;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between
}
.bddvd-article_fxbox_image {
width: 280px;
margin: 0
}
.bddvd-article_fxbox_text {
width: 435px;
margin-top: 0
}
.bddvd-article_fxbox_text .img_special01{
width: 280px;
}
.bddvd-article_fxbox_text .img_special02{
width: 600px;
}
.bddvd-article_shopbox .posi-image {
position: relative;
}
.bddvd-article_shopbox .posi-image .img {
position: absolute;
bottom: 0;
left: 325px;
width: 75%;
}
}
.site-footer_bnrs li:nth-child(n+3) {
margin-top: 3.33333vw
}
.ytbModal_content {
width: 100%
}
.pcOnly {
display: none
}
.site-borLnk {
width: 38.66667vw;
margin-top: 4vw;
line-height: 1;
font-weight: 700
}
.site-borLnk a {
padding: 1.33333vw 5.33333vw;
border-radius: 30px
}
.introstory-content-story .introstory-content_imageArea {
padding-top: 65%
}
.chara-det_controller {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: left;
-ms-flex-pack: left;
justify-content: left;
position: absolute;
bottom: 5%;
left: 0;
width: 100%;
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between
}
.novelty-navs {
width: 86.6%
}
.novelty-navs li {
width: 30%;
margin-left: 5%
}
.novelty-navs li:nth-child(3n+1) {
margin-left: 0
}
.novelty-navs li:nth-child(n+4) {
margin-top: 5%
}
.novelty-navs a {
font-size: 3.2vw;
line-height: 1;
border-radius: 3.2vw
}
.novelty-article {
margin-top: 10%
}
.goods-archives {
width: 87.3%
}
.goods-archives_card {
width: 45%;
margin-right: 10%
}
.goods-archives_card:nth-child(even) {
margin-right: 0
}
.goods-archives_card_textArea {
font-size: 14px;
font-size: .875rem
}
.music-inner {
padding: 14.66667vw 0
}
.music-article {
width: 87.3%
}
.music-article_fxbox {
margin-top: 10%
}
.music-article_fxbox_texts {
font-size: 14px;
font-size: .875rem;
margin-top: 5%
}
.music-article_fxbox_dl {
margin-bottom: 2%
}
.bddvd-navs {
width: 86.6%
}
.bddvd-navs li {
width: 47%;
margin-left: 5%
}
.bddvd-navs li:nth-child(2n+1) {
margin-left: 0
}
.bddvd-navs li:nth-child(n+3) {
margin-top: 5%
}
.bddvd-navs a {
font-size: 3.2vw;
line-height: 1.5;
border-radius: 3.2vw
}
.bddvd-article {
margin-top: 10%
}
.bddvd-article_boximage:not(:last-child),
.bddvd-article_boximage .bddvd-article_header {
margin-bottom: 20px;
}
.bddvd-article_boximage .bddvd-article_fxbox:not(:last-child) {
margin-bottom: 40px;
}
.bddvd-article_shopbox .bddvd-article_fxbox:not(:last-child) {
margin-bottom: 40px;
}
.bddvd-article_shopbox .posi-image .img {
margin-top: 20px;
}
.bddvd-article_fxbox_text .img_special01{
width: 70%;
}
}
}
背景动画HTML代码
</style>
<div class="bg-image">
<div class="bg-image-ptn-set ptn-set01" style="transform: matrix(1, 0, 0, 1, 0, 0);">
<div class="bg-image-ptn ptn-moon act-rotate act-duration-4 act-delay-0 color-purple rotate-3" style="top:12%; left:7%; width:75px;">
<div><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path vector-effect="non-scaling-stroke" d="M90.3,48l0-.49v-.15c0-.48-.07-1-.12-1.44v-.06c0-.21,0-.42-.07-.64q-.09-.77-.21-1.53l0-.15-.06-.34c-.1-.6-.22-1.22-.37-1.88,0-.2-.08-.39-.13-.58l0-.19c-.09-.38-.19-.76-.29-1.14s-.16-.59-.25-.88-.2-.66-.31-1l-.07-.21c-.07-.23-.15-.46-.23-.69s-.24-.65-.36-1l0-.12c-.2-.53-.42-1.06-.64-1.57l0-.12-.24-.54c-.17-.37-.34-.73-.52-1.09l-.27-.54c-.2-.39-.4-.78-.61-1.16l0,0c-.5-.9-1-1.82-1.64-2.7l-.06-.1q-.4-.62-.84-1.2l-.19-.26c-.29-.4-.58-.8-.89-1.19l-.21-.26-.09-.11-.13-.15a41.54,41.54,0,0,0-5.09-5.25,2.83,2.83,0,0,0-4.46,3.2,23.54,23.54,0,0,1,1.5,5.94c.06.49.1.94.13,1.38a.34.34,0,0,0,0,.1c0,.48,0,.92,0,1.32a23.58,23.58,0,0,1-47.15,0c0-.4,0-.84,0-1.33v-.08c0-.42.06-.85.11-1.29v-.14a23.67,23.67,0,0,1,1.5-5.9,2.83,2.83,0,0,0-4.47-3.2,41.35,41.35,0,0,0-5.12,5.28l-.09.11,0,.05-.07.09-.07.09-.13.16c-.3.38-.6.78-.89,1.17l-.2.28c-.28.39-.55.79-.82,1.19l-.07.11c-.59.9-1.14,1.8-1.64,2.71l0,0-.61,1.16-.27.54c-.18.36-.35.73-.52,1.09l-.24.56-.05.11c-.22.5-.42,1-.62,1.5l0,.07c-.14.36-.28.72-.41,1.08s-.15.46-.23.69l-.06.2c-.11.34-.22.67-.32,1s-.17.58-.25.87-.2.76-.29,1.15l0,.18c0,.19-.1.38-.14.58-.15.66-.27,1.28-.37,1.88,0,.11,0,.22,0,.34l0,.15c-.09.51-.16,1-.22,1.53,0,.22-.05.44-.07.65-.05.53-.09,1-.13,1.49v.15l0,.49c0,.76-.05,1.44-.05,2.07a40.55,40.55,0,1,0,81.09,0C90.36,49.39,90.34,48.71,90.3,48Z"></path></svg></div>
</div>
<div class="bg-image-ptn ptn-star act-rotate act-duration-0 act-delay-0 color-yellow rotate-0" style="top:10%; left:85%; width:75px;">
<div><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path vector-effect="non-scaling-stroke" d="M86.69,36.14,66.61,33.22h0l-4-.59L60.78,29h0l-4.49-9.09-4.49-9.1c-1-2-2.61-2-3.6,0l-4.49,9.1L39.22,29h0l-1.8,3.65-4,.59h0l-10,1.46-10,1.46c-2.22.32-2.72,1.86-1.12,3.43L26.72,53.73h0l2.92,2.84-.69,4h0l-3.43,20c-.38,2.21.93,3.16,2.92,2.12l9-4.72L50,71.36,62.58,78l9,4.72c2,1,3.3.09,2.92-2.12l-1.71-10-2.41-14,10.18-9.92,7.27-7.08C89.41,38,88.91,36.46,86.69,36.14Z"></path></svg></div>
</div>
<div class="bg-image-ptn ptn-heart act-scale act-duration-2 act-delay-2 color-pink rotate-1" style="top:79%; left:97%; width:75px;">
<div><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path vector-effect="non-scaling-stroke" d="M49.88,80.57c2.35-.11,11-2.68,21.88-10.81s15.62-20,13.69-30.61S76.94,23.49,67.26,22.46a20.2,20.2,0,0,0-17.38,6.42v-.1a20.24,20.24,0,0,0-17.39-6.42c-9.68,1-16.27,6.09-18.19,16.69S17.08,61.52,28,69.65,47.52,80.46,49.88,80.57Z"></path></svg></div>
</div>
<div class="bg-image-ptn ptn-circle act-scale act-duration-2 act-delay-2 color-blue rotate-1" style="top:68%; left:79%; width:50px;">
<div><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle vector-effect="non-scaling-stroke" cx="50.5" cy="51" r="22"></circle></svg></div>
</div>
<div class="bg-image-ptn ptn-line act-line act-duration-2 act-delay-2 color-green rotate-0" style="top:58%; left:90%; width:175px;">
<div><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><line vector-effect="non-scaling-stroke" x1="90" y1="30" x2="10" y2="70"></line></svg></div>
</div>
<div class="bg-image-ptn ptn-line act-line act-duration-2 act-delay-2 color-orange rotate-3" style="top:76%; left:14%; width:175px;">
<div><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><line vector-effect="non-scaling-stroke" x1="90" y1="30" x2="10" y2="70"></line></svg></div>
</div>
<div class="bg-image-ptn ptn-moon act-rotate act-duration-3 act-delay-3 color-purple rotate-0" style="top:100%; left:7%; width:75px;">
<div><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path vector-effect="non-scaling-stroke" d="M90.3,48l0-.49v-.15c0-.48-.07-1-.12-1.44v-.06c0-.21,0-.42-.07-.64q-.09-.77-.21-1.53l0-.15-.06-.34c-.1-.6-.22-1.22-.37-1.88,0-.2-.08-.39-.13-.58l0-.19c-.09-.38-.19-.76-.29-1.14s-.16-.59-.25-.88-.2-.66-.31-1l-.07-.21c-.07-.23-.15-.46-.23-.69s-.24-.65-.36-1l0-.12c-.2-.53-.42-1.06-.64-1.57l0-.12-.24-.54c-.17-.37-.34-.73-.52-1.09l-.27-.54c-.2-.39-.4-.78-.61-1.16l0,0c-.5-.9-1-1.82-1.64-2.7l-.06-.1q-.4-.62-.84-1.2l-.19-.26c-.29-.4-.58-.8-.89-1.19l-.21-.26-.09-.11-.13-.15a41.54,41.54,0,0,0-5.09-5.25,2.83,2.83,0,0,0-4.46,3.2,23.54,23.54,0,0,1,1.5,5.94c.06.49.1.94.13,1.38a.34.34,0,0,0,0,.1c0,.48,0,.92,0,1.32a23.58,23.58,0,0,1-47.15,0c0-.4,0-.84,0-1.33v-.08c0-.42.06-.85.11-1.29v-.14a23.67,23.67,0,0,1,1.5-5.9,2.83,2.83,0,0,0-4.47-3.2,41.35,41.35,0,0,0-5.12,5.28l-.09.11,0,.05-.07.09-.07.09-.13.16c-.3.38-.6.78-.89,1.17l-.2.28c-.28.39-.55.79-.82,1.19l-.07.11c-.59.9-1.14,1.8-1.64,2.71l0,0-.61,1.16-.27.54c-.18.36-.35.73-.52,1.09l-.24.56-.05.11c-.22.5-.42,1-.62,1.5l0,.07c-.14.36-.28.72-.41,1.08s-.15.46-.23.69l-.06.2c-.11.34-.22.67-.32,1s-.17.58-.25.87-.2.76-.29,1.15l0,.18c0,.19-.1.38-.14.58-.15.66-.27,1.28-.37,1.88,0,.11,0,.22,0,.34l0,.15c-.09.51-.16,1-.22,1.53,0,.22-.05.44-.07.65-.05.53-.09,1-.13,1.49v.15l0,.49c0,.76-.05,1.44-.05,2.07a40.55,40.55,0,1,0,81.09,0C90.36,49.39,90.34,48.71,90.3,48Z"></path></svg></div>
</div>
<div class="bg-image-ptn ptn-star act-rotate act-duration-3 act-delay-2 color-yellow rotate-0" style="top:99%; left:85%; width:75px;">
<div><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path vector-effect="non-scaling-stroke" d="M86.69,36.14,66.61,33.22h0l-4-.59L60.78,29h0l-4.49-9.09-4.49-9.1c-1-2-2.61-2-3.6,0l-4.49,9.1L39.22,29h0l-1.8,3.65-4,.59h0l-10,1.46-10,1.46c-2.22.32-2.72,1.86-1.12,3.43L26.72,53.73h0l2.92,2.84-.69,4h0l-3.43,20c-.38,2.21.93,3.16,2.92,2.12l9-4.72L50,71.36,62.58,78l9,4.72c2,1,3.3.09,2.92-2.12l-1.71-10-2.41-14,10.18-9.92,7.27-7.08C89.41,38,88.91,36.46,86.69,36.14Z"></path></svg></div>
</div>
<div class="bg-image-ptn ptn-heart act-scale act-duration-3 act-delay-1 color-pink rotate-1" style="top:-1%; left:97%; width:75px;">
<div><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path vector-effect="non-scaling-stroke" d="M49.88,80.57c2.35-.11,11-2.68,21.88-10.81s15.62-20,13.69-30.61S76.94,23.49,67.26,22.46a20.2,20.2,0,0,0-17.38,6.42v-.1a20.24,20.24,0,0,0-17.39-6.42c-9.68,1-16.27,6.09-18.19,16.69S17.08,61.52,28,69.65,47.52,80.46,49.88,80.57Z"></path></svg></div>
</div>
<div class="bg-image-ptn ptn-line act-line act-duration-1 act-delay-4 color-orange rotate-3" style="top:-5%; left:14%; width:175px;">
<div><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><line vector-effect="non-scaling-stroke" x1="90" y1="30" x2="10" y2="70"></line></svg></div>
</div>
<div class="bg-image-ptn ptn-line act-line act-duration-3 act-delay-0 color-green rotate-4" style="top:-7%; left:60%; width:175px;">
<div><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><line vector-effect="non-scaling-stroke" x1="90" y1="30" x2="10" y2="70"></line></svg></div>
</div></div><div class="bg-image-ptn-set ptn-set02" style="transform: matrix(1, 0, 0, 1, 0, 0);">
<div class="bg-image-ptn ptn-moon act-rotate act-duration-3 act-delay-3 color-purple rotate-2" style="top:26%; left:61%; width:40px;">
<div><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path vector-effect="non-scaling-stroke" d="M90.3,48l0-.49v-.15c0-.48-.07-1-.12-1.44v-.06c0-.21,0-.42-.07-.64q-.09-.77-.21-1.53l0-.15-.06-.34c-.1-.6-.22-1.22-.37-1.88,0-.2-.08-.39-.13-.58l0-.19c-.09-.38-.19-.76-.29-1.14s-.16-.59-.25-.88-.2-.66-.31-1l-.07-.21c-.07-.23-.15-.46-.23-.69s-.24-.65-.36-1l0-.12c-.2-.53-.42-1.06-.64-1.57l0-.12-.24-.54c-.17-.37-.34-.73-.52-1.09l-.27-.54c-.2-.39-.4-.78-.61-1.16l0,0c-.5-.9-1-1.82-1.64-2.7l-.06-.1q-.4-.62-.84-1.2l-.19-.26c-.29-.4-.58-.8-.89-1.19l-.21-.26-.09-.11-.13-.15a41.54,41.54,0,0,0-5.09-5.25,2.83,2.83,0,0,0-4.46,3.2,23.54,23.54,0,0,1,1.5,5.94c.06.49.1.94.13,1.38a.34.34,0,0,0,0,.1c0,.48,0,.92,0,1.32a23.58,23.58,0,0,1-47.15,0c0-.4,0-.84,0-1.33v-.08c0-.42.06-.85.11-1.29v-.14a23.67,23.67,0,0,1,1.5-5.9,2.83,2.83,0,0,0-4.47-3.2,41.35,41.35,0,0,0-5.12,5.28l-.09.11,0,.05-.07.09-.07.09-.13.16c-.3.38-.6.78-.89,1.17l-.2.28c-.28.39-.55.79-.82,1.19l-.07.11c-.59.9-1.14,1.8-1.64,2.71l0,0-.61,1.16-.27.54c-.18.36-.35.73-.52,1.09l-.24.56-.05.11c-.22.5-.42,1-.62,1.5l0,.07c-.14.36-.28.72-.41,1.08s-.15.46-.23.69l-.06.2c-.11.34-.22.67-.32,1s-.17.58-.25.87-.2.76-.29,1.15l0,.18c0,.19-.1.38-.14.58-.15.66-.27,1.28-.37,1.88,0,.11,0,.22,0,.34l0,.15c-.09.51-.16,1-.22,1.53,0,.22-.05.44-.07.65-.05.53-.09,1-.13,1.49v.15l0,.49c0,.76-.05,1.44-.05,2.07a40.55,40.55,0,1,0,81.09,0C90.36,49.39,90.34,48.71,90.3,48Z"></path></svg></div>
</div>
<div class="bg-image-ptn ptn-star act-rotate act-duration-4 act-delay-1 color-yellow rotate-0" style="top:87%; left:4%; width:40px;">
<div><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path vector-effect="non-scaling-stroke" d="M86.69,36.14,66.61,33.22h0l-4-.59L60.78,29h0l-4.49-9.09-4.49-9.1c-1-2-2.61-2-3.6,0l-4.49,9.1L39.22,29h0l-1.8,3.65-4,.59h0l-10,1.46-10,1.46c-2.22.32-2.72,1.86-1.12,3.43L26.72,53.73h0l2.92,2.84-.69,4h0l-3.43,20c-.38,2.21.93,3.16,2.92,2.12l9-4.72L50,71.36,62.58,78l9,4.72c2,1,3.3.09,2.92-2.12l-1.71-10-2.41-14,10.18-9.92,7.27-7.08C89.41,38,88.91,36.46,86.69,36.14Z"></path></svg></div>
</div>
<div class="bg-image-ptn ptn-heart act-scale act-duration-2 act-delay-4 color-pink rotate-2" style="top:46%; left:30%; width:40px;">
<div><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path vector-effect="non-scaling-stroke" d="M49.88,80.57c2.35-.11,11-2.68,21.88-10.81s15.62-20,13.69-30.61S76.94,23.49,67.26,22.46a20.2,20.2,0,0,0-17.38,6.42v-.1a20.24,20.24,0,0,0-17.39-6.42c-9.68,1-16.27,6.09-18.19,16.69S17.08,61.52,28,69.65,47.52,80.46,49.88,80.57Z"></path></svg></div>
</div>
<div class="bg-image-ptn ptn-circle act-scale act-duration-1 act-delay-4 color-blue rotate-2" style="top:46%; left:6%; width:25px;">
<div><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle vector-effect="non-scaling-stroke" cx="50.5" cy="51" r="22"></circle></svg></div>
</div>
<div class="bg-image-ptn ptn-line act-line act-duration-4 act-delay-0 color-green rotate-0" style="top:27%; left:21%; width:100px;">
<div><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><line vector-effect="non-scaling-stroke" x1="90" y1="30" x2="10" y2="70"></line></svg></div>
</div>
<div class="bg-image-ptn ptn-line act-line act-duration-3 act-delay-4 color-orange rotate-4" style="top:73%; left:57%; width:100px;">
<div><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><line vector-effect="non-scaling-stroke" x1="90" y1="30" x2="10" y2="70"></line></svg></div>
</div></div><div class="bg-image-ptn-set ptn-set03" style="transform: matrix(1, 0, 0, 1, 0, 0);">
<div class="bg-image-ptn ptn-moon act-rotate act-duration-4 act-delay-4 color-purple rotate-4" style="top:82%; left:25%; width:40px;">
<div><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path vector-effect="non-scaling-stroke" d="M90.3,48l0-.49v-.15c0-.48-.07-1-.12-1.44v-.06c0-.21,0-.42-.07-.64q-.09-.77-.21-1.53l0-.15-.06-.34c-.1-.6-.22-1.22-.37-1.88,0-.2-.08-.39-.13-.58l0-.19c-.09-.38-.19-.76-.29-1.14s-.16-.59-.25-.88-.2-.66-.31-1l-.07-.21c-.07-.23-.15-.46-.23-.69s-.24-.65-.36-1l0-.12c-.2-.53-.42-1.06-.64-1.57l0-.12-.24-.54c-.17-.37-.34-.73-.52-1.09l-.27-.54c-.2-.39-.4-.78-.61-1.16l0,0c-.5-.9-1-1.82-1.64-2.7l-.06-.1q-.4-.62-.84-1.2l-.19-.26c-.29-.4-.58-.8-.89-1.19l-.21-.26-.09-.11-.13-.15a41.54,41.54,0,0,0-5.09-5.25,2.83,2.83,0,0,0-4.46,3.2,23.54,23.54,0,0,1,1.5,5.94c.06.49.1.94.13,1.38a.34.34,0,0,0,0,.1c0,.48,0,.92,0,1.32a23.58,23.58,0,0,1-47.15,0c0-.4,0-.84,0-1.33v-.08c0-.42.06-.85.11-1.29v-.14a23.67,23.67,0,0,1,1.5-5.9,2.83,2.83,0,0,0-4.47-3.2,41.35,41.35,0,0,0-5.12,5.28l-.09.11,0,.05-.07.09-.07.09-.13.16c-.3.38-.6.78-.89,1.17l-.2.28c-.28.39-.55.79-.82,1.19l-.07.11c-.59.9-1.14,1.8-1.64,2.71l0,0-.61,1.16-.27.54c-.18.36-.35.73-.52,1.09l-.24.56-.05.11c-.22.5-.42,1-.62,1.5l0,.07c-.14.36-.28.72-.41,1.08s-.15.46-.23.69l-.06.2c-.11.34-.22.67-.32,1s-.17.58-.25.87-.2.76-.29,1.15l0,.18c0,.19-.1.38-.14.58-.15.66-.27,1.28-.37,1.88,0,.11,0,.22,0,.34l0,.15c-.09.51-.16,1-.22,1.53,0,.22-.05.44-.07.65-.05.53-.09,1-.13,1.49v.15l0,.49c0,.76-.05,1.44-.05,2.07a40.55,40.55,0,1,0,81.09,0C90.36,49.39,90.34,48.71,90.3,48Z"></path></svg></div>
</div>
<div class="bg-image-ptn ptn-star act-rotate act-duration-4 act-delay-1 color-yellow rotate-0" style="top:20%; left:29%; width:40px;">
<div><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path vector-effect="non-scaling-stroke" d="M86.69,36.14,66.61,33.22h0l-4-.59L60.78,29h0l-4.49-9.09-4.49-9.1c-1-2-2.61-2-3.6,0l-4.49,9.1L39.22,29h0l-1.8,3.65-4,.59h0l-10,1.46-10,1.46c-2.22.32-2.72,1.86-1.12,3.43L26.72,53.73h0l2.92,2.84-.69,4h0l-3.43,20c-.38,2.21.93,3.16,2.92,2.12l9-4.72L50,71.36,62.58,78l9,4.72c2,1,3.3.09,2.92-2.12l-1.71-10-2.41-14,10.18-9.92,7.27-7.08C89.41,38,88.91,36.46,86.69,36.14Z"></path></svg></div>
</div>
<div class="bg-image-ptn ptn-heart act-scale act-duration-0 act-delay-3 color-pink rotate-4" style="top:81%; left:50%; width:40px;">
<div><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path vector-effect="non-scaling-stroke" d="M49.88,80.57c2.35-.11,11-2.68,21.88-10.81s15.62-20,13.69-30.61S76.94,23.49,67.26,22.46a20.2,20.2,0,0,0-17.38,6.42v-.1a20.24,20.24,0,0,0-17.39-6.42c-9.68,1-16.27,6.09-18.19,16.69S17.08,61.52,28,69.65,47.52,80.46,49.88,80.57Z"></path></svg></div>
</div>
<div class="bg-image-ptn ptn-circle act-scale act-duration-3 act-delay-0 color-blue rotate-4" style="top:7%; left:54%; width:25px;">
<div><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle vector-effect="non-scaling-stroke" cx="50.5" cy="51" r="22"></circle></svg></div>
</div>
<div class="bg-image-ptn ptn-line act-line act-duration-0 act-delay-4 color-green rotate-4" style="top:39%; left:39%; width:100px;">
<div><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><line vector-effect="non-scaling-stroke" x1="90" y1="30" x2="10" y2="70"></line></svg></div>
</div>
<div class="bg-image-ptn ptn-line act-line act-duration-0 act-delay-0 color-orange rotate-3" style="top:20%; left:77%; width:100px;">
<div><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><line vector-effect="non-scaling-stroke" x1="90" y1="30" x2="10" y2="70"></line></svg></div>
</div>
<div class="bg-image-ptn ptn-circle act-scale act-duration-3 act-delay-3 color-blue rotate-4" style="top:96%; left:54%; width:25px;">
<div><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle vector-effect="non-scaling-stroke" cx="50.5" cy="51" r="22"></circle></svg></div>
</div></div></div>
示例图
评论