/* ============================================================ Physician Finance — 広告枠（アフィリエイト）共通スタイル ------------------------------------------------------------ このファイル1つを直せば、全ページの広告枠の見た目が変わります。 各ページの に次の1行を入れて読み込みます： ■ 法令対応（重要） 景品表示法のステマ規制（2023年10月施行）により、アフィリエイト 広告には「広告」「PR」等の明示が必要です。.ad-slot / .offer-box には必ずラベルが表示される設計にしています（ラベルを消さないこと）。 ============================================================ */ :root { --ad-green-dark: #0f2d1f; --ad-green-mid: #1a4a2e; --ad-green-light: #2d6e47; --ad-gold: #c9a84c; --ad-gold-light: #e8cc7a; --ad-gray: #6b7280; --ad-line: #e5e7eb; } /* ------------------------------------------------------------ 1. 汎用バナー枠（.ad-slot） ASPから取得したバナー/テキストタグをそのまま貼る枠。 記事末や区切りに置く。 ------------------------------------------------------------ */ .ad-slot { margin: 2.5rem 0; padding: 1.2rem; background: #fcfcfa; border: 1px solid var(--ad-line); border-radius: 10px; text-align: center; } .ad-slot .ad-label { display: inline-block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; color: var(--ad-gray); background: #eef1ee; border: 1px solid var(--ad-line); border-radius: 4px; padding: 2px 10px; margin-bottom: 0.9rem; } /* ASPタグ内の画像がはみ出さないように */ .ad-slot img { max-width: 100%; height: auto; } .ad-slot iframe { max-width: 100%; } /* ------------------------------------------------------------ ★重要：タグ未設置の枠は「訪問者に見せない」 .ad-placeholder が中にある間、その枠ごと非表示にします。 → タグを貼って .ad-placeholder の行を削除すれば、自動的に表示されます。 （空の枠や「ここに貼り付け」の文字が公開ページに出るのを防ぐ） ------------------------------------------------------------ */ .ad-slot:has(.ad-placeholder), .offer-cta:has(.ad-placeholder), .offer-box:has(.ad-placeholder) { display: none !important; } /* タグ未設置時のプレースホルダー（タグを貼ったら行ごと削除する） */ .ad-placeholder { color: #9aa3a0; font-size: 0.85rem; padding: 1.5rem 0.5rem; border: 1px dashed #cfd6d2; border-radius: 8px; background: repeating-linear-gradient(45deg, #fafafa, #fafafa 10px, #f4f4f2 10px, #f4f4f2 20px); } /* ------------------------------------------------------------ 2. 推奨サービス枠（.offer-box） 記事の文脈に沿って「この記事を読んだ人向けの次の一歩」を出す枠。 バナーより成約率が高い。高CV記事の該当セクション直後に置く。 ------------------------------------------------------------ */ .offer-box { position: relative; margin: 2.2rem 0; padding: 1.6rem 1.8rem 1.4rem; background: linear-gradient(135deg, #ffffff 0%, #f7f9f7 100%); border: 1px solid #d6e3da; border-left: 5px solid var(--ad-gold); border-radius: 0 12px 12px 0; box-shadow: 0 4px 16px rgba(15, 45, 31, 0.06); } .offer-box .offer-label { position: absolute; top: -11px; left: 16px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; color: #6b6250; background: var(--ad-gold-light); border-radius: 4px; padding: 2px 10px; } .offer-box h4 { color: var(--ad-green-dark); font-size: 1.08rem; font-weight: 700; line-height: 1.5; margin: 0.3rem 0 0.7rem; } .offer-box p { font-size: 0.93rem; line-height: 1.75; color: #333; margin-bottom: 0.9rem; } .offer-box ul.offer-points { list-style: none; margin: 0 0 1rem; padding: 0; } .offer-box ul.offer-points li { position: relative; padding: 0.25rem 0 0.25rem 1.4rem; font-size: 0.9rem; line-height: 1.6; } .offer-box ul.offer-points li::before { content: '✓'; position: absolute; left: 0; color: var(--ad-green-light); font-weight: 700; } /* ASPのテキストリンク/ボタンタグを入れる場所。 .offer-box の中でも、ランキングカード等の中でも単独で使えます。 */ .offer-cta { margin-top: 1rem; padding-top: 0.9rem; border-top: 1px dashed var(--ad-line); text-align: center; } .offer-box .offer-cta { margin-top: 0.4rem; padding-top: 0; border-top: none; } .offer-cta img { max-width: 100%; height: auto; } .offer-cta iframe { max-width: 100%; } /* ASPタグ内のaタグをサイトのボタン風に揃えたい場合に使う任意クラス。 ※ASPによってはタグの改変が規約違反になります。必ず各ASPの規約を 確認し、許可される範囲でのみ適用してください。 */ .offer-box .offer-cta .offer-btn, a.offer-btn { display: inline-block; background: var(--ad-gold); color: var(--ad-green-dark); font-weight: 700; font-size: 0.95rem; text-decoration: none; padding: 12px 30px; border-radius: 6px; transition: background 0.2s, transform 0.2s; } .offer-box .offer-cta .offer-btn:hover, a.offer-btn:hover { background: var(--ad-gold-light); transform: translateY(-1px); } .offer-box .offer-note { margin-top: 0.8rem; font-size: 0.76rem; color: var(--ad-gray); line-height: 1.6; } /* ------------------------------------------------------------ 3. 広告に関する開示（.ad-disclosure） 記事冒頭など、ページ単位で「広告を含む」ことを知らせる一文。 ------------------------------------------------------------ */ .ad-disclosure { font-size: 0.78rem; color: var(--ad-gray); background: #f6f7f6; border: 1px solid var(--ad-line); border-radius: 6px; padding: 0.6rem 0.9rem; margin: 0 0 1.8rem; line-height: 1.6; } .ad-disclosure strong { color: #4b5563; } /* ------------------------------------------------------------ 4. レスポンシブ ------------------------------------------------------------ */ @media (max-width: 768px) { .offer-box { padding: 1.4rem 1.1rem 1.2rem; } .offer-box h4 { font-size: 1rem; } .ad-slot { padding: 1rem 0.6rem; } .offer-box .offer-cta .offer-btn, a.offer-btn { display: block; padding: 13px 20px; } } /* 印刷時は広告を出さない */ @media print { .ad-slot, .offer-box { display: none; } }