:root { --accent: #124865; } @keyframes spin3 { 0%, 100% { box-shadow: 10px 10px rgba(0, 0, 0, 1), -10px 10px rgba(0, 0, 0, 0.2), -10px -10px rgba(0, 0, 0, 1), 10px -10px rgba(0, 0, 0, 0.2); } 25% { box-shadow: -10px 10px rgba(0, 0, 0, 0.2), -10px -10px rgba(0, 0, 0, 1), 10px -10px rgba(0, 0, 0, 0.2), 10px 10px rgba(0, 0, 0, 1); } 50% { box-shadow: -10px -10px rgba(0, 0, 0, 1), 10px -10px rgba(0, 0, 0, 0.2), 10px 10px rgba(0, 0, 0, 1), -10px 10px rgba(0, 0, 0, 0.2); } 75% { box-shadow: 10px -10px rgba(0, 0, 0, 0.2), 10px 10px rgba(0, 0, 0, 1), -10px 10px rgba(0, 0, 0, 0.2), -10px -10px rgba(0, 0, 0, 1); } } #wpadminbar { top: 0 !important; } #c27-site-wrapper { background-color: #f4f4f4 }.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テンプレート側で独自に <h4>記事の目次</h4> などを出力している場合は、 それが不要であれば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: 50px; /* ★固定ヘッダーの高さを考慮したオフセット値 */ } /* 右カラムのウィジェットラッパー */ #right-sidebar-column .sticky-content-wrapper { position: -webkit-sticky; position: sticky; top: 50px; /* ★固定ヘッダーの高さを考慮したオフセット値 */ } /* モバイルなど、スティッキーを解除したい場合の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 カスタマイズ --- */