@charset "UTF-8";

/* ==========================================================================
   Base Settings
   ========================================================================== */

html {
  font-size: 62.5%;
  /*ベース10px*/
  height: 100%;
}

body {
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-size: 1.6rem; /* 16px相当 */
    color: #707070;
    letter-spacing: 0.05em;
    line-height: 2;
    position: relative;
    text-align: justify;
}

a {
    text-decoration: none;
    color: inherit;
    transition: opacity 0.3s;
}
a:hover {
    opacity: 0.7;
}
a[class*="btn-"]:hover {
    opacity: 1;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}
.sp_none, .pc_only{
    display: block;
}
.sp_only, .pc_none{
    display: none;
}
/* アンカーリンクで飛んだ際の位置調整 */
section[id], div[id] {
    scroll-margin-top: 100px;
}

/* ==========================================================================
   Header Layout
   ========================================================================== */
header {
    width: 100%;
    background-color: rgba(255, 255, 255, 0.6); /* rgba修正 */
    position: sticky; top: 0; z-index: 1000; box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    transition: background-color 0.3s ease;
}

.container__header {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 0 0 20px; /* 左に20pxの余白 */
}

.header__main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px;
}

/* --- Logo --- */
.header-logo {
    display: block;
    width: 280px; /* ロゴのサイズ調整 */
}

/* --- Navigation Area --- */
.pc-global-nav {
    display: flex;
    align-items: center;
    margin-left: auto; /* ロゴとナビの間を空ける */
}

.pc-global-nav ul {
    display: flex;
    align-items: center;
    gap: 30px; /* メニュー間の余白 */
}

/* 通常テキストリンク（買いたい、売りたい、選ばれる理由） */
.pc-global-nav a {
    color: #172A88; /* 青文字 */
    font-weight: 700;
    font-size: 1.6rem; /* 16px -> 1.6rem */
}
.pc-global-nav li:nth-last-child(4) a{
    color: #707070;
}

/* --- CV Buttons (会社案内 & お問い合わせ) --- */
/* 右側の2つのボタン用の特別スタイル */
.pc-global-nav__btn {
    display: flex !important; /* flex指定を強制 */
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    width: 80px;
    height: 80px; /* ヘッダーの高さ一杯にする */
    color: #fff !important; /* 文字色白 */
    font-size: 1rem !important; /* 10px -> 1rem */
    font-weight: 700;
    text-align: center;
    line-height: 1.2;
    padding: 0 0 10px 0;
}
.pc-global-nav__btn img{
    width: 40%;
}

/* 会社案内ボタン（青） */
.pc-global-nav li:nth-last-child(3) a.pc-global-nav__btn {
    background-color: #172A88;
}
.pc-global-nav li:nth-last-child(3) a.pc-global-nav__btn img{
    padding-bottom: 10px;
}

/* 会社案内ボタン（水色） */
.pc-global-nav li:nth-last-child(2) a.pc-global-nav__btn {
    background-color: #CBD1E3;
    color: #172A88!important;
}
.pc-global-nav li:nth-last-child(2) a.pc-global-nav__btn img{
    padding-bottom: 10px;
}

/* お問い合わせボタン（茶） */
.pc-global-nav li:last-child a.pc-global-nav__btn {
    background-color: #B37642;
}
.pc-global-nav li:last-child a.pc-global-nav__btn img{
    padding-bottom: 15px;
}

/* 上記のmarginネガティブが難しい場合、以下のようにHTML構造を変えるのがベストですが
   今回はCSSだけで見た目を整えるため、ulのgapを調整します */
.pc-global-nav ul {
    gap: 0; /* 一旦ギャップを0に */
}
.pc-global-nav li:not(:nth-last-child(-n+3)) {
    margin-right: 30px; /* ボタン以外のメニューに右余白をつける */
}

/* --- Hamburger Menu (PCでは非表示) --- */
.hbg-button {
    display: none;
}
.nav-menu {
    display: none;
}

/* ==========================================================================
   Breadcrumb (パンくずリスト)
   ========================================================================== */
.breadcrumb {
    width: 100%;
    padding: 20px 0;
}

.breadcrumb .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    font-size: 1.2rem; /* 12px -> 1.2rem */
    color: #707070; /* グレー文字 */
}

.breadcrumb li {
    display: flex;
    align-items: center;
}

.breadcrumb li:not(:last-child):after {
    content: ">";
    margin: 0 10px;
    font-family: Arial, sans-serif; /* 記号をきれいに見せる */
}

