/**
 * コンテンツ修正用CSS - フェーズ1（緊急対応）
 * テーブル、画像、基本レイアウトの修正
 */

/* ========================================
   コンテンツトップの画像修正
======================================== */
.entry-content > .wp-block-image:first-child,
.entry-content > figure:first-child {
    margin-top: 0;
    margin-bottom: 2em;
    width: 100%;
}

.entry-content > .wp-block-image:first-child img,
.entry-content > figure:first-child img {
    width: 100%;
    height: auto;
    object-fit: cover;
    max-height: 400px;
}

/* メインビジュアル画像の修正 */
.main-visual,
.hero-image,
.top-image {
    width: 100%;
    margin: 0 0 2em 0;
    overflow: hidden;
}

.main-visual img,
.hero-image img,
.top-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* ========================================
   テーブル/料金表の修正
======================================== */
.wp-block-table,
.price-table,
.clinic-table,
table {
    width: 100%;
    max-width: 100%;
    margin: 2em auto;
    border-collapse: collapse;
    background: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.wp-block-table th,
.wp-block-table td,
table th,
table td {
    padding: 1em;
    border: 1px solid #e0e0e0;
    text-align: left;
    vertical-align: middle;
}

.wp-block-table th,
table th {
    background-color: #f8f9fa;
    font-weight: bold;
    white-space: nowrap;
}

.wp-block-table tbody tr:hover,
table tbody tr:hover {
    background-color: #f8f9fa;
}

/* 料金表の特別スタイル */
.price-table td:last-child,
.clinic-table td:last-child {
    text-align: right;
    font-weight: bold;
    color: #e91e63;
    font-size: 1.1em;
}

/* レスポンシブテーブル */
@media (max-width: 768px) {
    .wp-block-table,
    .price-table,
    .clinic-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    
    .wp-block-table table,
    .price-table table,
    .clinic-table table {
        min-width: 600px;
    }
}

/* ========================================
   画像ギャラリー/カルーセルの修正
======================================== */
.wp-block-gallery,
.gallery,
.image-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1.5em;
    margin: 2em 0;
    padding: 0;
}

.wp-block-gallery .wp-block-image,
.gallery-item,
.gallery img {
    margin: 0;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.wp-block-gallery .wp-block-image:hover,
.gallery-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.wp-block-gallery img,
.gallery img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

/* カルーセル/スライダー */
.carousel,
.slider,
.slick-slider {
    margin: 2em 0;
    position: relative;
}

.carousel img,
.slider img,
.slick-slide img {
    width: 100%;
    height: auto;
    display: block;
}

.slick-prev,
.slick-next {
    z-index: 10;
    background: rgba(0,0,0,0.5);
    border-radius: 50%;
    width: 40px;
    height: 40px;
}

.slick-prev:hover,
.slick-next:hover {
    background: rgba(0,0,0,0.8);
}

.slick-dots {
    bottom: 20px;
}

.slick-dots li button:before {
    color: #fff;
    font-size: 12px;
}

/* ========================================
   基本的なレイアウト修正
======================================== */
.entry-content,
.page-content,
.post-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* セクション間の余白 */
.entry-content > * {
    margin-top: 0;
    margin-bottom: 2em;
}

.entry-content > *:last-child {
    margin-bottom: 0;
}

/* セクションの基本スタイル */
.content-section,
section {
    padding: 3em 0;
    border-bottom: 1px solid #e0e0e0;
}

.content-section:last-child,
section:last-child {
    border-bottom: none;
}

/* コンテナ幅の統一 */
.container,
.l-container,
.wrap {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ========================================
   ビフォーアフター画像の修正
======================================== */
.before-after,
.compare-images {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2em;
    margin: 2em 0;
    align-items: center;
}

.before-after figure,
.compare-images figure {
    position: relative;
    margin: 0;
}

.before-after figcaption,
.compare-images figcaption {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(0,0,0,0.7);
    color: #fff;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.9em;
    font-weight: bold;
}

.before-after img,
.compare-images img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

@media (max-width: 768px) {
    .before-after,
    .compare-images {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   グラフ/チャートの修正
======================================== */
.chart-container,
.graph-container {
    margin: 2em 0;
    padding: 1.5em;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.chart-container canvas,
.graph-container canvas {
    max-width: 100%;
    height: auto !important;
}

/* ========================================
   コンテンツ内の画像全般
======================================== */
.entry-content img {
    max-width: 100%;
    height: auto;
}

.entry-content figure {
    margin: 2em 0;
}

.entry-content figcaption {
    margin-top: 0.5em;
    text-align: center;
    font-size: 0.9em;
    color: #666;
}

/* 画像の配置クラス */
.alignleft {
    float: left;
    margin: 0 2em 1em 0;
}

.alignright {
    float: right;
    margin: 0 0 1em 2em;
}

.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.alignfull {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
}

.alignwide {
    max-width: calc(100% + 4em);
    margin-left: -2em;
    margin-right: -2em;
}

@media (max-width: 768px) {
    .alignleft,
    .alignright {
        float: none;
        margin: 1em auto;
        display: block;
    }
    
    .alignwide {
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
}