/* * 注意: ファーストビュー高速化のため、page-lp.php の 内に * Critical CSS（このファイルの一部を縮小したもの）がインラインで記述されています。 * ヘッダー・MV・査定フォーム上部・固定フッター等のスタイルを変更した場合は、 * インラインCSS側も同期してください。 */ /* Reset and Base Styles */ * { margin: 0; padding: 0; box-sizing: border-box; } :root { --inner-padding: 15px; --color-primary: #009b97; --color-accent: #ffe42b; --color-red: #d71313; --color-text: #000000; --color-white: #ffffff; --font-family: 'Noto Sans JP', sans-serif; } html { font-size: 16px; scroll-behavior: smooth; overflow-x: hidden; } body { font-family: var(--font-family); line-height: 1.6; color: var(--color-text); background-color: var(--color-white); width: 100%; margin: 0 auto; overflow-x: clip; padding-top: 60px; /* 固定ヘッダーの高さ分 */ padding-bottom: 105px; /* 固定CTAの高さ分 */ } img { max-width: 100%; height: auto; display: block; } a { text-decoration: none; color: inherit; } /* =========================== セクション1: ヘッダー =========================== */ .header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background-color: var(--color-white); height: 60px; } .header-inner { display: flex; justify-content: space-between; align-items: center; padding: 7.5px var(--inner-padding); height: 100%; } .header-logo { display: block; } .logo-img { height: 45px; width: auto; } .hamburger { position: relative; width: 40px; height: 40px; background-color: var(--color-primary); border: none; border-radius: 5px; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; } .hamburger-line { display: block; width: 26px; height: 1px; background-color: var(--color-white); margin-top: 5.5px; } .hamburger-line:first-child { margin-top: 0; } .hamburger-label { font-size: 9px; font-weight: 600; color: var(--color-white); font-family: var(--font-family); line-height: 1; order: -1; margin-bottom: 3px; } /* =========================== ナビゲーションメニュー =========================== */ .nav-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 150; visibility: hidden; opacity: 0; transition: opacity 0.3s, visibility 0.3s; } .nav-overlay.is-open { visibility: visible; opacity: 1; } .nav-drawer { position: absolute; top: 0; left: 0; width: 300px; max-width: 80%; height: 100%; background-color: var(--color-white); transform: translateX(-100%); transition: transform 0.3s; overflow-y: auto; padding: 13px 10px; } .nav-overlay.is-open .nav-drawer { transform: translateX(0); } .nav-close { position: absolute; top: 12px; right: 15px; width: 40px; height: 40px; background-color: var(--color-primary); border: none; border-radius: 5px; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; opacity: 0; transition: opacity 0.3s; } .nav-overlay.is-open .nav-close { opacity: 1; } .nav-close-label { font-size: 9px; font-weight: 600; color: var(--color-white); font-family: var(--font-family); line-height: 1; } .nav-close-x { position: relative; width: 22px; height: 22px; } .nav-close-x::before, .nav-close-x::after { content: ''; position: absolute; top: 50%; left: 0; width: 100%; height: 2px; background-color: var(--color-white); } .nav-close-x::before { transform: rotate(45deg); } .nav-close-x::after { transform: rotate(-45deg); } .nav-menu { display: flex; flex-direction: column; } .nav-link { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; font-size: 18px; font-weight: 600; color: var(--color-text); border-bottom: 1px dotted var(--color-primary); } .nav-link:last-child { border-bottom: none; } .nav-arrow { flex-shrink: 0; width: 27px; height: 27px; background-color: var(--color-primary); border-radius: 50%; position: relative; } .nav-arrow::after { content: ''; position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; border-top: 2px solid var(--color-white); border-right: 2px solid var(--color-white); transform: translate(-60%, -50%) rotate(45deg); } /* =========================== セクション2: メインビジュアル =========================== */ .mv { width: 100%; } .mv-img { width: 100%; height: auto; display: block; } /* =========================== 査定フォーム =========================== */ .assessment-form { padding: 20px var(--inner-padding); } .assessment-form-top { background-color: #f39800; padding: 16px 0 12px; border-radius: 8px 8px 0 0; } .assessment-form-title { color: #ffe404; font-size: 22px; font-weight: 700; text-align: center; letter-spacing: 2px; } .assessment-form-body { background-color: #ffffff; border: 3px solid #f39800; border-top: none; border-radius: 0 0 8px 8px; padding: 6px 15px 30px; } .assessment-form-section-title { background-color: #ffe404; color: #f39800; font-size: 15px; font-weight: 700; text-align: center; padding: 8px 0; border-radius: 5px; margin: 16px 0 12px; } .assessment-form-fields { display: flex; flex-direction: column; gap: 8px; } .assessment-form-group { display: flex; flex-direction: column; gap: 4px; } .assessment-form-label { font-size: 12px; font-weight: 400; color: #333; letter-spacing: 1px; } .assessment-form-label.assessment-form-required { color: #f39800; } .assessment-form-asterisk { color: #f39800; font-size: 8px; vertical-align: super; margin-left: 2px; } .assessment-form-optional { color: #f39800; font-size: 8px; vertical-align: super; margin-left: 4px; } .assessment-form-input { width: 100%; height: 48px; padding: 12px; font-size: 16px; border: none; border-radius: 9px; background-color: #f0f0f0; font-family: var(--font-family); } .assessment-form-input::placeholder { color: #aaa; font-size: 14px; } .assessment-form-select-wrap { position: relative; } .assessment-form-select { width: 100%; height: 48px; padding: 12px; font-size: 14px; border: 2px solid #f0c040; border-radius: 15px; background-color: #fff8e0; appearance: none; -webkit-appearance: none; font-family: var(--font-family); color: #333; } .assessment-form-select-wrap::after { content: ''; position: absolute; right: 0; top: 0; width: 48px; height: 48px; background-color: #2a3a5c; border-radius: 0 15px 15px 0; pointer-events: none; } .assessment-form-select-wrap::before { content: ''; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid #fff; z-index: 1; pointer-events: none; } .assessment-form-annotation { text-align: center; font-size: 11px; color: #333; margin-top: 20px; line-height: 1.8; } .assessment-form-annotation-asterisk { color: #f39800; } .assessment-form-privacy-link { color: #f39800; text-decoration: underline; cursor: pointer; } /* プライバシーポリシーモーダル */ .privacy-modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 10000; justify-content: center; align-items: center; } .privacy-modal-overlay.privacy-modal-open { display: flex; } .privacy-modal { background: #fff; border-radius: 8px; max-width: 700px; width: 90%; max-height: 80vh; overflow-y: auto; overscroll-behavior: contain; padding: 30px; position: relative; } .privacy-modal-close { position: absolute; top: 10px; right: 16px; background: none; border: none; font-size: 28px; cursor: pointer; color: #333; line-height: 1; } .privacy-modal-title { font-size: 22px; font-weight: 700; margin-bottom: 20px; text-align: center; } .privacy-modal-body { font-size: 14px; line-height: 1.8; } .privacy-modal-body h3 { font-size: 16px; font-weight: 700; margin-top: 20px; margin-bottom: 8px; } .privacy-modal-body ul { padding-left: 20px; margin: 8px 0; } .privacy-modal-body li { margin-bottom: 4px; } .assessment-form-submit-wrap { margin-top: 12px; text-align: center; } .assessment-form-submit-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; max-width: 320px; height: 72px; background: linear-gradient(180deg, #ff9a2e 0%, #ff6b00 100%); color: #fff; font-size: 20px; font-weight: 700; border: none; border-radius: 8px; cursor: pointer; font-family: var(--font-family); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); letter-spacing: 1px; } .assessment-form-submit-btn:active { transform: scale(0.98); } .assessment-form-submit-arrow { font-size: 16px; } /* =========================== Contact Form 7 スタイル上書き =========================== */ .assessment-form-body .wpcf7-form { display: flex; flex-direction: column; gap: 8px; } .assessment-form-body .wpcf7-form p { margin: 0; } .assessment-form-body .wpcf7-form > p > label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 400; color: #333; letter-spacing: 1px; } .assessment-form-body .wpcf7-form > p > label > br { display: none; } .assessment-form-body .wpcf7-form .wpcf7-form-control.wpcf7-text, .assessment-form-body .wpcf7-form .wpcf7-form-control.wpcf7-email, .assessment-form-body .wpcf7-form .wpcf7-form-control.wpcf7-tel { width: 100%; height: 48px; padding: 12px; font-size: 16px; border: none; border-radius: 9px; background-color: #f0f0f0; font-family: var(--font-family); box-sizing: border-box; } .assessment-form-body .wpcf7-form .wpcf7-form-control.wpcf7-text::placeholder, .assessment-form-body .wpcf7-form .wpcf7-form-control.wpcf7-email::placeholder, .assessment-form-body .wpcf7-form .wpcf7-form-control.wpcf7-tel::placeholder { color: #aaa; font-size: 14px; } .assessment-form-body .wpcf7-form .wpcf7-form-control-wrap[data-name="kaden-name"], .assessment-form-body .wpcf7-form .wpcf7-form-control-wrap[data-name="prefecture"] { position: relative; display: block; } .assessment-form-body .wpcf7-form .wpcf7-form-control.wpcf7-select { width: 100%; height: 48px; padding: 12px; padding-right: 56px; font-size: 14px; border: 2px solid #f0c040; border-radius: 15px; background-color: #fff8e0; appearance: none; -webkit-appearance: none; font-family: var(--font-family); color: #333; box-sizing: border-box; } .assessment-form-body .wpcf7-form .wpcf7-form-control-wrap[data-name="kaden-name"]::after, .assessment-form-body .wpcf7-form .wpcf7-form-control-wrap[data-name="prefecture"]::after { content: ''; position: absolute; right: 0; top: 0; width: 48px; height: 48px; background-color: #2a3a5c; border-radius: 0 15px 15px 0; pointer-events: none; } .assessment-form-body .wpcf7-form .wpcf7-form-control-wrap[data-name="kaden-name"]::before, .assessment-form-body .wpcf7-form .wpcf7-form-control-wrap[data-name="prefecture"]::before { content: ''; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid #fff; z-index: 1; pointer-events: none; } .assessment-form-body .wpcf7-form .wpcf7-submit { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; max-width: 320px; height: 72px; background: linear-gradient(180deg, #ff9a2e 0%, #ff6b00 100%); color: #fff; font-size: 20px; font-weight: 700; border: none; border-radius: 8px; cursor: pointer; font-family: var(--font-family); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); letter-spacing: 1px; } .assessment-form-body .wpcf7-form .wpcf7-submit:active { transform: scale(0.98); } .assessment-form-body .wpcf7-form > p:last-of-type { text-align: center; margin-top: 12px; } .assessment-form-body .wpcf7-form .wpcf7-spinner { display: none; } .assessment-form-body .wpcf7-form .wpcf7-response-output { margin: 10px 0 0; padding: 8px 12px; font-size: 14px; border-radius: 5px; } .assessment-form-body .wpcf7-form .wpcf7-not-valid-tip { color: #dc3232; font-size: 12px; margin-top: 4px; } /* =========================== セクション3+4: CTA＆家電の買取屋さん =========================== */ .about { background-color: rgba(0, 155, 151, 0.03); } /* CTA エリア */ .cta { position: relative; width: 100%; } .cta-bg-img { width: 100%; height: auto; display: block; } /* PC hero elements hidden on SP */ .cta-pc-hero { display: none; } .cta-btn-img-pc { display: none; } /* SP: card wrapper is transparent, elements positioned over bg image */ .cta-card { position: absolute; left: 0; right: 0; top: 0; bottom: 0; } .cta-tel { position: absolute; left: 9.87%; top: 52%; width: 80.27%; } .cta-tel-link { display: flex; flex-direction: column; align-items: center; background: linear-gradient(to bottom, #e52020, #c41010); border-radius: 10px; padding: 6px 0 8px; box-shadow: 0 3px 0 #8a0a0a; } .cta-tel-header { display: block; background-color: var(--color-accent); color: var(--color-text); font-size: 12px; font-weight: 800; text-align: center; padding: 2px 16px; border-radius: 20px; margin-bottom: 4px; } .cta-tel-main { display: contents; } .cta-tel-icon { display: none; } .cta-tel-number { display: block; font-size: 28px; font-weight: 800; color: var(--color-white); letter-spacing: 1px; line-height: 1.2; } .cta-tel-info { display: flex; align-items: center; gap: 8px; margin-top: 2px; } .cta-tel-nenchu { font-size: 10px; font-weight: 800; color: var(--color-red); background-color: var(--color-white); padding: 0 6px; border-radius: 2px; } .cta-tel-jikan { font-size: 12px; font-weight: 800; color: var(--color-white); } .cta-text { position: absolute; left: 0; right: 0; top: 73.4%; text-align: center; font-size: 14px; font-weight: 800; color: var(--color-text); } .cta-text-accent { color: var(--color-red); font-size: 20px; font-weight: 800; } .cta-text-accent-small { color: var(--color-red); font-size: 14px; font-weight: 800; } .cta-buttons { position: absolute; left: 9.87%; top: 80.5%; width: 80.27%; display: flex; gap: 2%; } .cta-btn { flex: 1; display: block; } .cta-btn-img { width: 100%; height: auto; } /* 家電の買取屋さん テキストエリア */ .about-content { padding: 40px var(--inner-padding) 0; position: relative; padding-bottom: 80px; } .about-bracket-area { position: relative; padding: 20px 12px; } /* 角括弧装飾 */ .bracket { position: absolute; width: 18px; height: 20px; border-color: var(--color-primary); border-style: solid; border-width: 0; } .bracket-tl { top: 0; left: 0; border-top-width: 5px; border-left-width: 5px; } .bracket-tr { top: 0; right: 0; border-top-width: 5px; border-right-width: 5px; } .bracket-bl { bottom: 0; left: 0; border-bottom-width: 5px; border-left-width: 5px; } .bracket-br { bottom: 0; right: 0; border-bottom-width: 5px; border-right-width: 5px; } .about-title { font-size: 22px; font-weight: 800; color: var(--color-primary); line-height: 1.5; margin-bottom: 16px; } .about-body { font-size: 16px; font-weight: 500; line-height: 2; color: var(--color-text); } .about-body p { margin-bottom: 0; } .about-highlight { background: linear-gradient(transparent 60%, var(--color-accent) 60%); display: inline; font-weight: 800; color: #dc1313; } .about-staff { position: absolute; right: 15px; bottom: 0; } .staff-img { width: 119px; height: auto; } /* =========================== セクション5: お悩み =========================== */ .nayami { width: 100%; background: url('/lp-assets/images/nayami-full-bg.png') center top / 100% auto no-repeat; aspect-ratio: 375 / 583; position: relative; } .nayami-inner { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } /* タイトル */ .nayami-title { text-align: center; padding-top: 25px; } .nayami-title-sub { font-size: 18px; font-weight: 700; color: var(--color-text); line-height: 1.4; } .nayami-arrow { font-weight: 900; color: #022fbb; } .nayami-title-main { font-size: 24px; font-weight: 900; color: var(--color-text); line-height: 1.4; position: relative; display: inline-block; } .nayami-title-accent { font-size: 32px; font-weight: 900; color: #37288e; } .nayami-title-qmark { font-size: 58px; font-weight: 900; color: rgba(55, 40, 142, 0.5); line-height: 0; vertical-align: middle; position: relative; top: 4px; } .nayami-dots { display: flex; justify-content: center; gap: 28px; margin: 2px 0; } .nayami-dot { width: 6px; height: 6px; border-radius: 50%; background-color: #37288e; display: block; } /* 悩みグリッド */ .nayami-grid { display: flex; flex-wrap: wrap; justify-content: center; padding: 0 15px; gap: 10px 0; margin-top: 4px; } .nayami-item { position: relative; width: 42.13%; aspect-ratio: 158 / 130; } .nayami-item-center { width: 42.13%; } .nayami-cloud { width: 100%; height: 100%; object-fit: contain; position: absolute; top: 0; left: 0; } .nayami-item-content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; padding-top: 8px; } .nayami-icon { width: 30px; height: 30px; object-fit: contain; margin-bottom: 2px; } .nayami-item-text { font-size: 18px; font-weight: 700; color: var(--color-text); line-height: 1.4; text-align: center; } /* =========================== セクション6: お任せください =========================== */ .omakase { position: relative; width: 100%; overflow: hidden; } .omakase-img { width: 100%; height: auto; display: block; padding-left: var(--inner-padding); } .omakase-text { display: none; } /* =========================== セクション7: 比べてみてわかる =========================== */ .compare { background-color: rgba(0, 155, 151, 0.6); padding: 0 0 40px; } .compare-header { background: url('/lp-assets/images/compare-flags.png') center top / 100% auto no-repeat; text-align: center; padding: 50px 0 20px; } .compare-subtitle { font-size: 16px; font-weight: 700; color: var(--color-white); } .compare-title { font-size: 26px; font-weight: 900; color: var(--color-white); line-height: 1.3; } .compare-title-accent { font-size: 36px; color: #fde600; } .compare-table { width: 100%; border-collapse: collapse; text-align: center; margin-bottom: 24px; } .compare-th-label { width: 13%; background-color: transparent; } .compare-th-other { background-color: #888; color: var(--color-white); font-size: 16px; font-weight: 700; padding: 10px 4px; width: 29%; } .compare-th-ours { background-color: var(--color-primary); color: var(--color-white); font-size: 16px; font-weight: 700; padding: 10px 4px; width: 29%; border: 4px solid var(--color-white); } .compare-td-label { font-size: 14px; font-weight: 700; color: var(--color-text); background-color: #fff000; padding: 8px 4px; } .compare-td-other { font-size: 14px; font-weight: 700; color: #888; background-color: var(--color-white); padding: 10px 4px; line-height: 1.4; } .compare-td-ours { font-size: 18px; font-weight: 800; color: var(--color-primary); background-color: var(--color-white); border-left: 3px solid var(--color-primary); border-right: 3px solid var(--color-primary); padding: 10px 4px; line-height: 1.4; } .compare-ours-big { font-size: 18px; font-weight: 900; } .compare-body { padding: 0 var(--inner-padding); font-size: 16px; font-weight: 500; color: var(--color-white); line-height: 2; } .compare-body-accent { font-size: 18px; font-weight: 800; color: #fde600; } /* =========================== セクション8: 0円 =========================== */ .zero-yen { position: relative; overflow: hidden; background-color: rgba(0, 155, 151, 0.6); } .zero-yen-top { position: relative; height: 0; padding-top: calc(147 / 375 * 100%); } .zero-yen-appliances { position: absolute; left: calc(56 / 375 * 100%); top: calc(41 / 147 * 100%); width: calc(269 / 375 * 100%); height: auto; } .zero-yen-person { position: absolute; left: calc(208 / 375 * 100%); top: 0; width: calc(211 / 375 * 100%); height: auto; z-index: 1; } .zero-yen-bg { position: relative; z-index: 2; width: 100%; display: block; height: auto; } /* =========================== セクション9: 買取品目一覧 =========================== */ .items { background-color: rgba(0, 155, 151, 0.07); padding: 30px var(--inner-padding) 30px; } .items-title { font-size: 24px; font-weight: 800; color: var(--color-text); text-align: center; margin-bottom: 8px; } .items-title-decor { display: flex; justify-content: center; gap: 0; margin-bottom: 20px; } .items-decor-primary { width: 53px; height: 3px; background-color: var(--color-primary); } .items-decor-gray { width: 53px; height: 3px; background-color: #cdcdcd; } .items-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; } .items-card { background-color: var(--color-white); border: 2px solid var(--color-primary); border-radius: 7px; overflow: hidden; display: flex; flex-direction: column; align-items: center; padding: 8px 10px; } .items-card-name { font-size: 14px; font-weight: 700; color: var(--color-text); text-align: center; line-height: 1.3; min-height: 1.3em; } .items-card-divider { width: 80%; border: none; border-top: 2px dotted var(--color-primary); margin: 4px 0; } .items-card-img { width: 80px; height: 80px; object-fit: contain; } /* =========================== セクション10: 買取できない場合 =========================== */ .kaitori-note { background-color: #fdffef; padding: 40px var(--inner-padding) 30px; } .kaitori-note-box { position: relative; border: 2px solid #fddf00; background-color: var(--color-white); padding: 16px 12px 16px 12px; margin-bottom: 20px; display: flex; flex-direction: column; align-items: center; } .kaitori-note-title-row { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; } .kaitori-note-icon { width: 50px; height: 50px; border-radius: 50%; background-color: #dc1313; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transform: rotate(-15deg); } .kaitori-note-exclaim { font-size: 32px; font-weight: 900; color: var(--color-white); line-height: 1; } .kaitori-note-box-inner { padding-left: 0; } .kaitori-note-box-title { font-size: 20px; font-weight: 800; color: var(--color-text); line-height: 1.5; margin-bottom: 12px; } .kaitori-note-list { list-style: none; padding: 0; } .kaitori-note-list li { font-size: 16px; font-weight: 500; color: var(--color-text); line-height: 2.3; display: flex; align-items: center; gap: 6px; white-space: nowrap; } .kaitori-note-check { width: 20px; height: 18px; object-fit: contain; flex-shrink: 0; } .kaitori-note-title-with-person { display: flex; align-items: flex-end; justify-content: center; gap: 12px; } .kaitori-note-cannot-title { font-size: 24px; font-weight: 700; color: var(--color-text); line-height: 1.5; margin-bottom: 12px; text-align: center; } .kaitori-note-cannot-body { font-size: 16px; font-weight: 500; color: var(--color-text); line-height: 1.8; } .kaitori-note-person { width: 65px; height: auto; flex-shrink: 0; } /* =========================== セクション25: 固定CTA =========================== */ .fixed-cta { position: fixed; bottom: 0; left: 0; right: 0; z-index: 200; height: 105px; max-width: 100%; margin: 0 auto; } .fixed-cta-bg-container { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; } .fixed-cta-bg-img { width: 100%; height: 100%; object-fit: cover; } .fixed-cta-inner { position: relative; z-index: 1; display: flex; align-items: flex-end; height: 100%; padding: 5px 15px 16px; gap: 8px; } .fixed-cta-inner.fixed-cta-pc { display: none; } .fixed-cta-btn { display: block; } .fixed-cta-web { width: 71px; flex-shrink: 0; } .fixed-cta-line { width: 71.5px; flex-shrink: 0; } .fixed-cta-btn-img { width: 100%; height: auto; } .fixed-cta-tel { flex: 1; min-width: 0; max-width: 186px; height: 85px; margin-left: auto; background: url('/lp-assets/images/fixed-cta-tel-bg.png') no-repeat center / contain; position: relative; text-decoration: none; display: block; } .fixed-cta-tel-text { position: absolute; left: 35px; top: 31px; font-size: 18px; font-weight: 800; color: #fff; line-height: 1.2; white-space: nowrap; } .fixed-cta-tel-info { position: absolute; left: 24px; top: 59px; display: flex; align-items: center; gap: 12px; } .fixed-cta-tel-nenchu { font-size: 8px; font-weight: 800; color: #d71313; white-space: nowrap; } .fixed-cta-tel-jikan { font-size: 8px; font-weight: 800; color: #fff; white-space: nowrap; } /* =========================== セクション11: 高価買取できる理由 =========================== */ .reason { background-color: var(--color-primary); padding: 30px var(--inner-padding) 40px; position: relative; } .reason-title-area { text-align: center; position: relative; margin-bottom: 20px; } .reason-title-sub { font-size: 16px; color: var(--color-white); margin-bottom: 4px; } .reason-title-main-wrap { display: inline-block; position: relative; } .reason-title-main { font-size: 52px; font-weight: 800; color: var(--color-white); letter-spacing: 0.15em; line-height: 1.1; display: flex; justify-content: center; gap: 6px; } .reason-title-main span { display: inline-flex; align-items: center; justify-content: center; width: 62px; height: 62px; background-color: var(--color-white); color: var(--color-primary); letter-spacing: 0; } .reason-title-sub2 { font-size: 22px; font-weight: 700; color: var(--color-white); margin-top: 4px; } .reason-card-body-area { position: relative; } .reason-person { position: absolute; right: -22px; bottom: 100%; width: 191px; height: auto; z-index: 2; } .reason-cards { display: flex; flex-direction: column; gap: 20px; } .reason-card { position: relative; } .reason-badge { display: flex; align-items: center; justify-content: center; gap: 8px; height: 62px; } .reason-badge-label { font-size: 36px; font-weight: 700; color: var(--color-white); } .reason-badge-num { display: inline-flex; align-items: center; justify-content: center; width: 45px; height: 45px; background-color: var(--color-white); border-radius: 50%; position: relative; } .reason-badge-num::after { content: ''; position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 8px solid var(--color-white); } .reason-badge-num-inner { font-size: 36px; font-weight: 700; color: var(--color-primary); line-height: 1; } .reason-card-body { background-color: var(--color-white); border-radius: 10px; overflow: hidden; } .reason-card-img { width: 100%; height: 210px; object-fit: cover; display: block; margin: 15px auto 0; width: calc(100% - 30px); border-radius: 0; } .reason-card-title { font-size: 20px; font-weight: 900; color: var(--color-text); padding: 12px 6px 8px; line-height: 1.4; text-align: center; } .reason-accent { font-size: 28px; color: var(--color-primary); } .reason-big { font-size: 28px; } .reason-accent-sm { font-size: 26px; color: var(--color-primary); } .reason-big-sm { font-size: 26px; } .reason-small { font-size: 20px; } .reason-card-text { font-size: 16px; color: var(--color-text); padding: 0 15px 20px; line-height: 1.6; } /* =========================== セクション12: 法人 =========================== */ .corporate { overflow: hidden; } .corporate-header { background-color: #1c1c1d; padding: 15px var(--inner-padding); position: relative; min-height: 120px; display: flex; align-items: center; } .corporate-header::after { content: ''; position: absolute; bottom: -12px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 11.5px solid transparent; border-right: 11.5px solid transparent; border-top: 12px solid #4c4c4c; z-index: 5; } .corporate-title { color: var(--color-white); text-align: center; font-size: 14px; font-weight: 500; line-height: 1.5; width: 100%; padding-right: 80px; } .corporate-title-big { font-size: 24px; font-weight: 800; } .corporate-building { position: absolute; right: 10px; top: 5px; width: 85px; height: auto; } .corporate-photo { width: 100%; padding: 0 var(--inner-padding); } .corporate-photo-img { width: 100%; height: 230px; object-fit: cover; display: block; } .corporate-list { list-style: none; padding: 0 var(--inner-padding); } .corporate-list li { color: var(--color-text); font-size: 20px; font-weight: 700; padding: 14px 0 14px 28px; position: relative; border-bottom: 1px solid #ddd; } .corporate-list li:first-child { border-top: none; } .corporate-list li::before { content: '▼'; position: absolute; left: 4px; top: 50%; transform: translateY(-50%); font-size: 14px; color: #092d00; line-height: 1; } /* =========================== セクション13: CTA繰り返し =========================== */ .cta-repeat { /* Uses the same .cta styles */ } /* =========================== セクション14: 人気ブランド一覧 =========================== */ .brands { padding: 20px var(--inner-padding) 20px; background-color: var(--color-white); } .brands-title { font-size: 24px; font-weight: 700; text-align: center; margin-bottom: 8px; } .brands-title-decor { display: flex; justify-content: center; gap: 4px; margin-bottom: 12px; } .brands-decor-primary { width: 30px; height: 4px; background-color: var(--color-primary); border-radius: 2px; } .brands-decor-gray { width: 30px; height: 4px; background-color: #d9d9d9; border-radius: 2px; } .brands-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 16px; } .brands-item { text-align: center; } .brands-logo-wrap { height: 40px; display: flex; align-items: center; justify-content: center; overflow: hidden; } .brands-logo { max-width: 110px; max-height: 36px; object-fit: contain; } .brands-name { font-size: 12px; line-height: 1.3; margin-top: 4px; color: var(--color-text); } /* =========================== セクション15: 買取実績 =========================== */ .results { padding: 30px var(--inner-padding) 40px; background-color: #f5f5f5; } .results-title { font-size: 24px; font-weight: 700; text-align: center; margin-bottom: 8px; } .results-title-decor { display: flex; justify-content: center; gap: 4px; margin-bottom: 24px; } .results-decor-primary { width: 30px; height: 4px; background-color: var(--color-primary); border-radius: 2px; } .results-decor-gray { width: 30px; height: 4px; background-color: #d9d9d9; border-radius: 2px; } .results-cards { display: flex; flex-direction: column; gap: 20px; } .results-card { background-color: var(--color-white); border: 2px solid #4fa3ae; border-radius: 10px; display: flex; overflow: hidden; padding: 14px; gap: 0; } .results-card-img { width: 150px; height: 120px; object-fit: cover; flex-shrink: 0; } .results-card-info { flex: 1; padding-left: 12px; display: flex; flex-direction: column; } .results-card-category { display: inline-block; background-color: var(--color-primary); color: var(--color-white); font-size: 14px; font-weight: 700; padding: 2px 8px; margin-bottom: 6px; align-self: flex-start; white-space: nowrap; } .results-card-name { font-size: 14px; font-weight: 500; line-height: 1.4; margin-bottom: 8px; flex: 1; } .results-card-price-row { display: flex; align-items: center; gap: 6px; } .results-card-price-label { background-color: #dc1313; color: var(--color-white); font-size: 9px; font-weight: 700; line-height: 1.3; padding: 3px 4px; text-align: center; } .results-card-price { font-size: 22px; font-weight: 800; color: #dc1313; } /* =========================== セクション16: 選ばれる理由 =========================== */ .chosen { padding: 30px var(--inner-padding) 40px; background-color: rgba(79, 163, 174, 0.1); } .chosen-title-area { text-align: center; margin-bottom: 24px; } .chosen-title-sub { font-size: 16px; margin-bottom: 4px; } .chosen-title { font-size: 32px; font-weight: 800; } .chosen-title-num { font-size: 40px; color: var(--color-primary); text-decoration: underline; text-decoration-color: var(--color-primary); text-underline-offset: 6px; text-decoration-thickness: 3px; } .chosen-cards { display: flex; flex-direction: column; gap: 30px; } .chosen-card { position: relative; } .chosen-card-num { font-size: 50px; font-weight: 800; color: var(--color-primary); opacity: 0.3; line-height: 1; margin-bottom: -10px; } .chosen-card-img { width: 100%; height: 230px; object-fit: cover; display: block; } .chosen-card-title { font-size: 24px; font-weight: 800; text-align: center; margin-top: 12px; line-height: 1.4; } .chosen-card-accent { color: var(--color-primary); font-size: 28px; } .chosen-card-text { font-size: 16px; font-weight: 500; line-height: 1.6; margin-top: 8px; } /* =========================== セクション17: 初めてでも安心 =========================== */ .anshin { padding: 30px var(--inner-padding) 40px; background-color: var(--color-white); } .anshin-title { font-size: 32px; font-weight: 800; text-align: center; line-height: 1.3; margin-bottom: 16px; } .anshin-title-accent { color: var(--color-primary); text-decoration: underline; text-decoration-color: var(--color-primary); text-underline-offset: 4px; } .anshin-img { width: 100%; height: auto; display: block; margin-bottom: 20px; } .anshin-body { font-size: 16px; font-weight: 500; line-height: 1.7; } .anshin-body p { margin-bottom: 12px; } .anshin-body strong { font-weight: 700; color: #328f84; font-size: 18px; } /* =========================== セクション19: 買取の流れ =========================== */ .flow { padding: 30px var(--inner-padding) 40px; background-color: var(--color-white); } .flow-title { font-size: 24px; font-weight: 700; text-align: center; margin-bottom: 8px; } .flow-title-decor { display: flex; justify-content: center; gap: 4px; margin-bottom: 24px; } .flow-decor-primary { width: 30px; height: 4px; background-color: var(--color-primary); border-radius: 2px; } .flow-decor-gray { width: 30px; height: 4px; background-color: #d9d9d9; border-radius: 2px; } .flow-steps { display: flex; flex-direction: column; gap: 8px; position: relative; } .flow-steps::before { content: ''; position: absolute; left: 22px; top: var(--bar-top, 55px); height: var(--bar-height, 640px); width: 25px; background: linear-gradient(to bottom, rgba(247, 229, 161, 0) 0%, #f7e5a1 39%, #f7e5a1 100%); z-index: 1; } .flow-step { position: relative; padding-bottom: 16px; background-color: #f7f7f7; border-radius: 10px; padding: 16px 14px; margin-bottom: 0; } .flow-step-header { display: flex; align-items: center; background-color: #009b97; border-radius: 10px; padding: 0 10px; height: 60px; margin-bottom: 8px; position: relative; z-index: 2; margin: -16px -14px 8px -14px; } .flow-step:first-child .flow-step-header { background-color: #26c1bd; } .flow-step:last-child .flow-step-header { background-color: #f0bf03; } .flow-step-badge { color: var(--color-white); display: flex; align-items: baseline; gap: 2px; flex-shrink: 0; } .flow-step-label { font-size: 16px; font-weight: 800; } .flow-step-num { font-size: 36px; font-weight: 800; line-height: 1; opacity: 0.7; } .flow-step-title { font-size: 22px; font-weight: 600; flex: 1; color: var(--color-white); margin-left: 8px; } .flow-step-icon { width: 70px; height: 70px; object-fit: cover; border-radius: 0; flex-shrink: 0; margin-top: -5px; margin-bottom: -5px; margin-right: -12px; } .flow-step-text { font-size: 16px; font-weight: 500; line-height: 1.6; padding-left: 10px; margin-left: 40px; } /* =========================== セクション20: 買取時の注意点 =========================== */ .caution { padding: 30px var(--inner-padding) 20px; background-color: var(--color-white); } .caution-icon { text-align: center; margin-bottom: 4px; } .caution-icon-img { width: 34px; height: 34px; margin: 0 auto; } .caution-title { font-size: 20px; font-weight: 700; text-align: center; margin-bottom: 20px; } .caution-accordion { border-top: 2px solid #B1B2B5; } .caution-item { border-bottom: 2px solid #B1B2B5; } .caution-item-header { font-size: 18px; font-weight: 700; padding: 14px 0; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; } .caution-item-header::after { content: '+'; font-size: 24px; color: #B1B2B5; font-weight: 300; } details[open] > .caution-item-header::after { content: '−'; } .caution-item-header::-webkit-details-marker { display: none; } .caution-item-body { padding: 0 0 16px; font-size: 16px; line-height: 1.6; } .caution-sublabel { background-color: var(--color-primary); color: var(--color-white); text-align: center; padding: 6px; font-size: 16px; font-weight: 700; margin: 12px 0; } .caution-docs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .caution-doc { background-color: #f0f0f0; padding: 8px; font-size: 16px; display: flex; align-items: center; gap: 6px; } .caution-doc::before { content: ''; width: 14px; height: 14px; background-color: var(--color-primary); border-radius: 2px; flex-shrink: 0; } /* =========================== セクション21: お客様の声 =========================== */ .voice { padding: 30px var(--inner-padding) 30px; background-color: #e8f5f4; } .voice-title { font-size: 24px; font-weight: 700; text-align: center; margin-bottom: 8px; } .voice-title-decor { display: flex; justify-content: center; gap: 4px; margin-bottom: 20px; } .voice-decor-primary { width: 30px; height: 4px; background-color: var(--color-primary); border-radius: 2px; } .voice-decor-gray { width: 30px; height: 4px; background-color: #d9d9d9; border-radius: 2px; } .voice-slider-wrap { overflow: hidden; position: relative; } .voice-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; background: none; border: none; cursor: pointer; padding: 0; } .voice-arrow-left { left: 0; } .voice-arrow-right { right: 0; } .voice-arrow-img { width: 19px; height: 36px; } .voice-slider { display: flex; transition: transform 0.4s ease; } .voice-card { background-color: var(--color-white); border-radius: 0; border-right: 2px solid #ccc; border-bottom: 2px solid #ccc; padding: 20px; box-sizing: border-box; flex: 0 0 100%; width: 100%; } .voice-card-top { display: flex; gap: 12px; margin-bottom: 12px; } .voice-avatar { width: 65px; height: auto; flex-shrink: 0; } .voice-card-heading { flex: 1; } .voice-card-title { font-size: 20px; font-weight: 800; line-height: 1.3; margin-bottom: 6px; } .voice-card-meta { display: flex; align-items: center; gap: 8px; } .voice-card-profile { background-color: var(--color-primary); color: var(--color-white); font-size: 10px; padding: 2px 8px; border-radius: 10px; } .voice-card-use { font-size: 12px; color: var(--color-primary); } .voice-card-text { font-size: 16px; font-weight: 500; line-height: 1.7; } .voice-dots { display: flex; justify-content: center; gap: 8px; margin-top: 16px; } .voice-dot { width: 12px; height: 12px; border-radius: 50%; background-color: #ccc; cursor: pointer; } .voice-dot-active { background-color: var(--color-primary); } /* =========================== セクション22: よくある質問 =========================== */ .faq { padding: 30px var(--inner-padding) 40px; background-color: var(--color-white); } .faq-title { font-size: 24px; font-weight: 700; text-align: center; margin-bottom: 8px; } .faq-title-decor { display: flex; justify-content: center; gap: 4px; margin-bottom: 20px; } .faq-decor-primary { width: 30px; height: 4px; background-color: var(--color-primary); border-radius: 2px; } .faq-decor-gray { width: 30px; height: 4px; background-color: #d9d9d9; border-radius: 2px; } .faq-list { display: flex; flex-direction: column; gap: 8px; } .faq-item { border: none; } .faq-question { background-color: var(--color-primary); color: var(--color-white); padding: 12px 16px; border-radius: 10px; font-size: 16px; font-weight: 800; cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; } .faq-question::after { content: ''; margin-left: auto; width: 34px; height: 34px; border-radius: 50%; background-color: var(--color-white); background-image: url('/lp-assets/images/faq-arrow.png'); background-size: 34px 34px; background-position: center; background-repeat: no-repeat; flex-shrink: 0; transition: transform 0.3s; transform: rotate(180deg); } details[open] > .faq-question::after { transform: rotate(0deg); } .faq-question::-webkit-details-marker { display: none; } .faq-q { font-size: 28px; font-weight: 800; line-height: 1; flex-shrink: 0; } .faq-answer { padding: 16px; font-size: 14px; line-height: 1.7; border: 2px solid #009b97; border-radius: 10px; margin-top: 4px; background-color: #fdfdfd; } .faq-answer p { margin-bottom: 4px; } /* =========================== セクション23: 運営会社概要 =========================== */ .company { padding: 30px var(--inner-padding) 30px; background-color: var(--color-white); } .company-title { font-size: 16px; font-weight: 700; text-align: center; margin-bottom: 16px; } .company-table { width: 100%; border-collapse: collapse; } .company-table tr { border-bottom: 1px solid #ddd; } .company-table th { font-size: 14px; font-weight: 700; text-align: left; padding: 10px 0; width: 100px; vertical-align: top; } .company-table td { font-size: 14px; padding: 10px 0; vertical-align: top; } /* =========================== セクション24: コピーライト =========================== */ .copyright { background-color: rgba(0, 155, 151, 0.9); color: var(--color-white); text-align: center; padding: 20px var(--inner-padding); font-size: 12px; } /* =========================== レスポンシブ =========================== */ @media screen and (max-width: 767px) { body { width: 100%; } } @media screen and (min-width: 768px) { /* =========================== PC共通 =========================== */ :root { --inner-padding: 30px; } .sp-only { display: none; } body { max-width: 1920px; margin: 0 auto; padding-top: 120px; padding-bottom: 140px; } /* =========================== PC: SP用brタグの無効化 =========================== */ .omakase-main br, .kaitori-note-box-title br, .kaitori-note-cannot-title br, .corporate-title-big br, .compare-th-other br, .reason-card:nth-child(2) .reason-card-title br { display: none; } /* =========================== PC inner幅共通制約 =========================== */ .items-title, .items-title-decor, .kaitori-note-bottom, .reason-title-area, .reason-cards, .brands-title, .brands-title-decor, .results-title, .results-title-decor, .chosen-title-area, .flow-title, .flow-title-decor, .caution-icon, .caution-title, .voice-title, .voice-title-decor, .voice-dots, .faq-title, .faq-title-decor, .company-title, .anshin-title { max-width: 1200px; margin-left: auto; margin-right: auto; } /* =========================== ヘッダー (PC) =========================== */ .header { height: 120px; } .header-inner { max-width: 1200px; margin: 0 auto; padding: 15px 30px; } .logo-img { height: 80px; } .hamburger { width: 50px; height: 50px; border-radius: 8px; } .hamburger-line { width: 32px; } .hamburger-label { font-size: 11px; } /* =========================== ナビゲーション (PC) =========================== */ .nav-drawer { width: 400px; padding: 20px 16px; } .nav-link { font-size: 20px; padding: 12px 0; } /* =========================== メインビジュアル (PC) =========================== */ .mv { max-width: 1920px; margin: 0 auto; } /* =========================== 査定フォーム (PC) =========================== */ .assessment-form { max-width: 700px; margin: 0 auto; padding: 30px 40px; } .assessment-form-title { font-size: 28px; } .assessment-form-body { padding: 12px 30px 40px; } .assessment-form-section-title { font-size: 18px; padding: 10px 0; } .assessment-form-label { font-size: 14px; } .assessment-form-input { height: 52px; font-size: 16px; } .assessment-form-select { height: 52px; font-size: 16px; } .assessment-form-annotation { font-size: 13px; } .assessment-form-submit-btn { max-width: 400px; height: 80px; font-size: 24px; } /* CF7 PC overrides */ .assessment-form-body .wpcf7-form > p > label { font-size: 14px; } .assessment-form-body .wpcf7-form .wpcf7-form-control.wpcf7-text, .assessment-form-body .wpcf7-form .wpcf7-form-control.wpcf7-email, .assessment-form-body .wpcf7-form .wpcf7-form-control.wpcf7-tel { height: 52px; font-size: 16px; } .assessment-form-body .wpcf7-form .wpcf7-form-control.wpcf7-select { height: 52px; font-size: 16px; } .assessment-form-body .wpcf7-form .wpcf7-form-control-wrap[data-name="kaden-name"]::after, .assessment-form-body .wpcf7-form .wpcf7-form-control-wrap[data-name="prefecture"]::after { height: 52px; } .assessment-form-body .wpcf7-form .wpcf7-submit { max-width: 400px; height: 80px; font-size: 24px; } /* =========================== CTA (PC) =========================== */ .cta { max-width: 1920px; margin: 0 auto; background-size: cover; background-position: center; display: flex; flex-direction: column; align-items: center; padding: 30px 0 40px; } .cta-bg { display: none; } /* PC hero: single image, centered */ .cta-pc-hero { display: block; width: 780px; max-width: 90%; height: auto; } /* PC white card - normal flow, centered */ .cta-card { position: static; width: 800px; max-width: 90%; background: #ffffff; border-radius: 20px; padding: 30px 99px 30px; display: flex; flex-direction: column; align-items: center; margin-top: 10px; } .cta-tel { position: static; width: 100%; } .cta-tel-link { padding: 8px 20px 12px; border-radius: 12px; box-shadow: 0 4px 0 #8a0a0a; } .cta-tel-header { font-size: 16px; padding: 3px 20px; margin-bottom: 6px; } .cta-tel-main { display: flex; align-items: center; justify-content: center; gap: 10px; } .cta-tel-icon { display: inline; font-size: 38px; color: var(--color-white); } .cta-tel-number { font-size: 42px; letter-spacing: 2px; } .cta-tel-info { gap: 12px; margin-top: 6px; } .cta-tel-nenchu { font-size: 16px; padding: 2px 10px; } .cta-tel-jikan { font-size: 18px; letter-spacing: 2px; } .cta-text { position: static; font-size: 24px; margin-top: 12px; color: var(--color-text); } .cta-text-accent { font-size: 34px; font-weight: 900; } .cta-text-accent-small { font-size: 24px; } .cta-buttons { position: static; width: auto; margin: 12px 0 0; gap: 16px; } .cta-btn { flex: none; } .cta-btn-img-sp { display: none; } .cta-btn-img-pc { display: block; width: 288px; height: auto; } .cta-btn-img { border-radius: 8px; } /* =========================== 家電の買取屋さん (PC) =========================== */ .about-content { max-width: 1200px; margin: 0 auto; padding: 60px 40px 100px; position: relative; } .about-bracket-area { padding: 30px 20px; } .bracket { width: 24px; height: 26px; } .about-title { font-size: 36px; margin-bottom: 24px; } .about-body { font-size: 16px; line-height: 2; max-width: 70%; } .about-staff { right: 40px; bottom: 0; } .staff-img { width: 200px; } /* =========================== お悩み (PC) =========================== */ .nayami { aspect-ratio: auto; background-size: cover; background-position: top center; padding-bottom: 100px; } .nayami-inner { position: relative; max-width: 1200px; margin: 0 auto; } .nayami-title { padding-top: 50px; } .nayami-title-sub { font-size: 24px; } .nayami-title-main { font-size: 36px; } .nayami-title-accent { font-size: 48px; } .nayami-title-qmark { font-size: 80px; } .nayami-grid { max-width: 900px; margin: 20px auto 0; gap: 16px 12px; padding: 0 30px; } .nayami-item { width: 30%; aspect-ratio: 200 / 160; } .nayami-item-center { width: 30%; } .nayami-icon { width: 45px; height: 45px; } .nayami-item-text { font-size: 22px; } /* =========================== お任せください (PC) =========================== */ .omakase { max-width: 1920px; margin: 0 auto; } .omakase-img { padding-left: 0; max-width: 1200px; margin: 0 auto; } /* =========================== 比べてみてわかる (PC) =========================== */ .compare-header { padding: 60px 0 30px; } .compare-subtitle { font-size: 36px; } .compare-title { font-size: 36px; } .compare-title-accent { font-size: 50px; } .compare-table { max-width: 1200px; margin: 0 auto 30px; } .compare-th-other, .compare-th-ours { font-size: 20px; padding: 14px 8px; } .compare-td-label { font-size: 18px; padding: 12px 8px; } .compare-td-other { font-size: 18px; padding: 14px 8px; } .compare-td-ours { font-size: 22px; padding: 14px 8px; } .compare-ours-big { font-size: 22px; } .compare-body { max-width: 1200px; margin: 0 auto; font-size: 18px; padding: 0; } .compare-body-accent { font-size: 22px; } /* =========================== 0円 (PC) =========================== */ .zero-yen { max-width: 1920px; margin: 0 auto; } .zero-yen-top { max-width: 1200px; margin: 0 auto; padding-top: calc(147 / 375 * 62.5%); } /* =========================== 買取品目一覧 (PC) =========================== */ .items { padding: 50px 30px; } .items-title { font-size: 56px; font-weight: 800; margin-bottom: 12px; } .items-grid { max-width: 1200px; margin: 0 auto; grid-template-columns: repeat(3, 1fr); gap: 14px; } .items-card { padding: 12px 14px; border-radius: 10px; } .items-card-name { font-size: 28px; letter-spacing: 3px; } .items-card-img { width: 110px; height: 110px; } /* =========================== 買取できない場合 (PC) =========================== */ .kaitori-note { padding: 50px 30px 40px; } .kaitori-note-box { max-width: 1200px; margin: 0 auto 30px; padding: 24px 30px; } .kaitori-note-box-title { font-size: 43px; font-weight: 800; } .kaitori-note-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 30px; } .kaitori-note-list li { font-size: 16px; font-weight: 500; } .kaitori-note-cannot-title { font-size: 40px; } .kaitori-note-cannot-body { max-width: 1200px; margin: 0 auto; font-size: 16px; font-weight: 500; text-align: center; } .kaitori-note-person { width: 90px; } /* =========================== 固定CTA (PC) =========================== */ .fixed-cta { height: 140px; } .fixed-cta-sp { display: none; } .fixed-cta-inner.fixed-cta-pc { display: flex; max-width: 1200px; margin: 0 auto; padding: 0 30px; padding-bottom: 24px; gap: 18px; justify-content: center; align-items: flex-end; height: 100%; box-sizing: border-box; } .fixed-cta-pc-btn { display: block; text-decoration: none; transition: transform 0.1s; } .fixed-cta-pc-btn:hover { transform: translateY(-2px); } .fixed-cta-pc-btn-img { display: block; height: auto; } .fixed-cta-pc-web .fixed-cta-pc-btn-img, .fixed-cta-pc-line .fixed-cta-pc-btn-img { width: 357px; } .fixed-cta-pc-tel { width: 450px; height: 131px; background: url('/lp-assets/images/fixed-cta-tel-pc-bg.png') no-repeat center / contain; position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding-top: 34px; padding-left: 78px; box-sizing: border-box; } .fixed-cta-pc-tel-num { color: #fff; font-size: 40px; font-weight: 800; line-height: 1; margin-bottom: 10px; } .fixed-cta-pc-tel-bottom { display: flex; align-items: center; gap: 20px; margin-left: 35px; } .fixed-cta-pc-tel-year { color: #d80202; font-size: 12px; font-weight: 800; } .fixed-cta-pc-tel-hours { color: #fff; font-size: 14px; font-weight: 800; } /* =========================== 高価買取できる理由 (PC) =========================== */ .reason { padding: 50px 30px 60px; } .reason-title-area { margin-bottom: 30px; } .reason-title-sub { font-size: 36px; font-weight: 700; } .reason-title-main span { width: 80px; height: 80px; font-size: 52px; } .reason-title-sub2 { font-size: 28px; } .reason-card-body-area { max-width: 1200px; margin: 0 auto; } .reason-person { width: 240px; right: -30px; } .reason-cards { gap: 30px; } .reason-badge { position: absolute; top: 20px; left: calc(45% + 60px); z-index: 2; height: auto; } .reason-badge-label { font-size: 44px; font-weight: 800; color: var(--color-primary); } .reason-badge-num { width: 55px; height: 55px; background-color: var(--color-primary); } .reason-badge-num::after { border-top-color: var(--color-primary); } .reason-badge-num-inner { font-size: 40px; font-weight: 800; color: var(--color-white); } .reason-card-body { display: flex; flex-direction: row; align-items: stretch; } .reason-card-img { width: 35%; height: auto; margin: 60px 0 60px 60px; border-radius: 10px; flex-shrink: 0; object-fit: cover; } .reason-card-content { flex: 1; display: flex; flex-direction: column; justify-content: center; } .reason-card-title { font-size: 24px; padding: 16px 20px 12px; text-align: left; font-weight: 900; } .reason-accent { font-size: 36px; } .reason-big { font-size: 36px; } .reason-accent-sm { font-size: 36px; } .reason-big-sm { font-size: 36px; } .reason-small { font-size: 24px; } .reason-card-text { font-size: 16px; font-weight: 500; padding: 0 20px 20px; } .reason-badge-label { font-size: 42px; } /* =========================== 法人 (PC) =========================== */ .corporate-header { padding: 20px 30px; min-height: 140px; max-width: 1200px; margin: 0 auto; } .corporate-title { font-size: 18px; padding-right: 100px; } .corporate-title-big { font-size: 30px; } .corporate-building { width: 120px; right: 30px; top: 10px; } .corporate-body { display: flex; max-width: 1200px; margin: 0 auto; align-items: center; gap: 40px; padding: 20px 30px; } .corporate-photo { flex: 0 0 40%; } .corporate-photo-img { height: auto; width: 100%; border-radius: 8px; } .corporate-list { flex: 1; display: flex; flex-direction: column; gap: 0; } .corporate-list li { font-size: 36px; padding: 16px 0 16px 32px; } /* =========================== 人気ブランド一覧 (PC) =========================== */ .brands { padding: 40px 30px; } .brands-title { font-size: 56px; font-weight: 800; margin-bottom: 12px; } .brands-grid { max-width: 1200px; margin: 0 auto; grid-template-columns: repeat(3, 1fr); gap: 16px 24px; } .brands-logo-wrap { height: 55px; } .brands-logo { max-width: 150px; max-height: 48px; } .brands-name { font-size: 14px; margin-top: 6px; } /* =========================== 買取実績 (PC) =========================== */ .results { padding: 50px 30px 60px; } .results-title { font-size: 56px; font-weight: 800; margin-bottom: 12px; } .results-cards { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .results-card { padding: 18px; } .results-card-img { width: 180px; height: 140px; } .results-card-category { font-size: 20px; font-weight: 700; display: block; width: 100%; text-align: center; } .results-card-name { font-size: 16px; font-weight: 500; } .results-card-price { font-size: 32px; font-weight: 800; } .results-card-price-label { font-size: 15px; } /* =========================== 選ばれる理由 (PC) =========================== */ .chosen { padding: 50px 30px 60px; } .chosen-title-sub { font-size: 36px; font-weight: 700; } .chosen-title { font-size: 42px; } .chosen-title-num { font-size: 52px; } .chosen-cards { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(6, 1fr); gap: 30px; } .chosen-card { background: #ffffff; border-radius: 0; overflow: hidden; } .chosen-card:nth-child(1) { grid-column: 1 / 3; grid-row: 1; } .chosen-card:nth-child(2) { grid-column: 3 / 5; grid-row: 1; align-self: end; } .chosen-card:nth-child(3) { grid-column: 5 / 7; grid-row: 1; align-self: end; } .chosen-card:nth-child(4) { grid-column: 2 / 4; grid-row: 2; } .chosen-card:nth-child(5) { grid-column: 4 / 6; grid-row: 2; } .chosen-card-num { font-size: 60px; } .chosen-card-img { height: 253px; } .chosen-card-title { font-size: 24px; padding: 0 20px; min-height: 101px; display: grid; place-content: center; text-align: center; } .chosen-card-accent { font-size: 36px; font-weight: 900; } .chosen-card-text { font-size: 16px; padding: 0 20px 20px; } /* =========================== 初めてでも安心 (PC) =========================== */ .anshin { padding: 50px 30px 60px; } .anshin-title { font-size: 42px; margin-bottom: 24px; } .anshin { background-size: cover; background-position: left center; min-height: 500px; } .anshin-content { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; gap: 40px; } .anshin-img { display: none; } .anshin-body { font-size: 16px; font-weight: 500; line-height: 2; display: flex; flex-direction: column; gap: 16px; max-width: 600px; margin-left: auto; } .anshin-body strong { font-size: 20px; } /* =========================== 買取の流れ (PC) =========================== */ .flow { padding: 50px 30px 60px; } .flow-title { font-size: 56px; font-weight: 800; margin-bottom: 12px; } .flow-steps { max-width: 1200px; margin: 0 auto; gap: 12px; } .flow-steps::before { left: 30px; width: 90px; } .flow-step { padding: 20px 20px; } .flow-step-header { height: 100px; padding: 10px 20px; border-radius: 12px; margin: -20px -20px 12px -20px; overflow: visible; } .flow-step-badge { gap: 4px; } .flow-step-label { font-size: 46px; font-weight: 800; } .flow-step-num { font-size: 76px; font-weight: 800; } .flow-step-title { font-size: 44px; font-weight: 600; margin-left: 12px; } .flow-step-icon { width: 150px; height: 150px; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); } .flow-step-text { font-size: 16px; font-weight: 500; margin-left: 120px; padding-left: 20px; padding-right: 190px; } /* =========================== お客様の声 (PC) =========================== */ .voice { padding: 50px 30px 40px; } .voice-title { font-size: 56px; font-weight: 800; margin-bottom: 12px; } .voice-slider-wrap { max-width: 1200px; margin: 0 auto; } .voice-slider { display: flex; transition: transform 0.4s ease; align-items: stretch; } .voice-card { flex: 0 0 calc(100% / 3); width: calc(100% / 3); opacity: 0.5; transform: scale(0.85); transition: transform 0.4s ease, opacity 0.4s ease; padding: 20px; } .voice-card.voice-card-active { opacity: 1; transform: scale(1); z-index: 1; } .voice-card-title { font-size: 22px; } .voice-card-text { font-size: 16px; } .voice-arrow-img { width: 28px; height: 52px; } /* =========================== 買取時の注意点 (PC) =========================== */ .caution { padding: 50px 30px 30px; } .caution-icon-img { width: 48px; height: 48px; } .caution-title { font-size: 36px; font-weight: 600; margin-bottom: 24px; } .caution-accordion { max-width: 1200px; margin: 0 auto; } .caution-item-header { font-size: 22px; padding: 18px 0; text-align: center; justify-content: center; } .caution-item-body { font-size: 16px; font-weight: 500; } .caution-sublabel { font-size: 16px; font-weight: 500; } .caution-docs { gap: 12px; } .caution-doc { font-size: 16px; font-weight: 500; padding: 12px; } /* =========================== よくある質問 (PC) =========================== */ .faq { padding: 50px 30px 60px; } .faq-title { font-size: 56px; font-weight: 800; margin-bottom: 12px; } .faq-list { max-width: 1200px; margin: 0 auto; gap: 12px; } .faq-question { font-size: 20px; padding: 16px 50px; } .faq-q { font-size: 34px; margin-right: 16px; } .faq-question::after { right: 50px; } .faq-answer { font-size: 16px; padding: 20px; } /* =========================== 運営会社概要 (PC) =========================== */ .company { padding: 50px 30px 50px; } .company-title { font-size: 20px; margin-bottom: 24px; } .company-table { max-width: 800px; margin: 0 auto; } .company-table th { font-size: 14px; width: 200px; padding: 14px 16px; text-align: center; } .company-table td { font-size: 14px; padding: 14px 16px; } /* =========================== コピーライト (PC) =========================== */ .copyright { font-size: 14px; padding: 24px 30px; } /* 背景画像の遅延読み込み */ .cta.bg-loaded { background-image: url('/lp-assets/images/cta-bg-pc.jpg'); } .nayami.bg-loaded { background-image: url('/lp-assets/images/nayami-bg-pc.png'); } .anshin.bg-loaded { background-image: url('/lp-assets/images/anshin-bg-pc.png'); } } /* =========================== A8アフィリエイト訪問者: LINE非表示 =========================== */ .a8-visitor .cta-btn-line, .a8-visitor .fixed-cta-line, .a8-visitor .fixed-cta-pc-line { visibility: hidden !important; pointer-events: none; } /* =========================== プライバシーポリシー同意チェックボックス =========================== */ .privacy-agree, .wpcf7-acceptance { text-align: center; margin: 16px 0 8px; } .privacy-agree-label { font-size: 14px; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; } .privacy-agree-check { width: 18px; height: 18px; cursor: pointer; accent-color: var(--color-primary); } .privacy-agree-link { color: var(--color-primary); text-decoration: underline; font-weight: 700; } .privacy-agree-disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; } /* A8訪問者: 電話テキスト差し替え時のフィット調整 */ .a8-visitor .cta-tel-number { font-size: 22px; white-space: nowrap; } @media (min-width: 768px) { .a8-visitor .cta-tel-number { font-size: 32px; } .a8-visitor .fixed-cta-pc-tel-num { font-size: 28px; white-space: nowrap; } } .a8-tel-privacy { font-size: 10px; color: #999; text-align: center; line-height: 1.4; position: absolute; left: 0; right: 0; z-index: 1; padding: 2px 10px; } .a8-tel-privacy a { color: #999; text-decoration: underline; } @media (min-width: 768px) { .a8-tel-privacy { position: static; margin: 4px 0 0; } } .a8-visitor .fixed-cta-tel, .a8-visitor .fixed-cta-pc-tel { position: relative; } .a8-tel-privacy-footer { display: block; font-size: 8px; color: rgba(255,255,255,.7); text-align: right; line-height: 1.2; white-space: nowrap; position: absolute; bottom: -10px; right: 0; } .a8-tel-privacy-footer a { color: rgba(255,255,255,.7); text-decoration: underline; }