.breadcrumb a {
    color: #707070;
}

.breadcrumb a:hover {
    text-decoration: underline;
}

/* ==========================================================================
   Responsive (Tablet / SP)
   ========================================================================== */
@media screen and (max-width: 960px) {
    .sp_none, .pc_only{
        display: none;
    }
    .sp_only, .pc_none{
        display: block;
    }
    /* アンカーリンクで飛んだ際の位置調整 */
    section[id], div[id] {
        scroll-margin-top: 80px;
    }
    .container__header{
        padding: 0 20px;
    }
    .header__main {
        height: 60px;
    }
    .header-logo {
        width: 180px;
    }
    header.active {
        background-color: #fff;
    }
    /* PCナビを非表示にしてハンバーガーを表示 */
    .pc-global-nav {
        display: none;
    }

    /* --------------------------------------
       1. ハンバーガーボタン
       -------------------------------------- */
    .hbg-button {
        display: block;
        width: 30px;
        height: 20px;
        position: relative;
        background: none;
        border: none;
        cursor: pointer;
        z-index: 2000; /* メニュー(z-index:1900)より手前に表示させる */
        margin-left: auto; /* ヘッダー内で右寄せ */
    }

    .hbg-button__line {
        display: block;
        width: 100%;
        height: 2px;
        background-color: #172A88; /* 通常時の色は濃い青 */
        position: absolute;
        left: 0;
        transition: 0.3s;
        border-radius: 2px;
    }

    /* 3本線の位置設定 */
    .hbg-button__line:nth-child(1) { top: 0; }
    .hbg-button__line:nth-child(2) { top: 50%; transform: translateY(-50%); }
    .hbg-button__line:nth-child(3) { bottom: 0; }

    /* --- クリックされて active になった時の動き（×印にする） --- */

    /* 1本目：45度回転して中央へ */
    .hbg-button.active .hbg-button__line:nth-child(1) {
        top: 50%;
        transform: translateY(-50%) rotate(45deg);
    }

    /* 2本目：透明にして消す */
    .hbg-button.active .hbg-button__line:nth-child(2) {
        opacity: 0;
    }

    /* 3本目：-45度回転して中央へ */
    .hbg-button.active .hbg-button__line:nth-child(3) {
        bottom: 50%;
        transform: translateY(50%) rotate(-45deg);
    }


    /* --------------------------------------
       2. ナビゲーションの中身（青い背景部分）
       -------------------------------------- */
    .nav-menu {
        display: block;
        position: fixed;
        top: 0;
        right: -100%; /* 初期状態は画面の右外へ隠す */
        width: 100%;
        height: 100vh;;
        height: 100dvh;
        background-color: #172A88; /* 背景色（濃い青） */
        color: #fff;
        z-index: 9999; /* ボタンより下、ヘッダーより上 */
        transition: right 0.4s ease; /* スライドのアニメーション速度 */
        overflow-y: auto; /* 縦スクロール可 */
        margin-top: 60px;
        padding: 20px 0 200px;
    }

    /* メニューが開いた時（activeクラス付与時） */
    .nav-menu.active {
        right: 0; /* 画面内へ移動 */
    }

    /* 中身のレイアウト */
    .nav-inner {
        padding: 0 5% 0 0;
        margin-left: auto; /* コンテンツ全体を右寄せ */
        width: 50%;
    }

    /* 各メニューリンクのデザイン */
    .nav-item > a {
        display: block;
        font-weight: bold;
        padding: 10px 0;
        color: #fff;
    }

    /* グループ見出し（選ばれる理由、会社案内など） */
    .nav-item.group-title {
        font-weight: 700;
        border-bottom: 1px solid rgba(255, 255, 255, 0.3);
        color: #fff;
    }

    /* サブメニュー（小さい文字） */
    .nav-item.-sub {
        font-size: 14px;
        margin-bottom: 10px;
    }
    .nav-item.-sub a {
        display: block;
        color: rgba(255, 255, 255, 0.8);
        padding: 0;
    }

    /* LINEボタン */
    .line-btn {
        margin-top: 40px;
        text-align: right;
    }
    .line-btn img {
        width: 40px;
        height: auto;
        border-radius: 8px;
    }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer {
    width: 100%;
    background-color: #172A88; /* 指定の青色 */
    color: #fff;
    padding: 60px 0 20px;
    font-size: 1.4rem; /* 14px相当 */
}

.footer-inner {
    max-width: 1200px; /* コンテナ幅（headerと合わせる） */
    margin: 0 auto;
    padding: 0 20px;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 60px;
}

/* --- Left Area (Logo & SNS) --- */
.footer-left {
    width: 250px; /* ロゴエリアの幅確保 */
    flex-shrink: 0;
}

.footer-logo img {
    width: 250px; /* ロゴサイズ調整 */
    height: auto;
    margin-bottom: 20px;
}
.footer-sns{
    text-align: right;
}
.footer-sns img {
    width: 40px; /* LINEアイコンサイズ */
    height: auto;
    transition: opacity 0.3s;
}

.footer-sns a:hover {
    opacity: 0.8;
}

/* --- Center Area (Navigation) --- */
.footer-nav {
    display: flex;
    gap: 60px; /* カラム間の余白 */
    flex-grow: 1; /* 余ったスペースを使う */
    justify-content: center; /* 中央寄せ */
}

/* カラム共通設定 */
.footer-nav-col {
    display: flex;
    flex-direction: column;
    min-width: 160px; /* 各カラムの最低幅 */
}

/* 1列目：メインリンク（買いたい・売りたい・お問い合わせ） */
.main-links a {
    margin-bottom: 15px;
}

.main-links a {
    display: block;
    font-size: 1.6rem; /* 16px -> 1.6rem */
    font-weight: 700;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5); /* 下線 */
    position: relative;
    transition: 0.3s;
}
.nav-list a{
    transition: 0.3s;
}
.main-links a:hover,.nav-list a:hover {
    padding-left: 5px; /* ホバー時に少し右へ動く演出 */
}
.nav-list li {
    margin-bottom: 10px;
}

