/**
 * 精神科ポータルサイト - icottoスタイル準拠CSS
 * 完全1カラムレイアウト + 柔らかく優しいデザイン
 */

/* =============================================
   グローバル設定（横幅はみ出し防止）
   ============================================= */
* {
    box-sizing: border-box;
}

body {
    overflow-x: hidden;
    width: 100%;
}

.container {
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
}

/* =============================================
   基本設定とリセット
   ============================================= */
.mynavi-portal-wrapper {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px 16px;
    background: #fafafa; /* シンプルな明るいグレー背景 */
    overflow-x: hidden;
    width: 100%;
}

/* モバイル対応 */
@media (max-width: 768px) {
    .mynavi-portal-wrapper {
        padding: 16px 12px;
        overflow-x: hidden;
    }
}

/* =============================================
   カラー定義(rgb(25, 191, 191)アクセント)
   ============================================= */
:root {

	--primary-turquoise: rgb(251, 162, 225);
--primary-turquoise-hover: rgb(231, 142, 205);
--primary-turquoise-light: rgba(251, 162, 225, 0.1);
--primary-turquoise-soft: rgba(251, 162, 225, 0.15);
	
    /* サブカラー */
    --primary-brown: #8b7355;
    --accent-terracotta: #c47b5f;
    
    /* テキストカラー */
    --text-dark: #2d2d2d;
    --text-medium: #6b6b6b;
    --text-light: #999999;
    
    /* 背景カラー */
    --bg-main: #fafafa;
    --bg-card: #ffffff;
    --bg-soft: #f8f8f8;
    --bg-accent: #f5f5f5;
    
    /* ボーダー */
    --border-soft: #e5e5e5;
    --border-light: #f0f0f0;
    
    /* ステータスカラー */
    --available-green: rgb(25, 191, 191);
    --unavailable-gray: #b8b8b8;
    --priority-gold: #c9a961;
    
    /* ボタン */
    --btn-primary: rgb(25, 191, 191);
    --btn-primary-hover: rgb(20, 171, 171);
    --btn-secondary: #6b6b6b;
}

/* =============================================
   パンくずリスト
   ============================================= */
.breadcrumbs {
    padding: 12px 0 16px;
    margin-bottom: 24px;
}

.breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 4px;
}

.breadcrumb-item {
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    color: var(--text-medium);
}

.breadcrumb-item a {
    color: var(--primary-turquoise);
    text-decoration: none;
    transition: color 0.3s ease;
}

.breadcrumb-item a:hover {
    color: var(--primary-turquoise-hover);
}

.breadcrumb-item .separator {
    margin: 0 6px;
    color: var(--text-light);
    font-size: 11px;
}

.breadcrumb-item .current {
    color: var(--text-dark);
}

/* =============================================
   ページヘッダー
   ============================================= */
.area-page-header {
    background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-soft) 100%);
    padding: 32px 24px;
    margin-bottom: 32px;
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

@media (max-width: 768px) {
    .area-page-header {
        padding: 24px 20px;
        margin-bottom: 24px;
        border-radius: 12px;
    }
}

.area-page-title {
    font-size: 26px;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0 0 16px 0;
    line-height: 1.4;
    letter-spacing: 0.02em;
}

@media (max-width: 768px) {
    .area-page-title {
        font-size: 22px;
        margin-bottom: 14px;
    }
}

.area-page-description {
    font-size: 15px;
    color: var(--text-medium);
    line-height: 1.7;
    margin-bottom: 20px;
}

@media (max-width: 768px) {
    .area-page-description {
        font-size: 14px;
        margin-bottom: 16px;
    }
}

/* この記事でわかること(ヘッダー内インライン版) */
.article-summary-inline {
    margin: 24px 0 20px 0;
    padding: 16px 20px;
    background: white;
    border-radius: 10px;border: 3px solid rgb(251 162 225)!important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

@media (max-width: 768px) {
    .article-summary-inline {
        margin: 20px 0 16px 0;
        padding: 14px 16px;
        border-radius: 8px;
		border: 3px solid rgb(251 162 225)!important;
    }
}

.summary-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: rgb(251 162 225);
    color: white;
    font-size: 13px;
    font-weight: 600;
    border-radius: 20px;
    margin-bottom: 12px;
    letter-spacing: 0.03em;
}

@media (max-width: 768px) {
    .summary-badge {
        font-size: 12px;
        padding: 5px 12px;
        margin-bottom: 10px;
    }
}

.summary-list-inline {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 16px;
}

@media (max-width: 768px) {
    .summary-list-inline {
        grid-template-columns: 1fr;
        gap: 8px;
    }
}

.summary-list-inline li {
    position: relative;
    padding-left: 20px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-dark);
	font-weight:bold;
}

@media (max-width: 768px) {
    .summary-list-inline li {
        font-size: 12px;
        padding-left: 18px;
    }
}

.summary-list-inline li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--primary-turquoise);
    font-weight: bold;
    font-size: 14px;
}

@media (max-width: 768px) {
    .summary-list-inline li::before {
        font-size: 13px;
    }
}

@media (max-width: 768px) {
    .area-page-description {
        font-size: 13px;
        margin-bottom: 16px;
    }
}

.clinic-count-info {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    background: var(--primary-turquoise-light);
    color: var(--text-dark);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid var(--primary-turquoise);
}

.clinic-count-info .count-number {
    font-size: 18px;
    font-weight: 600;
    margin: 0 4px;
    color: var(--primary-turquoise);
}

/* =============================================
   子エリアナビゲーション
   ============================================= */
.child-area-navigation {
    margin-bottom: 32px;
}

@media (max-width: 768px) {
    .child-area-navigation {
        margin-bottom: 24px;
    }
}

.area-nav-block {
    margin-bottom: 16px;
    background: var(--bg-card);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

@media (max-width: 768px) {
    .area-nav-block {
        margin-bottom: 12px;
        border-radius: 10px;
    }
}

/* アコーディオントグルボタン */
.area-nav-accordion-toggle {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 24px;
    background: var(--bg-card);
    border: 2px solid var(--border-soft);
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-dark);
    transition: all 0.3s ease;
    position: relative;
}

@media (max-width: 768px) {
    .area-nav-accordion-toggle {
        padding: 16px 20px;
        font-size: 15px;
    }
}

.area-nav-accordion-toggle::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--primary-turquoise);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.area-nav-accordion-toggle:hover {
    background: var(--primary-turquoise-light);
    border-color: var(--primary-turquoise);
}

.area-nav-accordion-toggle:hover::before {
    opacity: 1;
}

.area-nav-accordion-toggle[aria-expanded="true"] {
    background: var(--primary-turquoise-soft);
    border-color: var(--primary-turquoise);
}

.area-nav-accordion-toggle[aria-expanded="true"]::before {
    opacity: 1;
}

.toggle-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

@media (max-width: 768px) {
    .toggle-left {
        gap: 10px;
    }
}

.toggle-title {
    font-size: 16px;
    font-weight: 600;
}

@media (max-width: 768px) {
    .toggle-title {
        font-size: 15px;
    }
}

.item-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    background: var(--primary-turquoise);
    color: white;
    font-size: 12px;
    font-weight: 600;
    border-radius: 12px;
    min-width: 40px;
}

@media (max-width: 768px) {
    .item-count-badge {
        font-size: 11px;
        padding: 3px 8px;
        min-width: 36px;
    }
}

.area-nav-accordion-toggle .toggle-icon {
    font-size: 14px;
    color: var(--primary-turquoise);
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .area-nav-accordion-toggle .toggle-icon {
        font-size: 12px;
    }
}

.area-nav-accordion-toggle[aria-expanded="true"] .toggle-icon {
    transform: rotate(180deg);
}

/* アコーディオンコンテンツ */
.area-nav-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.4s ease;
    background: var(--bg-card);
}

.area-nav-accordion-content.active {
    max-height: 2000px;
    padding: 0 0 16px 0;
}

@media (max-width: 768px) {
    .area-nav-accordion-content.active {
        padding: 0 0 12px 0;
    }
}

.area-nav-title {
    font-size: 17px;
    font-weight: 600;
    color: var(--text-dark);
    margin: 0 0 16px 0;
    display: flex;
    align-items: center;
    letter-spacing: 0.02em;
}

@media (max-width: 768px) {
    .area-nav-title {
        font-size: 16px;
        margin-bottom: 14px;
    }
}

.nav-icon {
    font-size: 20px;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .nav-icon {
        font-size: 18px;
    }
}

.area-nav-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    list-style: none;
    padding: 0;
    margin: 0;
}

@media (max-width: 768px) {
    .area-nav-list {
        grid-template-columns: 1fr;
        gap: 8px;
    }
}

.area-nav-item {
    background: var(--bg-soft);
    border-radius: 8px;
    border: 1px solid transparent;
    transition: all 0.3s ease;
}

.area-nav-item:hover {
    background: var(--primary-turquoise-light);
    border-color: var(--primary-turquoise);
    transform: translateY(-1px);
}

.area-nav-item a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--text-dark);
    text-decoration: none;
    font-size: 14px;
    padding: 12px 16px;
    transition: color 0.3s ease;
}

@media (max-width: 768px) {
    .area-nav-item a {
        font-size: 13px;
        padding: 10px 14px;
    }
}

.area-nav-item a:hover {
    color: var(--primary-turquoise);
}

.area-nav-item a:hover {
    color: var(--primary-brown);
}

.area-nav-item .item-count {
    color: var(--text-light);
    font-size: 12px;
    font-weight: 500;
}

/* =============================================
   クリニック比較テーブル
   ============================================= */
