/* ========================================================================== 
   tripadvisor.css - ウィジェット専用スタイル（余白最適化・干渉対策 決定版）
   ========================================================================== */

/* 全体コンテナ：上下の余白を最小化してセクション間・フッター間の間伸びを解消 */
.tripadvisor-container {
    width: 100%;
    margin: 40px auto; /* 上下の外余白を大幅に縮小（60px → 10px） */
    padding: 0 20px;
    text-align: center;
    box-sizing: border-box;
    display: block;
    clear: both; /* 他のフロート要素との干渉を防止 */
}

/* 外枠：高さを抑え、コンパクトかつ高級感のあるカードスタイルに */
.ta-widget-wrapper {
    display: inline-block;
    width: 100%;
    max-width: 480px; 
    background: #ffffff;
    padding: 15px 20px; /* 内部の上下余白を半分に圧縮 */
    border: 1px solid #e5dcd2;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    box-sizing: border-box;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden; /* ウィジェットの不要なはみ出しをカット */
}

/* ホバー挙動：カードが浮き上がる演出のみを維持 */
.ta-widget-wrapper:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}

/* ★最重要：Tripadvisor側の強制スタイル（白背景・紺枠）をすべて無効化 */
.TA_selfserveprop, 
.TA_selfserveprop *,
.TA_selfserveprop *:hover {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    background-color: transparent !important;
    outline: none !important;
    text-decoration: none !important;
}

/* ウィジェット本体：高さを必要最小限に抑える */
.TA_selfserveprop {
    width: 100% !important;
    margin: 0 auto !important;
    min-height: 100px !important; /* 高さを150pxから100pxに短縮して余白を排除 */
}

/* 下部のテキストリンク集：カード下部のマージンを最小化 */
.TA_links {
    margin: 5px 0 0 !important; /* 上の余白をさらに詰め */
    padding: 0 !important;
    list-style: none !important;
    display: flex;
    justify-content: center;
    gap: 10px;
    position: relative;
    z-index: 2;
}

.TA_links a {
    color: #8a7b6a !important;
    text-decoration: none !important;
    font-size: 10px !important; /* 11pxから10pxへ微調整 */
    transition: opacity 0.2s ease;
}

/* スマホ対応：画面の狭いデバイスではさらに余白をタイトに設定 */
@media (max-width: 768px) {
    .tripadvisor-container {
        margin: 5px auto 25px auto; /* スマホでは上下余白をほぼゼロに近く */
        padding: 0 10px; /* 左右の余白を絞ってウィジェット幅を確保 */
    }
    .ta-widget-wrapper {
        padding: 12px 10px; /* 左右のパディングを減らして横幅を稼ぐ */
        max-width: 100%; /* スマホ画面幅いっぱいに広げる */
    }

    /* ホテル名の表示切れ対策（SP専用） */
    .TA_selfserveprop .propertyTitle,
    .TA_selfserveprop a,
    .TA_selfserveprop div {
        font-size: 13px !important; /* 文字サイズを微調整して収める */
        line-height: 1.3 !important;
        white-space: normal !important; /* 改行を許可して全表示を優先 */
        word-break: break-all !important;
    }
    
    /* ウィジェット内部の高さ制限を解除 */
    .TA_selfserveprop {
        min-height: auto !important;
        height: auto !important;
    }
}