@charset "UTF-8";

/* =========================================================
property
========================================================= */
.property {width: min(1020px, 92%);margin: auto;padding: 80px 0;}

/* =========================================================
list
========================================================= */

ul.list {display: grid;grid-template-columns: repeat(3, 1fr);gap: 24px;margin: 0;padding: 0;list-style: none;}
ul.list li {display: block;text-align: left;}


/* =========================================================
card
========================================================= */

ul.list li a {position: relative;display: block;height: 100%;padding: 15px;box-sizing: border-box;overflow: hidden;background: #fff;border: 1px solid #ddd;border-radius: 10px;box-shadow: 0 2px 10px rgba(0, 0, 0, .08);color: #333;text-decoration: none;transition: .3s;transform-origin: center;}
ul.list li a:hover {transform: translateY(-6px);box-shadow: 0 10px 25px rgba(0, 0, 0, .15);}
@media screen and (max-width: 767px) {
ul.list li a:hover {transform: initial;box-shadow: 0 2px 10px rgba(0, 0, 0, .08);}
}

ul.list li .sold {position: relative;display: block;height: 100%;padding: 15px;box-sizing: border-box;overflow: hidden;background: #fff;border: 1px solid #ddd;border-radius: 10px;box-shadow: 0 2px 10px rgba(0, 0, 0, .08);color: #333;text-decoration: none;transition: .3s;transform-origin: center;}

/* =========================================================
image
========================================================= */


/* 
ul.list .photo {position: relative;overflow: hidden;border-radius: 6px;margin: 0 0 20px;}
ul.list .photo img {display: block;width: 100%;height: 240px;object-fit: cover;transition: transform .5s ease;}
*/

ul.list .photo {position: relative;aspect-ratio: 4 / 3;overflow: hidden;border-radius: 6px;margin: 0 0 20px;display: flex;justify-content: center;align-items: center;}
ul.list .photo img {width: 100%;height: 100%;object-fit: cover;display: block;}





.property_list .sold_text {position: absolute;top: 50%;left: 50%;transform: translateY(-50%) translateX(-50%);-webkit- transform: translateY(-50%) translateX(-50%);width: 100%;padding: 12px 10px;background: rgba(255,216,0,0.8);color: #000;font-size: 16px;font-weight: bold;text-align: center;z-index: 2;box-sizing: border-box;}

/* =========================================================
label
========================================================= */

/* NEW */
ul.list .photo .new {position: absolute;top: 5px;right: 5px;z-index: 20;padding: 4px 6px;background: #e60012;border-radius: 4px;box-shadow: 0 2px 6px rgba(0, 0, 0, .2);color: #fff;font-size: 12px;font-weight: bold;line-height: 1;letter-spacing: .08em;}

/* TYPE */
ul.list .type {position: absolute;top: 20px;left: 20px;z-index: 10;margin: 0;padding: 4px 10px;background: var(--blue-color);border-radius: 100px;color: #fff;font-size: 12px;font-weight: bold;line-height: 1.2;}

/* =========================================================
title
========================================================= */
ul.list .name {margin:0 0 10px;font-size: 18px;font-weight: bold;line-height: 1.6;}

/* =========================================================
detail
========================================================= */

ul.list .address,
ul.list .station,
ul.list .hibei,
ul.list .hibei2,
ul.list .hibei3{position: relative;margin-bottom: 8px;font-size: 14px;line-height: 1.6;}

/* ラベル余白 */
ul.list .address {padding-left: 5em;}
ul.list .station {padding-left: 5em;}
ul.list .hibei,
ul.list .hibei2,
ul.list .hibei3{padding-left: 5em;}

/* 共通ラベル */
ul.list .address:before,
ul.list .station:before,
ul.list .hibei:before,
ul.list .hibei2:before,
ul.list .hibei3:before{position: absolute;top: 0;left: 0;background: #000;width: 5em;text-align: center;border-radius: 4px;color: #fff;font-size: 12px;line-height: 1;padding: .4em 0 .5em}

/* ラベル */
ul.list .address:before {content: "所在地";}
ul.list .station:before {content: "交　通";}
ul.list .hibei:before {content: "専有面積";}
ul.list .hibei2:before {content: "敷地面積";}
ul.list .hibei3:before {content: "建物面積";}

/* =========================================================
price
========================================================= */

ul.list .price {margin: 0 0 10px;font-size: 16px;font-weight: bold;color: #222;}
ul.list .price span {font-size: 28px;line-height: 1;color: #e60012;}

/* =========================================================
comment
========================================================= */

ul.list .comment {padding-right: 40px;font-size: 14px;line-height: 1.6;color: var(--blue-color);}

/* =========================================================
arrow
========================================================= */

ul.list li a:before {content: '';position: absolute;right: 15px;bottom: 15px;z-index: 10;width: 24px;height: 24px;background: #ffd800;border-radius: 50%;}
ul.list li a:after {content: '';position: absolute;right: 23px;bottom: 23px;z-index: 11;width: 0;height: 0;border-style: solid;border-width: 4px 0 4px 6px;border-color: transparent transparent transparent #000;}


/* =========================================================
tablet
========================================================= */

@media screen and (max-width: 1024px) {
.property {padding: 5.66vw 0;}
ul.list {grid-template-columns: repeat(2, 1fr);gap: 20px;}


ul.list .photo {margin: 0 0 1.88vw;}
ul.list .photo img {height: 28vw;min-height: 220px;}




.property_list .sold_text {padding: 1.13vw 0.94vw;font-size: 1.5vw;}
ul.list .type {font-size: 1.1vw;}
ul.list .name {margin: 0 0 2.5vw;font-size: 1.8vw;}

ul.list .address,
ul.list .station,
ul.list .hibei,
ul.list .hibei2,
ul.list .hibei3{font-size: 1.35vw;}
ul.list .price {margin: 0 0 0.94vw;font-size: 1.5vw;}
ul.list .price span {font-size: 2.7vw;}
ul.list .photo .new {font-size: 1.1vw;}
ul.list .comment {padding-right: 3.77vw;font-size: 1.32vw;}
}


/* =========================================================
smartphone
========================================================= */

@media screen and (max-width: 767px) {
.property {width: 88%;padding: 40px 0;}
ul.list {grid-template-columns: 1fr;gap: 18px;}
ul.list li a {padding: 5vw;border-radius: 8px;}
ul.list li .sold {	padding: 5vw;border-radius: 8px;}
ul.list .photo {margin: 0 0 5vw;}
ul.list .photo img {height: 58vw;max-height: 260px;}
.property_list .sold_text {padding: 2vw 0;font-size: 3vw;}
ul.list .type {top: 7.5vw;left: 7.5vw;padding: 4px 8px;font-size: 2.8vw;}
ul.list .photo .new {top: 2.5vw;right: 2.5vw;font-size: 2.8vw;}
ul.list .name {margin: 0 0 2.5vw;font-size: 4vw;}
ul.list .address,
ul.list .station,
ul.list .hibei {margin-bottom:2vw;font-size: 3vw;line-height: 1.6;}
ul.list .address {padding-left: 5em;}
ul.list .station {padding-left: 5em;}
ul.list .hibei {padding-left: 5em;}
ul.list .price {margin: 0 0 2.5vw;font-size: 3vw;}
ul.list .price span {font-size: 4.4vw;}
ul.list .comment {font-size: 3vw;}
ul.list li a:before {right: 12px;bottom: 12px;width: 20px;height: 20px;}
ul.list li a:after {right: 19px;bottom: 18px;}
}



/* =========================================================
pagination
========================================================= */

.pagination {display: flex;justify-content: center;align-items: center;flex-wrap: wrap;gap: 12px;margin-top: 60px;}
.pagination ul {display: flex;flex-wrap: wrap;justify-content: center;gap: 10px;margin: 0;padding: 0;list-style: none;}
.pagination a {display: flex;justify-content: center;align-items: center;min-width: 48px;height: 48px;padding: 0 16px;box-sizing: border-box;background: #fff;border: 1px solid #ddd;border-radius: 8px;color: #333;font-size: 14px;font-weight: bold;text-decoration: none;transition: .3s;}
.pagination a:hover {background: var(--blue-color);border-color: var(--blue-color);color: #fff;transform: translateY(-2px);}
.pagination a.current {background: var(--blue-color);border-color: var(--blue-color);color: #fff;pointer-events: none;}
.pagination .prev,
.pagination .next {padding: 0 2vw;}

/* =========================================================
tablet
========================================================= */

@media screen and (max-width: 1024px) {
.pagination {gap: 10px;margin-top: 50px;}
.pagination ul {gap: 8px;}
.pagination a {min-width: 48px;height: 48px;padding: 0 14px;font-size: 14px;}
}


/* =========================================================
smartphone
========================================================= */

/* スマホでも「前へ」「次へ」を横並び */

@media screen and (max-width: 767px) {
.pagination {display: flex;justify-content: center;align-items: center;flex-wrap: nowrap;}
.pagination .prev,
.pagination .next {flex-shrink: 0;}
.pagination ul {display: flex;flex-wrap: wrap;justify-content: center;}
.pagination a {min-width: 8vw;height: 8vw;padding: 0 1vw;font-size: 3vw;}
}



/* =========================================================
animation
========================================================= */

.property_list {opacity: 0;transform: translateY(30px);transition:opacity .6s ease,transform .6s ease;}
.property_list.show {opacity: 1;transform: translateY(0);}








/* =========================================================
detail
========================================================= */

.detail {width: min(1020px, 92%);margin: auto;padding: 80px 0;}
@media screen and (max-width: 1120px) {
.detail {padding: 7.84vw 0;}

}
@media screen and (max-width: 767px) {

}



/* =========================================================
header
========================================================= */

.detail_head {display: grid;grid-template-columns: 58% 1fr;gap: 50px;align-items: start;margin-bottom: 70px;}
.top_pic_block {}
.top_pic_block .cap {margin-top: 10px;font-size: 13px;line-height: 1.6;text-align: left;}
.top_pic {position: relative;}

/* NEW */
.top_pic .new {position: absolute;top: 20px;right: 20px;z-index: 20;padding: 6px 10px;background: #e60012;border-radius: 4px;box-shadow: 0 2px 6px rgba(0,0,0,.2);color: #fff;font-size: 12px;font-weight: bold;line-height: 1;letter-spacing: .08em;}
.top_pic .type {position: absolute;top: 20px;left: 20px;z-index: 10;padding: 6px 14px;background: var(--blue-color);border-radius: 100px;color: #fff;font-size: 12px;font-weight: bold;line-height: 1;}
.top_pic {position: relative;aspect-ratio: 4 / 3;overflow: hidden;border-radius: 14px;}
.top_pic img {width: 100%;height: 100%;object-fit: cover;display: block;}
@media screen and (max-width: 1120px) {

.detail_head {gap: 4.90vw;margin-bottom: 6.86vw;}
.top_pic_block .cap {margin-top: 0.94vw;font-size: 1.22vw;}
.top_pic .new {top: 1.88vw;right: 1.88vw;padding: 0.56vw 0.94vw;border-radius: 0.37vw;box-shadow: 0 2px 0.56vw rgba(0,0,0,.2);font-size: 1.13vw;}
.top_pic .type {top: 1.88vw;left: 1.88vw;padding: 0.56vw 1.32vw;border-radius: 9.8vw;font-size: 1.13vw;}
.top_pic {border-radius: 1.32vw;}

}
@media screen and (max-width: 767px) {
.top_pic_block .cap {margin-top: 2.5vw;font-size: 3vw;}
}



/* =========================================================
header_text
========================================================= */

.header_text {position: sticky;top: 100px;}
.header_text .name {margin: 0 0 20px;font-size: 28px;font-weight: 700;line-height: 1.4;text-align: left;color:  var(--blue-color);}
.header_text .address,
.header_text .station,
.header_text .hibei,
.header_text .hibei2,
.header_text .hibei3{position: relative;margin-bottom: 12px;padding-left: 5em;font-size: 14px;line-height: 1.6;text-align: left;}
.header_text .station {padding-left: 5em;}
.header_text .hibei,
.header_text .hibei2,
.header_text .hibei3{padding-left: 5em;}
.header_text .address:before,
.header_text .station:before,
.header_text .hibei:before,
.header_text .hibei2:before,
.header_text .hibei3:before{position: absolute;top: 0;left: 0;background: #000;width: 5em;text-align: center;border-radius: 4px;color: #fff;font-size: 12px;padding: .1em 0 .2em;}
.header_text .address:before {content: "所在地";}
.header_text .station:before {content: "交　通";}
.header_text .hibei:before{content: "専有面積";}
.header_text .hibei2:before{content: "敷地面積";}
.header_text .hibei3:before{content: "建物面積";}
.header_text .price {margin:  20px 0;padding: 10px 0 13px;font-size: 16px;font-weight: bold;line-height: 1.6;border-bottom: 1px solid #ddd;border-top: 1px solid #ddd;}
.header_text .price span {font-size: 28px;line-height: 1;color: #e60012;}
.header_text .comment {margin-bottom: 35px;font-size: 15px;line-height: 1.6;color: var(--blue-color);text-align: left;}
@media screen and (max-width: 1120px) {

.header_text {top: 9.8vw;}
.header_text .name {margin: 0 0 1.88vw;font-size: 2.64vw;}
.header_text .address,
.header_text .station,
.header_text .hibei,
.header_text .hibei2,
.header_text .hibei3{margin-bottom: 1.13vw;font-size: 1.32vw;}
.header_text .address:before,
.header_text .station:before,
.header_text .hibei:before,
.header_text .hibei2:before,
.header_text .hibei3:before{border-radius: 0.37vw;}
.header_text .price {margin:  1.88vw 0;padding: 0.94vw 0 1.22vw;font-size: 1.5vw;}
.header_text .price span {font-size: 2.64vw;}
.header_text .comment {margin-bottom: 3.43vw;font-size: 1.41vw;}


}
@media screen and (max-width: 767px) {
.header_text .address:before,
.header_text .station:before,
.header_text .hibei:before,
.header_text .hibei2:before,
.header_text .hibei3:before{font-size: 2.8vw;}
}







.main_copy {margin-bottom: 80px;}
.main_copy p.text {font-size: 18px;line-height: 1.6;color: var(--blue-color);text-align: left;}


@media screen and (max-width: 1120px) {
.main_copy {margin-bottom: 7.84vw;}
.main_copy p.text  {font-size: 1.69vw;}
}

@media screen and (max-width: 767px) {
.main_copy {margin-bottom: 5vw;}
.main_copy p.text  {font-size: 3vw;}
}



/* =========================================================
outline
========================================================= */
.outline {margin-bottom: 80px;padding: 40px;background: #fff;border-radius: 20px;box-shadow: 0 10px 30px rgba(0,0,0,.05);}
.outline table {width: 100%;border-collapse: collapse;}
.outline th,
.outline td {padding: 18px;border-bottom: 1px solid #ddd;font-size: 14px;line-height: 1.6;vertical-align: top;text-align: left;}
.outline th {width: 18%;background: #eff5f6;font-weight: bold;color: #222;}
.outline tr:first-child th,
.outline tr:first-child td {border-top: 1px solid #ddd;}
@media screen and (max-width: 1120px) {
.outline {margin-bottom: 7.84vw;padding: 3.77vw;border-radius: 1.88vw;box-shadow: 0 0.94vw 2.94vw rgba(0,0,0,.05);}
.outline th,
.outline td {padding: 1.69vw;font-size: 1.32vw;}

}

@media screen and (max-width: 767px) {

.outline {margin-bottom: 5vw;overflow-x: auto;-webkit-overflow-scrolling: touch;}
.outline table {min-width: 700px;}

.outline th,
.outline td {padding: 2.5vw;font-size: 3vw;}

}





/* =========================================================
staff_comment
========================================================= */
.staff_comment {margin-bottom: 80px;background: #eff5f6;padding: 40px;border-radius: 20px;}
.staff_comment .text {margin-bottom: 20px;font-size: 16px;line-height: 1.6;text-align: left;}
.staff_comment ul {display: grid;grid-template-columns: repeat(3,1fr);gap: 20px;margin: 0;padding: 0;list-style: none;}
.staff_comment li {aspect-ratio: 4 / 3;overflow: hidden;border-radius: 14px;}
.staff_comment li img {width: 100%;height: 100%;object-fit: cover;display: block;}
@media screen and (max-width: 1120px) {
.staff_comment {margin-bottom: 7.84vw;padding: 3.77vw;border-radius: 1.88vw;}
.staff_comment .text {margin-bottom: 1.88vw;font-size: 1.5vw;}
.staff_comment ul {gap: 1.88vw;}
.staff_comment li {border-radius: 1.32vw;}

}
@media screen and (max-width: 767px) {


.staff_comment {margin-bottom: 5vw;padding: 5vw;}
.staff_comment .text {margin-bottom: 2.5vw;font-size: 3vw;}
.staff_comment ul {gap: 2.5vw;}


}

/* =========================================================
gallery
========================================================= */

.pic {margin-bottom: 80px;}
.pic ul {display: grid;grid-template-columns: repeat(3,1fr);gap: 24px;margin: 0;padding: 0;list-style: none;}
.pic li {}

/* 
.pic .pic_block {aspect-ratio: 4 / 3;border-radius: 16px;overflow: hidden;display: flex;justify-content: center;align-items: center;object-fit: contain;}
.pic .pic_block img {width: auto;height: auto;display: block;object-fit: contain;border-radius: 16px; }
*/

.pic .pic_block {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 16px;

    display: flex;
    justify-content: center;
    align-items: center;
}

.pic .pic_block img {
    width: auto;
    height: 100%;
    max-width: 100%;
    display: block;
    border-radius: 16px;
}


.pic .text {padding: 15px;font-size: 14px;line-height: 1.6;text-align: left;}
@media screen and (max-width: 1120px) {
.pic {margin-bottom: 7.84vw;}
.pic ul {gap: 2.35vw;}
.pic .pic_block {border-radius: 1.5vw;}
.pic .pic_block img {border-radius: 1.5vw;}
.pic .text {padding: 1.41vw;font-size: 1.32vw;}
}
@media screen and (max-width: 767px) {

}

/* =========================================================
bigPhoto
========================================================= */

.bigPhoto {margin-bottom: 80px;text-align: center;}
.bigPhoto img {max-width: 100%;height: auto;box-sizing: border-box;}
.bigPhoto .cap {margin-top: 10px;font-size: 13px;}
@media screen and (max-width: 1120px) {
.bigPhoto {margin-bottom: 7.84vw;}
.bigPhoto .cap {margin-top: 0.94vw;font-size: 1.22vw;}
}
@media screen and (max-width: 767px) {
.bigPhoto {margin-bottom: 5vw;}
.bigPhoto .cap {margin-top: 2vw;font-size: 3vw;}
}

/* =========================================================
googleMap
========================================================= */

.googleMap {margin-bottom: 80px;overflow: hidden;border-radius: 20px;box-shadow: 0 10px 30px rgba(0,0,0,.08);}
.googleMap iframe {display: block;width: 100%;height: 500px;border: 0;}
@media screen and (max-width: 1120px) {
.googleMap {margin-bottom: 7.84vw;border-radius: 1.88vw;box-shadow: 0 0.94vw 2.94vw rgba(0,0,0,.08);}
.googleMap iframe {height: 49.01vw;}
}
@media screen and (max-width: 767px) {
.googleMap {margin-bottom: 5vw;}
}



/* =========================================================
smartphone
========================================================= */

@media screen and (max-width: 767px) {
.detail {width: 90%;padding: 5% 0;}
.detail_head {grid-template-columns: 1fr;gap: 2.5%;margin-bottom: 5%;}
.top_pic .new {top: 5%;right: 5%;font-size: 3vw;}
.top_pic .type {top: 5%;left: 5%;font-size: 3vw;}
.header_text {position: static;margin: 0 0 10vw;}
.header_text .name {margin-bottom: 2.5%;font-size: 5vw;}
.header_text .address,
.header_text .station,
.header_text .hibei,
.header_text .hibei2,
.header_text .hibei3{margin-bottom: 2vw;font-size: 3.4vw;line-height: 1.6;}
.header_text .address {padding-left: 5em;}
.header_text .station {padding-left: 5em;}
.header_text .hibei,
.header_text .hibei2,
.header_text .hibei3{padding-left: 5em;}
.header_text .price {margin: 5vw 0;font-size: 4vw;}
.header_text .price span {font-size: 9vw;}
.header_text .comment {font-size: 3.8vw;}


.pic {margin-bottom: 5vw;}
.pic ul {grid-template-columns: repeat(2,1fr);gap: 2.5vw;}
.pic img {height: 32vw;}
.pic .text {padding: 2vw 0 0;font-size: 3vw;}


}



/* =========================================================
scroll animation
========================================================= */

.fadein {
	opacity: 0;	transform: translateY(40px);	transition:
		opacity .8s ease,
		transform .8s ease;}

.fadein.show {
	opacity: 1;	transform: translateY(0);}







.shop_info {margin-top: 80px;padding: 40px;background: var(--blue-color);border-radius: 24px;}
.shop_info h2 {font-size: 32px;text-align: center;margin-bottom: 30px;color: #fff;}
.shop_box {text-align: center;}
.shop_name {font-size: 24px;line-height: 1.6; font-weight: 700;margin-bottom: 20px;color: #fff;}
.shop_name span {margin-left: 1em;}
.shop_info_address,
.shop_info_tel,
.shop_info_time {font-size: 14px;line-height: 1.6;margin:0 10px 20px;display: inline-block;color: #fff;}

@media screen and (max-width: 1120px) {
.shop_info {margin-top: 7.84vw;padding: 3.77vw;border-radius: 2.35vw;}
.shop_info h2 {font-size: 3.13vw;margin-bottom: 2.94vw;}
.shop_name {font-size: 2.35vw;margin-bottom: 1.88vw;}
.shop_info_address,
.shop_info_tel,
.shop_info_time  {font-size: 1.32vw;margin:0 0.94vw 1.88vw;}

}


@media screen and (max-width: 767px) {

.shop_info {margin-top: 5vw;padding: 5vw;border-radius: 2.5vw;}
.shop_info h2 {font-size: 4.4vw;margin-bottom: 5vw;}
.shop_name {font-size: 3.4vw;margin-bottom: 2.5vw;}
.shop_name span {display: block;}
.shop_info_address,
.shop_info_tel,
.shop_info_time  {font-size: 3vw;margin:0;display: block;}
.shop_info_time {margin: 0 0 5vw;}

}