@charset "UTF-8"; @keyframes bgSlideDown { 0% { top: 0; } 100% { top: 100vh; height: 0; } } @keyframes bgSlideUp { 0% { bottom: 0; } 100% { bottom: 100vh; height: 0; } } @keyframes productSlideRight { 0% { opacity: 0; } 100% { margin-left: 0; opacity: 1; } } @keyframes productFadeIn { from { opacity: 0; } to { opacity: 0.4; } } @keyframes productGlow { 0% { left: 0; } 100% { left: 120%; } } @keyframes textSlideInOpacity { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes textSlideInTransform { 0% { transform: translateX(-100px); } 100% { transform: translateX(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes zoomAnimation01 { 0% { transform: scale(1); opacity: 1; } 25% { transform: scale(1.7); opacity: 1; } 90%, 100% { transform: scale(1.7); opacity: 0; } } @keyframes zoomAnimation02 { 0%, 20% { transform: scale(1); opacity: 0; } 24% { opacity: 1; } 45% { transform: scale(1.7); opacity: 1; } 90%, 100% { transform: scale(1.7); opacity: 0; } } @keyframes zoomAnimation03 { 0%, 40% { transform: scale(1); opacity: 0; } 44% { opacity: 1; } 65% { transform: scale(1.7); opacity: 1; } 90%, 100% { transform: scale(1.7); opacity: 0; } } @keyframes zoomAnimation04 { 0%, 60% { transform: scale(1); opacity: 0; } 64% { opacity: 1; } 85%, 95% { transform: scale(1.7); opacity: 1; } 100% { transform: scale(1.7); opacity: 0; } } @keyframes zoomAnimationEnd { 0%, 80% { opacity: 0; } 86%, 96% { opacity: 1; } 100% { opacity: 0; } } @keyframes fadeAnimation { 0% { opacity: 0; } 100% { opacity: 1; } } body { overflow: hidden; } @media screen and (max-width: 1024px) { body { overflow: auto; } } .lp-layout-header { border-bottom: 1px solid #d0d0d0; background: #fff; } .lp-layout-header-content { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: calc(1600px + 40px); margin: 0 auto; padding: 22px 20px; } @media screen and (max-width: 1024px) { .lp-layout-header-content { padding: 20px 22px; } } .lp-layout-header-logo { margin-bottom: 0; line-height: 1; } .lp-layout-header-logo > a { display: inline-block; } .lp-layout-header-logo > a > img { height: 22px; } @media screen and (max-width: 1024px) { .lp-layout-header-logo > a { display: inline-block; } .lp-layout-header-logo > a > img { height: 20px; } } .lp-layout-header-telNumber { display: flex; align-items: center; margin-bottom: 0; font-size: 2rem; line-height: 1; } .lp-layout-header-telNumber > span { margin-right: 8px; } .lp-layout-header-telNumberOuter { margin-left: 24px; } @media screen and (max-width: 1240px) { .lp-layout-header-telNumber { font-size: 1.6rem; } } @media screen and (max-width: 1024px) { .lp-layout-header-telNumber { display: none; } } @media screen and (max-width: 1240px) { .lp-layout-header-telNumber .AutoPhoneCall { font-size: 2rem; } } .AutoPhoneCall { display: inline-block; position: relative; padding-left: 20px; color: #333; font-size: 2.2rem; font-weight: bold; text-decoration: none; white-space: nowrap; cursor: inherit; } .AutoPhoneCall::before { position: absolute; top: 50%; left: 0; width: 12px; height: 21px; margin-top: 1px; transform: translateY(-50%); background: url("../../img/landing_page/vhx-7000_pr/icon_phone.png") no-repeat; background-size: contain; content: ""; } .TelSlsh { display: none; } .TelSlsh + .AutoPhoneCall { margin-left: 10px; } .lp-layout-footer { background: #fff; } @media screen and (max-width: 1024px) { .lp-layout-footer { border-top: 1px solid #ccc; } } .lp-layout-footer-content { max-width: calc(1600px + 40px); margin: 0 auto; padding: 11px 20px; } .lp-layout-footer-body { display: flex; align-items: center; justify-content: center; } @media screen and (max-width: 1024px) { .lp-layout-footer-body { flex-direction: column-reverse; } } .lp-layout-footer-copyright { margin-bottom: 0; color: #767676; font-size: 1rem; } @media screen and (max-width: 1024px) { .lp-layout-footer-copyright { text-align: center; } } .lp-layout-footer-telNumber { display: flex; flex-direction: column; align-items: center; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #999; text-align: center; } .lp-layout-footer-telNumber .AutoPhoneCall { margin-bottom: 8px; margin-left: 0; } .lp-layout-footer-telNumber > *:last-child { margin-bottom: 0; } .lp-layout-footer-utilityList { display: flex; margin-left: 10px; } .lp-layout-footer-utilityList > li { position: relative; padding: 0 10px; } .lp-layout-footer-utilityList > li::before { display: block; position: absolute; top: 50%; left: 0; width: 1px; height: 10px; transform: translateY(-50%); background: #767676; content: ""; } @media screen and (max-width: 1024px) { .lp-layout-footer-utilityList > li:first-child { padding-left: 0; } .lp-layout-footer-utilityList > li:first-child::before { content: none; } } .lp-layout-footer-utilityList a { display: block; color: #767676; font-size: 1rem; text-decoration: none; } .lp-layout-main { overflow: hidden; } .lp-layout-grid { display: flex; margin: -20px 0 20px -20px; } @media screen and (max-width: 1024px) { .lp-layout-grid { display: block; margin: 0 0 20px 0; } } .lp-layout-grid-column { margin-top: 20px; padding-left: 20px; } @media screen and (max-width: 1024px) { .lp-layout-grid-column { width: 100%; margin-top: 0; margin-bottom: 30px; padding-left: 0; } .lp-layout-grid-column:last-child { margin-bottom: 0; } } @media screen and (max-width: 750px) { .lp-layout-grid-column { margin-bottom: 16px; } } .lp-layout-grid-column > *:last-child { margin-bottom: 0; } .lp-layout-grid.of-primary .lp-layout-grid-column:first-child { max-width: 650px; } @media screen and (max-width: 1920px) { .lp-layout-grid.of-primary .lp-layout-grid-column:first-child { max-width: calc(650vw * 100 / 1920); } } @media screen and (max-width: 1600px) { .lp-layout-grid.of-primary .lp-layout-grid-column:first-child { max-width: calc(600vw * 100 / 1600); } } @media screen and (max-width: 1024px) { .lp-layout-grid.of-primary .lp-layout-grid-column:first-child { max-width: none; } } .lp-layout-grid.of-primary .lp-layout-grid-column:first-child .lp-section-textGroup { max-width: none; } .lp-cardZoom { z-index: 0; position: relative; width: 18vw; max-width: 362px; height: 12vw; max-height: 242px; padding-top: 1.2vw; float: right; overflow: hidden; transform: translateX(-100px); border: 6px solid #fff; background: #fff; vertical-align: top; opacity: 0; transition: opacity 0.6s ease 0.35s, transform 0.6s ease-out 0.35s; } .lp-section.is-show .lp-cardZoom { animation: textSlideInOpacity 1s forwards ease 0.6s, textSlideInTransform 0.6s forwards ease-out 0.35s; } @media screen and (max-width: 1024px) { .lp-cardZoom { display: block; width: 100%; height: 57vw; margin: 0 auto; margin-top: 0; float: none; transform: none; border: 0; opacity: 1; transition: none; } } .lp-cardZoom-image { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform-origin: center center; opacity: 0; } .lp-cardZoom-image.of-primary { z-index: 0; transform: scale(1); transform-origin: 9vw 4vw; opacity: 1; } .lp-cardZoom-image.of-secondary { z-index: 0; transform-origin: 9vw 4vw; opacity: 0; } .lp-section.is-show .lp-cardZoom-image.of-secondary { animation: zoomAnimation01 14s ease-in-out infinite 1.5s; } @media screen and (max-width: 1024px) { .lp-cardZoom-image.of-secondary { transform-origin: 40vw 15vw; animation: zoomAnimation01 14s ease-in-out infinite 1.5s; } } .lp-cardZoom-image.of-tertiary { z-index: 5; } .lp-section.is-show .lp-cardZoom-image.of-tertiary { animation: zoomAnimation02 14s ease-in-out infinite 1.5s; } @media screen and (max-width: 1024px) { .lp-cardZoom-image.of-tertiary { animation: zoomAnimation02 14s ease-in-out infinite 1.5s; } } .lp-cardZoom-image.of-quaternary { z-index: 10; } .lp-section.is-show .lp-cardZoom-image.of-quaternary { animation: zoomAnimation03 14s ease-in-out infinite 1.5s; } @media screen and (max-width: 1024px) { .lp-cardZoom-image.of-quaternary { animation: zoomAnimation03 14s ease-in-out infinite 1.5s; } } .lp-cardZoom-image.of-quinary { z-index: 15; } .lp-section.is-show .lp-cardZoom-image.of-quinary { animation: zoomAnimation04 14s ease-in-out infinite 1.5s; } @media screen and (max-width: 1024px) { .lp-cardZoom-image.of-quinary { animation: zoomAnimation04 14s ease-in-out infinite 1.5s; } } .lp-cardZoom-image.of-senary { z-index: 20; } .lp-section.is-show .lp-cardZoom-image.of-senary { animation: zoomAnimationEnd 14s ease-in-out infinite 1.5s; } @media screen and (max-width: 1024px) { .lp-cardZoom-image.of-senary { animation: zoomAnimationEnd 14s ease-in-out infinite 1.5s; } } .lp-navigation { display: none; background: #333; color: #fff; } [data-script-enabled="true"] .lp-navigation { display: block; } .lp-navigation-content { width: 100%; max-width: calc(1600px + 40px); margin: 0 auto; padding: 0 20px; } .lp-navigation-list { display: flex; min-height: 70px; } @media only screen and (max-height: 720px) { .lp-navigation-list { min-height: 62px; } } .lp-navigation-list > li { width: calc(100% / 5); border-left: solid 1px #666; } .lp-navigation-list > li:last-child { border-right: solid 1px #666; } .lp-navigation-button { display: inline-block; width: 100%; height: 100%; padding: 8px; color: #fff; font-size: 1.6rem; font-weight: bold; text-align: center; text-decoration: none; } .lp-navigation-button:hover { background: #403d3d; } @media screen and (max-width: 1240px) { .lp-navigation-button { font-size: 1.4rem; } } .lp-navigation-buttonContent { display: flex; align-items: center; justify-content: center; height: 100%; } .lp-navigation-icon { display: inline-block; padding: 4px 8px; background: #d40001; color: #fff; font-size: calc(12vw * 100 / 1920); line-height: 1; white-space: nowrap; } .lp-navigation-icon + .lp-navigation-text { margin-left: 8px; } .lp-navigation-button.is-current { background: #1C8570; } .lp-navigation-button.of-download { background: #dc002f; } .lp-navigation-button.of-download .lp-navigation-buttonContent { position: relative; flex-direction: row-reverse; } .lp-navigation-buttonImage { margin-right: 18px; } .lp-navigation-buttonImage > img { min-width: 40px; height: 52px; } .lp-jumbotron { display: none; position: relative; height: 100%; overflow: hidden; } @media screen and (max-width: 1024px) { .lp-jumbotron { display: block; } } /* .lp-jumbotron-content { display: flex; position: absolute; right: 15vw; align-items: center; justify-content: center; width: 40vw; height: 100%; } */ /* @media screen and (max-width: 1024px) { .lp-jumbotron-content { display: block; position: static; width: auto; height: auto; padding-top: 78vw; } } */ @media screen and (max-width: 1024px) { .lp-jumbotron-inner { padding: 0 calc(40vw * 100 / 1024) calc(25vw * 100 / 1024); text-align: center; } } @media screen and (max-width: 750px) { .lp-jumbotron-inner { padding: 0 calc(40vw * 100 / 750) 20px; } } .lp-jumbotron-inner > *:last-child { margin-bottom: 0; } .lp-jumbotron-title { display: block; margin-bottom: calc(10vw * 100 / 1920); font-size: calc(40vw * 100 / 1920); font-weight: normal; line-height: 1.2; text-align: center; } @media screen and (max-width: 1024px) { .lp-jumbotron-title { margin-bottom: calc(23vw * 100 / 1024); } } .lp-jumbotron-title.of-primary { font-size: calc(30vw * 100 / 1920); } .lp-jumbotron-title.of-primary em { font-size: calc(48vw * 100 / 1920); } .lp-jumbotron-title.of-secondary { font-size: calc(38vw * 100 / 1920); line-height: 1.3; } .lp-jumbotron-titleLead { display: block; margin-bottom: calc(14vh * 100 / 1150); } @media screen and (max-width: 1024px) { .lp-jumbotron-titleLead { margin-bottom: 10px; font-size: 3.4rem; } } @media screen and (max-width: 750px) { .lp-jumbotron-titleLead { font-size: calc(34vw * 100 / 750); } } .lp-jumbotron-title em { display: block; font-size: calc(58vw * 100 / 1920); font-weight: bold; } @media screen and (max-width: 1024px) { .lp-jumbotron-title em { font-size: 5.4rem; } .lp-jumbotron-title.of-secondary em { font-size: 5.2rem; } } @media screen and (max-width: 750px) { .lp-jumbotron-title em { font-size: calc(54vw * 100 / 750); } .lp-jumbotron-title.of-secondary em { font-size: calc(48vw * 100 / 750); } } .lp-jumbotron-titleGroup { margin-bottom: calc(40vw * 100 / 1920); } @media screen and (max-width: 750px) { .lp-jumbotron-titleGroup { margin-bottom: calc(26vw * 100 / 360); } } .lp-jumbotron-series { display: flex; align-items: flex-start; justify-content: center; max-width: 40vw; } @media screen and (max-width: 1024px) { .lp-jumbotron-series { max-width: 100%; } } .lp-jumbotron-seriesText:first-child { text-align: center; } .lp-jumbotron-seriesText { display: block; font-size: calc(25vw * 100 / 1920); line-height: 1.3; text-align: left; } @media screen and (max-width: 1024px) { .lp-jumbotron-seriesText { font-size: 3rem; } } @media screen and (max-width: 750px) { .lp-jumbotron-seriesText { font-size: calc(30vw * 100 / 750); } } .lp-jumbotron-seriesName { display: block; font-weight: normal; } .lp-jumbotron-icon { display: inline-block; margin-top: calc(6vw * 100 / 1920); padding: 5px 4px 3px; background: #d40001; color: #fff; font-size: calc(12vw * 100 / 1920); line-height: 1; word-break: keep-all; } @media screen and (max-width: 1024px) { .lp-jumbotron-icon { font-size: calc(22vw * 100 / 1024); } } @media screen and (max-width: 750px) { .lp-jumbotron-icon { font-size: calc(22vw * 100 / 750); } } .lp-jumbotron-icon + .lp-jumbotron-seriesText { margin-left: 10px; } .lp-jumbotron .lp-jumbotron-background01, .lp-jumbotron .lp-jumbotron-background02 { width: 50vw; height: 0; } .lp-jumbotron .lp-jumbotron-background01 { z-index: -1; position: absolute; top: 0; left: 0; height: 100%; overflow: hidden; } .lp-jumbotron .lp-jumbotron-background01::before { display: block; position: absolute; top: 0; left: 0; width: 50vw; height: 100%; background: url("../../img/landing_page/vhx-7000_pr/vhx-7000_pr_bg_001.jpg") no-repeat left top; background-size: cover; content: ""; } .lp-jumbotron .lp-jumbotron-background01.of-primary::before { background: url("../../img/landing_page/vhx-7000_pr/vhx-7000_pr_bg_012.jpg") no-repeat left top; background-size: cover; } .lp-jumbotron .lp-jumbotron-background01::after { display: block; position: absolute; top: 0; left: 0; width: 100vw; height: 100%; background: #fff; content: ""; } @media screen and (max-width: 1024px) { .lp-jumbotron .lp-jumbotron-background01 { width: 100vw; } .lp-jumbotron .lp-jumbotron-background01::before { width: 100vw; height: 100%; background-size: contain; } .lp-jumbotron .lp-jumbotron-background01::after { content: none; } } .lp-jumbotron .lp-jumbotron-background02 { z-index: -1; position: absolute; right: 0; bottom: 0; overflow: hidden; } @media screen and (max-width: 1024px) { .lp-jumbotron .lp-jumbotron-background02 { display: none; } } .lp-jumbotron .lp-jumbotron-background02::before { display: block; position: absolute; right: 0; bottom: 0; width: 50vw; height: 100%; background: url("../../img/landing_page/vhx-7000_pr/vhx-7000_pr_bg_002.png") no-repeat right center; background-size: cover; content: ""; } .lp-jumbotron .lp-jumbotron-background02.of-primary::before { background: url("../../img/landing_page/vhx-7000_pr/vhx-7000_pr_bg_013.jpg") no-repeat right center; background-size: cover; } .lp-jumbotron .lp-jumbotron-background02::after { display: block; position: absolute; top: 0; left: 0; width: 100vw; height: 100%; background: #fff; content: ""; } .lp-jumbotron .lp-jumbotron-background03 { z-index: -1; position: absolute; top: -50vh; left: 16.5vw; width: 65vw; height: 200vh; transform: rotate(15deg); background: #fff; } @media screen and (max-width: 1024px) { .lp-jumbotron .lp-jumbotron-background03 { position: absolute; top: calc(155vw * 100 / 1024); left: -30vw; width: 150vw; height: 120vw; margin-left: 0; transform: rotate(-8deg); background: #fff; } } .lp-jumbotron .lp-jumbotron-background04 { z-index: -1; position: absolute; top: 0; left: 16px; width: 90vw; height: 100%; margin-left: -30px; background: url("../../img/landing_page/vhx-7000_pr/vhx-7000_pr_bg_003.png") no-repeat center center; background-size: 98% auto; opacity: 0; } @media screen and (max-width: 1024px) { .lp-jumbotron .lp-jumbotron-background04 { left: 0; width: 100vw; height: 130vw; margin-left: 0; background: url("../../img/landing_page/vhx-7000_pr/vhx-7000_pr_bg_011.png") no-repeat center center; background-position: 12vw 13vw; background-size: 73% auto; animation: none !important; opacity: 1; } } .lp-jumbotron .lp-jumbotron-background05 { z-index: 10; position: absolute; top: 50%; left: 13.6vw; width: 17vw; height: 10.5vw; overflow: hidden; transform: translateY(-55%); animation: fadeIn 0.7s forwards ease 1.9s; opacity: 0; } .lp-jumbotron .lp-jumbotron-background05.of-primary { top: 49.5%; left: 13vw; width: 16.5vw; } .lp-jumbotron .lp-jumbotron-background05::before, .lp-jumbotron .lp-jumbotron-background05::after { display: block; position: absolute; top: -30vh; left: -5vw; height: 100vh; transform: rotate(10deg); background: #fff; content: ""; opacity: 0; } .lp-jumbotron .lp-jumbotron-background05::before { width: 1.5vw; } .lp-jumbotron .lp-jumbotron-background05::after { width: 0.5vw; transition: opacity 0.5s ease 2.1s, left 0.9s cubic-bezier(0.22, 0.83, 0.57, 0.93) 2.1s; } @media screen and (max-width: 1024px) { .lp-jumbotron .lp-jumbotron-background05 { display: none; } .lp-jumbotron .lp-jumbotron-background05::after, .lp-jumbotron .lp-jumbotron-background05::before { content: none; } } .lp-jumbotron.is-show { display: block; } .lp-jumbotron.is-show .lp-jumbotron-inner { animation-name: fadeIn; animation-duration: 0.6s; animation-fill-mode: forwards; animation-timing-function: ease; animation-delay: 0s; } @media screen and (max-width: 1024px) { .lp-jumbotron.is-show .lp-jumbotron-inner { animation: none; } } .lp-jumbotron.is-show .lp-jumbotron-background01, .lp-jumbotron.is-show .lp-jumbotron-background02 { height: 100%; } .lp-jumbotron.is-show .lp-jumbotron-background01::after { animation-name: bgSlideDown; animation-duration: 0.5s; animation-fill-mode: forwards; animation-timing-function: cubic-bezier(0.98, 0.02, 1, 0.77); animation-delay: 0.5s; } .lp-jumbotron.is-show .lp-jumbotron-background02::after { animation-name: bgSlideUp; animation-duration: 0.5s; animation-fill-mode: forwards; animation-timing-function: cubic-bezier(0.98, 0.02, 1, 0.77); animation-delay: 0.9s; } .lp-jumbotron.is-show .lp-jumbotron-background04 { animation-name: productSlideRight; animation-duration: 0.6s; animation-fill-mode: forwards; animation-timing-function: ease; animation-delay: 0.4s; } .lp-jumbotron.is-show .lp-jumbotron-background05::before { animation: productFadeIn 0.5s forwards ease 0.9s, productGlow 0.9s forwards cubic-bezier(0.22, 0.83, 0.57, 0.93) 2s; } .lp-jumbotron.is-show .lp-jumbotron-background05::after { left: 120%; animation: productFadeIn 0.5s forwards ease 0.9s, productGlow 0.9s forwards cubic-bezier(0.22, 0.83, 0.57, 0.93) 2.1s; opacity: 0.4; } .lp-section { display: block; position: relative; height: 100%; overflow: hidden; } [data-script-enabled="true"] .lp-section { display: none; } @media screen and (max-width: 1024px) { [data-script-enabled="true"] .lp-section { display: block; } } .lp-section .lp-listButton { justify-content: flex-start; transform: translateX(-100px); opacity: 0; } @media screen and (max-width: 1024px) { .lp-section .lp-listButton { justify-content: center; transform: none; opacity: 1; } } .lp-section.is-show { display: block; } .lp-section.is-show .lp-listButton { animation: textSlideInOpacity 0.6s forwards ease 0.6s, textSlideInTransform 0.6s forwards ease-out 0.6s; } .lp-section-content { display: flex; z-index: 100; position: relative; align-items: center; max-width: calc(1600px + 40px); height: 100%; margin: 0 auto; padding-left: 20px; } @media screen and (max-width: 1024px) { .lp-section-content { flex-direction: column-reverse; max-width: none; padding-left: 0; } } .lp-section-body { margin-left: 100px; } @media screen and (max-width: 1600px) { .lp-section-body { margin-left: calc(80vw * 100 / 1600); } } @media screen and (max-width: 1240px) { .lp-section-body { margin-left: calc(60vw * 100 / pc-min); } } @media screen and (max-width: 1024px) { .lp-section-body { width: 100%; max-width: 100%; margin-left: 0; padding: calc(52vw * 100 / 1024) calc(60vw * 100 / 1024) 30px; } } .lp-section-body > *:last-child { margin-bottom: 0; } .lp-section-title { max-width: 555px; margin-bottom: calc(26vw * 100 / 1920); transform: translateX(-100px); font-size: calc(50vw * 100 / 1920); line-height: 1.24; opacity: 0; } .lp-section-title.of-primary { font-size: calc(48vw * 100 / 1920); } .lp-section.is-show .lp-section-title { animation: textSlideInOpacity 0.6s forwards ease 0.6s, textSlideInTransform 0.6s forwards ease-out 0.15s; } @media screen and (max-width: 1600px) { .lp-section-title { max-width: calc(580vw * 100 / 1600); font-size: calc(38vw * 100 / 1600); } } @media screen and (max-width: 1240px) { .lp-section-title { max-width: calc(440vw * 100 / 1240); font-size: 2.8rem; } } @media screen and (max-width: 1024px) { .lp-section-title { max-width: none; margin-bottom: calc(34vw * 100 / 1024); transform: none; font-size: 4.8rem; opacity: 1; } } @media screen and (max-width: 750px) { .lp-section-title { margin-bottom: calc(34vw * 100 / 750); font-size: calc(48vw * 100 / 750); } } .lp-section-subtitle { margin-bottom: calc(12vw * 100 / 1920); transform: translateX(-100px); font-size: calc(30vw * 100 / 1920); line-height: 1.3; opacity: 0; } .lp-section.is-show .lp-section-subtitle { animation: textSlideInOpacity 1s forwards ease 0.6s, textSlideInTransform 0.6s forwards ease-out 0.35s; } @media screen and (max-width: 1024px) { .lp-section-subtitle { max-width: none; margin-bottom: calc(12vw * 100 / 1024); transform: none; font-size: 3.4rem; opacity: 1; } } @media screen and (max-width: 750px) { .lp-section-subtitle { margin-bottom: calc(14vw * 100 / 750); font-size: calc(34vw * 100 / 750); } } .lp-section-text { margin-bottom: calc(30vw * 100 / 1920); transform: translateX(-100px); font-size: calc(20vw * 100 / 1920); opacity: 0; } .lp-section.is-show .lp-section-text { animation: textSlideInOpacity 1s forwards ease 0.6s, textSlideInTransform 0.6s forwards ease-out 0.35s; } @media screen and (max-width: 1600px) { .lp-section-text { font-size: 1.6rem; } } @media screen and (max-width: 1024px) { .lp-section-text { transform: none; font-size: 3rem; opacity: 1; } } @media screen and (max-width: 750px) { .lp-section-text { font-size: calc(16vw * 100 / 360); } } .lp-section-textGroup { max-width: 600px; margin-bottom: 30px; } @media screen and (max-width: 1920px) { .lp-section-textGroup { max-width: calc(600vw * 100 / 1920); margin-bottom: calc(30vw * 100 / 1920); } } @media screen and (max-width: 1600px) { .lp-section-textGroup { max-width: calc(600vw * 100 / 1600); } } @media screen and (max-width: 1024px) { .lp-section-textGroup { max-width: none; margin-bottom: calc(40vw * 100 / 1024); } } @media screen and (max-width: 750px) { .lp-section-textGroup { margin-bottom: calc(26vw * 100 / 360); } } .lp-section-textGroup > *:last-child { margin-bottom: 0; } @media screen and (max-width: 1024px) { .lp-section.of-primary .lp-section-textGroup, .lp-section.of-secondary .lp-section-textGroup { margin-bottom: 0; } } .lp-layout-grid.of-secondary .lp-section-textGroup { max-width: none; } .lp-section-image { display: none; } @media screen and (max-width: 1024px) { .lp-section-image { flex-shrink: 0; width: 100%; text-align: center; } } @media screen and (max-width: 1024px) { .lp-section-backgroundGroup { display: none; } } .lp-section.of-primary .lp-section-background01 { z-index: -1; position: absolute; top: 0; right: 0; width: 100vw; min-width: 1100px; height: 100%; overflow: hidden; } .lp-section.of-primary .lp-section-background01::before { display: block; top: 0; width: 100vw; height: 100%; margin: 0 0 0 auto; background: url("../../img/landing_page/vhx-7000_pr/vhx-7000_pr_bg_004.png") no-repeat right 0 top 50%; background-size: auto 120%; content: ""; } .lp-section.of-primary .lp-section-background01::after { display: block; position: absolute; top: 0; left: 0; width: 100vw; height: 100%; background: #fff; content: ""; } .lp-section.of-primary .lp-section-background01.of-primary::before { background: url("../../img/landing_page/vhx-7000_pr/vhx-7000_pr_bg_016.png") no-repeat right 0 top 50%; background-size: auto 120%; } .lp-section.of-primary .lp-section-background02 { z-index: -1; position: absolute; top: 0; right: 0; width: 100vw; height: 100%; overflow: hidden; transition: height 0.5s cubic-bezier(0.98, 0.02, 1, 0.77) 1s; } .lp-section.of-primary .lp-section-background02::before { display: block; width: 100vw; height: 100%; margin: 0 0 0 auto; background: url("../../img/landing_page/vhx-7000_pr/vhx-7000_pr_bg_005.png") no-repeat right 0 top 50%; background-size: auto 120%; content: ""; } .lp-section.of-primary .lp-section-background02::after { display: block; position: absolute; top: 0; left: 0; width: 100vw; height: 100%; background: #fff; content: ""; } .lp-section.of-primary .lp-section-background03 { z-index: -1; position: absolute; top: 0; right: 0; width: 100vw; height: 100%; overflow: hidden; } .lp-section.of-primary .lp-section-background03::before { display: block; position: relative; width: 100vw; height: 100%; background: url("../../img/landing_page/vhx-7000_pr/vhx-7000_pr_bg_008.png") no-repeat left center; background-size: 70% auto; content: ""; } .lp-section.of-primary.is-show { visibility: visible; } .lp-section.of-primary.is-show .lp-section-background01, .lp-section.of-primary.is-show .lp-section-background02 { height: 100%; } .lp-section.of-primary.is-show .lp-section-background01::after { animation-name: bgSlideDown; animation-duration: 0.5s; animation-fill-mode: forwards; animation-timing-function: cubic-bezier(0.98, 0.02, 1, 0.77); animation-delay: 1.7s; } .lp-section.of-primary.is-show .lp-section-background02::after { animation-name: bgSlideDown; animation-duration: 0.5s; animation-fill-mode: forwards; animation-timing-function: cubic-bezier(0.98, 0.02, 1, 0.77); animation-delay: 1s; } .lp-section.of-secondary .lp-section-image { background: #373839; } .lp-section.of-secondary .lp-section-background01 { z-index: -2; position: absolute; top: 0; width: 100vw; height: 100%; } .lp-section.of-secondary .lp-section-background01::before { display: block; position: absolute; top: 0; left: 0; width: 100vw; height: 100%; background: #373839; content: ""; } .lp-section.of-secondary .lp-section-background01::after { display: block; position: absolute; top: 0; left: 0; width: 100vw; height: 100%; background: #fff; content: ""; } .lp-section.of-secondary .lp-section-background02 { z-index: -1; position: absolute; right: 0; bottom: 0; width: 100vw; height: 100%; overflow: hidden; } .lp-section.of-secondary .lp-section-background02::before { display: block; top: 20px; width: 100vw; height: 100%; background: url("../../img/landing_page/vhx-7000_pr/vhx-7000_pr_bg_006.png") no-repeat right 6% center; background-size: 55% auto; content: ""; opacity: 0; } .lp-section.of-secondary .lp-section-background03 { z-index: -1; position: absolute; top: 0; right: 0; width: 100vw; height: 100%; overflow: hidden; } .lp-section.of-secondary .lp-section-background03::before { display: block; position: relative; width: 100vw; height: 100%; background: url("../../img/landing_page/vhx-7000_pr/vhx-7000_pr_bg_008.png") no-repeat left center; background-size: 70% auto; content: ""; } .lp-section.of-secondary.is-show .lp-section-background01, .lp-section.of-secondary.is-show .lp-section-background02 { height: 100%; } .lp-section.of-secondary.is-show .lp-section-background01::after { animation-name: bgSlideDown; animation-duration: 0.5s; animation-fill-mode: forwards; animation-timing-function: cubic-bezier(0.98, 0.02, 1, 0.77); animation-delay: 0.9s; } .lp-section.of-secondary.is-show .lp-section-background02::before { animation-name: fadeIn; animation-duration: 1s; animation-fill-mode: forwards; animation-timing-function: ease; animation-delay: 1.7s; } .lp-section.of-tertiary .lp-section-background01 { z-index: -2; position: absolute; top: 0; width: 100vw; height: 100%; } .lp-section.of-tertiary .lp-section-background01::before { display: block; position: absolute; top: 0; left: 0; width: 100vw; height: 100%; background: #e3e5e8; content: ""; } .lp-section.of-tertiary .lp-section-background01::after { display: block; position: absolute; top: 0; left: 0; width: 100vw; height: 100%; background: #fff; content: ""; } .lp-section.of-tertiary .lp-section-background02 { z-index: 0; position: absolute; right: 0; bottom: 0; width: 100vw; overflow: hidden; } .lp-section.of-tertiary .lp-section-background02::before { display: block; z-index: 5; position: relative; width: 100vw; height: 100%; background: url("../../img/landing_page/vhx-7000_pr/vhx-7000_pr_bg_007.png") no-repeat right -7vw center; background-size: 74% auto; content: ""; opacity: 0; } .lp-section.of-tertiary .lp-section-background02.of-primary::before { background: url("../../img/landing_page/vhx-7000_pr/vhx-7000_pr_bg_014.png") no-repeat right 4vw center; background-size: 40% auto; } .lp-section.of-tertiary .lp-section-background03 { z-index: -1; position: absolute; top: 0; right: 0; width: 100vw; height: 100%; overflow: hidden; } .lp-section.of-tertiary .lp-section-background03::before { display: block; position: relative; width: 100vw; height: 100%; background: url("../../img/landing_page/vhx-7000_pr/vhx-7000_pr_bg_008.png") no-repeat left center; background-size: 70% auto; content: ""; } .lp-section.of-tertiary.is-show .lp-section-background01, .lp-section.of-tertiary.is-show .lp-section-background02 { height: 100%; } .lp-section.of-tertiary.is-show .lp-section-background01::after { animation-name: bgSlideDown; animation-duration: 0.5s; animation-fill-mode: forwards; animation-timing-function: cubic-bezier(0.98, 0.02, 1, 0.77); animation-delay: 0.9s; } .lp-section.of-tertiary.is-show .lp-section-background02 { opacity: 1; } .lp-section.of-tertiary.is-show .lp-section-background02::before { animation-name: fadeIn; animation-duration: 1s; animation-fill-mode: forwards; animation-timing-function: ease; animation-delay: 1.7s; } .lp-section.of-quaternary .lp-section-background01 { z-index: -2; position: absolute; top: 0; width: 100vw; height: 100%; } .lp-section.of-quaternary .lp-section-background01::before { display: block; position: absolute; top: 0; left: 0; width: 100vw; height: 100%; background: #e3e5e8; content: ""; } .lp-section.of-quaternary .lp-section-background01::after { display: block; position: absolute; top: 0; left: 0; width: 100vw; height: 100%; background: #fff; content: ""; } .lp-section.of-quaternary .lp-section-background02 { z-index: 0; position: absolute; right: 0; bottom: 0; width: 100vw; overflow: hidden; } .lp-section.of-quaternary .lp-section-background02::before { display: block; z-index: 5; position: relative; width: 100vw; height: 100%; background: url("../../img/landing_page/vhx-7000_pr/vhx-7000_pr_bg_015.png") no-repeat right 9vw center; background-size: 38% auto; content: ""; opacity: 0; } .lp-section.of-quaternary .lp-section-background03 { z-index: -1; position: absolute; top: 0; right: 0; width: 100vw; height: 100%; overflow: hidden; } .lp-section.of-quaternary .lp-section-background03::before { display: block; position: relative; width: 100vw; height: 100%; background: url("../../img/landing_page/vhx-7000_pr/vhx-7000_pr_bg_008.png") no-repeat left center; background-size: 70% auto; content: ""; } .lp-section.of-quaternary.is-show .lp-section-background01, .lp-section.of-quaternary.is-show .lp-section-background02 { height: 100%; } .lp-section.of-quaternary.is-show .lp-section-background01::after { animation-name: bgSlideDown; animation-duration: 0.5s; animation-fill-mode: forwards; animation-timing-function: cubic-bezier(0.98, 0.02, 1, 0.77); animation-delay: 0.9s; } .lp-section.of-quaternary.is-show .lp-section-background02 { opacity: 1; } .lp-section.of-quaternary.is-show .lp-section-background02::before { animation-name: fadeIn; animation-duration: 1s; animation-fill-mode: forwards; animation-timing-function: ease; animation-delay: 1.7s; } .lp-listButton { display: flex; flex-wrap: wrap; justify-content: center; max-width: 100%; margin-top: -18px; margin-left: -5px; } @media screen and (max-width: 1024px) { .lp-listButton { margin-bottom: 25px; } } @media screen and (max-width: 750px) { .lp-listButton { flex-direction: column-reverse; align-items: center; margin-top: 0; margin-bottom: 20px; margin-left: 0; } .lp-listButton.of-column { flex-direction: column; } } .lp-listButton.of-content-left { justify-content: flex-start; } .lp-listButton.of-content-right { justify-content: flex-end; } .lp-listButton.of-justifyContent-center { justify-content: center; } .lp-jumbotron .lp-listButton { max-width: 40vw; } @media screen and (max-width: 1024px) { .lp-jumbotron .lp-listButton { max-width: 100%; } } .lp-listButton > li { max-width: 100%; margin-top: 18px; padding-left: 5px; } .lp-listButton li.of-width-full { width: 100%; } .lp-listButton > li:first-child { margin-left: 0; } @media screen and (max-width: 750px) { .lp-listButton > li { margin-top: 0; margin-bottom: 12px; margin-left: 0; padding-left: 0; } .lp-listButton > li:first-child { margin-bottom: 0; } .lp-listButton.of-column > li:first-child { margin-bottom: 12px; } .lp-listButton.of-column > li:last-child { margin-bottom: 0; } } .lp-listButton-outer { max-width: 600px; } @media screen and (max-width: 1920px) { .lp-listButton-outer { max-width: calc(600vw * 100 / 1920); } } @media screen and (max-width: 1600px) { .lp-listButton-outer { max-width: calc(600vw * 100 / 1600); } } @media screen and (max-width: 1024px) { .lp-listButton-outer { max-width: none; } } .lp-listButton-outer > *:last-child { margin-bottom: 0; } .lp-buttonConversion { display: inline-block; max-width: 100%; background: #dc002f; text-decoration: none; } .lp-jumbotron .lp-buttonConversion { max-width: 40vw; } @media screen and (max-width: 1024px) { .lp-jumbotron .lp-buttonConversion { max-width: 100%; } } .lp-buttonConversion-body { display: flex; align-items: center; justify-content: center; padding: 10px calc(40vw * 100 / 1920) 10px calc(40vw * 100 / 1920); } @media screen and (max-width: 1600px) { .lp-buttonConversion-body { padding-top: 10px; padding-bottom: 10px; } } .lp-buttonConversion-text { color: #fff; font-size: 1.8rem; word-break: keep-all; } @media screen and (max-width: 1600px) { .lp-buttonConversion-text { font-size: 1.6rem; } } @media screen and (max-width: 1024px) { .lp-buttonConversion-text { font-size: 1.8rem; } } @media screen and (max-width: 750px) { .lp-buttonConversion-text { font-size: 1.6rem; } } .lp-buttonConversion-image { margin: -22px -22px -22px 10px; border: 1px solid #ccc; } .lp-buttonConversion-image > img { max-width: 44px; } @media screen and (max-width: 1600px) { .lp-buttonConversion-image { margin-left: 6px; } .lp-buttonConversion-image > img { max-width: 40px; } } @media screen and (max-width: 1024px) { .lp-buttonConversion-image { margin-left: 6px; } .lp-buttonConversion-image > img { max-width: 44px; } } .lp-buttonConversion.of-primary { background: #13778f; } .lp-buttonConversion.of-download .lp-buttonConversion-body { padding-right: 30px; padding-left: 10px; } @media screen and (max-width: 1600px) { .lp-buttonConversion.of-download .lp-buttonConversion-body { padding-right: 28px; padding-left: 5px; } } .lp-buttonConversion.of-download .lp-buttonConversion-text { position: relative; padding-left: 30px; } @media screen and (max-width: 1600px) { .lp-buttonConversion.of-download .lp-buttonConversion-text { padding-left: 24px; } } @media screen and (max-width: 1024px) { .lp-buttonConversion.of-download .lp-buttonConversion-text { padding-left: 38px; } } .lp-buttonConversion.of-download .lp-buttonConversion-text::before { display: block; position: absolute; top: 48%; left: 0; width: 25px; height: 25px; transform: translateY(-50%); background: url("../../../../../img/landing_page/common/icon_btn_dl.png") no-repeat center center; background-size: contain; content: ""; } @media screen and (max-width: 1600px) { .lp-buttonConversion.of-download .lp-buttonConversion-text::before { width: 20px; height: 20px; } } @media screen and (max-width: 1024px) { .lp-buttonConversion.of-download .lp-buttonConversion-text::before { width: 25px; height: 25px; } } .lp-buttonConversion.of-arrow .lp-buttonConversion-body { padding-right: 16px; padding-left: 16px; } @media screen and (max-width: 1600px) { .lp-buttonConversion.of-arrow .lp-buttonConversion-body { padding-right: 10px; padding-left: 10px; } } .lp-buttonConversion.of-arrow .lp-buttonConversion-text { position: relative; padding-left: 25px; } @media screen and (max-width: 1600px) { .lp-buttonConversion.of-arrow .lp-buttonConversion-text { padding-left: 22px; } } @media screen and (max-width: 1024px) { .lp-buttonConversion.of-arrow .lp-buttonConversion-text { padding-left: 25px; } } .lp-buttonConversion.of-arrow .lp-buttonConversion-text::before { display: block; position: absolute; top: 50%; left: 0; width: 19px; height: 12px; transform: translateY(-50%); border-width: 6px 0 6px 12px; border-style: solid; border-color: transparent transparent transparent #fff; content: ""; } @media screen and (max-width: 1600px) { .lp-buttonConversion.of-arrow .lp-buttonConversion-text::before { border-width: 6px 0 6px 10px; } } @media screen and (max-width: 1024px) { .lp-buttonConversion.of-arrow .lp-buttonConversion-text::before { border-width: 6px 0 6px 12px; } } .lp-list { -ms-transform: translateX(-100px); margin-top: calc(10vw * 100 / 1920); transform: translateX(-100px); font-size: calc(20vw * 100 / 1920); opacity: 0; transition: opacity 0.6s ease 0.35s, transform 0.6s ease-out 0.35s; } @media screen and (max-width: 1600px) { .lp-list { font-size: 1.6rem; } } @media screen and (max-width: 1024px) { .lp-list { -ms-transform: none; margin-top: calc(10vw * 100 / 1024); transform: none; font-size: 2.8rem; opacity: 1; transition: none; } } @media screen and (max-width: 750px) { .lp-list { font-size: calc(28vw * 100 / 750); } } @media screen and (max-width: 375px) { .lp-list { font-size: 15px; } } .lp-list > li { position: relative; padding-left: 15px; } @media screen and (max-width: 1024px) { .lp-list > li { padding-left: 10px; } } .lp-list > li::before { position: absolute; top: 0.7em; left: 0; width: 4px; height: 4px; border-radius: 12px; background: #333; content: ""; } @media screen and (max-width: 1024px) { .lp-list > li::before { width: 3px; height: 3px; } } .lp-figure { display: flex; flex-direction: column-reverse; } .lp-figure-caption { font-size: 1.4rem; margin: 8px 0 0; padding: 0 20px; } .lp-figure-image { min-height: 0%; } .lp-section.is-show .lp-list { -webkit-animation: textSlideInOpacity 1s forwards ease 0.6s, textSlideInTransform 0.6s forwards ease-out 0.35s; animation: textSlideInOpacity 1s forwards ease 0.6s, textSlideInTransform 0.6s forwards ease-out 0.35s; } .lp-smallScreen-show { display: none; } @media screen and (max-width: 1024px) { .lp-smallScreen-show { display: block; } } @media screen and (max-width: 1024px) { .lp-smallScreen-hide { display: none !important; } } .lp-utility-textAlign-center { text-align: center; } .lp-utility-textAlign-left { text-align: left; } .lp-utility-textAlign-right { text-align: right; } .lp-utility-color-primary { color: #d40001; } @media screen and (max-width: 1024px) { .lp-smallScreen-textAlign-center { text-align: center !important; } } /* 銈广儵銈ゃ儉銉肩敤 */ .theme-slider .lp-jumbotron-outer { display: flex; flex-direction: row-reverse; align-items: center; justify-content: center; max-width: 100%; height: 100%; } @media screen and (max-width: 1024px) { .theme-slider .lp-jumbotron-outer { flex-direction: column-reverse; padding-top: calc(4.8rem + ((1vw - 0.32rem) * (13.06818))); } } .theme-slider .lp-jumbotron-content { width: 40vw; } @media screen and (max-width: 1024px) { .theme-slider .lp-jumbotron-content { display: block; position: static; width: auto; max-width: 100%; height: auto; } } @media screen and (max-width: 1024px) { .theme-slider .lp-jumbotron-content { width: auto; } } @media screen and (max-width: 1919px) { .theme-slider .lp-jumbotron-image { width: calc(33rem + ((1vw - 1.025rem) * (30.20134))); } } @media screen and (max-width: 1024px) { .theme-slider .lp-jumbotron-image { width: calc(26.4rem + ((1vw - 0.32rem) * (47.72727))); } } .theme-slider .lp-jumbotron-imageGroup { position: relative; } .theme-slider .lp-jumbotron-slider { position: absolute; top: 139px; left: 10px; width: 387px; height: 219px; overflow: hidden; } @media screen and (max-width: 1919px) { .theme-slider .lp-jumbotron-slider { top: calc(7.6rem + ((1vw - 1.025rem) * (7.04698))); left: calc(0.5rem + ((1vw - 1.025rem) * (0.55928))); width: calc(21.4rem + ((1vw - 1.025rem) * (19.35123))); height: calc(12.1rem + ((1vw - 1.025rem) * (10.96197))); } } @media screen and (max-width: 1024px) { .theme-slider .lp-jumbotron-slider { top: calc(6.1rem + ((1vw - 0.32rem) * (11.07955))); left: calc(0.4rem + ((1vw - 0.32rem) * (0.85227))); width: calc(17.1rem + ((1vw - 0.32rem) * (30.68182))); height: calc(9.7rem + ((1vw - 0.32rem) * (17.32955))); } } .theme-slider .lp-listImage { display: flex; } .theme-slider .lp-listImage > li { min-width: 387px; min-height: 0%; } @media screen and (max-width: 1919px) { .theme-slider .lp-listImage > li { min-width: calc(21.4rem + ((1vw - 1.025rem) * (19.35123))); } } @media screen and (max-width: 1024px) { .theme-slider .lp-listImage > li { min-width: calc(17.1rem + ((1vw - 0.32rem) * (30.68182))); } } .theme-slider .lp-listImage-image { flex: 1; } .theme-slider .lp-listImage.of-direction-rowReverse { flex-direction: row-reverse; } @media screen and (max-width: 1024px) { .theme-slider .lp-jumbotron-inner { background-color: #fff; } } @media screen and (max-width: 1024px) { .theme-slider .lp-jumbotron-background01::before, .theme-slider .lp-jumbotron-background01.of-primary::before { width: 100%; background-size: 100% auto; } } .theme-slider .lp-jumbotron-background03 { left: 15.5vw; width: 67vw; } @media screen and (max-width: 1024px) { .theme-slider .lp-jumbotron-background03 { left: -30vw; width: 150vw; } } .theme-KT .lp-jumbotron-title.of-secondary em { margin-bottom: 40px; } @media screen and (max-width: 1024px) { .theme-KT .lp-jumbotron-title.of-secondary em { margin-bottom: 32px; } } @media screen and (min-width: 1920px) { .lp-layout-grid.of-primary > .lp-layout-grid-column:first-child { max-width: 650px; } }