@charset "UTF-8";
/* CSS Document */

/* 中身-モバイルファースト======================================================================================================== */

a[rel*="popup"]{
display: inline-block;
position: relative;
}
a[rel*="popup"]::after{
content: "";
display: block;
background-color: #ea5504;
background-image: url(../images/icon-zoom.svg);
background-repeat: no-repeat;
background-position: center center;
background-size: 50%;
width: 30px;
height: 30px;
border-radius: 30px;
position: absolute;
bottom: 10px;
right: 10px;
}


#detail_header{
position: relative;
margin-bottom: 40px;
}
#detail_header::before{
content: "";
display: block;
background-image: url(../images/img_character.svg);
background-repeat: no-repeat;
background-position: left top;
background-size: 100%;
width: 30%;
aspect-ratio: 1000/778;
position: absolute;
top: -20px;
right: 5vw;
z-index: -1;
}
#detail_header{
}
#detail_header .alpha{
margin-bottom: 20px;
}
#detail_header .type{
display: inline-block;
vertical-align: middle;
border: solid 1px #111;
font-size: 12px;
line-height: 1;
padding: 5px;
text-align: center;
white-space: nowrap;
}
/* .type_new #detail_header .type{ color: #ed7eae; border-color: #ed7eae; }
.type_use #detail_header .type{ color: #4f56a4; border-color: #4f56a4; }
.type_mansion #detail_header .type{ color: #ff6633; border-color: #ff6633; }
.type_land #detail_header .type{ color: #88c34e; border-color: #88c34e; }
.type_business #detail_header .type{ color: #c28dbd; border-color: #c28dbd; } */

#detail_header .icon_new{
display: inline-block;
vertical-align: middle;
color: #fff;
background-color: #ea5504;
border: solid 1px #ea5504;
font-size: 12px;
line-height: 1;
padding: 5px;
margin-left: 5px;
}
#detail_header .name{
font-size: 7vw;
line-height: 1.4;
font-weight: 700;
margin-top: 10px;
display: block;
}
#detail_header .price{
text-align: right;
font-weight: bold;
}
#detail_header .price .n{
font-size: 30px;
}
#detail_header dl{
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
}
#detail_header dt{
width: 4em;
background-color: #eee;
text-align: center;
margin-bottom: 10px;
}
#detail_header dd{
width: calc(100% - 4em - 10px);
margin-bottom: 10px;
}


#openhouse{
margin-bottom: 40px;
padding-top: 5vw;
padding-bottom: 5vw;
background: -webkit-repeating-linear-gradient(-45deg, #fffae6, #fffae6 10px,#fff5cc 10px, #fff5cc 20px);
background: repeating-linear-gradient(-45deg, #fffae6, #fffae6 10px,#fff5cc 10px, #fff5cc 20px);
color: #ea5504;
font-weight: 700;
}
#openhouse em{
display: block;
font-size: 20px;
}
#openhouse .schedule{
font-size: 16px;
}
#openhouse .comment{
border-top: solid 1px #ea5504;
padding-top: 5px;
margin-top: 5px;
}


#gallery{
}
#gallery .sliderArea {
overflow: hidden;
}
#gallery .sliderWide {
max-width: 100%;
margin: 0 auto;
}
#gallery .slider {
max-width: 320px;
margin: 0 auto;
padding: 0;
}
#gallery .slide{
margin: 0 10px;
}
#gallery .slide .photo{
background-color: #f7f6f6;
width: 300px;
height: 200px;
margin-bottom: 10px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
#gallery .slide .photo img{
display: block;
width: auto;
max-height: 200px;
vertical-align: top;
}
#gallery .slider .slick-list {
overflow: visible;
}
.slick-prev,
.slick-next{
top: 80px;
-webkit-transform: none;
-ms-transform: none;
transform: none;
}
.slick-prev{
left: -10px;
}
.slick-next{
right: -10px;
}


#movie iframe{
vertical-align: top;
width: 100%;
height: auto;
aspect-ratio: 16/9;
}


#catch_copy{
background-color: #fbddcd;
background-image: url(../images/bg_white.png);
background-image: -webkit-image-set(url(../images/bg_white.png) 1x, url(../images/bg_white@2x.png) 2x);
background-repeat: no-repeat;
background-position: left top;
background-size: cover;
padding-top: 40px;
padding-bottom: 40px;
}
#catch_copy p{
font-size: 16px;
font-weight: 700;
}




#layout li{
text-align: center;
margin-bottom: 20px;
}
#layout li:last-child{
margin-bottom: 0px;
}
#layout li img{
aspect-ratio: 4/3;
object-fit: contain;
}


#outline{
background-color: #f4f9e8;
padding-top: 60px;
padding-bottom: 60px;
}

#map{
}
#map iframe{
vertical-align: top;
}


#contact dl{
text-align: center;
background-color: #f6f6f5;
padding: 40px;
margin-bottom: 20px;
}
#contact dl:last-child{
margin-bottom: 0px;
}
#contact dl dt{
font-size: 18px;
font-weight: 700;
margin-bottom: 10px;
}
#contact dl.web dd div.form{
margin-bottom: 20px;
}
#contact dl.web dd div a{
display: grid;
place-content: center;
height: 50px;
text-decoration: none;
color: #fff;
font-weight: 700;
}
#contact dl.web dd div.form a{ background-color: #ea5504; }
#contact dl.web dd div.reserve a{ background-color: #90c31f; }

