/*--------------------------------------------------
  Global / Base Styles
  - ページ全体の共通設定や基本的な要素のスタイル
--------------------------------------------------*/
/* ギャラリーコンテナ */
.gallery-container {
    width: 80%;
    max-width: 900px; /* 少し広めに設定 */
    margin: 20px auto;
    border: 1px solid #ddd;
    padding: 10px;
    /*box-shadow: 0 0 10px rgba(0,0,0,0.1);*/ /* 必要なければ削除またはコメントアウト維持 */
}

/*--------------------------------------------------
  Main Image Display Area
  - メイン画像の表示とトランジション
--------------------------------------------------*/
.main-image-display {
    width: 100%;
    padding-bottom: 56.25%; /* 例: 16:9 のアスペクト比 */
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background-color: #fff;
    margin-bottom: 10px;
    margin-top: 0; /* 写真上部の余白をなくす */
}

.main-image-display img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;    
    height: 100%;    
    object-fit: contain; /* アスペクト比を維持して収まるように表示 */
    display: none; /* 非アクティブな画像は非表示 */
    opacity: 0;
    transition: opacity 0.5s ease-in-out; /* フェードトランジション */
}

.main-image-display img.active {
    display: block; /* アクティブな画像のみ表示 */
    opacity: 1;
}

.main-image-display img.fade-out {
    opacity: 0;
}

/*--------------------------------------------------
  Navigation Arrows
  - ギャラリーの左右ナビゲーション矢印
--------------------------------------------------*/
.nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: #98C020;
    color: white;
    font-size: 2em;
    padding: 10px 15px;
    cursor: pointer;
    z-index: 10;
    user-select: none; /* テキスト選択を無効化 */
    border-radius: 50%; /* 円形 */
    transition: background-color 0.3s ease;
}

.nav-arrow:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

.left-arrow {
    left: 10px;
}

.right-arrow {
    right: 10px;
}

/*--------------------------------------------------
  Thumbnail Navigation
  - サムネイル画像の表示とインタラクション
--------------------------------------------------*/
.thumbnail-navigation {
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* 小さい画面で折り返す */
    gap: 1px; /* サムネイル間のスペース */
    padding: 5px 0;
    border-top: 1px solid #eee;
}

.thumbnail-navigation img {
    width: clamp(50px, 12vw, 70px); /* レスポンシブな幅 */
    height: clamp(50px, 12vw, 70px); /* レスポンシブな高さ（正方形を維持） */
    object-fit: cover; /* 縦横比を維持して切り抜き */
    border: 2px solid transparent;    
    cursor: pointer;
    border-radius: 4px;
    transition: border-color 0.3s ease, transform 0.2s ease, opacity 0.3s ease;
}

.thumbnail-navigation img.active {
    border-color: #007bff; /* アクティブ時のボーダー色 */
    transform: scale(1.05); /* アクティブ時少し拡大 */
}

.thumbnail-navigation img:hover:not(.active) {
    border-color: #88cfff; /* ホバー時のボーダー色（非アクティブ時） */
}
    
/*--------------------------------------------------
  Titles & Section Spacing
  - 各セクションの見出しと上下の余白調整
--------------------------------------------------*/
/* 全てのh2.titleに共通の基本スタイル（物件詳細情報、物件所在地など） */
.wrap.padding h2.title {
    margin-top: 10px;
    margin-bottom: 20px;
}

.wrap.padding h2.title p.center {
    font-size: 17px; /* サブタイトル */
    line-height: 1.4;
}

/* 「アーブル いとしあ」専用の大きな文字サイズと余白 */
.wrap.padding h2.title.special-title {
    font-size: 3.0em;
    margin-top: 30px;
    margin-bottom: 10px;
}

/* 「アーブル いとしあ」内の「サービス付き高齢者向け住宅」の文字サイズ */
.wrap.padding h2.title.special-title p.center {
    font-size: 20px;
    line-height: 1.2;
    margin-top: -60px; /* PCのデフォルト値（1025px以上） */
}

