@charset "UTF-8"; /*** The new CSS reset - version 1.11.2 (last updated 15.11.2023) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *:where(:not(html, iframe, canvas, img, svg, video, audio, table, th, td, tr, tbody, thead, tfoot):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Fix mobile Safari increase font-size on landscape mode */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu, summary { list-style: none; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; -moz-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::-moz-placeholder { color: unset; } ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; box-sizing: border-box; } /* Remove details summary webkit styles */ ::-webkit-details-marker { display: none; } * { min-inline-size: 0; } html { scroll-padding-top: 50px; touch-action: manipulation; } @media screen and (max-width: 767px) { html { scroll-padding-top: 60px; } } body { font-size: 1rem; font-family: "Noto Sans JP", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; color: #333333; } h1, h2, h3, h4, h5, p, span, a, dt, dd, th, td, button, label { letter-spacing: 0.1em; } p { font-feature-settings: "palt"; } a { color: inherit; text-decoration: none; transition: all 0.3s; cursor: pointer; } @media (any-hover: hover) { a:hover { opacity: 0.7; } } a[href*="tel:"] { pointer-events: none; } @media screen and (max-width: 767px) { a[href*="tel:"] { pointer-events: auto; } } img { max-width: 100%; height: auto; vertical-align: bottom; } @media screen and (max-width: 767px) { img { width: 100%; } } button { cursor: pointer; } .c-text { font-size: 1rem; font-weight: 400; line-height: 1.8; letter-spacing: 0.04em; } .c-bold { font-weight: 700; } .c-btn { min-width: 240px; height: 50px; padding: 12px 24px; color: #fff; display: inline-block; border-radius: 8px; text-align: center; font-size: 1.125rem; box-shadow: 0 4px 10px -4px rgba(12, 12, 13, 0.2); } @media screen and (max-width: 767px) { .c-btn { font-size: 0.9375rem; line-height: 1.6; } } .c-btn:has(.c-btn__icon) { display: flex; justify-content: center; align-items: center; gap: 8px; } @media screen and (max-width: 767px) { .c-btn:has(.c-btn__icon) { gap: 4px; } } .c-btn a, .c-btn button { display: flex; justify-content: center; align-items: center; gap: 8px; width: 100%; height: 100%; } @media screen and (max-width: 767px) { .c-btn a, .c-btn button { gap: 4px; } } .c-btn button { transition: all 0.3s; } @media (any-hover: hover) { .c-btn button:hover { opacity: 0.7; } } .c-btn__icon { width: 32px; height: 32px; } .c-btn__icon img { width: 100%; display: block; margin: auto; } @media screen and (max-width: 767px) { .c-btn__icon { width: 24px; height: 24px; } } .c-btn--red { background-color: #d50719; } .c-btn--blue { background-color: #0c3ed3; } .c-btn--orange { background-color: #f07c00; } .c-btn--white { background-color: #fff; color: #d50719; border: 1px solid #d50719; } .c-btn--outline-blue { background-color: #fff; color: #0c3ed3; border: 1px solid #0c3ed3; } .p-fixed-btns { position: fixed; right: 0; top: 200px; z-index: 128; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .p-fixed-btns.is-show { opacity: 1; visibility: visible; } @media screen and (min-width: 1920px) { .p-fixed-btns { right: calc((100vw - 1920px) / 2); } } @media screen and (max-width: 767px) { .p-fixed-btns { position: fixed; bottom: 0; left: 0; right: 0; top: auto; transform: none; background-color: #fff; } } .p-fixed-btns__inner { display: flex; flex-direction: column; gap: 12px; } @media screen and (max-width: 767px) { .p-fixed-btns__inner { flex-direction: row; justify-content: space-between; gap: 1px; } } .p-fixed-btns__item { width: 40px; } @media screen and (max-width: 767px) { .p-fixed-btns__item { flex: 1; } } .p-fixed-btns__link { display: flex; flex-direction: column; align-items: center; padding: 12px 0; border-radius: 8px 0 0 8px; gap: 2px; } @media screen and (max-width: 767px) { .p-fixed-btns__link { border-radius: 0px; padding: 8px; flex-direction: row; justify-content: center; gap: 4px; } } .p-fixed-btns__link--red { background-color: #d50719; color: #fff; } .p-fixed-btns__link--orange { background-color: #f07c00; color: #fff; } .p-fixed-btns__link--blue { background-color: #0c3ed3; color: #fff; } .p-fixed-btns__link--h180 { height: 180px; justify-content: center; } @media screen and (max-width: 767px) { .p-fixed-btns__link--h180 { height: auto; } } .p-fixed-btns__icon { display: grid; place-content: center; width: 20px; height: 20px; line-height: 0; filter: brightness(0) invert(1); } .p-fixed-btns__text { font-size: 1rem; writing-mode: vertical-rl; text-orientation: upright; } @media screen and (max-width: 767px) { .p-fixed-btns__text { writing-mode: horizontal-tb; font-size: 1.125rem; } } .c-section-title { width: 100%; padding: 4px 0px; color: #fff; } @media screen and (max-width: 767px) { .c-section-title { padding: 10px 16px; } } @media screen and (max-width: 767px) { .c-section-title .l-inner { padding-left: 0; padding-right: 0; } } .c-section-title--red { background: linear-gradient(90deg, #D50719 82.69%, #FFF 98.56%); } .c-section-title--blue { background: linear-gradient(90deg, #0C3ED3 82.69%, #FFF 98.56%); } .c-section-title--orange { background: linear-gradient(90deg, #F07C00 82.69%, #FFF 98.56%); } .c-section-title__title { font-size: 2.25rem; font-weight: 700; letter-spacing: 0.1em; } @media screen and (max-width: 767px) { .c-section-title__title { font-size: 1.375rem; } } .c-section-title__title-text { font-family: "Roboto", sans-serif; font-size: 1.25rem; padding-left: 38px; position: relative; letter-spacing: 0; } @media screen and (max-width: 767px) { .c-section-title__title-text { font-size: 0.875rem; padding-left: 30px; } } .c-section-title__title-text::before { content: ""; width: 10px; height: 2px; background-color: #fff; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); } @media screen and (max-width: 767px) { .c-section-title__title-text::before { left: 5px; } } .c-subSecTitle { display: flex; align-items: center; gap: 8px; } @media screen and (max-width: 767px) { .c-subSecTitle { gap: 4px; } } .c-subSecTitle__icon { width: 40px; height: 40px; flex-shrink: 0; } @media screen and (max-width: 767px) { .c-subSecTitle__icon { width: 32px; height: 32px; } } .c-subSecTitle__icon img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .c-subSecTitle__text { font-size: 2.25rem; font-weight: 700; letter-spacing: 0.04em; line-height: 1; } @media screen and (max-width: 767px) { .c-subSecTitle__text { font-size: 1.375rem; font-weight: 500; line-height: 1.6; } } .c-sellSearch { padding: 40px 0 60px; } @media screen and (max-width: 767px) { .c-sellSearch { padding: 24px 0 40px; } } @media screen and (max-width: 767px) { .c-sellSearch .l-inner { padding: 0 10px; } } .c-sellSearch__contents { margin-top: 20px; } @media screen and (max-width: 767px) { .c-sellSearch__contents { margin-top: 16px; } } .c-sellSearch__pc-categories { display: flex; flex-direction: column; gap: 56px; } @media screen and (max-width: 767px) { .c-sellSearch__pc-categories { display: none; } } .c-sellSearch__category { display: flex; flex-direction: column; gap: 32px; } .c-sellSearch__category-title { display: flex; align-items: center; gap: 32px; } .c-sellSearch__category-title-text { display: flex; align-items: center; gap: 16px; color: #d50719; font-weight: 700; } .c-sellSearch__category-title-jp { font-size: 1.625rem; font-weight: 700; letter-spacing: 0.1em; line-height: 1.3; } .c-sellSearch__category-title-en { font-family: "Roboto", sans-serif; font-size: 1.125rem; font-weight: 700; line-height: 1.4; } .c-sellSearch__category-title-line { flex-grow: 1; height: 3px; background-color: #d50719; } .c-sellSearch__device-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 20px; } .c-sellSearch__device-card { background-color: #fff; border-radius: 10px; box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.25); padding: 16px 0 16px 16px; display: flex; align-items: flex-start; gap: 12px; border: 1px solid #fff; transition: all 0.3s; } @media (any-hover: hover) { .c-sellSearch__device-card:hover { border: 1px solid #d50719; } } .c-sellSearch__device-image { width: 80px; height: 80px; flex-shrink: 0; } .c-sellSearch__device-image img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .c-sellSearch__device-info { display: flex; flex-direction: column; gap: 2px; } .c-sellSearch__device-name { font-size: 1.125rem; font-weight: 700; letter-spacing: 0.1em; line-height: 1.2; } .c-sellSearch__device-brand { font-size: 0.9375rem; font-weight: 700; letter-spacing: 0em; line-height: 1.2; } .c-sellSearch__tabs { display: none; } @media screen and (max-width: 767px) { .c-sellSearch__tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } } .c-sellSearch__tab { background-color: #fff; border: 1px solid #d50719; color: #d50719; font-size: 0.875rem; font-weight: 500; letter-spacing: 0.056em; line-height: 1.4; padding: 0; height: 50px; display: flex; align-items: center; justify-content: center; transition: all 0.3s; } @media (any-hover: hover) { .c-sellSearch__tab:hover { background-color: #d50719; color: #fff; } } .c-sellSearch__tab--active { background-color: #d50719; color: #fff; } .c-sellSearch__tab-content { display: none; } .c-sellSearch__tab-content--active { display: block; } .c-sellSearch__device-list { display: none; } @media screen and (max-width: 767px) { .c-sellSearch__device-list { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; } } .c-sellSearch__device-item { display: flex; align-items: center; justify-content: space-between; padding: 5px 16px; height: 60px; box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.25); transition: all 0.3s; } @media (any-hover: hover) { .c-sellSearch__device-item:hover { opacity: 1; background-color: #eee; } } .c-sellSearch__device-item-image { width: 40px; height: 40px; flex-shrink: 0; } .c-sellSearch__device-item-image img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .c-sellSearch__device-item-info { flex-grow: 1; margin-left: 16px; } .c-sellSearch__device-item-name { font-size: 1rem; font-weight: 700; letter-spacing: 0.1em; line-height: 1.2; } .c-sellSearch__device-item-brand { font-size: 0.875rem; font-weight: 400; letter-spacing: 0em; line-height: 1.2; } .c-sellSearch__device-item-arrow { width: 16px; height: 16px; line-height: 0; flex-shrink: 0; } .c-sellSearch__device-item-arrow img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .c-repairSearch { padding: 40px 0 60px; } @media screen and (max-width: 767px) { .c-repairSearch { padding: 24px 0 40px; } } @media screen and (max-width: 767px) { .c-repairSearch .l-inner { padding: 0 10px; } } .c-repairSearch__device-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 20px; } @media screen and (max-width: 767px) { .c-repairSearch__device-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 16px; } } .c-repairSearch__device-card { background-color: #fff; border-radius: 10px; box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.25); padding: 16px 20px; display: flex; flex-direction: column; align-items: center; gap: 10px; border: 1px solid #fff; transition: all 0.3s; } @media screen and (max-width: 767px) { .c-repairSearch__device-card { flex-direction: row; padding: 12px 24px; gap: 8px; height: 80px; border-radius: 6px; } } @media (any-hover: hover) { .c-repairSearch__device-card:hover { border: 1px solid #0c3ed3; } } .c-repairSearch__device-image { width: 80px; height: 80px; flex-shrink: 0; } @media screen and (max-width: 767px) { .c-repairSearch__device-image { width: 56px; height: 56px; } } .c-repairSearch__device-image img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .c-repairSearch__device-name { font-size: 1.125rem; font-weight: 700; letter-spacing: 0.1em; line-height: 1.2; } @media screen and (max-width: 767px) { .c-repairSearch__device-name { font-size: 0.875rem; font-weight: 700; letter-spacing: 0.14em; } } .c-repairSearch__symptom-section { margin-top: 60px; } @media screen and (max-width: 767px) { .c-repairSearch__symptom-section { margin-top: 40px; } } .c-repairSearch__symptom-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 20px; } @media screen and (max-width: 999px) { .c-repairSearch__symptom-grid { grid-template-columns: repeat(2, 1fr); } } @media screen and (max-width: 767px) { .c-repairSearch__symptom-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 16px; } } .c-repairSearch__symptom-card { background-color: #fff; border-radius: 10px; box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.25); padding: 0 16px; height: 100px; display: flex; align-items: center; gap: 8px; border: 1px solid #fff; transition: all 0.3s; } @media screen and (max-width: 767px) { .c-repairSearch__symptom-card { height: 80px; padding: 0 8px; gap: 4px; border-radius: 6px; } } @media (any-hover: hover) { .c-repairSearch__symptom-card:hover { border: 1px solid #0c3ed3; } } .c-repairSearch__symptom-icon { width: 56px; height: 56px; flex-shrink: 0; } @media screen and (max-width: 767px) { .c-repairSearch__symptom-icon { width: 40px; height: 40px; } } .c-repairSearch__symptom-icon img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .c-repairSearch__symptom-info { flex: 1; } @media screen and (max-width: 767px) { .c-repairSearch__symptom-info { display: flex; flex-direction: column; gap: 2px; } } .c-repairSearch__symptom-name { font-size: 1.25rem; font-weight: 500; letter-spacing: 0.1em; line-height: 1.4; margin: 0; color: #333333; } @media screen and (max-width: 767px) { .c-repairSearch__symptom-name { font-size: 0.9375rem; font-weight: 500; letter-spacing: 0.06em; line-height: 1.2; } } .c-secondary { padding: 45px; } @media screen and (max-width: 767px) { .c-secondary { padding: 32px 5px 45px; } } .c-secondary--sell { background: url(../img/top/sell01.jpg) no-repeat center center/cover; } @media screen and (max-width: 767px) { .c-secondary--sell { background: url(../img/top/sell-sp-01.jpg) no-repeat center center/cover; } } .c-secondary--sell .c-secondary__content-item { border: 4px solid #d50719; } @media screen and (max-width: 767px) { .c-secondary--sell .c-secondary__content-item { border: 2px solid #d50719; } } .c-secondary--sell .c-secondary__content-item::before { border: 1px solid #d50719; } .c-secondary--sell .c-secondary__content-item-title { color: #d50719; } .c-secondary--repair { background: url(../img/top/repair01.jpg) no-repeat center center/cover; } @media screen and (max-width: 767px) { .c-secondary--repair { background: url(../img/top/repair-sp-01.jpg) no-repeat center center/cover; } } .c-secondary--repair .c-secondary__content-item { border: 4px solid #0c3ed3; } @media screen and (max-width: 767px) { .c-secondary--repair .c-secondary__content-item { border: 2px solid #0c3ed3; } } .c-secondary--repair .c-secondary__content-item::before { border: 1px solid #0c3ed3; } .c-secondary--repair .c-secondary__content-item-title { color: #0c3ed3; } .c-secondary--sales { background: url(../img/top/sales01.jpg) no-repeat center center/cover; } @media screen and (max-width: 767px) { .c-secondary--sales { background: url(../img/top/sales-sp-01.jpg) no-repeat center center/cover; } } .c-secondary--sales .c-secondary__content-item { border: 4px solid #f07c00; } @media screen and (max-width: 767px) { .c-secondary--sales .c-secondary__content-item { border: 2px solid #f07c00; } } .c-secondary--sales .c-secondary__content-item::before { border: 1px solid #f07c00; } .c-secondary--sales .c-secondary__content-item-title { color: #f07c00; } .c-secondary__inner { max-width: 825px; margin-right: auto; margin-left: auto; } .c-secondary__title { color: #fff; text-align: center; text-shadow: 0 3px 8px rgba(0, 0, 0, 0.83); font-size: 2.5rem; } @media screen and (max-width: 767px) { .c-secondary__title { font-size: 1.5rem; } } .c-secondary__content { display: flex; gap: 10px; margin-top: 28px; justify-content: space-between; } @media screen and (max-width: 767px) { .c-secondary__content { justify-content: center; gap: 5px; } } .c-secondary__content-item { border-radius: 200px; background: #fff; display: flex; width: 222px; height: 222px; padding: 43px 20px; flex-direction: column; justify-content: center; align-items: center; gap: 10px; position: relative; } @media screen and (max-width: 767px) { .c-secondary__content-item { width: 180px; height: 180px; padding: 30px 10px; } } @media screen and (max-width: 609px) { .c-secondary__content-item { width: 115px; height: 115px; padding: 15px 5px 20px; gap: 5px; } } .c-secondary__content-item::before { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 111px; width: 202px; height: 202px; pointer-events: none; } @media screen and (max-width: 767px) { .c-secondary__content-item::before { width: 162px; height: 162px; } } @media screen and (max-width: 609px) { .c-secondary__content-item::before { width: 100px; height: 100px; } } .c-secondary__content-item-title { font-size: 1.5rem; font-weight: 700; text-align: center; } .c-secondary__content-item-title span { font-size: 2.25rem; } @media screen and (max-width: 767px) { .c-secondary__content-item-title span { font-size: 1.125rem; } } @media screen and (max-width: 767px) { .c-secondary__content-item-title { font-size: 1.25rem; } } @media screen and (max-width: 609px) { .c-secondary__content-item-title { font-size: 0.8125rem; line-height: 1; } } .c-secondary__content-item-text { text-align: center; } @media screen and (max-width: 767px) { .c-secondary__content-item-text { font-size: 0.875rem; } } @media screen and (max-width: 609px) { .c-secondary__content-item-text { font-size: 0.625rem; } } .c-sell-other { background: url("../img/sell/another-bg.png") no-repeat center center/cover; padding: 40px 0; } @media screen and (max-width: 767px) { .c-sell-other { padding: 30px 0; } } .c-sell-other__header { margin-bottom: 40px; position: relative; } .c-sell-other__header::after { content: ""; position: absolute; left: 0; bottom: -10px; width: 80px; height: 2px; background: #d50719; } .c-sell-other__header--repair::after { background: #0c3ed3; } @media screen and (max-width: 767px) { .c-sell-other__header { gap: 15px; margin-bottom: 30px; } } .c-sell-other__title { font-size: 1.875rem; font-weight: 700; } @media screen and (max-width: 767px) { .c-sell-other__title { font-size: 1.5rem; } } .c-sell-other__icon { width: 80px; height: 2px; background: url("../../img/common/title-icon.svg") no-repeat center; background-size: contain; } .c-sell-other__container { max-width: 1080px; margin: 0 auto; } .c-sell-other__list { display: flex; gap: 60px; justify-content: center; align-items: center; } @media screen and (max-width: 767px) { .c-sell-other__list { flex-direction: column; gap: 20px; } } .c-sell-other__list--repair { justify-content: flex-start; } .c-sell-other__card { width: 510px; background-color: #fff; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); } @media screen and (max-width: 767px) { .c-sell-other__card { width: 100%; } } .c-sell-other__card-inner { display: flex; align-items: center; } .c-sell-other__card-image { width: 192px; background-color: #c4c4c4; flex-shrink: 0; } @media screen and (max-width: 767px) { .c-sell-other__card-image { width: 150px; height: 100%; } } .c-sell-other__card-image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .c-sell-other__card-content { display: flex; gap: 8px; align-items: flex-start; padding: 0 17px; flex: 1; } @media screen and (max-width: 767px) { .c-sell-other__card-content { padding: 0 4px; gap: 6px; } } .c-sell-other__card-icon { width: 32px; height: 32px; flex-shrink: 0; margin-top: 2px; } .c-sell-other__card-icon img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } @media screen and (max-width: 767px) { .c-sell-other__card-icon { width: 24px; height: 24px; margin-top: 0; } } .c-sell-other__card-text { display: flex; flex-direction: column; flex: 1; } .c-sell-other__card-title { font-size: 1.5rem; font-weight: 700; color: #333333; line-height: 1.4; } @media screen and (max-width: 767px) { .c-sell-other__card-title { font-size: 1.125rem; } } .c-sell-other__card-detail { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .c-sell-other__card-description { font-size: 0.875rem; font-weight: 500; line-height: 1.2; } @media screen and (max-width: 767px) { .c-sell-other__card-description { font-size: 0.75rem; } } .c-sell-other__card-arrow { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0; } @media screen and (max-width: 767px) { .c-sell-other__card-arrow { width: 24px; height: 24px; } } .c-sell-other__card-arrow img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .c-store { padding-top: 60px; } .c-store__wrap { margin-top: 40px; margin-bottom: 100px; } .c-store__area-links { padding: 40px 0; } @media screen and (max-width: 767px) { .c-store__area-links { padding: 0 0 20px; } } .c-store__area-links-title { font-size: 1.25rem; font-weight: 500; } @media screen and (max-width: 767px) { .c-store__area-links-title { font-size: 1.125rem; } } .c-store__area-link-list { display: flex; flex-wrap: wrap; gap: 16px; justify-content: flex-start; margin-top: 16px; } @media screen and (max-width: 767px) { .c-store__area-link-list { gap: 8px; } } .c-store__area-link { min-width: 150px; width: -moz-fit-content; width: fit-content; display: flex; justify-content: center; align-items: center; gap: 8px; font-size: 1.125rem; color: #fff; background-color: #d50719; border-radius: 6px; padding: 8px 16px; } @media screen and (max-width: 767px) { .c-store__area-link { min-width: 100px; height: 40px; font-size: 0.875rem; } } .c-store__area-link::after { content: ""; width: 28px; aspect-ratio: 1/1; background: url(../img/common/right-arrow-white.svg) no-repeat center center/contain; transform: rotate(90deg); } @media screen and (max-width: 767px) { .c-store__area-link::after { width: 20px; } } .c-store__menu-title { display: flex; align-items: center; gap: 40px; font-size: 1.625rem; font-weight: 500; color: #d50719; position: relative; } @media screen and (max-width: 767px) { .c-store__menu-title { font-size: 1.375rem; gap: 8px; } } .c-store__menu-title::after { content: ""; flex-grow: 1; height: 3px; background-color: #d50719; } @media screen and (max-width: 767px) { .c-store__menu-title::after { height: 2px; } } .c-store__menu-title:not(:first-of-type) { margin-top: 100px; } .c-store-item { margin-top: 50px; } @media screen and (max-width: 767px) { .c-store-item { padding: 20px 0px; } } .c-store-item:first-of-type { margin-top: 10px; } @media screen and (max-width: 767px) { .c-store-item:first-of-type { margin-top: 20px; } } .c-store-title { font-size: 1.5rem; font-weight: 500; } @media screen and (max-width: 767px) { .c-store-title { font-size: 1.25rem; } } .c-store-container { display: flex; gap: 70px; justify-content: flex-start; margin-top: 22px; } @media screen and (max-width: 767px) { .c-store-container { flex-direction: column; gap: 10px; } } .c-store-img { width: 40%; aspect-ratio: 420/263; text-align: center; overflow: hidden; } .c-store-img img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } @media screen and (max-width: 767px) { .c-store-img { width: 100%; } } .c-store-content-wrap { flex-grow: 1; } .c-store-category { padding: 1px 16px; border-radius: 4px; font-size: 0.875rem; display: inline-block; border: 1px solid #333333; margin-right: 4px; } @media screen and (max-width: 767px) { .c-store-category { padding: 2px 4px; } } .c-store-category--red { border-color: #d50719; color: #d50719; } .c-store-category--blue { border-color: #0c3ed3; color: #0c3ed3; } .c-store-category--darkorange { border-color: #c66803; color: #c66803; } .c-store-content-address { margin-top: 12px; } .c-store-content-address, .c-store-content-tel, .c-store-content-time, .c-store-content-off, .c-store-content-parking { display: flex; gap: 10px; align-items: flex-start; position: relative; border-bottom: 1px solid #c4c4c4; padding-bottom: 2px; } .c-store-content-tel, .c-store-content-time, .c-store-content-off, .c-store-content-parking { margin-top: 15px; } .c-store-content-address-title, .c-store-content-tel-title, .c-store-content-time-title, .c-store-content-off-title, .c-store-content-parking-title { width: 100px; font-weight: 700; flex-shrink: 0; } @media screen and (max-width: 767px) { .c-store-content-address-title, .c-store-content-tel-title, .c-store-content-time-title, .c-store-content-off-title, .c-store-content-parking-title { width: 71px; font-size: 0.875rem; } } .c-store-content-address-text, .c-store-content-tel-text, .c-store-content-time-text, .c-store-content-off-text, .c-store-content-parking-text { flex-grow: 1; } @media screen and (max-width: 767px) { .c-store-content-address-text, .c-store-content-tel-text, .c-store-content-time-text, .c-store-content-off-text, .c-store-content-parking-text { width: 100%; font-size: 0.875rem; } } .c-store-link { margin-top: 13px; text-align: right; } .c-store-gmap { margin-right: 40px; padding-left: 32px; position: relative; } .c-store-gmap::after { content: ""; position: absolute; left: 0; width: 24px; height: 24px; background: url(../img/common/store-icon-red.svg) no-repeat center center/contain; } @media screen and (max-width: 767px) { .c-store-gmap::after { width: 16px; height: 16px; top: 3px; } } @media screen and (max-width: 767px) { .c-store-gmap { font-size: 0.875rem; padding-left: 20px; margin-right: 20px; } } .c-store-store { padding-right: 32px; position: relative; } .c-store-store::after { content: ""; position: absolute; right: 0; width: 24px; height: 24px; background: url(../img/common/right-arrow.svg) no-repeat center center/contain; } @media screen and (max-width: 767px) { .c-store-store::after { width: 16px; height: 16px; top: 3px; } } @media screen and (max-width: 767px) { .c-store-store { font-size: 0.875rem; padding-right: 20px; } } .c-store-btn { margin-top: 52px; text-align: center; } .c-blog { padding: 60px 0 40px; } .c-blog__item { display: flex; gap: 10px; justify-content: flex-start; margin-top: 40px; } @media screen and (max-width: 767px) { .c-blog__item { flex-direction: column; margin-top: 0; } } .c-blog__item-link { max-width: 345px; } @media screen and (max-width: 767px) { .c-blog__item-link { display: flex; gap: 20px; align-items: center; margin-top: 20px; } } .c-blog__item-img { max-width: 100%; aspect-ratio: 344/194; } .c-blog__item-img img { -o-object-fit: cover; object-fit: cover; } @media screen and (max-width: 767px) { .c-blog__item-img { max-width: 40%; } } .c-blog__item-title { font-size: 0.875rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; max-width: 40em; height: 45px; margin-top: 8px; } @media screen and (max-width: 767px) { .c-blog__item-title { line-height: 1.2; margin-top: 0; height: 35px; } } .c-blog__item-date { font-size: 0.875rem; margin-top: 8px; } @media screen and (max-width: 767px) { .c-blog__item-date { font-size: 0.8125rem; } } .c-blog__item-categories { display: flex; gap: 4px; margin-top: 8px; } @media screen and (max-width: 767px) { .c-blog__item-categories { margin-top: 0; } } .c-blog__item-category { font-size: 0.8125rem; color: #d50719; padding: 3px 10px; display: inline-block; margin-top: 8px; border: 1px solid #d50719; } @media screen and (max-width: 767px) { .c-blog__item-category { margin-top: 0; font-size: 0.75rem; padding: 3px 0; } } .c-blog__item-btn { margin-top: 40px; text-align: center; } .c-title { display: flex; align-items: center; } @media screen and (max-width: 767px) { .c-title { flex-direction: column; } } .c-title__icon { width: 40px; height: 40px; flex-shrink: 0; margin-right: 4px; } @media screen and (max-width: 767px) { .c-title__icon { width: 32px; height: 32px; margin-right: 4px; } } .c-title__icon img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .c-title__jp { font-size: 2.25rem; font-weight: 700; letter-spacing: 0.1em; padding-right: 90px; position: relative; } @media screen and (max-width: 767px) { .c-title__jp { font-size: 1.375rem; padding-right: 0; } } .c-title__jp::after { content: ""; position: absolute; top: 50%; right: 40px; width: 40px; height: 2px; background: #d50719; } @media screen and (max-width: 767px) { .c-title__jp::after { content: none; } } .c-title__jp--blue::after { background: #0c3ed3; } .c-title__jp--orange::after { background: #f07c00; } .c-title__en { font-family: "Roboto", sans-serif; font-size: 1.5rem; letter-spacing: 0; color: #d50719; position: relative; } @media screen and (max-width: 767px) { .c-title__en { font-size: 1rem; } } .c-title__en::before { content: ""; position: absolute; top: 50%; left: -35px; transform: translateY(-50%); width: 30px; height: 40px; background: url(../img/top/title-icon.svg) no-repeat center center/contain; } @media screen and (max-width: 767px) { .c-title__en::before { content: none; } } .c-title__en--blue { color: #0c3ed3; } .c-title__en--blue::before { background: url(../img/common/title-icon-blue.svg) no-repeat center center/contain; } .c-title__en--orange { color: #f07c00; } .c-title__en--orange::before { background: url(../img/common/title-icon-orange.svg) no-repeat center center/contain; } @media screen and (max-width: 767px) { .c-title--left { flex-direction: row; } } @media screen and (max-width: 767px) { .c-title--left .c-title__jp { padding-right: 24px; } } @media screen and (max-width: 767px) { .c-title--left .c-title__jp::after { content: ""; width: 16px; right: 0; transform: translateY(2px); } } @media screen and (max-width: 767px) { .c-title--left .c-title__en { margin-top: 6px; margin-left: 4px; } } .c-title--noEn .c-title__jp::after { content: none; } .c-line-title { font-size: 1.625rem; font-weight: 700; line-height: 34px; letter-spacing: 2.6px; border-bottom: 3px solid #d50719; } @media screen and (max-width: 767px) { .c-line-title { font-size: 1.375rem; } } .c-line-title--blue { border-bottom: 3px solid #0c3ed3; } .c-line-title--orange { border-bottom: 3px solid #f07c00; } .c-line-title--text-red { color: #d50719; } .c-line-title--text-blue { color: #0c3ed3; } .c-line-title--text-orange { color: #f07c00; } .c-ber { padding: 16px 0; } @media screen and (max-width: 767px) { .c-ber { padding: 16px 4px; } } .c-ber--red { background-color: #d50719; } .c-ber--blue { background-color: #0c3ed3; } .c-ber--orange { background-color: #f07c00; } @media screen and (max-width: 767px) { .c-ber .l-inner { padding: 0 10px; } } @media screen and (max-width: 609px) { .c-ber .l-inner { padding: 0 5px; } } .c-ber__inner { display: flex; justify-content: center; align-items: center; gap: 20px; } @media screen and (max-width: 767px) { .c-ber__inner { justify-content: flex-start; gap: 4px; } } .c-ber__item { background-color: #fff; padding: 11px 12px; display: flex; justify-content: center; align-items: center; gap: 4px; } @media screen and (max-width: 767px) { .c-ber__item { flex-direction: column; gap: 4px; padding: 5px; flex: 1; height: 72px; } } .c-ber__item-text { font-weight: 700; font-size: 0.875rem; } @media screen and (max-width: 767px) { .c-ber__item-text { text-align: center; } } @media screen and (max-width: 609px) { .c-ber__item-text { font-size: 0.625rem; } } .p-top-banner .swiper { width: 100%; height: auto; overflow: hidden; position: relative; padding-bottom: 36px; } .p-top-banner .swiper-wrapper { display: flex; align-items: center; } .p-top-banner .swiper-slide { width: 100%; height: auto; flex-shrink: 0; text-align: center; padding: 0 8px; } @media screen and (max-width: 767px) { .p-top-banner .swiper-slide { padding: 0 2px; } } .p-top-banner .swiper-slide a, .p-top-banner .swiper-slide div { display: block; aspect-ratio: 480/252; } .p-top-banner .swiper-slide a img, .p-top-banner .swiper-slide div img { width: 100%; -o-object-fit: cover; object-fit: cover; } .p-top-banner .swiper-button-next, .p-top-banner .swiper-button-prev { height: 32px; width: 32px; top: 50%; transform: translateY(-50%); transition: all 0.3s; } .p-top-banner .swiper-button-next::after, .p-top-banner .swiper-button-prev::after { display: none !important; font-size: 0; content: none; } .p-top-banner .swiper-button-next::before, .p-top-banner .swiper-button-prev::before { content: ""; position: absolute; inset: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-size: contain; background-position: center; } .p-top-banner .swiper-button-prev { left: 16px; } @media screen and (max-width: 767px) { .p-top-banner .swiper-button-prev { left: 4px; } } .p-top-banner .swiper-button-prev::before { background-image: url(../img/top/swiper-button-prev.svg); } .p-top-banner .swiper-button-next { right: 16px; } @media screen and (max-width: 767px) { .p-top-banner .swiper-button-next { right: 4px; } } .p-top-banner .swiper-button-next::before { background-image: url(../img/top/swiper-button-nex.svg); } .p-top-banner .swiper-button-next:hover, .p-top-banner .swiper-button-prev:hover { opacity: 0.7; } .p-top-banner .swiper-pagination { bottom: 8px; text-align: center; } .p-top-banner .swiper-pagination .swiper-pagination-bullet { background-color: #c4c4c4; opacity: 1; width: 12px; height: 12px; margin: 0 8px; display: inline-block; border-radius: 50%; } @media screen and (max-width: 767px) { .p-top-banner .swiper-pagination .swiper-pagination-bullet { width: 10px; height: 10px; } } .p-top-banner .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { background-color: #ffbcc2; } .c-voice { background-color: #eee; padding: 60px 0 30px; } @media screen and (max-width: 767px) { .c-voice { padding: 40px 0; } } .c-voice__slider { position: relative; width: 100%; overflow: hidden; margin-top: 40px; padding-bottom: 36px; } @media screen and (max-width: 767px) { .c-voice__slider { margin-top: 30px; } } .c-voice__slider .swiper-button-next, .c-voice__slider .swiper-button-prev { height: 32px; width: 32px; top: 50%; transform: translateY(-50%); transition: all 0.3s; } .c-voice__slider .swiper-button-next::after, .c-voice__slider .swiper-button-prev::after { display: none !important; font-size: 0; content: none; } .c-voice__slider .swiper-button-next::before, .c-voice__slider .swiper-button-prev::before { content: ""; position: absolute; inset: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-size: contain; background-position: center; } .c-voice__slider .swiper-button-prev { left: 10px; } .c-voice__slider .swiper-button-prev::before { background-image: url(../img/top/swiper-button-prev.svg); } .c-voice__slider .swiper-button-next { right: 10px; } .c-voice__slider .swiper-button-next::before { background-image: url(../img/top/swiper-button-nex.svg); } .c-voice__slider .swiper-button-next:hover, .c-voice__slider .swiper-button-prev:hover { opacity: 0.7; } .c-voice__slider .swiper-pagination { bottom: 6px; text-align: center; } .c-voice__slider .swiper-pagination .swiper-pagination-bullet { background-color: #c4c4c4; opacity: 1; width: 12px; height: 12px; margin: 0 8px; display: inline-block; border-radius: 50%; } @media screen and (max-width: 767px) { .c-voice__slider .swiper-pagination .swiper-pagination-bullet { width: 10px; height: 10px; } } .c-voice__slider .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { background-color: #ffbcc2; } .c-voice__slider-wrapper { box-sizing: border-box; } .c-voice__slide-item { width: 416px; height: auto; padding: 0 8px; } @media screen and (max-width: 767px) { .c-voice__slide-item { width: 342px; } } .c-voice__slide-inner { height: 100%; background-color: #fff; border: 1px solid #c4c4c4; border-radius: 8px; padding: 20px; } .c-voice__slide-img { width: 113px; } .c-voice__slide-text { font-size: 0.875rem; line-height: 1.6; margin-top: 16px; } .c-voice__gmap { display: flex; align-items: center; width: -moz-fit-content; width: fit-content; gap: 8px; margin-left: auto; margin-right: 24px; } @media screen and (max-width: 767px) { .c-voice__gmap { font-size: 0.875rem; } } .c-voice__gmap::after { content: ""; width: 24px; height: 24px; background: url(../img/common/right-arrow.svg) no-repeat center center/contain; } .c-post { --main-color: #d50719; --bg-gray: #f6f6f6; --gray: #dedede; } .c-post--repair { --main-color: #0c3ed3; } .c-post h2, .c-post h3, .c-post h4, .c-post h5, .c-post h6 { line-height: 1.5; margin-top: 2em; margin-bottom: 1em; } .c-post h2:first-child, .c-post h3:first-child, .c-post h4:first-child, .c-post h5:first-child, .c-post h6:first-child { margin-top: 0; } .c-post h2 { color: #fff; font-size: 1.875rem; font-weight: 700; background: linear-gradient(90deg, var(--main-color) 82.69%, rgba(255, 255, 255, 0) 98.56%); padding: 0.25em 6% 0.25em 0.75em; margin-bottom: 1.2rem; } @media screen and (max-width: 767px) { .c-post h2 { font-size: 1.375rem; padding-left: 0.5em; } } .c-post h3 { font-size: 1.5rem; font-weight: 500; line-height: 1.3; letter-spacing: 0.1em; border-bottom: 3px solid; -o-border-image: linear-gradient(90deg, var(--main-color) 82.69%, rgba(255, 255, 255, 0) 98.56%) 1; border-image: linear-gradient(90deg, var(--main-color) 82.69%, rgba(255, 255, 255, 0) 98.56%) 1; padding-bottom: 0.3em; margin-top: 2.5rem; margin-bottom: 1.5rem; } @media screen and (max-width: 767px) { .c-post h3 { font-size: 1.125rem; border-width: 2px; } } .c-post h4 { font-size: 1.375rem; border-bottom: 2px dotted var(--main-color); margin-bottom: 0.75rem; } @media screen and (max-width: 767px) { .c-post h4 { font-size: 1.125rem; } } .c-post h5, .c-post h6 { font-size: 1.125rem; font-weight: bold; margin-bottom: 0.75rem; } @media screen and (max-width: 767px) { .c-post h5, .c-post h6 { font-size: 1rem; } } .c-post p { font-size: 1rem; font-weight: 400; line-height: 1.8; letter-spacing: 0.04em; margin-bottom: 1.25rem; } .c-post p:last-child { margin-bottom: 0; } .c-post ul, .c-post ol { margin-bottom: 1.5rem; padding-left: 2em; } .c-post ul li, .c-post ol li { font-size: 1rem; font-weight: 400; line-height: 1.8; letter-spacing: 0.04em; } .c-post ul li::marker, .c-post ol li::marker { color: var(--main-color); } .c-post ul li ul, .c-post ul li ol, .c-post ol li ul, .c-post ol li ol { margin-top: 0.5rem; margin-bottom: 0.5rem; } .c-post ul:last-child, .c-post ol:last-child { margin-bottom: 0; } .c-post ul { list-style-type: disc; } .c-post ul ul { list-style-type: circle; } .c-post ul ul ul { list-style-type: square; } .c-post ol { list-style-type: decimal; } .c-post ol li { padding-left: 0.5em; } .c-post ol ol { list-style-type: lower-alpha; } .c-post ol ol li { padding-left: 0.5em; } .c-post ol ol ol { list-style-type: lower-roman; } .c-post ol ol ol li { padding-left: 0.5em; } .c-post a { color: #39a4d9; text-decoration: underline; transition: all 0.3s; } .c-post a:focus { outline: 2px solid var(--main-color); outline-offset: 2px; } .c-post strong { font-weight: 700; } .c-post table, .c-post .wp-block-table { width: 100%; margin-bottom: 1.5rem; border-collapse: collapse; font-size: 1rem; font-weight: 400; line-height: 1.8; letter-spacing: 0.04em; } @media screen and (max-width: 767px) { .c-post table, .c-post .wp-block-table { font-size: 0.875rem; } } .c-post table thead, .c-post .wp-block-table thead { border-bottom: 3px solid var(--gray); } .c-post table th, .c-post table td, .c-post .wp-block-table th, .c-post .wp-block-table td { border: 1px solid var(--gray); padding: 0.75rem; text-align: left; vertical-align: top; } @media screen and (max-width: 767px) { .c-post table th, .c-post table td, .c-post .wp-block-table th, .c-post .wp-block-table td { padding: 0.5rem; } } .c-post table th, .c-post .wp-block-table th { background-color: var(--bg-gray); font-weight: bold; } .c-post table:last-child, .c-post .wp-block-table:last-child { margin-bottom: 0; } .c-post blockquote { border-left: 4px solid var(--main-color); padding-left: 1rem; font-style: italic; margin-bottom: 1.5rem; background-color: var(--bg-gray); padding: 1rem; border-radius: 4px; } .c-post blockquote:last-child { margin-bottom: 0; } .c-post .wp-block-embed-youtube .wp-block-embed__wrapper { aspect-ratio: 16/9; width: 100%; position: relative; margin-bottom: 1.5rem; } .c-post .wp-block-embed-youtube .wp-block-embed__wrapper iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0; vertical-align: bottom; } .c-post .wp-block-image { margin-bottom: 1.5rem; } .c-post .wp-block-image figcaption { font-size: 0.875rem; color: #666; margin-top: 0.5rem; font-style: italic; } @media screen and (max-width: 767px) { .c-post .wp-block-image figcaption { font-size: 0.75rem; } } .c-post .wp-block-image:last-child { margin-bottom: 0; } .c-post .wp-block-columns { margin-bottom: 1.5rem; } .c-post .wp-block-cover { margin-bottom: 1.5rem; } .c-post .wp-block-social-links { margin-bottom: 1.5rem; } .c-page-header { --height-wide-pc: 240px; --height-wide-sp: 100px; background: linear-gradient(90deg, #d50719 82.69%, rgba(255, 255, 255, 0) 98.56%); height: 130px; } @media screen and (max-width: 767px) { .c-page-header { height: 100px; } } .c-page-header__inner { height: 100%; display: flex; justify-content: flex-start; align-items: center; gap: 40px; } @media screen and (max-width: 767px) { .c-page-header__inner { gap: 20px; } } .c-page-header__title { color: #fff; font-size: 2.25rem; font-weight: 700; line-height: 1.4; letter-spacing: 0.05em; } @media screen and (max-width: 767px) { .c-page-header__title { font-size: 1.25rem; } } .c-page-header__text { color: #fff; font-size: 1rem; font-weight: 500; line-height: 1.4; margin-top: 20px; } @media screen and (max-width: 767px) { .c-page-header__text { display: none; } } .c-page-header--repair { background: linear-gradient(90deg, #0c3ed3 82.69%, rgba(255, 255, 255, 0) 98.56%); } .c-page-header--sellTop { background: #d50719; height: var(--height-wide-pc); } @media screen and (max-width: 767px) { .c-page-header--sellTop { height: var(--height-wide-sp); } } .c-page-header--sellTop .c-page-header__inner { justify-content: space-between; } .c-page-header--sellTop .c-page-header__body { max-width: 570px; min-width: 400px; } @media screen and (max-width: 767px) { .c-page-header--sellTop .c-page-header__body { max-width: initial; min-width: initial; } } @media screen and (max-width: 767px) { .c-page-header--sellTop .c-page-header__title { min-width: 200px; } } .c-page-header--sellTop .c-page-header__img { max-width: 390px; } @media screen and (max-width: 767px) { .c-page-header--sellTop .c-page-header__img { max-width: 230px; } } .c-page-header--sellDeviceParent, .c-page-header--repairDeviceParent, .c-page-header--repairAndroid { background: #d50719; height: var(--height-wide-pc); } @media screen and (max-width: 767px) { .c-page-header--sellDeviceParent, .c-page-header--repairDeviceParent, .c-page-header--repairAndroid { height: var(--height-wide-sp); } } .c-page-header--sellDeviceParent .c-page-header__inner, .c-page-header--repairDeviceParent .c-page-header__inner, .c-page-header--repairAndroid .c-page-header__inner { justify-content: space-between; } .c-page-header--sellDeviceParent .c-page-header__body, .c-page-header--repairDeviceParent .c-page-header__body, .c-page-header--repairAndroid .c-page-header__body { max-width: 780px; min-width: 400px; } @media screen and (max-width: 767px) { .c-page-header--sellDeviceParent .c-page-header__body, .c-page-header--repairDeviceParent .c-page-header__body, .c-page-header--repairAndroid .c-page-header__body { max-width: initial; min-width: initial; } } .c-page-header--sellDeviceParent .c-page-header__text, .c-page-header--repairDeviceParent .c-page-header__text, .c-page-header--repairAndroid .c-page-header__text { max-width: 630px; font-size: 1rem; } .c-page-header--sellDeviceParent .c-page-header__img, .c-page-header--repairDeviceParent .c-page-header__img, .c-page-header--repairAndroid .c-page-header__img { max-width: 207px; } @media screen and (max-width: 767px) { .c-page-header--sellDeviceParent .c-page-header__img, .c-page-header--repairDeviceParent .c-page-header__img, .c-page-header--repairAndroid .c-page-header__img { max-width: 60px; } } .c-page-header--repairDeviceParent, .c-page-header--repairAndroid { background: #0c3ed3; } .c-page-header--repairAndroid .c-page-header__body { max-width: 824px; } .c-page-header--sellDeviceChild { background: #d50719; height: var(--height-wide-pc); } @media screen and (max-width: 767px) { .c-page-header--sellDeviceChild { height: var(--height-wide-sp); } } .c-page-header--sellDeviceChild .c-page-header__inner { justify-content: space-between; } .c-page-header--sellDeviceChild .c-page-header__body { min-width: 400px; } @media screen and (max-width: 767px) { .c-page-header--sellDeviceChild .c-page-header__body { max-width: initial; min-width: initial; } } .c-page-header--sellDeviceChild .c-page-header__img { max-width: 180px; } @media screen and (max-width: 767px) { .c-page-header--sellDeviceChild .c-page-header__img { max-width: 60px; } } .c-page-header--sellPrice .c-page-header__inner { justify-content: center; } .c-page-header--repairTop { background: url(../img/repair/repair-top-bg.png) no-repeat center center/cover; height: var(--height-wide-pc); } @media screen and (max-width: 767px) { .c-page-header--repairTop { height: var(--height-wide-sp); background: url(../img/repair/repair-top-bg-sp.png) no-repeat center right/cover; } } .c-page-header--repairTop .c-page-header__inner { justify-content: space-between; } .c-page-header--repairTop .c-page-header__body { max-width: 815px; min-width: 400px; } @media screen and (max-width: 767px) { .c-page-header--repairTop .c-page-header__body { max-width: initial; min-width: initial; } } @media screen and (max-width: 767px) { .c-page-header--repairTop .c-page-header__title { min-width: 200px; } } .c-page-header--repairTop .c-page-header__img { max-width: 240px; } @media screen and (max-width: 767px) { .c-page-header--repairTop .c-page-header__img { max-width: 230px; } } .c-page-header--salesTop { background: url(../img/sales/sales-top-bg.png) no-repeat center center/cover; height: var(--height-wide-pc); } @media screen and (max-width: 767px) { .c-page-header--salesTop { height: var(--height-wide-sp); background: url(../img/sales/sales-top-bg-sp.png) no-repeat center right/cover; } } .c-page-header--salesLower { background: linear-gradient(90deg, #f07c00 82.69%, #fff 98.56%); } .c-breadcrumb { font-size: 0.875rem; font-weight: 500; line-height: 1.8; overflow: hidden; padding: 10px 0; } @media screen and (max-width: 767px) { .c-breadcrumb { font-size: 0.6875rem; padding: 4px 0; } } .c-breadcrumb ul { display: flex; flex-wrap: wrap; } .c-breadcrumb li { display: flex; } .c-breadcrumb li:not(:first-of-type)::before { content: ""; width: 12px; aspect-ratio: 1/2; height: auto; margin: 0 7px 0 4px; background-image: url(../img/common/arrow-icon.svg); background-size: contain; background-repeat: no-repeat; background-position: center; flex-shrink: 0; } @media screen and (max-width: 767px) { .c-breadcrumb li:not(:first-of-type)::before { width: 8px; margin: 0 4px 0 2px; } } .c-breadcrumb li a { letter-spacing: 0.05em; } @media (any-hover: hover) { .c-breadcrumb li a:hover { opacity: 0.7; } } .c-breadcrumb li span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; letter-spacing: 0.05em; } .c-tags__list { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } @media screen and (max-width: 767px) { .c-tags__list { gap: 4px; } } .c-tags__item { color: #fff; font-size: 0.875rem; line-height: 1; font-weight: 500; padding: 5px 16px; border-radius: 999px; width: -moz-fit-content; width: fit-content; } @media screen and (max-width: 767px) { .c-tags__item { font-size: 0.6875rem; padding: 2px 8px 4px; } } .c-tags__item--au { background-color: #ea5505; } .c-tags__item--docomo { background-color: #cc0033; } .c-tags__item--softbank { background-color: #a0a4a3; } .c-tags__item--sim-free { background-color: #414141; } .c-tags__item--y-mobile { background-color: #fe0032; } .c-tags__item--uq { background-color: #09f; } .c-tags__item--rakuten { background-color: #ff008c; } .c-tags__item--mineo { background-color: #00a23f; } .c-step-number { display: flex; justify-content: center; text-align: center; padding: 10px 0; font-family: "Roboto", sans-serif; font-size: 2rem; line-height: 1; color: #fff; position: relative; width: 50px; height: auto; margin-bottom: 40px; flex-shrink: 0; align-self: stretch; } @media screen and (max-width: 767px) { .c-step-number { width: 25px; font-size: 1.125rem; margin-bottom: 22px; } } .c-step-number:not(:first-child) { margin-top: 20px; } .c-step-number--1 { background-color: #E66A75; } .c-step-number--1::after { background-color: #E66A75; } .c-step-number--2 { background-color: #E2515E; } .c-step-number--2::after { background-color: #E2515E; } .c-step-number--3 { background-color: #DD3947; } .c-step-number--3::after { background-color: #DD3947; } .c-step-number--4 { background-color: #d50719; } .c-step-number--4::after { background-color: #d50719; } .c-step-number--5 { background-color: #9e0008; } .c-step-number--5::after { background-color: #9e0008; } .c-step-number-blue--1 { background: #6D8BE5; } .c-step-number-blue--1::after { background: #6D8BE5; } .c-step-number-blue--2 { background: #5578E0; } .c-step-number-blue--2::after { background: #5578E0; } .c-step-number-blue--3 { background: #3D65DC; } .c-step-number-blue--3::after { background: #3D65DC; } .c-step-number-blue--4 { background: #0c3ed3; } .c-step-number-blue--4::after { background: #0c3ed3; } .c-step-number::after { content: ""; position: absolute; bottom: -39px; left: 0; width: 100%; height: 40px; margin-top: auto; -webkit-clip-path: polygon(0 0, 100% 0, 100% 50%, 50% 100%, 0% 50%); clip-path: polygon(0 0, 100% 0, 100% 50%, 50% 100%, 0% 50%); } @media screen and (max-width: 767px) { .c-step-number::after { height: 22px; bottom: -21px; } } .c-price-table__top { color: #fff; background-color: #414141; padding: 7px 16px; font-size: 1.125rem; font-weight: 500; } @media screen and (max-width: 767px) { .c-price-table__top { padding-left: 8px; } } .c-price-table__table { width: 100%; height: -moz-fit-content; height: fit-content; } .c-price-table__row { border-bottom: 1px solid #c4c4c4; } .c-price-table__title { padding: 16px 0 9px; font-size: 0.875rem; font-weight: 500; text-align: left; } .c-price-table__title:first-child { padding-left: 16px; } @media screen and (max-width: 767px) { .c-price-table__title:first-child { padding-left: 0; } } .c-price-table__title:last-child { padding-right: 16px; } @media screen and (max-width: 767px) { .c-price-table__title:last-child { padding-right: 0; } } .c-price-table__volume { font-size: 0.875rem; font-weight: 700; letter-spacing: 0.04em; padding: 16px 0 16px 16px; min-width: 91px; } @media screen and (max-width: 767px) { .c-price-table__volume { padding: 10px 0 10px 0; } } .c-price-table__type { font-size: 0.875rem; min-width: 39px; display: block; padding: 16px 0; letter-spacing: 0.04em; display: flex; flex-direction: column; } @media screen and (max-width: 767px) { .c-price-table__type { padding: 10px 0; } } .c-price-table__price { color: #d50719; min-width: 120px; padding: 16px 0; } @media screen and (max-width: 767px) { .c-price-table__price { min-width: unset; flex-shrink: 0; padding: 10px 0; } } .c-price-table__price-new { display: block; font-size: 0.875rem; font-weight: 700; letter-spacing: 0.04em; } .c-price-table__price-old { display: block; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.04em; } @media screen and (max-width: 767px) { .c-price-table__price-old { font-size: 0.75rem; } } .c-price-table__button { display: block; width: -moz-fit-content; width: fit-content; color: #fff; font-size: 1rem; font-weight: 700; padding: 10px 11px; border-radius: 4px; background-color: #008bce; letter-spacing: 0.04em; margin: 0 0 0 auto; } @media screen and (max-width: 767px) { .c-price-table__button { padding: 10px 8px; font-size: 0.75rem; } } .c-price-table__button span { font-size: 0.75rem; letter-spacing: 0.04em; } @media screen and (max-width: 767px) { .c-price-table__button span { font-size: 0.625rem; } } .c-price-table__empty { margin-top: 24px; text-align: center; font-size: 1rem; font-weight: 500; color: #414141; } .c-price-table--child .c-price-table__title { font-size: 1rem; } @media screen and (max-width: 767px) { .c-price-table--child .c-price-table__title { font-size: 0.875rem; } } .c-price-table--child .c-price-table__title:first-child { padding-left: 24px; } @media screen and (max-width: 767px) { .c-price-table--child .c-price-table__title:first-child { padding-left: 0; } } .c-price-table--child .c-price-table__title:last-child { padding-right: 24px; } @media screen and (max-width: 767px) { .c-price-table--child .c-price-table__title:last-child { padding-right: 0; } } .c-price-table--child .c-price-table__volume { font-size: 1.125rem; min-width: 140px; padding-left: 24px; } @media screen and (max-width: 767px) { .c-price-table--child .c-price-table__volume { font-size: 0.875rem; padding-left: 0; min-width: unset; } } .c-price-table--child .c-price-table__type { min-width: 53px; gap: 5px; line-height: 1.4; } @media screen and (max-width: 767px) { .c-price-table--child .c-price-table__type { min-width: unset; gap: 0; } } .c-price-table--child .c-price-table__price { min-width: 255px; line-height: 1.4; } @media screen and (max-width: 767px) { .c-price-table--child .c-price-table__price { min-width: unset; } } .c-price-table--child .c-price-table__price-new { font-size: 1.125rem; } @media screen and (max-width: 767px) { .c-price-table--child .c-price-table__price-new { font-size: 0.875rem; } } .c-price-table--child .c-price-table__price-old { font-size: 1rem; } @media screen and (max-width: 767px) { .c-price-table--child .c-price-table__price-old { font-size: 0.75rem; } } .c-info { margin-top: 70px; margin-bottom: 60px; } .c-info__container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; } @media screen and (max-width: 767px) { .c-info__container { gap: 10px; } } @media screen and (max-width: 609px) { .c-info__container { gap: 16px; grid-template-columns: repeat(1, 1fr); } } .c-flow { margin-top: 60px; } .c-flow__container { margin-top: 16px; } .c-flow__item { background-color: #eee; padding: 10px 16px 30px 16px; } @media screen and (max-width: 767px) { .c-flow__item { padding: 10px 5px 16px 5px; } } .c-flow__item-titles { display: flex; gap: 10px; align-items: center; position: relative; top: 20px; } @media screen and (max-width: 767px) { .c-flow__item-titles { top: 12px; gap: 5px; } } .c-flow__item-title { font-size: 1.5rem; font-weight: 700; } @media screen and (max-width: 767px) { .c-flow__item-title { font-size: 0.875rem; } } .c-flow__item-title--big { font-size: 2.375rem; } @media screen and (max-width: 767px) { .c-flow__item-title--big { font-size: 1.375rem; } } .c-flow__item-title--red { color: #d50719; } .c-flow__item-title--blue { color: #0c3ed3; } .c-flow__item-title--orange { color: #f07c00; } .c-flow__item-img { width: 44px; height: 44px; } @media screen and (max-width: 767px) { .c-flow__item-img { width: 30px; height: 30px; } } .c-flow__item-img img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .c-flow__item-link { display: block; width: -moz-fit-content; width: fit-content; margin-left: auto; padding-right: 32px; position: relative; } @media screen and (max-width: 767px) { .c-flow__item-link { font-size: 0.875rem; } } .c-flow__item-link::after { content: ""; position: absolute; right: 0; width: 24px; height: 24px; background: url(../img/common/right-arrow.svg) no-repeat center center/contain; } @media screen and (max-width: 767px) { .c-flow__item-link::after { top: -2px; } } .c-flow__item-link--blue::after { background: url(../img/common/right-arrow-blue.svg) no-repeat center center/contain; } @media screen and (max-width: 767px) { .c-flow__item-body-wrap { overflow-x: auto; } } .c-flow__item-body { display: flex; justify-content: center; align-items: center; margin-top: 24px; gap: 16px; } @media screen and (max-width: 767px) { .c-flow__item-body { min-width: 600px; position: relative; gap: 0; } } .c-flow__item-body-item { display: flex; flex-direction: column; gap: 12px; } @media screen and (max-width: 767px) { .c-flow__item-body-item { width: 100%; gap: 6px; } } .c-flow__item-body-item-text { font-weight: 700; font-size: 1.375rem; text-align: center; } @media screen and (max-width: 767px) { .c-flow__item-body-item-text { font-size: 0.75rem; } } .c-flow__item-body-arrow { position: relative; top: 25px; } @media screen and (max-width: 767px) { .c-flow__item-body-arrow { flex-shrink: 0; width: 24px; height: 24px; top: 12px; } } .c-flow__scroll { font-size: 0.625rem; display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 16px; } .c-block-sell-device { padding-bottom: 80px; } .c-block-sell-device__categories > .wp-block-group__inner-container { display: flex; flex-direction: column; gap: 32px; margin-top: 24px; } .c-block-sell-device__table-list > .wp-block-group__inner-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(346px, 1fr)); gap: 40px 40px; margin-top: 40px; } @media screen and (max-width: 767px) { .c-block-sell-device__table-list .c-price-table__title:nth-child(2) { display: none; } } .c-block-sell-device__table-list .c-price-table__volume { width: 240px; } @media screen and (max-width: 767px) { .c-block-sell-device__table-list .c-price-table__volume { width: 41vw; padding-right: 8px; } } @media screen and (max-width: 767px) { .c-block-sell-device__table-list .c-price-table__type { display: none; } } @media screen and (max-width: 767px) { .c-block-sell-device__table-list .c-price-table__price { font-size: 0.75rem; } } .c-block-sell-device__row--hidden { display: none; } .c-block-sell-device__row--hidden.is-visible { display: table-row; } @media screen and (max-width: 767px) { .c-block-sell-device__type { color: #333333; font-size: 0.625rem; } } .c-block-sell-device__toggle { width: 129px; height: 40px; display: flex; justify-content: center; align-items: center; gap: 8px; font-size: 0.875rem; font-weight: 500; color: #008bce; background-color: #fff; border: 1px solid #008bce; border-radius: 4px; transition: all 0.3s ease; margin-top: 16px; margin-inline: auto; } .c-block-sell-device__toggle.is-expanded::after { transform: rotate(270deg); } .c-block-sell-device__toggle::after { content: ""; width: 12px; height: 12px; -webkit-mask: url(../img/common/arrow-icon.svg) no-repeat center/contain; mask: url(../img/common/arrow-icon.svg) no-repeat center/contain; background-color: #008bce; transform: rotate(90deg); } .c-block-sell-device__toggle:hover { opacity: 0.7; } .c-line__container { padding-top: 20px; padding-bottom: 80px; } @media screen and (max-width: 767px) { .c-line__container { padding-bottom: 40px; } } .c-line__banner { max-width: 850px; margin-inline: auto; display: block; } @media screen and (max-width: 767px) { .c-line__banner { max-width: 320px; } } .c-modal { display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100dvh; z-index: 999; } .c-modal.is-active { display: block; } .c-modal__bg { background-color: rgba(0, 0, 0, 0.4); width: 100%; height: 100%; } .c-modal__inner { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #fff; width: 680px; max-height: 80vh; padding: 24px 12px 40px; border-radius: 16px; box-shadow: 0 1px 7px 0 rgba(0, 0, 0, 0.3); } @media screen and (max-width: 767px) { .c-modal__inner { width: calc(100% - 40px); } } .c-modal__close { display: flex; justify-content: flex-end; align-items: center; margin: 5px 5px 5px auto; width: 13px; height: 13px; } .c-modal__content { max-height: calc(80vh - 47px); padding: 0 12px 24px; width: 100%; overflow: auto; } @media screen and (max-width: 767px) { .c-modal__content { padding: 0 10px 24px; } } .c-modal__title { font-size: 1.5rem; font-weight: 500; display: flex; justify-content: center; align-items: center; } @media screen and (max-width: 767px) { .c-modal__title { font-size: 1.125rem; } } .c-modal__title-icon { width: 32px; height: 32px; } @media screen and (max-width: 767px) { .c-modal__title-icon { width: 24px; height: 24px; } } .c-modal__desc { font-size: 1rem; line-height: 1.8; } @media screen and (max-width: 767px) { .c-modal__desc { font-size: 14px; line-height: 140%; } } .c-modal__table-row { border-bottom: 1px solid #c4c4c4; } .c-modal__table-title { padding: 12px 0; font-size: 0.875rem; font-weight: 700; line-height: 1.2; min-width: 108px; vertical-align: top; } .c-modal__table-text { padding: 12px 0; font-size: 0.875rem; font-weight: 400; line-height: 1.2; letter-spacing: 0; } .c-modal__tags { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } @media screen and (max-width: 767px) { .c-modal__tags { gap: 4px; grid-template-columns: repeat(2, 1fr); } } .c-modal__tags-item { padding: 12px 24px; width: 100%; display: grid; place-items: center; border-radius: 8px; color: #fff; font-size: 1rem; font-weight: 500; } @media screen and (max-width: 767px) { .c-modal__tags-item { padding: 12px 16px; } } .c-modal__imgs { display: flex; justify-content: space-between; align-items: center; overflow: auto; margin-top: 32px; } @media screen and (max-width: 767px) { .c-modal__imgs { margin-top: 16px; } } .c-modal__imgs img { flex-shrink: 0; } .c-modal__imgs img:nth-child(odd) { width: 120px; } @media screen and (max-width: 767px) { .c-modal__imgs img:nth-child(odd) { width: 104px; } } .c-modal__imgs img:nth-child(even) { width: 22px; } .c-modal__scroll { font-size: 0.625rem; display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 32px; } .c-faq { margin-top: 80px; margin-bottom: 40px; } @media screen and (max-width: 767px) { .c-faq { margin-top: 60px; } } .c-faq__list { display: flex; flex-direction: column; margin-top: 40px; } @media screen and (max-width: 767px) { .c-faq__list { margin-top: 16px; } } .c-faq__item { border-bottom: 1px solid #dedede; overflow: hidden; background-color: #fff; transition: all 0.3s; } .c-faq__question { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 16px 8px 16px 4px; background-color: #fff; border: none; cursor: pointer; text-align: left; transition: all 0.3s; } @media screen and (max-width: 767px) { .c-faq__question { padding: 16px 4px; } } @media (any-hover: hover) { .c-faq__question:hover { background-color: #eee; } } .c-faq__question[aria-expanded=true] .c-faq__question-icon::before { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; } .c-faq__question-text { display: flex; align-items: center; gap: 16px; } @media screen and (max-width: 767px) { .c-faq__question-text { font-size: 16px; gap: 8px; } } .c-faq__question-text-icon { flex-shrink: 0; } @media screen and (max-width: 767px) { .c-faq__question-text-icon { width: 32px; height: 32px; } } .c-faq__question-text-text { font-size: 18px; font-weight: 700; } @media screen and (max-width: 767px) { .c-faq__question-text-text { font-size: 14px; } } .c-faq__question-icon { position: relative; width: 24px; height: 24px; margin-left: 16px; flex-shrink: 0; } .c-faq__question-icon::before, .c-faq__question-icon::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #333333; transition: transform 0.3s ease, opacity 0.3s ease; } .c-faq__question-icon::before { width: 2px; height: 14px; } .c-faq__question-icon::after { width: 14px; height: 2px; } .c-faq__answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; background-color: #fff; } .c-faq__answer-inner { padding: 16px 40px; display: flex; align-items: flex-start; gap: 16px; } @media screen and (max-width: 767px) { .c-faq__answer-inner { padding: 0 16px 16px; gap: 8px; } } .c-faq__answer-inner-img { width: 40px; height: 40px; } @media screen and (max-width: 767px) { .c-faq__answer-inner-img { width: 32px; height: 32px; } } .c-faq__answer-inner-text { width: 90%; } @media screen and (max-width: 767px) { .c-faq__answer-inner-text { font-size: 0.8125rem; } } .c-faq__answer-inner-text a { color: #39a4d9; } .c-faq__item.is-open .c-faq__answer { transition: max-height 0.3s ease-in; } .c-faq__link { margin-top: 40px; text-align: center; } .c-repair-price-table { width: 100%; margin-top: 16px; } @media screen and (max-width: 767px) { .c-repair-price-table { padding: 0; margin-top: 8px; } } .c-repair-price-table__note { font-size: 0.625rem; display: flex; align-items: center; justify-content: flex-end; gap: 4px; padding: 0 20px; } .c-repair-price-table__note-icon { width: 14px; height: 14px; } @media screen and (max-width: 767px) { .c-repair-price-table__table { overflow: auto; margin-top: 8px; } } .c-repair-price-table__table table { width: 100%; } @media screen and (max-width: 767px) { .c-repair-price-table__table table { min-width: 682px; } } .c-repair-price-table__top { background-color: #0c3ed3; height: 34px; } @media screen and (max-width: 767px) { .c-repair-price-table__top { height: 45px; } } .c-repair-price-table__top-text { color: #fff; font-size: 0.875rem; font-weight: 500; } @media screen and (max-width: 767px) { .c-repair-price-table__top-text { font-size: 0.75rem; padding: 8px 0 6px; vertical-align: top; } } .c-repair-price-table__top-text:first-child { padding-left: 16px; text-align: left; width: 286px; } @media screen and (max-width: 767px) { .c-repair-price-table__top-text:first-child { padding-left: 2px; width: 170px; } } .c-repair-price-table__top-text:nth-child(2) { padding-right: 32px; text-align: right; width: 162px; } @media screen and (max-width: 767px) { .c-repair-price-table__top-text:nth-child(2) { padding-right: 13px; width: 103px; } } .c-repair-price-table__top-text:nth-child(2) span { font-size: 0.625rem; } @media screen and (max-width: 767px) { .c-repair-price-table__top-text:nth-child(2) span { display: block; } } .c-repair-price-table__top-text:nth-child(3) { padding-right: 32px; text-align: right; width: 122px; } @media screen and (max-width: 767px) { .c-repair-price-table__top-text:nth-child(3) { padding-right: 13px; width: 99px; } } .c-repair-price-table__top-text:nth-child(4) { padding-right: 32px; text-align: left; } @media screen and (max-width: 767px) { .c-repair-price-table__top-text:nth-child(4) { padding-right: 2px; } } .c-repair-price-table__body:nth-child(even) { background-color: #f6f6f6; } .c-repair-price-table__body-text { font-size: 0.875rem; font-weight: 400; vertical-align: top; line-height: 1.8; padding: 8px 0; letter-spacing: 0.04em; } @media screen and (max-width: 767px) { .c-repair-price-table__body-text { font-size: 0.75rem; padding: 4px 0; } } .c-repair-price-table__body-text:first-child { padding-left: 16px; text-align: left; font-weight: 900; } @media screen and (max-width: 767px) { .c-repair-price-table__body-text:first-child { padding-left: 2px; } } .c-repair-price-table__body-text:nth-child(2) { padding-right: 32px; text-align: right; font-weight: 700; } @media screen and (max-width: 767px) { .c-repair-price-table__body-text:nth-child(2) { padding-right: 12px; } } .c-repair-price-table__body-text:nth-child(3) { padding-right: 32px; text-align: right; } @media screen and (max-width: 767px) { .c-repair-price-table__body-text:nth-child(3) { padding-right: 12px; } } .c-repair-price-table__body-text:nth-child(4) { padding-right: 32px; text-align: left; } @media screen and (max-width: 767px) { .c-repair-price-table__body-text:nth-child(4) { padding-right: 2px; } } .c-repair-price-table__bottom-text { font-size: 0.75rem; text-align: right; margin-top: 1em; } @media screen and (max-width: 767px) { .c-repair-price-table__bottom-text { font-size: 0.625rem; } } .c-balloon { padding: 0.4em 1.2em; color: #fff; border-radius: 999px; font-size: 0.875rem; font-weight: 500; line-height: 1; display: grid; place-items: center; position: relative; width: -moz-fit-content; width: fit-content; } @media screen and (max-width: 767px) { .c-balloon { font-size: 0.75rem; } } .c-balloon::after { content: ""; width: 8px; height: 11px; background-color: #d50719; -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%); clip-path: polygon(0 0, 100% 0, 50% 100%); position: absolute; left: 50%; transform: translateX(-50%); bottom: -6px; } .c-balloon--red { background-color: #d50719; } .c-device-series { padding: 20px 0; } .c-device-series__title { display: none; color: #fff; font-size: 2.25rem; font-weight: 700; padding: 8px; line-height: 1; } @media screen and (max-width: 767px) { .c-device-series__title { font-size: 1.5rem; } } .c-device-series__categories { display: flex; flex-direction: column; gap: 32px; margin-top: 24px; } .c-device-series__subtitle { display: flex; align-items: center; font-size: 1.625rem; font-weight: 500; gap: 40px; letter-spacing: 0.15em; } .c-device-series__subtitle::after { content: ""; flex-grow: 1; height: 3px; } @media screen and (max-width: 767px) { .c-device-series__subtitle::after { height: 2px; } } @media screen and (max-width: 767px) { .c-device-series__subtitle { font-size: 1rem; gap: 8px; letter-spacing: 0.04em; } } .c-device-series__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(126px, 0px)); margin-top: 16px; gap: 12px 9px; } @media screen and (max-width: 767px) { .c-device-series__list { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); margin-top: 6px; gap: 4px; } } .c-device-series__item { display: flex; min-height: 98px; flex-direction: column; justify-content: flex-start; align-items: center; gap: 8px; border-radius: 10px; border: 1px solid #dedede; box-shadow: 0px 1px 4px rgba(12, 12, 13, 0.05); } @media screen and (max-width: 767px) { .c-device-series__item { aspect-ratio: auto; min-height: 75px; gap: 10px; border-radius: 6px; } } .c-device-series__item-link { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px; width: 100%; height: 100%; color: inherit; background-color: none; transition: all 0.3s; padding: 11px 4px 2px 4px; } @media screen and (max-width: 767px) { .c-device-series__item-link { gap: 5px; padding: 6px 4px 2px 4px; } } @media (any-hover: hover) { .c-device-series__item-link:hover { opacity: 0.7; } } .c-device-series__item-img { width: 50px; aspect-ratio: 1/1; } @media screen and (max-width: 767px) { .c-device-series__item-img { width: 40px; } } .c-device-series__item-text { font-size: 1rem; font-weight: 700; letter-spacing: 0; text-align: center; } @media screen and (max-width: 767px) { .c-device-series__item-text { font-size: 0.625rem; } } .c-device-series--red .c-device-series__title { background: linear-gradient(90deg, #d50719 82.69%, rgba(255, 255, 255, 0) 98.56%); } .c-device-series--red .c-device-series__subtitle { color: #d50719; } .c-device-series--red .c-device-series__subtitle::after { background-color: #d50719; } .c-device-series--blue .c-device-series__title { background: linear-gradient(90deg, #0c3ed3 82.69%, rgba(255, 255, 255, 0) 98.56%); } .c-device-series--blue .c-device-series__subtitle { color: #0c3ed3; } .c-device-series--blue .c-device-series__subtitle::after { background-color: #0c3ed3; } .c-page-top { position: fixed; bottom: 20px; right: 10px; width: 48px; height: 48px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.3s ease, visibility 0.3s ease; z-index: 129; } @media screen and (max-width: 767px) { .c-page-top { bottom: 50px; } } .c-page-top.is-show { opacity: 1; visibility: visible; pointer-events: auto; } .c-address { border: 2px solid #c4c4c4; border-radius: 16px; padding: 24px 15px; margin-top: 32px; position: relative; width: 350px; } @media screen and (max-width: 767px) { .c-address { padding: 16px; width: 100%; } } .c-address__title { position: absolute; top: -14px; left: 24px; background-color: #fff; padding: 0 8px; font-family: "Noto Sans JP", sans-serif; font-size: 1.25rem; font-weight: 700; color: #d50719; line-height: 1.4; letter-spacing: 2px; margin: 0; } @media screen and (max-width: 767px) { .c-address__title { font-size: 1.125rem; } } .c-address__title--blue { color: #0c3ed3; } .c-address__item { position: relative; padding-left: 12px; font-weight: 700; } @media screen and (max-width: 1199px) { .c-address__item { font-size: 0.875rem; } } .c-address__item--f18 { font-size: 1.125rem; } .c-address__item--tel { padding-left: 35px; } .c-address__item--tel::before { content: ""; position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; background: url("../img/common/tel-black.svg") no-repeat center center/contain; } .c-thanks { margin-top: 50px; margin-bottom: 50px; } @media screen and (max-width: 767px) { .c-thanks { margin-top: 40px; } } .c-thanks__body { text-align: center; } .c-thanks__title { font-size: 2.25rem; font-weight: 700; } @media screen and (max-width: 767px) { .c-thanks__title { font-size: 1.375rem; } } .c-thanks__en { font-size: 1.375rem; color: #d50719; margin-top: 20px; } @media screen and (max-width: 767px) { .c-thanks__en { font-size: 1.125rem; } } .c-thanks__en--blue { color: #0c3ed3; } .c-thanks__img { width: 60px; margin-top: 5px; margin-inline: auto; } .c-thanks__text { margin-top: 20px; line-height: 1.8; } .c-thanks__text-link { color: #39a4d9; } .c-thanks__text-note { font-weight: 400; } .c-thanks__address { width: -moz-fit-content; width: fit-content; margin-right: auto; margin-left: auto; margin-top: 40px; } .c-thanks__button { display: flex; justify-content: center; align-items: center; gap: 60px; margin-top: 50px; } @media screen and (max-width: 767px) { .c-thanks__button { flex-direction: column; gap: 24px; margin-top: 60px; } } @media screen and (max-width: 767px) { .c-thanks__button .c-btn { width: 240px; } } .c-cta { padding-top: 64px; padding-bottom: 80px; } .c-cta__contact { background-color: #f6f6f6; padding: 48px 0; border-radius: 20px; max-width: 850px; margin-right: auto; margin-left: auto; } @media screen and (max-width: 767px) { .c-cta__contact { padding: 48px 10px; } } .c-cta__contact-text { text-align: center; font-size: 1.5rem; font-weight: 500; } @media screen and (max-width: 767px) { .c-cta__contact-text { font-size: 1.25rem; } } .c-cta__contact-wrap { display: flex; justify-content: center; gap: 64px; margin-top: 60px; } @media screen and (max-width: 767px) { .c-cta__contact-wrap { gap: 40px; } } @media screen and (max-width: 609px) { .c-cta__contact-wrap { flex-direction: column; align-items: center; } } .c-cta__tel-link { position: relative; } @media screen and (max-width: 965px) { .c-cta__tel-link[href*="tel:"] { pointer-events: auto; } } .c-cta__tel-link::before { content: "お電話での査定も可能です"; color: #fff; font-size: 0.75rem; font-weight: 500; line-height: 1.2; letter-spacing: 0em; padding: 5px 20px; background-color: #d50719; border-radius: 14px; width: -moz-fit-content; width: fit-content; text-align: center; position: absolute; top: -26px; left: 50%; transform: translateX(-50%); white-space: nowrap; } .c-cta__tel-link::after { content: ""; width: 0; height: 0; position: absolute; left: 50%; top: -8px; transform: translateX(-50%); border-top: 12px solid #d50719; border-right: 6px solid transparent; border-left: 6px solid transparent; } .c-cta__tel-link--consultation::before { content: "お電話でのご相談も可能です"; } .c-cta__tel-inner { display: flex; align-items: center; gap: 8px; } .c-cta__tel-icon { width: 32px; height: 32px; } .c-cta__tel-number { font-size: 2rem; font-weight: 500; letter-spacing: 0.05em; } @media screen and (max-width: 767px) { .c-cta__tel-number { font-size: 1.75rem; } } .c-cta__tel-time { font-size: 0.875rem; color: #333333; text-align: center; } .c-cta__line-link { position: relative; background-color: #01b901; color: #fff; padding: 12px 24px; height: 50px; width: 240px; border-radius: 8px; box-shadow: 0 4px 10px -4px rgba(12, 12, 13, 0.2); } .c-cta__line-link::before { content: "写真を送るだけ！"; color: #01b901; font-size: 0.6875rem; font-weight: 500; letter-spacing: 0em; padding: 0px 14px 1px; background-color: #fff; border-radius: 14px; border: 1px solid #01b901; width: 120px; text-align: center; position: absolute; top: -10px; left: 50%; transform: translateX(-50%); white-space: nowrap; } .c-cta__line-inner { display: flex; justify-content: center; align-items: center; gap: 8px; } .c-cta__line-icon { width: 21px; height: 21px; } .c-cta__line-text { font-size: 1.125rem; } @media screen and (max-width: 767px) { .c-cta__line-text { font-size: 1rem; } } .c-cta__link { position: relative; background-color: #d50719; color: #fff; padding: 12px 24px; height: 50px; width: 240px; border-radius: 8px; box-shadow: 0 4px 10px -4px rgba(12, 12, 13, 0.2); } .c-cta__link--row { display: block; width: 100%; } .c-cta__link--row-02 { margin-top: 16px; background-color: #fff; border: 1px solid #d50719; color: #d50719; } .c-cta__link-inner { display: flex; justify-content: center; align-items: center; gap: 8px; } .c-cta__link-icon { display: grid; place-content: center; width: 21px; height: 21px; } .c-cta__link-icon--calendar img { filter: brightness(0) invert(1); } .c-cta__link-text { font-size: 1.125rem; } @media screen and (max-width: 767px) { .c-cta__link-text { font-size: 1rem; } } .c-cta__container { width: 270px; margin-top: -30px; } @media screen and (max-width: 767px) { .c-cta__container { width: 240px; } } @media screen and (max-width: 609px) { .c-cta__container { margin-top: 0; } } .c-sell-flow { padding: 50px 0 40px; } @media screen and (max-width: 767px) { .c-sell-flow { padding: 30px 0 20px; } } .c-sell-flow__header { text-align: center; margin-bottom: 40px; padding-top: 10px; } .c-sell-flow__subtitle { font-size: 1rem; font-weight: 400; color: #333333; line-height: 1.8; font-weight: 700; } @media screen and (max-width: 767px) { .c-sell-flow__subtitle { font-size: 0.875rem; } } .c-sell-flow__container { display: flex; align-items: flex-start; gap: 40px; max-width: 1080px; margin: 0 auto; } @media screen and (max-width: 767px) { .c-sell-flow__container { gap: 20px; } } .c-sell-flow__content { flex: 1; max-width: 1030px; } .c-sell-flow__step { display: flex; align-items: flex-start; gap: 24px; background-color: #fff; position: relative; } @media screen and (max-width: 767px) { .c-sell-flow__step { gap: 10px; } } .c-sell-flow__step:first-child .c-sell-flow__step-wrap { padding-top: 0; } .c-sell-flow__step:last-child .c-sell-flow__step-wrap { border-bottom: none; padding-bottom: 0; } .c-sell-flow__step-image { max-width: 370px; flex-shrink: 0; } @media screen and (max-width: 767px) { .c-sell-flow__step-image { max-width: 35vw; } } @media screen and (max-width: 609px) { .c-sell-flow__step-image { max-width: 100%; } } .c-sell-flow__step-image img { -o-object-fit: cover; object-fit: cover; } .c-sell-flow__step-wrap { flex-grow: 1; display: flex; gap: 24px; padding-bottom: 24px; padding-top: 24px; border-bottom: 2px solid #eee; } @media screen and (max-width: 609px) { .c-sell-flow__step-wrap { flex-direction: column; width: 100%; gap: 10px; } } .c-sell-flow__step-images { display: flex; flex-direction: column; gap: 48px; flex-shrink: 0; } @media screen and (max-width: 767px) { .c-sell-flow__step-images { gap: 20px; } } .c-sell-flow__step-body { display: flex; flex-direction: column; gap: 8px; } .c-sell-flow__step-title { font-size: 1.625rem; font-weight: 500; color: #d50719; line-height: 34px; margin: 0; } @media screen and (max-width: 767px) { .c-sell-flow__step-title { font-size: 1.375rem; } } .c-sell-flow__step-title--blue { color: #0c3ed3; } .c-sell-flow__step-text { font-size: 1rem; font-weight: 400; color: #333333; line-height: 1.8; margin: 0; } @media screen and (max-width: 767px) { .c-sell-flow__step-text { font-size: 0.875rem; } } .c-sell-flow__step-button { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; background-color: #fff; border: 1px solid #d50719; border-radius: 4px; font-size: 1rem; font-weight: 500; color: #d50719; line-height: 1.8; text-decoration: none; width: -moz-fit-content; width: fit-content; height: 40px; } @media screen and (max-width: 767px) { .c-sell-flow__step-button { font-size: 0.875rem; padding: 6px 12px; } } .c-sell-flow__step-button--blue { border: 1px solid #0c3ed3; color: #0c3ed3; } .c-sell-flow__step-tip { display: flex; align-items: center; gap: 8px; margin-top: 8px; } .c-sell-flow__step-tip--start { align-items: flex-start; } .c-sell-flow__step-tip-icon { width: 24px; height: 24px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .c-sell-flow__step-tip-text { font-weight: 700; } @media screen and (max-width: 767px) { .c-sell-flow__step-tip-text { font-size: 0.75rem; } } .c-sell-flow__step-tip-text-link { color: #39a4d9; } .c-sell-flow__step-farewell { position: absolute; right: 0px; top: 19px; max-width: 320px; } .c-sell-flow__step-farewell img { -o-object-fit: cover; object-fit: cover; } @media screen and (max-width: 999px) { .c-sell-flow__step-farewell { position: absolute; right: 0px; top: 90px; max-width: 180px; } } @media screen and (max-width: 767px) { .c-sell-flow__step-farewell { display: none; } } .c-sell-flow__kiyaku-button { text-align: center; margin-top: 40px; } .c-form__inner { display: flex; flex-direction: column; gap: 80px; } .c-form__content { display: flex; flex-direction: column; gap: 32px; } .c-form__row { display: flex; align-items: flex-start; gap: 10px; } @media screen and (max-width: 767px) { .c-form__row { flex-direction: column; } } .c-form__label { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; width: 220px; font-size: 1rem; font-weight: 700; flex-shrink: 0; padding-top: 10px; } @media screen and (max-width: 767px) { .c-form__label { width: 100%; } } .c-form__label:has(+ .c-form__right > .c-form__radios) { padding-top: 0; } .c-form__label-desc { width: 100%; font-size: 0.875rem; font-weight: 350; line-height: 120%; } .c-form__tag { display: grid; place-items: center; padding: 3px 8px; background-color: #d50719; color: #fff; font-size: 0.75rem; font-weight: 500; border-radius: 4px; } .c-form__tag--gray { color: #333333; background-color: #eee; } .c-form__right { width: 100%; display: flex; flex-direction: column; gap: 4px; } .c-form__input { width: 100%; padding: 10px 11px; outline: none; font-size: 1rem; letter-spacing: 0.04em; font-weight: 400; border: 1px solid #c4c4c4; } .c-form__input--pref { width: 200px; } .c-form__input:disabled { background: #eee; } .c-form__select > span { position: relative; } .c-form__select > span::after { content: ""; pointer-events: none; width: 16px; height: 16px; background: url("../img/common/arrow-icon.svg") no-repeat center center/contain; position: absolute; top: 50%; right: 12px; transform: translateY(-50%) rotate(90deg); } .c-form__checkbox input + span { position: relative; display: inline-block; width: auto; padding: 0 0 0 25px; cursor: pointer; margin-right: 5px; } .c-form__checkbox input + span::before { content: ""; position: absolute; top: 50%; left: 0; display: block; width: 22px; height: 22px; border: 1px solid #333333; background-color: #fff; transform: translateY(-50%); } .c-form__checkbox input + span::after { content: ""; position: absolute; top: 50%; left: 6px; display: block; width: 8px; height: 13px; margin-top: -8px; border-right: 3px solid #fff; border-bottom: 3px solid #fff; opacity: 0; transform: rotate(45deg); } .c-form__checkbox input:checked + span::before { border-color: #d50719; background-color: #d50719; } .c-form__checkbox input:checked + span::after { opacity: 1; } .c-form__checkbox .wpcf7-list-item { margin: 0 0 8px 0; } .c-form__example { font-size: 0.875rem; } .c-form__error { display: none; color: #d50719; } .c-form__post { display: flex; gap: 26px; align-items: center; } .c-form__post .c-form__input { width: 100px; } .c-form__post-btn { font-size: 0.875rem; font-weight: 400; display: grid; place-items: center; width: 80px; height: 36px; background-color: #eee; } .c-form__radios { display: flex; align-items: center; align-content: center; gap: 8px; flex: 1 0 0; flex-wrap: wrap; } .c-form__radios .wpcf7-form-control { display: flex; flex-wrap: wrap; gap: 8px; } .c-form__radios .wpcf7-list-item { margin: 0; } .c-form__radios .wpcf7-list-item label { padding-left: 22px; } .c-form__radios .wpcf7-list-item-label { position: relative; cursor: pointer; } .c-form__radios .wpcf7-list-item-label::before { content: ""; width: 16px; height: 16px; border: 1px solid #c4c4c4; border-radius: 50%; flex-shrink: 0; position: absolute; left: -19px; top: 50%; transform: translateY(-50%); } .c-form__radios .wpcf7-list-item-label::after { content: ""; position: absolute; left: -16px; top: 50%; transform: translateY(-50%); width: 10px; height: 10px; border-radius: 50%; background-color: #d50719; opacity: 0; transition: opacity 0.2s ease; } .c-form__radios .wpcf7-list-item input:checked + .wpcf7-list-item-label::before { border-color: #d50719; } .c-form__radios .wpcf7-list-item input:checked + .wpcf7-list-item-label::after { opacity: 1; } .c-form__radios .wpcf7-list-item input:disabled + .wpcf7-list-item-label::before { border-color: #c4c4c4; } .c-form__radios .wpcf7-list-item input:disabled + .wpcf7-list-item-label::after { background-color: #c4c4c4; } .c-form__check { display: flex; flex-direction: column; gap: 8px; } .c-form__check .wpcf7-list-item label { padding-left: 22px; } .c-form__check .wpcf7-list-item-label { position: relative; cursor: pointer; } .c-form__check .wpcf7-list-item-label::before { content: ""; width: 22px; height: 22px; border: 1px solid #333333; border-radius: 4px; flex-shrink: 0; position: absolute; left: -30px; top: 50%; transform: translateY(-50%); } .c-form__check .wpcf7-list-item-label::after { content: "✓"; color: #fff; display: grid; place-items: center; position: absolute; left: -29px; top: calc(50% - 2px); transform: translateY(-50%); width: 21px; height: 21px; border-radius: 4px; opacity: 0; transition: opacity 0.2s ease; } .c-form__check .wpcf7-list-item input:checked + .wpcf7-list-item-label::before { border-color: #d50719; background-color: #d50719; } .c-form__check .wpcf7-list-item input:checked + .wpcf7-list-item-label::after { opacity: 1; } .c-form__step-tip { display: flex; align-items: center; gap: 2px; margin-top: 2px; width: -moz-fit-content; width: fit-content; } .c-form__step-tip::before { content: ""; width: 24px; height: 24px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: url("../img/common/faq-icon-blue.svg") no-repeat center center/contain; } .c-form__file { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; padding: 4px 2px; } @media screen and (max-width: 767px) { .c-form__file { flex-direction: column; align-items: flex-start; } } .c-form__file-btn { padding: 7px 24px 6px 24px; border-radius: 4px; border: 1px solid #333333; font-family: "Noto Sans JP"; font-size: 1rem; font-weight: 400; } .c-form__file-name { font-size: 1rem; font-weight: 400; } .c-form__file-input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip: rect(0 0 0 0); overflow: hidden; } .c-form__step-tip-text { font-size: 0.875rem; color: #39a4d9; } @media screen and (max-width: 767px) { .c-form__step-tip-text { font-size: 0.75rem; } } .c-form__agree-text { text-align: center; } @media screen and (max-width: 767px) { .c-form__agree-text { font-size: 0.875rem; } } .c-form__agree-checks { margin: auto; width: -moz-fit-content; width: fit-content; margin-top: 8px; display: flex; flex-direction: column; gap: 8px; } .c-form__link { color: #39a4d9; } .c-form__actions { display: flex; justify-content: center; align-items: center; flex-direction: column; width: 320px; margin: auto; gap: 10px; } .c-form__btn { transition: all 0.3s; } .c-form__btn:disabled { filter: brightness(0.7); } .c-form__btn:not(:disabled) { cursor: pointer; } @media (any-hover: hover) { .c-form__btn:not(:disabled):hover { opacity: 0.7; } } .c-form .wpcf7-not-valid-tip, .c-form .wpcf7-response-output { display: none; } .c-form__server-feedback { color: #d50719; font-size: 0.875rem; text-align: center; } .c-form .wpcf7-turnstile { display: grid; justify-items: center; margin-top: 24px; } .c-apply-document { max-width: 990px; margin: 46px auto 60px; } @media screen and (max-width: 767px) { .c-apply-document__text { font-size: 0.875rem; } } .c-apply-document__text--desc { text-align: center; } @media screen and (max-width: 767px) { .c-apply-document__text--desc { text-align: left; } } .c-apply-document__text span { color: #d50719; font-weight: 700; } .c-apply-document__img { margin: 14px auto 0; width: 512px; height: 64px; } .c-apply-document__contents { display: grid; grid-template-columns: repeat(2, 1fr); gap: 80px; } @media screen and (max-width: 767px) { .c-apply-document__contents { grid-template-columns: 1fr; margin-top: 20px; } } .c-apply-document__content--red { --color: #d50719; } .c-apply-document__content--blue { --color: #0c3ed3; } .c-apply-document__title { background-color: #eee; padding: 4px 14px; color: var(--color); } @media screen and (max-width: 767px) { .c-apply-document__title { font-size: 0.875rem; } } .c-apply-document__title span { font-size: 1.25rem; font-weight: 700; } @media screen and (max-width: 767px) { .c-apply-document__title span { font-size: 1rem; } } .c-apply-document__send-money { margin-top: 16px; height: 64px; } @media screen and (max-width: 767px) { .c-apply-document__send-money { height: auto; } } .c-apply-document__top { margin-top: 16px; padding: 4px 10px; color: var(--color); font-weight: 700; letter-spacing: 1.6px; border-bottom: 2px solid var(--color); } @media screen and (max-width: 767px) { .c-apply-document__top { font-size: 0.875rem; } } .c-apply-document__list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; margin-left: 20px; } .c-apply-document__item { list-style: disc; font-weight: 700; } @media screen and (max-width: 767px) { .c-apply-document__item { font-size: 0.875rem; } } .c-apply-document__item span { font-weight: 400; letter-spacing: 0.04em; } .c-shop { padding: 60px 0 80px; } @media screen and (max-width: 767px) { .c-shop { padding: 40px 0; } } .c-shop__container { margin-top: 50px; } @media screen and (max-width: 767px) { .c-shop__container { margin-top: 24px; } } .c-shop__header { display: flex; justify-content: flex-start; align-items: center; } @media screen and (max-width: 767px) { .c-shop__header { flex-direction: column; align-items: flex-start; gap: 10px; } } .c-shop__title { font-size: 1.5rem; font-weight: 500; letter-spacing: 0.04em; padding-right: 52px; } @media screen and (max-width: 767px) { .c-shop__title { font-size: 1.25rem; padding-right: 0; } } .c-shop__wrap { display: flex; gap: 50px; margin-top: 40px; margin-bottom: 60px; } @media screen and (max-width: 767px) { .c-shop__wrap { flex-direction: column; gap: 32px; } } .c-shop__list { width: 530px; } @media screen and (max-width: 767px) { .c-shop__list { width: 100%; } } .c-shop__item { display: flex; gap: 10px; align-items: flex-start; position: relative; border-bottom: 1px solid #c4c4c4; padding: 10px 0; } .c-shop__map { max-width: 500px; width: 100%; height: 280px; position: relative; overflow: hidden; } @media screen and (max-width: 767px) { .c-shop__map { max-width: initial; } } .c-shop__map iframe { width: 100%; height: 100%; border: 0; } .c-shop__message-title { display: flex; align-items: center; gap: 8px; color: #d50719; font-size: 1.25rem; font-weight: 700; } @media screen and (max-width: 767px) { .c-shop__message-title { font-size: 1rem; } } .c-shop__message-text { margin-top: 8px; background-color: #eee; padding: 40px 24px; line-height: 1.8; } @media screen and (max-width: 767px) { .c-shop__message-text { font-size: 0.875rem; padding: 32px 24px; } } .c-shop__message-text strong { font-weight: bold; } .c-shop__gallery { margin-top: 80px; } .c-shop__gallery-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; margin-top: 40px; } @media screen and (max-width: 767px) { .c-shop__gallery-list { gap: 8px; margin-top: 24px; } } .c-shop__gallery-item { aspect-ratio: 13/8; overflow: hidden; border-radius: 10px; } .c-shop__gallery-item img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .c-shop__item-btn { display: grid; place-items: center; margin-top: 40px; } .c-service { background: url(../img/top/sales02.png) no-repeat center center/100% 100%; padding: 42px 100px 80px; } .c-service--bg { background: #fff; } @media screen and (max-width: 767px) { .c-service { padding: 32px 10px; } } .c-service__inner { max-width: 1024px; } @media screen and (max-width: 767px) { .c-service__inner { padding: 0; } } .c-service__title { text-align: center; font-size: 2.5rem; font-weight: 500; margin-bottom: 40px; } @media screen and (max-width: 767px) { .c-service__title { font-size: 1.5rem; margin-bottom: 20px; } } .c-service__container { display: flex; gap: 56px; justify-content: space-between; } @media screen and (max-width: 767px) { .c-service__container { gap: 8px; } } .c-service__img { box-shadow: 0 4px 8px 3px rgba(0, 0, 0, 0.15), 0 1px 3px 0 rgba(0, 0, 0, 0.3); } body.is-fixed { overflow: hidden; } .js-header { transition: top 0.3s ease; } .js-header.offset { top: -54px; } @media screen and (max-width: 965px) { .js-header.offset { top: 0; } } .l-header { width: 100%; position: fixed; top: 0; left: 0; z-index: 130; height: 104px; background-color: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); } @media screen and (max-width: 965px) { .l-header { height: 60px; } } .l-header__inner { max-width: 1920px; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 4px 40px 0; height: 100%; margin-inline: auto; } @media screen and (max-width: 1199px) { .l-header__inner { padding: 4px 16px 0; } } @media screen and (max-width: 965px) { .l-header__inner { align-items: center; padding: 0 0 0 16px; } } .l-header__logo { width: 130px; display: block; } @media screen and (max-width: 965px) { .l-header__logo { width: 104px; } } .l-header__logo img { width: 100%; } .l-header__content { display: flex; flex-direction: column; flex-shrink: 0; } @media screen and (max-width: 965px) { .l-header__content { flex-direction: row; align-items: center; } } @media screen and (max-width: 965px) { .l-header__top { gap: 0; display: flex; justify-content: space-between; align-items: center; } } .l-header__link { font-size: 1rem; } @media screen and (max-width: 965px) { .l-header__link { width: 60px; } .l-header__link[href*="tel:"] { pointer-events: auto; } } .l-header__btn { display: flex; height: 40px; padding: 0 20px; justify-content: center; align-items: center; gap: 8px; background-color: #fff; text-align: center; border-radius: 4px; } @media screen and (max-width: 965px) { .l-header__btn { height: 60px; flex-direction: column; font-size: 0.625rem; font-weight: 500; gap: 2px; border-radius: 0; padding: 0; } } .l-header__btn--line { background-color: #01b901; color: #fff; } .l-header__btn--contact { background-color: #d50719; color: #fff; } .l-header__btn-icon { width: 18px; height: 18px; line-height: 0; } @media screen and (max-width: 965px) { .l-header__btn-icon { width: 24px; height: 24px; } } .l-header__btn-icon img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .l-header__container { width: 177px; margin-left: auto; } @media screen and (max-width: 965px) { .l-header__container { display: none; } } .l-header__tel-link { display: flex; justify-content: center; align-items: center; gap: 4px; } .l-header__tel-link p { font-family: "Roboto", sans-serif; font-weight: 500; line-height: 1.2; letter-spacing: 0.05em; font-size: 1.375rem; white-space: nowrap; } .l-header__tel-link-icon { width: 20px; } .l-header__time { font-size: 0.75rem; line-height: 1.2; letter-spacing: 0em; margin-top: 2px; margin-left: 26px; } .l-header__hamburger { display: none; flex-direction: column; justify-content: center; align-items: center; width: 60px; height: 60px; background: none; border: none; cursor: pointer; } @media screen and (max-width: 965px) { .l-header__hamburger { display: flex; } } .l-header__hamburger-line { display: block; width: 28px; height: 2px; background-color: #333333; margin: 4px 0; transition: all 0.3s ease; } .js-open .l-header__hamburger-line:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .js-open .l-header__hamburger-line:nth-child(2) { opacity: 0; } .js-open .l-header__hamburger-line:nth-child(3) { transform: rotate(-45deg) translate(7px, -6px); } .l-header__bottom { display: flex; align-items: center; gap: 24px; margin-top: 11px; } @media screen and (max-width: 965px) { .l-header__bottom { display: none; } } .l-header__bottom--nav { margin-top: 8px; } .l-header__menu-item { position: relative; } @media screen and (min-width: 966px) { .l-header__menu-item:hover .l-header__submenu { opacity: 1; visibility: visible; transform: translateY(5px); } } .l-header__menu-link { display: flex; align-items: center; gap: 5px; padding: 5px 0; color: #333333; text-decoration: none; font-size: 0.9375rem; font-weight: 500; } .l-header__menu-link:hover { opacity: 1; color: #d50719; } .l-header__menu-link:hover .l-header__menu-link-icon { background-color: #d50719; } .l-header__menu-link-icon { width: 18px; height: 18px; background-color: #333333; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center center; mask-position: center center; transition: background-color 0.3s ease; } .l-header__menu-link-icon--home { -webkit-mask-image: url(../img/header/home-icon.svg); mask-image: url(../img/header/home-icon.svg); } .l-header__menu-link-icon--sell { -webkit-mask-image: url(../img/header/sell-icon.svg); mask-image: url(../img/header/sell-icon.svg); } .l-header__menu-link-icon--sales { -webkit-mask-image: url(../img/header/sales-icon.svg); mask-image: url(../img/header/sales-icon.svg); } .l-header__menu-link-icon--repair { -webkit-mask-image: url(../img/header/repair-icon.svg); mask-image: url(../img/header/repair-icon.svg); } .l-header__menu-link-icon--service { -webkit-mask-image: url(../img/header/service-icon.svg); mask-image: url(../img/header/service-icon.svg); } .l-header__menu-link-icon--faq { -webkit-mask-image: url(../img/header/faq-icon.svg); mask-image: url(../img/header/faq-icon.svg); } .l-header__menu-link-icon--shop { -webkit-mask-image: url(../img/header/shop-icon.svg); mask-image: url(../img/header/shop-icon.svg); } .l-header__submenu { position: absolute; top: 100%; left: 0; background-color: #fff; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.25); min-width: 200px; z-index: 10; } @media screen and (min-width: 966px) { .l-header__submenu { opacity: 0; visibility: hidden; transform: translateY(-5px); transition: all 0.3s ease; } } .l-header__submenu-item { position: relative; } .l-header__submenu-item::before { content: ""; position: absolute; top: 20px; left: 12px; width: 14px; height: 14px; background-color: #333333; -webkit-mask: url(../img/header/header-arrow.svg) center center/contain no-repeat; mask: url(../img/header/header-arrow.svg) center center/contain no-repeat; transition: filter 0.3s ease; } .l-header__submenu-item:hover::before { background-color: #d50719; } .l-header__submenu-link { display: flex; align-items: center; gap: 2px; padding: 16px 8px 16px 33px; color: #333333; font-size: 0.875rem; font-weight: 500; text-decoration: none; } @media screen and (max-width: 965px) { .l-header__submenu-link { padding: 15px 20px; font-size: 16px; } } .l-header__submenu-link[target=_blank]::after { content: ""; width: 13px; height: 13px; background: url(../img/header/net-icon.svg) no-repeat center center/contain; transition: filter 0.3s ease; } .l-header__submenu-link:hover { opacity: 1; background-color: #eee; color: #d50719; } .l-header__submenu-link:hover::after { filter: brightness(0) saturate(100%) invert(13%) sepia(82%) saturate(6611%) hue-rotate(351deg) brightness(90%) contrast(111%); } .l-header__nav { position: fixed; top: 0; right: 0; width: 100%; height: 100vh; background-color: #fff; z-index: 9999; transform: translateX(100%) translateY(0px); opacity: 0; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .l-header__nav.is-open { transform: translateX(0) translateY(0); opacity: 1; } @media screen and (min-width: 966px) { .l-header__nav { display: none; } } .l-header__nav-header { height: 60px; display: flex; justify-content: space-between; align-items: center; padding-left: 16px; } .l-header__nav-header .l-header__logo img { height: 40px; } .l-header__nav-close { display: grid; place-content: center; width: 60px; height: 60px; font-size: 2.125rem; line-height: 1; } .l-header__nav-content { padding: 20px 0; height: calc(100vh - 80px); overflow-y: auto; } .l-header__nav-menu { list-style: none; margin: 0; padding: 0; } .l-header__nav-item { border-bottom: 1px solid #c4c4c4; } .l-header__nav-item:last-child { border-bottom: none; } .l-header__nav-item-wrap { display: flex; justify-content: space-between; align-items: center; } .l-header__nav-link { display: flex; align-items: center; padding: 20px; color: #333333; text-decoration: none; font-size: 1.125rem; font-weight: 500; width: 90%; } .l-header__nav-link:hover { opacity: 1; color: #d50719; } .l-header__nav-link:hover .l-header__nav-icon { background-color: #d50719; } .l-header__nav-link--w100 { width: 100%; } .l-header__nav-arrow { transition: transform 0.3s ease, filter 0.3s ease; transform: rotate(90deg); right: 24px; position: relative; cursor: pointer; background: none; border: none; padding: 20px; margin: -20px; display: flex; align-items: center; justify-content: center; } .l-header__nav-arrow.is-active { transform: rotate(-90deg); } .l-header__nav-icon { margin-right: 8px; width: 24px; height: 24px; line-height: 0; background-color: #333333; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center center; mask-position: center center; transition: background-color 0.3s ease; } .l-header__nav-icon--home { -webkit-mask-image: url(../img/header/home-icon.svg); mask-image: url(../img/header/home-icon.svg); } .l-header__nav-icon--sell { -webkit-mask-image: url(../img/header/sell-icon.svg); mask-image: url(../img/header/sell-icon.svg); } .l-header__nav-icon--sales { -webkit-mask-image: url(../img/header/sales-icon.svg); mask-image: url(../img/header/sales-icon.svg); } .l-header__nav-icon--repair { -webkit-mask-image: url(../img/header/repair-icon.svg); mask-image: url(../img/header/repair-icon.svg); } .l-header__nav-icon--service { -webkit-mask-image: url(../img/header/service-icon.svg); mask-image: url(../img/header/service-icon.svg); } .l-header__nav-icon--faq { -webkit-mask-image: url(../img/header/faq-icon.svg); mask-image: url(../img/header/faq-icon.svg); } .l-header__nav-icon--shop { -webkit-mask-image: url(../img/header/shop-icon.svg); mask-image: url(../img/header/shop-icon.svg); } .l-header__nav-submenu { height: 0; overflow: hidden; transition: height 0.5s ease; } .l-header__nav-submenu-list { list-style: none; margin: 0; padding: 0; } .l-header__nav-submenu-item { border-bottom: 1px solid #fff; } .l-header__nav-submenu-item:last-child { border-bottom: none; } .l-header__nav-submenu-link { display: block; padding: 16px 20px 16px 52px; color: #333333; text-decoration: none; font-size: 1rem; line-height: 1; } .l-header__nav-submenu-link:hover { opacity: 1; background-color: #fff; color: #d50719; } .l-header__nav-contact { padding: 40px; border-top: 1px solid #c4c4c4; margin-top: auto; } .l-header__nav-contact-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 216px; height: 50px; margin-right: auto; margin-left: auto; padding: 0 24px; background-color: #d50719; color: #fff; text-decoration: none; border-radius: 4px; font-size: 1.25rem; font-weight: 500; margin-bottom: 20px; } .l-header__nav-contact-btn img { width: 18px; height: 12px; } .l-header__nav-phone { width: -moz-fit-content; width: fit-content; margin-inline: auto; display: flex; align-items: center; justify-content: center; gap: 4px; } .l-header__nav-phone p { color: #333333; font-family: "Roboto", sans-serif; font-size: 1.5rem; font-weight: 500; letter-spacing: 0.04em; } .l-header__nav-phone-icon { width: 24px; height: 24px; } .l-header__nav-hours { font-size: 0.875rem; text-align: center; letter-spacing: 0em; } .l-footer { margin-inline: auto; } .l-footer__up { color: #fff; background-color: #333333; padding-top: 60px; padding-bottom: 60px; } @media screen and (max-width: 965px) { .l-footer__up { padding-top: 40px; padding-bottom: 40px; } } .l-footer__inner { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; } @media screen and (max-width: 965px) { .l-footer__inner { flex-direction: column; margin-right: auto; margin-left: auto; } } .l-footer__logo { display: block; } @media screen and (max-width: 767px) { .l-footer__logo { width: 157px; } } .l-footer__tel { margin-top: 17px; } .l-footer__tel-link { display: flex; width: -moz-fit-content; width: fit-content; align-items: center; white-space: nowrap; } .l-footer__tel-link p { font-size: 1.75rem; padding-left: 8px; } .l-footer__tel-link-icon { transform: rotateX("45deg"); width: 24px; height: 22px; } .l-footer__time { font-size: 0.75rem; } .l-footer__btns { margin-top: 17px; } @media screen and (max-width: 965px) { .l-footer__btns { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 1fr); align-items: center; gap: 8px; } } .l-footer__btn { display: flex; background-color: #fff; width: 240px; height: 40px; color: #333333; font-size: 0.9375rem; align-items: center; justify-content: center; gap: 6px; padding: 10px; border-radius: 4px; } @media screen and (max-width: 767px) { .l-footer__btn { width: 162px; } } .l-footer__btn:not(:first-child) { margin-top: 17px; } @media screen and (max-width: 965px) { .l-footer__btn:not(:first-child) { margin-top: 0; } } .l-footer__btn--line { background-color: #01b901; color: #fff; } .l-footer__btn-icon { display: grid; place-content: center; width: 20px; height: 20px; line-height: 0; } .l-footer__btn-icon img { width: 100%; -o-object-fit: contain; object-fit: contain; } @media screen and (max-width: 965px) { .l-footer__repair { margin-top: 40px; } } .l-footer__link { display: block; font-size: 0.875rem; line-height: 1.8; } .l-footer__link:not(:first-child) { margin-top: 5px; } .l-footer__link--fz16 { font-size: 1rem; } .l-footer__link--fwbold { font-weight: 700; } .l-footer__link--net { position: relative; } .l-footer__link--net::after { content: ""; position: absolute; top: 50%; transform: translateY(-50%); width: 13px; height: 13px; background: url(../img/common/net-icon.svg) no-repeat center center/contain; } .l-footer__repair { margin-top: 54px; } .l-footer__link-instagram { width: 32px; height: 32px; margin-top: 10px; display: block; } .l-footer__bottom { padding-top: 24px; padding-bottom: 24px; } @media screen and (max-width: 767px) { .l-footer__bottom { padding-bottom: 80px; } } .l-footer__bottom-links { display: flex; justify-content: center; gap: 24px; } @media screen and (max-width: 767px) { .l-footer__bottom-links { flex-wrap: wrap; justify-content: flex-start; gap: 8px 14px; } } .l-footer__bottom-link { font-size: 0.875rem; letter-spacing: 0.04em; } @media screen and (max-width: 767px) { .l-footer__bottom-link { font-size: 0.8125rem; } } .l-footer__number { font-size: 0.75rem; text-align: center; margin-top: 32px; } .l-footer__copy { font-size: 0.75rem; text-align: center; } .l-container { max-width: 1920px; margin-inline: auto; min-width: 1160px; } @media screen and (max-width: 767px) { .l-container { min-width: auto; } } .l-inner { max-width: 1160px; padding: 0 40px; margin-inline: auto; } @media screen and (max-width: 767px) { .l-inner { padding: 0 20px; } } @media screen and (max-width: 767px) { .l-inner --top { padding: 0; } } .l-inner--min { max-width: 870px; } .l-main { padding-top: 104px; } @media screen and (max-width: 965px) { .l-main { padding-top: 60px; } } .js-fadein { opacity: 0; visibility: hidden; transform: translateY(20px); transition: opacity 1s, visibility 1s, transform 1s; } .js-fadein.visible { opacity: 1; visibility: visible; transform: translateY(0); } .js-fadein--delay1 { transition-delay: 0.2s; } .js-fadein--delay2 { transition-delay: 0.4s; } .js-fadein--delay3 { transition-delay: 0.6s; } .p-top { margin-bottom: 80px; } .p-top__btn { text-align: center; margin-top: 38px; } @media screen and (max-width: 767px) { .p-top__btn { margin-top: 32px; } } .p-top__sell-inner { position: relative; } .p-top__sell-inner::before { content: ""; position: absolute; top: 0; left: 0; width: 8px; height: 100%; background: linear-gradient(180deg, #d50719 82.69%, #fff 98.56%); } @media screen and (max-width: 767px) { .p-top__sell-inner::before { width: 4px; left: 0px; } } @media screen and (max-width: 767px) { .p-top__sell-inner { padding: 0; } } .p-top__repair, .p-top__sales { margin-top: 100px; } @media screen and (max-width: 767px) { .p-top__repair, .p-top__sales { margin-top: 56px; } } .p-top__repair-inner { position: relative; } .p-top__repair-inner::before { content: ""; position: absolute; top: 0; left: 0; width: 8px; height: 100%; background: linear-gradient(180deg, #0c3ed3 82.69%, #fff 98.56%); } @media screen and (max-width: 767px) { .p-top__repair-inner::before { width: 4px; left: 0px; } } @media screen and (max-width: 767px) { .p-top__repair-inner { padding: 0; } } .p-top__sales-inner { position: relative; } .p-top__sales-inner::before { content: ""; position: absolute; top: 0; left: 0; width: 8px; height: 100%; background: linear-gradient(180deg, #f07c00 82.69%, #fff 98.56%); } @media screen and (max-width: 767px) { .p-top__sales-inner::before { width: 4px; left: 0px; } } @media screen and (max-width: 767px) { .p-top__sales-inner { padding: 0; } } .p-top__sales-sales { padding: 80px 100px; } @media screen and (max-width: 767px) { .p-top__sales-sales { padding: 36px 0; } } @media screen and (max-width: 767px) { .p-top__sales-inner { padding: 0; } } .p-top__sales-sales-title { text-align: center; font-size: 2.5rem; font-weight: 500; margin-bottom: 23px; } @media screen and (max-width: 767px) { .p-top__sales-sales-title { font-size: 1.5rem; margin-bottom: 20px; } } .p-top__sales-sales-text { text-align: center; font-size: 1.125rem; } @media screen and (max-width: 767px) { .p-top__sales-sales-text { font-size: 0.9375rem; } } .p-top__sales-sales-img { max-width: 1000px; height: auto; margin-top: 40px; display: block; margin-right: auto; margin-left: auto; } @media screen and (max-width: 767px) { .p-top__sales-sales-img { margin-top: 20px; } } .p-top__feature { margin-top: 100px; margin-bottom: 80px; } .p-top__feature-content { display: flex; gap: 10px; justify-content: space-between; } @media screen and (max-width: 767px) { .p-top__feature-content { flex-direction: column; } } .p-top__feature-content-item { padding: 40px 8px 20px; max-width: 330px; margin-right: auto; margin-left: auto; } .p-top__feature-content-item-img { width: 120px; height: 120px; margin-right: auto; margin-left: auto; } @media screen and (max-width: 767px) { .p-top__feature-content-item-img { width: 80px; height: 80px; } } .p-top__feature-content-item-title { text-align: center; font-size: 1.25rem; position: relative; margin-top: 36px; width: 320px; } @media screen and (max-width: 767px) { .p-top__feature-content-item-title { font-size: 1.125rem; width: 312px; } } .p-top__feature-content-item-title::before, .p-top__feature-content-item-title::after { content: ""; position: relative; left: 50%; transform: translateX(-50%); background-color: #d50719; height: 2px; width: 100%; display: block; } .p-top__feature-content-item-title::before { top: -16px; } @media screen and (max-width: 767px) { .p-top__feature-content-item-title::before { top: -10px; } } .p-top__feature-content-item-title::after { bottom: -16px; } @media screen and (max-width: 767px) { .p-top__feature-content-item-title::after { bottom: -10px; } } .p-top__feature-content-item-text { margin-top: 32px; text-align: center; } @media screen and (max-width: 767px) { .p-top__feature-content-item-text { font-size: 0.9375rem; margin-top: 20px; } } .p-top__sales-subSecTitle { margin: 40px auto; } @media screen and (max-width: 767px) { .p-top__sales-subSecTitle { margin: 20px auto; } } .p-sell__methods { padding-bottom: 60px; } .p-sell__methods-title { font-size: 1.875rem; font-weight: 700; text-align: center; position: relative; margin-top: 60px; } @media screen and (max-width: 767px) { .p-sell__methods-title { font-size: 1.375rem; } } .p-sell__methods-title::after { content: ""; position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); width: 80px; height: 2px; background-color: #d50719; } @media screen and (max-width: 767px) { .p-sell__methods-title::after { width: 60px; } } .p-sell__methods-items { display: flex; justify-content: center; gap: 30px; margin-top: 60px; } @media screen and (max-width: 767px) { .p-sell__methods-items { gap: 10px; } } @media screen and (max-width: 609px) { .p-sell__methods-items { flex-direction: column; align-items: center; gap: 20px; } } .p-sell__methods-link { box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.1); max-width: 340px; } .p-sell__methods-item-body { background-color: #fff; padding: 8px 18px 24px 18px; } .p-sell__methods-item-body-inner { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; } .p-sell__methods-item-body-inner--start { justify-content: flex-start; gap: 6px; } .p-sell__methods-item-body-inner--start img { width: 24px; height: 24px; } .p-sell__methods-item-title { font-size: 1.5rem; font-weight: 700; } @media screen and (max-width: 767px) { .p-sell__methods-item-title { font-size: 1.25rem; } } .p-sell__wrap { margin-top: 70px; } .p-sell__voice { margin-top: 70px; background-color: #eee; padding: 60px 0; } .p-page { padding-top: 40px; padding-bottom: 80px; } .p-sell-store { padding: 50px 0 40px; } .p-sell-store__documents { border: 2px solid #c4c4c4; border-radius: 16px; padding: 24px; margin-top: 32px; position: relative; background-color: #fff; } @media screen and (max-width: 767px) { .p-sell-store__documents { padding: 16px 12px; } } .p-sell-store__documents-title { position: absolute; top: -14px; left: 24px; background-color: #fff; padding: 0 8px; font-size: 1.25rem; font-weight: 700; color: #d50719; line-height: 1.4; margin: 0; } @media screen and (max-width: 767px) { .p-sell-store__documents-title { font-size: 1.125rem; } } .p-sell-store__documents-content { display: flex; gap: 5px; } @media screen and (max-width: 767px) { .p-sell-store__documents-content { flex-direction: column; } } .p-sell-store__documents-list { list-style: none; padding: 0; margin: 0; flex-shrink: 0; display: flex; flex-direction: column; gap: 8px; } .p-sell-store__documents-item { font-weight: 700; position: relative; padding-left: 12px; } @media screen and (max-width: 767px) { .p-sell-store__documents-item { font-size: 0.875rem; } } .p-sell-store__documents-item::before { content: ""; position: absolute; left: 0; top: 13px; width: 4px; height: 4px; background-color: #333333; border-radius: 50%; } @media screen and (max-width: 767px) { .p-sell-store__documents-item::before { top: 10px; } } .p-sell-store__documents-item-sub { font-weight: 400; letter-spacing: 0.04em; } @media screen and (max-width: 767px) { .p-sell-store__documents-img { width: 80px; margin-left: auto; margin-top: -70px; transform: translateX(8px); } } .p-sell-store__step-farewell { position: absolute; right: 0px; top: 19px; max-width: 320px; } .p-sell-store__step-farewell img { -o-object-fit: cover; object-fit: cover; } @media screen and (max-width: 767px) { .p-sell-store__step-farewell { display: none; } } .p-sell-store__search { padding-bottom: 80px; } .p-sell-device__date { text-align: right; font-size: 0.875rem; margin-top: 8px; letter-spacing: 0; } .p-sell-device__date span { display: block; font-size: 0.75rem; margin-top: 8px; } @media screen and (max-width: 767px) { .p-sell-device__date span { font-size: 0.625rem; margin-top: 4px; } } @media screen and (max-width: 767px) { .p-sell-device__date { font-size: 0.625rem; margin-top: 12px; } } .p-sell-device__table { padding: 56px 0; } .p-sell-device__table-head { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 10px 55px; } .p-sell-device__table-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(346px, 1fr)); gap: 40px 20px; margin-top: 40px; } .p-sell-high-price { background-color: #fff; padding: 50px 0 40px; } .p-sell-high-price__container { display: flex; align-items: flex-start; gap: 40px; max-width: 1080px; margin: 0 auto; } @media screen and (max-width: 767px) { .p-sell-high-price__container { gap: 20px; } } .p-sell-high-price__content { flex: 1; max-width: 1030px; } .p-sell-high-price__step { display: flex; align-items: flex-start; gap: 24px; background-color: #fff; position: relative; } @media screen and (max-width: 767px) { .p-sell-high-price__step { gap: 10px; } } .p-sell-high-price__step-image { width: 370px; height: 185px; flex-shrink: 0; } .p-sell-high-price__step-image img { -o-object-fit: cover; object-fit: cover; } @media screen and (max-width: 999px) { .p-sell-high-price__step-image { width: 250px; height: auto; } } .p-sell-high-price__step-wrap { display: flex; gap: 15px; padding-bottom: 44px; padding-top: 24px; border-bottom: 2px solid #eee; } @media screen and (max-width: 767px) { .p-sell-high-price__step-wrap { flex-direction: column; } } .p-sell-high-price__step-images { display: flex; flex-direction: column; gap: 48px; width: 370px; flex-shrink: 0; } @media screen and (max-width: 999px) { .p-sell-high-price__step-images { max-width: 250px; } } @media screen and (max-width: 669px) { .p-sell-high-price__step-images { flex-direction: column; gap: 20px; } } .p-sell-high-price__step-body { display: flex; flex-direction: column; gap: 8px; width: 600px; } @media screen and (max-width: 767px) { .p-sell-high-price__step-body { width: 100%; } } .p-sell-high-price__step-title { font-size: 1.625rem; font-weight: 500; color: #d50719; } .p-sell-high-price__step-text-blue { color: #39a4d9; } .p-sell-high-price__step-text-blue[data-modal-trigger] { background: none; border: none; padding: 0; cursor: pointer; text-decoration: underline; font-family: inherit; font-size: inherit; } .p-sell-high-price__step-text-blue[data-modal-trigger]:hover { opacity: 0.8; } .p-sell-high-price__step-image-text { font-size: 0.875rem; } .p-sell-high-price__step-tip { display: flex; align-items: center; gap: 8px; margin-top: 8px; width: -moz-fit-content; width: fit-content; } .p-sell-high-price__step-tip-icon { width: 24px; height: 24px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .p-sell-high-price__step-tip-text { color: #39a4d9; } @media screen and (max-width: 767px) { .p-sell-high-price__step-tip-text { font-size: 0.75rem; } } .p-sell-high-price__documents { border: 2px solid #c4c4c4; border-radius: 16px; padding: 24px; margin-top: 32px; position: relative; background-color: #fff; } .p-sell-high-price__documents-title { position: absolute; top: -14px; left: 24px; background-color: #fff; padding: 0 8px; font-size: 1.25rem; font-weight: 700; color: #d50719; } .p-sell-high-price__documents-content { display: flex; gap: 5px; } .p-sell-high-price__documents-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; } .p-sell-high-price__documents-item { position: relative; padding-left: 12px; } .p-sell-high-price__documents-item::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; background-color: #333333; border-radius: 50%; } @media screen and (max-width: 1199px) { .p-sell-high-price__documents-item { font-size: 0.875rem; } } @media screen and (max-width: 767px) { .p-sell-high-price__documents-img { display: none; } } .p-sell-high-price__step-farewell { position: absolute; right: 0px; top: 19px; max-width: 320px; } .p-sell-high-price__step-farewell img { -o-object-fit: cover; object-fit: cover; } @media screen and (max-width: 999px) { .p-sell-high-price__step-farewell { position: absolute; right: 0px; top: 90px; max-width: 180px; } } @media screen and (max-width: 767px) { .p-sell-high-price__step-farewell { display: none; } } @media screen and (max-width: 767px) { .p-sell-high-price { padding: 30px 0 20px; } .p-sell-high-price__subtitle { font-size: 0.875rem; } .p-sell-high-price__step-title { font-size: 1.375rem; letter-spacing: 2px; } .p-sell-high-price__step-text { font-size: 0.875rem; } .p-sell-high-price__step-button { font-size: 0.875rem; padding: 6px 12px; } .p-sell-high-price__documents { padding: 16px; } .p-sell-high-price__documents-title { font-size: 1.125rem; } .p-sell-high-price__documents-item { font-size: 0.875rem; } } .p-sell-device-child__table { padding: 56px 0; } @media screen and (max-width: 767px) { .p-sell-device-child__table { padding: 24px 0; } } .p-sell-device-child__table-head { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 16px 55px; } .p-sell-device-child__table-empty { margin-top: 24px; text-align: center; font-size: 1rem; font-weight: 500; color: #414141; } .p-sell-device-child__table-content { display: grid; grid-template-columns: 620fr 410fr; gap: 50px; margin-top: 64px; width: 100%; } @media screen and (max-width: 767px) { .p-sell-device-child__table-content { grid-template-columns: 1fr; margin-top: 20px; } } .p-sell-device-child__table-content-info { padding: 40px 22px; background-color: #eee; } @media screen and (max-width: 767px) { .p-sell-device-child__table-content-info { padding: 20px 16px; } } .p-sell-device-child__table-content-info-title { font-size: 1.375rem; font-weight: 700; } @media screen and (max-width: 767px) { .p-sell-device-child__table-content-info-title { font-size: 1.125rem; } } .p-sell-device-child__table-content-info-table { margin-top: 24px; } .p-sell-device-child__table-content-info-table-head { font-size: 0.875rem; font-weight: 700; min-width: 88px; text-align: left; padding-bottom: 16px; align-content: start; } @media screen and (max-width: 767px) { .p-sell-device-child__table-content-info-table-head { font-size: 0.75rem; min-width: 80px; } } .p-sell-device-child__table-content-info-table-text { font-size: 0.875rem; font-weight: 500; padding-bottom: 16px; letter-spacing: 0.04em; } @media screen and (max-width: 767px) { .p-sell-device-child__table-content-info-table-text { font-size: 0.75rem; } } .p-sell-price__title { display: flex; justify-content: space-between; align-items: center; margin-top: 40px; } @media screen and (max-width: 767px) { .p-sell-price__title { margin-top: 45px; } } .p-sell-price__title-text { font-size: 2.25rem; letter-spacing: 0.04em; font-weight: 700; } @media screen and (max-width: 767px) { .p-sell-price__title-text { font-size: 1.375rem; } } .p-sell-price__title-img { max-width: 154px; aspect-ratio: 1/1; } @media screen and (max-width: 767px) { .p-sell-price__title-img { max-width: 70px; } } .p-sell-price__container { display: flex; align-items: flex-start; gap: 40px; margin-top: 40px; } @media screen and (max-width: 767px) { .p-sell-price__container { gap: 20px; } } .p-sell-price__content { width: 100%; } .p-sell-price__step-wrap { display: flex; gap: 15px; padding-bottom: 44px; flex-grow: 1; } @media screen and (max-width: 767px) { .p-sell-price__step-wrap { flex-direction: column; } } .p-sell-price__step { display: flex; align-items: flex-start; gap: 24px; background-color: #fff; position: relative; } @media screen and (max-width: 767px) { .p-sell-price__step { gap: 24px; } } .p-sell-price__step.is-hidden { display: none; } .p-sell-price__step:last-child .p-sell-price__step-wrap { padding-bottom: 64px; } @media screen and (max-width: 767px) { .p-sell-price__step:last-child .p-sell-price__step-wrap { padding-bottom: 180px; } } @media screen and (max-width: 767px) { .p-sell-price__step-number { width: 25px; font-size: 1.125rem; } } .p-sell-price__step-body { display: flex; flex-direction: column; gap: 8px; width: 100%; } .p-sell-price__step-top { display: flex; gap: 19px; align-items: center; } @media screen and (max-width: 767px) { .p-sell-price__step-top { flex-direction: column; gap: 0; align-items: flex-start; } } .p-sell-price__step-title { font-size: 1.25rem; font-weight: 500; } @media screen and (max-width: 767px) { .p-sell-price__step-title { font-size: 1.125rem; } } .p-sell-price__step-tip { display: flex; align-items: center; gap: 2px; width: -moz-fit-content; width: fit-content; } .p-sell-price__step-tip-icon { width: 21px; height: 21px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .p-sell-price__step-tip-text { color: #39a4d9; font-size: 0.875rem; } @media screen and (max-width: 767px) { .p-sell-price__step-tip-text { font-size: 0.75rem; } } .p-sell-price__step-select { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 24px; } @media screen and (max-width: 767px) { .p-sell-price__step-select { gap: 4px; margin-top: 10px; } } .p-sell-price__step-select--capacity { display: flex; } .p-sell-price__step-select--capacity .p-sell-price__step-label { flex: 1; } .p-sell-price__step-select--capacity:has(> :nth-child(5)) { flex-wrap: wrap; } .p-sell-price__step-select--capacity:has(> :nth-child(5)) .p-sell-price__step-label { max-width: 173px; min-width: 173px; } @media screen and (max-width: 767px) { .p-sell-price__step-select--capacity:has(> :nth-child(5)) .p-sell-price__step-label { max-width: calc((100% - 12px) / 4); min-width: calc((100% - 12px) / 4); } } .p-sell-price__step-select--network { grid-template-columns: repeat(3, 1fr); } @media screen and (max-width: 767px) { .p-sell-price__step-select--network { grid-template-columns: 1fr; } } .p-sell-price__step-select--battery { gap: 20px; } @media screen and (max-width: 767px) { .p-sell-price__step-select--battery { grid-template-columns: repeat(2, 1fr); gap: 8px 20px; } } .p-sell-price__step-select--rank { grid-template-columns: 1fr; } .p-sell-price__step-label { font-size: 1rem; font-weight: 500; height: 48px; display: grid; place-items: center; cursor: pointer; border-radius: 8px; border: 1px solid #333333; position: relative; max-width: 515px; } @media screen and (max-width: 767px) { .p-sell-price__step-label { font-size: 0.75rem; height: 38px; } } .p-sell-price__step-label input { position: absolute; } .p-sell-price__step-label:has(input:checked) { background-color: #414141; color: #fff; } .p-sell-price__step-label--battery { position: relative; z-index: 0; } @media screen and (max-width: 767px) { .p-sell-price__step-label--battery { border-radius: 4px; } } .p-sell-price__step-label--battery::before { content: ""; position: absolute; inset: 0; border-radius: 8px; background: #fff; z-index: -1; } .p-sell-price__step-label--battery::after { content: ""; position: absolute; top: 50%; left: -10px; width: 17px; height: 24px; border-radius: 4px 0 0 4px; border: 1px solid #414141; background: var(--white, #fff); transform: translateY(-50%); z-index: -2; } .p-sell-price__step-label:has(input:checked)::before, .p-sell-price__step-label:has(input:checked)::after { background-color: #414141; } .p-sell-price__step-label-inner { display: flex; justify-content: center; align-items: baseline; } .p-sell-price__step-label-inner--center { align-items: center; gap: 8px; } .p-sell-price__step-label-inner--rank { gap: 10px; width: 100%; padding: 0 24px; align-items: center; } @media screen and (max-width: 767px) { .p-sell-price__step-label-inner--rank { padding: 0 16px; letter-spacing: 0.02em; gap: 0; } } .p-sell-price__step-label-m { font-size: 1.375rem; } @media screen and (max-width: 767px) { .p-sell-price__step-label-m { font-size: 1rem; letter-spacing: 0.04em; } } .p-sell-price__step-label-l { font-size: 1.5rem; } @media screen and (max-width: 767px) { .p-sell-price__step-label-l { font-size: 1rem; } } .p-sell-price__step-label-xl { font-size: 1.625rem; } @media screen and (max-width: 767px) { .p-sell-price__step-label-xl { font-size: 1rem; } } .p-sell-price__step-rank { width: 50px; } @media screen and (max-width: 767px) { .p-sell-price__step-rank { width: 40px; } } .p-sell-price__step-price { flex-grow: 1; text-align: right; } .p-sell-price__step-desc { margin-top: 56px; display: flex; flex-direction: column; gap: 6px; } .p-sell-price__step-desc-title { font-size: 1.25rem; font-weight: 500; } @media screen and (max-width: 767px) { .p-sell-price__step-desc-title { font-size: 1.125rem; } } .p-sell-price__step-desc-text { font-size: 0.875rem; } @media screen and (max-width: 767px) { .p-sell-price__step-desc-text { font-size: 0.75rem; } } .p-sell-price__step-desc-img { height: 225px; width: 100%; } @media screen and (max-width: 767px) { .p-sell-price__step-desc-img { height: 89px; } } .p-sell-price__step-desc-img img { -o-object-fit: contain; object-fit: contain; -o-object-position: left; object-position: left; } .p-sell-price__result { background-color: #eee; padding: 40px; margin-bottom: 40px; position: relative; } .p-sell-price__result.is-hidden { display: none; } @media screen and (max-width: 767px) { .p-sell-price__result { padding: 24px 16px; } } .p-sell-price__result-img { position: absolute; top: -30px; right: 52px; width: 292px; height: 144px; } @media screen and (max-width: 767px) { .p-sell-price__result-img { top: -154px; right: auto; left: 49px; width: 264px; height: 165px; } } .p-sell-price__result-price { font-size: 1.25rem; font-weight: 500; } @media screen and (max-width: 767px) { .p-sell-price__result-price { font-size: 1.125rem; } } .p-sell-price__result-price-num { color: #d50719; font-size: 3rem; margin-left: 28px; } @media screen and (max-width: 767px) { .p-sell-price__result-price-num { font-size: 2rem; margin-left: 16px; } } .p-sell-price__result-price-value { letter-spacing: 0.05em; } .p-sell-price__result-price-unit { font-size: 1.625rem; margin-left: 8px; } @media screen and (max-width: 767px) { .p-sell-price__result-price-unit { font-size: 1.25rem; margin-left: 4px; } } .p-sell-price__result-text { font-size: 0.875rem; line-height: 1.6; margin-top: 24px; } .p-sell-price__result-text a { color: #39a4d9; } .p-sell-price__result-buttons { display: flex; justify-content: center; align-items: center; gap: 15px; margin-top: 76px; } @media screen and (max-width: 767px) { .p-sell-price__result-buttons { flex-direction: column; margin-top: 40px; gap: 24px; } } .p-sell-price__result-button { position: relative; } @media screen and (max-width: 767px) { .p-sell-price__result-button { width: 239px; font-size: 15px; } } .p-sell-price__result-button-balloon { position: absolute; left: 0; top: -32px; } @media screen and (max-width: 767px) { .p-sell-price__result-button-balloon { top: -13px; left: 50%; transform: translateX(-50%); } } .p-sell-price__no-data { margin: 40px 0; padding: 40px 24px; background-color: #eee; border-radius: 8px; text-align: center; font-weight: 500; } @media screen and (max-width: 767px) { .p-sell-price__no-data { padding: 24px 16px; margin: 24px 0; } } .p-sell-price__no-data-text { font-size: 1rem; } @media screen and (max-width: 767px) { .p-sell-price__no-data-text { font-size: 0.875rem; } } .p-repair { padding-bottom: 80px; } .p-repair__methods { padding-bottom: 60px; } .p-repair__methods-title { font-size: 1.875rem; font-weight: 700; text-align: center; position: relative; margin-top: 60px; } @media screen and (max-width: 767px) { .p-repair__methods-title { font-size: 1.375rem; } } .p-repair__methods-title::after { content: ""; position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); width: 80px; height: 2px; background-color: #0c3ed3; } @media screen and (max-width: 767px) { .p-repair__methods-title::after { width: 60px; } } .p-repair__methods-items { display: flex; justify-content: center; gap: 30px; margin-top: 60px; } @media screen and (max-width: 767px) { .p-repair__methods-items { gap: 10px; } } @media screen and (max-width: 609px) { .p-repair__methods-items { flex-direction: column; align-items: center; gap: 20px; } } .p-repair__methods-link { box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.1); max-width: 340px; } .p-repair__methods-item-body { background-color: #fff; padding: 8px 18px 24px 18px; } .p-repair__methods-item-body-inner { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; } .p-repair__methods-item-body-inner--start { justify-content: flex-start; gap: 6px; } .p-repair__methods-item-body-inner--start img { width: 24px; height: 24px; } .p-repair__methods-item-title { font-size: 1.5rem; font-weight: 700; } .p-repair__wrap { margin-top: 70px; } .p-how-to-sell { margin-bottom: 80px; } .p-how-to-sell__flow { margin-top: 60px; margin-bottom: 60px; } .p-how-to-sell__flow-item { border-bottom: 1px solid #c4c4c4; padding-bottom: 60px; } .p-how-to-sell__flow-item:nth-of-type(n + 2) { padding-top: 40px; } .p-how-to-sell__flow-item:last-of-type { border-bottom: none; } @media screen and (max-width: 767px) { .p-how-to-sell__flow-item { padding-bottom: 30px; } } .p-how-to-sell__flow-item-titles { display: flex; justify-content: flex-start; align-items: center; gap: 20px; } .p-how-to-sell__flow-item-number { width: 124px; } @media screen and (max-width: 767px) { .p-how-to-sell__flow-item-number { width: 90px; } } .p-how-to-sell__flow-item-title { font-size: 1.625rem; font-weight: 700; } @media screen and (max-width: 767px) { .p-how-to-sell__flow-item-title { font-size: 1.375rem; } } .p-how-to-sell__floe-item-body-container { display: flex; justify-content: space-between; align-items: flex-start; gap: 60px; margin-top: 32px; } @media screen and (max-width: 767px) { .p-how-to-sell__floe-item-body-container { gap: 16px; } } @media screen and (max-width: 609px) { .p-how-to-sell__floe-item-body-container { flex-direction: column-reverse; gap: 24px; } } .p-how-to-sell__floe-item-body--bl { border-bottom: 1px solid #c4c4c4; padding-bottom: 40px; } @media screen and (max-width: 609px) { .p-how-to-sell__floe-item-body--bl { padding-bottom: 24px; } } .p-how-to-sell__floe-item-body:not(:first-of-type) { margin-top: 32px; } @media screen and (max-width: 609px) { .p-how-to-sell__floe-item-body:not(:first-of-type) { margin-top: 24px; } } .p-how-to-sell__floe-item-body-left { flex-shrink: 0; } @media screen and (max-width: 609px) { .p-how-to-sell__floe-item-body-left { width: 100%; } } @media screen and (max-width: 609px) { .p-how-to-sell__floe-item-body-right { width: 100%; } } .p-how-to-sell__flow-links { display: flex; justify-content: flex-start; align-items: center; gap: 16px; margin-top: 16px; } @media screen and (max-width: 767px) { .p-how-to-sell__flow-links { gap: 8px; } } @media screen and (max-width: 609px) { .p-how-to-sell__flow-links { flex-wrap: wrap; } } .p-how-to-sell__flow-item-body-title { font-weight: 500; margin-bottom: 14px; } @media screen and (max-width: 767px) { .p-how-to-sell__flow-item-body-title { font-size: 0.875rem; } } .p-how-to-sell__flow-item-body-title--big { font-size: 1.5rem; font-weight: 700; color: #d50719; } @media screen and (max-width: 767px) { .p-how-to-sell__flow-item-body-title--big { font-size: 1.25rem; } } .p-how-to-sell__flow-item-text { max-width: 596px; } @media screen and (max-width: 767px) { .p-how-to-sell__flow-item-text { font-size: 0.875rem; } } .p-how-to-sell__flow-link { width: -moz-fit-content; width: fit-content; display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 4px; height: 40px; line-height: 1; } @media screen and (max-width: 767px) { .p-how-to-sell__flow-link { font-size: 0.875rem; gap: 4px; padding: 6px 12px; } } .p-how-to-sell__flow-link img { width: 24px; aspect-ratio: 1/1; -o-object-fit: contain; object-fit: contain; } @media screen and (max-width: 767px) { .p-how-to-sell__flow-link img { width: 20px; } } @media screen and (max-width: 767px) { .p-how-to-sell__flow-link--buy, .p-how-to-sell__flow-link--line, .p-how-to-sell__flow-link--contact { width: 156px; } } .p-how-to-sell__flow-link--buy { background-color: #eee; } .p-how-to-sell__flow-link--line { background-color: #01b901; color: #fff; } .p-how-to-sell__flow-link--contact { background-color: #d50719; color: #fff; } .p-how-to-sell__flow-link--redBorder { border: 1px solid #d50719; color: #d50719; background-color: #fff; } @media screen and (max-width: 767px) { .p-how-to-sell__caution { font-size: 0.75rem; } } .p-repair-device__table { padding: 56px 0; } @media screen and (max-width: 767px) { .p-repair-device__table { padding: 40px 0; } } .p-repair-device__table-select { position: relative; display: inline-block; min-width: 540px; margin-top: 40px; } @media screen and (max-width: 767px) { .p-repair-device__table-select { min-width: 100%; margin-top: 20px; } } .p-repair-device__table-select::after { content: ""; position: absolute; top: 50%; right: 16px; width: 16px; height: 16px; background: url("../img/common/arrow-icon.svg") no-repeat center/contain; pointer-events: none; transform: translateY(-50%) rotate(90deg); } .p-repair-device__table-select-input { width: 100%; padding: 5.5px 32px 5.5px 16px; border-radius: 4px; border: 1px solid #c4c4c4; font-size: 1rem; line-height: 1.8; } .p-repair-device__contact { display: flex; width: 850px; padding: 48px 0; flex-direction: column; justify-content: center; align-items: center; gap: 40px; border-radius: 20px; background: #f6f6f6; margin-inline: auto; } @media screen and (max-width: 767px) { .p-repair-device__contact { width: 100%; } } .p-repair-device__contact-title { font-size: 1.5rem; font-weight: 500; } @media screen and (max-width: 767px) { .p-repair-device__contact-title { font-size: 1.25rem; } } .p-repair-device__contact-content { display: flex; align-items: center; justify-content: center; gap: 64px; } @media screen and (max-width: 767px) { .p-repair-device__contact-content { gap: 40px; } } @media screen and (max-width: 609px) { .p-repair-device__contact-content { flex-direction: column; } } .p-repair-device__contact-content-balloon { margin: auto; font-size: 0.75rem; } .p-repair-device__contact-tel-link { display: flex; align-items: center; gap: 2px; } .p-repair-device__contact-tel-link-icon { width: 32px; height: 32px; } .p-repair-device__contact-tel-link-icon img { width: 100%; height: auto; display: block; } .p-repair-device__contact-tel-number { font-size: 2rem; font-weight: 500; letter-spacing: 0.05em; } @media screen and (max-width: 767px) { .p-repair-device__contact-tel-number { font-size: 1.75rem; } } .p-repair-device__contact-tel-note { font-size: 0.875rem; font-weight: 400; text-align: center; } .p-repair-device__contact-buttons { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; } .p-repair-device__contact-button { width: 270px; } @media screen and (max-width: 767px) { .p-repair-device__contact-button { width: 240px; } } .p-repair-android__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 24px; } @media screen and (max-width: 767px) { .p-repair-android__list { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; } } .p-repair-android__item { padding: 16px; border-radius: 10px; background: #fff; box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.25); } @media screen and (max-width: 767px) { .p-repair-android__item { padding: 10px; } } .p-repair-android__item-link { display: flex; padding: 16px; align-items: flex-start; gap: 12px; } @media screen and (max-width: 767px) { .p-repair-android__item-link { padding: 8px; gap: 6px; } } .p-repair-android__item-img { width: 80px; flex-shrink: 0; } @media screen and (max-width: 767px) { .p-repair-android__item-img { width: 40px; } } .p-repair-android__item-text { font-size: 1.125rem; font-weight: 700; line-height: 120%; letter-spacing: 1.8px; } @media screen and (max-width: 767px) { .p-repair-android__item-text { font-size: 0.75rem; } } .p-repair-android__item-text span { display: block; font-size: 0.9375rem; } @media screen and (max-width: 767px) { .p-repair-android__item-text span { font-size: 0.625rem; } } .p-tokushoho { padding: 80px 0; } @media screen and (max-width: 767px) { .p-tokushoho { padding: 40px 0; } } .p-tokushoho__list { max-width: 850px; margin-inline: auto; } .p-tokushoho__item { display: flex; border-bottom: 1px solid #dedede; } @media screen and (max-width: 767px) { .p-tokushoho__item { flex-direction: column; } } .p-tokushoho__label { font-size: 1rem; font-weight: 700; padding: 20px 16px; min-width: 260px; } @media screen and (max-width: 767px) { .p-tokushoho__label { font-size: 0.875rem; padding: 15px 0 10px; min-width: auto; } } .p-tokushoho__value { padding: 20px 0; } @media screen and (max-width: 767px) { .p-tokushoho__value { font-size: 0.875rem; padding: 0 0 15px; } } .p-tokushoho__value p { margin: 0 0 0.5em; } .p-tokushoho__value p:last-child { margin-bottom: 0; } .p-tokushoho__list-inner li { padding-left: 1.2em; position: relative; margin-bottom: 0.3em; } @media screen and (max-width: 767px) { .p-tokushoho__list-inner li { font-size: 0.875rem; line-height: 1.6; padding-left: 1em; } } .p-tokushoho__list-inner li::before { content: "・"; position: absolute; left: 0; } .p-tokushoho__list-inner li:last-child { margin-bottom: 0; } .p-sell-delivery-flow { padding: 50px 0 40px; } @media screen and (max-width: 767px) { .p-sell-delivery-flow { padding: 30px 0 20px; } } .p-sell-delivery-flow__step-line { text-decoration: underline; color: #01b901; } .p-sell-delivery-flow__caution { text-align: center; margin-top: 56px; } .p-sell-delivery-flow__caution-text { color: #d50719; font-weight: 700; } .p-sell-delivery-flow__transfer-img { text-align: center; } .p-sell-request__desc { margin: 60px auto 0; width: -moz-fit-content; width: fit-content; } .p-sell-request__desc a { color: #39a4d9; } .p-sell-request__contact-content { display: flex; align-items: center; justify-content: center; gap: 64px; margin-top: 40px; } @media screen and (max-width: 767px) { .p-sell-request__contact-content { flex-direction: column; gap: 40px; } } .p-sell-request__contact-content-balloon { margin: auto; } @media screen and (max-width: 767px) { .p-sell-request__contact-content-balloon { font-size: 0.875rem; } } .p-sell-request__contact-tel-link { display: flex; align-items: center; gap: 2px; font-size: 2rem; font-weight: 500; white-space: nowrap; } .p-sell-request__contact-tel-link-icon { width: 32px; height: 32px; } .p-sell-request__contact-tel-link-icon img { width: 100%; height: auto; display: block; } .p-sell-request__contact-tel-note { font-size: 0.875rem; font-weight: 400; text-align: center; } .p-sell-request__contact-buttons { display: flex; width: 320px; flex-direction: column; align-items: flex-start; gap: 16px; } .p-sell-request__form { margin-top: 60px; } .p-reservation { padding-top: 40px; padding-bottom: 80px; } .p-reservation__text { text-align: center; } @media screen and (max-width: 767px) { .p-reservation__text { font-size: 0.875rem; } } .p-reservation__arrow-icon { position: absolute; top: 50%; right: 20px; width: 12px; height: 12px; background: url("../img/common/arrow-icon.svg") no-repeat center/contain; transform: translateY(-50%) rotate(90deg); pointer-events: none; } .p-reservation__label-required { color: #d50719; } .p-reservation .ea-standard { width: 750px; margin-inline: auto; margin-top: 40px; } @media screen and (max-width: 767px) { .p-reservation .ea-standard { width: 100%; margin-top: 20px; } } @media screen and (max-width: 767px) { .p-reservation .ea-standard .step { padding-left: 0; padding-right: 0; } } .p-reservation .ea-standard .step .ea-label { display: none; } .p-reservation .ea-standard .step label { width: 20%; font-size: 1rem; text-align: left; vertical-align: top; padding-top: 15px; } @media screen and (max-width: 767px) { .p-reservation .ea-standard .step label { width: 100%; font-size: 0.875rem; } } .p-reservation .ea-standard .step select { position: relative; width: 100%; height: 48px; font-size: 1rem; line-height: 1.8; border: 1px solid #c4c4c4; padding: 10px 40px 10px 11px; cursor: pointer; } .p-reservation .ea-standard .step select.custom-field { width: 80%; margin-top: 5px; } @media screen and (max-width: 767px) { .p-reservation .ea-standard .step select.custom-field { display: block; width: 100%; } } .p-reservation .ea-standard .step input.custom-field { width: 80%; height: 48px; font-size: 1rem; border: 1px solid #c4c4c4; padding: 10px 11px; } @media screen and (max-width: 767px) { .p-reservation .ea-standard .step input.custom-field { display: block; width: 100%; } } .p-reservation .ea-standard .step textarea { width: 80%; height: 150px; font-size: 1rem; border: 1px solid #c4c4c4; padding: 10px 11px; } @media screen and (max-width: 767px) { .p-reservation .ea-standard .step textarea { display: block; width: 100%; } } .p-reservation .ea-standard .step small { font-size: 0.875rem; padding-bottom: 10px; } .p-reservation .ea-standard .step .time { margin-bottom: 40px; } .p-reservation .ea-standard .step.final .p-reservation__arrow-icon { top: 30px; } @media screen and (max-width: 767px) { .p-reservation .ea-standard .step.final .p-reservation__arrow-icon { top: 65px; } } .p-reservation .ea-standard .step.final label.error { position: absolute; width: 0 !important; font-size: 0.875rem; color: #d50719; } @media screen and (max-width: 767px) { .p-reservation .ea-standard .step.final label.error { position: static; width: 100% !important; padding-top: 0; } } .p-reservation .ea-standard .step.final .text-link { color: #39a4d9; } .p-reservation .ea-standard .step.final #booking-overview { display: none; } .p-reservation .ea-standard .step.final .agree-checkbox { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; padding-bottom: 35px; } .p-reservation .ea-standard .step.final label.i-agree { position: relative; padding-top: 0; padding-left: 35px; padding-right: 0; cursor: pointer; } .p-reservation .ea-standard .step.final label.i-agree::before { content: ""; position: absolute; top: 0; left: 0; width: 22px; height: 22px; border: 1px solid #333333; border-radius: 4px; } .p-reservation .ea-standard .step.final label.i-agree:after { content: "✓"; color: #fff; display: grid; place-items: center; position: absolute; top: 0; left: 1px; width: 20px; height: 20px; font-size: 1rem; line-height: 1; opacity: 0; transition: opacity 0.2s ease; } .p-reservation .ea-standard .step.final input[type=checkbox] { position: absolute; opacity: 0; margin: 0; } .p-reservation .ea-standard .step.final input[type=checkbox]:checked + label.i-agree::before { border-color: #d50719; background-color: #d50719; } .p-reservation .ea-standard .step.final input[type=checkbox]:checked + label.i-agree::after { opacity: 1; } .p-reservation .ea-standard .step.final #iagree-error { width: 100% !important; position: absolute; bottom: 0; left: 0; width: 100%; z-index: 10; text-align: center; padding-top: 0; } .p-reservation .ea-standard .step.final button { display: grid; place-content: center; width: 240px; height: 48px; font-size: 1.125rem; border-radius: 4px; } .p-reservation .ea-standard .step.final button.ea-submit { background-color: #d50719; color: #fff; } .p-reservation .ea-standard .step.final button.ea-cancel { display: none; background-color: #c4c4c4; margin-left: 40px; } .p-reservation .ea-standard .selected-time { background-color: #d50719 !important; } @media screen and (max-width: 767px) { .p-reservation .ea-standard .time-value { font-size: 1rem; } } .p-reservation .ea-standard .section { color: #d50719; font-weight: 700; } .p-sales { padding-bottom: 80px; } .p-sales__popular { padding: 60px 0; background: url(../img/top/sales02.png) no-repeat center center/100% 100%; } .p-sales__popular-items { margin-top: 60px; margin-bottom: 60px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 24px; } @media screen and (max-width: 767px) { .p-sales__popular-items { gap: 5px; margin-top: 30px; margin-bottom: 30px; } } @media screen and (max-width: 609px) { .p-sales__popular-items { grid-template-columns: repeat(3, 1fr); gap: 8px; } } .p-sales__popular-item { border-radius: 100px; border: 3px solid #f07c00; background: #fff; width: 160px; height: 160px; padding: 16px 0 31px; } @media screen and (max-width: 767px) { .p-sales__popular-item { width: 100%; aspect-ratio: 1/1; height: auto; padding: 5px 0; display: flex; flex-direction: column; justify-content: center; border-width: 2px; } } .p-sales__popular-item-img { text-align: center; } @media screen and (max-width: 767px) { .p-sales__popular-item-img { width: 50%; height: auto; aspect-ratio: 1/1; margin-right: auto; margin-left: auto; } } .p-sales__popular-item-text { text-align: center; } @media screen and (max-width: 767px) { .p-sales__popular-item-text { font-size: 0.625rem; } } .p-sales__popular-btn { text-align: center; } .p-company { padding: 80px 0; } @media screen and (max-width: 767px) { .p-company { padding: 40px 0; } } .p-company__list { max-width: 850px; margin-inline: auto; } .p-company__item { display: flex; border-bottom: 1px solid #dedede; } @media screen and (max-width: 767px) { .p-company__item { flex-direction: column; } } .p-company__label { font-size: 1rem; font-weight: 700; padding: 20px 16px; min-width: 260px; } @media screen and (max-width: 767px) { .p-company__label { font-size: 0.875rem; padding: 15px 0 10px; min-width: auto; } } .p-company__value { padding: 20px 0; } @media screen and (max-width: 767px) { .p-company__value { font-size: 0.875rem; padding: 0 0 15px; } } .p-company__value p { margin: 0 0 0.5em; } .p-company__value p:last-child { margin-bottom: 0; } .p-sim-contract__sim { margin: 40px 0 0; } .p-sim-contract__sim-text { font-size: 1.25rem; } @media screen and (max-width: 767px) { .p-sim-contract__sim-text { font-size: 1rem; } } .p-sim-contract__sim-link { color: #008bce; } .p-sim-contract__sim-pickup { display: flex; gap: 50px; align-items: flex-end; justify-content: flex-start; margin-top: 10px; } @media screen and (max-width: 767px) { .p-sim-contract__sim-pickup { gap: 24px; } } .p-sim-contract__sim-img--mineo { width: 153px; } .p-sim-contract__sim-img--his { width: 189px; } .p-sim-contract__flow { margin: 80px 0 40px; } .p-sim-contract__flow-body { display: flex; gap: 16px; align-items: center; justify-content: flex-start; margin-top: 32px; } @media screen and (max-width: 767px) { .p-sim-contract__flow-body { gap: 0; } } .p-sim-contract__flow-item { background-color: #f6f6f6; padding: 20px 0 0; border-radius: 8px; width: 180px; height: 170px; } @media screen and (max-width: 767px) { .p-sim-contract__flow-item { width: 100%; height: 85px; padding-top: 10px; display: flex; flex-direction: column; justify-content: center; } } .p-sim-contract__flow-item-text { font-size: 1.125rem; font-weight: 700; text-align: center; } @media screen and (max-width: 767px) { .p-sim-contract__flow-item-text { font-size: 0.625rem; } } .p-sim-contract__flow-item-img { width: 180px; height: 130px; margin-right: auto; margin-left: auto; } @media screen and (max-width: 767px) { .p-sim-contract__flow-item-img { width: 80px; height: 50px; } } @media screen and (max-width: 609px) { .p-sim-contract__flow-item-img { width: 60px; height: 40px; } } .p-sim-contract__flow-arrow { width: 32px; } @media screen and (max-width: 767px) { .p-sim-contract__flow-arrow { width: 25%; top: 20px; } } .p-sim-contract__flow-arrow img { width: 100%; } .p-sim-contract__monthly { margin-top: 80px; } .p-sim-contract__monthly-text { margin-top: 32px; } @media screen and (max-width: 767px) { .p-sim-contract__monthly-text { font-size: 0.875rem; } } .p-sim-contract__monthly-link-wrap { display: flex; gap: 46px; align-items: center; justify-content: flex-start; } @media screen and (max-width: 767px) { .p-sim-contract__monthly-link-wrap { gap: 16px; } } .p-sim-contract__monthly-link { display: flex; align-items: center; justify-content: center; gap: 8px; width: 150px; height: 54px; margin-top: 12px; } .p-sim-contract__monthly-link--mineo { border-radius: 4px; border: 1px solid #11A73B; background: #fff; box-shadow: 0 4px 10px -4px rgba(12, 12, 13, 0.2); } .p-sim-contract__monthly-link--his { border-radius: 4px; border: 1px solid #0064C5; background: #fff; box-shadow: 0 4px 10px -4px rgba(12, 12, 13, 0.2); } .p-sim-contract__monthly-logo { line-height: 0; } .p-sim-contract__monthly-logo--mineo { width: 73px; padding-bottom: 9px; } .p-sim-contract__monthly-logo--his { width: 93px; } .p-sim-contract__plan { margin: 80px 0; } .p-sim-contract__plan-table { margin-top: 40px; } @media screen and (max-width: 767px) { .p-sim-contract__plan-table { margin-top: 24px; overflow-x: auto; } } .p-sim-contract__monthly-link-icon { width: 17px; height: 17px; line-height: 0; } .p-sim-contract__table { border-collapse: collapse; } @media screen and (max-width: 767px) { .p-sim-contract__table { min-width: 600px; } } .p-sim-contract__table-header { background-color: #f07c00; } .p-sim-contract__table-header-text { color: #fff; font-size: 1rem; font-weight: 500; padding: 6px 0; text-align: center; border-right: 1px solid #c4c4c4; } .p-sim-contract__table-header-text:first-child { border-left: 1px solid #c4c4c4; } @media screen and (max-width: 767px) { .p-sim-contract__table-header-text { font-size: 0.875rem; } } .p-sim-contract__table-header-text:first-child { width: 200px; } @media screen and (max-width: 767px) { .p-sim-contract__table-header-text:first-child { width: 150px; } } .p-sim-contract__table-header-text:nth-child(2) { width: 160px; } .p-sim-contract__table-header-text:nth-child(3) { width: 280px; } @media screen and (max-width: 767px) { .p-sim-contract__table-header-text:nth-child(3) { width: 180px; } } .p-sim-contract__table-header-text:last-child { width: 270px; } .p-sim-contract__table-row { border-bottom: 1px solid #dedede; } .p-sim-contract__table-cell { height: 70px; vertical-align: middle; border-right: 1px solid #c4c4c4; text-align: center; } .p-sim-contract__table-cell:first-child { border-left: 1px solid #c4c4c4; } @media screen and (max-width: 767px) { .p-sim-contract__table-cell { padding: 4px; } } .p-sim-contract__table-cell--price { text-align: center; font-weight: 500; font-size: 1.25rem; } @media screen and (max-width: 767px) { .p-sim-contract__table-cell--price { font-size: 1rem; } } .p-sim-contract__table-logo { display: flex; margin-right: auto; margin-left: auto; } .p-sim-contract__table-logo--mineo { width: 110px; } @media screen and (max-width: 767px) { .p-sim-contract__table-logo--mineo { width: 80px; } } .p-sim-contract__table-logo--his { width: 138px; } @media screen and (max-width: 767px) { .p-sim-contract__table-logo--his { width: 84px; } } .p-sim-contract__table-link { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border: 1px solid #333333; border-radius: 4px; color: #414141; font-size: 0.875rem; font-weight: 500; text-decoration: none; transition: all 0.3s; box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.25); } @media screen and (max-width: 767px) { .p-sim-contract__table-link { font-size: 0.75rem; padding: 6px 12px; gap: 6px; } } @media (any-hover: hover) { .p-sim-contract__table-link:hover { background-color: #dedede; opacity: 0.7; } } .p-sim-contract__table-link-icon { width: 24px; height: 24px; } @media screen and (max-width: 767px) { .p-sim-contract__table-link-icon { width: 14px; height: 14px; } } .p-sim-contract__plan-note-text { margin-top: 20px; } @media screen and (max-width: 767px) { .p-sim-contract__plan-note-text { font-size: 0.875rem; } } .p-sim-contract__bold { font-weight: 700; } .p-sim-contract__fz14 { font-size: 0.875rem; } .p-sim-contract__fz12 { font-size: 0.75rem; } .p-sim-contract__requirements { margin-top: 80px; } .p-sim-contract__requirements-wrap { display: flex; gap: 89px; align-items: center; justify-content: flex-start; } @media screen and (max-width: 767px) { .p-sim-contract__requirements-wrap { flex-direction: column; gap: 20px; align-items: flex-start; } } @media screen and (max-width: 767px) { .p-sim-contract__requirements-card { width: 80px; } } .p-sim-contract__requirements-list { margin-top: 32px; } .p-sim-contract__requirements-list-item { list-style: disc; margin-left: 20px; } @media screen and (max-width: 767px) { .p-sim-contract__requirements-list-item { font-size: 0.875rem; } } .p-sim-contract__requirements-list-item:not(:first-of-type) { margin-top: 4px; } .p-sim-contract__paid-service { margin-top: 80px; padding-bottom: 80px; } .p-sim-contract__paid-service-table-wrap { margin-top: 40px; } @media screen and (max-width: 767px) { .p-sim-contract__paid-service-table-wrap { margin-top: 24px; overflow-x: auto; } } .p-sim-contract__paid-service-table { max-width: 620px; width: 100%; border-collapse: collapse; margin-top: 10px; } @media screen and (max-width: 767px) { .p-sim-contract__paid-service-table-text { font-size: 0.875rem; } } .p-sim-contract__paid-service-table-header { background-color: #f07c00; } .p-sim-contract__paid-service-table-header-text { color: #fff; font-size: 1rem; font-weight: 500; padding: 6px 16px; text-align: left; } @media screen and (max-width: 767px) { .p-sim-contract__paid-service-table-header-text { font-size: 0.875rem; padding: 4px 10px; } } .p-sim-contract__paid-service-table-header-text:first-child { width: 60%; } .p-sim-contract__paid-service-table-header-text:last-child { width: 40%; } .p-sim-contract__paid-service-table-row { font-size: 0.875rem; font-weight: 500; line-height: 1.8; } @media screen and (max-width: 767px) { .p-sim-contract__paid-service-table-row { font-size: 0.75rem; } } .p-sim-contract__paid-service-table-row:last-child { border-bottom: none; } .p-sim-contract__paid-service-table-row:nth-child(2n) { background-color: #f6f6f6; } .p-sim-contract__paid-service-table-cell { padding: 8px 16px; vertical-align: middle; } @media screen and (max-width: 767px) { .p-sim-contract__paid-service-table-cell { padding: 12px 10px; } } .p-sim-contract__paid-service-table-link { display: inline; padding: 0; background-color: transparent; border-radius: 0; color: #008bce; font-size: 0.875rem; font-weight: 500; transition: all 0.3s; } @media screen and (max-width: 767px) { .p-sim-contract__paid-service-table-link { font-size: 0.875rem; } } @media (any-hover: hover) { .p-sim-contract__paid-service-table-link:hover { background-color: transparent; opacity: 0.7; } } .p-sim-contract__faq { margin-top: 80px; padding-bottom: 100px; } .p-sim-contract__cta { margin-top: 125px; margin-bottom: 50px; } .p-sim-contract__store-icon { width: 26px; height: 24px; } .p-faq__desc { margin-top: 40px; } .p-faq__tabs { margin-top: 40px; display: grid; grid-template-columns: repeat(4, 160px); gap: 20px; } @media screen and (max-width: 767px) { .p-faq__tabs { grid-template-columns: repeat(2, 1fr); } } .p-faq__tab { font-size: 1.25rem; font-weight: 700; letter-spacing: 2px; height: 50px; text-align: center; position: relative; border-radius: 4px; border: 2px solid; width: 100%; } @media screen and (max-width: 767px) { .p-faq__tab { font-size: 1rem; height: 40px; } } .p-faq__tab--red { border-color: #d50719; color: #d50719; } .p-faq__tab--red.is-active { background-color: #d50719; } .p-faq__tab--red.is-active::after { background-color: #d50719; } .p-faq__tab--blue { border-color: #0c3ed3; color: #0c3ed3; } .p-faq__tab--blue.is-active { background-color: #0c3ed3; } .p-faq__tab--blue.is-active::after { background-color: #0c3ed3; } .p-faq__tab--orange { border-color: #f07c00; color: #f07c00; } .p-faq__tab--orange.is-active { background-color: #f07c00; } .p-faq__tab--orange.is-active::after { background-color: #f07c00; } .p-faq__tab.is-active { color: #fff; } .p-faq__tab.is-active::after { content: ""; display: block; position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 100%); width: 12px; height: 6px; -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%); clip-path: polygon(0 0, 100% 0, 50% 100%); } .p-faq__panels { margin-top: 40px; margin-bottom: 100px; } .p-faq__group { margin-top: 50px; } .p-faq__group:first-child { margin-top: 0; } @media screen and (max-width: 1199px) { .pc-on--xl { display: none; } } @media screen and (max-width: 965px) { .pc-on--middle { display: none; } } @media screen and (max-width: 767px) { .pc-on { display: none; } } @media screen and (min-width: 768px) { .sp-on { display: none; } } .sp-on--middle { display: none; } @media screen and (max-width: 965px) { .sp-on--middle { display: block; } } .u-m--0 { margin: 0px; } .u-mx--0 { margin-left: 0px; margin-right: 0px; } .u-my--0 { margin-top: 0px; margin-bottom: 0px; } .u-mt--0 { margin-top: 0px; } .u-mb--0 { margin-bottom: 0px; } .u-mr--0 { margin-right: 0px; } .u-ml--0 { margin-left: 0px; } .u-p--0 { padding: 0px; } .u-px--0 { padding-left: 0px; padding-right: 0px; } .u-py--0 { padding-top: 0px; padding-bottom: 0px; } .u-pt--0 { padding-top: 0px; } .u-pb--0 { padding-bottom: 0px; } .u-pr--0 { padding-right: 0px; } .u-pl--0 { padding-left: 0px; } .u-m--1 { margin: 1px; } .u-mx--1 { margin-left: 1px; margin-right: 1px; } .u-my--1 { margin-top: 1px; margin-bottom: 1px; } .u-mt--1 { margin-top: 1px; } .u-mb--1 { margin-bottom: 1px; } .u-mr--1 { margin-right: 1px; } .u-ml--1 { margin-left: 1px; } .u-p--1 { padding: 1px; } .u-px--1 { padding-left: 1px; padding-right: 1px; } .u-py--1 { padding-top: 1px; padding-bottom: 1px; } .u-pt--1 { padding-top: 1px; } .u-pb--1 { padding-bottom: 1px; } .u-pr--1 { padding-right: 1px; } .u-pl--1 { padding-left: 1px; } .u-m--2 { margin: 2px; } .u-mx--2 { margin-left: 2px; margin-right: 2px; } .u-my--2 { margin-top: 2px; margin-bottom: 2px; } .u-mt--2 { margin-top: 2px; } .u-mb--2 { margin-bottom: 2px; } .u-mr--2 { margin-right: 2px; } .u-ml--2 { margin-left: 2px; } .u-p--2 { padding: 2px; } .u-px--2 { padding-left: 2px; padding-right: 2px; } .u-py--2 { padding-top: 2px; padding-bottom: 2px; } .u-pt--2 { padding-top: 2px; } .u-pb--2 { padding-bottom: 2px; } .u-pr--2 { padding-right: 2px; } .u-pl--2 { padding-left: 2px; } .u-m--3 { margin: 3px; } .u-mx--3 { margin-left: 3px; margin-right: 3px; } .u-my--3 { margin-top: 3px; margin-bottom: 3px; } .u-mt--3 { margin-top: 3px; } .u-mb--3 { margin-bottom: 3px; } .u-mr--3 { margin-right: 3px; } .u-ml--3 { margin-left: 3px; } .u-p--3 { padding: 3px; } .u-px--3 { padding-left: 3px; padding-right: 3px; } .u-py--3 { padding-top: 3px; padding-bottom: 3px; } .u-pt--3 { padding-top: 3px; } .u-pb--3 { padding-bottom: 3px; } .u-pr--3 { padding-right: 3px; } .u-pl--3 { padding-left: 3px; } .u-m--4 { margin: 4px; } .u-mx--4 { margin-left: 4px; margin-right: 4px; } .u-my--4 { margin-top: 4px; margin-bottom: 4px; } .u-mt--4 { margin-top: 4px; } .u-mb--4 { margin-bottom: 4px; } .u-mr--4 { margin-right: 4px; } .u-ml--4 { margin-left: 4px; } .u-p--4 { padding: 4px; } .u-px--4 { padding-left: 4px; padding-right: 4px; } .u-py--4 { padding-top: 4px; padding-bottom: 4px; } .u-pt--4 { padding-top: 4px; } .u-pb--4 { padding-bottom: 4px; } .u-pr--4 { padding-right: 4px; } .u-pl--4 { padding-left: 4px; } .u-m--5 { margin: 5px; } .u-mx--5 { margin-left: 5px; margin-right: 5px; } .u-my--5 { margin-top: 5px; margin-bottom: 5px; } .u-mt--5 { margin-top: 5px; } .u-mb--5 { margin-bottom: 5px; } .u-mr--5 { margin-right: 5px; } .u-ml--5 { margin-left: 5px; } .u-p--5 { padding: 5px; } .u-px--5 { padding-left: 5px; padding-right: 5px; } .u-py--5 { padding-top: 5px; padding-bottom: 5px; } .u-pt--5 { padding-top: 5px; } .u-pb--5 { padding-bottom: 5px; } .u-pr--5 { padding-right: 5px; } .u-pl--5 { padding-left: 5px; } .u-m--6 { margin: 6px; } .u-mx--6 { margin-left: 6px; margin-right: 6px; } .u-my--6 { margin-top: 6px; margin-bottom: 6px; } .u-mt--6 { margin-top: 6px; } .u-mb--6 { margin-bottom: 6px; } .u-mr--6 { margin-right: 6px; } .u-ml--6 { margin-left: 6px; } .u-p--6 { padding: 6px; } .u-px--6 { padding-left: 6px; padding-right: 6px; } .u-py--6 { padding-top: 6px; padding-bottom: 6px; } .u-pt--6 { padding-top: 6px; } .u-pb--6 { padding-bottom: 6px; } .u-pr--6 { padding-right: 6px; } .u-pl--6 { padding-left: 6px; } .u-m--7 { margin: 7px; } .u-mx--7 { margin-left: 7px; margin-right: 7px; } .u-my--7 { margin-top: 7px; margin-bottom: 7px; } .u-mt--7 { margin-top: 7px; } .u-mb--7 { margin-bottom: 7px; } .u-mr--7 { margin-right: 7px; } .u-ml--7 { margin-left: 7px; } .u-p--7 { padding: 7px; } .u-px--7 { padding-left: 7px; padding-right: 7px; } .u-py--7 { padding-top: 7px; padding-bottom: 7px; } .u-pt--7 { padding-top: 7px; } .u-pb--7 { padding-bottom: 7px; } .u-pr--7 { padding-right: 7px; } .u-pl--7 { padding-left: 7px; } .u-m--8 { margin: 8px; } .u-mx--8 { margin-left: 8px; margin-right: 8px; } .u-my--8 { margin-top: 8px; margin-bottom: 8px; } .u-mt--8 { margin-top: 8px; } .u-mb--8 { margin-bottom: 8px; } .u-mr--8 { margin-right: 8px; } .u-ml--8 { margin-left: 8px; } .u-p--8 { padding: 8px; } .u-px--8 { padding-left: 8px; padding-right: 8px; } .u-py--8 { padding-top: 8px; padding-bottom: 8px; } .u-pt--8 { padding-top: 8px; } .u-pb--8 { padding-bottom: 8px; } .u-pr--8 { padding-right: 8px; } .u-pl--8 { padding-left: 8px; } .u-m--9 { margin: 9px; } .u-mx--9 { margin-left: 9px; margin-right: 9px; } .u-my--9 { margin-top: 9px; margin-bottom: 9px; } .u-mt--9 { margin-top: 9px; } .u-mb--9 { margin-bottom: 9px; } .u-mr--9 { margin-right: 9px; } .u-ml--9 { margin-left: 9px; } .u-p--9 { padding: 9px; } .u-px--9 { padding-left: 9px; padding-right: 9px; } .u-py--9 { padding-top: 9px; padding-bottom: 9px; } .u-pt--9 { padding-top: 9px; } .u-pb--9 { padding-bottom: 9px; } .u-pr--9 { padding-right: 9px; } .u-pl--9 { padding-left: 9px; } .u-m--10 { margin: 10px; } .u-mx--10 { margin-left: 10px; margin-right: 10px; } .u-my--10 { margin-top: 10px; margin-bottom: 10px; } .u-mt--10 { margin-top: 10px; } .u-mb--10 { margin-bottom: 10px; } .u-mr--10 { margin-right: 10px; } .u-ml--10 { margin-left: 10px; } .u-p--10 { padding: 10px; } .u-px--10 { padding-left: 10px; padding-right: 10px; } .u-py--10 { padding-top: 10px; padding-bottom: 10px; } .u-pt--10 { padding-top: 10px; } .u-pb--10 { padding-bottom: 10px; } .u-pr--10 { padding-right: 10px; } .u-pl--10 { padding-left: 10px; } .u-m--11 { margin: 11px; } .u-mx--11 { margin-left: 11px; margin-right: 11px; } .u-my--11 { margin-top: 11px; margin-bottom: 11px; } .u-mt--11 { margin-top: 11px; } .u-mb--11 { margin-bottom: 11px; } .u-mr--11 { margin-right: 11px; } .u-ml--11 { margin-left: 11px; } .u-p--11 { padding: 11px; } .u-px--11 { padding-left: 11px; padding-right: 11px; } .u-py--11 { padding-top: 11px; padding-bottom: 11px; } .u-pt--11 { padding-top: 11px; } .u-pb--11 { padding-bottom: 11px; } .u-pr--11 { padding-right: 11px; } .u-pl--11 { padding-left: 11px; } .u-m--12 { margin: 12px; } .u-mx--12 { margin-left: 12px; margin-right: 12px; } .u-my--12 { margin-top: 12px; margin-bottom: 12px; } .u-mt--12 { margin-top: 12px; } .u-mb--12 { margin-bottom: 12px; } .u-mr--12 { margin-right: 12px; } .u-ml--12 { margin-left: 12px; } .u-p--12 { padding: 12px; } .u-px--12 { padding-left: 12px; padding-right: 12px; } .u-py--12 { padding-top: 12px; padding-bottom: 12px; } .u-pt--12 { padding-top: 12px; } .u-pb--12 { padding-bottom: 12px; } .u-pr--12 { padding-right: 12px; } .u-pl--12 { padding-left: 12px; } .u-m--13 { margin: 13px; } .u-mx--13 { margin-left: 13px; margin-right: 13px; } .u-my--13 { margin-top: 13px; margin-bottom: 13px; } .u-mt--13 { margin-top: 13px; } .u-mb--13 { margin-bottom: 13px; } .u-mr--13 { margin-right: 13px; } .u-ml--13 { margin-left: 13px; } .u-p--13 { padding: 13px; } .u-px--13 { padding-left: 13px; padding-right: 13px; } .u-py--13 { padding-top: 13px; padding-bottom: 13px; } .u-pt--13 { padding-top: 13px; } .u-pb--13 { padding-bottom: 13px; } .u-pr--13 { padding-right: 13px; } .u-pl--13 { padding-left: 13px; } .u-m--14 { margin: 14px; } .u-mx--14 { margin-left: 14px; margin-right: 14px; } .u-my--14 { margin-top: 14px; margin-bottom: 14px; } .u-mt--14 { margin-top: 14px; } .u-mb--14 { margin-bottom: 14px; } .u-mr--14 { margin-right: 14px; } .u-ml--14 { margin-left: 14px; } .u-p--14 { padding: 14px; } .u-px--14 { padding-left: 14px; padding-right: 14px; } .u-py--14 { padding-top: 14px; padding-bottom: 14px; } .u-pt--14 { padding-top: 14px; } .u-pb--14 { padding-bottom: 14px; } .u-pr--14 { padding-right: 14px; } .u-pl--14 { padding-left: 14px; } .u-m--15 { margin: 15px; } .u-mx--15 { margin-left: 15px; margin-right: 15px; } .u-my--15 { margin-top: 15px; margin-bottom: 15px; } .u-mt--15 { margin-top: 15px; } .u-mb--15 { margin-bottom: 15px; } .u-mr--15 { margin-right: 15px; } .u-ml--15 { margin-left: 15px; } .u-p--15 { padding: 15px; } .u-px--15 { padding-left: 15px; padding-right: 15px; } .u-py--15 { padding-top: 15px; padding-bottom: 15px; } .u-pt--15 { padding-top: 15px; } .u-pb--15 { padding-bottom: 15px; } .u-pr--15 { padding-right: 15px; } .u-pl--15 { padding-left: 15px; } .u-m--16 { margin: 16px; } .u-mx--16 { margin-left: 16px; margin-right: 16px; } .u-my--16 { margin-top: 16px; margin-bottom: 16px; } .u-mt--16 { margin-top: 16px; } .u-mb--16 { margin-bottom: 16px; } .u-mr--16 { margin-right: 16px; } .u-ml--16 { margin-left: 16px; } .u-p--16 { padding: 16px; } .u-px--16 { padding-left: 16px; padding-right: 16px; } .u-py--16 { padding-top: 16px; padding-bottom: 16px; } .u-pt--16 { padding-top: 16px; } .u-pb--16 { padding-bottom: 16px; } .u-pr--16 { padding-right: 16px; } .u-pl--16 { padding-left: 16px; } .u-m--17 { margin: 17px; } .u-mx--17 { margin-left: 17px; margin-right: 17px; } .u-my--17 { margin-top: 17px; margin-bottom: 17px; } .u-mt--17 { margin-top: 17px; } .u-mb--17 { margin-bottom: 17px; } .u-mr--17 { margin-right: 17px; } .u-ml--17 { margin-left: 17px; } .u-p--17 { padding: 17px; } .u-px--17 { padding-left: 17px; padding-right: 17px; } .u-py--17 { padding-top: 17px; padding-bottom: 17px; } .u-pt--17 { padding-top: 17px; } .u-pb--17 { padding-bottom: 17px; } .u-pr--17 { padding-right: 17px; } .u-pl--17 { padding-left: 17px; } .u-m--18 { margin: 18px; } .u-mx--18 { margin-left: 18px; margin-right: 18px; } .u-my--18 { margin-top: 18px; margin-bottom: 18px; } .u-mt--18 { margin-top: 18px; } .u-mb--18 { margin-bottom: 18px; } .u-mr--18 { margin-right: 18px; } .u-ml--18 { margin-left: 18px; } .u-p--18 { padding: 18px; } .u-px--18 { padding-left: 18px; padding-right: 18px; } .u-py--18 { padding-top: 18px; padding-bottom: 18px; } .u-pt--18 { padding-top: 18px; } .u-pb--18 { padding-bottom: 18px; } .u-pr--18 { padding-right: 18px; } .u-pl--18 { padding-left: 18px; } .u-m--19 { margin: 19px; } .u-mx--19 { margin-left: 19px; margin-right: 19px; } .u-my--19 { margin-top: 19px; margin-bottom: 19px; } .u-mt--19 { margin-top: 19px; } .u-mb--19 { margin-bottom: 19px; } .u-mr--19 { margin-right: 19px; } .u-ml--19 { margin-left: 19px; } .u-p--19 { padding: 19px; } .u-px--19 { padding-left: 19px; padding-right: 19px; } .u-py--19 { padding-top: 19px; padding-bottom: 19px; } .u-pt--19 { padding-top: 19px; } .u-pb--19 { padding-bottom: 19px; } .u-pr--19 { padding-right: 19px; } .u-pl--19 { padding-left: 19px; } .u-m--20 { margin: 20px; } .u-mx--20 { margin-left: 20px; margin-right: 20px; } .u-my--20 { margin-top: 20px; margin-bottom: 20px; } .u-mt--20 { margin-top: 20px; } .u-mb--20 { margin-bottom: 20px; } .u-mr--20 { margin-right: 20px; } .u-ml--20 { margin-left: 20px; } .u-p--20 { padding: 20px; } .u-px--20 { padding-left: 20px; padding-right: 20px; } .u-py--20 { padding-top: 20px; padding-bottom: 20px; } .u-pt--20 { padding-top: 20px; } .u-pb--20 { padding-bottom: 20px; } .u-pr--20 { padding-right: 20px; } .u-pl--20 { padding-left: 20px; } .u-m--21 { margin: 21px; } .u-mx--21 { margin-left: 21px; margin-right: 21px; } .u-my--21 { margin-top: 21px; margin-bottom: 21px; } .u-mt--21 { margin-top: 21px; } .u-mb--21 { margin-bottom: 21px; } .u-mr--21 { margin-right: 21px; } .u-ml--21 { margin-left: 21px; } .u-p--21 { padding: 21px; } .u-px--21 { padding-left: 21px; padding-right: 21px; } .u-py--21 { padding-top: 21px; padding-bottom: 21px; } .u-pt--21 { padding-top: 21px; } .u-pb--21 { padding-bottom: 21px; } .u-pr--21 { padding-right: 21px; } .u-pl--21 { padding-left: 21px; } .u-m--22 { margin: 22px; } .u-mx--22 { margin-left: 22px; margin-right: 22px; } .u-my--22 { margin-top: 22px; margin-bottom: 22px; } .u-mt--22 { margin-top: 22px; } .u-mb--22 { margin-bottom: 22px; } .u-mr--22 { margin-right: 22px; } .u-ml--22 { margin-left: 22px; } .u-p--22 { padding: 22px; } .u-px--22 { padding-left: 22px; padding-right: 22px; } .u-py--22 { padding-top: 22px; padding-bottom: 22px; } .u-pt--22 { padding-top: 22px; } .u-pb--22 { padding-bottom: 22px; } .u-pr--22 { padding-right: 22px; } .u-pl--22 { padding-left: 22px; } .u-m--23 { margin: 23px; } .u-mx--23 { margin-left: 23px; margin-right: 23px; } .u-my--23 { margin-top: 23px; margin-bottom: 23px; } .u-mt--23 { margin-top: 23px; } .u-mb--23 { margin-bottom: 23px; } .u-mr--23 { margin-right: 23px; } .u-ml--23 { margin-left: 23px; } .u-p--23 { padding: 23px; } .u-px--23 { padding-left: 23px; padding-right: 23px; } .u-py--23 { padding-top: 23px; padding-bottom: 23px; } .u-pt--23 { padding-top: 23px; } .u-pb--23 { padding-bottom: 23px; } .u-pr--23 { padding-right: 23px; } .u-pl--23 { padding-left: 23px; } .u-m--24 { margin: 24px; } .u-mx--24 { margin-left: 24px; margin-right: 24px; } .u-my--24 { margin-top: 24px; margin-bottom: 24px; } .u-mt--24 { margin-top: 24px; } .u-mb--24 { margin-bottom: 24px; } .u-mr--24 { margin-right: 24px; } .u-ml--24 { margin-left: 24px; } .u-p--24 { padding: 24px; } .u-px--24 { padding-left: 24px; padding-right: 24px; } .u-py--24 { padding-top: 24px; padding-bottom: 24px; } .u-pt--24 { padding-top: 24px; } .u-pb--24 { padding-bottom: 24px; } .u-pr--24 { padding-right: 24px; } .u-pl--24 { padding-left: 24px; } .u-m--25 { margin: 25px; } .u-mx--25 { margin-left: 25px; margin-right: 25px; } .u-my--25 { margin-top: 25px; margin-bottom: 25px; } .u-mt--25 { margin-top: 25px; } .u-mb--25 { margin-bottom: 25px; } .u-mr--25 { margin-right: 25px; } .u-ml--25 { margin-left: 25px; } .u-p--25 { padding: 25px; } .u-px--25 { padding-left: 25px; padding-right: 25px; } .u-py--25 { padding-top: 25px; padding-bottom: 25px; } .u-pt--25 { padding-top: 25px; } .u-pb--25 { padding-bottom: 25px; } .u-pr--25 { padding-right: 25px; } .u-pl--25 { padding-left: 25px; } .u-m--26 { margin: 26px; } .u-mx--26 { margin-left: 26px; margin-right: 26px; } .u-my--26 { margin-top: 26px; margin-bottom: 26px; } .u-mt--26 { margin-top: 26px; } .u-mb--26 { margin-bottom: 26px; } .u-mr--26 { margin-right: 26px; } .u-ml--26 { margin-left: 26px; } .u-p--26 { padding: 26px; } .u-px--26 { padding-left: 26px; padding-right: 26px; } .u-py--26 { padding-top: 26px; padding-bottom: 26px; } .u-pt--26 { padding-top: 26px; } .u-pb--26 { padding-bottom: 26px; } .u-pr--26 { padding-right: 26px; } .u-pl--26 { padding-left: 26px; } .u-m--27 { margin: 27px; } .u-mx--27 { margin-left: 27px; margin-right: 27px; } .u-my--27 { margin-top: 27px; margin-bottom: 27px; } .u-mt--27 { margin-top: 27px; } .u-mb--27 { margin-bottom: 27px; } .u-mr--27 { margin-right: 27px; } .u-ml--27 { margin-left: 27px; } .u-p--27 { padding: 27px; } .u-px--27 { padding-left: 27px; padding-right: 27px; } .u-py--27 { padding-top: 27px; padding-bottom: 27px; } .u-pt--27 { padding-top: 27px; } .u-pb--27 { padding-bottom: 27px; } .u-pr--27 { padding-right: 27px; } .u-pl--27 { padding-left: 27px; } .u-m--28 { margin: 28px; } .u-mx--28 { margin-left: 28px; margin-right: 28px; } .u-my--28 { margin-top: 28px; margin-bottom: 28px; } .u-mt--28 { margin-top: 28px; } .u-mb--28 { margin-bottom: 28px; } .u-mr--28 { margin-right: 28px; } .u-ml--28 { margin-left: 28px; } .u-p--28 { padding: 28px; } .u-px--28 { padding-left: 28px; padding-right: 28px; } .u-py--28 { padding-top: 28px; padding-bottom: 28px; } .u-pt--28 { padding-top: 28px; } .u-pb--28 { padding-bottom: 28px; } .u-pr--28 { padding-right: 28px; } .u-pl--28 { padding-left: 28px; } .u-m--29 { margin: 29px; } .u-mx--29 { margin-left: 29px; margin-right: 29px; } .u-my--29 { margin-top: 29px; margin-bottom: 29px; } .u-mt--29 { margin-top: 29px; } .u-mb--29 { margin-bottom: 29px; } .u-mr--29 { margin-right: 29px; } .u-ml--29 { margin-left: 29px; } .u-p--29 { padding: 29px; } .u-px--29 { padding-left: 29px; padding-right: 29px; } .u-py--29 { padding-top: 29px; padding-bottom: 29px; } .u-pt--29 { padding-top: 29px; } .u-pb--29 { padding-bottom: 29px; } .u-pr--29 { padding-right: 29px; } .u-pl--29 { padding-left: 29px; } .u-m--30 { margin: 30px; } .u-mx--30 { margin-left: 30px; margin-right: 30px; } .u-my--30 { margin-top: 30px; margin-bottom: 30px; } .u-mt--30 { margin-top: 30px; } .u-mb--30 { margin-bottom: 30px; } .u-mr--30 { margin-right: 30px; } .u-ml--30 { margin-left: 30px; } .u-p--30 { padding: 30px; } .u-px--30 { padding-left: 30px; padding-right: 30px; } .u-py--30 { padding-top: 30px; padding-bottom: 30px; } .u-pt--30 { padding-top: 30px; } .u-pb--30 { padding-bottom: 30px; } .u-pr--30 { padding-right: 30px; } .u-pl--30 { padding-left: 30px; } .u-m--31 { margin: 31px; } .u-mx--31 { margin-left: 31px; margin-right: 31px; } .u-my--31 { margin-top: 31px; margin-bottom: 31px; } .u-mt--31 { margin-top: 31px; } .u-mb--31 { margin-bottom: 31px; } .u-mr--31 { margin-right: 31px; } .u-ml--31 { margin-left: 31px; } .u-p--31 { padding: 31px; } .u-px--31 { padding-left: 31px; padding-right: 31px; } .u-py--31 { padding-top: 31px; padding-bottom: 31px; } .u-pt--31 { padding-top: 31px; } .u-pb--31 { padding-bottom: 31px; } .u-pr--31 { padding-right: 31px; } .u-pl--31 { padding-left: 31px; } .u-m--32 { margin: 32px; } .u-mx--32 { margin-left: 32px; margin-right: 32px; } .u-my--32 { margin-top: 32px; margin-bottom: 32px; } .u-mt--32 { margin-top: 32px; } .u-mb--32 { margin-bottom: 32px; } .u-mr--32 { margin-right: 32px; } .u-ml--32 { margin-left: 32px; } .u-p--32 { padding: 32px; } .u-px--32 { padding-left: 32px; padding-right: 32px; } .u-py--32 { padding-top: 32px; padding-bottom: 32px; } .u-pt--32 { padding-top: 32px; } .u-pb--32 { padding-bottom: 32px; } .u-pr--32 { padding-right: 32px; } .u-pl--32 { padding-left: 32px; } .u-m--33 { margin: 33px; } .u-mx--33 { margin-left: 33px; margin-right: 33px; } .u-my--33 { margin-top: 33px; margin-bottom: 33px; } .u-mt--33 { margin-top: 33px; } .u-mb--33 { margin-bottom: 33px; } .u-mr--33 { margin-right: 33px; } .u-ml--33 { margin-left: 33px; } .u-p--33 { padding: 33px; } .u-px--33 { padding-left: 33px; padding-right: 33px; } .u-py--33 { padding-top: 33px; padding-bottom: 33px; } .u-pt--33 { padding-top: 33px; } .u-pb--33 { padding-bottom: 33px; } .u-pr--33 { padding-right: 33px; } .u-pl--33 { padding-left: 33px; } .u-m--34 { margin: 34px; } .u-mx--34 { margin-left: 34px; margin-right: 34px; } .u-my--34 { margin-top: 34px; margin-bottom: 34px; } .u-mt--34 { margin-top: 34px; } .u-mb--34 { margin-bottom: 34px; } .u-mr--34 { margin-right: 34px; } .u-ml--34 { margin-left: 34px; } .u-p--34 { padding: 34px; } .u-px--34 { padding-left: 34px; padding-right: 34px; } .u-py--34 { padding-top: 34px; padding-bottom: 34px; } .u-pt--34 { padding-top: 34px; } .u-pb--34 { padding-bottom: 34px; } .u-pr--34 { padding-right: 34px; } .u-pl--34 { padding-left: 34px; } .u-m--35 { margin: 35px; } .u-mx--35 { margin-left: 35px; margin-right: 35px; } .u-my--35 { margin-top: 35px; margin-bottom: 35px; } .u-mt--35 { margin-top: 35px; } .u-mb--35 { margin-bottom: 35px; } .u-mr--35 { margin-right: 35px; } .u-ml--35 { margin-left: 35px; } .u-p--35 { padding: 35px; } .u-px--35 { padding-left: 35px; padding-right: 35px; } .u-py--35 { padding-top: 35px; padding-bottom: 35px; } .u-pt--35 { padding-top: 35px; } .u-pb--35 { padding-bottom: 35px; } .u-pr--35 { padding-right: 35px; } .u-pl--35 { padding-left: 35px; } .u-m--40 { margin: 40px; } .u-mx--40 { margin-left: 40px; margin-right: 40px; } .u-my--40 { margin-top: 40px; margin-bottom: 40px; } .u-mt--40 { margin-top: 40px; } .u-mb--40 { margin-bottom: 40px; } .u-mr--40 { margin-right: 40px; } .u-ml--40 { margin-left: 40px; } .u-p--40 { padding: 40px; } .u-px--40 { padding-left: 40px; padding-right: 40px; } .u-py--40 { padding-top: 40px; padding-bottom: 40px; } .u-pt--40 { padding-top: 40px; } .u-pb--40 { padding-bottom: 40px; } .u-pr--40 { padding-right: 40px; } .u-pl--40 { padding-left: 40px; } .u-m--45 { margin: 45px; } .u-mx--45 { margin-left: 45px; margin-right: 45px; } .u-my--45 { margin-top: 45px; margin-bottom: 45px; } .u-mt--45 { margin-top: 45px; } .u-mb--45 { margin-bottom: 45px; } .u-mr--45 { margin-right: 45px; } .u-ml--45 { margin-left: 45px; } .u-p--45 { padding: 45px; } .u-px--45 { padding-left: 45px; padding-right: 45px; } .u-py--45 { padding-top: 45px; padding-bottom: 45px; } .u-pt--45 { padding-top: 45px; } .u-pb--45 { padding-bottom: 45px; } .u-pr--45 { padding-right: 45px; } .u-pl--45 { padding-left: 45px; } .u-m--46 { margin: 46px; } .u-mx--46 { margin-left: 46px; margin-right: 46px; } .u-my--46 { margin-top: 46px; margin-bottom: 46px; } .u-mt--46 { margin-top: 46px; } .u-mb--46 { margin-bottom: 46px; } .u-mr--46 { margin-right: 46px; } .u-ml--46 { margin-left: 46px; } .u-p--46 { padding: 46px; } .u-px--46 { padding-left: 46px; padding-right: 46px; } .u-py--46 { padding-top: 46px; padding-bottom: 46px; } .u-pt--46 { padding-top: 46px; } .u-pb--46 { padding-bottom: 46px; } .u-pr--46 { padding-right: 46px; } .u-pl--46 { padding-left: 46px; } .u-m--47 { margin: 47px; } .u-mx--47 { margin-left: 47px; margin-right: 47px; } .u-my--47 { margin-top: 47px; margin-bottom: 47px; } .u-mt--47 { margin-top: 47px; } .u-mb--47 { margin-bottom: 47px; } .u-mr--47 { margin-right: 47px; } .u-ml--47 { margin-left: 47px; } .u-p--47 { padding: 47px; } .u-px--47 { padding-left: 47px; padding-right: 47px; } .u-py--47 { padding-top: 47px; padding-bottom: 47px; } .u-pt--47 { padding-top: 47px; } .u-pb--47 { padding-bottom: 47px; } .u-pr--47 { padding-right: 47px; } .u-pl--47 { padding-left: 47px; } .u-m--48 { margin: 48px; } .u-mx--48 { margin-left: 48px; margin-right: 48px; } .u-my--48 { margin-top: 48px; margin-bottom: 48px; } .u-mt--48 { margin-top: 48px; } .u-mb--48 { margin-bottom: 48px; } .u-mr--48 { margin-right: 48px; } .u-ml--48 { margin-left: 48px; } .u-p--48 { padding: 48px; } .u-px--48 { padding-left: 48px; padding-right: 48px; } .u-py--48 { padding-top: 48px; padding-bottom: 48px; } .u-pt--48 { padding-top: 48px; } .u-pb--48 { padding-bottom: 48px; } .u-pr--48 { padding-right: 48px; } .u-pl--48 { padding-left: 48px; } .u-m--49 { margin: 49px; } .u-mx--49 { margin-left: 49px; margin-right: 49px; } .u-my--49 { margin-top: 49px; margin-bottom: 49px; } .u-mt--49 { margin-top: 49px; } .u-mb--49 { margin-bottom: 49px; } .u-mr--49 { margin-right: 49px; } .u-ml--49 { margin-left: 49px; } .u-p--49 { padding: 49px; } .u-px--49 { padding-left: 49px; padding-right: 49px; } .u-py--49 { padding-top: 49px; padding-bottom: 49px; } .u-pt--49 { padding-top: 49px; } .u-pb--49 { padding-bottom: 49px; } .u-pr--49 { padding-right: 49px; } .u-pl--49 { padding-left: 49px; } .u-m--50 { margin: 50px; } .u-mx--50 { margin-left: 50px; margin-right: 50px; } .u-my--50 { margin-top: 50px; margin-bottom: 50px; } .u-mt--50 { margin-top: 50px; } .u-mb--50 { margin-bottom: 50px; } .u-mr--50 { margin-right: 50px; } .u-ml--50 { margin-left: 50px; } .u-p--50 { padding: 50px; } .u-px--50 { padding-left: 50px; padding-right: 50px; } .u-py--50 { padding-top: 50px; padding-bottom: 50px; } .u-pt--50 { padding-top: 50px; } .u-pb--50 { padding-bottom: 50px; } .u-pr--50 { padding-right: 50px; } .u-pl--50 { padding-left: 50px; } .u-m--55 { margin: 55px; } .u-mx--55 { margin-left: 55px; margin-right: 55px; } .u-my--55 { margin-top: 55px; margin-bottom: 55px; } .u-mt--55 { margin-top: 55px; } .u-mb--55 { margin-bottom: 55px; } .u-mr--55 { margin-right: 55px; } .u-ml--55 { margin-left: 55px; } .u-p--55 { padding: 55px; } .u-px--55 { padding-left: 55px; padding-right: 55px; } .u-py--55 { padding-top: 55px; padding-bottom: 55px; } .u-pt--55 { padding-top: 55px; } .u-pb--55 { padding-bottom: 55px; } .u-pr--55 { padding-right: 55px; } .u-pl--55 { padding-left: 55px; } .u-m--60 { margin: 60px; } .u-mx--60 { margin-left: 60px; margin-right: 60px; } .u-my--60 { margin-top: 60px; margin-bottom: 60px; } .u-mt--60 { margin-top: 60px; } .u-mb--60 { margin-bottom: 60px; } .u-mr--60 { margin-right: 60px; } .u-ml--60 { margin-left: 60px; } .u-p--60 { padding: 60px; } .u-px--60 { padding-left: 60px; padding-right: 60px; } .u-py--60 { padding-top: 60px; padding-bottom: 60px; } .u-pt--60 { padding-top: 60px; } .u-pb--60 { padding-bottom: 60px; } .u-pr--60 { padding-right: 60px; } .u-pl--60 { padding-left: 60px; } .u-m--65 { margin: 65px; } .u-mx--65 { margin-left: 65px; margin-right: 65px; } .u-my--65 { margin-top: 65px; margin-bottom: 65px; } .u-mt--65 { margin-top: 65px; } .u-mb--65 { margin-bottom: 65px; } .u-mr--65 { margin-right: 65px; } .u-ml--65 { margin-left: 65px; } .u-p--65 { padding: 65px; } .u-px--65 { padding-left: 65px; padding-right: 65px; } .u-py--65 { padding-top: 65px; padding-bottom: 65px; } .u-pt--65 { padding-top: 65px; } .u-pb--65 { padding-bottom: 65px; } .u-pr--65 { padding-right: 65px; } .u-pl--65 { padding-left: 65px; } .u-m--70 { margin: 70px; } .u-mx--70 { margin-left: 70px; margin-right: 70px; } .u-my--70 { margin-top: 70px; margin-bottom: 70px; } .u-mt--70 { margin-top: 70px; } .u-mb--70 { margin-bottom: 70px; } .u-mr--70 { margin-right: 70px; } .u-ml--70 { margin-left: 70px; } .u-p--70 { padding: 70px; } .u-px--70 { padding-left: 70px; padding-right: 70px; } .u-py--70 { padding-top: 70px; padding-bottom: 70px; } .u-pt--70 { padding-top: 70px; } .u-pb--70 { padding-bottom: 70px; } .u-pr--70 { padding-right: 70px; } .u-pl--70 { padding-left: 70px; } .u-m--75 { margin: 75px; } .u-mx--75 { margin-left: 75px; margin-right: 75px; } .u-my--75 { margin-top: 75px; margin-bottom: 75px; } .u-mt--75 { margin-top: 75px; } .u-mb--75 { margin-bottom: 75px; } .u-mr--75 { margin-right: 75px; } .u-ml--75 { margin-left: 75px; } .u-p--75 { padding: 75px; } .u-px--75 { padding-left: 75px; padding-right: 75px; } .u-py--75 { padding-top: 75px; padding-bottom: 75px; } .u-pt--75 { padding-top: 75px; } .u-pb--75 { padding-bottom: 75px; } .u-pr--75 { padding-right: 75px; } .u-pl--75 { padding-left: 75px; } .u-m--80 { margin: 80px; } .u-mx--80 { margin-left: 80px; margin-right: 80px; } .u-my--80 { margin-top: 80px; margin-bottom: 80px; } .u-mt--80 { margin-top: 80px; } .u-mb--80 { margin-bottom: 80px; } .u-mr--80 { margin-right: 80px; } .u-ml--80 { margin-left: 80px; } .u-p--80 { padding: 80px; } .u-px--80 { padding-left: 80px; padding-right: 80px; } .u-py--80 { padding-top: 80px; padding-bottom: 80px; } .u-pt--80 { padding-top: 80px; } .u-pb--80 { padding-bottom: 80px; } .u-pr--80 { padding-right: 80px; } .u-pl--80 { padding-left: 80px; } .u-m--85 { margin: 85px; } .u-mx--85 { margin-left: 85px; margin-right: 85px; } .u-my--85 { margin-top: 85px; margin-bottom: 85px; } .u-mt--85 { margin-top: 85px; } .u-mb--85 { margin-bottom: 85px; } .u-mr--85 { margin-right: 85px; } .u-ml--85 { margin-left: 85px; } .u-p--85 { padding: 85px; } .u-px--85 { padding-left: 85px; padding-right: 85px; } .u-py--85 { padding-top: 85px; padding-bottom: 85px; } .u-pt--85 { padding-top: 85px; } .u-pb--85 { padding-bottom: 85px; } .u-pr--85 { padding-right: 85px; } .u-pl--85 { padding-left: 85px; } .u-m--90 { margin: 90px; } .u-mx--90 { margin-left: 90px; margin-right: 90px; } .u-my--90 { margin-top: 90px; margin-bottom: 90px; } .u-mt--90 { margin-top: 90px; } .u-mb--90 { margin-bottom: 90px; } .u-mr--90 { margin-right: 90px; } .u-ml--90 { margin-left: 90px; } .u-p--90 { padding: 90px; } .u-px--90 { padding-left: 90px; padding-right: 90px; } .u-py--90 { padding-top: 90px; padding-bottom: 90px; } .u-pt--90 { padding-top: 90px; } .u-pb--90 { padding-bottom: 90px; } .u-pr--90 { padding-right: 90px; } .u-pl--90 { padding-left: 90px; } .u-m--95 { margin: 95px; } .u-mx--95 { margin-left: 95px; margin-right: 95px; } .u-my--95 { margin-top: 95px; margin-bottom: 95px; } .u-mt--95 { margin-top: 95px; } .u-mb--95 { margin-bottom: 95px; } .u-mr--95 { margin-right: 95px; } .u-ml--95 { margin-left: 95px; } .u-p--95 { padding: 95px; } .u-px--95 { padding-left: 95px; padding-right: 95px; } .u-py--95 { padding-top: 95px; padding-bottom: 95px; } .u-pt--95 { padding-top: 95px; } .u-pb--95 { padding-bottom: 95px; } .u-pr--95 { padding-right: 95px; } .u-pl--95 { padding-left: 95px; } .u-m--100 { margin: 100px; } .u-mx--100 { margin-left: 100px; margin-right: 100px; } .u-my--100 { margin-top: 100px; margin-bottom: 100px; } .u-mt--100 { margin-top: 100px; } .u-mb--100 { margin-bottom: 100px; } .u-mr--100 { margin-right: 100px; } .u-ml--100 { margin-left: 100px; } .u-p--100 { padding: 100px; } .u-px--100 { padding-left: 100px; padding-right: 100px; } .u-py--100 { padding-top: 100px; padding-bottom: 100px; } .u-pt--100 { padding-top: 100px; } .u-pb--100 { padding-bottom: 100px; } .u-pr--100 { padding-right: 100px; } .u-pl--100 { padding-left: 100px; }/*# sourceMappingURL=style.css.map */