/*
 Theme Name: 生活トラブル救急車子
 Template:seikatutoraburu
 Description: 子テーマ
 Version: 1.0.0
*/
/* Pricing */
.gyosha-pricing .price-grid{display:grid;gap:16px}
.gyosha-pricing .price-grid.single{grid-template-columns:1fr}
.gyosha-pricing .price-grid.three{grid-template-columns:repeat(3,1fr)}
@media (max-width:860px){.gyosha-pricing .price-grid.three{grid-template-columns:1fr}}
.price-card{background:#fff;border:1px solid #e9eef5;border-radius:12px;padding:16px}
.price-title{margin:0 0 6px;font-weight:700}
.price-value{font-size:1.25rem;font-weight:700;margin:0 0 10px}
.price-features{margin:0;padding-left:18px}
.price-note{color:#666;font-size:.9rem;margin:8px 0 0}
.price-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid #e9eef5;border-radius:12px;overflow:hidden}
.price-table th,.price-table td{border-bottom:1px solid #eef3f8;padding:10px;vertical-align:top}
.price-table thead th{background:#f7f9fc}


/* Spec rows (Sefuri-like) */
.gyosha-spec .spec-grid{display:grid;gap:8px}
.gyosha-spec .spec-row{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid #e9eef5;border-radius:10px;padding:10px 12px}
.gyosha-spec .spec-row strong{flex:0 0 120px;color:#333}
.gyosha-spec .spec-row span{flex:1 1 auto;color:#222}
@media (max-width:640px){
  .gyosha-spec .spec-row{flex-direction:column;gap:6px}
  .gyosha-spec .spec-row strong{flex-basis:auto}
}

/* === Rankings: Card UI（SFR風） === */
.lrp-ranking{list-style:none;margin:0;padding:0}
.lrp-cards .lrp-card{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid #e9eef5;border-radius:12px;padding:14px 16px;margin:12px 0}
.lrp-rank{width:32px;height:32px;border-radius:50%;background:#f1f5ff;display:flex;align-items:center;justify-content:center;font-weight:700;color:#2b57d5;flex:0 0 32px}
.lrp-title{margin:0 0 6px;font-size:1.05rem;display:flex;align-items:center;gap:8px}
.lrp-badge.lrp-pr{display:inline-block;font-size:.75rem;line-height:1;padding:.2em .5em;border-radius:999px;background:#fff3cd;color:#8a6d3b;border:1px solid #ffe08a}
.lrp-meta{display:flex;align-items:center;gap:8px;color:#333}

/* CSS-only Stars */
.lrp-stars{position:relative;display:inline-block;font-size:18px;line-height:1}
.lrp-stars::before{content:"★★★★★";color:#ddd;letter-spacing:2px}
.lrp-stars>span{position:absolute;left:0;top:0;overflow:hidden;white-space:nowrap}
.lrp-stars>span::before{content:"★★★★★";color:#f5a623;letter-spacing:2px}
.lrp-score{font-size:.9rem;color:#444}
/* カードUI版（lrp-cards / lrp-card がある場合に効く） */
.lrp-cards .lrp-card{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid #e9eef5;border-radius:12px;padding:14px 16px;margin:12px 0}
.lrp-rank{width:32px;height:32px;border-radius:50%;background:#f1f5ff;display:flex;align-items:center;justify-content:center;font-weight:700;color:#2b57d5;flex:0 0 32px}
.lrp-title{margin:0 0 6px;font-size:1.05rem;display:flex;align-items:center;gap:8px}
.lrp-badge.lrp-pr{display:inline-block;font-size:.75rem;line-height:1;padding:.2em .5em;border-radius:999px;background:#fff3cd;color:#8a6d3b;border:1px solid #ffe08a}
.lrp-meta{display:flex;align-items:center;gap:8px}
.lrp-stars{position:relative;display:inline-block;font-size:18px;line-height:1}
.lrp-stars::before{content:"★★★★★";color:#ddd;letter-spacing:2px}
.lrp-stars>span{position:absolute;left:0;top:0;overflow:hidden;white-space:nowrap}
.lrp-stars>span::before{content:"★★★★★";color:#f5a623;letter-spacing:2px}
.lrp-score{font-size:.9rem;color:#444}

/* 旧リスト版（lrp-item のままでも見栄えが整う） */
.lrp-ranking .lrp-item{
  background:#fff;border:1px solid #e9eef5;border-radius:12px;
  padding:12px 14px;margin:10px 0;display:flex;gap:8px;align-items:center;flex-wrap:wrap;
}
.lrp-star{margin-left:auto;color:#333}
/* === スマホ固定CTA（電話） === */
.lrp-cta-bar{
  position:fixed; left:0; right:0; bottom:0;
  background:#0b5cff; color:#fff; z-index:9999;
  border-top:1px solid rgba(0,0,0,.08);
  padding:10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  box-shadow:0 -4px 16px rgba(0,0,0,.06);
  display:none; /* PCでは非表示、下のメディアクエリで出す */
}
.lrp-cta-btn{
  display:block; width:100%; text-align:center; text-decoration:none;
  background:#fff; color:#0b5cff; font-weight:700;
  padding:12px 14px; border-radius:10px;
}
@media (max-width: 860px){
  .lrp-cta-bar{display:block;}
}

/* === 施工事例カード（見た目整える） === */
.lrp-cases{display:grid; gap:16px}
.lrp-case{
  background:#fff; border:1px solid #e9eef5; border-radius:12px; padding:14px 16px;
}
.lrp-case h4{margin:0 0 8px; font-size:1.05rem}
.lrp-case-images{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:6px 0 8px}
.lrp-case-images img{width:100%; height:auto; border-radius:8px; display:block}
.lrp-case-price{font-weight:700; margin:4px 0 8px}
.lrp-case-body{color:#333}
@media (max-width:640px){
  .lrp-case-images{grid-template-columns:1fr;}
}

/* === （参考）ランキングのカードUIが未導入なら既存のリストにも最小の見栄えを付与 === */
.lrp-ranking{list-style:none;margin:0;padding:0}
.lrp-ranking .lrp-item{
  background:#fff; border:1px solid #e9eef5; border-radius:12px;
  padding:12px 14px; margin:10px 0; display:flex; gap:8px; align-items:center; flex-wrap:wrap;
}
.lrp-pr{display:inline-block;font-size:.75rem;line-height:1;padding:.2em .5em;border-radius:999px;background:#fff3cd;color:#8a6d3b;border:1px solid #ffe08a}
.lrp-star{margin-left:auto; color:#333}

/* ===== Gyosha details polish (Sefuri-like) ===== */

/* 見出し */
.gyosha-section h2 { 
  font-size: clamp(18px, 2.4vw, 22px); 
  margin: 18px 0 10px; 
  font-weight: 700; 
}

/* 対応エリアBOXを軽くカード化 */
.gyosha-infobox{
  background:#f7f9fc;
  border:1px solid #e9eef5;
  border-radius:12px;
  padding:14px 16px;
}

/* 星表示を少し小さく＆行間調整 */
.gyosha-meta{ gap:10px; }
.gyosha-stars{ font-size:16px; }
.gyosha-score{ color:#666; font-size:.9rem; }

/* 仕様（対応・料金の目安） */
.gyosha-spec .spec-grid{ display:grid; gap:10px; }
.gyosha-spec .spec-row{
  display:flex; gap:12px; align-items:flex-start;
  background:#fff; border:1px solid #e9eef5; border-radius:10px; 
  padding:10px 12px;
}
.gyosha-spec .spec-row strong{ flex:0 0 120px; color:#333; }
.gyosha-spec .spec-row span{ flex:1 1 auto; color:#222; }
@media (max-width:640px){
  .gyosha-spec .spec-row{ flex-direction:column; gap:6px; }
  .gyosha-spec .spec-row strong{ flex-basis:auto; }
}

/* 施工事例カードの見た目を揃える */
.lrp-cases{ display:grid; gap:16px; }
.lrp-case{
  background:#fff; border:1px solid #e9eef5; border-radius:12px; 
  padding:14px 16px;
}
.lrp-case h4{ margin:0 0 8px; font-size:1.05rem; }
.lrp-case-images{ 
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); 
  gap:10px; margin:6px 0 8px; 
}
.lrp-case-images img{ width:100%; height:auto; border-radius:8px; display:block; }
.lrp-case-price{ font-weight:700; margin:4px 0 8px; }
.lrp-case-body{ color:#333; }
@media (max-width:640px){ .lrp-case-images{ grid-template-columns:1fr; } }

/* 既存リスト型ランキングの軽い整形（カードUI未適用時） */
.lrp-ranking{ list-style:none; margin:0; padding:0; }
.lrp-ranking .lrp-item{
  background:#fff; border:1px solid #e9eef5; border-radius:12px;
  padding:12px 14px; margin:10px 0; display:flex; gap:8px; align-items:center; flex-wrap:wrap;
}
.lrp-pr{ display:inline-block; font-size:.75rem; padding:.2em .5em; border-radius:999px;
  background:#fff3cd; color:#8a6d3b; border:1px solid #ffe08a }
.lrp-star{ margin-left:auto; color:#333; }

.area-city-nav ul{list-style:none;margin:12px 0;padding:0;display:grid;gap:10px}
.area-city-nav.cols-2 ul{grid-template-columns:repeat(2,minmax(0,1fr))}
.area-city-nav.cols-3 ul{grid-template-columns:repeat(3,minmax(0,1fr))}
.area-city-nav.cols-4 ul{grid-template-columns:repeat(4,minmax(0,1fr))}
.area-city-nav li a{display:block;padding:10px 12px;border:1px solid #e9eef5;border-radius:10px;background:#fff;text-decoration:none}
.area-city-nav li a:hover{background:#f7fbff;border-color:#d5e6ff}

// ==== ランキング/ナビ 見た目調整（番号重複の除去・カード化・PR・星・ナビ黒ポチ除去） ====


/* --- ランキングリスト: デフォ番号を消す --- */
ol.lrp-ranking{list-style:none;margin:0;padding:0}
ol.lrp-ranking .lrp-card{display:flex;gap:12px;align-items:flex-start;padding:14px 12px;border-bottom:1px solid #eef2f7}
ol.lrp-ranking .lrp-rank{flex:0 0 36px;height:36px;line-height:36px;text-align:center;font-weight:700;border-radius:8px;background:#f5f7fb}
ol.lrp-ranking .lrp-main{min-width:0}
ol.lrp-ranking .lrp-title{margin:0 0 4px;font-size:1.05rem;font-weight:700}
ol.lrp-ranking .lrp-title a{color:inherit;text-decoration:none}
ol.lrp-ranking .lrp-title a:hover{text-decoration:underline}
.lrp-badge.lrp-pr{display:inline-block;margin-left:.5em;font-size:.8em;background:#ffe7a0;color:#7a5200;padding:.2em .45em;border-radius:.45em;vertical-align:middle}

/* 星表示（★5段階） */
.lrp-stars{position:relative;display:inline-block;width:95px;height:18px;vertical-align:middle;margin-right:.3em}
.lrp-stars::before{content:"★★★★★";letter-spacing:.2em;color:#ddd;position:absolute;left:0;top:-1px;font-size:16px;line-height:18px}
.lrp-stars>span{position:absolute;left:0;top:-1px;height:18px;overflow:hidden}
.lrp-stars>span::before{content:"★★★★★";letter-spacing:.2em;color:#f5a623;font-size:16px;line-height:18px}
.lrp-score{color:#555;font-size:.92rem}

/* ナビ（都道府県/市区町村）: 黒ポチを消してグリッド表示 */
.rk-nav ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.rk-nav li a{display:block;padding:6px 8px;border:1px solid #e5e8ef;border-radius:6px;text-decoration:none}
@media (max-width:640px){ .rk-nav ul{grid-template-columns:repeat(2,minmax(0,1fr));} }

/* パンくずスタイル調整 */
.ltq-breadcrumbs ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}

.ltq-breadcrumbs li {
  margin: 0;
  padding: 0;
}

.ltq-breadcrumbs li + li:before {
  content: "＞";
  margin: 0 6px;
  color: #666;
}

.ltq-breadcrumbs a {
  color: #0066cc;
  text-decoration: none;
}

.ltq-breadcrumbs a:hover {
  text-decoration: underline;
}

/* ランディング本文側のタイトルは非表示 */
.single-landing .entry-title,
.single-landing h1.entry-title { display: none !important; }

/* パンくずの見た目 */
.ltq-breadcrumbs { margin: 6px 0 0; }
.ltq-breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.ltq-breadcrumbs li + li:before { content: "＞"; margin: 0 6px; color: #999; }
.ltq-breadcrumbs a { color: #0a6; text-decoration: none; }
.ltq-breadcrumbs a:hover { text-decoration: underline; }

/* ヘッダー内H1の体裁（お好みで調整） */
.ltq-pagehead { padding: 10px 0 6px; }
.ltq-title { font-size: 2rem; font-weight: 700; margin: 4px 0; }
/* ランディング本文側のデフォルトタイトル非表示 */
.single-landing .entry-title,
.single-landing h1.entry-title { display: none !important; }

/* 自作パンくずの体裁 */
.ltq-breadcrumbs { margin: 6px 0 0; }
.ltq-breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.ltq-breadcrumbs li { margin: 0; padding: 0; font-size: 0.9rem; color: #666; }
.ltq-breadcrumbs li + li:before { content: "＞"; margin: 0 6px; color: #999; }
.ltq-breadcrumbs a { color: #0a6; text-decoration: none; }
.ltq-breadcrumbs a:hover { text-decoration: underline; }

/* ヘッダー内の余白（お好みで調整） */
.ltq-pagehead { padding: 10px 0 6px; }
.ltq-title { font-size: 2rem; font-weight: 700; margin: 4px 0; }

/* テーマが自動で出すパンくずを、ランディングのときだけ隠す */
.single-landing #panlist,
.single-landing .breadcrumb,
.single-landing .topic_path,
.single-landing .bread,
.single-landing .pankuzu { display: none !important; }
.ltq-breadcrumbs {
  margin: 5px 0 15px;
  font-size: 14px;
}
.ltq-breadcrumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}
.ltq-breadcrumbs li {
  margin: 0;
  color: #666;
}
.ltq-breadcrumbs li + li:before {
  content: "＞";
  margin: 0 6px;
  color: #aaa;
}
.ltq-breadcrumbs a {
  color: #0073aa;
  text-decoration: none;
}
.ltq-breadcrumbs a:hover {
  text-decoration: underline;
}
.ltq-breadcrumbs { margin: 6px 0 12px; }
.ltq-breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.ltq-breadcrumbs li { margin: 0; color: #666; }
.ltq-breadcrumbs li + li:before { content: "＞"; margin: 0 6px; color: #999; }
.ltq-breadcrumbs a { color: #0a6; text-decoration: none; }
.ltq-breadcrumbs a:hover { text-decoration: underline; }

.expert-consultation {
  display: flex;
  align-items: center;
  margin: 20px 0;
  padding: 15px;
  background-color: #f8f9fa;
  border-left: 4px solid #007bff;
}

.expert-icon {
  width: 50px;
  height: 50px;
  margin-right: 15px;
  border-radius: 50%;
}

.expert-consultation p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
}
#toc_container {
  min-height: 80px;
}
html, body {
    margin: 0 !important;
    padding: 0 !important;
}
/* =====================================================
   カスタム投稿カテゴリアーカイブ用CSS
   子テーマのstyle.cssに追加してください
   ===================================================== */

/* カテゴリ説明文 */
.category-description {
    background: #f9f9f9;
    border-left: 4px solid #f90;
    padding: 20px;
    margin-bottom: 30px;
    line-height: 1.8;
}

/* 子カテゴリ一覧 */
.child-categories {
    margin-bottom: 30px;
}

.child-categories h2 {
    font-size: 18px;
    border-bottom: 2px solid #f90;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.child-category-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.child-category-list li a {
    display: inline-block;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 20px;
    padding: 8px 16px;
    text-decoration: none;
    color: #333;
    font-size: 14px;
    transition: all 0.3s;
}

.child-category-list li a:hover {
    background: #f90;
    border-color: #f90;
    color: #fff;
}

.child-category-list .count {
    color: #999;
    font-size: 12px;
    margin-left: 4px;
}

/* 記事一覧グリッド */
.archive-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 40px;
}

/* カード */
.archive-card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: box-shadow 0.3s, transform 0.3s;
}

.archive-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    transform: translateY(-4px);
}

.archive-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* サムネイル */
.archive-card-thumb {
    position: relative;
    padding-top: 56.25%; /* 16:9 */
    overflow: hidden;
    background: #f0f0f0;
}

.archive-card-thumb img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.archive-card:hover .archive-card-thumb img {
    transform: scale(1.05);
}

.archive-card-thumb .no-thumb {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #999;
    font-size: 14px;
}

/* コンテンツ */
.archive-card-content {
    padding: 16px;
}

.archive-card-title {
    font-size: 16px;
    font-weight: bold;
    line-height: 1.5;
    margin: 0 0 10px;
    color: #333;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.archive-card:hover .archive-card-title {
    color: #f90;
}

.archive-card-excerpt {
    font-size: 13px;
    color: #666;
    line-height: 1.7;
    margin: 0 0 12px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.archive-card-meta {
    font-size: 12px;
    color: #999;
}

/* ページネーション */
.pagination {
    text-align: center;
    margin: 40px 0;
}

.pagination .nav-links {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.pagination a,
.pagination span {
    display: inline-block;
    padding: 8px 14px;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-decoration: none;
    color: #333;
    transition: all 0.3s;
}

.pagination a:hover {
    background: #f90;
    border-color: #f90;
    color: #fff;
}

.pagination .current {
    background: #f90;
    border-color: #f90;
    color: #fff;
}

/* タブレット対応 */
@media (max-width: 1024px) {
    .archive-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

/* スマホ対応 */
@media (max-width: 640px) {
    .archive-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .archive-card-content {
        padding: 12px;
    }
    
    .archive-card-title {
        font-size: 15px;
    }
    
    .child-category-list li a {
        padding: 6px 12px;
        font-size: 13px;
    }
}
/* =====================================================
   新着コラムセクション用CSS
   子テーマのstyle.cssに追加してください
   ===================================================== */

/* セクション全体 */
.latest-columns {
    margin: 40px 0;
    padding: 30px 20px;
    background: #f9f9f9;
    border-radius: 8px;
}

/* セクションタイトル */
.latest-columns-title {
    font-size: 22px;
    font-weight: bold;
    color: #333;
    margin: 0 0 20px;
    padding-bottom: 10px;
    border-bottom: 3px solid #f90;
}

/* カードグリッド */
.latest-columns-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

/* カード */
.latest-column-card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: box-shadow 0.3s, transform 0.3s;
}

.latest-column-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    transform: translateY(-3px);
}

.latest-column-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* サムネイル */
.latest-column-thumb {
    position: relative;
    padding-top: 60%;
    overflow: hidden;
    background: #eee;
}

.latest-column-thumb img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.latest-column-card:hover .latest-column-thumb img {
    transform: scale(1.05);
}

.latest-column-thumb .no-thumb {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #999;
    font-size: 12px;
}

/* コンテンツ */
.latest-column-content {
    padding: 12px;
}

.latest-column-card-title {
    font-size: 14px;
    font-weight: bold;
    line-height: 1.4;
    margin: 0 0 8px;
    color: #333;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.latest-column-card:hover .latest-column-card-title {
    color: #f90;
}

.latest-column-date {
    font-size: 12px;
    color: #999;
}

/* もっと見るリンク */
.latest-columns-more {
    text-align: center;
}

.latest-columns-more .more-link {
    display: inline-block;
    padding: 10px 30px;
    background: #f90;
    color: #fff;
    text-decoration: none;
    border-radius: 25px;
    font-weight: bold;
    transition: background 0.3s;
}

.latest-columns-more .more-link:hover {
    background: #e08000;
}

/* タブレット対応 */
@media (max-width: 1024px) {
    .latest-columns-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* スマホ対応 */
@media (max-width: 640px) {
    .latest-columns {
        padding: 20px 15px;
        margin: 30px 0;
    }
    
    .latest-columns-title {
        font-size: 18px;
    }
    
    .latest-columns-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    
    .latest-column-content {
        padding: 10px;
    }
    
    .latest-column-card-title {
        font-size: 13px;
    }
}
/* =====================================================
   新着コラムセクション用CSS
   子テーマのstyle.cssに追加してください
   ===================================================== */

/* セクション全体 */
.latest-columns {
    margin: 40px 0;
    padding: 30px 20px;
    background: #f9f9f9;
    border-radius: 8px;
}

/* セクションタイトル */
.latest-columns-title {
    font-size: 22px;
    font-weight: bold;
    color: #333;
    margin: 0 0 20px;
    padding-bottom: 10px;
    border-bottom: 3px solid #f90;
}

/* カードグリッド */
.latest-columns-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

/* カード */
.latest-column-card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: box-shadow 0.3s, transform 0.3s;
}

.latest-column-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    transform: translateY(-3px);
}

.latest-column-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* サムネイル */
.latest-column-thumb {
    position: relative;
    padding-top: 60%;
    overflow: hidden;
    background: #eee;
}

.latest-column-thumb img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.latest-column-card:hover .latest-column-thumb img {
    transform: scale(1.05);
}

.latest-column-thumb .no-thumb {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #999;
    font-size: 12px;
}

/* コンテンツ */
.latest-column-content {
    padding: 12px;
}

.latest-column-card-title {
    font-size: 14px;
    font-weight: bold;
    line-height: 1.4;
    margin: 0 0 8px;
    color: #333;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.latest-column-card:hover .latest-column-card-title {
    color: #f90;
}

.latest-column-date {
    font-size: 12px;
    color: #999;
}

/* もっと見るリンク */
.latest-columns-more {
    text-align: center;
}

.latest-columns-more .more-link {
    display: inline-block;
    padding: 10px 30px;
    background: #f90;
    color: #fff;
    text-decoration: none;
    border-radius: 25px;
    font-weight: bold;
    transition: background 0.3s;
}

.latest-columns-more .more-link:hover {
    background: #e08000;
}

/* タブレット対応 */
@media (max-width: 1024px) {
    .latest-columns-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* スマホ対応 */
@media (max-width: 640px) {
    .latest-columns {
        padding: 20px 15px;
        margin: 30px 0;
    }
    
    .latest-columns-title {
        font-size: 18px;
    }
    
    .latest-columns-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    
    .latest-column-content {
        padding: 10px;
    }
    
    .latest-column-card-title {
        font-size: 13px;
    }
}
/* =====================================================
   サイトTOP - お役立ちコラム 3カラムセクション
   子テーマのstyle.cssに追加してください
   ===================================================== */

/* セクション全体 */
.top-columns-section {
    margin: 40px 0;
    padding: 30px 20px;
    background: #f5f7fa;
    border-radius: 12px;
}

/* セクション見出し */
.top-columns-heading {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    color: #333;
    margin: 0 0 25px;
    padding-bottom: 15px;
    border-bottom: 3px solid #0066cc;
}

/* 3カラムグリッド */
.top-columns-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* 各ボックス */
.top-column-box {
    background: #fff;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* ボックスタイトル - サービス別カラー */
.top-column-box-title {
    font-size: 18px;
    font-weight: bold;
    margin: 0 0 15px;
    padding: 10px 15px;
    border-radius: 6px;
    text-align: center;
}

.top-column-box-title a {
    text-decoration: none;
    color: #fff;
}

/* 水道 - 青系 */
.top-column-box.water .top-column-box-title {
    background: linear-gradient(135deg, #0066cc, #0088ff);
}

/* 鍵 - オレンジ系 */
.top-column-box.key .top-column-box-title {
    background: linear-gradient(135deg, #cc6600, #ff9933);
}

/* ガラス - 緑系 */
.top-column-box.glass .top-column-box-title {
    background: linear-gradient(135deg, #339966, #44bb77);
}

/* 記事リスト */
.top-column-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.top-column-list li {
    border-bottom: 1px dashed #e0e0e0;
}

.top-column-list li:last-child {
    border-bottom: none;
}

.top-column-list li a {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 5px;
    text-decoration: none;
    color: #333;
    transition: background 0.2s;
}

.top-column-list li a:hover {
    background: #f9f9f9;
}

/* 日付 */
.top-column-date {
    flex-shrink: 0;
    font-size: 12px;
    color: #999;
    background: #f0f0f0;
    padding: 2px 8px;
    border-radius: 3px;
}

/* タイトル */
.top-column-title {
    font-size: 14px;
    line-height: 1.5;
    color: #333;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.top-column-list li a:hover .top-column-title {
    color: #0066cc;
}

/* もっと見るリンク */
.top-column-more {
    margin: 15px 0 0;
    text-align: right;
}

.top-column-more a {
    font-size: 14px;
    color: #0066cc;
    text-decoration: none;
    font-weight: bold;
}

.top-column-more a:hover {
    text-decoration: underline;
}

/* タブレット対応 */
@media (max-width: 1024px) {
    .top-columns-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
    }
    
    .top-column-box {
        padding: 15px;
    }
    
    .top-column-box-title {
        font-size: 16px;
        padding: 8px 12px;
    }
}

/* スマホ対応 */
@media (max-width: 768px) {
    .top-columns-section {
        padding: 20px 15px;
        margin: 30px 0;
    }
    
    .top-columns-heading {
        font-size: 20px;
        margin-bottom: 20px;
    }
    
    .top-columns-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .top-column-box {
        padding: 15px;
    }
    
    .top-column-list li a {
        padding: 10px 5px;
    }
    
    .top-column-title {
        font-size: 13px;
    }
}
/* =====================================================
   関連記事セクション用CSS
   子テーマのstyle.cssに追加してください
   ===================================================== */

/* セクション全体 */
.related-posts {
    margin: 50px 0 30px;
    padding: 30px 25px;
    background: #f9f9f9;
    border-radius: 10px;
}

/* セクションタイトル */
.related-posts-title {
    font-size: 22px;
    font-weight: bold;
    color: #333;
    margin: 0 0 25px;
    padding-bottom: 12px;
    border-bottom: 3px solid #0066cc;
}

/* カードグリッド - 3列 */
.related-posts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* カード */
.related-post-card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: box-shadow 0.3s, transform 0.3s;
}

.related-post-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    transform: translateY(-3px);
}

.related-post-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* サムネイル */
.related-post-thumb {
    position: relative;
    padding-top: 56.25%; /* 16:9 */
    overflow: hidden;
    background: #eee;
}

.related-post-thumb img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.related-post-card:hover .related-post-thumb img {
    transform: scale(1.05);
}

.related-post-thumb .no-thumb {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #999;
    font-size: 12px;
}

/* コンテンツ */
.related-post-content {
    padding: 15px;
}

.related-post-title {
    font-size: 14px;
    font-weight: bold;
    line-height: 1.5;
    margin: 0 0 10px;
    color: #333;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.related-post-card:hover .related-post-title {
    color: #0066cc;
}

.related-post-date {
    font-size: 12px;
    color: #999;
}

/* タブレット対応 */
@media (max-width: 1024px) {
    .related-posts-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
    }
    
    .related-post-content {
        padding: 12px;
    }
}

/* スマホ対応 */
@media (max-width: 768px) {
    .related-posts {
        margin: 40px 0 20px;
        padding: 20px 15px;
    }
    
    .related-posts-title {
        font-size: 18px;
        margin-bottom: 20px;
    }
    
    .related-posts-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    
    .related-post-content {
        padding: 10px;
    }
    
    .related-post-title {
        font-size: 13px;
    }
}

/* 超小型スマホ対応 */
@media (max-width: 480px) {
    .related-posts-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
}
/* ----------------------------------------
   CLS 改善：ヘッダーの揺れ対策
---------------------------------------- */
.header-area,
.site-header,
.top-header {
    min-height: 120px;
}

/* ロゴの読み込み時のズレ防止 */
.header-area .logo img {
    width: 240px;
    height: auto;
    display: block;
}

/* ----------------------------------------
   CLS 改善：メインスライダーの高さを確定
---------------------------------------- */
.main-slider,
.slider-area,
.hero-slider,
.top-slider {
    position: relative;
    min-height: 340px; /* 必要に応じて調整してOK */
    overflow: hidden;
}

.main-slider img,
.slider-area img,
.hero-slider img {
    width: 100%;
    height: auto;
    display: block;
}

/* ----------------------------------------
   CLS 改善：iframe（地図・YouTubeなど）の高さ固定
---------------------------------------- */
iframe {
    width: 100%;
    min-height: 350px;
    display: block;
}
/* 記事内画像のアスペクト比固定（例） */
.article-content img {
  width: 100%;
  height: auto;
  /* 元画像のアスペクト比に近ければこの aspect-ratio を指定 */
  aspect-ratio: 16 / 9; 
  display: block;
}

/* 埋め込み iframe（地図・動画など）の高さ固定 */
.article-content iframe,
.article-content .embed,
.article-content .oembed {
  width: 100%;
  min-height: 360px;
  display: block;
}

/* lazy-loading 対象画像でファーストビューのものは除外 */
img.no-lazy {
  loading: auto !important;
}