@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@700;@900&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,300;0,700;1,700&display=swap"); .p-speedio-about-bg { background-color: #2a2ac3; left: 0; position: absolute; top: 100vh; width: 100%; z-index: 1 } .p-speedio-about { display: flex; flex-wrap: wrap; position: relative; z-index: 3 } .p-speedio-about .logo-wrapper-after { height: 100vh; position: relative; width: 100vw } .p-speedio-about .logo-wrapper-after .logo-after { position: absolute; top: -50vh } .p-speedio-about .black-trigger { height: 100%; width: 100% } .p-speedio-about .logo-blue-wrapper { height: 100vh; position: relative; width: 100% } .p-speedio-about .logo-blue-wrapper .logo-blue { display: block; left: 10%; margin: 0 auto; position: absolute; text-align: center; top: 50%; width: 80% } .p-speedio-about .machine-wrapper { align-items: center; display: flex; height: 50vh; justify-content: center; position: relative; width: 100%; z-index: 1 } .p-speedio-about .machine-wrapper .machine { height: auto; -webkit-mask-position: -200% 0; mask-position: -200% 0; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 150% 100%; mask-size: 150% 100%; opacity: 0; overflow: hidden; position: relative; transform: scale(.9); z-index: 2 } html.-ie .p-speedio-about .machine-wrapper .machine { opacity: 0 } .p-speedio-about .machine-wrapper .machine img { height: auto; width: 100% } .p-speedio-about .machine-wrapper .machine-base { height: 100%; left: 0; opacity: 1; position: absolute; top: 0; width: 100% } .p-speedio-about .machine-wrapper .machine-base_inner { height: 100%; left: 0; position: relative; top: 0; width: 100% } .p-speedio-about .machine-wrapper .machine-base-img { height: 100%; left: 0; position: absolute; top: 0; width: 100% } .p-speedio-about .machine-wrapper .machine-base-img.under { opacity: 0; z-index: 1 } .p-speedio-about .machine-wrapper .machine-parts { height: 100%; left: 0; overflow: hidden; position: absolute; top: 0; transform: translate3d(0, 110%, 0); width: 20% } .p-speedio-about .machine-wrapper .machine-parts-inner { height: 100%; left: 0; position: relative; top: 0; width: 500% } .p-speedio-about .machine-wrapper .machine-parts:nth-child(2) { left: 20% } .p-speedio-about .machine-wrapper .machine-parts:nth-child(2) .machine-parts-inner { left: -100% } .p-speedio-about .machine-wrapper .machine-parts:nth-child(3) { left: 40% } .p-speedio-about .machine-wrapper .machine-parts:nth-child(3) .machine-parts-inner { left: -200% } .p-speedio-about .machine-wrapper .machine-parts:nth-child(4) { left: 60% } .p-speedio-about .machine-wrapper .machine-parts:nth-child(4) .machine-parts-inner { left: -300% } .p-speedio-about .machine-wrapper .machine-parts:nth-child(5) { left: 80% } .p-speedio-about .machine-wrapper .machine-parts:nth-child(5) .machine-parts-inner { left: -400% } .p-speedio-about .machine-wrapper .bg-line { height: 100vh; left: 0; opacity: 0; position: absolute; top: 0; top: -25vh; width: 100% } .p-speedio-about .machine-wrapper .bg-line.-view { opacity: 1 } .p-speedio-about .machine-wrapper .bg-line-inner { height: 100%; left: 0; overflow: hidden; position: relative; top: 0; width: 100% } .p-speedio-about .machine-wrapper .bg-line .line { background-color: #636363; height: 100%; position: absolute; top: 0; transform: translate3d(0, -110%, 0); width: 1px } .p-speedio-about .machine-wrapper .bg-line .line:first-child { left: 20% } .p-speedio-about .machine-wrapper .bg-line .line:nth-child(2) { left: 40% } .p-speedio-about .machine-wrapper .bg-line .line:nth-child(3) { left: 60% } .p-speedio-about .machine-wrapper .bg-line .line:nth-child(4) { left: 80% } .p-speedio-about .machine-wrapper .bg-line .line-inner { height: 100%; left: 0; position: relative; top: 0; width: 100% } @keyframes aboutBgLineColor { 0% { opacity: 1; transform: translate3d(0, -50vh, 0) } 35% { opacity: 1; transform: translate3d(0, -50vh, 0) } 50% { opacity: 1; transform: translate3d(0, 50vh, 0) } 65% { opacity: 0; transform: translate3d(0, 150vh, 0) } to { opacity: 0; transform: translate3d(0, 150vh, 0) } } .p-speedio-about .machine-wrapper .bg-line .line-color { background-color: #3006e3; box-shadow: 0 0 17px #3006e3; left: 0; position: absolute; top: 0; transform: translate3d(0, -50vh, 0); width: 100% } .p-speedio-about .machine-wrapper .bg-panel { bottom: 0; height: auto; left: 0; margin: auto; position: absolute; right: 0; top: 0; width: auto } .p-speedio-about .machine-wrapper .bg-panel-inner { align-items: center; display: flex; flex-wrap: wrap; justify-content: space-between; left: 0; width: 100% } .p-speedio-about .machine-wrapper .bg-panel-inner, .p-speedio-about .machine-wrapper .bg-panel .cpanel { height: 100%; overflow: hidden; position: relative; top: 0 } .p-speedio-about .machine-wrapper .bg-panel .panel-inner { height: 100%; left: 0; position: relative; top: 0; width: 100% } .p-speedio-about .machine-wrapper .bg-panel .panel-color { background-color: #2a2ac3; height: 100%; left: 0; opacity: 0; position: absolute; top: 0; transform: translate3d(0, -110%, 0); width: 100% } .p-speedio-about .bg-black { padding-bottom: 50vh; width: 100%; z-index: 1 } .p-speedio-about .bg-black .about-text { align-items: center; color: #f5f5f5; display: flex; flex-direction: column; font-family: Hiragino Kaku Gothic ProN, Meiryo, sans-serif; height: 100vh; justify-content: center; line-height: 2.5; opacity: 0; text-align: center; width: 100% } .p-speedio-about .bg-black .about-text.copy img { height: auto; width: 100% } .p-speedio-about .bg-black .about-text.lead { color: #f5f5f5; line-height: 2.1; text-align: center } .p-speedio-about .bg-black .about-text.lead .lead-main { position: relative } .p-speedio-about .bg-black .about-text.lead .lead-sub { display: block; position: relative } .p-speedio-about .bg-black .about-text.lead img { height: auto; width: 100% } .p-speedio-about .bg-black .about-text span { display: block } .p-speedio-bg-logo { height: 50vh; left: 0; pointer-events: none; position: absolute; top: 0; width: 100%; z-index: 1 } .p-speedio-bg-logo-inner { align-items: center; display: block; display: flex; height: 100%; justify-content: center; position: relative; width: 100% } .p-speedio-bg-logo .logo-fix { transition-duration: 1s; transition-property: all; transition-timing-function: cubic-bezier(.23, 1, .32, 1) } .p-speedio-bg-logo .logo-fix .cpanel { align-items: center; display: flex; flex-wrap: wrap; height: 100%; justify-content: space-between; left: 0; overflow: hidden; position: absolute; top: 0; width: 100% } .p-speedio-bg-logo .logo-fix .cpanel-child { background-color: #2a2ac3; height: 100%; width: 25% } .p-speedio-bg-logo .logo-fix svg { height: auto; width: 100% } .p-speedio-bg-logo .logo-fix svg path { fill: transparent; stroke: #fff; stroke-width: 1px } .p-speedio-bg-logo .logo-fix svg path.-n1 { opacity: .3 } .p-speedio-bg-logo .logo-fix svg path.-n2 { opacity: .6 } .p-speedio-bg-logo-wrapper { height: 100vh; left: 0; padding-top: 16.25rem; pointer-events: none; position: absolute; top: 0; width: 100%; z-index: 0 } .p-speedio-bg-logo-wrapper-inner { display: block; height: 100%; position: relative; width: 100% } .p-speedio-bg-logo-wrapper .logo { align-items: center; display: flex; flex-wrap: wrap; justify-content: space-between; left: 0; opacity: .5; position: absolute; top: 0; width: 468.75rem; z-index: 1 } .p-speedio-bg-logo-wrapper .logo img { height: auto; width: 50% } .p-speedio-bg-logo-wrapper-after { height: 100vh; left: 0; pointer-events: none; position: fixed; top: 0; width: 100%; z-index: 2 } .p-speedio-bg-logo-wrapper-after-inner { display: block; height: 100%; position: relative; width: 100% } .p-speedio-bg-logo-wrapper-after .mask { height: 100%; left: 0; overflow: hidden; position: absolute !important; top: 100vh; width: 100% } .p-speedio-bg-logo-wrapper-after .mask .logo-after { align-items: center; display: flex; flex-wrap: wrap; justify-content: space-between; left: 0; position: absolute; top: calc(-100% + 16.25rem); width: 468.75rem; will-change: transform; z-index: 1 } .p-speedio-bg-logo-wrapper-after .mask .logo-after img { height: auto; width: 50% } .p-speedio-bg-logo-wrapper-after .mask .logo-after .logo-after-fix { display: block; position: relative; transform-origin: center right; width: 50%; will-change: transform } .p-speedio-bg-logo-wrapper-after .mask .logo-after .logo-after-fix svg { height: auto; width: 100% } .p-speedio-section-cn { position: relative; z-index: 1 } .p-speedio-section-cn .cn-wrapper .cn-left { align-items: center; display: flex; justify-content: center; overflow: hidden; position: relative } .p-speedio-section-cn .cn-wrapper .cn-left:hover { opacity: 1 } .p-speedio-section-cn .cn-wrapper .cn-left:hover .cn-left-bg { opacity: .8; transform: scale(1.1) } .p-speedio-section-cn .cn-wrapper .cn-left .cn-left-bg { height: 100%; position: absolute; transition: .3s; width: 100% } .p-speedio-section-cn .cn-wrapper .cn-left .cn-left-bg img { height: 100%; width: auto } .p-speedio-section-cn .cn-wrapper .cn-left .left-text-wrapper { pointer-events: none; transition: .5s; z-index: 1 } .p-speedio-section-cn .cn-wrapper .cn-left .left-text-wrapper .cn-left-text img { height: auto; width: 100% } .p-speedio-section-cn .cn-wrapper .cn-right { background-color: #000; display: flex; flex-direction: column; justify-content: center; text-align: center; width: 50% } .p-speedio-section-cn .cn-wrapper .cn-right .cn-right-wrapper { align-items: center; display: flex; flex-direction: column } .p-speedio-section-cn .cn-wrapper .cn-right .cn-right-wrapper .cn-right-title { color: #66ccff; /* #52e233 --> #66ccff 20250602 Togashi */ line-height: 1 } .p-speedio-section-cn .cn-wrapper .cn-right .cn-right-wrapper .cn-right-text { color: #fff; text-align: left } .p-speedio-section-cn .cn-wrapper .cn-right .cn-right-wrapper .cn-button { align-items: center; color: #fff; display: inline-block; display: flex; font-family: Roboto Condensed, Hiragino Kaku Gothic ProN, Meiryo, sans-serif; font-weight: 300; justify-content: center; letter-spacing: .2em; opacity: 1 !important; overflow: hidden; position: relative } .p-speedio-section-cn .cn-wrapper .cn-right .cn-right-wrapper .cn-button .text { position: relative; z-index: 1 } .p-speedio-section-cn .cn-wrapper .cn-right .cn-right-wrapper .cn-button .line { background-color: #37a0da; /* #2c9614 --> #37a0da 20250602 Togashi */ display: block; height: 100%; left: 0; position: absolute; top: 0; width: 100% } .p-speedio-detail-inner { height: 100%; left: 0; position: relative; top: 0; width: 100% } .p-speedio-detail-list { margin-left: auto; margin-right: auto; position: relative; z-index: 1 } .p-speedio-detail-list .detail { align-items: center; color: #f0f0f0; display: flex; justify-content: center; opacity: 0; position: relative; width: 100% } .p-speedio-detail-list .detail-inner { height: 100%; left: 0; position: relative; top: 0; width: 100% } .p-speedio-detail-list .detail-head { position: relative; z-index: 1 } .p-speedio-detail-list .detail-head-cover { align-items: center; display: flex; flex-wrap: wrap; height: 100%; justify-content: space-between; left: 0; pointer-events: none; position: absolute; top: 0; width: 100%; z-index: 1 } .p-speedio-detail-list .detail-head-cover-child { background-color: #2a2ac3; height: 100%; position: relative; transform: translate3d(0, -110%, 0); width: 20% } .p-speedio-detail-list .detail-head-line { height: 100%; left: 0; opacity: 0; overflow: hidden; position: absolute; top: 0; width: 100% } .p-speedio-detail-list .detail-head-line-color { background-color: #2a2ac3; height: 100%; left: 0; position: relative; top: 0; transform: translate3d(0, -110%, 0); width: 100% } .p-speedio-detail-list .detail-head-title { display: flex; overflow: hidden; position: relative } .p-speedio-detail-list .detail-head-title-no { font-family: Roboto Condensed, Hiragino Kaku Gothic ProN, Meiryo, sans-serif; font-style: italic; font-weight: 700; line-height: 1.3214285714; opacity: 0; position: relative } .p-speedio-detail-list .detail-head-title-no img { height: auto; width: 100% } .p-speedio-detail-list .detail-head-title-text { align-items: center; color: #e8e2ff; display: flex; font-weight: 600; letter-spacing: .1em; line-height: 1.3214285714; opacity: 0; overflow: hidden; position: relative } .p-speedio-detail-list .detail-head-text { color: #f5f5f5; letter-spacing: .1em; line-height: 1.7142857143; overflow: hidden; position: relative } .p-speedio-detail-list .detail-head-text-content { opacity: 0 } .p-speedio-detail-list .detail-body { position: relative; z-index: 1 } .p-speedio-detail-list .detail-body-content { left: 0; opacity: 0; position: absolute; top: 0 } .p-speedio-detail-list .detail-body-content.-current { opacity: 1 } .p-speedio-detail-list .detail-body-content .title { color: #f5f5f5; font-weight: 600; line-height: 1.6818181818; opacity: 0 } .p-speedio-detail-list .detail-body-content .text { color: #f5f5f5; letter-spacing: .1em; line-height: 1.625; opacity: 0 } .p-speedio-detail-list .detail-body-content .line_inner { height: 100%; overflow: hidden; width: 0 } .p-speedio-detail-list .detail-image { opacity: 0 } .p-speedio-detail-list .detail-image-inner { height: 100%; left: 0; position: relative; top: 0; width: 100% } .p-speedio-detail-list .detail-image-inner .img { height: 100%; left: 0; left: auto; opacity: 0; position: absolute; right: 0; top: 0; width: 100% } .p-speedio-detail-list .detail-image-inner .img.-current { opacity: 1 } .p-speedio-detail-list .detail-image-inner .img img { height: auto; width: 100% } .p-speedio-detail-bg { height: 100%; left: 0; pointer-events: none; position: fixed; top: 0; width: 100% } .p-speedio-detail-bg .img { height: 100%; left: 0; opacity: 0; position: absolute; top: 0; width: 100% } .p-speedio-detail-bg .img img { display: block; font-family: "object-fit:cover"; height: 100%; object-fit: cover; width: 100% } .p-speedio-header { position: fixed; transition-duration: 1s; transition-property: all; transition-timing-function: cubic-bezier(.23, 1, .32, 1); z-index: 9999 } .p-speedio-header .name { opacity: 0 } .p-speedio-header .name img { height: auto; width: 100% } .p-speedio-lineup { background-color: #fff; flex-wrap: wrap; z-index: 1 } .p-speedio-lineup, .p-speedio-lineup .lineup-title { align-items: center; display: flex; justify-content: center; position: relative } .p-speedio-lineup .lineup-title { background-color: #000; flex-direction: column; overflow: hidden; width: 100%; z-index: -2 } .p-speedio-lineup .lineup-title .lineup-title-text { color: #fff; font-family: Roboto Condensed, Hiragino Kaku Gothic ProN, Meiryo, sans-serif; font-weight: 700 } .p-speedio-lineup .lineup-title .lineup-title-text img { height: auto; width: 100% } .p-speedio-lineup .lineup-title .lineup-mv { position: absolute; z-index: -1 } .p-speedio-lineup .lineup-title .lineup-mv img { height: auto; width: 100% } .p-speedio-lineup .p-speedio-lineup-list-wrapper { align-items: center; background-color: #fafafa; display: flex; height: auto; justify-content: center; width: 100% } .p-speedio-lineup .p-speedio-lineup-list-wrapper .p-speedio-category-list { align-items: center; display: flex; flex-wrap: wrap; justify-content: center; width: 100% } .p-speedio-lineup .p-speedio-lineup-list-wrapper .p-speedio-category-list .p-speedio-category-item { width: 100% } .p-speedio-lineup .p-speedio-lineup-list-wrapper .p-speedio-category-list .p-speedio-category-item .p-speedio-list-head { display: flex; width: 100% } .p-speedio-lineup .p-speedio-lineup-list-wrapper .p-speedio-category-list .p-speedio-category-item .p-speedio-list-head .head-item { align-items: center; display: flex } .p-speedio-lineup .p-speedio-lineup-list-wrapper .p-speedio-category-list .p-speedio-category-item .p-speedio-list-head .head-item .model-initial { color: #4b4b4b } .p-speedio-lineup .p-speedio-lineup-list-wrapper .p-speedio-category-list .p-speedio-category-item .p-speedio-list-head .head-item .model-initial img { height: 100%; width: auto } .p-speedio-lineup .p-speedio-lineup-list-wrapper .p-speedio-category-list .p-speedio-category-item .p-speedio-list-head .head-item .model-name { font-weight: 600; letter-spacing: .06em; line-height: 1.2857142857 } .p-speedio-lineup .p-speedio-lineup-list-wrapper .p-speedio-category-list .model-list { display: flex } .p-speedio-lineup .p-speedio-lineup-list-wrapper .p-speedio-category-list .model-list .p-speedio-list-item { overflow: hidden; position: relative } .p-speedio-lineup .p-speedio-lineup-list-wrapper .p-speedio-category-list .model-list .p-speedio-list-item .model-number { align-items: center; color: #4b4b4b; display: flex; width: auto } .p-speedio-lineup .p-speedio-lineup-list-wrapper .p-speedio-category-list .model-list .p-speedio-list-item .model-img-wrapper { align-items: center; display: flex; justify-content: center; width: 100% } .p-speedio-lineup .p-speedio-lineup-list-wrapper .p-speedio-category-list .model-list .p-speedio-list-item .model-img-wrapper .model-img { width: auto } .p-speedio-lineup .p-speedio-lineup-list-wrapper .p-speedio-category-list .model-list .p-speedio-list-item .coverBtn { background-color: #2a2ac3; height: 2.5rem; position: absolute; right: 0; top: 0; width: 2.5rem; z-index: 2 } html.-ipad .p-speedio-lineup .p-speedio-lineup-list-wrapper .p-speedio-category-list .model-list .p-speedio-list-item .coverBtn { display: block } .p-speedio-lineup .p-speedio-lineup-list-wrapper .p-speedio-category-list .model-list .p-speedio-list-item .coverBtn-inner { display: block; height: 100%; position: relative; width: 100% } .p-speedio-lineup .p-speedio-lineup-list-wrapper .p-speedio-category-list .model-list .p-speedio-list-item .coverBtn-inner .line { bottom: 0; height: 1px; left: 0; margin: auto; position: absolute; right: 0; top: 0; width: 1.0625rem } .p-speedio-lineup .p-speedio-lineup-list-wrapper .p-speedio-category-list .model-list .p-speedio-list-item .coverBtn-inner .line-color { background-color: #e7e7e7; display: block; height: 100%; width: 100% } .p-speedio-lineup .p-speedio-lineup-list-wrapper .p-speedio-category-list .model-list .p-speedio-list-item .coverBtn-inner .line:last-child { transform: rotate(90deg) } .p-speedio-lineup .p-speedio-lineup-list-wrapper .p-speedio-category-list .model-list .p-speedio-list-item .cover { height: 100%; left: 0; pointer-events: none; position: absolute; top: 0; width: 100%; z-index: 3 } .p-speedio-lineup .p-speedio-lineup-list-wrapper .p-speedio-category-list .model-list .p-speedio-list-item .cover.-view { pointer-events: all } .p-speedio-lineup .p-speedio-lineup-list-wrapper .p-speedio-category-list .model-list .p-speedio-list-item .cover-inner { display: block; height: 100%; overflow: hidden; position: relative; width: 100% } .p-speedio-lineup .p-speedio-lineup-list-wrapper .p-speedio-category-list .model-list .p-speedio-list-item .cover-info { position: relative; width: 100%; z-index: 1 } .p-speedio-lineup .p-speedio-lineup-list-wrapper .p-speedio-category-list .model-list .p-speedio-list-item .cover-info-name, .p-speedio-lineup .p-speedio-lineup-list-wrapper .p-speedio-category-list .model-list .p-speedio-list-item .cover-info-text { color: #fff; letter-spacing: .1em } .p-speedio-lineup .p-speedio-lineup-list-wrapper .p-speedio-category-list .model-list .p-speedio-list-item .cover-info-name { line-height: 1 } .p-speedio-lineup .p-speedio-lineup-list-wrapper .p-speedio-category-list .model-list .p-speedio-list-item .cover-info-text { line-height: 1.75; text-align: left } .p-speedio-lineup .p-speedio-lineup-list-wrapper .p-speedio-category-list .model-list .p-speedio-list-item .cover-button { opacity: 1 !important; position: relative; z-index: 1 } .p-speedio-lineup .p-speedio-lineup-list-wrapper .p-speedio-category-list .model-list .p-speedio-list-item .cover-button .text { color: #fff; font-family: Roboto Condensed, Hiragino Kaku Gothic ProN, Meiryo, sans-serif; font-weight: 300; letter-spacing: .1em; line-height: 1; position: relative; z-index: 1 } .p-speedio-lineup .p-speedio-lineup-list-wrapper .p-speedio-category-list .model-list .p-speedio-list-item .cover-button .line { height: 100%; left: 0; overflow: hidden; position: absolute; top: 0; width: 100% } .p-speedio-lineup .p-speedio-lineup-list-wrapper .p-speedio-category-list .model-list .p-speedio-list-item .cover-button .line-color { background-color: #2a2ac3; height: 100%; left: 0; position: absolute; top: 0; transition-duration: .6s; transition-property: all; transition-timing-function: cubic-bezier(.23, 1, .32, 1); width: 100% } .p-speedio-lineup .p-speedio-lineup-list-wrapper .p-speedio-category-list .model-list .p-speedio-list-item .cover-close { height: 2.53125rem; position: absolute; right: 0; top: 0; width: 2.53125rem; z-index: 2 } html.-ipad .p-speedio-lineup .p-speedio-lineup-list-wrapper .p-speedio-category-list .model-list .p-speedio-list-item .cover-close { display: block } .p-speedio-lineup .p-speedio-lineup-list-wrapper .p-speedio-category-list .model-list .p-speedio-list-item .cover-close-inner { display: block; height: 100%; position: relative; width: 100% } .p-speedio-lineup .p-speedio-lineup-list-wrapper .p-speedio-category-list .model-list .p-speedio-list-item .cover-close-inner .line { bottom: 0; height: 1px; left: 0; margin: auto; position: absolute; right: 0; top: 0; width: 1.09375rem } .p-speedio-lineup .p-speedio-lineup-list-wrapper .p-speedio-category-list .model-list .p-speedio-list-item .cover-close-inner .line-color { background-color: #e7e7e7; display: block; height: 100%; width: 100% } .p-speedio-lineup .p-speedio-lineup-list-wrapper .p-speedio-category-list .model-list .p-speedio-list-item .cover-close-inner .line:first-child { transform: rotate(45deg) } .p-speedio-lineup .p-speedio-lineup-list-wrapper .p-speedio-category-list .model-list .p-speedio-list-item .cover-close-inner .line:last-child { transform: rotate(-45deg) } .p-speedio-lineup .p-speedio-lineup-list-wrapper .p-speedio-category-list .model-list .p-speedio-list-item .cover-bg { background-color: #0c0c0c; height: 100%; left: 0; opacity: .95; position: absolute; top: 0; width: 100% } .p-speedio-lineup .p-speedio-lineup-list-wrapper .p-speedio-category-list .speedio-list-col4 { width: 100% } .p-speedio-section-support { background-color: #121212; position: relative; z-index: 1 } .p-speedio-section-support .card-wrapper { align-items: center; display: flex; height: 100%; justify-content: center; margin: 0 auto } .p-speedio-section-support .card-wrapper .card { display: flex; flex-direction: column; position: relative } .p-speedio-section-support .card-wrapper .card:last-child { margin-right: 0 } .p-speedio-section-support .card-wrapper .card a { opacity: 1 !important } .p-speedio-section-support .card-wrapper .card .card-img { height: auto; width: 100% } .p-speedio-section-support .card-wrapper .card .card-text { background-color: #fafafa; display: flex; flex-direction: column; justify-content: center; overflow: hidden; position: relative; text-align: center } .p-speedio-section-support .card-wrapper .card .card-text:after { border-color: transparent transparent transparent #2423da; border-style: solid; content: ""; height: 0; position: absolute; width: 0; z-index: 1 } .p-speedio-section-support .card-wrapper .card .card-text .card-content, .p-speedio-section-support .card-wrapper .card .card-text .card-title, .p-speedio-section-support .card-wrapper .card .card-text:after { transition-duration: .6s; transition-property: all; transition-timing-function: cubic-bezier(.23, 1, .32, 1) } .p-speedio-section-support .card-wrapper .card .card-text .card-title { color: #0f100f; display: block; font-weight: 600; letter-spacing: .1em; position: relative; z-index: 1 } .p-speedio-section-support .card-wrapper .card .card-text .card-content { color: #4b4b4b; display: block; letter-spacing: .1em; position: relative; z-index: 1 } .p-speedio-section-support .card-wrapper .card .card-panel { align-items: center; display: flex; flex-wrap: wrap; height: 100%; justify-content: space-between; left: 0; position: absolute; top: 0; width: 110% } html.-ipad .p-speedio-section-support .card-wrapper .card .card-panel { display: none } .p-speedio-section-support .card-wrapper .card .card-panel-child { background-color: #2423da; height: 100%; left: 0; position: relative; top: 0; width: 100% } .p-speedio-section-support .card-wrapper .card a.-hover { opacity: 1 !important } .p-speedio-section-support .card-wrapper .card a.-hover .card-text:after { border-color: transparent transparent transparent #f0f0f0 } .p-speedio-section-support .card-wrapper .card a.-hover .card-text .card-content, .p-speedio-section-support .card-wrapper .card a.-hover .card-text .card-title { color: #f0f0f0 } .p-speedio-topview { height: 100vh; overflow: hidden; position: absolute; width: 100% } .p-speedio-topview .patern { background-position: 0 0; background-repeat: repeat; height: 100%; left: 0; opacity: .5; position: absolute; top: 0; width: 100% } .p-speedio-topview .patern img { display: block } .p-speedio-topview .patern img, .p-speedio-topview .top-movie { font-family: "object-fit:cover"; height: 100%; object-fit: cover; width: 100% } .p-speedio-topview .top-movie { position: relative } .p-speedio-topview .cover-panel { height: 100%; left: 0; position: absolute; top: 0; top: 120%; width: 100%; z-index: 3 } .p-speedio-topview .cover-panel-inner { align-items: center; display: flex; flex-wrap: wrap; height: 100%; justify-content: space-between; left: 0; position: relative; top: 0; width: 100% } .p-speedio-topview .cover-panel-inner .cpanel { background-color: #2a2ac3; height: 100%; position: relative; width: 20% } .p-speedio-topview .cover-panel-inner .cpanel:first-child { top: -20% } html.-ipad .p-speedio-topview .cover-panel-inner .cpanel:first-child { top: -10% } .p-speedio-topview .cover-panel-inner .cpanel:nth-child(2) { top: -5% } .p-speedio-topview .cover-panel-inner .cpanel:nth-child(3) { top: -10% } .p-speedio-topview .cover-panel-inner .cpanel:nth-child(4) { top: -15% } html.-ipad .p-speedio-topview .cover-panel-inner .cpanel:nth-child(4) { top: -7% } .p-speedio-topview .cover-panel-inner .cpanel:nth-child(5) { top: -8% } .p-speedio-topview .content { align-items: center; display: flex; height: 100%; justify-content: center; position: absolute; top: 0; width: 100% } .p-speedio-topview .content .copy { color: #fff; font-family: Noto Sans JP, sans-serif; font-weight: 900; z-index: 2 } .p-speedio-topview .content .copy svg { height: auto; width: 100% } .p-speedio-topview .content .copy-logo, .p-speedio-topview .content .copy-text { margin-left: auto; margin-right: auto; overflow: hidden; position: relative } .p-speedio-topview .content .copy .cpanel { align-items: center; display: flex; flex-wrap: wrap; height: 100%; justify-content: space-between; left: 0; position: absolute; top: 0; width: 110% } .p-speedio-topview .content .copy .cpanel-child { background-color: #2a2ac3; height: 100%; width: 20% } .p-speedio-topview .scrolldown { bottom: 0; overflow: hidden; z-index: 10 } .p-speedio-topview .scrolldown_inner { height: 100%; left: 0; overflow: hidden; position: relative; top: 0; width: 100% } .p-speedio-topview .scrolldown_inner .text { color: #f5f5f5; font-family: Roboto Condensed, Hiragino Kaku Gothic ProN, Meiryo, sans-serif; font-weight: 300; letter-spacing: .2em; line-height: 1; position: relative; text-align: center; width: 100% } .p-speedio-topview .scrolldown_inner .line { bottom: 0; left: 0; margin-left: auto; margin-right: auto; overflow: hidden; position: absolute; right: 0; width: 100% } .p-speedio-topview .scrolldown_inner .line_inner { background-color: #5d5e69; height: 100%; left: 0; margin-left: auto; margin-right: auto; position: relative; top: 0; width: 1px } @keyframes scrollDonwLine { 0% { opacity: 0; transform: translate3d(0, -200%, 0) } 30% { opacity: 0; transform: translate3d(0, -200%, 0) } 70% { opacity: 1 } 85% { opacity: 0; transform: translate3d(0, 700%, 0) } to { opacity: 0; transform: translate3d(0, 700%, 0) } } .p-speedio-topview .scrolldown_inner .line-color { background-color: #ff9212; left: -1px; position: absolute; top: 0; transform: translate3d(0, -200%, 0); width: 3px } .p-speedio-topview .scrolldown_inner .line-color.-show { animation: scrollDonwLine 1.9s ease-out infinite normal; animation-delay: .3s } .spacer { height: 100vh; margin-top: -145px } .section-detail .detail-container { background: linear-gradient(135deg, #555, #111) } .section-detail .detail-container .detail-list .detail-item { align-items: center; display: flex; height: 100vh; justify-content: center } .section-detail .detail-container .detail-list .detail-item .detail-content { height: 70%; position: relative; width: 70% } .section-detail .detail-container .detail-list .detail-item .detail-content h3 { color: #fff; font-size: 2rem } .section-detail .detail-container .detail-list .detail-item .detail-content svg { stroke: #fff; stroke-width: .5px; fill: none; bottom: 0; font-size: 200px; height: 300px; left: 0; position: absolute; width: 500px } .section-detail .detail-container .detail-list .detail-item .detail-content svg text { height: inherit; width: inherit } @media screen and (min-width:768px) { .p-speedio-about .machine-wrapper .machine { height: 34.375rem; width: 34.125rem } .p-speedio-about .machine-wrapper .bg-line .line-color { height: 1.5rem } .p-speedio-about .machine-wrapper .bg-panel { height: calc(100vh - 60px); width: 29rem } .p-speedio-about .machine-wrapper .bg-panel .cpanel { width: 8.375rem } .p-speedio-about .bg-black .about-text { font-size: 1rem } .p-speedio-about .bg-black .about-text.copy .copy-main { width: 18.75rem } .p-speedio-about .bg-black .about-text.lead .lead-main { left: .5rem; margin-bottom: 1.875rem; width: 16.875rem } .p-speedio-about .bg-black .about-text.lead .lead-sub { left: .4375rem; top: 1.375rem; width: 20.3125rem } .p-speedio-about .bg-black .about-text.lead svg { height: auto; width: 20.3125rem } .p-speedio-about .bg-black .about-text span.margin-bottom { margin-bottom: 3.75rem } .p-speedio-bg-logo .logo-fix { width: 80rem } .p-speedio-section-cn .cn-wrapper { display: flex; height: 36rem; width: 100% } .p-speedio-section-cn .cn-wrapper .cn-left { width: 50% } .p-speedio-section-cn .cn-wrapper .cn-left .left-text-wrapper .cn-left-text { width: 18.75rem } .p-speedio-section-cn .cn-wrapper .cn-right { align-items: center } .p-speedio-section-cn .cn-wrapper .cn-right .cn-right-wrapper { justify-content: center; padding-left: 1.0625rem } .p-speedio-section-cn .cn-wrapper .cn-right .cn-right-wrapper .cn-right-title .main { font-size: 2rem; letter-spacing: .04em; margin-bottom: 1.0625rem } .p-speedio-section-cn .cn-wrapper .cn-right .cn-right-wrapper .cn-right-title .sub { font-size: 1.125rem; letter-spacing: 0 } .p-speedio-section-cn .cn-wrapper .cn-right .cn-right-wrapper .cn-right-text { font-size: 1rem; line-height: 2.5; margin-top: 2.125rem; width: 20rem } .p-speedio-section-cn .cn-wrapper .cn-right .cn-right-wrapper .cn-button { font-size: 1rem; height: 2.5rem; left: .125rem; letter-spacing: .1em; margin-top: 2rem; width: 9.6875rem } .p-speedio-section-cn .cn-wrapper .cn-right .cn-right-wrapper .cn-button:hover .text { color: #37a0da /* #2c9614--> #37a0da 20250602 Togashi */ } .p-speedio-section-cn .cn-wrapper .cn-right .cn-right-wrapper .cn-button:hover .line { background-color: #fff } .p-speedio-section-cn .cn-wrapper .cn-right .cn-right-wrapper .cn-button .text { left: .0625rem; top: .0625rem } .p-speedio-section-cn .cn-wrapper .cn-right .cn-right-wrapper .cn-button .line, .p-speedio-section-cn .cn-wrapper .cn-right .cn-right-wrapper .cn-button .text { transition-duration: .6s; transition-property: all; transition-timing-function: cubic-bezier(.23, 1, .32, 1) } .p-speedio-detail-list { width: 62.5rem } .p-speedio-detail-list .detail { padding-bottom: 200vh; padding-left: 1.75rem; padding-top: 12.5rem } .p-speedio-detail-list .detail-head { margin-bottom: 6.5625rem; margin-left: .125rem; width: 50% } .p-speedio-detail-list .detail-head-line { height: 100%; width: .3125rem } .p-speedio-detail-list .detail-head-title { margin-bottom: .75rem; padding-left: 3.25rem } .p-speedio-detail-list .detail-head-title-no { left: -2.9375rem; margin-right: -2.5rem; top: -.625rem; width: 2.625rem } .p-speedio-detail-list .detail-head-title-text { font-size: 1.75rem; text-shadow: #3006e3 1px 0 15px; top: -.25rem } .p-speedio-detail-list .detail-head-text { font-size: .875rem; padding-left: 3.5rem } .p-speedio-detail-list .detail-body { width: 100% } .p-speedio-detail-list .detail-body-content { box-sizing: border-box; padding-left: 3.75rem; width: 100% } .p-speedio-detail-list .detail-body-content .title { font-size: 1.375rem; letter-spacing: .05em; margin-bottom: .625rem } .p-speedio-detail-list .detail-body-content .text { font-size: 1rem } .p-speedio-detail-list .detail-body-content .line { left: 5rem; position: absolute } .p-speedio-detail-list .detail-image { position: absolute; right: 0; top: 0; width: 50% } .p-speedio-detail-list .detail-image-inner .img { height: 29.25rem; width: 32rem } .p-speedio-detail-no0 .detail-body-content.no1 .line { bottom: -1.125rem; height: 4.3125rem; left: 3.75rem; width: 33.75rem } .p-speedio-detail-no0 .detail-body-content.no1 .line svg { height: 4.3125rem; width: 40.25rem } .p-speedio-detail-no0 .detail-body-content.no2 { padding-left: 3.4375rem } .p-speedio-detail-no0 .detail-body-content.no2 .line { bottom: -.875rem; height: 1.625rem; left: 3.75rem; width: 33.75rem } .p-speedio-detail-no0 .detail-body-content.no2 .line svg { height: 1.625rem; width: 34.3125rem } .p-speedio-detail-no0 .detail-image .img-no1 { right: -1.375rem; top: -4.375rem } .p-speedio-detail-no0 .detail-image .img-no2 { right: -1.25rem; top: -4.25rem } .p-speedio-detail-no1 .detail-body-content.no1 .line { bottom: -.875rem; height: 1.625rem; left: 3.75rem; width: 33.75rem } .p-speedio-detail-no1 .detail-body-content.no1 .line svg { height: 1.625rem; width: 34.3125rem } .p-speedio-detail-no1 .detail-body-content.no2 .line { bottom: -.875rem; height: 1.625rem; left: 3.75rem; width: 33.75rem } .p-speedio-detail-no1 .detail-body-content.no2 .line svg { height: 1.625rem; width: 34.3125rem } .p-speedio-detail-no1 .detail-image .img-no1 { right: -1.375rem; top: -4.5625rem } .p-speedio-detail-no1 .detail-image .img-no2 { right: -1.5rem; top: -4.5rem } .p-speedio-detail-no2 .detail-body-content.no1 .line { bottom: -.875rem; height: 7.625rem; left: 3.75rem; width: 33.75rem } .p-speedio-detail-no2 .detail-body-content.no1 .line svg { height: 7.625rem; width: 39.3125rem } .p-speedio-detail-no2 .detail-body-content.no2 .line { bottom: -.875rem; height: 7.0625rem; left: 3.75rem; width: 33.75rem } .p-speedio-detail-no2 .detail-body-content.no2 .line svg { height: 7.0625rem; width: 39.3125rem } .p-speedio-detail-no2 .detail-image .img-no1, .p-speedio-detail-no2 .detail-image .img-no2 { right: -1.375rem; top: -4.5rem } .p-speedio-header { left: 1.25rem; top: 1.125rem } .p-speedio-header .name { margin-left: 1.25rem; margin-top: 1.25rem; width: 7.1875rem } .p-speedio-lineup .lineup-title { height: 23.75rem } .p-speedio-lineup .lineup-title .lineup-title-text { padding-top: 1.25rem; width: 14.125rem } .p-speedio-lineup .lineup-title .logo { margin-top: 2.875rem; width: 10.9375rem } .p-speedio-lineup .lineup-title .lineup-mv { bottom: -22.5rem; width: 34.25rem } .p-speedio-lineup .lineup-title + .p-speedio-lineup-list-wrapper { padding-top: 2.1875rem } .p-speedio-lineup .p-speedio-lineup-list-wrapper .p-speedio-category-list { margin-left: 1.25rem; margin-right: 1.25rem } .p-speedio-lineup .p-speedio-lineup-list-wrapper .p-speedio-category-list .p-speedio-category-item { margin-bottom: 2.25rem } .p-speedio-lineup .p-speedio-lineup-list-wrapper .p-speedio-category-list .p-speedio-category-item .p-speedio-list-head { height: 4.5rem } .p-speedio-lineup .p-speedio-lineup-list-wrapper .p-speedio-category-list .p-speedio-category-item .p-speedio-list-head .head-item .model-initial { font-size: 2.625rem; height: 1.875rem; margin-left: 1.5625rem } .p-speedio-lineup .p-speedio-lineup-list-wrapper .p-speedio-category-list .p-speedio-category-item .p-speedio-list-head .head-item .model-name { font-size: 1rem; margin-left: 1.5625rem } .p-speedio-lineup .p-speedio-lineup-list-wrapper .p-speedio-category-list .model-list .p-speedio-list-item { background-color: #e7e7e7; height: 20.625rem; margin: 1px; opacity: 1 !important; transition-duration: .6s; transition-property: all; transition-timing-function: cubic-bezier(.23, 1, .32, 1); width: 100% } .p-speedio-lineup .p-speedio-lineup-list-wrapper .p-speedio-category-list .model-list .p-speedio-list-item:last-child { margin-right: 0 } .p-speedio-lineup .p-speedio-lineup-list-wrapper .p-speedio-category-list .model-list .p-speedio-list-item .model-number { height: 3.75rem; left: 1.25rem; position: absolute; top: 0 } .p-speedio-lineup .p-speedio-lineup-list-wrapper .p-speedio-category-list .model-list .p-speedio-list-item .model-img-wrapper { height: 20.625rem; position: relative; top: 1.25rem } .p-speedio-lineup .p-speedio-lineup-list-wrapper .p-speedio-category-list .model-list .p-speedio-list-item .model-img-wrapper .model-img { height: 16.875rem } .p-speedio-lineup .p-speedio-lineup-list-wrapper .p-speedio-category-list .model-list .p-speedio-list-item .coverBtn { display: none } .p-speedio-lineup .p-speedio-lineup-list-wrapper .p-speedio-category-list .model-list .p-speedio-list-item .cover-inner { text-align: center } .p-speedio-lineup .p-speedio-lineup-list-wrapper .p-speedio-category-list .model-list .p-speedio-list-item .cover-info { padding-top: 3.75rem } .p-speedio-lineup .p-speedio-lineup-list-wrapper .p-speedio-category-list .model-list .p-speedio-list-item .cover-info-name { font-size: 1.5rem; margin-bottom: 2.5rem; text-align: center } .p-speedio-lineup .p-speedio-lineup-list-wrapper .p-speedio-category-list .model-list .p-speedio-list-item .cover-info-text { font-size: 1rem; height: 8.4375rem; padding-left: 2.5rem; padding-right: 2.5rem } .p-speedio-lineup .p-speedio-lineup-list-wrapper .p-speedio-category-list .model-list .p-speedio-list-item .cover-button { align-items: center; display: flex; height: 1.5625rem; justify-content: center; margin-left: auto; margin-right: auto; width: 6.25rem } .p-speedio-lineup .p-speedio-lineup-list-wrapper .p-speedio-category-list .model-list .p-speedio-list-item .cover-button:hover .text { color: #2a2ac3 } .p-speedio-lineup .p-speedio-lineup-list-wrapper .p-speedio-category-list .model-list .p-speedio-list-item .cover-button:hover .line-color { background-color: #fff } .p-speedio-lineup .p-speedio-lineup-list-wrapper .p-speedio-category-list .model-list .p-speedio-list-item .cover-button .text { font-size: .875rem; margin-bottom: .375rem; top: .1875rem; transition-duration: .6s; transition-property: all; transition-timing-function: cubic-bezier(.23, 1, .32, 1) } .p-speedio-lineup .p-speedio-lineup-list-wrapper .p-speedio-category-list .model-list .p-speedio-list-item .cover-close { display: none } .p-speedio-lineup .p-speedio-lineup-list-wrapper .p-speedio-category-list .speedio-list-col1 { width: 25% } .p-speedio-lineup .p-speedio-lineup-list-wrapper .p-speedio-category-list .speedio-list-col2 { width: 50% } .p-speedio-lineup .p-speedio-lineup-list-wrapper .p-speedio-category-list .speedio-list-col3 { width: 75% } .p-speedio-section-support { height: 44.8125rem } .p-speedio-section-support .card-wrapper { width: 71.125rem } .p-speedio-section-support .card-wrapper .card { margin-right: .5rem; width: 35.25rem } .p-speedio-section-support .card-wrapper .card .card-text { height: 6.75rem } .p-speedio-section-support .card-wrapper .card .card-text:after { border-width: .25rem 0 .25rem .5625rem; right: 1.875rem } .p-speedio-section-support .card-wrapper .card .card-text .card-title { font-size: 1.125rem } .p-speedio-section-support .card-wrapper .card .card-text .card-content { font-size: .875rem; line-height: 2.2857142857; text-align: center } .p-speedio-topview .content .copy { margin-left: .5625rem; padding-top: 7.8125rem } .p-speedio-topview .content .copy-logo { margin-bottom: 1.25rem; width: 15.625rem } .p-speedio-topview .content .copy-text { width: 9.6875rem } .p-speedio-topview .scrolldown { height: 6.34375rem; left: 0; margin-left: auto; margin-right: auto; position: absolute; right: 0; width: 3.75rem } .p-speedio-topview .scrolldown_inner .text { font-size: .75rem; left: .0625rem } .p-speedio-topview .scrolldown_inner .line { height: 5.25rem } .p-speedio-topview .scrolldown_inner .line-color { box-shadow: 0 0 .625rem .625rem rgba(126, 72, 8, .25); height: 1.0625rem } } @media screen and (max-width:767px) { .p-speedio-about .machine-wrapper .machine { height: 17.40625rem; width: 17.1875rem } .p-speedio-about .machine-wrapper .bg-line .line-color { height: .75rem } .p-speedio-about .machine-wrapper .bg-panel { height: calc(100vh - 270px); width: 14.5rem } .p-speedio-about .machine-wrapper .bg-panel .cpanel { width: 4.1875rem } .p-speedio-about .bg-black .about-text { font-size: 1rem } .p-speedio-about .bg-black .about-text.copy .copy-main { width: 9.125rem } .p-speedio-about .bg-black .about-text.lead .lead-main { margin-bottom: 2.5rem; top: -1.6875rem; width: 11rem } .p-speedio-about .bg-black .about-text.lead .lead-sub { top: -2.03125rem; width: 14.2625rem } .p-speedio-about .bg-black .about-text.lead svg { height: auto; width: 13.75rem } .p-speedio-about .bg-black .about-text.end { align-items: flex-start; padding-left: 4.0625rem; padding-right: 4.0625rem; text-align: left } .p-speedio-about .bg-black .about-text span.margin-bottom { margin-bottom: 3.125rem } .p-speedio-section-cn .cn-wrapper .cn-left { height: 18.75rem; width: 100% } .p-speedio-section-cn .cn-wrapper .cn-left .left-text-wrapper .cn-left-text { width: 11.875rem } .p-speedio-section-cn .cn-wrapper .cn-right { height: 20.625rem; justify-content: flex-start; margin-left: auto; margin-right: auto; position: relative; top: -1.875rem; width: 19.0625rem } .p-speedio-section-cn .cn-wrapper .cn-right .cn-right-wrapper { justify-content: flex-start; padding-top: 2.75rem; /* 3.75rem --> 2.75rem 20250602 Togashi */ position: relative } .p-speedio-section-cn .cn-wrapper .cn-right .cn-right-wrapper .cn-right-title { margin-bottom: 1.09375rem } .p-speedio-section-cn .cn-wrapper .cn-right .cn-right-wrapper .cn-right-title .main { font-size: 1.375rem; letter-spacing: .1em; margin-bottom: .9375rem } .p-speedio-section-cn .cn-wrapper .cn-right .cn-right-wrapper .cn-right-title .sub { font-size: 1rem; letter-spacing: .05em } .p-speedio-section-cn .cn-wrapper .cn-right .cn-right-wrapper .cn-right-text { font-size: .875rem; line-height: 1.75; /* 1.75 --> 1.6 20250602 Togashi */ margin-bottom: 1rem; /* 2.4375rem --> 1rem 20250602 Togashi */ width: 18rem; /* 15rem --> 18rem 20250602 Togashi */ } .p-speedio-section-cn .cn-wrapper .cn-right .cn-right-wrapper .cn-button { font-size: 1rem; height: 3.125rem; line-height: 1; width: 10.625rem } .p-speedio-section-cn .cn-wrapper .cn-right .cn-right-wrapper .cn-button .text { top: .125rem } .p-speedio-section-cn .cn-wrapper .cn-right .cn-right-wrapper .cn-button .line { margin-top: .3125rem } .p-speedio-detail-list { margin-left: auto; margin-right: auto; width: 20.3125rem; width: 100% } .p-speedio-detail-list .detail { padding-bottom: 200vh; padding-top: 6.25rem } .p-speedio-detail-list .detail-head { margin-bottom: 16.25rem; padding-right: 2.1875rem } .p-speedio-detail-list .detail-head-line { height: 100%; width: .1875rem } .p-speedio-detail-list .detail-head-title { margin-bottom: 1.3125rem } .p-speedio-detail-list .detail-head-title-no { left: -.0625rem; margin-right: .25rem; width: 2.1875rem } .p-speedio-detail-list .detail-head-title-text { font-size: 1.3125rem; text-shadow: #3006e3 0 0 20px; top: .25rem } .p-speedio-detail-list .detail-head-title-text br { display: none } .p-speedio-detail-list .detail-head-text { font-size: .875rem; padding-left: 2.5rem } .p-speedio-detail-list .detail-head-text br { display: none } .p-speedio-detail-list .detail-body-content { padding-left: 2.5rem; padding-right: 2.1875rem } .p-speedio-detail-list .detail-body-content .title { font-size: 1rem; letter-spacing: .05em; margin-bottom: .28125rem } .p-speedio-detail-list .detail-body-content .text { font-size: .875rem } .p-speedio-detail-list .detail-body-content .line, .p-speedio-detail-list .detail-body-content .text br { display: none } .p-speedio-detail-list .detail-image { height: 17.1875rem; left: 0; margin-left: auto; margin-right: auto; position: absolute; right: 0; top: 9.375rem; width: 17.96875rem } .p-speedio-detail-no0 .detail-image .img-no1 { top: .6875rem } .p-speedio-detail-no0 .detail-image .img-no2 { top: -.0625rem } .p-speedio-detail-no1 .detail-head, .p-speedio-detail-no2 .detail-head { margin-bottom: 17.8125rem } .p-speedio-detail-no2 .detail-image .img-no1 { right: .375rem; top: 1.46875rem; width: 95% } .p-speedio-detail-no2 .detail-image .img-no2 { right: 2.1875rem; top: 1.40625rem; width: 90% } .p-speedio-header { left: .9375rem; top: .84375rem } .p-speedio-header .name { margin-left: .3125rem; margin-top: .3125rem; width: 5.390625rem } .p-speedio-lineup .lineup-title { height: 12.5rem } .p-speedio-lineup .lineup-title .lineup-title-text { width: 7.1875rem } .p-speedio-lineup .lineup-title .logo { margin-top: 1.0625rem; width: 5.46875rem } .p-speedio-lineup .lineup-title .lineup-mv { bottom: -11.25rem; width: 17.125rem } .p-speedio-lineup .lineup-title + .p-speedio-lineup-list-wrapper { padding-top: 2.03125rem } .p-speedio-lineup .p-speedio-lineup-list-wrapper .p-speedio-category-list { margin-left: .625rem; margin-right: .625rem } .p-speedio-lineup .p-speedio-lineup-list-wrapper .p-speedio-category-list .p-speedio-category-item { margin-bottom: 1.59375rem } .p-speedio-lineup .p-speedio-lineup-list-wrapper .p-speedio-category-list .p-speedio-category-item .p-speedio-list-head { margin-bottom: .875rem } .p-speedio-lineup .p-speedio-lineup-list-wrapper .p-speedio-category-list .p-speedio-category-item .p-speedio-list-head .head-item .model-initial { height: 1.53125rem; margin-left: .9375rem; position: relative; top: -.09375rem } .p-speedio-lineup .p-speedio-lineup-list-wrapper .p-speedio-category-list .p-speedio-category-item .p-speedio-list-head .head-item .model-name { font-size: .875rem; margin-left: .9375rem } .p-speedio-lineup .p-speedio-lineup-list-wrapper .p-speedio-category-list .model-list { background-color: #f2f2f2; flex-wrap: wrap } .p-speedio-lineup .p-speedio-lineup-list-wrapper .p-speedio-category-list .model-list .p-speedio-list-item { border: 1px solid #fff; height: 14.59375rem; width: 50% } .p-speedio-lineup .p-speedio-lineup-list-wrapper .p-speedio-category-list .model-list .p-speedio-list-item .model-number { font-size: .875rem; letter-spacing: -.01em; margin-bottom: -.46875rem; margin-left: .8125rem; margin-top: .5625rem } .p-speedio-lineup .p-speedio-lineup-list-wrapper .p-speedio-category-list .model-list .p-speedio-list-item .model-img-wrapper { height: 12.8125rem } .p-speedio-lineup .p-speedio-lineup-list-wrapper .p-speedio-category-list .model-list .p-speedio-list-item .model-img-wrapper .model-img { height: 11.25rem } .p-speedio-lineup .p-speedio-lineup-list-wrapper .p-speedio-category-list .model-list .p-speedio-list-item .cover-info { padding-top: 2.8125rem } .p-speedio-lineup .p-speedio-lineup-list-wrapper .p-speedio-category-list .model-list .p-speedio-list-item .cover-info-name { font-size: 1rem; margin-bottom: 1.6875rem; text-align: center } .p-speedio-lineup .p-speedio-lineup-list-wrapper .p-speedio-category-list .model-list .p-speedio-list-item .cover-info-text { font-size: .75rem; padding-left: 1.25rem; padding-right: 1.25rem } .p-speedio-lineup .p-speedio-lineup-list-wrapper .p-speedio-category-list .model-list .p-speedio-list-item .cover-button { align-items: center; bottom: 0; display: block; display: flex; height: 2.1875rem; justify-content: center; left: 0; position: absolute; width: 100% } .p-speedio-lineup .p-speedio-lineup-list-wrapper .p-speedio-category-list .model-list .p-speedio-list-item .cover-button .text { font-size: .75rem; position: relative; z-index: 1 } .p-speedio-lineup .p-speedio-lineup-list-wrapper .p-speedio-category-list .speedio-list-col1, .p-speedio-lineup .p-speedio-lineup-list-wrapper .p-speedio-category-list .speedio-list-col2, .p-speedio-lineup .p-speedio-lineup-list-wrapper .p-speedio-category-list .speedio-list-col3 { width: 100% } .p-speedio-section-support { padding-bottom: 4.6875rem; padding-top: 2.1875rem } .p-speedio-section-support .card-wrapper { flex-direction: column; width: 20.3125rem } .p-speedio-section-support .card-wrapper .card { margin-top: 1.09375rem; width: 20.3125rem } .p-speedio-section-support .card-wrapper .card:first-child { margin-top: 0 } .p-speedio-section-support .card-wrapper .card .card-text { align-items: flex-start; height: 7.8125rem; padding-left: 1.5625rem; padding-right: 1.5625rem } .p-speedio-section-support .card-wrapper .card .card-text:after { border-width: .25rem 0 .25rem .5rem; right: .9375rem } .p-speedio-section-support .card-wrapper .card .card-text .card-title { font-size: 1.125rem; margin-bottom: .46875rem } .p-speedio-section-support .card-wrapper .card .card-text .card-content { font-size: .875rem; line-height: 1.5; padding-right: 3.125rem; text-align: left } .p-speedio-section-support .card-wrapper .card .card-panel { display: none } .p-speedio-topview .cover-panel-inner .cpanel:first-child { top: -10% } .p-speedio-topview .cover-panel-inner .cpanel:nth-child(4) { top: -7% } .p-speedio-topview .content .copy-logo { margin-bottom: .875rem; width: 10.9375rem } .p-speedio-topview .content .copy-text { width: 7.25rem } .p-speedio-topview .scrolldown { height: 4.8125rem; left: 0; margin-left: auto; margin-right: auto; position: absolute; right: 0; width: 4.6875rem } .p-speedio-topview .scrolldown_inner .text { font-size: .875rem } .p-speedio-topview .scrolldown_inner .line { height: 3.9375rem } .p-speedio-topview .scrolldown_inner .line-color { box-shadow: 0 0 .4375rem .4375rem rgba(126, 72, 8, .25); height: .9375rem } } @media screen and (min-width:768px) and (max-width:1079px) { .p-speedio-lineup .p-speedio-lineup-list-wrapper .p-speedio-category-list { margin-left: 5rem; margin-right: 5rem } .p-speedio-lineup .p-speedio-lineup-list-wrapper .p-speedio-category-list .model-list { background-color: #f2f2f2; flex-wrap: wrap } .p-speedio-lineup .p-speedio-lineup-list-wrapper .p-speedio-category-list .model-list .p-speedio-list-item { border: 1px solid #fff; height: 20.625rem; margin: 0; width: 50% } .p-speedio-lineup .p-speedio-lineup-list-wrapper .p-speedio-category-list .speedio-list-col1, .p-speedio-lineup .p-speedio-lineup-list-wrapper .p-speedio-category-list .speedio-list-col2, .p-speedio-lineup .p-speedio-lineup-list-wrapper .p-speedio-category-list .speedio-list-col3 { width: 100% } .p-speedio-section-support .card-wrapper { margin-left: 2.5rem; margin-right: 2.5rem; width: auto } .p-speedio-section-support .card-wrapper .card { margin-right: 1.25rem; width: auto } .p-speedio-topview .cover-panel-inner .cpanel:first-child { top: -10% } .p-speedio-topview .cover-panel-inner .cpanel:nth-child(4) { top: -7% } }