.clinic-comparison-wrapper {
    margin-bottom: 32px;
    background: var(--bg-card);
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

@media (max-width: 768px) {
    .clinic-comparison-wrapper {
        margin-bottom: 24px;
        padding: 12px;
        border-radius: 10px;
    }
}

.scroll-hint-text {
    text-align: center;
    font-size: 11px;
    color: var(--text-medium);
    margin-bottom: 12px;
    font-weight: 500;
    letter-spacing: 0.05em;
}

@media (max-width: 768px) {
    .scroll-hint-text {
        font-size: 10px;
        margin-bottom: 10px;
    }
}

.clinic-comparison-table-container {
    position: relative;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    border-radius: 8px;
    border: 1px solid var(--border-soft);
}

@media (max-width: 768px) {
    .clinic-comparison-table-container {
        border-radius: 6px;
    }
}

.clinic-comparison-table {
    width: 100%;
    min-width: 800px;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 11px;
    background: white;
}

@media (max-width: 768px) {
    .clinic-comparison-table {
        font-size: 10px;
        min-width: 600px;
    }
}

.clinic-comparison-table thead {
    position: sticky;
    top: 0;
    z-index: 2;
}

.clinic-comparison-table th {
    background: var(--bg-soft);
    color: var(--text-dark);
    font-weight: 600;
    padding: 8px 10px;
    text-align: center;
    border-bottom: 2px solid var(--border-soft);
    white-space: nowrap;
    font-size: 11px;
    letter-spacing: 0.02em;
    min-width: 100px;
}

@media (max-width: 768px) {
    .clinic-comparison-table th {
        padding: 6px 6px;
        font-size: 9px;
        min-width: 70px;
    }
}

.clinic-comparison-table th.fixed-column {
    position: sticky;
    left: 0;
    z-index: 3;
    background: var(--primary-turquoise-light);
    color: var(--primary-turquoise);
    border-right: 2px solid var(--primary-turquoise);
    text-align: center;
    min-width: 80px;
    max-width: 80px;
}

@media (max-width: 768px) {
    .clinic-comparison-table th.fixed-column {
        min-width: 60px;
        max-width: 60px;
        font-size: 9px;
        padding: 6px 4px;
    }
}

.clinic-comparison-table td {
    padding: 8px 10px;
    text-align: center;
    border-bottom: 1px solid var(--border-light);
    white-space: nowrap;
    font-size: 11px;
}

@media (max-width: 768px) {
    .clinic-comparison-table td {
        padding: 6px 8px;
        font-size: 10px;
    }
}

.clinic-comparison-table td.fixed-column {
    position: sticky;
    left: 0;
    z-index: 1;
    background: white;
    border-right: 2px solid var(--border-soft);
    text-align: center;
    font-weight: 600;
    min-width: 80px;
    max-width: 80px;
    color: var(--text-dark);
}

@media (max-width: 768px) {
    .clinic-comparison-table td.fixed-column {
        min-width: 60px;
        max-width: 60px;
        font-size: 9px;
        padding: 6px 4px;
    }
}

.clinic-comparison-table td.available {
    color: var(--primary-turquoise);
    font-weight: 600;
}

.clinic-comparison-table td.unavailable {
    color: var(--unavailable-gray);
}

.clinic-comparison-table td.hours-cell {
    font-size: 10px;
    white-space: normal;
    min-width: 100px;
    max-width: 150px;
    line-height: 1.4;
    text-align: center;
    padding: 6px 8px;
}

@media (max-width: 768px) {
    .clinic-comparison-table td.hours-cell {
        font-size: 8px;
        min-width: 70px;
        max-width: 100px;
        padding: 5px 4px;
        line-height: 1.3;
    }
}

.clinic-comparison-table tbody tr:hover {
    background: var(--primary-turquoise-light);
}

.clinic-comparison-table tbody tr:hover td.fixed-column {
    background: var(--primary-turquoise-light);
}

.clinic-comparison-table tbody tr:last-child td {
    border-bottom: none;
}

/* スクロールバーのスタイル */
.clinic-comparison-table-container::-webkit-scrollbar {
    height: 8px;
}

.clinic-comparison-table-container::-webkit-scrollbar-track {
    background: var(--bg-soft);
    border-radius: 4px;
}

.clinic-comparison-table-container::-webkit-scrollbar-thumb {
    background: var(--primary-turquoise);
    border-radius: 4px;
}

.clinic-comparison-table-container::-webkit-scrollbar-thumb:hover {
    background: var(--primary-turquoise-hover);
}

/* =============================================
   クリニックリストセクション
   ============================================= */
.clinic-list-section {
    margin-bottom: 40px;
}

@media (max-width: 768px) {
    .clinic-list-section {
        margin-bottom: 32px;
    }
}

.section-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-dark);
    margin: 0 0 24px 0;
    padding-bottom: 0;
    border-bottom: none;
    letter-spacing: 0.05em;
}

@media (max-width: 768px) {
    .section-title {
        font-size: 18px;
        margin-bottom: 20px;
    }
}

.showing-info {
    background: var(--bg-accent);
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 24px;
    font-size: 13px;
    color: var(--text-medium);
    border: 1px solid var(--border-light);
}

@media (max-width: 768px) {
    .showing-info {
        font-size: 12px;
        padding: 10px 14px;
        margin-bottom: 20px;
    }
}

/* =============================================
   クリニックカード(icottoスタイル)
   ============================================= */
.clinic-card {
    background: var(--bg-card);
    border-radius: 16px;
    margin-bottom: 24px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    position: relative;
}

@media (max-width: 768px) {
    .clinic-card {
        border-radius: 12px;
        margin-bottom: 20px;
    }
}

.clinic-card:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

/* 優先クリニックのスタイル */
.priority-clinic {
    border: 2px solid var(--priority-gold);
}

.priority-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: linear-gradient(135deg, var(--priority-gold) 0%, #b89652 100%);
    color: white;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    z-index: 10;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 8px rgba(201, 169, 97, 0.3);
    letter-spacing: 0.05em;
}

.badge-icon {
    margin-right: 4px;
    font-size: 12px;
}

/* クリニックカード内部 */
.clinic-card-inner {
    padding: 20px;
}

@media (max-width: 768px) {
    .clinic-card-inner {
        padding: 16px;
    }
}

/* クリニック名 */
.clinic-name {
    font-size: 19px;
    font-weight: 600;
    color: var(--text-dark);
    margin: 0 0 8px 0;
    line-height: 1.5;
    letter-spacing: 0.02em;
    display: flex;
    align-items: center;
    gap: 10px;
}


/* ── 施術カテゴリ別料金ブロック ── */
.treatment-menu-section {
    margin: 16px 0;
}

.treatment-category-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

@media (max-width: 480px) {
    .treatment-category-list {
        grid-template-columns: 1fr;
    }
}

.treatment-category-block {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,0.07), 0 0 0 1px rgba(0,0,0,0.05);
    transition: box-shadow 0.2s;
}

.treatment-category-block:hover {
    box-shadow: 0 3px 12px rgba(0,0,0,0.11), 0 0 0 1px rgba(0,0,0,0.07);
}

.treatment-category-heading {
    display: flex;
    align-items: center;
    gap: 7px;
    background: linear-gradient(135deg, #f9f4ff 0%, #f0f7ff 100%);
    padding: 9px 13px;
    border-bottom: 1px solid #ede8f8;
}

.treatment-cat-icon {
    font-size: 1rem;
    line-height: 1;
}

.treatment-category-name {
    font-size: 0.88rem;
    font-weight: 700;
    color: #5a3e8a;
    letter-spacing: 0.02em;
}

.treatment-category-block:not(:has(.treatment-items-box)) .treatment-category-heading {
    border-bottom: none;
}

.treatment-items-box {
    padding: 2px 0 4px;
}

.treatment-item-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 13px;
    border-bottom: 1px solid #f3f3f3;
    gap: 8px;
}

.treatment-item-row:last-child {
    border-bottom: none;
}

.treatment-item-name {
    font-size: 0.83rem;
    color: #555;
    flex: 1;
}

.treatment-item-price {
    font-size: 0.88rem;
    font-weight: 700;
    color: #d63b6e;
    white-space: nowrap;
    background: #fff0f5;
    padding: 2px 8px;
    border-radius: 20px;
    letter-spacing: 0.01em;
}

.treatment-item-price.no-price {
    color: #aaa;
    background: #f5f5f5;
    font-weight: 400;
    font-size: 0.78rem;
}
/* メニューなし（ヒアルロン酸など単体フラグ）のときの表示 */
.treatment-category-block:not(:has(.treatment-items-box)) .treatment-category-heading {
    border-bottom: none;
}

.treatment-items-box {
    padding: 2px 0 4px;
}

.treatment-item-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 13px;
    border-bottom: 1px solid #f3f3f3;
    gap: 8px;
}

.treatment-item-row:last-child {
    border-bottom: none;
}

.treatment-item-name {
    font-size: 0.83rem;
    color: #555;
    flex: 1;
}

.treatment-item-price {
    font-size: 0.88rem;
    font-weight: 700;
    color: #d63b6e;
    white-space: nowrap;
    background: #fff0f5;
    padding: 2px 8px;
    border-radius: 20px;
    letter-spacing: 0.01em;
}

/* 料金なしのとき */
.treatment-item-price.no-price {
    color: #aaa;
    background: #f5f5f5;
    font-weight: 400;
    font-size: 0.78rem;
}
@media (max-width: 768px) {
    .clinic-name {
        font-size: 17px;
        margin-bottom: 6px;
        gap: 8px;
    }
}

/* 最寄り駅情報 */
.clinic-stations {
    font-size: 12px;
    color: var(--text-medium);
    margin: 0 0 12px 0;
    display: flex;
    align-items: center;
    gap: 6px;
    line-height: 1.4;
}

@media (max-width: 768px) {
    .clinic-stations {
        font-size: 11px;
        margin-bottom: 10px;
        gap: 4px;
    }
}

.clinic-stations .station-icon {
    font-size: 14px;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .clinic-stations .station-icon {
        font-size: 13px;
    }
}

.clinic-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    background: var(--primary-turquoise);
    color: white;
    font-size: 16px;
    font-weight: 700;
    border-radius: 6px;
    flex-shrink: 0;
    padding: 0 8px;
}

@media (max-width: 768px) {
    .clinic-number {
        min-width: 28px;
        height: 28px;
        font-size: 14px;
        padding: 0 6px;
        border-radius: 5px;
    }
}

/* クリニック画像 */
.clinic-image-wrapper {
    width: 100%;
    margin-bottom: 12px;
    border-radius: 12px;
    overflow: hidden;
}

@media (max-width: 768px) {
    .clinic-image-wrapper {
        margin-bottom: 10px;
        border-radius: 10px;
    }
}

.clinic-screenshot {
    width: 100%;
    height: auto;
    display: block;
}

.no-image-placeholder {
    width: 100%;
    height: 200px;
    background: var(--bg-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-light);
    font-size: 14px;
}

@media (max-width: 768px) {
    .no-image-placeholder {
        height: 160px;
        font-size: 13px;
    }
}

/* =============================================
   クリニック特徴タグ(icottoスタイル)
   クリニック名とスクリーンショットの間に配置
   ============================================= */
.clinic-feature-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
    margin-top: -4px;
}

@media (max-width: 768px) {
    .clinic-feature-tags {
        gap: 5px;
        margin-bottom: 10px;
    }
}

.feature-tag {
    display: inline-block;
    padding: 6px 12px;
    background: var(--primary-turquoise-light);
    color: var(--primary-turquoise);
    border-radius: 16px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid var(--primary-turquoise);
    transition: all 0.3s ease;
}

@media (max-width: 768px) {
    .feature-tag {
        font-size: 11px;
        padding: 5px 10px;
        border-radius: 14px;
    }
}

