@charset "UTF-8"; /* HTML5 Reset :: style.css ---------------------------------------------------------- We have learned much from/been inspired by/taken code where offered from: Eric Meyer :: http://meyerweb.com HTML5 Doctor :: http://html5doctor.com and the HTML5 Boilerplate :: http://html5boilerplate.com -------------------------------------------------------------------------------*/ /* Let's default this puppy out -------------------------------------------------------------------------------*/ html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary { margin: 0; padding: 0; border: 0; font-size: 100%; font-weight: normal; vertical-align: baseline; background: transparent } article, aside, figure, footer, header, nav, section, details, summary { display: block } /* Handle box-sizing while better addressing child elements: http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */ html { -webkit-box-sizing: border-box; box-sizing: border-box } *, *:before, *:after { -webkit-box-sizing: inherit; box-sizing: inherit } /* consider resetting the default cursor: https://gist.github.com/murtaugh/5247154 */ /* Responsive images and other embedded objects */ /* if you don't have full control over `img` tags (if you have to overcome attributes), consider adding height: auto */ img, object, embed { max-width: 100% } /* Note: keeping IMG here will cause problems if you're using foreground images as sprites. In fact, it *will* cause problems with Google Maps' controls at small size. If this is the case for you, try uncommenting the following: #map img { max-width: none; } */ /* force a vertical scrollbar to prevent a jumpy page */ html { overflow-y: scroll } /* we use a lot of ULs that aren't bulleted. you'll have to restore the bullets within content, which is fine because they're probably customized anyway */ ul { list-style: none } blockquote, q { quotes: none } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none } a { margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent } del { text-decoration: line-through } abbr[title], dfn[title] { border-bottom: 1px dotted #000; cursor: help } /* tables still need cellspacing="0" in the markup */ table { border-collapse: collapse; border-spacing: 0 } th { font-weight: bold; vertical-align: bottom } td { font-weight: normal; vertical-align: top } hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0 } input, select { vertical-align: middle } pre { white-space: pre; /* CSS2 */white-space: pre-wrap; /* CSS 2.1 */white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */word-wrap: break-word/* IE */ } input[type="radio"] { vertical-align: text-bottom } input[type="checkbox"] { vertical-align: bottom } .ie7 input[type="checkbox"] { vertical-align: baseline } .ie6 input { vertical-align: text-bottom } select, input, textarea { font: 99% sans-serif } table { font-size: inherit; font: 100% } small { font-size: 85% } strong { font-weight: bold } td, td img { vertical-align: top } /* Make sure sup and sub don't mess with your line-heights http://gist.github.com/413930 */ sub, sup { font-size: 75%; line-height: 0; position: relative } sup { top: -0.5em } sub { bottom: -0.25em } /* standardize any monospaced elements */ pre, code, kbd, samp { font-family: monospace,sans-serif } /* hand cursor on clickable elements */ .clickable, label, input[type=button], input[type=submit], input[type=file], button { cursor: pointer } /* Webkit browsers add a 2px margin outside the chrome of form elements */ button, input, select, textarea { margin: 0 } /* make buttons play nice in IE */ button, input[type=button] { width: auto; overflow: visible } /* scale images in IE7 more attractively */ .ie7 img { -ms-interpolation-mode: bicubic } /* prevent BG image flicker upon hover (commented out as usage is rare, and the filter syntax messes with some pre-processors) .ie6 html {filter: expression(document.execCommand("BackgroundImageCache", false, true));} */ /* let's clear some floats */ .clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden } .clearfix:after { clear: both } .clearfix { zoom: 1 } 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: 0s; transition-delay: 0s } 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: 0s; transition-delay: 0s } 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: 0s; transition-delay: 0s } 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: 0s; transition-delay: 0s } 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: 0s; transition-delay: 0s } 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: 0s; transition-delay: 0s } 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: 0s; transition-delay: 0s } 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: 0s; transition-delay: 0s } 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: 0s; transition-delay: 0s } 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: 0s; transition-delay: 0s } 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: 0s; transition-delay: 0s } 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: 0s; transition-delay: 0s } 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: 0s; transition-delay: 0s } 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: 0s; transition-delay: 0s } 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: 0s; transition-delay: 0s } 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: 0s; transition-delay: 0s } 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: 0s; transition-delay: 0s } 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: 0s; transition-delay: 0s } 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: 0s; transition-delay: 0s } 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: 0s; transition-delay: 0s } 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: 0s; transition-delay: 0s } 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: 0s; transition-delay: 0s } 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: 0s; transition-delay: 0s } 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: 0s; transition-delay: 0s } 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: 0s; transition-delay: 0s } 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: 0s; transition-delay: 0s } 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: 0s; transition-delay: 0s } 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: 0s; transition-delay: 0s } 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: 0s; transition-delay: 0s } 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: 0s; transition-delay: 0s } 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: 0s; transition-delay: 0s } 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: 0s; transition-delay: 0s } 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: 0s; transition-delay: 0s } 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: 0s; transition-delay: 0s } 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: 0s; transition-delay: 0s } 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: 0s; transition-delay: 0s } 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: 0s; transition-delay: 0s } 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: 0s; transition-delay: 0s } 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: 0s; transition-delay: 0s } 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: 0s; transition-delay: 0s } 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: 0s; transition-delay: 0s } 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: 0s; transition-delay: 0s } 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: 0s; transition-delay: 0s } 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: 0s; transition-delay: 0s } 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: 0s; transition-delay: 0s } 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: 0s; transition-delay: 0s } 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: 0s; transition-delay: 0s } 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: 0s; transition-delay: 0s } 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: 0s; transition-delay: 0s } 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: 0s; transition-delay: 0s } 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: 0s; transition-delay: 0s } 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: 0s; transition-delay: 0s } 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: 0s; transition-delay: 0s } 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: 0s; transition-delay: 0s } 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: 0s; transition-delay: 0s } 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: 0s; transition-delay: 0s } 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: 0s; transition-delay: 0s } 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: 0s; transition-delay: 0s } 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: 0s; transition-delay: 0s } 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: 0s; transition-delay: 0s } 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 } [data-aos] { pointer-events: none } [data-aos].aos-animate { pointer-events: auto } 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) } @media screen { html:not(.no-js) { /** * Fade animations: * fade * fade-up, fade-down, fade-left, fade-right * fade-up-right, fade-up-left, fade-down-right, fade-down-left *//** * 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 *//** * Slide animations *//** * Flip animations: * flip-left, flip-right, flip-up, flip-down */ } html:not(.no-js) [data-aos^='fade'][data-aos^='fade'] { -webkit-transition-property: opacity,-webkit-transform; transition-property: opacity,-webkit-transform; transition-property: opacity,transform; transition-property: opacity,transform,-webkit-transform; opacity: 0 } html:not(.no-js) [data-aos^='fade'][data-aos^='fade'].aos-animate { -webkit-transform: none; transform: none; opacity: 1 } html:not(.no-js) [data-aos='fade-up'] { -webkit-transform: translate3d(0, 15px, 0); transform: translate3d(0, 15px, 0) } html:not(.no-js) [data-aos='fade-down'] { -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0) } html:not(.no-js) [data-aos='fade-right'] { -webkit-transform: translate3d(-15px, 0, 0); transform: translate3d(-15px, 0, 0) } html:not(.no-js) [data-aos='fade-left'] { -webkit-transform: translate3d(15px, 0, 0); transform: translate3d(15px, 0, 0) } html:not(.no-js) [data-aos='fade-up-right'] { -webkit-transform: translate3d(-15px, 15px, 0); transform: translate3d(-15px, 15px, 0) } html:not(.no-js) [data-aos='fade-up-left'] { -webkit-transform: translate3d(15px, 15px, 0); transform: translate3d(15px, 15px, 0) } html:not(.no-js) [data-aos='fade-down-right'] { -webkit-transform: translate3d(-15px, -15px, 0); transform: translate3d(-15px, -15px, 0) } html:not(.no-js) [data-aos='fade-down-left'] { -webkit-transform: translate3d(15px, -15px, 0); transform: translate3d(15px, -15px, 0) } html:not(.no-js) [data-aos^='zoom'][data-aos^='zoom'] { -webkit-transition-property: opacity,-webkit-transform; transition-property: opacity,-webkit-transform; transition-property: opacity,transform; transition-property: opacity,transform,-webkit-transform; opacity: 0 } html:not(.no-js) [data-aos^='zoom'][data-aos^='zoom'].aos-animate { -webkit-transform: translate3d(0, 0, 0) scale(1); transform: translate3d(0, 0, 0) scale(1); opacity: 1 } html:not(.no-js) [data-aos='zoom-in'] { -webkit-transform: scale(0.6); transform: scale(0.6) } html:not(.no-js) [data-aos='zoom-in-up'] { -webkit-transform: translate3d(0, 15px, 0) scale(0.6); transform: translate3d(0, 15px, 0) scale(0.6) } html:not(.no-js) [data-aos='zoom-in-down'] { -webkit-transform: translate3d(0, -15px, 0) scale(0.6); transform: translate3d(0, -15px, 0) scale(0.6) } html:not(.no-js) [data-aos='zoom-in-right'] { -webkit-transform: translate3d(-15px, 0, 0) scale(0.6); transform: translate3d(-15px, 0, 0) scale(0.6) } html:not(.no-js) [data-aos='zoom-in-left'] { -webkit-transform: translate3d(15px, 0, 0) scale(0.6); transform: translate3d(15px, 0, 0) scale(0.6) } html:not(.no-js) [data-aos='zoom-out'] { -webkit-transform: scale(1.2); transform: scale(1.2) } html:not(.no-js) [data-aos='zoom-out-up'] { -webkit-transform: translate3d(0, 15px, 0) scale(1.2); transform: translate3d(0, 15px, 0) scale(1.2) } html:not(.no-js) [data-aos='zoom-out-down'] { -webkit-transform: translate3d(0, -15px, 0) scale(1.2); transform: translate3d(0, -15px, 0) scale(1.2) } html:not(.no-js) [data-aos='zoom-out-right'] { -webkit-transform: translate3d(-15px, 0, 0) scale(1.2); transform: translate3d(-15px, 0, 0) scale(1.2) } html:not(.no-js) [data-aos='zoom-out-left'] { -webkit-transform: translate3d(15px, 0, 0) scale(1.2); transform: translate3d(15px, 0, 0) scale(1.2) } html:not(.no-js) [data-aos^='slide'][data-aos^='slide'] { visibility: hidden; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; transition-property: transform; transition-property: transform,-webkit-transform } html:not(.no-js) [data-aos^='slide'][data-aos^='slide'].aos-animate { visibility: visible; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } html:not(.no-js) [data-aos='slide-up'] { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0) } html:not(.no-js) [data-aos='slide-down'] { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0) } html:not(.no-js) [data-aos='slide-right'] { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0) } html:not(.no-js) [data-aos='slide-left'] { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0) } html:not(.no-js) [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 } html:not(.no-js) [data-aos='flip-left'] { -webkit-transform: perspective(2500px) rotateY(-100deg); transform: perspective(2500px) rotateY(-100deg) } html:not(.no-js) [data-aos='flip-left'].aos-animate { -webkit-transform: perspective(2500px) rotateY(0); transform: perspective(2500px) rotateY(0) } html:not(.no-js) [data-aos='flip-right'] { -webkit-transform: perspective(2500px) rotateY(100deg); transform: perspective(2500px) rotateY(100deg) } html:not(.no-js) [data-aos='flip-right'].aos-animate { -webkit-transform: perspective(2500px) rotateY(0); transform: perspective(2500px) rotateY(0) } html:not(.no-js) [data-aos='flip-up'] { -webkit-transform: perspective(2500px) rotateX(-100deg); transform: perspective(2500px) rotateX(-100deg) } html:not(.no-js) [data-aos='flip-up'].aos-animate { -webkit-transform: perspective(2500px) rotateX(0); transform: perspective(2500px) rotateX(0) } html:not(.no-js) [data-aos='flip-down'] { -webkit-transform: perspective(2500px) rotateX(100deg); transform: perspective(2500px) rotateX(100deg) } html:not(.no-js) [data-aos='flip-down'].aos-animate { -webkit-transform: perspective(2500px) rotateX(0); transform: perspective(2500px) rotateX(0) } } html, body { -webkit-text-size-adjust: 100% } html { font-size: 62.5% } body { overflow: hidden; font-family: "ヒラギノ角ゴ Pro","Hiragino Kaku Gothic Pro",Osaka,"メイリオ","Meiryo","ＭＳ Ｐゴシック","MS PGothic",sans-serif; font-size: 14px; font-size: 1.4rem; line-height: 1.8; word-wrap: break-word; color: #333; background-color: #fff; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-font-smoothing: antialiased } a { text-decoration: none; color: #d8d8d8; outline: none } img { max-width: 100%; height: auto; vertical-align: bottom } @media screen and (max-width: 750px) { .pc { display: none !important } } @media screen and (min-width: 1401px) { .sp { display: none !important } } @media screen and (min-width: 751px) and (max-width: 1400px) { .sp { display: none !important } } .full { position: absolute; top: 0; left: 0; width: 100%; height: 100% } .full-x { position: relative; top: 0; left: 0; width: 100%; height: auto } .o-h { overflow: hidden } video { display: block } .wrapper.header-content-show { z-index: 1 } .wrapper.header-content-show ~ .SWITCH_logo { z-index: 1 } .wrapper.header-content-show ~ .product-logo { z-index: 1 } .wrapper.header-content-show ~ .try-cta-btn { z-index: 1 } .SWITCH_logo { position: absolute; z-index: 10102; cursor: pointer; background-image: url(../images/top/SWITCH_logo.png); background-size: 100% 100% } @media screen and (min-width: 1401px) { .SWITCH_logo { top: 46px; right: 0; width: 100px; height: 100px } } @media screen and (min-width: 751px) and (max-width: 1400px) { .SWITCH_logo { top: 46px; right: 0; width: 100px; height: 100px } } @media screen and (max-width: 750px) { .SWITCH_logo { top: calc(50px + 1.33333vw); right: 1.33333vw; width: 11.73333vw; height: 11.73333vw } } .product-logo { position: absolute; z-index: 10102; cursor: pointer } @media screen and (min-width: 1401px) { .product-logo { top: calc(22.96875px + 46px); left: 21.875px; width: 282.1875px } } @media screen and (min-width: 751px) and (max-width: 1400px) { .product-logo { top: calc(1.64062vw + 46px); left: 1.5625vw; width: 20.15625vw } } @media screen and (max-width: 750px) { .product-logo { top: calc(1.6vw + 50px); left: 1.73333vw; width: 34.4vw } } .h-w { position: absolute; top: 0; left: 0; overflow: hidden; width: 100%; height: 0; font-size: 0; text-indent: -1000px; pointer-events: none; opacity: 0 } .media-query-div { position: absolute; top: 0; left: 0 } @media screen and (min-width: 1401px) { .media-query-div { width: 100px } } @media screen and (min-width: 751px) and (max-width: 1400px) { .media-query-div { width: 100px } } @media screen and (max-width: 750px) { .media-query-div { width: 0 } } .ani-initial { opacity: 0 } body[data-aos-easing="ease"] [data-aos], [data-aos][data-aos][data-aos-easing="ease"] { -webkit-transition-timing-function: cubic-bezier(0.86, 0.16, 0.21, 0.82) !important; transition-timing-function: cubic-bezier(0.86, 0.16, 0.21, 0.82) !important } @-webkit-keyframes shake { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg) } 30% { -webkit-transform: rotate(0deg); transform: rotate(0deg) } 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg) } 47.5% { -webkit-transform: rotate(5deg); transform: rotate(5deg) } 65% { -webkit-transform: rotate(0deg); transform: rotate(0deg) } 82.5% { -webkit-transform: rotate(5deg); transform: rotate(5deg) } } @keyframes shake { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg) } 30% { -webkit-transform: rotate(0deg); transform: rotate(0deg) } 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg) } 47.5% { -webkit-transform: rotate(5deg); transform: rotate(5deg) } 65% { -webkit-transform: rotate(0deg); transform: rotate(0deg) } 82.5% { -webkit-transform: rotate(5deg); transform: rotate(5deg) } } html:not(.no-js) [data-aos='fade-left'] { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0) } @media screen and (min-width: 1401px) { .slick-arrow:hover:before { opacity: 0 } .slick-arrow:hover:after { opacity: 1 } } @media screen and (min-width: 751px) and (max-width: 1400px) { .slick-arrow:hover:before { opacity: 0 } .slick-arrow:hover:after { opacity: 1 } } .slick-arrow[class*="prev"]:after { background-image: url(../images/common/arrow-prev-on_sp.png) } .slick-arrow[class*="next"]:after { background-image: url(../images/common/arrow-next-on_sp.png) } .slick-arrow:after { content: ""; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; opacity: 0; background-size: 100% 100% } .w-border-text { position: absolute; left: -5%; width: 110%; font-family: 'Noto Sans JP',sans-serif; font-weight: 700; text-align: center; letter-spacing: 1px; color: #000 } @media screen and (min-width: 1401px) { .w-border-text { top: 0; font-size: 21.875px; line-height: 1.5; text-shadow: 0px 3.9375px #fff,0.68374px 3.87768px #fff,1.3467px 3.70004px #fff,1.96875px 3.40998px #fff,2.53098px 3.0163px #fff,3.0163px 2.53098px #fff,3.40998px 1.96875px #fff,3.70004px 1.3467px #fff,3.87768px 0.68374px #fff,3.9375px 0px #fff,3.87768px -0.68374px #fff,3.70004px -1.3467px #fff,3.40998px -1.96875px #fff,3.0163px -2.53098px #fff,2.53098px -3.0163px #fff,1.96875px -3.40998px #fff,1.3467px -3.70004px #fff,0.68374px -3.87768px #fff,0px -3.9375px #fff,-0.68374px -3.87768px #fff,-1.3467px -3.70004px #fff,-1.96875px -3.40998px #fff,-2.53098px -3.0163px #fff,-3.0163px -2.53098px #fff,-3.40997px -1.96875px #fff,-3.70004px -1.3467px #fff,-3.87768px -0.68374px #fff,-3.9375px 0px #fff,-3.87768px 0.68374px #fff,-3.70004px 1.34671px #fff,-3.40997px 1.96877px #fff,-3.01629px 2.53102px #fff,-2.53095px 3.01639px #fff,-1.96871px 3.41015px #fff,-1.34662px 3.70038px #fff,-0.68357px 3.87832px #fff,0.00033px 3.93869px #fff,0px 2.625px #fff,0.45583px 2.58512px #fff,0.8978px 2.46669px #fff,1.3125px 2.27332px #fff,1.68732px 2.01087px #fff,2.01087px 1.68732px #fff,2.27332px 1.3125px #fff,2.46669px 0.8978px #fff,2.58512px 0.45583px #fff,2.625px 0px #fff,2.58512px -0.45583px #fff,2.46669px -0.8978px #fff,2.27332px -1.3125px #fff,2.01087px -1.68732px #fff,1.68732px -2.01087px #fff,1.3125px -2.27332px #fff,0.8978px -2.46669px #fff,0.45583px -2.58512px #fff,0px -2.625px #fff,-0.45583px -2.58512px #fff,-0.8978px -2.46669px #fff,-1.3125px -2.27332px #fff,-1.68732px -2.01087px #fff,-2.01087px -1.68732px #fff,-2.27332px -1.3125px #fff,-2.46669px -0.8978px #fff,-2.58512px -0.45583px #fff,-2.625px 0px #fff,-2.58512px 0.45583px #fff,-2.46669px 0.89781px #fff,-2.27331px 1.31251px #fff,-2.01086px 1.68735px #fff,-1.6873px 2.01093px #fff,-1.31247px 2.27343px #fff,-0.89774px 2.46692px #fff,-0.45571px 2.58555px #fff,0.00022px 2.62579px #fff } } @media screen and (min-width: 751px) and (max-width: 1400px) { .w-border-text { top: 0; font-size: 1.5625vw; line-height: 1.5; text-shadow: 0vw 0.28125vw #fff,0.04884vw 0.27698vw #fff,0.09619vw 0.26429vw #fff,0.14063vw 0.24357vw #fff,0.18078vw 0.21545vw #fff,0.21545vw 0.18078vw #fff,0.24357vw 0.14062vw #fff,0.26429vw 0.09619vw #fff,0.27698vw 0.04884vw #fff,0.28125vw 0vw #fff,0.27698vw -0.04884vw #fff,0.26429vw -0.09619vw #fff,0.24357vw -0.14063vw #fff,0.21545vw -0.18078vw #fff,0.18078vw -0.21545vw #fff,0.14063vw -0.24357vw #fff,0.09619vw -0.26429vw #fff,0.04884vw -0.27698vw #fff,0vw -0.28125vw #fff,-0.04884vw -0.27698vw #fff,-0.09619vw -0.26429vw #fff,-0.14062vw -0.24357vw #fff,-0.18078vw -0.21545vw #fff,-0.21545vw -0.18078vw #fff,-0.24357vw -0.14062vw #fff,-0.26429vw -0.09619vw #fff,-0.27698vw -0.04884vw #fff,-0.28125vw 0vw #fff,-0.27698vw 0.04884vw #fff,-0.26429vw 0.09619vw #fff,-0.24357vw 0.14063vw #fff,-0.21545vw 0.18079vw #fff,-0.18078vw 0.21546vw #fff,-0.14062vw 0.24358vw #fff,-0.09619vw 0.26431vw #fff,-0.04883vw 0.27702vw #fff,0.00002vw 0.28133vw #fff,0vw 0.1875vw #fff,0.03256vw 0.18465vw #fff,0.06413vw 0.17619vw #fff,0.09375vw 0.16238vw #fff,0.12052vw 0.14363vw #fff,0.14363vw 0.12052vw #fff,0.16238vw 0.09375vw #fff,0.17619vw 0.06413vw #fff,0.18465vw 0.03256vw #fff,0.1875vw 0vw #fff,0.18465vw -0.03256vw #fff,0.17619vw -0.06413vw #fff,0.16238vw -0.09375vw #fff,0.14363vw -0.12052vw #fff,0.12052vw -0.14363vw #fff,0.09375vw -0.16238vw #fff,0.06413vw -0.17619vw #fff,0.03256vw -0.18465vw #fff,0vw -0.1875vw #fff,-0.03256vw -0.18465vw #fff,-0.06413vw -0.17619vw #fff,-0.09375vw -0.16238vw #fff,-0.12052vw -0.14363vw #fff,-0.14363vw -0.12052vw #fff,-0.16238vw -0.09375vw #fff,-0.17619vw -0.06413vw #fff,-0.18465vw -0.03256vw #fff,-0.1875vw 0vw #fff,-0.18465vw 0.03256vw #fff,-0.17619vw 0.06413vw #fff,-0.16238vw 0.09375vw #fff,-0.14363vw 0.12052vw #fff,-0.12052vw 0.14364vw #fff,-0.09375vw 0.16239vw #fff,-0.06412vw 0.17621vw #fff,-0.03255vw 0.18468vw #fff,0.00002vw 0.18756vw #fff } } @media screen and (max-width: 750px) { .w-border-text { top: 0; font-size: 3.06667vw; line-height: 1.52174; text-shadow: 0vw 0.48vw 1px #fff,0.08335vw 0.47271vw 1px #fff,0.16417vw 0.45105vw 1px #fff,0.24vw 0.41569vw 1px #fff,0.30854vw 0.3677vw 1px #fff,0.3677vw 0.30854vw 1px #fff,0.41569vw 0.24vw 1px #fff,0.45105vw 0.16417vw 1px #fff,0.47271vw 0.08335vw 1px #fff,0.48vw 0vw 1px #fff,0.47271vw -0.08335vw 1px #fff,0.45105vw -0.16417vw 1px #fff,0.41569vw -0.24vw 1px #fff,0.3677vw -0.30854vw 1px #fff,0.30854vw -0.3677vw 1px #fff,0.24vw -0.41569vw 1px #fff,0.16417vw -0.45105vw 1px #fff,0.08335vw -0.47271vw 1px #fff,0vw -0.48vw 1px #fff,-0.08335vw -0.47271vw 1px #fff,-0.16417vw -0.45105vw 1px #fff,-0.24vw -0.41569vw 1px #fff,-0.30854vw -0.3677vw 1px #fff,-0.3677vw -0.30854vw 1px #fff,-0.41569vw -0.24vw 1px #fff,-0.45105vw -0.16417vw 1px #fff,-0.47271vw -0.08335vw 1px #fff,-0.48vw 0.00838vw 1px #fff,-0.47271vw 0.08335vw 1px #fff,-0.45105vw 0.16417vw 1px #fff,-0.41569vw 0.24vw 1px #fff,-0.3677vw 0.30854vw 1px #fff,-0.30854vw 0.36771vw 1px #fff,-0.23999vw 0.41571vw 1px #fff,-0.16416vw 0.45109vw 1px #fff,-0.08333vw 0.47279vw 1px #fff,0.00004vw 0.48014vw 1px #fff,0vw 0.32vw 1px #fff,0.05557vw 0.31514vw 1px #fff,0.10945vw 0.3007vw 1px #fff,0.16vw 0.27713vw 1px #fff,0.20569vw 0.24513vw 1px #fff,0.24513vw 0.20569vw 1px #fff,0.27713vw 0.16vw 1px #fff,0.3007vw 0.10945vw 1px #fff,0.31514vw 0.05557vw 1px #fff,0.32vw 0vw 1px #fff,0.31514vw -0.05557vw 1px #fff,0.3007vw -0.10945vw 1px #fff,0.27713vw -0.16vw 1px #fff,0.24513vw -0.20569vw 1px #fff,0.20569vw -0.24513vw 1px #fff,0.16vw -0.27713vw 1px #fff,0.10945vw -0.3007vw 1px #fff,0.05557vw -0.31514vw 1px #fff,0vw -0.32vw 1px #fff,-0.05557vw -0.31514vw 1px #fff,-0.10945vw -0.3007vw 1px #fff,-0.16vw -0.27713vw 1px #fff,-0.20569vw -0.24513vw 1px #fff,-0.24513vw -0.20569vw 1px #fff,-0.27713vw -0.16vw 1px #fff,-0.3007vw -0.10945vw 1px #fff,-0.31514vw -0.05557vw 1px #fff,-0.32vw 0.00558vw 1px #fff,-0.31514vw 0.05557vw 1px #fff,-0.3007vw 0.10945vw 1px #fff,-0.27713vw 0.16vw 1px #fff,-0.24513vw 0.2057vw 1px #fff,-0.20569vw 0.24514vw 1px #fff,-0.16vw 0.27714vw 1px #fff,-0.10944vw 0.30073vw 1px #fff,-0.05555vw 0.31519vw 1px #fff,0.00003vw 0.3201vw 1px #fff } } @media screen and (min-width: 1401px) { .w-border-text.w-border-text_ { top: 0; line-height: 1.73913 } } @media screen and (min-width: 751px) and (max-width: 1400px) { .w-border-text.w-border-text_ { top: 0; line-height: 1.73913 } } @media screen and (max-width: 750px) { .w-border-text.w-border-text_ { top: 0; line-height: 1.52174 } } @media screen and (min-width: 1401px) { .w-border-text.w-border-text-big { top: 0; font-size: 25.15625px; line-height: 1.52174 } } @media screen and (min-width: 751px) and (max-width: 1400px) { .w-border-text.w-border-text-big { top: 0; font-size: 1.79687vw; line-height: 1.52174 } } @media screen and (max-width: 750px) { .w-border-text.w-border-text-big { top: 0; font-size: 3.06667vw; line-height: 1.73913 } } @media screen and (min-width: 1401px) { .w-border-text.w-border-text-big_ { top: 0; font-size: 25.15625px; line-height: 1.52174 } } @media screen and (min-width: 751px) and (max-width: 1400px) { .w-border-text.w-border-text-big_ { top: 0; font-size: 1.79687vw; line-height: 1.52174 } } @media screen and (max-width: 750px) { .w-border-text.w-border-text-big_ { top: 0; font-size: 4vw; line-height: 1.33333 } } .w-border-text .w-border-text-small { position: relative; top: 0; display: inline-block; font-family: 'Noto Sans JP',sans-serif; font-weight: 700 } @media screen and (min-width: 1401px) { .w-border-text .w-border-text-small { padding-top: 10.9375px; font-size: 15.3125px; line-height: 2.14286 } } @media screen and (min-width: 751px) and (max-width: 1400px) { .w-border-text .w-border-text-small { padding-top: 0.78125vw; font-size: 1.09375vw; line-height: 2.14286 } } @media screen and (max-width: 750px) { .w-border-text .w-border-text-small { padding-top: 2.26667vw; font-size: 2.53333vw } } .w-border-text .w-border-text-small_ { position: relative; top: 0; display: inline-block; font-family: 'Noto Sans JP',sans-serif; font-weight: 700 } @media screen and (min-width: 1401px) { .w-border-text .w-border-text-small_ { padding-top: 10.9375px; font-size: 21.875px; line-height: 1.5 } } @media screen and (min-width: 751px) and (max-width: 1400px) { .w-border-text .w-border-text-small_ { padding-top: 0.78125vw; font-size: 1.5625vw; line-height: 1.5 } } @media screen and (max-width: 750px) { .w-border-text .w-border-text-small_ { padding-top: 2.26667vw; font-size: 3.2vw; line-height: 1.45833 } } .t-a-l { left: 0; text-align: left } .clearfix:after { content: ''; display: block; clear: both } .container { max-width: 1200px; margin-right: auto; margin-left: auto } header h1 { font-weight: bold } .back-to-top { position: absolute; cursor: pointer; background-size: 100% 100% } @media screen and (min-width: 1401px) { .back-to-top { bottom: 63.4375px; left: 50%; width: 142.1875px; height: 187.03125px; margin-left: 557.8125px; background-image: url(../images/common/back-to-top.png) } .back-to-top:hover:after { opacity: 1 } } @media screen and (min-width: 751px) and (max-width: 1400px) { .back-to-top { bottom: 4.53125vw; left: 50%; width: 10.15625vw; height: 13.35938vw; margin-left: 39.84375vw; background-image: url(../images/common/back-to-top.png) } .back-to-top:hover:after { opacity: 1 } } .back-to-top:after { content: ""; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; opacity: 0; background-image: url(../images/common/back-to-top-on.png); background-size: 100% 100% } #globalFooter { position: relative; z-index: 1; max-width: 1400px; margin: 0 auto; background-color: #000 } #globalFooter .sub { position: relative; background-color: #000; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between } @media screen and (min-width: 1401px) { #globalFooter .sub { left: calc(-0.5 * (100vw - 1400px)); display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-pack: justify; -ms-flex-align: center; width: 100vw; height: 40px; padding: 0 32.8125px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #globalFooter .sub { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-pack: justify; -ms-flex-align: center; height: 40px; padding: 0 2.34375vw } } @media screen and (max-width: 750px) { #globalFooter .sub { width: 89.33333vw; margin-top: -1px; margin-right: auto; margin-left: auto; padding-top: 10px; padding-top: 4vw; padding-bottom: 4vw } } #globalFooter .sub .link { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; min-width: 320px } #globalFooter .sub .link li { margin-right: 14px; font-size: 12px; font-size: 1.2rem; font-weight: bold } @media screen and (max-width: 750px) { #globalFooter .sub .link li { height: 25px; line-height: 25px } } #globalFooter .sub .link li:last-of-type { margin-right: 0 } #globalFooter .sub .link li a { position: relative; display: block; padding-left: 17px; -webkit-transition-delay: 0s; transition-delay: 0s; -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); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: all; transition-property: all } @media screen and (min-width: 750px) { #globalFooter .sub .link li a:hover { color: #ffce00 } #globalFooter .sub .link li a:hover:before { border-color: transparent transparent transparent #ffce00 } } #globalFooter .sub .link li a:before { content: ''; position: absolute; top: 50%; left: 0; display: block; width: 13px; height: 11px; margin-top: -5px; border-width: 5px 0px 5px 7px; border-style: solid; border-color: transparent transparent transparent #fff } @media screen and (min-width: 1401px) { #globalFooter .sub .sns { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center } } @media screen and (min-width: 751px) and (max-width: 1400px) { #globalFooter .sub .sns { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center } } @media screen and (max-width: 750px) { #globalFooter .sub .sns { text-align: left } } @media screen and (min-width: 1401px) { #globalFooter .sub .sns li { margin-top: 5px; margin-left: 10px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #globalFooter .sub .sns li { margin-top: 5px; margin-left: 10px } } @media screen and (max-width: 750px) { #globalFooter .sub .sns li { display: inline-block; height: 35px; margin-top: 10px; margin-right: 8.5px; margin-left: 0; line-height: 25px } } #globalFooter .sub .sns li:first-of-type { margin-top: 0; margin-left: 0 } @media screen and (max-width: 750px) { #globalFooter .sub .sns li:first-of-type { width: 100%; height: 25px; line-height: 25px } } #globalFooter .sub .sns li.copyright { margin-right: 10px; font-family: 'Roboto',sans-serif; font-size: 12px; font-size: 1.2rem; color: #fff } @media screen and (min-width: 1401px) { #globalFooter .sub .sns li.copyright { min-width: 350px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #globalFooter .sub .sns li.copyright { min-width: 350px } } #globalFooter #main { position: relative; width: 100%; background-size: auto 100% } @media screen and (min-width: 1401px) { #globalFooter #main { height: 137.8125px } #globalFooter #main:before { content: ""; position: absolute; z-index: 0; left: 50%; width: 100vw; height: 137.8125px; margin-left: -50vw; pointer-events: none; background-color: #000; background-image: url(../images/common/footer-bg.jpg); background-repeat: repeat-x; background-position: 50% 100%; background-size: auto 137.8125px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #globalFooter #main { height: 9.84375vw } #globalFooter #main:before { content: ""; position: absolute; z-index: 0; left: 50%; width: 100vw; height: 9.84375vw; margin-left: -50vw; pointer-events: none; background-color: #000; background-image: url(../images/common/footer-bg.jpg); background-repeat: repeat-x; background-position: 50% 100%; background-size: auto 9.84375vw } } @media screen and (max-width: 750px) { #globalFooter #main { height: 96.8vw; padding-top: 4.26667vw; background-image: url(../images/common/footer-bg_sp.jpg) } } #globalFooter #main ul { position: relative; font-size: 0; text-align: center } #globalFooter #main ul li { position: relative; display: inline-block; cursor: pointer; background-size: 100% 100% } @media screen and (min-width: 1401px) { #globalFooter #main ul li { width: 218.75px; height: 103.90625px; margin: 16.40625px 2.1875px 0 } } @media screen and (min-width: 751px) and (max-width: 1400px) { #globalFooter #main ul li { width: 15.625vw; height: 7.42188vw; margin: 1.17188vw 0.15625vw 0 } } @media screen and (max-width: 750px) { #globalFooter #main ul li { width: 89.33333vw; height: 16vw; margin-bottom: 2.26667vw } } #globalFooter #main ul li:hover:after { opacity: 1 } #globalFooter #main ul li.active:after { opacity: 1 } #globalFooter #main ul li a { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100% } #globalFooter #main ul li:after { content: ""; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; pointer-events: none; opacity: 0; background-size: 100% 100% } @media screen and (min-width: 1401px) { #globalFooter #main ul li:nth-child(5) { margin-right: 21.875px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #globalFooter #main ul li:nth-child(5) { margin-right: 1.5625vw } } @media screen and (min-width: 1401px) { #globalFooter #main ul li:nth-child(1) { background-image: url(../images/common/footer-menu01.png) } #globalFooter #main ul li:nth-child(1):after { background-image: url(../images/common/footer-menu01_on.png) } } @media screen and (min-width: 751px) and (max-width: 1400px) { #globalFooter #main ul li:nth-child(1) { background-image: url(../images/common/footer-menu01.png) } #globalFooter #main ul li:nth-child(1):after { background-image: url(../images/common/footer-menu01_on.png) } } @media screen and (max-width: 750px) { #globalFooter #main ul li:nth-child(1) { background-image: url(../images/common/footer-menu01_sp.png) } #globalFooter #main ul li:nth-child(1):after { background-image: url(../images/common/footer-menu01_on_sp.png) } } @media screen and (min-width: 1401px) { #globalFooter #main ul li:nth-child(2) { background-image: url(../images/common/footer-menu02.png) } #globalFooter #main ul li:nth-child(2):after { background-image: url(../images/common/footer-menu02_on.png) } } @media screen and (min-width: 751px) and (max-width: 1400px) { #globalFooter #main ul li:nth-child(2) { background-image: url(../images/common/footer-menu02.png) } #globalFooter #main ul li:nth-child(2):after { background-image: url(../images/common/footer-menu02_on.png) } } @media screen and (max-width: 750px) { #globalFooter #main ul li:nth-child(2) { background-image: url(../images/common/footer-menu02_sp.png) } #globalFooter #main ul li:nth-child(2):after { background-image: url(../images/common/footer-menu02_on_sp.png) } } @media screen and (min-width: 1401px) { #globalFooter #main ul li:nth-child(3) { background-image: url(../images/common/footer-menu03.png) } #globalFooter #main ul li:nth-child(3):after { background-image: url(../images/common/footer-menu03_on.png) } } @media screen and (min-width: 751px) and (max-width: 1400px) { #globalFooter #main ul li:nth-child(3) { background-image: url(../images/common/footer-menu03.png) } #globalFooter #main ul li:nth-child(3):after { background-image: url(../images/common/footer-menu03_on.png) } } @media screen and (max-width: 750px) { #globalFooter #main ul li:nth-child(3) { background-image: url(../images/common/footer-menu03_sp.png) } #globalFooter #main ul li:nth-child(3):after { background-image: url(../images/common/footer-menu03_on_sp.png) } } @media screen and (min-width: 1401px) { #globalFooter #main ul li:nth-child(4) { background-image: url(../images/common/footer-menu04.png) } #globalFooter #main ul li:nth-child(4):after { background-image: url(../images/common/footer-menu04_on.png) } } @media screen and (min-width: 751px) and (max-width: 1400px) { #globalFooter #main ul li:nth-child(4) { background-image: url(../images/common/footer-menu04.png) } #globalFooter #main ul li:nth-child(4):after { background-image: url(../images/common/footer-menu04_on.png) } } @media screen and (max-width: 750px) { #globalFooter #main ul li:nth-child(4) { background-image: url(../images/common/footer-menu04_sp.png) } #globalFooter #main ul li:nth-child(4):after { background-image: url(../images/common/footer-menu04_on_sp.png) } } @media screen and (min-width: 1401px) { #globalFooter #main ul li:nth-child(5) { background-image: url(../images/common/footer-menu05.png) } #globalFooter #main ul li:nth-child(5):after { background-image: url(../images/common/footer-menu05_on.png) } } @media screen and (min-width: 751px) and (max-width: 1400px) { #globalFooter #main ul li:nth-child(5) { background-image: url(../images/common/footer-menu05.png) } #globalFooter #main ul li:nth-child(5):after { background-image: url(../images/common/footer-menu05_on.png) } } @media screen and (max-width: 750px) { #globalFooter #main ul li:nth-child(5) { background-image: url(../images/common/footer-menu05_sp.png) } #globalFooter #main ul li:nth-child(5):after { background-image: url(../images/common/footer-menu05_on_sp.png) } } .ncommon-purchase-v2.is-visible:not([data-ncp-mode=sp]), .ncommon-purchase-v2.is-visible:not([data-ncp-mode=pc]) { z-index: 10102 !important } /* Slider */ .slick-slider { position: relative; display: block; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent } .slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0 } .slick-list:focus { outline: none } .slick-list.dragging { cursor: pointer; cursor: hand } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } .slick-track { position: relative; top: 0; left: 0; display: block; margin-right: auto; margin-left: auto } .slick-track:before, .slick-track:after { content: ""; display: table } .slick-track:after { clear: both } .slick-loading .slick-track { visibility: hidden } .slick-slide { display: none; float: left; height: 100%; min-height: 1px } [dir="rtl"] .slick-slide { float: right } .slick-slide img { display: block } .slick-slide.slick-loading img { display: none } .slick-slide.dragging img { pointer-events: none } .slick-initialized .slick-slide { display: block } .slick-loading .slick-slide { visibility: hidden } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent } .slick-arrow.slick-hidden { display: none } /* Slider */ /* Icons */ @font-face { font-family: "slick"; font-weight: normal; font-style: normal } /* Arrows */ .slick-prev, .slick-next { position: absolute; top: 50%; display: block; width: 20px; height: 20px; padding: 0; font-size: 0px; line-height: 0px; cursor: pointer; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); color: transparent; border: none; outline: none; background: transparent } .slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus { color: transparent; outline: none; background: transparent } .slick-prev:hover:before, .slick-prev:focus:before, .slick-next:hover:before, .slick-next:focus:before { opacity: 1 } .slick-prev.slick-disabled:before, .slick-next.slick-disabled:before { opacity: 0.25 } .slick-prev:before, .slick-next:before { font-family: "slick"; font-size: 20px; line-height: 1; opacity: 0.75; color: white; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale } .slick-prev { left: -25px } [dir="rtl"] .slick-prev { right: -25px; left: auto } .slick-prev:before { content: "←" } [dir="rtl"] .slick-prev:before { content: "→" } .slick-next { right: -25px } [dir="rtl"] .slick-next { right: auto; left: -25px } .slick-next:before { content: "→" } [dir="rtl"] .slick-next:before { content: "←" } /* Dots */ .slick-dotted.slick-slider { margin-bottom: 30px } .slick-dots { position: absolute; bottom: -25px; display: block; width: 100%; margin: 0; padding: 0; list-style: none; text-align: center } .slick-dots li { position: relative; display: inline-block; width: 20px; height: 20px; margin: 0 5px; padding: 0; cursor: pointer } .slick-dots li button { display: block; width: 20px; height: 20px; padding: 5px; font-size: 0px; line-height: 0px; cursor: pointer; color: transparent; border: 0; outline: none; background: transparent } .slick-dots li button:hover, .slick-dots li button:focus { outline: none } .slick-dots li button:hover:before, .slick-dots li button:focus:before { opacity: 1 } .slick-dots li button:before { content: "•"; position: absolute; top: 0; left: 0; width: 20px; height: 20px; font-family: "slick"; font-size: 6px; line-height: 20px; text-align: center; opacity: 0.25; color: black; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale } .slick-dots li.slick-active button:before { opacity: 0.75; color: black } @-webkit-keyframes muku { 0% { -webkit-transform: scale(1); transform: scale(1) } 25% { -webkit-transform: scale(1.05); transform: scale(1.05) } 50% { -webkit-transform: scale(1); transform: scale(1) } 100% { -webkit-transform: scale(1); transform: scale(1) } } @keyframes muku { 0% { -webkit-transform: scale(1); transform: scale(1) } 25% { -webkit-transform: scale(1.05); transform: scale(1.05) } 50% { -webkit-transform: scale(1); transform: scale(1) } 100% { -webkit-transform: scale(1); transform: scale(1) } } @-webkit-keyframes sec-5-char { 0% { -webkit-transform: translateX(-100%); transform: translateX(-100%) } 3% { -webkit-transform: translateX(0%); transform: translateX(0%) } 15% { -webkit-transform: translateX(0%); transform: translateX(0%) } 45% { -webkit-transform: translateX(-100%); transform: translateX(-100%) } 100% { -webkit-transform: translateX(-100%); transform: translateX(-100%) } } @keyframes sec-5-char { 0% { -webkit-transform: translateX(-100%); transform: translateX(-100%) } 3% { -webkit-transform: translateX(0%); transform: translateX(0%) } 15% { -webkit-transform: translateX(0%); transform: translateX(0%) } 45% { -webkit-transform: translateX(-100%); transform: translateX(-100%) } 100% { -webkit-transform: translateX(-100%); transform: translateX(-100%) } } @-webkit-keyframes sec-3-char { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg) } 10% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg) } 18% { -webkit-transform: rotate(4deg); transform: rotate(4deg) } 24% { -webkit-transform: rotate(-3deg); transform: rotate(-3deg) } 28% { -webkit-transform: rotate(2deg); transform: rotate(2deg) } 30% { -webkit-transform: rotate(-1deg); transform: rotate(-1deg) } 31% { -webkit-transform: rotate(0deg); transform: rotate(0deg) } 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg) } } @keyframes sec-3-char { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg) } 10% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg) } 18% { -webkit-transform: rotate(4deg); transform: rotate(4deg) } 24% { -webkit-transform: rotate(-3deg); transform: rotate(-3deg) } 28% { -webkit-transform: rotate(2deg); transform: rotate(2deg) } 30% { -webkit-transform: rotate(-1deg); transform: rotate(-1deg) } 31% { -webkit-transform: rotate(0deg); transform: rotate(0deg) } 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg) } } @-webkit-keyframes gata-gata { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg) } 5% { -webkit-transform: rotate(-3deg); transform: rotate(-3deg) } 10% { -webkit-transform: rotate(3deg); transform: rotate(3deg) } 15% { -webkit-transform: rotate(0deg); transform: rotate(0deg) } 20% { -webkit-transform: rotate(3deg); transform: rotate(3deg) } 25% { -webkit-transform: rotate(0deg); transform: rotate(0deg) } 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg) } } @keyframes gata-gata { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg) } 5% { -webkit-transform: rotate(-3deg); transform: rotate(-3deg) } 10% { -webkit-transform: rotate(3deg); transform: rotate(3deg) } 15% { -webkit-transform: rotate(0deg); transform: rotate(0deg) } 20% { -webkit-transform: rotate(3deg); transform: rotate(3deg) } 25% { -webkit-transform: rotate(0deg); transform: rotate(0deg) } 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg) } } @-webkit-keyframes sec-2-char-1-fuki { 0% { -webkit-transform: scale(0); transform: scale(0) } 4% { -webkit-transform: scale(1.1); transform: scale(1.1) } 8% { -webkit-transform: scale(1); transform: scale(1) } 12% { -webkit-transform: scale(1.1); transform: scale(1.1) } 16% { -webkit-transform: scale(1); transform: scale(1) } 20% { -webkit-transform: scale(1); transform: scale(1) } 50% { -webkit-transform: scale(1); transform: scale(1) } 54% { -webkit-transform: scale(1.1); transform: scale(1.1) } 58% { -webkit-transform: scale(0); transform: scale(0) } 100% { -webkit-transform: scale(0); transform: scale(0) } } @keyframes sec-2-char-1-fuki { 0% { -webkit-transform: scale(0); transform: scale(0) } 4% { -webkit-transform: scale(1.1); transform: scale(1.1) } 8% { -webkit-transform: scale(1); transform: scale(1) } 12% { -webkit-transform: scale(1.1); transform: scale(1.1) } 16% { -webkit-transform: scale(1); transform: scale(1) } 20% { -webkit-transform: scale(1); transform: scale(1) } 50% { -webkit-transform: scale(1); transform: scale(1) } 54% { -webkit-transform: scale(1.1); transform: scale(1.1) } 58% { -webkit-transform: scale(0); transform: scale(0) } 100% { -webkit-transform: scale(0); transform: scale(0) } } @-webkit-keyframes sec-1-fuki { 0% { -webkit-transform: scale(0) rotate(-5deg); transform: scale(0) rotate(-5deg) } 5% { -webkit-transform: scale(1) rotate(-5deg); transform: scale(1) rotate(-5deg) } 10% { -webkit-transform: scale(1) rotate(5deg); transform: scale(1) rotate(5deg) } 15% { -webkit-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg) } 20% { -webkit-transform: scale(1) rotate(5deg); transform: scale(1) rotate(5deg) } 25% { -webkit-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg) } 50% { -webkit-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg) } 54% { -webkit-transform: scale(1.1); transform: scale(1.1) } 60% { -webkit-transform: scale(0); transform: scale(0) } 100% { -webkit-transform: scale(0); transform: scale(0) } } @keyframes sec-1-fuki { 0% { -webkit-transform: scale(0) rotate(-5deg); transform: scale(0) rotate(-5deg) } 5% { -webkit-transform: scale(1) rotate(-5deg); transform: scale(1) rotate(-5deg) } 10% { -webkit-transform: scale(1) rotate(5deg); transform: scale(1) rotate(5deg) } 15% { -webkit-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg) } 20% { -webkit-transform: scale(1) rotate(5deg); transform: scale(1) rotate(5deg) } 25% { -webkit-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg) } 50% { -webkit-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg) } 54% { -webkit-transform: scale(1.1); transform: scale(1.1) } 60% { -webkit-transform: scale(0); transform: scale(0) } 100% { -webkit-transform: scale(0); transform: scale(0) } } @-webkit-keyframes jump-a { 0% { -webkit-transform: translateY(0px); transform: translateY(0px); -webkit-animation-timing-function: cubic-bezier(0, 0.84, 0.16, 1); animation-timing-function: cubic-bezier(0, 0.84, 0.16, 1) } 10% { -webkit-transform: translateY(-8%); transform: translateY(-8%); -webkit-animation-timing-function: cubic-bezier(0.84, 0, 1, 0.16); animation-timing-function: cubic-bezier(0.84, 0, 1, 0.16) } 20% { -webkit-transform: translateY(0px); transform: translateY(0px); -webkit-animation-timing-function: cubic-bezier(0, 0.84, 0.16, 1); animation-timing-function: cubic-bezier(0, 0.84, 0.16, 1) } 30% { -webkit-transform: translateY(-8%); transform: translateY(-8%); -webkit-animation-timing-function: cubic-bezier(0.84, 0, 1, 0.16); animation-timing-function: cubic-bezier(0.84, 0, 1, 0.16) } 40% { -webkit-transform: translateY(0px) scale(1, 1); transform: translateY(0px) scale(1, 1) } 95% { -webkit-transform: translateY(0px) scale(1, 1); transform: translateY(0px) scale(1, 1) } 98% { -webkit-transform: translateY(0px) scale(1, 1); transform: translateY(0px) scale(1, 1) } 100% { -webkit-transform: translateY(0px) scale(1, 1); transform: translateY(0px) scale(1, 1) } } @keyframes jump-a { 0% { -webkit-transform: translateY(0px); transform: translateY(0px); -webkit-animation-timing-function: cubic-bezier(0, 0.84, 0.16, 1); animation-timing-function: cubic-bezier(0, 0.84, 0.16, 1) } 10% { -webkit-transform: translateY(-8%); transform: translateY(-8%); -webkit-animation-timing-function: cubic-bezier(0.84, 0, 1, 0.16); animation-timing-function: cubic-bezier(0.84, 0, 1, 0.16) } 20% { -webkit-transform: translateY(0px); transform: translateY(0px); -webkit-animation-timing-function: cubic-bezier(0, 0.84, 0.16, 1); animation-timing-function: cubic-bezier(0, 0.84, 0.16, 1) } 30% { -webkit-transform: translateY(-8%); transform: translateY(-8%); -webkit-animation-timing-function: cubic-bezier(0.84, 0, 1, 0.16); animation-timing-function: cubic-bezier(0.84, 0, 1, 0.16) } 40% { -webkit-transform: translateY(0px) scale(1, 1); transform: translateY(0px) scale(1, 1) } 95% { -webkit-transform: translateY(0px) scale(1, 1); transform: translateY(0px) scale(1, 1) } 98% { -webkit-transform: translateY(0px) scale(1, 1); transform: translateY(0px) scale(1, 1) } 100% { -webkit-transform: translateY(0px) scale(1, 1); transform: translateY(0px) scale(1, 1) } } @-webkit-keyframes on-parade-0 { 0% { -webkit-transform: translateX(0); transform: translateX(0) } 100% { -webkit-transform: translateX(-50%); transform: translateX(-50%) } } @keyframes on-parade-0 { 0% { -webkit-transform: translateX(0); transform: translateX(0) } 100% { -webkit-transform: translateX(-50%); transform: translateX(-50%) } } @-webkit-keyframes on-parade-1 { 0% { -webkit-transform: translateX(0); transform: translateX(0) } 100% { -webkit-transform: translateX(50%); transform: translateX(50%) } } @keyframes on-parade-1 { 0% { -webkit-transform: translateX(0); transform: translateX(0) } 100% { -webkit-transform: translateX(50%); transform: translateX(50%) } } @-webkit-keyframes try-cta-btn { 0% { -webkit-transform: translateX(-100%); transform: translateX(-100%); opacity: 0 } 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1 } } @keyframes try-cta-btn { 0% { -webkit-transform: translateX(-100%); transform: translateX(-100%); opacity: 0 } 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1 } } @-webkit-keyframes floating { 0% { -webkit-transform: translateY(-10px); transform: translateY(-10px) } 100% { -webkit-transform: translateY(10px); transform: translateY(10px) } } @keyframes floating { 0% { -webkit-transform: translateY(-10px); transform: translateY(-10px) } 100% { -webkit-transform: translateY(10px); transform: translateY(10px) } } @-webkit-keyframes floating_ { 0% { -webkit-transform: translateY(-5px); transform: translateY(-5px) } 100% { -webkit-transform: translateY(5px); transform: translateY(5px) } } @keyframes floating_ { 0% { -webkit-transform: translateY(-5px); transform: translateY(-5px) } 100% { -webkit-transform: translateY(5px); transform: translateY(5px) } } @-webkit-keyframes kv-wario-1 { 0% { -webkit-transform: scale(0); transform: scale(0); opacity: 0 } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1 } } @keyframes kv-wario-1 { 0% { -webkit-transform: scale(0); transform: scale(0); opacity: 0 } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1 } } @-webkit-keyframes kv-wario { 0% { -webkit-transform: translateY(30%) scale(0.2); transform: translateY(30%) scale(0.2); -webkit-animation-timing-function: cubic-bezier(0.12, 0.92, 0.32, 1.2); animation-timing-function: cubic-bezier(0.12, 0.92, 0.32, 1.2); opacity: 0 } 100% { -webkit-transform: translateY(0%) scale(1); transform: translateY(0%) scale(1); opacity: 1 } } @keyframes kv-wario { 0% { -webkit-transform: translateY(30%) scale(0.2); transform: translateY(30%) scale(0.2); -webkit-animation-timing-function: cubic-bezier(0.12, 0.92, 0.32, 1.2); animation-timing-function: cubic-bezier(0.12, 0.92, 0.32, 1.2); opacity: 0 } 100% { -webkit-transform: translateY(0%) scale(1); transform: translateY(0%) scale(1); opacity: 1 } } @-webkit-keyframes kv-wario-ani-0 { 0% { opacity: 1 } 49% { -webkit-transform: rotate(0deg); transform: rotate(0deg); opacity: 1 } 51% { -webkit-transform: rotate(2deg); transform: rotate(2deg); opacity: 1 } 53% { -webkit-transform: rotate(-2deg); transform: rotate(-2deg); opacity: 1 } 55% { -webkit-transform: rotate(0deg); transform: rotate(0deg); opacity: 1 } 55.1% { opacity: 0 } 100% { opacity: 0 } } @keyframes kv-wario-ani-0 { 0% { opacity: 1 } 49% { -webkit-transform: rotate(0deg); transform: rotate(0deg); opacity: 1 } 51% { -webkit-transform: rotate(2deg); transform: rotate(2deg); opacity: 1 } 53% { -webkit-transform: rotate(-2deg); transform: rotate(-2deg); opacity: 1 } 55% { -webkit-transform: rotate(0deg); transform: rotate(0deg); opacity: 1 } 55.1% { opacity: 0 } 100% { opacity: 0 } } @-webkit-keyframes kv-wario-ani-1 { 0% { opacity: 0 } 55% { opacity: 0 } 55.1% { opacity: 1 } 100% { opacity: 1 } } @keyframes kv-wario-ani-1 { 0% { opacity: 0 } 55% { opacity: 0 } 55.1% { opacity: 1 } 100% { opacity: 1 } } @-webkit-keyframes kv-wario-loop { 0% { opacity: 0 } 95% { opacity: 0 } 95.1% { opacity: 1 } 100% { opacity: 1 } } @keyframes kv-wario-loop { 0% { opacity: 0 } 95% { opacity: 0 } 95.1% { opacity: 1 } 100% { opacity: 1 } } @-webkit-keyframes kv-wario-loop-in-a { 0% { opacity: 1 } 50% { opacity: 1 } 50.1% { opacity: 0 } 100% { opacity: 0 } } @keyframes kv-wario-loop-in-a { 0% { opacity: 1 } 50% { opacity: 1 } 50.1% { opacity: 0 } 100% { opacity: 0 } } @-webkit-keyframes kv-wario-loop-in-b { 0% { opacity: 0 } 50% { opacity: 0 } 50.1% { opacity: 1 } 100% { opacity: 1 } } @keyframes kv-wario-loop-in-b { 0% { opacity: 0 } 50% { opacity: 0 } 50.1% { opacity: 1 } 100% { opacity: 1 } } @-webkit-keyframes kv-w { 0% { -webkit-transform: scale(1); transform: scale(1) } 30% { -webkit-transform: scale(1); transform: scale(1) } 100% { -webkit-transform: scale(1); transform: scale(1) } 47.5% { -webkit-transform: scale(1.05); transform: scale(1.05) } 65% { -webkit-transform: scale(1); transform: scale(1) } 82.5% { -webkit-transform: scale(1.05); transform: scale(1.05) } } @keyframes kv-w { 0% { -webkit-transform: scale(1); transform: scale(1) } 30% { -webkit-transform: scale(1); transform: scale(1) } 100% { -webkit-transform: scale(1); transform: scale(1) } 47.5% { -webkit-transform: scale(1.05); transform: scale(1.05) } 65% { -webkit-transform: scale(1); transform: scale(1) } 82.5% { -webkit-transform: scale(1.05); transform: scale(1.05) } } @-webkit-keyframes kv-line { 0% { opacity: 0.8 } 30% { opacity: 0.8 } 100% { opacity: 0.8 } 47.5% { opacity: 1 } 65% { opacity: 0.8 } 82.5% { opacity: 1 } } @keyframes kv-line { 0% { opacity: 0.8 } 30% { opacity: 0.8 } 100% { opacity: 0.8 } 47.5% { opacity: 1 } 65% { opacity: 0.8 } 82.5% { opacity: 1 } } .try-cta-icon { position: absolute; z-index: 10102; cursor: pointer; -webkit-animation-name: jump-a; animation-name: jump-a; -webkit-animation-duration: 3s; animation-duration: 3s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; background-size: 100% 100% } @media screen and (min-width: 1401px) { .try-cta-icon { top: -109.375px; left: 0px; width: 80.9375px } } @media screen and (min-width: 751px) and (max-width: 1400px) { .try-cta-icon { top: -7.8125vw; left: 0vw; width: 5.78125vw } } @media screen and (max-width: 750px) { .try-cta-icon { top: -14.8vw; left: 0; width: 12vw } } .try-cta-btn { position: absolute; z-index: 10101; cursor: pointer; background-size: 100% 100% } @media screen and (min-width: 1401px) { .try-cta-btn { top: 370.78125px; left: 0; width: 86.40625px } .try-cta-btn:hover .pc.full-x:after { opacity: 1 } } @media screen and (min-width: 751px) and (max-width: 1400px) { .try-cta-btn { top: 26.48438vw; left: 0; width: 6.17188vw } .try-cta-btn:hover .pc.full-x:after { opacity: 1 } } @media screen and (max-width: 750px) { .try-cta-btn { top: 110.53333vw; left: 0; width: 13.46667vw } } @media screen and (min-width: 1401px) { .try-cta-btn .pc.full-x { height: 316.09375px } } @media screen and (min-width: 751px) and (max-width: 1400px) { .try-cta-btn .pc.full-x { height: 22.57812vw } } .try-cta-btn .pc.full-x:before { content: ""; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; background-size: 100% 100% } @media screen and (min-width: 1401px) { .try-cta-btn .pc.full-x:before { background-image: url(../images/top/try-cta-btn-off.png) } } @media screen and (min-width: 751px) and (max-width: 1400px) { .try-cta-btn .pc.full-x:before { background-image: url(../images/top/try-cta-btn-off.png) } } .try-cta-btn .pc.full-x:after { content: ""; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; opacity: 0; background-size: 100% 100% } @media screen and (min-width: 1401px) { .try-cta-btn .pc.full-x:after { background-image: url(../images/top/try-cta-btn-on.png) } } @media screen and (min-width: 751px) and (max-width: 1400px) { .try-cta-btn .pc.full-x:after { background-image: url(../images/top/try-cta-btn-on.png) } } #page-top.ani-ready .w-filter { -webkit-transition: 0.5s 0.5s; transition: 0.5s 0.5s; opacity: 0 } #page-top.ani-ready .kv-wario { -webkit-animation-name: kv-wario; animation-name: kv-wario; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-delay: 1s; animation-delay: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both } #page-top.ani-ready .kv-wario-ani-0 { -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-animation-name: kv-wario-ani-0; animation-name: kv-wario-ani-0; -webkit-animation-duration: 1.8s; animation-duration: 1.8s; -webkit-animation-delay: 1s; animation-delay: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both } #page-top.ani-ready .kv-wario-ani-1 { -webkit-animation-name: kv-wario-ani-1; animation-name: kv-wario-ani-1; -webkit-animation-duration: 1.8s; animation-duration: 1.8s; -webkit-animation-delay: 1s; animation-delay: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both } #page-top.ani-ready .kv-wario-loop { -webkit-animation-name: kv-wario-loop; animation-name: kv-wario-loop; -webkit-animation-duration: 1.8s; animation-duration: 1.8s; -webkit-animation-delay: 3s; animation-delay: 3s; -webkit-animation-fill-mode: both; animation-fill-mode: both } #page-top.ani-ready .kv-wario-loop-in img:nth-child(2) { -webkit-animation-name: kv-wario-loop-in-b; animation-name: kv-wario-loop-in-b; -webkit-animation-duration: 1.8s; animation-duration: 1.8s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-fill-mode: both; animation-fill-mode: both } #page-top.ani-ready .kv-wario-1 { -webkit-animation-name: kv-wario-1; animation-name: kv-wario-1; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); -webkit-animation-delay: 2.1s; animation-delay: 2.1s; -webkit-animation-fill-mode: both; animation-fill-mode: both } #page-top.ani-ready .kv-wario-2 { -webkit-animation-name: kv-wario-1; animation-name: kv-wario-1; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); -webkit-animation-delay: 2.2s; animation-delay: 2.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both } #page-top.ani-ready .kv-w-1 { -webkit-animation-name: kv-wario-1; animation-name: kv-wario-1; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); -webkit-animation-delay: 2.3s; animation-delay: 2.3s; -webkit-animation-fill-mode: both; animation-fill-mode: both } #page-top.ani-ready .kv-w-1 .full { -webkit-animation-name: kv-w; animation-name: kv-w; -webkit-animation-duration: 2s; animation-duration: 2s; -webkit-animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); -webkit-animation-delay: 3s; animation-delay: 3s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite } #page-top.ani-ready .kv-w-2 { -webkit-animation-name: kv-wario-1; animation-name: kv-wario-1; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); -webkit-animation-delay: 2.4s; animation-delay: 2.4s; -webkit-animation-fill-mode: both; animation-fill-mode: both } #page-top.ani-ready .kv-w-2 .full { -webkit-animation-name: kv-w; animation-name: kv-w; -webkit-animation-duration: 2s; animation-duration: 2s; -webkit-animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); -webkit-animation-delay: 3.1s; animation-delay: 3.1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite } #page-top.ani-ready .sec-1-movie-btn { -webkit-animation-name: kv-wario-1; animation-name: kv-wario-1; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); -webkit-animation-delay: 2.5s; animation-delay: 2.5s; -webkit-animation-fill-mode: both; animation-fill-mode: both } #page-top.ani-ready .sec-1-movie-btn .full { -webkit-animation-name: floating; animation-name: floating; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); -webkit-animation-delay: 3.1s; animation-delay: 3.1s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-fill-mode: both; animation-fill-mode: both } #page-top.ani-ready .banner-0908 { -webkit-animation-name: kv-wario-1; animation-name: kv-wario-1; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); -webkit-animation-delay: 2.5s; animation-delay: 2.5s; -webkit-animation-fill-mode: both; animation-fill-mode: both } #page-top.ani-ready .banner-0908 .full { -webkit-animation-name: floating; animation-name: floating; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); -webkit-animation-delay: 3.3s; animation-delay: 3.3s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-fill-mode: both; animation-fill-mode: both } #page-top.ani-ready .kv-line { -webkit-transition: opacity 0.3s 2s; transition: opacity 0.3s 2s; opacity: 1 } #page-top.ani-ready .kv-line .full { -webkit-animation-name: kv-line; animation-name: kv-line; -webkit-animation-duration: 2s; animation-duration: 2s; -webkit-animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); -webkit-animation-delay: 3s; animation-delay: 3s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite } #page-top.ani-ready .try-cta-btn { -webkit-animation-name: try-cta-btn; animation-name: try-cta-btn; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); -webkit-animation-delay: 2.5s; animation-delay: 2.5s; -webkit-animation-fill-mode: both; animation-fill-mode: both } #page-top.ani-end #sec-1 { opacity: 1 } #page-top section { position: relative } #page-top .wrapper { position: relative; z-index: 10101; top: 0; left: 0; width: 100%; max-width: 1400px; height: auto; margin-right: auto; margin-left: auto } #page-top .wrapper.header-content-show { z-index: 1 } #page-top .w-filter { left: 50%; width: 100vw; margin-left: -50vw; pointer-events: none; background-color: #fff } @media screen and (min-width: 1401px) { #page-top #sec-kv { height: 1529.0625px } #page-top #sec-kv:before { content: ""; position: absolute; z-index: 0; top: 0; left: 50%; width: 100vw; height: 1197.65625px; margin-left: -50vw; pointer-events: none; background-image: url(../images/top/kv-bg-up.jpg?imbypass=true); background-size: cover } #page-top #sec-kv:after { content: ""; position: absolute; z-index: 0; bottom: 1px; left: 50%; width: 100vw; height: 342.34375px; margin-left: -50vw; pointer-events: none; background-image: url(../images/top/kv-bg-pattern-dn-0.png?imbypass=true); background-repeat: repeat-x; background-position: 50% 0%; background-size: auto 342.34375px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-top #sec-kv { height: 109.21875vw } #page-top #sec-kv:before { content: ""; position: absolute; z-index: 0; top: 0; left: 50%; width: 100vw; height: 85.54688vw; margin-left: -50vw; pointer-events: none; background-image: url(../images/top/kv-bg-up.jpg?imbypass=true); background-size: cover } #page-top #sec-kv:after { content: ""; position: absolute; z-index: 0; bottom: 1px; left: 50%; width: 100vw; height: 24.45312vw; margin-left: -50vw; pointer-events: none; background-image: url(../images/top/kv-bg-pattern-dn-0.png?imbypass=true); background-repeat: repeat-x; background-position: 50% 0%; background-size: auto 24.45312vw } } @media screen and (max-width: 750px) { #page-top #sec-kv { height: 344.66667vw; background-image: url(../images/top/kv-bg_sp.jpg?20210830); background-size: 100vw auto } } #page-top #sec-kv > .full { z-index: 1 } #page-top .kv-wario-loop { opacity: 0 } #page-top .kv-wario-loop img:nth-child(2) { opacity: 0 } #page-top .kv-wario-loop { position: absolute; top: 0; left: 0; width: 100%; height: 200% } #page-top .kv-wario { position: absolute; z-index: 1; overflow: hidden } @media screen and (min-width: 1401px) { #page-top .kv-wario { top: -75.46875px; right: 0; left: 0; width: 818.125px; height: 797.34375px; margin: auto } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-top .kv-wario { top: -5.39062vw; right: 0; left: 0; width: 58.4375vw; height: 56.95313vw; margin: auto } } @media screen and (max-width: 750px) { #page-top .kv-wario { top: 21.86667vw; left: 50%; width: 117.86667vw; height: 116.66667vw; margin: 0 0 0 -58.93333vw } } #page-top .kv-wario > img:nth-child(1) { opacity: 1 } #page-top .kv-wario > img:nth-child(2) { opacity: 0 } #page-top .kv-wario img { position: absolute; top: 0; left: 0; width: 100% } #page-top .kv-line { position: absolute; z-index: 1; top: 0; left: 0; width: 100vw; pointer-events: none } @media screen and (min-width: 1401px) { #page-top .kv-line { left: 50%; height: 1021.5625px; margin-left: -50vw } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-top .kv-line { left: 50%; height: 72.96875vw; margin-left: -50vw } } @media screen and (max-width: 750px) { #page-top .kv-line { height: 186.8vw } } @media screen and (min-width: 1401px) { #page-top .kv-line .full { background-image: url(../images/top/kv-line.png); background-size: 100% 100% } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-top .kv-line .full { background-image: url(../images/top/kv-line.png); background-size: 100% 100% } } @media screen and (max-width: 750px) { #page-top .kv-line .full { background-image: url(../images/top/kv-line_sp.png); background-size: cover } } #page-top .kv-wario-1 { position: absolute; z-index: 1; background-size: cover } @media screen and (min-width: 1401px) { #page-top .kv-wario-1 { top: -38.28125px; left: 21.875px; width: 546.875px; height: 776.5625px; background-image: url(../images/top/kv-wario-1.png) } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-top .kv-wario-1 { top: -2.73438vw; left: 1.5625vw; width: 39.0625vw; height: 55.46875vw; background-image: url(../images/top/kv-wario-1.png) } } @media screen and (max-width: 750px) { #page-top .kv-wario-1 { top: 3.2vw; left: 0vw; width: 100vw; height: 148.53333vw; background-image: url(../images/top/kv-wario-1_sp.png) } } #page-top .kv-wario-2 { position: absolute; z-index: 1; background-size: cover } @media screen and (min-width: 1401px) { #page-top .kv-wario-2 { top: -30.625px; left: 774.375px; width: 613.59375px; height: 780.9375px; background-image: url(../images/top/kv-wario-2.png) } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-top .kv-wario-2 { top: -2.1875vw; left: 55.3125vw; width: 43.82812vw; height: 55.78125vw; background-image: url(../images/top/kv-wario-2.png) } } #page-top .kv-w-1 { position: absolute; z-index: 1 } @media screen and (min-width: 1401px) { #page-top .kv-w-1 { top: 417.8125px; left: 442.96875px; width: 508.59375px; height: 227.5px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-top .kv-w-1 { top: 29.84375vw; left: 31.64062vw; width: 36.32812vw; height: 16.25vw } } @media screen and (max-width: 750px) { #page-top .kv-w-1 { top: 97.33333vw; left: 14.26667vw; width: 71.73333vw; height: 32.26667vw } } #page-top .kv-w-1 .full { background-image: url(../images/top/kv-w-1.png); background-size: 100% 100% } #page-top .kv-w-2 { position: absolute; z-index: 1 } @media screen and (min-width: 1401px) { #page-top .kv-w-2 { top: 642.03125px; left: 517.34375px; width: 365.3125px; height: 70px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-top .kv-w-2 { top: 45.85938vw; left: 36.95312vw; width: 26.09375vw; height: 5vw } } @media screen and (max-width: 750px) { #page-top .kv-w-2 { top: 130.8vw; left: 21.06667vw; width: 57.86667vw; height: 11.2vw } } #page-top .kv-w-2 .full { background-image: url(../images/top/kv-w-2.png); background-size: 100% 100% } #page-top #sec-1 { z-index: 1; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; opacity: 0 } @media screen and (min-width: 1401px) { #page-top #sec-1 { height: 798.4375px; margin-top: -798.4375px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-top #sec-1 { height: 57.03125vw; margin-top: -57.03125vw } } @media screen and (max-width: 750px) { #page-top #sec-1 { height: 182.13333vw; margin-top: -182.13333vw } } #page-top .label-banner-0908 { position: absolute; z-index: 1 } @media screen and (min-width: 1401px) { #page-top .label-banner-0908 { top: -38.28125px; left: 169.53125px; width: 87.5px; height: 87.5px; -webkit-animation-name: muku; animation-name: muku; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); -webkit-animation-delay: 3.2s; animation-delay: 3.2s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-fill-mode: both; animation-fill-mode: both } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-top .label-banner-0908 { top: -2.73438vw; left: 12.10938vw; width: 6.25vw; height: 6.25vw; -webkit-animation-name: muku; animation-name: muku; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); -webkit-animation-delay: 3.2s; animation-delay: 3.2s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-fill-mode: both; animation-fill-mode: both } } @media screen and (max-width: 750px) { #page-top .label-banner-0908 { top: -8.66667vw; left: 75.2vw; width: 17.73333vw; height: 17.73333vw } } #page-top .banner-0908 { position: absolute } @media screen and (min-width: 1401px) { #page-top .banner-0908 { top: -61.25px; left: 1132.03125px; width: 222.03125px; height: 185.9375px } #page-top .banner-0908:hover .full:after { opacity: 0 } #page-top .banner-0908:hover p { color: #fcc021 } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-top .banner-0908 { top: -4.375vw; left: 80.85938vw; width: 15.85938vw; height: 13.28125vw } #page-top .banner-0908:hover .full:after { opacity: 0 } #page-top .banner-0908:hover p { color: #fcc021 } } @media screen and (max-width: 750px) { #page-top .banner-0908 { top: 72.13333vw; left: 5.33333vw; width: 89.33333vw; height: 24vw } #page-top .banner-0908:before { content: ""; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; background-image: url(../images/top/banner-0908_sp.png); background-size: 100% 100% } } @media screen and (min-width: 1401px) { #page-top .banner-0908 .full:before { content: ""; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; background-image: url(../images/top/banner-0908-on.png); background-size: 100% 100% } #page-top .banner-0908 .full:after { content: ""; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; background-image: url(../images/top/banner-0908.png); background-size: 100% 100% } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-top .banner-0908 .full:before { content: ""; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; background-image: url(../images/top/banner-0908-on.png); background-size: 100% 100% } #page-top .banner-0908 .full:after { content: ""; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; background-image: url(../images/top/banner-0908.png); background-size: 100% 100% } } #page-top .banner-0908 img { position: absolute; width: 100% } #page-top .banner-0908 p { position: absolute; z-index: 1; font-family: 'Noto Sans JP',sans-serif; font-weight: bold; text-align: center; color: #fff } @media screen and (min-width: 1401px) { #page-top .banner-0908 p { top: 122.5px; left: 0px; width: 100%; height: 55.78125px; padding-top: 5.46875px; font-size: 15.3125px; line-height: 1.35714 } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-top .banner-0908 p { top: 8.75vw; left: 0vw; width: 100%; height: 3.98437vw; padding-top: 0.39062vw; font-size: 1.09375vw; line-height: 1.35714 } } #page-top .sec-1-movie-btn { position: absolute; display: block; cursor: pointer } @media screen and (min-width: 1401px) { #page-top .sec-1-movie-btn { top: -61.25px; left: 881.5625px; width: 250.46875px; height: 171.71875px } #page-top .sec-1-movie-btn:hover .sec-1-movie-name p { color: #fff } #page-top .sec-1-movie-btn:hover .sec-1-movie-name:before { opacity: 0 } #page-top .sec-1-movie-btn:hover .sec-1-movie-name:after { opacity: 1 } #page-top .sec-1-movie-btn:hover .full:before { opacity: 1 } #page-top .sec-1-movie-btn:hover .full:after { opacity: 0 } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-top .sec-1-movie-btn { top: -4.375vw; left: 62.96875vw; width: 17.89062vw; height: 12.26562vw } #page-top .sec-1-movie-btn:hover .sec-1-movie-name p { color: #fff } #page-top .sec-1-movie-btn:hover .sec-1-movie-name:before { opacity: 0 } #page-top .sec-1-movie-btn:hover .sec-1-movie-name:after { opacity: 1 } #page-top .sec-1-movie-btn:hover .full:before { opacity: 1 } #page-top .sec-1-movie-btn:hover .full:after { opacity: 0 } } @media screen and (max-width: 750px) { #page-top .sec-1-movie-btn { top: 17.86667vw; left: 5.33333vw; width: 89.33333vw; height: 51.2vw; border-radius: 1.06667vw; background-color: #fff } #page-top .sec-1-movie-btn:before { content: ""; position: absolute; top: 1.06667vw; left: 1.06667vw; display: block; width: 87.2vw; height: 49.06667vw; border-radius: 1.06667vw; background-image: url(../images/top/sec-1-movie-btn_sp.png?2021908); background-size: 100% 100% } } #page-top .sec-1-movie-btn .full:before { content: ""; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100% } @media screen and (min-width: 1401px) { #page-top .sec-1-movie-btn .full:before { background-image: url(../images/top/sec-1-movie-btn-on.png?20210908); background-size: cover } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-top .sec-1-movie-btn .full:before { background-image: url(../images/top/sec-1-movie-btn-on.png?20210908); background-size: cover } } #page-top .sec-1-movie-btn .full:after { content: ""; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; opacity: 1 } @media screen and (min-width: 1401px) { #page-top .sec-1-movie-btn .full:after { background-image: url(../images/top/sec-1-movie-btn-off.png?202108230); background-size: cover } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-top .sec-1-movie-btn .full:after { background-image: url(../images/top/sec-1-movie-btn-off.png?202108230); background-size: cover } } #page-top .sec-1-movie-label { position: absolute; z-index: 1; background-image: url(../images/top/sec-1-movie-label.png); background-size: cover } @media screen and (min-width: 1401px) { #page-top .sec-1-movie-label { top: -14.21875px; left: 192.5px; width: 84.21875px; height: 84.21875px; -webkit-animation-name: muku; animation-name: muku; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); -webkit-animation-delay: 3.2s; animation-delay: 3.2s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-fill-mode: both; animation-fill-mode: both } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-top .sec-1-movie-label { top: -1.01562vw; left: 13.75vw; width: 6.01562vw; height: 6.01562vw; -webkit-animation-name: muku; animation-name: muku; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); -webkit-animation-delay: 3.2s; animation-delay: 3.2s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-fill-mode: both; animation-fill-mode: both } } @media screen and (max-width: 750px) { #page-top .sec-1-movie-label { top: -7.06667vw; left: 77.2vw; width: 17.73333vw; height: 17.73333vw } } #page-top .sec-1-movie-name { position: absolute; z-index: 1; -webkit-box-sizing: border-box; box-sizing: border-box } @media screen and (min-width: 1401px) { #page-top .sec-1-movie-name { top: 161.875px; left: 31.71875px; width: 190.3125px; height: 67.8125px; padding-top: 28.4375px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-top .sec-1-movie-name { top: 11.5625vw; left: 2.26562vw; width: 13.59375vw; height: 4.84375vw; padding-top: 2.03125vw } } @media screen and (max-width: 750px) { #page-top .sec-1-movie-name { top: 54.4vw; width: 89.33333vw; height: 12vw; font-size: 3.73333vw; line-height: 12vw; border-radius: 100px; background-color: #ffd131 } } #page-top .sec-1-movie-name p { position: relative; z-index: 1; font-family: 'Noto Sans JP',sans-serif; font-weight: bold; text-align: center; color: #000 } @media screen and (min-width: 1401px) { #page-top .sec-1-movie-name p { font-size: 19.6875px; line-height: 1 } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-top .sec-1-movie-name p { font-size: 1.40625vw; line-height: 1 } } @media screen and (max-width: 750px) { #page-top .sec-1-movie-name p { font-size: 3.73333vw; line-height: 12vw } } #page-top .sec-1-movie-name:before { content: ""; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; background-size: 100% 100% } @media screen and (min-width: 1401px) { #page-top .sec-1-movie-name:before { background-image: url(../images/top/sec-1-movie-name-off.png); background-size: cover } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-top .sec-1-movie-name:before { background-image: url(../images/top/sec-1-movie-name-off.png); background-size: cover } } #page-top .sec-1-movie-name:after { content: ""; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; opacity: 0; background-size: 100% 100% } @media screen and (min-width: 1401px) { #page-top .sec-1-movie-name:after { background-image: url(../images/top/sec-1-movie-name-on.png); background-size: cover } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-top .sec-1-movie-name:after { background-image: url(../images/top/sec-1-movie-name-on.png); background-size: cover } } #page-top .sec-1-ttl { position: absolute; background-size: cover } @media screen and (min-width: 1401px) { #page-top .sec-1-ttl { top: 99.53125px; left: 138.90625px; width: 655.15625px; height: 76.5625px; background-image: url(../images/top/sec-1-ttl.png) } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-top .sec-1-ttl { top: 7.10938vw; left: 9.92188vw; width: 46.79688vw; height: 5.46875vw; background-image: url(../images/top/sec-1-ttl.png) } } @media screen and (max-width: 750px) { #page-top .sec-1-ttl { top: 104.13333vw; left: 5.46667vw; width: 74.13333vw; height: 8.53333vw; background-image: url(../images/top/sec-1-ttl_sp.png) } } #page-top .kv-star { position: absolute; z-index: 0; background-image: url(../images/top/kv-star.png) } @media screen and (min-width: 1401px) { #page-top .kv-star { top: 203.4375px; left: 1102.5px; width: 388.28125px; height: 370.78125px; background-size: 100% 100% } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-top .kv-star { top: 14.53125vw; left: 78.75vw; width: 27.73438vw; height: 26.48438vw; background-size: 100% 100% } } #page-top .sec-1-char { position: absolute; z-index: 1; background-image: url(../images/top/sec-1-char.png) } @media screen and (min-width: 1401px) { #page-top .sec-1-char { top: 342.34375px; left: 906.71875px; width: 463.75px; height: 527.1875px; background-size: 100% 100% } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-top .sec-1-char { top: 24.45312vw; left: 64.76562vw; width: 33.125vw; height: 37.65625vw; background-size: 100% 100% } } @media screen and (max-width: 750px) { #page-top .sec-1-char { top: 134.66667vw; left: 72vw; width: 41.06667vw; height: 46.66667vw; background-size: auto 100% } } #page-top .sec-1-char.aos-animate ~ .sec-1-fuki { -webkit-animation-name: sec-1-fuki; animation-name: sec-1-fuki; -webkit-animation-duration: 5s; animation-duration: 5s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-fill-mode: both; animation-fill-mode: both } #page-top .sec-1-fuki { position: absolute; -webkit-transform: scale(0); transform: scale(0); background-size: cover } @media screen and (min-width: 1401px) { #page-top .sec-1-fuki { top: 197.96875px; left: 926.40625px; width: 397.03125px; height: 204.53125px; -webkit-transform-origin: 25% 86%; transform-origin: 25% 86%; background-image: url(../images/top/sec-1-fuki.png) } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-top .sec-1-fuki { top: 14.14063vw; left: 66.17188vw; width: 28.35937vw; height: 14.60938vw; -webkit-transform-origin: 25% 86%; transform-origin: 25% 86%; background-image: url(../images/top/sec-1-fuki.png) } } @media screen and (max-width: 750px) { #page-top .sec-1-fuki { z-index: 1; top: 165.73333vw; left: 50vw; width: 42vw; height: 24.4vw; -webkit-transform-origin: 75% 9.84%; transform-origin: 75% 9.84%; background-image: url(../images/top/sec-1-fuki_sp.png) } } #page-top .sec-1-movie { position: absolute; background-color: #000; background-size: cover } @media screen and (min-width: 1401px) { #page-top .sec-1-movie { top: 197.96875px; left: -10.9375px; width: 913.82812px; height: 519.53125px; border-radius: 10.9375px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-top .sec-1-movie { top: 14.14063vw; left: -0.78125vw; width: 65.27344vw; height: 37.10938vw; border-radius: 0.78125vw } } @media screen and (max-width: 750px) { #page-top .sec-1-movie { top: 116.66667vw; left: 0vw; width: 94.4vw; height: 54.66667vw; border-radius: 0 1.33333vw 1.33333vw 0 } } #page-top .sec-1-movie video { position: absolute } @media screen and (min-width: 1401px) { #page-top .sec-1-movie video { top: 8.20312px; left: 8.20312px; width: 896.875px; height: 503.125px; border-radius: 8.75px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-top .sec-1-movie video { top: 0.58594vw; left: 0.58594vw; width: 64.0625vw; height: 35.9375vw; border-radius: 0.625vw } } @media screen and (max-width: 750px) { #page-top .sec-1-movie video { top: 1vw; left: 0vw; width: 93.46667vw; height: 52.53333vw } } #page-top .sec-1-sound { position: absolute; cursor: pointer; border-radius: 100%; background-image: url(../images/top/sec-1-sound-off.png); background-size: 100% 100%; -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2) } @media screen and (min-width: 1401px) { #page-top .sec-1-sound { top: 409.0625px; left: 794.0625px; width: 80.9375px; height: 80.9375px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-top .sec-1-sound { top: 29.21875vw; left: 56.71875vw; width: 5.78125vw; height: 5.78125vw } } @media screen and (max-width: 750px) { #page-top .sec-1-sound { top: -4.8vw; left: 83.06667vw; width: 14.66667vw; height: 14.66667vw } } #page-top .sec-1-sound.unmuted:after { opacity: 1 } #page-top .sec-1-sound:after { content: ""; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; opacity: 0; background-image: url(../images/top/sec-1-sound-on.png); background-size: 100% 100% } #page-top .sec-1-ttl-movie_sp { position: absolute; cursor: pointer; background-size: 100% 100% } @media screen and (max-width: 750px) { #page-top .sec-1-ttl-movie_sp { top: 5.86667vw; left: 37.73333vw; width: 24.53333vw; height: 7.86667vw; background-image: url(../images/top/sec-1-ttl-movie_sp.png) } } #page-top #sec-2 { z-index: 0; background-repeat: no-repeat; background-size: 100% auto } @media screen and (min-width: 1401px) { #page-top #sec-2 { height: 1354.0625px; margin-top: -2px } #page-top #sec-2:before { content: ""; position: absolute; z-index: 0; left: 50%; width: 100vw; height: calc(1354.0625px + 0px); margin-left: -50vw; pointer-events: none; background-image: url(../images/top/sec-2-bg-pattern-dn-0.jpg?imbypass=true); background-repeat: repeat-x; background-position: 50% 0%; background-size: auto 1354.0625px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-top #sec-2 { height: 96.71875vw; margin-top: -2px } #page-top #sec-2:before { content: ""; position: absolute; z-index: 0; left: 50%; width: 100vw; height: calc(96.71875vw + 0px); margin-left: -50vw; pointer-events: none; background-image: url(../images/top/sec-2-bg-pattern-dn-0.jpg?imbypass=true); background-repeat: repeat-x; background-position: 50% 0%; background-size: auto 96.71875vw } } @media screen and (max-width: 750px) { #page-top #sec-2 { height: 168.93333vw; margin-top: -1px; background-color: #ea6fbe; background-image: url(../images/top/sec-2-bg_sp.jpg); background-size: 100vw auto } } #page-top .sec-2-char-0 { position: absolute } @media screen and (min-width: 1401px) { #page-top .sec-2-char-0 { top: 59.0625px; left: -131.25px; width: 587.34375px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-top .sec-2-char-0 { top: 4.21875vw; left: -9.375vw; width: 41.95312vw } } @media screen and (max-width: 750px) { #page-top .sec-2-char-0 { top: 19.73333vw; left: -15.2vw; width: 55.06667vw } } #page-top .sec-2-char-0 img { -webkit-transform: scale(1.2) rotate(120deg); transform: scale(1.2) rotate(120deg); opacity: 0 } #page-top .sec-2-char-0.aos-animate img { -webkit-transition: opacity 3s 0.3s,-webkit-transform 3s 0.3s; transition: opacity 3s 0.3s,-webkit-transform 3s 0.3s; transition: opacity 3s 0.3s,transform 3s 0.3s; transition: opacity 3s 0.3s,transform 3s 0.3s,-webkit-transform 3s 0.3s; -webkit-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); opacity: 1 } #page-top .sec-2-char-0.aos-animate > .full-x { -webkit-animation-name: gata-gata; animation-name: gata-gata; -webkit-animation-duration: 2s; animation-duration: 2s; -webkit-animation-delay: 3.3s; animation-delay: 3.3s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite } #page-top .sec-2-ttl { position: absolute } @media screen and (min-width: 1401px) { #page-top .sec-2-ttl { top: 61.25px; left: 295.3125px; width: 819.21875px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-top .sec-2-ttl { top: 4.375vw; left: 21.09375vw; width: 58.51563vw } } @media screen and (max-width: 750px) { #page-top .sec-2-ttl { top: 8.26667vw; left: 19.33333vw; width: 77.73333vw } } #page-top .sec-2-gallery { position: absolute; overflow: hidden; background-color: #000 } @media screen and (min-width: 1401px) { #page-top .sec-2-gallery { top: 260.3125px; left: 50%; width: 100vw; height: 661.71875px; margin-left: -50vw } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-top .sec-2-gallery { top: 18.59375vw; left: 0vw; width: 100vw; height: 47.26562vw } } @media screen and (max-width: 750px) { #page-top .sec-2-gallery { top: 29.06667vw; left: 0vw; width: 100vw; height: 80.66667vw } } #page-top .on-parade { position: absolute; background-size: auto 100% } @media screen and (min-width: 1401px) { #page-top .on-parade { width: 2283.75px; height: 217.65625px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-top .on-parade { width: 163.125vw; height: 15.54687vw } } @media screen and (max-width: 750px) { #page-top .on-parade { width: 278.4vw; height: 26.53333vw } } #page-top .on-parade:before { position: absolute; width: 400%; height: 100%; background-size: auto 100% } @media screen and (min-width: 1401px) { #page-top .on-parade.on-parade-0 { top: 0px; left: 0px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-top .on-parade.on-parade-0 { top: 0vw; left: 0vw } } @media screen and (max-width: 750px) { #page-top .on-parade.on-parade-0 { top: 0vw; left: 0vw } } #page-top .on-parade.on-parade-0:before { content: ""; position: absolute; top: 0; left: 0; display: block; -webkit-animation-name: on-parade-0; animation-name: on-parade-0; -webkit-animation-duration: 60s; animation-duration: 60s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; background-image: url(../images/top/on-parade-0.png?imbypass=true); -webkit-animation-fill-mode: both; animation-fill-mode: both } @media screen and (min-width: 1401px) { #page-top .on-parade.on-parade-1 { top: 217.65625px; left: 0px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-top .on-parade.on-parade-1 { top: 15.54687vw; left: 0vw } } @media screen and (max-width: 750px) { #page-top .on-parade.on-parade-1 { top: 26.53333vw; left: 0vw } } #page-top .on-parade.on-parade-1:before { content: ""; position: absolute; top: 0; right: 0; display: block; -webkit-animation-name: on-parade-1; animation-name: on-parade-1; -webkit-animation-duration: 62s; animation-duration: 62s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; background-image: url(../images/top/on-parade-1.png?imbypass=true); -webkit-animation-fill-mode: both; animation-fill-mode: both } @media screen and (min-width: 1401px) { #page-top .on-parade.on-parade-2 { top: 435.3125px; left: 0px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-top .on-parade.on-parade-2 { top: 31.09375vw; left: 0vw } } @media screen and (max-width: 750px) { #page-top .on-parade.on-parade-2 { top: 53.06667vw; left: 0vw } } #page-top .on-parade.on-parade-2:before { content: ""; position: absolute; top: 0; left: 0; display: block; -webkit-animation-name: on-parade-0; animation-name: on-parade-0; -webkit-animation-duration: 64s; animation-duration: 64s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; background-image: url(../images/top/on-parade-2.png?imbypass=true); -webkit-animation-fill-mode: both; animation-fill-mode: both } #page-top .sec-2-char-1 { position: absolute } @media screen and (min-width: 1401px) { #page-top .sec-2-char-1 { top: 724.0625px; left: 2.1875px; width: 1392.34375px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-top .sec-2-char-1 { top: 51.71875vw; left: 0.15625vw; width: 99.45312vw } } @media screen and (max-width: 750px) { #page-top .sec-2-char-1 { top: 98.13333vw; left: 0vw; width: 100vw } } #page-top .sec-2-char-1 img[class^="sec-2-char-1-"] { -webkit-transform: translateY(50px) scale(1); transform: translateY(50px) scale(1); opacity: 0 } #page-top .sec-2-char-1.aos-animate img[class^="sec-2-char-1-"] { -webkit-transform: translateY(0%) scale(1); transform: translateY(0%) scale(1); opacity: 1 } #page-top .sec-2-char-1.aos-animate ~ .sec-2-char-1-fuki { -webkit-animation-name: sec-2-char-1-fuki; animation-name: sec-2-char-1-fuki; -webkit-animation-duration: 6s; animation-duration: 6s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-fill-mode: both; animation-fill-mode: both } #page-top .sec-2-char-1.aos-animate .sec-2-char-1-0 { -webkit-transition: opacity 0.3s 0s,-webkit-transform 0.3s 0s cubic-bezier(0.12, 0.92, 0.32, 1.2); transition: opacity 0.3s 0s,-webkit-transform 0.3s 0s cubic-bezier(0.12, 0.92, 0.32, 1.2); transition: opacity 0.3s 0s,transform 0.3s 0s cubic-bezier(0.12, 0.92, 0.32, 1.2); transition: opacity 0.3s 0s,transform 0.3s 0s cubic-bezier(0.12, 0.92, 0.32, 1.2),-webkit-transform 0.3s 0s cubic-bezier(0.12, 0.92, 0.32, 1.2) } #page-top .sec-2-char-1.aos-animate .sec-2-char-1-1 { -webkit-transition: opacity 0.3s 0.1s,-webkit-transform 0.3s 0.1s cubic-bezier(0.12, 0.92, 0.32, 1.2); transition: opacity 0.3s 0.1s,-webkit-transform 0.3s 0.1s cubic-bezier(0.12, 0.92, 0.32, 1.2); transition: opacity 0.3s 0.1s,transform 0.3s 0.1s cubic-bezier(0.12, 0.92, 0.32, 1.2); transition: opacity 0.3s 0.1s,transform 0.3s 0.1s cubic-bezier(0.12, 0.92, 0.32, 1.2),-webkit-transform 0.3s 0.1s cubic-bezier(0.12, 0.92, 0.32, 1.2) } #page-top .sec-2-char-1.aos-animate .sec-2-char-1-2 { -webkit-transition: opacity 0.3s 0.2s,-webkit-transform 0.3s 0.2s cubic-bezier(0.12, 0.92, 0.32, 1.2); transition: opacity 0.3s 0.2s,-webkit-transform 0.3s 0.2s cubic-bezier(0.12, 0.92, 0.32, 1.2); transition: opacity 0.3s 0.2s,transform 0.3s 0.2s cubic-bezier(0.12, 0.92, 0.32, 1.2); transition: opacity 0.3s 0.2s,transform 0.3s 0.2s cubic-bezier(0.12, 0.92, 0.32, 1.2),-webkit-transform 0.3s 0.2s cubic-bezier(0.12, 0.92, 0.32, 1.2) } #page-top .sec-2-char-1.aos-animate .sec-2-char-1-3 { -webkit-transition: opacity 0.3s 0.3s,-webkit-transform 0.3s 0.3s cubic-bezier(0.12, 0.92, 0.32, 1.2); transition: opacity 0.3s 0.3s,-webkit-transform 0.3s 0.3s cubic-bezier(0.12, 0.92, 0.32, 1.2); transition: opacity 0.3s 0.3s,transform 0.3s 0.3s cubic-bezier(0.12, 0.92, 0.32, 1.2); transition: opacity 0.3s 0.3s,transform 0.3s 0.3s cubic-bezier(0.12, 0.92, 0.32, 1.2),-webkit-transform 0.3s 0.3s cubic-bezier(0.12, 0.92, 0.32, 1.2) } #page-top .sec-2-char-1.aos-animate .sec-2-char-1-4 { -webkit-transition: opacity 0.3s 0.4s,-webkit-transform 0.3s 0.4s cubic-bezier(0.12, 0.92, 0.32, 1.2); transition: opacity 0.3s 0.4s,-webkit-transform 0.3s 0.4s cubic-bezier(0.12, 0.92, 0.32, 1.2); transition: opacity 0.3s 0.4s,transform 0.3s 0.4s cubic-bezier(0.12, 0.92, 0.32, 1.2); transition: opacity 0.3s 0.4s,transform 0.3s 0.4s cubic-bezier(0.12, 0.92, 0.32, 1.2),-webkit-transform 0.3s 0.4s cubic-bezier(0.12, 0.92, 0.32, 1.2) } #page-top .sec-2-char-1.aos-animate .sec-2-char-1-5 { -webkit-transition: opacity 0.3s 0.5s,-webkit-transform 0.3s 0.5s cubic-bezier(0.12, 0.92, 0.32, 1.2); transition: opacity 0.3s 0.5s,-webkit-transform 0.3s 0.5s cubic-bezier(0.12, 0.92, 0.32, 1.2); transition: opacity 0.3s 0.5s,transform 0.3s 0.5s cubic-bezier(0.12, 0.92, 0.32, 1.2); transition: opacity 0.3s 0.5s,transform 0.3s 0.5s cubic-bezier(0.12, 0.92, 0.32, 1.2),-webkit-transform 0.3s 0.5s cubic-bezier(0.12, 0.92, 0.32, 1.2) } #page-top .sec-2-char-1.aos-animate .sec-2-char-1-6 { -webkit-transition: opacity 0.3s 0.6s,-webkit-transform 0.3s 0.6s cubic-bezier(0.12, 0.92, 0.32, 1.2); transition: opacity 0.3s 0.6s,-webkit-transform 0.3s 0.6s cubic-bezier(0.12, 0.92, 0.32, 1.2); transition: opacity 0.3s 0.6s,transform 0.3s 0.6s cubic-bezier(0.12, 0.92, 0.32, 1.2); transition: opacity 0.3s 0.6s,transform 0.3s 0.6s cubic-bezier(0.12, 0.92, 0.32, 1.2),-webkit-transform 0.3s 0.6s cubic-bezier(0.12, 0.92, 0.32, 1.2) } #page-top .sec-2-char-1.aos-animate .sec-2-char-1-7 { -webkit-transition: opacity 0.3s 0.7s,-webkit-transform 0.3s 0.7s cubic-bezier(0.12, 0.92, 0.32, 1.2); transition: opacity 0.3s 0.7s,-webkit-transform 0.3s 0.7s cubic-bezier(0.12, 0.92, 0.32, 1.2); transition: opacity 0.3s 0.7s,transform 0.3s 0.7s cubic-bezier(0.12, 0.92, 0.32, 1.2); transition: opacity 0.3s 0.7s,transform 0.3s 0.7s cubic-bezier(0.12, 0.92, 0.32, 1.2),-webkit-transform 0.3s 0.7s cubic-bezier(0.12, 0.92, 0.32, 1.2) } #page-top .sec-2-char-1.aos-animate .sec-2-char-1-8 { -webkit-transition: opacity 0.3s 0.8s,-webkit-transform 0.3s 0.8s cubic-bezier(0.12, 0.92, 0.32, 1.2); transition: opacity 0.3s 0.8s,-webkit-transform 0.3s 0.8s cubic-bezier(0.12, 0.92, 0.32, 1.2); transition: opacity 0.3s 0.8s,transform 0.3s 0.8s cubic-bezier(0.12, 0.92, 0.32, 1.2); transition: opacity 0.3s 0.8s,transform 0.3s 0.8s cubic-bezier(0.12, 0.92, 0.32, 1.2),-webkit-transform 0.3s 0.8s cubic-bezier(0.12, 0.92, 0.32, 1.2) } #page-top .sec-2-char-1.aos-animate .sec-2-char-1-9 { -webkit-transition: opacity 0.3s 0.9s,-webkit-transform 0.3s 0.9s cubic-bezier(0.12, 0.92, 0.32, 1.2); transition: opacity 0.3s 0.9s,-webkit-transform 0.3s 0.9s cubic-bezier(0.12, 0.92, 0.32, 1.2); transition: opacity 0.3s 0.9s,transform 0.3s 0.9s cubic-bezier(0.12, 0.92, 0.32, 1.2); transition: opacity 0.3s 0.9s,transform 0.3s 0.9s cubic-bezier(0.12, 0.92, 0.32, 1.2),-webkit-transform 0.3s 0.9s cubic-bezier(0.12, 0.92, 0.32, 1.2) } #page-top .sec-2-char-1.aos-animate .sec-2-char-1-10 { -webkit-transition: opacity 0.3s 1s,-webkit-transform 0.3s 1s cubic-bezier(0.12, 0.92, 0.32, 1.2); transition: opacity 0.3s 1s,-webkit-transform 0.3s 1s cubic-bezier(0.12, 0.92, 0.32, 1.2); transition: opacity 0.3s 1s,transform 0.3s 1s cubic-bezier(0.12, 0.92, 0.32, 1.2); transition: opacity 0.3s 1s,transform 0.3s 1s cubic-bezier(0.12, 0.92, 0.32, 1.2),-webkit-transform 0.3s 1s cubic-bezier(0.12, 0.92, 0.32, 1.2) } #page-top .sec-2-char-1.aos-animate .sec-2-char-1-11 { -webkit-transition: opacity 0.3s 1.1s,-webkit-transform 0.3s 1.1s cubic-bezier(0.12, 0.92, 0.32, 1.2); transition: opacity 0.3s 1.1s,-webkit-transform 0.3s 1.1s cubic-bezier(0.12, 0.92, 0.32, 1.2); transition: opacity 0.3s 1.1s,transform 0.3s 1.1s cubic-bezier(0.12, 0.92, 0.32, 1.2); transition: opacity 0.3s 1.1s,transform 0.3s 1.1s cubic-bezier(0.12, 0.92, 0.32, 1.2),-webkit-transform 0.3s 1.1s cubic-bezier(0.12, 0.92, 0.32, 1.2) } #page-top .sec-2-char-1-fuki { position: absolute; -webkit-transform-origin: 20% 93%; transform-origin: 20% 93% } @media screen and (min-width: 1401px) { #page-top .sec-2-char-1-fuki { top: 547.96875px; left: 690.15625px; width: 231.875px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-top .sec-2-char-1-fuki { top: 39.14062vw; left: 49.29688vw; width: 16.5625vw } } @media screen and (max-width: 750px) { #page-top .sec-2-char-1-fuki { top: 74.8vw; left: 46.4vw; width: 28.26667vw } } #page-top .sec-2-char-1-0 { position: absolute; top: 0; left: 0; width: calc(100% * ( 286 / 1273)); margin: calc(100% * ( 0 / 1273)) 0 0 calc(100% * ( 472 / 1273)) } #page-top .sec-2-char-1-1 { position: absolute; top: 0; left: 0; width: calc(100% * ( 177 / 1273)); margin: calc(100% * ( 29 / 1273)) 0 0 calc(100% * ( 350 / 1273)) } #page-top .sec-2-char-1-2 { position: absolute; top: 0; left: 0; width: calc(100% * ( 179 / 1273)); margin: calc(100% * ( 41 / 1273)) 0 0 calc(100% * ( 703 / 1273)) } #page-top .sec-2-char-1-3 { position: absolute; top: 0; left: 0; width: calc(100% * ( 201 / 1273)); margin: calc(100% * ( 43 / 1273)) 0 0 calc(100% * ( 218 / 1273)) } #page-top .sec-2-char-1-4 { position: absolute; top: 0; left: 0; width: calc(100% * ( 139 / 1273)); margin: calc(100% * ( 77 / 1273)) 0 0 calc(100% * ( 846 / 1273)) } #page-top .sec-2-char-1-5 { position: absolute; top: 0; left: 0; width: calc(100% * ( 122 / 1273)); margin: calc(100% * ( 95 / 1273)) 0 0 calc(100% * ( 160 / 1273)) } #page-top .sec-2-char-1-6 { position: absolute; top: 0; left: 0; width: calc(100% * ( 130 / 1273)); margin: calc(100% * ( 108 / 1273)) 0 0 calc(100% * ( 948 / 1273)) } #page-top .sec-2-char-1-7 { position: absolute; top: 0; left: 0; width: calc(100% * ( 108 / 1273)); margin: calc(100% * ( 115 / 1273)) 0 0 calc(100% * ( 81 / 1273)) } #page-top .sec-2-char-1-8 { position: absolute; top: 0; left: 0; width: calc(100% * ( 118 / 1273)); margin: calc(100% * ( 107 / 1273)) 0 0 calc(100% * ( 1030 / 1273)) } #page-top .sec-2-char-1-9 { position: absolute; top: 0; left: 0; width: calc(100% * ( 132 / 1273)); margin: calc(100% * ( 137 / 1273)) 0 0 calc(100% * ( 0 / 1273)) } #page-top .sec-2-char-1-10 { position: absolute; top: 0; left: 0; width: calc(100% * ( 100 / 1273)); margin: calc(100% * ( 125 / 1273)) 0 0 calc(100% * ( 1101 / 1273)) } #page-top .sec-2-char-1-11 { position: absolute; top: 0; left: 0; width: calc(100% * ( 108 / 1273)); margin: calc(100% * ( 145 / 1273)) 0 0 calc(100% * ( 1165 / 1273)) } #page-top .sec-2-over200 { position: absolute } @media screen and (min-width: 1401px) { #page-top .sec-2-over200 { top: 1008.4375px; left: 138.90625px; width: 1124.375px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-top .sec-2-over200 { top: 72.03125vw; left: 9.92188vw; width: 80.3125vw } } @media screen and (max-width: 750px) { #page-top .sec-2-over200 { top: 122.4vw; left: 2.66667vw; width: 95.06667vw } } #page-top .go-game-btn { position: absolute } @media screen and (min-width: 1401px) { #page-top .go-game-btn { top: 1234.84375px; left: 377.34375px; width: 650.78125px } #page-top .go-game-btn .go-game-btn-in { -webkit-transition: -webkit-transform 0.3s; transition: -webkit-transform 0.3s; transition: transform 0.3s; transition: transform 0.3s,-webkit-transform 0.3s } #page-top .go-game-btn:hover .go-game-btn-in { -webkit-transform: scale(1.1); transform: scale(1.1) } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-top .go-game-btn { top: 88.20312vw; left: 26.95312vw; width: 46.48438vw } #page-top .go-game-btn .go-game-btn-in { -webkit-transition: -webkit-transform 0.3s; transition: -webkit-transform 0.3s; transition: transform 0.3s; transition: transform 0.3s,-webkit-transform 0.3s } #page-top .go-game-btn:hover .go-game-btn-in { -webkit-transform: scale(1.1); transform: scale(1.1) } } @media screen and (max-width: 750px) { #page-top .go-game-btn { top: 146.26667vw; left: 10.4vw; width: 79.33333vw } } #page-top .go-game-btn-in { position: relative; background-image: url(../images/top/go-game-btn.png); background-size: 100% 100% } @media screen and (min-width: 1401px) { #page-top .go-game-btn-in { width: 650.78125px; height: 94.0625px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-top .go-game-btn-in { width: 46.48438vw; height: 6.71875vw } } @media screen and (max-width: 750px) { #page-top .go-game-btn-in { width: 79.33333vw; height: 11.46667vw } } #page-top #sec-3 { background-size: cover } @media screen and (min-width: 1401px) { #page-top #sec-3 { height: 835.625px; margin-top: -2px } #page-top #sec-3:before { content: ""; position: absolute; z-index: 0; left: 50%; width: 100vw; height: 835.625px; margin-left: -50vw; pointer-events: none; background-image: url(../images/top/sec-3-bg-pattern-dn-0.jpg?imbypass=true); background-repeat: repeat-x; background-position: 50% 0%; background-size: auto 835.625px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-top #sec-3 { height: 59.6875vw; margin-top: -2px } #page-top #sec-3:before { content: ""; position: absolute; z-index: 0; left: 50%; width: 100vw; height: 59.6875vw; margin-left: -50vw; pointer-events: none; background-image: url(../images/top/sec-3-bg-pattern-dn-0.jpg?imbypass=true); background-repeat: repeat-x; background-position: 50% 0%; background-size: auto 59.6875vw } } @media screen and (max-width: 750px) { #page-top #sec-3 { height: 137.73333vw; background-image: url(../images/top/sec-3-bg_sp.jpg) } } #page-top .sec-3-star-0 { position: absolute; z-index: 0; background-image: url(../images/top/sec-3-star-0.png) } @media screen and (min-width: 1401px) { #page-top .sec-3-star-0 { top: 235.15625px; left: 0px; width: 286.5625px; height: 286.5625px; background-size: 100% 100% } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-top .sec-3-star-0 { top: 16.79688vw; left: 0vw; width: 20.46875vw; height: 20.46875vw; background-size: 100% 100% } } #page-top .sec-3-star-1 { position: absolute; z-index: 0; background-image: url(../images/top/sec-3-star-1.png) } @media screen and (min-width: 1401px) { #page-top .sec-3-star-1 { top: 479.0625px; left: 1102.5px; width: 293.125px; height: 287.65625px; background-size: 100% 100% } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-top .sec-3-star-1 { top: 34.21875vw; left: 78.75vw; width: 20.9375vw; height: 20.54688vw; background-size: 100% 100% } } #page-top .sec-3-ttl { position: absolute } @media screen and (min-width: 1401px) { #page-top .sec-3-ttl { top: 65.625px; left: 331.40625px; width: 741.5625px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-top .sec-3-ttl { top: 4.6875vw; left: 23.67188vw; width: 52.96875vw } } @media screen and (max-width: 750px) { #page-top .sec-3-ttl { top: 8.26667vw; left: 3.33333vw; width: 78.8vw } } #page-top .sec-3-char { position: absolute } @media screen and (min-width: 1401px) { #page-top .sec-3-char { top: -84.21875px; left: 978.90625px; width: 540.3125px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-top .sec-3-char { top: -6.01562vw; left: 69.92188vw; width: 38.59375vw } } @media screen and (max-width: 750px) { #page-top .sec-3-char { top: -14.26667vw; left: 69.73333vw; width: 47.2vw } } #page-top .sec-3-char img { -webkit-transform-origin: 62% 98%; transform-origin: 62% 98% } #page-top .sec-3-char.aos-animate img { -webkit-animation-name: sec-3-char; animation-name: sec-3-char; -webkit-animation-duration: 4s; animation-duration: 4s; -webkit-animation-delay: 0.4s; animation-delay: 0.4s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite } #page-top .sec-3-note { position: absolute } @media screen and (min-width: 1401px) { #page-top .sec-3-note { top: 270.15625px; left: 246.09375px; width: 905.625px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-top .sec-3-note { top: 19.29688vw; left: 17.57812vw; width: 64.6875vw } } @media screen and (max-width: 750px) { #page-top .sec-3-note { top: 31.2vw; left: 6.4vw; width: 87.46667vw } } @media screen and (max-width: 750px) { #page-top .sec-3-pic { position: relative; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0 1.6vw } } #page-top .sec-3-pic p { position: absolute; bottom: 0; left: 0; display: block; width: 100%; font-family: 'Noto Sans JP',sans-serif; font-weight: 700; text-align: center; color: #fff } @media screen and (min-width: 1401px) { #page-top .sec-3-pic p { height: 49.21875px; font-size: 21.875px; line-height: 49.21875px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-top .sec-3-pic p { height: 3.51562vw; font-size: 1.5625vw; line-height: 3.51562vw } } @media screen and (max-width: 750px) { #page-top .sec-3-pic p { height: 8.13333vw; font-size: 3.2vw; line-height: 8.13333vw } } @media screen and (max-width: 750px) { #page-top .sec-3-pic-carousel-arrow-box { position: absolute; top: 84.4vw; left: 0; width: 100%; height: 0 } } @media screen and (max-width: 750px) { #page-top .sec-3-pic-carousel-arrow-prev { position: absolute; left: 50%; width: 11.73333vw; height: 11.73333vw; margin: -5.86667vw 0 0 -48.66667vw; cursor: pointer; background-image: url(../images/common/arrow-prev_sp.png); background-size: 100% 100% } } @media screen and (max-width: 750px) { #page-top .sec-3-pic-carousel-arrow-next { position: absolute; right: 50%; width: 11.73333vw; height: 11.73333vw; margin: -5.86667vw -48.66667vw 0 0; cursor: pointer; background-image: url(../images/common/arrow-next_sp.png); background-size: 100% 100% } } #page-top .sec-3-pic-0 { position: absolute } @media screen and (min-width: 1401px) { #page-top .sec-3-pic-0 { top: 370.78125px; left: 140px; width: 367.5px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-top .sec-3-pic-0 { top: 26.48438vw; left: 10vw; width: 26.25vw } } #page-top .sec-3-pic-1 { position: absolute } @media screen and (min-width: 1401px) { #page-top .sec-3-pic-1 { top: 370.78125px; left: 516.25px; width: 367.5px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-top .sec-3-pic-1 { top: 26.48438vw; left: 36.875vw; width: 26.25vw } } #page-top .sec-3-pic-2 { position: absolute } @media screen and (min-width: 1401px) { #page-top .sec-3-pic-2 { top: 370.78125px; left: 893.59375px; width: 367.5px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-top .sec-3-pic-2 { top: 26.48438vw; left: 63.82812vw; width: 26.25vw } } #page-top .sec-3-pic-carousel { position: absolute } @media screen and (max-width: 750px) { #page-top .sec-3-pic-carousel { top: 53.6vw; left: 0; width: 100% } } #page-top .go-character-btn { position: absolute } @media screen and (min-width: 1401px) { #page-top .go-character-btn { top: 685.78125px; left: 377.34375px; width: 650.78125px } #page-top .go-character-btn .go-character-btn-in { -webkit-transition: -webkit-transform 0.3s; transition: -webkit-transform 0.3s; transition: transform 0.3s; transition: transform 0.3s,-webkit-transform 0.3s } #page-top .go-character-btn:hover .go-character-btn-in { -webkit-transform: scale(1.1); transform: scale(1.1) } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-top .go-character-btn { top: 48.98438vw; left: 26.95312vw; width: 46.48438vw } #page-top .go-character-btn .go-character-btn-in { -webkit-transition: -webkit-transform 0.3s; transition: -webkit-transform 0.3s; transition: transform 0.3s; transition: transform 0.3s,-webkit-transform 0.3s } #page-top .go-character-btn:hover .go-character-btn-in { -webkit-transform: scale(1.1); transform: scale(1.1) } } @media screen and (max-width: 750px) { #page-top .go-character-btn { top: 118.53333vw; left: 10.4vw; width: 79.33333vw } } #page-top .go-character-btn-in { position: relative; background-image: url(../images/top/go-character-btn.png); background-size: 100% 100% } @media screen and (min-width: 1401px) { #page-top .go-character-btn-in { width: 650.78125px; height: 94.0625px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-top .go-character-btn-in { width: 46.48438vw; height: 6.71875vw } } @media screen and (max-width: 750px) { #page-top .go-character-btn-in { width: 79.33333vw; height: 11.46667vw } } @media screen and (min-width: 1401px) { #page-top #sec-4 { height: 1241.40625px; margin-top: -2px } #page-top #sec-4:before { content: ""; position: absolute; z-index: 0; left: 50%; width: 100vw; height: 1241.40625px; margin-left: -50vw; pointer-events: none; background-image: url(../images/top/sec-4-bg-pattern-dn-0.jpg?imbypass=true); background-repeat: repeat-x; background-position: 50% 100%; background-size: auto 100% } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-top #sec-4 { height: 88.67188vw; margin-top: -2px } #page-top #sec-4:before { content: ""; position: absolute; z-index: 0; left: 50%; width: 100vw; height: 88.67188vw; margin-left: -50vw; pointer-events: none; background-image: url(../images/top/sec-4-bg-pattern-dn-0.jpg?imbypass=true); background-repeat: repeat-x; background-position: 50% 100%; background-size: auto 100% } } @media screen and (max-width: 750px) { #page-top #sec-4 { height: 196vw; background-image: url(../images/top/sec-4-bg_sp.jpg); background-size: 100vw auto } } #page-top .sec-4-star-0 { position: absolute; z-index: 0; background-image: url(../images/top/sec-4-star-0.png) } @media screen and (min-width: 1401px) { #page-top .sec-4-star-0 { top: 293.125px; left: 92.96875px; width: 273.4375px; height: 272.34375px; background-size: 100% 100% } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-top .sec-4-star-0 { top: 16.79688vw; left: 0vw; width: 20.46875vw; height: 20.46875vw; background-size: 100% 100% } } #page-top .sec-4-star-1 { position: absolute; z-index: 0; background-image: url(../images/top/sec-4-star-1.png) } @media screen and (min-width: 1401px) { #page-top .sec-4-star-1 { top: 223.125px; left: 1055.46875px; width: 273.4375px; height: 272.34375px; background-size: 100% 100% } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-top .sec-4-star-1 { top: 34.21875vw; left: 78.75vw; width: 20.9375vw; height: 20.54688vw; background-size: 100% 100% } } #page-top .sec-4-ttl { position: absolute } @media screen and (min-width: 1401px) { #page-top .sec-4-ttl { top: 62.34375px; left: 235.15625px; width: 931.875px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-top .sec-4-ttl { top: 4.45312vw; left: 16.79688vw; width: 66.5625vw } } @media screen and (max-width: 750px) { #page-top .sec-4-ttl { top: 6.26667vw; left: 6.8vw; width: 86.4vw } } #page-top .sec-4-tv { position: absolute; background-image: url(../images/top/sec-4-tv.png); background-size: 100% 100% } @media screen and (min-width: 1401px) { #page-top .sec-4-tv { top: 267.96875px; left: 306.25px; width: 787.5px; height: 477.96875px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-top .sec-4-tv { top: 19.14062vw; left: 21.875vw; width: 56.25vw; height: 34.14062vw } } @media screen and (max-width: 750px) { #page-top .sec-4-tv { top: 27.6vw; left: 11.46667vw; width: 76.93333vw; height: 46.66667vw } } #page-top .sec-4-tv video { position: absolute } @media screen and (min-width: 1401px) { #page-top .sec-4-tv video { top: 10.9375px; left: 24.0625px; width: 740.46875px; height: 414.53125px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-top .sec-4-tv video { top: 0.78125vw; left: 1.71875vw; width: 52.89062vw; height: 29.60938vw } } @media screen and (max-width: 750px) { #page-top .sec-4-tv video { top: 0.93333vw; left: 2.13333vw; width: 72.53333vw; height: 40.53333vw } } #page-top .sec-4-char-0 { position: absolute } @media screen and (min-width: 1401px) { #page-top .sec-4-char-0 { top: 257.03125px; left: 218.75px; width: 159.6875px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-top .sec-4-char-0 { top: 18.35938vw; left: 15.625vw; width: 11.40625vw } } @media screen and (max-width: 750px) { #page-top .sec-4-char-0 { top: 26.8vw; left: 3.86667vw; width: 13.6vw } } #page-top .sec-4-char-1 { position: absolute } @media screen and (min-width: 1401px) { #page-top .sec-4-char-1 { top: 296.40625px; left: 1035.78125px; width: 166.25px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-top .sec-4-char-1 { top: 21.17188vw; left: 73.98438vw; width: 11.875vw } } @media screen and (max-width: 750px) { #page-top .sec-4-char-1 { top: 31.06667vw; left: 82vw; width: 14.26667vw } } #page-top .sec-4-ctrl-0 { position: absolute } @media screen and (min-width: 1401px) { #page-top .sec-4-ctrl-0 { top: 630px; left: 240.625px; width: 282.1875px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-top .sec-4-ctrl-0 { top: 45vw; left: 17.1875vw; width: 20.15625vw } } @media screen and (max-width: 750px) { #page-top .sec-4-ctrl-0 { top: 74.13333vw; left: 5.06667vw; width: 28.93333vw } } #page-top .sec-4-ctrl-1 { position: absolute } @media screen and (min-width: 1401px) { #page-top .sec-4-ctrl-1 { top: 630px; left: 873.90625px; width: 282.1875px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-top .sec-4-ctrl-1 { top: 45vw; left: 62.42188vw; width: 20.15625vw } } @media screen and (max-width: 750px) { #page-top .sec-4-ctrl-1 { top: 74.13333vw; left: 66vw; width: 29.06667vw } } #page-top .sec-4-fuki-0 { position: absolute } @media screen and (min-width: 1401px) { #page-top .sec-4-fuki-0 { top: 487.8125px; left: 68.90625px; width: 243.90625px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-top .sec-4-fuki-0 { top: 34.84375vw; left: 4.92188vw; width: 17.42188vw } } @media screen and (max-width: 750px) { #page-top .sec-4-fuki-0 { top: 55.06667vw; left: -2.26667vw; width: 28.13333vw } } #page-top .sec-4-fuki-1 { position: absolute } @media screen and (min-width: 1401px) { #page-top .sec-4-fuki-1 { top: 490px; left: 1085px; width: 243.90625px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-top .sec-4-fuki-1 { top: 35vw; left: 77.5vw; width: 17.42188vw } } @media screen and (max-width: 750px) { #page-top .sec-4-fuki-1 { top: 55.06667vw; left: 74.13333vw; width: 28.13333vw } } #page-top .sec-4-note { position: absolute } @media screen and (min-width: 1401px) { #page-top .sec-4-note { top: 809.375px; left: 223.125px; width: 953.75px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-top .sec-4-note { top: 57.8125vw; left: 15.9375vw; width: 68.125vw } } @media screen and (max-width: 750px) { #page-top .sec-4-note { top: 94.13333vw; left: 6.66667vw; width: 86.4vw } } #page-top .sec-4-local { position: absolute } @media screen and (min-width: 1401px) { #page-top .sec-4-local { top: 977.8125px; left: 140px; width: 1120px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-top .sec-4-local { top: 69.84375vw; left: 10vw; width: 80vw } } @media screen and (max-width: 750px) { #page-top .sec-4-local { top: 135.33333vw; left: 5.2vw; width: 89.33333vw } } #page-top .sec-4-local p { position: absolute; display: block; font-family: 'Noto Sans JP',sans-serif; font-weight: 700; -webkit-transform: translateY(-50%); transform: translateY(-50%); color: #000 } @media screen and (min-width: 1401px) { #page-top .sec-4-local p { top: 103.90625px; left: 43.75px; width: 634.375px; font-size: 19.6875px; line-height: 1.61111 } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-top .sec-4-local p { top: 7.42188vw; left: 3.125vw; width: 45.3125vw; font-size: 1.40625vw; line-height: 1.61111 } } @media screen and (max-width: 750px) { #page-top .sec-4-local p { top: 18.4vw; left: 0; width: 100%; font-size: 2.93333vw; line-height: 1.54545; text-align: center } } #page-top #sec-5 { background-size: cover } @media screen and (min-width: 1401px) { #page-top #sec-5 { height: 514.0625px; margin-top: -2px } #page-top #sec-5:before { content: ""; position: absolute; z-index: 0; left: 50%; width: 100vw; height: 514.0625px; margin-left: -50vw; pointer-events: none; background-color: #7defc5; background-image: url(../images/top/sec-5-bg-pattern-dn-0.png?imbypass=true); background-repeat: repeat-x; background-position: 50% 100%; background-size: auto 514.0625px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-top #sec-5 { height: 36.71875vw; margin-top: -2px } #page-top #sec-5:before { content: ""; position: absolute; z-index: 0; left: 50%; width: 100vw; height: 36.71875vw; margin-left: -50vw; pointer-events: none; background-color: #7defc5; background-image: url(../images/top/sec-5-bg-pattern-dn-0.png?imbypass=true); background-repeat: repeat-x; background-position: 50% 100%; background-size: auto 36.71875vw } } @media screen and (max-width: 750px) { #page-top #sec-5 { height: 171.33333vw; background-image: url(../images/top/sec-5-bg_sp.jpg?20210908) } } #page-top .sec-5-char { position: absolute; z-index: 1 } @media screen and (min-width: 1401px) { #page-top .sec-5-char { top: 243.90625px; left: calc(-0.5 * (100vw - 1400px)); width: 197.96875px; -webkit-animation-name: sec-5-char; animation-name: sec-5-char; -webkit-animation-duration: 10s; animation-duration: 10s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; pointer-events: none } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-top .sec-5-char { top: 17.42188vw; left: 0vw; width: 14.14063vw; -webkit-animation-name: sec-5-char; animation-name: sec-5-char; -webkit-animation-duration: 10s; animation-duration: 10s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; pointer-events: none } } @media screen and (max-width: 750px) { #page-top .sec-5-char { top: 134.53333vw; left: 0vw; width: 19.2vw } } #page-top .sec-5-product { position: absolute } @media screen and (min-width: 1401px) { #page-top .sec-5-product { top: 65.625px; left: 144.375px; width: 330.3125px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-top .sec-5-product { top: 4.6875vw; left: 10.3125vw; width: 23.59375vw } } @media screen and (max-width: 750px) { #page-top .sec-5-product { top: 7.73333vw; left: 14vw; width: 72vw } } #page-top .sec-5-product-info-0 { position: absolute } @media screen and (min-width: 1401px) { #page-top .sec-5-product-info-0 { top: 62.34375px; left: 499.84375px; width: 410.15625px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-top .sec-5-product-info-0 { top: 4.45312vw; left: 35.70312vw; width: 29.29688vw } } @media screen and (max-width: 750px) { #page-top .sec-5-product-info-0 { top: 49.2vw; left: 12.8vw; width: 74.66667vw } } #page-top .sec-5-product-info-0 img { display: block } #page-top .sec-5-product-info-0 > span { position: relative; display: block; font-family: 'Noto Sans JP',sans-serif; font-weight: 700; line-height: 1; color: #000 } @media screen and (min-width: 1401px) { #page-top .sec-5-product-info-0 > span.sec-5-product-info-0-0 { margin-top: 16.40625px; font-size: 19.6875px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-top .sec-5-product-info-0 > span.sec-5-product-info-0-0 { margin-top: 1.17188vw; font-size: 1.40625vw } } @media screen and (max-width: 750px) { #page-top .sec-5-product-info-0 > span.sec-5-product-info-0-0 { margin-top: 2.66667vw; font-size: 3.2vw; text-align: center } } @media screen and (min-width: 1401px) { #page-top .sec-5-product-info-0 > span.sec-5-product-info-0-1 { margin-top: 26.25px; font-size: 15.3125px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-top .sec-5-product-info-0 > span.sec-5-product-info-0-1 { margin-top: 1.875vw; font-size: 1.09375vw } } @media screen and (max-width: 750px) { #page-top .sec-5-product-info-0 > span.sec-5-product-info-0-1 { margin-top: 3.06667vw; font-size: 2.66667vw; text-align: center } } @media screen and (min-width: 1401px) { #page-top .sec-5-product-info-0 > span.sec-5-product-info-0-2 { margin-top: 13.125px; font-size: 19.6875px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-top .sec-5-product-info-0 > span.sec-5-product-info-0-2 { margin-top: 0.9375vw; font-size: 1.40625vw } } @media screen and (max-width: 750px) { #page-top .sec-5-product-info-0 > span.sec-5-product-info-0-2 { margin-top: 2vw; font-size: 3.2vw; text-align: center } } @media screen and (min-width: 1401px) { #page-top .sec-5-product-info-0 > span.sec-5-product-info-0-3 { margin-top: 8.75px; font-size: 19.6875px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-top .sec-5-product-info-0 > span.sec-5-product-info-0-3 { margin-top: 0.625vw; font-size: 1.40625vw } } @media screen and (max-width: 750px) { #page-top .sec-5-product-info-0 > span.sec-5-product-info-0-3 { margin-top: 1.2vw; font-size: 3.2vw; text-align: center } } #page-top .sec-5-product-info-1 { position: absolute; font-size: 0; -webkit-transition: opacity 0.3s; transition: opacity 0.3s } @media screen and (min-width: 1401px) { #page-top .sec-5-product-info-1 { top: 62.34375px; left: 935.15625px; width: 328.125px } #page-top .sec-5-product-info-1:hover { opacity: 0.8 } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-top .sec-5-product-info-1 { top: 4.45312vw; left: 66.79688vw; width: 23.4375vw } #page-top .sec-5-product-info-1:hover { opacity: 0.8 } } @media screen and (max-width: 750px) { #page-top .sec-5-product-info-1 { top: 81.86667vw; left: 5.33333vw; width: 89.33333vw } } #page-top .sec-5-product-info-2 { position: absolute; font-size: 0; -webkit-transition: opacity 0.3s; transition: opacity 0.3s } @media screen and (min-width: 1401px) { #page-top .sec-5-product-info-2 { top: 132.34375px; left: 974.53125px; width: 240.625px } #page-top .sec-5-product-info-2:hover { opacity: 0.8 } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-top .sec-5-product-info-2 { top: 9.45312vw; left: 69.60938vw; width: 17.1875vw } #page-top .sec-5-product-info-2:hover { opacity: 0.8 } } @media screen and (max-width: 750px) { #page-top .sec-5-product-info-2 { top: 97.06667vw; left: 25.86667vw; width: 48vw } } #page-top .sec-5-product-info-3 { position: absolute } @media screen and (min-width: 1401px) { #page-top .sec-5-product-info-3 { top: 166.25px; left: 935.15625px; width: 328.125px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-top .sec-5-product-info-3 { top: 11.875vw; left: 66.79688vw; width: 23.4375vw } } @media screen and (max-width: 750px) { #page-top .sec-5-product-info-3 { top: 105.06667vw; left: 4.4vw; width: 82.66667vw } } #page-top .sec-5-product-info-3 a { position: absolute; display: block; overflow: hidden } @media screen and (min-width: 1401px) { #page-top .sec-5-product-info-3 a { top: 0; right: 0; width: 240.625px; height: 100% } #page-top .sec-5-product-info-3 a:hover .full { text-decoration: none } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-top .sec-5-product-info-3 a { top: 0; right: 0; width: 17.1875vw; height: 100% } #page-top .sec-5-product-info-3 a:hover .full { text-decoration: none } } @media screen and (max-width: 750px) { #page-top .sec-5-product-info-3 a { top: 0; right: 0; width: 51.33333vw; height: 100% } } #page-top .sec-5-product-info-3 a .full { top: 50%; width: 200%; height: auto; font-family: 'Noto Sans JP',sans-serif; font-weight: 700; -webkit-transform: translateY(-50%) scale(0.5); transform: translateY(-50%) scale(0.5); -webkit-transform-origin: 0% 50%; transform-origin: 0% 50%; text-decoration: underline; color: #000 } @media screen and (min-width: 1401px) { #page-top .sec-5-product-info-3 a .full { font-size: 28.4375px; line-height: 1.92308 } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-top .sec-5-product-info-3 a .full { font-size: 2.03125vw; line-height: 1.92308 } } @media screen and (max-width: 750px) { #page-top .sec-5-product-info-3 a .full { font-size: 5.86667vw; line-height: 1.68182 } } #page-top .rating { position: absolute; display: block } @media screen and (min-width: 1401px) { #page-top .rating { top: 40.46875px; right: 0; width: 55.78125px; height: 70px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-top .rating { top: 2.8125vw; right: 0; width: 3.98437vw; height: 5vw } } @media screen and (max-width: 750px) { #page-top .rating { top: 11.2vw; left: 70.26667vw; width: 12vw; height: 15.2vw } } #page-top .annai-btn { position: absolute; display: block; background-size: 100% 100% } @media screen and (min-width: 1401px) { #page-top .annai-btn { top: 347.8125px; left: 208.90625px; width: 982.1875px; height: 118.125px; -webkit-transition: -webkit-transform 0.3s; transition: -webkit-transform 0.3s; transition: transform 0.3s; transition: transform 0.3s,-webkit-transform 0.3s; background-image: url(../images/top/annai-btn.png?imbypass=true) } #page-top .annai-btn:hover { -webkit-transform: scale(1.05); transform: scale(1.05) } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-top .annai-btn { top: 24.84375vw; left: 14.92188vw; width: 70.15625vw; height: 8.4375vw; -webkit-transition: -webkit-transform 0.3s; transition: -webkit-transform 0.3s; transition: transform 0.3s; transition: transform 0.3s,-webkit-transform 0.3s; background-image: url(../images/top/annai-btn.png?imbypass=true) } #page-top .annai-btn:hover { -webkit-transform: scale(1.05); transform: scale(1.05) } } @media screen and (max-width: 750px) { #page-top .annai-btn { top: 138.93333vw; left: 4.13333vw; width: 91.73333vw; height: 25.6vw; background-image: url(../images/top/annai-btn_sp.png?imbypass=true) } } #page-top .annai-book { position: absolute; top: 0; left: 0; background-size: 100% 100% } @media screen and (min-width: 1401px) { #page-top .annai-book { width: calc(100% *(191/898)); margin: calc(100% *(-28/898)) 0 0 calc(100% *(62/898)); padding-bottom: calc(100% *(155/898)); background-image: url(../images/top/annai-book.png?imbypass=true) } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-top .annai-book { width: calc(100% *(191/898)); margin: calc(100% *(-28/898)) 0 0 calc(100% *(62/898)); padding-bottom: calc(100% *(155/898)); background-image: url(../images/top/annai-book.png?imbypass=true) } } @media screen and (max-width: 750px) { #page-top .annai-book { width: calc(100% *(191/688)); margin: calc(100% *(67/688)) 0 0 calc(100% *(510/688)); padding-bottom: calc(100% *(155/688)); background-image: url(../images/top/annai-book_sp.png?imbypass=true) } } #page-top .annai-new { position: absolute; top: 0; left: 0; -webkit-animation-name: muku; animation-name: muku; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; background-size: 100% 100%; -webkit-animation-fill-mode: both; animation-fill-mode: both } @media screen and (min-width: 1401px) { #page-top .annai-new { width: calc(100% *(80/898)); margin: calc(100% *(-26/898)) 0 0 calc(100% *(-23/898)); padding-bottom: calc(100% *(80/898)); background-image: url(../images/top/annai-new.png?imbypass=true) } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-top .annai-new { width: calc(100% *(80/898)); margin: calc(100% *(-26/898)) 0 0 calc(100% *(-23/898)); padding-bottom: calc(100% *(80/898)); background-image: url(../images/top/annai-new.png?imbypass=true) } } @media screen and (max-width: 750px) { #page-top .annai-new { width: calc(100% *(133/688)); margin: calc(100% *(-41/688)) 0 0 calc(100% *(577/688)); padding-bottom: calc(100% *(133/688)); background-image: url(../images/top/annai-new_sp.png?imbypass=true) } } @-webkit-keyframes show-pop { 0% { -webkit-transform: scale(0.5); transform: scale(0.5); -webkit-animation-timing-function: cubic-bezier(0, 0.32, 0.15, 1.36); animation-timing-function: cubic-bezier(0, 0.32, 0.15, 1.36); opacity: 0 } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1 } } @keyframes show-pop { 0% { -webkit-transform: scale(0.5); transform: scale(0.5); -webkit-animation-timing-function: cubic-bezier(0, 0.32, 0.15, 1.36); animation-timing-function: cubic-bezier(0, 0.32, 0.15, 1.36); opacity: 0 } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1 } } @-webkit-keyframes show-left { 0% { -webkit-transform: translateX(15px); transform: translateX(15px); opacity: 0 } 100% { -webkit-transform: translateX(0px); transform: translateX(0px); opacity: 1 } } @keyframes show-left { 0% { -webkit-transform: translateX(15px); transform: translateX(15px); opacity: 0 } 100% { -webkit-transform: translateX(0px); transform: translateX(0px); opacity: 1 } } @-webkit-keyframes show-right { 0% { -webkit-transform: translateX(-15px); transform: translateX(-15px); opacity: 0 } 100% { -webkit-transform: translateX(0px); transform: translateX(0px); opacity: 1 } } @keyframes show-right { 0% { -webkit-transform: translateX(-15px); transform: translateX(-15px); opacity: 0 } 100% { -webkit-transform: translateX(0px); transform: translateX(0px); opacity: 1 } } @-webkit-keyframes show-up { 0% { -webkit-transform: translateY(15px); transform: translateY(15px); opacity: 0 } 100% { -webkit-transform: translateY(0px); transform: translateY(0px); opacity: 1 } } @keyframes show-up { 0% { -webkit-transform: translateY(15px); transform: translateY(15px); opacity: 0 } 100% { -webkit-transform: translateY(0px); transform: translateY(0px); opacity: 1 } } #page-game [id="sec-cate-0"].aos-animate [class*="thumbnail-0"] { -webkit-animation-name: show-left; animation-name: show-left; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); -webkit-animation-delay: 1s; animation-delay: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both } #page-game [id="sec-cate-0"].aos-animate [class*="thumbnail-1"] { -webkit-animation-name: show-left; animation-name: show-left; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); -webkit-animation-delay: 1.1s; animation-delay: 1.1s; -webkit-animation-fill-mode: both; animation-fill-mode: both } #page-game [id="sec-cate-0"].aos-animate [class*="char"] { -webkit-animation-name: show-pop; animation-name: show-pop; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); -webkit-animation-delay: 1.5s; animation-delay: 1.5s; -webkit-animation-fill-mode: both; animation-fill-mode: both } #page-game [id="sec-cate-0"].aos-animate [class*="fuki"] { -webkit-transform-origin: 20% 100%; transform-origin: 20% 100%; -webkit-animation-name: show-pop; animation-name: show-pop; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 1.7s; animation-delay: 1.7s } #page-game [id="sec-cate-0"].aos-animate [class*="star"] { -webkit-animation-name: show-pop; animation-name: show-pop; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 1.8s; animation-delay: 1.8s } #page-game [id="sec-cate-1"].aos-animate [class*="thumbnail-0"] { -webkit-animation-name: show-right; animation-name: show-right; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 1s; animation-delay: 1s } #page-game [id="sec-cate-1"].aos-animate [class*="thumbnail-1"] { -webkit-animation-name: show-right; animation-name: show-right; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); -webkit-animation-fill-mode: both; animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 1.1s; animation-delay: 1.1s } #page-game [id="sec-cate-1"].aos-animate [class*="char"] { -webkit-animation-name: show-pop; animation-name: show-pop; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); -webkit-animation-delay: 1.5s; animation-delay: 1.5s; -webkit-animation-fill-mode: both; animation-fill-mode: both } #page-game [id="sec-cate-1"].aos-animate [class*="fuki"] { -webkit-transform-origin: 80% 100%; transform-origin: 80% 100%; -webkit-animation-name: show-pop; animation-name: show-pop; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 1.7s; animation-delay: 1.7s } #page-game [id="sec-cate-1"].aos-animate [class*="star"] { -webkit-animation-name: show-pop; animation-name: show-pop; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 1.8s; animation-delay: 1.8s } #page-game [id="sec-cate-2"].aos-animate [class*="thumbnail-0"] { -webkit-animation-name: show-left; animation-name: show-left; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); -webkit-animation-delay: 0.4s; animation-delay: 0.4s; -webkit-animation-fill-mode: both; animation-fill-mode: both } #page-game [id="sec-cate-2"].aos-animate [class*="thumbnail-1"] { -webkit-animation-name: show-left; animation-name: show-left; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); -webkit-animation-delay: 0.5s; animation-delay: 0.5s; -webkit-animation-fill-mode: both; animation-fill-mode: both } #page-game [id="sec-cate-2"].aos-animate [class*="char"] { -webkit-animation-name: show-pop; animation-name: show-pop; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); -webkit-animation-delay: 0.9s; animation-delay: 0.9s; -webkit-animation-fill-mode: both; animation-fill-mode: both } #page-game [id="sec-cate-2"].aos-animate [class*="fuki"] { -webkit-transform-origin: 20% 100%; transform-origin: 20% 100%; -webkit-animation-name: show-pop; animation-name: show-pop; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 1.1s; animation-delay: 1.1s } #page-game [id="sec-cate-2"].aos-animate [class*="star"] { -webkit-animation-name: show-pop; animation-name: show-pop; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 1.2s; animation-delay: 1.2s } #page-game [id="sec-cate-3"].aos-animate [class*="thumbnail-0"] { -webkit-animation-name: show-right; animation-name: show-right; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 0.4s; animation-delay: 0.4s } #page-game [id="sec-cate-3"].aos-animate [class*="thumbnail-1"] { -webkit-animation-name: show-right; animation-name: show-right; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); -webkit-animation-fill-mode: both; animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 0.5s; animation-delay: 0.5s } #page-game [id="sec-cate-3"].aos-animate [class*="char"] { -webkit-animation-name: show-pop; animation-name: show-pop; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); -webkit-animation-delay: 0.9s; animation-delay: 0.9s; -webkit-animation-fill-mode: both; animation-fill-mode: both } #page-game [id="sec-cate-3"].aos-animate [class*="fuki"] { -webkit-transform-origin: 80% 100%; transform-origin: 80% 100%; -webkit-animation-name: show-pop; animation-name: show-pop; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 1.1s; animation-delay: 1.1s } #page-game [id="sec-cate-3"].aos-animate [class*="star"] { -webkit-animation-name: show-pop; animation-name: show-pop; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 1.2s; animation-delay: 1.2s } #page-game [id="sec-cate-4"].aos-animate [class*="thumbnail-0"] { -webkit-animation-name: show-left; animation-name: show-left; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); -webkit-animation-delay: 0.4s; animation-delay: 0.4s; -webkit-animation-fill-mode: both; animation-fill-mode: both } #page-game [id="sec-cate-4"].aos-animate [class*="thumbnail-1"] { -webkit-animation-name: show-left; animation-name: show-left; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); -webkit-animation-delay: 0.5s; animation-delay: 0.5s; -webkit-animation-fill-mode: both; animation-fill-mode: both } #page-game [id="sec-cate-4"].aos-animate [class*="char"] { -webkit-animation-name: show-pop; animation-name: show-pop; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); -webkit-animation-delay: 0.9s; animation-delay: 0.9s; -webkit-animation-fill-mode: both; animation-fill-mode: both } #page-game [id="sec-cate-4"].aos-animate [class*="fuki"] { -webkit-transform-origin: 20% 100%; transform-origin: 20% 100%; -webkit-animation-name: show-pop; animation-name: show-pop; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 1.1s; animation-delay: 1.1s } #page-game [id="sec-cate-4"].aos-animate [class*="star"] { -webkit-animation-name: show-pop; animation-name: show-pop; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 1.2s; animation-delay: 1.2s } #page-game [id="sec-cate-5"].aos-animate [class*="thumbnail-0"] { -webkit-animation-name: show-right; animation-name: show-right; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 0.4s; animation-delay: 0.4s } #page-game [id="sec-cate-5"].aos-animate [class*="thumbnail-1"] { -webkit-animation-name: show-right; animation-name: show-right; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); -webkit-animation-fill-mode: both; animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 0.5s; animation-delay: 0.5s } #page-game [id="sec-cate-5"].aos-animate [class*="char"] { -webkit-animation-name: show-pop; animation-name: show-pop; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); -webkit-animation-delay: 0.9s; animation-delay: 0.9s; -webkit-animation-fill-mode: both; animation-fill-mode: both } #page-game [id="sec-cate-5"].aos-animate [class*="fuki"] { -webkit-transform-origin: 80% 100%; transform-origin: 80% 100%; -webkit-animation-name: show-pop; animation-name: show-pop; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 1.1s; animation-delay: 1.1s } #page-game [id="sec-cate-5"].aos-animate [class*="star"] { -webkit-animation-name: show-pop; animation-name: show-pop; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 1.2s; animation-delay: 1.2s } #page-game [id="sec-cate-6"].aos-animate [class*="thumbnail-0"] { -webkit-animation-name: show-left; animation-name: show-left; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); -webkit-animation-delay: 0.4s; animation-delay: 0.4s; -webkit-animation-fill-mode: both; animation-fill-mode: both } #page-game [id="sec-cate-6"].aos-animate [class*="thumbnail-1"] { -webkit-animation-name: show-left; animation-name: show-left; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); -webkit-animation-delay: 0.5s; animation-delay: 0.5s; -webkit-animation-fill-mode: both; animation-fill-mode: both } #page-game [id="sec-cate-6"].aos-animate [class*="char"] { -webkit-animation-name: show-pop; animation-name: show-pop; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); -webkit-animation-delay: 0.9s; animation-delay: 0.9s; -webkit-animation-fill-mode: both; animation-fill-mode: both } #page-game [id="sec-cate-6"].aos-animate [class*="fuki"] { -webkit-transform-origin: 20% 100%; transform-origin: 20% 100%; -webkit-animation-name: show-pop; animation-name: show-pop; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 1.1s; animation-delay: 1.1s } #page-game [id="sec-cate-6"].aos-animate [class*="star"] { -webkit-animation-name: show-pop; animation-name: show-pop; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 1.2s; animation-delay: 1.2s } #page-game [id="sec-cate-7"].aos-animate [class*="thumbnail-0"] { -webkit-animation-name: show-right; animation-name: show-right; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 0.4s; animation-delay: 0.4s } #page-game [id="sec-cate-7"].aos-animate [class*="thumbnail-1"] { -webkit-animation-name: show-right; animation-name: show-right; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); -webkit-animation-fill-mode: both; animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 0.5s; animation-delay: 0.5s } #page-game [id="sec-cate-7"].aos-animate [class*="char"] { -webkit-animation-name: show-pop; animation-name: show-pop; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); -webkit-animation-delay: 0.9s; animation-delay: 0.9s; -webkit-animation-fill-mode: both; animation-fill-mode: both } #page-game [id="sec-cate-7"].aos-animate [class*="fuki"] { -webkit-transform-origin: 80% 100%; transform-origin: 80% 100%; -webkit-animation-name: show-pop; animation-name: show-pop; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 1.1s; animation-delay: 1.1s } #page-game [id="sec-cate-7"].aos-animate [class*="star"] { -webkit-animation-name: show-pop; animation-name: show-pop; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 1.2s; animation-delay: 1.2s } #page-game [id="sec-cate-8"].aos-animate [class*="thumbnail-0"] { -webkit-animation-name: show-left; animation-name: show-left; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); -webkit-animation-delay: 0.4s; animation-delay: 0.4s; -webkit-animation-fill-mode: both; animation-fill-mode: both } #page-game [id="sec-cate-8"].aos-animate [class*="thumbnail-1"] { -webkit-animation-name: show-left; animation-name: show-left; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); -webkit-animation-delay: 0.5s; animation-delay: 0.5s; -webkit-animation-fill-mode: both; animation-fill-mode: both } #page-game [id="sec-cate-8"].aos-animate [class*="char"] { -webkit-animation-name: show-pop; animation-name: show-pop; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); -webkit-animation-delay: 0.9s; animation-delay: 0.9s; -webkit-animation-fill-mode: both; animation-fill-mode: both } #page-game [id="sec-cate-8"].aos-animate [class*="fuki"] { -webkit-transform-origin: 20% 100%; transform-origin: 20% 100%; -webkit-animation-name: show-pop; animation-name: show-pop; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 1.1s; animation-delay: 1.1s } #page-game [id="sec-cate-8"].aos-animate [class*="star"] { -webkit-animation-name: show-pop; animation-name: show-pop; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 1.2s; animation-delay: 1.2s } #page-game [id="sec-cate-9"].aos-animate [class*="thumbnail-0"] { -webkit-animation-name: show-right; animation-name: show-right; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 0.4s; animation-delay: 0.4s } #page-game [id="sec-cate-9"].aos-animate [class*="thumbnail-1"] { -webkit-animation-name: show-right; animation-name: show-right; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); -webkit-animation-fill-mode: both; animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 0.5s; animation-delay: 0.5s } #page-game [id="sec-cate-9"].aos-animate [class*="char"] { -webkit-animation-name: show-pop; animation-name: show-pop; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); -webkit-animation-delay: 0.9s; animation-delay: 0.9s; -webkit-animation-fill-mode: both; animation-fill-mode: both } #page-game [id="sec-cate-9"].aos-animate [class*="fuki"] { -webkit-transform-origin: 80% 100%; transform-origin: 80% 100%; -webkit-animation-name: show-pop; animation-name: show-pop; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 1.1s; animation-delay: 1.1s } #page-game [id="sec-cate-9"].aos-animate [class*="star"] { -webkit-animation-name: show-pop; animation-name: show-pop; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 1.2s; animation-delay: 1.2s } #page-game [id^="sec-cate"] [class*="thumbnail-0"] { opacity: 0 } #page-game [id^="sec-cate"] [class*="thumbnail-1"] { opacity: 0 } #page-game section { position: relative } #page-game .wrapper { position: relative; z-index: 10101; top: 0; left: 0; width: 100%; max-width: 1400px; height: auto; margin-right: auto; margin-left: auto } #page-game .yellow-bg { background-color: #fff691 } @media screen and (min-width: 1401px) { #page-game .yellow-bg:before { content: ""; position: absolute; z-index: 0; bottom: 0; left: 50%; width: 100vw; height: 100%; margin-left: -50vw; pointer-events: none; background-color: #fff691; background-image: url(../images/game/bg-up.jpg?imbypass=true),url(../images/game/bg-dn.jpg?imbypass=true); background-repeat: repeat-x; background-position: 50% 0%,50% 100%; background-size: auto 558.90625px,auto 557.8125px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-game .yellow-bg:before { content: ""; position: absolute; z-index: 0; bottom: 0; left: 50%; width: 100vw; height: 100%; margin-left: -50vw; pointer-events: none; background-color: #fff691; background-image: url(../images/game/bg-up.jpg?imbypass=true),url(../images/game/bg-dn.jpg?imbypass=true); background-repeat: repeat-x; background-position: 50% 0%,50% 100%; background-size: auto 39.92188vw,auto 39.84375vw } } @media screen and (max-width: 750px) { #page-game .yellow-bg { background-image: url(../images/game/bg-up_sp.jpg),url(../images/game/bg-dn_sp.jpg); background-repeat: no-repeat; background-position: 0 0,0 100%; background-size: 100% auto,100% auto } } @media screen and (min-width: 1401px) { #page-game #sec-kv { height: 449.53125px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-game #sec-kv { height: 32.10938vw } } @media screen and (max-width: 750px) { #page-game #sec-kv { height: 53.73333vw } } #page-game .ttl-fuki { position: absolute } @media screen and (min-width: 1401px) { #page-game .ttl-fuki { top: 24.0625px; left: 350px; width: 274.53125px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-game .ttl-fuki { top: 1.71875vw; left: 25vw; width: 19.60938vw } } @media screen and (max-width: 750px) { #page-game .ttl-fuki { top: 8vw; left: 39.46667vw; width: 34.13333vw } } #page-game .ttl-fuki.aos-animate .full-x { -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-animation-name: shake; animation-name: shake; -webkit-animation-duration: 2s; animation-duration: 2s; -webkit-animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); -webkit-animation-delay: 3.1s; animation-delay: 3.1s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-fill-mode: both; animation-fill-mode: both } #page-game .ttl-0 { position: absolute } @media screen and (min-width: 1401px) { #page-game .ttl-0 { top: 166.25px; left: 254.84375px; width: 890.3125px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-game .ttl-0 { top: 11.875vw; left: 18.20312vw; width: 63.59375vw } } @media screen and (max-width: 750px) { #page-game .ttl-0 { top: 24.4vw; left: 8.93333vw; width: 82.26667vw } } #page-game .ttl-1 { position: absolute } @media screen and (min-width: 1401px) { #page-game .ttl-1 { top: 281.09375px; left: 293.125px; width: 812.65625px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-game .ttl-1 { top: 20.07812vw; left: 20.9375vw; width: 58.04688vw } } @media screen and (max-width: 750px) { #page-game .ttl-1 { top: 35.86667vw; left: 4.13333vw; width: 92.13333vw } } @media screen and (min-width: 1401px) { #page-game section[id^="sec-cate"] { height: 453.90625px } #page-game section[id^="sec-cate"]#sec-cate-8 { height: 582.96875px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-game section[id^="sec-cate"] { height: 32.42188vw } #page-game section[id^="sec-cate"]#sec-cate-8 { height: 41.64062vw } } @media screen and (max-width: 750px) { #page-game section[id^="sec-cate"] { height: 91.33333vw } #page-game section[id^="sec-cate"]#sec-cate-8 { height: 108.4vw } } @media screen and (min-width: 1401px) { #page-game section .cate-1-thumbnail-0 { left: 140px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-game section .cate-1-thumbnail-0 { left: 10vw } } @media screen and (max-width: 750px) { #page-game section .cate-1-thumbnail-0 { top: 13.6vw; left: 5.33333vw } } @media screen and (min-width: 1401px) { #page-game section .cate-1-thumbnail-1 { left: 633.28125px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-game section .cate-1-thumbnail-1 { left: 45.23438vw } } @media screen and (max-width: 750px) { #page-game section .cate-1-thumbnail-1 { top: 49.2vw; left: 5.33333vw } } @media screen and (min-width: 1401px) { #page-game section .cate-3-thumbnail-0 { left: 140px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-game section .cate-3-thumbnail-0 { left: 10vw } } @media screen and (max-width: 750px) { #page-game section .cate-3-thumbnail-0 { top: 13.6vw; left: 5.33333vw } } @media screen and (min-width: 1401px) { #page-game section .cate-3-thumbnail-1 { left: 633.28125px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-game section .cate-3-thumbnail-1 { left: 45.23438vw } } @media screen and (max-width: 750px) { #page-game section .cate-3-thumbnail-1 { top: 49.2vw; left: 5.33333vw } } @media screen and (min-width: 1401px) { #page-game section .cate-5-thumbnail-0 { left: 140px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-game section .cate-5-thumbnail-0 { left: 10vw } } @media screen and (max-width: 750px) { #page-game section .cate-5-thumbnail-0 { top: 13.6vw; left: 5.33333vw } } @media screen and (min-width: 1401px) { #page-game section .cate-5-thumbnail-1 { left: 633.28125px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-game section .cate-5-thumbnail-1 { left: 45.23438vw } } @media screen and (max-width: 750px) { #page-game section .cate-5-thumbnail-1 { top: 49.2vw; left: 5.33333vw } } @media screen and (min-width: 1401px) { #page-game section .cate-7-thumbnail-0 { left: 140px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-game section .cate-7-thumbnail-0 { left: 10vw } } @media screen and (max-width: 750px) { #page-game section .cate-7-thumbnail-0 { top: 13.6vw; left: 5.33333vw } } @media screen and (min-width: 1401px) { #page-game section .cate-7-thumbnail-1 { left: 633.28125px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-game section .cate-7-thumbnail-1 { left: 45.23438vw } } @media screen and (max-width: 750px) { #page-game section .cate-7-thumbnail-1 { top: 49.2vw; left: 5.33333vw } } @media screen and (min-width: 1401px) { #page-game section .cate-0-thumbnail-0 { left: 288.75px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-game section .cate-0-thumbnail-0 { left: 20.625vw } } @media screen and (max-width: 750px) { #page-game section .cate-0-thumbnail-0 { top: 13.6vw; left: 36.53333vw } } @media screen and (min-width: 1401px) { #page-game section .cate-0-thumbnail-1 { left: 783.125px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-game section .cate-0-thumbnail-1 { left: 55.9375vw } } @media screen and (max-width: 750px) { #page-game section .cate-0-thumbnail-1 { top: 49.2vw; left: 36.53333vw } } @media screen and (min-width: 1401px) { #page-game section .cate-2-thumbnail-0 { left: 288.75px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-game section .cate-2-thumbnail-0 { left: 20.625vw } } @media screen and (max-width: 750px) { #page-game section .cate-2-thumbnail-0 { top: 13.6vw; left: 36.53333vw } } @media screen and (min-width: 1401px) { #page-game section .cate-2-thumbnail-1 { left: 783.125px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-game section .cate-2-thumbnail-1 { left: 55.9375vw } } @media screen and (max-width: 750px) { #page-game section .cate-2-thumbnail-1 { top: 49.2vw; left: 36.53333vw } } @media screen and (min-width: 1401px) { #page-game section .cate-4-thumbnail-0 { left: 288.75px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-game section .cate-4-thumbnail-0 { left: 20.625vw } } @media screen and (max-width: 750px) { #page-game section .cate-4-thumbnail-0 { top: 13.6vw; left: 36.53333vw } } @media screen and (min-width: 1401px) { #page-game section .cate-4-thumbnail-1 { left: 783.125px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-game section .cate-4-thumbnail-1 { left: 55.9375vw } } @media screen and (max-width: 750px) { #page-game section .cate-4-thumbnail-1 { top: 49.2vw; left: 36.53333vw } } @media screen and (min-width: 1401px) { #page-game section .cate-6-thumbnail-0 { left: 288.75px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-game section .cate-6-thumbnail-0 { left: 20.625vw } } @media screen and (max-width: 750px) { #page-game section .cate-6-thumbnail-0 { top: 13.6vw; left: 36.53333vw } } @media screen and (min-width: 1401px) { #page-game section .cate-6-thumbnail-1 { left: 783.125px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-game section .cate-6-thumbnail-1 { left: 55.9375vw } } @media screen and (max-width: 750px) { #page-game section .cate-6-thumbnail-1 { top: 49.2vw; left: 36.53333vw } } @media screen and (min-width: 1401px) { #page-game section .cate-8-thumbnail-0 { left: 288.75px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-game section .cate-8-thumbnail-0 { left: 20.625vw } } @media screen and (max-width: 750px) { #page-game section .cate-8-thumbnail-0 { top: 13.6vw; left: 36.53333vw } } @media screen and (min-width: 1401px) { #page-game section .cate-8-thumbnail-1 { left: 783.125px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-game section .cate-8-thumbnail-1 { left: 55.9375vw } } @media screen and (max-width: 750px) { #page-game section .cate-8-thumbnail-1 { top: 49.2vw; left: 36.53333vw } } #page-game section [class^="cate"][class*="fuki"] { position: absolute } #page-game section [class^="cate"][class*="char"] { position: absolute } #page-game section [class^="cate"][class*="star"] { position: absolute } #page-game section [class^="cate"][class*="thumbnail"] { position: absolute } @media screen and (min-width: 1401px) { #page-game section [class^="cate"][class*="thumbnail"] { top: 110.46875px; width: 476.875px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-game section [class^="cate"][class*="thumbnail"] { top: 7.89062vw; width: 34.0625vw } } @media screen and (max-width: 750px) { #page-game section [class^="cate"][class*="thumbnail"] { width: 58.13333vw } } #page-game section [class^="cate"][class*="ttl"] { position: absolute } @media screen and (min-width: 1401px) { #page-game section [class^="cate"][class*="ttl"] { top: -7.65625px; left: 132.34375px; width: 1135.3125px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-game section [class^="cate"][class*="ttl"] { top: -0.54688vw; left: 9.45312vw; width: 81.09375vw } } @media screen and (max-width: 750px) { #page-game section [class^="cate"][class*="ttl"] { top: 0vw; left: 5.33333vw; width: 89.33333vw } } @media screen and (min-width: 1401px) { #page-game .cate-0-star { top: 62.34375px; left: 21.875px; width: 219.84375px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-game .cate-0-star { top: 4.45312vw; left: 1.5625vw; width: 15.70313vw } } @media screen and (max-width: 750px) { #page-game .cate-0-star { top: 33.33333vw; left: 1.6vw; width: 23.06667vw } } @media screen and (min-width: 1401px) { #page-game .cate-1-star { top: 35px; left: 1157.1875px; width: 199.0625px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-game .cate-1-star { top: 2.5vw; left: 82.65625vw; width: 14.21875vw } } @media screen and (max-width: 750px) { #page-game .cate-1-star { top: 36.53333vw; left: 72.53333vw; width: 23.06667vw } } @media screen and (min-width: 1401px) { #page-game .cate-2-star { top: 38.28125px; left: 14.21875px; width: 250.46875px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-game .cate-2-star { top: 2.73438vw; left: 1.01562vw; width: 17.89062vw } } @media screen and (max-width: 750px) { #page-game .cate-2-star { top: 35.86667vw; left: 2.53333vw; width: 28.4vw } } @media screen and (min-width: 1401px) { #page-game .cate-3-star { top: 60.15625px; left: 1149.53125px; width: 197.96875px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-game .cate-3-star { top: 4.29688vw; left: 82.10938vw; width: 14.14063vw } } @media screen and (max-width: 750px) { #page-game .cate-3-star { top: 46.4vw; left: 74vw; width: 24.13333vw } } @media screen and (min-width: 1401px) { #page-game .cate-4-star { top: 219.84375px; left: 64.53125px; width: 149.84375px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-game .cate-4-star { top: 15.70313vw; left: 4.60938vw; width: 10.70312vw } } @media screen and (max-width: 750px) { #page-game .cate-4-star { top: 54.66667vw; left: 2.93333vw; width: 20.8vw } } @media screen and (min-width: 1401px) { #page-game .cate-5-star { top: 181.5625px; left: 1192.1875px; width: 180.46875px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-game .cate-5-star { top: 12.96875vw; left: 85.15625vw; width: 12.89062vw } } @media screen and (max-width: 750px) { #page-game .cate-5-star { top: 48.13333vw; right: 0vw; width: 18.26667vw } } @media screen and (min-width: 1401px) { #page-game .cate-6-star { top: 85.3125px; left: 36.09375px; width: 181.5625px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-game .cate-6-star { top: 6.09375vw; left: 2.57812vw; width: 12.96875vw } } @media screen and (max-width: 750px) { #page-game .cate-6-star { top: 38.4vw; left: 0vw; width: 19.86667vw } } @media screen and (min-width: 1401px) { #page-game .cate-7-star { top: 50.3125px; left: 1168.125px; width: 218.75px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-game .cate-7-star { top: 3.59375vw; left: 83.4375vw; width: 15.625vw } } @media screen and (max-width: 750px) { #page-game .cate-7-star { top: 38.93333vw; right: 0vw; width: 23.06667vw } } @media screen and (min-width: 1401px) { #page-game .cate-8-star { top: 191.40625px; left: 71.09375px; width: 165.15625px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-game .cate-8-star { top: 13.67188vw; left: 5.07812vw; width: 11.79688vw } } @media screen and (max-width: 750px) { #page-game .cate-8-star { top: 58vw; left: 6.4vw; width: 20.13333vw } } @media screen and (min-width: 1401px) { #page-game .cate-0-fuki { top: -52.5px; left: 172.8125px; width: 267.96875px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-game .cate-0-fuki { top: -3.75vw; left: 12.34375vw; width: 19.14062vw } } @media screen and (max-width: 750px) { #page-game .cate-0-fuki { top: 11.46667vw; left: 5.2vw; width: 38.66667vw } } @media screen and (min-width: 1401px) { #page-game .cate-1-fuki { top: -65.625px; left: 984.375px; width: 255.9375px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-game .cate-1-fuki { top: -4.6875vw; left: 70.3125vw; width: 18.28125vw } } @media screen and (max-width: 750px) { #page-game .cate-1-fuki { top: 13.46667vw; left: 55.73333vw; width: 38.66667vw } } @media screen and (min-width: 1401px) { #page-game .cate-2-fuki { top: -44.84375px; left: 172.8125px; width: 283.28125px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-game .cate-2-fuki { top: -3.20312vw; left: 12.34375vw; width: 20.23438vw } } @media screen and (max-width: 750px) { #page-game .cate-2-fuki { top: 11.46667vw; left: 5.33333vw; width: 43.6vw } } @media screen and (min-width: 1401px) { #page-game .cate-3-fuki { top: -29.53125px; left: 964.6875px; width: 267.96875px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-game .cate-3-fuki { top: -2.10938vw; left: 68.90625vw; width: 19.14062vw } } @media screen and (max-width: 750px) { #page-game .cate-3-fuki { top: 18.13333vw; left: 52vw; width: 42.66667vw } } @media screen and (min-width: 1401px) { #page-game .cate-4-fuki { top: 2.1875px; left: 168.4375px; width: 275.625px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-game .cate-4-fuki { top: 0.15625vw; left: 12.03125vw; width: 19.6875vw } } @media screen and (max-width: 750px) { #page-game .cate-4-fuki { top: 22.13333vw; left: 6.4vw; width: 40vw } } @media screen and (min-width: 1401px) { #page-game .cate-5-fuki { top: 12.03125px; left: 1030.3125px; width: 263.59375px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-game .cate-5-fuki { top: 0.85938vw; left: 73.59375vw; width: 18.82812vw } } @media screen and (max-width: 750px) { #page-game .cate-5-fuki { top: 17.86667vw; left: 54.26667vw; width: 40.4vw } } @media screen and (min-width: 1401px) { #page-game .cate-6-fuki { top: -56.875px; left: 206.71875px; width: 250.46875px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-game .cate-6-fuki { top: -4.0625vw; left: 14.76562vw; width: 17.89062vw } } @media screen and (max-width: 750px) { #page-game .cate-6-fuki { top: 13.46667vw; left: 6.66667vw; width: 38.66667vw } } @media screen and (min-width: 1401px) { #page-game .cate-7-fuki { top: -45.9375px; left: 975.625px; width: 259.21875px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-game .cate-7-fuki { top: -3.28125vw; left: 69.6875vw; width: 18.51562vw } } @media screen and (max-width: 750px) { #page-game .cate-7-fuki { top: 14vw; left: 56.13333vw; width: 38.4vw } } @media screen and (min-width: 1401px) { #page-game .cate-8-fuki { top: -28.4375px; left: 161.875px; width: 281.09375px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-game .cate-8-fuki { top: -2.03125vw; left: 11.5625vw; width: 20.07812vw } } @media screen and (max-width: 750px) { #page-game .cate-8-fuki { top: 23.86667vw; left: 5.2vw; width: 41.33333vw } } @media screen and (min-width: 1401px) { #page-game .cate-0-char { top: 140px; left: 29.53125px; width: 309.53125px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-game .cate-0-char { top: 10vw; left: 2.10938vw; width: 22.10938vw } } @media screen and (max-width: 750px) { #page-game .cate-0-char { top: 40.8vw; left: 5.73333vw; width: 36vw } } @media screen and (min-width: 1401px) { #page-game .cate-1-char { top: 129.0625px; left: 1127.65625px; width: 197.96875px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-game .cate-1-char { top: 9.21875vw; left: 80.54688vw; width: 14.14063vw } } @media screen and (max-width: 750px) { #page-game .cate-1-char { top: 41.33333vw; left: 68.4vw; width: 18.8vw } } @media screen and (min-width: 1401px) { #page-game .cate-2-char { top: 145.46875px; left: 24.0625px; width: 394.84375px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-game .cate-2-char { top: 10.39062vw; left: 1.71875vw; width: 28.20312vw } } @media screen and (max-width: 750px) { #page-game .cate-2-char { top: 46.53333vw; left: 2.13333vw; width: 42.93333vw } } @media screen and (min-width: 1401px) { #page-game .cate-3-char { top: 168.4375px; left: 1120px; width: 167.34375px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-game .cate-3-char { top: 12.03125vw; left: 80vw; width: 11.95312vw } } @media screen and (max-width: 750px) { #page-game .cate-3-char { top: 51.86667vw; left: 67.2vw; width: 24vw } } @media screen and (min-width: 1401px) { #page-game .cate-4-char { top: 223.125px; left: 134.53125px; width: 154.21875px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-game .cate-4-char { top: 15.9375vw; left: 9.60938vw; width: 11.01562vw } } @media screen and (max-width: 750px) { #page-game .cate-4-char { top: 56.8vw; left: 10.26667vw; width: 21.33333vw } } @media screen and (min-width: 1401px) { #page-game .cate-5-char { top: 172.8125px; left: 954.84375px; width: 394.84375px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-game .cate-5-char { top: 12.34375vw; left: 68.20312vw; width: 28.20312vw } } @media screen and (max-width: 750px) { #page-game .cate-5-char { top: 49.33333vw; left: 55.86667vw; width: 44.13333vw } } @media screen and (min-width: 1401px) { #page-game .cate-6-char { top: 31.71875px; left: 111.5625px; width: 204.53125px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-game .cate-6-char { top: 2.26562vw; left: 7.96875vw; width: 14.60938vw } } @media screen and (max-width: 750px) { #page-game .cate-6-char { top: 36.93333vw; left: 8.4vw; width: 24.93333vw } } @media screen and (min-width: 1401px) { #page-game .cate-7-char { top: 119.21875px; left: 1112.34375px; width: 216.5625px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-game .cate-7-char { top: 8.51562vw; left: 79.45312vw; width: 15.46875vw } } @media screen and (max-width: 750px) { #page-game .cate-7-char { top: 44.66667vw; left: 65.6vw; width: 26.4vw } } @media screen and (min-width: 1401px) { #page-game .cate-8-char { top: 193.59375px; left: 115.9375px; width: 148.75px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-game .cate-8-char { top: 13.82812vw; left: 8.28125vw; width: 10.625vw } } @media screen and (max-width: 750px) { #page-game .cate-8-char { top: 58.4vw; left: 10.26667vw; width: 21.6vw } } #page-game .more-ttl { position: absolute } @media screen and (min-width: 1401px) { #page-game .more-ttl { top: -122.5px; left: 450.625px; width: 556.71875px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-game .more-ttl { top: -8.75vw; left: 32.1875vw; width: 39.76562vw } } @media screen and (max-width: 750px) { #page-game .more-ttl { top: -13.06667vw; left: 21.6vw; width: 63.06667vw } } #page-game .more-pic { overflow: hidden; background-color: #000 } @media screen and (min-width: 1401px) { #page-game .more-pic { top: 0px; left: 50%; width: 100vw; height: 358.75px; margin-left: -50vw } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-game .more-pic { top: 0vw; left: 0vw; width: 100vw; height: 25.625vw } } @media screen and (max-width: 750px) { #page-game .more-pic { top: 0vw; left: 0vw; width: 100vw; height: 43.73333vw } } #page-game .on-parade { position: absolute; background-size: auto 100% } @media screen and (min-width: 1401px) { #page-game .on-parade { width: 2736.5625px; height: 175px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-game .on-parade { width: 195.46875vw; height: 12.5vw } } @media screen and (max-width: 750px) { #page-game .on-parade { width: 333.6vw; height: 21.33333vw } } #page-game .on-parade:before { position: absolute; background-size: auto 100% } @media screen and (min-width: 1401px) { #page-game .on-parade.on-parade-0 { top: 0px; left: 0px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-game .on-parade.on-parade-0 { top: 0vw; left: 0vw } } @media screen and (max-width: 750px) { #page-game .on-parade.on-parade-0 { top: 0vw; left: 0vw } } #page-game .on-parade.on-parade-0:before { content: ""; position: absolute; top: 0; left: 0; display: block; width: 400%; height: 100%; -webkit-animation-name: on-parade-0; animation-name: on-parade-0; -webkit-animation-duration: 64s; animation-duration: 64s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; background-image: url(../images/game/on-parade-0.png?imbypass=true); -webkit-animation-fill-mode: both; animation-fill-mode: both } @media screen and (min-width: 1401px) { #page-game .on-parade.on-parade-1 { top: 175px; left: 0px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-game .on-parade.on-parade-1 { top: 12.5vw; left: 0vw } } @media screen and (max-width: 750px) { #page-game .on-parade.on-parade-1 { top: 21.33333vw; left: 0vw } } #page-game .on-parade.on-parade-1:before { content: ""; position: absolute; top: 0; right: 0; display: block; width: 400%; height: 100%; -webkit-animation-name: on-parade-1; animation-name: on-parade-1; -webkit-animation-duration: 68s; animation-duration: 68s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; background-image: url(../images/game/on-parade-1.png?imbypass=true); -webkit-animation-fill-mode: both; animation-fill-mode: both } @media screen and (min-width: 1401px) { #page-game #sec-more { z-index: 1; height: 427.65625px } #page-game #sec-more:before { content: ""; position: absolute; z-index: 0; bottom: 0; left: 50%; width: 100vw; height: 100%; margin-left: -50vw; pointer-events: none; background-color: #fff691; background-image: url(../images/game/bg-dn.jpg?imbypass=true); background-repeat: repeat-x; background-position: 50% 100%; background-size: auto 557.8125px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-game #sec-more { z-index: 1; height: 30.54688vw } #page-game #sec-more:before { content: ""; position: absolute; z-index: 0; bottom: 0; left: 50%; width: 100vw; height: 100%; margin-left: -50vw; pointer-events: none; background-color: #fff691; background-image: url(../images/game/bg-dn.jpg?imbypass=true); background-repeat: repeat-x; background-position: 50% 100%; background-size: auto 39.84375vw } } @media screen and (max-width: 750px) { #page-game #sec-more { height: 52.13333vw; background-image: url(../images/game/bg-dn_sp.jpg); background-repeat: no-repeat; background-position: 0 100%; background-size: 100% auto } } @media screen and (min-width: 1401px) { #page-game #sec-zukan-mode { height: 476.875px } #page-game #sec-zukan-mode:before { content: ""; position: absolute; z-index: 0; bottom: 0; left: 50%; width: 100vw; height: 100%; margin-left: -50vw; pointer-events: none; background-color: #fff691; background-image: url(../images/game/zukan-mode-bg.jpg?imbypass=true); background-repeat: repeat-x; background-position: 50% 100%; background-size: auto 476.875px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-game #sec-zukan-mode { height: 34.0625vw } #page-game #sec-zukan-mode:before { content: ""; position: absolute; z-index: 0; bottom: 0; left: 50%; width: 100vw; height: 100%; margin-left: -50vw; pointer-events: none; background-color: #fff691; background-image: url(../images/game/zukan-mode-bg.jpg?imbypass=true); background-repeat: repeat-x; background-position: 50% 100%; background-size: auto 34.0625vw } } @media screen and (max-width: 750px) { #page-game #sec-zukan-mode { height: 105.2vw; background-image: url(../images/game/zukan-mode-bg_sp.jpg); background-repeat: no-repeat; background-position: 0 100%; background-size: cover } } #page-game .zukan-star { position: absolute; z-index: 0; background-image: url(../images/game/zukan-star.png) } @media screen and (min-width: 1401px) { #page-game .zukan-star { top: -129.0625px; left: 1094.84375px; width: 306.25px; height: 319.375px; background-size: 100% 100% } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-game .zukan-star { top: -9.21875vw; left: 78.20312vw; width: 21.875vw; height: 22.8125vw; background-size: 100% 100% } } #page-game .zukan-mode-ttl { position: absolute } @media screen and (min-width: 1401px) { #page-game .zukan-mode-ttl { top: 105px; left: 140px; width: 444.0625px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-game .zukan-mode-ttl { top: 7.5vw; left: 10vw; width: 31.71875vw } } @media screen and (max-width: 750px) { #page-game .zukan-mode-ttl { top: 7.6vw; left: 25.06667vw; width: 50.26667vw } } #page-game .zukan-mode-w { position: absolute } @media screen and (min-width: 1401px) { #page-game .zukan-mode-w { top: 213.28125px; left: 187.03125px; width: 354.375px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-game .zukan-mode-w { top: 15.23438vw; left: 13.35938vw; width: 25.3125vw } } @media screen and (max-width: 750px) { #page-game .zukan-mode-w { top: 76.26667vw; left: 13.06667vw; width: 74.13333vw } } #page-game .zukan-mode-pic { position: absolute } @media screen and (min-width: 1401px) { #page-game .zukan-mode-pic { top: 67.8125px; left: 674.84375px; width: 586.25px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-game .zukan-mode-pic { top: 4.84375vw; left: 48.20312vw; width: 41.875vw } } @media screen and (max-width: 750px) { #page-game .zukan-mode-pic { top: 21.06667vw; left: 5.33333vw; width: 89.33333vw } } #page-game .zukan-mode-char { position: absolute } @media screen and (min-width: 1401px) { #page-game .zukan-mode-char { top: 180.46875px; left: 1186.71875px; width: 138.90625px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-game .zukan-mode-char { top: 12.89062vw; left: 84.76562vw; width: 9.92188vw } } @media screen and (max-width: 750px) { #page-game .zukan-mode-char { top: 56.66667vw; left: 82.26667vw; width: 16.93333vw } } #page-character section { position: relative } #page-character .wrapper { position: relative; z-index: 10101; top: 0; left: 0; width: 100%; max-width: 1400px; height: auto; margin-right: auto; margin-left: auto } @media screen and (min-width: 1401px) { #page-character .white-bg:before { content: ""; position: absolute; z-index: 0; bottom: 0; left: 50%; width: 100vw; height: 100%; margin-left: -50vw; pointer-events: none; background-color: #fff; background-image: url(../images/character/bg-tri.png),url(../images/character/bg-w-up.jpg?imbypass=true),url(../images/character/bg-w-dn.jpg?imbypass=true); background-repeat: no-repeat,repeat-x,repeat-x; background-position: calc(50vw - 160.78125px) 316.09375px,50% 0%,50% 100%; background-size: 1538.90625px auto,auto 702.1875px,auto 683.59375px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-character .white-bg:before { content: ""; position: absolute; z-index: 0; bottom: 0; left: 50%; width: 100vw; height: 100%; margin-left: -50vw; pointer-events: none; background-color: #fff; background-image: url(../images/character/bg-tri.png),url(../images/character/bg-w-up.jpg?imbypass=true),url(../images/character/bg-w-dn.jpg?imbypass=true); background-repeat: no-repeat,repeat-x,repeat-x; background-position: 38.51562vw 22.57812vw,50% 0%,50% 100%; background-size: 109.92187vw auto,auto 50.15625vw,auto 48.82812vw } } @media screen and (max-width: 750px) { #page-character .white-bg { background-image: url(../images/character/bg-tri_sp.png),url(../images/character/bg-w-up_sp.jpg),url(../images/character/bg-w-dn_sp.jpg); background-repeat: no-repeat; background-position: 100% 131.06667vw,0 0,0 100%; background-size: 83.2vw auto,100% auto,100% auto } } @media screen and (min-width: 1401px) { #page-character #sec-kv { height: 625.625px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-character #sec-kv { height: 44.6875vw } } @media screen and (max-width: 750px) { #page-character #sec-kv { height: 153.46667vw } } #page-character .ttl { position: absolute } @media screen and (min-width: 1401px) { #page-character .ttl { top: 79.84375px; left: 495.46875px; width: 414.53125px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-character .ttl { top: 5.70312vw; left: 35.39062vw; width: 29.60938vw } } @media screen and (max-width: 750px) { #page-character .ttl { top: 22.8vw; left: 24.93333vw; width: 50.53333vw } } #page-character .kv-movie-bg { position: absolute } @media screen and (min-width: 1401px) { #page-character .kv-movie-bg { top: 255.9375px; left: 140px; width: 1117.8125px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-character .kv-movie-bg { top: 18.28125vw; left: 10vw; width: 79.84375vw } } @media screen and (max-width: 750px) { #page-character .kv-movie-bg { top: 46.4vw; left: 2.66667vw; width: 94.66667vw } } #page-character .kv-movie-bg p { position: absolute; font-family: 'Noto Sans JP',sans-serif; font-weight: bold; color: #fff } @media screen and (min-width: 1401px) { #page-character .kv-movie-bg p { top: 32.8125px; left: 602.65625px; width: 517.34375px; font-size: 17.5px; line-height: 1.5625 } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-character .kv-movie-bg p { top: 2.34375vw; left: 43.04688vw; width: 36.95312vw; font-size: 1.25vw; line-height: 1.5625 } } @media screen and (max-width: 750px) { #page-character .kv-movie-bg p { top: 59.2vw; left: 0; width: 100%; font-size: 3.2vw; line-height: 1.33333; text-align: center } } #page-character .kv-movie-fuki { position: absolute } @media screen and (min-width: 1401px) { #page-character .kv-movie-fuki { top: 206.71875px; left: 169.53125px; width: 535.9375px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-character .kv-movie-fuki { top: 14.76562vw; left: 12.10938vw; width: 38.28125vw } } @media screen and (max-width: 750px) { #page-character .kv-movie-fuki { top: 41.2vw; left: 8.66667vw; width: 82.66667vw } } #page-character .kv-movie-frame { position: absolute; cursor: pointer; background-image: url(../images/character/kv-movie-thumbnail.png); background-size: 100% 100% } @media screen and (min-width: 1401px) { #page-character .kv-movie-frame { top: 44.84375px; left: 44.84375px; width: 500.9375px; height: 281.09375px; border-radius: 5.46875px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-character .kv-movie-frame { top: 3.20312vw; left: 3.20312vw; width: 35.78125vw; height: 20.07812vw; border-radius: 0.39062vw } } @media screen and (max-width: 750px) { #page-character .kv-movie-frame { top: 8.53333vw; left: 7.46667vw; width: 79.73333vw; height: 44.8vw; border-radius: 0.66667vw } } #page-character .kv-movie-frame[data-state="playing"] .kv-movie-play-btn { pointer-events: none; opacity: 0 } #page-character .kv-movie-frame[data-state="playing"] video { opacity: 1 } #page-character .kv-movie-frame[data-state="initial"] video { opacity: 0 } #page-character .kv-movie-frame[data-state="pause"] video { opacity: 1 } #page-character .kv-movie-frame video { position: absolute; width: 100%; height: 100%; -webkit-transition: opacity 0.3s; transition: opacity 0.3s } #page-character .kv-movie-play-btn { position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; left: 0; margin: auto; cursor: pointer; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; background-image: url(../images/character/play-icon.png); background-size: 100% 100% } @media screen and (min-width: 1401px) { #page-character .kv-movie-play-btn { width: 87.5px; height: 87.5px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-character .kv-movie-play-btn { width: 6.25vw; height: 6.25vw } } @media screen and (max-width: 750px) { #page-character .kv-movie-play-btn { width: 13.33333vw; height: 13.33333vw } } @media screen and (min-width: 1401px) { #page-character [data-state="playing"]:hover .kv-movie-pause-btn { opacity: 1 } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-character [data-state="playing"]:hover .kv-movie-pause-btn { opacity: 1 } } #page-character .kv-movie-pause-btn { position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; left: 0; margin: auto; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; pointer-events: none; opacity: 0; background-image: url(../images/character/pause-icon.png); background-size: 100% 100% } @media screen and (min-width: 1401px) { #page-character .kv-movie-pause-btn { width: 87.5px; height: 87.5px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-character .kv-movie-pause-btn { width: 6.25vw; height: 6.25vw } } @media screen and (max-width: 750px) { #page-character .kv-movie-pause-btn { display: none } } #page-character .char-carousel-arrow-box { z-index: 1 } #page-character .char-carousel-arrow-prev { position: absolute; cursor: pointer; background-image: url(../images/character/arrow-prev_sp.png); background-size: 100% 100% } @media screen and (min-width: 1401px) { #page-character .char-carousel-arrow-prev { right: 135.625px; width: 96.25px; height: 96.25px; margin: 686.875px 0 0 0 } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-character .char-carousel-arrow-prev { right: 9.6875vw; width: 6.875vw; height: 6.875vw; margin: 49.0625vw 0 0 0 } } @media screen and (max-width: 750px) { #page-character .char-carousel-arrow-prev { left: 1.06667vw; width: 11.73333vw; height: 11.73333vw; margin: 38.4vw 0 0 0 } } #page-character .char-carousel-arrow-next { position: absolute; cursor: pointer; background-image: url(../images/character/arrow-next_sp.png); background-size: 100% 100% } @media screen and (min-width: 1401px) { #page-character .char-carousel-arrow-next { right: 135.625px; width: 96.25px; height: 96.25px; margin: 587.34375px 0 0 0 } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-character .char-carousel-arrow-next { right: 9.6875vw; width: 6.875vw; height: 6.875vw; margin: 41.95312vw 0 0 0 } } @media screen and (max-width: 750px) { #page-character .char-carousel-arrow-next { right: 1.06667vw; width: 11.73333vw; height: 11.73333vw; margin: 38.4vw 0 0 0 } } #page-character .char-item { position: relative } @media screen and (min-width: 1401px) { #page-character .char-item { height: 1002.96875px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-character .char-item { height: 71.64062vw } } @media screen and (max-width: 750px) { #page-character .char-item { height: auto } } #page-character .char-item[data-char="0"] .mini-char { background-image: url(../images/character/mini-char-0.png) } @media screen and (min-width: 1401px) { #page-character .char-item[data-char="0"] .char-pic-box:before { top: -287.65625px; left: 826.875px; width: 424.375px; height: 424.375px } #page-character .char-item[data-char="0"] .char-pic-box:after { top: -5.46875px; left: 568.75px; width: 243.90625px; height: 243.90625px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-character .char-item[data-char="0"] .char-pic-box:before { top: -20.54688vw; left: 59.0625vw; width: 30.3125vw; height: 30.3125vw } #page-character .char-item[data-char="0"] .char-pic-box:after { top: -0.39062vw; left: 40.625vw; width: 17.42188vw; height: 17.42188vw } } #page-character .char-item[data-char="0"] .char-pic-box:before { background-image: url(../images/character/char-star0_1.png) } #page-character .char-item[data-char="0"] .char-pic-box:after { background-image: url(../images/character/char-star0_2.png) } #page-character .char-item[data-char="0"] .char-pic { position: absolute } @media screen and (min-width: 1401px) { #page-character .char-item[data-char="0"] .char-pic { background-image: url(../images/character/char-0.png) } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-character .char-item[data-char="0"] .char-pic { background-image: url(../images/character/char-0.png) } } @media screen and (max-width: 750px) { #page-character .char-item[data-char="0"] .char-pic { width: 100vw; height: 88.13333vw; background-image: url(../images/character/char-0_sp.png?20210825); background-size: 100% 100% } } #page-character .char-item[data-char="1"] .mini-char { background-image: url(../images/character/mini-char-1.png) } @media screen and (min-width: 1401px) { #page-character .char-item[data-char="1"] .char-pic-box:before { top: -30.625px; left: 929.6875px; width: 341.25px; height: 348.90625px } #page-character .char-item[data-char="1"] .char-pic-box:after { top: 497.65625px; left: 669.375px; width: 202.34375px; height: 202.34375px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-character .char-item[data-char="1"] .char-pic-box:before { top: -2.1875vw; left: 66.40625vw; width: 24.375vw; height: 24.92188vw } #page-character .char-item[data-char="1"] .char-pic-box:after { top: 35.54688vw; left: 47.8125vw; width: 14.45312vw; height: 14.45312vw } } #page-character .char-item[data-char="1"] .char-pic-box:before { background-image: url(../images/character/char-star1_1.png) } #page-character .char-item[data-char="1"] .char-pic-box:after { background-image: url(../images/character/char-star1_2.png) } #page-character .char-item[data-char="1"] .char-pic { position: absolute } @media screen and (min-width: 1401px) { #page-character .char-item[data-char="1"] .char-pic { background-image: url(../images/character/char-1.png) } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-character .char-item[data-char="1"] .char-pic { background-image: url(../images/character/char-1.png) } } @media screen and (max-width: 750px) { #page-character .char-item[data-char="1"] .char-pic { width: 100vw; height: 88.13333vw; background-image: url(../images/character/char-1_sp.png?20210825); background-size: 100% 100% } } #page-character .char-item[data-char="2"] .mini-char { background-image: url(../images/character/mini-char-2.png) } @media screen and (min-width: 1401px) { #page-character .char-item[data-char="2"] .char-pic-box:before { top: -222.03125px; left: 730.625px; width: 330.3125px; height: 330.3125px } #page-character .char-item[data-char="2"] .char-pic-box:after { top: 67.8125px; left: 1120px; width: 216.5625px; height: 216.5625px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-character .char-item[data-char="2"] .char-pic-box:before { top: -15.85938vw; left: 52.1875vw; width: 23.59375vw; height: 23.59375vw } #page-character .char-item[data-char="2"] .char-pic-box:after { top: 4.84375vw; left: 80vw; width: 15.46875vw; height: 15.46875vw } } #page-character .char-item[data-char="2"] .char-pic-box:before { background-image: url(../images/character/char-star2_1.png) } #page-character .char-item[data-char="2"] .char-pic-box:after { background-image: url(../images/character/char-star2_2.png) } #page-character .char-item[data-char="2"] .char-pic { position: absolute } @media screen and (min-width: 1401px) { #page-character .char-item[data-char="2"] .char-pic { background-image: url(../images/character/char-2.png) } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-character .char-item[data-char="2"] .char-pic { background-image: url(../images/character/char-2.png) } } @media screen and (max-width: 750px) { #page-character .char-item[data-char="2"] .char-pic { width: 100vw; height: 88.13333vw; background-image: url(../images/character/char-2_sp.png?20210825); background-size: 100% 100% } } #page-character .char-item[data-char="3"] .mini-char { background-image: url(../images/character/mini-char-3.png) } @media screen and (min-width: 1401px) { #page-character .char-item[data-char="3"] .char-pic-box:before { top: -127.96875px; left: 589.53125px; width: 381.71875px; height: 381.71875px } #page-character .char-item[data-char="3"] .char-pic-box:after { top: 371.875px; left: 1000.78125px; width: 259.21875px; height: 258.125px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-character .char-item[data-char="3"] .char-pic-box:before { top: -9.14062vw; left: 42.10938vw; width: 27.26562vw; height: 27.26562vw } #page-character .char-item[data-char="3"] .char-pic-box:after { top: 26.5625vw; left: 71.48438vw; width: 18.51562vw; height: 18.4375vw } } #page-character .char-item[data-char="3"] .char-pic-box:before { background-image: url(../images/character/char-star3_1.png) } #page-character .char-item[data-char="3"] .char-pic-box:after { background-image: url(../images/character/char-star3_2.png) } #page-character .char-item[data-char="3"] .char-pic { position: absolute } @media screen and (min-width: 1401px) { #page-character .char-item[data-char="3"] .char-pic { background-image: url(../images/character/char-3.png) } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-character .char-item[data-char="3"] .char-pic { background-image: url(../images/character/char-3.png) } } @media screen and (max-width: 750px) { #page-character .char-item[data-char="3"] .char-pic { width: 100vw; height: 88.13333vw; background-image: url(../images/character/char-3_sp.png?20210825); background-size: 100% 100% } } #page-character .char-item[data-char="4"] .mini-char { background-image: url(../images/character/mini-char-4.png) } @media screen and (min-width: 1401px) { #page-character .char-item[data-char="4"] .char-pic-box:before { top: -240.625px; left: 668.28125px; width: 357.65625px; height: 357.65625px } #page-character .char-item[data-char="4"] .char-pic-box:after { top: 367.5px; left: 1087.1875px; width: 243.90625px; height: 243.90625px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-character .char-item[data-char="4"] .char-pic-box:before { top: -17.1875vw; left: 47.73438vw; width: 25.54688vw; height: 25.54688vw } #page-character .char-item[data-char="4"] .char-pic-box:after { top: 26.25vw; left: 77.65625vw; width: 17.42188vw; height: 17.42188vw } } #page-character .char-item[data-char="4"] .char-pic-box:before { background-image: url(../images/character/char-star4_1.png) } #page-character .char-item[data-char="4"] .char-pic-box:after { background-image: url(../images/character/char-star4_2.png) } #page-character .char-item[data-char="4"] .char-pic { position: absolute } @media screen and (min-width: 1401px) { #page-character .char-item[data-char="4"] .char-pic { background-image: url(../images/character/char-4.png) } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-character .char-item[data-char="4"] .char-pic { background-image: url(../images/character/char-4.png) } } @media screen and (max-width: 750px) { #page-character .char-item[data-char="4"] .char-pic { width: 100vw; height: 88.13333vw; background-image: url(../images/character/char-4_sp.png?20210825); background-size: 100% 100% } } #page-character .char-item[data-char="5"] .mini-char { background-image: url(../images/character/mini-char-5.png) } @media screen and (min-width: 1401px) { #page-character .char-item[data-char="5"] .char-pic-box:before { top: 75.46875px; left: 650.78125px; width: 269.0625px; height: 267.96875px } #page-character .char-item[data-char="5"] .char-pic-box:after { top: 467.03125px; left: 995.3125px; width: 212.1875px; height: 212.1875px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-character .char-item[data-char="5"] .char-pic-box:before { top: 5.39062vw; left: 46.48438vw; width: 19.21875vw; height: 19.14062vw } #page-character .char-item[data-char="5"] .char-pic-box:after { top: 33.35938vw; left: 71.09375vw; width: 15.15625vw; height: 15.15625vw } } #page-character .char-item[data-char="5"] .char-pic-box:before { background-image: url(../images/character/char-star5_1.png) } #page-character .char-item[data-char="5"] .char-pic-box:after { background-image: url(../images/character/char-star5_2.png) } #page-character .char-item[data-char="5"] .char-pic { position: absolute } @media screen and (min-width: 1401px) { #page-character .char-item[data-char="5"] .char-pic { background-image: url(../images/character/char-5.png) } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-character .char-item[data-char="5"] .char-pic { background-image: url(../images/character/char-5.png) } } @media screen and (max-width: 750px) { #page-character .char-item[data-char="5"] .char-pic { width: 100vw; height: 88.13333vw; background-image: url(../images/character/char-5_sp.png?20210825); background-size: 100% 100% } } #page-character .char-item[data-char="6"] .mini-char { background-image: url(../images/character/mini-char-6.png) } @media screen and (min-width: 1401px) { #page-character .char-item[data-char="6"] .char-pic-box:before { top: 3.28125px; left: 892.5px; width: 296.40625px; height: 296.40625px } #page-character .char-item[data-char="6"] .char-pic-box:after { top: 297.5px; left: 1053.28125px; width: 207.8125px; height: 213.28125px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-character .char-item[data-char="6"] .char-pic-box:before { top: 0.23438vw; left: 63.75vw; width: 21.17188vw; height: 21.17188vw } #page-character .char-item[data-char="6"] .char-pic-box:after { top: 21.25vw; left: 75.23438vw; width: 14.84375vw; height: 15.23438vw } } #page-character .char-item[data-char="6"] .char-pic-box:before { background-image: url(../images/character/char-star6_1.png) } #page-character .char-item[data-char="6"] .char-pic-box:after { background-image: url(../images/character/char-star6_2.png) } #page-character .char-item[data-char="6"] .char-pic { position: absolute } @media screen and (min-width: 1401px) { #page-character .char-item[data-char="6"] .char-pic { background-image: url(../images/character/char-6.png) } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-character .char-item[data-char="6"] .char-pic { background-image: url(../images/character/char-6.png) } } @media screen and (max-width: 750px) { #page-character .char-item[data-char="6"] .char-pic { width: 100vw; height: 88.13333vw; background-image: url(../images/character/char-6_sp.png?20210825); background-size: 100% 100% } } #page-character .char-item[data-char="7"] .mini-char { background-image: url(../images/character/mini-char-7.png) } @media screen and (min-width: 1401px) { #page-character .char-item[data-char="7"] .char-pic-box:before { top: 126.875px; left: 706.5625px; width: 252.65625px; height: 252.65625px } #page-character .char-item[data-char="7"] .char-pic-box:after { top: 527.1875px; left: 1013.90625px; width: 178.28125px; height: 177.1875px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-character .char-item[data-char="7"] .char-pic-box:before { top: 9.0625vw; left: 50.46875vw; width: 18.04688vw; height: 18.04688vw } #page-character .char-item[data-char="7"] .char-pic-box:after { top: 37.65625vw; left: 72.42188vw; width: 12.73438vw; height: 12.65625vw } } #page-character .char-item[data-char="7"] .char-pic-box:before { background-image: url(../images/character/char-star7_1.png) } #page-character .char-item[data-char="7"] .char-pic-box:after { background-image: url(../images/character/char-star7_2.png) } #page-character .char-item[data-char="7"] .char-pic { position: absolute } @media screen and (min-width: 1401px) { #page-character .char-item[data-char="7"] .char-pic { background-image: url(../images/character/char-7.png) } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-character .char-item[data-char="7"] .char-pic { background-image: url(../images/character/char-7.png) } } @media screen and (max-width: 750px) { #page-character .char-item[data-char="7"] .char-pic { width: 100vw; height: 88.13333vw; background-image: url(../images/character/char-7_sp.png?20210825); background-size: 100% 100% } } #page-character .char-item[data-char="8"] .mini-char { background-image: url(../images/character/mini-char-8.png) } @media screen and (min-width: 1401px) { #page-character .char-item[data-char="8"] .char-pic-box:before { top: -175px; left: 502.03125px; width: 382.8125px; height: 382.8125px } #page-character .char-item[data-char="8"] .char-pic-box:after { top: 189.21875px; left: 1048.90625px; width: 243.90625px; height: 243.90625px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-character .char-item[data-char="8"] .char-pic-box:before { top: -12.5vw; left: 35.85938vw; width: 27.34375vw; height: 27.34375vw } #page-character .char-item[data-char="8"] .char-pic-box:after { top: 13.51562vw; left: 74.92188vw; width: 17.42188vw; height: 17.42188vw } } #page-character .char-item[data-char="8"] .char-pic-box:before { background-image: url(../images/character/char-star8_1.png) } #page-character .char-item[data-char="8"] .char-pic-box:after { background-image: url(../images/character/char-star8_2.png) } #page-character .char-item[data-char="8"] .char-pic { position: absolute } @media screen and (min-width: 1401px) { #page-character .char-item[data-char="8"] .char-pic { background-image: url(../images/character/char-8.png) } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-character .char-item[data-char="8"] .char-pic { background-image: url(../images/character/char-8.png) } } @media screen and (max-width: 750px) { #page-character .char-item[data-char="8"] .char-pic { width: 100vw; height: 88.13333vw; background-image: url(../images/character/char-8_sp.png?20210825); background-size: 100% 100% } } #page-character .char-item[data-char="9"] .mini-char { background-image: url(../images/character/mini-char-9.png) } @media screen and (min-width: 1401px) { #page-character .char-item[data-char="9"] .char-pic-box:before { top: 59.0625px; left: 652.96875px; width: 304.0625px; height: 304.0625px } #page-character .char-item[data-char="9"] .char-pic-box:after { top: 457.1875px; left: 1009.53125px; width: 238.4375px; height: 238.4375px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-character .char-item[data-char="9"] .char-pic-box:before { top: 4.21875vw; left: 46.64062vw; width: 21.71875vw; height: 21.71875vw } #page-character .char-item[data-char="9"] .char-pic-box:after { top: 32.65625vw; left: 72.10938vw; width: 17.03125vw; height: 17.03125vw } } #page-character .char-item[data-char="9"] .char-pic-box:before { background-image: url(../images/character/char-star9_1.png) } #page-character .char-item[data-char="9"] .char-pic-box:after { background-image: url(../images/character/char-star9_2.png) } #page-character .char-item[data-char="9"] .char-pic { position: absolute } @media screen and (min-width: 1401px) { #page-character .char-item[data-char="9"] .char-pic { background-image: url(../images/character/char-9.png) } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-character .char-item[data-char="9"] .char-pic { background-image: url(../images/character/char-9.png) } } @media screen and (max-width: 750px) { #page-character .char-item[data-char="9"] .char-pic { width: 100vw; height: 88.13333vw; background-image: url(../images/character/char-9_sp.png?20210825); background-size: 100% 100% } } #page-character .char-item[data-char="10"] .mini-char { background-image: url(../images/character/mini-char-10.png) } @media screen and (min-width: 1401px) { #page-character .char-item[data-char="10"] .char-pic-box:before { top: 115.9375px; left: 1069.6875px; width: 315px; height: 313.90625px } #page-character .char-item[data-char="10"] .char-pic-box:after { top: 449.53125px; left: 695.625px; width: 241.71875px; height: 241.71875px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-character .char-item[data-char="10"] .char-pic-box:before { top: 8.28125vw; left: 76.40625vw; width: 22.5vw; height: 22.42188vw } #page-character .char-item[data-char="10"] .char-pic-box:after { top: 32.10938vw; left: 49.6875vw; width: 17.26562vw; height: 17.26562vw } } #page-character .char-item[data-char="10"] .char-pic-box:before { background-image: url(../images/character/char-star10_1.png) } #page-character .char-item[data-char="10"] .char-pic-box:after { background-image: url(../images/character/char-star10_2.png) } #page-character .char-item[data-char="10"] .char-pic { position: absolute } @media screen and (min-width: 1401px) { #page-character .char-item[data-char="10"] .char-pic { background-image: url(../images/character/char-10.png) } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-character .char-item[data-char="10"] .char-pic { background-image: url(../images/character/char-10.png) } } @media screen and (max-width: 750px) { #page-character .char-item[data-char="10"] .char-pic { width: 100vw; height: 88.13333vw; background-image: url(../images/character/char-10_sp.png?20210825); background-size: 100% 100% } } #page-character .char-item[data-char="11"] .mini-char { background-image: url(../images/character/mini-char-11.png) } @media screen and (min-width: 1401px) { #page-character .char-item[data-char="11"] .char-pic-box:before { top: -263.59375px; left: 905.625px; width: 427.65625px; height: 427.65625px } #page-character .char-item[data-char="11"] .char-pic-box:after { top: 381.71875px; left: 1028.125px; width: 245px; height: 243.90625px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-character .char-item[data-char="11"] .char-pic-box:before { top: -18.82812vw; left: 64.6875vw; width: 30.54688vw; height: 30.54688vw } #page-character .char-item[data-char="11"] .char-pic-box:after { top: 27.26562vw; left: 73.4375vw; width: 17.5vw; height: 17.42188vw } } #page-character .char-item[data-char="11"] .char-pic-box:before { background-image: url(../images/character/char-star11_1.png) } #page-character .char-item[data-char="11"] .char-pic-box:after { background-image: url(../images/character/char-star11_2.png) } #page-character .char-item[data-char="11"] .char-pic { position: absolute } @media screen and (min-width: 1401px) { #page-character .char-item[data-char="11"] .char-pic { background-image: url(../images/character/char-11.png) } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-character .char-item[data-char="11"] .char-pic { background-image: url(../images/character/char-11.png) } } @media screen and (max-width: 750px) { #page-character .char-item[data-char="11"] .char-pic { width: 100vw; height: 88.13333vw; background-image: url(../images/character/char-11_sp.png?20210825); background-size: 100% 100% } } #page-character .char-item[data-char="12"] .mini-char { background-image: url(../images/character/mini-char-12.png) } @media screen and (min-width: 1401px) { #page-character .char-item[data-char="12"] .char-pic-box:before { top: -51.40625px; left: 954.84375px; width: 330.3125px; height: 322.65625px } #page-character .char-item[data-char="12"] .char-pic-box:after { top: 250.46875px; left: 1120px; width: 190.3125px; height: 190.3125px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-character .char-item[data-char="12"] .char-pic-box:before { top: -3.67188vw; left: 68.20312vw; width: 23.59375vw; height: 23.04688vw } #page-character .char-item[data-char="12"] .char-pic-box:after { top: 17.89062vw; left: 80vw; width: 13.59375vw; height: 13.59375vw } } #page-character .char-item[data-char="12"] .char-pic-box:before { background-image: url(../images/character/char-star12_1.png) } #page-character .char-item[data-char="12"] .char-pic-box:after { background-image: url(../images/character/char-star12_2.png) } #page-character .char-item[data-char="12"] .char-pic { position: absolute } @media screen and (min-width: 1401px) { #page-character .char-item[data-char="12"] .char-pic { background-image: url(../images/character/char-12.png) } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-character .char-item[data-char="12"] .char-pic { background-image: url(../images/character/char-12.png) } } @media screen and (max-width: 750px) { #page-character .char-item[data-char="12"] .char-pic { width: 100vw; height: 88.13333vw; background-image: url(../images/character/char-12_sp.png?20210825); background-size: 100% 100% } } #page-character .char-item[data-char="13"] .mini-char { background-image: url(../images/character/mini-char-13.png) } @media screen and (min-width: 1401px) { #page-character .char-item[data-char="13"] .char-pic-box:before { top: 80.9375px; left: 668.28125px; width: 311.71875px; height: 311.71875px } #page-character .char-item[data-char="13"] .char-pic-box:after { top: 516.25px; left: 989.84375px; width: 168.4375px; height: 168.4375px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-character .char-item[data-char="13"] .char-pic-box:before { top: 5.78125vw; left: 47.73438vw; width: 22.26562vw; height: 22.26562vw } #page-character .char-item[data-char="13"] .char-pic-box:after { top: 36.875vw; left: 70.70312vw; width: 12.03125vw; height: 12.03125vw } } #page-character .char-item[data-char="13"] .char-pic-box:before { background-image: url(../images/character/char-star13_1.png) } #page-character .char-item[data-char="13"] .char-pic-box:after { background-image: url(../images/character/char-star13_2.png) } #page-character .char-item[data-char="13"] .char-pic { position: absolute } @media screen and (min-width: 1401px) { #page-character .char-item[data-char="13"] .char-pic { background-image: url(../images/character/char-13.png) } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-character .char-item[data-char="13"] .char-pic { background-image: url(../images/character/char-13.png) } } @media screen and (max-width: 750px) { #page-character .char-item[data-char="13"] .char-pic { width: 100vw; height: 88.13333vw; background-image: url(../images/character/char-13_sp.png?20210825); background-size: 100% 100% } } #page-character .char-item[data-char="14"] .mini-char { background-image: url(../images/character/mini-char-14.png) } @media screen and (min-width: 1401px) { #page-character .char-item[data-char="14"] .char-pic-box:before { top: -85.3125px; left: 872.8125px; width: 352.1875px; height: 352.1875px } #page-character .char-item[data-char="14"] .char-pic-box:after { top: 377.34375px; left: 998.59375px; width: 226.40625px; height: 225.3125px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-character .char-item[data-char="14"] .char-pic-box:before { top: -6.09375vw; left: 62.34375vw; width: 25.15625vw; height: 25.15625vw } #page-character .char-item[data-char="14"] .char-pic-box:after { top: 26.95312vw; left: 71.32812vw; width: 16.17188vw; height: 16.09375vw } } #page-character .char-item[data-char="14"] .char-pic-box:before { background-image: url(../images/character/char-star14_1.png) } #page-character .char-item[data-char="14"] .char-pic-box:after { background-image: url(../images/character/char-star14_2.png) } #page-character .char-item[data-char="14"] .char-pic { position: absolute } @media screen and (min-width: 1401px) { #page-character .char-item[data-char="14"] .char-pic { background-image: url(../images/character/char-14.png) } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-character .char-item[data-char="14"] .char-pic { background-image: url(../images/character/char-14.png) } } @media screen and (max-width: 750px) { #page-character .char-item[data-char="14"] .char-pic { width: 100vw; height: 88.13333vw; background-image: url(../images/character/char-14_sp.png?20210825); background-size: 100% 100% } } #page-character .mini-char { position: absolute; z-index: 1; background-size: 100% 100% } @media screen and (min-width: 1401px) { #page-character .mini-char { top: -87.5px; left: 380.625px; width: 175px; height: 175px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-character .mini-char { top: -6.25vw; left: 27.1875vw; width: 12.5vw; height: 12.5vw } } @media screen and (max-width: 750px) { #page-character .mini-char { top: 0; right: 0; left: 0; width: 25.33333vw; height: 25.33333vw; margin: auto; margin-top: -12.66667vw } } @media screen and (min-width: 1401px) { #page-character .char-info { position: absolute; top: 95.15625px; left: 140px; width: 477.96875px; height: 748.125px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-character .char-info { position: absolute; top: 6.79687vw; left: 10vw; width: 34.14062vw; height: 53.4375vw } } @media screen and (max-width: 750px) { #page-character .char-info { position: relative; top: 0vw; left: 2.66667vw; width: 94.66667vw; height: auto; border: 1px solid #ddd; border-radius: 1.33333vw; background-color: #fff; -webkit-box-shadow: 0px 0px 0.4vw 0px rgba(0, 0, 0, 0.5); box-shadow: 0px 0px 0.4vw 0px rgba(0, 0, 0, 0.5) } #page-character .char-info.char-info-comingsoon { padding-bottom: 15.33333vw } } #page-character .char-info > div { -webkit-transition: opacity 0.5s; transition: opacity 0.5s; opacity: 0 } #page-character .character-movie-play-btn { position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; margin: auto; cursor: pointer; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; background-image: url(../images/character/play-icon.png); background-repeat: no-repeat; background-position: 50% 50% } @media screen and (min-width: 1401px) { #page-character .character-movie-play-btn { background-size: 87.5px 87.5px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-character .character-movie-play-btn { background-size: 6.25vw 6.25vw } } @media screen and (max-width: 750px) { #page-character .character-movie-play-btn { background-size: 13.33333vw 13.33333vw } } #page-character .char-info-movie-box { background-color: #000 } @media screen and (min-width: 1401px) { #page-character .char-info-movie-box { position: absolute; top: 331.40625px; left: 0px; width: 477.96875px; height: 353.28125px; border-radius: 8.75px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-character .char-info-movie-box { position: absolute; top: 23.67188vw; left: 0vw; width: 34.14062vw; height: 25.23437vw; border-radius: 0.625vw } } @media screen and (max-width: 750px) { #page-character .char-info-movie-box { position: relative; top: 0vw; left: 6.4vw; width: 81.86667vw; height: 59.33333vw; margin: 4.13333vw 0 6.8vw; border-radius: 1.06667vw } } #page-character .char-info-movie-box .video-box { position: absolute } @media screen and (max-width: 750px) { #page-character .char-info-movie-box .video-box { top: 1.06667vw; left: 1.06667vw; width: 79.73333vw; height: 44.8vw; border-radius: 0.66667vw } } #page-character .char-info-movie-box .character-movie-play-thumbnail { position: absolute } @media screen and (max-width: 750px) { #page-character .char-info-movie-box .character-movie-play-thumbnail { top: 0; left: 0; overflow: hidden; width: 79.73333vw; height: 44.8vw; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; opacity: 0; border-radius: 0.66667vw } } #page-character .char-info-movie-box .character-movie-play-thumbnail img { position: absolute; top: 0; left: 0; width: 100%; height: 100% } #page-character .char-info-movie-box video { position: absolute } @media screen and (min-width: 1401px) { #page-character .char-info-movie-box video { top: 8.75px; left: 8.75px; width: 459.375px; height: 258.125px; border-radius: 6.5625px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-character .char-info-movie-box video { top: 0.625vw; left: 0.625vw; width: 32.8125vw; height: 18.4375vw; border-radius: 0.46875vw } } @media screen and (max-width: 750px) { #page-character .char-info-movie-box video { width: 79.73333vw; height: 44.8vw; border-radius: 0.66667vw } } #page-character .char-info-movie-box video.state-initial ~ .character-movie-play-thumbnail { opacity: 1 } #page-character .char-info-movie-box video.state-playing ~ .character-movie-play-btn { opacity: 0 } #page-character.voice-playing .voice-btn { pointer-events: none } #page-character .voice-btn { position: relative; top: 0; cursor: pointer } @media screen and (min-width: 1401px) { #page-character .voice-btn { left: -5.46875px; width: 196.875px; height: 63.4375px; margin-top: 9.84375px } #page-character .voice-btn:hover:after { opacity: 1 } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-character .voice-btn { left: -0.39062vw; width: 14.0625vw; height: 4.53125vw; margin-top: 0.70312vw } #page-character .voice-btn:hover:after { opacity: 1 } } @media screen and (max-width: 750px) { #page-character .voice-btn { left: 0vw; width: 42.93333vw; height: 13.86667vw; margin: 3.33333vw auto 0 } } #page-character .voice-btn:before { content: ""; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; background-image: url(../images/character/voice-btn-off.png); background-size: 100% 100% } #page-character .voice-btn:after { content: ""; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; opacity: 0; background-image: url(../images/character/voice-btn-on.png); background-size: 100% 100% } #page-character .char-name { position: relative; top: 0; left: 0; height: auto; background-size: 100% 100% } @media screen and (min-width: 1401px) { #page-character .char-name { width: 684.6875px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-character .char-name { width: 48.90625vw } } @media screen and (max-width: 750px) { #page-character .char-name { width: 63.2vw; margin: 15.33333vw auto 0 } } #page-character .char-w { position: relative; top: 0; left: 0; height: auto; font-family: 'Noto Sans JP',sans-serif; font-weight: 900; color: #000 } @media screen and (min-width: 1401px) { #page-character .char-w { width: 120%; margin-top: 19.6875px; font-size: 19.6875px; line-height: calc(27/18) } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-character .char-w { width: 120%; margin-top: 1.40625vw; font-size: 1.40625vw; line-height: calc(27/18) } } @media screen and (max-width: 750px) { #page-character .char-w { margin-top: 3.06667vw; font-size: 3.2vw; line-height: calc(35/24); text-align: center } } #page-character .char-info-movie-w { position: absolute; bottom: 0; left: 0; -webkit-box-sizing: border-box; box-sizing: border-box; width: 100% } @media screen and (min-width: 1401px) { #page-character .char-info-movie-w { height: 85.3125px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-character .char-info-movie-w { height: 6.09375vw } } @media screen and (max-width: 750px) { #page-character .char-info-movie-w { height: 13.33333vw } } #page-character .char-info-movie-w > .full { display: table } #page-character .char-info-movie-w p { display: table-cell; font-family: 'Noto Sans JP',sans-serif; font-weight: 700; text-align: center; vertical-align: middle; word-break: break-all; color: #fff } @media screen and (min-width: 1401px) { #page-character .char-info-movie-w p { padding: 0 24.0625px; font-size: 19.6875px; line-height: calc(31/18) } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-character .char-info-movie-w p { padding: 0 1.71875vw; font-size: 1.40625vw; line-height: calc(31/18) } } @media screen and (max-width: 750px) { #page-character .char-info-movie-w p { font-size: 3.2vw; line-height: calc(35/24); text-align: center } } #page-character .slick-active .char-pic-box { -webkit-transform: translateX(0px); transform: translateX(0px); opacity: 1 } #page-character .slick-active .char-pic-box:before { -webkit-transform: scale(1); transform: scale(1); opacity: 1 } #page-character .slick-active .char-pic-box:after { -webkit-transform: scale(1); transform: scale(1); opacity: 1 } #page-character .slick-active .char-info > div { -webkit-transition: opacity 0.5s 0.2s; transition: opacity 0.5s 0.2s; opacity: 1 } #page-character .char-pic-box { top: 0; left: 0; -webkit-transition: opacity 0.3s 0.3s,-webkit-transform 0.3s 0.3s; transition: opacity 0.3s 0.3s,-webkit-transform 0.3s 0.3s; transition: opacity 0.3s 0.3s,transform 0.3s 0.3s; transition: opacity 0.3s 0.3s,transform 0.3s 0.3s,-webkit-transform 0.3s 0.3s; -webkit-transform: translateX(-10px); transform: translateX(-10px); opacity: 0 } @media screen and (min-width: 1401px) { #page-character .char-pic-box { position: absolute; width: 100%; height: 835.625px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-character .char-pic-box { position: absolute; width: 100%; height: 59.6875vw } } @media screen and (max-width: 750px) { #page-character .char-pic-box { position: relative; height: 88.13333vw } } #page-character .char-pic-box:before { position: absolute; -webkit-transition: opacity 0.4s 0.8s,-webkit-transform 0.4s 0.8s cubic-bezier(0.12, 0.92, 0.32, 1.2); transition: opacity 0.4s 0.8s,-webkit-transform 0.4s 0.8s cubic-bezier(0.12, 0.92, 0.32, 1.2); transition: opacity 0.4s 0.8s,transform 0.4s 0.8s cubic-bezier(0.12, 0.92, 0.32, 1.2); transition: opacity 0.4s 0.8s,transform 0.4s 0.8s cubic-bezier(0.12, 0.92, 0.32, 1.2),-webkit-transform 0.4s 0.8s cubic-bezier(0.12, 0.92, 0.32, 1.2); -webkit-transform: scale(0); transform: scale(0); opacity: 0; background-size: 100% 100% } @media screen and (min-width: 1401px) { #page-character .char-pic-box:before { content: ""; display: block } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-character .char-pic-box:before { content: ""; display: block } } #page-character .char-pic-box:after { position: absolute; -webkit-transition: opacity 0.4s 0.9s,-webkit-transform 0.4s 0.9s cubic-bezier(0.12, 0.92, 0.32, 1.2); transition: opacity 0.4s 0.9s,-webkit-transform 0.4s 0.9s cubic-bezier(0.12, 0.92, 0.32, 1.2); transition: opacity 0.4s 0.9s,transform 0.4s 0.9s cubic-bezier(0.12, 0.92, 0.32, 1.2); transition: opacity 0.4s 0.9s,transform 0.4s 0.9s cubic-bezier(0.12, 0.92, 0.32, 1.2),-webkit-transform 0.4s 0.9s cubic-bezier(0.12, 0.92, 0.32, 1.2); -webkit-transform: scale(0); transform: scale(0); opacity: 0; background-size: 100% 100% } @media screen and (min-width: 1401px) { #page-character .char-pic-box:after { content: ""; display: block } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-character .char-pic-box:after { content: ""; display: block } } @media screen and (min-width: 1401px) { #page-character .char-pic { z-index: 1; top: 24.0625px; left: 525px; width: 832.34375px; height: 812.65625px; background-size: 100% 100% } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-character .char-pic { z-index: 1; top: 1.71875vw; left: 37.5vw; width: 59.45312vw; height: 58.04688vw; background-size: 100% 100% } } #page-character .char-menu-ttl { position: relative; top: 0; left: 0 } @media screen and (min-width: 1401px) { #page-character .char-menu-ttl { width: 360.9375px; margin: 0px 0 -3px 140px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-character .char-menu-ttl { width: 25.78125vw; margin: 0vw 0 -3px 10vw } } @media screen and (max-width: 750px) { #page-character .char-menu-ttl { width: 44vw; margin: 7.86667vw auto 5.33333vw } } #page-character .char-carousel { overflow: hidden } @media screen and (min-width: 1401px) { #page-character .char-carousel { height: 835.625px; margin-bottom: 19.6875px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-character .char-carousel { height: 59.6875vw; margin-bottom: 1.40625vw } } #page-character .char-carousel-menu { overflow: hidden } @media screen and (min-width: 1401px) { #page-character .char-carousel-menu { height: 356.5625px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-character .char-carousel-menu { height: 25.46875vw } } @media screen and (max-width: 750px) { #page-character .char-carousel-menu { height: auto; margin-bottom: 17.33333vw } } #page-character .char-carousel-menu .slick-dots { position: relative; bottom: auto; margin: 0 auto; font-size: 0; text-align: center; letter-spacing: -4px } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-character .char-carousel-menu .slick-dots { width: calc(79.0625vw + 2px * 8 + 1px) } } @media screen and (min-width: 1401px) { #page-character .char-carousel-menu .slick-dots { width: calc(1106.875px + 2px * 8 + 1px) } } #page-character .char-carousel-menu .slick-dots li { position: relative; display: inline-block; background-size: 100% 100% } @media screen and (min-width: 1401px) { #page-character .char-carousel-menu .slick-dots li { width: 276.71875px; height: 76.5625px; margin: 2px } #page-character .char-carousel-menu .slick-dots li:hover:after { opacity: 1 } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-character .char-carousel-menu .slick-dots li { width: 19.76562vw; height: 5.46875vw; margin: 1px } #page-character .char-carousel-menu .slick-dots li:hover:after { opacity: 1 } } @media screen and (max-width: 750px) { #page-character .char-carousel-menu .slick-dots li { width: 47.06667vw; height: 13.33333vw; margin: 2px } } #page-character .char-carousel-menu .slick-dots li.slick-active:after { opacity: 1 } #page-character .char-carousel-menu .slick-dots li:after { content: ""; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; pointer-events: none; opacity: 0; background-size: 100% 100% } @media screen and (min-width: 1401px) { #page-character .char-carousel-menu .slick-dots li:nth-child(16) { background-image: url(../images/character/char-comingsoon-btn.png) } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-character .char-carousel-menu .slick-dots li:nth-child(16) { background-image: url(../images/character/char-comingsoon-btn.png) } } @media screen and (max-width: 750px) { #page-character .char-carousel-menu .slick-dots li:nth-child(16) { background-image: url(../images/character/char-comingsoon-btn_sp.png) } } @media screen and (min-width: 1401px) { #page-character .char-carousel-menu .slick-dots li:nth-child(16):after { background-image: url(../images/character/char-comingsoon-btn-on.png) } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-character .char-carousel-menu .slick-dots li:nth-child(16):after { background-image: url(../images/character/char-comingsoon-btn-on.png) } } @media screen and (max-width: 750px) { #page-character .char-carousel-menu .slick-dots li:nth-child(16):after { background-image: url(../images/character/char-comingsoon-btn-on_sp.png) } } @media screen and (min-width: 1401px) { #page-character .char-carousel-menu .slick-dots li:nth-child(1) { background-image: url(../images/character/char-0-btn.png) } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-character .char-carousel-menu .slick-dots li:nth-child(1) { background-image: url(../images/character/char-0-btn.png) } } @media screen and (max-width: 750px) { #page-character .char-carousel-menu .slick-dots li:nth-child(1) { background-image: url(../images/character/char-0-btn_sp.png) } } @media screen and (min-width: 1401px) { #page-character .char-carousel-menu .slick-dots li:nth-child(1):after { background-image: url(../images/character/char-0-btn-on.png) } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-character .char-carousel-menu .slick-dots li:nth-child(1):after { background-image: url(../images/character/char-0-btn-on.png) } } @media screen and (max-width: 750px) { #page-character .char-carousel-menu .slick-dots li:nth-child(1):after { background-image: url(../images/character/char-0-btn-on_sp.png?20210825) } } @media screen and (min-width: 1401px) { #page-character .char-carousel-menu .slick-dots li:nth-child(2) { background-image: url(../images/character/char-1-btn.png) } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-character .char-carousel-menu .slick-dots li:nth-child(2) { background-image: url(../images/character/char-1-btn.png) } } @media screen and (max-width: 750px) { #page-character .char-carousel-menu .slick-dots li:nth-child(2) { background-image: url(../images/character/char-1-btn_sp.png) } } @media screen and (min-width: 1401px) { #page-character .char-carousel-menu .slick-dots li:nth-child(2):after { background-image: url(../images/character/char-1-btn-on.png) } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-character .char-carousel-menu .slick-dots li:nth-child(2):after { background-image: url(../images/character/char-1-btn-on.png) } } @media screen and (max-width: 750px) { #page-character .char-carousel-menu .slick-dots li:nth-child(2):after { background-image: url(../images/character/char-1-btn-on_sp.png?20210825) } } @media screen and (min-width: 1401px) { #page-character .char-carousel-menu .slick-dots li:nth-child(3) { background-image: url(../images/character/char-2-btn.png) } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-character .char-carousel-menu .slick-dots li:nth-child(3) { background-image: url(../images/character/char-2-btn.png) } } @media screen and (max-width: 750px) { #page-character .char-carousel-menu .slick-dots li:nth-child(3) { background-image: url(../images/character/char-2-btn_sp.png) } } @media screen and (min-width: 1401px) { #page-character .char-carousel-menu .slick-dots li:nth-child(3):after { background-image: url(../images/character/char-2-btn-on.png) } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-character .char-carousel-menu .slick-dots li:nth-child(3):after { background-image: url(../images/character/char-2-btn-on.png) } } @media screen and (max-width: 750px) { #page-character .char-carousel-menu .slick-dots li:nth-child(3):after { background-image: url(../images/character/char-2-btn-on_sp.png?20210825) } } @media screen and (min-width: 1401px) { #page-character .char-carousel-menu .slick-dots li:nth-child(4) { background-image: url(../images/character/char-3-btn.png) } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-character .char-carousel-menu .slick-dots li:nth-child(4) { background-image: url(../images/character/char-3-btn.png) } } @media screen and (max-width: 750px) { #page-character .char-carousel-menu .slick-dots li:nth-child(4) { background-image: url(../images/character/char-3-btn_sp.png) } } @media screen and (min-width: 1401px) { #page-character .char-carousel-menu .slick-dots li:nth-child(4):after { background-image: url(../images/character/char-3-btn-on.png) } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-character .char-carousel-menu .slick-dots li:nth-child(4):after { background-image: url(../images/character/char-3-btn-on.png) } } @media screen and (max-width: 750px) { #page-character .char-carousel-menu .slick-dots li:nth-child(4):after { background-image: url(../images/character/char-3-btn-on_sp.png?20210825) } } @media screen and (min-width: 1401px) { #page-character .char-carousel-menu .slick-dots li:nth-child(5) { background-image: url(../images/character/char-4-btn.png) } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-character .char-carousel-menu .slick-dots li:nth-child(5) { background-image: url(../images/character/char-4-btn.png) } } @media screen and (max-width: 750px) { #page-character .char-carousel-menu .slick-dots li:nth-child(5) { background-image: url(../images/character/char-4-btn_sp.png) } } @media screen and (min-width: 1401px) { #page-character .char-carousel-menu .slick-dots li:nth-child(5):after { background-image: url(../images/character/char-4-btn-on.png) } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-character .char-carousel-menu .slick-dots li:nth-child(5):after { background-image: url(../images/character/char-4-btn-on.png) } } @media screen and (max-width: 750px) { #page-character .char-carousel-menu .slick-dots li:nth-child(5):after { background-image: url(../images/character/char-4-btn-on_sp.png?20210825) } } @media screen and (min-width: 1401px) { #page-character .char-carousel-menu .slick-dots li:nth-child(6) { background-image: url(../images/character/char-5-btn.png) } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-character .char-carousel-menu .slick-dots li:nth-child(6) { background-image: url(../images/character/char-5-btn.png) } } @media screen and (max-width: 750px) { #page-character .char-carousel-menu .slick-dots li:nth-child(6) { background-image: url(../images/character/char-5-btn_sp.png) } } @media screen and (min-width: 1401px) { #page-character .char-carousel-menu .slick-dots li:nth-child(6):after { background-image: url(../images/character/char-5-btn-on.png) } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-character .char-carousel-menu .slick-dots li:nth-child(6):after { background-image: url(../images/character/char-5-btn-on.png) } } @media screen and (max-width: 750px) { #page-character .char-carousel-menu .slick-dots li:nth-child(6):after { background-image: url(../images/character/char-5-btn-on_sp.png?20210825) } } @media screen and (min-width: 1401px) { #page-character .char-carousel-menu .slick-dots li:nth-child(7) { background-image: url(../images/character/char-6-btn.png) } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-character .char-carousel-menu .slick-dots li:nth-child(7) { background-image: url(../images/character/char-6-btn.png) } } @media screen and (max-width: 750px) { #page-character .char-carousel-menu .slick-dots li:nth-child(7) { background-image: url(../images/character/char-6-btn_sp.png) } } @media screen and (min-width: 1401px) { #page-character .char-carousel-menu .slick-dots li:nth-child(7):after { background-image: url(../images/character/char-6-btn-on.png) } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-character .char-carousel-menu .slick-dots li:nth-child(7):after { background-image: url(../images/character/char-6-btn-on.png) } } @media screen and (max-width: 750px) { #page-character .char-carousel-menu .slick-dots li:nth-child(7):after { background-image: url(../images/character/char-6-btn-on_sp.png?20210825) } } @media screen and (min-width: 1401px) { #page-character .char-carousel-menu .slick-dots li:nth-child(8) { background-image: url(../images/character/char-7-btn.png) } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-character .char-carousel-menu .slick-dots li:nth-child(8) { background-image: url(../images/character/char-7-btn.png) } } @media screen and (max-width: 750px) { #page-character .char-carousel-menu .slick-dots li:nth-child(8) { background-image: url(../images/character/char-7-btn_sp.png) } } @media screen and (min-width: 1401px) { #page-character .char-carousel-menu .slick-dots li:nth-child(8):after { background-image: url(../images/character/char-7-btn-on.png) } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-character .char-carousel-menu .slick-dots li:nth-child(8):after { background-image: url(../images/character/char-7-btn-on.png) } } @media screen and (max-width: 750px) { #page-character .char-carousel-menu .slick-dots li:nth-child(8):after { background-image: url(../images/character/char-7-btn-on_sp.png?20210825) } } @media screen and (min-width: 1401px) { #page-character .char-carousel-menu .slick-dots li:nth-child(9) { background-image: url(../images/character/char-8-btn.png) } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-character .char-carousel-menu .slick-dots li:nth-child(9) { background-image: url(../images/character/char-8-btn.png) } } @media screen and (max-width: 750px) { #page-character .char-carousel-menu .slick-dots li:nth-child(9) { background-image: url(../images/character/char-8-btn_sp.png) } } @media screen and (min-width: 1401px) { #page-character .char-carousel-menu .slick-dots li:nth-child(9):after { background-image: url(../images/character/char-8-btn-on.png) } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-character .char-carousel-menu .slick-dots li:nth-child(9):after { background-image: url(../images/character/char-8-btn-on.png) } } @media screen and (max-width: 750px) { #page-character .char-carousel-menu .slick-dots li:nth-child(9):after { background-image: url(../images/character/char-8-btn-on_sp.png?20210825) } } @media screen and (min-width: 1401px) { #page-character .char-carousel-menu .slick-dots li:nth-child(10) { background-image: url(../images/character/char-9-btn.png) } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-character .char-carousel-menu .slick-dots li:nth-child(10) { background-image: url(../images/character/char-9-btn.png) } } @media screen and (max-width: 750px) { #page-character .char-carousel-menu .slick-dots li:nth-child(10) { background-image: url(../images/character/char-9-btn_sp.png) } } @media screen and (min-width: 1401px) { #page-character .char-carousel-menu .slick-dots li:nth-child(10):after { background-image: url(../images/character/char-9-btn-on.png) } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-character .char-carousel-menu .slick-dots li:nth-child(10):after { background-image: url(../images/character/char-9-btn-on.png) } } @media screen and (max-width: 750px) { #page-character .char-carousel-menu .slick-dots li:nth-child(10):after { background-image: url(../images/character/char-9-btn-on_sp.png?20210825) } } @media screen and (min-width: 1401px) { #page-character .char-carousel-menu .slick-dots li:nth-child(11) { background-image: url(../images/character/char-10-btn.png) } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-character .char-carousel-menu .slick-dots li:nth-child(11) { background-image: url(../images/character/char-10-btn.png) } } @media screen and (max-width: 750px) { #page-character .char-carousel-menu .slick-dots li:nth-child(11) { background-image: url(../images/character/char-10-btn_sp.png) } } @media screen and (min-width: 1401px) { #page-character .char-carousel-menu .slick-dots li:nth-child(11):after { background-image: url(../images/character/char-10-btn-on.png) } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-character .char-carousel-menu .slick-dots li:nth-child(11):after { background-image: url(../images/character/char-10-btn-on.png) } } @media screen and (max-width: 750px) { #page-character .char-carousel-menu .slick-dots li:nth-child(11):after { background-image: url(../images/character/char-10-btn-on_sp.png?20210825) } } @media screen and (min-width: 1401px) { #page-character .char-carousel-menu .slick-dots li:nth-child(12) { background-image: url(../images/character/char-11-btn.png) } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-character .char-carousel-menu .slick-dots li:nth-child(12) { background-image: url(../images/character/char-11-btn.png) } } @media screen and (max-width: 750px) { #page-character .char-carousel-menu .slick-dots li:nth-child(12) { background-image: url(../images/character/char-11-btn_sp.png) } } @media screen and (min-width: 1401px) { #page-character .char-carousel-menu .slick-dots li:nth-child(12):after { background-image: url(../images/character/char-11-btn-on.png) } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-character .char-carousel-menu .slick-dots li:nth-child(12):after { background-image: url(../images/character/char-11-btn-on.png) } } @media screen and (max-width: 750px) { #page-character .char-carousel-menu .slick-dots li:nth-child(12):after { background-image: url(../images/character/char-11-btn-on_sp.png?20210825) } } @media screen and (min-width: 1401px) { #page-character .char-carousel-menu .slick-dots li:nth-child(13) { background-image: url(../images/character/char-12-btn.png) } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-character .char-carousel-menu .slick-dots li:nth-child(13) { background-image: url(../images/character/char-12-btn.png) } } @media screen and (max-width: 750px) { #page-character .char-carousel-menu .slick-dots li:nth-child(13) { background-image: url(../images/character/char-12-btn_sp.png) } } @media screen and (min-width: 1401px) { #page-character .char-carousel-menu .slick-dots li:nth-child(13):after { background-image: url(../images/character/char-12-btn-on.png) } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-character .char-carousel-menu .slick-dots li:nth-child(13):after { background-image: url(../images/character/char-12-btn-on.png) } } @media screen and (max-width: 750px) { #page-character .char-carousel-menu .slick-dots li:nth-child(13):after { background-image: url(../images/character/char-12-btn-on_sp.png?20210825) } } @media screen and (min-width: 1401px) { #page-character .char-carousel-menu .slick-dots li:nth-child(14) { background-image: url(../images/character/char-13-btn.png) } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-character .char-carousel-menu .slick-dots li:nth-child(14) { background-image: url(../images/character/char-13-btn.png) } } @media screen and (max-width: 750px) { #page-character .char-carousel-menu .slick-dots li:nth-child(14) { background-image: url(../images/character/char-13-btn_sp.png) } } @media screen and (min-width: 1401px) { #page-character .char-carousel-menu .slick-dots li:nth-child(14):after { background-image: url(../images/character/char-13-btn-on.png) } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-character .char-carousel-menu .slick-dots li:nth-child(14):after { background-image: url(../images/character/char-13-btn-on.png) } } @media screen and (max-width: 750px) { #page-character .char-carousel-menu .slick-dots li:nth-child(14):after { background-image: url(../images/character/char-13-btn-on_sp.png?20210825) } } @media screen and (min-width: 1401px) { #page-character .char-carousel-menu .slick-dots li:nth-child(15) { background-image: url(../images/character/char-14-btn.png) } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-character .char-carousel-menu .slick-dots li:nth-child(15) { background-image: url(../images/character/char-14-btn.png) } } @media screen and (max-width: 750px) { #page-character .char-carousel-menu .slick-dots li:nth-child(15) { background-image: url(../images/character/char-14-btn_sp.png) } } @media screen and (min-width: 1401px) { #page-character .char-carousel-menu .slick-dots li:nth-child(15):after { background-image: url(../images/character/char-14-btn-on.png) } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-character .char-carousel-menu .slick-dots li:nth-child(15):after { background-image: url(../images/character/char-14-btn-on.png) } } @media screen and (max-width: 750px) { #page-character .char-carousel-menu .slick-dots li:nth-child(15):after { background-image: url(../images/character/char-14-btn-on_sp.png?20210825) } } #page-character .char-comingsoon { position: absolute; background-size: 100% 100% } @media screen and (min-width: 1401px) { #page-character .char-comingsoon { top: 130.15625px; left: 322.65625px; width: 798.4375px; height: 599.375px; background-image: url(../images/character/char-comingsoon.png) } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-character .char-comingsoon { top: 9.29688vw; left: 23.04688vw; width: 57.03125vw; height: 42.8125vw; background-image: url(../images/character/char-comingsoon.png) } } @media screen and (max-width: 750px) { #page-character .char-comingsoon { width: 100vw; height: 88.13333vw; background-image: url(../images/character/char-comingsoon_sp.png) } } #page-character #sec-carousel { overflow: hidden } @media screen and (min-width: 1401px) { #page-character #sec-carousel { height: 1289.53125px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-character #sec-carousel { height: 92.10938vw } } @media screen and (max-width: 750px) { #page-character #sec-carousel { height: auto } } #page-character #sashiireshop { position: absolute; left: 0; width: 100px; height: 10px } @media screen and (min-width: 1401px) { #page-character #sashiireshop { top: 760.15625px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-character #sashiireshop { top: 54.29688vw } } @media screen and (max-width: 750px) { #page-character #sashiireshop { top: 196vw } } #page-character #sec-mode { background-color: #000 } @media screen and (min-width: 1401px) { #page-character #sec-mode { height: 1414.21875px; margin-top: -0.5px } #page-character #sec-mode:before { content: ""; position: absolute; z-index: 0; bottom: 0; left: 50%; width: 100vw; height: 100%; margin-left: -50vw; pointer-events: none; background-color: #000; background-image: url(../images/character/bg-b-up.jpg?imbypass=true),url(../images/character/bg-b-dn.jpg?imbypass=true); background-repeat: repeat-x,repeat-x; background-position: 50% 0%,50% 100%; background-size: auto 563.28125px,auto 514.0625px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-character #sec-mode { height: 101.01563vw; margin-top: -0.5px } #page-character #sec-mode:before { content: ""; position: absolute; z-index: 0; bottom: 0; left: 50%; width: 100vw; height: 100%; margin-left: -50vw; pointer-events: none; background-color: #000; background-image: url(../images/character/bg-b-up.jpg?imbypass=true),url(../images/character/bg-b-dn.jpg?imbypass=true); background-repeat: repeat-x,repeat-x; background-position: 50% 0%,50% 100%; background-size: auto 36.71875vw,auto 36.71875vw } } @media screen and (max-width: 750px) { #page-character #sec-mode { height: 386.4vw; background-image: url(../images/character/bg-b-up_sp.jpg),url(../images/character/bg-b-dn_sp.jpg); background-repeat: no-repeat; background-position: 0 0,0 100%; background-size: 100% auto,100% auto } } #page-character .mode-fuki { position: absolute } @media screen and (min-width: 1401px) { #page-character .mode-fuki { top: -70px; left: 261.40625px; width: 251.5625px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-character .mode-fuki { top: -5vw; left: 18.67188vw; width: 17.96875vw } } @media screen and (max-width: 750px) { #page-character .mode-fuki { top: -9.86667vw; left: 2.66667vw; width: 30.66667vw } } #page-character .mode-char { position: absolute } @media screen and (min-width: 1401px) { #page-character .mode-char { top: 26.25px; left: 140px; width: 195.78125px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-character .mode-char { top: 1.875vw; left: 10vw; width: 13.98437vw } } @media screen and (max-width: 750px) { #page-character .mode-char { top: -7.46667vw; left: 69.06667vw; width: 29.73333vw } } #page-character .mode-ttl { position: absolute } @media screen and (min-width: 1401px) { #page-character .mode-ttl { top: 54.6875px; left: 411.25px; width: 585.15625px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-character .mode-ttl { top: 3.90625vw; left: 29.375vw; width: 41.79688vw } } @media screen and (max-width: 750px) { #page-character .mode-ttl { top: 6.13333vw; left: 5.6vw; width: 70.8vw } } #page-character .mode-w { position: absolute } @media screen and (min-width: 1401px) { #page-character .mode-w { top: 153.125px; left: 333.59375px; width: 744.84375px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-character .mode-w { top: 10.9375vw; left: 23.82812vw; width: 53.20312vw } } @media screen and (max-width: 750px) { #page-character .mode-w { top: 20.4vw; left: 6.26667vw; width: 89.06667vw } } #page-character .mode-item-box { position: absolute; font-size: 0; text-align: center } @media screen and (min-width: 1401px) { #page-character .mode-item-box { top: 283.28125px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-character .mode-item-box { top: 20.23438vw } } @media screen and (max-width: 750px) { #page-character .mode-item-box { top: 42vw } } #page-character .mode-item { position: relative; display: inline-block; vertical-align: top } @media screen and (min-width: 1401px) { #page-character .mode-item { width: 549.0625px; margin: 0 13.125px 43.75px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-character .mode-item { width: 39.21875vw; margin: 0 0.9375vw 3.125vw } } @media screen and (max-width: 750px) { #page-character .mode-item { width: 89.33333vw; margin: 0 0 7.2vw } } #page-character .mode-item p { position: relative; width: 100%; font-family: 'Noto Sans JP',sans-serif; font-weight: bold; text-align: center; color: #fff } @media screen and (min-width: 1401px) { #page-character .mode-item p { left: 0px; margin-top: 21.875px; font-size: 19.6875px; line-height: 1.72222 } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-character .mode-item p { left: 0vw; margin-top: 1.5625vw; font-size: 1.40625vw; line-height: 1.72222 } } @media screen and (max-width: 750px) { #page-character .mode-item p { left: 0vw; margin-top: 3.33333vw; font-size: 3.2vw; line-height: 1.41667 } } #page-character .mode-item p a { position: relative; display: inline-block; cursor: pointer; color: #fff } @media screen and (min-width: 1401px) { #page-character .mode-item p a { border-bottom: 2px solid #fff } #page-character .mode-item p a:hover { border-bottom: 2px solid transparent } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-character .mode-item p a { border-bottom: 2px solid #fff } #page-character .mode-item p a:hover { border-bottom: 2px solid transparent } } @media screen and (max-width: 750px) { #page-character .mode-item p a { border-bottom: 1.5px solid #fff } } #page-character .char-change-note { position: relative; overflow: hidden } @media screen and (max-width: 750px) { #page-character .char-change-note { top: 0; left: 0; width: 96vw; height: 7.2vw; margin: 2.66667vw auto 20vw } } #page-character .char-change-note-in { position: relative; top: 0; left: 50%; width: 274.8vw; margin-left: -117.248vw; padding-left: 5.33333vw; font-family: 'Noto Sans JP',sans-serif; font-size: 5.33333vw; font-weight: bold; line-height: 1.35; -webkit-transform: scale(0.47); transform: scale(0.47); -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%; text-indent: -5.33333vw; color: #000 } #page-mode section { position: relative } #page-mode .wrapper { position: relative; z-index: 10101; top: 0; left: 0; width: 100%; max-width: 1400px; height: auto; margin-right: auto; margin-left: auto } #page-mode .blue-bg { background-color: #0c92fd } @media screen and (min-width: 1401px) { #page-mode .blue-bg:before { content: ""; position: absolute; z-index: 0; top: 0; left: 50%; width: 100vw; height: 100%; margin-left: -50vw; pointer-events: none; background-color: #0c92fd; background-image: url(../images/mode/bg-b-up.png?imbypass=true),url(../images/mode/bg-b-dn.jpg?imbypass=true); background-repeat: repeat-x; background-position: 50% 0%,50% 100%; background-size: auto 765.625px,auto 575.3125px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-mode .blue-bg:before { content: ""; position: absolute; z-index: 0; top: 0; left: 50%; width: 100vw; height: 100%; margin-left: -50vw; pointer-events: none; background-color: #0b92fd; background-image: url(../images/mode/bg-b-up.png?imbypass=true),url(../images/mode/bg-b-dn.jpg?imbypass=true); background-repeat: repeat-x; background-position: 50% 0%,50% 100%; background-size: auto 54.6875vw,auto 41.25vw } } @media screen and (max-width: 750px) { #page-mode .blue-bg { background-image: url(../images/mode/bg-b-up_sp.png),url(../images/mode/bg-b-dn_sp.jpg); background-repeat: no-repeat; background-position: 0 0,0 100%; background-size: 100% auto,100% auto } } @media screen and (min-width: 1401px) { #page-mode #sec-kv { height: 496.5625px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-mode #sec-kv { height: 35.46875vw } } @media screen and (max-width: 750px) { #page-mode #sec-kv { overflow: hidden; height: 88.13333vw } } #page-mode .kv-star-0 { position: absolute; z-index: 0; background-image: url(../images/mode/kv-star-0.png) } @media screen and (min-width: 1401px) { #page-mode .kv-star-0 { top: 390.46875px; left: 38.28125px; width: 213.28125px; height: 232.96875px; background-size: 100% 100% } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-mode .kv-star-0 { top: 27.89063vw; left: 2.73438vw; width: 15.23438vw; height: 16.64062vw; background-size: 100% 100% } } #page-mode .kv-star-1 { position: absolute; z-index: 0; background-image: url(../images/mode/kv-star-1.png) } @media screen and (min-width: 1401px) { #page-mode .kv-star-1 { top: 552.34375px; left: 1114.53125px; width: 292.03125px; height: 292.03125px; background-size: 100% 100% } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-mode .kv-star-1 { top: 39.45312vw; left: 79.60938vw; width: 20.85938vw; height: 20.85938vw; background-size: 100% 100% } } #page-mode .ttl { position: absolute } @media screen and (min-width: 1401px) { #page-mode .ttl { top: 77.65625px; left: 409.0625px; width: 587.34375px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-mode .ttl { top: 5.54688vw; left: 29.21875vw; width: 41.95312vw } } @media screen and (max-width: 750px) { #page-mode .ttl { top: 22.93333vw; left: 14.66667vw; width: 71.6vw } } #page-mode .mode-kv-fuki { position: absolute } @media screen and (min-width: 1401px) { #page-mode .mode-kv-fuki { top: 210px; left: 357.65625px; width: 224.21875px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-mode .mode-kv-fuki { top: 15vw; left: 25.54688vw; width: 16.01562vw } } @media screen and (max-width: 750px) { #page-mode .mode-kv-fuki { top: 41.73333vw; left: 8.13333vw; width: 27.33333vw } } #page-mode .mode-kv-fuki.aos-animate .full-x { -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-animation-name: shake; animation-name: shake; -webkit-animation-duration: 2s; animation-duration: 2s; -webkit-animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); -webkit-animation-delay: 3.1s; animation-delay: 3.1s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-fill-mode: both; animation-fill-mode: both } #page-mode .mode-kv-ttl { position: absolute } @media screen and (min-width: 1401px) { #page-mode .mode-kv-ttl { top: 249.375px; left: 140px; width: 1135.3125px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-mode .mode-kv-ttl { top: 17.8125vw; left: 10vw; width: 81.09375vw } } @media screen and (max-width: 750px) { #page-mode .mode-kv-ttl { top: 43.46667vw; left: 5.33333vw; width: 90.26667vw } } #page-mode .mode-kv-w { position: absolute } @media screen and (min-width: 1401px) { #page-mode .mode-kv-w { top: 381.71875px; left: 217.65625px; width: 958.125px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-mode .mode-kv-w { top: 27.26562vw; left: 15.54687vw; width: 68.4375vw } } @media screen and (max-width: 750px) { #page-mode .mode-kv-w { top: 63.6vw; left: 12vw; width: 75.86667vw } } #page-mode .mode-kv-char { position: absolute } @media screen and (min-width: 1401px) { #page-mode .mode-kv-char { top: 0px; left: 939.53125px; width: 609.21875px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-mode .mode-kv-char { top: 0vw; left: 67.10938vw; width: 43.51562vw } } @media screen and (max-width: 750px) { #page-mode .mode-kv-char { top: -9.2vw; left: 48.53333vw; width: 64.93333vw } } #page-mode #sec-story { background-size: 100% 100% } @media screen and (min-width: 1401px) { #page-mode #sec-story { height: 1786.09375px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-mode #sec-story { height: 127.57813vw } } @media screen and (max-width: 750px) { #page-mode #sec-story { height: 382.13333vw } } #page-mode .story-char-0 { position: absolute } @media screen and (min-width: 1401px) { #page-mode .story-char-0 { top: 516.25px; right: 82.03125px; width: 297.5px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-mode .story-char-0 { top: 36.875vw; right: 5.85938vw; width: 21.25vw } } @media screen and (max-width: 750px) { #page-mode .story-char-0 { top: 44.26667vw; right: 1.2vw; width: 30.66667vw } } #page-mode .story-pic { position: absolute } @media screen and (min-width: 1401px) { #page-mode .story-pic { top: 0; right: 0; width: 1260px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-mode .story-pic { top: 0; right: 0; width: 90vw } } @media screen and (max-width: 750px) { #page-mode .story-pic { top: 0; right: 0; width: 94.66667vw } } #page-mode .story-fuki-0 { position: absolute } @media screen and (min-width: 1401px) { #page-mode .story-fuki-0 { top: 372.96875px; left: 879.375px; width: 231.875px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-mode .story-fuki-0 { top: 26.64062vw; left: 62.8125vw; width: 16.5625vw } } @media screen and (max-width: 750px) { #page-mode .story-fuki-0 { top: 27.33333vw; left: 50vw; width: 28.26667vw } } #page-mode .story-step-0 { position: absolute; opacity: 0 } @media screen and (min-width: 1401px) { #page-mode .story-step-0 { top: 879.375px; left: 140px; width: 422.1875px; -webkit-transform: translateX(-50px); transform: translateX(-50px) } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-mode .story-step-0 { top: 62.8125vw; left: 10vw; width: 30.15625vw; -webkit-transform: translateX(-50px); transform: translateX(-50px) } } @media screen and (max-width: 750px) { #page-mode .story-step-0 { top: 90.4vw; left: 12.13333vw; width: 75.46667vw; -webkit-transform: translateY(-50px); transform: translateY(-50px) } } #page-mode .story-step-0.aos-animate { -webkit-transition: opacity 0.3s 0s,-webkit-transform 0.3s 0s; transition: opacity 0.3s 0s,-webkit-transform 0.3s 0s; transition: opacity 0.3s 0s,transform 0.3s 0s; transition: opacity 0.3s 0s,transform 0.3s 0s,-webkit-transform 0.3s 0s; opacity: 1 } @media screen and (min-width: 1401px) { #page-mode .story-step-0.aos-animate { -webkit-transform: translateX(0%); transform: translateX(0%) } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-mode .story-step-0.aos-animate { -webkit-transform: translateX(0%); transform: translateX(0%) } } @media screen and (max-width: 750px) { #page-mode .story-step-0.aos-animate { -webkit-transform: translateY(0%); transform: translateY(0%) } } #page-mode .story-step-0.aos-animate ~ .story-step-arrow-0 { opacity: 1 } @media screen and (min-width: 1401px) { #page-mode .story-step-0.aos-animate ~ .story-step-arrow-0 { -webkit-transition: opacity 0.3s 0.3s,-webkit-transform 0.3s 0.3s; transition: opacity 0.3s 0.3s,-webkit-transform 0.3s 0.3s; transition: opacity 0.3s 0.3s,transform 0.3s 0.3s; transition: opacity 0.3s 0.3s,transform 0.3s 0.3s,-webkit-transform 0.3s 0.3s; -webkit-transform: translateX(0%) rotate(-90deg); transform: translateX(0%) rotate(-90deg) } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-mode .story-step-0.aos-animate ~ .story-step-arrow-0 { -webkit-transition: opacity 0.3s 0.3s,-webkit-transform 0.3s 0.3s; transition: opacity 0.3s 0.3s,-webkit-transform 0.3s 0.3s; transition: opacity 0.3s 0.3s,transform 0.3s 0.3s; transition: opacity 0.3s 0.3s,transform 0.3s 0.3s,-webkit-transform 0.3s 0.3s; -webkit-transform: translateX(0%) rotate(-90deg); transform: translateX(0%) rotate(-90deg) } } @media screen and (max-width: 750px) { #page-mode .story-step-0.aos-animate ~ .story-step-arrow-0 { -webkit-transition: opacity 0.3s 0.3s,-webkit-transform 0.3s 0.3s; transition: opacity 0.3s 0.3s,-webkit-transform 0.3s 0.3s; transition: opacity 0.3s 0.3s,transform 0.3s 0.3s; transition: opacity 0.3s 0.3s,transform 0.3s 0.3s,-webkit-transform 0.3s 0.3s; -webkit-transform: translateY(0%); transform: translateY(0%) } } @media screen and (min-width: 1401px) { #page-mode .story-step-0.aos-animate ~ .story-step-1 { -webkit-transition: opacity 0.3s 0.6s,-webkit-transform 0.3s 0.6s; transition: opacity 0.3s 0.6s,-webkit-transform 0.3s 0.6s; transition: opacity 0.3s 0.6s,transform 0.3s 0.6s; transition: opacity 0.3s 0.6s,transform 0.3s 0.6s,-webkit-transform 0.3s 0.6s; -webkit-transform: translateX(0%); transform: translateX(0%); opacity: 1 } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-mode .story-step-0.aos-animate ~ .story-step-1 { -webkit-transition: opacity 0.3s 0.6s,-webkit-transform 0.3s 0.6s; transition: opacity 0.3s 0.6s,-webkit-transform 0.3s 0.6s; transition: opacity 0.3s 0.6s,transform 0.3s 0.6s; transition: opacity 0.3s 0.6s,transform 0.3s 0.6s,-webkit-transform 0.3s 0.6s; -webkit-transform: translateX(0%); transform: translateX(0%); opacity: 1 } } @media screen and (min-width: 1401px) { #page-mode .story-step-0.aos-animate ~ .story-step-arrow-1 { -webkit-transition: opacity 0.3s 0.9s,-webkit-transform 0.3s 0.9s; transition: opacity 0.3s 0.9s,-webkit-transform 0.3s 0.9s; transition: opacity 0.3s 0.9s,transform 0.3s 0.9s; transition: opacity 0.3s 0.9s,transform 0.3s 0.9s,-webkit-transform 0.3s 0.9s; -webkit-transform: translateY(0%); transform: translateY(0%); opacity: 1 } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-mode .story-step-0.aos-animate ~ .story-step-arrow-1 { -webkit-transition: opacity 0.3s 0.9s,-webkit-transform 0.3s 0.9s; transition: opacity 0.3s 0.9s,-webkit-transform 0.3s 0.9s; transition: opacity 0.3s 0.9s,transform 0.3s 0.9s; transition: opacity 0.3s 0.9s,transform 0.3s 0.9s,-webkit-transform 0.3s 0.9s; -webkit-transform: translateY(0%); transform: translateY(0%); opacity: 1 } } @media screen and (min-width: 1401px) { #page-mode .story-step-0.aos-animate ~ .story-step-2 { -webkit-transition: opacity 0.3s 1.2s,-webkit-transform 0.3s 1.2s; transition: opacity 0.3s 1.2s,-webkit-transform 0.3s 1.2s; transition: opacity 0.3s 1.2s,transform 0.3s 1.2s; transition: opacity 0.3s 1.2s,transform 0.3s 1.2s,-webkit-transform 0.3s 1.2s; -webkit-transform: translateX(0%); transform: translateX(0%); opacity: 1 } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-mode .story-step-0.aos-animate ~ .story-step-2 { -webkit-transition: opacity 0.3s 1.2s,-webkit-transform 0.3s 1.2s; transition: opacity 0.3s 1.2s,-webkit-transform 0.3s 1.2s; transition: opacity 0.3s 1.2s,transform 0.3s 1.2s; transition: opacity 0.3s 1.2s,transform 0.3s 1.2s,-webkit-transform 0.3s 1.2s; -webkit-transform: translateX(0%); transform: translateX(0%); opacity: 1 } } @media screen and (min-width: 1401px) { #page-mode .story-step-0.aos-animate ~ .story-step-arrow-2 { -webkit-transition: opacity 0.3s 1.5s,-webkit-transform 0.3s 1.5s; transition: opacity 0.3s 1.5s,-webkit-transform 0.3s 1.5s; transition: opacity 0.3s 1.5s,transform 0.3s 1.5s; transition: opacity 0.3s 1.5s,transform 0.3s 1.5s,-webkit-transform 0.3s 1.5s; -webkit-transform: translateX(0%) rotate(90deg); transform: translateX(0%) rotate(90deg); opacity: 1 } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-mode .story-step-0.aos-animate ~ .story-step-arrow-2 { -webkit-transition: opacity 0.3s 1.5s,-webkit-transform 0.3s 1.5s; transition: opacity 0.3s 1.5s,-webkit-transform 0.3s 1.5s; transition: opacity 0.3s 1.5s,transform 0.3s 1.5s; transition: opacity 0.3s 1.5s,transform 0.3s 1.5s,-webkit-transform 0.3s 1.5s; -webkit-transform: translateX(0%) rotate(90deg); transform: translateX(0%) rotate(90deg); opacity: 1 } } @media screen and (min-width: 1401px) { #page-mode .story-step-0.aos-animate ~ .story-step-3 { -webkit-transition: opacity 0.3s 1.8s,-webkit-transform 0.3s 1.8s; transition: opacity 0.3s 1.8s,-webkit-transform 0.3s 1.8s; transition: opacity 0.3s 1.8s,transform 0.3s 1.8s; transition: opacity 0.3s 1.8s,transform 0.3s 1.8s,-webkit-transform 0.3s 1.8s; -webkit-transform: translateX(0%); transform: translateX(0%); opacity: 1 } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-mode .story-step-0.aos-animate ~ .story-step-3 { -webkit-transition: opacity 0.3s 1.8s,-webkit-transform 0.3s 1.8s; transition: opacity 0.3s 1.8s,-webkit-transform 0.3s 1.8s; transition: opacity 0.3s 1.8s,transform 0.3s 1.8s; transition: opacity 0.3s 1.8s,transform 0.3s 1.8s,-webkit-transform 0.3s 1.8s; -webkit-transform: translateX(0%); transform: translateX(0%); opacity: 1 } } @media screen and (min-width: 1401px) { #page-mode .story-step-0.aos-animate ~ .story-char-1 { -webkit-transition: opacity 0.2s 1.9s,-webkit-transform 0.2s 1.9s cubic-bezier(0, 0.32, 0.15, 1.36); transition: opacity 0.2s 1.9s,-webkit-transform 0.2s 1.9s cubic-bezier(0, 0.32, 0.15, 1.36); transition: opacity 0.2s 1.9s,transform 0.2s 1.9s cubic-bezier(0, 0.32, 0.15, 1.36); transition: opacity 0.2s 1.9s,transform 0.2s 1.9s cubic-bezier(0, 0.32, 0.15, 1.36),-webkit-transform 0.2s 1.9s cubic-bezier(0, 0.32, 0.15, 1.36); -webkit-transform: scale(1); transform: scale(1); opacity: 1 } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-mode .story-step-0.aos-animate ~ .story-char-1 { -webkit-transition: opacity 0.2s 1.9s,-webkit-transform 0.2s 1.9s cubic-bezier(0, 0.32, 0.15, 1.36); transition: opacity 0.2s 1.9s,-webkit-transform 0.2s 1.9s cubic-bezier(0, 0.32, 0.15, 1.36); transition: opacity 0.2s 1.9s,transform 0.2s 1.9s cubic-bezier(0, 0.32, 0.15, 1.36); transition: opacity 0.2s 1.9s,transform 0.2s 1.9s cubic-bezier(0, 0.32, 0.15, 1.36),-webkit-transform 0.2s 1.9s cubic-bezier(0, 0.32, 0.15, 1.36); -webkit-transform: scale(1); transform: scale(1); opacity: 1 } } @media screen and (min-width: 1401px) { #page-mode .story-step-0.aos-animate ~ .story-fuki-1 { -webkit-transition: opacity 0.2s 2s,-webkit-transform 0.2s 2s cubic-bezier(0, 0.32, 0.15, 1.36); transition: opacity 0.2s 2s,-webkit-transform 0.2s 2s cubic-bezier(0, 0.32, 0.15, 1.36); transition: opacity 0.2s 2s,transform 0.2s 2s cubic-bezier(0, 0.32, 0.15, 1.36); transition: opacity 0.2s 2s,transform 0.2s 2s cubic-bezier(0, 0.32, 0.15, 1.36),-webkit-transform 0.2s 2s cubic-bezier(0, 0.32, 0.15, 1.36); -webkit-transform: scale(1); transform: scale(1); opacity: 1 } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-mode .story-step-0.aos-animate ~ .story-fuki-1 { -webkit-transition: opacity 0.2s 2s,-webkit-transform 0.2s 2s cubic-bezier(0, 0.32, 0.15, 1.36); transition: opacity 0.2s 2s,-webkit-transform 0.2s 2s cubic-bezier(0, 0.32, 0.15, 1.36); transition: opacity 0.2s 2s,transform 0.2s 2s cubic-bezier(0, 0.32, 0.15, 1.36); transition: opacity 0.2s 2s,transform 0.2s 2s cubic-bezier(0, 0.32, 0.15, 1.36),-webkit-transform 0.2s 2s cubic-bezier(0, 0.32, 0.15, 1.36); -webkit-transform: scale(1); transform: scale(1); opacity: 1 } } @media screen and (min-width: 1401px) { #page-mode .story-step-0.aos-animate ~ .story-star { -webkit-transition: opacity 0.2s 2.1s,-webkit-transform 0.2s 2.1s cubic-bezier(0, 0.32, 0.15, 1.36); transition: opacity 0.2s 2.1s,-webkit-transform 0.2s 2.1s cubic-bezier(0, 0.32, 0.15, 1.36); transition: opacity 0.2s 2.1s,transform 0.2s 2.1s cubic-bezier(0, 0.32, 0.15, 1.36); transition: opacity 0.2s 2.1s,transform 0.2s 2.1s cubic-bezier(0, 0.32, 0.15, 1.36),-webkit-transform 0.2s 2.1s cubic-bezier(0, 0.32, 0.15, 1.36); -webkit-transform: scale(1); transform: scale(1); opacity: 1 } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-mode .story-step-0.aos-animate ~ .story-star { -webkit-transition: opacity 0.2s 2.1s,-webkit-transform 0.2s 2.1s cubic-bezier(0, 0.32, 0.15, 1.36); transition: opacity 0.2s 2.1s,-webkit-transform 0.2s 2.1s cubic-bezier(0, 0.32, 0.15, 1.36); transition: opacity 0.2s 2.1s,transform 0.2s 2.1s cubic-bezier(0, 0.32, 0.15, 1.36); transition: opacity 0.2s 2.1s,transform 0.2s 2.1s cubic-bezier(0, 0.32, 0.15, 1.36),-webkit-transform 0.2s 2.1s cubic-bezier(0, 0.32, 0.15, 1.36); -webkit-transform: scale(1); transform: scale(1); opacity: 1 } } #page-mode .story-step-1 { position: absolute; opacity: 0 } @media screen and (min-width: 1401px) { #page-mode .story-step-1 { top: 879.375px; left: 640.9375px; width: 619.0625px; -webkit-transform: translateX(-50px); transform: translateX(-50px) } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-mode .story-step-1 { top: 62.8125vw; left: 45.78125vw; width: 44.21875vw; -webkit-transform: translateX(-50px); transform: translateX(-50px) } } @media screen and (max-width: 750px) { #page-mode .story-step-1 { top: 160vw; left: 5.33333vw; width: 89.46667vw; -webkit-transform: translateY(-50px); transform: translateY(-50px) } } @media screen and (max-width: 750px) { #page-mode .story-step-1.aos-animate { -webkit-transition: opacity 0.3s 0s,-webkit-transform 0.3s 0s; transition: opacity 0.3s 0s,-webkit-transform 0.3s 0s; transition: opacity 0.3s 0s,transform 0.3s 0s; transition: opacity 0.3s 0s,transform 0.3s 0s,-webkit-transform 0.3s 0s; -webkit-transform: translateY(0%); transform: translateY(0%); opacity: 1 } } @media screen and (max-width: 750px) { #page-mode .story-step-1.aos-animate ~ .story-step-arrow-1 { -webkit-transition: opacity 0.3s 0.3s,-webkit-transform 0.3s 0.3s; transition: opacity 0.3s 0.3s,-webkit-transform 0.3s 0.3s; transition: opacity 0.3s 0.3s,transform 0.3s 0.3s; transition: opacity 0.3s 0.3s,transform 0.3s 0.3s,-webkit-transform 0.3s 0.3s; -webkit-transform: translateY(0%); transform: translateY(0%); opacity: 1 } } #page-mode .story-step-2 { position: absolute; opacity: 0 } @media screen and (min-width: 1401px) { #page-mode .story-step-2 { top: 1262.1875px; left: 739.375px; width: 444.0625px; -webkit-transform: translateX(50px); transform: translateX(50px) } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-mode .story-step-2 { top: 90.15625vw; left: 52.8125vw; width: 31.71875vw; -webkit-transform: translateX(50px); transform: translateX(50px) } } @media screen and (max-width: 750px) { #page-mode .story-step-2 { top: 221.86667vw; left: 12vw; width: 75.46667vw; -webkit-transform: translateY(-50px); transform: translateY(-50px) } } @media screen and (max-width: 750px) { #page-mode .story-step-2.aos-animate { -webkit-transition: opacity 0.3s 0s,-webkit-transform 0.3s 0s; transition: opacity 0.3s 0s,-webkit-transform 0.3s 0s; transition: opacity 0.3s 0s,transform 0.3s 0s; transition: opacity 0.3s 0s,transform 0.3s 0s,-webkit-transform 0.3s 0s; -webkit-transform: translateY(0%); transform: translateY(0%); opacity: 1 } } @media screen and (max-width: 750px) { #page-mode .story-step-2.aos-animate ~ .story-step-arrow-2 { -webkit-transition: opacity 0.3s 0.3s,-webkit-transform 0.3s 0.3s; transition: opacity 0.3s 0.3s,-webkit-transform 0.3s 0.3s; transition: opacity 0.3s 0.3s,transform 0.3s 0.3s; transition: opacity 0.3s 0.3s,transform 0.3s 0.3s,-webkit-transform 0.3s 0.3s; -webkit-transform: translateY(0%); transform: translateY(0%); opacity: 1 } } #page-mode .story-step-3 { position: absolute; opacity: 0 } @media screen and (min-width: 1401px) { #page-mode .story-step-3 { top: 1262.1875px; left: 216.5625px; width: 444.0625px; -webkit-transform: translateX(50px); transform: translateX(50px) } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-mode .story-step-3 { top: 90.15625vw; left: 15.46875vw; width: 31.71875vw; -webkit-transform: translateX(50px); transform: translateX(50px) } } @media screen and (max-width: 750px) { #page-mode .story-step-3 { top: 291.46667vw; left: 12vw; width: 75.46667vw; -webkit-transform: translateY(-50px); transform: translateY(-50px) } } @media screen and (max-width: 750px) { #page-mode .story-step-3.aos-animate { -webkit-transition: opacity 0.3s 0s,-webkit-transform 0.3s 0s; transition: opacity 0.3s 0s,-webkit-transform 0.3s 0s; transition: opacity 0.3s 0s,transform 0.3s 0s; transition: opacity 0.3s 0s,transform 0.3s 0s,-webkit-transform 0.3s 0s; -webkit-transform: translateY(0%); transform: translateY(0%); opacity: 1 } } @media screen and (max-width: 750px) { #page-mode .story-step-3.aos-animate ~ .story-step-arrow-3 { -webkit-transition: opacity 0.3s 0.3s,-webkit-transform 0.3s 0.3s; transition: opacity 0.3s 0.3s,-webkit-transform 0.3s 0.3s; transition: opacity 0.3s 0.3s,transform 0.3s 0.3s; transition: opacity 0.3s 0.3s,transform 0.3s 0.3s,-webkit-transform 0.3s 0.3s; -webkit-transform: translateY(0%); transform: translateY(0%); opacity: 1 } } @media screen and (max-width: 750px) { #page-mode .story-step-3.aos-animate ~ .story-char-1 { -webkit-transition: opacity 0.2s 0.4s,-webkit-transform 0.2s 0.4s cubic-bezier(0, 0.32, 0.15, 1.36); transition: opacity 0.2s 0.4s,-webkit-transform 0.2s 0.4s cubic-bezier(0, 0.32, 0.15, 1.36); transition: opacity 0.2s 0.4s,transform 0.2s 0.4s cubic-bezier(0, 0.32, 0.15, 1.36); transition: opacity 0.2s 0.4s,transform 0.2s 0.4s cubic-bezier(0, 0.32, 0.15, 1.36),-webkit-transform 0.2s 0.4s cubic-bezier(0, 0.32, 0.15, 1.36); -webkit-transform: scale(1); transform: scale(1); opacity: 1 } } @media screen and (max-width: 750px) { #page-mode .story-step-3.aos-animate ~ .story-fuki-1 { -webkit-transition: opacity 0.2s 0.5s,-webkit-transform 0.2s 0.5s cubic-bezier(0, 0.32, 0.15, 1.36); transition: opacity 0.2s 0.5s,-webkit-transform 0.2s 0.5s cubic-bezier(0, 0.32, 0.15, 1.36); transition: opacity 0.2s 0.5s,transform 0.2s 0.5s cubic-bezier(0, 0.32, 0.15, 1.36); transition: opacity 0.2s 0.5s,transform 0.2s 0.5s cubic-bezier(0, 0.32, 0.15, 1.36),-webkit-transform 0.2s 0.5s cubic-bezier(0, 0.32, 0.15, 1.36); -webkit-transform: scale(1); transform: scale(1); opacity: 1 } } @media screen and (max-width: 750px) { #page-mode .story-step-3.aos-animate ~ .story-star { -webkit-transition: opacity 0.2s 0.6s,-webkit-transform 0.2s 0.6s cubic-bezier(0, 0.32, 0.15, 1.36); transition: opacity 0.2s 0.6s,-webkit-transform 0.2s 0.6s cubic-bezier(0, 0.32, 0.15, 1.36); transition: opacity 0.2s 0.6s,transform 0.2s 0.6s cubic-bezier(0, 0.32, 0.15, 1.36); transition: opacity 0.2s 0.6s,transform 0.2s 0.6s cubic-bezier(0, 0.32, 0.15, 1.36),-webkit-transform 0.2s 0.6s cubic-bezier(0, 0.32, 0.15, 1.36); -webkit-transform: scale(1); transform: scale(1); opacity: 1 } } #page-mode .story-w-0 { position: absolute } @media screen and (min-width: 1401px) { #page-mode .story-w-0 { top: 750.3125px; left: 137.8125px; width: 961.40625px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-mode .story-w-0 { top: 53.59375vw; left: 9.84375vw; width: 68.67188vw } } @media screen and (max-width: 750px) { #page-mode .story-w-0 { top: 59.06667vw; left: 5.33333vw; width: 68vw } } #page-mode .story-step-arrow { position: absolute; opacity: 0 } @media screen and (min-width: 1401px) { #page-mode .story-step-arrow { width: 85.3125px; margin: -27.34375px 0 0 -42.65625px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-mode .story-step-arrow { width: 6.09375vw; margin: -1.95312vw 0 0 -3.04688vw } } @media screen and (max-width: 750px) { #page-mode .story-step-arrow { width: 13.33333vw; margin: -4.4vw 0 0 -6.66667vw } } @media screen and (min-width: 1401px) { #page-mode .story-step-arrow.story-step-arrow-0 { top: 1062.03125px; left: 601.5625px; -webkit-transform: translateX(-50px) rotate(-90deg); transform: translateX(-50px) rotate(-90deg) } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-mode .story-step-arrow.story-step-arrow-0 { top: 75.85938vw; left: 42.96875vw; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transform: translateX(-50px) rotate(-90deg); transform: translateX(-50px) rotate(-90deg) } } @media screen and (max-width: 750px) { #page-mode .story-step-arrow.story-step-arrow-0 { top: 152.4vw; left: 50vw; -webkit-transform: translateY(-50px); transform: translateY(-50px) } } @media screen and (min-width: 1401px) { #page-mode .story-step-arrow.story-step-arrow-1 { top: 1223.90625px; left: 952.65625px; -webkit-transform: translateY(-50px); transform: translateY(-50px) } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-mode .story-step-arrow.story-step-arrow-1 { top: 87.42188vw; left: 68.04688vw; -webkit-transform: translateY(-50px); transform: translateY(-50px) } } @media screen and (max-width: 750px) { #page-mode .story-step-arrow.story-step-arrow-1 { top: 214.13333vw; left: 50vw; -webkit-transform: translateY(-50px); transform: translateY(-50px) } } @media screen and (min-width: 1401px) { #page-mode .story-step-arrow.story-step-arrow-2 { top: 1391.25px; left: 700px; -webkit-transform: translateX(50px) rotate(90deg); transform: translateX(50px) rotate(90deg) } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-mode .story-step-arrow.story-step-arrow-2 { top: 99.375vw; left: 50vw; -webkit-transform: translateX(50px) rotate(90deg); transform: translateX(50px) rotate(90deg) } } @media screen and (max-width: 750px) { #page-mode .story-step-arrow.story-step-arrow-2 { top: 283.73333vw; left: 50vw; -webkit-transform: translateY(-50px); transform: translateY(-50px) } } #page-mode .story-w-1 { position: absolute } @media screen and (min-width: 1401px) { #page-mode .story-w-1 { top: 1640.625px; left: 411.25px; width: 584.0625px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-mode .story-w-1 { top: 117.1875vw; left: 29.375vw; width: 41.71875vw } } @media screen and (max-width: 750px) { #page-mode .story-w-1 { top: 359.73333vw; left: 14.53333vw; width: 71.2vw } } #page-mode .story-fuki-1 { position: absolute; -webkit-transform: scale(0); transform: scale(0); -webkit-transform-origin: 80% 100%; transform-origin: 80% 100%; opacity: 0 } @media screen and (min-width: 1401px) { #page-mode .story-fuki-1 { top: 1197.65625px; left: 35px; width: 238.4375px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-mode .story-fuki-1 { top: 85.54688vw; left: 2.5vw; width: 17.03125vw } } @media screen and (max-width: 750px) { #page-mode .story-fuki-1 { top: 295.73333vw; left: -3.86667vw; width: 34vw } } #page-mode .story-char-1 { position: absolute; -webkit-transform: scale(0); transform: scale(0); opacity: 0 } @media screen and (min-width: 1401px) { #page-mode .story-char-1 { top: 1389.0625px; left: 77.65625px; width: 229.6875px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-mode .story-char-1 { top: 99.21875vw; left: 5.54688vw; width: 16.40625vw } } @media screen and (max-width: 750px) { #page-mode .story-char-1 { top: 321.86667vw; left: 1.33333vw; width: 28vw } } #page-mode .story-star { position: absolute; -webkit-transform: scale(0); transform: scale(0); opacity: 0 } @media screen and (min-width: 1401px) { #page-mode .story-star { top: 1265.46875px; left: 7.65625px; width: 292.03125px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-mode .story-star { top: 90.39062vw; left: 0.54688vw; width: 20.85938vw } } @media screen and (max-width: 750px) { #page-mode .story-star { top: 307.2vw; left: 0vw; width: 29.06667vw } } #page-mode .variety-star-0 { position: absolute; z-index: 0; background-image: url(../images/mode/variety-star-0.png) } @media screen and (min-width: 1401px) { #page-mode .variety-star-0 { top: 637.65625px; left: 247.1875px; width: 240.625px; height: 240.625px; background-size: 100% 100% } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-mode .variety-star-0 { top: 45.54688vw; left: 17.65625vw; width: 17.1875vw; height: 17.1875vw; background-size: 100% 100% } } #page-mode .variety-star-1 { position: absolute; z-index: 0; background-image: url(../images/mode/variety-star-1.png) } @media screen and (min-width: 1401px) { #page-mode .variety-star-1 { top: 227.5px; left: 918.75px; width: 261.40625px; height: 253.75px; background-size: 100% 100% } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-mode .variety-star-1 { top: 16.25vw; left: 65.625vw; width: 18.67188vw; height: 18.125vw; background-size: 100% 100% } } #page-mode #sec-variaty { margin-top: -1px; background-size: cover } @media screen and (min-width: 1401px) { #page-mode #sec-variaty { height: 938.4375px } #page-mode #sec-variaty:before { content: ""; position: absolute; z-index: 0; top: 0; left: 50%; width: 100vw; height: 100%; margin-left: -50vw; pointer-events: none; background-image: url(../images/mode/variaty-bg.jpg); background-repeat: repeat-x; background-position: 50% 100%; background-size: auto 938.4375px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-mode #sec-variaty { height: 67.03125vw } #page-mode #sec-variaty:before { content: ""; position: absolute; z-index: 0; top: 0; left: 50%; width: 100vw; height: 100%; margin-left: -50vw; pointer-events: none; background-image: url(../images/mode/variaty-bg.jpg); background-repeat: repeat-x; background-position: 50% 0%; background-size: auto 67.03125vw } } @media screen and (max-width: 750px) { #page-mode #sec-variaty { height: 137.86667vw; background-image: url(../images/mode/variaty-bg_sp.jpg) } } #page-mode .variaty-ttl { position: absolute } @media screen and (min-width: 1401px) { #page-mode .variaty-ttl { top: 43.75px; left: 140px; width: 1135.3125px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-mode .variaty-ttl { top: 3.125vw; left: 10vw; width: 81.09375vw } } @media screen and (max-width: 750px) { #page-mode .variaty-ttl { top: 5.2vw; left: 5.2vw; width: 90.26667vw } } #page-mode .variaty-w { position: absolute } @media screen and (min-width: 1401px) { #page-mode .variaty-w { top: 181.5625px; left: 298.59375px; width: 799.53125px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-mode .variaty-w { top: 12.96875vw; left: 21.32812vw; width: 57.10937vw } } @media screen and (max-width: 750px) { #page-mode .variaty-w { top: 26vw; left: 7.2vw; width: 61.73333vw } } #page-mode .variaty-char { position: absolute; z-index: 1 } @media screen and (min-width: 1401px) { #page-mode .variaty-char { top: 655.15625px; left: 1011.71875px; width: 178.28125px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-mode .variaty-char { top: 46.79688vw; left: 72.26562vw; width: 12.73438vw } } @media screen and (max-width: 750px) { #page-mode .variaty-char { top: 24.93333vw; left: 70.4vw; width: 21.73333vw } } #page-mode .slick-active .variaty-note { opacity: 1 } #page-mode .variaty-note { position: relative; width: 100%; font-family: 'Noto Sans JP',sans-serif; font-weight: bold; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; text-align: center; opacity: 0; color: #000 } @media screen and (min-width: 1401px) { #page-mode .variaty-note { left: 0px; margin-top: 27.34375px; font-size: 19.6875px; line-height: 1.72222 } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-mode .variaty-note { left: 0vw; margin-top: 1.95312vw; font-size: 1.40625vw; line-height: 1.72222 } } @media screen and (max-width: 750px) { #page-mode .variaty-note { left: 0vw; left: -25%; width: 150%; margin-top: 3.86667vw; font-size: 3.2vw; line-height: 1.54167; -webkit-transform: scale(0.95); transform: scale(0.95); -webkit-transform-origin: 50% 0%; transform-origin: 50% 0% } } #page-mode .variaty-carousel-arrow-box { position: absolute; z-index: 1; width: 100% } @media screen and (min-width: 1401px) { #page-mode .variaty-carousel-arrow-box { top: 567.65625px; left: 0px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-mode .variaty-carousel-arrow-box { top: 40.54688vw; left: 0vw } } @media screen and (max-width: 750px) { #page-mode .variaty-carousel-arrow-box { top: 86.8vw; left: 0vw } } #page-mode .variaty-carousel-arrow-prev { position: absolute; cursor: pointer } @media screen and (min-width: 1401px) { #page-mode .variaty-carousel-arrow-prev { left: 135.625px; width: 96.25px; height: 96.25px; margin: -48.125px 0 0 0 } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-mode .variaty-carousel-arrow-prev { left: 9.6875vw; width: 6.875vw; height: 6.875vw; margin: -3.4375vw 0 0 0 } } @media screen and (max-width: 750px) { #page-mode .variaty-carousel-arrow-prev { left: 1.06667vw; width: 11.73333vw; height: 11.73333vw; margin: -5.86667vw 0 0 0 } } #page-mode .variaty-carousel-arrow-prev:before { content: ""; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; -webkit-transition: opacity 0s 0s; transition: opacity 0s 0s; background-image: url(../images/common/arrow-prev_sp_.png); background-size: 100% 100% } #page-mode .variaty-carousel-arrow-prev:after { -webkit-transition: none !important; transition: none !important; background-image: url(../images/common/arrow-prev-on_sp_.png) } #page-mode .variaty-carousel-arrow-next { position: absolute; cursor: pointer } @media screen and (min-width: 1401px) { #page-mode .variaty-carousel-arrow-next { right: 135.625px; width: 96.25px; height: 96.25px; margin: -48.125px 0 0 0 } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-mode .variaty-carousel-arrow-next { right: 9.6875vw; width: 6.875vw; height: 6.875vw; margin: -3.4375vw 0 0 0 } } @media screen and (max-width: 750px) { #page-mode .variaty-carousel-arrow-next { right: 1.06667vw; width: 11.73333vw; height: 11.73333vw; margin: -5.86667vw 0 0 0 } } #page-mode .variaty-carousel-arrow-next:before { content: ""; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; -webkit-transition: opacity 0s 0s; transition: opacity 0s 0s; background-image: url(../images/common/arrow-next_sp_.png); background-size: 100% 100% } #page-mode .variaty-carousel-arrow-next:after { -webkit-transition: none !important; transition: none !important; background-image: url(../images/common/arrow-next-on_sp_.png) } #page-mode .variaty-carousel { position: relative } @media screen and (min-width: 1401px) { #page-mode .variaty-carousel { top: 331.40625px; left: calc(-0.5 * (100vw - 1400px)); width: 100vw } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-mode .variaty-carousel { top: 23.67188vw; left: 0vw } } @media screen and (max-width: 750px) { #page-mode .variaty-carousel { top: 58.4vw; left: 0vw } } @media screen and (min-width: 1401px) { #page-mode .variaty-carousel .slick-list { padding: 0 calc(0.5 * (100vw - 689px)) !important } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-mode .variaty-carousel .slick-list { padding: 0 calc(100vw * (297 / 1280)) !important } } @media screen and (max-width: 750px) { #page-mode .variaty-carousel .slick-list { padding: 0 calc(100vw * (40 / 750)) !important } } #page-mode .video-box { position: relative } #page-mode .mode-movie-play-thumbnail { position: relative; top: 0; left: 0; overflow: hidden; width: 100%; height: auto; font-size: 0; opacity: 0; background-color: #eee } @media screen and (min-width: 1401px) { #page-mode .mode-movie-play-thumbnail { -webkit-transition: opacity 0.3s 1s; transition: opacity 0.3s 1s; border-radius: 5.46875px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-mode .mode-movie-play-thumbnail { -webkit-transition: opacity 0.3s 1s; transition: opacity 0.3s 1s; border-radius: 0.39062vw } } @media screen and (max-width: 750px) { #page-mode .mode-movie-play-thumbnail { -webkit-transition: opacity 0.3s; transition: opacity 0.3s; border-radius: 0.66667vw } } #page-mode .mode-movie-play-thumbnail img { position: relative; top: 0; left: 0; width: 100%; height: auto } #page-mode .mode-movie-play-btn { position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; margin: auto; cursor: pointer; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; background-image: url(../images/character/play-icon.png); background-repeat: no-repeat; background-position: 50% 50% } @media screen and (min-width: 1401px) { #page-mode .mode-movie-play-btn { background-size: 87.5px 87.5px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-mode .mode-movie-play-btn { background-size: 6.25vw 6.25vw } } @media screen and (max-width: 750px) { #page-mode .mode-movie-play-btn { background-size: 13.33333vw 13.33333vw } } #page-mode .variaty-item { position: relative } @media screen and (min-width: 1401px) { #page-mode .variaty-item { padding: 8.75px 25.15625px 0 } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-mode .variaty-item { padding: 0.625vw 1.79687vw 0 } } @media screen and (max-width: 750px) { #page-mode .variaty-item { padding: 1.06667vw 2.13333vw 0 } } #page-mode .variaty-item .variaty-video-box { position: relative; width: 100%; background-color: #761aa9 } @media screen and (min-width: 1401px) { #page-mode .variaty-item .variaty-video-box { margin-top: -38.28125px; border: 5.46875px solid #761aa9; border-radius: 5.46875px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-mode .variaty-item .variaty-video-box { margin-top: -2.73438vw; border: 0.39062vw solid #761aa9; border-radius: 0.39062vw } } @media screen and (max-width: 750px) { #page-mode .variaty-item .variaty-video-box { margin-top: -4.66667vw; border: 1.33333vw solid #761aa9; border-radius: 1.33333vw } } #page-mode .variaty-item .variaty-video-box video { position: absolute; width: 100% } @media screen and (min-width: 1401px) { #page-mode .variaty-item .variaty-video-box video { border-radius: 5.46875px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-mode .variaty-item .variaty-video-box video { border-radius: 0.39062vw } } @media screen and (max-width: 750px) { #page-mode .variaty-item .variaty-video-box video { width: 100%; height: auto; border-radius: 1.33333vw } } #page-mode .variaty-item .variaty-video-box video.state-initial ~ .mode-movie-play-thumbnail { opacity: 1 } @media screen and (min-width: 1401px) { #page-mode .variaty-item .variaty-video-box video.state-initial ~ .mode-movie-play-thumbnail { -webkit-transition: opacity 0.3s 0s; transition: opacity 0.3s 0s } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-mode .variaty-item .variaty-video-box video.state-initial ~ .mode-movie-play-thumbnail { -webkit-transition: opacity 0.3s 0s; transition: opacity 0.3s 0s } } #page-mode .variaty-item .variaty-video-box video.state-playing ~ .mode-movie-play-btn { opacity: 0 } #page-mode .variaty-ttl-bar { position: relative; z-index: 1; font-family: 'Noto Sans JP',sans-serif; font-weight: 900; text-align: center; color: #fff; background-image: url(../images/mode/variaty-ttl-bar.png); background-size: 100% 100% } @media screen and (min-width: 1401px) { #page-mode .variaty-ttl-bar { top: 0px; width: 432.03125px; height: 70px; margin-left: 21.875px; font-size: 26.25px; line-height: 2.54167 } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-mode .variaty-ttl-bar { top: 0vw; width: 30.85938vw; height: 5vw; margin-left: 1.5625vw; font-size: 1.875vw; line-height: 2.54167 } } @media screen and (max-width: 750px) { #page-mode .variaty-ttl-bar { top: 0vw; width: 52.66667vw; height: 8.53333vw; margin-left: 3.06667vw; font-size: 3.2vw; line-height: 2.54167 } } #page-mode .p-1-to-4 { position: absolute; background-image: url(../images/mode/p-1-to-4.png); background-size: 100% 100% } @media screen and (min-width: 1401px) { #page-mode .p-1-to-4 { top: 0px; right: -8.75px; width: 136.71875px; height: 136.71875px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-mode .p-1-to-4 { top: 0vw; right: -0.625vw; width: 9.76562vw; height: 9.76562vw } } @media screen and (max-width: 750px) { #page-mode .p-1-to-4 { top: 0vw; right: -1.06667vw; width: 16.66667vw; height: 16.66667vw } } #page-mode .p-1 { position: absolute; background-image: url(../images/mode/p-1.png); background-size: 100% 100% } @media screen and (min-width: 1401px) { #page-mode .p-1 { top: 0px; right: -8.75px; width: 136.71875px; height: 136.71875px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-mode .p-1 { top: 0vw; right: -0.625vw; width: 9.76562vw; height: 9.76562vw } } @media screen and (max-width: 750px) { #page-mode .p-1 { top: 0vw; right: -1.06667vw; width: 16.66667vw; height: 16.66667vw } } #page-mode .p-2 { position: absolute; background-image: url(../images/mode/p-2.png); background-size: 100% 100% } @media screen and (min-width: 1401px) { #page-mode .p-2 { top: 0px; right: -8.75px; width: 136.71875px; height: 136.71875px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-mode .p-2 { top: 0vw; right: -0.625vw; width: 9.76562vw; height: 9.76562vw } } @media screen and (max-width: 750px) { #page-mode .p-2 { top: 0vw; right: -1.06667vw; width: 16.66667vw; height: 16.66667vw } } #page-mode .p-2-to-4 { position: absolute; background-image: url(../images/mode/p-2-to-4.png); background-size: 100% 100% } @media screen and (min-width: 1401px) { #page-mode .p-2-to-4 { top: 0px; right: -8.75px; width: 136.71875px; height: 136.71875px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-mode .p-2-to-4 { top: 0vw; right: -0.625vw; width: 9.76562vw; height: 9.76562vw } } @media screen and (max-width: 750px) { #page-mode .p-2-to-4 { top: 0vw; right: -1.06667vw; width: 16.66667vw; height: 16.66667vw } } #page-mode #wariocup { position: absolute; top: 0; left: 0 } #page-mode .wariocup-star-0 { position: absolute; z-index: 0; background-image: url(../images/mode/wariocup-star-0.png) } @media screen and (min-width: 1401px) { #page-mode .wariocup-star-0 { top: 178.28125px; left: 10.9375px; width: 267.96875px; height: 267.96875px; background-size: 100% 100% } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-mode .wariocup-star-0 { top: 12.73438vw; left: 0.78125vw; width: 19.14062vw; height: 19.14062vw; background-size: 100% 100% } } #page-mode .wariocup-star-1 { position: absolute; z-index: 0; background-image: url(../images/mode/wariocup-star-1.png) } @media screen and (min-width: 1401px) { #page-mode .wariocup-star-1 { top: 535.9375px; left: 1144.0625px; width: 330.3125px; height: 330.3125px; background-size: 100% 100% } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-mode .wariocup-star-1 { top: 38.28125vw; left: 81.71875vw; width: 23.59375vw; height: 23.59375vw; background-size: 100% 100% } } #page-mode #sec-wariocup { background-size: cover } @media screen and (min-width: 1401px) { #page-mode #sec-wariocup { height: 900.15625px; margin-top: -2px } #page-mode #sec-wariocup:before { content: ""; position: absolute; z-index: 0; top: 0; left: 50%; width: 100vw; height: 100%; margin-left: -50vw; pointer-events: none; background-image: url(../images/mode/wariocup-bg.jpg); background-repeat: repeat-x; background-position: 50% 100%; background-size: auto 900.15625px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-mode #sec-wariocup { height: 64.29688vw; margin-top: -2px } #page-mode #sec-wariocup:before { content: ""; position: absolute; z-index: 0; top: 0; left: 50%; width: 100vw; height: 100%; margin-left: -50vw; pointer-events: none; background-image: url(../images/mode/wariocup-bg.jpg); background-repeat: repeat-x; background-position: 50% 100%; background-size: auto 64.29688vw } } @media screen and (max-width: 750px) { #page-mode #sec-wariocup { height: 226.26667vw; background-image: url(../images/mode/wariocup-bg_sp.jpg) } } #page-mode .wariocup-ttl { position: absolute } @media screen and (min-width: 1401px) { #page-mode .wariocup-ttl { top: 38.28125px; left: 140px; width: 1135.3125px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-mode .wariocup-ttl { top: 2.73438vw; left: 10vw; width: 81.09375vw } } @media screen and (max-width: 750px) { #page-mode .wariocup-ttl { top: 4.93333vw; left: 5.2vw; width: 90.26667vw } } #page-mode .wariocup-w { position: absolute } @media screen and (min-width: 1401px) { #page-mode .wariocup-w { top: 180.46875px; left: 206.71875px; width: 971.25px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-mode .wariocup-w { top: 12.89062vw; left: 14.76562vw; width: 69.375vw } } @media screen and (max-width: 750px) { #page-mode .wariocup-w { top: 26vw; left: 18.4vw; width: 61.46667vw } } #page-mode .wariocup-pic-0 { position: absolute } @media screen and (min-width: 1401px) { #page-mode .wariocup-pic-0 { top: 297.5px; left: 140px; width: 542.5px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-mode .wariocup-pic-0 { top: 21.25vw; left: 10vw; width: 38.75vw } } @media screen and (max-width: 750px) { #page-mode .wariocup-pic-0 { top: 52.8vw; left: 5.33333vw; width: 89.33333vw } } #page-mode .wariocup-pic-1 { position: absolute } @media screen and (min-width: 1401px) { #page-mode .wariocup-pic-1 { top: 297.5px; left: 717.5px; width: 542.5px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-mode .wariocup-pic-1 { top: 21.25vw; left: 51.25vw; width: 38.75vw } } @media screen and (max-width: 750px) { #page-mode .wariocup-pic-1 { top: 123.86667vw; left: 5.33333vw; width: 89.33333vw } } @media screen and (min-width: 1401px) { #page-mode .wariocup-pic-1 p { left: 76.5625px !important; width: 80% !important; width: 328.125px !important; text-align: left !important } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-mode .wariocup-pic-1 p { left: 5.46875vw !important; width: 80% !important; width: 23.4375vw !important; text-align: left !important } } #page-mode .wariocup-pic p { position: relative; width: 100%; font-family: 'Noto Sans JP',sans-serif; font-weight: bold; text-align: center; color: #000 } @media screen and (min-width: 1401px) { #page-mode .wariocup-pic p { left: 0px; margin-top: 27.34375px; font-size: 19.6875px; line-height: 1.72222 } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-mode .wariocup-pic p { left: 0vw; margin-top: 1.95312vw; font-size: 1.40625vw; line-height: 1.72222 } } @media screen and (max-width: 750px) { #page-mode .wariocup-pic p { left: 0vw; margin-top: 3.33333vw; font-size: 3.2vw; line-height: 1.54167 } } #page-mode .wariocup-fuki { position: absolute } @media screen and (min-width: 1401px) { #page-mode .wariocup-fuki { top: 452.8125px; left: 1060.9375px; width: 234.0625px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-mode .wariocup-fuki { top: 32.34375vw; left: 75.78125vw; width: 16.71875vw } } @media screen and (max-width: 750px) { #page-mode .wariocup-fuki { top: 156.13333vw; left: 68vw; width: 34.13333vw } } #page-mode .wariocup-char { position: absolute } @media screen and (min-width: 1401px) { #page-mode .wariocup-char { top: 595px; left: 1174.6875px; width: 133.4375px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-mode .wariocup-char { top: 42.5vw; left: 83.90625vw; width: 9.53125vw } } @media screen and (max-width: 750px) { #page-mode .wariocup-char { top: 179.6vw; left: 83.73333vw; width: 16.26667vw } } #page-mode .wariocup-note { position: absolute; width: 100%; font-family: 'Noto Sans JP',sans-serif; font-weight: 700; color: #000; border-radius: 100px; background-color: #fff } @media screen and (min-width: 1401px) { #page-mode .wariocup-note { top: 760.15625px; left: 140px; width: 1120px; padding: 9.84375px 33.90625px; font-size: 19.6875px; line-height: 1.72222 } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-mode .wariocup-note { top: 54.29688vw; left: 10vw; width: 80vw; padding: 0.70312vw 2.42188vw; font-size: 1.40625vw; line-height: 1.72222 } } @media screen and (max-width: 750px) { #page-mode .wariocup-note { top: 195.46667vw; left: 5.33333vw; width: 89.33333vw; padding: 2.8vw 9.33333vw 2.8vw 0; font-size: 2.66667vw; line-height: 1.6; text-align: center } } #page-mode .wariocup-note a { position: relative; display: inline-block; cursor: pointer; color: #000 } @media screen and (min-width: 1401px) { #page-mode .wariocup-note a { border-bottom: 2px solid #000 } #page-mode .wariocup-note a:hover { color: #e50112; border-bottom: 2px solid #e50112 } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-mode .wariocup-note a { border-bottom: 2px solid #000 } #page-mode .wariocup-note a:hover { color: #e50112; border-bottom: 2px solid #e50112 } } @media screen and (max-width: 750px) { #page-mode .wariocup-note a { border-bottom: 1.5px solid #000 } } #page-mode #sec-mission { background-size: cover } @media screen and (min-width: 1401px) { #page-mode #sec-mission { height: 458.28125px; margin-top: -2px } #page-mode #sec-mission:before { content: ""; position: absolute; z-index: 0; top: 0; left: 50%; width: 100vw; height: 100%; margin-left: -50vw; pointer-events: none; background-image: url(../images/mode/mission-bg.jpg); background-repeat: repeat-x; background-position: 50% 100%; background-size: auto 458.28125px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-mode #sec-mission { height: 32.73438vw; margin-top: -2px } #page-mode #sec-mission:before { content: ""; position: absolute; z-index: 0; top: 0; left: 50%; width: 100vw; height: 100%; margin-left: -50vw; pointer-events: none; background-image: url(../images/mode/mission-bg.jpg); background-repeat: repeat-x; background-position: 50% 100%; background-size: auto 32.73438vw } } @media screen and (max-width: 750px) { #page-mode #sec-mission { height: 112.13333vw; background-image: url(../images/mode/mission-bg_sp.jpg) } } #page-mode .mission-star-0 { position: absolute; z-index: 0; background-image: url(../images/mode/mission-star-0.png) } @media screen and (min-width: 1401px) { #page-mode .mission-star-0 { top: 202.34375px; left: 553.4375px; width: 347.8125px; height: 339.0625px; background-size: 100% 100% } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-mode .mission-star-0 { top: 14.45312vw; left: 39.53125vw; width: 24.84375vw; height: 24.21875vw; background-size: 100% 100% } } #page-mode .mission-star-1 { position: absolute; z-index: 0; background-image: url(../images/mode/mission-star-1.png) } @media screen and (min-width: 1401px) { #page-mode .mission-star-1 { top: 4.375px; left: 1168.125px; width: 261.40625px; height: 253.75px; background-size: 100% 100% } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-mode .mission-star-1 { top: 0.3125vw; left: 83.4375vw; width: 18.67188vw; height: 18.125vw; background-size: 100% 100% } } #page-mode .mission-ttl { position: absolute; width: 100% } @media screen and (min-width: 1401px) { #page-mode .mission-ttl { top: 74.375px; left: 135.625px; width: 557.8125px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-mode .mission-ttl { top: 5.3125vw; left: 9.6875vw; width: 39.84375vw } } @media screen and (max-width: 750px) { #page-mode .mission-ttl { top: 6vw; left: 5.33333vw; width: 89.33333vw } } #page-mode .mission-w { position: absolute; width: 100% } @media screen and (min-width: 1401px) { #page-mode .mission-w { top: 176.09375px; left: 167.34375px; width: 487.8125px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-mode .mission-w { top: 12.57813vw; left: 11.95312vw; width: 34.84375vw } } @media screen and (max-width: 750px) { #page-mode .mission-w { top: 21.2vw; left: 15.6vw; width: 71.2vw } } #page-mode .mission-w a { position: relative; display: inline-block; cursor: pointer; color: inherit; -webkit-box-shadow: inherit; box-shadow: inherit } @media screen and (min-width: 1401px) { #page-mode .mission-w a { padding-bottom: 2px } #page-mode .mission-w a:hover:after { opacity: 0 } #page-mode .mission-w a:after { height: 4px; border: 1px solid #fff } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-mode .mission-w a { padding-bottom: 2px } #page-mode .mission-w a:hover:after { opacity: 0 } #page-mode .mission-w a:after { height: 4px; border: 1px solid #fff } } @media screen and (max-width: 750px) { #page-mode .mission-w a { padding-bottom: 1.5px } #page-mode .mission-w a:after { height: 0.56vw; border: 0.25333vw solid #fff } } #page-mode .mission-w a:after { content: ""; position: absolute; bottom: 0; left: 0; display: block; -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; border-radius: 10px; background-color: #000 } #page-mode .mission-pic { position: absolute; width: 100% } @media screen and (min-width: 1401px) { #page-mode .mission-pic { top: 74.375px; left: 718.59375px; width: 542.5px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-mode .mission-pic { top: 5.3125vw; left: 51.32812vw; width: 38.75vw } } @media screen and (max-width: 750px) { #page-mode .mission-pic { top: 47.86667vw; left: 5.33333vw; width: 89.33333vw } } #page-movie { top: 0 !important; font-family: 'Noto Sans JP',sans-serif } @media (max-aspect-ratio: 1280 / 1460) and (min-width: 751px) { #page-movie .wrapper { height: calc(100vh - 46px) !important } #page-movie #globalFooter { position: absolute; bottom: 0; width: 100%; max-width: 100% } } @media (min-width: 1400px) and (min-height: 1570px) { #page-movie .wrapper { height: calc(100vh - 46px) !important } #page-movie .green-bg:before { height: calc(100vh - 46px - 137px - 40px) !important } #page-movie #globalFooter { position: absolute; bottom: 0; width: 100%; max-width: 100% } } #page-movie section { position: relative } #page-movie .wrapper { position: relative; top: 0; left: 0; width: 100%; max-width: 1400px; height: auto; margin-right: auto; margin-left: auto; background-color: #7defc5 } #page-movie .wrapper.header-content-show { z-index: 1 } @media screen and (min-width: 1401px) { #page-movie .green-bg:before { content: ""; position: absolute; z-index: 0; top: 0; left: 50%; width: 100vw; height: 100%; margin-left: -50vw; pointer-events: none; background-color: #7defc5; background-image: url(../images/movie/bg-up.png?imbypass=true); background-repeat: repeat-x; background-position: 50% 0%; background-size: auto 765.625px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-movie .green-bg:before { content: ""; position: absolute; z-index: 0; top: 0; left: 50%; width: 100vw; height: 100%; margin-left: -50vw; pointer-events: none; background-color: #7defc5; background-image: url(../images/movie/bg-up.png?imbypass=true); background-repeat: repeat-x; background-position: 50% 0%; background-size: auto 54.6875vw } } @media screen and (max-width: 750px) { #page-movie .green-bg { background-image: url(../images/movie/bg-up_sp.png); background-repeat: no-repeat; background-position: 0 0; background-size: 100% auto } } @media screen and (min-width: 1401px) { #page-movie #sec-kv { height: 188.125px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-movie #sec-kv { height: 13.4375vw } } @media screen and (max-width: 750px) { #page-movie #sec-kv { height: 40.53333vw } } #page-movie .ttl { position: absolute } @media screen and (min-width: 1401px) { #page-movie .ttl { top: 79.84375px; left: 541.40625px; width: 319.375px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-movie .ttl { top: 5.70312vw; left: 38.67188vw; width: 22.8125vw } } @media screen and (max-width: 750px) { #page-movie .ttl { top: 22.8vw; left: 30.66667vw; width: 38.93333vw } } @media screen and (min-width: 1401px) { #page-movie #sec-movie { padding-bottom: 65.625px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-movie #sec-movie { padding-bottom: 4.6875vw } } @media screen and (max-width: 750px) { #page-movie #sec-movie { padding-bottom: 13.33333vw } } #page-movie .p-movie-top-section[data-new="true"] .p-movie-top-body::after { display: none } #page-movie .p-movie-top-section { text-align: center } #page-movie .p-movie-top-frame { border: none; -webkit-box-shadow: none; box-shadow: none } @media screen and (min-width: 1401px) { #page-movie .p-movie-top-frame { border-radius: 8.75px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-movie .p-movie-top-frame { border-radius: 0.625vw } } @media screen and (max-width: 750px) { #page-movie .p-movie-top-frame { border-radius: 1.06667vw } } #page-movie .p-movie-top-body { display: inline-block; width: auto; background-color: #fff } @media screen and (min-width: 1401px) { #page-movie .p-movie-top-body { width: 903.4375px; padding: 8.75px; border-radius: 8.75px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-movie .p-movie-top-body { width: 64.53125vw; padding: 0.625vw; border-radius: 0.625vw } } @media screen and (max-width: 750px) { #page-movie .p-movie-top-body { padding: 1.06667vw; border-radius: 1.06667vw } } @media screen and (min-width: 1401px) { #page-movie .p-movie-top-body img { -webkit-transition: -webkit-transform 0.3s; transition: -webkit-transform 0.3s; transition: transform 0.3s; transition: transform 0.3s,-webkit-transform 0.3s } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-movie .p-movie-top-body img { -webkit-transition: -webkit-transform 0.3s; transition: -webkit-transform 0.3s; transition: transform 0.3s; transition: transform 0.3s,-webkit-transform 0.3s } } @media screen and (min-width: 1401px) { #page-movie .p-movie-top-body:hover img { -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.12, 0.92, 0.32, 1.2); transition: -webkit-transform 0.3s cubic-bezier(0.12, 0.92, 0.32, 1.2); transition: transform 0.3s cubic-bezier(0.12, 0.92, 0.32, 1.2); transition: transform 0.3s cubic-bezier(0.12, 0.92, 0.32, 1.2),-webkit-transform 0.3s cubic-bezier(0.12, 0.92, 0.32, 1.2); -webkit-transform: scale(1.03); transform: scale(1.03) } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-movie .p-movie-top-body:hover img { -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.12, 0.92, 0.32, 1.2); transition: -webkit-transform 0.3s cubic-bezier(0.12, 0.92, 0.32, 1.2); transition: transform 0.3s cubic-bezier(0.12, 0.92, 0.32, 1.2); transition: transform 0.3s cubic-bezier(0.12, 0.92, 0.32, 1.2),-webkit-transform 0.3s cubic-bezier(0.12, 0.92, 0.32, 1.2); -webkit-transform: scale(1.03); transform: scale(1.03) } } #page-movie .p-movie-top-img { border: none; -webkit-box-shadow: none; box-shadow: none } @media screen and (min-width: 1401px) { #page-movie .p-movie-top-img { border-radius: 8.75px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-movie .p-movie-top-img { border-radius: 0.625vw } } @media screen and (max-width: 750px) { #page-movie .p-movie-top-img { border-radius: 1.06667vw } } #page-movie .l-container__inner { max-width: 100% } @media screen and (min-width: 1401px) { #page-movie .p-movie-thumb { width: calc(100% * 3/4); margin: 78.75px auto 0 } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-movie .p-movie-thumb { width: calc(100% * 3/4); margin: 5.625vw auto 0 } } @media screen and (max-width: 750px) { #page-movie .p-movie-thumb { margin-top: 0vw } } #page-movie .p-movie-top-head { position: relative; display: block; width: 100%; margin-right: auto; margin-left: auto; font-family: 'Noto Sans JP',sans-serif; font-weight: bold; text-align: center; color: #000; border-radius: 200px; background-color: #fcbf21 } @media screen and (min-width: 1401px) { #page-movie .p-movie-top-head { left: 0px; width: 831.25px; margin-top: 25.15625px; font-size: 26.25px; line-height: 2.5 } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-movie .p-movie-top-head { left: 0vw; width: 59.375vw; margin-top: 1.79687vw; font-size: 1.875vw; line-height: 2.5 } } @media screen and (max-width: 750px) { #page-movie .p-movie-top-head { left: 0vw; padding: 2.66667vw; font-size: 3.2vw; line-height: 2.08333 } } #page-movie .p-movie-thumb-btn.is-active .p-movie-thumb-img { border: none; -webkit-box-shadow: none; box-shadow: none } #page-movie .p-movie-thumb-img { border: none; -webkit-box-shadow: none; box-shadow: none } @media screen and (min-width: 1401px) { #page-movie .p-movie-thumb-img__ico { width: 87.5px; height: 87.5px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-movie .p-movie-thumb-img__ico { width: 6.25vw; height: 6.25vw } } @media screen and (max-width: 750px) { #page-movie .p-movie-thumb-img__ico { width: 13.33333vw; height: 13.33333vw } } #page-movie .p-movie-thumb-list__item[data-new="true"]::before { z-index: 2; font-size: 0; -webkit-animation-name: muku; animation-name: muku; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); animation-timing-function: cubic-bezier(0.6, 0.24, 0.31, 0.75); -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; background-color: transparent; background-image: url(../images/movie/new-mark.png); background-size: 100% 100%; -webkit-animation-fill-mode: both; animation-fill-mode: both } @media screen and (min-width: 1401px) { #page-movie .p-movie-thumb-list__item[data-new="true"]::before { top: -39.375px; right: -18.59375px; width: 85.3125px; height: 85.3125px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-movie .p-movie-thumb-list__item[data-new="true"]::before { top: -2.8125vw; right: -1.32812vw; width: 6.09375vw; height: 6.09375vw } } @media screen and (max-width: 750px) { #page-movie .p-movie-thumb-list__item[data-new="true"]::before { top: -5.86667vw; right: -4vw; width: 17.73333vw; height: 17.73333vw } } #page-movie .p-movie-top-img__label img { width: 100% } @media screen and (max-width: 750px) { #page-movie .p-movie-thumb-list__item { margin-top: 8.4vw } #page-movie .p-movie-thumb-list__item:nth-child(1) { margin-top: 0 } } @media screen and (min-width: 1401px) { #page-movie .p-movie-thumb-btn:hover img { -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.12, 0.92, 0.32, 1.2); transition: -webkit-transform 0.3s cubic-bezier(0.12, 0.92, 0.32, 1.2); transition: transform 0.3s cubic-bezier(0.12, 0.92, 0.32, 1.2); transition: transform 0.3s cubic-bezier(0.12, 0.92, 0.32, 1.2),-webkit-transform 0.3s cubic-bezier(0.12, 0.92, 0.32, 1.2); -webkit-transform: scale(1.07); transform: scale(1.07) } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-movie .p-movie-thumb-btn:hover img { -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.12, 0.92, 0.32, 1.2); transition: -webkit-transform 0.3s cubic-bezier(0.12, 0.92, 0.32, 1.2); transition: transform 0.3s cubic-bezier(0.12, 0.92, 0.32, 1.2); transition: transform 0.3s cubic-bezier(0.12, 0.92, 0.32, 1.2),-webkit-transform 0.3s cubic-bezier(0.12, 0.92, 0.32, 1.2); -webkit-transform: scale(1.07); transform: scale(1.07) } } @media screen and (min-width: 1401px) { #page-movie .p-movie-thumb-btn:hover .p-movie-thumb-img__label::before, #page-movie .p-movie-thumb-btn.is-active .p-movie-thumb-img__label::before { border-width: 7.65625px } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-movie .p-movie-thumb-btn:hover .p-movie-thumb-img__label::before, #page-movie .p-movie-thumb-btn.is-active .p-movie-thumb-img__label::before { border-width: 0.54688vw } } #page-movie .p-movie-thumb-img__label { position: relative; overflow: hidden; border-radius: 0.78125vw } #page-movie .p-movie-thumb-img__label img { -webkit-transition: -webkit-transform 0.3s; transition: -webkit-transform 0.3s; transition: transform 0.3s; transition: transform 0.3s,-webkit-transform 0.3s } #page-movie .p-movie-thumb-img__label::before { content: ""; position: absolute; z-index: 1; width: 100%; height: 100%; -webkit-transition: border-width 0.2s; transition: border-width 0.2s; border-width: 0; border-style: solid; border-color: #fcbf21; border-radius: 0.78125vw } @media screen and (max-width: 750px) { #page-movie .p-movie-thumb-img__label::before { border-width: 0.93333vw; border-color: #000; border-radius: 1.33333vw } } #page-movie .p-movie-thumb-caption { position: relative; display: block; width: 100%; margin-right: auto; margin-left: auto; font-family: 'Noto Sans JP',sans-serif; font-weight: bold; text-align: center; color: #000 } @media screen and (min-width: 1401px) { #page-movie .p-movie-thumb-caption { left: 0px; margin-top: 9.84375px; font-size: 17.5px; line-height: 1.5625 } } @media screen and (min-width: 751px) and (max-width: 1400px) { #page-movie .p-movie-thumb-caption { left: 0vw; margin-top: 0.70312vw; font-size: 1.25vw; line-height: 1.5625 } } @media screen and (max-width: 750px) { #page-movie .p-movie-thumb-caption { margin-top: 2.93333vw; padding: 2.66667vw; font-size: 3.2vw; line-height: 2.08333; border-radius: 100px; background-color: #fcbf21 } } /*# sourceMappingURL=../sourcemaps/style.css.map */