/*** 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; } .inner { display: flex; gap: 10.6rem 12.7rem; padding: 6.4rem 8rem 20rem 10rem; max-width: 1440px; margin-inline: auto; gap: 5.6rem 4.2rem; flex-wrap: wrap; } @media (max-width: 768px) { .inner { width: 100%; padding: 2.8rem 1.6rem 7.2rem; flex-direction: column; gap: 0; } } .content { width: 82.4rem; } @media (max-width: 768px) { .content { width: 100%; } } .profile { display: flex; justify-content: space-between; } @media (max-width: 768px) { .profile { flex-direction: column; gap: 3rem; } } .profile-content { display: flex; gap: 4.4rem; } @media (max-width: 768px) { .profile-content { gap: 2.4rem; } } .profile-icon { width: 15.1rem; height: 15.1rem; display: flex; border-radius: 1rem; overflow: hidden; } @media (max-width: 768px) { .profile-icon { width: 12.7rem; height: 12.7rem; } } .profile-icon-image { width: 100%; height: 100%; object-fit: cover; } .profile-info { display: flex; flex-direction: column; gap: 1.2rem; width: 40rem; } @media (max-width: 768px) { .profile-info { flex: 1; } } .profile-info-name { font-size: 2.4rem; font-weight: 700; line-height: 1; } .profile-info-category { font-size: 1.2rem; font-weight: 400; line-height: 1; color: #969696; } .profile-info-gender { font-size: 1.2rem; font-weight: 400; line-height: 1; color: #969696; } .profile-meta { display: flex; flex-direction: column; gap: 3.2rem; } .profile-meta-actions { display: flex; gap: 1.6rem; } .profile-meta-follow-button { border: 1px solid #F2C200; border-radius: 0.4rem; padding-inline: 2.8rem; height: 3.6rem; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; font-weight: 700; line-height: 1.8; letter-spacing: 0.04em; gap: 0.6rem; cursor: pointer; } .profile-meta-follow-button.is-followed { background-color: #F2C200; } @media (max-width: 768px) { .profile-meta-follow-button { flex: 1; } } .profile-meta-follow-button-icon { width: 1.6rem; display: flex; } .profile-meta-follow-button-icon-image { width: 100%; height: auto; } .profile-meta-report-button { display: flex; align-items: center; justify-content: center; border-radius: 50%; width: 3.5rem; height: 3.5rem; border: 1px solid #EBEBEB; cursor: pointer; } .profile-meta-report-button-icon { width: 1.8rem; display: flex; } .profile-meta-report-button-icon-image { width: 100%; height: auto; } .profile-evaluation { display: flex; } .profile-evaluation-item { display: flex; flex-direction: column; gap: 0.5rem; } .profile-evaluation-item-title { font-size: 1.1rem; font-weight: 700; line-height: 1; color: #969696; letter-spacing: 0.04em; } .profile-evaluation-item-score { font-size: 3.2rem; font-weight: 700; line-height: 1; letter-spacing: 0.04em; color: #000000; display: flex; align-items: flex-end; gap: 0.2rem; } .profile-evaluation-item-score-star { width: 1.4rem; display: flex; } .profile-evaluation-item-score-star-image { width: 100%; height: auto; } .profile-tabs { display: flex; gap: 2.4rem; margin-top: 7.8rem; } @media (max-width: 768px) { .profile-tabs { margin-top: 5.6rem; gap: 4.8rem; } } .profile-tabs-item { font-size: 1.5rem; font-weight: 500; line-height: 1; color: #969696; cursor: pointer; padding-bottom: 1.4rem; border-bottom: 2px solid transparent; } .profile-tabs-item.active { color: #333333; border-bottom: 2px solid #F2C200; } .profile-tabs-content-item { font-size: 1.5rem; line-height: 1; } .profile-tabs-content-item-description { font-size: 1.6rem; font-weight: 500; line-height: 2.2; margin-top: 3.2rem; padding: 2.4rem 3.2rem; border-radius: 1rem; box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1019607843); } .profile-tabs-panel { display: none; } .profile-tabs-panel.is-active { display: block; } .profile-reviews { margin-top: 3.2rem; padding: 2.4rem 3.2rem; border-radius: 1rem; box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1019607843); background-color: #ffffff; } .profile-reviews-header { display: flex; justify-content: space-between; align-items: center; } .profile-reviews-title { font-size: 2rem; font-weight: 700; line-height: 1; } .profile-reviews-write { display: inline-flex; align-items: center; gap: 0.8rem; font-size: 1.2rem; font-weight: 500; line-height: 1; color: #CA8A04; cursor: pointer; } .profile-reviews-write-icon { width: 1.3rem; display: flex; align-items: center; } .profile-reviews-write-icon-image { width: 100%; height: auto; } .profile-reviews-list { display: flex; flex-direction: column; gap: 4.8rem; margin-top: 4.8rem; } .profile-reviews-list-item-header { display: flex; justify-content: space-between; align-items: center; } .profile-reviews-list-item-name { font-size: 1.6rem; font-weight: 500; line-height: 1; } .profile-reviews-list-item-date { font-size: 1.4rem; line-height: 1; color: #9CA3AF; flex-shrink: 0; } .profile-reviews-list-item-stars { display: flex; align-items: center; gap: 0.4rem; margin-top: 1.8rem; } .profile-reviews-list-item-star { width: 1.4rem; display: flex; } .profile-reviews-list-item-star-image { width: 100%; height: auto; } .profile-reviews-list-item-content { font-size: 1.4rem; line-height: 1.6; margin-top: 1.2rem; } .profile-reviews-list-item-empty { font-size: 1.4rem; line-height: 1.6; color: #969696; } .sub { display: flex; flex-direction: column; gap: 4rem; flex: 1; } @media (max-width: 768px) { .sub { display: none; } } .sub-sp { display: none; } @media (max-width: 768px) { .sub-sp { display: flex; flex-direction: column; gap: 2.4rem; margin-top: 6.4rem; } } .card-item { width: 28.9rem; box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1215686275); border-radius: 1rem; display: flex; flex-direction: column; transform: translateZ(0); } @media (max-width: 768px) { .card-item { width: 100%; } } .card-item-figure { width: 100%; aspect-ratio: 289/170; overflow: hidden; border-radius: 1rem 1rem 0 0; } .card-item-figure-image { width: 100%; height: 100%; object-fit: cover; } .card-item-content { display: flex; flex-direction: column; gap: 1.5rem; padding: 1.5rem 2rem; flex: 1; } .card-item-heading { display: flex; justify-content: space-between; } .card-item-category { color: #969696; font-size: 1.1rem; line-height: 1; } .card-item-timezone { display: flex; gap: 1.2rem; } .card-item-timezone-icon { width: 1.2rem; } .card-item-timezone-icon-image { width: 100%; height: auto; } .card-item-body { display: flex; flex-direction: column; gap: 1.5rem; flex: 1; } .card-item-title { font-size: 1.4rem; font-weight: 700; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .card-item-user-info { display: flex; align-items: center; gap: 0.8rem; } .card-item-user { display: flex; align-items: center; gap: 1.2rem; } .card-item-user-icon { width: 2.4rem; aspect-ratio: 1; border-radius: 50%; overflow: hidden; } .card-item-user-icon-image { width: 100%; height: 100%; object-fit: cover; } .card-item-user-name { font-size: 1.3rem; line-height: 1; } .card-item-user-review { font-size: 1.2rem; font-weight: 700; line-height: 1.2; color: #FFAF34; display: flex; align-items: center; gap: 0.4rem; } .card-item-price { font-size: 1.6rem; font-weight: 700; line-height: 1.6; display: flex; align-items: center; gap: 0.2rem; } .card-item-price-unit { font-size: 1.1rem; line-height: 1.6; font-weight: 500; } .card-item-bottom { display: flex; gap: 0.6rem; } .card-item-link { background-color: #F2C200; border-radius: 0.4rem; padding: 0 0.8rem; height: 3.5rem; font-size: 1.3rem; font-weight: 700; letter-spacing: 0.04em; line-height: 1.8; flex: 1; display: flex; align-items: center; justify-content: center; } .card-item-favorite { background-color: #F2C200; padding: 0.2rem 0.8rem; border-radius: 0.4rem; cursor: pointer; } .card-item-favorite-icon { width: 1.7rem; display: flex; } .card-item-favorite-icon-image { width: 100%; height: auto; } .card-load-more { background-color: #F2C200; border-radius: 4rem; padding: 0 6.3rem 0 5.4rem; height: 4.9rem; font-size: 1.6rem; font-weight: 700; line-height: 1; position: relative; margin-inline: auto; margin-top: 8rem; display: block; cursor: pointer; } .card-load-more::before { content: ""; position: absolute; right: 2.4rem; top: 50%; width: 0.8rem; height: 0.8rem; border-top: 2px solid #333333; border-right: 2px solid #333333; transform: translateY(-50%) rotate(135deg); } .card-load-more.is-expanded::before { transform-origin: 100% 0; transform: translateY(-50%) rotate(-45deg); } .other { width: 100%; } @media (max-width: 768px) { .other { margin-top: 5.6rem; } } .other-title { font-size: 2rem; font-weight: 700; line-height: 1; } @media (max-width: 768px) { .other-title { line-height: 1.4; } } .other-list { display: flex; margin-top: 4rem; justify-content: space-between; } @media (max-width: 768px) { .other-list { margin-top: 2.4rem; gap: 1.6rem; flex-wrap: wrap; } } .other-list-item { box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1215686275); border-radius: 1rem; overflow: hidden; width: 28.9rem; } @media (max-width: 768px) { .other-list-item { width: calc((100% - 1.6rem) / 2); } } .other-list-item-thumbnail { width: 100%; aspect-ratio: 289/170; overflow: hidden; } .other-list-item-thumbnail-image { width: 100%; height: 100%; object-fit: cover; } .other-list-item-content { padding: 1.6rem 2rem; } @media (max-width: 768px) { .other-list-item-content { padding: 1.2rem 1.6rem; } } .other-list-item-content-category { font-size: 1.1rem; line-height: 1; color: #969696; } .other-list-item-content-name { font-size: 1.4rem; font-weight: 700; line-height: 1; margin-top: 1rem; } .other-list-item-content-review { font-size: 1.2rem; font-weight: 700; line-height: 1; color: #FFAF34; display: flex; align-items: center; gap: 0.2rem; margin-top: 0.8rem; } .other-list-item-content-review-star { font-weight: 400; } .other-list-item-content-button { background-color: #F2C200; border-radius: 0.4rem; height: 3.6rem; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; font-weight: 700; letter-spacing: 0.04em; margin-top: 1rem; } @media (max-width: 768px) { .other-list-item-content-button { font-size: 1.1rem; height: 2.8rem; } } .liver-report-modal { position: relative; width: 45rem; max-width: none; border: none; border-radius: 1rem; box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1019607843); border: 1px solid #E5E7EB; padding: 0; } .liver-report-modal::backdrop { background-color: rgba(0, 0, 0, 0.45); } .liver-report-modal-close { position: absolute; top: 1.5rem; right: 1.5rem; width: 3.2rem; height: 3.2rem; display: flex; align-items: center; justify-content: center; font-size: 2.4rem; line-height: 1; color: #A8A8A8; cursor: pointer; } .liver-report-modal-title { font-size: 1.8rem; font-weight: 700; line-height: 1; padding: 2.4rem 3rem; display: flex; align-items: center; gap: 0.8rem; border-bottom: 1px solid #E5E7EB; } .liver-report-modal-title-icon { width: 2.4rem; display: flex; } .liver-report-modal-title-icon-image { width: 100%; height: auto; } .liver-report-modal-content { padding: 2rem 3.6rem; border-bottom: 1px solid #E5E7EB; } .liver-report-modal-lead { font-size: 1.4rem; line-height: 1.6; color: #5D5D5D; } .liver-report-modal-label { font-size: 1.3rem; line-height: 1.6; margin-top: 2.4rem; display: block; color: #5D5D5D; } .liver-report-modal-textarea { width: 100%; min-height: 10.8rem; background-color: #F8F9FD; border: 1px solid #D9D9D9; border-radius: 1.6rem; padding: 1.2rem 1.6rem; font-size: 1.4rem; line-height: 1.6; margin-top: 1.6rem; } .liver-report-modal-message { font-size: 1.3rem; line-height: 1.6; } .liver-report-modal-message.is-error { color: #C4291F; } .liver-report-modal-message.is-success { color: #1A7F37; } .liver-report-modal-actions { display: flex; justify-content: flex-end; gap: 0.8rem; padding: 2rem 3.2rem; background-color: #F9FAFB; } .liver-report-modal-cancel { width: 8.8rem; height: 3rem; border-radius: 0.6rem; font-size: 1.3rem; text-align: center; line-height: 1; cursor: pointer; border: 1px solid #D1D5DB; background-color: #ffffff; color: #333333; } .liver-report-modal-submit { width: 8.8rem; height: 3rem; border-radius: 0.6rem; font-size: 1.3rem; text-align: center; line-height: 1; cursor: pointer; border: 1px solid #D1D5DB; background-color: #DC2626; color: #ffffff; }