/*
Theme Name: water-theme
Description: 独自DB接続専用の超シンプルテーマ
Version: 1.0
*/

/* --- 1. 全体レイアウト（共通） --- */

.content-container {
    max-width: 1100px; /* 1000pxから変更 */
    margin: 0 auto;
    padding: 30px 20px 40px;
    
    /* 💡 事故を防ぐための追加要素 */
    width: 100%;            /* 親（画面）の幅いっぱいに広がる許可 */
    box-sizing: border-box; /* paddingを含めて「最大幅」に収める（これがないとはみ出す） */
    clear: both;            /* 前の要素の回り込みを解除して、重なりを防ぐ */
}

/* 💡 ここに追加！PC版のトップページだけ余白を上書きします */
.home .content-container {
    padding-top: 60px !important; 
}


/* --- テーブルの基本デザイン（共通） --- */
table {
    width: 100%;
    border-collapse: collapse; /* 💡 線の重なりを1本にする */
    margin-bottom: 20px;
    font-size: 0.95em;
}

table th, table td {
    border: 1px solid #ddd; /* 💡 薄いグレーの線 */
    padding: 12px 15px;
    text-align: left;
}

table th {
    background-color: #f8f9fa; /* 💡 ヘッダーに薄い色をつける */
    font-weight: bold;
}



/* --- 2. パンくずリスト（共通） --- */
.breadcrumb {
    max-width: 1000px;
    margin: 0 auto 30px;
    padding: 20px 20px 0;
    font-size: 0.9em;
    color: #666;
}

.breadcrumb a {
    color: #666 !important;
    text-decoration: none;
}


.red-text{
    color:red;
    font-weight: bolder;
}


