@charset "utf-8";

/*========================================================================================================================


  ◇◆◇ 不動産関連 ◇◆◇
  
  
========================================================================================================================*/

/*----------------------------------------------------------------------------------------------------

  一覧
  
----------------------------------------------------------------------------------------------------*/
.estate-list {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: var(--space-2l) var(--space-m);
    margin-top: var(--space-3l);
}
@media (max-width: 1024px) {
    .estate-list {
        grid-template-columns: repeat(2,1fr);
    }
}
@media (max-width: 700px) {
    .estate-list {
        grid-template-columns: 1fr;
    }
}
.estate-list-thumnail {
    position: relative;
}
.estate-list-category {
    position: absolute;
    left: 24px;
    top: -24px;
    z-index: 2;
    overflow: hidden;
    width: 104px;
    height: 48px;
    line-height: var(--line-height-2s);
}
.estate-list-category svg {
    position: relative;
    inset: 0;
}
.estate-list-category.land svg { color: var(--color-primary); }
.estate-list-category.build svg { color: var(--color-secondary); }
.estate-list-category.rent svg { color: var(--color-thirdry); }
.estate-list-category.not-build svg { color: var(--color-red); }

.estate-list-category-text {
    position: absolute;
    left: calc(50% - 1em);
    top: 0.75em;
    color: #fff;
}
.estate-list-img {
    border-top-left-radius: var(--space-3s);
    border-top-right-radius: var(--space-3s);
    overflow: hidden;
    aspect-ratio: 4 / 3;
}
.estate-list-img img {
    object-fit: cover;
    aspect-ratio: 4 / 3;
    transition: 0.3s all ease-in-out;
}
.estate-list-thumnail:hover .estate-list-img img {
    transform: scale(1.1);
}
.estate-list-description {
    background-color: #fff;
    padding: var(--space-s);
    border-bottom-left-radius: var(--space-3s);
    border-bottom-right-radius: var(--space-3s);
}
.estate-list-cate {
    display: inline-block;
    padding: 0.25em 0.5em;
    background-color: var(--color-thirdry);
    color: #fff;
    font-size: var(--fs-3s);
    line-height: var(--line-height-2s);
    letter-spacing: 1.5pt;
}
.estate-list-comment {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.estate-list-description dt {
    color: #999;
    font-size: var(--fs-3s);
}
.estate-list-description dd {
    line-height: var(--line-height-2s);
}
.estate-list-address {
    margin-top: 1rem;
}
.estate-list-other-box {
    display: grid;
    align-items: end;
    grid-template-columns: 1fr 1fr;
    margin-top: 1rem;
}
.estate-list-other-box dd {
    text-align: right;
}
.estate-list-space {
    padding-right: var(--space-3s);
}
.estate-list-space dt {
    margin-bottom: 0.75em;
}
.estate-list-space dd {
    font-size: var(--fs-l);
}
.estate-list-price {
    padding-left: var(--space-3s);
    border-left: 1px solid var(--border-color);
}
.estate-list-price dd {
    font-size: var(--fs-3l);
    font-weight: bold;
}
.estate-list-price dd small {
    font-size: 1rem;
}
.estate-list-thumnail a {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
}


/*----------------------------------------------------------------------------------------------------

  詳細
  
----------------------------------------------------------------------------------------------------*/
.estate-detail {
    margin-top: var(--space-3l);
}

.estate-detail-firstview {
    display: grid;
    grid-template-columns: 600px auto;
    gap: var(--space-2l);
    margin: var(--space-2l);
    overflow: visible;
}
@media (max-width: 1024px) {
    .estate-detail-firstview {
        grid-template-columns: auto;
    }
}
@media (max-width: 590px) {
    .estate-detail-firstview {
        margin: var(--space-m);
    }
}
.estate-detail-intro {
    position: sticky;
    top: 180px;
    align-self: start;
}
@media (max-width: 1024px) {
    .estate-detail-intro {
        order: 2;
    }
}
.estate-detail-intro-bg {
    position: absolute;
    left: calc(var(--space-s) * -1);
    top: -70px;
    width: 80px;
    z-index: 1;
}
.estate-detail-intro-contents {
    position: relative;
    z-index: 2;
}
.estate-detail-title {
    font-size: var(--fs-2l);
    font-weight: bold;
    line-height: var(--line-height-2s);
    margin-bottom: 1.5em;
}
.estate-detail-primary {
    display: grid;
    grid-template-columns: 6em auto;
    border-top: 1px solid var(--border-color);
}
.estate-detail-primary > dt,
.estate-detail-primary > dd {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border-color);
    line-height: var(--line-height-s);
}
.estate-detail-primary > dt {
    color: #888;
    font-size: var(--fs-2s);
    font-weight: normal;
    line-height: var(--line-height-l);
}

.estate-detail-main-image {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-m);
    margin-bottom: var(--space-2l);
}
.estate-detail-main-image.one-pict {
    grid-template-columns: auto;
}
@media (max-width: 1440px) {
    .estate-detail-main-image {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 1024px) {
    .estate-detail-main-image {
        order: 1;
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 590px) {
    .estate-detail-main-image {
        grid-template-columns: 1fr;
    }
}
.estate-detail-main-image a {
    display: block;
    text-align: center;
}
.estate-detail-main-image a img {
    object-fit: contain;
    aspect-ratio: 4 / 3;
}
.estate-detail-sub-image {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: var(--space-m);
}
@media (max-width: 1440px) {
    .estate-detail-sub-image {
        grid-template-columns: repeat(2,1fr);
    }
}
@media (max-width: 1024px) {
    .estate-detail-sub-image {
        grid-template-columns: repeat(5,1fr);
    }
}
@media (max-width: 768px) {
    .estate-detail-sub-image {
        grid-template-columns: repeat(4,1fr);
    }
}
@media (max-width: 590px) {
    .estate-detail-sub-image {
        grid-template-columns: repeat(3,1fr);
    }
}
.estate-detail-sub-image a {
    display: block;
    text-align: center;
}
.estate-detail-sub-image a img {
    object-fit: contain;
    aspect-ratio: 4 / 3;
}

.estate-detail-outline {
    width: 100%;
    overflow: hidden;
    margin-top: var(--space-3l);
}
.estate-detail-outline .top-wave {
    width: 100%;
    min-width: 700px;
    height: 190px;
}
.estate-detail-contents {
    background-color: #fff;
    padding: var(--space-2l);
}
@media (max-width: 590px) {
    .estate-detail-contents {
        padding: var(--space-m);
    }
}
.estate-detail-outline-list {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 0 var(--space-s);
    margin-bottom: var(--space-3l);
}
@media (max-width: 1024px) {
    .estate-detail-outline-list {
        grid-template-columns: repeat(2,1fr);
    }
}
@media (max-width: 590px) {
    .estate-detail-outline-list {
        grid-template-columns: auto;
    }
}
.estate-detail-outline-list dl {
    display: grid;
    grid-template-columns: 6em auto;
}
.estate-detail-outline-list dl > dt,
.estate-detail-outline-list dl > dd {
    padding: 0.75rem;
    border-bottom: 1px solid var(--border-color);
    line-height: var(--line-height-s);
}
.estate-detail-outline-list dl > dt {
    color: #888;
    font-size: var(--fs-2s);
    font-weight: normal;
    line-height: var(--line-height-l);
}
.estate-detail-youtube,
.estate-detail-theta {
    margin-top: var(--space-2l);
    text-align: center;
}
.estate-detail-youtube iframe,
.estate-detail-theta .ricoh-theta-tour-image {
    width: 100%;
    max-width: 1200px;
    aspect-ratio: 16 / 9;
    border: none;
    margin: 0 auto;
}


.estate-detail-pageback {
    margin-top: var(--space-2l);
    text-align: center;
}

.estate-detail-fix-btn {
    position: fixed;
    top: 200px;
    right: 0;
    z-index: 10;
}
.estate-detail-fix-btn .c-btn {
    display: block;
    width: 80px;
    height: 80px;
    margin-bottom: var(--space-3s);
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    padding: 0.5em 0.75em;
    line-height: 1;
    align-content: center;
}
@media (max-width: 768px) {
    .estate-detail-fix-btn .c-btn {
        width: 54px;
        height: 54px;
        padding: 0.25em 0.5em;
    }
}

/*----------------------------------------------------------------------------------------------------

  物件詳細・地図
  
----------------------------------------------------------------------------------------------------*/
#map_canvas {
	width:100%;
	height:500px;
}
#map_canvas .popup_usual {
    display:inline-block;
    width:auto;
    line-height:160%;
}
#map_canvas .popup_usual b {
    display:inline-block;
    font-size:15px;
    margin:5px 0 0 0;
}

.gmap_btn {
    margin-top: 15px;
    font-size: 13px;
    text-align: center;
    float: left;
    display: block;
    position: relative;
    width: 220px;
    height: 40px;
    line-height: 40px;
    padding: 0 0.5em;
    text-decoration: none;
    color: #FFF;
    background: #fd9535;
    border-bottom: 2px solid #d27d00;
    border-radius: 4px;
    font-weight: bold;
    margin-left: 15px;
    margin-bottom: 15px;
}