#contact dl.tel address{
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 10px;
}
#contact dl.tel address .icon img{
width: auto;
height: 24px;
margin-top: 5px;
margin-right: 5px;
}
#contact dl.tel address a{
font-size: 10vw;
font-weight: 700;
line-height: 1;
}
#contact dl.tel ul{
display: inline-block;
text-align: left;
margin-bottom: 10px;
}
#contact dl.tel p{
font-size: 12px;
}


#fixed_contact{
width: 100%;
display: flex;
position: fixed;
bottom: 0;
right: 0;
z-index: 5000;
}
#fixed_contact div{
width: 50%;
}
#fixed_contact div a{
display: grid;
place-content: center;
height: 50px;
text-decoration: none;
color: #fff;
font-weight: 700;
}
#fixed_contact div.form a{ background-color: #ea5504; }
#fixed_contact div.reserve a{ background-color: #90c31f; }


/* スマホのみ======================================================================================================== */
@media screen and (max-width: 750px){

.on#page_top_btn {
bottom: 70px;
}
}


/* PCのみ======================================================================================================== */
@media print, screen and (min-width: 751px){

#detail_header{
padding-left: 170px;
margin-bottom: 40px;
}
#detail_header::before{
width: 150px;
top: 0;
right: inherit;
left: 0;
}
#detail_header .alpha{
display: flex;
justify-content: space-between;
margin-bottom: 10px;
}
#detail_header .alpha .title{
display: flex;
align-items: center;
}
#detail_header .name{
font-size: 40px;
margin-top: 0;
margin-left: .25em;
}

#detail_header .beta{
display: flex;
justify-content: space-between;
align-items: flex-start;
}
#detail_header .price{
font-size: 20px;
white-space: nowrap;
}
#detail_header .price .n{
font-size: 40px;
}
#detail_header dt{
}
#detail_header dd{
}


#openhouse{
padding: 30px;
}
#openhouse em{
display: block;
font-size: 24px;
}
#openhouse .schedule{
font-size: 20px;
}
#openhouse .comment{
font-size: 18px;
}



#gallery{
}
#gallery .slider {
max-width: 1020px;
margin: 0 auto;
padding: 0;
}
#gallery .slide .photo{
width: 1000px;
height: 667px;
margin-bottom: 10px;
}
#gallery .slide .photo img{
max-height: 667px;
}
.slick-prev,
.slick-next,
.slick-prev:focus,
.slick-next:focus{
width: 50px;
height: 50px;
}
.slick-prev:before,
.slick-next:before{
width: 20px;
height: 20px;
background-size: auto 100%;
}
.slick-prev,
.slick-next{
top: 308.5px;
}
.slick-prev{
left: 10px;
}
.slick-next{
right: 10px;
}



#catch_copy{
padding-top: 100px;
padding-bottom: 100px;
}
#catch_copy p{
font-size: 20px;
}


#layout ul{
display: flex;
flex-wrap: wrap;
}
#layout li{
width: 48%;
margin-left: 4%;
margin-bottom: 4%;
}
#layout li:last-child{
margin-bottom: 4%;
}
#layout li:nth-child(odd){
margin-left: 0;
}

#outline{
padding-top: 100px;
padding-bottom: 100px;
}
#map iframe{
height: 600px;
}


#contact .inner{
width: 80%;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
#contact dl{
width: 48%;
padding-bottom: 0px;
margin-bottom: 0px;
padding: 40px;
}
#contact dl dt{
font-size: 20px;
}

#contact dl.web dd div a{
font-size: 20px;
padding: 35px 0;
}
#contact dl.web dd div a:hover{
background-color: #ffcc00;
}

#contact dl.tel address .icon img{
height: 40px;
}
#contact dl.tel address a{
font-size: 50px;
}


#member_only{
padding: 60px 0;
}
#member_only ul{
justify-content: flex-start;
}
#member_only ul li{
width: 32%;
margin-left: 2%;
}
#member_only ul li:nth-child(3n-2){
margin-left: 0;
}
#member_only ul li a:hover{
background-color: #a8a29e;
}
#member_only .comment{
margin-top: 40px;
display: flex;
align-items: center;
}
#member_only .comment dt{
font-size: 18px;
white-space: nowrap;
}
#member_only .comment dd{
flex: 1;
border-left: solid 1px #a8a29e;
padding-left: 20px;
margin-left: 20px;
}




#fixed_contact{
width: 65px;
flex-direction: column;
bottom: 50%;
transform: translateY(50%);
-webkit-transform: translateY(50%);
margin: auto 0;
}

#fixed_contact div:first-child{
margin-bottom: 10px;
}
#fixed_contact div a{
font-size: 20px;
width: 60px;
height: 150px;
margin-left: 5px;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
text-orientation: upright;
}
#fixed_contact div a:hover{
width: 65px;
margin-left: 0px;
background-color: #ffcc00;
}


}