/* ============================================ 遺品整理グリーン 不用品回収LP WordPress Lightning G3 ブロックエディタ対応版 命名規則: glp-* (Green LP) 【設計方針】 - WordPress ブロックエディタの「追加CSSクラス」に glp-* を指定 - .wp-block-group, .wp-block-columns 等のWPブロック構造と共存 - Lightning テーマのデフォルトスタイルを適切にオーバーライド - 複雑なセクション（ヒーロー・比較表・FAQ・フローティングCTA）は カスタムHTMLブロックで実装 ============================================ */ /* ============================================ 0. Google Fonts（ページ に追加推奨） ============================================ */ @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Noto+Serif+JP:wght@500;700&family=Montserrat:wght@700;800&display=swap'); /* ============================================ 1. Lightning テーマ レイアウト解除 ============================================ */ body.page .site-body-container.container { max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; } body.page .site-body { padding-top: 0 !important; padding-bottom: 0 !important; } body.page .main-section { width: 100% !important; max-width: 100% !important; } body.page .entry-body { width: 100% !important; max-width: 100% !important; } /* エントリーヘッダー（ページタイトル）を非表示にする場合 */ body.page .entry-header { display: none !important; } /* ============================================ 2. ページ全体のベーススタイル ============================================ */ /* ページ全体のラッパー（固定ページに glp-page クラスを付与） */ .glp-page { font-family: 'Noto Sans JP', sans-serif !important; color: #2d2a24 !important; line-height: 1.7 !important; -webkit-font-smoothing: antialiased !important; } .glp-page img { max-width: 100% !important; height: auto !important; } /* WordPress ブロック内のリンクリセット */ .glp-page a { text-decoration: none !important; transition: all 0.3s ease !important; } /* WordPress ブロック内のリストリセット */ .glp-page ul, .glp-page ol { list-style: none !important; margin: 0 !important; padding: 0 !important; } .glp-page li { list-style: none !important; } .glp-page li::before, .glp-page li::marker { content: none !important; display: none !important; } /* WordPress ブロック内の見出しリセット */ .glp-page h1, .glp-page h2, .glp-page h3, .glp-page h4 { font-family: 'Noto Serif JP', serif !important; border: none !important; background: none !important; } .glp-page h2 { border-bottom: none !important; padding-bottom: 0 !important; } /* WPブロックのデフォルトマージンを制御 */ .glp-page .wp-block-group { margin-top: 0 !important; margin-bottom: 0 !important; } /* ============================================ 3. 共通コンポーネント ============================================ */ /* --- セクションコンテナ --- */ .glp-container { width: 100% !important; max-width: 1280px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 1rem !important; padding-right: 1rem !important; } @media (min-width: 640px) { .glp-container { padding-left: 1.5rem !important; padding-right: 1.5rem !important; } } @media (min-width: 1024px) { .glp-container { padding-left: 2rem !important; padding-right: 2rem !important; } } /* --- セクション英語ラベル --- */ .glp-label { color: #3A7D44 !important; font-size: 0.8rem !important; font-weight: 500 !important; letter-spacing: 0.15em !important; margin-bottom: 0.5rem !important; text-align: center !important; text-transform: uppercase !important; } /* --- セクションタイトル --- */ .glp-title { font-size: 1.75rem !important; font-weight: 700 !important; text-align: center !important; margin-bottom: 1rem !important; border: none !important; background: none !important; padding: 0 !important; line-height: 1.4 !important; color: #2d2a24 !important; } @media (min-width: 640px) { .glp-title { font-size: 2rem !important; } } @media (min-width: 1024px) { .glp-title { font-size: 2.5rem !important; } } /* --- アクセントカラー（タイトル内のspan） --- */ .glp-accent { color: #3A7D44 !important; } /* --- セクション区切り線 --- */ .glp-divider { width: 60px !important; height: 2px !important; background: #3A7D44 !important; margin: 0 auto 1rem !important; border: none !important; } /* wp-block-separator をglp-dividerとして使う場合 */ .glp-page .wp-block-separator.glp-divider { width: 60px !important; height: 2px !important; background: #3A7D44 !important; margin: 0 auto 1rem !important; border: none !important; opacity: 1 !important; } /* --- セクション説明文 --- */ .glp-desc { text-align: center !important; color: rgba(45,42,36,0.7) !important; max-width: 640px !important; margin-left: auto !important; margin-right: auto !important; font-size: 0.9rem !important; } /* --- セクション背景色 --- */ .glp-bg-white { background: #fff !important; padding: 4rem 0 5rem !important; } .glp-bg-cream { background: #f7f5f0 !important; padding: 4rem 0 5rem !important; } .glp-bg-beige { background: #faf8f3 !important; padding: 4rem 0 5rem !important; } .glp-bg-green { background: linear-gradient(135deg, #3A7D44, #5a9e64) !important; padding: 4rem 0 5rem !important; } /* ============================================ 4. ヒーロー（カスタムHTMLブロック） ============================================ */ .glp-hero { position: relative !important; min-height: 90vh !important; display: flex !important; align-items: center !important; padding-top: 0 !important; overflow: hidden !important; } .glp-hero-bg { position: absolute !important; inset: 0 !important; overflow: hidden !important; } .glp-hero-bg img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; } .glp-hero-overlay { position: absolute !important; inset: 0 !important; background: linear-gradient(to right, rgba(26,58,31,0.72), rgba(26,58,31,0.40), transparent) !important; } .glp-hero-content { position: relative !important; z-index: 2 !important; padding: 3rem 1rem !important; max-width: 640px !important; } @media (min-width: 640px) { .glp-hero-content { padding: 3rem 1.5rem !important; } } @media (min-width: 1024px) { .glp-hero-content { padding: 3rem 2rem !important; } } .glp-hero-badge { display: inline-flex !important; align-items: center !important; gap: 0.5rem !important; background: rgba(255,255,255,0.15) !important; backdrop-filter: blur(4px) !important; border: 1px solid rgba(255,255,255,0.2) !important; border-radius: 999px !important; padding: 0.375rem 1rem !important; margin-bottom: 1.5rem !important; color: rgba(255,255,255,0.9) !important; font-size: 0.85rem !important; } .glp-hero-badge svg { color: #F5A623 !important; } .glp-hero h1 { font-size: 2rem !important; font-weight: 700 !important; color: #fff !important; line-height: 1.3 !important; margin-bottom: 1rem !important; border: none !important; background: none !important; padding: 0 !important; } .glp-hero h1 .highlight { color: #8FD694 !important; } .glp-hero-desc { color: rgba(255,255,255,0.85) !important; font-size: 1rem !important; margin-bottom: 2rem !important; line-height: 1.8 !important; } .glp-hero-stats { display: flex !important; flex-wrap: wrap !important; gap: 1rem !important; margin-bottom: 2rem !important; } .glp-hero-stat { display: flex !important; align-items: center !important; gap: 0.75rem !important; background: rgba(255,255,255,0.1) !important; backdrop-filter: blur(4px) !important; border: 1px solid rgba(255,255,255,0.15) !important; border-radius: 0.5rem !important; padding: 0.75rem 1rem !important; } .glp-hero-stat-icon { color: #8FD694 !important; } .glp-hero-stat-label { color: rgba(255,255,255,0.7) !important; font-size: 0.75rem !important; } .glp-hero-stat-value { color: #fff !important; font-weight: 700 !important; font-size: 1.15rem !important; font-family: 'Montserrat', sans-serif !important; } .glp-hero-price { display: inline-block !important; background: rgba(255,255,255,0.1) !important; backdrop-filter: blur(4px) !important; border: 1px solid rgba(255,255,255,0.15) !important; border-radius: 0.75rem !important; padding: 1rem 1.25rem !important; margin-bottom: 2rem !important; } .glp-hero-price-label { color: rgba(255,255,255,0.8) !important; font-size: 0.85rem !important; } .glp-hero-price-num { color: #fff !important; font-weight: 700 !important; font-size: 1.75rem !important; font-family: 'Montserrat', sans-serif !important; margin: 0 0.5rem !important; } .glp-hero-price-unit { color: rgba(255,255,255,0.8) !important; font-size: 0.85rem !important; } .glp-hero-price-tag { color: #F5A623 !important; font-size: 0.75rem !important; margin-left: 0.5rem !important; } .glp-hero-cta { display: flex !important; flex-direction: column !important; gap: 0.75rem !important; } .glp-cta-phone { display: flex !important; align-items: center !important; justify-content: center !important; gap: 0.75rem !important; background: #F5A623 !important; color: #fff !important; font-weight: 700 !important; padding: 1rem 2rem !important; border-radius: 0.75rem !important; font-size: 1.1rem !important; box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important; border: none !important; cursor: pointer !important; text-decoration: none !important; } .glp-cta-phone:hover { background: #e09510 !important; color: #fff !important; } .glp-cta-phone-sub { font-size: 0.7rem !important; font-weight: 400 !important; opacity: 0.9 !important; } .glp-cta-phone-num { font-family: 'Montserrat', sans-serif !important; } .glp-cta-line { display: flex !important; align-items: center !important; justify-content: center !important; gap: 0.75rem !important; background: #06C755 !important; color: #fff !important; font-weight: 700 !important; padding: 1rem 2rem !important; border-radius: 0.75rem !important; font-size: 1.1rem !important; box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important; border: none !important; cursor: pointer !important; text-decoration: none !important; } .glp-cta-line:hover { background: #05b04c !important; color: #fff !important; } .glp-cta-line-sub { font-size: 0.7rem !important; font-weight: 400 !important; opacity: 0.9 !important; } @media (min-width: 640px) { .glp-hero h1 { font-size: 2.5rem !important; } .glp-hero-cta { flex-direction: row !important; } .glp-hero-price-num { font-size: 2rem !important; } } @media (min-width: 1024px) { .glp-hero h1 { font-size: 3.25rem !important; } } /* ============================================ 5. お悩みセクション（標準ブロック） ============================================ */ .glp-problems { padding: 4rem 0 !important; background: #fff !important; } .glp-problems-grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 1rem !important; max-width: 900px !important; margin: 2rem auto !important; } .glp-problem-card { background: #f7f5f0 !important; border: 1px solid #e8e4d9 !important; border-radius: 0.75rem !important; padding: 1.25rem !important; text-align: center !important; } .glp-problem-icon { width: 48px !important; height: 48px !important; border-radius: 50% !important; background: #fff !important; border: 2px solid #e8e4d9 !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 auto 0.75rem !important; color: #3A7D44 !important; } .glp-problem-text { font-size: 0.85rem !important; color: rgba(45,42,36,0.7) !important; line-height: 1.5 !important; } .glp-problems-resolve { display: inline-flex !important; align-items: center !important; gap: 0.5rem !important; background: linear-gradient(135deg, #3A7D44, #5a9e64) !important; color: #fff !important; padding: 0.75rem 2rem !important; border-radius: 999px !important; font-weight: 700 !important; margin-top: 2rem !important; font-size: 0.95rem !important; } @media (min-width: 640px) { .glp-problems-grid { grid-template-columns: repeat(3, 1fr) !important; } } @media (min-width: 768px) { .glp-problems-grid { grid-template-columns: repeat(5, 1fr) !important; } } /* ============================================ 6. 選ばれる理由セクション（標準ブロック） ============================================ */ .glp-reasons { padding: 4rem 0 5rem !important; background: #f7f5f0 !important; } .glp-reasons-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 1.25rem !important; max-width: 1100px !important; margin: 2rem auto 0 !important; } .glp-reason-card { background: #fff !important; border: 1px solid #e8e4d9 !important; border-radius: 0.75rem !important; padding: 1.5rem !important; position: relative !important; overflow: hidden !important; transition: box-shadow 0.3s, border-color 0.3s !important; } .glp-reason-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.06) !important; border-color: rgba(58,125,68,0.3) !important; } .glp-reason-num { position: absolute !important; top: 0.75rem !important; right: 1rem !important; font-family: 'Montserrat', sans-serif !important; font-size: 2rem !important; font-weight: 800 !important; color: rgba(58,125,68,0.1) !important; } .glp-reason-icon { width: 48px !important; height: 48px !important; border-radius: 0.75rem !important; background: rgba(58,125,68,0.1) !important; display: flex !important; align-items: center !important; justify-content: center !important; color: #3A7D44 !important; margin-bottom: 0.75rem !important; } .glp-reason-title { font-weight: 700 !important; font-size: 1rem !important; margin-bottom: 0.5rem !important; color: #2d2a24 !important; } .glp-reason-desc { font-size: 0.85rem !important; color: rgba(45,42,36,0.7) !important; line-height: 1.6 !important; } @media (min-width: 640px) { .glp-reasons-grid { grid-template-columns: repeat(2, 1fr) !important; } } @media (min-width: 1024px) { .glp-reasons-grid { grid-template-columns: repeat(3, 1fr) !important; } } /* ============================================ 7. 安心宣言セクション（カスタムHTMLブロック） ============================================ */ .glp-trust { padding: 4rem 0 5rem !important; background: #f7f5f0 !important; } .glp-trust-grid { display: flex !important; flex-direction: column !important; gap: 0 !important; max-width: 800px !important; margin: 2rem auto 0 !important; } .glp-trust-image { display: none !important; } .glp-trust-image img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; } .glp-trust-items { display: flex !important; flex-direction: column !important; gap: 1rem !important; } .glp-trust-item { background: #fff !important; border: 1px solid #e8e4d9 !important; border-radius: 0.75rem !important; padding: 1.5rem 1.25rem !important; box-shadow: 0 1px 4px rgba(0,0,0,0.04) !important; } .glp-trust-item-header { display: flex !important; align-items: center !important; gap: 0.75rem !important; margin-bottom: 0.75rem !important; } .glp-trust-item-icon { width: 48px !important; height: 48px !important; border-radius: 12px !important; background: rgba(58,125,68,0.12) !important; display: flex !important; align-items: center !important; justify-content: center !important; color: #3A7D44 !important; flex-shrink: 0 !important; } .glp-trust-item-title { font-weight: 700 !important; font-size: 1.05rem !important; color: #2d2a24 !important; } .glp-trust-item-desc { font-size: 0.9rem !important; color: rgba(45,42,36,0.65) !important; line-height: 1.7 !important; } /* 強調カード（追加料金ゼロ・クーリングオフ） */ .glp-trust-item.glp-trust-highlight { background: #fff !important; border: 2px solid #3A7D44 !important; box-shadow: 0 2px 12px rgba(58,125,68,0.12) !important; position: relative !important; } .glp-trust-item.glp-trust-highlight .glp-trust-item-icon { background: #3A7D44 !important; color: #fff !important; } .glp-trust-item.glp-trust-highlight .glp-trust-item-title { color: #3A7D44 !important; font-size: 1.1rem !important; } /* 警告ボックス */ .glp-trust-warning { background: #fff3e0 !important; border: 1px solid #ffe0b2 !important; border-radius: 0.75rem !important; padding: 1.25rem !important; margin-top: 1.5rem !important; max-width: 1100px !important; margin-left: auto !important; margin-right: auto !important; } .glp-trust-warning-title { display: flex !important; align-items: center !important; gap: 0.5rem !important; font-weight: 700 !important; color: #e65100 !important; margin-bottom: 0.75rem !important; } .glp-trust-warning-list { display: grid !important; grid-template-columns: 1fr !important; gap: 0.5rem !important; } .glp-trust-warning-item { display: flex !important; align-items: flex-start !important; gap: 0.5rem !important; font-size: 0.8rem !important; color: rgba(45,42,36,0.7) !important; } .glp-trust-warning-item .warn-mark { color: #e65100 !important; font-weight: 700 !important; flex-shrink: 0 !important; } /* ホットライン */ .glp-trust-hotline { background: #e8f5e9 !important; border-radius: 0.75rem !important; padding: 1rem 1.25rem !important; margin-top: 1rem !important; max-width: 1100px !important; margin-left: auto !important; margin-right: auto !important; display: flex !important; align-items: flex-start !important; gap: 0.75rem !important; } .glp-trust-hotline-icon { color: #3A7D44 !important; flex-shrink: 0 !important; margin-top: 0.25rem !important; } .glp-trust-hotline-title { font-weight: 700 !important; font-size: 0.9rem !important; margin-bottom: 0.25rem !important; } .glp-trust-hotline-desc { font-size: 0.8rem !important; color: rgba(45,42,36,0.7) !important; } @media (min-width: 640px) { .glp-trust-warning-list { grid-template-columns: repeat(2, 1fr) !important; } } @media (min-width: 768px) { .glp-trust-items { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 1rem !important; } .glp-trust-item { padding: 1.75rem 1.5rem !important; } .glp-trust-item-icon { width: 52px !important; height: 52px !important; } .glp-trust-item-title { font-size: 1.1rem !important; } .glp-trust-item-desc { font-size: 0.9rem !important; } } @media (min-width: 1024px) { .glp-trust-grid { max-width: 900px !important; } } /* ============================================ 8. 比較表セクション（カスタムHTMLブロック） ============================================ */ .glp-comparison { padding: 4rem 0 5rem !important; background: #fff !important; } .glp-comparison-table { max-width: 800px !important; margin: 2rem auto 0 !important; border-radius: 0.75rem !important; overflow: hidden !important; border: 1px solid #e8e4d9 !important; } .glp-comparison-header { display: grid !important; grid-template-columns: 1.5fr 1fr 1fr 1fr !important; background: #f7f5f0 !important; font-size: 0.85rem !important; font-weight: 600 !important; text-align: center !important; } .glp-comparison-header > div { padding: 0.75rem 0.5rem !important; } .glp-comparison-header .green-col { background: #3A7D44 !important; color: #fff !important; font-weight: 700 !important; } .glp-comparison-row { display: grid !important; grid-template-columns: 1.5fr 1fr 1fr 1fr !important; font-size: 0.8rem !important; text-align: center !important; border-top: 1px solid #e8e4d9 !important; } .glp-comparison-row:nth-child(even) { background: #fafaf7 !important; } .glp-comparison-row > div { padding: 0.75rem 0.5rem !important; display: flex !important; align-items: center !important; justify-content: center !important; } .glp-comparison-row > div:first-child { justify-content: flex-start !important; font-weight: 500 !important; color: rgba(45,42,36,0.8) !important; text-align: left !important; } .glp-check { color: #3A7D44 !important; font-weight: 700 !important; font-size: 1.1rem !important; } .glp-cross { color: #e53935 !important; font-weight: 700 !important; font-size: 1.1rem !important; } .glp-dash { color: rgba(45,42,36,0.3) !important; } /* ============================================ 9. 料金プランセクション（カスタムHTMLブロック） ============================================ */ .glp-pricing { padding: 4rem 0 5rem !important; background: #f7f5f0 !important; } .glp-pricing-cards { display: grid !important; grid-template-columns: 1fr !important; gap: 1.5rem !important; max-width: 1000px !important; margin: 2rem auto !important; } .glp-pricing-card { background: #fff !important; border: 1px solid #e8e4d9 !important; border-radius: 0.75rem !important; padding: 1.5rem !important; text-align: center !important; position: relative !important; transition: box-shadow 0.3s, border-color 0.3s !important; } .glp-pricing-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.06) !important; } .glp-pricing-card.popular { border-color: #3A7D44 !important; box-shadow: 0 4px 20px rgba(58,125,68,0.15) !important; } .glp-pricing-badge { position: absolute !important; top: -12px !important; left: 50% !important; transform: translateX(-50%) !important; background: #F5A623 !important; color: #fff !important; font-size: 0.7rem !important; font-weight: 700 !important; padding: 0.25rem 0.75rem !important; border-radius: 999px !important; } .glp-pricing-name { font-family: 'Noto Serif JP', serif !important; font-weight: 700 !important; font-size: 1.1rem !important; margin-bottom: 0.5rem !important; } .glp-pricing-price { font-family: 'Montserrat', sans-serif !important; font-size: 2rem !important; font-weight: 800 !important; color: #3A7D44 !important; } .glp-pricing-unit { font-size: 0.85rem !important; color: rgba(45,42,36,0.7) !important; font-family: 'Noto Sans JP', sans-serif !important; } .glp-pricing-size { font-size: 0.8rem !important; color: rgba(45,42,36,0.5) !important; margin: 0.5rem 0 !important; } .glp-pricing-desc { font-size: 0.8rem !important; color: rgba(45,42,36,0.6) !important; } /* 料金に含まれるもの */ .glp-pricing-includes { max-width: 800px !important; margin: 2rem auto 0 !important; } .glp-pricing-includes-title { font-family: 'Noto Serif JP', serif !important; font-weight: 700 !important; text-align: center !important; margin-bottom: 1rem !important; } .glp-pricing-includes-grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 0.75rem !important; } .glp-pricing-include-item { background: #fff !important; border: 1px solid #e8e4d9 !important; border-radius: 0.5rem !important; padding: 0.75rem !important; text-align: center !important; font-size: 0.8rem !important; color: rgba(45,42,36,0.7) !important; } .glp-pricing-include-item .include-icon { color: #3A7D44 !important; margin-bottom: 0.25rem !important; } /* 単品回収 */ .glp-single-items { max-width: 800px !important; margin: 2rem auto 0 !important; } .glp-single-items-title { font-family: 'Noto Serif JP', serif !important; font-weight: 700 !important; text-align: center !important; margin-bottom: 1rem !important; } .glp-single-items-grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 0.5rem !important; } .glp-single-item { display: flex !important; justify-content: space-between !important; align-items: center !important; background: #fff !important; border: 1px solid #e8e4d9 !important; border-radius: 0.5rem !important; padding: 0.75rem 1rem !important; font-size: 0.85rem !important; } .glp-single-item-price { color: #3A7D44 !important; font-weight: 700 !important; font-family: 'Montserrat', sans-serif !important; } .glp-pricing-note { text-align: center !important; font-size: 0.8rem !important; color: rgba(45,42,36,0.5) !important; margin-top: 1.5rem !important; } @media (min-width: 640px) { .glp-pricing-cards { grid-template-columns: repeat(3, 1fr) !important; } .glp-pricing-includes-grid { grid-template-columns: repeat(4, 1fr) !important; } .glp-single-items-grid { grid-template-columns: repeat(4, 1fr) !important; } } /* ============================================ 10. 低価格の理由セクション（カスタムHTMLブロック） ============================================ */ .glp-whycheap { padding: 4rem 0 5rem !important; background: #fff !important; } .glp-whycheap-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 2rem !important; max-width: 1100px !important; margin: 0 auto !important; align-items: center !important; } .glp-whycheap-reason { display: flex !important; gap: 1rem !important; margin-bottom: 1.25rem !important; } .glp-whycheap-reason-icon { width: 48px !important; height: 48px !important; border-radius: 0.75rem !important; background: rgba(58,125,68,0.1) !important; display: flex !important; align-items: center !important; justify-content: center !important; color: #3A7D44 !important; flex-shrink: 0 !important; } .glp-whycheap-reason-title { font-weight: 700 !important; margin-bottom: 0.25rem !important; } .glp-whycheap-reason-desc { font-size: 0.85rem !important; color: rgba(45,42,36,0.7) !important; line-height: 1.6 !important; } .glp-whycheap-image { position: relative !important; } .glp-whycheap-image img { border-radius: 1rem !important; box-shadow: 0 8px 24px rgba(0,0,0,0.1) !important; display: block !important; } .glp-whycheap-badge { position: absolute !important; bottom: -1rem !important; left: -1rem !important; background: #3A7D44 !important; color: #fff !important; border-radius: 0.75rem !important; padding: 1rem !important; box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important; } .glp-whycheap-badge-num { font-family: 'Montserrat', sans-serif !important; font-size: 1.5rem !important; font-weight: 700 !important; } .glp-whycheap-badge-label { font-size: 0.7rem !important; opacity: 0.9 !important; } @media (min-width: 1024px) { .glp-whycheap-grid { grid-template-columns: 1fr 1fr !important; } } /* ============================================ 11. 買取サービスセクション（カスタムHTMLブロック） ============================================ */ .glp-kaitori { padding: 4rem 0 5rem !important; background: #f7f5f0 !important; } .glp-kaitori-flow { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 0.5rem !important; margin: 2rem auto !important; max-width: 700px !important; } .glp-kaitori-step { background: #fff !important; border: 1px solid #e8e4d9 !important; border-radius: 0.75rem !important; padding: 0.75rem 1.25rem !important; text-align: center !important; } .glp-kaitori-step-label { font-size: 0.7rem !important; color: #3A7D44 !important; font-weight: 500 !important; } .glp-kaitori-step-text { font-size: 0.85rem !important; font-weight: 500 !important; } .glp-kaitori-arrow { color: #3A7D44 !important; font-size: 1.25rem !important; transform: rotate(90deg) !important; } .glp-kaitori-cats { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 1rem !important; max-width: 900px !important; margin: 0 auto !important; } .glp-kaitori-cat { background: #fff !important; border: 1px solid #e8e4d9 !important; border-radius: 0.75rem !important; padding: 1.25rem !important; transition: border-color 0.3s !important; } .glp-kaitori-cat:hover { border-color: rgba(58,125,68,0.3) !important; } .glp-kaitori-cat-name { font-weight: 700 !important; margin-bottom: 0.5rem !important; display: flex !important; align-items: center !important; gap: 0.5rem !important; } .glp-kaitori-cat-dot { width: 8px !important; height: 8px !important; border-radius: 50% !important; background: #3A7D44 !important; display: inline-block !important; } .glp-kaitori-cat-items { font-size: 0.8rem !important; color: rgba(45,42,36,0.6) !important; } .glp-kaitori-note { text-align: center !important; font-size: 0.8rem !important; color: rgba(45,42,36,0.5) !important; margin-top: 1.5rem !important; } @media (min-width: 640px) { .glp-kaitori-flow { flex-direction: row !important; gap: 1rem !important; } .glp-kaitori-arrow { transform: rotate(0) !important; } .glp-kaitori-cats { grid-template-columns: repeat(3, 1fr) !important; } } /* ============================================ 12. 作業事例セクション（カスタムHTMLブロック） ============================================ */ .glp-cases { padding: 4rem 0 5rem !important; background: #fff !important; } .glp-cases-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 1.5rem !important; max-width: 1000px !important; margin: 2rem auto 0 !important; } .glp-case-card { background: #f7f5f0 !important; border: 1px solid #e8e4d9 !important; border-radius: 0.75rem !important; overflow: hidden !important; } .glp-case-header { background: #3A7D44 !important; color: #fff !important; padding: 1rem 1.25rem !important; } .glp-case-title { font-weight: 700 !important; font-size: 0.95rem !important; color: #fff !important; } /* ビフォーアフター写真 */ .glp-case-photos { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: 0 !important; position: relative !important; width: 100% !important; overflow: hidden !important; } .glp-case-photo { flex: 0 0 50% !important; width: 50% !important; max-width: 50% !important; min-width: 0 !important; position: relative !important; overflow: hidden !important; } .glp-case-photo img { width: 100% !important; height: auto !important; aspect-ratio: 4/3 !important; object-fit: cover !important; display: block !important; max-width: 100% !important; } .glp-case-photo-label { position: absolute !important; top: 8px !important; font-size: 0.65rem !important; font-weight: 700 !important; padding: 2px 10px !important; border-radius: 3px !important; letter-spacing: 0.05em !important; line-height: 1.6 !important; z-index: 1 !important; } .glp-case-photo.before .glp-case-photo-label { left: 8px !important; background: rgba(45,42,36,0.75) !important; color: #fff !important; } .glp-case-photo.after .glp-case-photo-label { right: 8px !important; background: rgba(58,125,68,0.85) !important; color: #fff !important; } .glp-case-photos-arrow { position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; z-index: 2 !important; width: 28px !important; height: 28px !important; background: #fff !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 1px 4px rgba(0,0,0,0.2) !important; color: #3A7D44 !important; font-size: 0.75rem !important; font-weight: 700 !important; } .glp-case-body { padding: 1.25rem !important; } .glp-case-details { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 0.5rem !important; margin-bottom: 0.75rem !important; } .glp-case-detail { font-size: 0.8rem !important; color: rgba(45,42,36,0.7) !important; } .glp-case-detail-label { font-size: 0.7rem !important; color: rgba(45,42,36,0.5) !important; } .glp-case-total { display: flex !important; justify-content: space-between !important; align-items: center !important; border-top: 1px solid #e8e4d9 !important; padding-top: 0.75rem !important; } .glp-case-total-label { font-weight: 700 !important; } .glp-case-total-price { font-family: 'Montserrat', sans-serif !important; font-weight: 800 !important; font-size: 1.25rem !important; color: #3A7D44 !important; } .glp-case-kaitori { font-size: 0.8rem !important; color: rgba(45,42,36,0.6) !important; margin-bottom: 0.5rem !important; } .glp-case-kaitori span { color: #3A7D44 !important; } @media (min-width: 640px) { .glp-cases-grid { grid-template-columns: repeat(3, 1fr) !important; } } /* ============================================ 13. お客様の声セクション（カスタムHTMLブロック） ============================================ */ .glp-testimonials { padding: 4rem 0 5rem !important; background: #f7f5f0 !important; } .glp-testimonials-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 1.5rem !important; max-width: 1000px !important; margin: 2rem auto 0 !important; } .glp-testimonial-card { background: #fff !important; border: 1px solid #e8e4d9 !important; border-radius: 0.75rem !important; padding: 1.5rem !important; } .glp-testimonial-stars { color: #F5A623 !important; font-size: 0.85rem !important; letter-spacing: 0.1em !important; margin-bottom: 0.75rem !important; } .glp-testimonial-text { font-size: 0.85rem !important; color: rgba(45,42,36,0.7) !important; line-height: 1.7 !important; margin-bottom: 1rem !important; font-style: italic !important; border-left: 3px solid #3A7D44 !important; padding-left: 1rem !important; } .glp-testimonial-author { display: flex !important; align-items: center !important; gap: 0.75rem !important; } .glp-testimonial-avatar { width: 40px !important; height: 40px !important; border-radius: 50% !important; background: #e8f5e9 !important; display: flex !important; align-items: center !important; justify-content: center !important; color: #3A7D44 !important; font-weight: 700 !important; font-size: 0.85rem !important; } .glp-testimonial-name { font-weight: 700 !important; font-size: 0.85rem !important; } .glp-testimonial-info { font-size: 0.75rem !important; color: rgba(45,42,36,0.5) !important; } @media (min-width: 640px) { .glp-testimonials-grid { grid-template-columns: repeat(2, 1fr) !important; } } /* ============================================ 14. ご利用の流れセクション（カスタムHTMLブロック） ============================================ */ .glp-flow { padding: 4rem 0 5rem !important; background: #fff !important; } .glp-flow-steps { display: flex !important; flex-direction: column !important; gap: 1rem !important; max-width: 800px !important; margin: 2rem auto !important; } .glp-flow-step { display: flex !important; gap: 1rem !important; align-items: flex-start !important; } .glp-flow-step-num { width: 40px !important; height: 40px !important; border-radius: 50% !important; background: rgba(58,125,68,0.1) !important; display: flex !important; align-items: center !important; justify-content: center !important; color: #3A7D44 !important; font-weight: 700 !important; font-family: 'Montserrat', sans-serif !important; flex-shrink: 0 !important; } .glp-flow-step-content { background: #fff !important; border: 1px solid #e8e4d9 !important; border-radius: 0.75rem !important; padding: 1rem 1.25rem !important; flex: 1 !important; } .glp-flow-step-title { font-weight: 700 !important; margin-bottom: 0.25rem !important; } .glp-flow-step-desc { font-size: 0.8rem !important; color: rgba(45,42,36,0.7) !important; line-height: 1.6 !important; } /* ============================================ 15. スタッフ紹介セクション（カスタムHTMLブロック） ============================================ */ .glp-staff { padding: 4rem 0 5rem !important; background: #f7f5f0 !important; } .glp-staff-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 2rem !important; max-width: 1000px !important; margin: 2rem auto 0 !important; align-items: center !important; } .glp-staff-image img { border-radius: 1rem !important; box-shadow: 0 8px 24px rgba(0,0,0,0.1) !important; display: block !important; } .glp-staff-title { font-size: 1.2rem !important; font-weight: 700 !important; margin-bottom: 1rem !important; line-height: 1.5 !important; } .glp-staff-desc { font-size: 0.9rem !important; color: rgba(45,42,36,0.7) !important; line-height: 1.7 !important; margin-bottom: 1.5rem !important; } .glp-staff-quals { display: flex !important; flex-direction: column !important; gap: 0.75rem !important; } .glp-staff-qual { display: flex !important; align-items: center !important; gap: 0.75rem !important; background: #fff !important; border: 1px solid #e8e4d9 !important; border-radius: 0.5rem !important; padding: 0.75rem 1rem !important; } .glp-staff-qual-icon { color: #3A7D44 !important; flex-shrink: 0 !important; } .glp-staff-qual-text { font-size: 0.85rem !important; color: rgba(45,42,36,0.8) !important; } @media (min-width: 1024px) { .glp-staff-grid { grid-template-columns: 1fr 1fr !important; } } /* ============================================ 16. 認定・許可情報セクション（カスタムHTMLブロック） ============================================ */ .glp-awards { padding: 4rem 0 !important; background: #fff !important; } .glp-awards-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 1.5rem !important; max-width: 800px !important; margin: 2rem auto 0 !important; } .glp-award-card { text-align: center !important; background: #f7f5f0 !important; border: 1px solid #e8e4d9 !important; border-radius: 0.75rem !important; padding: 1.5rem !important; } .glp-award-icon { margin-bottom: 0.75rem !important; } .glp-award-icon svg { margin: 0 auto !important; display: block !important; } .glp-award-name { font-weight: 700 !important; font-size: 0.85rem !important; margin-bottom: 0.25rem !important; } .glp-award-detail { font-size: 0.75rem !important; color: rgba(45,42,36,0.6) !important; } /* ============================================ 17. FAQセクション（カスタムHTMLブロック） ============================================ */ .glp-faq { padding: 4rem 0 5rem !important; background: #faf8f3 !important; } .glp-faq-list { max-width: 800px !important; margin: 2rem auto 0 !important; } .glp-faq-item { background: #fff !important; border: 1px solid #e8e4d9 !important; border-radius: 0.75rem !important; margin-bottom: 0.75rem !important; overflow: hidden !important; } .glp-faq-question { width: 100% !important; display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 1.25rem 1.5rem !important; background: none !important; border: none !important; font-size: 0.9rem !important; font-weight: 500 !important; text-align: left !important; cursor: pointer !important; font-family: 'Noto Sans JP', sans-serif !important; color: #2d2a24 !important; transition: color 0.3s !important; } .glp-faq-question:hover { color: #3A7D44 !important; } .glp-faq-question .q-label { color: #3A7D44 !important; font-weight: 700 !important; font-family: 'Montserrat', sans-serif !important; margin-right: 0.75rem !important; flex-shrink: 0 !important; } .glp-faq-question .q-arrow { transition: transform 0.3s !important; flex-shrink: 0 !important; margin-left: 1rem !important; } .glp-faq-item.open .q-arrow { transform: rotate(180deg) !important; } .glp-faq-answer { max-height: 0 !important; overflow: hidden !important; transition: max-height 0.4s ease, padding 0.3s ease !important; } .glp-faq-item.open .glp-faq-answer { max-height: 300px !important; padding: 0 1.5rem 1.25rem 3rem !important; } .glp-faq-answer p { font-size: 0.85rem !important; color: rgba(45,42,36,0.7) !important; line-height: 1.7 !important; } /* ============================================ 18. 粗大ごみ処分ガイドセクション（カスタムHTMLブロック） ============================================ */ .glp-guide { padding: 4rem 0 5rem !important; background: #fff !important; } .glp-guide-content { max-width: 900px !important; margin: 0 auto !important; } .glp-guide-intro { font-size: 0.9rem !important; color: rgba(45,42,36,0.8) !important; line-height: 1.7 !important; margin: 2rem 0 !important; } .glp-guide-cities { display: grid !important; grid-template-columns: 1fr !important; gap: 1.5rem !important; margin-bottom: 2rem !important; } .glp-guide-city { background: #f7f5f0 !important; border: 1px solid #e8e4d9 !important; border-radius: 0.75rem !important; padding: 1.5rem !important; } .glp-guide-city h3 { font-weight: 700 !important; margin-bottom: 0.75rem !important; } .glp-guide-city li { font-size: 0.85rem !important; color: rgba(45,42,36,0.7) !important; padding: 0.25rem 0 !important; } .glp-guide-compare { border: 1px solid #e8e4d9 !important; border-radius: 0.75rem !important; overflow: hidden !important; margin-bottom: 2rem !important; } .glp-guide-compare-header { display: grid !important; grid-template-columns: 1.2fr 1fr 1fr !important; text-align: center !important; font-size: 0.8rem !important; font-weight: 600 !important; } .glp-guide-compare-header > div { padding: 0.75rem !important; background: #f7f5f0 !important; } .glp-guide-compare-header .green-col { background: #3A7D44 !important; color: #fff !important; } .glp-guide-compare-row { display: grid !important; grid-template-columns: 1.2fr 1fr 1fr !important; font-size: 0.8rem !important; text-align: center !important; border-top: 1px solid #e8e4d9 !important; } .glp-guide-compare-row:nth-child(even) { background: #fafaf7 !important; } .glp-guide-compare-row > div { padding: 0.75rem 0.5rem !important; } .glp-guide-compare-row > div:first-child { text-align: left !important; font-weight: 500 !important; color: rgba(45,42,36,0.8) !important; } .glp-guide-compare-row > div:last-child { color: #3A7D44 !important; font-weight: 500 !important; } .glp-guide-note { display: flex !important; align-items: flex-start !important; gap: 0.75rem !important; background: #e8f5e9 !important; border-radius: 0.75rem !important; padding: 1.25rem !important; } .glp-guide-note-icon { color: #3A7D44 !important; flex-shrink: 0 !important; margin-top: 0.25rem !important; } .glp-guide-note-title { font-weight: 700 !important; font-size: 0.9rem !important; margin-bottom: 0.25rem !important; } .glp-guide-note-desc { font-size: 0.85rem !important; color: rgba(45,42,36,0.7) !important; line-height: 1.6 !important; } @media (min-width: 640px) { .glp-guide-cities { grid-template-columns: repeat(2, 1fr) !important; } } /* ============================================ 19. 対応エリアセクション（カスタムHTMLブロック） ============================================ */ .glp-area { padding: 4rem 0 5rem !important; background: #f7f5f0 !important; } .glp-area-group { max-width: 900px !important; margin: 0 auto 2rem !important; } .glp-area-group-title { display: flex !important; align-items: center !important; gap: 0.5rem !important; font-weight: 700 !important; font-size: 1.1rem !important; margin-bottom: 1rem !important; } .glp-area-group-icon { color: #3A7D44 !important; } .glp-area-tags { display: flex !important; flex-wrap: wrap !important; gap: 0.5rem !important; } .glp-area-tag { background: #fff !important; border: 1px solid #e8e4d9 !important; border-radius: 0.5rem !important; padding: 0.375rem 0.75rem !important; font-size: 0.8rem !important; color: rgba(45,42,36,0.7) !important; } .glp-area-pref { background: #fff !important; border: 1px solid #e8e4d9 !important; border-radius: 0.5rem !important; padding: 0.5rem 1rem !important; } .glp-area-pref-name { font-size: 0.85rem !important; font-weight: 500 !important; } .glp-area-pref-note { font-size: 0.7rem !important; color: rgba(45,42,36,0.5) !important; margin-left: 0.25rem !important; } /* ============================================ 20. CTA（お問い合わせ）セクション（カスタムHTMLブロック） ============================================ */ .glp-cta-bottom { padding: 4rem 0 5rem !important; position: relative !important; overflow: hidden !important; background: linear-gradient(135deg, #3A7D44, #5a9e64) !important; } .glp-cta-bottom-decor { position: absolute !important; inset: 0 !important; opacity: 0.1 !important; pointer-events: none !important; } .glp-cta-bottom-decor .circle { position: absolute !important; border: 1px solid #fff !important; border-radius: 50% !important; } .glp-cta-bottom-decor .c1 { top: 2rem !important; left: 2rem !important; width: 10rem !important; height: 10rem !important; } .glp-cta-bottom-decor .c2 { bottom: 2rem !important; right: 2rem !important; width: 15rem !important; height: 15rem !important; } .glp-cta-bottom-decor .c3 { top: 50% !important; left: 33% !important; width: 5rem !important; height: 5rem !important; } .glp-cta-bottom-content { position: relative !important; z-index: 2 !important; text-align: center !important; } .glp-cta-bottom-badge { display: inline-flex !important; align-items: center !important; gap: 0.5rem !important; background: rgba(255,255,255,0.15) !important; backdrop-filter: blur(4px) !important; border-radius: 999px !important; padding: 0.375rem 1rem !important; margin-bottom: 1rem !important; color: rgba(255,255,255,0.9) !important; font-size: 0.85rem !important; } .glp-cta-bottom-badge svg { color: #F5A623 !important; } .glp-cta-bottom h2 { font-size: 1.75rem !important; font-weight: 700 !important; color: #fff !important; border: none !important; background: none !important; } .glp-cta-bottom-desc { color: rgba(255,255,255,0.8) !important; max-width: 560px !important; margin: 0 auto 1.5rem !important; } .glp-cta-bottom-badges { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 0.75rem !important; margin-bottom: 2rem !important; } .glp-cta-bottom-badge-item { display: flex !important; align-items: center !important; gap: 0.5rem !important; background: rgba(255,255,255,0.15) !important; backdrop-filter: blur(4px) !important; border-radius: 999px !important; padding: 0.5rem 1rem !important; color: #fff !important; font-size: 0.85rem !important; } .glp-cta-bottom-badge-item svg { opacity: 0.8 !important; } .glp-cta-bottom-buttons { display: flex !important; flex-direction: column !important; gap: 1rem !important; justify-content: center !important; max-width: 600px !important; margin: 0 auto !important; } .glp-cta-bottom-phone { display: flex !important; align-items: center !important; justify-content: center !important; gap: 0.75rem !important; background: #F5A623 !important; color: #fff !important; font-weight: 700 !important; padding: 1.25rem 2rem !important; border-radius: 0.75rem !important; font-size: 1.1rem !important; box-shadow: 0 4px 16px rgba(0,0,0,0.2) !important; flex: 1 !important; border: none !important; cursor: pointer !important; text-decoration: none !important; } .glp-cta-bottom-phone:hover { background: #e09510 !important; color: #fff !important; } .glp-cta-bottom-line { display: flex !important; align-items: center !important; justify-content: center !important; gap: 0.75rem !important; background: #fff !important; color: #3A7D44 !important; font-weight: 700 !important; padding: 1.25rem 2rem !important; border-radius: 0.75rem !important; font-size: 1.1rem !important; box-shadow: 0 4px 16px rgba(0,0,0,0.1) !important; flex: 1 !important; border: none !important; cursor: pointer !important; text-decoration: none !important; } .glp-cta-bottom-line:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.15) !important; } .glp-cta-bottom-mail { display: inline-flex !important; align-items: center !important; gap: 0.5rem !important; color: rgba(255,255,255,0.8) !important; font-size: 0.85rem !important; margin-top: 1.5rem !important; text-decoration: none !important; } .glp-cta-bottom-mail:hover { color: #fff !important; } @media (min-width: 640px) { .glp-cta-bottom h2 { font-size: 2.25rem !important; } .glp-cta-bottom-buttons { flex-direction: row !important; } } /* ============================================ 21. フッター（カスタムHTMLブロック） ============================================ */ .glp-footer { background: #1a3a1f !important; color: rgba(255,255,255,0.8) !important; padding: 3rem 0 2rem !important; } .glp-footer-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 2rem !important; margin-bottom: 2rem !important; } .glp-footer-logo { display: flex !important; align-items: center !important; gap: 0.5rem !important; margin-bottom: 1rem !important; } .glp-footer-logo-circle { width: 32px !important; height: 32px !important; border-radius: 50% !important; background: rgba(255,255,255,0.2) !important; display: flex !important; align-items: center !important; justify-content: center !important; color: #fff !important; font-weight: 700 !important; font-size: 0.85rem !important; font-family: 'Montserrat', sans-serif !important; } .glp-footer-logo-text { color: #fff !important; font-weight: 700 !important; font-family: 'Noto Serif JP', serif !important; } .glp-footer-logo-sub { font-size: 0.65rem !important; color: rgba(255,255,255,0.5) !important; display: block !important; } .glp-footer-desc { font-size: 0.85rem !important; color: rgba(255,255,255,0.6) !important; margin-bottom: 1rem !important; line-height: 1.6 !important; } .glp-footer-contact { display: flex !important; flex-direction: column !important; gap: 0.5rem !important; font-size: 0.85rem !important; } .glp-footer-contact-item { display: flex !important; align-items: center !important; gap: 0.5rem !important; } .glp-footer-contact-item svg { color: #8FD694 !important; flex-shrink: 0 !important; } .glp-footer-links-title { color: #fff !important; font-weight: 700 !important; font-size: 0.85rem !important; margin-bottom: 1rem !important; font-family: 'Noto Serif JP', serif !important; } .glp-footer-links { display: flex !important; flex-direction: column !important; gap: 0.5rem !important; } .glp-footer-links a { font-size: 0.85rem !important; color: rgba(255,255,255,0.6) !important; text-decoration: none !important; } .glp-footer-links a:hover { color: #fff !important; } .glp-footer-license { border-top: 1px solid rgba(255,255,255,0.1) !important; padding-top: 1.5rem !important; margin-bottom: 1.5rem !important; text-align: center !important; font-size: 0.7rem !important; color: rgba(255,255,255,0.4) !important; } .glp-footer-copyright { text-align: center !important; font-size: 0.7rem !important; color: rgba(255,255,255,0.3) !important; } @media (min-width: 640px) { .glp-footer-grid { grid-template-columns: 2fr 1fr 1fr !important; } } /* ============================================ 22. フローティングCTA（カスタムHTMLブロック） ============================================ */ .glp-floating-cta { position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; z-index: 9999 !important; background: rgba(255,255,255,0.95) !important; backdrop-filter: blur(8px) !important; border-top: 1px solid #e8e4d9 !important; padding: 0.5rem !important; box-shadow: 0 -2px 12px rgba(0,0,0,0.08) !important; display: none !important; } .glp-floating-cta.visible { display: block !important; } .glp-floating-cta-inner { display: flex !important; gap: 0.5rem !important; } .glp-floating-cta a { flex: 1 !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 0.5rem !important; padding: 0.75rem !important; border-radius: 0.5rem !important; font-weight: 700 !important; font-size: 0.85rem !important; color: #fff !important; text-decoration: none !important; } .glp-floating-cta .float-phone { background: #F5A623 !important; } .glp-floating-cta .float-line { background: #06C755 !important; } @media (min-width: 1024px) { .glp-floating-cta { display: none !important; } } /* ============================================ 23. ユーティリティ ============================================ */ html { scroll-behavior: smooth; } /* Before/After画像 */ .glp-before-after { max-width: 900px !important; margin: 2rem auto !important; } .glp-before-after img { border-radius: 0.75rem !important; box-shadow: 0 4px 16px rgba(0,0,0,0.08) !important; display: block !important; width: 100% !important; }