/* --- 蛍光ペン風の装飾（共通） --- */
.mark {
    background: linear-gradient(transparent 60%, #99C9FF 60%); /* 💡 下半分を黄色にする */
    font-weight: bold; /* 💡 太字にするとより目立ちます */
    padding: 0 2px;    /* 💡 文字の左右に少しだけ余白 */
}

/* 別の色（ピンク）も使いたい場合はこちら */
.mark-p {
    background: linear-gradient(transparent 60%, #ffc0cb 60%);
    font-weight: bold;
    padding: 0 2px;
}


html { scroll-behavior: smooth; }


/* --- 4. 汎用パーツ（動画・キャンペーン） --- */
.video-container {
    position: relative; width: 100%; clear: both;
    padding-bottom: 56.25%; height: 0; overflow: hidden;
    margin: 20px 0 30px; border-radius: 8px;
}
.video-container iframe {
    position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; border: 0;
}
.campaign-unit .ranking-item {
    border: 3px solid #e02424 !important; border-top: none !important;
    border-radius: 0 0 12px 12px !important; box-shadow: 0 10px 20px rgba(0,0,0,0.05) !important;
}
.page-template-page-campaign .rank-header {
    background: #fff !important; padding-top: 5px !important;
}


/* --- 番号付きリスト --- */

.list-2 {
    list-style-type: none;
    padding: 1em;
    border: 2px solid #2589d0;
    counter-reset: li;
}

.list-2 li {
    display: flex;
    align-items: center;
    padding: .3em;
}

.list-2 li::before {
    display: inline-block;
    min-width: 1.7em;
    margin-right: 5px;
    border-radius: 50%;
    background-color: #2589d0;
    color: #fff;
    font-weight: bold;
    font-size: .75em;
    line-height: 1.7em;
    text-align: center;
    content: counter(li);
    counter-increment: li;
}




/* --- 中黒リスト --- */

.list-9 {
    list-style-type: disc;
    list-style-position: inside;
}

.list-9 li {
    padding: .5em;
}

.list-9 li:not(:last-child) {
    border-bottom: 1px dashed #2589d0;
}

.list-9 li::marker {
    color: #2589d0;
    font-size: 1.1em;
}


.highlight-text {
  font-size: 1.5em; /* 周囲より大きく設定 (1.5倍など) */
  font-weight: bold; /* 太字に設定 */
}


/* 画像キャプションのデザイン調整 */
.wp-element-caption 
.entry-content figure.wp-caption .wp-caption-text {
    font-size: 0.85rem;      /* 本文（1rem）より2段階ほど小さく */
    color: #64748b;         /* 落ち着いたグレー（Slateグレー） */
    line-height: 1.5;       /* 行間を少し詰めて注釈らしく */
    margin-top: 0.5em;      /* 画像との間隔を微調整 */
    text-align: center;     /* キャプションは中央寄せが一般的 */
    display: block;         /* 確実に改行させる */
}




/* --- 5. ニュース詳細・一覧ページ（archive-news.php 等）専用 --- */

/* パンくずの個別調整 */
.content-container .breadcrumb {
    padding-top: 20px;
    margin-bottom: 20px;
}

/* ページ見出しの装飾（直書き style の引っ越し） */
.content-container .page-header {
    margin-bottom: 40px;
}

.content-container .page-title {
    font-size: 24px;
    color: #333;
    border-bottom: 2px solid #0073aa;
    padding-bottom: 10px;
}

/* 記事本文内のスタイル（直書き style の引っ越し） */
.entry-header {
    margin-bottom: 30px;
}

.entry-title {
    font-size: 1.8em;
    border-bottom: 2px solid #0073aa;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.entry-content {
    line-height: 1.8;
    font-size: 1.05em;
}


.post-thumbnail {
    margin-bottom: 30px;
    text-align: center;
}

.post-thumbnail img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

/* ニュース一覧のリスト装飾 */
.news-list-wrapper ul {
    list-style: none;
    padding: 0;
}

.news-list-wrapper li {
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
}

.news-list-wrapper a {
    text-decoration: none;
    display: flex;
    align-items: baseline;
    gap: 15px;
}

.news-list-wrapper a span {
    color: #0073aa;
    font-weight: bold;
    line-height: 1.4;
}

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


/* 解約情報ページ等のカスタムテーブル */
.cancel-table {
    width: 100%;
    border-collapse: collapse;
    margin: 15px 0;
    font-size: 0.95em;
}

.cancel-table th, 
.cancel-table td {
    border: 1px solid #eee;
    padding: 10px;
    text-align: left;
}

.cancel-table th {
    background-color: #f8f9fa;
    font-weight: bold;
    color: #555;
}

/* リンクボタンのダイエット用クラス */
.service-detail-link {
    margin-top: 20px;
}

.service-detail-link a {
    color: #0073aa;
    font-size: 0.9em;
    text-decoration: none;
    font-weight: bold;
}

.service-detail-link a:hover {
    text-decoration: underline;
}





/* --- 6. サービス一覧ページ（archive-service.php） --- */

/* ページ見出しエリア */
.service-list-header h1 {
    font-size: 1.8em;
    border-bottom: 2px solid #0073aa;
    display: inline-block;
    padding-bottom: 10px;
    margin-bottom: 15px;
}
.filter-note {
    font-size: 0.85em;
    color: #888;
}

/* 該当件数表示 */
.service-count-badge {
    margin: 0 0 20px 5px;
    color: #64748b;
    font-size: 0.95em;
    font-weight: bold;
    border-left: 4px solid #0073aa;
    padding-left: 10px;
}

/* サービス一覧（グリッド） */
.service-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* サービスカード本体 */
.service-card {
    border: 1px solid #ddd;
    padding: 25px;
    border-radius: 12px;
    text-align: center;
    background: #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    transition: transform 0.3s, box-shadow 0.3s;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* カード内のテキスト・情報 */
.service-card h3 {
    margin-bottom: 15px;
    font-size: 1.3em;
    color: #333;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}
.service-info-list {
    text-align: left;
    margin-bottom: 20px;
    font-size: 0.9em;
}
.service-info-list .price-label {
    color: #666;
}
.service-info-list .price-value {
    color: #e11d48;
    font-weight: bold;
    font-size: 1.1em;
}
.water-type-tags {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-top: 10px;
}
.water-type-tag {
    font-size: 0.7em;
    background: #f1f5f9;
    padding: 2px 6px;
    border-radius: 3px;
    border: 1px solid #e2e8f0;
    color: #475569;
}

/* 詳細ボタン */
.btn-service-detail {
    display: block;
    background: #0073aa;
    color: #fff;
    padding: 12px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.9em;
}

/* 該当なしメッセージ */
.no-service-msg {
    text-align: center;
    padding: 50px;
    background: #f9f9f9;
    border-radius: 12px;
    grid-column: 1 / -1;
    color: #666;
}


/* --- 7. サービス詳細ページ (single-service.php) --- */

/* ヘッダー・タイトル */
.service-detail .entry-title {
    font-size: 1.8em;
    border-bottom: 2px solid #0073aa;
    padding-bottom: 10px;
}

/* メイン画像 */
.service-main-image {
    margin-bottom: 30px;
    text-align: center;
}
.service-main-image img {
    max-width: 800px;
    width: 100%;
    height: auto;
    border: 1px solid #eee;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

/* 要約ボックス */
.summary-content {
    background: #f9f9f9;
    padding: 25px;
    border-radius: 8px;
    border-left: 5px solid #ccc;
    margin-bottom: 25px;
}
.summary-content p {
    font-size: 1.1em;
    color: #333;
    line-height: 1.8;
    margin: 0;
}

/* キャンペーンボックス */
.campaign-card {
    background: #fff5f5;
    border: 2px dashed #e02424;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 30px;
}
.campaign-card h2 {
    color: #e02424;
    margin-top: 0;
    font-size: 1.2em;
}
.campaign-expire-text {
    text-align: right;
    font-size: 0.85em;
    color: #666;
    margin-bottom: 0;
}

/* 見出しの共通デザイン */
.service-section-title {
    background: #f1f1f1;
    padding: 10px 15px;
    border-left: 5px solid #0073aa;
    margin: 60px 0 30px;
}

/* 機種カード */
.model-card {
    border: 1px solid #ddd;
    padding: 20px;
    margin-bottom: 50px;
    background: #fff;
    border-radius: 10px;
    position: relative;
}
.water-type-badge {
    position: absolute;
    top: -15px;
    right: 20px;
    background: #fff;
    border: 2px solid #0073aa;
    color: #0073aa;
    padding: 2px 15px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 0.9em;
    z-index: 1;
}

/* 対応エリア・アコーディオン */
.area-details {
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background: #fff;
}
.area-summary {
    padding: 15px;
    cursor: pointer;
    font-weight: bold;
    background: #f8f8f8;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.area-city-count {
    font-size: 0.85em;
    color: #0073aa;
    background: #eef2f6;
    padding: 2px 10px;
    border-radius: 12px;
}
.area-city-list {
    list-style: none;
    padding: 15px;
    border-top: 1px solid #eee;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
}
.area-city-list li a {
    display: block;
    padding: 6px 14px;
    background: #fff;
    border: 1px solid #0073aa;
    border-radius: 4px;
    text-decoration: none;
    color: #0073aa;
    font-size: 0.85em;
    font-weight: bold;
}


/* --- 機種ラインナップ（詳細スペック）設定 --- */

/* 1. PC・共通設定（ベースのデザイン） */
.model-flex-container { display: flex; gap: 25px; align-items: flex-start; margin-top: 10px; }
.model-image-wrapper { flex: 0 0 250px; width: 250px; text-align: center; }
.model-img-inner { height: 280px; display: flex; align-items: center; justify-content: center; background: #fff; border-radius: 8px; overflow: hidden; }
.model-img { max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain; }
.model-spec-wrapper { flex: 1; min-width: 0; }
.spec-table-style { width: 100%; border-collapse: collapse; font-size: 0.95em; table-layout: fixed; }
.spec-table-style th { text-align: left; padding: 12px; background: #f9f9f9; width: 35%; border: 1px solid #eee; }
.spec-table-style td { padding: 12px; border: 1px solid #eee; word-break: break-all; }
.price-red { color: #e02424; font-weight: bold; font-size: 1.1em; }
.price-sub { color: #666; font-size: 0.85em; }
.affiliate-btn { display: inline-block; background: #e02424; color: #fff; padding: 12px 35px; border-radius: 5px; text-decoration: none; font-weight: bold; box-shadow: 0 4px 0 #b91c1c; }
.affiliate-btn-wrapper { text-align: right; margin-top: 20px; }
.detail-toggle-btn { padding: 5px 15px; border: 1px solid #ccc; background: #f9f9f9; border-radius: 4px; cursor: pointer; font-size: 0.8em; color: #666; }

/* 2. SP用設定（画面幅が狭い時だけ上書き） */
@media screen and (max-width: 768px) {
    .model-flex-container { display: block; }
    .model-image-wrapper { width: 100%; margin-bottom: 15px; }
    .model-img-inner { height: 220px; }
    .spec-table-style th { width: 40%; }
    .affiliate-btn { width: 100%; text-align: center; box-sizing: border-box; }
}


/* --- 8. トップページ (index.php) --- */
.site-hero {
    margin-bottom: 60px;
    text-align: center;
}
.site-hero h1 {
    font-size: 2em;
    color: #333;
    margin-bottom: 20px;
}
.site-hero p {
    font-size: 1.1em;
    color: #666;
    line-height: 1.8;
}

/* サービスナビゲーション共通 */
.section-title-water {
    font-size: 1.5em;
    border-bottom: 2px solid #0073aa;
    padding-bottom: 10px;
    margin-bottom: 30px;
}
.section-title-news {
    font-size: 1.5em;
    border-bottom: 2px solid #e67e22;
    padding-bottom: 10px;
    margin-bottom: 30px;
}

/* サービスグリッド */
.service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    margin-bottom: 60px;
}

/* サービスカード共通 */
.service-card {
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 25px;
    transition: 0.3s;
    background: #fff;
}
.service-card h3 {
    margin-top: 0;
    color: #0073aa;
}
.service-card p {
    font-size: 0.9em;
    color: #555;
    line-height: 1.6;
}
.service-card .btn-more {
    display: inline-block;
    margin-top: 15px;
    color: #fff;
    background: #0073aa;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
}

/* 準備中カード */
.service-card.is-preparing {
    background: #fafafa;
    opacity: 0.8;
}
.service-card.is-preparing h3 {
    color: #666;
}
.service-card.is-preparing p {
    color: #777;
}

/* ホバーエフェクト（ここも移設） */
.service-card:hover {
    border-color: #0073aa;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

/* 最新情報エリア */
.news-empty-msg {
    color: #999;
    text-align: center;
    padding: 20px;
}

/* SP用調整 */
@media screen and (max-width: 768px) {
    .site-hero h1 { font-size: 1.6em; }
    .service-grid { grid-template-columns: 1fr; }
}


/* --- 9. ウォーターサーバーTOP (page-water-top.php) --- */

/* タイトルエリア（MV） */
.water-top-mv {
    text-align: center;
    margin-bottom: 60px;
    padding: 60px 20px;
    background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 100%);
    border-radius: 12px;
}
.water-top-mv h1 {
    font-size: 2.2em;
    color: #004e89;
    margin-bottom: 20px;
    line-height: 1.4;
}

/* ランキングコンテナ & カード */
.ranking-container {
    display: flex;
    gap: 25px;
    flex-wrap: wrap;
    justify-content: center;
}
.rank-card {
    flex: 1;
    min-width: 300px;
    max-width: 320px;
}

/* 共通セクションの見出し */
.comparison-section h2, .knowledge-section h2 {
    text-align: center;
    font-size: 1.8em;
    margin-bottom: 40px;
}

/* 知識グリッド */
.knowledge-grid {
    display: grid;
    gap: 30px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.knowledge-grid > div {
    background: #fff;
    padding: 25px;
    border-radius: 15px;
    border-left: 5px solid #0073aa;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}


/* エリアナビバナーの構造整理 */
.area-navigation-banner a {
    display: flex; /* 💡 これで横並びになります */
    align-items: center;
    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
    padding: 20px;
    border-radius: 12px;
    text-decoration: none;
    color: #fff;
}

.banner-icon { font-size: 2em; margin-right: 15px; }
.banner-text { flex-grow: 1; }
.banner-text h2 { margin: 0; font-size: 1.2em; color: #fff; border: none; }
.banner-text p { margin: 5px 0 0; font-size: 0.9em; opacity: 0.9; }
.banner-arrow { font-size: 1.2em; margin-left: 10px; }



/* --- 11. 解約方法ページ (page-water-cancellation.php) --- */
.cancellation-filters {
    background: #f8fafc;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 40px;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: center;
}

.sort-link {
    font-size: 0.9em;
    text-decoration: none;
    padding: 8px 12px;
    border-radius: 5px;
    transition: 0.2s;
}

.sort-link.active {
    background: #0073aa;
    color: #fff !important;
}

.sort-link.inactive {
    background: #fff;
    border: 1px solid #cbd5e1;
    color: #64748b !important;
}

.fee-badge-red {
    background: #fdf2f2;
    padding: 10px 15px;
    border-radius: 5px;
    margin-bottom: 15px;
    display: inline-block;
    font-weight: bold;
    color: #e11d48;
}


/* --- 著者プロフィールパーツ --- */
.author-profile-box {
    margin: 40px 0 0;
    padding: 25px;
    background: #f8fafc; /* 清潔感のある薄いブルーグレー */
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    position: relative;
    box-sizing: border-box; /* ガードレールと連動 */
}

/* 「この記事を書いた人」のラベル */
.author-label {
    position: absolute;
    top: -12px;
    left: 20px;
    background: #0073aa;
    color: #fff;
    font-size: 0.75em;
    font-weight: bold;
    padding: 2px 12px;
    border-radius: 20px;
}

.author-flex {
    display: flex;
    gap: 20px;
    align-items: center;
}

.author-image img {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    object-fit: cover;
}

.author-name {
    margin: 0 0 8px 0;
    font-weight: bold;
    font-size: 1.1em;
    color: #334155;
}

.author-description {
    margin: 0;
    font-size: 0.85em;
    line-height: 1.6;
    color: #64748b;
}

/* スマホ表示 */
@media screen and (max-width: 768px) {
    .author-flex {
        flex-direction: column;
        text-align: center;
    }
    .author-image {
        margin-bottom: 5px;
    }
}


/* 💡 これだけでOKです。無理な広がりを防ぎ、左詰め（以前の形）を維持します */
.area-links-container {
    width: 100%;
}
/* もしボタンが寄りすぎていると感じる場合のみ、以下で調整してください（基本は不要です） */
.area-links-container ul {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* ボタン同士の適切な隙間 */
    justify-content: flex-start; /* ← これが「左詰め」の指定です。これで村々が変に広がりません */
}


/* 💡 [新設] これを共通のコンテナにします */
.view-content-wrapper {
    width: 100%;
    max-width: 1100px; /* ここがサイトの本文最大幅です */
    margin: 0 auto;
    padding: 0 15px;
    box-sizing: border-box;
}

/* 💡 パーツ同士の隙間を一定（40px）に固定し、重なりを排除します */
.view-parts-spacer {
    margin-top: 40px !important;
    margin-bottom: 0 !important;
}



/* FAQの回答文（A）の中にあるリンクをおしゃれなタグ風にする */
details div p a {
    display: inline-block;
    background: #eff6ff;     /* 爽やかな薄い青背景 */
    color: #3b82f6 !important; /* 文字色はハッキリした青 */
    padding: 2px 12px;       /* 左右に少し余裕を持たせる */
    margin: 2px 4px;         /* リンク同士がくっつかないように余白 */
    border-radius: 6px;      /* 角を少し丸める */
    border: 1px solid #bfdbfe; /* 薄い青の枠線 */
    text-decoration: none !important; /* 下線を消す */
    font-size: 0.9em;        /* 本文よりわずかに小さくして馴染ませる */
    font-weight: bold;
    transition: all 0.2s ease-in-out;
    vertical-align: middle;
}

/* ホバー（マウスを乗せた時）の演出 */
details div p a:hover {
    background: #3b82f6;     /* 背景を濃い青に */
    color: #ffffff !important; /* 文字を白に */
    border-color: #2563eb;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3); /* 浮かび上がる影 */
    transform: translateY(-1px); /* 1ピクセルだけ上に動かす */
}


/* 星評価の外枠 */
.star-rating-v7 {
    display: inline-flex;
    position: relative;
    font-size: 16px; /* スショに合わせて調整 */
    letter-spacing: 1px;
    line-height: 1;
    color: #ccc; /* 下層（空）の星の色 */
    user-select: none;
}

/* 下層：グレーの星 5つ */
.star-rating-v7::before {
    content: "★★★★★";
}

/* 上層：黄色の星（可変バー） */
.star-rating-v7 .star-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    overflow: hidden;
    white-space: nowrap;
    color: #ffb400; /* 黄色の星の色 */
}

/* 上層に表示する星 5つ */
.star-rating-v7 .star-bar::before {
    content: "★★★★★";
}


/* 1. ヒーロー・メインタイトルエリア */
.water-hero-header {
    background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 100%);
    padding: 60px 40px;
    border-radius: 20px;
    margin-bottom: 40px;
    text-align: center;
}
.water-hero-title {
    font-size: 2.2em;
    color: #0369a1;
    margin-bottom: 20px;
    font-weight: bold;
}
.water-hero-text {
    font-size: 1.1em;
    color: #475569;
    line-height: 1.8;
    max-width: 800px;
    margin: 0 auto;
}

/* 2. 紹介文・アドバイスボックス（グレー背景） */
.water-info-box {
    background-color: #fdfdfd;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 40px;
    line-height: 1.8;
    color: #444;
}
/* 月間アドバイス用の影付き */
.water-info-box.has-shadow {
    background-color: #f8fafc;
    border-color: #e2e8f0;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}

/* 3. 特徴・種類別のグリッドカード */
.water-type-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 60px;
}
.water-type-card {
    background: #fff;
    padding: 25px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}
.water-type-card h3 { font-size: 1.2em; margin-bottom: 15px; }
.water-type-card.natural  { border-top: 5px solid #3b82f6; }
.water-type-card.ro       { border-top: 5px solid #06b6d4; }
.water-type-card.purifier { border-top: 5px solid #10b981; }

/* 4. セクション見出し（中央寄せ） */
.water-section-title-center {
    text-align: center;
    color: #1e293b;
    margin-bottom: 30px;
}

/* 5. SP時の微調整（既存のメディアクエリ内に追加） */
@media screen and (max-width: 768px) {
    .water-hero-header { padding: 40px 20px !important; }
    .water-hero-title { font-size: 1.5em !important; }
    .water-hero-text { font-size: 0.95em !important; }
}


/* --- 時代はSP。ここの値をいじるときは慎重に --- */
/* --- 10. スマホ・タブレット表示専用（768px以下に統合） --- */
/* 💡 これ以下がスマホ用の全設定です。二重管理を防ぐためこの1ブロックに集約します */
/* --- [2026-01-14] 全ページの横揺れ・ズレを物理的に封印するガードレール --- */
@media screen and (max-width: 768px) {
    /* 1. ページ全体の横スクロールを根本から断つ */
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
        position: relative;
        margin: 0;
        padding: 0;
    }

  /* 💡 1. 共通の箱（全体）の設定 */
#wrapper,
#primary,
.site-main,
article,
.feature-detail-page {
    width: 100%;
    box-sizing: border-box;
}

    /* 3. 中身の「テーブル」が勝手に広がるのを防ぐ */
    table {
        table-layout: fixed !important;
        width: 100% !important;
        word-break: break-all;
    }

    /* 4. 画像が画面を突き破るのを防ぐ */
    img {
        max-width: 100% !important;
        height: auto !important;
    }


    #wrapper, .site-main {
        overflow-x: hidden;
        width: 100%;
    }

    /* 左右の余白を 15px で固定（box-sizingで突き抜け防止） */
.content-container {
    width: 100%;
    max-width: 1100px !important; /* ここで 1100px を絶対死守 */
    margin: 0 auto !important;
    padding: 20px 15px !important; 
    box-sizing: border-box !important;
    overflow: visible; /* hiddenを解除して予期せぬカットを防ぐ */
}

    /* 全要素のサイズ計算を「枠線込み」に統一 */
    *, *::before, *::after {
        box-sizing: border-box !important;
    }

    /* 2. レイアウト順序の強制固定（ナビ > パンくず > メイン） */
/* --- 修正後のCSS --- */

/* 1. 全体共通の順番指定 */
#wrapper { display: flex !important; flex-direction: column !important; }
#wrapper > * { order: 99; }
header, nav, .water-global-nav { order: 1 !important; margin-bottom: 0 !important; }

.breadcrumb { 
    order: 2 !important; /* ナビの次にする */
    margin-top: 0 !important;
    padding-top: 15px !important;
    padding-bottom: 10px !important;
}

/* 💡 修正：トップページ(.home)以外だけ、マージンをゼロにする */
body:not(.home) #primary, 
body:not(.home) .content-container { 
    order: 3 !important; 
    margin-top: 0 !important;
}

/* 💡 トップページの場合は、順番だけ指定してマージンは自由にする */
.home #primary, 
.home .content-container {
    order: 3 !important;
    padding-top: 60px !important; /* ← ここに書くのが一番強いです */
    margin-top: 0 !important;
}

/* 2. スマホ専用の調整 */
    .breadcrumb {
        margin: 0 auto !important;
        padding: 10px 15px !important;
        display: block !important;
        width: 100% !important;
    }
    
    /* 💡 修正：トップページ(.home)以外の時だけ、上の余白をゼロにする */
    body:not(.home) #primary, 
    body:not(.home) .content-container,
    body:not(.home) .site-main {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    main, article, .content-container { order: 3 !important; }

    /* 3. ウォーターサーバーTOP専用の調整 */
    .water-top-mv { padding: 30px 15px; }
    .water-top-mv h1 { font-size: 1.4em !important; line-height: 1.4; word-break: break-all; }
    .water-top-mv h1 br { display: none; }

    .ranking-container { display: block !important; }
    .rank-card {
        min-width: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        margin-bottom: 25px !important;
    }

 

/*　SPのテーブル設定 */
/* --- 最終安定版テーブルCSS --- */
/* 1. 外枠：ここをスクロールの基準にする（親要素） */
.table-scroll, 
table.table-scroll, 
table.cancel-table,
table[style*="table-scroll"] {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important; /* 💡 スクロールをここで強制 */
    overflow-y: hidden !important;
    margin-bottom: 30px !important;
    -webkit-overflow-scrolling: touch;
    border: none !important;
}

/* 2. テーブル本体：セルの結合があっても絶対に縮ませない */
.table-scroll table,
table.table-scroll {
    display: table !important;
    width: auto !important;
    /* 💡 画面幅に関わらず、中身の「最大幅」を維持させる */
    min-width: max-content !important; 
    border-collapse: collapse !important;
    border: 1px solid #eee !important;
    border-radius: 8px;
    table-layout: auto !important;
}

/* 3. 案内バー：スクロールしても画面内に固定する */
.table-scroll.is-scrollable::before,
table.table-scroll.is-scrollable::before {
    content: "◀ 左右にスライドして確認 ▶";
    display: block;
    position: sticky; /* 💡 横スクロールしても常に左端に固定 */
    left: 0;
    width: 100%;
    z-index: 10;
    
    text-align: center;
    font-size: 11px;
    font-weight: bold;
    background: #004e89;
    color: #fff;
    padding: 5px 0;
}

/* 4. セル設定：1行表示を物理的に固定 */
.table-scroll th, .table-scroll td {
    padding: 10px 15px !important;
    border: 1px solid #eee !important;
    white-space: nowrap !important; /* 💡 重なり防止の生命線 */
}

/* ヘッダー背景 */
.table-scroll tr:first-child th {
    background: #e0f2fe !important;
    color: #004e89 !important;
}





/* --- SP用のフォントサイズ微調整 --- */

    /* 記事タイトル（ニュース一覧や詳細の大きなタイトル） */
    .entry-title {
        font-size: 1.2em !important; /* 1.8emから縮小 */
    }

    /* 記事本文エリア全体のベースサイズ */
    .entry-content {
        font-size: 0.85em !important; /* 1.05emから縮小 */
        line-height: 1.6 !important;  /* 行間を少し詰めて読みやすく */
    }

/* --- キャンペーンページ専用：SPフォントサイズ微調整 --- */
.cp-h1 {
        font-size: 1.4em !important; /* 1.8emから縮小。地図ページ等とバランスを合わせます */
        line-height: 1.3;
        margin-top: 10px;
    }

    /* ニュース内の見出し（h2） */
    .site-main .entry-content h2 {
        font-size: 1.05em !important; /* 1.5emから縮小 */
        padding: 8px 12px !important;
        margin: 30px 0 15px !important;
    }

    /* ニュース内の見出し（h3） */
    .site-main .entry-content h3 {
        font-size: 0.95em !important; /* 1.3emから縮小 */
        margin: 25px 0 10px !important;
    }

    /* リスト（li）のサイズも連動させる */
    .entry-content li {
        font-size: 0.9em !important;
    }




    /* 5. 知識グリッド・ボタン調整 */
    .knowledge-grid { display: block !important; }
    .knowledge-grid > div { margin-bottom: 20px; }

    .area-service-buttons { display: flex !important; flex-direction: column !important; gap: 8px !important; }
    .area-service-buttons a { width: 100% !important; margin: 0 !important; }



    /* 1. サマリーボックス自体の下の余白を削る */
    .service-summary-box {
        margin-bottom: 10px !important; /* 元々大きければここを調整 */
    }

    /* 2. キャンペーンボックスの上の余白を削る */
    .service-campaign-box {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /* 3. 本文エリアの自動的な余白（wpautop等）を調整 */
    .summary-content p {
        margin-bottom: 0 !important;
    }


} /* ← これが @media の閉じ */
/* --- SPメディアクエリ終了 --- */



/* 💡 新しいID "primary-home" に対して余白を強制する */
#primary-home {
    padding-top: 30px !important;
    margin-top: 10px !important;
}

/* スマホ時のみ少し調整したい場合はこちら */
@media screen and (max-width: 768px) {
    #primary-home {
        padding-top: 20px !important;
        margin-top: 0 !important;
    }
}


/* 💡 これが最終最強版の蛍光ペン設定です */
:where(p, li) code, 
article code, 
.entry-content code {
    background: linear-gradient(transparent 60%, #fff33f 60%) !important; 
    background-color: transparent !important; /* 背景色を強制クリア */
    font-family: inherit !important;
    color: #333 !important;
    font-weight: bold !important;
    padding: 0 4px !important;
    border: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
    display: inline !important;
}



/* --- エリア比較表 CSS完全版 --- */

.area-comp-main-title {
    font-size: 1.5em;
    color: #333;
    border-bottom: 2px solid #0073aa;
    padding-bottom: 10px;
    margin: 40px 0 20px;
    text-align: left;
}

.comparison-wrapper {
    overflow-x: auto; /* 💡 これが SP の table-scroll と同じ役割をします */
    -webkit-overflow-scrolling: touch;
    margin-bottom: 30px;
}

.comparison-table {
    width: 100%;
    table-layout: fixed; /* 💡 これで指定した幅を「絶対」にします */
    border-collapse: collapse;
    background: #fff;
    min-width: 650px; /* 💡 スマホでスクロールさせるための最低幅 */
}

.comparison-table th, 
.comparison-table td {
    border: 1px solid #eee;
    padding: 12px 5px;
    vertical-align: middle;
    text-align: center;
    height: auto !important;
}

/* 💡 カラム幅の比率設定（全ての表で共通） */
.col-rank  { width: 55px; }
.col-name  { width: 23%; }
.col-price { width: 15%; }
.col-term  { width: 18%; }
.col-last  { width: auto; } /* 残りの幅を5列目にあてる */

.comp-name {
    text-align: left !important;
    padding-left: 10px !important;
}

/* 💡 ランキングバッジの復活と中央配置 */
.comp-rank-td {
    text-align: center !important;
}

.rank-badge-s {
    display: inline-flex !important; /* 💡 再表示 */
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: #fff !important;
    font-weight: bold;
    font-size: 14px;
}
.rank-1 { background: #eab308 !important; }
.rank-2 { background: #94a3b8 !important; }
.rank-3 { background: #92400e !important; }

/* スマホでのフォント調整 */
@media screen and (max-width: 768px) {
    .comparison-table {
        font-size: 0.9em;
    }
}


/* ==========================================
   診断クイズ：統合・整理済みスタイル（完成版）
   ========================================== */

/* 1. 外枠・全体設定 */
.quiz-outer {
    background: #fff;
    max-width: 850px;
    margin: 40px auto;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0,0,0,0.08);
    min-height: 500px; /* 💡 質問エリアの高さをある程度確保しておく */
}

/* 2. 表紙（ヒーローエリア） */
.quiz-hero {
    background: #f0f9ff;
    padding: 60px 20px;
    text-align: center;
    border-bottom: 2px solid #e0f2fe;
}

.hero-badge {
    display: inline-block;
    background: #0ea5e9;
    color: #fff;
    padding: 4px 15px;
    border-radius: 20px;
    font-size: 0.9em;
    font-weight: bold;
    margin-bottom: 15px;
}

.hero-title {
    font-size: 2em;
    color: #0369a1;
    line-height: 1.4;
    margin: 0;
}

/* 3. 診断中のステップ設定 */
.quiz-step {
    padding: 40px 30px;
    animation: fadeIn 0.4s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 質問文：下線を引いて独立させる */
.quiz-question {
    font-size: 1.4em;
    font-weight: bold;
    color: #0f172a;
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 3px solid #f0f9ff;
    text-align: left;
}

/* 選択肢ボックス：左詰めのインデント */
.quiz-options {
    padding-left: 20px;
    text-align: left;
}

/* 選択肢ボタン：見た目をカード風に修正 */
.quiz-btn {
    display: block; /* 縦に並べる */
    width: 100%;
    max-width: 650px;
    margin-bottom: 15px; /* ボタン同士の隙間 */
    padding: 18px 20px 18px 45px; /* 左側にアイコン分を空ける */
    text-align: left;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    font-size: 1.1em;
    font-weight: bold;
    color: #475569;
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease;
}

/* マウスオーバー時：文字が消えないように固定 */
.quiz-btn:hover {
    border-color: #0ea5e9;
    background: #f0f9ff;
    color: #0ea5e9 !important;
}

/* 選択肢の前のポッチ（青い丸） */
.quiz-btn::before {
    content: "";
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    background: #0ea5e9;
    border-radius: 50%;
}

/* 開始ボタン専用（オレンジ） */
.start-btn {
    background: #f97316 !important;
    color: #fff !important;
    border: none !important;
    text-align: center !important;
    padding-left: 20px !important;
    font-size: 1.3em !important;
    box-shadow: 0 4px 15px rgba(249, 115, 22, 0.3);
}
.start-btn::before { display: none; } /* 開始ボタンにはポッチを出さない */

/* 4. 結果表示エリア */

/* 概要文（赤枠箇所）のマージン調整 */
.result-summary {
    margin-bottom: 45px !important; /* 💡 カードとの距離をしっかり空ける */
    line-height: 1.8;
    background: #f8fafc;
    padding: 20px 25px;
    border-radius: 12px;
    border-left: 6px solid #0ea5e9;
    text-align: left;
}

.result-summary strong {
    color: #0ea5e9;
    font-size: 1.2em;
}

/* 結果カード本体 */
.result-card {
    margin-bottom: 35px;
    border-radius: 15px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.priority-card { border: 2px solid #f59e0b; background: #fffbeb; }

/* ラベル設定 */
.card-label {
    padding: 12px 20px;
    font-size: 1.1em;
    font-weight: bold;
    letter-spacing: 0.05em;
}
.priority-card .card-label { background: #f59e0b; color: #fff; }
.sub-card .card-label { background: #f1f5f9; color: #64748b; }

/* カード内部（PC横並び） */
.card-inner {
    display: flex;
    padding: 30px;
    align-items: center;
    gap: 30px;
}

.card-img-box { width: 200px; flex-shrink: 0; }
.card-img-box img { width: 100%; border-radius: 10px; border: 1px solid #f1f5f9; }

.card-info-box { flex: 1; text-align: left; }
.result-service-title {
    font-size: 1.8em !important;
    font-weight: 900 !important;
    color: #0f172a;
    margin: 0 0 12px 0;
    display: block;
}

.card-summary { font-size: 1em; color: #475569; line-height: 1.7; }
.card-summary strong { color: #e11d48; font-weight: bold; }

.card-action-box { width: 220px; flex-shrink: 0; }

.card-btn.btn {
    display: block;
    width: 100%;
    padding: 18px 10px !important;
    background: #f97316;
    color: #fff !important;
    border-radius: 8px;
    font-size: 1.1em !important;
    font-weight: bold;
    text-align: center;
    box-shadow: 0 4px 0 #c2410c;
    transition: all 0.2s;
}

/* 5. 📱 スマートフォン最適化 */
@media (max-width: 767px) {
    .quiz-step { padding: 30px 15px; }
    .quiz-options { padding-left: 0; }
    .quiz-btn { padding-left: 40px; font-size: 1em; }
    
    .card-inner { flex-direction: column; text-align: center; gap: 20px; }
    .card-img-box { max-width: 220px; }
    .card-info-box { text-align: center; }
    .result-service-title { font-size: 1.5em !important; }
    .card-action-box { width: 100%; }
}

/* 6. その他ボタン */
.quiz-retry-btn {
    margin: 50px auto;
    display: block;
    background: #64748b;
    color: #fff;
    border: none;
    padding: 12px 25px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
}


/* --- 最終決戦：入れ子構造を考慮した中央寄せ --- */

/* 1. 一番外側の div を中央揃えの土台にする */
.entry-content .wp-block-image {
    text-align: center !important;
    display: block !important;
    width: 100% !important;
    margin: 20px 0 !important;
}

/* 2. 中にある figure (aligncenter) を中央に寄せる */
.entry-content .wp-block-image figure.aligncenter {
    display: inline-block !important; /* blockではなくinline-blockにするのがコツ */
    margin-left: auto !important;
    margin-right: auto !important;
    width: auto !important; /* 指定幅（900px）に合わせる */
    text-align: left; /* 中のテキストやキャプションは左に戻す（必要なら） */
}

/* 3. 画像本体の余計なマージンを完全に殺す */
.entry-content .wp-block-image figure.aligncenter img {
    display: block !important;
    margin: 0 !important; /* 10px 0 などを完全に上書き */
    max-width: 100% !important;
    height: auto !important;
}


/* 💡 ニュース記事（post または news）の場合のみに限定する指定 */
.single-post .entry-content h2,
.single-news .entry-content h2 {
    background: #f1f1f1 !important;
    padding: 10px 15px !important;
    border-left: 5px solid #0073aa !important;
    margin: 40px 0 20px !important;
    font-size: 1.5em !important;
    color: #333 !important;
    border-bottom: none !important; /* キャンペーンの下線干渉を防ぐ */
}

/* 💡 キャンペーンボックス内の h2 を強制的にリセット（保険） */
.service-campaign-box h2 {
    background: none !important;
    padding: 0 !important;
    border-left: none !important;
    font-size: 1.2em !important;
    color: #e02424 !important; /* キャンペーンらしい赤色に戻す */
    margin-bottom: 15px !important;
}


.box-blue {
    position: relative;
    max-width: auto;
    margin: 20px 0px;
    padding: 1em 1.5em;
    background-color: #e0efff;
    color: #333;
}

.box-blue::after {
    position: absolute;
    top: 0;
    right: 0;
    border-width: 0 20px 20px 0;
    border-style: solid;
    border-color: #c0cfdf #fff;
    box-shadow: -1px 1px 1px rgb(0 0 0 / 5%);
    content: '';
}


/* --- 共通設定 --- */
.water-global-nav {
    background: #fff;
    border-bottom: 3px solid #2472e0ff;
    position: sticky;
    top: 0;
    z-index: 9999;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    width: 100%;
}

.nav-container {
    max-width: 1100px;
    margin: 0 auto;
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    height: 70px; /* PCの高さ */
    padding: 0 15px;
    box-sizing: border-box;
}

/* ロゴのスタイル */
.nav-logo {
    flex-shrink: 0;
}
.main-logo-img {
    height: 42px;
    width: auto;
    display: block;
    position: relative;
    top: -5px; /* PCでの縦位置調整 */
}

/* PCメニューのスタイル */
.nav-menu {
    display: flex !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.nav-menu li {
    border-left: 1px solid #eee;
    height: 70px; /* PC用の高さ */
}
.nav-menu a {
    display: flex;
    align-items: center;
    padding: 0 15px;
    height: 70px; /* PC用の高さ */
    color: #333;
    text-decoration: none;
    font-weight: bold;
    font-size: 13px;
    white-space: nowrap;
}

.nav-toggle, .nav-hamburger { display: none; }

/* --- スマホ(SP)レイアウト --- */
@media screen and (max-width: 950px) {
    .nav-container {
        height: 54px !important; /* スマホの器を低く固定 */
    }

    /* 1. ハンバーガーボタンの器を見えるように調整 */
    .nav-hamburger {
        display: flex !important; /* 非表示を解除 */
        padding: 0 15px !important;
        height: 54px !important;
        flex-direction: column;
        justify-content: center; /* 縦中央 */
        align-items: center;     /* 横中央 */
        order: 3;
        cursor: pointer;
        z-index: 10001;
    }

    /* 2. 消えてしまった「三本線の棒」を再定義 */
    .nav-hamburger span {
        display: block !important;
        width: 25px !important;
        height: 2px !important;
        background-color: #333 !important; /* 💡色をしっかり指定 */
        margin: 3px 0 !important;          /* 棒同士の隙間 */
        content: "";                       /* 念のため */
    }

    /* 💡 ここが重要：スマホメニュー項目の高さを強制リセット */
    .nav-menu {
        position: absolute;
        top: 57px; /* border-bottom分(3px)を考慮して54+3 */
        left: 0;
        width: 100%;
        background: #fff;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-out;
        flex-direction: column !important;
        z-index: 10000;
        box-shadow: 0 5px 10px rgba(0,0,0,0.1);
    }

    .nav-menu li {
        border: none !important;
        border-bottom: 1px solid #eee !important;
        width: 100%;
        height: auto !important; /* 70pxを打ち消し */
    }

    .nav-menu a {
        height: 50px !important; /* スマホでは50pxでコンパクトに */
        padding: 0 20px !important;
        font-size: 15px !important; /* スマホは少し大きくして押しやすく */
    }

    .nav-toggle:checked ~ .nav-menu {
        max-height: 500px;
    }

    .main-logo-img {
        height: 32px !important;
        top: 0 !important; /* スマホではPCの-5pxをリセット */
        margin-left: 0;
    }
}


/* --- 💡 今月の選定アドバイス専用 --- */
.monthly-advice-box {
    max-width: 900px;
    margin: 40px auto;
    padding: 25px;
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}

.advice-header {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.advice-header i {
    color: #3b82f6;
    font-size: 1.5em;
    margin-right: 12px;
}

.advice-title {
    font-weight: bold;
    font-size: 1.2em;
    color: #1e293b;
}

.advice-text {
    font-size: 1.05em;
    line-height: 1.7;
    color: #475569;
    margin: 0;
}

/* モバイルでの調整 */
@media screen and (max-width: 768px) {
    .monthly-advice-box {
        margin: 30px 15px;
        padding: 20px;
    }
}


/* お水の種類グリッド（親要素） */
.water-type-grid {
    display: grid;
    /* 画面幅に合わせて自動で1〜3列に並び替える指定（爆速・レスポンシブ対応） */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 60px;
}

/* カード共通の形 */
.water-type-card {
    background: #fff;
    padding: 25px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* 軽い影で高級感を出す */
}

/* カード内の見出し */
.water-type-card h3 {
    font-size: 1.25em;
    font-weight: bold;
    margin-bottom: 12px;
}

/* カード内のテキスト */
.water-type-card p {
    font-size: 0.95em;
    color: #64748b;
    line-height: 1.6;
    margin: 0;
}

/* --- カードごとのアクセント線（上部） --- */
.water-type-card.natural { border-top: 5px solid #3b82f6; }
.water-type-card.ro      { border-top: 5px solid #06b6d4; }
.water-type-card.purifier { border-top: 5px solid #10b981; }


/* --- 種類・機能から探すボタン --- */
.search-type-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}

.search-type-btn {
    display: block;
    padding: 15px;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    text-align: center;
    text-decoration: none;
    color: #334155;
    font-weight: bold;
    transition: background-color 0.2s ease; /* transitionもCSSで管理 */
}

/* JavaScript不要！CSSだけでホバーを制御 */
.search-type-btn:hover {
    background-color: #f1f5f9;
}

/* --- 人気メーカーカード --- */
.popular-maker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
}

.popular-maker-card {
    display: block;
    background: #fff;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    padding: 30px;
    text-decoration: none;
    color: inherit;
    text-align: center;
    transition: transform 0.3s ease, border-color 0.3s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

.popular-maker-card:hover {
    transform: translateY(-5px);
    border-color: #3b82f6;
}


/* メーカーロゴのコンテナ */
.maker-logo-wrapper {
    height: 100px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* メーカー名（タイトル） */
.maker-card-title {
    font-size: 1.2em;
    color: #0f172a;
    margin-bottom: 8px;
    font-weight: bold;
}

/* メーカー説明文 */
.maker-card-desc {
    font-size: 0.9em;
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 0;
}

/* 「詳しく見る」ボタン風パーツ */
.maker-card-link-btn {
    margin-top: 20px;
    color: #3b82f6;
    font-weight: bold;
    font-size: 0.9em;
    border: 1px solid #3b82f6;
    display: inline-block;
    padding: 5px 20px;
    border-radius: 20px;
}


/* --- キャンペーンセクション --- */
.campaign-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.campaign-item-card {
    background: #fff1f2;
    padding: 20px;
    border-radius: 12px;
    border: 1px dashed #fb7185;
    position: relative;
}

.campaign-tag {
    display: inline-block;
    background: #fb7185;
    color: #fff;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.8em;
    margin-bottom: 10px;
}

.campaign-content-text {
    font-size: 1.05em;
    color: #333;
    line-height: 1.4;
}

.campaign-link {
    display: block;
    margin-top: 15px;
    font-size: 0.9em;
    color: #fb7185;
    text-decoration: underline;
    font-weight: bold;
}

/* --- ニュースセクション --- */
.news-title-border {
    border-left: 5px solid #0369a1;
    padding-left: 15px;
    color: #1e293b;
}

.news-list-container {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
}

.news-list-item {
    display: block;
    padding: 15px 20px;
    border-bottom: 1px solid #f1f5f9;
    text-decoration: none;
    color: #334155;
    transition: background-color 0.2s ease;
}

.news-list-item:hover {
    background-color: #f8fafc;
}

.news-more-btn {
    display: block;
    text-align: center;
    padding: 15px;
    color: #0369a1;
    text-decoration: none;
    font-weight: bold;
    background: #f0f9ff;
}


/* --- FAQ セクション --- */
.faq-section-container {
    max-width: 900px;
    margin: 0 auto;
}

.faq-item {
    margin-bottom: 15px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
}

.faq-summary {
    padding: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    list-style: none;
    font-weight: bold;
    position: relative;
}
.faq-summary::-webkit-details-marker { display: none; }

.faq-q-prefix {
    color: #3b82f6;
    font-size: 1.4em;
    margin-right: 15px;
    flex-shrink: 0;
}

.faq-q-text {
    color: #1e293b;
    line-height: 1.4;
    padding-right: 30px;
}

/* 矢印アイコンをCSSで制御 */
.faq-icon {
    position: absolute;
    right: 20px;
    color: #94a3b8;
    transition: transform 0.3s;
}

/* detailsが開いている時、アイコンを回転させる */
.faq-item[open] .faq-icon {
    transform: rotate(180deg);
}

.faq-answer-wrapper {
    padding: 0 20px 20px 55px;
    border-top: 1px solid #f1f5f9;
    background: #f8fafc;
    color: #475569;
    line-height: 1.8;
}

.faq-a-content {
    display: flex;
    padding-top: 20px;
}

.faq-a-prefix {
    color: #ef4444;
    font-size: 1.4em;
    margin-right: 15px;
    flex-shrink: 0;
    font-weight: bold;
}

/* FAQ内の強調表示（リターナブル/ワンウェイなど） */
.faq-highlight {
    background-color: #ffff99;
    font-weight: bold;
}


/* --- 📱 トップページ専用：スマホ・詳細調整（引っ越し分） --- */
@media (max-width: 768px) {
    .water-hero-header {
        padding: 40px 20px !important;
        margin-bottom: 30px !important;
    }
    .water-hero-title {
        font-size: 1.5em !important;
        line-height: 1.4 !important;
    }
    .water-hero-text {
        font-size: 0.95em !important;
        line-height: 1.6 !important;
        text-align: left;
    }
    .water-section-title-center {
        font-size: 1.4em !important;
        margin-bottom: 20px !important;
    }
    /* クイズ関連 */
    #quiz-container .hero-title {
        font-size: 1.5em !important;
        line-height: 1.3 !important;
        margin-top: 5px !important;
    }
    #quiz-container .hero-badge {
        font-size: 0.8em !important;
        padding: 2px 10px !important;
    }
    .maker-card-title {
        font-size: 1.1em !important;
    }
    #quiz-container {
        min-height: 500px !important; 
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }
}

/* FAQアニメーション共通 */
summary::-webkit-details-marker { display: none; }
details[open] summary .faq-icon { transform: rotate(180deg); }
.faq-icon { transition: transform 0.3s; }


.site-footer-divider {
    margin-top: 80px;
    padding-top: 40px;
    border-top: 1px solid #e2e8f0;
}



/* --- Ranking Card Styles --- */
/* --- [整理・復元版] Ranking Card Styles --- */
.ranking-item {
    border: 2px solid #eee; border-radius: 12px;
    margin-bottom: 40px; background: #fff;
    overflow: hidden; box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.rank-header {
    background: #f8f9fa; padding: 15px 20px;
    border-bottom: 1px solid #eee;
    display: flex; align-items: center;
}

/* 👑 王冠の器を本番の60pxに固定 */
.rank-badge-wrapper {
    margin-right: 15px;
    width: 60px !important; /* 💡 これが王冠の生命線 */
    flex-shrink: 0;         /* 画像が大きくても、器を縮ませない */
}

/* 王冠画像本体 */
.rank-badge-wrapper img {
    width: 100% !important;   /* 器（60px）いっぱいに広げる */
    height: auto !important;
}

/* メーカー名（王冠が小さくなったので、横に収まる） */
.rank-title {
    font-size: 1.3em; margin: 0;
    border: none; color: #333;
    font-weight: bold;
}


/* 11位以降のテキストバッジ（本番完全再現版） */
.simple-rank-badge {
    background: #64748b !important; /* 本番の渋いグレー */
    color: #fff !important;         /* 白文字 */
    border-radius: 4px !important;  /* 角丸 */
    padding: 4px 8px !important;    /* 余白 */
    font-weight: bold !important;
    font-size: 14px !important;
    text-align: center !important;
    display: inline-block !important; /* 幅を中身に合わせる */
    width: auto !important;
    min-width: 35px;                /* 数字が1桁でも形を保つ */
}

/* 王冠（1-10位）とテキストバッジ（11位〜）の器を共通化 */
.rank-badge-wrapper {
    margin-right: 15px;
    width: 60px !important;
    flex-shrink: 0;
    display: flex;
    justify-content: center; /* 11位以降を中央寄せに */
    align-items: center;
}


.rank-body { padding: 20px; }
.rank-flex { display: flex; gap: 20px; flex-wrap: wrap; }
.rank-image-box {
    flex: 1;
    min-width: 240px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
}
.rank-image-box img { max-width: 100%; height: auto; max-height: 250px; object-fit: contain; }
.rank-info-box { flex: 1.5; min-width: 300px; }

/* Table inside Card */
.spec-table-card { width: 100%; border-collapse: collapse; font-size: 0.9em; border: 1px solid #eee; }
.spec-table-card th { background: #f2f2f2; padding: 8px; border: 1px solid #eee; width: 35%; text-align: left; }
.spec-table-card td { padding: 8px; border: 1px solid #eee; }
.extra-spec-row { background: #fafafa; }

/* Highlight Text */
.point-badge {
    display: inline-block; background: #e02424; color: #fff; padding: 2px 8px;
    border-radius: 4px; font-size: 0.75em; font-weight: bold; margin-bottom: 4px; vertical-align: middle;
}
.highlight-val { color: #e02424; font-weight: bold; font-size: 1.1em; }
.price-val { color: #e74c3c; font-weight: bold; font-size: 1.1em; }
.sub-text { color: #333; font-size: 0.85em; margin-top: 4px; }
.link-hint { color: #0073aa; font-size: 0.85em; text-decoration: underline; margin-top: 5px; display: block; }

/* Buttons */
.card-buttons { display: flex; gap: 10px; margin-top: 20px; align-items: stretch; }
.btn-detail {
    flex: 1; text-align: center; background: #fff; color: #333; border: 1px solid #ccc;
    padding: 12px; border-radius: 5px; text-decoration: none; font-weight: bold;
    font-size: 14px; display: flex; align-items: center; justify-content: center;
}
.btn-official {
    flex: 1; text-align: center; background: #e67e22; color: #fff; border: 1px solid #d35400;
    padding: 12px; border-radius: 5px; text-decoration: none; font-weight: bold;
    font-size: 14px; display: flex; align-items: center; justify-content: center;
}

/* --- Campaign Page Layout --- */
.cp-header { margin-bottom: 40px; text-align: center; }
.cp-h1 { color: #e02424; margin-bottom: 10px; }
.cp-intro-box { background: #ffffff; padding: 20px; border-radius: 8px; border: 1px solid #eee; margin-bottom: 40px; line-height: 1.8; }

.cp-unit { margin-bottom: 60px; max-width: 850px; margin-left: auto; margin-right: auto; }
.cp-label { background: #e02424 !important; color: #fff !important; display: inline-block !important; padding: 8px 20px !important; border-radius: 10px 10px 0 0 !important; font-weight: bold !important; font-size: 16px !important; margin: 0 !important; }
.cp-content-box { background: #fff5f5 !important; border: 2px solid #e02424 !important; border-radius: 0 12px 12px 12px !important; padding: 25px !important; margin-top: -2px !important; }
.cp-html-area { color: #333 !important; line-height: 1.8 !important; font-size: 16px !important; }
.cp-expire-date { text-align: right !important; font-size: 13px !important; color: #e02424 !important; margin: 20px 0 0 0 !important; font-weight: bold !important; border-top: 1px dashed #ffcccc; padding-top: 10px; }

.cp-btn-group { display: flex !important; gap: 10px !important; margin-top: 15px !important; }
.cp-btn-sub { flex: 1 !important; text-align: center !important; background: #fff !important; color: #333 !important; border: 1px solid #ccc !important; padding: 12px !important; border-radius: 6px !important; text-decoration: none !important; font-weight: bold !important; }
.cp-btn-main { flex: 1 !important; text-align: center !important; background: #e67e22 !important; color: #fff !important; padding: 12px !important; border-radius: 6px !important; text-decoration: none !important; font-weight: bold !important; }