@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/


/* --- メインビジュアルの文字サイズ可変（SWELL標準を上書き） --- */

/* スマホ用（基本設定） */
body .p-mainVisual__slideTitle {
    font-size: clamp(24px, 10vw, 50px) !important;
    font-weight: bold !important;
}
body .p-mainVisual__slideText {
    font-size: clamp(16px, 3vw, 24px) !important;
}

/* PC用（600px以上：SWELLの指定を強制上書き） */
@media (min-width: 600px) {
    body .p-mainVisual__slideTitle {
        font-size: clamp(28px, 5vw, 60px) !important; /* 最大値を50pxなどに設定 */
    }
    body .p-mainVisual__slideText {
        font-size: clamp(20px, 3vw, 30px) !important;
    }

}


/* ヘッダー上のボーダー */
#header {
	border-top: solid 2px #F8E58C;
}

/* 全体 */
#content.l-container {
    padding-top: 2em  !important;
}



/* ヘッダーコンタクトエリア全体の調整 */
/* ヘッダーコンタクト全体のレイアウト */
.h-contact-box {
    display: flex;
    align-items: center;
    /* アイコンを上下中央に配置 */
    gap: 10px;
    /* アイコンとテキストの間の余白 */
}
/* アイコンのサイズと色 */
.h-contact-icon {
    font-size: 1.5rem;
    /* アイコンの大きさ */
    color: #3EB370;
    /* 物件サイトのテーマカラー（緑） */
}
/* テキストを上下に並べる */
.h-contact-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;  /* 行間を詰めて一体感を出す */
    white-space: nowrap;  /* 改行させない */
}
/* 電話番号の装飾 */
.h-contact-num {
    font-size: 1.4rem;
    /* 番号を大きく強調 */
    font-weight: bold;
    color: #3EB370 !important;
    text-decoration: none;
    letter-spacing: 0.02em;
}
/* 受付時間の装飾 */
.h-contact-sub {
    font-size: 0.7rem;
    /* 時間は小さめに */
    color: #666;
    margin-top: 2px;
}
/* スマホではヘッダー内が狭いので非表示にする場合 */
@media (max-width: 959px) {
    .h-contact-box {
        display: none;
    }
}


/* ------------------------------------------- */
/* SWELL自動出力のサブタイトル（- pt_archive - など）を非表示 */
/* ------------------------------------------- */

/* 賃貸や売買の一覧ページ、エリアページのサブタイトルを消す */
.post-type-archive .c-pageTitle__subTitle,
.tax-area .c-pageTitle__subTitle,
.tax-bukken_type .c-pageTitle__subTitle {
    display: none !important;
}


/* 記事スライダー */
/* ナビゲーションボタンの色調整（背景黒だと見えなくなるため） */
.home .swiper .swiper-button-next,
.home .swiper .swiper-button-prev {
    width: 32px !important;    /* 枠の横幅 */
    height: 44px !important;	/* 枠の高さ */
    background: rgba(0, 0, 0, 0.5);    /* 薄い背景（お好みで） */
    border-radius: 4px;    /* 少し角を丸く */
    margin-top: -22px !important;    /* (高さの半分) 上下中央に配置するための調整 */
}

/* 矢印「アイコン（文字）」の大きさを小さくする */
.home .swiper .swiper-button-next:after,
.home .swiper .swiper-button-prev:after {
    font-size: 18px !important;
    /* ★ここで矢印の大きさを直接変えます（デフォルトは約44px） */
    font-weight: bold;
    color: white;
}

/* --- スライダー用カスタムバッジ --- */
.p-postList__link {
    position: relative; /* バッジを画像の上に重ねるための基準 */
    display: block;
}

.c-slider-custom-badge {
    position: absolute;
    top: 0;
    left: 0;
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    padding: 3px 10px;
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    letter-spacing: 0.05em;
    border-radius: 12px 0 8px 0;
}

