@charset "UTF-8"; .layout-main .section { margin-bottom: 0; } .lp-layout-grid { display: flex; flex-wrap: wrap; margin: -40px 0 50px -10px; } @media only screen and (max-width: 969px) { .lp-layout-grid { margin: calc((-40 * 100vw) / 970) 0 calc((50 * 100vw) / 970) calc((-10 * 100vw) / 970); } } @media only screen and (max-width: 767px) { .lp-layout-grid { margin: -20px 0 20px -10px; } } .lp-layout-grid-column { width: 100%; margin-top: 40px; padding-left: 10px; } @media only screen and (max-width: 969px) { .lp-layout-grid-column { margin-top: calc((40 * 100vw) / 970); padding-left: calc((10 * 100vw) / 970); } } @media only screen and (max-width: 767px) { .lp-layout-grid-column { margin-top: 20px; padding-left: 10px; } } .lp-layout-grid-column > *:last-child { margin-bottom: 0; } .lp-layout-grid-column.of-column-2 { width: 50%; } @media only screen and (max-width: 767px) { .lp-layout-grid-column.of-column-2 { width: 100%; } } .lp-layout-grid-column.of-flex { display: flex; flex-direction: column; } .lp-layout-grid-column.of-flex > .lp-card { flex: 1 0 auto; } .lp-layout-grid-column.of-margin-adjust > .lp-card { margin-bottom: 2px; } .lp-layout-grid > .lp-layout-grid-column > *:last-child { margin-bottom: 0; } .lp-layout-grid.of-product { margin: -40px 0 40px -2px; } @media only screen and (max-width: 969px) { .lp-layout-grid.of-product { margin: calc((-40 * 100vw) / 970) 0 calc((40 * 100vw) / 970) -2px; } } @media only screen and (max-width: 767px) { .lp-layout-grid.of-product { margin: -2px 0 20px -2px; } } .lp-layout-grid.of-product .lp-layout-grid-column { margin-top: 40px; padding-left: 2px; } @media only screen and (max-width: 767px) { .lp-layout-grid.of-product .lp-layout-grid-column { margin-top: calc((40 * 100vw) / 970); } } @media only screen and (max-width: 767px) { .lp-layout-grid.of-product .lp-layout-grid-column { margin-top: 2px; } } .lp-layout-grid.of-product .lp-layout-grid-column > *:last-child { margin-bottom: 0; } .lp-layout-grid.of-product .lp-card { padding: 20px 24px 20px 20px; } @media only screen and (max-width: 969px) { .lp-layout-grid.of-product .lp-card { padding: calc((20 * 100vw) / 970) calc((24 * 100vw) / 970) calc((20 * 100vw) / 970) calc((20 * 100vw) / 970); } } @media only screen and (max-width: 767px) { .lp-layout-grid.of-product .lp-card { padding: 15px 10px; } } .lp-layout-grid.of-primary { margin: -20px 0 64px -10px; } @media only screen and (max-width: 969px) { .lp-layout-grid.of-primary { margin: calc((-20 * 100vw) / 970) 0 calc((64 * 100vw) / 970) calc((-10 * 100vw) / 970); } } @media only screen and (max-width: 767px) { .lp-layout-grid.of-primary { margin: -20px 0 20px -10px; } } .lp-layout-grid.of-primary .lp-layout-grid-column { margin-top: 20px; padding-left: 10px; } @media only screen and (max-width: 969px) { .lp-layout-grid.of-primary .lp-layout-grid-column { margin-top: calc((20 * 100vw) / 970); padding-left: calc((10 * 100vw) / 970); } } @media only screen and (max-width: 767px) { .lp-layout-grid.of-primary .lp-layout-grid-column { margin-top: 20px; padding-left: 10px; } } .lp-jumbotron { background: #1e99aa; color: #fff; } .lp-jumbotron.of-backgroundColor-primary { background: #fff; color: #333; } .lp-jumbotron-content { display: flex; align-items: center; max-width: calc(970px + 40px); margin: 0 auto; padding: 0 20px; } @media only screen and (max-width: 767px) { .lp-jumbotron-content { flex-direction: column-reverse; } } .lp-jumbotron-body { flex: 1; padding: 20px 0; } @media only screen and (max-width: 969px) { .lp-jumbotron-body { padding: calc((20 * 100vw) / 970) 0; } } @media only screen and (max-width: 767px) { .lp-jumbotron-body { flex: none; width: 100%; padding: 10px 0; text-align: center; } } .lp-jumbotron-body > *:last-child { margin-bottom: 0; } .lp-jumbotron-image { align-self: flex-start; width: 585px; } @media only screen and (max-width: 969px) { .lp-jumbotron-image { width: calc((585 * 100vw) / 970); } } @media only screen and (max-width: 767px) { .lp-jumbotron-image { width: 100%; min-height: 0%; text-align: center; } } @media only screen and (max-width: 1279px) { .lp-layout-container.of-width-large .lp-jumbotron-image { width: calc(46.4rem + ((1vw - 0.767rem) * (23.58674))); } } @media only screen and (max-width: 767px) { .lp-layout-container.of-width-large .lp-jumbotron-image { width: 100%; } } .lp-jumbotron-title { margin-bottom: 10px; font-size: 4.2rem; font-weight: normal; } @media only screen and (max-width: 969px) { .lp-jumbotron-title { margin-bottom: calc((10 * 100vw) / 970); font-size: calc((42 * 100vw) / 970); } } @media only screen and (max-width: 767px) { .lp-jumbotron-title { margin-bottom: 0; font-size: 2.8rem; } } @media only screen and (max-width: 1279px) { .lp-layout-container.of-width-large .lp-jumbotron-title { margin-bottom: calc((10 * 100vw) / 970); font-size: calc(2.8rem + ((1vw - 0.767rem) * (2.72904))); } } @media only screen and (max-width: 767px) { .lp-layout-container.of-width-large .lp-jumbotron-title { margin-bottom: 0; font-size: 2.8rem; } } .lp-jumbotron-title.of-textSize-large { font-size: 5.2rem; line-height: 1.3; } @media only screen and (max-width: 969px) { .lp-jumbotron-title.of-textSize-large { font-size: calc((52 * 100vw) / 970); } } @media only screen and (max-width: 767px) { .lp-jumbotron-title.of-textSize-large { font-size: 2.8rem; } } @media only screen and (max-width: 1279px) { .lp-layout-container.of-width-large .lp-jumbotron-title.of-textSize-large { font-size: calc(3.2rem + ((1vw - 0.767rem) * (3.89864))); } } @media only screen and (max-width: 767px) { .lp-layout-container.of-width-large .lp-jumbotron-title.of-textSize-large { font-size: 2.8rem; } } .lp-jumbotron-text { font-size: 2.4rem; } @media only screen and (max-width: 969px) { .lp-jumbotron-text { font-size: calc((24 * 100vw) / 970); } } @media only screen and (max-width: 767px) { .lp-jumbotron-text { font-size: 1.7rem; } } @media only screen and (max-width: 1279px) { .lp-layout-container.of-width-large .lp-jumbotron-text { font-size: calc(1.6rem + ((1vw - 0.767rem) * (1.55945))); } } @media only screen and (max-width: 767px) { .lp-layout-container.of-width-large .lp-jumbotron-text { font-size: 1.7rem; } } .lp-section-content { max-width: calc(970px + 40px); margin: 0 auto; padding: 55px 20px 50px; } @media only screen and (max-width: 969px) { .lp-section-content { padding: calc((55 * 100vw) / 970) 20px calc((50 * 100vw) / 970); } } @media only screen and (max-width: 767px) { .lp-section-content { padding: 35px 20px 40px; } } .lp-section-content > *:last-child { margin-bottom: 0; } .lp-layout-container.of-width-large .lp-section-content { max-width: calc(1280px + 40px); padding: 64px 20px 80px; } @media only screen and (max-width: 1279px) { .lp-layout-container.of-width-large .lp-section-content { padding: calc((64 * 100vw) / 1280) 20px calc((80 * 100vw) / 1280); } } @media only screen and (max-width: 767px) { .lp-layout-container.of-width-large .lp-section-content { padding: 40px 20px; } } .lp-section.of-primary { background: #1e99aa; color: #fff; } .lp-section.of-primary .lp-section-content { padding: 45px 20px 55px; } @media only screen and (max-width: 969px) { .lp-section.of-primary .lp-section-content { padding: calc((45 * 100vw) / 970) 20px calc((55 * 100vw) / 970); } } @media only screen and (max-width: 767px) { .lp-section.of-primary .lp-section-content { padding: 35px 20px; } } .lp-section.of-primary .lp-headingLevel2 { margin-bottom: 24px; } @media only screen and (max-width: 969px) { .lp-section.of-primary .lp-headingLevel2 { margin-bottom: calc((24 * 100vw) / 970); } } @media only screen and (max-width: 767px) { .lp-section.of-primary .lp-headingLevel2 { margin-bottom: 10px; } } .lp-section.of-secondary { background: #f0f0f0; } .lp-section.of-secondary .lp-section-header { margin-bottom: 24px; } .lp-section.of-secondary .lp-section-header > *:last-child { margin-bottom: 0; } @media only screen and (max-width: 969px) { .lp-section.of-secondary .lp-section-header { margin-bottom: calc((24 * 100vw) / 1280); } } @media only screen and (max-width: 767px) { .lp-section.of-secondary .lp-section-header { margin-bottom: 32px; } } .lp-section.of-secondary .lp-headingLevel2 { width: 100%; margin-bottom: 24px; } @media only screen and (max-width: 969px) { .lp-section.of-secondary .lp-headingLevel2 { margin-bottom: calc((24 * 100vw) / 970); } } @media only screen and (max-width: 767px) { .lp-section.of-secondary .lp-headingLevel2 { margin-bottom: 10px; } } .lp-section.of-secondary .lp-listApplication > li > a:hover { background: #fffed2; } .lp-layout-container.of-width-large .lp-section.of-secondary .lp-section-content { padding: 32px 20px; } @media only screen and (max-width: 1279px) { .lp-layout-container.of-width-large .lp-section.of-secondary .lp-section-content { padding: calc((32 * 100vw) / 1280) 20px; } } @media only screen and (max-width: 767px) { .lp-layout-container.of-width-large .lp-section.of-secondary .lp-section-content { padding: 32px 20px; } } @media only screen and (max-width: 767px) { [data-script-enabled="true"] .lp-layout-container.of-width-large .lp-section.of-toggle .lp-section-content { padding: 0; } } @media only screen and (max-width: 767px) { [data-script-enabled="true"] .lp-section.of-toggle .lp-section-header { margin-bottom: 0; } [data-script-enabled="true"] .lp-section.of-toggle .lp-section-header > *:last-child { margin-bottom: 0; } } @media only screen and (max-width: 767px) { [data-script-enabled="true"] .lp-section.of-toggle .lp-section-body { display: none; padding: 0 20px 32px; opacity: 0; } [data-script-enabled="true"] .lp-section.of-toggle .lp-section-body > *:last-child { margin-bottom: 0; } } .lp-section.of-toggle .lp-headingLevel2-inner { width: 100%; background-color: transparent; color: inherit; text-align: left; text-decoration: none; cursor: inherit; } .lp-section.of-toggle .lp-headingLevel2-inner > *:last-child { margin-bottom: 0; } @media only screen and (max-width: 767px) { [data-script-enabled="true"] .lp-section.of-toggle .lp-headingLevel2-inner { display: block; position: relative; padding: 32px 72px 32px 20px; cursor: pointer; } [data-script-enabled="true"] .lp-section.of-toggle .lp-headingLevel2-inner::before { z-index: 1; position: absolute; top: 50%; right: 20px; width: 32px; height: 32px; transform: translateY(-50%); border-radius: 50%; background-color: #fff; content: ""; } } @media only screen and (max-width: 767px) { [data-script-enabled="true"] .lp-section.of-toggle .lp-headingLevel2-inner > span::before, [data-script-enabled="true"] .lp-section.of-toggle .lp-headingLevel2-inner > span::after { z-index: 1; position: absolute; top: 50%; right: 28px; width: 16px; height: 3px; margin-top: -1px; background-color: #13386d; content: ""; } } @media only screen and (max-width: 767px) { [data-script-enabled="true"] .lp-section.of-toggle .lp-headingLevel2-inner > span::after { transform: rotate(90deg); transition: transform 0.3s ease-out; } } @media only screen and (max-width: 767px) { [data-script-enabled="true"] .lp-section.of-toggle.is-show .lp-headingLevel2-inner > span::after { transform: rotate(180deg); transition: transform 0.3s ease-out; } [data-script-enabled="true"] .lp-section.of-toggle.is-show .lp-section-body { display: block; animation: fadeIn 0.9s ease forwards; } } @media only screen and (max-width: 767px) { [data-script-enabled="true"] .lp-layout-container.of-width-large .lp-section.of-toggle .lp-section-content { padding: 0; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .lp-media { display: flex; flex-direction: row-reverse; } .lp-media-body { flex: 1; } .lp-media-body > *:last-child { margin-bottom: 0; } @media only screen and (max-width: 767px) { .lp-media-series { font-size: 1.4rem; } } .lp-media-seriesGroup { margin-bottom: 10px; line-height: 1.4; } @media only screen and (max-width: 969px) { .lp-media-seriesGroup { margin-bottom: calc((10 * 100vw) / 970); } } @media only screen and (max-width: 767px) { .lp-media-seriesGroup { margin-bottom: 10px; } } .lp-media-seriesGroup > a { display: inline-block; max-width: 100%; text-decoration: none; transition-timing-function: cubic-bezier(.4,0,.2,1); transition-duration: .4s; transition-property: color; } .lp-media-seriesGroup > a .lp-media-seriesName, .lp-media-seriesGroup > a .lp-media-series { color: #2e3133; } .lp-media-seriesOuter::after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; } @media (hover: hover) { .lp-card:not(.is-hasHover):hover .lp-media-image { opacity: 0.8; cursor: pointer; } .lp-card:not(.is-hasHover):hover .lp-media-seriesName, .lp-card:not(.is-hasHover):hover .lp-media-series { text-decoration: underline; color: #dc002f; } } .lp-media-seriesName { margin-bottom: 2px; font-size: 2rem; } @media only screen and (max-width: 969px) { .lp-media-seriesName { font-size: calc((20 * 100vw) / 970); } } @media only screen and (max-width: 767px) { .lp-media-seriesName { font-size: 1.6rem; } } .lp-media-description { margin-bottom: 10px; font-size: 1.4rem; } @media only screen and (max-width: 969px) { .lp-media-description { margin-bottom: calc((10 * 100vw) / 970); font-size: calc((14 * 100vw) / 970); } } @media only screen and (max-width: 767px) { .lp-media-description { margin-bottom: 10px; font-size: 1.4rem; } } .lp-media-image { width: 140px; margin-right: 30px; min-height: 0%; } @media only screen and (max-width: 969px) { .lp-media-image { width: calc((140 * 100vw) / 970); margin-right: calc((30 * 100vw) / 970); } } @media only screen and (max-width: 767px) { .lp-media-image { width: 100px; margin-right: 20px; } } .lp-media-title { margin-bottom: 15px; border-bottom: 4px solid #e8e8e8; font-size: 3rem; line-height: 1.2; text-align: center; } @media only screen and (max-width: 969px) { .lp-media-title { margin-bottom: calc((10 * 100vw) / 970); font-size: calc((30 * 100vw) / 970); } } @media only screen and (max-width: 767px) { .lp-media-title { margin-bottom: 18px; font-size: 2.2rem; } } .lp-mediaProduct { display: flex; flex-direction: column-reverse; width: 100%; } @media only screen and (max-width: 767px) { .lp-mediaProduct { flex-direction: row-reverse; align-items: center; max-width: 360px; margin: 0 auto; border-bottom: 1px solid #e8e8e8; } } .lp-mediaProduct-body { display: flex; flex: 1 0 auto; align-items: center; justify-content: center; padding: 15px 10px; background: #e8e8e8; text-align: center; } @media only screen and (max-width: 969px) { .lp-mediaProduct-body { padding: calc((15 * 100vw) / 970) calc((10 * 100vw) / 970); } } @media only screen and (max-width: 767px) { .lp-mediaProduct-body { flex: 1; justify-content: flex-start; background: #fff; text-align: left; } } .lp-mediaProduct-body > *:last-child { margin-bottom: 0; } .lp-mediaProduct-text { display: block; margin-bottom: 5px; font-size: 1.8rem; } @media only screen and (max-width: 969px) { .lp-mediaProduct-text { margin-bottom: calc((5 * 100vw) / 970); font-size: calc((18 * 100vw) / 970); } } @media only screen and (max-width: 767px) { .lp-mediaProduct-text { margin-bottom: 5px; font-size: 1.6rem; } } .lp-mediaProduct-textGroup { font-weight: bold; line-height: 1.2; } @media only screen and (max-width: 767px) { .lp-mediaProduct-textGroup { font-size: 1.6rem; font-weight: normal; } } @media only screen and (max-width: 969px) { .lp-mediaProduct-image { min-height: 0%; } } @media only screen and (max-width: 767px) { .lp-mediaProduct-image { width: 100%; max-width: 140px; margin-right: 5px; } } .lp-card { width: 100%; margin-bottom: 25px; padding: 20px 30px 20px 20px; background: #f3f3f3; position: relative; } @media only screen and (max-width: 969px) { .lp-card { margin-bottom: calc((25 * 100vw) / 970); padding: calc((20 * 100vw) / 970) calc((30 * 100vw) / 970) calc((20 * 100vw) / 970) calc((20 * 100vw) / 970); } } @media only screen and (max-width: 767px) { .lp-card { margin-bottom: 25px; padding: 15px 10px; } } .lp-cardSupport { display: flex; border-radius: 4px; } .lp-cardSupport.of-backgroundColor-primary .lp-cardSupport-header { border: 1px solid #13778f; background: #13778f; } .lp-cardSupport.of-backgroundColor-primary .lp-listSupport > li > a:hover { background: #f3f3f3; } @media only screen and (max-width: 969px) { .lp-cardSupport { flex-direction: column; } } @media only screen and (max-width: 1279px) { .lp-layout-container.of-width-large .lp-cardSupport { flex-direction: column; max-width: 970px; margin: 0 auto; } } .lp-cardSupport-header { display: flex; align-items: center; justify-content: center; width: 140px; padding: 20px 10px; border: 1px solid #1e99aa; border-radius: 4px 0 0 4px; background: #1e99aa; color: #fff; } @media only screen and (max-width: 969px) { .lp-cardSupport-header { width: 100%; padding: 5px 10px; border-radius: 4px 4px 0 0; font-size: 2rem; } } .lp-layout-container.of-width-large .lp-cardSupport-header { width: 200px; padding: 32px 10px; } @media only screen and (max-width: 1279px) { .lp-layout-container.of-width-large .lp-cardSupport-header { width: 100%; padding: 5px 10px; border-radius: 4px 4px 0 0; } } .lp-cardSupport-title { font-size: 2rem; font-weight: normal; text-align: center; } .lp-cardSupport-body { display: flex; } @media only screen and (max-width: 969px) { .lp-cardSupport-body { display: block; } } @media only screen and (max-width: 1279px) { .lp-layout-container.of-width-large .lp-cardSupport-body { display: block; } } .lp-listSupport { display: flex; border: 1px solid #999; border-left: 0; border-radius: 0 4px 4px 0; } @media only screen and (max-width: 969px) { .lp-listSupport { flex-wrap: wrap; border: 1px solid #999; border-top: 0; border-radius: 0 0 4px 4px; } } .lp-listSupport > li { display: flex; position: relative; width: 150px; } @media only screen and (max-width: 969px) { .lp-listSupport > li { align-items: flex-start; width: 50%; } .lp-listSupport > li:last-child::before { content: none; } .lp-listSupport > li:nth-child(odd)::before { content: none; } } .lp-listSupport > li::before { position: absolute; top: 50%; left: 0; width: 1px; height: calc(100% - 40px); transform: translateY(-50%); background: #ccc; content: ""; } @media only screen and (max-width: 969px) { .lp-listSupport > li::before { height: calc(100% - 20px); } } .lp-listSupport > li:first-child::before { content: none; } @media only screen and (max-width: 969px) { .lp-listSupport > li:nth-child(odd)::after { position: absolute; bottom: 0; left: 10px; width: calc(100% - 10px); height: 1px; transform: translateY(-50%); background: #ccc; content: ""; } } @media only screen and (max-width: 969px) { .lp-listSupport > li:nth-child(even)::after { position: absolute; right: 10px; bottom: 0; width: calc(100% - 10px); height: 1px; transform: translateY(-50%); background: #ccc; content: ""; } } @media only screen and (max-width: 969px) { .lp-listSupport > li:last-child::after { content: none; } } .lp-listSupport > li > a { display: flex; flex-direction: column-reverse; align-items: center; justify-content: center; width: 100%; padding: 18px 20px; color: #333; text-decoration: none; } @media only screen and (max-width: 969px) { .lp-listSupport > li > a { padding: 10px 5px; } } .lp-listSupport > li > a .lp-listSupport-image { opacity: 0.5; } .lp-listSupport > li > a:hover { background: #dff3fa; transition: all 0.5s; } .lp-listSupport > li > a:hover .lp-listSupport-image { opacity: 1; transition: all 0.5s; } .lp-listSupport > li > a .lp-listSupport-image > svg { fill: #25839a; } .lp-listSupport > li.of-primary { width: 230px; } @media only screen and (max-width: 969px) { .lp-listSupport > li.of-primary { width: 100%; } } .lp-listSupport > li.of-primary > a.of-callNumber { flex-direction: column; padding: 25px 20px; font-size: 1.4rem; text-align: center; cursor: default; } @media only screen and (max-width: 767px) { .lp-listSupport > li.of-primary > a.of-callNumber { padding: 10px 5px; font-size: 1.4rem; } } .lp-listSupport > li.of-primary > a.of-callNumber > span { display: block; width: 100%; } .lp-listSupport > li.of-primary > a.of-callNumber em { display: block; position: relative; padding-left: 24px; color: #1a5c9a; font-size: 2.6rem; } @media only screen and (max-width: 969px) { .lp-listSupport > li.of-primary > a.of-callNumber em { font-size: 2.6rem; } } .lp-listSupport > li.of-primary > a.of-callNumber em::before { position: absolute; top: 5px; left: -5px; width: 24px; height: 24px; background: url("../../../../../img/ss/general/products_app/products_app_icon_02.png") no-repeat center center; background-size: contain; content: ""; } @media only screen and (max-width: 969px) { .lp-listSupport > li.of-primary > a.of-callNumber em::before { top: calc((5 * 100vw) / 970); left: calc((-5 * 100vw) / 970); } } @media only screen and (max-width: 767px) { .lp-listSupport > li.of-primary > a.of-callNumber em::before { top: 5px; left: -5px; } } .lp-listSupport > li.of-primary > a.of-callNumber:hover { background: inherit; } .lp-listSupport > li:last-child a { border-right: 0; } .lp-listSupport-text { width: 100%; text-align: center; } .lp-listSupport-image { width: 40px; min-height: 0%; margin: 0 auto 10px; } @media only screen and (max-width: 969px) { .lp-listSupport-image { width: 40px; } } @media only screen and (max-width: 1279px) { .lp-layout-container.of-width-large .lp-listSupport { flex-wrap: wrap; border: 1px solid #999; border-top: 0; border-radius: 0 0 4px 4px; } } .lp-layout-container.of-width-large .lp-listSupport > li { width: 210px; } .lp-layout-container.of-width-large .lp-listSupport > li > *:last-child { margin-bottom: 0; } @media only screen and (max-width: 1279px) { .lp-layout-container.of-width-large .lp-listSupport > li { align-items: flex-start; width: 50%; } .lp-layout-container.of-width-large .lp-listSupport > li:last-child::before { content: none; } .lp-layout-container.of-width-large .lp-listSupport > li:nth-child(odd)::before { content: none; } } .lp-layout-container.of-width-large .lp-listSupport > li::before { height: calc(100% - (32 * 2px)); } @media only screen and (max-width: 1279px) { .lp-layout-container.of-width-large .lp-listSupport > li::before { height: calc(100% - 20px); } } @media only screen and (max-width: 1279px) { .lp-layout-container.of-width-large .lp-listSupport > li:nth-child(odd)::after { position: absolute; bottom: 0; left: 10px; width: calc(100% - 10px); height: 1px; transform: translateY(-50%); background: #ccc; content: ""; } } @media only screen and (max-width: 1279px) { .lp-layout-container.of-width-large .lp-listSupport > li:nth-child(even)::after { position: absolute; right: 10px; bottom: 0; width: calc(100% - 10px); height: 1px; transform: translateY(-50%); background: #ccc; content: ""; } } @media only screen and (max-width: 1279px) { .lp-layout-container.of-width-large .lp-listSupport > li:last-child::after { content: none; } } .lp-layout-container.of-width-large .lp-listSupport > li > a { padding: 32px 20px; } @media only screen and (max-width: 1279px) { .lp-layout-container.of-width-large .lp-listSupport > li > a { padding: 10px 5px; } } .lp-layout-container.of-width-large .lp-listSupport > li.of-primary { width: 240px; } @media only screen and (max-width: 1279px) { .lp-layout-container.of-width-large .lp-listSupport > li.of-primary { width: 100%; } } .lp-layout-container.of-width-large .lp-listSupport > li.of-primary > a.of-callNumber { padding: 32px 20px; } @media only screen and (max-width: 1279px) { .lp-layout-container.of-width-large .lp-listSupport > li.of-primary > a.of-callNumber { padding: 10px 5px; } } @media only screen and (max-width: 1279px) { .lp-layout-container.of-width-large .lp-listSupport > li.of-primary > a.of-callNumber em { font-size: 2.6rem; } } @media only screen and (max-width: 1279px) { .lp-layout-container.of-width-large .lp-listSupport > li.of-primary > a.of-callNumber em::before { top: calc((5 * 100vw) / 970); left: calc((-5 * 100vw) / 970); } } @media only screen and (max-width: 767px) { .lp-layout-container.of-width-large .lp-listSupport > li.of-primary > a.of-callNumber em::before { top: 5px; left: -5px; } } .lp-layout-container.of-width-large .lp-listSupport > li:last-child a { border-right: 0; } .lp-layout-container.of-width-large .lp-listSupport-text { width: 100%; line-height: 1.3; text-align: center; margin-top: -15px; } .lp-layout-container.of-width-large .lp-listSupport-image { width: 75px; height: 80px; min-height: 0%; margin: -10px auto 0; } .lp-listApplication { display: flex; flex-wrap: wrap; margin: -20px 0 20px -20px; } @media only screen and (max-width: 969px) { .lp-listApplication { margin: calc((-20 * 100vw) / 970) 0 calc((20 * 100vw) / 970) calc((-20 * 100vw) / 970); } } @media only screen and (max-width: 640px) { .lp-listApplication { margin: -10px 0 10px -10px; } } .lp-listApplication > li { display: flex; width: 20%; margin-top: 20px; padding-left: 20px; } @media only screen and (max-width: 969px) { .lp-listApplication > li { margin-top: calc((20 * 100vw) / 970); padding-left: calc((20 * 100vw) / 970); } } @media only screen and (max-width: 767px) { .lp-listApplication > li { width: 25%; } } @media only screen and (max-width: 640px) { .lp-listApplication > li { width: 50%; margin-top: 10px; padding-left: 10px; box-shadow: none; } } .lp-listApplication > li > a { display: flex; flex-direction: column-reverse; justify-content: flex-end; width: 100%; padding: 4px 10px; border-radius: 4px; background: #fff; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); color: #333; text-align: center; text-decoration: none; } @media only screen and (max-width: 640px) { .lp-listApplication > li > a { box-shadow: none; } } .lp-listApplication > li > a .lp-listApplication-image { opacity: 0.5; } .lp-listApplication > li > a:hover { background: #dff3fa; transition: all 0.5s; } .lp-listApplication > li > a:hover .lp-listApplication-image { opacity: 1; transition: all 0.5s; } .lp-listApplication-image { width: 70px; min-height: 0%; margin: 0 auto 5px; } @media only screen and (max-width: 969px) { .lp-listApplication-image { width: calc((70 * 100vw) / 970); margin-bottom: calc((5 * 100vw) / 970); } } @media only screen and (max-width: 767px) { .lp-listApplication-image { width: 50px; margin-bottom: 5px; } } .lp-listApplication-text { font-size: 1.8rem; line-height: 1.15; } @media only screen and (max-width: 969px) { .lp-listApplication-text { font-size: calc((18 * 100vw) / 970); } } @media only screen and (max-width: 767px) { .lp-listApplication-text { font-size: 1.6rem; } } .lp-headingLevel2 { margin-bottom: 10px; font-size: 2.6rem; font-weight: normal; line-height: 1.2; text-align: left; } @media only screen and (max-width: 969px) { .lp-headingLevel2 { margin-bottom: calc((10 * 100vw) / 970); font-size: calc((26 * 100vw) / 970); } } @media only screen and (max-width: 767px) { .lp-headingLevel2 { height: auto !important; margin-bottom: 10px; font-size: 2.2rem; } } @media only screen and (max-width: 1279px) { .lp-layout-container.of-width-large .lp-headingLevel2 { font-size: calc(2.2rem + ((1vw - 0.767rem) * (0.77973))); } } @media only screen and (max-width: 767px) { .lp-layout-container.of-width-large .lp-headingLevel2 { font-size: 2.2rem; } } .lp-buttonConversion { display: inline-block; max-width: 100%; border-radius: 3px; background: #dc002f; color: #fff; font-size: 1.4rem; line-height: 1.4; text-align: center; text-decoration: none; } .lp-buttonConversion-body { display: flex; align-items: center; padding: 8px 30px 8px 42px; } .lp-buttonConversion.of-download { position: relative; } .lp-buttonConversion.of-download .lp-buttonConversion-body { position: relative; padding-left: 45px; } .lp-buttonConversion.of-download .lp-buttonConversion-body::before { display: block; position: absolute; top: 50%; left: 18px; width: 19px; height: 18px; transform: translateY(-50%); background: url("../../../../../img/ss/general/products_app/products_app_icon_01.png") no-repeat center center; content: ""; } .lp-buttonConversion-outer { margin-bottom: 20px; } @media only screen and (max-width: 969px) { .lp-buttonConversion-outer { margin-bottom: calc((20 * 100vw) / 970); } } @media only screen and (max-width: 767px) { .lp-buttonConversion-outer { margin-bottom: 15px; } } .lp-textPhoneLink { display: flex; flex-direction: column; justify-content: center; width: 100%; padding: 32px 16px; } .lp-textPhoneLink > *:last-child { margin-bottom: 0; } @media only screen and (max-width: 1279px) { .lp-textPhoneLink { padding: 10px 5px; } } .lp-textPhoneLink-number { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; margin-bottom: 8px; font-weight: bold; } @media only screen and (max-width: 1279px) { .lp-textPhoneLink-number { width: 100%; } } .lp-textPhoneLink-number a { position: relative; padding-left: 28px; color: #13778f; font-size: 1.7rem; font-weight: bold; letter-spacing: 0.5px; line-height: 1.3; text-decoration: none; cursor: inherit; } .lp-textPhoneLink-number a::before { position: absolute; top: -3px; left: -4px; width: 32px; height: 32px; background: 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 15.0497 21.0942 16.0531 21.2967 16.2556L23.8459 18.8048Z' fill='%2313778f'/%3E%3C/svg%3E"); background-size: contain; content: ""; } .lp-textPhoneLink-number.of-primary a { padding-left: 0; } .lp-textPhoneLink-number.of-primary a::before { top: 1.8rem; left: -32px; } .lp-textPhoneLink-number.of-primary a > span { display: block; } .lp-textPhoneLink-text { display: block; font-size: 1.4rem; font-weight: normal; text-align: center; } .lp-textPhoneLink.of-textSize-large .lp-textPhoneLink-number a { font-size: 2.4rem; } .lp-textPhoneLink .TelSlsh { display: none; } @media only screen and (max-width: 1279px) { .lp-textPhoneLink .TelSlsh { display: block; margin-right: 8px; margin-left: 10px; font-weight: normal; } } @media only screen and (max-width: 767px) { .lp-textPhoneLink .TelSlsh + a { margin-top: 6px; } }