/* --- Right Area (Back to Top) --- */
.back-to-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #172A88;
    text-align: center;
    font-size: 1rem; /* 10px相当 */
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1.2;
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* JSで is-visible がついたら表示 */
.back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto; /* クリック可能に戻す */
}

.back-to-top .arrow-up {
    display: block;
    width: 14px;
    height: 14px;
    border-top: 2px solid #172A88;
    border-right: 2px solid #172A88;
    transform: rotate(-45deg); /* 上向き矢印を作る */
    margin-bottom: 10px;
    transition: transform 0.3s;
}

.back-to-top:hover .arrow-up {
    transform: rotate(-45deg) translate(-3px, 3px); /* ホバー時に少し上に動く */
}

/* --- Bottom Area (Copyright & Policy) --- */
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.2); /* 区切り線が必要であれば */
    padding-top: 20px;
    font-size: 1.1rem; /* 11px -> 1.1rem */
}

.bottom-links a {
    opacity: 0.8;
}

.bottom-links a:hover {
    opacity: 1;
    text-decoration: underline;
}

.copyright {
    opacity: 0.6;
    font-family: Arial, sans-serif;
}
.sp-float-menu {
    display: none;
}

/* ==========================================================================
   Responsive (Tablet / SP)
   ========================================================================== */
@media screen and (max-width: 960px) {
    .footer {
        padding: 40px 0 20px;
    }

    .footer-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 40px;
        padding-bottom: 20px;
    }

    /* 左エリア（ロゴ・SNS） */
    .footer-left {
        width: 100%;
        margin-bottom: 0;
        text-align: left; /* 左揃え */
    }
    .footer-logo img {
        width: 180px;
    }

    .footer-sns {
        margin-top: 15px;
        text-align: left; /* 左揃え */
    }

    /* --- ナビゲーション（ここを修正） --- */
    .footer-nav {
        flex-direction: row;      /* 横並び方向 */
        flex-wrap: wrap;          /* 折り返しを許可 ★重要 */
        justify-content: space-between; /* 両端に配置 */
        gap: 30px 0;              /* 縦の間隔30px、横は0(space-betweenで調整) */
        width: 100%;
    }

    .footer-nav-col {
        width: 46%;
        min-width: auto;
    }
    .footer-nav-col:last-child {
        margin-left: auto;
    }
    
    .main-links a {
        font-size: 1.4rem;
    }

    /* Back to Top ボタン調整 */
    /* JSとfixedで制御するため、配置プロパティはリセットせず、サイズのみ調整します */
    .back-to-top {
        right: 15px;      /* スマホは少し端に寄せる */
        bottom: 15px;
        transform: scale(0.9); /* 少し全体を小さく */
    }
    
    /* 最下部 */
    .footer-bottom {
        flex-direction: column;
        align-items: flex-start; /* 左揃え */
        gap: 15px;
        margin-top: 20px;
        width: 100%;
    }
    /* --- SP Float Menu --- */
    .sp-float-menu {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 60px; /* 高さ60px */
        z-index: 1000; /* BackToTop(999)より上にする */
        box-shadow: 0 -2px 5px rgba(0,0,0,0.1);
        opacity: 0;              /* 最初は透明にする */
        visibility: hidden;      /* 最初はマウス反応もしない */
        transition: opacity 0.3s; /* 表示される時にフワッとさせる */
    }
    .sp-float-menu.is-visible {
        opacity: 1 !important;
        visibility: visible !important;
    }
    .float-btn {
        width: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        text-decoration: none;
        color: #fff;
        font-weight: bold;
        font-size: 1.8rem;
        transition: opacity 0.3s;
    }
    .btn-search {
        background-color: #B37642;
    }

    .btn-assessment {
        background-color: #172A88;
    }

    .float-btn:hover {
        opacity: 0.9;
    }

    /* 
       ★重要：フロートメニューがある分、フッター本体系が隠れないように
       body または footer に余白をつける必要があります。
       ここでは footer の padding-bottom を増やします。
    */
    .footer {
        padding-bottom: 80px; /* 元の余白 + 60px */
    }
}