/* 賃貸：ブルー系 */
.c-slider-custom-badge.badge-chintai {
    background-color: #2ca9e1;
}

/* 売買：オレンジ系 */
.c-slider-custom-badge.badge-baibai {
    background-color: #e49e61;  /* 小麦色 */
}



/* トップページの投稿リスト */

/* --- 1. 親枠についているSWELL標準の影を強制的に「無し」にする --- */
body .p-mainVisual__textLayer {
    text-shadow: none !important;
}

/* --- 2. 中身の文字とその子要素に、オリジナルの濃い緑の影をつける --- */
body .p-mainVisual__slideTitle,
body .p-mainVisual__slideTitle * {
    text-shadow: 2px 2px 6px rgba(0, 60, 20, 0.9) !important;
}
/* --- 2. 中身の文字とその子要素に、オリジナルの濃い緑の影をつける --- */
body .p-mainVisual__slideText,
body .p-mainVisual__slideText * {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9) !important;
}

/* --- 投稿リストの画像サイズを小さくする（PC・タブレット） --- */
@media (min-width: 600px) {
    /* 画像を囲む枠（thumb）の横幅を20%に制限 */
    main .p-postList__item .p-postList__thumb,
    main .p-postList__item .c-postThumb {
        /*flex-basis: 200px !important;*/ /*ここで画像サイズを調整*/
        max-width: 200px !important;
        width: 200px !important;
    }

    /* テキスト部分（body）の横幅を残りの80%に広げる */
    main .p-postList__item .p-postList__body {
        flex-basis: 80% !important;
        max-width: 80% !important;
        width: 80% !important;
        padding-left: 20px; /* 画像と文字の間の隙間 */
    }
}

/* --- 投稿リストの各アイテム間の間隔を広げる --- */
main .p-postList__item {
    margin-top: 1em !important; 
	margin-bottom: 0 !important;
    padding-top: 3em !important; 
	padding-bottom: 0em !important; 
    border-top: 2px solid #eee;   
}

/* 最後のアイテムだけは余白を付けない（デザインを崩さないための配慮） */
main .p-postList__item:last-child {
    margin-bottom: 0 !important;
	padding-bottom: 3em !important; 
	border-bottom: 2px solid #eee;   /* 区切り線が消えている場合はここで再設定可能 */
}

.c-custom-list-meta {
	/*margin-top: 8px;*/
}
main .p-postList__title {
	font-size: 1.2em  !important;	
}

.item-rentprice, .item-saleprice {
	/*display:inline-block;*/
	margin-right: 0.5rem; 
	font-size: 1.4rem  !important;
	font-weight: bold; 
	color: #d32f2f;
    white-space: nowrap;  /* 改行させない */
}
.item-saleprice {
	padding-top: 3px;	
}


/* --- 全体コンテナ（親要素） --- */
.property-container {
    display: grid;
    grid-template-columns: 1fr;
    /* スマホは1列（縦並び） */
    gap: 16px;  /* 項目間の隙間 */
    row-gap: 10px;
    padding: 4px 4px 4px 0px;
    background-color: #fff;
    border: 0px solid #ddd;
    font-size: 0.9rem;
}

/* --- 各項目（子要素） --- */
.grid-item {
    display: flex;
    /* ラベルと値を横に並べる */
    padding: 2px;
    background-color: #fff;
    border-bottom: 0px dashed #eee;  /* スマホで見やすいよう区切り線 */
    align-items: center  !important;
    justify-content: center  !important;
}

.label {
    flex-shrink: 0;  /* どんなに狭くなってもラベルを潰さない */
    font-weight: bold;
    width: 80px;    /* ラベルの幅を固定して揃える */
    /* color: #666; */
    margin-right: 8px;
    padding: 4px 4px 4px 0px;
    text-align: center;
    background-color: #f5f5f5;
}

.value {
    flex: 1;
    /* 残りの幅をすべて使う */
}


