@charset "UTF-8"; .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; } @media only screen and (max-width: 640px) { .lp-buttonConversion { font-size: 1.6rem; } } .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("../../") no-repeat center center; } .lp-buttonConversion.of-priceIcon-jpy .lp-buttonConversion-body::before { background: url("../../") no-repeat center center; } .lp-buttonConversion.of-priceIcon-gbp .lp-buttonConversion-body::before { background: url("../../") no-repeat center center; } .lp-buttonConversion.of-priceIcon-krw .lp-buttonConversion-body::before { background: url("../../") no-repeat center center; } .lp-buttonConversion.of-priceIcon-eur .lp-buttonConversion-body::before { background: url("../../") no-repeat center center; } .lp-buttonConversion.of-primary { background: #13778f; } .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; } .ss-layout-header-content > *:last-child, .ss-layout-footer-content > *:last-child, .ss-layout-footer-list > *:last-child, .ss-layout-grid > .ss-layout-grid-column > *:last-child, .ss-section-content > *:last-child, .ss-sectionCategory > *:last-child, .ss-sectionApplication > *:last-child, .ss-jumbotron-body > *:last-child, .ss-mediaSlider-body > *:last-child, .ss-mediaSlider-textOuter > *:last-child, .ss-mediaSlider-tagGroup-outer > *:last-child, .ss-mediaApplication-header > *:last-child, .ss-mediaApplication-body > *:last-child, .ss-mediaNavigation-body > *:last-child, .ss-cardConversion > *:last-child, .ss-cardConversion-header > *:last-child, .ss-cardConversion-body > *:last-child, .ss-listNotes > *:last-child, .ss-textLocalNavigation > *:last-child { margin-bottom: 0 !important; } html:not(.theme-KC):not(.theme-KK):not(.theme-KW):not(.theme-KJ) .ss-cardConversion { flex-direction: column; padding: 16px; } @media only screen and (max-width: 1023px) { html:not(.theme-KC):not(.theme-KK):not(.theme-KW):not(.theme-KJ) .ss-cardConversion { padding: 8px; } } html:not(.theme-KC):not(.theme-KK):not(.theme-KW):not(.theme-KJ) .ss-cardConversion-header { margin-bottom: 16px; padding: 0; } @media only screen and (max-width: 1023px) { html:not(.theme-KC):not(.theme-KK):not(.theme-KW):not(.theme-KJ) .ss-listButton { flex-direction: column; margin-top: -8px; } } @media only screen and (max-width: 1023px) { html:not(.theme-KC):not(.theme-KK):not(.theme-KW):not(.theme-KJ) .ss-listButton > li { margin-top: 8px; } } .theme-KT body { line-height: 1.7; } :root { font-size: 62.5%; } * { box-sizing: border-box; margin: 0; padding: 0; } *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } .theme-KJ { -webkit-text-size-adjust: 100%; font-size: 62.5%; } .theme-KJ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; word-wrap: break-word; min-width: 320px; background: #fff; color: #333; font-family: source-han-sans-japanese, notosans, "Hiragino Kaku Gothic Pro", Meiryo, Osaka, "MS PGothic", sans-serif; font-size: 1.6rem; line-height: 1.4; word-break: break-word; overflow-wrap: anywhere; } main { display: block; } p { margin-bottom: 16px; } ul, ol { list-style: none; } hr { box-sizing: content-box; height: 0; overflow: visible; } pre { font-family: monospace; font-size: 1em; } a { background-color: transparent; text-decoration: underline; } a:hover, a:active, a:focus { text-decoration: none; } abbr[title] { border-bottom: 0; text-decoration: underline dotted; } b, strong { font-weight: bold; } em { font-style: normal; font-weight: bold; } dfn, cite { font-style: normal; } code, kbd, samp { font-family: monospace; font-size: 1em; } small { font-size: 100%; } i { font-style: italic; } sub, sup { position: relative; font-size: 75%; line-height: 0; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } img { max-width: 100%; border-style: none; vertical-align: bottom; } table { width: 100%; border-collapse: collapse; } button, input, optgroup, select, textarea { border-radius: 0; font-family: inherit; font-size: 100%; line-height: inherit; } button, input { overflow: visible; } button, select { text-transform: none; } button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; border: 0; background: none; cursor: pointer; } button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { padding: 0; border-style: none; } button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: none; } legend { display: table; max-width: 100%; color: inherit; white-space: normal; } progress { vertical-align: baseline; } textarea { overflow: auto; } [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } [type="search"] { -webkit-appearance: textfield; outline-offset: -2px; } [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; } details { display: block; } summary { display: list-item; } template { display: none; } [hidden] { display: none; } .ss-layout-header { position: relative; width: 100%; background-color: #f1f1f1; } @media only screen and (max-width: 767px) { .ss-layout-header { min-height: 100%; } } .ss-layout-header-content { display: flex; align-items: center; max-width: 1520px; margin: 0 auto; padding: 26px 120px; } @media only screen and (max-width: 1023px) { .ss-layout-header-content { padding: 16px 120px; } } .ss-layout-header-logo { display: block; min-height: 0%; margin: 0 auto 0 0; line-height: 1; text-align: center; } @media only screen and (max-width: 1023px) { .ss-layout-header-logo { margin: auto; } } .ss-layout-header-logo a { text-decoration: none; } .ss-layout-header-logo img { width: 138px; } @media only screen and (max-width: 1023px) { .ss-layout-header-logo img { width: 91px; } } .theme-KC .ss-layout-header-logo img { width: 250px; } @media only screen and (max-width: 1023px) { .theme-KC .ss-layout-header-logo img { width: 214px; } } .ss-layout-footer { width: 100%; overflow: hidden; background-color: #24232b; } .ss-layout-footer-content { max-width: 1280px; margin: auto; padding: 24px 20px; } .ss-layout-footer-list { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; margin: -8px 0 16px -32px; line-height: 1.2; } .ss-layout-footer-list > li { margin-top: 8px; padding-left: 32px; color: #f1f1f1; font-size: 1.4rem; } @media only screen and (max-width: 1023px) { .ss-layout-footer-list > li:last-child::before { content: none; } } .ss-layout-footer-list > li > a { color: #f1f1f1; text-decoration: none; } .ss-layout-footer-list > li + li { position: relative; } .ss-layout-footer-list > li + li::before { position: absolute; top: 50%; left: 14px; width: 1px; height: 100%; transform: translateY(-50%); background-color: #f1f1f1; content: ""; } @media only screen and (max-width: 1023px) { .ss-layout-footer-copyright { width: 100%; text-align: center; } } .ss-layout-main { position: relative; } .ss-layout-grid { display: flex; flex-wrap: wrap; margin: -24px 0 32px -40px; } .ss-layout-grid.of-primary { margin-left: -20px; } @media only screen and (max-width: 1023px) { .ss-layout-grid.of-primary { justify-content: center; margin-bottom: 16px; margin-left: -16px; } } .ss-layout-grid.of-primary > .ss-layout-grid-column { width: 50% !important; padding-left: 20px; } @media only screen and (max-width: 1023px) { .ss-layout-grid.of-primary > .ss-layout-grid-column { padding-left: 16px; } } .ss-layout-grid.of-secondary { margin: -20px 0 20px -20px; } @media only screen and (max-width: 1023px) { .ss-layout-grid.of-secondary { margin: 0 0 20px 0; } } .ss-layout-grid.of-secondary > .ss-layout-grid-column { margin-top: 20px; padding-left: 20px; } @media only screen and (max-width: 1023px) { .ss-layout-grid.of-secondary > .ss-layout-grid-column { margin-top: 0; margin-bottom: 8px; padding-left: 0; } } .ss-layout-grid > .ss-layout-grid-column { margin-top: 24px; padding-left: 40px; } .ss-layout-grid > .ss-layout-grid-column:not([class*="of-column-"]) { width: 100%; } .ss-layout-grid > .ss-layout-grid-column.of-flex { display: flex; flex-wrap: wrap; } .ss-layout-grid > .ss-layout-grid-column.of-flex > * { width: 100%; } .ss-layout-grid > .ss-layout-grid-column.of-width-full { width: 100% !important; } .ss-layout-grid.of-column-2 > .ss-layout-grid-column:not([class*="of-column-"]) { width: 50%; } .ss-layout-grid.of-column-3 > .ss-layout-grid-column:not([class*="of-column-"]) { width: 33.33333%; } .ss-layout-grid.of-column-4 > .ss-layout-grid-column:not([class*="of-column-"]) { width: 25%; } .ss-layout-grid.of-column-5 > .ss-layout-grid-column:not([class*="of-column-"]) { width: 20%; } .ss-layout-grid.of-column-6 > .ss-layout-grid-column:not([class*="of-column-"]) { width: 16.66667%; } .ss-layout-grid.of-column-7 > .ss-layout-grid-column:not([class*="of-column-"]) { width: 14.28571%; } .ss-layout-grid.of-column-8 > .ss-layout-grid-column:not([class*="of-column-"]) { width: 12.5%; } .ss-layout-grid.of-column-9 > .ss-layout-grid-column:not([class*="of-column-"]) { width: 11.11111%; } .ss-layout-grid.of-column-10 > .ss-layout-grid-column:not([class*="of-column-"]) { width: 10%; } .ss-layout-grid.of-column-11 > .ss-layout-grid-column:not([class*="of-column-"]) { width: 9.09091%; } .ss-layout-grid.of-column-12 > .ss-layout-grid-column:not([class*="of-column-"]) { width: 8.33333%; } .ss-layout-grid.of-column-2 > .ss-layout-grid-column.of-column-2 { width: 100%; } .ss-layout-grid.of-column-3 > .ss-layout-grid-column.of-column-2 { width: 66.66667%; } .ss-layout-grid.of-column-3 > .ss-layout-grid-column.of-column-3 { width: 100%; } .ss-layout-grid.of-column-4 > .ss-layout-grid-column.of-column-2 { width: 50%; } .ss-layout-grid.of-column-4 > .ss-layout-grid-column.of-column-3 { width: 75%; } .ss-layout-grid.of-column-4 > .ss-layout-grid-column.of-column-4 { width: 100%; } .ss-layout-grid.of-column-5 > .ss-layout-grid-column.of-column-2 { width: 40%; } .ss-layout-grid.of-column-5 > .ss-layout-grid-column.of-column-3 { width: 60%; } .ss-layout-grid.of-column-5 > .ss-layout-grid-column.of-column-4 { width: 80%; } .ss-layout-grid.of-column-5 > .ss-layout-grid-column.of-column-5 { width: 100%; } .ss-layout-grid.of-column-6 > .ss-layout-grid-column.of-column-2 { width: 33.33333%; } .ss-layout-grid.of-column-6 > .ss-layout-grid-column.of-column-3 { width: 50%; } .ss-layout-grid.of-column-6 > .ss-layout-grid-column.of-column-4 { width: 66.66667%; } .ss-layout-grid.of-column-6 > .ss-layout-grid-column.of-column-5 { width: 83.33333%; } .ss-layout-grid.of-column-6 > .ss-layout-grid-column.of-column-6 { width: 100%; } .ss-layout-grid.of-column-7 > .ss-layout-grid-column.of-column-2 { width: 28.57143%; } .ss-layout-grid.of-column-7 > .ss-layout-grid-column.of-column-3 { width: 42.85714%; } .ss-layout-grid.of-column-7 > .ss-layout-grid-column.of-column-4 { width: 57.14286%; } .ss-layout-grid.of-column-7 > .ss-layout-grid-column.of-column-5 { width: 71.42857%; } .ss-layout-grid.of-column-7 > .ss-layout-grid-column.of-column-6 { width: 85.71429%; } .ss-layout-grid.of-column-7 > .ss-layout-grid-column.of-column-7 { width: 100%; } .ss-layout-grid.of-column-8 > .ss-layout-grid-column.of-column-2 { width: 25%; } .ss-layout-grid.of-column-8 > .ss-layout-grid-column.of-column-3 { width: 37.5%; } .ss-layout-grid.of-column-8 > .ss-layout-grid-column.of-column-4 { width: 50%; } .ss-layout-grid.of-column-8 > .ss-layout-grid-column.of-column-5 { width: 62.5%; } .ss-layout-grid.of-column-8 > .ss-layout-grid-column.of-column-6 { width: 75%; } .ss-layout-grid.of-column-8 > .ss-layout-grid-column.of-column-7 { width: 87.5%; } .ss-layout-grid.of-column-8 > .ss-layout-grid-column.of-column-8 { width: 100%; } .ss-layout-grid.of-column-9 > .ss-layout-grid-column.of-column-2 { width: 22.22222%; } .ss-layout-grid.of-column-9 > .ss-layout-grid-column.of-column-3 { width: 33.33333%; } .ss-layout-grid.of-column-9 > .ss-layout-grid-column.of-column-4 { width: 44.44444%; } .ss-layout-grid.of-column-9 > .ss-layout-grid-column.of-column-5 { width: 55.55556%; } .ss-layout-grid.of-column-9 > .ss-layout-grid-column.of-column-6 { width: 66.66667%; } .ss-layout-grid.of-column-9 > .ss-layout-grid-column.of-column-7 { width: 77.77778%; } .ss-layout-grid.of-column-9 > .ss-layout-grid-column.of-column-8 { width: 88.88889%; } .ss-layout-grid.of-column-9 > .ss-layout-grid-column.of-column-9 { width: 100%; } .ss-layout-grid.of-column-10 > .ss-layout-grid-column.of-column-2 { width: 20%; } .ss-layout-grid.of-column-10 > .ss-layout-grid-column.of-column-3 { width: 30%; } .ss-layout-grid.of-column-10 > .ss-layout-grid-column.of-column-4 { width: 40%; } .ss-layout-grid.of-column-10 > .ss-layout-grid-column.of-column-5 { width: 50%; } .ss-layout-grid.of-column-10 > .ss-layout-grid-column.of-column-6 { width: 60%; } .ss-layout-grid.of-column-10 > .ss-layout-grid-column.of-column-7 { width: 70%; } .ss-layout-grid.of-column-10 > .ss-layout-grid-column.of-column-8 { width: 80%; } .ss-layout-grid.of-column-10 > .ss-layout-grid-column.of-column-9 { width: 90%; } .ss-layout-grid.of-column-10 > .ss-layout-grid-column.of-column-10 { width: 100%; } .ss-layout-grid.of-column-11 > .ss-layout-grid-column.of-column-2 { width: 18.18182%; } .ss-layout-grid.of-column-11 > .ss-layout-grid-column.of-column-3 { width: 27.27273%; } .ss-layout-grid.of-column-11 > .ss-layout-grid-column.of-column-4 { width: 36.36364%; } .ss-layout-grid.of-column-11 > .ss-layout-grid-column.of-column-5 { width: 45.45455%; } .ss-layout-grid.of-column-11 > .ss-layout-grid-column.of-column-6 { width: 54.54545%; } .ss-layout-grid.of-column-11 > .ss-layout-grid-column.of-column-7 { width: 63.63636%; } .ss-layout-grid.of-column-11 > .ss-layout-grid-column.of-column-8 { width: 72.72727%; } .ss-layout-grid.of-column-11 > .ss-layout-grid-column.of-column-9 { width: 81.81818%; } .ss-layout-grid.of-column-11 > .ss-layout-grid-column.of-column-10 { width: 90.90909%; } .ss-layout-grid.of-column-11 > .ss-layout-grid-column.of-column-11 { width: 100%; } .ss-layout-grid.of-column-12 > .ss-layout-grid-column.of-column-2 { width: 16.66667%; } .ss-layout-grid.of-column-12 > .ss-layout-grid-column.of-column-3 { width: 25%; } .ss-layout-grid.of-column-12 > .ss-layout-grid-column.of-column-4 { width: 33.33333%; } .ss-layout-grid.of-column-12 > .ss-layout-grid-column.of-column-5 { width: 41.66667%; } .ss-layout-grid.of-column-12 > .ss-layout-grid-column.of-column-6 { width: 50%; } .ss-layout-grid.of-column-12 > .ss-layout-grid-column.of-column-7 { width: 58.33333%; } .ss-layout-grid.of-column-12 > .ss-layout-grid-column.of-column-8 { width: 66.66667%; } .ss-layout-grid.of-column-12 > .ss-layout-grid-column.of-column-9 { width: 75%; } .ss-layout-grid.of-column-12 > .ss-layout-grid-column.of-column-10 { width: 83.33333%; } .ss-layout-grid.of-column-12 > .ss-layout-grid-column.of-column-11 { width: 91.66667%; } .ss-layout-grid.of-column-12 > .ss-layout-grid-column.of-column-12 { width: 100%; } @media only screen and (max-width: 1023px) { .ss-layout-grid[class*="of-column-"] > .ss-layout-grid-column:not([class*="of-column-"]), .ss-layout-grid[class*="of-column-"] > .ss-layout-grid-column[class*="of-column-"] { width: 100%; } } @media only screen and (max-width: 1023px) { .ss-layout-grid.ss-smallScreen-column-2 > .ss-layout-grid-column:not([class*="of-column-"]), .ss-layout-grid.ss-smallScreen-column-2 > .ss-layout-grid-column[class*="of-column-"] { width: 50%; } .ss-layout-grid.ss-smallScreen-column-3 > .ss-layout-grid-column:not([class*="of-column-"]), .ss-layout-grid.ss-smallScreen-column-3 > .ss-layout-grid-column[class*="of-column-"] { width: 33.33333%; } } @media only screen and (max-width: 767px) { .ss-layout-grid.ss-extraSmallScreen-column-1 > .ss-layout-grid-column:not([class*="of-column-"]), .ss-layout-grid.ss-extraSmallScreen-column-1 > .ss-layout-grid-column[class*="of-column-"] { width: 100%; } .ss-layout-grid.ss-extraSmallScreen-column-2 > .ss-layout-grid-column:not([class*="of-column-"]), .ss-layout-grid.ss-extraSmallScreen-column-2 > .ss-layout-grid-column[class*="of-column-"] { width: 100%; } .ss-layout-grid.ss-extraSmallScreen-column-3 > .ss-layout-grid-column:not([class*="of-column-"]), .ss-layout-grid.ss-extraSmallScreen-column-3 > .ss-layout-grid-column[class*="of-column-"] { width: 100%; } } @media only screen and (max-width: 1365px) { .ss-layout-grid.ss-largeScreen-column-2 > .ss-layout-grid-column:not([class*="of-column-"]), .ss-layout-grid.ss-largeScreen-column-2 > .ss-layout-grid-column[class*="of-column-"] { width: 50%; } } @media only screen and (max-width: 1365px) and (max-width: 1023px) { .ss-layout-grid.ss-largeScreen-column-2 > .ss-layout-grid-column:not([class*="of-column-"]), .ss-layout-grid.ss-largeScreen-column-2 > .ss-layout-grid-column[class*="of-column-"] { width: 100%; } } @media only screen and (max-width: 1365px) { .ss-layout-grid.ss-largeScreen-column-3 > .ss-layout-grid-column:not([class*="of-column-"]), .ss-layout-grid.ss-largeScreen-column-3 > .ss-layout-grid-column[class*="of-column-"] { width: 33.33333%; } } @media only screen and (max-width: 1365px) and (max-width: 1023px) { .ss-layout-grid.ss-largeScreen-column-3 > .ss-layout-grid-column:not([class*="of-column-"]), .ss-layout-grid.ss-largeScreen-column-3 > .ss-layout-grid-column[class*="of-column-"] { width: 100%; } } @media only screen and (max-width: 1365px) { .ss-layout-grid.ss-largeScreen-column-4 > .ss-layout-grid-column:not([class*="of-column-"]), .ss-layout-grid.ss-largeScreen-column-4 > .ss-layout-grid-column[class*="of-column-"] { width: 25%; } } @media only screen and (max-width: 1365px) and (max-width: 1023px) { .ss-layout-grid.ss-largeScreen-column-4 > .ss-layout-grid-column:not([class*="of-column-"]), .ss-layout-grid.ss-largeScreen-column-4 > .ss-layout-grid-column[class*="of-column-"] { width: 100%; } } .ss-section { overflow: hidden; background-color: #f1f1f1; } .ss-section-content { max-width: 1520px; margin: auto; padding: 15px 120px 240px; } @media only screen and (max-width: 1023px) { .ss-section-content { padding: 15px calc(2rem + ((1vw - 0.36rem) * (15.08296))) 56px; } } .ss-section.of-index .ss-section-content { padding-top: 90px; } @media only screen and (max-width: 1023px) { .ss-section.of-index .ss-section-content { padding-top: calc(5.6rem + ((1vw - 0.36rem) * (5.12821))); } } .ss-section.of-phone .ss-section-content { padding-top: 0; padding-bottom: 80px; } @media only screen and (max-width: 1023px) { .ss-section.of-phone .ss-section-content { padding-top: 0; padding-bottom: 64px; } } @media only screen and (max-width: 1023px) { .ss-section.of-phone.of-primary .ss-section-content { padding-bottom: 24px; } } .ss-section.of-primary .ss-section-content { padding-bottom: 56px; } .ss-section.of-secondary { background-color: #fff; } .ss-section.of-secondary .ss-section-content { padding-top: 64px; padding-bottom: 64px; } @media only screen and (max-width: 1023px) { .ss-section.of-secondary .ss-section-content { padding-top: calc(1.5rem + ((1vw - 0.36rem) * (7.39065))); padding-bottom: calc(8.6rem + ((1vw - 0.36rem) * (3.61991))); } } .ss-sectionCategory { margin-bottom: 80px; } @media only screen and (max-width: 1023px) { .ss-sectionCategory { margin-bottom: 54px; } } .ss-sectionApplication { margin-bottom: 50px; } @media only screen and (max-width: 1023px) { .ss-sectionApplication { margin-bottom: calc(3.4rem + ((1vw - 0.36rem) * (2.41327))); } } .ss-jumbotron { display: flex; align-items: center; width: 100%; min-height: 340px; background-image: url("../../../../../img/ss/products/sensor/application-selecting/index_img_01.jpg"); background-position: center; background-repeat: no-repeat; background-size: cover; } @media only screen and (max-width: 1365px) { .ss-jumbotron { min-height: 0; background-color: #000; background-position: top; background-size: contain; } } .ss-jumbotron-outer { display: flex; } .ss-jumbotron-content { max-width: 1280px; margin: auto; padding: 20px; } @media only screen and (max-width: 1365px) { .ss-jumbotron-content { margin: 17vw auto 0; } } .ss-jumbotron-title { color: #fff; font-size: 4rem; text-align: center; text-shadow: 0 0 18px #000; } @media only screen and (max-width: 1365px) { .ss-jumbotron-title { font-size: calc(2.2rem + ((1vw - 0.36rem) * (2.71493))); font-weight: 500; } } .ss-jumbotron-title.of-primary { font-weight: 700; } .ss-jumbotron.of-primary { min-height: 0; background-color: #24232b; background-image: none; } .ss-jumbotron.of-primary .ss-jumbotron-content { margin: 0 auto; padding: 20px; } @media only screen and (max-width: 1365px) { .ss-jumbotron.of-primary .ss-jumbotron-title { font-weight: 800; } } .ss-headingLevel1 { margin-bottom: 50px; font-size: 4.8rem; font-weight: 500; text-align: center; } @media only screen and (max-width: 1023px) { .ss-headingLevel1 { margin-bottom: calc(1rem + ((1vw - 0.36rem) * (6.03318))); font-size: calc(2.4rem + ((1vw - 0.36rem) * (3.61991))); } } .ss-headingLevel2 { margin-bottom: 24px; font-size: 3.2rem; font-weight: 500; line-height: 1.2; } @media only screen and (max-width: 1023px) { .ss-headingLevel2 { font-size: calc(1.8rem + ((1vw - 0.36rem) * (2.11161))); } } .ss-headingLevel2 > a { color: inherit; text-decoration: none; transition: all 0.4s; } .ss-headingLevel2 > a:hover { color: #b10000; } .ss-headingLevel2.of-primary { margin-bottom: 24px; padding-top: 30px; font-size: 2.8rem; font-weight: 500; } @media only screen and (max-width: 1023px) { .ss-headingLevel2.of-primary { margin-bottom: calc(1.6rem + ((1vw - 0.36rem) * (1.20664))); font-size: calc(2rem + ((1vw - 0.36rem) * (1.20664))); text-align: center; } } .ss-navigation { background-color: #1d1d1d; } .ss-navigation-content { max-width: 1520px; margin: auto; padding: 16px 120px; } @media only screen and (max-width: 1365px) { .ss-navigation-content { padding: 0; } } .ss-navigation-list { display: flex; flex-wrap: wrap; } .ss-navigation-list > li { display: flex; position: relative; align-items: center; width: calc(100% / 5); border-top: 2px solid #000; background-color: #343434; font-size: 1.4rem; } @media only screen and (max-width: 1365px) { .ss-navigation-list > li { width: calc(100% / 3); border-top: 0; border-bottom: 1px solid #d5d5d5; border-left: 1px solid #d5d5d5; } } @media only screen and (max-width: 1023px) { .ss-navigation-list > li { width: calc(100% / 2); border-top: 0; border-bottom: 1px solid #d5d5d5; border-left: 1px solid #d5d5d5; } } @media only screen and (max-width: 1365px) { .ss-navigation-list > li:nth-child(3n + 1) { border-left: 0; } } @media only screen and (max-width: 1023px) { .ss-navigation-list > li:nth-child(3n + 1) { border-left: 1px solid #d5d5d5; } } @media only screen and (max-width: 1023px) { .ss-navigation-list > li:nth-child(odd) { border-left: 0; } } @media only screen and (max-width: 1023px) { .ss-navigation-list > li:nth-child(odd):last-child { width: 100%; } } .ss-navigation-list > li::before { position: absolute; top: 50%; left: 18px; width: 10px; height: 10px; transform: translateY(-50%) rotate(-45deg); border-right: 2px solid #fff; border-bottom: 2px solid #fff; content: ""; transition: all 0.4s; } @media only screen and (max-width: 1365px) { .ss-navigation-list > li::before { content: none; } } .ss-navigation-list > li:hover { border-top: 2px solid #f11; background-color: #b10000; transition: all 0.4s; } @media only screen and (max-width: 1365px) { .ss-navigation-list > li:hover { border-top: 0; } } .ss-navigation-list > li > a { display: block; width: 100%; padding: 16px 16px 16px 40px; color: #fff; text-decoration: none; } @media only screen and (max-width: 1365px) { .ss-navigation-list > li > a { padding: 18px 20px; font-size: 1.5rem; text-align: center; } } @media only screen and (max-width: 1023px) { .ss-mediaSlider-group { width: 90%; } } .ss-mediaSlider-content { display: flex !important; flex: 1; flex-direction: column-reverse; color: inherit; text-decoration: none; transition: all 0.4s; } .ss-mediaSlider:hover .ss-mediaSlider-text { color: #b10000; transition: all 0.4s; } .ss-mediaSlider:hover .ss-mediaSlider-textOuter::before { border-color: #b10000; transition: all 0.4s; } .ss-mediaSlider-body { flex-grow: 1; padding: 8px 16px; border-left: 1px solid #d5d5d5; } .ss-mediaSlider-image { min-height: 0%; } .ss-mediaSlider-textOuter { position: relative; padding-left: 32px; } @media only screen and (max-width: 1365px) { .ss-mediaSlider-textOuter { padding-left: calc(1.6rem + ((1vw - 0.36rem) * (1.59204))); } } .ss-mediaSlider-textOuter::before { position: absolute; top: 0.5em; left: 5px; width: 8px; height: 8px; transform: rotate(-45deg); border-right: 1px solid; border-bottom: 1px solid; content: ""; } @media only screen and (max-width: 1365px) { .ss-mediaSlider-textOuter::before { left: calc(-0.5rem + ((1vw - 0.36rem) * (0.99502))); } } .ss-mediaSlider-text { font-size: 1.6rem; } .ss-mediaSlider-buttonPrev, .ss-mediaSlider-buttonNext { position: relative; width: 40px; height: 40px; border-radius: 50%; background-color: #24232b; transition: all 0.4s; } .ss-mediaSlider-buttonPrev:hover, .ss-mediaSlider-buttonNext:hover { background-color: #666; } .ss-mediaSlider-buttonPrev:hover::before, .ss-mediaSlider-buttonNext:hover::before { border-right: 2px solid #e1e1e1; border-bottom: 2px solid #e1e1e1; } .ss-mediaSlider-buttonPrev::before, .ss-mediaSlider-buttonNext::before { position: absolute; top: 50%; left: 14px; width: 10px; height: 10px; border-right: 2px solid #e1e1e1; border-bottom: 2px solid #e1e1e1; content: ""; transition: all 0.4s; } .ss-mediaSlider-buttonPrev > span, .ss-mediaSlider-buttonNext > span { position: fixed; left: 100%; } .ss-mediaSlider-buttonPrev { margin-right: 16px; } .ss-mediaSlider-buttonPrev::before { left: 16px; transform: translateY(-50%) rotate(-225deg); } .ss-mediaSlider-buttonPrev:disabled { background-color: #e1e1e1; cursor: default; } .ss-mediaSlider-buttonPrev:disabled::before { border-right: 2px solid #24232b; border-bottom: 2px solid #24232b; } .ss-mediaSlider-buttonNext::before { left: 14px; transform: translateY(-50%) rotate(-45deg); } .ss-mediaSlider-buttonNext:disabled { background-color: #e1e1e1; cursor: default; } .ss-mediaSlider-buttonNext:disabled::before { border-right: 2px solid #24232b; border-bottom: 2px solid #24232b; } .ss-mediaSlider-buttonGroup { display: flex; justify-content: flex-end; } .ss-mediaSlider-buttonGroup.of-primary { justify-content: center; } @media only screen and (max-width: 1023px) { .ss-mediaSlider-buttonGroup.of-primary { margin-top: 24px; } } @media only screen and (max-width: 1023px) { .ss-mediaSlider-buttonGroup.ss-smallScreen-show { display: flex; } } .ss-mediaSlider-configGroup { display: flex; align-items: center; justify-content: flex-end; margin-bottom: 16px; } .ss-mediaSlider-currentNavigation-wrapper { display: flex; align-items: center; margin-right: 40px; } .ss-mediaSlider-currentNavigation { margin-bottom: 0; font-size: 1.8rem; line-height: 1; } .ss-mediaSlider-totalSlide { position: relative; margin-left: 12px; } .ss-mediaSlider-totalSlide::before { position: absolute; top: 50%; left: -10px; transform: translateY(-50%); font-size: 1.4rem; content: "/"; } .ss-mediaSlider-tagGroup { display: flex; flex-wrap: wrap; justify-content: flex-end; margin: -8px 0 16px 8px; padding-bottom: 8px; } .ss-mediaSlider-tagGroup > li { margin-top: 8px; margin-left: 8px; } .ss-mediaSlider-tagGroup-outer { margin-top: 16px; } .ss-mediaSlider-tag { padding: 2px 12px 4px; border: 1px solid #d5d5d5; background-color: #e6e6e6; } .ss-mediaSlider-tag > span { font-size: 1.4rem; } .ss-mediaApplication-header { padding: 2px 4px 4px; font-size: 1.5rem; font-weight: 800; text-align: center; } .ss-mediaApplication-header.of-contentType-comparison { background-color: #257e2e; color: #f1f1f1; } .ss-mediaApplication-header.of-contentType-parallel { background-color: #fff; color: #24232b; } .ss-mediaApplication-header.of-primary.of-contentType-comparison { background-color: #404040; color: #f1f1f1; } .ss-mediaApplication-header.of-primary.of-contentType-parallel { background-color: #fff; color: #24232b; } @media only screen and (min-width: 1024px) { .ss-mediaApplication-text { margin-bottom: 32px; } } .ss-mediaNavigation { display: flex; flex-direction: row-reverse; align-items: center; justify-content: flex-end; height: 100%; padding: 8px; border: 1px solid #dedede; color: #24232b; text-decoration: none; cursor: pointer; transition: all 0.4s; } @media only screen and (max-width: 1023px) { .ss-mediaNavigation { display: inline-block; position: relative; padding: 0 0 0 26px; border: 0; text-decoration: underline; } .ss-mediaNavigation::before { position: absolute; top: 0.5em; left: 5px; width: 8px; height: 8px; transform: rotate(-45deg); border-right: 1px solid; border-bottom: 1px solid; content: ""; } } .ss-mediaNavigation:hover { background-color: #e5e5e5; } @media only screen and (max-width: 1023px) { .ss-mediaNavigation:hover { background-color: transparent; } } .ss-mediaNavigation-body { flex: 1; line-height: 1.3; } .ss-mediaNavigation-image { min-height: 0%; margin-right: 8px; } @media only screen and (max-width: 1023px) { .ss-mediaNavigation-image { display: none; } } .ss-mediaNavigation-text { font-size: 1.4rem; } @media only screen and (max-width: 1023px) { .ss-mediaNavigation-text { font-size: 1.5rem; } } .ss-cardConversion { display: flex; align-items: center; margin-bottom: 16px; padding: 16px 0; background-color: #e5e5e5; } @media only screen and (max-width: 1365px) { .ss-cardConversion { flex-direction: column; padding: 8px; } } .ss-cardConversion-header { width: 100%; padding: 0 0 0 16px; } @media only screen and (max-width: 1365px) { .ss-cardConversion-header { margin-bottom: 16px; padding: 0; } } .ss-cardConversion-body { flex: 1 0 auto; padding: 0 16px; } @media only screen and (max-width: 1365px) { .ss-cardConversion-body { padding: 0; } } .ss-cardConversion-seriesGroup { font-size: 1.8rem; font-weight: 500; text-align: center; } @media only screen and (max-width: 1365px) { .ss-cardConversion-seriesGroup { font-size: calc(1.5rem + ((1vw - 0.36rem) * (0.29851))); } } .ss-cardConversion-seriesExcerpt { display: block; } .ss-figure { display: flex; flex-direction: column-reverse; } .ss-figure-image { min-height: 0%; text-align: center; } .ss-figure > figcaption { margin-top: 8px; font-size: 1.5rem; } @media only screen and (max-width: 1023px) { .ss-figure > figcaption { flex: auto; } } .ss-layout-grid-column.of-width-full .ss-figcaption { font-size: 1.8rem; text-align: center; } @media only screen and (max-width: 1023px) { .ss-layout-grid-column.of-width-full .ss-figcaption { font-size: 1.6rem; } } .ss-listButton { display: flex; align-items: center; justify-content: center; margin: -16px 0 16px -8px; } .ss-listButton > li { margin-top: 16px; padding-left: 8px; } .ss-listNotes { margin-bottom: 32px; } .ss-listNotes > li { display: flex; margin-bottom: 8px; color: #6a6a6a; font-size: 1.2rem; } .ss-listNotes-mark { margin-right: 0.4em; } .ss-listNotes-text { width: 100%; } .ss-breadcrumb { margin-bottom: 36px; } .ss-breadcrumb-list { display: flex; flex-wrap: wrap; font-size: 1.2rem; } .ss-breadcrumb-list > li { position: relative; margin-right: 22px; margin-bottom: 8px; color: #484b4c; line-height: 1.2; } .ss-breadcrumb-list > li::before { position: absolute; top: calc(50% + 1px); right: -14px; width: 6px; height: 6px; transform: translateY(-50%) rotate(-45deg); border-right: 1px solid #484b4c; border-bottom: 1px solid #484b4c; content: ""; transition: all 0.4s; } .ss-breadcrumb-list > li:last-child { margin-right: 0; } .ss-breadcrumb-list > li:last-child::before { content: none; } .ss-breadcrumb-list > li > a { text-decoration: none; } .ss-textLocalNavigation { font-size: 1.5rem; text-align: right; } @media only screen and (max-width: 1023px) { .ss-textLocalNavigation { text-align: left; } } .ss-textLocalNavigation > a { position: relative; padding-left: 26px; color: #b10000; text-decoration: none; } @media only screen and (max-width: 1023px) { .ss-textLocalNavigation > a { display: inline-block; } } .ss-textLocalNavigation > a::before { position: absolute; top: 0.5em; left: 5px; width: 8px; height: 8px; transform: rotate(-45deg); border-right: 1px solid; border-bottom: 1px solid; content: ""; } .ss-textPageTop { visibility: hidden; z-index: 10; position: fixed; right: 0; bottom: 40%; margin: 0; transform: rotate(90deg); font-size: 1.4rem; line-height: 1; text-shadow: 1px 1px 0 #fff, -1px 1px 0 #fff, 1px -1px 0 #fff, -1px -1px 0 #fff; opacity: 0; transition: visibility 0.4s, opacity 0.4s; } @media only screen and (max-width: 1023px) { .ss-textPageTop { bottom: 0; width: 100%; transform: rotate(0); text-shadow: none; } } .ss-textPageTop > a { position: relative; padding-left: 78px; color: #b10000; text-decoration: none; } @media only screen and (max-width: 1023px) { .ss-textPageTop > a { display: block; padding: 16px; background-color: #343434; color: #fff; text-align: center; } } .ss-textPageTop > a::before { position: absolute; top: 50%; left: 0; width: 56px; height: 8px; transform: translateY(-50%) skewX(315deg); border-bottom: 2px solid #24232b; border-left: 2px solid #24232b; content: ""; } @media only screen and (max-width: 1023px) { .ss-textPageTop > a::before { content: none; } } .ss-textPageTop.is-show { visibility: visible; opacity: 1; } .ss-textPageTop.is-fix { position: absolute; bottom: 0; } .ss-textPhoneLink { max-width: 100%; margin-bottom: 16px; text-align: center; } .ss-textPhoneLink > *:last-child { margin-bottom: 0; } .ss-textPhoneLink-numberGroup { display: flex; align-items: center; } @media only screen and (max-width: 1023px) { .ss-textPhoneLink-numberGroup { flex-direction: column; justify-content: center; } } .ss-textPhoneLink-numberGroup.of-vertical { flex-direction: column; } .ss-textPhoneLink-number { display: flex; flex-direction: column; align-items: center; width: 100%; font-size: 2.4rem; font-weight: 600; } @media only screen and (max-width: 1023px) { .ss-textPhoneLink-number { width: 100%; } } .ss-textPhoneLink-number > .AutoPhoneCall { position: relative; max-width: 100%; padding-left: 3.8rem; color: #333; text-decoration: none; cursor: default; } .ss-textPhoneLink-number > .AutoPhoneCall::before { position: absolute; top: 50%; left: 0; width: 3.8rem; height: 3.8rem; transform: translateY(-50%); background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23.8459 18.8048C24.0514 19.0103 24.0514 19.3435 23.8459 19.549L21.9896 21.4052C21.6958 21.699 21.3224 21.9075 20.9094 21.9533C17.7281 22.3057 14.2797 20.6242 11.8263 18.1708C9.37433 15.7188 7.69413 12.2717 8.04673 9.09064C8.09251 8.67763 8.30099 8.30421 8.59482 8.01038L10.4511 6.15412C10.6566 5.94863 10.9897 5.94863 11.1952 6.15412L13.7998 8.75867C14.0053 8.96416 14.0053 9.29733 13.7998 9.50282L11.1583 12.1443C11.1452 13.8391 12.0519 15.3826 13.3347 16.6653C14.6182 17.9489 16.1599 18.8556 17.8557 18.8417L20.5604 16.2479C20.767 16.0497 21.0942 16.0531 21.2967 16.2556L23.8459 18.8048Z' fill=''/%3E%3C/svg%3E"); content: ""; } .ss-textPhoneLink-number > .TelSlsh { display: none; } .ss-textPhoneLink-notes { max-width: 100%; } @media only screen and (max-width: 1023px) { .ss-textPhoneLink-notes { width: 100%; margin-bottom: 4px; } } .ss-textPhone { display: block; margin-bottom: 24px; } .ss-textPhone > *:last-child { margin-bottom: 0; } .ss-textPhone-body > *:last-child { margin-bottom: 0; } .ss-textPhone-number { font-size: 2.4rem; font-weight: bold; line-height: 1; } .ss-textPhone-numberGroup { display: flex; align-items: flex-start; margin-top: 0 !important; margin-bottom: 8px; } .ss-textPhone-note { display: block; margin-top: 0 !important; margin-bottom: 8px; font-size: 1.2rem; line-height: 1.2; } .ss-textPhone-icon { width: 36px; min-width: 36px; height: 20px; min-height: 20px; margin-top: 0.2rem; margin-right: 8px; } .ss-textPhone-icon .of-iconColor-primary { fill: #00a23f; } .ss-textPhone-icon .of-iconColor-secondary { fill: #fe8800; } .ss-textPhone-icon .of-iconColor-tertiary { fill: #0086b1; } .ss-textPhone-icon .of-iconColor-quaternary { fill: #838079; } .ss-textPhone-icon .of-iconColor-quinary { fill: #1e1c1c; } .ss-textPhone.of-center { text-align: center; } .ss-textPhone.of-center .ss-textPhone-numberGroup { justify-content: center; } a.ss-textPhone-body, a:hover.ss-textPhone-body { display: inline-block; color: #333; text-decoration: none; cursor: default; opacity: 1; } .slick-list { overflow: visible; } .slick-list::before { z-index: 10; position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin-left: -100%; background-color: #f1f1f1; content: ""; } .slick-list::after { z-index: 10; position: absolute; top: 0; right: 0; width: 100%; height: 100%; margin-right: -100%; background-color: #f1f1f1; content: ""; opacity: 0.7; } .slick-list .slick-track { display: flex; } .slick-list .slick-slide { display: flex; height: auto; } .slick-dots { display: none !important; } .slick-track { margin-left: 0; } .lp-buttonConversion-text { margin-right: 8px; font-size: 1.6rem; } .lp-buttonConversion-body { padding-top: 10px; padding-bottom: 10px; } .lp-buttonConversion.of-download { opacity: 1; transition: opacity 0.4s; } .lp-buttonConversion.of-download:hover { opacity: 0.5; } .lp-buttonConversion.of-download .lp-buttonConversion-body { padding-left: 45px; } .lp-buttonConversion.of-download .lp-buttonConversion-body::before { left: 16px; background: url("../../../../../../img/landing_page/common/icon_btn_dl.png") no-repeat center center !important; } .lp-buttonConversion.of-arrow { opacity: 1; transition: opacity 0.4s; } .lp-buttonConversion.of-arrow:hover { opacity: 0.7; } .lp-buttonConversion.of-arrow .lp-buttonConversion-body { padding-left: 45px; } .lp-buttonConversion.of-arrow .lp-buttonConversion-body::before { left: 19px; } @media only screen and (max-width: 1023px) { .ss-smallScreen-hide { display: none; } } .ss-smallScreen-show { display: none; } @media only screen and (max-width: 1023px) { .ss-smallScreen-show { display: block; } } @media only screen and (max-width: 1365px) { .ss-largeScreen-show { display: block; } } .ss-largeScreen-hide { display: block; } @media only screen and (max-width: 1365px) { .ss-largeScreen-hide { display: none; } } @media only screen and (min-width: 1366px) { .ss-largeScreen-flex { display: flex; } } @media only screen and (max-width: 1365px) { .ss-largeScreen-flex { display: none; } } .ss-utility-textAlign-center { text-align: center; } .ss-utility-marginBottom-large { margin-bottom: 32px; } .ss-utility-color-emphasis { color: #b10000; }