:root { --font_s_18: calc( 18 / 14 * 1em); } @media (max-width: 640px) { :root { --font_s_18: calc( 14 / 14 * 1em); } } /*================================ p-automatic ================================*/ #commercial_button-badge .p-automatic { margin-top: 40px; } #commercial_button-badge .p-automatic__txt { font-size: var(--font_s_18); line-height: 2; } @media (max-width: 640px) { #commercial_button-badge .p-automatic__txt { text-align: center; } } #commercial_button-badge .p-automatic__notes { margin-top: 1em; font-size: var(--font_s_s); } @media (max-width: 640px) { #commercial_button-badge .p-automatic__notes { text-align: center; } } #commercial_button-badge .p-automatic__intro { margin-bottom: 100px; display: flex; gap: 3.8759689922%; } @media (max-width: 640px) { #commercial_button-badge .p-automatic__intro { margin-bottom: 40px; flex-direction: column; } } #commercial_button-badge .p-automatic__intro__img { width: 43.7984496124%; } @media (max-width: 640px) { #commercial_button-badge .p-automatic__intro__img { width: 100%; } } #commercial_button-badge .p-automatic__intro__dtl { width: 52.3255813953%; } @media (max-width: 640px) { #commercial_button-badge .p-automatic__intro__dtl { width: 100%; } } #commercial_button-badge .p-automatic__intro__dtl__ttl { margin: 0.5em 0; font-size: var(--font_s_xl); font-weight: bold; } @media (max-width: 640px) { #commercial_button-badge .p-automatic__intro__dtl__ttl { text-align: center; } } #commercial_button-badge .p-automatic__intro__dtl__img { margin-top: 30px; padding: 45px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 7.4074074074%; position: relative; } @media (max-width: 640px) { #commercial_button-badge .p-automatic__intro__dtl__img { display: flex; flex-direction: column; gap: 30px 0; } } #commercial_button-badge .p-automatic__intro__dtl__img::after { content: ""; width: 100vw; height: 100%; background: linear-gradient(to right, #ffffff 27.5vw, #514E58 27.5vw, #514E58 45vw, #020517); position: absolute; top: 0; left: 4.4444444444%; margin-left: -50vw; z-index: -1; } @media (max-width: 640px) { #commercial_button-badge .p-automatic__intro__dtl__img::after { background: linear-gradient(to right, #514E58 0, #292937 60%, #020517); left: 0; margin-left: calc(50% - 50vw); } } #commercial_button-badge .p-automatic__compare { display: flex; gap: 2.9069767442%; } @media (max-width: 640px) { #commercial_button-badge .p-automatic__compare { flex-direction: column; } } #commercial_button-badge .p-automatic__compare__img { width: 54.2635658915%; } @media (max-width: 640px) { #commercial_button-badge .p-automatic__compare__img { width: 100%; } } @media (max-width: 640px) { #commercial_button-badge .p-automatic__compare__img + .p-automatic__txt { margin-top: 1.5em; text-align: left; } } /*================================ p-movie ================================*/ #commercial_button-badge .l-section.p-movie { position: static; } @media (max-width: 640px) { #commercial_button-badge .l-section.p-movie { margin-top: 30px; } } /*================================ p-feature ================================*/ #commercial_button-badge .p-feature__item { margin-top: 80px; display: flex; } @media (max-width: 640px) { #commercial_button-badge .p-feature__item { margin-top: 40px; flex-direction: column; } } #commercial_button-badge .p-feature__item__img { width: 38.7596899225%; } @media (max-width: 640px) { #commercial_button-badge .p-feature__item__img { width: 100%; } } #commercial_button-badge .p-feature__item__dtl { width: 61.2403100775%; } @media (max-width: 640px) { #commercial_button-badge .p-feature__item__dtl { width: 100%; } } #commercial_button-badge .p-feature__item__dtl__ttl { font-size: var(--font_s_xm); position: relative; } #commercial_button-badge .p-feature__item__dtl__ttl::after { content: ""; width: 100%; height: 1px; background: #0D2EA0; position: absolute; top: 4em; left: 0; z-index: -1; } @media (max-width: 640px) { #commercial_button-badge .p-feature__item__dtl__ttl::after { top: 4.5em; } } #commercial_button-badge .p-feature__item__dtl__ttl__num { width: 4.3em; margin-left: 6.3291139241%; } @media (max-width: 640px) { #commercial_button-badge .p-feature__item__dtl__ttl__num { width: 6em; margin: -10px 0 0 0; } } #commercial_button-badge .p-feature__item__dtl__ttl__txt { margin: -0.5em 0 1em 11.0759493671%; color: #0D2EA0; font-weight: bold; letter-spacing: 0.06em; line-height: 1.5; } @media (max-width: 640px) { #commercial_button-badge .p-feature__item__dtl__ttl__txt { margin: -0.5em 0 1em 8.4507042254%; } } #commercial_button-badge .p-feature__item__dtl__txt { margin-left: 11.0759493671%; } @media (max-width: 640px) { #commercial_button-badge .p-feature__item__dtl__txt { margin-left: 0; } } @media (min-width: 641px) { #commercial_button-badge .p-feature__item:nth-last-of-type(even) .p-feature__item::after { left: 2.5em; } #commercial_button-badge .p-feature__item:nth-last-of-type(even) .p-feature__item__img { order: 1; } #commercial_button-badge .p-feature__item:nth-last-of-type(even) .p-feature__item__dtl { order: 0; } #commercial_button-badge .p-feature__item:nth-last-of-type(even) .p-feature__item__dtl__ttl::after { left: 2.5em; } #commercial_button-badge .p-feature__item:nth-last-of-type(even) .p-feature__item__dtl__ttl__num { margin-left: 0; } #commercial_button-badge .p-feature__item:nth-last-of-type(even) .p-feature__item__dtl__ttl__txt { margin-left: 4.746835443%; } #commercial_button-badge .p-feature__item:nth-last-of-type(even) .p-feature__item__dtl__txt { margin-left: 4.746835443%; } } #commercial_button-badge .p-feature .m-heading-block + .p-feature__item { margin-top: 40px; } @media (max-width: 640px) { #commercial_button-badge .p-feature .m-heading-block + .p-feature__item { margin-top: 20px; } } /*================================ p-make ================================*/ #commercial_button-badge .p-make { padding-bottom: 60px; position: relative; } #commercial_button-badge .p-make::after { content: ""; width: 100vw; height: 100%; background: #ECEEF0; position: absolute; top: 0; left: 0; margin-left: calc(50% - 50vw); z-index: -1; } #commercial_button-badge .p-make__lead { border-left: solid 10px #000000; margin-bottom: 60px; padding: 60px 0 0 20px; } @media (max-width: 640px) { #commercial_button-badge .p-make__lead { border-width: 5px; margin-bottom: 40px; padding: 25px 0 0 15px; } } #commercial_button-badge .p-make__lead__ttl { font-size: var(--font_s_xl); color: #0D2EA0; font-weight: bold; } #commercial_button-badge .p-make__lead__txt { font-size: var(--font_s_18); } #commercial_button-badge .p-make__list { display: flex; gap: 5.8139534884%; } @media (max-width: 640px) { #commercial_button-badge .p-make__list { flex-direction: column; } } #commercial_button-badge .p-make__list li { width: 29.4573643411%; } @media (max-width: 640px) { #commercial_button-badge .p-make__list li { width: 100%; display: grid; grid-template-columns: 50% 50%; grid-template-rows: auto auto; } } @media (max-width: 640px) { #commercial_button-badge .p-make__list li:not(:last-child) { margin-bottom: 40px; } } #commercial_button-badge .p-make__list__heading { margin-bottom: 0.5em; font-size: var(--font_s_18); color: #0D2EA0; font-weight: bold; text-align: center; } @media (max-width: 640px) { #commercial_button-badge .p-make__list__heading { margin: auto 0 auto 1em; text-align: left; grid-column: 2/3; grid-row: 1/2; } } @media (max-width: 640px) { #commercial_button-badge .p-make__list__img { grid-column: 1/2; grid-row: 1/2; } } #commercial_button-badge .p-make__list__txt { margin-top: 1em; } @media (max-width: 640px) { #commercial_button-badge .p-make__list__txt { grid-column: 1/3; grid-row: 2/3; } } /*================================ p-contact ================================*/ #commercial_button-badge .l-section.p-contact { margin-bottom: 120px; } @media (max-width: 640px) { #commercial_button-badge .l-section.p-contact { margin: 40px 0 80px; } }/*# sourceMappingURL=p-about.css.map */