/* 2マス分を結合するクラス */
.span-2 {
    grid-column: span 2;
}

/* 全てのマスを結合して1行を独占するクラス */
.span-all {
    grid-column: 1 / -1; 
}


/* --- PC用：画面幅が600px以上の場合 --- */
@media (min-width: 600px) {

    .property-container {
        /* PCでは3列に分割（横並び） */
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
        row-gap: 10px;
    }

    .grid-item {
        border-bottom: none;  /* PCでは区切り線は不要 */
        border-right: 0px solid #eee;  /* 代わりに右側に線を入れるとお洒落 */
    }

    .grid-item:last-child {
        border-right: none;  /* 一番右の線は消す */
    }

    .address {
        white-space: nowrap;  /* 改行させない */
    }

	.landarea {
		white-space: nowrap;  /* 改行させない */
	}

	.kenpeiyouseki {
		white-space: nowrap;  /* 改行させない */
	}

	.tatemonomenseki {
		/*white-space: nowrap;*/  /* 改行させない */
	}
}



/* --- 物件リスト：画像エリア(左)とテキスト(右)を完全に分離 --- */

/* 1. リスト項目を1列（100%）に固定 */
main .p-postList .p-postList__item {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 3em !important;
}

/* 2. 親要素（リンク）を横並びに固定 */
main .p-postList__item .p-postList__link {
    display: flex !important;
    flex-direction: row !important;
    /* 絶対に横並び */
    flex-wrap: nowrap !important;
    /* 改行を禁止 */
    align-items: flex-start !important;
}

/* 3. 左側の画像エリア（メイン+サブ）を縦に並べる */
main .p-postList__item .p-postList__link>.p-postList__thumb {
    flex: 0 0 240px !important;
    /* 画像エリアの横幅を固定 */
    width: 240px !important;
    display: flex !important;
    flex-direction: column !important;
    /* 画像同士は縦並び */
    margin-right: 20px !important;
    margin-bottom: 0 !important;
}

/* 4. 右側のテキストエリアを広げる */
main .p-postList__item .p-postList__body {
    flex: 1 !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 0 !important;
    text-align: left !important;
}

/* 画像サイズと隙間の調整 */
main .p-postList__thumb .c-postThumb,
main .p-postList__thumb .c-sub-photo {
    width: 100% !important;
    margin-bottom: 10px !important;
}

/* スマホ用の微調整（画像幅を少し狭める） */
@media (max-width: 599px) {
    main .p-postList__item .p-postList__link>.p-postList__thumb {
        flex: 0 0 120px !important;
        /* スマホでは幅120px */
        width: 120px !important;
        margin-right: 12px !important;
    }

}

.c-sub-photo {
    /* display: none; */
    margin-top: 1em;
    text-align: center;
}
.c-sub-photo img {
    max-height: 160px;
    width: auto;
    object-fit: contain !important;  /* 絶対に切らさず全体を表示 */
}

/* ポイント */
.ctm-point {
    display: flex;
    width: fit-content;
    margin-top: 10px;
    padding: 2px 4px 2px 4px;
    background-color: #fef4f4;
    /* background-color: #fff; */
    /* border: 2px solid #F8E58C; */
    border-radius: 10px;
}
.ctm-point div,
.ctm-features div
{
    padding: 4px;
}
.ctm-point i,
.ctm-features i
{
    padding-top: 2px;
    font-size: 1.5rem;
    color: #fcc800;
}
.title--point {
    font-size: 1rem;
    font-weight: 700;
}
.text--point {
    font-size: 0.9rem;
}
#ctm-features {
	margin-top: 1em  !important;
}


/* 物件詳細ページ（シングルページ）への指定 */
/* 個別ページ */
.single-chintai .p-articleFoot, 
.single-baibai .p-articleFoot
{
    border: none  !important;
}

