/*** The new CSS reset - version 1.11.3 (last updated 25.08.2024) 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):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; } /* Firefox: solve issue where nested ordered lists continue numbering from parent (https://bugzilla.mozilla.org/show_bug.cgi?id=1881517) */ ol { counter-reset: revert; } /* 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; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* `*` reset above sets display:revert; without this, [hidden] often won't hide. */ [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; } html { font-size: min(0.6944444444vw, 10px); } @media (max-width: 768px) { html { font-size: 2.4875621891vw; } } body { color: #333; font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; min-height: 100vh; display: flex; flex-direction: column; } input, textarea, select { font-size: 16px; } .container { max-width: 1440px; margin-inline: auto; padding-inline: 10rem; } @media (max-width: 768px) { .container { padding-inline: 1.6rem; } } .sp-break { display: none; } @media (max-width: 768px) { .sp-break { display: block; } } .header { position: relative; z-index: 100; border-bottom: 1px solid #EFEFEF; box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1019607843); } .header-content { display: flex; justify-content: space-between; align-items: center; padding-top: 1.6rem; padding-bottom: 1.6rem; } @media (max-width: 768px) { .header-content { display: none; } .header.is-auth .header-content { display: flex; padding-inline: 1.6rem; } .header.is-auth .header-logo { width: 14.3rem; } } .header-content-brand { display: flex; align-items: center; gap: 3.2rem; } .header-logo { width: 19.5rem; } .header-logo-image { width: 100%; height: auto; } .header-search { position: relative; } .header-search-input { width: 53rem; height: 3.6rem; border: 1px solid #BBC4BF; border-radius: 0.6rem; padding: 0 7rem 0 1rem; background-color: #ffffff; -webkit-appearance: none; appearance: none; } .header-search-input::placeholder { color: #C2CCC7; } .header-search-input:not(:placeholder-shown), .header-search-input:-webkit-autofill { background-color: #ffffff !important; -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important; -webkit-text-fill-color: #333333 !important; } .header-search-button { position: absolute; top: 50%; right: 1rem; transform: translateY(-50%); background: none; border: none; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; } .header-search-button img { width: 2.4rem; } .header-search-form { position: relative; } .header-search-dropdown { position: absolute; top: calc(100% + 0.8rem); left: 0; width: 100%; background: #fff; border: 1px solid #EFEFEF; border-radius: 0.6rem; box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.08); padding: 1.6rem 2rem; z-index: 110; max-height: 32rem; overflow-y: auto; } .header-search-dropdown-title { font-size: 1.2rem; line-height: 1.5; color: #969696; margin-bottom: 1.2rem; } .header-search-dropdown-list { display: flex; flex-direction: column; } .header-search-dropdown-item { display: block; width: 100%; text-align: left; background: none; border: none; border-bottom: 1px solid #EFEFEF; padding: 1.2rem 0; font-size: 1.4rem; line-height: 1.5; color: #333; cursor: pointer; } .header-search-dropdown-item:last-child { border-bottom: none; } .header-search-dropdown-item:hover { color: #FFAF34; } .header-content-actions { display: flex; align-items: center; gap: 2.4rem; } .header-login { font-size: 1.4rem; color: #000000; letter-spacing: 0.04em; line-height: 1.5; font-weight: 500; } .header-user-register { font-size: 1.4rem; letter-spacing: 0.04em; line-height: 1.5; display: flex; align-items: center; gap: 0.8rem; background-color: #FCC800; border-radius: 10rem; height: 4rem; padding-inline: 1.6rem; font-weight: 500; } .header-user-register-icon { width: 2.4rem; display: flex; } .header-user-register-icon-image { width: 100%; height: auto; } .header-message { width: 2.8rem; } .header-message-image { width: 100%; height: auto; } .header-profile { width: 4rem; height: 4rem; border-radius: 50%; overflow: hidden; } .header-profile-image { width: 100%; height: 100%; object-fit: cover; } .header-nav { border-top: 1px solid #EFEFEF; } @media (max-width: 768px) { .header-nav { display: none; } } .header-nav-inner { display: flex; justify-content: space-between; align-items: center; } .header-nav-left { display: flex; align-items: center; } .header-nav-left-item.active { background-color: #FCC800; } .header-nav-left-link { padding: 0.8rem 2.4rem; display: block; font-size: 1.4rem; letter-spacing: 0.04em; line-height: 1.5; font-weight: 500; } .header-nav-right { display: flex; align-items: center; gap: 5rem; } .header-help { font-size: 1.4rem; letter-spacing: 0.04em; line-height: 1.5; font-weight: 500; display: flex; align-items: center; gap: 0.8rem; } .header-help-icon { width: 1.5rem; display: flex; } .header-help-icon-image { width: 100%; height: auto; } .header-liver-register { font-size: 1.4rem; letter-spacing: 0.04em; line-height: 1.5; display: flex; align-items: center; gap: 0.8rem; font-weight: 500; position: relative; } .header-liver-register::after { content: ""; display: block; width: 1px; height: 2rem; background-color: #D7E0DC; position: absolute; top: 50%; left: -2.4rem; transform: translateY(-50%); } .header-search-group-title { font-size: 1.4rem; line-height: 1; color: #9CA3AF; font-weight: 700; padding-bottom: 1.2rem; border-bottom: 1px solid #E6E6E6; } @media (max-width: 768px) { .header-search-group-title { font-size: 1.1rem; } } .header-mobile-search-results-title { line-height: 1; color: #9CA3AF; font-weight: 700; padding-bottom: 1.2rem; border-bottom: 1px solid #E6E6E6; } .header-search-empty { font-size: 1.2rem; line-height: 1; color: #888888; text-align: center; margin-top: 2.4rem; } .header-search-session-list, .header-search-streamer-list { display: flex; flex-direction: column; } .header-search-session-item, .header-search-streamer-item { display: flex; align-items: center; gap: 1.2rem; padding: 1.8rem 0; border-bottom: 1px solid #E6E6E6; } .header-search-session-body, .header-search-streamer-body { flex: 1; min-width: 0; } .header-search-streamer-name { font-size: 1.6rem; line-height: 1; font-weight: 500; } @media (max-width: 768px) { .header-search-streamer-name { font-size: 1.3rem; } } .header-search-streamer-rating { font-size: 1.4rem; line-height: 1.2; font-weight: 700; color: #FFAF34; display: flex; align-items: center; gap: 0.4rem; } @media (max-width: 768px) { .header-search-streamer-rating { font-size: 1.2rem; } } .header-search-session-category, .header-search-streamer-category { font-size: 1.3rem; line-height: 1; color: #9CA3AF; margin-top: 1rem; } @media (max-width: 768px) { .header-search-session-category, .header-search-streamer-category { font-size: 1.1rem; margin-top: 0; } } .header-search-session-title { font-size: 1.6rem; line-height: 1.4; font-weight: 500; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } @media (max-width: 768px) { .header-search-session-title { font-size: 1.3rem; margin-top: 0.5rem; } } .header-search-session-price { display: flex; align-items: baseline; gap: 0.2rem; margin-top: 0.8rem; } @media (max-width: 768px) { .header-search-session-price { margin-top: 0.5rem; } } .header-search-session-price-amount { font-size: 1.6rem; line-height: 1; font-weight: 700; color: #C4291F; } @media (max-width: 768px) { .header-search-session-price-amount { font-size: 1.4rem; } } .header-search-session-price-unit { font-size: 1.3rem; line-height: 1.6; font-weight: 500; color: #333333; } @media (max-width: 768px) { .header-search-session-price-unit { font-size: 1.1rem; } } .header-search-item-arrow { width: 0.8rem; height: 0.8rem; border-top: 2px solid #C3C3C3; border-right: 2px solid #C3C3C3; transform: rotate(45deg); flex-shrink: 0; } .header-search-results { position: absolute; top: 100%; left: 0; right: 0; z-index: 110; border-top: 1px solid #EFEFEF; background: #fff; padding: 4rem 0 6rem; max-height: calc(100dvh - 56.3rem); overflow-y: auto; box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.08); } .header-search-results-inner { padding-bottom: 4rem; } .header-search-results-head { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #E6E6E6; padding-bottom: 1.6rem; } .header-search-results-heading { font-size: 2.4rem; line-height: 1; font-weight: 700; } .header-search-results-close { width: 2.4rem; height: 2.4rem; border-radius: 50%; background: rgba(163, 163, 163, 0.4); cursor: pointer; position: relative; flex-shrink: 0; } .header-search-results-close::before, .header-search-results-close::after { content: ""; position: absolute; top: 50%; left: 50%; width: 1.2rem; height: 0.2rem; background: #333333; } .header-search-results-close::before { transform: translate(-50%, -50%) rotate(45deg); } .header-search-results-close::after { transform: translate(-50%, -50%) rotate(-45deg); } .header-search-results-close:hover { border-color: #969696; } .header-search-results-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; margin-top: 5.6rem; } .header-search-group:not(:first-child) { margin-top: 0; } .header-search-results-column { border: 1px solid #E6E6E6; border-radius: 2rem; padding: 3.2rem 3.6rem; } .header-search-streamer-name-row { display: flex; align-items: center; gap: 0.8rem; } @media (max-width: 768px) { .header-search-streamer-category { margin-top: 0.8rem; } } @media (max-width: 768px) { .header-search-session-category { font-size: 1.1rem; } } .header-search-streamer-image { width: 4.8rem; height: 4.8rem; border-radius: 50%; object-fit: cover; flex-shrink: 0; } @media (max-width: 768px) { .header-search-streamer-image { width: 4rem; height: 4rem; } } .header-search-session-image { width: 4.8rem; height: 4.8rem; border-radius: 0.6rem; object-fit: cover; flex-shrink: 0; } @media (max-width: 768px) { .header-search-dropdown, .header-search-results { display: none !important; } } .header-mobile { display: none; } @media (max-width: 768px) { .header-mobile { display: flex; justify-content: space-between; align-items: center; padding: 1.6rem 1rem; } } .header-mobile-logo { width: 14.3rem; display: flex; } .header-mobile-logo-image { width: 100%; height: auto; } .header-mobile-brand { display: flex; align-items: center; gap: 1.8rem; } .header-mobile-actions { display: flex; align-items: center; gap: 1.2rem; } .header-mobile-menu { background: none; border: none; padding: 0; width: 2.2rem; display: flex; cursor: pointer; } .header-mobile-menu-image { width: 100%; height: auto; } .header-mobile-search { background: none; border: none; padding: 0; width: 1.8rem; display: flex; cursor: pointer; } .header-mobile-search-image { width: 100%; height: auto; } .header-mobile-overlay { position: fixed; inset: 0; background-color: rgba(0, 0, 0, 0.4); z-index: 100; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .header-mobile-nav { position: fixed; top: 0; left: 0; width: 33.5rem; max-width: 100%; height: 100%; background-color: #ffffff; z-index: 101; transform: translateX(-100%); transition: transform 0.3s ease; overflow-y: auto; box-shadow: 2px 0 8px rgba(0, 0, 0, 0.08); } .header-mobile-nav-head { display: flex; justify-content: space-between; padding: 2.4rem 2.7rem; background-color: #FCC800; position: relative; } .header-mobile-nav-logo { width: 17.5rem; display: flex; } .header-mobile-nav-logo-image { width: 100%; height: auto; } .header-mobile-nav-close { background: rgba(255, 255, 255, 0.4); width: 2.4rem; height: 2.4rem; display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 50%; position: absolute; right: 1rem; top: 1rem; } .header-mobile-nav-close-icon { width: 1.4rem; height: 1.4rem; } .header-mobile-nav-close-icon::before, .header-mobile-nav-close-icon::after { content: ""; position: absolute; top: 50%; left: 50%; width: 1.4rem; height: 0.2rem; background-color: #333333; transform-origin: center; } .header-mobile-nav-close-icon::before { transform: translate(-50%, -50%) rotate(45deg); } .header-mobile-nav-close-icon::after { transform: translate(-50%, -50%) rotate(-45deg); } .header-mobile-nav-content { margin-top: 4rem; padding-inline: 2.4rem; padding-bottom: 3rem; display: flex; flex-direction: column; gap: 3.2rem; } .header-mobile-nav-items { display: flex; flex-direction: column; gap: 4rem; } .header-mobile-nav-items:not(:first-child) { padding-top: 3.2rem; border-top: 1px solid #D9D9D9; gap: 3rem; } .header-mobile-nav-link { font-size: 1.5rem; letter-spacing: 0.04em; line-height: 1; font-weight: 700; } .header-mobile-nav-title { font-size: 1.5rem; letter-spacing: 0.04em; line-height: 1; font-weight: 700; } .header-mobile-nav-category-items { display: flex; flex-direction: column; gap: 3.2rem; } .header-mobile-nav-category-item { font-size: 1.4rem; line-height: 1.5; font-weight: 500; padding-left: 1.2rem; position: relative; } .header-mobile-nav-category-item::before { content: ""; display: block; width: 0.5rem; height: 0.5rem; position: absolute; top: 50%; left: 0; transform: translateY(-50%); border-radius: 50%; } .header-mobile-nav-category-item.lesson::before { background-color: #3B58EB; } .header-mobile-nav-category-item.creative::before { background-color: #96EAB9; } .header-mobile-nav-category-item.freetalk::before { background-color: #8745E5; } .header-mobile-nav-category-item.fashion::before { background-color: #32A2F3; } .header-mobile-nav-category-item.care::before { background-color: #FF7D93; } .header-mobile-nav-sub { padding-top: 3.2rem; border-top: 1px solid #D9D9D9; } .header-mobile-nav-help { font-size: 1.4rem; letter-spacing: 0.04em; line-height: 1.5; font-weight: 500; display: flex; align-items: center; gap: 0.8rem; } .header-mobile-nav-help-icon { width: 1.5rem; display: flex; } .header-mobile-nav-help-icon-image { width: 100%; height: auto; } .header-mobile-nav-auth { display: flex; flex-direction: column; gap: 2rem; margin-top: 11.2rem; } .header-mobile-nav-login { font-size: 1.6rem; font-weight: 700; line-height: 1; height: 5rem; border-radius: 4rem; background-color: #ffffff; display: flex; align-items: center; justify-content: center; width: 27rem; position: relative; } .header-mobile-nav-login:after { content: ""; display: block; position: absolute; top: 50%; right: 2.4rem; width: 0.8rem; height: 0.8rem; border-top: 2px solid #333333; border-right: 2px solid #333333; transform: rotate(45deg) translateY(-50%); } @media (max-width: 768px) { .header-mobile-nav-login { width: 100%; } } .header-mobile-nav-login { border: 1px solid #E0E0E0; } .header-mobile-nav-liver-register { font-size: 1.6rem; font-weight: 700; line-height: 1; height: 5rem; border-radius: 4rem; background-color: #FCC800; display: flex; align-items: center; justify-content: center; width: 27rem; position: relative; } .header-mobile-nav-liver-register:after { content: ""; display: block; position: absolute; top: 50%; right: 2.4rem; width: 0.8rem; height: 0.8rem; border-top: 2px solid #333333; border-right: 2px solid #333333; transform: rotate(45deg) translateY(-50%); } @media (max-width: 768px) { .header-mobile-nav-liver-register { width: 100%; } } .is-scroll-locked { overflow: hidden; } .header-mobile-overlay.is-visible { opacity: 1; visibility: visible; } .header-mobile-nav.is-open { transform: translateX(0); } .header-mobile-search-panel { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #ffffff; z-index: 102; transform: translateX(-100%); transition: transform 0.3s ease; overflow-y: auto; display: flex; flex-direction: column; } .header-mobile-search-panel.is-open { transform: translateX(0); } .header-mobile-search-head { display: flex; align-items: center; gap: 1.2rem; padding: 1.6rem; border-bottom: 1px solid #EFEFEF; } .header-mobile-search-back { background: none; border: none; padding: 0; width: 2.4rem; height: 2.4rem; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; } .header-mobile-search-back-icon { width: 1.7rem; height: 1.8rem; display: block; } .header-mobile-search-form { flex: 1; min-width: 0; } .header-mobile-search-field { display: flex; align-items: center; gap: 1rem; border: 1px solid #FCC800; border-radius: 0.6rem; padding: 1rem 1.2rem; background-color: #ffffff; } .header-mobile-search-field-icon { width: 1.8rem; height: auto; flex-shrink: 0; } .header-mobile-search-input { width: 100%; border: none; padding: 0; font-size: 1.3rem; line-height: 1.5; background-color: transparent; -webkit-appearance: none; appearance: none; } .header-mobile-search-input::placeholder { color: #A0A0A0; } .header-mobile-search-input:focus { outline: none; } .header-mobile-search-input:not(:placeholder-shown), .header-mobile-search-input:-webkit-autofill { background-color: transparent !important; -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important; -webkit-text-fill-color: #333333 !important; } .header-mobile-search-body { flex: 1; overflow-y: auto; padding-bottom: 4rem; } .header-mobile-search-panel-section { padding: 3.2rem 2.4rem; } .header-mobile-search-section-title { font-size: 1.4rem; line-height: 1; color: #969696; margin-bottom: 2.4rem; } .header-mobile-search-results-title { font-size: 1.2rem; } .header-mobile-search-results-content { display: flex; flex-direction: column; gap: 4rem; margin-top: 3.2rem; } .header-mobile-search-history-list, .header-mobile-search-suggest-list { display: flex; flex-direction: column; } .header-mobile-search-keyword-item { width: 100%; text-align: left; background: none; border: none; border-bottom: 1px solid #EFEFEF; padding: 1.6rem 0; font-size: 1.4rem; line-height: 1.5; cursor: pointer; } .header-mobile-search-results-column { padding: 0; border: none; border-radius: 0; } .header-mobile-search-session-image { width: 7.2rem; height: 7.2rem; min-width: 7.2rem; border-radius: 0.6rem; object-fit: cover; flex-shrink: 0; align-self: flex-start; } @media (max-width: 768px) { .header-mobile-search-session-image { width: 4rem; height: 4rem; min-width: 4rem; } } @media (min-width: 769px) { .header-mobile-overlay, .header-mobile-nav, .header-mobile-search-panel { display: none; } } .header-mobile-user-register { font-size: 1.2rem; letter-spacing: 0.04em; line-height: 1.5; display: flex; align-items: center; gap: 0.8rem; background-color: #FCC800; border-radius: 10rem; height: 3rem; padding-inline: 0.8rem; font-weight: 500; } .header-mobile-profile { width: 3.5rem; height: 3.5rem; border-radius: 50%; overflow: hidden; flex-shrink: 0; } .header-mobile-profile-image { width: 100%; height: 100%; object-fit: cover; } .header-mobile-user-register-icon { width: 2.4rem; display: flex; } .header-mobile-user-register-icon-image { width: 100%; height: auto; } .main { padding-bottom: 10rem; flex: 1; } .footer { padding: 5.6rem 10rem 4.8rem; background-color: #2F2E2F; } @media (max-width: 768px) { .footer { padding: 3.6rem 4rem 5.6rem; } } .footer-inner { display: flex; gap: 5.6rem 15.2rem; flex-wrap: wrap; max-width: 1240px; margin-inline: auto; align-items: center; } @media (max-width: 768px) { .footer-inner { flex-direction: column; gap: 7.2rem; } } .footer-info { width: 28.3rem; } @media (max-width: 768px) { .footer-info { width: 100%; } } .footer-info-logo { width: 100%; } @media (max-width: 768px) { .footer-info-logo { width: 28.3rem; } } .footer-info-logo-image { width: 100%; height: auto; } .footer-info-description { font-size: 3rem; color: #ffffff; line-height: 1.4; margin-top: 2.4rem; } .footer-info-buttons { display: flex; flex-direction: column; gap: 2rem; margin-top: 6rem; } .footer-info-buttons-login { font-size: 1.6rem; font-weight: 700; line-height: 1; height: 5rem; border-radius: 4rem; background-color: #ffffff; display: flex; align-items: center; justify-content: center; width: 27rem; position: relative; } .footer-info-buttons-login:after { content: ""; display: block; position: absolute; top: 50%; right: 2.4rem; width: 0.8rem; height: 0.8rem; border-top: 2px solid #333333; border-right: 2px solid #333333; transform: rotate(45deg) translateY(-50%); } @media (max-width: 768px) { .footer-info-buttons-login { width: 100%; } } .footer-info-buttons-register { font-size: 1.6rem; font-weight: 700; line-height: 1; height: 5rem; border-radius: 4rem; background-color: #F2C200; display: flex; align-items: center; justify-content: center; width: 27rem; position: relative; } .footer-info-buttons-register:after { content: ""; display: block; position: absolute; top: 50%; right: 2.4rem; width: 0.8rem; height: 0.8rem; border-top: 2px solid #333333; border-right: 2px solid #333333; transform: rotate(45deg) translateY(-50%); } @media (max-width: 768px) { .footer-info-buttons-register { width: 100%; } } .footer-navs { display: flex; gap: 12rem; flex: 1; } @media (max-width: 768px) { .footer-navs { gap: 5.6rem; flex-direction: column; width: 100%; } } .footer-nav-title { font-size: 1.8rem; font-weight: 700; line-height: 1; color: #ffffff; } .footer-nav-list { display: flex; flex-direction: column; gap: 3.2rem; margin-top: 4rem; } .footer-nav-list-item { padding-left: 1.3rem; position: relative; } .footer-nav-list-item::before { content: ""; display: block; width: 0.7rem; height: 1px; background-color: #ffffff; position: absolute; top: 50%; left: 0; transform: translateY(-50%); } .footer-nav-list-item-link { font-size: 1.4rem; font-weight: 500; line-height: 1; color: #ffffff; } .footer-copyright { font-size: 1.4rem; color: #ffffff; line-height: 1; width: 100%; text-align: center; border-top: 1px solid #848484; padding-top: 5.6rem; } .footer.is-auth .footer-copyright { border-top: none; padding-top: 0; } .news-title { font-size: 4rem; font-weight: 700; line-height: 1; letter-spacing: 0.05em; } @media (max-width: 768px) { .news-title { font-size: 3.2rem; } } .main { padding-top: 8.4rem; padding-bottom: 22rem; } @media (max-width: 768px) { .main { padding-top: 5.6rem; padding-bottom: 10rem; } } .news-container { width: 110rem; margin-inline: auto; } @media (max-width: 768px) { .news-container { width: 100%; padding-inline: 1.6rem; } } .news-list { margin-top: 5.6rem; } @media (max-width: 768px) { .news-list { margin-top: 4rem; } } .news-item { display: flex; align-items: center; gap: 2.4rem; padding: 2.4rem 0; border-bottom: 1px solid #D9D9D9; } .news-item:first-child { border-top: 1px solid #D9D9D9; } @media (max-width: 768px) { .news-item { flex-direction: column; gap: 1.8rem; align-items: flex-start; } } .news-date { font-size: 1.4rem; line-height: 1; } .news-content { flex: 1; min-width: 0; } .news-content-text { font-size: 1.5rem; line-height: 1; font-weight: 500; flex: 1; line-clamp: 1; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; } .news-empty { font-size: 1.5rem; line-height: 1.6; padding: 2.4rem 5rem; } .news-index-pagination { margin-top: 4.8rem; padding: 0 5rem; } .news-index-pagination-pages { display: flex; flex-wrap: wrap; gap: 1.2rem; } .news-index-pagination-item { font-size: 1.4rem; font-weight: 700; line-height: 1; color: #333333; padding: 0.8rem 1.2rem; border: 1px solid #D9D9D9; border-radius: 0.3rem; } .news-index-pagination-item.is-active { color: #ffffff; background-color: #333333; border-color: #333333; } .news-index-pagination-text { margin-top: 2.4rem; font-size: 1.4rem; line-height: 1; }