.feature-tag:hover {
    background: var(--primary-turquoise);
    color: white;
    transform: translateY(-1px);
}

/* 基本情報(旧スタイル - 互換性のため残す) */
.clinic-basic-info {
    margin-bottom: 24px;
    padding: 16px;
    background: var(--bg-soft);
    border-radius: 12px;
}

@media (max-width: 768px) {
    .clinic-basic-info {
        margin-bottom: 20px;
        padding: 14px;
        border-radius: 10px;
    }
}

.info-row {
    display: flex;
    margin-bottom: 12px;
    font-size: 14px;
    line-height: 1.7;
}

@media (max-width: 768px) {
    .info-row {
        font-size: 13px;
        margin-bottom: 10px;
    }
}

.info-row:last-child {
    margin-bottom: 0;
}

.info-label {
    width: 100px;
    color: var(--text-medium);
    flex-shrink: 0;
    font-weight: 500;
}

@media (max-width: 768px) {
    .info-label {
        width: 85px;
        font-size: 12px;
    }
}

.info-value {
    color: var(--text-dark);
    flex: 1;
}

.phone-link {
    color: var(--primary-brown);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.phone-link:hover {
    color: var(--accent-terracotta);
}

/* =============================================
   icotto風 基本情報セクション(新デザイン)
   ============================================= */
.clinic-basic-info-icotto {
    margin-bottom: 16px;
    background: var(--bg-soft);
    border-radius: 10px;
    overflow: hidden;
}

@media (max-width: 768px) {
    .clinic-basic-info-icotto {
        margin-bottom: 14px;
        border-radius: 8px;
    }
}

.clinic-basic-info-icotto .info-item {
    display: flex;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-light);
    transition: background 0.2s ease;
}

@media (max-width: 768px) {
    .clinic-basic-info-icotto .info-item {
        padding: 10px 14px;
    }
}

.clinic-basic-info-icotto .info-item:last-child {
    border-bottom: none;
}

.clinic-basic-info-icotto .info-item:hover {
    background: rgba(255, 255, 255, 0.5);
}

.clinic-basic-info-icotto .info-icon {
    font-size: 20px;
    margin-right: 14px;
    flex-shrink: 0;
    opacity: 0.8;
    line-height: 1.4;
}

@media (max-width: 768px) {
    .clinic-basic-info-icotto .info-icon {
        font-size: 18px;
        margin-right: 12px;
    }
}

.clinic-basic-info-icotto .info-content {
    flex: 1;
    min-width: 0;
}

.clinic-basic-info-icotto .info-label {
    font-size: 12px;
    color: var(--text-medium);
    margin-bottom: 4px;
    font-weight: 500;
    letter-spacing: 0.02em;
}

@media (max-width: 768px) {
    .clinic-basic-info-icotto .info-label {
        font-size: 11px;
    }
}

.clinic-basic-info-icotto .info-value {
    font-size: 14px;
    color: var(--text-dark);
    line-height: 1.7;
    word-wrap: break-word;
}

@media (max-width: 768px) {
    .clinic-basic-info-icotto .info-value {
        font-size: 13px;
    }
}

.clinic-basic-info-icotto .schedule-value {
    font-size: 13px;
}

@media (max-width: 768px) {
    .clinic-basic-info-icotto .schedule-value {
        font-size: 12px;
    }
}

.clinic-basic-info-icotto .schedule-value table {
    width: 100%;
    margin-top: 8px;
    border-collapse: collapse;
}

.clinic-basic-info-icotto .schedule-value th,
.clinic-basic-info-icotto .schedule-value td {
    padding: 6px 4px;
    border: 1px solid var(--border-light);
    text-align: center;
    font-size: 11px;
}

@media (max-width: 768px) {
    .clinic-basic-info-icotto .schedule-value th,
    .clinic-basic-info-icotto .schedule-value td {
        padding: 5px 3px;
        font-size: 10px;
    }
}

.clinic-basic-info-icotto .schedule-value th {
    background: rgba(255, 255, 255, 0.8);
    font-weight: 600;
}

.clinic-basic-info-icotto .phone-link {
    color: var(--primary-turquoise);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.clinic-basic-info-icotto .phone-link:hover {
    color: var(--primary-turquoise-hover);
}

/* =============================================
   詳細セクション
   ============================================= */
.detail-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dark);
    margin: 0 0 10px 0;
    padding: 0;
    border: none;
    background: none;
    letter-spacing: 0.03em;
}

@media (max-width: 768px) {
    .detail-title {
        font-size: 13px;
        margin-bottom: 8px;
    }
}

/* =============================================
   共通コンテンツセクション(アコーディオン)
   ============================================= */
.common-content-section {
    margin-bottom: 32px;
    background: var(--bg-card);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

@media (max-width: 768px) {
    .common-content-section {
        margin-bottom: 24px;
        border-radius: 10px;
    }
}

/* アコーディオントグルボタン */
.common-accordion-toggle {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-soft) 100%);
    border: 2px solid var(--border-soft);
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-dark);
    transition: all 0.3s ease;
    position: relative;
}

@media (max-width: 768px) {
    .common-accordion-toggle {
        padding: 18px 20px;
        font-size: 15px;
    }
}

.common-accordion-toggle::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(to bottom, var(--primary-turquoise) 0%, rgba(25, 191, 191, 0.6) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.common-accordion-toggle:hover {
    background: linear-gradient(135deg, var(--primary-turquoise-light) 0%, var(--primary-turquoise-soft) 100%);
    border-color: var(--primary-turquoise);
    transform: translateX(2px);
}

.common-accordion-toggle:hover::before {
    opacity: 1;
}

.common-accordion-toggle[aria-expanded="true"] {
    background: var(--primary-turquoise-soft);
    border-color: var(--primary-turquoise);
}

.common-accordion-toggle[aria-expanded="true"]::before {
    opacity: 1;
}

.common-accordion-toggle .toggle-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

@media (max-width: 768px) {
    .common-accordion-toggle .toggle-left {
        gap: 4px;
    }
}

.common-accordion-toggle .toggle-title {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
}

@media (max-width: 768px) {
    .common-accordion-toggle .toggle-title {
        font-size: 15px;
    }
}

.toggle-hint {
    font-size: 12px;
    font-weight: 400;
    color: var(--text-medium);
    display: flex;
    align-items: center;
    gap: 4px;
}

@media (max-width: 768px) {
    .toggle-hint {
        font-size: 11px;
    }
}

.toggle-hint::before {
    content: '👆';
    font-size: 14px;
}

@media (max-width: 768px) {
    .toggle-hint::before {
        font-size: 12px;
    }
}

.common-accordion-toggle .toggle-icon {
    font-size: 16px;
    color: var(--primary-turquoise);
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .common-accordion-toggle .toggle-icon {
        font-size: 14px;
    }
}

.common-accordion-toggle[aria-expanded="true"] .toggle-icon {
    transform: rotate(180deg);
}

/* アコーディオンコンテンツ */
.common-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.4s ease;
    background: var(--bg-card);
}

.common-accordion-content.active {
    max-height: 3000px;
    padding: 24px;
    border-top: 1px solid var(--border-light);
}

@media (max-width: 768px) {
    .common-accordion-content.active {
        padding: 20px 16px;
    }
}

.common-content-body {
    font-size: 14px;
    line-height: 1.8;
    color: var(--text-dark);
}

@media (max-width: 768px) {
    .common-content-body {
        font-size: 13px;
        line-height: 1.75;
    }
}

.common-content-body h3 {
    font-size: 17px;
    font-weight: 600;
    color: var(--text-dark);
    margin: 20px 0 12px 0;
    padding-left: 12px;
    border-left: 3px solid var(--primary-turquoise);
}

@media (max-width: 768px) {
    .common-content-body h3 {
        font-size: 16px;
        margin: 16px 0 10px 0;
        padding-left: 10px;
    }
}

.common-content-body h3:first-child {
    margin-top: 0;
}

.common-content-body h4 {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-dark);
    margin: 16px 0 10px 0;
}

@media (max-width: 768px) {
    .common-content-body h4 {
        font-size: 14px;
        margin: 14px 0 8px 0;
    }
}

.common-content-body p {
    margin-bottom: 14px;
}

@media (max-width: 768px) {
    .common-content-body p {
        margin-bottom: 12px;
    }
}

.common-content-body p:last-child {
    margin-bottom: 0;
}

.common-content-body ul,
.common-content-body ol {
    margin: 12px 0;
    padding-left: 24px;
}

@media (max-width: 768px) {
    .common-content-body ul,
    .common-content-body ol {
        margin: 10px 0;
        padding-left: 20px;
    }
}

.common-content-body li {
    margin-bottom: 8px;
    line-height: 1.7;
}

@media (max-width: 768px) {
    .common-content-body li {
        margin-bottom: 6px;
    }
}

.common-content-body strong {
    font-weight: 600;
    color: var(--text-dark);
}

.common-content-body a {
    color: var(--primary-turquoise);
    text-decoration: none;
    transition: color 0.3s ease;
}

.common-content-body a:hover {
    color: var(--primary-turquoise-hover);
    text-decoration: underline;
}

/* 診療時間 */
.business-hours-section {
    margin-bottom: 16px;
}

@media (max-width: 768px) {
    .business-hours-section {
        margin-bottom: 14px;
    }
}

.business-hours-content {
    padding: 12px;
    background: white;
    border-radius: 8px;
    border: none;
}

@media (max-width: 768px) {
    .business-hours-content {
        padding: 10px;
        border-radius: 6px;
    }
}

.business-hours-content table {
    width: 100%;
    border-collapse: collapse;
}

.business-hours-content th,
.business-hours-content td {
    padding: 10px 8px;
    border: 1px solid var(--border-light);
    text-align: center;
    font-size: 13px;
}

@media (max-width: 768px) {
    .business-hours-content th,
    .business-hours-content td {
        padding: 8px 6px;
        font-size: 12px;
    }
}

.business-hours-content th {
    background: var(--bg-soft);
    font-weight: 600;
    color: var(--text-dark);
}

/* クリニックの魅力 */
.clinic-appeals-section {
    margin-bottom: 24px;
}

@media (max-width: 768px) {
    .clinic-appeals-section {
        margin-bottom: 20px;
    }
}

.appeal-content {
    padding: 16px;
    background: white;
    border-radius: 10px;
    border: 1px solid var(--border-soft);
    font-size: 14px;
    line-height: 1.8;
    color: var(--text-dark);
}

@media (max-width: 768px) {
    .appeal-content {
        padding: 14px;
        font-size: 13px;
        border-radius: 8px;
    }
}

.appeal-content ul {
    list-style: none;
    padding: 0;
    margin: 10px 0;
}

.appeal-content ul li {
    position: relative;
    padding-left: 24px;
    margin-bottom: 10px;
}