/* 不要なものを非表示にする */
.single-chintai .p-articleThumb,
.single-chintai .p-articleFoot,
.single-chintai .p-articleMetas.-top,
.single-baibai .p-articleThumb,
.single-baibai .p-articleFoot,
.single-baibai .p-articleMetas.-top 
{
    display: none;
}

.single-chintai .post_content,
.single-baibai .post_content
 {
    margin-top: 1em;
}

/* Swiperコンテナ全体の調整 */
.single-chintai .mySwiper,
.single-baibai .mySwiper
{
    width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 30px;
    overflow: hidden;  /* はみ出し部分を隠す（ Swiperの基本設定 ）*/
    
    /* はみ出す倍率に合わせて調整（5%大きくするなら上下に20px〜30px程度） */
    padding-top: 30px !important;
    padding-bottom: 60px !important;  /* 下側はドット（pagination）の分も含めて多めに */
}

/* ドットをその空き地の最下部に固定する */
.single-chintai .mySwiper .swiper-pagination,
.single-baibai .mySwiper .swiper-pagination
{
    bottom: 0 !important;
}

/* ★ここがポイント：スライドの幅を100%未満にする */
.single-chintai .mySwiper .swiper-slide,
.single-baibai .mySwiper .swiper-slide
{
    width: 75%;
    /* 中央のスライドが画面の80%を占める設定 */
    height: auto;
    position: relative;
    background: #fff;
    transition: opacity 0.3s;
}

.single-chintai .mySwiper .swiper-slide img,
.single-baibai .mySwiper .swiper-slide img
{
    transition: transform 0.5s;
}

/* 画像の表示設定（枠のセンターに表示） */
.single-chintai .mySwiper .swiper-slide img,
.single-baibai .mySwiper .swiper-slide img
{
    width: 100%;
    height: 450px;
    /* PCでの高さ設定 */
    object-fit: contain;
    /* 画像全体を表示し、比率を保つ */
    /* background: #333; */
    /* 画像がない部分の背景色 */
}

/* アクティブ（中央）以外のスライドを少し暗くする */
.single-chintai .mySwiper .swiper-slide:not(.swiper-slide-active),
.single-baibai .mySwiper .swiper-slide:not(.swiper-slide-active)
{
    opacity: 0.5;
    /* 中央以外は50%の透明度 */
}

/* 4. 中央のスライドを少しだけ浮き立たせる（オプション） */
.single-chintai .swiper-slide-active,
.single-baibai .swiper-slide-active
{
    /* transform: scale(1.05); 
    /* 中央だけ5%大きくするとはみ出し感が強調されます */
    /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); */
    z-index: 10;
}
.single-chintai .swiper-slide-active img,
.single-baibai .swiper-slide-active img
{
    transform: scale(1.1);
    /* 中央だけ5%大きくするとはみ出し感が強調されます */
    /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); */
    /* z-index: 2; */
}

/* キャプションの装飾 */
.single-chintai .swiper-caption,
.single-baibai .swiper-caption
{
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);

    width: fit-content;
    max-width: 90%;

    /* PC表示：改行を禁止して1行に収める */
    white-space: nowrap;

    padding: 6px 15px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-size: 0.85rem;
    text-align: center;
    line-height: 1.4em;
    border-radius: 12px;
    z-index: 10;
}

/* ナビゲーションボタンの色調整（背景黒だと見えなくなるため） */
.single-chintai .mySwiper .swiper-button-next,
.single-chintai .mySwiper .swiper-button-prev,
.single-baibai .mySwiper .swiper-button-next,
.single-baibai .mySwiper .swiper-button-prev
{
width: 32px !important;
    /* 枠の横幅 */
    height: 44px !important;
    /* 枠の高さ */
    background: rgba(0, 0, 0, 0.5);  /* 薄い背景（お好みで） */
    border-radius: 4px;  /* 少し角を丸く */
    margin-top: -22px !important;  /* (高さの半分) 上下中央に配置するための調整 */
}
/* 矢印「アイコン（文字）」の大きさを小さくする */
.single-chintai .mySwiper .swiper-button-next:after,
.single-chintai .mySwiper .swiper-button-prev:after,
.single-baibai .mySwiper .swiper-button-next:after,
.single-baibai .mySwiper .swiper-button-prev:after
{
    font-size: 18px !important;  /* ★ここで矢印の大きさを直接変えます（デフォルトは約44px） */
    font-weight: bold;
    color: white;
}