/* ==========================================================================
   LINE Slide Widget
   ========================================================================== */
.line-widget {
    position: fixed;
    top: 50%;
    right: -180px; /* QRコードの幅分だけ右に隠しておく */
    transform: translateY(-50%);
    z-index: 990; /* BackToTop(999)より下 */
    
    /* ★追加：初期状態は非表示 */
    opacity: 0;
    visibility: hidden;
    pointer-events: none; /* 見えてない時はクリック不可にする */

    /* ★修正：スライド(right)とフェード(opacity)の両方に動きをつける */
    transition: 
        right 0.4s cubic-bezier(0.25, 1, 0.5, 1),
        opacity 0.3s ease,
        visibility 0.3s ease;

    display: flex;
    align-items: center;
}

/* ★追加：表示トリガー用のクラス */
.line-widget.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto; /* クリック可能に戻す */
}

/* 開いた時のクラス（JSで付与） */
.line-widget.is-open {
    right: 0; /* 出てくる */
}

/* --- タブ部分（左側の突起） --- */
.line-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #e6e6e6; /* 薄いグレー */
    color: #707070;
    text-decoration: none;
    padding: 15px 8px;
    width: 50px; /* タブの幅 */
    border-radius: 10px 0 0 10px; /* 左側だけ角丸 */
    cursor: pointer;
    position: relative;
    height: 180px;
}

/* LINEアイコン */
.line-icon-wrap {
    width: 30px;
    margin-bottom: 10px;
}
.line-icon-img {
    width: 100%;
    height: auto;
    display: block;
}

/* 縦書きテキスト */
.line-text {
    writing-mode: vertical-rl; /* 縦書き */
    text-orientation: upright; /* 文字を正立 */
    letter-spacing: 0.1em;
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: #707070;
}

/* 矢印アイコン（CSSで作る） */
.line-arrow {
    width: 8px;
    height: 8px;
    border-top: 2px solid #E3E3E3;
    border-left: 2px solid #E3E3E3;
    transform: rotate(-45deg); /* 「<」の形 */
    transition: transform 0.3s;
}

/* 開いた時は矢印を逆にする */
.line-widget.is-open .line-arrow {
    transform: rotate(135deg); /* 「>」の形 */
    margin-left: 5px; /* 位置微調整 */
}