@media (max-width: 768px) {
    .appeal-content ul li {
        padding-left: 20px;
        margin-bottom: 8px;
    }
}

.appeal-content ul li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--available-green);
    font-weight: bold;
    font-size: 15px;
}

/* =============================================
   クリニック詳細セクション(アピール+詳細統合版)
   ============================================= */
.clinic-detail-section {
    margin-bottom: 16px;
}

@media (max-width: 768px) {
    .clinic-detail-section {
        margin-bottom: 14px;
    }
}

.clinic-detail-section .detail-content {
    padding: 14px 16px;
    background: white;
    border-radius: 10px;
    border: none;
    font-size: 12px;
    line-height: 1.8;
    color: var(--text-dark);
}

@media (max-width: 768px) {
    .clinic-detail-section .detail-content {
        padding: 12px 14px;
        font-size: 11px;
        border-radius: 8px;
        line-height: 1.75;
    }
}

.clinic-detail-section .detail-content p {
    margin-bottom: 10px;
}

.clinic-detail-section .detail-content p:last-child {
    margin-bottom: 0;
}

.clinic-detail-section .detail-content ul {
    list-style: none;
    padding: 0;
    margin: 10px 0;
}

.clinic-detail-section .detail-content ul li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 8px;
    font-weight: bold;
}

@media (max-width: 768px) {
    .clinic-detail-section .detail-content ul li {
        padding-left: 18px;
        margin-bottom: 6px;
    }
}

.clinic-detail-section .detail-content ul li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--available-green);
    font-weight: bold;
    font-size: 14px;
}

@media (max-width: 768px) {
    .clinic-detail-section .detail-content ul li::before {
        font-size: 13px;
    }
}

/* =============================================
   詳しい特徴セクション(横2列アコーディオン)
   ============================================= */
.clinic-feature-detail {
    margin-bottom: 16px;
}

@media (max-width: 768px) {
    .clinic-feature-detail {
        margin-bottom: 14px;
    }
}

/* アコーディオンボタン(シンプルスタイル) */
.feature-accordion-toggle {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    background: var(--bg-soft);
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dark);
    transition: all 0.3s ease;
}

@media (max-width: 768px) {
    .feature-accordion-toggle {
        padding: 12px 16px;
        font-size: 13px;
        border-radius: 6px;
    }
}

.feature-accordion-toggle:hover {
    background: var(--primary-turquoise-light);
    border-color: var(--primary-turquoise);
    color: var(--primary-turquoise);
}

.toggle-text {
    font-size: 15px;
    letter-spacing: 0.02em;
}

@media (max-width: 768px) {
    .toggle-text {
        font-size: 14px;
    }
}

.toggle-icon {
    font-size: 11px;
    transition: transform 0.3s ease;
    opacity: 0.7;
}

/* アコーディオンコンテンツ */
.feature-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.4s ease;
}

.feature-accordion-content.active {
    max-height: 1000px;
    padding-top: 16px;
}

@media (max-width: 768px) {
    .feature-accordion-content.active {
        padding-top: 12px;
    }
}

/* 横3列グリッドレイアウト */
.feature-detail-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    list-style: none;
    padding: 0;
    margin: 0;
    background: white;
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    overflow: hidden;
}

@media (max-width: 768px) {
    .feature-detail-grid {
        grid-template-columns: repeat(3, 1fr);
        border-radius: 8px;
    }
}

/* 個別の特徴項目 */
.feature-detail-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    justify-content: center;
    padding: 10px 8px;
    border-bottom: 1px solid var(--border-light);
    border-right: 1px solid var(--border-light);
    min-width: 0;
}

@media (max-width: 768px) {
    .feature-detail-item {
        padding: 8px 6px;
        gap: 3px;
    }
}

/* 右列の右ボーダーを削除 */
.feature-detail-item:nth-child(3n) {
    border-right: none;
}

/* 最後の行のボーダーを調整 */
.feature-detail-item:nth-last-child(-n+3) {
    border-bottom: none;
}

.feature-detail-label {
    font-size: 11px;
    color: var(--text-dark);
    font-weight: 500;
    white-space: nowrap;
    text-align: center;
}

@media (max-width: 768px) {
    .feature-detail-label {
        font-size: 10px;
    }
}

.feature-detail-value {
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 10px;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .feature-detail-value {
        font-size: 10px;
        padding: 3px 8px;
        border-radius: 8px;
    }
}

.feature-detail-value.available {
    color: white;
    background: var(--primary-turquoise);
    border: 1px solid var(--primary-turquoise);
    font-weight: 700;
}

.feature-detail-value.unavailable {
    color: var(--unavailable-gray);
    background: rgba(184, 184, 184, 0.1);
    font-weight: 500;
}

/* クリニック詳細 */
.clinic-description-section {
    margin-bottom: 24px;
}

@media (max-width: 768px) {
    .clinic-description-section {
        margin-bottom: 20px;
    }
}

.description-content {
    padding: 16px;
    background: white;
    border-radius: 10px;
    border: 1px solid var(--border-soft);
    font-size: 14px;
    line-height: 1.8;
    color: var(--text-dark);
}

@media (max-width: 768px) {
    .description-content {
        padding: 14px;
        font-size: 13px;
        border-radius: 8px;
    }
}

/* 対応可能な疾患・治療 */
.treatable-conditions-section {
    margin-bottom: 24px;
}

@media (max-width: 768px) {
    .treatable-conditions-section {
        margin-bottom: 20px;
    }
}

.conditions-content {
    padding: 16px;
    background: white;
    border-radius: 10px;
    border: 1px solid var(--border-soft);
    font-size: 14px;
    line-height: 1.8;
    color: var(--text-dark);
}

@media (max-width: 768px) {
    .conditions-content {
        padding: 14px;
        font-size: 13px;
        border-radius: 8px;
    }
}

/* GoogleMap */
.google-map-section {
    margin-bottom: 16px;
}

@media (max-width: 768px) {
    .google-map-section {
        margin-bottom: 14px;
    }
}

.map-wrapper {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border-soft);
}

@media (max-width: 768px) {
    .map-wrapper {
        border-radius: 10px;
    }
}

.map-wrapper iframe {
    width: 100%;
    height: 400px;
}

@media (max-width: 768px) {
    .map-wrapper iframe {
        height: 250px;
    }
}

/* =============================================
   公式サイトボタン(icottoスタイル)
   ============================================= */
.clinic-actions {
    margin-top: 24px;
    text-align: center;
}

@media (max-width: 768px) {
    .clinic-actions {
        margin-top: 20px;
    }
}

.btn-official-site {
    display: inline-block;
    padding: 14px 36px;
    background: var(--primary-turquoise);
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 15px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 8px rgba(25, 191, 191, 0.3), 
                0 2px 4px rgba(0, 0, 0, 0.1);
    letter-spacing: 0.05em;
    border: none;
    position: relative;
}

@media (max-width: 768px) {
    .btn-official-site {
        padding: 12px 32px;
        font-size: 14px;
        border-radius: 6px;
    }
}

.btn-official-site:hover {
    background: var(--primary-turquoise-hover);
    box-shadow: 0 6px 12px rgba(25, 191, 191, 0.4), 
                0 3px 6px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

.btn-official-site:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(25, 191, 191, 0.3), 
                0 1px 2px rgba(0, 0, 0, 0.1);
}

/* =============================================
   ページネーション(icottoスタイル)
   ============================================= */
.pagination-wrapper {
    margin: 40px 0;
}

@media (max-width: 768px) {
    .pagination-wrapper {
        margin: 32px 0;
    }
}

.pagination-wrapper ul {
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 8px;
}

@media (max-width: 768px) {
    .pagination-wrapper ul {
        gap: 6px;
    }
}

.pagination-wrapper li {
    display: inline-block;
}

.pagination-wrapper a,
.pagination-wrapper span {
    display: block;
    padding: 10px 16px;
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    text-decoration: none;
    color: var(--text-dark);
    font-size: 14px;
    transition: all 0.3s ease;
    background: var(--bg-card);
    font-weight: 500;
}

@media (max-width: 768px) {
    .pagination-wrapper a,
    .pagination-wrapper span {
        padding: 8px 14px;
        font-size: 13px;
        border-radius: 6px;
    }
}

.pagination-wrapper a:hover {
    background: var(--primary-turquoise);
    color: white;
    border-color: var(--primary-turquoise);
    transform: translateY(-1px);
}

.pagination-wrapper .current {
    background: var(--primary-turquoise);
    color: white;
    border-color: var(--primary-turquoise);
}

/* =============================================
   うつ病診断セクション
   ============================================= */
