/* ============================================================== column-style.css 「お役立ちコラム」記事・一覧ページ共通スタイル わくわく本舗（旧わくわく工房） [フォルダー構成] /css/column/column-style.css ← このファイル /column/index.html ← コラム一覧ページ /column/xxxxx.html ← 各コラム記事 各コラムページの で下記のように読み込んでください（column/ 配下からの相対パス）： [設計方針] - 「エアコンクリーニング専門店が発信する、信頼性の高い一次情報コラム」という トーンに合わせ、ブログ／アフィリエイト風の派手な装飾は避けています。 - 配色はネイビー（見出し・アイコン）×ブルー（アクセント・装飾）×グレー（本文）を基本とし、 既存の sitemap.html カード（#1d4f7a ネイビー／#4db8ff ブルー）と揃えています。 - CTA（お申し込み導線）だけは視認性を優先し、オレンジ系のアクセントカラーを使用します。 - モバイル閲覧を主として、本文サイズ・行間・余白を調整しています。 ============================================================== */ .wk-article, .wk-column-index{ /* --- カラートークン --- */ --wk-navy:#1d4f7a; /* 見出し・アイコンの濃色（信頼感） */ --wk-blue:#4db8ff; /* アクセントブルー（罫線・バッジ・見出し帯） */ --wk-blue-pale:#eef8ff; /* 薄い水色（背景） */ --wk-blue-pale2:#dceffb; /* 薄い水色（ゼブラ・ホバー用、やや濃いめ） */ --wk-line:#d8ecf7; /* 罫線色 */ --wk-gray-900:#2c2c2c; /* 見出し文字（純黒は使わない） */ --wk-gray-700:#4a4a4a; /* 本文文字 */ --wk-gray-500:#767676; /* 補足・キャプション文字 */ --wk-cta:#f2994a; /* CTAアクセント（オレンジ） */ --wk-cta-dark:#d9822f; /* CTAホバー用の濃色 */ max-width:760px; margin:0 auto; padding:0 16px; color:var(--wk-gray-700); font-size:15.5px; line-height:1.8; } @media (min-width:900px){ .wk-article, .wk-column-index{ font-size:16.5px; } } /* ============================================================== 見出し ============================================================== */ .wk-article h2, .wk-column-index h2{ font-family:'Zen Kaku Gothic New','Noto Sans JP',sans-serif; font-weight:700; font-size:1.4em; color:var(--wk-navy); margin:2.4em 0 0.9em; padding-bottom:0.5em; border-bottom:2px solid var(--wk-line); position:relative; scroll-margin-top:24px; } .wk-article h2::before{ content:""; display:inline-block; width:0.55em; height:0.55em; background:var(--wk-blue); border-radius:2px; margin-right:0.5em; vertical-align:middle; transform:translateY(-0.1em); } .wk-article h2:first-of-type{margin-top:0.2em;} .wk-article h3{ font-family:'Zen Kaku Gothic New','Noto Sans JP',sans-serif; font-weight:700; font-size:1.12em; color:var(--wk-gray-900); margin:1.7em 0 0.6em; padding-bottom:0.3em; border-bottom:1px solid var(--wk-line); display:inline-block; scroll-margin-top:24px; } .wk-article h4{ font-weight:700; font-size:1em; color:var(--wk-navy); margin:1.3em 0 0.5em; padding-left:0.7em; border-left:3px solid var(--wk-blue); } .wk-article p{margin:0 0 1.1em;} .wk-article ul{margin:0 0 1.1em; padding-left:1.3em;} .wk-article li{margin-bottom:0.4em;} .wk-article a{color:var(--wk-navy);} .wk-article hr{border:none; height:1px; background:var(--wk-line); margin:2em 0;} /* ============================================================== リード文（記事冒頭のまとめ枠） ============================================================== */ .wk-lead{ background:var(--wk-blue-pale); border-radius:10px; padding:1.3em 1.5em; margin:0 0 2em; } .wk-lead p{margin:0;} .wk-lead p + p{margin-top:0.8em;} .wk-lead-points{list-style:none; padding-left:0; margin:0.8em 0 0;} .wk-lead-points li{position:relative; padding-left:1.5em; margin-bottom:0.5em;} .wk-lead-points li::before{ content:""; position:absolute; left:0; top:0.55em; width:8px; height:8px; border-radius:2px; background:var(--wk-blue); } /* ============================================================== 目次 ============================================================== */ .wk-toc{ background:var(--wk-blue-pale); border-radius:10px; padding:1.3em 1.5em; margin:0 0 1.6em; } .wk-toc-title{margin:0 0 0.8em; font-weight:700; color:var(--wk-navy); font-size:1.02em;} .wk-toc ol{counter-reset:wk-toc; list-style:none; margin:0; padding:0;} .wk-toc li{counter-increment:wk-toc; position:relative; padding-left:2.2em; margin-bottom:0.6em;} .wk-toc li::before{ content:counter(wk-toc); position:absolute; left:0; top:0.05em; width:1.5em; height:1.5em; border-radius:50%; background:var(--wk-blue); color:#fff; font-size:0.8em; line-height:1.5em; text-align:center; } .wk-toc a{color:var(--wk-gray-700); text-decoration:none;} .wk-toc a:hover{text-decoration:underline;} /* ============================================================== コールアウト（注記・補足・注意） ============================================================== */ .wk-callout{ background:var(--wk-blue-pale); border-left:4px solid var(--wk-blue); border-radius:0 8px 8px 0; padding:1em 1.3em; margin:0 0 1.3em; color:var(--wk-gray-700); } .wk-callout p{margin:0;} .wk-callout p + p{margin-top:0.6em;} .wk-callout.is-note{ background:#f5f5f5; border-left-color:var(--wk-gray-500); } .wk-callout.is-danger{ border-left-width:6px; border-left-color:var(--wk-navy); } .wk-danger-box{ background:var(--wk-blue-pale); border:2px solid var(--wk-blue); border-radius:10px; padding:1.3em 1.5em; margin:0 0 1.3em; } .wk-danger-box h3{ display:flex; align-items:center; gap:0.5em; margin:0 0 0.6em; border-bottom:none; padding-bottom:0; } .wk-icon{color:var(--wk-blue); display:inline-flex; flex:0 0 auto;} /* ============================================================== ステップ／チェックリスト ============================================================== */ .wk-steps{list-style:none; margin:0 0 1.3em; padding:0; counter-reset:wk-step;} .wk-steps li{position:relative; padding:0.1em 0 0.9em 2.4em; margin:0;} .wk-steps li::before{ counter-increment:wk-step; content:counter(wk-step); position:absolute; left:0; top:0; width:1.6em; height:1.6em; border-radius:50%; background:var(--wk-blue); color:#fff; font-weight:700; font-size:0.85em; display:flex; align-items:center; justify-content:center; } .wk-check-list{list-style:none; margin:0 0 1.3em; padding:0;} .wk-check-list li{ display:flex; align-items:flex-start; gap:0.6em; padding:0.6em 0.2em; border-bottom:1px dashed var(--wk-line); } .wk-check-list li:last-child{border-bottom:none;} .wk-check-list input[type="checkbox"]{ margin-top:0.25em; width:1.05em; height:1.05em; accent-color:var(--wk-blue); flex:0 0 auto; } .wk-check-list label{display:flex; gap:0.6em; cursor:default;} /* チェックリスト：準備物リストなど、2列で使う場合 */ .wk-checklist{list-style:none; padding:0; margin:1.2em 0; display:grid; grid-template-columns:1fr 1fr; gap:8px 20px;} @media (max-width:520px){.wk-checklist{grid-template-columns:1fr;}} .wk-checklist li{position:relative; padding-left:1.7em; margin-bottom:0;} .wk-checklist li::before{ content:""; position:absolute; left:0; top:0.15em; width:1.05em; height:1.05em; border:2px solid var(--wk-blue); border-radius:3px; } /* ============================================================== クイックナビ（ジャンプチップ） ============================================================== */ .wk-quicknav{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin:0 0 1.3em; padding:0; list-style:none; } @media (max-width:520px){.wk-quicknav{grid-template-columns:1fr;}} .wk-quicknav-chip{ display:flex; align-items:center; gap:0.7em; background:#fff; border:1px solid var(--wk-line); border-radius:10px; padding:0.8em 1em; text-decoration:none; color:var(--wk-gray-700); transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease; } .wk-quicknav-chip:hover{ border-color:var(--wk-blue); transform:translateY(-2px); box-shadow:0 6px 14px rgba(77,184,255,0.18); color:var(--wk-gray-700); } .wk-quicknav-chip strong{display:block; font-size:0.96em; color:var(--wk-navy);} .wk-quicknav-chip small{display:block; color:var(--wk-gray-500); font-size:0.82em; margin-top:0.15em;} /* ============================================================== 情報カード／向き不向きカード ============================================================== */ .wk-info-card{ background:#fff; border:1px solid var(--wk-line); border-radius:10px; padding:1.5em 1.4em 1.3em; margin:1.3em 0; scroll-margin-top:16px; } .wk-info-card-head{ display:flex; align-items:center; gap:0.8em; margin-bottom:0.9em; } .wk-info-card-head .wk-icon{ width:2.4em; height:2.4em; border-radius:0.7em; background:var(--wk-blue-pale); justify-content:center; } .wk-info-card-head h3{margin:0; border-bottom:none; padding-bottom:0;} .wk-compare{display:flex; gap:16px; margin:1.2em 0 1.4em; flex-wrap:wrap;} .wk-compare-card{flex:1 1 260px; border-radius:10px; padding:1.3em 1.4em; border:1px solid var(--wk-line);} .wk-compare-card.is-self{background:#fff;} .wk-compare-card.is-pro{background:var(--wk-blue-pale); border-color:transparent;} .wk-compare-card h4{margin:0 0 0.7em; padding-left:0; border-left:none; font-size:1em; color:var(--wk-gray-900);} .wk-compare-card ul{margin:0; padding-left:1.2em;} .wk-compare-card li{margin-bottom:0.3em;} .wk-fit{display:flex; gap:16px; margin:1.2em 0 1.4em; flex-wrap:wrap;} .wk-fit-card{flex:1 1 260px; border-radius:10px; padding:1.3em 1.4em;} .wk-fit-card.is-yes{background:var(--wk-blue-pale2);} .wk-fit-card.is-no{background:var(--wk-blue-pale);} .wk-fit-card h4{margin:0 0 0.7em; padding-left:0; border-left:none; font-size:1em; color:var(--wk-navy);} .wk-fit-card ul{margin:0; padding-left:0; list-style:none;} .wk-fit-card li{position:relative; padding-left:1.5em; margin-bottom:0.5em;} .wk-fit-card.is-yes li::before{content:"◯"; position:absolute; left:0; color:var(--wk-blue);} .wk-fit-card.is-no li::before{content:"△"; position:absolute; left:0; color:var(--wk-blue);} .wk-def{border-left:3px solid var(--wk-blue); padding:0.2em 0 0.2em 1em; margin:0 0 1.1em;} .wk-def dt{font-weight:700; margin-bottom:0.2em; color:var(--wk-gray-900);} .wk-def dd{margin:0 0 1em; color:var(--wk-gray-500);} .wk-def dd:last-child{margin-bottom:0;} .wk-points{list-style:none; padding:0; margin:1.2em 0;} .wk-points li{display:flex; gap:14px; padding:1.1em 0; border-bottom:1px solid var(--wk-line);} .wk-points li:last-child{border-bottom:none;} .wk-point-num{ flex:0 0 auto; width:30px; height:30px; border-radius:50%; background:var(--wk-blue); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:0.9em; } .wk-point-body h3{margin:0 0 0.35em; font-size:1.02em; border-bottom:none; padding-bottom:0; display:block;} .wk-point-body p{margin:0; color:var(--wk-gray-500);} .wk-back-link{ display:inline-flex; align-items:center; gap:0.4em; font-size:0.88em; color:var(--wk-gray-500); text-decoration:none; margin-top:0.4em; } .wk-back-link:hover{color:var(--wk-navy);} /* ============================================================== テーブル（横スクロール対応） ============================================================== */ .wk-article table{ width:100%; border-collapse:collapse; margin:0 0 1.3em; font-size:0.95em; } .wk-article th, .wk-article td{ padding:0.75em 1em; text-align:left; vertical-align:top; border-bottom:1px solid var(--wk-line); color:var(--wk-gray-700); } .wk-article thead th{ background:var(--wk-navy); color:#fff; font-weight:700; white-space:nowrap; } .wk-article tbody tr:nth-child(even){background:var(--wk-blue-pale);} .wk-article tbody tr:last-child td{border-bottom:none;} .wk-table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 0 1.3em;} .wk-table-scroll table{margin-bottom:0; min-width:460px;} .wk-article td.wk-num, .wk-article th.wk-num{text-align:right; white-space:nowrap;} /* 料金表・スペック表など、幅広ラベル列を持つ表 */ .wk-spec th{width:9em; white-space:nowrap; background:var(--wk-blue-pale); color:var(--wk-gray-900);} .wk-price thead th{background:var(--wk-blue); color:#fff;} .wk-price caption{text-align:left; font-weight:700; color:var(--wk-navy); margin-bottom:0.6em;} .wk-note{font-size:0.85em; color:var(--wk-gray-500); margin:0.5em 0 1.6em;} /* ============================================================== CTA（お申し込み導線） ============================================================== */ .wk-cta{ background:var(--wk-blue-pale); border:1px solid var(--wk-blue-pale2); border-radius:12px; padding:1.5em 1.6em; margin:2.2em 0; text-align:center; } .wk-cta p{margin:0 0 1.1em; color:var(--wk-gray-700);} .wk-cta .ui-tools-cta2-parts{margin:0; padding:0; list-style:none;} /* 汎用CTAボタン（記事内で強調リンクとして使う場合） */ .wk-cta-button{ display:inline-block; background:var(--wk-cta); color:#fff !important; font-weight:700; font-size:1.02em; text-decoration:none; padding:0.9em 2.2em; border-radius:999px; box-shadow:0 4px 12px rgba(242,153,74,0.35); transition:background .15s ease, transform .15s ease, box-shadow .15s ease; } .wk-cta-button:hover{ background:var(--wk-cta-dark); transform:translateY(-2px); box-shadow:0 6px 16px rgba(217,130,47,0.4); } /* ============================================================== 出典・注記フッター ============================================================== */ .wk-footnote{ color:var(--wk-gray-500); font-size:0.82em; line-height:1.9; margin-top:2em; padding-top:1.2em; border-top:1px solid var(--wk-line); } .wk-footnote.is-center{text-align:center;} .wk-footnote a{color:var(--wk-gray-500); text-decoration:underline; text-decoration-color:var(--wk-blue);} .wk-footnote a:hover{color:var(--wk-navy);} .wk-summary-box{ background:var(--wk-blue-pale); border-radius:10px; padding:1.4em 1.6em; margin:1.2em 0 1.6em; } .wk-summary-box ul{margin:0 0 1em;} .wk-summary-box p:last-child{margin-bottom:0;} /* ============================================================== コラム一覧ページ（/column/index.html） ============================================================== */ .wk-column-index{ max-width:900px; } .wk-column-index .wk-lead p{margin:0;} .wk-column-list{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:20px;} @media (max-width:640px){.wk-column-list{grid-template-columns:1fr;}} .wk-column-card{ display:block; background:#fff; border:1px solid var(--wk-line); border-radius:10px; padding:1.4em 1.5em; text-decoration:none; transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease; } .wk-column-card:hover{ box-shadow:0 8px 20px rgba(77,184,255,0.22); transform:translateY(-3px); border-color:var(--wk-blue); } .wk-column-tag{ display:inline-block; background:var(--wk-blue-pale2); color:var(--wk-navy); font-size:0.78em; font-weight:700; padding:0.25em 0.8em; border-radius:999px; margin-bottom:0.8em; } .wk-column-card h3{margin:0 0 0.6em; font-size:1.08em; font-weight:700; color:var(--wk-gray-900); line-height:1.6; border-bottom:none; padding-bottom:0; display:block;} .wk-column-card p{margin:0 0 0.9em; font-size:0.92em; color:var(--wk-gray-500);} .wk-column-card .wk-column-more{font-size:0.88em; color:var(--wk-blue); font-weight:700;} .wk-column-empty-note{color:var(--wk-gray-500); font-size:0.9em; text-align:center; margin-top:2em;} /* ============================================================== 記事末尾の控えめな署名（誰が書いているかだけ分かればよい） ============================================================== */ .wk-byline{ max-width:760px; margin:2.5em auto 0; padding:1.6em 20px 2.2em; border-top:1px solid #e3e3e3; text-align:center; color:#9a9a9a; font-size:0.84em; line-height:1.9; } .wk-byline a{color:#767676; font-weight:700; text-decoration:none;} .wk-byline a:hover{color:#1d4f7a; text-decoration:underline;} .wk-standalone-top{ position:fixed; right:18px; bottom:18px; width:2.6em; height:2.6em; border-radius:50%; background:#1d4f7a; color:#fff !important; display:flex; align-items:center; justify-content:center; font-size:1.1em; text-decoration:none; box-shadow:0 4px 12px rgba(29,79,122,0.3); opacity:0.85; transition:opacity .15s ease; } .wk-standalone-top:hover{ opacity:1; }