/* --- コンテンツ部分（QRコード） --- */
.line-content {
    background-color: #e6e6e6; /* タブと同じ色 */
    padding: 20px;
    width: 180px; /* QRエリアの幅 */
    height: auto;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

.line-qr-box img {
    width: 100%;
    height: auto;
    display: block;
    background-color: #fff;
    padding: 10px;
    border-radius: 10px;
}

/* ==========================================================================
   Responsive (SP)
   ========================================================================== */
@media screen and (max-width: 960px) {
    .line-widget {
        right:-180px; /* SPでもQR部分は隠しておく */
    }
    
    /* SPではQR部分（右側）は絶対に見えないように非表示にしても良いですが、
       今回は「右にはみ出してるだけ」にしておきます。
       ただし、誤って横スクロールが発生しないよう body { overflow-x: hidden; } が必要です。
       もし横スクロールが出る場合は .line-content { display: none; } してください。
    */
   .line-content {
       display: none; /* SPではQRコード部分は不要なので消す */
   }
   
   /* タブだけが右端に張り付いている状態にする */
   .line-widget {
       right: 0; /* コンテナ自体を画面端に */
   }
   
   /* タブの位置調整 */
   /* コンテナ(right:0)の中に、タブとコンテンツが並んでいるため、
      コンテンツを消した分、タブが自然と右端に来ます */
}

/* ============================================
   下層ページ共通レイアウト
   ============================================ */

/* 共通コンテナ（幅制限と中央寄せ） */
.container {
    max-width: 1000px;
    width: 90%;
    margin: 0 auto;
}

/* --------------------------------------------
   パンくずリスト (.breadcrumb)
   -------------------------------------------- */
.breadcrumb {
    padding: 15px 0;
    font-size: 1.2rem;
    font-weight: 500;
}
.breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
}

.breadcrumb li {
    display: flex;
    align-items: center;
}

/* 矢印（>）の装飾 */
.breadcrumb li:not(:last-child)::after {
    content: ">";
    margin: 0 10px;
    font-size: 1.2rem;
}

.breadcrumb a {
    text-decoration: none;
    transition: color 0.3s;
}

.breadcrumb a:hover {
    color: #172A88; /* リンクホバー色 */
}

/* --------------------------------------------
   ページタイトル (.page-header)
   -------------------------------------------- */
.page-header {
    margin: 30px 0 100px;
    text-align: center;
}

/* 英語見出し */
.page-header__en {
    font-size: 6.2rem; /* 大きく */
    font-weight: 500;
    margin: 0 0 10px 0;
    font-family: 'Gabarito', sans-serif; /* 英語見出し用のフォント */
    color: #172A88;
    line-height: 1;
}

/* 日本語見出し */
.page-header__jp {
    font-size: 2.6rem;
    margin: 0;
    font-weight: bold;
}

/* --------------------------------------------
   リード文 (.page-lead)
   -------------------------------------------- */

.page-header__text {
    font-size: 1.6rem; /* 16px相当 */
    line-height: 2;
    text-align: center;
    margin-top: 30px;
}

/* スマホ対応 */
@media screen and (max-width: 960px) {
    .page-header {
        margin: 30px 0 60px;
    }
    .page-header__en {
        font-size: 4.8rem;
    }
    .page-header__jp {
        font-size: 2rem;
    }
    .page-header__text {
        margin-bottom: 50px;
        text-align: left; /* スマホでは左寄せの方が読みやすい場合が多い */
    }
    .page-header__text br {
        display: none; /* スマホで強制改行を無効化 */
    }
}

/* --------------------------------------------
   リード文 (.page-lead)
   -------------------------------------------- */
.page-content {
    margin-bottom: 100px;
}


/* ==========================================================================
   アットホーム iframe セクション調整
   ========================================================================== */
.recommend-section {
    margin-top: 30px;      /* 見出しとの間隔 */
    margin-bottom: 50px;   /* 下の会員限定物件一覧（.property-grid）との間隔 */
    text-align: center;
}

/* iframeを包むラッパー（中央揃え ＆ レスペンシブ対応） */
.athome-iframe-wrapper {
    width: 100%;
    /* アットホームのlargeサイズ（2列時）の出力幅に合わせて最大幅を設定 */
    max-width: 480px;      
    margin: 0 auto;        /* 左右中央揃え */
    overflow-x: auto;      /* 万が一スマホではみ出た場合のスクロール対応 */
    -webkit-overflow-scrolling: touch;
}

.athome-iframe-wrapper iframe {
    width: 100%;           /* ラッパーの横幅（max-width）に追従させる */
    max-width: 480px;      /* アットホーム出力幅 */
    height: 520px;         /* 2列×2行表示に合わせた適切な高さに調整（実際の見え方で微調整してください） */
    display: block;
    margin: 0 auto;
}

/* 既存の .property-grid との余白補正 */
.property-grid {
    margin-top: 50px;      /* おすすめセクションとの間隔を一定に */
}

/* ==========================================================================
   物件グリッド全体のレイアウト
   ========================================================================== */
