:root { --accent: #e3292b; } @keyframes spin3 { 0%, 100% { box-shadow: 10px 10px rgba(36, 36, 41, 1), -10px 10px rgba(36, 36, 41, 0.2), -10px -10px rgba(36, 36, 41, 1), 10px -10px rgba(36, 36, 41, 0.2); } 25% { box-shadow: -10px 10px rgba(36, 36, 41, 0.2), -10px -10px rgba(36, 36, 41, 1), 10px -10px rgba(36, 36, 41, 0.2), 10px 10px rgba(36, 36, 41, 1); } 50% { box-shadow: -10px -10px rgba(36, 36, 41, 1), 10px -10px rgba(36, 36, 41, 0.2), 10px 10px rgba(36, 36, 41, 1), -10px 10px rgba(36, 36, 41, 0.2); } 75% { box-shadow: 10px -10px rgba(36, 36, 41, 0.2), 10px 10px rgba(36, 36, 41, 1), -10px 10px rgba(36, 36, 41, 0.2), -10px -10px rgba(36, 36, 41, 1); } } #wpadminbar { top: 0 !important; } #c27-site-wrapper { background-color: #f4f4f4 } /* ===== 関連情報セクションのスタイル ===== */ /* すべてのidを持つ要素に適用する場合 */ [id] { scroll-margin-top: 100px; } .listing-related-info { background-color: #f8f9fa; padding: 50px 0; } /* 各サブセクション（最近見た、注目など） */ .related-sub-section { margin-bottom: 30px; } /* サブセクションのタイトル */ .related-sub-section h3 { font-size: 1.6em; font-weight: 700; margin-bottom: 25px; display: flex; align-items: center; gap: 10px; } /* セクション間の区切り線 */ .related-separator { border: 0; border-top: 1px solid #e0e0e0; margin: 40px 0; } /* MyListingショートコードが出力するカードのラッパー */ .related-sub-section .lf-listings-feed-element { padding-top: 0; /* ショートコードが生成する余計な余白を削除 */ } .related-sub-section .c27-listings-wrapper { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); /* カードの最小幅を調整 */ } /* 関連カード用のグリッド */ .findcare-related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; } /* 関連カードのスタイル */ .findcare-related-card { display: block; text-decoration: none; background-color: #fff; border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; transition: box-shadow 0.2s; } .findcare-related-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); } .card-thumbnail { aspect-ratio: 16 / 9; } .card-thumbnail img { width: 100%; height: 100%; object-fit: cover; } .card-content { padding: 15px; } .card-title { font-size: 1.1em; font-weight: 600; color: #333; margin: 0 0 8px; } .card-address { font-size: 0.85em; color: #666; margin: 0; } /* ===== 注目事業所のカード枠線スタイル ===== */ /* 通常のカードの枠線（基準） */ .findcare-related-card { border: 1px solid #e0e0e0; position: relative; /* 枠線やラベルを重ねるための準備 */ } /* 銀枠のスタイル */ .findcare-related-card.featured-silver { border: 3px solid #c0c0c0; /* シルバーの枠線 */ } /* 金枠のスタイル */ .findcare-related-card.featured-gold { border: 3px solid #DAA520; /* ゴールドの枠線 */ } /* 金・銀枠に「注目」ラベルを追加して、さらに目立たせる（任意） */ .findcare-related-card.featured-silver::before, .findcare-related-card.featured-gold::before { content: '★ 注目'; position: absolute; top: 10px; left: 10px; padding: 4px 8px; border-radius: 4px; font-size: 0.75em; font-weight: bold; color: #fff; z-index: 1; } .findcare-related-card.featured-silver::before { background-color: #a9a9a9; /* ダークグレイ */ } .findcare-related-card.featured-gold::before { background-color: #b8860b; /* ダークゴールド */ } /* ===== 動的エリア検索セクション ===== */ .area-search-dynamic { background-color: #fff; padding: 40px 0; border-top: 1px solid #e9ecef; } /* セレクターとリストの間にある区切り線 */ .area-search-separator { border: 0; border-top: 1px solid #e0e0e0; margin: 40px auto; } /* ================================================= エリア検索ショートコード用軽量化CSS ================================================= */ /* --- 共通コンテナ --- */ /* 1. pillar_area_selector のコンテナ */ .pillar-nav-section { margin: 40px 0; } .pillar-nav-card { background-color: #fff; border: 1px solid #e0e0e0; border-radius: 12px; padding: 2rem; box-shadow: 0 4px 12px rgba(0,0,0,.05); } .pillar-nav-title { font-size: 1.5rem; margin: 0 0 10px; display: flex; align-items: center; gap: 10px; } .pillar-nav-title .icon { font-size: 1.8rem; } .pillar-nav-description { color: #555; margin-bottom: 1.5rem; } /* 2. pillar_area_list のコンテナ */ .pillar-area-list-container .region-block { margin-top: 30px; } .pillar-area-list-container .region-title { display: inline-block; font-size: 1em; font-weight: 700; color: #fff; background-color: #0073aa; padding: 8px 25px; border-radius: 50px; margin-bottom: 20px; } /* --- エリア選択の表示切り替え --- */ .area-selector .step-view { display: none; } .area-selector .step-view.active { display: block; } /* --- 地方選択リスト (pillar_area_selector内) --- */ .region-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .region-list a { display: block; padding: 1rem; background-color: #f8f9fa; border: 1px solid #ddd; border-radius: 8px; text-align: center; font-weight: 700; text-decoration: none; color: #333; } .region-list a:hover { background-color: #e9ecef; border-color: #ccc; } .back-to-regions { background: none; border: 1px solid #ccc; border-radius: 4px; padding: 5px 10px; margin-bottom: 15px; cursor: pointer; font-size: .9rem; } .back-to-regions:hover { background-color: #f8f8f8; } /* --- 都道府県リスト (両方のショートコードで共通利用) --- */ .prefecture-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, 120px); gap: 10px; } .prefecture-list a { display: block; padding: 10px; text-decoration: none; color: #0056b3; background-color: #fff; border: 1px solid #ddd; border-radius: 6px; text-align: center; } .prefecture-list a:hover { background-color: #e9f5ff; border-color: #007bff; } /* Heroセクションのサービス区分ラベル */ .hero-service-category { margin-bottom: 8px; font-size: 0.9em; font-weight: 700; } .hero-service-category a { color: #007bff; /* サイトのキーカラー */ text-decoration: none; background-color: rgba(0, 123, 255, 0.1); padding: 4px 10px; border-radius: 4px; transition: background-color 0.2s; } .hero-service-category a:hover { background-color: rgba(0, 123, 255, 0.2); text-decoration: underline; } .contact-phone>a[href*="tel:"]{ color:#242424!important; } /* PC用の基本スタイル */ .listingpage-wrapper { width: 1140px; margin: 0 auto; /* margin: auto; のショートハンド */ } /* .listingpage-wrapper の中にある navタグの中の aタグにだけ適用 */ div.listingpage-wrapper > h3 { font-size:24px; } /* 画面幅が768px以下の時に適用（スマホ用） */ @media screen and (max-width: 768px) { .listingpage-wrapper { width: auto; /* 幅の固定を解除 */ margin: 0 20px; /* 左右に20pxの余白を確保 */ } div.listingpage-wrapper > h3 { font-size:16px; } .listing-title { font-size:16px!important; } } /* Taxonomy Filter UI Styles */ .taxonomy-filter-section { background-color: #f7f8fa; /* 画像に合わせた背景色 */ padding: 25px 30px; border-radius: 8px; } .taxonomy-filter-section .filter-main-title { font-size: 1.5rem; margin-top: 0; margin-bottom: 25px; /* 必要であればフォントや色を指定 */ } .taxonomy-group { margin-bottom: 20px; } .taxonomy-group:last-child { margin-bottom: 0; } .taxonomy-title { font-size: 1rem; font-weight: bold; color: #333; margin-top: 0; margin-bottom: 12px; padding-bottom: 5px; /* border-bottom: 1px solid #e0e0e0; */ /* 区切り線が必要な場合 */ } .term-pills-wrapper { display: flex; flex-wrap: wrap; gap: 10px 12px; /* 縦と横の隙間 */ } .term-pill { display: inline-block; font-size: 0.875rem; /* 14px */ padding: 6px 15px; border: 1px solid #d0d7de; border-radius: 20px; background-color: #fff; color: #0969da; /* リンク色 */ text-decoration: none; line-height: 1.5; transition: background-color 0.2s ease, border-color 0.2s ease; } .term-pill:hover { background-color: #f0f6fc; border-color: #80b5ef; color: #0969da; } /* 関連キーワードのスタイル（プレーンなテキスト風） */ .term-pill--keyword { color: #444; /* 文字色を少し濃く */ background-color: transparent; border-color: transparent; padding: 6px 8px; /* パディングを少し調整 */ } .term-pill--keyword:hover { color: #0969da; background-color: #f0f6fc; border-color: transparent; } /* Rich Category List Styles */ .rich-category-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; margin-top: 2em; margin-bottom: 2em; } .rich-category-card { border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; background-color: #fff; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); transition: transform 0.3s ease, box-shadow 0.3s ease; } .rich-category-card:hover { transform: translateY(-5px); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); } .rich-category-card a { text-decoration: none; color: inherit; display: block; } .rich-category-card__image-wrapper { width: 100%; height: 180px; /* 高さを固定 */ overflow: hidden; } .rich-category-card__image-wrapper img { width: 100%; height: 100%; object-fit: cover; /* 画像をコンテナに合わせてトリミング */ transition: transform 0.3s ease; } .rich-category-card:hover img { transform: scale(1.05); } .rich-category-card__content { padding: 20px; text-align: center; } .rich-category-card__title { margin-top: 0; margin-bottom: 10px; font-size: 1.2rem; } .rich-category-card__description { font-size: 0.9rem; color: #666; margin-bottom: 15px; } .rich-category-card__count { display: inline-block; background-color: #f0f0f0; color: #555; padding: 5px 12px; border-radius: 20px; font-size: 0.8rem; font-weight: bold; } /* ===== 関連記事セクションのデザイン調整 ===== */ /* 関連記事サムネイル下の不要な帯を非表示にする */ .related-post-thumbnail::after { display: none !important; } .related-posts-section-wrapper { margin-top: 40px; padding-top: 40px; border-top: 1px solid #eee; } .related-posts-title { font-size: 1.5rem; font-weight: bold; margin-bottom: 20px; } /* 記事を並べるグリッドコンテナ */ .related-posts-grid { display: grid; grid-template-columns: repeat(4, 1fr); /* PCでは4カラム */ gap: 24px; /* アイテム間の隙間 */ } /* --- サムネイル表示のコア部分 --- */ .related-post-thumbnail { position: relative; /* 子要素を絶対配置するための基準 */ width: 100%; padding-top: 66.66%; /* アスペクト比を3:2に固定 (高さ/幅 * 100) */ background-color: #f2f4f7; /* 画像がない場合の背景色 */ border-radius: 8px; overflow: hidden; /* 角丸を適用するため */ margin-bottom: 12px; transition: box-shadow 0.3s ease; } .related-post-thumbnail:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); } /* 画像がない場合に表示するプレースホルダーアイコン */ .related-post-thumbnail.no-image::before { content: ""; /* 画像の絵文字（お好みで変更可） */ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 48px; color: #d0d5dd; line-height: 1; } /* サムネイル画像自体のスタイル */ .related-post-thumbnail img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; /* コンテナに合わせて画像をトリミング＆フィット */ transition: transform 0.3s ease; } .related-post-thumbnail a:hover img { transform: scale(1.05); /* ホバー時に少し拡大 */ } /* --- テキスト部分のスタイル --- */ .related-post-title { font-size: 1rem; font-weight: 600; line-height: 1.4; margin: 0 0 5px 0; } .related-post-title a { color: #1d2939; text-decoration: none; } .related-post-title a:hover { text-decoration: underline; } .related-post-date { font-size: 0.875rem; color: #667085; margin: 0; } /* --- レスポンシブ対応 --- */ /* タブレットサイズ (991px以下) */ @media (max-width: 991.98px) { .related-posts-grid { grid-template-columns: repeat(2, 1fr); /* 2カラムに変更 */ } } /* モバイルサイズ (575px以下) */ @media (max-width: 575.98px) { .related-posts-grid { grid-template-columns: 1fr; /* 1カラムに変更 */ } } #c27-site-wrapper > section > div.container > div.row.entry-header-block-post > div > h1{ font-size: 20px; /* やや大きめのフォントサイズ */ } .custom-taxonomies-container { margin-top: 25px; margin-bottom: 25px; padding-top: 15px; /* 上の要素との区切りとしてパディング */ /* border-top: 1px solid #eee; /* 必要であれば区切り線 */ /* border-bottom: 1px solid #eee; /* 必要であれば区切り線 */ } .taxonomy-term-group { margin-bottom: 15px; /* 各タクソノミーグループ間の余白 */ font-size: 14px; line-height: 1.6; } .taxonomy-term-group:last-child { margin-bottom: 0; } .taxonomy-term-label { font-weight: bold; margin-right: 8px; color: #333; display: block; /* ラベルをブロック要素にしてタームリストの上に表示 */ margin-bottom: 8px; /* ラベルとタームリストの間の余白 */ } .terms-list-wrapper { display: flex; /* タームを横並びにする */ flex-wrap: wrap; /* 折り返しを許可 */ gap: 8px; /* ボタン間の隙間（上下左右） */ } /* 「タグ」以外のタクソノミーのターム（ボタン風） */ .term-button { display: inline-block; /* display: flex の子要素なので inline-block は不要かも */ padding: 4px 10px; /* ボタン内の余白 */ border: 1px solid #ccc; /* 細い線 */ border-radius: 16px; /* 角を少し丸くする（お好みで調整） */ background-color: #f7f7f7; /* ボタンの背景色 */ color: #333; /* 文字色 */ text-decoration: none; font-size: 0.9em; /* 少し小さめに */ transition: background-color 0.2s, border-color 0.2s; /* ホバー時のアニメーション */ } .term-button:hover { background-color: #e9e9e9; border-color: #aaa; color: #000; } /* 基本のボタン風スタイル (aタグまたはspanタグに適用) */ .term-button { display: inline-block; padding: 4px 10px; border: 1px solid #ccc; border-radius: 16px; /* または他の値 */ background-color: #f7f7f7; color: #333; /* spanの場合の基本文字色 */ text-decoration: none; font-size: 0.9em; transition: background-color 0.2s, border-color 0.2s; line-height: 1.4; /* ボタン内のテキストの行の高さ */ } /* a.term-button のホバー効果は既存のままでも良い */ a.term-button:hover { background-color: #e9e9e9; border-color: #aaa; color: #000; } /* span.term-button (階層ラッパー) のホバー効果も同様に設定可能 */ span.term-button.is-hierarchical-wrapper:hover { background-color: #e9e9e9; border-color: #aaa; } /* 階層表示用ラッパー (span.term-button.is-hierarchical-wrapper) 内のリンクスタイル */ .is-hierarchical-wrapper .hierarchical-term-link { color: #0073aa; /* WordPress標準のリンク色に近い色 */ text-decoration: underline; /* リンクであることを明確にするため下線 */ background-color: transparent !important; /* 親の背景色を無効化 */ border: none !important; /* 親の枠線を無効化 */ padding: 0 !important; /* 親のパディングを無効化 */ margin: 0; font-size: 1em; /* 親のフォントサイズを継承 */ display: inline; /* 通常のテキストリンクのように */ } .is-hierarchical-wrapper .hierarchical-term-link:hover { color: #005075; /* ホバー時のリンク色 */ text-decoration: underline; } /* 階層表示の区切り文字のスタイル */ .term-hierarchy-separator { margin: 0 0.3em; /* 区切り文字の左右の余白 */ color: #555; /* 区切り文字の色 */ cursor: default; /* 区切り文字自体はクリックできないことを示す */ } /* 「タグ (post_tag)」のタームのスタイル (カンマ区切り、ボタン風にしない) */ .taxonomy-term-group[data-taxonomy-slug="post_tag"] .terms-list-wrapper { display: inline; /* タグの場合は通常のテキストフロー */ } .taxonomy-term-group[data-taxonomy-slug="post_tag"] .term-link { /* 必要であればタグ用の個別スタイル */ color: #0073aa; /* WordPress標準のリンク色に近い色 */ text-decoration: none; } .taxonomy-term-group[data-taxonomy-slug="post_tag"] .term-link:hover { text-decoration: underline; } /* カンマはPHP側で出力しています */ /* === メインコンテンツ全体のスタイル === */ #main-content { line-height: 1.8; /* 本文の行間を広めにして読みやすく */ color: #333; /* 基本の文字色 */ max-width: 800px; /* 最大幅を設定し、読みやすい幅に */ margin: 0 auto; /* 中央寄せ */ padding: 20px; /* 内側の余白 */ } div > div.entry-featured-image-post{ margin-bottom:20px; /* 中央寄せ */ } div.author-avatar > img{ width:80px; } /* === 大見出し (記事タイトル) === */ #main-content h1 { font-size: 28px; /* やや大きめのフォントサイズ */ font-weight: bold; margin-top: 0; /* 上部の余白を調整 */ margin-bottom: 30px; /* 下部の余白を多めに */ padding-bottom: 15px; /* 下線との間隔 */ border-bottom: 2px solid #eee; /* 薄い区切り線 */ line-height: 1.4; /* 見出しの行間 */ color: #1a1a1a; /* 濃いめのグレー */ } /* === 中見出し === */ #main-content h2 { font-size: 24px; font-weight: bold; margin-top: 40px; /* 前のセクションとの間隔を確保 */ margin-bottom: 20px; padding-left: 10px; /* 左側にアクセントラインのためのスペース */ border-left: 5px solid #007bff; /* アクセントカラー (例: 青系) */ line-height: 1.5; color: #222; } /* === 小見出し === */ #main-content h3 { font-size: 20px; font-weight: bold; margin-top: 30px; margin-bottom: 15px; line-height: 1.6; color: #444; } /* === 段落・本文 === */ #main-content p { margin-bottom: 20px; /* 段落間の余白 */ font-size: 16px; /* 標準的な本文フォントサイズ */ } /* === リンク === */ #main-content a { color: #007bff; /* リンクの色 (例: 青系) */ text-decoration: none; /* 下線を消す */ } #main-content a:hover { text-decoration: underline; /* ホバー時に下線を表示 */ } /* === 目次エリアのスタイル === */ #main-content .table-of-contents { /* 目次を囲む要素にこのクラスを付与してください */ background-color: #f9f9f9; /* 薄い背景色 */ border: 1px solid #eee; padding: 20px; margin-bottom: 30px; border-radius: 5px; /* 角を丸く */ } #main-content .table-of-contents h3 { /* 目次のタイトル */ margin-top: 0; margin-bottom: 15px; font-size: 18px; border-left: none; /* h3のデフォルトスタイルを上書き */ padding-left: 0; color: #333; /* 目次タイトル色調整 */ } #main-content .table-of-contents ul { padding-left: 20px; /* 目次用のインデント */ margin-top: 0; margin-bottom: 0; list-style-type: disc; /* 目次にはマーカーを表示 */ } #main-content .table-of-contents ul li { margin-bottom: 8px; font-size: 15px; padding-left: 0.2em; /* マーカーとテキストの間の微調整 */ position: relative; /* マーカー位置調整のため */ list-style-position: outside; } #main-content .table-of-contents ul li::marker { font-size: 0.9em; /* マーカーサイズ調整 */ color: #007bff; } /* === FAQリスト全体 (dl) === */ #main-content dl { margin-top: 30px; margin-bottom: 30px; border: 1px solid #e0e0e0; border-radius: 5px; padding: 0; } /* FAQの各項目 (dt, dd のペアごと) */ #main-content dt, #main-content dd { padding: 15px 20px; margin: 0; } /* 質問 (dt) */ #main-content dt { font-weight: bold; font-size: 18px; color: #007bff; background-color: #f9f9f9; border-bottom: 1px solid #e0e0e0; } #main-content dt:first-of-type { border-top-left-radius: 5px; border-top-right-radius: 5px; } /* 回答 (dd) */ #main-content dd { font-size: 16px; line-height: 1.7; color: #555; padding-left: 30px; /* 少しインデント */ position: relative; border-bottom: 1px solid #e0e0e0; } #main-content dd::before { /* 回答の前に「A.」などを付ける場合 */ content: "A."; position: absolute; left: 15px; font-weight: bold; color: #555; } #main-content dd:last-of-type { border-bottom: none; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } /* ===================================== */ /* === リストスタイルの提案 === */ /* ===================================== */ /* ベースとなるリストのマージン (ul, ol共通) */ #main-content ul, #main-content ol { margin-top: 1em; /* 見出しや段落からのマージン */ margin-bottom: 1.5em; /* リスト後のマージン */ padding-left: 0; /* 基本的にクラス側でインデント制御 */ line-height: inherit; /* #main-content の line-height を継承 */ } /* ベースとなるリストアイテムのスタイル */ #main-content li { font-size: 16px; /* 本文と同じフォントサイズ */ margin-bottom: 0.8em; /* アイテム間のスペース */ position: relative; /* カスタムマーカーや装飾のため */ /* padding-left は各リストタイプで指定 (未指定の場合はブラウザ標準) */ } /* --- 1. 標準マーカーリスト (クラスなしのul/olもこれに該当) --- */ /* HTML:

項目

項目

*/ /* あるいは

項目
チェック済

項目
項目

項目

ステップ1の説明
ステップ2の説明

項目
項目

項目

がブロック要素のように振る舞ってほしい場合 */ #main-content li strong.title-block { display: block; margin-bottom: 0.3em; /* 下のテキストとの間隔 */ font-size: 1.05em; /* やや大きく */ } .i-section { padding-top: 60px; padding-bottom: 0px; } .breadcrumbs-custom { font-size: 0.9em; margin-bottom: 0px; padding: 10px 0; border-bottom: 1px solid #eee; } .breadcrumbs-custom ol { list-style: none; padding: 0; margin: 0; } .breadcrumbs-custom ol li { display: inline-block; /* 横並びにする */ margin: 0; padding: 0; color: #555; } .breadcrumbs-custom ol li a { color: #0073aa; /* リンクの色 */ text-decoration: none; } .breadcrumbs-custom ol li a:hover { text-decoration: underline; } /* 区切り文字の前後に少しスペースを入れる場合 (item_sep で指定した文字による) */ /* .breadcrumbs-custom ol li + li::before { content: " > "; padding: 0 0.5em; color: #777; } */ li::marker { /* 実際のセレクタに置き換えてください */ display: none !important; content: "" !important; } .related-posts-section { margin-top: 40px; padding-top: 40px; border-top: 1px solid #eee; /* 上のセクションとの区切り */ } .related-post-item { margin-bottom: 30px; /* 各アイテムの下マージン */ } .related-post-thumbnail img { width: 100%; height: auto; /* アスペクト比を保つ */ /* height: 150px; object-fit: cover; */ /* 高さを固定してトリミングする場合 */ border-radius: 4px; margin-bottom: 10px; } .related-post-title { font-size: 1.1em; /* テーマに合わせて調整 */ font-weight: bold; margin-bottom: 5px; line-height: 1.4; } .related-post-title a { text-decoration: none; color: #333; /* テーマに合わせて調整 */ } .related-post-title a:hover { text-decoration: underline; } .related-post-meta { font-size: 0.85em; color: #777; } /* ========================================================================== Single Listing Type: wel-05 - CORRECTED BASE LAYOUT Using selectors provided by user. ========================================================================== */ /* --- 0. Overall Width Adjustment --- */ /* ユーザー指定の親コンテナセレクタに幅制限と中央揃えを適用 */ /* 注意：このセレクタが本当にページ全体の幅を決めるコンテナか、あるいは #c27-single-listing など、より上位の要素か、再度開発ツールで確認推奨 */ #c27-single-listing > section > div.findcare-listing-content.listing-type-wel-05 > div { max-width: 1140px; /* 最大幅（例） */ margin-left: auto; margin-right: auto; padding-left: 15px; /* 左右の余白 */ padding-right: 15px; } /* --- 0. Basic Layout (Flexbox Example) --- */ /* ユーザー指定の親コンテナに Flexbox を適用 */ #c27-single-listing > section > div.findcare-listing-content.listing-type-wel-05 > div { display: flex; flex-wrap: wrap; gap: 30px; /* カラム間の隙間 */ padding-top: 30px; /* コンテンツエリア上部の余白 */ padding-bottom: 30px; /* コンテンツエリア下部の余白 */ } /* ユーザー指定のメインコンテンツセレクタ */ #c27-single-listing > section > div.findcare-listing-content.listing-type-wel-05 > div > div.listing-main-content { flex: 1; /* 可変幅 */ min-width: 0; /* はみ出し防止 */ /* 必要に応じて order プロパティで表示順変更 */ /* order: 1; */ } /* ユーザー指定のサイドバーセレクタ */ #c27-single-listing > section > div.findcare-listing-content.listing-type-wel-05 > div > div.listing-sidebar { flex-basis: 300px; /* サイドバーの基本幅 */ flex-shrink: 0; /* 縮まない */ /* 必要に応じて order プロパティで表示順変更 */ /* order: 2; */ } /* サイドバーの中身を追従させる（ユーザー指定のサイドバーセレクタ内の .the-sidebar を想定） */ #c27-single-listing > section > div.findcare-listing-content.listing-type-wel-05 > div > div.listing-sidebar .the-sidebar { position: sticky; top: 30px; /* 固定を開始する上端からの距離 */ } /* --- 0. Responsive Layout --- */ @media (max-width: 991.98px) { /* ユーザー指定の親コンテナの Flexbox 方向を変更 */ #c27-single-listing > section > div.findcare-listing-content.listing-type-wel-05 > div { flex-direction: column; /* 縦積みに変更 */ gap: 40px; /* 縦積みの際の隙間 */ } /* メインとサイドバーの幅をリセット */ #c27-single-listing > section > div.findcare-listing-content.listing-type-wel-05 > div > div.listing-main-content, #c27-single-listing > section > div.findcare-listing-content.listing-type-wel-05 > div > div.listing-sidebar { flex-basis: auto; width: 100%; /* order プロパティもリセットするか、モバイル用に指定 */ /* order: 0; */ } /* モバイルではサイドバーの追従解除 */ #c27-single-listing > section > div.findcare-listing-content.listing-type-wel-05 > div > div.listing-sidebar .the-sidebar { position: static; top: auto; } } /* --- 4. Related Section Styling (ID指定) --- */ /* このセクションは .listing-main-wrapper (仮) の「外」にある想定 */ #related-info-section { /* 必要に応じて幅制限と中央揃えを再度適用 */ max-width: 1140px; margin: 40px auto 0 auto; /* 上にマージン、左右中央揃え */ padding: 30px 15px; /* 内側余白 */ border-top: 1px solid #eee; /* 上のセクションとの区切り */ } #related-info-section .related-sub-section { margin-bottom: 30px; } #related-info-section h3 { /* 見出しスタイル (共通セクションスタイルを使うか、ここで定義) */ } /* ... Related Offices, Recently Viewed, Featured のスタイルは前回提示したものを流用 ... */ #related-info-section .related-group-offices .related-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px; } /* ... その他の関連セクション内スタイル ... */ /* --- General Section Styling (Apply within main content) --- */ /* ページ構成要素の特定のため、一旦 .listing-section へのスタイル適用はコメントアウト */ /* 必要であれば、.listing-main-content 内の section タグに適用してください */ /* .listing-main-content .listing-section { margin-bottom: 40px; padding-bottom: 30px; border-bottom: 1px solid #eee; } .listing-main-content .listing-section:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } .listing-main-content .listing-section h3 { ... } .listing-main-content .listing-section h4 { ... } */ /* --- Swiper Navigation/Pagination Basic Styles --- */ .gallery-swiper-container { position: relative; /* For positioning arrows */ padding-left: 5px; /* Prevent shadow cutoff */ padding-right: 5px; } .gallery-swiper-container .swiper-button-prev, .gallery-swiper-container .swiper-button-next { color: var(--primary-color, #0073aa); /* アイコンの色 */ width: 24px; /* サイズ調整 */ height: 24px; margin-top: -12px; /* 垂直中央揃え */ background-size: 14px 14px; /* アイコンサイズ */ background-color: rgba(255, 255, 255, 0.8); /* 背景を少しつける */ border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,0.1); } .gallery-swiper-container .swiper-button-prev { left: 0; } .gallery-swiper-container .swiper-button-next { right: 0; } .gallery-swiper-container .swiper-button-prev::after, .gallery-swiper-container .swiper-button-next::after { font-size: 14px; /* アイコンフォントサイズ */ } .gallery-swiper-container .swiper-pagination { position: static; /* 下部に配置 */ margin-top: 15px; } .gallery-swiper-container .swiper-pagination-bullet { background-color: #ccc; opacity: 0.8; } .gallery-swiper-container .swiper-pagination-bullet-active { background-color: var(--primary-color, #0073aa); opacity: 1; } /* サムネイル自体のスタイルは以前のCSSを流用・調整 */ .gallery-swiper-container .swiper-slide { width: 120px; /* スライドの幅 (slidesPerView: 'auto' の場合の基準) */ height: 90px; } .gallery-swiper-container .swiper-slide a.gallery-thumb { display: block; width: 100%; height: 100%; overflow: hidden; border-radius: 4px; } .gallery-swiper-container .swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; } /* --- 1. 営業時間 Section Additionals --- */ .custom-opening-hours-table-grid-v4 { /* クラス名を更新 */ width: 100%; border-collapse: collapse; font-size: 0.85em; margin-top: 10px; table-layout: fixed; border: 1px solid #ddd; } .custom-opening-hours-table-grid-v4 th, .custom-opening-hours-table-grid-v4 td { border: 1px solid #eee; padding: 6px 4px; text-align: center; vertical-align: top; } .custom-opening-hours-table-grid-v4 thead th { background-color: #f9f9f9; font-weight: bold; font-size: 0.9em; } .custom-opening-hours-table-grid-v4 thead th.is-current-day { background-color: #fffbe6; font-weight: bold; } /* 最初のヘッダーセル（時間表示用） */ .custom-opening-hours-table-grid-v4 thead th:first-child { width: 16%; text-align: left; font-weight: bold; background-color: #f9f9f9; font-size: 0.85em; line-height: 1.3; vertical-align: middle; padding-left: 8px; } /* 最初のデータセル（「開所」ラベル） */ .custom-opening-hours-table-grid-v4 tbody td:first-child { width: 16%; text-align: left; font-weight: bold; background-color: #f9f9f9; vertical-align: middle; padding-left: 8px; } .custom-opening-hours-table-grid-v4 td.status-cell { width: 12%; } /* 日付カラム */ .custom-opening-hours-table-grid-v4 td.is-current-day { background-color: #fffbe6; } .custom-opening-hours-table-grid-v4 span.hours-status-symbol { font-weight: bold; font-size: 1.3em; line-height: 1.2; display: block; margin-bottom: 3px; } .custom-opening-hours-table-grid-v4 span.hours-status-symbol:contains('●') { color: #4CAF50; } .custom-opening-hours-table-grid-v4 span.hours-status-symbol:contains('ー') { color: #bbb; } .custom-opening-hours-table-grid-v4 span.hours-time-range { display: block; font-size: 0.9em; line-height: 1.4; color: #666; margin-top: 2px; } /* 注釈エリア */ .findcare-hours-wrapper-grid-v4 .opening-hours-notes { font-size: 0.85em; margin-top: 10px; line-height: 1.6; color: #777; text-align: left; } .findcare-hours-wrapper-grid-v4 .opening-hours-notes .legend-item { margin-right: 10px; display: inline-flex; align-items: center; } .findcare-hours-wrapper-grid-v4 .opening-hours-notes .legend-item .hours-status-symbol { display: inline; font-size: 1em; margin-right: 3px; margin-bottom: 0; } .findcare-hours-wrapper-grid-v4 .opening-hours-notes .timezone-info, .findcare-hours-wrapper-grid-v4 .opening-hours-notes .varies-note { display: block; margin-top: 5px; text-align: right; } .findcare-hours-wrapper-grid-v4 .opening-hours-notes .varies-note {text-align: left; font-style: italic;} /* --- 営業時間テーブルのスタイル調整 --- */ /* ステータスセル全体（丸記号と時間を含むセル） */ .custom-opening-hours-table-grid-v4 td.status-cell { text-align: center; /* セル内のコンテンツを中央揃え */ vertical-align: middle; /* セル内のコンテンツを垂直方向中央揃え */ } /* 丸記号 (● またはー) */ .custom-opening-hours-table-grid-v4 .hours-status-symbol { display: inline-block; /* 中央揃えやマージン調整のため */ vertical-align: middle; /* 隣接する時間表示との垂直位置調整 */ /* 必要であれば、フォントサイズやline-heightで微調整 */ /* line-height: 1; もし丸記号がテキストベースの場合 */ } /* 時間表示 (HH:MM～HH:MM) */ .custom-opening-hours-table-grid-v4 .hours-time-range { display: block; /* ブロック要素にして中央揃えを確実にする */ font-size: 1.1em; /* 現在の文字サイズより少し大きく (調整してください) */ line-height: 1.4; /* 改行時の行間を調整 */ margin-top: 5px; /* 丸記号との間隔（必要に応じて調整）*/ text-align: center; /* 時間表示自体を中央揃え */ } /* 時間が一括で左側に表示される場合の時間表示 */ .custom-opening-hours-table-grid-v4 td:first-child .hours-time-range, /* テーブルの最初の列の時間表示用（もしあれば） */ .custom-opening-hours-table-grid-v4 td:first-child { /* 全曜日共通の時間を表示するセル */ font-size: 1.1em; /* 現在の文字サイズより少し大きく (調整してください) */ text-align: center; /* 時間表示を中央揃え */ vertical-align: middle; } /* テーブルの最初の列の「時間」という文字の調整（もし hours-time-range で囲まれていない場合） */ .custom-opening-hours-table-grid-v4 tbody tr td:first-child { padding-top: 10px; /* 上下のパディングで調整 */ padding-bottom: 10px; } /* --- Sidebar Work Hours List --- */ /* セレクタの先頭にウィジェットのクラス名を追加して詳細度を上げることを推奨 */ .widget-opening-hours-sidebar .work-hours-list-sidebar { /* ← ulタグにこのクラスが付いているか？ */ list-style: none !important; padding: 0 !important; margin: 0 !important; font-size: 0.9em !important; line-height: 1.7 !important; } .widget-opening-hours-sidebar .work-hours-list-sidebar li { margin-bottom: 6px !important; padding: 4px 0 !important; display: flex !important; justify-content: space-between !important; border-bottom: 1px dashed #eee !important; } .widget-opening-hours-sidebar .work-hours-list-sidebar li:last-child { border-bottom: none !important; margin-bottom: 0 !important; } /* 現在の曜日ハイライト */ .widget-opening-hours-sidebar .work-hours-list-sidebar li.is-current-day { /* ← 現在曜日のliにこのクラスが付いているか？ */ background-color: #fffadd !important; font-weight: bold !important; margin-left: -10px !important; /* Adjust appearance */ margin-right: -10px !important; padding-left: 10px !important; padding-right: 10px !important; border-radius: 3px !important; } .widget-opening-hours-sidebar .work-hours-list-sidebar .day-label { /* ← 曜日ラベルのspan */ font-weight: bold !important; margin-right: 1em !important; flex-shrink: 0 !important; } .widget-opening-hours-sidebar .work-hours-list-sidebar .day-hours { /* ← 時間のspan */ color: #555 !important; text-align: right !important; white-space: nowrap !important; } .widget-opening-hours-sidebar { /* ← タイムゾーン表示のpタグ */ font-size: 0.8em !important; text-align: right !important; color: #888 !important; margin-top: 8px !important; } /* --- 1. Hero Section Additionals --- */ .listing-type-wel-05 .listing-hero-area { padding: 20px 0; text-align: center; } .listing-type-wel-05 .listing-tagline-wel-05 { font-size: 1.4em; font-weight: 600; color: #333; margin-top: 10px; margin-bottom: 15px; padding: 0 15px; line-height: 1.4; } .listing-type-wel-05 .hero-features { margin-bottom: 20px; } .listing-type-wel-05 .hero-features .hero-tags-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } .listing-type-wel-05 .hero-features .hero-tags-list li { background-color: #eef4f7; color: #555; padding: 5px 12px; border-radius: 15px; font-size: 0.9em; display: inline-flex; align-items: center; gap: 5px; } .listing-type-wel-05 .hero-features .hero-tags-list li .mi { font-size: 1.1em; } /* --- 2. Overview & Features Section --- */ .listing-overview-features .description-content { line-height: 1.7; color: #555; } .listing-overview-features .description-content p { margin-bottom: 1em; } .listing-gallery-preview { margin-top: 30px; } .gallery-thumbnails { display: flex; overflow-x: auto; gap: 10px; padding-bottom: 15px; margin-bottom: 10px; } .gallery-thumbnails a.gallery-thumb { display: block; flex-shrink: 0; width: 120px; height: 90px; overflow: hidden; border-radius: 4px; border: 1px solid #eee; } .gallery-thumbnails a.gallery-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.2s ease-in-out; } .gallery-thumbnails a.gallery-thumb:hover img { transform: scale(1.05); } .view-all-gallery { display: inline-block; font-size: 0.9em; color: var(--primary-color, #0073aa); margin-top: 5px; } .listing-feature-tags, .listing-facility-tags { margin-top: 25px; } .tags-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 12px; } .tags-list li { background-color: #f0f3f5; padding: 4px 10px; border-radius: 4px; font-size: 0.85em; display: inline-flex; align-items: center; gap: 5px; } .tags-list li .tag-icon { font-size: 1.1em; color: #777; } .tags-list li a { color: #444; text-decoration: none; } .tags-list li a:hover { text-decoration: underline; } .listing-staff-qualifications { margin-top: 30px; } .listing-staff-qualifications div { background-color: #f9f9f9; border-left: 3px solid var(--primary-color, #0073aa); padding: 15px; font-size: 0.9em; line-height: 1.6; color: #555; } /* --- 3. Program Details Section --- */ .listing-programs .program-overview-content { line-height: 1.7; margin-bottom: 20px; } .listing-programs .specific-programs { margin-top: 30px; } .listing-programs .program-list { margin-top: 15px; } .listing-programs .program-item { background-color: #fcfcfc; border: 1px solid #eee; border-left: 4px solid var(--secondary-color, #f0f0f0); padding: 20px; margin-bottom: 20px; border-radius: 3px; } .listing-programs .program-item h5 { font-size: 1.1em; font-weight: 600; margin-top: 0; margin-bottom: 10px; } .listing-programs .program-item-description { font-size: 0.95em; line-height: 1.6; color: #555; margin-bottom: 10px; } .listing-programs .program-item-skills { font-size: 0.85em; color: #777; margin-top: 10px; } .listing-programs .program-item-skills .mi { vertical-align: middle; margin-right: 4px; } .listing-programs .program-details-wp-editor { line-height: 1.7; } .listing-programs .program-details-wp-editor p { margin-bottom: 1em; } /* --- 4. Job Placement Record Section --- */ .listing-job-results .job-placement-content, .listing-job-results .partner-list { line-height: 1.7; color: #555; font-size: 0.95em; } .listing-job-results .job-placement-content p, .listing-job-results .partner-list p { margin-bottom: 1em; } .listing-job-results .partner-companies-section { margin-top: 30px; } /* --- 5. Usage Guide / Fees Section --- */ .listing-usage-guide .usage-process-content, .listing-usage-guide .trial-info-section p, .listing-usage-guide .meals-info-section p { line-height: 1.7; color: #555; } .listing-usage-guide .trial-info-section strong, .listing-usage-guide .meals-info-section strong { margin-right: 0.5em; } .listing-usage-guide .button-secondary { margin-top: 10px; font-size: 0.9em; } /* --- 6. Reviews Section --- */ /* Target MyListing's specific classes via Developer Tools */ .listing-reviews .review-summary-wrapper { margin-bottom: 30px; /* Add styles for summary block */ } .listing-reviews .latest-reviews-wrapper { margin-top: 30px; } .listing-reviews ul.commentlist { list-style: none; padding: 0; margin: 0; } .listing-reviews li.comment { border-bottom: 1px solid #eee; padding: 20px 0; margin-bottom: 20px; } .listing-reviews li.comment:last-child { border-bottom: none; margin-bottom: 0; } .listing-reviews .comment-author .fn { font-weight: bold; } .listing-reviews .comment-metadata a { font-size: 0.85em; color: #888; } .listing-reviews .comment-content { margin-top: 10px; line-height: 1.6; color: #444; } .review-section-links { text-align: center; margin-top: 20px; } .review-section-links a { margin: 0 5px; } /* --- 7. Access Section --- */ .listing-access .access-map-grid { display: flex; flex-wrap: wrap; gap: 30px; margin-bottom: 30px; align-items: flex-start;} .listing-access .access-details-column { flex: 1; min-width: 280px; } .listing-access .access-map-column { flex: 1.5; min-width: 280px; min-height: 300px; } .listing-access .map-container { width: 100%; height: 100%; min-height: 300px; background-color: #eee; border: 1px solid #ddd; border-radius: 3px;} .listing-access .address, .listing-access .phone-number { margin-bottom: 15px; line-height: 1.6; } .listing-access .access-text-directions { margin-top: 15px; margin-bottom: 15px; } .listing-access .access-steps { padding-left: 1.5em; margin-top: 5px; list-style-type: decimal; } .listing-access .access-steps li { margin-bottom: 8px; line-height: 1.6; } .listing-access .get-directions-link { margin-top: 15px; } /* --- 8. FAQ Section --- */ .listing-faq .faq-list { border: 1px solid #eee; border-radius: 4px; margin-top: 15px;} .listing-faq .faq-item { border-bottom: 1px solid #eee; } .listing-faq .faq-item:last-child { border-bottom: none; } .listing-faq .faq-question { font-size: 1.1em; font-weight: 600; padding: 15px 20px; margin: 0; cursor: pointer; position: relative; display: flex; justify-content: space-between; align-items: center; transition: background-color 0.2s ease; } .listing-faq .faq-question:hover { background-color: #f9f9f9; } .listing-faq .faq-q-icon { margin-right: 8px; font-weight: bold; color: var(--primary-color, #0073aa); } .listing-faq .accordion-icon { transition: transform 0.3s ease; } .listing-faq .faq-question.active .accordion-icon { transform: rotate(180deg); } .listing-faq .faq-answer { padding: 10px 20px 20px 40px; font-size: 0.95em; line-height: 1.7; color: #555; border-top: 1px dashed #eee; margin-top: -1px; /* display: none; JS adds 'active' class perhaps */ } /* --- 9. News Section --- */ .listing-news-section .news-content-editor { background-color: #fdfdfd; border: 1px solid #eee; padding: 20px; border-radius: 3px; line-height: 1.7; } .listing-news-section .news-content-editor p:last-child { margin-bottom: 0; } /* --- 10. Basic Information Table Section --- */ .listing-basic-info-summary dl.definition-list { border: 1px solid #eee; border-radius: 4px; overflow: hidden; margin-top: 15px;} .listing-basic-info-summary dt, .listing-basic-info-summary dd { padding: 12px 15px; margin: 0; border-bottom: 1px solid #eee; display: flex; align-items: center; box-sizing: border-box;} .listing-basic-info-summary dt { font-weight: bold; background-color: #f9f9f9; color: #333; width: 30%; float: left; clear: left; } .listing-basic-info-summary dd { color: #555; width: 70%; float: left; min-height: 46px; } .listing-basic-info-summary dl.definition-list::after { content: ""; display: table; clear: both; } .listing-basic-info-summary dl.definition-list dt:last-of-type, .listing-basic-info-summary dd:last-of-type { border-bottom: none; } @media (max-width: 767px) { /* Responsive table */ .listing-basic-info-summary dt, .listing-basic-info-summary dd { width: 100%; float: none; min-height: 0; display: block; } .listing-basic-info-summary dt { border-bottom: none; padding-bottom: 5px; } .listing-basic-info-summary dd { padding-top: 0; border-bottom: 1px solid #eee; } .listing-basic-info-summary dl.definition-list dd:last-of-type { border-bottom: none; } } /* --- 11. Related Info Section (#related-info-section) --- */ #related-info-section { margin-top: 40px; padding-top: 30px; border-top: 1px solid #eee; } #related-info-section .related-sub-section { margin-bottom: 30px; } #related-info-section h3 { font-size: 1.4em; margin-bottom: 15px; padding-bottom: 8px; border-bottom: 1px solid #ddd; display: inline-block; } #related-info-section h3 .mi { font-size: 1em; } .related-group-offices .related-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px; } .related-group-offices .related-item-card { border: 1px solid #eee; border-radius: 4px; text-align: center; padding: 15px; background: #fff; } .related-group-offices .related-item-card a { text-decoration: none; color: #333; } .related-group-offices .related-item-card a:hover span { text-decoration: underline; } .related-group-offices .related-item-card span { display: block; margin-top: 10px; font-weight: bold; font-size: 0.9em; } .related-themes-list { margin-top: 30px; } .related-themes-list h4 { margin-bottom: 10px; font-size: 1.1em; font-weight: bold;} /* .related-themes-list ul.tags-list { Reuse styles from overview section } */ #related-info-section .recently-viewed-listings p em, #related-info-section .featured-listings p em { color: #888; font-style: italic;} /* --- 12. Sidebar Widgets --- */ .listing-sidebar .widget { background-color: #f9f9f9; border: 1px solid #eee; padding: 20px; margin-bottom: 25px; border-radius: 4px; } .listing-sidebar .widget:last-child { margin-bottom: 0; } .listing-sidebar .widget-title { font-size: 1.2em; font-weight: 600; margin-top: 0; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid #ddd; display: flex; align-items: center; gap: 8px; } .widget-contact-info p { margin-bottom: 0.8em; line-height: 1.5; font-size: 0.95em; word-break: break-all; } .widget-contact-info strong { margin-right: 0.5em; } .widget-contact-info .button { display: block; text-align: center; margin-top: 15px;} .widget-map .map-container-sidebar { height: 180px; background-color: #e9e9e9; margin-bottom: 10px; border: 1px solid #ddd;} .widget-map .address-sidebar { font-size: 0.9em; margin-bottom: 10px; line-height: 1.5;} .widget-map .get-directions-link-sidebar { font-size: 0.9em; } .widget-opening-hours .opening-hours-content { /* Depends on MyListing Output */ } .widget-basic-info-snippet ul.details-list { list-style: none; padding: 0; margin: 0; font-size: 0.9em; } .widget-basic-info-snippet ul.details-list li { margin-bottom: 8px; } .widget-basic-info-snippet ul.details-list strong { margin-right: 0.5em; } .widget-contact-info ul.social-links-sidebar { list-style: none; padding: 10px 0 0 0; margin: 15px 0 0 0; border-top: 1px dashed #ddd; display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-start; } .widget-contact-info ul.social-links-sidebar li a { display: inline-block; font-size: 1.4em; color: #555; transition: color 0.2s ease; text-decoration: none; } .widget-contact-info ul.social-links-sidebar li a:hover { color: var(--primary-color, #0073aa); } .widget-nearby { /* Depends on MyListing Output */ } /* ========================================================================== End Single Listing Type: wel-05 Styles ========================================================================== */ /* --- Rich Table of Contents (RTOC) カスタマイズ --- */ /* 1. 目次タイトルラベル ("Contents"など) を非表示にする */ /* プラグイン設定で非表示にできない場合のCSS対処 */ /* 実際のクラス名やIDを開発者ツールで確認してください */ .rtoc_title, .rtoc-header, #rtoc-mokuji-title { /* プラグインが出力するタイトル要素のセレクタ例 */ display: none !important; /* 強制的に非表示 */ } /* PHPテンプレート側で独自に
記事の目次
などを出力している場合は、それが不要であればPHPテンプレートから該当行を削除してください。 */ /* 2. 右上のボタン（開閉ボタンなど）を非表示にする */ /* プラグイン設定で非表示にできない場合のCSS対処 */ /* 実際のクラス名を開発者ツールで確認してください */ .rtoc_toggle_button, /* よくあるトグルボタン用クラス名 */ .rtoc-mokuji-toggle, #rtoc_open_close, /* IDの例 */ .rtoc-mokuji .rtoc-mokuji-open-close-button { /* より具体的なセレクタの例 */ display: none !important; /* 強制的に非表示 */ } /* 3. 目次全体のパディング（内側の余白）を調整する */ /* 目次全体を囲むコンテナ要素のセレクタを開発者ツールで確認してください */ .rtoc_mokuji_container, .rtoc-mokuji-wrapper, #rtoc-mokuji-frame { /* IDやクラス名の例 */ padding: 15px !important; /* 例: 上下左右15pxに。お好みの値に調整 */ /* padding-top: 10px !important; padding-bottom: 10px !important; padding-left: 15px !important; padding-right: 15px !important; */ /* 個別に指定も可能 */ } /* 4. 見出しごとのLineHeight（行の高さ）や余白を調整する */ /* 目次リスト全体のスタイル (ul要素) */ .rtoc_mokuji_ul, .rtoc-mokuji-list { margin-bottom: 0 !important; /* ul要素自体の下のマージンを詰める場合 */ } /* 目次リストの各項目 (li要素) */ .rtoc_mokuji_ul li, .rtoc-mokuji-list li { line-height: 1.5em !important; /* 例: 行の高さを調整。1.4em や 1.6em などお好みで */ padding-top: 4px !important; /* 例: 各項目の上のパディング */ padding-bottom: 4px !important; /* 例: 各項目の下のパディング */ margin-bottom: 0 !important; /* 例: 各項目間の下のマージンをなくす */ } /* 目次リストのリンク (a要素) - フォントサイズなども調整可能 */ .rtoc_mokuji_ul li a, .rtoc-mokuji-list li a { /* font-size: 0.95em !important; */ /* 必要であればフォントサイズ調整 */ /* padding: 0 !important; */ /* リンク自体のパディングをなくす場合 */ } /* もし階層表示でインデントが大きすぎる場合 (下位階層のul) */ .rtoc_mokuji_ul ul, .rtoc-mokuji-list ul { /* padding-left: 15px !important; */ /* 例: 左のインデント幅を調整 */ /* margin-top: 2px !important; */ /* 例: 上位項目との間隔を調整 */ /* margin-bottom: 2px !important; *//* 例: 下位項目群の下の間隔を調整 */ } /* 目次タイトル(h4)の下のマージンを調整 */ /* #toc-sidebar-post や .sticky-toc-wrapper-post などの親セレクタと組み合わせて、より具体的に指定する方が安全です */ #toc-sidebar-post h4 { margin-bottom: 5px !important; /* 例: 5pxに。お好みの値に調整 */ } /* RTOCプラグインが出力する目次コンテナの上マージンを調整 */ /* 以下は一般的なクラス名の例です。実際のクラス名に合わせてください。 */ .rtoc_mokuji_container, .rtoc-mokuji-wrapper, #rtoc-mokuji-frame, #article-toc-generated /* PHPテンプレートで設定したnavタグのID */ { margin-top: 5px !important; /* 例: 5pxに。お好みの値に調整 */ /* padding-top: 5px !important; */ /* もしパディングの場合 */ } /* または、目次リスト(ul)自体の上のマージンが大きい場合 */ .rtoc_mokuji_ul, .rtoc-mokuji-list, #article-toc-generated ul { margin-top: 5px !important; /* 例: 5pxに。お好みの値に調整 */ } /* より具体的なセレクタでの指定例 */ /* 左カラムのサイドバー内の目次タイトル下のマージンを調整 */ .sidebar-left-post h4.toc-title-custom-class { /* 仮にh4に 'toc-title-custom-class' というクラスを付けた場合 */ margin-bottom: 8px !important; } /* 左カラムのサイドバー内のRTOC目次コンテナの上のマージンを調整 */ .sidebar-left-post .rtoc_mokuji_container { margin-top: 8px !important; } #rtoc-mokuji-widget-wrapper > ol{ margin: 16px !important; } #rtoc-mokuji-widget-wrapper{ margin: 0px !important; } #rtoc-mokuji-wrapper{ display:none; } /* 左カラムの目次ラッパー */ #toc-column-left .sticky-content-wrapper { /* または #toc-sidebar-post .sticky-toc-wrapper-post など、PHPのHTML構造に合わせる */ position: -webkit-sticky; position: sticky; top: 150px; /* ★固定ヘッダーの高さを考慮したオフセット値 */ } /* 右カラムのウィジェットラッパー */ #right-sidebar-column .sticky-content-wrapper { position: -webkit-sticky; position: sticky; top: 150px; /* ★固定ヘッダーの高さを考慮したオフセット値 */ } /* モバイルなど、スティッキーを解除したい場合のCSS (例) */ @media (max-width: 991px) { /* 3カラムでなくなるブレークポイント (md以下) */ #toc-column-left .sticky-content-wrapper, #right-sidebar-column .sticky-content-wrapper { position: static !important; /* スティッキーを解除 */ height: auto !important; /* JSによる高さ指定も解除 */ } #toc-column-left, #right-sidebar-column { height: auto !important; /* JSによる高さ指定も解除 */ } } /* --- ここまで RTOC カスタマイズ --- */ /* --- MyListing Compare Card Styles --- */ .mylisting-compare-card { border: 1px solid #e0e0e0; border-radius: 8px; margin-bottom: 30px; /* カード間のスペースを少し広げる */ box-shadow: 0 2px 5px rgba(0,0,0,0.08); display: flex; flex-direction: column; background-color: #fff; /* カード背景色 */ } /* ① タイトルとキャッチコピーの左寄せ調整 */ .mylisting-compare-card .card-header-content { padding: 20px; /* パディングを調整 */ border-bottom: 1px solid #e0e0e0; text-align: left; /* 明示的に左寄せ */ } .mylisting-compare-card .listing-title { margin: 0 0 8px 0; /* マージン調整 */ font-size: 1.6em; /* 少し大きく */ font-weight: bold; } .mylisting-compare-card .listing-title a { text-decoration: none; color: #2c3e50; /* タイトルの色を濃いめに */ } .mylisting-compare-card .listing-title a:hover { color: #0073aa; } .mylisting-compare-card .tagline { font-size: 1em; /* 少し大きく */ color: #555; /* キャッチコピーの色 */ margin: 0; line-height: 1.5; } .mylisting-compare-card .card-body { padding: 20px; /* パディングを調整 */ flex-grow: 1; } .mylisting-compare-card .summary-of-services-section, .mylisting-compare-card .introductory-text-section, .mylisting-compare-card .introduction-tags-section, .mylisting-compare-card .features-section, .mylisting-compare-card .info-section { margin-bottom: 20px; /* 各セクション間のマージン */ } .mylisting-compare-card .summary-of-services-section:last-child, .mylisting-compare-card .introductory-text-section:last-child, .mylisting-compare-card .introduction-tags-section:last-child, .mylisting-compare-card .features-section:last-child, .mylisting-compare-card .info-section:last-child { margin-bottom: 0; /* card-body内の最後の要素のマージンを削除 */ } .mylisting-compare-card h4 { /* セクションタイトル共通スタイル */ font-size: 1.1em; /* 少し大きく */ font-weight: 600; margin-top: 0; margin-bottom: 10px; color: #333; border-bottom: 2px solid #f0f0f0; /* 下線を追加 */ padding-bottom: 5px; } .mylisting-compare-card .summary-of-services-section p, .mylisting-compare-card .introductory-text-section p { margin-top: 0; margin-bottom: 0.75em; font-size: 0.95em; line-height: 1.7; color: #444; } /* ② 特徴・強みタグと紹介用タグの横並び */ .mylisting-compare-card ul.features-list-inline, .mylisting-compare-card ul.introduction-tags-list-inline { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; /* 折り返しあり */ gap: 8px; /* アイテム間の隙間 */ } .mylisting-compare-card ul.features-list-inline li, .mylisting-compare-card ul.introduction-tags-list-inline li { font-size: 0.85em; background-color: #eef1f2; /* タグの背景色 */ color: #506773; /* タグの文字色 */ padding: 4px 10px; /* パディング調整 */ border-radius: 15px; /* 角を丸く */ line-height: 1.4; } .mylisting-compare-card ul.features-list-inline li .mi { /* 特徴タグのアイコン */ margin-right: 4px; font-size: 1.1em; /* アイコンサイズ調整 */ vertical-align: text-bottom; /* アイコンとテキストの垂直位置調整 */ color: #0073aa; /* アイコンの色 */ } .mylisting-compare-card .info-section p { margin: 0 0 10px 0; font-size: 0.95em; display: flex; /* アイコンとテキストを揃えるため */ align-items: center; /* アイコンとテキストを中央揃え */ color: #444; } .mylisting-compare-card .info-section p .mi { margin-right: 8px; /* アイコンとテキストの間のスペース */ color: #0073aa; font-size: 1.3em; /* アイコンサイズ調整 */ } .mylisting-compare-card .review-summary .simple-star-rating, .mylisting-compare-card .review-summary .stars-average { /* MyListingの星評価クラスも考慮 */ color: #ffb400; font-size: 1.2em; /* 星のサイズ */ margin-right: 5px; } .mylisting-compare-card .review-summary .numeric-rating { font-weight: bold; margin-left: 3px; margin-right: 5px; } .mylisting-compare-card .review-summary .review-rating-summary-text { font-style: italic; color: #555; font-size: 0.9em; margin-right: 5px; } .mylisting-compare-card .review-summary .review-count { color: #777; font-size: 0.9em; } .mylisting-compare-card .card-footer.cta-buttons { padding: 15px 20px; /* パディング調整 */ background-color: #f7f9fa; border-top: 1px solid #e0e0e0; text-align: center; display: flex; gap: 10px; justify-content: space-around; /* ボタン間のスペースを均等に */ flex-wrap: wrap; } .mylisting-compare-card .cta-buttons .button { display: inline-block; padding: 10px 18px; /* ボタンのパディング調整 */ text-decoration: none; border-radius: 5px; font-size: 0.95em; font-weight: 500; color: white; border: none; cursor: pointer; transition: background-color 0.2s ease; flex-grow: 1; /* ボタンがスペースを分け合うように */ min-width: 120px; /* ボタンの最小幅 */ } .mylisting-compare-card .cta-buttons .button:hover { opacity: 0.9; } .mylisting-compare-card .cta-buttons .button.phone-cta { background-color: #2ecc71!important; } /* 緑系 */ .mylisting-compare-card .cta-buttons .button.inquiry-cta { background-color: #e67e22!important; } /* オレンジ系 */ .mylisting-compare-card .cta-buttons .button.reviews-cta { background-color: #3498db!important; } /* 青系 */ /* --- MyListing Compare Card Carousel Styles (追加・調整) --- */ .mylisting-compare-card .card-carousel-wrapper { margin-bottom: 15px; /* border-bottom: 1px solid #e0e0e0; */ /* カルーセルの下線はなくても良いかも */ /* padding-bottom: 15px; */ position: relative; /* ナビゲーションボタンの配置のため */ } .mylisting-card-carousel { /* .swiper-container にも適用される */ width: 100%; height: 220px; /* 高さを少し調整 */ border-radius: 6px; /* カルーセル自体に角丸 */ overflow: hidden; /* 角丸を適用するため */ } .mylisting-card-carousel .swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; } .mylisting-card-carousel .swiper-slide a.gallery-image-link { /* Fancybox用リンク */ display: block; width: 100%; height: 100%; } /* Swiperのページネーションとナビゲーションボタンのスタイル */ .mylisting-card-carousel .swiper-pagination { bottom: 8px !important; /* 位置調整 */ } .mylisting-card-carousel .swiper-pagination-bullet { background: #fff; /* 白い点 */ opacity: 0.7; width: 7px; height: 7px; } .mylisting-card-carousel .swiper-pagination-bullet-active { background: #0073aa; /* アクティブな点の色 */ opacity: 1; } .mylisting-card-carousel .swiper-button-prev, .mylisting-card-carousel .swiper-button-next { color: #fff; /* ボタンの色を白に */ background-color: rgba(0, 0, 0, 0.3); /* 半透明の背景 */ border-radius: 50%; width: 30px; /* ボタンの幅 */ height: 30px; /* ボタンの高さ */ top: 50%; transform: translateY(-50%); margin-top: 0; /* swiperのデフォルトマージンをリセット */ transition: background-color 0.2s ease; } .mylisting-card-carousel .swiper-button-prev:hover, .mylisting-card-carousel .swiper-button-next:hover { background-color: rgba(0, 0, 0, 0.5); } .mylisting-card-carousel .swiper-button-prev::after, .mylisting-card-carousel .swiper-button-next::after { font-size: 14px; /* アイコンのサイズ */ font-weight: bold; } .mylisting-card-carousel .swiper-button-prev { left: 10px; } .mylisting-card-carousel .swiper-button-next { right: 10px; } /* 画像がない場合のシングルイメージ表示 */ .mylisting-card-single-image img { width: 100%; height: auto; max-height: 220px; /* カルーセルと高さを合わせる */ object-fit: cover; border-radius: 6px; } .card-swiper-gallery .swiper-slide img { display: block; width: 100%; height: auto; max-height: 400px; /* 例えば最大の高さを指定するなど */ object-fit: contain; /* または cover */ } .card-swiper-gallery .gallery-swiper-container { /* PHPコード内のクラス名に合わせてください */ width: 100%; /* カードの幅に合わせる */ overflow: hidden; /* これが非常に重要です */ position: relative; /* ナビゲーションボタンなどを配置する場合に備えて */ } .card-swiper-gallery .swiper-slide { width: 100%; flex-shrink: 0; /* スライドが縮まないようにする */ /* height: auto; adaptiveHeight:true をJSで設定している場合は不要なことが多い */ } .card-swiper-gallery .swiper-slide img { display: block; width: 100%; height: auto; /* アスペクト比を保つ */ } .card-cover-image-section { margin-bottom: 15px; /* 画像と本文の間のマージン */ line-height: 0; /* 画像下の余分なスペースを取り除く */ overflow: hidden; /* 画像がコンテナからはみ出さないように */ } .card-cover-image-section img { width: 100%; height: 200px; /* 例: 高さを固定する場合。アスペクト比を保つには height: auto; */ object-fit: cover; /* コンテナに合わせて画像をトリミングまたは調整 */ /* border-radius: 4px; */ /* 角を丸める場合 */ } /* Individual Button Styles */ .mylisting-compare-card .cta-buttons .phone-cta { background-color: #28a745!important; /* Green */ color: #fff; } .mylisting-compare-card .cta-buttons .phone-cta:hover { background-color: #218838!important; /* Darker Green */ box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .mylisting-compare-card .cta-buttons .inquiry-cta { background-color: #007bff; /* Blue */ color: #fff; } .mylisting-compare-card .cta-buttons .inquiry-cta:hover { background-color: #0056b3; /* Darker Blue */ box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .mylisting-compare-card .cta-buttons .website-cta { background-color: #6c757d; /* Grey */ color: #fff; } .mylisting-compare-card .cta-buttons .website-cta:hover { background-color: #545b62; /* Darker Grey */ box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .mylisting-compare-card .cta-buttons .reviews-cta { background-color: #fff; color: #fff; /* Blue text */ border: 1px solid #007bff; /* Blue border */ } .mylisting-compare-card .cta-buttons .reviews-cta:hover { background-color: #007bff; /* Blue background */ color: #fff; /* White text */ box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .reviewed-by-marker { position: relative; display: inline-block; /* または block 要素に応じて */ /* margin-left: 8px; */ /* 必要に応じて調整 */ cursor: pointer; /* クリック可能であることを示す */ } .reviewed-by-trigger-text { color: #555; /* テキストの色 */ font-size: 0.9em; /* text-decoration: underline dotted; */ /* 下線などでインタラクティブに見せる場合 */ padding: 2px 4px; border: 1px solid #ddd; border-radius: 3px; background-color: #f9f9f9; } .reviewed-by-tooltip { visibility: hidden; width: 220px; /* または max-width: 250px; など内容に応じて調整 */ background-color: #333; color: #fff; text-align: left; border-radius: 4px; padding: 10px 12px; position: absolute; z-index: 10; bottom: 130%; /* トリガーテキストの上、少し離す */ /* ▼▼▼ 位置調整ここから ▼▼▼ */ left: 0; /* まず親要素の左端に合わせる */ right: auto; /* 右端の自動調整は解除 */ transform: translateX(0); /* 中央揃えのtransformをリセット */ margin-left: 0; /* ネガティブマージンをリセット */ /* 必要に応じて、トリガー要素からの相対的なオフセットを少し加える */ /* 例：少し右にずらしたい場合 (トリガー要素の幅にもよる) */ /* left: 10px; */ /* 画面の左端に最低限のマージンを確保する (より堅牢な方法) */ /* この方法は、ツールチップがトリガー要素の真上ではなく、少しずれる可能性があります */ /* left: max(0px, 50% - 110px - ( (親要素の左端からビューポート左端までの距離) - (ツールチップの幅/2) ) ); */ /* 上記のmax()を使った方法は複雑なので、まずはシンプルなleft:0を試し、必要なら調整しましょう */ /* ツールチップが画面幅を超える場合の対応 (簡易的) */ max-width: calc(100vw - 40px); /* 画面幅から左右20pxずつの余白を引いた値を最大幅とする */ box-sizing: border-box; /* パディングとボーダーを幅・高さに含める */ /* ▲▲▲ 位置調整ここまで ▲▲▲ */ opacity: 0; transition: opacity 0.2s ease-in-out, visibility 0s 0.2s; font-size: 0.9em; line-height: 1.5; box-shadow: 0 2px 8px rgba(0,0,0,0.25); } /* JavaScriptでこのクラスをトグルして表示/非表示を制御 */ .reviewed-by-marker.tooltip-active .reviewed-by-tooltip, .reviewed-by-marker:hover .reviewed-by-tooltip, .reviewed-by-marker:focus .reviewed-by-tooltip { /* フォーカス時も表示 */ visibility: visible; opacity: 1; transition: opacity 0.2s ease-in-out; } .reviewed-by-tooltip strong { display: block; margin-bottom: 5px; font-weight: bold; color: #fff; } .reviewed-by-tooltip a { color: #90caf9; /* 明るい青 */ text-decoration: none; } .reviewed-by-tooltip a:hover { text-decoration: underline; color: #bbdefb; } /* 吹き出しの矢印の位置も調整が必要になる場合があります */ .reviewed-by-tooltip::after { content: ""; position: absolute; top: 100%; left: 20px; /* 例：トリガーの左端から20px程度の位置に矢印を出す (要調整) */ /* margin-left: -6px; 元のままだと左に寄りすぎる可能性 */ border-width: 6px; border-style: solid; border-color: #333 transparent transparent transparent; } /* (ここに前回のCSSを記述) */ /* FAQの回答内のリンクスタイル */ .faq-answer a { color: #1a0dab; /* Googleの未訪問リンク風の青色 */ text-decoration: underline; /* 下線を表示（Google風） */ } .faq-answer a:visited { color: #660099; /* Googleの訪問済みリンク風の紫色 */ } .faq-answer a:hover { text-decoration: none; /* 例：マウスオーバーで下線を消す */ } .faq-answer a:active { color: #faa700; } /* (中略：ユーザー提供のCSSの残りの部分) */ /* 全体の左右パディングと最大幅 */ .content-area.pillar-page { padding-left: 20px; padding-right: 20px; max-width: 1140px; margin-left: auto; margin-right: auto; box-sizing: border-box; } /* (中略：以下、ユーザー提供のCSSをそのまま記述) */ /* ピラーページヘッダー */ .pillar-page-header { margin-bottom: 30px; padding-bottom: 20px; border-bottom: 1px solid #eee; } .pillar-title { font-size: 2.5em; margin-bottom: 0.5em; } #main > section.top-related-categories > h2{ text-align: left; padding-left:0; } ul.inline-child-categories { list-style: none; padding: 0; margin: 10px 0 15px 0; display: flex; flex-wrap: wrap; gap: 8px; } a.inline-child-category-link { display: inline-block; padding: 6px 14px; background-color: #f0f0f0; border: 1px solid #dcdcdc; border-radius: 4px; text-decoration: none; color: #333; font-size: 0.9em; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; } a.inline-child-category-link:hover { background-color: #e0e0e0; border-color: #c0c0c0; color: #000; } .pillar-introduction { font-size: 1.1em; color: #555; line-height: 1.7; border: 1px solid #e0e0e0; padding: 20px; margin-top: 15px; border-radius: 4px; background-color: #f9f9f9; border-left: 4px solid #007bff; } .pillar-main-content-article { margin-bottom: 40px; line-height: 1.8; } .pillar-main-content-article img { max-width: 100%; height: auto; border-radius: 4px; margin: 10px 0; } .pillar-section-title { font-size: 1.8em; margin-top: 40px; margin-bottom: 20px; border-bottom: 2px solid #0073aa; padding-bottom: 10px; color: #222; } .pillar-section-title:first-child { margin-top: 0; } .pillar-cards-section { margin-bottom: 40px; } .findcare-articles-grid { display: flex; flex-wrap: wrap; gap: 20px; } .findcare-grid-item { flex: 1 1 calc(33.333% - (40px / 3)); min-width: 280px; display: flex; flex-direction: column; } .findcare-card { background-color: #fff; border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 5px rgba(0,0,0,0.05); transition: box-shadow 0.3s ease; width: 100%; display: flex; flex-direction: column; height: 100%; } .findcare-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); } .findcare-card-thumbnail { width: 100%; aspect-ratio: 16 / 9; overflow: hidden; } .findcare-card-thumbnail a { display: block; width: 100%; height: 100%; } .findcare-card-thumbnail img { display: block; width: 100%; height: 100%; object-fit: cover; border-bottom: 1px solid #e0e0e0; } .findcare-card-content { padding: 15px 20px; flex-grow: 1; display: flex; flex-direction: column; } .findcare-card-meta { margin-bottom: 8px; } .findcare-card-category { font-size: 0.75em; color: #007bff; text-transform: uppercase; font-weight: bold; display: inline-block; } .findcare-card-category a { color: inherit; text-decoration: none; } .findcare-card-category a:hover { text-decoration: underline; } .findcare-card-title { font-size: 1.15em; margin-top: 0; margin-bottom: 0; line-height: 1.4; flex-grow: 1; } .findcare-card-title a { text-decoration: none; color: #333; } .findcare-card-title a:hover { color: #007bff; } .key-terms-section { margin-top: 40px; margin-bottom: 30px; padding: 25px; background-color: #004085; border-radius: 8px; } .key-terms-section .pillar-section-title.key-terms-title { color: #fff; border-bottom: none; padding-bottom: 0; margin-bottom: 20px; font-size: 1.3em; text-transform: uppercase; } ul.key-terms-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px 12px; } a.key-term-link { text-decoration: none; color: #333; background-color: #e9ecef; font-size: 0.9em; padding: 6px 12px; display: inline-block; border-radius: 20px; transition: background-color 0.2s ease, color 0.2s ease; border: 1px solid #ced4da; } a.key-term-link:hover { background-color: #d3d9df; color: #000; text-decoration: none; } .pillar-faq-section { margin-bottom: 40px; background-color: #f9f9f9; padding: 25px; border-radius: 8px; border: 1px solid #e0e0e0; } .pillar-faq-section .pillar-section-title { border-bottom: none; padding-bottom: 0; margin-bottom: 25px; text-align: left; font-size: 1.5em; } .pillar-faq-list dt.faq-question { font-weight: bold; margin-top: 20px; color: #333; padding: 10px 15px; background-color: #fff; border: 1px solid #ddd; border-radius: 4px 4px 0 0; cursor: pointer; position: relative; } .pillar-faq-list dt.faq-question::after { content: '\25BC'; position: absolute; right: 15px; top: 50%; transform: translateY(-50%); font-size: 0.8em; color: #777; } .pillar-faq-list dt.faq-question.active::after { content: '\25B2'; } .pillar-faq-list dd.faq-answer { margin-left: 0; padding: 15px; margin-bottom: 0; color: #444; border: 1px solid #ddd; border-top: none; border-radius: 0 0 4px 4px; background-color: #fff; } .navigation.pagination { margin-top: 30px; text-align: center; } .navigation.pagination .nav-links { display: inline-block; } .navigation.pagination .nav-links .page-numbers { display: inline-block; padding: 8px 12px; margin: 0 2px; border: 1px solid #ddd; color: #0073aa; text-decoration: none; border-radius: 4px; transition: background-color 0.3s, color 0.3s; } .navigation.pagination .nav-links .page-numbers:hover, .navigation.pagination .nav-links .page-numbers.current { background-color: #0073aa; color: #fff; border-color: #0073aa; } .navigation.pagination .nav-links .page-numbers.dots { border: none; padding: 8px 4px; } @media (max-width: 991px) { .findcare-grid-item { flex-basis: calc(50% - 10px); } .pillar-title { font-size: 2.2em; } .pillar-section-title { font-size: 1.6em; } .findcare-card-title { font-size: 1.1em; } .key-terms-section .pillar-section-title.key-terms-title { font-size: 1.2em; } a.key-term-link { font-size: 0.85em; padding: 5px 10px;} } @media (max-width: 767px) { .pillar-title { font-size: 1.8em; } .findcare-grid-item { flex-basis: 100%; } .articles-list-container.findcare-articles-grid { gap: 15px; } .pillar-section-title { font-size: 1.4em; } .pillar-faq-section .pillar-section-title { font-size: 1.3em; } .key-terms-section .pillar-section-title.key-terms-title { font-size: 1.1em; text-align: center; } .findcare-card-title { font-size: 1.05em; } .pillar-introduction { padding: 15px; padding-left: 10px; } .findcare-card-content { padding: 15px; } ul.key-terms-list { gap: 8px 10px; justify-content: center; } a.key-term-link { font-size: 0.8em; padding: 4px 8px;} .pillar-faq-section { padding: 20px; } .pillar-faq-list dt.faq-question, .pillar-faq-list dd.faq-answer { padding-left: 10px; padding-right: 10px; } .pillar-faq-list dt.faq-question::after { right: 10px; } } /* * =============================================== * 記事全体のデザインシステム（!important適用版） * =============================================== */ /* --- デザインコンポーネント --- */ /* 1. 特徴リスト（大阪府の傾向）- 【競合対策強化版】 */ .article-section .feature-summary-list { background-color: var(--color-bg-light-gray) !important; border: 1px solid var(--color-border-light) !important; border-left: 4px solid var(--color-secondary) !important; padding: 1.5rem !important; border-radius: 8px !important; list-style: none !important; /* list-style-type も含めてリセット */ margin: 1.5em 0 !important; box-shadow: none !important; /* 予期せぬ影をリセット */ } .article-section .feature-summary-list li { position: relative !important; list-style-type: none !important; /* li自体にも強力にリセット */ padding: 0 0 0 2rem !important; /* 既存のpaddingをリセットして再設定 */ margin: 0 !important; /* 既存のmarginをリセット */ background: none !important; /* 既存の背景をリセット */ border: none !important; /* 既存のボーダーをリセット */ } .article-section .feature-summary-list li::before { content: '✔' !important; position: absolute !important; left: 0 !important; top: 0.1em !important; /* テキストとの垂直位置を微調整 */ color: var(--color-secondary) !important; font-weight: bold !important; font-size: 1.1rem !important; } .article-section .feature-summary-list li:not(:last-child) { margin-bottom: 1rem !important; } .article-section .feature-summary-list li b { font-weight: bold !important; /* 強制的に太字に */ } /* 2. 番号付き比較ポイントリスト */ .comparison-points-list { list-style: none !important; padding-left: 0 !important; counter-reset: points-counter !important; } .comparison-points-list > li { background: #fff !important; border: 1px solid var(--color-border-light) !important; border-radius: 8px !important; padding: 1.5rem !important; margin-bottom: 0.5rem !important; position: relative !important; padding-top: 1rem !important; } .comparison-points-list .point-title { font-size: 1.2rem !important; font-weight: bold !important; display: block !important; margin-bottom: 1rem !important; } .comparison-points-list .point-checklist { list-style: none !important; padding: 0.5rem 0.5rem 0.5rem 1rem !important; margin: 0 !important; background-color: var(--color-bg-light-gray) !important; border-radius: 4px !important; } .comparison-points-list .point-checklist li { position: relative !important; padding-left: 1.5rem !important; } .comparison-points-list .point-checklist li::before { content: '✔' !important; position: absolute !important; left: 0 !important; color: var(--color-primary) !important; } .comparison-points-list .point-checklist li:not(:last-child) { margin-bottom: 0.5rem !important; } /* 3. 目的別探し方リスト */ .purpose-type-list { list-style: none !important; padding: 0 !important; } .purpose-type-list li { background: var(--color-bg-light-blue) !important; padding: 1.5rem !important; border-radius: 8px !important; border-left: 4px solid var(--color-secondary) !important; } .purpose-type-list li:not(:last-child) { margin-bottom: 1rem !important; } .purpose-type-list strong { display: block !important; font-size: 1.1rem !important; margin-bottom: 0.5rem !important; } /* 4. チェックリスト（見学・体験用）- 【ブラッシュアップ版】 */ #shuro-article-wrapper .actionable-checklist { list-style: none !important; padding: 0 !important; /* ulのパディングと背景はリセット */ background: none !important; border: 1px solid var(--color-border-light) !important; /* 全体を薄い線で囲む */ border-radius: 8px !important; overflow: hidden; /* 角丸に合わせて内側をクリップ */ margin: 1.5em 0 !important; } #shuro-article-wrapper .actionable-checklist li { position: relative !important; padding: 1rem 1rem 1rem 2.75rem !important; /* 左の余白をアイコン分確保 */ border-bottom: 1px solid var(--color-border-light) !important; /* 各項目の区切り線 */ display: flex !important; align-items: center !important; background-color: #fff !important; /* デフォルトの背景色 */ margin:0 !important; } #shuro-article-wrapper .actionable-checklist li:last-child { border-bottom: none !important; /* 最後の項目は線なし */ } /* 1行おきに色を付ける（ゼブラストライプ） */ #shuro-article-wrapper .actionable-checklist li:nth-child(even) { background-color: var(--color-bg-light-gray) !important; } /* チェックボックス風のアイコン */ #shuro-article-wrapper .actionable-checklist li::before { content: '' !important; position: absolute !important; left: 1rem !important; top: 50% !important; transform: translateY(-50%) !important; width: 18px !important; height: 18px !important; background: #fff !important; border: 2px solid var(--color-primary) !important; border-radius: 4px !important; } /* 5. 公的情報源リスト */ .resource-list { list-style: none !important; padding: 0 !important; } .resource-list li { position: relative !important; padding-left: 2rem !important; border-bottom: 1px dashed var(--color-border-light) !important; padding-bottom: 1rem !important; margin-bottom: 1rem !important; } .resource-list li::before { content: '🔗' !important; position: absolute !important; left: 0 !important; font-size: 1.2rem !important; } .resource-list li:last-child { border-bottom: none !important; margin-bottom: 0 !important; } /* 6. FAQリスト */ .faq-list { border-top: 1px solid var(--color-border-light) !important; } .faq-list dt { position: relative !important; padding: 1.5rem 1rem 1.5rem 3.5rem !important; font-weight: bold !important; cursor: pointer !important; border-bottom: 1px solid var(--color-border-light) !important; } .faq-list dt::before { content: 'Q.' !important; position: absolute !important; left: 1rem !important; font-size: 1.5rem !important; font-weight: bold !important; color: var(--color-secondary) !important; } .faq-list dd { position: relative !important; padding: 1.5rem 1rem 1.5rem 3.5rem !important; margin: 0 !important; background-color: var(--color-bg-light-gray) !important; border-bottom: 1px solid var(--color-border-light) !important; } .faq-list dd::before { content: 'A.' !important; position: absolute !important; top: 1.5rem !important; left: 1rem !important; font-size: 1.5rem !important; font-weight: bold !important; color: var(--color-primary) !important; } /* 7. 注意点リスト */ .warning-list { list-style: none !important; padding: 0 !important; } .warning-list li { position: relative !important; padding: 1rem 1rem 1rem 3rem !important; background: #fff9f9 !important; border-left: 4px solid var(--color-accent-red, #dc3545) !important; border-radius: 4px !important; } .warning-list li:not(:last-child) { margin-bottom: 1rem !important; } .warning-list li::before { content: '❗' !important; position: absolute !important; left: 1rem !important; top: 50% !important; transform: translateY(-50%) !important; font-size: 1.5rem !important; } /* 8. まとめ・免責事項 */ .summary-box, .disclaimer-box { padding: 1.5rem !important; border-radius: 8px !important; } .summary-box { background-color: var(--color-bg-light-orange) !important; border: 2px solid var(--color-primary) !important; } .summary-box h2 { border-left: none !important; /* まとめボックス内のh2は特別 */ padding-left: 0 !important; } .disclaimer-box { background-color: #f1f1f1 !important; font-size: 0.8rem !important; color: #555 !important; margin-top: 2.5rem !important; } .disclaimer-box b { display: block !important; margin-bottom: 0.5em !important; font-weight: bold !important; /* 競合対策 */ } /* ---【NEW】深掘り解説セクションのスタイル --- */ .section-subtitle-arrow { font-size: 1.5rem !important; font-weight: bold !important; padding: 0.5rem 1rem !important; border-left: 6px solid var(--color-secondary) !important; background-color: var(--color-bg-light-gray) !important; margin: 2.5rem 0 1.5rem 0 !important; border-bottom: none !important; } .point-explanation-box { background: #fff !important; border: 1px solid var(--color-border-light) !important; border-radius: 8px !important; margin-bottom: 1.5rem !important; box-shadow: 0 4px 10px rgba(0,0,0,0.05) !important; } .point-explanation-title { display: flex !important; align-items: center !important; gap: 0.75rem !important; font-size: 1.2rem !important; font-weight: bold !important; padding: 1rem 1.5rem !important; border-bottom: 1px dashed var(--color-border-light) !important; } .point-explanation-title .point-number { background: var(--color-primary) !important; color: #fff !important; font-size: 0.8rem !important; font-weight: bold !important; padding: 0.3rem 0.6rem !important; border-radius: 4px !important; } .point-explanation-body { padding: 1.5rem !important; line-height: 1.8 !important; font-size: 1rem !important; } .point-explanation-body p { margin: 0 !important; padding: 0 !important; }