/* 左右の余白を微調整（写真に被りすぎないように） */
.single-chintai .mySwiper .swiper-button-prev,
.single-baibai .mySwiper .swiper-button-prev
{
    left: 5px !important;
}

.single-chintai .mySwiper .swiper-button-next,
.single-baibai .mySwiper .swiper-button-next
{
    right: 5px !important;
}

/* スマホ用の調整 */
@media (max-width: 768px) {

    .single-chintai .mySwiper .swiper-slide,
    .single-baibai .mySwiper .swiper-slide
    {
        width: 80%;  /* スマホは少し幅を広げる */
        padding-top: 20px !important;
        padding-bottom: 50px !important;
    }
    .single-chintai .mySwiper .swiper-slide img,
    .single-baibai .mySwiper .swiper-slide img
    {
        height: 250px;  /* スマホ用の高さ */
    }
    .single-chintai .mySwiper .swiper-button-next,
    .single-chintai .mySwiper .swiper-button-prev,
    .single-baibai .mySwiper .swiper-button-next,
    .single-baibai .mySwiper .swiper-button-prev
    {
        width: 28px !important;
        height: 36px !important;
        margin-top: -18px !important;
    }
    .single-chintai .mySwiper .swiper-button-next:after,
    .single-chintai .mySwiper .swiper-button-prev:after,
    .single-baibai .mySwiper .swiper-button-next:after,
    .single-baibai .mySwiper .swiper-button-prev:after
    {
        font-size: 14px !important;
    }

    .single-chintai .swiper-caption,
    .single-baibai .swiper-caption
    {
        /* スマホ：画面幅が狭いので改行を許可する */
        white-space: normal;
        font-size: 0.75rem;
        padding: 4px 10px;
        bottom: 5px;

        /* 改行された時に不自然に短くならないよう幅を確保 */
        /* min-width: 60%; */
    }
}



/* 物件概要のグリッド設定 */
.container-bukken-detail {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: flex-start;
    gap: 1rem;
}
.bukken-detail-section {
    line-height: 1.4rem;
    width: 100%;
}
.bukken-detail-section.cols3 {
    width: 32%;
}
.bukken-detail-section h3 {
    margin-top: 1.4rem !important;
    border-bottom: 1px solid #E0F1E7;
}
.bukken-detail-section h3.margin--top {
    margin-top: 1.4rem !important;
}
.bukken-detail-section span {
    font-size: 0.8rem  !important;
    color: #333;
}

.single-chintai .section-title,
.single-baibai .section-title
{
    margin: 0;
    color: #3EB370;
    font-size: 1.1rem;
}
.single-chintai .section-title i,
.single-baibai .section-title i
{
    margin-right: 4px;
}

.bukken-grid {
    display: grid;
    grid-template-columns: max-content 1fr;
    /* grid-template-columns: 140px 1fr; */
    /* 左側(dt)を140pxに固定、右側(dd)が残りの幅 */
    gap: 1px;
    /* 線の太さ */
    background: #e0e0e0;
    /* 線の色（背景色を隙間から見せる） */
    border: 1px solid #e0e0e0;
    margin-top: 1rem;
        
    font-size: 0.8rem  !important;
    color: #333;
}

/* 共通のセル設定 */
.bukken-grid dt,
.bukken-grid dd {
    padding: 4px 8px;
    background: #fff;
    /* セルの背景は白 */
    margin: 0;
    /* dl/dt/ddのデフォルト余白を消す */
    display: flex;
    align-items: center;
    /* 上下中央揃え */
}

/* 見出し側 (dt) の装飾 */
.bukken-grid dt {
    display: flex  !important;
    align-items: center  !important;
    justify-content: flex-start  !important; /* ★強制的に左寄せ */
    gap: 2px !important;  /* ★gap でアイコンと文字の「距離」を指定する */
    background: #f5f5f5;
    font-weight: 400;
    /* padding: 12px 15px; */
    white-space: nowrap;
}

/* アイコン自体の調整（もしズレて見える場合） */
.bukken-grid dt i {
    margin: 0 !important;  /* ★SWELLが勝手につける余白をリセット */
    width: 1em !important;  /* アイコンの横幅を揃える（文字がガタつかない） */
    text-align: center;
    color: #333;
    font-size: 1em;  /* アイコンを少しだけ大きくして見やすく */
}

/* 内容側 (dd) の装飾 */
.bukken-grid dd {
    /* font-size: 1rem; */
    /* color: #333; */
}

/* 賃料だけ目立たせる */
.item-rentprice, .item-saleprice {
    font-size: 1.2rem !important;
    font-weight: 700;
    color: #d32f2f !important;
    /* 賃料を赤色に */
}

/* --- レスポンシブ（スマホ表示） --- */
@media (max-width: 600px) {
    
    .bukken-detail-section,
    .bukken-detail-section.cols3 {
        width: 95%;
    }
    
    .bukken-grid {
        /* スマホでも「横並び」を維持したい場合はこのまま */
        /* もし「縦並び」にしたい場合は以下を有効にしてください */
        /* grid-template-columns: 1fr; */
    }

    .bukken-grid dt {
        width: auto;
        font-size: 0.8rem  !important;
        padding: 8px 10px;
    }

    .bukken-grid dd {
        font-size: 0.8rem  !important;
        padding: 4px 8px;
    }

    .item-rentprice, .item-saleprice {
        font-size: 1.2rem !important;
    }
}


/* 物件概要 **/
/* 3列グリッドの大枠 */
.bukken-grid-3col {
    display: grid;
    /* ★ここが魔法のコード： [ラベルの幅(max-content) + 値の幅(1fr)] を3回繰り返す（計6列） */
    grid-template-columns: repeat(3, max-content 1fr);

    gap: 1px;
    background: #e5e5e5;
    border: 1px solid #e5e5e5; /* 枠線の色 */
    margin-top: 1rem;
}

/* 共通セル装飾 */
.bukken-grid-3col dt,
.bukken-grid-3col dd {
    padding: 4px 8px;
    margin: 0;
    background: #fff;
    font-size: 0.8rem  !important;
    /* 3列で情報量が多いので、文字は少し小さめがおすすめ */
    /* line-height: 1.4; */
    display: flex;
    align-items: center;  /* 縦方向の中央揃え */
    /* border: 1px solid #e5e5e5; */  /* 枠線の色 */
}

/* ラベル (dt) の装飾 */
.bukken-grid-3col dt {
    background: #f8f9fa;
    font-weight: 400;
    color: #333;
    white-space: nowrap;
    /* ラベルの途中改行を防ぐ */
}

/* --- 長い文章の項目を横いっぱいに広げる設定 --- */
.bukken-grid-3col dt.full-width {
    grid-column: 1 / 2;
    /* ラベルは一番左（1列目）に配置 */
}

.bukken-grid-3col dd.full-width {
    grid-column: 2 / -1;
    /* 値は「2列目から右端（-1）まで」すべてを使う */
}

/* =========================================
   レスポンシブ対応（スマホ・タブレットへの配慮）
   ========================================= */

/* タブレットサイズ（画面が少し狭くなったら2列にする） */
@media (max-width: 960px) {
    .bukken-grid-3col {
        grid-template-columns: repeat(2, max-content 1fr);
        /* 2回繰り返し（計4列） */
    }
}

/* スマホサイズ（さらに狭くなったら1列にする） */
@media (max-width: 600px) {
    .bukken-grid-3col {
        grid-template-columns: max-content 1fr;
        /* 1列（計2列） */
    }

    .bukken-grid-3col dt,
    .bukken-grid-3col dd {
        font-size: 0.8rem  !important;
        padding: 8px 10px;
    }

    /* スマホの時は文字が長ければラベルの改行を許可する */
    .bukken-grid-3col dt {
        white-space: normal;
    }
}


/* --- 周辺情報の2列表記 --- */
.shuuhen-list {
    /* display: grid; と grid-template-columns; は削除して以下を使います */
    column-count: 2;
    /* ★ここがポイント：全体を2つの「段落」に分ける */
    column-gap: 20px;  /* 左右の段の隙間 */

    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0 0;
}

/* 各項目の設定 */
.shuuhen-list li {
    position: relative;
    padding-left: 1.2em;
    font-size: 0.8rem  !important;
    line-height: 1.4;
    color: #333;
    
    margin-bottom: 6px;
    /* Gridのgapの代わりに、ここで縦の隙間を作ります */
    break-inside: avoid;
    /* ★重要：1つの <li> が左右の段にまたがって割れるのを防ぐ */
}

/* ■の装飾（画像と同じ四角いアイコンをCSSで作ります） */
.shuuhen-list li::before {
    content: "■";
    position: absolute;
    left: 0;
    top: 3px;
    color: #666;  /* ■の色。少しグレーにして文字より目立たせない */
    font-size: 0.8rem  !important;
    line-height: 1;
}

/* スマホ表示では1列に戻す（画面が狭いと文字が詰まるため） */
@media (max-width: 600px) {
    .shuuhen-list {
        column-count: 1;  /* スマホは1段組み（1列）にする */
    }
}


/* 周辺環境写真 */
/* 写真を並べる大枠（PCで3列） */
.arround-photo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 均等に3列 */
    gap: 20px;
    /* カード同士の隙間 */
    margin-top: 1em;
}

/* 個別の写真カード */
.arround-card {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 1rem;
    /* 少し角丸にして柔らかい印象に */
    overflow: hidden;  /* 画像が角丸からはみ出ないようにする */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    /* ほんの少し影をつけて浮き上がらせる */
}

/* 画像とテキストを囲むタグ */
.arround-figure {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    /* 縦並びのFlexboxにする */
    height: 100%;
    /* カード全体の高さを100%に揃える */
}

/* 画像自体の設定 */
.arround-figure .arround-img {
    width: 100%;
    height: 180px;
    /* PCでの画像の高さを固定（お好みで調整） */
    object-fit: cover;
    /* 画像の縦横比が違っても、枠に合わせて綺麗にトリミングする */
    display: block;
}

/* キャプション（テキスト）の設定 */
.arround-caption {
    padding: 12px;
    font-size: 0.8rem;
    line-height: 1.4;
    color: #333;
    background: #f8f9fa;
    /* テキスト部分だけ少しグレーにする */
    flex-grow: 1;
    /* ★魔法の1行：テキストが短くても、一番下まで背景色を塗りつぶして高さを揃える */
}

/* --- レスポンシブ（スマホ表示） --- */
@media (max-width: 600px) {
    .arround-photo-grid {
        grid-template-columns: 1fr;
        /* スマホでは1列に切り替え */
        gap: 15px;
    }

    .arround-figure .arround-img {
        height: 220px;
        /* スマホでは画面いっぱいに広がるため、少し高さを出すと綺麗です */
    }
}


/* 地図 */
.gmap-crop {
    padding-top: 1rem;
}