.content-header{
    font-size: 3.2rem;
    font-weight: bold;
    text-align: center;
    color: #172A88;
    line-height: 1.4;
}
.content-header span{
    display: block;
    font-size: 2.4rem;
    margin-bottom: 10px;
}
.property-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 40px 20px; /* 縦の隙間40px、横の隙間20px (デザインに合わせて調整) */
    justify-content: flex-start; /* 👈【修正】fle-st-start のタイポを正規の flex-start に直しました */
    margin-top: 40px;
}

/* 各カードの基本幅（2カラム構成） */
.property-card {
    width: calc(50% - 10px); /* 隙間20pxを考慮して2カラムに分割 */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    position: relative; /* 👈 カード全体のクリックリンク（::after）の基準位置 */
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.property-card:hover {
    opacity: 0.9;
    transform: translateY(-2px); /* ほんの少し上に浮き上がる */
}

/* ==========================================================================
   画像・マスクエリア
   ========================================================================== */
.property-card__img-wrapper {
    position: relative; /* 子要素のオーバーレイを絶対配置するため */
    width: 100%;
    aspect-ratio: 4 / 3; /* 画像のアスペクト比を固定（例: 4:3） */
    overflow: hidden;
    z-index: 1;
}

.property-card__img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 枠線に合わせて画像を綺麗にトリミング */
}

/* 会員限定時のオーバーレイマスク */
.property-card__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2); /* 半透明の黒 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* 会員限定のカード（.is-locked）の場合だけマスクを表示 */
.property-card.is-locked .property-card__overlay {
    opacity: 1;
}

/* 鍵アイコン */
.icon-lock {
    display: inline-block;
    width: 32px;
    height: 32px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    margin-bottom: 8px;
}

.overlay-text {
    font-size: 2.4rem;
    font-weight: bold;
    letter-spacing: 0.05em;
    margin: 0;
}

/* ==========================================================================
   物件情報（テキスト）
   ========================================================================== */
/* --- 通常の物件情報エリア --- */
.property-card__info {
    text-align: center;
    padding: 15px 10px 0;
    z-index: 1;
}

.property-card__address {
    font-size: 1.6rem;
    font-weight: bold;
    color: #333;
    margin: 0 0 5px 0;
}

.property-card__price {
    font-size: 2.4rem;
    font-weight: bold;
    color: #333;
    margin: 0;
    line-height: 1;
}

/* ==========================================================================
   ボタン部分（カード全体クリック・チカチカ防止用調整）
   ========================================================================== */
.property-card__btn-wrapper {
    margin-top: auto; /* これでダミーの下、またはテキストの下に綺麗に揃います */
    padding-top: 20px; /* 最低限の余白 */
    text-align: center;
    position: static; /* 👈 親のカードを基準にするため static に固定 */
}

/* リンク本体の優先度を最前面に設定 */
.property-card__btn-wrapper a {
    position: static;
    z-index: 20; /* 👈 z-indexを高めに固定 */
}

/* 疑似要素で透明な膜を最前面いっぱいに広げる */
.property-card__btn-wrapper a::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 20; /* 👈 ボタン本体と同じ最前面に固定して競合を防ぎます */
    cursor: pointer;
}

/* 共通ボタンのベーススタイル */
.btn-detail,
.btn-member-only {
    display: inline-block;
    width: 100%;
    max-width: 280px; 
    padding: 12px 0;
    font-size: 1.6rem;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
    border-radius: 4px;
    box-sizing: border-box;
    transition: background-color 0.3s ease, opacity 0.3s ease;
}

/* 通常の物件詳細ボタン（紺色） */
.btn-detail {
    background-color: #172A88; 
    color: #fff;
}
.btn-detail:hover {
    opacity: 0.8!important;
}

/* 会員限定物件を見るボタン（明るめの紺色、または共通） */
.btn-member-only {
    background-color: #172A88;
    color: #fff;
}
.btn-member-only:hover {
    opacity: 0.8!important;
}

/* 🛠️【超重要】最前面のリンク膜の下にあるすべての要素のクリック判定を無効化（チカチカを完全に防止） */
.property-card__img-wrapper,
.property-card__img-wrapper img,
.property-card__overlay,
.property-card__overlay *,
.property-card__info,
.property-card__info * {
    pointer-events: none !important;
}


/* ==========================================================================
   レスポンシブ（スマホ対応）
   ========================================================================== */
@media (max-width: 768px) {
    .property-grid {
        gap: 40px 0;
    }
    
    .property-card {
        width: 100%; /* スマホ時は1カラムで縦並び */
    }
    
    .btn-detail,
    .btn-member-only {
        max-width: 100%; 
    }
}