@charset "UTF-8"; html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } body { line-height: 1; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } nav, ul, ol { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none; } a { margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent; text-decoration: none; } sup { vertical-align: super; font-size: smaller; } sub { vertical-align: sub; font-size: small; } sub { vertical-align: sub; font-size: small; } ins { background-color: #ff9; color: #000; text-decoration: none; } mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; } del { text-decoration: line-through; } abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; } table { border-collapse: collapse; border-spacing: 0; } hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } input, select { vertical-align: middle; } .wrap { position: relative; width: 100%; margin: 0 auto; color: #000; font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "??????", YuGothic, "????? Medium", "Yu Gothic Medium", "?????", "Yu Gothic", "Helvetica Neue", "Helvetica", "Arial", "Meiryo", sans-serif; font: 1em/1.75 "Lato", Helvetica, Arial, sans-serif; -webkit-text-size-adjust: none; overflow: hidden; box-sizing: border-box; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .wrap * { box-sizing: inherit; } .wrap *::before, .wrap *::after { box-sizing: inherit; } .wrap * img, .wrap * svg { width: 100%; vertical-align: bottom; backface-visibility: hidden; } .wrap * a { transition: .3s; } .init { opacity: 0; transform: translateY(60px); } .inited { opacity: 1; transform: translate(0); transition: .6s cubic-bezier(0.65, 0, .35, 1) .4s; transition-property: opacity, transform; } .btn { display: inline-block; color: inherit; transition: .3s ease; } @media (min-width: 769px) { .btn:hover { opacity: .7; } } @media (min-width: 769px) { .sp { display: none; } } @media (max-width: 768px) { .pc { display: none; } } .legion-loq-product { padding-bottom: 100px; } @media (max-width: 768px) { .legion-loq-product { padding-bottom: 13.33vw; } } .legion-loq-product .svg-wh { filter: invert(1); } .legion-loq-product .rounded { border-radius: 15px; } @media (max-width: 768px) { .legion-loq-product .rounded { border-radius: 10px; } } .legion-loq-product .marker { position: relative; z-index: 0; } .legion-loq-product .marker::after { content: ""; display: block; position: absolute; right: 0; left: 0; width: 100%; margin: auto; z-index: -1; } .legion-loq-product .legion .marker::after { background-image: linear-gradient(-120deg, #29abe2, #f0f); } .legion-loq-product .loq .marker::after { background-image: linear-gradient(-120deg, #0ff, #96f); } .legion-loq-product .header { position: absolute; top: 0; left: 0; display: flex; align-items: center; justify-content: center; width: 100%; height: 50px; background: rgba(255, 255, 255, .95); transition: .6s; z-index: 100; } .legion-loq-product .header.is-fixed { position: fixed; transition: .6s; } .legion-loq-product .header_list { display: flex; align-items: center; justify-content: center; } .legion-loq-product .header_item .btn { font-weight: bold; font-size: 14px; line-height: 2; letter-spacing: 0em; } @media (min-width: 769px) { .legion-loq-product .header_item:not(:first-of-type) { margin-left: 38px; } } @media (max-width: 768px) { .legion-loq-product .header { opacity: 0; top: -100%; justify-content: flex-start; height: 13.33vw; padding: 0 4.27vw; } .legion-loq-product .header.is-fixed { top: 0; opacity: 1; } .legion-loq-product .header_logo { width: 34.13vw; } .legion-loq-product .header_humberger { position: absolute; top: 0; right: 0; display: block; width: 16vw; height: 13.33vw; padding: 0; margin: auto; border: none; background: transparent; transition: .3s; cursor: pointer; } .legion-loq-product .header_humberger::after { content: ""; position: absolute; top: 0; right: 5.33vw; bottom: 0; display: block; margin: auto; width: 12px; height: 12px; border-right: 2px solid #000; border-bottom: 2px solid #000; transform: rotate(45deg); transition: .6s; } .legion-loq-product .header_humberger.is-open::after { transform: rotate(45deg) scale(-1, -1); } .legion-loq-product .header_nav { position: absolute; top: 13.33vw; right: 0; left: 0; width: 100%; height: calc(100vh - 13.33vw); margin: auto; visibility: hidden; overflow: hidden; transition: 1s; z-index: -1; } .legion-loq-product .header_nav.is-open { visibility: visible; } .legion-loq-product .header_list { position: relative; top: -100%; flex-direction: column; height: 100%; background: rgba(255, 255, 255, .95); transition: .6s; overflow: hidden; } .legion-loq-product .is-open .header_list { top: 0; } .legion-loq-product .header_item:not(:first-of-type) { margin-top: 4.8vw; } .legion-loq-product .header_item .btn { font-size: 4.8vw; } } .legion-loq-product .mv { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-height: 555px; padding-bottom: 18px; color: #fff; font-weight: bold; z-index: 0; } .legion-loq-product .mv::after { content: ""; position: absolute; bottom: 0; left: 50%; width: 100%; height: 100%; margin: auto; background: url(https://p2-ofp.static.pub/ShareResource/JPResource/JP-Images/content-page/legion-portal/product/mv_legion_bg_pc.jpg) no-repeat left bottom/50% 100%, url(https://p2-ofp.static.pub/ShareResource/JPResource/JP-Images/content-page/legion-portal/product/mv_loq_bg_pc.jpg) no-repeat right bottom/50% 100%; transform: translateX(-50%); z-index: -1; pointer-events: none; } .legion-loq-product .mv_ttl { width: 482px; margin-top: 10px; } .legion-loq-product .mv_copy { order: -1; text-align: center; font-size: 22px; line-height: 1.54; letter-spacing: 0em; filter: drop-shadow(0px 0px 10px #58677c); } .legion-loq-product .mv_links { margin-top: 44px; font-size: 14px; line-height: 1; letter-spacing: 0em; } .legion-loq-product .mv_links p { text-align: center; display: inline-block; } .legion-loq-product .mv_links p:not(:first-of-type) { margin-left: 210px; } .legion-loq-product .mv_links .btn { padding-bottom: 14px; } .legion-loq-product .mv_links .btn::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; opacity: .8; display: block; height: 100%; width: 50%; margin: auto; transform: translateX(-50%); } .legion-loq-product .mv_links p:nth-of-type(1) .btn::after { left: 25%; } .legion-loq-product .mv_links p:nth-of-type(2) .btn::after { left: 75%; } .legion-loq-product .mv_links span { position: relative; display: block; font-size: 26px; line-height: 1.64; letter-spacing: 0em; } .legion-loq-product .mv_links span::after { content: ""; position: absolute; right: 0; bottom: -14px; left: 0; display: block; width: 16px; height: 16px; margin: auto; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); transition: .3s ease; } .legion-loq-product .mv_box { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: min(100%, 1366px); height: 100%; margin: auto; pointer-events: none; } .legion-loq-product .mv_box .btn { position: absolute; top: 80px; right: 40px; width: 160px; margin: auto; pointer-events: auto; } @media (min-width: 769px) { .legion-loq-product .mv::after { min-width: 2000px; } .legion-loq-product .mv_links .btn:hover span::after { bottom: -20px; } } @media (max-width: 768px) { .legion-loq-product .mv { min-height: 92.8vw; padding-bottom: 2.13vw; } .legion-loq-product .mv::after { background-image: url(https://p2-ofp.static.pub/ShareResource/JPResource/JP-Images/content-page/legion-portal/product/mv_legion_bg_sp.jpg), url(https://p2-ofp.static.pub/ShareResource/JPResource/JP-Images/content-page/legion-portal/product/mv_loq_bg_sp.jpg); } .legion-loq-product .mv_ttl { width: 74.4vw; margin-top: 4.53vw; } .legion-loq-product .mv_copy { font-size: 13.6px; line-height: 1.54; letter-spacing: 0em; } .legion-loq-product .mv_links { margin-top: 6.67vw; font-size: 3.2vw; line-height: 1.41; letter-spacing: .02em; } .legion-loq-product .mv_links p:not(:first-of-type) { margin-left: 8vw; } .legion-loq-product .mv_links .btn { padding-bottom: 2.67vw; } .legion-loq-product .mv_links span { font-size: 4vw; line-height: 2; letter-spacing: 0em; } .legion-loq-product .mv_links span::after { bottom: -1.87vw; width: 2.93vw; height: 2.93vw; } } .legion-loq-product .about, .legion-loq-product .comparison, .legion-loq-product .copy { position: relative; width: min(90%, 1280px); margin-left: auto; margin-right: auto; } .legion-loq-product .about::before, .legion-loq-product .comparison::before, .legion-loq-product .copy::before { content: ""; position: absolute; top: 0; left: 50%; display: block; width: 100vw; height: 100%; margin: auto; background: #f7f7f7; transform: translateX(-50%); z-index: -1; } @media (max-width: 768px) { .legion-loq-product .about, .legion-loq-product .comparison, .legion-loq-product .copy { width: 92vw; } } .legion-loq-product .about { text-align: center; padding-top: 100px; } .legion-loq-product .about_block { height: min(51.24vw, 700px); padding-top: min(14.28vw, 195px); background: url(https://p2-ofp.static.pub/ShareResource/JPResource/JP-Images/content-page/legion-portal/product/bout_bg_pc.jpg) no-repeat center/cover; } .legion-loq-product .about_txt { font-size: min(1.17vw, 16px); line-height: 2.62; letter-spacing: 0em; } .legion-loq-product .about_txt strong { display: block; font-size: min(1.46vw, 20px); line-height: 2.9; } .legion-loq-product .about_logo { margin: 40px auto 0; width: min(24.89vw, 340px); } @media (max-width: 768px) { .legion-loq-product .about { padding-top: 20.53vw; } .legion-loq-product .about_block { height: 170.67vw; padding-top: 22.4vw; background-image: url(https://p2-ofp.static.pub/ShareResource/JPResource/JP-Images/content-page/legion-portal/product/bout_bg_sp.jpg); } .legion-loq-product .about_txt { font-size: 14px; line-height: 2; letter-spacing: 0em; } .legion-loq-product .about_txt strong { padding-top: 3.47vw; font-size: 16px; line-height: 2; letter-spacing: 0em; } .legion-loq-product .about_logo { margin-top: 5.33vw; width: 65.6vw; } } .legion-loq-product .comparison { padding-top: 100px; } .legion-loq-product .comparison_ttl { text-align: center; font-size: 30px; line-height: 1; letter-spacing: 0em; } .legion-loq-product .comparison_ttl .marker { display: inline-block; margin: 0 5px; padding: 0 5px; line-height: 1; } .legion-loq-product .comparison_ttl .marker:nth-of-type(1) { color: #fff; background-image: linear-gradient(-120deg, #29abe2, #f0f); } .legion-loq-product .comparison_ttl .marker:nth-of-type(2) { background-image: linear-gradient(-120deg, #0ff, #6ec7ff 60%, #96f); } .legion-loq-product .comparison_block { margin-top: 40px; padding: 48px 0 56px; background: #fff; } .legion-loq-product .comparison_box { width: 100%; } .legion-loq-product .comparison_box.init { opacity: 1; transform: none; } .legion-loq-product .comparison_fig { position: relative; width: 100%; margin: 0 auto; } .legion-loq-product .comparison_links { position: absolute; margin: auto; } .legion-loq-product .comparison_links_1 { top: min(4.03vw, 60px); left: min(23.43vw, 336px); width: min(10.98vw, 150px); height: min(5.86vw, 80px); } .legion-loq-product .comparison_links_2 { top: min(10.25vw, 146px); left: min(21.96vw, 314px); width: min(11.71vw, 160px); height: min(5.42vw, 74px); } .legion-loq-product .comparison_links_3 { top: min(7.69vw, 110px); right: min(23.57vw, 336px); width: min(10.25vw, 140px); height: min(7.76vw, 106px); -webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 80%, 50% 80%, 50% 0); clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 80%, 50% 80%, 50% 0); } .legion-loq-product .comparison_links_4 { top: min(3.66vw, 55px); right: min(20.5vw, 294px); width: min(7.91vw, 108px); height: min(8.78vw, 120px); -webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 80%, 65% 80%, 65% 0); clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 80%, 65% 80%, 65% 0); } .legion-loq-product .comparison_links_5 { bottom: min(7.32vw, 108px); left: min(23.28vw, 332px); width: min(9.08vw, 124px); height: min(9.66vw, 132px); } .legion-loq-product .comparison_links_6 { right: min(24.3vw, 345px); bottom: min(7.32vw, 105px); width: min(6.22vw, 85px); height: min(10.25vw, 140px); } .legion-loq-product .comparison_links .btn { width: 100%; height: 100%; } @media (min-width: 769px) { .legion-loq-product .comparison_fig { width: min(86%, 1100px); } } @media (max-width: 768px) { .legion-loq-product .comparison { padding-top: 9.6vw; } .legion-loq-product .comparison_ttl { font-size: 18px; line-height: 1.55; letter-spacing: 0em; } .legion-loq-product .comparison_ttl .marker { margin: 0 5px; padding: 0 5px; } .legion-loq-product .comparison_block { margin-top: 3.2vw; padding: 8vw 0; } .legion-loq-product .comparison_box { position: relative; overflow-x: auto; padding: 0 5.33vw 5.33vw; transition-delay: 1.5s; } .legion-loq-product .comparison_box.inited::after { opacity: 0; } .legion-loq-product .comparison_box::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; margin: auto; background: rgba(255, 255, 255, .75) url(https://p2-ofp.static.pub/ShareResource/JPResource/JP-Images/content-page/legion-portal/product/comparison_box_icon.svg) no-repeat center/32vw 32vw; transition: inherit; pointer-events: none; } .legion-loq-product .comparison_fig { width: 188vw; } .legion-loq-product .comparison_links_1 { top: 10.13vw; left: 57.33vw; width: 26.13vw; height: 13.87vw; } .legion-loq-product .comparison_links_2 { top: 25.07vw; left: 53.6vw; width: 27.47vw; height: 12.8vw; } .legion-loq-product .comparison_links_3 { top: 19.2vw; right: 57.07vw; width: 25.07vw; height: 17.87vw; } .legion-loq-product .comparison_links_4 { top: 9.33vw; right: 50.13vw; width: 18.67vw; height: 20.8vw; } .legion-loq-product .comparison_links_5 { bottom: 18.13vw; left: 56.8vw; width: 21.6vw; height: 22.93vw; } .legion-loq-product .comparison_links_6 { right: 59.2vw; bottom: 18.13vw; width: 15.2vw; height: 24vw; } } .legion-loq-product .copy { padding: 70px 0 40px; } .legion-loq-product .copy_ttl { position: relative; text-align: center; padding: 24px 0 32px; border-top: 2px solid #000; border-bottom: 2px solid #000; font-weight: bold; font-size: min(2.05vw, 28px); line-height: 1; letter-spacing: 0; } .legion-loq-product .copy_ttl::before, .legion-loq-product .copy_ttl::after { content: ""; display: block; position: absolute; right: 0; left: 0; width: 0; height: 0; margin: auto; border-style: solid; border-width: min(2.05vw, 28px) min(1.83vw, 25px) 0 min(1.83vw, 25px); } .legion-loq-product .copy_ttl::before { top: 100%; border-color: #000 transparent transparent transparent; } .legion-loq-product .copy_ttl::after { top: calc(100% - 3px); border-color: #f7f7f7 transparent transparent transparent; } .legion-loq-product .copy_note { text-align: right; margin-top: 18px; font-size: 10px; line-height: 1.4; letter-spacing: 0em; } @media (max-width: 768px) { .legion-loq-product .copy { padding: 9.33vw 0 7.47vw; } .legion-loq-product .copy_ttl { padding: 2.93vw 0; font-size: 4vw; line-height: 1.33; letter-spacing: 0em; } .legion-loq-product .copy_ttl::before, .legion-loq-product .copy_ttl::after { border-width: 4.53vw 4.27vw 0 4.27vw; } .legion-loq-product .copy_note { text-align: center; margin-top: 5.33vw; } } .legion-loq-product .legion_container, .legion-loq-product .loq_container { margin: 0 auto; } .legion-loq-product .legion_block, .legion-loq-product .loq_block { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 0 min(6.59vw, 90px); z-index: 0; } .legion-loq-product .legion_block::after, .legion-loq-product .loq_block::after { content: ""; display: block; position: absolute; left: 50%; transform: translateX(-50%); z-index: -1; } .legion-loq-product .legion_block_1::after, .legion-loq-product .loq_block_1::after { top: 0; width: 100%; height: 100%; } .legion-loq-product .legion_ttl.init, .legion-loq-product .loq_ttl.init { transform: none; } .legion-loq-product .legion_hdg, .legion-loq-product .loq_hdg { position: relative; display: inline-block; font-size: 0; z-index: 0; } .legion-loq-product .legion_hdg::before, .legion-loq-product .loq_hdg::before { content: ""; position: relative; display: inline-block; width: min(2.56vw, 35px); height: min(2.56vw, 35px); margin-right: min(1.02vw, 14px); background: url(https://p2-ofp.static.pub/ShareResource/JPResource/JP-Images/content-page/legion-portal/product/hdg_icon.svg) no-repeat center/contain; } .legion-loq-product .legion_hdg .marker, .legion-loq-product .loq_hdg .marker { display: inline-block; } .legion-loq-product .legion_hdg .marker::after, .legion-loq-product .loq_hdg .marker::after { bottom: 0; height: min(0.73vw, 10px); } .legion-loq-product .legion_hdg img, .legion-loq-product .loq_hdg img { width: auto; height: min(2.49vw, 34px); } .legion-loq-product .legion_copy, .legion-loq-product .loq_copy { margin-top: 24px; font-weight: bold; font-size: min(2.93vw, 40px); line-height: 1.37; letter-spacing: 0em; } .legion-loq-product .legion_copy .marker::after, .legion-loq-product .loq_copy .marker::after { top: 0; bottom: 0; height: 100%; } .legion-loq-product .legion_txt, .legion-loq-product .loq_txt { margin-top: 12px; font-size: min(1.17vw, 16px); line-height: 1.87; letter-spacing: 0em; } .legion-loq-product .legion_img, .legion-loq-product .loq_img { position: relative; left: 50%; width: 100%; transform: translateX(-50%); z-index: 1; } @media (min-width: 769px) { .legion-loq-product .legion_container, .legion-loq-product .loq_container { width: min(90%, 1280px); clear: both; } .legion-loq-product .legion_block_1::after, .legion-loq-product .loq_block_1::after { width: 2000px; } .legion-loq-product .legion_product, .legion-loq-product .loq_product { position: absolute; margin: auto; } .legion-loq-product .legion_img, .legion-loq-product .loq_img { clear: both; } } @media (max-width: 768px) { .legion-loq-product .legion_box, .legion-loq-product .loq_box { width: 100%; } .legion-loq-product .legion_hdg::before, .legion-loq-product .loq_hdg::before { width: 4.8vw; height: 4.8vw; margin-right: 1.6vw; } .legion-loq-product .legion_hdg .marker::after, .legion-loq-product .loq_hdg .marker::after { height: 1.33vw; } .legion-loq-product .legion_hdg img, .legion-loq-product .loq_hdg img { height: 5.07vw; } .legion-loq-product .legion_copy, .legion-loq-product .loq_copy { margin-top: 4.27vw; font-size: 7.73vw; line-height: 1.38; letter-spacing: 0em; } .legion-loq-product .legion_txt, .legion-loq-product .loq_txt { font-size: 13px; line-height: 1.76; letter-spacing: 0em; } } .legion-loq-product .legion { color: #fff; background: #000; } .legion-loq-product .legion_block_1 { padding-top: min(10.25vw, 140px); padding-bottom: min(11.57vw, 158px); } .legion-loq-product .legion_block_1::after { background: url(https://p2-ofp.static.pub/ShareResource/JPResource/JP-Images/content-page/legion-portal/product/legion_bg_1_pc.jpg) no-repeat center/cover; } .legion-loq-product .legion_block_2::before { content: ""; position: absolute; bottom: 100px; left: 50%; display: block; width: 100vw; height: min(90.63vw, 1238px); background-image: linear-gradient(0deg, #1a1a1a, #000); transform: translateX(-50%); z-index: -1; pointer-events: none; } .legion-loq-product .legion_block_2::after { bottom: 0; width: 100vw; height: min(30.38vw, 415px); background: #000; -webkit-clip-path: polygon(0 0, 100% 73%, 100% 100%, 0% 100%); clip-path: polygon(0 0, 100% 73%, 100% 100%, 0% 100%); } .legion-loq-product .legion_block_3 { padding-top: min(13.18vw, 180px); padding-bottom: min(28.84vw, 394px); } .legion-loq-product .legion_block_3::after { bottom: 0; width: 2000px; height: 100%; background: url(https://p2-ofp.static.pub/ShareResource/JPResource/JP-Images/content-page/legion-portal/product/legion_bg_3_pc.png) no-repeat center/cover; } .legion-loq-product .legion_block_4 { padding-top: min(10.25vw, 140px); padding-bottom: min(10.25vw, 140px); } .legion-loq-product .legion_block_4::after { width: 1500px; height: 100%; background: url(https://p2-ofp.static.pub/ShareResource/JPResource/JP-Images/content-page/legion-portal/product/legion_bg_4_pc.jpg) no-repeat center/cover; } .legion-loq-product .legion_block_5, .legion-loq-product .legion_block_6 { width: min(49%, 630px); margin-top: min(3.66vw, 50px); } .legion-loq-product .legion_block_5 { justify-content: flex-end; padding: min(3.95vw, 54px) min(2.78vw, 38px) min(26.5vw, 362px) 0; background: url(https://p2-ofp.static.pub/ShareResource/JPResource/JP-Images/content-page/legion-portal/product/legion_bg_5.jpg) no-repeat center/cover; overflow: hidden; } .legion-loq-product .legion_block_5 .font-small { position: absolute; font-size: min(1.13vw, 15.4px); } .legion-loq-product .legion_block_6 { justify-content: flex-end; padding: min(23.06vw, 315px) min(3.29vw, 45px) min(2.93vw, 40px) 0; background: url(https://p2-ofp.static.pub/ShareResource/JPResource/JP-Images/content-page/legion-portal/product/legion_bg_6.jpg) no-repeat center/cover; } .legion-loq-product .legion_ttl { width: min(38.8vw, 530px); } .legion-loq-product .legion_hdg::before { filter: invert(1); } .legion-loq-product .legion_block_1 .legion_copy { margin-top: min(4.39vw, 60px); } .legion-loq-product .legion_copy .marker:nth-of-type(1)::after { background-image: linear-gradient(-120deg, #9356f0, #f0f); } .legion-loq-product .legion_copy .marker:nth-of-type(2)::after { background-image: linear-gradient(-120deg, #29abe2, #9356f0); } .legion-loq-product .legion_block_1 .legion_txt { margin-top: min(2.49vw, 34px); font-size: min(1.32vw, 18px); line-height: 1.77; } .legion-loq-product .legion_block_1 .legion_txt+.legion_txt { margin-top: 1em; } .legion-loq-product .legion_product_1 { width: min(38.95vw, 532px); } .legion-loq-product .legion_product_2 { width: min(62.52vw, 854px); mix-blend-mode: exclusion; } .legion-loq-product .legion_product_2::after { content: ""; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; background: url(https://p2-ofp.static.pub/ShareResource/JPResource/JP-Images/content-page/legion-portal/product/legion_product_2_bg.png) no-repeat center/contain; mix-blend-mode: plus-lighter; pointer-events: none; } .legion-loq-product .legion_product_3 { text-align: right; width: min(69.55vw, 950px); margin: auto; transform: translateX(min(6vw, 82px)); } .legion-loq-product .legion_product_3 figcaption { margin-top: 18px; font-size: min(1.13vw, 15.4px); } .legion-loq-product .legion_product_5 { width: min(52.12vw, 712px); } .legion-loq-product .legion_img_1 { width: min(109.81vw, 1500px); } .legion-loq-product .legion_img_2 img { width: min(49%, 630px); } .legion-loq-product .legion_img_3 { width: min(146.41vw, 2000px); } @media (min-width: 769px) { .legion-loq-product .legion_block_2 { justify-content: flex-end; padding: min(13.03vw, 178px) min(12.01vw, 164px) min(32.94vw, 450px) 0; } .legion-loq-product .legion_block_4::after { top: 0; } .legion-loq-product .legion_block_5 { float: left; } .legion-loq-product .legion_block_6 { float: right; } .legion-loq-product .legion_product_1 { top: min(7.32vw, 100px); right: min(5.12vw, 70px); } .legion-loq-product .legion_product_2 { right: min(37.12vw, 507px); bottom: min(-0.95vw, -13px); } .legion-loq-product .legion_product_3 { bottom: min(9.08vw, 124px); right: 0; left: 0; } .legion-loq-product .legion_product_5 { bottom: min(1.02vw, 14px); right: min(12.81vw, 175px); } .legion-loq-product .legion_img_2 { display: flex; justify-content: space-between; } } @media (max-width: 768px) { .legion-loq-product .legion_block { flex-direction: column; padding: 0 10.67vw; } .legion-loq-product .legion_block_1 { flex-direction: column-reverse; padding: 48vw 4vw 12vw; } .legion-loq-product .legion_block_1::after { background-image: url(https://p2-ofp.static.pub/ShareResource/JPResource/JP-Images/content-page/legion-portal/product/legion_bg_1_sp.jpg); } .legion-loq-product .legion_block_2 { padding-top: 12.27vw; } .legion-loq-product .legion_block_2::before { height: 110%; } .legion-loq-product .legion_block_2::after { height: 118.67vw; -webkit-clip-path: polygon(0 50%, 100% 72.5%, 100% 100%, 0% 100%); clip-path: polygon(0 50%, 100% 72.5%, 100% 100%, 0% 100%); } .legion-loq-product .legion_block_3 { padding-top: 14.93vw; padding-bottom: 21.33vw; } .legion-loq-product .legion_block_3::after { bottom: -37.33vw; width: 100%; background: url(https://p2-ofp.static.pub/ShareResource/JPResource/JP-Images/content-page/legion-portal/product/legion_bg_3_sp.png) no-repeat center/contain; } .legion-loq-product .legion_block_4 { padding: 10.13vw 10.4vw 66.67vw 10.67vw; background-color: #0c1929; } .legion-loq-product .legion_block_4::after { bottom: 0; width: 100%; background: url(https://p2-ofp.static.pub/ShareResource/JPResource/JP-Images/content-page/legion-portal/product/legion_bg_4_sp.jpg) no-repeat center bottom/contain; } .legion-loq-product .legion_block_5, .legion-loq-product .legion_block_6 { width: 92vw; margin-right: auto; margin-left: auto; } .legion-loq-product .legion_block_5 { margin-top: 13.33vw; padding: 7.47vw 6.4vw 2.67vw; } .legion-loq-product .legion_block_5 .font-small { bottom: 3.2vw; right: 6.4vw; font-size: 11px; } .legion-loq-product .legion_block_6 { margin-top: 6.67vw; padding: 52vw 6.4vw 5.87vw; background-position: left center; } .legion-loq-product .legion_ttl { position: absolute; top: 13.33vw; right: 0; left: 0; width: 70.67vw; margin: auto; } .legion-loq-product .legion_block_1 .legion_copy { margin-top: 7.2vw; font-size: 5.33vw; line-height: 1.5; letter-spacing: 0em; } .legion-loq-product .legion_txt { margin-top: 1.6vw; } .legion-loq-product .legion_block_1 .legion_txt { margin-top: 4.53vw; font-size: 14px; line-height: 1.71; letter-spacing: 0em; } .legion-loq-product .legion_product_1 { width: 69.33vw; transform: translateX(-1.87vw); } .legion-loq-product .legion_product_2 { width: 107.73vw; margin-top: -4vw; } .legion-loq-product .legion_product_3 { text-align: center; position: relative; left: 50%; margin-top: 11.73vw; width: 100.27vw; transform: translateX(-50%); } .legion-loq-product .legion_product_3 figcaption { margin-top: 3.47vw; font-size: 11px; } .legion-loq-product .legion_product_5 { width: 104vw; margin-top: 4.8vw; transform: translateX(-32.53vw); } .legion-loq-product .legion_img_1, .legion-loq-product .legion_img_3 { width: 100%; } .legion-loq-product .legion_img_2 { text-align: center; } .legion-loq-product .legion_img_2 img { width: 92vw; } .legion-loq-product .legion_img_2 img:not(:first-of-type) { margin-top: 6.93vw; } .legion-loq-product .legion_img_3 { margin-top: -0.27vw; } } .legion-loq-product .loq { color: #000; } .legion-loq-product .loq_block_1 { padding-top: min(6.73vw, 92px); padding-bottom: min(8.64vw, 118px); } .legion-loq-product .loq_block_1::after { background: url(https://p2-ofp.static.pub/ShareResource/JPResource/JP-Images/content-page/legion-portal/product/loq_bg_1_pc.jpg) no-repeat center/cover; } .legion-loq-product .loq_block_2 { padding-top: min(17.13vw, 234px); padding-bottom: min(31.84vw, 435px); } .legion-loq-product .loq_block_2::after { width: 100vw; height: min(117.57vw, 1606px); background: url(https://p2-ofp.static.pub/ShareResource/JPResource/JP-Images/content-page/legion-portal/product/loq_bg_2_pc.jpg) no-repeat center/cover; } .legion-loq-product .loq_block_3, .legion-loq-product .loq_block_6 { width: min(100%, 1280px); padding: 0; } .legion-loq-product .loq_block_4 { padding-top: min(11.71vw, 160px); padding-bottom: min(41vw, 560px); } .legion-loq-product .loq_block_4::after { top: 0; bottom: 0; width: min(54.9vw, 750px); height: min(54.9vw, 750px); margin: auto; background: #f0faff; -webkit-mask: url(https://p2-ofp.static.pub/ShareResource/JPResource/JP-Images/content-page/legion-portal/product/hdg_icon.svg) no-repeat center/100%; mask: url(https://p2-ofp.static.pub/ShareResource/JPResource/JP-Images/content-page/legion-portal/product/hdg_icon.svg) no-repeat center/100%; } .legion-loq-product .loq_block_5 { left: 50%; width: min(109.81vw, 1500px); padding: min(14.64vw, 200px) 0 0 min(29.5vw, 403px); transform: translateX(-50%); z-index: 1; } .legion-loq-product .loq_block_5::after { top: 0; width: 100%; height: min(40.26vw, 550px); background: url(https://p2-ofp.static.pub/ShareResource/JPResource/JP-Images/content-page/legion-portal/product/loq_bg_5_pc.jpg) no-repeat center/cover; } .legion-loq-product .loq_block_6 { flex-direction: row-reverse; margin-top: 65px; } .legion-loq-product .loq_block_6::after { bottom: min(-2.05vw, -28px); width: 100vw; height: min(59.3vw, 810px); background: url(https://p2-ofp.static.pub/ShareResource/JPResource/JP-Images/content-page/legion-portal/product/loq_bg_6_tex_pc.jpg) no-repeat center top/cover; } .legion-loq-product .loq_block_3 .loq_box, .legion-loq-product .loq_block_6 .loq_box { display: flex; flex-direction: column; align-items: flex-start; width: min(49%, 630px); height: 100%; } .legion-loq-product .loq_block_3 .loq_box { justify-content: center; padding-left: min(6.44vw, 88px); color: #fff; background: url(https://p2-ofp.static.pub/ShareResource/JPResource/JP-Images/content-page/legion-portal/product/loq_bg_3.jpg) no-repeat center/cover; } .legion-loq-product .loq_block_5 .loq_box { width: 100%; padding: min(5.12vw, 70px) min(4.98vw, 68px) min(13.32vw, 182px); background: #fff; border-radius: 15px 0 0 15px; } .legion-loq-product .loq_block_6 .loq_box { justify-content: flex-start; padding-top: min(3.51vw, 48px); padding-left: min(2.78vw, 38px); background: url(https://p2-ofp.static.pub/ShareResource/JPResource/JP-Images/content-page/legion-portal/product/loq_bg_6_pc.jpg) no-repeat center/cover; } .legion-loq-product .loq_ttl { width: min(36.6vw, 500px); margin-top: min(3.07vw, 42px); } .legion-loq-product .loq_block_3 .loq_hdg::before { filter: invert(1); } .legion-loq-product .loq_block_1 .loq_copy { margin-top: 0; } .legion-loq-product .loq_copy .marker:nth-of-type(1)::after { background-image: linear-gradient(-120deg, #6ec7ff, #96f); } .legion-loq-product .loq_copy .marker:nth-of-type(2)::after { background-image: linear-gradient(-120deg, #0ff, #6ec7ff); } .legion-loq-product .loq_block_1 .loq_txt { margin-top: min(4.54vw, 62px); font-size: min(1.32vw, 18px); line-height: 1.77; } .legion-loq-product .loq_block_1 .loq_txt+.loq_txt { margin-top: 1em; } .legion-loq-product .loq_product_1 { width: min(38.58vw, 527px); } .legion-loq-product .loq_product_2 { width: min(59.3vw, 810px); } .legion-loq-product .loq_product_3, .legion-loq-product .loq_product_6 { width: min(49%, 630px); overflow: hidden; } .legion-loq-product .loq_product_4 { width: min(92.24vw, 1260px); } .legion-loq-product .loq_product_5 { position: absolute; top: min(2.64vw, 36px); right: min(13.18vw, 180px); width: min(36.16vw, 494px); } .legion-loq-product .loq_img_1, .legion-loq-product .loq_img_2 { width: min(109.81vw, 1500px); } .legion-loq-product .loq_img_2 { margin-top: min(7.32vw, 100px); } .legion-loq-product .loq_img_3 { width: min(146.41vw, 2000px); } @media (min-width: 769px) { .legion-loq-product .loq_block_2::after, .legion-loq-product .loq_block_6::after { width: min(146.41vw, 2000px); } .legion-loq-product .loq_block_2 { justify-content: flex-end; padding-right: min(6.88vw, 94px); padding-left: 0; } .legion-loq-product .loq_block_3, .legion-loq-product .loq_block_6 { height: min(500px, 36.6vw); } .legion-loq-product .loq_block_4 { flex-direction: column; } .legion-loq-product .loq_block_4 .loq_box { display: flex; flex-wrap: wrap; flex-direction: column; align-items: flex-start; justify-content: flex-start; height: min(14.64vw, 200px); margin-right: min(25.48vw, 348px); } .legion-loq-product .loq_block_4 .loq_txt { margin-top: min(4.25vw, 58px); margin-left: min(2.93vw, 40px); } .legion-loq-product .loq_product_1 { top: min(15.23vw, 208px); right: min(6.3vw, 86px); } .legion-loq-product .loq_product_2 { right: min(47.44vw, 648px); top: min(10.83vw, 148px); } .legion-loq-product .loq_product_3, .legion-loq-product .loq_product_6 { position: relative; } .legion-loq-product .loq_product_3, .legion-loq-product .loq_product_6 { height: 100%; } .legion-loq-product .loq_product_3 img, .legion-loq-product .loq_product_6 img { height: 100%; } .legion-loq-product .loq_product_3 { margin-right: 0; } .legion-loq-product .loq_product_4 { top: min(9.96vw, 136px); left: min(11.71vw, 160px); } .legion-loq-product .loq_product_6 { margin-left: 0; } .legion-loq-product .loq_img_2 { display: flex; justify-content: space-between; } .legion-loq-product .loq_img_3 { min-width: min(130.16vw, 1778px); } } @media (max-width: 768px) { .legion-loq-product .loq_block { flex-direction: column; padding: 0 9.33vw 0 10.67vw; } .legion-loq-product .loq_block_1 { padding: 12vw 4vw 11.73vw; } .legion-loq-product .loq_block_1::after { background-image: url(https://p2-ofp.static.pub/ShareResource/JPResource/JP-Images/content-page/legion-portal/product/loq_bg_1_sp.jpg); } .legion-loq-product .loq_block_2 { padding-top: 12.27vw; padding-bottom: 18.67vw; } .legion-loq-product .loq_block_2::after { height: 382.93vw; background: url(https://p2-ofp.static.pub/ShareResource/JPResource/JP-Images/content-page/legion-portal/product/loq_bg_2_sp.jpg) no-repeat center top/cover; } .legion-loq-product .loq_block_3, .legion-loq-product .loq_block_6 { width: 92vw; margin-right: auto; margin-left: auto; padding: 0; } .legion-loq-product .loq_block_4 { padding-top: 13.33vw; padding-bottom: 21.87vw; } .legion-loq-product .loq_block_4::after { width: 80vw; height: 80vw; margin-top: 30.4vw; } .legion-loq-product .loq_block_5 { width: 100%; padding: 17.87vw 0 0 10.67vw; } .legion-loq-product .loq_block_5::after { height: 73.33vw; background-image: url(https://p2-ofp.static.pub/ShareResource/JPResource/JP-Images/content-page/legion-portal/product/loq_bg_5_sp.jpg); } .legion-loq-product .loq_block_6 { flex-direction: column-reverse; margin-top: 13.33vw; } .legion-loq-product .loq_block_6::after { bottom: 0; height: 201.6vw; background: url(https://p2-ofp.static.pub/ShareResource/JPResource/JP-Images/content-page/legion-portal/product/loq_bg_6_tex_sp.jpg) no-repeat center top/cover; } .legion-loq-product .loq_block_3 .loq_box, .legion-loq-product .loq_block_6 .loq_box { width: 92vw; } .legion-loq-product .loq_block_3 .loq_box { padding: 7.47vw 6.4vw; } .legion-loq-product .loq_block_5 .loq_box { padding: 8.53vw 6.93vw 10.67vw; border-radius: 10px 0 0 10px; } .legion-loq-product .loq_block_6 .loq_box { height: 97.33vw; margin-top: 6.67vw; padding: 4.8vw 6.4vw 0; background-image: url(https://p2-ofp.static.pub/ShareResource/JPResource/JP-Images/content-page/legion-portal/product/loq_bg_6_sp.jpg); } .legion-loq-product .loq_ttl { width: 70.67vw; margin: 3.47vw auto 0; } .legion-loq-product .loq_block_1 .loq_copy { margin-left: 4.27vw; font-size: 5.33vw; line-height: 1.5; letter-spacing: 0em; } .legion-loq-product .loq_txt { margin-top: 4.27vw; } .legion-loq-product .loq_block_1 .loq_txt { margin-top: 91.2vw; margin-left: 4.53vw; font-size: 14px; line-height: 1.71; letter-spacing: 0em; } .legion-loq-product .loq_block_3 .loq_txt { margin-top: 2.67vw; } .legion-loq-product .loq_product_1 { position: absolute; top: 81.6vw; width: 68vw; transform: translateX(0.53vw); } .legion-loq-product .loq_product_2 { width: 92.27vw; margin-top: 10.67vw; transform: translateX(-21.33vw); } .legion-loq-product .loq_product_2::after { top: -14.4vw; left: -27.73vw; width: 107.73vw; height: 119.2vw; } .legion-loq-product .loq_product_3, .legion-loq-product .loq_product_6 { width: 92vw; } .legion-loq-product .loq_product_3 { margin-top: 6.67vw; } .legion-loq-product .loq_product_4 { width: 105.33vw; margin-top: -17.33vw; transform: translateX(12.27vw); } .legion-loq-product .loq_product_5 { top: 5.6vw; right: 2.67vw; width: 48.8vw; } .legion-loq-product .loq_img { width: 100%; } .legion-loq-product .loq_img_2 { margin-top: 13.33vw; } } .legion-loq-product .icons { text-align: center; margin-top: 90px; } .legion-loq-product .icons_ttl { font-size: 24px; line-height: 1; letter-spacing: 0em; } .legion-loq-product .icons_list { display: flex; align-items: flex-end; justify-content: center; margin: 44px auto 0; } .legion-loq-product .icons_item { display: flex; flex-direction: column; align-items: center; font-size: 14px; line-height: 1.57; letter-spacing: 0em; } .legion-loq-product .icons_item:not(:first-of-type) { margin-left: min(2%, 48px); } .legion-loq-product .icons_item img { width: 86px; margin-bottom: 24px; } @media (max-width: 768px) { .legion-loq-product .icons { margin-top: 20vw; } .legion-loq-product .icons_ttl { font-size: 18px; } .legion-loq-product .icons_list { flex-wrap: wrap; margin-top: 7.47vw; padding: 0 4vw; } .legion-loq-product .loq_icons .icons_list { width: min(100%, 300px); padding: 0; justify-content: space-around; } .legion-loq-product .icons_item { font-size: 12px; line-height: 1.41; letter-spacing: 0em; } .legion-loq-product .icons_item:not(:first-of-type) { margin-left: 3.2vw; } .legion-loq-product .icons_item:nth-of-type(4) { margin-left: 0; } .legion-loq-product .icons_item:not(:nth-of-type(-n+3)) { margin-top: 8.53vw; } .legion-loq-product .loq_icons .icons_item { margin-left: 0; } .legion-loq-product .icons_item img { width: 15.47vw; margin-bottom: 4.27vw; } } .legion-loq-product .products { text-align: center; margin-top: 84px; padding: 98px 0 108px; background: #1a1a1a; } .legion-loq-product .products_ttl { font-size: 24px; line-height: 1; letter-spacing: 0em; } .legion-loq-product .products_list { display: flex; align-items: stretch; justify-content: space-between; width: min(86%, 1100px); margin: 50px auto 0; } .legion-loq-product .products_item { width: min(31.5%, 350px); padding: min(2.56vw, 35px) 0 min(4.03vw, 55px); background: #292929; } .legion-loq-product .products_img { width: auto; height: min(12.3vw, 168px); } .legion-loq-product .products_hdg { margin-top: min(1.61vw, 22px); font-size: min(1.68vw, 23px); line-height: 1; letter-spacing: 0; } .legion-loq-product .products_txt { position: relative; margin-top: min(2.2vw, 30px); padding-top: min(1.76vw, 24px); font-size: 14px; line-height: 1.71; letter-spacing: 0em; } .legion-loq-product .products_txt::before { content: ""; display: block; position: absolute; top: 0; right: 0; left: 0; height: 1px; width: min(18.3vw, 250px); margin: auto; background: #fff; } .legion-loq-product .products_txt strong { display: block; margin-bottom: 16px; font-size: 16px; line-height: 1.62; letter-spacing: 0em; } @media (min-width: 769px) { .legion-loq-product .products_txt { font-size: min(1.02vw, 14px); } .legion-loq-product .products_txt strong { font-size: min(1.17vw, 16px); } } @media (max-width: 768px) { .legion-loq-product .products { margin-top: 19.2vw; padding: 6.4vw 0 5.33vw; } .legion-loq-product .products_ttl { font-size: 18px; line-height: 1.55; letter-spacing: 0em; } .legion-loq-product .products_list { flex-direction: column; width: 92vw; margin-top: 5.33vw; } .legion-loq-product .products_item { width: 100%; padding: 11.73vw 0 12.27vw; } .legion-loq-product .products_item:not(:first-of-type) { margin-top: 4.27vw; } .legion-loq-product .products_img { height: 40.27vw; } .legion-loq-product .products_hdg { margin-top: 6.4vw; font-size: 20px; } .legion-loq-product .products_txt { margin-top: 6.93vw; padding-top: 6.93vw; } .legion-loq-product .products_txt::before { width: 66.67vw; } .legion-loq-product .products_txt strong { margin-bottom: 3.73vw; } } .legion-loq-product .lineup { text-align: center; margin-top: 150px; padding-bottom: 100px; } .legion-loq-product .lineup.loq_lineup { margin-top: 85px; padding-top: 100px; background: #edf2f4; } .legion-loq-product .lineup_ttl { margin: 0 auto; } .legion-loq-product .lineup_ttl .marker { display: inline-block; } .legion-loq-product .lineup_ttl .marker::after { bottom: 12px; height: 20px; } .legion-loq-product .lineup_ttl img { width: auto; height: 55px; } .legion-loq-product .lineup_txt { margin-top: 15px; font-size: 16px; line-height: 1; letter-spacing: 0em; } .legion-loq-product .lineup_hdg { position: relative; margin-top: 156px; font-size: 25px; } .legion-loq-product .lineup_hdg::before { content: ""; display: block; position: absolute; top: -60px; right: 0; left: 0; width: 67px; height: 39px; margin: auto; background: url(https://p2-ofp.static.pub/ShareResource/JPResource/JP-Images/content-page/legion-portal/product/lineup_desk_icon.svg) no-repeat center/contain; } .legion-loq-product .legion_lineup .lineup_hdg::before { filter: invert(1); } .legion-loq-product .lineup_hdg:first-of-type { margin-top: 134px; } .legion-loq-product .lineup_hdg:first-of-type::before { width: 56px; height: 40px; background-image: url(https://p2-ofp.static.pub/ShareResource/JPResource/JP-Images/content-page/legion-portal/product/lineup_note_icon.svg); } .legion-loq-product .lineup_block { position: relative; width: min(90%, 1280px); margin-right: auto; margin-left: auto; padding: 48px 0 60px; background: #1a1a1a; } .legion-loq-product .loq_lineup .lineup_block { background: #dbe4e9; } .legion-loq-product .lineup_block:not(.legion-loq-product .lineup_block + .lineup_block) { margin-top: 30px; padding-top: 55px; } .legion-loq-product .lineup_block+.lineup_block { border-radius: 0 0 15px 15px; } .legion-loq-product .lineup_block+.lineup_block::before { content: ""; position: absolute; top: 0; right: 0; left: 0; width: min(90%, 1100px); height: 1px; margin: auto; background: #fff; } .legion-loq-product .lineup_block:not(.legion-loq-product .lineup_block + .lineup_block):not(.rounded) { border-radius: 15px 15px 0 0; } .legion-loq-product .lineup_copy { font-weight: bold; font-size: 22px; line-height: 1.68; letter-spacing: 0em; } .legion-loq-product .lineup_copy .font-small { display: block; font-weight: normal; font-size: 18px; } .legion-loq-product .lineup_list { display: flex; flex-wrap: wrap; justify-content: center; margin-top: 40px; } .legion-loq-product .lineup_item { position: relative; display: flex; flex-direction: column; width: min(44%, 420px); padding: min(3.66vw, 50px) min(2.2vw, 30px) min(2.2vw, 30px); color: #000; background: #fff; } .legion-loq-product .lineup_item .hdg { margin-top: min(1.1vw, 15px); font-size: min(1.54vw, 21px); } .legion-loq-product .lineup_item .txt { text-align: left; margin-top: min(1.32vw, 18px); margin-bottom: min(1.32vw, 18px); font-size: 12px; line-height: 1.83; letter-spacing: 0em; } .legion-loq-product .lineup_attn { position: absolute; top: min(1.1vw, 15px); left: min(1.1vw, 15px); display: flex; flex-direction: column; align-items: center; justify-content: center; width: min(7.32vw, 100px); height: min(7.32vw, 100px); font-weight: bold; font-size: min(1.02vw, 14px); line-height: 1.42; background: #ff0; border-radius: 50%; z-index: 1; } .legion-loq-product .lineup_attn .font-small { font-size: 12px; font-weight: normal; } .legion-loq-product .lineup_img img { width: auto; height: min(15.01vw, 205px); } .legion-loq-product .lineup_link { position: relative; text-align: center; display: block; width: min(20.5vw, 280px); margin: auto auto 0; padding: min(1.61vw, 22px) 0; color: #fff; font-weight: bold; font-size: min(1.24vw, 17px); line-height: 1; background-image: linear-gradient(-135deg, #29abe2, #f0f); border-radius: 30px; } .legion-loq-product .loq_lineup .lineup_link { color: #000; background-image: linear-gradient(-135deg, #0ff, #96f); } .legion-loq-product .lineup_link::after { content: ""; display: block; position: absolute; top: 0; right: min(1.9vw, 26px); bottom: 0; margin: auto; width: min(0.73vw, 10px); height: min(0.73vw, 10px); border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(45deg); } .legion-loq-product .loq_lineup .lineup_link::after { border-color: #000; } @media (min-width: 769px) { .legion-loq-product .lineup_item:not(:first-of-type) { margin-top: min(2.2vw, 30px); } .legion-loq-product .lineup_item:first-child:nth-last-child(3) { margin-right: 18%; margin-left: 18%; } .legion-loq-product .lineup_item:last-child:nth-child(3) { margin-left: min(2.93vw, 40px); } .legion-loq-product .lineup_img img { max-height: 190px; } } @media (max-width: 768px) { .legion-loq-product .lineup { margin-top: 13.33vw; padding-bottom: 13.33vw; } .legion-loq-product .lineup.loq_lineup { margin-top: 19.2vw; padding-top: 13.33vw; } .legion-loq-product .lineup_ttl { width: 59.73vw; } .legion-loq-product .lineup_ttl .marker::after { bottom: .8vw; height: 2.67vw; } .legion-loq-product .lineup_ttl img { height: 8.53vw; } .legion-loq-product .lineup_txt { margin-top: 3.2vw; font-size: 12px; } .legion-loq-product .lineup_hdg { margin-top: 22.93vw; font-size: 14px; } .legion-loq-product .lineup_hdg::before { top: -12vw; width: 13.87vw; height: 8vw; } .legion-loq-product .lineup_hdg:first-of-type { margin-top: 19.47vw; } .legion-loq-product .lineup_hdg:first-of-type::before { width: 11.2vw; height: 8vw; } .legion-loq-product .lineup_block { width: 92vw; padding: 10.13vw 0 10.67vw; } .legion-loq-product .lineup_block:not(.legion-loq-product .lineup_block + .lineup_block) { margin-top: 5.33vw; padding-top: 7.2vw; } .legion-loq-product .lineup_block+.lineup_block { border-radius: 0 0 10px 10px; } .legion-loq-product .lineup_block+.lineup_block::before { width: 81.33vw; } .legion-loq-product .lineup_block:not(.legion-loq-product .lineup_block + .lineup_block):not(.rounded) { border-radius: 10px 10px 0 0; } .legion-loq-product .lineup_copy { font-size: 16px; line-height: 1.81; letter-spacing: 0em; } .legion-loq-product .lineup_copy .font-small { font-size: 14px; } .legion-loq-product .lineup_list { margin-top: 5.87vw; } .legion-loq-product .lineup_item { width: 81.33vw; padding: 16vw 3.73vw 8.53vw; } .legion-loq-product .lineup_item:not(:first-of-type) { margin-top: 4vw; } .legion-loq-product .lineup_item .hdg { margin-top: 5.33vw; font-size: 18px; } .legion-loq-product .lineup_item .txt { margin-top: 2.13vw; margin-bottom: 4.8vw; } .legion-loq-product .lineup_attn { top: 2.67vw; left: 2.67vw; width: 24vw; height: 24vw; font-size: 13px; line-height: 1.3; letter-spacing: 0em; } .legion-loq-product .lineup_attn .font-small { font-size: 11px; } .legion-loq-product .lineup_img img { height: 49.07vw; } .legion-loq-product .lineup_link { width: 65.33vw; padding: 5.87vw 0; font-size: 4.27vw; border-radius: 8vw; } .legion-loq-product .lineup_link::after { right: 5.33vw; width: 2.67vw; height: 2.67vw; } } .legion-loq-product .support { padding-top: 100px; color: #fff; } .legion-loq-product .support_block { position: relative; width: min(86%, 1100px); margin: 0 auto; padding: 50px 66px; background: linear-gradient(90deg, #254187, #4869bd 45%, transparent 65%), url(https://p2-ofp.static.pub/ShareResource/JPResource/JP-Images/content-page/legion-portal/product/support_bg_pc.jpg) no-repeat right center/contain; } .legion-loq-product .support_ttl { width: min(100%, 622px); } .legion-loq-product .support_copy { margin-top: 20px; font-weight: bold; font-size: 22px; line-height: 1.54; letter-spacing: 0em; } .legion-loq-product .support_txt { margin-top: 8px; font-size: 14px; line-height: 1.71; letter-spacing: 0em; } .legion-loq-product .support .btn { display: block; text-align: center; width: 220px; margin-top: 28px; font-weight: bold; color: #000; font-size: 16px; line-height: 1; letter-spacing: 0em; background: #fff; border-radius: 2.2vw; } .legion-loq-product .support .btn::after { content: ""; opacity: 0; position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: block; width: 100%; height: 100%; background: #fff; transition: .3s; } .legion-loq-product .support .btn:hover { opacity: 1; } .legion-loq-product .support .btn:hover::after { opacity: .3; } .legion-loq-product .support .btn span { position: relative; display: block; padding: 17px 0; } .legion-loq-product .support .btn span::after { content: ""; position: absolute; top: 0; right: 20px; bottom: 0; display: block; width: 10px; height: 10px; margin: auto; border-top: 2px solid #000; border-right: 2px solid #000; transform: rotate(45deg); } @media (max-width: 768px) { .legion-loq-product .support { padding-top: 13.33vw; } .legion-loq-product .support_block { width: 92vw; padding: 68.8vw 6.67vw 10.67vw; background: #264086 url(https://p2-ofp.static.pub/ShareResource/JPResource/JP-Images/content-page/legion-portal/product/support_bg_sp.jpg) no-repeat center top/contain; } .legion-loq-product .support_ttl { width: 70.93vw; } .legion-loq-product .support_copy { margin-top: 2.13vw; font-size: 16px; line-height: 1.62; letter-spacing: 0em; } .legion-loq-product .support_txt { margin-top: 8px; font-size: 13px; line-height: 1.76; letter-spacing: 0em; } .legion-loq-product .support .btn { margin: 6.67vw auto 0; width: 58.67vw; border-radius: 6.67vw; } .legion-loq-product .support .btn span { padding: 4.53vw 0; } } .legion-loq-product .banner { margin-top: 122px; } .legion-loq-product .banner_list { display: flex; align-items: self-start; justify-content: center; } .legion-loq-product .banner_item { width: 540px; overflow: hidden; } @media (min-width: 769px) { .legion-loq-product .banner_item:not(:first-of-type) { margin-left: 20px; } } @media (max-width: 768px) { .legion-loq-product .banner { margin-top: 13.33vw; } .legion-loq-product .banner_list { flex-direction: column; align-items: center; } .legion-loq-product .banner_item { width: 92vw; } .legion-loq-product .banner_item:not(:first-of-type) { margin-top: 5.87vw; } }