@charset "UTF-8"; :root { --color-bg-gray: rgba(222, 222, 222, 1); --color-white: rgba(255, 255, 255, 1); --color-black: rgba(0, 0, 0, 1); --color-black4: rgba(0, 0, 0, .4); --color-official-purple: rgba(64, 0, 153, 1); --color-purple: rgba(109, 108, 199, 1); --color-pen-black: rgba(53, 45, 53, 1); --color-pen-white: rgba(248, 246, 244, 1); --color-pen-violet: rgba(109, 108, 199, 1); --color-pen-pink: rgba(252, 199, 186, 1); --color-pen-blue: rgba(176, 225, 216, 1); --nav-icon-width: 10.26vw; --btn-slide-nav-width: 15.38vw; --radius: 16px; --bg-object-width: 430.77vw; --fs-10-12: 2.56vw; --fs-12-14: 3.08vw; --fs-14-17: 3.59vw; --fs-20-24: 5.13vw; --fs-24-29: 6.15vw; --fs-36-44: 9.23vw; --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); } @media all and (min-width: 667px) { :root { --bg-object-width: min(152.64vw,2198px); --btn-slide-nav-width: min(5.14vw,74px); --fs-10-12: min(0.83vw,12px); --fs-12-14: min(0.97vw,14px); --fs-14-17: min(1.18vw,17px); --fs-20-24: min(1.67vw,24px); --fs-24-29: min(2.01vw,29px); --fs-36-44: min(3.06vw,44px); --fs-36: min(2.5vw,36px); } } /*** The new CSS reset - version 1.11.2 (last updated 15.11.2023) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Fix mobile Safari increase font-size on landscape mode */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu, summary { list-style: none; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; box-sizing: border-box; } /* Remove details summary webkit styles */ ::-webkit-details-marker { display: none; } html { font-size: 3.125vw; } body { font-size: 14px; font-size: 1.4rem; } /* Small Devices, Tablets */ @media all and (min-width: 768px) { html { font-size: 62.5%; } body { font-size: 14px; font-size: 1.4rem; } } /* PC */ :root { --vh: 100vh; } body { color: var(--color-white); font-family: vdl-v7gothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Sans", "游ゴシック", YuGothic, "メイリオ", Meiryo, "ＭＳＰゴシック", sans-serif; font-weight: 700; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-font-feature-settings: "palt" 1; font-feature-settings: "palt" 1; overscroll-behavior-y: none; touch-action: manipulation; overflow-wrap: anywhere; word-break: normal; line-break: strict; line-height: 1.7; } a { color: #000; text-decoration: none; text-decoration-thickness: 1px; } li { list-style: none; } h1, h2, h3, h4, h5, h6 { font-weight: normal; } .textbox { text-box: trim-both cap alphabetic; } footer { width: 100%; background: var(--color-official-purple); padding-top: min(15.38vw,60px); } footer .copy { padding: min(33.33vw,130px) 0 min(7.69vw,30px) 0; } footer .copy p { color: var(--color-purple); text-align: center; font-size: var(--fs-14-17); font-family: vdl-v7gothic, sans-serif; font-weight: 700; font-style: normal; } @media all and (min-width: 667px) { footer { padding-top: min(5.56vw,80px); } } img { width: 100%; max-width: 100%; height: auto; vertical-align: top; } iframe { border: none; } button { display: block; cursor: pointer; } span.c-icon { position: relative; } span.c-icon svg { position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; } a.c-btn { display: block; border-radius: 100vmax; } a.c-btn.shadow { box-shadow: 4px 4px 0px 0px rgb(0, 0, 0); } a.c-btn.bdr { border: solid min(1.28vw,5px) var(--color-black); box-sizing: content-box; } a.c-btn.h60 { height: min(15.38vw,60px); } a.c-btn.h60 .inr { height: min(15.38vw,60px); } a.c-btn.h80 { height: min(20.51vw,80px); } a.c-btn.h80 .inr { height: min(20.51vw,80px); } a.c-btn .inr { display: flex; align-items: center; justify-content: center; column-gap: min(2.56vw,10px); } a.c-btn.purple { background: var(--color-official-purple); } a.c-btn.purple span.txt { color: var(--color-white); } a.c-btn.purple span.c-icon { width: min(3.08vw,12px); aspect-ratio: 12/10; } a.c-btn.purple svg { fill: var(--color-white); } a.c-btn.white { background: var(--color-white); } a.c-btn.white span.txt { color: var(--color-official-purple); font-size: var(--fs-36-44); font-family: "futura-pt", sans-serif; font-weight: 800; font-style: italic; } a.c-btn.white span.c-icon { width: min(5.9vw,23px); aspect-ratio: 23/20; } a.c-btn.white span.c-icon svg { fill: var(--color-official-purple); } .c-ttl h3.en { font-family: "futura-pt", sans-serif; font-weight: 800; font-style: italic; color: var(--color-white); font-size: var(--fs-20-24); text-align: center; } .c-ttl h3.en span { position: relative; } .c-ttl h3.en span:after { content: ""; width: 100%; height: 2px; background: var(--color-white); position: absolute; bottom: 0px; left: 50%; transform: translate3d(-50%, 0, 0); } .c-ttl h3.ja { font-size: var(--fs-36-44); line-height: 1.2; } .c-ttl h3.ja span { position: relative; padding-bottom: 2px; } .c-ttl h3.ja span:after { content: ""; width: 100%; height: 2px; background: var(--color-white); position: absolute; bottom: 0px; left: 50%; transform: translate3d(-50%, 0, 0); } .c-ttl h4 { font-size: var(--fs-36-44); font-weight: 700; font-family: vdl-v7gothic, sans-serif; font-weight: 700; font-style: normal; text-align: center; line-height: 1.2; margin-top: min(1.79vw,7px); } .c-list_spec { border-bottom: 1px solid rgba(109, 108, 199, 0.2); } .c-list_spec dl { display: flex; border-top: 1px solid rgba(109, 108, 199, 0.2); padding: min(3.85vw,15px) 0; } .c-list_spec dl dt, .c-list_spec dl dd { color: var(--color-purple); font-size: var(--fs-14-17); font-family: vdl-v7gothic, sans-serif; font-weight: 700; font-style: normal; } .c-list_spec dl dt { width: 39.7%; } .c-list_spec dl dd { width: 60.3%; } span.c-circle { border-radius: 100vmax; } .c-nav h3 { font-family: "futura-pt", sans-serif; font-weight: 800; font-style: italic; text-align: center; margin-bottom: min(7.69vw,30px); font-size: var(--fs-20-24); } .c-nav h3 span { position: relative; padding-bottom: 2px; } .c-nav h3 span:after { content: ""; width: 100%; height: 2px; background: var(--color-white); position: absolute; display: block; bottom: 0px; left: 50%; transform: translate3d(-50%, 0, 0); } .c-nav .c-list_nav { display: flex; justify-content: center; width: 100%; } .c-nav ul li { margin-bottom: min(5.13vw,20px); } .c-nav ul li:last-child { margin-bottom: 0px; } .c-nav ul li a { display: block; } .c-nav ul li .inr { display: flex; column-gap: min(2.56vw,10px); align-items: center; } .c-nav ul li span.c-circle { width: min(8.21vw,32px); height: min(8.21vw,32px); background: var(--color-white); display: block; border: 2px solid var(--color-black); box-sizing: content-box; position: relative; filter: drop-shadow(2px 2px 0px rgb(0, 0, 0)); } .c-nav ul li span.c-circle span.c-icon { width: min(2.05vw,8px); aspect-ratio: 12/10; display: block; position: absolute; top: 50%; left: 50%; margin: max(-0.77vw,-3px) 0 0 max(-0.9vw,-3.5px); } .c-nav ul li span.c-circle span.c-icon svg { fill: var(--color-purple); } .c-nav ul li dl dt, .c-nav ul li dl dd { color: var(--color-white); line-height: 1; } .c-nav ul li dl dt { font-size: var(--fs-12-14); font-family: "futura-pt", sans-serif; font-weight: 800; font-style: italic; margin-bottom: 0.2em; } .c-nav ul li dl dd { font-size: var(--fs-20-24); font-family: vdl-v7gothic, sans-serif; font-weight: 700; font-style: normal; } .c-backtotop a { display: block; position: relative; } .c-backtotop a.jump { z-index: 1000; } .c-backtotop a.jump figure.is_crouch { opacity: 0; } .c-backtotop a.jump figure.is_jump { opacity: 1; transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); transform: translate3d(0, -500px, 0); } .c-backtotop figure { width: min(18.97vw,74px); margin-inline: auto; margin-bottom: min(5.13vw,20px); } .c-backtotop figure.is_jump { width: min(30.77vw,120px); position: absolute; top: max(-10.26vw,-40px); left: 50%; margin-left: max(-12.82vw,-50px); opacity: 0; } .c-backtotop p { display: flex; justify-content: center; align-items: center; column-gap: min(1.54vw,6px); } .c-backtotop p span.txt { color: var(--color-white); font-size: var(--fs-20-24); font-family: "futura-pt", sans-serif; font-weight: 800; font-style: italic; line-height: 1; } .c-backtotop p span.c-icon { width: min(3.08vw,12px); height: min(2.67vw,10.4px); } .c-backtotop p span.c-icon svg { fill: var(--color-white); } @media all and (min-width: 667px) { a.c-btn.shadow { box-shadow: 5px 5px 0px 0px rgb(0, 0, 0); } a.c-btn.bdr { border: solid min(0.42vw,6px) var(--color-black); } a.c-btn.h60 { height: min(4.17vw,60px); } a.c-btn.h60 .inr { height: min(4.17vw,60px); } a.c-btn.h80 { height: min(6.67vw,96px); } a.c-btn.h80 .inr { height: min(6.67vw,96px); } a.c-btn .inr { column-gap: min(1.39vw,20px); } a.c-btn.purple span.c-icon { width: min(0.83vw,12px); aspect-ratio: 12/10; } a.c-btn.white span.c-icon { width: min(1.94vw,28px); } #product_spec a.c-btn.shadow { box-shadow: 5px 5px 0px 0px rgb(0, 0, 0); } #product_spec a.c-btn.h60 { height: min(5.14vw,74px); } #product_spec a.c-btn.h60.bdr { border: solid min(0.28vw,4px) var(--color-black); } #product_spec a.c-btn.h60 .inr { height: min(5.14vw,74px); } #product_spec a.c-btn.h60 span.txt { font-size: var(--fs-14-17); } #product_spec a.c-btn.h60.purple span.c-icon { width: min(1.25vw,18px); } .c-ttl h3.en span:after { height: 2.5px; } .c-ttl h3.ja { font-size: var(--fs-36-44); line-height: 1.2; } .c-ttl h3.ja span { position: relative; padding-bottom: 2px; } .c-ttl h4 { margin-top: min(0.69vw,10px); } .c-list_spec dl { padding: min(1.25vw,18px) 0; } .c-nav h3 { margin-bottom: min(2.08vw,30px); } .c-nav ul li { margin-bottom: min(1.67vw,24px); } .c-nav ul li .inr { column-gap: min(0.69vw,10px); } .c-nav ul li span.c-circle { width: min(2.78vw,40px); height: min(2.78vw,40px); } .c-nav ul li span.c-circle span.c-icon { width: min(0.69vw,10px); margin: max(-0.24vw,-3.5px) 0 0 max(-0.24vw,-3.5px); } .c-backtotop figure { width: min(6.74vw,97px); margin-bottom: min(1.67vw,24px); } .c-backtotop figure.is_jump { width: min(10.42vw,150px); top: max(-3.47vw,-50px); margin-left: max(-16.41vw,-64px); } } [data-page=lp] main { width: 93.84%; margin-inline: auto; } #bg { width: 100%; height: 100vh; position: fixed; top: 0px; left: 0px; } #bg:before { content: ""; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; background-size: cover; background-position: center; background-image: url(../images/common/bg_sp.webp); } #b-bnr_game { display: none; } #wrapper { padding: 3.08vw 0 0 0; position: relative; } #wrapper .scroll_stoker { width: 15.38vw; aspect-ratio: 1/1; position: fixed; bottom: 2.56vw; left: 5.13vw; z-index: 100; } #wrapper .scroll_stoker a { display: block; width: 100%; } #wrapper .scroll_stoker figure { width: 17.44vw; filter: drop-shadow(4px 4px 0 rgb(0, 0, 0)); } #wrapper .scroll_stoker figure img { border: 4px solid var(--color-black); border-radius: 16px; overflow: hidden; } #wrapper .scroll_stoker p { width: 23.08vw; position: relative; left: -3.08vw; margin-top: 1.54vw; } #bg_object { width: 100%; height: 50%; position: absolute; left: 0px; top: 153.85vw; pointer-events: none; z-index: 2; overflow: hidden; } #bg_object figure { width: var(--bg-object-width); aspect-ratio: 2230/1853; position: absolute; left: 50%; top: 0px; margin-left: calc(var(--bg-object-width) / -2); } #kv { background: var(--color-purple); border-radius: var(--radius) var(--radius) 0 0; position: relative; } #kv .s-inner { width: 100%; position: relative; padding-top: 56.92vw; } #kv .img_airsteppy { position: absolute; top: 0px; left: 0px; width: 62.05vw; height: 69.23vw; } #kv .img_airsteppy figure { width: 65.13vw; position: absolute; left: -3.59vw; top: -2.05vw; } #kv .list_pens { width: 56%; /*65.57%*/ margin-inline: auto; position: relative; z-index: 2; } #kv .list_pens ul { display: flex; justify-content: center; justify-content: space-between; } #kv .list_pens ul li { width: 7.28vw; } #kv hgroup { width: 90.16%; margin-inline: auto; margin-bottom: 3.85vw; position: relative; z-index: 2; } #kv hgroup p.ja { width: 27.69vw; height: 4.36vw; margin-inline: auto; margin-bottom: 2.05vw; } #kv hgroup p.txt_lead { width: 62.05vw; height: 4.62vw; margin-inline: auto; margin-top: 3.59vw; line-height: 1; } #kv h2 { width: 15.38vw; margin-inline: auto; position: relative; z-index: 2; margin-top: 5.13vw; } #lead { width: 100%; background: var(--color-purple); position: relative; } #lead .s-inner { position: relative; width: 100%; padding: 23.08vw 0 0 0; } #lead .c-lead { width: 89.07%; margin-inline: auto; padding-bottom: 65.64vw; z-index: 2; position: relative; } #lead .c-lead p { font-size: var(--fs-20-24); line-height: 2; text-align: center; margin-bottom: 2em; } #lead .c-lead p:nth-last-of-type(1) { margin-bottom: 0px; } #lead .c-lead p span.s { display: block; text-align: center; position: relative; } #lead .c-lead p span.s span.s0 { position: absolute; top: 0; text-stroke: 6px rgb(38, 0, 92); -webkit-text-stroke: 6px rgb(38, 0, 92); color: var(--color-black4); font-weight: 700; font-family: vdl-v7gothic, sans-serif; font-weight: 700; font-style: normal; stroke-linejoin: round; } #lead .c-lead p span.s1 { position: relative; color: var(--color-white); } #lead nav.c-nav { padding-bottom: 25.64vw; } #lead .sticky_as { width: 103%; padding-bottom: 10px; display: flex; justify-content: flex-end; pointer-events: none; position: sticky; top: 2.56vw; left: 0; overflow: hidden; z-index: 3; } #lead .sticky_as figure { width: 37.95vw; height: 36.41vw; transform-origin: top right; position: relative; right: 7.18vw; filter: drop-shadow(8px 8px 0 rgba(0, 0, 0, 0.3)); } #innovation { background: var(--color-white); } #innovation .s-inner { padding: 17.95vw 0 27.18vw 0; } #innovation .c-ttl { margin-bottom: 3.08vw; } #innovation .c-ttl h3, #innovation .c-ttl h4 { color: var(--color-purple); } #innovation .c-ttl h3 span:after { background: var(--color-purple); } #innovation .c-ttl h4 { font-weight: 700; font-family: vdl-v7gothic, sans-serif; font-weight: 700; font-style: normal; } #innovation .c-icons { margin-bottom: 16.41vw; } #innovation .c-icons ul { display: flex; justify-content: center; column-gap: 5.13vw; } #innovation .c-icons ul li { width: 10.26vw; } #innovation .b-list_innovation { margin-bottom: 15.38vw; } #innovation .b-list_innovation.nosnap ul { scroll-snap-stop: none; scroll-behavior: auto; } #innovation .b-list_innovation.nosnap ul li { scroll-snap-align: none; } #innovation .b-list_innovation ul { display: flex; scroll-snap-type: x mandatory; overflow-x: auto; overflow-y: hidden; padding-bottom: 4.1vw; } #innovation .b-list_innovation ul li { flex-shrink: 0; scroll-snap-align: center; width: 78.46vw; } #innovation .b-list_innovation ul li .list_wrap { width: 74.36vw; min-height: 129.23vw; border-radius: 8px; filter: drop-shadow(8px 8px 0px rgba(0, 0, 0, 0.3)); position: relative; background: var(--color-purple); } #innovation .b-list_innovation ul li .inr { width: 100%; position: absolute; top: 0px; left: 0px; padding: 5.13vw; } #innovation .b-list_innovation ul li:nth-child(1) { width: 83.59vw; } #innovation .b-list_innovation ul li:nth-child(1) .list_wrap { margin-left: 5.13vw; } #innovation .b-list_innovation ul .innovation_header { display: flex; align-items: flex-end; column-gap: 3.08vw; } #innovation .b-list_innovation ul .innovation_header .innovation_header_l { width: 10.26vw; } #innovation .b-list_innovation ul .innovation_header .innovation_header_r p { font-size: var(--fs-12-14); line-height: 1; margin-bottom: 0.25em; } #innovation .b-list_innovation ul .innovation_header .innovation_header_r h4 { font-size: var(--fs-24-29); font-family: "futura-pt", sans-serif; font-weight: 800; font-style: italic; line-height: 0.9; letter-spacing: -0.05em; white-space: nowrap; } #innovation .b-list_innovation ul .innovation_img { margin: 8.97vw 0 6.92vw 0; } #innovation .b-list_innovation ul .innovation_img figure { width: 41.03vw; margin-inline: auto; } #innovation .b-list_innovation ul .innovation_description h5 { font-size: var(--fs-20-24); font-family: vdl-v7gothic, sans-serif; font-weight: 700; font-style: normal; line-height: 1.7; white-space: nowrap; } #innovation .b-list_innovation ul .innovation_description sup { vertical-align: super; line-height: 0.9; font-size: var(--fs-14-17); } #innovation .b-list_innovation ul .innovation_description p { font-size: var(--fs-14-17); margin-top: 1em; } #innovation .b-list_innovation ul .innovation_description p.note { font-size: var(--fs-12-14); } #innovation .c-nav_slide { display: flex; justify-content: center; align-items: center; column-gap: 6.15vw; margin-top: 7.69vw; } #innovation .c-nav_slide button { display: block; position: relative; width: var(--btn-slide-nav-width); aspect-ratio: 1/1; border: 4px solid var(--color-black); box-sizing: content-box; border-radius: 100vmax; filter: drop-shadow(4px 4px 0 var(--color-black)); } #innovation .c-nav_slide button.disable { opacity: 0.4; pointer-events: none; } #innovation .c-nav_slide button .inr { width: 100%; height: 100%; top: 0px; left: 0px; background: rgb(222, 222, 222); position: absolute; display: flex; align-items: center; justify-content: center; border-radius: 100vmax; } #innovation .c-nav_slide button .c-icon { width: 3.08vw; aspect-ratio: 12/10; } #innovation .c-nav_slide button .c-icon svg { fill: var(--color-purple); } #innovation .c-nav_slide button[data-slide-prev] .c-icon { rotate: 180deg; position: relative; left: -1px; } #innovation .b-body { background: var(--color-bg-gray); width: 92.97%; margin-inline: auto; border-radius: 8px; } #innovation .b-body h3 { color: var(--color-official-purple); } #innovation .b-body .body_description ul li { color: var(--color-purple); } #innovation .b-body { width: 89.07%; margin-inline: auto; background: rgb(234, 234, 234); filter: drop-shadow(8px 8px 0 rgba(0, 0, 0, 0.3)); } #innovation .b-body .body_inner { padding: 3.08vw 3.08vw 28.21vw 3.08vw; } #innovation .b-body h3 { font-family: "futura-pt", sans-serif; font-weight: 800; font-style: italic; font-size: var(--fs-20-24); line-height: 1; margin-bottom: 15.38vw; } #innovation .b-body .body_content { width: 100%; aspect-ratio: 1/1; position: relative; } #innovation .b-body .body_content figure { width: 100%; position: relative; } #innovation .b-body .body_content figure:after { content: ""; width: 79.74vw; height: 90.77vw; background: url(../images/innovation/lines.svg) top left no-repeat; background-size: cover; position: absolute; top: 0px; left: -1.79vw; } #innovation .b-body .body_content .body_description { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; } #innovation .b-body .body_content .body_description ul { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; } #innovation .b-body .body_content .body_description ul li { position: absolute; } #innovation .b-body .body_content .body_description ul li p { font-size: var(--fs-14-17); font-family: vdl-v7gothic, sans-serif; font-weight: 700; font-style: normal; } #innovation .b-body .body_content .body_description ul li:nth-child(1) { top: -7.69vw; left: 28.21vw; } #innovation .b-body .body_content .body_description ul li:nth-child(2) { top: 24.36vw; left: 0vw; } #innovation .b-body .body_content .body_description ul li:nth-child(3) { top: 71.79vw; left: 37.18vw; } #innovation .b-body .body_content .body_description ul li:nth-child(4) { top: 88.46vw; left: 16.67vw; } #colors { background: var(--color-purple); } #colors .s-inner { padding: 25.13vw 0 25.13vw 0; } #colors .c-ttl { margin-bottom: 16.41vw; } #colors .c-list_colors { margin-top: 3.33vw; } #colors .c-list_colors ul { display: flex; justify-content: center; column-gap: 2.05vw; } #colors .c-list_colors ul li { width: 5.13vw; aspect-ratio: 1/1; position: relative; } #colors .c-list_colors ul li span { display: block; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; text-indent: -10000px; border: 2px solid var(--color-white); border-radius: 100vmax; } #colors .c-list_colors ul li span.black { background: var(--color-pen-black); } #colors .c-list_colors ul li span.white { background: var(--color-pen-white); } #colors .c-list_colors ul li span.violet { background: var(--color-pen-violet); } #colors .c-list_colors ul li span.pink { background: var(--color-pen-pink); } #colors .c-list_colors ul li span.blue { background: var(--color-pen-blue); } #colors .c-pen_colors { width: 89.07%; margin-inline: auto; } #colors .c-pen_colors ul { display: flex; width: 100%; } #colors .c-pen_colors ul li { width: 20%; } #colors .c-pen_colors ul li figure { width: 57.57%; margin-inline: auto; margin-bottom: 2px; } #colors .c-pen_colors ul li p { font-size: var(--fs-10-12); font-family: vdl-v7gothic, sans-serif; font-weight: 700; font-style: normal; line-height: 1.1; text-align: center; padding-top: 1em; letter-spacing: -0.06em; } #colors .c-pen_colors ul span.c-color { width: 100%; height: 16px; display: block; border: 1px solid var(--color-white); position: relative; } #colors .c-pen_colors ul span.c-color span { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; } #colors .c-pen_colors ul span.c-color span.black { background: var(--color-pen-black); } #colors .c-pen_colors ul span.c-color span.white { background: var(--color-pen-white); } #colors .c-pen_colors ul span.c-color span.violet { background: var(--color-pen-violet); } #colors .c-pen_colors ul span.c-color span.pink { background: var(--color-pen-pink); } #colors .c-pen_colors ul span.c-color span.blue { background: var(--color-pen-blue); } #product_spec { background: var(--color-bg-gray); } #product_spec .s-inner { padding: 25.13vw 0 23.08vw 0; } #product_spec .c-ttl { margin-bottom: 9.23vw; } #product_spec .c-ttl :is(h3, h4) { color: var(--color-purple); text-align: center; } #product_spec .c-ttl h3 span:after { background: var(--color-purple); } #product_spec .img_product { width: 82.51%; margin-inline: auto; margin-bottom: min(12.31vw,48px); } #product_spec .c-list_spec { width: 82.51%; margin-inline: auto; } #product_spec .c-btn_wrap { width: 89.18%; margin-inline: auto; margin-top: min(11.28vw,44px); } #product_spec .c-btn_wrap a span.txt { font-family: vdl-v7gothic, sans-serif; font-weight: 700; font-style: normal; } #special_content { background: var(--color-official-purple); position: relative; } #special_content .s-inner { padding: min(24.62vw,96px) 0 min(25.64vw,100px) 0; position: relative; z-index: 2; } #special_content .c-ttl { margin-bottom: 6.15vw; } #special_content .c-ttl h4 { width: 90.16%; margin-inline: auto; } #special_content .c-content { width: 90.16%; margin-inline: auto; } #special_content .c-content .c-movie { width: 100%; aspect-ratio: 16/9; position: relative; border-radius: 8px; overflow: hidden; margin-bottom: 8.72vw; filter: drop-shadow(8px 8px 0px rgba(0, 0, 0, 0.3)); } #special_content .c-content .c-movie iframe { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; } #special_content .c-content .c-txt { width: 92.72%; margin-inline: auto; } #special_content .c-content h4 { margin-bottom: 1em; } #special_content .c-content h4 span.row { display: flex; line-height: 1; font-size: var(--fs-20-24); font-family: vdl-v7gothic, sans-serif; font-weight: 700; font-style: normal; } #special_content .c-content h4 span.row:nth-of-type(2) { margin-top: 0.8em; } #special_content .c-content h4 span.row span { display: block; font-weight: 700; font-family: vdl-v7gothic, sans-serif; font-weight: 700; font-style: normal; } #special_content .c-content h4 span.row span.logo0 { width: 27.69vw; margin: 0 1.54vw; } #special_content .c-content h4 span.row span.logo1 { width: 43.08vw; margin: 0 1.54vw; } #special_content .c-content p { font-size: var(--fs-14-17); line-height: 1.75; font-family: vdl-v7gothic, sans-serif; font-weight: 700; font-style: normal; } #special_content .c-content .c-wrap_btn { margin-top: 5.13vw; } #special_content .b-about_game { width: 100%; margin-top: 23.59vw; } #special_content .b-about_game .about_header { margin-bottom: 21.03vw; } #special_content .b-about_game .c-airsteppy { width: 99.8vw; aspect-ratio: 390/455; left: -3.6%; position: relative; overflow: hidden; pointer-events: none; } #special_content .b-about_game .c-airsteppy .airsteppy { width: 100%; position: relative; left: -0.7%; } #special_content .b-about_game .c-airsteppy .airsteppy p { position: relative; top: 2.56vw; } #special_content .b-about_game .c-airsteppy h4 { position: absolute; width: 63.58%; top: 16.67vw; left: 50%; margin-left: -31.79%; } #special_content .b-about_game h5 { position: relative; width: 87.43%; margin-inline: auto; margin-top: -17.95vw; } #special_content .c-list_description { width: 90.16%; margin-inline: auto; } #special_content .c-list_description ul li { margin-bottom: 12.31vw; } #special_content .c-list_description ul li:last-child { margin-bottom: 0px; } #special_content .c-list_description ul li:nth-child(2n) .cols { flex-direction: row; } #special_content .c-list_description ul li:nth-child(1) figure { width: 38.46vw; right: -3.08vw; } #special_content .c-list_description ul li:nth-child(1) .col_l { width: calc(46.4% - 2.56vw); } #special_content .c-list_description ul li:nth-child(1) .col_r { width: 53.6%; padding-left: 3.08vw; } #special_content .c-list_description ul li:nth-child(2) figure { width: 24.1vw; left: 1.54vw; } #special_content .c-list_description ul li:nth-child(2) .col_l { width: calc(37% - min(2.56vw,10px)); } #special_content .c-list_description ul li:nth-child(2) .col_r { width: 63%; padding-right: 3.08vw; } #special_content .c-list_description ul li:nth-child(3) figure { width: 24.1vw; right: 1.54vw; } #special_content .c-list_description ul li:nth-child(3) .col_l { width: calc(28.83% - 2.56vw); } #special_content .c-list_description ul li:nth-child(3) .col_r { width: 70%; padding-left: 3.08vw; } #special_content .c-list_description ul li:nth-child(4) figure { width: 28.21vw; left: 2.56vw; } #special_content .c-list_description ul li:nth-child(4) .col_l { width: calc(44% - min(2.56vw,10px)); } #special_content .c-list_description ul li:nth-child(4) .col_r { width: 56%; padding-right: 3.08vw; } #special_content .c-list_description ul .cols { display: flex; align-items: center; justify-content: space-between; flex-direction: row-reverse; } #special_content .c-list_description ul .cols figure { position: relative; } #special_content .c-list_description ul .cols .col_r p { font-size: var(--fs-14-17); line-height: 1.7; font-family: vdl-v7gothic, sans-serif; font-weight: 700; font-style: normal; } #special_content .c-list_description ul .cols .col_r p span.line_through { position: relative; } #special_content .c-list_description ul .cols .col_r p span.line_through:after { content: ""; width: 100%; height: 100%; display: block; position: absolute; top: 0px; left: 0px; background: url(../images/special/linethourgh.svg) center center no-repeat; background-size: 100% auto; } #special_content .c-aspect { width: 83.59vw; margin-inline: auto; margin-top: 16.41vw; } @media all and (min-width: 667px) { [data-page=lp] #wrapper { padding-top: 48px; } [data-page=lp] #wrapper .scroll_stoker { width: min(4.17vw,60px); bottom: min(1.39vw,20px); right: min(2.78vw,40px); overflow: hiddden; left: auto; } [data-page=lp] #wrapper .scroll_stoker figure { width: min(5.56vw,80px); filter: drop-shadow(4px 4px 0 rgb(0, 0, 0)); } [data-page=lp] #wrapper .scroll_stoker figure img { border: 6px solid var(--color-black); border-radius: 16px; overflow: hidden; } [data-page=lp] #wrapper .scroll_stoker p { width: min(7.64vw,110px); position: relative; left: max(-1.11vw,-16px); margin-top: min(0.42vw,6px); } [data-page=lp] #bg:before { background-image: url(../images/common/bg_pc.webp); background-size: 1440px 864px; } [data-page=lp] #b-bnr_game { position: fixed; bottom: 48px; left: 50%; margin-left: max(-46.67vw,-672px); width: min(59.31vw,854px); aspect-ratio: 854/430; background: rgba(0, 0, 0, 0.8); border-radius: 8px; display: block; } [data-page=lp] #b-bnr_game .bnr_inner { padding: min(3.33vw,48px); } [data-page=lp] #b-bnr_game .c-ttl { margin-bottom: min(1.67vw,24px); } [data-page=lp] #b-bnr_game .c-ttl h3 { font-size: min(1.11vw,16px); margin-bottom: min(0.56vw,8px); } [data-page=lp] #b-bnr_game .c-ttl p { width: min(22.92vw,330px); margin-inline: auto; } [data-page=lp] #b-bnr_game .bnr_content { display: flex; align-items: center; justify-content: space-between; } [data-page=lp] #b-bnr_game .bnr_content .c-movie { width: 48.41%; aspect-ratio: 367/206; position: relative; border-radius: 4px; overflow: hidden; } [data-page=lp] #b-bnr_game .bnr_content .c-movie iframe { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; } [data-page=lp] #b-bnr_game .bnr_content .cols_r { width: 49.8%; position: relative; left: min(0.35vw,5px); } [data-page=lp] #b-bnr_game h4 { margin-bottom: 0.8em; line-height: 1; font-size: var(--fs-20-24); } [data-page=lp] #b-bnr_game h4 span.row { display: flex; align-items: center; margin-bottom: min(1.11vw,16px); } [data-page=lp] #b-bnr_game h4 span.row span { display: block; font-weight: 700; font-family: vdl-v7gothic, sans-serif; font-weight: 700; font-style: normal; } [data-page=lp] #b-bnr_game h4 span.row span.logo0 { width: min(8.68vw,125px); height: min(1.46vw,21px); margin: 0 min(0.42vw,6px); } [data-page=lp] #b-bnr_game h4 span.row span.logo1 { width: min(13.75vw,198px); height: min(1.67vw,24px); margin: 0 min(0.42vw,6px); } [data-page=lp] #b-bnr_game .c-wrap_btn a.c-btn.h80 { height: min(6.67vw,96px); border-width: 6px; } [data-page=lp] #b-bnr_game .c-wrap_btn a.c-btn.h80 .inr { height: min(6.67vw,96px); column-gap: min(1.25vw,18px); } [data-page=lp] #b-bnr_game .c-wrap_btn a.c-btn.h80 span.c-icon { width: min(2.08vw,30px); } [data-page=lp] #b-bnr_game .c-wrap_btn a.c-btn.h80 span.txt { font-size: var(--fs-36); } [data-page=lp] main { width: 448px; width: min(31.11vw,448px); margin: 0; left: 50%; position: relative; margin-left: min(15.56vw,224px); } [data-page=lp] #bg_object { width: 100%; height: 50%; position: absolute; left: 0%; top: min(48.61vw,700px); overflow: hidden; pointer-events: none; } [data-page=lp] #bg_object figure { width: var(--bg-object-width); aspect-ratio: 2230/1853; position: absolute; left: 50%; top: 0px; margin-left: calc(var(--bg-object-width) / -2); } [data-page=lp] #kv .s-inner { padding-top: min(19.03vw,274px); } [data-page=lp] #kv .img_airsteppy { width: min(20.56vw,296px); height: min(22.92vw,330px); } [data-page=lp] #kv .img_airsteppy figure { width: min(21.32vw,307px); left: -3.565%; top: max(-1.11vw,-16px); } [data-page=lp] #kv .list_pens { width: 56%; margin-top: min(1.25vw,18px); } [data-page=lp] #kv .list_pens ul li { width: min(2.43vw,35px); } [data-page=lp] #kv hgroup { width: min(27.99vw,403px); margin-bottom: min(0.69vw,10px); } [data-page=lp] #kv hgroup p.ja { width: min(9.17vw,132px); height: min(1.39vw,20px); margin-bottom: min(0.56vw,8px); } [data-page=lp] #kv hgroup p.txt_lead { width: min(20.56vw,296px); height: min(1.53vw,22px); margin-top: min(0.83vw,12px); } [data-page=lp] #kv h2 { width: min(5.14vw,74px); margin-top: min(1.81vw,26px); } [data-page=lp] #lead { width: 100%; background: var(--color-purple); position: relative; } [data-page=lp] #lead .s-inner { padding: min(6.94vw,100px) 0 0 0; } [data-page=lp] #lead .c-lead { width: 89.07%; padding-bottom: min(21.74vw,313px); } [data-page=lp] #lead .c-lead p { line-height: 2; margin-bottom: 2.2em; } [data-page=lp] #lead .c-lead p:nth-last-of-type(1) { margin-bottom: 0px; } [data-page=lp] #lead .c-lead p span.s span.s0 { text-stroke: 10px rgb(38, 0, 92); -webkit-text-stroke: 10px rgb(38, 0, 92); } [data-page=lp] #lead nav.c-nav { padding-bottom: min(8.82vw,127px); } [data-page=lp] #lead .sticky_as { top: min(0.69vw,10px); overflow: visible; width: 100%; } [data-page=lp] #lead .sticky_as figure { width: min(12.64vw,182px); height: min(11.94vw,172px); right: min(0.69vw,10px); } [data-page=lp] #innovation .s-inner { padding: min(6.67vw,96px) 0 min(8.06vw,116px) 0; } [data-page=lp] #innovation .c-ttl { margin-bottom: min(1.04vw,15px); } [data-page=lp] #innovation .c-icons { margin-bottom: min(5.42vw,78px); } [data-page=lp] #innovation .c-icons ul { column-gap: min(1.25vw,18px); } [data-page=lp] #innovation .c-icons ul li { width: min(3.4vw,49px); } [data-page=lp] #innovation .b-list_innovation ul::-webkit-scrollbar { display: none; /* Chrome, Safari, 新Edge */ } [data-page=lp] #innovation .b-list_innovation { margin-bottom: min(5.14vw,74px); } [data-page=lp] #innovation .b-list_innovation ul { padding-bottom: min(1.11vw,16px); scrollbar-width: none; -ms-overflow-style: none; } [data-page=lp] #innovation .b-list_innovation ul li { width: min(26.81vw,386px); } [data-page=lp] #innovation .b-list_innovation ul li .list_wrap { width: min(25.07vw,361px); min-height: min(43.13vw,621px); border-radius: 10px; filter: drop-shadow(10px 10px 0px rgba(0, 0, 0, 0.3)); } [data-page=lp] #innovation .b-list_innovation ul li .inr { padding: min(1.74vw,25px); } [data-page=lp] #innovation .b-list_innovation ul li:nth-child(1) { width: min(28.54vw,411px); } [data-page=lp] #innovation .b-list_innovation ul li:nth-child(1) .list_wrap { margin-left: min(1.74vw,25px); } [data-page=lp] #innovation .b-list_innovation ul .innovation_header { column-gap: min(1.04vw,15px); } [data-page=lp] #innovation .b-list_innovation ul .innovation_header .innovation_header_l { width: min(3.4vw,49px); } [data-page=lp] #innovation .b-list_innovation ul .innovation_header .innovation_header_r p { line-height: 1; margin-bottom: 0.5em; } [data-page=lp] #innovation .b-list_innovation ul .innovation_header .innovation_header_r h4 { line-height: 0.8; } [data-page=lp] #innovation .b-list_innovation ul .innovation_img { margin: min(2.92vw,42px) 0 min(2.08vw,30px) 0; } [data-page=lp] #innovation .b-list_innovation ul .innovation_img figure { width: min(13.61vw,196px); } [data-page=lp] #innovation .c-nav_slide { column-gap: min(2.08vw,30px); margin-top: min(0.56vw,8px); } [data-page=lp] #innovation .c-nav_slide button { border: 5px solid var(--color-black); filter: drop-shadow(5px 5px 0 var(--color-black)); } [data-page=lp] #innovation .c-nav_slide button .c-icon { width: min(1.11vw,16px); } [data-page=lp] #innovation .b-body { border-radius: 10px; filter: drop-shadow(10px 10px 0 rgba(0, 0, 0, 0.3)); } [data-page=lp] #innovation .b-body .body_inner { padding: min(1.04vw,15px) min(1.04vw,15px) min(8.75vw,126px) min(1.04vw,15px); } [data-page=lp] #innovation .b-body h3 { margin-bottom: min(5.56vw,80px); } [data-page=lp] #innovation .b-body .body_content figure:after { width: min(25vw,360px); height: auto; aspect-ratio: 132/150; top: min(1.11vw,16px); left: max(-0.69vw,-10px); } [data-page=lp] #innovation .b-body .body_content .body_description ul li:nth-child(1) { top: min(-0.69vw,-10px); left: min(9.03vw,130px); } [data-page=lp] #innovation .b-body .body_content .body_description ul li:nth-child(2) { top: min(9.03vw,130px); left: min(0vw,0px); } [data-page=lp] #innovation .b-body .body_content .body_description ul li:nth-child(3) { top: min(23.61vw,340px); left: min(11.81vw,170px); } [data-page=lp] #innovation .b-body .body_content .body_description ul li:nth-child(4) { top: min(29.17vw,420px); left: min(5.21vw,75px); } [data-page=lp] #colors .s-inner { padding: min(8.61vw,124px) 0 min(8.33vw,120px) 0; } [data-page=lp] #colors .c-ttl { margin-bottom: min(5.83vw,84px); } [data-page=lp] #colors .c-list_colors { margin-top: min(1.11vw,16px); } [data-page=lp] #colors .c-list_colors ul { column-gap: min(0.56vw,8px); } [data-page=lp] #colors .c-list_colors ul li { width: min(1.67vw,24px); } [data-page=lp] #colors .c-pen_colors ul li figure { width: 57.57%; margin-inline: auto; } [data-page=lp] #colors .c-pen_colors ul li p { padding-top: 1em; } [data-page=lp] #colors .c-pen_colors ul span.c-color { width: 100%; height: 20px; } [data-page=lp] #product_spec { background: var(--color-bg-gray); } [data-page=lp] #product_spec .s-inner { padding: min(8.33vw,120px) 0 min(7.92vw,114px) 0; } [data-page=lp] #product_spec .c-ttl { margin-bottom: min(3.19vw,46px); } [data-page=lp] #product_spec .c-ttl h3 span { padding-bottom: 2px; } [data-page=lp] #product_spec .img_product { margin-bottom: min(4.17vw,60px); } [data-page=lp] #product_spec .c-btn_wrap { margin-top: min(3.75vw,54px); } [data-page=lp] #special_content .s-inner { padding: min(8.33vw,120px) 0 min(7.92vw,114px) 0; } [data-page=lp] #special_content .c-ttl { margin-bottom: min(1.67vw,24px); } [data-page=lp] #special_content .c-content { padding-bottom: min(6.67vw,96px); } [data-page=lp] #special_content .c-content .c-movie { border-radius: 10px; margin-bottom: min(3.06vw,44px); } [data-page=lp] #special_content .c-content h4 { margin-bottom: 1.6em; } [data-page=lp] #special_content .c-content h4 span.row:nth-of-type(2) { margin-top: 0.8em; } [data-page=lp] #special_content .c-content h4 span.row span.logo0 { width: min(9.24vw,133px); height: min(1.67vw,24px); margin: 0 min(0.42vw,6px); } [data-page=lp] #special_content .c-content h4 span.row span.logo1 { width: min(14.24vw,205px); height: min(1.67vw,24px); margin: 0 min(0.42vw,6px); } [data-page=lp] #special_content .c-content .c-wrap_btn { margin-top: min(1.53vw,22px); } [data-page=lp] #special_content .b-about_game { padding-top: min(2.08vw,30px); margin-top: 0px; } [data-page=lp] #special_content .b-about_game .about_header { margin-bottom: min(10.14vw,146px); } [data-page=lp] #special_content .b-about_game .c-airsteppy { width: min(31.11vw,448px); height: min(31.11vw,448px); left: -2.6%; overflow: visible; } [data-page=lp] #special_content .b-about_game .c-airsteppy .airsteppy { width: min(31.11vw,448px); left: -0.7%; } [data-page=lp] #special_content .b-about_game .c-airsteppy h4 { width: min(21.11vw,304px); top: min(4.51vw,65px); margin-left: max(-9.86vw,-142px); } [data-page=lp] #special_content .b-about_game .c-airsteppy p.star { width: min(32.64vw,470px); height: min(33.33vw,480px); position: relative; top: 0; left: min(0.28vw,4px); overflow: hidden; } [data-page=lp] #special_content .b-about_game .c-airsteppy p.star img { width: min(31.11vw,448px); position: relative; top: min(0.69vw,10px); left: 10px; } [data-page=lp] #special_content .b-about_game h5 { position: relative; width: 90%; margin-inline: auto; margin-top: max(-4.17vw,-60px); left: min(0.69vw,10px); } [data-page=lp] #special_content .c-list_description { width: 90.16%; margin-inline: auto; } [data-page=lp] #special_content .c-list_description ul li { margin-bottom: min(4.03vw,58px); } [data-page=lp] #special_content .c-list_description ul li:nth-last-child { margin-bottom: 0px; } [data-page=lp] #special_content .c-list_description ul li:nth-child(2n) .cols { flex-direction: row; } [data-page=lp] #special_content .c-list_description ul li:nth-child(1) figure { width: min(12.71vw,183px); right: min(-1.04vw,-15px); } [data-page=lp] #special_content .c-list_description ul li:nth-child(1) .col_l { width: calc(46.4% - min(0.69vw,10px)); } [data-page=lp] #special_content .c-list_description ul li:nth-child(1) .col_r { width: 53.6%; padding-left: min(1.04vw,15px); } [data-page=lp] #special_content .c-list_description ul li:nth-child(2) figure { width: min(7.99vw,115px); left: min(0.42vw,6px); } [data-page=lp] #special_content .c-list_description ul li:nth-child(2) .col_l { width: calc(37% - min(0.69vw,10px)); } [data-page=lp] #special_content .c-list_description ul li:nth-child(2) .col_r { width: 63%; padding-right: min(1.04vw,15px); } [data-page=lp] #special_content .c-list_description ul li:nth-child(3) figure { width: min(7.99vw,115px); right: min(0.42vw,6px); } [data-page=lp] #special_content .c-list_description ul li:nth-child(3) .col_l { width: calc(28.83% - min(0.69vw,10px)); } [data-page=lp] #special_content .c-list_description ul li:nth-child(3) .col_r { width: 70%; padding-left: min(0.83vw,12px); } [data-page=lp] #special_content .c-list_description ul li:nth-child(4) figure { width: min(9.31vw,134px); left: min(0.69vw,10px); } [data-page=lp] #special_content .c-list_description ul li:nth-child(4) .col_l { width: calc(44% - min(2.56vw,10px)); } [data-page=lp] #special_content .c-list_description ul li:nth-child(4) .col_r { width: 56%; padding-right: min(0.83vw,12px); } [data-page=lp] #special_content .c-list_description ul .cols .col_r p { line-height: 1.7; } [data-page=lp] #special_content .c-aspect { width: min(27.78vw,400px); margin-top: min(5.56vw,80px); } .firefox [data-page=lp] #lead .sticky_as figure { right: min(2.78vw,40px); } } @keyframes rotating { 0% { rotate: 0deg; } 100% { rotate: 360deg; } } .about_header .star img { ;-webkit-animation: rotating 10s linear 0s infinite; -moz-animation: rotating 10s linear 0s infinite; animation: rotating 10s linear 0s infinite; } [data-page=lp] .scroll_stoker { transition: transform 0.6s ease; transform: translate3d(0, 200%, 0); } [data-page=lp] :has(#kv.active) .scroll_stoker { transform: translate3d(0, 0, 0); transition-delay: 1s; } [data-page=lp] #kv h1 { transition: opacity 1s ease; opacity: 0; } [data-page=lp] #kv .list_pens ul li { transition: opacity 0.5s ease 0s, transform 0.5s var(--ease-bounce) 0s; opacity: 0; transform: translate3d(0, 20px, 0); } [data-page=lp] #kv h2.logo_pilot { transition: opacity 0.5s ease 0s, transform 0.5s var(--ease-bounce) 0s; opacity: 0; transform: translate3d(0, 20px, 0); } [data-page=lp] #kv .img_airsteppy figure { transition: opacity 0.2s ease 0s, transform 0.5s var(--ease-bounce) 0s; opacity: 0; transform: translate3d(0, 40px, 0); } [data-page=lp] #kv.active h1 { opacity: 1; } [data-page=lp] #kv.active .img_airsteppy figure { opacity: 1; transform: translate3d(0, 0, 0); transition-delay: 0.5s; } [data-page=lp] #kv.active .list_pens ul li { opacity: 1; transform: translate3d(0, 0, 0); } [data-page=lp] #kv.active .list_pens ul li:nth-child(1) { transition-delay: 0.7s; } [data-page=lp] #kv.active .list_pens ul li:nth-child(2) { transition-delay: 0.8s; } [data-page=lp] #kv.active .list_pens ul li:nth-child(3) { transition-delay: 0.9s; } [data-page=lp] #kv.active .list_pens ul li:nth-child(4) { transition-delay: 1s; } [data-page=lp] #kv.active .list_pens ul li:nth-child(5) { transition-delay: 1.1s; } [data-page=lp] #kv.active h2.logo_pilot { opacity: 1; transform: translate3d(0, 0, 0); transition-delay: 1.4s; } [data-page=lp] .c-lead p { transition: opacity 0.5s ease 0s, transform 0.5s var(--ease-bounce) 0s; opacity: 0; transform: translate3d(0, 20px, 0); } [data-page=lp] .c-lead.animate p { opacity: 1; transform: translate3d(0, 0, 0); } [data-page=lp] .c-lead.animate p:nth-child(1) { transition-delay: 0s; } [data-page=lp] .c-lead.animate p:nth-child(2) { transition-delay: 0.1s; } [data-page=lp] .c-lead.animate p:nth-child(3) { transition-delay: 0.2s; } [data-page=lp] .c-lead.animate p:nth-child(4) { transition-delay: 0.3s; } [data-page=lp] #innovation .c-ttl h3.en, [data-page=lp] #innovation .c-ttl h4 { transition: opacity 0.5s ease 0s, transform 0.5s var(--ease-bounce) 0s; opacity: 0; transform: translate3d(0, 20px, 0); } [data-page=lp] #innovation .c-icons ul li { transition: scale 0.5s var(--ease-bounce) 0s, opacity 0.5s ease 0s; scale: 0.8; opacity: 0; } [data-page=lp] #innovation .c-content { transition: opacity 0.5s ease 0s, transform 0.5s var(--ease-bounce) 0s; opacity: 0; transform: translate3d(0, 20px, 0); } [data-page=lp] #innovation .b-body { transition: opacity 0.5s ease 0s, transform 0.5s var(--ease-bounce) 0s; opacity: 0; transform: translate3d(0, 20px, 0); } [data-page=lp] #innovation .animate .c-ttl h3.en, [data-page=lp] #innovation .animate .c-ttl h4 { opacity: 1; transform: translate3d(0, 0, 0); } [data-page=lp] #innovation .animate .c-ttl h4 { transition-delay: 0.1s; } [data-page=lp] #innovation .animate .c-icons ul li { scale: 1; opacity: 1; } [data-page=lp] #innovation .animate .c-icons ul li:nth-child(1) { transition-delay: 0.3s; } [data-page=lp] #innovation .animate .c-icons ul li:nth-child(2) { transition-delay: 0.4s; } [data-page=lp] #innovation .animate .c-icons ul li:nth-child(3) { transition-delay: 0.5s; } [data-page=lp] #innovation .animate .c-content { opacity: 1; transform: translate3d(0, 0, 0); transition-delay: 0.5s; } [data-page=lp] #innovation .b-body.animate { opacity: 1; transform: translate3d(0, 0, 0); } [data-page=lp] #colors .c-ttl h3.en, [data-page=lp] #colors .c-ttl h4 { transition: opacity 0.5s ease 0s, transform 0.5s var(--ease-bounce) 0s; opacity: 0; transform: translate3d(0, 20px, 0); } [data-page=lp] #colors .c-list_colors ul li { transition: scale 0.5s var(--ease-bounce) 0s, opacity 0.5s ease 0s; scale: 0.8; opacity: 0; } [data-page=lp] #colors .c-pen_colors ul li { transition: opacity 0.5s ease 0s, transform 0.5s var(--ease-bounce) 0s; opacity: 0; transform: translate3d(0, 20px, 0); } [data-page=lp] #colors .animate .c-ttl h3.en, [data-page=lp] #colors .animate .c-ttl h4 { opacity: 1; transform: translate3d(0, 0, 0); } [data-page=lp] #colors .animate .c-ttl h4 { transition-delay: 0.1s; } [data-page=lp] #colors .animate .c-list_colors ul li { scale: 1; opacity: 1; } [data-page=lp] #colors .animate .c-pen_colors ul li { opacity: 1; transform: translate3d(0, 0, 0); } [data-page=lp] #colors .animate .c-list_colors ul li:nth-child(1), [data-page=lp] #colors .animate .c-pen_colors ul li:nth-child(1) { transition-delay: 0.2s; } [data-page=lp] #colors .animate .c-list_colors ul li:nth-child(2), [data-page=lp] #colors .animate .c-pen_colors ul li:nth-child(2) { transition-delay: 0.3s; } [data-page=lp] #colors .animate .c-list_colors ul li:nth-child(3), [data-page=lp] #colors .animate .c-pen_colors ul li:nth-child(3) { transition-delay: 0.4s; } [data-page=lp] #colors .animate .c-list_colors ul li:nth-child(4), [data-page=lp] #colors .animate .c-pen_colors ul li:nth-child(4) { transition-delay: 0.5s; } [data-page=lp] #colors .animate .c-list_colors ul li:nth-child(5), [data-page=lp] #colors .animate .c-pen_colors ul li:nth-child(5) { transition-delay: 0.6s; } [data-page=lp] #product_spec .c-ttl h3.en, [data-page=lp] #product_spec .c-ttl h4 { transition: opacity 0.5s ease 0s, transform 0.5s var(--ease-bounce) 0s; opacity: 0; transform: translate3d(0, 20px, 0); } [data-page=lp] #product_spec .c-content { transition: opacity 0.5s ease 0s, transform 0.5s var(--ease-bounce) 0s; opacity: 0; transform: translate3d(0, 20px, 0); } [data-page=lp] #product_spec .animate .c-ttl h3.en, [data-page=lp] #product_spec .animate .c-ttl h4 { opacity: 1; transform: translate3d(0, 0, 0); } [data-page=lp] #product_spec .animate .c-ttl h4 { transition-delay: 0.1s; } [data-page=lp] #product_spec .animate .c-content { opacity: 1; transform: translate3d(0, 0, 0); transition-delay: 0.2s; } [data-page=lp] #special_content .c-ttl h3.en, [data-page=lp] #special_content .c-ttl h4 { transition: opacity 0.5s ease 0s, transform 0.5s var(--ease-bounce) 0s; opacity: 0; transform: translate3d(0, 20px, 0); } [data-page=lp] #special_content .c-content .c-movie, [data-page=lp] #special_content .c-content .c-txt, [data-page=lp] #special_content .c-content .c-wrap_btn { transition: opacity 0.5s ease 0s, transform 0.5s var(--ease-bounce) 0s; opacity: 0; transform: translate3d(0, 20px, 0); } [data-page=lp] #special_content .animate .c-ttl h3.en, [data-page=lp] #special_content .animate .c-ttl h4 { opacity: 1; transform: translate3d(0, 0, 0); } [data-page=lp] #special_content .animate .c-content .c-movie, [data-page=lp] #special_content .animate .c-content .c-txt, [data-page=lp] #special_content .animate .c-content .c-wrap_btn { opacity: 1; transform: translate3d(0, 0, 0); } [data-page=lp] #special_content .animate h4 { transition-delay: 0.1s; } [data-page=lp] #special_content .animate .c-content .c-movie { transition-delay: 0.2s; } [data-page=lp] #special_content .animate .c-content .c-txt { transition-delay: 0.3s; } [data-page=lp] #special_content .animate .c-content .c-wrap_btn { transition-delay: 0.4s; } [data-page=lp] #special_content .c-airsteppy h5 { transition: scale 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0s, opacity 0.1s ease 0s; scale: 1.3; opacity: 0; } [data-page=lp] #special_content .c-airsteppy h5.animate { opacity: 1; scale: 1; } [data-page=lp] #special_content .c-list_description ul li { transition: opacity 0.5s ease 0s, transform 0.5s var(--ease-bounce) 0s; opacity: 0; transform: translate3d(0, 20px, 0); } [data-page=lp] #special_content .c-list_description ul.animate li { opacity: 1; transform: translate3d(0, 0, 0); } [data-page=lp] #special_content .c-list_description ul.animate li:nth-child(1) { transition-delay: 0s; } [data-page=lp] #special_content .c-list_description ul.animate li:nth-child(2) { transition-delay: 0.1s; } [data-page=lp] #special_content .c-list_description ul.animate li:nth-child(3) { transition-delay: 0.2s; } [data-page=lp] #special_content .c-list_description ul.animate li:nth-child(4) { transition-delay: 0.3s; } [data-page=lp] #special_content .c-list_description ul.animate li:nth-child(5) { transition-delay: 0.4s; } @media (any-hover: hover) { a.c-btn.shadow { transition: box-shadow 0.2s ease 0s, transform 0.2s ease 0s; } a.c-btn.shadow:hover { box-shadow: 0px 0px 0px rgb(0, 0, 0) !important; transform: translate3d(4px, 4px, 0); } .c-list_nav ul li a .c-circle { transition: filter 0.2s ease 0s, transform 0.2s ease 0s; } .c-list_nav ul li a:hover .c-circle { filter: drop-shadow(0px 0px 0px rgb(0, 0, 0)); transform: translate3d(2px, 2px, 0); } .c-nav_slide button { transition: filter 0.2s ease 0s, transform 0.2s ease 0s; } .c-nav_slide button:hover { filter: drop-shadow(0px 0px 0 var(--color-black)) !important; transform: translate3d(5px, 5px, 0); } }