/* 文字（見出し）のコンテナの下の余白を調整 */
.contents .wrap.padding {
    margin-top: 30px;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* 写真ギャラリーのコンテナの上の余白を調整 */
.wrap_bk.bk-detail-images {
    margin-top: 0;
    padding-top: 0;
}

/* Google Map セクションの下に余白を追加 */
.map-section {
    margin-bottom: 100px;
}

/*--------------------------------------------------
  PR Section (your-pr-section)
  - 新しく追加されたPR文のセクション
--------------------------------------------------*/
.your-pr-section {
    background-color: #f9f9f9;
    padding: 40px 20px;
    margin-top: 30px;
    margin-bottom: 30px;
}

.your-pr-section .wrap {
    max-width: 900px;
    margin: 0 auto;
}

.your-pr-section .pr-title {
    color: #333;
    font-size: 2.2em;
    text-align: center;
    margin-bottom: 20px;
}

.your-pr-section .pr-title span {
    display: block;
    font-size: 0.5em;
    color: #666;
    margin-top: 5px;
}

.your-pr-section p {
    font-size: 1.1em;
    line-height: 1.8;
    color: #555;
    text-align: justify; /* 必要であれば */
    max-width: 800px;
    margin: 0 auto;
}

/*--------------------------------------------------
  Table Specific Styles (e.g., Monthly Fee List, Fee Notes)
  - 物件詳細テーブル内のリストや補足情報
--------------------------------------------------*/
/* 月額費用リストのスタイル */
.monthly-fee-list {
    list-style: none; /* リストの黒丸を削除 */
    padding: 0;
    margin: 0 0 15px 0;
}

.monthly-fee-list li {
    margin-bottom: 5px;
}

/* 補足情報のスタイル */
.fee-notes {
    padding-top: 10px;
    margin-top: 20px; /* 上部に隙間を追加 */
}

.fee-notes p {
    font-size: 0.85em;
    color: #666; /* 少し薄い色で補足情報であることを示す */
    line-height: 1.5;
    margin-bottom: 5px;
}

.fee-notes p:last-child {
    margin-bottom: 0;
}

/* 小さく表示されるテキスト（主にテーブル内で使用） */
.small-text {
    font-size: 0.85em; /* 親要素のフォントサイズの85%に縮小 */
    line-height: 1.5;
    display: inline-block; /* テキストの途中に不要な改行や余白を防ぐ */
    margin-top: 5px; /* 必要であれば、上部に少し余白を追加 */
    vertical-align: top; /* 行内での垂直方向の配置を調整 */
    color: #666; /* small-textにも色を適用して統一感を出す */
}

/* リンクの共通スタイル（補足情報内で使用される可能性あり） */
.fee-notes p a,
.your-pr-section p a,
.additional-info .note-text a { /* リンクのある場所全てに適用できるよう追加 */
    color: #007bff;
    text-decoration: underline;
}
.fee-notes p a:hover,
.your-pr-section p a:hover,
.additional-info .note-text a:hover {
    text-decoration: none;
}


/*--------------------------------------------------
  Responsive Design Breakpoints
  - 各デバイスサイズでのスタイル調整
--------------------------------------------------*/
/* スマートフォン専用改行タグのスタイル */
.sp-br {
    display: none; /* デフォルト（PC）では非表示 */
}

@media (max-width: 768px) { /* スマートフォンサイズ（〜768px） */
    /* 全てのh2.titleに共通の基本スタイル（スマホ用） */
    .wrap.padding h2.title {
        font-size: 1.4em;
        margin-top: 20px;
        margin-bottom: 20px;    
    }

    .wrap.padding h2.title p.center {
        font-size: 15px;
    }

    /* 「アーブル いとしあ」専用の文字サイズ（スマホ用） */
    .wrap.padding h2.title.special-title {
        font-size: 2.0em;
        margin-top: 25px;
        margin-bottom: 0;
    }

    .wrap.padding h2.title.special-title p.center {
        font-size: 17px;
        margin-top: 30px;
    }

    /* Google Map セクションの下の余白（スマホ用） */
    .map-section {
        margin-bottom: 50px;
    }

    /* PRセクションの調整（スマホ用） */
    .your-pr-section {
        padding: 25px 15px;
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .your-pr-section .pr-title {
        font-size: 1.8em;
    }

    .your-pr-section .pr-title span {
        font-size: 0.6em;
    }

    .your-pr-section p {
        font-size: 1em;
        text-align: left; /* スマホでは左寄せの方が読みやすいことが多い */
    }

    /* 小さく表示されるテキスト（スマホ用） */
    .small-text {
        font-size: 0.8em;
    }
    
    /* スマートフォン専用改行タグの表示 */
    .sp-br {
        display: block; /* スマホでは表示し、強制的に改行 */
    }
}

@media (min-width: 769px) and (max-width: 960px) { /* タブレット（769px〜960px） */
    .wrap.padding h2.title.special-title {
        font-size: 2.5em;
        margin-top: 0;
        margin-bottom: 5px;
    }

    .wrap.padding h2.title.special-title p.center {
        font-size: 17px;
        margin-top: 10px;
    }

    /* Google Map セクションの下の余白 */
    .map-section {
        margin-bottom: 70px;
    }

    /* ギャラリーコンテナの幅調整 */
    .gallery-container {
        width: 85%; /* タブレット向けに微調整 */
    }
}

@media (min-width: 961px) and (max-width: 1024px) { /* タブレット（961px〜1024px） */
    .wrap.padding h2.title.special-title {
        font-size: 2.8em;
        margin-top: 0;
        margin-bottom: 10px;
    }

    .wrap.padding h2.title.special-title p.center {
        font-size: 18px;
        margin-top: 10px;
    }

    /* Google Map セクションの下の余白 */
    .map-section {
        margin-bottom: 80px;
    }

    /* ギャラリーコンテナの幅調整 */
    .gallery-container {
        width: 88%; /* タブレット向けに微調整 */
    }
    
    /* サムネイルのサイズを少し大きくする */
    .thumbnail-navigation img {
        width: clamp(60px, 10vw, 80px);
        height: clamp(60px, 10vw, 80px);
    }
}