.depression-check-section {
    background: var(--bg-card);
    padding: 40px 32px;
    border-radius: 16px;
    margin: 40px 0;
    text-align: center;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

@media (max-width: 768px) {
    .depression-check-section {
        padding: 32px 24px;
        margin: 32px 0;
        border-radius: 12px;
    }
}

.depression-check-section .section-title {
    color: var(--text-dark);
    border-bottom: none;
    display: inline-block;
    padding-bottom: 0;
    margin-bottom: 20px;
}

.section-description {
    font-size: 14px;
    color: var(--text-medium);
    line-height: 1.8;
    margin-bottom: 28px;
}

@media (max-width: 768px) {
    .section-description {
        font-size: 13px;
        margin-bottom: 24px;
    }
}

/* =============================================
   関連エリアセクション
   ============================================= */
.related-areas-section {
    margin: 40px 0;
    padding: 32px 24px;
    background: var(--bg-card);
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

@media (max-width: 768px) {
    .related-areas-section {
        margin: 32px 0;
        padding: 24px 20px;
        border-radius: 12px;
    }
}

.related-area-block {
    margin-bottom: 32px;
}

@media (max-width: 768px) {
    .related-area-block {
        margin-bottom: 24px;
    }
}

.related-area-block:last-child {
    margin-bottom: 0;
}

.related-area-title {
    font-size: 17px;
    font-weight: 600;
    color: var(--text-dark);
    margin: 0 0 16px 0;
    letter-spacing: 0.02em;
}

@media (max-width: 768px) {
    .related-area-title {
        font-size: 16px;
        margin-bottom: 14px;
    }
}

.related-area-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    list-style: none;
    padding: 0;
    margin: 0;
}

@media (max-width: 768px) {
    .related-area-list {
        grid-template-columns: 1fr;
        gap: 8px;
    }
}

.related-area-item {
    background: var(--bg-soft);
    border-radius: 8px;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.related-area-item:hover {
    border-color: var(--primary-turquoise);
    box-shadow: 0 2px 8px rgba(25, 191, 191, 0.15);
    transform: translateY(-1px);
}

.related-area-item a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    color: var(--text-dark);
    text-decoration: none;
    font-size: 14px;
    transition: color 0.3s ease;
}

@media (max-width: 768px) {
    .related-area-item a {
        padding: 10px 14px;
        font-size: 13px;
    }
}

.related-area-item a:hover {
    color: var(--primary-turquoise);
}

.related-area-item .count {
    color: var(--text-light);
    font-size: 12px;
    font-weight: 500;
}

/* =============================================
   その他のスタイル
   ============================================= */
.no-clinics-found {
    text-align: center;
    padding: 60px 20px;
    background: var(--bg-card);
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

@media (max-width: 768px) {
    .no-clinics-found {
        padding: 48px 16px;
        border-radius: 12px;
    }
}

.no-clinics-found p {
    font-size: 15px;
    color: var(--text-medium);
    margin-bottom: 24px;
    line-height: 1.7;
}

@media (max-width: 768px) {
    .no-clinics-found p {
        font-size: 14px;
        margin-bottom: 20px;
    }
}

.btn-back {
    display: inline-block;
    padding: 12px 28px;
    background: var(--primary-turquoise);
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 8px rgba(25, 191, 191, 0.3), 
                0 2px 4px rgba(0, 0, 0, 0.1);
    border: none;
}

@media (max-width: 768px) {
    .btn-back {
        padding: 10px 24px;
        font-size: 13px;
        border-radius: 6px;
    }
}

.btn-back:hover {
    background: var(--primary-turquoise-hover);
    box-shadow: 0 6px 12px rgba(25, 191, 191, 0.4), 
                0 3px 6px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

/* =============================================
   地図関連スタイル
   ============================================= */
.lazy-map {
    transition: opacity 0.3s, transform 0.2s;
    border-radius: 12px;
}

@media (max-width: 768px) {
    .lazy-map {
        border-radius: 10px;
    }
}

.lazy-map:hover {
    opacity: 0.95;
    transform: scale(0.995);
}

.map-link {
    margin-top: 12px;
}

.map-button {
    display: inline-block;
    padding: 10px 24px;
    background: var(--btn-secondary);
    color: white;
    text-decoration: none;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(156, 168, 150, 0.2);
}

@media (max-width: 768px) {
    .map-button {
        padding: 9px 20px;
        font-size: 12px;
        border-radius: 18px;
    }
}

.map-button:hover {
    background: #8a9884;
    box-shadow: 0 4px 12px rgba(156, 168, 150, 0.3);
    transform: translateY(-1px);
}

/* =============================================
   デバッグ用(本番環境では削除)
   ============================================= */
.neighbor-clinic {
    position: relative;
}

.neighbor-clinic::after {
    content: "近隣";
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(61, 61, 61, 0.7);
    color: white;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 600;
    display: none;
}

/* 管理者ログイン時のみ表示 */
body.logged-in .neighbor-clinic::after {
    display: block;
}

/* =============================================
   アニメーション
   ============================================= */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.clinic-card {
    animation: fadeInUp 0.5s ease;
}

/* =============================================
   スムーズスクロール
   ============================================= */
html {
    scroll-behavior: smooth;
}

/* =============================================
   フォーカススタイル(アクセシビリティ)
   ============================================= */
a:focus,
button:focus {
    outline: 2px solid var(--primary-turquoise);
    outline-offset: 2px;
}

/* =============================================
   印刷用スタイル
   ============================================= */
@media print {
    .mynavi-portal-wrapper {
        max-width: 100%;
        padding: 0;
        background: white;
    }
    
    .clinic-card {
        page-break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ddd;
    }
    
    .btn-official-site,
    .pagination-wrapper,
    .depression-check-section {
        display: none;
    }
}

/* 掲載情報修正エリア */
.attention p{
    text-align: right;
    margin: 0;
	font-size:10px;
}


.breadcrumbs{
	margin:0!important;
	padding:0!important;
}

.toggle-left h2{
	margin:0!important;
}

/**
 * アコーディオンコンテンツの高さ制限とスクロール機能
 * portal-mynavi.css に追加・上書きするCSS
 */

/* =============================================
   子エリアナビゲーション - アコーディオンコンテンツ修正
   ============================================= */

/* アコーディオンコンテンツに高さ制限とスクロール機能を追加 */
.area-nav-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.4s ease;
    background: var(--bg-card);
}

.area-nav-accordion-content.active {
    max-height: 500px; /* 高さを500pxに制限 */
    padding: 0 0 16px 0;
    overflow-y: auto; /* 縦スクロールを有効化 */
    overflow-x: hidden; /* 横スクロールは無効 */
}

@media (max-width: 768px) {
    .area-nav-accordion-content.active {
        max-height: 400px; /* モバイルでは400pxに制限 */
        padding: 0 0 12px 0;
    }
}

/* =============================================
   スクロールバーのカスタムスタイル(Chrome, Safari, Edge)
   ============================================= */

/* スクロールバー全体 */
.area-nav-accordion-content::-webkit-scrollbar {
    width: 10px;
    background: var(--bg-soft);
}

@media (max-width: 768px) {
    .area-nav-accordion-content::-webkit-scrollbar {
        width: 6px;
    }
}

/* スクロールバーのトラック(背景部分) */
.area-nav-accordion-content::-webkit-scrollbar-track {
    background: var(--bg-soft);
    border-radius: 10px;
    margin: 8px 0;
}

/* スクロールバーのつまみ(動く部分) */
.area-nav-accordion-content::-webkit-scrollbar-thumb {
    background: var(--primary-turquoise);
    border-radius: 10px;
    border: 2px solid var(--bg-soft);
    transition: background 0.3s ease;
}

.area-nav-accordion-content::-webkit-scrollbar-thumb:hover {
    background: var(--primary-turquoise-hover);
}

/* スクロールバーのつまみがアクティブな時 */
.area-nav-accordion-content::-webkit-scrollbar-thumb:active {
    background: var(--primary-turquoise-hover);
}

/* =============================================
   Firefox用のスクロールバースタイル
   ============================================= */

.area-nav-accordion-content {
    scrollbar-width: thin;
    scrollbar-color: var(--primary-turquoise) var(--bg-soft);
}

/* =============================================
   スクロール可能な状態の視覚的ヒント
   ============================================= */

/* アコーディオンが開いている時、下にグラデーションの影を追加してスクロール可能を示唆 */
.area-nav-accordion-content.active::after {
    content: '';
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    height: 20px;
    background: linear-gradient(to top, rgba(255, 255, 255, 0.9), transparent);
    pointer-events: none;
    display: block;
}

@media (max-width: 768px) {
    .area-nav-accordion-content.active::after {
        height: 16px;
    }
}

/* =============================================
   スクロール位置の調整(内部のパディング)
   ============================================= */

/* リストの上下に余白を追加してスクロールしやすく */
.area-nav-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    list-style: none;
    padding: 16px 24px; /* 上下左右にパディングを追加 */
    margin: 0;
}

@media (max-width: 768px) {
    .area-nav-list {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 12px 20px; /* モバイル用のパディング */
    }
}

/* =============================================
   スクロール動作の改善(スムーズスクロール)
   ============================================= */

.area-nav-accordion-content {
    scroll-behavior: smooth; /* スムーズなスクロール */
}

/* =============================================
   アコーディオン内のコンテンツが少ない場合の対応
   ============================================= */

/* コンテンツが500px未満の場合は、自動的に高さが調整される */
/* max-heightを使用しているため、コンテンツが少ない場合は自然な高さになる */

/* =============================================
   アクセシビリティ: キーボードフォーカス時のスタイル
   ============================================= */

.area-nav-accordion-content:focus-within {
    outline: 2px solid var(--primary-turquoise);
    outline-offset: -2px;
}


<?php get_header(); ?>

<div class="container">
    <!-- パンくずリスト -->
    <?php display_hospital_breadcrumbs(); ?>
    
    <?php
    $current_term = get_queried_object();
    $paged = get_query_var('paged') ? get_query_var('paged') : 1;
    $area_name = $current_term->name;

    $priority_clinic_ids = get_priority_clinics_for_area($current_term->slug);
    $mixed_clinics = get_mixed_area_clinics_for_display($current_term->term_id, $paged);
    $priority_clinic_ids = get_priority_clinics_for_area($current_term->slug);

    $priority_clinics = array();
    $normal_clinics   = array();
    $mixed_clinic_ids = array();

    foreach ($mixed_clinics as $clinic_data) {
        $mixed_clinic_ids[] = $clinic_data['id'];
        if (in_array($clinic_data['id'], $priority_clinic_ids)) {
            $priority_clinics[] = $clinic_data;
        } else {
            $normal_clinics[] = $clinic_data;
        }
    }

    $missing_priority_ids = array_diff($priority_clinic_ids, $mixed_clinic_ids);
    if (!empty($missing_priority_ids)) {
        foreach ($missing_priority_ids as $priority_id) {
            $clinic_post = get_post($priority_id);
            if ($clinic_post && $clinic_post->post_status === 'publish' && $clinic_post->post_type === 'hospital') {
                $priority_clinics[] = array(
                    'id'              => $priority_id,
                    'original_area'   => $current_term->name,
                    'original_area_id'=> $current_term->term_id,
                    'is_neighbor'     => false,
                    'is_forced_priority' => true,
                );
            }
        }
    }

    $all_sorted_clinics = array_merge($priority_clinics, $normal_clinics);

    $posts_per_page = 20;
    $total_clinics  = count($all_sorted_clinics);
    $offset         = ($paged - 1) * $posts_per_page;
    $max_pages      = ceil($total_clinics / $posts_per_page);
    $paged_clinics  = array_slice($all_sorted_clinics, $offset, $posts_per_page);

    $children = get_terms(array(
        'taxonomy'  => 'area',
        'parent'    => $current_term->term_id,
        'hide_empty'=> true,
        'orderby'   => 'name',
        'order'     => 'ASC',
    ));

    $child_cities    = array();
    $child_stations  = array();
    if (!empty($children) && !is_wp_error($children)) {
        foreach ($children as $child) {
            if (strpos($child->slug, '_station_') !== false) {
                $child_stations[] = $child;
            } else {
                $child_cities[] = $child;
            }
        }
    }

    $is_child_term       = ($current_term->parent > 0);
    $area_description    = get_term_meta($current_term->term_id, 'area_description', true);
    $common_content_about = get_option('clinic_common_content_about', '');
    $common_content_howto = get_option('clinic_common_content_howto', '');
    ?>
    
    <div class="mynavi-portal-wrapper">
        
        <!-- ページヘッダー -->
        <header class="area-page-header">
            <h1 class="area-page-title">
                【2025年最新】<?php echo esc_html($area_name); ?>の美容皮膚科クリニックおすすめ<?php echo $total_clinics; ?>選
            </h1>
            
            <?php if (!empty($area_description)) : ?>
                <div class="area-page-description">
                    <?php echo esc_html($area_description); ?>
                </div>
            <?php else : ?>
                <div class="area-page-description">
<p>「<span class="keiko_yellow"><?php echo esc_html($area_name); ?>で美容皮膚科クリニックを探している</span>」<br>
「<span class="keiko_yellow">女性医師対応で、プライバシーに配慮したクリニックを見つけたい</span>」<br>
<br>
といった悩みを抱えている人はいませんか？クリニック選びは情報が多くて迷ってしまいますよね。<br>
<br>
そこで今回は、<span class="keiko_yellow"><?php echo esc_html($area_name); ?>で美容皮膚科を考えている人に向けて、<?php echo esc_html($area_name); ?>周辺でおすすめのクリニックを徹底リサーチ</span>して紹介していきます。</p>
                </div>
            <?php endif; ?>
            
            <div class="article-summary-inline">
                <div class="summary-badge">📋 この記事でわかること</div>
                <ul class="summary-list-inline">
                    <li><?php echo esc_html($area_name); ?>のおすすめ美容皮膚科クリニックを徹底調査</li>
                    <li>各クリニックの営業時間や診療メニューの特徴などをわかりやすく掲載</li>
                    <li><?php echo esc_html($area_name); ?>でオンライン診療に対応した美容皮膚科クリニックがわかる</li>
                    <li>女性医師対応・当日予約・夜間診療に対応したクリニックも掲載</li>
                </ul>
            </div>
        </header>
        
        <!-- 美容皮膚科とは？(アコーディオン) -->
        <?php if (!empty($common_content_about)) : ?>
        <section class="common-content-section">
            <button class="common-accordion-toggle" type="button" aria-expanded="false">
                <div class="toggle-left">
                    <h2><span class="toggle-title"><?php echo esc_html($area_name); ?>ではじめて美容皮膚科を受診される方へ</span></h2>
                    <span class="toggle-hint">タップして詳細を表示</span>
                </div>
                <span class="toggle-icon">▼</span>
            </button>
            <div class="common-accordion-content">
                <div class="common-content-body">
                    <?php echo wp_kses_post($common_content_about); ?>
                </div>
            </div>
        </section>
        <?php endif; ?>
        
        <!-- クリニックの選び方(アコーディオン) -->
        <?php if (!empty($common_content_howto)) : ?>
        <section class="common-content-section">
            <button class="common-accordion-toggle" type="button" aria-expanded="false">
                <div class="toggle-left">
                    <h2><span class="toggle-title"><?php echo esc_html($area_name); ?>の美容皮膚科クリニック選びで失敗しないための4つの重要ポイント</span></h2>
                    <span class="toggle-hint">タップして詳細を表示</span>
                </div>
                <span class="toggle-icon">▼</span>
            </button>
            <div class="common-accordion-content">
                <div class="common-content-body">
<figure><img src="http://tokushikai.xsrv.jp/mentaldbv2/wp-content/uploads/thum.jpg" /></figure>
                    <?php echo wp_kses_post($common_content_howto); ?>
                </div>
            </div>
        </section>
        <?php endif; ?>
        
        <!-- 子エリアナビゲーション(アコーディオン) -->
        <?php if (!empty($child_cities) || !empty($child_stations)) : ?>
        <section class="child-area-navigation">
            <?php if (!empty($child_cities)) : ?>
            <div class="area-nav-block">
                <button class="area-nav-accordion-toggle" type="button" aria-expanded="false">
                    <div class="toggle-left">
                        <span class="nav-icon">📍</span>
                        <span class="toggle-title"><?php echo esc_html($area_name); ?>の市区町村から探す</span>
                        <span class="item-count-badge"><?php echo count($child_cities); ?>件</span>
                    </div>
                    <span class="toggle-icon">▼</span>
                </button>
                <div class="area-nav-accordion-content">
                    <ul class="area-nav-list">
                        <?php foreach ($child_cities as $city) : ?>
                        <li class="area-nav-item">
                            <a href="<?php echo esc_url(get_term_link($city)); ?>">
                                <?php echo esc_html($city->name); ?>
                                <span class="item-count">(<?php echo $city->count; ?>)</span>
                            </a>
                        </li>
                        <?php endforeach; ?>
                    </ul>
                </div>
            </div>
            <?php endif; ?>
            
            <?php if (!empty($child_stations)) : ?>
            <div class="area-nav-block">
                <button class="area-nav-accordion-toggle" type="button" aria-expanded="false">
                    <div class="toggle-left">
                        <span class="nav-icon">🚉</span>
                        <span class="toggle-title"><?php echo esc_html($area_name); ?>の最寄り駅から探す</span>
                        <span class="item-count-badge"><?php echo count($child_stations); ?>件</span>
                    </div>
                    <span class="toggle-icon">▼</span>
                </button>
                <div class="area-nav-accordion-content">
                    <ul class="area-nav-list">
                        <?php foreach ($child_stations as $station) : ?>
                        <li class="area-nav-item">
                            <a href="<?php echo esc_url(get_term_link($station)); ?>">
                                <?php echo esc_html(str_replace($current_term->name, '', $station->name)); ?>
                                <span class="item-count">(<?php echo $station->count; ?>)</span>
                            </a>
                        </li>
                        <?php endforeach; ?>
                    </ul>
                </div>
            </div>
            <?php endif; ?>
        </section>
        <?php endif; ?>
        
        <!-- クリニック一覧 -->
        <section class="clinic-list-section">
            <h2 class="section-title">
                <?php echo esc_html($area_name); ?>で評判の美容皮膚科クリニックおすすめ<?php echo $total_clinics; ?>選
            </h2>
            
            <?php if (!empty($paged_clinics)) : ?>
                
                <!-- クリニック比較テーブル -->
                <div class="clinic-comparison-wrapper">
                    <div class="scroll-hint-text">← 横にスクロールできます →</div>
                    <div class="clinic-comparison-table-container js-scrollable">
                        <table class="clinic-comparison-table">
                            <thead>
                                <tr>
                                    <th class="fixed-column">項目</th>
                                    <?php foreach ($paged_clinics as $clinic_data) :
                                        $clinic_post = get_post($clinic_data['id']);
                                        if (!$clinic_post) continue;
                                    ?>
                                    <th><?php echo esc_html($clinic_post->post_title); ?></th>
                                    <?php endforeach; ?>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td class="fixed-column">WEB予約</td>
                                    <?php foreach ($paged_clinics as $clinic_data) :
                                        $v = get_post_meta($clinic_data['id'], 'web_reservation', true);
                                    ?>
                                    <td class="<?php echo $v ? 'available' : 'unavailable'; ?>"><?php echo $v ? '可能' : '不可'; ?></td>
                                    <?php endforeach; ?>
                                </tr>
                                <tr>
                                    <td class="fixed-column">土曜診療</td>
                                    <?php foreach ($paged_clinics as $clinic_data) :
                                        $v = get_post_meta($clinic_data['id'], 'saturday_available', true);
                                    ?>
                                    <td class="<?php echo $v ? 'available' : 'unavailable'; ?>"><?php echo $v ? 'あり' : 'なし'; ?></td>
                                    <?php endforeach; ?>
                                </tr>
                                <tr>
                                    <td class="fixed-column">日曜診療</td>
                                    <?php foreach ($paged_clinics as $clinic_data) :
                                        $v = get_post_meta($clinic_data['id'], 'sunday_available', true);
                                    ?>
                                    <td class="<?php echo $v ? 'available' : 'unavailable'; ?>"><?php echo $v ? 'あり' : 'なし'; ?></td>
                                    <?php endforeach; ?>
                                </tr>
                                <tr>
                                    <td class="fixed-column">当日施術</td>
                                    <?php foreach ($paged_clinics as $clinic_data) :
                                        $v = get_post_meta($clinic_data['id'], 'same_day_treatment', true);
                                    ?>
                                    <td class="<?php echo $v ? 'available' : 'unavailable'; ?>"><?php echo $v ? '可能' : '不可'; ?></td>
                                    <?php endforeach; ?>
                                </tr>
                                <tr>
                                    <td class="fixed-column">個室</td>
                                    <?php foreach ($paged_clinics as $clinic_data) :
                                        $v = get_post_meta($clinic_data['id'], 'private_room', true);
                                    ?>
                                    <td class="<?php echo $v ? 'available' : 'unavailable'; ?>"><?php echo $v ? 'あり' : 'なし'; ?></td>
                                    <?php endforeach; ?>
                                </tr>
                                <tr>
                                    <td class="fixed-column">診療時間</td>
                                    <?php foreach ($paged_clinics as $clinic_data) :
                                        $bh = get_post_meta($clinic_data['id'], 'business_hours', true);
                                        $txt = $bh ? mb_strimwidth(preg_replace('/\s+/', ' ', strip_tags($bh)), 0, 50, '...') : '-';
                                    ?>
                                    <td class="hours-cell"><?php echo esc_html($txt); ?></td>
                                    <?php endforeach; ?>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                
                <div class="clinic-list">
                    <?php
                    $clinic_number = $offset + 1;
                    foreach ($paged_clinics as $clinic_data) :
                        $clinic_id   = $clinic_data['id'];
                        $clinic_post = get_post($clinic_id);
                        if (!$clinic_post) continue;

                        // ── 基本情報 ──
                        $name         = get_post_meta($clinic_id, 'name', true) ?: $clinic_post->post_title;
                        $prefecture   = get_post_meta($clinic_id, 'prefecture', true);
                        $phone        = get_post_meta($clinic_id, 'phone', true);
                        $address      = get_post_meta($clinic_id, 'address', true);
                        $access       = get_post_meta($clinic_id, 'access', true);
                        $homepage_url = get_post_meta($clinic_id, 'homepage_url', true);
                        $business_hours = get_post_meta($clinic_id, 'business_hours', true);
                        $schedule     = get_post_meta($clinic_id, 'schedule', true);
                        $clinic_description = get_post_meta($clinic_id, 'clinic_description', true);
                        $clinic_appeals     = get_post_meta($clinic_id, 'clinic_appeals', true);

                        // ── 施術メニュー ──
                        $spot_freckle_removal = get_post_meta($clinic_id, 'spot_freckle_removal', true);
                        $pico_toning          = get_post_meta($clinic_id, 'pico_toning', true);
                        $pico_toning_price    = get_post_meta($clinic_id, 'pico_toning_price', true);
                        $pico_spot            = get_post_meta($clinic_id, 'pico_spot', true);
                        $pico_spot_price      = get_post_meta($clinic_id, 'pico_spot_price', true);
                        $mole_removal         = get_post_meta($clinic_id, 'mole_removal', true);
                        $co2_laser            = get_post_meta($clinic_id, 'co2_laser', true);
                        $co2_laser_price      = get_post_meta($clinic_id, 'co2_laser_price', true);
                        $acne_care            = get_post_meta($clinic_id, 'acne_care', true);
                        $peeling              = get_post_meta($clinic_id, 'peeling', true);
                        $peeling_price        = get_post_meta($clinic_id, 'peeling_price', true);
                        $acne_scar            = get_post_meta($clinic_id, 'acne_scar', true);
                        $dermapen             = get_post_meta($clinic_id, 'dermapen', true);
                        $dermapen_price       = get_post_meta($clinic_id, 'dermapen_price', true);
                        $potenza              = get_post_meta($clinic_id, 'potenza', true);
                        $potenza_price        = get_post_meta($clinic_id, 'potenza_price', true);
                        $pore_cleansing       = get_post_meta($clinic_id, 'pore_cleansing', true);
                        $hydrafacial          = get_post_meta($clinic_id, 'hydrafacial', true);
                        $hydrafacial_price    = get_post_meta($clinic_id, 'hydrafacial_price', true);
                        $hyaluronic_acid      = get_post_meta($clinic_id, 'hyaluronic_acid', true);

                        // ── 特徴フラグ ──
                        $saturday_available   = get_post_meta($clinic_id, 'saturday_available', true);
                        $sunday_available     = get_post_meta($clinic_id, 'sunday_available', true);
                        $first_visit_discount = get_post_meta($clinic_id, 'first_visit_discount', true);
                        $same_day_treatment   = get_post_meta($clinic_id, 'same_day_treatment', true);
                        $web_reservation      = get_post_meta($clinic_id, 'web_reservation', true);
                        $private_room         = get_post_meta($clinic_id, 'private_room', true);
                        $near_station         = get_post_meta($clinic_id, 'near_station', true);
                        $cash_payment         = get_post_meta($clinic_id, 'cash_payment', true);
                        $credit_card_payment  = get_post_meta($clinic_id, 'credit_card_payment', true);
                        $qr_code_payment      = get_post_meta($clinic_id, 'qr_code_payment', true);
                        $e_money_payment      = get_post_meta($clinic_id, 'e_money_payment', true);

                        $is_priority = in_array($clinic_id, $priority_clinic_ids);
                    ?>
                    
                    <article class="clinic-card <?php echo $is_priority ? 'priority-clinic' : ''; ?> <?php echo $clinic_data['is_neighbor'] ? 'neighbor-clinic' : ''; ?>">
                        
                        <?php if ($is_priority) : ?>
                        <div class="priority-badge">
                            <span class="badge-icon">⭐</span>おすすめ
                        </div>
                        <?php endif; ?>
                        
                        <div class="clinic-card-inner">
                            
                            <!-- クリニック名 -->
                            <?php if ($is_priority) : ?>
                            <h3 class="clinic-name">
                                <span class="clinic-number"><?php echo $clinic_number; ?></span>
                                <a href="<?php echo esc_url($homepage_url); ?>"><?php echo esc_html($clinic_post->post_title); ?></a>
                            </h3>
                            <?php else : ?>
                            <h3 class="clinic-name">
                                <span class="clinic-number"><?php echo $clinic_number; ?></span>
                                <?php echo esc_html($clinic_post->post_title); ?>
                            </h3>
                            <?php endif; ?>
                            
                            <!-- 最寄り駅 -->
                            <?php
                            $clinic_areas = get_the_terms($clinic_id, 'area');
                            $station_names = array();
                            if ($clinic_areas && !is_wp_error($clinic_areas)) {
                                foreach ($clinic_areas as $area) {
                                    if (strpos($area->slug, '_station_') !== false) {
                                        $sn = trim(str_replace($current_term->name, '', $area->name));
                                        if ($sn) $station_names[] = $sn;
                                    }
                                }
                            }
                            if (!empty($station_names)) : ?>
                            <div class="clinic-stations">
                                <span class="station-icon">🚉</span>
                                <?php echo esc_html(implode(' / ', $station_names)); ?>
                            </div>
                            <?php endif; ?>
                            
                            <!-- 特徴タグ -->
                            <div class="clinic-feature-tags">
                                <?php if ($web_reservation)      echo '<span class="feature-tag">WEB予約</span>'; ?>
                                <?php if ($saturday_available)   echo '<span class="feature-tag">土曜診療</span>'; ?>
                                <?php if ($sunday_available)     echo '<span class="feature-tag">日曜診療</span>'; ?>
                                <?php if ($same_day_treatment)   echo '<span class="feature-tag">当日施術</span>'; ?>
                                <?php if ($first_visit_discount) echo '<span class="feature-tag">初診割引</span>'; ?>
                                <?php if ($private_room)         echo '<span class="feature-tag">個室あり</span>'; ?>
                                <?php if ($near_station)         echo '<span class="feature-tag">駅近</span>'; ?>
                                <?php if ($credit_card_payment)  echo '<span class="feature-tag">カード決済可</span>'; ?>
                            </div>

                            <!-- 施術メニュー -->
                            <div class="clinic-feature-detail">
                                <button class="feature-accordion-toggle" type="button">
                                    <span class="toggle-text">施術メニュー・詳しい特徴</span>
                                    <span class="toggle-icon">▼</span>
                                </button>
                                <div class="feature-accordion-content">

                                    <!-- 施術メニュー -->
                                    <h5 style="margin:10px 0 6px;">施術メニュー</h5>
                                    <ul class="feature-detail-grid">
                                        <?php
                                        $menus = array(
                                            'シミ・そばかす除去'  => $spot_freckle_removal,
                                            'ピコトーニング'      => $pico_toning,
                                            'ピコスポット'        => $pico_spot,
                                            'ほくろ除去'          => $mole_removal,
                                            'CO2レーザー'         => $co2_laser,
                                            'ニキビ治療'          => $acne_care,
                                            'ピーリング'          => $peeling,
                                            'ニキビ跡治療'        => $acne_scar,
                                            'ダーマペン'          => $dermapen,
                                            'ポテンツァ'          => $potenza,
                                            '毛穴洗浄'            => $pore_cleansing,
                                            'ハイドラフェイシャル' => $hydrafacial,
                                            'ヒアルロン酸'        => $hyaluronic_acid,
                                        );
                                        foreach ($menus as $label => $flag) : ?>
                                        <li class="feature-detail-item">
                                            <span class="feature-detail-label"><?php echo esc_html($label); ?></span>
                                            <span class="feature-detail-value <?php echo $flag ? 'available' : 'unavailable'; ?>">
                                                <?php echo $flag ? 'あり' : 'なし'; ?>
                                            </span>
                                        </li>
                                        <?php endforeach; ?>
                                    </ul>

                                    <!-- クリニック特徴 -->
                                    <h5 style="margin:14px 0 6px;">クリニック特徴</h5>
                                    <ul class="feature-detail-grid">
                                        <?php
                                        $features = array(
                                            'WEB予約'    => $web_reservation,
                                            '土曜診療'   => $saturday_available,
                                            '日曜診療'   => $sunday_available,
                                            '当日施術'   => $same_day_treatment,
                                            '初診割引'   => $first_visit_discount,
                                            '個室あり'   => $private_room,
                                            '駅近'       => $near_station,
                                            '現金決済'   => $cash_payment,
                                            'カード決済' => $credit_card_payment,
                                            'QR決済'     => $qr_code_payment,
                                            '電子マネー' => $e_money_payment,
                                        );
                                        foreach ($features as $label => $flag) : ?>
                                        <li class="feature-detail-item">
                                            <span class="feature-detail-label"><?php echo esc_html($label); ?></span>
                                            <span class="feature-detail-value <?php echo $flag ? 'available' : 'unavailable'; ?>">
                                                <?php echo $flag ? '可能' : '不可'; ?>
                                            </span>
                                        </li>
                                        <?php endforeach; ?>
                                    </ul>
                                </div>
                            </div>
                            
                            <!-- 施術カテゴリ別料金ボックス -->
                            <?php
                            // カテゴリ定義: array( フラグ, カテゴリ名, array( メニュー名 => array(フラグ, 料金) ) )
                            $treatment_categories = array(
                                array(
                                    'flag'  => $spot_freckle_removal,
                                    'label' => 'シミ・そばかす除去',
                                    'items' => array(
                                        'ピコトーニング' => array($pico_toning, $pico_toning_price),
                                        'ピコスポット'   => array($pico_spot,   $pico_spot_price),
                                        'CO2レーザー'    => array($co2_laser,   $co2_laser_price),
                                    ),
                                ),
                                array(
                                    'flag'  => $mole_removal,
                                    'label' => 'ほくろ除去',
                                    'items' => array(
                                        'CO2レーザー' => array($co2_laser, $co2_laser_price),
                                    ),
                                ),
                                array(
                                    'flag'  => $acne_care,
                                    'label' => 'ニキビ・ニキビ跡治療',
                                    'items' => array(
                                        'ピーリング'   => array($peeling,  $peeling_price),
                                        'ダーマペン'   => array($dermapen, $dermapen_price),
                                        'ポテンツァ'   => array($potenza,  $potenza_price),
                                    ),
                                ),
                                array(
                                    'flag'  => $pore_cleansing,
                                    'label' => '毛穴・肌質改善',
                                    'items' => array(
                                        'ハイドラフェイシャル' => array($hydrafacial, $hydrafacial_price),
                                        'ダーマペン'           => array($dermapen,    $dermapen_price),
                                        'ポテンツァ'           => array($potenza,     $potenza_price),
                                    ),
                                ),
                                array(
                                    'flag'  => $hyaluronic_acid,
                                    'label' => 'ヒアルロン酸注射',
                                    'items' => array(),
                                ),
                            );

                            // 表示すべきカテゴリが1つでもあるか確認
                            $has_any_category = false;
                            foreach ($treatment_categories as $cat) {
                                if ($cat['flag']) { $has_any_category = true; break; }
                            }
                            ?>

                            <?php if ($has_any_category) : ?>
                            <div class="treatment-menu-section">
                                <h4 class="detail-title">施術メニュー・料金</h4>
                                <div class="treatment-category-list">
                                <?php foreach ($treatment_categories as $cat) :
                                    if (!$cat['flag']) continue;
                                ?>
                                    <div class="treatment-category-block">
                                        <div class="treatment-category-heading">
                                            <span class="treatment-check">⭕</span>
                                            <span class="treatment-category-name"><?php echo esc_html($cat['label']); ?></span>
                                        </div>
                                        <?php if (!empty($cat['items'])) : ?>
                                        <div class="treatment-items-box">
                                            <?php foreach ($cat['items'] as $menu_name => $pair) :
                                                // そのメニューのフラグが立っているものだけ表示
                                                if (!$pair[0]) continue;
                                            ?>
                                            <div class="treatment-item-row">
                                                <span class="treatment-item-name"><?php echo esc_html($menu_name); ?></span>
                                                <span class="treatment-item-price">
                                                    <?php echo $pair[1] ? esc_html($pair[1]) : '要問合せ'; ?>
                                                </span>
                                            </div>
                                            <?php endforeach; ?>
                                        </div>
                                        <?php endif; ?>
                                    </div>
                                <?php endforeach; ?>
                                </div>
                            </div>
                            <?php endif; ?>

                            <!-- 基本情報 -->
                            <div class="clinic-basic-info-icotto">
                                <?php if ($address) : ?>
                                <div class="info-item">
                                    <div class="info-icon">📍</div>
                                    <div class="info-content">
                                        <div class="info-label">住所</div>
                                        <div class="info-value"><?php echo esc_html($address); ?></div>
                                    </div>
                                </div>
                                <?php endif; ?>
                                
                                <?php if ($access) : ?>
                                <div class="info-item">
                                    <div class="info-icon">🚃</div>
                                    <div class="info-content">
                                        <div class="info-label">アクセス</div>
                                        <div class="info-value"><?php echo esc_html($access); ?></div>
                                    </div>
                                </div>
                                <?php endif; ?>
                                
                                <?php if ($phone) : ?>
                                <div class="info-item">
                                    <div class="info-icon">📞</div>
                                    <div class="info-content">
                                        <div class="info-label">電話番号</div>
                                        <div class="info-value">
                                            <a href="tel:<?php echo esc_attr(str_replace(array('-',' ','(',')'), '', $phone)); ?>" class="phone-link">
                                                <?php echo esc_html($phone); ?>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                                <?php endif; ?>
                                
                                <?php if ($schedule) : ?>
                                <div class="info-item">
                                    <div class="info-icon">🕐</div>
                                    <div class="info-content">
                                        <div class="info-label">営業時間</div>
                                        <div class="info-value schedule-value"><?php echo wp_kses_post($schedule); ?></div>
                                    </div>
                                </div>
                                <?php endif; ?>
                                
                                <?php if ($business_hours) : ?>
                                <div class="info-item">
                                    <div class="info-icon">⏰</div>
                                    <div class="info-content">
                                        <div class="info-label">診療時間</div>
                                        <div class="info-value schedule-value"><?php echo wp_kses_post($business_hours); ?></div>
                                    </div>
                                </div>
                                <?php endif; ?>
                            </div>
                            
                            <!-- クリニック詳細 -->
                            <?php if ($clinic_appeals || $clinic_description) : ?>
                            <div class="clinic-detail-section">
                                <h4 class="detail-title"><?php echo esc_html($clinic_post->post_title); ?>の詳細</h4>
                                <div class="detail-content">
                                    <?php if ($clinic_appeals)     echo wp_kses_post($clinic_appeals); ?>
                                    <?php if ($clinic_description) echo wp_kses_post($clinic_description); ?>
                                </div>
                            </div>
                            <?php endif; ?>
                            
                            <!-- GoogleMap(遅延読み込み) -->
                            <?php if ($address) :
                                $clean_address   = preg_replace('/^(.*?\d+丁目?\d+[\-ー−]?\d*(?:番地?)?(?:[\-ー−]?\d+)?(?:号)?)\s+.*$/u', '$1', $address);
                                $encoded_address = urlencode($clean_address);
                                $map_id          = 'map-' . $clinic_id;
                            ?>
                            <div class="google-map-section">
                                <h4 class="detail-title">アクセスマップ</h4>
                                <div class="map-wrapper">
                                    <div class="lazy-map"
                                         id="<?php echo esc_attr($map_id); ?>"
                                         data-address="<?php echo esc_attr($encoded_address); ?>"
                                         style="width:100%;height:300px;background:#f5f5f5;border:1px solid #ddd;cursor:pointer;position:relative;border-radius:8px;overflow:hidden;">
                                        <div style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;color:#666;">
                                            <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin:0 auto 10px;">
                                                <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
                                                <circle cx="12" cy="10" r="3"></circle>
                                            </svg>
                                            <p style="margin:0;font-size:14px;font-weight:500;">地図を表示する</p>
                                        </div>
                                    </div>
                                    <script>
                                    (function() {
                                        var mapEl = document.getElementById('<?php echo esc_js($map_id); ?>');
                                        mapEl.addEventListener('click', function() {
                                            var address = this.getAttribute('data-address');
                                            this.style.cursor = 'default';
                                            this.innerHTML = '<iframe width="100%" height="300" style="border:0;" loading="lazy" allowfullscreen referrerpolicy="no-referrer-when-downgrade" src="https://maps.google.co.jp/maps?output=embed&q=' + address + '&z=16"></iframe>';
                                        }, {once: true});
                                    })();
                                    </script>
                                </div>
                            </div>
                            <?php endif; ?>
                            
                            <!-- 公式サイトボタン -->
                            <?php if ($homepage_url) : ?>
                            <div class="clinic-actions">
                                <a href="<?php echo esc_url($homepage_url); ?>"
                                   target="_blank"
                                   <?php echo $is_priority ? '' : 'rel="nofollow noopener noreferrer"'; ?>
                                   class="btn-official-site">
                                    公式サイトを見る
                                </a>
                            </div>
                            <?php endif; ?>
                            
                        </div>
                        <div class="attention"><p><a href="/mental/contanct">掲載情報の修正が必要な場合はこちら</a></p></div>
                    </article>
                    
                    <?php $clinic_number++; endforeach; ?>
                </div>
                
                <!-- ページネーション -->
                <?php if ($max_pages > 1) : ?>
                <div class="pagination-wrapper">
                    <?php
                    $big = 999999999;
                    echo paginate_links(array(
                        'base'      => str_replace($big, '%#%', esc_url(get_pagenum_link($big))),
                        'format'    => '?paged=%#%',
                        'current'   => max(1, $paged),
                        'total'     => $max_pages,
                        'prev_text' => '&laquo; 前へ',
                        'next_text' => '次へ &raquo;',
                        'mid_size'  => 2,
                        'type'      => 'list',
                    ));
                    ?>
                </div>
                <?php endif; ?>
                
            <?php else : ?>
                <div class="no-clinics-found">
                    <p>現在、<?php echo esc_html($area_name); ?>に登録されているクリニックはありません。</p>
                    <?php if ($is_child_term) :
                        $parent_term = get_term($current_term->parent, 'area');
                        if ($parent_term && !is_wp_error($parent_term)) : ?>
                        <p><a href="<?php echo esc_url(get_term_link($parent_term)); ?>" class="btn-back">
                            <?php echo esc_html($parent_term->name); ?>の一覧に戻る
                        </a></p>
                        <?php endif;
                    endif; ?>
                </div>
            <?php endif; ?>
        </section>
        
        <!-- 関連エリア -->
        <?php if ($is_child_term) :
            $parent_term = get_term($current_term->parent, 'area');
            $all_sibling_terms = get_terms(array(
                'taxonomy'  => 'area',
                'parent'    => $current_term->parent,
                'exclude'   => array($current_term->term_id),
                'hide_empty'=> true,
                'orderby'   => 'count',
                'order'     => 'DESC',
            ));
            $sibling_stations = array();
            $sibling_cities   = array();
            if (!empty($all_sibling_terms) && !is_wp_error($all_sibling_terms)) {
                foreach ($all_sibling_terms as $sibling) {
                    if (strpos($sibling->slug, '_station_') !== false) {
                        $sibling_stations[] = $sibling;
                    } else {
                        $sibling_cities[] = $sibling;
                    }
                }
            }
        ?>
            <section class="related-areas-section">
                <h2 class="section-title">近隣エリアから探す</h2>
                
                <?php if (!empty($sibling_cities)) : ?>
                <div class="related-area-block">
                    <h3 class="related-area-title">同じ都道府県の他のエリア</h3>
                    <ul class="related-area-list">
                        <?php $count = 0; foreach ($sibling_cities as $city) :
                            if ($count >= 10) break; $count++; ?>
                        <li class="related-area-item">
                            <a href="<?php echo esc_url(get_term_link($city)); ?>">
                                <?php echo esc_html($city->name); ?>
                                <span class="count">(<?php echo $city->count; ?>)</span>
                            </a>
                        </li>
                        <?php endforeach; ?>
                    </ul>
                </div>
                <?php endif; ?>
                
                <?php if (!empty($sibling_stations)) : ?>
                <div class="related-area-block">
                    <h3 class="related-area-title">同じ都道府県の他の駅</h3>
                    <ul class="related-area-list">
                        <?php $count = 0; foreach ($sibling_stations as $station) :
                            if ($count >= 10) break; $count++;
                            $display_name = str_replace($parent_term->name, '', $station->name);
                        ?>
                        <li class="related-area-item">
                            <a href="<?php echo esc_url(get_term_link($station)); ?>">
                                <?php echo esc_html($display_name); ?>
                                <span class="count">(<?php echo $station->count; ?>)</span>
                            </a>
                        </li>
                        <?php endforeach; ?>
                    </ul>
                </div>
                <?php endif; ?>
            </section>
        <?php endif; ?>
        
    </div><!-- .mynavi-portal-wrapper -->
</div><!-- .container -->

<!-- 構造化データ -->
<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "CollectionPage",
    "name": "<?php echo esc_js($area_name); ?>の美容皮膚科クリニック一覧",
    "description": "<?php echo esc_js($area_name); ?>の美容皮膚科クリニック情報。当日予約・女性医師対応・夜間土日診療対応クリニックを掲載。",
    "url": "<?php echo esc_js(get_term_link($current_term)); ?>",
    "numberOfItems": <?php echo $total_clinics; ?>,
    "specialty": "Dermatology"
}
</script>

<!-- アコーディオン用JavaScript -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    ['.feature-accordion-toggle', '.area-nav-accordion-toggle', '.common-accordion-toggle'].forEach(function(sel) {
        document.querySelectorAll(sel).forEach(function(toggle) {
            toggle.addEventListener('click', function() {
                var content = this.nextElementSibling;
                var icon    = this.querySelector('.toggle-icon');
                var isOpen  = content.classList.contains('active');
                content.classList.toggle('active', !isOpen);
                icon.textContent = isOpen ? '▼' : '▲';
                this.setAttribute('aria-expanded', String(!isOpen));
            });
        });
    });
});
</script>

<!-- 地図遅延読み込み用CSS -->
<style>
.lazy-map { transition: opacity 0.3s, transform 0.2s; }
.lazy-map:hover { opacity: 0.95; transform: scale(0.99); }
</style>

<?php get_footer(); ?>