でラップする方式を採用した * （zeromane / smart_task / buzz_cla / rewards_list と同型）。 * * 取り込んでいないもの（規約7.1 / 3.1）: * - `*, *::before, *::after` のリセット * - header / .header-inner / .header-logo / .header-right / .header-user / .header-pt / .hm * - footer / .footer-inner / .footer-logo / .footer-nav / .footer-copy * - body の display:flex / flex-direction / min-height:100vh（既存layoutのヘッダー・フッター配置と競合） * - メディアクエリ内の .header-inner / footer / .footer-inner / .footer-nav への指定 * * 納品HTMLからの修正点（既知バグ・作業記録参照）: * - バグ1: @media (max-width: 900px) の開き行が欠落していたため復元（第1版 L259 の内容どおり） * - バグ2: .flow-diagram のセレクタが脱落していたため復元 * - .search-icon に display:flex を追加（納品では未指定でJSがflex/noneを切り替えており初期状態がずれる） * - 検索0件メッセージのインラインstyleを .search-empty へ切り出し * - 要素セレクタ main を .faq-main へリネーム（flex:1 は不要のため除外） */ /* ===== ページ全体（納品 body 相当） ===== */ .page-faq-renewal { font-family: 'Helvetica Neue', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif; background: var(--mr-fq-bg-page); color: var(--mr-fq-text-dark); line-height: 1.7; font-size: 16px; } .page-faq-renewal *, .page-faq-renewal *::before, .page-faq-renewal *::after { box-sizing: border-box; } /* ===== ページヒーロー ===== */ .page-faq-renewal .page-hero { background: var(--mr-fq-orange); width: 100%; position: relative; overflow: hidden; } .page-faq-renewal .page-hero::before { content: ''; position: absolute; right: -60px; top: -60px; width: 300px; height: 300px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); } .page-faq-renewal .page-hero::after { content: ''; position: absolute; left: -30px; bottom: -30px; width: 160px; height: 160px; border-radius: 50%; background: rgba(255, 255, 255, 0.07); } .page-faq-renewal .page-hero-inner { max-width: var(--mr-fq-max-w); margin: 0 auto; padding: 40px 40px 36px; position: relative; z-index: 1; } .page-faq-renewal .page-title { font-size: 28px; font-weight: 900; color: #fff; margin-bottom: 6px; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); } .page-faq-renewal .page-desc { font-size: 14px; color: rgba(255, 255, 255, 0.85); line-height: 1.7; } /* ===== メイン（納品 main 相当。flex:1 は取り込まない） ===== */ .page-faq-renewal .faq-main { max-width: var(--mr-fq-max-w); width: 100%; margin: 0 auto; padding: 40px 40px 80px; } /* ===== パンくず ===== */ .page-faq-renewal .breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--mr-fq-text-muted); margin-bottom: 28px; flex-wrap: wrap; } .page-faq-renewal .breadcrumb .bc-item { cursor: pointer; color: var(--mr-fq-orange); text-decoration: underline; text-underline-offset: 2px; } .page-faq-renewal .breadcrumb .bc-item:hover { color: var(--mr-fq-orange-dark); } .page-faq-renewal .breadcrumb .bc-sep { color: var(--mr-fq-border); } .page-faq-renewal .breadcrumb .bc-current { color: var(--mr-fq-text-muted); cursor: default; } /* ===== カテゴリカード ===== */ .page-faq-renewal .cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .page-faq-renewal .cat-card { background: #fff; border: 1.5px solid var(--mr-fq-border); border-radius: 16px; padding: 0; cursor: pointer; transition: all 0.18s; display: flex; flex-direction: column; position: relative; overflow: hidden; } .page-faq-renewal .cat-card:hover { border-color: var(--mr-fq-orange); box-shadow: 0 6px 24px rgba(255, 102, 0, 0.13); transform: translateY(-3px); } /* 上部カラーバー */ .page-faq-renewal .cat-card-bar { height: 5px; background: var(--mr-fq-border); transition: background 0.18s; flex-shrink: 0; } .page-faq-renewal .cat-card:hover .cat-card-bar { background: var(--mr-fq-orange); } .page-faq-renewal .cat-card-inner { padding: 22px 20px 20px; display: flex; flex-direction: column; gap: 14px; flex: 1; } .page-faq-renewal .cat-icon-wrap { width: 48px; height: 48px; border-radius: 12px; background: var(--mr-fq-orange-light); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.18s; } .page-faq-renewal .cat-card:hover .cat-icon-wrap { background: var(--mr-fq-orange-mid); } .page-faq-renewal .cat-icon-wrap svg { width: 24px; height: 24px; color: var(--mr-fq-orange); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .page-faq-renewal .cat-body { flex: 1; } .page-faq-renewal .cat-name { font-size: 15px; font-weight: 800; color: var(--mr-fq-text-dark); line-height: 1.45; margin-bottom: 6px; } .page-faq-renewal .cat-count { font-size: 12px; color: var(--mr-fq-text-muted); display: flex; align-items: center; gap: 4px; } .page-faq-renewal .cat-count::before { content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--mr-fq-orange-border); } .page-faq-renewal .cat-footer { display: flex; align-items: center; justify-content: flex-end; padding: 10px 20px 16px; } .page-faq-renewal .cat-arrow-btn { width: 28px; height: 28px; border-radius: 50%; background: var(--mr-fq-orange-light); display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--mr-fq-orange); font-weight: 800; transition: background 0.18s, color 0.18s; } .page-faq-renewal .cat-card:hover .cat-arrow-btn { background: var(--mr-fq-orange); color: #fff; } /* ===== 中カテゴリ ===== */ .page-faq-renewal .mid-grid { display: flex; flex-direction: column; gap: 10px; } .page-faq-renewal .mid-card { background: #fff; border: 1.5px solid var(--mr-fq-border); border-radius: var(--mr-fq-radius); padding: 18px 22px; cursor: pointer; transition: all 0.15s; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .page-faq-renewal .mid-card:hover { border-color: var(--mr-fq-orange-border); background: var(--mr-fq-orange-light); } .page-faq-renewal .mid-card-left { display: flex; align-items: center; gap: 12px; } /* 中カテゴリ + Q直接表示 */ .page-faq-renewal .mid-section { margin-bottom: 32px; } .page-faq-renewal .mid-section-head { display: flex; align-items: center; gap: 10px; padding: 14px 0 10px; border-bottom: 2px solid var(--mr-fq-orange-mid); margin-bottom: 2px; } .page-faq-renewal .mid-card-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--mr-fq-orange); flex-shrink: 0; } .page-faq-renewal .mid-card-name { font-size: 15px; font-weight: 700; color: var(--mr-fq-text-dark); } .page-faq-renewal .mid-card-count { font-size: 12px; color: var(--mr-fq-text-muted); } .page-faq-renewal .mid-card-arrow { color: var(--mr-fq-orange-border); font-size: 18px; flex-shrink: 0; } /* ===== ステップ図（縦並び） ===== */ .page-faq-renewal .step-flow { display: flex; flex-direction: column; gap: 0; margin: 12px 0 4px; max-width: 420px; } .page-faq-renewal .step-item { display: flex; align-items: center; gap: 12px; background: var(--mr-fq-orange-pale); border: 1.5px solid var(--mr-fq-orange-border); border-radius: 10px; padding: 10px 14px; } .page-faq-renewal .step-item.step-done { background: var(--mr-fq-orange-light); border-color: var(--mr-fq-orange); } .page-faq-renewal .step-num { width: 24px; height: 24px; border-radius: 50%; background: var(--mr-fq-orange); color: #fff; font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .page-faq-renewal .step-text { font-size: 14px; font-weight: 600; color: var(--mr-fq-text-dark); line-height: 1.4; } .page-faq-renewal .step-arrow { text-align: center; font-size: 16px; color: var(--mr-fq-orange-border); padding: 2px 0; margin-left: 19px; } /* ===== フロー図（横並び） ===== * 納品HTMLではセレクタが脱落していたため復元（バグ2） */ .page-faq-renewal .flow-diagram { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin: 14px 0 4px; padding: 14px 16px; background: var(--mr-fq-orange-pale); border-radius: 10px; } .page-faq-renewal .flow-step { background: #fff; border: 1.5px solid var(--mr-fq-orange-border); border-radius: 8px; padding: 5px 12px; font-size: 13px; font-weight: 700; color: var(--mr-fq-orange-dark); white-space: nowrap; } .page-faq-renewal .flow-arrow { font-size: 14px; color: var(--mr-fq-orange); font-weight: 900; flex-shrink: 0; } /* ===== Q&Aアコーディオン ===== */ .page-faq-renewal .q-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; } .page-faq-renewal .q-item { background: #fff; border: 1.5px solid var(--mr-fq-border); border-radius: var(--mr-fq-radius); overflow: hidden; transition: border-color 0.15s; } .page-faq-renewal .q-item.open { border-color: var(--mr-fq-orange-border); } .page-faq-renewal .q-btn { width: 100%; padding: 20px 20px; display: flex; align-items: center; gap: 12px; cursor: pointer; text-align: left; background: none; border: none; font-family: inherit; font-size: 15px; font-weight: 700; color: var(--mr-fq-text-dark); line-height: 1.5; transition: background 0.1s; } .page-faq-renewal .q-btn:hover { background: var(--mr-fq-bg-page); } .page-faq-renewal .q-item.open .q-btn { background: var(--mr-fq-orange-pale); color: var(--mr-fq-orange); } .page-faq-renewal .q-label { flex-shrink: 0; font-size: 13px; font-weight: 800; color: var(--mr-fq-orange); background: var(--mr-fq-orange-light); border: 1px solid var(--mr-fq-orange-border); border-radius: 6px; padding: 2px 8px; line-height: 1.4; } .page-faq-renewal .q-item.open .q-label { background: var(--mr-fq-orange); color: #fff; border-color: var(--mr-fq-orange); } .page-faq-renewal .q-text { flex: 1; } .page-faq-renewal .q-icon { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--mr-fq-border); display: flex; align-items: center; justify-content: center; font-size: 18px; line-height: 1; color: var(--mr-fq-text-muted); transition: all 0.2s; padding-bottom: 1px; } .page-faq-renewal .q-item.open .q-icon { border-color: var(--mr-fq-orange); color: var(--mr-fq-orange); transform: rotate(45deg); } .page-faq-renewal .q-ans { display: none; padding: 0 22px 22px; border-top: 1px solid var(--mr-fq-orange-mid); } .page-faq-renewal .q-item.open .q-ans { display: block; } .page-faq-renewal .q-ans-label { font-size: 14px; font-weight: 800; color: var(--mr-fq-orange); margin-bottom: 8px; margin-top: 18px; } .page-faq-renewal .q-ans-body { font-size: 15px; color: var(--mr-fq-text-mid); line-height: 1.9; } .page-faq-renewal .q-ans-body strong { color: var(--mr-fq-text-dark); font-weight: 700; } .page-faq-renewal .q-ans-body .hl { color: var(--mr-fq-orange); font-weight: 700; } .page-faq-renewal .q-ans-body .em-o { color: var(--mr-fq-orange); font-weight: 700; } /* 回答本文内のリンク。 * .hl / .em-o の強調も同じオレンジのため、下線が無いとリンクだと判別できない。 * パンくず（.bc-item）と同じ下線＋オフセットに揃える（納品HTMLからの変更点）。 */ .page-faq-renewal .q-ans-body a { color: var(--mr-fq-orange); text-decoration: underline; text-underline-offset: 2px; } .page-faq-renewal .q-ans-body a:hover { color: var(--mr-fq-orange-dark); } .page-faq-renewal .note { display: block; margin-top: 12px; padding: 10px 14px; background: var(--mr-fq-orange-pale); border-left: 3px solid var(--mr-fq-orange-border); border-radius: 0 6px 6px 0; font-size: 14px; color: var(--mr-fq-text-mid); line-height: 1.75; } /* ===== 戻るボタン ===== */ .page-faq-renewal .back-btn { display: inline-flex; align-items: center; gap: 8px; background: none; border: 1.5px solid var(--mr-fq-border); border-radius: 8px; padding: 8px 16px; font-size: 13px; font-weight: 600; color: var(--mr-fq-text-muted); cursor: pointer; margin-bottom: 24px; transition: all 0.15s; font-family: inherit; } .page-faq-renewal .back-btn:hover { border-color: var(--mr-fq-orange-border); color: var(--mr-fq-orange); } /* ===== お問い合わせ（サポートLINE導線） ===== */ .page-faq-renewal .contact-block { text-align: center; padding: 36px 24px 28px; background: #fff; border: 1.5px solid var(--mr-fq-border); border-radius: var(--mr-fq-radius); margin-top: 20px; } .page-faq-renewal .contact-block p { font-size: 15px; color: var(--mr-fq-text-mid); line-height: 1.85; margin-bottom: 20px; } .page-faq-renewal .contact-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--mr-fq-orange); color: #fff; text-decoration: none; border-radius: 10px; padding: 13px 32px; font-size: 15px; font-weight: 700; transition: opacity 0.15s; } .page-faq-renewal .contact-btn:hover { opacity: 0.88; } /* 納品ではインラインstyleだった余白をクラス化 */ .page-faq-renewal .contact-block--search { margin-top: 24px; } .page-faq-renewal .contact-block--mid { margin-top: 32px; } /* ===== 検索窓 ===== */ .page-faq-renewal .search-wrap { margin-top: 20px; position: relative; max-width: 560px; } .page-faq-renewal .search-input { width: 100%; padding: 14px 48px 14px 20px; border-radius: 12px; border: none; font-size: 15px; font-family: inherit; outline: none; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12); color: var(--mr-fq-text-dark); background: #fff; } .page-faq-renewal .search-input::placeholder { color: #AAA; } .page-faq-renewal .search-icon { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--mr-fq-text-muted); pointer-events: none; /* 納品では未指定。JSが flex / none を切り替えるため初期値を flex にそろえる */ display: flex; } .page-faq-renewal .search-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; } .page-faq-renewal .search-clear { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); background: #DDD; border: none; border-radius: 50%; width: 20px; height: 20px; font-size: 12px; cursor: pointer; display: none; align-items: center; justify-content: center; color: #666; font-family: inherit; } /* ===== 検索結果 ===== */ .page-faq-renewal .search-result-header { font-size: 13px; color: var(--mr-fq-text-muted); margin-bottom: 16px; } .page-faq-renewal .search-result-header strong { color: var(--mr-fq-orange); } .page-faq-renewal .search-result-item { background: #fff; border: 1.5px solid var(--mr-fq-border); border-radius: var(--mr-fq-radius); overflow: hidden; margin-bottom: 8px; transition: border-color 0.15s; } .page-faq-renewal .search-result-item.open { border-color: var(--mr-fq-orange-border); } .page-faq-renewal .search-result-cat { font-size: 11px; font-weight: 700; color: var(--mr-fq-text-muted); padding: 10px 20px 0; letter-spacing: 0.3px; } .page-faq-renewal .search-highlight { background: #FFF0CC; border-radius: 2px; font-weight: 700; color: var(--mr-fq-orange-dark); } /* 納品ではインラインstyleだった0件メッセージをクラス化 */ .page-faq-renewal .search-empty { padding: 32px; text-align: center; color: var(--mr-fq-text-muted); font-size: 14px; } /* ===== レスポンシブ ===== * 納品HTMLでは 900px の @media 開き行が欠落していたため復元（バグ1）。 * header / footer への指定は取り込まない（既存layoutが提供するため）。 */ @media (max-width: 900px) { .page-faq-renewal .page-hero-inner, .page-faq-renewal .faq-main { padding-left: 20px; padding-right: 20px; } .page-faq-renewal .cat-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .page-faq-renewal .page-title { font-size: 22px; } .page-faq-renewal .faq-main { padding-top: 28px; padding-bottom: 56px; } .page-faq-renewal .cat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }