/* =========================================
   当湯（当温泉）についてセクション
   温泉の紹介文と画像、注意事項を配置するエリア
   ========================================= */

/* テキストと画像を横並びにする（Flexbox） */
.section-container {
    display: flex;
    align-items: center;
    gap: 50px;
}

.section-text {
    flex: 1;
}

.section-text p {
    margin-bottom: 20px;
    font-size: 1.1rem;
}

.section-image {
    flex: 1;
}

/* 画像に角丸効果を追加 */
.rounded-image {
    border-radius: 12px;
}

.shadow-image {
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

/* 注意事項などを強調して表示するための目立つボックス */
.notice-box {
    background-color: #fff9f9;
    border-left: 4px solid var(--accent-color);
    padding: 20px;
    margin-top: 30px;
    border-radius: 0 8px 8px 0;
}

.notice-box h3 {
    color: var(--accent-color);
    margin-bottom: 15px;
    font-size: 1.2rem;
}

.notice-list {
    list-style: none;
}

.notice-list li {
    margin-bottom: 10px;
    position: relative;
    padding-left: 20px;
}

.notice-list li::before {
    content: "!";
    position: absolute;
    left: 0;
    top: 2px;
    color: var(--accent-color);
    font-weight: bold;
}

/* =========================================
   設備案内・追加情報 / タグリスト
   ========================================= */
.facility-info {
    margin-top: 25px;
}

.facility-info p {
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 20px;
    color: var(--text-color);
}

.facility-tags {
    display: grid;
    /* PCでは幅に応じて多列表示（自動） */
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 8px;
}

.facility-tag {
    background-color: #79a2ba;
    /* スクリーンショット基準のブルーグレー */
    color: #ffffff;
    padding: 8px 5px;
    font-size: 0.85rem;
    font-weight: 500;
    text-align: center;
    border-radius: 9999px;
    /* 要件「タグは丸くする」 */
    display: flex;
    justify-content: center;
    align-items: center;
    /* 極端に幅が狭くなった時に文字がはみ出さないように */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}