.bukken-map {
    width: 100%;
    height: 450px;
    border: 1px solid #e5e5e5;  /* 枠線の色と太さ */
    border-radius: 1rem;  /* 角を丸くして写真カードと統一感を出す */
    display: block;  /* iframe特有の下部の謎の隙間を消す */
    margin-top: 1.5em;  /* 上の要素との隙間 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    /* ほんの少し影をつけて浮き上がらせる */
}

/* スマホ表示では地図の高さを少し抑える */
@media (max-width: 600px) {
    .bukken-map {
        height: 300px;
        /* スマホで450pxだと画面が地図で埋まってしまうため */
    }
}




/* 印刷用画面を開く ボタン*/
.btn-print-bukken {
    display: flex;    
    width: fit-content;  /* ★ ボタンの幅を文字の長さにピッタリ合わせる */
    margin-left: auto;   /* ★ 左側の余白を「最大」にして、右端へ押しやる */
    align-items: center;
    gap: 8px;
    background: #3EB370;
    color: #fff;
    margin-bottom: 1rem  !important;
    padding: 6px 16px;
    border-radius: 1rem;
    border: none;
    cursor: pointer;
    font-size: 0.9rem;
    margin-bottom: 20px;
    text-decoration: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.btn-print-bukken:hover {
    opacity: 0.8;
}


/* ------------------------------------------- */
/* 売買物件の詳細ページ                        */
/* ------------------------------------------- */

/* 周辺情報の2列横並び・枠囲みデザイン */
.arroundinfo-list {
    display: flex;
    flex-wrap: wrap; /* 横幅がいっぱいになったら自動で折り返す */
	justify-content: space-between; /* 2つの列を左右ぴったりに分ける */
    margin: 0;
    padding: 8px 0 0 0;
    width: 100%;
}

/* 1ペア（見出し＋説明）をまとめる枠 */
.arroundinfo-item {
    display: flex; /* この中身（dtとdd）も横並びにする */
    align-items: flex-start;
    flex-basis: calc(50% - 10px); /* 横幅を「半分の50%」から隙間(15px)を引いたサイズにする */
    margin-bottom: 0.2rem; /* 下の行との隙間 */
	color: #ffffff !important;
}

/* 見出し（学校、スーパーなど）のスタイル */
.type--arroundinfo {
    flex: 0 0 120px  !important; /* 見出しの横幅（枠のサイズに合わせて調整してください） */
    width: 120px  !important;
	min-width: 120px !important;
	max-width: 120px !important;
    box-sizing: border-box !important;  /* 枠線や余白を含めてピッタリ110pxにする */
	
	/* 長い文字（ショッピングモール等）で枠が押し広げられるのを防ぐ */
    overflow-wrap: anywhere !important;
    word-break: normal !important;
	
    background-color: #3EB370; /* 枠内の背景色 */
    /*border: 1px solid #ccc;*/ /* 枠線の色 */
	border-radius: 4px !important;
    padding: 0px;
    margin-bottom: 12px; /* 下の行との隙間 */
    color: #ffffff !important;
	font-size: 0.7rem;
    font-weight: bold;
    text-align: center; /* 文字を中央寄せ */
    align-self: flex-start; /* 右側のテキストが長くても枠が縦に伸びないようにする */
}

/* 説明文（〇〇小学校まで徒歩5分など）のスタイル */
.disp--arroundinfo {
    flex: 1; /* 残りの横幅をすべて使う */
	padding: 0px 0px 0px 8px; /* 左側に少しスペースを開けて見出しと離す */
    margin: 0;
    font-size: 0.8rem;
    /*line-height: 1.5;*/
	color: #333 !important;
}

/* 【レスポンシブ】スマホなどの画面幅が狭い時は1列（1行に1つ）に戻す */
@media (max-width: 767px) {
    .arroundinfo-item {
        flex-basis: 100%; /* スマホでは横幅いっぱいに広げる */
        margin-bottom: 12px;
    }
    .disp--arroundinfo {
        font-size: 1rem; /* スマホで見やすいよう文字を少し大きく */
    }
}