.sponly { display: block !important; } @media screen and (min-width: 768px) { .sponly { display: none !important; } } .pconly { display: none !important; } @media screen and (min-width: 768px) { .pconly { display: block !important; } } body[data-aos-duration='50'] [data-aos], [data-aos][data-aos][data-aos-duration='50'] { -webkit-transition-duration: 50ms; transition-duration: 50ms; } body[data-aos-delay='50'] [data-aos], [data-aos][data-aos][data-aos-delay='50'] { -webkit-transition-delay: 0; transition-delay: 0; } body[data-aos-delay='50'] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay='50'].aos-animate { -webkit-transition-delay: 50ms; transition-delay: 50ms; } body[data-aos-duration='100'] [data-aos], [data-aos][data-aos][data-aos-duration='100'] { -webkit-transition-duration: 100ms; transition-duration: 100ms; } body[data-aos-delay='100'] [data-aos], [data-aos][data-aos][data-aos-delay='100'] { -webkit-transition-delay: 0; transition-delay: 0; } body[data-aos-delay='100'] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay='100'].aos-animate { -webkit-transition-delay: 100ms; transition-delay: 100ms; } body[data-aos-duration='150'] [data-aos], [data-aos][data-aos][data-aos-duration='150'] { -webkit-transition-duration: 150ms; transition-duration: 150ms; } body[data-aos-delay='150'] [data-aos], [data-aos][data-aos][data-aos-delay='150'] { -webkit-transition-delay: 0; transition-delay: 0; } body[data-aos-delay='150'] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay='150'].aos-animate { -webkit-transition-delay: 150ms; transition-delay: 150ms; } body[data-aos-duration='200'] [data-aos], [data-aos][data-aos][data-aos-duration='200'] { -webkit-transition-duration: 200ms; transition-duration: 200ms; } body[data-aos-delay='200'] [data-aos], [data-aos][data-aos][data-aos-delay='200'] { -webkit-transition-delay: 0; transition-delay: 0; } body[data-aos-delay='200'] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay='200'].aos-animate { -webkit-transition-delay: 200ms; transition-delay: 200ms; } body[data-aos-duration='250'] [data-aos], [data-aos][data-aos][data-aos-duration='250'] { -webkit-transition-duration: 250ms; transition-duration: 250ms; } body[data-aos-delay='250'] [data-aos], [data-aos][data-aos][data-aos-delay='250'] { -webkit-transition-delay: 0; transition-delay: 0; } body[data-aos-delay='250'] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay='250'].aos-animate { -webkit-transition-delay: 250ms; transition-delay: 250ms; } body[data-aos-duration='300'] [data-aos], [data-aos][data-aos][data-aos-duration='300'] { -webkit-transition-duration: 300ms; transition-duration: 300ms; } body[data-aos-delay='300'] [data-aos], [data-aos][data-aos][data-aos-delay='300'] { -webkit-transition-delay: 0; transition-delay: 0; } body[data-aos-delay='300'] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay='300'].aos-animate { -webkit-transition-delay: 300ms; transition-delay: 300ms; } body[data-aos-duration='350'] [data-aos], [data-aos][data-aos][data-aos-duration='350'] { -webkit-transition-duration: 350ms; transition-duration: 350ms; } body[data-aos-delay='350'] [data-aos], [data-aos][data-aos][data-aos-delay='350'] { -webkit-transition-delay: 0; transition-delay: 0; } body[data-aos-delay='350'] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay='350'].aos-animate { -webkit-transition-delay: 350ms; transition-delay: 350ms; } body[data-aos-duration='400'] [data-aos], [data-aos][data-aos][data-aos-duration='400'] { -webkit-transition-duration: 400ms; transition-duration: 400ms; } body[data-aos-delay='400'] [data-aos], [data-aos][data-aos][data-aos-delay='400'] { -webkit-transition-delay: 0; transition-delay: 0; } body[data-aos-delay='400'] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay='400'].aos-animate { -webkit-transition-delay: 400ms; transition-delay: 400ms; } body[data-aos-duration='450'] [data-aos], [data-aos][data-aos][data-aos-duration='450'] { -webkit-transition-duration: 450ms; transition-duration: 450ms; } body[data-aos-delay='450'] [data-aos], [data-aos][data-aos][data-aos-delay='450'] { -webkit-transition-delay: 0; transition-delay: 0; } body[data-aos-delay='450'] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay='450'].aos-animate { -webkit-transition-delay: 450ms; transition-delay: 450ms; } body[data-aos-duration='500'] [data-aos], [data-aos][data-aos][data-aos-duration='500'] { -webkit-transition-duration: 500ms; transition-duration: 500ms; } body[data-aos-delay='500'] [data-aos], [data-aos][data-aos][data-aos-delay='500'] { -webkit-transition-delay: 0; transition-delay: 0; } body[data-aos-delay='500'] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay='500'].aos-animate { -webkit-transition-delay: 500ms; transition-delay: 500ms; } body[data-aos-duration='550'] [data-aos], [data-aos][data-aos][data-aos-duration='550'] { -webkit-transition-duration: 550ms; transition-duration: 550ms; } body[data-aos-delay='550'] [data-aos], [data-aos][data-aos][data-aos-delay='550'] { -webkit-transition-delay: 0; transition-delay: 0; } body[data-aos-delay='550'] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay='550'].aos-animate { -webkit-transition-delay: 550ms; transition-delay: 550ms; } body[data-aos-duration='600'] [data-aos], [data-aos][data-aos][data-aos-duration='600'] { -webkit-transition-duration: 600ms; transition-duration: 600ms; } body[data-aos-delay='600'] [data-aos], [data-aos][data-aos][data-aos-delay='600'] { -webkit-transition-delay: 0; transition-delay: 0; } body[data-aos-delay='600'] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay='600'].aos-animate { -webkit-transition-delay: 600ms; transition-delay: 600ms; } body[data-aos-duration='650'] [data-aos], [data-aos][data-aos][data-aos-duration='650'] { -webkit-transition-duration: 650ms; transition-duration: 650ms; } body[data-aos-delay='650'] [data-aos], [data-aos][data-aos][data-aos-delay='650'] { -webkit-transition-delay: 0; transition-delay: 0; } body[data-aos-delay='650'] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay='650'].aos-animate { -webkit-transition-delay: 650ms; transition-delay: 650ms; } body[data-aos-duration='700'] [data-aos], [data-aos][data-aos][data-aos-duration='700'] { -webkit-transition-duration: 700ms; transition-duration: 700ms; } body[data-aos-delay='700'] [data-aos], [data-aos][data-aos][data-aos-delay='700'] { -webkit-transition-delay: 0; transition-delay: 0; } body[data-aos-delay='700'] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay='700'].aos-animate { -webkit-transition-delay: 700ms; transition-delay: 700ms; } body[data-aos-duration='750'] [data-aos], [data-aos][data-aos][data-aos-duration='750'] { -webkit-transition-duration: 750ms; transition-duration: 750ms; } body[data-aos-delay='750'] [data-aos], [data-aos][data-aos][data-aos-delay='750'] { -webkit-transition-delay: 0; transition-delay: 0; } body[data-aos-delay='750'] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay='750'].aos-animate { -webkit-transition-delay: 750ms; transition-delay: 750ms; } body[data-aos-duration='800'] [data-aos], [data-aos][data-aos][data-aos-duration='800'] { -webkit-transition-duration: 800ms; transition-duration: 800ms; } body[data-aos-delay='800'] [data-aos], [data-aos][data-aos][data-aos-delay='800'] { -webkit-transition-delay: 0; transition-delay: 0; } body[data-aos-delay='800'] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay='800'].aos-animate { -webkit-transition-delay: 800ms; transition-delay: 800ms; } body[data-aos-duration='850'] [data-aos], [data-aos][data-aos][data-aos-duration='850'] { -webkit-transition-duration: 850ms; transition-duration: 850ms; } body[data-aos-delay='850'] [data-aos], [data-aos][data-aos][data-aos-delay='850'] { -webkit-transition-delay: 0; transition-delay: 0; } body[data-aos-delay='850'] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay='850'].aos-animate { -webkit-transition-delay: 850ms; transition-delay: 850ms; } body[data-aos-duration='900'] [data-aos], [data-aos][data-aos][data-aos-duration='900'] { -webkit-transition-duration: 900ms; transition-duration: 900ms; } body[data-aos-delay='900'] [data-aos], [data-aos][data-aos][data-aos-delay='900'] { -webkit-transition-delay: 0; transition-delay: 0; } body[data-aos-delay='900'] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay='900'].aos-animate { -webkit-transition-delay: 900ms; transition-delay: 900ms; } body[data-aos-duration='950'] [data-aos], [data-aos][data-aos][data-aos-duration='950'] { -webkit-transition-duration: 950ms; transition-duration: 950ms; } body[data-aos-delay='950'] [data-aos], [data-aos][data-aos][data-aos-delay='950'] { -webkit-transition-delay: 0; transition-delay: 0; } body[data-aos-delay='950'] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay='950'].aos-animate { -webkit-transition-delay: 950ms; transition-delay: 950ms; } body[data-aos-duration='1000'] [data-aos], [data-aos][data-aos][data-aos-duration='1000'] { -webkit-transition-duration: 1000ms; transition-duration: 1000ms; } body[data-aos-delay='1000'] [data-aos], [data-aos][data-aos][data-aos-delay='1000'] { -webkit-transition-delay: 0; transition-delay: 0; } body[data-aos-delay='1000'] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay='1000'].aos-animate { -webkit-transition-delay: 1000ms; transition-delay: 1000ms; } body[data-aos-duration='1050'] [data-aos], [data-aos][data-aos][data-aos-duration='1050'] { -webkit-transition-duration: 1050ms; transition-duration: 1050ms; } body[data-aos-delay='1050'] [data-aos], [data-aos][data-aos][data-aos-delay='1050'] { -webkit-transition-delay: 0; transition-delay: 0; } body[data-aos-delay='1050'] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay='1050'].aos-animate { -webkit-transition-delay: 1050ms; transition-delay: 1050ms; } body[data-aos-duration='1100'] [data-aos], [data-aos][data-aos][data-aos-duration='1100'] { -webkit-transition-duration: 1100ms; transition-duration: 1100ms; } body[data-aos-delay='1100'] [data-aos], [data-aos][data-aos][data-aos-delay='1100'] { -webkit-transition-delay: 0; transition-delay: 0; } body[data-aos-delay='1100'] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay='1100'].aos-animate { -webkit-transition-delay: 1100ms; transition-delay: 1100ms; } body[data-aos-duration='1150'] [data-aos], [data-aos][data-aos][data-aos-duration='1150'] { -webkit-transition-duration: 1150ms; transition-duration: 1150ms; } body[data-aos-delay='1150'] [data-aos], [data-aos][data-aos][data-aos-delay='1150'] { -webkit-transition-delay: 0; transition-delay: 0; } body[data-aos-delay='1150'] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay='1150'].aos-animate { -webkit-transition-delay: 1150ms; transition-delay: 1150ms; } body[data-aos-duration='1200'] [data-aos], [data-aos][data-aos][data-aos-duration='1200'] { -webkit-transition-duration: 1200ms; transition-duration: 1200ms; } body[data-aos-delay='1200'] [data-aos], [data-aos][data-aos][data-aos-delay='1200'] { -webkit-transition-delay: 0; transition-delay: 0; } body[data-aos-delay='1200'] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay='1200'].aos-animate { -webkit-transition-delay: 1200ms; transition-delay: 1200ms; } body[data-aos-duration='1250'] [data-aos], [data-aos][data-aos][data-aos-duration='1250'] { -webkit-transition-duration: 1250ms; transition-duration: 1250ms; } body[data-aos-delay='1250'] [data-aos], [data-aos][data-aos][data-aos-delay='1250'] { -webkit-transition-delay: 0; transition-delay: 0; } body[data-aos-delay='1250'] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay='1250'].aos-animate { -webkit-transition-delay: 1250ms; transition-delay: 1250ms; } body[data-aos-duration='1300'] [data-aos], [data-aos][data-aos][data-aos-duration='1300'] { -webkit-transition-duration: 1300ms; transition-duration: 1300ms; } body[data-aos-delay='1300'] [data-aos], [data-aos][data-aos][data-aos-delay='1300'] { -webkit-transition-delay: 0; transition-delay: 0; } body[data-aos-delay='1300'] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay='1300'].aos-animate { -webkit-transition-delay: 1300ms; transition-delay: 1300ms; } body[data-aos-duration='1350'] [data-aos], [data-aos][data-aos][data-aos-duration='1350'] { -webkit-transition-duration: 1350ms; transition-duration: 1350ms; } body[data-aos-delay='1350'] [data-aos], [data-aos][data-aos][data-aos-delay='1350'] { -webkit-transition-delay: 0; transition-delay: 0; } body[data-aos-delay='1350'] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay='1350'].aos-animate { -webkit-transition-delay: 1350ms; transition-delay: 1350ms; } body[data-aos-duration='1400'] [data-aos], [data-aos][data-aos][data-aos-duration='1400'] { -webkit-transition-duration: 1400ms; transition-duration: 1400ms; } body[data-aos-delay='1400'] [data-aos], [data-aos][data-aos][data-aos-delay='1400'] { -webkit-transition-delay: 0; transition-delay: 0; } body[data-aos-delay='1400'] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay='1400'].aos-animate { -webkit-transition-delay: 1400ms; transition-delay: 1400ms; } body[data-aos-duration='1450'] [data-aos], [data-aos][data-aos][data-aos-duration='1450'] { -webkit-transition-duration: 1450ms; transition-duration: 1450ms; } body[data-aos-delay='1450'] [data-aos], [data-aos][data-aos][data-aos-delay='1450'] { -webkit-transition-delay: 0; transition-delay: 0; } body[data-aos-delay='1450'] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay='1450'].aos-animate { -webkit-transition-delay: 1450ms; transition-delay: 1450ms; } body[data-aos-duration='1500'] [data-aos], [data-aos][data-aos][data-aos-duration='1500'] { -webkit-transition-duration: 1500ms; transition-duration: 1500ms; } body[data-aos-delay='1500'] [data-aos], [data-aos][data-aos][data-aos-delay='1500'] { -webkit-transition-delay: 0; transition-delay: 0; } body[data-aos-delay='1500'] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay='1500'].aos-animate { -webkit-transition-delay: 1500ms; transition-delay: 1500ms; } body[data-aos-duration='1550'] [data-aos], [data-aos][data-aos][data-aos-duration='1550'] { -webkit-transition-duration: 1550ms; transition-duration: 1550ms; } body[data-aos-delay='1550'] [data-aos], [data-aos][data-aos][data-aos-delay='1550'] { -webkit-transition-delay: 0; transition-delay: 0; } body[data-aos-delay='1550'] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay='1550'].aos-animate { -webkit-transition-delay: 1550ms; transition-delay: 1550ms; } body[data-aos-duration='1600'] [data-aos], [data-aos][data-aos][data-aos-duration='1600'] { -webkit-transition-duration: 1600ms; transition-duration: 1600ms; } body[data-aos-delay='1600'] [data-aos], [data-aos][data-aos][data-aos-delay='1600'] { -webkit-transition-delay: 0; transition-delay: 0; } body[data-aos-delay='1600'] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay='1600'].aos-animate { -webkit-transition-delay: 1600ms; transition-delay: 1600ms; } body[data-aos-duration='1650'] [data-aos], [data-aos][data-aos][data-aos-duration='1650'] { -webkit-transition-duration: 1650ms; transition-duration: 1650ms; } body[data-aos-delay='1650'] [data-aos], [data-aos][data-aos][data-aos-delay='1650'] { -webkit-transition-delay: 0; transition-delay: 0; } body[data-aos-delay='1650'] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay='1650'].aos-animate { -webkit-transition-delay: 1650ms; transition-delay: 1650ms; } body[data-aos-duration='1700'] [data-aos], [data-aos][data-aos][data-aos-duration='1700'] { -webkit-transition-duration: 1700ms; transition-duration: 1700ms; } body[data-aos-delay='1700'] [data-aos], [data-aos][data-aos][data-aos-delay='1700'] { -webkit-transition-delay: 0; transition-delay: 0; } body[data-aos-delay='1700'] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay='1700'].aos-animate { -webkit-transition-delay: 1700ms; transition-delay: 1700ms; } body[data-aos-duration='1750'] [data-aos], [data-aos][data-aos][data-aos-duration='1750'] { -webkit-transition-duration: 1750ms; transition-duration: 1750ms; } body[data-aos-delay='1750'] [data-aos], [data-aos][data-aos][data-aos-delay='1750'] { -webkit-transition-delay: 0; transition-delay: 0; } body[data-aos-delay='1750'] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay='1750'].aos-animate { -webkit-transition-delay: 1750ms; transition-delay: 1750ms; } body[data-aos-duration='1800'] [data-aos], [data-aos][data-aos][data-aos-duration='1800'] { -webkit-transition-duration: 1800ms; transition-duration: 1800ms; } body[data-aos-delay='1800'] [data-aos], [data-aos][data-aos][data-aos-delay='1800'] { -webkit-transition-delay: 0; transition-delay: 0; } body[data-aos-delay='1800'] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay='1800'].aos-animate { -webkit-transition-delay: 1800ms; transition-delay: 1800ms; } body[data-aos-duration='1850'] [data-aos], [data-aos][data-aos][data-aos-duration='1850'] { -webkit-transition-duration: 1850ms; transition-duration: 1850ms; } body[data-aos-delay='1850'] [data-aos], [data-aos][data-aos][data-aos-delay='1850'] { -webkit-transition-delay: 0; transition-delay: 0; } body[data-aos-delay='1850'] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay='1850'].aos-animate { -webkit-transition-delay: 1850ms; transition-delay: 1850ms; } body[data-aos-duration='1900'] [data-aos], [data-aos][data-aos][data-aos-duration='1900'] { -webkit-transition-duration: 1900ms; transition-duration: 1900ms; } body[data-aos-delay='1900'] [data-aos], [data-aos][data-aos][data-aos-delay='1900'] { -webkit-transition-delay: 0; transition-delay: 0; } body[data-aos-delay='1900'] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay='1900'].aos-animate { -webkit-transition-delay: 1900ms; transition-delay: 1900ms; } body[data-aos-duration='1950'] [data-aos], [data-aos][data-aos][data-aos-duration='1950'] { -webkit-transition-duration: 1950ms; transition-duration: 1950ms; } body[data-aos-delay='1950'] [data-aos], [data-aos][data-aos][data-aos-delay='1950'] { -webkit-transition-delay: 0; transition-delay: 0; } body[data-aos-delay='1950'] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay='1950'].aos-animate { -webkit-transition-delay: 1950ms; transition-delay: 1950ms; } body[data-aos-duration='2000'] [data-aos], [data-aos][data-aos][data-aos-duration='2000'] { -webkit-transition-duration: 2000ms; transition-duration: 2000ms; } body[data-aos-delay='2000'] [data-aos], [data-aos][data-aos][data-aos-delay='2000'] { -webkit-transition-delay: 0; transition-delay: 0; } body[data-aos-delay='2000'] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay='2000'].aos-animate { -webkit-transition-delay: 2000ms; transition-delay: 2000ms; } body[data-aos-duration='2050'] [data-aos], [data-aos][data-aos][data-aos-duration='2050'] { -webkit-transition-duration: 2050ms; transition-duration: 2050ms; } body[data-aos-delay='2050'] [data-aos], [data-aos][data-aos][data-aos-delay='2050'] { -webkit-transition-delay: 0; transition-delay: 0; } body[data-aos-delay='2050'] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay='2050'].aos-animate { -webkit-transition-delay: 2050ms; transition-delay: 2050ms; } body[data-aos-duration='2100'] [data-aos], [data-aos][data-aos][data-aos-duration='2100'] { -webkit-transition-duration: 2100ms; transition-duration: 2100ms; } body[data-aos-delay='2100'] [data-aos], [data-aos][data-aos][data-aos-delay='2100'] { -webkit-transition-delay: 0; transition-delay: 0; } body[data-aos-delay='2100'] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay='2100'].aos-animate { -webkit-transition-delay: 2100ms; transition-delay: 2100ms; } body[data-aos-duration='2150'] [data-aos], [data-aos][data-aos][data-aos-duration='2150'] { -webkit-transition-duration: 2150ms; transition-duration: 2150ms; } body[data-aos-delay='2150'] [data-aos], [data-aos][data-aos][data-aos-delay='2150'] { -webkit-transition-delay: 0; transition-delay: 0; } body[data-aos-delay='2150'] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay='2150'].aos-animate { -webkit-transition-delay: 2150ms; transition-delay: 2150ms; } body[data-aos-duration='2200'] [data-aos], [data-aos][data-aos][data-aos-duration='2200'] { -webkit-transition-duration: 2200ms; transition-duration: 2200ms; } body[data-aos-delay='2200'] [data-aos], [data-aos][data-aos][data-aos-delay='2200'] { -webkit-transition-delay: 0; transition-delay: 0; } body[data-aos-delay='2200'] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay='2200'].aos-animate { -webkit-transition-delay: 2200ms; transition-delay: 2200ms; } body[data-aos-duration='2250'] [data-aos], [data-aos][data-aos][data-aos-duration='2250'] { -webkit-transition-duration: 2250ms; transition-duration: 2250ms; } body[data-aos-delay='2250'] [data-aos], [data-aos][data-aos][data-aos-delay='2250'] { -webkit-transition-delay: 0; transition-delay: 0; } body[data-aos-delay='2250'] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay='2250'].aos-animate { -webkit-transition-delay: 2250ms; transition-delay: 2250ms; } body[data-aos-duration='2300'] [data-aos], [data-aos][data-aos][data-aos-duration='2300'] { -webkit-transition-duration: 2300ms; transition-duration: 2300ms; } body[data-aos-delay='2300'] [data-aos], [data-aos][data-aos][data-aos-delay='2300'] { -webkit-transition-delay: 0; transition-delay: 0; } body[data-aos-delay='2300'] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay='2300'].aos-animate { -webkit-transition-delay: 2300ms; transition-delay: 2300ms; } body[data-aos-duration='2350'] [data-aos], [data-aos][data-aos][data-aos-duration='2350'] { -webkit-transition-duration: 2350ms; transition-duration: 2350ms; } body[data-aos-delay='2350'] [data-aos], [data-aos][data-aos][data-aos-delay='2350'] { -webkit-transition-delay: 0; transition-delay: 0; } body[data-aos-delay='2350'] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay='2350'].aos-animate { -webkit-transition-delay: 2350ms; transition-delay: 2350ms; } body[data-aos-duration='2400'] [data-aos], [data-aos][data-aos][data-aos-duration='2400'] { -webkit-transition-duration: 2400ms; transition-duration: 2400ms; } body[data-aos-delay='2400'] [data-aos], [data-aos][data-aos][data-aos-delay='2400'] { -webkit-transition-delay: 0; transition-delay: 0; } body[data-aos-delay='2400'] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay='2400'].aos-animate { -webkit-transition-delay: 2400ms; transition-delay: 2400ms; } body[data-aos-duration='2450'] [data-aos], [data-aos][data-aos][data-aos-duration='2450'] { -webkit-transition-duration: 2450ms; transition-duration: 2450ms; } body[data-aos-delay='2450'] [data-aos], [data-aos][data-aos][data-aos-delay='2450'] { -webkit-transition-delay: 0; transition-delay: 0; } body[data-aos-delay='2450'] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay='2450'].aos-animate { -webkit-transition-delay: 2450ms; transition-delay: 2450ms; } body[data-aos-duration='2500'] [data-aos], [data-aos][data-aos][data-aos-duration='2500'] { -webkit-transition-duration: 2500ms; transition-duration: 2500ms; } body[data-aos-delay='2500'] [data-aos], [data-aos][data-aos][data-aos-delay='2500'] { -webkit-transition-delay: 0; transition-delay: 0; } body[data-aos-delay='2500'] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay='2500'].aos-animate { -webkit-transition-delay: 2500ms; transition-delay: 2500ms; } body[data-aos-duration='2550'] [data-aos], [data-aos][data-aos][data-aos-duration='2550'] { -webkit-transition-duration: 2550ms; transition-duration: 2550ms; } body[data-aos-delay='2550'] [data-aos], [data-aos][data-aos][data-aos-delay='2550'] { -webkit-transition-delay: 0; transition-delay: 0; } body[data-aos-delay='2550'] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay='2550'].aos-animate { -webkit-transition-delay: 2550ms; transition-delay: 2550ms; } body[data-aos-duration='2600'] [data-aos], [data-aos][data-aos][data-aos-duration='2600'] { -webkit-transition-duration: 2600ms; transition-duration: 2600ms; } body[data-aos-delay='2600'] [data-aos], [data-aos][data-aos][data-aos-delay='2600'] { -webkit-transition-delay: 0; transition-delay: 0; } body[data-aos-delay='2600'] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay='2600'].aos-animate { -webkit-transition-delay: 2600ms; transition-delay: 2600ms; } body[data-aos-duration='2650'] [data-aos], [data-aos][data-aos][data-aos-duration='2650'] { -webkit-transition-duration: 2650ms; transition-duration: 2650ms; } body[data-aos-delay='2650'] [data-aos], [data-aos][data-aos][data-aos-delay='2650'] { -webkit-transition-delay: 0; transition-delay: 0; } body[data-aos-delay='2650'] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay='2650'].aos-animate { -webkit-transition-delay: 2650ms; transition-delay: 2650ms; } body[data-aos-duration='2700'] [data-aos], [data-aos][data-aos][data-aos-duration='2700'] { -webkit-transition-duration: 2700ms; transition-duration: 2700ms; } body[data-aos-delay='2700'] [data-aos], [data-aos][data-aos][data-aos-delay='2700'] { -webkit-transition-delay: 0; transition-delay: 0; } body[data-aos-delay='2700'] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay='2700'].aos-animate { -webkit-transition-delay: 2700ms; transition-delay: 2700ms; } body[data-aos-duration='2750'] [data-aos], [data-aos][data-aos][data-aos-duration='2750'] { -webkit-transition-duration: 2750ms; transition-duration: 2750ms; } body[data-aos-delay='2750'] [data-aos], [data-aos][data-aos][data-aos-delay='2750'] { -webkit-transition-delay: 0; transition-delay: 0; } body[data-aos-delay='2750'] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay='2750'].aos-animate { -webkit-transition-delay: 2750ms; transition-delay: 2750ms; } body[data-aos-duration='2800'] [data-aos], [data-aos][data-aos][data-aos-duration='2800'] { -webkit-transition-duration: 2800ms; transition-duration: 2800ms; } body[data-aos-delay='2800'] [data-aos], [data-aos][data-aos][data-aos-delay='2800'] { -webkit-transition-delay: 0; transition-delay: 0; } body[data-aos-delay='2800'] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay='2800'].aos-animate { -webkit-transition-delay: 2800ms; transition-delay: 2800ms; } body[data-aos-duration='2850'] [data-aos], [data-aos][data-aos][data-aos-duration='2850'] { -webkit-transition-duration: 2850ms; transition-duration: 2850ms; } body[data-aos-delay='2850'] [data-aos], [data-aos][data-aos][data-aos-delay='2850'] { -webkit-transition-delay: 0; transition-delay: 0; } body[data-aos-delay='2850'] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay='2850'].aos-animate { -webkit-transition-delay: 2850ms; transition-delay: 2850ms; } body[data-aos-duration='2900'] [data-aos], [data-aos][data-aos][data-aos-duration='2900'] { -webkit-transition-duration: 2900ms; transition-duration: 2900ms; } body[data-aos-delay='2900'] [data-aos], [data-aos][data-aos][data-aos-delay='2900'] { -webkit-transition-delay: 0; transition-delay: 0; } body[data-aos-delay='2900'] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay='2900'].aos-animate { -webkit-transition-delay: 2900ms; transition-delay: 2900ms; } body[data-aos-duration='2950'] [data-aos], [data-aos][data-aos][data-aos-duration='2950'] { -webkit-transition-duration: 2950ms; transition-duration: 2950ms; } body[data-aos-delay='2950'] [data-aos], [data-aos][data-aos][data-aos-delay='2950'] { -webkit-transition-delay: 0; transition-delay: 0; } body[data-aos-delay='2950'] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay='2950'].aos-animate { -webkit-transition-delay: 2950ms; transition-delay: 2950ms; } body[data-aos-duration='3000'] [data-aos], [data-aos][data-aos][data-aos-duration='3000'] { -webkit-transition-duration: 3000ms; transition-duration: 3000ms; } body[data-aos-delay='3000'] [data-aos], [data-aos][data-aos][data-aos-delay='3000'] { -webkit-transition-delay: 0; transition-delay: 0; } body[data-aos-delay='3000'] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay='3000'].aos-animate { -webkit-transition-delay: 3000ms; transition-delay: 3000ms; } body[data-aos-easing="linear"] [data-aos], [data-aos][data-aos][data-aos-easing="linear"] { -webkit-transition-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75); transition-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75); } body[data-aos-easing="ease"] [data-aos], [data-aos][data-aos][data-aos-easing="ease"] { -webkit-transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1); transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1); } body[data-aos-easing="ease-in"] [data-aos], [data-aos][data-aos][data-aos-easing="ease-in"] { -webkit-transition-timing-function: cubic-bezier(0.42, 0, 1, 1); transition-timing-function: cubic-bezier(0.42, 0, 1, 1); } body[data-aos-easing="ease-out"] [data-aos], [data-aos][data-aos][data-aos-easing="ease-out"] { -webkit-transition-timing-function: cubic-bezier(0, 0, 0.58, 1); transition-timing-function: cubic-bezier(0, 0, 0.58, 1); } body[data-aos-easing="ease-in-out"] [data-aos], [data-aos][data-aos][data-aos-easing="ease-in-out"] { -webkit-transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1); transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1); } body[data-aos-easing="ease-in-back"] [data-aos], [data-aos][data-aos][data-aos-easing="ease-in-back"] { -webkit-transition-timing-function: cubic-bezier(0.6, -0.28, 0.735, 0.045); transition-timing-function: cubic-bezier(0.6, -0.28, 0.735, 0.045); } body[data-aos-easing="ease-out-back"] [data-aos], [data-aos][data-aos][data-aos-easing="ease-out-back"] { -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); } body[data-aos-easing="ease-in-out-back"] [data-aos], [data-aos][data-aos][data-aos-easing="ease-in-out-back"] { -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); } body[data-aos-easing="ease-in-sine"] [data-aos], [data-aos][data-aos][data-aos-easing="ease-in-sine"] { -webkit-transition-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); transition-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); } body[data-aos-easing="ease-out-sine"] [data-aos], [data-aos][data-aos][data-aos-easing="ease-out-sine"] { -webkit-transition-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1); transition-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1); } body[data-aos-easing="ease-in-out-sine"] [data-aos], [data-aos][data-aos][data-aos-easing="ease-in-out-sine"] { -webkit-transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95); transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95); } body[data-aos-easing="ease-in-quad"] [data-aos], [data-aos][data-aos][data-aos-easing="ease-in-quad"] { -webkit-transition-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); transition-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); } body[data-aos-easing="ease-out-quad"] [data-aos], [data-aos][data-aos][data-aos-easing="ease-out-quad"] { -webkit-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); } body[data-aos-easing="ease-in-out-quad"] [data-aos], [data-aos][data-aos][data-aos-easing="ease-in-out-quad"] { -webkit-transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); } body[data-aos-easing="ease-in-cubic"] [data-aos], [data-aos][data-aos][data-aos-easing="ease-in-cubic"] { -webkit-transition-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); transition-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); } body[data-aos-easing="ease-out-cubic"] [data-aos], [data-aos][data-aos][data-aos-easing="ease-out-cubic"] { -webkit-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); } body[data-aos-easing="ease-in-out-cubic"] [data-aos], [data-aos][data-aos][data-aos-easing="ease-in-out-cubic"] { -webkit-transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); } body[data-aos-easing="ease-in-quart"] [data-aos], [data-aos][data-aos][data-aos-easing="ease-in-quart"] { -webkit-transition-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); transition-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); } body[data-aos-easing="ease-out-quart"] [data-aos], [data-aos][data-aos][data-aos-easing="ease-out-quart"] { -webkit-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); } body[data-aos-easing="ease-in-out-quart"] [data-aos], [data-aos][data-aos][data-aos-easing="ease-in-out-quart"] { -webkit-transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); } /** Fade animations: fade fade-up, fade-down, fade-left, fade-right fade-up-right, fade-up-left, fade-down-right, fade-down-left */ [data-aos^='fade'][data-aos^='fade'] { opacity: 0; -webkit-transition-property: opacity, -webkit-transform; transition-property: opacity, -webkit-transform; transition-property: opacity, transform; transition-property: opacity, transform, -webkit-transform; } [data-aos^='fade'][data-aos^='fade'].aos-animate { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } [data-aos='fade-up'] { -webkit-transform: translate3d(0, 2.66667vw, 0); transform: translate3d(0, 2.66667vw, 0); } [data-aos='fade-down'] { -webkit-transform: translate3d(0, -2.66667vw, 0); transform: translate3d(0, -2.66667vw, 0); } [data-aos='fade-right'] { -webkit-transform: translate3d(-2.66667vw, 0, 0); transform: translate3d(-2.66667vw, 0, 0); } [data-aos='fade-left'] { -webkit-transform: translate3d(2.66667vw, 0, 0); transform: translate3d(2.66667vw, 0, 0); } [data-aos='fade-up-right'] { -webkit-transform: translate3d(-2.66667vw, 2.66667vw, 0); transform: translate3d(-2.66667vw, 2.66667vw, 0); } [data-aos='fade-up-left'] { -webkit-transform: translate3d(2.66667vw, 2.66667vw, 0); transform: translate3d(2.66667vw, 2.66667vw, 0); } [data-aos='fade-down-right'] { -webkit-transform: translate3d(-2.66667vw, -2.66667vw, 0); transform: translate3d(-2.66667vw, -2.66667vw, 0); } [data-aos='fade-down-left'] { -webkit-transform: translate3d(2.66667vw, -2.66667vw, 0); transform: translate3d(2.66667vw, -2.66667vw, 0); } /** Zoom animations: zoom-in, zoom-in-up, zoom-in-down, zoom-in-left, zoom-in-right zoom-out, zoom-out-up, zoom-out-down, zoom-out-left, zoom-out-right */ [data-aos^='zoom'][data-aos^='zoom'] { opacity: 0; -webkit-transition-property: opacity, -webkit-transform; transition-property: opacity, -webkit-transform; transition-property: opacity, transform; transition-property: opacity, transform, -webkit-transform; } [data-aos^='zoom'][data-aos^='zoom'].aos-animate { opacity: 1; -webkit-transform: translate3d(0, 0, 0) scale(1); transform: translate3d(0, 0, 0) scale(1); } [data-aos='zoom-in'] { -webkit-transform: scale(0.6); transform: scale(0.6); } [data-aos='zoom-in-up'] { -webkit-transform: translate3d(0, 2.66667vw, 0) scale(0.6); transform: translate3d(0, 2.66667vw, 0) scale(0.6); } [data-aos='zoom-in-down'] { -webkit-transform: translate3d(0, -2.66667vw, 0) scale(0.6); transform: translate3d(0, -2.66667vw, 0) scale(0.6); } [data-aos='zoom-in-right'] { -webkit-transform: translate3d(-2.66667vw, 0, 0) scale(0.6); transform: translate3d(-2.66667vw, 0, 0) scale(0.6); } [data-aos='zoom-in-left'] { -webkit-transform: translate3d(2.66667vw, 0, 0) scale(0.6); transform: translate3d(2.66667vw, 0, 0) scale(0.6); } [data-aos='zoom-out'] { -webkit-transform: scale(1.2); transform: scale(1.2); } [data-aos='zoom-out-up'] { -webkit-transform: translate3d(0, 2.66667vw, 0) scale(1.2); transform: translate3d(0, 2.66667vw, 0) scale(1.2); } [data-aos='zoom-out-down'] { -webkit-transform: translate3d(0, -2.66667vw, 0) scale(1.2); transform: translate3d(0, -2.66667vw, 0) scale(1.2); } [data-aos='zoom-out-right'] { -webkit-transform: translate3d(-2.66667vw, 0, 0) scale(1.2); transform: translate3d(-2.66667vw, 0, 0) scale(1.2); } [data-aos='zoom-out-left'] { -webkit-transform: translate3d(2.66667vw, 0, 0) scale(1.2); transform: translate3d(2.66667vw, 0, 0) scale(1.2); } /** Slide animations */ [data-aos^='slide'][data-aos^='slide'] { -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; transition-property: transform; transition-property: transform, -webkit-transform; } [data-aos^='slide'][data-aos^='slide'].aos-animate { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } [data-aos='slide-up'] { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } [data-aos='slide-down'] { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } [data-aos='slide-right'] { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } [data-aos='slide-left'] { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } /** Flip animations: flip-left, flip-right, flip-up, flip-down */ [data-aos^='flip'][data-aos^='flip'] { -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; transition-property: transform; transition-property: transform, -webkit-transform; } [data-aos='flip-left'] { -webkit-transform: perspective(333.33333vw) rotateY(-100deg); transform: perspective(333.33333vw) rotateY(-100deg); } [data-aos='flip-left'].aos-animate { -webkit-transform: perspective(333.33333vw) rotateY(0); transform: perspective(333.33333vw) rotateY(0); } [data-aos='flip-right'] { -webkit-transform: perspective(333.33333vw) rotateY(100deg); transform: perspective(333.33333vw) rotateY(100deg); } [data-aos='flip-right'].aos-animate { -webkit-transform: perspective(333.33333vw) rotateY(0); transform: perspective(333.33333vw) rotateY(0); } [data-aos='flip-up'] { -webkit-transform: perspective(333.33333vw) rotateX(-100deg); transform: perspective(333.33333vw) rotateX(-100deg); } [data-aos='flip-up'].aos-animate { -webkit-transform: perspective(333.33333vw) rotateX(0); transform: perspective(333.33333vw) rotateX(0); } [data-aos='flip-down'] { -webkit-transform: perspective(333.33333vw) rotateX(100deg); transform: perspective(333.33333vw) rotateX(100deg); } [data-aos='flip-down'].aos-animate { -webkit-transform: perspective(333.33333vw) rotateX(0); transform: perspective(333.33333vw) rotateX(0); } * { -webkit-box-sizing: border-box; box-sizing: border-box; -ms-overflow-style: none; } body::-webkit-scrollbar, .box::-webkit-scrollbar, #about::-webkit-scrollbar { display: none; } html { overflow-y: scroll; } body { font-family: 'Noto Sans JP', sans-serif; color: #ffffff; font-weight: normal; background-color: #000000; background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/bg.png"); width: 32vw; height: 21.33333vw; width: 100% !important; background-repeat: repeat; background-size: auto; } @media screen and (min-width: 768px) { body { background-image: url("../images/pc/bg.png"); } } @media screen and (min-width: 768px) { body { width: 240px; height: 160px; max-width: 100% !important; } } @media screen and (max-width: 767px) { body { background-size: 30vw; } } .roboto { font-family: 'Roboto Condensed', sans-serif; } .hidden { display: none; } section { position: relative; } .swiper-scrollbar { display: none; } div.swiper-button-prev { outline: none; display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; color: rgba(0, 0, 0, 0); background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/arrow_left.png"); width: 10.4vw; height: 10.66667vw; left: 4vw; top: 37%; } @media screen and (min-width: 768px) { div.swiper-button-prev { background-image: url("../images/pc/arrow_left.png"); } } @media screen and (min-width: 768px) { div.swiper-button-prev { width: 78px; height: 80px; max-width: 100% !important; } } div.swiper-button-prev:after { display: none; } @media screen and (min-width: 768px) { div.swiper-button-prev { top: 40%; left: 50%; -webkit-transform: translateX(-610%); transform: translateX(-610%); -webkit-transition: all .2s; transition: all .2s; } div.swiper-button-prev:hover { -webkit-transform: translateX(-610%) scale(0.9); transform: translateX(-610%) scale(0.9); } } div.swiper-button-next { outline: none; display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; color: rgba(0, 0, 0, 0); background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/arrow_right.png"); width: 10.4vw; height: 10.66667vw; right: 4vw; top: 37%; } @media screen and (min-width: 768px) { div.swiper-button-next { background-image: url("../images/pc/arrow_right.png"); } } @media screen and (min-width: 768px) { div.swiper-button-next { width: 78px; height: 80px; max-width: 100% !important; } } div.swiper-button-next:after { display: none; } @media screen and (min-width: 768px) { div.swiper-button-next { top: 40%; left: 50%; -webkit-transform: translateX(510%); transform: translateX(510%); -webkit-transition: all .2s; transition: all .2s; } div.swiper-button-next:hover { -webkit-transform: translateX(510%) scale(0.9); transform: translateX(510%) scale(0.9); } } .swiper-pagination { position: relative; top: -3.73333vw; z-index: 2; } @media screen and (min-width: 768px) { .swiper-pagination { top: -12px; } } .swiper-pagination-bullet { outline: none; opacity: 1; border-radius: 0; width: 8.53333vw; height: 1.06667vw; background-color: #000; border: 1px solid #d5372c; margin-left: 3.2vw; } @media screen and (min-width: 768px) { .swiper-pagination-bullet { width: 64px; height: 8px; background-color: #000; border: 1px solid #d5372c; margin-left: 24px; } } .swiper-pagination-bullet.swiper-pagination-bullet-active { background-color: #d5372c; } h1, h2, h3, h4, h5, h6, p, ul { margin: 0; padding: 0; } img { max-width: 100%; } @media screen and (min-width: 768px) { a:hover { opacity: 0.8; } } .menu { display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; color: rgba(0, 0, 0, 0); background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/btn_menu.png"); width: 12.8vw; height: 12.8vw; position: fixed; top: 0; right: 0; z-index: 8; } @media screen and (min-width: 768px) { .menu { background-image: url("../images/pc/btn_menu.png"); } } @media screen and (min-width: 768px) { .menu { width: 96px; height: 96px; max-width: 100% !important; } } @media screen and (min-width: 768px) { .menu { display: none; } } .menu_close { display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; color: rgba(0, 0, 0, 0); background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/btn_close.png"); width: 12.8vw; height: 12.8vw; position: fixed; top: 0; right: 0; z-index: 8; } @media screen and (min-width: 768px) { .menu_close { background-image: url("../images/pc/btn_close.png"); } } @media screen and (min-width: 768px) { .menu_close { width: 96px; height: 96px; max-width: 100% !important; } } @media screen and (min-width: 768px) { .menu_close { display: none; } } .twitter { display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; color: rgba(0, 0, 0, 0); background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/btn_twitter.png"); width: 32vw; height: 32vw; position: fixed; bottom: 4vw; right: 0; z-index: 5; -webkit-transition: all .2s; transition: all .2s; -webkit-transform: scale(1); transform: scale(1); -webkit-transform-origin: right bottom; transform-origin: right bottom; } @media screen and (min-width: 768px) { .twitter { background-image: url("../images/pc/btn_twitter.png"); } } @media screen and (min-width: 768px) { .twitter { width: 160px; height: 160px; max-width: 100% !important; } } @media screen and (min-width: 768px) { .twitter { top: auto; bottom: 30px; } } .twitter.fixed { position: fixed; bottom: 4vw; right: 0; -webkit-transform: scale(0.6); transform: scale(0.6); } @media screen and (min-width: 768px) { .twitter.fixed { top: auto; bottom: 30px; } } .pagetop { display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; color: rgba(0, 0, 0, 0); background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/pagetop.png"); width: 11.2vw; height: 16vw; position: fixed; bottom: -44vw; left: 0px; z-index: 5; -webkit-transition: all .5s; transition: all .5s; -webkit-transform: scale(0.6); transform: scale(0.6); } @media screen and (min-width: 768px) { .pagetop { background-image: url("../images/pc/pagetop.png"); } } @media screen and (min-width: 768px) { .pagetop { width: 80px; height: 101px; max-width: 100% !important; } } .pagetop.inside { bottom: 1.33333vw; } @media screen and (min-width: 768px) { .pagetop { bottom: -330px; left: 0px; -webkit-transition: all .2s; transition: all .2s; } .pagetop.inside { bottom: 10px; } .pagetop:hover { -webkit-transform: scale(0.5); transform: scale(0.5); } } footer { background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/bg_footer.jpg"); width: 100vw; height: 162.13333vw; position: relative; width: 100%; overflow: hidden; } @media screen and (min-width: 768px) { footer { background-image: url("../images/pc/bg_footer.jpg"); } } @media screen and (min-width: 768px) { footer { width: 1920px; height: 648px; max-width: 100% !important; } } footer .dl { font-size: 4.26667vw; font-weight: bold; line-height: 1.5; text-align: center; text-shadow: 0 0 3.33333vw #000000; margin: 10.66667vw auto 0; } footer .bnr_app { display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; color: rgba(0, 0, 0, 0); background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/bnr_app.png"); width: 40.4vw; height: 12.93333vw; margin: 6vw auto 0; } @media screen and (min-width: 768px) { footer .bnr_app { background-image: url("../images/pc/bnr_app.png"); } } @media screen and (min-width: 768px) { footer .bnr_app { width: 200px; height: 64px; max-width: 100% !important; } } footer .bnr_google { display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; color: rgba(0, 0, 0, 0); background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/bnr_google.png"); width: 40.4vw; height: 12.93333vw; margin: 3.33333vw auto 0; } @media screen and (min-width: 768px) { footer .bnr_google { background-image: url("../images/pc/bnr_google.png"); } } @media screen and (min-width: 768px) { footer .bnr_google { width: 200px; height: 64px; max-width: 100% !important; } } footer .attention { -webkit-transform: scale(0.5); transform: scale(0.5); -webkit-transform-origin: left top; transform-origin: left top; width: 200%; font-size: 4.26667vw; font-family: "Source Han Sans JP"; color: #aaaaaa; line-height: 2; text-align: center; margin: 5.33333vw auto 0; } footer ul { margin: 0; padding: 0; list-style: none; font-size: 3.2vw; line-height: 4.26667vw; text-align: center; color: #aaaaaa; } footer ul li { margin-bottom: 0.8em; } footer ul .bold { font-weight: bold; margin-right: 1em; color: #ffffff; } footer .logo_footer { display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; color: rgba(0, 0, 0, 0); background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/logo_footer.png"); width: 59.33333vw; height: 16.26667vw; margin: 7.33333vw auto 0; } @media screen and (min-width: 768px) { footer .logo_footer { background-image: url("../images/pc/logo_footer.png"); } } @media screen and (min-width: 768px) { footer .logo_footer { width: 445px; height: 122px; max-width: 100% !important; } } footer .area { margin: 10vw auto 0; text-align: center; } footer .area a { text-decoration: none; color: #aaaaaa; font-size: 3.2vw; line-height: 4.26667vw; } footer .area .pp { margin-right: 2em; } footer .copyright { color: #aaaaaa; font-size: 2.66667vw; text-align: center; margin: 12vw auto; } @media screen and (min-width: 768px) { footer { margin-top: 50px; padding-top: 1px; background-size: cover; } footer .dl { font-size: 24px; text-shadow: 0 0 25px #000000; margin: 80px auto 0; } footer .bnr_app { margin: 25px; } footer .bnr_google { margin: 25px; } footer .flex { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } footer .attention { font-size: 22px; margin: 0 auto 0; } footer ul { font-size: 16px; line-height: 32px; } footer ul .small { font-size: 12px; } footer ul li { margin: 0; display: inline-block; margin-right: 1.8em; } footer ul li:last-child { margin-right: 0; } footer .logo_footer { margin: 0 auto 30px; } footer .c { width: 1040px; margin: 0 auto; } footer .area { margin: 60px 0 0 2em; float: left; } footer .area a { font-size: 12px; line-height: 32px; } footer .copyright { font-size: 12px; margin: 60px 2em 0 0; float: right; } } footer .social { position: absolute; top: 6vw; right: 4vw; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media screen and (min-width: 768px) { footer .social { position: absolute; top: 75px; right: 30px; } } footer .social .txt { font-family: 'Roboto Condensed', sans-serif; display: inline-block; font-size: 2.66667vw; -webkit-transform: rotate(90deg); transform: rotate(90deg); -webkit-transform-origin: center center; transform-origin: center center; } @media screen and (min-width: 768px) { footer .social .txt { font-size: 12px; } } footer .social a { display: inline-block !important; margin: 2.66667vw 0; } @media screen and (min-width: 768px) { footer .social a { margin: 10px 0; } } footer .social .tw { display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; color: rgba(0, 0, 0, 0); background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/ico_twitter.png"); width: 7.06667vw; height: 5.73333vw; margin-top: 6.66667vw; } @media screen and (min-width: 768px) { footer .social .tw { background-image: url("../images/pc/ico_twitter.png"); } } @media screen and (min-width: 768px) { footer .social .tw { width: 20px; height: 17px; max-width: 100% !important; } } @media screen and (min-width: 768px) { footer .social .tw { margin-top: 30px; } } footer .social .fb { display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; color: rgba(0, 0, 0, 0); background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/ico_facebook.png"); width: 7.06667vw; height: 7.06667vw; } @media screen and (min-width: 768px) { footer .social .fb { background-image: url("../images/pc/ico_facebook.png"); } } @media screen and (min-width: 768px) { footer .social .fb { width: 20px; height: 20px; max-width: 100% !important; } } footer .social .line { display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; color: rgba(0, 0, 0, 0); background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/ico_line.png"); width: 7.06667vw; height: 6.8vw; } @media screen and (min-width: 768px) { footer .social .line { background-image: url("../images/pc/ico_line.png"); } } @media screen and (min-width: 768px) { footer .social .line { width: 20px; height: 19px; max-width: 100% !important; } } footer .social .ig { display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; color: rgba(0, 0, 0, 0); background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/ico_instagram.png"); width: 7.06667vw; height: 7.2vw; } @media screen and (min-width: 768px) { footer .social .ig { background-image: url("../images/pc/ico_instagram.png"); } } @media screen and (min-width: 768px) { footer .social .ig { width: 20px; height: 20px; max-width: 100% !important; } } header { position: fixed; top: 0; left: 0; width: 100%; height: 13.06667vw; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; z-index: 8; } @media screen and (min-width: 768px) { header { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; height: 80px; background-color: black; -webkit-transition: all .2s; transition: all .2s; } } @media screen and (min-width: 768px) { header.trans { background-color: rgba(0, 0, 0, 0.4); } } header .lang { margin-left: 1em; font-size: 2.93333vw; } header .lang .txt { margin-right: 0.5em !important; } header h1 { display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; color: rgba(0, 0, 0, 0); background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/nav_logo_c.png"); width: 14.53333vw; height: 6.8vw; margin-left: 2.66667vw; } @media screen and (min-width: 768px) { header h1 { background-image: url("../images/pc/nav_logo_c.png"); } } @media screen and (min-width: 768px) { header h1 { width: 91px; height: 40px; max-width: 100% !important; } } @media screen and (min-width: 768px) { header h1 { margin-left: 40px; width: 150px; background-position: 0 0; } } header a { color: white; text-decoration: none; } header nav { display: none; } @media screen and (min-width: 768px) { header nav { display: block; font-size: 14px; } } @media screen and (min-width: 768px) { header nav a { display: inline-block; padding: 0 20px; height: 80px; line-height: 74px; } } header nav a.active { background-color: rgba(0, 0, 0, 0.4); position: relative; } header nav a.active:before { position: absolute; bottom: 0; left: 1.33333vw; width: calc(100% - 2.66667vw); height: 0.26667vw; content: ''; border-bottom: 0.26667vw solid #d5372c; } header .social { display: none; } @media screen and (min-width: 768px) { header .social { display: block; } } header .social .txt { font-family: 'Roboto Condensed', sans-serif; display: inline-block; } @media screen and (min-width: 768px) { header .social .txt { font-size: 12px; position: relative; top: -4px; margin-right: 10px; } } header .social a { display: inline-block !important; } @media screen and (min-width: 768px) { header .social a { margin: 0 10px; } } header .social .tw { display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; color: rgba(0, 0, 0, 0); background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/ico_twitter.png"); width: 7.06667vw; height: 5.73333vw; } @media screen and (min-width: 768px) { header .social .tw { background-image: url("../images/pc/ico_twitter.png"); } } @media screen and (min-width: 768px) { header .social .tw { width: 20px; height: 17px; max-width: 100% !important; } } header .social .fb { display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; color: rgba(0, 0, 0, 0); background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/ico_facebook.png"); width: 7.06667vw; height: 7.06667vw; } @media screen and (min-width: 768px) { header .social .fb { background-image: url("../images/pc/ico_facebook.png"); } } @media screen and (min-width: 768px) { header .social .fb { width: 20px; height: 20px; max-width: 100% !important; } } header .social .line { display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; color: rgba(0, 0, 0, 0); background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/ico_line.png"); width: 7.06667vw; height: 6.8vw; } @media screen and (min-width: 768px) { header .social .line { background-image: url("../images/pc/ico_line.png"); } } @media screen and (min-width: 768px) { header .social .line { width: 20px; height: 19px; max-width: 100% !important; } } @media screen and (min-width: 768px) { header .social .line { margin-right: 38px; } } header .social .ig { display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; color: rgba(0, 0, 0, 0); background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/ico_instagram.png"); width: 7.06667vw; height: 7.2vw; } @media screen and (min-width: 768px) { header .social .ig { background-image: url("../images/pc/ico_instagram.png"); } } @media screen and (min-width: 768px) { header .social .ig { width: 20px; height: 20px; max-width: 100% !important; } } @media screen and (min-width: 768px) { header .social .ig { margin-right: 38px; } } #top footer { margin-top: 0; padding-top: 1px; } @media screen and (min-width: 768px) { #top footer { margin-top: 0; } } #totop a { display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; color: rgba(0, 0, 0, 0); background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/btn_backtotop.png"); width: 64vw; height: 12.8vw; margin: 0 auto; margin: 10.66667vw auto 12vw; } @media screen and (min-width: 768px) { #totop a { background-image: url("../images/pc/btn_backtotop.png"); } } @media screen and (min-width: 768px) { #totop a { width: 320px; height: 64px; max-width: 100% !important; } } @media screen and (min-width: 768px) { #totop a { margin: 80px auto 70px; } } #modalmenu { display: none; background-color: rgba(0, 0, 0, 0.7); background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/bg.png"); width: 32vw; height: 21.33333vw; width: 100% !important; background-size: 30vw; background-repeat: repeat; position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; z-index: 20; } @media screen and (min-width: 768px) { #modalmenu { background-image: url("../images/pc/bg.png"); } } @media screen and (min-width: 768px) { #modalmenu { width: 240px; height: 160px; max-width: 100% !important; } } #modalmenu .logo_game { display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; color: rgba(0, 0, 0, 0); background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/nav_logo_game.png"); width: 43.86667vw; height: 16.26667vw; margin: 18.66667vw auto 12vw; } @media screen and (min-width: 768px) { #modalmenu .logo_game { background-image: url("../images/pc/nav_logo_game.png"); } } @media screen and (min-width: 768px) { #modalmenu .logo_game { width: 329px; height: 122px; max-width: 100% !important; } } #modalmenu a { color: white; text-decoration: none; } #modalmenu nav a { display: block; text-align: center; height: 13.06667vw; line-height: 12vw; position: relative; border-bottom: 0.26667vw solid rgba(255, 255, 255, 0.2); } #modalmenu nav a:before { position: absolute; bottom: 0; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 4em; height: 0.26667vw; content: ''; border-bottom: 0.26667vw solid #d5372c; } #modalmenu .social { margin-top: 13.33333vw; text-align: center; } #modalmenu .social .txt { font-family: 'Roboto Condensed', sans-serif; display: block; font-size: 3.2vw; margin-bottom: 6.66667vw; } #modalmenu .social a { display: inline-block !important; margin: 0 4vw; } #modalmenu .social .tw { display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; color: rgba(0, 0, 0, 0); background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/ico_twitter.png"); width: 7.06667vw; height: 5.73333vw; } @media screen and (min-width: 768px) { #modalmenu .social .tw { background-image: url("../images/pc/ico_twitter.png"); } } @media screen and (min-width: 768px) { #modalmenu .social .tw { width: 20px; height: 17px; max-width: 100% !important; } } #modalmenu .social .fb { display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; color: rgba(0, 0, 0, 0); background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/ico_facebook.png"); width: 7.06667vw; height: 7.06667vw; } @media screen and (min-width: 768px) { #modalmenu .social .fb { background-image: url("../images/pc/ico_facebook.png"); } } @media screen and (min-width: 768px) { #modalmenu .social .fb { width: 20px; height: 20px; max-width: 100% !important; } } #modalmenu .social .line { display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; color: rgba(0, 0, 0, 0); background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/ico_line.png"); width: 7.06667vw; height: 6.8vw; } @media screen and (min-width: 768px) { #modalmenu .social .line { background-image: url("../images/pc/ico_line.png"); } } @media screen and (min-width: 768px) { #modalmenu .social .line { width: 20px; height: 19px; max-width: 100% !important; } } #modalmenu .social .ig { display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; color: rgba(0, 0, 0, 0); background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/ico_instagram.png"); width: 7.06667vw; height: 7.2vw; } @media screen and (min-width: 768px) { #modalmenu .social .ig { background-image: url("../images/pc/ico_instagram.png"); } } @media screen and (min-width: 768px) { #modalmenu .social .ig { width: 20px; height: 20px; max-width: 100% !important; } } #top #mv { background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/mv.jpg"); width: 100vw; height: 126.93333vw; width: 100% !important; background-size: contain; background-position: center 0; } @media screen and (min-width: 768px) { #top #mv { background-image: url("../images/pc/mv.jpg"); } } @media screen and (min-width: 768px) { #top #mv { width: 1200px; height: 640px; max-width: 100% !important; } } #top #mv .logo { display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; color: rgba(0, 0, 0, 0); background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/logo.png"); width: 76.66667vw; height: 29.6vw; position: absolute; left: 13.32813vw; top: 59.71733vw; } @media screen and (min-width: 768px) { #top #mv .logo { background-image: url("../images/pc/logo.png"); } } @media screen and (min-width: 768px) { #top #mv .logo { width: 574px; height: 212px; max-width: 100% !important; } } #top #mv .dl { font-size: 4.26667vw; font-weight: bold; line-height: 1.5; text-align: center; position: absolute; left: 14.94533vw; top: 93.92853vw; text-shadow: 0 0 3.33333vw #000000; } #top #mv .bnr_app { display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; color: rgba(0, 0, 0, 0); background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/bnr_app.png"); width: 40.4vw; height: 12.93333vw; position: absolute; top: 104.53333vw; left: 12.8vw; } @media screen and (min-width: 768px) { #top #mv .bnr_app { background-image: url("../images/pc/bnr_app.png"); } } @media screen and (min-width: 768px) { #top #mv .bnr_app { width: 200px; height: 64px; max-width: 100% !important; } } #top #mv .bnr_google { display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; color: rgba(0, 0, 0, 0); background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/bnr_google.png"); width: 40.4vw; height: 12.93333vw; position: absolute; top: 120.53333vw; left: 12.8vw; } @media screen and (min-width: 768px) { #top #mv .bnr_google { background-image: url("../images/pc/bnr_google.png"); } } @media screen and (min-width: 768px) { #top #mv .bnr_google { width: 200px; height: 64px; max-width: 100% !important; } } #top #mv .scroll { display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; color: rgba(0, 0, 0, 0); background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/img_scroll.png"); width: 2vw; height: 37.73333vw; position: absolute; top: 95.6vw; left: 4.93333vw; } @media screen and (min-width: 768px) { #top #mv .scroll { background-image: url("../images/pc/img_scroll.png"); } } @media screen and (min-width: 768px) { #top #mv .scroll { width: 10px; height: 217px; max-width: 100% !important; } } #top #about { overflow-x: hidden; } #top #about h2 { display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; color: rgba(0, 0, 0, 0); background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/ttl_about.png"); width: 87.2vw; height: 17.06667vw; margin: 19.33333vw auto 12.66667vw; } @media screen and (min-width: 768px) { #top #about h2 { background-image: url("../images/pc/ttl_about.png"); } } @media screen and (min-width: 768px) { #top #about h2 { width: 1040px; height: 80px; max-width: 100% !important; } } #top #about .txt { display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; color: rgba(0, 0, 0, 0); background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/txt_about1.png"); width: 87.2vw; height: 39.46667vw; margin: 0 auto; font-size: 0; } @media screen and (min-width: 768px) { #top #about .txt { background-image: url("../images/pc/txt_about1.png"); } } @media screen and (min-width: 768px) { #top #about .txt { width: 440px; height: 265px; max-width: 100% !important; } } #top #about .videoarea { height: 59.2vw; } @media screen and (min-width: 768px) { #top #about .videoarea { display: none; } } #top #about .video { position: absolute; top: 89.33333vw; right: 50%; -webkit-transform: translateX(50%); transform: translateX(50%); margin: 12vw auto; width: 61.6vw; height: 35.2vw; -webkit-transition: all 0.3s; transition: all 0.3s; overflow: hidden; z-index: -1; } @media screen and (min-width: 768px) { #top #about .video { -webkit-transform: none; transform: none; } } @media screen and (min-width: 768px) { #top #about .video { width: 960px; height: 480px; max-width: 100% !important; } } #top #about .video.p2 { position: absolute; margin: 0; width: 90vw; top: 53.33333vw; height: 112vw; } #top #about .video.p2 video { max-width: none; min-width: 100%; } #top #about .video.p2.f { -webkit-transition: all 0s; transition: all 0s; position: fixed; width: 90vw; top: 0; } #top #about .video.p2.f2 { position: fixed; width: 90vw; top: 0; } #top #about .video.p3 { position: fixed; margin: 0; width: 100vw; top: 0; height: 112vw; } #top #about .video.p3 video { max-width: none; min-width: 100%; } #top #about .video video { max-width: 100%; min-height: 100%; width: auto; height: auto; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); opacity: 1; -webkit-transition: all 1s; transition: all 1s; } #top #about .video video.out { opacity: 0; } #top #about .video .cover { width: 100%; height: 100%; background-size: cover; display: none; } #top #about .v1 { opacity: 1; position: absolute; top: 0; left: 0; } #top #about .v2 { opacity: 0; position: absolute; top: 0; left: 0; } #top #about .v3 { opacity: 0; position: absolute; top: 0; left: 0; } #top #about .cover { width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); position: absolute; top: 0; left: 0; z-index: 3; } #top #about .charabox { background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/bg_chara_about.png"); width: 100vw; height: 19.2vw; height: auto; background-position: center 0; } @media screen and (min-width: 768px) { #top #about .charabox { background-image: url("../images/pc/bg_chara_about.png"); } } @media screen and (min-width: 768px) { #top #about .charabox { width: 1258px; height: 240px; max-width: 100% !important; } } #top #about .charabox .chara { display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; color: rgba(0, 0, 0, 0); background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/chara_about.png"); width: 100vw; height: 57.46667vw; } @media screen and (min-width: 768px) { #top #about .charabox .chara { background-image: url("../images/pc/chara_about.png"); } } @media screen and (min-width: 768px) { #top #about .charabox .chara { width: 1551px; height: 640px; max-width: 100% !important; } } #top #about .slider { margin-top: 13.33333vw; } @media screen and (min-width: 768px) { #top #about .slider { max-width: 1040px; margin: 0 auto; } } #top #about .slider .swiper-container { overflow: visible; } #top #about .slider .swiper-slide { padding-right: 2.66667vw; -webkit-transition: all .4s; transition: all .4s; -webkit-filter: grayscale(1); filter: grayscale(1); } #top #about .slider .swiper-slide.swiper-slide-active { -webkit-filter: grayscale(0); filter: grayscale(0); } #top #about .slider .thumb1 { display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; color: rgba(0, 0, 0, 0); background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/thumb1.png"); width: 77.6vw; height: 72.4vw; max-width: 100%; } @media screen and (min-width: 768px) { #top #about .slider .thumb1 { background-image: url("../images/pc/thumb1.png"); } } @media screen and (min-width: 768px) { #top #about .slider .thumb1 { width: 760px; height: 536px; max-width: 100% !important; } } #top #about .slider .thumb2 { display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; color: rgba(0, 0, 0, 0); background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/thumb2.png"); width: 77.6vw; height: 65.86667vw; max-width: 100%; } @media screen and (min-width: 768px) { #top #about .slider .thumb2 { background-image: url("../images/pc/thumb2.png"); } } @media screen and (min-width: 768px) { #top #about .slider .thumb2 { width: 760px; height: 535px; max-width: 100% !important; } } #top #about .slider .thumb3 { display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; color: rgba(0, 0, 0, 0); background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/thumb3.png"); width: 77.6vw; height: 65.86667vw; max-width: 100%; } @media screen and (min-width: 768px) { #top #about .slider .thumb3 { background-image: url("../images/pc/thumb3.png"); } } @media screen and (min-width: 768px) { #top #about .slider .thumb3 { width: 760px; height: 535px; max-width: 100% !important; } } #top #about .pager { width: 100%; height: 1px; border-top: 1px solid #ffffff; margin: 12vw auto 25.33333vw; background-size: cover; } #top #characters { background-color: #000000; background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/bg.png"); width: 32vw; height: 21.33333vw; width: 100% !important; background-repeat: repeat; background-size: auto; padding: 1px 0; padding-top: 13.33333vw; } @media screen and (min-width: 768px) { #top #characters { background-image: url("../images/pc/bg.png"); } } @media screen and (min-width: 768px) { #top #characters { width: 240px; height: 160px; max-width: 100% !important; } } @media screen and (max-width: 767px) { #top #characters { background-size: 30vw; } } #top #characters .ch { position: absolute; top: 13.33333vw; left: 0; } #top #characters h2 { display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; color: rgba(0, 0, 0, 0); background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/ttl_character.png"); width: 87.33333vw; height: 17.06667vw; margin: 0 auto 12.66667vw; } @media screen and (min-width: 768px) { #top #characters h2 { background-image: url("../images/pc/ttl_character.png"); } } @media screen and (min-width: 768px) { #top #characters h2 { width: 1040px; height: 80px; max-width: 100% !important; } } #top #characters .txt { display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; color: rgba(0, 0, 0, 0); background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/txt_character.png"); width: 86.53333vw; height: 35.2vw; margin: 0 auto 10.66667vw; font-size: 0; } @media screen and (min-width: 768px) { #top #characters .txt { background-image: url("../images/pc/txt_character.png"); } } @media screen and (min-width: 768px) { #top #characters .txt { width: 772px; height: 119px; max-width: 100% !important; } } #top #update { padding-top: 1px; background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/bg_update.jpg"); width: 100vw; height: 235.73333vw; } @media screen and (min-width: 768px) { #top #update { background-image: url("../images/pc/bg_update.jpg"); } } @media screen and (min-width: 768px) { #top #update { width: 1920px; height: 968px; max-width: 100% !important; } } #top #update h2 { display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; color: rgba(0, 0, 0, 0); background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/ttl_update.png"); width: 87.2vw; height: 16.93333vw; margin: 12vw auto 12.66667vw; } @media screen and (min-width: 768px) { #top #update h2 { background-image: url("../images/pc/ttl_update.png"); } } @media screen and (min-width: 768px) { #top #update h2 { width: 1040px; height: 79px; max-width: 100% !important; } } #top #update .box { height: 66.66667vw; overflow-y: scroll; margin: 12vw 6.66667vw; font-size: 3.2vw; line-height: 200%; } #top #update .box .date { color: #d5372c; font-family: 'Roboto Condensed', sans-serif; } #top #update .box .txt { color: #ffffff; } #top #update .box .txt a { text-decoration: none; color: #ffffff; } #top #update .box hr { border: 0; background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/line.png"); width: 87.2vw; height: 0.26667vw; background-size: 100% 100%; width: 100%; margin: 1em 0; } @media screen and (min-width: 768px) { #top #update .box hr { background-image: url("../images/pc/line.png"); } } @media screen and (min-width: 768px) { #top #update .box hr { width: 480px; height: 1px; max-width: 100% !important; } } #top #update .socialbox { border: 1px solid #ffffff; margin: 12.66667vw; padding: 5.6vw; } #top #update .socialbox .timeline { height: 64vw; overflow: auto; } #top #update .socialbox .tweet { display: block; display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; color: rgba(0, 0, 0, 0); background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/btn_tweet.png"); width: 48.8vw; height: 8.53333vw; margin: 3.06667vw auto; } @media screen and (min-width: 768px) { #top #update .socialbox .tweet { background-image: url("../images/pc/btn_tweet.png"); } } @media screen and (min-width: 768px) { #top #update .socialbox .tweet { width: 180px; height: 40px; max-width: 100% !important; } } #top #update .socialbox .follow { display: block; display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; color: rgba(0, 0, 0, 0); background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/btn_follow.png"); width: 48.8vw; height: 8.53333vw; margin: 3.06667vw auto; } @media screen and (min-width: 768px) { #top #update .socialbox .follow { background-image: url("../images/pc/btn_follow.png"); } } @media screen and (min-width: 768px) { #top #update .socialbox .follow { width: 180px; height: 40px; max-width: 100% !important; } } #top #storategy { background-color: #000000; background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/bg.png"); width: 32vw; height: 21.33333vw; width: 100% !important; height: auto !important; background-repeat: repeat; background-size: auto; padding: 1px 0; } @media screen and (min-width: 768px) { #top #storategy { background-image: url("../images/pc/bg.png"); } } @media screen and (min-width: 768px) { #top #storategy { width: 240px; height: 160px; max-width: 100% !important; } } @media screen and (max-width: 767px) { #top #storategy { background-size: 30vw; padding-bottom: 30px; } } @media screen and (min-width: 768px) { #top #storategy { padding-bottom: 100px; } } #top #storategy h2 { display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; color: rgba(0, 0, 0, 0); background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/ttl_strategy.png"); width: 87.33333vw; height: 17.06667vw; margin: 12vw auto 6.66667vw; } @media screen and (min-width: 768px) { #top #storategy h2 { background-image: url("../images/pc/ttl_strategy.png"); } } @media screen and (min-width: 768px) { #top #storategy h2 { width: 1040px; height: 80px; max-width: 100% !important; } } #top #storategy .box { padding-top: 1px; background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/bg_strategy.png"); width: 100vw; height: 99.46667vw; } @media screen and (min-width: 768px) { #top #storategy .box { background-image: url("../images/pc/bg_strategy.png"); } } @media screen and (min-width: 768px) { #top #storategy .box { width: 1592px; height: 575px; max-width: 100% !important; } } #top #storategy .box .link { display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; color: rgba(0, 0, 0, 0); background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/btn_info.png"); width: 64vw; height: 12.8vw; margin: 20.66667vw auto 0; } @media screen and (min-width: 768px) { #top #storategy .box .link { background-image: url("../images/pc/btn_info.png"); } } @media screen and (min-width: 768px) { #top #storategy .box .link { width: 320px; height: 64px; max-width: 100% !important; } } @media screen and (min-width: 768px) { #top #mv { height: 50vw; width: 100%; background-size: cover; overflow: hidden; } #top #mv .logo { left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); top: 256px; } #top #mv .dl { font-size: 24px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); top: 445px; text-shadow: 0 0 25px #000000; } #top #mv .bnr_app { top: 495px; left: 50%; -webkit-transform: translateX(-110%); transform: translateX(-110%); } #top #mv .bnr_google { top: 495px; left: 50%; -webkit-transform: translateX(10%); transform: translateX(10%); } #top #mv .scroll { top: auto; bottom: 10px; left: 37px; } #top #about h2 { margin: 155px auto 80px; } #top #about .txt { margin: 0; position: relative; left: 50%; -webkit-transform: translateX(-520px); transform: translateX(-520px); } #top #about .video { margin: 0 auto; width: 50vw; height: 480px; position: absolute; top: 280px; right: 0; overflow: hidden; -webkit-transition: all 0.8s; transition: all 0.8s; z-index: -1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } #top #about .video.p2 { -webkit-transition: all 0.8s; transition: all 0.8s; position: absolute; top: 624px; right: 12.5vw; width: 75vw; height: 810px; } #top #about .video.p2.f { -webkit-transition: all 0s; transition: all 0s; position: fixed; width: 75vw; top: 0; } #top #about .video.p2.f2 { position: fixed; width: 75vw; top: 0; } #top #about .video.p3 { -webkit-transition: all 0.6s; transition: all 0.6s; position: fixed; top: 0; right: 0; width: 100vw; height: 810px; } #top #about .video video { min-width: 100%; min-height: 100%; width: auto; height: auto; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); opacity: 1; } #top #about .video video.out { opacity: 0; } #top #about .video .cover { width: 100%; height: 100%; background-size: cover; display: none; } #top #about .charabox { margin-top: 295px; position: relative; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } #top #about .charabox .chara { max-width: none !important; position: relative; left: 50%; -webkit-transform: translateX(-50%) translateY(-80px); transform: translateX(-50%) translateY(-80px); } #top #about .slider { padding-top: 90px; } #top #about .slider .swiper-slide { padding-right: 20px; } #top #about .slider-wrapper { border-top: 1px solid white; max-width: 2400px; margin: 0 auto; overflow: hidden; margin-top: 320px; } #top #about .pager { margin: 80px auto 110px; } #top #characters { padding-top: 170px; } #top #characters h2 { margin: 0 auto 95px; } #top #characters .ch { top: 170px; left: 50%; } #top #characters .txt { margin: 0 0 80px 0; position: relative; left: 50%; -webkit-transform: translateX(-520px); transform: translateX(-520px); } #top #update { padding-top: 1px; margin-top: 0; background-size: cover; } #top #update h2 { margin: 160px auto 85px; } #top #update .box { width: 480px; height: 488px; margin: 0; font-size: 16px; } #top #update .socialbox { width: 480px; height: 488px; border: 1px solid #ffffff; margin: 0; padding: 36px 42px; } #top #update .socialbox .timeline { height: 328px; } #top #update .socialbox .tweet { margin: 0; } #top #update .socialbox .follow { margin: 0; } #top #update .socialbox .flex2 { display: -webkit-box; display: -ms-flexbox; display: flex; margin: 30px auto 0; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } #top #update .flex { display: -webkit-box; display: -ms-flexbox; display: flex; width: 1040px; margin: 0 auto; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } #top #storategy { padding-bottom: 0; } #top #storategy h2 { margin: 90px auto 50px; } #top #storategy .box { padding-top: 1px; background-size: cover; margin: 0 auto; } #top #storategy .box .link { margin: 155px auto 0; } } #characters { height: 260.4vw !important; overflow: hidden; } @media screen and (min-width: 768px) { #characters { height: 1550px !important; margin-bottom: -80px; } } #characters .arrow_left { display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; color: rgba(0, 0, 0, 0); background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/arrow_left.png"); width: 10.4vw; height: 10.66667vw; position: absolute; z-index: 2; cursor: pointer; } @media screen and (min-width: 768px) { #characters .arrow_left { background-image: url("../images/pc/arrow_left.png"); } } @media screen and (min-width: 768px) { #characters .arrow_left { width: 78px; height: 80px; max-width: 100% !important; } } @media screen and (min-width: 768px) { #characters .arrow_left { -webkit-transition: all .2s; transition: all .2s; } #characters .arrow_left:hover { -webkit-transform: scale(0.9); transform: scale(0.9); } } #characters .arrow_right { display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; color: rgba(0, 0, 0, 0); background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/arrow_right.png"); width: 10.4vw; height: 10.66667vw; position: absolute; z-index: 2; cursor: pointer; } @media screen and (min-width: 768px) { #characters .arrow_right { background-image: url("../images/pc/arrow_right.png"); } } @media screen and (min-width: 768px) { #characters .arrow_right { width: 78px; height: 80px; max-width: 100% !important; } } @media screen and (min-width: 768px) { #characters .arrow_right { -webkit-transition: all .2s; transition: all .2s; } #characters .arrow_right:hover { -webkit-transform: scale(0.9); transform: scale(0.9); } } #characters .ch1_thumb_on { display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; color: rgba(0, 0, 0, 0); background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/ch1_thumb_on.png"); width: 37.33333vw; height: 16vw; position: absolute; -webkit-transition: left .2s; transition: left .2s; } @media screen and (min-width: 768px) { #characters .ch1_thumb_on { background-image: url("../images/pc/ch1_thumb_on.png"); } } @media screen and (min-width: 768px) { #characters .ch1_thumb_on { width: 214px; height: 120px; max-width: 100% !important; } } #characters .ch2_thumb_on { display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; color: rgba(0, 0, 0, 0); background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/ch2_thumb_on.png"); width: 41.33333vw; height: 16vw; position: absolute; -webkit-transition: left .2s; transition: left .2s; } @media screen and (min-width: 768px) { #characters .ch2_thumb_on { background-image: url("../images/pc/ch2_thumb_on.png"); } } @media screen and (min-width: 768px) { #characters .ch2_thumb_on { width: 244px; height: 120px; max-width: 100% !important; } } #characters .ch3_thumb_on { display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; color: rgba(0, 0, 0, 0); background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/ch3_thumb_on.png"); width: 37.33333vw; height: 16vw; position: absolute; -webkit-transition: left .2s; transition: left .2s; } @media screen and (min-width: 768px) { #characters .ch3_thumb_on { background-image: url("../images/pc/ch3_thumb_on.png"); } } @media screen and (min-width: 768px) { #characters .ch3_thumb_on { width: 244px; height: 120px; max-width: 100% !important; } } #characters .ch4_thumb_on { display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; color: rgba(0, 0, 0, 0); background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/ch4_thumb_on.png"); width: 37.33333vw; height: 16vw; position: absolute; -webkit-transition: left .2s; transition: left .2s; } @media screen and (min-width: 768px) { #characters .ch4_thumb_on { background-image: url("../images/pc/ch4_thumb_on.png"); } } @media screen and (min-width: 768px) { #characters .ch4_thumb_on { width: 244px; height: 120px; max-width: 100% !important; } } #characters .ch5_thumb_on { display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; color: rgba(0, 0, 0, 0); background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/ch5_thumb_on.png"); width: 41.33333vw; height: 16vw; position: absolute; -webkit-transition: left .2s; transition: left .2s; } @media screen and (min-width: 768px) { #characters .ch5_thumb_on { background-image: url("../images/pc/ch5_thumb_on.png"); } } @media screen and (min-width: 768px) { #characters .ch5_thumb_on { width: 244px; height: 120px; max-width: 100% !important; } } #characters .ch6_thumb_on { display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; color: rgba(0, 0, 0, 0); background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/ch6_thumb_on.png"); width: 37.33333vw; height: 16vw; position: absolute; -webkit-transition: left .2s; transition: left .2s; } @media screen and (min-width: 768px) { #characters .ch6_thumb_on { background-image: url("../images/pc/ch6_thumb_on.png"); } } @media screen and (min-width: 768px) { #characters .ch6_thumb_on { width: 214px; height: 120px; max-width: 100% !important; } } #characters .ch1_thumb { display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; color: rgba(0, 0, 0, 0); background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/ch1_thumb.png"); width: 37.33333vw; height: 16vw; position: absolute; -webkit-transition: left .2s; transition: left .2s; } @media screen and (min-width: 768px) { #characters .ch1_thumb { background-image: url("../images/pc/ch1_thumb.png"); } } @media screen and (min-width: 768px) { #characters .ch1_thumb { width: 214px; height: 120px; max-width: 100% !important; } } #characters .ch2_thumb { display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; color: rgba(0, 0, 0, 0); background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/ch2_thumb.png"); width: 41.33333vw; height: 16vw; position: absolute; -webkit-transition: left .2s; transition: left .2s; } @media screen and (min-width: 768px) { #characters .ch2_thumb { background-image: url("../images/pc/ch2_thumb.png"); } } @media screen and (min-width: 768px) { #characters .ch2_thumb { width: 244px; height: 120px; max-width: 100% !important; } } #characters .ch3_thumb { display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; color: rgba(0, 0, 0, 0); background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/ch3_thumb.png"); width: 37.33333vw; height: 16vw; position: absolute; -webkit-transition: left .2s; transition: left .2s; } @media screen and (min-width: 768px) { #characters .ch3_thumb { background-image: url("../images/pc/ch3_thumb.png"); } } @media screen and (min-width: 768px) { #characters .ch3_thumb { width: 244px; height: 120px; max-width: 100% !important; } } #characters .ch4_thumb { display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; color: rgba(0, 0, 0, 0); background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/ch4_thumb.png"); width: 37.33333vw; height: 16vw; position: absolute; -webkit-transition: left .2s; transition: left .2s; } @media screen and (min-width: 768px) { #characters .ch4_thumb { background-image: url("../images/pc/ch4_thumb.png"); } } @media screen and (min-width: 768px) { #characters .ch4_thumb { width: 244px; height: 120px; max-width: 100% !important; } } #characters .ch5_thumb { display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; color: rgba(0, 0, 0, 0); background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/ch5_thumb.png"); width: 41.33333vw; height: 16vw; position: absolute; -webkit-transition: left .2s; transition: left .2s; } @media screen and (min-width: 768px) { #characters .ch5_thumb { background-image: url("../images/pc/ch5_thumb.png"); } } @media screen and (min-width: 768px) { #characters .ch5_thumb { width: 244px; height: 120px; max-width: 100% !important; } } #characters .ch6_thumb { display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; color: rgba(0, 0, 0, 0); background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/ch6_thumb.png"); width: 37.33333vw; height: 16vw; position: absolute; -webkit-transition: left .2s; transition: left .2s; } @media screen and (min-width: 768px) { #characters .ch6_thumb { background-image: url("../images/pc/ch6_thumb.png"); } } @media screen and (min-width: 768px) { #characters .ch6_thumb { width: 214px; height: 120px; max-width: 100% !important; } } #characters .name_ch1 { display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; color: rgba(0, 0, 0, 0); background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/name_ch1.png"); width: 30.26667vw; height: 23.06667vw; position: absolute; } @media screen and (min-width: 768px) { #characters .name_ch1 { background-image: url("../images/pc/name_ch1.png"); } } @media screen and (min-width: 768px) { #characters .name_ch1 { width: 267px; height: 118px; max-width: 100% !important; } } #characters .type_ch1 { display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; color: rgba(0, 0, 0, 0); background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/type_ch1.png"); width: 32.26667vw; height: 12.8vw; position: absolute; } @media screen and (min-width: 768px) { #characters .type_ch1 { background-image: url("../images/pc/type_ch1.png"); } } @media screen and (min-width: 768px) { #characters .type_ch1 { width: 186px; height: 78px; max-width: 100% !important; } } #characters .txt_ch1 { display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; color: rgba(0, 0, 0, 0); background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/txt_ch1.png"); width: 89.46667vw; height: 42.66667vw; position: absolute; } @media screen and (min-width: 768px) { #characters .txt_ch1 { background-image: url("../images/pc/txt_ch1.png"); } } @media screen and (min-width: 768px) { #characters .txt_ch1 { width: 440px; height: 234px; max-width: 100% !important; } } #characters .img_ch1 { display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; color: rgba(0, 0, 0, 0); background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/img_ch1.png"); width: 37.2vw; height: 119.46667vw; position: absolute; } @media screen and (min-width: 768px) { #characters .img_ch1 { background-image: url("../images/pc/img_ch1.png"); } } @media screen and (min-width: 768px) { #characters .img_ch1 { width: 237px; height: 760px; max-width: 100% !important; } } #characters .bgtxt_ch1 { display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; color: rgba(0, 0, 0, 0); background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/bgtxt_ch1.png"); width: 100vw; height: 30vw; position: absolute; } @media screen and (min-width: 768px) { #characters .bgtxt_ch1 { background-image: url("../images/pc/bgtxt_ch1.png"); } } @media screen and (min-width: 768px) { #characters .bgtxt_ch1 { width: 1360px; height: 311px; max-width: 100% !important; } } #characters .name_ch2 { display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; color: rgba(0, 0, 0, 0); background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/name_ch2.png"); width: 49.2vw; height: 23.2vw; position: absolute; } @media screen and (min-width: 768px) { #characters .name_ch2 { background-image: url("../images/pc/name_ch2.png"); } } @media screen and (min-width: 768px) { #characters .name_ch2 { width: 409px; height: 119px; max-width: 100% !important; } } #characters .type_ch2 { display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; color: rgba(0, 0, 0, 0); background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/type_ch2.png"); width: 34vw; height: 12.8vw; position: absolute; } @media screen and (min-width: 768px) { #characters .type_ch2 { background-image: url("../images/pc/type_ch2.png"); } } @media screen and (min-width: 768px) { #characters .type_ch2 { width: 195px; height: 78px; max-width: 100% !important; } } #characters .txt_ch2 { display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; color: rgba(0, 0, 0, 0); background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/txt_ch2.png"); width: 89.6vw; height: 36.26667vw; position: absolute; } @media screen and (min-width: 768px) { #characters .txt_ch2 { background-image: url("../images/pc/txt_ch2.png"); } } @media screen and (min-width: 768px) { #characters .txt_ch2 { width: 440px; height: 202px; max-width: 100% !important; } } #characters .img_ch2 { display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; color: rgba(0, 0, 0, 0); background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/img_ch2.png"); width: 43.33333vw; height: 126.66667vw; position: absolute; } @media screen and (min-width: 768px) { #characters .img_ch2 { background-image: url("../images/pc/img_ch2.png"); } } @media screen and (min-width: 768px) { #characters .img_ch2 { width: 279px; height: 814px; max-width: 100% !important; } } #characters .bgtxt_ch2 { display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; color: rgba(0, 0, 0, 0); background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/bgtxt_ch2.png"); width: 100vw; height: 30vw; position: absolute; } @media screen and (min-width: 768px) { #characters .bgtxt_ch2 { background-image: url("../images/pc/bgtxt_ch2.png"); } } @media screen and (min-width: 768px) { #characters .bgtxt_ch2 { width: 1360px; height: 311px; max-width: 100% !important; } } #characters .name_ch3 { display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; color: rgba(0, 0, 0, 0); background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/name_ch3.png"); width: 62.8vw; height: 23.33333vw; position: absolute; } @media screen and (min-width: 768px) { #characters .name_ch3 { background-image: url("../images/pc/name_ch3.png"); } } @media screen and (min-width: 768px) { #characters .name_ch3 { width: 504px; height: 120px; max-width: 100% !important; } } #characters .type_ch3 { display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; color: rgba(0, 0, 0, 0); background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/type_ch3.png"); width: 34vw; height: 12.93333vw; position: absolute; } @media screen and (min-width: 768px) { #characters .type_ch3 { background-image: url("../images/pc/type_ch3.png"); } } @media screen and (min-width: 768px) { #characters .type_ch3 { width: 195px; height: 79px; max-width: 100% !important; } } #characters .txt_ch3 { display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; color: rgba(0, 0, 0, 0); background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/txt_ch3.png"); width: 90vw; height: 36.26667vw; position: absolute; } @media screen and (min-width: 768px) { #characters .txt_ch3 { background-image: url("../images/pc/txt_ch3.png"); } } @media screen and (min-width: 768px) { #characters .txt_ch3 { width: 440px; height: 202px; max-width: 100% !important; } } #characters .img_ch3 { display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; color: rgba(0, 0, 0, 0); background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/img_ch3.png"); width: 57.33333vw; height: 128.4vw; position: absolute; } @media screen and (min-width: 768px) { #characters .img_ch3 { background-image: url("../images/pc/img_ch3.png"); } } @media screen and (min-width: 768px) { #characters .img_ch3 { width: 489px; height: 787px; max-width: 100% !important; } } #characters .bgtxt_ch3 { display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; color: rgba(0, 0, 0, 0); background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/bgtxt_ch3.png"); width: 100vw; height: 29.73333vw; position: absolute; } @media screen and (min-width: 768px) { #characters .bgtxt_ch3 { background-image: url("../images/pc/bgtxt_ch3.png"); } } @media screen and (min-width: 768px) { #characters .bgtxt_ch3 { width: 1334px; height: 308px; max-width: 100% !important; } } #characters .name_ch4 { display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; color: rgba(0, 0, 0, 0); background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/name_ch4.png"); width: 16vw; height: 23.06667vw; position: absolute; } @media screen and (min-width: 768px) { #characters .name_ch4 { background-image: url("../images/pc/name_ch4.png"); } } @media screen and (min-width: 768px) { #characters .name_ch4 { width: 165px; height: 118px; max-width: 100% !important; } } #characters .type_ch4 { display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; color: rgba(0, 0, 0, 0); background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/type_ch4.png"); width: 34vw; height: 12.93333vw; position: absolute; } @media screen and (min-width: 768px) { #characters .type_ch4 { background-image: url("../images/pc/type_ch4.png"); } } @media screen and (min-width: 768px) { #characters .type_ch4 { width: 195px; height: 79px; max-width: 100% !important; } } #characters .txt_ch4 { display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; color: rgba(0, 0, 0, 0); background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/txt_ch4.png"); width: 88.8vw; height: 30.4vw; position: absolute; } @media screen and (min-width: 768px) { #characters .txt_ch4 { background-image: url("../images/pc/txt_ch4.png"); } } @media screen and (min-width: 768px) { #characters .txt_ch4 { width: 440px; height: 170px; max-width: 100% !important; } } #characters .img_ch4 { display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; color: rgba(0, 0, 0, 0); background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/img_ch4.png"); width: 71.33333vw; height: 108.8vw; position: absolute; } @media screen and (min-width: 768px) { #characters .img_ch4 { background-image: url("../images/pc/img_ch4.png"); } } @media screen and (min-width: 768px) { #characters .img_ch4 { width: 459px; height: 680px; max-width: 100% !important; } } #characters .bgtxt_ch4 { display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; color: rgba(0, 0, 0, 0); background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/bgtxt_ch4.png"); width: 100vw; height: 29.73333vw; position: absolute; } @media screen and (min-width: 768px) { #characters .bgtxt_ch4 { background-image: url("../images/pc/bgtxt_ch4.png"); } } @media screen and (min-width: 768px) { #characters .bgtxt_ch4 { width: 1334px; height: 308px; max-width: 100% !important; } } #characters .name_ch5 { display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; color: rgba(0, 0, 0, 0); background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/name_ch5.png"); width: 80.53333vw; height: 23.33333vw; position: absolute; } @media screen and (min-width: 768px) { #characters .name_ch5 { background-image: url("../images/pc/name_ch5.png"); } } @media screen and (min-width: 768px) { #characters .name_ch5 { width: 648px; height: 120px; max-width: 100% !important; } } #characters .type_ch5 { display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; color: rgba(0, 0, 0, 0); background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/type_ch5.png"); width: 34.13333vw; height: 13.6vw; position: absolute; } @media screen and (min-width: 768px) { #characters .type_ch5 { background-image: url("../images/pc/type_ch5.png"); } } @media screen and (min-width: 768px) { #characters .type_ch5 { width: 195px; height: 83px; max-width: 100% !important; } } #characters .txt_ch5 { display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; color: rgba(0, 0, 0, 0); background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/txt_ch5.png"); width: 90.13333vw; height: 42.66667vw; position: absolute; } @media screen and (min-width: 768px) { #characters .txt_ch5 { background-image: url("../images/pc/txt_ch5.png"); } } @media screen and (min-width: 768px) { #characters .txt_ch5 { width: 440px; height: 234px; max-width: 100% !important; } } #characters .img_ch5 { display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; color: rgba(0, 0, 0, 0); background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/img_ch5.png"); width: 65.6vw; height: 127.6vw; position: absolute; } @media screen and (min-width: 768px) { #characters .img_ch5 { background-image: url("../images/pc/img_ch5.png"); } } @media screen and (min-width: 768px) { #characters .img_ch5 { width: 413px; height: 789px; max-width: 100% !important; } } #characters .bgtxt_ch5 { display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; color: rgba(0, 0, 0, 0); background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/bgtxt_ch5.png"); width: 100vw; height: 30vw; position: absolute; } @media screen and (min-width: 768px) { #characters .bgtxt_ch5 { background-image: url("../images/pc/bgtxt_ch5.png"); } } @media screen and (min-width: 768px) { #characters .bgtxt_ch5 { width: 1434px; height: 311px; max-width: 100% !important; } } #characters .name_ch6 { display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; color: rgba(0, 0, 0, 0); background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/name_ch6.png"); width: 58.66667vw; height: 23.33333vw; position: absolute; } @media screen and (min-width: 768px) { #characters .name_ch6 { background-image: url("../images/pc/name_ch6.png"); } } @media screen and (min-width: 768px) { #characters .name_ch6 { width: 480px; height: 119px; max-width: 100% !important; } } #characters .type_ch6 { display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; color: rgba(0, 0, 0, 0); background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/type_ch6.png"); width: 34.13333vw; height: 13.6vw; position: absolute; } @media screen and (min-width: 768px) { #characters .type_ch6 { background-image: url("../images/pc/type_ch6.png"); } } @media screen and (min-width: 768px) { #characters .type_ch6 { width: 195px; height: 83px; max-width: 100% !important; } } #characters .txt_ch6 { display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; color: rgba(0, 0, 0, 0); background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/txt_ch6.png"); width: 89.73333vw; height: 49.06667vw; position: absolute; } @media screen and (min-width: 768px) { #characters .txt_ch6 { background-image: url("../images/pc/txt_ch6.png"); } } @media screen and (min-width: 768px) { #characters .txt_ch6 { width: 440px; height: 266px; max-width: 100% !important; } } #characters .img_ch6 { display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; color: rgba(0, 0, 0, 0); background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/img_ch6.png"); width: 48.13333vw; height: 122.93333vw; position: absolute; } @media screen and (min-width: 768px) { #characters .img_ch6 { background-image: url("../images/pc/img_ch6.png"); } } @media screen and (min-width: 768px) { #characters .img_ch6 { width: 301px; height: 769px; max-width: 100% !important; } } #characters .bgtxt_ch6 { display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; color: rgba(0, 0, 0, 0); background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/bgtxt_ch6.png"); width: 100vw; height: 30vw; position: absolute; } @media screen and (min-width: 768px) { #characters .bgtxt_ch6 { background-image: url("../images/pc/bgtxt_ch6.png"); } } @media screen and (min-width: 768px) { #characters .bgtxt_ch6 { width: 1434px; height: 311px; max-width: 100% !important; } } #characters .arrow_left { top: 116.8vw; left: 3.2vw; } #characters .arrow_right { top: 116.8vw; left: 86.4vw; } #characters .ch1_thumb_on { top: 77.86667vw; left: 0px; z-index: 2; } #characters .ch2_thumb_on { top: 77.86667vw; left: 29.33333vw; z-index: 2; } #characters .ch3_thumb_on { top: 77.86667vw; left: 62.66667vw; z-index: 2; } #characters .ch4_thumb_on { top: 93.86667vw; left: 0px; z-index: 2; } #characters .ch5_thumb_on { top: 93.86667vw; left: 29.33333vw; z-index: 2; } #characters .ch6_thumb_on { top: 93.86667vw; left: 62.66667vw; z-index: 2; } #characters .ch1_thumb { top: 77.86667vw; left: 0px; } #characters .ch2_thumb { top: 77.86667vw; left: 29.33333vw; } #characters .ch3_thumb { top: 77.86667vw; left: 62.66667vw; } #characters .ch4_thumb { top: 93.86667vw; left: 0px; } #characters .ch5_thumb { top: 93.86667vw; left: 29.33333vw; } #characters .ch6_thumb { top: 93.86667vw; left: 62.66667vw; } #characters .name_ch1 { top: 136.66667vw; left: 6.4vw; z-index: 2; } #characters .type_ch1 { top: 166.4vw; left: 6vw; z-index: 2; } #characters .txt_ch1 { top: 185.6vw; left: 4.13333vw; z-index: 2; } #characters .img_ch1 { top: 125.33333vw; left: 52.4vw; z-index: 1; } #characters .bgtxt_ch1 { top: 152.4vw; left: 0px; z-index: 0; } #characters .name_ch2 { top: 136.66667vw; left: 6.4vw; z-index: 2; } #characters .type_ch2 { top: 166.4vw; left: 6vw; z-index: 2; } #characters .txt_ch2 { top: 185.6vw; left: 4.26667vw; z-index: 2; } #characters .img_ch2 { top: 119.6vw; left: 49.33333vw; z-index: 1; } #characters .bgtxt_ch2 { top: 152.4vw; left: 0px; z-index: 0; } #characters .name_ch3 { top: 136.66667vw; left: 6.13333vw; z-index: 2; } #characters .type_ch3 { top: 166.4vw; left: 6vw; z-index: 2; } #characters .txt_ch3 { top: 185.6vw; left: 4.26667vw; z-index: 2; } #characters .img_ch3 { top: 117.86667vw; left: 42.66667vw; z-index: 1; } #characters .bgtxt_ch3 { top: 152.4vw; left: 0px; z-index: 0; } #characters .name_ch4 { top: 136.66667vw; left: 6.4vw; z-index: 2; } #characters .type_ch4 { top: 166.4vw; left: 6vw; z-index: 2; } #characters .txt_ch4 { top: 185.6vw; left: 4.4vw; z-index: 2; } #characters .img_ch4 { top: 122.13333vw; left: 28.66667vw; z-index: 1; } #characters .bgtxt_ch4 { top: 152.4vw; left: 0px; z-index: 0; } #characters .name_ch5 { top: 136.66667vw; left: 6.4vw; z-index: 2; } #characters .type_ch5 { top: 165.86667vw; left: 5.86667vw; z-index: 2; } #characters .txt_ch5 { top: 185.6vw; left: 4.13333vw; z-index: 2; } #characters .img_ch5 { top: 119.73333vw; left: 34.4vw; z-index: 1; } #characters .bgtxt_ch5 { top: 152.4vw; left: 0px; z-index: 0; } #characters .name_ch6 { top: 136.66667vw; left: 6.4vw; z-index: 2; } #characters .type_ch6 { top: 165.86667vw; left: 5.86667vw; z-index: 2; } #characters .txt_ch6 { top: 185.6vw; left: 4.13333vw; z-index: 2; } #characters .img_ch6 { top: 123.6vw; left: 50.53333vw; z-index: 1; } #characters .bgtxt_ch6 { top: 152.4vw; left: 0px; z-index: 0; } @media screen and (min-width: 768px) { #characters .ch { position: absolute; top: 0; left: 50%; -webkit-transition: all .2s; transition: all .2s; } #characters .name_ch1 { top: 600px; left: -480px; max-width: none !important; } #characters .type_ch1 { top: 761px; left: -442px; max-width: none !important; } #characters .txt_ch1 { top: 878px; left: -440px; max-width: none !important; } #characters .img_ch1 { top: 562px; left: 146px; max-width: none !important; } #characters .bgtxt_ch1 { top: 640px; left: -680px; max-width: none !important; } #characters .ch1_thumb { top: 360px; left: -600px; max-width: none !important; } #characters .name_ch2 { top: 600px; left: -480px; max-width: none !important; } #characters .type_ch2 { top: 761px; left: -442px; max-width: none !important; } #characters .txt_ch2 { top: 878px; left: -440px; max-width: none !important; } #characters .img_ch2 { top: 548px; left: 145px; max-width: none !important; } #characters .bgtxt_ch2 { top: 640px; left: -680px; max-width: none !important; } #characters .name_ch3 { top: 600px; left: -480px; max-width: none !important; } #characters .type_ch3 { top: 761px; left: -442px; max-width: none !important; } #characters .txt_ch3 { top: 878px; left: -440px; max-width: none !important; } #characters .img_ch3 { top: 527px; left: 98px; max-width: none !important; } #characters .bgtxt_ch3 { top: 640px; left: -667px; max-width: none !important; } #characters .name_ch4 { top: 600px; left: -480px; max-width: none !important; } #characters .type_ch4 { top: 761px; left: -442px; max-width: none !important; } #characters .txt_ch4 { top: 878px; left: -440px; max-width: none !important; } #characters .img_ch4 { top: 567px; left: -18px; max-width: none !important; } #characters .bgtxt_ch4 { top: 640px; left: -667px; max-width: none !important; } #characters .name_ch5 { top: 600px; left: -480px; max-width: none !important; } #characters .type_ch5 { top: 758px; left: -442px; max-width: none !important; } #characters .txt_ch5 { top: 878px; left: -440px; max-width: none !important; } #characters .img_ch5 { top: 535px; left: 27px; max-width: none !important; } #characters .bgtxt_ch5 { top: 640px; left: -717px; max-width: none !important; } #characters .name_ch6 { top: 601px; left: -480px; max-width: none !important; } #characters .type_ch6 { top: 758px; left: -442px; max-width: none !important; } #characters .txt_ch6 { top: 878px; left: -440px; max-width: none !important; } #characters .img_ch6 { top: 559px; left: 116px; max-width: none !important; } #characters .bgtxt_ch6 { top: 640px; left: -717px; max-width: none !important; } #characters .arrow_left { top: 840px; left: -559px; max-width: none !important; } #characters .arrow_right { top: 840px; left: 481px; max-width: none !important; } #characters .s1 .ch1_thumb { top: 360px; left: -600px; max-width: none !important; } #characters .s1 .ch1_thumb_on { top: 360px; left: -600px; max-width: none !important; } #characters .s1 .ch2_thumb { top: 360px; left: -350px; max-width: none !important; } #characters .s1 .ch3_thumb { top: 360px; left: -166px; max-width: none !important; } #characters .s1 .ch4_thumb { top: 360px; left: 18px; max-width: none !important; } #characters .s1 .ch5_thumb { top: 360px; left: 202px; max-width: none !important; } #characters .s1 .ch6_thumb { top: 360px; left: 386px; max-width: none !important; } #characters .s2 .ch1_thumb { top: 360px; left: -600px; max-width: none !important; } #characters .s2 .ch2_thumb { top: 360px; left: -446px; max-width: none !important; } #characters .s2 .ch2_thumb_on { top: 360px; left: -446px; max-width: none !important; } #characters .s2 .ch3_thumb { top: 360px; left: -166px; max-width: none !important; } #characters .s2 .ch4_thumb { top: 360px; left: 18px; max-width: none !important; } #characters .s2 .ch5_thumb { top: 360px; left: 203px; max-width: none !important; } #characters .s2 .ch6_thumb { top: 360px; left: 386px; max-width: none !important; } #characters .s3 .ch1_thumb { top: 360px; left: -600px; max-width: none !important; } #characters .s3 .ch2_thumb { top: 360px; left: -446px; max-width: none !important; } #characters .s3 .ch3_thumb { top: 360px; left: -262px; max-width: none !important; } #characters .s3 .ch3_thumb_on { top: 360px; left: -262px; max-width: none !important; } #characters .s3 .ch4_thumb { top: 360px; left: 18px; max-width: none !important; } #characters .s3 .ch5_thumb { top: 360px; left: 202px; max-width: none !important; } #characters .s3 .ch6_thumb { top: 360px; left: 386px; max-width: none !important; } #characters .s4 .ch1_thumb { top: 360px; left: -600px; max-width: none !important; } #characters .s4 .ch2_thumb { top: 360px; left: -446px; max-width: none !important; } #characters .s4 .ch3_thumb { top: 360px; left: -262px; max-width: none !important; } #characters .s4 .ch4_thumb { top: 360px; left: -78px; max-width: none !important; } #characters .s4 .ch4_thumb_on { top: 360px; left: -78px; max-width: none !important; } #characters .s4 .ch5_thumb { top: 360px; left: 202px; max-width: none !important; } #characters .s4 .ch6_thumb { top: 360px; left: 386px; max-width: none !important; } #characters .s5 .ch1_thumb { top: 360px; left: -600px; max-width: none !important; } #characters .s5 .ch2_thumb { top: 360px; left: -446px; max-width: none !important; } #characters .s5 .ch3_thumb { top: 360px; left: -262px; max-width: none !important; } #characters .s5 .ch4_thumb { top: 360px; left: -78px; max-width: none !important; } #characters .s5 .ch5_thumb { top: 360px; left: 106px; max-width: none !important; } #characters .s5 .ch5_thumb_on { top: 360px; left: 106px; max-width: none !important; } #characters .s5 .ch6_thumb { top: 360px; left: 386px; max-width: none !important; } #characters .s6 .ch1_thumb { top: 360px; left: -600px; max-width: none !important; } #characters .s6 .ch2_thumb { top: 360px; left: -446px; max-width: none !important; } #characters .s6 .ch3_thumb { top: 360px; left: -262px; max-width: none !important; } #characters .s6 .ch4_thumb { top: 360px; left: -78px; max-width: none !important; } #characters .s6 .ch5_thumb { top: 360px; left: 106px; max-width: none !important; } #characters .s6 .ch6_thumb { top: 360px; left: 290px; max-width: none !important; } #characters .s6 .ch6_thumb_on { top: 360px; left: 290px; max-width: none !important; } #characters .ch1_thumb_on { background-image: url(../images/chara_sel_01.gif); background-color: white; background-position: left top; width: 342px; height: 120px; z-index: 0; } #characters .ch2_thumb_on { background-image: url(../images/chara_sel_02.gif); background-color: white; background-position: left top; width: 342px; height: 120px; z-index: 0; } #characters .ch3_thumb_on { background-image: url(../images/chara_sel_03.gif); background-color: white; background-position: left top; width: 342px; height: 120px; z-index: 0; } #characters .ch4_thumb_on { background-image: url(../images/chara_sel_04.gif); background-color: white; background-position: left top; width: 342px; height: 120px; z-index: 0; } #characters .ch5_thumb_on { background-image: url(../images/chara_sel_05.gif); background-color: white; background-position: left top; width: 342px; height: 120px; z-index: 0; } #characters .ch6_thumb_on { background-image: url(../images/chara_sel_06.gif); background-color: white; background-position: left top; width: 342px; height: 120px; z-index: 0; } } .ch_name, .ch_type, .ch_txt, .ch_img, .ch_bgimg { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); -webkit-transition: all 0.2s; transition: all 0.2s; } .ch_name.in, .ch_type.in, .ch_txt.in, .ch_img.in, .ch_bgimg.in { opacity: 0; -webkit-transform: translateX(-4vw); transform: translateX(-4vw); -webkit-transition: all 0s; transition: all 0s; } .ch_name.out, .ch_type.out, .ch_txt.out, .ch_img.out, .ch_bgimg.out { opacity: 0; -webkit-transform: translateX(4vw); transform: translateX(4vw); -webkit-transition-duration: 0.2s; transition-duration: 0.2s; } .ch_name { -webkit-transition-delay: 100ms; transition-delay: 100ms; } .ch_type { -webkit-transition-delay: 200ms; transition-delay: 200ms; } .ch_txt { -webkit-transition-delay: 300ms; transition-delay: 300ms; } #error { margin-top: 25.33333vw; padding: 0 6vw; overflow: hidden; } @media screen and (min-width: 768px) { #error { width: 1040px; margin: 150px auto 320px; padding: 0; overflow: visible; } } #error h2 { display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; color: rgba(0, 0, 0, 0); background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/ttl_error.png"); width: 87.2vw; height: 17.06667vw; } @media screen and (min-width: 768px) { #error h2 { background-image: url("../images/pc/ttl_error.png"); } } @media screen and (min-width: 768px) { #error h2 { width: 1040px; height: 80px; max-width: 100% !important; } } #error hr.pre { display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; color: rgba(0, 0, 0, 0); background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/line_top.png"); width: 12.8vw; height: 0.53333vw; background-size: cover; border: 0; padding: 0; margin: 10.66667vw 0 4vw 0; } @media screen and (min-width: 768px) { #error hr.pre { background-image: url("../images/pc/line_top.png"); } } @media screen and (min-width: 768px) { #error hr.pre { width: 80px; height: 4px; max-width: 100% !important; } } @media screen and (min-width: 768px) { #error hr.pre { margin: 80px 0 30px 0; } } #error hr.post { display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; color: rgba(0, 0, 0, 0); background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/line_bottom.png"); width: 87.2vw; height: 0.26667vw; background-size: cover; border: 0; padding: 0; margin: 9.33333vw 0 9.33333vw 0; } @media screen and (min-width: 768px) { #error hr.post { background-image: url("../images/pc/line_bottom.png"); } } @media screen and (min-width: 768px) { #error hr.post { width: 1040px; height: 1px; max-width: 100% !important; } } @media screen and (min-width: 768px) { #error hr.post { margin: 70px 0 70px 0; } } #error .txt { font-size: 3.2vw; line-height: 5.6vw; color: white; margin-bottom: 1em; } #error .txt.bold { font-size: 4.26667vw; font-weight: bold; } @media screen and (min-width: 768px) { #error .txt { font-size: 16px; line-height: 32px; color: white; margin-bottom: 1em; } #error .txt.bold { font-size: 24px; font-weight: bold; } } #error .charabox { margin-left: -6vw; background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/bg_chara_about.png"); width: 100vw; height: 19.2vw; background-position: center 0; height: 57.46667vw; } @media screen and (min-width: 768px) { #error .charabox { background-image: url("../images/pc/bg_chara_about.png"); } } @media screen and (min-width: 768px) { #error .charabox { width: 1258px; height: 240px; max-width: 100% !important; } } #error .charabox .chara { display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; color: rgba(0, 0, 0, 0); background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/chara_about.png"); width: 100vw; height: 57.46667vw; max-width: none !important; } @media screen and (min-width: 768px) { #error .charabox .chara { background-image: url("../images/pc/chara_about.png"); } } @media screen and (min-width: 768px) { #error .charabox .chara { width: 1551px; height: 640px; max-width: 100% !important; } } @media screen and (min-width: 768px) { #error .charabox { margin-left: 0; margin-top: 80px; position: relative; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } #error .charabox .chara { max-width: none !important; position: relative; left: 50%; -webkit-transform: translateX(-50%) translateY(-80px); transform: translateX(-50%) translateY(-80px); } } #privacy { margin-top: 26.66667vw; color: white; font-size: 3.2vw; line-height: 6.4vw; padding: 0 6.66667vw; } #privacy h2 { font-size: 4.26667vw; margin: 2em 0; } #privacy h3 { padding-left: 1em; border-left: 0.8vw solid #d5372c; margin: 3em 0 2em; } #privacy p { margin-bottom: 1em; } #privacy a { color: white; text-decoration: none; } @media screen and (min-width: 768px) { #privacy { margin-top: 150px; font-size: 16px; line-height: 32px; padding: 0; width: 1040px; margin: 150px auto; } #privacy h2 { font-size: 20px; } #privacy h3 { border-left: 6px solid #d5372c; } } #service { margin-top: 26.66667vw; color: white; font-size: 3.2vw; line-height: 6.4vw; padding: 0 6.66667vw; } #service h2 { font-size: 4.26667vw; margin: 2em 0; } #service h3 { padding-left: 1em; border-left: 0.8vw solid #d5372c; margin: 3em 0 2em; } #service p { margin-bottom: 1em; } #service a { color: white; text-decoration: none; } @media screen and (min-width: 768px) { #service { margin-top: 150px; font-size: 16px; line-height: 32px; padding: 0; width: 1040px; margin: 150px auto; } #service h2 { font-size: 20px; } #service h3 { border-left: 6px solid #d5372c; } } #news { margin-top: 25.33333vw; padding: 0 6vw; overflow: hidden; } @media screen and (min-width: 768px) { #news { width: 1040px; margin: 150px auto 150px; padding: 0; overflow: visible; } } @media screen and (min-width: 768px) { #news .content { width: 720px; float: left; } } @media screen and (min-width: 768px) { #news .content2 { width: 240px; border: 1px solid white; padding: 1em; margin-left: 800px; margin-top: 100px; } } #news h2 { display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; color: rgba(0, 0, 0, 0); background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/ttl_news.png"); width: 87.2vw; height: 17.06667vw; } @media screen and (min-width: 768px) { #news h2 { background-image: url("../images/pc/ttl_news.png"); } } @media screen and (min-width: 768px) { #news h2 { width: 1040px; height: 80px; max-width: 100% !important; } } #news hr.short { display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; color: rgba(0, 0, 0, 0); background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/line_top.png"); width: 12.8vw; height: 0.53333vw; background-size: cover; border: 0; padding: 0; margin: 2.66667vw 0 4vw 0; } @media screen and (min-width: 768px) { #news hr.short { background-image: url("../images/pc/line_top.png"); } } @media screen and (min-width: 768px) { #news hr.short { width: 80px; height: 4px; max-width: 100% !important; } } @media screen and (min-width: 768px) { #news hr.short { margin: 20px 0 30px 0; } } #news hr.full { display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; color: rgba(0, 0, 0, 0); background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/line_bottom.png"); width: 87.2vw; height: 0.26667vw; background-size: cover; border: 0; padding: 0; margin: 2.66667vw 0 2.66667vw 0; } @media screen and (min-width: 768px) { #news hr.full { background-image: url("../images/pc/line_bottom.png"); } } @media screen and (min-width: 768px) { #news hr.full { width: 1040px; height: 1px; max-width: 100% !important; } } @media screen and (min-width: 768px) { #news hr.full { margin: 20px 0 20px 0; } } #news .social { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 5.33333vw 0; } @media screen and (min-width: 768px) { #news .social { margin: 10px 0; } } #news .social .txt { font-family: 'Roboto Condensed', sans-serif; display: inline-block; font-size: 2.66667vw; padding-top: 0.7em; } @media screen and (min-width: 768px) { #news .social .txt { font-size: 12px; position: relative; top: 0; margin-right: 10px; } } #news .social a { display: inline-block !important; margin: 0 2.66667vw; } @media screen and (min-width: 768px) { #news .social a { margin: 0 10px; } } #news .social .tw { display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; color: rgba(0, 0, 0, 0); background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/ico_twitter.png"); width: 7.06667vw; height: 5.73333vw; margin-left: 5.33333vw; } @media screen and (min-width: 768px) { #news .social .tw { background-image: url("../images/pc/ico_twitter.png"); } } @media screen and (min-width: 768px) { #news .social .tw { width: 20px; height: 17px; max-width: 100% !important; } } @media screen and (min-width: 768px) { #news .social .tw { margin-left: 20px; } } #news .social .fb { display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; color: rgba(0, 0, 0, 0); background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/ico_facebook.png"); width: 7.06667vw; height: 7.06667vw; } @media screen and (min-width: 768px) { #news .social .fb { background-image: url("../images/pc/ico_facebook.png"); } } @media screen and (min-width: 768px) { #news .social .fb { width: 20px; height: 20px; max-width: 100% !important; } } #news .social .line { display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; color: rgba(0, 0, 0, 0); background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/ico_line.png"); width: 7.06667vw; height: 6.8vw; margin-right: 5.06667vw; } @media screen and (min-width: 768px) { #news .social .line { background-image: url("../images/pc/ico_line.png"); } } @media screen and (min-width: 768px) { #news .social .line { width: 20px; height: 19px; max-width: 100% !important; } } @media screen and (min-width: 768px) { #news .social .line { margin-right: 0; } } #news .date { font-family: 'Roboto Condensed', sans-serif; font-size: 3.2vw; color: #d5372c; margin-top: 11.33333vw; } @media screen and (min-width: 768px) { #news .date { font-size: 20px; margin-top: 85px; } } #news h3 { font-size: 4.26667vw; line-height: 8.53333vw; font-weight: bold; } @media screen and (min-width: 768px) { #news h3 { font-size: 20px; line-height: 40px; } } #news h5 { font-size: 3.2vw; line-height: 4.26667vw; font-weight: normal; background-color: white; padding: 0em 0.5em; display: inline-block; color: #000000; } @media screen and (min-width: 768px) { #news h5 { font-size: 16px; line-height: 32px; } } #news p { font-size: 3.2vw; line-height: 5.6vw; color: white; margin-top: 0.5em; margin-bottom: 1em; } #news p.bold { font-size: 4.26667vw; font-weight: bold; } #news p a { color: white; text-decoration: none; } @media screen and (min-width: 768px) { #news p { font-size: 16px; line-height: 32px; color: white; margin-bottom: 1em; } #news p.bold { font-size: 24px; font-weight: bold; } } #news .full { width: 100vw; max-width: none !important; height: auto; margin-left: -6vw; margin-top: 1em; margin-bottom: 0.5em; } @media screen and (min-width: 768px) { #news .full { margin: 1em 0 0.5em; width: 100%; } } @media screen and (min-width: 768px) { #news .flex { display: -webkit-box; display: -ms-flexbox; display: flex; } #news .flex .a, #news .flex .b { width: 50%; padding: 1em; } } #news .caption { font-size: 2.66667vw; line-height: 4.26667vw; color: #aaaaaa; } @media screen and (min-width: 768px) { #news .caption { font-size: 14px; line-height: 32px; } } #news h4 { font-size: 4.26667vw; line-height: 8.53333vw; } @media screen and (min-width: 768px) { #news h4 { font-size: 20px; line-height: 32px; } } #news h6 { font-size: 3.2vw; line-height: 5.6vw; font-weight: normal; border-left: 0.8vw solid #d5372c; padding-left: 1em; margin: 0.5em 0 1em 0; } @media screen and (min-width: 768px) { #news h6 { font-size: 16px; line-height: 32px; border-left: 6px solid #d5372c; } } #news .red { color: #d5372c; } #news blockquote { margin: 0; border: 1px solid white; padding: 1em; font-size: 3.2vw; line-height: 6.4vw; } @media screen and (min-width: 768px) { #news blockquote { border: 1px solid white; font-size: 16px; line-height: 32px; } } #news .social { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 5.33333vw 0; } @media screen and (min-width: 768px) { #news .social { margin: 10px 0; } } #news .social .txt { font-family: 'Roboto Condensed', sans-serif; display: inline-block; font-size: 2.66667vw; } @media screen and (min-width: 768px) { #news .social .txt { font-size: 12px; position: relative; top: -4px; margin-right: 10px; } } #news .social a { display: inline-block !important; margin: 0 2.66667vw; } @media screen and (min-width: 768px) { #news .social a { margin: 0 10px; } } #news .social .tw { display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; color: rgba(0, 0, 0, 0); background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/ico_twitter.png"); width: 7.06667vw; height: 5.73333vw; margin-left: 5.33333vw; } @media screen and (min-width: 768px) { #news .social .tw { background-image: url("../images/pc/ico_twitter.png"); } } @media screen and (min-width: 768px) { #news .social .tw { width: 20px; height: 17px; max-width: 100% !important; } } @media screen and (min-width: 768px) { #news .social .tw { margin-left: 20px; } } #news .social .fb { display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; color: rgba(0, 0, 0, 0); background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/ico_facebook.png"); width: 7.06667vw; height: 7.06667vw; } @media screen and (min-width: 768px) { #news .social .fb { background-image: url("../images/pc/ico_facebook.png"); } } @media screen and (min-width: 768px) { #news .social .fb { width: 20px; height: 20px; max-width: 100% !important; } } #news .social .line { display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; color: rgba(0, 0, 0, 0); background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/ico_line.png"); width: 7.06667vw; height: 6.8vw; margin-right: 5.06667vw; } @media screen and (min-width: 768px) { #news .social .line { background-image: url("../images/pc/ico_line.png"); } } @media screen and (min-width: 768px) { #news .social .line { width: 20px; height: 19px; max-width: 100% !important; } } @media screen and (min-width: 768px) { #news .social .line { margin-right: 0; } } #news .recommend { margin-top: 10.66667vw; font-family: 'Roboto Condensed', sans-serif; font-size: 5.86667vw; font-weight: bold; } @media screen and (min-width: 768px) { #news .recommend { margin-top: 0; font-size: 20px; } } #news .box { font-size: 3.2vw; line-height: 200%; } #news .box .date { margin-top: 1em; color: #d5372c; font-family: 'Roboto Condensed', sans-serif; } #news .box .txt { color: #ffffff; } #news .box .txt a { text-decoration: none; color: #ffffff; } #news .box hr { border: 0; background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("../images/sp/line.png"); width: 87.2vw; height: 0.26667vw; width: 100%; margin: 1em 0; } @media screen and (min-width: 768px) { #news .box hr { background-image: url("../images/pc/line.png"); } } @media screen and (min-width: 768px) { #news .box hr { width: 480px; height: 1px; max-width: 100% !important; } } #news .embed { width: 100vw; margin-left: -6vw; padding-bottom: 56.25vw; height: 0px; position: relative; margin-top: 2em; margin-bottom: 1em; } @media screen and (min-width: 768px) { #news .embed { margin-left: 0; width: 100%; padding-bottom: 56.25%; } } #news .embed iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } @media screen and (min-width: 768px) { #news .box { width: 100%; height: auto; margin: 0; font-size: 14px; } } #loading { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; background-color: #000000; z-index: 10; 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; } #loading .z { background-image: url(../images/zombie_walk.gif); width: 9.33333vw; height: 20vw; background-size: contain; background-repeat: no-repeat; animation: glitch .6s .1s infinite alternate-reverse; } @media screen and (min-width: 768px) { #loading .z { width: 70px; height: 150px; } } #loading .txt { margin-top: 4vw; font-size: 2.26667vw; letter-spacing: 2vw; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-animation: glitch .6s infinite alternate; animation: glitch .6s infinite alternate; } @media screen and (min-width: 768px) { #loading .txt { margin-top: 30px; font-size: 17px; letter-spacing: 15px; } } #loading .txt .l { background-image: url(../images/loading.png); background-size: contain; background-repeat: no-repeat; width: 19.06667vw; height: 2vw; margin-right: 2.66667vw; } @media screen and (min-width: 768px) { #loading .txt .l { width: 143px; height: 15px; margin-right: 20px; } } #loading .txt .dot1, #loading .txt .dot2, #loading .txt .dot3 { opacity: 1; -webkit-transition: all .2s; transition: all .2s; } #loading .txt .dot1.n, #loading .txt .dot2.n, #loading .txt .dot3.n { opacity: 0; } @-webkit-keyframes glitch { 0% { opacity: .5; } 10% { opacity: 0.8; } 40% { opacity: 0.7; } 50% { opacity: 0.9; } 70% { opacity: 0.7; } 100% { opacity: 1; } } @keyframes glitch { 0% { opacity: .5; } 10% { opacity: 0.8; } 40% { opacity: 0.7; } 50% { opacity: 0.9; } 70% { opacity: 0.7; } 100% { opacity: 1; } }