@charset "UTF-8"; [data-script-enabled="true"] .lp-layout-container { display: flex; flex-direction: column; height: 100vh; overflow: hidden; } @media only screen and (max-width: 1365px) { [data-script-enabled="true"] .lp-layout-container { display: block; height: auto; } } @media only screen and (min-width: 1366px) and (max-height: 655px) { [data-script-enabled="true"] .lp-layout-container { display: inline; height: auto; } } .lp-layout-header { background: #fff; } @media only screen and (max-width: 1365px) { .lp-layout-header { border-bottom: 0; } } .lp-layout-header-content { display: flex; align-items: center; justify-content: center; max-width: calc(1920px + 40px); margin: 0 auto; padding: 22px 20px; } .lp-layout-header-content > * { margin-bottom: 0; } .lp-layout-header-logo { line-height: 1; } .lp-layout-header-logo img { width: 125px; vertical-align: middle; } .theme-KC .lp-layout-header-logo img { width: 230px; } .lp-layout-header-utilityGroup { flex: 1; margin-left: 24px; } .lp-layout-header-utilityList { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; margin-top: -16px; margin-right: -24px; } .lp-layout-header-utilityList > li { margin-top: 16px; padding-right: 24px; } .lp-layout-header-utilityList > li[data-category] { display: none; } [data-category="im"] .lp-layout-header-utilityList > li[data-category="im"] { display: block; } [data-category="lm"] .lp-layout-header-utilityList > li[data-category="lm"] { display: block; } .lp-layout-header.of-telephone .lp-layout-header-content { justify-content: flex-start; padding: 12px 80px; } [data-category="top"] .lp-layout-header.of-telephone .lp-layout-header-content { padding-top: 22px; padding-bottom: 22px; } @media only screen and (max-width: 1919px) { .lp-layout-header.of-telephone .lp-layout-header-content { padding: 22px calc((80 * 100vw) / 1920); } } @media only screen and (max-width: 1365px) { .lp-layout-header.of-telephone .lp-layout-header-content { padding: 22px 20px; } } @media only screen and (max-width: 767px) { .lp-layout-header.of-telephone .lp-layout-header-content { justify-content: center; } } @media only screen and (max-width: 767px) { .lp-layout-header.of-telephone .lp-layout-header-utilityGroup { display: none; } } .lp-layout-header-contact { margin-bottom: 0; } .lp-layout-header-telephone { display: flex; align-items: center; padding-left: 20px; } @media only screen and (max-width: 767px) { .lp-layout-header-telephone { display: none; } } .lp-layout-header-telephone a { display: inline-block; position: relative; padding-left: 24px; color: #333; font-size: 2.2rem; font-weight: bold; text-decoration: none; cursor: inherit; } .lp-layout-header-telephone a::before { display: block; position: absolute; top: 50%; left: 0; width: 29px; height: 29px; transform: translateY(-50%); background: url("../../../../../img/core/icon_tel_l_trans.png") no-repeat; background-size: cover; content: ""; } [data-script-enabled="true"] .lp-layout-main { display: flex; position: relative; flex: 1; flex-direction: column; overflow: hidden; } @media only screen and (max-width: 1365px) { [data-script-enabled="true"] .lp-layout-main { flex: none; } } @media only screen and (min-width: 1366px) and (max-height: 655px) { [data-script-enabled="true"] .lp-layout-main { display: block; flex: none; height: 600px; } } .lp-layout-footer { border-top: 1px solid #e0e0e0; background: #fff; color: #707070; font-size: 1.3rem; } .lp-layout-footer-content { display: flex; align-items: center; justify-content: center; max-width: calc(1920px + 40px); margin: 0 auto; padding: 8px 20px; } @media only screen and (max-width: 767px) { .lp-layout-footer-content { flex-direction: column; padding: 16px 20px; } } .lp-layout-footer-copyright { margin-bottom: 0; padding: 0 10px; } @media only screen and (max-width: 1365px) { .lp-layout-footer-copyright { text-align: center; } } @media only screen and (max-width: 767px) { .lp-layout-footer-copyright { width: 100%; padding: 0 22px; } } .lp-layout-footer-utilityList { display: flex; margin-left: 10px; } @media only screen and (max-width: 767px) { .lp-layout-footer-utilityList { justify-content: center; width: 100%; margin-left: 0; } } .lp-layout-footer-utilityList > li { position: relative; padding: 0 10px; } .lp-layout-footer-utilityList > li::before { display: block; position: absolute; top: 50%; right: 0; width: 1px; height: 10px; transform: translateY(-50%); background: #a6a6a6; content: ""; } .lp-layout-footer-utilityList > li:last-child::before { content: none; } .lp-layout-footer-utilityList a { display: block; color: #707070; text-decoration: none; } .lp-navigation { display: none; z-index: 2; position: absolute; bottom: 0; width: 100%; border-top: 1px solid #707070; border-bottom: 1px solid #707070; background: #484848; } .lp-navigation.is-show { display: block; animation: fadeIn 0.6s linear 0.3s both; } .lp-navigation-content { max-width: 1080px; margin: 0 auto; } .lp-navigation-list { display: flex; justify-content: center; height: 80px; } .lp-navigation-list > li { display: flex; position: relative; } .lp-navigation-list > li::before { display: block; z-index: 2; position: absolute; top: 0; left: 0; width: 1px; height: 100%; background: #707070; content: ""; } .lp-navigation-list > li:first-child::before { content: none; } .lp-navigation-list > li:first-child .lp-navigation-button:not([data-category="top"]) { width: 100%; padding-left: 58px; } .lp-navigation-list > li:first-child .lp-navigation-button:not([data-category="top"]).is-current { background: #046e1d; color: #fff; } .lp-navigation-list > li:first-child .lp-navigation-button:not([data-category="top"]):hover { background: #046e1d; color: #fff; } .lp-navigation-list > li:first-child .lp-navigation-button:not([data-category="top"])::before { position: absolute; top: 50%; left: 24px; width: 15px; height: 15px; transform: translateY(-50%) rotate(-135deg); border-top: 2px solid #fff; border-right: 2px solid #fff; content: ""; } .lp-navigation-list > li:last-child .lp-navigation-button:not([data-category="top"]) { width: 100%; padding-right: 58px; } .lp-navigation-list > li:last-child .lp-navigation-button:not([data-category="top"]).is-current { background: #005ae2; color: #fff; } .lp-navigation-list > li:last-child .lp-navigation-button:not([data-category="top"]):hover { background: #005ae2; color: #fff; } .lp-navigation-list > li:last-child .lp-navigation-button:not([data-category="top"])::before { position: absolute; top: 50%; right: 24px; width: 15px; height: 15px; transform: translateY(-50%) rotate(45deg); border-top: 2px solid #fff; border-right: 2px solid #fff; content: ""; } .lp-navigation-button { display: flex; align-items: center; justify-content: center; width: 100%; min-width: 160px; padding: 10px 24px; background: #333; color: #fff; font-weight: bold; line-height: 1.2; text-align: center; text-decoration: none; transition: background-color 0.3s; } .lp-navigation-button:hover { background: #fff; color: #333; } .lp-navigation-button:lang(th) { line-height: 1.7; } .lp-jumbotron { display: flex; flex: 1; } @media only screen and (max-width: 1365px) { .lp-jumbotron { flex: none; } } @media only screen and (min-width: 1366px) and (max-height: 655px) { .lp-jumbotron { display: inline; flex: none; } } .lp-jumbotron-content { display: flex; flex-wrap: wrap; width: 100%; } @media only screen and (max-width: 1365px) { .lp-jumbotron-content { flex-wrap: nowrap; } } @media only screen and (max-width: 767px) { .lp-jumbotron-content { flex-direction: column; } } .lp-jumbotron-body { display: flex; flex-direction: column; width: 50%; } @media only screen and (max-width: 1365px) { .lp-jumbotron-body { min-height: 0%; padding: 40px calc((80 * 100vw) / 1365); background: #ebebeb; } } @media only screen and (max-width: 767px) { .lp-jumbotron-body { width: 100%; padding: 24px 20px; } .lp-jumbotron-body > * { width: 100%; max-width: 520px; margin: 0 auto; } } @media only screen and (min-width: 1366px) and (max-height: 655px) { .lp-jumbotron-body { display: inline; } } .lp-jumbotron-body.is-spread .lp-mediaProduct { z-index: 100; } .lp-jumbotron-body.is-spread .lp-mediaProduct.of-primary { margin-right: -25px; } .lp-jumbotron-body.is-spread .lp-mediaProduct.of-secondary { margin-left: -25px; } .lp-jumbotron-body.is-spread .lp-mediaProduct-image { transform: scale(1.1); } .lp-jumbotron-body.is-shrink .lp-mediaProduct { z-index: 0; } .lp-jumbotron-body.is-shrink .lp-mediaProduct.of-primary { margin-right: 25px; } .lp-jumbotron-body.is-shrink .lp-mediaProduct.of-secondary { margin-left: 25px; } @media only screen and (max-width: 1365px) { .lp-jumbotron-body.of-primary { background: #3c436e; color: #fff; } } .lp-jumbotron-body.of-primary .lp-jumbotron-conversionGroup { justify-content: flex-start; } .lp-jumbotron-conversionGroup { display: flex; justify-content: flex-end; height: 110px; padding: 15px 80px; } [data-script-enabled="true"] .lp-jumbotron-conversionGroup { height: 130px; } @media only screen and (max-width: 1365px) { [data-script-enabled="true"] .lp-jumbotron-conversionGroup { height: auto; } } @media only screen and (max-width: 1919px) { .lp-jumbotron-conversionGroup { padding: 15px calc((80 * 100vw) / 1920); } } .lp-jumbotron-conversionGroup > *:last-child { margin-bottom: 0; } @media only screen and (max-width: 1365px) { .lp-jumbotron-conversionGroup { flex-direction: column; height: auto; margin-top: auto; padding: 0; } } @media only screen and (min-width: 1366px) and (max-height: 921px) { .lp-jumbotron-conversionGroup { padding: 15px calc((40 * 100vh) / 655); } } .lp-jumbotron-series { max-width: 410px; margin-right: 40px; } @media only screen and (max-width: 1919px) { .lp-jumbotron-series { margin-right: calc((40 * 100vw) / 1920); } } @media only screen and (max-width: 1365px) { .lp-jumbotron-series { flex: none; width: 100%; max-width: 420px; margin: 0 auto 24px; text-align: center; } } @media only screen and (min-width: 1366px) and (max-height: 921px) { .lp-jumbotron-series { max-width: 300px; } } .lp-jumbotron-series > b { display: block; } @media only screen and (max-width: 1365px) { .lp-jumbotron .lp-headingLevel2 { text-align: center; } } @media only screen and (max-width: 1365px) { .lp-jumbotron .lp-headingLevel2.lp-smallScreen-text-large { font-size: 2.4rem; } } .lp-jumbotron .lp-textLead { font-size: 4.8rem; font-weight: 300; line-height: 1.13; } @media only screen and (max-width: 1919px) { .lp-jumbotron .lp-textLead { font-size: calc((48 * 100vw) / 1920); } } @media only screen and (max-width: 1365px) { .lp-jumbotron .lp-textLead { font-size: 2.4rem; text-align: center; } } @media only screen and (min-width: 1366px) and (max-height: 921px) { .lp-jumbotron .lp-textLead { font-size: calc((30 * 100vh) / 655); } } @media only screen and (min-width: 1366px) and (max-height: 655px) { .lp-jumbotron .lp-textLead { font-size: 3rem; } } .theme-KC .lp-jumbotron .lp-textLead { font-size: 4.4rem; } @media only screen and (max-width: 1919px) { .theme-KC .lp-jumbotron .lp-textLead { font-size: calc((44 * 100vw) / 1920); } } @media only screen and (max-width: 1365px) { .theme-KC .lp-jumbotron .lp-textLead { font-size: 2.4rem; text-align: center; } } @media only screen and (min-width: 1366px) and (max-height: 921px) { .theme-KC .lp-jumbotron .lp-textLead { font-size: calc((28 * 100vh) / 655); } } @media only screen and (min-width: 1366px) and (max-height: 655px) { .theme-KC .lp-jumbotron .lp-textLead { font-size: 3rem; } } .lp-jumbotron .lp-textLead:lang(th) { line-height: 1.7; } .lp-jumbotron .lp-textLead.of-text-shadow { text-shadow: 1px 1px 10px #fff, 1px 1px 10px #fff, 1px 1px 10px #fff; } @media only screen and (max-width: 1365px) { .lp-jumbotron .lp-textLead.of-text-shadow { text-shadow: none; } } @media only screen and (max-width: 1365px) { .lp-jumbotron .lp-textLead.lp-smallScreen-text-large { font-size: 3rem; } } @media only screen and (max-width: 767px) { .lp-jumbotron .lp-textLead.lp-smallScreen-text-large { font-size: 2.8rem; } } .lp-jumbotron .lp-buttonConversion-text { white-space: nowrap; } @media only screen and (max-width: 1365px) { .lp-jumbotron .lp-buttonConversion-text { white-space: normal; } } .lp-section { -webkit-backface-visibility: hidden; display: flex; flex: 1; width: 100%; overflow: hidden; backface-visibility: hidden; background: #fff; } @media only screen and (max-width: 1365px) { .lp-section { flex: none; } } @media only screen and (min-width: 1366px) and (max-height: 655px) { .lp-section { flex: none; } } .lp-section.of-secondary { background: transparent linear-gradient(232deg, #fff 0%, #d6d6d6 100%) 0% 0% no-repeat padding-box; } .lp-layout-main.of-color-primary .lp-section.of-secondary { background: transparent linear-gradient(-232deg, #fff 0%, #d6d6d6 100%) 0% 0% no-repeat padding-box; } [data-script-enabled="true"] .lp-section.of-secondary { display: none; z-index: -1; position: absolute; top: 0; left: 0; height: 100%; padding-bottom: 80px; opacity: 0; } [data-script-enabled="true"] .lp-section.of-secondary:not(.is-active) { left: -100%; } [data-script-enabled="true"] .lp-section.of-secondary.is-active.is-slide { animation: 0.4s linear 0.2s slideLeft both; } [data-script-enabled="true"] .lp-section.of-secondary.is-slide:not(.is-active) { left: 0; animation: 0.6s linear 0.2s slideReturnLeft both; } @media only screen and (max-width: 1365px) { [data-script-enabled="true"] .lp-section.of-secondary { display: block; z-index: 0; position: static; padding-bottom: 0; background: #ebebeb; } [data-script-enabled="true"] .lp-section.of-secondary:not(.is-active) { left: 0; opacity: 1; } } .lp-section.of-tertiary { background: transparent linear-gradient(113deg, #a1a7c9 0%, #08145d 100%) 0% 0% no-repeat padding-box; color: #fff; } .lp-layout-main.of-color-primary .lp-section.of-tertiary { background: transparent linear-gradient(-113deg, #d7eef5 0%, #08145d 100%) 0% 0% no-repeat padding-box; } [data-script-enabled="true"] .lp-section.of-tertiary { display: none; z-index: -1; position: absolute; top: 0; right: 0; height: 100%; padding-bottom: 80px; } [data-script-enabled="true"] .lp-section.of-tertiary:not(.is-active) { right: -100%; } [data-script-enabled="true"] .lp-section.of-tertiary.is-active.is-slide { animation: 0.4s linear 0.2s slideRight both; } [data-script-enabled="true"] .lp-section.of-tertiary.is-slide:not(.is-active) { right: 0; animation: 0.6s linear 0.2s slideReturnRight both; opacity: 1; } @media only screen and (max-width: 1365px) { [data-script-enabled="true"] .lp-section.of-tertiary { display: block; z-index: 0; position: static; padding-bottom: 0; background: #3c436e; } [data-script-enabled="true"] [data-script-enabled="true"] .lp-section.of-tertiary:not(.is-active) { right: 0; opacity: 1; } } @media only screen and (max-width: 1365px) { [data-script-enabled="true"] .lp-layout-main.of-color-primary .lp-section.of-tertiary { background: #3c436e; } } @media only screen and (max-width: 1365px) { .lp-section.of-tertiary .lp-layout-conversionGrid::before { border-top: 1px solid #fff; } } [data-script-enabled="true"] .lp-section.is-show { display: flex; z-index: 1; animation: fadeIn 0.6s linear 0.3s both; } [data-script-enabled="true"] .lp-section.is-hide { animation: fadeOut 0.6s linear both; } [data-script-enabled="true"] .lp-section.is-active { z-index: 2; } .lp-section-content { display: flex; flex: none; flex-direction: column; width: 100%; max-width: calc(1920px + 40px); margin: 0 auto; padding: 45px 80px; } .lp-section-content > *:last-child { margin-bottom: 0; } @media only screen and (max-width: 1919px) { .lp-section-content { padding: calc((45 * 100vw) / 1920) calc((80 * 100vw) / 1920); } } @media only screen and (max-width: 1365px) { .lp-section-content { padding: 24px calc((110 * 100vw) / 1365); } } @media only screen and (max-width: 767px) { .lp-section-content { padding: 24px 20px; } } @media only screen and (min-width: 1366px) and (max-height: 921px) { .lp-section-content { padding: calc((32 * 100vh) / 655) calc((110 * 100vh) / 655); } } @media only screen and (min-width: 1366px) and (max-height: 655px) { .lp-section-content { display: inline; padding: 32px 110px; } } .lp-section.of-primary .lp-section-content { flex: 1; max-width: none; margin: 0 -20px; padding: 8px 20px; } @media only screen and (max-width: 1365px) { .lp-section.of-primary .lp-section-content { padding: 8px 20px 24px; } } @media only screen and (max-width: 767px) { .lp-section.of-primary .lp-section-content { padding-bottom: 0; } } @media only screen and (max-width: 1365px) { .lp-section > :last-child { padding-bottom: 48px; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } @keyframes slideLeft { 0% { z-index: 2; left: -100%; opacity: 1; } 100% { z-index: 2; left: 0; opacity: 1; } } @keyframes slideRight { 0% { z-index: 2; left: 100%; opacity: 1; } 100% { z-index: 2; left: 0; opacity: 1; } } @keyframes slideReturnLeft { 0% { z-index: 1; left: 0; opacity: 1; } 100% { z-index: 1; left: -100%; opacity: 1; } } @keyframes slideReturnRight { 0% { z-index: 1; right: 0; opacity: 1; } 100% { z-index: 1; right: -100%; opacity: 1; } } .lp-layout-grid { display: flex; flex-wrap: wrap; margin: -8px 0 8px -24px; } @media only screen and (max-width: 1919px) { .lp-layout-grid { margin: calc((-8 * 100vw) / 1920) 0 calc((8 * 100vw) / 1920) calc((-24 * 100vw) / 1920); } } @media only screen and (max-width: 1365px) { .lp-layout-grid { margin: -16px 0 22px calc((-24 * 100vw) / 1366); } } @media only screen and (max-width: 767px) { .lp-layout-grid { margin: -24px 0 46px 0; } } @media only screen and (min-width: 1366px) and (max-height: 921px) { .lp-layout-grid { margin: calc((-24 * 100vh) / 655) 0 calc((46 * 100vh) / 655) calc((-24 * 100vh) / 655); } } @media only screen and (min-width: 1366px) and (max-height: 655px) { .lp-layout-grid { margin: -8px 0 8px -24px; } } .lp-layout-grid-column { width: 100%; margin-top: 8px; padding-left: 24px; } @media only screen and (max-width: 1919px) { .lp-layout-grid-column { margin-top: calc((8 * 100vw) / 1920); padding-left: calc((24 * 100vw) / 1920); } } @media only screen and (max-width: 1365px) { .lp-layout-grid-column { margin-top: 16px; padding-left: calc((24 * 100vw) / 1366); } } @media only screen and (max-width: 767px) { .lp-layout-grid-column { margin-top: 24px; padding-left: 0; } } @media only screen and (min-width: 1366px) and (max-height: 921px) { .lp-layout-grid-column { margin-top: calc((24 * 100vh) / 655); padding-left: calc((24 * 100vh) / 655); } } @media only screen and (min-width: 1366px) and (max-height: 655px) { .lp-layout-grid-column { margin-top: 8px; padding-left: 24px; } } .lp-layout-grid-column.of-column-1 { width: 8.33333%; } .lp-layout-grid-column.of-column-2 { width: 16.66667%; } @media only screen and (max-width: 767px) { .lp-layout-grid-column.of-column-2 { width: 100%; } } .lp-layout-grid-column.of-column-3 { width: 25%; } @media only screen and (max-width: 767px) { .lp-layout-grid-column.of-column-3 { width: 100%; } } .lp-layout-grid-column.of-column-4 { width: 33.33333%; } @media only screen and (max-width: 767px) { .lp-layout-grid-column.of-column-4 { width: 100%; } } .lp-layout-grid-column.of-column-5 { width: 41.66667%; } @media only screen and (max-width: 767px) { .lp-layout-grid-column.of-column-5 { width: 100%; } } .lp-layout-grid-column.of-column-6 { width: 50%; } @media only screen and (max-width: 767px) { .lp-layout-grid-column.of-column-6 { width: 100%; } } .lp-layout-grid-column.of-column-7 { width: 58.33333%; } @media only screen and (max-width: 767px) { .lp-layout-grid-column.of-column-7 { width: 100%; } } .lp-layout-grid-column.of-column-8 { width: 66.66667%; } @media only screen and (max-width: 767px) { .lp-layout-grid-column.of-column-8 { width: 100%; } } .lp-layout-grid-column.of-column-9 { width: 75%; } @media only screen and (max-width: 767px) { .lp-layout-grid-column.of-column-9 { width: 100%; } } .lp-layout-grid-column.of-column-10 { width: 83.33333%; } @media only screen and (max-width: 767px) { .lp-layout-grid-column.of-column-10 { width: 100%; } } .lp-layout-grid-column.of-column-11 { width: 91.66667%; } @media only screen and (max-width: 767px) { .lp-layout-grid-column.of-column-11 { width: 100%; } } .lp-layout-grid-column.of-column-12 { width: 100%; } @media only screen and (max-width: 767px) { .lp-layout-grid-column.of-column-12 { width: 100%; } } .lp-layout-productDetailGrid { display: flex; flex: 1; align-items: center; justify-content: center; margin: 0 0 0 -16px; } .lp-layout-productDetailGrid > *:last-child { margin-bottom: 0; } @media only screen and (max-width: 1365px) { .lp-layout-productDetailGrid { flex: none; margin: 0 0 22px 0; } } @media only screen and (max-width: 767px) { .lp-layout-productDetailGrid { flex-direction: column; } } .lp-layout-productDetailGrid-column { width: 100%; padding-left: 16px; } .lp-layout-productDetailGrid-column > *:last-child { margin-bottom: 0; } @media only screen and (max-width: 1919px) { .lp-layout-productDetailGrid-column { padding-left: calc((16 * 100vw) / 1920); } } @media only screen and (max-width: 1365px) { .lp-layout-productDetailGrid-column { margin-bottom: 24px; } } .lp-layout-productDetailGrid-column.of-column-1 { width: 8.33333%; } @media only screen and (max-width: 1365px) { .lp-layout-productDetailGrid-column.of-column-1 { width: 100%; } } .lp-layout-productDetailGrid-column.of-column-2 { width: 16.66667%; } @media only screen and (max-width: 1365px) { .lp-layout-productDetailGrid-column.of-column-2 { width: 100%; } } .lp-layout-productDetailGrid-column.of-column-3 { width: 25%; } @media only screen and (max-width: 1365px) { .lp-layout-productDetailGrid-column.of-column-3 { width: 100%; } } .lp-layout-productDetailGrid-column.of-column-4 { width: 33.33333%; } @media only screen and (max-width: 1365px) { .lp-layout-productDetailGrid-column.of-column-4 { width: 100%; } } .lp-layout-productDetailGrid-column.of-column-5 { width: 41.66667%; } @media only screen and (max-width: 1365px) { .lp-layout-productDetailGrid-column.of-column-5 { width: 100%; } } .lp-layout-productDetailGrid-column.of-column-6 { width: 50%; } @media only screen and (max-width: 1365px) { .lp-layout-productDetailGrid-column.of-column-6 { width: 100%; } } .lp-layout-productDetailGrid-column.of-column-7 { width: 58.33333%; } @media only screen and (max-width: 1365px) { .lp-layout-productDetailGrid-column.of-column-7 { width: 100%; } } .lp-layout-productDetailGrid-column.of-column-8 { width: 66.66667%; } @media only screen and (max-width: 1365px) { .lp-layout-productDetailGrid-column.of-column-8 { width: 100%; } } .lp-layout-productDetailGrid-column.of-column-9 { width: 75%; } @media only screen and (max-width: 1365px) { .lp-layout-productDetailGrid-column.of-column-9 { width: 100%; } } .lp-layout-productDetailGrid-column.of-column-10 { width: 83.33333%; } @media only screen and (max-width: 1365px) { .lp-layout-productDetailGrid-column.of-column-10 { width: 100%; } } .lp-layout-productDetailGrid-column.of-column-11 { width: 91.66667%; } @media only screen and (max-width: 1365px) { .lp-layout-productDetailGrid-column.of-column-11 { width: 100%; } } .lp-layout-productDetailGrid-column.of-column-12 { width: 100%; } @media only screen and (max-width: 1365px) { .lp-layout-productDetailGrid-column.of-column-12 { width: 100%; } } @media only screen and (max-width: 1365px) { .lp-layout-productDetailGrid-column { padding-left: 0; } } .lp-layout-productDetailGrid.of-row-reverse { flex-direction: row-reverse; } @media only screen and (max-width: 1365px) { .lp-layout-productDetailGrid.lp-smallScreen-column { flex-direction: column; } } .lp-layout-conversionGrid > *:last-child { margin-bottom: 0; } @media only screen and (max-width: 1365px) { .lp-layout-conversionGrid { display: flex; position: relative; justify-content: center; margin-right: -24px; padding-top: 24px; } .lp-layout-conversionGrid::before { position: absolute; top: 0; left: 0; width: calc(100% - 24px); height: 1px; border-top: 1px solid #aaa; content: ""; } } @media only screen and (max-width: 1365px) and (max-width: 767px) { .lp-layout-conversionGrid::before { width: 100%; } } @media only screen and (max-width: 1365px) { .lp-layout-conversionGrid.lp-smallScreen-align-center { align-items: center; } } @media only screen and (max-width: 767px) { .lp-layout-conversionGrid { flex-direction: column; align-items: center; width: 100%; max-width: 360px; margin: 0 auto; } } .lp-layout-conversionGrid-column > *:last-child { margin-bottom: 0; } @media only screen and (max-width: 1365px) { .lp-layout-conversionGrid-column { margin-bottom: 0; padding-right: 24px; } } @media only screen and (max-width: 767px) { .lp-layout-conversionGrid-column { margin-bottom: 24px; padding-right: 0; } } @media only screen and (max-width: 1365px) { .lp-layout-conversionGrid.of-asymmetry .lp-layout-conversionGrid-column.of-column-small { width: 100%; max-width: 270px; } } @media only screen and (max-width: 767px) { .lp-layout-conversionGrid.of-asymmetry .lp-layout-conversionGrid-column.of-column-small { max-width: 360px; margin-bottom: 24px; padding-right: 0; } } .lp-media { display: flex; margin-bottom: 22px; } @media only screen and (max-width: 1365px) { .lp-media { margin-bottom: 16px; } } @media only screen and (max-width: 767px) { .lp-media { max-width: 520px; margin: 0 auto 24px; margin-bottom: 24px; } } .lp-media-body { flex: 1; } @media only screen and (max-width: 767px) { .lp-media-body { flex: none; text-align: center; } } .lp-media-body > *:last-child { margin-bottom: 0; } .lp-media-body .lp-headingLevel2 { margin-bottom: 5px; } @media only screen and (max-width: 1365px) { .lp-media-body .lp-headingLevel2 { text-align: left; } } @media only screen and (max-width: 767px) { .lp-media-body .lp-headingLevel2 { text-align: center; } } .lp-media-body .lp-utility-textAlign-center { text-align: center; } .lp-media-icon { width: 90px; margin-right: 24px; } @media only screen and (max-width: 1919px) { .lp-media-icon { margin-right: calc((24 * 100vw) / 1920); } } @media only screen and (max-width: 767px) { .lp-media-icon { margin: 0 auto 16px; } } .lp-media.of-row-reverse { flex-direction: row-reverse; justify-content: flex-end; } @media only screen and (max-width: 767px) { .lp-media.lp-extraSmallScreen-column { flex-direction: column-reverse; } } .lp-mediaProduct { -webkit-backface-visibility: hidden; display: flex; position: relative; flex: 1; justify-content: flex-end; backface-visibility: hidden; background: transparent linear-gradient(220deg, #fff 0%, #d6d6d6 100%) 0% 0% no-repeat padding-box; transition: margin 0.3s ease-out; } @media only screen and (max-width: 1365px) { .lp-mediaProduct { flex: none; width: 100%; min-height: 0%; margin-bottom: 16px; background: #ebebeb; } } @media only screen and (max-width: 767px) { .lp-mediaProduct { align-items: flex-start; } } @media only screen and (min-width: 1366px) and (max-height: 655px) { .lp-mediaProduct { flex: 1 0 auto; } } .lp-mediaProduct-inner { display: flex; flex: 1 0 auto; align-items: center; justify-content: flex-end; width: 100%; max-width: 960px; padding: 40px 80px; } @media only screen and (max-width: 1919px) { .lp-mediaProduct-inner { padding: calc((40 * 100vw) / 1920) calc((80 * 100vw) / 1920); } } @media only screen and (max-width: 1365px) { .lp-mediaProduct-inner { flex: none; flex-direction: column-reverse; width: 100%; margin-bottom: 16px; padding: 0; background: #ebebeb; } } @media only screen and (max-width: 767px) { .lp-mediaProduct-inner { align-items: flex-start; } } @media only screen and (min-width: 1366px) and (max-height: 921px) { .lp-mediaProduct-inner { padding: 10px calc((40 * 100vh) / 655); } } @media only screen and (min-width: 1366px) and (max-height: 655px) { .lp-mediaProduct-inner { flex: none; padding: 40px; } } .lp-mediaProduct-inner::before { position: absolute; top: 0; right: 0; width: 100%; height: 100%; background: url("../../../../../img/ss/products/measure-sys/instant_measurement/instant_measurement_bg_01.png") no-repeat center center; content: ""; } @media only screen and (max-width: 1919px) { .lp-mediaProduct-inner::before { right: calc((360 * 100vw) / 1920); width: calc((242 * 100vw) / 1920); background-size: contain; } } @media only screen and (max-width: 1365px) { .lp-mediaProduct-inner::before { display: none; } } @media only screen and (min-width: 1366px) and (max-height: 921px) { .lp-mediaProduct-inner::before { right: calc((240 * 100vh) / 655); width: calc((135 * 100vh) / 655); background-size: contain; } } @media only screen and (min-width: 1366px) and (max-height: 655px) { .lp-mediaProduct-inner::before { right: 240px; width: 135px; } } .lp-mediaProduct-body { display: flex; z-index: 1; flex-direction: column; width: 410px; } @media only screen and (max-width: 1919px) { .lp-mediaProduct-body { width: calc((410 * 100vw) / 1920); } } @media only screen and (max-width: 1365px) { .lp-mediaProduct-body { flex: none; width: 100%; } } @media only screen and (min-width: 1366px) and (max-height: 921px) { .lp-mediaProduct-body { width: calc((270 * 100vh) / 655); } } @media only screen and (min-width: 1366px) and (max-height: 655px) { .lp-mediaProduct-body { display: inline; width: 270px; } } .lp-mediaProduct-body > *:last-child { margin-bottom: 0; } .lp-mediaProduct-image { z-index: 0; width: 360px; margin: 0 0 0 30px; transition: transform 0.3s ease-out; } @media only screen and (max-width: 1919px) { .lp-mediaProduct-image { width: calc((360 * 100vw) / 1920); margin: 0 0 0 calc((30 * 100vw) / 1920); } } @media only screen and (max-width: 1365px) { .lp-mediaProduct-image { width: 160px; min-height: 0%; margin: 0 auto 7px; } } @media only screen and (min-width: 1366px) and (max-height: 921px) { .lp-mediaProduct-image { width: calc((214 * 100vh) / 655); margin: 0 0 0 calc((30 * 100vh) / 655); } } @media only screen and (min-width: 1366px) and (max-height: 655px) { .lp-mediaProduct-image { width: 214px; margin: 0 0 0 30px; } } .lp-mediaProduct.of-secondary { flex-direction: row-reverse; background: transparent linear-gradient(123deg, #a1a7c9 0%, #08145d 100%) 0% 0% no-repeat padding-box; color: #fff; } .lp-layout-main.of-color-primary .lp-mediaProduct.of-secondary { background: transparent linear-gradient(123deg, #d7eef5 0%, #08145d 100%) 0% 0% no-repeat padding-box; } @media only screen and (max-width: 1365px) { .lp-mediaProduct.of-secondary { flex-direction: column-reverse; background: #3c436e; } } @media only screen and (max-width: 1365px) { .lp-layout-main.of-color-primary .lp-mediaProduct.of-secondary { background: #3c436e; } } @media only screen and (max-width: 1919px) { .lp-mediaProduct.of-secondary .lp-mediaProduct-inner { background-size: contain; } } @media only screen and (max-width: 1365px) { .lp-mediaProduct.of-secondary .lp-mediaProduct-inner { background: none; } } @media only screen and (min-width: 1366px) and (max-height: 921px) { .lp-mediaProduct.of-secondary .lp-mediaProduct-inner { padding: 10px calc((40 * 100vh) / 655); } } @media only screen and (min-width: 1366px) and (max-height: 655px) { .lp-mediaProduct.of-secondary .lp-mediaProduct-inner { padding: 40px; } } .lp-mediaProduct.of-secondary .lp-mediaProduct-inner::before { position: absolute; top: 0; right: 0; left: 0; width: 100%; height: 100%; background: url("../../../../../img/ss/products/measure-sys/instant_measurement/instant_measurement_bg_02.png") no-repeat center center; content: ""; } @media only screen and (max-width: 1919px) { .lp-mediaProduct.of-secondary .lp-mediaProduct-inner::before { left: calc((380 * 100vw) / 1920); width: calc((209 * 100vw) / 1920); background-size: contain; } } @media only screen and (max-width: 1365px) { .lp-mediaProduct.of-secondary .lp-mediaProduct-inner::before { display: none; } } @media only screen and (min-width: 1366px) and (max-height: 921px) { .lp-mediaProduct.of-secondary .lp-mediaProduct-inner::before { left: calc((260 * 100vh) / 655); width: calc((120 * 100vh) / 655); background-size: contain; } } @media only screen and (min-width: 1366px) and (max-height: 655px) { .lp-mediaProduct.of-secondary .lp-mediaProduct-inner::before { left: 260px; width: 120px; } } .lp-mediaProduct.of-secondary .lp-mediaProduct-inner.of-row-reverse { flex-direction: row-reverse; } @media only screen and (max-width: 1365px) { .lp-mediaProduct.of-secondary .lp-mediaProduct-inner.of-row-reverse { flex-direction: column-reverse; } } .lp-mediaProduct.of-secondary .lp-mediaProduct-inner.of-row-reverse .lp-mediaProduct-body { width: 410px; } @media only screen and (max-width: 1919px) { .lp-mediaProduct.of-secondary .lp-mediaProduct-inner.of-row-reverse .lp-mediaProduct-body { width: calc((410 * 100vw) / 1920); } } @media only screen and (max-width: 1365px) { .lp-mediaProduct.of-secondary .lp-mediaProduct-inner.of-row-reverse .lp-mediaProduct-body { width: 100%; } } @media only screen and (min-width: 1366px) and (max-height: 921px) { .lp-mediaProduct.of-secondary .lp-mediaProduct-inner.of-row-reverse .lp-mediaProduct-body { width: calc((270 * 100vh) / 655); } } @media only screen and (min-width: 1366px) and (max-height: 655px) { .lp-mediaProduct.of-secondary .lp-mediaProduct-inner.of-row-reverse .lp-mediaProduct-body { display: inline; width: 270px; } } .lp-mediaProduct.of-secondary .lp-mediaProduct-image { margin: 0 30px 0 0; transition: transform 0.3s ease-out; } @media only screen and (max-width: 1919px) { .lp-mediaProduct.of-secondary .lp-mediaProduct-image { width: calc((360 * 100vw) / 1920); margin: 0 calc((30 * 100vw) / 1920) 0 0; } } @media only screen and (max-width: 1365px) { .lp-mediaProduct.of-secondary .lp-mediaProduct-image { width: 160px; min-height: 0%; margin: 0 auto 7px; } } @media only screen and (min-width: 1366px) and (max-height: 921px) { .lp-mediaProduct.of-secondary .lp-mediaProduct-image { width: calc((214 * 100vh) / 655); margin: 0 calc((30 * 100vh) / 655) 0 0; } } @media only screen and (min-width: 1366px) and (max-height: 655px) { .lp-mediaProduct.of-secondary .lp-mediaProduct-image { width: 214px; margin: 0 30px 0 0; } } .lp-mediaProduct-textGroup { margin-bottom: 24px; } @media only screen and (max-width: 1365px) { .lp-mediaProduct-textGroup { margin-bottom: 0; } } .lp-mediaProduct-textGroup > *:last-child { margin-bottom: 0; } .lp-mediaProduct .lp-buttonTransition::before { z-index: 2; position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; } .lp-mediaFeature { display: flex; flex-direction: column-reverse; } @media only screen and (max-width: 767px) { .lp-mediaFeature { max-width: 360px; margin: 0 auto; } } .lp-mediaFeature-body { font-size: 1.8rem; line-height: 1.3; } @media only screen and (max-width: 1365px) { .lp-mediaFeature-body { font-size: 1.4rem; } } @media only screen and (max-width: 767px) { .lp-mediaFeature-body { font-size: 1.8rem; } } @media only screen and (min-width: 1366px) and (max-height: 921px) { .lp-mediaFeature-body { font-size: calc((14 * 100vh) / 655); } } @media only screen and (min-width: 1366px) and (max-height: 655px) { .lp-mediaFeature-body { font-size: 1.4rem; } } .lp-mediaFeature-body > *:last-child { margin-bottom: 0; } .lp-mediaFeature-body:lang(th) { line-height: 1.7; } .lp-mediaFeature-image { min-height: 0%; margin-bottom: 8px; } .lp-mediaFeature-image > img { border: 1px solid #fff; } .lp-mediaFeature-title { margin-bottom: 8px; font-size: 1.8rem; } .lp-mediaFeature-title.of-textSize-large { font-size: 2.2rem; } .lp-figure { width: 100%; margin-bottom: 22px; } .lp-figure-caption { width: 100%; max-width: 350px; margin: 0 auto 22px; line-height: 1.2; } @media only screen and (max-width: 1365px) { .lp-figure-caption { max-width: 420px; margin: 0 auto; } } @media only screen and (max-width: 767px) { .lp-figure-caption { text-align: center; } } @media only screen and (min-width: 1366px) and (max-height: 921px) { .lp-figure-caption { margin: 0 auto 12px; } } .lp-figure-caption > b { display: block; } .lp-figure-caption.of-text-large { font-size: 2rem; } .lp-figure-caption:lang(th) { line-height: 1.7; } .lp-figure-image { width: 387px; margin: 0 auto 16px; } @media only screen and (max-width: 1919px) { .lp-figure-image { width: calc((387 * 100vw) / 1920); } } @media only screen and (min-width: 1366px) and (max-height: 921px) { .lp-figure-image { width: calc((200 * 100vh) / 655); margin: 0 auto 8px; } } @media only screen and (min-width: 1366px) and (max-height: 655px) { .lp-figure-image { width: 200px; } } .lp-figure-image.of-width-small { width: 340px; } @media only screen and (max-width: 1919px) { .lp-figure-image.of-width-small { width: calc((340 * 100vw) / 1920); } } @media only screen and (min-width: 1366px) and (max-height: 921px) { .lp-figure-image.of-width-small { width: calc((200 * 100vh) / 655); } } @media only screen and (min-width: 1366px) and (max-height: 655px) { .lp-figure-image.of-width-small { width: 200px; } } .lp-headingLevel1 { margin-bottom: 16px; padding: 0 20px; font-size: 6rem; font-weight: 300; line-height: 1.4; text-align: center; } @media only screen and (max-width: 1919px) { .lp-headingLevel1 { margin-bottom: calc((16 * 100vw) / 1920); font-size: calc((60 * 100vw) / 1920); } } @media only screen and (max-width: 1365px) { .lp-headingLevel1 { margin-bottom: 8px; font-size: 4rem; } } @media only screen and (max-width: 767px) { .lp-headingLevel1 { margin-bottom: 16px; font-size: 3rem; } } @media only screen and (min-width: 1366px) and (max-height: 921px) { .lp-headingLevel1 { font-size: calc((30 * 100vh) / 655); } } @media only screen and (min-width: 1366px) and (max-height: 655px) { .lp-headingLevel1 { font-size: 3rem; } } .lp-headingLevel1:lang(th) { line-height: 1.7; } .lp-headingLevel1-subtitle { display: block; font-size: 2rem; font-weight: bold; } @media only screen and (max-width: 1365px) { .lp-headingLevel1-subtitle { font-size: 1.6rem; } } @media only screen and (min-width: 1366px) and (max-height: 921px) { .lp-headingLevel1-subtitle { font-size: calc((16 * 100vh) / 655); } } @media only screen and (min-width: 1366px) and (max-height: 655px) { .lp-headingLevel1-subtitle { font-size: 1.6rem; } } .lp-headingLevel1-subtitle:lang(th) { line-height: 1.7; } .lp-headingLevel2 { margin-bottom: 16px; font-size: 2rem; font-weight: normal; line-height: 1.2; } @media only screen and (max-width: 1919px) { .lp-headingLevel2 { margin-bottom: calc((16 * 100vw) / 1920); } } @media only screen and (max-width: 1365px) { .lp-headingLevel2 { margin-bottom: 16px; font-size: 1.6rem; } } @media only screen and (max-width: 767px) { .lp-headingLevel2 { margin-bottom: 8px; } } @media only screen and (min-width: 1366px) and (max-height: 921px) { .lp-headingLevel2 { font-size: calc((16 * 100vh) / 655); } } @media only screen and (min-width: 1366px) and (max-height: 655px) { .lp-headingLevel2 { font-size: 1.6rem; } } .lp-headingLevel2:lang(zh) { font-weight: bold; } .lp-headingLevel2:lang(th) { line-height: 1.7; } .lp-headingLevel2.of-textSize-large { font-size: 3.2rem; } @media only screen and (max-width: 1365px) { .lp-headingLevel2.of-textSize-large { font-size: 2.4rem; } } @media only screen and (min-width: 1366px) and (max-height: 655px) { .lp-headingLevel2.of-textSize-large { font-size: 3.2rem; } } .lp-textLead { font-size: 4rem; font-weight: 300; line-height: 1.2; } @media only screen and (max-width: 1919px) { .lp-textLead { font-size: calc((40 * 100vw) / 1920); } } @media only screen and (max-width: 1365px) { .lp-textLead { font-size: 3rem; } } @media only screen and (max-width: 767px) { .lp-textLead { font-size: 2.4rem; } } @media only screen and (min-width: 1366px) and (max-height: 655px) { .lp-textLead { font-size: 3rem; } } .lp-textLead:lang(zh) { font-weight: bold; } .lp-textLead:lang(th) { line-height: 1.7; } .lp-textLead.of-textSize-large { font-size: 4.8rem; } @media only screen and (max-width: 1919px) { .lp-textLead.of-textSize-large { font-size: calc((48 * 100vw) / 1920); } } @media only screen and (max-width: 1365px) { .lp-textLead.of-textSize-large { font-size: 3rem; } } @media only screen and (max-width: 767px) { .lp-textLead.of-textSize-large { font-size: 2.8rem; } } @media only screen and (min-width: 1366px) and (max-height: 655px) { .lp-textLead.of-textSize-large { font-size: 3rem; } } .lp-buttonConversion-outer { text-align: center; } @media only screen and (max-width: 1365px) { .lp-buttonConversion-outer { flex: none; width: 100%; } } @media only screen and (max-width: 767px) { .lp-buttonConversion-outer { margin-bottom: 16px; } } .lp-buttonConversion { display: inline-block; max-width: 100%; background: #dc002f; color: #fff; font-size: 2rem; line-height: 1.4; text-align: center; text-decoration: none; transition-duration: 0.2s; transition-property: background-color; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } @media only screen and (max-width: 640px) { .lp-buttonConversion { font-size: 1.6rem; } } @media (hover: hover) { .lp-buttonConversion:hover { background-color: #c6002a; } } .lp-buttonConversion-body { display: flex; align-items: center; padding: 12px 8px 12px 24px; } @media only screen and (max-width: 640px) { .lp-buttonConversion-body { padding-top: 14px; padding-bottom: 14px; } } .lp-buttonConversion-text { margin-right: 16px; } .lp-buttonConversion-image { margin: -22px 0; border: 1px solid #ccc; } .lp-buttonConversion-image > img { min-width: 42px; max-width: 60px; } .lp-buttonConversion.of-download .lp-buttonConversion-body, .lp-buttonConversion.of-anchor .lp-buttonConversion-body, .lp-buttonConversion.of-arrow .lp-buttonConversion-body, .lp-buttonConversion.of-inquiry .lp-buttonConversion-body { position: relative; padding-left: 53px; } .lp-buttonConversion.of-download .lp-buttonConversion-body::before, .lp-buttonConversion.of-anchor .lp-buttonConversion-body::before, .lp-buttonConversion.of-arrow .lp-buttonConversion-body::before, .lp-buttonConversion.of-inquiry .lp-buttonConversion-body::before { display: block; position: absolute; top: 50%; left: 24px; width: 19px; height: 18px; transform: translateY(-50%); content: ""; } .lp-buttonConversion.of-download .lp-buttonConversion-body::before { background: url("../../img/landing_page/common/icon_btn_dl.png") no-repeat center center; } .lp-buttonConversion.of-anchor .lp-buttonConversion-body::before { background: url("../../img/landing_page/common/icon_btn_anc_03.png") no-repeat center center; } .lp-buttonConversion.of-arrow .lp-buttonConversion-body::before { left: 26px; height: 12px; border-width: 7px 0 7px 13px; border-style: solid; border-color: transparent transparent transparent #fff; } .lp-buttonConversion.of-inquiry .lp-buttonConversion-body::before { background: url("../../img/landing_page/common/icon_btn_inquiry_01.png") no-repeat center center; } .lp-buttonConversion.of-priceIcon .lp-buttonConversion-body, .lp-buttonConversion.of-priceIcon-jpy .lp-buttonConversion-body, .lp-buttonConversion.of-priceIcon-gbp .lp-buttonConversion-body, .lp-buttonConversion.of-priceIcon-krw .lp-buttonConversion-body, .lp-buttonConversion.of-priceIcon-eur .lp-buttonConversion-body { position: relative; padding-left: 53px; } .lp-buttonConversion.of-priceIcon .lp-buttonConversion-body::before, .lp-buttonConversion.of-priceIcon-jpy .lp-buttonConversion-body::before, .lp-buttonConversion.of-priceIcon-gbp .lp-buttonConversion-body::before, .lp-buttonConversion.of-priceIcon-krw .lp-buttonConversion-body::before, .lp-buttonConversion.of-priceIcon-eur .lp-buttonConversion-body::before { display: block; position: absolute; top: 50%; left: 24px; width: 19px; height: 18px; transform: translateY(-50%); content: ""; } .lp-buttonConversion.of-priceIcon .lp-buttonConversion-body::before { background: url("../../img/landing_page/common/icon_btn_price_usd.png") no-repeat center center; } .lp-buttonConversion.of-priceIcon-jpy .lp-buttonConversion-body::before { background: url("../../img/landing_page/common/icon_btn_price_jpy.png") no-repeat center center; } .lp-buttonConversion.of-priceIcon-gbp .lp-buttonConversion-body::before { background: url("../../img/landing_page/common/icon_btn_price_gbp.png") no-repeat center center; } .lp-buttonConversion.of-priceIcon-krw .lp-buttonConversion-body::before { background: url("../../img/landing_page/common/icon_btn_price_krw.png") no-repeat center center; } .lp-buttonConversion.of-priceIcon-eur .lp-buttonConversion-body::before { background: url("../../img/landing_page/common/icon_btn_price_eur.png") no-repeat center center; } .lp-buttonConversion.of-primary { background: #13778f; } @media (hover: hover) { .lp-buttonConversion.of-primary:hover { background-color: #116b81; } } .lp-buttonConversion.of-secondary { background: #0065bb; } .lp-navigationSeries { display: flex; align-items: center; justify-content: center; max-width: 1240px; margin: 20px auto; padding: 4px 10px; border: 2px solid #e5e5e5; color: #999; } div#MainContent .lp-navigationSeries { word-wrap: break-word; word-break: break-word; overflow-wrap: anywhere; } @media only screen and (max-width: 1279px) { .lp-navigationSeries { margin-right: 20px; margin-left: 20px; } } @media only screen and (max-width: 969px) { .lp-navigationSeries { flex-direction: column; align-items: center; } } .lp-navigationSeries-title { max-width: 600px; font-size: 1.1rem; font-weight: normal; line-height: 1.3; } @media only screen and (max-width: 969px) { .lp-navigationSeries-title { width: 100%; max-width: none; margin-bottom: 3px; text-align: center; } } .lp-navigationSeries-title + .lp-navigationSeries-linkList { margin-left: 10px; } @media only screen and (max-width: 969px) { .lp-navigationSeries-title + .lp-navigationSeries-linkList { margin-left: -10px; } } div#MainContent .lp-navigationSeries-title { margin-bottom: 0; color: #999; font-size: 11px; line-height: 1.3; text-transform: none; } div#MainContent .lp-navigationSeries-title + .lp-navigationSeries-linkList { margin-left: 10px; } @media only screen and (max-width: 969px) { .lp-navigationSeries-seriesNameText, .lp-navigationSeries-seriesText { display: block; } } .lp-navigationSeries-linkList { display: flex; flex-wrap: wrap; margin: -3px 0 0 -10px; color: #999; } div#MainContent .lp-navigationSeries-linkList { margin: -3px 0 0 -10px; } @media only screen and (max-width: 969px) { .lp-navigationSeries-linkList { justify-content: center; width: 100%; } } .lp-navigationSeries-linkList > li { display: flex; position: relative; margin-top: 3px; margin-left: 10px; background: none; font-size: 1.1rem; line-height: 1.3; } div#MainContent .lp-navigationSeries-linkList > li { margin: 3px 0 0 10px; padding: 0; background: none; font-size: 11px; } .lp-navigationSeries-linkList > li > a { display: block; position: relative; width: 100%; padding-left: 9px; color: #999; line-height: 1.3; text-decoration: none; } .lp-navigationSeries-linkList > li > a::before { display: block; position: absolute; top: 4px; left: -2px; width: 5px; height: 5px; transform: rotate(45deg); border-top: 1px solid #999; border-right: 1px solid #999; content: ""; } div#MainContent .lp-navigationSeries-linkList > li > a:link { color: #999; } div#MainContent .lp-navigationSeries-linkList > li > a::before { top: 0.3em; } .lp-navigationSeries-linkList > li > a:hover, .lp-navigationSeries-linkList > li > a:focus { text-decoration: underline; } .lp-buttonConversion.of-download .lp-buttonConversion-body::before { background: url("../../../../../../img/landing_page/common/icon_btn_dl.png") no-repeat center center !important; } .lp-buttonTransition { display: inline-block; width: 100%; padding: 8px 10px; background: #333; color: #fff; text-align: center; text-decoration: none; transition: background-color 0.3s; } .lp-buttonTransition:hover { background: #046e1d; } .lp-buttonTransition.of-primary:hover { background: #005ae2; } .lp-buttonTransition-outer { width: 218px; margin-bottom: 20px; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); } .lp-buttonTelephone { display: none; margin-bottom: 16px; } @media only screen and (max-width: 767px) { .lp-buttonTelephone { display: block; } } .lp-buttonTelephone > a { display: flex; align-items: center; justify-content: center; margin-top: 5px; color: inherit; font-size: 2rem; font-weight: bold; text-decoration: none; cursor: inherit; } .lp-buttonTelephone > a::before { display: block; width: 29px; height: 29px; background: url("../../../../../img/core/icon_tel_l_trans.png") no-repeat; background-size: cover; content: ""; } .lp-listButton { display: flex; flex-direction: column; margin: -24px 0 16px -24px; } .lp-listButton > li { margin-top: 24px; padding-left: 24px; } .lp-listButton.of-alignItems-center { align-items: center; } .lp-listButton.of-width-equal { display: grid; grid-template-columns: -webkit-max-content; grid-template-columns: max-content; justify-content: center; } .lp-listButton.of-width-equal > li > * { width: 100%; max-width: 340px; } .lp-listButton.of-width-equal .lp-buttonConversion-body { justify-content: center; padding-right: 24px; padding-left: 28px; } .lp-listButton.of-width-equal .lp-buttonConversion.of-download .lp-buttonConversion-body, .lp-listButton.of-width-equal .lp-buttonConversion.of-anchor .lp-buttonConversion-body { padding-right: 8px; } .lp-listButton.of-width-equal .lp-buttonConversion.of-arrow .lp-buttonConversion-text, .lp-listButton.of-width-equal .lp-buttonConversion.of-inquiry .lp-buttonConversion-text { margin-right: 0; } .lp-listButton.of-width-equal .lp-buttonConversion.of-download .lp-buttonConversion-text, .lp-listButton.of-width-equal .lp-buttonConversion.of-anchor .lp-buttonConversion-text, .lp-listButton.of-width-equal .lp-buttonConversion.of-arrow .lp-buttonConversion-text, .lp-listButton.of-width-equal .lp-buttonConversion.of-inquiry .lp-buttonConversion-text { position: relative; padding-left: 28px; } .lp-listButton.of-width-equal .lp-buttonConversion.of-download .lp-buttonConversion-body::before, .lp-buttonConversion.of-anchor .lp-buttonConversion-body::before, .lp-listButton.of-width-equal .lp-buttonConversion.of-arrow .lp-buttonConversion-body::before, .lp-listButton.of-width-equal .lp-buttonConversion.of-inquiry .lp-buttonConversion-body::before { content: none; } .lp-listButton.of-width-equal .lp-buttonConversion.of-download .lp-buttonConversion-text::before, .lp-listButton.of-width-equal .lp-buttonConversion.of-anchor .lp-buttonConversion-text::before, .lp-listButton.of-width-equal .lp-buttonConversion.of-arrow .lp-buttonConversion-text::before, .lp-listButton.of-width-equal .lp-buttonConversion.of-inquiry .lp-buttonConversion-text::before { display: block; position: absolute; top: 50%; left: 0; width: 19px; height: 18px; transform: translateY(-50%); content: ""; } .lp-listButton.of-width-equal .lp-buttonConversion.of-download .lp-buttonConversion-text::before { background: url("../../img/landing_page/common/icon_btn_dl.png") no-repeat center center; } .lp-listButton.of-width-equal .lp-buttonConversion.of-anchor .lp-buttonConversion-text::before { background: url("../../img/landing_page/common/icon_btn_anc_03.png") no-repeat center center; } .lp-listButton.of-width-equal .lp-buttonConversion.of-arrow .lp-buttonConversion-text::before { left: 0; height: 12px; border-width: 7px 0 7px 13px; border-style: solid; border-color: transparent transparent transparent #fff; } .lp-listButton.of-width-equal .lp-buttonConversion.of-inquiry .lp-buttonConversion-text::before { background: url("../../img/landing_page/common/icon_btn_inquiry_01.png") no-repeat center center; } .lp-listButton.of-width-equal .lp-buttonConversion.of-priceIcon .lp-buttonConversion-text, .lp-buttonConversion.of-priceIcon-jpy .lp-buttonConversion-text, .lp-buttonConversion.of-priceIcon-gbp .lp-buttonConversion-text, .lp-buttonConversion.of-priceIcon-krw .lp-buttonConversion-text, .lp-buttonConversion.of-priceIcon-eur .lp-buttonConversion-text { position: relative; padding-left: 53px; } .lp-listButton.of-width-equal .lp-buttonConversion.of-priceIcon .lp-buttonConversion-text::before, .lp-buttonConversion.of-priceIcon-jpy .lp-buttonConversion-text::before, .lp-buttonConversion.of-priceIcon-gbp .lp-buttonConversion-text::before, .lp-buttonConversion.of-priceIcon-krw .lp-buttonConversion-text::before, .lp-buttonConversion.of-priceIcon-eur .lp-buttonConversion-text::before { display: block; position: absolute; top: 50%; left: 24px; width: 19px; height: 18px; transform: translateY(-50%); content: ""; } .lp-listButton.of-width-equal .lp-buttonConversion.of-priceIcon .lp-buttonConversion-text::before { background: url("../../img/landing_page/common/icon_btn_price_usd.png") no-repeat center center; } .lp-listButton.of-width-equal .lp-buttonConversion.of-priceIcon-jpy .lp-buttonConversion-text::before { background: url("../../img/landing_page/common/icon_btn_price_jpy.png") no-repeat center center; } .lp-listButton.of-width-equal .lp-buttonConversion.of-priceIcon-gbp .lp-buttonConversion-text::before { background: url("../../img/landing_page/common/icon_btn_price_gbp.png") no-repeat center center; } .lp-listButton.of-width-equal .lp-buttonConversion.of-priceIcon-krw .lp-buttonConversion-text::before { background: url("../../img/landing_page/common/icon_btn_price_krw.png") no-repeat center center; } .lp-listButton.of-width-equal .lp-buttonConversion.of-priceIcon-eur .lp-buttonConversion-text::before { background: url("../../img/landing_page/common/icon_btn_price_eur.png") no-repeat center center; } .lp-listButton.of-width-equal .lp-buttonConversion.of-arrow .lp-buttonConversion-text::before { background: url("../../img/landing_page/common/icon_btn_inquiry_01.png") no-repeat center center; } .lp-listButton.of-width-equal .lp-buttonConversion.of-download .lp-buttonConversion-text::before { background: url("../../../../../../img/landing_page/common/icon_btn_dl.png") no-repeat center center !important; } @media only screen and (max-width: 1365px) { .lp-listButton.of-width-equal.lp-smallScreen-horizontal { grid-template-columns: 1fr 1fr; } } @media only screen and (max-width: 767px) { .lp-listButton.of-width-equal.lp-extraSmallScreen-vertical { grid-template-columns: -webkit-max-content; grid-template-columns: max-content; } } .lp-jumbotron .lp-listButton.of-width-equal .lp-buttonConversion-text { white-space: normal; } @media only screen and (max-width: 1365px) { .lp-smallScreen-hide { display: none; } } @media only screen and (max-width: 767px) { .lp-extraSmallScreen-column { flex-direction: column; } } .lp-utility-textAlign-center { text-align: center; } .lp-utility-text-newLine { display: block; } @media only screen and (min-width: 768px) { .lp-largeScreen-text-newLine { display: block; } } @media only screen and (min-width: 1366px) { .lp-extraLargeScreen-newLine { display: block; } } @media only screen and (min-width: 1366px) { .lp-extraLargeScreen-hide { display: none; } } .lp-jumbotron .lp-textLead.of-text-shadow.of-primary { text-shadow: 1px 1px 10px #fffffc, 1px 1px 10px #dbd3ae, 1px 1px 10px #dbd3ae; } .lp-mediaProduct.of-backgroundColor-primary { background: transparent linear-gradient(220deg, #fffffc 0%, #dbd3ae 100%) 0% 0% no-repeat padding-box !important; } .lp-mediaProduct.of-backgroundColor-secondary { background: transparent linear-gradient(123deg, #c499a4 0%, #4a071e 100%) 0% 0% no-repeat padding-box !important; } @media only screen and (max-width: 1365px) { .lp-jumbotron .lp-textLead.of-text-shadow.of-primary { text-shadow: none; } .lp-jumbotron-body.of-backgroundColor-primary { background: #dbd3ae !important; } .lp-jumbotron-body.of-backgroundColor-secondary { background: #4a071e !important; } .lp-mediaProduct.of-backgroundColor-primary { background: #dbd3ae !important; } .lp-mediaProduct.of-backgroundColor-secondary { background: #4a071e !important; } .lp-mediaProduct-inner.of-backgroundColor-primary { background: #dbd3ae !important; } .lp-mediaProduct-inner.of-backgroundColor-secondary { background: #4a071e !important; } }